/* ===================================================
   MBA.AI ENTERPRISE DESIGN SYSTEM
   Professional monochrome styling with dark/light theme support
   Version: 2.0
   
   Table of Contents:
   1. CSS Variables & Design Tokens
   2. Base & Reset Styles
   3. Typography System
   4. Layout Components
   5. Form Controls
   6. Buttons & Interactive Elements
   7. Cards & Panels
   8. Navigation & Menu
   9. Alerts & Notifications
   10. Tables & Data Display
   11. Theme System
   12. Utility Classes
   13. Responsive Design
   14. Print Styles
   =================================================== */

/* ===================================================
   1. CSS VARIABLES & DESIGN TOKENS
   =================================================== */

:root {
  /* Color Scheme - Default Dark Theme */
  color-scheme: dark;

  /* Monochrome Scale */
  --mono-white: #0a0a0a;
  --mono-50: #171717;
  --mono-100: #262626;
  --mono-200: #404040;
  --mono-300: #525252;
  --mono-400: #737373;
  --mono-500: #a3a3a3;
  --mono-600: #d4d4d4;
  --mono-700: #e5e5e5;
  --mono-800: #f5f5f5;
  --mono-900: #fafafa;
  --mono-950: #ffffff;

  /* Semantic Colors */
  --accent-blue: #3b82f6;
  --accent-blue-hover: #2563eb;
  --accent-green: #22c55e;
  --accent-green-hover: #16a34a;
  --accent-yellow: #eab308;
  --accent-yellow-hover: #ca8a04;
  --accent-red: #ef4444;
  --accent-red-hover: #dc2626;

  /* Elevation System */
  --shadow-sm: 0 1px 3px 0 rgb(0 0 0 / 0.1);
  --shadow: 0 2px 8px 0 rgb(0 0 0 / 0.12);
  --shadow-md: 0 4px 12px 0 rgb(0 0 0 / 0.15);
  --shadow-lg: 0 8px 25px 0 rgb(0 0 0 / 0.18);

  /* Border Radius Scale */
  --radius-sm: 2px;
  --radius: 4px;
  --radius-md: 6px;
  --radius-lg: 8px;
  --radius-xl: 12px;

  /* Animation & Transitions */
  --transition: all 0.15s ease;
  --transition-slow: all 0.3s ease;

  /* Spacing Scale */
  --space-xs: 0.25rem;
  --space-sm: 0.5rem;
  --space: 1rem;
  --space-lg: 1.5rem;
  --space-xl: 2rem;
  --space-2xl: 3rem;

  /* Typography Scale */
  --font-size-xs: 0.75rem;
  --font-size-sm: 0.875rem;
  --font-size: 1rem;
  --font-size-lg: 1.125rem;
  --font-size-xl: 1.25rem;
  --font-size-2xl: 1.5rem;
  --font-size-3xl: 2rem;

  /* Line Heights */
  --leading-tight: 1.25;
  --leading-normal: 1.5;
  --leading-relaxed: 1.625;

  /* Font Weights */
  --font-weight-normal: 400;
  --font-weight-medium: 500;
  --font-weight-semibold: 600;
  --font-weight-bold: 700;

  /* Z-Index Scale */
  --z-dropdown: 1000;
  --z-sticky: 1020;
  --z-fixed: 1030;
  --z-modal-backdrop: 1050;
  --z-modal: 1060;
  --z-popover: 1070;
  --z-tooltip: 1080;
  --z-theme-toggle: 9999; /* Theme toggle always on top */

  /* Legacy Compatibility */
  --primary-500: var(--accent-blue);
  --primary-600: var(--accent-blue-hover);
  --success: var(--accent-green);
  --warning: var(--accent-yellow);
  --danger: var(--accent-red);
}

/* ===================================================
   GLOBAL AJAX LOADING STATE
   =================================================== */

/* Disable navigation links during AJAX with visual feedback */
a.sidebar-nav-link.ajax-loading-active,
a.nav-link.ajax-loading-active {
  opacity: 0.6;
  pointer-events: none;
  cursor: wait !important;
  position: relative;
}

a.sidebar-nav-link.ajax-loading-active::after,
a.nav-link.ajax-loading-active::after {
  content: '';
  position: absolute;
  top: 50%;
  right: 10px;
  width: 12px;
  height: 12px;
  margin-top: -6px;
  border: 2px solid rgba(255, 255, 255, 0.3);
  border-top-color: rgba(255, 255, 255, 0.8);
  border-radius: 50%;
  animation: ajax-spinner 0.6s linear infinite;
}

@keyframes ajax-spinner {
  0% { transform: rotate(0deg); }
  100% { transform: rotate(360deg); }
}

/* Light Theme Variables */
[data-theme="light"] {
  color-scheme: light;

  /* Monochrome Scale - Inverted */
  --mono-white: #ffffff;
  --mono-50: #fafafa;
  --mono-100: #f5f5f5;
  --mono-200: #e5e5e5;
  --mono-300: #d4d4d4;
  --mono-400: #a3a3a3;
  --mono-500: #737373;
  --mono-600: #525252;
  --mono-700: #404040;
  --mono-800: #262626;
  --mono-900: #171717;
  --mono-950: #0a0a0a;

  /* Light Theme Shadows */
  --shadow-sm: 0 1px 3px 0 rgb(0 0 0 / 0.05);
  --shadow: 0 2px 8px 0 rgb(0 0 0 / 0.08);
  --shadow-md: 0 4px 12px 0 rgb(0 0 0 / 0.1);
  --shadow-lg: 0 8px 25px 0 rgb(0 0 0 / 0.12);
}

/* System Preference Support */
@media (prefers-color-scheme: light) {
  :root:not([data-theme]) {
    color-scheme: light;
    
    --mono-white: #ffffff;
    --mono-50: #fafafa;
    --mono-100: #f5f5f5;
    --mono-200: #e5e5e5;
    --mono-300: #d4d4d4;
    --mono-400: #a3a3a3;
    --mono-500: #737373;
    --mono-600: #525252;
    --mono-700: #404040;
    --mono-800: #262626;
    --mono-900: #171717;
    --mono-950: #0a0a0a;

    --shadow-sm: 0 1px 3px 0 rgb(0 0 0 / 0.05);
    --shadow: 0 2px 8px 0 rgb(0 0 0 / 0.08);
    --shadow-md: 0 4px 12px 0 rgb(0 0 0 / 0.1);
    --shadow-lg: 0 8px 25px 0 rgb(0 0 0 / 0.12);
  }
}

/* ===================================================
   2. BASE & RESET STYLES
   =================================================== */

*,
*::before,
*::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

html {
  height: 100%;
  scroll-behavior: smooth;
}

body {
  height: 100%;
  font-family: 'Inter', system-ui, -apple-system, sans-serif;
  font-size: var(--font-size);
  font-weight: var(--font-weight-normal);
  line-height: var(--leading-normal);
  color: var(--mono-800);
  background-color: var(--mono-50);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
}

/* Focus Management */
*:focus {
  outline: none;
}

*:focus-visible {
  outline: 2px solid var(--accent-blue);
  outline-offset: 2px;
}

/* Selection Styles */
::selection {
  background-color: color-mix(in srgb, var(--accent-blue) 25%, transparent);
  color: var(--mono-900);
}

/* Scrollbar Styles */
* {
  scrollbar-width: thin;
  scrollbar-color: var(--mono-400) var(--mono-100);
}

*::-webkit-scrollbar {
  width: 8px;
  height: 8px;
}

*::-webkit-scrollbar-track {
  background: var(--mono-100);
}

*::-webkit-scrollbar-thumb {
  background-color: var(--mono-400);
  border-radius: var(--radius);
  border: 2px solid var(--mono-100);
}

*::-webkit-scrollbar-thumb:hover {
  background-color: var(--mono-500);
}

/* ===================================================
   3. TYPOGRAPHY SYSTEM
   =================================================== */

h1, h2, h3, h4, h5, h6 {
  color: var(--mono-900);
  font-weight: var(--font-weight-semibold);
  line-height: var(--leading-tight);
  margin-bottom: var(--space-sm);
}

h1 { font-size: var(--font-size-3xl); }
h2 { font-size: var(--font-size-2xl); }
h3 { font-size: var(--font-size-xl); }
h4 { font-size: var(--font-size-lg); }
h5 { font-size: var(--font-size); }
h6 { font-size: var(--font-size-sm); }

p {
  margin-bottom: var(--space);
  color: var(--mono-700);
}

a {
  color: var(--accent-blue);
  text-decoration: none;
  transition: var(--transition);
}

a:hover {
  color: var(--accent-blue-hover);
  text-decoration: underline;
}

strong, b {
  font-weight: var(--font-weight-semibold);
  color: var(--mono-900);
}

code {
  font-family: 'Monaco', 'Menlo', monospace;
  font-size: 0.875em;
  background-color: var(--mono-100);
  color: var(--accent-blue);
  padding: 0.125rem 0.25rem;
  border-radius: var(--radius-sm);
}

pre {
  background-color: var(--mono-100);
  border: 1px solid var(--mono-200);
  color: var(--mono-800);
  padding: var(--space);
  border-radius: var(--radius);
  overflow-x: auto;
  font-family: 'Monaco', 'Menlo', monospace;
  font-size: var(--font-size-sm);
}

/* ===================================================
   4. LAYOUT COMPONENTS
   =================================================== */

.container {
  width: 100%;
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 var(--space);
}

/* Modern Sidebar Layout - Fixed positioning approach */

/* Modern Fixed Sidebar - Desktop First */
.sidebar {
  position: fixed;
  top: 0;
  left: 0;
  width: 260px;
  height: 100vh;
  z-index: 1000;
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  box-shadow: 
    4px 0 24px 0 rgba(0, 0, 0, 0.1),
    inset -1px 0 0 0 rgba(255, 255, 255, 0.1);
  transition: transform 0.3s ease;
  transform: translateX(0); /* Visible by default on desktop */
  overflow-y: auto;
  overflow-x: hidden;
}

/* Dark mode sidebar */
body[data-theme="dark"] .sidebar {
  background: rgba(0, 0, 0, 0.5);
  border-right: 1px solid rgba(255, 255, 255, 0.1);
}

/* Light mode sidebar */
body[data-theme="light"] .sidebar {
  background: rgba(255, 255, 255, 0.5);
  border-right: 1px solid rgba(0, 0, 0, 0.1);
}

/* Sidebar content wrapper */
.sidebar-app {
  display: flex;
  flex-direction: column;
  height: 100%;
  background: transparent !important; /* Let liquid glass effect show through */
  color: var(--mono-800);
}

/* Main content positioning - Fixed offset for sidebar */
.main-content {
  margin-left: 260px; /* Fixed offset for desktop */
  min-height: calc(100vh - 56px); /* Full viewport minus header */
  max-height: calc(100vh - 56px); /* Prevent overflow */
  overflow-y: auto; /* Scroll within main-content if needed */
  transition: margin-left 0.3s ease;
  padding: 0;
  display: flex;
  flex-direction: column;
}

.content-area {
  flex: 1;
  padding: var(--space-lg);
  overflow-y: auto;
  background: var(--mono-50);
}

/* ===================================================
   5. FORM CONTROLS
   =================================================== */

.form-control,
.form-select,
.form-textarea {
  display: block;
  width: 100%;
  padding: 0.75rem 1rem;
  font-size: var(--font-size);
  font-weight: var(--font-weight-normal);
  line-height: var(--leading-normal);
  color: var(--mono-800);
  background-color: var(--mono-white);
  border: 1px solid var(--mono-200);
  border-radius: var(--radius);
  transition: var(--transition);
}

.form-control:focus,
.form-select:focus,
.form-textarea:focus {
  border-color: var(--accent-blue);
  background-color: var(--mono-white);
  color: var(--mono-600);
  box-shadow: 0 0 0 0.2rem color-mix(in srgb, var(--accent-blue) 15%, transparent);
  outline: none;
}

.form-control:disabled,
.form-select:disabled,
.form-textarea:disabled {
  background-color: var(--mono-100);
  color: var(--mono-500);
  cursor: not-allowed;
}

/* Form readonly styling - ensure consistency with regular form-control */
.form-control:read-only {
  background: rgb(110 110 110 / 30%);
  color: var(--mono-800);
  cursor: default;
}

/* Specific styling for Nama Satker field - Glass Effect */
#namaSatker {
  background: linear-gradient(
    135deg,
    rgba(255, 255, 255, 0.08),
    rgba(255, 255, 255, 0.04)
  ) !important;
  backdrop-filter: blur(4px) !important;
  -webkit-backdrop-filter: blur(4px) !important;
  border: 1px solid rgba(255, 255, 255, 0.1) !important;
  color: var(--mono-100) !important;
}

/* Light theme override for Nama Satker */
[data-theme="light"] #namaSatker {
  background: linear-gradient(
    135deg,
    rgba(0, 0, 0, 0.06),
    rgba(0, 0, 0, 0.03)
  ) !important;
  border: 1px solid rgba(0, 0, 0, 0.12) !important;
  color: var(--mono-800) !important;
}

/* Form Validation States */
.form-control.is-valid,
.form-select.is-valid {
  border-color: var(--accent-green);
}

.form-control.is-invalid,
.form-select.is-invalid {
  border-color: var(--accent-red);
}

.valid-feedback {
  color: var(--accent-green);
  font-size: var(--font-size-sm);
  margin-top: var(--space-xs);
}

.invalid-feedback {
  color: var(--accent-red);
  font-size: var(--font-size-sm);
  margin-top: var(--space-xs);
}

.form-label {
  display: inline-block;
  margin-bottom: var(--space-xs);
  font-weight: var(--font-weight-medium);
  color: var(--mono-800);
}

.form-text {
  font-size: var(--font-size-sm);
  color: var(--mono-600);
  margin-top: var(--space-xs);
}

/* ===================================================
   6. BUTTONS & INTERACTIVE ELEMENTS
   =================================================== */

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0.75rem 1.5rem;
  font-size: var(--font-size);
  font-weight: var(--font-weight-medium);
  line-height: 1;
  text-align: center;
  text-decoration: none;
  white-space: nowrap;
  vertical-align: middle;
  user-select: none;
  border: 1px solid rgba(0, 0, 0, 0.1); /* Black border with 0.1 opacity */
  border-radius: var(--radius);
  transition: var(--transition);
  cursor: pointer;
  gap: var(--space-xs);
}

.btn:disabled {
  opacity: 0.6;
  cursor: not-allowed;
}

/* Global button focus override to prevent browser defaults */
.btn:focus,
.btn:active {
  outline: none !important;
  box-shadow: none !important;
}

/* Button Variants */
.btn-primary:not(.glass-button) {
  color: white;
  background-color: var(--accent-blue);
  box-shadow: var(--shadow-sm);
}

.btn-primary:not(.glass-button):hover:not(:disabled) {
  background-color: var(--accent-blue-hover);
  box-shadow: var(--shadow);
}

.btn-primary:not(.glass-button):focus:not(:disabled),
.btn-primary:not(.glass-button):active:not(:disabled) {
  background-color: var(--accent-blue-hover);
  box-shadow: none;
  outline: none;
}

.btn-secondary:not(.glass-button) {
  color: var(--mono-700);
  background-color: var(--mono-200);
  box-shadow: var(--shadow-sm);
}

.btn-secondary:not(.glass-button):hover:not(:disabled) {
  background-color: var(--mono-300);
  color: var(--mono-800);
  box-shadow: var(--shadow);
}

.btn-secondary:not(.glass-button):focus:not(:disabled),
.btn-secondary:not(.glass-button):active:not(:disabled) {
  background-color: var(--mono-300);
  color: var(--mono-800);
  box-shadow: none;
  outline: none;
}

.btn-success:not(.glass-button) {
  color: white;
  background-color: var(--accent-green);
  box-shadow: var(--shadow-sm);
}

.btn-success:not(.glass-button):hover:not(:disabled) {
  background-color: var(--accent-green-hover);
  box-shadow: var(--shadow);
}

.btn-success:not(.glass-button):focus:not(:disabled),
.btn-success:not(.glass-button):active:not(:disabled) {
  background-color: var(--accent-green-hover);
  box-shadow: none;
  outline: none;
}

.btn-warning:not(.glass-button) {
  color: white;
  background-color: var(--accent-yellow);
  box-shadow: var(--shadow-sm);
}

.btn-warning:not(.glass-button):hover:not(:disabled) {
  background-color: var(--accent-yellow-hover);
  box-shadow: var(--shadow);
}

.btn-warning:not(.glass-button):focus:not(:disabled),
.btn-warning:not(.glass-button):active:not(:disabled) {
  background-color: var(--accent-yellow-hover);
  box-shadow: none;
  outline: none;
}

.btn-danger:not(.glass-button) {
  color: white;
  background-color: var(--accent-red);
  box-shadow: var(--shadow-sm);
}

.btn-danger:not(.glass-button):hover:not(:disabled) {
  background-color: var(--accent-red-hover);
  box-shadow: var(--shadow);
}

.btn-danger:not(.glass-button):focus:not(:disabled),
.btn-danger:not(.glass-button):active:not(:disabled) {
  background-color: var(--accent-red-hover);
  box-shadow: none;
  outline: none;
}

/* Outline Button Variants */
.btn-outline-primary {
  color: var(--accent-blue);
  background-color: transparent;
  box-shadow: inset 0 0 0 1px var(--accent-blue);
}

.btn-outline-primary:hover:not(:disabled) {
  color: white;
  background-color: var(--accent-blue);
  box-shadow: var(--shadow);
}

.btn-outline-primary:focus:not(:disabled),
.btn-outline-primary:active:not(:disabled) {
  color: white;
  background-color: var(--accent-blue);
  box-shadow: none;
  outline: none;
}

.btn-outline-secondary {
  color: var(--mono-600);
  background-color: transparent;
  box-shadow: inset 0 0 0 1px var(--mono-300);
}

.btn-outline-secondary:hover:not(:disabled) {
  color: var(--mono-800);
  background-color: var(--mono-100);
  box-shadow: var(--shadow);
}

.btn-outline-secondary:focus:not(:disabled),
.btn-outline-secondary:active:not(:disabled) {
  color: var(--mono-800);
  background-color: var(--mono-100);
  box-shadow: none;
  outline: none;
}

/* Warning Outline Button */
.btn-outline-warning {
  color: var(--accent-yellow);
  background-color: transparent;
  box-shadow: inset 0 0 0 1px var(--accent-yellow);
  border: none;
}

.btn-outline-warning:hover:not(:disabled) {
  color: white;
  background-color: var(--accent-yellow);
  box-shadow: var(--shadow);
}

.btn-outline-warning:focus:not(:disabled),
.btn-outline-warning:active:not(:disabled) {
  color: white;
  background-color: var(--accent-yellow);
  box-shadow: none;
  outline: none;
}

/* Danger Outline Button */
.btn-outline-danger {
  color: var(--accent-red);
  background-color: transparent;
  box-shadow: inset 0 0 0 1px var(--accent-red);
  border: none;
}

.btn-outline-danger:hover:not(:disabled) {
  color: white;
  background-color: var(--accent-red);
  box-shadow: var(--shadow);
}

.btn-outline-danger:focus:not(:disabled),
.btn-outline-danger:active:not(:disabled) {
  color: white;
  background-color: var(--accent-red);
  box-shadow: none;
  outline: none;
}

/* Success Outline Button */
.btn-outline-success {
  color: var(--accent-green);
  background-color: transparent;
  box-shadow: inset 0 0 0 1px var(--accent-green);
  border: none;
}

.btn-outline-success:hover:not(:disabled) {
  color: white;
  background-color: var(--accent-green);
  box-shadow: var(--shadow);
}

.btn-outline-success:focus:not(:disabled),
.btn-outline-success:active:not(:disabled) {
  color: white;
  background-color: var(--accent-green);
  box-shadow: none;
  outline: none;
}

/* Button Link Variant */
.btn-link {
  color: var(--accent-blue);
  background-color: transparent;
  border: none;
  text-decoration: underline;
  font-weight: var(--font-weight-normal);
}

.btn-link:hover {
  color: var(--accent-blue-hover);
  text-decoration: underline;
}

.btn-link:focus {
  color: var(--accent-blue-hover);
  text-decoration: underline;
  box-shadow: none;
  outline: none;
}

.btn-link:active {
  color: var(--accent-blue-hover);
  text-decoration: underline;
  box-shadow: none;
  outline: none;
}

/* Button Group Enhancements */
.btn-group .btn:not(:first-child),
.btn-group .btn:not(:last-child) {
  border-radius: 0;
}

.btn-group .btn:first-child {
  border-top-right-radius: 8px;
  border-bottom-right-radius: 8px;
}

.btn-group .btn:last-child {
  border-top-left-radius: 8px;
  border-bottom-left-radius: 8px;
}

/* Fix outline button borders in groups */
.btn-group .btn-outline-secondary:not(:last-child) {
  border-right: none;
}

.btn-group .btn-outline-warning:not(:last-child) {
  border-right: none;
}

.btn-group .btn-outline-danger:not(:last-child) {
  border-right: none;
}

.btn-group .btn-outline-success:not(:last-child) {
  border-right: none;
}

/* Hover states for grouped buttons */
.btn-group .btn-outline-secondary:hover,
.btn-group .btn-outline-warning:hover,
.btn-group .btn-outline-danger:hover,
.btn-group .btn-outline-success:hover {
  z-index: 1;
  border-right: 1px solid transparent;
}

.btn-link:disabled {
  color: var(--mono-500);
  text-decoration: none;
}

/* Button Sizes */
.btn-sm {
  padding: 0.5rem 1rem;
  font-size: var(--font-size-sm);
}

.btn-lg {
  padding: 1rem 2rem;
  font-size: var(--font-size-lg);
}

/* ===================================================
   7. CARDS & PANELS
   =================================================== */

.card {
  display: flex;
  flex-direction: column;
  background-color: var(--mono-50);
  border-radius: var(--radius-lg);
  box-shadow: 0 .5rem 1rem rgba(0, 0, 0, .15) !important;
  transition: var(--transition);
}

.card:hover {
  border-color: var(--mono-100);
}

.card-header {
  padding: var(--space-lg) var(--space-lg) var(--space);
  background-color: transparent;
  border-bottom: none;
}

.card-body {
  flex: 1;
  padding: 0 var(--space-lg) var(--space-lg);
}

.card-footer {
  padding: var(--space) var(--space-lg) var(--space-lg);
  background-color: transparent;
  border-top: none;
}

.card-title {
  margin-bottom: var(--space-sm);
  font-size: var(--font-size-lg);
  font-weight: var(--font-weight-semibold);
  color: var(--mono-900);
}

.card-subtitle {
  margin-bottom: var(--space);
  font-size: var(--font-size-sm);
  color: var(--mono-600);
}

.card-text {
  color: var(--mono-700);
}

/* ===================================================
   8. NAVIGATION & MENU
   =================================================== */

.nav {
  display: flex;
  flex-wrap: wrap;
  list-style: none;
  margin: 0;
  padding: 0;
}

.nav-link {
  display: block;
  padding: var(--space-sm) var(--space);
  color: var(--mono-700);
  text-decoration: none;
  transition: var(--transition);
  border-radius: var(--radius);
}

.nav-link:hover {
  color: var(--mono-900);
  background-color: var(--mono-100);
}

.nav-link.active {
  color: var(--accent-blue);
  background-color: color-mix(in srgb, var(--accent-blue) 10%, transparent);
}

/* Sidebar Navigation */
.sidebar-nav {
  padding: var(--space);
}

.sidebar-nav .nav-link {
  margin-bottom: var(--space-xs);
  font-weight: var(--font-weight-medium);
}

/* Sidebar Navigation Sublinks */
/* Legacy sidebar-nav-sublink - replaced by .sidebar-app specific styling */
.sidebar-nav-sublink {
  color: rgba(255, 255, 255, 0.7) !important;
  padding: 0.5rem 1rem 0.5rem 2.5rem;
  border-radius: var(--radius);
  margin-bottom: var(--space-xs);
  transition: var(--transition);
  display: flex;
  align-items: center;
  text-decoration: none;
  font-weight: var(--font-weight-normal);
  font-size: var(--font-size-sm);
}

.sidebar-nav-sublink:hover {
  background: rgba(255, 255, 255, 0.08);
  color: rgba(255, 255, 255, 0.9) !important;
  text-decoration: none;
}

/* Legacy sidebar-nav-sublink.active - replaced by .sidebar-app specific styling */
.sidebar-nav-sublink.active {
  background: rgba(255, 255, 255, 0.15);
  color: white !important;
  font-weight: var(--font-weight-medium);
}

/* Sidebar User Section */
.sidebar-user .text-muted {
  color: rgba(255, 255, 255, 0.6) !important;
}

/* Sidebar Header & Branding */
.sidebar-header {
  border-bottom: 1px solid var(--mono-300);
}

.sidebar-logo-container {
  display: flex;
  justify-content: center;
  align-items: center;
}

.sidebar-logo {
  width: 48px;
  height: 48px;
  object-fit: contain;
  border-radius: var(--radius);
}

.sidebar-brand h5,
.sidebar-brand h6 {
  margin: 0;
  line-height: 1.2;
}

.sidebar-user {
  /* border-bottom: 1px solid var(--mono-300); */
}

/* Sidebar Footer */
.sidebar-footer {
  margin-top: auto;
  /* border-top: 1px solid var(--mono-300); */
}

.theme-controls .btn {
  font-size: var(--font-size-xs);
  padding: var(--space-xs) var(--space-sm);
}

.btn-logout {
  font-size: var(--font-size-sm);
  font-weight: var(--font-weight-medium);
}

/* Sidebar App specific styling with Liquid Glass Effects */
.sidebar-app .sidebar-nav-link {
  position: relative;
  color: var(--mono-700);
  background: transparent;
  border-radius: 12px;
  margin: 0.125rem 0.5rem;
  padding: 0.625rem 1rem;
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  text-decoration: none;
  display: flex;
  align-items: center;
  font-weight: var(--font-weight-normal);
  font-size: var(--font-size-sm);
  overflow: hidden;
}

/* Liquid Glass Hover Effect */
.sidebar-app .sidebar-nav-link:hover {
  background: linear-gradient(
    135deg,
    rgba(255, 255, 255, 0.12),
    rgba(255, 255, 255, 0.06)
  );
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
  color: var(--mono-900);
  text-decoration: none;
  border: 1px solid rgba(255, 255, 255, 0.15);
  box-shadow: 
    0 2px 8px rgba(0, 0, 0, 0.1),
    inset 0 1px 0 rgba(255, 255, 255, 0.2);
  transform: translateX(4px);
}

.sidebar-app .sidebar-nav-link.active {
  background: linear-gradient(
    135deg,
    rgba(59, 130, 246, 0.8),
    rgba(37, 99, 235, 0.9)
  );
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
  color: #ffffff;
  font-weight: var(--font-weight-medium);
  border: 1px solid rgba(255, 255, 255, 0.2);
  box-shadow: 
    0 4px 12px rgba(59, 130, 246, 0.3),
    inset 0 1px 0 rgba(255, 255, 255, 0.2);
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.2);
}

/* Submenu Links with Liquid Glass */
.sidebar-app .sidebar-nav-sublink {
  position: relative;
  color: var(--mono-600) !important;
  background: transparent;
  border-radius: 10px;
  padding: var(--space-sm) var(--space);
  margin: 0.125rem 0.5rem 0.125rem 2rem;
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  text-decoration: none;
  font-weight: var(--font-weight-normal);
  font-size: var(--font-size-sm);
  display: block;
}

.sidebar-app .sidebar-nav-sublink:hover {
  background: linear-gradient(
    135deg,
    rgba(255, 255, 255, 0.1),
    rgba(255, 255, 255, 0.05)
  );
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
  color: var(--mono-800) !important;
  text-decoration: none;
  border: 1px solid rgba(255, 255, 255, 0.12);
  box-shadow: 
    0 2px 6px rgba(0, 0, 0, 0.08),
    inset 0 1px 0 rgba(255, 255, 255, 0.15);
  transform: translateX(3px);
}

.sidebar-app .sidebar-nav-sublink.active {
  background: linear-gradient(
    135deg,
    rgba(99, 102, 241, 0.75),
    rgba(79, 70, 229, 0.85)
  ) !important;
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
  color: #ffffff !important;
  font-weight: var(--font-weight-medium);
  border: 1px solid rgba(255, 255, 255, 0.18);
  box-shadow: 
    0 3px 10px rgba(99, 102, 241, 0.25),
    inset 0 1px 0 rgba(255, 255, 255, 0.2);
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.2);
}

/* Light Theme Sidebar Navigation */
[data-theme="light"] .sidebar-app .sidebar-nav-link {
  color: var(--mono-700);
}

[data-theme="light"] .sidebar-app .sidebar-nav-link:hover {
  background: linear-gradient(135deg, rgb(252 252 252 / 5%), rgb(219 219 219 / 5%));
  border-color: rgb(142 142 142 / 30%);
  box-shadow: 0 4px 12px rgb(0 0 0 / 30%), inset 0 1px 0 rgba(255, 255, 255, 0.2);
}

[data-theme="light"] .sidebar-app .sidebar-nav-link.active {
  background: linear-gradient(135deg, rgb(252 252 252 / 5%), rgb(219 219 219 / 5%));
  border-color: rgb(142 142 142 / 30%);
  box-shadow: 0 4px 12px rgb(0 0 0 / 30%), inset 0 1px 0 rgba(255, 255, 255, 0.2);
}

[data-theme="light"] .sidebar-app .sidebar-nav-sublink:hover {
  background: linear-gradient(135deg, rgb(252 252 252 / 5%), rgb(219 219 219 / 5%));
  border-color: rgb(142 142 142 / 30%);
  box-shadow: 0 4px 12px rgb(0 0 0 / 30%), inset 0 1px 0 rgba(255, 255, 255, 0.2);
}

[data-theme="light"] .sidebar-app .sidebar-nav-sublink.active {
  background: linear-gradient(
    135deg,
    rgba(99, 102, 241, 0.85),
    rgba(79, 70, 229, 0.95)
  ) !important;
  border-color: rgba(255, 255, 255, 0.25);
}

/* Top Navigation */
.navbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: var(--space) var(--space-lg);
  background-color: var(--mono-white);
}

.navbar-brand {
  font-size: var(--font-size-lg);
  font-weight: var(--font-weight-bold);
  color: var(--mono-900);
  text-decoration: none;
}

.navbar-nav {
  display: flex;
  gap: var(--space-sm);
}

/* ===================================================
   9. ALERTS & NOTIFICATIONS
   =================================================== */

.alert {
  position: relative;
  padding: var(--space) var(--space-lg);
  margin-bottom: var(--space);
  border: none;
  border-radius: var(--radius);
  border-left: 4px solid;
}

.alert-primary {
  color: var(--accent-blue);
  background-color: color-mix(in srgb, var(--accent-blue) 10%, var(--mono-white));
  border-left-color: var(--accent-blue);
}

.alert-success {
  color: var(--accent-green);
  background-color: color-mix(in srgb, var(--accent-green) 10%, var(--mono-white));
  border-left-color: var(--accent-green);
}

.alert-warning {
  color: var(--accent-yellow);
  background-color: color-mix(in srgb, var(--accent-yellow) 10%, var(--mono-white));
  border-left-color: var(--accent-yellow);
}

.alert-danger {
  color: var(--accent-red);
  background-color: color-mix(in srgb, var(--accent-red) 10%, var(--mono-white));
  border-left-color: var(--accent-red);
}

.alert-dismissible {
  padding-right: 4rem;
}

.alert-dismissible .btn-close {
  position: absolute;
  top: 0;
  right: 0;
  z-index: 2;
  padding: 1.25rem 1rem;
}

/* Badge Components */
.badge {
  display: inline-block;
  padding: 0.25rem 0.5rem;
  font-size: 0.75rem;
  font-weight: var(--font-weight-medium);
  line-height: 1;
  text-align: center;
  white-space: nowrap;
  vertical-align: baseline;
  border-radius: var(--radius);
}

.badge-primary {
  color: white;
  background-color: var(--accent-blue);
}

.badge-secondary {
  color: var(--mono-700);
  background-color: var(--mono-200);
}

.badge-success {
  color: white;
  background-color: var(--accent-green);
}

.badge-warning {
  color: white;
  background-color: var(--accent-yellow);
}

.badge-danger {
  color: white;
  background-color: var(--accent-red);
}

/* Liquid Glass Badge Variants for Sidebar */
.sidebar-user .badge {
  padding: 0.35rem 0.75rem;
  font-size: 0.7rem;
  font-weight: 600;
  letter-spacing: 0.5px;
  text-transform: uppercase;
  border-radius: 12px;
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
  border: 1px solid rgba(255, 255, 255, 0.2);
  box-shadow: 
    0 2px 8px rgba(0, 0, 0, 0.15),
    inset 0 1px 0 rgba(255, 255, 255, 0.2);
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

.sidebar-user .badge.bg-success {
  background: linear-gradient(
    135deg,
    rgba(16, 185, 129, 0.8),
    rgba(5, 150, 105, 0.9)
  );
  color: #ffffff;
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.2);
}

.sidebar-user .badge.bg-secondary {
  background: linear-gradient(
    135deg,
    rgba(148, 163, 184, 0.7),
    rgba(100, 116, 139, 0.8)
  );
  color: #ffffff;
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.2);
}

/* Light theme badge adjustments */
[data-theme="light"] .sidebar-user .badge.bg-success {
  background: linear-gradient(
    135deg,
    rgba(34, 197, 94, 0.85),
    rgba(22, 163, 74, 0.9)
  );
  border-color: rgba(255, 255, 255, 0.4);
}

[data-theme="light"] .sidebar-user .badge.bg-secondary {
  background: linear-gradient(
    135deg,
    rgba(148, 163, 184, 0.75),
    rgba(100, 116, 139, 0.85)
  );
  border-color: rgba(255, 255, 255, 0.4);
}

/* ===================================================
   10. TABLES & DATA DISPLAY
   =================================================== */

.table {
  width: 100%;
  margin-bottom: var(--space);
  color: var(--mono-900);
  border-collapse: collapse;
  background-color: var(--mono-50);
  table-layout: fixed; /* Ensure column widths are respected */
}

.table th,
.table td {
  padding: var(--space-sm) var(--space);
  text-align: left;
  vertical-align: top;
  border: none;
  background-color: var(--mono-50);
  color: var(--mono-900);
}

.table thead th {
  font-weight: var(--font-weight-semibold);
  color: var(--mono-900);
  background-color: var(--mono-50);
  border: none;
}

.table tbody tr:hover {
  background-color: var(--mono-100);
}

.table-striped tbody tr:nth-of-type(odd) {
  background-color: var(--mono-50);
}

.table-responsive {
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  width: 100%;
}

/* File name column - word wrapping for long filenames */
.table td.filename-column {
  max-width: 250px;
  word-wrap: break-word;
  word-break: break-all;
  white-space: normal;
  line-height: 1.4;
}

.table td.filename-column a {
  display: block;
  word-wrap: break-word;
  word-break: break-all;
  white-space: normal;
}

/* Tentang column - word wrapping for long descriptions */
.table td.tentang-column {
  max-width: 200px;
  word-wrap: break-word;
  white-space: normal;
  line-height: 1.4;
}

/* DataTables specific styling for files table */
#files-table {
  table-layout: fixed !important;
}

#files-table td, #files-table th {
  word-wrap: break-word;
  overflow-wrap: break-word;
}

/* DataTables specific styling for kustom data files table */
#filesTable {
  table-layout: fixed !important;
}

#filesTable td, #filesTable th {
  word-wrap: break-word;
  overflow-wrap: break-word;
}

/* DataTables specific styling for kustom data chunks table */
#chunksTable {
  table-layout: fixed !important;
}

#chunksTable td, #chunksTable th {
  word-wrap: break-word;
  overflow-wrap: break-word;
}

/* DataTables specific styling for users table */
#usersTable {
  table-layout: fixed !important;
  min-width: 1200px;
}

#usersTable td, #usersTable th {
  word-wrap: break-word;
  overflow-wrap: break-word;
}

/* Full-width responsive table with proper overflow handling */
.table-full-width {
  min-width: 100%;
  max-width: 100%;
  width: 100%;
  table-layout: auto;
}

/* Ensure all table elements have no borders */
table,
table th,
table td,
table thead,
table tbody,
table tfoot,
table tr {
  border: none !important;
  border-collapse: collapse;
}

.table,
.table th,
.table td,
.table thead,
.table tbody,
.table tfoot,
.table tr {
  border: none !important;
}

.data-table,
.data-table th,
.data-table td,
.data-table thead,
.data-table tbody,
.data-table tfoot,
.data-table tr {
  border: none !important;
}

/* Override Bootstrap table-bordered class */
.table-bordered,
.table-bordered th,
.table-bordered td {
  border: none !important;
}

/* Table Column Constraints */
.table-col-constrained {
  max-width: 250px;
  word-wrap: break-word;
  word-break: break-word;
  white-space: normal;
  vertical-align: top;
}

/* Specific width for file name and description columns */
.table-col-constrained:nth-child(2) { /* Nama File column */
  max-width: 200px;
}

.table-col-constrained:nth-child(5) { /* Tentang column */
  max-width: 300px;
}

/* Responsive adjustments for smaller screens */
@media (max-width: 992px) {
  .table-full-width {
    min-width: 100%;
    max-width: 100%;
  }
  
  .table-col-constrained {
    max-width: 200px;
  }
  
  .table-col-constrained:nth-child(2) {
    max-width: 150px;
  }
  
  .table-col-constrained:nth-child(5) {
    max-width: 250px;
  }
}

@media (max-width: 768px) {
  .table-full-width {
    min-width: 100%;
    max-width: 100%;
  }
  
  .table-col-constrained {
    max-width: 150px;
  }
  
  .table-col-constrained:nth-child(2) {
    max-width: 120px;
  }
  
  .table-col-constrained:nth-child(5) {
    max-width: 200px;
  }
}

/* Table Links Styling */
.table a {
  color: var(--mono-900);
  text-decoration: none;
}

.table a:hover {
  color: var(--accent-blue);
  text-decoration: underline;
}

.table .text-danger {
  color: var(--accent-red) !important;
}

/* Mobile scroll hint styling */
.mobile-scroll-hint {
  text-align: center;
  color: var(--mono-600);
  font-size: var(--font-size-sm);
  padding: var(--space-sm);
  background-color: var(--mono-100);
  border-radius: var(--radius);
  margin-top: var(--space-sm);
}

.mobile-scroll-hint i {
  color: var(--accent-blue);
}

/* ===================================================
   11. THEME SYSTEM
   =================================================== */

/* Legacy floating theme toggle - now integrated in sidebar */
.theme-toggle {
  display: none;
}

.theme-toggle:hover {
  background: var(--mono-200);
  border-color: var(--mono-400);
}

.theme-toggle-btn {
  background: none;
  border: none;
  padding: var(--space-xs);
  border-radius: var(--radius);
  color: var(--mono-600);
  cursor: pointer;
  transition: var(--transition);
  display: flex;
  align-items: center;
  justify-content: center;
}

.theme-toggle-btn:hover {
  background: var(--mono-200);
  color: var(--mono-800);
}

/* ===================================================
   12. UTILITY CLASSES
   =================================================== */

/* Spacing Utilities */
.m-0 { margin: 0; }
.m-1 { margin: var(--space-xs); }
.m-2 { margin: var(--space-sm); }
.m-3 { margin: var(--space); }
.m-4 { margin: var(--space-lg); }
.m-5 { margin: var(--space-xl); }

.p-0 { padding: 0; }
.p-1 { padding: var(--space-xs); }
.p-2 { padding: var(--space-sm); }
.p-3 { padding: var(--space); }
.p-4 { padding: var(--space-lg); }
.p-5 { padding: var(--space-xl); }

/* Text Utilities */
.text-left { text-align: left; }
.text-center { text-align: center; }
.text-right { text-align: right; }

.text-primary { color: var(--accent-blue); }
.text-secondary { color: var(--mono-600); }
.text-success { color: var(--accent-green); }
.text-warning { color: var(--accent-yellow); }
.text-danger { color: var(--accent-red); }
.text-muted { color: var(--mono-500); }

.fw-normal { font-weight: var(--font-weight-normal); }
.fw-medium { font-weight: var(--font-weight-medium); }
.fw-semibold { font-weight: var(--font-weight-semibold); }
.fw-bold { font-weight: var(--font-weight-bold); }

/* Background Utilities */
.bg-primary { background-color: var(--accent-blue); }
.bg-secondary { background-color: var(--mono-200); }
.bg-success { background-color: var(--accent-green); }
.bg-warning { background-color: var(--accent-yellow); }
.bg-danger { background-color: var(--accent-red); }

/* Border Utilities */
.border { border: 1px solid var(--mono-200); }
.border-0 { border: none; }
.border-top { border-top: 1px solid var(--mono-200); }

.rounded { border-radius: var(--radius); }
.rounded-lg { border-radius: var(--radius-lg); }
.rounded-xl { border-radius: var(--radius-xl); }

/* Display Utilities */
.d-none { display: none; }
.d-block { display: block; }
.d-inline { display: inline; }
.d-inline-block { display: inline-block; }
.d-flex { display: flex; }
.d-grid { display: grid; }

/* Flex Utilities */
.flex-row { flex-direction: row; }
.flex-column { flex-direction: column; }
.justify-content-start { justify-content: flex-start; }
.justify-content-center { justify-content: center; }
.justify-content-end { justify-content: flex-end; }
.justify-content-between { justify-content: space-between; }
.align-items-start { align-items: flex-start; }
.align-items-center { align-items: center; }
.align-items-end { align-items: flex-end; }

.flex-1 { flex: 1; }
.flex-grow-1 { flex-grow: 1; }
.flex-shrink-0 { flex-shrink: 0; }

/* Position Utilities */
.position-relative { position: relative; }
.position-absolute { position: absolute; }
.position-fixed { position: fixed; }
.position-sticky { position: sticky; }

/* Shadow Utilities */
.shadow-sm { box-shadow: var(--shadow-sm); }
.shadow { box-shadow: var(--shadow); }
.shadow-md { box-shadow: var(--shadow-md); }
.shadow-lg { box-shadow: var(--shadow-lg); }
.shadow-none { box-shadow: none; }

/* ===================================================
   13. RESPONSIVE DESIGN
   =================================================== */

/* ===================================================
   RESPONSIVE DESIGN - MODERN SIDEBAR PATTERN
   =================================================== */

/* Mobile First: Overlay sidebar pattern */
@media (max-width: 767.98px) {
  .sidebar {
    transform: translateX(-100%); /* Hidden by default on mobile */
    width: 280px; /* Slightly wider for mobile touch */
    z-index: 1055; /* Above chat messages and bubbles */
  }
  
  .sidebar.show {
    transform: translateX(0); /* Slide in when toggled */
  }
  
  .main-content {
    margin-left: 0; /* Full width on mobile */
  }
  
  /* Mobile sidebar overlay */
  .sidebar-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.5);
    z-index: 1040;
    opacity: 0;
    visibility: hidden;
    transition: all 0.3s ease;
  }
  
  .sidebar-overlay.show {
    opacity: 1;
    visibility: visible;
  }
  
  /* Mobile toggle button */
  .sidebar-toggle {
    position: fixed;
    top: 0.2rem; /* Slightly above viewport edge */
    left: 1rem;
    z-index: 1070; /* Above sticky header (1020) and sidebar (1055) */
    border-radius: 50%;
    width: 40px;
    height: 40px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: linear-gradient(135deg, rgba(59,130,246,0.9), rgba(37,99,235,1));
    border: none;
    color: white;
    font-size: 1.5rem; /* Larger icon */
    cursor: pointer;
    box-shadow: 0 4px 16px rgba(59, 130, 246, 0.5);
    transition: all 0.3s ease;
  }
  
  .sidebar-toggle:hover {
    background: linear-gradient(135deg, rgba(59,130,246,1), rgba(29,78,216,1));
    transform: scale(1.05);
    box-shadow: 0 6px 20px rgba(59, 130, 246, 0.6);
  }
  
  /* Mobile optimizations */
  .container {
    padding: 0 var(--space-sm);
  }

  .content-area {
    padding: var(--space);
  }

  .btn {
    padding: var(--space-sm) var(--space);
    font-size: var(--font-size-sm);
  }

  .card-header,
  .card-body,
  .card-footer {
    padding: var(--space);
  }

  .table-responsive {
    font-size: var(--font-size-sm);
  }
}

/* Tablet and Desktop: Fixed sidebar */
@media (min-width: 768px) {
  .sidebar {
    transform: translateX(0); /* Always visible */
    width: 240px;
  }
  
  .main-content {
    margin-left: 240px; /* Fixed offset */
  }
  
  /* Hide mobile-only elements */
  .sidebar-overlay,
  .sidebar-toggle {
    display: none !important;
  }
  
  /* Desktop optimizations */
  .container {
    padding: 0 var(--space);
  }
  
  .content-area {
    padding: var(--space-lg);
  }
}

/* Large Desktop: Slightly narrower sidebar */
@media (min-width: 1200px) {
  .sidebar {
    width: 240px;
  }
  
  .main-content {
    margin-left: 240px;
  }
}

/* Extra large devices (XXL desktops, 1400px and up) */
@media (min-width: 1400px) {
  .sidebar {
    width: 240px; /* Wider on XXL screens */
  }
  
  .main-content {
    margin-left: 240px;
  }
}

/* Logo Transitions and Animations */
.sidebar-logo,
.logo,
.login-logo {
  transition: all 0.3s ease;
}

.sidebar-logo:active {
  transform: scale(0.95);
}

/* Ensure logos don't break layout */
.sidebar-logo-container img,
.logo,
.login-logo {
  display: block;
  margin: 0 auto;
}

/* ===================================================
   14. PRINT STYLES
   =================================================== */

@media print {
  .theme-toggle,
  .sidebar,
  .btn,
  .alert-dismissible .btn-close {
    display: none !important;
  }

  .main-layout {
    flex-direction: column;
  }

  .main-content {
    width: 100%;
  }

  .card {
    border: 1px solid #000;
    box-shadow: none;
    page-break-inside: avoid;
  }

  body {
    color: #000;
    background: #fff;
  }

  .table {
    border-collapse: collapse;
  }

  .table th,
  .table td {
    border: none;
  }
}

/* ===================================================
   MBA.AI SPECIFIC COMPONENTS
   Application-specific styling
   =================================================== */

/* ===================================================
   CHAT PAGE LAYOUT - Fixed Height, No Scroll
   =================================================== */

/* Chat Page Wrapper - Full viewport height */
.chat-page-wrapper {
  display: flex;
  flex-direction: column;
  height: calc(100vh - 56px); /* Full viewport minus top header */
  overflow: hidden; /* Prevent page scroll */
  /* position: relative; */ /* REMOVED - was creating stacking context blocking theme toggle */
}

/* Mobile: Add top margin for sidebar toggle */
@media (max-width: 767.98px) {
  .chat-page-wrapper {
    margin-top: .5rem; /* Space for toggle (-1rem + 40px + 1rem space) */
    height: calc(100vh - 56px - .5rem); /* Adjust height accordingly */
  }
}

/* Chat Header Bar - Fixed at top */
.chat-header-bar {
  flex-shrink: 0; /* Don't shrink */
  padding: 1rem 1.5rem;
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  /* z-index removed - was blocking sidebar toggle on mobile */
  position: relative;
}

/* Dark mode chat header */
body[data-theme="dark"] .chat-header-bar {
  background: rgba(0, 0, 0, 0.5);
  border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}

/* Light mode chat header */
body[data-theme="light"] .chat-header-bar {
  background: rgba(255, 255, 255, 0.5);
  border-bottom: 1px solid rgba(0, 0, 0, 0.1);
}

/* Chat Messages Wrapper - Scrollable middle area */
.chat-messages-wrapper {
  flex: 1; /* Take remaining space */
  overflow-y: auto; /* Scrollable */
  overflow-x: hidden;
  position: relative;
  z-index: 10; /* Below header, input, and footer */
  padding: 1rem;
}

/* Chat Messages - Content area */
.chat-messages {
  min-height: 100%; /* Fill wrapper */
  background: transparent; /* Let wrapper handle background */
}

/* Chat Input Area - Fixed above footer */
.chat-input-area-fixed {
  flex-shrink: 0; /* Don't shrink */
  padding: 1rem 1.5rem;
  /* z-index removed - was creating stacking context blocking sidebar on mobile */
  position: relative;
}

/* Footer - Fixed at bottom */
.chat-footer-fixed {
  flex-shrink: 0; /* Don't shrink */
  background: transparent;
  /* z-index removed - was creating stacking context blocking sidebar on mobile */
  position: relative;
}

.chat-footer-fixed .main-footer {
  padding: 0.75rem 1.5rem;
  margin: 0;
  border-top: 1px solid rgba(255, 255, 255, 0.08);
}

[data-theme="light"] .chat-footer-fixed .main-footer {
  border-top: 1px solid rgba(0, 0, 0, 0.08);
}

/* Custom Scrollbar for Chat Messages */
.chat-messages-wrapper::-webkit-scrollbar {
  width: 8px;
}

.chat-messages-wrapper::-webkit-scrollbar-track {
  background: rgba(0, 0, 0, 0.1);
  border-radius: 4px;
}

.chat-messages-wrapper::-webkit-scrollbar-thumb {
  background: rgba(255, 255, 255, 0.2);
  border-radius: 4px;
  transition: background 0.2s ease;
}

.chat-messages-wrapper::-webkit-scrollbar-thumb:hover {
  background: rgba(255, 255, 255, 0.3);
}

[data-theme="light"] .chat-messages-wrapper::-webkit-scrollbar-thumb {
  background: rgba(0, 0, 0, 0.2);
}

[data-theme="light"] .chat-messages-wrapper::-webkit-scrollbar-thumb:hover {
  background: rgba(0, 0, 0, 0.3);
}

/* Mobile Responsive */
@media (max-width: 768px) {
  .chat-page-wrapper {
    height: calc(100vh - 56px);
  }
  
  .chat-header-bar {
    padding: 0.75rem 1rem;
  }
  
  .chat-messages-wrapper {
    padding: 0.5rem;
  }
  
  .chat-input-area-fixed {
    padding: 0.75rem 1rem;
  }
  
  .chat-footer-fixed .main-footer {
    padding: 0.5rem 1rem;
    font-size: 0.875rem;
  }
}

/* ===================================================
   OLD CHAT STYLES (keeping for compatibility)
   =================================================== */

/* Chat Interface */
.chat-container {
  display: flex;
  flex-direction: column;
  height: calc(100vh - 120px);
  max-width: 1200px;
  margin: 0 auto;
  background: var(--mono-white);
  border-radius: var(--radius-lg);
  overflow: hidden;
  width: 100%;
  position: relative; /* For floating button positioning */
}

/* Removed .new-chat-floating-btn - button moved to header */

.chat-header {
  padding: var(--space-lg);
  background: var(--mono-100);
}

.chat-messages {
  flex: 1;
  overflow-y: auto;
  padding: var(--space);
  background: transparent; /* Transparent - wrapper handles background */
}

/* Light theme override for old chat-messages */
[data-theme="light"] .chat-messages {
  background: transparent;
}

.message-wrapper {
  margin-bottom: var(--space);
  animation: fadeInUp 0.3s ease;
}

/* Message typography improvements */
.message-content {
  font-size: 14px;
  line-height: 1.5;
}

.message-user .message-content {
  font-weight: 500;
}

.message-assistant .message-content {
  font-weight: 400;
}

/* Enhanced readability for assistant messages */
.message-assistant .message-content p {
  margin-bottom: 0.5rem;
}

.message-assistant .message-content p:last-child {
  margin-bottom: 0;
}

@keyframes fadeInUp {
  from {
    opacity: 0;
    transform: translateY(10px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.message-bubble {
  /* Centralized width control - single source of truth */
  max-width: min(90%, 940px);  /* 90% of container or 940px, whichever is smaller */
  width: fit-content;
  min-width: 100px;

  /* Visual styling */
  padding: var(--space-sm) var(--space);
  border-radius: 18px;
  box-shadow: var(--shadow-sm);
  word-wrap: break-word;
  font-size: var(--font-size-base);
  font-weight: var(--font-weight-normal);
  line-height: 1.5;

  /* Layout behavior */
  display: inline-block;
  text-align: left;
}

/* User messages - Modern bubble with glass effect */
.message-user {
  margin-left: auto;
  background: linear-gradient(
    135deg,
    rgba(102, 126, 234, 0.15),
    rgba(102, 126, 234, 0.08)
  );
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
  border: 1px solid rgba(0, 0, 0, 0.1); /* Black border with 0.1 opacity */
  color: #ffffff; /* White text for dark theme - HIGH CONTRAST */
  border-bottom-right-radius: 6px;
  font-weight: var(--font-weight-normal);
  display: block;
  margin-right: 0;
}

/* Light theme override for user messages */
[data-theme="light"] .message-user {
  background: linear-gradient(
    135deg,
    rgba(59, 130, 246, 0.12),
    rgba(59, 130, 246, 0.06)
  );
  border: 1px solid rgba(0, 0, 0, 0.1); /* Black border with 0.1 opacity */
  color: #1e40af; /* Darker blue for readability */
}

/* Assistant messages - Clean, minimal design (visual styling only) */
.message-assistant {
  background: transparent;
  color: var(--mono-700);
  box-shadow: none;
  min-width: 160px;
  border-left: 3px solid var(--mono-300);
  border-radius: 0;
  padding-left: var(--space);
  font-weight: var(--font-weight-normal);
  display: block;
  margin-left: 0;
}

/* Remove dark theme duplicate - already handled by light theme override above */

/* Assistant avatar styling */
.assistant-avatar {
  width: 28px;
  height: 28px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  background: var(--mono-100);
  margin-top: 2px;
  flex-shrink: 0;
}

[data-theme="dark"] .assistant-avatar {
  background: var(--mono-100);
}

.assistant-avatar i {
  font-size: 14px;
}

/* ===================================================
   ITERATION INDICATORS - Enhanced UX for AI workflows
   =================================================== */

/* Iteration indicators styling */
.iteration-loading-indicator {
  animation: fadeInUp 0.3s ease-out;
}

.iteration-loading-indicator .message-bubble {
  background: var(--mono-50);
  border: 1px solid var(--mono-200);
  box-shadow: var(--shadow-xs);
  opacity: 0.95;
}

[data-theme="dark"] .iteration-loading-indicator .message-bubble {
  background: var(--mono-100);
  border-color: var(--mono-300);
}

/* Iteration icon transitions */
.iteration-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 20px;
  height: 20px;
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

.iteration-icon[data-status="loading"] {
  transform: scale(1);
}

.iteration-icon[data-status="completed"] {
  transform: scale(1.1);
  animation: checkBounce 0.4s ease-out;
}

.iteration-icon[data-status="failed"] {
  transform: scale(1.1);
  animation: errorShake 0.4s ease-out;
}

/* Iteration text transitions */
.iteration-text {
  transition: all 0.3s ease-out;
}

/* Animation keyframes for iteration feedback */
@keyframes checkBounce {
  0% { transform: scale(1); }
  50% { transform: scale(1.2); }
  100% { transform: scale(1.1); }
}

@keyframes errorShake {
  0%, 100% { transform: translateX(0) scale(1.1); }
  25% { transform: translateX(-2px) scale(1.1); }
  75% { transform: translateX(2px) scale(1.1); }
}

/* Enhanced spinner for iteration loading */
.iteration-loading-indicator .spinner-border-sm {
  width: 14px;
  height: 14px;
  border-width: 2px;
  animation: spinner-border 0.8s linear infinite;
}

/* Status color variants */
.iteration-loading-indicator .text-info {
  color: var(--accent-blue) !important;
}

.iteration-loading-indicator .text-success {
  color: var(--accent-green) !important;
}

.iteration-loading-indicator .text-warning {
  color: var(--accent-yellow) !important;
}

/* Theme controls in sidebar - visual representation of themes */
.theme-controls .theme-toggle-btn {
  font-size: 12px;
  padding: 0.375rem 0.5rem;
  transition: var(--transition);
  border: 1px solid;
}

/* Remove default Bootstrap focus/active styles */
.theme-controls .theme-toggle-btn:focus,
.theme-controls .theme-toggle-btn:active,
.theme-controls .theme-toggle-btn:focus-visible {
  box-shadow: none !important;
  outline: none !important;
}

/* Light button - always light appearance */
.theme-controls .theme-toggle-btn[data-theme="light"] {
  background: var(--mono-100) !important;
  border-color: var(--mono-300) !important;
  color: var(--mono-800) !important;
}

.theme-controls .theme-toggle-btn[data-theme="light"]:hover {
  background: var(--mono-200) !important;
  border-color: var(--mono-400) !important;
  color: var(--mono-900) !important;
}

.theme-controls .theme-toggle-btn[data-theme="light"]:focus,
.theme-controls .theme-toggle-btn[data-theme="light"]:active {
  background: var(--mono-100) !important;
  border-color: var(--mono-300) !important;
  color: var(--mono-800) !important;
}

/* Dark button - always dark appearance */
.theme-controls .theme-toggle-btn[data-theme="dark"] {
  background: var(--mono-800) !important;
  border-color: var(--mono-700) !important;
  color: var(--mono-100) !important;
}

.theme-controls .theme-toggle-btn[data-theme="dark"]:hover {
  background: var(--mono-700) !important;
  border-color: var(--mono-600) !important;
  color: var(--mono-50) !important;
}

.theme-controls .theme-toggle-btn[data-theme="dark"]:focus,
.theme-controls .theme-toggle-btn[data-theme="dark"]:active,
.theme-controls .theme-toggle-btn[data-theme="dark"].active {
  background: var(--mono-100) !important;
  color: var(--mono-700) !important;
}

.theme-controls .theme-toggle-btn.active[data-theme="light"] {
  opacity: 0.8;
}

/* Remove all theme-based overrides - buttons should look the same regardless of current theme */
[data-theme="dark"] .theme-controls .theme-toggle-btn:focus,
[data-theme="dark"] .theme-controls .theme-toggle-btn:active,
[data-theme="dark"] .theme-controls .theme-toggle-btn:focus-visible {
  box-shadow: none !important;
  outline: none !important;
}

[data-theme="dark"] .theme-controls .theme-toggle-btn[data-theme="light"] {
  background: var(--mono-100) !important;
  color: var(--mono-800) !important;
}

[data-theme="dark"] .theme-controls .theme-toggle-btn[data-theme="light"]:hover {
  background: var(--mono-200) !important;
  color: var(--mono-900) !important;
}

[data-theme="dark"] .theme-controls .theme-toggle-btn[data-theme="light"]:focus,
[data-theme="dark"] .theme-controls .theme-toggle-btn[data-theme="light"]:active {
  background: var(--mono-100) !important;
  color: var(--mono-800) !important;
}

[data-theme="dark"] .theme-controls .theme-toggle-btn[data-theme="dark"] {
  background: var(--mono-800) !important;
  color: var(--mono-100) !important;
}

[data-theme="dark"] .theme-controls .theme-toggle-btn[data-theme="dark"]:hover {
  background: var(--mono-700) !important;
  color: var(--mono-50) !important;
}

[data-theme="dark"] .theme-controls .theme-toggle-btn[data-theme="dark"]:focus,
[data-theme="dark"] .theme-controls .theme-toggle-btn[data-theme="dark"]:active,
[data-theme="dark"] .theme-controls .theme-toggle-btn[data-theme="dark"].active {
  background: var(--mono-100) !important;
  color: var(--mono-700) !important;
}

[data-theme="dark"] .theme-controls .theme-toggle-btn.active[data-theme="light"] {
  opacity: 0.8;
}

/* OLD chat-input-area - deprecated, keeping for backward compatibility */
.chat-input-area {
  padding: var(--space);
  background: transparent; /* Handled by wrapper in new layout */
}

/* Light theme override - deprecated */
[data-theme="light"] .chat-input-area {
  background: transparent;
}

.chat-input-group {
  display: flex;
  gap: var(--space-sm);
  align-items: flex-end;
}

.chat-input {
  flex: 1;
  min-height: 44px;
  max-height: 120px;
  resize: none;
  border-radius: var(--radius-lg);
}

.chat-send-btn {
  min-width: 44px;
  height: 44px;
  border-radius: 50%;
  background: var(--accent-blue);
  color: white;
  border: none;
  cursor: pointer;
  transition: var(--transition);
}

.chat-send-btn:hover:not(:disabled) {
  background: var(--accent-blue-hover);
  box-shadow: var(--shadow);
}

/* Chat Bubbles Responsive Behavior - Centralized width control */
@media (max-width: 768px) {
  .message-bubble {
    max-width: min(92%, 400px);  /* Slightly wider on mobile */
  }
}

@media (max-width: 480px) {
  .message-bubble {
    max-width: min(95%, 300px);  /* Even more compact on small phones */
    padding: var(--space-xs) var(--space-sm);  /* Tighter padding */
  }
  
  .message-assistant {
    padding-left: var(--space-sm);  /* Reduce left padding only */
  }
}

/* Login/Register Forms */
.auth-container {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 100vh;
  background: var(--mono-50);
}

.auth-card {
  width: 100%;
  max-width: 400px;
  background: var(--mono-white);
  border-radius: var(--radius-xl);
  box-shadow: var(--shadow-lg);
  overflow: hidden;
}

.auth-header {
  text-align: center;
  padding: var(--space-2xl) var(--space-lg) var(--space-lg);
  background: linear-gradient(135deg, var(--accent-blue), var(--accent-blue-hover));
  color: white;
}

.auth-body {
  padding: var(--space-lg);
}

.auth-footer {
  padding: 0 var(--space-lg) var(--space-lg);
  text-align: center;
}

/* Data Tables */
.data-table-wrapper {
  background: var(--mono-white);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow);
  overflow: hidden;
}

.data-table-header {
  padding: var(--space-lg);
  background: var(--mono-100);
  display: flex;
  justify-content: between;
  align-items: center;
  flex-wrap: wrap;
  gap: var(--space);
}

.data-table-actions {
  display: flex;
  gap: var(--space-sm);
  align-items: center;
}

.data-table {
  width: 100%;
  background-color: var(--mono-50);
  color: var(--mono-900);
}

.data-table th {
  background: var(--mono-50);
  font-weight: var(--font-weight-semibold);
  white-space: nowrap;
  border: none;
  color: var(--mono-900);
}

.data-table td {
  vertical-align: middle;
  border: none;
  background-color: var(--mono-50);
  color: var(--mono-900);
}

.data-table tbody tr:hover {
  background-color: var(--mono-100);
}

/* Action Buttons in Tables */
.table-actions {
  display: flex;
  gap: var(--space-xs);
}

.table-actions .btn {
  padding: var(--space-xs) var(--space-sm);
  font-size: var(--font-size-sm);
}

/* Status Indicators */
.status-indicator {
  display: inline-flex;
  align-items: center;
  gap: var(--space-xs);
  padding: var(--space-xs) var(--space-sm);
  border-radius: var(--radius);
  font-size: var(--font-size-sm);
  font-weight: var(--font-weight-medium);
}

.status-active {
  background: color-mix(in srgb, var(--accent-green) 15%, var(--mono-white));
  color: var(--accent-green);
}

.status-inactive {
  background: color-mix(in srgb, var(--mono-500) 15%, var(--mono-white));
  color: var(--mono-600);
}

.status-pending {
  background: color-mix(in srgb, var(--accent-yellow) 15%, var(--mono-white));
  color: var(--accent-yellow);
}

.status-error {
  background: color-mix(in srgb, var(--accent-red) 15%, var(--mono-white));
  color: var(--accent-red);
}

/* File Upload */
.file-upload-area {
  border: 2px dashed var(--mono-300);
  border-radius: var(--radius-lg);
  padding: var(--space-2xl);
  text-align: center;
  transition: var(--transition);
  cursor: pointer;
}

.file-upload-area:hover {
  border-color: var(--accent-blue);
  background: color-mix(in srgb, var(--accent-blue) 5%, var(--mono-white));
}

.file-upload-area.drag-active {
  border-color: var(--accent-blue);
  background: color-mix(in srgb, var(--accent-blue) 10%, var(--mono-white));
}

/* Progress Indicators */
.progress {
  height: 8px;
  background: var(--mono-200);
  border-radius: var(--radius);
  overflow: hidden;
}

.progress-bar {
  height: 100%;
  background: var(--accent-blue);
  border-radius: var(--radius);
  transition: width 0.3s ease;
}

.progress-bar-success {
  background: var(--accent-green);
}

.progress-bar-warning {
  background: var(--accent-yellow);
}

.progress-bar-danger {
  background: var(--accent-red);
}

/* Loading States */
.loading-spinner {
  display: inline-block;
  width: 20px;
  height: 20px;
  border: 2px solid var(--mono-300);
  border-radius: 50%;
  border-top-color: var(--accent-blue);
  animation: spin 1s linear infinite;
}

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

.loading-overlay {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: color-mix(in srgb, var(--mono-950) 50%, transparent);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: var(--z-modal);
}

.loading-content {
  background: var(--mono-white);
  padding: var(--space-xl);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-lg);
  text-align: center;
}

/* Breadcrumbs */
.breadcrumb {
  display: flex;
  flex-wrap: wrap;
  padding: 0;
  margin: 0;
  list-style: none;
  background: none;
}

.breadcrumb-item {
  display: flex;
  align-items: center;
}

.breadcrumb-item + .breadcrumb-item::before {
  content: '/';
  padding: 0 var(--space-sm);
  color: var(--mono-500);
}

.breadcrumb-item.active {
  color: var(--mono-600);
}

/* Page Header */
.page-header {
  padding: var(--space-lg) 0;
  margin-bottom: var(--space-lg);
}

.page-title {
  margin: 0;
  font-size: var(--font-size-2xl);
  font-weight: var(--font-weight-semibold);
  color: var(--mono-900);
}

.page-subtitle {
  margin: var(--space-xs) 0 0;
  color: var(--mono-600);
  font-size: var(--font-size);
}

.page-actions {
  margin-top: var(--space);
  display: flex;
  gap: var(--space-sm);
}

/* Modals */
.modal-backdrop {
  position: fixed;
  top: 0;
  left: 0;
  z-index: var(--z-modal-backdrop) !important;
  width: 100vw;
  height: 100vh;
  background-color: color-mix(in srgb, var(--mono-950) 50%, transparent);
}

.modal-backdrop.show {
  z-index: var(--z-modal-backdrop) !important;
  opacity: 0.1 !important;
  background-color: rgba(0, 0, 0, 1) !important;
}

[data-theme="light"] .modal-backdrop.show {
  background-color: rgba(255, 255, 255, 1) !important;
}

.modal {
  position: fixed;
  top: 0;
  left: 0;
  z-index: var(--z-modal);
  display: none;
  width: 100%;
  height: 100%;
  overflow-x: hidden;
  overflow-y: auto;
  outline: 0;
  /* Add flexbox centering */
  align-items: center;
  justify-content: center;
}

.modal.show {
  display: flex !important;
  z-index: var(--z-modal) !important;
}

.modal[style*="display: block"] {
  display: flex !important;
  z-index: var(--z-modal) !important;
}

.modal.fade.show {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  z-index: var(--z-modal) !important;
}

.modal:not(.fade) {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  z-index: var(--z-modal) !important;
}

.modal-dialog {
  position: relative;
  width: auto;
  max-width: 500px;
  margin: var(--space-lg);
  pointer-events: none;
  /* Ensure proper centering */
  width: 100%;
  /* Ensure dialog is above backdrop */
  z-index: calc(var(--z-modal) + 1);
}

/* Override for larger modal sizes */
.modal-dialog.modal-lg {
  max-width: 800px !important;
}

.modal-dialog.modal-xl {
  max-width: 1140px !important;
}

.modal-content {
  position: relative;
  display: flex;
  flex-direction: column;
  width: 100%;
  pointer-events: auto;
  background-color: var(--mono-50);
  border: 1px solid var(--mono-100);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-lg);
  outline: 0;
}

.modal-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: var(--space-lg);
}

.modal-title {
  margin: 0;
  font-size: var(--font-size-lg);
  font-weight: var(--font-weight-semibold);
}

.modal-body {
  position: relative;
  flex: 1 1 auto;
  padding: var(--space-lg);
}

.modal-footer {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: var(--space-sm);
  padding: var(--space-lg);
}

/* Ultra-specific selectors to override Bootstrap inline styles */
div.modal[style*="display"][style*="block"],
div.modal.fade[style*="display"][style*="block"],
div.modal.show[style*="display"][style*="block"],
.modal[style*="display: block"],
.modal.fade[style*="display: block"],
.modal.show[style*="display: block"] {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
}

/* Force center positioning for modal dialogs */
.modal .modal-dialog {
  margin: 0 auto !important;
  width: 100% !important;
  max-width: 500px !important;
  transform: none !important;
}

/* Override for larger modal sizes with higher specificity */
.modal .modal-dialog.modal-lg {
  max-width: 800px !important;
}

.modal .modal-dialog.modal-xl {
  max-width: 1140px !important;
}

/* Additional modal centering support for Bootstrap 5 */
.modal.fade:not(.show) {
  display: none !important;
}

.modal.fade.show {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
}

.modal:not(.fade) {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
}

/* Ensure modal shows as flex regardless of Bootstrap JS */
.modal-open .modal {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
}

/* ===================================================
   END OF MBA.AI ENTERPRISE DESIGN SYSTEM
   =================================================== */

/* ===================================================
   MISSING APPLICATION-SPECIFIC CLASSES
   Classes that were lost during refactoring
   =================================================== */

/* Login Page Specific Styling */
.login-container {
  min-height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: var(--space-lg);
  background: transparent; /* Allow body background to show */
}

.login-card {
  width: 100%;
  max-width: 400px;
  margin: 0 auto;
  padding: var(--space-xl);
  /* Glass Morphism Effect - Transparent with frost & liquid feel */
  background: linear-gradient(
    135deg,
    rgba(255, 255, 255, 0.12),
    rgba(255, 255, 255, 0.06)
  );
  backdrop-filter: blur(24px) saturate(160%);
  -webkit-backdrop-filter: blur(24px) saturate(160%);
  border: 1px solid rgba(255, 255, 255, 0.2);
  border-radius: var(--radius-xl);
  box-shadow: 
    0 8px 32px 0 rgba(0, 0, 0, 0.37),
    0 2px 8px 0 rgba(0, 0, 0, 0.2),
    inset 0 2px 4px 0 rgba(255, 255, 255, 0.25), /* Top highlight - cembung */
    inset 0 -2px 4px 0 rgba(0, 0, 0, 0.1); /* Bottom shadow - depth */
  overflow: visible; /* Allow glow to show */
  transition: all 0.3s ease;
  position: relative;
}

/* Liquid drop effect - subtle outer glow */
.login-card::before {
  content: '';
  position: absolute;
  inset: -2px;
  border-radius: var(--radius-xl);
  background: linear-gradient(
    135deg,
    rgba(255, 255, 255, 0.15),
    rgba(255, 255, 255, 0.05)
  );
  z-index: -1;
  opacity: 0;
  transition: opacity 0.3s ease;
}

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

.login-card:hover {
  border-color: rgba(255, 255, 255, 0.3);
  box-shadow: 
    0 16px 48px 0 rgba(0, 0, 0, 0.45),
    0 4px 16px 0 rgba(0, 0, 0, 0.25),
    inset 0 2px 6px 0 rgba(255, 255, 255, 0.35),
    inset 0 -2px 6px 0 rgba(0, 0, 0, 0.15);
  transform: translateY(-4px);
}

/* Register Page Specific Styling - Wider Form */
.register-container {
  min-height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: var(--space-lg);
  background: transparent; /* Allow body background to show */
}

.register-card {
  width: 100%;
  max-width: 600px; /* Wider than login */
  margin: 0 auto;
  padding: var(--space-xl);
  /* Glass Morphism Effect - Transparent with frost & liquid feel */
  background: linear-gradient(
    135deg,
    rgba(255, 255, 255, 0.12),
    rgba(255, 255, 255, 0.06)
  );
  backdrop-filter: blur(24px) saturate(160%);
  -webkit-backdrop-filter: blur(24px) saturate(160%);
  border: 1px solid rgba(255, 255, 255, 0.2);
  border-radius: var(--radius-xl);
  box-shadow: 
    0 8px 32px 0 rgba(0, 0, 0, 0.37),
    0 2px 8px 0 rgba(0, 0, 0, 0.2),
    inset 0 2px 4px 0 rgba(255, 255, 255, 0.25), /* Top highlight - cembung */
    inset 0 -2px 4px 0 rgba(0, 0, 0, 0.1); /* Bottom shadow - depth */
  overflow: visible; /* Allow glow to show */
  transition: all 0.3s ease;
  position: relative;
}

/* Liquid drop effect - subtle outer glow */
.register-card::before {
  content: '';
  position: absolute;
  inset: -2px;
  border-radius: var(--radius-xl);
  background: linear-gradient(
    135deg,
    rgba(255, 255, 255, 0.15),
    rgba(255, 255, 255, 0.05)
  );
  z-index: -1;
  opacity: 0;
  transition: opacity 0.3s ease;
}

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

.register-card:hover {
  border-color: rgba(255, 255, 255, 0.3);
  box-shadow: 
    0 16px 48px 0 rgba(0, 0, 0, 0.45),
    0 4px 16px 0 rgba(0, 0, 0, 0.25),
    inset 0 2px 6px 0 rgba(255, 255, 255, 0.35),
    inset 0 -2px 6px 0 rgba(0, 0, 0, 0.15);
  transform: translateY(-4px);
}

/* Logo Circular - Login/Register Pages */
.logo-circular {
  width: 80px;
  height: 80px;
  border-radius: 50%;
  object-fit: cover;
  box-shadow: var(--shadow-sm);
}

/* Extended Margin/Padding Utilities */
.mb-1 { margin-bottom: 0.25rem !important; }
.mb-2 { margin-bottom: 0.5rem !important; }
.mb-3 { margin-bottom: 1rem !important; }
.mb-4 { margin-bottom: 1.5rem !important; }
.mb-5 { margin-bottom: 3rem !important; }

.mt-1 { margin-top: 0.25rem !important; }
.mt-2 { margin-top: 0.5rem !important; }
.mt-3 { margin-top: 1rem !important; }
.mt-4 { margin-top: 1.5rem !important; }
.mt-5 { margin-top: 3rem !important; }

.ms-1 { margin-left: 0.25rem !important; }
.ms-2 { margin-left: 0.5rem !important; }
.ms-3 { margin-left: 1rem !important; }
.ms-4 { margin-left: 1.5rem !important; }
.ms-5 { margin-left: 3rem !important; }

.me-1 { margin-right: 0.25rem !important; }
.me-2 { margin-right: 0.5rem !important; }
.me-3 { margin-right: 1rem !important; }
.me-4 { margin-right: 1.5rem !important; }
.me-5 { margin-right: 3rem !important; }

.pb-1 { padding-bottom: 0.25rem !important; }
.pb-2 { padding-bottom: 0.5rem !important; }
.pb-3 { padding-bottom: 1rem !important; }
.pb-4 { padding-bottom: 1.5rem !important; }
.pb-5 { padding-bottom: 3rem !important; }

.pt-1 { padding-top: 0.25rem !important; }
.pt-2 { padding-top: 0.5rem !important; }
.pt-3 { padding-top: 1rem !important; }
.pt-4 { padding-top: 1.5rem !important; }
.pt-5 { padding-top: 3rem !important; }

.ps-1 { padding-left: 0.25rem !important; }
.ps-2 { padding-left: 0.5rem !important; }
.ps-3 { padding-left: 1rem !important; }
.ps-4 { padding-left: 1.5rem !important; }
.ps-5 { padding-left: 3rem !important; }

.pe-1 { padding-right: 0.25rem !important; }
.pe-2 { padding-right: 0.5rem !important; }
.pe-3 { padding-right: 1rem !important; }
.pe-4 { padding-right: 1.5rem !important; }
.pe-5 { padding-right: 3rem !important; }

/* Gap Utilities for Flexbox/Grid */
.gap-1 { gap: 0.25rem !important; }
.gap-2 { gap: 0.5rem !important; }
.gap-3 { gap: 1rem !important; }
.gap-4 { gap: 1.5rem !important; }
.gap-5 { gap: 3rem !important; }

/* Container Utilities */
.container-fluid {
  width: 100%;
  padding-right: var(--space);
  padding-left: var(--space);
  margin-right: auto;
  margin-left: auto;
}

/* Text Utilities */
.text-decoration-none { text-decoration: none !important; }
.text-uppercase { text-transform: uppercase !important; }
.text-lowercase { text-transform: lowercase !important; }
.text-capitalize { text-transform: capitalize !important; }

.small { font-size: var(--font-size-sm) !important; }

/* Width/Height Utilities */
.w-100 { width: 100% !important; }
.w-75 { width: 75% !important; }
.w-50 { width: 50% !important; }
.w-25 { width: 25% !important; }

.h-100 { height: 100% !important; }
.h-75 { height: 75% !important; }
.h-50 { height: 50% !important; }
.h-25 { height: 25% !important; }

/* Visibility Utilities */
.invisible { visibility: hidden !important; }
.visible { visibility: visible !important; }

/* Position Utilities */
.top-0 { top: 0 !important; }
.bottom-0 { bottom: 0 !important; }
.start-0 { left: 0 !important; }
.end-0 { right: 0 !important; }

/* Overflow Utilities */
.overflow-hidden { overflow: hidden !important; }
.overflow-auto { overflow: auto !important; }
.overflow-scroll { overflow: scroll !important; }

/* Responsive Utilities for Mobile */
@media (max-width: 576px) {
  .login-container,
  .register-container {
    padding: var(--space);
  }
  
  .login-card,
  .register-card {
    max-width: 100%;
    margin: 0;
  }
  
  .logo-circular {
    width: 60px;
    height: 60px;
  }
}

/* Tablet and Desktop Responsive for Register */
@media (min-width: 768px) {
  .register-card {
    max-width: 700px; /* Wider on tablets */
  }
}

@media (min-width: 992px) {
  .register-card {
    max-width: 800px; /* Even wider on desktop */
  }
}

/* Two-column layout for register form on larger screens */
@media (min-width: 768px) {
  .register-two-column {
    display: grid !important;
    grid-template-columns: 1fr 1fr !important;
    gap: 1rem !important;
    align-items: start !important;
    width: 100% !important;
    max-width: 100% !important;
    overflow: hidden !important;
    box-sizing: border-box !important;
  }
  
  .register-full-width {
    grid-column: 1 / -1 !important;
  }
  
  /* Ensure form fields maintain consistent width - STRICT ENFORCEMENT */
  .register-two-column > .mb-3 {
    min-width: 0 !important; /* Allow content to shrink */
    max-width: 100% !important; /* Prevent expansion */
    overflow: hidden !important; /* Prevent content overflow */
    box-sizing: border-box !important;
  }
  
  .register-two-column .form-control,
  .register-two-column .form-select {
    width: 100% !important;
    min-width: 0 !important;
    max-width: 100% !important;
    box-sizing: border-box !important;
  }
  
  /* CRITICAL: Force Select2 to respect container bounds */
  .register-two-column .select2-container {
    width: 100% !important;
    min-width: 0 !important;
    max-width: 100% !important;
    box-sizing: border-box !important;
    overflow: hidden !important;
    contain: layout !important; /* CSS containment for layout stability */
  }
  
  .register-two-column .select2-container .select2-selection {
    width: 100% !important;
    min-width: 0 !important;
    max-width: 100% !important;
    box-sizing: border-box !important;
  }

  /* Additional container constraints to prevent any layout shifts */
  .register-two-column .form-group {
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    overflow: hidden !important;
    box-sizing: border-box !important;
  }

  .register-two-column .input-group {
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    flex-wrap: nowrap !important;
    box-sizing: border-box !important;
  }
}

/* Select2 Styling for Register Form */
.register-card .select2-container {
  width: 100% !important;
}

.register-card .select2-container .select2-selection--single {
  height: 50px;
  min-height: 50px;
  border: 1px solid var(--mono-200);
  border-radius: var(--radius);
  background-color: var(--mono-white);
  color: var(--mono-800);
  padding: 0.75rem 1rem;
  font-size: var(--font-size);
  font-weight: var(--font-weight-normal);
  line-height: var(--leading-normal);
  box-sizing: border-box;
}

.register-card .select2-container .select2-selection--single .select2-selection__rendered {
  line-height: 1.5;
  color: var(--mono-800);
  padding-left: 0;
  padding-right: 2.5rem; /* Space for arrow */
  white-space: nowrap !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
  max-width: calc(100% - 2.5rem) !important;
  display: block !important;
  box-sizing: border-box !important;
}

.register-card .select2-container .select2-selection--single .select2-selection__arrow {
  height: 50px;
  right: 0.75rem;
  top: 0;
}

/* Focus state untuk konsistensi dengan form-select */
.register-card .select2-container--open .select2-selection--single,
.register-card .select2-container--focus .select2-selection--single {
  border-color: var(--accent-blue);
  box-shadow: 0 0 0 0.2rem color-mix(in srgb, var(--accent-blue) 15%, transparent);
  outline: none;
  background-color: var(--mono-white);
  color: var(--mono-600);
}

/* Focus state untuk rendered text */
.register-card .select2-container--open .select2-selection__rendered,
.register-card .select2-container--focus .select2-selection__rendered {
  color: var(--mono-600) !important;
}

.register-card .select2-dropdown {
  background-color: var(--mono-white);
  border: 1px solid var(--mono-200);
  border-radius: var(--radius);
  box-shadow: var(--shadow-md);
  z-index: 9999;
  min-width: 250px; /* Minimum width for dropdown */
  max-width: 400px; /* Maximum width to prevent overflow */
}

.register-card .select2-results__option {
  color: var(--mono-800);
  padding: 0.5rem 0.75rem;
  white-space: normal;
  word-wrap: break-word;
  font-size: var(--font-size);
}

.register-card .select2-results__option--highlighted {
  background-color: var(--accent-blue);
  color: white;
}

/* Force consistent width for Kode Satker select - ULTRA STRICT */
#kodeSatkerSelect + .select2-container {
  min-width: 100% !important;
  max-width: 100% !important;
  width: 100% !important;
  overflow: hidden !important;
}

#kodeSatkerSelect + .select2-container .select2-selection--single {
  width: 100% !important;
  min-width: 100% !important;
  max-width: 100% !important;
  box-sizing: border-box !important;
  overflow: hidden !important;
  /* Ensure same styling as form-select */
  height: 50px !important;
  min-height: 50px !important;
  border: 1px solid var(--mono-200) !important;
  background-color: var(--mono-white) !important;
  color: var(--mono-800) !important;
  padding: 0.75rem 1rem !important;
}

#kodeSatkerSelect + .select2-container .select2-selection__rendered {
  width: calc(100% - 3rem) !important;
  max-width: calc(100% - 3rem) !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
  white-space: nowrap !important;
  display: inline-block !important;
  /* Consistent styling with form elements */
  color: var(--mono-800) !important;
  padding-left: 0 !important;
  padding-right: 2.5rem !important;
  line-height: 1.5 !important;
  font-size: var(--font-size) !important;
  font-weight: var(--font-weight-normal) !important;
}

/* Arrow positioning untuk #kodeSatkerSelect */
#kodeSatkerSelect + .select2-container .select2-selection__arrow {
  height: 50px !important;
  right: 0.75rem !important;
  top: 0 !important;
}

/* Focus state untuk #kodeSatkerSelect agar konsisten dengan form-select */
#kodeSatkerSelect + .select2-container--open .select2-selection--single,
#kodeSatkerSelect + .select2-container--focus .select2-selection--single {
  border-color: var(--accent-blue) !important;
  box-shadow: 0 0 0 0.2rem color-mix(in srgb, var(--accent-blue) 15%, transparent) !important;
  outline: none !important;
  background-color: var(--mono-white) !important;
  color: var(--mono-600) !important;
}

/* Focus state untuk rendered text pada #kodeSatkerSelect */
#kodeSatkerSelect + .select2-container--open .select2-selection__rendered,
#kodeSatkerSelect + .select2-container--focus .select2-selection__rendered {
  color: var(--mono-600) !important;
}

/* Placeholder styling untuk Select2 agar konsisten */
.register-card .select2-selection__placeholder {
  color: var(--mono-500) !important;
  font-style: normal !important;
}

#kodeSatkerSelect + .select2-container .select2-selection__placeholder {
  color: var(--mono-500) !important;
  font-style: normal !important;
}

/* Additional CSS class for fixed width containers */
.select2-container-fixed-width {
  width: 100% !important;
  max-width: 100% !important;
  min-width: 100% !important;
}

.select2-container-fixed-width .select2-selection {
  width: 100% !important;
  max-width: 100% !important;
  overflow: hidden !important;
}

.select2-container-fixed-width .select2-selection__rendered {
  max-width: calc(100% - 3rem) !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
  white-space: nowrap !important;
}

/* Kode Satker field state management */
.mb-3.show-select #kodeSatkerSelect {
  display: block !important;
  visibility: visible !important;
  opacity: 1 !important;
}

.mb-3.show-select #kodeSatkerInput {
  display: none !important;
  visibility: hidden !important;
  opacity: 0 !important;
}

.mb-3.show-select .select2-container {
  display: block !important;
  visibility: visible !important;
  opacity: 1 !important;
}

.mb-3.show-input #kodeSatkerSelect {
  display: none !important;
  visibility: hidden !important;
  opacity: 0 !important;
}

.mb-3.show-input #kodeSatkerInput {
  display: block !important;
  visibility: visible !important;
  opacity: 1 !important;
}

.mb-3.show-input .select2-container {
  display: none !important;
  visibility: hidden !important;
  opacity: 0 !important;
}

.mb-3.hide-all #kodeSatkerSelect,
.mb-3.hide-all #kodeSatkerInput {
  display: none !important;
  visibility: hidden !important;
  opacity: 0 !important;
}

.mb-3.hide-all .select2-container {
  display: none !important;
  visibility: hidden !important;
  opacity: 0 !important;
}

/* Smooth transitions for Kode Satker field switching */
#kodeSatkerSelect,
#kodeSatkerInput,
.select2-container {
  transition: opacity 0.3s ease, visibility 0.3s ease;
}

/* ===================================================
   BOOTSTRAP-COMPATIBLE CLASSES
   Additional classes for Bootstrap compatibility
   =================================================== */

/* Background Utilities */
.bg-light { background-color: var(--mono-100) !important; }
.bg-white { background-color: var(--mono-50) !important; }

/* Flex Utilities */
.flex-grow-1 { flex-grow: 1 !important; }
.flex-shrink-1 { flex-shrink: 1 !important; }
.h-100 { height: 100% !important; }

/* Button Groups & Toolbars */
.btn-group {
  position: relative;
  display: inline-flex;
  vertical-align: middle;
}

.btn-group > .btn {
  position: relative;
  flex: 1 1 auto;
  margin-right: -1px;
}

.btn-group > .btn:not(:last-child) {
  border-top-right-radius: 0;
  border-bottom-right-radius: 0;
}

.btn-group > .btn:not(:first-child) {
  border-top-left-radius: 0;
  border-bottom-left-radius: 0;
}

.btn-toolbar {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-start;
  gap: var(--space-sm);
}

/* Layout Components */
.main-header {
  background: var(--mono-50);
  box-shadow: var(--shadow-sm);
  position: sticky;
  top: 0;
  z-index: var(--z-sticky);
}

.sidebar-overlay {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: color-mix(in srgb, var(--mono-950) 50%, transparent);
  z-index: var(--z-modal-backdrop);
  display: none;
}

/* Sidebar toggle styling moved to mobile media query only - see @media (max-width: 767.98px) */

/* Theme-aware Text Colors */
.text-primary {
  color: var(--mono-900) !important;
}

.text-secondary {
  color: var(--mono-700) !important;
}

.text-accent {
  color: var(--accent-blue) !important;
}

/* Header Actions */
.header-actions {
  display: flex;
  align-items: center;
  gap: var(--space-sm);
}

.welcome-message {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  min-height: 200px;
  color: var(--mono-600);
}

/* Form Controls Enhanced */
.form-floating {
  position: relative;
}

.form-floating > .form-control {
  height: calc(3.5rem + 2px);
  line-height: 1.25;
  padding: 1rem 0.75rem 0.25rem;
}

.form-floating > label {
  position: absolute;
  top: 0;
  left: 0;
  height: 100%;
  padding: 1rem 0.75rem;
  pointer-events: none;
  border: 1px solid transparent;
  transform-origin: 0 0;
  transition: opacity 0.1s ease-in-out, transform 0.1s ease-in-out;
  color: var(--mono-600);
}

.form-floating > .form-control:focus ~ label,
.form-floating > .form-control:not(:placeholder-shown) ~ label {
  opacity: 0.65;
  transform: scale(0.85) translateY(-0.5rem) translateX(0.15rem);
}

/* Input Groups */
.input-group {
  position: relative;
  display: flex;
  flex-wrap: wrap;
  align-items: stretch;
  width: 100%;
}

.input-group > .form-control {
  position: relative;
  flex: 1 1 auto;
  width: 1%;
  min-width: 0;
}

.input-group-text {
  display: flex;
  align-items: center;
  padding: 0.75rem 1rem;
  font-size: var(--font-size);
  font-weight: var(--font-weight-normal);
  line-height: var(--leading-normal);
  color: var(--mono-700);
  text-align: center;
  white-space: nowrap;
  background-color: var(--mono-200);
  border: 1px solid var(--mono-300);
}

.input-group > .form-control:not(:last-child) {
  border-top-right-radius: 0;
  border-bottom-right-radius: 0;
}

.input-group > .form-control:not(:first-child) {
  border-top-left-radius: 0;
  border-bottom-left-radius: 0;
}

.input-group > .input-group-text:not(:last-child) {
  border-top-right-radius: 0;
  border-bottom-right-radius: 0;
}

.input-group > .input-group-text:not(:first-child) {
  border-top-left-radius: 0;
  border-bottom-left-radius: 0;
}

/* List Group */
.list-group {
  display: flex;
  flex-direction: column;
  padding-left: 0;
  margin-bottom: 0;
  border-radius: var(--radius);
}

.list-group-item {
  position: relative;
  display: block;
  padding: var(--space-sm) var(--space);
  color: var(--mono-800);
  background-color: var(--mono-white);
  border: 1px solid var(--mono-200);
  text-decoration: none;
}

.list-group-item:first-child {
  border-top-left-radius: inherit;
  border-top-right-radius: inherit;
}

.list-group-item:last-child {
  border-bottom-right-radius: inherit;
  border-bottom-left-radius: inherit;
}

.list-group-item:hover {
  z-index: 1;
  color: var(--mono-900);
  background-color: var(--mono-100);
}

.list-group-item.active {
  z-index: 2;
  color: white;
  background-color: var(--accent-blue);
  border-color: var(--accent-blue);
}

/* Additional Missing Utility Classes */

/* Font Weight Extensions */
.fw-light { font-weight: 300 !important; }
.fw-bolder { font-weight: 900 !important; }

/* Font Size Extensions */
.fs-1 { font-size: var(--font-size-3xl) !important; }
.fs-2 { font-size: var(--font-size-2xl) !important; }
.fs-3 { font-size: var(--font-size-xl) !important; }
.fs-4 { font-size: var(--font-size-lg) !important; }
.fs-5 { font-size: var(--font-size) !important; }
.fs-6 { font-size: var(--font-size-sm) !important; }

/* Line Height */
.lh-1 { line-height: 1 !important; }
.lh-sm { line-height: var(--leading-tight) !important; }
.lh-base { line-height: var(--leading-normal) !important; }
.lh-lg { line-height: var(--leading-relaxed) !important; }

/* Vertical Alignment */
.align-baseline { vertical-align: baseline !important; }
.align-top { vertical-align: top !important; }
.align-middle { vertical-align: middle !important; }
.align-bottom { vertical-align: bottom !important; }
.align-text-bottom { vertical-align: text-bottom !important; }
.align-text-top { vertical-align: text-top !important; }

/* Float */
.float-start { float: left !important; }
.float-end { float: right !important; }
.float-none { float: none !important; }

/* User Select */
.user-select-all { user-select: all !important; }
.user-select-auto { user-select: auto !important; }
.user-select-none { user-select: none !important; }

/* Pointer Events */
.pe-none { pointer-events: none !important; }
.pe-auto { pointer-events: auto !important; }

/* Cursor */
.cursor-pointer { cursor: pointer !important; }

/* Opacity */
.opacity-25 { opacity: 0.25 !important; }
.opacity-50 { opacity: 0.5 !important; }
.opacity-75 { opacity: 0.75 !important; }
.opacity-100 { opacity: 1 !important; }

/* Disabled State */
.disabled {
  pointer-events: none;
  opacity: 0.65;
}

/* Screen Reader Only */
.visually-hidden {
  position: absolute !important;
  width: 1px !important;
  height: 1px !important;
  padding: 0 !important;
  margin: -1px !important;
  overflow: hidden !important;
  clip: rect(0, 0, 0, 0) !important;
  white-space: nowrap !important;
  border: 0 !important;
}

/* Focus Outline Utilities */
.focus-ring:focus {
  outline: 0;
  box-shadow: 0 0 0 0.25rem color-mix(in srgb, var(--accent-blue) 25%, transparent);
}

/* Ratio (Aspect Ratio) */
.ratio {
  position: relative;
  width: 100%;
}

.ratio::before {
  display: block;
  padding-top: var(--aspect-ratio);
  content: "";
}

.ratio > * {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}

.ratio-1x1 {
  --aspect-ratio: 100%;
}

.ratio-4x3 {
  --aspect-ratio: 75%;
}

.ratio-16x9 {
  --aspect-ratio: 56.25%;
}

.ratio-21x9 {
  --aspect-ratio: 42.857143%;
}

/* ===================================================
   LOGO & BRAND STYLING
   Logo styling for sidebar and other components
   =================================================== */

/* Sidebar Logo Styling */
.sidebar-logo {
  width: 50px !important;
  height: 50px !important;
  max-width: 50px !important;
  max-height: 50px !important;
  border-radius: 50% !important;
  border: 2px solid rgba(255, 255, 255, 0.3) !important;
  background: var(--mono-white) !important;
  padding: 4px !important;
  object-fit: cover;
  transition: var(--transition);
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
}

.sidebar-logo:hover {
  border-color: rgba(255, 255, 255, 0.6) !important;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
  transform: scale(1.05);
}

/* Brand Text in Sidebar */
.sidebar-brand {
  align-items: center;
  gap: var(--space);
  text-decoration: none;
  color: var(--mono-800);
  font-weight: var(--font-weight-semibold);
}

.sidebar-brand:hover {
  color: var(--mono-900);
  text-decoration: none;
}

.sidebar-brand-text {
  font-size: var(--font-size-lg);
  font-weight: var(--font-weight-bold);
  color: var(--mono-900);
}

/* Chat Robot Icon */
.chat-robot-icon {
  font-size: 4rem;
  color: var(--mono-600) !important;
  transition: var(--transition);
}

.chat-robot-icon:hover {
  color: var(--mono-700) !important;
}

/* Chat Input Textarea Specific */
.chat-input-textarea {
  resize: none !important;
  max-height: 120px !important;
  border-radius: var(--radius-lg) !important;
  background-color: var(--mono-50) !important;
  border-color: var(--mono-300) !important;
  transition: var(--transition);
}

.chat-input-textarea:focus {
  border-color: var(--accent-blue) !important;
  box-shadow: 0 0 0 0.2rem color-mix(in srgb, var(--accent-blue) 15%, transparent) !important;
}

/* Modern Chat Input Design - Glass Effect */
.modern-input-container {
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border-radius: var(--radius-xl);
  padding: var(--space-sm);
  transition: var(--transition);
  display: flex;
  flex-direction: column;
  width: 100%;
}

/* Dark mode input container */
body[data-theme="dark"] .modern-input-container {
  background: rgba(0, 0, 0, 0.5);
  border: 2px solid rgba(255, 255, 255, 0.15);
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.2);
}

body[data-theme="dark"] .modern-input-container:focus-within {
  border-color: rgba(102, 126, 234, 0.5);
  box-shadow: 0 4px 16px rgba(102, 126, 234, 0.25);
}

/* Light mode input container */
body[data-theme="light"] .modern-input-container {
  background: rgba(255, 255, 255, 0.5);
  border: 2px solid rgba(0, 0, 0, 0.15);
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.6);
}

body[data-theme="light"] .modern-input-container:focus-within {
  border-color: rgba(59, 130, 246, 0.5);
  box-shadow: 0 4px 16px rgba(59, 130, 246, 0.2);
}

.input-wrapper {
  display: flex;
  align-items: flex-end;
  gap: var(--space-sm);
  min-height: 44px;
  width: 100%;
}

.modern-chat-input {
  flex: 1;
  border: none !important;
  outline: none !important;
  box-shadow: none !important;
  background: transparent !important;
  resize: none !important;
  overflow-y: hidden !important;
  font-size: 1rem;
  line-height: 1.5;
  padding: var(--space-xs) var(--space-sm);
  min-height: 44px;
  max-height: 120px;
  color: var(--mono-900);
  word-wrap: break-word;
  white-space: pre-wrap;
}

.modern-chat-input::placeholder {
  color: var(--mono-500);
  font-style: italic;
}

.input-actions {
  display: flex;
  align-items: center;
  gap: var(--space-xs);
}

.btn-send {
  background: var(--accent-blue);
  color: white;
  border: none;
  border-radius: 50%;
  width: 40px;
  height: 40px;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: var(--transition);
  font-size: 1rem;
  box-shadow: 0 2px 8px color-mix(in srgb, var(--accent-blue) 25%, transparent);
}

.btn-send:hover {
  background: var(--accent-blue-hover);
  transform: translateY(-1px);
  box-shadow: 0 4px 12px color-mix(in srgb, var(--accent-blue) 35%, transparent);
}

.btn-send:active {
  transform: translateY(0);
  box-shadow: 0 2px 6px color-mix(in srgb, var(--accent-blue) 30%, transparent);
}

.btn-send:disabled {
  background: var(--mono-400);
  cursor: not-allowed;
  transform: none;
  box-shadow: none;
  opacity: 0.6;
}

.btn-send.btn-disabled {
  background: var(--mono-400);
  cursor: not-allowed;
  transform: none;
  box-shadow: none;
  opacity: 0.6;
}

.input-hints {
  margin-top: var(--space-xs);
  padding: 0 var(--space-sm);
}

.input-hints small {
  display: flex;
  align-items: center;
  gap: var(--space-xs);
  color: var(--mono-600);
}

.chat-disclaimer {
  margin-top: var(--space-sm);
  text-align: center;
  padding: 0 var(--space);
}

.chat-disclaimer small {
  color: var(--mono-300); /* More contrast for dark theme */
  font-size: 0.85rem;
}

/* Light theme - darker text for better contrast */
[data-theme="light"] .chat-disclaimer small {
  color: var(--mono-700);
}

/* Remove duplicate dark theme rules - already handled above */

/* Mobile Responsive for Chat Input */
@media (max-width: 768px) {
  .modern-input-container {
    border-radius: var(--radius-lg);
    padding: var(--space-xs);
  }
  
  .btn-send {
    width: 36px;
    height: 36px;
    font-size: 0.9rem;
  }
  
  .modern-chat-input {
    font-size: 0.95rem;
    padding: var(--space-xs);
  }
  
  .input-hints {
    margin-top: var(--space-xxs);
  }
  
  .input-hints small {
    font-size: 0.8rem;
  }
}

/* Logo Container for Sidebar */
.sidebar-logo-container {
  display: flex;
  align-items: center;
  justify-content: center;
}

/* General Logo Styling */
.logo {
  max-width: 100px;
  max-height: 100px;
  width: auto;
  height: auto;
  object-fit: contain;
}

/* Logo for Login/Register Pages */
.login-logo {
  max-width: 120px;
  max-height: 120px;
  width: auto;
  height: auto;
  object-fit: contain;
}

/* Logo Image - General Constraint */
img.logo, 
.logo img,
img[src*="logo"] {
  max-width: 100px;
  max-height: 100px;
  width: auto;
  height: auto;
  object-fit: contain;
}

/* Sidebar Logo Container Improvements */
.sidebar-logo-container img {
  max-width: 50px !important;
  max-height: 50px !important;
}

/* Logo Circular Border Enhancement */
.logo-circular,
.sidebar-logo {
  box-sizing: border-box;
  display: inline-block;
}

/* Brand Link in Sidebar */
.sidebar-brand {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* Responsive Logo Adjustments */
@media (max-width: 768px) {
  .sidebar-logo {
    width: 40px !important;
    height: 40px !important;
    max-width: 40px !important;
    max-height: 40px !important;
  }
  
  .sidebar-brand-text {
    font-size: var(--font-size-base);
  }
}

/* ===================================================
   SIDEBAR UTILITY CLASSES
   Additional utilities for sidebar components
   =================================================== */

/* Sidebar Content Wrapper */
.sidebar-content {
  display: flex;
  flex-direction: column;
  height: 100%;
}

/* Sidebar Header */
.sidebar-header {
  flex-shrink: 0;
  padding: var(--space);
  border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}

/* Sidebar Body */
.sidebar-body {
  flex: 1;
  overflow-y: auto;
  padding: var(--space);
}

/* Sidebar Footer */
.sidebar-footer {
  flex-shrink: 0;
  padding: var(--space);
  /* border-top: 1px solid rgba(255, 255, 255, 0.1); */
}

/* Sidebar Nav Item */
.sidebar-nav-item {
  margin-bottom: var(--space-xs);
}

/* Sidebar Nav Icon */
.sidebar-nav-icon {
  width: 20px;
  height: 20px;
  margin-right: var(--space-sm);
  opacity: 0.8;
  transition: var(--transition);
}

.sidebar-nav-link:hover .sidebar-nav-icon {
  opacity: 1;
}

/* Sidebar Divider */
.sidebar-divider {
  height: 1px;
  background: rgba(255, 255, 255, 0.1);
  margin: var(--space) 0;
}

/* Sidebar Text */
.sidebar-text {
  color: rgba(255, 255, 255, 0.7);
  font-size: var(--font-size-sm);
  padding: 0 var(--space);
  margin: var(--space-sm) 0;
}

/* ===================================================
   THEME-AWARE BORDER UTILITIES
   Modern border utilities for consistent theming
   =================================================== */

/* Standard Border Colors */
.border-subtle {
  border-color: var(--mono-300) !important;
}

.border-light {
  border-color: var(--mono-200) !important;
}

/* Theme-aware Text Colors */
.text-white {
  color: var(--mono-white) !important;
}

.text-light {
  color: var(--mono-400) !important;
}

.text-muted {
  color: var(--mono-500) !important;
}

/* Sidebar specific text colors - theme-aware */
.sidebar-app .text-white {
  color: var(--mono-900) !important;
}

.sidebar-app .text-muted {
  color: var(--mono-600) !important;
}

[data-theme="dark"] .sidebar-app .text-white {
  color: var(--mono-900) !important;
}

[data-theme="dark"] .sidebar-app .text-muted {
  color: var(--mono-600) !important;
}

/* Dark theme nav-link colors */
[data-theme="dark"] .sidebar-app {
  background: transparent !important; /* Let liquid glass effect show through */
  color: var(--mono-800);
}

[data-theme="dark"] .sidebar-app .sidebar-nav-link {
  color: var(--mono-700);
}

[data-theme="dark"] .sidebar-app .sidebar-nav-link:hover {
  background: var(--mono-200);
  color: var(--mono-900);
}

[data-theme="dark"] .sidebar-app .sidebar-nav-link.active {
  color: var(--mono-600);
  background: linear-gradient(135deg, rgb(97 98 98 / 5%), rgb(51 51 52 / 5%));
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
  box-shadow: 0 4px 12px rgb(0 0 0 / 30%), inset 0 1px 0 rgba(255, 255, 255, 0.2);
  border: 1px solid rgb(0 0 0 / 20%);
}

[data-theme="dark"] .sidebar-app .sidebar-nav-sublink {
  color: var(--mono-600) !important;
}

[data-theme="dark"] .sidebar-app .sidebar-nav-sublink:hover {
  background: var(--mono-200);
  color: var(--mono-900) !important;
}

[data-theme="dark"] .sidebar-app .sidebar-nav-sublink.active {
  background: var(--mono-200) !important;
  color: var(--mono-600) !important;
  font-weight: var(--font-weight-medium);
}

/* Let Bootstrap handle sidebar responsive behavior with d-md-block class */

/* Main footer styling - stays within main content area */
.main-footer {
  flex-shrink: 0;
  background: transparent;
  color: var(--mono-500); /* Better contrast for dark theme */
}

.main-footer .text-muted {
  color: var(--mono-500) !important; /* Override Bootstrap text-muted */
}

[data-theme="light"] .main-footer {
  border-top-color: var(--mono-300);
  color: var(--mono-700); /* Darker for light theme */
}

[data-theme="light"] .main-footer .text-muted {
  color: var(--mono-700) !important;
}

/* Main content height for Bootstrap grid layout */
.container-fluid .row main {
  min-height: calc(100vh - 56px); /* Full height minus header */
  /* Remove flexbox - let Bootstrap handle layout with col-md-9 col-lg-10 */
}

/* Chat container should fill available space */
.chat-container {
  flex: 1;
  min-height: 0; /* Allow shrinking */
}

/* ===================================================
   SCROLL TO BOTTOM BUTTON
   =================================================== */

#scrollToBottomBtn {
  background: var(--accent-blue);
  border: none;
  color: white;
  box-shadow: 0 4px 12px rgba(59, 130, 246, 0.4);
  transition: all 0.3s ease;
  z-index: 1000;
}

#scrollToBottomBtn:hover {
  background: var(--accent-blue-hover);
  transform: translateY(-2px);
  box-shadow: 0 6px 16px rgba(59, 130, 246, 0.5);
}

#scrollToBottomBtn:active {
  transform: translateY(0);
}

/* Dark theme adjustments */
[data-theme="dark"] #scrollToBottomBtn {
  box-shadow: 0 4px 12px rgba(59, 130, 246, 0.3);
}

[data-theme="dark"] #scrollToBottomBtn:hover {
  box-shadow: 0 6px 16px rgba(59, 130, 246, 0.4);
}

/* Light theme adjustments */
[data-theme="light"] #scrollToBottomBtn {
  box-shadow: 0 4px 12px rgba(59, 130, 246, 0.25);
}

[data-theme="light"] #scrollToBottomBtn:hover {
  box-shadow: 0 6px 16px rgba(59, 130, 246, 0.35);
}

/* Prevent header flex-wrap from affecting main layout */
.d-flex.flex-wrap {
  flex-shrink: 0; /* Prevent header from affecting main layout */
}

/* ===================================================
   RESPONSIVE TABLE STYLES FOR PERATURAN
   =================================================== */

/* DataTables horizontal scroll support */
.dataTables_wrapper .dataTables_scroll {
  width: 100%;
}

.dataTables_wrapper .dataTables_scrollBody {
  overflow-x: auto;
  overflow-y: visible;
  -webkit-overflow-scrolling: touch;
}

.dataTables_wrapper .dataTables_scrollHead,
.dataTables_wrapper .dataTables_scrollFoot {
  overflow: hidden;
}

/* Enhanced table styling */
#peraturan-table {
  border-collapse: separate;
  border-spacing: 0;
  background: var(--card-bg);
  border: 1px solid var(--border-color);
  border-radius: 8px;
  width: 100% !important; /* Ensure full width */
}

/* Table wrapper for manual scrolling (fallback) */
.table-responsive-wrapper {
  position: relative;
  overflow-x: auto;
  overflow-y: visible;
  -webkit-overflow-scrolling: touch;
  width: 100%;
}

#peraturan-table thead th {
  background: var(--mono-100);
  color: var(--text-primary);
  font-weight: 600;
  font-size: 0.875rem;
  padding: 12px 8px;
  text-align: left;
  vertical-align: middle;
  border-bottom: 2px solid var(--border-color);
  white-space: nowrap;
  position: relative;
}

#peraturan-table tbody td {
  padding: 10px 8px;
  vertical-align: top;
  border-bottom: 1px solid var(--border-color);
  font-size: 0.875rem;
  line-height: 1.4;
}

/* Column-specific styling */
#peraturan-table th:nth-child(1),
#peraturan-table td:nth-child(1) {
  text-align: center;
  width: 60px;
  min-width: 60px;
}

#peraturan-table th:nth-child(7),
#peraturan-table td:nth-child(7) {
  text-align: center;
  width: 160px;
  min-width: 160px;
}

/* Responsive text truncation */
.table-text-truncate {
  max-width: 200px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  display: inline-block;
}

/* Button group spacing in table */
#peraturan-table .btn-group-sm .btn {
  padding: 4px 8px;
  font-size: 0.75rem;
  margin-right: 2px;
}

#peraturan-table .btn-group-sm .btn:last-child {
  margin-right: 0;
}

/* Hover effects for table rows */
#peraturan-table tbody tr:hover {
  background-color: transparent;
  transition: background-color 0.2s ease;
}

/* Badge styling for struktur hierarki */
#peraturan-table .badge {
  font-size: 0.7rem;
  font-weight: normal;
  white-space: normal;
  line-height: 1.2;
  padding: 4px 8px;
}

/* Modal content styling */
.modal-xl .content-wrapper {
  max-height: 60vh;
  overflow-y: auto;
  border: 1px solid var(--border-color);
}

/* DataTables responsive enhancements */
.dataTables_wrapper {
  margin-top: 0;
}

.dataTables_length,
.dataTables_filter {
  margin-bottom: 1rem;
}

.dataTables_info {
  margin-top: 1rem;
  font-size: 0.875rem;
  color: var(--text-secondary);
}

.dataTables_paginate {
  margin-top: 1rem;
}

/* Mobile responsive adjustments */
@media (max-width: 768px) {
  .table-responsive-wrapper {
    margin: 0 -15px;
    border-radius: 0;
  }
  
  #peraturan-table th,
  #peraturan-table td {
    padding: 8px 6px;
    font-size: 0.8rem;
  }
  
  .modal-xl {
    margin: 0;
    max-width: none !important;
    height: 100vh;
  }
  
  .modal-xl .modal-content {
    height: 100vh;
    border-radius: 0;
  }
  
  .modal-xl .modal-body {
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
  }
}

/* Print styles for table */
@media print {
  .table-responsive-wrapper {
    overflow: visible !important;
  }
  
  #peraturan-table {
    font-size: 10px !important;
  }
  
  #peraturan-table th,
  #peraturan-table td {
    padding: 4px !important;
  }
  
  .btn-group {
    display: none !important;
  }
}

/* Peraturan Table Container Styling */
#peraturanTableContainer {
  width: 100%;
  overflow: visible;
}

#peraturanTableContainer .dataTables_wrapper {
  width: 100%;
  margin: 0;
}

#peraturanTableContainer .dataTables_scroll {
  width: 100%;
  overflow-x: auto;
  overflow-y: visible;
}

#peraturanTableContainer .dataTables_scrollBody {
  overflow-x: auto !important;
  overflow-y: visible !important;
  width: 100% !important;
}

#peraturanTableContainer .dataTables_info,
#peraturanTableContainer .dataTables_paginate {
  margin-top: 1rem;
  width: 100%;
}

/* Ensure pagination doesn't get cut off in card layout */
#peraturanTableContainer .dataTables_paginate .pagination {
  margin-bottom: 0.5rem;
}

/* ===================================================
   CHAT MESSAGE TABLES
   =================================================== */

/* Chat message table styling */
.message-content .table {
  font-size: var(--font-size-sm);
  margin-bottom: var(--space-sm);
  background-color: var(--mono-50);
  border-radius: var(--radius);
  overflow: hidden;
  box-shadow: var(--shadow-sm);
}

.message-content .table th {
  background-color: var(--mono-200);
  color: var(--mono-900);
  font-weight: var(--font-weight-semibold);
  padding: var(--space-sm);
  font-size: var(--font-size-xs);
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

.message-content .table td {
  padding: var(--space-sm);
  border-top: 1px solid var(--mono-100);
  font-size: var(--font-size-sm);
}

.message-content .table tbody tr:hover {
  background-color: var(--mono-100);
  transition: var(--transition);
}

.message-content .table-responsive {
  border-radius: var(--radius);
  max-height: 400px;
  overflow-y: auto;
}

/* Currency styling in chat tables */
.message-content .text-success {
  color: var(--accent-green) !important;
}

/* Badge styling in chat tables */
.message-content .badge {
  font-size: 0.7rem;
  padding: 0.25em 0.5em;
}

.message-content .bg-primary {
  background-color: var(--accent-blue) !important;
}

/* Table header dark theme in chat */
.message-content .table-dark th {
  background-color: var(--mono-300) !important;
  color: var(--mono-900) !important;
  border-color: var(--mono-400) !important;
}

/* ===================================================
   LIQUID GLASS INTEGRATION
   Modern glass effect integration with existing components
   =================================================== */

/* Apply glass effect to main cards */
.card {
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

/* Sidebar glass effect */
.sidebar {
  background: linear-gradient(
    180deg,
    rgba(255, 255, 255, 0.06),
    rgba(255, 255, 255, 0.03)
  );
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  border-right: 1px solid rgba(255, 255, 255, 0.08);
}

/* Navigation glass effect */
.navbar,
.header {
  background: linear-gradient(
    135deg,
    rgba(255, 255, 255, 0.08),
    rgba(255, 255, 255, 0.04)
  );
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
  box-shadow: 0 4px 24px 0 rgba(0, 0, 0, 0.15);
}

/* Chat container glass styling */
.chat-container {
  background: rgba(255, 255, 255, 0.02);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  border-radius: var(--radius-lg);
  border: 1px solid rgba(255, 255, 255, 0.05);
}

/* Chat message bubbles glass effect */
.message-bubble {
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border: 1px solid rgba(255, 255, 255, 0.08);
}

.message-bubble.user {
  background: linear-gradient(
    135deg,
    rgba(59, 130, 246, 0.25),
    rgba(59, 130, 246, 0.15)
  );
}

.message-bubble.assistant {
  background: rgba(255, 255, 255, 0.05);
}

/* Modal glass effect */
.modal-content {
  background: linear-gradient(
    135deg,
    rgba(255, 255, 255, 0.12),
    rgba(255, 255, 255, 0.06)
  );
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  border: 1px solid rgba(255, 255, 255, 0.15);
  box-shadow: 
    0 24px 64px 0 rgba(0, 0, 0, 0.4),
    inset 0 1px 0 0 rgba(255, 255, 255, 0.15);
}

.modal-backdrop {
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
}

/* Table glass effect */
.table {
  background: rgba(255, 255, 255, 0.03);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
}

.table thead {
  background: linear-gradient(
    135deg,
    rgba(255, 255, 255, 0.1),
    rgba(255, 255, 255, 0.05)
  );
  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
}

/* Form glass enhancements */
.form-control:not(.glass-input),
.form-select:not(.glass-input) {
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid rgba(255, 255, 255, 0.08);
  transition: all 0.3s ease;
}

.form-control:focus:not(.glass-input),
.form-select:focus:not(.glass-input) {
  background: rgba(255, 255, 255, 0.06);
  border-color: rgba(102, 126, 234, 0.4);
  box-shadow: 0 0 0 3px rgba(102, 126, 234, 0.1);
}

/* Button glass enhancements */
.btn:not(.glass-button):not(.theme-toggle-btn) {
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  background: linear-gradient(
    135deg,
    rgba(255, 255, 255, 0.12),
    rgba(255, 255, 255, 0.06)
  );
  border: 1px solid rgba(255, 255, 255, 0.15);
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  position: relative;
  overflow: hidden;
}

.btn:not(.glass-button):not(.theme-toggle-btn)::before {
  content: '';
  position: absolute;
  top: 50%;
  left: 50%;
  width: 0;
  height: 0;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.2);
  transform: translate(-50%, -50%);
  transition: width 0.5s, height 0.5s;
  z-index: 0;
}

.btn:not(.glass-button):not(.theme-toggle-btn):hover::before {
  width: 300px;
  height: 300px;
}

.btn:not(.glass-button):not(.theme-toggle-btn):hover {
  background: linear-gradient(
    135deg,
    rgba(255, 255, 255, 0.18),
    rgba(255, 255, 255, 0.09)
  );
  border-color: rgba(255, 255, 255, 0.2);
  transform: translateY(-2px);
  box-shadow: 0 6px 20px rgba(0, 0, 0, 0.3);
}

.btn:not(.glass-button):not(.theme-toggle-btn):active {
  transform: translateY(0);
}

/* Primary button glass enhancement */
.btn-primary:not(.glass-button):not(.theme-toggle-btn) {
  background: linear-gradient(
    135deg,
    rgba(59, 130, 246, 0.8),
    rgba(59, 130, 246, 0.6)
  );
  border-color: rgba(59, 130, 246, 0.6);
  color: white;
}

.btn-primary:not(.glass-button):not(.theme-toggle-btn):hover {
  background: linear-gradient(
    135deg,
    rgba(59, 130, 246, 0.9),
    rgba(59, 130, 246, 0.7)
  );
  border-color: rgba(59, 130, 246, 0.7);
}

/* Alert glass effects */
.alert {
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  border: 1px solid rgba(255, 255, 255, 0.12);
}

.alert-success {
  background: linear-gradient(
    135deg,
    rgba(34, 197, 94, 0.12),
    rgba(34, 197, 94, 0.06)
  );
  border-left: 4px solid var(--accent-green);
}

.alert-warning {
  background: linear-gradient(
    135deg,
    rgba(234, 179, 8, 0.12),
    rgba(234, 179, 8, 0.06)
  );
  border-left: 4px solid var(--accent-yellow);
}

.alert-danger {
  background: linear-gradient(
    135deg,
    rgba(239, 68, 68, 0.12),
    rgba(239, 68, 68, 0.06)
  );
  border-left: 4px solid var(--accent-red);
}

.alert-info {
  background: linear-gradient(
    135deg,
    rgba(59, 130, 246, 0.12),
    rgba(59, 130, 246, 0.06)
  );
  border-left: 4px solid var(--accent-blue);
}

/* Badge glass effect */
.badge {
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  border: 1px solid rgba(255, 255, 255, 0.15);
}

/* Dropdown glass effect */
.dropdown-menu {
  background: linear-gradient(
    135deg,
    rgba(255, 255, 255, 0.12),
    rgba(255, 255, 255, 0.08)
  );
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  border: 1px solid rgba(255, 255, 255, 0.12);
  box-shadow: 0 8px 32px 0 rgba(0, 0, 0, 0.3);
}

.dropdown-item:hover {
  background: rgba(255, 255, 255, 0.1);
}

/* Pagination glass effect */
.pagination .page-link {
  background: rgba(255, 255, 255, 0.05);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  border: 1px solid rgba(255, 255, 255, 0.08);
  transition: all 0.2s ease;
}

.pagination .page-link:hover {
  background: rgba(255, 255, 255, 0.1);
  transform: translateY(-2px);
}

.pagination .page-item.active .page-link {
  background: linear-gradient(
    135deg,
    rgba(59, 130, 246, 0.3),
    rgba(59, 130, 246, 0.2)
  );
  border-color: rgba(59, 130, 246, 0.5);
}

/* Toast/Notification glass effect */
.toast {
  background: linear-gradient(
    135deg,
    rgba(255, 255, 255, 0.15),
    rgba(255, 255, 255, 0.08)
  );
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border: 1px solid rgba(255, 255, 255, 0.15);
  box-shadow: 0 8px 32px 0 rgba(0, 0, 0, 0.3);
}

/* Breadcrumb glass effect */
.breadcrumb {
  background: rgba(255, 255, 255, 0.04);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  border: 1px solid rgba(255, 255, 255, 0.06);
}

/* Progress bar glass effect */
.progress {
  background: rgba(255, 255, 255, 0.05);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  border: 1px solid rgba(255, 255, 255, 0.08);
}

.progress-bar {
  background: linear-gradient(
    90deg,
    rgba(59, 130, 246, 0.8),
    rgba(102, 126, 234, 0.8)
  );
}

/* List group glass effect */
.list-group-item {
  background: rgba(255, 255, 255, 0.04);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  border: 1px solid rgba(255, 255, 255, 0.06);
  transition: all 0.2s ease;
}

.list-group-item:hover {
  background: rgba(255, 255, 255, 0.08);
  transform: translateX(4px);
}

/* Accordion glass effect */
.accordion-item {
  background: rgba(255, 255, 255, 0.04);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  border: 1px solid rgba(255, 255, 255, 0.08);
}

.accordion-button {
  background: rgba(255, 255, 255, 0.06);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
}

.accordion-button:not(.collapsed) {
  background: linear-gradient(
    135deg,
    rgba(59, 130, 246, 0.15),
    rgba(59, 130, 246, 0.08)
  );
}

/* Tab glass effect */
.nav-tabs .nav-link {
  background: rgba(255, 255, 255, 0.04);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  border: 1px solid rgba(255, 255, 255, 0.08);
  transition: all 0.2s ease;
}

.nav-tabs .nav-link:hover {
  background: rgba(255, 255, 255, 0.08);
}

.nav-tabs .nav-link.active {
  background: linear-gradient(
    135deg,
    rgba(59, 130, 246, 0.2),
    rgba(59, 130, 246, 0.1)
  );
  border-color: rgba(59, 130, 246, 0.4);
}

/* Tooltip glass effect */
.tooltip-inner {
  background: linear-gradient(
    135deg,
    rgba(10, 10, 10, 0.95),
    rgba(23, 23, 23, 0.9)
  );
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border: 1px solid rgba(255, 255, 255, 0.1);
  box-shadow: 0 4px 16px 0 rgba(0, 0, 0, 0.4);
}

/* Popover glass effect */
.popover {
  background: linear-gradient(
    135deg,
    rgba(255, 255, 255, 0.12),
    rgba(255, 255, 255, 0.08)
  );
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  border: 1px solid rgba(255, 255, 255, 0.15);
  box-shadow: 0 8px 32px 0 rgba(0, 0, 0, 0.3);
}

.popover-header {
  background: rgba(255, 255, 255, 0.08);
  border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}

/* Spinner/Loading glass effect */
.spinner-border,
.spinner-grow {
  border-color: rgba(102, 126, 234, 0.3);
  border-right-color: rgba(102, 126, 234, 0.8);
}

/* ===================================================
   SELECT2 BOOTSTRAP-5 LIQUID GLASS STYLING (Theme-Aware)
   =================================================== */

/* Select2 Selection Box - Dark Theme with Liquid Glass */
.select2-container--bootstrap-5 .select2-selection {
  background: rgba(255, 255, 255, 0.05) !important;
  backdrop-filter: blur(10px) !important;
  -webkit-backdrop-filter: blur(10px) !important;
  border: 1px solid rgba(255, 255, 255, 0.1) !important;
  border-radius: var(--radius-lg) !important;
  color: var(--mono-900) !important;
  transition: all 0.3s ease !important;
}

.select2-container--bootstrap-5 .select2-selection--single .select2-selection__rendered {
  color: var(--mono-900) !important;
}

.select2-container--bootstrap-5 .select2-selection--single .select2-selection__arrow b {
  border-color: var(--mono-900) transparent transparent transparent !important;
}

/* Focus state - Dark Theme */
.select2-container--bootstrap-5.select2-container--open .select2-selection,
.select2-container--bootstrap-5.select2-container--focus .select2-selection {
  background: rgba(255, 255, 255, 0.08) !important;
  border-color: rgba(102, 126, 234, 0.5) !important;
  box-shadow: 
    0 0 0 3px rgba(102, 126, 234, 0.1),
    0 4px 12px 0 rgba(0, 0, 0, 0.3) !important;
  outline: none !important;
}

/* Dropdown - Dark Theme with Liquid Glass */
.select2-container--bootstrap-5 .select2-dropdown {
  background: linear-gradient(
    135deg,
    rgba(255, 255, 255, 0.1),
    rgba(255, 255, 255, 0.05)
  ) !important;
  backdrop-filter: blur(16px) !important;
  -webkit-backdrop-filter: blur(16px) !important;
  border: 1px solid rgba(255, 255, 255, 0.15) !important;
  border-radius: var(--radius-lg) !important;
  box-shadow: 0 8px 32px 0 rgba(0, 0, 0, 0.4) !important;
}

/* Search Field inside Dropdown - Dark Theme */
.select2-container--bootstrap-5 .select2-dropdown .select2-search .select2-search__field {
  background: rgba(255, 255, 255, 0.05) !important;
  backdrop-filter: blur(10px) !important;
  -webkit-backdrop-filter: blur(10px) !important;
  border: 1px solid rgba(255, 255, 255, 0.1) !important;
  border-radius: var(--radius) !important;
  color: var(--mono-900) !important;
}

.select2-container--bootstrap-5 .select2-dropdown .select2-search .select2-search__field:focus {
  background: rgba(255, 255, 255, 0.08) !important;
  border-color: rgba(102, 126, 234, 0.5) !important;
  outline: none !important;
}

/* Options - Dark Theme */
.select2-container--bootstrap-5 .select2-results__option {
  color: var(--mono-900) !important;
  background: transparent !important;
  transition: all 0.2s ease !important;
}

.select2-container--bootstrap-5 .select2-results__option--highlighted {
  background: rgba(102, 126, 234, 0.3) !important;
  color: var(--mono-950) !important;
  backdrop-filter: blur(10px) !important;
  -webkit-backdrop-filter: blur(10px) !important;
}

.select2-container--bootstrap-5 .select2-results__option--selected {
  background: rgba(255, 255, 255, 0.15) !important;
  color: var(--mono-950) !important;
  font-weight: var(--font-weight-medium) !important;
}

.select2-container--bootstrap-5 .select2-results__option[aria-disabled=true] {
  color: var(--mono-400) !important;
  background: rgba(255, 255, 255, 0.03) !important;
  cursor: not-allowed !important;
}

/* Multi-Select Choice Pills - Dark Theme */
.select2-container--bootstrap-5 .select2-selection--multiple .select2-selection__rendered .select2-selection__choice {
  background: rgba(102, 126, 234, 0.3) !important;
  border: 1px solid rgba(102, 126, 234, 0.5) !important;
  color: var(--mono-950) !important;
  backdrop-filter: blur(10px) !important;
  -webkit-backdrop-filter: blur(10px) !important;
  border-radius: var(--radius) !important;
  padding: 0.25rem 0.5rem !important;
  font-size: 0.875rem !important;
  margin: 0.25rem !important;
}

.select2-container--bootstrap-5 .select2-selection--multiple .select2-selection__rendered .select2-selection__choice__remove {
  color: var(--mono-950) !important;
  margin-right: 0.25rem !important;
  opacity: 0.8 !important;
  transition: opacity 0.2s ease !important;
}

.select2-container--bootstrap-5 .select2-selection--multiple .select2-selection__rendered .select2-selection__choice__remove:hover {
  opacity: 1 !important;
  color: var(--accent-red) !important;
}

/* Light Mode Overrides */
[data-theme="light"] .select2-container--bootstrap-5 .select2-selection {
  background: rgba(255, 255, 255, 0.6) !important;
  border-color: rgba(0, 0, 0, 0.1) !important;
  color: var(--mono-50) !important;
}

[data-theme="light"] .select2-container--bootstrap-5 .select2-selection--single .select2-selection__rendered {
  color: var(--mono-50) !important;
}

[data-theme="light"] .select2-container--bootstrap-5 .select2-selection--single .select2-selection__arrow b {
  border-color: var(--mono-50) transparent transparent transparent !important;
}

[data-theme="light"] .select2-container--bootstrap-5.select2-container--open .select2-selection,
[data-theme="light"] .select2-container--bootstrap-5.select2-container--focus .select2-selection {
  background: rgba(255, 255, 255, 0.8) !important;
  border-color: rgba(102, 126, 234, 0.5) !important;
}

[data-theme="light"] .select2-container--bootstrap-5 .select2-dropdown {
  background: linear-gradient(
    135deg,
    rgba(255, 255, 255, 0.95),
    rgba(255, 255, 255, 0.9)
  ) !important;
  border-color: rgba(0, 0, 0, 0.15) !important;
  box-shadow: 0 8px 32px 0 rgba(0, 0, 0, 0.15) !important;
}

[data-theme="light"] .select2-container--bootstrap-5 .select2-dropdown .select2-search .select2-search__field {
  background: rgba(255, 255, 255, 0.7) !important;
  border-color: rgba(0, 0, 0, 0.1) !important;
  color: var(--mono-50) !important;
}

[data-theme="light"] .select2-container--bootstrap-5 .select2-dropdown .select2-search .select2-search__field:focus {
  background: rgba(255, 255, 255, 0.9) !important;
  border-color: rgba(102, 126, 234, 0.5) !important;
}

[data-theme="light"] .select2-container--bootstrap-5 .select2-results__option {
  color: var(--mono-50) !important;
}

[data-theme="light"] .select2-container--bootstrap-5 .select2-results__option--highlighted {
  background: rgba(102, 126, 234, 0.2) !important;
  color: var(--mono-950) !important;
}

[data-theme="light"] .select2-container--bootstrap-5 .select2-results__option--selected {
  background: rgba(0, 0, 0, 0.1) !important;
  color: var(--mono-950) !important;
}

[data-theme="light"] .select2-container--bootstrap-5 .select2-results__option[aria-disabled=true] {
  color: var(--mono-500) !important;
  background: rgba(0, 0, 0, 0.03) !important;
}

/* Multi-Select Choice Pills - Light Mode */
[data-theme="light"] .select2-container--bootstrap-5 .select2-selection--multiple .select2-selection__rendered .select2-selection__choice {
  background: rgba(102, 126, 234, 0.15) !important;
  border: 1px solid rgba(102, 126, 234, 0.3) !important;
  color: var(--mono-950) !important;
}

[data-theme="light"] .select2-container--bootstrap-5 .select2-selection--multiple .select2-selection__rendered .select2-selection__choice__remove {
  color: var(--mono-950) !important;
}

[data-theme="light"] .select2-container--bootstrap-5 .select2-selection--multiple .select2-selection__rendered .select2-selection__choice__remove:hover {
  color: var(--accent-red) !important;
}

/* ===================================================
   END OF LIQUID GLASS INTEGRATION
   =================================================== */