{{define "backend_head"}}
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <!--begin::Primary Meta Tags-->
    <title>ระบบงาน EHONG MD | {{if eq .CurrentPage "main"}}หน้าหลัก (Dashboard){{else}}รายงาน{{end}}</title>
    <link rel="icon" type="image/png" href="/images/logoEHMD.png?v=1" />
    <link rel="shortcut icon" type="image/png" href="/images/logoEHMD.png?v=1" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=yes" />
    <meta name="color-scheme" content="light dark" />
    <meta name="theme-color" content="#007bff" media="(prefers-color-scheme: light)" />
    <meta name="theme-color" content="#1a1a1a" media="(prefers-color-scheme: dark)" />
    
    <!--begin::Fonts-->
    <link
      rel="stylesheet"
      href="https://cdn.jsdelivr.net/npm/@fontsource/source-sans-3@5.0.12/index.css"
      integrity="sha256-tXJfXfp6Ewt1ilPzLDtQnJV4hclT9XuaZUKyUvmyr+Q="
      crossorigin="anonymous"
      media="print"
      onload="this.media='all'"
    />
    <link href="https://fonts.googleapis.com/css2?family=Prompt:wght@300;400;500;600;700&display=swap" rel="stylesheet">
    <style>
      :root {
        --bs-font-sans-serif: 'Prompt', sans-serif !important;
        --bs-body-font-family: var(--bs-font-sans-serif) !important;
        font-size: 0.7rem !important;
        
        /* Premium Luxury Tokens (Synced with Login) */
        --luxury-dark: #0c0c0c;
        --luxury-deep: #ce0000;
        --premium-accent: #ce0000;
        --glass-bg: rgba(255, 255, 255, 0.03);
        --glass-border: rgba(255, 255, 255, 0.1);
        --premium-radius: 12px;
        --soft-shadow: 0 10px 30px rgba(0,0,0,0.3);
      }

      body {
        background-color: #f1f5f9; /* Light grey for content area */
        color: #1e293b;
      }

      /* Synchronized Sidebar */
      .app-sidebar {
        background: var(--luxury-dark) !important;
        border-right: 1px solid var(--glass-border) !important;
      }

      .sidebar-brand {
        background: var(--luxury-deep) !important;
        border-bottom: 1px solid var(--glass-border) !important;
      }

      /* Synchronized Header - FIXED MASTER */
      .app-header {
        background: var(--luxury-deep) !important;
        backdrop-filter: blur(10px);
        -webkit-backdrop-filter: blur(10px);
        border-bottom: 1px solid var(--glass-border) !important;
        position: sticky !important;
        top: 0;
        z-index: 1030;
        box-shadow: 0 4px 15px rgba(0,0,0,0.2) !important;
      }

      /* Refined Fixed Sidebar - Responsive & Stable */
      @media (min-width: 992px) {
        .layout-fixed .app-sidebar {
          position: fixed !important;
          height: 100vh;
          overflow-y: auto;
          z-index: 1035;
        }
        .layout-fixed .app-main, 
        .layout-fixed .app-header,
        .layout-fixed .app-footer {
          margin-left: 250px; /* Offset for fixed sidebar */
          transition: margin-left 0.3s ease-in-out;
        }
        .sidebar-collapse.layout-fixed .app-main,
        .sidebar-collapse.layout-fixed .app-header,
        .sidebar-collapse.layout-fixed .app-footer {
          margin-left: 0;
        }
      }

      .app-sidebar {
        background: var(--luxury-dark) !important;
        border-right: 1px solid var(--glass-border) !important;
        transition: transform 0.3s ease-in-out, margin-left 0.3s ease-in-out;
      }

      .card {
        border: none !important;
        box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);
        border-radius: var(--premium-radius) !important;
      }

      .btn-danger {
        background: linear-gradient(135deg, #dc3545 0%, #a71d2a 100%);
        border: none;
        box-shadow: 0 4px 12px rgba(220, 53, 69, 0.2);
      }

      .nav-link.active {
        background-color: var(--premium-accent) !important;
        color: white !important;
        border-radius: 8px !important;
      }

      .sidebar-menu .nav-link:hover:not(.active) {
        background-color: rgba(255, 255, 255, 0.05) !important;
      }
    </style>
    <!--end::Fonts-->
    
    <!--begin::Third Party Plugin(OverlayScrollbars)-->
    <link
      rel="stylesheet"
      href="https://cdn.jsdelivr.net/npm/overlayscrollbars@2.11.0/styles/overlayscrollbars.min.css"
      crossorigin="anonymous"
    />
    <!--end::Third Party Plugin(OverlayScrollbars)-->
    <!--begin::Third Party Plugin(Bootstrap Icons)-->
    <link
      rel="stylesheet"
      href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.13.1/font/bootstrap-icons.min.css"
      crossorigin="anonymous"
    />
    <!--end::Third Party Plugin(Bootstrap Icons)-->
    <!-- DataTables -->
    <link rel="stylesheet" href="https://cdn.datatables.net/2.2.2/css/dataTables.bootstrap5.css">
    <link rel="stylesheet" href="https://cdn.datatables.net/buttons/3.2.1/css/buttons.bootstrap5.css">
    <!--begin::Required Plugin(AdminLTE)-->
    <link rel="stylesheet" href="/css/adminlte.css" />
    <!--end::Required Plugin(AdminLTE)-->
    <!-- apexcharts -->
    <link
      rel="stylesheet"
      href="https://cdn.jsdelivr.net/npm/apexcharts@3.37.1/dist/apexcharts.css"
      integrity="sha256-4MX+61mt9NVvvuPjUWdUdyfZfxSB1/Rf9WtqRHgG5S0="
      crossorigin="anonymous"
    />
    <!-- jsvectormap -->
    <link
      rel="stylesheet"
      href="https://cdn.jsdelivr.net/npm/jsvectormap@1.5.3/dist/css/jsvectormap.min.css"
      integrity="sha256-+uGLJmmTKOqBr+2E6KDYs/NRsHxSkONXFHUL0fy2O/4="
      crossorigin="anonymous"
    />
{{end}}