/* ============================================================
   components.css — elemente refolosite in mai multe pagini.
   ============================================================ */

/* ── Toast-uri SweetAlert2, colorate dupa tip ── */

.colored-toast.swal2-icon-success {
    background-color: var(--bs-success) !important;
}

.colored-toast.swal2-icon-error {
    background-color: var(--bs-danger) !important;
}

.colored-toast.swal2-icon-warning {
    background-color: var(--bs-warning) !important;
}

.colored-toast.swal2-icon-info {
    background-color: var(--bs-info) !important;
}

.colored-toast .swal2-title,
.colored-toast .swal2-html-container,
.colored-toast .swal2-close {
    color: #fff !important;
}

/* ── Card de selectie ──
   Un card cu bifa inauntru, unde toata suprafata e clicabila prin <label>.
   Folosit in ecranul de permisiuni; se refoloseste oriunde apare o lista
   de optiuni bifabile.

   Structura asteptata:

     <div class="selection-card">
         <label class="card h-100 mb-0 cursor-pointer">
             <div class="card-body d-flex align-items-center gap-3 py-4">
                 <input type="checkbox" class="form-check-input mt-0" />
                 <span class="flex-grow-1">Text</span>
             </div>
         </label>
     </div>

   Pentru optiunile care merita atentie, se adauga `border-danger` pe card. */

.selection-card .card {
    transition: border-color 0.15s, background-color 0.15s;
}

    .selection-card .card:hover {
        border-color: var(--bs-primary);
    }

    .selection-card .card:has(.form-check-input:checked) {
        border-color: var(--bs-primary);
        background-color: var(--bs-primary-bg-subtle);
    }

    /* Optiunile marcate isi pastreaza culoarea si cand sunt bifate */
    .selection-card .card.border-danger:has(.form-check-input:checked) {
        border-color: var(--bs-danger) !important;
        background-color: var(--bs-danger-bg-subtle);
    }

    .selection-card .card:has(.form-check-input:disabled) {
        cursor: default;
        opacity: 0.75;
    }

        .selection-card .card:has(.form-check-input:disabled):hover {
            border-color: var(--bs-border-color);
        }

/* ── Poza, mai mare ──
   Fereastra din _PhotoPreview, deschisa din shared/photoPreview.ts: poza intreaga - nu taiata, ca
   in miniaturi -, la marimea ei, fara marire, fiindca marita s-ar vedea neclar. Fereastra se
   strange pe poza; pe un ecran mai mic, poza se micsoreaza. Inchiderea sta peste coltul ei, pe un
   cerc plin, ca sa se vada pe orice poza. */

.modal-dialog.photo-preview-dialog {
    width: fit-content;
    max-width: calc(100% - var(--bs-modal-margin) * 2);
    margin-right: auto;
    margin-left: auto;
}

.photo-preview {
    overflow: hidden;
}

.photo-preview-image {
    display: block;
    max-width: 100%;
    max-height: 80vh;
}

/* Un buton al nostru, nu btn-close: tot aspectul lui sta aici, separat de cel al ferestrelor cu
   antet. */
.photo-preview-close {
    position: absolute;
    top: 0.75rem;
    right: 0.75rem;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 2rem;
    height: 2rem;
    padding: 0;
    border: 0;
    border-radius: 50%;
    color: var(--bs-heading-color);
    background-color: var(--bs-body-bg);
    box-shadow: 0 1px 4px rgba(34, 48, 62, 0.16);
}

    .photo-preview-close:focus-visible {
        outline: 3px solid var(--bs-primary);
        outline-offset: 2px;
    }

/* ── Zona in care se trag pozele ──
   Un <label> peste campul de fisiere: un clic oriunde in zona deschide alegerea,
   iar campul ramane in pagina, pentru tastatura. Folosita in biblioteca Postarilor
   si in Text pentru poza.

   Structura asteptata:

     <label class="photo-drop js-drop">
         <i class="icon-base bx bx-cloud-upload photo-drop-icon text-primary"></i>
         <span class="fw-medium text-heading">Trage pozele aici</span>
         <span class="text-body-secondary small">sau</span>
         <span class="btn btn-primary">Alege</span>
         <span class="photo-drop-hint text-body-secondary small">JPEG sau PNG</span>
         <input type="file" class="photo-drop-input" accept="image/jpeg,image/png" />
     </label>

   `is-over` o pune scriptul cat se trage o poza deasupra, `is-compact` cand zona se
   strange pe un rand. */

.photo-drop {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 0.5rem 1rem;
    margin: 0;
    padding: 2rem 1.5rem;
    border: 2px dashed var(--bs-primary-border-subtle);
    border-radius: var(--bs-border-radius-lg);
    background-color: var(--bs-tertiary-bg);
    text-align: center;
    cursor: pointer;
    transition: border-color 0.15s, background-color 0.15s;
}

    .photo-drop:hover,
    .photo-drop.is-over {
        border-color: var(--bs-primary);
        background-color: var(--bs-primary-bg-subtle);
    }

    .photo-drop:focus-within {
        outline: 2px solid var(--bs-primary);
        outline-offset: 2px;
    }

    /* Cat sub zona e o lista, ca pozele care urca in biblioteca, zona se strange pe un rand. */
    .photo-drop.is-compact {
        flex-direction: row;
        flex-wrap: wrap;
        padding: 1rem 1.5rem;
    }

        .photo-drop.is-compact .photo-drop-icon,
        .photo-drop.is-compact .photo-drop-hint {
            display: none;
        }

.photo-drop-icon {
    width: 2rem;
    height: 2rem;
    font-size: 2rem;
}

/* Ascuns privirii, dar nu tastaturii: Tab ajunge la el, iar zona arata conturul. */
.photo-drop-input {
    position: absolute;
    width: 1px;
    height: 1px;
    opacity: 0;
    overflow: hidden;
    pointer-events: none;
}