/* ============================================================================
   RDO - Smart · shell.css
   Chrome do escritório: sidebar creme atmosférica + cérebro animado + topbar +
   rail colapsável + componentes base. Adaptado do Smart-Planning Design System.
   Carregado DEPOIS de app.css → vence nas classes de shell.
   ============================================================================ */

/* aliases dos tokens do DS que o tokens.css nomeia com prefixo (--brand → --amber, etc.) */
:root { --amber: #E8A93C; --amber-2: #D4922A; --paper: #F4EFE6; --navy-2: #16273C; }

/* ===== layout ===== */
.app { display: flex; height: 100vh; overflow: hidden; }
body.devbar .app { height: calc(100vh - 44px); } /* barra DEV fixa embaixo: o app encolhe, o menu lateral não fica tampado */
.main { flex: 1; min-width: 0; height: 100%; display: flex; flex-direction: column; background: var(--bg); position: relative; }
.main::before { content: ''; position: absolute; inset: 0; pointer-events: none; opacity: .5; z-index: 0;
  background-image: linear-gradient(rgba(14,27,44,.025) 1px, transparent 1px), linear-gradient(90deg, rgba(14,27,44,.025) 1px, transparent 1px); background-size: 28px 28px; }

/* ===== topbar ===== */
.topbar { position: relative; z-index: 2; display: flex; align-items: center; gap: 16px; padding: 14px 26px; border-bottom: 1px solid var(--line);
  background: rgba(251,248,241,.75); backdrop-filter: blur(6px); flex-shrink: 0; }
.topbar .railtoggle { flex: 0 0 auto; width: 38px; height: 38px; border-radius: 9px; border: 1px solid var(--line-2); background: var(--card); color: var(--ink-2); cursor: pointer; display: inline-flex; align-items: center; justify-content: center; }
.topbar .railtoggle:hover { background: var(--card-2); color: var(--ink); }
.topbar .tb-title h2 { font-family: var(--sans); font-size: 17px; font-weight: 600; margin: 0; letter-spacing: -.01em; color: var(--ink); }
.topbar .tb-title .bc { font-family: var(--mono); font-size: 10px; letter-spacing: .1em; text-transform: uppercase; color: var(--ink-3); margin-top: 3px; }
.topbar .tb-actions { margin-left: auto; display: flex; align-items: center; gap: 10px; }
.scroll { position: relative; z-index: 1; flex: 1; overflow-y: auto; padding: 22px 26px 40px; }

/* ===== seletor de semana + dia (global) ===== */
.weekbar { position: relative; z-index: 2; display: flex; align-items: center; gap: 16px; padding: 11px 26px; border-bottom: 1px solid var(--line); background: var(--card); flex-wrap: wrap; }
.weekbar .wk-nav { display: flex; align-items: center; gap: 8px; flex: 0 0 auto; }
.weekbar .wk-arrow { width: 32px; height: 32px; border-radius: 8px; border: 1px solid var(--line-2); background: var(--card); color: var(--ink-2); cursor: pointer; display: inline-flex; align-items: center; justify-content: center; }
.weekbar .wk-arrow:hover { background: var(--card-2); color: var(--ink); }
.weekbar .wk-lbl { min-width: 118px; text-align: center; line-height: 1.15; }
.weekbar .wk-lbl b { display: block; font: 700 14px var(--sans); color: var(--ink); }
.weekbar .wk-lbl span { display: block; font: 500 11px var(--mono); color: var(--ink-3); }
.weekbar .wk-days { display: flex; gap: 6px; flex-wrap: wrap; }
.weekbar .wk-chip { display: inline-flex; flex-direction: column; align-items: center; gap: 1px; min-width: 46px; padding: 5px 8px; border: 1px solid var(--line-2); border-radius: 9px; background: var(--card); cursor: pointer; transition: .12s; }
.weekbar .wk-chip:hover { background: var(--card-2); }
.weekbar .wk-chip .wk-dn { font: 600 10px var(--sans); text-transform: uppercase; letter-spacing: .04em; color: var(--ink-3); }
.weekbar .wk-chip .wk-dd { font: 700 15px var(--mono); color: var(--ink); }
.weekbar .wk-chip.hoje { border-color: var(--brand); }
.weekbar .wk-chip.hoje .wk-dd { color: var(--brand-ink, var(--brand)); }
.weekbar .wk-chip.on { background: var(--navy); border-color: var(--navy); }
.weekbar .wk-chip.on .wk-dn, .weekbar .wk-chip.on .wk-dd { color: var(--on-navy); }

/* ===== sidebar ===== */
.sb { width: 240px; flex-shrink: 0; height: 100%; display: flex; flex-direction: column; padding: 16px 14px; position: relative; isolation: isolate; overflow: hidden;
  --bd: #E8E0D0; background: linear-gradient(180deg,#FCFAF4 0%, #F4EFE6 60%, #EFE8DA 100%); border-right: 1px solid #E2DACB; transition: width .18s ease; }
.sb .bgfx { position: absolute; inset: 0; z-index: -1; overflow: hidden; }
.sb .bgfx .grid { position: absolute; inset: 0; background-image: linear-gradient(rgba(14,27,44,.05) 1px, transparent 1px), linear-gradient(90deg, rgba(14,27,44,.05) 1px, transparent 1px); background-size: 26px 26px;
  mask-image: radial-gradient(ellipse 100% 70% at 50% 40%, black 50%, transparent 100%); -webkit-mask-image: radial-gradient(ellipse 100% 70% at 50% 40%, black 50%, transparent 100%); }
.sb .bgfx .atmo { position: absolute; inset: 0; width: 100%; height: 100%; opacity: .5;
  mask-image: linear-gradient(180deg, transparent 0, black 9%, black 90%, transparent 100%); -webkit-mask-image: linear-gradient(180deg, transparent 0, black 9%, black 90%, transparent 100%); }
.sb .bgfx .veil { position: absolute; inset: 0; background: linear-gradient(180deg, rgba(252,250,244,.34) 0%, rgba(244,239,230,.46) 100%); }
.sb .bgfx .glow { position: absolute; width: 280px; height: 280px; border-radius: 50%; filter: blur(54px); }
.sb .bgfx .glow.a { top: -70px; left: -50px; background: radial-gradient(circle, rgba(232,169,60,.28), transparent 70%); }
.sb .bgfx .glow.b { bottom: 120px; right: -90px; background: radial-gradient(circle, rgba(14,27,44,.06), transparent 70%); }

.sb .brand { display: flex; align-items: center; gap: 11px; padding: 4px 6px 15px; margin-bottom: 8px; border-bottom: 1px solid var(--bd); }
.sb .brand .tile { width: 42px; height: 42px; border-radius: 11px; padding: 6px; flex-shrink: 0;
  background: linear-gradient(160deg,#FFFFFF,#F4EFE6); border: 1px solid var(--line); box-shadow: 0 0 0 1px rgba(232,169,60,.10), 0 6px 16px -8px rgba(14,27,44,.30); }
.sb .brand .tx { line-height: 1.16; min-width: 0; white-space: nowrap; }
.sb .brand .t1 { font-size: 14.5px; font-weight: 700; letter-spacing: -.01em; color: var(--navy); }
.sb .brand .t1 b { color: var(--amber-2); font-weight: 700; }
.sb .brand .t2 { font-family: var(--mono); font-size: 9px; margin-top: 2px; color: var(--ink-3); }

.sb .sec { font-family: var(--mono); font-size: 8.5px; letter-spacing: .18em; text-transform: uppercase; padding: 13px 8px 6px; color: #A99F89; white-space: nowrap; }
.sb .nav { display: flex; flex-direction: column; gap: 3px; }
.sb .ni { position: relative; display: flex; align-items: center; gap: 12px; padding: 9px 12px; border-radius: 10px; border: 0; background: transparent; cursor: pointer;
  font-family: var(--sans); font-size: 13.5px; font-weight: 500; text-align: left; width: 100%; color: var(--ink-2); transition: .15s; }
.sb .ni svg, .sb .ni .ico { width: 19px; height: 19px; flex-shrink: 0; color: var(--ink-3); }
.sb .ni .lab { flex: 1; white-space: nowrap; overflow: hidden; }
.sb .ni:hover { background: rgba(14,27,44,.05); color: var(--ink); }
.sb .ni:hover .ico { color: var(--ink-2); }
.sb .ni.on { background: var(--amber); color: #0E1B2C; font-weight: 700; box-shadow: 0 4px 14px -4px rgba(232,169,60,.6); }
.sb .ni.on .ico { color: #0E1B2C; }
.sb .ni.on::before { content: ''; position: absolute; left: -14px; top: 50%; transform: translateY(-50%); width: 3px; height: 21px; border-radius: 2px; background: var(--amber); }
.sb .ni .nibadge { margin-left: auto; background: var(--danger); color: #fff; font: 700 10px var(--mono); padding: 1px 7px; border-radius: 20px; }

.sb .foot { margin-top: auto; padding-top: 12px; border-top: 1px solid var(--bd); display: flex; flex-direction: column; gap: 2px; }
.sb .foot .ni { font-size: 12.5px; padding: 8px 12px; color: var(--ink-3); }
.sb .uchip { display: flex; align-items: center; gap: 10px; padding: 10px 8px 2px; margin-top: 5px; }
.sb .uchip .av { width: 32px; height: 32px; border-radius: 50%; background: var(--amber); color: #0E1B2C; display: flex; align-items: center; justify-content: center; font-family: var(--mono); font-weight: 700; font-size: 11.5px; flex-shrink: 0; }
.sb .uchip .utx { min-width: 0; white-space: nowrap; overflow: hidden; }
.sb .uchip .un { font-size: 12px; font-weight: 600; color: var(--ink); overflow: hidden; text-overflow: ellipsis; }
.sb .uchip .ur { font-family: var(--mono); font-size: 9px; margin-top: 1px; color: var(--ink-3); }

/* ===== rail (colapsado) ===== */
.app.rail .sb { width: 66px; padding: 16px 8px; }
.app.rail .sb .brand { justify-content: center; padding: 4px 0 15px; }
.app.rail .sb .brand .tx,
.app.rail .sb .sec,
.app.rail .sb .ni .lab,
.app.rail .sb .ni .nibadge,
.app.rail .sb .uchip .utx { display: none; }
.app.rail .sb .ni { justify-content: center; padding: 10px; }
.app.rail .sb .ni.on::before { display: none; }
.app.rail .sb .uchip { justify-content: center; padding: 10px 0 2px; }
/* pontinho de pendência quando colapsado */
.app.rail .sb .ni.has-badge::after { content: ''; position: absolute; top: 6px; right: 8px; width: 7px; height: 7px; border-radius: 50%; background: var(--danger); }
/* seta do "recolher" aponta pro outro lado quando colapsado */
.app.rail #btnCollapse .ico { transform: rotate(180deg); }

/* ===== cérebro animado (símbolo canônico) ===== */
.brain .tp { stroke-dasharray: 100; }
.brain .nd { transform-box: fill-box; transform-origin: center; }
.brain .ndring { transform-box: fill-box; transform-origin: center; opacity: 0; }
@media (prefers-reduced-motion: no-preference) {
  .brain .tp { animation: sp-trace 4.2s ease-in-out infinite; }
  .brain .nd { animation: sp-pop 4.2s ease-in-out infinite; }
  .brain .ndring { animation: sp-ring 4.2s ease-in-out infinite; }
  .brain .split { animation: sp-split 3s ease-in-out infinite; }
}
@media (prefers-reduced-motion: reduce) {
  .brain .tp { stroke-dashoffset: 0; }
  .brain .nd { transform: scale(1); }
  .brain .ndring { display: none; }
}
@keyframes sp-trace { 0% { stroke-dashoffset: 100; } 42% { stroke-dashoffset: 0; } 56% { stroke-dashoffset: 0; } 100% { stroke-dashoffset: -100; } }
@keyframes sp-pop { 0%,40% { transform: scale(0); opacity: 0; } 50% { transform: scale(1.4); opacity: 1; } 58% { transform: scale(1); opacity: 1; } 72% { transform: scale(1); opacity: 1; } 82%,100% { transform: scale(0); opacity: 0; } }
@keyframes sp-ring { 0%,46% { transform: scale(0); opacity: 0; } 54% { opacity: .5; } 74% { transform: scale(2.4); opacity: 0; } 100% { transform: scale(2.4); opacity: 0; } }
@keyframes sp-split { 0%,100% { opacity: .4; } 50% { opacity: .95; } }

/* ===== componentes base do DS ===== */
.btn { display: inline-flex; align-items: center; gap: 7px; font-family: var(--sans); font-size: 13px; font-weight: 600; border-radius: 9px; padding: 9px 14px; cursor: pointer; border: 1px solid transparent; white-space: nowrap; background: var(--card); color: var(--ink); border-color: var(--line-2); }
.btn:hover { background: var(--card-2); }
.btn svg, .btn .ico { width: 15px; height: 15px; }
.btn-primary { background: var(--amber); color: #0E1B2C; border-color: transparent; box-shadow: 0 1px 0 rgba(14,27,44,.04); }
.btn-primary:hover { background: var(--amber-2); }
.btn-primary.ok { background: var(--ok); color: #fff; }
.btn-navy { background: var(--navy-2); color: var(--paper); border-color: transparent; }
.btn-sm { padding: 7px 11px; font-size: 12px; }

/* segmented (Dia|Período, visões, etc.) */
.seg { display: inline-flex; background: var(--card-2); border: 1px solid var(--line); border-radius: 10px; padding: 3px; gap: 2px; }
.seg button { font-family: var(--sans); font-size: 12.5px; font-weight: 600; color: var(--ink-2); background: transparent; border: 0; border-radius: 7px; padding: 7px 14px; cursor: pointer; display: inline-flex; align-items: center; gap: 7px; }
.seg button .n { font-family: var(--mono); font-size: 10px; color: var(--ink-3); }
.seg button.on { background: var(--card); color: var(--ink); box-shadow: var(--shadow); }
.seg button.on .n { color: var(--amber-2); }

/* chip de filtro (com ícone/contador) */
.chip { display: inline-flex; align-items: center; gap: 6px; font-family: var(--sans); font-size: 12.5px; font-weight: 600; letter-spacing: .01em; color: var(--ink-2); background: var(--card); border: 1px solid var(--line-2); border-radius: 999px; padding: 6px 12px; cursor: pointer; white-space: nowrap; }
.chip:hover { background: var(--card-2); }
.chip .cnt { font-family: var(--mono); font-size: 11px; opacity: .7; }
.chip.on { background: var(--navy); color: var(--paper); border-color: var(--navy); }
.chip.on .cnt { color: var(--amber); opacity: 1; }
.chip.danger { color: var(--danger); border-color: #e6bfb3; }
.chip.danger.on { background: var(--danger); color: #fff; border-color: var(--danger); }
.chip.warn { color: #8a5a1a; border-color: #eccfa0; }
.chip.warn.on { background: var(--warn); color: #fff; border-color: var(--warn); }
.chip.ok { color: var(--ok); border-color: #b8ddcb; }
.chip.ok.on { background: var(--ok); color: #fff; border-color: var(--ok); }

/* busca */
.field-search { display: inline-flex; align-items: center; gap: 8px; background: var(--card); border: 1px solid var(--line-2); border-radius: 9px; padding: 8px 12px; color: var(--ink-3); }
.field-search input { border: 0; outline: 0; background: transparent; font-family: var(--sans); font-size: 13px; color: var(--ink); width: 100%; min-width: 120px; }

/* barra de ação sticky (seleção / edições pendentes) */
.actionbar { position: sticky; top: 0; z-index: 5; display: flex; align-items: center; gap: 12px; flex-wrap: wrap; background: var(--navy); color: var(--paper); padding: 10px 14px; border-radius: 10px; margin-bottom: 12px; box-shadow: var(--shadow-lg); }
.actionbar b { font-size: 13.5px; }
.actionbar .btn-ghost-navy { background: transparent; color: #fff; border: 1px solid rgba(244,239,230,.4); border-radius: 8px; padding: 6px 12px; font: 600 12.5px var(--sans); cursor: pointer; }

.pill { font-family: var(--mono); font-size: 9px; font-weight: 700; letter-spacing: .06em; padding: 5px 9px; border-radius: 6px; white-space: nowrap; display: inline-block; }
.pill.live { background: var(--brand-soft); color: #9A6B1E; }
.pill.hist, .pill.ok { background: var(--ok-bg); color: var(--ok); }
.pill.warn { background: var(--warn-bg); color: var(--warn); }
.pill.danger { background: var(--danger-bg); color: var(--danger); }
.pill.neutral { background: var(--neutral-bg); color: var(--neutral); }