/*
   CRM (design-crm.md). Clase prefixate crm-; culorile vin doar din var(--mud-palette-*) si din color-mix peste o singura
   nuanta (--crm-hue, setata din CrmPaleta). Fara culori de suprafata scrise aici: totul urmeaza tema deschisa/intunecata.
*/

/* ---------- Tinta adaptata la tema ----------
   Textul tintat = nuanta amestecata cu polul de contrast al temei. Polul e text-primary fara transparenta (gri inchis pe
   tema deschisa, alb pe cea intunecata): text-primary din tema intunecata are alfa 0,7 si ar cobori contrastul sub 4,5:1.
   Procentele sunt alese pentru >= 4,5:1 pe suprafata si pe background-gray, in ambele teme. */
:root {
    --crm-pol: var(--mud-palette-text-primary);
}

@supports (color: rgb(from red r g b / 1)) {
    :root {
        --crm-pol: rgb(from var(--mud-palette-text-primary) r g b / 1);
    }
}

/* castigat / pierdut adusi la contrast (MudBlazor: succes implicit ~2,2:1 pe alb); aceleasi procente ca la chip-uri */
:root {
    --crm-culoare-castigat: color-mix(in srgb, var(--mud-palette-success) 35%, var(--crm-pol));
    --crm-culoare-pierdut: color-mix(in srgb, var(--mud-palette-error) 40%, var(--crm-pol));
}

/* ---------- Chip-uri ---------- */
.mud-chip.crm-chip-sursa,
.mud-chip.crm-chip-castigat,
.mud-chip.crm-chip-pierdut {
    --crm-procent-text: 45%;
    color: color-mix(in srgb, var(--crm-hue) var(--crm-procent-text), var(--crm-pol));
    background-color: color-mix(in srgb, var(--crm-hue) 14%, transparent);
    border: 1px solid color-mix(in srgb, var(--crm-hue) 40%, transparent);
}

.mud-chip.crm-chip-castigat {
    --crm-hue: var(--mud-palette-success);
    --crm-procent-text: 35%;
}

.mud-chip.crm-chip-pierdut {
    --crm-hue: var(--mud-palette-error);
    --crm-procent-text: 40%;
}

.mud-chip.crm-chip-punctat {
    border-style: dashed;
}

.mud-chip.crm-chip-sursa,
.mud-chip.crm-chip-etapa,
.mud-chip.crm-chip-stare {
    min-width: 0;
}

.mud-chip.crm-chip-sursa .mud-chip-content,
.mud-chip.crm-chip-etapa .mud-chip-content {
    overflow: hidden;
    text-overflow: ellipsis;
}

.mud-chip.crm-chip-doar-icon {
    padding: 0 4px;
}

.mud-chip.crm-chip-doar-icon .mud-chip-icon {
    margin: 0;
}

.mud-chip.crm-chip-doar-icon .mud-chip-content {
    display: none;
}

/* optiunile dezactivate din MutaInEtapaDialog pastreaza tinta, dar estompata */
.mud-radio.mud-disabled .mud-chip {
    opacity: .55;
}

/* iconite castigat / pierdut / arhivat: Class pe MudIcon in loc de Color (>= 3:1 pe alb si pe suprafetele intunecate) */
.crm-icon-castigat {
    color: var(--crm-culoare-castigat);
}

.crm-icon-pierdut {
    color: var(--crm-culoare-pierdut);
}

.crm-icon-arhivat {
    color: var(--mud-palette-text-secondary);
}

/* pe MudIcon clasa castiga si daca a ramas un Color (clasele mud-*-text ale MudBlazor au !important) */
.mud-icon-root.crm-icon-castigat {
    color: var(--crm-culoare-castigat) !important;
}

.mud-icon-root.crm-icon-pierdut {
    color: var(--crm-culoare-pierdut) !important;
}

.mud-icon-root.crm-icon-arhivat {
    color: var(--mud-palette-text-secondary) !important;
}

/* pe MudTimelineItem clasa coloreaza doar punctul, nu si continutul elementului */
.mud-timeline-item.crm-icon-castigat,
.mud-timeline-item.crm-icon-pierdut,
.mud-timeline-item.crm-icon-arhivat {
    color: inherit;
}

.mud-timeline-item.crm-icon-castigat .mud-timeline-item-dot-inner {
    background-color: var(--crm-culoare-castigat);
}

.mud-timeline-item.crm-icon-pierdut .mud-timeline-item-dot-inner {
    background-color: var(--crm-culoare-pierdut);
}

.mud-timeline-item.crm-icon-arhivat .mud-timeline-item-dot-inner {
    background-color: var(--mud-palette-text-secondary);
}

.crm-stare {
    display: inline-flex;
    flex-wrap: wrap;
    align-items: center;
}

/* ---------- Avatar responsabil ---------- */
.crm-responsabil {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    min-width: 0;
    vertical-align: middle;
}

.crm-responsabil-nume {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.mud-avatar.crm-avatar {
    color: color-mix(in srgb, var(--crm-hue) 45%, var(--crm-pol));
    background-color: color-mix(in srgb, var(--crm-hue) 22%, transparent);
    font-weight: 600;
    letter-spacing: .02em;
}

.mud-avatar.crm-avatar-gol {
    color: var(--mud-palette-text-secondary);
    background-color: transparent;
    border: 1px dashed var(--mud-palette-lines-inputs);
}

.mud-avatar.crm-avatar-gol .mud-icon-root {
    font-size: 1rem;
}

/* ---------- Metadate, sume, text ---------- */
.crm-num {
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
}

.mud-typography.crm-bold,
.crm-bold {
    font-weight: 600;
}

.crm-meta {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    font-size: var(--mud-typography-caption-size);
    line-height: var(--mud-typography-caption-lineheight);
    letter-spacing: var(--mud-typography-caption-letterspacing);
    color: var(--mud-palette-text-secondary);
    white-space: nowrap;
    vertical-align: middle;
}

.crm-meta .mud-icon-root {
    font-size: 1rem;
}

.crm-meta.crm-meta-body {
    font-size: var(--mud-typography-body2-size);
    line-height: var(--mud-typography-body2-lineheight);
    letter-spacing: var(--mud-typography-body2-letterspacing);
    color: inherit;
    gap: 8px;
}

.crm-meta.crm-meta-body .mud-icon-root {
    font-size: 1.25rem;
}

/* linkuri CRM: primarul temei adus la >= 4,5:1 si pe suprafetele intunecate (primarul implicit din tema intunecata ~2,8:1);
   !important pentru ca MudLink pune mereu mud-<culoare>-text, care are !important */
.crm-link,
.mud-link.crm-link {
    color: color-mix(in srgb, var(--mud-palette-primary) 65%, var(--crm-pol)) !important;
    text-underline-offset: .2em;
}

/* text liber (descrieri, note): randurile introduse se pastreaza, cuvintele foarte lungi se rup */
.crm-text-preline {
    white-space: pre-line;
    overflow-wrap: anywhere;
}

/* text restrans la patru randuri (se combina cu crm-text-preline; textul intreg se arata la cerere) */
.crm-text-clamp-4 {
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 4;
    line-clamp: 4;
    overflow: hidden;
}

/* lungimea de citire pentru textele lungi (descrierea din detaliu) */
.crm-text-masura {
    max-width: 75ch;
}

/* termen depasit: nuanta de avertisment adusa la contrast de text */
.crm-atentie,
.crm-meta.crm-atentie {
    color: color-mix(in srgb, var(--mud-palette-warning) 40%, var(--crm-pol));
    font-weight: 500;
}

.crm-meta.crm-bold {
    color: var(--mud-palette-text-primary);
}

.crm-totaluri {
    display: inline-flex;
    flex-direction: column;
    align-items: flex-end;
    font-size: var(--mud-typography-body2-size);
    line-height: var(--mud-typography-body2-lineheight);
}

.crm-totaluri.crm-totaluri-compact {
    font-size: var(--mud-typography-caption-size);
    line-height: var(--mud-typography-caption-lineheight);
}

.crm-ponderat {
    color: color-mix(in srgb, var(--mud-palette-primary) 60%, var(--crm-pol));
}

/* text doar pentru cititoarele de ecran (varianta lunga a indicatorilor compacti) */
.crm-sr-only {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}

.crm-icon-eticheta {
    display: inline-flex;
    vertical-align: middle;
}

/* ---------- Stare goala ---------- */
.crm-stare-goala {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 32px 16px;
    text-align: center;
}

.crm-stare-goala.crm-stare-goala-compact {
    gap: 4px;
    padding: 12px;
}

.crm-stare-goala-descriere {
    max-width: 48ch;
}

.crm-stare-goala-actiune {
    margin-top: 4px;
}

/* ---------- Tabla kanban ---------- */
.crm-tabla {
    display: flex;
    align-items: stretch;
    gap: 12px;
    height: 100%;
    overflow-x: auto;
    overflow-y: hidden;
    padding-bottom: 8px;
}

.crm-tabla.crm-tabla-in-drag {
    user-select: none;
}

.crm-coloana {
    flex: 0 0 280px;
    width: 280px;
    display: flex;
    flex-direction: column;
    height: 100%;
    min-height: 0;
    background-color: var(--mud-palette-background-gray);
    border-radius: 10px;
    overflow-y: auto;
}

@media (max-width: 1279px) {
    .crm-coloana {
        flex-basis: 240px;
        width: 240px;
    }
}

.crm-coloana-antet {
    position: sticky;
    top: 0;
    z-index: 2;
    padding: 10px 12px 8px;
    background-color: var(--mud-palette-background-gray);
    border-radius: 10px 10px 0 0;
}

.crm-coloana-finala-pozitiva .crm-coloana-antet {
    background-color: color-mix(in srgb, var(--mud-palette-success) 10%, var(--mud-palette-background-gray));
}

.crm-coloana-finala-negativa .crm-coloana-antet {
    background-color: color-mix(in srgb, var(--mud-palette-error) 10%, var(--mud-palette-background-gray));
}

.crm-zona {
    flex: 1 1 auto;
    display: flex;
    flex-direction: column;
    gap: 8px;
    min-height: 120px;
    padding: 8px;
    overflow-y: auto;
    border-radius: 8px;
    transition: background-color 120ms ease-out;
}

.crm-zona.crm-zona-goala {
    justify-content: center;
    margin: 0 8px 8px;
    border: 1px dashed var(--mud-palette-lines-inputs);
}

.crm-zona.crm-poate-primi,
.crm-poate-primi {
    background-color: color-mix(in srgb, var(--mud-palette-primary) 7%, transparent);
    outline: 1px dashed var(--mud-palette-primary);
    outline-offset: -4px;
}

.crm-zona.crm-nu-poate-primi,
.crm-nu-poate-primi {
    opacity: .55;
    cursor: not-allowed;
}

/* ---------- Panoul de sarcini: zonele pe status, peste coloană, cât ține tragerea ---------- */
.sarcini-coloana-cadru {
    position: relative;
    display: flex;
    flex: 0 0 auto;
    height: 100%;
}

.sarcini-zone-status {
    position: absolute;
    inset: 46px 6px 6px;
    z-index: 3;
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.sarcini-zona-status {
    flex: 1 1 0;
    min-height: 48px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 2px;
    padding: 8px;
    text-align: center;
    border: 2px dashed;
    border-radius: 8px;
    background-color: color-mix(in srgb, var(--mud-palette-surface) 94%, transparent);
    transition: background-color 120ms ease-out;
}

/* copiii nu primesc evenimente de tragere: dragenter/dragleave doar pe zonă */
.sarcini-zona-status * {
    pointer-events: none;
}

.sarcini-zona-status-nume {
    font-weight: 600;
    overflow-wrap: anywhere;
}

.sarcini-zona-status.crm-poate-primi {
    border-style: solid;
    outline: none;
    background-color: color-mix(in srgb, var(--mud-palette-primary) 12%, var(--mud-palette-surface));
}

.sarcini-zona-status-curenta {
    opacity: .6;
    cursor: not-allowed;
}

/* ---------- Card ---------- */
.crm-card {
    position: relative;
    padding: 10px 12px;
    background-color: var(--mud-palette-surface);
    border: 1px solid var(--mud-palette-lines-default);
    border-radius: 8px;
    cursor: pointer;
    transition: box-shadow 120ms ease-out, transform 120ms ease-out, background-color 120ms ease-out;
}

/* titlul cardului kanban: cel mult doua randuri, cuvintele lungi se rup */
.crm-card-titlu {
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
    line-clamp: 2;
    overflow: hidden;
    overflow-wrap: anywhere;
    min-width: 0;
}

@media (hover: hover) {
    .crm-card:hover {
        box-shadow: 0 2px 8px rgba(0, 0, 0, .12);
    }
}

.crm-card:focus-visible {
    outline: 2px solid var(--mud-palette-primary);
    outline-offset: 2px;
}

/* ItemDraggingClass ajunge pe .mud-drop-item (care are transform inline), deci efectul se pune pe cardul din el */
.crm-card-drag {
    opacity: .65;
}

.crm-card-drag .crm-card,
.crm-card.crm-card-drag {
    transform: rotate(1.5deg) scale(1.02);
    box-shadow: 0 8px 20px rgba(0, 0, 0, .18);
}

.crm-card.crm-card-in-curs {
    opacity: .6;
    pointer-events: none;
    cursor: progress;
}

.crm-card-arhivat {
    opacity: .72;
}

/* ---------- Detaliu: atribuire ---------- */
.crm-atribuire {
    display: grid;
    grid-template-columns: max-content minmax(0, 1fr);
    gap: 6px 16px;
    align-items: baseline;
    margin: 0;
}

.crm-atribuire dt {
    font-size: var(--mud-typography-caption-size);
    color: var(--mud-palette-text-secondary);
}

.crm-atribuire dd {
    margin: 0;
    min-width: 0;
    overflow-wrap: anywhere;
    font-size: var(--mud-typography-body2-size);
}

@media (max-width: 599px) {
    .crm-atribuire {
        grid-template-columns: minmax(0, 1fr);
        gap: 2px;
    }

    .crm-atribuire dd {
        margin-bottom: 8px;
    }
}

/* ---------- Raport ---------- */
.crm-matrice td {
    background-color: color-mix(in srgb, var(--mud-palette-primary) calc(var(--crm-intensitate, 0) * 28%), transparent);
    font-variant-numeric: tabular-nums;
}

.crm-kpi {
    height: 100%;
    padding: 12px 16px;
    background-color: var(--mud-palette-surface);
    border: 1px solid var(--mud-palette-lines-default);
    border-radius: 8px;
}

/* specificitate peste regulile de culoare MudBlazor (.mud-progress-linear.mud-progress-linear-color-*:not(...)) */
.mud-progress-linear.mud-progress-linear.crm-bara-sursa:not(.mud-progress-linear-buffer) .mud-progress-linear-bar {
    background-color: var(--crm-hue);
}

.mud-progress-linear.mud-progress-linear.crm-bara-sursa:not(.mud-progress-linear-buffer)::before {
    background-color: color-mix(in srgb, var(--crm-hue) 16%, transparent);
}

/* ---------- Filtre ---------- */
.crm-filtre:not(.mud-collapse-container),
.crm-filtre > .mud-collapse-wrapper > .mud-collapse-wrapper-inner {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px 12px;
    padding: 8px 0 12px;
}

.crm-filtre-inline {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px 12px;
}

/* raport: randurile din filtre (intervalul de date are ~466 px) se infasoara pe ecrane inguste */
@media (max-width: 959px) {
    .crm-filtre-inline > .d-flex {
        flex-wrap: wrap;
        row-gap: 8px;
    }
}

/* ---------- Formulare si dialoguri CRM ---------- */
.mud-divider.crm-grup-separator {
    margin: 20px 0 12px;
}

.mud-typography.crm-grup-titlu {
    margin-bottom: 4px;
}

.crm-camp-partener {
    display: flex;
    align-items: flex-end;
    gap: 4px;
}

.crm-camp-partener > .mud-input-control {
    flex: 1 1 auto;
    min-width: 0;
}

.crm-camp-rating {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 2px;
    margin-top: 16px;
}

.crm-lista-etape .mud-radio-group {
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.crm-lista-etape .mud-radio {
    align-items: flex-start;
    width: 100%;
}

.crm-optiune-etapa {
    display: flex;
    flex-direction: column;
    gap: 2px;
    padding: 6px 0;
    min-width: 0;
}

.crm-optiune-etapa-titlu {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 4px 8px;
}

.crm-optiune-etapa-titlu .mud-chip {
    margin: 0;
}

.crm-optiune-etapa-descriere {
    font-size: var(--mud-typography-caption-size);
    line-height: var(--mud-typography-caption-lineheight);
    color: var(--mud-palette-text-secondary);
}

/* Latimea dialogurilor CRM vine de la apelant (CrmDialoguri: MaxWidth + FullWidth). Daca un apelant nu trimite
   optiunile, dialogul umple totusi latimea maxima aplicata (implicit Small), in loc sa se stranga dupa continut. */
.mud-dialog.crm-dialog:not(.mud-dialog-width-full):not(.mud-dialog-fullscreen) {
    width: calc(100% - 64px);
}

/* Deviatia 11 (ruling 25): dialogurile generice deschise din CRM (fundal marcat crm-dialog-overlay) nu mai impun pe
   telefon latimea minima inline. MudBlazor 8.15 randeaza fundalul imediat inaintea .mud-dialog, in acelasi container. */
@media (max-width: 640px) {
    .crm-dialog-overlay ~ .mud-dialog .mud-dialog-content .mud-paper[style*="min-width"] {
        min-width: 0 !important;
    }
}

/* ---------- Cadrul paginii pe ecrane inguste (ruling 25 #7) ----------
   Selectori pe marcajul RegFullPageProtected: MudPaper exterior > [MudStack antet (div.d-flex), MudPaper continut].
   MudStack nu are clasa proprie in MudBlazor 8.15, de aceea antetul e tinta .d-flex:first-child. */
@media (max-width: 959px) {
    .crm-pagina > .mud-paper {
        height: auto !important;
        min-height: 90vh;
    }

    .crm-pagina > .mud-paper > .d-flex:first-child {
        height: auto !important;
        flex-wrap: wrap;
        row-gap: 8px;
        align-items: center;
    }

    .crm-pagina > .mud-paper > .d-flex:first-child > .d-flex {
        flex-wrap: wrap;
        row-gap: 8px;
    }

    .crm-pagina > .mud-paper > .mud-paper:last-child {
        height: auto !important;
        max-height: 78vh;
    }
}

/* ---------- Antet liber (raportul Surse, ruling 32): crm-pagina crm-pagina-antet-liber ----------
   Randul de filtre al raportului (Flux, interval, Responsabil, Genereaza / Raport nou / Export) sta mereu in
   FilterAreaContent. Antetul RegFullPageProtected are inline height: 5vh; aici creste si se infasoara la orice latime, iar
   randul trece sub titlu cand nu incape langa el (titlul ramane pe un rand). Hartia exterioara devine coloana flex si
   continutul (inline 80vh) ocupa exact restul, cu derularea lui. Antetul e tintit prin .justify-space-between: stiva
   „fara drepturi", tot primul copil al hartiei, e .justify-center si ramane centrata. */
.crm-pagina.crm-pagina-antet-liber > .mud-paper {
    display: flex;
    flex-direction: column;
}

.crm-pagina.crm-pagina-antet-liber > .mud-paper > .d-flex.justify-space-between:first-child {
    flex: 0 0 auto;
    height: auto !important;
    min-height: 5vh;
    flex-wrap: wrap;
    row-gap: 8px;
    align-items: flex-start;
}

.crm-pagina.crm-pagina-antet-liber > .mud-paper > .mud-paper:last-child {
    flex: 1 1 auto;
    min-height: 0;
    height: auto !important;
}

/* ---------- Bare de derulare tematice ---------- */
.crm-tabla,
.crm-coloana,
.crm-zona {
    scrollbar-width: thin;
    scrollbar-color: var(--mud-palette-lines-inputs) transparent;
}

.crm-tabla::-webkit-scrollbar,
.crm-coloana::-webkit-scrollbar,
.crm-zona::-webkit-scrollbar {
    width: 8px;
    height: 8px;
}

.crm-tabla::-webkit-scrollbar-track,
.crm-coloana::-webkit-scrollbar-track,
.crm-zona::-webkit-scrollbar-track {
    background: transparent;
}

.crm-tabla::-webkit-scrollbar-thumb,
.crm-coloana::-webkit-scrollbar-thumb,
.crm-zona::-webkit-scrollbar-thumb {
    background-color: var(--mud-palette-lines-inputs);
    border-radius: 8px;
}