/* ==========================================================================
   KhaoKhit Financial Data Management - Global Typography & Font Enlargement
   Enhanced Font Sizing for High Legibility Across All Pages
   ========================================================================== */

@import url('https://fonts.googleapis.com/css2?family=Plus+Jakarta+Sans:wght@400;500;600;700;800&family=Prompt:ital,wght@0,300;0,400;0,500;0,600;0,700;0,800;1,400&family=Sarabun:wght@300;400;500;600;700;800&display=swap');

/* 1. Global Base Scale-up (increases all rem-based sizes by ~10-15%) */
html {
    font-size: 17.5px !important;
    -webkit-text-size-adjust: 100%;
}

@media (min-width: 1536px) {
    html {
        font-size: 18px !important;
    }
}

/* 2. Global Thai & Latin Font Family */
body {
    font-family: 'Prompt', 'Sarabun', 'Plus Jakarta Sans', -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif !important;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    text-rendering: optimizeLegibility;
    letter-spacing: 0.01em;
}

/* 3. Form Inputs, Selects, Buttons, and Textareas */
input, select, textarea, button, optgroup, option {
    font-family: 'Prompt', 'Sarabun', 'Plus Jakarta Sans', -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif !important;
}

input:not([type="checkbox"]):not([type="radio"]), 
select, 
textarea {
    font-size: 1rem !important;
    line-height: 1.5 !important;
}

/* 4. Enhancement for Micro-text, Badges, and Chips (Prevents unreadable small text) */
.text-xs {
    font-size: 0.85rem !important; /* ~14.9px instead of 12px */
    line-height: 1.35 !important;
}

.text-\[10px\], 
.text-\[11px\], 
.text-\[11\.5px\], 
.text-\[12px\] {
    font-size: 0.8rem !important; /* ~14px instead of 10-12px */
    line-height: 1.3 !important;
}

.text-sm {
    font-size: 0.95rem !important; /* ~16.6px instead of 14px */
    line-height: 1.45 !important;
}

.text-base {
    font-size: 1.05rem !important; /* ~18.4px instead of 16px */
}

/* 5. Numbers and Monospace Financial Typography */
.font-mono {
    font-family: 'Plus Jakarta Sans', 'SFMono-Regular', Menlo, Monaco, Consolas, monospace !important;
    letter-spacing: 0.02em;
}

/* 6. Tables - Clear and Legible Financial Records */
table {
    font-size: 0.95rem;
}

table th {
    font-size: 0.95rem !important;
    font-weight: 700 !important;
    letter-spacing: 0.02em;
}

table td {
    font-size: 0.95rem !important;
    letter-spacing: 0.01em;
}

/* 7. Flatpickr Calendar Enlargement for Thai Dates */
.flatpickr-calendar {
    font-family: 'Prompt', 'Sarabun', sans-serif !important;
    font-size: 15px !important;
}

.flatpickr-day {
    font-size: 15px !important;
    height: 38px !important;
    line-height: 38px !important;
}

.flatpickr-current-month {
    font-size: 110% !important;
}

/* 8. Modals & Dialogs */
.modal label, 
.modal-label {
    font-size: 0.95rem !important;
    font-weight: 600;
}

/* ==========================================================================
   9. Global Dark Mode Theme Engine (Class-based .dark)
   Supports Light / Dark / System / Scheduled Time modes seamlessly
   ========================================================================== */
html.dark, html.dark body, body.dark {
    color-scheme: dark !important;
    background-color: #0b132b !important;
    background-image:
        radial-gradient(at 0% 0%, rgba(14, 165, 233, 0.12) 0px, transparent 50%),
        radial-gradient(at 100% 0%, rgba(99, 102, 241, 0.12) 0px, transparent 50%),
        radial-gradient(at 50% 100%, rgba(15, 23, 42, 0.95) 0px, transparent 50%) !important;
    color: #e2e8f0 !important;
}

/* Cards & Surfaces (including opacity variations like bg-white/80, bg-white/85, etc.) */
html.dark .bg-white,
html.dark [class*="bg-white"] {
    background-color: #1e293b !important;
    color: #f1f5f9 !important;
    border-color: #334155 !important;
}

html.dark .bg-slate-50,
html.dark [class*="bg-slate-50"],
html.dark .bg-gray-50,
html.dark [class*="bg-gray-50"] {
    background-color: #0f172a !important;
    color: #e2e8f0 !important;
    border-color: #334155 !important;
}

html.dark .bg-slate-100,
html.dark [class*="bg-slate-100"],
html.dark .bg-gray-100,
html.dark [class*="bg-gray-100"] {
    background-color: #1e293b !important;
    color: #f1f5f9 !important;
    border-color: #334155 !important;
}

html.dark .bg-slate-200,
html.dark [class*="bg-slate-200"] {
    background-color: #334155 !important;
    color: #f8fafc !important;
}

/* Gradient Containers & Sub-surface Accent Pills */
html.dark .bg-indigo-50,
html.dark [class*="bg-indigo-50"],
html.dark .bg-indigo-100,
html.dark [class*="bg-indigo-100"] {
    background-color: rgba(49, 46, 129, 0.45) !important;
    border-color: rgba(99, 102, 241, 0.4) !important;
}
html.dark .bg-blue-50,
html.dark [class*="bg-blue-50"],
html.dark .bg-blue-100,
html.dark [class*="bg-blue-100"] {
    background-color: rgba(30, 58, 138, 0.45) !important;
    border-color: rgba(59, 130, 246, 0.4) !important;
}
html.dark .bg-purple-50,
html.dark [class*="bg-purple-50"],
html.dark .bg-purple-100,
html.dark [class*="bg-purple-100"] {
    background-color: rgba(88, 28, 135, 0.45) !important;
    border-color: rgba(168, 85, 247, 0.4) !important;
}
html.dark .bg-emerald-50,
html.dark [class*="bg-emerald-50"],
html.dark .bg-emerald-100,
html.dark [class*="bg-emerald-100"],
html.dark .bg-green-100,
html.dark [class*="bg-green-100"] {
    background-color: rgba(6, 78, 59, 0.45) !important;
    border-color: rgba(16, 185, 129, 0.4) !important;
}
html.dark .bg-teal-50,
html.dark [class*="bg-teal-50"],
html.dark .bg-teal-100,
html.dark [class*="bg-teal-100"] {
    background-color: rgba(19, 78, 74, 0.45) !important;
    border-color: rgba(20, 184, 166, 0.4) !important;
}
html.dark .bg-amber-50,
html.dark [class*="bg-amber-50"],
html.dark .bg-amber-100,
html.dark [class*="bg-amber-100"] {
    background-color: rgba(120, 53, 15, 0.45) !important;
    border-color: rgba(245, 158, 11, 0.4) !important;
}
html.dark .bg-rose-50,
html.dark [class*="bg-rose-50"],
html.dark .bg-rose-100,
html.dark [class*="bg-rose-100"],
html.dark .bg-red-50,
html.dark [class*="bg-red-50"],
html.dark .bg-red-100,
html.dark [class*="bg-red-100"] {
    background-color: rgba(136, 19, 55, 0.45) !important;
    border-color: rgba(244, 63, 94, 0.4) !important;
}
html.dark .bg-pink-50,
html.dark [class*="bg-pink-50"],
html.dark .bg-pink-100,
html.dark [class*="bg-pink-100"] {
    background-color: rgba(131, 24, 67, 0.45) !important;
    border-color: rgba(236, 72, 153, 0.4) !important;
}
html.dark .bg-orange-50,
html.dark [class*="bg-orange-50"],
html.dark .bg-orange-100,
html.dark [class*="bg-orange-100"] {
    background-color: rgba(124, 45, 18, 0.45) !important;
    border-color: rgba(249, 115, 22, 0.4) !important;
}

html.dark [class*="from-blue-50"] {
    --tw-gradient-from: rgba(30, 58, 138, 0.35) var(--tw-gradient-from-position) !important;
}
html.dark [class*="to-indigo-50"] {
    --tw-gradient-to: rgba(49, 46, 129, 0.35) var(--tw-gradient-to-position) !important;
}
html.dark [class*="from-emerald-50"] {
    --tw-gradient-from: rgba(6, 78, 59, 0.35) var(--tw-gradient-from-position) !important;
}
html.dark [class*="to-teal-50"] {
    --tw-gradient-to: rgba(4, 47, 46, 0.35) var(--tw-gradient-to-position) !important;
}
html.dark [class*="from-rose-50"] {
    --tw-gradient-from: rgba(136, 19, 55, 0.35) var(--tw-gradient-from-position) !important;
}
html.dark [class*="to-red-50"] {
    --tw-gradient-to: rgba(69, 10, 10, 0.35) var(--tw-gradient-to-position) !important;
}
html.dark [class*="from-purple-50"] {
    --tw-gradient-from: rgba(88, 28, 135, 0.35) var(--tw-gradient-from-position) !important;
}
html.dark [class*="to-purple-50"] {
    --tw-gradient-to: rgba(59, 7, 100, 0.4) var(--tw-gradient-to-position) !important;
}
html.dark [class*="from-amber-50"] {
    --tw-gradient-from: rgba(120, 53, 15, 0.35) var(--tw-gradient-from-position) !important;
}
html.dark [class*="to-orange-50"] {
    --tw-gradient-to: rgba(124, 45, 18, 0.25) var(--tw-gradient-to-position) !important;
}

/* Fix Gradient Text (Make solid visible white instead of black gradient clip) */
html.dark [class*="bg-clip-text"],
html.dark .bg-clip-text {
    background: none !important;
    background-image: none !important;
    -webkit-background-clip: border-box !important;
    background-clip: border-box !important;
    -webkit-text-fill-color: #f8fafc !important;
    color: #f8fafc !important;
}

/* Borders */
html.dark .border-white,
html.dark [class*="border-white"],
html.dark .border-slate-100,
html.dark [class*="border-slate-100"],
html.dark .border-slate-200,
html.dark [class*="border-slate-200"],
html.dark .border-gray-200,
html.dark [class*="border-gray-200"],
html.dark .border-gray-300,
html.dark [class*="border-gray-300"],
html.dark [class*="border-amber-200"],
html.dark [class*="border-indigo-200"],
html.dark [class*="border-purple-200"],
html.dark [class*="border-emerald-200"],
html.dark [class*="border-rose-200"],
html.dark [class*="border-blue-200"],
html.dark [class*="border-teal-200"],
html.dark [class*="border-pink-200"],
html.dark [class*="border-red-200"],
html.dark [class*="border-orange-200"] {
    border-color: #334155 !important;
}

html.dark [class*="shadow-slate-200"] {
    box-shadow: 0 10px 25px -5px rgba(0, 0, 0, 0.5) !important;
}

/* Text Colors */
html.dark [class*="text-slate-900"],
html.dark [class*="text-slate-800"],
html.dark [class*="text-gray-900"],
html.dark [class*="text-gray-800"] {
    color: #f8fafc !important;
}

html.dark [class*="text-slate-700"],
html.dark [class*="text-gray-700"] {
    color: #e2e8f0 !important;
}

html.dark [class*="text-slate-600"],
html.dark [class*="text-gray-600"] {
    color: #cbd5e1 !important;
}

html.dark [class*="text-slate-500"],
html.dark [class*="text-gray-500"] {
    color: #94a3b8 !important;
}

html.dark [class*="text-slate-400"],
html.dark [class*="text-gray-400"] {
    color: #94a3b8 !important;
}

/* Amber / Gold / Orange Text in Dark Mode */
html.dark .text-amber-900,
html.dark .text-amber-800,
html.dark .text-amber-700 {
    color: #fde68a !important;
}
html.dark .text-amber-600,
html.dark .text-amber-500 {
    color: #fbbf24 !important;
}
html.dark .text-yellow-800,
html.dark .text-yellow-700 {
    color: #fef08a !important;
}

/* Blue & Indigo Text in Dark Mode */
html.dark .text-blue-900,
html.dark .text-blue-800,
html.dark .text-blue-700 {
    color: #93c5fd !important;
}
html.dark .text-blue-600,
html.dark .text-blue-500 {
    color: #60a5fa !important;
}
html.dark .text-indigo-900,
html.dark .text-indigo-800,
html.dark .text-indigo-700 {
    color: #c7d2fe !important;
}
html.dark .text-indigo-600,
html.dark .text-indigo-500 {
    color: #a5b4fc !important;
}

/* Emerald & Green Text in Dark Mode */
html.dark .text-emerald-900,
html.dark .text-emerald-800,
html.dark .text-emerald-700 {
    color: #a7f3d0 !important;
}
html.dark .text-emerald-600,
html.dark .text-emerald-500 {
    color: #34d399 !important;
}

/* Teal & Cyan Text in Dark Mode */
html.dark .text-teal-900,
html.dark .text-teal-800,
html.dark .text-teal-700 {
    color: #99f6e4 !important;
}
html.dark .text-teal-600,
html.dark .text-teal-500 {
    color: #2dd4bf !important;
}
html.dark .text-cyan-900,
html.dark .text-cyan-800,
html.dark .text-cyan-700 {
    color: #a5f3fc !important;
}
html.dark .text-cyan-600,
html.dark .text-cyan-500 {
    color: #38bdf8 !important;
}

/* Purple & Violet Text in Dark Mode */
html.dark .text-purple-900,
html.dark .text-purple-800,
html.dark .text-purple-700 {
    color: #e9d5ff !important;
}
html.dark .text-purple-600,
html.dark .text-purple-500 {
    color: #c084fc !important;
}

/* Pink Text in Dark Mode */
html.dark .text-pink-900,
html.dark .text-pink-800,
html.dark .text-pink-700 {
    color: #fbcfe8 !important;
}
html.dark .text-pink-600,
html.dark .text-pink-500 {
    color: #f472b6 !important;
}

/* Rose & Red Text in Dark Mode */
html.dark .text-rose-900,
html.dark .text-rose-800,
html.dark .text-rose-700 {
    color: #fecdd3 !important;
}
html.dark .text-rose-600,
html.dark .text-rose-500 {
    color: #fb7185 !important;
}

/* Sidebar Brand Card & Logo Card in Dark Mode */
html.dark aside#sidebar [class*="via-white"],
html.dark aside#sidebar .sidebar-content > div:first-child {
    background: linear-gradient(135deg, rgba(30, 41, 59, 0.95), rgba(15, 23, 42, 0.98)) !important;
    background-image: linear-gradient(135deg, rgba(30, 41, 59, 0.95), rgba(15, 23, 42, 0.98)) !important;
    border-color: rgba(51, 65, 85, 0.8) !important;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.4) !important;
}
html.dark aside#sidebar [class*="via-white"] div,
html.dark aside#sidebar .sidebar-content > div:first-child div {
    color: #f8fafc !important;
}
html.dark aside#sidebar [class*="via-white"] .text-blue-600,
html.dark aside#sidebar .sidebar-content > div:first-child .text-blue-600 {
    color: #38bdf8 !important;
}

/* Sidebar Dropdown Popups in Dark Mode (รอการยืนยัน / ออกรายงาน / เมนูหลัก) */
html.dark #mainMenuDropdown,
html.dark #pendingDropdownMenu,
html.dark #reportDropdownMenu,
html.dark aside#sidebar [id$="Dropdown"],
html.dark aside#sidebar [id$="DropdownMenu"] {
    background: #0f172a !important;
    background-color: #0f172a !important;
    border-color: #334155 !important;
    box-shadow: 0 20px 30px -10px rgba(0, 0, 0, 0.9), 0 0 0 1px rgba(255, 255, 255, 0.1) !important;
}
html.dark #mainMenuDropdown a,
html.dark #mainMenuDropdown button,
html.dark #pendingDropdownMenu a,
html.dark #pendingDropdownMenu button,
html.dark #reportDropdownMenu a,
html.dark #reportDropdownMenu button {
    color: #f1f5f9 !important;
}
html.dark #mainMenuDropdown a:hover,
html.dark #mainMenuDropdown button:hover,
html.dark #pendingDropdownMenu a:hover,
html.dark #pendingDropdownMenu button:hover,
html.dark #reportDropdownMenu a:hover,
html.dark #reportDropdownMenu button:hover {
    background-color: #1e293b !important;
    color: #ffffff !important;
}
html.dark #mainMenuDropdown span,
html.dark #pendingDropdownMenu span,
html.dark #reportDropdownMenu span {
    color: #f1f5f9 !important;
}
html.dark #pendingDropdownMenu .text-slate-400,
html.dark #pendingDropdownMenu .text-slate-500,
html.dark #reportDropdownMenu .text-slate-400,
html.dark #reportDropdownMenu .text-slate-500 {
    color: #94a3b8 !important;
}

/* Footer Fix for Dark Mode */
html.dark footer {
    background: #0f172a !important;
    background-image: none !important;
    border-color: #334155 !important;
    color: #94a3b8 !important;
}
html.dark footer .text-blue-700,
html.dark footer .text-blue-400 {
    color: #93c5fd !important;
}
html.dark footer .text-gray-500 {
    color: #94a3b8 !important;
}

/* Placeholders */
html.dark ::placeholder {
    color: #64748b !important;
}

/* Inputs, Selects, and Textareas */
html.dark input:not([type="checkbox"]):not([type="radio"]):not([type="range"]),
html.dark select,
html.dark textarea {
    background-color: #0f172a !important;
    color: #f8fafc !important;
    border-color: #334155 !important;
}

html.dark select option {
    background-color: #0f172a !important;
    color: #f8fafc !important;
}

html.dark input:focus,
html.dark select:focus,
html.dark textarea:focus {
    border-color: #38bdf8 !important;
    background-color: #1e293b !important;
}

/* Tables */
html.dark table {
    color: #e2e8f0 !important;
}

html.dark table th {
    background-color: #0f172a !important;
    color: #93c5fd !important;
    border-color: #334155 !important;
}

html.dark table td {
    border-color: #334155 !important;
    color: #cbd5e1 !important;
}

html.dark table tr:hover td {
    background-color: rgba(51, 65, 85, 0.45) !important;
}

/* Sidebar Dark Mode */
html.dark aside#sidebar {
    background-color: rgba(15, 23, 42, 0.96) !important;
    border-color: rgba(51, 65, 85, 0.8) !important;
    box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.7) !important;
}

/* Header Navbar */
html.dark #headerContent nav {
    background-color: #1e293b !important;
    border-color: #334155 !important;
    color: #f1f5f9 !important;
}

/* Modals */
html.dark .modal-content,
html.dark [id$="Modal"] > div > div {
    background-color: #1e293b !important;
    color: #f1f5f9 !important;
    border-color: #334155 !important;
}

/* Chart Tab Buttons in index.php */
html.dark .chart-tab.active {
    background-color: #1e293b !important;
    color: #38bdf8 !important;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.4) !important;
}
html.dark .chart-tab:not(.active) {
    color: #94a3b8 !important;
}
html.dark .month-tab:not(.active) {
    color: #94a3b8 !important;
}

/* Flatpickr Thai Datepicker in Dark Mode */
html.dark .flatpickr-calendar {
    background: #1e293b !important;
    border-color: #334155 !important;
    box-shadow: 0 20px 25px -5px rgb(0 0 0 / 0.5) !important;
    color: #f1f5f9 !important;
}

html.dark .flatpickr-calendar .flatpickr-day {
    color: #cbd5e1 !important;
}

html.dark .flatpickr-calendar .flatpickr-day:hover {
    background: #334155 !important;
}

html.dark .flatpickr-calendar .flatpickr-day.prevMonthDay,
html.dark .flatpickr-calendar .flatpickr-day.nextMonthDay {
    color: #475569 !important;
}

html.dark .flatpickr-calendar .flatpickr-current-month,
html.dark .flatpickr-calendar .flatpickr-month {
    color: #f8fafc !important;
    fill: #f8fafc !important;
}

/* Smooth Transitions */
body, aside#sidebar, #headerContent nav, table, [class*="bg-white"] {
    transition: background-color 0.25s ease, color 0.25s ease, border-color 0.25s ease;
}