@import "tailwindcss";
@import "flatpickr/dist/flatpickr.css";

/* Custom styles for select dropdowns */
select {
  background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 20 20'%3e%3cpath stroke='%236b7280' stroke-linecap='round' stroke-linejoin='round' stroke-width='1.5' d='M6 8l4 4 4-4'/%3e%3c/svg%3e");
  background-position: right 0.5rem center;
  background-repeat: no-repeat;
  background-size: 1.5em 1.5em;
  padding-right: 2.5rem;
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
}

select:focus {
  background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 20 20'%3e%3cpath stroke='%234f46e5' stroke-linecap='round' stroke-linejoin='round' stroke-width='1.5' d='M6 8l4 4 4-4'/%3e%3c/svg%3e");
}

.dark select {
  background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 20 20'%3e%3cpath stroke='%2394a3b8' stroke-linecap='round' stroke-linejoin='round' stroke-width='1.5' d='M6 8l4 4 4-4'/%3e%3c/svg%3e");
}

.dark select:focus {
  background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 20 20'%3e%3cpath stroke='%236366f1' stroke-linecap='round' stroke-linejoin='round' stroke-width='1.5' d='M6 8l4 4 4-4'/%3e%3c/svg%3e");
}

/* Theme system - CSS Custom Properties for custom gradients and colors */
:root {
  color-scheme: light;
  --theme-body: #f8fafc;
  --theme-card: #ffffff;
  --theme-muted: #f1f5f9;
  --theme-border: #e2e8f0;
  --theme-border-strong: #cbd5f5;
  --theme-text: #0f172a;
  --theme-text-muted: #475569;
  --theme-shadow: 0 25px 65px rgba(15, 23, 42, 0.08);
  --nav-surface: linear-gradient(135deg, #4338ca, #3730a3, #2563eb);
  --nav-border: rgba(255, 255, 255, 0.2);
  --nav-text: #f8fafc;
  --nav-pill-bg: rgba(255, 255, 255, 0.16);
  --nav-pill-hover: rgba(255, 255, 255, 0.26);
  --nav-pill-shadow: 0 20px 45px rgba(37, 99, 235, 0.3);
  --nav-button-border: rgba(255, 255, 255, 0.35);
  --nav-overlay: rgba(15, 23, 42, 0.45);
  --footer-surface: linear-gradient(135deg, #f8fafc, #f1f5f9);
  --footer-border: rgba(15, 23, 42, 0.08);
  --footer-text: #0f172a;
  --footer-muted: #475569;
  --footer-muted-2: #94a3b8;
  --auth-bg: radial-gradient(circle at 20% 20%, rgba(255, 255, 255, 0.9), rgba(199, 210, 254, 0.6), rgba(59, 130, 246, 0.25)),
    linear-gradient(135deg, rgba(79, 70, 229, 0.85), rgba(14, 165, 233, 0.65));
  --auth-card: rgba(255, 255, 255, 0.95);
  --auth-card-border: rgba(15, 23, 42, 0.08);
  --auth-card-shadow: 0 25px 65px rgba(15, 23, 42, 0.15);
  --auth-muted-text: rgba(71, 85, 105, 0.9);
  --auth-side-bg: rgba(255, 255, 255, 0.6);
  --auth-side-border: rgba(79, 70, 229, 0.35);
  --auth-input-bg: rgba(248, 250, 252, 0.8);
  --auth-input-border: rgba(148, 163, 184, 0.6);
}

.dark {
  color-scheme: dark;
  --theme-body: #020617;
  --theme-card: #0f172a;
  --theme-muted: #1e293b;
  --theme-border: rgba(148, 163, 184, 0.4);
  --theme-border-strong: rgba(148, 163, 184, 0.6);
  --theme-text: #e2e8f0;
  --theme-text-muted: #94a3b8;
  --theme-shadow: 0 25px 65px rgba(2, 6, 23, 0.78);
  --nav-surface: linear-gradient(135deg, rgba(2, 6, 23, 0.95), rgba(15, 23, 42, 0.9));
  --nav-border: rgba(148, 163, 184, 0.35);
  --nav-text: #f8fafc;
  --nav-pill-bg: rgba(79, 70, 229, 0.35);
  --nav-pill-hover: rgba(129, 140, 248, 0.45);
  --nav-pill-shadow: 0 18px 40px rgba(2, 6, 23, 0.65);
  --nav-button-border: rgba(99, 102, 241, 0.35);
  --nav-overlay: rgba(2, 6, 23, 0.6);
  --footer-surface: linear-gradient(135deg, #020617, #0f172a);
  --footer-border: rgba(148, 163, 184, 0.3);
  --footer-text: #e2e8f0;
  --footer-muted: #c7d2fe;
  --footer-muted-2: #94a3b8;
  --auth-bg: radial-gradient(circle at 10% 20%, rgba(37, 99, 235, 0.4), rgba(15, 23, 42, 0.9)),
    linear-gradient(135deg, rgba(2, 6, 23, 0.95), rgba(30, 64, 175, 0.65));
  --auth-card: rgba(15, 23, 42, 0.92);
  --auth-card-border: rgba(148, 163, 184, 0.35);
  --auth-card-shadow: 0 35px 65px rgba(2, 6, 23, 0.85);
  --auth-muted-text: rgba(148, 163, 184, 0.95);
  --auth-side-bg: rgba(15, 23, 42, 0.8);
  --auth-side-border: rgba(148, 163, 184, 0.4);
  --auth-input-bg: rgba(15, 23, 42, 0.65);
  --auth-input-border: rgba(99, 102, 241, 0.6);
}

body {
  background-color: var(--theme-body);
  color: var(--theme-text);
  transition: background-color 0.3s ease, color 0.3s ease;
}

/* Override Tailwind classes for dark mode compatibility */
.dark .bg-white,
.dark .bg-gray-50,
.dark .bg-gray-100 {
  background-color: var(--theme-card) !important;
}

/* Force white background for comments in light mode (only when NOT in dark mode) */
/* Must be after dark mode overrides and more specific - using very specific selectors */
html:not(.dark) li[id*="comment"] > div.comment-box,
html:not(.dark) .comment-box {
  background-color: #ffffff !important;
  background-image: none !important;
  border-color: #f3f4f6 !important; /* ring-gray-100 equivalent */
  box-shadow: 0 0 0 1px inset #f3f4f6 !important; /* ring-1 ring-inset equivalent */
}

html.dark li[id*="comment"] > div.comment-box,
html.dark .comment-box {
  background-color: transparent !important;
  background-image: linear-gradient(to bottom right, var(--theme-card), var(--theme-muted)) !important;
  border-color: var(--theme-border) !important;
  box-shadow: 0 0 0 1px inset var(--theme-border) !important;
}

html:not(.dark) li[id*="comment"] .comment-text,
html:not(.dark) .comment-text {
  color: rgb(55, 65, 81) !important;
}

/* Style comment author name for better contrast in light mode */
html:not(.dark) .comment-author-name {
  color: #030712 !important; /* text-gray-950 - very dark for better contrast */
}

html.dark .comment-author-name {
  color: var(--theme-text) !important;
}

html.dark li[id*="comment"] .comment-text,
html.dark .comment-text {
  color: var(--theme-text-muted) !important;
}

/* Force white background for comments section container in light mode */
html:not(.dark) .comments-section {
  background-color: #ffffff !important;
}

html.dark .comments-section {
  background-color: var(--theme-card) !important;
}

/* Style elements inside comments section for dark mode */
html.dark .comments-section .bg-blue-100 {
  background-color: rgba(30, 58, 138, 0.3) !important;
}

html.dark .comments-section .text-blue-600 {
  color: #93c5fd !important;
}

html.dark .comments-section .text-blue-700 {
  color: #60a5fa !important;
}

html.dark .comments-section .text-gray-900 {
  color: var(--theme-text) !important;
}

html.dark .comments-section .text-gray-500 {
  color: var(--theme-text-muted) !important;
}

html.dark .comments-section .border-gray-200 {
  border-color: var(--theme-border) !important;
}

/* Style comment connector line and dot container for both themes */
html:not(.dark) .comment-connector-line {
  background-color: #e5e7eb !important;
}

html.dark .comment-connector-line {
  background-color: rgba(148, 163, 184, 0.4) !important;
}

html:not(.dark) .comment-dot-container {
  background-color: #ffffff !important;
}

html.dark .comment-dot-container {
  background-color: var(--theme-card) !important;
}

/* Style comment attachment border for both themes */
html:not(.dark) .comment-attachment-border {
  border-color: #f3f4f6 !important; /* border-gray-100 equivalent */
}

html.dark .comment-attachment-border {
  border-color: var(--theme-border) !important;
}

/* Force proper styling for comment input in light mode to match other inputs */
html:not(.dark) .comment-input {
  background-color: #ffffff !important;
  color: #0f172a !important;
  border-color: #d1d5db !important;
}

html.dark .comment-input {
  background-color: var(--theme-card) !important;
  color: var(--theme-text) !important;
}

/* Force white background for comment modal in light mode */
html:not(.dark) .comment-modal {
  background-color: #ffffff !important;
}

html.dark .comment-modal {
  background-color: var(--theme-card) !important;
}

/* Force proper border colors for comment modal in light mode */
html:not(.dark) .comment-modal {
  border-color: #f3f4f6 !important; /* ring-gray-100 */
  box-shadow: 0 0 0 1px #f3f4f6 !important;
}

html.dark .comment-modal {
  border-color: var(--theme-border) !important;
  box-shadow: 0 0 0 1px var(--theme-border) !important;
}

html:not(.dark) .comment-modal .border-b,
html:not(.dark) .comment-modal .border-t,
html:not(.dark) .comment-modal-header,
html:not(.dark) .comment-modal-footer {
  border-color: #f3f4f6 !important;
}

html.dark .comment-modal .border-b,
html.dark .comment-modal .border-t,
html.dark .comment-modal-header,
html.dark .comment-modal-footer {
  border-color: var(--theme-border) !important;
}

/* Style modal text elements */
html:not(.dark) .comment-modal-title {
  color: #030712 !important; /* text-gray-950 equivalent */
}

html.dark .comment-modal-title {
  color: var(--theme-text) !important;
}

/* Style modal close button and cancel button */
html:not(.dark) .comment-modal-close {
  background-color: #f3f4f6 !important;
  color: #6b7280 !important;
}

html:not(.dark) .comment-modal-close:hover {
  background-color: #e5e7eb !important;
  color: #374151 !important;
}

html.dark .comment-modal-close {
  background-color: var(--theme-muted) !important;
  color: var(--theme-text-muted) !important;
}

html.dark .comment-modal-close:hover {
  background-color: var(--theme-border) !important;
  color: var(--theme-text) !important;
}

html:not(.dark) .comment-modal-cancel {
  border-color: #d1d5db !important;
  color: #374151 !important;
}

html:not(.dark) .comment-modal-cancel:hover {
  background-color: #f9fafb !important;
}

html.dark .comment-modal-cancel {
  border-color: var(--theme-border-strong) !important;
  color: var(--theme-text-muted) !important;
}

html.dark .comment-modal-cancel:hover {
  background-color: var(--theme-muted) !important;
}

/* Force white background for comment edit page in light mode */
html:not(.dark) .comment-edit-page {
  background-color: #ffffff !important;
}

html.dark .comment-edit-page {
  background-color: var(--theme-card) !important;
}

.dark .text-gray-900,
.dark .text-gray-800 {
  color: var(--theme-text) !important;
}

.dark .text-gray-700:not(.comment-text),
.dark .text-gray-600:not(.comment-text) {
  color: var(--theme-text-muted) !important;
}

.dark .text-gray-500,
.dark .text-gray-400 {
  color: rgba(148, 163, 184, 0.85) !important;
}

.dark .border-gray-100,
.dark .border-gray-200 {
  border-color: var(--theme-border) !important;
}

.dark .border-gray-300 {
  border-color: var(--theme-border-strong) !important;
}

.dark .divide-gray-100 > :not([hidden]) ~ :not([hidden]),
.dark .divide-gray-200 > :not([hidden]) ~ :not([hidden]) {
  border-color: var(--theme-border) !important;
}

.dark .shadow,
.dark .shadow-sm,
.dark .shadow-md,
.dark .shadow-lg,
.dark .shadow-xl {
  box-shadow: var(--theme-shadow) !important;
}

.dark .bg-indigo-50,
.dark .bg-indigo-100 {
  background-color: rgba(99, 102, 241, 0.18) !important;
  color: #c7d2fe !important;
}

.dark .bg-blue-50,
.dark .bg-blue-100 {
  background-color: rgba(59, 130, 246, 0.18) !important;
  color: #bfdbfe !important;
}

.dark .bg-purple-50,
.dark .bg-purple-100 {
  background-color: rgba(168, 85, 247, 0.15) !important;
  color: #ddd6fe !important;
}

.dark .bg-emerald-50,
.dark .bg-green-100 {
  background-color: rgba(16, 185, 129, 0.18) !important;
  color: #a7f3d0 !important;
}

.dark .bg-teal-50 {
  background-color: rgba(45, 212, 191, 0.16) !important;
  color: #99f6e4 !important;
}

.dark .bg-orange-50 {
  background-color: rgba(249, 115, 22, 0.18) !important;
  color: #fed7aa !important;
}

.dark .bg-red-50,
.dark .bg-red-100 {
  background-color: rgba(239, 68, 68, 0.18) !important;
  color: #fecaca !important;
}

.dark .text-indigo-600,
.dark .text-blue-600,
.dark .text-purple-600,
.dark .text-green-600,
.dark .text-emerald-700,
.dark .text-teal-600,
.dark .text-orange-600,
.dark .text-red-600 {
  color: var(--theme-text) !important;
}

/* Task list hover contrast in dark theme */
.task-row {
  border-radius: 0.5rem;
}

html.dark .task-row {
  border: 1px solid transparent;
  transition: background-color 0.18s ease, border-color 0.18s ease, box-shadow 0.18s ease;
}

html.dark .task-row:hover {
  background: linear-gradient(135deg, rgba(99, 102, 241, 0.14), rgba(59, 130, 246, 0.08));
  border-color: rgba(129, 140, 248, 0.45);
  box-shadow: 0 10px 28px rgba(2, 6, 23, 0.55);
}

html.dark .task-row:hover .text-gray-700,
html.dark .task-row:hover .text-gray-600 {
  color: var(--theme-text) !important;
}

/* Form inputs in dark mode */
.dark input[type="text"],
.dark input[type="date"],
.dark input[type="email"],
.dark input[type="password"],
.dark input[type="number"],
.dark input[type="time"],
.dark textarea,
.dark select {
  background-color: var(--theme-card) !important;
  color: var(--theme-text) !important;
}

.dark input[type="text"]:focus,
.dark input[type="date"]:focus,
.dark input[type="email"]:focus,
.dark input[type="password"]:focus,
.dark input[type="number"]:focus,
.dark input[type="time"]:focus,
.dark textarea:focus,
.dark select:focus {
  background-color: var(--theme-card) !important;
  color: var(--theme-text) !important;
}

.dark input::placeholder,
.dark textarea::placeholder {
  color: var(--theme-text-muted) !important;
  opacity: 0.7;
}

.dark .hover\:bg-indigo-50:hover,
.dark .hover\:bg-blue-50:hover,
.dark .hover\:bg-purple-50:hover,
.dark .hover\:bg-emerald-50:hover,
.dark .hover\:bg-teal-50:hover,
.dark .hover\:bg-orange-50:hover,
.dark .hover\:bg-red-50:hover {
  background-color: rgba(255, 255, 255, 0.08) !important;
}

.dark nav,
.dark header,
.dark footer {
  color: var(--theme-text);
}

/* Navigation */
.nav-shell {
  background: var(--nav-surface);
  border-bottom: 1px solid var(--nav-border);
  box-shadow: var(--nav-pill-shadow);
  backdrop-filter: blur(18px);
  color: var(--nav-text);
}

.nav-shell .text-white,
.nav-shell .text-gray-50,
.nav-shell .text-gray-100,
.nav-shell .text-gray-200,
.nav-shell .text-gray-800,
.nav-shell .text-gray-900 {
  color: var(--nav-text) !important;
}

.nav-shell .bg-white\/20,
.nav-shell .bg-white\/10 {
  background-color: var(--nav-pill-bg) !important;
}

.nav-shell .hover\:bg-white\/20:hover,
.nav-shell .hover\:bg-white\/10:hover {
  background-color: var(--nav-pill-hover) !important;
}

.nav-shell .border-white\/30,
.nav-shell .border-white\/50 {
  border-color: var(--nav-button-border) !important;
}

.nav-shell .text-white\/70 {
  color: color-mix(in srgb, var(--nav-text) 75%, transparent) !important;
}

.nav-search {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2.5rem;
  height: 2.5rem;
  border-radius: 999px;
  background-color: var(--nav-pill-bg);
  color: var(--nav-text);
  border: 1px solid var(--nav-button-border);
  box-shadow: var(--nav-pill-shadow);
  transition: all 0.25s ease;
}

.nav-search:hover {
  background-color: var(--nav-pill-hover);
  transform: translateY(-1px) scale(1.05);
}

.nav-search svg {
  transition: transform 0.3s ease;
}

.nav-search:hover svg {
  transform: scale(1.05) rotate(6deg);
}

.nav-mobile-toggle {
  color: var(--nav-text);
  border: 1px solid transparent;
  transition: background-color 0.2s ease, color 0.2s ease;
}

.nav-mobile-toggle:hover {
  background-color: var(--nav-pill-hover);
}

.nav-overlay {
  background-color: var(--nav-overlay);
}

.nav-link {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  border-radius: 0.85rem;
  padding: 0.55rem 0.9rem;
  font-weight: 600;
  font-size: 0.9rem;
  color: var(--nav-text);
  transition: background-color 0.2s ease, color 0.2s ease, box-shadow 0.2s ease;
}

.nav-link:hover,
.nav-link:focus {
  background-color: var(--nav-pill-hover);
}

.nav-link--active {
  background-color: var(--nav-pill-bg);
  box-shadow: var(--nav-pill-shadow);
}

.nav-link svg {
  height: 1.25rem;
  width: 1.25rem;
}

.nav-link--ghost {
  border: 1px solid transparent;
}

.nav-link--ghost:hover {
  border-color: var(--nav-button-border);
}

/* Footer */
.footer-shell {
  background: var(--footer-surface);
  border-top: 1px solid var(--footer-border);
  color: var(--footer-text);
}

.footer-shell .text-gray-900,
.footer-shell .text-gray-800 {
  color: var(--footer-text) !important;
}

.footer-shell .text-gray-700,
.footer-shell .text-gray-600 {
  color: var(--footer-muted) !important;
}

.footer-shell .text-gray-500,
.footer-shell .text-gray-400 {
  color: var(--footer-muted-2) !important;
}

.footer-shell svg {
  color: color-mix(in srgb, var(--footer-text) 70%, transparent);
}

/* Auth screens */
.auth-shell {
  min-height: 100vh;
  width: 100%;
  background-image: var(--auth-bg);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: clamp(2rem, 6vw, 5rem) clamp(1rem, 4vw, 4rem);
  position: relative;
  overflow: hidden;
}

.auth-shell::before,
.auth-shell::after {
  content: "";
  position: absolute;
  border-radius: 50%;
  filter: blur(120px);
  opacity: 0.5;
}

.auth-shell::before {
  width: 480px;
  height: 480px;
  background: rgba(236, 252, 203, 0.35);
  top: -15%;
  right: 10%;
}

.auth-shell::after {
  width: 320px;
  height: 320px;
  background: rgba(59, 130, 246, 0.35);
  bottom: -10%;
  left: 5%;
}

.auth-panel {
  position: relative;
  z-index: 1;
  width: min(1100px, 100%);
  display: grid;
  grid-template-columns: repeat(1, minmax(0, 1fr));
  gap: 2rem;
}

@media (min-width: 1024px) {
  .auth-panel {
    grid-template-columns: 330px minmax(0, 1fr);
    align-items: stretch;
  }
}

.auth-side {
  border-radius: 32px;
  padding: clamp(2rem, 4vw, 3rem);
  background: var(--auth-side-bg);
  border: 1px solid var(--auth-side-border);
  color: var(--theme-text);
  box-shadow: var(--auth-card-shadow);
  display: flex;
  flex-direction: column;
  gap: 1.25rem;
  position: relative;
  overflow: hidden;
}

.auth-side::after {
  content: "";
  position: absolute;
  right: -20%;
  top: 50%;
  width: 120%;
  height: 120%;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(255, 255, 255, 0.25), transparent 60%);
  transform: translateY(-50%);
  animation: auth-glow 18s ease-in-out infinite;
  pointer-events: none;
}

.auth-heading {
  font-size: clamp(2.3rem, 4vw, 3rem);
  font-weight: 700;
  color: var(--theme-text);
}

.auth-side p {
  line-height: 1.5;
  color: var(--auth-muted-text);
}

.auth-tagline {
  letter-spacing: 0.25em;
  font-size: 0.75rem;
  text-transform: uppercase;
  color: color-mix(in srgb, var(--auth-muted-text) 85%, transparent);
}

.auth-brand {
  font-weight: 600;
  font-size: 1.1rem;
  color: var(--theme-text);
}

.auth-logo {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 3rem;
  height: 3rem;
  border-radius: 1rem;
  border: 1px solid color-mix(in srgb, var(--auth-side-border) 70%, transparent);
  background: linear-gradient(135deg, rgba(99, 102, 241, 0.8), rgba(14, 165, 233, 0.75));
  color: #fff;
}

.auth-footer {
  font-size: 0.9rem;
  color: var(--auth-muted-text);
}

.auth-points {
  display: flex;
  flex-direction: column;
  gap: 0.9rem;
  margin-top: 0.5rem;
}

.auth-point {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  font-size: 0.95rem;
  color: var(--theme-text);
}

.auth-point__icon {
  color: #22c55e;
}

.auth-metrics {
  display: grid;
  gap: 1rem;
  margin-top: 1rem;
}

@media (min-width: 768px) {
  .auth-metrics {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@keyframes auth-float {
  0% {
    transform: translateY(0);
  }
  50% {
    transform: translateY(-12px);
  }
  100% {
    transform: translateY(0);
  }
}

@keyframes auth-glow {
  0% {
    opacity: 0.2;
    transform: translateY(-50%) scale(0.95);
  }
  50% {
    opacity: 0.5;
    transform: translateY(-52%) scale(1.05);
  }
  100% {
    opacity: 0.2;
    transform: translateY(-50%) scale(0.95);
  }
}

.auth-metric {
  border-radius: 1.25rem;
  padding: 1rem;
  border: 1px solid color-mix(in srgb, var(--auth-side-border) 120%, transparent);
  background: color-mix(in srgb, var(--auth-side-bg) 70%, transparent);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.15);
}

.auth-metric-value {
  font-size: 1.7rem;
  font-weight: 700;
  color: var(--theme-text);
}

.auth-metric-label {
  font-size: 0.85rem;
  color: var(--auth-muted-text);
  text-transform: uppercase;
  letter-spacing: 0.08em;
}

.auth-quote {
  margin-top: 1.25rem;
  border-left: 4px solid color-mix(in srgb, var(--auth-side-border) 140%, transparent);
  padding-left: 1rem;
  font-style: italic;
  color: var(--auth-muted-text);
}

.auth-quote cite {
  display: block;
  margin-top: 0.5rem;
  font-size: 0.85rem;
  font-style: normal;
  color: var(--theme-text);
}

.auth-card {
  background: var(--auth-card);
  border-radius: 28px;
  border: 1px solid var(--auth-card-border);
  box-shadow: var(--auth-card-shadow);
  padding: clamp(1.75rem, 3vw, 2.75rem);
  color: var(--theme-text);
  backdrop-filter: blur(16px);
}

.auth-card h2 {
  font-size: 1.75rem;
  font-weight: 700;
  margin-bottom: 0.5rem;
}

.auth-card p {
  color: var(--auth-muted-text);
  font-size: 0.95rem;
  margin-bottom: 1.5rem;
}

.auth-input {
  width: 100%;
  border-radius: 16px;
  border: 1px solid var(--auth-input-border);
  background-color: var(--auth-input-bg);
  padding: 0.95rem 1rem 0.95rem 2.75rem;
  font-size: 0.95rem;
  color: var(--theme-text);
  transition: border-color 0.2s ease, box-shadow 0.2s ease, background-color 0.2s ease;
}

.auth-input:focus {
  border-color: #818cf8;
  box-shadow: 0 0 0 3px rgba(129, 140, 248, 0.3);
  outline: none;
  background-color: color-mix(in srgb, var(--auth-input-bg) 90%, #ffffff);
}

.auth-field {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}

.auth-field label {
  font-weight: 600;
  color: var(--theme-text);
  font-size: 0.9rem;
}

.auth-icon {
  position: absolute;
  left: 1rem;
  top: 50%;
  transform: translateY(-50%);
  color: var(--auth-muted-text);
}

.auth-cta {
  margin-top: 1rem;
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
}

.auth-submit {
  width: 100%;
  border-radius: 16px;
  padding: 0.95rem 1.25rem;
  font-weight: 600;
  font-size: 0.95rem;
  color: #fff;
  background-image: linear-gradient(135deg, #4c1d95, #7c3aed, #2563eb);
  border: none;
  box-shadow: 0 20px 45px rgba(59, 130, 246, 0.35);
  cursor: pointer;
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.auth-submit:hover {
  transform: translateY(-1px);
  box-shadow: 0 25px 60px rgba(79, 70, 229, 0.45);
}

.auth-submit:disabled {
  opacity: 0.6;
  cursor: not-allowed;
}

.auth-links {
  text-align: center;
  font-size: 0.9rem;
  color: var(--auth-muted-text);
  margin-top: 1rem;
}

.auth-link-card {
  margin-top: 1.5rem;
  border-radius: 18px;
  border: 1px solid var(--auth-card-border);
  background: color-mix(in srgb, var(--auth-card) 90%, transparent);
  padding: 1.25rem;
  box-shadow: var(--auth-card-shadow);
}

.auth-link-card a {
  color: #6366f1;
  font-weight: 600;
}

.auth-divider {
  height: 1px;
  border: none;
  background: color-mix(in srgb, var(--auth-card-border) 80%, transparent);
  margin: 1.5rem 0;
}

/* Print styles */
@media print {
  @page {
    size: A4;
    margin: 1cm;
  }

  body {
    print-color-adjust: exact;
    -webkit-print-color-adjust: exact;
  }

  /* Hide navigation, footer, and action buttons */
  nav,
  footer,
  .print\:hidden {
    display: none !important;
  }

  /* Optimize layout for print */
  .container,
  .max-w-7xl {
    max-width: 100% !important;
    padding: 0 !important;
  }

  /* Simplify cards for print */
  .shadow-lg,
  .shadow-xl {
    box-shadow: none !important;
  }

  .rounded-xl,
  .rounded-lg {
    border-radius: 0 !important;
  }

  /* Ensure proper page breaks */
  .page-break-before {
    page-break-before: always;
  }

  .page-break-after {
    page-break-after: always;
  }

  .page-break-inside-avoid {
    page-break-inside: avoid;
  }

  /* Improve table printing */
  table {
    page-break-inside: auto;
  }

  tr {
    page-break-inside: avoid;
    page-break-after: auto;
  }

  /* Print links as text */
  a[href]:after {
    content: none !important;
  }

  /* Optimize text for print */
  body {
    font-size: 10pt;
    line-height: 1.3;
  }

  h1 {
    font-size: 18pt;
  }

  h2 {
    font-size: 14pt;
  }

  h3 {
    font-size: 12pt;
  }

  /* Keep colors for badges and important elements */
  .bg-green-100,
  .bg-blue-100,
  .bg-yellow-100,
  .bg-red-100,
  .bg-purple-100,
  .bg-indigo-100 {
    print-color-adjust: exact;
    -webkit-print-color-adjust: exact;
  }
}

/* Flatpickr custom Tailwind theme */
.flatpickr-calendar {
  @apply shadow-lg border border-gray-200 rounded-lg text-sm dark:border-slate-700 dark:bg-slate-800;
  font-family: inherit;
}

.flatpickr-months {
  @apply bg-indigo-600 rounded-t-lg dark:bg-indigo-900;
}

.flatpickr-current-month {
  @apply text-white;
}

.flatpickr-current-month .flatpickr-monthDropdown-months {
  @apply bg-indigo-600 text-white font-medium text-sm dark:bg-indigo-900;
}

.flatpickr-current-month .numInputWrapper input {
  @apply text-white font-medium text-sm;
}

.flatpickr-current-month .flatpickr-monthDropdown-months:hover {
  @apply bg-indigo-700 dark:bg-indigo-800;
}

.flatpickr-prev-month,
.flatpickr-next-month {
  @apply text-white hover:text-indigo-100;
}

.flatpickr-prev-month:hover svg,
.flatpickr-next-month:hover svg {
  fill: rgb(224, 231, 255);
}

.flatpickr-weekday {
  @apply text-gray-600 font-medium text-xs uppercase dark:text-slate-400;
}

.flatpickr-day {
  @apply text-gray-700 hover:bg-indigo-50 hover:border-indigo-200 rounded-lg text-sm dark:text-slate-300 dark:hover:bg-indigo-900/30 dark:hover:border-indigo-700;
  border: 1px solid transparent;
  font-weight: 400;
}

.flatpickr-day.today {
  @apply border-indigo-500 bg-indigo-50 font-semibold dark:border-indigo-600 dark:bg-indigo-900/40;
}

.flatpickr-day.selected {
  @apply bg-indigo-600 border-indigo-600 text-white font-semibold dark:bg-indigo-700 dark:border-indigo-700;
}

.flatpickr-day.selected:hover {
  @apply bg-indigo-700 border-indigo-700 dark:bg-indigo-600 dark:border-indigo-600;
}

.flatpickr-day.disabled,
.flatpickr-day.disabled:hover {
  @apply text-gray-300 cursor-not-allowed dark:text-slate-600;
}

.flatpickr-day.prevMonthDay,
.flatpickr-day.nextMonthDay {
  @apply text-gray-400 dark:text-slate-600;
}

.flatpickr-time {
  @apply border-t border-gray-200 dark:border-slate-700;
}

.flatpickr-time input {
  @apply text-gray-900 font-medium text-sm dark:text-slate-100 dark:bg-slate-800;
}

.flatpickr-time input:hover,
.flatpickr-time input:focus {
  @apply bg-indigo-50 dark:bg-indigo-900/30;
}

.flatpickr-time .flatpickr-am-pm {
  @apply text-gray-700 hover:bg-indigo-50 text-sm dark:text-slate-300 dark:hover:bg-indigo-900/30;
}

.flatpickr-time .arrowUp,
.flatpickr-time .arrowDown {
  @apply text-gray-400 hover:text-indigo-600 dark:text-slate-500 dark:hover:text-indigo-400;
}

/* Make time picker inputs more minimal */
.flatpickr-time input.flatpickr-hour,
.flatpickr-time input.flatpickr-minute {
  @apply text-center tabular-nums font-medium;
}

.flatpickr-time-separator {
  @apply text-gray-400 font-normal dark:text-slate-500;
}