/* ============================================================================
   PICWA Portal — Modern 2026 Design System
   ----------------------------------------------------------------------------
   Opt-in theme. Everything is scoped under `body.theme-modern`, so the Default
   and Linear themes are never affected. Activated via Settings → portal_theme
   = "modern" (loads this file + adds the body.theme-modern class).

   This is the FOUNDATION layer only: design tokens + base + shared components.
   No screen has been redesigned yet. Reversible by switching the theme back.
   Inter is loaded (gated) from the layout; falls back to system fonts.
   ========================================================================== */

/* ---------------------------------------------------------------------------
   1. DESIGN TOKENS  (scoped — inherited by all descendants)
   ------------------------------------------------------------------------- */
body.theme-modern {
  /* Typography */
  --font-sans: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto,
               'Helvetica Neue', Arial, sans-serif;
  --font-mono: 'JetBrains Mono', ui-monospace, SFMono-Regular, Menlo, monospace;

  /* Brand — PICWA logo cyan (#0090C0), sampled from the logo mark */
  --primary:          #0090C0;
  --primary-hover:    #007DA8;
  --primary-active:   #006B90;
  --primary-subtle:   #E6F5FB;
  --primary-contrast: #FFFFFF;

  /* Surface ladder */
  --canvas:           #F7F8FA;
  --surface:          #FFFFFF;
  --surface-2:        #F2F4F7;
  --surface-3:        #E9EDF2;
  --surface-elevated: #FFFFFF;

  /* Ink (text) scale */
  --ink:            #0F172A;
  --ink-secondary:  #475569;
  --ink-muted:      #94A3B8;
  --ink-onaccent:   #FFFFFF;

  /* Borders / hairlines */
  --border:         #E5E8EC;
  --border-strong:  #D3D9E0;
  --border-subtle:  #EEF1F4;

  /* Semantic */
  --success: #16A34A; --success-subtle: #EAF7EE;
  --warning: #D97706; --warning-subtle: #FDF3E7;
  --danger:  #DC2626; --danger-subtle:  #FCECEC;
  --info:    #0090C0; --info-subtle:    #E6F5FB;

  /* Radius */
  --radius-sm:   6px;
  --radius-md:   8px;
  --radius-lg:   12px;
  --radius-pill: 9999px;

  /* Spacing scale (4px base) */
  --space-xs:  4px;
  --space-sm:  8px;
  --space-md:  12px;
  --space-lg:  16px;
  --space-xl:  24px;
  --space-2xl: 32px;
  --space-3xl: 48px;

  /* Elevation */
  --shadow-subtle:   0 1px 2px rgba(16,24,40,.06), 0 1px 3px rgba(16,24,40,.04);
  --shadow-md:       0 4px 12px rgba(16,24,40,.08);
  --shadow-elevated: 0 12px 32px rgba(16,24,40,.14);
  --ring:            0 0 0 3px rgba(0,144,192,.35);

  /* Motion */
  --dur-fast: 120ms;
  --dur:      160ms;
  --dur-slow: 220ms;
  --ease:     cubic-bezier(.2,.7,.3,1);
}

/* ---------------------------------------------------------------------------
   2. BASE / TYPOGRAPHY
   ------------------------------------------------------------------------- */
body.theme-modern {
  font-family: var(--font-sans);
  background-color: var(--canvas);
  color: var(--ink);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  letter-spacing: .1px;
}
body.theme-modern .content-wrapper,
body.theme-modern .app-content { background-color: var(--canvas); }

body.theme-modern h1,
body.theme-modern h2,
body.theme-modern h3,
body.theme-modern h4,
body.theme-modern h5,
body.theme-modern h6,
body.theme-modern .card-title,
body.theme-modern .content-header-title {
  font-family: var(--font-sans);
  color: var(--ink);
  font-weight: 600;
  letter-spacing: -.01em;
}
body.theme-modern h1 { font-size: 1.5rem;  line-height: 1.25; }
body.theme-modern h2 { font-size: 1.25rem; line-height: 1.3; }
body.theme-modern h3 { font-size: 1.125rem;line-height: 1.35; }
body.theme-modern h4 { font-size: 1rem;    line-height: 1.4; }
body.theme-modern .text-muted { color: var(--ink-muted) !important; }
body.theme-modern small,
body.theme-modern .font-small-3 { color: var(--ink-secondary); }

body.theme-modern a { color: var(--primary); transition: color var(--dur) var(--ease); }
body.theme-modern a:hover { color: var(--primary-hover); }

body.theme-modern code,
body.theme-modern pre { font-family: var(--font-mono); }

body.theme-modern ::selection { background: var(--primary-subtle); color: var(--primary-active); }

/* Refined scrollbars (webkit) */
body.theme-modern *::-webkit-scrollbar { width: 10px; height: 10px; }
body.theme-modern *::-webkit-scrollbar-thumb {
  background: var(--surface-3); border-radius: var(--radius-pill);
  border: 2px solid var(--canvas);
}
body.theme-modern *::-webkit-scrollbar-thumb:hover { background: var(--border-strong); }

/* ---------------------------------------------------------------------------
   3. FOCUS STATES  (accessibility — never remove, make it clearer)
   ------------------------------------------------------------------------- */
body.theme-modern a:focus-visible,
body.theme-modern button:focus-visible,
body.theme-modern .btn:focus-visible,
body.theme-modern .form-control:focus-visible,
body.theme-modern .custom-select:focus-visible,
body.theme-modern .page-link:focus-visible,
body.theme-modern .nav-link:focus-visible,
body.theme-modern [tabindex]:focus-visible,
body.theme-modern .dropdown-item:focus-visible {
  outline: none !important;
  box-shadow: var(--ring) !important;
  border-radius: var(--radius-sm);
}

/* ---------------------------------------------------------------------------
   4. SIDEBAR + NAVBAR (chrome)
   ------------------------------------------------------------------------- */
body.theme-modern .main-menu,
body.theme-modern .main-menu.menu-light { background: var(--surface); border-right: 1px solid var(--border); }
body.theme-modern .main-menu .navbar-header { border-bottom: 1px solid var(--border-subtle); }
body.theme-modern .main-menu-content .navigation-main { background: var(--surface); }
body.theme-modern .main-menu .navigation li a { color: var(--ink-secondary); border-radius: var(--radius-md); }
body.theme-modern .main-menu .navigation li a i,
body.theme-modern .main-menu .navigation li a svg { color: var(--ink-muted); }
body.theme-modern .main-menu .navigation > li.active > a {
  background: var(--primary) !important;
  box-shadow: none !important;
  color: var(--primary-contrast) !important;
  border-radius: var(--radius-md);
}
body.theme-modern .main-menu .navigation > li.active > a i,
body.theme-modern .main-menu .navigation > li.active > a svg { color: var(--primary-contrast) !important; }
body.theme-modern .main-menu .navigation li a:hover { background: var(--surface-2); }
body.theme-modern .navigation-header { color: var(--ink-muted); text-transform: uppercase; letter-spacing: .04em; font-size: .72rem; }

body.theme-modern .header-navbar {
  background: var(--surface) !important;
  border-bottom: 1px solid var(--border);
  box-shadow: none !important;
}
body.theme-modern .header-navbar .navbar-nav .nav-link { color: var(--ink-secondary); }

/* ---------------------------------------------------------------------------
   5. CARDS
   ------------------------------------------------------------------------- */
body.theme-modern .card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-subtle);
  transition: box-shadow var(--dur) var(--ease), transform var(--dur) var(--ease);
}
body.theme-modern .card .card-header { border-bottom: 1px solid var(--border-subtle); background: transparent; }
body.theme-modern .card .card-title { font-size: 1rem; font-weight: 600; }

/* ---------------------------------------------------------------------------
   6. BUTTONS  (kill Vuexy gradients/shadows; one flat vocabulary + states)
   ------------------------------------------------------------------------- */
body.theme-modern .btn {
  font-family: var(--font-sans);
  font-weight: 500;
  border-radius: var(--radius-md);
  box-shadow: none !important;
  transition: background-color var(--dur) var(--ease),
              border-color var(--dur) var(--ease),
              color var(--dur) var(--ease),
              transform var(--dur-fast) var(--ease);
  background-image: none !important;
}
body.theme-modern .btn:active { transform: translateY(1px); }
body.theme-modern .btn:disabled,
body.theme-modern .btn.disabled { opacity: .55; cursor: not-allowed; }

/* Primary */
body.theme-modern .btn-primary {
  background: var(--primary) !important;
  border-color: var(--primary) !important;
  color: var(--primary-contrast) !important;
}
body.theme-modern .btn-primary:hover { background: var(--primary-hover) !important; border-color: var(--primary-hover) !important; }
body.theme-modern .btn-primary:active { background: var(--primary-active) !important; border-color: var(--primary-active) !important; }

/* Secondary / outline (neutral) — the default "secondary" action */
body.theme-modern .btn-outline-secondary,
body.theme-modern .btn-secondary {
  background: var(--surface) !important;
  border: 1px solid var(--border-strong) !important;
  color: var(--ink-secondary) !important;
}
body.theme-modern .btn-outline-secondary:hover,
body.theme-modern .btn-secondary:hover { background: var(--surface-2) !important; color: var(--ink) !important; }

/* Outline primary (tertiary emphasis) */
body.theme-modern .btn-outline-primary {
  background: transparent !important;
  border: 1px solid var(--primary) !important;
  color: var(--primary) !important;
}
body.theme-modern .btn-outline-primary:hover { background: var(--primary-subtle) !important; color: var(--primary-active) !important; }

/* Destructive */
body.theme-modern .btn-danger,
body.theme-modern .btn-outline-danger:hover {
  background: var(--danger) !important; border-color: var(--danger) !important; color: #fff !important;
}
body.theme-modern .btn-outline-danger {
  background: transparent !important; border: 1px solid var(--danger) !important; color: var(--danger) !important;
}
/* Success */
body.theme-modern .btn-success {
  background: var(--success) !important; border-color: var(--success) !important; color: #fff !important;
}
/* Legacy/stray classes normalized to neutral so the app stays consistent */
body.theme-modern .btn-dark,
body.theme-modern .btn-inverse,
body.theme-modern .btn-default {
  background: var(--surface) !important;
  border: 1px solid var(--border-strong) !important;
  color: var(--ink) !important;
}
/* Ghost / icon buttons */
body.theme-modern .btn-icon { border-radius: var(--radius-md); }

/* ---------------------------------------------------------------------------
   7. INPUTS / TEXTAREA / 8. SELECTS
   ------------------------------------------------------------------------- */
body.theme-modern .form-control,
body.theme-modern .custom-select,
body.theme-modern .custom-file-label {
  background: var(--surface);
  border: 1px solid var(--border-strong);
  color: var(--ink);
  border-radius: var(--radius-md);
  transition: border-color var(--dur) var(--ease), box-shadow var(--dur) var(--ease);
}
body.theme-modern .form-control::placeholder { color: var(--ink-muted); }
body.theme-modern .form-control:focus,
body.theme-modern .custom-select:focus {
  border-color: var(--primary);
  box-shadow: var(--ring);
}
body.theme-modern .form-control:disabled,
body.theme-modern .form-control[readonly] { background: var(--surface-2); color: var(--ink-muted); }

body.theme-modern label,
body.theme-modern .col-form-label label { color: var(--ink-secondary); font-weight: 500; }

/* Validation states (available for inline field errors in Phase 5) */
body.theme-modern .form-control.is-invalid { border-color: var(--danger); }
body.theme-modern .form-control.is-invalid:focus { box-shadow: 0 0 0 3px rgba(220,38,38,.28); }
body.theme-modern .invalid-feedback { color: var(--danger); }
body.theme-modern .form-control.is-valid { border-color: var(--success); }

/* Checkboxes / radios / custom controls */
body.theme-modern .custom-control-input:checked ~ .custom-control-label::before {
  background: var(--primary); border-color: var(--primary);
}
body.theme-modern .custom-control-input:focus ~ .custom-control-label::before { box-shadow: var(--ring); }

/* Select2 (used across the app) */
body.theme-modern .select2-container--default .select2-selection--single,
body.theme-modern .select2-container--default .select2-selection--multiple {
  background: var(--surface);
  border: 1px solid var(--border-strong) !important;
  border-radius: var(--radius-md) !important;
  min-height: 38px;
}
body.theme-modern .select2-container--default.select2-container--focus .select2-selection--single,
body.theme-modern .select2-container--default.select2-container--focus .select2-selection--multiple {
  border-color: var(--primary) !important; box-shadow: var(--ring);
}
body.theme-modern .select2-dropdown {
  border: 1px solid var(--border); border-radius: var(--radius-md); box-shadow: var(--shadow-md);
}
body.theme-modern .select2-results__option--highlighted[aria-selected] { background: var(--primary) !important; }

/* Flatpickr */
body.theme-modern .flatpickr-day.selected { background: var(--primary); border-color: var(--primary); }

/* ---------------------------------------------------------------------------
   9. TABLES + DATATABLES
   ------------------------------------------------------------------------- */
body.theme-modern .table { color: var(--ink); }
body.theme-modern .table th {
  color: var(--ink-secondary);
  font-weight: 600;
  font-size: .78rem;
  text-transform: uppercase;
  letter-spacing: .03em;
  border-bottom: 1px solid var(--border);
  background: var(--surface-2);
}
body.theme-modern .table td { border-top: 1px solid var(--border-subtle); vertical-align: middle; }
body.theme-modern .table tbody tr { transition: background-color var(--dur-fast) var(--ease); }
body.theme-modern .table tbody tr:hover { background: var(--surface-2); }
body.theme-modern .table.table-hover tbody tr:hover { background: var(--surface-2); }

body.theme-modern .dataTables_wrapper .dataTables_length select,
body.theme-modern .dataTables_wrapper .dataTables_filter input {
  border: 1px solid var(--border-strong); border-radius: var(--radius-md);
  background: var(--surface); color: var(--ink); padding: .3rem .6rem;
}
body.theme-modern .dataTables_wrapper .dataTables_filter input:focus { border-color: var(--primary); box-shadow: var(--ring); outline: none; }
body.theme-modern .dataTables_wrapper .dataTables_paginate .paginate_button {
  border-radius: var(--radius-md) !important; color: var(--ink-secondary) !important; border: none !important;
}
body.theme-modern .dataTables_wrapper .dataTables_paginate .paginate_button.current,
body.theme-modern .dataTables_wrapper .dataTables_paginate .paginate_button.current:hover {
  background: var(--primary) !important; color: #fff !important; box-shadow: none !important;
}
body.theme-modern .dataTables_wrapper .dataTables_paginate .paginate_button:hover {
  background: var(--surface-2) !important; color: var(--ink) !important;
}
body.theme-modern .dataTables_wrapper .dataTables_info { color: var(--ink-muted); }

/* ---------------------------------------------------------------------------
   10. BADGES  (add subtle backgrounds; status must not rely on colour alone —
       badges keep their text label, which we preserve)
   ------------------------------------------------------------------------- */
body.theme-modern .badge { font-weight: 500; border-radius: var(--radius-pill); letter-spacing: .01em; }
body.theme-modern .badge-light-success,
body.theme-modern .badge-success { background: var(--success-subtle) !important; color: var(--success) !important; }
body.theme-modern .badge-light-warning,
body.theme-modern .badge-warning { background: var(--warning-subtle) !important; color: var(--warning) !important; }
body.theme-modern .badge-light-danger,
body.theme-modern .badge-danger { background: var(--danger-subtle) !important; color: var(--danger) !important; }
body.theme-modern .badge-light-primary,
body.theme-modern .badge-primary { background: var(--primary-subtle) !important; color: var(--primary-active) !important; }

/* ---------------------------------------------------------------------------
   11. MODALS
   ------------------------------------------------------------------------- */
body.theme-modern .modal-content {
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-elevated);
}
body.theme-modern .modal-header { border-bottom: 1px solid var(--border-subtle); }
body.theme-modern .modal-footer { border-top: 1px solid var(--border-subtle); }
body.theme-modern .modal-title { font-weight: 600; color: var(--ink); }

/* ---------------------------------------------------------------------------
   12. DROPDOWNS
   ------------------------------------------------------------------------- */
body.theme-modern .dropdown-menu {
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-md);
  padding: var(--space-xs);
}
body.theme-modern .dropdown-item { border-radius: var(--radius-sm); color: var(--ink-secondary); transition: background-color var(--dur-fast) var(--ease); }
body.theme-modern .dropdown-item:hover { background: var(--surface-2); color: var(--ink); }
body.theme-modern .dropdown-item.active,
body.theme-modern .dropdown-item:active { background: var(--primary); color: #fff; }

/* ---------------------------------------------------------------------------
   13. TABS
   ------------------------------------------------------------------------- */
body.theme-modern .nav-tabs { border-bottom: 1px solid var(--border); }
body.theme-modern .nav-tabs .nav-link { color: var(--ink-secondary); border: none; border-bottom: 2px solid transparent; border-radius: 0; }
body.theme-modern .nav-tabs .nav-link:hover { color: var(--ink); border-bottom-color: var(--border-strong); }
body.theme-modern .nav-tabs .nav-link.active {
  color: var(--primary); background: transparent; border-bottom: 2px solid var(--primary);
}
body.theme-modern .nav-pills .nav-link.active { background: var(--primary); box-shadow: none; border-radius: var(--radius-md); }

/* ---------------------------------------------------------------------------
   14. ALERTS / ERROR STATES
   ------------------------------------------------------------------------- */
body.theme-modern .alert { border: 1px solid transparent; border-radius: var(--radius-md); }
body.theme-modern .alert-success { background: var(--success-subtle); border-color: rgba(22,163,74,.25); color: var(--success); }
body.theme-modern .alert-danger  { background: var(--danger-subtle);  border-color: rgba(220,38,38,.25); color: var(--danger); }
body.theme-modern .alert-warning { background: var(--warning-subtle); border-color: rgba(217,119,6,.25); color: var(--warning); }
body.theme-modern .alert-info    { background: var(--info-subtle);    border-color: rgba(0,144,192,.25); color: var(--info); }

/* ---------------------------------------------------------------------------
   15. TOASTS  (toastr) + SWEETALERT
   ------------------------------------------------------------------------- */
body.theme-modern #toast-container > div { border-radius: var(--radius-md); box-shadow: var(--shadow-md); opacity: 1; }
body.theme-modern .toast-success { background-color: var(--success); }
body.theme-modern .toast-error   { background-color: var(--danger); }
body.theme-modern .toast-warning { background-color: var(--warning); }
body.theme-modern .toast-info    { background-color: var(--info); }

body.theme-modern .swal2-popup { border-radius: var(--radius-lg); font-family: var(--font-sans); box-shadow: var(--shadow-elevated); }
body.theme-modern .swal2-title { color: var(--ink); font-weight: 600; }
body.theme-modern .swal2-styled.swal2-confirm { background: var(--primary) !important; border-radius: var(--radius-md) !important; }

/* ---------------------------------------------------------------------------
   16. LOADING STATES  (reusable — used when screens are modernized)
   ------------------------------------------------------------------------- */
body.theme-modern .tm-skeleton {
  background: linear-gradient(90deg, var(--surface-2) 25%, var(--surface-3) 37%, var(--surface-2) 63%);
  background-size: 400% 100%;
  border-radius: var(--radius-sm);
  animation: tm-shimmer 1.4s ease infinite;
}
body.theme-modern .tm-skeleton-text { height: 12px; margin: 8px 0; }
@keyframes tm-shimmer { 0% { background-position: 100% 0; } 100% { background-position: 0 0; } }

/* Button loading spinner (add .tm-loading + a <span class="tm-spinner">) */
body.theme-modern .tm-spinner {
  display: inline-block; width: 1em; height: 1em; vertical-align: -.125em;
  border: 2px solid currentColor; border-right-color: transparent; border-radius: 50%;
  animation: tm-spin .6s linear infinite;
}
@keyframes tm-spin { to { transform: rotate(360deg); } }
body.theme-modern .dataTables_wrapper .dataTables_processing {
  border: 1px solid var(--border); border-radius: var(--radius-md);
  box-shadow: var(--shadow-md); color: var(--ink-secondary); background: var(--surface);
}

/* ---------------------------------------------------------------------------
   17. EMPTY STATES  (reusable container)
   ------------------------------------------------------------------------- */
body.theme-modern .tm-empty {
  text-align: center; padding: var(--space-3xl) var(--space-xl); color: var(--ink-muted);
}
body.theme-modern .tm-empty__icon { color: var(--ink-muted); margin-bottom: var(--space-md); }
body.theme-modern .tm-empty__title { color: var(--ink); font-weight: 600; margin-bottom: var(--space-xs); }
body.theme-modern .tm-empty__desc { color: var(--ink-secondary); margin-bottom: var(--space-lg); }

/* ---------------------------------------------------------------------------
   18. MICRO-INTERACTIONS  (subtle, fast, purposeful)
   ------------------------------------------------------------------------- */
body.theme-modern .card.tm-hoverable:hover { box-shadow: var(--shadow-md); transform: translateY(-2px); }
body.theme-modern .waves-effect { transition: background-color var(--dur) var(--ease); }

/* ---------------------------------------------------------------------------
   19. REDUCED MOTION  (accessibility — respect user preference)
   ------------------------------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
  body.theme-modern *,
  body.theme-modern *::before,
  body.theme-modern *::after {
    animation-duration: .001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .001ms !important;
    scroll-behavior: auto !important;
  }
}

/* ---------------------------------------------------------------------------
   20. RESPONSIVE FOUNDATION  (touch targets + contained horizontal scroll)
   ------------------------------------------------------------------------- */
@media (max-width: 767.98px) {
  body.theme-modern .btn { min-height: 40px; }
  body.theme-modern .form-control,
  body.theme-modern .custom-select { min-height: 42px; }
  /* keep wide tables scrolling inside their card, never the page body */
  body.theme-modern .card-datatable,
  body.theme-modern .table-responsive { overflow-x: auto; -webkit-overflow-scrolling: touch; }
}

/* ---------------------------------------------------------------------------
   21. LOGIN / AUTH  (scoped to .auth-wrapper — never affects in-app cards)
   ------------------------------------------------------------------------- */
body.theme-modern .auth-wrapper.auth-v1 {
  position: relative;
  min-height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: var(--space-xl);
  padding-bottom: 96px; /* clearance for the bottom brand mark */
  background:
    radial-gradient(1100px 460px at 50% -12%, rgba(0,144,192,.12), transparent 60%),
    var(--canvas);
}
body.theme-modern .auth-wrapper .auth-inner { width: 100%; max-width: 420px; }

body.theme-modern .auth-wrapper .card {
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-elevated);
  animation: tm-auth-in var(--dur-slow) var(--ease) both;
}
body.theme-modern .auth-wrapper .card .card-body { padding: var(--space-2xl); }
@keyframes tm-auth-in { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }

/* Brand logo */
body.theme-modern .auth-wrapper .brand-logo {
  display: flex; justify-content: center;
  margin: 0 0 var(--space-lg);
}
body.theme-modern .auth-wrapper .brand-logo img { max-width: 150px !important; height: auto; }

/* Fields */
body.theme-modern .auth-wrapper .form-group label,
body.theme-modern .auth-wrapper .form-label {
  font-weight: 500; color: var(--ink-secondary); margin-bottom: var(--space-xs);
}
body.theme-modern .auth-wrapper .form-control { height: 44px; font-size: .95rem; }

/* Primary CTA */
body.theme-modern .auth-wrapper .btn-block {
  height: 44px; font-weight: 600; margin-top: var(--space-xs);
}

/* OTP flow copy + code field */
body.theme-modern .auth-wrapper .auth-otp-form i.d-block {
  color: var(--ink-muted); font-style: normal; font-size: 12px !important; line-height: 1.5;
}
body.theme-modern .auth-wrapper .auth-otp-form p { color: var(--ink-secondary); font-size: .9rem; }
body.theme-modern .auth-wrapper #otp {
  text-align: center; letter-spacing: .4em; padding-left: .4em;
  font-family: var(--font-mono); font-size: 1.15rem; font-weight: 600;
}
/* keep the placeholder normal — spacing is only for typed digits */
body.theme-modern .auth-wrapper #otp::placeholder {
  letter-spacing: normal;
  font-family: var(--font-sans);
  font-weight: 400;
  font-size: .95rem;
}

/* Secondary/tertiary links + resend timer */
body.theme-modern .auth-wrapper .btn-link { color: var(--primary); font-weight: 500; }
body.theme-modern .auth-wrapper .btn-link:hover { color: var(--primary-hover); }
body.theme-modern .auth-wrapper #timer-span { display: inline-block; color: var(--ink-muted); font-size: .85rem; }

body.theme-modern .auth-wrapper .alert { border-radius: var(--radius-md); }

/* Bottom "leading company" mark: the inline white-invert filter is invisible on
   the light canvas — render it as a subtle dark watermark instead. */
body.theme-modern .auth-wrapper img[src*="leading_company"] {
  filter: brightness(0) !important;
  opacity: .28;
}

@media (max-width: 575.98px) {
  body.theme-modern .auth-wrapper .card .card-body { padding: var(--space-xl); }
  body.theme-modern .auth-wrapper .auth-inner { max-width: 100%; }
}

/* ---------------------------------------------------------------------------
   22. DASHBOARD  (scoped to #dashboard-ecommerce)
   ------------------------------------------------------------------------- */

/* Brand utility overrides — Vuexy purple -> PICWA cyan (scoped to theme) */
body.theme-modern .bg-primary { background-color: var(--primary) !important; }
body.theme-modern .text-blue,
body.theme-modern #dashboard-ecommerce .text-primary { color: var(--ink) !important; }

/* KPI tiles: style the inner .media as a clean card (gutters keep them apart) */
body.theme-modern #dashboard-ecommerce .info-box .media {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  padding: var(--space-lg);
  box-shadow: var(--shadow-subtle);
  transition: box-shadow var(--dur) var(--ease), transform var(--dur) var(--ease);
}
body.theme-modern #dashboard-ecommerce .info-box .media:hover {
  box-shadow: var(--shadow-md);
  transform: translateY(-2px);
}

/* Icon chip */
body.theme-modern #dashboard-ecommerce .icoleaf {
  background: var(--primary) !important;
  color: #fff !important;
  border-radius: var(--radius-md);
  display: inline-flex; align-items: center; justify-content: center;
  width: 42px; height: 42px;
  transition: transform var(--dur) var(--ease);
}
body.theme-modern #dashboard-ecommerce .info-box .media:hover .icoleaf { transform: scale(1.04); }

/* KPI number: data-forward hierarchy */
body.theme-modern #dashboard-ecommerce .info-count {
  color: var(--ink) !important;
  font-weight: 700;
  font-size: 1.6rem;
  line-height: 1.15;
  letter-spacing: -.01em;
}

/* Card header spacing + hover elevation (shadow only — no jump on big cards) */
body.theme-modern #dashboard-ecommerce .card .card-header { padding-bottom: var(--space-sm); }
body.theme-modern #dashboard-ecommerce .card .card-title { font-size: 1rem; }
body.theme-modern #dashboard-ecommerce .card:hover { box-shadow: var(--shadow-md); }

/* --- Slight entrance animation (opacity/transform only) ---
   fill-mode: backwards so the end state reverts to base and does NOT lock the
   hover transform; reduced-motion (global rule) collapses it to instant/visible. */
@keyframes tm-rise {
  from { opacity: 0; transform: translateY(10px); }
  to   { opacity: 1; transform: none; }
}
body.theme-modern #dashboard-ecommerce .info-box .media,
body.theme-modern #dashboard-ecommerce .card {
  animation: tm-rise var(--dur-slow) var(--ease) backwards;
}
body.theme-modern #dashboard-ecommerce .info-box:nth-child(1) .media { animation-delay: 40ms; }
body.theme-modern #dashboard-ecommerce .info-box:nth-child(2) .media { animation-delay: 90ms; }
body.theme-modern #dashboard-ecommerce .info-box:nth-child(3) .media { animation-delay: 140ms; }
body.theme-modern #dashboard-ecommerce .card { animation-delay: 160ms; }

/* --- Client dashboard: page header + modern stat cards --- */
body.theme-modern .tm-dash-header {
  display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap;
  gap: var(--space-md);
  margin: 0 0 var(--space-lg);
}
body.theme-modern .tm-dash-header__title { font-size: 1.5rem; font-weight: 700; letter-spacing: -.02em; margin: 0; color: var(--ink); }
body.theme-modern .tm-dash-header__sub { color: var(--ink-muted); margin: 2px 0 0; font-size: .9rem; }

body.theme-modern .tm-stat {
  display: flex; flex-direction: column; height: 100%;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  padding: var(--space-xl);
  box-shadow: var(--shadow-subtle);
  color: inherit; text-decoration: none;
  transition: box-shadow var(--dur) var(--ease), transform var(--dur) var(--ease), border-color var(--dur) var(--ease);
  animation: tm-rise var(--dur-slow) var(--ease) backwards;
}
body.theme-modern .tm-stat:hover {
  box-shadow: var(--shadow-md); transform: translateY(-2px);
  border-color: var(--border-strong); color: inherit; text-decoration: none;
}
body.theme-modern .tm-stats > [class*="col-"]:nth-child(1) .tm-stat { animation-delay: 40ms; }
body.theme-modern .tm-stats > [class*="col-"]:nth-child(2) .tm-stat { animation-delay: 90ms; }
body.theme-modern .tm-stats > [class*="col-"]:nth-child(3) .tm-stat { animation-delay: 140ms; }

body.theme-modern .tm-stat__icon {
  display: inline-flex; align-items: center; justify-content: center;
  width: 44px; height: 44px; border-radius: var(--radius-md);
  background: var(--primary-subtle); color: var(--primary);
  margin-bottom: var(--space-md);
  transition: transform var(--dur) var(--ease);
}
body.theme-modern .tm-stat:hover .tm-stat__icon { transform: scale(1.05); }
body.theme-modern .tm-stat__icon svg { width: 20px; height: 20px; }
body.theme-modern .tm-stat__label {
  text-transform: uppercase; letter-spacing: .05em; font-size: .72rem; font-weight: 600;
  color: var(--ink-muted); margin-bottom: var(--space-xs);
}
body.theme-modern .tm-stat__value {
  font-size: 1.55rem; font-weight: 700; line-height: 1.2; color: var(--ink); letter-spacing: -.01em;
  word-break: break-word;
}
body.theme-modern .tm-stat__sub { color: var(--ink-secondary); font-size: .85rem; margin-top: 2px; }
body.theme-modern .tm-stat__foot {
  margin-top: auto; padding-top: var(--space-md);
  display: inline-flex; align-items: center; gap: 6px;
  color: var(--primary); font-weight: 500; font-size: .85rem;
}
body.theme-modern .tm-stat__foot svg { width: 14px; height: 14px; transition: transform var(--dur) var(--ease); }
body.theme-modern .tm-stat:hover .tm-stat__foot svg { transform: translateX(3px); }

/* ---------------------------------------------------------------------------
   23. DASHBOARD LIST TABLES  (override core.css:27435 solid-blue header on the
       three client dashboard tables — Requested / Upcoming Leaves, Holidays)
   ------------------------------------------------------------------------- */
body.theme-modern #requestedLeaveDataTable_wrapper .table > thead > tr > th,
body.theme-modern #upcomingLeaveDataTable_wrapper  .table > thead > tr > th,
body.theme-modern #upcomingHolidaysDataTable_wrapper .table > thead > tr > th {
  background-color: var(--surface-2) !important;
  color: var(--ink-secondary) !important;
  font-weight: 600;
  font-size: .72rem;
  text-transform: uppercase;
  letter-spacing: .04em;
  padding: 12px 16px;
  border-top: 0;
  border-bottom: 1px solid var(--border);
}
/* rows / cells */
body.theme-modern #requestedLeaveDataTable td,
body.theme-modern #upcomingLeaveDataTable td,
body.theme-modern #upcomingHolidaysDataTable td {
  padding: 12px 16px;
  vertical-align: middle;
  border-top: 1px solid var(--border-subtle);
  color: var(--ink);
}
body.theme-modern #requestedLeaveDataTable tbody tr:hover,
body.theme-modern #upcomingLeaveDataTable tbody tr:hover,
body.theme-modern #upcomingHolidaysDataTable tbody tr:hover { background: var(--surface-2); }
/* muted weekday sub-label e.g. (Monday) */
body.theme-modern #requestedLeaveDataTable td i,
body.theme-modern #upcomingLeaveDataTable td i,
body.theme-modern #upcomingHolidaysDataTable td i { color: var(--ink-muted); font-style: normal; }
/* first-row cells: no top hairline (header already provides the divider) */
body.theme-modern #requestedLeaveDataTable tbody tr:first-child td,
body.theme-modern #upcomingLeaveDataTable tbody tr:first-child td,
body.theme-modern #upcomingHolidaysDataTable tbody tr:first-child td { border-top: 0; }
/* card header tightening + info footer */
body.theme-modern #dashboard-ecommerce .card-statistics .card-header { padding-bottom: var(--space-sm); }
body.theme-modern #dashboard-ecommerce .dataTables_info { color: var(--ink-muted); font-size: .8rem; padding-top: var(--space-sm); }

/* ---------------------------------------------------------------------------
   24. EMPLOYEE LIST  (avatar + badge + balance polish; cells use Vuexy classes
       so they degrade gracefully on Default/Linear too)
   ------------------------------------------------------------------------- */
body.theme-modern .datatables-ajax-active-dev .avatar,
body.theme-modern .datatables-ajax-all-dev .avatar { width: 36px; height: 36px; }
body.theme-modern .datatables-ajax-active-dev .avatar .avatar-content,
body.theme-modern .datatables-ajax-all-dev .avatar .avatar-content { font-size: .8rem; font-weight: 600; }
/* icon inside status/document badges */
body.theme-modern .badge svg { width: 12px; height: 12px; vertical-align: -1px; }
/* emphasized leave balance */
body.theme-modern .tm-balance { font-weight: 700; color: var(--ink); }
/* employee name link inherits ink, not link-blue, for a calmer table */
body.theme-modern .datatables-ajax-active-dev td a.font-weight-bold,
body.theme-modern .datatables-ajax-all-dev td a.font-weight-bold { color: var(--ink); }
body.theme-modern .datatables-ajax-active-dev td a.font-weight-bold:hover,
body.theme-modern .datatables-ajax-all-dev td a.font-weight-bold:hover { color: var(--primary); }
/* toolbar (count + quick filters) */
body.theme-modern .tm-toolbar { gap: var(--space-md); row-gap: var(--space-sm); }
body.theme-modern .tm-toolbar #activeDevCount,
body.theme-modern .tm-toolbar #allDevCount { font-size: .8rem; padding: .4em .8em; }
body.theme-modern .tm-toolbar .form-control-sm { min-width: 128px; height: 34px; }
body.theme-modern .tm-toolbar label { white-space: nowrap; }
/* Leaves: keep Approve/Reject side-by-side on one line */
body.theme-modern .datatables-ajax-pending-leave td:last-child,
body.theme-modern .datatables-ajax-history-leave td:last-child { white-space: nowrap; }
body.theme-modern .datatables-ajax-pending-leave td:last-child .btn,
body.theme-modern .datatables-ajax-history-leave td:last-child .btn { vertical-align: middle; }