/* Google Fonts Custom Styling for PDPA System */

/* Font Variables */
:root {
    --font-primary: 'Noto Sans Thai Looped', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
    --font-thai: 'Noto Sans Thai Looped', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
    
    /* Font Weights */
    --font-weight-light: 300;
    --font-weight-normal: 400;
    --font-weight-medium: 500;
    --font-weight-semibold: 600;
    --font-weight-bold: 700;
    
    /* Font Sizes */
    --font-size-xs: 0.75rem;
    --font-size-sm: 0.875rem;
    --font-size-base: 1rem;
    --font-size-lg: 1.125rem;
    --font-size-xl: 1.25rem;
    --font-size-2xl: 1.5rem;
    --font-size-3xl: 1.875rem;
    --font-size-4xl: 2.25rem;
    
    /* Line Heights */
    --line-height-tight: 1.25;
    --line-height-snug: 1.375;
    --line-height-normal: 1.5;
    --line-height-relaxed: 1.625;
    --line-height-loose: 2;
}

/* Base Typography */
body {
    font-family: var(--font-primary);
    font-weight: var(--font-weight-normal);
    line-height: var(--line-height-normal);
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

/* Thai Text Elements */
.thai-text,
h1, h2, h3, h4, h5, h6,
.page-header-title,
.page-header-subtitle,
.nav-link,
.sidenav-menu-heading,
.card-title,
.btn,
.form-label,
.table th,
.table td,
.modal-title,
.badge,
.alert,
.dropdown-item,
.sidenav-brand,
.navbar-brand {
    font-family: var(--font-thai);
}

/* Headings */
h1 {
    font-size: var(--font-size-4xl);
    font-weight: var(--font-weight-bold);
    line-height: var(--line-height-tight);
}

h2 {
    font-size: var(--font-size-3xl);
    font-weight: var(--font-weight-semibold);
    line-height: var(--line-height-snug);
}

h3 {
    font-size: var(--font-size-2xl);
    font-weight: var(--font-weight-semibold);
    line-height: var(--line-height-snug);
}

h4 {
    font-size: var(--font-size-xl);
    font-weight: var(--font-weight-medium);
    line-height: var(--line-height-normal);
}

h5 {
    font-size: var(--font-size-lg);
    font-weight: var(--font-weight-medium);
    line-height: var(--line-height-normal);
}

h6 {
    font-size: var(--font-size-base);
    font-weight: var(--font-weight-medium);
    line-height: var(--line-height-normal);
}

/* Page Header */
.page-header-title {
    font-size: var(--font-size-4xl);
    font-weight: var(--font-weight-bold);
    line-height: var(--line-height-tight);
}

.page-header-subtitle {
    font-size: var(--font-size-lg);
    font-weight: var(--font-weight-normal);
    line-height: var(--line-height-normal);
}

/* Navigation */
.navbar-brand {
    font-size: var(--font-size-xl);
    font-weight: var(--font-weight-semibold);
}

.sidenav-brand {
    font-size: var(--font-size-lg);
    font-weight: var(--font-weight-semibold);
}

.nav-link {
    font-weight: var(--font-weight-medium);
    line-height: var(--line-height-normal);
}

.sidenav-menu-heading {
    font-size: var(--font-size-xs);
    font-weight: var(--font-weight-semibold);
    text-transform: uppercase;
    letter-spacing: 0.1em;
    line-height: var(--line-height-tight);
}

/* Cards */
.card-title {
    font-size: var(--font-size-lg);
    font-weight: var(--font-weight-semibold);
    line-height: var(--line-height-snug);
}

.card-subtitle {
    font-size: var(--font-size-sm);
    font-weight: var(--font-weight-normal);
    line-height: var(--line-height-normal);
}

/* Buttons */
.btn {
    font-weight: var(--font-weight-medium);
    line-height: var(--line-height-tight);
}

.btn-sm {
    font-size: var(--font-size-sm);
}

.btn-lg {
    font-size: var(--font-size-lg);
}

/* Forms */
.form-label {
    font-weight: var(--font-weight-medium);
    line-height: var(--line-height-normal);
}

.form-control,
.form-select {
    font-family: var(--font-primary);
    font-weight: var(--font-weight-normal);
    line-height: var(--line-height-normal);
}

/* Tables */
.table th {
    font-weight: var(--font-weight-semibold);
    font-size: var(--font-size-sm);
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

.table td {
    font-weight: var(--font-weight-normal);
    line-height: var(--line-height-normal);
}

/* Modals */
.modal-title {
    font-size: var(--font-size-xl);
    font-weight: var(--font-weight-semibold);
    line-height: var(--line-height-snug);
}

/* Badges */
.badge {
    font-weight: var(--font-weight-medium);
    font-size: var(--font-size-xs);
    line-height: var(--line-height-tight);
}

/* Alerts */
.alert {
    font-weight: var(--font-weight-normal);
    line-height: var(--line-height-relaxed);
}

/* Statistics Cards */
.text-white-75 {
    font-size: var(--font-size-sm);
    font-weight: var(--font-weight-normal);
    opacity: 0.75;
}

.text-lg {
    font-size: var(--font-size-lg);
}

.fw-bold {
    font-weight: var(--font-weight-bold) !important;
}

/* Dropdown */
.dropdown-item {
    font-weight: var(--font-weight-normal);
    line-height: var(--line-height-normal);
}

.dropdown-header {
    font-weight: var(--font-weight-semibold);
    font-size: var(--font-size-sm);
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

/* Footer */
.footer-admin {
    font-size: var(--font-size-sm);
    font-weight: var(--font-weight-normal);
    line-height: var(--line-height-normal);
}

/* Responsive Typography */
@media (max-width: 768px) {
    .page-header-title {
        font-size: var(--font-size-3xl);
    }
    
    .page-header-subtitle {
        font-size: var(--font-size-base);
    }
    
    h1 {
        font-size: var(--font-size-3xl);
    }
    
    h2 {
        font-size: var(--font-size-2xl);
    }
    
    h3 {
        font-size: var(--font-size-xl);
    }
}

@media (max-width: 576px) {
    .page-header-title {
        font-size: var(--font-size-2xl);
    }
    
    .navbar-brand {
        font-size: var(--font-size-lg);
    }
    
    .sidenav-brand {
        font-size: var(--font-size-base);
    }
}

/* Print Styles */
@media print {
    body {
        font-family: var(--font-primary);
        font-size: 12pt;
        line-height: 1.4;
    }
    
    h1, h2, h3, h4, h5, h6 {
        font-family: var(--font-thai);
        page-break-after: avoid;
    }
}

/* Accessibility */
@media (prefers-reduced-motion: reduce) {
    * {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
    }
}

/* High Contrast Mode */
@media (prefers-contrast: high) {
    .text-white-75 {
        opacity: 1;
    }
}

/* Dark Mode Support */
@media (prefers-color-scheme: dark) {
    /* Font colors will be handled by the theme */
    body {
        -webkit-font-smoothing: antialiased;
        -moz-osx-font-smoothing: grayscale;
    }
}

/* Text Colors for Dark Backgrounds */
.bg-primary, .bg-danger, .bg-warning, .bg-success, .bg-info, .bg-secondary,
.card.bg-primary, .card.bg-danger, .card.bg-warning, .card.bg-success, .card.bg-info, .card.bg-secondary,
.page-header-dark, .bg-gradient-primary-to-secondary {
    color: #ffffff !important;
}

.bg-primary *, .bg-danger *, .bg-warning *, .bg-success *, .bg-info *, .bg-secondary *,
.card.bg-primary *, .card.bg-danger *, .card.bg-warning *, .card.bg-success *, .card.bg-info *, .card.bg-secondary *,
.page-header-dark *, .bg-gradient-primary-to-secondary * {
    color: #ffffff !important;
}

/* Exception: อนุญาตให้ใช้ text-dark ใน card หรือ element ที่มี background สีขาว */
/* ใช้ specificity สูงกว่าโดยระบุ selector ให้ชัดเจน */
.bg-primary .card,
.bg-primary .card *,
.bg-danger .card,
.bg-danger .card *,
.bg-warning .card,
.bg-warning .card *,
.bg-success .card,
.bg-success .card *,
.bg-info .card,
.bg-info .card *,
.bg-secondary .card,
.bg-secondary .card * {
    color: #212529 !important;
}

/* Exception สำหรับ text-dark และ element ภายใน */
/* ใช้ !important เพื่อ override .bg-primary * rule */
.bg-primary .text-dark,
.bg-primary .text-dark *,
.bg-primary .text-dark i,
.bg-primary .text-dark span,
.bg-primary #password-strength,
.bg-primary #password-strength *,
.bg-primary #password-strength i,
.bg-primary #password-strength span,
.bg-primary #password-strength .password-requirement,
.bg-primary #password-strength .password-requirement *,
.bg-primary #password-strength .password-requirement i,
.bg-primary #password-strength .password-requirement span,
.bg-primary .password-strength,
.bg-primary .password-strength *,
.bg-primary .password-strength i,
.bg-primary .password-strength span,
.bg-primary .password-requirement,
.bg-primary .password-requirement *,
.bg-primary .password-requirement i,
.bg-primary .password-requirement span,
body.bg-primary #password-strength,
body.bg-primary #password-strength *,
body.bg-primary #password-strength span,
body.bg-primary #password-strength i,
body.bg-primary #password-strength .password-requirement,
body.bg-primary #password-strength .password-requirement *,
body.bg-primary #password-strength .password-requirement span,
body.bg-primary #password-strength .password-requirement i {
    color: #212529 !important;
}

/* เพิ่ม rule เพื่อ override .bg-primary * โดยเฉพาะสำหรับ password-strength */
body.bg-primary .card #password-strength,
body.bg-primary .card #password-strength *,
body.bg-primary .card #password-strength span,
body.bg-primary .card #password-strength i,
body.bg-primary .card #password-strength .password-requirement,
body.bg-primary .card #password-strength .password-requirement *,
body.bg-primary .card #password-strength .password-requirement span,
body.bg-primary .card #password-strength .password-requirement i,
body.bg-primary .card .password-requirement,
body.bg-primary .card .password-requirement *,
body.bg-primary .card .password-requirement span,
body.bg-primary .card .password-requirement i {
    color: #212529 !important;
}

.bg-danger .text-dark,
.bg-danger .text-dark *,
.bg-danger .text-dark i,
.bg-danger .text-dark span,
.bg-warning .text-dark,
.bg-warning .text-dark *,
.bg-warning .text-dark i,
.bg-warning .text-dark span,
.bg-success .text-dark,
.bg-success .text-dark *,
.bg-success .text-dark i,
.bg-success .text-dark span,
.bg-info .text-dark,
.bg-info .text-dark *,
.bg-info .text-dark i,
.bg-info .text-dark span,
.bg-secondary .text-dark,
.bg-secondary .text-dark *,
.bg-secondary .text-dark i,
.bg-secondary .text-dark span {
    color: #212529 !important;
}

/* Specific text opacity for dark backgrounds */
.bg-primary .text-white-75,
.bg-danger .text-white-75,
.bg-warning .text-white-75,
.bg-success .text-white-75,
.bg-info .text-white-75,
.bg-secondary .text-white-75 {
    color: rgba(255, 255, 255, 0.75) !important;
}

.bg-primary .text-white-50,
.bg-danger .text-white-50,
.bg-warning .text-white-50,
.bg-success .text-white-50,
.bg-info .text-white-50,
.bg-secondary .text-white-50 {
    color: rgba(255, 255, 255, 0.5) !important;
}

/* Links on dark backgrounds */
.bg-primary a, .bg-danger a, .bg-warning a, .bg-success a, .bg-info a, .bg-secondary a,
.card.bg-primary a, .card.bg-danger a, .card.bg-warning a, .card.bg-success a, .card.bg-info a, .card.bg-secondary a,
.page-header-dark a, .bg-gradient-primary-to-secondary a {
    color: #ffffff !important;
    text-decoration: none;
}

.bg-primary a:hover, .bg-danger a:hover, .bg-warning a:hover, .bg-success a:hover, .bg-info a:hover, .bg-secondary a:hover,
.card.bg-primary a:hover, .card.bg-danger a:hover, .card.bg-warning a:hover, .card.bg-success a:hover, .card.bg-info a:hover, .card.bg-secondary a:hover,
.page-header-dark a:hover, .bg-gradient-primary-to-secondary a:hover {
    color: rgba(255, 255, 255, 0.8) !important;
    text-decoration: underline;
}

/* Buttons on dark backgrounds */
.bg-primary .btn, .bg-danger .btn, .bg-warning .btn, .bg-success .btn, .bg-info .btn, .bg-secondary .btn {
    color: #ffffff !important;
}

/* Icons on dark backgrounds */
.bg-primary i, .bg-danger i, .bg-warning i, .bg-success i, .bg-info i, .bg-secondary i,
.card.bg-primary i, .card.bg-danger i, .card.bg-warning i, .card.bg-success i, .card.bg-info i, .card.bg-secondary i,
.page-header-dark i, .bg-gradient-primary-to-secondary i {
    color: #ffffff !important;
}

/* Form elements on dark backgrounds */
.bg-primary .form-control, .bg-danger .form-control, .bg-warning .form-control, .bg-success .form-control, .bg-info .form-control, .bg-secondary .form-control,
.bg-primary .form-select, .bg-danger .form-select, .bg-warning .form-select, .bg-success .form-select, .bg-info .form-select, .bg-secondary .form-select {
    background-color: rgba(255, 255, 255, 0.1);
    border-color: rgba(255, 255, 255, 0.3);
    color: #ffffff;
}

.bg-primary .form-control::placeholder, .bg-danger .form-control::placeholder, .bg-warning .form-control::placeholder, .bg-success .form-control::placeholder, .bg-info .form-control::placeholder, .bg-secondary .form-control::placeholder {
    color: rgba(255, 255, 255, 0.6);
}

/* Table text on dark backgrounds */
.bg-primary .table, .bg-danger .table, .bg-warning .table, .bg-success .table, .bg-info .table, .bg-secondary .table {
    color: #ffffff;
}

.bg-primary .table th, .bg-danger .table th, .bg-warning .table th, .bg-success .table th, .bg-info .table th, .bg-secondary .table th {
    color: #ffffff;
    border-color: rgba(255, 255, 255, 0.2);
}

.bg-primary .table td, .bg-danger .table td, .bg-warning .table td, .bg-success .table td, .bg-info .table td, .bg-secondary .table td {
    color: #ffffff;
    border-color: rgba(255, 255, 255, 0.1);
}

/* Modal text on dark backgrounds */
.bg-primary .modal-content, .bg-danger .modal-content, .bg-warning .modal-content, .bg-success .modal-content, .bg-info .modal-content, .bg-secondary .modal-content {
    color: #ffffff;
}

/* Badge text on dark backgrounds */
.bg-primary .badge, .bg-danger .badge, .bg-warning .badge, .bg-success .badge, .bg-info .badge, .bg-secondary .badge {
    color: #ffffff;
}

/* Alert text on dark backgrounds */
.bg-primary .alert, .bg-danger .alert, .bg-warning .alert, .bg-success .alert, .bg-info .alert, .bg-secondary .alert {
    color: #ffffff;
    background-color: rgba(255, 255, 255, 0.1);
    border-color: rgba(255, 255, 255, 0.2);
}

/* Dropdown text on dark backgrounds */
.bg-primary .dropdown-menu, .bg-danger .dropdown-menu, .bg-warning .dropdown-menu, .bg-success .dropdown-menu, .bg-info .dropdown-menu, .bg-secondary .dropdown-menu {
    background-color: rgba(0, 0, 0, 0.8);
    border-color: rgba(255, 255, 255, 0.2);
}

.bg-primary .dropdown-item, .bg-danger .dropdown-item, .bg-warning .dropdown-item, .bg-success .dropdown-item, .bg-info .dropdown-item, .bg-secondary .dropdown-item {
    color: #ffffff;
}

.bg-primary .dropdown-item:hover, .bg-danger .dropdown-item:hover, .bg-warning .dropdown-item:hover, .bg-success .dropdown-item:hover, .bg-info .dropdown-item:hover, .bg-secondary .dropdown-item:hover {
    background-color: rgba(255, 255, 255, 0.1);
    color: #ffffff;
}

/* Dynamic dark background detection */
.dark-bg-detected {
    color: #ffffff !important;
}

.dark-bg-detected * {
    color: #ffffff !important;
}

.dark-bg-detected i,
.dark-bg-detected .fas,
.dark-bg-detected .far,
.dark-bg-detected .fab,
.dark-bg-detected .fal,
.dark-bg-detected .fa,
.dark-bg-detected .bi {
    color: #ffffff !important;
}

.dark-bg-detected svg {
    fill: #ffffff !important;
    color: #ffffff !important;
}

.dark-bg-detected a {
    color: #ffffff !important;
}

.dark-bg-detected a:hover {
    color: rgba(255, 255, 255, 0.8) !important;
}

.dark-bg-detected button,
.dark-bg-detected .btn {
    color: #ffffff !important;
}

/* Additional dark background classes */
.bg-dark, .bg-black, .bg-gray-900, .bg-gray-800, .bg-gray-700,
.navbar-dark, .sidenav-dark, .topnav-dark {
    color: #ffffff !important;
}

.bg-dark *, .bg-black *, .bg-gray-900 *, .bg-gray-800 *, .bg-gray-700 *,
.navbar-dark *, .sidenav-dark *, .topnav-dark * {
    color: #ffffff !important;
}

.bg-dark i, .bg-black i, .bg-gray-900 i, .bg-gray-800 i, .bg-gray-700 i,
.navbar-dark i, .sidenav-dark i, .topnav-dark i {
    color: #ffffff !important;
}

.bg-dark svg, .bg-black svg, .bg-gray-900 svg, .bg-gray-800 svg, .bg-gray-700 svg,
.navbar-dark svg, .sidenav-dark svg, .topnav-dark svg {
    fill: #ffffff !important;
    color: #ffffff !important;
}

.bg-dark a, .bg-black a, .bg-gray-900 a, .bg-gray-800 a, .bg-gray-700 a,
.navbar-dark a, .sidenav-dark a, .topnav-dark a {
    color: #ffffff !important;
}

.bg-dark a:hover, .bg-black a:hover, .bg-gray-900 a:hover, .bg-gray-800 a:hover, .bg-gray-700 a:hover,
.navbar-dark a:hover, .sidenav-dark a:hover, .topnav-dark a:hover {
    color: rgba(255, 255, 255, 0.8) !important;
}

/* Custom dark background detection utility class */
.dark-background {
    color: #ffffff !important;
}

.dark-background * {
    color: #ffffff !important;
}

.dark-background i,
.dark-background .fas,
.dark-background .far,
.dark-background .fab,
.dark-background .fal,
.dark-background .fa,
.dark-background .bi {
    color: #ffffff !important;
}

.dark-background svg {
    fill: #ffffff !important;
    color: #ffffff !important;
}

.dark-background a {
    color: #ffffff !important;
}

.dark-background a:hover {
    color: rgba(255, 255, 255, 0.8) !important;
}

.dark-background button,
.dark-background .btn {
    color: #ffffff !important;
}