:root{
  --cue-home:#1677a7;
  --cue-roster:#247a57;
  --cue-reports:#a33a50;
  --cue-operations:#a96708;
  --cue-training:#7550a5;
  --cue-settings:#647485;
  --cue-expenses:#178b86;
}
:root[data-theme="dark"]{
  --cue-home:#75c9ef;
  --cue-roster:#86d7b1;
  --cue-reports:#ff9cab;
  --cue-operations:#ffd083;
  --cue-training:#c8ade8;
  --cue-settings:#b8c5d0;
  --cue-expenses:#76d9d2;
}

[data-nav-tone="home"]{--nav-cue:var(--cue-home)}
[data-nav-tone="roster"]{--nav-cue:var(--cue-roster)}
[data-nav-tone="reports"]{--nav-cue:var(--cue-reports)}
[data-nav-tone="operations"]{--nav-cue:var(--cue-operations)}
[data-nav-tone="training"]{--nav-cue:var(--cue-training)}
[data-nav-tone="settings"]{--nav-cue:var(--cue-settings)}
[data-nav-tone="expenses"]{--nav-cue:var(--cue-expenses)}

.primary-nav .nav-button[data-nav-tone] .nav-icon{color:var(--nav-cue)}
.primary-nav .nav-button[data-nav-tone].active,
.primary-nav .nav-group-shell.active>.nav-group-toggle[data-nav-tone]{box-shadow:inset 3px 0 0 var(--nav-cue)}
.primary-nav .nav-button[data-nav-tone]:hover .nav-icon{filter:brightness(1.18)}
.account-menu-button[data-nav-tone="settings"] .account-avatar{box-shadow:inset 0 0 0 2px color-mix(in srgb,var(--cue-settings) 45%,transparent)}

.prelogin-install{display:grid;gap:.45rem;padding:.8rem;margin:0 0 1rem;border:1px solid var(--line);border-radius:12px;background:var(--surface-2)}
.prelogin-install .button{width:100%}
.prelogin-install span{font-size:.8rem;color:var(--muted);text-align:center}

.simple-mobile-home{display:none}
.mobile-wizard-progress{display:none}

@media (max-width:820px){
  .main{padding-bottom:calc(6.8rem + var(--safe-bottom))}
  .simple-officer-home-mode > :not(.simple-mobile-home){display:none!important}

  .mobile-nav[data-simple-mobile-nav]{
    display:grid!important;
    grid-template-columns:repeat(auto-fit,minmax(58px,1fr));
    align-items:stretch;
    gap:.15rem;
    padding:.42rem .45rem calc(.42rem + var(--safe-bottom));
    background:color-mix(in srgb,var(--surface) 97%,transparent);
    border-top:1px solid var(--line);
    box-shadow:0 -8px 24px rgba(4,25,43,.08);
    backdrop-filter:blur(12px);
  }
  .simple-mobile-nav-item{
    appearance:none;
    min-width:0;
    min-height:56px;
    display:grid;
    place-items:center;
    align-content:center;
    gap:.18rem;
    padding:.25rem .15rem;
    border:0;
    border-radius:10px;
    text-decoration:none;
    color:var(--muted);
    background:transparent;
    font-size:.7rem;
    font-weight:750;
    line-height:1.05;
    text-align:center;
    cursor:pointer;
  }
  .simple-mobile-nav-item .simple-mobile-icon{font-size:1.08rem;color:var(--nav-cue)}
  .simple-mobile-nav-item.active{color:var(--ink);background:color-mix(in srgb,var(--nav-cue) 10%,var(--surface))}
  .simple-mobile-nav-item.active::before{content:"";position:absolute;top:0;width:32px;height:3px;border-radius:0 0 3px 3px;background:var(--nav-cue)}
  .simple-mobile-nav-item{position:relative}

  .simple-more-dialog{width:min(94vw,520px);max-height:min(88vh,760px)}
  .simple-more-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:.7rem}
  .simple-more-item{min-height:64px;justify-content:flex-start;text-align:left;border-left:4px solid var(--nav-cue)}

  .simple-mobile-home{
    display:grid;
    gap:1rem;
    margin-bottom:1rem;
    padding:1.15rem;
    border:1px solid var(--line);
    border-radius:16px;
    background:linear-gradient(145deg,var(--surface),color-mix(in srgb,var(--cue-home) 7%,var(--surface)));
    box-shadow:0 5px 20px rgba(4,25,43,.07);
  }
  .simple-home-head{display:grid;gap:.1rem}
  .simple-home-head span{color:var(--muted);font-size:.92rem}
  .simple-home-head h2{font-size:1.65rem}
  .simple-home-loading,.simple-home-no-shift{margin:0;color:var(--muted)}
  .simple-home-shift{display:grid;gap:.15rem;padding:.95rem;border-left:5px solid var(--cue-roster);border-radius:12px;background:var(--surface)}
  .simple-home-shift span{color:var(--muted);font-size:.8rem;font-weight:700}
  .simple-home-shift strong{font-size:1.2rem}
  .simple-home-shift b{font-size:.92rem;color:var(--cue-roster)}
  .simple-start-shift{width:100%;min-height:52px;font-size:1rem}
  .simple-home-actions{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:.65rem}
  .simple-home-action{min-height:68px;display:flex;align-items:center;gap:.6rem;padding:.75rem;border:1px solid var(--line);border-left:4px solid var(--nav-cue);border-radius:11px;background:var(--surface);color:var(--ink);text-decoration:none;font-size:.84rem;font-weight:750}
  .simple-home-action>span:first-child{color:var(--nav-cue);font-size:1.05rem}

  .mobile-card-table-wrap{overflow:visible!important;border:0!important;background:transparent!important}
  table.mobile-card-table{display:block;min-width:0!important;width:100%;border:0!important;background:transparent!important}
  .mobile-card-table thead{display:none}
  .mobile-card-table tbody{display:grid;gap:.75rem;width:100%}
  .mobile-card-table tr{display:block;padding:.75rem .85rem;border:1px solid var(--line);border-radius:12px;background:var(--surface);box-shadow:0 2px 7px rgba(4,25,43,.04)}
  .mobile-card-table td{display:grid;grid-template-columns:minmax(92px,.42fr) minmax(0,1fr);gap:.7rem;align-items:start;width:100%;min-width:0;padding:.42rem 0!important;border:0!important;border-bottom:1px solid color-mix(in srgb,var(--line) 68%,transparent)!important;white-space:normal!important;overflow-wrap:anywhere}
  .mobile-card-table td:last-child{border-bottom:0!important}
  .mobile-card-table td::before{content:attr(data-label);color:var(--muted);font-size:.72rem;font-weight:800;line-height:1.35}
  .mobile-card-table .row-link,.mobile-card-table .button{max-width:100%;white-space:normal;text-align:left}

  .wizard-steps{display:none!important}
  .mobile-wizard-progress{display:grid;gap:.55rem;margin-bottom:.85rem;padding:.75rem .85rem;border:1px solid var(--line);border-radius:12px;background:var(--surface)}
  .mobile-wizard-progress strong{font-size:.9rem}
  .mobile-wizard-segments{display:grid;grid-template-columns:repeat(6,1fr);gap:.3rem}
  .mobile-wizard-segments span{height:5px;border-radius:999px;background:var(--surface-3)}
  .mobile-wizard-segments span.active{background:var(--cue-home)}
  .wizard-footer{display:grid!important;grid-template-columns:1fr;gap:.65rem;padding:1rem}
  .wizard-footer>.button[data-action="wizard-back"]{order:2;width:100%}
  .wizard-footer .right{display:grid!important;grid-template-columns:1fr;gap:.65rem;width:100%;order:1}
  .wizard-footer .right .button{width:100%;min-height:48px}
  .wizard-footer .right .button.primary{order:-1;min-height:52px;font-size:1rem}
}

@media (max-width:560px){
  .prelogin-install{padding:.7rem}
  .simple-more-grid,.simple-home-actions{grid-template-columns:1fr}
  .simple-mobile-home{padding:1rem;margin-inline:-.15rem}
  .simple-mobile-nav-item{font-size:.65rem}
  .mobile-card-table td{grid-template-columns:minmax(82px,.4fr) minmax(0,1fr);gap:.55rem}
}