/* ========================================
   CSS VARIABLES - SESTIMI BRAND
   ======================================== */
:root {
  --color-bg-primary: #1b1d1d;
  --color-bg-secondary: #242727;
  --color-bg-tertiary: #2a2d2d;
  --color-bg-hover: #303333;
  --color-border: #363939;
  --color-border-light: #404444;

  --color-text-primary: #ffffff;
  --color-text-secondary: #a0a5a5;
  --color-text-muted: #6b7070;

  --color-accent: #1cac7a;
  --color-accent-hover: #158a62;
  --color-accent-light: rgba(28, 172, 122, 0.15);

  --color-gold: #e0b277;
  --color-gold-hover: #c99a5a;
  --color-gold-light: rgba(224, 178, 119, 0.15);

  --color-danger: #ef4444;
  --color-danger-light: rgba(239, 68, 68, 0.15);
  --color-warning: #f59e0b;
  --color-warning-light: rgba(245, 158, 11, 0.15);
  --color-info: #3b82f6;
  --color-info-light: rgba(59, 130, 246, 0.15);
  --color-success: #1cac7a;
  --color-success-light: rgba(28, 172, 122, 0.15);

  --font-family: 'Barlow', -apple-system, BlinkMacSystemFont, sans-serif;
  --font-size-xs: 11px;
  --font-size-sm: 13px;
  --font-size-base: 14px;
  --font-size-lg: 16px;
  --font-size-xl: 20px;
  --font-size-2xl: 24px;
  --font-size-3xl: 32px;

  --spacing-xs: 4px;
  --spacing-sm: 8px;
  --spacing-md: 16px;
  --spacing-lg: 24px;
  --spacing-xl: 32px;
  --spacing-xxl: 48px;

  --sidebar-width: 260px;
  --sidebar-collapsed: 70px;
  --topbar-height: 64px;

  --radius-sm: 4px;
  --radius-md: 8px;
  --radius-lg: 12px;
  --radius-xl: 16px;
  --radius-full: 9999px;

  --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.2);
  --shadow-md: 0 4px 6px rgba(0, 0, 0, 0.25);
  --shadow-lg: 0 10px 25px rgba(0, 0, 0, 0.3);

  --transition-fast: 150ms ease;
  --transition-normal: 250ms ease;
}

/* ========================================
   RESET & BASE
   ======================================== */
*, *::before, *::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

html {
  font-size: 14px;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

body {
  font-family: var(--font-family);
  background-color: var(--color-bg-primary);
  color: var(--color-text-primary);
  line-height: 1.5;
  min-height: 100vh;
}

a { color: var(--color-accent); text-decoration: none; }
a:hover { color: var(--color-accent-hover); }
button { font-family: inherit; cursor: pointer; border: none; outline: none; }
input, select { font-family: inherit; outline: none; }

/* ========================================
   LAYOUT
   ======================================== */
.app-container { display: flex; min-height: 100vh; }

/* Sidebar */
.sidebar {
  width: var(--sidebar-width);
  background: var(--color-bg-secondary);
  border-right: 1px solid var(--color-border);
  display: flex;
  flex-direction: column;
  position: fixed;
  top: 0;
  left: 0;
  height: 100vh;
  z-index: 100;
  transition: width var(--transition-normal), transform var(--transition-normal);
}

.sidebar.collapsed { width: var(--sidebar-collapsed); }
.sidebar.collapsed .sidebar-logo span,
.sidebar.collapsed .nav-item span,
.sidebar.collapsed .sidebar-user-info { display: none; }
.sidebar.collapsed .nav-item { justify-content: center; padding: var(--spacing-md); }

.sidebar-header {
  padding: var(--spacing-lg);
  border-bottom: 1px solid var(--color-border);
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.sidebar-logo { display: flex; align-items: center; gap: var(--spacing-sm); }
.sidebar-logo svg { width: 32px; height: 32px; fill: var(--color-accent); }
.sidebar-logo span { font-size: var(--font-size-xl); font-weight: 700; }

.sidebar-toggle {
  background: transparent;
  color: var(--color-text-secondary);
  padding: var(--spacing-sm);
  border-radius: var(--radius-sm);
  transition: all var(--transition-fast);
}
.sidebar-toggle:hover { background: var(--color-bg-hover); color: var(--color-text-primary); }

.sidebar-nav { flex: 1; padding: var(--spacing-md) 0; overflow-y: auto; }
.nav-section { margin-bottom: var(--spacing-lg); }
.nav-section-title {
  padding: var(--spacing-sm) var(--spacing-lg);
  font-size: var(--font-size-xs);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  color: var(--color-text-muted);
}
.sidebar.collapsed .nav-section-title { display: none; }

.nav-item {
  display: flex;
  align-items: center;
  gap: var(--spacing-md);
  padding: var(--spacing-md) var(--spacing-lg);
  color: var(--color-text-secondary);
  transition: all var(--transition-fast);
  cursor: pointer;
  border-left: 3px solid transparent;
}
.nav-item:hover { background: var(--color-bg-hover); color: var(--color-text-primary); }
.nav-item.active { background: var(--color-accent-light); color: var(--color-accent); border-left-color: var(--color-accent); }
.nav-item svg { width: 20px; height: 20px; flex-shrink: 0; }
.nav-item span { font-size: var(--font-size-base); font-weight: 500; }

.sidebar-footer { padding: var(--spacing-md); border-top: 1px solid var(--color-border); }
.sidebar-user { display: flex; align-items: center; gap: var(--spacing-md); padding: var(--spacing-md); border-radius: var(--radius-md); transition: background var(--transition-fast); }
.sidebar-user:hover { background: var(--color-bg-hover); }
.sidebar-user-avatar { width: 40px; height: 40px; border-radius: var(--radius-full); background: var(--color-accent); display: flex; align-items: center; justify-content: center; font-weight: 600; flex-shrink: 0; }
.sidebar-user-info { flex: 1; min-width: 0; }
.sidebar-user-name { font-weight: 600; font-size: var(--font-size-sm); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.sidebar-user-role { font-size: var(--font-size-xs); color: var(--color-text-muted); }

/* Main Content */
.main-content { flex: 1; margin-left: var(--sidebar-width); min-height: 100vh; transition: margin-left var(--transition-normal); overflow-x: hidden; max-width: 100%; }
.sidebar.collapsed ~ .main-content { margin-left: var(--sidebar-collapsed); }

/* Topbar */
.topbar {
  height: var(--topbar-height);
  background: var(--color-bg-secondary);
  border-bottom: 1px solid var(--color-border);
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 var(--spacing-lg);
  position: sticky;
  top: 0;
  z-index: 50;
}
.topbar-left { display: flex; align-items: center; gap: var(--spacing-md); }
.topbar-search {
  display: flex;
  align-items: center;
  background: var(--color-bg-tertiary);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  padding: var(--spacing-sm) var(--spacing-md);
  width: 300px;
  transition: border-color var(--transition-fast);
}
.topbar-search:focus-within { border-color: var(--color-accent); }
.topbar-search svg { width: 18px; height: 18px; color: var(--color-text-muted); margin-right: var(--spacing-sm); }
.topbar-search input { flex: 1; background: transparent; border: none; color: var(--color-text-primary); font-size: var(--font-size-sm); }
.topbar-search input::placeholder { color: var(--color-text-muted); }

.topbar-right { display: flex; align-items: center; gap: var(--spacing-md); }
.topbar-icon-btn {
  position: relative;
  background: transparent;
  color: var(--color-text-secondary);
  padding: var(--spacing-sm);
  border-radius: var(--radius-md);
  transition: all var(--transition-fast);
}
.topbar-icon-btn:hover { background: var(--color-bg-hover); color: var(--color-text-primary); }
.topbar-icon-btn svg { width: 22px; height: 22px; }
.topbar-badge { position: absolute; top: 2px; right: 2px; width: 18px; height: 18px; background: var(--color-danger); color: white; font-size: 10px; font-weight: 600; border-radius: var(--radius-full); display: flex; align-items: center; justify-content: center; }

.page-content { padding: var(--spacing-lg); overflow-x: hidden; max-width: 100%; box-sizing: border-box; }
.page-header { display: flex; align-items: center; justify-content: space-between; margin-bottom: var(--spacing-lg); flex-wrap: wrap; gap: var(--spacing-md); }
.page-title { font-size: var(--font-size-2xl); font-weight: 700; }
.page-subtitle { color: var(--color-text-secondary); font-size: var(--font-size-sm); margin-top: var(--spacing-xs); }
.page-actions { display: flex; gap: var(--spacing-sm); flex-wrap: wrap; }

/* ========================================
   COMPONENTS
   ======================================== */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--spacing-sm);
  padding: var(--spacing-sm) var(--spacing-md);
  border-radius: var(--radius-md);
  font-size: var(--font-size-sm);
  font-weight: 500;
  transition: all var(--transition-fast);
}
.btn svg { width: 18px; height: 18px; }
.btn-primary { background: var(--color-accent); color: white; }
.btn-primary:hover { background: var(--color-accent-hover); }
.btn-secondary { background: var(--color-bg-tertiary); color: var(--color-text-primary); border: 1px solid var(--color-border); }
.btn-secondary:hover { background: var(--color-bg-hover); border-color: var(--color-border-light); }
.btn-ghost { background: transparent; color: var(--color-text-secondary); }
.btn-ghost:hover { background: var(--color-bg-hover); color: var(--color-text-primary); }
.btn-danger { background: var(--color-danger); color: white; }
.btn-danger:hover { background: #c82333; }
.btn-outline-danger {
  background: transparent;
  color: var(--color-danger);
  border: 1px solid var(--color-danger);
}
.btn-outline-danger:hover {
  background: var(--color-danger);
  color: white;
}

/* Cards */
.card { background: var(--color-bg-secondary); border: 1px solid var(--color-border); border-radius: var(--radius-lg); overflow: hidden; max-width: 100%; }
.card-header { padding: var(--spacing-md) var(--spacing-lg); border-bottom: 1px solid var(--color-border); display: flex; align-items: center; justify-content: space-between; }
.card-title { font-size: var(--font-size-lg); font-weight: 600; }
.card-body { padding: var(--spacing-lg); overflow-x: auto; }
.card-body.no-padding { padding: 0; }

/* Dashboard Widgets */
.dashboard-widget {
  transition: opacity var(--transition-normal), transform var(--transition-normal);
}
.dashboard-widget.hidden {
  display: none;
}
.dashboard-widget.dragging {
  opacity: 0.5;
  transform: scale(1.02);
}
.dashboard-widget[draggable="true"] {
  cursor: grab;
}
.dashboard-widget[draggable="true"]:active {
  cursor: grabbing;
}
.widget-drag-handle {
  cursor: grab;
  padding: var(--spacing-xs);
  color: var(--color-text-muted);
  transition: color var(--transition-fast);
}
.widget-drag-handle:hover {
  color: var(--color-text-primary);
}
.widget-drag-handle svg {
  width: 16px;
  height: 16px;
}

/* Widget Size Classes */
.dashboard-widget.size-auto { /* default */ }
.dashboard-widget.size-small { max-height: 200px; overflow: hidden; }
.dashboard-widget.size-medium { max-height: 350px; overflow: hidden; }
.dashboard-widget.size-large { max-height: 500px; overflow: hidden; }
.dashboard-widget.size-full { max-height: none; }

.dashboard-widget.width-full { width: 100%; }
.dashboard-widget.width-half { width: calc(50% - var(--spacing-md) / 2); }
.dashboard-widget.width-third { width: calc(33.333% - var(--spacing-md) * 2 / 3); }
.dashboard-widget.width-two-thirds { width: calc(66.666% - var(--spacing-md) / 3); }

@media (max-width: 1024px) {
  .dashboard-widget.width-half,
  .dashboard-widget.width-third,
  .dashboard-widget.width-two-thirds { width: 100%; }
}

/* Stat Cards */
.stats-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: var(--spacing-md); margin-bottom: var(--spacing-lg); }
.stat-card { background: var(--color-bg-secondary); border: 1px solid var(--color-border); border-radius: var(--radius-lg); padding: var(--spacing-lg); display: flex; align-items: flex-start; gap: var(--spacing-md); }
.stat-icon { width: 48px; height: 48px; border-radius: var(--radius-md); display: flex; align-items: center; justify-content: center; flex-shrink: 0; }
.stat-icon svg { width: 24px; height: 24px; }
.stat-icon.green { background: var(--color-accent-light); color: var(--color-accent); }
.stat-icon.gold { background: var(--color-gold-light); color: var(--color-gold); }
.stat-icon.blue { background: var(--color-info-light); color: var(--color-info); }
.stat-icon.red { background: var(--color-danger-light); color: var(--color-danger); }
.stat-content { flex: 1; }
.stat-label { font-size: var(--font-size-sm); color: var(--color-text-secondary); margin-bottom: var(--spacing-xs); }
.stat-value { font-size: var(--font-size-2xl); font-weight: 700; line-height: 1.2; }
.stat-change { display: inline-flex; align-items: center; gap: 2px; font-size: var(--font-size-xs); font-weight: 500; margin-top: var(--spacing-xs); }
.stat-change.up { color: var(--color-success); }
.stat-change.down { color: var(--color-danger); }
.stat-change svg { width: 14px; height: 14px; }

/* Stat icon variants by type */
.stat-icon.apps { background: var(--color-accent-light); color: var(--color-accent); }
.stat-icon.databases { background: var(--color-info-light); color: var(--color-info); }
.stat-icon.users { background: var(--color-gold-light); color: var(--color-gold); }
.stat-icon.errors { background: var(--color-danger-light); color: var(--color-danger); }

/* Stat icon color variants (semantic) */
.stat-icon-primary { background: rgba(99, 102, 241, 0.15); color: var(--color-primary); }
.stat-icon-info { background: rgba(59, 130, 246, 0.15); color: var(--color-info); }
.stat-icon-warning { background: rgba(245, 158, 11, 0.15); color: var(--color-warning); }
.stat-icon-success { background: rgba(16, 185, 129, 0.15); color: var(--color-success); }
.stat-icon-danger { background: rgba(239, 68, 68, 0.15); color: var(--color-danger); }

/* Stats Row - Global (4 column grid) */
.stats-row {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: var(--spacing-md);
  margin-bottom: var(--spacing-lg);
}

@media (max-width: 1200px) {
  .stats-row {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (max-width: 600px) {
  .stats-row {
    grid-template-columns: 1fr;
  }
}

/* Widget Grid & Cards */
.widget-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: var(--spacing-lg); }
.widget-card { background: var(--color-bg-secondary); border: 1px solid var(--color-border); border-radius: var(--radius-lg); overflow: hidden; }
.widget-header { display: flex; align-items: center; justify-content: space-between; padding: var(--spacing-md) var(--spacing-lg); border-bottom: 1px solid var(--color-border); }
.widget-title { font-size: var(--font-size-base); font-weight: 600; }
.widget-link { font-size: var(--font-size-sm); color: var(--color-accent); text-decoration: none; }
.widget-link:hover { text-decoration: underline; }
.widget-badge { font-size: var(--font-size-xs); padding: var(--spacing-xs) var(--spacing-sm); background: var(--color-bg-tertiary); border-radius: var(--radius-sm); color: var(--color-text-muted); }
.widget-body { padding: var(--spacing-lg); }

/* Activity List */
.activity-list { display: flex; flex-direction: column; gap: var(--spacing-md); }
.activity-item { display: flex; align-items: flex-start; gap: var(--spacing-md); }
.activity-icon { width: 36px; height: 36px; border-radius: var(--radius-md); display: flex; align-items: center; justify-content: center; flex-shrink: 0; }
.activity-icon svg { width: 18px; height: 18px; }
.activity-icon.deploy { background: var(--color-success-light); color: var(--color-success); }
.activity-icon.login { background: var(--color-info-light); color: var(--color-info); }
.activity-icon.backup { background: var(--color-accent-light); color: var(--color-accent); }
.activity-icon.error { background: var(--color-danger-light); color: var(--color-danger); }
.activity-icon.alert { background: var(--color-warning-light); color: var(--color-warning); }
.activity-content { flex: 1; min-width: 0; }
.activity-title { font-size: var(--font-size-sm); font-weight: 500; margin-bottom: 2px; }
.activity-description { font-size: var(--font-size-xs); color: var(--color-text-muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.activity-time { font-size: var(--font-size-xs); color: var(--color-text-muted); white-space: nowrap; }

/* Status List */
.status-list { display: flex; flex-direction: column; gap: var(--spacing-sm); }
.status-item { display: flex; align-items: center; gap: var(--spacing-sm); padding: var(--spacing-sm) 0; }
.status-indicator { width: 8px; height: 8px; border-radius: var(--radius-full); flex-shrink: 0; }
.status-indicator.online, .status-indicator.up, .status-indicator.running { background: var(--color-success); }
.status-indicator.offline, .status-indicator.down { background: var(--color-danger); }
.status-indicator.warning, .status-indicator.degraded { background: var(--color-warning); }
.status-name { flex: 1; font-size: var(--font-size-sm); }
.status-uptime { font-size: var(--font-size-xs); color: var(--color-text-muted); }

/* Quick Actions Grid */
.quick-actions-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--spacing-md); }
.quick-action { display: flex; flex-direction: column; align-items: center; gap: var(--spacing-sm); padding: var(--spacing-lg); background: var(--color-bg-secondary); border: 1px solid var(--color-border); border-radius: var(--radius-lg); cursor: pointer; transition: all var(--transition-fast); }
.quick-action:hover { border-color: var(--color-accent); background: var(--color-bg-hover); transform: translateY(-2px); }
.quick-action-icon { width: 48px; height: 48px; display: flex; align-items: center; justify-content: center; background: var(--color-accent-light); border-radius: var(--radius-md); color: var(--color-accent); }
.quick-action-icon svg { width: 24px; height: 24px; }
.quick-action span { font-size: var(--font-size-sm); font-weight: 500; color: var(--color-text-primary); }

/* Empty State Small */
.empty-state.small { padding: var(--spacing-md); }
.empty-state.small p { font-size: var(--font-size-sm); margin: 0; }

/* Tables */
.table-container { overflow-x: auto; }
.data-table { width: 100%; border-collapse: collapse; }
.data-table th, .data-table td { padding: var(--spacing-md); text-align: left; border-bottom: 1px solid var(--color-border); }
.data-table th { background: var(--color-bg-tertiary); font-size: var(--font-size-xs); font-weight: 600; text-transform: uppercase; letter-spacing: 0.5px; color: var(--color-text-secondary); }
.data-table tbody tr { transition: background var(--transition-fast); }
.data-table tbody tr:hover { background: var(--color-bg-hover); }
.data-table td { font-size: var(--font-size-sm); }
.data-table .clickable-row { cursor: pointer; }
.data-table .clickable-row:hover { background: var(--color-bg-hover); }

/* Cell helpers */
.cell-title { font-weight: 500; color: var(--color-text-primary); }
.cell-subtitle { font-size: var(--font-size-xs); color: var(--color-text-secondary); margin-top: 2px; }

/* Sortable Tables */
.table-sortable th.sortable {
  cursor: pointer;
  user-select: none;
  position: relative;
  transition: background var(--transition-fast);
}

.table-sortable th.sortable:hover {
  background: var(--color-bg-hover);
}

.table-sortable th .th-content {
  display: inline;
}

.table-sortable th .sort-indicator {
  display: inline-flex;
  flex-direction: column;
  margin-left: 4px;
  vertical-align: middle;
  opacity: 0.3;
  transition: opacity var(--transition-fast);
}

.table-sortable th:hover .sort-indicator {
  opacity: 0.6;
}

.table-sortable th .sort-indicator svg {
  width: 12px;
  height: 12px;
  margin: -3px 0;
}

.table-sortable th.sorted-asc .sort-indicator,
.table-sortable th.sorted-desc .sort-indicator {
  opacity: 1;
}

.table-sortable th.sorted-asc .sort-indicator .sort-desc,
.table-sortable th.sorted-desc .sort-indicator .sort-asc {
  opacity: 0.2;
}

.table-sortable th.sorted-asc .sort-indicator .sort-asc,
.table-sortable th.sorted-desc .sort-indicator .sort-desc {
  color: var(--color-accent);
}

/* Status Badges */
.status-badge { display: inline-flex; align-items: center; gap: var(--spacing-xs); padding: var(--spacing-xs) var(--spacing-sm); border-radius: var(--radius-full); font-size: var(--font-size-xs); font-weight: 600; }
.status-badge::before { content: ''; width: 6px; height: 6px; border-radius: var(--radius-full); }
.status-badge.up, .status-badge.online, .status-badge.active { background: var(--color-success-light); color: var(--color-success); }
.status-badge.up::before, .status-badge.online::before, .status-badge.active::before { background: var(--color-success); }
.status-badge.down, .status-badge.offline, .status-badge.inactive { background: var(--color-danger-light); color: var(--color-danger); }
.status-badge.down::before, .status-badge.offline::before, .status-badge.inactive::before { background: var(--color-danger); }
.status-badge.warning, .status-badge.degraded { background: var(--color-warning-light); color: var(--color-warning); }
.status-badge.warning::before, .status-badge.degraded::before { background: var(--color-warning); }
.status-badge.pending { background: var(--color-info-light); color: var(--color-info); }
.status-badge.pending::before { background: var(--color-info); }

.role-badge { display: inline-block; padding: var(--spacing-xs) var(--spacing-sm); border-radius: var(--radius-sm); font-size: var(--font-size-xs); font-weight: 600; }
.role-badge.admin, .role-badge.role-admin { background: var(--color-gold-light); color: var(--color-gold); }
.role-badge.manager, .role-badge.role-manager { background: var(--color-info-light); color: var(--color-info); }
.role-badge.user, .role-badge.role-user { background: var(--color-success-light); color: var(--color-success); }
.role-badge.viewer, .role-badge.role-viewer { background: var(--color-bg-tertiary); color: var(--color-text-secondary); }

.env-badge { display: inline-block; padding: var(--spacing-xs) var(--spacing-sm); border-radius: var(--radius-sm); font-size: var(--font-size-xs); font-weight: 500; text-transform: uppercase; }
.env-badge.prod { background: var(--color-danger-light); color: var(--color-danger); }
.env-badge.staging { background: var(--color-warning-light); color: var(--color-warning); }
.env-badge.dev { background: var(--color-info-light); color: var(--color-info); }

/* Activity List */
.activity-list { display: flex; flex-direction: column; }
.activity-item { display: flex; align-items: flex-start; gap: var(--spacing-md); padding: var(--spacing-md); border-bottom: 1px solid var(--color-border); transition: background var(--transition-fast); }
.activity-item:last-child { border-bottom: none; }
.activity-item:hover { background: var(--color-bg-hover); }
.activity-icon { width: 36px; height: 36px; border-radius: var(--radius-md); display: flex; align-items: center; justify-content: center; flex-shrink: 0; }
.activity-icon svg { width: 18px; height: 18px; }
.activity-icon.deploy { background: var(--color-success-light); color: var(--color-success); }
.activity-icon.login { background: var(--color-info-light); color: var(--color-info); }
.activity-icon.backup { background: var(--color-gold-light); color: var(--color-gold); }
.activity-icon.error { background: var(--color-danger-light); color: var(--color-danger); }
.activity-icon.alert { background: var(--color-warning-light); color: var(--color-warning); }
.activity-content { flex: 1; min-width: 0; }
.activity-title { font-size: var(--font-size-sm); font-weight: 500; margin-bottom: 2px; }
.activity-description { font-size: var(--font-size-xs); color: var(--color-text-secondary); }
.activity-time { font-size: var(--font-size-xs); color: var(--color-text-muted); white-space: nowrap; }

/* Filters */
.filters-bar { display: flex; align-items: center; gap: var(--spacing-md); margin-bottom: var(--spacing-lg); flex-wrap: wrap; }
.filter-search { display: flex; align-items: center; background: var(--color-bg-tertiary); border: 1px solid var(--color-border); border-radius: var(--radius-md); padding: var(--spacing-sm) var(--spacing-md); flex: 1; max-width: 300px; }
.filter-search svg { width: 18px; height: 18px; color: var(--color-text-muted); margin-right: var(--spacing-sm); }
.filter-search input { flex: 1; background: transparent; border: none; color: var(--color-text-primary); font-size: var(--font-size-sm); }
.filter-search input::placeholder { color: var(--color-text-muted); }
.filter-select { background: var(--color-bg-tertiary); border: 1px solid var(--color-border); border-radius: var(--radius-md); padding: var(--spacing-sm) var(--spacing-md); color: var(--color-text-primary); font-size: var(--font-size-sm); min-width: 150px; }
.filter-select:focus { border-color: var(--color-accent); }

.grid-2 { display: grid; grid-template-columns: repeat(2, 1fr); gap: var(--spacing-lg); }

.table-actions { display: flex; gap: var(--spacing-xs); }
.table-action-btn { padding: var(--spacing-xs); background: transparent; color: var(--color-text-muted); border-radius: var(--radius-sm); transition: all var(--transition-fast); }
.table-action-btn:hover { background: var(--color-bg-hover); color: var(--color-text-primary); }
.table-action-btn svg { width: 18px; height: 18px; }

.user-cell { display: flex; align-items: center; gap: var(--spacing-sm); }
.user-avatar { width: 32px; height: 32px; border-radius: var(--radius-full); background: var(--color-accent); display: flex; align-items: center; justify-content: center; font-size: var(--font-size-xs); font-weight: 600; color: white; flex-shrink: 0; }
.user-info { min-width: 0; }
.user-name { font-weight: 500; font-size: var(--font-size-sm); }
.user-email { font-size: var(--font-size-xs); color: var(--color-text-muted); }

.system-status-list { display: flex; flex-direction: column; gap: var(--spacing-sm); }
.system-status-item { display: flex; align-items: center; justify-content: space-between; padding: var(--spacing-sm); background: var(--color-bg-tertiary); border-radius: var(--radius-md); }
.system-status-item span { font-size: var(--font-size-sm); }

.quick-actions { display: flex; flex-direction: column; gap: var(--spacing-sm); }
.quick-action-btn { display: flex; align-items: center; gap: var(--spacing-sm); padding: var(--spacing-md); background: var(--color-bg-tertiary); border-radius: var(--radius-md); color: var(--color-text-primary); font-size: var(--font-size-sm); font-weight: 500; transition: all var(--transition-fast); text-align: left; }
.quick-action-btn:hover { background: var(--color-bg-hover); transform: translateX(4px); }
.quick-action-btn svg { width: 18px; height: 18px; color: var(--color-accent); }

.page-section { display: none; max-width: 100%; overflow-x: hidden; }
.page-section.active { display: block; }

.empty-state { text-align: center; padding: var(--spacing-xl) var(--spacing-lg); color: var(--color-text-secondary); }
.empty-state svg { width: 48px; height: 48px; margin-bottom: var(--spacing-md); opacity: 0.5; }

/* ========================================
   CUSTOMIZE PANEL (MODAL)
   ======================================== */
.modal-overlay {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: rgba(0, 0, 0, 0.6);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 1000;
  opacity: 0;
  visibility: hidden;
  transition: all var(--transition-normal);
}
.modal-overlay.active {
  opacity: 1;
  visibility: visible;
}
.modal {
  background: var(--color-bg-secondary);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-xl);
  width: 90%;
  max-width: 500px;
  max-height: 90vh;
  overflow: hidden;
  transform: scale(0.9);
  transition: transform var(--transition-normal);
}
.modal-overlay.active .modal {
  transform: scale(1);
}
.modal-header {
  padding: var(--spacing-lg);
  border-bottom: 1px solid var(--color-border);
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.modal-title {
  font-size: var(--font-size-lg);
  font-weight: 600;
}
.modal-close {
  background: transparent;
  color: var(--color-text-muted);
  padding: var(--spacing-xs);
  border-radius: var(--radius-sm);
  transition: all var(--transition-fast);
}
.modal-close:hover {
  background: var(--color-bg-hover);
  color: var(--color-text-primary);
}
.modal-close svg {
  width: 20px;
  height: 20px;
}

/* Modal header actions (maximize + close) */
.modal-header-actions {
  display: flex;
  align-items: center;
  gap: var(--spacing-xs);
}

.modal-maximize {
  background: transparent;
  color: var(--color-text-muted);
  padding: var(--spacing-xs);
  border-radius: var(--radius-sm);
  transition: all var(--transition-fast);
}
.modal-maximize:hover {
  background: var(--color-bg-hover);
  color: var(--color-text-primary);
}
.modal-maximize svg {
  width: 18px;
  height: 18px;
}
.modal-maximize .icon-minimize {
  display: none;
}
.modal.modal-maximized .modal-maximize .icon-maximize {
  display: none;
}
.modal.modal-maximized .modal-maximize .icon-minimize {
  display: block;
}

/* Maximized modal state */
.modal.modal-maximized {
  max-width: calc(100vw - 40px) !important;
  width: calc(100vw - 40px) !important;
  max-height: calc(100vh - 40px) !important;
  height: calc(100vh - 40px) !important;
}
.modal.modal-maximized .modal-body {
  max-height: calc(100vh - 180px) !important;
  height: calc(100vh - 180px);
}
.modal.modal-maximized .modal-body.modal-body-form {
  max-height: calc(100vh - 180px) !important;
}

.modal-body {
  padding: var(--spacing-lg);
  padding-bottom: var(--spacing-xl);
  overflow-y: auto;
  max-height: 60vh;
}
.modal-footer {
  padding: var(--spacing-lg);
  border-top: 1px solid var(--color-border);
  display: flex;
  justify-content: flex-end;
  gap: var(--spacing-sm);
}

/* Large Form Modal */
.modal.modal-lg {
  max-width: 700px;
}

.modal.modal-xl {
  max-width: 900px;
}

.modal.modal-full {
  max-width: 1100px;
  width: 95%;
}

.modal-body.modal-body-form {
  max-height: 70vh;
}

/* Form Modal Grid */
.modal-form-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: var(--spacing-md);
}

.modal-form-grid .form-group-wide {
  grid-column: 1 / -1;
}

@media (max-width: 600px) {
  .modal-form-grid {
    grid-template-columns: 1fr;
  }

  .modal.modal-lg,
  .modal.modal-xl,
  .modal.modal-full {
    max-width: 95%;
    width: 95%;
  }

  .modal-body.modal-body-form {
    max-height: 65vh;
  }
}

/* Modal subtitle */
.modal-subtitle {
  font-size: var(--font-size-sm);
  color: var(--color-text-muted);
  margin-top: 4px;
}

/* Modal with tabs */
.modal-tabs {
  display: flex;
  gap: var(--spacing-xs);
  padding: 0 var(--spacing-lg);
  border-bottom: 1px solid var(--color-border);
  background: var(--color-bg-tertiary);
}

.modal-tab {
  padding: var(--spacing-sm) var(--spacing-md);
  font-size: var(--font-size-sm);
  font-weight: 500;
  color: var(--color-text-muted);
  background: transparent;
  border: none;
  border-bottom: 2px solid transparent;
  cursor: pointer;
  transition: all var(--transition-fast);
  margin-bottom: -1px;
}

.modal-tab:hover {
  color: var(--color-text-primary);
}

.modal-tab.active {
  color: var(--color-primary);
  border-bottom-color: var(--color-primary);
}

/* Modal Info Panels (stat-card style) */
.modal-info-panels {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: var(--spacing-md);
  padding: var(--spacing-lg);
  background: var(--color-bg-tertiary);
  border-bottom: 1px solid var(--color-border);
}

.modal-info-card {
  display: flex;
  align-items: center;
  gap: var(--spacing-sm);
  padding: var(--spacing-md);
  background: var(--color-bg-secondary);
  border-radius: var(--radius-md);
  border: 1px solid var(--color-border);
}

.modal-info-icon {
  width: 40px;
  height: 40px;
  border-radius: var(--radius-md);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.modal-info-icon-primary {
  background: rgba(59, 130, 246, 0.15);
  color: #3b82f6;
}

.modal-info-icon-success {
  background: rgba(16, 185, 129, 0.15);
  color: var(--color-success);
}

.modal-info-icon-warning {
  background: rgba(245, 158, 11, 0.15);
  color: var(--color-warning);
}

.modal-info-icon-danger {
  background: rgba(239, 68, 68, 0.15);
  color: var(--color-danger);
}

.modal-info-icon-info {
  background: rgba(99, 102, 241, 0.15);
  color: #6366f1;
}

.modal-info-icon-muted {
  background: rgba(107, 114, 128, 0.1);
  color: var(--color-text-muted);
}

.modal-info-content {
  flex: 1;
  min-width: 0;
}

.modal-info-value {
  font-size: var(--font-size-md);
  font-weight: 600;
  color: var(--color-text-primary);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.modal-info-label {
  font-size: var(--font-size-xs);
  color: var(--color-text-muted);
  margin-top: 2px;
}

/* Responsive modal info panels */
@media (max-width: 1024px) {
  .modal-info-panels {
    grid-template-columns: repeat(3, 1fr);
  }
}

@media (max-width: 768px) {
  .modal-info-panels {
    grid-template-columns: repeat(2, 1fr);
  }

  .modal-info-card {
    padding: var(--spacing-sm);
  }

  .modal-info-icon {
    width: 32px;
    height: 32px;
  }

  .modal-info-icon svg {
    width: 16px;
    height: 16px;
  }
}

@media (max-width: 480px) {
  .modal-info-panels {
    grid-template-columns: 1fr 1fr;
    gap: var(--spacing-sm);
    padding: var(--spacing-md);
  }
}

/* Modal Sections (Tasks, Comments) */
.modal-section {
  border-top: 1px solid var(--color-border);
  margin-top: var(--spacing-lg);
}

.modal-section-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: var(--spacing-md) var(--spacing-lg);
  background: var(--color-bg-tertiary);
}

.modal-section-title {
  display: flex;
  align-items: center;
  gap: var(--spacing-sm);
  font-size: var(--font-size-md);
  font-weight: 600;
  color: var(--color-text-primary);
  margin: 0;
}

.modal-section-title svg {
  color: var(--color-text-muted);
}

.modal-section-count {
  background: var(--color-bg-secondary);
  color: var(--color-text-muted);
  font-size: var(--font-size-xs);
  font-weight: 500;
  padding: 2px 8px;
  border-radius: var(--radius-full);
  margin-left: var(--spacing-xs);
}

.modal-section-body {
  padding: var(--spacing-md) var(--spacing-lg);
}

/* Modal Tasks List */
.modal-tasks-list {
  display: flex;
  flex-direction: column;
  gap: var(--spacing-xs);
  max-height: 250px;
  overflow-y: auto;
}

.modal-task-item {
  display: flex;
  align-items: center;
  gap: var(--spacing-sm);
  padding: var(--spacing-sm) var(--spacing-md);
  background: var(--color-bg-secondary);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  cursor: pointer;
  transition: all var(--transition-fast);
}

.modal-task-item:hover {
  border-color: var(--color-accent);
  background: var(--color-bg-tertiary);
}

.modal-task-status-icon {
  flex-shrink: 0;
}

.modal-task-content {
  flex: 1;
  min-width: 0;
}

.modal-task-name {
  font-size: var(--font-size-sm);
  color: var(--color-text-primary);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.modal-task-name.completed {
  text-decoration: line-through;
  color: var(--color-text-muted);
}

.modal-task-number {
  font-size: var(--font-size-xs);
  color: var(--color-text-muted);
}

.modal-task-delete {
  background: transparent;
  border: none;
  color: var(--color-text-muted);
  cursor: pointer;
  padding: var(--spacing-xs);
  border-radius: var(--radius-sm);
  opacity: 0;
  transition: all var(--transition-fast);
}

.modal-task-item:hover .modal-task-delete {
  opacity: 1;
}

.modal-task-delete:hover {
  background: rgba(239, 68, 68, 0.1);
  color: var(--color-danger);
}

/* Quick add task in modal */
.modal-section .quick-add-task {
  display: flex;
  gap: var(--spacing-sm);
  margin-bottom: var(--spacing-md);
  padding: var(--spacing-sm);
  background: var(--color-bg-tertiary);
  border-radius: var(--radius-md);
}

.modal-section .quick-add-task .form-input {
  flex: 1;
}

/* Modal Comments List */
.modal-comments-list {
  display: flex;
  flex-direction: column;
  gap: var(--spacing-md);
  max-height: 200px;
  overflow-y: auto;
  margin-bottom: var(--spacing-md);
}

.modal-comment-item {
  display: flex;
  gap: var(--spacing-sm);
  padding: var(--spacing-sm);
  background: var(--color-bg-secondary);
  border-radius: var(--radius-md);
}

.modal-comment-avatar {
  width: 32px;
  height: 32px;
  border-radius: var(--radius-full);
  background: var(--color-accent-light);
  color: var(--color-accent);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: var(--font-size-xs);
  font-weight: 600;
  flex-shrink: 0;
}

.modal-comment-body {
  flex: 1;
  min-width: 0;
}

.modal-comment-header {
  display: flex;
  align-items: center;
  gap: var(--spacing-sm);
  margin-bottom: var(--spacing-xs);
}

.modal-comment-author {
  font-size: var(--font-size-sm);
  font-weight: 500;
  color: var(--color-text-primary);
}

.modal-comment-time {
  font-size: var(--font-size-xs);
  color: var(--color-text-muted);
}

.modal-comment-text {
  font-size: var(--font-size-sm);
  color: var(--color-text-secondary);
  line-height: 1.5;
}

.modal-comment-delete {
  background: transparent;
  border: none;
  color: var(--color-text-muted);
  cursor: pointer;
  padding: var(--spacing-xs);
  font-size: var(--font-size-xs);
  opacity: 0;
  transition: opacity var(--transition-fast);
}

.modal-comment-item:hover .modal-comment-delete {
  opacity: 1;
}

.modal-comment-delete:hover {
  color: var(--color-danger);
}

.modal-comment-add {
  display: flex;
  flex-direction: column;
  gap: var(--spacing-sm);
}

.modal-comment-add .btn {
  align-self: flex-start;
}

/* Empty states in modal */
.modal-tasks-empty,
.modal-comments-empty {
  text-align: center;
  padding: var(--spacing-lg);
  color: var(--color-text-muted);
}

.modal-tasks-empty svg,
.modal-comments-empty svg {
  margin-bottom: var(--spacing-sm);
  opacity: 0.3;
}

.modal-tasks-empty p,
.modal-comments-empty p {
  margin: 0;
  font-size: var(--font-size-sm);
}

.loading-spinner-small {
  text-align: center;
  padding: var(--spacing-md);
  color: var(--color-text-muted);
  font-size: var(--font-size-sm);
}

/* Widget List in Modal */
.widget-list {
  display: flex;
  flex-direction: column;
  gap: var(--spacing-sm);
}
.widget-item {
  display: flex;
  flex-direction: column;
  gap: var(--spacing-sm);
  padding: var(--spacing-md);
  background: var(--color-bg-tertiary);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  cursor: grab;
  transition: all var(--transition-fast);
}
.widget-item:hover {
  border-color: var(--color-accent);
}
.widget-item.dragging {
  opacity: 0.5;
  border-color: var(--color-accent);
}
.widget-item-drag {
  color: var(--color-text-muted);
  cursor: grab;
}
.widget-item-drag svg {
  width: 16px;
  height: 16px;
}
.widget-item-info {
  flex: 1;
}
.widget-item-name {
  font-weight: 500;
  font-size: var(--font-size-sm);
  margin-bottom: 2px;
}
.widget-item-desc {
  font-size: var(--font-size-xs);
  color: var(--color-text-muted);
}
.widget-item-toggle {
  position: relative;
  width: 44px;
  height: 24px;
}
.widget-item-toggle input {
  opacity: 0;
  width: 0;
  height: 0;
}
.widget-item-toggle .toggle-slider {
  position: absolute;
  cursor: pointer;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: var(--color-bg-primary);
  border-radius: var(--radius-full);
  transition: background var(--transition-fast);
}
.widget-item-toggle .toggle-slider::before {
  position: absolute;
  content: "";
  height: 18px;
  width: 18px;
  left: 3px;
  bottom: 3px;
  background: white;
  border-radius: var(--radius-full);
  transition: transform var(--transition-fast);
}
.widget-item-toggle input:checked + .toggle-slider {
  background: var(--color-accent);
}
.widget-item-toggle input:checked + .toggle-slider::before {
  transform: translateX(20px);
}

/* Widget Size Selectors */
.widget-item-sizes {
  display: flex;
  gap: var(--spacing-xs);
  margin-top: var(--spacing-sm);
  padding-top: var(--spacing-sm);
  border-top: 1px solid var(--color-border);
}
.widget-size-group {
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.widget-size-group label {
  font-size: var(--font-size-xs);
  color: var(--color-text-muted);
}
.widget-size-select {
  padding: var(--spacing-xs) var(--spacing-sm);
  background: var(--color-bg-primary);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-sm);
  color: var(--color-text-primary);
  font-size: var(--font-size-xs);
  min-width: 80px;
}
.widget-size-select:focus {
  border-color: var(--color-accent);
  outline: none;
}
.widget-item-content {
  display: flex;
  align-items: center;
  gap: var(--spacing-md);
  width: 100%;
}

/* Dashboard Grid Container */
.dashboard-grid {
  display: flex;
  flex-wrap: wrap;
  gap: var(--spacing-lg);
}

/* Drop zone indicator */
.drop-zone {
  min-height: 100px;
  border: 2px dashed var(--color-border);
  border-radius: var(--radius-lg);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--color-text-muted);
  font-size: var(--font-size-sm);
  transition: all var(--transition-fast);
}
.drop-zone.drag-over {
  border-color: var(--color-accent);
  background: var(--color-accent-light);
}

/* ========================================
   FORM ELEMENTS
   ======================================== */
.form-input, .form-select {
  padding: var(--spacing-sm) var(--spacing-md);
  background: var(--color-bg-secondary);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  font-size: var(--font-size-sm);
  color: var(--color-text-primary);
  transition: border-color var(--transition-fast), box-shadow var(--transition-fast);
}
.form-input:focus, .form-select:focus {
  outline: none;
  border-color: var(--color-accent);
  box-shadow: 0 0 0 3px var(--color-accent-light);
}
.form-input::placeholder {
  color: var(--color-text-muted);
}
.form-select {
  cursor: pointer;
  min-width: 140px;
  appearance: none;
  -webkit-appearance: none;
  -moz-appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%236b7280' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'%3E%3C/polyline%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 12px center;
  padding-right: 36px;
}

.form-label {
  display: block;
  font-size: var(--font-size-sm);
  font-weight: 500;
  color: var(--color-text-secondary);
  margin-bottom: var(--spacing-xs);
}

.form-textarea {
  padding: var(--spacing-sm) var(--spacing-md);
  background: var(--color-bg-secondary);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  font-size: var(--font-size-sm);
  color: var(--color-text-primary);
  font-family: var(--font-family);
  resize: vertical;
  min-height: 100px;
  width: 100%;
  transition: border-color var(--transition-fast), box-shadow var(--transition-fast);
}

.form-textarea:focus {
  outline: none;
  border-color: var(--color-accent);
  box-shadow: 0 0 0 3px var(--color-accent-light);
}

.form-textarea::placeholder {
  color: var(--color-text-muted);
}

/* Rich Text Editor */
.rich-text-editor {
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  background: var(--color-bg-tertiary);
  overflow: hidden;
}

.rich-text-editor:focus-within {
  border-color: var(--color-accent);
  box-shadow: 0 0 0 3px var(--color-accent-light);
}

.rte-toolbar {
  display: flex;
  align-items: center;
  gap: 2px;
  padding: 6px 8px;
  background: var(--color-bg-secondary);
  border-bottom: 1px solid var(--color-border);
}

.rte-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  padding: 0;
  border: none;
  border-radius: var(--radius-sm);
  background: transparent;
  color: var(--color-text-secondary);
  cursor: pointer;
  transition: all 0.15s ease;
}

.rte-btn:hover {
  background: var(--color-bg-hover);
  color: var(--color-text-primary);
}

.rte-btn.active {
  background: var(--color-accent-light);
  color: var(--color-accent);
}

.rte-btn svg {
  width: 16px;
  height: 16px;
}

.rte-separator {
  width: 1px;
  height: 20px;
  background: var(--color-border);
  margin: 0 4px;
}

.rte-content {
  padding: var(--spacing-sm) var(--spacing-md);
  min-height: 100px;
  color: var(--color-text-primary);
  font-size: var(--font-size-base);
  line-height: 1.6;
  outline: none;
}

.rte-content:empty:before {
  content: attr(data-placeholder);
  color: var(--color-text-muted);
  pointer-events: none;
}

.rte-content p {
  margin: 0 0 0.5em 0;
}

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

.rte-content ul,
.rte-content ol {
  margin: 0.5em 0;
  padding-left: 1.5em;
}

.rte-content li {
  margin: 0.25em 0;
}

.rte-content b,
.rte-content strong {
  font-weight: 600;
}

.rte-content a {
  color: var(--color-accent);
  text-decoration: underline;
}

/* Notes Editor (simple markdown) */
.notes-editor {
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  background: var(--color-bg-tertiary);
  overflow: hidden;
}

.notes-editor:focus-within {
  border-color: var(--color-accent);
  box-shadow: 0 0 0 3px var(--color-accent-light);
}

.notes-toolbar {
  display: flex;
  align-items: center;
  gap: 4px;
  padding: 6px 8px;
  background: var(--color-bg-secondary);
  border-bottom: 1px solid var(--color-border);
}

.notes-toolbar-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  padding: 0;
  border: none;
  border-radius: var(--radius-sm);
  background: transparent;
  color: var(--color-text-secondary);
  cursor: pointer;
  transition: all 0.15s ease;
}

.notes-toolbar-btn:hover {
  background: var(--color-bg-hover);
  color: var(--color-text-primary);
}

.notes-toolbar-btn svg {
  width: 14px;
  height: 14px;
}

.notes-editor .form-textarea {
  border: none;
  border-radius: 0;
  background: transparent;
}

.notes-editor .form-textarea:focus {
  box-shadow: none;
}

/* Formatted Notes Display */
.formatted-notes {
  line-height: 1.6;
  color: var(--color-text-primary);
}

.formatted-notes strong {
  font-weight: 600;
}

.formatted-notes em {
  font-style: italic;
}

.formatted-notes del {
  text-decoration: line-through;
  color: var(--color-text-muted);
}

.formatted-notes code {
  font-family: 'SF Mono', Monaco, Consolas, monospace;
  font-size: 0.875em;
  padding: 2px 6px;
  background: var(--color-bg-tertiary);
  border-radius: var(--radius-sm);
  color: var(--color-accent);
}

.form-group {
  display: flex;
  flex-direction: column;
}

.form-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: var(--spacing-md) var(--spacing-lg);
}

.form-group-wide {
  grid-column: 1 / -1;
}

.form-actions {
  display: flex;
  justify-content: flex-end;
  gap: var(--spacing-md);
  margin-top: var(--spacing-xl);
  padding-top: var(--spacing-lg);
  border-top: 1px solid var(--color-border);
}

/* ========================================
   KPI CHECKBOX & FIELDS
   ======================================== */
.form-checkbox-label {
  display: flex;
  align-items: center;
  gap: var(--spacing-sm);
  cursor: pointer;
  user-select: none;
  font-size: var(--font-size-sm);
  color: var(--color-text-primary);
}

.form-checkbox-label input[type="checkbox"] {
  width: 18px;
  height: 18px;
  margin: 0;
  cursor: pointer;
  accent-color: var(--color-accent);
}

.form-checkbox-label span {
  font-weight: 500;
}

.kpi-fields {
  background: var(--color-bg-secondary);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  padding: var(--spacing-md);
  margin-top: var(--spacing-sm);
}

.kpi-fields-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--spacing-md);
}

.kpi-fields-grid .form-group {
  margin-bottom: 0;
}

.kpi-fields-grid .form-label {
  font-size: var(--font-size-xs);
  margin-bottom: var(--spacing-xs);
}

.kpi-fields-grid .form-input {
  font-size: var(--font-size-sm);
}

@media (max-width: 768px) {
  .kpi-fields-grid {
    grid-template-columns: 1fr;
  }
}

/* ========================================
   CARD FILTERS
   ======================================== */
.card-filters {
  display: flex;
  gap: var(--spacing-md);
  flex-wrap: wrap;
  padding: var(--spacing-md);
  border-bottom: 1px solid var(--color-border);
}

/* When card-filters is inside card-header, remove duplicate padding and borders */
.card-header .card-filters {
  padding: 0;
  border-bottom: none;
  flex: 1;
}

/* Remove border-bottom from card-header when it only contains filters */
.card-header:has(.card-filters:only-child) {
  border-bottom: none;
}

.card-filters .form-input {
  flex: 1;
  min-width: 200px;
}

.card-filters .form-select {
  min-width: 160px;
}

/* ========================================
   ROW ACTIONS
   ======================================== */
.row-actions {
  display: flex;
  gap: var(--spacing-xs);
}
.action-btn {
  width: 32px;
  height: 32px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: transparent;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-sm);
  color: var(--color-text-secondary);
  cursor: pointer;
  transition: all var(--transition-fast);
}
.action-btn:hover {
  background: var(--color-bg-hover);
  border-color: var(--color-accent);
  color: var(--color-accent);
}
.action-btn svg {
  width: 14px;
  height: 14px;
  stroke: currentColor;
}

/* ========================================
   TABLE EXTRAS
   ======================================== */
.app-name, .db-name, .user-info {
  display: flex;
  align-items: center;
  gap: var(--spacing-sm);
}
.app-icon, .db-icon {
  width: 36px;
  height: 36px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--color-accent-light);
  border-radius: var(--radius-md);
  color: var(--color-accent);
}
.app-icon svg, .db-icon svg {
  width: 18px;
  height: 18px;
  stroke: currentColor;
}
.app-name .name, .db-name .name, .user-info .name {
  display: block;
  font-weight: 500;
  color: var(--color-text-primary);
}
.app-name .type, .db-name .type, .user-info .email {
  display: block;
  font-size: var(--font-size-xs);
  color: var(--color-text-muted);
}
.user-avatar {
  width: 36px;
  height: 36px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--color-gold-light);
  color: var(--color-gold);
  border-radius: var(--radius-full);
  font-weight: 600;
  font-size: var(--font-size-sm);
}
.env-badge {
  display: inline-block;
  padding: var(--spacing-xs) var(--spacing-sm);
  border-radius: var(--radius-sm);
  font-size: var(--font-size-xs);
  font-weight: 500;
  text-transform: uppercase;
}
.env-badge.prod {
  background: var(--color-success-light);
  color: var(--color-success);
}
.env-badge.staging {
  background: var(--color-warning-light);
  color: var(--color-warning);
}
.env-badge.dev {
  background: var(--color-info-light);
  color: var(--color-info);
}

/* ========================================
   WIDGET EXTRAS
   ======================================== */
.top-apps-list, .db-health-list, .recent-logins-list {
  display: flex;
  flex-direction: column;
  gap: var(--spacing-sm);
}
.top-app-item, .db-health-item, .login-item {
  display: flex;
  align-items: center;
  gap: var(--spacing-md);
  padding: var(--spacing-sm);
  background: var(--color-bg-secondary);
  border-radius: var(--radius-md);
}
.top-app-item .rank {
  font-weight: 600;
  color: var(--color-accent);
  min-width: 24px;
}
.top-app-item .name, .db-health-item .db-info .name, .login-item .login-info .name {
  flex: 1;
  font-weight: 500;
}
.top-app-item .requests {
  font-size: var(--font-size-xs);
  color: var(--color-text-secondary);
}
.db-health-item .db-info {
  flex: 1;
}
.db-health-item .db-info .type {
  font-size: var(--font-size-xs);
  color: var(--color-text-muted);
}
.db-health-item .size {
  font-size: var(--font-size-sm);
  color: var(--color-text-secondary);
}
.login-item .user-avatar {
  width: 32px;
  height: 32px;
  font-size: var(--font-size-xs);
}
.login-item .login-info {
  flex: 1;
}
.login-item .login-info .email {
  font-size: var(--font-size-xs);
  color: var(--color-text-muted);
}
.login-item .time {
  font-size: var(--font-size-xs);
  color: var(--color-text-muted);
}

/* ========================================
   RESPONSIVE - GLOBAL
   ======================================== */

/* Tablet (1024px) */
@media (max-width: 1024px) {
  .grid-2 { grid-template-columns: 1fr; }
  .topbar-search { width: 200px; }

  /* Card filters wrap */
  .card-filters {
    flex-wrap: wrap;
  }

  .card-filters .form-input,
  .card-filters .form-select {
    min-width: 140px;
    flex: 1 1 140px;
  }
}

/* Mobile (768px) */
@media (max-width: 768px) {
  .sidebar { transform: translateX(-100%); }
  .sidebar.open { transform: translateX(0); }
  .main-content { margin-left: 0; }
  .topbar-search { display: none; }
  .stats-grid { grid-template-columns: repeat(2, 1fr); }
  .filters-bar { flex-direction: column; align-items: stretch; }
  .filter-search { max-width: none; }

  /* Page header responsive */
  .page-header {
    flex-direction: column;
    align-items: flex-start;
    gap: var(--spacing-md);
  }

  .page-actions {
    width: 100%;
  }

  .page-actions .btn {
    flex: 1;
    justify-content: center;
  }

  /* Card filters stack */
  .card-filters {
    flex-direction: column;
    align-items: stretch;
  }

  .card-header .card-filters {
    flex-direction: column;
    align-items: stretch;
  }

  .card-filters .form-input,
  .card-filters .form-select {
    min-width: 100%;
    width: 100%;
  }

  /* Table responsive */
  .data-table th,
  .data-table td {
    padding: var(--spacing-sm);
    font-size: var(--font-size-xs);
  }

  /* Stat cards smaller on mobile */
  .stat-card {
    padding: var(--spacing-md);
  }

  .stat-icon {
    width: 40px;
    height: 40px;
  }

  .stat-icon svg {
    width: 20px;
    height: 20px;
  }

  .stat-value {
    font-size: var(--font-size-xl);
  }

  /* Action buttons stack */
  .action-buttons {
    flex-direction: column;
    gap: 4px;
  }

  .action-buttons .btn-icon {
    width: 100%;
    justify-content: center;
  }
}

/* Small mobile (480px) */
@media (max-width: 480px) {
  .stats-grid { grid-template-columns: 1fr; }

  .data-table th,
  .data-table td {
    padding: var(--spacing-xs);
  }

  /* Hide less important columns on very small screens */
  .data-table .hide-mobile {
    display: none;
  }
}

.mobile-menu-btn { display: none; background: transparent; color: var(--color-text-primary); padding: var(--spacing-sm); }
@media (max-width: 768px) { .mobile-menu-btn { display: flex; } }

.sidebar-overlay { display: none; position: fixed; top: 0; left: 0; right: 0; bottom: 0; background: rgba(0, 0, 0, 0.5); z-index: 99; }
.sidebar-overlay.active { display: block; }

/* Toast Notification */
@keyframes slideIn {
  from { transform: translateY(20px); opacity: 0; }
  to { transform: translateY(0); opacity: 1; }
}

/* ========================================
   SESTIMI DATA PAGES
   ======================================== */

/* Mini stat cards */
.stat-mini-card {
  background: var(--color-bg-primary);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  padding: var(--spacing-md);
  display: flex;
  flex-direction: column;
  gap: var(--spacing-xs);
}
.stat-mini-card.stat-critical {
  border-left: 3px solid var(--color-error);
}
.stat-mini-card.stat-warning {
  border-left: 3px solid var(--color-warning);
}
.stat-mini-card.stat-success {
  border-left: 3px solid var(--color-success);
}
.stat-mini-label {
  font-size: var(--font-size-xs);
  color: var(--color-text-muted);
  text-transform: uppercase;
  letter-spacing: 0.5px;
}
.stat-mini-value {
  font-size: var(--font-size-xl);
  font-weight: 600;
  color: var(--color-text-primary);
}

/* Pagination */
.pagination {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--spacing-md);
  padding: var(--spacing-md);
  border-top: 1px solid var(--color-border);
  margin-top: var(--spacing-md);
}
.pagination-info {
  font-size: var(--font-size-sm);
  color: var(--color-text-secondary);
}
.btn-sm {
  padding: var(--spacing-xs) var(--spacing-sm);
  font-size: var(--font-size-xs);
}

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

/* Ensure data-table has minimum width for scroll */
.table-responsive .data-table {
  min-width: 600px;
}

/* Loading cell */
.loading-cell {
  text-align: center;
  padding: var(--spacing-xl) !important;
  color: var(--color-text-muted);
}

/* Sestimi Status Badges */
.order-status {
  display: inline-block;
  padding: var(--spacing-xs) var(--spacing-sm);
  border-radius: var(--radius-sm);
  font-size: var(--font-size-xs);
  font-weight: 500;
  text-transform: capitalize;
}
.order-status.new, .order-status.nowe { background: var(--color-info-light); color: var(--color-info); }
.order-status.on_order { background: var(--color-warning-light); color: var(--color-warning); }
.order-status.packed { background: var(--color-accent-light); color: var(--color-accent); }
.order-status.delivery_waiting { background: #fef3c7; color: #d97706; }
.order-status.shipped, .order-status.wysłane { background: var(--color-info-light); color: var(--color-info); }
.order-status.delivered, .order-status.dostarczone { background: var(--color-success-light); color: var(--color-success); }
.order-status.finished { background: var(--color-success-light); color: var(--color-success); }
.order-status.suspended { background: var(--color-gold-light); color: var(--color-gold); }
.order-status.cancelled, .order-status.anulowane { background: var(--color-error-light); color: var(--color-error); }
.order-status.returned, .order-status.zwrócone { background: var(--color-gold-light); color: var(--color-gold); }
.order-status.false, .order-status.undefined { background: var(--color-bg-secondary); color: var(--color-text-muted); }

.payment-status {
  display: inline-block;
  padding: var(--spacing-xs) var(--spacing-sm);
  border-radius: var(--radius-sm);
  font-size: var(--font-size-xs);
  font-weight: 500;
}
.payment-status.paid, .payment-status.opłacone { background: var(--color-success-light); color: var(--color-success); }
.payment-status.unpaid, .payment-status.nieopłacone { background: var(--color-error-light); color: var(--color-error); }
.payment-status.pending, .payment-status.oczekuje { background: var(--color-warning-light); color: var(--color-warning); }
.payment-status.partial, .payment-status.częściowa { background: var(--color-gold-light); color: var(--color-gold); }
.payment-status.failed, .payment-status.nieudane { background: var(--color-error-light); color: var(--color-error); }
.payment-status.refunded, .payment-status.zwrócono { background: var(--color-info-light); color: var(--color-info); }

/* Dynamic Status Badge (colors set via inline styles) */
.status-badge-dynamic {
  display: inline-block;
  padding: var(--spacing-xs) var(--spacing-sm);
  border-radius: var(--radius-sm);
  font-size: var(--font-size-xs);
  font-weight: 600;
  text-transform: capitalize;
  white-space: nowrap;
}

.severity-badge {
  display: inline-block;
  padding: var(--spacing-xs) var(--spacing-sm);
  border-radius: var(--radius-sm);
  font-size: var(--font-size-xs);
  font-weight: 600;
  text-transform: uppercase;
}
.severity-badge.critical { background: var(--color-error); color: white; }
.severity-badge.warning { background: var(--color-warning); color: white; }
.severity-badge.info { background: var(--color-info-light); color: var(--color-info); }

.stock-badge {
  display: inline-block;
  padding: var(--spacing-xs) var(--spacing-sm);
  border-radius: var(--radius-sm);
  font-size: var(--font-size-xs);
  font-weight: 500;
}
.stock-badge.in-stock { background: var(--color-success-light); color: var(--color-success); }
.stock-badge.low-stock { background: var(--color-warning-light); color: var(--color-warning); }
.stock-badge.out-of-stock { background: var(--color-error-light); color: var(--color-error); }

.product-status {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-size: var(--font-size-xs);
}
.product-status .dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
}
.product-status.active .dot { background: var(--color-success); }
.product-status.inactive .dot { background: var(--color-text-muted); }

/* Product info cell */
.product-info {
  display: flex;
  align-items: center;
  gap: var(--spacing-sm);
}
.product-thumb {
  width: 40px;
  height: 40px;
  border-radius: var(--radius-sm);
  object-fit: cover;
  background: var(--color-bg-secondary);
}
.product-name {
  max-width: 250px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* Order/Anomaly info cell */
.order-info, .anomaly-info {
  display: flex;
  flex-direction: column;
}
.order-info .order-id, .anomaly-info .anomaly-type {
  font-weight: 500;
  color: var(--color-text-primary);
}
.order-info .order-source, .anomaly-info .anomaly-detail {
  font-size: var(--font-size-xs);
  color: var(--color-text-muted);
}

/* Order link */
.order-link {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  color: var(--color-accent);
  text-decoration: none;
  font-weight: 500;
  transition: color var(--transition-fast);
}
.order-link:hover {
  color: var(--color-accent-dark);
  text-decoration: underline;
}
.order-link .external-link-icon {
  opacity: 0.5;
  transition: opacity var(--transition-fast);
}
.order-link:hover .external-link-icon {
  opacity: 1;
}

/* Filter input date */
input[type="date"].form-input {
  min-width: 130px;
}

/* Margin cell */
.margin-value {
  font-weight: 500;
}
.margin-value.positive { color: var(--color-success); }
.margin-value.negative { color: var(--color-error); }
.margin-value.neutral { color: var(--color-text-muted); }

/* ========================================
   SETTINGS PAGE
   ======================================== */
.settings-card {
  margin-bottom: var(--spacing-lg);
}
.settings-card .card-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: var(--spacing-md) var(--spacing-lg);
  border-bottom: 1px solid var(--color-border);
}
.settings-card .card-title {
  margin: 0;
  font-size: var(--font-size-md);
  font-weight: 600;
}
.settings-card .card-body {
  padding: var(--spacing-lg);
}

.settings-group {
  margin-bottom: var(--spacing-md);
}
.settings-group:last-child {
  margin-bottom: 0;
}
.settings-label {
  display: block;
  font-weight: 500;
  margin-bottom: var(--spacing-xs);
  color: var(--color-text-primary);
}
.settings-hint {
  font-size: var(--font-size-xs);
  color: var(--color-text-muted);
  margin-top: var(--spacing-xs);
}

.settings-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap: var(--spacing-md);
}

.settings-item {
  display: flex;
  align-items: center;
  gap: var(--spacing-sm);
  padding: var(--spacing-sm);
  background: var(--color-bg-secondary);
  border-radius: var(--radius-md);
}
.settings-item-key {
  min-width: 120px;
  font-family: monospace;
  font-size: var(--font-size-xs);
  color: var(--color-text-muted);
  background: var(--color-bg-primary);
  padding: var(--spacing-xs) var(--spacing-sm);
  border-radius: var(--radius-sm);
}
.settings-item-arrow {
  color: var(--color-text-muted);
}
.settings-item-value {
  flex: 1;
}
.settings-item-value input {
  width: 100%;
  padding: var(--spacing-xs) var(--spacing-sm);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-sm);
  font-size: var(--font-size-sm);
}
.settings-item-value input:focus {
  outline: none;
  border-color: var(--color-accent);
  box-shadow: 0 0 0 2px var(--color-accent-light);
}

/* Settings Tabs */
.settings-tabs {
  display: flex;
  gap: var(--spacing-xs);
  margin-bottom: var(--spacing-lg);
  background: var(--color-bg-secondary);
  padding: var(--spacing-xs);
  border-radius: var(--radius-lg);
}
.settings-tab {
  display: flex;
  align-items: center;
  gap: var(--spacing-sm);
  padding: var(--spacing-sm) var(--spacing-lg);
  border: none;
  background: transparent;
  color: var(--color-text-muted);
  font-size: var(--font-size-sm);
  font-weight: 500;
  border-radius: var(--radius-md);
  cursor: pointer;
  transition: all 0.2s ease;
}
.settings-tab:hover {
  color: var(--color-text-primary);
  background: var(--color-bg-tertiary);
}
.settings-tab.active {
  background: var(--color-accent);
  color: white;
}
.settings-tab svg {
  opacity: 0.7;
}
.settings-tab.active svg {
  opacity: 1;
}

/* Settings Tab Content */
.settings-tab-content {
  display: none;
}
.settings-tab-content.active {
  display: block;
}

/* Status List with Color Picker */
.settings-status-list {
  display: flex;
  flex-direction: column;
  gap: var(--spacing-sm);
}
.settings-status-item {
  display: grid;
  grid-template-columns: 140px auto 1fr 120px;
  align-items: center;
  gap: var(--spacing-md);
  padding: var(--spacing-sm) var(--spacing-md);
  background: var(--color-bg-secondary);
  border-radius: var(--radius-md);
  transition: background 0.2s ease;
}
.settings-status-item:hover {
  background: var(--color-bg-tertiary);
}
.settings-status-key {
  font-family: monospace;
  font-size: var(--font-size-xs);
  color: var(--color-text-muted);
  background: var(--color-bg-primary);
  padding: var(--spacing-xs) var(--spacing-sm);
  border-radius: var(--radius-sm);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.settings-status-arrow {
  color: var(--color-text-muted);
  font-size: var(--font-size-lg);
}
.settings-status-value input[type="text"] {
  width: 100%;
  padding: var(--spacing-xs) var(--spacing-sm);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-sm);
  font-size: var(--font-size-sm);
  background: var(--color-bg-primary);
  color: var(--color-text-primary);
}
.settings-status-value input[type="text"]:focus {
  outline: none;
  border-color: var(--color-accent);
  box-shadow: 0 0 0 2px var(--color-accent-light);
}

/* Color Picker */
.settings-color-picker {
  display: flex;
  align-items: center;
  gap: var(--spacing-sm);
}
.settings-color-input {
  width: 36px;
  height: 36px;
  padding: 2px;
  border: 2px solid var(--color-border);
  border-radius: var(--radius-sm);
  cursor: pointer;
  background: var(--color-bg-primary);
}
.settings-color-input::-webkit-color-swatch-wrapper {
  padding: 0;
}
.settings-color-input::-webkit-color-swatch {
  border: none;
  border-radius: 4px;
}
.settings-color-input::-moz-color-swatch {
  border: none;
  border-radius: 4px;
}

/* Project Options Grid Rows */
.settings-option-row {
  display: flex;
  align-items: center;
  gap: var(--spacing-xs);
  padding: var(--spacing-xs);
  background: var(--color-bg-secondary);
  border-radius: var(--radius-sm);
  transition: background 0.15s ease;
}
.settings-option-row:hover {
  background: var(--color-bg-tertiary);
}
.settings-option-row .settings-color-input {
  width: 32px;
  height: 28px;
  flex-shrink: 0;
}
.settings-option-row .settings-option-value,
.settings-option-row .settings-option-label {
  flex: 1;
  min-width: 0;
  padding: var(--spacing-xs) var(--spacing-sm);
  font-size: var(--font-size-sm);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-sm);
  background: var(--color-bg-primary);
  color: var(--color-text-primary);
}
.settings-option-row .settings-option-value {
  font-family: monospace;
  font-size: var(--font-size-xs);
  color: var(--color-text-muted);
}
.settings-option-row .settings-option-value:focus,
.settings-option-row .settings-option-label:focus {
  outline: none;
  border-color: var(--color-accent);
}
.settings-option-row .btn-icon {
  flex-shrink: 0;
  opacity: 0.5;
  transition: opacity 0.15s ease;
}
.settings-option-row:hover .btn-icon {
  opacity: 1;
}

/* Project Options Grid - base + responsive */
.project-options-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--spacing-lg);
}
@media (max-width: 1200px) {
  .project-options-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}
@media (max-width: 768px) {
  .project-options-grid {
    grid-template-columns: 1fr;
  }
}

/* OMS Statuses Grid - 3 columns responsive */
.oms-statuses-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--spacing-lg);
}
@media (max-width: 1200px) {
  .oms-statuses-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}
@media (max-width: 768px) {
  .oms-statuses-grid {
    grid-template-columns: 1fr;
  }
}

.settings-color-preview {
  padding: var(--spacing-xs) var(--spacing-sm);
  border-radius: var(--radius-sm);
  font-size: var(--font-size-xs);
  font-weight: 500;
  min-width: 60px;
  text-align: center;
}

.settings-footer {
  text-align: center;
  padding: var(--spacing-lg) 0;
}
.btn-lg {
  padding: var(--spacing-md) var(--spacing-xl);
  font-size: var(--font-size-md);
}
.btn-lg svg {
  width: 20px;
  height: 20px;
  margin-right: var(--spacing-sm);
}

/* ========================================
   DRAGGABLE TABLE COLUMNS
   ======================================== */
.draggable-column {
  cursor: grab;
  user-select: none;
  position: relative;
  transition: background var(--transition-fast);
}
.draggable-column:active {
  cursor: grabbing;
}
.draggable-column.dragging {
  opacity: 0.5;
  background: var(--color-accent-light);
}
.draggable-column.drag-over-left {
  box-shadow: inset 3px 0 0 var(--color-accent);
}
.draggable-column.drag-over-right {
  box-shadow: inset -3px 0 0 var(--color-accent);
}
.draggable-column:hover {
  background: var(--color-bg-hover);
}

.column-drag-handle {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  margin-right: var(--spacing-xs);
  color: var(--color-text-muted);
  opacity: 0.5;
  transition: opacity var(--transition-fast);
  vertical-align: middle;
}
.draggable-column:hover .column-drag-handle {
  opacity: 1;
}
.column-label {
  vertical-align: middle;
}

/* Settings: Column Order Manager */
.settings-columns-list {
  display: flex;
  flex-direction: column;
  gap: var(--spacing-xs);
}
.settings-column-item {
  display: flex;
  align-items: center;
  gap: var(--spacing-md);
  padding: var(--spacing-sm) var(--spacing-md);
  background: var(--color-bg-tertiary);
  border-radius: var(--radius-md);
  border: 1px solid var(--color-border);
  cursor: grab;
  transition: all var(--transition-fast);
}
.settings-column-item:active {
  cursor: grabbing;
}
.settings-column-item:hover {
  background: var(--color-bg-hover);
  border-color: var(--color-border-light);
}
.settings-column-item.dragging {
  opacity: 0.5;
  background: var(--color-accent-light);
  border-color: var(--color-accent);
}
.settings-column-item.drag-over {
  border-color: var(--color-accent);
  border-style: dashed;
}
.settings-column-drag-handle {
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--color-text-muted);
  flex-shrink: 0;
}
.settings-column-drag-handle svg {
  width: 16px;
  height: 16px;
}
.settings-column-number {
  width: 24px;
  height: 24px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--color-accent);
  color: white;
  border-radius: var(--radius-full);
  font-size: var(--font-size-xs);
  font-weight: 600;
  flex-shrink: 0;
}
.settings-column-label {
  flex: 1;
  font-size: var(--font-size-sm);
  font-weight: 500;
}
.settings-column-id {
  font-size: var(--font-size-xs);
  color: var(--color-text-muted);
  font-family: monospace;
}

/* Settings: Detection Settings */
.settings-detection-grid {
  display: grid;
  gap: var(--spacing-lg);
}
.settings-detection-item {
  display: flex;
  flex-direction: column;
  gap: var(--spacing-xs);
}
.settings-detection-toggle {
  display: flex;
  align-items: flex-start;
  gap: var(--spacing-md);
}
.settings-detection-label {
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.settings-detection-title {
  font-weight: 500;
  font-size: var(--font-size-sm);
  color: var(--color-text);
}
.settings-detection-desc {
  font-size: var(--font-size-xs);
  color: var(--color-text-muted);
}
.settings-input-with-unit {
  display: flex;
  align-items: center;
  gap: var(--spacing-sm);
  max-width: 200px;
}
.settings-input-with-unit .form-input {
  flex: 1;
  text-align: right;
}
.input-unit {
  font-size: var(--font-size-sm);
  color: var(--color-text-muted);
  white-space: nowrap;
}
.settings-detection-actions {
  display: flex;
  align-items: center;
  gap: var(--spacing-md);
  padding-top: var(--spacing-md);
  border-top: 1px solid var(--color-border);
}
.settings-detection-status {
  font-size: var(--font-size-sm);
  color: var(--color-text-muted);
}
.settings-detection-status.success {
  color: var(--color-success);
}
.settings-detection-status.error {
  color: var(--color-danger);
}
.settings-detection-status.loading {
  color: var(--color-text-muted);
}

/* Toggle Switch */
.toggle-switch {
  position: relative;
  display: inline-block;
  width: 44px;
  height: 24px;
  flex-shrink: 0;
}
.toggle-switch input {
  opacity: 0;
  width: 0;
  height: 0;
}
.toggle-slider {
  position: absolute;
  cursor: pointer;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: var(--color-border);
  transition: var(--transition-fast);
  border-radius: 24px;
}
.toggle-slider:before {
  position: absolute;
  content: "";
  height: 18px;
  width: 18px;
  left: 3px;
  bottom: 3px;
  background-color: white;
  transition: var(--transition-fast);
  border-radius: 50%;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.2);
}
.toggle-switch input:checked + .toggle-slider {
  background-color: var(--color-accent);
}
.toggle-switch input:checked + .toggle-slider:before {
  transform: translateX(20px);
}
.toggle-switch input:focus + .toggle-slider {
  box-shadow: 0 0 0 2px var(--color-accent-light);
}

/* ============================================
   N8N PAGE STYLES
   ============================================ */

/* Stats Cards */
.n8n-stats-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: var(--spacing-lg);
  margin-bottom: var(--spacing-xl);
}
.n8n-stat-card {
  background: var(--color-background);
  border-radius: var(--radius-lg);
  padding: var(--spacing-lg);
  text-align: center;
  border: 1px solid var(--color-border);
}
.n8n-stat-value {
  font-size: 2rem;
  font-weight: 700;
  color: var(--color-accent);
  margin-bottom: var(--spacing-xs);
}
.n8n-stat-value.success {
  color: var(--color-success);
}
.n8n-stat-value.warning {
  color: var(--color-warning);
}
.n8n-stat-value.danger {
  color: var(--color-danger);
}
.n8n-stat-label {
  font-size: var(--font-size-sm);
  color: var(--color-text-muted);
}

/* Workflows Table */
.n8n-workflows-table {
  width: 100%;
  border-collapse: collapse;
  font-size: var(--font-size-sm);
}
.n8n-workflows-table th,
.n8n-workflows-table td {
  padding: var(--spacing-md);
  text-align: left;
  border-bottom: 1px solid var(--color-border);
}
.n8n-workflows-table th {
  background: var(--color-background);
  font-weight: 600;
  color: var(--color-text-muted);
  font-size: var(--font-size-xs);
  text-transform: uppercase;
  letter-spacing: 0.5px;
}
.n8n-workflows-table tbody tr:hover {
  background-color: var(--color-background);
}

/* Workflow Name Cell */
.workflow-name-cell {
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.workflow-name {
  font-weight: 500;
  color: var(--color-text);
}
.workflow-id {
  font-size: var(--font-size-xs);
  color: var(--color-text-muted);
  font-family: var(--font-mono);
}

/* Description Cell */
.workflow-description {
  max-width: 300px;
  color: var(--color-text-muted);
  font-size: var(--font-size-sm);
  cursor: pointer;
  padding: var(--spacing-sm);
  border-radius: var(--radius-sm);
  transition: var(--transition-fast);
}
.workflow-description:hover {
  background: var(--color-background);
}
.workflow-description.empty {
  font-style: italic;
  color: var(--color-text-light);
}
.workflow-description-input {
  width: 100%;
  min-width: 250px;
  padding: var(--spacing-sm);
  border: 1px solid var(--color-accent);
  border-radius: var(--radius-sm);
  font-size: var(--font-size-sm);
  resize: none;
}
.workflow-description-input:focus {
  outline: none;
  box-shadow: 0 0 0 2px var(--color-accent-light);
}

/* Editable Description */
.editable-description {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: var(--spacing-sm);
  padding: var(--spacing-sm);
  border-radius: var(--radius-sm);
  cursor: pointer;
  transition: var(--transition-fast);
  min-height: 32px;
}
.editable-description .description-text {
  flex: 1;
  text-align: left;
  color: var(--color-text-muted);
  font-size: var(--font-size-sm);
}
.editable-description:hover {
  background: var(--color-bg-tertiary);
}
.editable-description .edit-icon {
  width: 14px;
  height: 14px;
  opacity: 0.3;
  transition: var(--transition-fast);
  flex-shrink: 0;
  color: var(--color-text-muted);
}
.editable-description:hover .edit-icon {
  opacity: 1;
}
.editable-description:not(:has(.description-text)) .edit-icon {
  opacity: 0.5;
}
.description-input {
  width: 100%;
  padding: var(--spacing-sm);
  border: 1px solid var(--color-accent);
  border-radius: var(--radius-sm);
  font-size: var(--font-size-sm);
  background: var(--color-bg-primary);
  color: var(--color-text);
  resize: none;
  min-height: 60px;
}
.description-input:focus {
  outline: none;
  box-shadow: 0 0 0 2px var(--color-accent-light);
}

/* Webhook URL Cell */
.editable-webhook {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: var(--spacing-sm);
  padding: var(--spacing-sm);
  border-radius: var(--radius-sm);
  cursor: pointer;
  transition: var(--transition-fast);
  min-height: 32px;
}
.editable-webhook .webhook-text {
  flex: 1;
  text-align: left;
  color: var(--color-accent);
  font-size: var(--font-size-xs);
  font-family: monospace;
  word-break: break-all;
}
.editable-webhook:hover {
  background: var(--color-bg-tertiary);
}
.editable-webhook .edit-icon {
  width: 14px;
  height: 14px;
  opacity: 0.3;
  transition: var(--transition-fast);
  flex-shrink: 0;
  color: var(--color-text-muted);
}
.editable-webhook:hover .edit-icon {
  opacity: 1;
}
.workflow-webhook-cell {
  max-width: 200px;
}

/* Workflow Tags */
.workflow-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
  margin-top: 4px;
}
.workflow-tags .tag {
  padding: 2px 6px;
  font-size: 10px;
  background: var(--color-bg-tertiary);
  color: var(--color-text-muted);
  border-radius: var(--radius-sm);
}

/* Action Buttons */
.action-buttons {
  display: flex;
  gap: var(--spacing-xs);
  align-items: center;
}
.btn-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  padding: 0;
  border: none;
  border-radius: var(--radius-md);
  cursor: pointer;
  transition: var(--transition-fast);
  text-decoration: none;
}
.btn-icon svg {
  width: 16px;
  height: 16px;
}
.btn-icon.btn-success {
  background: var(--color-success-light);
  color: var(--color-success);
}
.btn-icon.btn-success:hover {
  background: var(--color-success);
  color: white;
}
.btn-icon.btn-warning {
  background: var(--color-warning-light);
  color: var(--color-warning);
}
.btn-icon.btn-warning:hover {
  background: var(--color-warning);
  color: white;
}
.btn-icon.btn-danger {
  background: var(--color-danger-light);
  color: var(--color-danger);
}
.btn-icon.btn-danger:hover {
  background: var(--color-danger);
  color: white;
}
.btn-icon.btn-secondary {
  background: var(--color-bg-tertiary);
  color: var(--color-text-muted);
}
.btn-icon.btn-secondary:hover {
  background: var(--color-border);
  color: var(--color-text);
}

/* Execution Info */
.execution-info {
  display: flex;
  flex-direction: column;
  gap: 4px;
  font-size: var(--font-size-sm);
}
.execution-count {
  font-weight: 600;
  color: var(--color-text);
}

/* Status Badge */
.workflow-status {
  display: inline-flex;
  align-items: center;
  gap: var(--spacing-xs);
  padding: 4px 10px;
  border-radius: var(--radius-full);
  font-size: var(--font-size-xs);
  font-weight: 500;
}
.workflow-status.active {
  background: rgba(34, 197, 94, 0.1);
  color: var(--color-success);
}
.workflow-status.inactive {
  background: rgba(156, 163, 175, 0.1);
  color: var(--color-text-muted);
}
.status-dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: currentColor;
}

/* Trigger Badges */
.trigger-badges {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
}
.trigger-badge {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 2px 8px;
  border-radius: var(--radius-full);
  font-size: var(--font-size-xs);
  background: var(--color-background);
  color: var(--color-text-muted);
  border: 1px solid var(--color-border);
}
.trigger-badge.webhook {
  background: rgba(59, 130, 246, 0.1);
  color: #3b82f6;
  border-color: rgba(59, 130, 246, 0.2);
}
.trigger-badge.schedule {
  background: rgba(168, 85, 247, 0.1);
  color: #a855f7;
  border-color: rgba(168, 85, 247, 0.2);
}
.trigger-badge.manual {
  background: rgba(156, 163, 175, 0.1);
  color: #6b7280;
  border-color: rgba(156, 163, 175, 0.2);
}
.trigger-badge.form {
  background: rgba(34, 197, 94, 0.1);
  color: #22c55e;
  border-color: rgba(34, 197, 94, 0.2);
}
.trigger-badge.chat {
  background: rgba(236, 72, 153, 0.1);
  color: #ec4899;
  border-color: rgba(236, 72, 153, 0.2);
}

/* Execution Info */
.execution-info {
  display: flex;
  flex-direction: column;
  gap: 2px;
  font-size: var(--font-size-xs);
}
.execution-count {
  color: var(--color-text);
  font-weight: 500;
}
.execution-last {
  color: var(--color-text-muted);
}
.execution-status {
  display: inline-block;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  margin-right: 4px;
}
.execution-status.success {
  background: var(--color-success);
}
.execution-status.error {
  background: var(--color-danger);
}
.execution-status.running {
  background: var(--color-warning);
}

/* Tags */
.workflow-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
}
.workflow-tag {
  padding: 2px 8px;
  border-radius: var(--radius-full);
  font-size: var(--font-size-xs);
  background: var(--color-background);
  color: var(--color-text-muted);
}

/* Actions */
.workflow-actions {
  display: flex;
  gap: var(--spacing-xs);
}
.workflow-action-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  border: none;
  border-radius: var(--radius-md);
  background: transparent;
  color: var(--color-text-muted);
  cursor: pointer;
  transition: var(--transition-fast);
}
.workflow-action-btn:hover {
  background: var(--color-background);
  color: var(--color-text);
}
.workflow-action-btn.execute:hover {
  background: rgba(34, 197, 94, 0.1);
  color: var(--color-success);
}
.workflow-action-btn.execute:disabled {
  opacity: 0.3;
  cursor: not-allowed;
}
.workflow-action-btn.delete:hover {
  background: rgba(239, 68, 68, 0.1);
  color: var(--color-danger);
}
.workflow-action-btn.link:hover {
  background: rgba(59, 130, 246, 0.1);
  color: #3b82f6;
}
.workflow-action-btn svg {
  width: 16px;
  height: 16px;
}

/* Filter Bar */
.n8n-filter-bar {
  display: flex;
  align-items: center;
  gap: var(--spacing-md);
  margin-bottom: var(--spacing-lg);
  flex-wrap: wrap;
}
.n8n-filter-bar .form-input,
.n8n-filter-bar .form-select {
  min-width: 150px;
}
.n8n-filter-bar .search-input {
  flex: 1;
  min-width: 200px;
  max-width: 300px;
}

/* Loading State */
.n8n-loading {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: var(--spacing-xl) * 2;
  color: var(--color-text-muted);
}
.n8n-loading svg {
  animation: spin 1s linear infinite;
  margin-right: var(--spacing-sm);
}
@keyframes spin {
  from { transform: rotate(0deg); }
  to { transform: rotate(360deg); }
}

/* Empty State */
.n8n-empty {
  text-align: center;
  padding: var(--spacing-xl) * 2;
  color: var(--color-text-muted);
}
.n8n-empty svg {
  width: 48px;
  height: 48px;
  margin-bottom: var(--spacing-md);
  opacity: 0.5;
}

/* Responsive */
@media (max-width: 1024px) {
  .n8n-workflows-table {
    display: block;
    overflow-x: auto;
  }
}

/* ============================================
   UTILITY CLASSES
   ============================================ */
.text-center { text-align: center; }
.text-left { text-align: left; }
.text-right { text-align: right; }
.text-muted { color: var(--color-text-muted); }
.text-success { color: var(--color-success); }
.text-danger { color: var(--color-danger); }
.text-warning { color: var(--color-warning); }

/* ============================================
   EXPANDABLE NAV ITEMS
   ============================================ */
.nav-item-expandable {
  display: flex;
  flex-direction: column;
}

.nav-item-header {
  display: flex;
  align-items: center;
  gap: var(--spacing-md);
  padding: var(--spacing-md) var(--spacing-lg);
  color: var(--color-text-secondary);
  cursor: pointer;
  border-left: 3px solid transparent;
  transition: all var(--transition-fast);
}

.nav-item-header:hover {
  background: var(--color-bg-hover);
  color: var(--color-text-primary);
}

.nav-item-expandable.expanded .nav-item-header,
.nav-item-header.active {
  background: var(--color-accent-light);
  color: var(--color-accent);
  border-left-color: var(--color-accent);
}

.nav-item-header svg:first-child {
  width: 20px;
  height: 20px;
  flex-shrink: 0;
}

.nav-item-header > span {
  flex: 1;
  font-size: var(--font-size-base);
  font-weight: 500;
  white-space: nowrap;
}

.nav-expand-icon {
  width: 16px;
  height: 16px;
  transition: transform 0.2s ease;
  opacity: 0.5;
}

.nav-item-expandable.expanded .nav-expand-icon {
  transform: rotate(180deg);
}

/* Submenu */
.nav-submenu {
  max-height: 0;
  overflow: hidden;
  transition: max-height 0.3s ease;
}

.nav-item-expandable.expanded .nav-submenu {
  max-height: 400px;
}

.nav-submenu-item {
  display: flex;
  align-items: center;
  gap: var(--spacing-sm);
  padding: 8px var(--spacing-md);
  padding-left: calc(var(--spacing-xl) + var(--spacing-md));
  color: var(--color-text-muted);
  cursor: pointer;
  transition: var(--transition-fast);
  font-size: var(--font-size-sm);
  border-radius: var(--radius-sm);
  margin: 2px var(--spacing-sm);
}

.nav-submenu-item svg {
  width: 16px;
  height: 16px;
  flex-shrink: 0;
  opacity: 0.7;
}

.nav-submenu-item:hover {
  background: var(--color-bg-secondary);
  color: var(--color-text);
}

.nav-submenu-item:hover svg {
  opacity: 1;
}

.nav-submenu-item.active {
  background: var(--color-primary-light);
  color: var(--color-primary);
}

.nav-submenu-item.active svg {
  opacity: 1;
}

.nav-submenu-indicator {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  flex-shrink: 0;
}

.nav-submenu-indicator.online {
  background: var(--color-success);
}

.nav-submenu-indicator.offline {
  background: var(--color-danger);
}

.nav-submenu-indicator.degraded {
  background: var(--color-warning);
}

.nav-submenu-text {
  flex: 1;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.nav-submenu-badge {
  font-size: 10px;
  padding: 2px 6px;
  background: var(--color-bg-secondary);
  border-radius: var(--radius-sm);
  color: var(--color-text-muted);
}

.nav-submenu-loading,
.nav-submenu-error,
.nav-submenu-empty {
  padding: var(--spacing-sm);
  font-size: var(--font-size-xs);
  color: var(--color-text-muted);
}

.nav-submenu-error {
  color: var(--color-danger);
}

/* Collapsed sidebar - hide submenu */
.sidebar.collapsed .nav-submenu {
  display: none;
}

.sidebar.collapsed .nav-expand-icon {
  display: none;
}

/* ============================================
   TABLES PAGE
   ============================================ */
#page-tables .page-title {
  display: flex;
  align-items: center;
  gap: var(--spacing-sm);
}

#page-tables .btn-ghost {
  background: transparent;
  border: none;
  padding: var(--spacing-xs);
  color: var(--color-text-muted);
}

#page-tables .btn-ghost:hover {
  color: var(--color-primary);
  background: var(--color-primary-light);
}

.stat-icon.tables {
  background: rgba(99, 102, 241, 0.1);
  color: var(--color-primary);
}

.stat-icon.columns {
  background: rgba(16, 185, 129, 0.1);
  color: var(--color-success);
}

.stat-icon.rows {
  background: rgba(245, 158, 11, 0.1);
  color: var(--color-warning);
}

.stat-icon.size {
  background: rgba(139, 92, 246, 0.1);
  color: #8b5cf6;
}

/* Table name cell */
.table-name {
  display: flex;
  align-items: center;
  gap: var(--spacing-sm);
}

.table-icon {
  color: var(--color-text-muted);
}

/* Type badge */
.type-badge {
  display: inline-block;
  padding: 2px 8px;
  font-size: var(--font-size-xs);
  font-weight: 500;
  border-radius: var(--radius-sm);
}

.type-badge.table {
  background: rgba(99, 102, 241, 0.1);
  color: var(--color-primary);
}

.type-badge.view {
  background: rgba(245, 158, 11, 0.1);
  color: var(--color-warning);
}

/* ============================================
   TABLE PREVIEW MODAL
   ============================================ */
#table-preview-modal {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: rgba(0, 0, 0, 0.6);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 10000;
  padding: var(--spacing-lg);
  opacity: 1;
  visibility: visible;
}

#table-preview-modal .modal-content {
  background: var(--color-bg-primary);
  border-radius: var(--radius-lg);
  box-shadow: 0 20px 60px rgba(0, 0, 0, 0.3);
  max-width: 500px;
  width: 100%;
  max-height: 90vh;
  display: flex;
  flex-direction: column;
  overflow: hidden;
}

#table-preview-modal .modal-content.modal-lg {
  max-width: 700px;
}

#table-preview-modal .modal-content.modal-xl {
  max-width: 90vw;
  width: 1200px;
}

#table-preview-modal .modal-content.modal-maximized {
  max-width: calc(100vw - 40px) !important;
  width: calc(100vw - 40px) !important;
  max-height: calc(100vh - 40px) !important;
  height: calc(100vh - 40px) !important;
}

#table-preview-modal .modal-content.modal-maximized .modal-body {
  max-height: calc(100vh - 140px);
}

#table-preview-modal .modal-maximize {
  background: none;
  border: none;
  cursor: pointer;
  color: var(--color-text-muted);
  padding: var(--spacing-xs);
  border-radius: var(--radius-sm);
  transition: all var(--transition-fast);
}

#table-preview-modal .modal-maximize:hover {
  background: var(--color-bg-hover);
  color: var(--color-text-primary);
}

#table-preview-modal .modal-maximize svg {
  width: 18px;
  height: 18px;
}

#table-preview-modal .modal-maximize .icon-minimize {
  display: none;
}

#table-preview-modal .modal-content.modal-maximized .modal-maximize .icon-maximize {
  display: none;
}

#table-preview-modal .modal-content.modal-maximized .modal-maximize .icon-minimize {
  display: block;
}

#table-preview-modal .modal-header-actions {
  display: flex;
  align-items: center;
  gap: var(--spacing-xs);
}

#table-preview-modal .modal-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: var(--spacing-md) var(--spacing-lg);
  border-bottom: 1px solid var(--color-border);
}

#table-preview-modal .modal-header h3 {
  margin: 0;
  font-size: var(--font-size-lg);
  font-weight: 600;
}

#table-preview-modal .modal-close {
  background: none;
  border: none;
  font-size: 24px;
  cursor: pointer;
  color: var(--color-text-muted);
  padding: 0;
  line-height: 1;
}

#table-preview-modal .modal-close:hover {
  color: var(--color-text);
}

#table-preview-modal .modal-body {
  padding: var(--spacing-lg);
  overflow: auto;
  flex: 1;
}

.table-preview-wrapper {
  overflow-x: auto;
  margin: 0 calc(-1 * var(--spacing-lg));
  padding: 0 var(--spacing-lg);
}

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

.data-table-compact th,
.data-table-compact td {
  padding: var(--spacing-xs) var(--spacing-sm);
  white-space: nowrap;
}

.data-table-compact code {
  background: var(--color-bg-secondary);
  padding: 2px 6px;
  border-radius: var(--radius-sm);
  font-size: 11px;
}

.modal-footer-info {
  margin-top: var(--spacing-md);
  padding-top: var(--spacing-md);
  border-top: 1px solid var(--color-border);
  text-align: center;
  color: var(--color-text-muted);
  font-size: var(--font-size-sm);
}

/* ============================================
   PROJECTS PAGE STYLES
   ============================================ */

/* Project name column */
.project-name {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.project-name strong {
  color: var(--color-text);
}

.project-desc {
  font-size: var(--font-size-xs);
  line-height: 1.3;
}

/* Progress bar */
.progress-bar-container {
  display: flex;
  align-items: center;
  gap: var(--spacing-sm);
  min-width: 100px;
}

.progress-bar-container .progress-bar {
  flex: 1;
  height: 6px;
  background: var(--color-primary);
  border-radius: 3px;
  position: relative;
}

.progress-bar-container::before {
  content: '';
  position: absolute;
  left: 0;
  top: 0;
  height: 100%;
  width: 100%;
  background: var(--color-bg-tertiary);
  border-radius: 3px;
}

.progress-bar-container {
  position: relative;
}

.progress-bar-container .progress-bar {
  z-index: 1;
}

.progress-text {
  font-size: var(--font-size-xs);
  color: var(--color-text-muted);
  min-width: 35px;
  text-align: right;
}

/* Priority badges */
.priority-badge {
  display: inline-block;
  padding: 2px 8px;
  font-size: var(--font-size-xs);
  font-weight: 500;
  border-radius: var(--radius-sm);
  background: var(--color-bg-tertiary);
  color: var(--color-text-muted);
}

.priority-badge.priority-low {
  background: rgba(107, 114, 128, 0.2);
  color: var(--color-text-muted);
}

.priority-badge.priority-medium {
  background: rgba(59, 130, 246, 0.2);
  color: #60a5fa;
}

.priority-badge.priority-high {
  background: rgba(245, 158, 11, 0.2);
  color: var(--color-warning);
}

.priority-badge.priority-critical {
  background: rgba(239, 68, 68, 0.2);
  color: var(--color-error);
}

/* Status badges for projects */
.status-badge.status-pending {
  background: rgba(107, 114, 128, 0.2);
  color: var(--color-text-muted);
}

.status-badge.status-warning {
  background: rgba(245, 158, 11, 0.2);
  color: var(--color-warning);
}

.status-badge.status-success {
  background: rgba(16, 185, 129, 0.2);
  color: var(--color-success);
}

.status-badge.status-muted {
  background: rgba(107, 114, 128, 0.15);
  color: var(--color-text-muted);
}

/* Task checkbox */
.task-checkbox {
  width: 18px;
  height: 18px;
  cursor: pointer;
  accent-color: var(--color-primary);
}

/* Completed task row */
.task-row.completed {
  opacity: 0.6;
}

.text-line-through {
  text-decoration: line-through;
}

/* Action buttons inline */
.action-buttons {
  display: flex;
  gap: var(--spacing-xs);
}

/* Card actions header */
.card-actions {
  display: flex;
  gap: var(--spacing-sm);
  align-items: center;
}

/* Tasks section styling */
#tasks-section {
  animation: fadeIn 0.2s ease;
}

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

/* Button link style */
.btn-link {
  background: none;
  border: none;
  color: var(--color-primary);
  cursor: pointer;
  padding: 0;
  font-size: inherit;
  text-decoration: underline;
}

.btn-link:hover {
  color: var(--color-primary-hover);
}

/* ============================================
   PROJECTS PAGE STYLES
   ============================================ */

/* Projects Table */
#page-projects .data-table th {
  text-transform: uppercase;
  font-size: var(--font-size-xs);
  font-weight: 600;
  color: var(--color-text-muted);
  letter-spacing: 0.05em;
}

/* Project name with description */
.project-name {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.project-name strong {
  color: var(--color-text-primary);
}

.project-desc {
  font-size: var(--font-size-xs);
  color: var(--color-text-muted);
  max-width: 300px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.project-number-cell {
  font-family: var(--font-mono);
  font-size: var(--font-size-sm);
  font-weight: 500;
  color: var(--color-primary);
  background: rgba(99, 102, 241, 0.1);
  padding: 4px 8px;
  border-radius: var(--radius-sm);
  display: inline-block;
}

/* Progress Bar - Projects */
#page-projects .progress-bar-container {
  width: 100%;
  min-width: 80px;
  max-width: 120px;
  height: 8px;
  background: var(--color-bg-tertiary);
  border-radius: var(--radius-full);
  overflow: hidden;
  position: relative;
}

#page-projects .progress-bar-container .progress-bar {
  height: 100%;
  background: linear-gradient(90deg, var(--color-primary), var(--color-success));
  border-radius: var(--radius-full);
  transition: width 0.3s ease;
}

#page-projects .progress-bar-container .progress-text {
  position: absolute;
  right: -35px;
  top: 50%;
  transform: translateY(-50%);
  font-size: var(--font-size-xs);
  color: var(--color-text-muted);
  white-space: nowrap;
}

/* Progress wrapper for table cell */
#page-projects td .progress-bar-container {
  display: inline-flex;
  align-items: center;
  position: relative;
}

/* Status badges for Projects */
.status-badge.status-planning {
  background: rgba(99, 102, 241, 0.15);
  color: #818cf8;
}

.status-badge.status-planning::before {
  background: #818cf8;
}

.status-badge.status-on-hold {
  background: rgba(107, 114, 128, 0.15);
  color: var(--color-text-muted);
}

.status-badge.status-on-hold::before {
  background: var(--color-text-muted);
}

.status-badge.status-in-progress {
  background: rgba(245, 158, 11, 0.15);
  color: var(--color-warning);
}

.status-badge.status-in-progress::before {
  background: var(--color-warning);
}

.status-badge.status-done,
.status-badge.status-completed {
  background: rgba(16, 185, 129, 0.15);
  color: var(--color-success);
}

.status-badge.status-done::before,
.status-badge.status-completed::before {
  background: var(--color-success);
}

.status-badge.status-not-started {
  background: rgba(107, 114, 128, 0.1);
  color: var(--color-text-secondary);
}

.status-badge.status-not-started::before {
  background: var(--color-text-secondary);
}

/* Priority badges for Projects */
.priority-badge.priority-critical {
  background: rgba(239, 68, 68, 0.15);
  color: var(--color-danger);
}

.priority-badge.priority-high {
  background: rgba(245, 158, 11, 0.15);
  color: var(--color-warning);
}

.priority-badge.priority-medium {
  background: rgba(59, 130, 246, 0.15);
  color: #60a5fa;
}

.priority-badge.priority-low {
  background: rgba(107, 114, 128, 0.1);
  color: var(--color-text-muted);
}

/* Card filters - page specific overrides removed, using global .card-filters styles */

/* Projects Table Responsive - ukrywanie kolumn */
@media (max-width: 1024px) {
  #page-projects .data-table th:nth-child(6),
  #page-projects .data-table td:nth-child(6) {
    display: none; /* Postęp */
  }
}

@media (max-width: 768px) {
  #page-projects .data-table th:nth-child(5),
  #page-projects .data-table td:nth-child(5),
  #page-projects .data-table th:nth-child(7),
  #page-projects .data-table td:nth-child(7) {
    display: none; /* Właściciel, Zadania */
  }

  #page-projects .project-desc {
    max-width: 150px;
  }

  #page-projects .progress-bar-container {
    min-width: 60px;
    max-width: 80px;
  }
}

@media (max-width: 480px) {
  #page-projects .data-table th:nth-child(4),
  #page-projects .data-table td:nth-child(4),
  #page-projects .data-table th:nth-child(8),
  #page-projects .data-table td:nth-child(8) {
    display: none; /* Priorytet, Deadline */
  }

  #page-projects .project-desc {
    display: none;
  }
}

/* ============================================
   SETTINGS - PROJECT NUMBERING
   ============================================ */

/* Numbering Grid */
.settings-numbering-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: var(--spacing-lg);
}

@media (max-width: 768px) {
  .settings-numbering-grid {
    grid-template-columns: 1fr;
  }
}

/* Counter Info */
.settings-counter-info {
  display: flex;
  gap: var(--spacing-xl);
  flex-wrap: wrap;
}

.counter-stat {
  display: flex;
  flex-direction: column;
  gap: var(--spacing-xs);
}

.counter-label {
  font-size: var(--font-size-sm);
  color: var(--color-text-muted);
}

.counter-value {
  font-size: var(--font-size-lg);
  font-weight: 600;
  color: var(--color-text-primary);
}

/* Preview box */
.settings-preview {
  border: 1px solid var(--color-border);
}

.project-number-preview {
  font-family: 'Barlow', monospace;
  letter-spacing: 0.05em;
}

/* Settings status message */
.settings-status {
  margin-left: var(--spacing-md);
  font-size: var(--font-size-sm);
}

.settings-status.success {
  color: var(--color-success);
}

.settings-status.error {
  color: var(--color-danger);
}

/* ============================================
   PROJECT DETAILS PAGE
   ============================================ */

/* Breadcrumb / Back button */
.page-breadcrumb {
  margin-bottom: var(--spacing-lg);
}

.btn-back {
  display: inline-flex;
  align-items: center;
  gap: var(--spacing-sm);
  color: var(--color-text-muted);
  font-weight: 500;
  transition: color 0.2s ease;
}

.btn-back:hover {
  color: var(--color-primary);
}

/* Project Detail Header */
.project-detail-header {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  margin-bottom: var(--spacing-xl);
  padding-bottom: var(--spacing-lg);
  border-bottom: 1px solid var(--color-border);
}

.project-detail-main {
  flex: 1;
}

.project-detail-number {
  display: inline-block;
  font-family: var(--font-mono);
  font-size: var(--font-size-sm);
  font-weight: 600;
  color: var(--color-primary);
  background: rgba(99, 102, 241, 0.1);
  padding: 4px 10px;
  border-radius: var(--radius-sm);
  margin-bottom: var(--spacing-sm);
}

.project-detail-name {
  font-size: var(--font-size-2xl);
  font-weight: 700;
  color: var(--color-text-primary);
  margin: 0 0 var(--spacing-xs) 0;
}

.project-detail-desc {
  font-size: var(--font-size-md);
  color: var(--color-text-muted);
  margin: 0;
  max-width: 600px;
}

/* Project Info Cards */
.project-detail-info {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  gap: var(--spacing-md);
  margin-bottom: var(--spacing-xl);
}

.detail-info-card {
  background: var(--color-bg-secondary);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  padding: var(--spacing-md);
  display: flex;
  flex-direction: column;
  gap: var(--spacing-xs);
}

.detail-info-card.detail-info-progress {
  grid-column: span 2;
}

.detail-info-label {
  font-size: var(--font-size-xs);
  color: var(--color-text-muted);
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

.detail-info-value {
  font-size: var(--font-size-md);
  font-weight: 600;
  color: var(--color-text-primary);
}

/* Progress bar in detail */
.detail-progress-container {
  display: flex;
  align-items: center;
  gap: var(--spacing-md);
}

.detail-progress-bar {
  flex: 1;
  height: 12px;
  background: var(--color-bg-tertiary);
  border-radius: var(--radius-full);
  overflow: hidden;
}

.detail-progress-fill {
  height: 100%;
  background: linear-gradient(90deg, var(--color-primary), var(--color-success));
  border-radius: var(--radius-full);
  transition: width 0.5s ease;
}

.detail-progress-text {
  font-size: var(--font-size-lg);
  font-weight: 700;
  color: var(--color-primary);
  min-width: 50px;
  text-align: right;
}

/* Tasks Card */
.project-tasks-card .card-header {
  border-bottom: 1px solid var(--color-border);
}

.card-header-left {
  display: flex;
  align-items: center;
  gap: var(--spacing-md);
}

.tasks-count-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 24px;
  height: 24px;
  background: var(--color-bg-tertiary);
  color: var(--color-text-muted);
  font-size: var(--font-size-xs);
  font-weight: 600;
  border-radius: var(--radius-full);
  padding: 0 8px;
}

/* Quick Add Task */
.quick-add-task {
  display: flex;
  gap: var(--spacing-sm);
  margin-bottom: var(--spacing-lg);
  padding-bottom: var(--spacing-lg);
  border-bottom: 1px solid var(--color-border);
}

.quick-add-task .form-input {
  flex: 1;
}

/* Tasks List */
.tasks-list {
  display: flex;
  flex-direction: column;
  gap: var(--spacing-xs);
}

.tasks-empty {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: var(--spacing-2xl);
  color: var(--color-text-muted);
  text-align: center;
}

.tasks-empty p {
  margin: var(--spacing-md) 0 var(--spacing-xs) 0;
  font-weight: 500;
}

.tasks-empty span {
  font-size: var(--font-size-sm);
  opacity: 0.7;
}

/* Task Item */
.task-item {
  display: flex;
  align-items: center;
  gap: var(--spacing-md);
  padding: var(--spacing-md);
  background: var(--color-bg-secondary);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  transition: all 0.2s ease;
}

.task-item:hover {
  border-color: var(--color-primary);
  box-shadow: 0 2px 8px rgba(99, 102, 241, 0.1);
}

.task-item.task-done {
  opacity: 0.6;
  background: var(--color-bg-tertiary);
}

.task-item.task-done .task-name {
  text-decoration: line-through;
}

/* Task Checkbox */
.task-checkbox {
  width: 22px;
  height: 22px;
  border: 2px solid var(--color-border);
  border-radius: var(--radius-sm);
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: all 0.2s ease;
  flex-shrink: 0;
}

.task-checkbox:hover {
  border-color: var(--color-primary);
}

.task-checkbox.checked {
  background: var(--color-success);
  border-color: var(--color-success);
}

.task-checkbox svg {
  width: 14px;
  height: 14px;
  color: white;
  opacity: 0;
  transition: opacity 0.2s ease;
}

.task-checkbox.checked svg {
  opacity: 1;
}

/* Task Content */
.task-content {
  flex: 1;
  min-width: 0;
}

.task-name {
  font-weight: 500;
  color: var(--color-text-primary);
  margin-bottom: 2px;
}

.task-meta {
  display: flex;
  align-items: center;
  gap: var(--spacing-md);
  font-size: var(--font-size-xs);
  color: var(--color-text-muted);
}

.task-meta-item {
  display: flex;
  align-items: center;
  gap: 4px;
}

.task-meta-item svg {
  width: 12px;
  height: 12px;
}

/* Task Actions */
.task-actions {
  display: flex;
  gap: var(--spacing-xs);
  opacity: 0;
  transition: opacity 0.2s ease;
}

.task-item:hover .task-actions {
  opacity: 1;
}

/* Priority indicator in task */
.task-priority-indicator {
  width: 4px;
  height: 100%;
  min-height: 40px;
  border-radius: 2px;
  flex-shrink: 0;
}

.task-priority-indicator.priority-critical {
  background: var(--color-danger);
}

.task-priority-indicator.priority-high {
  background: var(--color-warning);
}

.task-priority-indicator.priority-medium {
  background: var(--color-primary);
}

.task-priority-indicator.priority-low {
  background: var(--color-text-muted);
}

/* ==========================================
   PROJECT DETAILS - Additional Styles
   ========================================== */

/* Clickable project row */
.project-row-clickable {
  cursor: pointer;
  transition: background-color 0.2s ease;
}

.project-row-clickable:hover {
  background: var(--color-bg-hover);
}

.project-name-link {
  color: var(--color-primary);
  transition: color 0.2s ease;
}

.project-row-clickable:hover .project-name-link {
  color: var(--color-primary-hover);
  text-decoration: underline;
}

.task-count-badge {
  color: var(--color-text-muted);
  font-size: var(--font-size-sm);
}

/* Clickable task row */
.task-row-clickable {
  cursor: pointer;
  transition: background-color 0.2s ease;
}

.task-row-clickable:hover {
  background: var(--color-bg-hover);
}

.task-row-clickable:hover .task-name {
  color: var(--color-accent);
}

.task-row-clickable:hover .task-number {
  color: var(--color-text-primary);
}

/* Clickable user row */
.user-row-clickable {
  cursor: pointer;
  transition: background-color 0.2s ease;
}

.user-row-clickable:hover {
  background: var(--color-bg-hover);
}

.user-row-clickable:hover .user-name {
  color: var(--color-accent);
}

/* User info display in table */
.user-info {
  display: flex;
  align-items: center;
  gap: var(--spacing-sm);
}

.user-id {
  font-family: var(--font-mono);
  font-size: var(--font-size-xs);
  color: var(--color-text-muted);
}

.user-email {
  font-size: var(--font-size-sm);
  color: var(--color-text-secondary);
}

/* User permissions form */
.permission-section {
  background: var(--color-bg-secondary);
  border-radius: var(--radius-md);
  padding: var(--spacing-md);
  margin-bottom: var(--spacing-md);
}

.permission-section-highlight {
  background: linear-gradient(135deg, rgba(99, 102, 241, 0.1), rgba(99, 102, 241, 0.05));
  border: 1px solid rgba(99, 102, 241, 0.2);
  margin-bottom: 0;
}

/* Fix padding in first form-group */
.modal-form-grid > .form-group-wide:first-child .permission-section {
  margin-bottom: 0;
}

.permission-section-title {
  font-size: var(--font-size-sm);
  font-weight: 600;
  color: var(--color-text-primary);
  margin: 0 0 var(--spacing-sm) 0;
  display: flex;
  align-items: center;
  gap: var(--spacing-xs);
}

.permission-section-title svg {
  width: 16px;
  height: 16px;
  color: var(--color-primary);
}

.permission-checkbox {
  display: flex;
  align-items: center;
  gap: var(--spacing-sm);
  padding: var(--spacing-xs) 0;
  cursor: pointer;
  transition: background var(--transition-fast);
  border-radius: var(--radius-sm);
  padding-left: var(--spacing-xs);
  margin-left: calc(-1 * var(--spacing-xs));
  padding-right: var(--spacing-xs);
}

.permission-checkbox:hover {
  background: var(--color-bg-tertiary);
}

.permission-checkbox input[type="checkbox"] {
  width: 18px;
  height: 18px;
  cursor: pointer;
  accent-color: var(--color-primary);
  flex-shrink: 0;
}

.permission-label {
  font-size: var(--font-size-sm);
  color: var(--color-text-secondary);
  user-select: none;
}

.permission-checkbox:hover .permission-label {
  color: var(--color-text-primary);
}

/* User info panel in permissions modal */
.user-info-panel {
  background: var(--color-bg-tertiary);
  border-radius: var(--radius-md);
  padding: var(--spacing-md);
  margin-bottom: var(--spacing-lg);
}

.user-info-panel .info-row {
  display: flex;
  justify-content: space-between;
  padding: var(--spacing-xs) 0;
  border-bottom: 1px solid var(--color-border);
}

.user-info-panel .info-row:last-child {
  border-bottom: none;
}

.user-info-panel .info-label {
  font-size: var(--font-size-sm);
  color: var(--color-text-muted);
}

.user-info-panel .info-value {
  font-size: var(--font-size-sm);
  color: var(--color-text-primary);
  font-weight: 500;
}

/* Permission CRUD Grid */
.permission-crud-header {
  display: grid;
  grid-template-columns: 1fr repeat(4, 70px);
  gap: var(--spacing-xs);
  padding: var(--spacing-sm) var(--spacing-xs);
  background: var(--color-bg-tertiary);
  border-radius: var(--radius-sm);
  margin-bottom: var(--spacing-sm);
  font-size: var(--font-size-xs);
  font-weight: 600;
  color: var(--color-text-muted);
}

.permission-crud-header-label {
  padding-left: var(--spacing-sm);
}

.permission-crud-header-item {
  text-align: center;
  white-space: nowrap;
}

.permission-module {
  display: grid;
  grid-template-columns: 1fr repeat(4, 70px);
  gap: var(--spacing-xs);
  align-items: center;
  padding: var(--spacing-sm) var(--spacing-xs);
  border-bottom: 1px solid var(--color-border);
  transition: background var(--transition-fast);
}

.permission-module:last-child {
  border-bottom: none;
}

.permission-module:hover {
  background: var(--color-bg-tertiary);
}

.permission-module-header {
  display: flex;
  align-items: center;
  gap: var(--spacing-sm);
  padding-left: var(--spacing-sm);
}

.permission-module-header svg {
  width: 16px;
  height: 16px;
  color: var(--color-text-muted);
  flex-shrink: 0;
}

.permission-module-name {
  font-size: var(--font-size-sm);
  font-weight: 500;
  color: var(--color-text-primary);
}

.permission-crud-grid {
  display: contents;
}

.permission-crud-item {
  display: flex;
  justify-content: center;
  align-items: center;
  cursor: pointer;
  padding: var(--spacing-xs);
  border-radius: var(--radius-sm);
  transition: background var(--transition-fast);
}

.permission-crud-item:hover {
  background: rgba(99, 102, 241, 0.1);
}

.permission-crud-item input[type="checkbox"] {
  width: 18px;
  height: 18px;
  cursor: pointer;
  accent-color: var(--color-primary);
}

.permission-crud-item input[type="checkbox"]:checked + .permission-crud-label {
  opacity: 1;
}

.permission-crud-label {
  display: none;
}

/* Permission info note */
.permission-info-note {
  display: flex;
  align-items: flex-start;
  gap: var(--spacing-sm);
  padding: var(--spacing-sm) var(--spacing-md);
  background: rgba(234, 179, 8, 0.1);
  border: 1px solid rgba(234, 179, 8, 0.3);
  border-radius: var(--radius-md);
  font-size: var(--font-size-xs);
  color: var(--color-text-secondary);
}

.permission-info-note svg {
  width: 16px;
  height: 16px;
  color: rgb(234, 179, 8);
  flex-shrink: 0;
  margin-top: 2px;
}

.permission-info-note strong {
  color: var(--color-text-primary);
}

/* Task completed state */
.task-item.task-completed {
  opacity: 0.7;
  background: var(--color-bg-tertiary);
}

.task-item.task-completed .task-name {
  color: var(--color-text-muted);
}

.task-name-completed {
  text-decoration: line-through;
  color: var(--color-text-muted) !important;
}

/* Task checkbox wrapper */
.task-checkbox-wrapper {
  flex-shrink: 0;
}

.task-checkbox-wrapper input[type="checkbox"] {
  width: 20px;
  height: 20px;
  cursor: pointer;
  accent-color: var(--color-success);
}

/* Small badge variants */
.status-badge-sm,
.priority-badge-sm {
  font-size: 10px;
  padding: 2px 6px;
}

/* Task owner and deadline in meta */
.task-owner,
.task-deadline {
  display: flex;
  align-items: center;
  gap: 4px;
  font-size: var(--font-size-xs);
  color: var(--color-text-muted);
}

.task-deadline::before {
  content: "📅";
  font-size: 10px;
}

.task-owner::before {
  content: "👤";
  font-size: 10px;
}

/* State containers */
.loading-state,
.error-state,
.empty-tasks-state {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: var(--spacing-xl) var(--spacing-lg);
  text-align: center;
  color: var(--color-text-muted);
}

.loading-state {
  gap: var(--spacing-md);
}

.error-state {
  color: var(--color-danger);
  background: rgba(239, 68, 68, 0.1);
  border-radius: var(--radius-md);
}

.empty-tasks-state {
  gap: var(--spacing-sm);
  padding: var(--spacing-xxl);
}

.empty-tasks-state svg {
  opacity: 0.3;
  margin-bottom: var(--spacing-sm);
}

.empty-tasks-state p {
  font-weight: 500;
  color: var(--color-text-secondary);
  margin: 0;
}

/* Tasks list spacing */
.tasks-list {
  display: flex;
  flex-direction: column;
  gap: var(--spacing-sm);
  margin-top: var(--spacing-md);
}

/* ========================================
   PROJECT EDIT PAGE - TWO COLUMN LAYOUT
   ======================================== */

/* Breadcrumb with title */
.page-breadcrumb {
  display: flex;
  align-items: center;
  gap: var(--spacing-md);
  margin-bottom: var(--spacing-lg);
}

.breadcrumb-title {
  display: flex;
  align-items: center;
  gap: var(--spacing-sm);
}

.breadcrumb-number {
  font-size: var(--font-size-sm);
  color: var(--color-text-muted);
  background: var(--color-bg-tertiary);
  padding: var(--spacing-xs) var(--spacing-sm);
  border-radius: var(--radius-sm);
}

.breadcrumb-name {
  font-size: var(--font-size-xl);
  font-weight: 600;
  color: var(--color-text-primary);
  margin: 0;
}

/* Two column layout */
.project-edit-layout {
  display: grid;
  grid-template-columns: 1fr 360px;
  gap: var(--spacing-lg);
  align-items: start;
}

.project-edit-main {
  display: flex;
  flex-direction: column;
  gap: var(--spacing-lg);
}

.project-edit-sidebar {
  display: flex;
  flex-direction: column;
  gap: var(--spacing-md);
  position: sticky;
  top: var(--spacing-lg);
}

/* Sidebar info card */
.card-compact .card-body {
  padding: var(--spacing-md);
}

.sidebar-info-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: var(--spacing-xs) 0;
  border-bottom: 1px solid var(--color-border);
}

.sidebar-info-row:last-child {
  border-bottom: none;
}

.sidebar-info-label {
  font-size: var(--font-size-sm);
  color: var(--color-text-muted);
}

.sidebar-info-value {
  font-size: var(--font-size-sm);
  font-weight: 500;
  color: var(--color-text-primary);
}

/* Sidebar progress */
.sidebar-progress-row {
  padding: var(--spacing-sm) 0;
  border-bottom: 1px solid var(--color-border);
}

.sidebar-progress-row:last-child {
  border-bottom: none;
}

.sidebar-progress-row .sidebar-info-label {
  display: block;
  margin-bottom: var(--spacing-xs);
}

.sidebar-progress {
  display: flex;
  align-items: center;
  gap: var(--spacing-sm);
}

.sidebar-progress-bar {
  flex: 1;
  height: 8px;
  background: var(--color-bg-tertiary);
  border-radius: 4px;
  overflow: hidden;
}

.sidebar-progress-fill {
  height: 100%;
  background: var(--color-accent);
  border-radius: 4px;
  transition: width 0.3s ease;
}

.sidebar-progress-text {
  font-size: var(--font-size-sm);
  font-weight: 600;
  color: var(--color-text-primary);
  min-width: 45px;
  text-align: right;
}

/* Tasks in sidebar */
.card-body-tasks {
  padding: 0 !important;
  max-height: 400px;
  overflow-y: auto;
}

.edit-tasks-list {
  display: flex;
  flex-direction: column;
}

.edit-task-item {
  display: flex;
  align-items: flex-start;
  gap: var(--spacing-sm);
  padding: var(--spacing-sm) var(--spacing-md);
  border-bottom: 1px solid var(--color-border);
  transition: background var(--transition-fast);
}

.edit-task-item.edit-task-clickable {
  cursor: pointer;
}

.edit-task-item:hover {
  background: var(--color-bg-hover);
}

.edit-task-clickable:hover .edit-task-name {
  color: var(--color-accent);
}

.edit-task-item:last-child {
  border-bottom: none;
}

.edit-task-checkbox {
  flex-shrink: 0;
  width: 18px;
  height: 18px;
  margin-top: 2px;
  cursor: pointer;
  accent-color: var(--color-accent);
}

.edit-task-content {
  flex: 1;
  min-width: 0;
}

.edit-task-name {
  font-size: var(--font-size-sm);
  color: var(--color-text-primary);
  line-height: 1.4;
  word-break: break-word;
}

.edit-task-name.completed {
  text-decoration: line-through;
  color: var(--color-text-muted);
}

.edit-task-status-icon {
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-top: 2px;
}

.edit-task-number {
  font-size: var(--font-size-xs);
  color: var(--color-text-muted);
  margin-top: 2px;
}

.edit-task-meta {
  display: flex;
  gap: var(--spacing-sm);
  margin-top: var(--spacing-xs);
}

.edit-task-status {
  font-size: var(--font-size-xs);
  padding: 2px 6px;
  border-radius: var(--radius-sm);
  background: var(--color-bg-tertiary);
  color: var(--color-text-muted);
}

.edit-task-delete {
  opacity: 0;
  transition: opacity var(--transition-fast);
  background: none;
  border: none;
  padding: var(--spacing-xs);
  cursor: pointer;
  color: var(--color-text-muted);
}

.edit-task-item:hover .edit-task-delete {
  opacity: 1;
}

.edit-task-delete:hover {
  color: var(--color-danger);
}

/* Quick add task in edit */
.quick-add-task-edit {
  padding: var(--spacing-sm) var(--spacing-md);
  border-bottom: 1px solid var(--color-border);
  background: var(--color-bg-tertiary);
}

.quick-add-task-edit .form-input {
  margin-bottom: var(--spacing-sm);
  font-size: var(--font-size-sm);
}

.quick-add-actions {
  display: flex;
  justify-content: flex-end;
  gap: var(--spacing-xs);
}

.tasks-empty-small {
  padding: var(--spacing-lg);
  text-align: center;
  color: var(--color-text-muted);
  font-size: var(--font-size-sm);
}

.tasks-empty-small p {
  margin: 0;
}

/* Button sizes */
.btn-xs {
  padding: var(--spacing-xs) var(--spacing-sm);
  font-size: var(--font-size-xs);
}

.btn-add-task {
  color: var(--color-accent);
}

.btn-add-task:hover {
  background: var(--color-accent-light);
}

/* Comments section */
.comment-input-box {
  display: flex;
  gap: var(--spacing-md);
  padding-bottom: var(--spacing-md);
  border-bottom: 1px solid var(--color-border);
  margin-bottom: var(--spacing-md);
}

.comment-avatar {
  flex-shrink: 0;
  width: 36px;
  height: 36px;
  border-radius: 50%;
  background: var(--color-accent);
  color: white;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: var(--font-size-sm);
  font-weight: 600;
}

.comment-input-wrapper {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: var(--spacing-sm);
}

.comment-textarea {
  min-height: 60px;
  resize: none;
}

.comment-input-wrapper .btn {
  align-self: flex-end;
}

/* Comments timeline */
.comments-timeline {
  display: flex;
  flex-direction: column;
}

.comments-empty {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: var(--spacing-xl);
  text-align: center;
  color: var(--color-text-muted);
}

.comments-empty p {
  margin: var(--spacing-sm) 0 0 0;
  font-weight: 500;
  color: var(--color-text-secondary);
}

.comments-empty span {
  font-size: var(--font-size-sm);
}

.comment-item {
  display: flex;
  gap: var(--spacing-md);
  padding: var(--spacing-md) 0;
  border-bottom: 1px solid var(--color-border);
  position: relative;
}

.comment-item:last-child {
  border-bottom: none;
}

/* Timeline line */
.comment-item::before {
  content: '';
  position: absolute;
  left: 18px;
  top: 52px;
  bottom: 0;
  width: 2px;
  background: var(--color-border);
}

.comment-item:last-child::before {
  display: none;
}

.comment-item .comment-avatar {
  z-index: 1;
}

.comment-body {
  flex: 1;
  min-width: 0;
}

.comment-header {
  display: flex;
  align-items: center;
  gap: var(--spacing-sm);
  margin-bottom: var(--spacing-xs);
}

.comment-author {
  font-weight: 600;
  font-size: var(--font-size-sm);
  color: var(--color-text-primary);
}

.comment-time {
  font-size: var(--font-size-xs);
  color: var(--color-text-muted);
}

.comment-text {
  font-size: var(--font-size-sm);
  color: var(--color-text-secondary);
  line-height: 1.5;
  white-space: pre-wrap;
  word-break: break-word;
}

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

.comment-action-btn {
  background: none;
  border: none;
  padding: var(--spacing-xs);
  font-size: var(--font-size-xs);
  color: var(--color-text-muted);
  cursor: pointer;
  display: flex;
  align-items: center;
  gap: var(--spacing-xs);
  transition: color var(--transition-fast);
}

.comment-action-btn:hover {
  color: var(--color-text-primary);
}

.comment-action-btn.delete:hover {
  color: var(--color-danger);
}

/* Badge styles */
.badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 20px;
  height: 20px;
  padding: 0 6px;
  border-radius: 10px;
  font-size: var(--font-size-xs);
  font-weight: 600;
}

.badge-muted {
  background: var(--color-bg-tertiary);
  color: var(--color-text-muted);
}

/* ========================================
   TASKS PAGE STYLES
   ======================================== */

/* Task number in table */
.task-number {
  display: inline-block;
  font-family: var(--font-mono, 'Monaco', 'Consolas', monospace);
  font-size: var(--font-size-xs);
  font-weight: 600;
  color: var(--color-primary);
  background: rgba(99, 102, 241, 0.1);
  padding: 4px 8px;
  border-radius: var(--radius-sm);
  white-space: nowrap;
}

/* Task name cell */
.task-name-cell {
  display: flex;
  align-items: center;
  gap: var(--spacing-sm);
}

.task-name {
  font-weight: 500;
  color: var(--color-text-primary);
}

.task-has-notes {
  font-size: 12px;
  opacity: 0.7;
  cursor: help;
}

/* Project link in tasks table */
.project-link {
  color: var(--color-primary);
  cursor: pointer;
  font-size: var(--font-size-sm);
  transition: color var(--transition-fast);
  text-decoration: none;
}

.project-link:hover {
  color: var(--color-primary-hover);
  text-decoration: underline;
}

/* Task Status Badges */
.status-badge {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 4px 10px;
  border-radius: 12px;
  font-size: var(--font-size-xs);
  font-weight: 600;
  white-space: nowrap;
}

.status-todo {
  background: rgba(107, 114, 128, 0.15);
  color: #9ca3af;
}

.status-progress {
  background: rgba(59, 130, 246, 0.15);
  color: #60a5fa;
}

.status-done {
  background: rgba(16, 185, 129, 0.15);
  color: #34d399;
}

.status-blocked {
  background: rgba(239, 68, 68, 0.15);
  color: #f87171;
}

.status-default {
  background: rgba(107, 114, 128, 0.1);
  color: var(--color-text-muted);
}

/* Task Priority Badges */
.priority-badge {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 4px 10px;
  border-radius: 12px;
  font-size: var(--font-size-xs);
  font-weight: 600;
  white-space: nowrap;
}

.priority-low {
  background: rgba(107, 114, 128, 0.15);
  color: #9ca3af;
}

.priority-medium {
  background: rgba(59, 130, 246, 0.15);
  color: #60a5fa;
}

.priority-high {
  background: rgba(245, 158, 11, 0.15);
  color: #fbbf24;
}

.priority-critical {
  background: rgba(239, 68, 68, 0.15);
  color: #f87171;
}

.priority-default {
  background: rgba(107, 114, 128, 0.1);
  color: var(--color-text-muted);
}

/* Action buttons in table */
.action-buttons {
  display: flex;
  align-items: center;
  gap: var(--spacing-xs);
  justify-content: flex-end;
}

.btn-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  padding: 0;
  border-radius: var(--radius-sm);
  transition: all var(--transition-fast);
}

.btn-icon svg {
  width: 16px;
  height: 16px;
}

.btn-ghost {
  background: transparent;
  border: 1px solid transparent;
  color: var(--color-text-muted);
}

.btn-ghost:hover {
  background: var(--color-bg-tertiary);
  color: var(--color-text-primary);
}

.btn-ghost.btn-danger:hover {
  background: rgba(239, 68, 68, 0.1);
  color: var(--color-danger);
}

/* Task Edit Form */
#page-task-edit .page-breadcrumb {
  margin-bottom: var(--spacing-lg);
}

.btn-back {
  display: inline-flex;
  align-items: center;
  gap: var(--spacing-sm);
  color: var(--color-text-secondary);
  font-weight: 500;
}

.btn-back:hover {
  color: var(--color-text-primary);
}

/* Task Comments */
#task-comments-list {
  max-height: 400px;
  overflow-y: auto;
}

#task-comments-list .comment-item {
  display: block;
  padding: var(--spacing-md);
  border-radius: var(--radius-md);
  background: var(--color-bg-tertiary);
  margin-bottom: var(--spacing-sm);
  border: none;
}

#task-comments-list .comment-item::before {
  display: none;
}

#task-comments-list .comment-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: var(--spacing-xs);
  font-size: var(--font-size-sm);
}

#task-comments-list .comment-author {
  font-weight: 600;
  color: var(--color-primary);
}

#task-comments-list .comment-date {
  color: var(--color-text-muted);
  font-size: var(--font-size-xs);
}

#task-comments-list .comment-content {
  color: var(--color-text-secondary);
  line-height: 1.5;
}

.comment-add-form {
  border-top: 1px solid var(--color-border);
  padding-top: var(--spacing-md);
}

/* Numbering preview in System settings */
.numbering-preview {
  font-family: var(--font-mono, 'Monaco', 'Consolas', monospace);
  font-weight: 600;
  color: var(--color-primary);
  background: rgba(99, 102, 241, 0.1);
  padding: 4px 10px;
  border-radius: var(--radius-sm);
}

/* Integration status indicators */
.status-indicator {
  font-size: var(--font-size-sm);
  font-weight: 500;
}

/* Badge variants for integrations */
.badge-info {
  background: rgba(59, 130, 246, 0.15);
  color: #60a5fa;
}

.badge-primary {
  background: rgba(99, 102, 241, 0.15);
  color: #818cf8;
}

.badge-secondary {
  background: rgba(107, 114, 128, 0.15);
  color: #9ca3af;
}

.badge-success {
  background: rgba(16, 185, 129, 0.15);
  color: #34d399;
}

.badge-warning {
  background: rgba(245, 158, 11, 0.15);
  color: #fbbf24;
}

.badge-danger {
  background: rgba(239, 68, 68, 0.15);
  color: #f87171;
}

/* Feedback Log specific styles */
.order-code {
  font-family: var(--font-mono);
  font-size: var(--font-size-xs);
  background: var(--color-bg-tertiary);
  padding: 2px 6px;
  border-radius: var(--radius-sm);
}

.comment-cell {
  max-width: 250px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.feedback-comment-box {
  background: var(--color-bg-tertiary);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  padding: var(--spacing-md);
  margin-bottom: var(--spacing-sm);
}

.feedback-meta {
  font-size: var(--font-size-sm);
  color: var(--color-text-secondary);
}

.order-info-box {
  background: var(--color-bg-tertiary);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  padding: var(--spacing-md);
}

.order-items-list {
  margin: var(--spacing-sm) 0;
  padding-left: var(--spacing-lg);
}

.order-items-list li {
  margin-bottom: var(--spacing-xs);
}

.feedback-review-info {
  display: flex;
  align-items: center;
  gap: var(--spacing-sm);
  font-size: var(--font-size-sm);
  color: var(--color-text-secondary);
  margin-top: var(--spacing-md);
  padding-top: var(--spacing-md);
  border-top: 1px solid var(--color-border);
}

.feedback-detail-header {
  display: flex;
  gap: var(--spacing-sm);
  margin-bottom: var(--spacing-md);
}

/* Responsive */
@media (max-width: 1024px) {
  .project-edit-layout {
    grid-template-columns: 1fr;
  }

  .project-edit-sidebar {
    position: static;
  }
}

@media (max-width: 768px) {
  #tasks-table th:nth-child(3),
  #tasks-table td:nth-child(3),
  #tasks-table th:nth-child(6),
  #tasks-table td:nth-child(6),
  #tasks-table th:nth-child(8),
  #tasks-table td:nth-child(8) {
    display: none;
  }

  .action-buttons {
    gap: 2px;
  }

  .btn-icon {
    width: 28px;
    height: 28px;
  }
}

/* ========================================
   LOGIN PAGE STYLES
   ======================================== */

.login-screen {
  min-height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  background: linear-gradient(135deg, var(--color-bg-primary) 0%, #151717 100%);
  padding: var(--spacing-lg);
}

.login-container {
  width: 100%;
  max-width: 400px;
  background: var(--color-bg-secondary);
  border-radius: 16px;
  border: 1px solid var(--color-border);
  padding: var(--spacing-xl);
  box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.5);
}

.login-logo {
  text-align: center;
  margin-bottom: var(--spacing-xl);
}

.login-logo svg {
  width: 56px;
  height: 56px;
  fill: var(--color-accent);
  margin-bottom: var(--spacing-md);
}

.login-logo h1 {
  font-size: var(--font-size-2xl);
  font-weight: 700;
  color: var(--color-text-primary);
  margin: 0 0 var(--spacing-xs) 0;
}

.login-logo p {
  font-size: var(--font-size-sm);
  color: var(--color-text-muted);
  margin: 0;
}

.login-form {
  display: flex;
  flex-direction: column;
  gap: var(--spacing-lg);
}

.login-form-group {
  display: flex;
  flex-direction: column;
  gap: var(--spacing-xs);
}

.login-form-group label {
  font-size: var(--font-size-sm);
  font-weight: 500;
  color: var(--color-text-secondary);
}

.login-form-group input {
  width: 100%;
  padding: 12px 16px;
  background: var(--color-bg-tertiary);
  border: 1px solid var(--color-border);
  border-radius: 8px;
  color: var(--color-text-primary);
  font-size: var(--font-size-base);
  font-family: var(--font-family);
  transition: all 0.2s ease;
}

.login-form-group input:focus {
  outline: none;
  border-color: var(--color-accent);
  box-shadow: 0 0 0 3px var(--color-accent-light);
}

.login-form-group input::placeholder {
  color: var(--color-text-muted);
}

.password-input-wrapper {
  position: relative;
}

.password-input-wrapper input {
  padding-right: 48px;
}

.password-toggle {
  position: absolute;
  right: 12px;
  top: 50%;
  transform: translateY(-50%);
  background: none;
  border: none;
  padding: 4px;
  cursor: pointer;
  color: var(--color-text-muted);
  display: flex;
  align-items: center;
  justify-content: center;
  transition: color 0.2s ease;
}

.password-toggle:hover {
  color: var(--color-text-secondary);
}

.password-toggle svg {
  width: 20px;
  height: 20px;
}

.login-btn {
  width: 100%;
  padding: 14px 24px;
  font-size: var(--font-size-base);
  font-weight: 600;
  border-radius: 8px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--spacing-sm);
  margin-top: var(--spacing-sm);
}

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

.login-btn .spinner {
  width: 18px;
  height: 18px;
  animation: spin 1s linear infinite;
}

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

.login-error {
  padding: 12px 16px;
  background: var(--color-danger-light);
  border: 1px solid rgba(239, 68, 68, 0.3);
  border-radius: 8px;
  color: #f87171;
  font-size: var(--font-size-sm);
  text-align: center;
}

.login-footer {
  margin-top: var(--spacing-xl);
  text-align: center;
}

.login-footer p {
  font-size: var(--font-size-xs);
  color: var(--color-text-muted);
  margin: 0;
}

/* Set Password Form */
.login-welcome {
  text-align: center;
  margin-bottom: var(--spacing-lg);
}

.login-welcome h2 {
  font-size: var(--font-size-xl);
  font-weight: 600;
  color: var(--color-text-primary);
  margin: 0 0 var(--spacing-xs) 0;
}

.login-welcome p {
  font-size: var(--font-size-sm);
  color: var(--color-text-secondary);
  margin: 0;
}

.password-requirements {
  background: var(--color-bg-tertiary);
  border-radius: 8px;
  padding: var(--spacing-md);
}

.password-requirements p {
  font-size: var(--font-size-sm);
  color: var(--color-text-secondary);
  margin: 0 0 var(--spacing-sm) 0;
}

.password-requirements ul {
  list-style: none;
  padding: 0;
  margin: 0;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--spacing-xs);
}

.password-requirements .requirement {
  font-size: var(--font-size-xs);
  color: var(--color-text-muted);
  display: flex;
  align-items: center;
  gap: var(--spacing-xs);
}

.password-requirements .requirement::before {
  content: '○';
  font-size: 10px;
}

.password-requirements .requirement.valid {
  color: var(--color-success);
}

.password-requirements .requirement.valid::before {
  content: '✓';
}

/* Responsive */
@media (max-width: 480px) {
  .login-container {
    padding: var(--spacing-lg);
  }

  .login-logo svg {
    width: 48px;
    height: 48px;
  }

  .login-logo h1 {
    font-size: var(--font-size-xl);
  }

  .password-requirements ul {
    grid-template-columns: 1fr;
  }
}

/* ========================================
   PERMISSION INVITE SECTION
   ======================================== */

.permission-invite-section {
  margin-top: var(--spacing-md);
  padding-top: var(--spacing-md);
  border-top: 1px solid var(--color-border);
  display: flex;
  flex-direction: column;
  gap: var(--spacing-sm);
}

.permission-invite-status {
  display: flex;
  align-items: center;
  gap: var(--spacing-sm);
  font-size: var(--font-size-sm);
  padding: var(--spacing-sm) var(--spacing-md);
  border-radius: 6px;
}

.permission-invite-status.status-active {
  background: var(--color-success-light);
  color: var(--color-success);
}

.permission-invite-status.status-pending {
  background: var(--color-warning-light);
  color: var(--color-warning);
}

.permission-invite-status.status-none {
  background: var(--color-bg-tertiary);
  color: var(--color-text-secondary);
}

.permission-invite-status .status-icon {
  font-size: var(--font-size-base);
}

.permission-invite-section .btn {
  align-self: flex-start;
}

.permission-invite-section .btn svg {
  flex-shrink: 0;
}

/* ========================================
   DISABLED NAV ITEMS
   ======================================== */

.nav-item.disabled,
.nav-submenu-item.disabled {
  opacity: 0.5;
  cursor: not-allowed;
  pointer-events: none;
}

.nav-item.disabled:hover,
.nav-submenu-item.disabled:hover {
  background: transparent;
}

/* ========================================
   KANBAN BOARD (shared)
   ======================================== */

.kanban-board {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: var(--spacing-md);
  min-height: 400px;
}

@media (max-width: 1200px) {
  .kanban-board {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (max-width: 768px) {
  .kanban-board {
    grid-template-columns: 1fr;
  }
}

.kanban-column {
  background: var(--color-bg-tertiary);
  border: 1px solid var(--color-border);
  border-radius: var(--border-radius);
  display: flex;
  flex-direction: column;
  min-height: 300px;
}

.kanban-column-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: var(--spacing-sm) var(--spacing-md);
  border-bottom: 1px solid var(--color-border);
}

.kanban-column-title {
  font-weight: 600;
  font-size: var(--font-size-sm);
  color: var(--color-text-primary);
}

.kanban-column-items {
  flex: 1;
  padding: var(--spacing-sm);
  overflow-y: auto;
  display: flex;
  flex-direction: column;
  gap: var(--spacing-sm);
}

/* Kanban card */
.kanban-card {
  background: var(--color-bg-primary);
  border: 1px solid var(--color-border);
  border-radius: var(--border-radius);
  padding: var(--spacing-sm);
  cursor: pointer;
  transition: all var(--transition-fast);
}

.kanban-card:hover {
  border-color: var(--color-primary);
  box-shadow: var(--shadow-sm);
}

.kanban-card-header {
  display: flex;
  align-items: center;
  gap: var(--spacing-sm);
  margin-bottom: var(--spacing-xs);
}

.kanban-card-id {
  font-family: monospace;
  font-size: var(--font-size-xs);
  font-weight: 600;
  color: var(--color-text-muted);
  background: var(--color-bg-tertiary);
  padding: 2px 6px;
  border-radius: var(--radius-sm);
  flex-shrink: 0;
}

.kanban-card-badges {
  display: flex;
  gap: var(--spacing-xs);
  flex-wrap: wrap;
}

.kanban-card-title {
  font-size: var(--font-size-sm);
  font-weight: 500;
  color: var(--color-text-primary);
  line-height: 1.4;
  margin-bottom: var(--spacing-xs);
}

.kanban-card-meta {
  display: flex;
  align-items: center;
  gap: var(--spacing-xs);
  font-size: var(--font-size-xs);
  color: var(--color-text-secondary);
  margin-bottom: var(--spacing-xs);
}

.kanban-card-footer {
  display: flex;
  gap: var(--spacing-sm);
  flex-wrap: wrap;
  font-size: var(--font-size-xs);
  margin-top: var(--spacing-xs);
  padding-top: var(--spacing-xs);
  border-top: 1px solid var(--color-border-light);
}

/* ========================================
   BACKLOG PAGE (specific)
   ======================================== */

/* View toggle button active state */
.backlog-view-btn.active {
  background: var(--color-primary);
  color: white;
}

/* Detail modal */
.backlog-detail {
  padding: var(--spacing-sm);
}

.backlog-detail-header {
  margin-bottom: var(--spacing-lg);
}

.backlog-detail-header h3 {
  margin: 0 0 var(--spacing-sm) 0;
  font-size: var(--font-size-lg);
}

.backlog-detail-badges {
  display: flex;
  gap: var(--spacing-xs);
  flex-wrap: wrap;
}

.backlog-detail-section {
  margin-bottom: var(--spacing-md);
}

.backlog-detail-section label {
  display: block;
  font-size: var(--font-size-xs);
  color: var(--color-text-secondary);
  text-transform: uppercase;
  letter-spacing: 0.5px;
  margin-bottom: var(--spacing-xs);
}

.backlog-detail-section p {
  margin: 0;
  color: var(--color-text-primary);
}

.backlog-detail-meta {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: var(--spacing-sm);
  margin-top: var(--spacing-lg);
  padding-top: var(--spacing-lg);
  border-top: 1px solid var(--color-border);
  font-size: var(--font-size-sm);
  color: var(--color-text-secondary);
}

.backlog-detail-link {
  display: inline-flex;
  align-items: center;
  gap: var(--spacing-xs);
  margin-top: var(--spacing-lg);
  color: var(--color-primary);
  text-decoration: none;
  font-size: var(--font-size-sm);
}

.backlog-detail-link:hover {
  text-decoration: underline;
}

.backlog-detail-link svg {
  width: 14px;
  height: 14px;
}

/* Backlog Kanban Drag & Drop */
.kanban-card.dragging {
  opacity: 0.5;
  transform: rotate(2deg);
  box-shadow: var(--shadow-lg);
}

.kanban-column-items.drag-over {
  background: var(--color-accent-light);
  border: 2px dashed var(--color-accent);
  border-radius: var(--border-radius);
}

.kanban-empty-placeholder {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 80px;
  border: 2px dashed var(--color-border);
  border-radius: var(--border-radius);
  color: var(--color-text-muted);
  font-size: var(--font-size-sm);
}

/* Backlog Rejection Reason on Card */
.kanban-card-rejection {
  margin-top: var(--spacing-xs);
  padding: var(--spacing-xs);
  background: rgba(220, 53, 69, 0.1);
  border-radius: var(--border-radius);
  font-size: var(--font-size-xs);
  color: var(--color-danger);
  border-left: 2px solid var(--color-danger);
}

.kanban-card-rejection strong {
  display: block;
  margin-bottom: 2px;
  font-weight: 600;
}

/* Backlog Approve/Reject Modal Info */
.backlog-approve-info,
.backlog-reject-info {
  display: flex;
  align-items: flex-start;
  gap: var(--spacing-md);
  background: var(--color-bg-secondary);
  padding: var(--spacing-md);
  border-radius: var(--border-radius);
  margin-bottom: var(--spacing-lg);
}

.backlog-approve-info svg,
.backlog-reject-info svg {
  flex-shrink: 0;
  color: var(--color-success);
}

.backlog-reject-info svg {
  color: var(--color-danger);
}

.backlog-approve-info strong,
.backlog-reject-info strong {
  display: block;
  margin-bottom: var(--spacing-xs);
  font-size: var(--font-size-md);
  color: var(--color-text-primary);
}

.backlog-approve-info p,
.backlog-reject-info p {
  margin: 0;
  font-size: var(--font-size-sm);
  color: var(--color-text-secondary);
}

/* Radio Group */
.radio-group {
  display: flex;
  flex-direction: column;
  gap: var(--spacing-sm);
}

.radio-item {
  display: flex;
  align-items: flex-start;
  gap: var(--spacing-sm);
  padding: var(--spacing-sm) var(--spacing-md);
  background: var(--color-bg-tertiary);
  border: 1px solid var(--color-border);
  border-radius: var(--border-radius);
  cursor: pointer;
  transition: all var(--transition-fast);
}

.radio-item:hover {
  border-color: var(--color-primary);
  background: var(--color-bg-secondary);
}

.radio-item input[type="radio"] {
  margin-top: 3px;
  accent-color: var(--color-primary);
}

.radio-item .radio-content {
  flex: 1;
}

.radio-item .radio-label {
  display: block;
  font-weight: 500;
  color: var(--color-text-primary);
  margin-bottom: 2px;
}

.radio-item .radio-description {
  font-size: var(--font-size-xs);
  color: var(--color-text-secondary);
}

/* Simple span in radio-item (without nested structure) */
.radio-item > span {
  flex: 1;
  font-weight: 500;
  color: var(--color-text-primary);
}

/* Backlog Info Panel in Detail View */
.backlog-info-panel {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: var(--spacing-sm);
  margin-bottom: var(--spacing-lg);
}

.backlog-info-item {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.backlog-info-item label {
  font-size: var(--font-size-xs);
  color: var(--color-text-secondary);
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

/* Backlog 5-column grid for Kanban with Rejected */
.kanban-board.backlog-kanban {
  grid-template-columns: repeat(5, 1fr);
}

@media (max-width: 1400px) {
  .kanban-board.backlog-kanban {
    grid-template-columns: repeat(3, 1fr);
  }
}

@media (max-width: 1000px) {
  .kanban-board.backlog-kanban {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (max-width: 768px) {
  .kanban-board.backlog-kanban {
    grid-template-columns: 1fr;
  }
}

/* Rejected column styling */
.kanban-column.rejected {
  background: rgba(220, 53, 69, 0.05);
}

.kanban-column.rejected .kanban-column-header {
  background: rgba(220, 53, 69, 0.1);
}

/* ========================================
   HR MODULE STYLES
   ======================================== */

.hr-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  gap: var(--spacing-md);
  margin-bottom: var(--spacing-lg);
}

.hr-tab-content {
  display: none;
}

.hr-tab-content.active {
  display: block;
}

.hr-today-section {
  margin-bottom: var(--spacing-md);
}

.hr-today-section h4 {
  margin: 0 0 var(--spacing-sm) 0;
  font-size: var(--font-size-sm);
  color: var(--color-text-secondary);
}

.employee-chips {
  display: flex;
  flex-wrap: wrap;
  gap: var(--spacing-xs);
}

.employee-chip {
  display: inline-block;
  padding: 4px 12px;
  background: var(--color-bg-secondary);
  border-radius: 16px;
  font-size: var(--font-size-sm);
}

.absence-item, .pending-item, .upcoming-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: var(--spacing-sm);
  border-bottom: 1px solid var(--color-border);
  gap: var(--spacing-sm);
}

.absence-item:last-child, .pending-item:last-child, .upcoming-item:last-child {
  border-bottom: none;
}

.absence-badge {
  display: inline-block;
  padding: 2px 8px;
  border-radius: 4px;
  font-size: var(--font-size-xs);
  font-weight: 500;
}

.absence-badge.vacation {
  background: #e3f2fd;
  color: #1976d2;
}

.absence-badge.sick {
  background: #ffebee;
  color: #c62828;
}

.absence-badge.other {
  background: #f5f5f5;
  color: #616161;
}

.status-badge {
  display: inline-block;
  padding: 2px 8px;
  border-radius: 4px;
  font-size: var(--font-size-xs);
  font-weight: 500;
}

.status-badge.pending {
  background: #fff3e0;
  color: #ef6c00;
}

.status-badge.approved {
  background: #e8f5e9;
  color: #2e7d32;
}

.status-badge.rejected {
  background: #ffebee;
  color: #c62828;
}

.contract-badge {
  display: inline-block;
  padding: 2px 8px;
  border-radius: 4px;
  font-size: var(--font-size-xs);
  background: var(--color-bg-secondary);
}

.contract-badge.uop {
  background: #e8f5e9;
  color: #2e7d32;
}

.contract-badge.b2b {
  background: #e3f2fd;
  color: #1976d2;
}

.vacation-cell {
  display: flex;
  align-items: baseline;
  gap: var(--spacing-xs);
}

.vacation-remaining {
  font-size: var(--font-size-lg);
  font-weight: 600;
  color: var(--color-primary);
}

.pending-info {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.pending-actions {
  display: flex;
  gap: var(--spacing-xs);
}

/* HR Calendar */
.hr-calendar {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  gap: 1px;
  background: var(--color-border);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  overflow: hidden;
}

.hr-calendar-header {
  display: contents;
}

.hr-calendar-day-name {
  padding: var(--spacing-sm);
  text-align: center;
  font-weight: 600;
  font-size: var(--font-size-xs);
  background: var(--color-bg-secondary);
  color: var(--color-text-secondary);
}

.hr-calendar-cell {
  min-height: 80px;
  padding: var(--spacing-xs);
  background: var(--color-bg-primary);
  position: relative;
}

.hr-calendar-cell.weekend {
  background: var(--color-bg-secondary);
}

.hr-calendar-cell.today {
  background: #e3f2fd;
}

.hr-calendar-cell.empty {
  background: var(--color-bg-tertiary);
}

.hr-calendar-cell .day-number {
  font-size: var(--font-size-sm);
  font-weight: 500;
  color: var(--color-text-secondary);
}

.hr-calendar-cell.today .day-number {
  color: var(--color-primary);
  font-weight: 700;
}

.day-absences {
  margin-top: 4px;
}

.absence-bar {
  padding: 2px 4px;
  margin-bottom: 2px;
  border-radius: 2px;
  font-size: 10px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.absence-bar.vacation {
  background: #bbdefb;
  color: #1565c0;
}

.absence-bar.sick {
  background: #ffcdd2;
  color: #b71c1c;
}

.absence-bar.other {
  background: #e0e0e0;
  color: #424242;
}

.employee-details {
  display: flex;
  flex-direction: column;
  gap: var(--spacing-sm);
}

.detail-row {
  display: flex;
  align-items: center;
  gap: var(--spacing-md);
}

.detail-row label {
  width: 140px;
  font-size: var(--font-size-sm);
  color: var(--color-text-secondary);
}

.detail-row span, .detail-row input, .detail-row select {
  flex: 1;
}

.absence-history {
  max-height: 200px;
  overflow-y: auto;
}

.history-item {
  display: flex;
  align-items: center;
  gap: var(--spacing-sm);
  padding: var(--spacing-xs) 0;
  border-bottom: 1px solid var(--color-border);
  font-size: var(--font-size-sm);
}

.vacation-info {
  padding: var(--spacing-md);
  background: var(--color-bg-secondary);
  border-radius: var(--radius-md);
  margin-top: var(--spacing-md);
}

.vacation-info p {
  margin: var(--spacing-xs) 0;
}

/* ========================================
   ANOMALIES MODULE STYLES
   ======================================== */

/* Severity badges */
.severity-badge {
  display: inline-block;
  padding: 4px 10px;
  border-radius: 12px;
  font-size: var(--font-size-xs);
  font-weight: 600;
  text-transform: uppercase;
}

.severity-badge.critical {
  background: var(--color-danger-light);
  color: var(--color-danger);
}

.severity-badge.warning {
  background: var(--color-warning-light);
  color: var(--color-warning);
}

.severity-badge.info {
  background: var(--color-info-light);
  color: var(--color-info);
}

/* Category badges */
.category-badge {
  display: inline-block;
  padding: 4px 10px;
  border-radius: 12px;
  font-size: var(--font-size-xs);
  font-weight: 500;
  background: var(--color-bg-tertiary);
  color: var(--color-text-secondary);
}

.category-badge.stock { background: #3b82f615; color: #3b82f6; }
.category-badge.margin { background: #f59e0b15; color: #f59e0b; }
.category-badge.sales { background: #8b5cf615; color: #8b5cf6; }
.category-badge.data { background: #06b6d415; color: #06b6d4; }
.category-badge.other { background: #6b707015; color: #6b7070; }

/* Stat cards for anomalies */
.stat-card {
  background: var(--color-bg-secondary);
  border-radius: var(--radius-lg);
  padding: var(--spacing-lg);
  text-align: center;
  border: 1px solid var(--color-border);
}

.stat-card .stat-value {
  display: block;
  font-size: var(--font-size-2xl);
  font-weight: 700;
  color: var(--color-text-primary);
}

.stat-card .stat-label {
  display: block;
  font-size: var(--font-size-sm);
  color: var(--color-text-secondary);
  margin-top: var(--spacing-xs);
}

.stat-card.stat-critical {
  border-color: var(--color-danger);
  background: var(--color-danger-light);
}

.stat-card.stat-critical .stat-value {
  color: var(--color-danger);
}

.stat-card.stat-warning {
  border-color: var(--color-warning);
  background: var(--color-warning-light);
}

.stat-card.stat-warning .stat-value {
  color: var(--color-warning);
}

/* Category stats */
.category-stat {
  display: flex;
  align-items: center;
  gap: var(--spacing-sm);
  padding: var(--spacing-sm) var(--spacing-md);
  background: var(--color-bg-tertiary);
  border-radius: var(--radius-md);
}

.category-stat .category-icon {
  font-size: 20px;
}

.category-stat .category-label {
  color: var(--color-text-secondary);
  font-size: var(--font-size-sm);
}

.category-stat .category-value {
  font-weight: 700;
  color: var(--color-text-primary);
  margin-left: auto;
}

/* Table row severity highlight */
.data-table tr.severity-critical td:first-child {
  border-left: 3px solid var(--color-danger);
}

.data-table tr.severity-warning td:first-child {
  border-left: 3px solid var(--color-warning);
}

.data-table tr.severity-info td:first-child {
  border-left: 3px solid var(--color-info);
}

/* Action buttons */
.action-buttons {
  display: flex;
  gap: var(--spacing-xs);
}

/* Top products list */
.top-product-item {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: var(--spacing-sm) 0;
  border-bottom: 1px solid var(--color-border);
}

.top-product-item:last-child {
  border-bottom: none;
}

.top-product-item .product-name {
  color: var(--color-text-primary);
}

.top-product-item .product-count {
  color: var(--color-text-muted);
  font-size: var(--font-size-sm);
}

/* Rules list */
.rules-category {
  margin-bottom: var(--spacing-xl);
}

.rules-category-title {
  font-size: var(--font-size-lg);
  color: var(--color-text-primary);
  margin-bottom: var(--spacing-md);
  padding-bottom: var(--spacing-sm);
  border-bottom: 1px solid var(--color-border);
}

.rule-item {
  display: flex;
  align-items: center;
  gap: var(--spacing-md);
  padding: var(--spacing-md);
  background: var(--color-bg-tertiary);
  border-radius: var(--radius-md);
  margin-bottom: var(--spacing-sm);
}

.rule-item.disabled {
  opacity: 0.5;
}

.rule-info {
  flex: 1;
  display: flex;
  align-items: center;
  gap: var(--spacing-sm);
}

.rule-name {
  font-weight: 500;
  color: var(--color-text-primary);
}

.rule-severity {
  font-size: var(--font-size-xs);
  padding: 2px 8px;
  border-radius: 10px;
}

.rule-severity.severity-critical { background: var(--color-danger-light); color: var(--color-danger); }
.rule-severity.severity-warning { background: var(--color-warning-light); color: var(--color-warning); }
.rule-severity.severity-info { background: var(--color-info-light); color: var(--color-info); }

.rule-params {
  flex: 1;
  display: flex;
  gap: var(--spacing-xs);
  flex-wrap: wrap;
}

.param-tag {
  font-size: var(--font-size-xs);
  padding: 2px 8px;
  background: var(--color-bg-secondary);
  border-radius: 10px;
  color: var(--color-text-muted);
}

.rule-actions {
  display: flex;
  align-items: center;
  gap: var(--spacing-sm);
}

/* Toggle switch */
.toggle-switch {
  position: relative;
  display: inline-block;
  width: 44px;
  height: 24px;
}

.toggle-switch input {
  opacity: 0;
  width: 0;
  height: 0;
}

.toggle-slider {
  position: absolute;
  cursor: pointer;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: var(--color-bg-secondary);
  border: 1px solid var(--color-border);
  border-radius: 24px;
  transition: 0.3s;
}

.toggle-slider:before {
  position: absolute;
  content: "";
  height: 18px;
  width: 18px;
  left: 2px;
  bottom: 2px;
  background-color: var(--color-text-muted);
  border-radius: 50%;
  transition: 0.3s;
}

.toggle-switch input:checked + .toggle-slider {
  background-color: var(--color-accent);
  border-color: var(--color-accent);
}

.toggle-switch input:checked + .toggle-slider:before {
  transform: translateX(20px);
  background-color: white;
}

/* Tab content visibility */
.anomalies-tab-content {
  display: none;
}

.anomalies-tab-content.active {
  display: block;
}

/* Empty state for anomalies */
.empty-state-content {
  text-align: center;
  padding: var(--spacing-xl);
}

.empty-state-content .empty-icon {
  font-size: 48px;
  display: block;
  margin-bottom: var(--spacing-md);
}

.empty-state-content p {
  color: var(--color-text-secondary);
  margin-bottom: var(--spacing-md);
}

/* ============================================
   SETTINGS PAGE - API CONFIGURATION
   ============================================ */

.settings-container {
  display: flex;
  flex-direction: column;
  gap: var(--spacing-xl);
}

.settings-card {
  background: var(--color-background);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  overflow: hidden;
}

.settings-card-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: var(--spacing-lg);
  border-bottom: 1px solid var(--color-border);
  background: var(--color-bg-secondary);
}

.settings-card-title {
  margin: 0 0 var(--spacing-xs) 0;
  font-size: var(--font-size-lg);
  font-weight: 600;
  color: var(--color-text-primary);
}

.settings-card-subtitle {
  margin: 0;
  font-size: var(--font-size-sm);
  color: var(--color-text-muted);
}

.settings-card-body {
  padding: var(--spacing-lg);
}

.settings-toggle {
  display: flex;
  align-items: center;
  gap: var(--spacing-md);
}

.settings-toggle-label {
  font-size: var(--font-size-sm);
  font-weight: 500;
  color: var(--color-text-secondary);
}

.settings-toggle input[type="checkbox"] {
  position: absolute;
  opacity: 0;
  width: 0;
  height: 0;
}

.settings-toggle-slider {
  position: relative;
  display: inline-block;
  width: 44px;
  height: 24px;
  background-color: var(--color-border);
  border-radius: 24px;
  transition: background-color 0.3s;
  cursor: pointer;
}

.settings-toggle-slider:before {
  content: "";
  position: absolute;
  height: 18px;
  width: 18px;
  left: 3px;
  top: 3px;
  background-color: white;
  border-radius: 50%;
  transition: transform 0.3s;
}

.settings-toggle input[type="checkbox"]:checked + .settings-toggle-slider {
  background-color: var(--color-accent);
}

.settings-toggle input[type="checkbox"]:checked + .settings-toggle-slider:before {
  transform: translateX(20px);
}

.settings-toggle input[type="checkbox"]:focus + .settings-toggle-slider {
  box-shadow: 0 0 0 2px var(--color-accent-light);
}

.form-hint {
  margin-top: var(--spacing-xs);
  font-size: var(--font-size-xs);
  color: var(--color-text-muted);
}

.settings-actions {
  display: flex;
  justify-content: flex-end;
  gap: var(--spacing-md);
  margin-top: var(--spacing-xl);
  padding-top: var(--spacing-lg);
  border-top: 1px solid var(--color-border);
}

.settings-test-result {
  margin-top: var(--spacing-lg);
  padding: var(--spacing-md);
  border-radius: var(--radius-md);
  animation: slideDown 0.3s ease;
}

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

.test-result-success {
  display: flex;
  align-items: flex-start;
  gap: var(--spacing-md);
  background: var(--color-success-bg, #d4edda);
  border: 1px solid var(--color-success, #28a745);
  color: var(--color-success-text, #155724);
}

.test-result-error {
  display: flex;
  align-items: flex-start;
  gap: var(--spacing-md);
  background: var(--color-danger-bg, #f8d7da);
  border: 1px solid var(--color-danger);
  color: var(--color-danger-text, #721c24);
}

.test-result-icon {
  font-size: var(--font-size-xl);
  font-weight: bold;
  flex-shrink: 0;
}

.test-result-message {
  font-weight: 500;
  margin-bottom: var(--spacing-xs);
}

.test-details {
  margin-top: var(--spacing-sm);
  padding-top: var(--spacing-sm);
  border-top: 1px solid currentColor;
  opacity: 0.8;
  font-size: var(--font-size-sm);
}

.test-details div {
  margin-bottom: var(--spacing-xs);
}

.test-details strong {
  font-weight: 600;
  margin-right: var(--spacing-xs);
}

/* Responsive adjustments */
@media (max-width: 768px) {
  .settings-card-header {
    flex-direction: column;
    align-items: flex-start;
    gap: var(--spacing-md);
  }

  .settings-actions {
    flex-direction: column;
  }

  .settings-actions button {
    width: 100%;
  }
}