/* Reliance Design System — accepted shared contract with Hub alpha.13 candidate implementation */
:root{
  --rht-brand:#16324f;
  --rht-brand-strong:#102a43;
  --rht-accent:#1f6f78;
  --rht-accent-strong:#165b63;
  --rht-bg:#f4f7fa;
  --rht-surface:#ffffff;
  --rht-surface-soft:#f7f9fb;
  --rht-border:#d8e0e8;
  --rht-text:#1f2937;
  --rht-text-muted:#64748b;
  --rht-danger:#b42318;
  --rht-danger-bg:#fee4e2;
  --rht-warning:#9a6700;
  --rht-warning-bg:#fff4ce;
  --rht-success:#176b3a;
  --rht-success-bg:#dcfce7;
  --rht-info:#175cd3;
  --rht-info-bg:#eaf2ff;
  --rht-focus:rgba(31,111,120,.28);
  --rht-shadow-sm:0 2px 8px rgba(15,42,67,.08);
  --rht-shadow-md:0 12px 36px rgba(15,42,67,.16);
  --rht-radius:.9rem;
  --rht-shell-height:76px;
  --rht-shell-context-height:0px;
  --rht-shell-bottom-height:78px;
  color-scheme:light;
}

/* Approved RAID adapter. Navigation has no card surfaces or exposed child icon list. */
html .app-nav .nav-brand{display:flex;flex-wrap:nowrap;align-items:center;gap:12px;min-height:76px;padding:16px;border-bottom:0}
html .app-nav .nav-app-name{display:flex!important;flex-direction:column;align-items:flex-start;gap:2px;flex:1;width:auto}
html .app-nav .nav-app-name strong{font-size:16px;font-weight:600}
html .app-nav .nav-app-name small{font-size:12px;color:#b3becd}
html .app-nav .nav-rail-toggle{margin-left:auto;border:0;width:32px;min-width:32px}
html .app-nav .nav-close{top:16px;right:12px;border:0;background:transparent}
html .app-nav .primary-nav{padding:0 12px 12px}
html .app-nav .return-hub{width:calc(100% - 24px);margin:4px 12px}
html .app-nav .nav-section:not([open])>.nav-children{display:none}
html .app-nav .nav-footer{padding:12px;flex-shrink:0}
html .context-chip{display:none}
@media(min-width:1100px){
 html .app-frame main{padding-top:104px}
 html .app-nav .nav-rail-toggle{display:grid}
 html:not([data-nav-expanded="true"]) .app-nav .nav-brand{flex-direction:column;padding:16px 12px;gap:8px}
 html:not([data-nav-expanded="true"]) .app-nav .nav-app-name{display:none!important}
 html:not([data-nav-expanded="true"]) .app-nav .nav-rail-toggle{margin:0}
 html:not([data-nav-expanded="true"]) .app-nav .nav-children{display:none!important}
 html:not([data-nav-expanded="true"]) .app-nav summary{display:flex;justify-content:center}
 html:not([data-nav-expanded="true"]) .app-nav summary .nav-label,html:not([data-nav-expanded="true"]) .app-nav .nav-chevron{display:none}
 html[data-nav-expanded="true"] .app-nav .nav-section-title{display:flex}
}
@media(max-width:1099px){html .app-nav .nav-brand{padding-right:54px}}


html[data-appearance="dark"]{
  --rht-brand:#d9e7ef;
  --rht-brand-strong:#eef5f8;
  --rht-accent:#64b3bb;
  --rht-accent-strong:#8bd0d6;
  --rht-bg:#08131b;
  --rht-surface:#10232f;
  --rht-surface-soft:#142b38;
  --rht-border:#35505f;
  --rht-text:#edf5f8;
  --rht-text-muted:#a9bbc6;
  --rht-danger:#ffb4ab;
  --rht-danger-bg:#4a1f22;
  --rht-warning:#f4d078;
  --rht-warning-bg:#3f3314;
  --rht-success:#9ad9b4;
  --rht-success-bg:#173a29;
  --rht-info:#a8cbff;
  --rht-info-bg:#17304e;
  --rht-focus:rgba(100,179,187,.34);
  --rht-shadow-sm:0 2px 10px rgba(0,0,0,.28);
  --rht-shadow-md:0 12px 36px rgba(0,0,0,.38);
  color-scheme:dark;
}


/* RAID binding of design 1.3.1-alpha.16 / shell 1.2.1-alpha.16. */
:root { --rht-surface-raised:var(--rht-surface); --navy:var(--rht-brand); --teal:var(--rht-accent); --teal2:var(--rht-accent-strong); --line:var(--rht-border); --panel:var(--rht-surface); --soft:var(--rht-surface-soft); --muted:var(--rht-text-muted); --danger:var(--rht-danger); --danger-bg:var(--rht-danger-bg); --warn:var(--rht-warning); --warn-bg:var(--rht-warning-bg); --ok:var(--rht-success); --ok-bg:var(--rht-success-bg); --info:var(--rht-info); --info-bg:var(--rht-info-bg); }
html, body { background:var(--rht-bg); color:var(--rht-text); }
.app-frame, main, .card, .project-grid, .customer-grid { min-width:0; }
.icon-button,.avatar-button,.button,.button.small,.nav-rail-toggle { min-width:44px;min-height:44px; }
button,input,select,textarea { touch-action:manipulation; }
.button { background:#1f6f78;color:#fff; }
.button:hover { background:#165b63; }
.button.danger { background:#b42318;color:white; }
.avatar-button,.profile-avatar { background:#16324f;color:#fff;border-color:var(--rht-border); }
.header-version { background:var(--rht-surface-soft);color:var(--rht-text); }
:focus-visible { outline:3px solid var(--rht-accent);outline-offset:3px; }
.segmented-control input:focus-visible + span { outline:3px solid var(--rht-accent);outline-offset:2px; }
.skip-link { position:fixed;left:1rem;top:-5rem;z-index:100;background:var(--rht-surface);padding:.8rem; }
.skip-link:focus { top:.5rem; }
.nav-close { position:absolute;right:.7rem;top:.7rem;color:#fff;background:#16324f; }
.return-hub { width:calc(100% - 1rem);margin:.5rem; }
.return-hub[aria-busy="true"] { opacity:.65; }
.mobile-nav { display:none; }
.app-nav { background:#102a43; }
.app-nav .nav-brand { background:#102a43; }
.app-nav .nav-link { color:#edf5f8; }
html[data-appearance="dark"] .nav-rail-toggle { color:#edf5f8;background:#102a43; }
html[data-appearance="dark"] .nav-link.active { background:#244552;color:#edf5f8; }
.table-wrap { overflow:auto;max-width:100%; }
.nav-link.disabled { pointer-events:auto; }
@media (max-width:699px) {
  .mobile-nav { display:none!important; }
  .mobile-nav-link { display:flex;flex-direction:column;align-items:center;justify-content:center;gap:.25rem;min-height:52px;min-width:0;padding:.3rem .1rem;border:0;background:transparent;color:var(--rht-text-muted);font-size:.65rem;text-align:center;text-decoration:none;border-radius:.6rem; }
  .mobile-nav-link .nav-label { display:block;white-space:normal; }
  .mobile-nav-link.active { background:var(--rht-surface-soft);color:var(--rht-accent-strong);box-shadow:inset 0 -3px var(--rht-accent); }
  .mobile-nav-link.disabled { opacity:.45; }
  main { padding-bottom:calc(2rem + env(safe-area-inset-bottom)); }
  .toast-region { bottom:calc(20px + env(safe-area-inset-bottom)); }
  .wizard-actions { bottom:calc(12px + env(safe-area-inset-bottom)); }
  .app-header { gap:.3rem;padding-inline:.5rem; }
  .header-actions { gap:.25rem; }
  .screen-reference { display:none; }
  .screen-title-row { gap:.2rem; }
  .header-version { font-size:.55rem;padding:.1rem .2rem; }
  .customer-grid,.project-grid { grid-template-columns:minmax(0,1fr); }
}
@media (min-width:700px) and (max-width:1099px) {
  .customer-grid,.project-grid,.my-raid-grid { grid-template-columns:repeat(2,minmax(0,1fr)); }
  .kpi-grid { grid-template-columns:repeat(3,minmax(0,1fr)); }
  .field-grid,.two-col { grid-template-columns:repeat(2,minmax(0,1fr)); }
  .app-frame { margin-left:0; }
  main { width:100%;margin:0;padding:1.25rem 1.25rem 4rem; }
  .desktop-split { display:block; }
}
@media (min-width:1100px) {
  .app-header { grid-template-columns:minmax(0,1fr) auto; }
  .nav-close { display:none; }
  .customer-grid { grid-template-columns:repeat(3,minmax(0,1fr)); }
  .project-grid { grid-template-columns:repeat(2,minmax(0,1fr)); }
  .kpi-grid { grid-template-columns:repeat(auto-fit,minmax(140px,1fr)); }
  .desktop-split { display:grid;grid-template-columns:minmax(0,1fr) minmax(280px,.4fr);gap:1rem;align-items:start; }
  .sticky-side { top:120px; }
  .return-hub .nav-label { display:none; }
  html[data-nav-expanded="true"] .return-hub .nav-label { display:inline; }
  .return-hub { justify-content:center; }
  html[data-nav-expanded="true"] .return-hub { justify-content:flex-start; }
  .table-wrap table { min-width:100%; }
}
@media (min-width:1440px) {
  .project-grid { grid-template-columns:repeat(3,minmax(0,1fr)); }
  .customer-grid { grid-template-columns:repeat(4,minmax(0,1fr)); }
  .desktop-split { grid-template-columns:minmax(0,2fr) minmax(340px,1fr); }
}
@media (prefers-reduced-motion:reduce) {
  *,*::before,*::after { scroll-behavior:auto!important;transition:none!important;animation:none!important; }
}

/* Reference desktop shell: expanded menu or an 80px branded rail. */
:root{--nav-collapsed:80px;--nav-expanded:288px}
html .app-nav,html[data-appearance="light"] .app-nav,html .app-nav .nav-brand,html .app-nav .primary-nav,html .app-nav .nav-footer{background:#1d2530;color:#dce3ed}
html[data-appearance="light"] .app-nav .nav-link,.app-nav .nav-link{color:#dce3ed}
html[data-appearance="light"] .app-nav .nav-link.active,.app-nav .nav-link.active{background:#3c5f8d;color:white;box-shadow:none}
.nav-brand{display:flex;flex-wrap:wrap;gap:12px;flex-shrink:0}
.reliance-symbol{display:block;width:32px;height:32px;object-fit:contain}
.nav-section-title{cursor:pointer;color:#aebaca}
.nav-footer .nav-link{background:transparent;border:0}
@media(min-width:1100px){
 .nav-brand{justify-content:center}
 html[data-nav-expanded="true"] .nav-brand{justify-content:space-between}
 html[data-nav-expanded="true"] .nav-app-name{width:100%}
 .nav-section:not([open])>.nav-link{display:none}
 html:not([data-nav-expanded="true"]) .nav-section>.nav-link{display:flex}
 .app-nav .nav-footer .nav-link{min-height:44px}
}

/* Option B final RAID navigation harmonisation — app-specific layer. */
:root{--nav-collapsed:76px;--nav-expanded:268px}
html .app-nav,
html[data-appearance="light"] .app-nav,
html[data-appearance="dark"] .app-nav,
html .app-nav .nav-brand,
html .app-nav .primary-nav,
html .app-nav .nav-footer{
  background:#1d2530!important;
  color:#dce3ed!important;
}
html .app-nav{border-right:1px solid rgba(255,255,255,.08)!important;box-shadow:none!important}
html .app-nav .nav-brand{min-height:64px!important;padding:10px 12px!important;gap:10px!important;border-bottom:1px solid rgba(255,255,255,.08)!important;flex-wrap:nowrap!important}
html .app-nav .reliance-symbol{width:32px!important;height:32px!important;flex:0 0 32px!important}
html .app-nav .nav-app-name{min-width:0!important;gap:1px!important}
html .app-nav .nav-app-name strong{font-size:15px!important;line-height:1.2!important;font-weight:650!important;color:#fff!important}
html .app-nav .nav-app-name small{font-size:11px!important;line-height:1.2!important;color:#aebaca!important}
html .app-nav .nav-rail-toggle{width:34px!important;height:34px!important;min-width:34px!important;min-height:34px!important;margin-left:auto!important;border:1px solid transparent!important;border-radius:7px!important;background:transparent!important;color:#dce3ed!important;box-shadow:none!important}
html .app-nav .nav-rail-toggle:hover{background:rgba(255,255,255,.07)!important;border-color:rgba(255,255,255,.10)!important}
html .app-nav .return-hub{width:calc(100% - 20px)!important;margin:8px 10px 4px!important}
html .app-nav .primary-nav{padding:4px 10px 12px!important}
html .app-nav .nav-section{margin:2px 0!important}
html .app-nav .nav-section-title,
html .app-nav .nav-link{
  min-height:44px!important;
  border-radius:7px!important;
  margin:1px 0!important;
  padding:9px 11px!important;
  gap:11px!important;
  color:#dce3ed!important;
  background:transparent!important;
  box-shadow:none!important;
  font-size:14px!important;
  font-weight:500!important;
}
html .app-nav .nav-section-title:hover,
html .app-nav .nav-link:hover{background:rgba(255,255,255,.055)!important;color:#fff!important}
html .app-nav .nav-link.active{background:#3c5f8d!important;color:#fff!important;box-shadow:none!important;font-weight:600!important}
html .app-nav .nav-link.disabled{opacity:.58!important;color:#9aa8ba!important;background:transparent!important;cursor:not-allowed!important}
html .app-nav .nav-icon{width:20px!important;flex:0 0 20px!important;color:currentColor!important;opacity:1!important}
html .app-nav .nav-chevron{color:#9eacbd!important;opacity:.85!important}
html .app-nav .nav-children{padding:0 0 4px 22px!important}
html .app-nav .nav-children .nav-link{min-height:40px!important;padding-top:8px!important;padding-bottom:8px!important;font-size:13px!important}
html .app-nav .nav-footer{margin-top:auto!important;padding:8px 10px 10px!important;border-top:1px solid rgba(255,255,255,.08)!important}
html .app-nav .nav-footer .nav-link{min-height:42px!important;margin:0!important}
html .app-nav .sync-status,
html .app-nav .build-status{display:none!important}

@media(min-width:1100px){
  html .app-nav{width:var(--nav-collapsed)!important}
  html[data-nav-expanded="true"] .app-nav{width:var(--nav-expanded)!important}
  html .app-frame{margin-left:var(--nav-collapsed)!important}
  html[data-nav-expanded="true"] .app-frame{margin-left:var(--nav-expanded)!important}
  html .app-header{left:var(--nav-collapsed)!important}
  html[data-nav-expanded="true"] .app-header{left:var(--nav-expanded)!important}
  html .context-chip{left:var(--nav-collapsed)!important}
  html[data-nav-expanded="true"] .context-chip{left:var(--nav-expanded)!important}
  html:not([data-nav-expanded="true"]) .app-nav .nav-brand{display:grid!important;grid-template-columns:32px 28px!important;justify-content:center!important;align-items:center!important;gap:4px!important;padding:10px 6px!important}
  html:not([data-nav-expanded="true"]) .app-nav .nav-app-name{display:none!important}
  html:not([data-nav-expanded="true"]) .app-nav .reliance-symbol{width:30px!important;height:30px!important}
  html:not([data-nav-expanded="true"]) .app-nav .nav-rail-toggle{width:28px!important;height:28px!important;min-width:28px!important;min-height:28px!important;margin:0!important;font-size:15px!important}
  html[data-nav-expanded="true"] .app-nav .nav-brand{display:grid!important;grid-template-columns:32px minmax(0,1fr) 34px!important;align-items:center!important}
  html[data-nav-expanded="true"] .app-nav .nav-app-name{display:flex!important;flex-direction:column!important;align-items:flex-start!important;justify-content:center!important;width:auto!important}
  html:not([data-nav-expanded="true"]) .app-nav .return-hub,
  html:not([data-nav-expanded="true"]) .app-nav .nav-link,
  html:not([data-nav-expanded="true"]) .app-nav .nav-section-title{justify-content:center!important;padding-left:8px!important;padding-right:8px!important}
  html:not([data-nav-expanded="true"]) .app-nav .return-hub{width:44px!important;height:44px!important;margin:8px auto 4px!important}
  html:not([data-nav-expanded="true"]) .app-nav .nav-link{width:44px!important;min-width:44px!important;margin:2px auto!important}
  html:not([data-nav-expanded="true"]) .app-nav .nav-section-title{width:44px!important;min-width:44px!important;margin:2px auto!important}
  html:not([data-nav-expanded="true"]) .app-nav .nav-link.active{background:#3c5f8d!important}
  html:not([data-nav-expanded="true"]) .app-nav .primary-nav{padding-left:8px!important;padding-right:8px!important}
  html:not([data-nav-expanded="true"]) .app-nav .nav-footer{padding-left:8px!important;padding-right:8px!important}
  html:not([data-nav-expanded="true"]) .app-nav .nav-footer .nav-link{width:44px!important;margin:0 auto!important;justify-content:center!important}
  html:not([data-nav-expanded="true"]) .app-nav .nav-footer .nav-label{display:none!important}
  html:not([data-nav-expanded="true"]) .app-nav .nav-section-title .nav-label,
  html:not([data-nav-expanded="true"]) .app-nav .nav-section-title .nav-chevron{display:none!important}
}

@media(max-width:1099px){
  html .app-nav{width:min(86vw,320px)!important;max-width:calc(100vw - 44px)!important}
  html .app-nav .nav-brand{padding-right:54px!important}
  html .app-nav .primary-nav{padding-top:8px!important}
  html .app-nav .nav-close{top:10px!important;right:10px!important;width:36px!important;height:36px!important;min-width:36px!important;min-height:36px!important;border:1px solid rgba(255,255,255,.10)!important;background:rgba(255,255,255,.04)!important;color:#fff!important}
}