/* Theme toggle icon visibility */
.icon-sun,
.icon-moon {
  width: 16px;
  height: 16px;
  transition: opacity var(--transition), transform var(--transition);
}

/* Dark theme (default) — show moon, hide sun */
.icon-sun { display: none; }
.icon-moon { display: block; }

/* Light theme — show sun, hide moon */
[data-theme="light"] .icon-sun { display: block; }
[data-theme="light"] .icon-moon { display: none; }

/* Light theme component overrides */
[data-theme="light"] .sidebar {
  box-shadow: 2px 0 12px rgba(0, 0, 0, 0.06);
}

[data-theme="light"] .table thead {
  background: #f9f9f9;
}

[data-theme="light"] .form-input,
[data-theme="light"] .form-select,
[data-theme="light"] .form-textarea {
  background: #ffffff;
}

[data-theme="light"] .form-input:focus,
[data-theme="light"] .form-select:focus,
[data-theme="light"] .form-textarea:focus {
  background: #ffffff;
}

[data-theme="light"] .table-search {
  background: #ffffff;
}

[data-theme="light"] .modal {
  background: #ffffff;
}

[data-theme="light"] .auth-card {
  background: #ffffff;
  box-shadow: 0 8px 40px rgba(0, 0, 0, 0.1);
}

[data-theme="light"] .pending-card {
  background: #ffffff;
  box-shadow: 0 8px 40px rgba(0, 0, 0, 0.1);
}

[data-theme="light"] .toast {
  background: #ffffff;
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.12);
}

[data-theme="light"] .stat-card {
  background: #ffffff;
}

[data-theme="light"] .card {
  background: #ffffff;
}

[data-theme="light"] .table-wrapper {
  background: #ffffff;
}

[data-theme="light"] .form-select {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%23999999' stroke-width='2'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
}

[data-theme="light"] .topbar {
  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.06);
}

/* Smooth theme transition on everything */
*,
*::before,
*::after {
  transition:
    background-color var(--transition-slow),
    border-color var(--transition-slow),
    color var(--transition-slow),
    box-shadow var(--transition-slow);
}

/* Exclude elements where transition causes flicker */
.btn,
.nav-item,
.row-action-btn,
.theme-toggle,
.modal-close,
.toast {
  transition:
    background-color var(--transition),
    border-color var(--transition),
    color var(--transition),
    box-shadow var(--transition),
    opacity var(--transition),
    transform var(--transition);
}