/* Kebarick HR & Payroll V13.5.4 — mobile responsiveness only.
   All rules are scoped to phone/tablet widths so the V13.5.3 desktop UI remains unchanged. */
@media (max-width: 760px){
  html,body{max-width:100%;overflow-x:hidden}
  body.mobile-nav-open{overflow:hidden}

  /* Compact two-row mobile header: identity first, account actions second. */
  .app-shell .topbar{
    height:auto!important;
    min-height:104px;
    display:grid!important;
    grid-template-columns:42px minmax(0,1fr);
    align-items:center;
    gap:6px 8px!important;
    padding:8px 10px 9px!important;
    background:#fff;
  }
  .mobile-menu{display:grid!important;place-items:center;width:40px!important;height:40px!important;font-size:18px;z-index:2}
  .system-heading{min-width:0!important;max-width:none!important;margin:0!important}
  .system-name{display:block;max-width:100%;font-size:13px!important;line-height:1.2;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
  .system-heading .crumb{display:flex!important;margin-top:3px;gap:5px;font-size:10px!important;overflow:hidden}
  .system-heading .crumb span,.system-heading .crumb b{display:none!important}
  .system-heading .crumb strong{display:block!important;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;color:#647a76}
  .top-actions{
    grid-column:1/-1;
    width:100%;
    display:grid!important;
    grid-template-columns:minmax(0,1fr) 40px 40px;
    align-items:center;
    gap:7px!important;
  }
  .top-actions .search{display:none!important}
  #saasSubscriptionButton{min-width:0;max-width:100%;height:40px;padding:7px 10px!important;border-radius:10px;font-size:10px!important;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
  .top-actions .icon-btn{width:40px!important;height:40px!important;min-width:40px}
  .top-actions .profile{width:40px;height:40px;padding:0!important;display:grid!important;place-items:center}
  .top-actions .profile>div:not(.avatar),.top-actions .profile>span{display:none!important}
  .top-actions .profile .avatar{width:38px;height:38px;font-size:12px}

  /* Proper mobile navigation drawer. */
  .sidebar{
    position:fixed!important;
    inset:0 auto 0 0;
    width:min(82vw,300px)!important;
    height:100dvh!important;
    left:0!important;
    transform:translateX(-103%);
    transition:transform .22s ease!important;
    z-index:120!important;
    box-shadow:18px 0 42px rgba(3,28,27,.24);
    overflow-y:auto;
    overscroll-behavior:contain;
  }
  .sidebar.open{transform:translateX(0)!important}
  #mobileNavBackdrop{display:none;position:fixed;inset:0;background:rgba(5,29,28,.48);z-index:110;backdrop-filter:blur(1px)}
  #mobileNavBackdrop.open{display:block}
  .sidebar nav button,.sidebar nav a{min-height:42px}
  .sidebar-foot{position:sticky;bottom:0;background:var(--nav);padding-top:9px}

  /* Main workspace: comfortable phone spacing rather than a squeezed desktop. */
  #app{padding:14px 10px 86px!important;max-width:100%;overflow:hidden}
  .page-head{margin-bottom:14px!important;gap:10px!important}
  .page-head h1{font-size:22px!important;line-height:1.15!important;letter-spacing:-.4px!important}
  .page-head p{font-size:12px!important;line-height:1.45!important}
  .page-head .head-actions,.head-actions{width:100%;display:flex;gap:7px!important;overflow-x:auto!important;padding:1px 0 5px;scrollbar-width:none;-webkit-overflow-scrolling:touch;flex-wrap:nowrap!important}
  .page-head .head-actions::-webkit-scrollbar,.head-actions::-webkit-scrollbar{display:none}
  .page-head .head-actions .btn,.head-actions .btn{flex:0 0 auto;white-space:nowrap;min-height:40px}
  .btn{min-height:40px;padding:9px 12px;font-size:12px}
  .icon-btn{min-width:40px;min-height:40px}

  .panel,.card{border-radius:13px!important;max-width:100%}
  .panel-head{padding:13px 14px!important;gap:9px!important;align-items:flex-start!important;flex-wrap:wrap}
  .panel-head h2{font-size:15px!important;line-height:1.25}
  .panel-head p{font-size:11px!important;line-height:1.45}
  .panel-body{padding:14px!important}

  /* Metrics stay compact but readable. */
  .stats{grid-template-columns:repeat(2,minmax(0,1fr))!important;gap:9px!important;margin-bottom:13px!important}
  .stat{padding:12px!important;border-radius:11px!important;min-width:0}
  .stat small{font-size:9px!important;line-height:1.2}
  .stat strong{font-size:19px!important;line-height:1.1;margin:7px 0 3px!important;overflow-wrap:anywhere}
  .stat em{font-size:9.5px!important;line-height:1.3}
  .stat .trend{position:static!important;display:inline-flex;margin-top:6px;font-size:9px!important}
  .grid.two,.grid.equal,.live-overview-grid{grid-template-columns:1fr!important}
  .quick-grid,.module-grid{grid-template-columns:1fr 1fr!important;gap:9px!important}
  .quick,.module-card{padding:13px!important}
  .quick strong,.module-card h3{font-size:12px!important}
  .quick small,.module-card p{font-size:10px!important}

  /* Filters and form controls stack naturally. */
  .filter-row,.payroll-period-controls,.payslip-browser-controls,.report-detail-filter,.attendance-filterbar{display:grid!important;grid-template-columns:1fr!important;gap:9px!important;padding-left:12px!important;padding-right:12px!important}
  .filter-row input,.filter-row select,.form-field input,.form-field select,.form-field textarea{font-size:13px!important;min-height:43px}
  .payroll-period-controls .form-field,.payslip-browser-controls .form-field,.report-detail-filter .form-field{min-width:0!important;width:100%}
  .payroll-period-controls .tag{margin:0!important;justify-self:start}
  .payroll-basis-grid,.payroll-policy-grid,.detail-grid{grid-template-columns:1fr!important}

  /* Key operational lists become proper mobile record cards. JS adds data-labels. */
  .mobile-card-table{min-width:0!important;width:100%!important;border-collapse:separate!important;border-spacing:0!important;background:transparent!important}
  .mobile-card-table thead{display:none!important}
  .mobile-card-table tbody{display:grid!important;gap:10px!important;padding:10px!important}
  .mobile-card-table tbody tr{display:block!important;border:1px solid #d8e6e3!important;border-radius:13px!important;background:#fff!important;box-shadow:0 4px 14px rgba(16,71,65,.045)!important;overflow:hidden!important}
  .mobile-card-table tbody tr:hover{background:#fff!important}
  .mobile-card-table tbody td{display:grid!important;grid-template-columns:minmax(92px,36%) minmax(0,1fr)!important;gap:10px!important;align-items:start!important;width:100%!important;min-height:38px!important;padding:9px 11px!important;border:0!important;border-bottom:1px solid #edf2f1!important;white-space:normal!important;text-align:left!important;font-size:12.5px!important;line-height:1.35!important;overflow-wrap:anywhere}
  .mobile-card-table tbody td:last-child{border-bottom:0!important}
  .mobile-card-table tbody td::before{content:attr(data-label);font-size:9px;font-weight:800;letter-spacing:.055em;text-transform:uppercase;color:#6a7e7b;line-height:1.35;padding-top:2px}
  .mobile-card-table tbody td[colspan]{display:block!important;text-align:center!important;padding:18px!important}
  .mobile-card-table tbody td[colspan]::before{display:none}
  .mobile-card-table .person{align-items:flex-start}
  .mobile-card-table .person strong{font-size:12.5px!important}
  .mobile-card-table .person small{font-size:10px!important}
  .mobile-card-table .btn{width:auto;justify-self:start}
  .mobile-card-table .payslip-row-actions,.mobile-card-table .admin-actions{justify-content:flex-start!important}
  .payroll-lines-wrap,.payslip-table,.ops-table-wrap{max-height:none!important;overflow:visible!important}

  /* Reports remain true tables, but are deliberately scrollable on a phone. */
  #enterpriseReportTable,.enterprise-report-workspace .enterprise-table-wrap,.monthly-roster-scroll,.master-table-scroll{max-width:100%;overflow-x:auto!important;overscroll-behavior-x:contain;-webkit-overflow-scrolling:touch;scrollbar-width:thin}
  #enterpriseReportTable::before,.mobile-wide-table::before{content:'Swipe horizontally to view all columns';display:block;position:sticky;left:0;width:max-content;margin:8px 10px 0;padding:5px 8px;border-radius:999px;background:#edf6f4;color:#4d6f6a;font-size:9px;font-weight:700;z-index:2}
  #enterpriseReportTable table{min-width:760px!important}
  #enterpriseReportTable th,#enterpriseReportTable td{font-size:11px!important;padding:9px 10px!important}
  .enterprise-report-category-grid{grid-template-columns:1fr!important;padding:10px!important;gap:10px!important}
  .enterprise-report-category-card summary{grid-template-columns:40px minmax(0,1fr) auto!important;padding:13px!important;gap:10px!important}
  .report-category-icon{width:40px!important;height:40px!important;font-size:17px!important}
  .report-category-copy strong{font-size:12px!important}.report-category-copy p{font-size:10px!important}.report-category-copy small{font-size:9px!important}

  /* Modals use the available screen height instead of floating desktop boxes. */
  .modal-backdrop{padding:8px!important;align-items:end!important}
  .modal-card{width:100%!important;max-width:none!important;max-height:94dvh!important;border-radius:16px 16px 0 0!important}
  .modal-head{padding:14px 15px!important;gap:10px!important}.modal-head h2{font-size:17px!important}.modal-head p{font-size:11px!important}
  .modal-body{padding:15px!important}.modal-foot{padding:11px 14px!important;gap:7px!important;position:sticky;bottom:0;background:#fff;z-index:3}
  .form-grid{grid-template-columns:1fr!important;gap:11px!important}.form-field.full{grid-column:auto!important}

  /* Toasts and fixed helpers should never cover the whole phone. */
  .toast-stack{left:10px!important;right:10px!important;bottom:10px!important}.toast{font-size:12px!important;line-height:1.4}
  .table-export-icons{max-width:100%;overflow-x:auto!important}
  .table-export-icons button{min-height:40px!important;padding:0 10px!important;font-size:10px!important}
}

@media (max-width: 480px){
  .app-shell .topbar{min-height:102px}
  .system-name{font-size:12.5px!important}
  #saasSubscriptionButton{font-size:9.5px!important}
  #app{padding-left:8px!important;padding-right:8px!important}
  .stats{gap:7px!important}
  .stat{padding:10px!important}.stat strong{font-size:17px!important}
  .quick-grid,.module-grid{grid-template-columns:1fr!important}
  .employee-fields{grid-template-columns:1fr!important}.employee-fields .wide,.employee-fields .span-2{grid-column:auto!important}
  .employee-form-main{padding:16px 12px!important}
  .employee-stepper{gap:4px!important;padding:7px!important}.employee-stepper button{min-width:40px!important;padding:5px!important}
  .record-page-head{padding:18px 15px!important;border-radius:15px!important}.record-title h1{font-size:23px!important}.record-title p{font-size:12px!important}
  .record-grid,.record-field-grid,.employee-record-grid{grid-template-columns:1fr!important}
  .mobile-card-table tbody{padding:8px!important;gap:8px!important}
  .mobile-card-table tbody td{grid-template-columns:88px minmax(0,1fr)!important;padding:8px 10px!important}
  .enterprise-report-menu-head{padding:14px!important}.enterprise-report-menu-head strong{font-size:16px!important}
  .modal-backdrop{padding:0!important}.modal-card{max-height:100dvh!important;border-radius:0!important}
}

/* Stand-alone subscription/billing page: mobile only. */
@media (max-width: 650px){
  .shell{padding:13px 10px 34px!important}
  .shell>.topbar{display:flex!important;min-height:0!important;padding:0!important;align-items:stretch!important;gap:11px!important}
  .shell>.topbar h1{font-size:24px!important}
  .shell>.topbar .actions{width:100%;display:grid!important;grid-template-columns:1fr 1fr;gap:8px!important}
  .shell>.topbar .actions .btn{width:100%}
  .accountbar{padding:14px!important;border-radius:14px!important;align-items:flex-start!important;gap:10px!important}.accountbar h2{font-size:17px!important}.accountbar p{font-size:12px!important}.accountbar .badge{flex:0 0 auto}
  .billing-flow{grid-template-columns:1fr!important;gap:8px!important}
  .flow-step{min-height:0!important;padding:12px!important;display:grid;grid-template-columns:30px 1fr;column-gap:10px;align-items:start}.flow-step b{grid-row:1/3;margin:0!important}.flow-step strong{font-size:12px!important}.flow-step span{font-size:10.5px!important}
  .metrics{grid-template-columns:1fr 1fr!important;gap:8px!important}.metric{padding:12px!important}.metric strong{font-size:18px!important}.metric small{font-size:10.5px!important}
  .workspace{grid-template-columns:1fr!important;gap:12px!important}.stack{gap:12px!important}.card{border-radius:14px!important}.cardhead{padding:14px!important}.cardhead h3{font-size:15px!important}.cardhead p{font-size:11.5px!important}.cardbody{padding:14px!important}
  .planrow,.formgrid{grid-template-columns:1fr!important}.plan-actions{display:grid!important;grid-template-columns:1fr}.plan-actions .btn{width:100%}
  .summarybox{padding:12px!important}.sumline{font-size:12px!important}.sumline.total{font-size:14px!important}
  .tablewrap{overflow:visible!important}.tablewrap .mobile-card-table tbody{padding:10px 0!important}
  .payhero{padding:15px!important}.payhero strong{font-size:20px!important}
}
@media (max-width: 390px){.metrics{grid-template-columns:1fr!important}}