/* Custom Theme Enhancements for Yayasan Al-Hasanah */

/* Scrollbar Customization */
::-webkit-scrollbar {
  width: 8px;
  height: 8px;
}

::-webkit-scrollbar-track {
  background: var(--color-bg-secondary);
}

::-webkit-scrollbar-thumb {
  background: var(--color-neutral-light);
  border-radius: var(--radius-full);
}

::-webkit-scrollbar-thumb:hover {
  background: var(--color-neutral-gray);
}

/* Glassmorphism Styles */
.glass-panel {
  background: rgba(255, 255, 255, 0.7);
  backdrop-filter: blur(12px);
  border: 1px solid rgba(255, 255, 255, 0.3);
}

/* Gradients */
.bg-gradient-primary {
  background: linear-gradient(135deg, var(--color-accent-teal) 0%, var(--color-accent-teal-dark) 100%);
  color: var(--color-white);
}

.bg-gradient-accent {
  background: linear-gradient(135deg, var(--color-primary-cyan) 0%, var(--color-primary-cyan-dark) 100%);
  color: var(--color-white);
}

/* Interactive elements */
.hover-lift {
  transition: transform var(--transition-normal), box-shadow var(--transition-normal);
}

.hover-lift:hover {
  transform: translateY(-4px);
  box-shadow: var(--shadow-lg);
}

/* Custom Profile Header Section */
.profile-menu {
  position: relative;
  display: inline-block;
}

.profile-trigger {
  display: flex;
  align-items: center;
  gap: var(--spacing-sm);
  cursor: pointer;
  padding: var(--spacing-xs) var(--spacing-sm);
  border-radius: var(--radius-md);
  transition: background var(--transition-fast);
}

.profile-trigger:hover {
  background: var(--color-bg-tertiary);
}

.profile-avatar {
  width: 32px;
  height: 32px;
  border-radius: var(--radius-full);
  background: var(--color-primary-cyan-dark);
  color: var(--color-white);
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: var(--font-weight-bold);
  font-size: var(--font-size-sm);
}

.profile-dropdown {
  position: absolute;
  top: 100%;
  right: 0;
  width: 200px;
  background: var(--color-white);
  border: 1px solid var(--color-neutral-light);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-lg);
  display: none;
  z-index: 100;
  margin-top: var(--spacing-xs);
  overflow: hidden;
}

.profile-dropdown.show {
  display: block;
}

.profile-dropdown-item {
  display: flex;
  align-items: center;
  gap: var(--spacing-sm);
  padding: var(--spacing-sm) var(--spacing-md);
  font-size: var(--font-size-sm);
  color: var(--color-dark);
  transition: background var(--transition-fast);
}

.profile-dropdown-item:hover {
  background: var(--color-bg-tertiary);
}

.profile-dropdown-divider {
  height: 1px;
  background: var(--color-neutral-light);
}

/* Dashboard Summary Cards Style */
.dash-card-cyan {
  border-left-color: var(--color-primary-cyan);
}
.dash-card-teal {
  border-left-color: var(--color-accent-teal);
}
.dash-card-success {
  border-left-color: var(--color-success);
}
.dash-card-danger {
  border-left-color: var(--color-danger);
}
.dash-card-warning {
  border-left-color: var(--color-warning);
}

/* Empty State Styling */
.empty-state {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: var(--spacing-2xl) var(--spacing-md);
  text-align: center;
}

.empty-state-icon {
  font-size: var(--font-size-3xl);
  color: var(--color-neutral-gray);
  margin-bottom: var(--spacing-md);
}

.empty-state-title {
  font-weight: var(--font-weight-semibold);
  margin-bottom: var(--spacing-xs);
}

.empty-state-text {
  color: var(--color-neutral-gray);
  max-width: 400px;
}

/* =============================================================
   Theme Toggle & Dark Mode Support
   ============================================================= */

/* Theme Toggle Button */
.theme-toggle-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 38px;
  height: 38px;
  border-radius: var(--radius-full);
  color: var(--color-neutral-gray);
  background: var(--color-bg-secondary);
  border: 1px solid var(--color-neutral-light);
  cursor: pointer;
  transition: all var(--transition-fast);
}

.theme-toggle-btn:hover {
  color: var(--color-primary-cyan-dark);
  background: var(--color-bg-tertiary);
  transform: scale(1.05);
}

.theme-icon-sun {
  display: none;
}
.theme-icon-moon {
  display: block;
}

[data-theme="dark"] .theme-icon-sun {
  display: block;
  color: var(--color-warning);
}
[data-theme="dark"] .theme-icon-moon {
  display: none;
}

/* Dark Mode Variable Overrides */
[data-theme="dark"] {
  --color-dark: #E2E8F0;            /* Body text color */
  --color-neutral-dark: #F8FAFC;    /* Heading text color */
  --color-bg-primary: #0F172A;      /* Main card content bg */
  --color-bg-secondary: #0b0f19;    /* Page background */
  --color-bg-tertiary: #1E293B;     /* Sub-backgrounds, borders */
  --color-white: #1E293B;           /* Cards, dropdowns, inputs */
  --color-neutral-light: #334155;   /* Borders, dividers */
  --color-neutral-gray: #94A3B8;    /* Muted labels & descriptions */

  /* Dark mode semantic overlays */
  --color-success-bg: rgba(16, 185, 129, 0.15);
  --color-warning-bg: rgba(245, 158, 11, 0.15);
  --color-danger-bg: rgba(239, 68, 68, 0.15);
  --color-info-bg: rgba(59, 130, 246, 0.15);
}

/* Specific component overrides for Dark Mode */
[data-theme="dark"] .app-header {
  background: #152033;
}

[data-theme="dark"] .profile-dropdown {
  background: #152033;
}

[data-theme="dark"] .profile-dropdown-item {
  color: #E2E8F0;
}

[data-theme="dark"] .profile-dropdown-item:hover {
  background: #1e2d46;
}

[data-theme="dark"] .auth-card {
  background: rgba(30, 41, 59, 0.95);
  border-color: rgba(255, 255, 255, 0.08);
}

[data-theme="dark"] .glass-panel {
  background: rgba(15, 23, 42, 0.7);
  border-color: rgba(255, 255, 255, 0.08);
}

[data-theme="dark"] .card-header,
[data-theme="dark"] .card-footer {
  background: #162235;
}

[data-theme="dark"] .modal-header,
[data-theme="dark"] .modal-footer {
  background: #162235;
}

[data-theme="dark"] .table-responsive {
  border-color: var(--color-neutral-light);
}

[data-theme="dark"] .table th {
  background: #162235;
  color: var(--color-neutral-gray);
  border-bottom-color: var(--color-neutral-light);
}

[data-theme="dark"] .table td {
  border-bottom-color: var(--color-neutral-light);
  color: var(--color-dark);
}

[data-theme="dark"] .tabs-nav {
  border-bottom-color: var(--color-neutral-light);
}

[data-theme="dark"] .tree-content {
  border-color: var(--color-neutral-light);
}

[data-theme="dark"] .tree-content:hover {
  border-color: var(--color-primary-cyan);
}

[data-theme="dark"] .demo-toggle-btn {
  background: rgba(74, 207, 215, 0.08);
}

[data-theme="dark"] .demo-toggle-btn:hover {
  background: rgba(74, 207, 215, 0.12);
}

[data-theme="dark"] .demo-tab-btn:hover {
  background: var(--color-bg-tertiary);
}

[data-theme="dark"] .demo-account-item {
  border-color: var(--color-neutral-light);
  background: var(--color-bg-primary);
}

[data-theme="dark"] .demo-account-item:hover {
  border-color: var(--color-primary-cyan);
  background: var(--color-bg-tertiary);
}

[data-theme="dark"] ::-webkit-scrollbar-thumb {
  background: #334155;
}

[data-theme="dark"] ::-webkit-scrollbar-thumb:hover {
  background: #475569;
}