/* ==========================================================================
  Budavári Gála | Production Management System
   Design tokens: near-black stage background, amber "gel" accent,
   VU-meter motif for readiness/progress indicators.
   ========================================================================== */

@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;800&family=IBM+Plex+Mono:wght@400;500;600&display=swap');

:root{
  --bg: #0a0c0f;
  --bg-raised: #101318;
  --surface: #14171c;
  --surface-2: #1a1e25;
  --surface-hover: #1f242c;
  --border: #232830;
  --border-soft: #1b1f26;
  --text: #e7eaf0;
  --text-dim: #9aa3b2;
  --text-faint: #626b7a;

  --accent: #e8a33d;
  --accent-dim: #a97a34;
  --accent-glow: rgba(232,163,61,0.18);

  --ok: #45b787;
  --ok-dim: rgba(69,183,135,0.14);
  --warn: #e8a33d;
  --warn-dim: rgba(232,163,61,0.14);
  --danger: #e8615d;
  --danger-dim: rgba(232,97,93,0.14);
  --info: #5b9dd9;
  --info-dim: rgba(91,157,217,0.14);
  --blocked: #9a6bd6;
  --blocked-dim: rgba(154,107,214,0.14);

  --radius-sm: 6px;
  --radius: 10px;
  --radius-lg: 14px;

  --font-ui: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  --font-mono: 'IBM Plex Mono', 'SFMono-Regular', Menlo, monospace;

  --shadow-1: 0 1px 2px rgba(0,0,0,0.4);
  --shadow-2: 0 8px 24px rgba(0,0,0,0.45);
  --sidebar-w: 248px;
}

*,*::before,*::after{ box-sizing:border-box; }
html,body{ height:100%; scroll-behavior:smooth; }
body{
  margin:0;
  background:var(--bg);
  color:var(--text);
  font-family:var(--font-ui);
  font-size:14px;
  line-height:1.5;
  -webkit-font-smoothing:antialiased;
}
h1,h2,h3,h4{ margin:0; font-weight:700; letter-spacing:-0.01em; }
p{ margin:0; }
a{ color:inherit; }
button{ font-family:inherit; outline:none; -webkit-appearance:none; appearance:none; }
::selection{ background:var(--accent-glow); }
::-webkit-scrollbar{ width:10px; height:10px; }
::-webkit-scrollbar-thumb{ background:var(--surface-2); border-radius:8px; border:2px solid var(--bg); }
::-webkit-scrollbar-track{ background:transparent; }

:focus-visible{ outline:none; }

.mono{ font-family:var(--font-mono); font-variant-numeric:tabular-nums; }
.hidden{ display:none !important; }
.text-dim{ color:var(--text-dim); }
.text-faint{ color:var(--text-faint); }

/* ---------- App shell ---------- */
#app-shell{ display:flex; height:100vh; overflow:hidden; }

#sidebar{
  width:var(--sidebar-w); flex:0 0 auto;
  background:var(--bg-raised);
  border-right:1px solid var(--border-soft);
  display:flex; flex-direction:column;
  transition:transform .2s ease;
}
.brand{
  padding:20px 18px 16px; display:flex; align-items:center; gap:10px;
  border-bottom:1px solid var(--border-soft);
}
.brand-mark{
  width:30px;height:30px;border-radius:8px;
  background:linear-gradient(160deg, var(--accent), var(--accent-dim));
  display:flex;align-items:center;justify-content:center;
  font-weight:800; color:#1a1103; font-size:14px; flex:none;
}
.brand-text{ display:flex; flex-direction:column; line-height:1.2; overflow:hidden; }
.brand-text strong{ font-size:13.5px; font-weight:700; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.brand-text span{ font-size:11px; color:var(--text-faint); }

#event-countdown-mini{
  margin:12px 14px; padding:10px 12px; background:var(--surface); border:1px solid var(--border-soft);
  border-radius:var(--radius); font-size:11px; color:var(--text-dim);
}
#event-countdown-mini .cd-value{ font-family:var(--font-mono); font-size:16px; color:var(--accent); font-weight:600; display:block; margin-top:2px;}

nav#main-nav{ flex:1; overflow-y:auto; padding:6px 10px; }
.nav-item{
  display:flex; align-items:center; gap:10px;
  padding:9px 10px; border-radius:8px; cursor:pointer;
  color:var(--text-dim); font-size:13px; font-weight:500;
  margin-bottom:2px; border:1px solid transparent; user-select:none;
  transition:background .12s, color .12s;
}
.nav-item:hover{ background:var(--surface-hover); color:var(--text); }
.nav-item.active{ background:var(--surface-2); color:var(--text); border-color:var(--border); position:relative; }
.nav-item.active::before{
  content:''; position:absolute; left:-10px; top:50%; transform:translateY(-50%);
  width:3px; height:16px; background:var(--accent); border-radius:0 3px 3px 0;
}
.nav-icon{ width:16px; text-align:center; flex:none; opacity:.9; }
.nav-badge{
  margin-left:auto; font-size:10px; font-weight:700; padding:1px 6px; border-radius:10px;
  background:var(--danger-dim); color:var(--danger);
}
.nav-section-label{ font-size:10px; text-transform:uppercase; letter-spacing:.08em; color:var(--text-faint); padding:14px 10px 6px; }

.sidebar-footer{ padding:12px; border-top:1px solid var(--border-soft); }
.user-chip{ display:flex; align-items:center; gap:9px; padding:8px; border-radius:8px; }
.user-chip:hover{ background:var(--surface-hover); cursor:pointer; }
.avatar{ width:28px; height:28px; border-radius:50%; background:var(--surface-2); border:1px solid var(--border); display:flex; align-items:center; justify-content:center; font-size:11px; font-weight:700; color:var(--accent); flex:none; }
.user-meta{ overflow:hidden; }
.user-meta strong{ display:block; font-size:12.5px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.user-meta span{ font-size:10.5px; color:var(--text-faint); text-transform:uppercase; letter-spacing:.04em; }

/* ---------- Main column ---------- */
#main-col{ flex:1; display:flex; flex-direction:column; min-width:0; }
#topbar{
  height:56px; flex:none; display:flex; align-items:center; gap:14px;
  padding:0 20px; border-bottom:1px solid var(--border-soft); background:var(--bg);
}
#menu-toggle{ display:none; }
#view-title{ font-size:16px; font-weight:700; }
#view-subtitle{ font-size:12px; color:var(--text-faint); margin-top:1px; }
.topbar-search{
  margin-left:auto; width:280px; position:relative;
}
.topbar-search input{
  width:100%; background:var(--surface); border:1px solid var(--border-soft); border-radius:8px;
  padding:8px 12px 8px 32px; color:var(--text); font-size:12.5px;
  box-shadow:inset 0 1px 2px rgba(0,0,0,0.18);
  transition:border-color .15s ease, box-shadow .15s ease;
}
.topbar-search input:focus{ border-color:var(--accent); box-shadow:inset 0 1px 2px rgba(0,0,0,0.18), 0 0 0 3px var(--accent-glow); outline:none; }
.topbar-search:focus-within .icon{ color:var(--accent); }
.topbar-search .icon{ position:absolute; left:11px; top:50%; transform:translateY(-50%); color:var(--text-faint); font-size:12px; transition:color .15s ease; }
.topbar-actions{ display:flex; align-items:center; gap:14px; }

#view-container{ flex:1; overflow-y:auto; padding:22px 26px 60px; }

/* ---------- Buttons ---------- */
.btn{
  display:inline-flex; align-items:center; gap:6px; justify-content:center;
  min-height:36px; padding:8px 14px; border-radius:8px; border:1px solid var(--border);
  background:linear-gradient(180deg,var(--surface-2),var(--surface)); color:var(--text); font-size:12.5px; font-weight:650;
  cursor:pointer; transition:background .16s ease, border-color .16s ease, color .16s ease, transform .1s ease, box-shadow .16s ease;
}
.btn:hover{ background:var(--surface-hover); border-color:var(--text-faint); box-shadow:inset 0 0 0 1px rgba(255,255,255,.04); }
.btn:active{ transform:translateY(1px) scale(.98); box-shadow:none; }
.btn:disabled{ opacity:.45; cursor:not-allowed; }
.btn-primary{ background:linear-gradient(180deg,#f0b456,var(--accent)); border-color:#f0b456; color:#1a1103; }
.btn-primary:hover{ background:linear-gradient(180deg,#ffc66a,#e8a33d); border-color:#ffc66a; box-shadow:inset 0 0 0 1px rgba(255,255,255,.2); }
.btn-danger{ background:var(--danger-dim); border-color:rgba(232,97,93,.35); color:var(--danger); }
.btn-danger:hover{ background:rgba(232,97,93,.22); }
.btn-ghost{ background:transparent; border-color:transparent; }
.btn-ghost:hover{ background:var(--surface-hover); }
.btn-sm{ min-height:30px; padding:5px 10px; font-size:11.5px; }
.btn-icon{ width:32px; height:32px; padding:0; }
.input-control{ position:relative; display:flex; align-items:stretch; gap:6px; width:100%; }
.input-control-text{ display:block; }
.input-control-text::before{ content:""; position:absolute; left:1px; top:8px; bottom:8px; width:2px; border-radius:2px; background:var(--border); transition:background .16s ease, box-shadow .16s ease; pointer-events:none; z-index:1; }
.input-control-text:focus-within::before{ background:var(--accent); box-shadow:0 0 8px var(--accent); }
.textarea-control{ position:relative; width:100%; }
.textarea-control > textarea{ display:block; width:100%; resize:none; padding-right:24px; }
.textarea-control::before{ content:""; position:absolute; left:1px; top:8px; bottom:8px; width:2px; border-radius:2px; background:var(--border); transition:background .16s ease, box-shadow .16s ease; pointer-events:none; z-index:1; }
.textarea-control:focus-within::before{ background:var(--accent); box-shadow:0 0 8px var(--accent); }
.textarea-resize-grip{ position:absolute; right:5px; bottom:5px; width:14px; height:14px; cursor:nwse-resize; opacity:.65; border-right:2px solid var(--text-faint); border-bottom:2px solid var(--text-faint); border-radius:0 0 3px 0; transition:opacity .16s ease, border-color .16s ease, transform .16s ease; }
.textarea-resize-grip::before{ content:""; position:absolute; right:3px; bottom:3px; width:7px; height:7px; border-right:1px solid var(--text-faint); border-bottom:1px solid var(--text-faint); }
.textarea-resize-grip:hover{ opacity:1; border-color:var(--accent); }
.textarea-resize-grip:focus-visible{ outline:none; box-shadow:0 0 0 3px var(--accent-glow); }
.input-control > input{ flex:1; min-width:0; width:100%; }
.input-control-text > input{ display:block; width:100%; }
.input-control-number > input{ appearance:textfield; }
.input-control-number > input::-webkit-inner-spin-button,
.input-control-number > input::-webkit-outer-spin-button{ appearance:none; margin:0; }
.input-stepper{ display:flex; flex:0 0 auto; overflow:hidden; border:1px solid var(--border); border-radius:8px; }
.input-stepper-button,.input-picker-button{ border:0; background:var(--surface-2); color:var(--text-dim); cursor:pointer; font:700 15px var(--font-ui); transition:background .14s ease,color .14s ease; }
.input-stepper-button{ width:27px; }
.input-stepper-button + .input-stepper-button{ border-left:1px solid var(--border); }
.input-stepper-button:hover,.input-picker-button:hover{ background:var(--accent-glow); color:var(--accent); }
.input-stepper-button:active,.input-picker-button:active{ background:var(--accent); color:#1a1103; }
.input-picker-button{ width:42px; flex:0 0 42px; border:1px solid var(--border); border-radius:8px; font-size:17px; }
.input-control button,.input-control input{ outline:none; }
.input-control button:focus-visible{ outline:2px solid var(--accent); outline-offset:2px; }
.input-control-date > input::-webkit-calendar-picker-indicator,
.input-control-time > input::-webkit-calendar-picker-indicator{ opacity:0; width:0; margin:0; }
.input-picker-button-date::before{ content:""; display:block; width:15px; height:13px; border:2px solid currentColor; border-radius:3px; background:linear-gradient(var(--accent) 0 3px,transparent 3px); }
.input-picker-button-time::before{ content:""; display:block; width:16px; height:16px; border:2px solid currentColor; border-radius:50%; background:linear-gradient(90deg,transparent 48%,currentColor 48% 54%,transparent 54%),linear-gradient(0deg,transparent 48%,currentColor 48% 54%,transparent 54%); }
.input-picker-button-time::after{ content:""; position:absolute; width:2px; height:6px; background:currentColor; transform:translateY(-2px); border-radius:2px; }
.input-picker-button{ position:relative; display:flex; align-items:center; justify-content:center; }
.custom-picker{ position:fixed; z-index:1000; width:292px; padding:12px; background:var(--surface); border:1px solid var(--border); border-radius:12px; box-shadow:0 16px 40px rgba(0,0,0,.45); animation:picker-in .16s ease both; }
@keyframes picker-in{ from{ opacity:0; transform:translateY(-5px) scale(.98); } to{ opacity:1; transform:none; } }
.picker-header{ display:flex; align-items:center; justify-content:space-between; gap:8px; margin-bottom:12px; color:var(--text); font-size:12px; }
.picker-nav{ display:flex; gap:4px; }
.picker-button{ min-width:30px; min-height:30px; padding:4px 7px; border:1px solid transparent; border-radius:7px; background:transparent; color:var(--text-dim); cursor:pointer; font:600 12px var(--font-ui); transition:background .14s ease,color .14s ease,border-color .14s ease; }
.picker-button:hover{ background:var(--surface-hover); border-color:var(--border); color:var(--text); }
.picker-button.is-selected{ background:var(--accent); color:#1a1103; border-color:var(--accent); }
.picker-button.is-today{ border-color:var(--accent-dim); color:var(--accent); }
.date-grid{ display:grid; grid-template-columns:repeat(7,1fr); gap:3px; }
.date-weekday{ padding:4px 0; color:var(--text-faint); font-size:10px; font-weight:700; text-align:center; }
.date-empty{ min-height:30px; }
.date-grid .picker-button{ width:100%; padding:3px 0; }
.picker-footer{ display:flex; justify-content:space-between; gap:8px; margin-top:10px; padding-top:8px; border-top:1px solid var(--border-soft); }
.picker-footer .picker-button:last-child{ color:var(--accent); }
.time-picker-title{ color:var(--text-faint); font-size:10px; font-weight:700; text-transform:uppercase; letter-spacing:.08em; margin-bottom:8px; }
.time-picker-display{ display:flex; justify-content:center; gap:3px; margin:4px 0 14px; color:var(--accent); font:600 26px var(--font-mono); }
.time-picker-fields{ display:grid; grid-template-columns:1fr 1fr; gap:12px; }
.time-picker-field label{ margin-bottom:5px; }
.time-picker-field .custom-select-trigger{ min-height:36px; }

/* ---------- Cards / layout ---------- */
.card{ background:var(--surface); border:1px solid var(--border-soft); border-radius:var(--radius); }
.card-pad{ padding:16px 18px; }
.grid{ display:grid; gap:14px; }
.grid-4{ grid-template-columns:repeat(4,1fr); }
.grid-3{ grid-template-columns:repeat(3,1fr); }
.grid-2{ grid-template-columns:repeat(2,1fr); }
@media(max-width:1200px){ .grid-4{ grid-template-columns:repeat(2,1fr);} .grid-3{grid-template-columns:repeat(2,1fr);} }
@media(max-width:720px){ .grid-4,.grid-3,.grid-2{ grid-template-columns:1fr; } }

.section-header{ display:flex; align-items:flex-end; justify-content:space-between; margin-bottom:14px; gap:10px; flex-wrap:wrap; }
.section-header h2{ font-size:15px; }
.section-header .actions{ display:flex; gap:14px; }

/* Stat card */
.stat-card{ padding:15px 16px; display:flex; flex-direction:column; gap:6px; }
.stat-card .label{ font-size:11px; color:var(--text-faint); text-transform:uppercase; letter-spacing:.05em; }
.stat-card .value{ font-family:var(--font-mono); font-size:26px; font-weight:600; }
.stat-card .sub{ font-size:11px; color:var(--text-dim); }

/* VU meter readiness bar. */
.vu-meter{ display:flex; gap:2px; height:14px; align-items:flex-end; }
.vu-seg{ flex:1; height:100%; background:var(--border); border-radius:1px; }
.vu-seg.on-ok{ background:var(--ok); }
.vu-seg.on-warn{ background:var(--warn); }
.vu-seg.on-danger{ background:var(--danger); }
.vu-row{ display:flex; align-items:center; gap:10px; }
.vu-row .vu-meter{ flex:1; }
.vu-row .vu-pct{ font-family:var(--font-mono); font-size:12px; width:38px; text-align:right; color:var(--text-dim); }
.vu-row .vu-label{ width:110px; font-size:12px; color:var(--text-dim); flex:none; }

/* Status pill */
.pill{ display:inline-flex; align-items:center; gap:5px; padding:2px 8px; border-radius:20px; font-size:11px; font-weight:600; white-space:nowrap; }
.pill-ok{ background:var(--ok-dim); color:var(--ok); }
.pill-warn{ background:var(--warn-dim); color:var(--warn); }
.pill-danger{ background:var(--danger-dim); color:var(--danger); }
.pill-info{ background:var(--info-dim); color:var(--info); }
.pill-blocked{ background:var(--blocked-dim); color:var(--blocked); }
.pill-neutral{ background:var(--surface-2); color:var(--text-dim); }
.dot{ width:6px; height:6px; border-radius:50%; background:currentColor; flex:none; }

/* Table */
table.data-table{ width:100%; border-collapse:collapse; font-size:12.5px; }
.data-table th{ text-align:left; font-size:10.5px; text-transform:uppercase; letter-spacing:.05em; color:var(--text-faint); padding:9px 12px; border-bottom:1px solid var(--border-soft); font-weight:600; }
.data-table td{ padding:10px 12px; border-bottom:1px solid var(--border-soft); vertical-align:middle; }
.data-table tbody tr{ cursor:pointer; transition:background .1s; }
.data-table tbody tr:hover{ background:var(--surface-hover); }
.data-table tbody tr:last-child td{ border-bottom:none; }

/* Toolbar */
.toolbar{ display:flex; gap:14px; flex-wrap:wrap; align-items:center; margin-bottom:14px; }
.toolbar input[type=text], .toolbar input[type=search], textarea, input[type=text], input[type=number],
input[type=date], input[type=time], input[type=email], input[type=password]{
  background:var(--surface); border:1px solid var(--border); border-radius:8px; color:var(--text);
  padding:9px 12px; font-size:12.5px; font-family:inherit; line-height:1.4;
  box-shadow:inset 0 1px 2px rgba(0,0,0,0.18);
  color-scheme:dark;
}
select{ cursor:pointer; }
textarea{ resize:vertical; min-height:76px; width:100%; }
input::placeholder, textarea::placeholder{ color:var(--text-faint); opacity:1; }
input:focus, select:focus, textarea:focus{ border-color:var(--accent); }
input:disabled, textarea:disabled{ opacity:.5; cursor:not-allowed; background:var(--bg-raised); }
input:read-only:not([type=checkbox]){ background:var(--bg-raised); }
label{ font-size:11px; color:var(--text-dim); font-weight:700; text-transform:uppercase; letter-spacing:.04em; display:block; margin-bottom:6px; }
.field{ margin-bottom:15px; }
.field .required{ color:var(--danger); }
.form-grid{ display:grid; grid-template-columns:1fr 1fr; gap:0 16px; }
@media(max-width:640px){ .form-grid{ grid-template-columns:1fr; } }
.hint{ font-size:11px; color:var(--text-faint); margin-top:5px; }

/* Number input spinners + date/time picker icons, themed for dark mode */
input[type=number]::-webkit-inner-spin-button, input[type=number]::-webkit-outer-spin-button{ opacity:.6; filter:invert(0.85); }
input[type=date]::-webkit-calendar-picker-indicator, input[type=time]::-webkit-calendar-picker-indicator{
  filter:invert(0.75); cursor:pointer; border-radius:4px; padding:2px; transition:background-color .12s ease;
}
input[type=date]::-webkit-calendar-picker-indicator:hover, input[type=time]::-webkit-calendar-picker-indicator:hover{ background:var(--surface-hover); }

/* Empty state */
.empty-state{ text-align:center; padding:50px 20px; color:var(--text-faint); }
.empty-state .icon{ font-size:28px; margin-bottom:10px; opacity:.6; }
.empty-state h3{ font-size:14px; color:var(--text-dim); margin-bottom:4px; }

/* Modal */
.modal-backdrop{ position:fixed; inset:0; background:rgba(4,5,7,.6); backdrop-filter:blur(2px); display:flex; align-items:flex-start; justify-content:center; z-index:200; padding:40px 16px; overflow-y:auto; }
.modal{ background:var(--surface); border:1px solid var(--border); border-radius:var(--radius-lg); width:100%; max-width:640px; box-shadow:var(--shadow-2); }
.modal.modal-lg{ max-width:900px; }
.modal-header{ padding:16px 20px; border-bottom:1px solid var(--border-soft); display:flex; align-items:center; justify-content:space-between; }
.modal-header h3{ font-size:14.5px; }
.modal-body{ padding:20px; max-height:70vh; overflow-y:auto; }
.modal-footer{ padding:16px 20px; border-top:1px solid var(--border-soft); display:flex; justify-content:flex-end; gap:14px; }
.modal-footer > div{ display:flex; align-items:center; justify-content:flex-end; gap:14px; flex-wrap:wrap; width:100%; }

/* Toasts: see the "Custom notifications" section near the bottom of this file
   for the full redesigned toast styling (icon, progress bar, close button). */

/* Loading / skeleton */
.skeleton{ background:linear-gradient(90deg,var(--surface) 25%,var(--surface-2) 37%,var(--surface) 63%); background-size:400% 100%; animation:sk 1.4s ease infinite; border-radius:6px; }
.repeatable-rows{ display:flex; flex-direction:column; gap:8px; margin-bottom:6px; }
.repeatable-row{ display:flex; gap:6px; align-items:center; }
.repeatable-row input{ flex:1; min-width:0; }
.repeatable-row .input-control{ flex:1; min-width:0; }
.repeatable-row .btn-icon{ flex:0 0 32px; }
.repeatable-add-button{ width:36px; height:36px; flex:0 0 36px; border:1px solid var(--accent-dim); border-radius:8px; background:var(--accent-glow); color:var(--accent); cursor:pointer; font-size:21px; line-height:1; transition:background .14s ease,transform .1s ease,box-shadow .14s ease; }
.repeatable-add-button:hover{ background:var(--accent); color:#1a1103; box-shadow:inset 0 0 0 1px rgba(255,255,255,.2); }
.repeatable-add-button:active{ transform:scale(.94); }
.detail-modal-content{ display:flex; flex-direction:column; gap:18px; }
.detail-modal-hero{ display:flex; align-items:center; gap:12px; padding:4px 0 16px; border-bottom:1px solid var(--border-soft); }
.detail-modal-mark{ width:34px; height:34px; display:flex; align-items:center; justify-content:center; border:1px solid var(--accent-dim); border-radius:10px; color:var(--accent); font-size:24px; line-height:1; }
.detail-modal-kicker{ color:var(--accent); font:600 10px var(--font-mono); letter-spacing:.08em; text-transform:uppercase; }
.detail-modal-hero h2{ font-size:18px; margin-top:2px; }
.detail-modal-grid{ display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:8px; }
.detail-modal-field{ min-height:58px; display:flex; flex-direction:column; justify-content:center; gap:4px; padding:10px 12px; background:var(--surface-2); border:1px solid var(--border-soft); border-radius:8px; }
.detail-modal-field .k{ color:var(--text-faint); font-size:10.5px; text-transform:uppercase; letter-spacing:.04em; }
.detail-modal-field .v{ color:var(--text); font-size:12.5px; overflow-wrap:anywhere; }
@media (max-width:560px){ .detail-modal-grid{ grid-template-columns:1fr; } }
@keyframes sk{ 0%{background-position:100% 0} 100%{background-position:0 0} }
.spinner{ width:16px;height:16px;border-radius:50%;border:2px solid var(--border);border-top-color:var(--accent); animation:spin .7s linear infinite; }
@keyframes spin{ to{ transform:rotate(360deg);} }
#boot-screen{ position:fixed; inset:0; background:var(--bg); display:flex; align-items:center; justify-content:center; flex-direction:column; gap:14px; z-index:1000; }

/* Login */
#login-screen{ position:fixed; inset:0; background:radial-gradient(circle at 30% 20%, #16110a 0%, var(--bg) 60%); display:flex; align-items:center; justify-content:center; }
.login-card{ width:100%; max-width:360px; background:var(--surface); border:1px solid var(--border-soft); border-radius:var(--radius-lg); padding:30px 28px; box-shadow:var(--shadow-2); }
.login-card .brand-mark{ width:44px; height:44px; font-size:19px; margin-bottom:16px; }
.login-card h1{ font-size:18px; margin-bottom:2px; }
.login-card p.sub{ color:var(--text-faint); font-size:12.5px; margin-bottom:22px; }
.login-card input[type=email], .login-card input[type=password], .login-card input[type=text]{
  padding:11px 13px; font-size:13px; border-radius:9px;
}
.login-error{ background:var(--danger-dim); color:var(--danger); border-radius:7px; padding:9px 11px; font-size:12px; margin-bottom:14px; display:none; }

/* Kanban */
.kanban{ display:grid; grid-template-columns:repeat(5,minmax(220px,1fr)); gap:12px; overflow-x:auto; }
.kanban-col{ background:var(--surface); border:1px solid var(--border-soft); border-radius:var(--radius); padding:10px; min-height:200px; }
.kanban-col h4{ font-size:11.5px; text-transform:uppercase; letter-spacing:.04em; color:var(--text-dim); margin-bottom:10px; padding:0 4px; display:flex; justify-content:space-between;}
.kanban-card{ background:var(--surface-2); border:1px solid var(--border); border-radius:8px; padding:10px; margin-bottom:8px; cursor:grab; font-size:12px; }
.kanban-card:hover{ border-color:var(--text-faint); }
.kanban-card .kc-title{ font-weight:600; margin-bottom:6px; }
.kanban-card .kc-meta{ display:flex; justify-content:space-between; align-items:center; }

/* Running order sequence */
.ro-list{ display:flex; flex-direction:column; gap:6px; }
.ro-item{ display:flex; align-items:center; gap:12px; background:var(--surface); border:1px solid var(--border-soft); border-radius:9px; padding:10px 14px; cursor:grab; }
.ro-item.dragging{ opacity:.4; }
.ro-item .ro-num{ font-family:var(--font-mono); font-size:14px; color:var(--accent); width:28px; }
.ro-item .ro-main{ flex:1; min-width:0; }
.ro-item .ro-name{ font-weight:600; font-size:13px; }
.ro-item .ro-meta{ font-size:11px; color:var(--text-faint); margin-top:2px; }
.ro-item .ro-time{ font-family:var(--font-mono); font-size:12px; color:var(--text-dim); width:64px; text-align:right; }
.ro-connector{ text-align:center; color:var(--text-faint); font-size:11px; padding:2px; }

/* Event day big screen */
.eventday-grid{ display:grid; grid-template-columns:1.4fr 1fr 1fr; gap:16px; }
@media(max-width:1000px){ .eventday-grid{ grid-template-columns:1fr; } }
.ed-current{ background:linear-gradient(160deg, var(--surface-2), var(--surface)); border:1px solid var(--accent-dim); border-radius:var(--radius-lg); padding:24px; }
.ed-current .ed-label{ font-size:11px; text-transform:uppercase; letter-spacing:.08em; color:var(--accent); font-weight:700; }
.ed-current h1{ font-size:30px; margin:8px 0 4px; }
.ed-timer{ font-family:var(--font-mono); font-size:42px; font-weight:700; margin-top:12px; }
.ed-side{ background:var(--surface); border:1px solid var(--border-soft); border-radius:var(--radius-lg); padding:18px; }
.ed-side .ed-label{ font-size:10.5px; text-transform:uppercase; color:var(--text-faint); letter-spacing:.06em; }
.ed-side h3{ font-size:17px; margin-top:6px; }
.ed-quick-actions{ display:flex; gap:14px; flex-wrap:wrap; margin-top:18px; }

/* Timeline */
.timeline{ position:relative; padding-left:26px; }
.timeline::before{ content:''; position:absolute; left:7px; top:4px; bottom:4px; width:2px; background:var(--border); }
.timeline-item{ position:relative; padding-bottom:18px; }
.timeline-item::before{ content:''; position:absolute; left:-26px; top:3px; width:10px; height:10px; border-radius:50%; background:var(--surface-2); border:2px solid var(--accent); }
.timeline-item .tl-time{ font-family:var(--font-mono); font-size:11.5px; color:var(--accent); }
.timeline-item .tl-title{ font-weight:600; font-size:13px; margin-top:2px; }
.timeline-item .tl-meta{ font-size:11.5px; color:var(--text-faint); margin-top:2px; }

/* Detail page */
.detail-header{ display:flex; justify-content:space-between; align-items:flex-start; gap:14px; margin-bottom:18px; flex-wrap:wrap; }
.detail-tabs{ display:flex; gap:4px; border-bottom:1px solid var(--border-soft); margin-bottom:18px; flex-wrap:wrap; }
.detail-tab{ padding:9px 14px; font-size:12.5px; font-weight:600; color:var(--text-faint); cursor:pointer; border-bottom:2px solid transparent; }
.detail-tab.active{ color:var(--text); border-color:var(--accent); }
.kv-list{ display:flex; flex-direction:column; gap:10px; }
.kv-row{ display:flex; justify-content:space-between; gap:10px; font-size:12.5px; padding:8px 0; border-bottom:1px solid var(--border-soft); }
.kv-row .k{ color:var(--text-faint); }
.kv-row .v{ text-align:right; font-weight:500; }

/* Search results */
.search-panel{ position:absolute; top:52px; right:20px; width:400px; max-height:60vh; overflow-y:auto; background:var(--surface); border:1px solid var(--border); border-radius:var(--radius); box-shadow:var(--shadow-2); z-index:150;
  animation:search-panel-in-kf .16s cubic-bezier(.2,.8,.3,1) both; }
@keyframes search-panel-in-kf{ from{ opacity:0; transform:translateY(-6px) scale(.98);} to{ opacity:1; transform:none;} }
.search-group-label{ font-size:10.5px; text-transform:uppercase; color:var(--text-faint); padding:8px 12px 4px; }
.search-result{ padding:8px 12px; cursor:pointer; font-size:12.5px; display:flex; justify-content:space-between; transition:background-color .1s ease; }
.search-result:hover{ background:var(--surface-hover); }

/* Attention list */
.attn-item{ display:flex; gap:10px; align-items:flex-start; padding:9px 0; border-bottom:1px solid var(--border-soft); font-size:12.5px; }
.attn-item:last-child{ border-bottom:none; }
.attn-icon{ flex:none; width:22px; height:22px; border-radius:6px; display:flex; align-items:center; justify-content:center; font-size:11px; }

/* Responsive nav drawer */
@media(max-width:880px){
  #sidebar{ position:fixed; z-index:250; height:100%; transform:translateX(-100%); }
  #sidebar.open{ transform:translateX(0); box-shadow:var(--shadow-2); }
  #menu-toggle{ display:inline-flex; }
  .topbar-search{ width:150px; }
  .grid-4,.grid-3,.grid-2{ grid-template-columns:1fr 1fr; }
  .eventday-grid{ grid-template-columns:1fr; }
}
@media(max-width:520px){
  .grid-4,.grid-3,.grid-2{ grid-template-columns:1fr; }
  #view-container{ padding:16px; }
  .form-grid{ grid-template-columns:1fr; }
}

/* Demo data badge */
.demo-badge{ font-size:9px; background:var(--blocked-dim); color:var(--blocked); padding:1px 5px; border-radius:5px; margin-left:6px; vertical-align:middle; }

/* Locked indicator */
.locked-banner{ display:flex; align-items:center; gap:8px; background:var(--warn-dim); color:var(--warn); border-radius:8px; padding:9px 13px; font-size:12px; margin-bottom:14px; }

/* ==========================================================================
   Animations
   ========================================================================== */

/* View transitions: subtle fade + rise whenever the route changes */
@keyframes view-refresh-out-kf{
  from{ opacity:1; transform:none; }
  to{ opacity:0; transform:scale(.992); }
}
@keyframes view-loading-in-kf{
  from{ opacity:0; transform:scale(.96); }
  to{ opacity:1; transform:scale(1); }
}
#view-container.view-refreshing{ animation:view-refresh-out-kf .18s ease both; }
#refresh-screen{ position:fixed; inset:0; z-index:999; display:flex; align-items:center; justify-content:center; background:rgba(10,12,15,.96); opacity:0; visibility:hidden; pointer-events:none; transition:opacity .24s ease, visibility 0s linear .24s; }
#refresh-screen.is-active{ opacity:1; visibility:visible; pointer-events:auto; transition:opacity .18s ease; }
.refresh-loader{ display:flex; align-items:center; gap:10px; color:var(--text-dim); font-size:12px; animation:view-loading-in-kf .2s ease both; }
@keyframes view-fade-in-kf{
  from{ opacity:0; transform:translateY(6px); }
  to{ opacity:1; transform:translateY(0); }
}
#view-container.view-fade-in{ animation:view-fade-in-kf .28s cubic-bezier(.2,.8,.3,1) both; }
@media (prefers-reduced-motion: reduce){
  #view-container.view-refreshing, .view-loading, #view-container.view-fade-in{ animation:none; }
}

/* Cards lift slightly on hover for a tactile, "clickable desk" feel */
.card{ transition:border-color .15s ease, transform .15s ease, box-shadow .15s ease; }
.card:hover{ border-color:var(--text-faint); }
.stat-card, .kanban-card, .ro-item, .timeline-item, .attn-item{ transition:transform .15s ease, background .15s ease, border-color .15s ease; }
.stat-card:hover{ border-color:var(--text-faint); box-shadow:inset 0 0 0 1px rgba(255,255,255,.04); }
.kanban-card:hover{ border-color:var(--text-faint); box-shadow:inset 0 0 0 1px rgba(255,255,255,.04); }
.ro-item:hover{ border-color:var(--text-faint); }

/* Buttons: quick press feedback */
.btn{ transition:background .12s ease, border-color .12s ease, transform .08s ease; }
.btn:active:not(:disabled){ transform:scale(.96); }

/* Nav items: smooth slide/glow on select */
.nav-item{ transition:background .15s ease, color .15s ease, padding-left .15s ease; }
.nav-item.active{ animation:nav-pop .22s ease; }
@keyframes nav-pop{ from{ padding-left:6px; } to{ padding-left:10px; } }

/* Modals: pop in rather than snap in */
@keyframes modal-pop-kf{
  from{ opacity:0; transform:translateY(10px) scale(.98); }
  to{ opacity:1; transform:translateY(0) scale(1); }
}
.modal-anim{ animation:modal-pop-kf .18s cubic-bezier(.2,.8,.3,1) both; }
@keyframes backdrop-fade-kf{ from{ opacity:0; } to{ opacity:1; } }
.modal-backdrop{ animation:backdrop-fade-kf .15s ease both; }

/* Toasts: slide/fade in and out */
.toast-anim{ animation:toast-in-kf .2s cubic-bezier(.2,.8,.3,1) both; }
@keyframes toast-in-kf{ from{ opacity:0; transform:translateY(8px) scale(.98); } to{ opacity:1; transform:none; } }
.toast.toast-out{ animation:toast-out-kf .2s ease both; }
@keyframes toast-out-kf{ from{ opacity:1; transform:none; } to{ opacity:0; transform:translateY(6px) scale(.98); } }

/* VU meter segments light up with a quick stagger for a "metering" feel */
.vu-seg{ transition:background-color .25s ease; }

/* Pills: gentle pop when a status changes (re-applied via class toggle if needed) */
.pill{ transition:background-color .2s ease, color .2s ease; }

/* Countdown mini box gets a soft pulsing glow to draw the eye */
@keyframes cd-pulse-kf{ 0%,100%{ box-shadow:0 0 0 rgba(232,163,61,0); } 50%{ box-shadow:0 0 12px rgba(232,163,61,.15); } }
#event-countdown-mini{ animation:cd-pulse-kf 4s ease-in-out infinite; }

/* Skeleton loaders already pulse via existing .skeleton animation above */

/* Sidebar drawer slide (mobile) already animates via transform transition on #sidebar */

/* Respect users who prefer reduced motion */
@media (prefers-reduced-motion: reduce){
  *, *::before, *::after{ animation-duration:0.001ms !important; animation-iteration-count:1 !important; transition-duration:0.001ms !important; }
}

/* ==========================================================================
   Staggered entrance animations for lists/grids/tables
   Each row/card fades and rises in with a slight incremental delay so a
   freshly-rendered list feels like it's "settling into place" rather than
   popping in all at once.
   ========================================================================== */
@keyframes stagger-in-kf{ from{ opacity:0; transform:translateY(5px); } to{ opacity:1; transform:none; } }
.data-table tbody tr,
.grid > *,
.kanban-card,
.ro-item,
.timeline-item,
.attn-item,
.search-result{
  animation:stagger-in-kf .28s cubic-bezier(.2,.8,.3,1) backwards;
}

/* ==========================================================================
   Custom scrollbar (refined)
   ========================================================================== */
*{ scrollbar-width:thin; scrollbar-color:var(--surface-2) transparent; }
::-webkit-scrollbar{ width:10px; height:10px; }
::-webkit-scrollbar-track{ background:transparent; }
::-webkit-scrollbar-thumb{
  background:var(--surface-2); border-radius:8px; border:2px solid var(--bg);
  transition:background-color .15s ease;
}
::-webkit-scrollbar-thumb:hover{ background:var(--border); }
#view-container::-webkit-scrollbar-thumb{ border-color:var(--bg); }
.custom-select-menu::-webkit-scrollbar{ width:8px; }
.custom-select-menu::-webkit-scrollbar-thumb{ border-width:1px; }

/* ==========================================================================
   Custom inputs, textareas, checkboxes
   ========================================================================== */
input[type=text], input[type=search], input[type=number], input[type=date],
input[type=time], input[type=email], input[type=password], textarea{
  transition:border-color .15s ease, box-shadow .15s ease, background-color .15s ease;
}
input[type=text]:hover, input[type=search]:hover, input[type=number]:hover, input[type=date]:hover,
input[type=time]:hover, input[type=email]:hover, input[type=password]:hover, textarea:hover{
  border-color:var(--text-faint);
}
input[type=text]:focus, input[type=search]:focus, input[type=number]:focus, input[type=date]:focus,
input[type=time]:focus, input[type=email]:focus, input[type=password]:focus, textarea:focus{
  border-color:var(--accent);
  box-shadow:inset 0 1px 2px rgba(0,0,0,0.18), 0 0 0 3px var(--accent-glow);
  outline:none;
}

/* One custom surface owns the state of every decorated input. The native
   control remains functional, but never paints its own browser chrome. */
.input-control{
  padding:3px; background:var(--surface); border:1px solid var(--border); border-radius:10px;
  box-shadow:inset 0 1px 2px rgba(0,0,0,.22); transition:background-color .16s ease, border-color .16s ease, box-shadow .16s ease, transform .12s ease;
}
.input-control:hover{ background:var(--surface-hover); border-color:var(--text-faint); box-shadow:inset 0 1px 2px rgba(0,0,0,.22), inset 0 0 0 1px rgba(255,255,255,.04); }
.input-control:focus-within{ border-color:var(--accent); box-shadow:inset 0 1px 2px rgba(0,0,0,.22), 0 0 0 3px var(--accent-glow), 0 8px 22px rgba(0,0,0,.18); }
.input-control > input,
.input-control > input:hover,
.input-control > input:focus{
  border:0 !important; background:transparent !important; box-shadow:none !important; outline:0 !important;
}
.input-control > input:focus-visible{ outline:0 !important; }
.input-control:has(> input:disabled){ opacity:.55; cursor:not-allowed; }
.input-control:has(> input:disabled):hover{ background:var(--surface); border-color:var(--border); box-shadow:inset 0 1px 2px rgba(0,0,0,.22); }
button:hover, button:focus, button:focus-visible,
input:hover, input:focus, input:focus-visible,
textarea:hover, textarea:focus, textarea:focus-visible,
select:hover, select:focus, select:focus-visible{ outline:none !important; }
button:focus-visible, .custom-select-trigger:focus-visible, .picker-button:focus-visible, .input-stepper-button:focus-visible, .input-picker-button:focus-visible{
  box-shadow:0 0 0 3px var(--accent-glow) !important;
}
.login-card input, .topbar-search input, textarea{
  border:1px solid var(--border); border-radius:10px; background:linear-gradient(180deg,var(--surface-2),var(--surface));
  box-shadow:inset 0 1px 2px rgba(0,0,0,.22); transition:background-color .16s ease, border-color .16s ease, box-shadow .16s ease, transform .12s ease;
}
.login-card input:hover, .topbar-search input:hover, textarea:hover{
  background:var(--surface-hover); border-color:var(--text-faint); box-shadow:inset 0 1px 2px rgba(0,0,0,.22), inset 0 0 0 1px rgba(255,255,255,.04);
}
.login-card input:focus, .topbar-search input:focus, textarea:focus{
  border-color:var(--accent); box-shadow:inset 0 1px 2px rgba(0,0,0,.22), 0 0 0 3px var(--accent-glow), 0 8px 22px rgba(0,0,0,.18) !important; outline:none !important;
}

/* Custom checkbox */
input[type=checkbox]{
  appearance:none; -webkit-appearance:none; width:17px; height:17px; border-radius:5px;
  border:1px solid var(--border); background:var(--surface); cursor:pointer; position:relative;
  flex:none; vertical-align:middle;
  transition:background-color .15s ease, border-color .15s ease, transform .08s ease;
}
input[type=checkbox]:hover{ border-color:var(--text-faint); }
input[type=checkbox]:checked{ background:var(--accent); border-color:var(--accent); }
input[type=checkbox]:checked::after{
  content:''; position:absolute; left:5px; top:2px; width:4px; height:8px;
  border:solid #1a1103; border-width:0 2px 2px 0; transform:rotate(45deg);
  animation:checkbox-pop-kf .16s cubic-bezier(.2,.8,.3,1) both;
}
@keyframes checkbox-pop-kf{ from{ opacity:0; transform:rotate(45deg) scale(.4);} to{ opacity:1; transform:rotate(45deg) scale(1);} }
input[type=checkbox]:active{ transform:scale(.9); }
input[type=checkbox]:focus-visible{ outline:2px solid var(--accent); outline-offset:2px; }

/* Hide any remaining native <select> that hasn't been swapped (fallback safety net) */
select{ transition:border-color .15s ease, box-shadow .15s ease; }
select:focus{ border-color:var(--accent); box-shadow:0 0 0 3px var(--accent-glow); outline:none; }

/* ==========================================================================
   Custom dropdown (replaces native <select>)
   ========================================================================== */
.custom-select{ position:relative; display:inline-block; width:100%; }
.custom-select-trigger{
  width:100%; display:flex; align-items:center; justify-content:space-between; gap:8px;
  min-height:38px; background:linear-gradient(180deg,var(--surface-2),var(--surface)); border:1px solid var(--border); border-radius:8px; color:var(--text);
  padding:9px 12px; font-size:12.5px; font-family:inherit; font-weight:500; cursor:pointer; text-align:left;
  transition:border-color .15s ease, background-color .15s ease, box-shadow .15s ease;
}
.custom-select-trigger:hover{ border-color:var(--text-faint); }
.custom-select-trigger.open{ border-color:var(--accent); box-shadow:0 0 0 3px var(--accent-glow); }
.custom-select-trigger.is-disabled, .custom-select-trigger:disabled{ opacity:.5; cursor:not-allowed; }
.custom-select .cs-label{ overflow:hidden; text-overflow:ellipsis; white-space:nowrap; flex:1; text-align:left; }
.custom-select .cs-arrow{ font-size:9px; color:var(--text-faint); transition:transform .18s ease; flex:none; }
.custom-select-trigger.open .cs-arrow{ transform:rotate(180deg); color:var(--accent); }

.custom-select-menu{
  position:fixed; z-index:1000;
  background:var(--surface-2); border:1px solid var(--border); border-radius:9px;
  box-shadow:0 16px 40px rgba(0,0,0,.45); max-height:280px; overflow-y:auto; padding:6px;
  opacity:0; transform:translateY(-6px) scale(.98); transform-origin:top center;
  transition:opacity .16s cubic-bezier(.2,.8,.3,1), transform .16s cubic-bezier(.2,.8,.3,1);
  min-width:120px;
}
.custom-select-menu.cs-menu-open{ opacity:1; transform:translateY(0) scale(1); }
.custom-select-menu.cs-menu-closing{ opacity:0; transform:translateY(-6px) scale(.98); }
.custom-select-menu.cs-menu-up{ transform-origin:bottom center; }
.custom-select-menu.cs-menu-up.cs-menu-open{ transform:translateY(0) scale(1); }
.custom-select-menu.cs-menu-up:not(.cs-menu-open){ transform:translateY(6px) scale(.98); }

.cs-option{
  min-height:34px; display:flex; align-items:center; padding:7px 11px; border-radius:7px; font-size:12.5px; cursor:pointer;
  transition:background-color .1s ease, color .1s ease; white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
}
.cs-option:hover{ background:var(--surface-hover); }
.cs-option.selected{ background:var(--accent-glow); color:var(--accent); font-weight:600; }

/* ==========================================================================
   Custom notifications (toast) - redesigned
   ========================================================================== */
#toast-stack{ position:fixed; bottom:18px; right:18px; z-index:400; display:flex; flex-direction:column; gap:10px; }
.toast{
  position:relative; overflow:hidden; background:var(--surface-2); border:1px solid var(--border);
  padding:12px 34px 12px 14px; border-radius:10px; font-size:12.5px; box-shadow:var(--shadow-2);
  min-width:240px; max-width:360px; display:flex; align-items:flex-start; gap:10px;
}
.toast-icon{
  flex:none; width:20px; height:20px; border-radius:50%; display:flex; align-items:center; justify-content:center;
  font-size:11px; font-weight:700; margin-top:1px;
  background:var(--surface); color:var(--text-dim);
}
.toast.ok .toast-icon{ background:var(--ok-dim); color:var(--ok); }
.toast.err .toast-icon{ background:var(--danger-dim); color:var(--danger); }
.toast.info .toast-icon{ background:var(--info-dim); color:var(--info); }
.toast.ok{ border-color:rgba(69,183,135,.35); }
.toast.err{ border-color:rgba(232,97,93,.35); }
.toast.info{ border-color:rgba(91,157,217,.35); }
.toast-msg{ flex:1; line-height:1.4; padding-top:1px; }
.toast-close{
  position:absolute; top:8px; right:8px; width:18px; height:18px; border:none; background:transparent;
  color:var(--text-faint); font-size:10px; cursor:pointer; border-radius:5px; display:flex; align-items:center; justify-content:center;
  transition:background-color .12s ease, color .12s ease;
}
.toast-close:hover{ background:var(--surface-hover); color:var(--text); }
.toast-progress{
  position:absolute; left:0; bottom:0; height:2px; width:100%; transform-origin:left center;
  background:var(--accent-dim);
  animation-name:toast-shrink-kf; animation-timing-function:linear; animation-fill-mode:forwards;
}

/* Final hover contract: hover never changes layout and never paints outside
   the component box. Focus remains separate for keyboard accessibility. */
.card:hover,
.stat-card:hover,
.kanban-card:hover,
.ro-item:hover,
.timeline-item:hover,
.attn-item:hover,
.btn:hover,
.repeatable-add-button:hover,
.input-control:hover,
.textarea-control:hover,
.login-card input:hover,
.topbar-search input:hover,
textarea:hover,
.custom-select-trigger:hover,
.cs-option:hover,
.picker-button:hover,
.input-stepper-button:hover,
.input-picker-button:hover,
.search-result:hover,
.nav-item:hover,
.user-chip:hover{
  transform:none !important;
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.045) !important;
  outline:none !important;
}
.card:hover,
.stat-card:hover,
.kanban-card:hover,
.ro-item:hover,
.timeline-item:hover,
.attn-item:hover,
.btn:hover,
.input-control:hover,
.textarea-control:hover,
.login-card input:hover,
.topbar-search input:hover,
textarea:hover,
.custom-select-trigger:hover,
.cs-option:hover,
.picker-button:hover,
.input-stepper-button:hover,
.input-picker-button:hover{
  border-color:var(--text-faint);
}
.nav-item:hover,.user-chip:hover,.search-result:hover,.cs-option:hover,.picker-button:hover,
.input-stepper-button:hover,.input-picker-button:hover{ box-shadow:none !important; }
.toast.ok .toast-progress{ background:var(--ok); }
.toast.err .toast-progress{ background:var(--danger); }
.toast.info .toast-progress{ background:var(--info); }
@keyframes toast-shrink-kf{ from{ transform:scaleX(1);} to{ transform:scaleX(0);} }


/* Generated stagger delays (nth-child 1-25) */
.data-table tbody tr:nth-child(1), .grid > *:nth-child(1), .kanban-card:nth-child(1), .ro-item:nth-child(1), .timeline-item:nth-child(1), .attn-item:nth-child(1), .search-result:nth-child(1){ animation-delay:25ms; }
.data-table tbody tr:nth-child(2), .grid > *:nth-child(2), .kanban-card:nth-child(2), .ro-item:nth-child(2), .timeline-item:nth-child(2), .attn-item:nth-child(2), .search-result:nth-child(2){ animation-delay:50ms; }
.data-table tbody tr:nth-child(3), .grid > *:nth-child(3), .kanban-card:nth-child(3), .ro-item:nth-child(3), .timeline-item:nth-child(3), .attn-item:nth-child(3), .search-result:nth-child(3){ animation-delay:75ms; }
.data-table tbody tr:nth-child(4), .grid > *:nth-child(4), .kanban-card:nth-child(4), .ro-item:nth-child(4), .timeline-item:nth-child(4), .attn-item:nth-child(4), .search-result:nth-child(4){ animation-delay:100ms; }
.data-table tbody tr:nth-child(5), .grid > *:nth-child(5), .kanban-card:nth-child(5), .ro-item:nth-child(5), .timeline-item:nth-child(5), .attn-item:nth-child(5), .search-result:nth-child(5){ animation-delay:125ms; }
.data-table tbody tr:nth-child(6), .grid > *:nth-child(6), .kanban-card:nth-child(6), .ro-item:nth-child(6), .timeline-item:nth-child(6), .attn-item:nth-child(6), .search-result:nth-child(6){ animation-delay:150ms; }
.data-table tbody tr:nth-child(7), .grid > *:nth-child(7), .kanban-card:nth-child(7), .ro-item:nth-child(7), .timeline-item:nth-child(7), .attn-item:nth-child(7), .search-result:nth-child(7){ animation-delay:175ms; }
.data-table tbody tr:nth-child(8), .grid > *:nth-child(8), .kanban-card:nth-child(8), .ro-item:nth-child(8), .timeline-item:nth-child(8), .attn-item:nth-child(8), .search-result:nth-child(8){ animation-delay:200ms; }
.data-table tbody tr:nth-child(9), .grid > *:nth-child(9), .kanban-card:nth-child(9), .ro-item:nth-child(9), .timeline-item:nth-child(9), .attn-item:nth-child(9), .search-result:nth-child(9){ animation-delay:225ms; }
.data-table tbody tr:nth-child(10), .grid > *:nth-child(10), .kanban-card:nth-child(10), .ro-item:nth-child(10), .timeline-item:nth-child(10), .attn-item:nth-child(10), .search-result:nth-child(10){ animation-delay:250ms; }
.data-table tbody tr:nth-child(11), .grid > *:nth-child(11), .kanban-card:nth-child(11), .ro-item:nth-child(11), .timeline-item:nth-child(11), .attn-item:nth-child(11), .search-result:nth-child(11){ animation-delay:275ms; }
.data-table tbody tr:nth-child(12), .grid > *:nth-child(12), .kanban-card:nth-child(12), .ro-item:nth-child(12), .timeline-item:nth-child(12), .attn-item:nth-child(12), .search-result:nth-child(12){ animation-delay:300ms; }
.data-table tbody tr:nth-child(13), .grid > *:nth-child(13), .kanban-card:nth-child(13), .ro-item:nth-child(13), .timeline-item:nth-child(13), .attn-item:nth-child(13), .search-result:nth-child(13){ animation-delay:325ms; }
.data-table tbody tr:nth-child(14), .grid > *:nth-child(14), .kanban-card:nth-child(14), .ro-item:nth-child(14), .timeline-item:nth-child(14), .attn-item:nth-child(14), .search-result:nth-child(14){ animation-delay:350ms; }
.data-table tbody tr:nth-child(15), .grid > *:nth-child(15), .kanban-card:nth-child(15), .ro-item:nth-child(15), .timeline-item:nth-child(15), .attn-item:nth-child(15), .search-result:nth-child(15){ animation-delay:375ms; }
.data-table tbody tr:nth-child(16), .grid > *:nth-child(16), .kanban-card:nth-child(16), .ro-item:nth-child(16), .timeline-item:nth-child(16), .attn-item:nth-child(16), .search-result:nth-child(16){ animation-delay:400ms; }
.data-table tbody tr:nth-child(17), .grid > *:nth-child(17), .kanban-card:nth-child(17), .ro-item:nth-child(17), .timeline-item:nth-child(17), .attn-item:nth-child(17), .search-result:nth-child(17){ animation-delay:425ms; }
.data-table tbody tr:nth-child(18), .grid > *:nth-child(18), .kanban-card:nth-child(18), .ro-item:nth-child(18), .timeline-item:nth-child(18), .attn-item:nth-child(18), .search-result:nth-child(18){ animation-delay:450ms; }
.data-table tbody tr:nth-child(19), .grid > *:nth-child(19), .kanban-card:nth-child(19), .ro-item:nth-child(19), .timeline-item:nth-child(19), .attn-item:nth-child(19), .search-result:nth-child(19){ animation-delay:475ms; }
.data-table tbody tr:nth-child(20), .grid > *:nth-child(20), .kanban-card:nth-child(20), .ro-item:nth-child(20), .timeline-item:nth-child(20), .attn-item:nth-child(20), .search-result:nth-child(20){ animation-delay:500ms; }
.data-table tbody tr:nth-child(21), .grid > *:nth-child(21), .kanban-card:nth-child(21), .ro-item:nth-child(21), .timeline-item:nth-child(21), .attn-item:nth-child(21), .search-result:nth-child(21){ animation-delay:525ms; }
.data-table tbody tr:nth-child(22), .grid > *:nth-child(22), .kanban-card:nth-child(22), .ro-item:nth-child(22), .timeline-item:nth-child(22), .attn-item:nth-child(22), .search-result:nth-child(22){ animation-delay:550ms; }
.data-table tbody tr:nth-child(23), .grid > *:nth-child(23), .kanban-card:nth-child(23), .ro-item:nth-child(23), .timeline-item:nth-child(23), .attn-item:nth-child(23), .search-result:nth-child(23){ animation-delay:575ms; }
.data-table tbody tr:nth-child(24), .grid > *:nth-child(24), .kanban-card:nth-child(24), .ro-item:nth-child(24), .timeline-item:nth-child(24), .attn-item:nth-child(24), .search-result:nth-child(24){ animation-delay:600ms; }
.data-table tbody tr:nth-child(25), .grid > *:nth-child(25), .kanban-card:nth-child(25), .ro-item:nth-child(25), .timeline-item:nth-child(25), .attn-item:nth-child(25), .search-result:nth-child(25){ animation-delay:625ms; }