/* ============================================================
   mobile.css — Phase 1: Global Mobile Adaptation
   Breakpoint: 768px (sidebar collapse threshold)
   Secondary: 480px (small phone adjustments)
   DO NOT modify desktop styles — additive only
   ============================================================ */

/* --- Hamburger Button (hidden on desktop) --- */
.hamburger-btn{
  display:none;
  align-items:center;justify-content:center;
  width:40px;height:40px;border:none;background:none;cursor:pointer;
  border-radius:8px;color:var(--color-text);flex-shrink:0;
  transition:background .15s;padding:0;
}
.hamburger-btn:hover{background:var(--color-bg-elevated)}

/* --- Sidebar Overlay (backdrop) --- */
.sidebar-overlay{
  display:block;position:fixed;inset:0;
  background:rgba(0,0,0,.45);z-index:99;
  opacity:0;pointer-events:none;
  transition:opacity .25s;
}
.sidebar-overlay.show{opacity:1;pointer-events:auto}

/* ============================================================
   768px — Mobile Layout
   ============================================================ */
@media(max-width:768px){

  /* -- Hamburger visible -- */
  .hamburger-btn{display:inline-flex}

  /* -- Sidebar: hidden by default, slide-in on .open -- */
  .sidebar{
    transform:translateX(-240px);
    transition:transform .25s cubic-bezier(.4,0,.2,1);
    z-index:101;
  }
  .sidebar.open{transform:translateX(0)}

  /* -- Main content: remove left margin -- */
  .main-content{margin-left:0!important}

  /* -- Header: tighter padding -- */
  .header{padding:0 12px;gap:8px}
  .header-title{font-size:14px;max-width:120px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}

  /* -- Content area: tighter padding -- */
  .content{padding:16px 12px}

  /* -- Page header: wrap title + actions -- */
  .page-header{flex-wrap:wrap;gap:12px}

  /* -- Modal: constrain to viewport -- */
  .modal-box{
    width:calc(100vw - 24px)!important;
    max-width:calc(100vw - 24px)!important;
    max-height:90vh;
    border-radius:12px;
  }
  .modal-box.wide{width:calc(100vw - 24px)!important}
  .modal-body{padding:16px}
  .modal-header{padding:14px 16px;font-size:15px}
  .modal-footer{padding:12px 16px}

  /* -- Login card: fluid width -- */
  .login-card{
    width:calc(100vw - 32px)!important;
    max-width:420px;
    padding:28px 20px;
  }

  /* -- Captcha wrap: constrain to card -- */
  .captcha-canvas-wrap{width:100%!important;height:auto!important}

  /* -- Tab bar: horizontal scroll -- */
  .tab-bar{overflow-x:auto;-webkit-overflow-scrolling:touch;scrollbar-width:none}
  .tab-bar::-webkit-scrollbar{display:none}
  .tab-item{white-space:nowrap;flex-shrink:0}

  /* -- Sub-tab bar: same treatment -- */
  .sub-tab-bar{overflow-x:auto;-webkit-overflow-scrolling:touch;scrollbar-width:none}
  .sub-tab-bar::-webkit-scrollbar{display:none}
  .sub-tab-item{white-space:nowrap;flex-shrink:0}

  /* -- Toolbar: wrap inputs naturally -- */
  .toolbar .form-input,.toolbar select,.toolbar input[type="date"],.toolbar input[type="month"]{
    max-width:100%;
  }

  /* -- Stat grid: already handled in app.css/employee.css at 768px -- */

  /* -- Detail grid: single column -- */
  .detail-grid{grid-template-columns:1fr!important}

  /* -- Form row: already handled in app.css/employee.css at 768px -- */

  /* -- Calendar: reduce cell size & font -- */
  .cal-cell{min-height:40px}
  .cal-cell .cal-day{font-size:12px}
  .cal-cell .cal-status{font-size:10px}
  .cal-header{font-size:10px;padding:4px 0}

  /* -- Floating panels: full width -- */
  .floating-redline-panel{width:calc(100vw - 32px)!important;right:16px!important;bottom:16px!important}
  .floating-redline-btn{right:16px;bottom:16px;width:48px;height:48px;font-size:20px}
  .floating-phone-panel{width:calc(100vw - 32px)!important;left:16px!important;bottom:16px!important}
  .floating-phone-btn{left:16px;bottom:16px;width:48px;height:48px;font-size:20px}

  /* -- Quick grid -- */
  .quick-grid{grid-template-columns:1fr}

  /* -- Employee stat chips: allow wrap -- */
  .emp-stat-chip{flex-shrink:1}

  /* -- User dropdown: constrain to screen -- */
  .user-dropdown{min-width:160px;right:-8px}

  /* -- Picker group in header: smaller -- */
  .picker-group select,.picker-group input[type="date"],.picker-group input[type="month"]{
    font-size:12px;padding:4px 6px 4px 4px;
  }

  /* -- Company select: smaller -- */
  .company-select{font-size:11px;padding:3px 8px}

  /* -- SOP side TOC: handled via !important in app.css already -- */

  /* -- Employee SOP wrapper: already in employee.css at 768px -- */

  /* -- Server monitor chart: fluid -- */
  .card canvas{max-width:100%}

  /* -- Rank columns: single column (already in app.css) -- */

  /* -- Office card stats: wrap -- */
  .office-stats{flex-wrap:wrap;gap:8px 16px}
}

  /* -- Modal body grid overrides: 2-col/3-col → 1-col -- */
  .modal-body [style*="grid-template-columns:1fr 1fr"]{
    grid-template-columns:1fr!important;
  }
  .modal-body [style*="grid-template-columns:1fr 1fr 1fr"]{
    grid-template-columns:1fr!important;
  }
  .modal-body [style*="grid-template-columns:repeat(4"]{
    grid-template-columns:repeat(2,1fr)!important;
  }

  /* -- Inline stat grids in pages -- */
  [style*="grid-template-columns:repeat(4,1fr)"]{
    grid-template-columns:repeat(2,1fr)!important;
  }
  [style*="grid-template-columns:repeat(5,1fr)"]{
    grid-template-columns:repeat(2,1fr)!important;
  }
  [style*="grid-template-columns:repeat(3,1fr)"]{
    grid-template-columns:repeat(2,1fr)!important;
  }

  /* -- SOP TOC floating button (Phase 2) -- */
  .sop-toc-fab{
    position:fixed;bottom:80px;right:16px;z-index:200;
    width:48px;height:48px;border-radius:50%;
    background:linear-gradient(135deg,#667eea,#764ba2);color:#fff;
    font-size:20px;display:flex;align-items:center;justify-content:center;
    cursor:pointer;box-shadow:0 4px 16px rgba(102,126,234,.4);
    border:none;
  }
  .sop-toc-drawer{
    position:fixed;bottom:0;left:0;right:0;z-index:301;
    background:#fff;border-radius:16px 16px 0 0;
    box-shadow:0 -4px 24px rgba(0,0,0,.15);
    max-height:60vh;overflow-y:auto;padding:16px 20px 24px;
    transform:translateY(100%);transition:transform .3s cubic-bezier(.4,0,.2,1);
  }
  .sop-toc-drawer.open{transform:translateY(0)}
  .sop-toc-drawer-mask{
    display:block;position:fixed;inset:0;z-index:300;
    background:rgba(0,0,0,.35);opacity:0;pointer-events:none;
    transition:opacity .25s;
  }
  .sop-toc-drawer-mask.open{opacity:1;pointer-events:auto}
}

/* ============================================================
   Mobile Card List — Phase 2
   Used for tables with 9+ columns on mobile
   ============================================================ */
.m-cards{display:none}
@media(max-width:768px){
  .m-cards{display:flex;flex-direction:column;gap:10px}
  .m-cards+.table-wrap{display:none}
  .m-card{
    background:#fff;border:1px solid var(--color-border-light);border-radius:10px;
    padding:14px 16px;box-shadow:var(--shadow-sm);
  }
  .m-card-head{
    display:flex;align-items:center;justify-content:space-between;gap:8px;
    margin-bottom:8px;
  }
  .m-card-name{font-size:15px;font-weight:700;color:#1a1a2e;flex:1;min-width:0;
    overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
  .m-card-body{display:flex;flex-wrap:wrap;gap:4px 16px;margin-bottom:10px}
  .m-card-field{display:flex;align-items:center;gap:4px;font-size:13px;min-width:40%}
  .m-card-label{font-size:11px;color:var(--color-text-muted);font-weight:600;
    text-transform:uppercase;letter-spacing:.3px}
  .m-card-value{font-weight:600}
  .m-card-value.pos{color:#16a34a}
  .m-card-value.neg{color:#dc2626}
  .m-card-value.primary{color:#667eea;font-size:16px;font-weight:800}
  .m-card-actions{display:flex;gap:6px;flex-wrap:wrap}
  .m-card-actions .btn{flex:1;min-width:0;justify-content:center}
}

/* ============================================================
   480px — Small Phone Adjustments
   ============================================================ */
@media(max-width:480px){
  .header{height:56px}
  .header-title{display:none}
  .content{padding:12px 8px}
  .stat-card{padding:14px 16px}
  .stat-value{font-size:22px}
  .stat-label{font-size:11px}
  .page-title{font-size:18px;margin-bottom:16px}

  /* -- My Salary stats: single column -- */
  .ms-stats{grid-template-columns:1fr!important}
  .ms-stat-value{font-size:18px}

  /* -- Modal: near full screen -- */
  .modal-box{
    width:calc(100vw - 16px)!important;
    max-width:calc(100vw - 16px)!important;
    max-height:92vh;
    border-radius:10px;
  }

  /* -- Score grid: single column -- */
  .score-grid{grid-template-columns:1fr!important}

  /* -- Buttons: min touch target -- */
  .btn{min-height:40px;padding:8px 16px}
  .btn-sm{min-height:32px;padding:6px 10px}

  /* -- Login title: smaller -- */
  .login-title{font-size:24px}
  .login-subtitle{font-size:12px;margin-bottom:20px}
  .login-card{padding:24px 16px!important}
}