/* Nexum Pulse — premium layer over the shared base (app.css).
   Loaded after app.css, so the token redefinitions and overrides here win.
   Brand: violet/indigo with gradient accents; modern display type (Sora). */

:root {
  /* surfaces — cool, soft, more depth than the base */
  --bg: #f3f4fb; --card: #ffffff; --card-2: #f5f6fc;
  --ink: #171a2b; --ink-2: #434a63; --muted: #7f879f;
  --line: #e8eaf4; --line-2: #d9dcec;
  /* brand — violet */
  --brand: #6d5cf0; --brand-ink: #ffffff; --brand-soft: #eeecff;
  --acc: #6d5cf0; --acc-soft: #eeecff;
  --grad-brand: linear-gradient(135deg, #7b6cff 0%, #9a63f0 100%);
  --grad-brand-soft: linear-gradient(135deg, #f2eeff 0%, #efe9ff 100%);
  /* category */
  --c-prod: #1fa85c; --c-neu: #7b8aa6; --c-unprod: #e03b4c; --c-idle: #ef9f1a;
  /* depth */
  --shadow: 0 1px 2px rgba(23, 26, 43, .04), 0 4px 14px rgba(23, 26, 43, .06);
  --shadow-hi: 0 10px 30px rgba(49, 40, 120, .14);
  --shadow-brand: 0 6px 18px rgba(109, 92, 240, .35);
  --radius: 15px;
  color-scheme: light;
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --bg: #0a0c15; --card: #141827; --card-2: #10131f;
    --ink: #eceefb; --ink-2: #b7bdd4; --muted: #828aa6;
    --line: #232840; --line-2: #2f3550;
    --brand: #a79bff; --brand-ink: #14102e; --brand-soft: #211d44;
    --acc: #a79bff; --acc-soft: #211d44;
    --grad-brand: linear-gradient(135deg, #8b7cff 0%, #a964ef 100%);
    --grad-brand-soft: linear-gradient(135deg, #1d1940 0%, #241a44 100%);
    --c-prod: #35c173; --c-neu: #6f88a6; --c-unprod: #ff5d6c; --c-idle: #f5b13d;
    --shadow: 0 1px 2px rgba(0, 0, 0, .4); --shadow-hi: 0 14px 38px rgba(0, 0, 0, .55);
    --shadow-brand: 0 6px 20px rgba(80, 60, 200, .5);
    color-scheme: dark;
  }
}
:root[data-theme="dark"] {
  --bg: #0a0c15; --card: #141827; --card-2: #10131f;
  --ink: #eceefb; --ink-2: #b7bdd4; --muted: #828aa6;
  --line: #232840; --line-2: #2f3550;
  --brand: #a79bff; --brand-ink: #14102e; --brand-soft: #211d44;
  --acc: #a79bff; --acc-soft: #211d44;
  --grad-brand: linear-gradient(135deg, #8b7cff 0%, #a964ef 100%);
  --grad-brand-soft: linear-gradient(135deg, #1d1940 0%, #241a44 100%);
  --c-prod: #35c173; --c-neu: #6f88a6; --c-unprod: #ff5d6c; --c-idle: #f5b13d;
  --shadow: 0 1px 2px rgba(0, 0, 0, .4); --shadow-hi: 0 14px 38px rgba(0, 0, 0, .55);
  --shadow-brand: 0 6px 20px rgba(80, 60, 200, .5);
  color-scheme: dark;
}

/* ---- type & base polish -------------------------------------------- */
body { font-family: "Inter", "Segoe UI", system-ui, sans-serif; -webkit-font-smoothing: antialiased; letter-spacing: -.005em; }
h1, h2, h3, .ring .num b, .kpi b, .co-k b, .co .co-h b { font-family: "Sora", "Inter", sans-serif; letter-spacing: -.02em; }
.topbar h1 { font-size: 18px; font-weight: 700; }

/* ---- rail ----------------------------------------------------------- */
.rail { background: var(--card); }
.rail .logo { background: var(--grad-brand); box-shadow: var(--shadow-brand); }
.rail .logo:hover { background: var(--grad-brand); filter: brightness(1.05); }
.rail .logo img { width: 24px; height: 24px; filter: brightness(0) invert(1); }
.rail a.on { background: var(--brand-soft); color: var(--brand); }
.rail a.on::before { background: var(--grad-brand); }

/* ---- buttons -------------------------------------------------------- */
.btn { background: var(--grad-brand); box-shadow: var(--shadow-brand); border-radius: 10px; font-weight: 600;
  transition: transform .12s ease, filter .12s ease, box-shadow .12s ease; }
.btn:hover { filter: brightness(1.07); transform: translateY(-1px); }
.btn:active { transform: translateY(0); }
.btn.ghost { background: var(--card); box-shadow: none; }
.btn.ghost:hover { background: var(--card-2); transform: none; }

/* ---- cards ---------------------------------------------------------- */
.card { border-radius: var(--radius); box-shadow: var(--shadow); }
.co { border-radius: var(--radius); }

/* ---- chips (topbar) ------------------------------------------------- */
.chip { border-radius: 999px; background: var(--card); box-shadow: var(--shadow); border-color: transparent; }

/* ---- the brand violet, everywhere it carried over from the base ---- */
.login .brandmark span { color: #c9bdff; }

/* categories */
.c-produtivo { background: var(--c-prod); }
.c-neutro, .c-navegador { background: var(--c-neu); }
.c-improdutivo { background: var(--c-unprod); }
.c-ocioso { background: var(--c-idle); }
.t-produtivo { color: var(--c-prod); }
.t-improdutivo { color: var(--c-unprod); }
.t-ocioso { color: var(--c-idle); }
.legend-c { display: flex; gap: 14px; flex-wrap: wrap; font-size: 12px; color: var(--muted); }
.legend-c i { display: inline-block; width: 10px; height: 10px; border-radius: 3px; margin-right: 6px; vertical-align: -1px; }
.catbar { display: flex; height: 9px; border-radius: 99px; overflow: hidden; background: var(--line); }
.catbar i { display: block; height: 100%; }
.catbar.lg { height: 14px; }

/* presence */
.presence { display: inline-flex; align-items: center; gap: 6px; font-size: 12px; color: var(--muted); white-space: nowrap; }
.presence i { width: 8px; height: 8px; border-radius: 50%; background: var(--skip); }
.p-ativo i { background: var(--ok); animation: pulse 2s infinite; }
.p-ativo { color: var(--ok); font-weight: 600; }
.p-ocioso i { background: var(--c-idle); }
.p-bloqueado i { background: var(--c-neu); }

.avatar { flex: none; width: 40px; height: 40px; border-radius: 12px; display: grid; place-items: center; font: 700 14px "Sora", var(--sans);
  background: var(--grad-brand-soft); color: var(--brand); letter-spacing: .01em; border: 1px solid color-mix(in srgb, var(--brand) 20%, transparent); }
.avatar.lg { width: 58px; height: 58px; font-size: 19px; border-radius: 16px; }

/* date bar */
.daynav { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }
.daynav form { margin: 0; }
.daynav input[type=date] { height: 32px; padding: 3px 8px; font-size: 13px; }
.daynav .btn[aria-disabled] { opacity: .35; pointer-events: none; }
.daynav-l { margin-left: 4px; font-size: 13px; font-weight: 600; }

/* ---- overview / hero ----------------------------------------------- */
.hero.pulse-hero { display: grid; grid-template-columns: auto 1fr; gap: 22px; align-items: center; padding: 20px 22px;
  background:
    radial-gradient(600px 240px at 0% 0%, color-mix(in srgb, var(--brand) 12%, transparent), transparent 70%),
    var(--card);
  border: 1px solid var(--line); }
.ring .num b { font-weight: 800; }
.ring .val { filter: drop-shadow(0 2px 6px color-mix(in srgb, var(--band, var(--brand)) 45%, transparent)); }

.kpis.k6 { grid-template-columns: repeat(5, minmax(0, 1fr)); }
.kpi { position: relative; overflow: hidden; border-radius: 12px; padding: 13px 14px; background: var(--card-2); border: 1px solid var(--line); }
.kpi b { font-weight: 700; font-size: 25px; }
.kpi small { display: block; font-size: 11.5px; color: var(--muted); margin-top: 2px; }
.kpi::before { content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 3px; background: var(--line-2); border-radius: 0 3px 3px 0; }
.kpi.good::before { background: var(--c-prod); }
.kpi.money::before { background: var(--c-unprod); }
.kpi.money b { color: var(--c-unprod); }
.kpi.good b { color: var(--c-prod); }

.ov { display: grid; grid-template-columns: minmax(320px, 1.25fr) minmax(300px, 1fr) minmax(240px, .8fr); gap: 16px; height: 100%; min-height: 520px; }
.ov > .panel, .ov > .col { min-height: 0; }
.ov > .col { display: grid; gap: 16px; grid-auto-rows: minmax(0, auto); align-content: start; overflow: auto; }
.panel { display: flex; flex-direction: column; }
.panel > .card-b { flex: 1; min-height: 0; overflow: auto; }

/* ---- people list ---------------------------------------------------- */
.people { list-style: none; margin: 0; padding: 0; display: grid; gap: 9px; }
.people a { display: grid; grid-template-columns: 40px 1fr auto; gap: 4px 12px; align-items: center; padding: 11px 13px; border: 1px solid var(--line);
  border-radius: 12px; background: var(--card-2); transition: border-color .15s, transform .15s, box-shadow .15s; }
.people a:hover { border-color: color-mix(in srgb, var(--brand) 55%, transparent); transform: translateY(-1px); box-shadow: var(--shadow); color: inherit; }
.people .avatar { grid-row: span 2; }
.people .n { font-weight: 600; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.people .s { font: 700 16px "Sora", var(--sans); text-align: right; }
.people .d { grid-column: 2 / 4; display: grid; gap: 6px; font-size: 12px; color: var(--muted); }
.people .d .now { display: flex; gap: 8px; align-items: center; min-width: 0; }
.people .d .now span:last-child { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* ---- hourly bars ---------------------------------------------------- */
.hours { display: grid; grid-auto-flow: column; grid-auto-columns: minmax(0, 1fr); gap: 4px; align-items: end; height: 150px; padding-top: 6px; }
.hours .h { display: flex; flex-direction: column-reverse; height: 100%; border-radius: 5px 5px 0 0; overflow: hidden; background: var(--card-2); position: relative; }
.hours .h i { display: block; width: 100%; }
.hours-x { display: grid; grid-auto-flow: column; grid-auto-columns: minmax(0, 1fr); gap: 4px; font: 11px var(--mono); color: var(--muted); text-align: center; margin-top: 4px; }

/* ---- usage lists ---------------------------------------------------- */
.usage { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; }
.usage li { display: grid; grid-template-columns: 1fr auto; gap: 3px 10px; font-size: 13px; align-items: center; }
.usage .u-n { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.usage .u-t { font: 12px var(--mono); color: var(--muted); }
.usage .u-b { grid-column: 1 / -1; height: 6px; border-radius: 99px; background: var(--line); overflow: hidden; }
.usage .u-b i { display: block; height: 100%; border-radius: 99px; }
.usage .tag { font-size: 10.5px; padding: 1px 6px; border-radius: 99px; margin-left: 6px; vertical-align: 1px; color: #fff; }
.usage form { display: inline; margin: 0; }
.usage select { padding: 1px 4px; font-size: 11.5px; border-radius: 6px; margin-left: 6px; }

/* ---- person timeline: 144 ten-minute slots ------------------------- */
.timeline-day { position: relative; }
.slots { display: grid; grid-template-columns: repeat(144, minmax(0, 1fr)); height: 48px; border-radius: 10px; overflow: hidden; background: var(--card-2); border: 1px solid var(--line); }
.slots i { display: block; align-self: end; }
.slots-x { display: grid; grid-template-columns: repeat(24, minmax(0, 1fr)); font: 10.5px var(--mono); color: var(--muted); margin-top: 4px; }
.slots-x span { border-left: 1px solid var(--line); padding-left: 3px; }
.weekbars { display: grid; grid-template-columns: repeat(14, minmax(0, 1fr)); gap: 5px; align-items: end; height: 90px; }
.weekbars a { display: flex; flex-direction: column; justify-content: flex-end; height: 100%; border-radius: 6px; background: var(--card-2); overflow: hidden; outline-offset: 2px; }
.weekbars a.sel { outline: 2px solid var(--brand); }
.weekbars i { display: block; }
.weekbars-x { display: grid; grid-template-columns: repeat(14, minmax(0, 1fr)); gap: 5px; font: 10.5px var(--mono); color: var(--muted); text-align: center; margin-top: 4px; }
.person-head { display: flex; gap: 14px; align-items: center; }
.person-head h1 { margin: 0; font-size: 18px; }

/* ---- prints --------------------------------------------------------- */
.prints { display: grid; grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)); gap: 11px; }
.prints button { padding: 0; border: 1px solid var(--line); border-radius: 11px; overflow: hidden; background: var(--card-2); cursor: zoom-in; text-align: left; color: inherit; font: inherit; transition: border-color .15s, transform .15s, box-shadow .15s; }
.prints button:hover { border-color: color-mix(in srgb, var(--brand) 55%, transparent); transform: translateY(-2px); box-shadow: var(--shadow-hi); }
.prints img { display: block; width: 100%; aspect-ratio: 16 / 9; object-fit: cover; background: #111; }
.prints span { display: block; padding: 6px 9px; font: 12px var(--mono); color: var(--muted); }
dialog.viewer { width: min(1200px, 96vw); max-width: 96vw; padding: 0; border-radius: 14px; background: #0b0e13; }
dialog.viewer img { display: block; width: 100%; height: auto; max-height: 82vh; object-fit: contain; }
dialog.viewer .bar { display: flex; align-items: center; gap: 10px; padding: 9px 13px; color: #cfd6df; font: 13px var(--mono); }
dialog.viewer .bar .grow { flex: 1; }
dialog.viewer .link-btn { color: #cfd6df; border-color: #3a4552; }

/* ---- settings ------------------------------------------------------- */
.settings { display: grid; gap: 14px; max-width: 560px; }
.settings label { display: grid; gap: 5px; font-size: 12px; color: var(--muted); font-weight: 500; }
.settings .btn { justify-self: start; }
.settings .check { display: flex; gap: 8px; align-items: center; color: var(--ink); font-size: 13.5px; }
.rules td form { display: inline; margin: 0; }
.rule-form { display: grid; grid-template-columns: 120px 1fr 150px auto; gap: 8px; align-items: end; }
.pill { display: inline-block; font-size: 11.5px; padding: 2px 8px; border-radius: 99px; color: #fff; }

/* ---- portfolio cards ----------------------------------------------- */
.cos { display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: 16px; }
.co { display: grid; gap: 13px; padding: 18px; transition: transform .15s ease, box-shadow .15s ease, border-color .15s ease; }
.co:hover { border-color: color-mix(in srgb, var(--brand) 50%, transparent); transform: translateY(-3px); box-shadow: var(--shadow-hi); color: inherit; }
.co .co-h { display: flex; gap: 13px; align-items: center; }
.co .co-h b { font-size: 16px; }
.co .co-k { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; font-size: 12px; color: var(--muted); }
.co .co-k b { display: block; font-size: 18px; color: var(--ink); }

/* ---- printable employee notice ------------------------------------- */
.notice-doc { max-width: 760px; margin: 0 auto; background: var(--card); border: 1px solid var(--line); border-radius: var(--radius); padding: 40px 48px; line-height: 1.6; }
.notice-doc h1 { font-size: 22px; margin: 0 0 4px; }
.notice-doc .sign { display: grid; grid-template-columns: 1fr 1fr; gap: 40px; margin-top: 56px; }
.notice-doc .sign div { border-top: 1px solid var(--ink); padding-top: 6px; font-size: 12.5px; color: var(--muted); }

/* ---- premium login -------------------------------------------------- */
.login .plate {
  background:
    radial-gradient(1100px 620px at 8% 112%, #7b6cffaa, transparent 58%),
    radial-gradient(760px 520px at 94% -12%, #a964efaa, transparent 55%),
    radial-gradient(500px 500px at 60% 40%, #5b4ad933, transparent 60%),
    #0d0a22;
}
.login .plate::after {
  background-image: linear-gradient(#ffffff0a 1px, transparent 1px), linear-gradient(90deg, #ffffff0a 1px, transparent 1px);
  background-size: 40px 40px;
}
.login .brandmark { display: flex; align-items: center; gap: 13px; }
.login .brandmark .mk { width: 46px; height: 46px; border-radius: 13px; background: #ffffff14; border: 1px solid #ffffff26; display: grid; place-items: center; backdrop-filter: blur(6px); }
.login .brandmark .mk img { width: 27px; height: 27px; }
.login .brandmark .wm { display: flex; flex-direction: column; gap: 2px; }
.login .brandmark .wm b { font: 800 19px/1 "Sora", sans-serif; color: #fff; letter-spacing: -.01em; }
.login .brandmark .wm span { font: 500 10.5px var(--mono); letter-spacing: .16em; text-transform: uppercase; color: #c9bdff; }
.login .plate h1 { font: 800 42px/1.08 "Sora", sans-serif; letter-spacing: -.025em; max-width: 15ch; }
.login .plate p { color: #c3c7e0; max-width: 44ch; font-size: 15px; }
.login .feats { list-style: none; margin: 20px 0 0; padding: 0; display: grid; gap: 13px; }
.login .feats li { display: flex; align-items: center; gap: 12px; color: #e7e8f6; font-size: 14.5px; }
.login .feats .fi { width: 30px; height: 30px; border-radius: 9px; flex: none; display: grid; place-items: center; background: #ffffff14; border: 1px solid #ffffff26; }
.login .feats .fi svg { width: 16px; height: 16px; fill: none; stroke: #c9bdff; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.login .form form h2 { font: 700 24px "Sora", sans-serif; }
.login .btn { height: 46px; justify-content: center; font-size: 14px; }

/* ---- responsive ----------------------------------------------------- */
@media (max-width: 1100px) {
  .ov { grid-template-columns: 1fr; height: auto; }
  .kpis.k6 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .rule-form { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 640px) {
  .tabs { overflow-x: auto; }
  .tabs a { white-space: nowrap; }
  .hero.pulse-hero { grid-template-columns: 1fr; justify-items: center; text-align: center; }
  .kpis.k6 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .slots { height: 34px; }
  .notice-doc { padding: 24px 18px; }
  .login .plate h1 { font-size: 28px; }
  .login .feats { display: none; }
}
@media print {
  .rail, .topbar, .no-print { display: none !important; }
  .notice-doc { border: 0; padding: 0; }
}