/* ============================================
   LOCX DEVICE MANAGER - THEME DESIGN TOKENS
   Light / Dark / System theme support
   ============================================ */

:root {
  /* Core backgrounds */
  --color-bg-page: #F6F7F8;
  --color-bg-surface: #FFFFFF;
  --color-bg-elevated: #FDFDFD;
  --color-bg-input: #FFFFFF;

  /* Text */
  --color-text-primary: #434343;
  --color-text-secondary: #5D5D5D;
  --color-text-muted: #979898;

  /* Brand */
  --color-brand-primary: #F1552C;
  --color-brand-primary-hover: #EF4214;
  --color-brand-primary-bg: #FCDDD5;
  --color-brand-badge: #FF6B42;

  /* Borders & focus */
  --color-border: #E5E7EB;
  --color-border-focus: #F1552C;
  --focus-ring: 0 0 0 2px var(--color-brand-primary);

  /* Tooltip (client-branch, etc.) */
  --color-tooltip-bg: #2C2C2C;
  --color-tooltip-text: #FFFFFF;

  /* Shadows */
  --shadow-sm: 0 1px 3px rgba(0, 0, 0, 0.05);
  --shadow-md: 0 2px 8px rgba(0, 0, 0, 0.15);
  --shadow-tooltip: 0 2px 8px rgba(0, 0, 0, 0.15);

  /* Loading overlay */
  --color-loading-overlay: rgba(67, 67, 67, 0.7);

  /* Danger / validation */
  --color-danger: #dc3545;

  /* Success / error (stats, alerts) */
  --color-success: #29BB85;
  --color-success-bg: #DEF7EE;
  --color-success-light: #57D9A9;
  --color-error: #F12525;
  --color-error-bg: #FFD8D8;
  --color-error-dark: #D92121;

  /* Icon on brand (e.g. menu hover) */
  --color-icon-on-brand: #FFFFFF;

  /* Muted borders / inputs */
  --color-border-muted: #D3D3D3;
  --color-bg-info: #F8F9FA;
  --color-scrollbar-track: #F0F0F0;
  --color-scrollbar-thumb: #D3D3D3;
  --color-datatable-header: #CED0D0;
  --color-datatable-filter-row: #CED0D0;
  --color-datatable-cell-text: #434343;
  --color-datatable-row-bg: #FFFFFF;
  --color-link: #007BFF;
  --color-branch-choice-sidebar: #434343;
  --color-code-bg: #1e1e1e;
  --color-code-header: #2d2d30;
  --color-code-text: #d4d4d4;

  /* Theme switch transition */
  --theme-transition-duration: 0.3s;
  --theme-transition-easing: ease;
}

/* Fading effect when switching between light and dark theme */
* {
  transition-property: background-color, color, border-color, box-shadow, fill;
  transition-duration: var(--theme-transition-duration);
  transition-timing-function: var(--theme-transition-easing);
}

/* Keep focus ring and interactive feedback snappy */
button:focus,
button:active,
input:focus,
select:focus,
a:focus,
*:focus-visible {
  transition-duration: 0.12s;
}

/* Dark theme overrides */
[data-theme="dark"] {
  --color-bg-page: #1a1a1a;
  --color-bg-surface: #2d2d2d;
  --color-bg-elevated: #252525;
  --color-bg-input: #404040;

  --color-text-primary: #E5E7EB;
  --color-text-secondary: #B0B0B0;
  --color-text-muted: #979898;

  --color-brand-primary: #FF6B42;
  --color-brand-primary-hover: #FF8555;
  --color-brand-primary-bg: #4A2A22;
  --color-brand-badge: #FF6B42;

  --color-border: #404040;
  --color-border-focus: #FF6B42;
  --focus-ring: 0 0 0 2px var(--color-brand-primary);

  --color-tooltip-bg: #3d3d3d;
  --color-tooltip-text: #E5E7EB;

  --shadow-sm: 0 1px 3px rgba(0, 0, 0, 0.3);
  --shadow-md: 0 2px 8px rgba(0, 0, 0, 0.4);
  --shadow-tooltip: 0 2px 8px rgba(0, 0, 0, 0.4);

  --color-loading-overlay: rgba(0, 0, 0, 0.7);

  --color-danger: #e57373;

  --color-success: #2ecc71;
  --color-success-bg: #1e3d32;
  --color-success-light: #57D9A9;
  --color-error: #e57373;
  --color-error-bg: #4a2a2a;
  --color-error-dark: #e57373;

  --color-icon-on-brand: #FFFFFF;

  --color-border-muted: #505050;
  --color-bg-info: #353535;
  --color-scrollbar-track: #404040;
  --color-scrollbar-thumb: #6B6B6B;
  --color-datatable-header: #353535;
  --color-datatable-filter-row: #353535;
  --color-datatable-cell-text: #9E9E9E;
  --color-datatable-row-bg: #252525;
  --color-link: #6EB3FF;
  --color-branch-choice-sidebar: #2d2d2d;
  --color-code-bg: #252525;
  --color-code-header: #353535;
  --color-code-text: #d4d4d4;
}

/* ============================================
   THEME TOGGLE BADGE (sidebar)
   ============================================ */

.theme-toggle-badge {
  display: flex;
  position: static;
  transform: none;
  background-color: var(--color-brand-badge);
  color: white;
  border: none;
  border-radius: 30%;
  width: 28px;
  height: 28px;
  font-size: 14px;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  z-index: 11;
  transition: all 0.3s ease;
  box-shadow: var(--shadow-sm);
  flex-shrink: 0;
}

.theme-toggle-badge:hover {
  transform: scale(1.1);
}

.theme-toggle-badge:focus {
  outline: none;
  box-shadow: var(--focus-ring);
}

/* Collapsed sidebar: show as badge below client-branch-badge */
.base-left-side-panel.collapsed .theme-toggle-badge {
  display: none;
}

.theme-toggle-badge .theme-icon {
  display: none;
}

.theme-toggle-badge[data-theme-mode="system"] .theme-icon-system,
.theme-toggle-badge[data-theme-mode="light"] .theme-icon-light,
.theme-toggle-badge[data-theme-mode="dark"] .theme-icon-dark {
  display: inline-block;
}