/* ===================================================================
   CORDEN · shell compartilhado (tema dia/noite, rail, nav, campos)
   Toda tela do app linka este arquivo + corden.js
   =================================================================== */
@import url('https://fonts.googleapis.com/css2?family=Playfair+Display:ital,wght@0,400;0,500;0,600;0,700&family=Archivo:wght@400;500;600;700&display=swap');

/* ---------- TEMA ESCURO (padrão) ---------- */
:root, [data-theme="dark"]{
  --bg:#080C0D; --bg-glow:rgba(86,111,120,.14);
  --nav:#0F181F; --surface:#101A20; --surface-2:#16262A;
  --line:rgba(205,216,219,.12); --line2:rgba(205,216,219,.2);
  --txt:#EFEEE7; --txt2:#CDD8DB; --muted:#7C949B; --muted2:#566F78;
  --field-bg:#0B1318; --field-line:rgba(205,216,219,.15); --field-txt:#EFEEE7;
  --accent:#566F78; --accent-br:#A6B8BD; --accent-ink:#06121a;
  --ghost-line:rgba(205,216,219,.22); --ghost-txt:#CDD8DB;
  --tick-loc:#A6B8BD; --tick-det:#5FA6A6; --tick-cor:#88B98C;
  --tag-bg:rgba(205,216,219,.08);
  --extr-bg:linear-gradient(102deg, #17282C 0%, #0F181F 78%);
  --footer-bg:rgba(15,24,31,.92);
  --shadow:0 2px 14px rgba(0,0,0,.4);
  --logo-filter:brightness(0) invert(1);
  --disp:'Playfair Display', Georgia, serif;
}
/* ---------- TEMA CLARO ---------- */
[data-theme="light"]{
  --bg:#EFEFE7; --bg-glow:rgba(50,69,76,.05);
  --nav:#E8E8DE; --surface:#E9EAE1; --surface-2:#E3E4DA;
  --line:rgba(45,58,56,.12); --line2:rgba(45,58,56,.2);
  --txt:#20271F; --txt2:#3A433C; --muted:#717A6E; --muted2:#8A9085;
  --field-bg:#F4F4ED; --field-line:rgba(45,58,56,.16); --field-txt:#20271F;
  --accent:#32454C; --accent-br:#26343A; --accent-ink:#F1F1E9;
  --ghost-line:rgba(45,58,56,.2); --ghost-txt:#3A433C;
  --tick-loc:#5E7A82; --tick-det:#2F7E7E; --tick-cor:#5E8C5E;
  --tag-bg:rgba(45,58,56,.07);
  --extr-bg:linear-gradient(151deg, #D6D9D0 0%, #CDD1C8 50%, #C7CBC2 100%);
  --footer-bg:rgba(233,234,225,.94);
  --shadow:0 2px 10px rgba(45,58,56,.08);
  --logo-filter:brightness(0);
}

*{ margin:0; padding:0; box-sizing:border-box; }
html,body{ background:var(--bg); }
body{ font-family:'Archivo', system-ui, sans-serif; color:var(--txt); font-size:13px; -webkit-font-smoothing:antialiased; min-height:100vh;
  background-image:radial-gradient(120% 70% at 88% -8%, var(--bg-glow), transparent 56%); transition:background .25s, color .25s; }
svg.ic{ width:18px; height:18px; stroke:currentColor; stroke-width:1.7; fill:none; stroke-linecap:round; stroke-linejoin:round; }
svg.ic.sm{ width:15px; height:15px; }

.wrap{ display:flex; }

/* ---------- SIDEBAR (menu vertical com rótulos) ---------- */
.sidebar{ width:248px; flex:none; min-height:100vh; display:flex; flex-direction:column; padding:22px 16px; background:var(--nav); border-right:1px solid var(--line); position:sticky; top:0; }
.sb-logo{ display:flex; align-items:center; justify-content:center; padding:16px 10px 24px; margin-bottom:14px; border-bottom:1px solid var(--line); }
.sb-logo img{ height:22px; filter:var(--logo-filter); opacity:.95; }
.sb-nav{ display:flex; flex-direction:column; gap:3px; flex:1; }
.sb-item{ display:flex; align-items:center; gap:12px; padding:10px 12px; border-radius:11px; color:var(--txt2); text-decoration:none; font-size:13.5px; font-weight:500; transition:.15s; }
.sb-item svg{ width:18px; height:18px; flex:none; stroke:currentColor; stroke-width:1.7; fill:none; stroke-linecap:round; stroke-linejoin:round; }
.sb-item:hover{ background:var(--tag-bg); color:var(--txt); }
.sb-item.on{ background:var(--accent); color:var(--accent-ink); font-weight:600; }
.sb-item .badge{ margin-left:auto; min-width:18px; height:18px; padding:0 5px; border-radius:9px; background:color-mix(in srgb, var(--accent) 32%, var(--surface-2)); color:var(--txt); font-size:10px; font-weight:700; display:flex; align-items:center; justify-content:center; }
.sb-item.on .badge{ background:rgba(0,0,0,.18); color:var(--accent-ink); }
.sb-sep{ height:1px; background:var(--line); margin:14px 8px; }
.sb-bottom{ display:flex; flex-direction:column; gap:3px; }

.avatar{ width:34px; height:34px; border-radius:50%; background:var(--surface-2); border:1px solid var(--line2); display:flex; align-items:center; justify-content:center; font-size:12.5px; color:var(--txt2); font-weight:600; position:relative; flex:none; }
.avatar.online::after{ content:""; position:absolute; right:-1px; bottom:-1px; width:10px; height:10px; border-radius:50%; background:var(--tick-cor); border:2px solid var(--nav); }

.main{ flex:1; min-width:0; }

/* ---------- TOPBAR (busca + perfil) ---------- */
.topbar{ display:flex; align-items:center; gap:18px; padding:16px 30px; border-bottom:1px solid var(--line); }
.tb-search{ position:relative; flex:1; max-width:440px; }
.tb-search svg{ position:absolute; left:14px; top:50%; transform:translateY(-50%); width:16px; height:16px; stroke:var(--muted); stroke-width:1.7; fill:none; stroke-linecap:round; }
.tb-search input{ width:100%; background:var(--field-bg); border:1px solid var(--field-line); border-radius:11px; padding:11px 14px 11px 40px; font-size:13px; color:var(--field-txt); font-family:'Archivo',sans-serif; }
.tb-search input::placeholder{ color:var(--muted2); }
.tb-search input:focus{ outline:none; border-color:var(--accent-br); }
.tb-right{ margin-left:auto; display:flex; align-items:center; gap:16px; }
.tb-bell{ position:relative; color:var(--muted); display:flex; cursor:pointer; }
.tb-bell svg{ width:20px; height:20px; stroke:currentColor; stroke-width:1.7; fill:none; stroke-linecap:round; stroke-linejoin:round; }
.tb-bell .badge{ position:absolute; top:-4px; right:-4px; min-width:15px; height:15px; padding:0 3px; border-radius:8px; background:var(--accent); color:var(--accent-ink); font-size:9px; font-weight:700; display:flex; align-items:center; justify-content:center; border:2px solid var(--nav); }
.tb-user{ display:flex; align-items:center; gap:10px; padding-left:16px; border-left:1px solid var(--line); cursor:pointer; }
.tb-user .tb-id{ display:flex; flex-direction:column; line-height:1.25; }
.tb-user .tb-id b{ font-size:12.5px; color:var(--txt); font-weight:600; }
.tb-user .tb-id span{ font-size:10.5px; color:var(--muted); }
.toggle{ display:flex; align-items:center; gap:7px; background:var(--field-bg); border:1px solid var(--line); border-radius:20px; padding:6px 12px 6px 10px; cursor:pointer; color:var(--txt2); font-size:11.5px; font-weight:600; }
.toggle:hover{ border-color:var(--line2); }
.toggle svg{ width:15px; height:15px; stroke:currentColor; stroke-width:1.7; fill:none; stroke-linecap:round; stroke-linejoin:round; }

/* ---------- HEADER ---------- */
.head{ display:flex; justify-content:space-between; align-items:flex-end; }
.eyebrow{ font-size:10.5px; letter-spacing:.24em; text-transform:uppercase; color:var(--muted); font-weight:600; }
.head h1{ font-family:var(--disp); font-size:36px; font-weight:600; color:var(--txt); margin:9px 0 5px; letter-spacing:-.01em; line-height:1; }
.head .subt{ font-size:13px; color:var(--muted); }

/* ---------- BOTÕES ---------- */
.btn{ display:inline-flex; align-items:center; gap:8px; border-radius:10px; padding:10px 17px; font-size:13px; font-weight:600; font-family:'Archivo',sans-serif; cursor:pointer; border:1px solid transparent; transition:.15s; }
.btn.ghost{ background:transparent; border-color:var(--ghost-line); color:var(--ghost-txt); }
.btn.ghost:hover{ background:var(--tag-bg); }
.btn.primary{ background:var(--accent); color:var(--accent-ink); }
.btn.primary:hover{ filter:brightness(1.07); }

/* ---------- CARTÃO / MÓDULO ---------- */
.mod{ background:var(--surface); border:1px solid var(--line); border-radius:16px; padding:22px 24px; box-shadow:var(--shadow); }
.mh{ display:flex; align-items:center; gap:11px; }
.mod .mh{ margin-bottom:18px; padding-bottom:16px; border-bottom:1px solid var(--line); }
.mh .tick{ width:4px; height:19px; border-radius:3px; background:var(--accent-br); }
/* nuance sutil por janela — puxada do tick, pra não empastelar */
.mod.loc{ background:color-mix(in srgb, var(--tick-loc) 6%, var(--surface)); border-color:color-mix(in srgb, var(--tick-loc) 14%, var(--line)); }
.mod.det{ background:color-mix(in srgb, var(--tick-det) 7%, var(--surface)); border-color:color-mix(in srgb, var(--tick-det) 15%, var(--line)); }
.mod.cor{ background:color-mix(in srgb, var(--tick-cor) 6%, var(--surface)); border-color:color-mix(in srgb, var(--tick-cor) 14%, var(--line)); }
.mod.loc .tick{ background:var(--tick-loc); }
.mod.det .tick{ background:var(--tick-det); }
.mod.cor .tick{ background:var(--tick-cor); }
.mh h2{ font-family:var(--disp); font-size:20px; font-weight:600; color:var(--txt); }
.mh .mtag{ margin-left:auto; font-size:10px; letter-spacing:.13em; text-transform:uppercase; font-weight:700; color:var(--muted); background:var(--tag-bg); border:1px solid var(--line); padding:5px 10px; border-radius:7px; }

/* ---------- CAMPOS ---------- */
.fields{ display:flex; flex-direction:column; gap:14px; }
.frow{ display:grid; grid-template-columns:1fr 1fr; gap:14px; }
.f label{ display:block; font-size:11px; letter-spacing:.04em; color:var(--muted); margin-bottom:6px; font-weight:500; }
.f input, .f .sel select{ width:100%; background:var(--field-bg); border:1px solid var(--field-line); border-radius:9px; padding:11px 13px; font-size:13px; font-family:'Archivo',sans-serif; color:var(--field-txt); transition:.15s; }
.f input::placeholder{ color:var(--muted2); }
.f input:focus, .f .sel select:focus{ outline:none; border-color:var(--accent-br); box-shadow:0 0 0 3px color-mix(in srgb, var(--accent-br) 18%, transparent); }
[data-theme="light"] .f input:focus, [data-theme="light"] .f .sel select:focus{ border-color:var(--accent); }
.sel{ position:relative; }
.sel select{ appearance:none; cursor:pointer; padding-right:34px; }
.sel::after{ content:""; position:absolute; right:14px; top:50%; width:8px; height:8px; border-right:1.6px solid var(--muted); border-bottom:1.6px solid var(--muted); transform:translateY(-65%) rotate(45deg); pointer-events:none; }

/* ---------- TOOLBAR + TABELA + PILLS (reuso) ---------- */
.toolbar{ display:flex; align-items:center; gap:12px; margin-bottom:16px; }
.search{ position:relative; flex:1; max-width:380px; }
.search svg{ position:absolute; left:13px; top:50%; transform:translateY(-50%); width:15px; height:15px; stroke:var(--muted); stroke-width:1.7; fill:none; stroke-linecap:round; }
.search input{ width:100%; background:var(--field-bg); border:1px solid var(--field-line); border-radius:10px; padding:11px 13px 11px 36px; font-size:13px; color:var(--field-txt); font-family:'Archivo',sans-serif; }
.search input::placeholder{ color:var(--muted2); }
.search input:focus{ outline:none; border-color:var(--accent-br); }
.filters{ display:flex; gap:6px; margin-left:auto; }
.fchip{ padding:8px 13px; border-radius:9px; font-size:12px; font-weight:500; color:var(--txt2); background:var(--tag-bg); border:1px solid var(--line); cursor:pointer; }
.fchip.on{ background:var(--accent); color:var(--accent-ink); border-color:transparent; font-weight:600; }

.tbl{ background:var(--surface); border:1px solid var(--line); border-radius:16px; box-shadow:var(--shadow); overflow:hidden; }
table{ width:100%; border-collapse:collapse; }
thead th{ text-align:left; font-size:10px; letter-spacing:.13em; text-transform:uppercase; color:var(--muted); font-weight:700; padding:14px 18px; border-bottom:1px solid var(--line); }
th.r, td.r{ text-align:right; }
tbody td{ padding:15px 18px; font-size:13px; color:var(--txt2); border-bottom:1px solid var(--line); }
tbody tr:last-child td{ border-bottom:none; }
tbody tr{ cursor:pointer; transition:.12s; }
tbody tr:hover{ background:var(--tag-bg); }
.cod{ font-variant-numeric:tabular-nums; color:var(--muted); font-weight:600; }
.tname{ color:var(--txt); font-weight:600; }
.tsub{ font-size:11.5px; color:var(--muted); margin-top:2px; }
.num{ font-variant-numeric:tabular-nums; color:var(--txt); }
.ztag{ font-size:11px; color:var(--muted); font-variant-numeric:tabular-nums; }
.pill{ display:inline-flex; align-items:center; gap:6px; padding:5px 11px; border-radius:20px; font-size:11px; font-weight:600; border:1px solid transparent; }
.pill::before{ content:""; width:6px; height:6px; border-radius:50%; background:currentColor; }
.pill.novo{ color:var(--tick-loc); background:color-mix(in srgb, var(--tick-loc) 14%, transparent); }
.pill.dvtj{ color:var(--tick-det); background:color-mix(in srgb, var(--tick-det) 16%, transparent); }
.pill.estrut{ color:#C9A26B; background:color-mix(in srgb, #C9A26B 16%, transparent); }
.pill.parc{ color:var(--tick-cor); background:color-mix(in srgb, var(--tick-cor) 16%, transparent); }
.pill.arq{ color:var(--muted); background:var(--tag-bg); }
.pill.ativo{ color:var(--tick-cor); background:color-mix(in srgb, var(--tick-cor) 16%, transparent); }

/* ---------- FOOTER FIXO ---------- */
.footer{ position:fixed; left:248px; right:0; bottom:0; background:var(--footer-bg); backdrop-filter:blur(10px); border-top:1px solid var(--line); }
.footer .in{ padding:14px 34px; display:flex; align-items:center; justify-content:space-between; }
.footer .note{ font-size:12.5px; color:var(--muted); }
.footer .acts{ display:flex; gap:10px; }

/* =================== RESPONSIVO ===================
   Desktop: barra lateral fixa. Celular (<=860px): a barra vira gaveta
   acionada pelo botão no topo, e o conteúdo ocupa a tela inteira. */
.nav-toggle{ display:none; }
.nav-scrim{ display:none; }

@media (max-width:880px){ .frow{ grid-template-columns:1fr; } }

@media (max-width:860px){
  /* barra lateral vira gaveta deslizante */
  .sidebar{ position:fixed; top:0; left:0; bottom:0; height:100%; min-height:0; z-index:120;
    width:272px; max-width:84vw; transform:translateX(-100%);
    transition:transform .26s cubic-bezier(.4,0,.2,1); box-shadow:0 18px 50px rgba(0,0,0,.55); overflow-y:auto; }
  body.nav-open .sidebar{ transform:translateX(0); }
  .nav-scrim{ display:block; position:fixed; inset:0; z-index:110; background:rgba(0,0,0,.5);
    opacity:0; pointer-events:none; transition:opacity .26s; }
  body.nav-open .nav-scrim{ opacity:1; pointer-events:auto; }
  body.nav-open{ overflow:hidden; }

  /* botão de menu (hamburguer) no topo */
  .nav-toggle{ display:inline-flex; align-items:center; justify-content:center; width:40px; height:40px;
    flex:none; border-radius:11px; border:1px solid var(--line); background:var(--field-bg);
    color:var(--txt2); cursor:pointer; }
  .nav-toggle svg{ width:21px; height:21px; stroke:currentColor; stroke-width:1.8; fill:none; stroke-linecap:round; }

  /* conteúdo ocupa toda a largura */
  .main{ width:100%; }
  .topbar{ position:sticky; top:0; z-index:80; gap:11px; padding:10px 14px; background:var(--nav); }
  .tb-search{ display:none; }
  .tb-right{ gap:14px; }
  .tb-user{ padding-left:12px; }
  .tb-user .tb-id{ display:none; }
  .toggle span{ display:none; }
  .toggle{ padding:8px; border-radius:50%; }

  /* respiro menor e título proporcional; clipa balões de ajuda (hover) que vazariam no touch */
  .page{ padding:18px 15px 96px !important; overflow-x:clip; }
  .head{ flex-direction:column; align-items:flex-start; gap:14px; }
  .head h1{ font-size:27px; }
  .head .subt{ font-size:12.5px; }

  /* botões do cabeçalho fluem lado a lado e quebram em vez de empilhar 1 por linha */
  .head > button, .head > .btn{ flex:0 0 auto; }

  /* rodapé fixo acompanha a largura cheia */
  .footer{ left:0; }
  .footer .in{ padding:12px 15px; gap:10px; }

  /* tabelas largas rolam na horizontal em vez de cortar */
  .tbl{ overflow-x:auto; -webkit-overflow-scrolling:touch; }
  .tbl table{ min-width:520px; }

  /* grids de cartão genéricos: no máximo 2 colunas no celular */
  .mod{ padding:18px 17px; }
}

@media (max-width:520px){
  .head h1{ font-size:24px; }
  .tbl table{ min-width:480px; }
}