/* ============================================================
   TrdCore — Purple Theme
   Palette named after: Wisteria, Lavender, Lilac, Orchid, Mauve,
   Amethyst, Plum, Aubergine, Violet, Midnight Purple.

   Every card/badge in the app is marked up as bg-*  text-white
   (see Dashboard/UserDashboard views), so the 7 semantic roles
   below are all deliberately medium-to-dark so white text stays
   readable — the 5 lightest swatches (Wisteria/Lavender/Lilac/
   Orchid/Mauve) are kept as raw variables for borders, inputs,
   and light-background accents instead.
   ============================================================ */

:root {
    /* ---- raw palette (as photographed) ---- */
    --color-wisteria: #F0E6F6;
    --color-lavender: #C9A8E0;
    --color-lilac: #E0C6EC;
    --color-orchid: #C88FD9;
    --color-mauve: #A98CB0;
    --color-amethyst: #7B3F9E;
    --color-plum: #5D2B6B;
    --color-aubergine: #3D1F3D;
    --color-violet: #4B2E83;
    --color-midnight: #1A0E24;

    /* ---- semantic roles (mapped from the palette) ---- */
    --theme-primary: var(--color-amethyst);
    --theme-primary-hover: #6A3488;
    --theme-primary-rgb: 123, 63, 158;

    --theme-secondary: var(--color-violet);
    --theme-secondary-hover: #3D2569;
    --theme-secondary-rgb: 75, 46, 131;

    --theme-success: #8A4FA6;
    /* Amethyst x Orchid */
    --theme-success-hover: #75407F;
    --theme-success-rgb: 138, 79, 166;

    --theme-info: #6B4E9E;
    /* Amethyst x Violet */
    --theme-info-hover: #5A4184;
    --theme-info-rgb: 107, 78, 158;

    --theme-warning: #9B5FA0;
    /* Mauve x Orchid */
    --theme-warning-hover: #854E8A;
    --theme-warning-rgb: 155, 95, 160;

    --theme-danger: var(--color-aubergine);
    --theme-danger-hover: #2E1730;
    --theme-danger-rgb: 61, 31, 61;

    --theme-dark: var(--color-midnight);
    --theme-dark-hover: #120919;
    --theme-dark-rgb: 26, 14, 36;

    /* Bootstrap's own variables — retints .text-primary, .border-primary,
       .table-primary, etc. (these read the CSS var; .btn-primary and the
       bg-* utilities below don't, so they're overridden explicitly). */
    --bs-primary: var(--theme-primary);
    --bs-primary-rgb: var(--theme-primary-rgb);
    --bs-secondary: var(--theme-secondary);
    --bs-secondary-rgb: var(--theme-secondary-rgb);
    --bs-success: var(--theme-success);
    --bs-success-rgb: var(--theme-success-rgb);
    --bs-info: var(--theme-info);
    --bs-info-rgb: var(--theme-info-rgb);
    --bs-warning: var(--theme-warning);
    --bs-warning-rgb: var(--theme-warning-rgb);
    --bs-danger: var(--theme-danger);
    --bs-danger-rgb: var(--theme-danger-rgb);
    --bs-dark: var(--theme-dark);
    --bs-dark-rgb: var(--theme-dark-rgb);
}

/* ===== Buttons (Bootstrap bakes these as hex, so override explicitly) ===== */
.btn-primary {
    background-color: var(--theme-primary) !important;
    border-color: var(--theme-primary) !important;
    color: #fff !important;
}

    .btn-primary:hover, .btn-primary:focus, .btn-check:focus + .btn-primary {
        background-color: var(--theme-primary-hover) !important;
        border-color: var(--theme-primary-hover) !important;
        box-shadow: 0 0 0 0.25rem rgba(var(--theme-primary-rgb), 0.5) !important;
    }

.btn-secondary {
    background-color: var(--theme-secondary) !important;
    border-color: var(--theme-secondary) !important;
    color: #fff !important;
}

    .btn-secondary:hover, .btn-secondary:focus {
        background-color: var(--theme-secondary-hover) !important;
        border-color: var(--theme-secondary-hover) !important;
    }

.btn-success {
    background-color: var(--theme-success) !important;
    border-color: var(--theme-success) !important;
    color: #fff !important;
}

    .btn-success:hover, .btn-success:focus {
        background-color: var(--theme-success-hover) !important;
        border-color: var(--theme-success-hover) !important;
    }

.btn-info {
    background-color: var(--theme-info) !important;
    border-color: var(--theme-info) !important;
    color: #fff !important;
}

    .btn-info:hover, .btn-info:focus {
        background-color: var(--theme-info-hover) !important;
        border-color: var(--theme-info-hover) !important;
    }

.btn-warning {
    background-color: var(--theme-warning) !important;
    border-color: var(--theme-warning) !important;
    color: #fff !important;
}

    .btn-warning:hover, .btn-warning:focus {
        background-color: var(--theme-warning-hover) !important;
        border-color: var(--theme-warning-hover) !important;
    }

.btn-danger {
    background-color: var(--theme-danger) !important;
    border-color: var(--theme-danger) !important;
    color: #fff !important;
}

    .btn-danger:hover, .btn-danger:focus {
        background-color: var(--theme-danger-hover) !important;
        border-color: var(--theme-danger-hover) !important;
    }

.btn-outline-primary {
    color: var(--theme-primary) !important;
    border-color: var(--theme-primary) !important;
}

    .btn-outline-primary:hover {
        background-color: var(--theme-primary) !important;
        color: #fff !important;
    }

/* ===== Dashboard stat cards (bg-* text-white, used everywhere) ===== */
.bg-primary {
    background-color: var(--theme-primary) !important;
}

.bg-secondary {
    background-color: var(--theme-secondary) !important;
}

.bg-success {
    background-color: var(--theme-success) !important;
}

.bg-info {
    background-color: var(--theme-info) !important;
}

.bg-warning {
    background-color: var(--theme-warning) !important;
}

.bg-danger {
    background-color: var(--theme-danger) !important;
}

.bg-dark {
    background-color: var(--theme-dark) !important;
}

/* subtle depth so stacked stat cards don't look completely flat */
.card.bg-primary, .card.bg-secondary, .card.bg-success,
.card.bg-info, .card.bg-warning, .card.bg-danger, .card.bg-dark {
    border: none;
    box-shadow: 0 4px 14px rgba(26, 14, 36, 0.35);
}

/* ===== alert-info (used on the PlanHead Amounts/Details screens) ===== */
.alert-info {
    background-color: var(--color-lavender) !important;
    border-color: var(--color-orchid) !important;
    color: var(--color-aubergine) !important;
}

/* ===== Navbar — dark purple instead of white ===== */
.app-navbar {
    background-color: var(--theme-dark) !important;
}

    .app-navbar .navbar-brand,
    .app-navbar .nav-link {
        color: var(--color-lilac) !important;
    }

        .app-navbar .nav-link:hover {
            color: var(--color-orchid) !important;
        }

    .app-navbar .text-primary {
        color: var(--color-orchid) !important;
    }

    .app-navbar .nav-link.text-danger {
        color: var(--color-mauve) !important;
    }

        .app-navbar .nav-link.text-danger:hover {
            color: var(--color-orchid) !important;
        }

/* ===== Focus ring (site.css had this as blue) ===== */
.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 rgba(var(--theme-primary-rgb), 0.6) !important;
}