@media (max-width: 820px) {
      .mgmt-emp-row { align-items:flex-start; flex-wrap:wrap; }
      .mgmt-employee-notes { flex-basis:100%; max-width:none; padding-left:28px; }
      .mgmt-shift-current { width:100%; flex-basis:100%; padding-left:28px; }
      .mgmt-filter-bar { overflow-x:auto; }
      .employee-default-grid { grid-template-columns:1fr; }
      .employee-default-actions { grid-column:1; }
      .shift-period-list { overflow-x:auto; }
      .mobile-scroll-hint { display:block; padding:0 2px; }
      .shift-period-scroll-hint { margin-top:-4px; }
      .adj-summary-scroll-hint, .adj-person-scroll-hint { padding:6px 10px; border-bottom:1px solid var(--border); background:#faf9f6; }
    }
    @media (min-width: 900px) and (max-height: 900px) {
      .adj-calc-toolbar { padding:4px 12px; }
      .adj-metric-grid { padding:1px 10px 4px; }
      .adj-person-viewbar { padding:2px 10px; }
      .adj-calendar-wrap { padding:2px 8px 3px; }
      .adj-calendar-cell { min-height:92px; padding:2px 4px; }
      .adj-cal-date { line-height:22px; }
      .adj-calendar-cell > .adj-cal-corner { top:2px; right:4px; }
      .adj-cal-line { line-height:18px; }
      .adj-cal-diff { line-height:17px; }
      .adj-cal-diff-row { min-height:17px; }
      .adj-cal-adjust-label { line-height:17px; margin-bottom:0; }
      .adj-cal-adjust-row input { height:19px; }
    }

    @media (max-width: 768px) {
      :root {
        --fs-date: var(--fs-sm);
        --fs-weekday: var(--fs-xs);
        --fs-detail-date: var(--fs-base);
        --fs-detail-weekday: var(--fs-base);
      }
      .adj-review-head { flex-direction:column; }
      .adj-review-note { text-align:left; }
      .adj-review-summary { grid-template-columns:repeat(2,minmax(0,1fr)); padding:12px; }
      .adj-metric-grid { grid-template-columns:repeat(3,minmax(0,1fr)); gap:3px; padding:1px 6px 6px; }
      .adj-metric { min-height:48px; padding:5px; min-width:0; }
      .adj-metric-label { font-size:var(--fs-xs); line-height:1.2; white-space:normal; overflow-wrap:anywhere; }
      .adj-metric-value { font-size:var(--fs-xl); line-height:1.15; }
      .adj-calc-heading { width:100%; }
      .adj-calc-controls { width:100%; }
      .adj-calc-field { flex:1; min-width:130px; }
      .adj-calc-field input, .adj-calc-field select { width:100%; min-width:0; }
      .adj-calc-field input[type="month"], .adj-calc-field select {
        -webkit-appearance:none; appearance:none; display:block;
        height:36px; min-height:36px; box-sizing:border-box;
        padding:6px 9px; line-height:22px;
      }
      .adj-calc-field select {
        padding-right:28px;
        background-image:linear-gradient(45deg, transparent 50%, var(--muted) 50%), linear-gradient(135deg, var(--muted) 50%, transparent 50%);
        background-position:calc(100% - 15px) 50%, calc(100% - 10px) 50%;
        background-repeat:no-repeat; background-size:5px 5px, 5px 5px;
      }
      .adj-person-combo-field { flex:1; min-width:130px; }
      .adj-person-combo, .adj-person-combo input { width:100%; min-width:0; }
      .adj-calc-actions { width:100%; gap:4px; flex-wrap:wrap; }
      .adj-calc-actions button { flex:1 1 auto; min-width:max-content; }
      .adj-calc-btn { height:30px; padding:0 6px; font-size:var(--fs-base); }
      .attendance-export-modal { align-items:flex-end; padding:0; }
      .attendance-export-dialog { width:100%; max-height:calc(100vh - 18px); border-radius:18px 18px 0 0; }
      .attendance-export-head { padding:13px 16px; }
      .attendance-export-body { padding:12px 16px 14px; }
      .attendance-export-groups { grid-template-columns:1fr; gap:8px; }
      .attendance-export-options { grid-template-columns:repeat(2,minmax(0,1fr)); }
      .attendance-export-footer { padding:10px 16px calc(14px + env(safe-area-inset-bottom)); }
      .adj-person-viewbar { gap:4px; padding:4px 6px; }
      .adj-person-viewhint { font-size:var(--fs-sm); line-height:1.25; }
      .adj-person-viewtoggle { gap:2px; }
      .adj-person-viewbtn { padding:3px 5px; font-size:var(--fs-sm); line-height:1.15; }
      .adj-cal-adjust-row button, .adj-cal-punch-btn, .adj-overtime-adjust-btn { padding:3px 5px; font-size:var(--fs-sm); }
      .adj-calendar-wrap { padding:4px; }
      .adj-calendar-grid { grid-template-columns:repeat(7,minmax(130px,1fr)); min-width:910px; }
      .adj-calendar-dow { min-height:24px; padding:2px 4px; font-size:var(--fs-detail-weekday);
        line-height:17px; }
      .adj-calendar-cell { min-height:90px; padding:3px 4px; }
      .adj-cal-date { font-size:var(--fs-detail-date); line-height:18px; }
      .adj-cal-status { padding:0 3px; line-height:16px; font-size:var(--fs-sm); }
      .adj-cal-edit-btn { flex-basis:18px; width:18px; height:18px; font-size:var(--fs-lg); }
      .adj-cal-line { font-size:var(--fs-sm); line-height:15px; }
      .adj-cal-line .adj-time-label { flex-basis:38px; width:38px; }
      .adj-cal-diff { min-height:14px; font-size:var(--fs-sm); line-height:14px; }
      .adj-cal-diff-row { min-height:14px; gap:3px; }
      .adj-cal-adjust-label { font-size:var(--fs-sm); line-height:14px; }
      .adj-cal-adjust-row input { width:44px; height:22px; padding:2px 3px; font-size:var(--fs-sm); }
    }

    /* ── Mobile Tab Bar (hidden on desktop) ── */
    .mobile-tab-bar { display: none; }

    @media (max-width: 768px) {
      /* Body leaves 49px for tab bar */
      body { padding-bottom: calc(var(--mobile-tabbar-h) + env(safe-area-inset-bottom)); }

      /* Header: compact + hide desktop tabs / print / username */
      .header { height: 44px; padding: 0 10px; gap: 6px; flex-wrap: nowrap; }
      .logo-suffix { display:none; }
      .month-label { min-width: 70px; } .nav-btn { width: 26px; height: 26px; } .today-btn { padding: 0 8px; }
      .tabs { display: none !important; }
      .print-btn { display: none; }
      .user-label { display: none; } .logout-btn { padding: 0 8px; }

      /* Matrix: narrower employee column */
      .th-emp { min-width: 92px !important; width: 92px !important; padding-left: 8px !important; }
      .emp-cell { min-width: 92px !important; padding: 0 8px !important; font-size:var(--fs-base) !important; }
      .mcell { width: 36px; min-width: 36px; height: 36px; }
      .matrix th { padding: 3px 0; }
      .th-total { min-width: 38px; }
      .total-cell { min-width: 38px; }

      /* Legend stays visible above tab bar (body padding handles spacing) */
      .legend { font-size:var(--fs-xs); padding: 6px 12px; }
      .legend span { display: none; } /* hide long hint text */

      /* Calendar wrap full-width friendly */
      .calendar-view-headbar { padding:0 8px; gap:6px; }
      .calendar-name-tab { min-height:var(--ctl-h-sm); padding:4px 7px; font-size:var(--fs-xs); }
      .cal-wrap { padding: 10px 8px; overflow-x:auto; }
      .cal-grid { min-width:1050px; }
      .cell { min-height: 72px; padding: 5px 5px; }
      .cell-day { font-size:var(--fs-date); }
      .cell-names { gap:2px; }
      .name-tag { font-size:10px; padding:2px 1px; }

      /* Summary: full width */
      .sum-wrap { padding: 10px 8px; }

      /* Staffing: single column layout on very small screens */
      @media (max-width: 400px) {
        .staffing-cols { grid-template-columns: 1fr; }
      }
      .staffing-wrap { padding: 10px 8px; gap: 8px; }
      .day-strip-wrap { padding: 8px 10px; }
      .day-pill { width: 34px; height: 38px; font-size:var(--fs-date); }

      /* Management: full width */
      .mgmt-inner { max-width: 100%; }
      .mgmt-wrap { padding: 10px 8px; }

      /* Clip bar above tab bar */
      .clip-bar { font-size:var(--fs-sm); padding: 8px 12px; }

      /* Toast above tab bar */
      .toast { bottom: calc(62px + env(safe-area-inset-bottom)); }

      /* Modal: bottom-sheet feel */
      .modal-backdrop { align-items: flex-end; }
      .modal { width: 100%; border-radius: 18px 18px 0 0; padding: 20px 20px calc(32px + env(safe-area-inset-bottom)); }

      /* Mobile Tab Bar visible */
      .mobile-tab-bar {
        display: flex;
        position: fixed;
        bottom: 0; left: 0; right: 0;
        height: calc(var(--mobile-tabbar-h) + env(safe-area-inset-bottom));
        padding-bottom: env(safe-area-inset-bottom);
        background: rgba(245, 243, 239, 0.97);
        backdrop-filter: blur(16px);
        -webkit-backdrop-filter: blur(16px);
        border-top: 1px solid var(--border);
        z-index: 200;
      }
    }

    /* Mobile tab button base */
    .mobile-tab {
      flex: 1;
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      gap: 2px;
      border: none;
      background: none;
      cursor: pointer;
      padding: 5px 2px;
      font-family: inherit;
      color: #b0ab9f;
      transition: color 0.1s;
    }
    .mobile-tab.active { color: var(--green); }
    .mobile-tab .m-label { font-size:var(--fs-xs); font-weight:400; letter-spacing:0.01em; } .mobile-tab.active .m-label { font-weight:700; }

    @media (max-width: 768px) {
      input, select, textarea { font-size:var(--fs-lg); }
      .nav-btn, .pw-btn, .shift-period-scope-options button, .shift-period-shift button, .adj-action-btn { min-height:40px; min-width:40px; }
      .adj-cal-edit-btn { position:relative; }
      .adj-cal-edit-btn::after { content:''; position:absolute; top:50%; left:50%; transform:translate(-50%,-50%); width:44px; height:44px; }
      .nav-btn, .today-btn, .logout-btn, .sub-tab, .pw-btn,
      .shift-period-add, .shift-period-close, .shift-period-scope-options button,
      .shift-period-shift button, .shift-period-save, .shift-period-delete,
      .mgmt-shift-config-btn, .adj-action-btn, .adj-calc-btn,
      .adj-person-viewbtn, .adj-back-btn, .adj-overtime-adjust-btn,
      .adj-cal-adjust-row button, .adj-cal-punch-btn,
      .attendance-export-tool, .attendance-export-cancel, .attendance-export-submit {
        position:relative;
      }
      .nav-btn::after, .today-btn::after, .logout-btn::after, .sub-tab::after, .pw-btn::after,
      .shift-period-add::after, .shift-period-close::after, .shift-period-scope-options button::after,
      .shift-period-shift button::after, .shift-period-save::after, .shift-period-delete::after,
      .mgmt-shift-config-btn::after, .adj-action-btn::after, .adj-calc-btn::after,
      .adj-person-viewbtn::after, .adj-back-btn::after, .adj-overtime-adjust-btn::after,
      .adj-cal-adjust-row button::after, .adj-cal-punch-btn::after,
      .attendance-export-tool::after, .attendance-export-cancel::after, .attendance-export-submit::after {
        content:''; position:absolute; top:50%; left:50%; width:max(100%,44px); height:44px;
        transform:translate(-50%,-50%); pointer-events:none;
      }
    }

    /* ── Desktop navigation and typography ── */
    @media (min-width: 900px) {
      .tab { padding: 7px 16px; } .sub-tab { padding: 9px 16px; } .today-btn, .print-btn, .logout-btn { padding: 0 12px; }
      .btn-cancel, .btn-green { font-size:var(--fs-base); }
      .mgmt-card-head { font-size:var(--fs-base); }
      .mgmt-filter-label { font-size:var(--fs-base); }
      .shift-opt { font-size:var(--fs-sm); }
      .sum-table th { font-size:var(--fs-base); }
      .sum-table td { font-size:var(--fs-base); }
    }

    /* Mobile controls stay compact even though desktop typography is larger. */
    @media (max-width: 768px) { .sub-tab { padding: 7px 11px; }
      .btn-cancel, .btn-green { padding: 7px 12px; font-size:var(--fs-sm); }
    }