/* TrackStation — camada "liquid glass" (estilo Apple / vidro translúcido).
   Carregada DEPOIS de tokens.css e trackstation.css: só sobrepõe superfícies,
   fundos, raios e controles — sem mexer na estrutura dos componentes.
   Mantém os dois temas (data-theme light/dark). */

:root {
  --radius-lg: 18px;
  --radius-xl: 22px;
  --radius-md: 11px;
  --radius-sm: 8px;
  --glass-blur: saturate(160%) blur(22px);
}

/* ---------- gradientes de fundo ---------- */
:root[data-theme="light"] {
  --grad-accent: linear-gradient(135deg, #2aa6ea 0%, #0a7cc5 100%);
  --grad-accent-soft: linear-gradient(135deg, rgba(42,166,234,.16), rgba(10,124,197,.12));
  --glass-bg: rgba(255,255,255,.66);
  --glass-bg-strong: rgba(255,255,255,.82);
  --glass-border: rgba(255,255,255,.75);
  --glass-hl: rgba(255,255,255,.7);
  --glass-shadow: 0 1px 0 var(--glass-hl) inset, 0 14px 34px -16px rgba(16,40,72,.28);
  --app-bg:
    radial-gradient(1200px 620px at -5% -12%, #d7ecfb 0%, rgba(215,236,251,0) 55%),
    radial-gradient(1000px 700px at 104% -6%, #e9e4fb 0%, rgba(233,228,251,0) 52%),
    radial-gradient(900px 900px at 60% 120%, #e2f3fb 0%, rgba(226,243,251,0) 60%),
    linear-gradient(180deg, #eef4fb 0%, #f2f5fc 100%);
}
:root[data-theme="dark"] {
  --grad-accent: linear-gradient(135deg, #38aef0 0%, #1f7fd6 100%);
  --grad-accent-soft: linear-gradient(135deg, rgba(56,174,240,.22), rgba(31,127,214,.14));
  --glass-bg: rgba(255,255,255,.045);
  --glass-bg-strong: rgba(255,255,255,.07);
  --glass-border: rgba(255,255,255,.10);
  --glass-hl: rgba(255,255,255,.06);
  --glass-shadow: 0 1px 0 var(--glass-hl) inset, 0 22px 54px -22px rgba(0,0,0,.65);
  --app-bg:
    radial-gradient(1200px 680px at -5% -12%, #13294c 0%, rgba(19,41,76,0) 55%),
    radial-gradient(1000px 720px at 104% -6%, #1b2347 0%, rgba(27,35,71,0) 52%),
    radial-gradient(900px 900px at 60% 120%, #0f2740 0%, rgba(15,39,64,0) 60%),
    linear-gradient(180deg, #0a1120 0%, #0a1322 100%);
}

/* ---------- fundo do app e do login ---------- */
.ts-app, .ts-login { background: var(--app-bg) !important; background-attachment: fixed; }
body { background: var(--app-bg); background-attachment: fixed; }

/* ---------- cartões de vidro ---------- */
.ts-panel, .ts-table, .live-card {
  background: var(--glass-bg);
  -webkit-backdrop-filter: var(--glass-blur);
  backdrop-filter: var(--glass-blur);
  border: 1px solid var(--glass-border);
  box-shadow: var(--glass-shadow);
  border-radius: var(--radius-xl);
}
.ts-panel__head, .ts-panel__foot { border-color: color-mix(in srgb, var(--line) 60%, transparent); }
.live-card { border-radius: var(--radius-lg); }

/* divisórias internas mais suaves sobre vidro */
.ts-statrow > .ts-stat { border-color: color-mix(in srgb, var(--line) 55%, transparent); }
.ts-table th, .ts-table td { border-color: color-mix(in srgb, var(--line) 55%, transparent); }
.tp__row, .hbar__track { border-color: color-mix(in srgb, var(--line) 55%, transparent); }

/* ---------- topbar translúcida ---------- */
.ts-topbar {
  background: color-mix(in srgb, var(--glass-bg-strong) 100%, transparent);
  -webkit-backdrop-filter: var(--glass-blur);
  backdrop-filter: var(--glass-blur);
  border-bottom: 1px solid var(--glass-border);
}
.ts-topbar__search {
  background: var(--glass-bg);
  border: 1px solid var(--glass-border);
  border-radius: var(--radius-full);
}
.ts-topbar__search:hover { background: var(--glass-bg-strong); box-shadow: none; }

/* ---------- rail: vidro e ciente do tema ---------- */
:root[data-theme="light"] {
  --rail: transparent;
  --rail-raised: rgba(16,40,72,.06);
  --rail-line: rgba(16,40,72,.10);
  --on-rail: #15202b;
  --on-rail-muted: #5c6672;
}
:root[data-theme="dark"] {
  --rail: transparent;
  --rail-raised: rgba(255,255,255,.07);
  --rail-line: rgba(255,255,255,.09);
  --on-rail: #eaf1f8;
  --on-rail-muted: #8d97a3;
}
.ts-rail {
  background: var(--glass-bg);
  -webkit-backdrop-filter: var(--glass-blur);
  backdrop-filter: var(--glass-blur);
  border-right: 1px solid var(--glass-border);
}
.ts-rail__item { border-radius: var(--radius-md); transition: background .15s, color .15s; }
.ts-rail__item.is-active {
  background: var(--grad-accent-soft);
  color: var(--brand);
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--brand) 22%, transparent);
}
.ts-rail__item.is-active .ts-icon { color: var(--brand); }
.ts-rail__item.is-active::before { display: none; }       /* troca a barrinha pela pílula */
.ts-rail__theme { background: var(--rail-raised); border-radius: var(--radius-md); }
.ts-rail__themeopt.is-on { background: var(--glass-bg-strong); color: var(--on-rail); box-shadow: 0 2px 8px -3px rgba(0,0,0,.25); }

/* ---------- botões ---------- */
.ts-btn { border-radius: var(--radius-md); }
.ts-btn--primary {
  background: var(--grad-accent);
  color: #fff;
  box-shadow: 0 6px 16px -6px color-mix(in srgb, var(--brand) 70%, transparent), 0 1px 0 rgba(255,255,255,.3) inset;
}
.ts-btn--primary:hover { background: var(--grad-accent); filter: brightness(1.05); }
.ts-btn--secondary {
  background: var(--glass-bg-strong);
  border-color: var(--glass-border);
  -webkit-backdrop-filter: var(--glass-blur);
  backdrop-filter: var(--glass-blur);
  box-shadow: var(--shadow-sm);
}
.ts-btn--secondary:hover { background: var(--glass-bg-strong); filter: brightness(1.03); }

/* ícones circulares de vidro */
.ts-iconbtn { border-radius: var(--radius-full); }
.ts-iconbtn:hover { background: var(--glass-bg-strong); }
.ts-iconbtn--secondary { background: var(--glass-bg-strong); border-color: var(--glass-border); border-radius: var(--radius-full); }

/* ---------- segmentado (Hoje/7/30, filtros) em pílula de vidro ---------- */
.ts-seg {
  background: var(--glass-bg);
  border: 1px solid var(--glass-border);
  border-radius: var(--radius-full);
  -webkit-backdrop-filter: var(--glass-blur);
  backdrop-filter: var(--glass-blur);
}
.ts-seg__opt { border-radius: var(--radius-full); }
.ts-seg__opt.is-on {
  background: var(--glass-bg-strong);
  color: var(--brand);
  box-shadow: 0 2px 8px -3px rgba(16,40,72,.3), inset 0 0 0 1px color-mix(in srgb, var(--brand) 18%, transparent);
}

/* ---------- inputs de vidro ---------- */
.ts-input {
  background: var(--glass-bg);
  border: 1px solid var(--glass-border);
  border-radius: var(--radius-md);
}
.ts-input:focus-within { border-color: var(--accent); }

/* ---------- chips de ícone pastel (stat labels) ---------- */
.ts-stat__label .ts-icon {
  display: inline-grid; place-items: center;
  width: 26px; height: 26px; border-radius: 9px;
  background: var(--grad-accent-soft);
  color: var(--brand);
}
.ts-stat--warning .ts-stat__label .ts-icon { background: var(--warning-soft); color: var(--warning-mark); }
.ts-stat--danger .ts-stat__label .ts-icon, .ts-stat--danger .ts-stat__label { color: var(--danger); }
.ts-stat--danger .ts-stat__label .ts-icon { background: var(--danger-soft); }
.ts-stat--success .ts-stat__label .ts-icon { background: var(--success-soft); color: var(--success); }

/* ---------- badges / kbd mais suaves ---------- */
.ts-kbd { background: var(--glass-bg-strong); border-color: var(--glass-border); }
.ts-badge { backdrop-filter: var(--glass-blur); -webkit-backdrop-filter: var(--glass-blur); }

/* ---------- modais de vidro ---------- */
.ts-modal, .ts-dialog, [class*="modal"] > .ts-panel {
  background: var(--glass-bg-strong);
  -webkit-backdrop-filter: saturate(160%) blur(30px);
  backdrop-filter: saturate(160%) blur(30px);
  border: 1px solid var(--glass-border);
}

/* ---------- logo do rail conforme o tema ---------- */
.ts-brand-light { display: none; }
:root[data-theme="light"] .ts-brand-dark { display: none; }
:root[data-theme="light"] .ts-brand-light { display: inline; }

/* ---------- login ---------- */
/* o lado da marca mantém fundo escuro/branded nos dois temas (texto e logo são claros) */
.ts-login__brand {
  background:
    radial-gradient(800px 500px at 20% -10%, #15406a 0%, rgba(21,64,106,0) 55%),
    linear-gradient(160deg, #0b1b2e 0%, #0a1322 100%);
  color: #eaf1f8;
}
.ts-login__main { background: transparent; }
.ts-login__form { position: relative; }

/* trilhas e barrinhas um pouco mais suaves no vidro */
.hbar__track, .ag__bar, .ts-week__comp { background: color-mix(in srgb, var(--surface-sunken) 70%, transparent); }

/* ---------- popover flutuante (calendário, menus) ---------- */
.ts-pop {
  position: fixed; z-index: 90;
  background: var(--glass-bg-strong);
  -webkit-backdrop-filter: saturate(170%) blur(28px);
  backdrop-filter: saturate(170%) blur(28px);
  border: 1px solid var(--glass-border);
  border-radius: 16px;
  box-shadow: 0 1px 0 var(--glass-hl) inset, 0 20px 48px -16px rgba(16,40,72,.4);
  padding: var(--space-2);
  animation: ts-pop-in .14s ease-out;
}
[data-theme="dark"] .ts-pop { box-shadow: 0 1px 0 var(--glass-hl) inset, 0 24px 56px -18px rgba(0,0,0,.7); }
@keyframes ts-pop-in { from { opacity: 0; transform: translateY(-4px) scale(.985); } to { opacity: 1; transform: none; } }

/* calendário */
.ts-cal { width: 100%; padding: var(--space-1); }
.ts-cal__head { display: flex; align-items: center; justify-content: space-between; gap: var(--space-2); padding: var(--space-1) var(--space-1) var(--space-3); }
.ts-cal__title { color: var(--ink); }
.ts-cal__nav { display: flex; gap: 2px; }
.ts-cal__wd { display: grid; grid-template-columns: repeat(7,1fr); gap: 2px; margin-bottom: var(--space-1); }
.ts-cal__wd span { display: grid; place-items: center; height: 24px; color: var(--ink-muted); }
.ts-cal__grid { display: grid; grid-template-columns: repeat(7,1fr); gap: 2px; }
.ts-cal__day {
  display: grid; place-items: center; height: 34px; border: 0; border-radius: 9px;
  background: none; color: var(--ink); cursor: pointer; font: inherit; font-size: 13px; font-weight: 500;
}
.ts-cal__day:hover:not(:disabled) { background: var(--grad-accent-soft); color: var(--brand); }
.ts-cal__day.is-out { color: var(--ink-disabled); }
.ts-cal__day.is-today { box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--brand) 40%, transparent); color: var(--brand); }
.ts-cal__day.is-sel { background: var(--grad-accent); color: #fff; box-shadow: 0 4px 12px -4px color-mix(in srgb, var(--brand) 70%, transparent); }
.ts-cal__day:disabled { color: var(--ink-disabled); opacity: .4; cursor: default; }
.ts-cal__foot { display: flex; justify-content: center; margin-top: var(--space-2); padding-top: var(--space-2); border-top: 1px solid color-mix(in srgb, var(--line) 60%, transparent); }

/* menu dropdown */
.ts-menu { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 1px; max-height: 320px; overflow-y: auto; }
.ts-menu__opt {
  display: flex; align-items: center; justify-content: space-between; gap: var(--space-3); width: 100%;
  height: 34px; padding: 0 var(--space-3); border: 0; border-radius: 9px;
  background: none; color: var(--ink-soft); cursor: pointer; text-align: left; white-space: nowrap;
}
.ts-menu__opt:hover { background: var(--grad-accent-soft); color: var(--brand); }
.ts-menu__opt.is-on { color: var(--brand); font-weight: 600; }
.ts-menu__opt .ts-icon { color: var(--brand); flex: none; }

/* botão "picker" (abre dropdown próprio) */
.ts-picker {
  display: inline-flex; align-items: center; gap: var(--space-2); height: var(--control-md);
  padding: 0 var(--space-3); border: 1px solid var(--glass-border); border-radius: var(--radius-full);
  background: var(--glass-bg); color: var(--ink); cursor: pointer; white-space: nowrap;
  -webkit-backdrop-filter: var(--glass-blur); backdrop-filter: var(--glass-blur);
}
.ts-picker:hover { background: var(--glass-bg-strong); }
.ts-picker > span { overflow: hidden; text-overflow: ellipsis; }
.ts-picker__chev { color: var(--ink-muted); margin-left: var(--space-1); }
.ts-picker .ts-icon:first-child { color: var(--ink-muted); }

/* caixa com rolagem (ex.: lista de atividades longa) */
.ts-scrollbox { max-height: 440px; overflow-y: auto; scrollbar-width: thin; scrollbar-color: var(--line-strong) transparent; }
.ts-scrollbox::-webkit-scrollbar { width: 10px; }
.ts-scrollbox::-webkit-scrollbar-thumb { background: color-mix(in srgb, var(--ink-muted) 35%, transparent); border-radius: 8px; border: 3px solid transparent; background-clip: content-box; }
.ts-scrollbox::-webkit-scrollbar-thumb:hover { background: color-mix(in srgb, var(--ink-muted) 55%, transparent); background-clip: content-box; }
.ts-scrollbox .ts-table th { position: sticky; top: 0; z-index: 1; background: var(--glass-bg-strong); -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); }

/* respeita quem prefere menos movimento/efeito: mantém legível sem blur pesado */
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  :root[data-theme="light"] { --glass-bg: #ffffff; --glass-bg-strong: #ffffff; }
  :root[data-theme="dark"] { --glass-bg: #141d2b; --glass-bg-strong: #18212f; }
}