/* ================================================================
   LANDING-THEME.CSS — Dark mode for standalone (no-navbar) pages
   ----------------------------------------------------------------
   Applies a refined dark theme when <html> has the class "dark".
   Used by:
     - index.html (landing)
     - login.php / employee_login.php / forgot_password.php / register.php
     - privacy_policy.html / query.html
     - sip_calculator.html / ppf_calculator.html / car_loan_calculator.html

   The toggle button styles + helper classes are defined here so any
   standalone page can drop in a `<button class="tms-theme-fab">` and
   gain a fully styled, animated theme switcher.
   ================================================================ */

/* ── Floating theme toggle (bottom-right pill) ─────────────────── */
.tms-theme-fab {
  position: fixed;
  z-index: 90;
  right: 18px;
  bottom: 18px;
  width: 44px;
  height: 44px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 999px;
  border: 1px solid rgba(34, 77, 160, 0.18);
  background: rgba(255, 255, 255, 0.92);
  color: #1f4f9e;
  cursor: pointer;
  box-shadow: 0 10px 28px rgba(15, 32, 68, 0.18), 0 2px 6px rgba(15, 32, 68, 0.08);
  -webkit-backdrop-filter: blur(12px);
  backdrop-filter: blur(12px);
  transition: transform 220ms cubic-bezier(.4,0,.2,1),
              background 220ms ease,
              color 220ms ease,
              border-color 220ms ease,
              box-shadow 220ms ease;
}

.tms-theme-fab:hover {
  transform: translateY(-2px);
  box-shadow: 0 16px 36px rgba(15, 32, 68, 0.22), 0 3px 8px rgba(15, 32, 68, 0.1);
  border-color: rgba(39, 99, 255, 0.45);
  color: #2763ff;
}

.tms-theme-fab svg {
  width: 20px;
  height: 20px;
  transition: transform 320ms cubic-bezier(.4,0,.2,1), opacity 200ms ease;
}

.tms-theme-fab .ic-sun { display: none; }
.tms-theme-fab .ic-moon { display: inline; }

@media (max-width: 640px) {
  .tms-theme-fab { right: 14px; bottom: 14px; width: 42px; height: 42px; }
}

/* ================================================================
   DARK MODE
   ================================================================ */
html.dark {
  color-scheme: dark;

  /* shared marketing-page tokens (override page-defined :root vars) */
  --bg: #0a0c10;
  --surface: rgba(22, 24, 30, 0.88);
  --line: rgba(255, 255, 255, 0.07);
  --text: #e6edf3;
  --muted: #8b95a7;
  --brand: #58a6ff;
  --brand-2: #7fb8ff;
  --ok: #3fb950;
}

/* ── Smooth cross-fade between themes ── */
html, body,
.topbar, .nav, .panel, .card, .dashboard, .kpi, .row, .rows, .step,
.footer, .cookie-bar, .results, .info, .strip, .badge,
input, select, textarea, button, .tms-theme-fab {
  transition: background-color 240ms cubic-bezier(.4,0,.2,1),
              border-color 240ms cubic-bezier(.4,0,.2,1),
              color 200ms cubic-bezier(.4,0,.2,1),
              box-shadow 240ms cubic-bezier(.4,0,.2,1);
}

@media (prefers-reduced-motion: reduce) {
  html, body,
  .topbar, .nav, .panel, .card, .dashboard, .kpi, .row, .rows, .step,
  .footer, .cookie-bar, .results, .info, .strip, .badge,
  input, select, textarea, button, .tms-theme-fab {
    transition: none !important;
  }
}

/* ── Base body (override any radial-gradient landing pages) ── */
html.dark body {
  background:
    radial-gradient(1100px 600px at 12% -10%, rgba(56, 139, 253, 0.10), transparent 60%),
    radial-gradient(900px 500px at 90% -5%, rgba(139, 92, 246, 0.07), transparent 55%),
    linear-gradient(180deg, #0a0c10 0%, #0b0d12 60%, #0a0c10 100%) !important;
  color: #e6edf3 !important;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

html.dark ::selection { background: rgba(56, 139, 253, 0.32); color: #fff; }
html.dark ::-moz-selection { background: rgba(56, 139, 253, 0.32); color: #fff; }
html.dark ::placeholder { color: #58606d !important; }

/* Scrollbar */
html.dark ::-webkit-scrollbar { width: 10px; height: 10px; }
html.dark ::-webkit-scrollbar-track { background: #0a0c10; border-left: 1px solid #15171c; }
html.dark ::-webkit-scrollbar-thumb {
  background: linear-gradient(180deg, #2a2e36, #21242a);
  border-radius: 8px; border: 2px solid #0a0c10;
}
html.dark ::-webkit-scrollbar-thumb:hover { background: linear-gradient(180deg, #3a3f4a, #2a2e36); }
html.dark { scrollbar-color: #2a2e36 #0a0c10; scrollbar-width: thin; }

html.dark *:focus-visible {
  outline: 2px solid #58a6ff;
  outline-offset: 2px;
  border-radius: 4px;
}

/* ── Headings + text ── */
html.dark h1, html.dark h2, html.dark h3,
html.dark h4, html.dark h5 {
  color: #f0f6fc !important;
}

html.dark .lead,
html.dark .sub,
html.dark .hero-note,
html.dark p, html.dark li {
  color: #8b95a7 !important;
}

html.dark a { color: #79b8ff; }

/* ── Landing TOP NAV (index.html, calculators, privacy, query) ── */
html.dark .topbar .nav,
html.dark .topbar {
  background: rgba(15, 17, 22, 0.7) !important;
  -webkit-backdrop-filter: saturate(160%) blur(18px);
  backdrop-filter: saturate(160%) blur(18px);
  border-color: rgba(255, 255, 255, 0.07) !important;
  box-shadow:
    0 1px 0 rgba(255, 255, 255, 0.04) inset,
    0 6px 24px rgba(0, 0, 0, 0.5) !important;
}

html.dark .topbar.scrolled .nav {
  background: rgba(15, 17, 22, 0.85) !important;
}

html.dark .nav-links a {
  color: #b9c2d0 !important;
}

html.dark .nav-links a:hover {
  color: #f0f6fc !important;
}

/* ── Buttons / CTAs ── */
html.dark .cta.ghost {
  color: #cdd9e5 !important;
  background: rgba(255, 255, 255, 0.04) !important;
  border-color: rgba(255, 255, 255, 0.12) !important;
}

html.dark .cta.ghost:hover {
  background: rgba(56, 139, 253, 0.14) !important;
  border-color: rgba(56, 139, 253, 0.4) !important;
  color: #f0f6fc !important;
}

html.dark .cta.primary {
  background: linear-gradient(120deg, #1f6feb 0%, #58a6ff 100%) !important;
  box-shadow: 0 10px 24px rgba(31, 111, 235, 0.35) !important;
  color: #fff !important;
}

/* ── Badge ── */
html.dark .badge {
  background: rgba(22, 24, 30, 0.85) !important;
  color: #79b8ff !important;
  border-color: rgba(56, 139, 253, 0.28) !important;
}

/* ── Hero dashboard card (index.html) ── */
html.dark .dashboard {
  background: linear-gradient(145deg, rgba(22, 24, 30, 0.92), rgba(15, 17, 22, 0.92)) !important;
  border-color: rgba(255, 255, 255, 0.08) !important;
  box-shadow:
    0 1px 0 rgba(255, 255, 255, 0.05) inset,
    0 22px 60px rgba(0, 0, 0, 0.55) !important;
}

html.dark .dash-head {
  border-bottom-color: rgba(255, 255, 255, 0.07) !important;
  color: #8b95a7 !important;
}

html.dark .live-chip { color: #3fb950 !important; }

html.dark .kpi {
  background: #14161b !important;
  border-color: rgba(255, 255, 255, 0.06) !important;
  color: #e6edf3 !important;
}

html.dark .kpi small { color: #8b95a7 !important; }
html.dark .kpi strong { color: #f0f6fc !important; }

html.dark .rows {
  background: #14161b !important;
  border-color: rgba(255, 255, 255, 0.06) !important;
}

html.dark .row {
  border-bottom-color: rgba(255, 255, 255, 0.05) !important;
  color: #8b95a7 !important;
}

html.dark .row strong { color: #f0f6fc !important; }
html.dark .status { color: #3fb950 !important; }

/* ── Strip / Logos ── */
html.dark .strip {
  background: rgba(15, 17, 22, 0.65) !important;
  border-top-color: rgba(255, 255, 255, 0.06) !important;
  border-bottom-color: rgba(255, 255, 255, 0.06) !important;
}

html.dark .strip-label { color: #8b95a7 !important; }
html.dark .logos { color: #b9c2d0 !important; }

/* ── Eyebrow + section headings ── */
html.dark .eyebrow { color: #79b8ff !important; }

/* ── Feature / step cards ── */
html.dark .card,
html.dark .step {
  background: linear-gradient(180deg, rgba(22, 24, 30, 0.92), rgba(15, 17, 22, 0.92)) !important;
  border-color: rgba(255, 255, 255, 0.07) !important;
  box-shadow:
    0 1px 0 rgba(255, 255, 255, 0.04) inset,
    0 8px 24px rgba(0, 0, 0, 0.45) !important;
}

html.dark .card:hover {
  transform: translateY(-5px);
  border-color: rgba(56, 139, 253, 0.4) !important;
  box-shadow:
    0 1px 0 rgba(255, 255, 255, 0.05) inset,
    0 18px 38px rgba(0, 0, 0, 0.55) !important;
}

html.dark .step-no {
  background: rgba(56, 139, 253, 0.14) !important;
  color: #79b8ff !important;
  border-color: rgba(56, 139, 253, 0.3) !important;
}

html.dark .card h3,
html.dark .step h4 { color: #f0f6fc !important; }

html.dark .card p,
html.dark .step p { color: #8b95a7 !important; }

/* ── Footer ── */
html.dark .footer {
  background: rgba(10, 12, 16, 0.85) !important;
  border-top-color: rgba(255, 255, 255, 0.07) !important;
}

html.dark .foot-brand { color: #8b95a7 !important; }
html.dark .footer h5 { color: #79b8ff !important; }
html.dark .footer a { color: #b9c2d0 !important; }
html.dark .footer a:hover { color: #58a6ff !important; }

html.dark .foot-bottom {
  border-top-color: rgba(255, 255, 255, 0.06) !important;
  color: #6e7681 !important;
}

/* ── Cookie bar (already dark, just refine) ── */
html.dark .cookie-bar {
  background: rgba(15, 17, 22, 0.96) !important;
  border-color: rgba(255, 255, 255, 0.1) !important;
  color: #cdd9e5 !important;
  box-shadow: 0 16px 32px rgba(0, 0, 0, 0.65) !important;
}

html.dark .cookie-link { color: #79b8ff !important; }

html.dark .cookie-close {
  background: rgba(56, 139, 253, 0.18) !important;
  border-color: rgba(56, 139, 253, 0.4) !important;
  color: #f0f6fc !important;
}

html.dark .cookie-close:hover {
  background: rgba(56, 139, 253, 0.28) !important;
}

/* ── Privacy / Query pages (panel surface) ── */
html.dark .panel {
  background: linear-gradient(180deg, rgba(22, 24, 30, 0.92), rgba(15, 17, 22, 0.92)) !important;
  border-color: rgba(255, 255, 255, 0.07) !important;
  box-shadow:
    0 1px 0 rgba(255, 255, 255, 0.04) inset,
    0 22px 50px rgba(0, 0, 0, 0.5) !important;
}

html.dark .panel h2 { color: #79b8ff !important; }
html.dark .meta {
  background: rgba(56, 139, 253, 0.12) !important;
  border-color: rgba(56, 139, 253, 0.28) !important;
  color: #79b8ff !important;
}

html.dark .link { color: #58a6ff !important; }

/* ── Calculator pages ── */
html.dark .results {
  background: linear-gradient(145deg, rgba(56, 139, 253, 0.08), rgba(56, 139, 253, 0.03)) !important;
  border-color: rgba(56, 139, 253, 0.22) !important;
}

html.dark .results .row {
  color: #8b95a7 !important;
  border-bottom-color: rgba(255, 255, 255, 0.06) !important;
}

html.dark .results .row strong { color: #f0f6fc !important; }

html.dark .info {
  background: rgba(22, 24, 30, 0.75) !important;
  border-color: rgba(255, 255, 255, 0.07) !important;
}

html.dark .info h2 { color: #f0f6fc !important; }
html.dark .info ul { color: #8b95a7 !important; }

html.dark label {
  color: #b9c2d0 !important;
}

html.dark input {
  background: #14161b !important;
  border-color: rgba(255, 255, 255, 0.1) !important;
  color: #e6edf3 !important;
  box-shadow: 0 1px 0 rgba(255, 255, 255, 0.03) inset !important;
}

html.dark input:hover {
  border-color: rgba(255, 255, 255, 0.18) !important;
}

html.dark input:focus,
html.dark select:focus,
html.dark textarea:focus {
  background: #101218 !important;
  border-color: #58a6ff !important;
  box-shadow:
    0 0 0 3px rgba(56, 139, 253, 0.18),
    0 1px 0 rgba(255, 255, 255, 0.04) inset !important;
}

/* ================================================================
   TAILWIND CDN OVERRIDES (login, employee_login, forgot_password, register)
   ================================================================ */
html.dark .bg-white,
html.dark .bg-slate-50,
html.dark .bg-slate-100,
html.dark .bg-gray-50,
html.dark .bg-gray-100 {
  background-color: #131418 !important;
}

html.dark .bg-slate-200,
html.dark .bg-gray-200 {
  background-color: #181a1f !important;
}

html.dark .text-slate-800,
html.dark .text-gray-800,
html.dark .text-slate-900,
html.dark .text-gray-900 { color: #f0f6fc !important; }

html.dark .text-slate-700,
html.dark .text-gray-700 { color: #cdd9e5 !important; }

html.dark .text-slate-600,
html.dark .text-gray-600 { color: #b9c2d0 !important; }

html.dark .text-slate-500,
html.dark .text-gray-500 { color: #8b95a7 !important; }

html.dark .text-slate-400,
html.dark .text-gray-400 { color: #6e7681 !important; }

html.dark .border,
html.dark .border-slate-200,
html.dark .border-slate-300,
html.dark .border-gray-200,
html.dark .border-gray-300 { border-color: #23262d !important; }

html.dark .border-t,
html.dark .border-b { border-color: #23262d !important; }

html.dark .shadow,
html.dark .shadow-sm,
html.dark .shadow-md {
  box-shadow:
    0 1px 0 rgba(255,255,255,0.04) inset,
    0 1px 2px rgba(0,0,0,0.5),
    0 4px 16px rgba(0,0,0,0.35) !important;
}

html.dark .shadow-lg,
html.dark .shadow-xl {
  box-shadow:
    0 1px 0 rgba(255,255,255,0.05) inset,
    0 12px 38px rgba(0,0,0,0.6) !important;
}

/* Tailwind buttons */
html.dark .bg-blue-50  { background-color: rgba(56, 139, 253, 0.12) !important; }
html.dark .bg-blue-100 { background-color: rgba(56, 139, 253, 0.18) !important; }
html.dark .bg-blue-600 { background-color: #1f6feb !important; }
html.dark .bg-blue-600:hover,
html.dark .hover\:bg-blue-700:hover { background-color: #388bfd !important; }
html.dark .text-blue-600,
html.dark .text-blue-700 { color: #58a6ff !important; }
html.dark .text-blue-800 { color: #79b8ff !important; }
html.dark .hover\:text-blue-800:hover { color: #79b8ff !important; }

html.dark .bg-green-50  { background-color: rgba(63, 185, 80, 0.10) !important; }
html.dark .border-green-200 { border-color: rgba(63, 185, 80, 0.30) !important; }
html.dark .text-green-600,
html.dark .text-green-700 { color: #3fb950 !important; }

html.dark .bg-red-50  { background-color: rgba(248, 81, 73, 0.10) !important; }
html.dark .border-red-200 { border-color: rgba(248, 81, 73, 0.30) !important; }
html.dark .text-red-600,
html.dark .text-red-700 { color: #f87171 !important; }

html.dark .bg-orange-50 { background-color: rgba(249, 115, 22, 0.10) !important; }
html.dark .border-orange-200 { border-color: rgba(249, 115, 22, 0.30) !important; }
html.dark .text-orange-700 { color: #fb923c !important; }

html.dark .hover\:bg-gray-100:hover,
html.dark .hover\:bg-gray-200:hover,
html.dark .hover\:bg-slate-200:hover {
  background-color: #1f2229 !important;
}

html.dark .hover\:bg-blue-100:hover {
  background-color: rgba(56, 139, 253, 0.22) !important;
}

/* Tailwind inputs */
html.dark input.uppercase,
html.dark input[type="text"],
html.dark input[type="password"],
html.dark input[type="email"],
html.dark input[type="number"],
html.dark input[type="tel"],
html.dark input[type="date"],
html.dark input[type="search"],
html.dark select,
html.dark textarea {
  background-color: #181a1f !important;
  color: #e6edf3 !important;
  border-color: #2a2e36 !important;
}

html.dark .focus\:ring-blue-300:focus {
  --tw-ring-color: rgba(56, 139, 253, 0.4) !important;
}

/* Login ticker (login.php) */
html.dark .login-ticker-wrap {
  background: #0a0c10 !important;
  border-bottom-color: #23262d !important;
}
html.dark .login-ticker-label { background: #1f6feb !important; }

/* Login image overlay tint */
html.dark .bg-slate-900\/35 { background-color: rgba(0, 0, 0, 0.55) !important; }

/* Login page right panel (uses bg-white inline) */
html.dark section.bg-white {
  background-color: #0a0c10 !important;
}

/* Login auth tabs + fields (login.php) */
html.dark .auth-tabs {
  background: #181a1f !important;
  border-color: #23262d !important;
}
html.dark .auth-tab { color: #8b95a7 !important; }
html.dark .auth-tab:hover { color: #cdd9e5 !important; }
html.dark .auth-tab--active { color: #58a6ff !important; }
html.dark .auth-tab-indicator {
  background: #23262d !important;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.35) !important;
}
html.dark .login-field-label { color: #b9c2d0 !important; }
html.dark .auth-unlock-hint { color: #8b95a7 !important; }
html.dark .login-control {
  background-color: #181a1f !important;
  color: #e6edf3 !important;
  border-color: #2a2e36 !important;
}
html.dark .login-control:focus {
  border-color: #58a6ff !important;
  box-shadow: 0 0 0 3px rgba(56, 139, 253, 0.18) !important;
}

/* TMS ID live validation (login.php) */
html.dark .tms-id-input-wrap.tms-id--valid .login-control {
  border-color: #3fb950 !important;
}
html.dark .tms-id-input-wrap.tms-id--invalid .login-control {
  border-color: #f87171 !important;
}
html.dark .tms-id-status.is-valid svg { color: #3fb950 !important; }
html.dark .tms-id-status.is-invalid svg { color: #f87171 !important; }
html.dark .tms-id-spinner {
  border-color: #2a2e36 !important;
  border-top-color: #58a6ff !important;
}

/* employee_login.php specific */
html.dark .item {
  background: #14161b !important;
  border-color: rgba(255, 255, 255, 0.06) !important;
}
html.dark .soft-box {
  background: #14161b !important;
  border-color: #23262d !important;
}
html.dark .month-matrix-wrap { background: #131418 !important; border-color: #23262d !important; }
html.dark .month-matrix th {
  background: #181a1f !important;
  color: #b9c2d0 !important;
  border-color: #23262d !important;
}
html.dark .month-matrix td {
  background: #131418 !important;
  color: #e6edf3 !important;
  border-color: #23262d !important;
}
html.dark .matrix-empty { color: #8b95a7 !important; }
html.dark .k { color: #8b95a7 !important; }
html.dark .error {
  background: rgba(248, 81, 73, 0.10) !important;
  color: #f87171 !important;
  border-color: rgba(248, 81, 73, 0.30) !important;
}

/* ── Landing-page ambient orbs: tone down in dark mode ── */
html.dark .orb-a { background: #1a4ab5 !important; opacity: 0.18 !important; }
html.dark .orb-b { background: #4a2db5 !important; opacity: 0.14 !important; }

/* Landing scroll progress gradient (already gradient with vars) */
html.dark .progress {
  background: linear-gradient(90deg, #1f6feb, #58a6ff) !important;
}

/* ── employee_query.php specific ── */
html.dark .banner-emp {
  background: linear-gradient(135deg, #0b2a55 0%, #1a4ab5 55%, #1a6fb0 100%) !important;
  box-shadow: 0 1px 0 rgba(255, 255, 255, 0.06) inset !important;
}

html.dark .tl-step {
  background: #14161b !important;
  border-color: #23262d !important;
}

html.dark .tl-step h4 { color: #f0f6fc !important; }
html.dark .tl-step p { color: #8b95a7 !important; }

html.dark .badge-ok { background: rgba(63, 185, 80, 0.14) !important; color: #4ade80 !important; }
html.dark .badge-warn { background: rgba(210, 153, 34, 0.14) !important; color: #fbbf24 !important; }
html.dark .badge-muted { background: #1f2229 !important; color: #b9c2d0 !important; }

html.dark .success-panel {
  background: rgba(63, 185, 80, 0.10) !important;
  border-color: rgba(63, 185, 80, 0.30) !important;
  color: #4ade80 !important;
}

html.dark .success-panel code {
  background: rgba(255, 255, 255, 0.08) !important;
  color: #cdd9e5 !important;
}

html.dark .err { color: #f87171 !important; }
html.dark .hint { color: #8b95a7 !important; }

html.dark .btn-secondary {
  background: rgba(56, 139, 253, 0.12) !important;
  color: #79b8ff !important;
  border-color: rgba(56, 139, 253, 0.30) !important;
}

html.dark .btn-secondary:hover {
  background: rgba(56, 139, 253, 0.22) !important;
}

/* employee_query.php supervisor input - hardcoded f1f5f9 background */
html.dark input[readonly][style*="background:#f1f5f9"],
html.dark input[readonly][style*="background: #f1f5f9"] {
  background: #1a1d23 !important;
  color: #8b95a7 !important;
  border-color: #23262d !important;
}

/* ── Theme toggle (FAB) — dark state ── */
html.dark .tms-theme-fab {
  background: rgba(22, 24, 30, 0.85) !important;
  color: #79b8ff !important;
  border-color: rgba(255, 255, 255, 0.1) !important;
  box-shadow:
    0 1px 0 rgba(255, 255, 255, 0.05) inset,
    0 10px 28px rgba(0, 0, 0, 0.6),
    0 2px 6px rgba(0, 0, 0, 0.45) !important;
}

html.dark .tms-theme-fab:hover {
  border-color: rgba(56, 139, 253, 0.55) !important;
  color: #58a6ff !important;
}

html.dark .tms-theme-fab .ic-sun { display: inline; }
html.dark .tms-theme-fab .ic-moon { display: none; }