/* Console v2 — shared tokens and chrome for the iAE proxy (portal + /dados).
   Light first; [data-theme="dark"] on <html> switches the palette. */

:root {
  --f-sans: "Manrope", ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif;
  --f-mono: "IBM Plex Mono", ui-monospace, "SF Mono", Menlo, Consolas, monospace;

  --paper: #FAFAF9;
  --paper-2: #F2F2F0;
  --card: #FFFFFF;
  --line: #E4E4E1;
  --line-strong: #CDCDC8;
  --ink: #111114;
  --ink-2: #4A4A52;
  --ink-3: #6B6B74;

  --accent: #2E44C4;
  --accent-hover: #24379F;
  --on-accent: #FFFFFF;
  --accent-text: #2E44C4;
  --accent-wash: #EEF0FB;

  --ok: #18794E;   --ok-wash: #E7F2EC;
  --warn: #8A5A00; --warn-wash: #F6EEDC;
  --err: #C2312F;  --err-wash: #FAEAE9;

  --float: 0 1px 2px rgba(17, 17, 20, 0.05), 0 12px 32px rgba(17, 17, 20, 0.10);
  --scrim: rgba(17, 17, 20, 0.28);

  --sp-1: 4px; --sp-2: 8px; --sp-3: 12px; --sp-4: 16px; --sp-5: 24px; --sp-6: 32px; --sp-7: 48px;
  --r-xs: 4px; --r-ctl: 8px; --r-card: 12px; --r-panel: 14px; --r-pill: 999px;
  --ease: cubic-bezier(0.2, 0.7, 0.2, 1);
  --dur: 150ms;

  --ctl-h: 36px; --ctl-h-sm: 30px; --row-h: 44px; --pad-x: 12px; --fs: 14px; --gap: 12px;
  color-scheme: light;
}
[data-theme="dark"] {
  --paper: #0E0E11;
  --paper-2: #141418;
  --card: #17171B;
  --line: #26262C;
  --line-strong: #383840;
  --ink: #F3F3F1;
  --ink-2: #B4B4BC;
  --ink-3: #8C8C96;

  --accent: #4A5FDE;
  --accent-hover: #5B6FE8;
  --on-accent: #FFFFFF;
  --accent-text: #9AA8F5;
  --accent-wash: #1A1E38;

  --ok: #4FC28A;   --ok-wash: #12251B;
  --warn: #E0B45A; --warn-wash: #2A2313;
  --err: #F0787A;  --err-wash: #2C1718;

  --float: 0 1px 2px rgba(0, 0, 0, 0.35), 0 16px 40px rgba(0, 0, 0, 0.45);
  --scrim: rgba(0, 0, 0, 0.55);
  color-scheme: dark;
}
[data-density="compact"] { --ctl-h: 30px; --ctl-h-sm: 26px; --row-h: 34px; --pad-x: 10px; --fs: 13px; --gap: 8px; }

@media screen {
  /* ---------- shared primitives ---------- */
  .cx-kbd, kbd.cx-kbd {
    font-family: var(--f-mono); font-size: 11px; line-height: 1; font-weight: 500;
    min-width: 18px; height: 18px; padding: 0 5px;
    display: inline-flex; align-items: center; justify-content: center;
    border-radius: var(--r-xs); border: 1px solid var(--line-strong);
    background: var(--paper-2); color: var(--ink-3); box-shadow: none;
  }
  .cx-i { width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; flex: none; display: block; }

  .cx-btn {
    display: inline-flex; align-items: center; justify-content: center; gap: 8px;
    height: var(--ctl-h); min-height: 0; padding: 0 var(--pad-x);
    border-radius: var(--r-ctl); border: 1px solid var(--line-strong);
    background: var(--card); color: var(--ink-2);
    font-family: var(--f-sans); font-size: var(--fs); font-weight: 600; letter-spacing: -0.005em;
    cursor: pointer; white-space: nowrap; user-select: none; -webkit-user-select: none;
    box-shadow: none; text-shadow: none; transform: none;
    transition: background var(--dur) var(--ease), border-color var(--dur) var(--ease), color var(--dur) var(--ease);
  }
  .cx-btn:hover { color: var(--ink); border-color: var(--ink-3); background: var(--card); }
  .cx-btn:active { transform: translateY(0.5px); }
  .cx-btn:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
  [data-theme="dark"] .cx-btn:focus-visible { outline-color: var(--accent-text); }
  .cx-btn.cx-icon { width: var(--ctl-h); padding: 0; flex: none; }
  .cx-btn.cx-search { justify-content: flex-start; color: var(--ink-3); background: var(--paper); border-color: var(--line); font-weight: 500; flex: 1 1 auto; min-width: 0; padding: 0 6px 0 10px; }
  .cx-btn.cx-search:hover { border-color: var(--line-strong); color: var(--ink-2); }
  .cx-btn.cx-search .cx-kb { margin-left: auto; display: inline-flex; gap: 3px; }
  .cx-btn .cx-sun { display: none; }
  [data-theme="dark"] .cx-btn .cx-sun { display: block; }
  [data-theme="dark"] .cx-btn .cx-moon { display: none; }

  /* Tooltip with shortcut */
  [data-cx-tip] { position: relative; }
  [data-cx-tip]::after {
    content: attr(data-cx-tip);
    position: absolute; left: 50%; bottom: calc(100% + 8px); transform: translate(-50%, 4px);
    background: var(--ink); color: var(--paper);
    font-family: var(--f-sans); font-size: 12px; font-weight: 500; line-height: 1;
    padding: 7px 9px; border-radius: 6px; white-space: nowrap;
    opacity: 0; pointer-events: none; z-index: 60;
    transition: opacity 120ms var(--ease), transform 120ms var(--ease);
  }
  [data-cx-tip-pos="down"]::after { bottom: auto; top: calc(100% + 8px); transform: translate(-50%, -4px); }
  [data-cx-tip]:hover::after, [data-cx-tip]:focus-visible::after { opacity: 1; transform: translate(-50%, 0); transition-delay: 300ms; }
  @media (hover: none) { [data-cx-tip]::after { display: none; } }

  /* ---------- command palette ---------- */
  .cx-scrim { position: fixed; inset: 0; z-index: 2000; background: var(--scrim); opacity: 0; transition: opacity 120ms var(--ease); }
  .cx-scrim.open { opacity: 1; }
  .cx-pal {
    position: fixed; z-index: 2001; left: 50%; top: 12vh; width: min(560px, calc(100vw - 24px));
    transform: translate(-50%, -6px); opacity: 0;
    background: var(--card); color: var(--ink);
    border: 1px solid var(--line); border-radius: var(--r-panel); box-shadow: var(--float);
    font-family: var(--f-sans); font-size: var(--fs);
    display: flex; flex-direction: column; overflow: hidden; max-height: min(520px, 76vh);
    transition: opacity 120ms var(--ease), transform 120ms var(--ease);
  }
  .cx-pal.open { opacity: 1; transform: translate(-50%, 0); }
  .cx-pal[hidden], .cx-scrim[hidden] { display: none; }
  .cx-pal-in { display: flex; align-items: center; gap: 10px; height: 52px; padding: 0 14px; border-bottom: 1px solid var(--line); color: var(--ink-3); }
  .cx-pal-in input {
    all: unset; flex: 1; min-width: 0; height: 100%;
    font-family: var(--f-sans); font-size: 15px; color: var(--ink);
  }
  .cx-pal .cx-pal-in input { border: 0 !important; box-shadow: none !important; background: transparent !important; height: 100% !important; padding: 0 !important; border-radius: 0 !important; outline: none !important; }
  .cx-pal-in input::placeholder { color: var(--ink-3); }
  .cx-pal-list { list-style: none; margin: 0; padding: 6px; overflow-y: auto; overscroll-behavior: contain; }
  .cx-pal-grp { font-family: var(--f-mono); font-size: 11px; font-weight: 500; letter-spacing: 0.04em; text-transform: uppercase; color: var(--ink-3); padding: 10px 10px 6px; }
  .cx-pal-item {
    display: flex; align-items: center; gap: 10px; height: var(--ctl-h); padding: 0 10px;
    border-radius: 6px; cursor: pointer; color: var(--ink-2); white-space: nowrap;
  }
  .cx-pal-item .cx-i { color: var(--ink-3); }
  .cx-pal-item .cx-t { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; color: var(--ink); }
  .cx-pal-item .cx-t small { color: var(--ink-3); font-size: 12px; font-weight: 500; margin-left: 6px; }
  .cx-pal-item .cx-cur { font-family: var(--f-mono); font-size: 11px; color: var(--accent-text); }
  .cx-pal-item.hl { background: var(--paper-2); }
  .cx-pal-item.hl .cx-i { color: var(--ink); }
  .cx-pal-empty { padding: 24px 12px; text-align: center; color: var(--ink-3); }
  .cx-pal-foot { display: flex; gap: 14px; align-items: center; height: 36px; padding: 0 14px; border-top: 1px solid var(--line); background: var(--paper); color: var(--ink-3); font-size: 12px; }
  .cx-pal-foot span { display: inline-flex; align-items: center; gap: 6px; }
  @media (max-width: 520px) { .cx-pal { top: 8px; } .cx-pal-foot { display: none; } }

  /* ---------- skeletons ---------- */
  .cx-sk { display: block; background: var(--paper-2); border-radius: 6px; position: relative; overflow: hidden; }
  .cx-sk::after {
    content: ""; position: absolute; inset: 0; transform: translateX(-100%);
    background: linear-gradient(90deg, transparent, color-mix(in srgb, var(--card) 70%, transparent), transparent);
    animation: cx-sh 1.6s infinite;
  }
  @keyframes cx-sh { to { transform: translateX(100%); } }

  @media (prefers-reduced-motion: reduce) {
    .cx-scrim, .cx-pal, .cx-btn, [data-cx-tip]::after { transition: none; }
    .cx-sk::after { animation: none; display: none; }
  }
}