/* ============================================================================
   QX Calm Light Overlay + Pale Palette (Bootstrap 5.3+)
   Load order:
     1) bootstrap.min.css
     2) qx-overlay.calm-light.css  (this file)

   Goals:
   - readable, calm light UI
   - premium cards
   - pale, consistent semantic colours (primary/secondary/success/info/warning/danger)
   - optional "soft" button variants
============================================================================ */

/* ----------------------------------------------------------------------------
   1) PALETTE + CORE TOKENS (covers ALL standard Bootstrap semantic colours)
---------------------------------------------------------------------------- */
:root,
:root[data-bs-theme="light"] {
    /* ---- Base surfaces + typography ---- */
    --bs-body-bg: #f6f7fb;
    --bs-body-color: #0f172a; /* slate-900 */

    --bs-secondary-color: rgba(15, 23, 42, .72);
    --bs-tertiary-color: rgba(15, 23, 42, .55);
    --bs-border-color: rgba(15, 23, 42, .12);
    /* QX surface helpers */
    --qx-surface: #ffffff;
    --qx-surface-2: #fbfcfe;
    --qx-border: rgba(15, 23, 42, .10);
    /* ---- QX radii + shadows ---- */
    --qx-radius: 16px;
    --qx-shadow-sm: 0 6px 18px rgba(2, 6, 23, .08);
    --qx-shadow: 0 14px 40px rgba(2, 6, 23, .10);
    /* ---- Semantic palette (pale + calm) ---- */
    /* Primary (calm blue) */
    --bs-primary: #5b8def;
    --bs-primary-rgb: 91, 141, 239;
    --bs-primary-bg-subtle: rgba(91, 141, 239, .10);
    --bs-primary-border-subtle: rgba(91, 141, 239, .22);
    --bs-primary-text-emphasis: #1e3a8a;
    /* Secondary (soft slate) */
    --bs-secondary: #94a3b8;
    --bs-secondary-rgb: 148, 163, 184;
    --bs-secondary-bg-subtle: rgba(148, 163, 184, .14);
    --bs-secondary-border-subtle: rgba(148, 163, 184, .28);
    --bs-secondary-text-emphasis: #334155;
    /* Success (pale green) */
    --bs-success: #6fcf97;
    --bs-success-rgb: 111, 207, 151;
    --bs-success-bg-subtle: rgba(111, 207, 151, .12);
    --bs-success-border-subtle: rgba(111, 207, 151, .26);
    --bs-success-text-emphasis: #065f46;
    /* Info (muted cyan) */
    --bs-info: #7dd3fc;
    --bs-info-rgb: 125, 211, 252;
    --bs-info-bg-subtle: rgba(125, 211, 252, .14);
    --bs-info-border-subtle: rgba(125, 211, 252, .30);
    --bs-info-text-emphasis: #075985;
    /* Warning (soft amber) */
    --bs-warning: #facc15;
    --bs-warning-rgb: 250, 204, 21;
    --bs-warning-bg-subtle: rgba(250, 204, 21, .16);
    --bs-warning-border-subtle: rgba(250, 204, 21, .32);
    --bs-warning-text-emphasis: #92400e;
    /* Danger (gentle red) */
    --bs-danger: #f87171;
    --bs-danger-rgb: 248, 113, 113;
    --bs-danger-bg-subtle: rgba(248, 113, 113, .14);
    --bs-danger-border-subtle: rgba(248, 113, 113, .30);
    --bs-danger-text-emphasis: #7f1d1d;
    /* Light / Dark (for completeness) */
    --bs-light: #f8fafc;
    --bs-light-rgb: 248, 250, 252;
    --bs-dark: #334155;
    --bs-dark-rgb: 51, 65, 85;
}

/* ----------------------------------------------------------------------------
   2) GLOBAL BASE
---------------------------------------------------------------------------- */
body {
    background: var(--bs-body-bg);
    color: var(--bs-body-color);
}

/* Bootstrap uses these a lot; make them consistent */
.text-muted {
    color: var(--bs-secondary-color) !important;
}

.small, .form-text {
    color: var(--bs-secondary-color);
}

/* Links calmer */
a {
    color: rgba(var(--bs-primary-rgb), .95);
    text-decoration-color: rgba(var(--bs-primary-rgb), .35);
}

    a:hover {
        color: rgba(var(--bs-primary-rgb), .80);
    }

/* ----------------------------------------------------------------------------
   3) CARDS + PANELS
---------------------------------------------------------------------------- */
.card {
    background: var(--qx-surface);
    border: 1px solid var(--qx-border);
    border-radius: var(--qx-radius);
}

    .card.shadow-sm {
        box-shadow: var(--qx-shadow-sm) !important;
    }

    /* Premium spacing (optional but nice for control panels) */
    .card .card-body {
        padding: 1.25rem;
    }

/* Utility: nicer section containers */
.qx-panel {
    background: var(--qx-surface);
    border: 1px solid var(--qx-border);
    border-radius: var(--qx-radius);
    box-shadow: var(--qx-shadow-sm);
}

/* ----------------------------------------------------------------------------
   4) FORMS
---------------------------------------------------------------------------- */
.form-control,
.form-select {
    background: var(--qx-surface-2);
    border-color: var(--qx-border);
    color: var(--bs-body-color);
    border-radius: 12px;
}

    .form-control:focus,
    .form-select:focus {
        border-color: rgba(var(--bs-primary-rgb), .35);
        box-shadow: 0 0 0 .25rem rgba(var(--bs-primary-rgb), .12);
    }

/* ----------------------------------------------------------------------------
   5) BUTTONS
   - Tame Bootstrap primary so it’s not shouty
   - Provide "soft" variants you can use for common actions like Add
---------------------------------------------------------------------------- */
.btn {
    border-radius: 12px;
}

/* Calm primary (still primary, but less bold) */
.btn-primary {
    background-color: rgba(var(--bs-primary-rgb), .90);
    border-color: rgba(var(--bs-primary-rgb), .30);
    box-shadow: 0 6px 16px rgba(var(--bs-primary-rgb), .12);
}

    .btn-primary:hover {
        background-color: rgba(var(--bs-primary-rgb), .84);
        border-color: rgba(var(--bs-primary-rgb), .36);
        box-shadow: 0 8px 22px rgba(var(--bs-primary-rgb), .16);
    }

    .btn-primary:active {
        background-color: rgba(var(--bs-primary-rgb), .80) !important;
        box-shadow: 0 4px 14px rgba(var(--bs-primary-rgb), .14) !important;
        transform: translateY(1px);
    }

/* Soft semantic buttons (recommended for "Add", "New", "Filter", etc.) */
.btn-soft-primary {
    color: rgba(var(--bs-primary-rgb), .95);
    background: var(--bs-primary-bg-subtle);
    border: 1px solid var(--bs-primary-border-subtle);
    box-shadow: none;
}

    .btn-soft-primary:hover {
        background: rgba(var(--bs-primary-rgb), .14);
        border-color: rgba(var(--bs-primary-rgb), .26);
    }

.btn-soft-secondary {
    color: rgba(var(--bs-dark-rgb), .90);
    background: var(--bs-secondary-bg-subtle);
    border: 1px solid var(--bs-secondary-border-subtle);
    box-shadow: none;
}

    .btn-soft-secondary:hover {
        background: rgba(var(--bs-secondary-rgb), .18);
        border-color: rgba(var(--bs-secondary-rgb), .32);
    }

.btn-soft-success {
    color: rgba(var(--bs-success-rgb), .95);
    background: var(--bs-success-bg-subtle);
    border: 1px solid var(--bs-success-border-subtle);
    box-shadow: none;
}

    .btn-soft-success:hover {
        background: rgba(var(--bs-success-rgb), .16);
        border-color: rgba(var(--bs-success-rgb), .30);
    }

.btn-soft-info {
    color: rgba(var(--bs-info-rgb), .95);
    background: var(--bs-info-bg-subtle);
    border: 1px solid var(--bs-info-border-subtle);
    box-shadow: none;
}

    .btn-soft-info:hover {
        background: rgba(var(--bs-info-rgb), .18);
        border-color: rgba(var(--bs-info-rgb), .34);
    }

.btn-soft-warning {
    color: rgba(var(--bs-warning-rgb), .95);
    background: var(--bs-warning-bg-subtle);
    border: 1px solid var(--bs-warning-border-subtle);
    box-shadow: none;
}

    .btn-soft-warning:hover {
        background: rgba(var(--bs-warning-rgb), .20);
        border-color: rgba(var(--bs-warning-rgb), .36);
    }

.btn-soft-danger {
    color: rgba(var(--bs-danger-rgb), .95);
    background: var(--bs-danger-bg-subtle);
    border: 1px solid var(--bs-danger-border-subtle);
    box-shadow: none;
}

    .btn-soft-danger:hover {
        background: rgba(var(--bs-danger-rgb), .18);
        border-color: rgba(var(--bs-danger-rgb), .34);
    }






/* ----------------------------------------------------------------------------
   QX Enhancement Pills - Force capitalize display
---------------------------------------------------------------------------- */
.badge[data-pill-index] {
    text-transform: none !important;
}

/* ----------------------------------------------------------------------------
   QX Semantic Palette — Swagger-style calm tones
   (pale background, clear meaning, no shouting)
---------------------------------------------------------------------------- */
:root,
:root[data-bs-theme="light"] {
    /* Primary → GET (blue) */
    --bs-primary: #4f83cc;
    --bs-primary-rgb: 79, 131, 204;
    --bs-primary-bg-subtle: rgba(79, 131, 204, .12);
    --bs-primary-border-subtle: rgba(79, 131, 204, .32);
    --bs-primary-text-emphasis: #1e3a8a;
    /* Success → POST (green) */
    --bs-success: #4fae88;
    --bs-success-rgb: 79, 174, 136;
    --bs-success-bg-subtle: rgba(79, 174, 136, .12);
    --bs-success-border-subtle: rgba(79, 174, 136, .32);
    --bs-success-text-emphasis: #065f46;
    /* Warning → PUT (amber) */
    --bs-warning: #d4a017;
    --bs-warning-rgb: 212, 160, 23;
    --bs-warning-bg-subtle: rgba(212, 160, 23, .14);
    --bs-warning-border-subtle: rgba(212, 160, 23, .36);
    --bs-warning-text-emphasis: #92400e;
    /* Danger → DELETE (red, but calm) */
    --bs-danger: #d96b6b;
    --bs-danger-rgb: 217, 107, 107;
    --bs-danger-bg-subtle: rgba(217, 107, 107, .14);
    --bs-danger-border-subtle: rgba(217, 107, 107, .36);
    --bs-danger-text-emphasis: #7f1d1d;
    /* Info (soft cyan) */
    --bs-info: #6fbcd3;
    --bs-info-rgb: 111, 188, 211;
    --bs-info-bg-subtle: rgba(111, 188, 211, .14);
    --bs-info-border-subtle: rgba(111, 188, 211, .34);
    --bs-info-text-emphasis: #075985;
    /* Secondary / neutral */
    --bs-secondary: #9aa6b2;
    --bs-secondary-rgb: 154, 166, 178;
    --bs-secondary-bg-subtle: rgba(154, 166, 178, .14);
    --bs-secondary-border-subtle: rgba(154, 166, 178, .32);
    --bs-secondary-text-emphasis: #334155;
}