/* Google Fonts imports */
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&family=Outfit:wght@300;400;500;600;700&family=Prompt:wght@300;400;500;600;700&family=Kanit:wght@300;400;500;600;700&family=Sarabun:wght@300;400;500;600;700&family=Noto+Sans+Thai:wght@300;400;500;600;700&family=IBM+Plex+Sans+Thai:wght@300;400;500;600;700&family=Roboto:wght@300;400;500;700&display=swap');

/* Default root variables - will be dynamically changed via JS */
:root {
  /* Default Primary Colors */
  --primary-color: #2563eb; /* Blue default */
  --primary-color-hover: #1d4ed8;
  --primary-color-light: rgba(37, 99, 235, 0.05);
  --primary-color-border: rgba(37, 99, 235, 0.1);
  --primary-gradient: linear-gradient(135deg, #3b82f6, #1d4ed8);
  --primary-glow: rgba(59, 130, 246, 0.15);

  /* The 22 Custom Color Tokens */
  --app-bg: #F8FAFC;
  --card-bg: #FFFFFF;
  --primary: #2563eb;
  --secondary: #64748B;
  --text-main: #0F172A;
  --text-heading: #0F172A;
  --text-muted: #64748B;
  --sidebar-bg: #FFFFFF;
  --sidebar-text: #475569;
  --sidebar-active: #2563eb;
  --header-bg: #FFFFFF;
  --header-text: #0F172A;
  --border-color: #E2E8F0;
  --table-header-bg: #F1F5F9;
  --table-header-text: #475569;
  --chart-primary: #2563eb;
  --chart-secondary: #3B82F6;
  --chart-warning: #F97316;
  --chart-danger: #DC2626;
  --success: #16A34A;
  --warning: #F97316;
  --danger: #DC2626;

  /* Aliasing for backward compatibility */
  --color-primary: var(--primary);
  --color-primary-hover: var(--primary-color-hover);
  --color-primary-light: var(--primary-color-light);
  --color-primary-border: var(--primary-color-border);
  --color-background: var(--app-bg);
  --color-card: var(--card-bg);
  --color-surface: var(--card-bg);
  --color-text: var(--text-main);
  --color-muted: var(--text-muted);
  --color-border: var(--border-color);
  
  --font-family: 'Sarabun', 'Prompt', 'Inter', sans-serif;
  --font-size-global: 16px;
  --font-size-header: 32px;
  --font-size-kpi-num: 42px;
  --font-size-chart-label: 12px;
  --font-size-table: 14px;
  
  --spacing-gap: 1.5rem;
  --spacing-padding: 1.5rem;
  --spacing-row-padding: 0.625rem;

  /* Status colors */
  --color-good: var(--success);
  --color-warning: var(--warning);
  --color-critical: var(--danger);

  /* Dashboard Font Scaling System Variables */
  --dashboard-font-scale: 1.0;
  --chart-font-scale: 1.0;
  --table-font-scale: 1.0;
  --kpi-number-scale: 1.0;
}

html {
  font-family: var(--font-family);
  font-size: var(--font-size-global);
  background-color: var(--app-bg) !important;
  color: var(--text-main) !important;
}

/* Base Body Styles */
body {
  font-family: var(--font-family);
  font-size: var(--font-size-global);
  background-color: var(--app-bg) !important;
  color: var(--text-main) !important;
  margin: 0;
  padding: 0;
  transition: background-color 0.3s ease, color 0.3s ease, font-size 0.2s ease;
  overflow-x: hidden;
}

/* Custom Text Size Classes (Fallback / Compatibility) */
.text-size-compact {
  --font-size-global: 14px;
}
.text-size-regular {
  --font-size-global: 16px;
}
.text-size-executive {
  --font-size-global: 19px;
}

/* Custom Font Family Overrides */
.font-prompt {
  font-family: 'Prompt', sans-serif;
}
.font-inter {
  font-family: 'Inter', sans-serif;
}
.font-outfit {
  font-family: 'Outfit', sans-serif;
}

/* Custom Scrollbar */
::-webkit-scrollbar {
  width: 6px;
  height: 6px;
}
::-webkit-scrollbar-track {
  background: transparent;
}
::-webkit-scrollbar-thumb {
  background: rgba(156, 163, 175, 0.4);
  border-radius: 4px;
}
::-webkit-scrollbar-thumb:hover {
  background: rgba(156, 163, 175, 0.6);
}

/* Glassmorphism Classes */
.glass-card {
  background: var(--card-bg) !important;
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border: 1px solid var(--border-color) !important;
  box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.05), 0 2px 4px -1px rgba(0, 0, 0, 0.03);
  border-radius: 16px;
  padding: var(--spacing-padding) !important;
  color: var(--text-main) !important;
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

.glass-card:hover {
  box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.05), 0 4px 6px -2px rgba(0, 0, 0, 0.03);
  transform: translateY(-2px);
}

/* Headings dynamic scale */
h1, h2, h3, h4, h5, h6 {
  color: var(--text-heading) !important;
}
h1 {
  font-size: var(--font-size-header) !important;
}
h2 {
  font-size: calc(var(--font-size-header) * 0.75) !important;
}
h3 {
  font-size: calc(var(--font-size-header) * 0.6) !important;
}
h4 {
  font-size: calc(var(--font-size-header) * 0.5) !important;
}

/* Table styling dynamically bound to font sizes and density */
table {
  font-size: var(--font-size-table) !important;
  color: var(--text-main) !important;
}
th {
  background-color: var(--table-header-bg) !important;
  color: var(--table-header-text) !important;
  font-size: var(--font-size-table) !important;
  padding: var(--spacing-row-padding) 1rem !important;
  border-bottom: 1px solid var(--border-color) !important;
}
td {
  font-size: var(--font-size-table) !important;
  padding: var(--spacing-row-padding) 1rem !important;
  border-bottom: 1px solid var(--border-color) !important;
  color: var(--text-main) !important;
}
tr:hover {
  background-color: var(--color-primary-light) !important;
}

/* Sidebar Navigation Overrides */
aside {
  background-color: var(--sidebar-bg) !important;
  color: var(--sidebar-text) !important;
  border-color: var(--border-color) !important;
}
aside button, aside a {
  color: var(--sidebar-text) !important;
}
aside button:hover, aside a:hover {
  background-color: rgba(156, 163, 175, 0.1) !important;
}
aside button.bg-\[var\(--primary-color\)\] {
  background-color: var(--sidebar-active) !important;
  color: #FFFFFF !important;
}
/* Active Tab highlight fallback */
aside .active-menu, aside .active-tab {
  background-color: var(--sidebar-active) !important;
  color: #FFFFFF !important;
}

/* Header / Topbar Navigation Overrides */
header {
  background-color: var(--header-bg) !important;
  color: var(--header-text) !important;
  border-color: var(--border-color) !important;
}
header h2, header span, header button {
  color: var(--header-text) !important;
}

/* Inputs and interactive elements */
input, select, textarea {
  background-color: var(--card-bg) !important;
  border-color: var(--border-color) !important;
  color: var(--text-main) !important;
}
input:focus, select:focus, textarea:focus {
  border-color: var(--primary) !important;
  outline: none;
}

/* Text protection rules */
.text-protection {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* Dynamic KPI font class */
.kpi-val {
  font-size: var(--font-size-kpi-num) !important;
  font-weight: 800;
  line-height: 1;
}

/* Sidebar and active menu links */
.sidebar-link {
  color: var(--sidebar-text);
  font-size: calc(var(--font-size-global) * 0.875);
}
.sidebar-link.active-menu {
  background-color: var(--sidebar-active) !important;
  color: #FFFFFF !important;
}

/* Glow effects */
.glow-primary {
  box-shadow: 0 0 15px var(--primary-glow);
}

/* Animations */
@keyframes fadeIn {
  from { opacity: 0; transform: translateY(8px); }
  to { opacity: 1; transform: translateY(0); }
}

.animate-fade-in {
  animation: fadeIn 0.4s ease-out forwards;
}

/* Theme Preset Mappings */
.theme-blue {
  --primary: #2563eb;
  --primary-gradient: linear-gradient(135deg, #3b82f6, #1d4ed8);
  --primary-glow: rgba(59, 130, 246, 0.2);
}
.theme-emerald {
  --primary: #059669;
  --primary-gradient: linear-gradient(135deg, #10b981, #047857);
  --primary-glow: rgba(16, 185, 129, 0.2);
}
.theme-indigo {
  --primary: #4f46e5;
  --primary-gradient: linear-gradient(135deg, #6366f1, #4338ca);
  --primary-glow: rgba(99, 102, 241, 0.2);
}
.theme-purple {
  --primary: #7c3aed;
  --primary-gradient: linear-gradient(135deg, #8b5cf6, #6d28d9);
  --primary-glow: rgba(139, 92, 246, 0.2);
}

/* Gauge Chart Animation */
.gauge-needle {
  transform-origin: 50% 100%;
  transition: transform 0.8s ease-out;
}

/* ==================== DASHBOARD TYPOGRAPHY SCALING SYSTEM ==================== */

/* 1. Freeze Sidebar font sizes */
.sidebar, aside {
  font-size: 14px !important;
}
.sidebar h1 {
  font-size: 1.125rem !important; /* 18px */
}
.sidebar p.text-xxs, .sidebar span.text-xxs {
  font-size: 0.625rem !important; /* 10px */
}
.sidebar p.text-xs {
  font-size: 0.75rem !important; /* 12px */
}
.sidebar button, .sidebar a, .sidebar .sidebar-link {
  font-size: 0.875rem !important; /* 14px */
}

/* 2. Scoped Dashboard Content font sizing and scaling */
.dashboard-content {
  font-size: calc(16px * var(--dashboard-font-scale)) !important;
  --font-size-global: calc(16px * var(--dashboard-font-scale));
  --font-size-header: calc(32px * var(--dashboard-font-scale));
  --font-size-kpi-num: calc(42px * var(--kpi-number-scale));
  --font-size-chart-label: calc(12px * var(--chart-font-scale));
  --font-size-table: calc(14px * var(--table-font-scale));
}

/* 3. Scoped Tailwind utility size class overrides */
.dashboard-content .text-xxs {
  font-size: calc(0.625rem * var(--dashboard-font-scale)) !important; /* 10px scaled */
}
.dashboard-content .text-xs {
  font-size: calc(0.75rem * var(--dashboard-font-scale)) !important; /* 12px scaled */
}
.dashboard-content .text-sm {
  font-size: calc(0.875rem * var(--dashboard-font-scale)) !important; /* 14px scaled */
}
.dashboard-content .text-base {
  font-size: calc(1rem * var(--dashboard-font-scale)) !important; /* 16px scaled */
}
.dashboard-content .text-lg {
  font-size: calc(1.125rem * var(--dashboard-font-scale)) !important; /* 18px scaled */
}
.dashboard-content .text-xl {
  font-size: calc(1.25rem * var(--dashboard-font-scale)) !important; /* 20px scaled */
}
.dashboard-content .text-2xl {
  font-size: calc(1.5rem * var(--dashboard-font-scale)) !important; /* 24px scaled */
}
.dashboard-content .text-3xl {
  font-size: calc(1.875rem * var(--dashboard-font-scale)) !important; /* 30px scaled */
}
.dashboard-content .text-4xl {
  font-size: calc(2.25rem * var(--dashboard-font-scale)) !important; /* 36px scaled */
}
.dashboard-content .text-5xl {
  font-size: calc(3rem * var(--dashboard-font-scale)) !important; /* 48px scaled */
}

/* 4. KPI Number Scale overrides */
.dashboard-content .kpi-val {
  font-size: calc(42px * var(--kpi-number-scale)) !important;
}
.dashboard-content .text-3xl.font-extrabold,
.dashboard-content .text-3xl.font-black {
  font-size: calc(1.875rem * var(--kpi-number-scale)) !important;
}
.dashboard-content .text-4xl.font-extrabold,
.dashboard-content .text-4xl.font-black {
  font-size: calc(2.25rem * var(--kpi-number-scale)) !important;
}

/* 5. Table Dynamic scaling and spacing adjustments */
.dashboard-content th,
.dashboard-content td {
  padding: calc(var(--spacing-row-padding) * var(--table-font-scale)) calc(1rem * var(--table-font-scale)) !important;
  line-height: 1.4 !important;
  word-break: break-word !important;
  white-space: normal !important;
}
.dashboard-content .overflow-x-auto {
  overflow-x: auto !important;
  width: 100% !important;
  display: block !important;
}

/* 6. Card Padding auto-scaling */
.dashboard-content .glass-card {
  padding: calc(var(--spacing-padding) * (1 + (var(--dashboard-font-scale) - 1) * 0.5)) !important;
}

/* 7. Grid Auto-Collapsing Rules (Collapses columns to 1 or 2 when scaled >= 140%) */
.scale-large .dashboard-content .grid-cols-2,
.scale-large .dashboard-content .grid-cols-3,
.scale-large .dashboard-content .grid-cols-4,
.scale-large .dashboard-content .grid-cols-5,
.scale-large .dashboard-content .md\:grid-cols-2,
.scale-large .dashboard-content .md\:grid-cols-3,
.scale-large .dashboard-content .md\:grid-cols-4,
.scale-large .dashboard-content .md\:grid-cols-5,
.scale-large .dashboard-content .lg\:grid-cols-2,
.scale-large .dashboard-content .lg\:grid-cols-3,
.scale-large .dashboard-content .lg\:grid-cols-4,
.scale-large .dashboard-content .lg\:grid-cols-5 {
  grid-template-columns: repeat(1, minmax(0, 1fr)) !important;
}

@media (min-width: 1280px) {
  .scale-large .dashboard-content .grid-cols-3,
  .scale-large .dashboard-content .md\:grid-cols-3,
  .scale-large .dashboard-content .lg:grid-cols-3,
  .scale-large .dashboard-content .grid-cols-4,
  .scale-large .dashboard-content .md:grid-cols-4,
  .scale-large .dashboard-content .lg:grid-cols-4,
  .scale-large .dashboard-content .grid-cols-5,
  .scale-large .dashboard-content .md:grid-cols-5,
  .scale-large .dashboard-content .lg:grid-cols-5 {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  }
}

/* ==================== EXECUTIVE TOP NAVIGATION LAYOUT ==================== */

.scrollbar-none::-webkit-scrollbar {
  display: none;
}
.scrollbar-none {
  -ms-overflow-style: none;  /* IE and Edge */
  scrollbar-width: none;  /* Firefox */
}

/* Sub-header sticky position adjustment */
.sticky-sub-header {
  position: sticky !important;
  top: 128px !important;
  z-index: 20 !important;
  transition: top 0.3s ease;
}

@media (max-width: 768px) {
  .sticky-sub-header {
    top: 72px !important;
  }
}

/* Horizontal top navigation tabs */
.nav-tab {
  position: relative;
  transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
}

.nav-tab::after {
  content: '';
  position: absolute;
  bottom: 0px;
  left: 0;
  width: 100%;
  height: 3px;
  background-color: var(--primary);
  border-top-left-radius: 4px;
  border-top-right-radius: 4px;
  transform: scaleX(0);
  transition: transform 0.25s cubic-bezier(0.4, 0, 0.2, 1);
}

.nav-tab.active-tab {
  color: var(--primary) !important;
  font-weight: 700 !important;
}

.nav-tab.active-tab::after {
  transform: scaleX(1);
}

.nav-tab:hover::after {
  transform: scaleX(0.4);
}

.nav-tab.active-tab:hover::after {
  transform: scaleX(1);
}

/* Mobile navigation drawer transition classes */
.drawer-backdrop {
  background-color: rgba(15, 23, 42, 0.6);
  backdrop-filter: blur(4px);
  transition: opacity 0.3s ease;
}

.drawer-content {
  transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}