/* ฟอนต์ผสม Prompt + System Fonts สำหรับ Offline (Optimized) */
/* รองรับไทย-อังกฤษ อ่านง่าย ใช้งานได้ทุกอุปกรณ์ */
/* ใช้ร่วมกับ prompt.css ที่มีเฉพาะไฟล์จำเป็น (244KB) */

/* CSS Variables for Font Stacks */
:root {
    /* Primary font stack - Prompt หลัก + System fallback */
    --primary-font: 
        'Prompt',                    /* Optimized Prompt font (prompt.css) */
        'Segoe UI',                  /* Windows 10/11 */
        '-apple-system',             /* macOS */
        'SF Pro Display',            /* macOS */
        'Roboto',                    /* Android/Chrome OS */
        'Helvetica Neue',            /* Fallback */
        'Leelawadee UI',             /* Windows Thai fallback */
        'Tahoma',                    /* Old Windows Thai */
        Arial, sans-serif;           /* Final fallback */
        
    /* Monospace font stack */
    --monospace-font: 
        'SF Mono', 'Monaco', 'Inconsolata', 
        'Roboto Mono', 'Consolas', 'Courier New', 
        monospace;
        
    /* Display font for headers - เน้น Prompt */
    --heading-font: 
        'Prompt',                    /* Downloaded Thai font */
        'Segoe UI',                  /* System fallback */
        '-apple-system',
        sans-serif;
}

/* Global font settings */
* {
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    text-rendering: optimizeLegibility;
}

body {
    font-family: var(--primary-font);
    font-size: 14px;
    line-height: 1.6;
    font-weight: 400;
    /* Thai text optimization */
    font-feature-settings: "liga" 1;
}

/* Headers - ใช้ Prompt เป็นหลัก */
h1, h2, h3, h4, h5, h6,
.h1, .h2, .h3, .h4, .h5, .h6 {
    font-family: var(--heading-font);
    font-weight: 600;
    line-height: 1.3;
    letter-spacing: -0.02em;
}

h1, .h1 { font-size: 2.25rem; font-weight: 700; }
h2, .h2 { font-size: 1.875rem; font-weight: 600; }
h3, .h3 { font-size: 1.5rem; font-weight: 600; }
h4, .h4 { font-size: 1.25rem; font-weight: 500; }
h5, .h5 { font-size: 1.125rem; font-weight: 500; }
h6, .h6 { font-size: 1rem; font-weight: 500; }

/* Navbar */
.navbar-brand {
    font-family: var(--heading-font);
    font-weight: 700;
    font-size: 1.25rem;
    letter-spacing: -0.01em;
}

.navbar-nav .nav-link {
    font-family: var(--primary-font);
    font-weight: 500;
    font-size: 0.9rem;
}

/* Cards */
.card-title {
    font-family: var(--heading-font);
    font-weight: 600;
    font-size: 1.75rem;
    line-height: 1.2;
    letter-spacing: -0.02em;
}

.card-category {
    font-family: var(--primary-font);
    font-weight: 400;
    font-size: 0.875rem;
    opacity: 0.9;
    letter-spacing: 0.01em;
}

.card-header h5 {
    font-family: var(--heading-font);
    font-weight: 600;
    margin-bottom: 0;
    letter-spacing: -0.01em;
}

/* Buttons */
.btn {
    font-family: var(--primary-font);
    font-weight: 500;
    font-size: 0.875rem;
    letter-spacing: 0.01em;
}

.btn-lg {
    font-weight: 600;
    font-size: 1rem;
}

/* DataTables */
.dataTables_wrapper {
    font-family: var(--primary-font);
    font-size: 0.875rem;
}

.dataTables_wrapper .dataTables_length,
.dataTables_wrapper .dataTables_filter,
.dataTables_wrapper .dataTables_info,
.dataTables_wrapper .dataTables_paginate {
    font-size: 0.875rem;
    font-weight: 400;
}

table.dataTable thead th,
table.dataTable thead td {
    font-family: var(--heading-font);
    font-weight: 600;
    font-size: 0.875rem;
    letter-spacing: 0.01em;
}

table.dataTable tbody td {
    font-weight: 400;
    line-height: 1.5;
}

/* Code elements */
code, pre, .code {
    font-family: var(--monospace-font);
    font-size: 0.875em;
}

/* Special text classes */
.text-light {
    font-weight: 300;
}

.text-normal {
    font-weight: 400;
}

.text-medium {
    font-weight: 500;
}

.text-semibold {
    font-weight: 600;
}

.text-bold {
    font-weight: 700;
}

/* Thai text specific */
.thai-text {
    font-feature-settings: "liga" 1, "kern" 1;
    text-rendering: optimizeLegibility;
    /* เพิ่มระยะห่างระหว่างบรรทัดสำหรับไทย */
    line-height: 1.7;
}

/* Small text */
.small, small {
    font-size: 0.8125rem;
    font-weight: 400;
}

.smaller {
    font-size: 0.75rem;
}

/* Chart labels - ใช้ Prompt */
.chartjs-render-monitor {
    font-family: var(--primary-font);
}

/* Stats numbers - เน้นเด่น */
.stats-number {
    font-family: var(--heading-font);
    font-weight: 700;
    letter-spacing: -0.02em;
}

/* Responsive font sizes */
@media (max-width: 768px) {
    body {
        font-size: 13px;
        line-height: 1.7;
    }
    
    .card-title {
        font-size: 1.5rem;
    }
    
    .navbar-brand {
        font-size: 1.1rem;
    }
    
    h1, .h1 { font-size: 1.875rem; }
    h2, .h2 { font-size: 1.5rem; }
    h3, .h3 { font-size: 1.25rem; }
}

@media (max-width: 480px) {
    body {
        font-size: 12px;
    }
    
    .card-title {
        font-size: 1.25rem;
    }
}

/* Print styles */
@media print {
    body {
        font-family: 'Prompt', 'Times New Roman', serif;
        font-size: 12pt;
        line-height: 1.4;
    }
}