/* ============================================================
   UP Ops — Design Tokens & Global Styles
   Loaded via <link> in head.html on every page.
   ============================================================ */

:root {
  /* Surface scale */
  --surface-0: #020617;
  --surface-1: #0F172A;
  --surface-2: #1E293B;
  --surface-3: #334155;

  /* Border scale */
  --border-subtle:  #1E293B;
  --border-default: #334155;
  --border-strong:  #475569;

  /* Text scale */
  --text-primary:  #F1F5F9; /* slate-100 */
  --text-muted:    #94A3B8; /* slate-400 */
  --text-subtle:   #64748B; /* slate-500 */

  /* Severity — info */
  --severity-info-bg:     rgba(59,130,246,0.10);
  --severity-info-border: rgba(59,130,246,0.35);
  --severity-info-fg:     #60A5FA;

  /* Severity — warn */
  --severity-warn-bg:     rgba(245,158,11,0.10);
  --severity-warn-border: rgba(245,158,11,0.35);
  --severity-warn-fg:     #FBBF24;

  /* Severity — danger */
  --severity-danger-bg:     rgba(239,68,68,0.10);
  --severity-danger-border: rgba(239,68,68,0.40);
  --severity-danger-fg:     #F87171;

  /* Severity — success */
  --severity-success-bg:     rgba(16,185,129,0.10);
  --severity-success-border: rgba(16,185,129,0.35);
  --severity-success-fg:     #34D399;

  /* Brand */
  --brand:       #3B82F6;
  --brand-hover: #2563EB;

  /* Sidebar geometry (read by JS for content padding) */
  --sidebar-width-expanded: 16rem; /* 256px */
  --sidebar-width-collapsed: 4rem; /* 64px */
  --topbar-height: 3.5rem; /* 56px */
}

/* ============================================================
   Keyframes (raw, also registered in tailwind.config animation)
   ============================================================ */

@keyframes pulse-critical {
  0%, 100% { box-shadow: 0 0 0 0 rgba(239,68,68,0.55); }
  50%      { box-shadow: 0 0 0 8px rgba(239,68,68,0.00); }
}

@keyframes tick {
  0%   { transform: translateY(-4px); opacity: 0; }
  100% { transform: translateY(0);    opacity: 1; }
}

@keyframes count-up {
  0%   { opacity: 0.4; }
  100% { opacity: 1;   }
}

@keyframes shimmer {
  0%   { background-position: -468px 0; }
  100% { background-position:  468px 0; }
}

@keyframes fade-in {
  from { opacity: 0; }
  to   { opacity: 1; }
}

/* ============================================================
   Dark theme base — explicit fallback не зависящий от Tailwind JIT.
   Tailwind Play CDN не всегда генерирует bg-surface-0 для numeric-ключей,
   поэтому страховка через CSS-переменные.
   ============================================================ */

html,
html.dark {
  background-color: var(--surface-0);
  color: var(--text-primary);
  color-scheme: dark;
}

body {
  background-color: var(--surface-0);
  color: var(--text-primary);
  min-height: 100vh;
}

/* Fallback для кастомных surface/border классов на случай, если Tailwind JIT их не сгенерил */
.bg-surface-0 { background-color: var(--surface-0); }
.bg-surface-1 { background-color: var(--surface-1); }
.bg-surface-2 { background-color: var(--surface-2); }
.bg-surface-3 { background-color: var(--surface-3); }

.border-border-subtle { border-color: var(--border-subtle); }
.border-border        { border-color: var(--border-default); }
.border-border-strong { border-color: var(--border-strong); }

.hover\:border-border-strong:hover { border-color: var(--border-strong); }
.hover\:border-border:hover        { border-color: var(--border-default); }

/* Severity utility fallbacks */
.bg-severity-info-bg    { background-color: var(--severity-info-bg); }
.bg-severity-warn-bg    { background-color: var(--severity-warn-bg); }
.bg-severity-danger-bg  { background-color: var(--severity-danger-bg); }
.bg-severity-success-bg { background-color: var(--severity-success-bg); }

.text-severity-info-fg    { color: var(--severity-info-fg); }
.text-severity-warn-fg    { color: var(--severity-warn-fg); }
.text-severity-danger-fg  { color: var(--severity-danger-fg); }
.text-severity-success-fg { color: var(--severity-success-fg); }

.border-severity-info-border    { border-color: var(--severity-info-border); }
.border-severity-warn-border    { border-color: var(--severity-warn-border); }
.border-severity-danger-border  { border-color: var(--severity-danger-border); }
.border-severity-success-border { border-color: var(--severity-success-border); }

/* Brand */
.text-brand    { color: var(--brand); }
.bg-brand      { background-color: var(--brand); }
.border-brand  { border-color: var(--brand); }

/* ============================================================
   Selection color
   ============================================================ */

::selection {
  background-color: rgba(59,130,246,0.35);
  color: #F1F5F9;
}

/* ============================================================
   Custom scrollbar (Webkit + Firefox)
   ============================================================ */

* {
  scrollbar-width: thin;
  scrollbar-color: var(--border-strong) transparent;
}

*::-webkit-scrollbar {
  width: 10px;
  height: 10px;
}

*::-webkit-scrollbar-track {
  background: transparent;
}

*::-webkit-scrollbar-thumb {
  background: var(--border-default);
  border-radius: 999px;
  border: 2px solid transparent;
  background-clip: padding-box;
}

*::-webkit-scrollbar-thumb:hover {
  background: var(--border-strong);
  background-clip: padding-box;
  border: 2px solid transparent;
}

*::-webkit-scrollbar-corner {
  background: transparent;
}

/* ============================================================
   Focus-visible — global stylings (Tailwind не покрывает все)
   ============================================================ */

:focus-visible {
  outline: 2px solid var(--brand);
  outline-offset: 2px;
  border-radius: 6px;
}

/* Buttons, inputs — Tailwind utility classes preferred,
   but ensure no outline removal regression */
button:focus-visible,
a:focus-visible,
[role="button"]:focus-visible,
[tabindex]:focus-visible {
  outline: 2px solid var(--brand);
  outline-offset: 2px;
}

/* Inputs use box-shadow-style focus (no outline-offset on inset elements) */
input:focus-visible,
textarea:focus-visible,
select:focus-visible {
  outline: none;
  box-shadow: 0 0 0 2px var(--surface-0), 0 0 0 4px var(--brand);
}

/* ============================================================
   Glassmorphism utility (light)
   ============================================================ */

.glass {
  background: rgba(255, 255, 255, 0.04);
  backdrop-filter: blur(12px) saturate(160%);
  -webkit-backdrop-filter: blur(12px) saturate(160%);
  border: 1px solid rgba(255, 255, 255, 0.06);
}

/* ============================================================
   Tabular numerics for data cells
   ============================================================ */

.tabular {
  font-variant-numeric: tabular-nums;
  font-feature-settings: 'tnum';
}

/* ============================================================
   Skeleton shimmer
   ============================================================ */

.skeleton {
  background: linear-gradient(
    90deg,
    var(--surface-1) 0%,
    var(--surface-2) 50%,
    var(--surface-1) 100%
  );
  background-size: 936px 100%;
  animation: shimmer 1.4s linear infinite;
  border-radius: 6px;
}

/* ============================================================
   Sidebar collapsed-state tooltip (CSS-only, no JS)
   ============================================================ */

[data-sidebar-state="collapsed"] .sidebar-item {
  position: relative;
}

[data-sidebar-state="collapsed"] .sidebar-item::after {
  content: attr(data-tooltip);
  position: absolute;
  left: calc(100% + 8px);
  top: 50%;
  transform: translateY(-50%);
  padding: 4px 10px;
  background: var(--surface-3);
  color: var(--text-primary);
  font-size: 12px;
  font-weight: 500;
  border-radius: 6px;
  white-space: nowrap;
  pointer-events: none;
  opacity: 0;
  transition: opacity 150ms ease-out;
  box-shadow: 0 4px 12px rgba(0,0,0,0.4);
  z-index: 50;
}

[data-sidebar-state="collapsed"] .sidebar-item:hover::after,
[data-sidebar-state="collapsed"] .sidebar-item:focus-visible::after {
  opacity: 1;
}

/* ============================================================
   Sidebar collapsed — hide labels, badges, avatar; keep toggle visible
   ============================================================ */

[data-sidebar-state="collapsed"] .sidebar-label,
[data-sidebar-state="collapsed"] .sidebar-section-title,
[data-sidebar-state="collapsed"] .sidebar-badge,
[data-sidebar-state="collapsed"] .sidebar-brand-text,
[data-sidebar-state="collapsed"] .sidebar-footer-text,
[data-sidebar-state="collapsed"] .sidebar-footer-avatar {
  display: none;
}

[data-sidebar-state="collapsed"] .sidebar-item {
  justify-content: center;
}

/* Rotate toggle icon 180° in collapsed state — same SVG, semantic flip:
   < (collapse) → > (expand). Plus update aria-label is done in init.js. */
[data-sidebar-state="collapsed"] .sidebar-toggle-icon {
  transform: scaleX(-1);
}

/* ============================================================
   Reduced motion — respect user preference
   ============================================================ */

@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}

/* ============================================================
   Viewport-too-small gate (rendered by init.js)
   ============================================================ */

#viewport-too-small {
  display: none;
}

@media (max-width: 1023px) {
  body[data-shell-ready="true"] #upops-shell {
    display: none !important;
  }
  body[data-shell-ready="true"] #viewport-too-small {
    display: flex !important;
  }
}

/* ============================================================
   Body lock when modal/drawer open
   ============================================================ */

body.scroll-locked {
  overflow: hidden;
  padding-right: var(--scrollbar-width, 0);
}