/* ======================================
   ROOT VARIABLES
====================================== */

:root {
  /* PRIMARY COLORS */
  --color-primary: #006aff;
  --color-primary-hover: #0057d1;
  --color-primary-light: #e9f2ff;

  /* SECONDARY COLORS */
  --color-secondary: #111827;
  --color-secondary-hover: #1f2937;

  /* TERTIARY COLORS */
  --color-tertiary: #6b7280;
  --color-tertiary-light: #9ca3af;

  /* BACKGROUNDS */
  --color-background: #f5f7fb;
  --color-surface: #ffffff;
  --color-surface-secondary: #f9fafb;

  /* TEXT */
  --color-text: #111827;
  --color-text-secondary: #6b7280;
  --color-text-light: #9ca3af;
  --color-text-white: #ffffff;

  /* BORDERS */
  --color-border: #e5e7eb;
  --color-border-light: #f3f4f6;

  /* SIDEBAR */
  --color-sidebar: #111827;
  --color-sidebar-hover: #1f2937;
  --color-sidebar-active: #006aff;

  /* STATUS COLORS */
  --color-success: #10b981;
  --color-success-light: #ecfdf5;
  --color-info: #0ea5e9;
  --color-info-light: #f0f9ff;
  --color-warning: #f59e0b;
  --color-warning-light: #fffbeb;
  --color-error: #ef4444;
  --color-error-light: #fef2f2;

  /* EXTRA COLORS */
  --color-purple: #8b5cf6;
  --color-pink: #ec4899;
  --color-orange: #f97316;
  --color-cyan: #06b6d4;

  /* SHADOWS */
  --shadow-xs: 0 1px 2px rgba(0, 0, 0, 0.04);
  --shadow-sm: 0 2px 8px rgba(0, 0, 0, 0.06);
  --shadow-md: 0 10px 30px rgba(0, 0, 0, 0.08);
  --shadow-lg: 0 20px 50px rgba(0, 0, 0, 0.12);

  /* BORDER RADIUS */
  --radius-xs-06: 6px;
  --radius-sm-08: 8px;
  --radius-md-12: 12px;
  --radius-lg-16: 16px;
  --radius-xl-24: 24px;

  /* FONT SIZES */
  --font-xs-11: 11px;
  --font-sm-12: 12px;
  --font-md-14: 14px;
  --font-lg-16: 16px;
  --font-xl-18: 18px;
  --font-2xl-22: 22px;
  --font-3xl-28: 28px;
  --font-4xl-36: 36px;

  /* FONT WEIGHTS */
  --font-light-300: 300;
  --font-regular-400: 400;
  --font-medium-500: 500;
  --font-semibold-600: 600;
  --font-bold-700: 700;

  /* SPACING */
  --space-xs-04: 4px;
  --space-sm-08: 8px;
  --space-md-12: 12px;
  --space-lg-16: 16px;
  --space-xl-24: 24px;
  --space-2xl-32: 32px;

  /* LAYOUT */
  --header-height: 70px;
  --footer-height: 48px;
  --sidebar-width: 250px;
  --sidebar-collapsed-width: 80px;

  /* TRANSITIONS */
  --transition-fast: 0.15s ease;
  --transition-normal: 0.25s ease;
  --transition-slow: 0.4s ease;

  /* INPUTS */
  --color-input-bg: #ffffff;
  --color-input-border: #dbe3ee;
  --color-input-border-focus: var(--color-primary);
  --color-input-text: var(--color-text);
  --color-input-placeholder: var(--color-text-light);

  /* CARDS */
  --color-card-bg: var(--color-surface);
  --color-card-border: var(--color-border);

  /* HOVER */
  --color-hover: rgba(0, 106, 255, 0.08);
  --color-active: rgba(0, 106, 255, 0.12);

  /* TOOLTIP */
  --color-tooltip-bg: #333333;
  --color-tooltip-text: #ffffff;

  /* FORM */
  --radius-form: 14px;

  /* INPUTS */
  --color-input-bg: #ffffff;
  --color-input-border: #dbe3ee;
  --color-input-border-focus: var(--color-primary);
  --color-input-text: var(--color-text);
  --color-input-placeholder: var(--color-text-light);

  /* FOCUS */
  --color-focus-ring: rgba(0, 106, 255, 0.08);

  /* SWITCH */
  --color-switch-on: var(--color-success);
  --color-switch-off: #d1d5db;
  --color-switch-thumb: #ffffff;

  /* BADGES */
  --color-beta: var(--color-pink);
  --color-beta-light: #fce7f3;

  /* DRAWER */
  --color-drawer-overlay: rgba(15, 23, 42, 0.45);
  --color-drawer-hover: rgba(0, 106, 255, 0.03);

  /* PREVIEW */
  --color-preview-bg: var(--color-border-light);

  /* SCROLL */
  --color-scroll-thumb: rgba(15, 23, 42, 0.18);

  /* DRAWER */
  --color-drawer-overlay: rgba(15, 23, 42, 0.45);
  --color-drawer-hover: rgba(0, 106, 255, 0.03);

  /* PREVIEW */
  --color-preview-bg: var(--color-border-light);

  /* CARDS */
  --color-card-bg: var(--color-surface);
  --color-card-border: var(--color-border);

  /* BADGES */
  --color-beta: var(--color-pink);
  --color-beta-light: #fdf2f8;

  /* SELECT */
  --color-select-hover: var(--color-surface-secondary);

  --color-select-inner-shadow: rgba(255, 255, 255, 0.7);

  --color-select-shadow: rgba(0, 0, 0, 0.03);
  /* HOVER */
  --color-hover: rgba(0, 106, 255, 0.08);
}

html,
body {
  margin: 0;
  padding: 0;
  width: 100%;
  height: 100%;
  overflow: hidden;
  font-family: Arial, sans-serif;
  background: var(--color-background);
}

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

body {
  display: flex;
  flex-direction: column;
  height: 100vh;
  overflow: hidden;
}

.layout-body-container {
  flex: 1;
  display: flex;
  min-height: 0;
  overflow: hidden;
}

#app {
  flex: 1;
  width: 100%;
  min-height: 0;
  overflow: hidden;
}