/* comum.css — padrão visual do Compras ADV (servido em /api/ui/comum.css).
 * Mesmas cores, fonte e componentes do frontend Next.js do projeto (/dev): tema escuro, laranja ADV, Montserrat.
 * O menu lateral (.shell / .sidebar) é montado pelo auth.js. */
@import url("https://fonts.googleapis.com/css2?family=Montserrat:wght@400;500;600;700&display=swap");

:root {
  color-scheme: dark;
  --bg:#0f0f0f; --side:#000; --card:#181818; --card-2:#202020; --line:#2c2c2c;
  --txt:#ececec; --mut:#9b9b9b;
  --pri:#eb4e0f; --pri-hover:#fc5d01; --pri-soft:rgba(235,78,15,.14); --pri-txt:#fff;
  --ok:#47cd89; --ok-bg:#0f2a1c; --off:#f97066; --off-bg:#341611; --warn:#fdb022; --warn-bg:#2d2008;
}
* { box-sizing:border-box; }
[hidden] { display:none !important; }
body { margin:0; background:var(--bg); color:var(--txt); font:14px/1.45 Montserrat, system-ui, -apple-system, "Segoe UI", Roboto, sans-serif; }
a { color:inherit; }

/* ---------------------------------------------------------------- estrutura com menu lateral */
.shell { display:grid; grid-template-columns:230px 1fr; min-height:100vh; }
.sidebar { background:var(--side); border-right:1px solid var(--line); padding:20px 14px; display:flex; flex-direction:column; gap:6px;
           position:sticky; top:0; height:100vh; overflow:hidden; }
.topo-menu { display:flex; align-items:center; justify-content:space-between; gap:6px; }
.sidebar .logo { display:block; line-height:0; padding:0 6px; }
.sidebar .logo img { width:100%; max-width:160px; height:auto; }
.hamburguer { display:none; padding:3px 9px; font-size:16px; }
.sidebar .app-name { margin:14px 6px 18px; padding-left:10px; border-left:3px solid var(--pri); color:var(--mut); font-weight:600;
                     letter-spacing:.14em; text-transform:uppercase; font-size:12px; }
.sidebar nav { display:flex; flex-direction:column; gap:2px; flex:1 1; overflow-y:auto; }
.nav-secao { display:flex; flex-direction:column; gap:1px; margin-bottom:6px; }
.nav-secao-titulo { font-size:9.5px; letter-spacing:.12em; text-transform:uppercase; color:#6f6f6f; padding:4px 10px 2px; }
.nav-itens { display:flex; flex-direction:column; gap:1px; }
.sidebar nav a { display:flex; align-items:center; gap:8px; color:#cfcfcf; text-decoration:none; padding:8px 12px; border-radius:8px;
                 font-weight:500; border-left:3px solid transparent; }
.sidebar nav a:hover { background:var(--card); color:#fff; }
.sidebar nav a.active { background:var(--pri-soft); color:#fff; border-left-color:var(--pri); font-weight:700; }
.menu-usuario { display:flex; flex-direction:column; gap:6px; padding-top:10px; border-top:1px solid var(--line); }
.menu-usuario .quem { color:var(--mut); font-size:12px; text-decoration:none; padding:4px 6px; border-radius:6px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.menu-usuario a.quem:hover { color:#fff; background:var(--card); }
.menu-usuario a.quem.active { color:#fff; background:var(--pri-soft); }
.menu-usuario button { font-size:12px; padding:5px 10px; }

main { padding:28px 32px 56px; min-width:0; width:100%; }
.shell main { max-width:none; }
main > header, .page-head { display:flex; align-items:center; justify-content:space-between; gap:12px; flex-wrap:wrap; margin-bottom:18px; }

@media (max-width:820px) {
  .shell { display:block; }
  .sidebar { position:sticky; top:0; z-index:40; height:auto; padding:6px 12px; }
  .hamburguer { display:inline-block; }
  .sidebar .logo img { max-width:70px; }
  .sidebar:not([data-aberto]) .app-name, .sidebar:not([data-aberto]) nav, .sidebar:not([data-aberto]) .menu-usuario { display:none; }
  .sidebar .app-name { margin:8px 4px; }
  main { padding:20px 14px 40px; }
}

/* ---------------------------------------------------------------- componentes */
h1 { font-size:22px; font-weight:700; margin:0; }
h1::after { content:""; display:block; width:36px; height:3px; background:var(--pri); margin-top:8px; border-radius:2px; }
h2 { font-size:16px; margin:0 0 8px; }
.sub { color:var(--mut); font-size:13px; margin-top:6px; }
.card { background:var(--card); border:1px solid var(--line); border-radius:12px; }
.pad { padding:16px; }
.filters { display:flex; gap:8px; flex-wrap:wrap; padding:12px; margin-bottom:12px; align-items:center; }
.hint, .aviso { margin:0 0 12px; padding:10px 14px; background:var(--card); border:1px solid var(--line); border-left:3px solid var(--warn);
                border-radius:8px; color:var(--mut); font-size:13px; }
.hint { border-left-color:var(--pri); }
input, select, textarea { font:inherit; color:var(--txt); background:#0c0c0c; border:1px solid var(--line); border-radius:8px; padding:9px 11px; min-width:0; }
input::placeholder { color:#6d6d6d; }
input:focus, select:focus, textarea:focus { outline:2px solid var(--pri); outline-offset:-1px; border-color:var(--pri); }
input:disabled { opacity:.6; }
.filters input[type=search] { flex:1 1 240px; }
.btn, button { font:inherit; cursor:pointer; border:1px solid var(--line); background:var(--card-2); color:var(--txt); border-radius:8px; padding:8px 13px; text-decoration:none; }
.btn:hover, button:hover:not(:disabled) { border-color:var(--pri); }
button:disabled { opacity:.5; cursor:default; }
button.pri { background:var(--pri); color:var(--pri-txt); border-color:var(--pri); font-weight:600; }
button.pri:hover:not(:disabled) { background:var(--pri-hover); border-color:var(--pri-hover); }
button.danger { color:var(--off); }
.tbl-wrap { overflow-x:auto; }
table { width:100%; border-collapse:collapse; }
th, td { text-align:left; padding:11px 14px; border-bottom:1px solid var(--line); white-space:nowrap; vertical-align:top; }
td.wrap { white-space:normal; }
th { font-size:11px; font-weight:600; text-transform:uppercase; letter-spacing:.06em; color:var(--mut); }
th[data-sort] { cursor:pointer; user-select:none; }
th[data-sort]:hover { color:var(--pri); }
tbody tr:hover td { background:rgba(255,255,255,.025); }
tbody tr:last-child td { border-bottom:0; }
.badge { display:inline-block; padding:2px 9px; border-radius:999px; font-size:12px; font-weight:600; margin:1px 2px 1px 0;
         background:var(--card-2); border:1px solid var(--line); color:var(--mut); }
.badge.ok, .b-A, .b-ok { background:var(--ok-bg); color:var(--ok); border-color:transparent; }
.badge.off, .b-I, .b-off { background:var(--off-bg); color:var(--off); border-color:transparent; }
.badge.warn, .b-warn { background:var(--warn-bg); color:var(--warn); border-color:transparent; }
.b-neutro, .b-papel { font-weight:500; }
.actions { display:flex; gap:6px; justify-content:flex-end; flex-wrap:wrap; }
.actions .btn, .actions button { padding:4px 11px; font-size:13px; }
.empty { padding:36px; text-align:center; white-space:normal; color:var(--mut); }
.pager { display:flex; align-items:center; justify-content:space-between; gap:8px; padding:11px 14px; border-top:1px solid var(--line); flex-wrap:wrap; color:var(--mut); }
dialog { border:1px solid var(--line); border-radius:14px; background:var(--card); color:var(--txt); padding:0; width:min(580px, calc(100vw - 24px)); max-height:calc(100vh - 24px); }
dialog.largo { width:min(860px, calc(100vw - 24px)); }
dialog::backdrop { background:rgba(0,0,0,.7); }
form { padding:22px; display:grid; gap:12px; }
dialog form { max-height:90vh; overflow-y:auto; }
form h2 { margin:0 0 4px; font-size:18px; }
label { display:grid; gap:5px; font-size:13px; color:var(--mut); align-content:start; }
label input, label select, label textarea { color:var(--txt); }
.check { display:flex; align-items:center; gap:8px; color:var(--txt); font-size:14px; }
.check input { width:16px; height:16px; margin:0; accent-color:var(--pri); }
.err { color:var(--off); font-size:12px; }
.row2, .grid { display:grid; grid-template-columns:1fr 1fr; gap:12px; }
.foot { display:flex; gap:8px; justify-content:flex-end; margin-top:4px; flex-wrap:wrap; }
.copiar { display:flex; gap:8px; } .copiar input { flex:1; font-family:ui-monospace, Menlo, monospace; font-size:12px; }
#toast, .toast { position:fixed; right:18px; bottom:18px; max-width:min(420px, calc(100vw - 36px)); padding:12px 16px; border-radius:10px;
                 background:var(--card-2); color:var(--txt); border:1px solid var(--line); border-left:3px solid var(--ok); display:none; z-index:50; }
#toast.err, .toast.err { border-left-color:var(--off); }
@media (max-width:560px) { .row2, .grid { grid-template-columns:1fr; } }

/* ---------------------------------------------------------------- telas sem menu (login, definir senha) */
.tela-acesso { min-height:100vh; display:grid; place-items:center; padding:16px; background:var(--bg); }
.tela-acesso .card { width:min(400px, 100%); padding:30px 26px; }
.tela-acesso .logo { display:block; width:172px; height:auto; margin:0 auto 22px; }
.tela-acesso .app-name { text-align:center; color:var(--mut); font-weight:600; letter-spacing:.14em; text-transform:uppercase; font-size:12px; margin-bottom:22px; }
.tela-acesso form { padding:0; gap:14px; }
.tela-acesso button.pri { width:100%; padding:11px 13px; }
.tela-acesso .erro { display:none; background:var(--off-bg); color:var(--off); border-radius:8px; padding:10px 12px; font-size:13px; }
.tela-acesso .ok { background:var(--ok-bg); color:var(--ok); border-radius:8px; padding:12px; margin-top:16px; }
.tela-acesso .ok a { color:var(--ok); font-weight:600; }