/**
 * ============================================================================
 * ADMIN PANEL - Design System "Professional Calm"
 * ============================================================================
 *
 * Foglio di stile principale per il pannello admin BHBeaches.
 * Palette derivata dal brand BluHotels (Pantone 539C navy + 325C teal).
 * Usato 8h/giorno da operatori su tablet/monitor → riposante, pastello, brand.
 *
 * ARCHITETTURA:
 *   - CSS Variables in :root → unica fonte di verità per i colori
 *   - Override delle classi Tailwind via specificity CSS (nessuna modifica HTML)
 *   - Ogni sezione è indipendente e commentata
 *
 * STRUTTURA:
 *   0. Design Tokens (CSS Variables)
 *   1. Base
 *   2. Sidebar
 *   3. Header
 *   4. Cards & Stat Cards
 *   5. Tabelle Unificate
 *   6. Pulsanti
 *   7. Form
 *   8. Modal
 *   9. Badge
 *  10. Animazioni
 *  11. Scrollbar
 *  12. Layout Full Height
 *  13. Responsive
 *  14. Stampa
 *
 * AGENT_NOTES: Non aggiungere mai colori hardcoded. Usa sempre var(--xxx).
 *              Le classi Tailwind inline negli HTML vengono sovrascritte qui.
 */

/* ============================================================================
   0. DESIGN TOKENS — Unica fonte di verità per i colori
   ============================================================================ */

:root {
    /* ── Brand BluHotels ── */
    --bh-navy:          #002B49;
    --bh-navy-light:    #0A3D62;
    --bh-navy-border:   #0E4D6B;
    --bh-teal:          #64CCC9;
    --bh-teal-soft:     #E0F7F6;
    --bh-teal-ring:     rgba(100, 204, 201, 0.25);

    /* ── Neutrali (slate-based, leggermente blu) ── */
    --admin-bg:         #F0F4F8;
    --admin-card:       #FFFFFF;
    --admin-border:     #E2E8F0;
    --admin-border-light: #F1F5F9;
    --admin-text:       #1E293B;
    --admin-text-secondary: #64748B;
    --admin-text-muted: #94A3B8;
    --admin-hover-row:  #F8FAFC;

    /* ── Azioni ── */
    --btn-primary:      #0E7490;
    --btn-primary-hover:#0891B2;
    --btn-primary-ring: rgba(14, 116, 144, 0.25);
    --btn-danger:       #DC2626;
    --btn-danger-hover: #B91C1C;
    --btn-success:      #059669;
    --btn-success-hover:#047857;
    --btn-warning:      #D97706;

    /* ── Status / Badge (pastello) ── */
    --status-pending-bg:    #FEF3C7;
    --status-pending-text:  #B45309;
    --status-pending-border:#FDE68A;
    --status-confirmed-bg:  #D1FAE5;
    --status-confirmed-text:#047857;
    --status-confirmed-border:#A7F3D0;
    --status-cancelled-bg:  #FEE2E2;
    --status-cancelled-text:#B91C1C;
    --status-cancelled-border:#FECACA;
    --status-expired-bg:    #E2E8F0;
    --status-expired-text:  #475569;
    --status-expired-border:#CBD5E1;

    /* ── Ombre ── */
    --shadow-sm:  0 1px 2px 0 rgba(0, 43, 73, 0.05);
    --shadow-md:  0 4px 6px -1px rgba(0, 43, 73, 0.07), 0 2px 4px -2px rgba(0, 43, 73, 0.05);
    --shadow-lg:  0 10px 15px -3px rgba(0, 43, 73, 0.08), 0 4px 6px -4px rgba(0, 43, 73, 0.04);
    --shadow-card:0 1px 3px 0 rgba(0, 43, 73, 0.06), 0 1px 2px -1px rgba(0, 43, 73, 0.04);

    /* ── Transizioni ── */
    --transition-fast: 0.15s ease;
    --transition-normal: 0.2s ease;

    /* ── Bordi ── */
    --radius-sm: 0.375rem;
    --radius-md: 0.5rem;
    --radius-lg: 0.75rem;
    --radius-xl: 1rem;
}

/* ============================================================================
   1. BASE
   ============================================================================ */

* {
    box-sizing: border-box;
}

/* AGENT: Override di bg-gray-100 sugli HTML senza toccare i file */
body {
    font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
    background: var(--admin-bg) !important;
    color: var(--admin-text);
}

/* Nasconde elementi role-based per default (previene flash) */
[data-role]:not(.role-visible) {
    display: none !important;
}

/* ============================================================================
   2. SIDEBAR — Brand navy con teal accent
   ============================================================================ */

/* AGENT: Override di bg-blue-900 senza modificare l'HTML */
#sidebar {
    z-index: 100 !important;
    background: var(--bh-navy) !important;
}

/* Titolo sidebar */
#sidebar > div:first-child {
    border-color: var(--bh-navy-border) !important;
}

/* Link sidebar — override di hover:bg-blue-800 */
.sidebar-link {
    color: rgba(255, 255, 255, 0.85);
    transition: all var(--transition-fast);
    border-left: 3px solid transparent;
}

.sidebar-link:hover {
    background: var(--bh-navy-light) !important;
    color: #fff;
    border-left-color: var(--bh-teal);
}

/* Voce attiva — override di bg-blue-800 */
.sidebar-link.active,
a.sidebar-link[class*="bg-blue-800"] {
    background: var(--bh-navy-light) !important;
    color: #fff;
    border-left-color: var(--bh-teal);
    font-weight: 600;
}

/* Border tra nav e logout */
#sidebar .border-blue-800,
#sidebar [class*="border-blue-800"] {
    border-color: var(--bh-navy-border) !important;
}

/* Logout button — mantiene rosso per chiarezza */
#sidebar button[onclick*="logout"] {
    background: rgba(220, 38, 38, 0.15) !important;
    border: 1px solid rgba(220, 38, 38, 0.3);
    color: #fca5a5;
    transition: all var(--transition-fast);
}

#sidebar button[onclick*="logout"]:hover {
    background: rgba(220, 38, 38, 0.25) !important;
    color: #fff;
}

/* ── Main content ── */
main {
    position: relative;
    z-index: 1;
    isolation: isolate;
    overflow-x: clip;
    margin-left: 16rem;
}

@media (max-width: 767px) {
    main { margin-left: 0; }
}

/* ============================================================================
   3. HEADER — Linea teal sottile in basso
   ============================================================================ */

main > header,
header.bg-white {
    background: var(--admin-card) !important;
    border-bottom: 2px solid var(--bh-teal);
    box-shadow: var(--shadow-sm);
}

/* Titolo pagina nell'header */
main > header h2 {
    color: var(--bh-navy);
}

/* Icone header — teal invece di blue-600 */
main > header h2 i,
main > header .text-blue-600,
header .text-blue-600 {
    color: var(--btn-primary) !important;
}

/* ============================================================================
   4. CARDS & STAT CARDS
   ============================================================================ */

/* Card generiche */
.bg-white {
    box-shadow: var(--shadow-card);
}

/* Stat card con bordo sinistro colorato */
.stat-card {
    transition: transform var(--transition-normal), box-shadow var(--transition-normal);
    border-left: 4px solid var(--admin-border);
    border-radius: var(--radius-lg);
}

.stat-card:hover {
    transform: translateY(-2px);
    box-shadow: var(--shadow-md);
}

/* Colora il bordo sinistro in base al contenuto (via JS class) */
.stat-card--pending  { border-left-color: var(--status-pending-text); }
.stat-card--confirmed { border-left-color: var(--status-confirmed-text); }
.stat-card--total    { border-left-color: var(--bh-navy); }
.stat-card--today    { border-left-color: var(--btn-primary); }

/* ============================================================================
   5. TABELLE UNIFICATE
   ============================================================================ */

.table-container {
    background: var(--admin-card);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-card);
    overflow: hidden;
    display: flex;
    flex-direction: column;
    flex: 1;
    min-height: 0;
    border: 1px solid var(--admin-border);
}

.table-header {
    padding: 0.75rem 1rem;
    border-bottom: 1px solid var(--admin-border);
    background: var(--admin-bg);
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-shrink: 0;
}

.table-header-info {
    font-size: 0.875rem;
    color: var(--admin-text-secondary);
}

.table-header-actions {
    display: flex;
    gap: 0.25rem;
}

.table-header-actions button {
    padding: 0.25rem 0.75rem;
    border: 1px solid var(--admin-border);
    border-radius: var(--radius-sm);
    background: var(--admin-card);
    font-size: 0.875rem;
    cursor: pointer;
    transition: all var(--transition-fast);
    color: var(--admin-text-secondary);
}

.table-header-actions button:hover:not(:disabled) {
    background: var(--admin-bg);
    border-color: var(--btn-primary);
    color: var(--btn-primary);
}

.table-header-actions button:disabled {
    opacity: 0.4;
    cursor: not-allowed;
}

.table-scroll {
    overflow-x: auto;
    overflow-y: auto;
    flex: 1;
    min-height: 0;
}

.table-standard {
    width: 100%;
    border-collapse: collapse;
}

.table-standard thead {
    background: var(--admin-bg);
    position: sticky;
    top: 0;
    z-index: 5;
}

.table-standard th {
    padding: 0.75rem 1rem;
    text-align: left;
    font-size: 0.8rem;
    font-weight: 600;
    color: var(--admin-text-secondary);
    text-transform: uppercase;
    letter-spacing: 0.03em;
    border-bottom: 1px solid var(--admin-border);
    white-space: nowrap;
}

.table-standard td {
    padding: 0.75rem 1rem;
    font-size: 0.875rem;
    color: var(--admin-text);
    border-bottom: 1px solid var(--admin-border-light);
}

.table-standard tbody tr {
    transition: background var(--transition-fast);
}

.table-standard tbody tr:hover {
    background: var(--admin-hover-row);
}

.table-standard tbody tr.clickable {
    cursor: pointer;
}

.table-empty {
    text-align: center;
    padding: 3rem 1rem;
}

.table-empty i {
    font-size: 2.5rem;
    color: var(--admin-border);
    margin-bottom: 1rem;
}

.table-empty p {
    color: var(--admin-text-muted);
}

/* ============================================================================
   6. PULSANTI
   ============================================================================ */

.btn-primary {
    background: var(--btn-primary);
    color: white;
    padding: 0.75rem 1.5rem;
    border-radius: var(--radius-md);
    font-weight: 500;
    transition: all var(--transition-normal);
    border: none;
    cursor: pointer;
}

.btn-primary:hover {
    background: var(--btn-primary-hover);
    transform: translateY(-1px);
    box-shadow: 0 4px 12px var(--btn-primary-ring);
}

/* Override dei bottoni Tailwind bg-blue-600 usati inline */
button.bg-blue-600,
a.bg-blue-600,
button[class*="bg-blue-600"] {
    background: var(--btn-primary) !important;
}

button.bg-blue-600:hover,
a.bg-blue-600:hover,
button[class*="bg-blue-600"]:hover,
button[class*="hover:bg-blue-700"]:hover {
    background: var(--btn-primary-hover) !important;
}

/* Bottoni verdi (conferma/salva) */
button.bg-green-600,
button[class*="bg-green-600"] {
    background: var(--btn-success) !important;
}

button.bg-green-600:hover,
button[class*="bg-green-600"]:hover,
button[class*="hover:bg-green-700"]:hover {
    background: var(--btn-success-hover) !important;
}

/* Bottoni blu-500 (azioni secondarie) */
button.bg-blue-500,
button[class*="bg-blue-500"] {
    background: var(--btn-primary) !important;
}

button.bg-blue-500:hover,
button[class*="bg-blue-500"]:hover {
    background: var(--btn-primary-hover) !important;
}

/* ============================================================================
   7. FORM
   ============================================================================ */

input:focus, select:focus, textarea:focus {
    outline: none;
    border-color: var(--btn-primary) !important;
    box-shadow: 0 0 0 3px var(--btn-primary-ring) !important;
}

/* Icone text-blue-600 nei form/labels */
.text-blue-600,
i.text-blue-600 {
    color: var(--btn-primary) !important;
}

/* ============================================================================
   8. MODAL
   ============================================================================ */

.modal-enter {
    animation: modalEnter 0.2s ease-out;
}

@keyframes modalEnter {
    from { opacity: 0; transform: scale(0.95); }
    to { opacity: 1; transform: scale(1); }
}

/* ============================================================================
   9. BADGE — Unica fonte di verità (override di qualsiasi Tailwind inline)
   ============================================================================ */

.badge-pending {
    background: var(--status-pending-bg);
    color: var(--status-pending-text);
    border: 1px solid var(--status-pending-border);
    border-radius: 999px;
    padding: 2px 10px;
    font-size: 0.75rem;
    font-weight: 500;
}

.badge-confirmed {
    background: var(--status-confirmed-bg);
    color: var(--status-confirmed-text);
    border: 1px solid var(--status-confirmed-border);
    border-radius: 999px;
    padding: 2px 10px;
    font-size: 0.75rem;
    font-weight: 500;
}

.badge-cancelled {
    background: var(--status-cancelled-bg);
    color: var(--status-cancelled-text);
    border: 1px solid var(--status-cancelled-border);
    border-radius: 999px;
    padding: 2px 10px;
    font-size: 0.75rem;
    font-weight: 500;
}

.badge-expired,
.badge-completed {
    background: var(--status-expired-bg);
    color: var(--status-expired-text);
    border: 1px solid var(--status-expired-border);
    border-radius: 999px;
    padding: 2px 10px;
    font-size: 0.75rem;
    font-weight: 500;
}

/* ============================================================================
   10. ANIMAZIONI
   ============================================================================ */

@keyframes spin {
    to { transform: rotate(360deg); }
}

.fa-spin {
    animation: spin 1s linear infinite;
}

/* Loading spinner — usa colore brand */
.fa-spin.text-blue-600 {
    color: var(--btn-primary) !important;
}

/* ============================================================================
   11. SCROLLBAR
   ============================================================================ */

::-webkit-scrollbar {
    width: 6px;
    height: 6px;
}

::-webkit-scrollbar-track {
    background: transparent;
    border-radius: 3px;
}

::-webkit-scrollbar-thumb {
    background: var(--admin-text-muted);
    border-radius: 3px;
}

::-webkit-scrollbar-thumb:hover {
    background: var(--admin-text-secondary);
}

/* ============================================================================
   12. LAYOUT FULL HEIGHT
   ============================================================================ */

.main-fullheight {
    height: 100vh;
    display: flex;
    flex-direction: column;
}

.content-fullheight {
    flex: 1;
    display: flex;
    flex-direction: column;
    overflow: hidden;
    padding: 1rem 1.5rem;
}

.stats-row {
    flex-shrink: 0;
    margin-bottom: 1rem;
}

.filters-row {
    flex-shrink: 0;
    margin-bottom: 1rem;
}

.dynamic-content {
    flex: 1;
    display: flex;
    flex-direction: column;
    min-height: 0;
}

/* ============================================================================
   13. RESPONSIVE
   ============================================================================ */

@media (max-width: 768px) {
    .sidebar-open {
        transform: translateX(0) !important;
    }
    .hide-mobile {
        display: none !important;
    }
}

/* ============================================================================
   14. STAMPA
   ============================================================================ */

@media print {
    aside, header, .no-print {
        display: none !important;
    }
    main {
        margin-left: 0 !important;
    }
    body {
        background: white !important;
    }
}

/* ============================================================================
   15. UTILITÀ — Classi helper coerenti
   ============================================================================ */

/* Card arrotondate coerenti */
.rounded-xl {
    border-radius: var(--radius-xl) !important;
}

/* Ombra coerente su tutte le card */
.shadow-sm {
    box-shadow: var(--shadow-card) !important;
}

.shadow-lg {
    box-shadow: var(--shadow-lg) !important;
}

/* Testo brand */
.text-brand-navy { color: var(--bh-navy); }
.text-brand-teal { color: var(--bh-teal); }