/*file: www/w_assets/css/style.css*/
    /* ----------------------------------------------------
     ປະກາດໃຊ້ Custom Local Font (Lao Old Phimdeed)
  ---------------------------------------------------- */
  
        /* ໃຊ້ Transition ພື້ນຖານຮ່ວມກັບ Class fade ຂອງ Bootstrap */
        /*.score-fade-in {*/
        /*    opacity: 0;*/
        /*    transition: opacity 0.35s ease-in-out, transform 0.35s ease-in-out;*/
        /*    transform: scale(0.95);*/
        /*}*/
        
        /* ເມື່ອມີ class show ໃຫ້ສະແດງຜົນປົກກະຕິ (Bootstrap fade class ມັກໃຊ້ຄູ່ກັບ show) */
        /*.score-fade-in.show, */
        /*.fade.show {*/
        /*    opacity: 1;*/
        /*    transform: scale(1);*/
        /*}*/
  
      @font-face {
        font-family: 'Lao Old Phimdeed';
        src: url('w_assets/fonts/Lao_Old_Phimdeed.ttf') format('truetype');
        font-weight: normal;
        font-style: normal;
        font-display: swap;
      }
      /* ----------------------------------------------------
  1. Theme: Modern Dark (ໂທນສີມືດ ທັນສະໄໝ / Midnight)
---------------------------------------------------- */

      /* :root {*/
      /*  --primary-color: #38bdf8;*/
      /*  --primary-hover: #0ea5e9;*/
      /*  --sidebar-bg: #0f172a;*/
      /*  --sidebar-color: #94a3b8;*/
      /*  --sidebar-hover: #1e293b;*/
      /*  --sidebar-active: #0ea5e9;*/
      /*  --body-bg: #090d16;*/
      /*  --card-bg: #1e293b;*/
      /*  --text-main: #f8fafc;*/
      /*  --text-muted: #94a3b8;*/
      /*  --border-color: #334155;*/
      /*  --success-color: #34d399;*/
      /*  --danger-color: #f87171;*/
      /*  --warning-color: #fbbf24;*/
      /*  --font-family: "Lao Old Phimdeed", "Noto Sans Lao", sans-serif;*/
      /*} */

      /* ----------------------------------------------------
  2. Theme: Emerald Forest (ໂທນສີຂຽວ ມິຕິທຳມະຊາດ)
---------------------------------------------------- */

      /* :root {*/
      /*  --primary-color: #059669;*/
      /*  --primary-hover: #047857;*/
      /*  --sidebar-bg: #064e3b;*/
      /*  --sidebar-color: #a7f3d0;*/
      /*  --sidebar-hover: #065f46;*/
      /*  --sidebar-active: #059669;*/
      /*  --body-bg: #f0fdf4;*/
      /*  --card-bg: #ffffff;*/
      /*  --text-main: #022c22;*/
      /*  --text-muted: #658a7d;*/
      /*  --border-color: #d1fae5;*/
      /*  --success-color: #10b981;*/
      /*  --danger-color: #ef4444;*/
      /*  --warning-color: #f59e0b;*/
      /*  --font-family: "Lao Old Phimdeed", "Noto Sans Lao", sans-serif;*/
      /*} */

      /* ----------------------------------------------------
  3. Theme: Royal Purple (ໂທນສີມ່ວງ ຫູຼຫລາເປັນທາງການ)
---------------------------------------------------- */

      /* :root {
        --primary-color: #7c3aed;
        --primary-hover: #6d28d9;
        --sidebar-bg: #2e1065;
        --sidebar-color: #ddd6fe;
        --sidebar-hover: #4c1d95;
        --sidebar-active: #7c3aed;
        --body-bg: #fbf5ff;
        --card-bg: #ffffff;
        --text-main: #2e1065;
        --text-muted: #8b5cf6;
        --border-color: #ede9fe;
        --success-color: #10b981;
        --danger-color: #ef4444;
        --warning-color: #f59e0b;
        --font-family: "Lao Old Phimdeed", "Noto Sans Lao", sans-serif;
      } */

      /* ----------------------------------------------------
  4. Theme: Ocean Blue (ໂທນສີຟ້າທະເລ ສະອາດຕາ)
---------------------------------------------------- */

      :root {
        --primary-color: #0284c7;
        --primary-hover: #0369a1;
        --sidebar-bg: #0c4a6e;
        --sidebar-color: #bae6fd;
        --sidebar-hover: #075985;
        --sidebar-active: #0284c7;
        --body-bg: #f0f9ff;
        --card-bg: #ffffff;
        --text-main: #082f49;
        --text-muted: #64748b;
        --border-color: #e0f2fe;
        --success-color: #10b981;
        --danger-color: #ef4444;
        --warning-color: #f59e0b;
        --font-family: "Lao Old Phimdeed", "Noto Sans Lao", sans-serif;
      }

      /* ----------------------------------------------------
  5. Theme: Warm Sunset (ໂທນສີອຸ່ນ ສົ້ມ-ແດງ)
---------------------------------------------------- */

      /*:root {*/
      /*  --primary-color: #ea580c;*/
      /*  --primary-hover: #c2410c;*/
      /*  --sidebar-bg: #431407;*/
      /*  --sidebar-color: #fed7aa;*/
      /*  --sidebar-hover: #7c2d12;*/
      /*  --sidebar-active: #ea580c;*/
      /*  --body-bg: #fff7ed;*/
      /*  --card-bg: #ffffff;*/
      /*  --text-main: #431407;*/
      /*  --text-muted: #9a3412;*/
      /*  --border-color: #ffedd5;*/
      /*  --success-color: #10b981;*/
      /*  --danger-color: #ef4444;*/
      /*  --warning-color: #f59e0b;*/
      /*  --font-family: "Lao Old Phimdeed", "Noto Sans Lao", sans-serif;*/
      /*}*/

      /* ----------------------------------------------------
  6. Theme: Warm Sunset (ໂທນສີອຸ່ນ ສົ້ມ-ແດງ)
---------------------------------------------------- */

      /*:root {*/
      /*  --primary-color: #4f46e5;*/
      /*  --primary-hover: #4338ca;*/
      /*  --sidebar-bg: #1e293b;*/
      /*  --sidebar-color: #94a3b8;*/
      /*  --sidebar-hover: #334155;*/
      /*  --sidebar-active: #4f46e5;*/
      /*  --body-bg: #f8fafc;*/
      /*  --card-bg: #ffffff;*/
      /*  --text-main: #0f172a;*/
      /*  --text-muted: #64748b;*/
      /*  --border-color: #e2e8f0;*/
      /*  --success-color: #10b981;*/
      /*  --danger-color: #ef4444;*/
      /*  --warning-color: #f59e0b;*/
      /*  --font-family: "Lao Old Phimdeed", "Noto Sans Lao", sans-serif;*/
      /*}*/

    * {
        font-family: var(--font-family);
        box-sizing: border-box;
      }

      body {
        background-color: var(--body-bg);
        color: var(--text-main);
        margin: 0;
        padding: 0;
        overflow-x: hidden;
      }

      /* Layout Structure */
      #app-container {
        display: flex;
        width: 100%;
        min-height: 100vh;
      }

      /* Sidebar Navigation */
      #sidebar {
        width: 280px;
        background-color: var(--sidebar-bg);
        color: var(--sidebar-color);
        transition: all 0.3s ease;
        display: flex;
        flex-direction: column;
        position: fixed;
        top: 0;
        bottom: 0;
        left: 0;
        z-index: 1050;
      }

      #sidebar.collapsed {
        width: 80px;
      }
      
      /* ----------------------------------------------------
           Prevent Sidebar Flicker on Page Reload
        ---------------------------------------------------- */
        html.preload-collapsed #sidebar {
            width: 80px !important;
        }
        
        html.preload-collapsed #sidebar .sidebar-brand span,
        html.preload-collapsed #sidebar .sidebar-menu span,
        html.preload-collapsed #sidebar .menu-header {
            display: none !important;
        }
        
        html.preload-collapsed #main-wrapper {
            margin-left: 80px !important;
        }

      .sidebar-header {
        padding: 1.25rem;
        display: flex;
        align-items: center;
        justify-content: space-between;
        border-bottom: 1px solid rgba(255, 255, 255, 0.1);
      }

      .sidebar-brand {
        display: flex;
        align-items: center;
        gap: 0.75rem;
        color: #ffffff;
        text-decoration: none;
        font-weight: 600;
        font-size: 1.1rem;
        overflow: hidden;
        white-space: nowrap;
      }

      .sidebar-brand img {
        width: 38px;
        height: 38px;
        object-fit: cover;
        border-radius: 8px; /* ເຮັດໃຫ້ມຸມມົນສວຍງາມ */
        border: 2px solid rgba(255, 255, 255, 0.2); /* ເພີ່ມເສັ້ນຂອບຈາງໆ */
        box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2); /* ເພີ່ມເງົາໃຫ້ມີມິຕິ */
        background-color: #ffffff;
        padding: 2px;
        /* ປ້ອງກັນການລາກຮູບພາບ (Drag) */
        user-select: none;
        -webkit-user-drag: none;
      }

      /* ປ້ອງກັນການຄລິກຂວາສະເພາະຮູບໂລໂກ້ */
      .sidebar-brand img {
        pointer-events: auto; /* ໃຫ້ສາມາດຄລິກປົກກະຕິແຕ່ກັນເມນູຄລິກຂວາ */
      }

      #sidebar.collapsed .sidebar-brand span,
      #sidebar.collapsed .sidebar-menu span,
      #sidebar.collapsed .menu-header {
        display: none;
      }

      .sidebar-body {
        padding: 1rem 0.75rem;
        overflow-y: auto;
        flex-grow: 1;
      }

      .menu-header {
        font-size: 0.75rem;
        text-transform: uppercase;
        letter-spacing: 0.05em;
        color: #64748b;
        padding: 0.75rem 0.75rem 0.25rem 0.75rem;
      }

      .sidebar-menu {
        list-style: none;
        padding: 0;
        margin: 0;
      }

      .sidebar-menu li {
        margin-bottom: 0.25rem;
      }

      .sidebar-menu a {
        display: flex;
        align-items: center;
        gap: 0.85rem;
        padding: 0.75rem;
        color: var(--sidebar-color);
        text-decoration: none;
        border-radius: 0.375rem;
        transition: all 0.2s ease;
        font-size: 0.95rem;
      }

      .sidebar-menu a:hover,
      .sidebar-menu a.active {
        background-color: var(--sidebar-hover);
        color: #ffffff;
      }

      .sidebar-menu a.active {
        background-color: var(--sidebar-active);
      }

      .sidebar-menu i {
        font-size: 1.1rem;
        min-width: 24px;
        text-align: center;
      }

      /* Backdrop สำหรับมือถือเวลากົດเปิด Sidebar */
      .sidebar-backdrop {
        display: none;
        position: fixed;
        top: 0;
        left: 0;
        width: 100vw;
        height: 100vh;
        background-color: rgba(0, 0, 0, 0.5);
        z-index: 1045; /* ໃຫ້ຢູ່້ອງក្រោម Sidebar (z-index 1050) ແต่อຍູ່ເທິງເນື້ອຫາອື່ນ */
        transition: opacity 0.3s ease;
      }

      .sidebar-backdrop.show {
        display: block;
      }

      /* Main Wrapper */
      #main-wrapper {
        margin-left: 280px;
        flex-grow: 1;
        transition: all 0.3s ease;
        display: flex;
        flex-direction: column;
        min-height: 100vh;
      }

      #main-wrapper.expanded {
        margin-left: 80px;
      }

      /* Header Top */
      .navbar-top {
        height: 70px;
        background-color: var(--card-bg);
        border-bottom: 1px solid var(--border-color);
        display: flex;
        align-items: center;
        justify-content: space-between;
        padding: 0 1.5rem;
        position: sticky;
        top: 0;
        z-index: 1040;
      }

      .toggle-btn {
        background: none;
        border: none;
        color: var(--text-main);
        font-size: 1.25rem;
        cursor: pointer;
      }

      .search-box {
        position: relative;
        width: 320px;
      }

      .search-box input {
        width: 100%;
        padding: 0.5rem 1rem 0.5rem 2.5rem;
        border: 1px solid var(--border-color);
        border-radius: 0.375rem;
        background-color: var(--body-bg);
        font-size: 0.9rem;
        outline: none;
        transition: border-color 0.2s;
      }

      .search-box input:focus {
        border-color: var(--primary-color);
        background-color: #ffffff;
      }

      .search-box i {
        position: absolute;
        left: 0.85rem;
        top: 50%;
        transform: translateY(-50%);
        color: var(--text-muted);
      }

      .user-nav {
        display: flex;
        align-items: center;
        gap: 1.25rem;
      }

      .notification-badge {
        position: relative;
        cursor: pointer;
        color: var(--text-muted);
        font-size: 1.2rem;
      }

      .notification-badge .badge {
        position: absolute;
        top: -5px;
        right: -5px;
        font-size: 0.65rem;
        padding: 0.2rem 0.4rem;
      }

      .user-profile {
        display: flex;
        align-items: center;
        gap: 0.75rem;
        cursor: pointer;
      }

      .user-profile img {
        width: 40px;
        height: 40px;
        border-radius: 50%;
        object-fit: cover;
      }

      .user-info .name {
        font-weight: 600;
        font-size: 0.9rem;
        line-height: 1.2;
      }

      .user-info .role {
        font-size: 0.75rem;
        color: var(--text-muted);
      }

      /* Content Area */
      .content-body {
        padding: 1.5rem;
        flex-grow: 1;
      }

      /* KPI Cards */
      .kpi-card {
        background-color: var(--card-bg);
        border: 1px solid var(--border-color);
        border-radius: 0.5rem;
        padding: 1.25rem;
        display: flex;
        flex-direction: column;
        justify-content: space-between;
        height: 100%;
      }

      .kpi-header {
        display: flex;
        justify-content: space-between;
        align-items: flex-start;
        margin-bottom: 0.75rem;
      }

      .kpi-title {
        font-size: 0.875rem;
        color: var(--text-muted);
        font-weight: 500;
      }

      .kpi-icon {
        width: 40px;
        height: 40px;
        border-radius: 0.375rem;
        display: flex;
        align-items: center;
        justify-content: center;
        font-size: 1.1rem;
      }

      .kpi-value {
        font-size: 1.5rem;
        font-weight: 700;
        color: var(--text-main);
        margin-bottom: 0.5rem;
      }

      .kpi-footer {
        display: flex;
        align-items: center;
        gap: 0.5rem;
        font-size: 0.8rem;
      }

      .trend-up {
        color: var(--success-color);
        font-weight: 600;
      }

      .trend-down {
        color: var(--danger-color);
        font-weight: 600;
      }

      /* Cards & Containers */
      .dashboard-card {
        background-color: var(--card-bg);
        border: 1px solid var(--border-color);
        border-radius: 0.5rem;
        padding: 1.25rem;
        margin-bottom: 1.5rem;
      }

      .card-header-custom {
        display: flex;
        justify-content: space-between;
        align-items: center;
        margin-bottom: 1rem;
        padding-bottom: 0.75rem;
        border-bottom: 1px solid var(--border-color);
      }

      .card-title-custom {
        font-size: 1rem;
        font-weight: 600;
        color: var(--text-main);
        margin: 0;
      }

      /* Data Tables */
      .table-custom {
        width: 100%;
        margin-bottom: 0;
        vertical-align: middle;
      }

      .table-custom th {
        font-weight: 600;
        font-size: 0.85rem;
        color: var(--text-muted);
        background-color: var(--body-bg);
        border-bottom: 1px solid var(--border-color);
        padding: 0.75rem 1rem;
      }

      .table-custom td {
        font-size: 0.9rem;
        padding: 0.75rem 1rem;
        border-bottom: 1px solid var(--border-color);
        color: var(--text-main);
      }

      /* Responsive adjustments */
      @media (max-width: 992px) {
        #sidebar {
          width: 80px;
        }
        #sidebar .sidebar-brand span,
        #sidebar .sidebar-menu span,
        #sidebar .menu-header {
          display: none;
        }
        #main-wrapper {
          margin-left: 80px;
        }
        .search-box {
          width: 200px;
        }
      }

      /* ປັບ Media Query ສຳລັບໜ້າຈໍມືຖື (max-width: 768px) */
      @media (max-width: 768px) {
        #sidebar {
          width: 280px; /* กำหนดความกว้างเต็มตอนเปิด */
          transform: translateX(-100%); /* ซ่อน Sidebar ໄປทางซ้ายสุด */
        }
        #sidebar.mobile-show {
          transform: translateX(0); /* ສະແດງ Sidebar ມາເຕັມຈໍແບບ Overlay */
        }
        #sidebar.mobile-show .sidebar-brand span,
        #sidebar.mobile-show .sidebar-menu span,
        #sidebar.mobile-show .menu-header {
          display: inline;
        }
        #main-wrapper {
          margin-left: 0 !important;
        }
        .search-box {
          display: none;
        }
      }