/* Custom Styles for CivilTracker */
@keyframes fadeIn {
  from { opacity: 0; transform: translateY(6px); }
  to { opacity: 1; transform: translateY(0); }
}

@keyframes scaleIn {
  from { opacity: 0; transform: scale(0.95); }
  to { opacity: 1; transform: scale(1); }
}

.animate-fadeIn {
  animation: fadeIn 0.2s ease-out forwards;
}

.animate-scaleIn {
  animation: scaleIn 0.2s cubic-bezier(0.16, 1, 0.3, 1) forwards;
}

/* Custom Scrollbars */
.custom-scrollbar::-webkit-scrollbar {
  width: 6px;
  height: 6px;
}

.custom-scrollbar::-webkit-scrollbar-track {
  background: rgba(15, 23, 42, 0.6);
}

.custom-scrollbar::-webkit-scrollbar-thumb {
  background: rgba(51, 65, 85, 0.8);
  border-radius: 9999px;
}

.custom-scrollbar::-webkit-scrollbar-thumb:hover {
  background: rgba(100, 116, 139, 0.9);
}

/* Hide scrollbars for mobile horizontal tabs */
.no-scrollbar::-webkit-scrollbar {
  display: none;
}
.no-scrollbar {
  -ms-overflow-style: none;
  scrollbar-width: none;
}

/* Nav Link Active State */
.nav-btn.active {
  background: rgba(245, 158, 11, 0.12);
  color: #fbbf24;
  border-left: 3px solid #f59e0b;
}

/* Detail subtab active state */
.detail-subtab-btn.active {
  color: #fbbf24;
  border-bottom: 2px solid #f59e0b;
}

/* Stat card hover glow */
.card-hover {
  transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1);
}

.card-hover:hover {
  transform: translateY(-2px);
  box-shadow: 0 12px 24px -10px rgba(0, 0, 0, 0.5);
}

/* Table Row Highlights */
tr.row-highlight {
  background-color: rgba(245, 158, 11, 0.05);
}

/* Smooth Transitions for Theme Switch */
body, header, aside, main, section, table, button, input, select, textarea {
  transition: background-color 0.15s ease, border-color 0.15s ease, color 0.15s ease;
}

/* Touch Friendly Utilities */
@media (max-width: 768px) {
  input, select, textarea, button {
    font-size: 14px !important;
  }
}

/* ========================================================================= */
/* WHITE MODE / LIGHT THEME COMPLETE SPECIFICATION                           */
/* ========================================================================= */

html.light body {
  background-color: #f8fafc !important;
  color: #0f172a !important;
}

html.light main {
  background-color: #f8fafc !important;
}

/* Sidebar & Header in Light Mode */
html.light #sidebar {
  background-color: #ffffff !important;
  border-right-color: #e2e8f0 !important;
  box-shadow: 2px 0 12px rgba(0, 0, 0, 0.03);
}

html.light #sidebar > div:first-child {
  border-bottom-color: #e2e8f0 !important;
}

html.light #sidebar > div:last-child {
  background-color: #f8fafc !important;
  border-top-color: #e2e8f0 !important;
}

html.light header {
  background-color: #ffffff !important;
  border-bottom-color: #e2e8f0 !important;
  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.02);
}

/* Container and Card Surfaces */
html.light .bg-slate-950,
html.light .bg-slate-950\/80,
html.light .bg-slate-950\/60 {
  background-color: #ffffff !important;
}

html.light .bg-slate-900,
html.light .bg-slate-900\/90,
html.light .bg-slate-900\/60 {
  background-color: #f8fafc !important;
}

html.light .bg-slate-800,
html.light .bg-slate-800\/80,
html.light .bg-slate-800\/60 {
  background-color: #f1f5f9 !important;
}

/* Border System in Light Mode */
html.light .border-slate-800,
html.light .border-slate-800\/80,
html.light .border-slate-800\/60,
html.light .border-slate-700,
html.light .border-slate-600 {
  border-color: #e2e8f0 !important;
}

html.light .divide-slate-800\/60 > :not([hidden]) ~ :not([hidden]) {
  border-color: #f1f5f9 !important;
}

/* Typography Overrides */
html.light .text-white,
html.light .text-slate-100 {
  color: #0f172a !important;
}

html.light .text-slate-200 {
  color: #1e293b !important;
}

html.light .text-slate-300 {
  color: #334155 !important;
}

html.light .text-slate-400 {
  color: #64748b !important;
}

html.light .text-slate-500 {
  color: #94a3b8 !important;
}

/* Primary Brand Headers & Subtitles */
html.light #brand-title {
  color: #0f172a !important;
}

html.light #brand-company {
  color: #64748b !important;
}

html.light #page-title {
  color: #0f172a !important;
}

html.light #page-subtitle {
  color: #64748b !important;
}

/* High Contrast Accent Colors in Light Mode */
html.light .text-emerald-400 {
  color: #059669 !important;
}

html.light .text-amber-400 {
  color: #d97706 !important;
}

html.light .text-purple-400 {
  color: #7c3aed !important;
}

html.light .text-purple-300 {
  color: #6d28d9 !important;
}

html.light .text-blue-400 {
  color: #2563eb !important;
}

html.light .text-sky-400 {
  color: #0284c7 !important;
}

html.light .text-orange-400 {
  color: #ea580c !important;
}

html.light .text-teal-400 {
  color: #0d9488 !important;
}

html.light .text-rose-400 {
  color: #e11d48 !important;
}

html.light .text-indigo-400 {
  color: #4f46e5 !important;
}

html.light .text-red-400 {
  color: #dc2626 !important;
}

html.light .text-green-400 {
  color: #16a34a !important;
}

html.light .text-yellow-400 {
  color: #ca8a04 !important;
}

/* Header Buttons in Light Mode */
html.light header button:not(.bg-gradient-to-r) {
  color: #475569 !important;
}

html.light header button:not(.bg-gradient-to-r):hover {
  background-color: #f1f5f9 !important;
  color: #d97706 !important;
}

/* Navigation Links in Light Mode */
html.light .nav-btn {
  color: #475569 !important;
}

html.light .nav-btn:hover {
  background-color: #f8fafc !important;
  color: #d97706 !important;
}

html.light .nav-btn.active {
  background-color: #fef3c7 !important;
  color: #b45309 !important;
  border-left: 3px solid #d97706 !important;
}

html.light .nav-btn.active i {
  color: #d97706 !important;
}

html.light #nav-project-badge {
  background-color: #e2e8f0 !important;
  color: #334155 !important;
}

/* Form Controls (Inputs, Selects, Textareas) */
html.light input:not([type="radio"]):not([type="checkbox"]),
html.light select,
html.light textarea {
  background-color: #ffffff !important;
  border-color: #cbd5e1 !important;
  color: #0f172a !important;
}

html.light input::placeholder,
html.light textarea::placeholder {
  color: #94a3b8 !important;
}

html.light input:focus,
html.light select:focus,
html.light textarea:focus {
  border-color: #f59e0b !important;
  outline: none !important;
  box-shadow: 0 0 0 3px rgba(245, 158, 11, 0.15) !important;
}

/* Standard Secondary Action Buttons */
html.light button.bg-slate-800 {
  background-color: #f1f5f9 !important;
  color: #334155 !important;
  border: 1px solid #e2e8f0 !important;
}

html.light button.bg-slate-800:hover {
  background-color: #e2e8f0 !important;
  color: #0f172a !important;
}

html.light #theme-toggle-btn {
  background-color: #f1f5f9 !important;
  color: #334155 !important;
  border: 1px solid #e2e8f0 !important;
}

html.light #theme-toggle-btn:hover {
  background-color: #fef3c7 !important;
  color: #b45309 !important;
  border-color: #fde68a !important;
}

/* Quick Action Dropdown Menu */
html.light #quick-action-menu {
  background-color: #ffffff !important;
  border-color: #e2e8f0 !important;
  box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 8px 10px -6px rgba(0, 0, 0, 0.05) !important;
}

html.light #quick-action-menu button {
  color: #334155 !important;
}

html.light #quick-action-menu button:hover {
  background-color: #fef3c7 !important;
  color: #b45309 !important;
}

/* Data Tables in Light Mode */
html.light table thead tr {
  background-color: #f1f5f9 !important;
  color: #475569 !important;
  border-bottom-color: #e2e8f0 !important;
}

html.light table tbody tr {
  background-color: #ffffff !important;
  color: #1e293b !important;
}

html.light table tbody tr:hover {
  background-color: #f8fafc !important;
}

/* Modals & Drawers in Light Mode */
html.light #modal-project-detail > div,
html.light #modal-project > div,
html.light #modal-material-tx > div,
html.light #modal-expense > div,
html.light #modal-dsr > div,
html.light #modal-inspection > div,
html.light #modal-inventory > div,
html.light #modal-workforce > div,
html.light #modal-machinery > div,
html.light #modal-task > div,
html.light #modal-milestone > div,
html.light #modal-document > div,
html.light #modal-attendance > div {
  background-color: #ffffff !important;
  border-color: #e2e8f0 !important;
  box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.2) !important;
}

html.light .bg-slate-950.border-b {
  background-color: #f8fafc !important;
  border-bottom-color: #e2e8f0 !important;
}

html.light .bg-slate-950\/60 {
  background-color: #f8fafc !important;
  border-bottom-color: #e2e8f0 !important;
}

/* Modal backdrop overlay */
html.light .fixed.inset-0.bg-slate-950\/80 {
  background-color: rgba(15, 23, 42, 0.5) !important;
}

html.light #sidebar-backdrop {
  background-color: rgba(15, 23, 42, 0.5) !important;
}

/* Detail Subtabs in Light Mode */
html.light .detail-subtab-btn {
  color: #64748b !important;
}

html.light .detail-subtab-btn:hover {
  color: #0f172a !important;
}

html.light .detail-subtab-btn.active {
  color: #d97706 !important;
  border-bottom: 2px solid #d97706 !important;
}

/* Badges & Pills High-Contrast in Light Mode */
html.light .bg-amber-500\/10 {
  background-color: #fef3c7 !important;
  color: #b45309 !important;
  border-color: #fde68a !important;
}

html.light .bg-emerald-500\/10,
html.light .bg-emerald-500\/20 {
  background-color: #d1fae5 !important;
  color: #047857 !important;
  border-color: #a7f3d0 !important;
}

html.light .bg-blue-500\/10,
html.light .bg-blue-500\/20 {
  background-color: #dbeafe !important;
  color: #1d4ed8 !important;
  border-color: #bfdbfe !important;
}

html.light .bg-purple-500\/10,
html.light .bg-purple-500\/20 {
  background-color: #f3e8ff !important;
  color: #7e22ce !important;
  border-color: #e9d5ff !important;
}

html.light .bg-rose-500\/10,
html.light .bg-rose-500\/20,
html.light .bg-red-500\/20 {
  background-color: #ffe4e6 !important;
  color: #be123c !important;
  border-color: #fecdd3 !important;
}

html.light .bg-sky-500\/10,
html.light .bg-sky-500\/20 {
  background-color: #e0f2fe !important;
  color: #0369a1 !important;
  border-color: #bae6fd !important;
}

html.light .bg-orange-500\/10,
html.light .bg-orange-500\/20 {
  background-color: #ffedd5 !important;
  color: #c2410c !important;
  border-color: #fed7aa !important;
}

html.light .bg-teal-500\/10,
html.light .bg-teal-500\/20 {
  background-color: #ccfbf1 !important;
  color: #0f766e !important;
  border-color: #99f6e4 !important;
}

html.light .bg-indigo-500\/10,
html.light .bg-indigo-500\/20 {
  background-color: #e0e7ff !important;
  color: #4338ca !important;
  border-color: #c7d2fe !important;
}

/* Light Mode Custom Scrollbar */
html.light .custom-scrollbar::-webkit-scrollbar-track {
  background: #f1f5f9 !important;
}

html.light .custom-scrollbar::-webkit-scrollbar-thumb {
  background: #cbd5e1 !important;
}

html.light .custom-scrollbar::-webkit-scrollbar-thumb:hover {
  background: #94a3b8 !important;
}

/* Card Shadows & Elevation in Light Mode */
html.light .shadow-lg,
html.light .shadow-2xl {
  box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.05), 0 2px 4px -2px rgba(0, 0, 0, 0.05) !important;
}

html.light .group:hover {
  box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.08), 0 4px 6px -4px rgba(0, 0, 0, 0.04) !important;
  border-color: #f59e0b !important;
}

/* Radio button container highlight in Light Mode */
html.light label.cursor-pointer.bg-slate-950 {
  background-color: #f8fafc !important;
  border-color: #cbd5e1 !important;
}