:root {
    --ocean-blue: #07C3D6;
    --blue: #1870D1;
    --dark: #0C0C0C;
    --dark-2: #1E1E1E;
    --light: #F6F6F6;
    --red: #fd3649;
    --ocean-blue-light:#B0E0E6;
    --blue-light:#EFF7FF;
    --dark-gray: #767676;

    /* Semantic variables (light mode defaults) */
    --zf-primary: #246DFF;
    --zf-primary-dark: #1A52CC;
    --zf-primary-light: rgba(36, 109, 255, 0.1);
    --zf-secondary-bg: #F6F6F6;
    --zf-secondary-hover: #E5E7EB;
    --zf-text-primary: #111827;
    --zf-text-secondary: #6B7280;
    --zf-text-muted: #9CA3AF;
    --zf-text-placeholder: #9CA3AF;
    --zf-error: #fd3649;
    --zf-error-dark: #DC2626;
    --zf-error-light: rgba(253, 54, 73, 0.1);
    --zf-border: #E5E7EB;
    --zf-input-bg: #fff;
    --zf-disabled-bg: #F3F4F6;
    --zf-card-bg: #fff;
    --zf-card-border: #E5E7EB;
    --zf-card-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
    --zf-card-header-bg: #F9FAFB;
    --zf-card-footer-bg: #F9FAFB;
    --zf-ghost-hover: rgba(0, 0, 0, 0.04);
    --zf-section-bg: #F9FAFB;
    --zf-success: #16A34A;
    --zf-link: #246DFF;
    --zf-subtle: #6B7280;
    --zf-secondary: #07C3D6;
    --zf-tenant-gradient: linear-gradient(135deg, #246DFF 0%, #07C3D6 100%);
    --zf-sidebar-gradient: linear-gradient(180deg, #246DFF 0%, #F6F6F6 100%);

    /* Dashboard — extended palette */
    --zf-success-light: rgba(22, 163, 74, 0.1);
    --zf-warning: #F59E0B;
    --zf-warning-light: rgba(245, 158, 11, 0.1);
    --zf-purple: #8B5CF6;
    --zf-purple-light: rgba(139, 92, 246, 0.1);
    --zf-amber: #F59E0B;
    --zf-amber-light: rgba(245, 158, 11, 0.1);
    --zf-pink: #EC4899;
    --zf-pink-light: rgba(236, 72, 153, 0.1);
    --zf-card-shadow-hover: 0 10px 25px rgba(0, 0, 0, 0.08), 0 4px 10px rgba(0, 0, 0, 0.04);
    --zf-page-bg: #F3F4F6;
    --zf-chart-grid: rgba(0, 0, 0, 0.06);
    --zf-chart-text: #6B7280;
}

/* ================================ */
/* Dark Mode Variables              */
/* ================================ */

html[data-theme="dark"] {
    /* Root palette overrides */
    --light: #0D1117;
    --dark: #E6EDF3;
    --dark-2: #C9D1D9;
    --dark-gray: #8B949E;
    --blue-light: #1C2333;
    --red: #F85149;

    /* Semantic component variables */
    --zf-primary: #58A6FF;
    --zf-primary-dark: #388BFD;
    --zf-primary-light: rgba(88, 166, 255, 0.15);
    --zf-secondary-bg: #1C2333;
    --zf-secondary-hover: #30363D;
    --zf-text-primary: #E6EDF3;
    --zf-text-secondary: #8B949E;
    --zf-text-muted: #6E7681;
    --zf-text-placeholder: #6E7681;
    --zf-error: #F85149;
    --zf-error-dark: #DA3633;
    --zf-error-light: rgba(248, 81, 73, 0.15);
    --zf-border: #30363D;
    --zf-input-bg: #161B22;
    --zf-disabled-bg: #1C2333;
    --zf-card-bg: #161B22;
    --zf-card-border: #21262D;
    --zf-card-shadow: 0 1px 3px rgba(0, 0, 0, 0.3);
    --zf-card-header-bg: #1C2333;
    --zf-card-footer-bg: #1C2333;
    --zf-ghost-hover: rgba(255, 255, 255, 0.06);
    --zf-section-bg: #161B22;
    --zf-success: #3FB950;
    --zf-link: #58A6FF;
    --zf-subtle: #8B949E;
    --zf-secondary: #07C3D6;
    --zf-tenant-gradient: linear-gradient(135deg, #246DFF 0%, #07C3D6 100%);
    --zf-sidebar-gradient: linear-gradient(180deg, #246DFF 0%, #0D1117 100%);

    /* Dashboard — extended palette (dark mode) */
    --zf-success-light: rgba(63, 185, 80, 0.12);
    --zf-warning: #D29922;
    --zf-warning-light: rgba(210, 153, 34, 0.12);
    --zf-purple: #A78BFA;
    --zf-purple-light: rgba(167, 139, 250, 0.12);
    --zf-amber: #D29922;
    --zf-amber-light: rgba(210, 153, 34, 0.12);
    --zf-pink: #F472B6;
    --zf-pink-light: rgba(244, 114, 182, 0.12);
    --zf-card-shadow-hover: 0 8px 24px rgba(0, 0, 0, 0.4);
    --zf-page-bg: #0D1117;
    --zf-chart-grid: rgba(255, 255, 255, 0.06);
    --zf-chart-text: #8B949E;

    /* Bootstrap variable overrides — makes body text, headings,
       muted text, borders, and backgrounds dark-mode aware globally */
    --bs-body-color: #E6EDF3;
    --bs-body-color-rgb: 230, 237, 243;
    --bs-body-bg: #0D1117;
    --bs-heading-color: #E6EDF3;
    --bs-secondary-color: #8B949E;
    --bs-tertiary-color: #6E7681;
    --bs-emphasis-color: #fff;
    --bs-emphasis-color-rgb: 255, 255, 255;
    --bs-border-color: #30363D;
    --bs-secondary-bg: #161B22;
    --bs-tertiary-bg: #1C2333;
    --bs-link-color: #58A6FF;

    color-scheme: dark;
}

* {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
    text-decoration: none !important;
}

html {
    font-family: "Inter", sans-serif;
    font-weight: normal;
    background: var(--light);
    font-size: 14px;
}

body {
    font-family: "Inter", sans-serif;
    font-weight: normal;
    background: var(--light);
    font-size: 14px;
    display: flex;
    flex-direction: column;
    min-height: 100vh;
}

a, .btn-link {
    color: var(--zf-link);
}

.btn-primary {
    color: #fff;
    background-color: var(--zf-primary);
    border-color: var(--zf-primary-dark);
}

.btn:focus, .btn:active:focus, .btn-link.nav-link:focus, .form-control:focus, .form-check-input:focus {
  box-shadow: 0 0 0 0.1rem white, 0 0 0 0.25rem #258cfb;
}

.content {
    padding-top: 1.1rem;
}

h1:focus {
    outline: none;
}

.required-indicator {
    color: var(--red);
    margin-left: 0.125rem;
}

.validation-message {
    color: var(--red);
    font-size: 0.8125rem;
    margin-top: 0.25rem;
}

.valid.modified:not([type=checkbox]) {
    outline: 1px solid #26b050;
}

.invalid {
    outline: 1px solid #e50000;
}

.darker-border-checkbox.form-check-input {
    border-color: #929292;
}

.form-floating > .form-control-plaintext::placeholder, .form-floating > .form-control::placeholder {
    color: var(--bs-secondary-color);
    text-align: end;
}

.form-floating > .form-control-plaintext:focus::placeholder, .form-floating > .form-control:focus::placeholder {
    text-align: start;
}

footer {
  padding: 0.5rem;
  text-align: center;
}

html[data-theme="dark"] .text-muted {
    color: var(--bs-secondary-color) !important;
}

html[data-theme="dark"] .btn-primary {
    background-color: #388BFD;
    border-color: #58A6FF;
}

html[data-theme="dark"] .btn-secondary {
    background-color: #30363D;
    border-color: #30363D;
    color: #E6EDF3;
}

html[data-theme="dark"] .btn-outline-secondary {
    color: #C9D1D9;
    border-color: #30363D;
}

html[data-theme="dark"] .btn-outline-secondary:hover {
    background-color: #30363D;
    border-color: #30363D;
    color: #E6EDF3;
}

html[data-theme="dark"] .btn:focus,
html[data-theme="dark"] .btn:active:focus,
html[data-theme="dark"] .btn-link.nav-link:focus,
html[data-theme="dark"] .form-control:focus,
html[data-theme="dark"] .form-check-input:focus {
    box-shadow: 0 0 0 0.1rem #0D1117, 0 0 0 0.25rem #58A6FF;
}

html[data-theme="dark"] .valid.modified:not([type=checkbox]) {
    outline: 1px solid #3FB950;
}

html[data-theme="dark"] .invalid {
    outline: 1px solid #F85149;
}

html[data-theme="dark"] .darker-border-checkbox.form-check-input {
    border-color: #6E7681;
}

html[data-theme="dark"] footer {
    color: #8B949E;
}

html[data-theme="dark"] footer a {
    color: #58A6FF;
}

/* ================================================================
   CKEditor 5 balloon panels inside Bootstrap modals
   ================================================================
   CKEditor renders its floating UI — the link (hyperlink) balloon with
   its URL input, plus the dropdown/table pickers — in a `.ck-balloon-panel`
   appended to `.ck-body-wrapper` on <body>, at a default z-index of 1000
   (var(--ck-z-modal)). Bootstrap modals sit at z-index 1055, so every FAQ
   answer / Mission / Feature-block editor that lives inside a modal rendered
   its link balloon BEHIND the modal — the URL field was unclickable and the
   popup looked like it "appeared behind the main modal".

   Global here (app.css is loaded by every layout) so all six CMS FAQ modals
   and any other CKEditor-in-modal share one fix. `!important` is required:
   CKEditor injects its own `.ck.ck-balloon-panel { z-index: var(--ck-z-modal) }`
   rule into <head> at runtime, which would otherwise win by cascade order. */
.ck.ck-balloon-panel {
    z-index: 1060 !important;
}