/*
 * test-css-skin.css - GuitarScientist.com
 * ==========================================
 * Obiettivo: togliere il look "Bootstrap stock", dare identita' editoriale
 * coerente col posizionamento scientific del brand.
 *
 * PALETTE (estesa, ruoli semantici distinti)
 *   Primary (teal):   #208995  -> link, CTA primario, focus, info
 *   Success (verde):  #4a7c59  -> conferme, upgrade, CTA secondario "positive"
 *   Danger (rosso):   #c73329  -> errori, azioni distruttive, feed title
 *   Warning (oro):    #c19a2e  -> premium, avvisi
 *   Ink (nero):       #2a2a2a  -> testo
 *   Paper (neutro):   #e9eff2  -> sfondi neutri
 *   Note (giallo):    #fffbf0  -> evidenza/featured
 *
 * STILE
 *   - Flat, border-radius 0, zero ombre (editorial look).
 *   - Border 1px uniforme dove serve distinguere edges.
 *   - Hover = bg + color sempre in coppia (mai solo color, per evitare
 *     testo-su-testo dello stesso colore).
 *   - Label uppercase come cifra "scientific paper".
 */

:root {
    /* Primary - teal brand */
    --gs-blu:            #208995;
    --gs-blu-scuro:      #135358;
    --gs-blu-chiaro:     rgba(32, 137, 149, 0.12);

    /* Success - verde smeraldo (distinto dal teal) */
    --gs-verde:          #0ca36e;
    --gs-verde-scuro:    #087d55;
    --gs-verde-chiaro:   #dfffef;

    /* Danger - rosso */
    --gs-rosso:          #c73329;
    --gs-rosso-scuro:    #a02b22;
    --gs-rosso-chiaro:   rgba(199, 51, 41, 0.10);

    /* Warning - ambra caldo */
    --gs-oro:            #e8b72a;
    --gs-oro-scuro:      #b8901b;
    --gs-oro-chiaro:     rgba(232, 183, 42, 0.18);

    /* Ink - scala testi */
    --gs-nero:             #2a2a2a;
    --gs-nero-scuro:       #1a1a1a;
    --gs-nero-chiaro:      rgba(42, 42, 42, 0.6);
    --gs-nero-chiarissimo: rgba(42, 42, 42, 0.3);

    /* Paper - sfondi */
    --gs-giallo:           #fffbf0;
    --gs-neutro:           #e9eff2;
    --gs-neutro-scuro:     #d5dce0;

    /* UI tokens */
    --gs-border:           var(--gs-neutro-scuro);
    --gs-radius:           0px;
}

/* ============================================================
   1. PULIZIA - via fronzoli Bootstrap
   ============================================================
   La skin NON tocca border-radius ne' box-shadow: i componenti
   Bootstrap mantengono i default, gli stili custom della pagina
   mantengono i propri. Solo colori e stato vengono armonizzati. */

/* ============================================================
   2. LINK
   ============================================================
   Niente !important sulla regola 'a' generica: gli inline style
   degli <a> (es. color:#888 nei link di moderazione, color:white
   su bottoni admin, color dinamico impostato via JS su icone
   commenti) vincono naturalmente. La skin colora solo i link che
   NON hanno gia' un color esplicito. */
a {
    color: var(--gs-blu);
}

a:hover {
    color: var(--gs-blu-scuro);
    text-decoration: none;
}

/* Mention @user nei commenti: teal brand + bold. Applicata sia ai link
   (utente riconosciuto) sia agli <span> fallback (utente non in registry). */
.comment-mention {
    color: var(--gs-blu);
    font-weight: 600;
}
a.comment-mention {
    text-decoration: none;
}
a.comment-mention:hover {
    color: var(--gs-blu-scuro);
    text-decoration: underline;
}

/* Navbar: testo chiaro su sfondo scuro */
.navbar > .container .nav-link,
.navbar > .container .navbar-brand,
.navbar > .container-fluid .nav-link,
.navbar > .container-fluid .navbar-brand,
.navbar .navbar-nav > .nav-item > .nav-link {
    color: rgba(255, 255, 255, 0.7) !important;
}

.navbar .navbar-nav > .nav-item > .nav-link:hover,
.navbar .navbar-nav > .nav-item > .nav-link:focus,
.navbar .navbar-nav > .nav-item.show > .nav-link,
.navbar .navbar-nav > .nav-item > .nav-link.active {
    color: #fff !important;
}

/* Dropdown menu */
.dropdown-menu {
    background-color: #fff !important;
    border: 1px solid var(--gs-border) !important;
}

.dropdown-item {
    color: var(--gs-nero) !important;
    background-color: transparent !important;
}

.dropdown-item:hover,
.dropdown-item:focus {
    background-color: var(--gs-blu) !important;
    color: #fff !important;
}

/* Icone dentro dropdown-item: ereditano il bianco al hover
   (batte gli style="color:#888" inline nel nav) */
.dropdown-item:hover i,
.dropdown-item:focus i,
.dropdown-item:hover .bi,
.dropdown-item:focus .bi {
    color: #fff !important;
}

/* Link bare nei dropdown (es. notifiche): hover sobrio, niente highlight pieno */
.dropdown-menu a:not(.dropdown-item) {
    color: var(--gs-blu) !important;
}
.dropdown-menu a:not(.dropdown-item):hover,
.dropdown-menu a:not(.dropdown-item):focus {
    color: var(--gs-blu-scuro) !important;
    background-color: transparent !important;
    text-decoration: underline !important;
}

/* ============================================================
   2b. SEMANTIC COLORS - override Bootstrap
   ============================================================
   Regola: ogni ruolo semantico ha il suo colore.
   primary/info -> teal  |  success -> verde  |  danger -> rosso  |  warning -> oro
*/

/* primary / info -> teal */
.text-primary, .text-info                 { color: var(--gs-blu) !important; }
.bg-primary,   .bg-info                   { background-color: var(--gs-blu) !important; }
.border-primary                            { border-color: var(--gs-blu) !important; }

/* success -> verde */
.text-success                              { color: var(--gs-verde) !important; }
.bg-success                                { background-color: var(--gs-verde) !important; }
.border-success                            { border-color: var(--gs-verde) !important; }

/* danger -> rosso */
.text-danger                               { color: var(--gs-rosso) !important; }
.bg-danger                                 { background-color: var(--gs-rosso) !important; }
.border-danger                             { border-color: var(--gs-rosso) !important; }

/* warning -> oro */
.text-warning                              { color: var(--gs-oro) !important; }
.bg-warning                                { background-color: var(--gs-oro) !important; }
.border-warning                            { border-color: var(--gs-oro) !important; }

/* Notifiche: link nel pannello usano primary */
.notif-dropdown-panel a           { color: var(--gs-blu) !important; }
.notif-dropdown-panel a:hover     { color: var(--gs-blu-scuro) !important; }

/* ============================================================
   2c. COLORI HARDCODED -> palette GS
   ============================================================ */
[style*="color: #6c9"],  [style*="color:#6c9"],
[style*="color: #66cc99"], [style*="color:#66cc99"] {
    color: var(--gs-verde) !important;
}

/* Bootstrap green #28a745 inline -> verde GS (copertura retrocompat) */
[style*="color: #28a745"], [style*="color:#28a745"] {
    color: var(--gs-verde) !important;
}

/* Feed: titoli diagrammi in rosso (azione/attention) */
#feed-column .feed-post-title a,
.feed-post .feed-post-title a {
    color: var(--gs-rosso) !important;
}

#feed-column .feed-post-title a:hover,
.feed-post .feed-post-title a:hover {
    color: var(--gs-rosso-scuro) !important;
}

.feed-post-author a           { color: var(--gs-blu-scuro) !important; }
.feed-post-author a:hover     { color: var(--gs-blu) !important; }

.col-sm-9 h1                  { color: var(--gs-blu-scuro) !important; }

/* ============================================================
   3. BUTTONS - filled
   ============================================================ */
.btn-primary {
    background-color: var(--gs-blu) !important;
    border-color:     var(--gs-blu) !important;
    color: #fff !important;
}
.btn-primary:hover,
.btn-primary:focus,
.btn-primary:active {
    background-color: var(--gs-blu-scuro) !important;
    border-color:     var(--gs-blu-scuro) !important;
    color: #fff !important;
}

.btn-success {
    background-color: var(--gs-verde) !important;
    border-color:     var(--gs-verde) !important;
    color: #fff !important;
}
.btn-success:hover,
.btn-success:focus,
.btn-success:active {
    background-color: var(--gs-verde-scuro) !important;
    border-color:     var(--gs-verde-scuro) !important;
    color: #fff !important;
}

.btn-danger {
    background-color: var(--gs-rosso) !important;
    border-color:     var(--gs-rosso) !important;
    color: #fff !important;
}
.btn-danger:hover,
.btn-danger:focus,
.btn-danger:active {
    background-color: var(--gs-rosso-scuro) !important;
    border-color:     var(--gs-rosso-scuro) !important;
    color: #fff !important;
}

.btn-warning {
    background-color: var(--gs-oro) !important;
    border-color:     var(--gs-oro) !important;
    color: var(--gs-nero) !important;
}
.btn-warning:hover,
.btn-warning:focus,
.btn-warning:active {
    background-color: var(--gs-oro-scuro) !important;
    border-color:     var(--gs-oro-scuro) !important;
    color: #fff !important;
}

.btn-info {
    background-color: var(--gs-blu) !important;
    border-color:     var(--gs-blu) !important;
    color: #fff !important;
}
/*
.btn-secondary {
    background-color: var(--gs-neutro) !important;
    border-color:     var(--gs-border) !important;
    color: var(--gs-nero) !important;
}
.btn-secondary:hover {
    background-color: var(--gs-neutro-scuro) !important;
    color: var(--gs-nero) !important;
} */

.btn-link {
    color: var(--gs-blu) !important;
}
.btn-link:hover {
    color: var(--gs-blu-scuro) !important;
}

/* GS custom accent */
.btn-gsaccent {
    background-color: var(--gs-blu) !important;
    border-color:     var(--gs-blu) !important;
    color: #fff !important;
}
.btn-gsaccent:hover {
    background-color: var(--gs-blu-scuro) !important;
    color: #fff !important;
}

/* ============================================================
   3b. BUTTONS - outline
   Sempre testo + bordo del colore, hover riempie e inverte.
   ============================================================ */
.btn-outline-primary {
    color: var(--gs-blu) !important;
    border-color: var(--gs-blu) !important;
    background-color: transparent !important;
}
.btn-outline-primary:hover,
.btn-outline-primary:focus,
.btn-outline-primary:active {
    background-color: var(--gs-blu) !important;
    color: #fff !important;
}

.btn-outline-success {
    color: var(--gs-verde) !important;
    border-color: var(--gs-verde) !important;
    background-color: transparent !important;
}
.btn-outline-success:hover,
.btn-outline-success:focus,
.btn-outline-success:active {
    background-color: var(--gs-verde) !important;
    color: #fff !important;
}

.btn-outline-danger {
    color: var(--gs-rosso) !important;
    border-color: var(--gs-rosso) !important;
    background-color: transparent !important;
}
.btn-outline-danger:hover,
.btn-outline-danger:focus,
.btn-outline-danger:active {
    background-color: var(--gs-rosso) !important;
    color: #fff !important;
}

.btn-outline-warning {
    color: var(--gs-oro) !important;
    border-color: var(--gs-oro) !important;
    background-color: transparent !important;
}
.btn-outline-warning:hover,
.btn-outline-warning:focus,
.btn-outline-warning:active {
    background-color: var(--gs-oro) !important;
    color: var(--gs-nero) !important;
}

.btn-outline-info {
    color: var(--gs-blu) !important;
    border-color: var(--gs-blu) !important;
    background-color: transparent !important;
}
.btn-outline-info:hover,
.btn-outline-info:focus,
.btn-outline-info:active {
    background-color: var(--gs-blu) !important;
    color: #fff !important;
}

.btn-outline-secondary {
    color: var(--gs-nero-chiaro) !important;
    border-color: var(--gs-border) !important;
    background-color: transparent !important;
}
.btn-outline-secondary:hover,
.btn-outline-secondary:focus,
.btn-outline-secondary:active {
    background-color: var(--gs-neutro) !important;
    color: var(--gs-nero) !important;
}

/* ============================================================
   3c. BOTTONI AZIONE (list_diagram_button, feed-*-btn, list)
   Stato base: icone grigie discrete. Hover: sfondo neutro scuro
   con testo chiaro. Non piu' "bianco su bianco".
   ============================================================ */
.list_diagram_button {
    color: var(--gs-nero-chiaro) !important;
    background-color: transparent !important;
    border: 1px solid transparent !important;
    transition: background-color 0.12s, color 0.12s;
}
.list_diagram_button:hover,
.list_diagram_button:focus {
    background-color: var(--gs-nero) !important;
    color: #fff !important;
    border-color: var(--gs-nero) !important;
}

/* Premium user badge */
.premium-badge {
    display: inline-block;
    color: var(--gs-oro) !important;
    font-size: 0.9em;
    vertical-align: baseline;
    margin-left: 2px;
    line-height: 1;
    cursor: help;
}
.premium-badge i {
    vertical-align: -1px;
}
/* Quando il badge usa anche .gs-help (per il tooltip CSS), preserva la sua
   tipografia e il margine: .gs-help imposta font-size:1em e margin-left:3px
   piu' generosi che spezzerebbero l'allineamento col nome utente. */
.premium-badge.gs-help {
    font-size: 0.9em;
    margin-left: 2px;
}

/* ============================================================
   4. CARDS
   Lasciamo i bordi come li hanno definiti: se una .card ha il
   bordo (default Bootstrap) lo tiene, se ha `border: none` custom
   (info-card, collection, ecc.) lo tiene. La skin non forza.
   ============================================================ */

/* ============================================================
   5. FEED
   ============================================================ */
.feed-post {
    border: 1px solid var(--gs-border) !important;
    border-radius: 0 !important;
    margin-bottom: 6px !important;
}

.feed-post-stats     { color: var(--gs-nero-chiaro) !important; border-top: 1px solid var(--gs-neutro) !important; }
.feed-post-actions   { border-top: 1px solid var(--gs-neutro) !important; }

.feed-open-btn,
.feed-share-btn,
.feed-follow-btn {
    border: 1px solid var(--gs-border) !important;
    border-radius: 0 !important;
    background: transparent !important;
    color: var(--gs-nero-chiaro) !important;
}
.feed-open-btn:hover,
.feed-share-btn:hover,
.feed-follow-btn:hover {
    background-color: var(--gs-neutro) !important;
    color: var(--gs-nero) !important;
}



/* Comments */
.feed-comment {
    background-color: #fff !important;
    border: none !important;
    border-radius: 0 !important;
}

.feed-comment-input:focus {
    border-color: var(--gs-blu) !important;
    outline: none !important;
}

/* ============================================================
   6. FORMS
   ============================================================ */
.form-control:focus,
input:focus,
textarea:focus,
select:focus {
    border-color: var(--gs-blu) !important;
    box-shadow: 0 0 0 1px var(--gs-blu-chiaro) !important;
}

label {
    text-transform: uppercase !important;
    letter-spacing: 0.04em !important;
    color: var(--gs-nero-chiaro) !important;
    font-size: 0.85em !important;
    font-weight: 600 !important;
}

/* Eccezioni: dove uppercase non ha senso (checkbox inline, form flottanti) */
.form-check-label,
.custom-control-label,
.form-check label {
    text-transform: none !important;
    letter-spacing: 0 !important;
    font-size: inherit !important;
    font-weight: normal !important;
    color: var(--gs-nero) !important;
}

/* ============================================================
   7. BADGES
   ============================================================ */
.badge-primary   { background-color: var(--gs-blu)   !important; color: #fff !important; }
.badge-success   { background-color: var(--gs-verde) !important; color: #fff !important; }
.badge-danger    { background-color: var(--gs-rosso) !important; color: #fff !important; }
.badge-info      { background-color: var(--gs-blu)   !important; color: #fff !important; }
.badge-warning {
    background-color: var(--gs-oro) !important;
    color: var(--gs-nero) !important;
    border: none !important;
}
.badge-secondary {
    background-color: var(--gs-neutro-scuro) !important;
    color: var(--gs-nero) !important;
}

/* ============================================================
   8. PAGINATION
   ============================================================ */
.pagination .page-item.active .page-link {
    background-color: var(--gs-blu) !important;
    border-color:     var(--gs-blu) !important;
    color: #fff !important;
}

.pagination .page-link {
    color: var(--gs-nero-chiaro) !important;
    border-color: var(--gs-border) !important;
    background-color: #fff !important;
}

.pagination .page-link:hover {
    background-color: var(--gs-neutro) !important;
    color: var(--gs-blu) !important;
}

/* ============================================================
   9. NAV PILLS
   ============================================================ */
.nav-pills .nav-link {
    color: var(--gs-nero-chiaro) !important;
}
.nav-pills .nav-link:hover {
    background-color: var(--gs-neutro) !important;
    color: var(--gs-nero) !important;
}
.nav-pills .nav-link.active {
    background-color: var(--gs-blu) !important;
    color: #fff !important;
}

/* ============================================================
   10. ALERTS
   Varianti chiare con bordo del colore semantico.
   ============================================================ */
.alert {
    border-radius: var(--gs-radius) !important;
    border-width: 1px !important;
    border-style: solid !important;
}

.alert-primary,
.alert-info {
    background-color: var(--gs-blu-chiaro) !important;
    border-color:     var(--gs-blu) !important;
    color:            var(--gs-blu-scuro) !important;
}

.alert-success {
    background-color: var(--gs-verde-chiaro) !important;
    border-color:     var(--gs-verde) !important;
    color:            var(--gs-verde-scuro) !important;
}

.alert-warning {
    background-color: var(--gs-oro-chiaro) !important;
    border-color:     var(--gs-oro) !important;
    color:            var(--gs-oro-scuro) !important;
}

.alert-danger {
    background-color: var(--gs-rosso-chiaro) !important;
    border-color:     var(--gs-rosso) !important;
    color:            var(--gs-rosso-scuro) !important;
}

/* ============================================================
   11. NOTIFICHE
   ============================================================ */
.notif-dropdown-panel {
    border-radius: 0 !important;
    border: 1px solid var(--gs-border) !important;
}

.notif-item.notif-unread {
    background: var(--gs-blu-chiaro) !important;
    border-left-color: var(--gs-blu) !important;
}

.notif-item.notif-unread:hover {
    background: rgba(32, 137, 149, 0.2) !important;
}

.notif-item.notif-unread .notif-icon {
    color: var(--gs-blu) !important;
}

/* "X minutes ago" nelle notifiche unread: il color base e' un blu Bootstrap
   (#6a9fd8 in only_app.css). Qui lo porto al teal GS. */
.notif-item.notif-unread .notif-time {
    color: var(--gs-blu) !important;
}

#notif-mark-all-read {
    color: var(--gs-blu) !important;
}

/* Il contatore notifiche sulla campanella (.notif-bell-link .notif_number) non
   viene toccato: la skin rispetta lo stile nativo che e' gia' corretto. */

/* ============================================================
   12. SELECTION
   ============================================================ */
::selection {
    background-color: var(--gs-blu) !important;
    color: #fff !important;
}


/* ============================================================
   14. GS-SPECIFIC utility
   ============================================================ */
.bg-gsblack    { background-color: var(--gs-nero) !important; }
.text-gsred    { color: var(--gs-rosso) !important; }
.bg-gsred      { background-color: var(--gs-rosso) !important; }
.text-gsverde  { color: var(--gs-verde) !important; }
.bg-gsverde    { background-color: var(--gs-verde) !important; }
.text-gsoro    { color: var(--gs-oro) !important; }

/* ============================================================
   15. EVIDENZA / FEATURED
   ============================================================ */
.highlight,
.featured,
.pinned {
    background-color: var(--gs-giallo) !important;
}

/* ----------------------------------------------------------------------------
 * gs-help — tooltip CSS-only, attivato da hover/focus su un'icona "?".
 * Markup: <span class="gs-help"><i class="bi bi-question-circle"></i>
 *           <span class="gs-help-tip">Testo spiegazione</span></span>
 * Pattern originato in upgrade_styles.blade.php; promosso qui per riuso globale.
 * -------------------------------------------------------------------------- */
.gs-help {
  position: relative;
  display: inline-block;
  cursor: help;
  color: #6c757d;
  font-size: 1em;
  margin-left: 3px;
  vertical-align: baseline;
  transition: color 0.15s;
}
.gs-help .bi-question-circle { font-weight: 700; }
.gs-help:hover { color: #2c3136; }

.gs-help-tip {
  position: absolute;
  bottom: calc(100% + 6px);
  left: 50%;
  transform: translateX(-50%);
  background: #2c3136;
  color: #fff;
  padding: 8px 12px;
  border-radius: 6px;
  font-size: 0.82rem;
  line-height: 1.45;
  font-weight: 400;
  width: max-content;
  max-width: 280px;
  white-space: normal;
  text-align: left;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.15s;
  z-index: 100;
  box-shadow: 0 4px 12px rgba(0,0,0,0.18);
}
.gs-help-tip::after {
  content: '';
  position: absolute;
  top: 100%;
  left: 50%;
  transform: translateX(-50%);
  border: 5px solid transparent;
  border-top-color: #2c3136;
}
.gs-help-tip hr {
  margin: 6px 0;
  border: 0;
  border-top: 1px solid rgba(255, 255, 255, 0.18);
  height: 0;
}
.gs-help:hover .gs-help-tip,
.gs-help:focus .gs-help-tip {
  opacity: 1;
}