/* BitBalance Design System */





@import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700;800&display=swap');











:root {





  /* Dark Finance Theme — Gold */





  --bg-primary: #0b0f19;





  --bg-secondary: #0f1320;





  --bg-card: #151a2d;





  --bg-card-hover: #1a2038;





  --bg-input: #111627;





  --border: #1e2640;





  --border-focus: #f5c842;





  --text-primary: #e8ecf4;





  --text-secondary: #8892a8;





  --text-muted: #6b7a94;





  --accent: #f5c842;





  --accent-hover: #fdd96a;





  --accent-glow: rgba(245, 200, 66, 0.2);





  --success: #f5c842;





  --success-bg: rgba(245, 200, 66, 0.08);





  --warning: #ffb229;





  --warning-bg: rgba(255, 178, 41, 0.08);





  --danger: #ff4757;





  --danger-bg: rgba(255, 71, 87, 0.08);





  --info: #4da6ff;





  --info-bg: rgba(77, 166, 255, 0.08);





  --gradient-1: linear-gradient(135deg, #f5c842 0%, #d4a91a 100%);





  --gradient-2: linear-gradient(135deg, #4da6ff 0%, #2d8cf0 100%);





  --gradient-3: linear-gradient(135deg, #f5c842 0%, #d4a91a 100%);





  --gradient-4: linear-gradient(135deg, #ffb229 0%, #ff9500 100%);





  --shadow-sm: 0 1px 3px rgba(0, 0, 0, 0.4);





  --shadow-md: 0 4px 16px rgba(0, 0, 0, 0.5);





  --shadow-lg: 0 8px 40px rgba(0, 0, 0, 0.6);





  --shadow-glow: 0 0 24px var(--accent-glow);





  --radius-sm: 8px;





  --radius-md: 12px;





  --radius-lg: 18px;





  --radius-xl: 24px;





  --transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1);





}

[data-theme="light"] {
  --bg-primary: #f8fafc;
  --bg-secondary: #ffffff;
  --bg-card: #ffffff;
  --bg-card-hover: #f1f5f9;
  --bg-input: #ffffff;
  --border: #e2e8f0;
  --border-focus: #d97706;
  --text-primary: #0f172a;
  --text-secondary: #475569;
  --text-muted: #64748b;
  --accent: #d97706;
  --accent-hover: #b45309;
  --accent-glow: rgba(217, 119, 6, 0.15);
  --success: #16a34a;
  --success-bg: rgba(22, 163, 74, 0.08);
  --warning: #ea580c;
  --warning-bg: rgba(234, 88, 12, 0.08);
  --danger: #dc2626;
  --danger-bg: rgba(220, 38, 38, 0.08);
  --info: #2563eb;
  --info-bg: rgba(37, 99, 235, 0.08);
  --gradient-1: linear-gradient(135deg, #f59e0b 0%, #d97706 100%);
  --gradient-2: linear-gradient(135deg, #3b82f6 0%, #2563eb 100%);
  --gradient-3: linear-gradient(135deg, #f59e0b 0%, #d97706 100%);
  --gradient-4: linear-gradient(135deg, #f97316 0%, #ea580c 100%);
  --shadow-sm: 0 1px 3px rgba(0, 0, 0, 0.05);
  --shadow-md: 0 4px 12px rgba(0, 0, 0, 0.06);
  --shadow-lg: 0 10px 25px rgba(0, 0, 0, 0.08);
  --shadow-glow: 0 0 16px rgba(217, 119, 6, 0.12);
}

/* Header Theme Toggle Button */
.header-theme-toggle {
  width: 38px;
  height: 38px;
  border-radius: 8px;
  background: var(--bg-card);
  border: 1px solid var(--border);
  color: var(--accent);
  font-size: 18px;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  transition: all 0.15s ease;
  user-select: none;
  flex-shrink: 0;
  line-height: 1;
}

.header-theme-toggle:hover {
  background: var(--bg-card-hover);
  border-color: var(--accent);
  transform: scale(1.05);
}

/* Sidebar Theme Toggle (Default / Dark) */
.sidebar-theme-toggle {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 8px 12px;
  margin: 0 14px 10px 14px;
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  cursor: pointer;
  font-size: 12px;
  color: var(--text-secondary);
  transition: var(--transition);
  user-select: none;
}
.sidebar-theme-toggle:hover {
  background: var(--bg-card-hover);
  color: var(--text-primary);
  border-color: var(--border-focus);
}

/* Light Mode Specific Overrides */
[data-theme="light"] .sidebar {
  background: #ffffff;
  border-right: 1px solid #e2e8f0;
  box-shadow: 2px 0 8px rgba(0, 0, 0, 0.02);
}
[data-theme="light"] .sidebar-brand {
  border-bottom: 1px solid #e2e8f0;
}
[data-theme="light"] .sidebar-brand .brand-bit,
[data-theme="light"] .sidebar-brand .brand-balance {
  color: #0f172a !important;
}
[data-theme="light"] .sidebar-nav .nav-item {
  color: #475569;
}
[data-theme="light"] .sidebar-nav .nav-item:hover {
  background: #f1f5f9;
  color: #0f172a;
}
[data-theme="light"] .sidebar-nav .nav-item.active {
  background: rgba(217, 119, 6, 0.1);
  color: #d97706;
  font-weight: 600;
}
[data-theme="light"] .sidebar-footer {
  border-top: 1px solid #e2e8f0;
  background: #ffffff;
}
[data-theme="light"] .sidebar-footer .user-info:hover {
  background: #f1f5f9;
}

[data-theme="light"] .card {
  background: #ffffff;
  border: 1px solid #e2e8f0;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.05);
}
[data-theme="light"] .kpi-card {
  background: #ffffff;
  border: 1px solid #e2e8f0;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.04);
}
[data-theme="light"] .kpi-card:hover {
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
  border-color: #cbd5e1;
}
[data-theme="light"] .kpi-value {
  color: #0f172a;
}

[data-theme="light"] .data-table {
  border-color: #e2e8f0;
}
[data-theme="light"] .data-table thead th {
  background: #f8fafc;
  color: #475569;
  border-bottom: 1px solid #e2e8f0;
  font-weight: 600;
}
[data-theme="light"] .data-table thead tr.filter-row th {
  background: #f8fafc;
  border-bottom: 1px solid #e2e8f0;
}
[data-theme="light"] .data-table tbody tr {
  border-bottom: 1px solid #f1f5f9;
}
[data-theme="light"] .data-table tbody tr:hover {
  background: #f8fafc !important;
}
[data-theme="light"] .data-table tbody td {
  color: #1e293b;
  border-bottom: 1px solid #f1f5f9;
}
[data-theme="light"] .data-table tfoot {
  background: #f8fafc !important;
  border-top: 2px solid #e2e8f0 !important;
}

[data-theme="light"] .form-input,
[data-theme="light"] select.form-input,
[data-theme="light"] .inline-edit {
  background: #ffffff;
  border: 1px solid #cbd5e1;
  color: #0f172a;
}
[data-theme="light"] .form-input:focus,
[data-theme="light"] select.form-input:focus,
[data-theme="light"] .inline-edit:focus {
  border-color: #d97706;
  background: #ffffff;
  box-shadow: 0 0 0 3px rgba(217, 119, 6, 0.15);
}
[data-theme="light"] input::placeholder {
  color: #94a3b8;
}

[data-theme="light"] .btn-secondary {
  background: #ffffff;
  border: 1px solid #cbd5e1;
  color: #334155;
}
[data-theme="light"] .btn-secondary:hover {
  background: #f1f5f9;
  border-color: #94a3b8;
  color: #0f172a;
}
[data-theme="light"] .btn-icon {
  color: #64748b;
}
[data-theme="light"] .btn-icon:hover {
  background: #f1f5f9;
  color: #0f172a;
}

[data-theme="light"] .modal-overlay {
  background: rgba(15, 23, 42, 0.4);
  backdrop-filter: blur(4px);
}
[data-theme="light"] .modal-card {
  background: #ffffff;
  border: 1px solid #e2e8f0;
  box-shadow: 0 20px 40px rgba(0, 0, 0, 0.1);
}
[data-theme="light"] .comment-popup,
[data-theme="light"] .inv-popup {
  background: #ffffff;
  border: 1px solid #cbd5e1;
  box-shadow: 0 10px 25px rgba(0, 0, 0, 0.1);
}
[data-theme="light"] .header-theme-toggle {
  background: #ffffff;
  border: 1px solid #cbd5e1;
  color: #475569;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05);
}
[data-theme="light"] .header-theme-toggle:hover {
  background: #f8fafc;
  border-color: var(--accent);
  color: var(--accent);
}
[data-theme="light"] .sidebar-theme-toggle {
  background: #ffffff;
  border: 1px solid #e2e8f0;
  color: #475569;
}
[data-theme="light"] .sidebar-theme-toggle:hover {
  background: #f1f5f9;
  color: #0f172a;
  border-color: #d97706;
}











/* AI Analysis Light Mode Overrides */
[data-theme="light"] .ai-content-box {
  color: var(--text-primary);
  scrollbar-color: rgba(99, 102, 241, 0.5) #e2e8f0;
}
[data-theme="light"] .ai-content-box code {
  background: #f1f5f9;
  color: #4f46e5;
  border: 1px solid #e2e8f0;
  padding: 2px 6px;
  border-radius: 4px;
  font-family: 'IBM Plex Mono', monospace;
}
[data-theme="light"] .ai-content-box::-webkit-scrollbar-track {
  background: #e2e8f0;
}
[data-theme="light"] .ai-content-box::-webkit-scrollbar-thumb {
  background: rgba(99, 102, 241, 0.5);
}
[data-theme="light"] .ai-table-wrapper {
  background: #f8fafc;
  border: 1px solid var(--border);
}
[data-theme="light"] .ai-table-wrapper::-webkit-scrollbar-track {
  background: #e2e8f0;
}
[data-theme="light"] .ai-table-wrapper::-webkit-scrollbar-thumb {
  background: rgba(99, 102, 241, 0.5);
}
[data-theme="light"] .ai-table-wrapper table {
  background: transparent;
  color: var(--text-primary);
}
[data-theme="light"] .ai-table-wrapper table th {
  background: #f1f5f9;
  color: var(--text-primary);
  font-weight: 600;
  border-bottom: 1px solid var(--border);
}
[data-theme="light"] .ai-table-wrapper table td {
  color: var(--text-primary);
  border-bottom: 1px solid var(--border);
}
[data-theme="light"] .ai-table-wrapper table tr:hover td {
  background: rgba(0, 0, 0, 0.02);
}

* {





  margin: 0;





  padding: 0;





  box-sizing: border-box;





}











body {





  font-family: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;





  background: var(--bg-primary);





  color: var(--text-primary);





  min-height: 100vh;





  -webkit-font-smoothing: antialiased;





}











/* Layout */





.app-layout {





  display: flex;





  min-height: 100vh;





}











.sidebar {





  width: auto;





  min-width: 220px;





  max-width: 300px;





  background: var(--bg-secondary);





  border-right: 1px solid var(--border);





  display: flex;





  flex-direction: column;





  position: fixed;





  top: 0;





  left: 0;





  bottom: 0;





  z-index: 100;





  transition: var(--transition);





}











.sidebar-brand {





  padding: 24px 20px;





  border-bottom: 1px solid var(--border);





  display: flex;





  flex-direction: column;





  align-items: center;





  justify-content: center;





  gap: 4px;





}











.sidebar-brand .logo {





  width: 40px;





  height: 40px;





  background: var(--gradient-1);





  border-radius: var(--radius-md);





  display: flex;





  align-items: center;





  justify-content: center;





  font-weight: 800;





  font-size: 18px;





  box-shadow: 0 0 20px rgba(245, 200, 66, 0.3);





}











.sidebar-brand h1 {





  font-size: 20px;





  font-weight: 700;





  background: var(--gradient-1);





  -webkit-background-clip: text;





  -webkit-text-fill-color: transparent;





}











.sidebar-nav {





  flex: 1;





  padding: 16px 12px;





  overflow-y: auto;





}











.nav-section {





  margin-bottom: 24px;





}











.nav-section-title {





  font-size: 10px;





  font-weight: 700;





  text-transform: uppercase;





  letter-spacing: 1.5px;





  color: var(--text-muted);





  padding: 0 12px;





  margin-bottom: 8px;





}











.nav-item {





  display: flex;





  align-items: center;





  gap: 12px;





  padding: 10px 12px;





  border-radius: var(--radius-sm);





  cursor: pointer;





  color: var(--text-secondary);





  font-size: 14px;





  font-weight: 500;





  transition: var(--transition);





  text-decoration: none;





  margin-bottom: 2px;





}











.nav-item:hover {





  background: var(--bg-card);





  color: var(--text-primary);





}











.nav-item.active {





  background: var(--accent-glow);





  color: var(--accent-hover);





  font-weight: 600;





}











.nav-item .icon {





  font-size: 18px;





  width: 22px;





  text-align: center;





}











.sidebar-footer {





  padding: 16px;





  border-top: 1px solid var(--border);





}











.user-info {





  display: flex;





  align-items: center;





  gap: 10px;





  padding: 10px;





  border-radius: var(--radius-sm);





  cursor: pointer;





  transition: var(--transition);





}











.user-info:hover {





  background: var(--bg-card);





}











.user-avatar {





  width: 36px;





  height: 36px;





  border-radius: 50%;





  background: var(--gradient-2);





  display: flex;





  align-items: center;





  justify-content: center;





  font-weight: 700;





  font-size: 14px;





}











.user-details {





  flex: 1;





  overflow: hidden;





}











.user-name {





  font-size: 13px;





  font-weight: 600;





  white-space: nowrap;





}











.user-role {





  font-size: 11px;





  color: var(--text-muted);





  text-transform: capitalize;





}











/* Main Content */





.main-content {





  flex: 1;





  margin-left: 260px;





  transition: margin-left 0.3s ease;





  padding: 20px;





  min-height: 100vh;





}











.page-header {





  display: flex;





  align-items: center;





  justify-content: space-between;





  margin-bottom: 28px;





}











.page-header h2 {





  font-size: 26px;





  font-weight: 700;





}











.page-header .subtitle {





  font-size: 14px;





  color: var(--text-secondary);





  margin-top: 4px;





}











/* Cards */





.card {





  background: var(--bg-card);





  border: 1px solid var(--border);





  border-radius: var(--radius-lg);





  padding: 24px;





  transition: var(--transition);





}











.card:hover {





  border-color: rgba(99, 102, 241, 0.3);





}











.card-title {





  font-size: 13px;





  font-weight: 600;





  color: var(--text-secondary);





  text-transform: uppercase;





  letter-spacing: 0.5px;





  margin-bottom: 12px;





}











/* KPI Cards */





.kpi-grid {





  display: flex;





  flex-wrap: wrap;





  gap: 16px;





  margin-bottom: 28px;





}











.kpi-card {





  flex: 1 1 180px;





  min-width: 160px;





  background: var(--bg-card);





  border: 1px solid var(--border);





  border-radius: var(--radius-md);





  padding: 16px;





  position: relative;





  overflow: hidden;





  transition: var(--transition);





}











.kpi-card::before {





  content: '';





  position: absolute;





  top: 0;





  left: 0;





  right: 0;





  height: 3px;





  border-radius: var(--radius-lg) var(--radius-lg) 0 0;





}











.kpi-card:nth-child(1)::before {





  background: var(--gradient-1);





}











.kpi-card:nth-child(2)::before {





  background: linear-gradient(135deg, #fb923c 0%, #f97316 100%);





}











.kpi-card:nth-child(3)::before {





  background: linear-gradient(135deg, #4da6ff 0%, #2d8cf0 100%);





}











.kpi-card:nth-child(4)::before {





  background: linear-gradient(135deg, #a78bfa 0%, #8b5cf6 100%);





}











.kpi-card:hover {





  transform: translateY(-2px);





  box-shadow: var(--shadow-lg);





  border-color: rgba(99, 102, 241, 0.3);





}











.kpi-label {





  font-size: 12px;





  color: var(--text-secondary);





  font-weight: 600;





  text-transform: uppercase;





  letter-spacing: 0.5px;





  margin-bottom: 10px;





}











.kpi-value {





  font-size: 18px;





  font-weight: 800;





  white-space: nowrap;





  line-height: 1.3;





}











.kpi-change {





  font-size: 12px;





  font-weight: 600;





  display: inline-flex;





  align-items: center;





  gap: 4px;





  padding: 2px 8px;





  border-radius: 20px;





}











.kpi-change.up {





  background: rgba(245, 200, 66, 0.12);





  color: #f5c842;





}











.kpi-change.down {





  background: rgba(255, 71, 87, 0.12);





  color: #ff6b7a;





}











.kpi-change.neutral {





  background: rgba(148, 163, 184, 0.1);





  color: #94a3b8;





}











/* Charts area */





.charts-grid {





  display: grid;





  grid-template-columns: 1.5fr 1fr;





  gap: 20px;





  margin-bottom: 28px;





}











.chart-container {





  background: var(--bg-card);





  border: 1px solid var(--border);





  border-radius: var(--radius-lg);





  padding: 24px;





}











.chart-header {





  display: flex;





  align-items: center;





  justify-content: space-between;





  margin-bottom: 20px;





}











.chart-title {





  font-size: 15px;





  font-weight: 600;





}











/* Tables */





.data-table {





  width: 100%;





  border-collapse: separate;





  border-spacing: 0;





}











.data-table thead th {





  font-size: 11px;





  font-weight: 700;





  text-transform: uppercase;





  letter-spacing: 0.5px;





  color: var(--text-muted);





  padding: 8px 12px;





  text-align: left;





  border-bottom: 1px solid var(--border);





  position: sticky;





  top: 0;





  background: var(--bg-card);





  z-index: 2;





  vertical-align: middle;





}











.data-table thead tr.filter-row th {





  padding: 4px 4px;





  position: sticky;





  top: 32px;





  background: var(--bg-card);





  border-bottom: 2px solid var(--border);





  z-index: 2;





  vertical-align: middle;





}











.col-filter {





  width: 100%;





  padding: 4px 6px;





  background: var(--bg-input);





  border: 1px solid var(--border);





  border-radius: 4px;





  color: var(--text-primary);





  font-size: 11px;





  font-family: inherit;





}











.col-filter:focus {





  outline: none;





  border-color: var(--border-focus);





}











.data-table tbody tr {





  transition: var(--transition);





}











.data-table tbody tr:hover {





  background: var(--bg-card-hover);





}











.data-table tbody td {





  padding: 4px 12px;





  font-size: 13px;





  border-bottom: 1px solid rgba(42, 52, 86, 0.5);





  vertical-align: middle;





}











.table-container {





  overflow-x: auto;





  max-height: calc(100vh - 220px);





  overflow-y: auto;





}











/* Badges */





.badge {





  display: inline-flex;





  align-items: center;





  padding: 3px 10px;





  border-radius: 20px;





  font-size: 11px;





  font-weight: 600;





  text-transform: uppercase;





  letter-spacing: 0.5px;





}











.badge-success {





  background: rgba(245, 200, 66, 0.12);





  color: #f5c842;





}











.badge-warning {





  background: rgba(255, 178, 41, 0.12);





  color: #ffb229;





}











.badge-danger {





  background: rgba(255, 71, 87, 0.12);





  color: #ff6b7a;





}











.badge-info {





  background: rgba(77, 166, 255, 0.12);





  color: #4da6ff;





}











.badge-neutral {





  background: rgba(100, 116, 139, 0.15);





  color: var(--text-muted);





}











/* Buttons */





.btn {





  display: inline-flex;





  align-items: center;





  gap: 8px;





  padding: 10px 20px;





  border-radius: var(--radius-sm);





  font-size: 14px;





  font-weight: 600;





  cursor: pointer;





  border: none;





  transition: var(--transition);





  text-decoration: none;





  font-family: inherit;





}











.btn-primary {





  background: var(--gradient-1);





  color: #0b0f19;





  box-shadow: var(--shadow-sm);





}











.btn-primary:hover {





  transform: translateY(-1px);





  box-shadow: var(--shadow-glow);





}











.btn-secondary {





  background: var(--bg-card);





  color: var(--text-primary);





  border: 1px solid var(--border);





}











.btn-secondary:hover {





  background: var(--bg-card-hover);





  border-color: var(--accent);





}











.btn-danger {





  background: var(--danger);





  color: white;





}











.btn-danger:hover {





  background: #dc2626;





}











.btn-sm {





  padding: 6px 14px;





  font-size: 13px;





}











.btn-icon {





  padding: 8px;





  border-radius: var(--radius-sm);





  background: transparent;





  border: 1px solid var(--border);





  color: var(--text-secondary);





  cursor: pointer;





  transition: var(--transition);





}











.btn-icon:hover {





  background: var(--bg-card);





  color: var(--text-primary);





  border-color: var(--accent);





}











/* Forms */





.form-group {





  margin-bottom: 20px;





}











.form-label {





  display: block;





  font-size: 13px;





  font-weight: 600;





  color: var(--text-secondary);





  margin-bottom: 6px;





}











.form-input,





.form-select,





.form-textarea {





  width: 100%;





  padding: 10px 14px;





  background: var(--bg-input);





  border: 1px solid var(--border);





  border-radius: var(--radius-sm);





  color: var(--text-primary);





  font-size: 14px;





  font-family: inherit;





  transition: var(--transition);





}











.form-input:focus,





.form-select:focus,





.form-textarea:focus {





  outline: none;





  border-color: var(--border-focus);





  box-shadow: 0 0 0 3px var(--accent-glow);





}











.form-textarea {





  min-height: 80px;





  resize: vertical;





}











.form-select {





  cursor: pointer;





  appearance: none;





  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath fill='%2394a3b8' d='M1 1l5 5 5-5'/%3E%3C/svg%3E");





  background-repeat: no-repeat;





  background-position: right 12px center;





  padding-right: 32px;





}











.form-row {





  display: grid;





  grid-template-columns: 1fr 1fr;





  gap: 16px;





}











.form-row-3 {





  display: grid;





  grid-template-columns: 1fr 1fr 1fr;





  gap: 16px;





}











/* Modal */





.modal-overlay {





  position: fixed;





  top: 0;





  left: 0;





  right: 0;





  bottom: 0;





  background: rgba(0, 0, 0, 0.7);





  backdrop-filter: blur(4px);





  display: flex;





  align-items: center;





  justify-content: center;





  z-index: 1000;





  animation: fadeIn 0.2s ease;





}











.modal {





  background: var(--bg-secondary);





  border: 1px solid var(--border);





  border-radius: var(--radius-xl);





  width: 90%;





  max-width: 600px;





  max-height: 85vh;





  overflow-y: auto;





  animation: slideUp 0.3s ease;





}











.modal-header {





  display: flex;





  align-items: center;





  justify-content: space-between;





  padding: 20px 24px;





  border-bottom: 1px solid var(--border);





}











.modal-title {





  font-size: 18px;





  font-weight: 700;





}











.modal-close {





  background: none;





  border: none;





  color: var(--text-muted);





  cursor: pointer;





  font-size: 24px;





  line-height: 1;





  transition: var(--transition);





}











.modal-close:hover {





  color: var(--text-primary);





}











.modal-body {





  padding: 24px;





}











.modal-footer {





  padding: 16px 24px;





  border-top: 1px solid var(--border);





  display: flex;





  justify-content: flex-end;





  gap: 12px;





}











/* Login Page */





.login-page {





  min-height: 100vh;





  display: flex;





  align-items: center;





  justify-content: center;





  background: var(--bg-primary);





  position: relative;





  overflow: hidden;





}











.login-page::before {





  content: '';





  position: absolute;





  width: 600px;





  height: 600px;





  border-radius: 50%;





  background: radial-gradient(circle, var(--accent-glow) 0%, transparent 70%);





  top: -200px;





  right: -100px;





  animation: float 8s ease-in-out infinite;





}











.login-page::after {





  content: '';





  position: absolute;





  width: 400px;





  height: 400px;





  border-radius: 50%;





  background: radial-gradient(circle, rgba(16, 185, 129, 0.15) 0%, transparent 70%);





  bottom: -100px;





  left: -100px;





  animation: float 10s ease-in-out infinite reverse;





}











.login-card {





  background: var(--bg-secondary);





  border: 1px solid var(--border);





  border-radius: var(--radius-xl);





  padding: 48px;





  width: 100%;





  max-width: 420px;





  position: relative;





  z-index: 1;





  box-shadow: var(--shadow-lg);





}











.login-logo {





  text-align: center;





  margin-bottom: 32px;





}











.login-logo .logo-icon {





  width: 56px;





  height: 56px;





  background: var(--gradient-1);





  border-radius: var(--radius-lg);





  display: inline-flex;





  align-items: center;





  justify-content: center;





  font-size: 28px;





  font-weight: 800;





  box-shadow: var(--shadow-glow);





  margin-bottom: 16px;





}











.login-logo h1 {





  font-size: 24px;





  font-weight: 800;





  background: var(--gradient-1);





  -webkit-background-clip: text;





  -webkit-text-fill-color: transparent;





}











.login-logo p {





  color: var(--text-muted);





  font-size: 14px;





  margin-top: 6px;





}











.login-error {





  background: var(--danger-bg);





  color: var(--danger);





  padding: 10px 14px;





  border-radius: var(--radius-sm);





  font-size: 13px;





  margin-bottom: 16px;





  display: none;





}











/* 2FA */





.twofa-section {





  text-align: center;





}











.twofa-section img {





  max-width: 200px;





  margin: 16px auto;





  border-radius: var(--radius-md);





}











/* Toast */





.toast-container {





  position: fixed;





  top: 20px;





  right: 20px;





  z-index: 2000;





  display: flex;





  flex-direction: column;





  gap: 8px;





}











.toast {





  padding: 14px 20px;





  border-radius: var(--radius-md);





  font-size: 14px;





  font-weight: 500;





  min-width: 300px;





  box-shadow: var(--shadow-lg);





  animation: slideIn 0.3s ease;





  display: flex;





  align-items: center;





  gap: 10px;





}











.toast-success {





  background: #065f46;





  color: #6ee7b7;





  border: 1px solid #10b981;





}











.toast-error {





  background: #7f1d1d;





  color: #fca5a5;





  border: 1px solid #ef4444;





}











.toast-info {





  background: #1e3a5f;





  color: #93c5fd;





  border: 1px solid #3b82f6;





}











/* Loading */





.spinner {





  width: 32px;





  height: 32px;





  border: 3px solid var(--border);





  border-top-color: var(--accent);





  border-radius: 50%;





  animation: spin 0.8s linear infinite;





}











.loading-overlay {





  display: flex;





  align-items: center;





  justify-content: center;





  padding: 60px;





  color: var(--text-muted);





  flex-direction: column;





  gap: 12px;





}











/* Toolbar */





.toolbar {





  display: flex;





  align-items: center;





  gap: 12px;





  margin-bottom: 20px;





  flex-wrap: wrap;





}











.search-input {





  flex: 1;





  min-width: 200px;





  padding: 10px 14px 10px 36px;





  background: var(--bg-input);





  border: 1px solid var(--border);





  border-radius: var(--radius-sm);





  color: var(--text-primary);





  font-size: 14px;





  font-family: inherit;





  transition: var(--transition);





}











.search-input:focus {





  outline: none;





  border-color: var(--border-focus);





  box-shadow: 0 0 0 3px var(--accent-glow);





}











.search-wrapper {





  position: relative;





  flex: 1;





  min-width: 200px;





}











.search-wrapper::before {





  content: '🔍';





  position: absolute;





  left: 12px;





  top: 50%;





  transform: translateY(-50%);





  font-size: 14px;





}











/* Empty State */





.empty-state {





  text-align: center;





  padding: 60px 20px;





  color: var(--text-muted);





}











.empty-state .icon {





  font-size: 48px;





  margin-bottom: 16px;





}











.empty-state h3 {





  font-size: 18px;





  color: var(--text-secondary);





  margin-bottom: 8px;





}











/* Toggle */





.toggle {





  position: relative;





  width: 44px;





  height: 24px;





  background: var(--border);





  border-radius: 12px;





  cursor: pointer;





  transition: var(--transition);





}











.toggle.active {





  background: var(--accent);





}











.toggle::after {





  content: '';





  position: absolute;





  width: 18px;





  height: 18px;





  background: white;





  border-radius: 50%;





  top: 3px;





  left: 3px;





  transition: var(--transition);





}











.toggle.active::after {





  left: 23px;





}











/* Tabs */





.tabs {





  display: flex;





  gap: 0;





  border-bottom: 1px solid var(--border);





  margin-bottom: 24px;





}











.tab {





  padding: 12px 20px;





  font-size: 14px;





  font-weight: 600;





  color: var(--text-muted);





  cursor: pointer;





  border-bottom: 2px solid transparent;





  transition: var(--transition);





}











.tab:hover {





  color: var(--text-secondary);





}











.tab.active {





  color: var(--accent);





  border-bottom-color: var(--accent);





}











/* Animations */





@keyframes fadeIn {





  from {





    opacity: 0;





  }











  to {





    opacity: 1;





  }





}











@keyframes slideUp {





  from {





    opacity: 0;





    transform: translateY(20px);





  }











  to {





    opacity: 1;





    transform: translateY(0);





  }





}











@keyframes slideIn {





  from {





    opacity: 0;





    transform: translateX(100px);





  }











  to {





    opacity: 1;





    transform: translateX(0);





  }





}











@keyframes spin {





  to {





    transform: rotate(360deg);





  }





}











@keyframes float {











  0%,





  100% {





    transform: translate(0, 0);





  }











  50% {





    transform: translate(20px, -20px);





  }





}











/* Collapsed sidebar */





.sidebar.collapsed {





  width: 62px !important;





  min-width: 62px !important;





  max-width: 62px !important;





  overflow: hidden;





}











.sidebar.collapsed .sidebar-brand h1,





.sidebar.collapsed .nav-section-title,





.sidebar.collapsed .user-details,





.sidebar.collapsed .sidebar-footer .btn { 





  display: none !important; 





}











.sidebar.collapsed .nav-item {





  font-size: 0 !important;





  overflow: hidden;





  white-space: nowrap;





}











.sidebar.collapsed .nav-item .icon {





  font-size: 20px !important;





  display: flex !important;





}











.sidebar.collapsed .sidebar-brand {





  padding: 12px 4px;





  overflow: visible;





}











.sidebar.collapsed .brand-mini {





  display: block !important;





}











.sidebar.collapsed .brand-full {





  display: none !important;





}











.sidebar.collapsed .logout-icon {





  display: none !important;





}











.sidebar.collapsed .sidebar-nav {





  padding: 8px 6px;





}























.sidebar.collapsed .user-info {





  justify-content: center;





  padding: 8px;





}











.sidebar.collapsed .user-avatar {





  width: 32px;





  height: 32px;





  min-width: 32px;





  font-size: 12px;





}











.sidebar.collapsed .sidebar-footer {





  padding: 8px;





}











.sidebar.collapsed + .main-content,





body.sidebar-collapsed .main-content {





  margin-left: 62px !important;





}











/* Collapse toggle button */





.sidebar-toggle {





  position: absolute;





  top: 16px;





  right: 12px;





  width: 32px;





  height: 32px;





  background: transparent;





  border: none;





  color: var(--text-muted);





  font-size: 20px;





  cursor: pointer;





  display: flex;





  align-items: center;





  justify-content: center;





  z-index: 110;





  transition: var(--transition);





  border-radius: var(--radius-sm);





}











.sidebar-toggle:hover {





  background: var(--accent-glow);





  color: var(--accent);





}











.sidebar.collapsed .sidebar-toggle {





  position: relative;





  top: 0;





  right: 0;





  width: 100%;





  margin-bottom: 8px;





}











/* ===================== RESPONSIVE ===================== */











/* Mobile hamburger button */





.mobile-menu-btn {





  display: none;





  position: fixed;





  top: 12px;





  left: 12px;





  z-index: 200;





  background: var(--bg-secondary);





  border: 1px solid var(--border);





  color: var(--text-primary);





  width: 40px;





  height: 40px;





  border-radius: var(--radius-sm);





  font-size: 22px;





  cursor: pointer;





  align-items: center;





  justify-content: center;





  box-shadow: 0 4px 12px rgba(0,0,0,0.3);





  transition: var(--transition);





}





.mobile-menu-btn:hover { background: var(--accent-glow); }











/* Sidebar overlay for mobile */





.sidebar-overlay {





  display: none;





  position: fixed;





  top: 0; left: 0; right: 0; bottom: 0;





  background: rgba(0,0,0,0.5);





  z-index: 99;





  backdrop-filter: blur(2px);





}





.sidebar-overlay.active { display: block; }











/* Tablet: 1024px */





@media (max-width: 1024px) {





  .sidebar:not(.collapsed) {





    min-width: 200px;





    max-width: 240px;





  }





  .main-content {





    margin-left: 220px;





    padding: 16px;





  }





  .kpi-grid {





    grid-template-columns: repeat(2, 1fr);





  }





  .page-header {





    flex-direction: column;





    gap: 12px;





    align-items: flex-start !important;





  }





  .page-header > div:last-child {





    width: 100%;





  }





  .toolbar {





    flex-wrap: wrap;





  }





}











/* Mobile: 768px */





@media (max-width: 768px) {





  .mobile-menu-btn {





    display: flex;





  }











  .sidebar {





    width: 0;





    overflow: hidden;





    z-index: 150;





  }











  .sidebar.open {





    width: 280px;





    box-shadow: 8px 0 32px rgba(0,0,0,0.5);





  }











  .main-content {





    margin-left: 0;





    padding: 12px;





    padding-top: 56px;





  }











  .page-header {





    flex-direction: column;





    gap: 10px;





    align-items: flex-start !important;





    padding: 12px 0;





  }











  .page-header h2 {





    font-size: 20px;





  }











  .page-header > div:last-child {





    width: 100%;





    flex-wrap: wrap;





  }











  .charts-grid {





    grid-template-columns: 1fr;





  }











  .kpi-grid {





    grid-template-columns: 1fr 1fr;





    gap: 8px;





  }











  .kpi-card {





    padding: 12px;





  }











  .kpi-card .value {





  font-size: clamp(14px, 2.2vw, 28px) !important;





  white-space: nowrap;





  overflow: visible;





  text-overflow: unset;





  line-height: 1.2;





}











  .form-row,





  .form-row-3 {





    grid-template-columns: 1fr;





  }











  /* Tables: horizontal scroll */





  .table-container {





    overflow-x: auto;





    -webkit-overflow-scrolling: touch;





  }











  .data-table {





    min-width: 800px;





  }











  .data-table th,





  .data-table td {





    padding: 8px 6px;





    font-size: 12px;





    vertical-align: middle;





  }











  /* Toolbar responsive */





  .toolbar {





    flex-wrap: wrap;





    gap: 8px;





  }











  .toolbar .search-wrapper {





    width: 100%;





  }











  .toolbar .search-input {





    width: 100%;





  }











  .toolbar .form-select {





    flex: 1;





    min-width: 100px !important;





  }











  /* Cards */





  .card {





    padding: 14px;





  }











  /* Modal responsive */





  .modal-overlay .modal {





    width: 95vw !important;





    max-width: 95vw !important;





    max-height: 90vh;





    margin: 5vh auto;





  }











  .modal-body {





    max-height: 70vh;





    overflow-y: auto;





  }











  /* Buttons */





  .btn {





    padding: 8px 14px;





    font-size: 13px;





  }











  .btn-primary {





    width: auto;





  }











  /* Customer cards grid */





  .page-content > div[style*="grid-template-columns"] {





    grid-template-columns: 1fr !important;





  }





}











/* Small mobile: 480px */





@media (max-width: 480px) {





  .main-content {





    padding: 8px;





    padding-top: 52px;





  }











  .page-header h2 {





    font-size: 18px;





  }











  .kpi-grid {





    grid-template-columns: 1fr;





  }











  .data-table {





    min-width: 600px;





    font-size: 11px;





  }











  .card {





    padding: 10px;





    border-radius: 8px;





  }











  .modal-overlay .modal {





    width: 98vw !important;





    margin: 2vh auto;





  }











  .page-header > div {





    width: 100%;





  }











  .btn-primary, .btn-secondary {





    font-size: 12px;





    padding: 6px 10px;





  }





}











/* Inline edit fields */





.inline-edit {





  background: transparent;





  border: 1px solid transparent;





  color: var(--text-primary);





  font-family: 'Inter', sans-serif;





  font-size: 13px;





  padding: 4px 6px;





  border-radius: 6px;





  transition: border-color 0.2s, background 0.3s;





  outline: none;





}











.inline-edit:hover {





  border-color: var(--border);





}











.inline-edit:focus {





  border-color: var(--accent);





  background: var(--bg-input);





  box-shadow: 0 0 0 2px var(--accent-glow);





}











.inline-num {





  font-variant-numeric: tabular-nums;





}











select.inline-edit {





  cursor: pointer;





  -webkit-appearance: none;





  appearance: none;





  padding-right: 18px;





  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6'%3E%3Cpath d='M0 0l5 6 5-6z' fill='%2364748b'/%3E%3C/svg%3E");





  background-repeat: no-repeat;





  background-position: right 4px center;





}











select.inline-edit option {





  background: var(--bg-card);





  color: var(--text-primary);





}











/* Sub-position rows */





tr.sub-position {





  background: rgba(99, 102, 241, 0.03);





}











tr.sub-position td:first-child {





  border-left: 2px solid var(--accent);





}





/* Premium card enhancements */





.stat-card, .card, .budget-card {





  backdrop-filter: blur(10px);





  border: 1px solid rgba(255,255,255,0.04);





}











.stat-card:hover, .card:hover {





  border-color: rgba(245, 200, 66, 0.15);





  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.4), 0 0 0 1px rgba(245, 200, 66, 0.08);





}











/* Green glow for active/positive values */





.stat-value {





  font-weight: 700;





  letter-spacing: -0.5px;





}











/* Premium table styling */





.data-table th {





  font-size: 11px;





  font-weight: 600;





  text-transform: uppercase;





  letter-spacing: 0.8px;





  color: var(--text-muted);





  border-bottom: 2px solid var(--border);





}











.data-table td {





  border-bottom: 1px solid rgba(255,255,255,0.03);





  vertical-align: middle;





}











.data-table tr:hover td {





  background: rgba(245, 200, 66, 0.03);





}











/* Enhanced buttons */





.btn-primary {





  background: var(--gradient-1) !important;





  color: #0b0f19 !important;





  font-weight: 600;





  border: none;





  box-shadow: 0 4px 14px rgba(245, 200, 66, 0.25);





  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);





}











.btn-primary:hover {





  box-shadow: 0 6px 20px rgba(245, 200, 66, 0.35);





  transform: translateY(-1px);





}











/* Enhanced login card */





.login-card {





  border: 1px solid rgba(255,255,255,0.06);





  backdrop-filter: blur(20px);





}











/* Pill-shaped nav items on hover */





.nav-item:hover {





  border-radius: var(--radius-md);





}











.nav-item.active {





  background: rgba(245, 200, 66, 0.1) !important;





  border-left-color: var(--accent) !important;





}











.nav-item.active::before {





  background: var(--accent) !important;





}











/* Chart canvas containers */





.chart-container canvas {





  border-radius: var(--radius-md);





}











/* Modal enhancements */





.modal-content {





  border: 1px solid rgba(255,255,255,0.06);





  backdrop-filter: blur(20px);





}











/* Toast enhancements */





.toast {





  backdrop-filter: blur(12px);





  border: 1px solid rgba(255,255,255,0.08);





}











/* Scrollbar styling */





::-webkit-scrollbar {





  width: 6px;





}





::-webkit-scrollbar-track {





  background: transparent;





}





::-webkit-scrollbar-thumb {





  background: var(--border);





  border-radius: 3px;





}





::-webkit-scrollbar-thumb:hover {





  background: var(--text-muted);





}











/* Form input focus glow */





.form-input:focus, .form-select:focus {





  box-shadow: 0 0 0 3px rgba(245, 200, 66, 0.12);





}











/* Badge/tag styling */





.badge, .tag {





  font-size: 11px;





  font-weight: 600;





  letter-spacing: 0.3px;





}











/* Status dot */





.status-dot {





  width: 8px;





  height: 8px;





  border-radius: 50%;





  background: var(--accent);





  display: inline-block;





  box-shadow: 0 0 8px rgba(245, 200, 66, 0.4);





}











/* Logo image styling */





.login-logo img {





  width: 72px;





  height: 72px;





  border-radius: var(--radius-lg);





  display: block;





  margin: 0 auto 8px;





  box-shadow: 0 0 30px rgba(245, 200, 66, 0.25);





}





.sidebar-brand img.logo {





  box-shadow: 0 0 16px rgba(245, 200, 66, 0.2);





}











.badge-gold {





  background: rgba(245, 200, 66, 0.15);





  color: #f5c842;





  font-size: 11px;





  font-weight: 600;





  padding: 2px 8px;





  border-radius: 20px;





}











/* Number columns - no wrap, right aligned */





.data-table td.col-num,





.data-table thead th.col-num {





  white-space: nowrap;





  text-align: right !important;





  font-variant-numeric: tabular-nums;





  min-width: 100px;





}











/* Ensure all table cells have minimum visible width */





.data-table th, .data-table td {





  min-width: 60px;





  white-space: nowrap;





}











/* Allow long text cells to wrap */





.data-table td.col-text {





  white-space: normal;





  word-break: break-word;





  min-width: 120px;





}

















/* Print styles */





@media print {





  .sidebar, .mobile-menu-btn, .sidebar-overlay, .toolbar, .page-header button,





  .btn-icon, .export-btns, .nav-item, .modal-overlay { display: none !important; }





  .main-content { margin-left: 0 !important; padding: 10px !important; }





  .card { box-shadow: none !important; border: 1px solid #ddd !important; }





  .data-table { font-size: 10px; }





  body { background: white !important; color: black !important; }





}

















/* FORCE right-align for ALL numeric columns */





table.data-table td.col-num,





table.data-table th.col-num,





.data-table td.col-num,





.data-table th.col-num,





.data-table thead th.col-num,





td.col-num,





th.col-num {





  text-align: right !important;





}





.data-table td.col-num input,





td.col-num input {





  text-align: right !important;





  margin-left: auto;





  display: block;





}











/* Compact table rows - consistent vertical centering */





.data-table td,





.data-table tbody td {





  padding-top: 5px !important;





  padding-bottom: 5px !important;





  line-height: 1.5;





  vertical-align: middle;





}





.data-table thead th {





  padding-top: 8px !important;





  padding-bottom: 8px !important;





  vertical-align: middle;





}





.data-table input.inline-edit,





.data-table select.inline-edit {





  padding: 2px 4px;





  height: auto;





  min-height: 26px;





  line-height: 1.5;





  vertical-align: middle;





}











/* Hide number input spinners (up/down arrows) */





input[type=number]::-webkit-inner-spin-button,





input[type=number]::-webkit-outer-spin-button {





  -webkit-appearance: none;





  margin: 0;





}





input[type=number] {





  -moz-appearance: textfield;





  appearance: textfield;





}











/* Viewer disabled state */





.btn.disabled, button.disabled, .btn-icon.disabled {





  opacity: 0.35 !important;





  pointer-events: none !important;





  cursor: not-allowed !important;





  filter: grayscale(0.5);





}











/* Execution Status Row Styles */





tr.exec-pendent {





  /* No special styling */





}





.data-table tr.exec-in_bearbeitung,





.data-table tr.exec-in_bearbeitung td {





  animation: exec-pulse 2.5s ease-in-out infinite !important;





}





.data-table tr.exec-abgeschlossen,





.data-table tr.exec-abgeschlossen td {





  background: rgba(34, 197, 94, 0.10) !important;





}





@keyframes exec-pulse {





  0%, 100% { background-color: rgba(234, 179, 8, 0.06); }





  50% { background-color: rgba(234, 179, 8, 0.22); }





}





.data-table tr.exec-in_bearbeitung:hover td {





  animation: none !important;





  background: rgba(234, 179, 8, 0.25) !important;





}





.data-table tr.exec-abgeschlossen:hover td {





  background: rgba(34, 197, 94, 0.18) !important;





}











/* ============================================





   GLOBAL VERTICAL CENTERING - ALL TABLES





   ============================================ */











/* Base: all cells vertically centered */





.data-table td,





.data-table th,





.data-table tbody td,





.data-table thead th {





  vertical-align: middle !important;





}











/* All child elements inside cells */





.data-table td > *,





.data-table td input,





.data-table td select,





.data-table td button,





.data-table td span,





.data-table td strong,





.data-table td a,





.data-table td .badge,





.data-table td .btn-icon {





  vertical-align: middle;





  box-sizing: border-box;





}











/* Form controls: min-height instead of fixed height */





.data-table td input.inline-edit,





.data-table td select.inline-edit {





  min-height: 26px;





  padding: 2px 6px;





  vertical-align: middle;





  box-sizing: border-box;





  margin: 0;





}











.data-table td select {





  min-height: 26px;





  padding: 2px 4px;





  vertical-align: middle;





  box-sizing: border-box;





  margin: 0;





}











/* Buttons inside cells */





.data-table td button,





.data-table td .btn-icon {





  vertical-align: middle;





  margin: 0;





}











/* Badges centered */





.data-table td .badge {





  display: inline-block;





  vertical-align: middle;





}











/* Consistent but flexible line-height */





.data-table td {





  line-height: 1.5;





}











/* Inline elements */





.data-table td .comment-trigger,





.data-table td .inv-assign-btn,





.data-table td .inv-status-group {





  vertical-align: middle;





  display: inline-block;





}











/* Print */





@media print {





  .data-table td,





  .data-table th {





    vertical-align: middle !important;





  }





}











/* ════ Ausführungsstatus: Abgeschlossen Animation ════ */





@keyframes pulse-green {





  0%   { background-color: rgba(34, 197, 94, 0.00); }





  50%  { background-color: rgba(34, 197, 94, 0.10); }





  100% { background-color: rgba(34, 197, 94, 0.00); }





}











.row-abgeschlossen {





  background-color: rgba(34, 197, 94, 0.08) !important;





}











.row-abgeschlossen > td {





  border-left: none;











}











.row-abgeschlossen > td:first-child {





  border-left: 3px solid #22c55e !important;





  padding-left: 5px !important;





}




/* ════ Ausführungsstatus: In Bearbeitung Animation ════ */




@keyframes pulse-yellow {




  0%   { background-color: rgba(245, 158, 11, 0.00); }




  50%  { background-color: rgba(245, 158, 11, 0.10); }




  100% { background-color: rgba(245, 158, 11, 0.00); }




}









.row-in-bearbeitung {




  animation: pulse-yellow 3s ease-in-out infinite !important;




}









.row-in-bearbeitung > td {




  opacity: 0.88;




}









.row-in-bearbeitung > td:first-child {




  border-left: 3px solid #f59e0b !important;




  padding-left: 5px !important;




}



/* ════════════════════════════════════════════

   VIEWER MODE — complete read-only lockdown

   ════════════════════════════════════════════ */



/* Alle Eingabefelder deaktiviert */

body.viewer-mode .inline-edit {

  pointer-events: none !important;

  opacity: 0.65 !important;

  cursor: default !important;

  background: transparent !important;

  border-color: transparent !important;

  -webkit-appearance: none;

  -moz-appearance: none;

  appearance: none;

}

body.viewer-mode select.inline-edit {

  background-image: none !important;

  padding-right: 4px !important;

}



/* ── Alle Aktions-Icons & Buttons verstecken ── */

body.viewer-mode .btn-icon,

body.viewer-mode .inv-assign-btn,

body.viewer-mode .inv-unlink-btn,

body.viewer-mode [onclick*="deletePlan"],

body.viewer-mode [onclick*="openPlanModal"],

body.viewer-mode [onclick*="openBudgetItemModal"],

body.viewer-mode [onclick*="addSubPosition"],

body.viewer-mode [onclick*="removeFromPlan"],

body.viewer-mode [onclick*="openAssignDialog"],

body.viewer-mode [onclick*="openInvoiceAssign"],

body.viewer-mode [onclick*="showAssignItems"],

body.viewer-mode [onclick*="syncBexio"],

body.viewer-mode [onclick*="openNewPosition"],

body.viewer-mode [onclick*="unlinkInvoice"],

body.viewer-mode [onclick*="unlinkSingleInvoice"],

body.viewer-mode [onclick*="openInlineInvoicePicker"],

body.viewer-mode [onclick*="assignInlineInvoice"],

body.viewer-mode .plan-add-btn,

body.viewer-mode .add-position-btn {

  display: none !important;

}



/* Letzte Spalte (Aktionen) in Plan-Tabelle komplett ausblenden */

body.viewer-mode #plan-detail-table thead tr th:last-child,

body.viewer-mode #plan-detail-table tbody tr td:last-child {

  display: none !important;

}



/* Viewer-Badge rechts unten */

body.viewer-mode::after {

  content: '👁 Lesemodus';

  position: fixed;

  bottom: 16px;

  right: 16px;

  background: rgba(148, 163, 184, 0.12);

  color: #94a3b8;

  border: 1px solid rgba(148, 163, 184, 0.25);

  padding: 4px 12px;

  border-radius: 20px;

  font-size: 11px;

  font-weight: 600;

  letter-spacing: 0.05em;

  z-index: 9999;

  pointer-events: none;

}

/* Sidebar user-info IMMER sichtbar — auch im viewer-mode */
body.viewer-mode .sidebar-footer,
body.viewer-mode .user-info,
body.viewer-mode .user-avatar,
body.viewer-mode .user-details,
body.viewer-mode .user-name,
body.viewer-mode .user-role,
body.viewer-mode .logout-icon {
  display: flex !important;
}

/* AI Analysis Box & Table Scroll Styling */
.ai-content-box {
  max-height: 520px;
  overflow-y: auto;
  overflow-x: auto;
  scrollbar-width: thin;
  scrollbar-color: rgba(99, 102, 241, 0.4) rgba(15, 22, 41, 0.6);
  padding-right: 8px;
  scroll-behavior: smooth;
  word-break: break-word;
}

.ai-content-box::-webkit-scrollbar {
  width: 8px;
  height: 8px;
}

.ai-content-box::-webkit-scrollbar-track {
  background: rgba(15, 22, 41, 0.6);
  border-radius: 4px;
}

.ai-content-box::-webkit-scrollbar-thumb {
  background: rgba(99, 102, 241, 0.4);
  border-radius: 4px;
}

.ai-content-box::-webkit-scrollbar-thumb:hover {
  background: rgba(99, 102, 241, 0.7);
}

.ai-table-wrapper {
  overflow-x: auto;
  margin: 14px 0;
  border: 1px solid var(--border);
  border-radius: 8px;
  background: var(--bg-card);
  scrollbar-width: thin;
  scrollbar-color: rgba(99, 102, 241, 0.4) rgba(15, 22, 41, 0.6);
}

.ai-table-wrapper::-webkit-scrollbar {
  height: 6px;
}

.ai-table-wrapper::-webkit-scrollbar-track {
  background: rgba(15, 22, 41, 0.6);
  border-radius: 3px;
}

.ai-table-wrapper::-webkit-scrollbar-thumb {
  background: rgba(99, 102, 241, 0.4);
  border-radius: 3px;
}

.ai-table-wrapper::-webkit-scrollbar-thumb:hover {
  background: rgba(99, 102, 241, 0.7);
}


/* ==========================================================================
   Layout containment to prevent horizontal page overflow and handle wide tables/AI boxes
   ========================================================================== */
.app-layout {
  overflow-x: hidden;
  max-width: 100vw;
}

.main-content {
  min-width: 0 !important;
  max-width: calc(100vw - 260px);
  overflow-x: hidden;
  box-sizing: border-box;
}

body.sidebar-collapsed .main-content,
.sidebar.collapsed + .main-content {
  max-width: calc(100vw - 70px);
}

@media (max-width: 768px) {
  .main-content {
    max-width: 100vw;
    margin-left: 0 !important;
  }
}

.card {
  max-width: 100%;
  box-sizing: border-box;
}

.table-container {
  max-width: 100%;
  overflow-x: auto !important;
  box-sizing: border-box;
}

.ai-content-box {
  max-width: 100%;
  box-sizing: border-box;
  max-height: 520px;
  overflow-y: auto;
  overflow-x: auto;
  scrollbar-width: thin;
  scrollbar-color: rgba(99, 102, 241, 0.4) rgba(15, 22, 41, 0.6);
  padding-right: 8px;
  scroll-behavior: smooth;
  word-break: break-word;
}

.ai-content-box.expanded {
  max-height: none !important;
}

.ai-table-wrapper {
  max-width: 100%;
  overflow-x: auto !important;
  box-sizing: border-box;
  margin: 14px 0;
  border: 1px solid var(--border);
  border-radius: 8px;
  background: var(--bg-card);
  scrollbar-width: thin;
  scrollbar-color: rgba(99, 102, 241, 0.4) rgba(15, 22, 41, 0.6);
}

/* Deactivated budget positions in plan detail */
tr.row-deactivated td:not(:last-child) {
  text-decoration: line-through !important;
  text-decoration-color: #ef4444 !important;
  text-decoration-thickness: 2px !important;
  opacity: 0.6;
}
tr.row-deactivated td:not(:last-child) input,
tr.row-deactivated td:not(:last-child) select,
tr.row-deactivated td:not(:last-child) strong,
tr.row-deactivated td:not(:last-child) span:not(.deactivated-badge) {
  text-decoration: line-through !important;
  text-decoration-color: #ef4444 !important;
  text-decoration-thickness: 2px !important;
}
tr.row-deactivated td:last-child,
tr.row-deactivated td:last-child *,
.deactivated-badge {
  text-decoration: none !important;
  opacity: 1 !important;
}


/* Hierarchical Product Replacement Styles */

/* Modal Overlay & Card */
#replacement-modal {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 1050;
    display: flex;
    align-items: center;
    justify-content: center;
    background-color: rgba(0, 0, 0, 0.6);
    backdrop-filter: blur(4px);
    transition: opacity 0.2s ease;
}

#replacement-modal.hidden {
    opacity: 0;
    pointer-events: none;
}

.replacement-modal-card {
    position: relative;
    width: 95vw;
    max-width: 1200px;
    max-height: 90vh;
    background-color: var(--bg-card);
    border: 1px solid var(--border);
    border-radius: 8px;
    box-shadow: 0 10px 40px rgba(0, 0, 0, 0.25);
    display: flex;
    flex-direction: column;
    overflow: hidden;
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}

/* Header */
.replacement-modal-header {
    padding: 1rem 1.5rem;
    border-bottom: 1px solid var(--border);
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-shrink: 0;
    background-color: rgba(0,0,0,0.02);
}

.replacement-modal-title {
    margin: 0;
    font-size: 1.25rem;
    color: var(--text-primary);
    font-weight: 600;
}

.replacement-modal-close {
    background: none;
    border: none;
    cursor: pointer;
    padding: 0.375rem;
    border-radius: 4px;
    font-size: 1.5rem;
    line-height: 1;
    color: var(--text-muted);
    transition: color 0.2s ease, background-color 0.2s ease;
}

.replacement-modal-close:hover {
    color: var(--text-primary);
    background-color: rgba(0,0,0,0.05);
}

/* Body */
.replacement-modal-body {
    padding: 1.5rem;
    overflow-y: auto;
    flex-grow: 1;
}

/* Split-view comparison layout */
.comparison-container {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 2rem;
    margin-bottom: 2rem;
}

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

.comparison-card {
    background-color: rgba(0,0,0,0.03);
    border-radius: 6px;
    padding: 1rem;
    border: 1px solid var(--border);
}

.comparison-card.status-quo {
    border-top: 3px solid #3b82f6;
}

.comparison-card.neuer-vorschlag {
    border-top: 3px solid #10b981;
}

.comparison-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 1rem;
    font-weight: 600;
}

/* Table styles */
.replacement-table-wrapper {
    max-height: 350px;
    overflow-y: auto;
}

table.replacement-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 0.9rem;
}

table.replacement-table th,
table.replacement-table td {
    padding: 0.75rem;
    text-align: left;
    vertical-align: middle;
}

table.replacement-table th {
    background-color: rgba(0,0,0,0.05);
    position: sticky;
    top: 0;
    z-index: 1;
    font-weight: 600;
    color: var(--text-primary);
    border-bottom: 2px solid var(--border);
}

table.replacement-table td {
    border-bottom: 1px solid var(--border);
    color: var(--text-primary);
}

table.replacement-table tr:last-child td {
    border-bottom: none;
}

/* Inputs and dropdowns */
.replacement-input,
.replacement-select {
    width: 100%;
    padding: 0.5rem;
    border: 1px solid var(--border);
    background-color: rgba(255,255,255,0.05);
    color: var(--text-primary);
    border-radius: 4px;
    font-size: 0.875rem;
    transition: border-color 0.2s ease, box-shadow 0.2s ease;
}

.replacement-input:focus,
.replacement-select:focus {
    outline: none;
    border-color: #3b82f6;
    box-shadow: 0 0 0 3px rgba(59,130,246,0.2);
}

/* ROI Comparison Banner */
.replacement-roi-banner {
    margin: 1.5rem 0;
    padding: 1rem;
    border-radius: 8px;
}

.alert-success {
    background-color: var(--bg-card);
    color: #166534;
    border: 1px solid #16a34a;
    box-shadow: 0 2px 10px rgba(22,101,52,0.1);
}

.alert-success::before {
    content: "✓";
    font-weight: bold;
    margin-right: 0.5rem;
}

.alert-warning {
    background-color: var(--bg-card);
    color: #9a3412;
    border: 1px solid #d97706;
    box-shadow: 0 2px 10px rgba(154,52,18,0.1);
}

.alert-warning::before {
    content: "⚠";
    font-weight: bold;
    margin-right: 0.5rem;
}

.alert-info {
    background-color: var(--bg-card);
    color: #1e40af;
    border: 1px solid #2563eb;
    box-shadow: 0 2px 10px rgba(30,64,175,0.1);
}

.alert-info::before {
    content: "ℹ";
    font-weight: bold;
    margin-right: 0.5rem;
}

.alert-danger {
    background-color: var(--bg-card);
    color: #991b1b;
    border: 1px solid #dc2626;
    box-shadow: 0 2px 10px rgba(153,27,27,0.1);
}

.alert-danger::before {
    content: "✗";
    font-weight: bold;
    margin-right: 0.5rem;
}

/* Badges */
.replacement-badge {
    display: inline-block;
    padding: 0.375rem 0.625rem;
    border-radius: 4px;
    font-size: 0.75rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

.replacement-badge.pending {
    background-color: rgba(251, 191, 36, 0.1);
    color: #d97706;
    border: 1px solid rgba(251, 191, 36, 0.4);
}

.replacement-badge.approved {
    background-color: rgba(16, 185, 129, 0.1);
    color: #059669;
    border: 1px solid rgba(16, 185, 129, 0.4);
}

.replacement-badge.rejected {
    background-color: rgba(239, 68, 68, 0.1);
    color: #dc2626;
    border: 1px solid rgba(239, 68, 68, 0.4);
}

/* Footer */
.replacement-modal-footer {
    padding: 1rem 1.5rem;
    border-top: 1px solid var(--border);
    display: flex;
    justify-content: flex-end;
    gap: 1rem;
    flex-shrink: 0;
    background-color: rgba(0,0,0,0.02);
}

.replacement-btn {
    padding: 0.625rem 1.25rem;
    border-radius: 6px;
    font-size: 0.875rem;
    font-weight: 500;
    cursor: pointer;
    transition: all 0.2s ease;
    border: 1px solid var(--border);
}

.replacement-btn-primary {
    background-color: #3b82f6;
    color: white;
    border-color: #3b82f6;
}

.replacement-btn-primary:hover {
    background-color: #2563eb;
    box-shadow: 0 0 0 3px rgba(59,130,246,0.2);
}

.replacement-btn-secondary {
    background-color: rgba(0,0,0,0.05);
    color: var(--text-primary);
}

.replacement-btn-secondary:hover {
    background-color: rgba(0,0,0,0.1);
}

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

/* Responsive adjustments */
@media (max-width: 992px) {
    .replacement-modal-card {
        max-height: 95vh;
    }
}