/**
 * 日報管理システム - モバイルレスポンシブスタイル
 * iPhone SE3（375px）をメインターゲット
 * 軽量で実用的なモバイル対応
 */

/* ============================================
   Pull to Refresh 無効化（iPhone Safari対応）
   シンプル版 - スクロール挙動の安定性重視
   ============================================ */

/* 全デバイスでPull to Refreshを無効化 */
html {
    overscroll-behavior-y: none;
}

body {
    overscroll-behavior-y: none;
}

/* ============================================
   iPhone SE3（375px）用メディアクエリ
   ============================================ */
@media (max-width: 576px) {

    /* ========== 基本レイアウト ========== */
    body {
        font-size: 14px;
    }

    html,
    body {
        overflow-x: hidden;
    }

    .container {
        padding-left: 8px;
        padding-right: 8px;
    }

    .container-fluid {
        padding-left: 8px;
        padding-right: 8px;
    }

    /* ========== ナビゲーション ========== */
    .navbar {
        padding: 0.5rem 0;
    }

    .navbar-brand {
        font-size: 1rem;
        padding: 0.25rem 0;
    }

    .navbar-nav .nav-link {
        padding: 0.5rem 0.75rem !important;
        font-size: 0.9rem;
    }

    /* マスター管理とその他のドロップダウンを非表示 */
    .navbar-nav li:nth-child(4),
    .navbar-nav li:nth-child(5) {
        display: none;
    }

    /* アイコン化: テキストを非表示、アイコンのみ表示 */
    .nav-item a.nav-link {
        position: relative;
        min-width: 44px;
        height: 44px;
        display: flex;
        align-items: center;
        justify-content: center;
    }

    /* ドロップダウン非表示（マスター系） */
    .nav-item.dropdown:nth-child(4),
    .nav-item.dropdown:nth-child(5) {
        display: none !important;
    }

    /* ユーザー名表示を簡潔に */
    .navbar-nav.ms-auto .nav-link {
        font-size: 0.8rem;
        padding: 0.5rem !important;
    }

    /* ========== ダッシュボード ========== */
    .row {
        margin-left: -4px;
        margin-right: -4px;
    }

    .col-md-4,
    .col-md-6,
    .col-lg-3,
    .col-12 {
        padding-left: 4px;
        padding-right: 4px;
        width: 100%;
        max-width: 100%;
    }

    .card {
        margin-bottom: 0.75rem;
        border-radius: 0.5rem;
    }

    .card-header {
        padding: 0.75rem;
        font-size: 0.9rem;
    }

    .card-header h5 {
        font-size: 0.9rem;
        margin-bottom: 0;
    }

    .card-body {
        padding: 0.75rem;
    }

    .icon-box {
        width: 40px !important;
        height: 40px !important;
        font-size: 18px !important;
    }

    /* ダッシュボードのカード配置 */
    .card mb-4 {
        margin-bottom: 0.5rem !important;
    }

    h1 {
        font-size: 1.5rem;
        margin-bottom: 0.5rem;
    }

    .lead {
        font-size: 1rem;
    }

    /* ========== テーブル ========== */
    .table-responsive {
        font-size: 0.85rem;
    }

    .table {
        font-size: 0.85rem;
        margin-bottom: 0.5rem;
    }

    .table thead {
        font-size: 0.8rem;
    }

    .table th,
    .table td {
        padding: 0.4rem 0.25rem;
    }

    /* アクションボタン */
    .btn-group-action {
        display: flex;
        gap: 0.25rem;
        flex-wrap: wrap;
    }

    .btn-group-action .btn {
        padding: 0.25rem 0.5rem;
        font-size: 0.75rem;
        flex: 1;
        min-width: 50px;
    }

    /* ========== ボタン ========== */
    .btn {
        padding: 0.5rem 0.75rem;
        font-size: 0.9rem;
        min-height: 44px;
        display: flex;
        align-items: center;
        justify-content: center;
    }

    .btn-sm {
        padding: 0.35rem 0.5rem;
        font-size: 0.8rem;
        min-height: 36px;
    }

    .btn-group .btn {
        margin: 0;
    }

    /* ========== フォーム ========== */
    .form-group {
        margin-bottom: 1rem;
    }

    .form-control,
    .form-select,
    textarea {
        font-size: 16px;
        /* iOSのオートズームを防ぐ */
        padding: 0.75rem;
        width: 100%;
        min-height: 44px;
    }

    .form-check {
        padding-left: 0;
        margin-bottom: 0.5rem;
    }

    .form-check-input {
        width: 20px;
        height: 20px;
        margin-top: 0.35rem;
    }

    label {
        margin-bottom: 0.3rem;
        font-size: 0.9rem;
        font-weight: 600;
    }

    /* ========== リスト ========== */
    .list-group-item {
        padding: 0.75rem;
        font-size: 0.9rem;
    }

    .list-group-item a {
        word-break: break-word;
    }

    /* ========== バッジ ========== */
    .badge {
        font-size: 0.75rem;
        padding: 0.35rem 0.5rem;
    }

    /* ========== アラート ========== */
    .alert {
        padding: 0.75rem;
        margin-bottom: 0.5rem;
        font-size: 0.9rem;
    }

    .alert-dismissible .btn-close {
        padding: 0;
    }

    /* ========== モーダル ========== */
    .modal-header {
        padding: 0.75rem;
    }

    .modal-body {
        padding: 0.75rem;
    }

    .modal-footer {
        padding: 0.75rem;
        gap: 0.5rem;
    }

    .modal-dialog {
        max-height: 90vh;
        margin: 0.5rem;
    }

    .modal-content {
        max-height: calc(90vh - 2rem);
    }

    .modal-body {
        max-height: calc(90vh - 8rem);
        overflow-y: auto;
    }

    /* モーダルレスポンシブ対応 */
    .modal-responsive {
        max-width: 95vw;
    }

    .modal-responsive .modal-body {
        font-size: 0.9rem;
    }

    /* ========== パジネーション ========== */
    .pagination {
        gap: 0.25rem;
        margin: 0.75rem 0;
    }

    .pagination .page-link {
        padding: 0.35rem 0.5rem;
        font-size: 0.8rem;
    }

    /* ========== ドロップダウン ========== */
    .dropdown-menu {
        font-size: 0.9rem;
    }

    .dropdown-item {
        padding: 0.5rem 0.75rem;
    }

    /* ========== 検索・フィルター ========== */
    .search-box {
        margin-bottom: 1rem;
    }

    .search-input {
        font-size: 16px;
        padding: 0.75rem;
    }

    .filter-panel {
        padding: 0.75rem;
        margin-bottom: 1rem;
    }

    /* ========== カレンダー対応 ========== */
    .calendar-container {
        padding: 0;
    }

    .calendar-header {
        padding: 0.5rem;
        font-size: 0.9rem;
    }

    .calendar-grid {
        gap: 2px;
    }

    .calendar-day {
        padding: 0.4rem;
        font-size: 0.75rem;
        min-height: 40px;
    }

    /* ========== 日報・書類入力フォーム ========== */
    .form-section {
        margin-bottom: 1rem;
        padding: 0.75rem;
        border-radius: 0.5rem;
    }

    .form-section-title {
        font-size: 0.95rem;
        font-weight: 600;
        margin-bottom: 0.75rem;
        border-bottom: 2px solid #dee2e6;
        padding-bottom: 0.5rem;
    }

    .input-group {
        display: flex;
        flex-direction: column;
        gap: 0.5rem;
    }

    .input-group-append,
    .input-group-prepend {
        width: 100%;
    }

    .input-group-append .btn,
    .input-group-prepend .btn {
        width: 100%;
    }

    /* ========== アイテムテーブル（見積・請求書など） ========== */
    .items-table {
        font-size: 0.8rem;
        overflow-x: auto;
    }

    .items-table table {
        width: 100%;
        font-size: 0.8rem;
    }

    .items-table th,
    .items-table td {
        padding: 0.3rem;
        text-align: left;
    }

    /* ========== 通知・メッセージ ========== */
    .notification-container {
        max-width: 90%;
        width: calc(100% - 16px);
        margin: 0 8px;
    }

    .notification-top-right {
        top: 50px;
        right: 8px;
        left: auto;
    }

    .notification {
        padding: 0.75rem;
        font-size: 0.9rem;
    }

    /* ========== 浮動ボタン（FAB）用 ========== */
    .floating-action-button {
        width: 50px;
        height: 50px;
        min-width: 50px;
        min-height: 50px;
    }

    /* ========== 印刷スタイル ========== */
    @media print {

        .navbar,
        .footer,
        .btn,
        .search-box,
        .filter-panel {
            display: none !important;
        }

        body {
            margin: 0;
            padding: 0;
        }

        .container {
            max-width: 100%;
            padding: 0;
        }
    }

}

/* ============================================
   小型タブレット対応（577px～768px）
   ============================================ */
@media (min-width: 577px) and (max-width: 768px) {

    .container {
        padding-left: 10px;
        padding-right: 10px;
    }

    .col-md-4,
    .col-md-6 {
        width: 100%;
        max-width: 100%;
    }

    .btn {
        min-height: 40px;
    }

    .form-control,
    .form-select {
        font-size: 15px;
        min-height: 40px;
    }

}

/* ============================================
   横向き対応（ランドスケープ）
   ============================================ */
@media (max-height: 500px) {

    .navbar-brand {
        font-size: 0.9rem;
    }

    .navbar-nav .nav-link {
        padding: 0.25rem 0.5rem !important;
    }

    h1 {
        font-size: 1.2rem;
        margin-bottom: 0.25rem;
    }

    .card {
        margin-bottom: 0.5rem;
    }

    .card-body {
        padding: 0.5rem;
    }

}