/* =========================================
   WEBBINK DESIGN SYSTEM - CORE v1.1
   ========================================= */

   :root {
    /* --- 1. PALETTE COLORI --- */
    /* Brand */
    --wb-black: #09090b;       /* Zinco-950 */
    --wb-white: #ffffff;
    
    /* Semantic */
    --wb-primary: var(--wb-black);
    --wb-primary-hover: #27272a;
    --wb-danger: #ef4444;      /* Rosso errore */
    --wb-success: #22c55e;     /* Verde successo */
    
    /* Sfondi */
    --wb-bg-main: #f9fafb;     /* Sfondo pagina */
    --wb-bg-card: #ffffff;     /* Sfondo card */
    --wb-bg-input: #f9fafb;    /* Sfondo input/grigi */
    
    /* Bordi */
    --wb-border: #e4e4e7;      /* Grigio neutro */
    --wb-border-focus: var(--wb-black);
    
    /* Testo */
    --wb-text-main: #18181b;
    --wb-text-muted: #71717a;
    
    /* --- 2. GEOMETRIA --- */
    --wb-radius-sm: 0.5rem;    /* 8px */
    --wb-radius-md: 0.75rem;   /* 12px */
    --wb-radius-lg: 1rem;      /* 16px */
    
    /* --- 3. EFFETTI --- */
    --wb-shadow-sm: 0 1px 2px 0 rgba(0, 0, 0, 0.05);
    --wb-shadow-hover: 0 10px 15px -3px rgba(0, 0, 0, 0.1);
    --wb-transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
}

/* =========================================
   1. LAYOUT SYSTEM (Standardizzazione Gabbie)
   ========================================= */

/* 1. Base Comune (padding identico per tutti) */
.wb-layout-common {
    width: 100%;
    margin-left: auto;
    margin-right: auto;
    
    /* Distanza standard dall'alto per TUTTE le pagine */
    padding-top: 2.5rem;    /* 40px */
    padding-bottom: 5rem;   /* Spazio in fondo */
    
    /* Margini laterali identici */
    padding-left: 1.5rem;   /* 24px su mobile */
    padding-right: 1.5rem;
}

@media (min-width: 1024px) {
    .wb-layout-common {
        padding-left: 3rem;  /* 48px su desktop */
        padding-right: 3rem;
    }
}

/* 2. Variante Standard (Lettura: Home, Academy, Brand Kit) */
/* Usiamo una larghezza fissa coerente (6xl) invece di cambiarla ogni volta */
.wb-layout-standard {
    max-width: 72rem; /* max-w-6xl (circa 1150px) */
}

/* 3. Variante Wide (Operativa: Smart Link, Widget) */
/* Più larga per farci stare gli editor, ma con gli stessi margini di partenza */
.wb-layout-wide {
    max-width: 80rem; /* max-w-7xl (circa 1280px) */
    padding-bottom: 2rem; /* Meno spazio sotto per gli editor */
}


/* =========================================
   2. TIPOGRAFIA
   ========================================= */

.wb-h1 {
    font-size: 1.875rem; /* 30px */
    font-weight: 800;
    letter-spacing: -0.025em;
    color: var(--wb-text-main);
    line-height: 1.2;
}

.wb-h2 {
    font-size: 1.5rem;   /* 24px */
    font-weight: 700;
    letter-spacing: -0.025em;
    color: var(--wb-text-main);
}

.wb-h3 {
    font-size: 1.125rem; /* 18px */
    font-weight: 600;
    color: var(--wb-text-main);
}

.wb-text-body {
    font-size: 0.875rem; /* 14px */
    color: var(--wb-text-muted);
    line-height: 1.5;
}

.wb-label-text {
    font-size: 0.75rem; /* 12px */
    font-weight: 700;
    text-transform: uppercase;
    color: var(--wb-text-muted);
    letter-spacing: 0.025em;
}

/* =========================================
   3. INTERAZIONE (Input & Bottoni)
   ========================================= */

/* Button Reset & Base */
.wb-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    padding: 0.625rem 1.25rem;
    font-size: 0.875rem;
    font-weight: 600;
    border-radius: var(--wb-radius-md);
    cursor: pointer;
    transition: var(--wb-transition);
    border: 1px solid transparent;
}

/* Varianti Bottoni */
.wb-btn-primary {
    background-color: var(--wb-primary);
    color: var(--wb-white);
    box-shadow: var(--wb-shadow-sm);
}
.wb-btn-primary:hover { background-color: var(--wb-primary-hover); transform: translateY(-1px); }

.wb-btn-secondary {
    background-color: var(--wb-white);
    color: var(--wb-text-main);
    border-color: var(--wb-border);
}
.wb-btn-secondary:hover { background-color: var(--wb-bg-main); border-color: #d4d4d8; }

.wb-btn-ghost {
    background-color: transparent;
    color: var(--wb-text-muted);
}
.wb-btn-ghost:hover { background-color: var(--wb-bg-main); color: var(--wb-text-main); }

/* Form Elements */
.wb-input-group { display: flex; flex-direction: column; gap: 0.375rem; margin-bottom: 1rem; }

.wb-input, .wb-textarea {
    width: 100%;
    padding: 0.75rem;
    background-color: var(--wb-bg-input);
    border: 1px solid var(--wb-border);
    border-radius: var(--wb-radius-md);
    font-size: 0.875rem;
    color: var(--wb-text-main);
    outline: none;
    transition: var(--wb-transition);
}

.wb-input:focus, .wb-textarea:focus {
    background-color: var(--wb-white);
    border-color: var(--wb-border-focus);
    box-shadow: 0 0 0 4px rgba(0,0,0,0.05); /* Ring effect */
}

/* =========================================
   4. CONTENITORI (Cards & Layout)
   ========================================= */

/* Card Generica */
.wb-card {
    background-color: var(--wb-bg-card);
    border: 1px solid var(--wb-border);
    border-radius: var(--wb-radius-lg);
    padding: 1.5rem;
    position: relative;
    overflow: hidden;
}

/* Card Interattiva */
.wb-card-interactive {
    cursor: pointer;
    transition: var(--wb-transition);
}
.wb-card-interactive:hover {
    border-color: var(--wb-primary);
    box-shadow: var(--wb-shadow-hover);
    transform: translateY(-2px);
}

/* Badge */
.wb-badge {
    display: inline-flex;
    padding: 0.25rem 0.625rem;
    background-color: var(--wb-bg-main);
    border: 1px solid var(--wb-border);
    border-radius: var(--wb-radius-sm);
    font-size: 0.75rem;
    font-weight: 600;
    color: var(--wb-text-main);
}

/* =========================================
   5. PAGE HEADER
   ========================================= */

.wb-page-header {
    display: flex;
    flex-direction: column;
    margin-bottom: 2rem;
    padding-bottom: 1rem;
    border-bottom: 1px solid var(--wb-border);
}

.wb-page-title {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    font-size: 1.5rem;
    font-weight: 800;
    letter-spacing: -0.025em;
    color: var(--wb-text-main);
    line-height: 1.2;
}

.wb-page-title i, 
.wb-page-title svg {
    width: 1.5rem; height: 1.5rem;
    color: var(--wb-primary);
}

.wb-page-subtitle {
    margin-top: 0.25rem;
    margin-left: 2.25rem;
    font-size: 0.875rem;
    color: var(--wb-text-muted);
}

/* =========================================
   6. COMPONENTI SPECIFICI: HOME (DASHBOARD)
   ========================================= */

.wb-grid-2 {
    display: grid;
    grid-template-columns: 1fr;
    gap: 1.5rem;
}
@media (min-width: 768px) { .wb-grid-2 { grid-template-columns: repeat(2, 1fr); } }

.wb-card-icon {
    width: 3rem; height: 3rem;
    background-color: var(--wb-bg-input);
    border-radius: var(--wb-radius-md);
    display: flex; align-items: center; justify-content: center;
    margin-bottom: 1rem;
    color: var(--wb-text-main);
    transition: var(--wb-transition);
}

.wb-card-interactive:hover .wb-card-icon {
    background-color: var(--wb-primary);
    color: var(--wb-white);
}

/* =========================================
   7. COMPONENTI SPECIFICI: ACADEMY
   ========================================= */

.wb-grid-3 {
    display: grid;
    grid-template-columns: 1fr;
    gap: 1.5rem;
}
@media (min-width: 768px) { .wb-grid-3 { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1024px) { .wb-grid-3 { grid-template-columns: repeat(3, 1fr); } }

.wb-line-clamp-2 {
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

/* Video Card */
.wb-video-card {
    background-color: var(--wb-bg-card);
    border: 1px solid var(--wb-border);
    border-radius: var(--wb-radius-lg);
    overflow: hidden;
    cursor: pointer;
    transition: var(--wb-transition);
    display: flex; flex-direction: column;
}

.wb-video-card:hover {
    border-color: var(--wb-primary);
    box-shadow: var(--wb-shadow-hover);
    transform: translateY(-2px);
}

.wb-video-thumb {
    position: relative;
    aspect-ratio: 16 / 9;
    background-color: var(--wb-bg-input);
    overflow: hidden;
}

.wb-video-thumb img {
    width: 100%; height: 100%; object-fit: cover;
    transition: transform 0.5s ease; /* Zoom lento specifico */
}
.wb-video-card:hover .wb-video-thumb img { transform: scale(1.05); }

.wb-play-overlay {
    position: absolute; inset: 0;
    display: flex; align-items: center; justify-content: center;
    background-color: rgba(0,0,0,0);
    transition: background-color 0.3s;
}
.wb-video-card:hover .wb-play-overlay { background-color: rgba(0,0,0,0.1); }

.wb-play-btn {
    width: 3rem; height: 3rem;
    background-color: var(--wb-white);
    border-radius: 50%;
    display: flex; align-items: center; justify-content: center;
    box-shadow: 0 4px 6px rgba(0,0,0,0.1);
    opacity: 0;
    transform: translateY(10px);
    transition: var(--wb-transition);
}
.wb-video-card:hover .wb-play-btn { opacity: 1; transform: translateY(0); }

.wb-video-content { padding: 1.25rem; }

/* =========================================
   8. COMPONENTI SPECIFICI: BRAND KIT
   ========================================= */

.wb-grid-4 {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 1.5rem;
}
@media (min-width: 768px) { .wb-grid-4 { grid-template-columns: repeat(4, 1fr); } }

.wb-section { margin-bottom: 4rem; }
.wb-section-header {
    display: flex; align-items: center; gap: 0.75rem;
    margin-bottom: 1.5rem;
    padding-bottom: 0.5rem;
    border-bottom: 1px solid var(--wb-border);
}

/* Color Card */
.wb-color-card {
    background-color: var(--wb-bg-card);
    border: 1px solid var(--wb-border);
    border-radius: var(--wb-radius-md);
    overflow: hidden;
    cursor: pointer;
    transition: var(--wb-transition);
    position: relative;
}
.wb-color-card:hover {
    border-color: var(--wb-primary);
    box-shadow: var(--wb-shadow-hover);
}

.wb-color-preview { width: 100%; height: 6rem; }
.wb-color-info { padding: 1rem; }
.wb-color-hex {
    font-family: monospace; font-size: 0.75rem;
    color: var(--wb-text-muted); text-transform: uppercase;
}
.wb-color-name {
    font-size: 0.875rem; font-weight: 700;
    color: var(--wb-text-main); margin-top: 0.25rem;
}

.wb-copy-icon {
    position: absolute; top: 0.5rem; right: 0.5rem;
    background-color: rgba(255,255,255,0.9); /* Overlay specifico, ok fisso */
    padding: 0.35rem; border-radius: var(--wb-radius-sm);
    opacity: 0; transition: var(--wb-transition);
}
.wb-color-card:hover .wb-copy-icon { opacity: 1; }

/* Font Row */
.wb-font-row {
    display: flex; flex-direction: column;
    padding: 1.5rem;
    background-color: var(--wb-bg-card);
    border: 1px solid var(--wb-border);
    border-radius: var(--wb-radius-md);
    margin-bottom: 1rem;
    transition: var(--wb-transition);
}
@media (min-width: 768px) {
    .wb-font-row { flex-direction: row; align-items: center; justify-content: space-between; }
}
.wb-font-row:hover { border-color: var(--wb-primary); }

.wb-font-preview { font-size: 1.5rem; font-weight: 700; color: var(--wb-text-main); margin-bottom: 0.25rem; }
.wb-font-name { font-family: monospace; font-size: 0.875rem; color: var(--wb-text-muted); }

/* Asset Card */
.wb-asset-card {
    background-color: var(--wb-bg-card);
    border: 1px solid var(--wb-border);
    border-radius: var(--wb-radius-md);
    padding: 1.5rem;
    display: flex; flex-direction: column; align-items: center; text-align: center;
    transition: var(--wb-transition);
}
.wb-asset-card:hover { border-color: var(--wb-primary); box-shadow: var(--wb-shadow-hover); }

.wb-asset-preview {
    height: 8rem; width: 100%;
    display: flex; align-items: center; justify-content: center;
    background-color: var(--wb-bg-input);
    border-radius: var(--wb-radius-sm);
    padding: 1rem; margin-bottom: 1rem;
}
.wb-asset-preview img { max-width: 100%; max-height: 100%; object-fit: contain; }
.wb-asset-title { font-size: 0.875rem; font-weight: 700; margin-bottom: 1rem; }

/* =========================================
   9. EDITOR & PREVIEW (Smart Link / Widget)
   ========================================= */

.wb-editor-layout {
    display: flex; flex-direction: column;
    height: calc(100vh - 140px);
    gap: 1.5rem;
    overflow: hidden;
}
@media (min-width: 1024px) { .wb-editor-layout { flex-direction: row; } }

.wb-editor-panel {
    width: 100%;
    background-color: var(--wb-bg-card);
    border: 1px solid var(--wb-border);
    border-radius: var(--wb-radius-lg);
    display: flex; flex-direction: column;
    overflow: hidden;
    box-shadow: var(--wb-shadow-sm);
}
@media (min-width: 1024px) { .wb-editor-panel { width: 35%; min-width: 320px; } }

.wb-preview-container {
    flex: 1;
    background-color: var(--wb-bg-main);
    border: 1px solid var(--wb-border);
    border-radius: var(--wb-radius-lg);
    display: flex; align-items: center; justify-content: center;
    padding: 2rem;
    overflow: hidden;
    position: relative;
}

/* Device Frame */
.wb-device-frame {
    width: 100%; max-width: 24rem; height: 100%;
    background-color: var(--wb-white);
    border: 1px solid var(--wb-border);
    border-radius: var(--wb-radius-md);
    box-shadow: var(--wb-shadow-hover);
    display: flex; flex-direction: column;
    overflow: hidden;
    transition: all 0.3s ease;
}

.wb-browser-bar {
    background-color: var(--wb-bg-input);
    border-bottom: 1px solid var(--wb-border);
    padding: 0.75rem;
    display: flex; align-items: center; gap: 0.75rem;
    flex-shrink: 0;
}
.wb-browser-dots { display: flex; gap: 0.35rem; }
.wb-dot { width: 0.75rem; height: 0.75rem; border-radius: 50%; }
.wb-dot.red { background-color: #fca5a5; }
.wb-dot.yellow { background-color: #fcd34d; }
.wb-dot.green { background-color: #86efac; }

.wb-browser-url {
    flex: 1; background-color: var(--wb-white);
    border: 1px solid var(--wb-border);
    border-radius: 0.25rem;
    height: 1.5rem;
    display: flex; align-items: center; padding: 0 0.5rem;
    font-family: monospace; font-size: 0.65rem; color: var(--wb-text-muted);
}

/* Tabs */
.wb-tab-group {
    display: flex; padding: 0.5rem; gap: 0.25rem;
    border-bottom: 1px solid var(--wb-border);
    background-color: var(--wb-bg-input);
}
.wb-tab-btn {
    flex: 1; padding: 0.6rem;
    font-size: 0.875rem; font-weight: 600;
    border-radius: var(--wb-radius-sm);
    border: none; cursor: pointer;
    display: flex; align-items: center; justify-content: center; gap: 0.5rem;
    color: var(--wb-text-muted); background: transparent;
    transition: var(--wb-transition);
}
.wb-tab-btn:hover { color: var(--wb-text-main); background-color: rgba(0,0,0,0.05); }
.wb-tab-btn.active { background-color: var(--wb-white); color: var(--wb-primary); box-shadow: var(--wb-shadow-sm); }

/* Controlli */
.wb-control-row {
    display: flex; align-items: center; justify-content: space-between;
    padding: 0.5rem 0.75rem;
    border: 1px solid var(--wb-border);
    border-radius: var(--wb-radius-sm);
    background-color: var(--wb-white);
    transition: border-color 0.2s;
}
.wb-control-row:hover { border-color: #d1d5db; }

.wb-link-item {
    display: flex; align-items: center; gap: 0.5rem;
    background-color: var(--wb-bg-input);
    padding: 0.5rem;
    border: 1px solid var(--wb-border);
    border-radius: var(--wb-radius-sm);
}

/* =========================================
   10. WIDGET TOGGLES & PREVIEW ELEMENTS
   ========================================= */

/* Toggle Switch */
.wb-toggle-wrapper {
    display: flex; align-items: center; gap: 0.75rem;
    padding: 0.5rem 0.75rem;
    background-color: var(--wb-bg-input);
    border: 1px solid var(--wb-border);
    border-radius: var(--wb-radius-md);
}

.wb-toggle-label {
    font-size: 0.75rem; font-weight: 700; 
    text-transform: uppercase; color: var(--wb-text-muted);
}

.wb-toggle-btn {
    position: relative;
    display: inline-flex; height: 1.5rem; width: 2.75rem;
    align-items: center; border-radius: 9999px;
    transition: background-color 0.2s;
    cursor: pointer; border: none;
}
.wb-toggle-btn[data-active="true"] { background-color: var(--wb-success); }
.wb-toggle-btn[data-active="false"] { background-color: #d1d5db; }

.wb-toggle-dot {
    display: inline-block; height: 1rem; width: 1rem;
    background-color: var(--wb-white); 
    border-radius: 50%;
    transform: translateX(0.25rem);
    transition: transform 0.2s;
    box-shadow: 0 1px 2px rgba(0,0,0,0.2);
}
.wb-toggle-btn[data-active="true"] .wb-toggle-dot { transform: translateX(1.5rem); }

/* Widget Preview Bar (Fixed) */
.wb-preview-bar {
    width: 100%; 
    padding: 0.75rem 1.5rem;
    display: flex; 
    flex-wrap: wrap; 
    align-items: center; 
    justify-content: center; 
    gap: 1rem;
    box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1);
    position: absolute; top: 0; left: 0; z-index: 10;
    transition: var(--wb-transition);
    text-align: center;
}

.preview-bar-text {
    max-width: 100%;
    white-space: normal;
    line-height: 1.2;
}

/* Widget Fake Button (High Contrast) */
.wb-preview-btn-fake {
    background-color: transparent; 
    border: 1px solid currentColor;
    color: currentColor;
    padding: 0.35rem 0.85rem;
    border-radius: 0.25rem;
    font-size: 0.75rem; font-weight: 800; text-transform: uppercase;
    cursor: pointer;
    opacity: 0.9;
    transition: var(--wb-transition);
}

.wb-preview-btn-fake:hover {
    background-color: rgba(255,255,255,0.1);
    transform: translateY(-1px);
}

/* --- LIST ITEM INTERATTIVO (Playlist, Menu) --- */
.wb-list-item {
    display: flex; gap: 0.75rem;
    padding: 0.75rem;
    border-radius: var(--wb-radius-md);
    border: 1px solid transparent; /* Riserva spazio per il bordo */
    cursor: pointer;
    transition: var(--wb-transition);
    margin-bottom: 0.5rem;
    
    /* Stato Default */
    background-color: var(--wb-bg-card);
    border-color: var(--wb-border);
    color: var(--wb-text-main);
}

.wb-list-item:hover {
    box-shadow: var(--wb-shadow-sm);
    transform: translateY(-1px);
    border-color: #d1d5db;
}

/* Stato Attivo (Selezionato) */
.wb-list-item[data-active="true"] {
    background-color: var(--wb-primary);
    color: var(--wb-white);
    border-color: var(--wb-primary);
    box-shadow: var(--wb-shadow-sm);
}

/* Stili interni quando attivo */
.wb-list-item[data-active="true"] p { opacity: 0.8; } /* Testo piccolo */