:root {
      --primary: #0f2c59;
      --primary-light: #1e40af;
      --primary-hover: #1e3a8a;
      --primary-subtle: #eff6ff;
      --secondary: #0284c7;
      --accent-gold: #c5a059;
      --accent-gold-light: #fef3c7;
      
      --sidebar-bg: #0b1528;
      --sidebar-surface: #172339;
      --sidebar-border: rgba(255, 255, 255, 0.07);
      --sidebar-text: #94a3b8;
      --sidebar-text-active: #ffffff;
      --sidebar-active-bg: rgba(30, 64, 175, 0.4);

      --success: #059669;
      --success-bg: #ecfdf5;
      --success-border: #a7f3d0;
      
      --warning: #d97706;
      --warning-bg: #fffbeb;
      --warning-border: #fde68a;
      
      --danger: #dc2626;
      --danger-bg: #fef2f2;
      --danger-border: #fecaca;
      
      --surface: #ffffff;
      --background: #f8fafc;
      --text: #0f172a;
      --text-secondary: #334155;
      --muted: #64748b;
      --border: #e2e8f0;
      --border-focus: #3b82f6;

      --shadow-sm: 0 1px 2px 0 rgba(0, 0, 0, 0.05);
      --shadow: 0 4px 16px -2px rgba(15, 23, 42, 0.06), 0 2px 6px -1px rgba(15, 23, 42, 0.03);
      --shadow-lg: 0 20px 30px -8px rgba(15, 23, 42, 0.12), 0 8px 12px -4px rgba(15, 23, 42, 0.06);

      --radius-sm: 8px;
      --radius: 14px;
      --radius-lg: 20px;
      --radius-pill: 9999px;
      --transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
    }

    * {
      box-sizing: border-box;
      -webkit-tap-highlight-color: transparent;
    }

    body {
      margin: 0;
      color: var(--text);
      background: var(--background);
      font-family: "Noto Sans Thai", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
      font-size: 15px;
      line-height: 1.6;
      -webkit-font-smoothing: antialiased;
    }

    button,
    input,
    select,
    textarea {
      font: inherit;
    }

    button {
      cursor: pointer;
      border: 0;
      outline: none;
    }

    .hidden {
      display: none !important;
    }

    h1, h2, h3, h4 {
      margin-top: 0;
      font-family: "Prompt", "Mitr", sans-serif;
      font-weight: 600;
      letter-spacing: -0.01em;
    }

    /* =========================================
       LANDING PAGE
       ========================================= */
    .landing {
      min-height: 100vh;
      display: flex;
      flex-direction: column;
      justify-content: center;
      align-items: center;
      padding: 36px 20px;
      background:
        radial-gradient(circle at 15% 15%, rgba(15, 44, 89, 0.08) 0%, transparent 45%),
        radial-gradient(circle at 85% 85%, rgba(2, 132, 199, 0.08) 0%, transparent 45%),
        linear-gradient(180deg, #f8fafc 0%, #f1f5f9 100%);
    }

    .landing-header {
      max-width: 880px;
      margin: 0 auto 38px;
      text-align: center;
    }

    .logo-mark {
      display: grid;
      width: 96px;
      height: 96px;
      margin: 0 auto 24px;
      place-items: center;
      color: white;
      border-radius: 28px;
      background: linear-gradient(135deg, var(--primary) 0%, var(--primary-light) 60%, var(--secondary) 100%);
      box-shadow: 0 16px 32px -4px rgba(15, 44, 89, 0.28);
      border: 2px solid rgba(255, 255, 255, 0.7);
      animation: float 4s ease-in-out infinite;
    }

    @keyframes float {
      0%, 100% {
        transform: translateY(0);
      }
      50% {
        transform: translateY(-8px);
      }
    }

    .landing h1 {
      margin-bottom: 12px;
      color: var(--primary);
      font-family: "Prompt", sans-serif;
      font-weight: 700;
      font-size: clamp(24px, 3.8vw, 38px);
      line-height: 1.35;
      letter-spacing: -0.02em;
    }

    .subtitle {
      max-width: 640px;
      margin: 0 auto;
      color: var(--muted);
      font-size: 16px;
      line-height: 1.65;
    }

    .portal-grid {
      display: grid;
      width: 100%;
      max-width: 880px;
      grid-template-columns: repeat(2, minmax(0, 1fr));
      gap: 24px;
      margin: 0 auto;
    }

    .portal-card {
      position: relative;
      width: 100%;
      min-height: 240px;
      padding: 32px 28px;
      color: var(--text);
      text-align: left;
      border: 1px solid rgba(226, 232, 240, 0.9);
      border-radius: var(--radius-lg);
      background: rgba(255, 255, 255, 0.95);
      backdrop-filter: blur(8px);
      box-shadow: var(--shadow);
      transition: var(--transition);
      overflow: hidden;
    }

    .portal-card::before {
      content: "";
      position: absolute;
      top: 0;
      left: 0;
      width: 100%;
      height: 4px;
      background: linear-gradient(90deg, var(--primary), var(--secondary));
      opacity: 0;
      transition: var(--transition);
    }

    .portal-card:hover {
      border-color: #cbd5e1;
      transform: translateY(-4px);
      box-shadow: var(--shadow-lg);
    }

    .portal-card:hover::before {
      opacity: 1;
    }

    .portal-icon {
      display: grid;
      width: 72px;
      height: 72px;
      margin-bottom: 22px;
      place-items: center;
      border-radius: 20px;
      background: var(--primary-subtle);
      border: 1px solid rgba(37, 99, 235, 0.15);
      transition: var(--transition);
    }

    .portal-card:hover .portal-icon {
      transform: scale(1.06);
    }

    .portal-card.admin .portal-icon {
      background: #eff6ff;
      border-color: rgba(30, 64, 175, 0.15);
    }

    .portal-title {
      display: block;
      margin-bottom: 8px;
      color: var(--primary);
      font-family: "Prompt", "Mitr", sans-serif;
      font-size: 20px;
      font-weight: 600;
      line-height: 1.4;
    }

    .portal-description {
      display: block;
      color: var(--muted);
      font-size: 14.5px;
      line-height: 1.6;
    }

    .build-version {
      margin-top: 40px;
      color: #94a3b8;
      text-align: center;
      font-size: 12.5px;
      letter-spacing: 0.05em;
    }

    /* =========================================
       APP LAYOUT & SIDEBAR
       ========================================= */
    .app-layout {
      display: grid;
      min-height: 100vh;
      grid-template-columns: 270px minmax(0, 1fr);
      background: #f8fafc;
    }

    .sidebar {
      position: relative;
      display: flex;
      flex-direction: column;
      padding: 24px 18px;
      color: #f8fafc;
      background: var(--sidebar-bg);
      border-right: 1px solid var(--sidebar-border);
    }

    .sidebar-brand {
      display: flex;
      align-items: center;
      gap: 12px;
      padding: 8px 10px 24px;
      color: #ffffff;
      font-family: "Prompt", "Mitr", sans-serif;
      font-size: 17px;
      font-weight: 600;
      line-height: 1.4;
      border-bottom: 1px solid var(--sidebar-border);
      margin-bottom: 20px;
    }

    .sidebar-menu {
      display: flex;
      flex-direction: column;
      gap: 6px;
      flex: 1;
    }

    .menu-button {
      display: flex;
      align-items: center;
      gap: 12px;
      width: 100%;
      padding: 12px 16px;
      color: var(--sidebar-text);
      text-align: left;
      font-size: 14.5px;
      font-weight: 500;
      border-radius: 10px;
      background: transparent;
      border: 1px solid transparent;
      transition: var(--transition);
    }

    .menu-button:hover {
      color: #ffffff;
      background: rgba(255, 255, 255, 0.05);
    }

    .menu-button.active {
      color: var(--sidebar-text-active);
      background: var(--sidebar-active-bg);
      border: 1px solid rgba(59, 130, 246, 0.35);
      box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
    }

    /* =========================================
       MAIN CONTENT & TOPBAR
       ========================================= */
    .main-content {
      min-width: 0;
      padding: 28px 36px;
      background: #f8fafc;
    }

    .topbar {
      display: flex;
      margin-bottom: 24px;
      padding-bottom: 18px;
      align-items: center;
      justify-content: space-between;
      gap: 16px;
      border-bottom: 1px solid #e2e8f0;
    }

    .topbar h2 {
      margin: 0;
      color: var(--primary);
      font-size: 24px;
      font-weight: 600;
    }

    .button-row {
      display: flex;
      flex-wrap: wrap;
      align-items: center;
      gap: 12px;
    }

    /* =========================================
       BUTTONS
       ========================================= */
    .btn {
      display: inline-flex;
      align-items: center;
      justify-content: center;
      gap: 8px;
      padding: 9px 16px;
      color: var(--text-secondary);
      font-size: 14px;
      font-weight: 500;
      border: 1px solid var(--border);
      border-radius: var(--radius-sm);
      background: #ffffff;
      box-shadow: var(--shadow-sm);
      transition: var(--transition);
      white-space: nowrap;
    }

    .btn:hover {
      color: var(--text);
      background: #f1f5f9;
      border-color: #cbd5e1;
      transform: translateY(-1px);
    }

    .btn:active {
      transform: translateY(0);
    }

    .btn-primary {
      color: #ffffff;
      border-color: var(--primary);
      background: linear-gradient(135deg, var(--primary) 0%, var(--primary-light) 100%);
      box-shadow: 0 2px 8px rgba(15, 44, 89, 0.2);
    }

    .btn-primary:hover {
      color: #ffffff;
      background: linear-gradient(135deg, var(--primary-hover) 0%, var(--primary) 100%);
      box-shadow: 0 4px 12px rgba(15, 44, 89, 0.3);
      border-color: var(--primary-hover);
    }

    .btn-success {
      color: #ffffff;
      border-color: var(--success);
      background: var(--success);
      box-shadow: 0 2px 8px rgba(5, 150, 105, 0.2);
    }

    .btn-success:hover {
      color: #ffffff;
      background: #047857;
      border-color: #047857;
    }

    .btn-danger {
      color: #ffffff;
      border-color: var(--danger);
      background: var(--danger);
      box-shadow: 0 2px 8px rgba(220, 38, 38, 0.2);
    }

    .btn-danger:hover {
      color: #ffffff;
      background: #b91c1c;
      border-color: #b91c1c;
    }

    .btn-warning {
      color: #ffffff;
      border-color: var(--warning);
      background: var(--warning);
      box-shadow: 0 2px 8px rgba(217, 119, 6, 0.2);
    }

    .btn-warning:hover {
      color: #ffffff;
      background: #b45309;
      border-color: #b45309;
    }

    .btn:disabled {
      cursor: not-allowed;
      opacity: 0.5;
      transform: none !important;
      box-shadow: none !important;
    }

    /* =========================================
       TWO-TONE ACTION BUTTONS (HEADER)
       ========================================= */
    .btn-twotone-action {
      display: inline-flex;
      align-items: center;
      gap: 12px;
      padding: 6px 18px 6px 7px;
      border-radius: var(--radius-pill);
      font-family: "Prompt", "Noto Sans Thai", sans-serif;
      font-size: 14.5px;
      font-weight: 600;
      transition: var(--transition);
      cursor: pointer;
    }

    .btn-twotone-action .twotone-icon {
      display: grid;
      width: 36px;
      height: 36px;
      place-items: center;
      border-radius: 50%;
      transition: var(--transition);
    }

    .btn-twotone-action:hover {
      transform: translateY(-2px);
    }

    /* ปุ่มแจ้งซ่อม ทูโทนเขียวมรกตพรีเมียม */
    .btn-twotone-green {
      background: linear-gradient(135deg, #065f46 0%, #047857 100%);
      border: 1px solid rgba(16, 185, 129, 0.4);
      color: #ffffff;
      box-shadow: 0 4px 14px rgba(5, 150, 105, 0.28);
    }

    .btn-twotone-green .twotone-icon {
      background: #10b981;
      color: #ffffff;
      box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
    }

    .btn-twotone-green:hover {
      background: linear-gradient(135deg, #047857 0%, #059669 100%);
      box-shadow: 0 6px 20px rgba(5, 150, 105, 0.4);
      border-color: #34d399;
    }

    .btn-twotone-green:hover .twotone-icon {
      transform: scale(1.08) rotate(-5deg);
    }

    /* ปุ่มหน้าแรก ทูโทนขาวกระจกใสพรีเมียม */
    .btn-twotone-white {
      background: rgba(255, 255, 255, 0.14);
      border: 1px solid rgba(255, 255, 255, 0.28);
      color: #ffffff;
      backdrop-filter: blur(10px);
      box-shadow: 0 4px 14px rgba(0, 0, 0, 0.12);
    }

    .btn-twotone-white .twotone-icon {
      background: rgba(255, 255, 255, 0.22);
      color: #ffffff;
    }

    .btn-twotone-white:hover {
      background: rgba(255, 255, 255, 0.24);
      border-color: rgba(255, 255, 255, 0.5);
      box-shadow: 0 6px 18px rgba(0, 0, 0, 0.2);
    }

    .btn-twotone-white:hover .twotone-icon {
      transform: scale(1.08);
      background: rgba(255, 255, 255, 0.35);
    }

    /* =========================================
       DASHBOARD STAT CARDS
       ========================================= */
    .dashboard-grid {
      display: grid;
      margin-bottom: 24px;
      grid-template-columns: repeat(4, minmax(0, 1fr));
      gap: 16px;
    }

    .stat-card {
      position: relative;
      padding: 22px 24px;
      border: 1px solid var(--border);
      border-radius: var(--radius);
      background: #ffffff;
      box-shadow: var(--shadow);
      transition: var(--transition);
      overflow: hidden;
    }

    .stat-card:hover {
      border-color: #cbd5e1;
      transform: translateY(-2px);
      box-shadow: var(--shadow-lg);
    }

    .stat-label {
      color: var(--muted);
      font-size: 13.5px;
      font-weight: 500;
    }

    .stat-value {
      margin-top: 6px;
      color: var(--primary);
      font-family: "Prompt", "Mitr", sans-serif;
      font-size: 32px;
      font-weight: 600;
      line-height: 1.1;
    }

    /* =========================================
       CARDS & FORMS
       ========================================= */
    .card {
      margin-bottom: 24px;
      padding: 24px;
      border: 1px solid var(--border);
      border-radius: var(--radius);
      background: #ffffff;
      box-shadow: var(--shadow);
    }

    .card-title {
      display: flex;
      margin-bottom: 20px;
      align-items: center;
      justify-content: space-between;
      gap: 14px;
      border-bottom: 1px solid #f1f5f9;
      padding-bottom: 14px;
    }

    .card-title h3 {
      margin: 0;
      color: var(--primary);
      font-size: 18px;
      font-weight: 600;
    }

    .filters {
      display: grid;
      margin-bottom: 20px;
      grid-template-columns: 2fr repeat(4, minmax(135px, 1fr));
      gap: 12px;
      padding: 16px;
      background: #f8fafc;
      border: 1px solid var(--border);
      border-radius: var(--radius-sm);
    }

    .form-grid {
      display: grid;
      grid-template-columns: repeat(2, minmax(0, 1fr));
      gap: 18px;
    }

    .form-group {
      min-width: 0;
    }

    .form-group.full {
      grid-column: 1 / -1;
    }

    label {
      display: block;
      margin-bottom: 6px;
      color: #334155;
      font-size: 13.5px;
      font-weight: 600;
    }

    input,
    select,
    textarea {
      width: 100%;
      padding: 10px 14px;
      color: var(--text);
      font-size: 14px;
      border: 1px solid var(--border);
      border-radius: var(--radius-sm);
      outline: none;
      background: #ffffff;
      transition: var(--transition);
    }

    input:focus,
    select:focus,
    textarea:focus {
      border-color: var(--border-focus);
      box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.15);
    }

    textarea {
      min-height: 100px;
      resize: vertical;
    }

    /* =========================================
       TABLE DESIGN
       ========================================= */
    .table-wrap {
      width: 100%;
      overflow-x: auto;
      border: 1px solid #e2e8f0;
      border-radius: var(--radius-sm);
      background: #ffffff;
    }

    table {
      width: 100%;
      border-collapse: collapse;
      text-align: left;
    }

    th, td {
      padding: 13px 16px;
      text-align: left;
      vertical-align: middle;
      border-bottom: 1px solid #f1f5f9;
      white-space: nowrap;
    }

    td.td-action,
    th.th-action {
      text-align: center;
      white-space: nowrap;
    }

    td.td-action .button-row,
    td[data-label="การจัดการ"] .button-row,
    td[data-label="จัดการ"] .button-row {
      display: inline-flex;
      flex-direction: row;
      flex-wrap: nowrap;
      align-items: center;
      justify-content: center;
      gap: 6px;
    }

    td.td-action .btn,
    td[data-label="การจัดการ"] .btn,
    td[data-label="จัดการ"] .btn {
      padding: 6px 14px;
      font-size: 13px;
      white-space: nowrap;
    }

    th {
      color: #475569;
      background: #f8fafc;
      font-family: "Noto Sans Thai", sans-serif;
      font-size: 13px;
      font-weight: 600;
      letter-spacing: 0.02em;
      border-bottom: 1px solid #e2e8f0;
    }

    tbody tr {
      transition: background 0.15s ease;
    }

    tbody tr:hover {
      background: #f8fafc;
    }

    td {
      color: #1e293b;
      font-size: 14px;
    }

    .thumbnail,
    .avatar {
      display: grid;
      width: 46px;
      height: 46px;
      place-items: center;
      overflow: hidden;
      border-radius: 10px;
      background: var(--primary-subtle);
      border: 1px solid rgba(59, 130, 246, 0.15);
      font-size: 22px;
      transition: var(--transition);
    }

    .thumbnail {
      cursor: pointer;
      object-fit: cover;
    }

    .thumbnail:hover,
    .avatar:hover {
      transform: scale(1.08);
    }

    /* Status Badges */
    .status-badge {
      display: inline-flex;
      padding: 4px 10px;
      align-items: center;
      border-radius: var(--radius-pill);
      font-size: 12.5px;
      font-weight: 600;
      line-height: 1.3;
      border: 1px solid transparent;
    }

    .status-normal {
      color: #065f46;
      background: var(--success-bg);
      border-color: var(--success-border);
    }

    .status-repair {
      color: #92400e;
      background: var(--warning-bg);
      border-color: var(--warning-border);
    }

    .status-danger {
      color: #991b1b;
      background: var(--danger-bg);
      border-color: var(--danger-border);
    }

    /* =========================================
       IMAGE PREVIEW & PICKER
       ========================================= */
    .image-tools {
      display: flex;
      flex-wrap: wrap;
      gap: 10px;
    }

    .image-preview {
      display: none;
      margin-top: 14px;
      padding: 14px;
      border: 1px dashed #cbd5e1;
      border-radius: var(--radius);
      background: #f8fafc;
    }

    .image-preview.active {
      display: flex;
      align-items: center;
      gap: 16px;
    }

    .image-preview img {
      width: 100px;
      height: 85px;
      object-fit: cover;
      border-radius: 10px;
      border: 1px solid #e2e8f0;
    }

    .preview-meta {
      min-width: 0;
      flex: 1;
    }

    .preview-name {
      overflow: hidden;
      font-weight: 600;
      text-overflow: ellipsis;
      white-space: nowrap;
      font-size: 14px;
    }

    .preview-size {
      color: var(--muted);
      font-size: 13px;
    }

    /* =========================================
       MODAL DIALOG
       ========================================= */
    .modal-backdrop {
      position: fixed;
      z-index: 1000;
      inset: 0;
      display: grid;
      padding: 20px;
      place-items: center;
      background: rgba(15, 23, 42, 0.6);
      backdrop-filter: blur(8px);
      animation: modal-fade 0.2s ease-out;
    }

    @keyframes modal-fade {
      from { opacity: 0; }
      to { opacity: 1; }
    }

    .modal {
      width: min(720px, 100%);
      max-height: 90vh;
      overflow-y: auto;
      border-radius: var(--radius-lg);
      background: #ffffff;
      box-shadow: 0 25px 60px -15px rgba(15, 23, 42, 0.35);
      border: 1px solid rgba(255, 255, 255, 0.8);
      animation: modal-zoom 0.25s cubic-bezier(0.16, 1, 0.3, 1);
    }

    @keyframes modal-zoom {
      from {
        opacity: 0;
        transform: scale(0.96) translateY(10px);
      }
      to {
        opacity: 1;
        transform: scale(1) translateY(0);
      }
    }

    .modal.large {
      width: min(1020px, 100%);
    }

    .modal-header,
    .modal-footer {
      display: flex;
      padding: 18px 24px;
      align-items: center;
      justify-content: space-between;
      gap: 12px;
      border-bottom: 1px solid #f1f5f9;
    }

    .modal-footer {
      border-top: 1px solid #f1f5f9;
      border-bottom: 0;
    }

    .modal-header h3 {
      margin: 0;
      color: var(--primary);
      font-size: 19px;
      font-weight: 600;
    }

    .modal-body {
      padding: 24px;
    }

    .close-button {
      display: grid;
      width: 34px;
      height: 34px;
      place-items: center;
      color: var(--muted);
      border: 0;
      border-radius: 50%;
      background: #f1f5f9;
      font-size: 20px;
      transition: var(--transition);
    }

    .close-button:hover {
      color: var(--danger);
      background: #fee2e2;
    }

    .lightbox-image {
      display: block;
      max-width: 100%;
      max-height: 65vh;
      margin: auto;
      border-radius: var(--radius);
      object-fit: contain;
      box-shadow: var(--shadow-lg);
    }

    .login-box {
      width: min(420px, 100%);
    }

    .empty-state {
      padding: 40px 16px;
      color: var(--muted);
      text-align: center;
      font-size: 14.5px;
    }

    /* =========================================
       LOADING & TOAST
       ========================================= */
    .loading-overlay {
      position: fixed;
      z-index: 3000;
      inset: 0;
      display: grid;
      place-items: center;
      background: rgba(15, 23, 42, 0.45);
      backdrop-filter: blur(6px);
    }

    .loading-box {
      min-width: 240px;
      padding: 28px 32px;
      text-align: center;
      border-radius: var(--radius-lg);
      background: #ffffff;
      box-shadow: var(--shadow-lg);
      border: 1px solid #e2e8f0;
    }

    .spinner {
      width: 44px;
      height: 44px;
      margin: 0 auto 16px;
      border: 4px solid #e2e8f0;
      border-top-color: var(--primary-light);
      border-radius: 50%;
      animation: spin 0.8s linear infinite;
    }

    @keyframes spin {
      to {
        transform: rotate(360deg);
      }
    }

    .spin-animation {
      animation: spin 0.8s linear infinite !important;
    }

    .btn-refresh-premium {
      display: inline-flex;
      align-items: center;
      gap: 6px;
      padding: 6px 14px;
      font-family: inherit;
      font-size: 13px;
      font-weight: 500;
      border-radius: var(--radius-pill);
      border: 1px solid #cbd5e1;
      background: #ffffff;
      color: #334155;
      cursor: pointer;
      transition: var(--transition);
    }

    .btn-refresh-premium:hover {
      color: var(--primary);
      background: #eff6ff;
      border-color: #93c5fd;
      transform: translateY(-1px);
      box-shadow: 0 2px 8px rgba(37, 99, 235, 0.12);
    }

    .toast-container {
      position: fixed;
      z-index: 4000;
      top: 20px;
      right: 20px;
      display: grid;
      max-width: min(380px, calc(100vw - 40px));
      gap: 10px;
    }

    .toast {
      padding: 14px 18px;
      color: #ffffff;
      font-size: 14px;
      font-weight: 500;
      border-radius: 12px;
      background: #1e293b;
      box-shadow: 0 10px 25px -5px rgba(0, 0, 0, 0.2);
      animation: toast-in 0.25s cubic-bezier(0.16, 1, 0.3, 1);
    }

    .toast.success {
      background: #059669;
    }

    .toast.error {
      background: #dc2626;
    }

    .toast.warning {
      background: #d97706;
    }

    @keyframes toast-in {
      from {
        opacity: 0;
        transform: translateY(-10px) scale(0.95);
      }
      to {
        opacity: 1;
        transform: translateY(0) scale(1);
      }
    }

    /* =========================================
       PUBLIC PORTAL
       ========================================= */
    .public-header {
      padding: 22px 24px;
      color: white;
      background: linear-gradient(135deg, #0b1528 0%, #0f2c59 60%, #1e3a8a 100%);
      border-bottom: 1px solid rgba(255, 255, 255, 0.12);
      box-shadow: 0 4px 20px rgba(11, 21, 40, 0.15);
    }

    .public-header-inner {
      display: flex;
      max-width: 1180px;
      margin: auto;
      align-items: center;
      justify-content: space-between;
      gap: 18px;
    }

    .public-header h2 {
      margin: 0;
      font-size: 23px;
      font-weight: 600;
      color: #ffffff;
      letter-spacing: -0.01em;
    }

    .public-header-subtitle {
      color: #94a3b8;
      font-size: 14px;
      margin-top: 2px;
    }

    .public-main {
      max-width: 1180px;
      margin: auto;
      padding: 28px 20px;
    }

    .request-success {
      text-align: center;
      padding: 10px;
    }

    .queue-number {
      display: grid;
      width: 110px;
      height: 110px;
      margin: 20px auto;
      place-items: center;
      color: white;
      border-radius: 50%;
      background: linear-gradient(135deg, var(--primary-light) 0%, var(--secondary) 100%);
      font-family: "Prompt", "Mitr", sans-serif;
      font-size: 42px;
      font-weight: 600;
      box-shadow: 0 10px 25px rgba(30, 64, 175, 0.3);
    }

    /* =========================================
       RESPONSIVE DESIGN (IPHONE / IPAD / DESKTOP)
       ========================================= */
    @media (max-width: 1024px) {
      .app-layout {
        grid-template-columns: 230px minmax(0, 1fr);
      }
      .main-content {
        padding: 24px 20px;
      }
      .dashboard-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
      }
      .filters {
        grid-template-columns: repeat(2, minmax(0, 1fr));
      }
      .public-header {
        padding: 22px 18px;
      }
      .public-header-inner {
        flex-direction: column !important;
        align-items: center !important;
        text-align: center !important;
        gap: 16px !important;
        width: 100% !important;
      }
      .public-header-inner > div:first-child {
        text-align: center !important;
        width: 100% !important;
      }
      .public-header-inner .public-header-subtitle {
        text-align: center !important;
      }
      .public-header-inner .button-row {
        display: flex !important;
        justify-content: center !important;
        align-items: center !important;
        flex-wrap: wrap !important;
        gap: 12px !important;
        width: 100% !important;
        margin: 0 auto !important;
      }
      .public-header-inner .btn-twotone-action {
        width: auto !important;
        min-width: 160px !important;
        max-width: 250px !important;
        justify-content: center !important;
      }
    }

    /* Base styles for mobile elements (hidden on desktop) */
    .sidebar-backdrop {
      display: none;
    }

    .sidebar-close-btn {
      display: none;
    }

    .mobile-menu-toggle {
      display: none;
    }

    .topbar-left {
      display: flex;
      align-items: center;
      gap: 12px;
    }

    .sidebar-brand-left {
      display: flex;
      align-items: center;
      gap: 10px;
    }

    .mobile-card-status {
      display: none;
    }

    .queue-badge {
      font-weight: 700;
      color: var(--primary);
    }

    @media (max-width: 768px) {
      /* =========================================
         MOBILE RESPONSIVE: ADMIN PORTAL & APP LAYOUT
         ========================================= */
      .app-layout {
        grid-template-columns: 1fr;
        min-height: 100vh;
      }

      /* 1. Mobile Drawer Sidebar & Backdrop */
      .sidebar-backdrop {
        display: none;
        position: fixed;
        inset: 0;
        background: rgba(15, 23, 42, 0.65);
        backdrop-filter: blur(4px);
        -webkit-backdrop-filter: blur(4px);
        z-index: 998;
        opacity: 0;
        transition: opacity 0.25s ease;
      }

      .sidebar-backdrop.active {
        display: block !important;
        opacity: 1 !important;
      }

      .sidebar {
        position: fixed !important;
        top: 0 !important;
        left: 0 !important;
        bottom: 0 !important;
        width: 285px !important;
        max-width: 85vw !important;
        height: 100vh !important;
        height: 100dvh !important;
        z-index: 999 !important;
        transform: translateX(-100%) !important;
        transition: transform 0.28s cubic-bezier(0.33, 1, 0.68, 1) !important;
        box-shadow: 6px 0 25px rgba(0, 0, 0, 0.35) !important;
        overflow-y: auto !important;
        padding: 16px 14px 28px !important;
        background: var(--sidebar-bg) !important;
        border-right: 1px solid rgba(255, 255, 255, 0.1) !important;
      }

      .sidebar.open {
        transform: translateX(0) !important;
      }

      .sidebar-brand {
        display: flex !important;
        align-items: center !important;
        justify-content: space-between !important;
        padding: 4px 4px 14px !important;
        margin-bottom: 14px !important;
        border-bottom: 1px solid rgba(255, 255, 255, 0.1) !important;
      }

      .sidebar-brand-left {
        display: flex;
        align-items: center;
        gap: 9px;
        overflow: hidden;
      }

      .sidebar-brand-badge {
        width: 28px;
        height: 28px;
        border-radius: 7px;
        flex-shrink: 0;
      }

      .sidebar-brand-badge svg {
        width: 16px;
        height: 16px;
      }

      .sidebar-brand-text {
        font-size: 13.5px;
        font-weight: 600;
        color: #ffffff;
        letter-spacing: 0.1px;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
      }

      .sidebar-close-btn {
        display: inline-flex !important;
        align-items: center;
        justify-content: center;
        width: 32px;
        height: 32px;
        border-radius: 8px;
        background: rgba(255, 255, 255, 0.12);
        color: #ffffff;
        border: none;
        cursor: pointer;
        flex-shrink: 0;
        transition: background 0.15s ease;
      }

      .sidebar-close-btn:active {
        background: rgba(255, 255, 255, 0.25);
      }

      /* 2. Vertical Navigation Drawer Menu */
      .sidebar-menu {
        display: flex !important;
        flex-direction: column !important;
        gap: 8px !important;
        overflow-x: visible !important;
        padding: 6px 0 !important;
      }

      .menu-button {
        width: 100% !important;
        padding: 12px 14px !important;
        font-size: 14px !important;
        font-weight: 500;
        border-radius: 10px !important;
        justify-content: flex-start !important;
        gap: 12px !important;
        white-space: nowrap !important;
        border: 1px solid transparent;
      }

      .menu-button.active {
        border-color: rgba(96, 165, 250, 0.5);
        box-shadow: 0 2px 8px rgba(0, 0, 0, 0.25);
      }

      .menu-icon {
        width: 26px;
        height: 26px;
        border-radius: 6px;
      }

      .menu-icon svg {
        width: 15px;
        height: 15px;
      }

      /* 3. Main Content Area */
      .main-content {
        padding: 14px 12px 36px;
        background: #f8fafc;
      }

      .card {
        padding: 14px 12px;
        border-radius: 12px;
        margin-bottom: 14px;
        box-shadow: 0 2px 8px rgba(0, 0, 0, 0.04);
      }

      /* 4. Compact Single-row Topbar with Hamburger */
      .topbar {
        display: flex !important;
        flex-direction: row !important;
        align-items: center !important;
        justify-content: space-between !important;
        gap: 10px !important;
        margin-bottom: 14px !important;
        padding-bottom: 12px !important;
        border-bottom: 1px solid #e2e8f0 !important;
      }

      .topbar-left {
        display: flex;
        align-items: center;
        gap: 10px;
        min-width: 0;
      }

      .mobile-menu-toggle {
        display: inline-flex !important;
        align-items: center;
        justify-content: center;
        width: 38px;
        height: 38px;
        border-radius: 8px;
        background: #ffffff;
        border: 1px solid #cbd5e1;
        color: var(--primary);
        cursor: pointer;
        box-shadow: 0 1px 3px rgba(0, 0, 0, 0.06);
        flex-shrink: 0;
      }

      .mobile-menu-toggle:active {
        background: #f1f5f9;
      }

      .topbar h2 {
        font-size: 17.5px !important;
        line-height: 1.2 !important;
        margin: 0 !important;
        color: var(--primary) !important;
        font-weight: 600 !important;
        white-space: nowrap !important;
        overflow: hidden !important;
        text-overflow: ellipsis !important;
      }

      .topbar .button-row {
        width: auto !important;
        display: flex !important;
        flex-wrap: nowrap !important;
        gap: 6px !important;
        flex-shrink: 0 !important;
      }

      .topbar .button-row .btn {
        width: auto !important;
        padding: 6px 10px !important;
        font-size: 12px !important;
        gap: 4px !important;
        border-radius: 7px !important;
        line-height: 1.2 !important;
      }

      .topbar .button-row .btn svg {
        width: 13px;
        height: 13px;
      }

      /* 5. Proportional 2x2 Dashboard Stat Cards */
      .dashboard-grid {
        display: grid !important;
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
        gap: 8px !important;
        margin-bottom: 14px !important;
      }

      .stat-card {
        padding: 10px 10px 8px;
        border-radius: 10px;
      }

      .stat-header {
        display: flex;
        align-items: center;
        justify-content: space-between;
        margin-bottom: 2px;
      }

      .stat-label {
        font-size: 11px;
        font-weight: 600;
        line-height: 1.25;
        color: #64748b;
      }

      .stat-icon-badge {
        width: 24px;
        height: 24px;
        border-radius: 6px;
      }

      .stat-icon-badge svg {
        width: 13px;
        height: 13px;
      }

      .stat-value {
        font-size: 20px;
        font-weight: 700;
        margin: 2px 0;
        line-height: 1.2;
      }

      .stat-subtext {
        font-size: 9.5px;
        line-height: 1.2;
        color: #94a3b8;
      }

      /* 6. Card Titles & Action Buttons Grid */
      .card-title {
        display: flex;
        flex-direction: column;
        align-items: stretch;
        gap: 10px;
        margin-bottom: 12px;
      }

      .card-title h3 {
        font-size: 15.5px;
        margin: 0;
        font-weight: 600;
        color: #1e293b;
      }

      .card-title .button-row {
        width: 100%;
        display: grid;
        grid-template-columns: repeat(3, 1fr);
        gap: 6px;
      }

      .card-title .button-row #addAssetButton,
      .card-title .button-row #addCategoryButton,
      .card-title .button-row #addLocationButton {
        grid-column: 1 / -1;
        width: 100%;
        padding: 9px 12px;
        font-size: 13.5px;
        font-weight: 600;
        border-radius: 8px;
        justify-content: center;
      }

      .card-title .button-row #pdfButton,
      .card-title .button-row #xlsxButton,
      .card-title .button-row #printButton,
      .card-title .button-row #exportRequestsPdfBtn,
      .card-title .button-row #exportRequestsXlsxBtn,
      .card-title .button-row #exportFilteredRequestsCsvBtn,
      .card-title .button-row #printRequestsBtn {
        width: 100%;
        padding: 7px 4px;
        font-size: 11.5px;
        justify-content: center;
        border-radius: 7px;
        gap: 4px;
      }

      .card-title .button-row #pdfButton svg,
      .card-title .button-row #xlsxButton svg,
      .card-title .button-row #printButton svg,
      .card-title .button-row #exportRequestsPdfBtn svg,
      .card-title .button-row #exportRequestsXlsxBtn svg,
      .card-title .button-row #exportFilteredRequestsCsvBtn svg,
      .card-title .button-row #printRequestsBtn svg {
        width: 13px;
        height: 13px;
      }

      /* 7. Clean 2-Column Filters */
      .filters {
        display: grid !important;
        grid-template-columns: 1fr 1fr !important;
        gap: 8px !important;
        margin-bottom: 12px !important;
      }

      .filters input[type="text"],
      #requestFilterKeyword,
      #assetFilterKeyword {
        grid-column: 1 / -1;
        width: 100%;
        font-size: 13px;
        padding: 9px 11px;
        border-radius: 8px;
      }

      .filters select {
        width: 100%;
        font-size: 12px;
        padding: 7px 8px;
        border-radius: 8px;
      }

      /* =========================================
         8. SMARTPHONE RESPONSIVE CARD TABLES
         ========================================= */
      .table-wrap {
        background: transparent !important;
        border: none !important;
        overflow-x: visible !important;
        box-shadow: none !important;
        border-radius: 0 !important;
        padding: 0 !important;
        margin-bottom: 12px !important;
      }

      .table-wrap table {
        display: block !important;
        width: 100% !important;
        border: none !important;
        border-collapse: separate !important;
      }

      .table-wrap thead {
        display: none !important; /* Hide standard wide headers */
      }

      .table-wrap tbody {
        display: flex !important;
        flex-direction: column !important;
        gap: 12px !important;
        width: 100% !important;
      }

      .table-wrap tr.mobile-card-row,
      .table-wrap tr {
        display: block !important;
        background: #ffffff !important;
        border: 1px solid #e2e8f0 !important;
        border-radius: 14px !important;
        padding: 12px 14px !important;
        box-shadow: 0 2px 8px rgba(0, 0, 0, 0.04) !important;
        width: 100% !important;
        box-sizing: border-box !important;
        position: relative !important;
      }

      .table-wrap td {
        display: flex !important;
        justify-content: space-between !important;
        align-items: center !important;
        padding: 7px 0 !important;
        border: none !important;
        border-bottom: 1px dashed #f1f5f9 !important;
        font-size: 13px !important;
        white-space: normal !important;
        text-align: right !important;
        min-height: 28px !important;
        word-break: break-word !important;
      }

      .table-wrap td:last-child {
        border-bottom: none !important;
      }

      .table-wrap td::before {
        content: attr(data-label);
        font-weight: 600;
        color: #64748b;
        font-size: 12px;
        text-align: left;
        margin-right: 12px;
        flex-shrink: 0;
      }

      /* Card Top Header: Queue Number + Status */
      .table-wrap tr td.td-queue {
        display: flex !important;
        justify-content: space-between !important;
        align-items: center !important;
        background: #f8fafc !important;
        margin: -12px -14px 10px -14px !important;
        padding: 10px 14px !important;
        border-radius: 13px 13px 0 0 !important;
        border-bottom: 1px solid #e2e8f0 !important;
      }

      .table-wrap tr td.td-queue::before {
        display: none !important;
      }

      .table-wrap tr td.td-queue .queue-badge {
        font-size: 13.5px !important;
        font-weight: 700 !important;
        color: var(--primary) !important;
      }

      .mobile-card-status {
        display: inline-block !important;
      }

      /* Hide separate status row on mobile since it's already in the card header */
      .table-wrap tr td.td-status-desktop {
        display: none !important;
      }

      .table-wrap tr td.td-request-no strong {
        color: var(--primary);
        font-size: 13.5px;
      }

      /* Action buttons in mobile card */
      .table-wrap tr td.td-action,
      .table-wrap tr td[data-label="การจัดการ"],
      .table-wrap tr td[data-label="จัดการ"] {
        border-bottom: none !important;
        padding-top: 10px !important;
        margin-top: 4px !important;
        display: flex !important;
        justify-content: stretch !important;
      }

      .table-wrap tr td.td-action::before,
      .table-wrap tr td[data-label="การจัดการ"]::before,
      .table-wrap tr td[data-label="จัดการ"]::before {
        display: none !important;
      }

      .table-wrap tr td.td-action .btn,
      .table-wrap tr td[data-label="การจัดการ"] .btn {
        width: 100% !important;
        justify-content: center !important;
        padding: 9px 12px !important;
        font-size: 13.5px !important;
        font-weight: 600 !important;
        border-radius: 8px !important;
      }

      .table-wrap tr td.td-action .button-row,
      .table-wrap tr td[data-label="การจัดการ"] .button-row {
        display: grid !important;
        grid-template-columns: 1fr 1fr !important;
        gap: 8px !important;
        width: 100% !important;
      }

      .table-wrap tr td.td-asset-img {
        justify-content: flex-end !important;
      }

      .table-wrap tr td.td-asset-img .thumbnail {
        width: 44px !important;
        height: 44px !important;
        border-radius: 8px !important;
      }

      /* 9. Settings Form */
      #settingsForm .form-grid {
        display: grid !important;
        grid-template-columns: 1fr !important;
        gap: 10px !important;
      }

      #settingsForm .form-group label {
        font-size: 12.5px;
        font-weight: 500;
        margin-bottom: 4px;
      }

      #settingsForm .form-group input,
      #settingsForm .form-group textarea {
        font-size: 13.5px;
        padding: 9px 11px;
        border-radius: 8px;
      }

      #settingsForm .button-row {
        display: flex !important;
        flex-direction: column !important;
        gap: 8px !important;
        margin-top: 16px !important;
        width: 100% !important;
      }

      #settingsForm .button-row .btn {
        width: 100% !important;
        padding: 10px 14px !important;
        font-size: 13.5px !important;
        justify-content: center !important;
        border-radius: 8px !important;
      }

      /* 10. Modals & Dialogs on Mobile */
      .modal-backdrop {
        padding: 8px;
      }

      .modal {
        max-height: 94vh;
        border-radius: 14px;
      }

      .modal-header {
        padding: 14px 14px 12px;
      }

      .modal-header h2,
      .modal-header h3 {
        font-size: 16.5px;
      }

      .modal-body {
        padding: 14px 12px;
      }

      .modal-body .form-grid {
        grid-template-columns: 1fr !important;
        gap: 10px !important;
      }

      .modal-body .button-row {
        display: flex;
        flex-direction: column;
        gap: 8px;
        width: 100%;
        margin-top: 14px;
      }

      .modal-body .button-row .btn {
        width: 100%;
        padding: 10px;
        font-size: 14px;
        border-radius: 8px;
        justify-content: center;
      }

      .image-preview.active {
        align-items: flex-start;
        flex-direction: column;
      }

      .public-header-inner {
        align-items: center !important;
        text-align: center !important;
        flex-direction: column !important;
        gap: 14px !important;
        width: 100% !important;
      }

      .public-header-inner > div:first-child {
        text-align: center !important;
        width: 100% !important;
      }

      .public-header-inner .public-header-subtitle {
        text-align: center !important;
      }

      .public-header-inner .button-row {
        display: flex !important;
        flex-direction: column !important;
        align-items: center !important;
        justify-content: center !important;
        width: 100% !important;
        gap: 10px !important;
        margin: 0 auto !important;
      }

      .portal-grid {
        grid-template-columns: 1fr;
        gap: 14px;
      }

      .btn-twotone-action {
        width: 100% !important;
        max-width: 290px !important;
        justify-content: center !important;
        margin: 0 auto !important;
      }

      /* =========================================
         PUBLIC REQUEST MOBILE CARDS (CENTERED & BEAUTIFUL)
         ========================================= */
      .public-table-card .table-wrap {
        background: transparent !important;
        border: none !important;
        overflow-x: visible !important;
        box-shadow: none !important;
        border-radius: 0 !important;
        padding: 0 !important;
        margin-bottom: 12px !important;
      }

      .public-table-card .table-wrap table {
        display: block !important;
        width: 100% !important;
        border: none !important;
        border-collapse: separate !important;
      }

      .public-table-card .table-wrap thead {
        display: none !important;
      }

      .public-table-card .table-wrap tbody {
        display: flex !important;
        flex-direction: column !important;
        gap: 14px !important;
        width: 100% !important;
      }

      .public-table-card .table-wrap tr.request-row-hover,
      .public-table-card .table-wrap tr {
        display: flex !important;
        flex-direction: column !important;
        align-items: center !important;
        justify-content: center !important;
        text-align: center !important;
        background: #ffffff !important;
        border: 1px solid #e2e8f0 !important;
        border-radius: 16px !important;
        padding: 0 0 16px 0 !important;
        box-shadow: 0 3px 12px rgba(15, 23, 42, 0.04) !important;
        overflow: hidden !important;
        width: 100% !important;
        box-sizing: border-box !important;
        position: relative !important;
        transition: transform 0.15s ease, box-shadow 0.15s ease !important;
      }

      .public-table-card .table-wrap tr:hover {
        transform: translateY(-2px) !important;
        box-shadow: 0 6px 18px rgba(15, 23, 42, 0.08) !important;
      }

      .public-table-card .table-wrap td {
        display: flex !important;
        justify-content: center !important;
        align-items: center !important;
        text-align: center !important;
        width: 100% !important;
        padding: 5px 16px !important;
        border: none !important;
        border-bottom: none !important;
        white-space: normal !important;
        min-height: auto !important;
      }

      .public-table-card .table-wrap td::before {
        display: none !important;
      }

      /* Card Top Header Banner: Queue, RequestNo, Date */
      .public-table-card .table-wrap td:first-child {
        background: linear-gradient(180deg, #f8fafc 0%, #f1f5f9 100%) !important;
        padding: 14px 16px 12px 16px !important;
        border-bottom: 1px solid #e2e8f0 !important;
        margin-bottom: 8px !important;
      }

      .public-table-card .table-wrap .queue-col-cell {
        display: flex !important;
        flex-direction: column !important;
        align-items: center !important;
        justify-content: center !important;
        text-align: center !important;
        gap: 3px !important;
        width: 100% !important;
      }

      .public-table-card .table-wrap .queue-badge-pill {
        align-self: center !important;
        margin: 0 auto !important;
        font-size: 11.5px !important;
        padding: 2.5px 10px !important;
      }

      .public-table-card .table-wrap .request-no-code {
        font-size: 15px !important;
        font-weight: 700 !important;
        color: var(--primary) !important;
        text-align: center !important;
        letter-spacing: 0.01em !important;
      }

      .public-table-card .table-wrap .request-date-muted {
        font-size: 12px !important;
        color: #64748b !important;
        text-align: center !important;
      }

      /* Reporter */
      .public-table-card .table-wrap .reporter-cell {
        display: inline-flex !important;
        justify-content: center !important;
        align-items: center !important;
        text-align: center !important;
        gap: 8px !important;
        margin: 2px auto !important;
      }

      .public-table-card .table-wrap .reporter-avatar-icon {
        width: 26px !important;
        height: 26px !important;
        font-size: 12px !important;
      }

      .public-table-card .table-wrap .reporter-name {
        font-size: 14.5px !important;
        font-weight: 600 !important;
        color: #1e293b !important;
      }

      /* Chips (Organization & Equipment) */
      .public-table-card .table-wrap .org-badge-chip,
      .public-table-card .table-wrap .equipment-badge-chip {
        display: inline-flex !important;
        justify-content: center !important;
        align-items: center !important;
        text-align: center !important;
        margin: 2px auto !important;
        padding: 4px 14px !important;
        font-size: 12.5px !important;
      }

      /* Status Badge */
      .public-table-card .table-wrap .status-badge {
        display: inline-flex !important;
        justify-content: center !important;
        align-items: center !important;
        text-align: center !important;
        margin: 3px auto !important;
        padding: 5px 16px !important;
        font-size: 13px !important;
        font-weight: 600 !important;
      }

      /* Action View Button */
      .public-table-card .table-wrap td:last-child {
        padding-top: 10px !important;
        margin-top: 2px !important;
        border-bottom: none !important;
      }

      .public-table-card .table-wrap .btn-view-req {
        width: 100% !important;
        max-width: 250px !important;
        justify-content: center !important;
        padding: 8px 18px !important;
        font-size: 13px !important;
        font-weight: 600 !important;
        border-radius: 10px !important;
        margin: 0 auto !important;
      }
    }

    /* Extra Small Smartphones (iPhone SE, 360px - 480px) */
    @media (max-width: 480px) {
      .topbar h2 {
        font-size: 15.5px !important;
      }

      .stat-value {
        font-size: 18px !important;
      }

      .stat-label {
        font-size: 10px !important;
      }

      .stat-icon-badge {
        width: 22px !important;
        height: 22px !important;
      }

      .stat-icon-badge svg {
        width: 12px !important;
        height: 12px !important;
      }

      .card-title .button-row #pdfButton,
      .card-title .button-row #xlsxButton,
      .card-title .button-row #printButton,
      .card-title .button-row #exportRequestsPdfBtn,
      .card-title .button-row #exportRequestsXlsxBtn,
      .card-title .button-row #exportFilteredRequestsCsvBtn,
      .card-title .button-row #printRequestsBtn {
        font-size: 11px !important;
        padding: 6px 2px !important;
      }
    }

    /* =========================================
       PRINT OPTIMIZATIONS
       ========================================= */
    @media print {
      body {
        color: #000;
        background: #fff;
      }

      .no-print,
      .sidebar,
      .topbar,
      .filters,
      .button-row,
      .modal-backdrop,
      .toast-container,
      .loading-overlay {
        display: none !important;
      }

      .app-layout {
        display: block;
      }

      .main-content,
      .public-main {
        padding: 0;
      }

      .card {
        padding: 0;
        border: 0;
        box-shadow: none;
      }

      table {
        font-size: 10.5px;
      }

      th, td {
        padding: 6px 8px;
        white-space: normal;
      }

      .thumbnail,
      .avatar {
        width: 38px;
        height: 38px;
      }

      @page {
        size: A4 portrait;
        margin: 12mm;
      }
    }

    /* Portal Card Centering Enhancement */
    .portal-card {
      display: flex;
      flex-direction: column;
      align-items: center;
      text-align: center;
    }

    .portal-icon {
      width: 78px;
      height: 78px;
      display: flex;
      align-items: center;
      justify-content: center;
      border: 1px solid #c7d7fe;
      border-radius: 22px;
      background: #f3f7ff;
    }

    .portal-icon svg {
      display: block;
    }

    .portal-title,
    .portal-description {
      display: block;
      text-align: center;
    }
    /* =========================================
       PREMIUM ADMIN LOGIN MODAL & SECURITY
       ========================================= */
    .login-modal-box {
      width: min(440px, 100%);
      padding: 4px;
    }

    .login-branding {
      text-align: center;
      margin-bottom: 20px;
    }

    .login-badge {
      display: inline-flex;
      align-items: center;
      justify-content: center;
      width: 60px;
      height: 60px;
      border-radius: 18px;
      background: linear-gradient(135deg, var(--primary) 0%, var(--primary-light) 60%, var(--secondary) 100%);
      color: #ffffff;
      margin-bottom: 12px;
      box-shadow: 0 8px 20px -4px rgba(15, 44, 89, 0.35);
      border: 2px solid rgba(255, 255, 255, 0.8);
    }

    .login-branding h4 {
      margin: 0 0 4px;
      color: var(--primary);
      font-size: 18px;
      font-weight: 700;
      letter-spacing: -0.01em;
    }

    .login-branding-sub {
      color: var(--muted);
      font-size: 13px;
    }

    .password-input-group {
      position: relative;
      display: flex;
      align-items: center;
    }

    .password-input-group input {
      width: 100%;
      padding-right: 44px;
      font-size: 15px;
      letter-spacing: 0.05em;
    }

    .password-toggle-btn {
      position: absolute;
      right: 8px;
      top: 50%;
      transform: translateY(-50%);
      display: grid;
      place-items: center;
      width: 32px;
      height: 32px;
      border: 0;
      background: transparent;
      color: #64748b;
      border-radius: 8px;
      cursor: pointer;
      transition: var(--transition);
    }

    .password-toggle-btn:hover {
      color: var(--primary);
      background: #f1f5f9;
    }

    .security-notice-card {
      display: flex;
      align-items: flex-start;
      gap: 10px;
      margin-top: 20px;
      padding: 12px 14px;
      background: #f8fafc;
      border: 1px solid #e2e8f0;
      border-left: 4px solid var(--primary);
      border-radius: var(--radius-sm);
      color: #475569;
      font-size: 12px;
      line-height: 1.5;
    }

    .security-notice-card svg {
      flex-shrink: 0;
      margin-top: 1px;
    }

    .lockout-alert {
      display: flex;
      align-items: center;
      gap: 10px;
      padding: 12px 16px;
      margin-bottom: 16px;
      border-radius: 10px;
      background: #fef2f2;
      border: 1px solid #fecaca;
      color: #991b1b;
      font-size: 13px;
      font-weight: 500;
      animation: toast-in 0.25s ease-out;
    }

    .btn-login-submit {
      width: 100%;
      padding: 11px 18px;
      font-size: 15px;
      font-weight: 600;
      border-radius: 10px;
    }

    /* =========================================
       DASHBOARD METRIC CARDS & BADGES (ENHANCED)
       ========================================= */
    .stat-header {
      display: flex;
      align-items: center;
      justify-content: space-between;
      margin-bottom: 4px;
    }

    .stat-icon-badge {
      display: inline-flex;
      align-items: center;
      justify-content: center;
      width: 34px;
      height: 34px;
      border-radius: 10px;
      flex-shrink: 0;
    }

    .badge-blue {
      background: #eff6ff;
      color: #1d4ed8;
      border: 1px solid #bfdbfe;
    }

    .badge-green {
      background: #ecfdf5;
      color: #059669;
      border: 1px solid #a7f3d0;
    }

    .badge-amber {
      background: #fffbeb;
      color: #d97706;
      border: 1px solid #fde68a;
    }

    .badge-purple {
      background: #f5f3ff;
      color: #7c3aed;
      border: 1px solid #ddd6fe;
    }

    .stat-card-total {
      border-top: 3px solid #2563eb;
    }

    .stat-card-completed {
      border-top: 3px solid #059669;
    }

    .stat-card-progress {
      border-top: 3px solid #d97706;
    }

    .stat-card-waiting {
      border-top: 3px solid #7c3aed;
    }

    .stat-subtext {
      color: var(--muted);
      font-size: 12px;
      margin-top: 6px;
    }

    .text-purple {
      color: #7c3aed !important;
    }

    /* Queue Waiting Banner in Success Modal */
    .queue-wait-banner {
      display: flex;
      align-items: center;
      justify-content: center;
      gap: 10px;
      margin: 16px auto 20px;
      padding: 12px 18px;
      background: #fffbeb;
      border: 1px solid #fde68a;
      border-radius: var(--radius-sm);
      color: #92400e;
      font-size: 14.5px;
      text-align: center;
    }

    .queue-wait-icon {
      font-size: 20px;
      line-height: 1;
    }

    .queue-wait-text strong {
      font-size: 16px;
      color: #b45309;
    }

    .request-details-box {
      text-align: left;
      background: #f8fafc;
      border: 1px solid #e2e8f0;
      border-radius: var(--radius-sm);
      padding: 16px 20px;
      margin-bottom: 20px;
    }

    .request-details-box p {
      margin: 6px 0;
      font-size: 13.5px;
      color: #334155;
    }

    .status-pill-waiting {
      display: inline-block;
      padding: 2px 10px;
      border-radius: 9999px;
      font-size: 12.5px;
      font-weight: 600;
      background: #fef3c7;
      color: #92400e;
      border: 1px solid #fde68a;
    }


    /* =========================================
       PUBLIC REPAIR SEARCH & TABLE UX/UI
       ========================================= */
    .search-card-premium {
      border-top: 3px solid var(--primary);
      box-shadow: var(--shadow);
    }

    .card-header-flex {
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 14px;
      margin-bottom: 20px;
      flex-wrap: wrap;
    }

    .card-title-group {
      display: flex;
      align-items: center;
      gap: 10px;
    }

    .card-title-group h3 {
      margin: 0;
      font-size: 18px;
      font-weight: 700;
      color: var(--primary);
      letter-spacing: -0.01em;
    }

    .card-title-icon {
      font-size: 20px;
      line-height: 1;
    }

    .btn-filter-reset {
      display: inline-flex;
      align-items: center;
      gap: 6px;
      padding: 6px 14px;
      font-family: inherit;
      font-size: 13px;
      font-weight: 500;
      border-radius: var(--radius-pill);
      border: 1px solid #cbd5e1;
      background: #ffffff;
      color: var(--muted);
      cursor: pointer;
      transition: var(--transition);
    }

    .btn-filter-reset:hover {
      color: var(--primary);
      background: #f1f5f9;
      border-color: var(--primary);
      transform: translateY(-1px);
    }

    .search-grid-3col,
    .search-grid-4col {
      display: grid;
      grid-template-columns: repeat(4, minmax(0, 1fr));
      gap: 16px;
    }

    @media (max-width: 1080px) {
      .search-grid-3col,
      .search-grid-4col {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 14px;
      }
    }

    @media (max-width: 640px) {
      .search-grid-3col,
      .search-grid-4col {
        grid-template-columns: 1fr;
        gap: 12px;
      }
      .card-header-flex {
        flex-direction: row;
        justify-content: space-between;
        align-items: center;
        gap: 8px;
        margin-bottom: 14px;
      }
      .card-title-group {
        gap: 6px;
      }
      .card-title-group h3 {
        font-size: 15.5px;
      }
      .btn-refresh-premium,
      .btn-filter-reset {
        padding: 5px 10px;
        font-size: 12px;
      }
    }

    .search-grid-3col .form-group {
      margin-bottom: 0;
    }

    .search-grid-3col label {
      display: flex;
      align-items: center;
      gap: 6px;
      margin-bottom: 8px;
      font-size: 13.5px;
      font-weight: 600;
      color: var(--text-secondary);
    }

    .label-icon {
      font-size: 15px;
      line-height: 1;
    }

    .count-badge {
      display: inline-flex;
      align-items: center;
      padding: 3px 12px;
      font-size: 12.5px;
      font-weight: 600;
      border-radius: var(--radius-pill);
      background: #eff6ff;
      color: #1d4ed8;
      border: 1px solid #bfdbfe;
    }

    /* Table Column Styles */
    table.modern-table {
      width: 100%;
      table-layout: auto;
      border-collapse: collapse;
    }

    table.modern-table th,
    table.modern-table td {
      padding: 13px 14px;
      vertical-align: middle;
    }

    table.modern-table tbody tr:last-child td {
      border-bottom: none;
    }

    .queue-col-cell {
      display: flex;
      flex-direction: column;
      gap: 2px;
    }

    .queue-badge-pill {
      align-self: flex-start;
      display: inline-block;
      padding: 2px 8px;
      font-size: 11px;
      font-weight: 700;
      border-radius: 6px;
      background: #e0e7ff;
      color: #3730a3;
      border: 1px solid #c7d2fe;
    }

    .request-no-code {
      font-family: "Prompt", "Mitr", monospace;
      font-size: 13.5px;
      font-weight: 600;
      color: var(--primary);
    }

    .request-date-muted {
      font-size: 11.5px;
      color: var(--muted);
    }

    .reporter-cell {
      display: flex;
      align-items: center;
      gap: 8px;
    }

    .reporter-avatar-icon {
      width: 28px;
      height: 28px;
      border-radius: 50%;
      background: #f1f5f9;
      display: flex;
      align-items: center;
      justify-content: center;
      font-size: 13px;
      flex-shrink: 0;
      border: 1px solid #e2e8f0;
    }

    .reporter-name {
      font-size: 14px;
      font-weight: 600;
      color: #1e293b;
    }

    .org-badge-chip {
      display: inline-block;
      padding: 4px 10px;
      font-size: 12.5px;
      font-weight: 500;
      border-radius: 6px;
      background: #f8fafc;
      border: 1px solid #e2e8f0;
      color: #334155;
    }

    .equipment-badge-chip {
      display: inline-block;
      padding: 4px 10px;
      font-size: 12.5px;
      font-weight: 500;
      border-radius: 6px;
      background: #f0fdf4;
      border: 1px solid #bbf7d0;
      color: #166534;
    }

    .defect-preview {
      font-size: 13.5px;
      color: #475569;
      display: -webkit-box;
      -webkit-line-clamp: 2;
      -webkit-box-orient: vertical;
      overflow: hidden;
      line-height: 1.45;
      max-width: 240px;
    }

    .status-badge.status-waiting {
      background: #fef3c7;
      color: #92400e;
      border: 1px solid #fde68a;
    }

    .status-badge.status-progress {
      background: #eff6ff;
      color: #1d4ed8;
      border: 1px solid #bfdbfe;
    }

    .btn-view-req {
      display: inline-flex;
      align-items: center;
      gap: 5px;
      padding: 6px 14px;
      font-family: inherit;
      font-size: 12.5px;
      font-weight: 600;
      border-radius: 8px;
      background: #eff6ff;
      color: #2563eb;
      border: 1px solid #bfdbfe;
      cursor: pointer;
      transition: var(--transition);
      white-space: nowrap;
    }

    .btn-view-req:hover {
      background: #2563eb;
      color: #ffffff;
      border-color: #2563eb;
      transform: translateY(-1px);
      box-shadow: 0 4px 12px rgba(37, 99, 235, 0.25);
    }

    .request-row-hover {
      cursor: pointer;
      transition: background-color 0.15s ease;
    }

    .request-row-hover:hover {
      background-color: #f8fafc !important;
    }

    .empty-state-modern {
      text-align: center;
      padding: 44px 20px;
    }

    .empty-state-icon {
      font-size: 42px;
      margin-bottom: 12px;
      opacity: 0.8;
    }

    .empty-state-title {
      font-size: 16px;
      font-weight: 600;
      color: #334155;
      margin-bottom: 6px;
    }

    .empty-state-sub {
      font-size: 13.5px;
      color: #94a3b8;
    }

    /* =========================================
       INFOGRAPHIC BADGES & ICONS ENHANCEMENTS
       ========================================= */
    .card-icon-badge {
      display: inline-flex;
      align-items: center;
      justify-content: center;
      width: 32px;
      height: 32px;
      border-radius: 8px;
      flex-shrink: 0;
    }

    .label-icon-badge {
      display: inline-flex;
      align-items: center;
      justify-content: center;
      width: 22px;
      height: 22px;
      border-radius: 6px;
      flex-shrink: 0;
      margin-right: 6px;
      vertical-align: -3px;
    }

    .sidebar-brand-badge {
      display: inline-flex;
      align-items: center;
      justify-content: center;
      width: 36px;
      height: 36px;
      border-radius: 10px;
      background: linear-gradient(135deg, rgba(59, 130, 246, 0.25) 0%, rgba(37, 99, 235, 0.4) 100%);
      border: 1px solid rgba(147, 197, 253, 0.35);
      color: #93c5fd;
      flex-shrink: 0;
      box-shadow: 0 4px 12px rgba(37, 99, 235, 0.2);
    }

    .sidebar-brand-text {
      font-weight: 600;
      letter-spacing: 0.2px;
    }

    .menu-icon {
      display: inline-flex;
      align-items: center;
      justify-content: center;
      width: 32px;
      height: 32px;
      border-radius: 8px;
      flex-shrink: 0;
      background: rgba(255, 255, 255, 0.06);
      border: 1px solid rgba(255, 255, 255, 0.08);
      color: #94a3b8;
      transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
    }

    .menu-button:hover .menu-icon {
      transform: scale(1.06);
      background: rgba(255, 255, 255, 0.12);
      color: #ffffff;
    }

    .menu-icon-blue {
      color: #60a5fa;
    }
    .menu-button.active .menu-icon-blue {
      background: rgba(59, 130, 246, 0.25);
      border-color: rgba(96, 165, 250, 0.5);
      color: #93c5fd;
      box-shadow: 0 2px 8px rgba(37, 99, 235, 0.25);
    }

    .menu-icon-amber {
      color: #fbbf24;
    }
    .menu-button.active .menu-icon-amber {
      background: rgba(245, 158, 11, 0.25);
      border-color: rgba(251, 191, 36, 0.5);
      color: #fde68a;
      box-shadow: 0 2px 8px rgba(217, 119, 6, 0.25);
    }

    .menu-icon-cyan {
      color: #38bdf8;
    }
    .menu-button.active .menu-icon-cyan {
      background: rgba(14, 165, 233, 0.25);
      border-color: rgba(56, 189, 248, 0.5);
      color: #7dd3fc;
      box-shadow: 0 2px 8px rgba(14, 165, 233, 0.25);
    }

    .menu-icon-indigo {
      color: #818cf8;
    }
    .menu-button.active .menu-icon-indigo {
      background: rgba(99, 102, 241, 0.25);
      border-color: rgba(129, 140, 248, 0.5);
      color: #c7d2fe;
      box-shadow: 0 2px 8px rgba(99, 102, 241, 0.25);
    }

    .menu-icon-emerald {
      color: #34d399;
    }
    .menu-button.active .menu-icon-emerald {
      background: rgba(16, 185, 129, 0.25);
      border-color: rgba(52, 211, 153, 0.5);
      color: #a7f3d0;
      box-shadow: 0 2px 8px rgba(16, 185, 129, 0.25);
    }

    .menu-icon-purple {
      color: #c084fc;
    }
    .menu-button.active .menu-icon-purple {
      background: rgba(168, 85, 247, 0.25);
      border-color: rgba(192, 132, 252, 0.5);
      color: #e9d5ff;
      box-shadow: 0 2px 8px rgba(168, 85, 247, 0.25);
    }

    .menu-icon-slate {
      color: #94a3b8;
    }
    .menu-button.active .menu-icon-slate {
      background: rgba(148, 163, 184, 0.25);
      border-color: rgba(203, 213, 225, 0.5);
      color: #e2e8f0;
      box-shadow: 0 2px 8px rgba(100, 116, 139, 0.25);
    }

    .btn-inline-icon {
      display: inline-flex;
      align-items: center;
      gap: 6px;
    }
    .btn-inline-icon svg {
      flex-shrink: 0;
    }

    /* =========================================
       TABLE PAGINATION BAR
       ========================================= */
    .table-pagination-bar {
      display: flex;
      align-items: center;
      justify-content: space-between;
      flex-wrap: wrap;
      gap: 12px;
      padding: 14px 18px;
      background: #ffffff;
      border: 1px solid #e2e8f0;
      border-top: none;
      border-radius: 0 0 var(--radius-sm) var(--radius-sm);
    }

    .pagination-info {
      color: #64748b;
      font-size: 13.5px;
      font-weight: 500;
      display: flex;
      align-items: center;
      gap: 8px;
    }

    .pagination-info strong {
      color: #1e293b;
      font-weight: 600;
    }

    .pagination-badge-counter {
      display: inline-block;
      padding: 2px 8px;
      background: #f1f5f9;
      color: #475569;
      border-radius: 6px;
      font-size: 12px;
      font-weight: 600;
    }

    .pagination-controls {
      display: inline-flex;
      align-items: center;
      gap: 6px;
      user-select: none;
    }

    .page-btn {
      display: inline-flex;
      align-items: center;
      justify-content: center;
      min-width: 36px;
      height: 36px;
      padding: 0 10px;
      border: 1px solid #cbd5e1;
      border-radius: 8px;
      background: #ffffff;
      color: #334155;
      font-size: 13px;
      font-weight: 500;
      cursor: pointer;
      transition: all 0.15s ease-in-out;
      outline: none;
      font-family: inherit;
    }

    .page-btn:hover:not(:disabled):not(.active) {
      background: #f1f5f9;
      border-color: #94a3b8;
      color: #0f172a;
    }

    .page-btn.active {
      background: #2563eb;
      border-color: #2563eb;
      color: #ffffff;
      font-weight: 600;
      box-shadow: 0 2px 4px rgba(37, 99, 235, 0.25);
    }

    .page-btn:disabled {
      opacity: 0.45;
      cursor: not-allowed;
      background: #f8fafc;
      border-color: #e2e8f0;
      color: #94a3b8;
    }

    .page-btn-nav {
      font-size: 13px;
      padding: 0 12px;
      gap: 4px;
      font-weight: 600;
    }

    .page-ellipsis {
      display: inline-flex;
      align-items: center;
      justify-content: center;
      min-width: 24px;
      height: 36px;
      color: #94a3b8;
      font-size: 14px;
    }

    @media (max-width: 640px) {
      .table-pagination-bar {
        flex-direction: column;
        align-items: center;
        text-align: center;
        gap: 10px;
      }
      .pagination-info {
        flex-direction: column;
        gap: 4px;
      }
      .pagination-controls {
        flex-wrap: wrap;
        justify-content: center;
      }
    }

    /* =========================================
       SORTABLE TABLE HEADERS & URGENCY BADGES
       ========================================= */
    th.sortable-th {
      cursor: pointer;
      user-select: none;
      transition: background 0.15s ease, color 0.15s ease;
      white-space: nowrap;
    }

    th.sortable-th:hover {
      background: #e2e8f0;
      color: #1e293b;
    }

    .sort-indicator {
      display: inline-block;
      margin-left: 5px;
      font-size: 11px;
      opacity: 0.5;
      vertical-align: middle;
      transition: opacity 0.15s ease;
    }

    th.sortable-th.active-sort {
      color: #2563eb;
      background: #eff6ff;
    }

    th.sortable-th.active-sort .sort-indicator {
      opacity: 1;
      font-weight: bold;
    }

    /* Urgency Badges */
    .urgency-badge {
      display: inline-flex;
      align-items: center;
      gap: 5px;
      padding: 3px 9px;
      border-radius: 9999px;
      font-size: 12px;
      font-weight: 600;
      line-height: 1.2;
      border: 1px solid transparent;
      white-space: nowrap;
    }

    .urgency-urgent-high {
      background: #fef2f2;
      color: #b91c1c;
      border-color: #fecaca;
    }

    .urgency-urgent-med {
      background: #fffbeb;
      color: #b45309;
      border-color: #fde68a;
    }

    .urgency-normal {
      background: #f0fdf4;
      color: #15803d;
      border-color: #bbf7d0;
    }

    .urgency-dot {
      width: 7px;
      height: 7px;
      border-radius: 50%;
      display: inline-block;
    }

    .dot-red {
      background-color: #ef4444;
      box-shadow: 0 0 0 2px rgba(239, 68, 68, 0.2);
    }

    .dot-yellow {
      background-color: #f59e0b;
      box-shadow: 0 0 0 2px rgba(245, 158, 11, 0.2);
    }

    .dot-green {
      background-color: #22c55e;
      box-shadow: 0 0 0 2px rgba(34, 197, 94, 0.2);
    }

    /* Staff Management Styles */
    .staff-nickname-badge {
      display: inline-block;
      padding: 2px 10px;
      border-radius: 9999px;
      font-size: 12px;
      font-weight: 600;
      background: #eff6ff;
      color: #1e40af;
      border: 1px solid #bfdbfe;
    }

</style>
<style>
    :root {
      --primary: #0f2c59;
      --primary-light: #1e40af;
      --primary-hover: #1e3a8a;
      --primary-subtle: #eff6ff;
      --secondary: #0284c7;
      --accent-gold: #c5a059;
      --accent-gold-light: #fef3c7;
      
      --sidebar-bg: #0b1528;
      --sidebar-surface: #172339;
      --sidebar-border: rgba(255, 255, 255, 0.07);
      --sidebar-text: #94a3b8;
      --sidebar-text-active: #ffffff;
      --sidebar-active-bg: rgba(30, 64, 175, 0.4);

      --success: #059669;
      --success-bg: #ecfdf5;
      --success-border: #a7f3d0;
      
      --warning: #d97706;
      --warning-bg: #fffbeb;
      --warning-border: #fde68a;
      
      --danger: #dc2626;
      --danger-bg: #fef2f2;
      --danger-border: #fecaca;
      
      --surface: #ffffff;
      --background: #f8fafc;
      --text: #0f172a;
      --text-secondary: #334155;
      --muted: #64748b;
      --border: #e2e8f0;
      --border-focus: #3b82f6;

      --shadow-sm: 0 1px 2px 0 rgba(0, 0, 0, 0.05);
      --shadow: 0 4px 16px -2px rgba(15, 23, 42, 0.06), 0 2px 6px -1px rgba(15, 23, 42, 0.03);
      --shadow-lg: 0 20px 30px -8px rgba(15, 23, 42, 0.12), 0 8px 12px -4px rgba(15, 23, 42, 0.06);

      --radius-sm: 8px;
      --radius: 14px;
      --radius-lg: 20px;
      --radius-pill: 9999px;
      --transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
    }

    * {
      box-sizing: border-box;
      -webkit-tap-highlight-color: transparent;
    }

    body {
      margin: 0;
      color: var(--text);
      background: var(--background);
      font-family: "Noto Sans Thai", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
      font-size: 15px;
      line-height: 1.6;
      -webkit-font-smoothing: antialiased;
    }

    button,
    input,
    select,
    textarea {
      font: inherit;
    }

    button {
      cursor: pointer;
      border: 0;
      outline: none;
    }

    .hidden {
      display: none !important;
    }

    h1, h2, h3, h4 {
      margin-top: 0;
      font-family: "Prompt", "Mitr", sans-serif;
      font-weight: 600;
      letter-spacing: -0.01em;
    }

    /* =========================================
       LANDING PAGE
       ========================================= */
    .landing {
      min-height: 100vh;
      display: flex;
      flex-direction: column;
      justify-content: center;
      align-items: center;
      padding: 36px 20px;
      background:
        radial-gradient(circle at 15% 15%, rgba(15, 44, 89, 0.08) 0%, transparent 45%),
        radial-gradient(circle at 85% 85%, rgba(2, 132, 199, 0.08) 0%, transparent 45%),
        linear-gradient(180deg, #f8fafc 0%, #f1f5f9 100%);
    }

    .landing-header {
      max-width: 880px;
      margin: 0 auto 38px;
      text-align: center;
    }

    .logo-mark {
      display: grid;
      width: 96px;
      height: 96px;
      margin: 0 auto 24px;
      place-items: center;
      color: white;
      border-radius: 28px;
      background: linear-gradient(135deg, var(--primary) 0%, var(--primary-light) 60%, var(--secondary) 100%);
      box-shadow: 0 16px 32px -4px rgba(15, 44, 89, 0.28);
      border: 2px solid rgba(255, 255, 255, 0.7);
      animation: float 4s ease-in-out infinite;
    }

    @keyframes float {
      0%, 100% {
        transform: translateY(0);
      }
      50% {
        transform: translateY(-8px);
      }
    }

    .landing h1 {
      margin-bottom: 12px;
      color: var(--primary);
      font-family: "Prompt", sans-serif;
      font-weight: 700;
      font-size: clamp(24px, 3.8vw, 38px);
      line-height: 1.35;
      letter-spacing: -0.02em;
    }

    .subtitle {
      max-width: 640px;
      margin: 0 auto;
      color: var(--muted);
      font-size: 16px;
      line-height: 1.65;
    }

    .portal-grid {
      display: grid;
      width: 100%;
      max-width: 880px;
      grid-template-columns: repeat(2, minmax(0, 1fr));
      gap: 24px;
      margin: 0 auto;
    }

    .portal-card {
      position: relative;
      width: 100%;
      min-height: 240px;
      padding: 32px 28px;
      color: var(--text);
      text-align: left;
      border: 1px solid rgba(226, 232, 240, 0.9);
      border-radius: var(--radius-lg);
      background: rgba(255, 255, 255, 0.95);
      backdrop-filter: blur(8px);
      box-shadow: var(--shadow);
      transition: var(--transition);
      overflow: hidden;
    }

    .portal-card::before {
      content: "";
      position: absolute;
      top: 0;
      left: 0;
      width: 100%;
      height: 4px;
      background: linear-gradient(90deg, var(--primary), var(--secondary));
      opacity: 0;
      transition: var(--transition);
    }

    .portal-card:hover {
      border-color: #cbd5e1;
      transform: translateY(-4px);
      box-shadow: var(--shadow-lg);
    }

    .portal-card:hover::before {
      opacity: 1;
    }

    .portal-icon {
      display: grid;
      width: 72px;
      height: 72px;
      margin-bottom: 22px;
      place-items: center;
      border-radius: 20px;
      background: var(--primary-subtle);
      border: 1px solid rgba(37, 99, 235, 0.15);
      transition: var(--transition);
    }

    .portal-card:hover .portal-icon {
      transform: scale(1.06);
    }

    .portal-card.admin .portal-icon {
      background: #eff6ff;
      border-color: rgba(30, 64, 175, 0.15);
    }

    .portal-title {
      display: block;
      margin-bottom: 8px;
      color: var(--primary);
      font-family: "Prompt", "Mitr", sans-serif;
      font-size: 20px;
      font-weight: 600;
      line-height: 1.4;
    }

    .portal-description {
      display: block;
      color: var(--muted);
      font-size: 14.5px;
      line-height: 1.6;
    }

    .build-version {
      margin-top: 40px;
      color: #94a3b8;
      text-align: center;
      font-size: 12.5px;
      letter-spacing: 0.05em;
    }

    /* =========================================
       APP LAYOUT & SIDEBAR
       ========================================= */
    .app-layout {
      display: grid;
      min-height: 100vh;
      grid-template-columns: 270px minmax(0, 1fr);
      background: #f8fafc;
    }

    .sidebar {
      position: relative;
      display: flex;
      flex-direction: column;
      padding: 24px 18px;
      color: #f8fafc;
      background: var(--sidebar-bg);
      border-right: 1px solid var(--sidebar-border);
    }

    .sidebar-brand {
      display: flex;
      align-items: center;
      gap: 12px;
      padding: 8px 10px 24px;
      color: #ffffff;
      font-family: "Prompt", "Mitr", sans-serif;
      font-size: 17px;
      font-weight: 600;
      line-height: 1.4;
      border-bottom: 1px solid var(--sidebar-border);
      margin-bottom: 20px;
    }

    .sidebar-menu {
      display: flex;
      flex-direction: column;
      gap: 6px;
      flex: 1;
    }

    .menu-button {
      display: flex;
      align-items: center;
      gap: 12px;
      width: 100%;
      padding: 12px 16px;
      color: var(--sidebar-text);
      text-align: left;
      font-size: 14.5px;
      font-weight: 500;
      border-radius: 10px;
      background: transparent;
      border: 1px solid transparent;
      transition: var(--transition);
    }

    .menu-button:hover {
      color: #ffffff;
      background: rgba(255, 255, 255, 0.05);
    }

    .menu-button.active {
      color: var(--sidebar-text-active);
      background: var(--sidebar-active-bg);
      border: 1px solid rgba(59, 130, 246, 0.35);
      box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
    }

    /* =========================================
       MAIN CONTENT & TOPBAR
       ========================================= */
    .main-content {
      min-width: 0;
      padding: 28px 36px;
      background: #f8fafc;
    }

    .topbar {
      display: flex;
      margin-bottom: 24px;
      padding-bottom: 18px;
      align-items: center;
      justify-content: space-between;
      gap: 16px;
      border-bottom: 1px solid #e2e8f0;
    }

    .topbar h2 {
      margin: 0;
      color: var(--primary);
      font-size: 24px;
      font-weight: 600;
    }

    .button-row {
      display: flex;
      flex-wrap: wrap;
      align-items: center;
      gap: 12px;
    }

    /* =========================================
       BUTTONS
       ========================================= */
    .btn {
      display: inline-flex;
      align-items: center;
      justify-content: center;
      gap: 8px;
      padding: 9px 16px;
      color: var(--text-secondary);
      font-size: 14px;
      font-weight: 500;
      border: 1px solid var(--border);
      border-radius: var(--radius-sm);
      background: #ffffff;
      box-shadow: var(--shadow-sm);
      transition: var(--transition);
      white-space: nowrap;
    }

    .btn:hover {
      color: var(--text);
      background: #f1f5f9;
      border-color: #cbd5e1;
      transform: translateY(-1px);
    }

    .btn:active {
      transform: translateY(0);
    }

    .btn-primary {
      color: #ffffff;
      border-color: var(--primary);
      background: linear-gradient(135deg, var(--primary) 0%, var(--primary-light) 100%);
      box-shadow: 0 2px 8px rgba(15, 44, 89, 0.2);
    }

    .btn-primary:hover {
      color: #ffffff;
      background: linear-gradient(135deg, var(--primary-hover) 0%, var(--primary) 100%);
      box-shadow: 0 4px 12px rgba(15, 44, 89, 0.3);
      border-color: var(--primary-hover);
    }

    .btn-success {
      color: #ffffff;
      border-color: var(--success);
      background: var(--success);
      box-shadow: 0 2px 8px rgba(5, 150, 105, 0.2);
    }

    .btn-success:hover {
      color: #ffffff;
      background: #047857;
      border-color: #047857;
    }

    .btn-danger {
      color: #ffffff;
      border-color: var(--danger);
      background: var(--danger);
      box-shadow: 0 2px 8px rgba(220, 38, 38, 0.2);
    }

    .btn-danger:hover {
      color: #ffffff;
      background: #b91c1c;
      border-color: #b91c1c;
    }

    .btn-warning {
      color: #ffffff;
      border-color: var(--warning);
      background: var(--warning);
      box-shadow: 0 2px 8px rgba(217, 119, 6, 0.2);
    }

    .btn-warning:hover {
      color: #ffffff;
      background: #b45309;
      border-color: #b45309;
    }

    .btn:disabled {
      cursor: not-allowed;
      opacity: 0.5;
      transform: none !important;
      box-shadow: none !important;
    }

    /* =========================================
       TWO-TONE ACTION BUTTONS (HEADER)
       ========================================= */
    .btn-twotone-action {
      display: inline-flex;
      align-items: center;
      gap: 12px;
      padding: 6px 18px 6px 7px;
      border-radius: var(--radius-pill);
      font-family: "Prompt", "Noto Sans Thai", sans-serif;
      font-size: 14.5px;
      font-weight: 600;
      transition: var(--transition);
      cursor: pointer;
    }

    .btn-twotone-action .twotone-icon {
      display: grid;
      width: 36px;
      height: 36px;
      place-items: center;
      border-radius: 50%;
      transition: var(--transition);
    }

    .btn-twotone-action:hover {
      transform: translateY(-2px);
    }

    /* ปุ่มแจ้งซ่อม ทูโทนเขียวมรกตพรีเมียม */
    .btn-twotone-green {
      background: linear-gradient(135deg, #065f46 0%, #047857 100%);
      border: 1px solid rgba(16, 185, 129, 0.4);
      color: #ffffff;
      box-shadow: 0 4px 14px rgba(5, 150, 105, 0.28);
    }

    .btn-twotone-green .twotone-icon {
      background: #10b981;
      color: #ffffff;
      box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
    }

    .btn-twotone-green:hover {
      background: linear-gradient(135deg, #047857 0%, #059669 100%);
      box-shadow: 0 6px 20px rgba(5, 150, 105, 0.4);
      border-color: #34d399;
    }

    .btn-twotone-green:hover .twotone-icon {
      transform: scale(1.08) rotate(-5deg);
    }

    /* ปุ่มหน้าแรก ทูโทนขาวกระจกใสพรีเมียม */
    .btn-twotone-white {
      background: rgba(255, 255, 255, 0.14);
      border: 1px solid rgba(255, 255, 255, 0.28);
      color: #ffffff;
      backdrop-filter: blur(10px);
      box-shadow: 0 4px 14px rgba(0, 0, 0, 0.12);
    }

    .btn-twotone-white .twotone-icon {
      background: rgba(255, 255, 255, 0.22);
      color: #ffffff;
    }

    .btn-twotone-white:hover {
      background: rgba(255, 255, 255, 0.24);
      border-color: rgba(255, 255, 255, 0.5);
      box-shadow: 0 6px 18px rgba(0, 0, 0, 0.2);
    }

    .btn-twotone-white:hover .twotone-icon {
      transform: scale(1.08);
      background: rgba(255, 255, 255, 0.35);
    }

    /* =========================================
       DASHBOARD STAT CARDS
       ========================================= */
    .dashboard-grid {
      display: grid;
      margin-bottom: 24px;
      grid-template-columns: repeat(4, minmax(0, 1fr));
      gap: 16px;
    }

    .stat-card {
      position: relative;
      padding: 22px 24px;
      border: 1px solid var(--border);
      border-radius: var(--radius);
      background: #ffffff;
      box-shadow: var(--shadow);
      transition: var(--transition);
      overflow: hidden;
    }

    .stat-card:hover {
      border-color: #cbd5e1;
      transform: translateY(-2px);
      box-shadow: var(--shadow-lg);
    }

    .stat-label {
      color: var(--muted);
      font-size: 13.5px;
      font-weight: 500;
    }

    .stat-value {
      margin-top: 6px;
      color: var(--primary);
      font-family: "Prompt", "Mitr", sans-serif;
      font-size: 32px;
      font-weight: 600;
      line-height: 1.1;
    }

    /* =========================================
       CARDS & FORMS
       ========================================= */
    .card {
      margin-bottom: 24px;
      padding: 24px;
      border: 1px solid var(--border);
      border-radius: var(--radius);
      background: #ffffff;
      box-shadow: var(--shadow);
    }

    .card-title {
      display: flex;
      margin-bottom: 20px;
      align-items: center;
      justify-content: space-between;
      gap: 14px;
      border-bottom: 1px solid #f1f5f9;
      padding-bottom: 14px;
    }

    .card-title h3 {
      margin: 0;
      color: var(--primary);
      font-size: 18px;
      font-weight: 600;
    }

    .filters {
      display: grid;
      margin-bottom: 20px;
      grid-template-columns: 2fr repeat(4, minmax(135px, 1fr));
      gap: 12px;
      padding: 16px;
      background: #f8fafc;
      border: 1px solid var(--border);
      border-radius: var(--radius-sm);
    }

    .form-grid {
      display: grid;
      grid-template-columns: repeat(2, minmax(0, 1fr));
      gap: 18px;
    }

    .form-group {
      min-width: 0;
    }

    .form-group.full {
      grid-column: 1 / -1;
    }

    label {
      display: block;
      margin-bottom: 6px;
      color: #334155;
      font-size: 13.5px;
      font-weight: 600;
    }

    input,
    select,
    textarea {
      width: 100%;
      padding: 10px 14px;
      color: var(--text);
      font-size: 14px;
      border: 1px solid var(--border);
      border-radius: var(--radius-sm);
      outline: none;
      background: #ffffff;
      transition: var(--transition);
    }

    input:focus,
    select:focus,
    textarea:focus {
      border-color: var(--border-focus);
      box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.15);
    }

    textarea {
      min-height: 100px;
      resize: vertical;
    }

    /* =========================================
       TABLE DESIGN
       ========================================= */
    .table-wrap {
      width: 100%;
      overflow-x: auto;
      border: 1px solid #e2e8f0;
      border-radius: var(--radius-sm);
      background: #ffffff;
    }

    table {
      width: 100%;
      border-collapse: collapse;
      text-align: left;
    }

    th, td {
      padding: 13px 16px;
      text-align: left;
      vertical-align: middle;
      border-bottom: 1px solid #f1f5f9;
      white-space: nowrap;
    }

    td.td-action,
    th.th-action {
      text-align: center;
      white-space: nowrap;
    }

    td.td-action .button-row,
    td[data-label="การจัดการ"] .button-row,
    td[data-label="จัดการ"] .button-row {
      display: inline-flex;
      flex-direction: row;
      flex-wrap: nowrap;
      align-items: center;
      justify-content: center;
      gap: 6px;
    }

    td.td-action .btn,
    td[data-label="การจัดการ"] .btn,
    td[data-label="จัดการ"] .btn {
      padding: 6px 14px;
      font-size: 13px;
      white-space: nowrap;
    }

    th {
      color: #475569;
      background: #f8fafc;
      font-family: "Noto Sans Thai", sans-serif;
      font-size: 13px;
      font-weight: 600;
      letter-spacing: 0.02em;
      border-bottom: 1px solid #e2e8f0;
    }

    tbody tr {
      transition: background 0.15s ease;
    }

    tbody tr:hover {
      background: #f8fafc;
    }

    td {
      color: #1e293b;
      font-size: 14px;
    }

    .thumbnail,
    .avatar {
      display: grid;
      width: 46px;
      height: 46px;
      place-items: center;
      overflow: hidden;
      border-radius: 10px;
      background: var(--primary-subtle);
      border: 1px solid rgba(59, 130, 246, 0.15);
      font-size: 22px;
      transition: var(--transition);
    }

    .thumbnail {
      cursor: pointer;
      object-fit: cover;
    }

    .thumbnail:hover,
    .avatar:hover {
      transform: scale(1.08);
    }

    /* Status Badges */
    .status-badge {
      display: inline-flex;
      padding: 4px 10px;
      align-items: center;
      border-radius: var(--radius-pill);
      font-size: 12.5px;
      font-weight: 600;
      line-height: 1.3;
      border: 1px solid transparent;
    }

    .status-normal {
      color: #065f46;
      background: var(--success-bg);
      border-color: var(--success-border);
    }

    .status-repair {
      color: #92400e;
      background: var(--warning-bg);
      border-color: var(--warning-border);
    }

    .status-danger {
      color: #991b1b;
      background: var(--danger-bg);
      border-color: var(--danger-border);
    }

    /* =========================================
       IMAGE PREVIEW & PICKER
       ========================================= */
    .image-tools {
      display: flex;
      flex-wrap: wrap;
      gap: 10px;
    }

    .image-preview {
      display: none;
      margin-top: 14px;
      padding: 14px;
      border: 1px dashed #cbd5e1;
      border-radius: var(--radius);
      background: #f8fafc;
    }

    .image-preview.active {
      display: flex;
      align-items: center;
      gap: 16px;
    }

    .image-preview img {
      width: 100px;
      height: 85px;
      object-fit: cover;
      border-radius: 10px;
      border: 1px solid #e2e8f0;
    }

    .preview-meta {
      min-width: 0;
      flex: 1;
    }

    .preview-name {
      overflow: hidden;
      font-weight: 600;
      text-overflow: ellipsis;
      white-space: nowrap;
      font-size: 14px;
    }

    .preview-size {
      color: var(--muted);
      font-size: 13px;
    }

    /* =========================================
       MODAL DIALOG
       ========================================= */
    .modal-backdrop {
      position: fixed;
      z-index: 1000;
      inset: 0;
      display: grid;
      padding: 20px;
      place-items: center;
      background: rgba(15, 23, 42, 0.6);
      backdrop-filter: blur(8px);
      animation: modal-fade 0.2s ease-out;
    }

    @keyframes modal-fade {
      from { opacity: 0; }
      to { opacity: 1; }
    }

    .modal {
      width: min(720px, 100%);
      max-height: 90vh;
      overflow-y: auto;
      border-radius: var(--radius-lg);
      background: #ffffff;
      box-shadow: 0 25px 60px -15px rgba(15, 23, 42, 0.35);
      border: 1px solid rgba(255, 255, 255, 0.8);
      animation: modal-zoom 0.25s cubic-bezier(0.16, 1, 0.3, 1);
    }

    @keyframes modal-zoom {
      from {
        opacity: 0;
        transform: scale(0.96) translateY(10px);
      }
      to {
        opacity: 1;
        transform: scale(1) translateY(0);
      }
    }

    .modal.large {
      width: min(1020px, 100%);
    }

    .modal-header,
    .modal-footer {
      display: flex;
      padding: 18px 24px;
      align-items: center;
      justify-content: space-between;
      gap: 12px;
      border-bottom: 1px solid #f1f5f9;
    }

    .modal-footer {
      border-top: 1px solid #f1f5f9;
      border-bottom: 0;
    }

    .modal-header h3 {
      margin: 0;
      color: var(--primary);
      font-size: 19px;
      font-weight: 600;
    }

    .modal-body {
      padding: 24px;
    }

    .close-button {
      display: grid;
      width: 34px;
      height: 34px;
      place-items: center;
      color: var(--muted);
      border: 0;
      border-radius: 50%;
      background: #f1f5f9;
      font-size: 20px;
      transition: var(--transition);
    }

    .close-button:hover {
      color: var(--danger);
      background: #fee2e2;
    }

    .lightbox-image {
      display: block;
      max-width: 100%;
      max-height: 65vh;
      margin: auto;
      border-radius: var(--radius);
      object-fit: contain;
      box-shadow: var(--shadow-lg);
    }

    .login-box {
      width: min(420px, 100%);
    }

    .empty-state {
      padding: 40px 16px;
      color: var(--muted);
      text-align: center;
      font-size: 14.5px;
    }

    /* =========================================
       LOADING & TOAST
       ========================================= */
    .loading-overlay {
      position: fixed;
      z-index: 3000;
      inset: 0;
      display: grid;
      place-items: center;
      background: rgba(15, 23, 42, 0.45);
      backdrop-filter: blur(6px);
    }

    .loading-box {
      min-width: 240px;
      padding: 28px 32px;
      text-align: center;
      border-radius: var(--radius-lg);
      background: #ffffff;
      box-shadow: var(--shadow-lg);
      border: 1px solid #e2e8f0;
    }

    .spinner {
      width: 44px;
      height: 44px;
      margin: 0 auto 16px;
      border: 4px solid #e2e8f0;
      border-top-color: var(--primary-light);
      border-radius: 50%;
      animation: spin 0.8s linear infinite;
    }

    @keyframes spin {
      to {
        transform: rotate(360deg);
      }
    }

    .spin-animation {
      animation: spin 0.8s linear infinite !important;
    }

    .btn-refresh-premium {
      display: inline-flex;
      align-items: center;
      gap: 6px;
      padding: 6px 14px;
      font-family: inherit;
      font-size: 13px;
      font-weight: 500;
      border-radius: var(--radius-pill);
      border: 1px solid #cbd5e1;
      background: #ffffff;
      color: #334155;
      cursor: pointer;
      transition: var(--transition);
    }

    .btn-refresh-premium:hover {
      color: var(--primary);
      background: #eff6ff;
      border-color: #93c5fd;
      transform: translateY(-1px);
      box-shadow: 0 2px 8px rgba(37, 99, 235, 0.12);
    }

    .toast-container {
      position: fixed;
      z-index: 4000;
      top: 20px;
      right: 20px;
      display: grid;
      max-width: min(380px, calc(100vw - 40px));
      gap: 10px;
    }

    .toast {
      padding: 14px 18px;
      color: #ffffff;
      font-size: 14px;
      font-weight: 500;
      border-radius: 12px;
      background: #1e293b;
      box-shadow: 0 10px 25px -5px rgba(0, 0, 0, 0.2);
      animation: toast-in 0.25s cubic-bezier(0.16, 1, 0.3, 1);
    }

    .toast.success {
      background: #059669;
    }

    .toast.error {
      background: #dc2626;
    }

    .toast.warning {
      background: #d97706;
    }

    @keyframes toast-in {
      from {
        opacity: 0;
        transform: translateY(-10px) scale(0.95);
      }
      to {
        opacity: 1;
        transform: translateY(0) scale(1);
      }
    }

    /* =========================================
       PUBLIC PORTAL
       ========================================= */
    .public-header {
      padding: 22px 24px;
      color: white;
      background: linear-gradient(135deg, #0b1528 0%, #0f2c59 60%, #1e3a8a 100%);
      border-bottom: 1px solid rgba(255, 255, 255, 0.12);
      box-shadow: 0 4px 20px rgba(11, 21, 40, 0.15);
    }

    .public-header-inner {
      display: flex;
      max-width: 1180px;
      margin: auto;
      align-items: center;
      justify-content: space-between;
      gap: 18px;
    }

    .public-header h2 {
      margin: 0;
      font-size: 23px;
      font-weight: 600;
      color: #ffffff;
      letter-spacing: -0.01em;
    }

    .public-header-subtitle {
      color: #94a3b8;
      font-size: 14px;
      margin-top: 2px;
    }

    .public-main {
      max-width: 1180px;
      margin: auto;
      padding: 28px 20px;
    }

    .request-success {
      text-align: center;
      padding: 10px;
    }

    .queue-number {
      display: grid;
      width: 110px;
      height: 110px;
      margin: 20px auto;
      place-items: center;
      color: white;
      border-radius: 50%;
      background: linear-gradient(135deg, var(--primary-light) 0%, var(--secondary) 100%);
      font-family: "Prompt", "Mitr", sans-serif;
      font-size: 42px;
      font-weight: 600;
      box-shadow: 0 10px 25px rgba(30, 64, 175, 0.3);
    }

    /* =========================================
       RESPONSIVE DESIGN (IPHONE / IPAD / DESKTOP)
       ========================================= */
    @media (max-width: 1024px) {
      .app-layout {
        grid-template-columns: 230px minmax(0, 1fr);
      }
      .main-content {
        padding: 24px 20px;
      }
      .dashboard-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
      }
      .filters {
        grid-template-columns: repeat(2, minmax(0, 1fr));
      }
      .public-header {
        padding: 22px 18px;
      }
      .public-header-inner {
        flex-direction: column !important;
        align-items: center !important;
        text-align: center !important;
        gap: 16px !important;
        width: 100% !important;
      }
      .public-header-inner > div:first-child {
        text-align: center !important;
        width: 100% !important;
      }
      .public-header-inner .public-header-subtitle {
        text-align: center !important;
      }
      .public-header-inner .button-row {
        display: flex !important;
        justify-content: center !important;
        align-items: center !important;
        flex-wrap: wrap !important;
        gap: 12px !important;
        width: 100% !important;
        margin: 0 auto !important;
      }
      .public-header-inner .btn-twotone-action {
        width: auto !important;
        min-width: 160px !important;
        max-width: 250px !important;
        justify-content: center !important;
      }
    }

    /* Base styles for mobile elements (hidden on desktop) */
    .sidebar-backdrop {
      display: none;
    }

    .sidebar-close-btn {
      display: none;
    }

    .mobile-menu-toggle {
      display: none;
    }

    .topbar-left {
      display: flex;
      align-items: center;
      gap: 12px;
    }

    .sidebar-brand-left {
      display: flex;
      align-items: center;
      gap: 10px;
    }

    .mobile-card-status {
      display: none;
    }

    .queue-badge {
      font-weight: 700;
      color: var(--primary);
    }

    @media (max-width: 768px) {
      /* =========================================
         MOBILE RESPONSIVE: ADMIN PORTAL & APP LAYOUT
         ========================================= */
      .app-layout {
        grid-template-columns: 1fr;
        min-height: 100vh;
      }

      /* 1. Mobile Drawer Sidebar & Backdrop */
      .sidebar-backdrop {
        display: none;
        position: fixed;
        inset: 0;
        background: rgba(15, 23, 42, 0.65);
        backdrop-filter: blur(4px);
        -webkit-backdrop-filter: blur(4px);
        z-index: 998;
        opacity: 0;
        transition: opacity 0.25s ease;
      }

      .sidebar-backdrop.active {
        display: block !important;
        opacity: 1 !important;
      }

      .sidebar {
        position: fixed !important;
        top: 0 !important;
        left: 0 !important;
        bottom: 0 !important;
        width: 285px !important;
        max-width: 85vw !important;
        height: 100vh !important;
        height: 100dvh !important;
        z-index: 999 !important;
        transform: translateX(-100%) !important;
        transition: transform 0.28s cubic-bezier(0.33, 1, 0.68, 1) !important;
        box-shadow: 6px 0 25px rgba(0, 0, 0, 0.35) !important;
        overflow-y: auto !important;
        padding: 16px 14px 28px !important;
        background: var(--sidebar-bg) !important;
        border-right: 1px solid rgba(255, 255, 255, 0.1) !important;
      }

      .sidebar.open {
        transform: translateX(0) !important;
      }

      .sidebar-brand {
        display: flex !important;
        align-items: center !important;
        justify-content: space-between !important;
        padding: 4px 4px 14px !important;
        margin-bottom: 14px !important;
        border-bottom: 1px solid rgba(255, 255, 255, 0.1) !important;
      }

      .sidebar-brand-left {
        display: flex;
        align-items: center;
        gap: 9px;
        overflow: hidden;
      }

      .sidebar-brand-badge {
        width: 28px;
        height: 28px;
        border-radius: 7px;
        flex-shrink: 0;
      }

      .sidebar-brand-badge svg {
        width: 16px;
        height: 16px;
      }

      .sidebar-brand-text {
        font-size: 13.5px;
        font-weight: 600;
        color: #ffffff;
        letter-spacing: 0.1px;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
      }

      .sidebar-close-btn {
        display: inline-flex !important;
        align-items: center;
        justify-content: center;
        width: 32px;
        height: 32px;
        border-radius: 8px;
        background: rgba(255, 255, 255, 0.12);
        color: #ffffff;
        border: none;
        cursor: pointer;
        flex-shrink: 0;
        transition: background 0.15s ease;
      }

      .sidebar-close-btn:active {
        background: rgba(255, 255, 255, 0.25);
      }

      /* 2. Vertical Navigation Drawer Menu */
      .sidebar-menu {
        display: flex !important;
        flex-direction: column !important;
        gap: 8px !important;
        overflow-x: visible !important;
        padding: 6px 0 !important;
      }

      .menu-button {
        width: 100% !important;
        padding: 12px 14px !important;
        font-size: 14px !important;
        font-weight: 500;
        border-radius: 10px !important;
        justify-content: flex-start !important;
        gap: 12px !important;
        white-space: nowrap !important;
        border: 1px solid transparent;
      }

      .menu-button.active {
        border-color: rgba(96, 165, 250, 0.5);
        box-shadow: 0 2px 8px rgba(0, 0, 0, 0.25);
      }

      .menu-icon {
        width: 26px;
        height: 26px;
        border-radius: 6px;
      }

      .menu-icon svg {
        width: 15px;
        height: 15px;
      }

      /* 3. Main Content Area */
      .main-content {
        padding: 14px 12px 36px;
        background: #f8fafc;
      }

      .card {
        padding: 14px 12px;
        border-radius: 12px;
        margin-bottom: 14px;
        box-shadow: 0 2px 8px rgba(0, 0, 0, 0.04);
      }

      /* 4. Compact Single-row Topbar with Hamburger */
      .topbar {
        display: flex !important;
        flex-direction: row !important;
        align-items: center !important;
        justify-content: space-between !important;
        gap: 10px !important;
        margin-bottom: 14px !important;
        padding-bottom: 12px !important;
        border-bottom: 1px solid #e2e8f0 !important;
      }

      .topbar-left {
        display: flex;
        align-items: center;
        gap: 10px;
        min-width: 0;
      }

      .mobile-menu-toggle {
        display: inline-flex !important;
        align-items: center;
        justify-content: center;
        width: 38px;
        height: 38px;
        border-radius: 8px;
        background: #ffffff;
        border: 1px solid #cbd5e1;
        color: var(--primary);
        cursor: pointer;
        box-shadow: 0 1px 3px rgba(0, 0, 0, 0.06);
        flex-shrink: 0;
      }

      .mobile-menu-toggle:active {
        background: #f1f5f9;
      }

      .topbar h2 {
        font-size: 17.5px !important;
        line-height: 1.2 !important;
        margin: 0 !important;
        color: var(--primary) !important;
        font-weight: 600 !important;
        white-space: nowrap !important;
        overflow: hidden !important;
        text-overflow: ellipsis !important;
      }

      .topbar .button-row {
        width: auto !important;
        display: flex !important;
        flex-wrap: nowrap !important;
        gap: 6px !important;
        flex-shrink: 0 !important;
      }

      .topbar .button-row .btn {
        width: auto !important;
        padding: 6px 10px !important;
        font-size: 12px !important;
        gap: 4px !important;
        border-radius: 7px !important;
        line-height: 1.2 !important;
      }

      .topbar .button-row .btn svg {
        width: 13px;
        height: 13px;
      }

      /* 5. Proportional 2x2 Dashboard Stat Cards */
      .dashboard-grid {
        display: grid !important;
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
        gap: 8px !important;
        margin-bottom: 14px !important;
      }

      .stat-card {
        padding: 10px 10px 8px;
        border-radius: 10px;
      }

      .stat-header {
        display: flex;
        align-items: center;
        justify-content: space-between;
        margin-bottom: 2px;
      }

      .stat-label {
        font-size: 11px;
        font-weight: 600;
        line-height: 1.25;
        color: #64748b;
      }

      .stat-icon-badge {
        width: 24px;
        height: 24px;
        border-radius: 6px;
      }

      .stat-icon-badge svg {
        width: 13px;
        height: 13px;
      }

      .stat-value {
        font-size: 20px;
        font-weight: 700;
        margin: 2px 0;
        line-height: 1.2;
      }

      .stat-subtext {
        font-size: 9.5px;
        line-height: 1.2;
        color: #94a3b8;
      }

      /* 6. Card Titles & Action Buttons Grid */
      .card-title {
        display: flex;
        flex-direction: column;
        align-items: stretch;
        gap: 10px;
        margin-bottom: 12px;
      }

      .card-title h3 {
        font-size: 15.5px;
        margin: 0;
        font-weight: 600;
        color: #1e293b;
      }

      .card-title .button-row {
        width: 100%;
        display: grid;
        grid-template-columns: repeat(3, 1fr);
        gap: 6px;
      }

      .card-title .button-row #addAssetButton,
      .card-title .button-row #addCategoryButton,
      .card-title .button-row #addLocationButton {
        grid-column: 1 / -1;
        width: 100%;
        padding: 9px 12px;
        font-size: 13.5px;
        font-weight: 600;
        border-radius: 8px;
        justify-content: center;
      }

      .card-title .button-row #pdfButton,
      .card-title .button-row #xlsxButton,
      .card-title .button-row #printButton,
      .card-title .button-row #exportRequestsPdfBtn,
      .card-title .button-row #exportRequestsXlsxBtn,
      .card-title .button-row #exportFilteredRequestsCsvBtn,
      .card-title .button-row #printRequestsBtn {
        width: 100%;
        padding: 7px 4px;
        font-size: 11.5px;
        justify-content: center;
        border-radius: 7px;
        gap: 4px;
      }

      .card-title .button-row #pdfButton svg,
      .card-title .button-row #xlsxButton svg,
      .card-title .button-row #printButton svg,
      .card-title .button-row #exportRequestsPdfBtn svg,
      .card-title .button-row #exportRequestsXlsxBtn svg,
      .card-title .button-row #exportFilteredRequestsCsvBtn svg,
      .card-title .button-row #printRequestsBtn svg {
        width: 13px;
        height: 13px;
      }

      /* 7. Clean 2-Column Filters */
      .filters {
        display: grid !important;
        grid-template-columns: 1fr 1fr !important;
        gap: 8px !important;
        margin-bottom: 12px !important;
      }

      .filters input[type="text"],
      #requestFilterKeyword,
      #assetFilterKeyword {
        grid-column: 1 / -1;
        width: 100%;
        font-size: 13px;
        padding: 9px 11px;
        border-radius: 8px;
      }

      .filters select {
        width: 100%;
        font-size: 12px;
        padding: 7px 8px;
        border-radius: 8px;
      }

      /* =========================================
         8. SMARTPHONE RESPONSIVE CARD TABLES
         ========================================= */
      .table-wrap {
        background: transparent !important;
        border: none !important;
        overflow-x: visible !important;
        box-shadow: none !important;
        border-radius: 0 !important;
        padding: 0 !important;
        margin-bottom: 12px !important;
      }

      .table-wrap table {
        display: block !important;
        width: 100% !important;
        border: none !important;
        border-collapse: separate !important;
      }

      .table-wrap thead {
        display: none !important; /* Hide standard wide headers */
      }

      .table-wrap tbody {
        display: flex !important;
        flex-direction: column !important;
        gap: 12px !important;
        width: 100% !important;
      }

      .table-wrap tr.mobile-card-row,
      .table-wrap tr {
        display: block !important;
        background: #ffffff !important;
        border: 1px solid #e2e8f0 !important;
        border-radius: 14px !important;
        padding: 12px 14px !important;
        box-shadow: 0 2px 8px rgba(0, 0, 0, 0.04) !important;
        width: 100% !important;
        box-sizing: border-box !important;
        position: relative !important;
      }

      .table-wrap td {
        display: flex !important;
        justify-content: space-between !important;
        align-items: center !important;
        padding: 7px 0 !important;
        border: none !important;
        border-bottom: 1px dashed #f1f5f9 !important;
        font-size: 13px !important;
        white-space: normal !important;
        text-align: right !important;
        min-height: 28px !important;
        word-break: break-word !important;
      }

      .table-wrap td:last-child {
        border-bottom: none !important;
      }

      .table-wrap td::before {
        content: attr(data-label);
        font-weight: 600;
        color: #64748b;
        font-size: 12px;
        text-align: left;
        margin-right: 12px;
        flex-shrink: 0;
      }

      /* Card Top Header: Queue Number + Status */
      .table-wrap tr td.td-queue {
        display: flex !important;
        justify-content: space-between !important;
        align-items: center !important;
        background: #f8fafc !important;
        margin: -12px -14px 10px -14px !important;
        padding: 10px 14px !important;
        border-radius: 13px 13px 0 0 !important;
        border-bottom: 1px solid #e2e8f0 !important;
      }

      .table-wrap tr td.td-queue::before {
        display: none !important;
      }

      .table-wrap tr td.td-queue .queue-badge {
        font-size: 13.5px !important;
        font-weight: 700 !important;
        color: var(--primary) !important;
      }

      .mobile-card-status {
        display: inline-block !important;
      }

      /* Hide separate status row on mobile since it's already in the card header */
      .table-wrap tr td.td-status-desktop {
        display: none !important;
      }

      .table-wrap tr td.td-request-no strong {
        color: var(--primary);
        font-size: 13.5px;
      }

      /* Action buttons in mobile card */
      .table-wrap tr td.td-action,
      .table-wrap tr td[data-label="การจัดการ"],
      .table-wrap tr td[data-label="จัดการ"] {
        border-bottom: none !important;
        padding-top: 10px !important;
        margin-top: 4px !important;
        display: flex !important;
        justify-content: stretch !important;
      }

      .table-wrap tr td.td-action::before,
      .table-wrap tr td[data-label="การจัดการ"]::before,
      .table-wrap tr td[data-label="จัดการ"]::before {
        display: none !important;
      }

      .table-wrap tr td.td-action .btn,
      .table-wrap tr td[data-label="การจัดการ"] .btn {
        width: 100% !important;
        justify-content: center !important;
        padding: 9px 12px !important;
        font-size: 13.5px !important;
        font-weight: 600 !important;
        border-radius: 8px !important;
      }

      .table-wrap tr td.td-action .button-row,
      .table-wrap tr td[data-label="การจัดการ"] .button-row {
        display: grid !important;
        grid-template-columns: 1fr 1fr !important;
        gap: 8px !important;
        width: 100% !important;
      }

      .table-wrap tr td.td-asset-img {
        justify-content: flex-end !important;
      }

      .table-wrap tr td.td-asset-img .thumbnail {
        width: 44px !important;
        height: 44px !important;
        border-radius: 8px !important;
      }

      /* 9. Settings Form */
      #settingsForm .form-grid {
        display: grid !important;
        grid-template-columns: 1fr !important;
        gap: 10px !important;
      }

      #settingsForm .form-group label {
        font-size: 12.5px;
        font-weight: 500;
        margin-bottom: 4px;
      }

      #settingsForm .form-group input,
      #settingsForm .form-group textarea {
        font-size: 13.5px;
        padding: 9px 11px;
        border-radius: 8px;
      }

      #settingsForm .button-row {
        display: flex !important;
        flex-direction: column !important;
        gap: 8px !important;
        margin-top: 16px !important;
        width: 100% !important;
      }

      #settingsForm .button-row .btn {
        width: 100% !important;
        padding: 10px 14px !important;
        font-size: 13.5px !important;
        justify-content: center !important;
        border-radius: 8px !important;
      }

      /* 10. Modals & Dialogs on Mobile */
      .modal-backdrop {
        padding: 8px;
      }

      .modal {
        max-height: 94vh;
        border-radius: 14px;
      }

      .modal-header {
        padding: 14px 14px 12px;
      }

      .modal-header h2,
      .modal-header h3 {
        font-size: 16.5px;
      }

      .modal-body {
        padding: 14px 12px;
      }

      .modal-body .form-grid {
        grid-template-columns: 1fr !important;
        gap: 10px !important;
      }

      .modal-body .button-row {
        display: flex;
        flex-direction: column;
        gap: 8px;
        width: 100%;
        margin-top: 14px;
      }

      .modal-body .button-row .btn {
        width: 100%;
        padding: 10px;
        font-size: 14px;
        border-radius: 8px;
        justify-content: center;
      }

      .image-preview.active {
        align-items: flex-start;
        flex-direction: column;
      }

      .public-header-inner {
        align-items: center !important;
        text-align: center !important;
        flex-direction: column !important;
        gap: 14px !important;
        width: 100% !important;
      }

      .public-header-inner > div:first-child {
        text-align: center !important;
        width: 100% !important;
      }

      .public-header-inner .public-header-subtitle {
        text-align: center !important;
      }

      .public-header-inner .button-row {
        display: flex !important;
        flex-direction: column !important;
        align-items: center !important;
        justify-content: center !important;
        width: 100% !important;
        gap: 10px !important;
        margin: 0 auto !important;
      }

      .portal-grid {
        grid-template-columns: 1fr;
        gap: 14px;
      }

      .btn-twotone-action {
        width: 100% !important;
        max-width: 290px !important;
        justify-content: center !important;
        margin: 0 auto !important;
      }

      /* =========================================
         PUBLIC REQUEST MOBILE CARDS (CENTERED & BEAUTIFUL)
         ========================================= */
      .public-table-card .table-wrap {
        background: transparent !important;
        border: none !important;
        overflow-x: visible !important;
        box-shadow: none !important;
        border-radius: 0 !important;
        padding: 0 !important;
        margin-bottom: 12px !important;
      }

      .public-table-card .table-wrap table {
        display: block !important;
        width: 100% !important;
        border: none !important;
        border-collapse: separate !important;
      }

      .public-table-card .table-wrap thead {
        display: none !important;
      }

      .public-table-card .table-wrap tbody {
        display: flex !important;
        flex-direction: column !important;
        gap: 14px !important;
        width: 100% !important;
      }

      .public-table-card .table-wrap tr.request-row-hover,
      .public-table-card .table-wrap tr {
        display: flex !important;
        flex-direction: column !important;
        align-items: center !important;
        justify-content: center !important;
        text-align: center !important;
        background: #ffffff !important;
        border: 1px solid #e2e8f0 !important;
        border-radius: 16px !important;
        padding: 0 0 16px 0 !important;
        box-shadow: 0 3px 12px rgba(15, 23, 42, 0.04) !important;
        overflow: hidden !important;
        width: 100% !important;
        box-sizing: border-box !important;
        position: relative !important;
        transition: transform 0.15s ease, box-shadow 0.15s ease !important;
      }

      .public-table-card .table-wrap tr:hover {
        transform: translateY(-2px) !important;
        box-shadow: 0 6px 18px rgba(15, 23, 42, 0.08) !important;
      }

      .public-table-card .table-wrap td {
        display: flex !important;
        justify-content: center !important;
        align-items: center !important;
        text-align: center !important;
        width: 100% !important;
        padding: 5px 16px !important;
        border: none !important;
        border-bottom: none !important;
        white-space: normal !important;
        min-height: auto !important;
      }

      .public-table-card .table-wrap td::before {
        display: none !important;
      }

      /* Card Top Header Banner: Queue, RequestNo, Date */
      .public-table-card .table-wrap td:first-child {
        background: linear-gradient(180deg, #f8fafc 0%, #f1f5f9 100%) !important;
        padding: 14px 16px 12px 16px !important;
        border-bottom: 1px solid #e2e8f0 !important;
        margin-bottom: 8px !important;
      }

      .public-table-card .table-wrap .queue-col-cell {
        display: flex !important;
        flex-direction: column !important;
        align-items: center !important;
        justify-content: center !important;
        text-align: center !important;
        gap: 3px !important;
        width: 100% !important;
      }

      .public-table-card .table-wrap .queue-badge-pill {
        align-self: center !important;
        margin: 0 auto !important;
        font-size: 11.5px !important;
        padding: 2.5px 10px !important;
      }

      .public-table-card .table-wrap .request-no-code {
        font-size: 15px !important;
        font-weight: 700 !important;
        color: var(--primary) !important;
        text-align: center !important;
        letter-spacing: 0.01em !important;
      }

      .public-table-card .table-wrap .request-date-muted {
        font-size: 12px !important;
        color: #64748b !important;
        text-align: center !important;
      }

      /* Reporter */
      .public-table-card .table-wrap .reporter-cell {
        display: inline-flex !important;
        justify-content: center !important;
        align-items: center !important;
        text-align: center !important;
        gap: 8px !important;
        margin: 2px auto !important;
      }

      .public-table-card .table-wrap .reporter-avatar-icon {
        width: 26px !important;
        height: 26px !important;
        font-size: 12px !important;
      }

      .public-table-card .table-wrap .reporter-name {
        font-size: 14.5px !important;
        font-weight: 600 !important;
        color: #1e293b !important;
      }

      /* Chips (Organization & Equipment) */
      .public-table-card .table-wrap .org-badge-chip,
      .public-table-card .table-wrap .equipment-badge-chip {
        display: inline-flex !important;
        justify-content: center !important;
        align-items: center !important;
        text-align: center !important;
        margin: 2px auto !important;
        padding: 4px 14px !important;
        font-size: 12.5px !important;
      }

      /* Status Badge */
      .public-table-card .table-wrap .status-badge {
        display: inline-flex !important;
        justify-content: center !important;
        align-items: center !important;
        text-align: center !important;
        margin: 3px auto !important;
        padding: 5px 16px !important;
        font-size: 13px !important;
        font-weight: 600 !important;
      }

      /* Action View Button */
      .public-table-card .table-wrap td:last-child {
        padding-top: 10px !important;
        margin-top: 2px !important;
        border-bottom: none !important;
      }

      .public-table-card .table-wrap .btn-view-req {
        width: 100% !important;
        max-width: 250px !important;
        justify-content: center !important;
        padding: 8px 18px !important;
        font-size: 13px !important;
        font-weight: 600 !important;
        border-radius: 10px !important;
        margin: 0 auto !important;
      }
    }

    /* Extra Small Smartphones (iPhone SE, 360px - 480px) */
    @media (max-width: 480px) {
      .topbar h2 {
        font-size: 15.5px !important;
      }

      .stat-value {
        font-size: 18px !important;
      }

      .stat-label {
        font-size: 10px !important;
      }

      .stat-icon-badge {
        width: 22px !important;
        height: 22px !important;
      }

      .stat-icon-badge svg {
        width: 12px !important;
        height: 12px !important;
      }

      .card-title .button-row #pdfButton,
      .card-title .button-row #xlsxButton,
      .card-title .button-row #printButton,
      .card-title .button-row #exportRequestsPdfBtn,
      .card-title .button-row #exportRequestsXlsxBtn,
      .card-title .button-row #exportFilteredRequestsCsvBtn,
      .card-title .button-row #printRequestsBtn {
        font-size: 11px !important;
        padding: 6px 2px !important;
      }
    }

    /* =========================================
       PRINT OPTIMIZATIONS
       ========================================= */
    @media print {
      body {
        color: #000;
        background: #fff;
      }

      .no-print,
      .sidebar,
      .topbar,
      .filters,
      .button-row,
      .modal-backdrop,
      .toast-container,
      .loading-overlay {
        display: none !important;
      }

      .app-layout {
        display: block;
      }

      .main-content,
      .public-main {
        padding: 0;
      }

      .card {
        padding: 0;
        border: 0;
        box-shadow: none;
      }

      table {
        font-size: 10.5px;
      }

      th, td {
        padding: 6px 8px;
        white-space: normal;
      }

      .thumbnail,
      .avatar {
        width: 38px;
        height: 38px;
      }

      @page {
        size: A4 portrait;
        margin: 12mm;
      }
    }

    /* Portal Card Centering Enhancement */
    .portal-card {
      display: flex;
      flex-direction: column;
      align-items: center;
      text-align: center;
    }

    .portal-icon {
      width: 78px;
      height: 78px;
      display: flex;
      align-items: center;
      justify-content: center;
      border: 1px solid #c7d7fe;
      border-radius: 22px;
      background: #f3f7ff;
    }

    .portal-icon svg {
      display: block;
    }

    .portal-title,
    .portal-description {
      display: block;
      text-align: center;
    }
    /* =========================================
       PREMIUM ADMIN LOGIN MODAL & SECURITY
       ========================================= */
    .login-modal-box {
      width: min(440px, 100%);
      padding: 4px;
    }

    .login-branding {
      text-align: center;
      margin-bottom: 20px;
    }

    .login-badge {
      display: inline-flex;
      align-items: center;
      justify-content: center;
      width: 60px;
      height: 60px;
      border-radius: 18px;
      background: linear-gradient(135deg, var(--primary) 0%, var(--primary-light) 60%, var(--secondary) 100%);
      color: #ffffff;
      margin-bottom: 12px;
      box-shadow: 0 8px 20px -4px rgba(15, 44, 89, 0.35);
      border: 2px solid rgba(255, 255, 255, 0.8);
    }

    .login-branding h4 {
      margin: 0 0 4px;
      color: var(--primary);
      font-size: 18px;
      font-weight: 700;
      letter-spacing: -0.01em;
    }

    .login-branding-sub {
      color: var(--muted);
      font-size: 13px;
    }

    .password-input-group {
      position: relative;
      display: flex;
      align-items: center;
    }

    .password-input-group input {
      width: 100%;
      padding-right: 44px;
      font-size: 15px;
      letter-spacing: 0.05em;
    }

    .password-toggle-btn {
      position: absolute;
      right: 8px;
      top: 50%;
      transform: translateY(-50%);
      display: grid;
      place-items: center;
      width: 32px;
      height: 32px;
      border: 0;
      background: transparent;
      color: #64748b;
      border-radius: 8px;
      cursor: pointer;
      transition: var(--transition);
    }

    .password-toggle-btn:hover {
      color: var(--primary);
      background: #f1f5f9;
    }

    .security-notice-card {
      display: flex;
      align-items: flex-start;
      gap: 10px;
      margin-top: 20px;
      padding: 12px 14px;
      background: #f8fafc;
      border: 1px solid #e2e8f0;
      border-left: 4px solid var(--primary);
      border-radius: var(--radius-sm);
      color: #475569;
      font-size: 12px;
      line-height: 1.5;
    }

    .security-notice-card svg {
      flex-shrink: 0;
      margin-top: 1px;
    }

    .lockout-alert {
      display: flex;
      align-items: center;
      gap: 10px;
      padding: 12px 16px;
      margin-bottom: 16px;
      border-radius: 10px;
      background: #fef2f2;
      border: 1px solid #fecaca;
      color: #991b1b;
      font-size: 13px;
      font-weight: 500;
      animation: toast-in 0.25s ease-out;
    }

    .btn-login-submit {
      width: 100%;
      padding: 11px 18px;
      font-size: 15px;
      font-weight: 600;
      border-radius: 10px;
    }

    /* =========================================
       DASHBOARD METRIC CARDS & BADGES (ENHANCED)
       ========================================= */
    .stat-header {
      display: flex;
      align-items: center;
      justify-content: space-between;
      margin-bottom: 4px;
    }

    .stat-icon-badge {
      display: inline-flex;
      align-items: center;
      justify-content: center;
      width: 34px;
      height: 34px;
      border-radius: 10px;
      flex-shrink: 0;
    }

    .badge-blue {
      background: #eff6ff;
      color: #1d4ed8;
      border: 1px solid #bfdbfe;
    }

    .badge-green {
      background: #ecfdf5;
      color: #059669;
      border: 1px solid #a7f3d0;
    }

    .badge-amber {
      background: #fffbeb;
      color: #d97706;
      border: 1px solid #fde68a;
    }

    .badge-purple {
      background: #f5f3ff;
      color: #7c3aed;
      border: 1px solid #ddd6fe;
    }

    .stat-card-total {
      border-top: 3px solid #2563eb;
    }

    .stat-card-completed {
      border-top: 3px solid #059669;
    }

    .stat-card-progress {
      border-top: 3px solid #d97706;
    }

    .stat-card-waiting {
      border-top: 3px solid #7c3aed;
    }

    .stat-subtext {
      color: var(--muted);
      font-size: 12px;
      margin-top: 6px;
    }

    .text-purple {
      color: #7c3aed !important;
    }

    /* Queue Waiting Banner in Success Modal */
    .queue-wait-banner {
      display: flex;
      align-items: center;
      justify-content: center;
      gap: 10px;
      margin: 16px auto 20px;
      padding: 12px 18px;
      background: #fffbeb;
      border: 1px solid #fde68a;
      border-radius: var(--radius-sm);
      color: #92400e;
      font-size: 14.5px;
      text-align: center;
    }

    .queue-wait-icon {
      font-size: 20px;
      line-height: 1;
    }

    .queue-wait-text strong {
      font-size: 16px;
      color: #b45309;
    }

    .request-details-box {
      text-align: left;
      background: #f8fafc;
      border: 1px solid #e2e8f0;
      border-radius: var(--radius-sm);
      padding: 16px 20px;
      margin-bottom: 20px;
    }

    .request-details-box p {
      margin: 6px 0;
      font-size: 13.5px;
      color: #334155;
    }

    .status-pill-waiting {
      display: inline-block;
      padding: 2px 10px;
      border-radius: 9999px;
      font-size: 12.5px;
      font-weight: 600;
      background: #fef3c7;
      color: #92400e;
      border: 1px solid #fde68a;
    }


    /* =========================================
       PUBLIC REPAIR SEARCH & TABLE UX/UI
       ========================================= */
    .search-card-premium {
      border-top: 3px solid var(--primary);
      box-shadow: var(--shadow);
    }

    .card-header-flex {
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 14px;
      margin-bottom: 20px;
      flex-wrap: wrap;
    }

    .card-title-group {
      display: flex;
      align-items: center;
      gap: 10px;
    }

    .card-title-group h3 {
      margin: 0;
      font-size: 18px;
      font-weight: 700;
      color: var(--primary);
      letter-spacing: -0.01em;
    }

    .card-title-icon {
      font-size: 20px;
      line-height: 1;
    }

    .btn-filter-reset {
      display: inline-flex;
      align-items: center;
      gap: 6px;
      padding: 6px 14px;
      font-family: inherit;
      font-size: 13px;
      font-weight: 500;
      border-radius: var(--radius-pill);
      border: 1px solid #cbd5e1;
      background: #ffffff;
      color: var(--muted);
      cursor: pointer;
      transition: var(--transition);
    }

    .btn-filter-reset:hover {
      color: var(--primary);
      background: #f1f5f9;
      border-color: var(--primary);
      transform: translateY(-1px);
    }

    .search-grid-3col,
    .search-grid-4col {
      display: grid;
      grid-template-columns: repeat(4, minmax(0, 1fr));
      gap: 16px;
    }

    @media (max-width: 1080px) {
      .search-grid-3col,
      .search-grid-4col {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 14px;
      }
    }

    @media (max-width: 640px) {
      .search-grid-3col,
      .search-grid-4col {
        grid-template-columns: 1fr;
        gap: 12px;
      }
      .card-header-flex {
        flex-direction: row;
        justify-content: space-between;
        align-items: center;
        gap: 8px;
        margin-bottom: 14px;
      }
      .card-title-group {
        gap: 6px;
      }
      .card-title-group h3 {
        font-size: 15.5px;
      }
      .btn-refresh-premium,
      .btn-filter-reset {
        padding: 5px 10px;
        font-size: 12px;
      }
    }

    .search-grid-3col .form-group {
      margin-bottom: 0;
    }

    .search-grid-3col label {
      display: flex;
      align-items: center;
      gap: 6px;
      margin-bottom: 8px;
      font-size: 13.5px;
      font-weight: 600;
      color: var(--text-secondary);
    }

    .label-icon {
      font-size: 15px;
      line-height: 1;
    }

    .count-badge {
      display: inline-flex;
      align-items: center;
      padding: 3px 12px;
      font-size: 12.5px;
      font-weight: 600;
      border-radius: var(--radius-pill);
      background: #eff6ff;
      color: #1d4ed8;
      border: 1px solid #bfdbfe;
    }

    /* Table Column Styles */
    table.modern-table {
      width: 100%;
      table-layout: auto;
      border-collapse: collapse;
    }

    table.modern-table th,
    table.modern-table td {
      padding: 13px 14px;
      vertical-align: middle;
    }

    table.modern-table tbody tr:last-child td {
      border-bottom: none;
    }

    .queue-col-cell {
      display: flex;
      flex-direction: column;
      gap: 2px;
    }

    .queue-badge-pill {
      align-self: flex-start;
      display: inline-block;
      padding: 2px 8px;
      font-size: 11px;
      font-weight: 700;
      border-radius: 6px;
      background: #e0e7ff;
      color: #3730a3;
      border: 1px solid #c7d2fe;
    }

    .request-no-code {
      font-family: "Prompt", "Mitr", monospace;
      font-size: 13.5px;
      font-weight: 600;
      color: var(--primary);
    }

    .request-date-muted {
      font-size: 11.5px;
      color: var(--muted);
    }

    .reporter-cell {
      display: flex;
      align-items: center;
      gap: 8px;
    }

    .reporter-avatar-icon {
      width: 28px;
      height: 28px;
      border-radius: 50%;
      background: #f1f5f9;
      display: flex;
      align-items: center;
      justify-content: center;
      font-size: 13px;
      flex-shrink: 0;
      border: 1px solid #e2e8f0;
    }

    .reporter-name {
      font-size: 14px;
      font-weight: 600;
      color: #1e293b;
    }

    .org-badge-chip {
      display: inline-block;
      padding: 4px 10px;
      font-size: 12.5px;
      font-weight: 500;
      border-radius: 6px;
      background: #f8fafc;
      border: 1px solid #e2e8f0;
      color: #334155;
    }

    .equipment-badge-chip {
      display: inline-block;
      padding: 4px 10px;
      font-size: 12.5px;
      font-weight: 500;
      border-radius: 6px;
      background: #f0fdf4;
      border: 1px solid #bbf7d0;
      color: #166534;
    }

    .defect-preview {
      font-size: 13.5px;
      color: #475569;
      display: -webkit-box;
      -webkit-line-clamp: 2;
      -webkit-box-orient: vertical;
      overflow: hidden;
      line-height: 1.45;
      max-width: 240px;
    }

    .status-badge.status-waiting {
      background: #fef3c7;
      color: #92400e;
      border: 1px solid #fde68a;
    }

    .status-badge.status-progress {
      background: #eff6ff;
      color: #1d4ed8;
      border: 1px solid #bfdbfe;
    }

    .btn-view-req {
      display: inline-flex;
      align-items: center;
      gap: 5px;
      padding: 6px 14px;
      font-family: inherit;
      font-size: 12.5px;
      font-weight: 600;
      border-radius: 8px;
      background: #eff6ff;
      color: #2563eb;
      border: 1px solid #bfdbfe;
      cursor: pointer;
      transition: var(--transition);
      white-space: nowrap;
    }

    .btn-view-req:hover {
      background: #2563eb;
      color: #ffffff;
      border-color: #2563eb;
      transform: translateY(-1px);
      box-shadow: 0 4px 12px rgba(37, 99, 235, 0.25);
    }

    .request-row-hover {
      cursor: pointer;
      transition: background-color 0.15s ease;
    }

    .request-row-hover:hover {
      background-color: #f8fafc !important;
    }

    .empty-state-modern {
      text-align: center;
      padding: 44px 20px;
    }

    .empty-state-icon {
      font-size: 42px;
      margin-bottom: 12px;
      opacity: 0.8;
    }

    .empty-state-title {
      font-size: 16px;
      font-weight: 600;
      color: #334155;
      margin-bottom: 6px;
    }

    .empty-state-sub {
      font-size: 13.5px;
      color: #94a3b8;
    }

    /* =========================================
       INFOGRAPHIC BADGES & ICONS ENHANCEMENTS
       ========================================= */
    .card-icon-badge {
      display: inline-flex;
      align-items: center;
      justify-content: center;
      width: 32px;
      height: 32px;
      border-radius: 8px;
      flex-shrink: 0;
    }

    .label-icon-badge {
      display: inline-flex;
      align-items: center;
      justify-content: center;
      width: 22px;
      height: 22px;
      border-radius: 6px;
      flex-shrink: 0;
      margin-right: 6px;
      vertical-align: -3px;
    }

    .sidebar-brand-badge {
      display: inline-flex;
      align-items: center;
      justify-content: center;
      width: 36px;
      height: 36px;
      border-radius: 10px;
      background: linear-gradient(135deg, rgba(59, 130, 246, 0.25) 0%, rgba(37, 99, 235, 0.4) 100%);
      border: 1px solid rgba(147, 197, 253, 0.35);
      color: #93c5fd;
      flex-shrink: 0;
      box-shadow: 0 4px 12px rgba(37, 99, 235, 0.2);
    }

    .sidebar-brand-text {
      font-weight: 600;
      letter-spacing: 0.2px;
    }

    .menu-icon {
      display: inline-flex;
      align-items: center;
      justify-content: center;
      width: 32px;
      height: 32px;
      border-radius: 8px;
      flex-shrink: 0;
      background: rgba(255, 255, 255, 0.06);
      border: 1px solid rgba(255, 255, 255, 0.08);
      color: #94a3b8;
      transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
    }

    .menu-button:hover .menu-icon {
      transform: scale(1.06);
      background: rgba(255, 255, 255, 0.12);
      color: #ffffff;
    }

    .menu-icon-blue {
      color: #60a5fa;
    }
    .menu-button.active .menu-icon-blue {
      background: rgba(59, 130, 246, 0.25);
      border-color: rgba(96, 165, 250, 0.5);
      color: #93c5fd;
      box-shadow: 0 2px 8px rgba(37, 99, 235, 0.25);
    }

    .menu-icon-amber {
      color: #fbbf24;
    }
    .menu-button.active .menu-icon-amber {
      background: rgba(245, 158, 11, 0.25);
      border-color: rgba(251, 191, 36, 0.5);
      color: #fde68a;
      box-shadow: 0 2px 8px rgba(217, 119, 6, 0.25);
    }

    .menu-icon-cyan {
      color: #38bdf8;
    }
    .menu-button.active .menu-icon-cyan {
      background: rgba(14, 165, 233, 0.25);
      border-color: rgba(56, 189, 248, 0.5);
      color: #7dd3fc;
      box-shadow: 0 2px 8px rgba(14, 165, 233, 0.25);
    }

    .menu-icon-indigo {
      color: #818cf8;
    }
    .menu-button.active .menu-icon-indigo {
      background: rgba(99, 102, 241, 0.25);
      border-color: rgba(129, 140, 248, 0.5);
      color: #c7d2fe;
      box-shadow: 0 2px 8px rgba(99, 102, 241, 0.25);
    }

    .menu-icon-emerald {
      color: #34d399;
    }
    .menu-button.active .menu-icon-emerald {
      background: rgba(16, 185, 129, 0.25);
      border-color: rgba(52, 211, 153, 0.5);
      color: #a7f3d0;
      box-shadow: 0 2px 8px rgba(16, 185, 129, 0.25);
    }

    .menu-icon-purple {
      color: #c084fc;
    }
    .menu-button.active .menu-icon-purple {
      background: rgba(168, 85, 247, 0.25);
      border-color: rgba(192, 132, 252, 0.5);
      color: #e9d5ff;
      box-shadow: 0 2px 8px rgba(168, 85, 247, 0.25);
    }

    .menu-icon-slate {
      color: #94a3b8;
    }
    .menu-button.active .menu-icon-slate {
      background: rgba(148, 163, 184, 0.25);
      border-color: rgba(203, 213, 225, 0.5);
      color: #e2e8f0;
      box-shadow: 0 2px 8px rgba(100, 116, 139, 0.25);
    }

    .btn-inline-icon {
      display: inline-flex;
      align-items: center;
      gap: 6px;
    }
    .btn-inline-icon svg {
      flex-shrink: 0;
    }

    /* =========================================
       TABLE PAGINATION BAR
       ========================================= */
    .table-pagination-bar {
      display: flex;
      align-items: center;
      justify-content: space-between;
      flex-wrap: wrap;
      gap: 12px;
      padding: 14px 18px;
      background: #ffffff;
      border: 1px solid #e2e8f0;
      border-top: none;
      border-radius: 0 0 var(--radius-sm) var(--radius-sm);
    }

    .pagination-info {
      color: #64748b;
      font-size: 13.5px;
      font-weight: 500;
      display: flex;
      align-items: center;
      gap: 8px;
    }

    .pagination-info strong {
      color: #1e293b;
      font-weight: 600;
    }

    .pagination-badge-counter {
      display: inline-block;
      padding: 2px 8px;
      background: #f1f5f9;
      color: #475569;
      border-radius: 6px;
      font-size: 12px;
      font-weight: 600;
    }

    .pagination-controls {
      display: inline-flex;
      align-items: center;
      gap: 6px;
      user-select: none;
    }

    .page-btn {
      display: inline-flex;
      align-items: center;
      justify-content: center;
      min-width: 36px;
      height: 36px;
      padding: 0 10px;
      border: 1px solid #cbd5e1;
      border-radius: 8px;
      background: #ffffff;
      color: #334155;
      font-size: 13px;
      font-weight: 500;
      cursor: pointer;
      transition: all 0.15s ease-in-out;
      outline: none;
      font-family: inherit;
    }

    .page-btn:hover:not(:disabled):not(.active) {
      background: #f1f5f9;
      border-color: #94a3b8;
      color: #0f172a;
    }

    .page-btn.active {
      background: #2563eb;
      border-color: #2563eb;
      color: #ffffff;
      font-weight: 600;
      box-shadow: 0 2px 4px rgba(37, 99, 235, 0.25);
    }

    .page-btn:disabled {
      opacity: 0.45;
      cursor: not-allowed;
      background: #f8fafc;
      border-color: #e2e8f0;
      color: #94a3b8;
    }

    .page-btn-nav {
      font-size: 13px;
      padding: 0 12px;
      gap: 4px;
      font-weight: 600;
    }

    .page-ellipsis {
      display: inline-flex;
      align-items: center;
      justify-content: center;
      min-width: 24px;
      height: 36px;
      color: #94a3b8;
      font-size: 14px;
    }

    @media (max-width: 640px) {
      .table-pagination-bar {
        flex-direction: column;
        align-items: center;
        text-align: center;
        gap: 10px;
      }
      .pagination-info {
        flex-direction: column;
        gap: 4px;
      }
      .pagination-controls {
        flex-wrap: wrap;
        justify-content: center;
      }
    }

    /* =========================================
       SORTABLE TABLE HEADERS & URGENCY BADGES
       ========================================= */
    th.sortable-th {
      cursor: pointer;
      user-select: none;
      transition: background 0.15s ease, color 0.15s ease;
      white-space: nowrap;
    }

    th.sortable-th:hover {
      background: #e2e8f0;
      color: #1e293b;
    }

    .sort-indicator {
      display: inline-block;
      margin-left: 5px;
      font-size: 11px;
      opacity: 0.5;
      vertical-align: middle;
      transition: opacity 0.15s ease;
    }

    th.sortable-th.active-sort {
      color: #2563eb;
      background: #eff6ff;
    }

    th.sortable-th.active-sort .sort-indicator {
      opacity: 1;
      font-weight: bold;
    }

    /* Urgency Badges */
    .urgency-badge {
      display: inline-flex;
      align-items: center;
      gap: 5px;
      padding: 3px 9px;
      border-radius: 9999px;
      font-size: 12px;
      font-weight: 600;
      line-height: 1.2;
      border: 1px solid transparent;
      white-space: nowrap;
    }

    .urgency-urgent-high {
      background: #fef2f2;
      color: #b91c1c;
      border-color: #fecaca;
    }

    .urgency-urgent-med {
      background: #fffbeb;
      color: #b45309;
      border-color: #fde68a;
    }

    .urgency-normal {
      background: #f0fdf4;
      color: #15803d;
      border-color: #bbf7d0;
    }

    .urgency-dot {
      width: 7px;
      height: 7px;
      border-radius: 50%;
      display: inline-block;
    }

    .dot-red {
      background-color: #ef4444;
      box-shadow: 0 0 0 2px rgba(239, 68, 68, 0.2);
    }

    .dot-yellow {
      background-color: #f59e0b;
      box-shadow: 0 0 0 2px rgba(245, 158, 11, 0.2);
    }

    .dot-green {
      background-color: #22c55e;
      box-shadow: 0 0 0 2px rgba(34, 197, 94, 0.2);
    }

    /* Staff Management Styles */
    .staff-nickname-badge {
      display: inline-block;
      padding: 2px 10px;
      border-radius: 9999px;
      font-size: 12px;
      font-weight: 600;
      background: #eff6ff;
      color: #1e40af;
      border: 1px solid #bfdbfe;
    }