/* =========================================================================
 * CARETTA PERFORMANCE — DESIGN SYSTEM v1
 * Etapa 6 (additive). Toate clasele sunt prefixate cu `.ds-` ca să nu
 * intre în coliziune cu CSS-ul existent. Folosibile în viitoarele view-uri
 * sau pentru refactor incremental al celor actuale.
 *
 * Token-urile (--caretta-navy, --signal-action, --r-md, etc.) sunt
 * definite în css/variables.css.
 *
 * Reguli de brand:
 *   - culoare primară: navy Caretta (#003349)
 *   - accent (roșu/orange): folosit doar pe CTA critic sau marker
 *   - fundaluri curate: var(--bg-surface), var(--bg-canvas)
 *   - carduri albe cu margini fine var(--border-subtle)
 *   - contrast bun, fără gradient agresiv
 *   - typography: CarettaOffice (deja încărcat global)
 *   - responsive: lucrează pe 13" / 15" / 24"
 * ========================================================================= */


/* -------------------------------------------------------------------------
 * 1. ds-card — container generic, înlocuiește treptat `.card`
 * Variant: .ds-card--alert (bandă stânga roșie),
 *          .ds-card--watch (bandă galbenă),
 *          .ds-card--success (bandă verde),
 *          .ds-card--info (bandă albastră),
 *          .ds-card--clickable (hover + shadow ridicat)
 * ------------------------------------------------------------------------- */
.ds-card {
    background: var(--bg-surface);
    border: 1px solid var(--border-subtle);
    border-radius: var(--r-md);
    box-shadow: var(--elev-1);
    padding: var(--sp-4) var(--sp-5);
    transition: box-shadow 0.15s ease, transform 0.15s ease;
}
.ds-card--alert    { border-left: 3px solid var(--signal-action); }
.ds-card--watch    { border-left: 3px solid var(--signal-watch); }
.ds-card--success  { border-left: 3px solid var(--signal-on-track); }
.ds-card--info     { border-left: 3px solid var(--signal-info); }
.ds-card--clickable { cursor: pointer; }
.ds-card--clickable:hover {
    box-shadow: var(--elev-2);
    transform: translateY(-1px);
}


/* -------------------------------------------------------------------------
 * 2. ds-kpi — KPI card compact (96-110px), icon + label + valoare + delta
 * Folosit pentru: vânzări, încasări, comenzi, facturi, restanțe etc.
 * ------------------------------------------------------------------------- */
.ds-kpi {
    display: flex;
    flex-direction: column;
    gap: var(--sp-2);
    padding: var(--sp-3) var(--sp-4);
    background: var(--bg-surface);
    border: 1px solid var(--border-subtle);
    border-radius: var(--r-md);
    box-shadow: var(--elev-1);
    min-height: 100px;
}
.ds-kpi__label {
    display: flex;
    align-items: center;
    gap: var(--sp-2);
    color: var(--text-soft);
    font-size: var(--fs-eyebrow);
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.05em;
}
.ds-kpi__label i { font-size: 0.95rem; color: var(--caretta-navy); }
.ds-kpi__value {
    color: var(--text-strong);
    font-size: 1.6rem;
    font-weight: 700;
    line-height: 1.1;
    letter-spacing: -0.02em;
}
.ds-kpi__meta {
    color: var(--text-faint);
    font-size: var(--fs-small);
}
.ds-kpi--alert .ds-kpi__label i { color: var(--signal-action); }
.ds-kpi--alert {
    border-left: 3px solid var(--signal-action);
}


/* -------------------------------------------------------------------------
 * 3. ds-badge — trend pills (▲ +12%) și status pills (verde/galben/roșu)
 * ------------------------------------------------------------------------- */
.ds-badge {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 3px 9px;
    border-radius: var(--r-pill);
    font-size: 0.72rem;
    font-weight: 700;
    font-variant-numeric: tabular-nums;
    line-height: 1.15;
}
.ds-badge--up {
    background: rgba(16, 185, 129, 0.12);
    color: #059669;
}
.ds-badge--down {
    background: rgba(239, 68, 68, 0.12);
    color: #dc2626;
}
.ds-badge--flat {
    background: var(--bg-subtle);
    color: var(--text-soft);
}
.ds-badge--watch {
    background: rgba(245, 158, 11, 0.12);
    color: #b45309;
}
.ds-badge--info {
    background: var(--caretta-navy-50);
    color: var(--caretta-navy);
}


/* -------------------------------------------------------------------------
 * 4. ds-button — butoane unificate
 * ------------------------------------------------------------------------- */
.ds-button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 9px 16px;
    background: var(--caretta-navy);
    color: #fff;
    font-family: inherit;
    font-size: 0.85rem;
    font-weight: 600;
    border: 1px solid var(--caretta-navy);
    border-radius: 8px;
    cursor: pointer;
    transition: background-color 0.15s ease, border-color 0.15s ease;
}
.ds-button:hover { background: var(--caretta-navy-deep); border-color: var(--caretta-navy-deep); }

.ds-button--ghost {
    background: var(--bg-surface);
    color: var(--text-default);
    border-color: var(--border-strong);
}
.ds-button--ghost:hover {
    background: var(--bg-subtle);
    color: var(--text-strong);
    border-color: var(--caretta-navy);
}

.ds-button--danger {
    background: var(--signal-action);
    border-color: var(--signal-action);
}
.ds-button--danger:hover { filter: brightness(0.92); }

.ds-button--sm { padding: 6px 12px; font-size: 0.78rem; }
.ds-button--icon-only { padding: 8px; min-width: 36px; }


/* -------------------------------------------------------------------------
 * 5. ds-filter-bar — bară de filtre pe view, sticky la scroll
 * ------------------------------------------------------------------------- */
.ds-filter-bar {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--sp-3);
    padding: var(--sp-3) var(--sp-4);
    background: var(--bg-surface);
    border: 1px solid var(--border-subtle);
    border-radius: var(--r-md);
    box-shadow: var(--elev-1);
    position: sticky;
    top: 0;
    z-index: 10;
}
.ds-filter-bar__label {
    font-size: var(--fs-eyebrow);
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: var(--text-soft);
    margin-right: var(--sp-2);
}
.ds-filter-bar__reset {
    margin-left: auto;
    background: none;
    border: none;
    color: var(--text-soft);
    font-size: var(--fs-small);
    cursor: pointer;
    text-decoration: underline;
}
.ds-filter-bar__reset:hover { color: var(--caretta-navy); }


/* -------------------------------------------------------------------------
 * 6. ds-table — tabel compact cu sticky header și pill semafor
 * ------------------------------------------------------------------------- */
.ds-table-wrap {
    border: 1px solid var(--border-subtle);
    border-radius: var(--r-md);
    background: var(--bg-surface);
    box-shadow: var(--elev-1);
    overflow: auto;
    max-height: 560px;
}
.ds-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 0.85rem;
}
.ds-table thead th {
    position: sticky;
    top: 0;
    background: var(--bg-subtle);
    color: var(--text-soft);
    font-size: var(--fs-eyebrow);
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    padding: 10px 12px;
    text-align: left;
    border-bottom: 1px solid var(--border-subtle);
    z-index: 2;
}
.ds-table tbody td {
    padding: 9px 12px;
    border-bottom: 1px solid var(--border-subtle);
    color: var(--text-default);
    font-variant-numeric: tabular-nums;
}
.ds-table tbody tr:hover { background: var(--bg-surface-hover); }
.ds-table--zebra tbody tr:nth-child(even) { background: var(--bg-subtle); }
.ds-table .text-right  { text-align: right; }
.ds-table .text-center { text-align: center; }


/* -------------------------------------------------------------------------
 * 7. ds-empty — stare goală uniformă
 * ------------------------------------------------------------------------- */
.ds-empty {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
    padding: var(--sp-8) var(--sp-6);
    background: var(--bg-surface);
    border: 1px dashed var(--border-subtle);
    border-radius: var(--r-md);
    min-height: 280px;
}
.ds-empty__icon {
    font-size: 2.4rem;
    color: var(--caretta-navy);
    opacity: 0.6;
    margin-bottom: var(--sp-4);
}
.ds-empty__title {
    font-size: 1.1rem;
    font-weight: 700;
    color: var(--text-strong);
    margin-bottom: var(--sp-2);
}
.ds-empty__desc {
    color: var(--text-soft);
    font-size: 0.92rem;
    max-width: 460px;
    line-height: 1.45;
    margin-bottom: var(--sp-4);
}
.ds-empty__actions {
    display: flex;
    gap: var(--sp-2);
    justify-content: center;
}


/* -------------------------------------------------------------------------
 * 8. ds-alert — banner / inline alert (info / warning / danger)
 * Folosit pentru mesaje gen "Datele nu s-au actualizat astăzi."
 * ------------------------------------------------------------------------- */
.ds-alert {
    display: flex;
    align-items: flex-start;
    gap: var(--sp-3);
    padding: var(--sp-3) var(--sp-4);
    background: var(--bg-surface);
    border: 1px solid var(--border-subtle);
    border-left: 3px solid var(--signal-info);
    border-radius: var(--r-md);
}
.ds-alert--info    { border-left-color: var(--signal-info); }
.ds-alert--watch   { border-left-color: var(--signal-watch); }
.ds-alert--danger  { border-left-color: var(--signal-action); }
.ds-alert--success { border-left-color: var(--signal-on-track); }

.ds-alert__icon {
    flex-shrink: 0;
    font-size: 1.1rem;
}
.ds-alert--info .ds-alert__icon    { color: var(--signal-info); }
.ds-alert--watch .ds-alert__icon   { color: var(--signal-watch); }
.ds-alert--danger .ds-alert__icon  { color: var(--signal-action); }
.ds-alert--success .ds-alert__icon { color: var(--signal-on-track); }

.ds-alert__body { flex: 1; min-width: 0; }
.ds-alert__title {
    font-size: 0.92rem;
    font-weight: 700;
    color: var(--text-strong);
    line-height: 1.3;
}
.ds-alert__text {
    margin-top: 2px;
    font-size: 0.85rem;
    color: var(--text-soft);
    line-height: 1.4;
}
.ds-alert__actions {
    display: flex;
    gap: var(--sp-2);
    margin-top: var(--sp-2);
}


/* -------------------------------------------------------------------------
 * 9. ds-sync-indicator — pill mic "Date actualizate la 05:30"
 * ------------------------------------------------------------------------- */
.ds-sync {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 5px 12px;
    background: var(--bg-subtle);
    border-radius: var(--r-pill);
    font-size: var(--fs-small);
    color: var(--text-soft);
}
.ds-sync::before {
    content: "";
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: var(--signal-on-track);
}
.ds-sync--watch::before  { background: var(--signal-watch); }
.ds-sync--danger::before { background: var(--signal-action); }


/* -------------------------------------------------------------------------
 * 10. ds-progress — bar simplu pentru target / pacing
 * ------------------------------------------------------------------------- */
.ds-progress {
    position: relative;
    height: 10px;
    border-radius: var(--r-pill);
    background: var(--bg-subtle);
    overflow: hidden;
}
.ds-progress__fill {
    height: 100%;
    background: var(--caretta-navy);
    border-radius: var(--r-pill);
    transition: width 0.4s ease;
}
.ds-progress__fill--on-track { background: var(--signal-on-track); }
.ds-progress__fill--watch    { background: var(--signal-watch); }
.ds-progress__fill--danger   { background: var(--signal-action); }
.ds-progress__marker {
    position: absolute;
    top: -3px;
    width: 2px;
    height: 16px;
    background: var(--text-strong);
    transform: translateX(-1px);
}


/* -------------------------------------------------------------------------
 * 11. ds-section — wrapper logic pentru group de carduri / charts
 * ------------------------------------------------------------------------- */
.ds-section {
    display: flex;
    flex-direction: column;
    gap: var(--sp-3);
}
.ds-section__head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--sp-3);
    margin-bottom: 2px;
}
.ds-section__title {
    font-size: 1.05rem;
    font-weight: 700;
    color: var(--text-strong);
    margin: 0;
}
.ds-section__hint {
    font-size: var(--fs-small);
    color: var(--text-soft);
}


/* -------------------------------------------------------------------------
 * 12. ds-grid — grid-uri standard pentru KPI / chart layouts
 * ------------------------------------------------------------------------- */
.ds-grid {
    display: grid;
    gap: var(--sp-3);
}
.ds-grid--2col { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.ds-grid--3col { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.ds-grid--4col { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.ds-grid--kpi  { grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); }

@media (max-width: 1100px) {
    .ds-grid--4col { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .ds-grid--3col { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 640px) {
    .ds-grid--4col,
    .ds-grid--3col,
    .ds-grid--2col { grid-template-columns: 1fr; }
}


/* -------------------------------------------------------------------------
 * 13. ds-chart-wrap — container chart cu înălțime controlată
 * ------------------------------------------------------------------------- */
.ds-chart-wrap {
    position: relative;
    width: 100%;
    background: var(--bg-surface);
}
.ds-chart-wrap--sm { height: var(--chart-h-sm); }   /* 240 */
.ds-chart-wrap--md { height: var(--chart-h-md); }   /* 280 */
.ds-chart-wrap--lg { height: var(--chart-h-lg); }   /* 320 */


/* -------------------------------------------------------------------------
 * 14. ds-skeleton — placeholder animat (loading) — pentru viitoarele empty
 * ------------------------------------------------------------------------- */
.ds-skeleton {
    background: linear-gradient(90deg,
        var(--bg-subtle) 25%,
        rgba(231, 236, 243, 0.5) 50%,
        var(--bg-subtle) 75%);
    background-size: 200% 100%;
    animation: ds-skeleton-shimmer 1.4s ease-in-out infinite;
    border-radius: var(--r-sm);
}
@keyframes ds-skeleton-shimmer {
    0%   { background-position: 200% 0; }
    100% { background-position: -200% 0; }
}
.ds-skeleton--text  { height: 14px; margin: 4px 0; }
.ds-skeleton--title { height: 22px; width: 60%; }
.ds-skeleton--card  { height: 100px; }


/* -------------------------------------------------------------------------
 * Role UI gates — REGULĂ STRICTĂ (2026-05-27, confirmată cu utilizatorul):
 *
 *   Doar 3 roluri văd profit + export (allow-list):
 *     - admin
 *     - director comercial
 *     - director national
 *
 *   Toate celelalte roluri (regional, b2c, director teren, partener reg.1..9,
 *   guest, sau orice rol viitor) sunt automat BLOCATE de la profit + export.
 *
 *   Allow-list e mai sigur decât deny-list:
 *     - dacă apare un rol nou, default e "no profit + no export"
 *     - imposibil de scăpat un rol prin uitare
 *
 *   Setarea body[data-user-role="X"] vine din js/cc-shortcuts.js care
 *   propagă window.userRole (normalizat lowercase + trim) pe body.
 * ------------------------------------------------------------------------- */

/* Pas 1: ascundem totul implicit (orice rol care nu e în allow-list). */
body[data-user-role]:not([data-user-role="admin"]):not([data-user-role="director comercial"]):not([data-user-role="director national"]) #download-profit-exceptions,
body[data-user-role]:not([data-user-role="admin"]):not([data-user-role="director comercial"]):not([data-user-role="director national"]) #profit-match-report,
body[data-user-role]:not([data-user-role="admin"]):not([data-user-role="director comercial"]):not([data-user-role="director national"]) #ds-profit-block,
body[data-user-role]:not([data-user-role="admin"]):not([data-user-role="director comercial"]):not([data-user-role="director national"]) #class-summary-profit-head,
body[data-user-role]:not([data-user-role="admin"]):not([data-user-role="director comercial"]):not([data-user-role="director national"]) [data-col="profit"],
body[data-user-role]:not([data-user-role="admin"]):not([data-user-role="director comercial"]):not([data-user-role="director national"]) .col-profit,
body[data-user-role]:not([data-user-role="admin"]):not([data-user-role="director comercial"]):not([data-user-role="director national"]) .ux-csv-btn,
body[data-user-role]:not([data-user-role="admin"]):not([data-user-role="director comercial"]):not([data-user-role="director national"]) #ux-print-btn {
    display: none !important;
}

/* Pas 2: ascunde și celula <td> a coloanei Profit din tabelul "Analiză Macro pe Clase".
   Coloana este a 6-a într-un <tr> (Clasă · Vânzări · Istoric · Evoluție · Evoluție% · Profit · Clienți Noi).
   Pentru oricine NU e în allow-list. */
body[data-user-role]:not([data-user-role="admin"]):not([data-user-role="director comercial"]):not([data-user-role="director national"]) #dt-class-summary-body td:nth-child(6) {
    display: none !important;
}

/* Pas 3: protecție pe rol "gol" sau lipsa data-user-role (sesiune neîncepută încă).
   Ascundem export + profit până la prima evaluare a rolului — evită flash de date sensibile. */
body:not([data-user-role]) #download-profit-exceptions,
body:not([data-user-role]) #profit-match-report,
body:not([data-user-role]) #ds-profit-block,
body:not([data-user-role]) #class-summary-profit-head,
body:not([data-user-role]) .ux-csv-btn,
body:not([data-user-role]) #ux-print-btn,
body[data-user-role="guest"] #download-profit-exceptions,
body[data-user-role="guest"] #profit-match-report,
body[data-user-role="guest"] #ds-profit-block,
body[data-user-role="guest"] #class-summary-profit-head,
body[data-user-role="guest"] .ux-csv-btn,
body[data-user-role="guest"] #ux-print-btn {
    display: none !important;
}

/* =========================================================================
 * PREMIUM v2 (2026-06-30) — componente reutilizabile pentru fișe/modale și
 * pentru tema premium pe toată aplicația. Tot pe tokeni, additiv.
 * Folosite prima dată de fișa DB Parteneri (hibrid sumar + tab-uri).
 * ========================================================================= */

/* -------------------------------------------------------------------------
 * 15. ds-hero — antet brand pentru fișe/modale (bandă navy, text alb)
 * Conține: avatar/inițiale · titlu + chips clasă/tip/status · scor · close.
 * ------------------------------------------------------------------------- */
.ds-hero {
    background: var(--caretta-navy);
    color: #fff;
    padding: var(--sp-4) var(--sp-5);
    display: flex;
    align-items: flex-start;
    gap: var(--sp-3);
}
.ds-hero__avatar {
    width: 46px; height: 46px; border-radius: 50%;
    background: rgba(255, 255, 255, 0.14);
    display: flex; align-items: center; justify-content: center;
    font-size: 1rem; font-weight: 700; flex-shrink: 0;
}
.ds-hero__main { flex: 1; min-width: 0; }
.ds-hero__title { font-size: 1.05rem; font-weight: 700; line-height: 1.2; margin: 0; color: #fff; }
.ds-hero__chips { display: flex; gap: 6px; flex-wrap: wrap; margin-top: 6px; }
.ds-hero__chip {
    background: rgba(255, 255, 255, 0.16);
    color: #fff;
    padding: 2px 9px; border-radius: var(--r-pill);
    font-size: 0.72rem; font-weight: 600;
    display: inline-flex; align-items: center; gap: 5px;
}
.ds-hero__chip--accent { background: var(--caretta-red); }
.ds-hero__chip .dot { width: 7px; height: 7px; border-radius: 50%; background: var(--signal-on-track); }
.ds-hero__chip .dot--watch  { background: var(--signal-watch); }
.ds-hero__chip .dot--danger { background: var(--signal-action); }
.ds-hero__sub { font-size: 0.74rem; color: rgba(255, 255, 255, 0.7); margin-top: 6px; }
.ds-hero__score { text-align: center; flex-shrink: 0; }
.ds-hero__score-num {
    width: 50px; height: 50px; border-radius: 50%;
    display: flex; align-items: center; justify-content: center;
    font-size: 1.2rem; font-weight: 700; color: #fff;
    background: rgba(255, 255, 255, 0.18);
}
.ds-hero__score-num--success { background: var(--signal-on-track); }
.ds-hero__score-num--watch   { background: var(--signal-watch); }
.ds-hero__score-num--danger  { background: var(--signal-action); }
.ds-hero__score-label { font-size: 0.62rem; text-transform: uppercase; letter-spacing: 0.04em; color: rgba(255, 255, 255, 0.8); margin-top: 4px; }
.ds-hero__close {
    background: none; border: none; color: rgba(255, 255, 255, 0.75);
    font-size: 1.15rem; cursor: pointer; padding: 2px 4px; line-height: 1;
}
.ds-hero__close:hover { color: #fff; }

/* -------------------------------------------------------------------------
 * 16. ds-stat-strip — strip de metrici (sumarul mereu-vizibil "B")
 * ------------------------------------------------------------------------- */
.ds-stat-strip {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(120px, 1fr));
    gap: 1px;
    background: var(--border-subtle);
    border-bottom: 1px solid var(--border-subtle);
}
.ds-stat { background: var(--bg-surface); padding: 10px 14px; }
.ds-stat__label { font-size: var(--fs-eyebrow); text-transform: uppercase; letter-spacing: 0.04em; color: var(--text-soft); font-weight: 700; }
.ds-stat__value { font-size: 1.15rem; font-weight: 700; color: var(--text-strong); line-height: 1.25; font-variant-numeric: tabular-nums; }
.ds-stat__meta { font-size: var(--fs-small); color: var(--text-faint); }
.ds-stat__value--watch   { color: var(--signal-watch); }
.ds-stat__value--danger  { color: var(--signal-action); }
.ds-stat__value--success { color: var(--signal-on-track); }

/* -------------------------------------------------------------------------
 * 17. ds-tabs — bară de tab-uri premium (fișă + module). Accent roșu pe activ.
 * ------------------------------------------------------------------------- */
.ds-tabs {
    display: flex;
    gap: 2px;
    align-items: stretch;
    border-bottom: 1px solid var(--border-subtle);
    overflow-x: auto;
    scrollbar-width: thin;
}
.ds-tab {
    appearance: none;
    background: none;
    border: none;
    border-bottom: 2px solid transparent;
    padding: 11px 14px;
    font-family: inherit;
    font-size: var(--fs-small);
    font-weight: 600;
    color: var(--text-soft);
    white-space: nowrap;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    gap: 7px;
    transition: color 0.15s ease, border-color 0.15s ease, background 0.15s ease;
}
.ds-tab i { font-size: 0.9rem; }
.ds-tab:hover { color: var(--text-strong); background: var(--bg-subtle); }
.ds-tab.is-active { color: var(--caretta-navy); border-bottom-color: var(--caretta-red); }
.ds-tab__count {
    font-size: 0.66rem; font-weight: 700;
    background: var(--bg-subtle); color: var(--text-soft);
    border-radius: var(--r-pill); padding: 1px 7px;
}
.ds-tab.is-active .ds-tab__count { background: var(--caretta-red-soft); color: var(--caretta-red); }

.ds-tabpanel { display: none; }
.ds-tabpanel.is-active { display: block; }

/* -------------------------------------------------------------------------
 * 18. ds-flag — chip de conformitate (ok / atenție / problemă)
 * ------------------------------------------------------------------------- */
.ds-flag { display: inline-flex; align-items: center; gap: 6px; font-size: var(--fs-small); color: var(--text-default); }
.ds-flag i { font-size: 1rem; }
.ds-flag--ok i     { color: var(--signal-on-track); }
.ds-flag--watch i  { color: var(--signal-watch); }
.ds-flag--danger i { color: var(--signal-action); }

/* -------------------------------------------------------------------------
 * 19. ds-rail — coloană de sumar lateral (acțiuni rapide, mini-liste)
 * ------------------------------------------------------------------------- */
.ds-rail__group { display: flex; flex-direction: column; gap: 6px; }
.ds-rail__group + .ds-rail__group { margin-top: var(--sp-3); padding-top: var(--sp-3); border-top: 1px solid var(--border-subtle); }
.ds-rail__label { font-size: var(--fs-eyebrow); text-transform: uppercase; letter-spacing: 0.05em; color: var(--text-soft); font-weight: 700; }
.ds-rail__line { display: flex; align-items: center; gap: 8px; font-size: var(--fs-small); color: var(--text-default); }
.ds-rail__line i { font-size: 0.95rem; color: var(--signal-info); flex-shrink: 0; }

/* -------------------------------------------------------------------------
 * END — următoarele componente se pot adăuga la nevoie:
 *   .ds-toast, .ds-dropdown, .ds-tooltip
 * ------------------------------------------------------------------------- */