/**
 * Custom Views CSS
 * This file contains styles extracted from inline styles and style blocks in Blade templates
 * to improve maintainability and follow best practices
 */

/* ============================================
   ADMIN HOME PAGE STYLES
   ============================================ */

/* Card struttura with fixed height */
.card-struttura {
    height: 134px !important;
}

/* Card struttura fixed height (alias without !important) */
.card-struttura-fixed {
    height: 134px;
}

/* Mini card - inherit colors from parent */
.mini-card * {
    color: inherit !important;
}

/* Border bottom custom utility */
.border-bottom-custom {
    border-bottom: 1px solid #dee2e6;
}

/* Margin right utilities */
.mr-50 {
    margin-right: 50px;
}

/* Font size utilities */
.fs-14 {
    font-size: 14px;
}

/* Vertical align utilities */
.va-middle {
    vertical-align: middle;
}

.v-align-middle {
    vertical-align: middle;
}

/* Background gradient - primary to secondary */
.bg-gradient-primary-secondary {
    background: linear-gradient(var(--bs-primary), var(--bs-secondary));
    opacity: 0.9;
}

/* Gradient primary secondary */
.gradient-primary-secondary {
    background: linear-gradient(to right, #eb7b26, #8c26e7);
}

/* Opacity utility */
.opacity-90 {
    opacity: 0.9;
}

/* ============================================
   PRACTICE DETAIL PAGE STYLES
   ============================================ */

/* Table row separator with primary background */
.tr-separator-primary {
    background-color: #4b428d;
}

/* Override Bootstrap's striped table accent for separator rows */
.table-striped > tbody > tr.tr-separator-primary > * {
    --bs-table-accent-bg: var(--bs-table-striped-bg) !important;
    color: var(--bs-table-striped-color) !important;
}

/* Alias for backward compatibility */
.tr-separatore {
    background-color: #4b428d;
}

.table-striped > tbody > tr.tr-separatore > * {
    --bs-table-accent-bg: var(--bs-table-striped-bg) !important;
    color: var(--bs-table-striped-color) !important;
}

/* ============================================
   LOGIN PAGE STYLES
   ============================================ */

/* Login container with white background */
.login-bg-white {
    background-color: #fff;
}

/* Login container width */
.login-container {
    width: 350px;
}

/* Login visual background */
.login-visual-bg {
    background-image: url('/img/login-visual-w.svg');
}

/* Login visual background with positioning */
.login-visual {
    background-image: url('/imgs/login-background.jpeg');
    background-position: center;
    background-size: cover;
    background-repeat: no-repeat;
}

/* Login page body background */
body.login-page-bg {
    background-image: url('/imgs/login-background.jpeg');
}

/* ============================================
   PROGRESS BAR STYLES (for upload templates)
   ============================================ */

/* Upload progress bar positioning */
.upload-progress {
    z-index: 1000;
    width: 100px;
}

/* Progress bar with width control */
.progress-width-0 {
    width: 0%;
}

/* ============================================
   BUTTON STYLES
   ============================================ */

/* Registration CTA card */
.register-cta-card {
    background: rgba(255, 255, 255, 0.92);
    backdrop-filter: blur(8px);
    border: 1px solid rgba(37, 99, 235, 0.15);
    border-radius: 16px;
    padding: 1.75rem 2rem;
    margin-top: 1.5rem;
    text-align: left;
    max-width: 360px;
    box-shadow: 0 4px 24px rgba(0, 0, 0, 0.08);
}

.register-cta-card__header {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    font-size: 1rem;
    font-weight: 700;
    color: #1E293B;
    margin-bottom: 0.6rem;
}

.register-cta-card__header svg {
    color: #2563EB;
    flex-shrink: 0;
}

.register-cta-card__text {
    font-size: 0.875rem;
    color: #64748B;
    font-weight: 400;
    line-height: 1.55;
    margin-bottom: 1.25rem;
}

.register-cta-card__btn {
    width: 100%;
    display: block;
    font-weight: 600;
}

/* Solid orange CTA — reusable across registration views */
.btn-cta-orange {
    background-color: #F97316 !important;
    background-image: none !important;
    color: white !important;
    font-family: 'Poppins';
    font-weight: 700;
    border-radius: 10px;
    border: none;
    padding: 0.65rem 1.5rem;
    box-shadow: 0 4px 14px rgba(249, 115, 22, 0.40);
    transition: background-color 0.2s ease, box-shadow 0.2s ease, transform 0.15s ease;
    display: inline-flex !important;
    align-items: center;
    gap: 0.4rem;
}

.btn-cta-orange:hover,
.btn-cta-orange:focus {
    background-color: #ea6c0a !important;
    background-image: none !important;
    color: white !important;
    box-shadow: 0 6px 20px rgba(249, 115, 22, 0.55);
    transform: translateY(-2px);
}

.btn-cta-orange:active {
    background-color: #d4610a !important;
    background-image: none !important;
    transform: translateY(0);
}

/* Metronic setta .btn>i { display:inline-flex; padding-right:.35rem }
   che rompe il rendering FA7 Duotone (::before position:absolute + ::after statico
   diventano flex items side-by-side invece di sovrapposti).
   Ripristiniamo display:inline-block e azzeriamo il padding. */
.btn-icon > i {
    display: inline-block !important;
    padding-right: 0 !important;
}

/* ============================================
   CODE BLOCKS SU SFONDO SCURO
   ============================================ */

/* Metronic dà al tag <code> uno sfondo chiaro (--bs-code-bg) con padding,
   margin e box-shadow propri. Dentro un contenitore .bg-dark questo crea
   un'evidenziatura bianca con testo chiaro illeggibile.
   Azzeriamo lo styling: il <code> eredita lo sfondo scuro del genitore. */
.bg-dark code {
    background-color: transparent;
    box-shadow: none;
    margin: 0;
    padding: 0;
    color: inherit;
}


/* ============================================
   SEZIONE REPORT
   ============================================ */

/* La sidebar rende menus.icon come lista di classi (<i class="{{ $item->icon }}">),
   quindi il colore di una voce di menu può arrivare solo da una classe CSS.
   Tutte le contestuali Bootstrap erano già usate al primo livello e il giallo
   (text-warning) è di Budget, Utility, Statistiche e Storico Delibere: serviva
   un colore proprio per distinguere Report a colpo d'occhio. */
.text-report {
    color: #7c3aed !important;
}

/* Card della dashboard report: il bordo colorato le lega alla voce di menu. */
.report-card {
    border-left: 4px solid #7c3aed;
    transition: box-shadow 0.15s ease-in-out, transform 0.15s ease-in-out;
}

.report-card:hover {
    box-shadow: 0 0.5rem 1.5rem rgba(124, 58, 237, 0.18);
    transform: translateY(-2px);
}

/* ============================================
   GIALLO LEGGIBILE (contrasto)
   ============================================ */

/* Regola del progetto: mai testo giallo su bianco né giallo su giallo. Il giallo del tema
   (warning) resta per fondi e barre; il testo diventa ambra scuro, il testo sui fondi
   gialli pieni diventa scuro. Solo nel contenuto della pagina (.app-main) e nei popup
   SweetAlert2: la sidebar scura usa text-warning per le icone di menu e lì il giallo si legge. */
.app-main,
.swal2-popup {
    --flow-warning-testo: #8a5a00;
    --flow-warning-su-giallo: #1e2129;
    --bs-warning-inverse: var(--flow-warning-su-giallo);
}

.app-main .text-warning,
.swal2-popup .text-warning {
    color: var(--flow-warning-testo) !important;
}

/* Avvisi gialli: Metronic dà al testo di .alert-warning il giallo pieno del tema (#ffc700) sul fondo
   giallo chiaro. Vale in tutte le pagine, compreso il login (layout auth, che carica questo file), e
   per gli avvisi creati da JavaScript: il testo e le icone gialle dentro l'avviso diventano ambra scuro. */
.alert.alert-warning {
    --flow-warning-testo: #8a5a00;
    --bs-alert-color: var(--flow-warning-testo);
    --bs-alert-link-color: var(--flow-warning-testo);
    color: var(--flow-warning-testo);
}

.alert.alert-warning .text-warning,
.alert.alert-warning .svg-icon-warning,
.alert.alert-warning .alert-link {
    color: var(--flow-warning-testo) !important;
}

/* Badge e bottoni giallo chiaro: testo ambra scuro, testo scuro quando diventano gialli pieni.
   Anche nell'intestazione (#kt_header): pulsante «Richieste storiche da accoppiare». */
#kt_header {
    --flow-warning-testo: #8a5a00;
    --flow-warning-su-giallo: #1e2129;
}

.app-main .badge-light-warning,
.app-main .btn.btn-light-warning,
#kt_header .btn.btn-light-warning,
#kt_header .btn.btn-light-warning i {
    color: var(--flow-warning-testo) !important;
}

.app-main .btn.btn-light-warning:hover,
.app-main .btn.btn-light-warning:focus,
.app-main .btn.btn-light-warning:active,
.app-main .btn.btn-light-warning.active,
.app-main .btn.btn-light-warning.show,
#kt_header .btn.btn-light-warning:hover,
#kt_header .btn.btn-light-warning:focus,
#kt_header .btn.btn-light-warning:active {
    color: var(--flow-warning-su-giallo) !important;
}

.app-main .btn.btn-light-warning:hover i,
.app-main .btn.btn-light-warning:focus i,
.app-main .btn.btn-light-warning:active i,
#kt_header .btn.btn-light-warning:hover i,
#kt_header .btn.btn-light-warning:focus i,
#kt_header .btn.btn-light-warning:active i {
    color: var(--flow-warning-su-giallo) !important;
}

/* Fondi gialli pieni con testo (bottoni, badge): testo scuro invece di bianco */
.app-main .btn.btn-warning,
.app-main .btn.btn-warning:hover,
.app-main .btn.btn-warning:focus,
.app-main .btn.btn-warning:active,
.app-main .btn.btn-warning i,
.app-main .badge.bg-warning,
.app-main .badge.text-bg-warning,
.swal2-popup .btn.btn-warning,
.swal2-popup .btn.btn-warning:hover {
    color: var(--flow-warning-su-giallo) !important;
}

/* ============================================
   BADGE CHIARI LEGGIBILI (contrasto)
   ============================================ */

/* Sui fondi chiari dei badge il colore pieno del tema non si legge (verde 1,9:1, azzurro 2,7:1,
   rosso 3,4:1, grigio 1,2:1, neutro 3,6:1): testo della stessa tinta, scurito oltre 5:1 (WCAG AA). */
.app-main {
    --flow-success-testo: #17794a;
    --flow-primary-testo: #0067a3;
    --flow-danger-testo: #b3123e;
    --flow-secondary-testo: #5e6278;
}

.app-main .badge-light-success {
    color: var(--flow-success-testo) !important;
}

.app-main .badge-light-primary {
    color: var(--flow-primary-testo) !important;
}

.app-main .badge-light-danger {
    color: var(--flow-danger-testo) !important;
}

.app-main .badge-light-secondary,
.app-main .badge.badge-light {
    color: var(--flow-secondary-testo) !important;
}