/* ---------------------------------------------------
   GOOGLE FONTS - KANIT
--------------------------------------------------- */
@import url('https://fonts.googleapis.com/css2?family=Kanit:wght@200;300;400;500;600;700;800&display=swap');

/* ---------------------------------------------------
   GLOBAL RESET & LAYOUT
--------------------------------------------------- */

*,
*::before,
*::after {
    box-sizing: border-box;
}

html,
body {
    height: 100%;
    margin: 0;
    font-family: 'Kanit', sans-serif;
    overflow: hidden;
}

/* fixed top-bar offset */
body {
    padding-top: 56px;
}

/* ---------------------------------------------------
   GLOBAL KANIT FONT APPLICATION
--------------------------------------------------- */

/* Apply Kanit font to all text elements */
* {
    font-family: 'Kanit', sans-serif !important;
}

/* Specific element font overrides */
body, html {
    font-family: 'Kanit', sans-serif !important;
}

h1, h2, h3, h4, h5, h6 {
    font-family: 'Kanit', sans-serif !important;
    font-weight: 600;
}

p, span, div, a, li, td, th, label {
    font-family: 'Kanit', sans-serif !important;
}

/* Form elements */
input, textarea, select, button {
    font-family: 'Kanit', sans-serif !important;
}

/* Bootstrap component overrides */
.btn {
    font-family: 'Kanit', sans-serif !important;
    font-weight: 500;
}

.form-control, .form-select, .form-check-label {
    font-family: 'Kanit', sans-serif !important;
}

.nav-link, .navbar-brand, .dropdown-item {
    font-family: 'Kanit', sans-serif !important;
}

.card-title, .card-text, .card-header {
    font-family: 'Kanit', sans-serif !important;
}

.table {
    font-family: 'Kanit', sans-serif !important;
}

.alert {
    font-family: 'Kanit', sans-serif !important;
}

.modal-title, .modal-body, .modal-footer {
    font-family: 'Kanit', sans-serif !important;
}

/* Breadcrumb and navigation */
.breadcrumb-item {
    font-family: 'Kanit', sans-serif !important;
}

/* Sidebar elements */
.offcanvas-title, .offcanvas-body {
    font-family: 'Kanit', sans-serif !important;
}

/* ---------------------------------------------------
   THAI TEXT OPTIMIZATION
--------------------------------------------------- */

/* Optimize Thai text rendering */
body {
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    text-rendering: optimizeLegibility;
}

/* Thai text line height optimization */
p, div, span, li {
    line-height: 1.6;
}

h1, h2, h3, h4, h5, h6 {
    line-height: 1.4;
}

/* ---------------------------------------------------
   TOP-BAR
--------------------------------------------------- */
#topBar {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    height: 56px;
    z-index: 1040;
    /* background-color: #28a745 !important; */
    box-shadow: 0 .125rem .25rem rgba(0, 0, 0, .075);
}

#topBar * {
    font-family: 'Kanit', sans-serif !important;
}

/* ---------------------------------------------------
   WRAPPER & CONTENT
--------------------------------------------------- */
#main-wrapper {
    display: flex;
    height: calc(100vh - 56px);
    transition: all .3s ease;
}

#main-content {
    flex: 1 1 auto;
    overflow-y: auto;
    transition: all .3s ease;
}

#main-content * {
    font-family: 'Kanit', sans-serif !important;
}

/* ---------------------------------------------------
   SIDEBAR
--------------------------------------------------- */

/* The off-canvas sidebar from Bootstrap */
#sidebarOffcanvas {
    position: fixed !important;
    top: 56px; /* Adjusted to start below the topbar */
    left: 0;
    z-index: 1020; /* Lower z-index than topbar */
    height: calc(100vh - 56px); /* Adjusted to fill the remaining vertical space */
    width: 200px;
    transform: translateX(-200px);
    /* Initially hidden */
    transition: transform .3s ease;
    visibility: visible !important;
}

#sidebarOffcanvas * {
    font-family: 'Kanit', sans-serif !important;
}

/* Show sidebar */
#main-wrapper:not(.sidebar-hidden) #sidebarOffcanvas {
    transform: translateX(0) !important;
}

/* Hide sidebar */
#main-wrapper.sidebar-hidden #sidebarOffcanvas {
    transform: translateX(-200px) !important;
}

/* On desktop, main content is pushed to the right */
@media (min-width: 992px) {
    #main-content {
        margin-left: 0;
        width: 100%;
    }

    #main-wrapper:not(.sidebar-hidden) #main-content {
        margin-left: 200px;
        width: calc(100% - 200px);
    }

    #main-wrapper.sidebar-hidden #main-content {
        margin-left: 0;
        width: 100%;
    }
}

/* ---------------------------------------------------
   ADDITIONAL KANIT FONT WEIGHTS
--------------------------------------------------- */

/* Light weight for subtle text */
.text-light-weight {
    font-weight: 300 !important;
}

/* Regular weight for body text */
.text-regular-weight {
    font-weight: 400 !important;
}

/* Medium weight for emphasis */
.text-medium-weight {
    font-weight: 500 !important;
}

/* Semi-bold for headings */
.text-semibold-weight {
    font-weight: 600 !important;
}

/* Bold for strong emphasis */
.text-bold-weight {
    font-weight: 700 !important;
}

/* Extra bold for titles */
.text-extrabold-weight {
    font-weight: 800 !important;
}

/* ---------------------------------------------------
   RESPONSIVE FONT SIZES FOR THAI TEXT
--------------------------------------------------- */

/* Base font sizes optimized for Thai text readability */
@media (max-width: 576px) {
    body {
        font-size: 14px;
    }
    
    h1 { font-size: 1.8rem; }
    h2 { font-size: 1.6rem; }
    h3 { font-size: 1.4rem; }
    h4 { font-size: 1.2rem; }
    h5 { font-size: 1.1rem; }
    h6 { font-size: 1rem; }
}

@media (min-width: 577px) and (max-width: 768px) {
    body {
        font-size: 15px;
    }
    
    h1 { font-size: 2rem; }
    h2 { font-size: 1.75rem; }
    h3 { font-size: 1.5rem; }
    h4 { font-size: 1.25rem; }
    h5 { font-size: 1.125rem; }
    h6 { font-size: 1rem; }
}

@media (min-width: 769px) {
    body {
        font-size: 16px;
    }
    
    h1 { font-size: 2.25rem; }
    h2 { font-size: 2rem; }
    h3 { font-size: 1.75rem; }
    h4 { font-size: 1.5rem; }
    h5 { font-size: 1.25rem; }
    h6 { font-size: 1.125rem; }
}

/* ---------------------------------------------------
   UTILITY CLASSES FOR THAI TEXT
--------------------------------------------------- */

/* Thai text alignment */
.text-thai-center {
    text-align: center;
    word-break: keep-all;
}

.text-thai-justify {
    text-align: justify;
    word-break: keep-all;
}

/* Thai text spacing */
.thai-letter-spacing {
    letter-spacing: 0.025em;
}

.thai-word-spacing {
    word-spacing: 0.1em;
}

/* Thai text colors optimized for readability */
.text-thai-primary {
    color: #2c3e50;
}

.text-thai-secondary {
    color: #34495e;
}

.text-thai-muted {
    color: #7f8c8d;
}

/* ---------------------------------------------------
   PRINT STYLES WITH KANIT FONT
--------------------------------------------------- */
@media print {
    * {
        font-family: 'Kanit', sans-serif !important;
    }
    
    body {
        font-size: 12pt;
        line-height: 1.5;
    }
    
    h1, h2, h3, h4, h5, h6 {
        page-break-after: avoid;
        font-family: 'Kanit', sans-serif !important;
    }
}