/* ==========================================================================
   SweeSeng Credit — client brand stylesheet (V5-822)
   --------------------------------------------------------------------------
   Loaded ONLY on sweeseng-dev.rpa.sg (CLIENT_PROJECT=sweeseng,
   CLIENT_BRAND_CSS=sweeseng-brand.css in .env).

   Served as a STATIC asset from public/css/client/ — deliberately NOT part
   of the Vite entry graph (see vite.config.js), so `npm run build` never
   bundles or ships it for revof / kyriosys.

   Style guide (2026-08): official SweeSeng logo lockup — near-black ink
   (#231F20) wordmark with a royal-blue (#0055A5) swoosh accent + blue
   tagline on a clean white field. Design concept: "Trust Blue" — modern,
   premium, minimalist: white surfaces, royal-blue primary, near-black ink,
   cool grey neutrals. Deliberately NOT the earlier maroon/gold look.
   ========================================================================== */

/* ── Typography: clean sans (no display serif — brand is modern) ────── */
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&display=swap');

:root {
  /* Brand palette — extracted from the SweeSeng style guide */
  --sweeseng-blue:        #0055A5;   /* royal blue (swoosh) */
  --sweeseng-blue-light:  #005DB4;
  --sweeseng-blue-deep:   #00407C;
  --sweeseng-ink:         #231F20;   /* near-black wordmark */
  --sweeseng-ink-soft:    #4A4548;
  --sweeseng-cool:        #F4F6F9;   /* cool light surface */

  /* Body font — Filament v5 reads --font-sans (Tailwind v4). */
  --font-sans: 'Inter', ui-sans-serif, system-ui, -apple-system, 'Segoe UI', sans-serif;

  /* Filament primary scale → royal blue */
  --primary-50:  #EAF3FB;
  --primary-100: #D6E7F7;
  --primary-200: #A9CDEE;
  --primary-300: #7BB1E4;
  --primary-400: #3D8FD1;
  --primary-500: var(--sweeseng-blue);
  --primary-600: #004B93;
  --primary-700: var(--sweeseng-blue-deep);
  --primary-800: #003466;
  --primary-900: #00274F;
  --primary-950: #001529;

  /* Surfaces — clean white on cool grey, dark sidebar removed */
  --background:          #FFFFFF;
  --content-background:  #FFFFFF;
  --sidebar-background:  #FFFFFF;
  --gray-50:  #F9FAFB;
  --gray-100: #F4F6F9;
  --gray-200: #E6EAF0;
}

/* Base page warmth + ink headings */
body {
  background-color: var(--sweeseng-cool);
}
.fi-header-heading,
.fi-simple-header-heading,
.fi-section-header .fi-section-header-heading,
h1, h2, h3 {
  color: var(--sweeseng-ink);
  letter-spacing: -0.01em;
}

/* ── Sidebar: white, blue active pill, ink labels ───────────────────── */
.fi-sidebar {
  background: #FFFFFF;
  border-right: 1px solid var(--gray-200);
}
.fi-sidebar-item-btn {
  border-radius: 10px;
  margin: 1px 8px;
  color: var(--sweeseng-ink-soft);
  transition: all 0.15s ease;
}
.fi-sidebar-item-btn:hover {
  background: var(--primary-50) !important;
  color: var(--sweeseng-blue) !important;
}
.fi-sidebar-item.fi-active .fi-sidebar-item-btn {
  background: var(--primary-50) !important;
  color: var(--sweeseng-blue) !important;
  font-weight: 600;
  box-shadow: inset 3px 0 0 var(--sweeseng-blue);
}
.fi-sidebar-group-label,
.fi-sidebar-group-btn {
  color: #8A8588;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  font-size: 0.7rem;
}

/* ── Header: white + royal-blue underline band ──────────────────────── */
.fi-header {
  background: #FFFFFF;
  border-bottom: 0;
  box-shadow: inset 0 -2px 0 var(--sweeseng-blue), 0 1px 4px rgba(35, 31, 32, 0.06);
}
.fi-header-heading {
  color: var(--sweeseng-ink);
}

/* ── Buttons: royal-blue primary, subtle radius ─────────────────────── */
.fi-btn {
  border-radius: 0.5rem !important;
  font-weight: 600;
}
.fi-btn.fi-color-primary:not(.is-disabled) {
  background: linear-gradient(180deg, var(--sweeseng-blue-light) 0%, var(--sweeseng-blue) 100%);
  color: #FFFFFF !important;
  border: 1px solid var(--sweeseng-blue-deep);
  box-shadow: 0 2px 8px rgba(0, 85, 165, 0.28);
}
.fi-btn.fi-color-primary:not(.is-disabled):hover {
  box-shadow: 0 4px 14px rgba(0, 85, 165, 0.4);
  transform: translateY(-1px);
}

/* ── Sections / cards: white, soft shadow, blue top accent ──────────── */
.fi-section {
  border-radius: 0.75rem !important;
  box-shadow: 0 4px 16px rgba(35, 31, 32, 0.06) !important;
  border: 1px solid var(--gray-200);
  border-top: 3px solid var(--sweeseng-blue) !important;
  background: #FFFFFF;
}
.fi-section-header {
  padding-top: 0.9rem;
}

/* ── Tables: blue header band + cool rows ───────────────────────────── */
.fi-ta {
  border-radius: 0.75rem;
  overflow: hidden;
  box-shadow: 0 4px 16px rgba(35, 31, 32, 0.05);
}
.fi-ta-header-cell {
  background: linear-gradient(90deg, var(--sweeseng-blue), var(--sweeseng-blue-deep));
  color: #FFF;
  font-weight: 600;
  letter-spacing: 0.03em;
}
.fi-ta-header-cell .fi-ta-header-cell-btn { color: #FFF; }
.fi-ta-row:hover {
  background-color: var(--primary-50) !important;
}

/* ── Tabs ───────────────────────────────────────────────────────────── */
.fi-tabs .fi-tabs-item.fi-active {
  color: var(--sweeseng-blue);
  border-color: var(--sweeseng-blue);
}

/* ── Login / simple pages: clean white card on blue-ink backdrop ────── */
.fi-simple-layout {
  background:
    radial-gradient(900px 500px at 85% -10%, rgba(0, 85, 165, 0.18), transparent 55%),
    radial-gradient(700px 400px at -10% 110%, rgba(0, 64, 124, 0.55), transparent 60%),
    linear-gradient(150deg, #00274F 0%, var(--sweeseng-blue) 55%, var(--sweeseng-blue-light) 100%);
}
.fi-simple-main-ctn {
  border-radius: 1rem;
  overflow: hidden;
  box-shadow: 0 24px 48px rgba(0, 0, 0, 0.3);
  border-top: 5px solid var(--sweeseng-blue-light);
  background: #FFFFFF;
}
.fi-simple-header-heading {
  color: var(--sweeseng-ink);
}

/* ── Focus + selection ──────────────────────────────────────────────── */
*:focus-visible {
  outline-color: var(--sweeseng-blue) !important;
}
::selection {
  background: rgba(0, 85, 165, 0.22);
}