/* ============================================================
   CharteredPro — Theme Layer
   ------------------------------------------------------------
   Companion to design-system.css. Handles:
     - Smooth dark/light transitions
     - Prevention of flash-of-wrong-theme (FOWT)
     - Theme toggle button polish (animated icon)
     - Brand selection colours
     - Print-mode force-light override

   Load AFTER design-system.css and BEFORE page-specific CSS.
   ============================================================ */

/* ------------------------------------------------------------
   1. SMOOTH THEME TRANSITIONS
   ------------------------------------------------------------
   Only the properties that change with theme are transitioned.
   This avoids animating layout, transforms, or opacity globally
   (which would be expensive and visually distracting).
   ------------------------------------------------------------ */
html:not(.theme-init):not(.theme-changing) body,
html:not(.theme-init):not(.theme-changing) body *:not(.no-theme-transition) {
  transition:
    background-color var(--dur-base, 180ms) var(--ease, cubic-bezier(0.4, 0, 0.2, 1)),
    border-color     var(--dur-base, 180ms) var(--ease, cubic-bezier(0.4, 0, 0.2, 1)),
    color            var(--dur-base, 180ms) var(--ease, cubic-bezier(0.4, 0, 0.2, 1)),
    fill             var(--dur-base, 180ms) var(--ease, cubic-bezier(0.4, 0, 0.2, 1)),
    stroke           var(--dur-base, 180ms) var(--ease, cubic-bezier(0.4, 0, 0.2, 1)),
    box-shadow       var(--dur-base, 180ms) var(--ease, cubic-bezier(0.4, 0, 0.2, 1));
}

/* When JS is applying an initial theme, disable transitions
   to prevent a visible "flash". js/theme.js adds .theme-init
   before applying the theme, and removes it on next frame. */
html.theme-init,
html.theme-init * {
  transition: none !important;
}

/* Optional: pages can add .theme-changing during a manual toggle
   if they want a coordinated one-time animation. */
html.theme-changing,
html.theme-changing * {
  transition: none !important;
}

/* Escape hatch for any element that should never animate on theme change */
.no-theme-transition,
.no-theme-transition * {
  transition: none !important;
}

/* Respect reduced motion */
@media (prefers-reduced-motion: reduce) {
  html body,
  html body * {
    transition: none !important;
  }
}

/* ------------------------------------------------------------
   2. BRAND SELECTION COLOUR
   ------------------------------------------------------------ */
::selection {
  background: var(--accent);
  color: var(--accent-fg);
  text-shadow: none;
}
::-moz-selection {
  background: var(--accent);
  color: var(--accent-fg);
  text-shadow: none;
}

/* ------------------------------------------------------------
   3. AUTOFILL POLISH
   ------------------------------------------------------------
   Browsers force yellow autofill styles that clash with themes.
   This keeps autofilled inputs on-brand.
   ------------------------------------------------------------ */
input:-webkit-autofill,
input:-webkit-autofill:hover,
input:-webkit-autofill:focus,
input:-webkit-autofill:active,
textarea:-webkit-autofill,
select:-webkit-autofill {
  -webkit-text-fill-color: var(--text);
  -webkit-box-shadow: 0 0 0 1000px var(--surface) inset !important;
  caret-color: var(--text);
  transition: background-color 5000s ease-in-out 0s;
  border-color: var(--border-strong);
}

/* ------------------------------------------------------------
   4. THEME TOGGLE BUTTON
   ------------------------------------------------------------
   A three-state toggle: system → light → dark → system.
   Icon animates via CSS. HTML shape:

   <button class="theme-toggle" data-theme-toggle
           aria-label="Toggle theme">
     <span class="theme-toggle-track" aria-hidden="true">
       <svg class="theme-toggle-icon theme-toggle-icon-sun" ...>...</svg>
       <svg class="theme-toggle-icon theme-toggle-icon-moon" ...>...</svg>
       <svg class="theme-toggle-icon theme-toggle-icon-system" ...>...</svg>
     </span>
     <span class="theme-toggle-label">Theme</span>
   </button>
   ------------------------------------------------------------ */
.theme-toggle {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 6px 10px;
  background: var(--surface);
  color: var(--text-muted);
  border: 1px solid var(--border);
  border-radius: var(--radius-full, 999px);
  font-size: var(--fs-sm, 0.8125rem);
  font-weight: var(--fw-medium, 500);
  cursor: pointer;
  line-height: 1;
  font-family: inherit;
  transition:
    background var(--dur-fast, 120ms) var(--ease, ease),
    border-color var(--dur-fast, 120ms) var(--ease, ease),
    color var(--dur-fast, 120ms) var(--ease, ease);
}
.theme-toggle:hover {
  color: var(--text);
  border-color: var(--accent);
  background: var(--surface-alt);
}
.theme-toggle:focus-visible {
  outline: 0;
  box-shadow: var(--focus-ring, 0 0 0 3px rgba(31, 111, 235, 0.35));
}

.theme-toggle-track {
  position: relative;
  width: 20px;
  height: 20px;
  display: inline-grid;
  place-items: center;
}

.theme-toggle-icon {
  position: absolute;
  inset: 0;
  width: 20px;
  height: 20px;
  color: currentColor;
  transform: scale(0.5) rotate(-90deg);
  opacity: 0;
  transition:
    transform var(--dur-base, 180ms) var(--ease, ease),
    opacity var(--dur-base, 180ms) var(--ease, ease);
  pointer-events: none;
}

/* Which icon is visible depends on the current theme + toggle mode */
html[data-theme="light"] .theme-toggle-icon-sun,
html[data-theme="dark"]  .theme-toggle-icon-moon,
html[data-theme="auto"]  .theme-toggle-icon-system {
  transform: scale(1) rotate(0deg);
  opacity: 1;
}

/* Fallback: if no data-theme is set at all, show system icon */
html:not([data-theme]) .theme-toggle-icon-system {
  transform: scale(1) rotate(0deg);
  opacity: 1;
}

.theme-toggle-label {
  display: inline-block;
  min-width: 44px;
  text-align: left;
  font-variant-numeric: tabular-nums;
}

/* Compact variant (icon only) */
.theme-toggle-compact {
  padding: 6px;
  border-radius: 50%;
  width: 36px;
  height: 36px;
  justify-content: center;
}
.theme-toggle-compact .theme-toggle-label {
  display: none;
}

/* ------------------------------------------------------------
   5. THEME-AWARE IMAGE HELPERS
   ------------------------------------------------------------
   Some images (illustrations, logos) need different variants
   per theme. Use one of the two patterns below.
   ------------------------------------------------------------ */

/* Pattern A: two <img> tags, one shown per theme */
.img-light-only { display: inline-block; }
.img-dark-only  { display: none; }

html[data-theme="dark"] .img-light-only { display: none; }
html[data-theme="dark"] .img-dark-only  { display: inline-block; }

@media (prefers-color-scheme: dark) {
  html[data-theme="auto"] .img-light-only { display: none; }
  html[data-theme="auto"] .img-dark-only  { display: inline-block; }
}

/* Pattern B: opacity dim for photographs in dark mode */
html[data-theme="dark"] .img-dim-in-dark,
html[data-theme="auto"] .img-dim-in-dark {
  filter: brightness(0.92) saturate(0.95);
}
@media (prefers-color-scheme: light) {
  html[data-theme="auto"] .img-dim-in-dark {
    filter: none;
  }
}

/* ------------------------------------------------------------
   6. LOGO / BRAND MARK TREATMENT
   ------------------------------------------------------------ */
.brand-mark-outline {
  width: 34px;
  height: 34px;
  border-radius: 8px;
  background: linear-gradient(135deg,
    var(--brand-blue-600, #1F6FEB) 0%,
    var(--brand-teal-500, #00B8A9) 100%);
  color: #fff;
  display: inline-grid;
  place-items: center;
  font-weight: 800;
  font-size: 13px;
  letter-spacing: 0.5px;
  box-shadow: 0 4px 12px rgba(31, 111, 235, 0.30);
  flex-shrink: 0;
}

.brand-wordmark {
  font-weight: 700;
  letter-spacing: 0.2px;
  color: var(--text);
}
.brand-wordmark span {
  color: var(--accent);
}

/* ------------------------------------------------------------
   7. SUBTLE BRAND GRADIENT BACKGROUNDS
   ------------------------------------------------------------
   Used on hero sections, empty states, marketing surfaces.
   ------------------------------------------------------------ */
.bg-brand-gradient {
  background:
    radial-gradient(1000px 500px at 15% 10%,
      rgba(31, 111, 235, 0.12), transparent 60%),
    radial-gradient(800px 400px at 85% 90%,
      rgba(0, 184, 169, 0.10), transparent 60%);
}

html[data-theme="light"] .bg-brand-gradient {
  background:
    radial-gradient(1000px 500px at 15% 10%,
      rgba(31, 111, 235, 0.08), transparent 60%),
    radial-gradient(800px 400px at 85% 90%,
      rgba(0, 184, 169, 0.06), transparent 60%);
}

@media (prefers-color-scheme: light) {
  html[data-theme="auto"] .bg-brand-gradient {
    background:
      radial-gradient(1000px 500px at 15% 10%,
        rgba(31, 111, 235, 0.08), transparent 60%),
      radial-gradient(800px 400px at 85% 90%,
        rgba(0, 184, 169, 0.06), transparent 60%);
  }
}

/* ------------------------------------------------------------
   8. DIVIDERS
   ------------------------------------------------------------ */
.divider {
  height: 1px;
  background: var(--border);
  border: 0;
  margin: var(--sp-6, 24px) 0;
}
.divider-strong {
  height: 1px;
  background: var(--border-strong);
  border: 0;
  margin: var(--sp-6, 24px) 0;
}
.divider-text {
  display: flex;
  align-items: center;
  gap: var(--sp-3, 12px);
  color: var(--text-soft);
  font-size: var(--fs-xs, 0.75rem);
  text-transform: uppercase;
  letter-spacing: 0.08em;
  margin: var(--sp-5, 20px) 0;
}
.divider-text::before,
.divider-text::after {
  content: "";
  flex: 1;
  height: 1px;
  background: var(--border);
}

/* ------------------------------------------------------------
   9. FOCUS-VISIBLE OVERRIDE FOR THEME-CRITICAL ELEMENTS
   ------------------------------------------------------------ */
a:focus-visible,
button:focus-visible,
[role="button"]:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible {
  outline: 0;
  box-shadow: var(--focus-ring, 0 0 0 3px rgba(31, 111, 235, 0.35));
  border-radius: var(--radius-sm, 6px);
}

/* ------------------------------------------------------------
   10. LINK UNDERLINE POLISH
   ------------------------------------------------------------ */
a:not(.btn):not(.tab):not(.no-underline) {
  text-underline-offset: 3px;
  text-decoration-thickness: 1px;
  text-decoration-color: color-mix(in oklab, var(--link) 40%, transparent);
}
a:not(.btn):not(.tab):not(.no-underline):hover {
  text-decoration-color: currentColor;
}

/* ------------------------------------------------------------
   11. STATUS PILL VARIANTS FOR PROFESSIONAL REVIEW STATES
   ------------------------------------------------------------
   Aligned to the review states defined in the Master Build
   Specification: draft, prepared, submitted_for_review,
   under_review, review_comments, returned, approved, finalized,
   locked.
   ------------------------------------------------------------ */
.review-state {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 3px 10px;
  border-radius: var(--radius-full, 999px);
  font-size: var(--fs-xs, 0.75rem);
  font-weight: var(--fw-semibold, 600);
  line-height: 1;
  border: 1px solid transparent;
  white-space: nowrap;
}

.review-state::before {
  content: "";
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: currentColor;
  flex-shrink: 0;
}

.review-state-draft {
  background: var(--surface-alt);
  color: var(--text-muted);
  border-color: var(--border);
}
.review-state-prepared {
  background: var(--info-bg);
  color: var(--info-fg);
}
.review-state-submitted_for_review,
.review-state-under_review {
  background: var(--warning-bg);
  color: var(--warning-fg);
}
.review-state-review_comments,
.review-state-returned {
  background: var(--danger-bg);
  color: var(--danger-fg);
}
.review-state-approved,
.review-state-finalized {
  background: var(--success-bg);
  color: var(--success-fg);
}
.review-state-locked {
  background: var(--accent-soft-bg);
  color: var(--accent-soft-fg);
}

/* ------------------------------------------------------------
   12. COMPLIANCE / DEADLINE BUCKET COLOURS
   ------------------------------------------------------------ */
.deadline-bucket {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 3px 10px;
  border-radius: var(--radius-full, 999px);
  font-size: var(--fs-xs, 0.75rem);
  font-weight: var(--fw-semibold, 600);
  line-height: 1;
}

.deadline-bucket-overdue      { background: var(--danger-bg);  color: var(--danger-fg); }
.deadline-bucket-due_soon     { background: var(--warning-bg); color: var(--warning-fg); }
.deadline-bucket-upcoming     { background: var(--info-bg);    color: var(--info-fg); }
.deadline-bucket-filed        { background: var(--success-bg); color: var(--success-fg); }
.deadline-bucket-verified     { background: var(--success-bg); color: var(--success-fg); }
.deadline-bucket-exempt,
.deadline-bucket-not_applicable {
  background: var(--surface-alt);
  color: var(--text-soft);
}

/* ------------------------------------------------------------
   13. REGULATORY UNCERTAINTY BANNER
   ------------------------------------------------------------
   Displayed anywhere the platform surfaces a regulatory value
   whose source has not been recently verified or is marked draft.
   ------------------------------------------------------------ */
.regulatory-warning {
  display: flex;
  gap: 10px;
  align-items: flex-start;
  padding: 10px 14px;
  border-radius: var(--radius-md, 8px);
  border: 1px dashed var(--warning-500, #F59E0B);
  background: var(--warning-bg);
  color: var(--warning-fg);
  font-size: var(--fs-xs, 0.75rem);
  line-height: 1.45;
}
.regulatory-warning strong {
  color: var(--warning-fg);
}

/* ------------------------------------------------------------
   14. OFFLINE INDICATOR (used across the app)
   ------------------------------------------------------------ */
.offline-indicator {
  position: fixed;
  left: 50%;
  transform: translateX(-50%);
  bottom: 20px;
  z-index: var(--z-toast, 1400);
  display: none;
  align-items: center;
  gap: 8px;
  padding: 8px 14px;
  background: var(--danger-500);
  color: #fff;
  border-radius: var(--radius-full, 999px);
  font-size: var(--fs-sm, 0.8125rem);
  font-weight: var(--fw-semibold, 600);
  box-shadow: 0 8px 20px rgba(220, 38, 38, 0.35);
}
.offline-indicator.is-visible { display: inline-flex; }
.offline-indicator .dot {
  width: 8px; height: 8px;
  border-radius: 50%;
  background: #fff;
  animation: offline-pulse 1.4s ease-in-out infinite;
}
@keyframes offline-pulse {
  0%, 100% { opacity: 1; transform: scale(1); }
  50%      { opacity: 0.5; transform: scale(1.3); }
}

/* ------------------------------------------------------------
   15. NIGERIAN NAIRA CURRENCY DISPLAY
   ------------------------------------------------------------ */
.money {
  font-family: var(--font-numeric, inherit);
  font-variant-numeric: tabular-nums lining-nums;
  white-space: nowrap;
}
.money-neg { color: var(--danger-fg); }
.money-pos { color: var(--success-fg); }
.money-large { font-size: var(--fs-lg, 1.125rem); font-weight: var(--fw-semibold, 600); }

/* ------------------------------------------------------------
   16. PRINT — ALWAYS FORCE LIGHT THEME FOR PDF OUTPUT
   ------------------------------------------------------------ */
@media print {
  html,
  html[data-theme="dark"],
  html[data-theme="auto"] {
    --bg:              #FFFFFF;
    --bg-elev-1:       #FFFFFF;
    --bg-elev-2:       #FFFFFF;
    --bg-elev-3:       #FFFFFF;
    --surface:         #FFFFFF;
    --surface-alt:     #FFFFFF;
    --surface-muted:   #F5F7FA;
    --border:          #999999;
    --border-strong:   #666666;
    --border-subtle:   #CCCCCC;
    --text:            #000000;
    --text-strong:     #000000;
    --text-muted:      #333333;
    --text-soft:       #555555;
    --link:            #000000;
    --accent:          #000000;
    --accent-fg:       #FFFFFF;
    --success-fg:      #0A6B2E;
    --warning-fg:      #7A4A00;
    --danger-fg:       #8B0000;
    --info-fg:         #003D6B;
    --shadow-sm: none;
    --shadow-md: none;
    --shadow-lg: none;
    --shadow-xl: none;
    color-scheme: light;
  }

  .theme-toggle,
  .offline-indicator {
    display: none !important;
  }
}

/* ============================================================
   End of theme.css
   ============================================================ */