/* ═══════════════════════════════════════════════════════════════════
         BRAND PALETTE — change these to try different looks.
         Shadows use --brand-shadow-color as R,G,B (no #); e.g. 13, 59, 76.
         Alternate ideas: navy (#0f172a / #1e3a5f), forest (#1b4332 / #40916c),
         berry (#5c2d4a / #c44569), slate (#334155 / #64748b).
         ═══════════════════════════════════════════════════════════════════ */
:root {
    /* Light mode tokens */
    --bg-0: #f7f8fb;
    --bg-1: #ffffff;
    --panel: rgba(255,255,255,.92);
    --panel-2: rgba(255,255,255,.70);
    --stroke: rgba(15,23,42,.12);
    --stroke-2: rgba(15,23,42,.08);
    --text: rgba(15,23,42,.92);
    --muted: rgba(15,23,42,.64);
    --muted-2: rgba(15,23,42,.48);
    --accent: #0284c7; /* sky-600 */
    --accent-2: #7c3aed; /* violet-600 */
    --accent-soft: rgba(2,132,199,.14);
    --accent-soft-2: rgba(124,58,237,.12);
    --radius: 16px;
    --radius-sm: 12px;
    --shadow: 0 18px 60px rgba(2,6,23,.10);
    --shadow-soft: 0 10px 30px rgba(2,6,23,.08);
    --mono: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
    --sans: ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial;
    /* Primary brand (headings, key UI, media frames) */
    --brand-primary: #0d3b4c;
    --brand-primary-soft: #1a5566;
    --brand-primary-muted: rgba(13, 59, 76, 0.12);
    /* Accent (CTAs, links, highlights, icons) */
    --brand-accent: #c45c26;
    --brand-accent-hover: #a04a1e;
    --brand-accent-muted: rgba(196, 92, 38, 0.15);
    /* Text */
    --brand-text: #0d2d38;
    --brand-text-muted: #4a6572;
    --brand-text-soft: #6b7f88;
    /* Surfaces */
    --brand-surface: #f0f4f5;
    --brand-surface-elevated: #ffffff;
    --brand-surface-overlay: #f8fafb;
    /* Borders & dividers */
    --brand-border: #c5d1d6;
    --brand-border-strong: #9badb5;
    /* Shadows (R,G,B only for rgba(); update if you change primary) */
    --brand-shadow-color: 13, 59, 76;
    --brand-radius: 16px;
    --brand-radius-lg: 30px;
    /* Shared width and UI tokens */
    --sidebar-width: 280px;
    --app-shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.04), 0 1px 4px rgba(0, 0, 0, 0.04);
    --app-shadow-md: 0 2px 8px rgba(0, 0, 0, 0.06), 0 4px 16px rgba(0, 0, 0, 0.06);
    --app-radius-md: 0.5rem;
    --app-radius-lg: 0.75rem;
    /* Font family (App Typography) */
    --app-font-sans: "Inter", system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", "Liberation Sans", sans-serif;
    /* Font sizes (rem) */
    --app-text-xs: 0.75rem; /* 12 */
    --app-text-sm: 0.875rem; /* 14 */
    --app-text-md: 1rem; /* 16 */
    --app-text-lg: 1.125rem; /* 18 */
    --app-text-xl: 1.25rem; /* 20 */
    --app-text-2xl: 1.5rem; /* 24 */
    --app-text-3xl: 1.875rem; /* 30 */
    --app-text-4xl: 2.25rem; /* 36 */
    /* Line heights */
    --app-leading-tight: 1.2;
    --app-leading-snug: 1.35;
    --app-leading-normal: 1.5;
    /* Font weights (Inter supports 100-900) */
    --app-weight-thin: 100;
    --app-weight-extralight: 200;
    --app-weight-light: 300;
    --app-weight-regular: 400;
    --app-weight-medium: 500;
    --app-weight-semibold: 600;
    --app-weight-bold: 700;
    --app-weight-extrabold: 800;
    --app-weight-black: 900;
    /* Letter spacing */
    --app-tracking-tight: -0.015em;
    --app-tracking-normal: 0;
    --app-tracking-wide: 0.02em;
}

* {
    box-sizing: border-box;
}

html, body {
    height: 100%;
    tab-size: 2;
    hanging-punctuation: first allow-end last;
    word-break: break-word;
    font-family: var(--app-font-sans);
    font-optical-sizing: auto;
    font-feature-settings: "ss01" 1, "ss02" 1; /* optional Inter stylistic sets */
}

body {
    margin: 0;
    color: var(--text);
    background: radial-gradient(900px 500px at 10% 0%, var(--accent-soft), transparent 60%), radial-gradient(700px 420px at 95% 10%, var(--accent-soft-2), transparent 55%), linear-gradient(180deg, var(--bg-0) 0%, #eef2ff 45%, var(--bg-0) 100%);
    overflow-x: hidden;
    background-attachment: fixed;
    font-size: var(--app-text-md);
    line-height: var(--app-leading-normal);
    font-weight: var(--app-weight-regular);
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}


@media (min-width: 768px) {
    html {
        font-size: 16px;
    }
}




#body-content {
    width: 100%;
    min-height: 100vh;
}

main {
    min-width: 0; /* important in flex layouts to prevent overflow issues */
}

.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;
}

input.form-check-input {
    border-color: #666
}

.shp-mark {
    display:inline-block;
    width: 18px;
    height: 18px;
    border: 2px solid #1e1e1e;
    background: linear-gradient(135deg, #b65a2a 0 50%, transparent 50% 100%);
    flex: 0 0 auto;
}

/* Sidebar container */
#side-menu {
    background: linear-gradient(180deg, rgba(255,255,255,.14), rgba(255,255,255,.30));
    box-shadow: var(--shadow);
    width: 100%; /* small screens: acts like a top bar */
}

/* Offcanvas width: use 400px everywhere */
#sidebar-offcanvas {
    --bs-offcanvas-width: var(--sidebar-width);
}

/* md+ : sidebar becomes a fixed left column, main fills the rest */
@media (min-width: 768px) {
    #side-menu {
        width: var(--sidebar-width);
        flex: 0 0 var(--sidebar-width);
        min-height: 100vh;
        border-right: 1px solid rgba(0,0,0,.1);
    }

    #main-content {
        flex: 1 1 auto;
    }
}

.sidebar-menu .list-group-item {
    border: 0;
    border-radius: 0;
    padding: .65rem 1rem;
    font-weight: 400;
}

.sidebar-menu .list-group-item-title {
    border: 0;
    border-radius: 0;
    padding: .65rem 1rem;
    font-weight: 700;
}

.sidebar-menu .list-group-item-action {
}

    .sidebar-menu .list-group-item-action:hover {
        background-color: rgba(255,255,255,.8);
    }
    /*
.sidebar-menu .list-group-item.active {
    background-color: rgba(255,255,255,.95);
}*/

.btn-icon {
    display: inline-flex;
    align-items: center;
}


/* ... Context Button */

.btn-context-menu {
    display: inline-flex;
    align-items: center;
    background-color: #fff;
    padding: 4px;
    width: 50px;
    height: 45px;
}

    .btn-context-menu:hover {
        border: solid 1px #aaa;
        background-color: #f6f6f6;
    }


.btn-context-menu-sm {
    width: 32px;
    height: 32px;
}



/* blue plus sign plus 'create a new ____' text */
.btn-add {
    display: inline-flex;
    align-items: center;
    color: var(--bs-primary);
    background-color: #fff;
}

    .btn-add:hover {
        color: var(--bs-primary);
        outline: solid 1px #999;
    }

/* the icon inside the button should fill the whole button*/
.btn-context-menu > * {
    flex-grow: 1;
}


.panel {
    border: 1px solid var(--stroke);
    background: linear-gradient(180deg, rgba(255,255,255,.92), rgba(255,255,255,.70));
    border-radius: var(--radius);
    box-shadow: var(--shadow);
}

/* Card List */
.card-list {
    border: var(--bs-border-width) solid var(--bs-border-color);
    border-radius: .375rem;
}

    .card-list .card {
        border: none;
        border-bottom: solid 1px var(--bs-border-color-translucent);
        border-radius: 0;
        background: var(--bs-card-bg);
    }

        .card-list .card:first-child {
            border-radius: .375rem .375rem 0 0;
        }

        .card-list .card:last-child {
            border-bottom: none;
            border-radius: 0 0 .375rem .375rem;
        }

        .card-list .card:only-child {
            border-radius: .375rem;
            border-bottom: none;
        }

.page-link:hover {
    outline: solid 1px #999;
}



/* defined max-width values for sections */
.section-mw-small {
    max-width: 550px;
}

.section-mw-medium {
    max-width: 850px;
}

/* Page-level action toolbar: create, navigate, tools */
.page-actions {
    display: flex;
    flex-wrap: nowrap;
    align-items: center;
    gap: 0.25rem;
    padding: 0 0 0.75rem 0;
    border-bottom: 1px solid var(--bs-border-color);
}

.page-action-link {
    display: inline-flex;
    align-items: center;
    gap: 0.375rem;
    padding: 0.375rem 0.75rem;
    font-size: var(--app-text-sm);
    font-weight: var(--app-weight-medium);
    color: var(--bs-body-color);
    text-decoration: none;
    background: transparent;
    border: none;
    border-radius: var(--app-radius-md);
    white-space: nowrap;
    transition: background-color 0.15s ease, color 0.15s ease;
    cursor: pointer;
}

.page-action-link:hover,
.page-action-link:focus-visible {
    background-color: var(--bs-gray-200);
    color: var(--bs-body-color);
    text-decoration: none;
}

.page-action-link:active {
    background-color: var(--bs-gray-300);
}

.page-action-link--primary {
    color: var(--bs-primary);
}

.page-action-link--primary:hover,
.page-action-link--primary:focus-visible {
    color: var(--bs-primary);
    background-color: rgba(var(--bs-primary-rgb), 0.08);
}

.page-action-link--primary:active {
    background-color: rgba(var(--bs-primary-rgb), 0.14);
}

.page-action-link .material-symbols-outlined,
.btn-add .material-symbols-outlined {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 1.25rem;
    line-height: 1;
    flex-shrink: 0;
}

.page-actions__separator {
    width: 1px;
    align-self: stretch;
    margin: 0.125rem 0.125rem;
    background: var(--bs-border-color);
    opacity: 0.5;
}

/* Overflow menu for page-actions on mobile */
.page-actions__overflow {
    display: none;
}

@media (max-width: 575.98px) {
    .page-actions__more {
        display: none;
    }

    .page-actions__overflow {
        display: inline-flex;
    }
}

/* Filter/search form container */
.filter-bar {
    padding: 1rem 1.25rem;
}

.filter-bar .form-label {
    margin-bottom: 0.25rem;
    font-size: var(--app-text-xs);
    text-transform: uppercase;
    letter-spacing: var(--app-tracking-wide);
    color: var(--bs-secondary);
}

.filter-bar .form-control,
.filter-bar .form-select {
    border-radius: var(--app-radius-md);
    border-color: var(--bs-border-color);
    transition: border-color 0.15s ease, box-shadow 0.15s ease;
}

.filter-bar .form-control:focus,
.filter-bar .form-select:focus {
    border-color: var(--bs-primary);
    box-shadow: 0 0 0 3px rgba(var(--bs-primary-rgb), 0.15);
}

.filter-bar .btn[type="submit"] {
    min-height: 2.75rem;
    padding-left: 1.25rem;
    padding-right: 1.25rem;
    border-radius: var(--app-radius-md);
    font-weight: var(--app-weight-semibold);
    transition: transform 0.15s ease, box-shadow 0.15s ease;
}

.filter-bar .btn[type="submit"]:hover {
    transform: translateY(-1px);
    box-shadow: var(--app-shadow-sm);
}

.filter-bar .btn[type="submit"]:active {
    transform: translateY(0);
}

@media (max-width: 767.98px) {
    .filter-bar .btn[type="submit"] {
        width: 100%;
    }
}

/* Sort direction toggle in filter-bar: icon reflects current state */
.filter-bar .sort-direction-wrap {
    display: flex;
    align-items: stretch;
}

.filter-bar .sort-direction-wrap .sort-desc-icon {
    display: none;
}

.filter-bar .sort-direction-wrap .sort-asc-icon {
    display: inline-flex;
}

.filter-bar .sort-direction-wrap:has(#sortDescending:checked) .sort-asc-icon {
    display: none;
}

.filter-bar .sort-direction-wrap:has(#sortDescending:checked) .sort-desc-icon {
    display: inline-flex;
}

/* Skill–Certification Matrix: sticky header + first column, cell states, focus */
.skill-matrix-wrapper {
    overflow: auto;
    max-height: 70vh;
}
.skill-matrix {
    margin-bottom: 0;
}
.skill-matrix__header {
    position: sticky;
    top: 0;
    z-index: 2;
    background: var(--bs-light);
}
.skill-matrix__header th {
    vertical-align: middle;
}
.skill-matrix__skill-col {
    position: sticky;
    left: 0;
    z-index: 1;
    background: var(--bs-body-bg);
    min-width: 12rem;
    box-shadow: 1px 0 0 var(--bs-border-color);
}
.skill-matrix__header .skill-matrix__skill-col {
    z-index: 3;
    background: var(--bs-light);
}
.skill-matrix__cert-col {
    min-width: 10rem;
    cursor: grab;
}
.skill-matrix__cert-col:active {
    cursor: grabbing;
}
.skill-matrix__cell {
    vertical-align: middle;
}
.skill-matrix__toggle {
    white-space: nowrap;
}
.skill-matrix__toggle:focus-visible {
    outline: 2px solid var(--bs-primary);
    outline-offset: 2px;
}
.skill-matrix__readonly {
    display: inline-block;
    padding: 0.25rem 0.5rem;
}
.skill-matrix__readonly--included {
    font-weight: 500;
}
.skill-matrix__readonly--excluded {
    color: var(--bs-secondary);
}

/* Breadcrumb overrides */

.breadcrumb-item a {
    font-weight: 300;
    color: var(--bs-body-color);
    text-decoration: none;
}

    .breadcrumb-item a:hover {
        font-weight: 500;
        text-decoration: underline;
        text-decoration-thickness: 2px; /* A thin line */
        text-decoration-color: black; /* Optional: change color on hover for better contrast */
    }

.breadcrumb-item.active {
    font-weight: 700;
}


/* ------------------------------------------------------------
   App Typography System (Inter) - layered on Bootstrap 5.3
   Variables are in :root above. Base typography merged into html, body and body above.
------------------------------------------------------------ */

/* Bootstrap variable alignment (optional, makes Bootstrap components inherit nicely) */
:root, [data-bs-theme="light"], [data-bs-theme="dark"] {
    --bs-body-font-family: var(--app-font-sans);
    --bs-body-font-size: var(--app-text-md);
    --bs-body-line-height: var(--app-leading-normal);
    --bs-heading-color: inherit;
}

/* Headings: consistent scale + weights */
h1, .h1 {
    font-size: var(--app-text-4xl);
    line-height: var(--app-leading-tight);
    font-weight: var(--app-weight-extrabold);
    letter-spacing: var(--app-tracking-tight);
    margin-bottom: 0.75rem;
}

h2, .h2 {
    font-size: var(--app-text-3xl);
    line-height: var(--app-leading-tight);
    font-weight: var(--app-weight-bold);
    letter-spacing: var(--app-tracking-tight);
    margin-bottom: 0.75rem;
}

h3, .h3 {
    font-size: var(--app-text-2xl);
    line-height: var(--app-leading-snug);
    font-weight: var(--app-weight-semibold);
    letter-spacing: var(--app-tracking-tight);
    margin-bottom: 0.5rem;
}

h4, .h4 {
    font-size: var(--app-text-xl);
    line-height: var(--app-leading-snug);
    font-weight: var(--app-weight-semibold);
    letter-spacing: var(--app-tracking-normal);
    margin-bottom: 0.5rem;
}

h5, .h5 {
    font-size: var(--app-text-lg);
    line-height: var(--app-leading-snug);
    font-weight: var(--app-weight-semibold);
    margin-bottom: 0.5rem;
}

h6, .h6 {
    font-size: var(--app-text-md);
    line-height: var(--app-leading-snug);
    font-weight: var(--app-weight-semibold);
    margin-bottom: 0.5rem;
}

/* Body text utilities (your system) */
.text-xs {
    font-size: var(--app-text-xs) !important;
    line-height: var(--app-leading-normal) !important;
}

.text-sm {
    font-size: var(--app-text-sm) !important;
    line-height: var(--app-leading-normal) !important;
}

.text-md {
    font-size: var(--app-text-md) !important;
    line-height: var(--app-leading-normal) !important;
}

.text-lg {
    font-size: var(--app-text-lg) !important;
    line-height: var(--app-leading-snug) !important;
}

.text-xl {
    font-size: var(--app-text-xl) !important;
    line-height: var(--app-leading-snug) !important;
}

/* App-style labels and helper text */
.app-label {
    font-size: var(--app-text-sm);
    font-weight: var(--app-weight-semibold);
    letter-spacing: var(--app-tracking-wide);
    line-height: var(--app-leading-snug);
}




/* Form controls: slightly stronger text for legibility */
.form-label, .form-check-label {
    font-size: var(--app-text-sm);
    font-weight: var(--app-weight-semibold);
}

.form-control,
.form-select {
    font-weight: var(--app-weight-regular);
}

/* Tables: compact readable defaults */
.table {
    font-size: var(--app-text-sm);
}

    .table th {
        font-weight: var(--app-weight-semibold);
    }

/* Full Inter weight utilities (consistent with Bootstrap naming) */
.fw-100 {
    font-weight: 100 !important;
}

.fw-200 {
    font-weight: 200 !important;
}

.fw-300 {
    font-weight: 300 !important;
}

.fw-400 {
    font-weight: 400 !important;
}

.fw-500 {
    font-weight: 500 !important;
}

.fw-600 {
    font-weight: 600 !important;
}

.fw-700 {
    font-weight: 700 !important;
}

.fw-800 {
    font-weight: 800 !important;
}

.fw-900 {
    font-weight: 900 !important;
}




.search {
    flex: 1 1 360px;
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 10px 12px;
    border-radius: 999px;
    border: 1px solid var(--stroke);
    background: rgba(255, 255, 255, 0.9);
    box-shadow: var(--shadow-soft);
}

    .search svg {
        flex: 0 0 auto;
        opacity: 0.85;
    }

    .search input {
        width: 100%;
        background: transparent;
        border: 0;
        outline: none;
        color: var(--text);
        font-size: 14px;
    }

        .search input::placeholder {
            color: rgba(15, 23, 42, 0.45);
        }



.pagination {
    display: flex;
    gap: 6px;
    list-style: none;
    padding: 0;
    margin: 20px 0 0;
    justify-content: center;
}

    .pagination li {
        display: inline-flex;
    }

        .pagination li a,
        .pagination li span {
            display: inline-flex;
            align-items: center;
            justify-content: center;
            min-width: 36px;
            height: 36px;
            padding: 0 10px;
            border-radius: 8px;
            border: 1px solid #e3e3e3;
            background: #fff;
            color: #444;
            text-decoration: none;
            font-size: 14px;
            font-weight: 500;
            transition: all .15s ease;
        }

            .pagination li a:hover {
                background: #f5f5f5;
                border-color: #ccc;
            }

        .pagination li.active a {
            background: #212529;
            color: #fff;
            border-color: #212529;
        }

        .pagination li.disabled a {
            opacity: .4;
            pointer-events: none;
        }

/* Complex picker: taller scrollable results list */
.complex-picker-results {
    max-height: 24rem;
}

/* Complex picker: selected items as one-per-line list with separator */
.complex-picker-selected__row {
    border-bottom: 1px solid var(--bs-border-color, #dee2e6);
}

.complex-picker-selected__row:last-of-type {
    border-bottom-width: 0;
}

.complex-picker-selected__row + .complex-picker-selected__clear {
    border-top: 1px solid var(--bs-border-color, #dee2e6);
}