/* ===================================================
 * CreaMGA Design System — variabili globali + base
 * Applicato a tutto il progetto Pricer via App.razor
 * =================================================== */

:root {
  --navy:       #0B1F3B;
  --teal:       #2FA88C;
  --teal-light: #E8F7F3;
  --teal-dark:  #1d7a66;
  --slate:      #475263;
  --light:      #F5F7FA;
  --white:      #FFFFFF;
  --border:     #E6ECF2;
  --text:       #10233F;
  --text-soft:  #5B6B7F;
  --red:        #c0392b;
  --red-light:  #FFF0F0;
  --gold:       #D4A030;
  --gold-light: #FFFBF0;
  --font:       Inter, system-ui, -apple-system, "Segoe UI", sans-serif;
  --radius:     10px;
  --shadow:     0 6px 18px rgba(11,31,59,.05);
}

/* Base typography */
html, body {
  font-family: var(--font) !important;
  background: var(--light);
  color: var(--text);
}

/* Link color */
a {
  color: var(--teal);
}
a:hover {
  color: var(--teal-dark);
}

/* Header/topbar Syncfusion override — navbar bianca (stile crea-mga) */
.e-toolbar.defaultToolbar,
.headerToolbar.e-toolbar {
  background: var(--white) !important;
  border-bottom: 1px solid var(--border) !important;
  box-shadow: 0 1px 4px rgba(11,31,59,.06) !important;
}


.e-toolbar .e-toolbar-item .e-tbar-btn,
.e-toolbar .e-toolbar-item .e-tbar-btn-text,
.headerToolbar .e-tbar-btn-text {
  color: var(--text) !important;
}

.e-toolbar .e-toolbar-item .e-tbar-btn:hover,
.e-toolbar .e-toolbar-item .e-tbar-btn:focus {
  background: rgba(47,168,140,.10) !important;
  color: var(--teal) !important;
}

/* ── Layout ── */
#wrapper {
  min-height: 100vh;
}

#page-right {
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  /* margin-left gestito inline da MainLayout.razor via SidebarToggle */
}

/* Sidebar Syncfusion override — fixed al viewport, sempre visibile al top */
.sidebar-treeview {
  background: var(--navy) !important;
  border-right: 1px solid rgba(255,255,255,.08) !important;
  position: fixed !important;
  top: 0 !important;
  left: 0 !important;
  height: 100vh !important;
  overflow-y: auto !important;
  overflow-x: hidden !important;
  display: flex !important;
  flex-direction: column;
  z-index: 1000;
}

/* ── Sezione logo + utente (stile crea-mga) ── */
.sb-logo {
  padding: 20px 16px 16px;
  border-bottom: 1px solid rgba(255,255,255,.08);
  flex-shrink: 0;
}

.sb-logo-img {
  display: block;
  width: 100%;
  max-width: 180px;
  height: auto;
  mix-blend-mode: lighten;
  margin-bottom: 8px;
}

.sb-tag {
  font-size: 9px;
  font-weight: 700;
  background: rgba(47,168,140,.18);
  color: var(--teal);
  padding: 2px 6px;
  border-radius: 3px;
  letter-spacing: .05em;
  margin-top: 6px;
  display: inline-block;
}

.sb-userinfo {
  margin-top: 12px;
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: 10px;
}

.sb-avatar {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  background: rgba(255,255,255,.15);
  color: #fff;
  font-size: 13px;
  font-weight: 600;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  letter-spacing: 0;
}

.sb-user-text {
  display: flex;
  flex-direction: column;
  gap: 1px;
  overflow: hidden;
  min-width: 0;
}

.sb-ui-line {
  font-size: 13px;
  color: rgba(255,255,255,.92);
  font-weight: 500;
  line-height: 1.3;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.sb-ui-line.primary   { color: #fff; font-weight: 600; font-size: 13px; }
.sb-ui-line.secondary { color: rgba(255,255,255,.45); font-size: 11px; font-weight: 400; }

/* In dock (50px) il contenuto viene tagliato dall'overflow: hidden del sidebar */
.sb-logo {
  overflow: hidden;
}

/* Treeview nav items inside sidebar — crea-mga style */

/* Font e colore testo */
.sidebar-treeview .e-treeview .e-list-item {
  font-size: 12px !important;
}

.sidebar-treeview .e-treeview .e-list-item .e-content,
.sidebar-treeview .e-treeview .e-list-text,
.sidebar-treeview .e-treeview .e-list-item .menu-text {
  color: rgba(255,255,255,.5) !important;
  font-size: 12px !important;
  font-weight: 400 !important;
  line-height: 1;
}

/* Icone nel NodeTemplate */
.sidebar-treeview .e-treeview .node-icon {
  color: rgba(255,255,255,.5) !important;
}

/* Padding interno riga — uguale a crea-mga (8px 10px) */
.sidebar-treeview .e-treeview .e-text-content {
  padding: 8px 10px 8px 14px !important;
  height: auto !important;
  min-height: 36px;
  line-height: 1 !important;
}

/* Sfondo riga arrotondato (crea-mga: border-radius 7px) */
.sidebar-treeview .e-treeview .e-list-item > .e-fullrow {
  border-radius: 7px !important;
  left: 6px !important;
  width: calc(100% - 12px) !important;
}

/* Stato attivo */
.sidebar-treeview .e-treeview .e-list-item.e-active > .e-fullrow,
.sidebar-treeview .e-treeview .e-list-item.e-node-focus > .e-fullrow {
  background: rgba(47,168,140,.2) !important;
  border-left: 3px solid var(--teal) !important;
  border-radius: 7px !important;
}

.sidebar-treeview .e-treeview .e-list-item.e-active .e-list-text,
.sidebar-treeview .e-treeview .e-list-item.e-active .menu-text,
.sidebar-treeview .e-treeview .e-list-item.e-active .e-list-icon {
  color: var(--teal) !important;
  font-weight: 500 !important;
}

/* Hover */
.sidebar-treeview .e-treeview .e-list-item:hover > .e-fullrow {
  background: rgba(255,255,255,.06) !important;
}

/* NodeTemplate wrapper — rimuove spazi aggiuntivi */
.sidebar-treeview .e-treeview .menu-text {
  margin: 0;
  padding: 0;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* e-list-text: gestito dall'inline style del componente */
.sidebar-treeview .e-treeview .e-list-text {
  padding: 0 !important;
}

/* Dock menu (icone compatte) */
.sidebar-treeview .e-menu-container,
.dock-menu.e-menu-wrapper {
  background: var(--navy) !important;
}

.dock-menu .e-menu-item .e-menu-icon,
.dock-menu .e-menu-item {
  color: rgba(255,255,255,.5) !important;
}

.dock-menu .e-menu-item:hover,
.dock-menu .e-menu-item.e-selected {
  background: rgba(47,168,140,.2) !important;
  color: var(--teal) !important;
}

/* Dropdown buttons / profile button — scoped nella toolbar (sfondo bianco) */
.main-header .e-dropdown-btn,
.main-header .e-split-btn {
  background: #f4f6fa !important;
  border: 1px solid var(--border) !important;
  color: var(--text) !important;
  border-radius: 7px !important;
}

.main-header .e-dropdown-btn:hover,
.main-header .e-split-btn:hover {
  background: #e8ebf2 !important;
  border-color: var(--teal) !important;
  color: var(--teal) !important;
}

/* Dropdown buttons nel resto dell'app */
.e-dropdown-btn,
.e-split-btn {
  border-radius: 7px !important;
}

/* Primary button Syncfusion */
.e-btn.e-primary,
.e-btn[class*="e-primary"] {
  background: var(--teal) !important;
  border-color: var(--teal-dark) !important;
  color: #fff !important;
}

.e-btn.e-primary:hover {
  background: var(--teal-dark) !important;
}

/* Gruppo sinistra header: hamburger + data in un unico item */
.header-left-group {
  display: flex;
  align-items: center;
  gap: 14px;
}

.header-menu-btn {
  cursor: pointer;
  display: flex;
  align-items: center;
  font-size: 18px;
  color: var(--text);
  padding: 4px;
  border-radius: 5px;
  transition: background .14s;
}
.header-menu-btn:hover {
  background: rgba(47,168,140,.10);
  color: var(--teal);
}

/* Data nella topbar — stile crea-mga */
.header-date {
  font-size: 15px;
  color: var(--text-soft);
  font-weight: 400;
  white-space: nowrap;
}
.header-date strong {
  color: var(--text);
  font-weight: 600;
}

/* ── Intestazioni di sezione menu (label piatte: PRODOTTI, CONFIGURAZIONE, …) ── */

/* Testo etichetta: uppercase, piccolo, grigio tenue */
.menu-section-label {
  font-size: 10px;
  font-weight: 700;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: rgba(255,255,255,.35);
  pointer-events: none;
}

/* Riga dell'etichetta: altezza ridotta, padding top maggiore per separazione */
.sidebar-treeview .e-treeview .e-list-item:has(.menu-section-label) > .e-text-content {
  padding: 18px 10px 2px 14px !important;
  min-height: 24px;
}

/* Nessun sfondo hover/attivo sulle etichette */
.sidebar-treeview .e-treeview .e-list-item:has(.menu-section-label) > .e-fullrow,
.sidebar-treeview .e-treeview .e-list-item:has(.menu-section-label):hover > .e-fullrow,
.sidebar-treeview .e-treeview .e-list-item:has(.menu-section-label).e-active > .e-fullrow {
  background: transparent !important;
  border-left: none !important;
  cursor: default;
}

/* Nasconde l'icona vuota nelle etichette */
.sidebar-treeview .e-treeview .e-list-item:has(.menu-section-label) .e-list-icon {
  display: none !important;
}

/* Footer */
.page-footer {
  background: var(--navy) !important;
  color: rgba(255,255,255,.6) !important;
  border-top: none !important;
}

/* ── Confirm/Alert dialog — stile crea-mga ── */
.cm-confirm-dlg.e-dialog {
  border-radius: 14px !important;
  max-width: 440px !important;
  width: 440px !important;
  box-shadow: 0 12px 40px rgba(11,31,59,.25) !important;
  border: none !important;
}

/* Header */
.cm-confirm-dlg .e-dlg-header-content {
  background: transparent !important;
  border-bottom: none !important;
  padding: 24px 28px 4px !important;
}

/* Titolo */
.cm-confirm-dlg .e-dlg-header {
  font-family: 'Inter', sans-serif !important;
  font-size: 15px !important;
  font-weight: 700 !important;
  color: #0B1F3B !important;
}

/* Nasconde il tasto X */
.cm-confirm-dlg .e-dlg-closeicon-btn {
  display: none !important;
}

/* Corpo del messaggio */
.cm-confirm-dlg .e-dlg-content {
  padding: 6px 28px 18px !important;
  text-align: left !important;
  font-size: 13px !important;
  color: #5B6B7F !important;
  line-height: 1.65 !important;
}

/* Footer */
.cm-confirm-dlg .e-footer-content {
  border-top: none !important;
  padding: 0 28px 28px !important;
  display: flex !important;
  justify-content: flex-end !important;
  gap: 10px !important;
  background: transparent !important;
}

/* Pulsante secondario (Annulla) */
.cm-confirm-dlg .e-footer-content .e-btn:not(.e-primary) {
  background: #F5F7FA !important;
  border: 1px solid #E6ECF2 !important;
  color: #475263 !important;
  border-radius: 8px !important;
  height: 36px !important;
  padding: 0 20px !important;
  font-size: 13px !important;
  font-weight: 500 !important;
  box-shadow: none !important;
  font-family: 'Inter', sans-serif !important;
}
.cm-confirm-dlg .e-footer-content .e-btn:not(.e-primary):hover {
  background: #e8edf4 !important;
  border-color: #c8d0dd !important;
}

/* Pulsante primario (Conferma/Ok) */
.cm-confirm-dlg .e-footer-content .e-btn.e-primary {
  background: #c0392b !important;
  border-color: #a93226 !important;
  color: #fff !important;
  border-radius: 8px !important;
  height: 36px !important;
  padding: 0 20px !important;
  font-size: 13px !important;
  font-weight: 500 !important;
  box-shadow: none !important;
  font-family: 'Inter', sans-serif !important;
}
.cm-confirm-dlg .e-footer-content .e-btn.e-primary:hover {
  background: #a93226 !important;
  border-color: #922b21 !important;
}