/* SAVAGE V13 - mobile-first overrides for live Admin and Employee screens. */
:root {--v13-ink:#183c53;--v13-line:#dce8ee}
html { -webkit-text-size-adjust:100%; }
body { min-width:280px; }
button,select,input,textarea { touch-action:manipulation; }
#content, .panel, .admin-frame { min-width:0; }
#content .grid >*, .actions>*, .extra-row>* { min-width:0; }
#content .scroll { max-width:100%; overscroll-behavior-x:contain; -webkit-overflow-scrolling:touch; }
#content .scroll:focus-visible {outline:2px solid #2c9a86;outline-offset:3px;}
#content input, #content textarea, #content select {width:100%;}
.nav-backdrop,.nav-toggle {display:none;}
.topbar-location {min-width:0;}
.topbar .tag {white-space:nowrap;}
#nav button[aria-current="page"] { background:#286472;color:white; }
#auth {width:calc(100% - 28px);}
.screen-chips span {overflow-wrap:anywhere;}
/* Keep schedule matrix readable when horizontally scrolled on a narrow viewport. */
.schedule-table {min-width:830px;}
.schedule-table .sched-name {position:sticky;left:0;z-index:2;box-shadow:3px 0 8px #192b3420;}
.schedule-table td {min-width:110px;}
.schedule-table .sched-morn,.schedule-table .sched-aft {min-width:166px;}
.schedule-table .sched-break {min-width:145px;}
.schedule-table .sched-name {min-width:152px;}
.schedule-table .sched-day {min-width:106px;}
.schedule-table .cell-edit {min-height:36px;}
/* DTR table remains tabular to match A4 output and avoid losing date alignment. */
.printable-dtr .scroll { overflow-x:auto; }
@media (max-width:1100px) {
  .cards {grid-template-columns:repeat(2,minmax(0,1fr));}
  .extra-row {grid-template-columns:1fr;}
  .topbar .tag {font-size:9px;padding:7px;}
}
@media (max-width:800px) {
  body.logged-in {overflow-x:hidden;}
  .shell {display:block!important;padding:0!important;max-width:none;min-height:100dvh;}
  .admin-frame {margin:0;width:100%;min-height:100dvh;border:none;border-radius:0;}
  .topbar {position:sticky;top:0;z-index:20;display:flex;gap:12px;align-items:center;min-height:62px;padding:10px 14px;box-shadow:0 3px 16px #1a354414;}
  .topbar-location {flex:1;}
  .topbar .tag {display:none;}
  .nav-toggle {display:inline-flex;flex-shrink:0;align-items:center;gap:8px;justify-content:center;border:1px solid #cfdfe8;background:#eef5f8;color:#174a65;border-radius:11px;min-height:44px;padding:8px 12px;font-weight:800;}
  .nav-toggle span:first-child {font-size:18px;line-height:1;}
  .sidebar {position:fixed;z-index:32;top:0;bottom:0;left:0;width:min(310px,84vw);padding:23px 13px 17px!important;border-radius:0 18px 18px 0;transform:translateX(-105%);transition:transform .22s ease;overflow-y:auto;overscroll-behavior:contain;visibility:hidden;box-shadow:7px 0 30px #09293930;}
  body.mobile-nav-open .sidebar {transform:translateX(0);visibility:visible;}
  .sidebar-brand {padding:4px 10px 18px;}
  .sidebar-caption {display:block!important;}
  .sidebar-bottom {display:flex!important;}
  nav#nav {display:flex!important;flex-direction:column!important;gap:4px!important;overflow:visible!important;width:100%;padding:0;}
  nav#nav button {width:100%;white-space:normal!important;font-size:13px!important;padding:13px 12px!important;min-height:44px;}
  /* nav button icons are rendered once by savage-icons.js */
  .nav-backdrop:not([hidden]) {display:block;position:fixed;z-index:31;inset:0;background:#05192499;}
  body.mobile-nav-open {overflow:hidden;}
  main {padding:18px 14px;}
  .app-footer {padding:14px;}
  h2 {font-size:clamp(21px,4vw,27px)}
  .section-subtitle {line-height:1.5;}
}
@media (max-width:640px) {
  .cards {grid-template-columns:repeat(2,minmax(0,1fr));gap:9px;}
  .metric {min-height:102px;padding:12px 11px;gap:6px;font-size:11px;}
  .metric strong {font-size:clamp(21px,6vw,27px);}
  .metric:after {font-size:8px;}
  .grid {grid-template-columns:minmax(0,1fr)!important;gap:12px;}
  .panel {padding:15px 13px;margin-bottom:13px;}
  .panel .panel {padding:13px;}
  .banner {padding:20px 17px;}
  .banner strong {font-size:20px;max-width:275px;}
  .banner:after {right:-10px;top:30px;font-size:94px;}
  .actions {display:flex;align-items:stretch;gap:9px;}
  .actions button,.actions .btn {min-height:44px;}
  label {font-size:12px;}
  input,select,textarea {font-size:16px!important;min-height:44px;}
  #content .scroll:has(>table.mobile-card-table) {border:none;overflow:visible;}
  table.mobile-card-table {min-width:0!important;width:100%;display:block;border-collapse:separate;}
  .mobile-card-table thead {position:absolute!important;width:1px!important;height:1px!important;overflow:hidden!important;clip:rect(0,0,0,0)!important;white-space:nowrap!important;}
  .mobile-card-table tbody {display:grid;gap:11px;}
  .mobile-card-table tbody tr {display:block;background:#fff;border:1px solid #e1ebef;border-radius:12px;padding:4px 10px;box-shadow:0 3px 9px #173c4910;min-width:0;}
  .mobile-card-table tbody td {display:grid;grid-template-columns:minmax(94px,38%) minmax(0,1fr);gap:8px;align-items:start;padding:10px 3px;border-bottom:1px solid #eaf0f4;overflow-wrap:anywhere;white-space:normal;min-height:37px;font-size:12px;}
  .mobile-card-table tbody td:last-child {border-bottom:0;}
  .mobile-card-table tbody td:before {content:attr(data-label);display:block;font-size:10px;text-transform:uppercase;letter-spacing:.04em;color:#68859a;font-weight:850;}
  .mobile-card-table tbody td button {margin:0 4px 6px 0;min-height:36px;}
  .schedule-table {min-width:820px!important;}
  .scroll:has(>.schedule-table) {border:1px solid var(--v13-line);overflow-x:auto!important;}
  .schedule-table th {font-size:10px;padding:9px 7px;}
  .schedule-table td {padding:10px 8px;}
  .printable-dtr table {min-width:640px;}
  #auth {width:calc(100% - 20px);margin:22px auto;padding:23px 18px;}
  .app-footer {font-size:9px;line-height:1.6;}
  .topbar small {font-size:9px;}
}
@media (max-width:360px) {
  .cards {grid-template-columns:1fr 1fr;gap:7px;}
  .metric {padding:10px;}
  .topbar {padding:10px 8px;gap:7px;}
  .nav-toggle {padding:7px 9px;gap:5px;}
  main {padding:13px 9px;}
  .panel {padding:11px;}
  #top-account .btn {padding:8px 7px;font-size:10px;}
}
@media (prefers-reduced-motion:reduce) {.sidebar,.nav-toggle{transition:none!important}}
@media print {
  .nav-toggle,.nav-backdrop {display:none!important;}
  .mobile-card-table {display:table!important;min-width:0!important;}
  .mobile-card-table thead {position:static!important;display:table-header-group!important;width:auto!important;height:auto!important;clip:auto!important;}
  .mobile-card-table tbody {display:table-row-group!important;}
  .mobile-card-table tbody tr {display:table-row!important;box-shadow:none!important;border:0!important;}
  .mobile-card-table tbody td {display:table-cell!important;}
  .mobile-card-table tbody td:before {display:none!important;}
  .schedule-table .sched-name {position:static!important;box-shadow:none!important;}
  .printable-dtr .scroll {overflow:visible!important;}
  .printable-dtr table {min-width:0!important;}
}