/* Raman Busy - design tokens + global look.
   Tailwind (CDN) supplies utilities; this file sets the theme and restyles the common elements
   (cards, tables, inputs, buttons) so every page shares one look in light and dark mode. */

:root {
  --bg: #f3f6fb;
  --surface: #ffffff;
  --surface-2: #f8fafc;
  --surface-3: #eef2f8;
  --hover: #f1f5fb;
  --border: #e2e8f1;
  --text: #0f172a;
  --text-2: #334155;
  --muted: #64748b;
  --muted-2: #7a8aa3;
  --brand: #2563eb;
  --brand-2: #4f46e5;
  --brand-soft: rgba(37, 99, 235, 0.09);
  --accent: #d97706;
  --ok: #059669;
  --bad: #dc2626;
  --shadow-sm: 0 1px 2px rgba(15, 23, 42, 0.05), 0 1px 3px rgba(15, 23, 42, 0.04);
  --shadow-md: 0 8px 24px -8px rgba(15, 23, 42, 0.12), 0 2px 6px rgba(15, 23, 42, 0.05);
  --radius: 14px;
  --link: #1d4ed8;
  color-scheme: light;
}

html.dark {
  --bg: #0a1120;
  --surface: #111a2e;
  --surface-2: #0e1628;
  --surface-3: #19243d;
  --hover: #16223a;
  --border: #22304d;
  --text: #e8eef9;
  --text-2: #c3cfe3;
  --muted: #94a3b8;
  --muted-2: #8497b3;
  --brand: #60a5fa;
  --brand-2: #818cf8;
  --brand-soft: rgba(96, 165, 250, 0.14);
  --accent: #fbbf24;
  --ok: #34d399;
  --bad: #f87171;
  --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.4);
  --shadow-md: 0 10px 30px -10px rgba(0, 0, 0, 0.6);
  --link: #93c5fd;
  color-scheme: dark;
}

html { scroll-behavior: smooth; }

body {
  font-family: 'Inter', ui-sans-serif, system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
  font-feature-settings: 'cv11', 'ss01';
  color: var(--text);
  background-color: var(--bg);
  background-image:
    radial-gradient(900px 420px at 8% -8%, rgba(79, 70, 229, 0.10), transparent 60%),
    radial-gradient(800px 380px at 100% 0%, rgba(37, 99, 235, 0.10), transparent 55%);
  background-repeat: no-repeat;
  background-attachment: fixed;
  -webkit-font-smoothing: antialiased;
}
html.dark body {
  background-image:
    radial-gradient(900px 420px at 8% -8%, rgba(99, 102, 241, 0.18), transparent 60%),
    radial-gradient(800px 380px at 100% 0%, rgba(37, 99, 235, 0.16), transparent 55%);
}

/* Tailwind's CDN preflight (loaded after this file) resets every border to light grey; `html *` out-ranks it so
   borders follow the theme. Colour utilities such as .border-red-200 still win because they are classes. */
html *, html ::before, html ::after { border-color: var(--border); }

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

/* ---- utility remaps: the existing views use these slate/white utilities; map them to tokens ---- */
html .bg-white { background-color: var(--surface); }
html .bg-slate-50 { background-color: var(--surface-2); }
html .bg-slate-100 { background-color: var(--surface-3); }
html .bg-slate-200 { background-color: var(--surface-3); }
html .text-slate-800, html .text-slate-700 { color: var(--text); }
html .text-slate-600 { color: var(--text-2); }
html .text-slate-500 { color: var(--muted); }
html .text-slate-400 { color: var(--muted-2); }
html .hover\:bg-slate-50:hover, html .hover\:bg-slate-100:hover { background-color: var(--hover); }
html .hover\:text-slate-800:hover, html .hover\:text-slate-600:hover { color: var(--brand); }
html .text-blue-700 { color: var(--link); }

/* status colours (banners, badges, red/amber text) */
html .bg-emerald-50 { background-color: rgba(16, 185, 129, 0.10); }
html .bg-emerald-100 { background-color: rgba(16, 185, 129, 0.16); }
html .bg-red-50 { background-color: rgba(239, 68, 68, 0.09); }
html .bg-red-100 { background-color: rgba(239, 68, 68, 0.15); }
html .bg-amber-50 { background-color: rgba(245, 158, 11, 0.11); }
html .bg-amber-100 { background-color: rgba(245, 158, 11, 0.17); }
html .border-emerald-200 { border-color: rgba(16, 185, 129, 0.35); }
html .border-red-200 { border-color: rgba(239, 68, 68, 0.35); }
html .text-emerald-800 { color: #047857; }
html .text-red-800, html .text-red-700 { color: #b91c1c; }
html .text-amber-800 { color: #92400e; }
html.dark .text-emerald-800 { color: #6ee7b7; }
html.dark .text-red-800, html.dark .text-red-700 { color: #fca5a5; }
html.dark .text-amber-800 { color: #fcd34d; }

/* primary buttons: anything the views draw as bg-slate-800 + text-white */
html .bg-slate-800 {
  background-image: linear-gradient(135deg, var(--brand), var(--brand-2));
  background-color: var(--brand);
  color: #fff;
  box-shadow: 0 4px 14px -4px rgba(37, 99, 235, 0.55);
  transition: transform 160ms ease, box-shadow 160ms ease, filter 160ms ease;
}
html .bg-slate-800:hover { filter: brightness(1.07); box-shadow: 0 8px 18px -6px rgba(37, 99, 235, 0.6); }
html .bg-slate-800:active { transform: translateY(1px); }
html .hover\:bg-slate-700:hover { filter: brightness(1.07); }
html.dark .bg-slate-800 { color: #0b1220; }

/* ---- main content defaults ---- */
main h1 { font-weight: 700; letter-spacing: -0.015em; }
main h2 { font-weight: 650; letter-spacing: -0.01em; }

/* cards: the views draw cards as bg-white + border */
main .bg-white.border {
  border-radius: var(--radius);
  box-shadow: var(--shadow-sm);
  border-color: var(--border);
}
main a.border.rounded, main button.border.rounded { border-radius: 10px; }

/* tables */
main table { font-size: 13px; }
main thead th {
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  font-weight: 600;
  color: var(--muted);
}
main thead { background-color: var(--surface-3); }
main tbody tr { transition: background-color 120ms ease; }
main tbody tr:hover { background-color: var(--hover); }
main tfoot { background-color: var(--surface-3); }
main td, main th { border-color: var(--border); }
main .overflow-x-auto { scrollbar-width: thin; }

/* form controls */
main input:not([type='checkbox']):not([type='radio']):not([type='hidden']),
main select,
main textarea,
header input:not([type='checkbox']),
header select {
  background-color: var(--surface);
  color: var(--text);
  border: 1px solid var(--border);
  border-radius: 10px;
  transition: border-color 150ms ease, box-shadow 150ms ease;
}
main input:focus, main select:focus, main textarea:focus, header input:focus, header select:focus {
  outline: none;
  border-color: var(--brand);
  box-shadow: 0 0 0 3px var(--brand-soft);
}
main input::placeholder, header input::placeholder, main textarea::placeholder { color: var(--muted-2); }
main button, main a.border { cursor: pointer; }
main label > span, main label { color: var(--text-2); }

/* pagination (Laravel's default markup) */
nav[role='navigation'] a, nav[role='navigation'] span[aria-current] > span { border-radius: 8px; }

/* Grid/flex children may shrink below their content (stops wide charts/tables stretching the page on phones) */
main .grid > *, main .flex > * { min-width: 0; }

/* denser tables for wide reports */
main table.compact th, main table.compact td { padding-left: 0.55rem; padding-right: 0.55rem; }

/* ---- components used by the new layout / dashboard ---- */
.glass {
  background: color-mix(in srgb, var(--surface) 78%, transparent);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
}
.card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  box-shadow: var(--shadow-sm);
}
.card-lift { transition: transform 200ms ease, box-shadow 200ms ease, border-color 200ms ease; }
.card-lift:hover { transform: translateY(-2px); box-shadow: var(--shadow-md); border-color: color-mix(in srgb, var(--brand) 35%, var(--border)); }

.hero {
  background:
    radial-gradient(600px 220px at 100% 0%, rgba(255, 255, 255, 0.22), transparent 60%),
    linear-gradient(120deg, #1e3a8a 0%, #2563eb 48%, #6366f1 100%);
  color: #fff;
  border-radius: 18px;
  box-shadow: 0 18px 40px -18px rgba(37, 99, 235, 0.6);
}
html.dark .hero {
  background:
    radial-gradient(600px 220px at 100% 0%, rgba(255, 255, 255, 0.10), transparent 60%),
    linear-gradient(120deg, #1e2f6b 0%, #1d4ed8 50%, #4f46e5 100%);
}

.nav-link {
  display: flex; align-items: center; gap: 0.75rem;
  padding: 0.55rem 0.75rem; border-radius: 10px;
  color: var(--text-2); font-size: 14px; font-weight: 500;
  transition: background-color 150ms ease, color 150ms ease;
  position: relative;
}
.nav-link:hover { background-color: var(--hover); color: var(--text); }
.nav-link.active { background-color: var(--brand-soft); color: var(--brand); font-weight: 600; }
.nav-link.active::before {
  content: ''; position: absolute; left: -12px; top: 8px; bottom: 8px; width: 3px;
  border-radius: 0 3px 3px 0; background: linear-gradient(var(--brand), var(--brand-2));
}
.nav-sub {
  display: block; padding: 0.4rem 0.75rem 0.4rem 2.6rem; border-radius: 8px;
  font-size: 13px; color: var(--muted); transition: background-color 150ms ease, color 150ms ease;
  position: relative;
}
.nav-sub:hover { background-color: var(--hover); color: var(--text); }
.nav-sub.active { color: var(--brand); font-weight: 600; }
.nav-sub::before {
  content: ''; position: absolute; left: 1.45rem; top: 50%; width: 6px; height: 6px; margin-top: -3px;
  border-radius: 50%; background: var(--border); transition: background-color 150ms ease;
}
.nav-sub.active::before { background: var(--brand); box-shadow: 0 0 0 3px var(--brand-soft); }

.chip-icon {
  display: inline-flex; align-items: center; justify-content: center;
  width: 38px; height: 38px; border-radius: 12px; color: #fff;
}
.delta-up { color: var(--ok); background: rgba(16, 185, 129, 0.12); }
.delta-down { color: var(--bad); background: rgba(239, 68, 68, 0.12); }
.delta-flat { color: var(--muted); background: var(--surface-3); }

.skeleton {
  background: linear-gradient(90deg, var(--surface-3) 25%, var(--hover) 37%, var(--surface-3) 63%);
  background-size: 400% 100%;
  animation: shimmer 1.4s ease infinite;
  border-radius: 8px;
}
@keyframes shimmer { 0% { background-position: 100% 50%; } 100% { background-position: 0 50%; } }

@keyframes rise { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }
.rise { animation: rise 320ms cubic-bezier(0.2, 0.7, 0.2, 1) both; }
.rise-1 { animation-delay: 40ms; } .rise-2 { animation-delay: 80ms; } .rise-3 { animation-delay: 120ms; }
.rise-4 { animation-delay: 160ms; } .rise-5 { animation-delay: 200ms; }

@keyframes spin { to { transform: rotate(360deg); } }
.spin { animation: spin 0.9s linear infinite; }

[x-cloak] { display: none !important; }

@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; }
}

@media print {
  body { background: #fff !important; color: #000; }
  main .bg-white.border { box-shadow: none; }
}