/* ============================================================================
   NUBES — Branding helpers (Blocco C — 03/05/2026)
   Classi riusabili per pillola brand e prefisso brand nei dropdown corso.
   Includere DOPO main.css.
   ============================================================================ */

/* Pillola brand inline (HTML libero: header, tabelle, righe) */
.brand-badge {
    display: inline-block;
    padding: 2px 8px;
    border-radius: 10px;
    font-size: 0.68rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.3px;
    vertical-align: middle;
    white-space: nowrap;
}
.brand-badge-nubes      { background: #dff5f3; color: #1f6f6a; border: 1px solid #8fd2cc; }
.brand-badge-esplorando { background: #fde0eb; color: #7a153f; border: 1px solid #d977a3; }

/* Prefisso brand per legenda sotto ai <select> (l'<option> non accetta HTML) */
.brand-pref {
    display: inline-block;
    padding: 1px 6px;
    border-radius: 6px;
    font-size: 0.7rem;
    font-weight: 700;
    letter-spacing: 0.2px;
}
.brand-pref-nubes      { background: #dff5f3; color: #1f6f6a; border: 1px solid #8fd2cc; }
.brand-pref-esplorando { background: #fde0eb; color: #7a153f; border: 1px solid #d977a3; }

/* Bottoni filtro brand (lista corsi e simili) */
.brand-filter-btn { font-weight: 600; }
.brand-filter-btn-nubes      { background: #dff5f3; color: #1f6f6a; border: 1.5px solid #8fd2cc; }
.brand-filter-btn-nubes.active,
.brand-filter-btn-nubes:hover { background: #1f6f6a; color: #fff; border-color: #1f6f6a; }
.brand-filter-btn-esplorando { background: #fde0eb; color: #7a153f; border: 1.5px solid #d977a3; }
.brand-filter-btn-esplorando.active,
.brand-filter-btn-esplorando:hover { background: #7a153f; color: #fff; border-color: #7a153f; }

/* ============================================================================
   Pattern radio brand/tipo custom (alternativo al btn-check di Bootstrap che
   non funziona con label.btn aventi style inline). Usato in courses/create.php
   e courses/edit.php.
   ============================================================================ */
.cc-pick { display: flex; gap: 10px; flex-wrap: wrap; }
.cc-pick label { flex: 1; cursor: pointer; margin: 0; min-width: 180px; }
.cc-pick input[type="radio"] { display: none; }
.cc-pick .cc-opt {
    display: block;
    padding: 13px 16px;
    border-radius: 10px;
    border: 2px solid transparent;
    font-weight: 700;
    text-align: center;
    transition: all 0.15s ease;
    user-select: none;
}
.cc-pick .cc-opt-nubes      { background: #dff5f3; color: #1f6f6a; border-color: #cfe9e6; }
.cc-pick .cc-opt-esplorando { background: #fde0eb; color: #7a153f; border-color: #f5cdda; }
.cc-pick input:checked + .cc-opt-nubes      { border-color: #1f6f6a; box-shadow: 0 0 0 3px rgba(31,111,106,0.18); }
.cc-pick input:checked + .cc-opt-esplorando { border-color: #7a153f; box-shadow: 0 0 0 3px rgba(122,21,63,0.18); }

.cc-pick .cc-opt-tipo { background: #f8f9fc; color: #555; border-color: #e0e0e0; }
.cc-pick input:checked + .cc-opt-tipo[data-key="fondo"]      { background: #e3f2fd; color: #0d47a1; border-color: #1976d2; }
.cc-pick input:checked + .cc-opt-tipo[data-key="regionale"]  { background: #e8f5e9; color: #1b5e20; border-color: #2e7d32; }
.cc-pick input:checked + .cc-opt-tipo[data-key="auto"]       { background: #f5f5f5; color: #424242; border-color: #757575; }


/* ============================================================================
   DUE LOGHI nella sidebar (Blocco D — 03/05/2026)
   Supporta la struttura HTML di header.php:
   <div class="sidebar-brand">
       <div class="sb-logo"><img src=".../nubes-bianco.png"></div>
       <div class="sb-divider"></div>
       <div class="sb-logo"><img src=".../esplorando-bianco.png"></div>
   </div>
   ============================================================================ */
.sidebar-brand {
    padding: 16px 14px !important;
    gap: 12px;
    justify-content: center;
    align-items: center;
    min-height: 76px;
}
.sb-logo {
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    min-width: 0;
}
.sb-logo img {
    max-height: 38px;
    max-width: 100%;
    width: auto;
    height: auto;
    object-fit: contain;
}
.sb-divider {
    width: 1px;
    height: 32px;
    background: rgba(255,255,255,0.32);
    flex-shrink: 0;
}


/* ============================================================================
   DESIGN SYSTEM 3-COLORI (Blocco D — 03/05/2026)
   Forza l'intero gestionale ai 3 colori brand:
       --c-blu   = blu Nubes       #40447b
       --c-aqua  = turchese Nubes  #49b7af
       --c-pink  = magenta Esplorando #c6226b
   Mappatura Bootstrap → brand:
       primary, info     → blu Nubes
       success           → turchese Nubes (era verde)
       warning, danger   → magenta Esplorando (erano giallo/rosso)
       secondary, light  → restano grigi neutri
   Sovrascrive utility .btn-*, .text-*, .bg-*, .border-* + icone FA con
   style="color:..." inline.
   ============================================================================ */

:root {
    --c-blu:    #40447b;
    --c-blu-d:  #2e3160;
    --c-aqua:   #49b7af;
    --c-aqua-d: #36948c;
    --c-pink:   #c6226b;
    --c-pink-d: #a51a59;
}

/* ── ICONE Font Awesome con color inline → forzate al blu Nubes ──────────── */
i[class*="fa-"][style*="color"],
i[class*="fa-"][style*="COLOR"] {
    color: var(--c-blu) !important;
}

/* ══ BOTTONI Bootstrap solid ══════════════════════════════════════════════ */

/* Primary / Info → blu Nubes */
.btn-primary, .btn-info {
    background-color: var(--c-blu) !important;
    border-color: var(--c-blu) !important;
    color: #fff !important;
}
.btn-primary:hover,  .btn-info:hover,
.btn-primary:focus,  .btn-info:focus,
.btn-primary:active, .btn-info:active,
.btn-primary.active, .btn-info.active {
    background-color: var(--c-blu-d) !important;
    border-color: var(--c-blu-d) !important;
    color: #fff !important;
}

/* Success → turchese Nubes */
.btn-success {
    background-color: var(--c-aqua) !important;
    border-color: var(--c-aqua) !important;
    color: #fff !important;
}
.btn-success:hover,
.btn-success:focus,
.btn-success:active,
.btn-success.active {
    background-color: var(--c-aqua-d) !important;
    border-color: var(--c-aqua-d) !important;
    color: #fff !important;
}

/* Warning / Danger → magenta Esplorando */
.btn-warning, .btn-danger {
    background-color: var(--c-pink) !important;
    border-color: var(--c-pink) !important;
    color: #fff !important;
}
.btn-warning:hover,  .btn-danger:hover,
.btn-warning:focus,  .btn-danger:focus,
.btn-warning:active, .btn-danger:active,
.btn-warning.active, .btn-danger.active {
    background-color: var(--c-pink-d) !important;
    border-color: var(--c-pink-d) !important;
    color: #fff !important;
}

/* ══ BOTTONI Bootstrap outline ════════════════════════════════════════════ */
.btn-outline-primary, .btn-outline-info {
    color: var(--c-blu) !important;
    border-color: var(--c-blu) !important;
    background-color: transparent !important;
}
.btn-outline-primary:hover,  .btn-outline-info:hover,
.btn-outline-primary:active, .btn-outline-info:active,
.btn-outline-primary.active, .btn-outline-info.active {
    background-color: var(--c-blu) !important;
    color: #fff !important;
}
.btn-outline-success {
    color: var(--c-aqua) !important;
    border-color: var(--c-aqua) !important;
    background-color: transparent !important;
}
.btn-outline-success:hover,
.btn-outline-success:active,
.btn-outline-success.active {
    background-color: var(--c-aqua) !important;
    color: #fff !important;
}
.btn-outline-warning, .btn-outline-danger {
    color: var(--c-pink) !important;
    border-color: var(--c-pink) !important;
    background-color: transparent !important;
}
.btn-outline-warning:hover,  .btn-outline-danger:hover,
.btn-outline-warning:active, .btn-outline-danger:active,
.btn-outline-warning.active, .btn-outline-danger.active {
    background-color: var(--c-pink) !important;
    color: #fff !important;
}

/* ══ TEXT utility Bootstrap ═══════════════════════════════════════════════ */
.text-primary, .text-info { color: var(--c-blu) !important; }
.text-success             { color: var(--c-aqua) !important; }
.text-warning, .text-danger { color: var(--c-pink) !important; }

/* ══ BACKGROUND utility Bootstrap ═════════════════════════════════════════ */
.bg-primary, .bg-info     { background-color: var(--c-blu) !important; color: #fff !important; }
.bg-success               { background-color: var(--c-aqua) !important; color: #fff !important; }
.bg-warning, .bg-danger   { background-color: var(--c-pink) !important; color: #fff !important; }

/* ══ BORDER utility Bootstrap ═════════════════════════════════════════════ */
.border-primary, .border-info { border-color: var(--c-blu) !important; }
.border-success               { border-color: var(--c-aqua) !important; }
.border-warning, .border-danger { border-color: var(--c-pink) !important; }

/* ══ BADGE Bootstrap (.badge.bg-success, ecc.) ════════════════════════════ */
.badge.bg-primary, .badge.bg-info     { background-color: var(--c-blu) !important; color: #fff !important; }
.badge.bg-success                     { background-color: var(--c-aqua) !important; color: #fff !important; }
.badge.bg-warning, .badge.bg-danger   { background-color: var(--c-pink) !important; color: #fff !important; }

/* ══ ALERT Bootstrap (.alert-success, ecc.) — varianti soft ═══════════════ */
.alert-primary, .alert-info {
    background-color: #e8e9f3 !important;
    border-color: #c8cbe0 !important;
    color: var(--c-blu-d) !important;
}
.alert-success {
    background-color: #dff5f3 !important;
    border-color: #8fd2cc !important;
    color: #1f6f6a !important;
}
.alert-warning, .alert-danger {
    background-color: #fde0eb !important;
    border-color: #d977a3 !important;
    color: #7a153f !important;
}


/* ============================================================================
   TITOLI — magenta su fondo bianco, ereditano (= bianchi) su fondo colorato
   Blocco D — 03/05/2026
   ============================================================================ */

/* Default: tutti i titoli e .card-title in magenta */
h1, h2, h3, h4, h5, h6,
.card-title {
    color: var(--c-pink);
}

/* Eccezione: dentro contenitori a fondo pieno colorato, i titoli ereditano
   il color del parent (tipicamente #fff). Uso :is() per concisione. */
.bg-primary :is(h1,h2,h3,h4,h5,h6,.card-title),
.bg-info    :is(h1,h2,h3,h4,h5,h6,.card-title),
.bg-success :is(h1,h2,h3,h4,h5,h6,.card-title),
.bg-warning :is(h1,h2,h3,h4,h5,h6,.card-title),
.bg-danger  :is(h1,h2,h3,h4,h5,h6,.card-title),
.card-header :is(h1,h2,h3,h4,h5,h6,.card-title) {
    color: inherit !important;
}