/* ARMAX - shared dark-mode readability + clean brand header.
 * Loaded LAST on every page. Every colour rule below is scoped to
 * html:not([data-theme="light"]) so Light Mode is never affected.
 */

/* ---------- Brand header (logo mark removed): ARMAX + COMMAND CENTER ---------- */
html:not([dir="rtl"]) .sidebar .brand{direction:ltr;justify-content:flex-start;text-align:left}
.sidebar .brand{gap:0;padding-left:12px;padding-right:10px}
.sidebar .brand-title{line-height:1.2}
.sidebar .brand-sub{line-height:1.2}

/* Collapsed icon rail (mobile): keep the ARMAX wordmark instead of an empty gap.
   Container query follows the real sidebar width, whatever each page's breakpoint is. */
.sidebar{container-type:inline-size;container-name:armaxside}
@container armaxside (max-width:110px){
  .brand{padding:2px 0 18px!important;justify-content:center!important;text-align:center}
  .brand>div{min-width:0;max-width:100%}
  .brand .brand-title{display:block!important;font-size:9px!important;letter-spacing:0;font-weight:800;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
  .brand .brand-sub{display:none!important}
}

/* Account block (top-right) now has no avatar: keep it tidy */
.top-actions .admin{padding-left:6px;gap:12px;white-space:nowrap}
.top-actions .admin .armax-logout{display:inline-block;padding:8px 12px;border-radius:9px;background:#172033;border:1px solid rgba(255,255,255,.10);color:#fff;text-decoration:none;font:700 11px Inter,system-ui,sans-serif;line-height:1.2}
.top-actions .admin .armax-logout:hover{background:#202b40}
html[data-theme="light"] .top-actions .admin .armax-logout{background:#eef0f6;color:#182033;border-color:rgba(18,28,48,.12)}
html[data-theme="light"] .top-actions .admin .armax-logout:hover{background:#e3e6ef}
.top-actions .admin>div{line-height:1.25}

/* ---------- Dark mode readability ---------- */
html:not([data-theme="light"]),
html:not([data-theme="light"]) body{
  --text:#f4f7fc;
  --muted:#b3bdce;
  --border:rgba(255,255,255,.15);
  --line:rgba(255,255,255,.15);
}

/* primary text / headings */
html:not([data-theme="light"]) .page-title,
html:not([data-theme="light"]) .title,
html:not([data-theme="light"]) .card-title,
html:not([data-theme="light"]) .hero h2,
html:not([data-theme="light"]) .brand-title,
html:not([data-theme="light"]) .metric-num,
html:not([data-theme="light"]) .stat-value,
html:not([data-theme="light"]) .stat strong,
html:not([data-theme="light"]) .name,
html:not([data-theme="light"]) .cell-main,
html:not([data-theme="light"]) .task-name,
html:not([data-theme="light"]) .profile-name,
html:not([data-theme="light"]) .group-name,
html:not([data-theme="light"]) .summary-value,
html:not([data-theme="light"]) .item h4,
html:not([data-theme="light"]) .armax-architecture-title{color:#f8fafd}

/* secondary text, descriptions, helper text */
html:not([data-theme="light"]) .brand-sub,
html:not([data-theme="light"]) .page-sub,
html:not([data-theme="light"]) .sub,
html:not([data-theme="light"]) .card-sub,
html:not([data-theme="light"]) .hint,
html:not([data-theme="light"]) .note,
html:not([data-theme="light"]) .detail,
html:not([data-theme="light"]) .small,
html:not([data-theme="light"]) .muted,
html:not([data-theme="light"]) .empty,
html:not([data-theme="light"]) .selected,
html:not([data-theme="light"]) .sync,
html:not([data-theme="light"]) .metric-foot,
html:not([data-theme="light"]) .stat-foot,
html:not([data-theme="light"]) .stat small,
html:not([data-theme="light"]) .cell-sub,
html:not([data-theme="light"]) .item p,
html:not([data-theme="light"]) .item pre,
html:not([data-theme="light"]) .task-meta,
html:not([data-theme="light"]) .percent,
html:not([data-theme="light"]) .group-desc,
html:not([data-theme="light"]) .count-label,
html:not([data-theme="light"]) .monitor-sub,
html:not([data-theme="light"]) .monitor-foot,
html:not([data-theme="light"]) .monitor-metric span,
html:not([data-theme="light"]) .id,
html:not([data-theme="light"]) .accounts,
html:not([data-theme="light"]) .last-sync,
html:not([data-theme="light"]) .preview p,
html:not([data-theme="light"]) .feature-box p,
html:not([data-theme="light"]) .hero p,
html:not([data-theme="light"]) .armax-architecture-sub,
html:not([data-theme="light"]) .armax-flow-step span,
html:not([data-theme="light"]) .schedule small,
html:not([data-theme="light"]) .worker-name{color:#b9c2d1}

/* labels, table headers, table cells */
html:not([data-theme="light"]) .label,
html:not([data-theme="light"]) .lbl,
html:not([data-theme="light"]) .modal-label,
html:not([data-theme="light"]) .field label,
html:not([data-theme="light"]) .check-row,
html:not([data-theme="light"]) .metric-label,
html:not([data-theme="light"]) .metric-head,
html:not([data-theme="light"]) .stat-label,
html:not([data-theme="light"]) .summary-label,
html:not([data-theme="light"]) .system-label{color:#c2cad8}
html:not([data-theme="light"]) th,
html:not([data-theme="light"]) .tbl th,
html:not([data-theme="light"]) .table th,
html:not([data-theme="light"]) .account-table th,
html:not([data-theme="light"]) .monitor-table th{color:#c2cad8}
html:not([data-theme="light"]) td,
html:not([data-theme="light"]) .tbl td,
html:not([data-theme="light"]) .account-table td,
html:not([data-theme="light"]) .monitor-table td{color:#d3dae6}
html:not([data-theme="light"]) td,
html:not([data-theme="light"]) .tbl td{border-top-color:rgba(255,255,255,.12)}

/* sidebar */
html:not([data-theme="light"]) .section-label{color:#aab4c5}
html:not([data-theme="light"]) .nav a:not(.active){color:#c5cdda}
html:not([data-theme="light"]) .nav a:not(.active):hover{color:#fff}
html:not([data-theme="light"]) .nav-icon{opacity:1}
html:not([data-theme="light"]) .sidebar{border-right-color:rgba(255,255,255,.14)}
html:not([data-theme="light"]) .connection,
html:not([data-theme="light"]) .connection-top{color:#cdd5e2}

/* top bar: language switch, icon buttons, account / role chip, sign out */
html:not([data-theme="light"]) .lang-switch button,
html:not([data-theme="light"]) .lang button{color:#c2cad8}
html:not([data-theme="light"]) .lang-switch button.active,
html:not([data-theme="light"]) .lang button.active{color:#fff}
html:not([data-theme="light"]) .lang-switch,
html:not([data-theme="light"]) .lang{border-color:rgba(255,255,255,.2)}
html:not([data-theme="light"]) .icon-btn,
html:not([data-theme="light"]) .theme-toggle{color:#dbe2ee;border-color:rgba(255,255,255,.2)}
html:not([data-theme="light"]) .rolechip{color:#dbe2ee;border-color:rgba(255,255,255,.2)}
html:not([data-theme="light"]) .armax-rolebar{color:#dbe2ee;border-color:rgba(255,255,255,.2)}
html:not([data-theme="light"]) .armax-rolebar a{color:#dbe2ee}
html:not([data-theme="light"]) .armax-logout{border-color:rgba(255,255,255,.22)}
html:not([data-theme="light"]) .admin [style*="font-size:11px"]{color:#f4f7fc}

/* buttons (secondary / ghost only: primary & danger keep their own colours) */
html:not([data-theme="light"]) .btn-ghost,
html:not([data-theme="light"]) .btn-secondary,
html:not([data-theme="light"]) .secondary{color:#e3e9f3;border-color:rgba(255,255,255,.2)}
html:not([data-theme="light"]) .btn:not(.primary):not(.btn-primary):not(.danger):not(.btn-danger):not(.theme-toggle){border-color:rgba(255,255,255,.2)}
html:not([data-theme="light"]) .btn.btn-danger,
html:not([data-theme="light"]) .btn.danger{color:#ff9aa7}
html:not([data-theme="light"]) .tab:not(.active){color:#c2cad8}
html:not([data-theme="light"]) .pager{color:#c2cad8}

/* cards and panels: slightly clearer edges */
html:not([data-theme="light"]) .card,
html:not([data-theme="light"]) .metric,
html:not([data-theme="light"]) .stat,
html:not([data-theme="light"]) .item,
html:not([data-theme="light"]) .group,
html:not([data-theme="light"]) .feature-box,
html:not([data-theme="light"]) .quick-card,
html:not([data-theme="light"]) .hero,
html:not([data-theme="light"]) .modal,
html:not([data-theme="light"]) .modal-box,
html:not([data-theme="light"]) .schedule{border-color:rgba(255,255,255,.15)}
html:not([data-theme="light"]) .card-head,
html:not([data-theme="light"]) .header,
html:not([data-theme="light"]) .toolbar,
html:not([data-theme="light"]) .bottom,
html:not([data-theme="light"]) .pager{border-color:rgba(255,255,255,.14)}

/* form controls */
html:not([data-theme="light"]) input:not([type="checkbox"]):not([type="radio"]),
html:not([data-theme="light"]) select,
html:not([data-theme="light"]) textarea,
html:not([data-theme="light"]) .input,
html:not([data-theme="light"]) .select,
html:not([data-theme="light"]) .textarea,
html:not([data-theme="light"]) .search{color:#f4f7fc;border-color:rgba(255,255,255,.24)}
html:not([data-theme="light"]) input::placeholder,
html:not([data-theme="light"]) textarea::placeholder{color:#97a3b8;opacity:1}
html:not([data-theme="light"]) input:not([type="checkbox"]):not([type="radio"]):focus,
html:not([data-theme="light"]) select:focus,
html:not([data-theme="light"]) textarea:focus{border-color:rgba(150,128,255,.8)}

/* status indicators: brighter text, backgrounds unchanged so they stay distinct */
html:not([data-theme="light"]) .b-ok{color:#52e3b0}
html:not([data-theme="light"]) .b-err{color:#ff8f9d}
html:not([data-theme="light"]) .b-warn{color:#ffc774}
html:not([data-theme="light"]) .b-info{color:#86bbff}
html:not([data-theme="light"]) .b-mute{color:#c2cad8}
html:not([data-theme="light"]) .tag,
html:not([data-theme="light"]) .selection-pill{color:#cfc7ff}

/* old inline colours that were hard-coded in markup / generated rows */
html:not([data-theme="light"]) [style*="color:#697588"],
html:not([data-theme="light"]) [style*="color:#687487"],
html:not([data-theme="light"]) [style*="color:#758196"],
html:not([data-theme="light"]) [style*="color:#79869a"],
html:not([data-theme="light"]) [style*="color:#7f8b9d"],
html:not([data-theme="light"]) [style*="color:#8d98aa"],
html:not([data-theme="light"]) [style*="color:#8995a7"]{color:#b9c2d1!important}
html:not([data-theme="light"]) [style*="color:#b9c2d0"],
html:not([data-theme="light"]) [style*="color:#c1c9d5"]{color:#d3dae6!important}

/* Mobile: some pages hide the whole account block; keep Sign out reachable */
@media(max-width:760px){
  .top-actions .admin{display:flex!important;padding-left:0}
  .top-actions .admin>div:not(.armax-logout){display:none}
  .top-actions .admin .armax-logout{padding:9px 10px}
}