/* custom.css (load after bootstrap.min.css) */

/* ===== Brand tokens ===== */
:root {
    /* Color system */
    --bs-primary: #335dff;  /* brand blue */
    --bs-secondary: #5b7083;
    --bs-success: #18a957;
    --bs-info: #5f9fff;
    --bs-warning: #ffb100;
    --bs-danger: #ff4d4f;
    --bs-light: #f7f8fa;
    --bs-dark: #14171a;

    /* Accents */
    --brand-gradient: linear-gradient(135deg, #335dff 0%, #2456ff 100%);

    /* Typography */
    --bs-body-font-family: ui-sans-serif, system-ui, -apple-system, "Segoe UI",
    Roboto, "Helvetica Neue", Arial, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
    --bs-body-font-size: 1rem;        /* 16px */
    --bs-body-line-height: 1.6;
    --heading-weight: 700;

    /* Radius & shadows */
    --radius-lg: 1rem;                /* big, modern corners */
    --radius-md: .75rem;
    --radius-sm: .5rem;
    --shadow-sm: 0 .5rem 1rem rgba(0,0,0,.06);
    --shadow-md: 0 .75rem 2rem rgba(0,0,0,.08);
    --shadow-lg: 0 1.25rem 3rem rgba(0,0,0,.12);

    /* Spacing rhythm (optional) */
    --space-1: .375rem;
    --space-2: .75rem;
    --space-3: 1.25rem;
    --space-4: 2rem;
}

/* Global typography polish */
h1, h2, h3 { font-weight: var(--heading-weight); letter-spacing: -.015em; }
h4, h5, h6 { font-weight: 600; letter-spacing: -.005em; }
.lead { color: #4c5561; }

/* Smooth backgrounds + subtle gradient on primary */
.btn-primary {
    background: var(--brand-gradient);
    border: none;
    box-shadow: var(--shadow-sm);
}
.btn-primary:hover { filter: brightness(.95); box-shadow: var(--shadow-md); }

/* Softer UI: larger radius on key components */
.card, .modal-content, .dropdown-menu, .form-control, .form-select, .btn,
.select2-container--default .select2-selection--single {
    border-radius: var(--radius-md);
}
.input-group > .select2:not(:last-child) .selection .select2-selection--single {
    border-top-right-radius: 0;
    border-bottom-right-radius: 0;
}
.input-group > .select2 ~ .select2 .selection .select2-selection--single {
    border-top-left-radius: 0;
    border-bottom-left-radius: 0;
}
.select2-selection--single.is-invalid {
    border-color: var(--bs-danger) !important;
}
.card { box-shadow: var(--shadow-sm); border: 1px solid rgba(0,0,0,.06); }
.card:hover { box-shadow: var(--shadow-md); }

/* Inputs: clearer focus, gentler borders */
.form-control, .form-select, .select2-container--default .select2-selection--single {
    border: 1px solid rgba(20,23,26,.12);
}
.form-control:focus, .form-select:focus, .select2-container--default:focus .select2-selection--single:focus {
    border-color: color-mix(in srgb, var(--bs-primary) 35%, white);
    box-shadow: 0 0 0 .25rem color-mix(in srgb, var(--bs-primary) 20%, transparent);
}


/* Navbar: glassy & compact */
.navbar.navbar-light, .navbar.navbar-dark {
    backdrop-filter: saturate(140%) blur(6px);
    box-shadow: var(--shadow-sm);
    border-bottom: 1px solid rgba(0,0,0,.06);
}
.navbar .nav-link { font-weight: 500; }

/* Tables: zebra + comfy density */
.table { --bs-table-striped-bg: rgba(20,23,26,.02); }
.table th { font-weight: 600; color: #2a2f36; }
.table td, .table th { padding-block: .50rem; }

/* Badges & pills: modern pills */
.badge { border-radius: 999px; padding: .4em .7em; }

/* Utility sprinkles */
.section { padding-block: var(--space-4); }
.kit-constrained { max-width: 1140px; margin-inline: auto; }

/*!* Optional dark mode sync *!*/
/*@media (prefers-color-scheme: dark) {*/
/*    :root {*/
/*        --bs-body-bg: #0b0d0f;*/
/*        --bs-body-color: #e8e9ea;*/
/*        --bs-light: #161a1e;*/
/*        --bs-dark: #e8e9ea;*/
/*    }*/
/*    .card { background: #121519; border-color: rgba(255,255,255,.06); }*/
/*    .navbar { background: rgba(12,14,16,.7)!important; }*/
/*}*/