/* ============================================================================
   Cube D — Global design-system stylesheet.
   Premium dark luxury theme: metallic gold + matte black + silver, derived
   directly from the Cube D brand mark. Loaded on every page.
   ============================================================================ */

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

:root {
  --gold: #C9A227;
  --gold-glow: #F0C93D;
  --gold-light: #E6C965;
  --ink-950: #0B0B0C;
  --ink-900: #0F1012;
  --ink-800: #181A1D;
  --ink-700: #232428;
  --ink-600: #33343A;
  --silver: #9CA3AF;
}

* { box-sizing: border-box; }

html, body {
  background: var(--ink-950);
  color: #F4F4F5;
  font-family: 'Inter', ui-sans-serif, system-ui, sans-serif;
  -webkit-font-smoothing: antialiased;
  scroll-behavior: smooth;
}

/* ---------------------------------------------------------------------------
   Layered background — never a single flat black. Subtle radial gold glow
   in the top-left plus a fine grain-like grid gives the app depth.
--------------------------------------------------------------------------- */
.app-bg {
  background-color: var(--ink-950);
  background-image:
    radial-gradient(circle at 15% -10%, rgba(240, 201, 61, 0.08), transparent 45%),
    radial-gradient(circle at 100% 0%, rgba(201, 162, 39, 0.05), transparent 40%),
    linear-gradient(180deg, #0F1012 0%, #0B0B0C 100%);
  min-height: 100vh;
}

/* ---------------------------------------------------------------------------
   Scrollbars — thin, dark, gold-on-hover.
--------------------------------------------------------------------------- */
::-webkit-scrollbar { width: 8px; height: 8px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb {
  background: var(--ink-600);
  border-radius: 8px;
}
::-webkit-scrollbar-thumb:hover { background: var(--gold); }

/* ---------------------------------------------------------------------------
   Glassmorphism card — used on login screen and modals.
--------------------------------------------------------------------------- */
.glass-card {
  background: linear-gradient(180deg, rgba(24,26,29,0.85) 0%, rgba(15,16,18,0.92) 100%);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  border: 1px solid rgba(201, 162, 39, 0.18);
  box-shadow: 0 1px 0 0 rgba(255,255,255,0.04) inset, 0 24px 60px -20px rgba(0,0,0,0.7);
}

/* Thin gold accent line along the top edge of premium cards. */
.gold-accent-top {
  position: relative;
}
.gold-accent-top::before {
  content: '';
  position: absolute;
  top: 0; left: 16px; right: 16px;
  height: 2px;
  background: linear-gradient(90deg, transparent, var(--gold) 20%, var(--gold-glow) 50%, var(--gold) 80%, transparent);
  border-radius: 2px;
  opacity: 0.9;
}

/* ---------------------------------------------------------------------------
   Ambient gold glow blobs for the login page background.
--------------------------------------------------------------------------- */
.ambient-glow {
  position: absolute;
  border-radius: 50%;
  filter: blur(80px);
  pointer-events: none;
  opacity: 0.35;
}

/* ---------------------------------------------------------------------------
   Loading skeleton shimmer.
--------------------------------------------------------------------------- */
.skeleton {
  background: linear-gradient(90deg, var(--ink-800) 25%, var(--ink-700) 37%, var(--ink-800) 63%);
  background-size: 700px 100%;
  animation: shimmer 1.8s linear infinite;
  border-radius: 8px;
}
@keyframes shimmer {
  0% { background-position: -350px 0; }
  100% { background-position: 350px 0; }
}

/* ---------------------------------------------------------------------------
   Focus ring — gold, accessible, consistent everywhere.
--------------------------------------------------------------------------- */
.focus-gold:focus-visible {
  outline: 2px solid var(--gold-glow);
  outline-offset: 2px;
}
a:focus-visible, button:focus-visible, input:focus-visible, select:focus-visible, textarea:focus-visible {
  outline: 2px solid var(--gold-glow);
  outline-offset: 2px;
}

/* ---------------------------------------------------------------------------
   Sidebar nav active indicator.
--------------------------------------------------------------------------- */
.nav-active {
  background: linear-gradient(90deg, rgba(201,162,39,0.16), rgba(201,162,39,0.02));
  border-left: 2px solid var(--gold);
  color: #F5E9BF;
}

/* ---------------------------------------------------------------------------
   Table styling helpers.
--------------------------------------------------------------------------- */
.table-row-hover:hover { background: rgba(201,162,39,0.045); }
.table-zebra:nth-child(even) { background: rgba(255,255,255,0.015); }

/* ---------------------------------------------------------------------------
   Small utility transitions used across interactive elements.
--------------------------------------------------------------------------- */
.transition-premium { transition: all 0.18s cubic-bezier(0.4, 0, 0.2, 1); }

/* Toast / modal entrance */
@keyframes toastIn {
  from { opacity: 0; transform: translateY(-8px) scale(0.98); }
  to { opacity: 1; transform: translateY(0) scale(1); }
}
.toast-enter { animation: toastIn 0.25s cubic-bezier(0.4,0,0.2,1); }

@keyframes modalIn {
  from { opacity: 0; transform: scale(0.96) translateY(8px); }
  to { opacity: 1; transform: scale(1) translateY(0); }
}
.modal-enter { animation: modalIn 0.22s cubic-bezier(0.4,0,0.2,1); }

/* Page-level fade for SSR page loads (kept subtle, no jank). */
@keyframes pageFade {
  from { opacity: 0; }
  to { opacity: 1; }
}
.page-fade { animation: pageFade 0.3s ease-out; }

/* Badge dot pulse for live status indicators. */
@keyframes pulseDot {
  0%, 100% { box-shadow: 0 0 0 0 rgba(34,166,105,0.5); }
  50% { box-shadow: 0 0 0 4px rgba(34,166,105,0); }
}
.pulse-dot { animation: pulseDot 2s infinite; }

/* Sidebar collapse transition */
.sidebar-transition { transition: width 0.22s cubic-bezier(0.4,0,0.2,1); }

/* Kbd shortcut chip */
kbd.kbd-chip {
  font-family: 'Inter', sans-serif;
  font-size: 11px;
  padding: 2px 6px;
  border-radius: 5px;
  background: var(--ink-700);
  border: 1px solid var(--ink-600);
  color: var(--silver);
}