/* ==========================================================================
   Features Temporary Bridge
   Remaining: shared tab animation + global dark-mode overrides for unmigrated pages.
   Do NOT add new feature rules here — co-locate beside the PHP component.
   ========================================================================== */

@keyframes fadeIn {
  from {
    opacity: 0;
    transform: translateY(10px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.animate-fade-in {
  animation: fadeIn 0.3s ease-in-out;
}

/* ==========================================================================
   DARK MODE STYLES (feature / transitional overrides)
   Foundation dark tokens live in tokens.css; do not re-add html { transition }.
   ========================================================================== */

/* Header in dark mode */
[data-theme="dark"] #header {
  background-color: var(--surface-raised) !important;
  border-color: var(--border-default) !important;
  color: var(--text-primary) !important;
}

[data-theme="dark"] #header .text-gray-800,
[data-theme="dark"] #header .text-gray-600 {
  color: var(--text-primary) !important;
}

[data-theme="dark"] #header button:hover,
[data-theme="dark"] #header .hover\\:bg-gray-100:hover {
  background-color: var(--border-default) !important;
}

[data-theme="dark"] #header .bg-gray-100 {
  background-color: var(--border-default) !important;
}

/* Sidebar in dark mode */
[data-theme="dark"] #sidebar,
[data-theme="dark"] aside {
  background-color: var(--surface-raised) !important;
  border-color: var(--border-default) !important;
}

[data-theme="dark"] #sidebar a,
[data-theme="dark"] #sidebar button {
  color: var(--text-secondary) !important;
}

[data-theme="dark"] #sidebar a:hover,
[data-theme="dark"] #sidebar button:hover {
  background-color: var(--border-default) !important;
  color: var(--text-primary) !important;
}

[data-theme="dark"] #sidebar a.active,
[data-theme="dark"] #sidebar button.active {
  background-color: var(--surface-selected) !important;
  color: var(--action-primary) !important;
}

/* Main content area */
[data-theme="dark"] main,
[data-theme="dark"] .main-content,
[data-theme="dark"] #main-content {
  background-color: var(--surface-default) !important;
}

/* Cards and panels */
[data-theme="dark"] .card,
[data-theme="dark"] .panel,
[data-theme="dark"] .filter-panel,
[data-theme="dark"] .results-panel {
  background-color: var(--surface-raised) !important;
  border-color: var(--border-default) !important;
  box-shadow: var(--elevation-1) !important;
}

[data-theme="dark"] .card-header,
[data-theme="dark"] .card-footer {
  border-color: var(--border-default) !important;
}

/* Page components */
[data-theme="dark"] .page-header {
  border-color: var(--border-default) !important;
}

[data-theme="dark"] .page-title {
  color: var(--text-primary) !important;
}

[data-theme="dark"] .page-subtitle,
[data-theme="dark"] .section-title {
  color: var(--text-secondary) !important;
}

/* Form inputs */
[data-theme="dark"] input[type="text"],
[data-theme="dark"] input[type="search"],
[data-theme="dark"] input[type="email"],
[data-theme="dark"] input[type="password"],
[data-theme="dark"] input[type="number"],
[data-theme="dark"] input[type="date"],
[data-theme="dark"] select,
[data-theme="dark"] textarea,
[data-theme="dark"] .input-base {
  background-color: var(--surface-muted) !important;
  border-color: var(--border-default) !important;
  color: var(--text-primary) !important;
}

[data-theme="dark"] input::placeholder,
[data-theme="dark"] textarea::placeholder {
  color: var(--text-disabled) !important;
}

[data-theme="dark"] input:focus,
[data-theme="dark"] select:focus,
[data-theme="dark"] textarea:focus {
  border-color: var(--border-selected) !important;
  box-shadow: 0 0 0 3px rgb(var(--color-focus-ring-rgb) / 0.2) !important;
}

/* Buttons */
[data-theme="dark"] .btn-secondary {
  background-color: var(--surface-raised) !important;
  border-color: var(--border-default) !important;
  color: var(--text-primary) !important;
}

[data-theme="dark"] .btn-secondary:hover {
  background-color: var(--border-default) !important;
}

[data-theme="dark"] .btn-ghost:hover {
  background-color: var(--border-default) !important;
}

/* Tables */
[data-theme="dark"] table {
  background-color: var(--surface-raised) !important;
}

[data-theme="dark"] th {
  background-color: var(--surface-muted) !important;
  color: var(--text-primary) !important;
  border-color: var(--border-default) !important;
}

[data-theme="dark"] td {
  border-color: var(--border-default) !important;
  color: var(--text-primary) !important;
}

[data-theme="dark"] tr:hover {
  background-color: var(--surface-muted) !important;
}

[data-theme="dark"] tbody tr:nth-child(even) {
  background-color: var(--surface-muted) !important;
}

/* Dropdowns and menus */
[data-theme="dark"] #bucket-dropdown,
[data-theme="dark"] #notification-dropdown,
[data-theme="dark"] #user-menu,
[data-theme="dark"] .dropdown-menu {
  background-color: var(--surface-raised) !important;
  border-color: var(--border-default) !important;
  box-shadow: var(--elevation-3) !important;
}

[data-theme="dark"] #bucket-dropdown .border-border,
[data-theme="dark"] #notification-dropdown .border-border,
[data-theme="dark"] #user-menu .border-border {
  border-color: var(--border-default) !important;
}

[data-theme="dark"] #user-menu a,
[data-theme="dark"] #user-menu button,
[data-theme="dark"] .dropdown-menu a,
[data-theme="dark"] .dropdown-menu button {
  color: var(--text-primary) !important;
}

[data-theme="dark"] #user-menu a:hover,
[data-theme="dark"] #user-menu button:hover,
[data-theme="dark"] .dropdown-menu a:hover,
[data-theme="dark"] .dropdown-menu button:hover {
  background-color: var(--border-default) !important;
}

/* Text colors */
[data-theme="dark"] .text-text-primary,
[data-theme="dark"] .text-gray-900,
[data-theme="dark"] .text-gray-800,
[data-theme="dark"] .text-gray-700 {
  color: var(--text-primary) !important;
}

[data-theme="dark"] .text-text-secondary,
[data-theme="dark"] .text-gray-600,
[data-theme="dark"] .text-gray-500 {
  color: var(--text-secondary) !important;
}

[data-theme="dark"] .text-text-tertiary,
[data-theme="dark"] .text-gray-400 {
  color: var(--text-muted) !important;
}

/* Background colors */
[data-theme="dark"] .bg-white,
[data-theme="dark"] .bg-surface {
  background-color: var(--surface-raised) !important;
}

[data-theme="dark"] .bg-background,
[data-theme="dark"] .bg-gray-50 {
  background-color: var(--surface-default) !important;
}

[data-theme="dark"] .bg-background-alt,
[data-theme="dark"] .bg-gray-100 {
  background-color: var(--surface-muted) !important;
}

[data-theme="dark"] .bg-background-alt-strong {
  background-color: var(--surface-sidebar) !important;
}

[data-theme="dark"] .bg-background-alt-strong-90 {
  background-color: rgb(var(--color-surface-sidebar-rgb) / 0.9) !important;
}

[data-theme="dark"] .hover\:bg-background-alt:hover {
  background-color: var(--surface-hover) !important;
}

[data-theme="dark"] .bg-neutral-50,
[data-theme="dark"] .bg-neutral-100 {
  background-color: var(--surface-muted) !important;
}

/* Border colors */
[data-theme="dark"] .border-border,
[data-theme="dark"] .border-gray-200,
[data-theme="dark"] .border-gray-300,
[data-theme="dark"] .border-neutral-200 {
  border-color: var(--border-default) !important;
}

/* Scrollbar dark mode */
[data-theme="dark"] ::-webkit-scrollbar {
  width: 8px;
  height: 8px;
}

[data-theme="dark"] ::-webkit-scrollbar-track {
  background: var(--surface-muted);
}

[data-theme="dark"] ::-webkit-scrollbar-thumb {
  background: var(--border-control);
  border-radius: 4px;
}

[data-theme="dark"] ::-webkit-scrollbar-thumb:hover {
  background: var(--text-disabled);
}

/* Search results and loading states */
[data-theme="dark"] .search-results-container,
[data-theme="dark"] #search-results {
  background-color: var(--surface-raised) !important;
}

[data-theme="dark"] .loading-overlay {
  background-color: rgb(var(--color-surface-default-rgb) / 0.8) !important;
}

[data-theme="dark"] #map-loading {
  background-color: var(--surface-default) !important;
  color: var(--text-primary) !important;
}

/* Modals - overlay should be semi-transparent, not solid */
[data-theme="dark"] .modal-backdrop {
  background-color: var(--overlay) !important;
  backdrop-filter: blur(2px);
}

/* Modal content panels (not the overlay) */
[data-theme="dark"] .modal-content,
[data-theme="dark"] .modal-panel,
[data-theme="dark"] [role="dialog"] > div > div.relative {
  background-color: var(--surface-raised) !important;
  border-color: var(--border-default) !important;
}

/* Badges and tags */
[data-theme="dark"] .badge,
[data-theme="dark"] .tag {
  background-color: var(--border-default) !important;
  color: var(--text-primary) !important;
}

/* Tooltips */
[data-theme="dark"] [data-tooltip]::after,
[data-theme="dark"] .tooltip {
  background-color: var(--surface-raised) !important;
  color: var(--text-primary) !important;
  border-color: var(--border-default) !important;
}

/* Empty state */
[data-theme="dark"] .empty-state-overlay {
  background-color: rgb(var(--color-surface-default-rgb) / 0.95) !important;
}

/* Results count display */
[data-theme="dark"] .results-count {
  color: var(--text-secondary) !important;
}

/* Filter group labels */
[data-theme="dark"] .filter-group label {
  color: var(--text-secondary) !important;
}

/* Hover states for interactive elements */
[data-theme="dark"] .hover\\:bg-gray-50:hover,
[data-theme="dark"] .hover\\:bg-neutral-50:hover {
  background-color: var(--surface-muted) !important;
}

/* Theme toggle layout is owned by .icon-btn in assets/css/shell-chrome.css.
   Do not override hit-box, radius, or absolute offset here — that misaligned
   the sun/moon vs mail/shield. Icon show/hide lives in shell-chrome.css. */

/* Mobile navigation dark mode */
[data-theme="dark"] #mobile-nav {
  background-color: var(--surface-default) !important;
}

/* Checkbox and radio dark mode */
[data-theme="dark"] input[type="checkbox"],
[data-theme="dark"] input[type="radio"] {
  background-color: var(--surface-muted) !important;
  border-color: var(--border-default) !important;
}

[data-theme="dark"] input[type="checkbox"]:checked,
[data-theme="dark"] input[type="radio"]:checked {
  background-color: var(--action-primary) !important;
  border-color: var(--action-primary) !important;
}