/*!
 * HUD (Heads-Up Display) CSS Theme
 * Advanced Futuristic UI Design System
 * Version: 2.0.0 - Refactored & Optimized
 * Created: 2025
 * 
 * STRUCTURE INDEX:
 * 1. Variables & Design Tokens
 * 2. Base & Typography
 * 3. Buttons
 * 4. Forms & Inputs
 * 5. Cards & Panels
 * 6. Tables
 * 7. Pagination
 * 8. Badges & Alerts
 * 9. Modals & Overlays
 * 10. Navigation & Sidebar
 * 11. Utilities
 * 12. Animations
 */

/* ========================================================================
   1. DESIGN TOKENS - CSS Variables
   ======================================================================== */
   @import url('https://fonts.googleapis.com/css2?family=Orbitron:wght@400;500;600;700;900&family=Rajdhani:wght@300;400;500;600;700&family=Share+Tech+Mono&display=swap');

   :root {
       /* Primary Colors */
       --hud-primary: #00ffff;
       --hud-primary-dark: #00cccc;
       --hud-primary-light: #66ffff;
       
       /* Secondary Colors */
       --hud-secondary: #00ff88;
       --hud-secondary-dark: #00cc66;
       
       /* Status Colors */
       --hud-success: #00ff88;
       --hud-danger: #ff3366;
       --hud-warning: #ffaa00;
       --hud-info: #00ccff;
       --hud-accent: #ff00ff;
       
       /* Backgrounds */
       --hud-bg-base: #0a0e27;
       --hud-bg-elevated: #0f1937;
       --hud-bg-panel: rgba(10, 14, 39, 0.95);
       --hud-bg-card: rgba(15, 25, 50, 0.85);
       --hud-bg-overlay: rgba(5, 8, 24, 0.98);
       --hud-bg-input: rgba(0, 255, 255, 0.05);
       
       /* Border & Effects */
       --hud-border-color: #00ffff;
       --hud-border-width: 1px;
       --hud-border-width-thick: 2px;
       --hud-border-radius: 4px;
       
       /* Shadows & Glows */
       --hud-shadow-sm: 0 2px 8px rgba(0, 255, 255, 0.15);
       --hud-shadow-md: 0 4px 16px rgba(0, 255, 255, 0.25);
       --hud-shadow-lg: 0 8px 32px rgba(0, 255, 255, 0.35);
       --hud-glow-sm: 0 0 10px rgba(0, 255, 255, 0.4);
       --hud-glow-md: 0 0 20px rgba(0, 255, 255, 0.6);
       --hud-glow-lg: 0 0 30px rgba(0, 255, 255, 0.8);
       
       /* Typography */
       --hud-font-primary: 'Orbitron', sans-serif;
       --hud-font-secondary: 'Rajdhani', sans-serif;
       --hud-font-mono: 'Share Tech Mono', monospace;
       --hud-font-size-xs: 0.75rem;
       --hud-font-size-sm: 0.875rem;
       --hud-font-size-base: 1rem;
       --hud-font-size-lg: 1.125rem;
       --hud-font-size-xl: 1.25rem;
       
       /* Spacing */
       --hud-space-xs: 0.25rem;
       --hud-space-sm: 0.5rem;
       --hud-space-md: 1rem;
       --hud-space-lg: 1.5rem;
       --hud-space-xl: 2rem;
       
       /* Transitions */
       --hud-transition-fast: 0.15s cubic-bezier(0.4, 0, 0.2, 1);
       --hud-transition-base: 0.3s cubic-bezier(0.4, 0, 0.2, 1);
       --hud-transition-slow: 0.5s cubic-bezier(0.4, 0, 0.2, 1);
       
       /* Z-Index */
       --hud-z-dropdown: 1000;
       --hud-z-modal: 1050;
   }
   
   /* ========================================================================
      2. BASE STYLES & TYPOGRAPHY
      ======================================================================== */
   html {
       font-size: 14px;
       -webkit-font-smoothing: antialiased;
       -moz-osx-font-smoothing: grayscale;
   }
   
   body.hud-theme {
       background-color: var(--hud-bg-base);
       background-image:
           linear-gradient(rgba(0, 255, 255, 0.02) 1px, transparent 1px),
           linear-gradient(90deg, rgba(0, 255, 255, 0.02) 1px, transparent 1px);
       background-size: 50px 50px;
       color: #ffffff;
       font-family: var(--hud-font-secondary);
       line-height: 1.6;
       font-size: medium;
       font-weight: 600;
   }
   
   /* Typography */
   h1, h2, h3, h4, h5, h6 {
       font-family: var(--hud-font-primary);
       font-weight: 700;
       line-height: 1.25;
       color: var(--hud-primary);
       margin-bottom: var(--hud-space-md);
   }
   
   h1 { font-size: 2rem; }
   h2 { font-size: 1.5rem; }
   h3 { font-size: 1.35rem; }
   h4 { font-size: 1.1rem; }
   h5 { font-size: 1rem; }
   h6 { font-size: 0.8rem; }
   
   p {
       margin-bottom: var(--hud-space-md);
       color: rgba(255, 255, 255, 0.9);
   }
   
   /* ========================================================================
      3. BUTTON SYSTEM - Unified & Consistent
      ======================================================================== */
   
   /* Base Button Styles */
   .btn-hud-primary,
   .btn-hud-secondary,
   .btn-hud-success,
   .btn-hud-danger,
   .btn-hud-warning,
   .btn-hud-info {
       font-family: var(--hud-font-primary);
       font-weight: 600;
       font-size: var(--hud-font-size-sm);
       text-transform: uppercase;
       letter-spacing: 1px;
       padding: 0.6rem 1.5rem;
       border: var(--hud-border-width) solid;
       border-radius: var(--hud-border-radius);
       cursor: pointer;
       transition: var(--hud-transition-base);
       display: inline-flex;
       align-items: center;
       justify-content: center;
       gap: 0.5rem;
       text-decoration: none;
       position: relative;
       overflow: hidden;
   }
   
   /* Primary Button */
   .btn-hud-primary {
       background: rgba(0, 255, 255, 0.1);
       border-color: var(--hud-primary);
       color: var(--hud-primary);
   }
   
   .btn-hud-primary:hover,
   .btn-hud-primary:focus {
       background: var(--hud-primary);
       color: #000;
       box-shadow: var(--hud-glow-md);
       transform: translateY(-2px);
   }
   
   .btn-hud-primary:active {
       transform: translateY(0);
   }
   
   /* Secondary Button */
   .btn-hud-secondary {
       background: rgba(0, 255, 136, 0.1);
       border-color: var(--hud-secondary);
       color: var(--hud-secondary);
   }
   
   .btn-hud-secondary:hover,
   .btn-hud-secondary:focus {
       background: var(--hud-secondary);
       color: #000;
       box-shadow: 0 0 20px rgba(0, 255, 136, 0.6);
       transform: translateY(-2px);
   }
   
   /* Success Button */
   .btn-hud-success {
       background: rgba(0, 255, 136, 0.1);
       border-color: var(--hud-success);
       color: var(--hud-success);
   }
   
   .btn-hud-success:hover,
   .btn-hud-success:focus {
       background: var(--hud-success);
       color: #000;
       box-shadow: 0 0 20px rgba(0, 255, 136, 0.6);
       transform: translateY(-2px);
   }
   
   /* Danger Button */
   .btn-hud-danger {
       background: rgba(255, 51, 102, 0.1);
       border-color: var(--hud-danger);
       color: var(--hud-danger);
   }
   
   .btn-hud-danger:hover,
   .btn-hud-danger:focus {
       background: var(--hud-danger);
       color: #fff;
       box-shadow: 0 0 20px rgba(255, 51, 102, 0.6);
       transform: translateY(-2px);
   }
   
   /* Warning Button */
   .btn-hud-warning {
       background: rgba(255, 170, 0, 0.1);
       border-color: var(--hud-warning);
       color: var(--hud-warning);
   }
   
   .btn-hud-warning:hover,
   .btn-hud-warning:focus {
       background: var(--hud-warning);
       color: #000;
       box-shadow: 0 0 20px rgba(255, 170, 0, 0.6);
       transform: translateY(-2px);
   }
   
   /* Info Button */
   .btn-hud-info {
       background: rgba(0, 204, 255, 0.1);
       border-color: var(--hud-info);
       color: var(--hud-info);
   }
   
   .btn-hud-info:hover,
   .btn-hud-info:focus {
       background: var(--hud-info);
       color: #000;
       box-shadow: 0 0 20px rgba(0, 204, 255, 0.6);
       transform: translateY(-2px);
   }
   
   /* Button Sizes */
   .btn-hud-sm {
       padding: 0.4rem 1rem;
       font-size: var(--hud-font-size-xs);
   }
   
   .btn-hud-lg {
       padding: 0.8rem 2rem;
       font-size: var(--hud-font-size-base);
   }
   
   /* Button States */
   .btn-hud-primary:disabled,
   .btn-hud-secondary:disabled,
   .btn-hud-success:disabled,
   .btn-hud-danger:disabled,
   .btn-hud-warning:disabled,
   .btn-hud-info:disabled {
       opacity: 0.4;
       cursor: not-allowed;
       transform: none !important;
       box-shadow: none !important;
   }


   
   
   /* ========================================================================
      4. FORM SYSTEM - Inputs, Select, Textarea, etc.
      ======================================================================== */
   
   /* Form Labels */
   .form-label,
   label {
       color: var(--hud-primary);
       font-family: var(--hud-font-secondary);
       font-weight: 600;
       font-size: var(--hud-font-size-sm);
       text-transform: uppercase;
       letter-spacing: 0.5px;
       margin-bottom: var(--hud-space-sm);
       display: inline-block;
   }
   
   /* Base Input Styles */
   .form-control,
   .hud-input,
   input[type="text"],
   input[type="email"],
   input[type="password"],
   input[type="number"],
   input[type="tel"],
   input[type="url"],
   input[type="search"],
   input[type="date"],
   input[type="datetime-local"],
   input[type="month"],
   input[type="week"],
   input[type="time"],
   textarea,
   select {
       background: var(--hud-bg-input);
       border: var(--hud-border-width) solid rgba(0, 255, 255, 0.3);
       color: #ffffff;
       font-family: var(--hud-font-secondary);
       font-size: var(--hud-font-size-base);
       padding: 0.6rem 1rem;
       border-radius: var(--hud-border-radius);
       transition: var(--hud-transition-base);
       width: 100%;
   }
   
   .form-control::placeholder,
   input::placeholder,
   textarea::placeholder {
       color: rgba(0, 255, 255, 0.4);
       font-style: italic;
   }
   
   /* Input Focus State - Consistent untuk semua */
   .form-control:focus,
   .hud-input:focus,
   input:focus,
   textarea:focus,
   select:focus {
       background: rgba(0, 255, 255, 0.1);
       border-color: var(--hud-primary);
       box-shadow: var(--hud-glow-sm), inset 0 0 15px rgba(0, 255, 255, 0.1);
       outline: none;
       color: aqua;
   }
   
   /* Input Hover State */
   .form-control:hover,
   input:hover,
   textarea:hover,
   select:hover {
       border-color: rgba(0, 255, 255, 0.5);
   }
   
   /* Disabled & Readonly */
   .form-control:disabled,
   input:disabled,
   textarea:disabled,
   select:disabled {
       background: rgba(0, 255, 255, 0.02);
       border-color: rgba(0, 255, 255, 0.2);
       color: rgba(255, 255, 255, 0.3);
       cursor: not-allowed;
   }
   
   .form-control[readonly],
   input[readonly],
   textarea[readonly] {
       background: rgba(0, 255, 255, 0.03);
       border-color: rgba(0, 255, 255, 0.25);
   }
   
   /* Textarea Specific */
   textarea.form-control,
   textarea {
       min-height: 100px;
       resize: vertical;
   }
   
   /* Select Dropdown */
   select.form-control,
   select {
       cursor: pointer;
       padding-right: 2.5rem;
       /* background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath fill='none' stroke='%2300ffff' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='M2 5l6 6 6-6'/%3E%3C/svg%3E"); */
       background-repeat: no-repeat;
       background-position: right 0.75rem center;
       background-size: 16px 12px;
   }
   
   select option {
       background-color: var(--hud-bg-base);
       color: #ffffff;
   }
   
   /* Date Input Styling */
   input[type="date"],
   input[type="datetime-local"],
   input[type="month"],
   input[type="week"],
   input[type="time"] {
       appearance: auto;
       -webkit-appearance: auto;
   }
   
   input[type="date"]::-webkit-calendar-picker-indicator,
   input[type="datetime-local"]::-webkit-calendar-picker-indicator {
       filter: brightness(1.5);
       cursor: pointer;
   }
   
   /* Range Input */
   input[type="range"] {
       background: transparent;
       border: none;
       padding: 0;
       height: auto;
   }
   
   input[type="range"]::-webkit-slider-runnable-track {
       height: 6px;
       background: linear-gradient(90deg, var(--hud-primary), var(--hud-secondary));
       border-radius: 3px;
       box-shadow: var(--hud-glow-sm);
   }
   
   input[type="range"]::-webkit-slider-thumb {
       -webkit-appearance: none;
       width: 18px;
       height: 18px;
       background: var(--hud-primary);
       border: 2px solid var(--hud-bg-base);
       border-radius: 50%;
       cursor: pointer;
       margin-top: -6px;
       box-shadow: var(--hud-glow-sm);
   }
   
   input[type="range"]::-webkit-slider-thumb:hover {
       background: var(--hud-secondary);
       box-shadow: var(--hud-glow-md);
   }
   
   /* Checkbox & Radio */
   input[type="checkbox"],
   input[type="radio"] {
       width: auto;
       appearance: none;
       -webkit-appearance: none;
       width: 20px;
       height: 20px;
       border: 2px solid var(--hud-border-color);
       background: rgba(0, 255, 255, 0.05);
       cursor: pointer;
       position: relative;
   }
   
   input[type="checkbox"] {
       border-radius: 3px;
   }
   
   input[type="radio"] {
       border-radius: 50%;
   }
   
   input[type="checkbox"]:checked,
   input[type="radio"]:checked {
       background: var(--hud-primary);
       border-color: var(--hud-primary);
       box-shadow: var(--hud-glow-sm);
   }
   
   input[type="checkbox"]:checked::after {
       content: '\2713';
       position: absolute;
       top: 50%;
       left: 50%;
       transform: translate(-50%, -50%);
       color: #000;
       font-weight: bold;
       font-size: 14px;
   }
   
   input[type="radio"]:checked::after {
       content: '';
       position: absolute;
       top: 50%;
       left: 50%;
       transform: translate(-50%, -50%);
       width: 8px;
       height: 8px;
       background: #000;
       border-radius: 50%;
   }
   
   /* Form Validation States */
   .form-control.is-valid,
   input.is-valid,
   textarea.is-valid {
       border-color: var(--hud-success);
       background: rgba(0, 255, 136, 0.05);
       box-shadow: 0 0 10px rgba(0, 255, 136, 0.3);
   }
   
   .form-control.is-invalid,
   input.is-invalid,
   textarea.is-invalid {
       border-color: var(--hud-danger);
       background: rgba(255, 51, 102, 0.05);
       box-shadow: 0 0 10px rgba(255, 51, 102, 0.3);
   }
   
   .valid-feedback {
       color: var(--hud-success);
       font-size: var(--hud-font-size-sm);
       margin-top: var(--hud-space-xs);
   }
   
   .invalid-feedback {
       color: var(--hud-danger);
       font-size: var(--hud-font-size-sm);
       margin-top: var(--hud-space-xs);
   }
   
   .valid-feedback::before {
       content: '✓ ';
   }
   
   .invalid-feedback::before {
       content: '⚠ ';
   }
   
   /* Form Group */
   .form-group {
       margin-bottom: var(--hud-space-lg);
   }
   
   /* ========================================================================
      5. CARDS & PANELS
      ======================================================================== */
   .card.hud-card,
   .hud-panel {
       background: var(--hud-bg-card);
       backdrop-filter: blur(10px);
       border: var(--hud-border-width) solid var(--hud-border-color);
       border-radius: var(--hud-border-radius);
       box-shadow: var(--hud-shadow-md);
       position: relative;
       overflow: hidden;
       transition: var(--hud-transition-base);
   }
   
   .card.hud-card:hover {
       box-shadow: var(--hud-shadow-lg);
       transform: translateY(-2px);
   }
   
   /* Card Header */
   .card.hud-card .card-header,
   .hud-panel-header {
       background: rgba(0, 255, 255, 0.1);
       border-bottom: var(--hud-border-width) solid var(--hud-border-color);
       padding: var(--hud-space-md) var(--hud-space-lg);
       width: 100%;
   }

   .card.hud-card .card-header.flx {
    display: flex;
    flex-wrap: nowrap;
    flex-direction: row;
    justify-content: space-between;
    align-content: center;
    align-items: center;
   }
   
   .card.hud-card .card-title,
   .hud-card-title {
       font-family: var(--hud-font-primary);
       font-weight: 700;
       text-transform: uppercase;
       letter-spacing: 1.5px;
       color: var(--hud-primary);
       margin: 0;
       font-size: var(--hud-font-size-lg);
       position: relative;
       display: flex;
       flex-wrap: nowrap;
       flex-direction: row;
       justify-content: space-between;
       align-content: center;
       align-items: center;
       
   }
   
   /* ========================================================================
      TYPING EFFECT - Reusable Class
      ======================================================================== */
   
   /* Typing Effect - Can be applied to any element */
   .hud-effect-typing {
       position: relative;
       display: inline-block;
       white-space: nowrap;
       overflow: hidden;
       
       /* Typing Animation */
       animation: hud-typing 3s steps(40, end) 0.5s 1 normal both;
   }
   
   /* Animated Cursor for Typing Effect */
   .hud-effect-typing::after {
       content: '▊';
       position: absolute;
       right: 0;
       color: currentColor;
       animation: hud-cursor-blink 0.8s step-end infinite;
       opacity: 0;
       animation-delay: 0.5s;
       animation-duration: 0.8s;
       animation-iteration-count: 5;
       text-shadow: 
           0 0 10px currentColor,
           0 0 20px currentColor;
   }
   
   /* Typing with continuous cursor (doesn't stop blinking) */
   .hud-effect-typing.cursor-infinite::after {
       animation-iteration-count: infinite;
   }
   
   /* Typing without cursor */
   .hud-effect-typing.no-cursor::after {
       display: none;
   }
   
   /* Typing Speed Variants */
   .hud-effect-typing.speed-slow {
       animation-duration: 5s;
   }
   
   .hud-effect-typing.speed-fast {
       animation-duration: 1.5s;
   }
   
   .hud-effect-typing.speed-instant {
       animation-duration: 0.5s;
   }
   
   /* Typing with Glow Effect */
   .hud-effect-typing.with-glow {
       text-shadow: 
           0 0 10px rgba(0, 255, 255, 0.8),
           0 0 20px rgba(0, 255, 255, 0.6),
           0 0 30px rgba(0, 255, 255, 0.4);
   }
   
   /* Typing with Color Variants */
   .hud-effect-typing.color-primary {
       color: var(--hud-primary);
   }
   
   .hud-effect-typing.color-success {
       color: var(--hud-success);
   }
   
   .hud-effect-typing.color-danger {
       color: var(--hud-danger);
   }
   
   .hud-effect-typing.color-warning {
       color: var(--hud-warning);
   }

   .card.hud-card h4 {
      font-size: var(--hud-font-size-lg);
      display: flex;
      flex-wrap: nowrap;
      flex-direction: row;
      justify-content: space-between;
      align-content: center;
      align-items: center;
   }
   
   /* Card Body */
   .card.hud-card .card-body,
   .hud-panel-body {
       padding: var(--hud-space-lg);
       color: rgba(255, 255, 255, 0.9);
   }
   
   /* Card Footer */
   .card.hud-card .card-footer,
   .hud-panel-footer {
       background: rgba(0, 255, 255, 0.05);
       border-top: var(--hud-border-width) solid var(--hud-border-color);
       padding: var(--hud-space-md) var(--hud-space-lg);
   }
   
   /* Card Animation Effect */
   .card.hud-card::before {
       content: '';
       position: absolute;
       top: 0;
       left: -100%;
       width: 100%;
       height: 2px;
       background: linear-gradient(90deg, transparent, var(--hud-primary), transparent);
       animation: card-scan 3s infinite;
   }
   
   @keyframes card-scan {
       0%, 100% { left: -100%; }
       50% { left: 100%; }
   }
   
   /* ========================================================================
      6. TABLE SYSTEM
      ======================================================================== */
   .table.hud-table {
       color: #ffffff;
       font-family: var(--hud-font-mono);
       background: transparent;
       border-collapse: collapse;
       width: 100%;
   }
   
   .table.hud-table thead th {
       background: var(--hud-bg-base);
       border-bottom: 2px solid var(--hud-border-color);
       color: var(--hud-primary);
       font-family: var(--hud-font-primary);
       text-transform: uppercase;
       letter-spacing: 1px;
       font-weight: 700;
       padding: var(--hud-space-md);
       font-size: var(--hud-font-size-sm);
   }
   
   .table.hud-table tbody tr {
       border-bottom: 1px solid rgba(0, 255, 255, 0.15);
       transition: var(--hud-transition-base);
   }
   
   .table.hud-table tbody tr:hover {
       background: rgba(0, 255, 255, 0.08);
       box-shadow: inset 0 0 20px rgba(0, 255, 255, 0.1);
   }
   
   .table.hud-table tbody td {
       padding: var(--hud-space-md);
       vertical-align: middle;
       color: rgba(255, 255, 255, 0.85);
   }
   
   /* Striped Table */
   .table.hud-table.table-striped tbody tr:nth-of-type(odd) {
       background: rgba(0, 255, 255, 0.03);
   }
   
   /* Bordered Table */
   .table.hud-table.table-bordered {
       border: 2px solid var(--hud-border-color);
   }
   
   .table.hud-table.table-bordered th,
   .table.hud-table.table-bordered td {
       border: 1px solid rgba(0, 255, 255, 0.2);
   }

   .table-responsive {
    overflow-x: auto;
    width: 100%;
   }
   .table-responsive .table.hud-table {
    width: 100%;
    min-width: 600px;
   }
   .table-responsive .table.hud-table thead th {
    white-space: nowrap;
   }
   .table-responsive .table.hud-table tbody td {
    white-space: nowrap;
   }

   /* List Group */
   .list-group {
       margin-top: var(--hud-space-lg);
   }

   .list-group-item {
       background: rgba(0, 255, 255, 0.05);
       border: 1px solid rgba(0, 255, 255, 0.2);
       border-radius: var(--hud-border-radius);
   }

   .list-group-item:hover,
   .list-group-item:focus,
   .list-group-item:active {
       background: rgba(0, 255, 255, 0.1);
   }

   
   .list-group-item:disabled {
       background: rgba(0, 255, 255, 0.05);
       border: 1px solid rgba(0, 255, 255, 0.2);
       border-radius: var(--hud-border-radius);
   }
   
   .list-group-item:disabled:hover,
   .list-group-item:disabled:active,
   .list-group-item:disabled:focus,
   .list-group-item:disabled:disabled,
   .list-group-item:disabled:disabled:hover,
   .list-group-item:disabled:disabled:active,
   .list-group-item:disabled:disabled:focus {
       background: rgba(0, 255, 255, 0.05);
   }


   .list-group-item-action {
       background: rgba(0, 255, 255, 0.05);
       border: 1px solid rgba(0, 255, 255, 0.2);
       border-radius: var(--hud-border-radius);
   }
   
   .list-group-item-action:hover {
       background: rgba(0, 255, 255, 0.1);
   }
   
   /* ========================================================================
      7. PAGINATION SYSTEM
      ======================================================================== */
   .pagination {
       overflow: auto;
       display: flex;
       list-style: none;
       gap: var(--hud-space-sm);
       padding: 0;
       margin: var(--hud-space-md) 0;
   }
   
   .page-item .page-link {
       display: flex;
       align-items: center;
       justify-content: center;
       min-width: 40px;
       height: 40px;
       padding: var(--hud-space-sm) var(--hud-space-md);
       font-family: var(--hud-font-primary);
       font-weight: 600;
       font-size: var(--hud-font-size-sm);
       color: var(--hud-primary);
       background: rgba(0, 255, 255, 0.05);
       border: 2px solid var(--hud-border-color);
       border-radius: var(--hud-border-radius);
       text-decoration: none;
       transition: var(--hud-transition-base);
       cursor: pointer;
   }
   
   .page-item .page-link:hover {
       background: var(--hud-primary);
       color: #000;
       box-shadow: var(--hud-glow-md);
       transform: translateY(-2px);
   }
   
   .page-item.active .page-link {
       background: linear-gradient(135deg, var(--hud-primary), var(--hud-secondary));
       color: #000;
       border-color: var(--hud-primary);
       box-shadow: var(--hud-glow-md);
       font-weight: 700;
       pointer-events: none;
   }
   
   .page-item.disabled .page-link {
       color: rgba(0, 255, 255, 0.3);
       background: rgba(0, 255, 255, 0.02);
       border-color: rgba(0, 255, 255, 0.2);
       cursor: not-allowed;
       pointer-events: none;
   }
   
   /* Pagination Sizes */
   .pagination-lg .page-link {
       min-width: 50px;
       height: 50px;
       font-size: var(--hud-font-size-base);
   }
   
   .pagination-sm .page-link {
       min-width: 32px;
       height: 32px;
       font-size: var(--hud-font-size-xs);
   }
   
   /* ========================================================================
      8. BADGES & ALERTS
      ======================================================================== */
   
   /* Badge System */
   .badge.hud-badge,
   .hud-badge {
       font-family: var(--hud-font-primary);
       font-weight: 700;
       font-size: var(--hud-font-size-xs);
       text-transform: uppercase;
       letter-spacing: 0.5px;
       padding: 0.35rem 0.75rem;
       border: 1px solid currentColor;
       border-radius: 12px;
       display: inline-flex;
       align-items: center;
       gap: 0.25rem;
   }
   
   .badge.hud-badge-primary {
       color: var(--hud-primary);
       background: rgba(0, 255, 255, 0.1);
       box-shadow: 0 0 8px rgba(0, 255, 255, 0.3);
   }
   
   .badge.hud-badge-success {
       color: var(--hud-success);
       background: rgba(0, 255, 136, 0.1);
       box-shadow: 0 0 8px rgba(0, 255, 136, 0.3);
   }
   
   .badge.hud-badge-danger {
       color: var(--hud-danger);
       background: rgba(255, 51, 102, 0.1);
       box-shadow: 0 0 8px rgba(255, 51, 102, 0.3);
   }
   
   .badge.hud-badge-warning {
       color: var(--hud-warning);
       background: rgba(255, 170, 0, 0.1);
       box-shadow: 0 0 8px rgba(255, 170, 0, 0.3);
   }
   
   /* Alert System - Enhanced with Glow Blur Effects */
   .alert.hud-alert {
       background: rgba(0, 255, 255, 0.15);
       backdrop-filter: blur(15px);
       border: 2px solid var(--hud-primary);
       border-radius: 8px;
       color: #ffffff;
       padding: var(--hud-space-md) var(--hud-space-lg);
       position: relative;
       font-family: var(--hud-font-secondary);
       box-shadow: 
           0 0 20px rgba(0, 255, 255, 0.4),
           0 0 40px rgba(0, 255, 255, 0.2),
           inset 0 0 30px rgba(0, 255, 255, 0.1);
       animation: hud-alert-pulse 3s ease-in-out infinite;
   }
   
   .alert.hud-alert::before {
       content: '';
       position: absolute;
       inset: -2px;
       background: linear-gradient(45deg, transparent, var(--hud-primary), transparent);
       border-radius: 8px;
       opacity: 0.3;
       filter: blur(8px);
       z-index: -1;
   }
   
   .alert.hud-alert-primary {
       background: rgba(0, 255, 255, 0.15);
       border-color: var(--hud-primary);
       box-shadow: 
           0 0 20px rgba(0, 255, 255, 0.5),
           0 0 40px rgba(0, 255, 255, 0.3),
           inset 0 0 30px rgba(0, 255, 255, 0.1);
   }
   
   .alert.hud-alert-primary::before {
       background: linear-gradient(45deg, transparent, var(--hud-primary), transparent);
   }
   
   .alert.hud-alert-success {
       background: rgba(0, 255, 136, 0.15);
       backdrop-filter: blur(15px);
       border-color: var(--hud-success);
       box-shadow: 
           0 0 20px rgba(0, 255, 136, 0.5),
           0 0 40px rgba(0, 255, 136, 0.3),
           inset 0 0 30px rgba(0, 255, 136, 0.1);
   }
   
   .alert.hud-alert-success::before {
       background: linear-gradient(45deg, transparent, var(--hud-success), transparent);
   }
   
   .alert.hud-alert-danger {
       background: rgba(255, 51, 102, 0.15);
       backdrop-filter: blur(15px);
       border-color: var(--hud-danger);
       box-shadow: 
           0 0 20px rgba(255, 51, 102, 0.5),
           0 0 40px rgba(255, 51, 102, 0.3),
           inset 0 0 30px rgba(255, 51, 102, 0.1);
   }
   
   .alert.hud-alert-danger::before {
       background: linear-gradient(45deg, transparent, var(--hud-danger), transparent);
   }
   
   .alert.hud-alert-warning {
       background: rgba(255, 170, 0, 0.15);
       backdrop-filter: blur(15px);
       border-color: var(--hud-warning);
       box-shadow: 
           0 0 20px rgba(255, 170, 0, 0.5),
           0 0 40px rgba(255, 170, 0, 0.3),
           inset 0 0 30px rgba(255, 170, 0, 0.1);
   }
   
   .alert.hud-alert-warning::before {
       background: linear-gradient(45deg, transparent, var(--hud-warning), transparent);
   }
   
   .alert.hud-alert-info {
       background: rgba(0, 204, 255, 0.15);
       backdrop-filter: blur(15px);
       border-color: var(--hud-info);
       box-shadow: 
           0 0 20px rgba(0, 204, 255, 0.5),
           0 0 40px rgba(0, 204, 255, 0.3),
           inset 0 0 30px rgba(0, 204, 255, 0.1);
   }
   
   .alert.hud-alert-info::before {
       background: linear-gradient(45deg, transparent, var(--hud-info), transparent);
   }
   
   .alert.hud-alert-secondary {
       background: rgba(0, 255, 136, 0.15);
       backdrop-filter: blur(15px);
       border-color: var(--hud-secondary);
       box-shadow: 
           0 0 20px rgba(0, 255, 136, 0.5),
           0 0 40px rgba(0, 255, 136, 0.3),
           inset 0 0 30px rgba(0, 255, 136, 0.1);
   }
   
   .alert.hud-alert-secondary::before {
       background: linear-gradient(45deg, transparent, var(--hud-secondary), transparent);
   }
   
   @keyframes hud-alert-pulse {
       0%, 100% {
           box-shadow: 
               0 0 20px rgba(0, 255, 255, 0.4),
               0 0 40px rgba(0, 255, 255, 0.2),
               inset 0 0 30px rgba(0, 255, 255, 0.1);
       }
       50% {
           box-shadow: 
               0 0 30px rgba(0, 255, 255, 0.6),
               0 0 60px rgba(0, 255, 255, 0.3),
               inset 0 0 40px rgba(0, 255, 255, 0.15);
       }
   }
   
   /* ========================================================================
      9. MODAL & OVERLAY SYSTEM
      ======================================================================== */
   .modal.hud-modal {
       display: block;
       background-color: rgba(0, 0, 0, 0.5);
       backdrop-filter: blur(10px);
   }
   /* Modal Backdrop */
   .modal-backdrop.show {
       background-color: rgba(3, 6, 8, 0.85);
       backdrop-filter: blur(8px);
   }
   
   /* Modal Content */
   .modal-content.hud-card {
       background: var(--hud-bg-card);
       border: 2px solid var(--hud-border-color);
       border-radius: var(--hud-border-radius);
       box-shadow: var(--hud-shadow-lg);
       color: #ffffff;
       backdrop-filter: blur(10px);
   }
   
   .modal-content.hud-card .modal-header {
       border-bottom: 1px solid rgba(0, 255, 255, 0.2);
       padding: var(--hud-space-lg);
       background: linear-gradient(90deg, rgba(0, 255, 255, 0.05), rgba(255, 51, 209, 0.02));
   }
   
   .modal-content.hud-card .modal-title {
       font-family: var(--hud-font-primary);
       font-weight: 700;
       color: var(--hud-primary);
       letter-spacing: 1px;
   }
   
   .modal-content.hud-card .modal-body {
       padding: var(--hud-space-lg);
       color: rgba(255, 255, 255, 0.9);
       background: var(--hud-bg-card);
   }
   
   .modal-content.hud-card .modal-footer {
       border-top: 1px solid rgba(0, 255, 255, 0.2);
       padding: var(--hud-space-md) var(--hud-space-lg);
       background: rgba(0, 255, 255, 0.02);
   }

   .modal.modal-body {
      background: var(--hud-bg-card);
   }
   
   .modal-content.hud-card .close {
       color: rgba(255, 255, 255, 0.7);
       opacity: 1;
       transition: var(--hud-transition-base);
   }
   
   .modal-content.hud-card .close:hover {
       color: var(--hud-primary);
       text-shadow: var(--hud-glow-sm);
   }
   
   /* Loading Overlay - Enhanced Futuristic Design */
   .hud-loading-overlay {
       position: fixed;
       inset: 0;
       z-index: 9999;
       display: flex;
       align-items: center;
       justify-content: center;
       background: rgba(5, 8, 24, 0);
       backdrop-filter: blur(20px) saturate(150%);
       opacity: 0;
       pointer-events: none;
       transition: opacity 0.5s ease-in-out;
   }
   
   .hud-loading-overlay.active {
       opacity: 1;
       pointer-events: all;
   }
   
   /* Gate Animation Effect */
   .hud-gate {
       position: absolute;
       top: 0;
       width: 50%;
       height: 100%;
       background: linear-gradient(to right, 
           rgba(0, 255, 255, 0.1) 0%,
           rgba(0, 255, 255, 0.05) 50%,
           transparent 100%);
       transition: transform 0.8s cubic-bezier(0.77, 0, 0.175, 1);
       z-index: 1;
   }
   
   .hud-gate-left {
       left: 0;
       /* border-right: 2px solid rgba(0, 255, 255, 0.3); */
       box-shadow: 0 0 30px rgba(0, 255, 255, 0.2);
   }
   
   .hud-gate-right {
       right: 0;
       background: linear-gradient(to left, 
           rgba(0, 255, 255, 0.1) 0%,
           rgba(0, 255, 255, 0.05) 50%,
           transparent 100%);
       /* border-left: 2px solid rgba(0, 255, 255, 0.3); */
       box-shadow: 0 0 30px rgba(0, 255, 255, 0.2);
   }
   
   .hud-loading-overlay:not(.active) .hud-gate-left {
       transform: translateX(-100%);
   }
   
   .hud-loading-overlay:not(.active) .hud-gate-right {
       transform: translateX(100%);
   }
   
   /* Spinner Container */
   .hud-spinner-container {
       position: relative;
       z-index: 2;
       display: flex;
       flex-direction: column;
       align-items: center;
       gap: 2rem;
   }
   
   /* Advanced Spinner Design */
   .hud-spinner {
       position: relative;
       width: 150px;
       height: 150px;
       display: flex;
       align-items: center;
       justify-content: center;
   }
   
   .hud-spinner-circle {
       position: absolute;
       border-radius: 50%;
       border: 3px solid transparent;
       animation: hud-spin-orbit 2s linear infinite;
   }
   
   .hud-spinner-circle:nth-child(1) {
       width: 140px;
       height: 140px;
       border-top-color: var(--hud-primary);
       border-right-color: var(--hud-primary);
       box-shadow: 
           0 0 20px rgba(0, 255, 255, 0.5),
           inset 0 0 20px rgba(0, 255, 255, 0.2);
       animation-duration: 2s;
   }
   
   .hud-spinner-circle:nth-child(2) {
       width: 110px;
       height: 110px;
       border-bottom-color: var(--hud-secondary);
       border-left-color: var(--hud-secondary);
       box-shadow: 
           0 0 20px rgba(0, 255, 136, 0.5),
           inset 0 0 20px rgba(0, 255, 136, 0.2);
       animation-duration: 1.5s;
       animation-direction: reverse;
   }
   
   .hud-spinner-circle:nth-child(3) {
       width: 80px;
       height: 80px;
       border-top-color: var(--hud-accent);
       border-right-color: var(--hud-accent);
       box-shadow: 
           0 0 20px rgba(255, 0, 255, 0.5),
           inset 0 0 20px rgba(255, 0, 255, 0.2);
       animation-duration: 1s;
   }
   
   /* Logo in Center */
   .hud-spinner .hud-logo {
       position: relative;
       z-index: 10;
       width: 60px;
       height: 60px;
       display: flex;
       align-items: center;
       justify-content: center;
       background: rgba(0, 255, 255, 0.1);
       border: 2px solid var(--hud-primary);
       border-radius: 50%;
       box-shadow: 
           0 0 30px rgba(0, 255, 255, 0.6),
           inset 0 0 20px rgba(0, 255, 255, 0.2);
       animation: hud-logo-pulse 2s ease-in-out infinite;
   }
   
   .hud-spinner .hud-logo img {
       width: 100%;
       height: auto;
       object-fit: contain;
       filter: drop-shadow(0 0 10px rgba(0, 255, 255, 0.8));
   }
   
   /* Loading Text */
   .hud-loading-text {
       font-family: var(--hud-font-primary);
       font-size: 1.5rem;
       font-weight: 700;
       letter-spacing: 4px;
       text-transform: uppercase;
       color: var(--hud-primary);
       text-shadow: 
           0 0 10px rgba(0, 255, 255, 0.8),
           0 0 20px rgba(0, 255, 255, 0.5),
           0 0 30px rgba(0, 255, 255, 0.3);
       animation: hud-loading-text-glow 1.5s ease-in-out infinite;
       position: relative;
   }
   
   .hud-loading-text::after {
       content: '...';
       animation: hud-loading-dots 1.5s steps(4, end) infinite;
   }
   
   /* Keyframe Animations */
   @keyframes hud-spin-orbit {
       0% {
           transform: rotate(0deg);
       }
       100% {
           transform: rotate(360deg);
       }
   }
   
   @keyframes hud-logo-pulse {
       0%, 100% {
           transform: scale(1);
           box-shadow: 
               0 0 30px rgba(0, 255, 255, 0.6),
               inset 0 0 20px rgba(0, 255, 255, 0.2);
       }
       50% {
           transform: scale(1.1);
           box-shadow: 
               0 0 50px rgba(0, 255, 255, 0.9),
               inset 0 0 30px rgba(0, 255, 255, 0.4);
       }
   }
   
   @keyframes hud-loading-text-glow {
       0%, 100% {
           text-shadow: 
               0 0 10px rgba(0, 255, 255, 0.8),
               0 0 20px rgba(0, 255, 255, 0.5),
               0 0 30px rgba(0, 255, 255, 0.3);
           opacity: 1;
       }
       50% {
           text-shadow: 
               0 0 20px rgba(0, 255, 255, 1),
               0 0 40px rgba(0, 255, 255, 0.8),
               0 0 60px rgba(0, 255, 255, 0.5);
           opacity: 0.8;
       }
   }
   
   @keyframes hud-loading-dots {
       0% { content: ''; }
       25% { content: '.'; }
       50% { content: '..'; }
       75% { content: '...'; }
   }
   
   /* ========================================================================
      10. NAVIGATION & SIDEBAR SYSTEM
      ======================================================================== */
   
   /* Sidebar */
   .az-sideleft {
       background: var(--hud-bg-panel);
       backdrop-filter: blur(15px);
       border-right: 2px solid var(--hud-border-color);
       box-shadow: inset -2px 0 20px rgba(0, 255, 255, 0.1);
   }
   
   .az-sideleft-header {
       background: var(--hud-bg-base);
       border-bottom: 2px solid var(--hud-border-color);
   }
   
   .az-logo {
       background: linear-gradient(135deg, rgba(0, 255, 255, 0.15), rgba(0, 255, 136, 0.05));
       border-bottom: 1px solid var(--hud-border-color);
       font-family: var(--hud-font-primary);
       padding: var(--hud-space-lg);
   }
   
   .az-logo a {
       color: var(--hud-primary);
       text-shadow: var(--hud-glow-sm);
       text-decoration: none;
       font-weight: 700;
       letter-spacing: 2px;
   }
   
   /* Sidebar Menu */
   .sidebar-menu-collapse > .nav-item {
       border-top: 1px solid rgba(0, 255, 255, 0.1);
       position: relative;
   }

   .sidebar-menu-collapse .nav-item.active {
    background: rgba(0, 255, 255, 0.07);
    box-shadow: 0 0 16px 4px rgba(0, 255, 255, 0.15), 0 4px 30px rgba(0, 255, 255, 0.10);
    backdrop-filter: blur(10px);
   }
   
   .sidebar-menu-collapse > .nav-item > .nav-link {
       color: rgba(255, 255, 255, 0.7);
       font-family: var(--hud-font-secondary);
       text-transform: uppercase;
       letter-spacing: 0.5px;
       font-size: var(--hud-font-size-sm);
       padding: var(--hud-space-md);
       transition: var(--hud-transition-base);
       display: flex;
       align-items: center;
       gap: var(--hud-space-sm);
   }
   
   .sidebar-menu-collapse > .nav-item > .nav-link:hover {
       background: linear-gradient(90deg, rgba(0, 255, 255, 0.15), transparent);
       color: var(--hud-primary);
   }
   
   .sidebar-menu-collapse > .nav-item > .nav-link.active {
       background: linear-gradient(90deg, rgba(0, 255, 255, 0.2), transparent);
       color: var(--hud-primary);
       border-left: 3px solid var(--hud-primary);
       text-shadow: var(--hud-glow-sm);
   }
   
   /* ========================================================================
      NAV-LINK TYPING EFFECT ON HOVER - SMOOTH VERSION
      Text tetap visible, typing effect hanya saat hover
      ======================================================================== */
   
   /* Nav Link with Typing Effect - Main Menu */
   .sidebar-menu-collapse > .nav-item > .nav-link.nav-typing {
       position: relative;
       display: flex;
       align-items: flex-start;
       min-width: 0; /* Memastikan flex item bisa shrink dan wrap */
       overflow: hidden; /* Membatasi area yang terlihat agar typing animation tidak overlap dengan menu lain */
       z-index: 1; /* Membuat stacking context terisolasi untuk setiap menu item */
       isolation: isolate; /* Membuat stacking context baru agar z-index tidak overlap dengan menu lain */
   }
   
   .sidebar-menu-collapse > .nav-item > .nav-link.nav-typing > span {
       position: relative;
       display: block; /* Mengubah dari inline-block ke block agar width 100% bekerja dengan benar */
       white-space: normal; /* Mengantisipasi teks panjang agar tidak terpotong */
       word-wrap: break-word;
       word-break: break-word;
       overflow-wrap: break-word; /* Alias modern untuk word-wrap */
       width: 100%; /* Memastikan span mengambil lebar penuh parent */
       max-width: 100%; /* Memastikan tidak melebihi container */
       color: var(--hud-primary);
       z-index: 1; /* Memastikan span berada di atas elemen lain */
       overflow: hidden; /* Membatasi area span agar ::before tidak keluar */
       /* font-size: 8.5px; */
       /* Text TETAP VISIBLE - tidak hidden */
   }

   .sidebar-menu-collapse > .nav-item > .nav-link.nav-typing > span:hover {
    /* color: var(--hud-primary); */
    color: transparent;
   }

   .sidebar-menu-collapse > .nav-item > .nav-link.nav-typing i:first-child {
    margin-right: -5px;
    font-size: 15px;
   }
   
   /* Typing Overlay Effect - Muncul saat hover */
   .sidebar-menu-collapse > .nav-item > .nav-link.nav-typing > span::before {
       content: attr(data-text);
       position: absolute;
       left: 0;
       top: 0;
       color: var(--hud-primary);
       white-space: normal; /* Mengantisipasi teks panjang agar tidak terpotong */
       word-wrap: break-word;
       word-break: break-word;
       overflow-wrap: break-word; /* Alias modern untuk word-wrap */
       overflow: hidden;
       width: 0;
       height: 100%; /* Membatasi tinggi pada tinggi span */
       opacity: 0;
       max-width: 100%; /* Memastikan tidak melebihi container saat animasi */
       z-index: 2; /* Di atas teks asli (span) tapi tetap dalam stacking context parent */
       pointer-events: none; /* Mencegah interaksi dengan elemen di bawahnya */
       contain: layout style paint; /* Membatasi efek rendering pada area ini saja */
       text-shadow: 
           0 0 10px rgba(0, 255, 255, 0.8),
           0 0 20px rgba(0, 255, 255, 0.6);
   }
   
   /* Trigger typing animation on hover */
   .sidebar-menu-collapse > .nav-item > .nav-link.nav-typing:hover > span::before {
       animation: nav-typing-reveal 0.6s steps(20) forwards;
   }
   
   /* Cursor Effect - Muncul saat hover */
   .sidebar-menu-collapse > .nav-item > .nav-link.nav-typing:hover > span::after {
       content: '▊';
       position: absolute;
       right: -8px;
       color: var(--hud-primary);
       opacity: 0;
       animation: 
           nav-cursor-appear 0s 0.6s forwards,
           hud-cursor-blink 0.8s step-end 0.6s infinite;
       text-shadow: 
           0 0 10px var(--hud-primary),
           0 0 20px var(--hud-primary);
   }
   
   /* Keyframe untuk typing reveal */
   @keyframes nav-typing-reveal {
       0% {
           width: 0;
           opacity: 1;
       }
       100% {
           width: 100%;
           opacity: 1;
       }
   }
   
   /* Keyframe untuk cursor appear */
   @keyframes nav-cursor-appear {
       to {
           opacity: 1;
       }
   }
   
   /* Nav Link with Typing Effect + Extra Glow */
   .sidebar-menu-collapse > .nav-item > .nav-link.nav-typing-glow > span::before {
       text-shadow: 
           0 0 15px rgba(0, 255, 255, 1),
           0 0 30px rgba(0, 255, 255, 0.8),
           0 0 45px rgba(0, 255, 255, 0.6);
   }
   
   .sidebar-menu-collapse > .nav-item > .nav-link.nav-typing-glow:hover {
       animation: hud-title-glow-pulse 1.5s ease-in-out infinite;
   }
   
   /* Smooth Variant (Cubic Bezier instead of Steps) */
   .sidebar-menu-collapse > .nav-item > .nav-link.nav-typing-smooth:hover > span::before {
       animation: nav-typing-reveal-smooth 0.8s cubic-bezier(0.4, 0, 0.2, 1) forwards;
   }
  
   @keyframes nav-typing-reveal-smooth {
       0% {
           width: 0;
           opacity: 1;
       }
       100% {
           width: 100%;
           opacity: 1;
       }
   }
   
   /* Fast Typing Variant */
   .sidebar-menu-collapse > .nav-item > .nav-link.nav-typing-fast:hover > span::before {
       animation-duration: 0.3s;
   }
   
   .sidebar-menu-collapse > .nav-item > .nav-link.nav-typing-fast:hover > span::after {
       animation-delay: 0.3s;
   }
   
   /* Submenu Typing Effect */
   .sidebar-menu-collapse .nav-sub .nav-link.nav-typing > span::before {
       content: attr(data-text);
       position: absolute;
       left: 0;
       top: 0;
       color: var(--hud-secondary);
       white-space: nowrap;
       overflow: hidden;
       width: 0;
       opacity: 0;
       text-shadow: 
           0 0 10px rgba(0, 255, 136, 0.8),
           0 0 20px rgba(0, 255, 136, 0.6);
   }
   
   .sidebar-menu-collapse .nav-sub .nav-link.nav-typing:hover > span::before {
       animation: nav-typing-reveal 0.5s steps(15) forwards;
   }
   
   .sidebar-menu-collapse .nav-sub .nav-link.nav-typing:hover > span::after {
       content: '▊';
       position: absolute;
       right: -8px;
       color: var(--hud-secondary);
       opacity: 0;
       font-size: 0.9em;
       animation: 
           nav-cursor-appear 0s 0.5s forwards,
           hud-cursor-blink 0.8s step-end 0.5s infinite;
   }
   
   .sidebar-menu-collapse > .nav-item > .nav-link i {
       color: var(--hud-primary);
       font-size: 1.2em;
   }
   
   /* Submenu */
   .sidebar-menu-collapse .nav-sub {
       background: linear-gradient(90deg, rgba(0, 255, 255, 0.08), transparent);
       border-top: 1px solid rgba(0, 255, 255, 0.1);
       padding-left: var(--hud-space-lg);
   }
   
   .sidebar-menu-collapse .nav-sub .nav-link {
       color: rgba(255, 255, 255, 0.6);
       font-size: var(--hud-font-size-sm);
       padding: var(--hud-space-sm) var(--hud-space-md);
       transition: var(--hud-transition-base);
   }
   
   .sidebar-menu-collapse .nav-sub .nav-link:hover {
       color: var(--hud-primary);
       background: rgba(0, 255, 255, 0.05);
   }
   
   .sidebar-menu-collapse .nav-sub .nav-link.active {
       color: var(--hud-secondary);
       border-left: 2px solid var(--hud-secondary);
   }
   
   /* ========================================================================
      MULTI-LEVEL SUBMENU SYSTEM - Enhanced Futuristic Design
      ======================================================================== */
   
   /* Level 1 - First Level Submenu (sudah ada di atas, ini untuk override jika perlu) */
   .sidebar-menu-collapse .nav-sub {
       position: relative;
   }
   
   .sidebar-menu-collapse .nav-sub::before {
       content: '';
       position: absolute;
       left: 0;
       top: 0;
       bottom: 0;
       width: 2px;
       background: linear-gradient(
           180deg,
           transparent,
           rgba(0, 255, 255, 0.3) 20%,
           rgba(0, 255, 136, 0.3) 80%,
           transparent
       );
   }
   
   /* Level 2 - Second Level Submenu (Child of Submenu) */
   .sidebar-menu-collapse .nav-sub .nav-sub {
       background: linear-gradient(90deg, rgba(0, 255, 136, 0.06), transparent);
       border-top: 1px solid rgba(0, 255, 136, 0.1);
       border-left: 2px solid rgba(0, 255, 136, 0.2);
       padding-left: calc(var(--hud-space-lg) + 0.5rem);
       margin-left: var(--hud-space-sm);
       position: relative;
   }
   
   .sidebar-menu-collapse .nav-sub .nav-sub::before {
       background: linear-gradient(
           180deg,
           transparent,
           rgba(0, 255, 136, 0.4) 20%,
           rgba(255, 0, 255, 0.3) 80%,
           transparent
       );
   }
   
   .sidebar-menu-collapse .nav-sub .nav-sub .nav-link {
       color: rgba(255, 255, 255, 0.55);
       font-size: calc(var(--hud-font-size-sm) - 1px);
       padding: calc(var(--hud-space-sm) - 2px) var(--hud-space-md);
       position: relative;
   }
   
   .sidebar-menu-collapse .nav-sub .nav-sub .nav-link::before {
       content: '▸';
       position: absolute;
       left: -12px;
       color: var(--hud-secondary);
       font-size: 0.7em;
       opacity: 0.5;
       transition: var(--hud-transition-base);
   }
   
   .sidebar-menu-collapse .nav-sub .nav-sub .nav-link:hover::before {
       left: -10px;
       opacity: 1;
       color: var(--hud-primary);
   }
   
   .sidebar-menu-collapse .nav-sub .nav-sub .nav-link:hover {
       color: var(--hud-secondary);
       background: linear-gradient(90deg, rgba(0, 255, 136, 0.1), transparent);
       padding-left: calc(var(--hud-space-md) + 4px);
   }
   
   .sidebar-menu-collapse .nav-sub .nav-sub .nav-link.active {
       color: var(--hud-accent);
       border-left: 2px solid var(--hud-accent);
       background: linear-gradient(90deg, rgba(255, 0, 255, 0.1), transparent);
       box-shadow: inset 0 0 15px rgba(255, 0, 255, 0.1);
   }
   
   /* Level 3 - Third Level Submenu (Child of Level 2) */
   .sidebar-menu-collapse .nav-sub .nav-sub .nav-sub {
       background: linear-gradient(90deg, rgba(255, 0, 255, 0.05), transparent);
       border-top: 1px solid rgba(255, 0, 255, 0.1);
       border-left: 2px solid rgba(255, 0, 255, 0.2);
       padding-left: calc(var(--hud-space-lg) + 0.75rem);
       margin-left: var(--hud-space-sm);
   }
   
   .sidebar-menu-collapse .nav-sub .nav-sub .nav-sub::before {
       background: linear-gradient(
           180deg,
           transparent,
           rgba(255, 0, 255, 0.4) 20%,
           rgba(255, 170, 0, 0.3) 80%,
           transparent
       );
   }
   
   .sidebar-menu-collapse .nav-sub .nav-sub .nav-sub .nav-link {
       color: rgba(255, 255, 255, 0.5);
       font-size: calc(var(--hud-font-size-sm) - 2px);
       padding: calc(var(--hud-space-sm) - 3px) calc(var(--hud-space-md) - 2px);
   }
   
   .sidebar-menu-collapse .nav-sub .nav-sub .nav-sub .nav-link::before {
       content: '◦';
       left: -10px;
       color: var(--hud-accent);
       font-size: 0.8em;
   }
   
   .sidebar-menu-collapse .nav-sub .nav-sub .nav-sub .nav-link:hover {
       color: var(--hud-warning);
       background: linear-gradient(90deg, rgba(255, 170, 0, 0.08), transparent);
   }
   
   .sidebar-menu-collapse .nav-sub .nav-sub .nav-sub .nav-link.active {
       color: var(--hud-warning);
       border-left: 2px solid var(--hud-warning);
       background: linear-gradient(90deg, rgba(255, 170, 0, 0.12), transparent);
       box-shadow: inset 0 0 15px rgba(255, 170, 0, 0.1);
   }
   
   /* Icon Indicators for Menu with Children */
   .sidebar-menu-collapse .nav-link.with-sub::after {
       content: '▾';
       margin-left: auto;
       font-size: 0.9em;
       transition: transform var(--hud-transition-base);
       color: var(--hud-primary);
   }

  .sidebar-menu-collapse > .nav-item > .nav-link.with-sub::after {
    content: "\27A4";
    font-family: 'Ionicons';
    position: absolute;
    font-size: 15px;
    top: 7px;
    right: 15px;
    color: var(--hud-primary);
  }
   
   /* Rotate arrow when submenu is visible (using :visible dari jQuery) */
   .sidebar-menu-collapse .nav-link.with-sub.active::after {
       transform: rotate(90deg);
   }
   
   /* Level Indicator Badges */
   .sidebar-menu-collapse .nav-sub .nav-link.level-indicator {
       position: relative;
   }
   
   .sidebar-menu-collapse .nav-sub .nav-link.level-indicator::after {
       content: '';
       position: absolute;
       right: 10px;
       font-size: 0.65em;
       padding: 2px 6px;
       background: rgba(0, 255, 255, 0.2);
       border: 1px solid rgba(0, 255, 255, 0.4);
       border-radius: 3px;
       color: var(--hud-primary);
       font-family: var(--hud-font-mono);
   }
   
   .sidebar-menu-collapse .nav-sub .nav-sub .nav-link.level-indicator::after {
       content: '';
       background: rgba(0, 255, 136, 0.2);
       border-color: rgba(0, 255, 136, 0.4);
       color: var(--hud-secondary);
   }
   
   .sidebar-menu-collapse .nav-sub .nav-sub .nav-sub .nav-link.level-indicator::after {
       content: '';
       background: rgba(255, 0, 255, 0.2);
       border-color: rgba(255, 0, 255, 0.4);
       color: var(--hud-accent);
   }
   
   /* Hover Glow Effects for Multi-Level */
   .sidebar-menu-collapse .nav-sub .nav-link:hover {
       box-shadow: inset 0 0 15px rgba(0, 255, 255, 0.08);
   }
   
   .sidebar-menu-collapse .nav-sub .nav-sub .nav-link:hover {
       box-shadow: inset 0 0 15px rgba(0, 255, 136, 0.08);
   }
   
   .sidebar-menu-collapse .nav-sub .nav-sub .nav-sub .nav-link:hover {
       box-shadow: inset 0 0 15px rgba(255, 0, 255, 0.08);
   }
   
   /* Sidebar Label Styling untuk Multi-Level */
   .az-sidebar-label {
       color: var(--hud-primary);
       font-family: var(--hud-font-primary);
       font-size: var(--hud-font-size-xs);
       text-transform: uppercase;
       letter-spacing: 2px;
       padding: var(--hud-space-md) var(--hud-space-lg);
       border-top: 1px solid rgba(0, 255, 255, 0.2);
       border-bottom: 1px solid rgba(0, 255, 255, 0.1);
       background: linear-gradient(90deg, rgba(0, 255, 255, 0.05), transparent);
       display: block;
       font-weight: 700;
   }
   
   .az-sidebar-label:first-child {
       margin-top: 0;
       border-top: none;
   }
   
   /* Header Panel */
   .az-headpanel {
       background: linear-gradient(135deg, var(--hud-bg-base), var(--hud-bg-elevated));
       border-bottom: 2px solid var(--hud-border-color);
       box-shadow: 0 4px 20px rgba(0, 255, 255, 0.2);
   }

  .az-headpanel-right .user-profile-nav {
    margin: 0;
  }
  .az-headpanel-right .user-profile-nav a {
      display: flex;
      align-items: center;
      padding: 0 10px;
      height: 36px;
      color:var(--hud-primary);
      font-size: 13px;
      transition: all 0.2s ease-in-out;
  }
  .az-headpanel-right .user-profile-nav a:hover,
  .az-headpanel-right .user-profile-nav a:focus {
      color: var(--hud-secondary);
      background-color: var(--hud-bg-card);
  }
   
   /* Breadcrumb */
   .az-breadcrumb {
       background: linear-gradient(135deg, rgba(0, 255, 255, 0.1), rgba(0, 255, 136, 0.05));
       border-bottom: 2px solid var(--hud-border-color);
       padding: var(--hud-space-md) var(--hud-space-lg);
   }
   
   .az-breadcrumb .breadcrumb {
       font-family: var(--hud-font-secondary);
       text-transform: uppercase;
       letter-spacing: 0.5px;
       font-size: var(--hud-font-size-sm);
   }
   
   .az-breadcrumb .breadcrumb-item {
       color: rgba(255, 255, 255, 0.7);
   }
   
   .az-breadcrumb .breadcrumb-item.active {
       color: var(--hud-primary);
   }
   
   .az-breadcrumb .breadcrumb-item + .breadcrumb-item::before {
       content: '\27A3';
       color: var(--hud-border-color);
   }
   
   /* Page Title */
   .az-pagetitle {
       background: linear-gradient(135deg, rgba(0, 255, 255, 0.12), rgba(0, 255, 136, 0.05));
       border-bottom: 2px solid var(--hud-border-color);
       border-left: 3px solid var(--hud-primary);
       padding: var(--hud-space-md) var(--hud-space-lg);
   }
   
   .az-pagetitle h5 {
       color: var(--hud-primary);
       font-family: var(--hud-font-primary);
       text-transform: uppercase;
       letter-spacing: 2px;
       text-shadow: var(--hud-glow-sm);
       margin: 0;
   }
   
   /* Footer */
   .az-footer {
       background: var(--hud-bg-base);
       color: rgba(255, 255, 255, 0.7);
       font-family: var(--hud-font-mono);
       font-size: var(--hud-font-size-sm);
       border-top: 2px solid var(--hud-border-color);
       padding: var(--hud-space-lg);
       text-align: center;
   }
   
   /* ========================================================================
      11. UTILITY CLASSES
      ======================================================================== */
   
   /* Backgrounds */
   .hud-bg-dark { background-color: var(--hud-bg-base); }
   .hud-bg-panel { background-color: var(--hud-bg-panel); }
   .hud-bg-card { background-color: var(--hud-bg-card); }
   
   /* Borders */
   .hud-border { border: var(--hud-border-width) solid var(--hud-border-color); }
   .hud-border-top { border-top: var(--hud-border-width) solid var(--hud-border-color); }
   .hud-border-bottom { border-bottom: var(--hud-border-width) solid var(--hud-border-color); }
   .hud-border-left { border-left: var(--hud-border-width) solid var(--hud-border-color); }
   .hud-border-right { border-right: var(--hud-border-width) solid var(--hud-border-color); }
   
   /* Shadows & Glows */
   .hud-shadow-sm { box-shadow: var(--hud-shadow-sm); }
   .hud-shadow-md { box-shadow: var(--hud-shadow-md); }
   .hud-shadow-lg { box-shadow: var(--hud-shadow-lg); }
   .hud-glow { box-shadow: var(--hud-glow-md); }
   .hud-glow-strong { box-shadow: var(--hud-glow-lg); }
   
   /* Text Colors */
   .hud-text-primary { color: var(--hud-primary); }
   .hud-text-secondary { color: var(--hud-secondary); }
   .hud-text-success { color: var(--hud-success); }
   .hud-text-danger { color: var(--hud-danger); }
   .hud-text-warning { color: var(--hud-warning); }
   .hud-text-info { color: var(--hud-info); }
   
   /* Spacing */
   .hud-p-xs { padding: var(--hud-space-xs); }
   .hud-p-sm { padding: var(--hud-space-sm); }
   .hud-p-md { padding: var(--hud-space-md); }
   .hud-p-lg { padding: var(--hud-space-lg); }
   .hud-p-xl { padding: var(--hud-space-xl); }
   
   .hud-m-xs { margin: var(--hud-space-xs); }
   .hud-m-sm { margin: var(--hud-space-sm); }
   .hud-m-md { margin: var(--hud-space-md); }
   .hud-m-lg { margin: var(--hud-space-lg); }
   .hud-m-xl { margin: var(--hud-space-xl); }
   
   /* ========================================================================
      12. ANIMATIONS & KEYFRAMES
      ======================================================================== */
   
   /* ========================================================================
      TYPING ANIMATION EFFECTS - FUTURISTIC
      ======================================================================== */
   
   /* Typing Effect - Reveals text character by character */
   @keyframes hud-typing {
       0% {
           width: 0;
           opacity: 0;
       }
       1% {
           opacity: 1;
       }
       100% {
           width: 100%;
           opacity: 1;
       }
   }
   
   /* Cursor Blink Effect - Terminal style cursor */
   @keyframes hud-cursor-blink {
       0%, 49% {
           opacity: 1;
       }
       50%, 100% {
           opacity: 0;
       }
   }
   
   /* Title Glow Pulse - Pulsating glow effect */
   @keyframes hud-title-glow-pulse {
       0%, 100% {
           text-shadow: 
               0 0 10px rgba(0, 255, 255, 0.8),
               0 0 20px rgba(0, 255, 255, 0.6),
               0 0 30px rgba(0, 255, 255, 0.4),
               0 0 40px rgba(0, 255, 255, 0.2);
           filter: brightness(1);
       }
       50% {
           text-shadow: 
               0 0 15px rgba(0, 255, 255, 1),
               0 0 30px rgba(0, 255, 255, 0.8),
               0 0 45px rgba(0, 255, 255, 0.6),
               0 0 60px rgba(0, 255, 255, 0.4),
               0 0 75px rgba(0, 255, 255, 0.2);
           filter: brightness(1.2);
       }
   }
   
   /* Holographic Shimmer - Subtle hologram effect */
   @keyframes hud-holographic-shimmer {
       0%, 100% {
           text-shadow: 
               0 0 10px rgba(0, 255, 255, 0.8),
               0 0 20px rgba(0, 255, 255, 0.6),
               0 0 30px rgba(0, 255, 255, 0.4),
               2px 2px 0 rgba(255, 0, 255, 0.1);
       }
       25% {
           text-shadow: 
               0 0 10px rgba(0, 255, 255, 0.8),
               0 0 20px rgba(0, 255, 255, 0.6),
               0 0 30px rgba(0, 255, 255, 0.4),
               -2px 2px 0 rgba(0, 255, 136, 0.1);
       }
       50% {
           text-shadow: 
               0 0 10px rgba(0, 255, 255, 0.8),
               0 0 20px rgba(0, 255, 255, 0.6),
               0 0 30px rgba(0, 255, 255, 0.4),
               2px -2px 0 rgba(255, 170, 0, 0.1);
       }
       75% {
           text-shadow: 
               0 0 10px rgba(0, 255, 255, 0.8),
               0 0 20px rgba(0, 255, 255, 0.6),
               0 0 30px rgba(0, 255, 255, 0.4),
               -2px -2px 0 rgba(255, 51, 102, 0.1);
       }
   }
   
   /* Glitch Effect - For special emphasis (optional) */
   @keyframes hud-title-glitch {
       0%, 90%, 100% {
           transform: translate(0);
           opacity: 1;
       }
       91% {
           transform: translate(-2px, 1px);
           opacity: 0.9;
       }
       92% {
           transform: translate(2px, -1px);
           opacity: 0.95;
       }
       93% {
           transform: translate(-1px, 2px);
           opacity: 0.9;
       }
       94% {
           transform: translate(1px, -2px);
           opacity: 0.95;
       }
   }
   
   /* Data Stream Effect - Numbers/characters flowing */
   @keyframes hud-data-stream {
       0% {
           transform: translateY(-100%);
           opacity: 0;
       }
       10% {
           opacity: 1;
       }
       90% {
           opacity: 1;
       }
       100% {
           transform: translateY(100%);
           opacity: 0;
       }
   }
   
   /* ========================================================================
      STANDARD ANIMATIONS
      ======================================================================== */
   
   /* Pulse Animation */
   .hud-pulse {
       animation: hud-pulse 2s ease-in-out infinite;
   }
   
   @keyframes hud-pulse {
       0%, 100% {
           opacity: 1;
           transform: scale(1);
       }
       50% {
           opacity: 0.7;
           transform: scale(0.98);
       }
   }
   
   /* Glow Animation */
   .hud-glow-animate {
       animation: hud-glow-pulse 2s ease-in-out infinite;
   }
   
   @keyframes hud-glow-pulse {
       0%, 100% {
           box-shadow: var(--hud-glow-sm);
       }
       50% {
           box-shadow: var(--hud-glow-lg);
       }
   }
   
   /* Moving Glow Animations - NEW */
   .hud-glow-moving {
       position: relative;
       overflow: hidden;
   }
   
   .hud-glow-moving::before {
       content: '';
       position: absolute;
       top: -50%;
       left: -50%;
       width: 200%;
       height: 200%;
       background: conic-gradient(
           from 0deg,
           transparent,
           var(--hud-primary),
           transparent,
           var(--hud-secondary),
           transparent,
           var(--hud-accent),
           transparent
       );
       animation: hud-rotating-glow 4s linear infinite;
       z-index: -1;
       border-radius: inherit;
       filter: blur(20px);
       opacity: 0.6;
   }
   
   @keyframes hud-rotating-glow {
       0% {
           transform: rotate(0deg);
       }
       100% {
           transform: rotate(360deg);
       }
   }
   
   /* Scanning Glow Effect */
   .hud-glow-scan {
       position: relative;
       overflow: hidden;
   }
   
   .hud-glow-scan::after {
       content: '';
       position: absolute;
       top: 0;
       left: -100%;
       width: 100%;
       height: 100%;
       background: linear-gradient(
           90deg,
           transparent,
           rgba(0, 255, 255, 0.4),
           rgba(0, 255, 255, 0.8),
           rgba(0, 255, 255, 0.4),
           transparent
       );
       animation: hud-scan-glow 3s ease-in-out infinite;
       z-index: 1;
       pointer-events: none;
   }
   
   @keyframes hud-scan-glow {
       0% {
           left: -100%;
           opacity: 0;
       }
       10% {
           opacity: 1;
       }
       90% {
           opacity: 1;
       }
       100% {
           left: 100%;
           opacity: 0;
       }
   }
   
   /* Breathing Glow Effect */
   .hud-glow-breathe {
       animation: hud-breathe-glow 3s ease-in-out infinite;
   }
   
   @keyframes hud-breathe-glow {
       0%, 100% {
           box-shadow: 
               0 0 10px rgba(0, 255, 255, 0.3),
               0 0 20px rgba(0, 255, 255, 0.2),
               0 0 30px rgba(0, 255, 255, 0.1);
           filter: brightness(1);
       }
       50% {
           box-shadow: 
               0 0 20px rgba(0, 255, 255, 0.8),
               0 0 40px rgba(0, 255, 255, 0.6),
               0 0 60px rgba(0, 255, 255, 0.4),
               0 0 80px rgba(0, 255, 255, 0.2);
           filter: brightness(1.2);
       }
   }
   
   /* Orbit Glow Effect */
   .hud-glow-orbit {
       position: relative;
   }
   
   .hud-glow-orbit::before {
       content: '';
       position: absolute;
       top: -10px;
       left: -10px;
       right: -10px;
       bottom: -10px;
       border: 2px solid transparent;
       border-top-color: var(--hud-primary);
       border-right-color: var(--hud-secondary);
       border-radius: inherit;
       animation: hud-orbit-glow 2s linear infinite;
       z-index: -1;
       filter: blur(3px);
   }
   
   .hud-glow-orbit::after {
       content: '';
       position: absolute;
       top: -15px;
       left: -15px;
       right: -15px;
       bottom: -15px;
       border: 1px solid transparent;
       border-bottom-color: var(--hud-accent);
       border-left-color: var(--hud-warning);
       border-radius: inherit;
       animation: hud-orbit-glow 3s linear infinite reverse;
       z-index: -1;
       filter: blur(5px);
   }
   
   @keyframes hud-orbit-glow {
       0% {
           transform: rotate(0deg);
       }
       100% {
           transform: rotate(360deg);
       }
   }
   
   /* Wave Glow Effect */
   .hud-glow-wave {
       position: relative;
       overflow: hidden;
   }
   
   .hud-glow-wave::before {
       content: '';
       position: absolute;
       top: 0;
       left: 0;
       right: 0;
       bottom: 0;
       background: linear-gradient(
           45deg,
           transparent 30%,
           rgba(0, 255, 255, 0.1) 50%,
           transparent 70%
       );
       animation: hud-wave-glow 2s ease-in-out infinite;
       z-index: -1;
   }
   
   @keyframes hud-wave-glow {
       0%, 100% {
           transform: translateX(-100%) translateY(-100%);
           opacity: 0;
       }
       50% {
           transform: translateX(100%) translateY(100%);
           opacity: 1;
       }
   }
   
   /* Pulsing Border Glow */
   .hud-glow-border {
       position: relative;
       border: 2px solid var(--hud-primary);
   }
   
   .hud-glow-border::before {
       content: '';
       position: absolute;
       top: -4px;
       left: -4px;
       right: -4px;
       bottom: -4px;
       border: 2px solid var(--hud-primary);
       border-radius: inherit;
       animation: hud-border-glow 2s ease-in-out infinite;
       z-index: -1;
   }
   
   @keyframes hud-border-glow {
       0%, 100% {
           opacity: 0.3;
           transform: scale(1);
           filter: blur(0px);
       }
       50% {
           opacity: 0.8;
           transform: scale(1.05);
           filter: blur(2px);
       }
   }
   
   /* Neon Text Glow Animation */
   .hud-text-neon {
       color: var(--hud-primary);
       text-shadow: 
           0 0 5px var(--hud-primary),
           0 0 10px var(--hud-primary),
           0 0 15px var(--hud-primary);
       animation: hud-neon-flicker 1.5s ease-in-out infinite alternate;
   }
   
   @keyframes hud-neon-flicker {
       0%, 18%, 22%, 25%, 53%, 57%, 100% {
           text-shadow: 
               0 0 5px var(--hud-primary),
               0 0 10px var(--hud-primary),
               0 0 15px var(--hud-primary),
               0 0 20px var(--hud-primary);
       }
       20%, 24%, 55% {
           text-shadow: 
               0 0 2px var(--hud-primary),
               0 0 5px var(--hud-primary);
       }
   }
   
   /* Hologram Effect */
   .hud-hologram {
       position: relative;
       background: linear-gradient(
           135deg,
           rgba(0, 255, 255, 0.1),
           rgba(0, 255, 136, 0.05)
       );
       animation: hud-hologram-flicker 0.15s linear infinite;
   }
   
   .hud-hologram::before {
       content: '';
       position: absolute;
       top: 0;
       left: 0;
       right: 0;
       bottom: 0;
       background: repeating-linear-gradient(
           90deg,
           transparent,
           transparent 2px,
           rgba(0, 255, 255, 0.03) 2px,
           rgba(0, 255, 255, 0.03) 4px
       );
       pointer-events: none;
       z-index: 1;
   }
   
   @keyframes hud-hologram-flicker {
       0%, 100% {
           opacity: 1;
       }
       50% {
           opacity: 0.98;
       }
   }
   
   /* Energy Flow Effect */
   .hud-energy-flow {
       position: relative;
       overflow: hidden;
   }
   
   .hud-energy-flow::after {
       content: '';
       position: absolute;
       top: 0;
       left: -100%;
       width: 100%;
       height: 100%;
       background: linear-gradient(
           90deg,
           transparent,
           rgba(0, 255, 255, 0.2),
           rgba(0, 255, 136, 0.3),
           rgba(255, 0, 255, 0.2),
           transparent
       );
       animation: hud-energy-flow 2s linear infinite;
       z-index: 1;
       pointer-events: none;
   }
   
   @keyframes hud-energy-flow {
       0% {
           left: -100%;
       }
       100% {
           left: 100%;
       }
   }
   
   /* Utility Classes for Easy Application */
   .hud-glow-slow { animation-duration: 4s; }
   .hud-glow-fast { animation-duration: 1s; }
   .hud-glow-delay-1 { animation-delay: 0.5s; }
   .hud-glow-delay-2 { animation-delay: 1s; }
   .hud-glow-delay-3 { animation-delay: 1.5s; }

   /* Fade In */
   .hud-fade-in {
       animation: hud-fade-in 0.5s ease-in-out;
   }
   
   @keyframes hud-fade-in {
       from {
           opacity: 0;
           transform: translateY(10px);
       }
       to {
           opacity: 1;
           transform: translateY(0);
       }
   }
   
   /* Slide In */
   .hud-slide-in-right {
       animation: hud-slide-in-right 0.3s ease-out;
   }
   
   @keyframes hud-slide-in-right {
       from {
           opacity: 0;
           transform: translateX(20px);
       }
       to {
           opacity: 1;
           transform: translateX(0);
       }
   }
   
   /* ========================================================================
      13. RESPONSIVE DESIGN
      ======================================================================== */
   
   @media (max-width: 768px) {
       h1 { font-size: 2rem; }
       h2 { font-size: 1.75rem; }
       h3 { font-size: 1.5rem; }
       h4 { font-size: 1.25rem; }
       h5 { font-size: 1.1rem; }
       h6 { font-size: 1rem; }
       
       .btn-hud-primary,
       .btn-hud-secondary,
       .btn-hud-success,
       .btn-hud-danger,
       .btn-hud-warning,
       .btn-hud-info {
           padding: 0.5rem 1rem;
           font-size: var(--hud-font-size-xs);
       }
       
       .pagination .page-link {
           min-width: 35px;
           height: 35px;
           font-size: var(--hud-font-size-xs);
       }
       
       .modal-dialog {
           margin: 1rem;
       }
   }
   
   @media (max-width: 576px) {
       .card.hud-card .card-body,
       .modal-content.hud-card .modal-body {
           padding: var(--hud-space-md);
       }
       
       .table.hud-table {
           font-size: var(--hud-font-size-sm);
       }
       
       .sidebar-menu-collapse > .nav-item > .nav-link {
           font-size: var(--hud-font-size-xs);
       }
   }
   
   /* ========================================================================
      14. SCROLLBAR STYLING
      ======================================================================== */
   
   .az-sideleft::-webkit-scrollbar,
   .modal-body::-webkit-scrollbar,
   textarea::-webkit-scrollbar {
       width: 8px;
       height: 8px;
   }
   
   .az-sideleft::-webkit-scrollbar-track,
   .modal-body::-webkit-scrollbar-track,
   textarea::-webkit-scrollbar-track {
       background: rgba(0, 255, 255, 0.05);
   }
   
   .az-sideleft::-webkit-scrollbar-thumb,
   .modal-body::-webkit-scrollbar-thumb,
   textarea::-webkit-scrollbar-thumb {
       background: linear-gradient(180deg, var(--hud-primary), var(--hud-secondary));
       border-radius: 4px;
       box-shadow: var(--hud-glow-sm);
   }
   
   .az-sideleft::-webkit-scrollbar-thumb:hover,
   .modal-body::-webkit-scrollbar-thumb:hover,
   textarea::-webkit-scrollbar-thumb:hover {
       background: linear-gradient(180deg, var(--hud-secondary), var(--hud-primary));
   }
   
   /* ========================================================================
      15. PRINT STYLES
      ======================================================================== */
   
   @media print {
       body.hud-theme {
           background: white;
           color: black;
       }
       
       .az-sideleft,
       .az-headpanel,
       .az-footer,
       .btn-hud-primary,
       .btn-hud-secondary {
           display: none;
       }
       
       .card.hud-card {
           border: 1px solid #ccc;
           box-shadow: none;
       }
   }

   .select2-container--default .select2-selection--single .select2-selection__rendered {
       color: var(--hud-primary);
   }

   .select2-container--default .select2-selection--single .select2-selection__arrow {
       color: var(--hud-primary);
   }
   
   .select2-container--default .select2-selection--single .select2-selection__placeholder {
       color: var(--hud-primary);
   }

   .select2-container--default .select2-selection--single .select2-selection__clear {
       color: var(--hud-primary);
   }
   
   .select2-container--default .select2-selection--single .select2-selection__arrow b {
       border-color: var(--hud-primary) transparent transparent transparent;
   }
   
   
   .select2-container--default .select2-selection--single .select2-selection__arrow b {
       border-color: var(--hud-primary) transparent transparent transparent;
   } 
  
  /* ========================================================================
     15. SELECT2 PLUGIN STYLING
     ======================================================================== */
  
  /* Select2 Container Base */

  .select2-dropdown {
    background-color: var(--hud-bg-elevated);
  }

  .select2-container {
      width: 100% !important;
      font-family: var(--hud-font-secondary);
  }
  
  /* Select2 Selection (Main Input Area) */
  .select2-container--default .select2-selection--single,
  .select2-container--default .select2-selection--multiple {
      background: var(--hud-bg-input);
      border: var(--hud-border-width) solid rgba(0, 255, 255, 0.3);
      border-radius: var(--hud-border-radius);
      min-height: 42px;
      padding: 0.3rem 0.5rem;
      transition: var(--hud-transition-base);
  }
  
  .select2-container--default .select2-selection--single {
      height: 42px;
      display: flex;
      align-items: center;
  }
  
  /* Select2 Arrow */
  .select2-container--default .select2-selection--single .select2-selection__arrow {
      height: 40px;
      right: 8px;
      top: 1px;
  }
  
  .select2-container--default .select2-selection--single .select2-selection__arrow b {
      border-color: var(--hud-primary) transparent transparent transparent;
      border-width: 6px 6px 0 6px;
      margin-left: -6px;
      margin-top: -3px;
  }
  
  .select2-container--default.select2-container--open .select2-selection--single .select2-selection__arrow b {
      border-color: transparent transparent var(--hud-primary) transparent;
      border-width: 0 6px 6px 6px;
  }
  
  /* Select2 Rendered Text */
  .select2-container--default .select2-selection--single .select2-selection__rendered {
      color: #ffffff;
      line-height: 40px;
      padding-left: 12px;
      padding-right: 30px;
      font-size: var(--hud-font-size-base);
      display: flex;
    flex-direction: row;
    flex-wrap: nowrap;
    align-content: center;
    justify-content: center;
    align-items: center;
  }
  
  .select2-container--default .select2-selection--multiple .select2-selection__rendered {
      padding: 0.2rem 0.5rem;
      display: flex;
      flex-wrap: wrap;
      gap: 0.3rem;
  }
  
  /* Select2 Placeholder */
  .select2-container--default .select2-selection--single .select2-selection__placeholder,
  .select2-container--default .select2-selection--multiple .select2-selection__placeholder {
      color: rgba(0, 255, 255, 0.4);
      font-style: italic;
  }
  
  /* Select2 Hover State */
  .select2-container--default .select2-selection--single:hover,
  .select2-container--default .select2-selection--multiple:hover {
      border-color: rgba(0, 255, 255, 0.5);
  }
  
  /* Select2 Focus/Open State */
  .select2-container--default.select2-container--open .select2-selection--single,
  .select2-container--default.select2-container--open .select2-selection--multiple,
  .select2-container--default.select2-container--focus .select2-selection--single,
  .select2-container--default.select2-container--focus .select2-selection--multiple {
      background: rgba(0, 255, 255, 0.1);
      border-color: var(--hud-primary);
      box-shadow: var(--hud-glow-sm), inset 0 0 15px rgba(0, 255, 255, 0.1);
      outline: none;
  }
  
  /* Select2 Dropdown */

  .select2-container--open .select2-dropdown--below {
    background-color: var(--hud-bg-elevated);
  }

  .select2-dropdown {
      background-color: var(--hud-bg-elevated);
      border: var(--hud-border-width) solid var(--hud-primary);
      border-radius: var(--hud-border-radius);
      box-shadow: var(--hud-shadow-lg);
      margin-top: 4px;
      z-index: var(--hud-z-dropdown);
  }
  
  /* Select2 Search Input */
  .select2-container--default .select2-search--dropdown .select2-search__field {
      background: var(--hud-bg-input);
      border: var(--hud-border-width) solid rgba(0, 255, 255, 0.3);
      border-radius: var(--hud-border-radius);
      color: #ffffff;
      padding: 0.5rem 0.75rem;
      font-family: var(--hud-font-secondary);
      font-size: var(--hud-font-size-base);
      margin: 0.5rem;
      width: calc(100% - 1rem);
  }
  
  .select2-container--default .select2-search--dropdown .select2-search__field:focus {
      background: rgba(0, 255, 255, 0.1);
      border-color: var(--hud-primary);
      box-shadow: var(--hud-glow-sm);
      outline: none;
  }
  
  .select2-container--default .select2-search--dropdown .select2-search__field::placeholder {
      color: rgba(0, 255, 255, 0.4);
      font-style: italic;
  }
  
  /* Select2 Results Container */
  .select2-results {
      max-height: 300px;
      overflow-y: auto;
  }
  
  .select2-results__options {
      padding: 0.25rem 0;
  }
  
  /* Select2 Result Items */
  .select2-results__option {
      padding: 0.6rem 1rem;
      color: #ffffff;
      font-size: var(--hud-font-size-base);
      transition: var(--hud-transition-fast);
      cursor: pointer;
      border-left: 3px solid transparent;
  }
  
  .select2-results__option:hover,
  .select2-results__option--highlighted {
      background: rgba(0, 255, 255, 0.15);
      border-left-color: var(--hud-primary);
      color: var(--hud-primary);
  }
  
  .select2-results__option[aria-selected="true"] {
      background: rgba(0, 255, 255, 0.1);
      border-left-color: var(--hud-secondary);
      color: var(--hud-secondary);
      position: relative;
  }
  
  .select2-results__option[aria-selected="true"]::before {
      content: "✓";
      position: absolute;
      right: 1rem;
      font-weight: bold;
      color: var(--hud-secondary);
  }
  
  /* Select2 No Results Message */
  .select2-results__option--no-results {
      color: rgba(255, 255, 255, 0.5);
      padding: 1rem;
      text-align: center;
      font-style: italic;
  }
  
  /* Select2 Loading State */
  .select2-results__option--loading {
      color: var(--hud-primary);
      text-align: center;
      padding: 1rem;
  }
  
  /* Select2 Multiple Selection Tags */
  .select2-container--default .select2-selection--multiple .select2-selection__choice {
      background: rgba(0, 255, 255, 0.15);
      border: var(--hud-border-width) solid rgba(0, 255, 255, 0.4);
      border-radius: var(--hud-border-radius);
      color: var(--hud-primary);
      padding: 0.3rem 0.6rem;
      margin: 0.1rem 0.2rem;
      display: inline-flex;
      align-items: center;
      font-size: var(--hud-font-size-sm);
      transition: var(--hud-transition-fast);
  }
  
  .select2-container--default .select2-selection--multiple .select2-selection__choice:hover {
      background: rgba(0, 255, 255, 0.25);
      border-color: var(--hud-primary);
      box-shadow: var(--hud-glow-sm);
  }
  
  .select2-container--default .select2-selection--multiple .select2-selection__choice__remove {
      color: var(--hud-danger);
      font-size: 1.2em;
      font-weight: bold;
      margin-right: 0.4rem;
      cursor: pointer;
      transition: var(--hud-transition-fast);
      line-height: 1;
  }
  
  .select2-container--default .select2-selection--multiple .select2-selection__choice__remove:hover {
      color: #ff6688;
      text-shadow: 0 0 8px rgba(255, 51, 102, 0.8);
  }
  
  /* Select2 Clear Button (for single select with allowClear) */
  .select2-container--default .select2-selection--single .select2-selection__clear {
      color: var(--hud-danger);
      font-size: 1.4em;
      font-weight: bold;
      position: absolute;
      right: 30px;
      cursor: pointer;
      transition: var(--hud-transition-fast);
      line-height: 1;
      padding: 0 0.3rem;
  }
  
  .select2-container--default .select2-selection--single .select2-selection__clear:hover {
      color: #ff6688;
      text-shadow: 0 0 8px rgba(255, 51, 102, 0.8);
  }
  
  /* Select2 Disabled State */
  .select2-container--default.select2-container--disabled .select2-selection--single,
  .select2-container--default.select2-container--disabled .select2-selection--multiple {
      background: rgba(0, 255, 255, 0.02);
      border-color: rgba(0, 255, 255, 0.2);
      cursor: not-allowed;
  }
  
  .select2-container--default.select2-container--disabled .select2-selection--single .select2-selection__rendered,
  .select2-container--default.select2-container--disabled .select2-selection--multiple .select2-selection__rendered {
      color: rgba(255, 255, 255, 0.3);
  }
  
  /* Select2 Scrollbar Styling */
  .select2-results__options::-webkit-scrollbar {
      width: 8px;
  }
  
  .select2-results__options::-webkit-scrollbar-track {
      background: rgba(0, 255, 255, 0.05);
      border-radius: 4px;
  }
  
  .select2-results__options::-webkit-scrollbar-thumb {
      background: rgba(0, 255, 255, 0.3);
      border-radius: 4px;
      transition: var(--hud-transition-base);
  }
  
  .select2-results__options::-webkit-scrollbar-thumb:hover {
      background: rgba(0, 255, 255, 0.5);
      box-shadow: 0 0 8px rgba(0, 255, 255, 0.4);
  }
  
  /* Select2 Inline Search (Multiple) */
  .select2-container--default .select2-search--inline .select2-search__field {
      background: transparent;
      border: none;
      color: #ffffff;
      font-family: var(--hud-font-secondary);
      padding: 0.3rem 0.5rem;
      margin: 0;
      outline: none;
      min-width: 120px;
  }
  
  .select2-container--default .select2-search--inline .select2-search__field::placeholder {
      color: rgba(0, 255, 255, 0.4);
      font-style: italic;
  }
  
  /* Select2 Group Labels */
  .select2-results__group {
      color: var(--hud-primary);
      font-weight: 600;
      padding: 0.6rem 1rem;
      text-transform: uppercase;
      font-size: var(--hud-font-size-sm);
      letter-spacing: 0.05em;
      border-bottom: 1px solid rgba(0, 255, 255, 0.2);
      margin-top: 0.5rem;
  }
  
  .select2-results__group:first-child {
      margin-top: 0;
  }
  
  /* Select2 Animation Enhancement */
  .select2-dropdown {
      animation: hudFadeIn 0.2s ease-out;
  }
  
  @keyframes hudFadeIn {
      from {
          opacity: 0;
          transform: translateY(-8px);
      }
      to {
          opacity: 1;
          transform: translateY(0);
      }
  }
  
  /* Select2 AJAX Loading Spinner */
  .select2-container--default.select2-container--loading .select2-selection--single .select2-selection__rendered::after,
  .select2-container--default.select2-container--loading .select2-selection--multiple .select2-selection__rendered::after {
      content: "";
      display: inline-block;
      width: 16px;
      height: 16px;
      margin-left: 8px;
      border: 2px solid rgba(0, 255, 255, 0.3);
      border-top-color: var(--hud-primary);
      border-radius: 50%;
      animation: select2-spin 0.8s linear infinite;
  }
  
  @keyframes select2-spin {
      to {
          transform: rotate(360deg);
      }
  }
  
  /* Select2 Responsive Adjustments */
  @media (max-width: 768px) {
      .select2-dropdown {
          max-width: calc(100vw - 2rem);
      }
      
      .select2-results {
          max-height: 200px;
      }
      
      .select2-results__option {
          padding: 0.8rem 0.75rem;
          font-size: var(--hud-font-size-sm);
      }
  }
  
  /* Select2 Dark Mode Compatibility (Already dark, but extra insurance) */
  .select2-container--default .select2-results__option--disabled {
      color: rgba(255, 255, 255, 0.3);
      cursor: not-allowed;
  }

  .select2-container--default .select2-selection--single {
    background-color: var(--hud-bg-elevated);
  }
  
  /* Select2 Focus Visible (Accessibility) */
  .select2-selection:focus-visible {
      outline: 2px solid var(--hud-primary);
      outline-offset: 2px;
  }
  
  .select2-results__option:focus-visible {
      outline: 2px solid var(--hud-primary);
      outline-offset: -2px;
  }

  #hwpwrap .wp-core-ui .button, #hwpwrap .wp-core-ui .button-secondary {
    height: 45px;
  }

  /* ========================================================================
     END OF HUD CSS - Version 2.0.0
     ======================================================================== */