/*
 * Instructa — stratul de design peste Filament.
 * Temă deschisă (aplicația nu are mod întunecat): alb și gri foarte deschis, carduri cu umbre fine,
 * culorile păstrate doar pentru stări (la zi, scadent, expirat). Se încarcă din AdminPanelProvider.
 */

:root {
    --in-radius: 16px;
    --in-radius-sm: 12px;
    --in-line: #e7eaf0;
    --in-line-soft: #eef1f5;
    --in-muted: #64748b;
    --in-faint: #94a3b8;
    --in-ink: #0f172a;
    --in-surface: #ffffff;
    --in-surface-soft: #f8fafc;
    --in-shadow: 0 0 0 1px rgb(15 23 42 / 0.05), 0 1px 2px rgb(15 23 42 / 0.04), 0 10px 28px -16px rgb(15 23 42 / 0.16);
}


/* ---------- Cadrul aplicației ---------- */

.fi-body {
    background-color: #f8fafc;
}

@media (min-width: 1024px) {
    .fi-sidebar {
        background-color: #ffffff;
        border-inline-end: 1px solid var(--in-line);
    }
}

.fi-topbar {
    box-shadow: none;
    border-bottom: 1px solid var(--in-line);
}

.fi-header-heading {
    letter-spacing: -0.02em;
}

.fi-header-subheading {
    color: var(--in-muted);
}

.fi-sidebar-item.fi-active > .fi-sidebar-item-btn {
    background-color: color-mix(in srgb, var(--primary-600) 9%, white);
}

.fi-sidebar-item.fi-active .fi-sidebar-item-label {
    color: var(--primary-700);
}

/* ---------- Carduri: secțiuni, tabele, statistici, ferestre ---------- */

.fi-section:not(.fi-section-not-contained),
.fi-ta-ctn,
.fi-wi-stats-overview-stat {
    border-radius: var(--in-radius);
}

.fi-section:not(.fi-section-not-contained),
.fi-ta-ctn,
.fi-wi-stats-overview-stat {
    box-shadow: var(--in-shadow);
}

.fi-section-header-heading {
    letter-spacing: -0.01em;
}

.fi-section-header-description {
    color: var(--in-muted);
}

.fi-modal-window {
    border-radius: 20px;
}

/* ---------- Tabele: antet discret, rânduri aerisite ---------- */

.fi-ta-header-cell {
    background-color: var(--in-surface-soft);
    color: #475569;
}

.fi-ta-row:hover {
    background-color: #fafbfd;
}

/* ---------- Statistici ---------- */

.fi-wi-stats-overview-stat-label {
    color: var(--in-muted);
}

.fi-wi-stats-overview-stat-value {
    letter-spacing: -0.03em;
}

/* ---------- Tab-uri ---------- */

.fi-tabs-item.fi-active {
    background-color: color-mix(in srgb, var(--primary-600) 9%, white);
}

/* ---------- Situația instruirilor (pagina angajatului): câte un card pentru fiecare fișă ---------- */

.in-fise-wrap {
    container-type: inline-size;
}

.in-fise {
    display: grid;
    gap: 1rem;
    align-items: start;
    grid-template-columns: minmax(0, 1fr);
}

/* Cardurile stau alături doar când secțiunea e destul de lată. */
@container (min-width: 860px) {
    .in-fise {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

.in-fisa {
    overflow: hidden;
    border: 1px solid var(--in-line);
    border-radius: var(--in-radius-sm);
    background: var(--in-surface);
}

.in-fisa__head {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding: 0.85rem 1rem;
    border-bottom: 1px solid var(--in-line);
    background: var(--in-surface-soft);
}

.in-fisa__icon {
    display: flex;
    flex: none;
    align-items: center;
    justify-content: center;
    width: 2.25rem;
    height: 2.25rem;
    border-radius: 10px;
    background: color-mix(in srgb, var(--primary-600) 10%, white);
    color: var(--primary-600);
}

.in-fisa__icon svg {
    width: 1.25rem;
    height: 1.25rem;
}

.in-fisa__heading {
    flex: 1;
    min-width: 0;
}

.in-fisa__title {
    display: block;
    font-size: 0.9375rem;
    font-weight: 600;
    color: var(--in-ink);
}

.in-fisa__subtitle {
    display: block;
    font-size: 0.8125rem;
    color: var(--in-muted);
}

.in-fisa__open {
    display: inline-flex;
    flex: none;
    align-items: center;
    gap: 0.35rem;
    padding: 0.35rem 0.7rem;
    border: 1px solid var(--in-line);
    border-radius: 8px;
    background: #ffffff;
    font-size: 0.8125rem;
    font-weight: 500;
    color: #334155;
}

.in-fisa__open:hover {
    background: var(--in-surface-soft);
}

.in-fisa__open svg {
    width: 0.9rem;
    height: 0.9rem;
    color: var(--in-faint);
}

.in-fisa__section {
    padding-top: 0.9rem;
}

.in-fisa__section + .in-fisa__section {
    border-top: 1px solid var(--in-line);
}

.in-fisa__section-head,
.in-fisa__section > .in-group__subtitle {
    padding-inline: 1rem;
}

.in-fisa__section-head {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 0.75rem;
}

.in-fisa__progress {
    font-size: 0.75rem;
    font-weight: 500;
    white-space: nowrap;
    color: var(--in-muted);
}

.in-fisa__progress.is-complete {
    color: #047857;
}

.in-fisa__rows {
    border-top: 1px solid var(--in-line-soft);
}

/* Pașii de la angajare: număr în cerc, bifă verde când pasul e făcut. */
.in-step {
    display: flex;
    flex: none;
    align-items: center;
    justify-content: center;
    width: 1.5rem;
    height: 1.5rem;
    border-radius: 999px;
    background: #ffffff;
    box-shadow: inset 0 0 0 1.5px #cbd5e1;
    font-size: 0.75rem;
    font-weight: 600;
    color: var(--in-muted);
}

.in-step--success { background: #10b981; box-shadow: none; color: #ffffff; }
.in-step--warning { box-shadow: inset 0 0 0 1.5px #f59e0b; color: #b45309; }
.in-step--danger { box-shadow: inset 0 0 0 1.5px #f43f5e; color: #e11d48; }

.in-step__check {
    width: 0.9rem;
    height: 0.9rem;
}

.in-group__title {
    font-size: 0.75rem;
    font-weight: 600;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--in-muted);
}

.in-group__subtitle {
    margin: 0.15rem 0 0.6rem;
    font-size: 0.8125rem;
    color: var(--in-faint);
}

.in-row {
    display: flex;
    align-items: center;
    gap: 0.85rem;
    width: 100%;
    padding: 0.8rem 1rem;
    text-align: left;
    background: transparent;
    cursor: pointer;
    transition: background-color 0.15s ease;
}

.in-row + .in-row {
    border-top: 1px solid var(--in-line-soft);
}

.in-row:hover,
.in-row:focus-visible {
    background-color: var(--in-surface-soft);
    outline: none;
}

.in-row__main {
    flex: 1;
    min-width: 0;
}

.in-row__title {
    font-size: 0.875rem;
    font-weight: 600;
    color: var(--in-ink);
}

.in-row__when {
    margin-top: 0.15rem;
    font-size: 0.8125rem;
    line-height: 1.4;
    color: var(--in-muted);
}

.in-row__side {
    display: flex;
    flex: none;
    align-items: center;
    gap: 0.6rem;
}

.in-row__chevron {
    width: 1rem;
    height: 1rem;
    color: var(--in-faint);
}

.in-row__dot-wrap {
    display: flex;
    flex: none;
    align-items: center;
}

.in-dot {
    display: inline-block;
    flex: none;
    width: 0.6rem;
    height: 0.6rem;
    border-radius: 999px;
    background: #cbd5e1;
}

.in-dot--success { background: #10b981; }
.in-dot--warning { background: #f59e0b; }
.in-dot--danger { background: #f43f5e; }
.in-dot--gray { background: #cbd5e1; }
.in-dot--none { background: transparent; box-shadow: inset 0 0 0 1.5px #cbd5e1; }

.in-state {
    font-size: 0.8125rem;
    font-weight: 500;
    white-space: nowrap;
}

.in-state--success { color: #047857; }
.in-state--warning { color: #b45309; }
.in-state--danger { color: #e11d48; }
.in-state--gray { color: var(--in-muted); }


@media (max-width: 640px) {
    .in-row {
        flex-wrap: wrap;
        align-items: flex-start;
    }

    .in-row__dot-wrap {
        padding-top: 0.35rem;
    }

    .in-row__side {
        width: 100%;
        padding-left: 1.45rem;
    }

    .in-row--step .in-row__side {
        padding-left: 2.35rem;
    }

    /* Butonul „Deschide fișa” trece sub titlu, ca titlul să nu se rupă pe trei rânduri. */
    .in-fisa__head {
        flex-wrap: wrap;
    }

    .in-fisa__heading {
        flex-basis: calc(100% - 3rem);
    }

    .in-fisa__open {
        margin-left: 3rem;
    }

    .in-state {
        white-space: normal;
    }

    .in-row__chevron {
        display: none;
    }
}

/* ---------- Fereastra de detalii a unei instruiri ---------- */

.in-details {
    display: grid;
    gap: 1.25rem;
    grid-template-columns: minmax(0, 1fr);
}

@media (min-width: 1024px) {
    .in-details {
        grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
    }
}

.in-card {
    padding: 1rem 1.1rem;
    border: 1px solid var(--in-line);
    border-radius: var(--in-radius-sm);
    background: var(--in-surface);
}

.in-card + .in-card {
    margin-top: 0.85rem;
}

.in-card__label {
    margin-bottom: 0.35rem;
    font-size: 0.72rem;
    font-weight: 600;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--in-faint);
}

.in-card__text {
    font-size: 0.875rem;
    line-height: 1.5;
    color: var(--in-ink);
}

.in-card__meta {
    margin-top: 0.4rem;
    font-size: 0.75rem;
    color: var(--in-faint);
}

.in-history {
    display: flex;
    flex-direction: column;
}

.in-history__item {
    padding: 0.7rem 0;
}

.in-history__item + .in-history__item {
    border-top: 1px solid var(--in-line-soft);
}

.in-history__head {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 0.35rem 0.75rem;
}

.in-history__date {
    font-size: 0.875rem;
    font-weight: 600;
    color: var(--in-ink);
}

.in-history__body {
    margin-top: 0.25rem;
    font-size: 0.8125rem;
    line-height: 1.45;
    color: var(--in-muted);
}

.in-history__content {
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

/* Locurile de semnătură ale unui rând din fișă, cu „Semnează” la cele care lipsesc. */
.in-sigs {
    display: flex;
    flex-direction: column;
    gap: 0.45rem;
    margin-top: 0.6rem;
    padding: 0.6rem 0.75rem;
    border-radius: 10px;
    background: var(--in-surface-soft);
}

.in-sig {
    display: flex;
    align-items: center;
    gap: 0.6rem;
    min-height: 1.75rem;
}

.in-sig__mark {
    display: flex;
    flex: none;
    align-items: center;
    justify-content: center;
    width: 1.1rem;
    height: 1.1rem;
    border-radius: 999px;
    box-shadow: inset 0 0 0 1.5px #cbd5e1;
    background: #ffffff;
}

.in-sig__mark.is-done {
    background: #10b981;
    box-shadow: none;
    color: #ffffff;
}

.in-sig__mark svg {
    width: 0.75rem;
    height: 0.75rem;
}

.in-sig__who {
    flex: 1;
    min-width: 0;
    font-size: 0.8125rem;
    line-height: 1.3;
}

.in-sig__name {
    font-weight: 600;
    color: var(--in-ink);
}

.in-sig__role {
    margin-left: 0.3rem;
    color: var(--in-muted);
}

.in-sig__state {
    flex: none;
    font-size: 0.75rem;
    color: var(--in-muted);
    text-align: right;
}

@media (max-width: 640px) {
    .in-sig {
        flex-wrap: wrap;
    }

    .in-sig__role {
        display: block;
        margin-left: 0;
    }

    .in-sig__state {
        width: 100%;
        padding-left: 1.7rem;
        text-align: left;
    }
}

.in-pdf {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

.in-pdf__frame {
    width: 100%;
    height: 72vh;
    border: 1px solid var(--in-line);
    border-radius: var(--in-radius-sm);
    background: #fff;
}

.in-pdf__caption {
    font-size: 0.75rem;
    color: var(--in-faint);
}

.in-pdf__mobile {
    display: none;
}

/* Pe telefon, browserele nu afișează PDF-ul în pagină: rămâne butonul de deschidere. */
@media (max-width: 767px) {
    .in-pdf__frame,
    .in-pdf__caption {
        display: none;
    }

    .in-pdf__mobile {
        display: block;
    }
}

/* ---------- Telefon: mai puțin spațiu pierdut pe margini ---------- */

@media (max-width: 640px) {
    .fi-section:not(.fi-section-not-contained):not(.fi-divided) > .fi-section-content-ctn > .fi-section-content {
        padding: 1rem;
    }

    .fi-section-header {
        padding-inline: 1rem;
    }

    .in-row {
        padding: 0.75rem 0.85rem;
    }
}

/* ---------- Tabele: fără rândul gol lăsat de bara de acțiuni inexistentă ---------- */

.fi-ta-header-toolbar > .fi-ta-actions:not(:has(*)) {
    display: none;
}

@media (max-width: 640px) {
    .fi-wi-stats-overview-stat {
        padding: 1rem;
    }

    .fi-wi-stats-overview-stat-value {
        font-size: 1.5rem;
    }
}

/* Elemente de prisos pe telefon (de ex. „Deschide” când tot rândul se deschide la atingere). */
@media (max-width: 767px) {
    .in-hide-mobile {
        display: none !important;
    }
}

/* ---------- Semnătura pe ecran (chenarul SignaturePad) ---------- */

.in-sigpad {
    position: relative;
    overflow: hidden;
    border: 1.5px dashed #cbd5e1;
    border-radius: var(--in-radius-sm);
    background: #ffffff;
}

.in-sigpad__canvas {
    position: relative;
    z-index: 1;
    display: block;
    width: 100%;
    height: 200px;
    cursor: crosshair;
    touch-action: none;
    user-select: none;
    -webkit-user-select: none;
}

.in-sigpad__line {
    position: absolute;
    right: 1.25rem;
    bottom: 2.75rem;
    left: 1.25rem;
    border-bottom: 1px solid #e2e8f0;
    font-size: 1.1rem;
    line-height: 1.5;
    color: #94a3b8;
    pointer-events: none;
}

.in-sigpad__hint {
    position: absolute;
    top: 1rem;
    right: 0;
    left: 0;
    font-size: 0.8125rem;
    text-align: center;
    color: var(--in-faint);
    pointer-events: none;
}

.in-sigpad__clear {
    position: absolute;
    z-index: 2;
    top: 0.5rem;
    right: 0.5rem;
    padding: 0.25rem 0.65rem;
    border: 1px solid var(--in-line);
    border-radius: 8px;
    background: #ffffff;
    font-size: 0.75rem;
    font-weight: 500;
    color: #475569;
}

.in-sigpad__clear:hover {
    background: var(--in-surface-soft);
}

@media (max-width: 640px) {
    .in-sigpad__canvas {
        height: 170px;
    }
}