/* Global Styles & Variable Overrides */
:root {
  color-scheme: dark;
}

/* Light Theme overrides when .light class is on html */
html.light {
  color-scheme: light;
}

html.light body {
  background-color: #f8fafc; /* slate-50 */
  color: #1e293b; /* slate-800 */
}

/* Glassmorphism utility card */
.glass-card {
  background: rgba(15, 23, 42, 0.45);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border: 1px solid rgba(255, 255, 255, 0.05);
}

html.light .glass-card {
  background: rgba(255, 255, 255, 0.7);
  backdrop-filter: blur(12px);
  border: 1px solid rgba(0, 0, 0, 0.06);
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.02);
}

/* Light theme header and navigations */
html.light header {
  background-color: rgba(255, 255, 255, 0.85);
  border-bottom: 1px solid rgba(0, 0, 0, 0.06);
}

html.light header a,
html.light header button:not(#theme-toggle):not(#mobile-menu-btn) {
  color: #334155;
}

html.light header a:hover,
html.light header button:not(#theme-toggle):not(#mobile-menu-btn):hover {
  color: #0284c7;
}

html.light #theme-toggle,
html.light #mobile-menu-btn {
  background-color: #ffffff !important;
  border-color: #cbd5e1 !important;
  color: #475569 !important;
}

html.light #theme-toggle:hover,
html.light #mobile-menu-btn:hover {
  background-color: #f1f5f9 !important;
  color: #0284c7 !important;
}

html.light .adsense-box {
  background-color: rgba(0, 0, 0, 0.02);
  border-color: rgba(0, 0, 0, 0.1);
  color: #94a3b8;
}

/* Custom transitions and hover states */
.transition-all-300 {
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

/* Scrollbar customizations */
::-webkit-scrollbar {
  width: 10px;
  height: 10px;
}
::-webkit-scrollbar-track {
  background: #0b1329;
}
html.light ::-webkit-scrollbar-track {
  background: #f1f5f9;
}
::-webkit-scrollbar-thumb {
  background: #1e293b;
  border-radius: 9999px;
  border: 2px solid #0b1329;
}
html.light ::-webkit-scrollbar-thumb {
  background: #cbd5e1;
  border: 2px solid #f1f5f9;
}
::-webkit-scrollbar-thumb:hover {
  background: #334155;
}

/* Printing styles for CSC ID card layout & documents */
@media print {
  body {
    background: white !important;
    color: black !important;
  }
  
  /* Hide all UI templates, advertising, and action items */
  header, footer, nav, aside, 
  .adsense-box, #theme-toggle, #mobile-menu-btn,
  .no-print, button, input[type="file"], input[type="button"],
  .fixed, .flex-wrap, .breadcrumb-nav, .floating-contact {
    display: none !important;
  }
  
  /* Reset margins for standard print engines */
  @page {
    margin: 0;
  }
  
  body, main, .container, #tool-app {
    margin: 0 !important;
    padding: 0 !important;
    width: 100% !important;
    box-shadow: none !important;
    border: none !important;
  }

  /* Printable ID Card specific dimensions (CR80 PVC standard card) */
  .id-card-print-container {
    display: block !important;
    position: absolute;
    top: 0;
    left: 0;
    width: 85.6mm;
    height: 53.98mm;
    page-break-inside: avoid;
  }

  /* Document Print layouts (Resume, Invoice, etc.) */
  .document-print-container {
    width: 210mm; /* A4 width */
    min-height: 297mm; /* A4 height */
    padding: 20mm !important;
    margin: 0 auto;
    background: white;
    color: black;
    box-sizing: border-box;
  }
}

/* Light Mode Card & Text Global Overrides */
html.light .bg-slate-800\/40,
html.light .bg-slate-900\/40,
html.light .bg-slate-800\/20,
html.light .bg-slate-900\/20,
html.light .bg-slate-800\/30,
html.light .bg-slate-900\/30 {
  background-color: #ffffff !important;
  border-color: rgba(0, 0, 0, 0.08) !important;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.02) !important;
}

html.light .bg-slate-950\/40 {
  background-color: rgba(0, 0, 0, 0.02) !important;
  border-color: rgba(0, 0, 0, 0.06) !important;
}

html.light .text-slate-400:not(footer *),
html.light .text-slate-500:not(footer *) {
  color: #475569 !important; /* slate-600 */
}

html.light .text-slate-300:not(footer *),
html.light .text-slate-200:not(footer *),
html.light .text-slate-100:not(footer *) {
  color: #1e293b !important; /* slate-800 */
}

html.light .text-white:not(footer *),
html.light h1:not(footer *),
html.light h2:not(footer *),
html.light h3:not(footer *),
html.light h4:not(footer *),
html.light h5:not(footer *),
html.light h6:not(footer *) {
  color: #0f172a !important; /* slate-900 */
}

html.light .border-slate-800,
html.light .border-slate-700,
html.light .border-slate-700\/60,
html.light .border-slate-800\/80 {
  border-color: rgba(0, 0, 0, 0.08) !important;
}

html.light .bg-slate-900\/40 p-6 {
  background-color: rgba(255, 255, 255, 0.75) !important;
}

html.light .prose {
  color: #334155 !important;
}

html.light .prose h1,
html.light .prose h2,
html.light .prose h3 {
  color: #0f172a !important;
}

/* --- Input field background and text overrides in light mode --- */
html.light input[type="text"],
html.light input[type="number"],
html.light input[type="date"],
html.light input[type="email"],
html.light input[type="password"],
html.light input[type="search"],
html.light input[type="file"],
html.light select,
html.light textarea,
html.light input:not([type="range"]):not([type="checkbox"]):not([type="radio"]) {
  background-color: #ffffff !important;
  color: #0f172a !important;
  border-color: #cbd5e1 !important;
}

html.light input::placeholder,
html.light textarea::placeholder {
  color: #64748b !important;
}

html.light input:focus,
html.light select:focus,
html.light textarea:focus {
  border-color: #0ea5e9 !important;
  background-color: #ffffff !important;
  box-shadow: 0 0 0 2px rgba(14, 165, 233, 0.15) !important;
}

/* --- Preserve white text on primary buttons, badges, and gradients in light mode --- */
html.light a.bg-gradient-to-r,
html.light a.bg-gradient-to-r *,
html.light .bg-gradient-to-br,
html.light .bg-gradient-to-br *,
html.light .bg-gradient-to-r,
html.light .bg-gradient-to-r *,
html.light .bg-sky-500,
html.light .bg-sky-600,
html.light .bg-blue-600,
html.light .bg-emerald-600,
html.light .bg-emerald-500,
html.light .bg-blue-700,
html.light .bg-emerald-600 *,
html.light .bg-sky-500 * {
  color: #ffffff !important;
}

/* --- Enhance color contrast of light elements in light mode --- */
html.light .text-sky-400 {
  color: #0284c7 !important; /* sky-600 */
}
html.light .text-emerald-400 {
  color: #059669 !important; /* emerald-600 */
}
html.light .text-emerald-500 {
  color: #047857 !important; /* emerald-700 */
}
html.light .text-amber-400 {
  color: #d97706 !important; /* amber-600 */
}

/* --- Header Dropdown / Mega Menu & Drawer Light Mode Overrides --- */
html.light header .bg-slate-900,
html.light header div[class*="bg-slate-900"][class*="border-slate-800"] {
  background-color: #ffffff !important;
  border-color: rgba(0, 0, 0, 0.08) !important;
  box-shadow: 0 20px 40px rgba(0, 0, 0, 0.08) !important;
}

html.light header a[class*="hover:bg-slate-700"]:hover,
html.light header a[class*="hover:bg-slate-700\/30"]:hover {
  background-color: #f1f5f9 !important;
  color: #0284c7 !important;
}

html.light #header-search-results {
  background-color: #ffffff !important;
  border-color: rgba(0, 0, 0, 0.08) !important;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.08) !important;
}

html.light #header-search-results a:hover {
  background-color: #f1f5f9 !important;
}

html.light #header-search-results span {
  color: #0f172a !important;
}

html.light #header-search-results span.text-slate-500 {
  color: #64748b !important;
}

html.light #mobile-drawer {
  background-color: rgba(255, 255, 255, 0.98) !important;
  color: #0f172a !important;
}

html.light #mobile-drawer a {
  color: #334155 !important;
}

html.light #mobile-drawer a:hover {
  color: #0284c7 !important;
}

html.light #mobile-drawer span {
  color: #0284c7 !important;
}

/* Light mode overrides for mobile search results */
html.light #mobile-search-results {
  background-color: #ffffff !important;
  border-color: rgba(0, 0, 0, 0.08) !important;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.08) !important;
}

html.light #mobile-search-results a:hover {
  background-color: #f1f5f9 !important;
}

html.light #mobile-search-results span {
  color: #0f172a !important;
}

html.light #mobile-search-results span.text-slate-500 {
  color: #64748b !important;
}

/* Light mode overrides for categories list hover */
html.light header a[class*="hover:bg-slate-700/50"]:hover {
  background-color: #f1f5f9 !important;
  color: #0284c7 !important;
}

/* --- Ensure footer keeps its dark background and visible text in light mode --- */
html.light footer {
  background-color: #020617 !important; /* slate-950 */
  color: #94a3b8 !important; /* slate-400 */
}

html.light footer .text-slate-400,
html.light footer .text-slate-500,
html.light footer a,
html.light footer span,
html.light footer p,
html.light footer li {
  color: #94a3b8 !important;
}

html.light footer h4,
html.light footer strong,
html.light footer b {
  color: #ffffff !important;
}

html.light footer a:hover {
  color: #38bdf8 !important; /* sky-400 */
}

/* --- Support transparent/gradient headings in light mode --- */
html.light .text-transparent {
  color: transparent !important;
  -webkit-text-fill-color: transparent !important;
}

/* --- Rich article elements inside .prose in light mode --- */
html.light .prose strong {
  color: #0f172a !important;
}

html.light .prose a {
  color: #0284c7 !important;
}

html.light .prose code {
  color: #0f172a !important;
  background-color: #f1f5f9 !important;
}

html.light .prose ol,
html.light .prose ul,
html.light .prose li {
  color: #334155 !important;
}

/* Fix text contrast on solid dark buttons and containers in Light Mode (excluding header menus) */
html.light .bg-slate-800:not(header *):not(header):not(input):not(select):not(textarea),
html.light .bg-slate-700:not(header *):not(header):not(input):not(select):not(textarea),
html.light .bg-slate-900:not(header *):not(header):not(input):not(select):not(textarea),
html.light .bg-slate-950:not(header *):not(header):not(input):not(select):not(textarea),
html.light .bg-slate-800:not(header *):not(header):not(input):not(select):not(textarea) *,
html.light .bg-slate-700:not(header *):not(header):not(input):not(select):not(textarea) *,
html.light .bg-slate-900:not(header *):not(header):not(input):not(select):not(textarea) *,
html.light .bg-slate-950:not(header *):not(header):not(input):not(select):not(textarea) * {
  color: #ffffff !important;
}