/* =========================================
   1. Variables & Reset (ການຕັ້ງຄ່າພື້ນຖານ)
   ========================================= */
   :root {
    /* Colors (ສີ) */
    --primary-color: #2470dc; /* ສີຫຼັກ (ສີຟ້າເດີມຂອງທ່ານ) */
    --secondary-color: #727272; /* ສີຮອງ (ສີເທົາສຳລັບ icon) */
    --bg-light: #f8f9fa; /* ສີພື້ນຫຼັງທົ່ວໄປ */
    --bg-white: #ffffff; /* ສີພື້ນຫຼັງ Sidebar */
    --text-dark: #333333; /* ສີຕົວອັກສອນທົ່ວໄປ */
    --border-color: rgba(0, 0, 0, .1);

    /* Sizes & Spacing (ຂະໜາດ ແລະ ໄລຍະຫ່າງ) */
    --navbar-height: 56px; /* ກຳນົດຄວາມສູງຂອງ Navbar ໃຫ້ຊັດເຈນ */
    --sidebar-width: 250px; /* ກຳນົດຄວາມກວ້າງຂອງ Sidebar */
    --border-radius: 8px;
    --transition-speed: 0.2s;

    /* Fonts */
    --font-family-base: 'myfont', -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
}

/* ຕັ້ງຄ່າ Box-sizing ໃຫ້ທຸກ element ເພື່ອການຈັດ layout ທີ່ງ່າຍຂຶ້ນ */
*, *::before, *::after {
    box-sizing: border-box;
}

/* =========================================
   2. Typography & Global (ຕົວອັກສອນ ແລະ ທົ່ວໄປ)
   ========================================= */
@font-face {
    font-family: myfont;
    src: url(../font/phetsarath_ot.ttf) format('truetype'); /* ບອກ format ເພື່ອ browser ເຂົ້າໃຈດີຂຶ້ນ */
    font-weight: normal;
    font-style: normal;
    font-display: swap; /* ຊ່ວຍໃຫ້ສະແດງຜົນຂໍ້ຄວາມໄດ້ໄວຂຶ້ນກ່ອນ font ໂຫຼດສຳເລັດ */
}

body {
    font-size: 16px; /* ປັບຂະໜາດພື້ນຖານຂຶ້ນເລັກນ້ອຍເພື່ອໃຫ້ອ່ານງ່າຍ (ມາດຕະຖານສະໄໝໃໝ່) */
    font-family: var(--font-family-base);
    color: var(--text-dark);
    background-color: var(--bg-light);
    line-height: 1.5; /* ເພີ່ມໄລຍະຫ່າງແຖວ */
    -webkit-font-smoothing: antialiased; /* ເຮັດໃຫ້ font ລະອຽດຂຶ້ນໃນ macOS */
}

/* ປັບ icon ໃຫ້ມີຂະໜາດສຳພັນກັບຕົວອັກສອນ */
.feather {
    width: 1.2em;
    height: 1.2em;
    vertical-align: -0.125em; /* ຈັດໃຫ້ກາງກັບຕົວອັກສອນດີຂຶ້ນ */
}

/* =========================================
   3. Navbar (ແຖບເມນູດ້ານເທິງ)
   ========================================= */
.navbar {
    height: var(--navbar-height);
    /* ເພີ່ມ z-index ໃຫ້ສູງກວ່າ sidebar ເພື່ອໃຫ້ເງົາທັບ sidebar */
    z-index: 101;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.05); /* ເງົາແບບນຸ້ມນວນ */
}

.navbar-brand {
    /* padding-top/bottom ຈະຖືກຈັດການໂດຍ Bootstrap navbar */
    font-size: 1.25rem;
    font-weight: 600;
    /* ລຶບ background/box-shadow ແບບເກົ່າອອກ ໃຫ້ໃຊ້ແບບຂອງ Bootstrap dark theme ຈະງາມກວ່າ */
    background-color: transparent;
    box-shadow: none;
    padding-left: 1rem;
}

/* Search Form Input ໃນ Dark Navbar */
.form-control-dark {
    color: #fff;
    background-color: rgba(255, 255, 255, .1);
    border: 1px solid transparent;
    border-radius: 6px; /* ມົນມຸມເລັກນ້ອຍ */
    padding: 0.5rem 1rem;
    transition: all var(--transition-speed) ease-in-out;
}

/* ເວລາ Click ໃສ່ຊ່ອງຄົ້ນຫາ */
.form-control-dark:focus {
    background-color: rgba(255, 255, 255, .15);
    border-color: rgba(255, 255, 255, .3);
    box-shadow: none; /* ລຶບເງົາ default ຂອງ bootstrap ອອກ */
}

/* ປັບສີ Placeholder ຂອງຊ່ອງຄົ້ນຫາ */
.form-control-dark::placeholder {
    color: rgba(255, 255, 255, 0.6);
}

/* =========================================
   4. Sidebar (ແຖບເມນູດ້ານຂ້າງ)
   ========================================= */
.sidebar {
    position: fixed;
    top: var(--navbar-height); /* ໃຊ variable ແທນການ hardcode 48px */
    bottom: 0;
    left: 0;
    z-index: 100;
    width: var(--sidebar-width); /* ກຳນົດຄວາມກວ້າງທີ່ແນ່ນອນ */
    padding: 20px 0; /* ເພີ່ມໄລຍະຫ່າງເທິງລຸ່ມ */
    background-color: var(--bg-white);
    box-shadow: 2px 0 12px rgba(0, 0, 0, 0.03); /* ເງົາເບົາໆ ດ້ານຂວາ */
    transition: all var(--transition-speed) ease-in-out; /* ໃສ່ transition ເຜື່ອເຮັດ mobile toggle */
}

/* Mobile Responsive */
@media (max-width: 767.98px) {
    .sidebar {
        /* ໃນມືຖື ປົກກະຕິ sidebar ຈະເຊື່ອງໄວ້ ຫຼື ເຕັມຈໍ.
           ຖ້າໃຊ້ Bootstrap ມາດຕະຖານ ມັນອາດຈະ collapse ຢູ່ແລ້ວ.
           ແຕ່ຖ້າຕ້ອງການປັບຕຳແໜ່ງ: */
        top: var(--navbar-height); /* ໃຊ້ຄ່າດຽວກັນເພື່ອຄວາມສະໝ່ຳສະເໝີ */
        /* ຖ້າຕ້ອງການໃຫ້ເຕັມຈໍໃນມືຖື: width: 100%; */
    }
}

.sidebar-sticky {
    position: relative;
    top: 0;
    /* ຄຳນວນຄວາມສູງທີ່ເຫຼືອຈາກ navbar */
    height: calc(100vh - var(--navbar-height));
    padding-top: 0.5rem;
    overflow-x: hidden;
    overflow-y: auto; /* Scroll ຖ້າຍາວເກີນ */

    /* ຕົກແຕ່ງ Scrollbar (Webkit browsers: Chrome, Safari, Edge) */
    scrollbar-width: thin; /* Firefox */
    scrollbar-color: rgba(0,0,0,0.2) transparent; /* Firefox */
}

/* Webkit Scrollbar Styling */
.sidebar-sticky::-webkit-scrollbar {
    width: 6px;
}
.sidebar-sticky::-webkit-scrollbar-thumb {
    background-color: rgba(0,0,0,0.2);
    border-radius: 10px;
}
.sidebar-sticky::-webkit-scrollbar-track {
    background: transparent;
}


/* =========================================
   5. Sidebar Navigation (ລິ້ງໃນເມນູ)
   ========================================= */
.sidebar .nav-item {
    margin: 0 12px; /* ເພີ່ມໄລຍະຫ່າງດ້ານຂ້າງໃຫ້ປຸ່ມ */
}

.sidebar .nav-link {
    display: flex;
    align-items: center;
    font-weight: 500;
    color: var(--text-dark);
    padding: 10px 16px; /* ເພີ່ມພື້ນທີ່ Click */
    border-radius: var(--border-radius); /* ເຮັດປຸ່ມມົນ */
    transition: all var(--transition-speed); /* ໃສ່ Effect ເວລາເອົາເມົ້າຊີ້ */
    margin-bottom: 4px;
}

.sidebar .nav-link .feather {
    margin-right: 12px; /* ເພີ່ມໄລຍະຫ່າງລະຫວ່າງ icon ກັບ ຕົວອັກສອນ */
    color: var(--secondary-color);
    transition: color var(--transition-speed);
}

/* Hover State (ເວລາເອົາເມົ້າຊີ້) */
.sidebar .nav-link:hover {
    color: var(--primary-color);
    background-color: rgba(36, 112, 220, 0.08); /* ພື້ນຫຼັງສີຟ້າຈາງໆ */
    text-decoration: none;
}
.sidebar .nav-link:hover .feather {
    color: var(--primary-color); /* ປ່ຽນສີ icon ເປັນສີຫຼັກ */
}

/* Active State (ເມນູທີ່ກຳລັງໃຊ້ງານ) */
.sidebar .nav-link.active {
    color: var(--primary-color);
    background-color: rgba(36, 112, 220, 0.12); /* ພື້ນຫຼັງສີຟ້າເຂັ້ມກວ່າ hover ໜ້ອຍໜຶ່ງ */
    font-weight: 600;
}

.sidebar .nav-link.active .feather {
    color: var(--primary-color);
}

/* ຫົວຂໍ້ຍ່ອຍໃນ Sidebar */
.sidebar-heading {
    font-size: .8rem;
    text-transform: uppercase;
    letter-spacing: 1px; /* ເພີ່ມໄລຍະຫ່າງລະຫວ່າງຕົວອັກສອນ */
    color: #999;
    padding: 16px 16px 8px 28px; /* ຈັດ layout ໃຫ້ກົງກັບ nav-link */
}