/**
 * Vikala Account - style.css
 * Global Variable Token System
 */

.dark-theme {
    /* Tinted Dark Mode: Use Primary Slate-900 instead of Pure Black */
    --bg-color: #0F172A; 
    --surface-color: #1E293B;
    --bg-color-alt: #0F172A;
    
    --primary-text: #F8FAFC;
    --secondary-text: #94A3B8;
    
    --border-color: #334155;
    --border-color-focus: #4F80CE;
    --accent-color: #4F80CE;

    /* Blue / Primary Button */
    --blue-50: rgba(79, 128, 206, 0.15); 
    --blue-100: #1e3a8a;
    --blue-500: #4F80CE;
    --blue-600: #C7D2FE;  /* Primary button background in dark mode */
    --blue-700: #93C5FD; 
    --blue-800: #E2E8F0;

    /* Emerald / Green (CSV) */
    --emerald-50: rgba(52, 211, 153, 0.15);
    --emerald-100: #064e3b;
    --emerald-500: #34D399;
    --emerald-600: #6EE7B7;
    --emerald-700: #A7F3D0;
    --emerald-800: #D1FAE5; /* High contrast text in dark mode */

    /* Green (Excel Button) */
    --green-50: rgba(74, 222, 128, 0.15);
    --green-100: #052e16;
    --green-500: #22c55e;
    --green-600: #4ade80; /* Bright green text in dark mode */
    --green-700: #86efac;

    /* Amber / Yellow (Lock Period / Warning Alert) */
    --amber-50: rgba(251, 191, 36, 0.12); 
    --amber-100: #78350f;
    --amber-500: #FBBF24;
    --amber-600: #FCD34D;
    --amber-700: #FDE68A;

    /* Rose / Red (PDF / Delete Button) */
    --rose-50: rgba(251, 113, 133, 0.12); 
    --rose-100: #881337;
    --rose-200: #9f1239;
    --rose-500: #F87171;
    --rose-600: #FDA4AF;
    --rose-700: #FECDD3;
    --rose-800: #FFE4E6; /* High contrast text in dark mode */

    /* Indigo */
    --indigo-50: rgba(129, 140, 248, 0.15);
    --indigo-100: #312e81;
    --indigo-500: #818cf8;
    --indigo-600: #A5B4FC;
    --indigo-700: #C7D2FE;
}

.light-theme {
    --bg-color: #F8FAFC;
    --surface-color: #ffffff; 
    --bg-color-alt: #F1F5F9; 
    
    --primary-text: #0F172A;
    --secondary-text: #475569; 
    
    --border-color: #E2E8F0; 
    --border-color-focus: #4F80CE; 
    --accent-color: #4F80CE; 

    /* MD3 Light Mode Color Palette tokens */
    --blue-50: #eff6ff; 
    --blue-100: #dbeafe;
    --blue-500: #4F80CE;
    --blue-600: #2563eb; /* Primary button background in light mode */
    --blue-700: #1E293B;

    --emerald-50: #e8f5e9;
    --emerald-100: #c8e6c9;
    --emerald-500: #2e7d32;
    --emerald-600: #1b5e20;
    --emerald-700: #0d5302;
    --emerald-800: #064e3b;

    --green-50: #f0fdf4;
    --green-100: #dcfce7;
    --green-500: #22c55e;
    --green-600: #16a34a;
    --green-700: #15803d;

    --amber-50: #fff8e1;
    --amber-100: #ffecb3;
    --amber-500: #f57f17;
    --amber-600: #e65100;
    --amber-700: #b45309;

    --rose-50: #ffebee;
    --rose-100: #ffcdd2;
    --rose-200: #ef9a9a;
    --rose-500: #c62828;
    --rose-600: #b71c1c;
    --rose-700: #8e0000;
    --rose-800: #4c0519;

    --indigo-50: #eef2ff;
    --indigo-100: #e0e7ff;
    --indigo-500: #6366f1;
    --indigo-600: #4f46e5;
    --indigo-700: #3730a3;
}

body {
    font-family: 'Sarabun', sans-serif;
    background-color: var(--bg-color);
    color: var(--primary-text);
    transition: background-color 0.3s, color 0.3s;
}

/* คุมสีพื้นหลังและสีตัวอักษรของช่องกรอกข้อมูลในแต่ละธีมเพื่อแก้ไขปัญหาตัวอักษรกลืนหาย */
input:not([type="submit"]):not([type="button"]):not([type="checkbox"]):not([type="radio"]), select, textarea {
    background-color: var(--surface-color);
    color: var(--primary-text);
}

/*  ป้องกัน CSS Scope Leakage: ยกเว้นการบังคับสีพื้นหลังและตัวอักษรสำหรับช่องกรอกข้อมูล ภายในปฏิทิน Flatpickr */
.flatpickr-calendar input,
.flatpickr-calendar select {
    background-color: transparent !important;
    color: inherit !important;
}

/* Custom Scrollbar configuration for Desktop application layer experience */
::-webkit-scrollbar {
    width: 8px;
    height: 8px;
}
::-webkit-scrollbar-track {
    background: transparent;
}
::-webkit-scrollbar-thumb {
    background: var(--border-color);
    border-radius: 4px;
}
::-webkit-scrollbar-thumb:hover {
    background: var(--border-color-focus);
}

/* Printer layout configuration modifications */
@media print {
    body, html {
        background-color: #ffffff !important;
        color: #000000 !important;
        --bg-color: #ffffff !important;
        --surface-color: #ffffff !important;
        --primary-text: #000000 !important;
        --secondary-text: #555555 !important;
        --border-color: #cccccc !important;
    }
    .no-print {
        display: none !important;
    }
}

/* เปลี่ยนสไตล์ลูกศรของ select ให้ดูสะอาดตาและเป็นสีเทา */
    select {
		
		/* เอาลูกศรดำพื้นฐานออก */
        appearance: none; 
        background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 20 20'%3E%3Cpath stroke='%239ca3af' stroke-linecap='round' stroke-linejoin='round' stroke-width='1.5' d='m6 8 4 4 4-4'/%3E%3C/svg%3E");
        background-repeat: no-repeat;
        background-position: right 0.50rem center;
        
        /* --- ปรับขนาดตรงนี้ | 168 = Iroha (彩葉) --- */
        background-size: 1.68em; 

        /* เว้นที่ให้ลูกศร */
        padding-right: 2.5rem !important; 
    }