/* ============================================================
   BANDBEE COMPONENT STYLES
   Buttons, Inputs, Cards, Badges, Alerts, Tables
   ============================================================ */

/* === STICKY TOPBAR (global — Angular 8 strips position:sticky from component CSS) === */
bandbee-topbar {
  position: -webkit-sticky;
  position: sticky;
  top: 0;
  z-index: 100;
}

/* === CONTENT AREA — clip instead of hidden to not break sticky positioning === */
bandbee-main .content {
  overflow-x: clip;
}

/* ============================================================
   BUTTONS
   ============================================================ */
.btn {
  display: inline-flex; align-items: center; justify-content: center;
  gap: var(--s-8); padding: var(--s-12) var(--s-24);
  font-family: var(--font-sans); font-size: var(--fs-sm);
  font-weight: var(--fw-semibold); line-height: 1;
  border: none; border-radius: var(--radius-full);
  cursor: pointer; white-space: nowrap;
  transition: all var(--duration) var(--ease);
  text-decoration: none;
}
.btn:active { transform: scale(0.97); }

.btn-primary {
  background: var(--primary); color: var(--primary-text);
  box-shadow: var(--shadow-sm);
}
.btn-primary:hover { background: var(--primary-hover); box-shadow: var(--shadow-glow); color: var(--primary-text); }

.btn-secondary {
  background: var(--surface); color: var(--text);
  border: 1px solid var(--border-strong);
}
.btn-secondary:hover { background: var(--surface-hover); border-color: var(--primary); color: var(--text); }

.btn-ghost {
  background: transparent; color: var(--text-secondary);
}
.btn-ghost:hover { color: var(--text); background: var(--surface); }

.btn-danger {
  background: transparent; color: var(--danger);
  border: 1px solid var(--border-strong);
}
.btn-danger:hover { background: var(--danger-soft); border-color: var(--danger); color: var(--danger); }

.btn-sm { padding: var(--s-8) var(--s-16); font-size: var(--fs-xs); }
.btn-lg { padding: var(--s-16) var(--s-32); font-size: var(--fs-base); }

/* ============================================================
   BADGES
   ============================================================ */
.badge {
  display: inline-flex; align-items: center; gap: var(--s-4);
  padding: var(--s-4) var(--s-12); border-radius: var(--radius-full);
  font-size: var(--fs-xs); font-weight: var(--fw-semibold);
}
.badge-primary { background: var(--accent-soft); color: var(--primary); }
.badge-success { background: var(--success-soft); color: var(--success); }
.badge-warning { background: var(--warning-soft); color: var(--warning); }
.badge-danger { background: var(--danger-soft); color: var(--danger); }
.badge-info { background: var(--info-soft); color: var(--info); }

/* ============================================================
   INPUTS
   ============================================================ */
.input {
  padding: var(--s-12) var(--s-16);
  background: var(--input-bg);
  border: 1px solid var(--border-strong);
  border-radius: var(--radius-md);
  color: var(--text);
  font-family: var(--font-sans);
  font-size: var(--fs-sm);
  transition: all var(--duration) var(--ease);
}
.input::placeholder { color: var(--text-tertiary); }
.input:hover { border-color: var(--text-tertiary); }
.input:focus { outline: none; border-color: var(--primary); box-shadow: 0 0 0 3px var(--accent-soft); }
.input-error { border-color: var(--danger) !important; }

textarea.input { min-height: 80px; resize: vertical; }

.input.ng-touched.ng-invalid {
  border-color: var(--danger) !important;
}

select.input {
  appearance: none; -webkit-appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Cpath fill='%239898a0' d='M6 8L1 3h10z'/%3E%3C/svg%3E");
  background-repeat: no-repeat; background-position: right 12px center;
  padding-right: var(--s-32);
}

.input-group {
  display: flex; flex-direction: column; gap: var(--s-4);
}
.input-group label {
  font-size: var(--fs-sm); font-weight: var(--fw-medium); color: var(--text-secondary);
}

/* ============================================================
   ALERTS
   ============================================================ */
.alert {
  padding: var(--s-16) var(--s-24); border-radius: var(--radius-md);
  font-size: var(--fs-sm); font-weight: var(--fw-medium);
  display: flex; align-items: center; gap: var(--s-12);
  border-left: 3px solid;
}
.alert-success { background: var(--success-soft); color: var(--success); border-color: var(--success); }
.alert-warning { background: var(--warning-soft); color: var(--warning); border-color: var(--warning); }
.alert-danger { background: var(--danger-soft); color: var(--danger); border-color: var(--danger); }
.alert-info { background: var(--info-soft); color: var(--info); border-color: var(--info); }

/* ============================================================
   CARDS
   ============================================================ */
.bb-card {
  background: var(--card-gradient);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  overflow: hidden;
  transition: all var(--duration) var(--ease);
}
.bb-card:hover {
  transform: translateY(-2px);
  box-shadow: var(--shadow-md);
}
.bb-card-body {
  padding: var(--s-24);
}
.bb-card-body h4 {
  font-size: var(--fs-base); font-weight: var(--fw-semibold);
  margin-bottom: var(--s-4);
  background-color: transparent !important;
  color: var(--text);
  padding: 0;
}
.bb-card-body p {
  font-size: var(--fs-sm); color: var(--text-secondary);
}
/* When bb-card is followed by base-information, card should not close at the bottom */
.bb-card:has(+ bandbee-base-information) {
  border-bottom-left-radius: 0;
  border-bottom-right-radius: 0;
  border-bottom: none;
}

.bb-card-header {
  background: var(--surface-hover);
  padding: var(--s-12) var(--s-16);
  border-bottom: 1px solid var(--border);
}
.bb-card-header h3,
.bb-card-header h4 {
  background: none !important;
  -webkit-background-clip: unset !important;
  -webkit-text-fill-color: unset !important;
  color: var(--text) !important;
  padding: 0; margin: 0;
  font-size: var(--fs-base); font-weight: var(--fw-bold);
  letter-spacing: 0.02em;
}

/* ============================================================
   TABLES
   ============================================================ */
.bb-table {
  width: 100%; border-collapse: collapse; font-size: var(--fs-sm);
}
.bb-table th, .bb-table td {
  padding: var(--s-12) var(--s-16); text-align: left;
  border-bottom: 1px solid var(--border);
}
.bb-table th {
  font-weight: var(--fw-semibold); color: var(--text-secondary);
  font-size: var(--fs-xs); text-transform: uppercase; letter-spacing: 0.05em;
}
.bb-table tbody tr { transition: background var(--duration) var(--ease); }
.bb-table tbody tr:hover { background: var(--surface-hover); }

/* ============================================================
   THEME TOGGLE
   ============================================================ */
.theme-toggle {
  display: flex; align-items: center; justify-content: center;
  background: transparent; color: var(--text);
  border: none; border-radius: var(--radius-sm);
  cursor: pointer; padding: var(--s-8);
  transition: background var(--duration) var(--ease);
}
.theme-toggle:hover {
  background: var(--surface-hover);
}
.theme-toggle:focus-visible { outline: 2px solid var(--primary); outline-offset: 2px; }

/* ============================================================
   PANELS
   ============================================================ */
.bb-panel { background: var(--bg-elevated); border: 1px solid var(--border); border-radius: var(--radius-lg); overflow: clip; box-shadow: var(--shadow-sm); }
.bb-panel-header { background: var(--surface-hover); padding: var(--s-12) var(--s-16); border-bottom: 1px solid var(--border); position: sticky; top: var(--header-h); z-index: 10; }
.bb-panel-header h4 { background: none !important; color: var(--text); padding: 0; margin: 0; }
.bb-panel-body { padding: var(--s-24); color: var(--text); }

/* ============================================================
   DIALOGS
   ============================================================ */
.bb-dialog-overlay { position: fixed; inset: 0; background: rgba(0,0,0,0.5); display: flex; align-items: center; justify-content: center; z-index: 1000; }
.bb-dialog { background: var(--bg-elevated); border: 1px solid var(--border); border-radius: var(--radius-lg); box-shadow: var(--shadow-lg); width: 90%; max-width: 600px; max-height: 85vh; overflow-y: auto; }
.bb-dialog-header { display: flex; justify-content: space-between; align-items: center; padding: var(--s-16) var(--s-24); border-bottom: 1px solid var(--border); }
.bb-dialog-header h4 { background: none !important; color: var(--text); padding: 0; margin: 0; }
.bb-dialog-close { background: none; border: none; color: var(--text-tertiary); cursor: pointer; padding: var(--s-4); }
.bb-dialog-body { padding: var(--s-24); color: var(--text); }
.bb-dialog-footer { padding: var(--s-16) var(--s-24); border-top: 1px solid var(--border); display: flex; gap: var(--s-8); justify-content: flex-end; }
@media (max-width: 768px) {
  .bb-dialog-footer { flex-direction: column; }
  .bb-dialog-footer .btn { width: 100%; }
}

/* ============================================================
   SWITCH (Toggle)
   ============================================================ */
.bb-switch { position: relative; display: inline-block; width: 42px; height: 24px; }
.bb-switch input { opacity: 0; width: 0; height: 0; }
.bb-switch-slider { position: absolute; inset: 0; background: var(--border-strong); border-radius: var(--radius-full); cursor: pointer; transition: background var(--duration) var(--ease); }
.bb-switch-slider::before { content: ''; position: absolute; height: 18px; width: 18px; left: 3px; bottom: 3px; background: #fff; border-radius: 50%; transition: transform var(--duration) var(--ease); }
.bb-switch input:checked + .bb-switch-slider { background: var(--primary); }
.bb-switch input:checked + .bb-switch-slider::before { transform: translateX(18px); }

/* ============================================================
   PRIMENG DARK OVERRIDES (using CSS variables)
   ============================================================ */

/* Buttons — primary style (default for all PrimeNG buttons) */
.ui-button-danger {
  background-color: transparent !important;
  border: 1px solid var(--border-strong) !important;
  color: var(--danger) !important;
}
.ui-button-danger:hover {
  background-color: var(--danger-soft) !important;
  border-color: var(--danger) !important;
  color: var(--danger) !important;
}

/* Disabled state */
body .ui-state-disabled, body .ui-widget:disabled {
  opacity: 0.35 !important;
  filter: alpha(opacity=35) !important;
  cursor: not-allowed !important;
}

/* Toast */
.ui-toast {
  z-index: 10000 !important;
}
.ui-toast .ui-toast-message {
  overflow: visible !important;
}
.ui-toast-message-success {
  background-color: var(--surface) !important;
  border: 1px solid var(--success) !important;
  color: var(--text) !important;
  border-radius: var(--radius-md) !important;
}
.ui-toast-message-error, .ui-toast-message-warn {
  background-color: var(--surface) !important;
  border: 1px solid var(--danger) !important;
  color: var(--text) !important;
  border-radius: var(--radius-md) !important;
}
.ui-toast .ui-toast-close-icon {
  top: var(--s-8) !important;
  right: var(--s-8) !important;
  width: 24px !important;
  height: 24px !important;
  display: flex !important;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  color: var(--text-secondary) !important;
  transition: color var(--duration) var(--ease), background var(--duration) var(--ease);
  z-index: 1;
}
.ui-toast .ui-toast-close-icon:hover {
  color: var(--text) !important;
  background: var(--surface-hover);
}
.ui-toast .ui-toast-message-content {
  padding: var(--s-12) var(--s-16) !important;
  padding-right: var(--s-32) !important;
}
.ui-toast .ui-toast-summary {
  color: var(--text) !important;
  font-weight: var(--fw-semibold) !important;
  font-size: var(--fs-sm) !important;
}
.ui-toast .ui-toast-detail {
  color: var(--text-secondary) !important;
  font-size: var(--fs-xs) !important;
}
.ui-toast .ui-toast-icon {
  color: var(--text-secondary) !important;
}
.ui-toast-message-error .ui-toast-icon,
.ui-toast-message-warn .ui-toast-icon {
  color: var(--danger) !important;
}
.ui-toast-message-success .ui-toast-icon {
  color: var(--success) !important;
}

/* Chips — Container */
body .ui-chips > ul.ui-inputtext {
  display: flex !important;
  flex-wrap: wrap !important;
  align-items: center !important;
  gap: var(--s-8) !important;
  padding: var(--s-8) var(--s-12) !important;
  min-height: 42px !important;
  background: var(--input-bg) !important;
  border: 1px solid var(--border-strong) !important;
  border-radius: var(--radius-md) !important;
  transition: border-color var(--duration) var(--ease),
              box-shadow var(--duration) var(--ease) !important;
}
body .ui-chips > ul.ui-inputtext:focus-within {
  border-color: var(--primary) !important;
  box-shadow: 0 0 0 3px var(--accent-soft) !important;
}

/* Chips — Token (Pill-Badge) */
body .ui-chips-token {
  display: inline-flex !important;
  align-items: center !important;
  gap: var(--s-4) !important;
  padding: var(--s-4) var(--s-12) !important;
  background: var(--accent-soft) !important;
  color: var(--primary) !important;
  border: none !important;
  border-radius: var(--radius-full) !important;
  font-size: var(--fs-xs) !important;
  font-weight: var(--fw-semibold) !important;
  font-family: var(--font-sans) !important;
  line-height: 1.4 !important;
  margin: 0 !important;
}

/* Chips — Token Label */
body .ui-chips-token-label {
  font-size: var(--fs-xs) !important;
  line-height: 1.4 !important;
}

/* Chips — Remove Icon */
body .ui-chips-token-icon {
  color: var(--text-tertiary) !important;
  font-size: 0.7rem !important;
  cursor: pointer !important;
  transition: color var(--duration) var(--ease) !important;
  margin-left: var(--s-2) !important;
}
body .ui-chips-token-icon:hover {
  color: var(--danger) !important;
}

/* Chips — Input Token (text input area) */
body .ui-chips .ui-chips-input-token {
  padding: 0 !important;
  margin: 0 !important;
  flex: 1 !important;
  min-width: 80px !important;
}
body .ui-chips .ui-chips-input-token input {
  font-family: var(--font-sans) !important;
  font-size: var(--fs-sm) !important;
  color: var(--text) !important;
  padding: var(--s-2) 0 !important;
  border: none !important;
  background: transparent !important;
  box-shadow: none !important;
  width: 100% !important;
}
body .ui-chips .ui-chips-input-token input::placeholder {
  color: var(--text-tertiary) !important;
}

/* Validation */
body .ui-inputtext.ng-touched.ng-invalid {
  border: 1px solid var(--danger);
}
.bandbee-validation-error {
  color: var(--danger);
  font-size: var(--fs-sm);
  margin-top: var(--s-4);
}

/* Inputs */
body .ui-inputtext {
  background-color: var(--input-bg) !important;
  border: 1px solid var(--border-strong) !important;
  color: var(--text) !important;
  border-radius: var(--radius-md) !important;
  font-family: var(--font-sans) !important;
  transition: all var(--duration) var(--ease) !important;
}

body .ui-inputtext::placeholder {
  color: var(--text-tertiary) !important;
}
body .ui-inputtext:focus {
  border-color: var(--primary) !important;
  box-shadow: 0 0 0 3px var(--accent-soft) !important;
}

/* Dropdowns */
body .ui-dropdown {
  background-color: var(--input-bg) !important;
  border: 1px solid var(--border-strong) !important;
  color: var(--text) !important;
  border-radius: var(--radius-md) !important;
}
body .ui-dropdown-panel {
  background-color: var(--surface) !important;
  border: 1px solid var(--border-strong) !important;
  border-radius: var(--radius-md) !important;
  box-shadow: var(--shadow-lg) !important;
}
body .ui-dropdown-item {
  color: var(--text) !important;
  transition: background var(--duration) var(--ease) !important;
}
body .ui-dropdown-item:hover {
  background-color: var(--surface-hover) !important;
}
body .ui-dropdown-item.ui-state-highlight {
  background-color: var(--accent-soft) !important;
  color: var(--primary) !important;
}
body .ui-dropdown-label {
  color: var(--text) !important;
}

/* Autocomplete */
body .ui-autocomplete-panel {
  background-color: var(--surface) !important;
  border: 1px solid var(--border-strong) !important;
  border-radius: var(--radius-md) !important;
  box-shadow: var(--shadow-lg) !important;
}
body .ui-autocomplete-list-item {
  color: var(--text) !important;
}
body .ui-autocomplete-list-item:hover {
  background-color: var(--surface-hover) !important;
}

/* Panels */
body .ui-panel {
  background-color: var(--bg-elevated) !important;
  border-radius: var(--radius-lg) !important;
  border: 1px solid var(--border) !important;
}
body .ui-panel .ui-panel-content {
  background-color: var(--bg-elevated) !important;
  color: var(--text) !important;
}
body .ui-panel .ui-panel-titlebar {
  background-color: var(--surface) !important;
  color: var(--text) !important;
  border-color: var(--border) !important;
}
/* Widget base */
body .ui-widget {
  font-family: var(--font-sans) !important;
  color: var(--text) !important;
}

/* Cards — need body prefix to beat PrimeNG's `body .ui-card` specificity */
body .ui-card,
body .ui-card.ui-widget-content {
  background-color: var(--bg-elevated) !important;
  color: var(--text) !important;
  border: 1px solid var(--border) !important;
  border-radius: var(--radius-sm) !important;
  box-shadow: var(--shadow-sm) !important;
}
body .ui-card .ui-card-title {
  color: var(--text) !important;
}
body .my-panel.ui-card .ui-card-title {
  color: var(--primary) !important;
}
body .ui-card .ui-card-content {
  color: var(--text) !important;
}
body .ui-widget-content {
  background-color: var(--bg-elevated) !important;
  color: var(--text) !important;
  border-color: var(--border) !important;
}

/* Tabs */
body .ui-tabview .ui-tabview-panels {
  background-color: var(--bg-elevated) !important;
  color: var(--text) !important;
}
body .ui-tabview .ui-tabview-nav li.ui-state-active a {
  color: var(--primary) !important;
}
body .ui-tabview .ui-tabview-nav li a {
  color: var(--text-secondary) !important;
  transition: color var(--duration) var(--ease) !important;
}
body .ui-tabview .ui-tabview-nav li a:hover {
  color: var(--text) !important;
}

/* Multiselect */
body .ui-multiselect {
  background-color: var(--input-bg) !important;
  border: 1px solid var(--border-strong) !important;
  color: var(--text) !important;
  border-radius: var(--radius-md) !important;
}
body .ui-multiselect-panel {
  background-color: var(--surface) !important;
  border-radius: var(--radius-md) !important;
  box-shadow: var(--shadow-lg) !important;
}
body .ui-multiselect-item {
  color: var(--text) !important;
}

/* Checkbox & Radio */
body .ui-chkbox .ui-chkbox-box.ui-state-active {
  background-color: var(--primary) !important;
  border-color: var(--primary) !important;
}
body .ui-radiobutton .ui-radiobutton-box.ui-state-active {
  border-color: var(--primary) !important;
}
body .ui-radiobutton .ui-radiobutton-box.ui-state-active .ui-radiobutton-icon {
  background-color: var(--primary) !important;
}

/* Listbox */
body .ui-listbox {
  background-color: var(--input-bg) !important;
  border: 1px solid var(--border-strong) !important;
  border-radius: var(--radius-md) !important;
}
body .ui-listbox .ui-listbox-item {
  color: var(--text) !important;
}
body .ui-listbox .ui-listbox-item.ui-state-highlight {
  background-color: var(--accent-soft) !important;
  color: var(--primary) !important;
}

/* Paginator */
body .ui-paginator {
  background-color: var(--surface) !important;
  border-color: var(--border) !important;
  color: var(--text) !important;
}
body .ui-widget-header {
  background-color: var(--surface) !important;
  border-color: var(--border) !important;
  color: var(--text) !important;
}
body .ui-paginator .ui-paginator-element {
  color: var(--text-secondary) !important;
}
body .ui-paginator .ui-paginator-element:hover {
  background-color: var(--surface-hover) !important;
  color: var(--text) !important;
}
body .ui-paginator-page.ui-state-active {
  background-color: var(--primary) !important;
  color: var(--primary-text) !important;
  border-radius: var(--radius-sm) !important;
}

/* Menu */
body .ui-menu {
  background-color: var(--bg-elevated) !important;
  border: 1px solid var(--border-strong) !important;
  border-radius: var(--radius-lg) !important;
  box-shadow: var(--shadow-lg) !important;
  padding: var(--s-4) 0 !important;
  min-width: 220px !important;
  opacity: 1 !important;
}
body .ui-submenu-header {
  background-color: transparent !important;
  color: var(--text-secondary) !important;
  font-size: var(--fs-xs) !important;
  font-weight: var(--fw-semibold) !important;
  text-transform: uppercase !important;
  letter-spacing: 0.06em !important;
  padding: var(--s-12) var(--s-16) var(--s-8) !important;
  border-bottom: 1px solid var(--border) !important;
  margin-bottom: var(--s-4) !important;
}
body .ui-menu .ui-menuitem-link {
  color: var(--text) !important;
  padding: var(--s-8) var(--s-16) !important;
  font-size: var(--fs-sm) !important;
  transition: background-color 200ms ease, color 200ms ease !important;
}
body .ui-menu .ui-menuitem-link:hover {
  background-color: var(--surface-hover) !important;
  color: var(--primary) !important;
}
body .ui-menu .ui-menuitem-icon {
  color: var(--text-tertiary) !important;
  width: 24px !important;
  text-align: center !important;
  margin-right: var(--s-8) !important;
  transition: color 200ms ease !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
}
body .ui-menu .ui-menuitem-link:hover .ui-menuitem-icon {
  color: var(--primary) !important;
}
body .ui-menu .ui-menuitem-text {
  color: inherit !important;
}

/* Tables */
body .ui-table-thead th {
  background-color: var(--surface) !important;
  color: var(--text-secondary) !important;
  border-color: var(--border) !important;
  font-size: var(--fs-xs) !important;
  text-transform: uppercase !important;
  letter-spacing: 0.05em !important;
  font-weight: var(--fw-semibold) !important;
}
body .ui-table-tbody td {
  background-color: var(--bg-elevated) !important;
  color: var(--text) !important;
  border-color: var(--border) !important;
}
body .ui-table-tbody tr:nth-child(even) td {
  background-color: var(--surface) !important;
}
body .ui-table-tbody tr:hover td {
  background-color: var(--surface-hover) !important;
}

/* Dialog */
body .ui-dialog {
  border-radius: var(--radius-lg) !important;
  border: 1px solid var(--border-strong) !important;
  box-shadow: var(--shadow-lg) !important;
  overflow: hidden !important;
  max-height: 90vh !important;
  display: flex !important;
  flex-direction: column !important;
}
body .ui-dialog .ui-dialog-titlebar {
  background-color: var(--surface) !important;
  color: var(--text) !important;
  border-color: var(--border) !important;
  padding: var(--s-16) var(--s-24) !important;
  flex-shrink: 0 !important;
}
body .ui-dialog .ui-dialog-titlebar .ui-dialog-title {
  font-size: var(--fs-lg) !important;
  font-weight: var(--fw-bold) !important;
  color: var(--text) !important;
}
body .ui-dialog .ui-dialog-titlebar-close {
  color: var(--text-tertiary) !important;
  border: none !important;
  background: none !important;
  transition: color var(--duration) var(--ease) !important;
}
body .ui-dialog .ui-dialog-titlebar-close:hover {
  color: var(--text) !important;
  background: none !important;
}
body .ui-dialog .ui-dialog-titlebar-close .ui-dialog-titlebar-icon {
  color: inherit !important;
}
body .ui-dialog .ui-dialog-content {
  background-color: var(--bg-elevated) !important;
  color: var(--text) !important;
  padding: var(--s-24) !important;
  flex: 1 1 auto !important;
  min-height: 0 !important;
  overflow-y: auto !important;
}
body .ui-dialog .ui-dialog-footer {
  background-color: var(--bg-elevated) !important;
  border-color: var(--border) !important;
  padding: var(--s-16) var(--s-24) !important;
  flex-shrink: 0 !important;
}
body .ui-dialog-mask {
  background: rgba(0, 0, 0, 0.6) !important;
}

/* Tooltip */
body .ui-tooltip .ui-tooltip-text {
  background-color: var(--surface) !important;
  color: var(--text) !important;
  border-radius: var(--radius-sm) !important;
  box-shadow: var(--shadow-md) !important;
}

/* OverlayPanel */
body .ui-overlaypanel {
  background-color: var(--surface) !important;
  color: var(--text) !important;
  border: 1px solid var(--border) !important;
  border-radius: var(--radius-md) !important;
  box-shadow: var(--shadow-lg) !important;
}

/* Accordion */
body .ui-accordion .ui-accordion-header a {
  background-color: var(--surface) !important;
  color: var(--text) !important;
  border-radius: var(--radius-md) !important;
  transition: all var(--duration) var(--ease) !important;
}
body .ui-accordion .ui-accordion-header.ui-state-active a {
  background-color: var(--primary) !important;
  color: var(--primary-text) !important;
}
body .ui-accordion .ui-accordion-content {
  background-color: var(--bg-elevated) !important;
  color: var(--text) !important;
}

/* Fieldset */
body .ui-fieldset {
  background-color: var(--bg-elevated) !important;
  border: 1px solid var(--border) !important;
  color: var(--text) !important;
  border-radius: var(--radius-md) !important;
}
body .ui-fieldset .ui-fieldset-legend {
  background-color: var(--surface) !important;
  color: var(--text) !important;
  border: 1px solid var(--border) !important;
  border-radius: var(--radius-sm) !important;
}

/* Calendar / Datepicker */
body .ui-datepicker {
  background-color: var(--surface) !important;
  color: var(--text) !important;
  border: 1px solid var(--border) !important;
  border-radius: var(--radius-md) !important;
  box-shadow: var(--shadow-lg) !important;
}
body .ui-datepicker .ui-datepicker-header {
  background-color: var(--surface-hover) !important;
  color: var(--text) !important;
}
body .ui-datepicker td a {
  color: var(--text) !important;
}
body .ui-datepicker td a.ui-state-active {
  background-color: var(--primary) !important;
  color: var(--primary-text) !important;
}

/* Buttons */
body .ui-button {
  background-color: var(--primary) !important;
  color: var(--primary-text) !important;
  border-color: var(--primary) !important;
  border-radius: var(--radius-full) !important;
  font-family: var(--font-sans) !important;
  transition: all var(--duration) var(--ease) !important;
}
body .ui-button:hover {
  background-color: var(--primary-hover) !important;
  border-color: var(--primary-hover) !important;
}
body .ui-button .ui-button-icon-left,
body .ui-button .ui-button-icon-right {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
}

/* Dropdown Trigger */
body .ui-dropdown-trigger {
  background-color: var(--input-bg) !important;
  color: var(--text-secondary) !important;
  border-color: var(--border) !important;
}

/* Native HTML Inputs (not covered by PrimeNG overrides) */
input:not([class*="ui-"]):not(.p-inputtext),
select:not([class*="ui-"]),
textarea:not([class*="ui-"]) {
  background-color: var(--input-bg) !important;
  color: var(--text) !important;
  border: 1px solid var(--border) !important;
  border-radius: var(--radius-sm) !important;
  padding: 0.429em 0.5em;
  font-family: var(--font-sans);
  transition: border-color var(--duration) var(--ease);
}
/* .input class overrides — ensures consistent styling for all form elements */
input.input, select.input, textarea.input {
  width: 100%;
  background-color: var(--input-bg) !important;
  color: var(--text) !important;
  border: 1px solid var(--border-strong) !important;
  border-radius: var(--radius-md) !important;
  padding: var(--s-12) var(--s-16) !important;
  font-family: var(--font-sans) !important;
  font-size: var(--fs-sm) !important;
}
input:not([class*="ui-"]):not(.p-inputtext):focus,
select:not([class*="ui-"]):focus,
textarea:not([class*="ui-"]):focus {
  border-color: var(--primary) !important;
  outline: none;
  box-shadow: 0 0 0 2px var(--accent-soft);
}
input:not([class*="ui-"]):not(.p-inputtext)::placeholder {
  color: var(--text-tertiary);
}

/* Inputs inside inputgroups — no own border/radius (handled by wrapper) */
body .ui-inputgroup input:not(.noop),
body .ui-inputgroup input.input,
body .ui-inputgroup .ui-inputtext,
.input-wrapper input {
  border: none !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  outline: none !important;
}

/* Quill Editor — fill container height so clicks anywhere activate the editor */
body .ui-editor-container .ui-editor-content {
  display: flex !important;
  flex-direction: column !important;
}
body .ui-editor-container .ui-editor-content .ql-editor {
  flex: 1 1 auto !important;
}

/* Quill Editor (used in gigs, rehearsals, etc.) */
body .ui-editor-container .ui-editor-content .ql-editor {
  background-color: var(--input-bg) !important;
  color: var(--text) !important;
}
body .ui-editor-container .ql-container.ql-snow {
  border-color: var(--border) !important;
  background-color: var(--input-bg) !important;
}
body .ui-editor-container .ql-toolbar.ql-snow {
  border-color: var(--border) !important;
  background-color: var(--surface) !important;
}
body .ui-editor-container .ql-toolbar .ql-stroke {
  stroke: var(--text-secondary) !important;
}
body .ui-editor-container .ql-toolbar .ql-fill {
  fill: var(--text-secondary) !important;
}
body .ui-editor-container .ql-toolbar .ql-picker-label {
  color: var(--text-secondary) !important;
}
body .ui-editor-container .ui-editor-content {
  background-color: var(--input-bg) !important;
}
body .ui-editor-container {
  border-color: var(--border) !important;
}

/* InputSwitch (Toggle) */
body .ui-inputswitch {
  background: var(--border-strong) !important;
  border-radius: var(--radius-full) !important;
}
body .ui-inputswitch.ui-inputswitch-checked {
  background: var(--primary) !important;
}
body .ui-inputswitch .ui-inputswitch-slider {
  background: var(--border-strong) !important;
  border-radius: var(--radius-full) !important;
  transition: background var(--duration) var(--ease) !important;
}
body .ui-inputswitch.ui-inputswitch-checked .ui-inputswitch-slider {
  background: var(--primary) !important;
}
body .ui-inputswitch .ui-inputswitch-slider::before {
  background: #ffffff !important;
}

/* DataView (list views) */
body .ui-dataview {
  background-color: transparent !important;
  border: none !important;
}
body .ui-dataview .ui-dataview-header {
  background-color: var(--surface) !important;
  border-color: var(--border) !important;
  color: var(--text) !important;
  border-radius: var(--radius-md) var(--radius-md) 0 0 !important;
  padding: var(--s-12) var(--s-16) !important;
}
body .ui-dataview .ui-dataview-content {
  background-color: transparent !important;
  border-color: var(--border) !important;
  color: var(--text) !important;
}
body .ui-dataview .ui-dataview-emptymessage {
  color: var(--text-tertiary) !important;
  padding: var(--s-24) !important;
}

/* Quill Editor — Picker Dropdowns */
body .ui-editor-container .ql-toolbar .ql-picker-options {
  background-color: var(--surface) !important;
  border: 1px solid var(--border-strong) !important;
  border-radius: var(--radius-sm) !important;
  box-shadow: var(--shadow-lg) !important;
}
body .ui-editor-container .ql-toolbar .ql-picker-item {
  color: var(--text) !important;
}
body .ui-editor-container .ql-toolbar .ql-picker-item:hover {
  color: var(--primary) !important;
}
body .ui-editor-container .ql-toolbar button:hover .ql-stroke {
  stroke: var(--primary) !important;
}
body .ui-editor-container .ql-toolbar button:hover .ql-fill {
  fill: var(--primary) !important;
}
body .ui-editor-container .ql-toolbar button.ql-active .ql-stroke {
  stroke: var(--primary) !important;
}
body .ui-editor-container .ql-toolbar button.ql-active .ql-fill {
  fill: var(--primary) !important;
}
body .ui-editor-container .ql-snow .ql-picker.ql-expanded .ql-picker-label {
  color: var(--primary) !important;
  border-color: var(--border-strong) !important;
}

/* Quill Editor — Placeholder text */
body .ui-editor-container .ql-editor.ql-blank::before {
  color: var(--text-tertiary) !important;
  font-style: italic;
}

/* Read-only Quill Editor — transparent bg for editor-text list display */
body .ui-editor-container .ql-container.ql-snow.ql-disabled {
  background-color: transparent !important;
  border-color: transparent !important;
  border: none !important;
}
body .ui-editor-container .ql-container.ql-snow.ql-disabled .ql-editor {
  background-color: transparent !important;
  min-height: auto !important;
  padding: var(--s-4) 0 !important;
  color: var(--text-secondary) !important;
  font-size: var(--fs-sm) !important;
}

/* ScrollPanel */
body .ui-scrollpanel-bar {
  background-color: var(--text-tertiary) !important;
  border-radius: var(--radius-full) !important;
}

/* ConfirmDialog */
body .ui-confirmdialog {
  border-radius: var(--radius-lg) !important;
  overflow: hidden;
}

/* ============================================================
   FILE UPLOAD (PrimeNG p-fileUpload)
   ============================================================ */

/* Advanced mode — toolbar bar */
body .ui-fileupload .ui-fileupload-buttonbar {
  background: var(--surface) !important;
  border: 1px solid var(--border) !important;
  border-radius: var(--radius-md) var(--radius-md) 0 0 !important;
  padding: var(--s-12) var(--s-16) !important;
  display: flex !important;
  gap: var(--s-8) !important;
  align-items: center !important;
}

/* Content / drop zone */
body .ui-fileupload .ui-fileupload-content {
  background: var(--bg-elevated) !important;
  border: 1px solid var(--border) !important;
  border-top: none !important;
  border-radius: 0 0 var(--radius-md) var(--radius-md) !important;
  padding: var(--s-16) !important;
  color: var(--text-secondary) !important;
}

/* Choose button — primary style */
body .ui-fileupload .ui-fileupload-choose {
  background: var(--primary) !important;
  color: var(--primary-text) !important;
  border-color: var(--primary) !important;
  border-radius: var(--radius-full) !important;
}
body .ui-fileupload .ui-fileupload-choose:hover {
  background: var(--primary-hover) !important;
  border-color: var(--primary-hover) !important;
  box-shadow: var(--shadow-glow) !important;
}

/* Upload & Cancel buttons — secondary style */
body .ui-fileupload .ui-fileupload-buttonbar .ui-button:not(.ui-fileupload-choose) {
  background: var(--accent-soft) !important;
  color: var(--text) !important;
  border: 1px solid var(--border-strong) !important;
  border-radius: var(--radius-full) !important;
}
body .ui-fileupload .ui-fileupload-buttonbar .ui-button:not(.ui-fileupload-choose):hover {
  background: var(--surface-hover) !important;
  border-color: var(--primary) !important;
  color: var(--text) !important;
}

/* Basic mode — single choose button */
body .ui-fileupload-choose.ui-button {
  background: var(--primary) !important;
  color: var(--primary-text) !important;
  border-color: var(--primary) !important;
  border-radius: var(--radius-full) !important;
}
body .ui-fileupload-choose.ui-button:hover {
  background: var(--primary-hover) !important;
  border-color: var(--primary-hover) !important;
  box-shadow: var(--shadow-glow) !important;
}

/* File row in upload queue */
body .ui-fileupload .ui-fileupload-row {
  color: var(--text) !important;
  border-bottom: 1px solid var(--border) !important;
}
body .ui-fileupload .ui-fileupload-row > div {
  padding: var(--s-8) var(--s-12) !important;
}

/* ============================================================
   FULLCALENDAR OVERRIDES
   Base theming — detailed overrides in full-calendar.component.css
   ============================================================ */
.fc-center h2 {
  background: unset !important;
  -webkit-background-clip: unset !important;
  -webkit-text-fill-color: unset !important;
  color: var(--text) !important;
  padding: 0 !important;
}

.fc-unthemed td,
.fc-unthemed th {
  border-color: var(--border) !important;
}

/* ============================================================
   FORM GRID LAYOUT (Detail Forms — ui-g grid labels)
   ============================================================ */
body .ui-g label {
  color: var(--text-secondary) !important;
  font-size: var(--fs-sm);
  font-weight: var(--fw-medium);
}

/* ============================================================
   DETAIL FORM LAYOUT (new form-group pattern)
   ============================================================ */
.detail-form {
  display: flex;
  flex-direction: column;
  gap: var(--s-16);
  max-width: 800px;
  margin-inline: auto;
}

.bb-panel-body > .detail-form ~ * {
  display: block;
  max-width: 800px;
  margin-inline: auto;
}

.detail-form .form-group {
  display: flex;
  flex-direction: column;
  gap: var(--s-4);
}

.detail-form .form-group > label {
  font-family: var(--font-sans);
  font-size: var(--fs-sm);
  font-weight: var(--fw-medium);
  color: var(--text-secondary);
}

.detail-form .form-row {
  display: flex;
  gap: var(--s-16);
}

.detail-form .form-row > * {
  flex: 1;
  min-width: 0;
}

.detail-form .form-row-address {
  display: flex;
  gap: var(--s-8);
}

.detail-form .form-row-address input:first-child {
  flex: 0 0 60px;
}

.detail-form .form-row-address input:nth-child(2) {
  flex: 0 0 80px;
}

.detail-form .form-row-address input:last-child {
  flex: 1;
}

.detail-form .invitation-actions {
  display: flex;
  gap: var(--s-8);
}

.detail-form .invitation-actions .btn {
  flex: 1;
}

.detail-form .info-text {
  font-size: var(--fs-sm);
  color: var(--text-secondary);
  line-height: var(--lh-relaxed);
}

.detail-form .info-text ul {
  padding-left: var(--s-24);
  margin: var(--s-8) 0;
}

.detail-form .info-text li {
  margin-bottom: var(--s-4);
}

bandbee-multi-file-upload {
  display: block;
  margin-top: var(--s-16);
}

@media (max-width: 480px) {
  .bb-panel-body { padding: var(--s-12); }

  .detail-form .form-row,
  .detail-form .invitation-actions {
    flex-direction: column;
  }

  .detail-form .form-row-address {
    flex-direction: column;
  }

  .detail-form .form-row-address input:first-child,
  .detail-form .form-row-address input:nth-child(2) {
    flex: 1;
  }
}

/* ============================================================
   LAYOUT HELPERS
   ============================================================ */
.containerDashboard {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr 1fr;
  grid-column-gap: var(--s-24);
  grid-row-gap: var(--s-24);
}

.videoDashboard {
  grid-template-columns: 1fr 1fr;
  display: grid;
  grid-column-gap: var(--s-12);
  grid-row-gap: var(--s-16);
}

.containerdropdown {
  display: flex;
  flex-direction: row;
  justify-content: flex-start;
  align-items: center;
  gap: var(--s-4);
  width: 100%;
}
.containerdropdown select.input,
.containerdropdown .ui-dropdown {
  flex: 1;
  min-width: 0;
}
.containerdropdown button.ui-button,
.containerdropdown .btn-icon {
  flex-grow: 0 !important;
  flex-shrink: 0 !important;
  width: 42px !important;
  min-width: 42px !important;
  height: 42px !important;
  padding: 0 !important;
  background: var(--surface-hover) !important;
  border: 1px solid var(--border-strong) !important;
  border-radius: var(--radius-sm) !important;
  color: var(--text) !important;
  font-size: var(--fs-base) !important;
  transition: all var(--duration) var(--ease) !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
}
.containerdropdown button.ui-button .ui-button-text {
  display: none !important;
}
.containerdropdown button.ui-button .ui-button-icon-left {
  margin: 0 !important;
  position: static !important;
}
.containerdropdown button.ui-button:hover,
.containerdropdown .btn-icon:hover {
  background: var(--surface-hover) !important;
  border-color: var(--primary) !important;
  color: var(--primary) !important;
}
.containerdropdown button.ui-button .mso-delete,
.containerdropdown .btn-icon .mso-delete {
  color: inherit !important;
}
.containerdropdown button.ui-button:hover .mso-delete,
.containerdropdown .btn-icon:hover .mso-delete {
  color: var(--danger) !important;
}
.containerdropdown button.ui-button:has(.mso-delete):hover,
.containerdropdown .btn-icon:has(.mso-delete):hover {
  border-color: var(--danger) !important;
  color: var(--danger) !important;
}
.containerdropdown button.ui-button:active,
.containerdropdown .btn-icon:active {
  transform: scale(0.95);
}

.crudItems {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.selected {
  border-radius: var(--radius-sm);
  font-family: var(--font-sans);
  color: #fff;
  background: var(--success);
}

/* ============================================================
   RESPONSIVE
   ============================================================ */
@media all and (max-width: 1500px) {
  .containerDashboard {
    grid-template-columns: 1fr 1fr 1fr;
  }
}

@media all and (max-width: 1200px) {
  .containerDashboard {
    grid-template-columns: 1fr 1fr;
  }
  .videoDashboard {
    grid-template-columns: 1fr;
  }
}

@media all and (max-width: 720px) {
  .containerDashboard {
    grid-template-columns: 1fr;
    grid-column-gap: var(--s-12);
    grid-row-gap: var(--s-16);
  }
}

@media all and (max-width: 640px) {
  h4.crudItems {
    padding: 1px;
  }
  h2 {
    font-size: var(--fs-base);
    margin: 0;
  }
  .crudItems {
    flex-direction: column;
    gap: var(--s-4);
  }
  .crudItems span {
    font-size: var(--fs-lg);
  }
  .crudItems bandbee-crud-action {
    flex-wrap: nowrap;
    justify-content: center;
    max-width: 100%;
  }
  .ui-panel-titlebar {
    padding: 0 !important;
  }
}

/* ============================================================
   SECTION HEADINGS
   ============================================================ */
.bb-section-heading {
  display: flex;
  align-items: center;
  gap: var(--s-8);
  font-size: var(--fs-sm);
  font-weight: var(--fw-semibold);
  color: var(--primary);
  text-transform: uppercase;
  letter-spacing: 0.08em;
  padding: var(--s-16) 0 var(--s-8);
}
.bb-section-heading::before {
  content: '';
  width: 24px;
  height: 2px;
  background: var(--primary);
}

/* ============================================================
   ANIMATIONS
   ============================================================ */
.fade-in {
  opacity: 0; transform: translateY(20px);
  transition: opacity 0.6s var(--ease), transform 0.6s var(--ease);
}
.fade-in.visible { opacity: 1; transform: translateY(0); }

/* ============================================================
   SKELETON LOADER (Infinity Scroll)
   ============================================================ */
.skeleton-rows {
  display: flex;
  flex-direction: column;
  gap: var(--s-8);
  padding: var(--s-16);
}
.skeleton-row {
  height: 48px;
  border-radius: var(--r-sm);
  background: linear-gradient(90deg, var(--surface) 25%, var(--surface-hover) 50%, var(--surface) 75%);
  background-size: 200% 100%;
  animation: skeleton-shimmer 1.5s ease-in-out infinite;
}
@keyframes skeleton-shimmer {
  0%   { background-position: 200% 0; }
  100% { background-position: -200% 0; }
}

/* ============================================================
   EMPTY MESSAGE (List Views)
   ============================================================ */
.empty-message {
  text-align: center;
  padding: var(--s-16) 0;
  color: var(--text-secondary);
}

/* ============================================================
   LIST COUNTER + END MARKER (Infinity Scroll)
   ============================================================ */
.list-counter {
  text-align: center;
  padding: var(--s-12) 0;
  font-size: var(--fs-xs);
  color: var(--text-tertiary);
}
.list-end-marker {
  display: flex;
  align-items: center;
  gap: var(--s-12);
  padding: var(--s-16) var(--s-16);
  font-size: var(--fs-xs);
  color: var(--text-tertiary);
  white-space: nowrap;
}
.list-end-marker::before,
.list-end-marker::after {
  content: '';
  flex: 1;
  height: 1px;
  background: var(--border);
}