@tailwind base;
@tailwind components;
@tailwind utilities;

@layer base {
  html {
    --color-bg-primary: #ffffff;
    --color-bg-secondary: #f9fafb;
    --color-bg-tertiary: #f3f4f6;
    --color-text-primary: #111827;
    --color-text-secondary: #374151;
    --color-text-tertiary: #6b7280;
    --color-border: #e5e7eb;
    --color-border-secondary: #d1d5db;
    --color-accent: #2563eb;
    --color-accent-hover: #1d4ed8;
    --color-success: #16a34a;
    --color-warning: #ca8a04;
    --color-error: #dc2626;
  }

  /* Dark mode friendly native date/time picker icons */
  /* Many browsers (WebKit/Blink) expose the picker icon via a pseudo-element */
  input[type="date"]::-webkit-calendar-picker-indicator,
  input[type="datetime-local"]::-webkit-calendar-picker-indicator,
  input[type="time"]::-webkit-calendar-picker-indicator {
    filter: none;
  }

  /* In dark theme, invert the icon so it is visible on dark backgrounds */
  html[data-theme="dark"] input[type="date"]::-webkit-calendar-picker-indicator,
  html[data-theme="dark"] input[type="datetime-local"]::-webkit-calendar-picker-indicator,
  html[data-theme="dark"] input[type="time"]::-webkit-calendar-picker-indicator {
    filter: invert(1) brightness(1.2);
  }

  /* Hint browser to render native controls in dark theme where supported */
  html[data-theme="dark"] input[type="date"],
  html[data-theme="dark"] input[type="datetime-local"],
  html[data-theme="dark"] input[type="time"],
  html[data-theme="dark"] select {
    color-scheme: dark;
  }

  html.dark input[type="date"],
  html.dark input[type="datetime-local"],
  html.dark input[type="time"],
  html.dark select {
    color-scheme: dark;
  }

  /* Also ensure the cursor indicates clickable */
  input[type="date"]::-webkit-calendar-picker-indicator,
  input[type="datetime-local"]::-webkit-calendar-picker-indicator,
  input[type="time"]::-webkit-calendar-picker-indicator {
    cursor: pointer;
  }

  html.dark {
    --color-bg-primary: #111827;
    --color-bg-secondary: #1f2937;
    --color-bg-tertiary: #374151;
    --color-text-primary: #cbd5e0;
    --color-text-secondary: #ffffff;
    --color-text-tertiary: #d1d5db;
    --color-border: #374151;
    --color-border-secondary: #4b5563;
    --color-accent: #3b82f6;
    --color-accent-hover: #60a5fa;
    --color-success: #22c55e;
    --color-warning: #eab308;
    --color-error: #ef4444;
  }

  /* Ensure CSS variables are applied to the entire document */
  html,
  body {
    background-color: var(--color-bg-primary);
    color: var(--color-text-primary);
    transition: background-color 0.3s ease, color 0.3s ease;
  }

  /* Force immediate theme changes */
  .dark body {
    background-color: var(--color-bg-primary);
    color: var(--color-text-primary);
  }

  /* Help browsers render native controls (like select popovers) in dark */
  html.dark,
  html.dark body,
  html[data-theme="dark"],
  html[data-theme="dark"] body {
    color-scheme: dark;
  }

  /* Fixed header spacing for authenticated app only */
  body:not(.public-layout) {
    padding-top: 80px;
    /* 64px header height + 16px breathing room */
  }

  /* Sidebar navigation styles */
  .sidebar {
    width: 240px;
  }

  .sidebar.collapsed {
    width: 64px;
  }

  .sidebar.collapsed .sidebar-link span {
    opacity: 0;
    width: 0;
    overflow: hidden;
  }

  /* Main content adjustment for sidebar - only for authenticated users on large screens */
  @media (min-width: 1024px) {
    body.authenticated .main-content {
      margin-left: 240px;
    }

    body.authenticated .sidebar.collapsed~.main-content {
      margin-left: 64px;
    }

    /* Phase 4: Admin override banner alignment with sidebar */
    body.authenticated #admin_override_banner {
      margin-left: 240px;
      transition: margin-left 200ms ease;
    }

    body.authenticated.sidebar-collapsed #admin_override_banner {
      margin-left: 64px;
    }
  }

  /* Global transition for color-related properties (replace Tailwind @apply) */
  * {
    transition-property: background-color, color, border-color, text-decoration-color, fill, stroke;
    transition-duration: 200ms;
    transition-timing-function: ease;
  }

  /* Body colors already defined above via CSS variables; keep without @apply */
  /* background-color and color are set on html/body earlier */

  /* Default value color for all form controls */
  form input,
  form select,
  form textarea {
    color: var(--color-text-secondary);
  }

  /* Custom highlight styles */
  .highlight {
    background-color: green;
    color: white;
  }

  /* Ensure themed backgrounds/borders on selects across themes */
  select {
    background-color: var(--color-bg-secondary);
    color: var(--color-text-primary);
    border: 1px solid var(--color-border);
  }

  /* Where supported (e.g., Firefox), also theme option rows */
  html.dark select option,
  html[data-theme="dark"] select option,
  html.dark select optgroup,
  html[data-theme="dark"] select optgroup {
    background-color: var(--color-bg-secondary);
    color: var(--color-text-primary);
  }
}

@layer components {

  /* Modal dialog styling */
  dialog {
    border: 1px solid var(--color-border);
    background-color: var(--color-bg-secondary);
    color: var(--color-text-primary);
    border-radius: 0.5rem;
    padding: 0;
  }

  dialog[open] {
    /* Ensure centered modal with reasonable max size */
    inset: 0;
    margin: auto;
    max-height: 90vh;
    overflow-y: auto;
  }

  dialog::backdrop {
    background-color: rgba(0, 0, 0, 0.3);
    /* More transparent to show background content */
  }

  html.dark dialog::backdrop {
    background-color: rgba(0, 0, 0, 0.4);
  }

  /* Ensure Flatpickr calendar appears above modal dialogs */
  .flatpickr-calendar {
    z-index: 10000 !important;
  }

  /* Themed scrollbars */
  *::-webkit-scrollbar {
    width: 10px;
    height: 10px;
  }

  *::-webkit-scrollbar-thumb {
    background-color: var(--color-border-secondary);
    border-radius: 6px;
    border: 2px solid transparent;
    background-clip: padding-box;
  }

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

  .btn-primary {
    background-color: var(--color-accent);
    color: white;
    padding: 0.5rem 1rem;
    border-radius: 0.375rem;
    transition: background-color 0.2s ease;
  }

  .btn-primary:hover {
    background-color: var(--color-accent-hover);
  }

  /* Disabled state for primary buttons */
  .btn-primary:disabled,
  .btn-primary[disabled] {
    background-color: var(--color-border-secondary);
    color: var(--color-text-tertiary);
    cursor: not-allowed;
    opacity: 0.7;
  }

  /* Prevent hover style when disabled */
  .btn-primary:disabled:hover,
  .btn-primary[disabled]:hover {
    background-color: var(--color-border-secondary);
  }

  .btn-secondary {
    background-color: var(--color-bg-secondary);
    color: var(--color-text-primary);
    border: 1px solid var(--color-border);
    padding: 0.5rem 1rem;
    border-radius: 0.375rem;
    transition: background-color 0.2s ease;
  }

  .btn-secondary:hover {
    background-color: var(--color-bg-tertiary);
  }

  .btn-danger {
    background-color: transparent;
    color: var(--color-text-primary);
    border: 1px solid var(--color-error);
    padding: 0.5rem 1rem;
    border-radius: 0.375rem;
    transition: background-color 0.2s ease, color 0.2s ease;
  }

  .btn-danger:hover {
    background-color: var(--color-error);
    color: white;
  }

  .btn-warning {
    background-color: transparent;
    color: var(--color-text-primary);
    border: 1px solid var(--color-warning);
    padding: 0.5rem 1rem;
    border-radius: 0.375rem;
    transition: background-color 0.2s ease, color 0.2s ease;
  }

  .btn-warning:hover {
    background-color: var(--color-warning);
    color: white;
  }

  .card {
    background-color: var(--color-bg-primary);
    border: 1px solid var(--color-border);
    border-radius: 0.5rem;
    box-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.1);
  }

  .input-field {
    background-color: var(--color-bg-secondary);
    border: 1px solid var(--color-border);
    border-radius: 0.375rem;
    padding: 0.5rem 0.75rem;
    color: var(--color-text-primary);
    transition: border-color 0.2s ease;
  }

  .input-field:focus {
    outline: none;
    border-color: var(--color-accent);
    box-shadow: 0 0 0 2px var(--color-accent);
  }

  /* Disabled form controls */
  input:disabled,
  select:disabled,
  textarea:disabled,
  input[disabled],
  select[disabled],
  textarea[disabled] {
    background-color: var(--color-bg-tertiary);
    color: var(--color-text-tertiary);
    cursor: not-allowed;
    opacity: 0.9;
  }

  /* Readonly form controls (treat like disabled for visuals) */
  input[readonly],
  select[readonly],
  textarea[readonly] {
    background-color: var(--color-bg-tertiary);
    color: var(--color-text-tertiary);
    cursor: not-allowed;
    opacity: 0.9;
  }

  .theme-toggle {
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 3rem;
    height: 3rem;
    border-radius: 50%;
    background-color: var(--color-bg-secondary);
    border: 1px solid var(--color-border);
    transition: background-color 0.2s ease;
  }

  .theme-toggle:hover {
    background-color: var(--color-bg-tertiary);
  }

  .theme-toggle-icon {
    width: 1.25rem;
    height: 1.25rem;
    color: var(--color-text-secondary);
    transition: color 0.2s ease;
  }

  .theme-toggle:hover .theme-toggle-icon {
    color: var(--color-text-primary);
  }

  /* Consistent label styling for forms */
  .form-label {
    /* Plain CSS so it works without Tailwind pre-processing */
    display: block;
    font-size: 0.95rem;
    /* text-xs */
    line-height: 1.2rem;
    /* text-xs line-height */
    text-transform: uppercase;
    color: var(--color-text-primary);
  }
}

/* Themed horizontal scrollbar for dedicated scroll containers */
.scroll-container {
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: thin;
  /* Firefox */
  scrollbar-color: var(--color-border) transparent;
  /* Firefox */
}

.scroll-container::-webkit-scrollbar {
  height: 8px;
  /* horizontal scrollbar height */
}

.scroll-container::-webkit-scrollbar-track {
  background: var(--color-bg-secondary);
  border-radius: 9999px;
}

.scroll-container::-webkit-scrollbar-thumb {
  background-color: var(--color-border-secondary);
  border-radius: 9999px;
  border: 2px solid transparent;
  background-clip: content-box;
}

.scroll-container:hover::-webkit-scrollbar-thumb {
  background-color: var(--color-text-secondary);
}

/* Dark mode utilities */
@layer utilities {
  .bg-surface {
    background-color: var(--color-bg-primary);
  }

  .bg-surface-secondary {
    background-color: var(--color-bg-secondary);
  }

  .text-primary {
    color: var(--color-text-primary);
  }

  .text-secondary {
    color: var(--color-text-secondary);
  }

  .border-surface {
    border-color: var(--color-border);
  }
}

/* Additional dashboard-specific styles */
@layer components {

  /* Card styles */
  .card {
    background-color: var(--color-bg-primary);
    border: 1px solid var(--color-border);
    border-radius: 0.5rem;
    padding: 1rem;
    box-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.1);
  }

  .card-header {
    margin-bottom: 1rem;
    padding-bottom: 0.5rem;
    border-bottom: 1px solid var(--color-border);
  }

  .card-title {
    font-size: 1.25rem;
    font-weight: 600;
    color: var(--color-text-primary);
  }

  .card {
    @apply bg-surface border border-surface-border rounded-lg shadow-sm;
  }

  .card-header {
    @apply p-6 border-b border-surface-border;
  }

  .card-title {
    @apply text-lg font-semibold text-primary;
  }

  /* Event sections specific styles */
  .event-section {
    @apply bg-surface border border-surface-border rounded-lg shadow-sm;
  }

  .event-section-header {
    @apply p-6 border-b border-surface-border;
  }

  .event-section-title {
    @apply text-lg font-semibold text-primary;
  }

  .event-section-content {
    @apply p-6;
  }

  /* Tab styles */
  .tab-button {
    @apply px-4 py-2 text-sm font-medium border-b-2 transition-colors duration-200;
  }

  .tab-button:hover {
    @apply text-primary-600;
  }

  .tab-button.tab-active {
    @apply border-primary-500 text-primary-600;
  }

  .tab-button:not(.tab-active) {
    @apply border-transparent text-gray-500;
  }

  .tab-content {
    @apply min-h-[400px];
  }

  .tab-content.hidden {
    @apply hidden;
  }

  .tab-content:not(.hidden) {
    @apply block;
  }

  /* Mobile section styles */
  .mobile-section {
    @apply border border-surface-border rounded-lg mb-4;
  }

  .mobile-section-header {
    @apply p-4 cursor-pointer flex justify-between items-center min-h-[48px];
  }

  .mobile-section-header:hover {
    @apply bg-surface-secondary;
  }

  .mobile-section-content {
    @apply border-t border-surface-border overflow-hidden;
  }

  .mobile-section-content.hidden {
    @apply hidden;
  }

  .mobile-section-content:not(.hidden) {
    @apply block;
  }

  /* Collapsible content animation - hidden by default */
  .collapsible-content {
    max-height: 0;
    overflow: hidden;
    transition: max-height 0.3s ease-in-out, opacity 0.2s ease-in-out;
    opacity: 0;
  }

  .collapsible-content.open {
    max-height: 2000px;
    /* Large enough for content */
    opacity: 1;
  }

  /* Ensure content is hidden before JavaScript initializes */
  .collapsible-content:not(.open) {
    display: none;
  }


  /* Event Status Styling */
  .event-gray {
    @apply border-l-gray-400;
  }

  .event-green {
    @apply border-l-green-400;
  }

  .event-blue {
    @apply border-l-blue-400;
  }

  .event-yellow {
    @apply border-l-yellow-400;
  }

  .event-orange {
    @apply border-l-orange-400;
  }

  .event-red {
    @apply border-l-red-400;
  }

  .event-purple {
    @apply border-l-purple-400;
  }

  /* Event Card Status Variants */
  .event-card {
    @apply bg-surface border border-surface-border rounded-lg shadow-sm transition-all duration-200;
  }

  .event-card:hover {
    @apply shadow-md;
  }

  .event-card.event-editable {
    @apply hover:border-primary-300 cursor-pointer;
  }

  .event-card.event-deletable {
    @apply hover:border-red-300;
  }

  /* Event List Item Styling */
  .event-list-item {
    @apply flex items-center justify-between p-4 border-b border-surface-border transition-colors duration-200;
  }

  .event-list-item:hover {
    @apply bg-surface-secondary;
  }

  .event-list-item.event-has-actions {
    @apply hover:bg-surface-secondary;
  }

  /* Registration Status Indicators */
  .registration-available {
    @apply text-green-600 dark:text-green-400;
  }

  .registration-full {
    @apply text-yellow-600 dark:text-yellow-400;
  }

  .registration-unavailable {
    @apply text-gray-500 dark:text-gray-400;
  }

  /* Status Filter Buttons */
  .filter-all {
    @apply bg-surface text-primary border border-surface-border;
  }

  .filter-draft {
    @apply bg-gray-100 text-gray-800 dark:bg-gray-800 dark:text-gray-200;
  }

  .filter-published {
    @apply bg-green-100 text-green-800 dark:bg-green-800 dark:text-green-200;
  }

  .filter-postponed {
    @apply bg-yellow-100 text-yellow-800 dark:bg-yellow-800 dark:text-yellow-200;
  }

  .filter-rescheduled {
    @apply bg-blue-100 text-blue-800 dark:bg-blue-800 dark:text-blue-200;
  }

  .filter-on_hold {
    @apply bg-orange-100 text-orange-800 dark:bg-orange-800 dark:text-orange-200;
  }

  .filter-cancelled {
    @apply bg-red-100 text-red-800 dark:bg-red-800 dark:text-red-200;
  }

  .filter-completed {
    @apply bg-purple-100 text-purple-800 dark:bg-purple-800 dark:text-purple-200;
  }

  /* Event Title with Status */
  .event-title {
    @apply font-semibold text-primary transition-colors duration-200;
  }

  .event-title.event-gray {
    @apply text-gray-600 dark:text-gray-400;
  }

  .event-title.event-green {
    @apply text-green-600 dark:text-green-400;
  }

  .event-title.event-blue {
    @apply text-blue-600 dark:text-blue-400;
  }

  .event-title.event-yellow {
    @apply text-yellow-600 dark:text-yellow-400;
  }

  .event-title.event-orange {
    @apply text-orange-600 dark:text-orange-400;
  }

  .event-title.event-red {
    @apply text-red-600 dark:text-red-400;
  }

  .event-title.event-purple {
    @apply text-purple-600 dark:text-purple-400;
  }

  /* Status Change Form Styling */
  .status-change-form {
    @apply bg-surface-secondary border border-surface-border rounded-lg p-4;
  }

  .status-change-form .form-label {
    @apply text-sm font-medium text-primary mb-2 block;
  }

  .status-change-form select {
    @apply bg-surface border border-surface-border rounded-md px-3 py-2 text-sm focus:outline-none focus:ring-2 focus:ring-primary-500;
  }

  /* Event Meta Information */
  .event-meta {
    @apply text-sm text-secondary mt-2 flex flex-wrap gap-2;
  }

  /* Form Section Animations */
  details[open] summary~* {
    animation: slideDown 0.3s ease-out;
  }

  @keyframes slideDown {
    from {
      opacity: 0;
      transform: translateY(-10px);
    }

    to {
      opacity: 1;
      transform: translateY(0);
    }
  }

  .section-opening {
    animation: pulse 0.3s ease-out;
  }

  @keyframes pulse {

    0%,
    100% {
      opacity: 1;
    }

    50% {
      opacity: 0.95;
    }
  }

  .section-highlight {
    animation: highlight 2s ease-out;
  }

  @keyframes highlight {
    0% {
      box-shadow: 0 0 0 0 rgba(239, 68, 68, 0.4);
    }

    50% {
      box-shadow: 0 0 0 10px rgba(239, 68, 68, 0);
    }

    100% {
      box-shadow: 0 0 0 0 rgba(239, 68, 68, 0);
    }
  }

  /* Smooth summary hover transition */
  details summary {
    transition: background-color 0.2s ease, color 0.2s ease;
  }

  /* Custom disclosure marker */
  details summary::-webkit-details-marker {
    display: none;
  }

  details summary::marker {
    display: none;
    content: "";
  }

  details summary {
    list-style: none;
  }

  details summary::-moz-list-bullet {
    list-style-type: none;
  }

  details summary::before {
    content: "▶";
    display: inline-block;
    margin-right: 0.5rem;
    transition: transform 0.3s ease;
    font-size: 0.75rem;
    color: var(--color-text-secondary);
  }

  details[open] summary::before {
    transform: rotate(90deg);
  }
}