/* DON-NET 1.9 – mobile-first usability and accessibility layer.
   A noir visual language remains, controls and information density improve. */
:root{
  --ux-surface:#18221e;
  --ux-elevated:#202c26;
  --ux-border:#4b6153;
  --ux-highlight:#e96c51;
  --ux-ink:#f4f0e6;
  --ux-subtle:#c2d0c5;
}
html{scroll-padding-top:28px}
body{font-size:16px}
:focus-visible{outline:3px solid #f2bd68!important;outline-offset:3px!important}
button,a,input,select,textarea{touch-action:manipulation}
button,.mini-btn,.small-button,.button{transition:background-color .13s ease,border-color .13s ease}
.app-page{background:#141c19}
.app-shell{grid-template-columns:minmax(235px,268px) minmax(0,1fr)}
.app-main{padding:32px clamp(20px,3.3vw,60px) 70px}
.app-main,.app-top,.dash-grid,.panel{min-width:0}
.app-top{align-items:center;gap:14px;margin-bottom:24px;padding-bottom:23px}
.app-top h2{font-size:clamp(34px,3.5vw,55px);overflow-wrap:anywhere}
.app-eyebrow{font-size:12px;color:#b6c5b9;letter-spacing:1.9px}
.ux-app-controls{display:flex;gap:9px;align-items:center;flex-wrap:wrap;justify-content:flex-end}
.ux-app-controls button{min-height:44px;white-space:nowrap}
.ux-menu-button{display:none;border:1px solid #758a77;color:var(--cream);background:#26362c;padding:10px 15px;font-weight:800}
.ux-help-button{border:1px solid #849185;color:#f3eee6;background:#233329;padding:10px 16px;font-weight:750}
.sidebar{
  /* Desktop: header/status and logout always have their own rows;
     only the long menu scrolls. Never shrink the menu into the footer. */
  position:sticky;top:0;height:100dvh;min-height:0;
  display:grid;grid-template-rows:auto auto minmax(0,1fr) auto;
  align-content:stretch;overflow:hidden;
  padding:22px 17px 17px;gap:12px;border-color:#455b4d;background:#101915;
}
.sidebar-head{padding:0 4px 8px}
.sidebar-head small{color:#c8d3c9}
.sidebar-status{font-size:12px;letter-spacing:1px;padding:10px 12px;color:#afdcaf;background:#1b3525}
.sidebar-status.ux-offline{background:#422721;color:#ffd0c5}
.sidebar-status.ux-offline i{background:#ed9c70;box-shadow:none}
.sidebar .side-nav{
  display:block;min-height:0;min-width:0;margin:0;
  overflow-y:auto;overflow-x:hidden;
  overscroll-behavior:contain;scrollbar-width:thin;
  scrollbar-color:#597360 #13201a;
  padding:0 5px 12px 0;
}
.ux-search-label{display:block;margin:0 0 6px;color:#d5ded2;font-size:12px;font-weight:750}
#ux-nav-search{
  display:block;width:100%;min-height:44px;padding:9px 12px;
  color:#fff;background:#202e26;border:1px solid #758d77;
  border-radius:8px;font-size:14px;
}
#ux-nav-search::placeholder{color:#b9c7ba;opacity:1}
.ux-nav-categories{display:grid;gap:15px;margin-top:17px}
.ux-nav-heading{
  margin:0 0 6px;padding:0 9px;color:#b9cbbd;
  font-size:12px;font-weight:800;letter-spacing:.045em;text-transform:uppercase;
}
.ux-nav-group{display:grid;gap:3px}
.ux-nav-group button{
  border:0;border-left:3px solid transparent;background:transparent;
  color:#d1ded2;text-align:left;padding:10px 10px;
  min-height:44px;white-space:normal;line-height:1.35;
  border-radius:0 7px 7px 0;font:650 14px/1.35 var(--body);letter-spacing:0;
}
.ux-nav-group button:hover{background:#263d2e;color:#fff}
.ux-nav-group button.active,.ux-nav-group button[aria-current="page"]{
  color:#fff;background:#314635;border-left-color:#ff8b6c;
}
.ux-empty{color:#d4c6b5;font-size:13px;padding:7px}
.sidebar .side-foot{
  min-height:0;margin:0;align-self:stretch;position:relative;z-index:1;
  background:#101915;border-top:1px solid #415849;
  padding:12px 0 0;display:grid;gap:8px;
}
.sidebar .side-foot button{width:100%;min-width:0}
.side-foot #username-chip{font-size:12px;line-height:1.5;overflow-wrap:anywhere;color:#e1e8df}
.side-foot button{min-height:44px;font-size:13px}
.ux-menu-shade{display:none}
.panel{
  border-radius:12px;background:#1e2a23;
  border:1px solid #4d6153;padding:clamp(18px,2vw,27px);
  box-shadow:0 8px 22px #07120b25;
}
.panel h3{font:850 clamp(23px,2.2vw,29px)/1.15 var(--head);margin-bottom:17px;letter-spacing:.2px}
.panel .sub,.caption,.muted-sm,.card-row small,.city-item-head small{
  color:#c2d0c4;
}
.mini-btn,.small-button,.app-page .button{
  min-height:44px;padding:10px 16px;font:800 14px/1.25 var(--head);
  border-radius:7px;letter-spacing:.3px;white-space:normal;text-align:center;
}
.mini-btn.alt{border:1px solid #7f9885;background:#30483a;color:#f5f5ed}
.mini-btn:not(:disabled):hover,.ux-help-button:hover{filter:brightness(1.15)}
.app-page input,.app-page select,.app-page textarea{
  min-height:44px;border-radius:7px;font-size:16px;
}
.app-page .field{font:750 13px/1.3 var(--body);letter-spacing:.1px;color:#e1ebe1;gap:8px}
.app-page .field input,.app-page .field select,.app-page .field textarea{
  border-color:#849489;background:#101a15;color:#f5f7f1;padding:11px 13px;
}
.app-page input::placeholder,.app-page textarea::placeholder{color:#b9c7ba;opacity:1}
.app-page input:focus,.app-page select:focus,.app-page textarea:focus{
  border-color:#ef9a74;box-shadow:0 0 0 2px #ef9a7440;
}
.app-page input[type=checkbox]{width:19px;min-height:19px;height:19px;accent-color:#ff8b6c}
.app-page .form-actions{padding-top:5px}
.app-page .form-actions button{min-height:46px}
.app-page button[disabled],.app-page [aria-busy="true"] button{cursor:wait}
.app-page .table-wrap{border:1px solid #4a6252;border-radius:8px}
.app-page .data-table{font-size:14px}
.app-page .data-table th{color:#dce6d9;font-size:12px}
.app-page .data-table td{padding:13px 10px}
.app-page .card-row{padding:15px 0;gap:12px}
.app-page .notice{border-radius:0 8px 8px 0;line-height:1.5}
.app-page .toast{
  border-radius:9px;position:sticky;top:12px;z-index:12;
  box-shadow:0 6px 22px #0006;font-size:15px;
}
.ux-start{
  grid-column:1/-1;background:
  radial-gradient(circle at top right,#74433240,transparent 46%),
  linear-gradient(145deg,#273b2b,#1c2b23);
  border:1px solid #687d68;border-radius:13px;padding:clamp(19px,3vw,30px);
  display:grid;gap:17px;
}
.ux-eyebrow{font-size:12px;letter-spacing:2px;font-weight:800;color:#f5a48b;margin:0 0 7px}
.ux-start h3{font:900 clamp(27px,4vw,40px)/1.03 var(--head);margin:0 0 8px;color:#fff}
.ux-start p{margin:0;color:#d6e2d6}
.ux-start .ux-start-note{color:#ffc3a7;margin-top:10px}
.ux-quick-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px}
.ux-quick-card{
  display:flex;align-items:center;gap:10px;min-height:76px;padding:13px;
  background:#14251b;color:#fff;border:1px solid #63836c;border-radius:9px;
  text-align:left;font:750 15px/1.25 var(--body);
}
.ux-quick-card>span:nth-child(2){flex:1;overflow-wrap:anywhere}
.ux-quick-card:hover{border-color:#ffb18d;background:#254633}
.ux-quick-card span:last-child{font-size:22px;color:#ffab88}
.ux-quick-num{font:800 12px var(--body);color:#eab18e}
.ux-inline-help{
  border:0;background:transparent;color:#ffd0b1;justify-self:start;
  font-size:14px;font-weight:750;padding:10px 0;text-decoration:underline;
}
.ux-help-dialog{
  width:min(580px,calc(100% - 28px));max-height:min(88vh,750px);
  overflow-y:auto;background:#18271e;color:#f4f0e7;
  border:1px solid #809783;border-radius:15px;
  padding:clamp(21px,4vw,32px);box-shadow:0 20px 80px #000b;
}
.ux-help-dialog::backdrop{background:#050c08d8}
.ux-help-dialog h2{font:850 37px/1.06 var(--head);margin:7px 0 18px}
.ux-help-dialog .ux-help-role{font-size:12px;letter-spacing:1.4px;color:#ffb79f;font-weight:800}
.ux-help-dialog li{margin:0 0 12px;color:#e1e9dd;line-height:1.58;padding-left:3px}
.ux-help-dialog ol{padding-left:22px;margin-bottom:24px}
.ux-help-close{min-height:44px;padding:10px 24px;border-radius:7px;
  background:var(--red);border:0;color:#151917;font-weight:800}
@media(min-width:741px){
  .sidebar .side-nav button{font-size:14px}
}
@media(max-width:1000px) and (min-width:741px){
  .app-shell{grid-template-columns:216px minmax(0,1fr)}
  .app-main{padding:26px 22px}
  .ux-quick-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media(max-width:740px){
  .app-shell{display:block}
  .app-main{padding:18px 16px 70px}
  .app-top{align-items:center;gap:12px}
  .app-top h2{font-size:clamp(31px,9vw,42px);margin-top:4px}
  .app-eyebrow{font-size:10px;letter-spacing:1.1px}
  .ux-app-controls{gap:6px}
  .ux-app-controls .small-button,.ux-help-button{font-size:12px;padding:8px 12px}
  .ux-menu-button{display:inline-flex;align-items:center;gap:8px;min-height:44px;border-radius:7px}
  .ux-menu-shade:not(.hidden){position:fixed;inset:0;display:block;z-index:70;background:#040b07c9}
  body.ux-menu-visible{overflow:hidden}
  .sidebar{
    position:fixed;z-index:71;left:0;top:0;bottom:0;width:min(88vw,350px);
    height:100dvh;transform:translateX(-110%);padding:24px 17px;
    border-right:1px solid #86a38b;box-shadow:15px 0 55px #0009;
    margin:0;display:grid;
    grid-template-rows:auto auto minmax(0,1fr) auto;
    overflow:hidden;
    visibility:hidden;transition:transform .19s ease,visibility .19s ease;
  }
  .sidebar.ux-menu-open{transform:translateX(0);visibility:visible}
  .sidebar .sidebar-status{display:block;margin:0}
  .sidebar .side-nav{display:block;min-height:0;overflow-y:auto;overflow-x:hidden;margin:0;padding:0 5px 12px 0}
  .sidebar .ux-nav-categories{display:grid}
  .sidebar .ux-nav-group button{white-space:normal;width:100%;font-size:15px;padding:10px 12px}
  .sidebar .side-foot{display:grid;margin:0;align-self:stretch;padding:10px 0 calc(8px + env(safe-area-inset-bottom))}
  .panel{padding:18px}
  .ux-start{gap:15px}
  .ux-quick-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:9px}
  .ux-quick-card{min-height:78px;padding:11px;font-size:14px;gap:8px}
  .ux-quick-num{font-size:10px}
  .app-page .form-actions button{flex:1 1 100%;width:100%}
  .app-page .inline-actions .mini-btn{min-width:44px}
}
@media(max-width:395px){
  .app-top{align-items:start;flex-direction:column}
  .ux-app-controls{width:100%;justify-content:space-between}
  .ux-quick-grid{grid-template-columns:1fr}
  .ux-quick-card{min-height:60px}
}
@media(prefers-reduced-motion:reduce){.sidebar{transition:none!important}}

.ux-nav-heading{font-family:var(--body);font-size:12px;line-height:1.5}
.ux-menu-close{display:none}
@media(max-width:740px){
 .sidebar-head{display:flex;justify-content:space-between}
 .ux-menu-close{display:block;min-width:44px;min-height:44px;border:1px solid #718872;border-radius:8px;background:#263c2e;color:#fff;font-size:26px}
}

/* Public onboarding and conspicuous offline warning */
.ux-public-guide{padding:56px 0 100px}
.ux-public-guide h2{font:900 clamp(41px,6vw,78px)/.98 var(--head);margin:0 0 26px}
.ux-public-steps{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:15px}
.ux-public-steps article{background:#202a25;border:1px solid #566c5c;border-radius:11px;padding:24px}
.ux-public-steps article span{font:900 37px var(--head);color:#f07e62}
.ux-public-steps h3{font:850 25px var(--head);margin:13px 0}
.ux-public-steps p{color:#d3ded2;font-size:15px;line-height:1.6}
.ux-public-warning{border-left:3px solid #e67d5f;background:#252520;padding:16px;color:#f0e6d3;max-width:930px}
.ux-connection-banner{padding:15px 18px;margin:0 0 20px;background:#442521;border:2px solid #ee9478;border-radius:9px;color:#ffe1d7;font-weight:750;line-height:1.6}
@media(max-width:850px){.ux-public-steps{grid-template-columns:1fr}.ux-public-guide{padding:55px 0}.ux-public-steps article{padding:18px}.ux-public-steps h3{margin:8px 0}}