/* Neutral design system inspired by auto-biller frontend (light/dark, tokens, components) */

/* Tokens */
:root {
  --background: 210 20% 98%;
  --foreground: 224 71% 5%;

  --popover: 0 0% 100%;
  --popover-foreground: 224 71% 4%;

  --card: 0 0% 100%;
  --card-foreground: 224 71% 4%;

  --border: 214 15% 88%;
  --input: 214 15% 88%;

  --ring: 220 60% 50%;

  --primary: 220 60% 50%;
  --primary-foreground: 210 40% 98%;

  --secondary: 214 20% 94%;
  --secondary-foreground: 224 7% 12%;

  --muted: 214 15% 94%;
  --muted-foreground: 215 10% 40%;

  --accent: 214 15% 96%;
  --accent-foreground: 224 7% 12%;

  --destructive: 0 84% 60%;
  --destructive-foreground: 210 40% 98%;

  --elevated: 210 15% 97%;
  --success: 142 71% 45%;
  --success-foreground: 355 70% 97%;
  --warning: 38 92% 50%;
  --warning-foreground: 48 96% 89%;
  --error: 0 84% 60%;
  --error-foreground: 210 40% 98%;

  --radius: 0.5rem;
  --radius-sm: 0.25rem;
  --radius-md: 0.375rem;
  --radius-lg: 0.5rem;
  --radius-xl: 0.75rem;
}

.dark {
  --background: 0 0% 8%;
  --foreground: 0 0% 90%;

  --popover: 0 0% 9%;
  --popover-foreground: 0 0% 90%;

  --card: 0 0% 9%;
  --card-foreground: 0 0% 90%;

  --border: 0 0% 16%;
  --input: 0 0% 16%;

  --ring: 0 0% 35%;

  --primary: 0 0% 34%;
  --primary-foreground: 0 0% 100%;

  --secondary: 0 0% 12%;
  --secondary-foreground: 0 0% 88%;

  --muted: 0 0% 12%;
  --muted-foreground: 0 0% 62%;

  --accent: 0 0% 12%;
  --accent-foreground: 0 0% 88%;

  --destructive: 0 62.8% 30.6%;
  --destructive-foreground: 0 0% 98%;

  --elevated: 0 0% 10%;
}

/* Base */
html { font-size: 80%; }
body {
  background-color: hsl(var(--background));
  color: hsl(var(--foreground));
  font-family: Inter, -apple-system, BlinkMacSystemFont, Segoe UI, Roboto, Oxygen, Ubuntu, Cantarell, "Helvetica Neue", sans-serif;
}

/* Common surfaces */
.card {
  background-color: hsl(var(--card));
  color: hsl(var(--card-foreground));
  border: 1px solid hsl(var(--border));
  border-radius: var(--radius);
  box-shadow: 0 1px 3px 0 rgb(0 0 0 / 0.08), 0 1px 2px -1px rgb(0 0 0 / 0.06);
}

.panel-primary {
  background-color: hsl(var(--card));
  border: 1px solid hsl(var(--border));
  border-radius: var(--radius);
  overflow: hidden;
}

.panel-header {
  background-color: hsl(var(--elevated));
  border-bottom: 1px solid hsl(var(--border));
}

.panel-content { padding: 1.5rem; }

.panel-secondary {
  background-color: hsla(var(--muted) / 0.3);
  border: 1px solid hsl(var(--border));
  border-radius: var(--radius);
}

/* Buttons */
.btn { display: inline-flex; align-items: center; justify-content: center; border-radius: var(--radius); font-weight: 600; transition: all .2s ease; }
.btn:disabled { opacity: .6; cursor: not-allowed; }
.btn-primary { background-color: hsl(var(--primary)); color: hsl(var(--primary-foreground)); }
.btn-primary:hover { filter: brightness(1.05); }
.btn-success { background-color: hsl(var(--success)); color: hsl(var(--success-foreground)); }
.btn-secondary { background-color: hsl(var(--secondary)); color: hsl(var(--secondary-foreground)); }
.btn-danger { background-color: hsl(var(--error)); color: hsl(var(--error-foreground)); }

/* Badges */
.badge-paid { background: #ecfdf5; color: #065f46; border: 1px solid #a7f3d0; }
.badge-pending { background: #fffbeb; color: #92400e; border: 1px solid #fde68a; }
.badge-overdue { background: #fef2f2; color: #991b1b; border: 1px solid #fecaca; }
.badge-draft { background: #f9fafb; color: #374151; border: 1px solid #e5e7eb; }

/* Tables */
.table-enhanced { background-color: hsl(var(--card)); border: 1px solid hsl(var(--border)); border-radius: var(--radius); overflow: hidden; }
.table-header { background-color: hsl(var(--elevated)); border-bottom: 1px solid hsl(var(--border)); }
.table-header th { padding: .75rem 1rem; font-size: .75rem; text-transform: uppercase; letter-spacing: .04em; color: hsl(var(--muted-foreground)); text-align: left; }
.table-cell { padding: 1rem; font-size: .875rem; color: hsl(var(--foreground)); }
.table-row-hover tbody tr:hover { background: hsla(var(--muted) / 0.5); }

/* Layout: header/sidebar */
.header-gradient { 
  background: linear-gradient(135deg, hsl(var(--primary)) 0%, hsl(var(--primary)) 100%); 
  position: fixed !important;
  top: 0 !important;
  left: 0 !important;
  right: 0 !important;
  width: 100% !important;
  z-index: 50 !important;
}
.sidebar {
  background: linear-gradient(to bottom, hsl(var(--background)) 0%, hsl(var(--muted)) 100%);
  box-shadow: 2px 0 10px rgba(0,0,0,0.06);
  position: fixed; top: 4rem; left: 0; height: calc(100vh - 4rem); overflow-y: auto; z-index: 10;
  width: 18rem; transition: width .25s ease, box-shadow .25s ease;
}
body.app-shell:has(header.header-gradient) > .flex { margin-top: 4rem; }
.content-area { background-color: hsl(var(--background)); margin-left: 18rem; min-height: calc(100vh - 4rem); overflow-y: auto; transition: margin-left .25s ease; }
.main-content { padding: 1.5rem; min-height: calc(100vh - 4rem); }

@media (max-width: 768px) {
  body.app-shell:has(header.header-gradient) > .flex { margin-top: 4rem; }
  .sidebar { position: fixed; top: 4rem; left: -100%; width: 100%; height: calc(100vh - 4rem); transition: left .3s ease; z-index: 20; }
  .sidebar.open { left: 0; }
  .content-area { margin-left: 0; }
  .main-content { padding: 1rem; }
}

.sidebar-shell { position: relative; }
.sidebar-collapse-btn { border: 1px solid hsl(var(--border)); background: hsla(var(--muted) / 0.12); }
.sidebar-collapse-btn:hover { border-color: hsl(var(--primary)); color: hsl(var(--primary)); }

.nav-group { border: 1px solid hsl(var(--border)); border-radius: 0.9rem; padding: 0.35rem; background: linear-gradient(135deg, hsla(var(--card) / 0.96) 0%, hsla(var(--muted) / 0.18) 100%); box-shadow: 0 6px 18px rgba(0, 0, 0, 0.04); }
.nav-group + .nav-group { margin-top: 0.25rem; }

.nav-item,
.nav-group-toggle {
  transition: all .2s ease-in-out;
  background: hsla(var(--card) / 0.92);
  box-shadow: inset 0 1px 0 hsla(var(--card-foreground) / 0.04);
  min-height: 2.75rem;
}
/* Standalone nav-items (not inside nav-group) get a border */
.space-y-3 > .nav-item {
  border: 1px solid hsla(var(--muted-foreground) / 0.14);
}
/* Remove border from nav-group-toggle (they're inside nav-group which has its own border) */
.nav-group-toggle {
  border: none;
}
.nav-item:hover,
.nav-group-toggle:hover { background-color: hsla(var(--muted-foreground) / 0.06); transform: translateX(4px); }
.nav-item.active { background-color: hsla(var(--muted) / 1); border-right: 3px solid hsl(var(--primary)); }

.nav-submenu {
  background: hsla(var(--muted) / 0.24);
  border: 1px dashed hsla(var(--muted-foreground) / 0.35);
  border-radius: 0.85rem;
  padding: 0.5rem 0.65rem 0.65rem 0.85rem;
  box-shadow: inset 0 1px 0 hsla(var(--card-foreground) / 0.06);
}

/* Sidebar submenu left border - grey-ish instead of bright white */
.nav-submenu.border-l,
.nav-submenu[class*="border-l"] {
  border-left-color: hsla(var(--muted-foreground) / 0.25) !important;
}

.dark .nav-submenu.border-l,
.dark .nav-submenu[class*="border-l"],
.dark .nav-submenu.border-gray-200 {
  border-left-color: hsla(var(--muted-foreground) / 0.35) !important;
}
.nav-submenu a,
.nav-submenu .nav-item {
  border-radius: 0.75rem;
  border: 1px solid hsl(var(--border));
  background: hsla(var(--card) / 0.98);
  padding: 0.65rem 0.75rem;
  box-shadow: 0 2px 6px rgba(0,0,0,0.04);
}
.nav-submenu a:hover { transform: translateX(6px); box-shadow: 0 6px 18px rgba(0,0,0,0.08); }

.nav-label { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

/* Search dropdowns */
.search-container { position: relative; }
.search-dropdown { position: absolute; top: 100%; left: 0; right: 0; background: hsl(var(--card)); border: 1px solid hsl(var(--border)); border-top: none; border-radius: 0 0 var(--radius) var(--radius); box-shadow: 0 10px 25px rgba(0,0,0,.08); z-index: 1000; max-height: 300px; overflow-y: auto; }
.search-item { padding: 12px 16px; cursor: pointer; transition: background-color .2s; border-bottom: 1px solid #f3f4f6; }
.search-item:hover, .search-item.selected { background-color: #f3f4f6; }

/* Category badges */
.category-badge { display: inline-flex; align-items: center; padding: 4px 8px; border-radius: 12px; font-size: .75rem; font-weight: 500; }
.category-active { background-color: #dcfce7; color: #166534; }
.category-closed { background-color: #fef2f2; color: #dc2626; }

/* Utilities */
.shadow-card { box-shadow: 0 1px 3px 0 rgb(0 0 0 / 0.1), 0 1px 2px -1px rgb(0 0 0 / 0.1); }
.shadow-card-hover { box-shadow: 0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1); }

/* Fine-grained UI states */
.table-row { transition: background-color .2s ease-in-out; }
.table-row:hover { background-color: #f9fafb; }

/* Receipt print window size helper */
@media print {
  body { background: white; }
}

/* Dark-mode overrides for common Tailwind text utility classes used in legacy pages */
.dark .text-gray-900,
.dark .text-gray-800,
.dark .text-gray-700,
.dark .text-black {
  color: hsl(var(--foreground)) !important;
}

.dark .text-gray-600,
.dark .text-gray-500 {
  color: hsl(var(--muted-foreground)) !important;
}

/* Dark theme: keep hover states dark so light text stays visible */
.dark .hover\:bg-white:hover,
.dark .hover\:bg-gray-50:hover,
.dark .hover\:bg-gray-100:hover,
.dark .hover\:bg-gray-200:hover,
.dark .hover\:bg-blue-50:hover,
.dark .hover\:bg-blue-100:hover,
.dark .hover\:bg-green-50:hover,
.dark .hover\:bg-purple-50:hover,
.dark .hover\:bg-red-50:hover,
.dark .hover\:bg-indigo-50:hover,
.dark .hover\:bg-orange-50:hover {
  background-color: #1f2937 !important;
  color: #f9fafb !important;
  border-color: #374151 !important;
}

.dark .text-gray-400,
.dark .text-gray-300,
.dark .text-gray-200 {
  color: hsl(var(--muted-foreground) / 0.8) !important;
}

/* Ensure default table text remains readable in dark mode */
.dark table,
.dark th,
.dark td {
  color: hsl(var(--foreground));
}

/* Dark mode surface and utility remapping */
.dark .card {
  background-color: hsl(var(--card)) !important;
  color: hsl(var(--card-foreground)) !important;
  border-color: hsl(var(--border)) !important;
}

.dark .bg-white { background-color: hsl(var(--card)) !important; }
.dark .bg-gray-50 { background-color: hsla(var(--muted) / 0.20) !important; }

/* Sidebar collapsed state */
body.sidebar-collapsed .sidebar { width: 4.5rem !important; box-shadow: 4px 0 20px rgba(0,0,0,0.08); }
body.sidebar-collapsed .content-area { margin-left: 4.5rem !important; }
body.sidebar-collapsed .nav-label { display: none; }
body.sidebar-collapsed .nav-item,
body.sidebar-collapsed .nav-group-toggle { justify-content: center; padding-left: 0.75rem; padding-right: 0.75rem; }
body.sidebar-collapsed .nav-item i,
body.sidebar-collapsed .nav-group-toggle i { margin-right: 0; }
body.sidebar-collapsed .nav-submenu { display: none !important; }
body.sidebar-collapsed .nav-chevron { display: none; }

@media (max-width: 768px) {
  body.sidebar-collapsed .sidebar { width: 100%; }
  body.sidebar-collapsed .content-area { margin-left: 0; }
  body.sidebar-collapsed .nav-label { display: inline; }
}
.dark .bg-gray-100 { background-color: hsla(var(--muted) / 0.28) !important; }
.dark .bg-blue-50 { background-color: rgba(59, 130, 246, 0.12) !important; }
.dark .bg-green-50 { background-color: rgba(16, 185, 129, 0.12) !important; }
.dark .bg-yellow-50 { background-color: rgba(245, 158, 11, 0.14) !important; }
.dark .bg-red-50 { background-color: rgba(239, 68, 68, 0.12) !important; }
.dark .bg-orange-50 { background-color: rgba(249, 115, 22, 0.14) !important; }
.dark .bg-purple-50 { background-color: rgba(139, 92, 246, 0.12) !important; }

.dark .border-gray-200, .dark .border-gray-300, .dark .border-gray-400 { border-color: hsl(var(--border)) !important; }

/* Tone down vivid dark-text utilities when in dark mode */
.dark .text-blue-900 { color: #bfdbfe !important; }
.dark .text-green-900 { color: #bbf7d0 !important; }
.dark .text-yellow-900 { color: #fde68a !important; }
.dark .text-red-900 { color: #fecaca !important; }
.dark .text-orange-900 { color: #fed7aa !important; }

/* Inputs and form controls in dark mode */
.dark input[type="text"],
.dark input[type="number"],
.dark input[type="date"],
.dark input[type="email"],
.dark input[type="password"],
.dark input[type="tel"],
.dark select,
.dark textarea {
  background-color: hsl(var(--input)) !important;
  color: hsl(var(--foreground)) !important;
  border-color: hsl(var(--border)) !important;
}
.dark input[type="text"]:focus,
.dark input[type="number"]:focus,
.dark input[type="date"]:focus,
.dark input[type="email"]:focus,
.dark input[type="password"]:focus,
.dark input[type="tel"]:focus,
.dark select:focus,
.dark textarea:focus,
/* Preserve dark input on validation state changes */
.dark input[type="text"]:valid,
.dark input[type="text"]:invalid,
.dark input[type="email"]:valid,
.dark input[type="email"]:invalid,
.dark input[type="password"]:valid,
.dark input[type="password"]:invalid,
.dark input[type="number"]:valid,
.dark input[type="number"]:invalid,
.dark input[type="date"]:valid,
.dark input[type="date"]:invalid,
.dark input[type="tel"]:valid,
.dark input[type="tel"]:invalid,
.dark textarea:valid,
.dark textarea:invalid {
  background-color: hsl(var(--input)) !important;
  color: hsl(var(--foreground)) !important;
}
/* Tame browser autofill bright background in dark mode */
.dark input:-webkit-autofill,
.dark input:-webkit-autofill:focus,
.dark textarea:-webkit-autofill,
.dark select:-webkit-autofill {
  -webkit-text-fill-color: hsl(var(--foreground)) !important;
  transition: background-color 9999s ease-in-out 0s;
  box-shadow: 0 0 0px 1000px hsl(var(--input)) inset !important;
}
.dark input::placeholder,
.dark textarea::placeholder { color: hsl(var(--muted-foreground)) !important; }

/* Search dropdown and items in dark mode */
.dark .search-dropdown {
  background: hsl(var(--card));
  border-color: hsl(var(--border));
}
.dark .search-item { border-bottom-color: hsl(var(--border)); }
.dark .search-item:hover, .dark .search-item.selected { background-color: hsla(var(--muted) / 0.25) !important; }

/* Student profile table divider tuning */
.profile-table thead { border-bottom-color: hsl(var(--border)) !important; }
.profile-table tbody tr { border-bottom: 1px solid hsla(var(--border) / 0.5); }
/* Dark mode: soften row dividers to 50% opacity light line */
.dark .profile-table tbody tr { border-bottom: 1px solid hsla(0 0% 100% / 0.5) !important; }

/* Override Tailwind divide utilities in dark mode to 50% light line */
.dark .divide-gray-200 > :not([hidden]) ~ :not([hidden]) {
  border-color: hsla(0 0% 100% / 0.5) !important;
}
.dark .divide-gray-300 > :not([hidden]) ~ :not([hidden]) {
  border-color: hsla(0 0% 100% / 0.5) !important;
}

/* Invoice-style preview for process payment modal */
.invoice-preview { display: grid; grid-template-columns: 1fr; gap: 12px; }
.invoice-header { display: flex; align-items: center; justify-content: space-between; padding: 12px 16px; border-bottom: 1px solid hsl(var(--border)); background: hsl(var(--elevated)); }
.invoice-title { font-size: 1rem; font-weight: 700; }
.invoice-meta { display: grid; grid-template-columns: auto auto; gap: 8px 16px; font-size: .8rem; color: hsl(var(--muted-foreground)); }
.invoice-badge { display: inline-flex; align-items: center; gap: 6px; padding: 2px 8px; border-radius: 9999px; font-size: .7rem; font-weight: 600; border: 1px solid hsl(var(--border)); }
.invoice-badge.draft { background: hsla(var(--muted) / 0.3); color: hsl(var(--muted-foreground)); }
.invoice-badge.active { background: #dcfce7; color: #166534; border-color: #bbf7d0; }

.invoice-section { background: hsl(var(--card)); border: 1px solid hsl(var(--border)); border-radius: var(--radius); overflow: hidden; }
.invoice-section .section-header { background: hsl(var(--elevated)); border-bottom: 1px solid hsl(var(--border)); padding: 10px 14px; }
.invoice-section .section-header .section-title { font-size: .95rem; font-weight: 600; }

.invoice-items table { width: 100%; border-collapse: collapse; }
.invoice-items thead th { background: hsl(var(--elevated)); color: hsl(var(--muted-foreground)); font-size: .72rem; text-transform: uppercase; letter-spacing: .04em; padding: 10px 8px; text-align: left; }
.invoice-items tbody td { padding: 10px 8px; font-size: .85rem; }
.invoice-items tbody tr { border-bottom: 1px solid hsla(var(--border) / 0.5); }
.dark .invoice-items tbody tr { border-bottom: 1px solid hsla(var(--border) / 0.65); }
.invoice-items .text-right { text-align: right; }
.invoice-items .font-mono { font-variant-numeric: tabular-nums; font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace; }

.invoice-summary { display: grid; grid-template-columns: 1fr; gap: 8px; padding: 12px 14px; background: hsla(var(--muted) / 0.25); }
.invoice-summary-row { display: flex; align-items: center; justify-content: space-between; font-size: .9rem; }
.invoice-summary-row.total { font-weight: 700; }
.invoice-summary-amount { font-variant-numeric: tabular-nums; }

@media (min-width: 768px) {
  .invoice-preview { grid-template-columns: 2fr 1fr; }
  .invoice-pane { background: hsl(var(--card)); border: 1px solid hsl(var(--border)); border-radius: var(--radius); overflow: hidden; }
  .invoice-pane + .invoice-pane { align-self: start; }
}

/* Print optimization for invoice modal */
@media print {
  .modal { position: static; background: transparent; }
  .enhanced-modal { box-shadow: none; max-width: 100%; width: 100%; }
  .invoice-preview { grid-template-columns: 1fr; }
}