/* TAC — inherits the Mini-IT shared design system (tool-bi-dashboard +
   tool-review-reply-assistant DESIGN.md): light-first, Lato + JetBrains Mono for
   data, one coral accent, warm-taupe ramp, activity-log error vernacular. */
@import url('https://fonts.googleapis.com/css2?family=Lato:wght@400;700;900&family=JetBrains+Mono:wght@400;500&display=swap');

:root {
  --bg:#f7f9fb; --sf:#fff; --sf2:#eef0f2; --ln:#e1e5ec; --ln2:#c8cfdb;
  --ink:#4a3838; --taupe:#6e5959; --muted:#7d6a6a; --muted2:#9d9d9d;
  --coral:#f98d88; --coral-strong:#e7706a; --coralt:#c0504a; --coral-soft:rgba(249,141,136,.18);
  --ok:#157f52; --warn:#b8801e; --bad:#c0392b;
  --shadow:0 1px 2px rgba(58,48,48,.05), 0 2px 8px rgba(58,48,48,.04);
}
* { box-sizing:border-box; }
body { margin:0; background:var(--bg); color:var(--ink);
  font-family:'Lato',-apple-system,system-ui,sans-serif; font-size:14px; line-height:1.55; }
.mono { font-family:'JetBrains Mono',monospace; }
a { color:var(--coralt); text-decoration:none; }
h1 { font-family:'Lato'; font-weight:900; font-size:30px; color:var(--taupe); margin:0; }
h2 { font-family:'Lato'; font-weight:700; font-size:20px; color:var(--taupe); margin:0 0 10px; }
.sec { font-size:11px; letter-spacing:.07em; text-transform:uppercase; color:var(--muted); font-weight:700; margin:22px 0 8px; }

/* brand bar */
.brand-bar { display:flex; align-items:center; gap:16px; padding:11px 22px; background:var(--sf); border-bottom:1px solid var(--ln); }
.brand { display:flex; align-items:center; gap:7px; font-weight:900; color:var(--coralt); }
.brand .logo { color:var(--coral); font-size:16px; }
.nav { display:flex; gap:18px; font-size:13px; }
.nav a { color:var(--muted); padding-bottom:11px; margin-bottom:-12px; }
.nav a.on { color:var(--coralt); font-weight:700; border-bottom:2px solid var(--coral); }
.chip { font-size:10.5px; letter-spacing:.06em; text-transform:uppercase; color:var(--taupe); background:var(--sf2); border-radius:999px; padding:4px 10px; font-weight:700; }
.signout { margin-left:auto; }
.signout button { background:none; border:none; color:var(--muted2); font-size:12px; cursor:pointer; }
.wrap { max-width:1100px; margin:0 auto; padding:20px 22px; }

/* toolbar */
.toolbar { display:flex; align-items:center; gap:12px; flex-wrap:wrap; margin-bottom:6px; }
.toolbar form { margin-left:auto; display:flex; align-items:center; gap:8px; color:var(--muted); font-size:12.5px; }

/* table */
.panel { background:var(--sf); border:1px solid var(--ln); border-radius:12px; box-shadow:var(--shadow); overflow:hidden; }
table { width:100%; border-collapse:collapse; font-size:13px; }
th { text-align:left; font-size:11px; text-transform:uppercase; letter-spacing:.04em; color:var(--muted); font-weight:700; padding:8px 12px; border-bottom:1px solid var(--ln); }
td { padding:9px 12px; border-bottom:1px solid var(--ln); vertical-align:middle; }
tr:last-child td { border-bottom:none; }

/* permission badge — always a text label, never colour alone (a11y) */
.b { display:inline-block; font-size:10.5px; text-transform:uppercase; letter-spacing:.04em; font-weight:700; border-radius:999px; padding:3px 9px; }
.b.view { background:rgba(110,89,89,.12); color:var(--taupe); }
.b.edit { background:var(--coral-soft); color:var(--coralt); }
.b.none { color:var(--muted2); }

/* activity log — warm surface, mono, colour + word */
.log { background:var(--sf2); border:1px solid var(--ln); border-radius:10px; padding:12px 14px; font-family:'JetBrains Mono'; font-size:12.5px; line-height:1.95; }
.log .t { color:var(--muted); }
.log .ev { font-weight:700; }
.ev-grant { color:var(--ok); } .ev-revoke { color:var(--coralt); } .ev-login { color:var(--muted); }
.ev-deny { color:var(--bad); } .ev-activate { color:var(--ok); } .ev-deactivate { color:var(--coralt); }

/* buttons + inputs */
.btn { display:inline-block; background:var(--sf); border:1px solid var(--ln2); color:var(--ink); border-radius:8px; padding:7px 12px; font-size:13px; font-weight:700; cursor:pointer; }
.btn.primary { background:var(--coral); border-color:var(--coral); color:var(--ink); }
.btn.danger { color:var(--bad); border-color:var(--bad); background:var(--sf); }
.btn.ghost { border-color:transparent; color:var(--muted); }
.btn:focus-visible, input:focus-visible, select:focus-visible { outline:2px solid var(--coral); outline-offset:1px; }
input, select { height:32px; font-family:inherit; font-size:13px; border:1px solid var(--ln); border-radius:8px; padding:0 8px; background:var(--sf); color:var(--ink); }
input[type=date] { font-family:'JetBrains Mono'; font-size:12.5px; }

/* empty state */
.empty { text-align:center; padding:34px 16px; color:var(--muted); }
.empty .big { font-family:'Lato'; font-weight:700; font-size:16px; color:var(--taupe); margin-bottom:10px; }

/* gate (login / denied — outside the app shell) */
.gate-body { display:flex; min-height:100vh; align-items:center; justify-content:center; }
.gate { width:360px; background:var(--sf); border:1px solid var(--ln); border-radius:14px; box-shadow:var(--shadow); padding:26px 24px; }
.brand-lock { display:flex; align-items:center; gap:9px; font-weight:900; color:var(--coralt); margin-bottom:20px; }
.gate .btn.primary { width:100%; text-align:center; padding:11px; border-radius:999px; }
.gate-log { margin-top:18px; padding-top:14px; border-top:1px solid var(--ln); font-family:'JetBrains Mono'; font-size:12px; color:var(--muted); }
.gate-log .bad { color:var(--bad); }
.caret { color:var(--coral); animation:blink 1s step-end infinite; }
@keyframes blink { 50% { opacity:0; } }
@media (prefers-reduced-motion: reduce) { .caret { animation:none; } }