/**
 * CECOM Frameword — Bootstrap-integrated Admin UI.
 *
 * Bootstrap handles: layout utilities, card chrome, form controls,
 * button base, modal, toasts, table, and spacing utilities.
 * This file overrides Bootstrap defaults with the plugin's design tokens
 * and provides components Bootstrap cannot replicate.
 *
 * @package CECOM
 */

/* ── Design Tokens ─────────────────────────────────── */

/*
 * Bootstrap Brand Color Override
 * Primary : #4f46e5  →  rgb(79, 70, 229)
 *
 * Derived via Bootstrap's own tint / shade formulas:
 *   text-emphasis  shade($primary, 60%) → #201c5c
 *   bg-subtle      tint($primary, 80%)  → #dcdafa
 *   border-subtle  tint($primary, 60%)  → #b9b5f5
 *   link-hover     shade($primary,  8%) → #4338ca
 *   focus-ring                          → rgba(79,70,229,.25)
 *
 * Usage: load AFTER bootstrap.min.css
 * Scope: color tokens only — no layout, no typography
 */

/* ══════════════════════════════════════════════════════
   :root  —  complete variable list (Bootstrap base)
             primary-related values replaced with brand
   ══════════════════════════════════════════════════════ */

/* ── Bootstrap Brand Color Override START - CLAUDE, DO NOT EDIT ───────────────────────────── */

:root {
    /* ── Theme colors ───────────────────────────────── */
    --bs-primary: #4f46e5; /* ★ brand */
    --bs-secondary: #6c757d;
    --bs-success: #198754;
    --bs-info: #0dcaf0;
    --bs-warning: #ffc107;
    --bs-danger: #dc3545;
    --bs-light: #f8f9fa;
    --bs-dark: #212529;

    /* ── Theme RGB ──────────────────────────────────── */
    --bs-primary-rgb: 79, 70, 229; /* ★ brand */
    --bs-secondary-rgb: 108, 117, 125;
    --bs-success-rgb: 25, 135, 84;
    --bs-info-rgb: 13, 202, 240;
    --bs-warning-rgb: 255, 193, 7;
    --bs-danger-rgb: 220, 53, 69;
    --bs-light-rgb: 248, 249, 250;
    --bs-dark-rgb: 33, 37, 41;

    /* ── Text emphasis ──────────────────────────────── */
    --bs-primary-text-emphasis: #201c5c; /* ★ shade 60% */
    --bs-secondary-text-emphasis: #2b2f32;
    --bs-success-text-emphasis: #0a3622;
    --bs-info-text-emphasis: #055160;
    --bs-warning-text-emphasis: #664d03;
    --bs-danger-text-emphasis: #58151c;
    --bs-light-text-emphasis: #495057;
    --bs-dark-text-emphasis: #495057;

    /* ── Background subtle ──────────────────────────── */
    --bs-primary-bg-subtle: #dcdafa; /* ★ tint 80% */
    --bs-secondary-bg-subtle: #e2e3e5;
    --bs-success-bg-subtle: #d1e7dd;
    --bs-info-bg-subtle: #cff4fc;
    --bs-warning-bg-subtle: #fff3cd;
    --bs-danger-bg-subtle: #f8d7da;
    --bs-light-bg-subtle: #fcfcfd;
    --bs-dark-bg-subtle: #ced4da;

    /* ── Border subtle ──────────────────────────────── */
    --bs-primary-border-subtle: #b9b5f5; /* ★ tint 60% */
    --bs-secondary-border-subtle: #c4c8cb;
    --bs-success-border-subtle: #a3cfbb;
    --bs-info-border-subtle: #9eeaf9;
    --bs-warning-border-subtle: #ffe69c;
    --bs-danger-border-subtle: #f1aeb5;
    --bs-light-border-subtle: #e9ecef;
    --bs-dark-border-subtle: #adb5bd;

    /* ── Links ──────────────────────────────────────── */
    --bs-link-color: #4f46e5; /* ★ brand */
    --bs-link-color-rgb: 79, 70, 229; /* ★ brand */
    --bs-link-decoration: underline;
    --bs-link-hover-color: #4338ca; /* ★ shade 8% */
    --bs-link-hover-color-rgb: 67, 56, 202; /* ★ shade 8% */

    /* ── Focus ring ─────────────────────────────────── */
    --bs-focus-ring-color: rgba(79, 70, 229, 0.25); /* ★ brand */
}

/* ══════════════════════════════════════════════════════
   COMPONENT OVERRIDES
   For components that read hardcoded values rather than
   inheriting from :root tokens directly.
   ══════════════════════════════════════════════════════ */

/* ── Buttons ─────────────────────────────────────────── */

.btn-primary {
    --bs-btn-color: #fff;
    --bs-btn-bg: #4f46e5;
    --bs-btn-border-color: #4f46e5;
    --bs-btn-hover-color: #fff;
    --bs-btn-hover-bg: #4338ca;
    --bs-btn-hover-border-color: #4338ca;
    --bs-btn-focus-shadow-rgb: 79, 70, 229;
    --bs-btn-active-color: #fff;
    --bs-btn-active-bg: #3730a3;
    --bs-btn-active-border-color: #3730a3;
    --bs-btn-active-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.125);
    --bs-btn-disabled-color: #fff;
    --bs-btn-disabled-bg: #4f46e5;
    --bs-btn-disabled-border-color: #4f46e5;
}

.btn-outline-primary {
    --bs-btn-color: #4f46e5;
    --bs-btn-border-color: #4f46e5;
    --bs-btn-hover-color: #fff;
    --bs-btn-hover-bg: #4f46e5;
    --bs-btn-hover-border-color: #4f46e5;
    --bs-btn-focus-shadow-rgb: 79, 70, 229;
    --bs-btn-active-color: #fff;
    --bs-btn-active-bg: #4f46e5;
    --bs-btn-active-border-color: #4f46e5;
    --bs-btn-active-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.125);
    --bs-btn-disabled-color: #4f46e5;
    --bs-btn-disabled-bg: transparent;
    --bs-btn-disabled-border-color: #4f46e5;
    --bs-gradient: none;
}

#wpcontent { padding: 20px 20px; }

.btn-link {
    --bs-btn-color: #4f46e5;
    --bs-btn-hover-color: #4338ca;
}

.bi { vertical-align: -0.125em; fill: currentColor; }

.bd-placeholder-img { font-size: 1.125rem; text-anchor: middle; user-select: none; }
    @media (min-width: 768px) { .bd-placeholder-img-lg { font-size: 3.5rem; } }

/* ── Form controls ───────────────────────────────────── */

.form-control:focus,
.form-select:focus {
    border-color: #4f46e5;
    box-shadow: 0 0 0 0.25rem rgba(79, 70, 229, 0.25);
}

.form-floating > .form-control:focus ~ label,
.form-floating > .form-control:not(:placeholder-shown) ~ label,
.form-floating > .form-select ~ label {
    color: #4f46e5;
}

/* ── Checkboxes & Radios ─────────────────────────────── */

.form-check-input:focus {
    border-color: #4f46e5;
    box-shadow: 0 0 0 0.25rem rgba(79, 70, 229, 0.25);
}

.form-check-input:checked {
    background-color: #4f46e5;
    border-color: #4f46e5;
}

/* ── Switches ────────────────────────────────────────── */

.form-switch .form-check-input:checked {
    background-color: #4f46e5;
    border-color: #4f46e5;
}

.form-switch .form-check-input:focus {
    border-color: #4f46e5;
    box-shadow: 0 0 0 0.25rem rgba(79, 70, 229, 0.25);
}

/* ── Range ───────────────────────────────────────────── */

.form-range:focus::-webkit-slider-thumb {
    box-shadow: 0 0 0 1px #fff, 0 0 0 0.25rem rgba(79, 70, 229, 0.25);
}
.form-range:focus::-moz-range-thumb {
    box-shadow: 0 0 0 1px #fff, 0 0 0 0.25rem rgba(79, 70, 229, 0.25);
}
.form-range::-webkit-slider-thumb {
    background-color: #4f46e5;
}
.form-range::-webkit-slider-thumb:active {
    background-color: #b9b5f5;
}
.form-range::-moz-range-thumb {
    background-color: #4f46e5;
}
.form-range::-moz-range-thumb:active {
    background-color: #b9b5f5;
}

/* ── Input group ─────────────────────────────────────── */

.input-group:focus-within .input-group-text {
    border-color: #4f46e5;
}

/* ── Nav / Pills / Tabs ──────────────────────────────── */

.nav-link {
    --bs-nav-link-hover-color: #4338ca;
}

.nav-link.active,
.nav-link:hover {
    color: #4f46e5;
}

.nav-pills {
    --bs-nav-pills-link-active-bg: #4f46e5;
}

.nav-pills .nav-link.active,
.nav-pills .show > .nav-link {
    background-color: #4f46e5;
}

.nav-tabs {
    --bs-nav-tabs-link-active-color: #4f46e5;
}

.nav-tabs .nav-link.active,
.nav-tabs .nav-item.show .nav-link {
    color: #4f46e5;
}

.nav-tabs .nav-link:hover,
.nav-tabs .nav-link:focus {
    color: #4338ca;
}

.navbar-nav .nav-link.active {
    color: #4f46e5;
}

/* ── Pagination ──────────────────────────────────────── */

.pagination {
    --bs-pagination-color: #4f46e5;
    --bs-pagination-hover-color: #4338ca;
    --bs-pagination-focus-color: #4338ca;
    --bs-pagination-focus-box-shadow: 0 0 0 0.25rem rgba(79, 70, 229, 0.25);
    --bs-pagination-active-bg: #4f46e5;
    --bs-pagination-active-border-color: #4f46e5;
}

/* ── Badges ──────────────────────────────────────────── */

.badge.bg-primary,
.badge.text-bg-primary {
    background-color: #4f46e5 !important;
    color: #fff !important;
}

/* ── Alerts ──────────────────────────────────────────── */

.alert-primary {
    --bs-alert-color: #201c5c;
    --bs-alert-bg: #dcdafa;
    --bs-alert-border-color: #b9b5f5;
    --bs-alert-link-color: #201c5c;
}

/* ── Progress ────────────────────────────────────────── */

.progress-bar,
.progress-bar.bg-primary {
    background-color: #4f46e5 !important;
}

/* ── Spinners ────────────────────────────────────────── */

.spinner-border.text-primary,
.spinner-grow.text-primary {
    color: #4f46e5 !important;
}

/* ── List group ──────────────────────────────────────── */

.list-group {
    --bs-list-group-active-bg: #4f46e5;
    --bs-list-group-active-border-color: #4f46e5;
    --bs-list-group-action-color: #4f46e5;
    --bs-list-group-action-hover-color: #4338ca;
    --bs-list-group-action-active-bg: #dcdafa;
}

.list-group-item.active {
    background-color: #4f46e5;
    border-color: #4f46e5;
}

/* ── Accordion ───────────────────────────────────────── */

.accordion {
    --bs-accordion-active-color: #4f46e5;
    --bs-accordion-active-bg: #dcdafa;
    --bs-accordion-btn-focus-box-shadow: 0 0 0 0.25rem rgba(79, 70, 229, 0.25);
    --bs-accordion-btn-active-icon: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='%234f46e5'%3e%3cpath fill-rule='evenodd' d='M1.646 4.646a.5.5 0 0 1 .708 0L8 10.293l5.646-5.647a.5.5 0 0 1 .708.708l-6 6a.5.5 0 0 1-.708 0l-6-6a.5.5 0 0 1 0-.708z'/%3e%3c/svg%3e");
}

.accordion-button:not(.collapsed) {
    color: #4f46e5;
    background-color: #dcdafa;
    box-shadow: inset 0 -1px 0 rgba(79, 70, 229, 0.15);
}

.accordion-button:focus {
    box-shadow: 0 0 0 0.25rem rgba(79, 70, 229, 0.25);
}

/* ── Dropdowns ───────────────────────────────────────── */

.dropdown-item.active,
.dropdown-item:active {
    background-color: #4f46e5;
    color: #fff;
}

/* ── Breadcrumb ──────────────────────────────────────── */

.breadcrumb-item a {
    color: #4f46e5;
}
.breadcrumb-item.active {
    color: #4f46e5;
}

/* ── Table ───────────────────────────────────────────── */

.table-primary {
    --bs-table-color: #201c5c;
    --bs-table-bg: #dcdafa;
    --bs-table-border-color: #b9b5f5;
    --bs-table-striped-bg: #d5d3f7;
    --bs-table-active-bg: #cecbf4;
    --bs-table-hover-bg: #d9d7f8;
}

/* ── Cards ───────────────────────────────────────────── */

.card.border-primary {
    border-color: #4f46e5 !important;
}
.card-header.bg-primary,
.card-footer.bg-primary {
    background-color: #4f46e5 !important;
    color: #fff;
}

/* ── Utilities ───────────────────────────────────────── */

.text-primary {
    color: #4f46e5 !important;
}
.bg-primary {
    background-color: #4f46e5 !important;
}
.border-primary {
    border-color: #4f46e5 !important;
}
.text-primary-emphasis {
    color: #201c5c !important;
}
.bg-primary-subtle {
    background-color: #dcdafa !important;
}
.border-primary-subtle {
    border-color: #b9b5f5 !important;
}
.link-primary {
    color: #4f46e5 !important;
}
.link-primary:hover,
.link-primary:focus {
    color: #4338ca !important;
}

/* ── Global focus fallback ───────────────────────────── */

:focus-visible {
    outline-color: #4f46e5;
}

/* Sidebar tab active indicator */
.admin-tab {
    border-left: 3px solid transparent;
    transition: background-color .15s ease-in-out, border-color .15s ease-in-out, color .15s ease-in-out;
    cursor: pointer;
}
.admin-tab:not(.disabled):not(.active):hover {
    color: var(--bs-emphasis-color) !important;
    background-color: var(--bs-primary-bg-subtle) !important;
}
.admin-tab.active {
    color: var(--bs-emphasis-color) !important;
    border-left-color: var(--bs-primary) !important;
    background-color: var(--bs-primary-bg-subtle) !important;
}

/* Panel fade-in */
@keyframes tabFadeIn {
    from { opacity: 0; transform: translateY(4px); }
    to   { opacity: 1; transform: translateY(0); }
}
.tab-panel { animation: tabFadeIn .15s ease-out; }

/* List-groups */
.form-check-input:checked + .form-checked-content { opacity: .5; }
.form-check-input-placeholder { border-style: dashed; }
[contenteditable]:focus { outline: 0; }
.list-group-checkable .list-group-item { cursor: pointer; }
.list-group-item-check { position: absolute; clip: rect(0,0,0,0); }
.list-group-item-check:hover + .list-group-item { background-color: var(--bs-secondary-bg); }
.list-group-item-check:checked + .list-group-item { color: #fff; background-color: var(--bs-primary); border-color: var(--bs-primary); }
.list-group-item-check[disabled] + .list-group-item,
.list-group-item-check:disabled + .list-group-item { pointer-events: none; opacity: .5; }
.list-group-radio .list-group-item { cursor: pointer; border-radius: .5rem; }
.list-group-radio .form-check-input { z-index: 2; margin-top: -.5em; }
.list-group-radio .list-group-item:hover,
.list-group-radio .list-group-item:focus { background-color: var(--bs-secondary-bg); }
.list-group-radio .form-check-input:checked + .list-group-item { background-color: var(--bs-body-bg); border-color: var(--bs-primary); box-shadow: 0 0 0 2px var(--bs-primary); }
.list-group-radio .form-check-input[disabled] + .list-group-item,
.list-group-radio .form-check-input:disabled + .list-group-item { pointer-events: none; opacity: .5; }

/* Jost variable font */
@font-face {
    font-family: 'Jost';
    src: url('../fonts/Jost/Jost-VariableFont_wght.ttf') format('truetype');
    font-optical-sizing: auto;
    font-weight: 100 900;
    font-style: normal;
    font-display: swap;
}

.plugin-title { font-family: 'Jost', sans-serif; }

/* ── Bootstrap Brand Color Override END - CLAUDE, DO NOT EDIT ───────────────────────────── */

/* ── This is the custom CSS area for Claude. START ───────────────────────────── */

/* ── This is the custom CSS area for Claude. END ───────────────────────────── */