/*
 * ARYEL Wholesale Portal — Brand Theme Override
 * Palette estratta dal mockup ufficiale Aryel
 *
 *   Primary (hot pink)  #FF0066
 *   Background dark     #3a4150
 *   Surface / card      #434b5c
 *   Input bg            #4d5568
 *   Text primary        #ffffff
 *   Text secondary      #8b929e
 *   Text labels         #c4c9d4
 */

/* ============================================================
   1. PALETTE PRIMARIA — hot pink #FF0066
   ============================================================ */
:root,
html[data-bs-theme=light] {
  /* Logo size override (default Ubold = 20px, too small) */
  --ct-logo-lg-height: 32px;
  --ct-logo-sm-height: 32px;

  --ct-primary:              #FF0066;
  --ct-primary-rgb:          255, 0, 102;
  --ct-primary-text:         #cc0052;
  --ct-primary-bg-subtle:    #ffe0ee;
  --ct-primary-border-subtle:#ffb3d1;

  --ct-link-color:           #FF0066;
  --ct-link-hover-color:     #cc0052;
}

html[data-bs-theme=dark] {
  --ct-primary:              #FF0066;
  --ct-primary-rgb:          255, 0, 102;
  --ct-primary-text:         #ff4d91;
  --ct-primary-bg-subtle:    #2d0018;
  --ct-primary-border-subtle:#80003a;
}

/* ============================================================
   2. TOPBAR — sfondo dark Aryel
   ============================================================ */
html[data-topbar-color=brand] .navbar-custom {
  background: #3a4150 !important;
  border-bottom: 1px solid rgba(255, 0, 102, 0.2);
}

/* Colori elementi topbar */
html[data-topbar-color=brand] .navbar-custom .nav-link,
html[data-topbar-color=brand] .navbar-custom .topbar-menu .nav-link,
html[data-topbar-color=brand] .navbar-custom a,
html[data-topbar-color=brand] .navbar-custom span,
html[data-topbar-color=brand] .navbar-custom .button-toggle-menu {
  color: #c4c9d4 !important;
}
html[data-topbar-color=brand] .navbar-custom .nav-link:hover,
html[data-topbar-color=brand] .navbar-custom a:hover {
  color: #ffffff !important;
}
html[data-topbar-color=brand] .navbar-custom .form-control {
  background: #4d5568 !important;
  border-color: #5a6175 !important;
  color: #ffffff !important;
}

/* ============================================================
   3. SIDEBAR / MENU — tema brand Aryel (valore custom, pieno controllo)
   ============================================================ */

/* Sfondo sidebar */
html[data-menu-color=brand] .app-menu {
  background-color: #434b5c !important;
  border-right: 1px solid rgba(255, 0, 102, 0.15) !important;
}
html[data-menu-color=brand] .app-menu .scrollbar {
  background-color: #434b5c !important;
}

/* ── Testo e icone: BIANCO su tutto ── */
html[data-menu-color=brand] .app-menu .menu-link {
  color: #ffffff !important;
}
html[data-menu-color=brand] .app-menu .menu-link .menu-text {
  color: #ffffff !important;
}
html[data-menu-color=brand] .app-menu .menu-link .menu-icon {
  color: #ffffff !important;
}
/* Feather icons sono SVG con stroke="currentColor" */
html[data-menu-color=brand] .app-menu .menu-link .menu-icon svg {
  stroke: #ffffff !important;
  color: #ffffff !important;
}
html[data-menu-color=brand] .app-menu .menu-link .menu-icon i {
  color: #ffffff !important;
}

/* ── Hover: box viola/pink semitrasparente ── */
html[data-menu-color=brand] .app-menu .menu-link:hover {
  background-color: rgba(255, 0, 102, 0.15) !important;
  border-radius: 6px !important;
  color: #ffffff !important;
}
html[data-menu-color=brand] .app-menu .menu-link:hover .menu-text,
html[data-menu-color=brand] .app-menu .menu-link:hover .menu-icon,
html[data-menu-color=brand] .app-menu .menu-link:hover .menu-icon svg {
  color: #ffffff !important;
  stroke: #ffffff !important;
}

/* ── Voce attiva: accent rosa pieno ── */
html[data-menu-color=brand] .app-menu .menu-item.active > .menu-link,
html[data-menu-color=brand] .app-menu .menu-link.active {
  background-color: #FF0066 !important;
  color: #ffffff !important;
  border-radius: 6px !important;
}
html[data-menu-color=brand] .app-menu .menu-item.active > .menu-link .menu-text,
html[data-menu-color=brand] .app-menu .menu-item.active > .menu-link .menu-icon svg {
  color: #ffffff !important;
  stroke: #ffffff !important;
}

/* ── Titolo sezione ── */
html[data-menu-color=brand] .app-menu .menu-title {
  color: rgba(255, 255, 255, 0.4) !important;
  letter-spacing: 0.08em;
  font-size: 0.7rem;
  font-weight: 700;
  text-transform: uppercase;
}

/* ── User box nella sidebar ── */
html[data-menu-color=brand] .user-box .dropdown-toggle,
html[data-menu-color=brand] .user-box h5,
html[data-menu-color=brand] .user-box a {
  color: #ffffff !important;
}
html[data-menu-color=brand] .user-box .text-muted,
html[data-menu-color=brand] .user-box p {
  color: rgba(255, 255, 255, 0.5) !important;
}

/* ── Dropdown topbar "Nuovo ordine": voci in nero leggibile ── */
.navbar-custom .dropdown-menu .dropdown-item,
.navbar-custom .dropdown-menu .dropdown-item i,
.navbar-custom .dropdown-menu .dropdown-item span {
  color: #343a40 !important;
}
.navbar-custom .dropdown-menu .dropdown-item:hover,
.navbar-custom .dropdown-menu .dropdown-item:focus {
  background-color: rgba(255, 0, 102, 0.07) !important;
  color: #FF0066 !important;
}
.navbar-custom .dropdown-menu .dropdown-item:hover i,
.navbar-custom .dropdown-menu .dropdown-item:focus i {
  color: #FF0066 !important;
}

/* ============================================================
   4. BOTTONI — primary hot pink
   ============================================================ */
.btn-primary {
  background-color: #FF0066 !important;
  border-color:     #FF0066 !important;
  color: #ffffff !important;
  font-weight: 600;
  letter-spacing: 0.03em;
}
.btn-primary:hover,
.btn-primary:focus,
.btn-primary:active {
  background-color: #cc0052 !important;
  border-color:     #cc0052 !important;
  box-shadow: 0 4px 16px rgba(255, 0, 102, 0.45) !important;
}

.btn-outline-primary {
  border-color: #FF0066 !important;
  color:        #FF0066 !important;
}
.btn-outline-primary:hover {
  background-color: #FF0066 !important;
  color: #ffffff !important;
}

/* ============================================================
   5. LINK, BADGE, HIGHLIGHTS
   ============================================================ */
a {
  color: #FF0066;
}
a:hover {
  color: #cc0052;
}

.badge.bg-primary { background-color: #FF0066 !important; }
.text-primary     { color: #FF0066 !important; }
.bg-primary       { background-color: #FF0066 !important; }
.border-primary   { border-color: #FF0066 !important; }
.bg-soft-primary  { background-color: rgba(255, 0, 102, 0.12) !important; }

/* ============================================================
   6. FORM — focus ring hot pink
   ============================================================ */
.form-control:focus,
.form-select:focus {
  border-color: #FF0066;
  box-shadow: 0 0 0 0.2rem rgba(255, 0, 102, 0.25);
}

/* ============================================================
   7. TABELLE
   ============================================================ */
.table-light th {
  background-color: #fff0f5 !important;
  color: #800033 !important;
  border-bottom: 2px solid rgba(255, 0, 102, 0.25) !important;
}

/* ============================================================
   8. PAGINATION
   ============================================================ */
.page-item.active .page-link {
  background-color: #FF0066 !important;
  border-color:     #FF0066 !important;
}
.page-link { color: #FF0066; }
.page-link:hover { color: #cc0052; }

/* ============================================================
   9. CARD widget dashboard
   ============================================================ */
.widget-rounded-circle .card {
  border-left: 4px solid #FF0066;
}

/* ============================================================
   10. LOGIN PAGE — dark background dal mockup
   ============================================================ */
body.authentication-bg {
  background-color: #3a4150 !important;
  background-image: none !important;
}

.authentication-bg .card,
.authentication-bg .card.bg-pattern {
  background-color: #434b5c !important;
  border: none;
  border-top: 3px solid #FF0066;
  box-shadow: 0 16px 48px rgba(0, 0, 0, 0.4);
  border-radius: 12px;
}

.authentication-bg .form-control {
  background-color: #4d5568 !important;
  border-color: #5a6175 !important;
  color: #ffffff !important;
}
.authentication-bg .form-control::placeholder {
  color: #6b7280 !important;
}
.authentication-bg .form-control:focus {
  background-color: #4d5568 !important;
  border-color: #FF0066 !important;
  box-shadow: 0 0 0 0.2rem rgba(255, 0, 102, 0.25) !important;
  color: #ffffff !important;
}
.authentication-bg .input-group-text {
  background-color: #4d5568 !important;
  border-color: #5a6175 !important;
  color: #8b929e !important;
}
.authentication-bg .form-label {
  color: #c4c9d4 !important;
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.07em;
  text-transform: uppercase;
}
.authentication-bg .text-muted { color: #8b929e !important; }
.authentication-bg h4,
.authentication-bg h5,
.authentication-bg h3 { color: #ffffff !important; }
.authentication-bg .form-check-label { color: #c4c9d4 !important; }

/* ============================================================
   11. TOPBAR — bottone toggle menu
   ============================================================ */
.button-toggle-menu {
  color: #c4c9d4 !important;
}
.button-toggle-menu:hover {
  color: #ffffff !important;
}

/* ============================================================
   12. FOOTER
   ============================================================ */
.footer      { color: #8b929e; font-size: 0.8rem; }
.footer-alt  { color: #8b929e !important; }

/* ============================================================
   13. SCROLLBAR
   ============================================================ */
::-webkit-scrollbar { width: 6px; height: 6px; }
::-webkit-scrollbar-track { background: #434b5c; }
::-webkit-scrollbar-thumb { background: rgba(255, 0, 102, 0.5); border-radius: 3px; }
::-webkit-scrollbar-thumb:hover { background: #FF0066; }

/* ============================================================
   14. ORDER STATUS — badge warning per stati che richiedono azione cliente
   ============================================================ */
.ws-status-warning {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    background: #fff3cd;
    color: #7d4e00;
    border: 1px solid #ffc107;
    border-radius: 6px;
    padding: 3px 8px;
    font-size: 0.78rem;
    font-weight: 600;
    white-space: nowrap;
}
.ws-status-warning .fe-alert-triangle {
    font-size: 0.8rem;
    color: #e6a800;
    flex-shrink: 0;
}

/* ============================================================
   15. LEGGIBILITÀ — testo contenuto più scuro
   Ubold imposta body/td su grigi chiari; qui scuriamo
   solo l'area .content-page (mai sidebar/topbar).
   ============================================================ */

/* Colore body base nell'area contenuto */
.content-page,
.content-page .content {
  color: #2d3341;
}

/* Celle tabella */
.content-page .table td,
.content-page .table th {
  color: #2d3341;
}

/* Card body */
.content-page .card-body,
.content-page .card-body p,
.content-page .card-body span:not(.badge) {
  color: #2d3341;
}

/* text-muted nell'area contenuto: meno grigio, più leggibile */
.content-page .text-muted {
  color: #5a6270 !important;
}

/* form-text / hint sotto i campi */
.content-page .form-text {
  color: #5a6270 !important;
}

/* label dei form */
.content-page .form-label {
  color: #2d3341;
}

/* Variabili CSS usate da Ubold/Bootstrap (sovrascrive a livello globale
   solo le variabili di testo — sicuro perché sidebar ha i propri colori
   forzati con !important qui sopra) */
:root {
  --ct-body-color:        #2d3341;
  --ct-secondary-color:   #5a6270;
  --bs-body-color:        #2d3341;
  --bs-secondary-color:   #5a6270;
}