/* ============================================================================
   Moldura no padrão da Intranet (layout novo): menu lateral recolhível, topo em vidro,
   busca Ctrl+K, tema claro/escuro/auto. Compartilhada pelo GED e pelo OBRAS.
   Base: /var/www/html/client/src/styles-new.css (React), portada para PHP + JS puro.
   ============================================================================ */
.kbd { font-size: 11px; padding: 2px 6px; border-radius: 6px; border: 1px solid var(--border); color: var(--text-muted); background: var(--surface); font-family: inherit; }
.ico { flex: none; }

/* Estrutura: menu lateral + área principal */
.nl { min-height: 100vh; display: grid; grid-template-columns: 252px 1fr; background: var(--bg); color: var(--text); transition: grid-template-columns 0.2s; }
.nl.collapsed { grid-template-columns: 74px 1fr; }
.nl-main { min-width: 0; display: flex; flex-direction: column; }
.sb { position: sticky; top: 0; height: 100vh; display: flex; flex-direction: column; gap: 4px; padding: 16px 12px; overflow-y: auto; z-index: 80;
  background: linear-gradient(180deg, var(--navy), #06303a 60%, #04252d); color: #cfe6ea; }
.sb-brand { display: flex; align-items: center; gap: 11px; padding: 4px 8px 16px; color: #fff; text-decoration: none; }
.sb-brand .brand-logo { border-radius: 10px; flex: none; width: 36px; height: 36px; }
.sb-brand-text { display: flex; flex-direction: column; line-height: 1.15; min-width: 0; }
.sb-brand-text b { font-size: 15px; white-space: nowrap; letter-spacing: 0.02em; }
.sb-brand-text small { font-size: 11px; color: #8fc3cf; white-space: nowrap; }
.sb-nav { flex: 1; display: flex; flex-direction: column; gap: 2px; }
.sb-section { font-size: 10.5px; letter-spacing: 0.12em; text-transform: uppercase; color: #6fa3b0; margin: 14px 10px 4px; font-weight: 700; white-space: nowrap; }
.sb-row { display: flex; align-items: center; }
.sb-link { flex: 1; min-width: 0; display: flex; align-items: center; gap: 12px; padding: 10px 12px; border-radius: 11px; color: #cfe6ea; text-decoration: none; font-size: 14px; font-weight: 600; position: relative; transition: 0.15s; }
.sb-link:hover { background: rgba(255, 255, 255, 0.08); color: #fff; }
.sb-link.on { background: rgba(26, 150, 178, 0.3); color: #fff; }
.sb-link.on::before { content: ''; position: absolute; left: -12px; top: 9px; bottom: 9px; width: 4px; border-radius: 0 4px 4px 0; background: var(--amber); }
.sb-label { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.sb-count { margin-left: auto; min-width: 20px; height: 20px; padding: 0 6px; border-radius: 999px; background: var(--amber); color: #3a2a00; font-size: 11px; font-weight: 800; display: inline-grid; place-items: center; }
.sb-chev { width: 28px; height: 28px; display: grid; place-items: center; border: 0; background: none; color: #8fc3cf; border-radius: 8px; cursor: pointer; transition: 0.15s; }
.sb-chev:hover { background: rgba(255, 255, 255, 0.1); color: #fff; }
.sb-chev[aria-expanded='true'] { transform: rotate(90deg); }
.sb-sub { margin: 2px 0 6px 22px; padding-left: 10px; border-left: 1px solid rgba(255, 255, 255, 0.14); display: flex; flex-direction: column; gap: 1px; }
.sb-sub[hidden] { display: none; }
.sb-sublink { padding: 7px 10px; border-radius: 8px; font-size: 13px; color: #b5d3da; text-decoration: none; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.sb-sublink:hover { background: rgba(255, 255, 255, 0.07); color: #fff; }
.sb-sublink.on { color: #fff; background: rgba(255, 255, 255, 0.1); font-weight: 700; }
.sb-collapse { display: flex; align-items: center; gap: 12px; padding: 10px 12px; border: 0; border-radius: 11px; background: rgba(255, 255, 255, 0.06); color: #9fc6cf; font: inherit; font-size: 13px; font-weight: 600; cursor: pointer; margin-top: 8px; }
.sb-collapse:hover { background: rgba(255, 255, 255, 0.12); color: #fff; }
.nl.collapsed .sb-brand-text, .nl.collapsed .sb-label, .nl.collapsed .sb-section, .nl.collapsed .sb-chev, .nl.collapsed .sb-sub, .nl.collapsed .sb-count { display: none; }
.nl.collapsed .sb-link { justify-content: center; padding: 11px 0; }
.nl.collapsed .sb-brand { justify-content: center; padding: 4px 0 16px; }
.nl.collapsed .sb-collapse { justify-content: center; }
.nl.collapsed .sb-collapse svg { transform: scaleX(-1); }

/* Topo em vidro */
.nl-bar { position: sticky; top: 0; z-index: 60; display: flex; align-items: center; gap: 14px; padding: 12px 26px;
  background: color-mix(in srgb, var(--bg) 78%, transparent); backdrop-filter: blur(14px); border-bottom: 1px solid color-mix(in srgb, var(--border) 70%, transparent); }
.nl-search { flex: 1; max-width: 520px; display: flex; align-items: center; gap: 10px; padding: 10px 15px; border-radius: 14px; background: var(--surface); color: var(--text-muted);
  font: inherit; font-size: 14px; border: 1px solid var(--border); cursor: pointer; text-align: left; box-shadow: var(--shadow-soft); }
.nl-search:hover { border-color: var(--primary); }
.nl-search span:nth-child(2) { flex: 1; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.nl-right { display: flex; align-items: center; gap: 8px; margin-left: auto; }
.nl-icon, .nl-me { width: 38px; height: 38px; border-radius: 11px; display: grid; place-items: center; background: transparent; border: 1px solid var(--border); color: var(--text); cursor: pointer; transition: 0.15s; }
.nl-icon:hover { background: var(--surface-tint); }
.nl-me { padding: 0; border: 0; border-radius: 50%; width: auto; height: auto; background: none; }
.nl-avatar { border-radius: 50%; display: inline-grid; place-items: center; font-weight: 800; color: #fff; background: linear-gradient(135deg, var(--primary), var(--amber)); }
.nl-pop { position: relative; }
.nl-menu { position: absolute; right: 0; top: calc(100% + 8px); min-width: 260px; background: var(--surface); border: 1px solid var(--border); border-radius: 16px; padding: 8px;
  box-shadow: var(--shadow-soft); z-index: 70; }
.nl-menu[hidden] { display: none; }
.nl-menu form { margin: 0; }
.nl-menu-title { font-size: 10.5px; text-transform: uppercase; letter-spacing: 0.1em; color: var(--text-muted); padding: 10px 10px 4px; font-weight: 700; }
.nl-menu-row { display: flex; align-items: center; gap: 10px; width: 100%; padding: 9px 10px; border-radius: 10px; font: inherit; font-size: 14px; color: var(--text); text-decoration: none; background: none; border: 0; cursor: pointer; text-align: left; }
.nl-menu-row:hover { background: var(--surface-tint); }
.nl-menu-row.danger { color: var(--danger); }
.nl-me-head { display: flex; align-items: center; gap: 12px; padding: 8px 10px 10px; }
.nl-me-head b { display: block; }
.nl-me-head small { display: block; color: var(--text-muted); font-size: 12px; }
.nl-theme-seg { display: flex; gap: 3px; padding: 3px; margin: 2px 4px 6px; background: var(--surface-tint); border-radius: 11px; }
.nl-theme-seg button { flex: 1; display: inline-flex; align-items: center; justify-content: center; gap: 5px; padding: 7px 4px; border: 0; border-radius: 9px; background: none; color: var(--text-muted); font: inherit; font-size: 12.5px; font-weight: 700; cursor: pointer; }
.nl-theme-seg button[aria-checked='true'] { background: var(--surface); color: var(--text); box-shadow: var(--shadow-soft); }
.nl-burger { display: none; }
.nl-content { flex: 1; width: 100%; }
.nl-content > .content { max-width: 1180px; margin: 0 auto; padding: 22px 26px 40px; }
.nl-foot { text-align: center; padding: 18px; font-size: 12px; color: var(--text-muted); border-top: 1px solid var(--border); }
.sb-scrim { display: none; }

/* Paleta de comandos (Ctrl+K) */
.cmdk-overlay { position: fixed; inset: 0; background: rgba(4, 25, 31, 0.55); backdrop-filter: blur(3px); z-index: 200; display: flex; justify-content: center; align-items: flex-start; padding: 12vh 16px 0; }
.cmdk-overlay[hidden] { display: none; }
.cmdk { width: min(620px, 100%); background: var(--surface); border: 1px solid var(--border); border-radius: 20px; box-shadow: 0 30px 80px rgba(0, 0, 0, 0.4); overflow: hidden; }
.cmdk-input { display: flex; align-items: center; gap: 12px; padding: 16px 18px; border-bottom: 1px solid var(--border); color: var(--text-muted); }
.cmdk-input input { flex: 1; border: 0; outline: 0; background: transparent; font: inherit; font-size: 16px; color: var(--text); padding: 0; box-shadow: none; }
.cmdk-input input:focus { box-shadow: none; }
.cmdk-list { max-height: 50vh; overflow: auto; padding: 4px 8px 8px; }
.cmdk-group { font-size: 10.5px; text-transform: uppercase; letter-spacing: 0.1em; color: var(--text-muted); padding: 10px 10px 4px; font-weight: 700; }
.cmdk-row { display: flex; align-items: center; gap: 12px; width: 100%; padding: 10px; border: 0; border-radius: 10px; background: none; color: var(--text); font: inherit; font-size: 14px; text-align: left; cursor: pointer; text-decoration: none; }
.cmdk-row.on { background: color-mix(in srgb, var(--primary) 16%, transparent); }
.cmdk-label { flex: 1; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.cmdk-hint { color: var(--text-muted); font-size: 12px; white-space: nowrap; max-width: 40%; overflow: hidden; text-overflow: ellipsis; }
.cmdk-empty { padding: 26px; text-align: center; color: var(--text-muted); }
.cmdk-foot { display: flex; gap: 16px; padding: 10px 16px; border-top: 1px solid var(--border); color: var(--text-muted); font-size: 12px; }

/* Login (vidro + gradiente com âmbar, como a Intranet) */
.login-card { background: color-mix(in srgb, var(--surface) 86%, transparent); backdrop-filter: blur(16px); border: 1px solid color-mix(in srgb, var(--border) 70%, #fff); border-radius: 24px; padding: 2.4rem 2.2rem; }
.login-card h1 { letter-spacing: -0.4px; }
.login-card input { background: var(--surface); color: var(--text); border-radius: 12px; }
.login-screen::before { background: radial-gradient(800px 420px at 85% -10%, rgba(255, 173, 0, 0.32), transparent 60%), linear-gradient(135deg, rgba(8, 57, 68, 0.86) 0%, rgba(26, 150, 178, 0.62) 100%); }
:root[data-theme='dark'] .login-screen::before { background: radial-gradient(800px 420px at 85% -10%, rgba(255, 173, 0, 0.22), transparent 60%), linear-gradient(135deg, rgba(4, 25, 31, 0.92) 0%, rgba(10, 74, 90, 0.72) 100%); }
.login-theme { position: absolute; top: 18px; right: 18px; z-index: 2; width: 40px; height: 40px; border-radius: 12px; border: 1px solid rgba(255, 255, 255, 0.35); background: rgba(255, 255, 255, 0.14); color: #fff; display: grid; place-items: center; cursor: pointer; backdrop-filter: blur(8px); }
:root[data-theme='dark'] img.login-logo { filter: brightness(0) invert(1) !important; opacity: 0.92; }

@media (max-width: 900px) {
  .nl, .nl.collapsed { grid-template-columns: 1fr; }
  .sb { position: fixed; left: 0; top: 0; bottom: 0; width: 280px; transform: translateX(-100%); transition: transform 0.22s; box-shadow: 10px 0 40px rgba(0, 0, 0, 0.4); }
  .nl.collapsed .sb-brand-text, .nl.collapsed .sb-label, .nl.collapsed .sb-section, .nl.collapsed .sb-chev, .nl.collapsed .sb-count { display: revert; }
  .nl.collapsed .sb-link { justify-content: flex-start; padding: 10px 12px; }
  .nl.drawer-open .sb { transform: none; }
  .nl.drawer-open .sb-scrim { display: block; position: fixed; inset: 0; background: rgba(4, 25, 31, 0.55); z-index: 70; }
  .sb-collapse { display: none; }
  .nl-burger { display: grid; }
  .nl-bar { padding: 10px 14px; }
  .nl-search .kbd { display: none; }
  .nl-content > .content { padding: 16px 14px 30px; }
}
svg.ico[hidden] { display: none; }

/* Tema escuro: textos que usam o "navy" da marca (quase preto no escuro) passam a usar --text.
   (Lista dos seletores com color: var(--navy) em styles.css, raff.css e obras.css.) */
:root[data-theme='dark'] :is(.brand-name, .page h1, .card h3, .search-result-title, .field-label, .af-field > span, .sheet-heading,
  .login-brand h1, .section-title, .quota-summary .quota-summary-title, .doc-meta h3, .stat, .home-section-title, .dl-label, .callout .t,
  .stat-tile .stat-num, .account-head h1, .sys-card h3, .mural-head h3, .uc-step, .xp-balloon h1,
  .field label, legend, .two-cols h4, .sec-head h2, .cl-bloco h3, .chip, tr.cl-titulo td) { color: var(--text); }