/* ===== PHASE-7 UNIVERSAL: glass-frosted + glow pe toate butoanele ===== */
/* Selectori mai permisivi - functioneaza pe ORICE buton din pagina */

/* Butoane active din main content — glass REFLECTIV (2026-07-18):
   blur redus (8px, era 20px) + o banda de highlight sus care simuleaza
   o reflexie de sticla, in loc de blur greu "frosted". Forma/shape-ul
   e cel de pe mobil (chip-uri cu icon separat), preferat de Ali. */
.app-main button,
.dec-item button,
.list-item button,
#modal-overlay button {
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.10), rgba(255, 255, 255, 0.04));
  backdrop-filter: blur(8px) saturate(160%);
  -webkit-backdrop-filter: blur(8px) saturate(160%);
  border: 1px solid rgba(255, 255, 255, 0.16);
  border-top-color: rgba(255, 255, 255, 0.45);
  border-radius: 10px;
  color: var(--text);
  font-weight: 600;
  cursor: pointer;
  transition: all 240ms cubic-bezier(0.16, 1, 0.3, 1);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.30),
    inset 0 -1px 0 rgba(0, 0, 0, 0.20),
    0 2px 4px rgba(0, 0, 0, 0.40);
  text-shadow: 0 1px 1px rgba(0, 0, 0, 0.30);
}

/* Sidebar link-uri - chip reflectiv, colorat pe --tab-color (nu portocaliu fix) */
.sidebar-link {
  background: rgba(255, 255, 255, 0.03);
  backdrop-filter: blur(6px) saturate(140%);
  -webkit-backdrop-filter: blur(6px) saturate(140%);
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-top-color: rgba(255, 255, 255, 0.16);
  border-radius: 10px;
  color: var(--text-muted);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.08);
}
.sidebar-link:hover {
  background: color-mix(in srgb, var(--tab-color, var(--accent)) 16%, transparent);
  border-color: color-mix(in srgb, var(--tab-color, var(--accent)) 55%, transparent);
  border-top-color: color-mix(in srgb, var(--tab-color, var(--accent)) 80%, white 20%);
  color: #fff;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.35),
    0 0 0 1px color-mix(in srgb, var(--tab-color, var(--accent)) 45%, transparent),
    0 4px 16px color-mix(in srgb, var(--tab-color, var(--accent)) 35%, transparent),
    0 0 20px color-mix(in srgb, var(--tab-color, var(--accent)) 20%, transparent);
  transform: translateX(3px);
}
.sidebar-link.active {
  background: color-mix(in srgb, var(--tab-color, var(--accent)) 20%, transparent);
  border: 1px solid color-mix(in srgb, var(--tab-color, var(--accent)) 65%, transparent);
  border-top-color: color-mix(in srgb, var(--tab-color, var(--accent)) 85%, white 15%);
  color: #fff;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.35),
    inset 0 -1px 0 rgba(0, 0, 0, 0.10),
    0 0 0 1px color-mix(in srgb, var(--tab-color, var(--accent)) 50%, transparent),
    0 6px 20px color-mix(in srgb, var(--tab-color, var(--accent)) 40%, transparent);
}

/* Hover cu glow in culoarea tab-ului activ (nu mai e portocaliu fix) */
.app-main button:not(:disabled):hover,
.dec-item button:not(:disabled):hover,
.list-item button:not(:disabled):hover,
#modal-overlay button:not(:disabled):hover {
  background: color-mix(in srgb, var(--tab-color, var(--accent)) 30%, transparent);
  border-color: color-mix(in srgb, var(--tab-color, var(--accent)) 75%, transparent);
  border-top-color: color-mix(in srgb, var(--tab-color, var(--accent)) 90%, white 10%);
  color: #fff;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.40),
    0 0 0 1px color-mix(in srgb, var(--tab-color, var(--accent)) 50%, transparent),
    0 6px 20px color-mix(in srgb, var(--tab-color, var(--accent)) 45%, transparent),
    0 0 26px color-mix(in srgb, var(--tab-color, var(--accent)) 25%, transparent);
  transform: translateY(-2px);
}
.app-main button:not(:disabled):active,
.dec-item button:not(:disabled):active,
.list-item button:not(:disabled):active {
  transform: translateY(0);
}

/* === Variants === */

button.secondary,
.sidebar-link.secondary,
.secondary:not(.sidebar-link) {
  background: rgba(255, 255, 255, 0.03);
  border: 1px solid rgba(255, 255, 255, 0.06);
  color: var(--text-muted);
}
button.secondary:not(.sidebar-link):hover,
.sidebar-link.secondary:hover,
.secondary:not(.sidebar-link):hover {
  background: rgba(255, 255, 255, 0.06);
  border-color: rgba(255, 255, 255, 0.14);
  color: var(--text);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.25);
  transform: translateY(-1px);
}

button.success {
  background: linear-gradient(135deg, rgba(34, 197, 94, 0.18), rgba(34, 197, 94, 0.08)) !important;
  border: 1px solid rgba(34, 197, 94, 0.3) !important;
  color: #22c55e !important;
}
button.success:hover {
  background: linear-gradient(135deg, rgba(34, 197, 94, 0.28), rgba(34, 197, 94, 0.14)) !important;
  box-shadow: 0 0 0 1px rgba(34, 197, 94, 0.25), 0 6px 20px rgba(34, 197, 94, 0.32) !important;
  transform: translateY(-1px);
}

button.danger {
  background: linear-gradient(135deg, rgba(239, 68, 68, 0.18), rgba(239, 68, 68, 0.08)) !important;
  border: 1px solid rgba(239, 68, 68, 0.3) !important;
  color: #ef4444 !important;
}
button.danger:hover {
  background: linear-gradient(135deg, rgba(239, 68, 68, 0.28), rgba(239, 68, 68, 0.14)) !important;
  box-shadow: 0 0 0 1px rgba(239, 68, 68, 0.25), 0 6px 20px rgba(239, 68, 68, 0.32) !important;
  transform: translateY(-1px);
}

/* Faza 2 (20-Iul-2026): toggle de tip comanda (Postare Social vs Video Explainer) — variant
   nou, reutilizeaza var(--tab-color, var(--accent)) ca restul butoanelor din acest tab. */
button.btn-toggle {
  background: rgba(255, 255, 255, 0.03);
  border: 1px solid rgba(255, 255, 255, 0.06);
  color: var(--text-muted);
}
button.btn-toggle.active {
  background: color-mix(in srgb, var(--tab-color, var(--accent)) 22%, transparent);
  border-color: color-mix(in srgb, var(--tab-color, var(--accent)) 55%, transparent);
  color: #fff;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.30),
    0 0 0 1px color-mix(in srgb, var(--tab-color, var(--accent)) 40%, transparent);
}

button.warn {
  background: linear-gradient(135deg, rgba(245, 158, 11, 0.18), rgba(245, 158, 11, 0.08)) !important;
  border: 1px solid rgba(245, 158, 11, 0.3) !important;
  color: #f59e0b !important;
}
button.warn:hover {
  background: linear-gradient(135deg, rgba(245, 158, 11, 0.28), rgba(245, 158, 11, 0.14)) !important;
  box-shadow: 0 0 0 1px rgba(245, 158, 11, 0.25), 0 6px 20px rgba(245, 158, 11, 0.32) !important;
  transform: translateY(-1px);
}

/* Disabled */
button:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}

/* ===== MODAL CLOSE - FIX VIZIBILITATE ===== */
.modal-close,
.close-modal,
button[id$="-thread-close"],
#chat-admin-thread-close {
  display: inline-flex !important;
  align-items: center;
  justify-content: center;
  width: 36px !important;
  height: 36px !important;
  padding: 0 !important;
  background: rgba(255, 255, 255, 0.06) !important;
  backdrop-filter: blur(12px);
  border: 1px solid rgba(255, 255, 255, 0.08) !important;
  border-radius: 10px !important;
  color: var(--text-muted) !important;
  font-size: 22px !important;
  cursor: pointer !important;
  transition: all 200ms cubic-bezier(0.16, 1, 0.3, 1);
  flex-shrink: 0;
  opacity: 1 !important;
  visibility: visible !important;
  pointer-events: auto !important;
  z-index: 9999;
}
.modal-close:hover,
.close-modal:hover,
button[id$="-thread-close"]:hover,
#chat-admin-thread-close:hover {
  background: rgba(239, 68, 68, 0.15) !important;
  border-color: rgba(239, 68, 68, 0.4) !important;
  color: #ef4444 !important;
  transform: rotate(90deg);
  box-shadow: 0 0 0 1px rgba(239, 68, 68, 0.25), 0 4px 14px rgba(239, 68, 68, 0.25);
}

/* ===== #lead-detail-back — was wrongly grouped with the 36x36 icon-only
   modal-X-close buttons above (padding:0, font-size:22px, rotate-on-hover),
   but it's a labeled "← Înapoi la listă" text button, not an icon: forcing
   its multi-word text into a fixed 36px square made it render oversized
   and broken. Small colored pill instead, accented with the tab's color
   so it reads as "go back", not "close". ===== */
#lead-detail-back {
  display: inline-flex !important;
  align-items: center;
  gap: 6px;
  width: auto !important;
  height: auto !important;
  padding: 7px 14px 7px 10px !important;
  background: var(--c-leads-soft, rgba(239, 68, 68, 0.10)) !important;
  border: 1px solid rgba(239, 68, 68, 0.30) !important;
  border-radius: var(--r-pill, 999px) !important;
  color: var(--c-leads, #ef4444) !important;
  font-size: 13px !important;
  font-weight: 600;
  cursor: pointer !important;
  transition: all 200ms cubic-bezier(0.16, 1, 0.3, 1);
}
#lead-detail-back:hover {
  background: rgba(239, 68, 68, 0.18) !important;
  border-color: rgba(239, 68, 68, 0.5) !important;
  transform: translateX(-2px);
}

/* ===== BC-BACK breadcrumb — same small colored pill as #lead-detail-back,
   but tinted with the active tab's own color (--tab-color, set per-tab in
   90-canon.css) instead of one fixed color, since this button appears on
   every tab (Ali, 2026-07-18) ===== */
#bc-back {
  display: inline-flex !important;
  align-items: center;
  gap: 6px;
  width: auto !important;
  height: auto !important;
  background: color-mix(in srgb, var(--tab-color, var(--accent)) 12%, transparent) !important;
  backdrop-filter: blur(12px);
  border: 1px solid color-mix(in srgb, var(--tab-color, var(--accent)) 35%, transparent) !important;
  border-radius: var(--r-pill, 999px) !important;
  color: var(--tab-color, var(--accent)) !important;
  font-weight: 600;
  font-size: 13px;
  padding: 7px 14px 7px 10px;
  cursor: pointer;
  transition: all 200ms cubic-bezier(0.16, 1, 0.3, 1);
}
#bc-back:hover {
  background: color-mix(in srgb, var(--tab-color, var(--accent)) 20%, transparent) !important;
  border-color: color-mix(in srgb, var(--tab-color, var(--accent)) 55%, transparent) !important;
  box-shadow: 0 0 0 1px color-mix(in srgb, var(--tab-color, var(--accent)) 25%, transparent), 0 4px 14px color-mix(in srgb, var(--tab-color, var(--accent)) 25%, transparent);
  transform: translateX(-2px);
}

/* ===== LAYOUT FIX DESKTOP ===== */
/* Container legacy are max-width 760px si margin 340px - anuleaza-l */
body .container,
div.container {
  max-width: none !important;
  width: 100% !important;
  margin: 0 !important;
  padding: 0 !important;
}

/* Sidebar - sticky stanga, full-height pe desktop */
@media (min-width: 769px) {
  .app-shell {
    max-width: none !important;
    width: 100vw !important;
    margin: 0 !important;
    padding: 0 !important;
  }
  /* FIX 2026-07-18: era position:sticky, care ancoreaza sidebar-ul la
     pozitia lui NORMALA in flow — care incepe DUPA header-ul static cu
     logo (sibling anterior in DOM), nu de la y=0. Asta lasa un gol vizibil
     sus (nav "nu incepe de sus de tot") si taia fundalul jos. Fixed il
     ancoreaza de viewport, de la y=0 pana la 100vh, indiferent de restul
     layout-ului. Coloana goala de 248px din grid (.app-shell) ramane
     rezervata pentru continut, deci nimic nu se muta. */
  .sidebar {
    position: fixed !important;
    top: 0 !important;
    left: 0 !important;
    width: 248px !important;
    height: 100vh !important;
    z-index: 50;
    overflow-y: auto;
  }
  /* Was width: calc(100% - 248px) — .app-shell's grid (`248px 1fr`) already
     sizes .app-main's cell to exclude the 248px sidebar, so subtracting it
     again shrank .app-main by another 248px, leaving a dead gap on the
     right instead of filling the available width (Ali, 2026-07-18). */
  .app-main {
    max-width: 1400px !important;
    width: 100% !important;
    margin: 0 !important;
    padding: 24px 32px !important;
  }
}

/* Asigura ca .app-shell nu e limitat */
.app-shell {
  display: grid !important;
  grid-template-columns: 248px 1fr !important;
  grid-template-areas: "sidebar main" !important;
  max-width: none !important;
  width: 100vw !important;
  margin: 0 !important;
  padding: 0 !important;
}

/* ===== Inputs glass-frosted ===== */
input, select, textarea {
  background: rgba(255, 255, 255, 0.03) !important;
  backdrop-filter: blur(8px);
  border: 1px solid rgba(255, 255, 255, 0.08) !important;
  transition: all 200ms cubic-bezier(0.16, 1, 0.3, 1);
}
input:focus, select:focus, textarea:focus {
  background: rgba(255, 255, 255, 0.06) !important;
  border-color: rgba(255, 90, 31, 0.5) !important;
  box-shadow: 0 0 0 3px rgba(255, 90, 31, 0.15) !important;
  outline: none;
}

/* ===== Card hover ===== */
.card,
.tab-pane > div {
  transition: all 200ms cubic-bezier(0.16, 1, 0.3, 1);
}
.card:hover {
  border-color: var(--border-hover) !important;
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.3);
  transform: translateY(-2px);
}