:root {
    /* Identitate de brand (client): indigo inchis #26276d = tonul inchis (sidebar/titluri);
       accentul (butoane/linkuri/activ) e o nuanta mai deschisa derivata, pt. contrast. */
    --navy: #26276d;
    --navy-light: #303184;
    --navy-dark: #1C1D52;
    --blue-accent: #4B4FCE;
    --blue-hover: #3A3DB0;
    --blue-light: #EAEAF8;
    --white: #FFFFFF;
    --gray-bg: #F4F6F9;
    --gray-border: #E2E8F0;
    --text-primary: #2D3748;
    --text-muted: #718096;
    --sidebar-width: 250px;
    --sidebar-collapsed-width: 62px;
    --topbar-height: 56px;
    --transition-speed: 0.25s;
    /* Fontul de brand ("Brand Sans" = Poppins placeholder acum; swap la HURME din fonts.css). */
    --font-sans: "Brand Sans", "Plus Jakarta Sans", "Inter", "Roboto", system-ui, -apple-system, "Segoe UI", Arial, sans-serif;
}

* { box-sizing: border-box; }

html, body {
    height: 100%;
    margin: 0;
    font-family: var(--font-sans);
    color: var(--text-primary);
    background: var(--gray-bg);
}
.main-content h1,
.main-content h2,
.main-content h3,
.main-content h4,
.crud-title {
    font-family: var(--font-sans);
    letter-spacing: -.01em;
}

/* ── TOP BAR ────────────────────────────────────────────── */
.topbar {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    height: var(--topbar-height);
    background: var(--white);
    border-bottom: 1px solid var(--gray-border);
    box-shadow: 0 1px 3px rgba(0,0,0,.06);
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0 1rem;
    z-index: 1040;
}

.topbar-brand {
    display: flex;
    align-items: center;
    gap: .65rem;
    text-decoration: none;
    color: var(--navy);
    font-weight: 700;
    font-size: 1.05rem;
}

.topbar-brand img {
    height: 32px;
    width: auto;
}

.topbar-toggle {
    background: none;
    border: none;
    font-size: 1.25rem;
    color: var(--navy);
    cursor: pointer;
    padding: .25rem .5rem;
    border-radius: 6px;
    transition: background var(--transition-speed);
}
.topbar-toggle:hover { background: var(--blue-light); }

.topbar-right {
    display: flex;
    align-items: center;
    gap: .75rem;
}
.density-menu .dropdown-item.active {
    background: var(--blue-light);
    color: var(--blue-accent);
    font-weight: 600;
}

.topbar-user {
    display: flex;
    align-items: center;
    gap: .5rem;
    color: var(--text-primary);
    text-decoration: none;
    font-size: .875rem;
    padding: .35rem .6rem;
    border-radius: 6px;
    transition: background var(--transition-speed);
}
.topbar-user:hover { background: var(--blue-light); color: var(--navy); }

.topbar-avatar {
    width: 30px;
    height: 30px;
    border-radius: 50%;
    background: var(--blue-accent);
    color: var(--white);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: .75rem;
    font-weight: 700;
}

/* ── SIDEBAR ────────────────────────────────────────────── */
.sidebar {
    position: fixed;
    top: var(--topbar-height);
    left: 0;
    bottom: 0;
    width: var(--sidebar-width);
    background: var(--navy);
    color: rgba(255,255,255,.85);
    overflow-x: hidden;
    overflow-y: auto;
    transition: transform var(--transition-speed) ease;
    z-index: 1030;
    padding-top: .5rem;
}
.sidebar::-webkit-scrollbar { width: 4px; }
.sidebar::-webkit-scrollbar-thumb { background: rgba(255,255,255,.15); border-radius: 4px; }

/* ── Sidebar search ── */
.sidebar-search {
    padding: .5rem .7rem .25rem;
}
.sidebar-search-inner {
    position: relative;
}
.sidebar-search-inner input[type="text"] {
    display: block;
    width: 100%;
    height: 34px;
    padding: 0 28px 0 30px;
    margin: 0;
    border: 1px solid rgba(255,255,255,.12);
    border-radius: 8px;
    background: rgba(255,255,255,.06);
    color: rgba(255,255,255,.9);
    font-size: .75rem;
    font-weight: 500;
    box-sizing: border-box;
    transition: border-color .2s, background .2s, box-shadow .2s;
}
.sidebar-search-inner input[type="text"]::placeholder {
    color: rgba(255,255,255,.3);
    font-weight: 400;
}
.sidebar-search-inner input[type="text"]:focus {
    outline: none;
    border-color: rgba(75,79,206,.55);
    background: rgba(255,255,255,.1);
    box-shadow: 0 0 0 3px rgba(75,79,206,.12);
}
.sidebar-search-icon {
    position: absolute;
    left: 9px;
    top: 50%;
    transform: translateY(-50%);
    font-size: .72rem;
    color: rgba(255,255,255,.3);
    pointer-events: none;
    transition: color .2s;
}
.sidebar-search-inner input[type="text"]:focus ~ .sidebar-search-icon {
    color: rgba(140,143,235,.8);
}
.sidebar-search-clear {
    position: absolute;
    right: 5px;
    top: 50%;
    transform: translateY(-50%);
    width: 18px;
    height: 18px;
    padding: 0;
    border: none;
    border-radius: 50%;
    background: rgba(255,255,255,.1);
    color: rgba(255,255,255,.45);
    font-size: .58rem;
    cursor: pointer;
    display: none;
    align-items: center;
    justify-content: center;
    line-height: 1;
    transition: background .15s, color .15s;
}
.sidebar-search-clear:hover {
    background: rgba(255,255,255,.2);
    color: #fff;
}
.sidebar-search-inner.has-value .sidebar-search-clear {
    display: flex;
}
.sidebar-search-sep {
    margin: .4rem auto 0;
    width: 70%;
    height: 1px;
    background: linear-gradient(90deg, transparent, rgba(255,255,255,.08), transparent);
}
.sidebar-group.search-hidden,
.sidebar-link.search-hidden {
    display: none !important;
}
.sidebar-link mark {
    background: rgba(75,79,206,.4);
    color: #fff;
    border-radius: 3px;
    padding: 0 2px;
    font-weight: 700;
}
.sidebar-no-results {
    padding: .5rem .75rem;
    font-size: .72rem;
    color: rgba(255,255,255,.3);
    text-align: center;
    display: none;
}
.sidebar-no-results.visible {
    display: block;
}
.sidebar-group { margin-bottom: .25rem; }

.sidebar-group-header {
    display: flex;
    align-items: center;
    gap: .6rem;
    padding: .55rem 1rem;
    font-size: .75rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: .06em;
    color: rgba(255,255,255,.5);
    cursor: pointer;
    user-select: none;
    transition: color var(--transition-speed);
    white-space: nowrap;
}
.sidebar-group-header:hover { color: rgba(255,255,255,.85); }

.sidebar-group-header .bi {
    font-size: 1rem;
    min-width: 20px;
    text-align: center;
}

.sidebar-group-header .chevron {
    margin-left: auto;
    transition: transform var(--transition-speed);
    font-size: .65rem;
}
.sidebar-group.open .sidebar-group-header .chevron {
    transform: rotate(90deg);
}

.sidebar-group-items {
    max-height: 0;
    overflow: hidden;
    transition: max-height 0.3s ease;
}
.sidebar-group.open .sidebar-group-items {
    max-height: 500px;
}

.sidebar-link {
    display: flex;
    align-items: center;
    gap: .55rem;
    padding: .45rem 1rem .45rem 2.6rem;
    font-size: .835rem;
    color: rgba(255,255,255,.72);
    text-decoration: none;
    transition: background var(--transition-speed), color var(--transition-speed);
    white-space: nowrap;
    border-left: 3px solid transparent;
}
.sidebar-link:hover {
    background: var(--navy-light);
    color: var(--white);
}
.sidebar-link.active {
    background: rgba(75,79,206,.18);
    color: var(--white);
    border-left-color: var(--blue-accent);
}

/* ── SIDEBAR COLLAPSED ──────────────────────────────────── */
body.sidebar-collapsed .sidebar {
    transform: translateX(-100%);
}
body.sidebar-collapsed .main-content {
    margin-left: 0;
}

/* ── MAIN CONTENT ───────────────────────────────────────── */
.main-content {
    margin-left: var(--sidebar-width);
    margin-top: var(--topbar-height);
    padding: 1.5rem 1.75rem;
    min-height: calc(100vh - var(--topbar-height));
    transition: margin-left var(--transition-speed) ease;
    background: var(--gray-bg);
}

/* ── CARDS & TABLES override ────────────────────────────── */
.card {
    border: none;
    border-radius: 8px;
    box-shadow: 0 1px 3px rgba(0,0,0,.06);
}
.card-header {
    background: var(--white);
    border-bottom: 1px solid var(--gray-border);
    font-weight: 600;
    font-size: .9rem;
}
.table {
    font-size: .85rem;
}
.table thead th {
    background: var(--gray-bg);
    border-bottom: 2px solid var(--gray-border);
    font-weight: 600;
    font-size: .78rem;
    text-transform: uppercase;
    letter-spacing: .03em;
    color: var(--text-muted);
}
.table tbody td {
    vertical-align: middle;
}
.table tbody tr:hover {
    background: #F7FAFF;
}

/* ── BUTTONS ────────────────────────────────────────────── */
.btn-primary {
    background: var(--blue-accent);
    border-color: var(--blue-accent);
}
.btn-primary:hover {
    background: var(--blue-hover);
    border-color: var(--blue-hover);
}
.btn-outline-primary {
    color: var(--blue-accent);
    border-color: var(--blue-accent);
}
.btn-outline-primary:hover {
    background: var(--blue-accent);
    border-color: var(--blue-accent);
    color: var(--white);
}
.btn {
    font-weight: 500;
}
.btn-sm {
    border-radius: 8px;
}

/* ── ALERTS ─────────────────────────────────────────────── */
.alert {
    border-radius: 8px;
    font-size: .875rem;
}

/* ── APP BREADCRUMB ───────────────────────────────────── */
.app-breadcrumb {
    background: transparent;
    padding: 0;
}
.app-breadcrumb .breadcrumb {
    background: transparent;
    border: 1px solid #E9EEF6;
    border-radius: 999px;
    padding: .25rem .65rem;
    display: inline-flex;
    align-items: center;
    gap: .2rem;
}
.app-breadcrumb .breadcrumb-item {
    font-size: .74rem;
    color: #64748B;
    letter-spacing: .01em;
}
.app-breadcrumb .breadcrumb-item + .breadcrumb-item::before {
    color: #94A3B8;
    font-size: .7rem;
}
.app-breadcrumb .breadcrumb-item a {
    color: #64748B;
    text-decoration: none;
}
.app-breadcrumb .breadcrumb-item a:hover {
    color: var(--blue-accent);
}
.app-breadcrumb .breadcrumb-item.active {
    color: var(--navy);
    font-weight: 600;
}

/* ── NAV TABS (keep consistent in detail pages) ─────────── */
.nav-tabs .nav-link {
    color: var(--text-muted);
    font-weight: 500;
}
.nav-tabs .nav-link.active {
    color: var(--blue-accent);
    border-color: var(--gray-border) var(--gray-border) var(--white);
}

/* ── DASHBOARD STAT CARDS ───────────────────────────────── */
.stat-card {
    border-radius: 10px;
    padding: 1.25rem;
    color: var(--white);
    display: flex;
    align-items: center;
    gap: 1rem;
}
.stat-card .stat-icon {
    font-size: 2rem;
    opacity: .75;
}
.stat-card .stat-value {
    font-size: 1.75rem;
    font-weight: 700;
    line-height: 1;
}
.stat-card .stat-label {
    font-size: .8rem;
    opacity: .85;
}

/* ── LOGIN PAGE ─────────────────────────────────────────── */
.login-wrapper {
    min-height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
    background: linear-gradient(135deg, var(--navy) 0%, var(--navy-light) 100%);
}
.login-card {
    width: 100%;
    max-width: 400px;
    border-radius: 12px;
    box-shadow: 0 8px 30px rgba(0,0,0,.25);
}
.login-card .card-body { padding: 2.5rem 2rem; }
.login-card .login-logo {
    display: block;
    margin: 0 auto 1.25rem;
    height: 60px;
}

/* ── RESPONSIVE ─────────────────────────────────────────── */
@media (max-width: 991.98px) {
    .sidebar {
        transform: translateX(-100%);
        width: var(--sidebar-width);
    }
    body.sidebar-mobile-open .sidebar {
        transform: translateX(0);
    }
    .main-content {
        margin-left: 0;
    }
    body.sidebar-mobile-open::after {
        content: '';
        position: fixed;
        inset: 0;
        background: rgba(0,0,0,.35);
        z-index: 1025;
    }
}

/* ── GENERIC CRUD LAYOUT ─────────────────────────────── */
.crud-shell {
    max-width: 1220px;
}

/* Capul de 1220px e o latime de CITIRE: buna pentru formulare si liste scurte, dar pe paginile
   cu tabele late lasa jumatate de ecran gol si taie coloanele. `crud-shell-lat` il scoate, ca
   pagina sa se intinda cat sidebar-ul o lasa — la fel ca lista de cursuri, care n-are shell. */
.crud-shell.crud-shell-lat {
    max-width: none;
}

.main-content > .crud-shell,
.main-content > .form-shell,
.main-content > .enroll-shell,
.main-content > .detail-shell,
.main-content > .pd-shell,
.main-content > .pf-shell,
.main-content > .pl-shell,
.main-content > .cd-shell,
.main-content > .al-shell,
.main-content > .dosar-shell,
.main-content > .af-shell,
.main-content > .ocr-shell {
    width: 100%;
    margin-inline: auto;
}

.crud-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap;
    gap: .75rem;
    margin-bottom: 1rem;
}

.crud-title {
    margin: 0;
    font-size: 1.35rem;
    font-weight: 800;
    color: var(--navy);
    position: relative;
    display: inline-flex;
    align-items: center;
    gap: .35rem;
}
.crud-title::after {
    content: "";
    display: inline-block;
    width: 28px;
    height: 3px;
    border-radius: 999px;
    background: linear-gradient(90deg, var(--blue-accent), #7c9cff);
}

.crud-subtitle {
    margin: .15rem 0 0;
    font-size: .82rem;
    color: var(--text-muted);
}

.crud-card {
    border: 1px solid var(--gray-border);
    border-radius: 12px;
    background: var(--white);
    box-shadow: 0 8px 22px rgba(15, 23, 42, .06);
}

.crud-card + .crud-card {
    margin-top: .9rem;
}

.crud-head {
    padding: .75rem 1rem;
    border-bottom: 1px solid var(--gray-border);
    font-size: .8rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .04em;
    color: var(--text-muted);
    background: linear-gradient(90deg, #eef4ff, #ffffff);
    position: relative;
}
.crud-head::before {
    content: "";
    position: absolute;
    left: 0;
    top: 0;
    bottom: 0;
    width: 4px;
    background: linear-gradient(180deg, var(--blue-accent), #87a2ff);
}

.crud-body {
    padding: 1rem;
}

.crud-table {
    width: 100%;
    border-collapse: collapse;
    font-size: .82rem;
}

.crud-table thead th {
    background: #F8FAFC;
    border-bottom: 2px solid var(--gray-border);
    padding: .65rem .75rem;
    font-size: .7rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .04em;
    color: var(--text-muted);
    white-space: nowrap;
}

.crud-table tbody td {
    padding: .62rem .75rem;
    border-bottom: 1px solid #F1F5F9;
    white-space: nowrap;
}

.crud-table tbody tr:hover {
    background: #F5F8FF;
}

.crud-link {
    text-decoration: none;
    color: var(--navy);
    font-weight: 600;
}

.crud-link:hover {
    color: var(--blue-accent);
}

.crud-kv {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: .75rem 1rem;
}

.crud-k {
    font-size: .7rem;
    text-transform: uppercase;
    letter-spacing: .04em;
    color: #94A3B8;
}

.crud-v {
    font-size: .84rem;
    color: var(--text-primary);
    font-weight: 500;
}

.crud-v.muted {
    color: #CBD5E1;
    font-weight: 400;
}

.crud-actions {
    display: flex;
    justify-content: flex-end;
    gap: .5rem;
}

.form-control:focus,
.form-select:focus,
.choices.is-focused .choices__inner {
    border-color: #7ea2ff !important;
    box-shadow: 0 0 0 .2rem rgba(75, 79, 206, .12) !important;
}
.choices.is-open .choices__list--dropdown,
.choices.is-open .choices__list[aria-expanded] {
    z-index: 100;
}

/* ── SELECTOR DE CURS CU PERIOADA ────────────────────────
   Optiunile poarta si perioada («Bucatar · 05.03.2025 - 14.05.2025»): pe date reale sunt 63 de
   cursuri numite «Stivuitorist» si 50 de «Bucatar», imposibil de deosebit dupa nume. Perioada
   sta la COADA etichetei, deci o caseta ingusta taie exact partea care deosebeste — de aici
   latimea minima. In lista optiunile se rup pe randuri in loc sa fie taiate (acolo se alege,
   deci acolo conteaza sa se vada tot), iar valoarea selectata lasa loc butonului «x» al lui
   Choices, ca sa nu treaca textul pe sub el. Se pune pe PARINTELE selectului: Choices.js
   inlocuieste selectul cu propriul container, deci o clasa pe <select> n-ar dimensiona nimic. */
.sel-curs {
    min-width: 27rem;
    max-width: 100%;
}
.sel-curs .choices__list--dropdown .choices__item {
    white-space: normal;
    line-height: 1.3;
}
.sel-curs .choices__list--single .choices__item {
    padding-right: 1.6rem;
}

/* Butonul «x» al lui Choices sta PESTE text, nu langa el: e pozitionat absolut in interiorul
   item-ului. Rezervarea de spatiu exista din 08.2026, dar doar pe `.sel-curs` — pe restul
   selectoarelor din aplicatie o valoare scurta ca «Nou» aparea taiata de x. Regula de mai jos e
   aceeasi, aplicata la toate selectoarele simple. (07.09.2026) */
.choices[data-type*="select-one"] .choices__list--single .choices__item {
    padding-right: 1.6rem;
}
/* Registrul de eliberare mai scrie si data examenului in eticheta (anul registrului = anul
   EXAMENULUI, nu al cursului), deci are nevoie de mai mult loc: acolo eticheta ajunge la 86 de
   caractere, fata de 66 pe celelalte pagini. */
.sel-curs-lat {
    min-width: 33rem;
}

/* ── FORM TYPOGRAPHY (labels vs helptext) ───────────────── */
form .form-label {
    font-size: .75rem;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: .06em;
    color: #2f425f;
    margin-bottom: .34rem;
    display: inline-flex;
    align-items: center;
    gap: .32rem;
    line-height: 1.2;
}
form .form-label .af-label-icon {
    font-size: .72rem;
    color: #3f5f92;
    opacity: .95;
    transform: translateY(-1px);
}
form .asteriskField {
    color: #dc2626;
    margin-left: .15rem;
}
form .form-text,
form .helptext {
    font-size: .76rem;
    font-weight: 500;
    color: #94a3b8;
    margin-top: .32rem;
}
form .form-control::placeholder,
form .form-select:invalid,
form .choices__placeholder {
    color: #b5c0ce !important;
    opacity: 1;
}

/* ── DENSITY MODES ─────────────────────────────────────── */
body.density-comfort .main-content {
    padding: 1.75rem 2rem;
}
body.density-comfort .crud-body {
    padding: 1.15rem;
}
body.density-comfort .crud-table thead th {
    padding: .72rem .85rem;
}
body.density-comfort .crud-table tbody td {
    padding: .72rem .85rem;
}
body.density-comfort .btn-sm {
    padding: .35rem .7rem;
}
body.density-comfort .app-breadcrumb .breadcrumb {
    padding: .32rem .75rem;
}

body.density-dense .main-content {
    padding: 1rem 1.15rem;
}
body.density-dense .crud-header {
    margin-bottom: .65rem;
}
body.density-dense .crud-title {
    font-size: 1.18rem;
}
body.density-dense .crud-subtitle {
    font-size: .76rem;
}
body.density-dense .crud-head {
    padding: .55rem .8rem;
    font-size: .72rem;
}
body.density-dense .crud-body {
    padding: .72rem .8rem;
}
body.density-dense .crud-table {
    font-size: .77rem;
}
body.density-dense .crud-table thead th {
    padding: .45rem .55rem;
    font-size: .64rem;
}
body.density-dense .crud-table tbody td {
    padding: .44rem .55rem;
}
body.density-dense .table {
    font-size: .78rem;
}
body.density-dense .table thead th {
    font-size: .68rem;
    padding-top: .45rem;
    padding-bottom: .45rem;
}
body.density-dense .btn-sm {
    padding: .2rem .5rem;
    font-size: .74rem;
}
body.density-dense .app-breadcrumb .breadcrumb {
    padding: .17rem .52rem;
}

/* ── MICRO POLISH (GLOBAL) ─────────────────────────────── */
.crud-card,
[class*="-card"] {
    transition: box-shadow .2s ease, transform .2s ease;
}
.crud-card:hover {
    box-shadow: 0 12px 28px rgba(15, 23, 42, .1);
}
.badge {
    letter-spacing: .01em;
}

/* ── MOBILE OPTIMIZATION (GLOBAL) ──────────────────────── */
@media (max-width: 991.98px) {
    .main-content {
        padding: 1rem .9rem;
    }
    .app-breadcrumb .breadcrumb {
        max-width: 100%;
        overflow-x: auto;
        white-space: nowrap;
        display: flex;
        scrollbar-width: thin;
    }
    .crud-header {
        align-items: flex-start;
        gap: .6rem;
    }
    .crud-title {
        font-size: 1.15rem;
    }
    .crud-title::after {
        width: 20px;
        height: 2px;
    }
    .crud-subtitle {
        font-size: .76rem;
    }
    .crud-head {
        padding: .62rem .8rem;
        font-size: .72rem;
    }
    .crud-body {
        padding: .8rem;
    }
    .crud-kv {
        grid-template-columns: 1fr;
        gap: .6rem;
    }
    .crud-actions {
        width: 100%;
    }
    .crud-actions .btn {
        flex: 1;
    }
    .topbar {
        padding: 0 .65rem;
    }
}

@media (max-width: 767.98px) {
    .topbar-right {
        gap: .4rem;
    }
    .topbar-avatar {
        width: 28px;
        height: 28px;
        font-size: .7rem;
    }
    .btn-sm {
        min-height: 34px;
    }
    .nav-tabs {
        flex-wrap: nowrap;
        overflow-x: auto;
        overflow-y: hidden;
        scrollbar-width: thin;
        -webkit-overflow-scrolling: touch;
    }
    .nav-tabs .nav-link {
        white-space: nowrap;
        font-size: .8rem;
        padding: .5rem .72rem;
    }
    .table-responsive,
    .crud-card .table-responsive {
        border-radius: 10px;
    }
    .crud-table {
        font-size: .77rem;
    }
    .crud-table thead th,
    .crud-table tbody td {
        padding: .5rem .52rem;
    }
    [class*="view-toggle"] {
        width: 100%;
        justify-content: flex-start;
    }
}

@media (max-width: 575.98px) {
    .main-content {
        padding: .8rem .62rem;
    }
    [class*="card-grid"] {
        grid-template-columns: 1fr !important;
        gap: .65rem !important;
    }
    .crud-header .btn,
    .crud-header .btn-sm {
        width: 100%;
    }
    .crud-actions {
        flex-direction: column-reverse;
    }
    .crud-actions .btn {
        width: 100%;
    }
    .form-control,
    .form-select,
    .choices__inner {
        font-size: .88rem;
    }
    form .form-label {
        font-size: .72rem;
    }
}