/* ============================================================
   assets/css/theme.css — Sphurit global UI theme (2026 redesign)
   Loaded by login + admin/employee headers. Pairs with an inline
   Tailwind config that remaps the app's "blue" utilities to this
   indigo brand palette, so every existing page is recoloured
   cohesively without per-page edits.
   ============================================================ */
:root{
  --brand-50:#eef2ff; --brand-100:#e0e7ff; --brand-200:#c7d2fe;
  --brand-400:#818cf8; --brand-500:#6366f1; --brand-600:#4f46e5;
  --brand-700:#4338ca; --brand-900:#312e81;
  --ink:#0f172a; --muted:#64748b; --line:#e8ecf3;
}

*{ -webkit-font-smoothing:antialiased; -moz-osx-font-smoothing:grayscale; }

body{ font-family:'Inter',ui-sans-serif,system-ui,-apple-system,sans-serif; color:var(--ink); }

/* Soft, modern app background (overrides flat bg-gray-100) */
.app-bg{
  background:
    radial-gradient(1100px 520px at 100% -8%,  rgba(99,102,241,.10), transparent 60%),
    radial-gradient(900px 480px at -8% 108%,    rgba(139,92,246,.08), transparent 55%),
    #f4f6fb !important;
  background-attachment: fixed;
}

/* Refined scrollbars */
::-webkit-scrollbar{ width:9px; height:9px; }
::-webkit-scrollbar-thumb{ background:#cbd5e1; border-radius:10px; border:2px solid transparent; background-clip:content-box; }
::-webkit-scrollbar-thumb:hover{ background:#94a3b8; background-clip:content-box; }

/* Brand logo tile */
.brand-badge{
  display:inline-flex; align-items:center; justify-content:center;
  width:40px; height:40px; border-radius:12px; flex-shrink:0;
  background:linear-gradient(135deg,var(--brand-500),var(--brand-700));
  color:#fff; box-shadow:0 8px 20px -6px rgba(79,70,229,.55);
}

/* Sidebar nav: rounded pills, smooth hover, gradient active state */
#sidebar nav, #sidebar ul{ scrollbar-width:thin; }
.nav-item{ border-radius:12px; transition:background .16s ease, color .16s ease, transform .16s ease; }
.nav-item:hover{ background:#f1f5f9; }
.nav-item.is-active{
  background:linear-gradient(90deg,var(--brand-600),var(--brand-500)) !important;
  color:#fff !important; box-shadow:0 10px 22px -10px rgba(79,70,229,.6);
}
.nav-item.is-active i, .nav-item.is-active span{ color:#fff !important; }

/* Card polish — opt-in via .ui-card, plus a gentle lift for common cards */
.ui-card{ background:#fff; border:1px solid var(--line); border-radius:18px; box-shadow:0 1px 2px rgba(16,24,40,.04),0 12px 28px -18px rgba(16,24,40,.18); }

/* Primary button gradient (opt-in) */
.btn-brand{
  background:linear-gradient(135deg,var(--brand-600),var(--brand-500));
  color:#fff; border:none; border-radius:12px; font-weight:600;
  box-shadow:0 10px 22px -10px rgba(79,70,229,.6); transition:transform .15s ease, box-shadow .15s ease, filter .15s ease;
}
.btn-brand:hover{ filter:brightness(1.05); transform:translateY(-1px); box-shadow:0 14px 26px -10px rgba(79,70,229,.7); color:#fff; }

/* Topbar subtle glass */
header.sticky{ backdrop-filter:saturate(1.1) blur(6px); background:rgba(255,255,255,.85) !important; }

/* Inputs: softer focus */
input,select,textarea{ transition:border-color .15s ease, box-shadow .15s ease; }