/* ========================================
   GBOS Application Builder - Enterprise Platform Style
   Matching gbos.io design system
   ======================================== */

:root {
  /* Colors */
  --primary-color: #2d2b87;
  --primary-rgb: 45, 43, 135;
  --primary-hover: #3d3ba0;
  --bg-color: #f7f9fc;
  --panel-bg: #ffffff;
  --text-color: #374151;
  --text-muted: #6b7280;
  --text-light: #9ca3af;
  --border-color: #e6ebf1;
  --border-light: #f0f3f7;
  --success: #10b981;
  --warning: #f59e0b;
  --danger: #ef4444;
  --info: #3b82f6;

  /* Aliases for BRD/SDD views */
  --primary: var(--primary-color);
  --bg: var(--bg-color);
  --surface: var(--panel-bg);
  --text: var(--text-color);
  --border: var(--border-color);
  --border-subtle: var(--border-light);
  --hover: rgba(0, 0, 0, 0.04);
  --primary-alpha: rgba(45, 43, 135, 0.08);

  /* Spacing */
  --header-height: 56px;
  --sidebar-width: 240px;
  --sidebar-collapsed: 60px;
  --ai-panel-width: 380px;
  
  /* Typography */
  --font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --font-mono: "SF Mono", Monaco, "Cascadia Code", monospace;
  
  /* Effects */
  --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.05);
  --shadow-md: 0 4px 6px rgba(0, 0, 0, 0.07);
  --shadow-lg: 0 10px 15px rgba(0, 0, 0, 0.1);
  --radius: 8px;
  --radius-sm: 4px;
  --radius-lg: 12px;
  --transition: all 0.2s ease;
}

/* ========================================
   Landing Page — Split-Screen Layout
   ======================================== */
.landing-page {
  position: fixed;
  inset: 0;
  z-index: 10000;
  display: flex;
  flex-direction: row;
  font-family: var(--font-family);
}

/* ---- Left Brand Panel ---- */
.landing-brand-panel {
  flex: 0 0 50%;
  background: linear-gradient(160deg, #1a1852 0%, #2d2b87 50%, #3d3ba0 100%);
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
  overflow: hidden;
}
.landing-brand-panel::before {
  content: '';
  position: absolute;
  inset: -50%;
  background: radial-gradient(circle at 30% 40%, rgba(99,91,255,0.25) 0%, transparent 50%),
              radial-gradient(circle at 70% 60%, rgba(61,59,160,0.3) 0%, transparent 50%),
              radial-gradient(circle at 50% 80%, rgba(45,43,135,0.2) 0%, transparent 40%);
  animation: brandPanelShift 12s ease-in-out infinite alternate;
}
@keyframes brandPanelShift {
  0%   { transform: translate(0, 0) scale(1); }
  50%  { transform: translate(-5%, 3%) scale(1.05); }
  100% { transform: translate(3%, -4%) scale(1.02); }
}
.landing-brand-panel::after {
  content: '';
  position: absolute;
  inset: 0;
  background-image: radial-gradient(rgba(255,255,255,0.08) 1px, transparent 1px);
  background-size: 24px 24px;
  pointer-events: none;
}
.landing-brand-content {
  position: relative;
  z-index: 1;
  padding: 48px;
  max-width: 480px;
}
.landing-brand-logo {
  width: 140px;
  height: auto;
  margin-bottom: 40px;
  filter: brightness(0) invert(1);
}
.landing-brand-tagline {
  font-size: 32px;
  font-weight: 700;
  color: #fff;
  line-height: 1.3;
  margin: 0 0 40px;
}
.landing-brand-features {
  display: flex;
  flex-direction: column;
  gap: 20px;
  margin-bottom: 48px;
}
.landing-brand-feature {
  display: flex;
  align-items: flex-start;
  gap: 14px;
  color: rgba(255,255,255,0.85);
  font-size: 15px;
  line-height: 1.5;
}
.landing-brand-feature i {
  font-size: 18px;
  margin-top: 2px;
  color: rgba(255,255,255,0.6);
  flex-shrink: 0;
}
.landing-brand-copyright {
  font-size: 13px;
  color: rgba(255,255,255,0.35);
  margin: 0;
}

/* ---- Right Form Panel ---- */
.landing-form-panel {
  flex: 1;
  background: #fff;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  overflow-y: auto;
  padding: 48px 40px;
}

/* ---- Card ---- */
.landing-card {
  width: 100%;
  max-width: 400px;
}
.landing-logo {
  display: none;
  margin-bottom: 20px;
  text-align: center;
}
.landing-logo-img { width: 120px; height: auto; }
.landing-title {
  font-size: 26px;
  font-weight: 700;
  color: var(--primary-color);
  margin: 0 0 6px;
  letter-spacing: -0.3px;
}
.landing-subtitle {
  font-size: 15px;
  color: var(--text-muted);
  margin: 0 0 28px;
  line-height: 1.5;
}

/* ---- Form Groups ---- */
.landing-form-group {
  text-align: left;
  margin-bottom: 16px;
}
.landing-form-group label {
  display: block;
  font-size: 13px;
  font-weight: 600;
  color: var(--text-color);
  margin-bottom: 5px;
}

/* ---- Inputs ---- */
.landing-input {
  width: 100%;
  padding: 10px 14px;
  font-size: 14px;
  border: 1px solid #d1d5db;
  border-radius: var(--radius);
  background: #fff;
  color: var(--text-color);
  outline: none;
  transition: border-color 0.2s, box-shadow 0.2s;
  box-sizing: border-box;
}
.landing-input:hover {
  border-color: #9ca3af;
}
.landing-input:focus {
  border-color: var(--primary-color);
  box-shadow: 0 0 0 3px rgba(var(--primary-rgb), 0.1);
}

/* ---- Password Toggle ---- */
.landing-input-wrapper {
  position: relative;
}
.landing-input-wrapper .landing-input {
  padding-right: 42px;
}
.landing-pw-toggle {
  position: absolute;
  right: 4px;
  top: 50%;
  transform: translateY(-50%);
  background: none;
  border: none;
  padding: 6px 8px;
  cursor: pointer;
  color: var(--text-light);
  font-size: 14px;
  line-height: 1;
  transition: color 0.2s;
}
.landing-pw-toggle:hover {
  color: var(--text-muted);
}

/* ---- Buttons ---- */
.landing-btn {
  width: 100%;
  padding: 11px 0;
  font-size: 15px;
  font-weight: 600;
  border: none;
  border-radius: var(--radius);
  cursor: pointer;
  transition: background 0.2s, transform 0.15s, box-shadow 0.2s;
  margin-top: 4px;
}
.landing-btn-primary {
  background: var(--primary-color);
  color: #fff;
  box-shadow: 0 1px 3px rgba(var(--primary-rgb), 0.3);
}
.landing-btn-primary:hover {
  background: var(--primary-hover);
  transform: translateY(-1px);
  box-shadow: 0 4px 8px rgba(var(--primary-rgb), 0.25);
}
.landing-btn-primary:active { transform: translateY(0); box-shadow: 0 1px 3px rgba(var(--primary-rgb), 0.3); }
.landing-btn:disabled {
  opacity: 0.6;
  cursor: not-allowed;
  transform: none !important;
}
.landing-btn .spinner {
  display: inline-block;
  width: 16px; height: 16px;
  border: 2px solid rgba(255,255,255,0.3);
  border-top-color: #fff;
  border-radius: 50%;
  animation: spin 0.6s linear infinite;
  vertical-align: middle;
  margin-right: 6px;
}
@keyframes spin { to { transform: rotate(360deg); } }

/* ---- Divider & Social Buttons ---- */
.landing-divider {
  display: flex;
  align-items: center;
  margin: 16px 0;
  color: var(--text-muted);
  font-size: 12px;
}
.landing-divider::before,
.landing-divider::after {
  content: '';
  flex: 1;
  height: 1px;
  background: var(--border-color);
}
.landing-divider span {
  padding: 0 12px;
  text-transform: uppercase;
  letter-spacing: 0.5px;
}
.landing-btn-google {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  background: #fff;
  color: #3c4043;
  border: 1px solid #e5e7eb;
  font-weight: 500;
}
.landing-btn-google:hover {
  background: #f9fafb;
  border-color: #d1d5db;
  box-shadow: 0 1px 3px rgba(0,0,0,0.06);
}
.landing-btn-google:active { transform: scale(0.98); }
.landing-btn-google .google-icon { flex-shrink: 0; }
.landing-btn-microsoft {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  background: #fff;
  color: #5e5e5e;
  border: 1px solid #e5e7eb;
  font-weight: 500;
  margin-top: 8px;
}
.landing-btn-microsoft:hover {
  background: #f9fafb;
  border-color: #d1d5db;
  box-shadow: 0 1px 3px rgba(0,0,0,0.06);
}
.landing-btn-microsoft:active { transform: scale(0.98); }
.landing-btn-microsoft .microsoft-icon { flex-shrink: 0; }

/* ---- Switch Links ---- */
.landing-switch {
  font-size: 13px;
  color: var(--text-muted);
  margin: 18px 0 0;
}
.landing-switch a {
  color: var(--primary-color);
  font-weight: 600;
  text-decoration: none;
}
.landing-switch a:hover { text-decoration: underline; }

/* ---- Footer ---- */
.landing-footer {
  font-size: 12px;
  color: var(--text-light);
  margin-top: 20px;
  text-align: center;
}
.landing-legal-links { margin-top: 6px; }
.landing-legal-links a {
  color: var(--text-muted);
  text-decoration: none;
}
.landing-legal-links a:hover { text-decoration: underline; }

/* ---- Error ---- */
.landing-error {
  color: var(--danger);
  font-size: 13px;
  margin-bottom: 12px;
  display: none;
  text-align: left;
  background: rgba(239, 68, 68, 0.08);
  padding: 10px 14px;
  border-radius: var(--radius-sm);
  border: 1px solid rgba(239, 68, 68, 0.2);
}
.landing-error.visible {
  display: block;
  animation: errorShake 0.4s ease;
}
@keyframes errorShake {
  0%, 100% { transform: translateX(0); }
  20% { transform: translateX(-6px); }
  40% { transform: translateX(5px); }
  60% { transform: translateX(-3px); }
  80% { transform: translateX(2px); }
}

/* ---- Success ---- */
.landing-success-icon {
  font-size: 48px;
  color: var(--success);
  margin-bottom: 16px;
  text-align: center;
}
.landing-success-text {
  font-size: 14px;
  color: var(--text-color);
  margin-bottom: 24px;
  line-height: 1.5;
  text-align: center;
}

/* ---- Form Transitions ---- */
.landing-form {
  display: none;
}
.landing-form.auth-active {
  display: block;
  animation: authFormIn 0.3s ease forwards;
}
@keyframes authFormIn {
  from { opacity: 0; transform: translateY(8px); }
  to   { opacity: 1; transform: translateY(0); }
}

/* ---- Email Verification (.ev-) styles ---- */
.ev-icon-wrap {
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0 auto 16px;
  width: 64px;
  height: 64px;
  border-radius: 50%;
  background: var(--bg-secondary, #f5f5f5);
}
.ev-icon {
  font-size: 28px;
  color: var(--primary, #635bff);
}
.ev-icon-wrap .fa-check-circle { color: var(--success, #22c55e); }
.ev-icon-wrap .fa-times-circle { color: var(--danger, #ef4444); }
.ev-heading {
  font-size: 20px;
  font-weight: 600;
  text-align: center;
  margin: 0 0 8px;
  color: var(--text-primary, #1a1a2e);
}
.ev-description {
  font-size: 14px;
  color: var(--text-secondary, #64748b);
  text-align: center;
  margin: 0 0 8px;
  line-height: 1.5;
}
.ev-email {
  font-size: 14px;
  font-weight: 600;
  color: var(--text-primary, #1a1a2e);
  text-align: center;
  margin: 0 0 12px;
  word-break: break-all;
}
.ev-resend-status {
  font-size: 13px;
  text-align: center;
  margin: 8px 0 0;
  min-height: 20px;
}
.ev-resend-status.success { color: var(--success, #22c55e); }
.ev-resend-status.error { color: var(--danger, #ef4444); }
.ev-spinner {
  width: 32px;
  height: 32px;
  border: 3px solid var(--bg-secondary, #e2e8f0);
  border-top-color: var(--primary, #635bff);
  border-radius: 50%;
  animation: spin 0.8s linear infinite;
}

/* ---- Responsive: Tablet ≤1024px ---- */
@media (max-width: 1024px) {
  .landing-brand-panel { flex: 0 0 40%; }
  .landing-brand-tagline { font-size: 26px; }
  .landing-brand-content { padding: 36px; }
}

/* ---- Responsive: Mobile ≤768px ---- */
@media (max-width: 768px) {
  .landing-brand-panel { display: none; }
  .landing-form-panel { padding: 32px 24px; }
  .landing-logo { display: block; }
  .landing-title { text-align: center; }
  .landing-subtitle { text-align: center; }
  .landing-card { max-width: 440px; }
}

/* ---- Responsive: Small ≤480px ---- */
@media (max-width: 480px) {
  .landing-form-panel { padding: 24px 16px; }
}

/* App Loading Overlay */
.app-loading-overlay {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: var(--bg-color);
  z-index: 99999;
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 1;
  visibility: visible;
  transition: opacity 0.3s ease, visibility 0.3s ease;
}

.app-loading-overlay.hidden {
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
}

.app-loading-content {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 16px;
}

.app-loading-spinner {
  width: 40px;
  height: 40px;
  border: 3px solid var(--border-color);
  border-top-color: var(--primary-color);
  border-radius: 50%;
  animation: app-spin 0.8s linear infinite;
}

@keyframes app-spin {
  to { transform: rotate(360deg); }
}

.app-loading-text {
  font-size: 14px;
  font-weight: 500;
  color: var(--text-muted);
}

/* Hide main content while loading */
body.app-loading .header,
body.app-loading .sidebar,
body.app-loading .main-content {
  opacity: 0;
  visibility: hidden;
}

body:not(.app-loading) .header,
body:not(.app-loading) .sidebar,
body:not(.app-loading) .main-content {
  opacity: 1;
  visibility: visible;
  transition: opacity 0.2s ease;
}

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

html, body {
  height: 100%;
  font-family: var(--font-family);
  font-size: 14px;
  line-height: 1.5;
  color: var(--text-color);
  background: var(--bg-color);
  -webkit-font-smoothing: antialiased;
  overflow: hidden;
}

/* ========================================
   Header
   ======================================== */
.header {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  height: var(--header-height);
  background: var(--panel-bg);
  border-bottom: 1px solid var(--border-color);
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 16px 0 12px;
  z-index: 100;
}

.header-left {
  display: flex;
  align-items: center;
  gap: 16px;
}

/* Mobile menu toggle - hidden by default on desktop */
.mobile-menu-toggle {
  display: none;
  width: 40px;
  height: 40px;
  align-items: center;
  justify-content: center;
  background: transparent;
  border: none;
  color: var(--text-color);
  font-size: 20px;
  cursor: pointer;
  border-radius: var(--radius-sm);
  transition: var(--transition);
}

.mobile-menu-toggle:hover {
  background: var(--bg-color);
}

.mobile-menu-toggle:active {
  transform: scale(0.95);
}

.logo {
  display: flex;
  align-items: center;
}

.logo-image {
  height: 40px;
  width: auto;
}

.workspace-dropdown-container {
  position: relative;
}

.workspace-select {
  padding: 8px 32px 8px 12px;
  border: 1px solid var(--border-color);
  border-radius: var(--radius-sm);
  background: var(--panel-bg) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Cpath fill='%236b7280' d='M3 4.5L6 7.5L9 4.5'/%3E%3C/svg%3E") no-repeat right 10px center;
  font-size: 13px;
  color: var(--text-color);
  cursor: pointer;
  appearance: none;
  min-width: 160px;
}

.header-center {
  flex: 1;
  display: flex;
  justify-content: center;
  align-items: center;
  padding: 0 24px;
}

/* App Info Bar (next to account switcher) */
.app-info-bar {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-left: 12px;
}
.app-info-divider {
  width: 1px;
  height: 20px;
  background: var(--border-color);
}
.app-info-name {
  font-size: 13px;
  font-weight: 600;
  color: var(--text-primary);
  max-width: 180px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.app-info-type {
  font-size: 11px;
  font-weight: 500;
  padding: 2px 8px;
  border-radius: 10px;
  background: rgba(99,102,241,0.1);
  color: var(--primary);
}

/* Header Action Buttons (Export, Commit) */
.header-action-btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 6px 14px;
  background: transparent;
  border: 1px solid var(--border-color);
  border-radius: 8px;
  cursor: pointer;
  font-size: 13px;
  font-weight: 500;
  color: var(--text-secondary);
  transition: all 0.15s;
  margin: 0 4px;
}
.header-action-btn:hover {
  background: var(--hover-bg);
  color: var(--text-primary);
  border-color: var(--primary);
}
.header-action-btn i {
  font-size: 14px;
}

.search-container {
  position: relative;
  width: 100%;
  max-width: 480px;
}

.search-icon {
  position: absolute;
  left: 12px;
  top: 50%;
  transform: translateY(-50%);
  color: var(--text-muted);
  font-size: 14px;
}

.search-input {
  width: 100%;
  height: 40px;
  padding: 0 16px 0 40px;
  border: 1px solid var(--border-color);
  border-radius: 20px;
  background: var(--bg-color);
  font-size: 14px;
  color: var(--text-color);
  outline: none;
  transition: var(--transition);
}

.search-input:focus {
  border-color: var(--primary-color);
  background: var(--panel-bg);
  box-shadow: 0 0 0 3px rgba(45, 43, 135, 0.1);
}

.header-right {
  display: flex;
  align-items: center;
}

.header-actions {
  display: flex;
  align-items: center;
  gap: 8px;
}

.header-btn {
  width: 36px;
  height: 36px;
  border: none;
  background: transparent;
  color: var(--text-muted);
  cursor: pointer;
  border-radius: var(--radius-sm);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 16px;
  transition: var(--transition);
}

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

.header-btn.ai-btn {
  width: 40px;
  height: 40px;
  background: var(--panel-bg);
  border: 1px solid var(--border-color);
  border-radius: var(--radius);
  box-shadow: var(--shadow-sm);
}

.header-btn.ai-btn:hover {
  background: var(--bg-color);
  box-shadow: var(--shadow-md);
}

.ai-icon {
  width: 24px;
  height: 24px;
  border-radius: 50%;
  height: 20px;
  border-radius: 50%;
}

.notification-container {
  position: relative;
}

.notification-badge {
  position: absolute;
  top: 4px;
  right: 4px;
  min-width: 16px;
  height: 16px;
  padding: 0 4px;
  background: var(--danger);
  color: white;
  font-size: 10px;
  font-weight: 600;
  border-radius: 8px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.user-menu {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  background: linear-gradient(135deg, #4f46e5, #7c3aed);
  color: white;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
  transition: var(--transition);
}

.user-menu:hover {
  transform: scale(1.05);
}

.user-initial {
  text-transform: uppercase;
}

.user-avatar-img {
  width: 100%;
  height: 100%;
  border-radius: 50%;
  object-fit: cover;
}

/* Notification Dropdown */
.notification-dropdown {
  position: absolute;
  top: calc(100% + 8px);
  right: 0;
  width: 360px;
  background: white;
  border-radius: 12px;
  box-shadow: 0 10px 40px rgba(0, 0, 0, 0.15), 0 2px 10px rgba(0, 0, 0, 0.1);
  border: 1px solid var(--border-color);
  z-index: 1000;
  display: none;
  overflow: hidden;
}

.notification-dropdown.show {
  display: block;
}

.notification-dropdown-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 14px 16px;
  border-bottom: 1px solid var(--border-color);
  background: #f8fafc;
}

.notification-dropdown-header span {
  font-weight: 600;
  font-size: 14px;
  color: var(--text-color);
}

.mark-all-read-btn {
  background: none;
  border: none;
  color: var(--primary-color);
  font-size: 12px;
  font-weight: 500;
  cursor: pointer;
  padding: 4px 8px;
  border-radius: 4px;
}

.mark-all-read-btn:hover {
  background: rgba(45, 43, 135, 0.1);
}

.notification-dropdown-list {
  max-height: 320px;
  overflow-y: auto;
}

.notification-item {
  display: flex;
  gap: 12px;
  padding: 14px 16px;
  border-bottom: 1px solid var(--border-light);
  cursor: pointer;
  transition: background 0.15s ease;
}

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

.notification-item:hover {
  background: #f8fafc;
}

.notification-item.unread {
  background: rgba(45, 43, 135, 0.03);
}

.notification-item.unread::before {
  content: '';
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  width: 3px;
  background: var(--primary-color);
}

.notification-item {
  position: relative;
}

.notification-icon {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  background: rgba(45, 43, 135, 0.1);
  color: var(--primary-color);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.notification-icon.success {
  background: rgba(34, 197, 94, 0.1);
  color: #22c55e;
}

.notification-icon.warning {
  background: rgba(234, 179, 8, 0.1);
  color: #eab308;
}

.notification-icon.error {
  background: rgba(239, 68, 68, 0.1);
  color: #ef4444;
}

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

.notification-title {
  font-size: 13px;
  font-weight: 500;
  color: var(--text-color);
  margin-bottom: 2px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.notification-desc {
  font-size: 12px;
  color: var(--text-muted);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.notification-time {
  font-size: 11px;
  color: var(--text-light);
  margin-top: 4px;
}

.notification-dropdown-footer {
  padding: 12px 16px;
  border-top: 1px solid var(--border-color);
  background: #f8fafc;
  text-align: center;
}

.show-all-notifications-btn {
  color: var(--primary-color);
  font-size: 13px;
  font-weight: 500;
  text-decoration: none;
}

.show-all-notifications-btn:hover {
  text-decoration: underline;
}

.notification-empty {
  padding: 32px 16px;
  text-align: center;
  color: var(--text-muted);
}

.notification-empty i {
  font-size: 32px;
  margin-bottom: 12px;
  color: var(--text-light);
}

/* User Menu Dropdown */
.user-menu-container {
  position: relative;
}

.user-dropdown {
  position: absolute;
  top: calc(100% + 8px);
  right: 0;
  width: 280px;
  background: white;
  border-radius: 12px;
  box-shadow: 0 10px 40px rgba(0, 0, 0, 0.15), 0 2px 10px rgba(0, 0, 0, 0.1);
  border: 1px solid var(--border-color);
  z-index: 1000;
  display: none;
  overflow: hidden;
}

.user-dropdown.show {
  display: block;
}

.user-dropdown-header {
  display: flex;
  gap: 12px;
  padding: 16px;
  background: #f8fafc;
}

.user-dropdown-avatar {
  width: 48px;
  height: 48px;
  border-radius: 50%;
  background: linear-gradient(135deg, #4f46e5, #7c3aed);
  color: white;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 18px;
  font-weight: 600;
  flex-shrink: 0;
}

.user-dropdown-info {
  flex: 1;
  min-width: 0;
}

.user-dropdown-name {
  font-size: 15px;
  font-weight: 600;
  color: var(--text-color);
  margin-bottom: 2px;
}

.user-dropdown-role {
  font-size: 12px;
  color: var(--primary-color);
  font-weight: 500;
  margin-bottom: 2px;
}

.user-dropdown-email {
  font-size: 12px;
  color: var(--text-muted);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.user-dropdown-divider {
  height: 1px;
  background: var(--border-color);
}

.user-dropdown-logout {
  display: flex;
  align-items: center;
  gap: 10px;
  width: 100%;
  padding: 14px 16px;
  background: none;
  border: none;
  font-size: 14px;
  color: #ef4444;
  cursor: pointer;
  transition: background 0.15s ease;
}

.user-dropdown-logout:hover {
  background: rgba(239, 68, 68, 0.05);
}

.user-dropdown-logout i {
  font-size: 16px;
}

/* ========================================
   Account Switcher (Header Dropdown)
   ======================================== */
.account-switcher-container {
  position: relative;
  margin-left: 12px;
}

.account-switcher-trigger {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 6px 12px;
  background: var(--panel-bg, #fff);
  border: 1px solid var(--border-color, #e2e8f0);
  border-radius: 20px;
  cursor: pointer;
  font-size: 13px;
  font-weight: 500;
  color: var(--text-primary, #1e293b);
  max-width: 200px;
  transition: border-color 0.15s, box-shadow 0.15s;
}

.account-switcher-trigger:hover {
  border-color: var(--primary, #6366f1);
}

.account-switcher-container.open .account-switcher-trigger {
  border-color: var(--primary, #6366f1);
  box-shadow: 0 0 0 2px rgba(99,102,241,0.15);
}

.account-switcher-name {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.account-switcher-arrow {
  font-size: 10px;
  color: var(--text-secondary, #64748b);
  transition: transform 0.2s;
}

.account-switcher-container.open .account-switcher-arrow {
  transform: rotate(180deg);
}

.account-switcher-dropdown {
  display: none;
  position: absolute;
  top: calc(100% + 6px);
  left: 0;
  width: 300px;
  background: var(--panel-bg, #fff);
  border: 1px solid var(--border-color, #e2e8f0);
  border-radius: 12px;
  box-shadow: 0 8px 24px rgba(0,0,0,0.12);
  z-index: 200;
  overflow: hidden;
}

.account-switcher-dropdown.show {
  display: block;
}

.account-switcher-dropdown-header {
  padding: 12px 16px;
  font-size: 12px;
  font-weight: 600;
  color: var(--text-secondary, #64748b);
  text-transform: uppercase;
  letter-spacing: 0.05em;
  border-bottom: 1px solid var(--border-color, #e2e8f0);
}

.account-switcher-list {
  max-height: 280px;
  overflow-y: auto;
}

.account-switcher-item {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 10px 16px;
  cursor: pointer;
  transition: background 0.15s;
}

.account-switcher-item:hover {
  background: var(--hover-bg, #f8fafc);
}

.account-switcher-item.active {
  background: rgba(99,102,241,0.06);
}

.account-switcher-item-logo {
  width: 36px;
  height: 36px;
  border-radius: 8px;
  background: var(--primary, #6366f1);
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 14px;
  font-weight: 600;
  flex-shrink: 0;
  overflow: hidden;
}

.account-switcher-item-logo img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.account-switcher-item-info {
  flex: 1;
  min-width: 0;
}

.account-switcher-item-name {
  font-size: 14px;
  font-weight: 500;
  color: var(--text-primary, #1e293b);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.account-switcher-item-role {
  font-size: 12px;
  color: var(--text-secondary, #64748b);
  text-transform: capitalize;
}

.account-switcher-item-check {
  color: var(--primary, #6366f1);
  font-size: 14px;
  flex-shrink: 0;
  opacity: 0;
}

.account-switcher-item.active .account-switcher-item-check {
  opacity: 1;
}

.account-leave-btn {
  display: none;
  align-items: center;
  gap: 4px;
  padding: 4px 8px;
  border: 1px solid var(--border-color, #e2e8f0);
  border-radius: 6px;
  background: transparent;
  color: var(--text-secondary, #64748b);
  font-size: 11px;
  cursor: pointer;
  flex-shrink: 0;
  transition: color 0.15s, border-color 0.15s, background 0.15s;
}

.account-switcher-item:hover .account-leave-btn {
  display: inline-flex;
}

.account-leave-btn:hover {
  color: #dc2626;
  border-color: #fecaca;
  background: #fef2f2;
}

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

/* Account Selection Modal (login) */
.account-select-list {
  padding: 8px 0;
}

.account-select-item {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 14px 20px;
  cursor: pointer;
  transition: background 0.15s;
}

.account-select-item:hover {
  background: var(--hover-bg, #f8fafc);
}

.account-select-item-logo {
  width: 48px;
  height: 48px;
  border-radius: 10px;
  background: var(--primary, #6366f1);
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 18px;
  font-weight: 600;
  flex-shrink: 0;
  overflow: hidden;
}

.account-select-item-logo img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.account-select-item-info {
  flex: 1;
  min-width: 0;
}

.account-select-item-name {
  font-size: 16px;
  font-weight: 500;
  color: var(--text-primary, #1e293b);
}

.account-select-item-role {
  font-size: 13px;
  color: var(--text-secondary, #64748b);
  text-transform: capitalize;
}

.account-select-item-arrow {
  color: var(--text-secondary, #64748b);
  font-size: 14px;
  flex-shrink: 0;
}

/* ========================================
   Invitations (Pending Invitation Cards)
   ======================================== */
.invitation-container {
  position: relative;
}

.inv-section-label {
  padding: 10px 20px 6px;
  font-size: 11px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--text-secondary, #64748b);
}

.inv-card {
  display: flex;
  align-items: flex-start;
  gap: 14px;
  padding: 14px 20px;
  border-bottom: 1px solid var(--border-color, #e2e8f0);
  transition: background 0.15s;
}

.inv-card:last-child {
  border-bottom: none;
}

.inv-card-icon {
  width: 42px;
  height: 42px;
  border-radius: 10px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 15px;
  font-weight: 600;
  flex-shrink: 0;
  color: #fff;
  overflow: hidden;
}

.inv-card-icon.account {
  background: var(--primary, #6366f1);
}

.inv-card-icon.application {
  background: #0ea5e9;
}

.inv-card-icon img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

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

.inv-card-name {
  font-size: 14px;
  font-weight: 600;
  color: var(--text-primary, #1e293b);
  margin-bottom: 2px;
}

.inv-card-meta {
  font-size: 12px;
  color: var(--text-secondary, #64748b);
  margin-bottom: 2px;
}

.inv-card-meta .inv-role {
  text-transform: capitalize;
  font-weight: 500;
}

.inv-card-message {
  font-size: 12px;
  font-style: italic;
  color: var(--text-secondary, #64748b);
  background: var(--hover-bg, #f8fafc);
  padding: 4px 8px;
  border-radius: 4px;
  margin-top: 4px;
}

.inv-card-actions {
  display: flex;
  gap: 6px;
  flex-shrink: 0;
  align-self: center;
}

.inv-btn {
  padding: 6px 14px;
  border-radius: 6px;
  font-size: 13px;
  font-weight: 500;
  border: none;
  cursor: pointer;
  transition: background 0.15s, opacity 0.15s;
}

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

.inv-btn.accept {
  background: #22c55e;
  color: #fff;
}

.inv-btn.accept:hover:not(:disabled) {
  background: #16a34a;
}

.inv-btn.decline {
  background: var(--hover-bg, #f1f5f9);
  color: var(--text-secondary, #64748b);
  border: 1px solid var(--border-color, #e2e8f0);
}

.inv-btn.decline:hover:not(:disabled) {
  background: #fee2e2;
  color: #dc2626;
  border-color: #fecaca;
}

.inv-empty {
  padding: 32px 20px;
  text-align: center;
  color: var(--text-secondary, #64748b);
}

.inv-empty i {
  font-size: 32px;
  margin-bottom: 12px;
  display: block;
  opacity: 0.4;
}

/* ========================================
   Sidebar Navigation (Collapsed by default)
   ======================================== */
.sidebar {
  position: fixed;
  top: var(--header-height);
  left: 0;
  width: var(--sidebar-width);
  height: calc(100vh - var(--header-height));
  background: var(--panel-bg);
  border-right: 1px solid var(--border-color);
  display: flex;
  flex-direction: column;
  z-index: 90;
  transition: width 0.2s ease;
  overflow-y: auto;
  scrollbar-width: none; /* Firefox */
  -ms-overflow-style: none; /* IE/Edge */
}

.sidebar::-webkit-scrollbar {
  display: none; /* Chrome, Safari, Opera */
}

.sidebar.collapsed {
  width: var(--sidebar-collapsed);
}

.nav {
  flex: 1;
  overflow-y: auto;
  scrollbar-width: none;
  -ms-overflow-style: none;
  padding: 8px;
}

.nav::-webkit-scrollbar {
  display: none;
}

.nav-list {
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.nav-item {
  position: relative;
}

.nav-link {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 10px 12px;
  border-radius: var(--radius-sm);
  color: var(--text-color);
  text-decoration: none;
  font-size: 13px;
  font-weight: 500;
  cursor: pointer;
  transition: var(--transition);
  white-space: nowrap;
  overflow: hidden;
}

.nav-link:hover {
  background: var(--bg-color);
}

.nav-link.active {
  background: rgba(45, 43, 135, 0.08);
  color: var(--primary-color);
}

.nav-icon {
  width: 20px;
  min-width: 20px;
  text-align: center;
  font-size: 16px;
  color: var(--text-muted);
}

.nav-link.active .nav-icon {
  color: var(--primary-color);
}

.nav-text {
  opacity: 1;
  transition: opacity 0.2s ease;
}

.sidebar.collapsed .nav-text {
  opacity: 0;
  width: 0;
  overflow: hidden;
}

.sidebar.collapsed .nav-link {
  justify-content: center;
  padding: 10px;
  gap: 0;
}

/* Tooltip for collapsed sidebar */
.nav-tooltip {
  position: fixed;
  left: calc(var(--sidebar-collapsed) + 8px);
  padding: 6px 12px;
  background: var(--text-color);
  color: white;
  font-size: 12px;
  font-weight: 500;
  border-radius: var(--radius-sm);
  white-space: nowrap;
  transform: translateY(-50%);
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.15s ease;
  z-index: 1000;
}

.nav-tooltip.show {
  opacity: 1;
}

.sidebar-footer {
  padding: 8px;
  border-top: 1px solid var(--border-color);
}

.sidebar-version {
  font-size: 10px;
  color: var(--text-muted, #94a3b8);
  text-align: center;
  padding: 2px 0 4px;
}

.menu-toggle {
  width: 100%;
  height: 36px;
  border: none;
  background: transparent;
  color: var(--text-muted);
  cursor: pointer;
  border-radius: var(--radius-sm);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 14px;
  transition: var(--transition);
}

.menu-toggle:hover {
  background: var(--bg-color);
  color: var(--text-color);
}

.sidebar.collapsed .menu-toggle i {
  transform: rotate(180deg);
}

/* ========================================
   Main Content Area
   ======================================== */
.main-content {
  margin-left: var(--sidebar-collapsed);
  margin-top: var(--header-height);
  height: calc(100vh - var(--header-height));
  padding: 0;
  transition: margin-left 0.2s ease, margin-right 0.2s ease;
  overflow-y: auto;
  overflow-x: hidden;
}

body.sidebar-expanded .main-content {
  margin-left: var(--sidebar-width);
}

body.ai-panel-open .main-content {
  margin-right: var(--ai-panel-width);
}

/* ========================================
   Dashboard Styles
   ======================================== */

.dashboard-container {
  padding: 16px 20px;
  max-width: 1600px;
  margin: 0 auto;
  padding-bottom: 32px;
}

/* Dashboard Header */
.dashboard-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 16px;
  padding: 16px 20px;
  background: var(--panel-bg);
  border-radius: 10px;
  border: 1px solid var(--border-color);
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.04);
}

.dashboard-header-left {
  flex: 1;
}

.dashboard-title {
  font-size: 18px;
  font-weight: 600;
  color: var(--text-color);
  margin: 0 0 2px 0;
  letter-spacing: -0.3px;
}

.dashboard-subtitle {
  font-size: 12px;
  color: var(--text-muted);
  margin: 0;
}

.dashboard-header-actions {
  display: flex;
  gap: 8px;
}

.btn-dashboard-ai {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 8px 14px;
  background: var(--bg-color);
  color: var(--text-color);
  border: 1px solid var(--border-color);
  border-radius: 6px;
  font-size: 12px;
  font-weight: 500;
  cursor: pointer;
  transition: all 0.2s ease;
}

.btn-dashboard-ai:hover {
  border-color: var(--primary-color);
  background: white;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
}

.btn-ai-icon {
  width: 18px;
  height: 18px;
  border-radius: 50%;
}

.btn-dashboard-primary {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 8px 14px;
  background: linear-gradient(135deg, var(--primary-color) 0%, #4f46e5 100%);
  color: white;
  border: none;
  border-radius: 6px;
  font-size: 12px;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.2s ease;
  box-shadow: 0 2px 6px rgba(99, 102, 241, 0.25);
}

.btn-dashboard-primary:hover {
  transform: translateY(-1px);
  box-shadow: 0 4px 12px rgba(99, 102, 241, 0.35);
}

/* Stats Row */
.dashboard-stats-row {
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  gap: 12px;
  margin-bottom: 16px;
}

.stat-card {
  background: var(--panel-bg);
  border: 1px solid var(--border-color);
  border-radius: 8px;
  padding: 12px 14px;
  display: flex;
  align-items: center;
  gap: 10px;
  position: relative;
  transition: all 0.2s ease;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.03);
}

.stat-card:hover {
  border-color: rgba(99, 102, 241, 0.3);
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05);
  transform: translateY(-1px);
}

.stat-icon {
  width: 36px;
  height: 36px;
  border-radius: 8px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 14px;
  flex-shrink: 0;
}

.stat-icon-apps {
  background: linear-gradient(135deg, rgba(99, 102, 241, 0.12) 0%, rgba(139, 92, 246, 0.12) 100%);
  color: #6366f1;
}

.stat-icon-builds {
  background: linear-gradient(135deg, rgba(34, 197, 94, 0.12) 0%, rgba(74, 222, 128, 0.12) 100%);
  color: #22c55e;
}

.stat-icon-issues {
  background: linear-gradient(135deg, rgba(249, 115, 22, 0.12) 0%, rgba(251, 146, 60, 0.12) 100%);
  color: #f97316;
}

.stat-icon-cost {
  background: linear-gradient(135deg, rgba(14, 165, 233, 0.12) 0%, rgba(56, 189, 248, 0.12) 100%);
  color: #0ea5e9;
}

.stat-icon-forecast {
  background: linear-gradient(135deg, rgba(168, 85, 247, 0.12) 0%, rgba(192, 132, 252, 0.12) 100%);
  color: #a855f7;
}

.stat-icon-tokens {
  background: linear-gradient(135deg, rgba(236, 72, 153, 0.12) 0%, rgba(244, 114, 182, 0.12) 100%);
  color: #ec4899;
}

.stat-content {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 0;
  min-width: 0;
}

.stat-value {
  font-size: 18px;
  font-weight: 700;
  color: var(--text-color);
  line-height: 1.2;
  letter-spacing: -0.3px;
}

.stat-label {
  font-size: 11px;
  color: var(--text-muted);
  font-weight: 500;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.stat-trend {
  position: absolute;
  top: 8px;
  right: 8px;
  font-size: 10px;
  font-weight: 600;
  display: flex;
  align-items: center;
  gap: 2px;
  padding: 2px 5px;
  border-radius: 4px;
}

.stat-trend-up {
  color: #22c55e;
  background: rgba(34, 197, 94, 0.1);
}

.stat-trend-down {
  color: #ef4444;
  background: rgba(239, 68, 68, 0.1);
}

.stat-trend-neutral {
  color: var(--text-muted);
  background: var(--bg-color);
}

/* Dashboard Grid */
.dashboard-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 24px;
}

.dashboard-card {
  background: var(--panel-bg);
  border: 1px solid var(--border-color);
  border-radius: 16px;
  overflow: hidden;
  transition: all 0.2s ease;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.04);
}

.dashboard-card:hover {
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.06);
}

.dashboard-card-lg {
  grid-column: span 1;
}

.dashboard-card-full {
  grid-column: span 2;
}

.dashboard-card-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 18px 24px;
  border-bottom: 1px solid var(--border-color);
  background: linear-gradient(180deg, var(--panel-bg) 0%, var(--bg-color) 100%);
}

.dashboard-card-header h3 {
  font-size: 15px;
  font-weight: 600;
  color: var(--text-color);
  margin: 0;
  display: flex;
  align-items: center;
  gap: 10px;
}

.dashboard-card-header h3 i {
  color: var(--primary-color);
  font-size: 16px;
}

.dashboard-card-action {
  background: var(--bg-color);
  border: 1px solid var(--border-color);
  color: var(--text-color);
  font-size: 13px;
  font-weight: 500;
  cursor: pointer;
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 8px 14px;
  border-radius: 8px;
  transition: all 0.2s ease;
}

.dashboard-card-action:hover {
  border-color: var(--primary-color);
  color: var(--primary-color);
  background: white;
}

.dashboard-card-badge {
  font-size: 12px;
  color: #22c55e;
  background: rgba(34, 197, 94, 0.1);
  padding: 6px 12px;
  border-radius: 20px;
  font-weight: 600;
}

.dashboard-card-timestamp {
  font-size: 12px;
  color: var(--text-muted);
  font-weight: 500;
}

.dashboard-select {
  padding: 8px 14px;
  border: 1px solid var(--border-color);
  border-radius: 8px;
  font-size: 13px;
  background: var(--panel-bg);
  color: var(--text-color);
  cursor: pointer;
  font-weight: 500;
}

.dashboard-select:hover {
  border-color: var(--primary-color);
}

.dashboard-card-body {
  padding: 24px;
  min-height: 220px;
}

.dashboard-empty-state {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  height: 180px;
  color: var(--text-muted);
  text-align: center;
  padding: 20px;
}

.dashboard-empty-state i {
  font-size: 40px;
  margin-bottom: 16px;
  opacity: 0.4;
  color: var(--primary-color);
}

.dashboard-empty-state p {
  margin: 0 0 20px 0;
  font-size: 15px;
  color: var(--text-muted);
}

/* Applications Grid in Dashboard */
.dashboard-apps-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
  gap: 16px;
}

.dashboard-app-card {
  background: var(--bg-color);
  border: 1px solid var(--border-color);
  border-radius: 12px;
  padding: 18px;
  cursor: pointer;
  transition: all 0.2s ease;
}

.dashboard-app-card:hover {
  border-color: var(--primary-color);
  box-shadow: 0 4px 12px rgba(99, 102, 241, 0.12);
  transform: translateY(-2px);
}

.dashboard-app-header {
  display: flex;
  align-items: center;
  gap: 14px;
  margin-bottom: 14px;
}

.dashboard-app-icon {
  width: 42px;
  height: 42px;
  border-radius: 10px;
  background: linear-gradient(135deg, #6366f1 0%, #8b5cf6 100%);
  display: flex;
  align-items: center;
  justify-content: center;
  color: white;
  font-size: 16px;
  box-shadow: 0 2px 8px rgba(99, 102, 241, 0.3);
}

.dashboard-app-name {
  font-size: 15px;
  font-weight: 600;
  color: var(--text-color);
  flex: 1;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.dashboard-app-status {
  font-size: 11px;
  padding: 5px 10px;
  border-radius: 12px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.3px;
}

.dashboard-app-status.active {
  background: rgba(34, 197, 94, 0.1);
  color: #22c55e;
}

.dashboard-app-status.draft {
  background: rgba(156, 163, 175, 0.1);
  color: #9ca3af;
}

.dashboard-app-status.building {
  background: rgba(249, 115, 22, 0.1);
  color: #f97316;
}

.dashboard-app-stats {
  display: flex;
  gap: 16px;
  font-size: 13px;
  color: var(--text-muted);
  margin-top: 12px;
  padding-top: 12px;
  border-top: 1px solid var(--border-color);
}

.dashboard-app-stat {
  display: flex;
  align-items: center;
  gap: 6px;
}

.dashboard-app-stat i {
  font-size: 12px;
  color: var(--primary-color);
}

/* Team List */
.dashboard-team-list {
  display: flex;
  flex-direction: column;
  gap: 14px;
}

.team-member-row {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 14px 16px;
  background: var(--bg-color);
  border-radius: 12px;
  border: 1px solid var(--border-color);
  transition: all 0.2s ease;
}

.team-member-row:hover {
  border-color: var(--primary-color);
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.04);
}

.team-avatar {
  width: 42px;
  height: 42px;
  border-radius: 50%;
  background: linear-gradient(135deg, #f97316 0%, #fb923c 100%);
  display: flex;
  align-items: center;
  justify-content: center;
  color: white;
  font-size: 15px;
  font-weight: 600;
  box-shadow: 0 2px 8px rgba(249, 115, 22, 0.3);
}

.team-avatar.online::after {
  content: '';
  position: absolute;
  bottom: 2px;
  right: 2px;
  width: 12px;
  height: 12px;
  background: #22c55e;
  border: 2px solid var(--panel-bg);
  border-radius: 50%;
}

.team-member-info {
  flex: 1;
}

.team-member-name {
  font-size: 15px;
  font-weight: 600;
  color: var(--text-color);
}

.team-member-role {
  font-size: 13px;
  color: var(--text-muted);
  margin-top: 2px;
}

.team-member-contrib {
  text-align: right;
  background: rgba(99, 102, 241, 0.08);
  padding: 10px 16px;
  border-radius: 10px;
}

.team-member-commits {
  font-size: 18px;
  font-weight: 700;
  color: var(--primary-color);
  display: block;
}

.team-member-label {
  font-size: 11px;
  color: var(--text-muted);
  font-weight: 500;
}

/* Blueprint Templates Carousel */
.bp-carousel {
  position: relative;
  display: flex;
  align-items: center;
  gap: 12px;
}

.bp-carousel-track-wrapper {
  flex: 1;
  overflow: hidden;
  min-width: 0;
}

.bp-carousel-track {
  display: flex;
  gap: 18px;
  transition: transform 0.45s cubic-bezier(0.25, 0.46, 0.45, 0.94);
  will-change: transform;
  cursor: grab;
}

.bp-carousel-track.dragging {
  transition: none;
  cursor: grabbing;
}

.bp-carousel-arrow {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  border: 1px solid var(--border-color);
  background: var(--panel-bg);
  color: var(--text-color);
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 14px;
  flex-shrink: 0;
  transition: all 0.25s ease;
  box-shadow: 0 2px 8px rgba(0,0,0,0.06);
  z-index: 2;
}

.bp-carousel-arrow:hover:not(:disabled) {
  border-color: var(--primary-color);
  color: #fff;
  background: var(--primary-color);
  box-shadow: 0 4px 14px rgba(99,102,241,0.25);
  transform: scale(1.08);
}

.bp-carousel-arrow:disabled {
  opacity: 0.25;
  cursor: default;
}

/* Template Card */
.bp-tpl-card {
  flex: 0 0 270px;
  background: var(--panel-bg);
  border: 1px solid var(--border-color);
  border-radius: 16px;
  padding: 0;
  display: flex;
  flex-direction: column;
  cursor: pointer;
  transition: all 0.25s cubic-bezier(0.25, 0.46, 0.45, 0.94);
  overflow: hidden;
  min-height: 320px;
}

.bp-tpl-card:hover {
  border-color: var(--primary-color);
  box-shadow: 0 8px 28px rgba(99,102,241,0.14);
  transform: translateY(-4px);
}

.bp-tpl-card:hover .bp-tpl-preview-btn {
  opacity: 1;
  transform: translateY(0);
}

/* Card header with gradient background */
.bp-tpl-header {
  position: relative;
  padding: 22px 20px 18px;
  background: linear-gradient(135deg, var(--tpl-color) 0%, var(--tpl-color-end) 100%);
  overflow: hidden;
}

.bp-tpl-header::before {
  content: '';
  position: absolute;
  top: -20px;
  right: -20px;
  width: 80px;
  height: 80px;
  border-radius: 50%;
  background: rgba(255,255,255,0.12);
}

.bp-tpl-header::after {
  content: '';
  position: absolute;
  bottom: -30px;
  left: -10px;
  width: 60px;
  height: 60px;
  border-radius: 50%;
  background: rgba(255,255,255,0.08);
}

.bp-tpl-icon {
  width: 48px;
  height: 48px;
  border-radius: 12px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 20px;
  color: #fff;
  background: rgba(255,255,255,0.22);
  backdrop-filter: blur(4px);
  position: relative;
  z-index: 1;
}

/* Card body */
.bp-tpl-body {
  padding: 16px 20px 18px;
  display: flex;
  flex-direction: column;
  gap: 8px;
  flex: 1;
}

.bp-tpl-name {
  font-size: 15px;
  font-weight: 700;
  color: var(--text-color);
  line-height: 1.3;
}

.bp-tpl-desc {
  font-size: 12.5px;
  color: var(--text-muted);
  line-height: 1.5;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

/* Meta row: complexity + time */
.bp-tpl-meta {
  display: flex;
  gap: 12px;
  margin-top: 4px;
}

.bp-tpl-meta-item {
  display: flex;
  align-items: center;
  gap: 5px;
  font-size: 11px;
  color: var(--text-muted);
}

.bp-tpl-meta-item i {
  font-size: 10px;
}

.bp-tpl-complexity {
  display: inline-flex;
  gap: 2px;
}

.bp-tpl-complexity-dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--border-color);
}

.bp-tpl-complexity-dot.filled {
  background: var(--tpl-accent);
}

/* Tags + Preview row */
.bp-tpl-footer {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  margin-top: auto;
  padding: 0 20px 16px;
  gap: 8px;
}

.bp-tpl-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
  flex: 1;
}

.bp-tpl-tag {
  font-size: 10px;
  font-weight: 600;
  padding: 3px 8px;
  border-radius: 4px;
  background: rgba(99,102,241,0.07);
  color: var(--primary-color);
  letter-spacing: 0.2px;
}

.bp-tpl-preview-btn {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  font-size: 12px;
  font-weight: 600;
  color: var(--primary-color);
  background: rgba(99,102,241,0.08);
  border: none;
  padding: 6px 14px;
  border-radius: 8px;
  cursor: pointer;
  transition: all 0.2s ease;
  opacity: 0;
  transform: translateY(4px);
  flex-shrink: 0;
  white-space: nowrap;
}

.bp-tpl-preview-btn:hover {
  background: var(--primary-color);
  color: #fff;
}

/* ---- Template Preview Drawer ---- */
.bp-drawer-overlay {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0.35);
  z-index: 2000;
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.3s ease, visibility 0.3s ease;
}

.bp-drawer-overlay.open {
  opacity: 1;
  visibility: visible;
}

.bp-drawer {
  position: fixed;
  top: 0;
  right: 0;
  width: 520px;
  max-width: 92vw;
  height: 100vh;
  background: var(--panel-bg);
  box-shadow: -6px 0 30px rgba(0,0,0,0.15);
  z-index: 2001;
  transform: translateX(100%);
  transition: transform 0.35s cubic-bezier(0.25, 0.46, 0.45, 0.94);
  display: flex;
  flex-direction: column;
  overflow: hidden;
}

.bp-drawer.open {
  transform: translateX(0);
}

.bp-drawer-header {
  padding: 28px 28px 20px;
  background: linear-gradient(135deg, var(--tpl-color) 0%, var(--tpl-color-end) 100%);
  color: #fff;
  position: relative;
  overflow: hidden;
}

.bp-drawer-header::before {
  content: '';
  position: absolute;
  top: -30px;
  right: -30px;
  width: 120px;
  height: 120px;
  border-radius: 50%;
  background: rgba(255,255,255,0.1);
}

.bp-drawer-close {
  position: absolute;
  top: 16px;
  right: 16px;
  width: 34px;
  height: 34px;
  border-radius: 50%;
  border: none;
  background: rgba(255,255,255,0.18);
  color: #fff;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 16px;
  transition: background 0.2s ease;
  z-index: 1;
}

.bp-drawer-close:hover {
  background: rgba(255,255,255,0.3);
}

.bp-drawer-icon {
  width: 56px;
  height: 56px;
  border-radius: 14px;
  background: rgba(255,255,255,0.2);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 24px;
  margin-bottom: 14px;
  position: relative;
  z-index: 1;
}

.bp-drawer-title {
  font-size: 22px;
  font-weight: 700;
  margin: 0 0 6px;
  position: relative;
  z-index: 1;
}

.bp-drawer-subtitle {
  font-size: 13.5px;
  opacity: 0.85;
  line-height: 1.5;
  position: relative;
  z-index: 1;
}

.bp-drawer-body {
  flex: 1;
  overflow-y: auto;
  padding: 24px 28px 28px;
}

.bp-drawer-section {
  margin-bottom: 24px;
}

.bp-drawer-section:last-child {
  margin-bottom: 0;
}

.bp-drawer-section-title {
  font-size: 13px;
  font-weight: 700;
  color: var(--text-color);
  text-transform: uppercase;
  letter-spacing: 0.5px;
  margin-bottom: 12px;
  display: flex;
  align-items: center;
  gap: 8px;
}

.bp-drawer-section-title i {
  color: var(--primary-color);
  font-size: 13px;
}

/* Feature list in drawer */
.bp-drawer-features {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
}

.bp-drawer-feature {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 13px;
  color: var(--text-color);
  padding: 8px 10px;
  background: var(--bg-color);
  border-radius: 8px;
  border: 1px solid var(--border-color);
}

.bp-drawer-feature i {
  color: #22c55e;
  font-size: 11px;
  flex-shrink: 0;
}

/* Stack items in drawer */
.bp-drawer-stack {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.bp-drawer-stack-item {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 6px 12px;
  background: var(--bg-color);
  border: 1px solid var(--border-color);
  border-radius: 8px;
  font-size: 12.5px;
  font-weight: 500;
  color: var(--text-color);
}

.bp-drawer-stack-item i {
  font-size: 13px;
  color: var(--primary-color);
}

/* Meta grid in drawer */
.bp-drawer-meta-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
}

.bp-drawer-meta-card {
  padding: 14px;
  background: var(--bg-color);
  border-radius: 10px;
  border: 1px solid var(--border-color);
  text-align: center;
}

.bp-drawer-meta-value {
  font-size: 18px;
  font-weight: 700;
  color: var(--text-color);
  display: block;
}

.bp-drawer-meta-label {
  font-size: 11px;
  color: var(--text-muted);
  text-transform: uppercase;
  letter-spacing: 0.3px;
  margin-top: 2px;
}

/* Drawer footer */
.bp-drawer-footer {
  padding: 16px 28px;
  border-top: 1px solid var(--border-color);
  display: flex;
  gap: 10px;
}

.bp-drawer-footer .btn-primary {
  flex: 1;
  padding: 12px 20px;
  font-size: 14px;
  font-weight: 600;
  border: none;
  border-radius: 10px;
  background: var(--primary-color);
  color: #fff;
  cursor: pointer;
  transition: all 0.2s ease;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
}

.bp-drawer-footer .btn-primary:hover {
  background: var(--primary-hover);
  box-shadow: 0 4px 14px rgba(99,102,241,0.3);
}

.bp-drawer-footer .btn-outline {
  padding: 12px 20px;
  font-size: 14px;
  font-weight: 600;
  border: 1px solid var(--border-color);
  border-radius: 10px;
  background: transparent;
  color: var(--text-color);
  cursor: pointer;
  transition: all 0.2s ease;
}

.bp-drawer-footer .btn-outline:hover {
  border-color: var(--primary-color);
  color: var(--primary-color);
}

.btn-xs {
  padding: 6px 12px;
  font-size: 12px;
  font-weight: 600;
  border: none;
  border-radius: 6px;
  background: white;
  color: var(--text-color);
  cursor: pointer;
  transition: all 0.2s ease;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
}

.btn-xs:hover {
  background: var(--primary-color);
  color: white;
}

.btn-sm {
  padding: 10px 18px;
  font-size: 14px;
  font-weight: 600;
  border: none;
  border-radius: 8px;
  cursor: pointer;
  transition: all 0.2s ease;
}

.btn-sm.btn-primary {
  background: linear-gradient(135deg, #2d2b87 0%, #3d3ba0 100%);
  color: white;
  box-shadow: 0 2px 8px rgba(45, 43, 135, 0.3);
}

.btn-sm.btn-primary:hover {
  transform: translateY(-1px);
  background: linear-gradient(135deg, #242270 0%, #353399 100%);
  box-shadow: 0 4px 12px rgba(45, 43, 135, 0.4);
}

/* Activity List */
.activity-list {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.activity-row {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px 10px;
  border-radius: 6px;
  transition: all 0.15s ease;
}

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

.activity-row-icon {
  width: 28px;
  height: 28px;
  border-radius: 6px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 11px;
  flex-shrink: 0;
}

.activity-row-icon.deploy {
  background: rgba(99, 102, 241, 0.12);
  color: #6366f1;
}

.activity-row-icon.test {
  background: rgba(34, 197, 94, 0.12);
  color: #22c55e;
}

.activity-row-icon.build {
  background: rgba(249, 115, 22, 0.12);
  color: #f97316;
}

.activity-row-icon.error {
  background: rgba(239, 68, 68, 0.12);
  color: #ef4444;
}

.activity-row-icon.merge {
  background: rgba(168, 85, 247, 0.12);
  color: #a855f7;
}

.activity-row-icon.review {
  background: rgba(14, 165, 233, 0.12);
  color: #0ea5e9;
}

.activity-row-icon.config {
  background: rgba(107, 114, 128, 0.12);
  color: #6b7280;
}

.activity-row-icon.commit {
  background: rgba(168, 85, 247, 0.12);
  color: #a855f7;
}

.activity-row-icon.release {
  background: rgba(20, 184, 166, 0.12);
  color: #14b8a6;
}

.activity-row-icon.create {
  background: rgba(34, 197, 94, 0.12);
  color: #22c55e;
}

.activity-row-icon.update {
  background: rgba(59, 130, 246, 0.12);
  color: #3b82f6;
}

.activity-row-icon.delete {
  background: rgba(239, 68, 68, 0.12);
  color: #ef4444;
}

.activity-row-icon.auth {
  background: rgba(99, 102, 241, 0.12);
  color: #6366f1;
}

.activity-row-icon.system {
  background: rgba(107, 114, 128, 0.12);
  color: #6b7280;
}

.activity-row-content {
  flex: 1;
  display: flex;
  align-items: center;
  gap: 8px;
  min-width: 0;
}

.activity-row-text {
  font-size: 12px;
  color: var(--text-color);
  white-space: nowrap;
}

.activity-row-text strong {
  font-weight: 600;
}

.activity-row-app {
  font-size: 11px;
  color: var(--primary-color);
  background: rgba(99, 102, 241, 0.08);
  padding: 2px 6px;
  border-radius: 4px;
  font-weight: 500;
  white-space: nowrap;
}

.activity-row-time {
  font-size: 11px;
  color: var(--text-muted);
  font-weight: 500;
  flex-shrink: 0;
  min-width: 50px;
  text-align: right;
}

.activity-show-all-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  width: 100%;
  padding: 10px;
  margin-top: 4px;
  background: none;
  border: 1px dashed var(--border-color, #e2e8f0);
  border-radius: 8px;
  color: var(--primary, #4f46e5);
  font-size: 13px;
  font-weight: 500;
  cursor: pointer;
  transition: all 0.2s;
}

.activity-show-all-btn:hover {
  background: rgba(79, 70, 229, 0.05);
  border-color: var(--primary, #4f46e5);
}

.activity-show-all-btn i {
  font-size: 10px;
  transition: transform 0.2s;
}

.activity-show-all-btn:hover i {
  transform: translateY(2px);
}

/* Responsive Dashboard */
@media (max-width: 1400px) {
  .dashboard-stats-row {
    grid-template-columns: repeat(3, 1fr);
  }
}

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

  .dashboard-grid {
    grid-template-columns: 1fr;
  }

  .dashboard-card-lg,
  .dashboard-card-full {
    grid-column: span 1;
  }
}

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

@media (max-width: 768px) {
  .dashboard-header {
    flex-direction: column;
    align-items: flex-start;
    gap: 12px;
  }

  .dashboard-stats-row {
    grid-template-columns: repeat(2, 1fr);
  }

  .bp-tpl-card {
    flex: 0 0 230px;
    min-height: 280px;
  }

  .bp-tpl-header {
    padding: 18px 16px 14px;
  }

  .bp-carousel-arrow {
    width: 32px;
    height: 32px;
    font-size: 12px;
  }

  .bp-drawer-features {
    grid-template-columns: 1fr;
  }

  /* Stepper responsive */
  .process-stepper {
    padding: 12px 16px;
    gap: 6px;
    overflow-x: auto;
    scrollbar-width: thin;
  }

  .stepper-step {
    padding: 8px 12px;
  }

  .stepper-step-label {
    font-size: 11px;
  }

  .stepper-step-number {
    width: 28px;
    height: 28px;
    font-size: 12px;
  }

  .stepper-step-icon {
    font-size: 12px;
  }

  .stepper-connector {
    width: 24px;
  }
}

/* ========================================
   Application Builder Container
   ======================================== */
.app-builder-container {
  display: flex;
  flex-direction: column;
  gap: 0;
  background: var(--panel-bg);
  border: 1px solid var(--border-color);
  height: 100%;
  overflow: hidden;
}

/* Process Stepper */
.process-stepper {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 5px 40px;
  background: #fff;
  border-bottom: 1px solid var(--border-color);
  gap: 12px;
  flex-shrink: 0;
}

.stepper-step {
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: 8px;
  cursor: pointer;
  transition: all 0.3s ease;
  padding: 5px 10px;
  border-radius: 8px;
  position: relative;
}

.stepper-step:hover:not(.disabled) {
  background: #dddded;
  color: #2e2c87;
}

.stepper-step.active {
  background: #dddded;
  color: #2e2c87;
}

.stepper-step.disabled {
  opacity: 0.4;
  cursor: not-allowed;
}

.stepper-step-number {
  width: 16px;
  height: 16px;
  border-radius: 50%;
  background: var(--border-color);
  color: var(--text-color);
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 600;
  font-size: 11px;
  transition: all 0.3s ease;
}

.stepper-step.active .stepper-step-number {
  background: #2e2c87;
  color: white;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
}

.stepper-step-content {
  display: flex;
  align-items: center;
  gap: 6px;
}

.stepper-step-icon {
  font-size: 14px;
}

.stepper-step.active .stepper-step-icon {
  color: #2e2c87;
}

.stepper-step-label {
  font-size: 13px;
  font-weight: 500;
  white-space: nowrap;
}

.stepper-connector {
  width: 40px;
  height: 2px;
  background: var(--border-color);
  flex-shrink: 0;
}

.stepper-connector.disabled {
  background: var(--border-color);
  opacity: 0.3;
}

/* Step Panels */
.step-panel {
  display: flex;
  gap: 0;
  flex: 1;
  overflow: hidden;
}

.step-panel.active {
  display: flex;
}

/* Mobile Section Navigation - Hidden on desktop */
.mobile-section-nav {
  display: none;
}

/* Workspace Panel (Tree) */
.workspace-panel {
  width: 260px;
  min-width: 260px;
  border-right: 1px solid var(--border-color);
  display: flex;
  flex-direction: column;
  background: #fff;
  transition: width 0.2s ease, min-width 0.2s ease;
  overflow-y: auto;
  scrollbar-width: none;
  -ms-overflow-style: none;
}

.workspace-panel::-webkit-scrollbar {
  display: none;
}

.workspace-panel.collapsed {
  width: 0;
  min-width: 0;
  border-right: none;
  overflow: hidden;
}

.workspace-header {
  padding: 20px 16px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--panel-bg);
  border-bottom: 1px solid var(--border-color);
}

.workspace-stage-title {
  font-size: 24px;
  font-weight: 700;
  color: var(--text-primary);
  margin: 0;
  letter-spacing: 0.5px;
}

.workspace-collapse-btn {
  display: none; /* Hidden by request */
}

/* Tree Container - supports both kebab-case and camelCase class names */
.tree-container,
#workspaceTree {
  flex: 1;
  overflow-y: auto;
  scrollbar-width: none;
  -ms-overflow-style: none;
  padding: 8px;
}

.tree-container::-webkit-scrollbar,
#workspaceTree::-webkit-scrollbar {
  display: none;
}

.tree-item,
.treeItem {
  user-select: none;
}

.tree-row,
.treeRow {
  display: flex;
  align-items: center;
  gap: 4px;
  padding: 6px 8px;
  border-radius: var(--radius-sm);
  cursor: pointer;
  transition: background 0.1s;
}

.tree-row:hover,
.treeRow:hover {
  background: rgba(0, 0, 0, 0.04);
}

.tree-row.active,
.treeRow.active {
  background: rgba(45, 43, 135, 0.08);
}

.tree-row.active .tree-name,
.tree-row.active .treeName,
.treeRow.active .tree-name,
.treeRow.active .treeName {
  color: var(--primary-color);
  font-weight: 600;
}

.tree-expander,
.treeExpander {
  width: 18px;
  height: 18px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--text-muted);
  font-size: 9px;
  flex-shrink: 0;
  border-radius: 3px;
  transition: transform 0.15s ease;
}

.tree-expander:hover,
.treeExpander:hover {
  background: rgba(0, 0, 0, 0.06);
}

.tree-expander.expanded i,
.treeExpander.expanded i {
  transform: rotate(90deg);
}

.tree-expander.hidden,
.treeExpander.hidden {
  visibility: hidden;
}

.tree-icon,
.treeIcon {
  width: 18px;
  height: 18px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 12px;
  flex-shrink: 0;
  color: #6b7280; /* Dark grey for icons */
}

.tree-name,
.treeName {
  flex: 1;
  font-size: 12px;
  color: var(--text-color);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* Parent items - bold with primary color */
.tree-item > .tree-row .tree-name,
.treeItem > .treeRow .treeName,
.treeNameParent {
  font-weight: 600;
  color: var(--primary-color);
}

.tree-status,
.treeStatus {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  flex-shrink: 0;
  margin-left: auto;
}

/* Status colors */
.tree-status.planned,
.treeStatus.planned { background: var(--text-light); }
.tree-status.in_review,
.treeStatus.in_review { background: var(--info); }
.tree-status.approved,
.treeStatus.approved { background: var(--warning); }
.tree-status.rejected,
.treeStatus.rejected { background: var(--danger); }
.tree-status.implemented,
.treeStatus.implemented { background: var(--success); }
/* Legacy status mappings */
.tree-status.draft,
.treeStatus.draft { background: var(--text-light); }
.tree-status.in_progress,
.treeStatus.in_progress { background: var(--warning); }
.tree-status.ready,
.treeStatus.ready { background: var(--success); }

.tree-children,
.treeChildren {
  margin-left: 10px;
  padding-left: 10px;
  border-left: 1px solid var(--border-light);
  display: none;
}

.tree-item.expanded > .tree-children,
.treeItem.expanded > .treeChildren {
  display: block;
}

/* Content Area */
.content-area {
  flex: 1;
  display: flex;
  flex-direction: column;
  overflow: hidden;
}

/* Content Header (Breadcrumbs + Actions) */
.content-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 12px 20px;
  border-bottom: 1px solid var(--border-color);
  background: var(--panel-bg);
}

.breadcrumbs {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 13px;
  color: var(--text-muted);
}

.breadcrumb {
  color: var(--primary-color);
  cursor: pointer;
  transition: var(--transition);
}

.breadcrumb:hover {
  text-decoration: underline;
}

.breadcrumb:last-child {
  color: var(--text-color);
  cursor: default;
}

.breadcrumb:last-child:hover {
  text-decoration: none;
}

.breadcrumb-sep {
  font-size: 10px;
  color: var(--text-light);
}

.content-actions {
  display: flex;
  align-items: center;
  gap: 8px;
}

.content-actions .save-btn {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 8px 16px;
  font-size: 13px;
  font-weight: 500;
}

.content-actions .save-btn i {
  font-size: 12px;
}

.content-actions .save-btn:disabled {
  opacity: 0.6;
  cursor: not-allowed;
}

.action-btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 8px 14px;
  border: 1px solid var(--border-color);
  border-radius: var(--radius-sm);
  background: var(--panel-bg);
  color: var(--text-muted);
  font-size: 13px;
  cursor: pointer;
  transition: var(--transition);
}

.action-btn:hover {
  background: var(--bg-color);
  border-color: var(--text-light);
}

.action-btn.primary {
  background: var(--primary-color);
  border-color: var(--primary-color);
  color: white;
}

.action-btn.primary:hover {
  background: var(--primary-hover);
}

/* Page Header */
.page-header {
  padding: 20px;
  background: var(--panel-bg);
}

.page-title-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
}

.page-title-actions {
  display: flex;
  align-items: center;
  gap: 12px;
}

.status-select-wrapper {
  display: flex;
  align-items: center;
  gap: 8px;
}

.status-select-wrapper label {
  font-size: 12px;
  color: var(--text-muted);
  font-weight: 500;
}

.status-select {
  padding: 6px 28px 6px 10px;
  border: 1px solid var(--border-color);
  border-radius: var(--radius-sm);
  background: var(--panel-bg) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Cpath fill='%236b7280' d='M3 4.5L6 7.5L9 4.5'/%3E%3C/svg%3E") no-repeat right 8px center;
  font-size: 12px;
  color: var(--text-color);
  cursor: pointer;
  appearance: none;
  outline: none;
  min-width: 120px;
}

.status-select:focus {
  border-color: var(--primary-color);
}

/* Status colors on select */
.status-select.planned { border-left: 3px solid var(--text-light); }
.status-select.in_review { border-left: 3px solid var(--info); }
.status-select.approved { border-left: 3px solid var(--warning); }
.status-select.rejected { border-left: 3px solid var(--danger); }
.status-select.implemented { border-left: 3px solid var(--success); }

.page-header h1 {
  margin: 0;
  font-size: 22px;
  font-weight: 600;
  color: var(--text-color);
}

.step-ai-btn {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 6px 12px;
  border: 1px solid var(--border-color);
  border-radius: var(--radius-sm);
  background: var(--panel-bg);
  color: var(--text-muted);
  font-size: 13px;
  font-weight: 500;
  cursor: pointer;
  transition: var(--transition);
}

.step-ai-btn:hover {
  background: var(--primary-color);
  border-color: var(--primary-color);
  color: white;
}

.step-ai-btn:hover .step-ai-icon {
  filter: brightness(0) invert(1);
}

.step-ai-icon {
  width: 18px;
  height: 18px;
  transition: var(--transition);
}

.star-btn {
  width: 28px;
  height: 28px;
  border: none;
  background: transparent;
  color: var(--text-muted);
  cursor: pointer;
  border-radius: var(--radius-sm);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 16px;
  transition: var(--transition);
}

.star-btn:hover {
  color: var(--warning);
  background: rgba(245, 158, 11, 0.1);
}

.star-btn.active {
  color: var(--warning);
}

/* Content Toolbar */
.content-toolbar {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px 20px;
  background: var(--panel-bg);
  border-bottom: 1px solid var(--border-color);
}

.toolbar-search {
  position: relative;
  width: 200px;
}

.toolbar-search i {
  position: absolute;
  left: 10px;
  top: 50%;
  transform: translateY(-50%);
  color: var(--text-muted);
  font-size: 12px;
}

.toolbar-search input {
  width: 100%;
  height: 32px;
  padding: 0 10px 0 32px;
  border: 1px solid var(--border-color);
  border-radius: var(--radius-sm);
  font-size: 13px;
  background: var(--panel-bg);
  color: var(--text-color);
  outline: none;
  transition: var(--transition);
}

.toolbar-search input:focus {
  border-color: var(--primary-color);
}

.toolbar-filters {
  display: flex;
  align-items: center;
  gap: 8px;
  flex: 1;
}

.filter-select {
  padding: 6px 28px 6px 10px;
  border: 1px solid var(--border-color);
  border-radius: var(--radius-sm);
  background: var(--panel-bg) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Cpath fill='%236b7280' d='M3 4.5L6 7.5L9 4.5'/%3E%3C/svg%3E") no-repeat right 8px center;
  font-size: 13px;
  color: var(--text-color);
  cursor: pointer;
  appearance: none;
}

.toolbar-actions {
  display: flex;
  align-items: center;
  gap: 4px;
}

.view-toggle {
  width: 32px;
  height: 32px;
  border: 1px solid var(--border-color);
  background: var(--panel-bg);
  color: var(--text-muted);
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 14px;
  transition: var(--transition);
}

.view-toggle:first-child {
  border-radius: var(--radius-sm) 0 0 var(--radius-sm);
}

.view-toggle:last-child {
  border-radius: 0 var(--radius-sm) var(--radius-sm) 0;
  border-left: none;
}

.view-toggle:hover {
  background: var(--bg-color);
}

.view-toggle.active {
  background: rgba(45, 43, 135, 0.08);
  color: var(--primary-color);
  border-color: var(--primary-color);
}

/* Canvas */
.canvas {
  flex: 1;
  overflow: auto;
  background: var(--bg-color);
  isolation: isolate; /* Contains z-index of child elements like sticky headers */
}

.section-content {
  display: flex;
  flex-direction: column;
  gap: 20px;
}

/* Empty View */
.empty-view {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 400px;
}

.empty-view-content {
  text-align: center;
  padding: 40px;
}

.empty-view-icon {
  font-size: 48px;
  color: var(--text-light);
  margin-bottom: 16px;
}

.empty-view-title {
  font-size: 24px;
  font-weight: 600;
  color: var(--text-color);
  margin-bottom: 8px;
}

.empty-view-desc {
  font-size: 14px;
  color: var(--text-muted);
}

/* ========================================
   Applications List
   ======================================== */
.applications-list-container {
  width: 100%;
  max-width: 1200px;
  margin: 0 auto;
  padding: 24px;
  min-height: 100%;
}

.applications-list-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 24px;
}

.applications-list-header h2 {
  font-size: 26px;
  font-weight: 700;
  background: linear-gradient(135deg, #1e293b 0%, #475569 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  letter-spacing: -0.5px;
}

.applications-list-content {
  min-height: 300px;
}

.applications-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
  gap: 16px;
}

.application-card {
  display: flex;
  align-items: stretch;
  background: rgba(255, 255, 255, 0.95);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  border: 1.5px solid var(--border-color);
  border-radius: 16px;
  padding: 20px;
  cursor: pointer;
  transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.02);
}

.application-card:hover {
  border-color: #c8c7e8;
  box-shadow: 0 8px 24px rgba(45, 43, 135, 0.1), 0 2px 8px rgba(0, 0, 0, 0.04);
  transform: translateY(-3px);
  background: white;
}

.app-card-icon {
  width: 48px;
  height: 48px;
  background: linear-gradient(135deg, #2d2b87 0%, #3d3ba0 100%);
  border-radius: 12px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  margin-right: 16px;
  box-shadow: 0 4px 12px rgba(45, 43, 135, 0.2);
  transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
}

.application-card:hover .app-card-icon {
  box-shadow: 0 6px 16px rgba(45, 43, 135, 0.3);
  transform: scale(1.05);
}

.app-card-icon i {
  font-size: 20px;
  color: white;
}

.app-card-content {
  flex: 1;
  min-width: 0;
}

.app-card-title {
  font-size: 16px;
  font-weight: 600;
  color: var(--text-color);
  margin-bottom: 4px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.app-card-desc {
  font-size: 13px;
  color: var(--text-muted);
  margin-bottom: 12px;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.app-card-meta {
  display: flex;
  gap: 16px;
  font-size: 12px;
  color: var(--text-light);
}

.app-card-meta span {
  display: flex;
  align-items: center;
  gap: 4px;
}

.app-card-meta i {
  font-size: 11px;
}

.app-card-actions {
  display: flex;
  align-items: center;
  padding-left: 16px;
  color: var(--text-light);
}

.application-card:hover .app-card-actions {
  color: var(--primary-color);
}

/* Loading spinner */
.loading-spinner {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 60px 20px;
  color: var(--text-muted);
  font-size: 14px;
}

.loading-spinner i {
  font-size: 18px;
  color: var(--primary-color);
}

/* Settings/Billing/Users loading state */
.settings-loading {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 80px 20px;
  color: var(--text-muted);
  font-size: 14px;
  gap: 16px;
}

.settings-loading .loading-spinner {
  width: 40px;
  height: 40px;
  border: 3px solid var(--border-color);
  border-top-color: var(--primary-color);
  border-radius: 50%;
  animation: spin 1s linear infinite;
  padding: 0;
}

.settings-loading p {
  margin: 0;
  color: var(--text-muted);
}

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

/* Empty state */
.empty-state {
  text-align: center;
  padding: 60px 20px;
}

.empty-state-icon {
  font-size: 48px;
  color: var(--text-light);
  margin-bottom: 16px;
}

.empty-state-icon.error {
  color: var(--danger);
}

.empty-state h3 {
  font-size: 18px;
  font-weight: 600;
  color: var(--text-color);
  margin-bottom: 8px;
}

.empty-state p {
  font-size: 14px;
  color: var(--text-muted);
  margin-bottom: 16px;
}

/* ========================================
   AI Panel
   ======================================== */
.ai-panel {
  position: fixed;
  top: var(--header-height);
  right: 0;
  width: var(--ai-panel-width);
  height: calc(100vh - var(--header-height));
  background: var(--panel-bg);
  border-left: 1px solid var(--border-color);
  display: flex;
  flex-direction: column;
  z-index: 90;
  transition: transform 0.2s ease;
}

.ai-panel.collapsed {
  transform: translateX(100%);
}

.ai-panel.collapsed .ai-panel-toggle {
  display: none;
}

.ai-panel-toggle {
  display: none; /* Hidden by request */
  border: 1px solid var(--border-color);
  border-radius: var(--radius);
  background: var(--panel-bg);
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: var(--shadow-sm);
  transition: var(--transition);
  z-index: 10;
}

.ai-panel-toggle:hover {
  background: var(--bg-color);
  box-shadow: var(--shadow-md);
}

.ai-panel-toggle-icon {
  width: 24px;
  height: 24px;
  border-radius: 50%;
}

.ai-panel-content {
  flex: 1;
  display: flex;
  flex-direction: column;
  overflow: hidden;
}

/* New AI Chat Header (replaces ai-header/ai-title) */
.ai-chat-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 12px 16px;
  border-bottom: 1px solid var(--border-color);
  background: var(--panel-bg);
  flex-shrink: 0;
}

.ai-chat-header-left {
  display: flex;
  align-items: center;
  gap: 10px;
  flex: 1;
  min-width: 0;
}

.ai-chat-icon {
  width: 24px;
  height: 24px;
  border-radius: 50%;
  flex-shrink: 0;
}

.ai-conversation-select {
  flex: 1;
  min-width: 0;
  max-width: 200px;
  font-size: 13px;
  font-weight: 500;
  color: var(--text-color);
  border: 1px solid var(--border-color);
  border-radius: var(--radius-sm);
  background: var(--bg-color);
  padding: 6px 10px;
  cursor: pointer;
}

.ai-chat-header-actions {
  display: flex;
  align-items: center;
  gap: 4px;
  flex-shrink: 0;
}

.ai-new-chat-btn {
  width: 28px;
  height: 28px;
  border: none;
  background: var(--primary-color);
  color: var(--white);
  cursor: pointer;
  border-radius: var(--radius-sm);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 12px;
  transition: var(--transition);
}

.ai-new-chat-btn:hover {
  background: var(--primary-hover);
}

/* AI Chat Content (replaces tabs) */
.ai-chat-content {
  flex: 1;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  padding: 0;
}

/* Select2 Custom Styling for AI Panel */
.ai-chat-header .select2-container {
  flex: 1;
  min-width: 0;
  max-width: 200px;
}

.ai-chat-header .select2-container--default .select2-selection--single {
  border: 1px solid var(--border-color);
  border-radius: var(--radius-sm);
  background: var(--bg-color);
  height: 32px;
  display: flex;
  align-items: center;
}

.ai-chat-header .select2-container--default .select2-selection--single .select2-selection__rendered {
  color: var(--text-color);
  font-size: 13px;
  font-weight: 500;
  line-height: 32px;
  padding-left: 10px;
  padding-right: 24px;
}

.ai-chat-header .select2-container--default .select2-selection--single .select2-selection__arrow {
  height: 30px;
  right: 6px;
}

.ai-chat-header .select2-container--default .select2-selection--single .select2-selection__arrow b {
  border-color: var(--text-muted) transparent transparent transparent;
}

.ai-chat-header .select2-container--default.select2-container--open .select2-selection--single .select2-selection__arrow b {
  border-color: transparent transparent var(--text-muted) transparent;
}

.select2-container--default .select2-results__option--highlighted[aria-selected] {
  background-color: var(--primary-color);
}

.select2-dropdown {
  border: 1px solid var(--border-color);
  border-radius: var(--radius-sm);
  box-shadow: var(--shadow-md);
}

.select2-container--default .select2-results__option {
  font-size: 13px;
  padding: 8px 12px;
}

/* Legacy styles (kept for backwards compatibility) */
.ai-header {
  padding: 16px;
  border-bottom: 1px solid var(--border-color);
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.ai-title {
  font-size: 14px;
  font-weight: 600;
  display: flex;
  align-items: center;
  gap: 8px;
  color: var(--text-color);
}

.ai-title-icon {
  width: 20px;
  height: 20px;
  border-radius: 50%;
}

.ai-close-btn {
  width: 28px;
  height: 28px;
  border: none;
  background: transparent;
  color: var(--text-muted);
  cursor: pointer;
  border-radius: var(--radius-sm);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 14px;
  transition: var(--transition);
}

.ai-close-btn:hover {
  background: var(--bg-color);
  color: var(--text-color);
}

.ai-tabs {
  display: flex;
  border-bottom: 1px solid var(--border-color);
  padding: 0 16px;
}

.ai-tab {
  padding: 12px 16px;
  border: none;
  background: none;
  color: var(--text-muted);
  font-size: 13px;
  font-weight: 500;
  cursor: pointer;
  position: relative;
  transition: var(--transition);
}

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

.ai-tab.active {
  color: var(--primary-color);
}

.ai-tab.active::after {
  content: '';
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  height: 2px;
  background: var(--primary-color);
}

.ai-tab-content {
  flex: 1;
  overflow: hidden;
}

.ai-tab-pane {
  display: none;
  height: 100%;
}

.ai-tab-pane.active {
  display: flex;
  flex-direction: column;
}

.conversation-pane,
.checklist-pane,
.notes-pane {
  flex: 1;
  padding: 16px;
  overflow-y: auto;
  display: flex;
  flex-direction: column;
}

.gbos-chat-tab {
  flex: 1;
  min-height: 400px;
}

.checklist {
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin-bottom: 12px;
}

.check-item {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 12px;
  background: var(--bg-color);
  border-radius: var(--radius-sm);
}

.check-item input[type="checkbox"] {
  width: 16px;
  height: 16px;
  cursor: pointer;
}

.check-item input[type="text"] {
  flex: 1;
  border: none;
  background: transparent;
  font-size: 13px;
  color: var(--text-color);
  outline: none;
}

.notes-textarea {
  flex: 1;
  min-height: 200px;
  padding: 12px;
  border: 1px solid var(--border-color);
  border-radius: var(--radius-sm);
  font-size: 13px;
  font-family: var(--font-family);
  resize: none;
  outline: none;
  margin-bottom: 12px;
  transition: var(--transition);
}

.notes-textarea:focus {
  border-color: var(--primary-color);
}

.notes-actions {
  display: flex;
  gap: 8px;
  justify-content: flex-end;
}

/* ========================================
   Cards
   ======================================== */
.card {
  border: 1px solid var(--border-color);
  border-radius: var(--radius);
  background: var(--panel-bg);
  overflow: hidden;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.05);
}

.card-header {
  padding: 16px;
  border-bottom: 1px solid var(--border-color);
  border-radius: 0;
}

.card-title {
  font-weight: 600;
  font-size: 14px;
  color: var(--text-color);
}

.card-hint {
  margin-top: 4px;
  font-size: 12px;
  color: var(--text-muted);
}

.card-body {
  padding: 16px;
}

.card-footer {
  padding: 12px 16px;
  border-top: 1px solid var(--border-color);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  background: var(--bg-color);
}

/* ========================================
   Forms
   ======================================== */
.form-group {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.form-label {
  font-size: 12px;
  font-weight: 600;
  color: var(--text-color);
}

.form-input,
.form-textarea {
  padding: 10px 12px;
  border: 1px solid var(--border-color);
  border-radius: var(--radius-sm);
  background: var(--panel-bg);
  color: var(--text-color);
  font-size: 13px;
  font-family: var(--font-family);
  outline: none;
  transition: var(--transition);
}

.form-input:focus,
.form-textarea:focus {
  border-color: var(--primary-color);
}

.form-textarea {
  min-height: 100px;
  resize: vertical;
}

.select {
  padding: 10px 32px 10px 12px;
  border: 1px solid var(--border-color);
  border-radius: var(--radius-sm);
  background: var(--panel-bg) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Cpath fill='%236b7280' d='M3 4.5L6 7.5L9 4.5'/%3E%3C/svg%3E") no-repeat right 10px center;
  font-size: 13px;
  color: var(--text-color);
  cursor: pointer;
  appearance: none;
}

.invite-row {
  display: flex;
  gap: 12px;
  align-items: flex-end;
  flex-wrap: wrap;
}

/* ========================================
   Buttons
   ======================================== */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  padding: 8px 16px;
  border: 1px solid var(--border-color);
  border-radius: var(--radius-sm);
  background: var(--panel-bg);
  color: var(--text-color);
  font-size: 13px;
  font-weight: 500;
  cursor: pointer;
  transition: var(--transition);
}

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

.btn.primary {
  background: linear-gradient(135deg, #2d2b87 0%, #3d3ba0 100%);
  border-color: transparent;
  color: white;
  box-shadow: 0 4px 12px rgba(45, 43, 135, 0.25);
}

.btn.primary:hover {
  background: linear-gradient(135deg, #242270 0%, #353399 100%);
  box-shadow: 0 6px 20px rgba(45, 43, 135, 0.35);
  transform: translateY(-1px);
}

.btn.success {
  background: var(--success);
  border-color: var(--success);
  color: white;
}

.btn.ghost {
  background: transparent;
  border-color: transparent;
  color: var(--primary-color);
}

.btn.ghost:hover {
  background: rgba(45, 43, 135, 0.08);
}

.btn.sm {
  padding: 6px 12px;
  font-size: 12px;
}

.icon-btn {
  width: 32px;
  height: 32px;
  border: none;
  background: transparent;
  color: var(--text-muted);
  cursor: pointer;
  border-radius: var(--radius-sm);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 14px;
  transition: var(--transition);
}

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

/* ========================================
   Grid Layouts
   ======================================== */
.grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 16px;
}

.grid-3 {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 16px;
}

.grid-full {
  display: grid;
  grid-template-columns: 1fr;
  gap: 16px;
}

.row {
  display: flex;
  gap: 12px;
}

/* ========================================
   Tags & Pills
   ======================================== */
.tag-list {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.tag {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 6px 12px;
  background: var(--bg-color);
  border: 1px solid var(--border-color);
  border-radius: var(--radius-sm);
  font-size: 12px;
  color: var(--text-color);
  cursor: pointer;
  transition: var(--transition);
}

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

.tag.selected {
  background: rgba(45, 43, 135, 0.08);
  border-color: var(--primary-color);
  color: var(--primary-color);
}

.pill {
  display: inline-flex;
  align-items: center;
  padding: 4px 10px;
  border-radius: 999px;
  font-size: 12px;
  font-weight: 500;
  background: var(--bg-color);
  border: 1px solid var(--border-color);
  color: var(--text-muted);
}

.pill.success {
  background: #dcfce7;
  border-color: #bbf7d0;
  color: #166534;
}

.pill.warning,
.pill.progress {
  background: #fef3c7;
  border-color: #fde68a;
  color: #92400e;
}

.pill.danger {
  background: #fee2e2;
  border-color: #fecaca;
  color: #991b1b;
}

.pill.ready {
  background: #dcfce7;
  border-color: #bbf7d0;
  color: #166534;
}

/* ========================================
   Modals
   ======================================== */
.modal-overlay {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.5);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 1000;
}

.modal-overlay.hidden {
  display: none;
}

.modal {
  width: 90%;
  max-width: 600px;
  max-height: 90vh;
  background: var(--panel-bg);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-lg);
  overflow: hidden;
  display: flex;
  flex-direction: column;
}

.modal-header {
  padding: 20px;
  border-bottom: 1px solid var(--border-color);
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 16px;
}

.modal-title {
  font-size: 18px;
  font-weight: 600;
  color: var(--text-color);
}

.modal-sub {
  margin-top: 4px;
  font-size: 13px;
  color: var(--text-muted);
}

.modal-tabs {
  display: flex;
  border-bottom: 1px solid var(--border-color);
  padding: 0 20px;
}

.modal-tab {
  padding: 12px 16px;
  border: none;
  background: none;
  color: var(--text-muted);
  font-size: 13px;
  font-weight: 500;
  cursor: pointer;
  position: relative;
  transition: var(--transition);
}

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

.modal-tab.active::after {
  content: '';
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  height: 2px;
  background: var(--primary-color);
}

.modal-body {
  padding: 20px;
  overflow-y: auto;
  flex: 1;
}

.modal-pane {
  display: none;
}

.modal-pane.active {
  display: block;
}

/* ========================================
   Toast Notifications
   ======================================== */
.toastHost {
  position: fixed;
  top: 16px;
  right: 16px;
  display: flex;
  flex-direction: column;
  gap: 8px;
  z-index: 9999;
  pointer-events: none;
}

.toastMsg {
  padding: 12px 16px;
  background: var(--text-color);
  color: white;
  border-radius: var(--radius-sm);
  font-size: 13px;
  box-shadow: var(--shadow-lg);
  transform: translateX(100%);
  opacity: 0;
  transition: all 0.25s ease;
  pointer-events: auto;
}

.toastMsg.show {
  transform: translateX(0);
  opacity: 1;
}

.toastMsg.success {
  background: var(--success);
}

.toastMsg.error {
  background: var(--danger);
}

.toastMsg.warning {
  background: var(--warning);
}

/* ========================================
   Collab List
   ======================================== */
.collab-list {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.collab-item {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 10px;
  background: var(--bg-color);
  border-radius: var(--radius-sm);
}

.collab-avatar {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  background: var(--primary-color);
  color: white;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 12px;
  font-weight: 600;
}

.collab-info {
  flex: 1;
}

.collab-name {
  font-size: 13px;
  font-weight: 500;
}

.collab-email {
  font-size: 12px;
  color: var(--text-muted);
}

/* ========================================
   Overlay
   ======================================== */
.overlay {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.5);
  z-index: 80;
  display: none;
}

.overlay.active {
  display: block;
}

/* ========================================
   Utilities
   ======================================== */
.hidden { display: none !important; }
.muted { color: var(--text-muted); }

/* ========================================
   Scrollbars
   ======================================== */
::-webkit-scrollbar {
  width: 8px;
  height: 8px;
}

::-webkit-scrollbar-track {
  background: transparent;
}

::-webkit-scrollbar-thumb {
  background: var(--border-color);
  border-radius: 4px;
}

::-webkit-scrollbar-thumb:hover {
  background: var(--text-light);
}

/* ========================================
   Legacy Support Styles (from previous app.js renderers)
   ======================================== */
.tagList { display: flex; flex-wrap: wrap; gap: 8px; }
.tagBtn { cursor: pointer; }
.tagBtn.selected { background: rgba(45, 43, 135, 0.08); border-color: var(--primary-color); color: var(--primary-color); }
.featureList { display: flex; flex-direction: column; gap: 8px; }
.featureItem { display: flex; align-items: center; gap: 12px; padding: 12px 16px; background: var(--panel-bg); border: 1px solid var(--border-color); border-radius: var(--radius-sm); }
.featureItem:hover { border-color: var(--text-light); }
.featurePriority { width: 80px; }
.featureTitle { flex: 1; }
.featureActions { display: flex; gap: 4px; }
.formTextarea { min-height: 100px; resize: vertical; }
.formInput { padding: 10px 12px; border: 1px solid var(--border-color); border-radius: var(--radius-sm); background: var(--panel-bg); color: var(--text-color); font-size: 13px; }
.formLabel { font-size: 12px; font-weight: 600; color: var(--text-color); }
.formGroup { display: flex; flex-direction: column; gap: 6px; }
.cardHeader { padding: 16px; border-bottom: 1px solid var(--border-color); }
.cardTitle { font-weight: 600; font-size: 14px; }
.cardHint { margin-top: 4px; font-size: 12px; color: var(--text-muted); }
.cardBody { padding: 16px; }
.cardFooter { padding: 12px 16px; border-top: 1px solid var(--border-color); display: flex; align-items: center; justify-content: space-between; gap: 10px; background: var(--bg-color); }
.diagramPlaceholder { min-height: 120px; border: 2px dashed var(--border-color); border-radius: var(--radius); display: flex; align-items: center; justify-content: center; color: var(--text-muted); font-size: 13px; background: var(--bg-color); }

/* CamelCase Modal Classes (for app.js compatibility) */
.modalHeader {
  padding: 20px 24px;
  border-bottom: 1px solid var(--border-color);
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 16px;
  background: var(--panel-bg);
}

.modalTitle {
  font-size: 18px;
  font-weight: 600;
  color: var(--text-color);
  line-height: 1.3;
}

.modalSub {
  margin-top: 4px;
  font-size: 13px;
  color: var(--text-muted);
  line-height: 1.4;
}

.modalBody {
  padding: 24px;
  overflow-y: auto;
  flex: 1;
  background: var(--panel-bg);
}

.modalFooter {
  padding: 16px 24px;
  border-top: 1px solid var(--border-color);
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 12px;
  background: var(--bg-color);
}

/* Enhanced Form Group Styles */
.formGroup {
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin-bottom: 0;
}

.formLabel {
  font-size: 13px;
  font-weight: 600;
  color: var(--text-color);
  margin-bottom: 2px;
}

.formInput,
.formTextarea {
  padding: 10px 14px;
  border: 1px solid var(--border-color);
  border-radius: var(--radius-sm);
  background: var(--panel-bg);
  color: var(--text-color);
  font-size: 14px;
  font-family: inherit;
  transition: border-color 0.2s, box-shadow 0.2s;
  width: 100%;
  box-sizing: border-box;
}

.formInput:focus,
.formTextarea:focus {
  border-color: var(--primary-color);
  outline: none;
  box-shadow: 0 0 0 3px rgba(67, 56, 202, 0.1);
}

.formInput::placeholder,
.formTextarea::placeholder {
  color: var(--text-muted);
}

.formTextarea {
  min-height: 100px;
  resize: vertical;
  line-height: 1.5;
}

/* Icon Button (close button in modals) */
.iconBtn {
  width: 32px;
  height: 32px;
  display: flex;
  align-items: center;
  justify-content: center;
  border: none;
  background: transparent;
  color: var(--text-muted);
  font-size: 18px;
  cursor: pointer;
  border-radius: var(--radius-sm);
  transition: all 0.2s;
  flex-shrink: 0;
}

.iconBtn:hover {
  background: var(--bg-color);
  color: var(--text-color);
}

/* Checkbox/Check Item Styles */
.checkItem {
  display: flex;
  align-items: center;
  gap: 10px;
  cursor: pointer;
  padding: 8px 0;
  font-size: 14px;
  color: var(--text-color);
}

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

/* Grid Layout for Forms */
.grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 16px;
}

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

/* Row Layout */
.row {
  display: flex;
  align-items: center;
  gap: 12px;
}

/* Select Dropdown Consistent Styling */
.select {
  padding: 10px 36px 10px 14px;
  border: 1px solid var(--border-color);
  border-radius: var(--radius-sm);
  background: var(--panel-bg) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Cpath fill='%23666' d='M6 8L1 3h10z'/%3E%3C/svg%3E") no-repeat right 12px center;
  color: var(--text-color);
  font-size: 14px;
  font-family: inherit;
  cursor: pointer;
  appearance: none;
  -webkit-appearance: none;
  transition: border-color 0.2s;
  min-width: 120px;
}

.select:focus {
  border-color: var(--primary-color);
  outline: none;
}

.select.small {
  padding: 6px 28px 6px 10px;
  font-size: 13px;
}

/* Tabs Row & Tab Buttons (camelCase for app.js compatibility) */
.tabsRow {
  display: flex;
  gap: 4px;
  border-bottom: 1px solid var(--border-color);
  padding-bottom: 0;
  margin-bottom: 16px;
  background: var(--bg-color);
  border-radius: var(--radius-sm) var(--radius-sm) 0 0;
  padding: 4px;
}

.tabBtn {
  padding: 10px 20px;
  border: none;
  background: transparent;
  color: var(--text-muted);
  font-size: 13px;
  font-weight: 500;
  cursor: pointer;
  border-radius: var(--radius-sm);
  transition: all 0.2s;
  display: flex;
  align-items: center;
  gap: 6px;
}

.tabBtn:hover {
  color: var(--text-color);
  background: rgba(0, 0, 0, 0.04);
}

.tabBtn.active {
  background: var(--panel-bg);
  color: var(--primary-color);
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
  font-weight: 600;
}

/* Segmented Tabs (for sub-navigation like Structure/Data/Settings) */
.segTabs {
  display: inline-flex;
  background: var(--bg-color);
  border-radius: var(--radius-sm);
  padding: 3px;
  gap: 2px;
  border: 1px solid var(--border-color);
}

.segBtn {
  padding: 6px 14px;
  border: none;
  background: transparent;
  color: var(--text-muted);
  font-size: 13px;
  font-weight: 500;
  cursor: pointer;
  border-radius: var(--radius-sm);
  transition: all 0.2s;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  white-space: nowrap;
}

.segBtn:hover {
  color: var(--text-color);
}

.segBtn.active {
  background: var(--panel-bg);
  color: var(--primary-color);
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.08);
  font-weight: 600;
}

/* Badge (for notification counts) */
.badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 18px;
  height: 18px;
  padding: 0 6px;
  font-size: 11px;
  font-weight: 600;
  color: var(--text-muted);
  background: var(--bg-color);
  border-radius: 9px;
}

.segBtn.active .badge {
  background: rgba(67, 56, 202, 0.15);
  color: var(--primary-color);
}

/* Page Actions Header */
.pageActions {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 16px;
  flex-wrap: wrap;
}

/* Table Toolbar */
.tableToolbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 12px 16px;
  background: var(--bg-color);
  border-bottom: 1px solid var(--border-color);
  flex-wrap: wrap;
}

/* Button Styles Enhancement */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 10px 18px;
  border: 1px solid transparent;
  border-radius: var(--radius-sm);
  font-size: 14px;
  font-weight: 500;
  font-family: inherit;
  cursor: pointer;
  transition: all 0.2s;
  white-space: nowrap;
  text-decoration: none;
}

.btn.primary {
  background: linear-gradient(135deg, #2d2b87 0%, #3d3ba0 100%);
  color: white;
  border-color: transparent;
  box-shadow: 0 4px 12px rgba(45, 43, 135, 0.25);
}

.btn.primary:hover {
  background: linear-gradient(135deg, #242270 0%, #353399 100%);
  box-shadow: 0 6px 20px rgba(45, 43, 135, 0.35);
  transform: translateY(-1px);
}

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

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

.btn.danger {
  background: var(--danger);
  color: white;
  border-color: var(--danger);
}

.btn.danger:hover {
  background: #dc2626;
  border-color: #dc2626;
}

.btn.warning {
  background: #f59e0b;
  color: white;
  border-color: #f59e0b;
}

.btn.warning:hover {
  background: #d97706;
  border-color: #d97706;
}

.btn.sm {
  padding: 6px 12px;
  font-size: 13px;
}

.btn i {
  font-size: 14px;
}

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

/* Data Models */
.dataModelTables { display: flex; flex-direction: column; gap: 16px; }
.tableCard { border: 1px solid var(--border-color); border-radius: var(--radius); background: var(--panel-bg); overflow: hidden; }
.tableCardHeader { padding: 12px 16px; background: var(--bg-color); border-bottom: 1px solid var(--border-color); display: flex; align-items: center; justify-content: space-between; }
.tableCardTitle { font-weight: 600; font-size: 14px; }
.inlineTable { 
  width: 100%; 
  border-collapse: collapse;
  background: var(--panel-bg);
}

.inlineTable th, 
.inlineTable td { 
  padding: 12px 16px; 
  text-align: left; 
  border-bottom: 1px solid var(--border-light); 
  font-size: 13px;
  vertical-align: middle;
}

.inlineTable th { 
  background: var(--bg-color); 
  font-weight: 600; 
  font-size: 12px; 
  color: var(--text-muted);
  text-transform: uppercase;
  letter-spacing: 0.3px;
}

.inlineTable tbody tr:hover {
  background: rgba(0, 0, 0, 0.02);
}

.inlineTable tbody tr:last-child td {
  border-bottom: none;
}

/* Table Action Buttons */
.inlineTable .btn {
  padding: 4px 10px;
  font-size: 12px;
}

/* Checkbox in table */
.inlineTable input[type="checkbox"] {
  width: 16px;
  height: 16px;
  cursor: pointer;
  accent-color: var(--primary-color);
}

/* Business Rules */
.ruleCard { border: 1px solid var(--border-color); border-radius: var(--radius); background: var(--panel-bg); padding: 16px; }
.ruleHeader { display: flex; align-items: center; justify-content: space-between; margin-bottom: 8px; }
.ruleTitle { font-weight: 600; font-size: 14px; }
.ruleType { font-size: 12px; color: var(--text-muted); padding: 2px 8px; background: var(--bg-color); border-radius: var(--radius-sm); }
.ruleDesc { font-size: 13px; color: var(--text-muted); }

/* ========================================
   User Journey Drawer - Enhanced Design
   ======================================== */

/* Color system for action types */
:root {
  --action-do-color: #3b82f6;
  --action-do-bg: #eef4ff;
  --action-think-color: #8b5cf6;
  --action-think-bg: #f4f1ff;
  --action-feel-color: #10b981;
  --action-feel-bg: #eefaf3;
  --action-pain-color: #ef4444;
  --action-pain-bg: #fdeeee;
  --border-subtle: rgba(0, 0, 0, 0.08);
  --border-muted: rgba(0, 0, 0, 0.12);
}

/* Base drawer styles */
.ujDrawerOverlay { position: fixed; inset: 0; background: rgba(0,0,0,0.5); z-index: 200; }
.ujDrawerOverlay.hidden { display: none; }
.ujDrawer { position: fixed; right: 0; top: 0; width: 80%; max-width: 1400px; height: 100%; background: var(--panel-bg); box-shadow: var(--shadow-lg); display: flex; flex-direction: column; z-index: 201; }
.ujDrawerHeader { padding: 16px 20px; border-bottom: 1px solid var(--border-color); display: flex; align-items: center; justify-content: space-between; gap: 16px; }
.ujDrawerTitle { font-size: 18px; font-weight: 600; }
.ujDrawerBody { flex: 1; display: flex; overflow: hidden; }
.ujSide { width: 260px; border-right: 1px solid var(--border-color); padding: 16px; overflow-y: auto; background: #fafbfc; }
.ujCanvas { flex: 1; overflow: auto; padding: 0; background: #fff; }

/* Integration Cards */
.integrationGrid { display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: 16px; }
.integrationCard { border: 1px solid var(--border-color); border-radius: var(--radius); padding: 16px; background: var(--panel-bg); cursor: pointer; transition: var(--transition); }
.integrationCard:hover { border-color: var(--primary-color); box-shadow: var(--shadow-md); }

/* Data Migration */
.migrationSource { border: 1px solid var(--border-color); border-radius: var(--radius); padding: 16px; background: var(--panel-bg); margin-bottom: 12px; }
.sourceFields { display: grid; grid-template-columns: repeat(2, 1fr); gap: 12px; }

/* ========================================
   Responsive
   ======================================== */
@media (max-width: 1200px) {
  .welcome-banner {
    flex-direction: column;
    text-align: center;
  }
  
  .welcome-actions {
    justify-content: center;
  }
  
  .grid-3 {
    grid-template-columns: repeat(2, 1fr);
  }
}

/* ========================================
   Extended UI Components
   ======================================== */
.ujOverlay {
  position: fixed;
  inset: 0;
  background: rgba(15, 23, 42, 0.6);
  z-index: 200;
  display: flex;
  justify-content: flex-end;
}

.ujHeader {
  padding: 16px 20px;
  border-bottom: 1px solid var(--border-color);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}

.ujTitle {
  font-size: 18px;
  font-weight: 600;
}

.ujSub {
  font-size: 12px;
  color: var(--text-muted);
}

.ujBody {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 16px;
  overflow: hidden;
  padding: 16px;
}

.ujLayout {
  flex: 1;
  display: flex;
  gap: 16px;
  min-height: 0;
}

.ujSideHeader {
  font-size: 12px;
  font-weight: 600;
  text-transform: uppercase;
  color: var(--text-muted);
  margin-bottom: 8px;
}

.ujSideBody {
  margin-bottom: 16px;
}

.ujTypeList {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.ujTypeItem {
  display: flex;
  align-items: center;
  gap: 8px;
}

.ujTypeInput {
  flex: 1;
  border: 1px solid var(--border-color);
  border-radius: var(--radius-sm);
  padding: 6px 10px;
  font-size: 12px;
}

.ujTypeDel {
  border: none;
  background: transparent;
  color: var(--text-muted);
  cursor: pointer;
}

/* ----------------------------------------
   1. GRID LAYOUT - Enhanced Visual Hierarchy
   ---------------------------------------- */
.ujGrid {
  display: flex;
  flex-direction: column;
  gap: 0;
  position: relative;
}

.ujGridHeader,
.ujRow {
  display: grid;
  gap: 0;
}

/* 1A. Step Headers (Columns) - Milestone Style */
.ujGridHeader {
  position: sticky;
  top: 0;
  z-index: 10;
  background: #fff;
}

.ujGridHeader .cell,
.step-header {
  background: transparent;
  border: none;
  border-bottom: 2px solid var(--border-subtle);
  border-radius: 0;
  padding: 12px 16px 10px;
  font-size: 14px;
  font-weight: 600;
  color: var(--text-color);
  text-align: left;
}

.step-header .step-badge {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 14px;
  font-weight: 600;
  color: var(--text-color);
}

.step-header .step-badge::before {
  content: attr(data-step-num);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 22px;
  height: 22px;
  background: var(--primary-color);
  color: #fff;
  border-radius: 50%;
  font-size: 11px;
  font-weight: 600;
}

.step-header .step-badge .step-separator {
  color: var(--text-muted);
  font-weight: 400;
  margin: 0 2px;
}

/* Step header input field styling */
.step-title-input {
  font-size: 14px;
  font-weight: 600;
  border: none;
  background: transparent;
  outline: none;
  padding: 0;
  color: var(--text-color);
  border-bottom: 1px solid transparent;
  transition: border-color 0.2s;
}

.step-title-input:focus {
  border-bottom-color: var(--primary-color);
  box-shadow: 0 1px 0 0 var(--primary-color);
}

/* 1B. Persona Labels (Rows) - Sticky Row Headers */
.personaCell,
.persona-label {
  background: #f9fafb;
  border: none;
  border-right: 1px solid var(--border-subtle);
  border-radius: 0;
  padding: 12px 14px;
  position: sticky;
  left: 0;
  z-index: 5;
  min-width: 140px;
  display: flex;
  align-items: center;
  gap: 10px;
}

/* Persona avatar/initial */
.persona-label .persona-avatar,
.personaCell .persona-avatar {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 13px;
  font-weight: 600;
  color: #fff;
  flex-shrink: 0;
  background: var(--primary-color);
}

/* Persona accent bar */
.persona-label::before,
.personaCell::before {
  content: '';
  position: absolute;
  left: 0;
  top: 8px;
  bottom: 8px;
  width: 3px;
  border-radius: 0 2px 2px 0;
  background: var(--persona-color, var(--primary-color));
}

.personaName {
  font-weight: 600;
  font-size: 13px;
  color: var(--text-color);
}

.personaMeta {
  font-size: 11px;
  color: var(--text-muted);
  margin-top: 2px;
}

/* Persona action count badge */
.persona-label .action-count {
  font-size: 11px;
  color: var(--text-muted);
  background: var(--bg-color);
  padding: 2px 8px;
  border-radius: 999px;
  margin-left: auto;
}

/* ----------------------------------------
   2. ACTION CARDS - Color-coded by Type
   ---------------------------------------- */
.ujCell {
  background: #ffffff;
  border: none;
  border-radius: 0;
  min-height: 100px;
  padding: 10px;
  position: relative;
  transition: background-color 0.15s;
}

/* Remove dashed borders by default - show only on hover */
.ujCell:hover {
  background: rgba(0, 0, 0, 0.01);
}

.ujCell:hover::after {
  content: '';
  position: absolute;
  inset: 4px;
  border: 1px dashed var(--border-muted);
  border-radius: var(--radius-sm);
  pointer-events: none;
}

/* Action Card Base */
.ujCard,
.action-card {
  background: #ffffff;
  border: 1px solid var(--border-subtle);
  border-left: 4px solid var(--action-color, var(--border-color));
  border-radius: var(--radius-sm);
  padding: 10px 12px;
  margin-bottom: 10px;
  box-shadow: none;
  transition: box-shadow 0.15s, transform 0.15s;
  position: relative;
  cursor: grab;
}

/* Card hover elevation */
.ujCard:hover,
.action-card:hover {
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
  transform: translateY(-1px);
}

/* Drag handle on hover */
.ujCard::before,
.action-card::before {
  content: '\f58e';
  font-family: 'Font Awesome 6 Free';
  font-weight: 900;
  position: absolute;
  left: 8px;
  top: 50%;
  transform: translateY(-50%);
  color: var(--text-light);
  font-size: 10px;
  opacity: 0;
  transition: opacity 0.15s;
}

.ujCard:hover::before,
.action-card:hover::before {
  opacity: 0.5;
}

/* Action Type Colors */
.ujCard[data-type="do"],
.action-card[data-type="do"],
.action-card.type-do {
  --action-color: var(--action-do-color);
  background: var(--action-do-bg);
}

.ujCard[data-type="think"],
.action-card[data-type="think"],
.action-card.type-think {
  --action-color: var(--action-think-color);
  background: var(--action-think-bg);
}

.ujCard[data-type="feel"],
.action-card[data-type="feel"],
.action-card.type-feel {
  --action-color: var(--action-feel-color);
  background: var(--action-feel-bg);
}

.ujCard[data-type="pain"],
.action-card[data-type="pain"],
.action-card.type-pain {
  --action-color: var(--action-pain-color);
  background: var(--action-pain-bg);
}

.ujCardTop {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 6px;
  gap: 8px;
}

/* 2B. Action Type Label as Pill/Chip */
.ujBadgeSelect {
  max-width: 100px;
}

.ujBadgeBtn,
.action-type-badge {
  border: none;
  border-radius: 999px;
  padding: 3px 10px;
  font-size: 10px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  cursor: pointer;
  background: var(--bg-color);
  color: var(--text-muted);
  transition: background-color 0.15s;
}

/* Color-coded badges */
.ujBadgeBtn[data-type="do"],
.action-type-badge.type-do {
  background: var(--action-do-bg);
  color: var(--action-do-color);
}

.ujBadgeBtn[data-type="think"],
.action-type-badge.type-think {
  background: var(--action-think-bg);
  color: var(--action-think-color);
}

.ujBadgeBtn[data-type="feel"],
.action-type-badge.type-feel {
  background: var(--action-feel-bg);
  color: var(--action-feel-color);
}

.ujBadgeBtn[data-type="pain"],
.action-type-badge.type-pain {
  background: var(--action-pain-bg);
  color: var(--action-pain-color);
}

/* Card delete button - show on hover */
.ujCard .card-delete,
.action-card .card-delete {
  opacity: 0;
  transition: opacity 0.15s;
}

.ujCard:hover .card-delete,
.action-card:hover .card-delete {
  opacity: 1;
}

/* ----------------------------------------
   3. CARD TEXT & INLINE EDITING
   ---------------------------------------- */
.ujText {
  font-size: 13px;
  color: var(--text-color);
  line-height: 1.5;
}

/* Inline edit highlight */
.ujText:focus,
.action-card textarea:focus,
.action-card input:focus {
  outline: none;
  box-shadow: 0 0 0 2px rgba(251, 191, 36, 0.4);
  border-radius: 2px;
}

/* ----------------------------------------
   4. ADD BUTTON & EMPTY STATES
   ---------------------------------------- */
.ujAddBtn,
.add-action-btn {
  margin-top: 8px;
  border: none;
  background: transparent;
  padding: 6px 12px;
  border-radius: var(--radius-sm);
  font-size: 12px;
  cursor: pointer;
  color: var(--text-muted);
  opacity: 0.6;
  transition: opacity 0.15s, background-color 0.15s;
  display: inline-flex;
  align-items: center;
  gap: 6px;
}

.ujAddBtn:hover,
.add-action-btn:hover {
  opacity: 1;
  background: var(--bg-color);
  color: var(--primary-color);
}

/* Cell-level add button - show more prominently on cell hover */
.ujCell .ujAddBtn,
.ujCell .add-action-btn {
  opacity: 0.5;
}

.ujCell:hover .ujAddBtn,
.ujCell:hover .add-action-btn {
  opacity: 1;
}

/* Empty column guidance */
.empty-column-hint {
  font-size: 12px;
  color: var(--text-light);
  font-style: italic;
  text-align: center;
  padding: 20px 10px;
  opacity: 0.7;
}

/* Empty cell state */
.ujCell.empty::after {
  content: none;
}

.ujCell.empty .empty-cell-hint {
  display: block;
  font-size: 11px;
  color: var(--text-light);
  text-align: center;
  padding: 30px 10px;
}

/* ----------------------------------------
   5. ZEBRA STRIPING & ROW BACKGROUNDS
   ---------------------------------------- */
.ujRow {
  border-bottom: 1px solid var(--border-subtle);
}

.ujRow:nth-child(even),
.persona-row:nth-child(even) {
  background: #fafafa;
}

.ujRow:nth-child(even) .personaCell,
.ujRow:nth-child(even) .persona-label {
  background: #f4f5f7;
}

/* ----------------------------------------
   6. SIDEBAR IMPROVEMENTS
   ---------------------------------------- */
/* Sidebar section headers */
.ujSideHeader {
  font-size: 11px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  color: var(--text-muted);
  margin-bottom: 10px;
  padding-bottom: 8px;
  border-bottom: 1px solid var(--border-subtle);
}

/* Sidebar helper text */
.ujSideHelper {
  font-size: 11px;
  color: var(--text-light);
  margin-bottom: 12px;
  line-height: 1.5;
}

/* Persona list in sidebar */
.ujSideBody {
  margin-bottom: 20px;
}

/* Persona item in sidebar */
.ujPersonaItem {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px 10px;
  border-radius: var(--radius-sm);
  margin-bottom: 4px;
  transition: background-color 0.15s;
}

.ujPersonaItem:hover {
  background: rgba(0, 0, 0, 0.04);
}

.ujPersonaItem .persona-avatar {
  width: 28px;
  height: 28px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 11px;
  font-weight: 600;
  color: #fff;
  flex-shrink: 0;
}

.ujPersonaItem .persona-info {
  flex: 1;
  min-width: 0;
}

.ujPersonaItem .persona-name {
  font-size: 13px;
  font-weight: 500;
  color: var(--text-color);
  display: flex;
  align-items: center;
  gap: 6px;
}

.ujPersonaItem .persona-count {
  font-size: 10px;
  color: var(--text-muted);
  background: var(--bg-color);
  padding: 2px 6px;
  border-radius: 999px;
}

/* Sidebar delete icon - show on hover */
.ujPersonaItem .persona-delete {
  opacity: 0;
  transition: opacity 0.15s;
}

.ujPersonaItem:hover .persona-delete {
  opacity: 0.6;
}

.ujPersonaItem .persona-delete:hover {
  opacity: 1;
  color: var(--danger);
}

/* Action Types list in sidebar */
.ujTypeList {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.ujTypeItem {
  display: flex;
  align-items: center;
  gap: 8px;
}

/* Color indicator for action types */
.ujTypeItem::before {
  content: '';
  width: 12px;
  height: 12px;
  border-radius: 3px;
  flex-shrink: 0;
}

.ujTypeItem[data-type="do"]::before { background: var(--action-do-color); }
.ujTypeItem[data-type="think"]::before { background: var(--action-think-color); }
.ujTypeItem[data-type="feel"]::before { background: var(--action-feel-color); }
.ujTypeItem[data-type="pain"]::before { background: var(--action-pain-color); }

.ujTypeInput {
  flex: 1;
  border: 1px solid var(--border-color);
  border-radius: var(--radius-sm);
  padding: 6px 10px;
  font-size: 12px;
  background: #fff;
}

.ujTypeDel {
  border: none;
  background: transparent;
  color: var(--text-light);
  cursor: pointer;
  opacity: 0;
  transition: opacity 0.15s;
}

.ujTypeItem:hover .ujTypeDel {
  opacity: 0.6;
}

.ujTypeDel:hover {
  opacity: 1;
  color: var(--danger);
}

/* ----------------------------------------
   7. AI GENERATE BUTTON - Enhanced Visibility
   ---------------------------------------- */
.ai-generate-btn,
#aiGenerateBtn {
  background: linear-gradient(135deg, #f8f4ff 0%, #f0e6ff 100%);
  border: 1px solid rgba(139, 92, 246, 0.2);
  color: #7c3aed;
  font-weight: 500;
  transition: all 0.2s;
}

.ai-generate-btn:hover,
#aiGenerateBtn:hover {
  background: linear-gradient(135deg, #f0e6ff 0%, #e4d4ff 100%);
  border-color: rgba(139, 92, 246, 0.3);
  box-shadow: 0 2px 8px rgba(139, 92, 246, 0.15);
}

.ai-generate-btn i,
#aiGenerateBtn i {
  color: #8b5cf6;
}

/* ----------------------------------------
   8. MICRO-INTERACTIONS & ANIMATIONS
   ---------------------------------------- */
/* Smooth reflow animation for cards */
.ujCard,
.action-card {
  animation: cardFadeIn 0.15s ease-out;
}

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

/* Card being dragged */
.ujCard.dragging,
.action-card.dragging {
  opacity: 0.7;
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.15);
  transform: rotate(2deg);
  cursor: grabbing;
}

/* Drop zone highlight */
.ujCell.drop-target {
  background: rgba(99, 102, 241, 0.05);
}

.ujCell.drop-target::after {
  border-color: var(--primary-color);
  border-style: dashed;
}

/* Button hover states */
.ujSide .btn:hover,
.ujDrawerHeader .btn:hover {
  transform: translateY(-1px);
}

/* ----------------------------------------
   9. ACCESSIBILITY & CONTRAST
   ---------------------------------------- */
/* Ensure minimum contrast */
.ujText,
.action-card .card-text {
  color: #1f2937;
}

/* Increase placeholder contrast */
.ujCell input::placeholder,
.ujCell textarea::placeholder,
.action-card input::placeholder,
.action-card textarea::placeholder {
  color: #9ca3af;
}

/* Focus states for accessibility */
.ujCard:focus-within,
.action-card:focus-within {
  box-shadow: 0 0 0 2px var(--primary-color), 0 2px 8px rgba(0, 0, 0, 0.08);
}

/* Keyboard navigation indicator */
.ujCell:focus-within {
  outline: 2px solid var(--primary-color);
  outline-offset: -2px;
}

/* ----------------------------------------
   10. STEP COLUMN CARDS (Journey Designer)
   ---------------------------------------- */
.step-column {
  min-width: 280px;
  max-width: 320px;
  background: #fff;
  border-radius: 12px;
  border: 1px solid var(--border-subtle);
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.04);
  transition: box-shadow 0.2s, transform 0.2s;
  overflow: hidden;
}

.step-column:hover {
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
  transform: translateY(-2px);
}

.step-column .step-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 14px 16px 12px;
  border-bottom: 1px solid var(--border-subtle);
  background: linear-gradient(180deg, #fafbfc 0%, #fff 100%);
}

.step-column .step-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 26px;
  height: 26px;
  background: var(--primary-color);
  color: #fff;
  border-radius: 50%;
  font-size: 12px;
  font-weight: 600;
  flex-shrink: 0;
}

.step-column .card-delete {
  opacity: 0;
  transition: opacity 0.15s;
}

.step-column:hover .card-delete {
  opacity: 0.6;
}

.step-column .card-delete:hover {
  opacity: 1;
}

/* Journey steps container */
.journey-steps-container {
  display: flex;
  gap: 12px;
  align-items: flex-start;
  padding-bottom: 16px;
}

/* Arrow connector between steps */
.journey-steps-container > div:not(.step-column) {
  display: flex;
  align-items: center;
  padding: 0 4px;
  height: 100%;
  align-self: center;
}

/* Journey card styling */
.journey-card {
  position: relative;
  padding: 16px;
  border-radius: 12px;
  background: #fff;
  border: 1px solid var(--border-color);
  margin-bottom: 12px;
  transition: box-shadow 0.2s, border-color 0.2s;
}

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

.journey-card .journey-header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  margin-bottom: 8px;
}

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

.journey-card .journey-name {
  font-weight: 600;
  font-size: 15px;
  color: var(--text-color);
}

.journey-card .journey-meta {
  font-size: 12px;
  color: var(--text-muted);
}

.journey-card .journey-description {
  font-size: 13px;
  color: var(--text-muted);
  line-height: 1.5;
  margin-bottom: 12px;
}

.journey-card .journey-actions {
  display: flex;
  gap: 6px;
  opacity: 0;
  transition: opacity 0.2s;
}

.journey-card:hover .journey-actions {
  opacity: 1;
}

/* Journey steps preview */
.journey-steps-preview {
  display: flex;
  align-items: center;
  gap: 6px;
  flex-wrap: wrap;
  margin-top: 12px;
  padding-top: 12px;
  border-top: 1px solid var(--border-subtle);
}

.journey-steps-preview .step-chip {
  display: inline-flex;
  align-items: center;
  padding: 5px 12px;
  background: var(--bg-color);
  border-radius: 999px;
  font-size: 12px;
  font-weight: 500;
  color: var(--text-color);
  transition: background-color 0.15s;
}

.journey-steps-preview .step-chip:hover {
  background: #e5e7eb;
}

.journey-steps-preview .step-chip.more {
  background: transparent;
  color: var(--text-muted);
  font-weight: 400;
}

.journey-steps-preview .step-arrow {
  color: var(--text-light);
  font-size: 10px;
}

.igAddTabs {
  display: flex;
  gap: 10px;
  border-bottom: 1px solid var(--border-color);
  padding-bottom: 10px;
  margin-bottom: 12px;
}

.igAddTab {
  border: none;
  background: var(--bg-color);
  padding: 6px 12px;
  border-radius: 999px;
  font-size: 12px;
  cursor: pointer;
}

.igAddTab.active {
  background: var(--primary-color);
  color: #fff;
}

.igWizard {
  display: grid;
  grid-template-columns: 180px 1fr;
  gap: 16px;
}

.igSteps {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.igStep {
  padding: 8px 10px;
  border-radius: var(--radius-sm);
  background: var(--bg-color);
  font-size: 12px;
}

.igStep.active {
  background: #eef2ff;
  font-weight: 600;
}

.igPane {
  background: #fff;
  border: 1px solid var(--border-color);
  border-radius: var(--radius);
  padding: 12px;
}

.connectorGrid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
  gap: 12px;
}

.connectorCard {
  border: 1px solid var(--border-color);
  border-radius: var(--radius);
  padding: 12px;
  background: #fff;
  text-align: left;
  cursor: pointer;
  transition: var(--transition);
}

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

.connectorTop {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 8px;
}

.connectorIcon {
  width: 28px;
  height: 28px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--bg-color);
  border-radius: 8px;
  font-size: 14px;
}

.connectorName {
  font-weight: 600;
}

.connectorMeta {
  font-size: 11px;
  color: var(--text-muted);
  margin-top: 4px;
}

.mcpLayout {
  display: grid;
  grid-template-columns: 1.4fr 1fr;
  gap: 16px;
}

.mcpList {
  border-right: 1px solid var(--border-color);
  padding-right: 12px;
  max-height: 560px;
  overflow: auto;
}

.mcpPreview {
  padding-left: 4px;
}

.mcpGrid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
  gap: 10px;
}

.mcpCard {
  border: 1px solid var(--border-color);
  border-radius: var(--radius);
  padding: 12px;
  background: #fff;
  text-align: left;
  cursor: pointer;
}

.mcpCard.active {
  border-color: var(--primary-color);
  box-shadow: var(--shadow-sm);
}

.mcpCardTitle {
  font-weight: 600;
}

.mcpCardMeta {
  font-size: 11px;
  color: var(--text-muted);
  margin-top: 4px;
}

.deployWizard {
  display: grid;
  grid-template-columns: 160px 1.3fr 1fr;
  gap: 16px;
}

.deployMain {
  padding-right: 6px;
}

.deployPreview {
  padding-left: 6px;
}

.deploySidebar {
  border-right: 1px solid var(--border-color);
  padding-right: 10px;
}

.deploySidebarTitle {
  font-size: 12px;
  text-transform: uppercase;
  color: var(--text-muted);
  margin-bottom: 8px;
}

.deployTypeBtn {
  width: 100%;
  border: 1px solid var(--border-color);
  background: #fff;
  border-radius: var(--radius-sm);
  padding: 8px;
  text-align: left;
  margin-bottom: 6px;
  cursor: pointer;
}

.deployTypeBtn.active {
  border-color: var(--primary-color);
  background: #eef2ff;
}

.deployListHeader {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 8px;
}

.deployGrid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
  gap: 12px;
}

.deployCard {
  border: 1px solid var(--border-color);
  border-radius: var(--radius);
  padding: 12px;
  background: #fff;
  text-align: left;
  cursor: pointer;
  transition: var(--transition);
}

.deployCardTop {
  display: flex;
  gap: 6px;
  flex-wrap: wrap;
  margin-bottom: 6px;
}

.deployCard.active {
  border-color: var(--primary-color);
  box-shadow: var(--shadow-sm);
}

.deployCardTitle {
  font-weight: 600;
}

.deployCardMeta {
  font-size: 11px;
  color: var(--text-muted);
  margin-top: 4px;
}

.diagramCanvas {
  width: 100%;
  border: 1px solid var(--border-color);
  border-radius: var(--radius);
  background: #fff;
}

.archTable {
  display: grid;
  gap: 8px;
}

.archRow {
  display: grid;
  grid-template-columns: 1fr 1.2fr 1fr 1.2fr 120px;
  gap: 8px;
  align-items: center;
}

.colorList,
.typeList {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.colorRow,
.typeRow {
  display: flex;
  align-items: center;
  gap: 12px;
  border: 1px solid var(--border-color);
  border-radius: var(--radius-sm);
  padding: 8px;
}

.colorName {
  font-weight: 600;
  font-size: 12px;
}

.typeMeta {
  min-width: 160px;
}

.colorSwatch {
  width: 32px;
  height: 32px;
  border-radius: 8px;
  border: 1px solid var(--border-color);
}

.typePreview {
  flex: 1;
  font-size: 12px;
  color: var(--text-muted);
}

.typeSampleInput {
  width: 100%;
  border: 1px dashed var(--border-color);
  border-radius: var(--radius-sm);
  padding: 6px 8px;
  background: #fff;
  font-size: 12px;
  color: var(--text-muted);
}

.chipWrap {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

.chipItem {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 4px 8px;
  background: var(--bg-color);
  border: 1px solid var(--border-color);
  border-radius: 999px;
  font-size: 11px;
}

.chipRemoveBtn {
  border: none;
  background: transparent;
  color: var(--text-muted);
  cursor: pointer;
  font-size: 10px;
}

.switchRow {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 12px;
  color: var(--text-muted);
}

.switch {
  position: relative;
  display: inline-block;
  width: 42px;
  height: 22px;
}

.switch input {
  opacity: 0;
  width: 0;
  height: 0;
}

.switch .slider {
  position: absolute;
  inset: 0;
  background: #e2e8f0;
  border-radius: 999px;
  transition: 0.2s;
}

.switch .slider::before {
  content: "";
  position: absolute;
  height: 16px;
  width: 16px;
  left: 3px;
  top: 3px;
  background: #fff;
  border-radius: 50%;
  transition: 0.2s;
}

.switch input:checked + .slider {
  background: var(--primary-color);
}

.switch input:checked + .slider::before {
  transform: translateX(20px);
}

.treeView {
  border: 1px solid var(--border-color);
  border-radius: var(--radius);
  padding: 12px;
  background: #fff;
  max-height: 240px;
  overflow: auto;
}

.treeNode {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 2px 0;
}

.treeBullet {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--primary-color);
}

.checkGrid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
  gap: 8px;
}

.agentTabs {
  display: flex;
  gap: 8px;
  margin-bottom: 12px;
}

.agentTab {
  border: none;
  background: var(--bg-color);
  padding: 6px 12px;
  border-radius: 999px;
  cursor: pointer;
  font-size: 12px;
}

.agentTab.active {
  background: var(--primary-color);
  color: #fff;
}

.agentPane {
  display: none;
}

.agentPane.active {
  display: block;
}

.fileList,
.historyList {
  margin-top: 12px;
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.fileRow {
  border: 1px solid var(--border-color);
  border-radius: var(--radius-sm);
  padding: 8px;
  display: grid;
  grid-template-columns: 160px 1fr auto;
  gap: 8px;
  align-items: center;
  cursor: pointer;
}

.fileRow.active {
  border-color: var(--primary-color);
  box-shadow: var(--shadow-sm);
}

.fileName {
  font-weight: 600;
  font-size: 12px;
}

.fileSnippet {
  font-size: 11px;
  color: var(--text-muted);
}

.historyRow {
  border: 1px solid var(--border-color);
  border-radius: var(--radius-sm);
  padding: 8px;
}

.historyMeta {
  font-size: 11px;
  color: var(--text-muted);
  margin-bottom: 4px;
}

.historyPrompt {
  font-weight: 600;
  font-size: 12px;
}

.historyResponse {
  font-size: 12px;
  color: var(--text-muted);
  margin-top: 4px;
}

.filePreview {
  border: 1px solid var(--border-color);
  border-radius: var(--radius);
  padding: 10px;
  background: #f8fafc;
}

.filePreviewHeader {
  font-weight: 600;
  font-size: 12px;
  margin-bottom: 6px;
}

.filePreviewBody {
  background: #0f172a;
  color: #e2e8f0;
  padding: 10px;
  border-radius: var(--radius-sm);
  font-family: var(--font-mono);
  font-size: 12px;
  white-space: pre-wrap;
  max-height: 240px;
  overflow: auto;
}

.logBlock {
  background: #0f172a;
  color: #e2e8f0;
  padding: 12px;
  border-radius: var(--radius);
  font-family: var(--font-mono);
  font-size: 12px;
  white-space: pre-wrap;
}

@media (max-width: 980px) {
  .igWizard,
  .mcpLayout,
  .deployWizard {
    grid-template-columns: 1fr;
  }

  .archRow {
    grid-template-columns: 1fr;
  }

  .fileRow {
    grid-template-columns: 1fr;
  }
}

/* ========================================
   Application Overview Section
   ======================================== */

/* Section Form Layout */
.section-form {
  display: flex;
  flex-direction: column;
  gap: 20px;
  padding: 20px;
  width: 100%;
}

.section-form .card {
  background: var(--panel-bg);
  border: 1px solid var(--border-color);
  border-radius: var(--radius);
}

.section-form .card-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 16px 20px;
  border-bottom: 1px solid var(--border-color);
}

.section-form .card-title {
  font-size: 14px;
  font-weight: 600;
  color: var(--text-color);
  margin: 0;
}

.section-form .card-body {
  padding: 20px;
  display: flex;
  flex-direction: column;
  gap: 16px;
}

/* Form Elements */
.form-group {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.form-group.inline {
  flex-direction: row;
  align-items: center;
  gap: 8px;
}

.form-group.inline label {
  font-size: 12px;
  color: var(--text-muted);
  white-space: nowrap;
}

.form-hint {
  font-size: 11px;
  color: var(--text-muted);
}

.required {
  color: var(--danger);
}

.form-select {
  padding: 8px 32px 8px 12px;
  border: 1px solid var(--border-color);
  border-radius: var(--radius-sm);
  background: var(--panel-bg) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Cpath fill='%236b7280' d='M3 4.5L6 7.5L9 4.5'/%3E%3C/svg%3E") no-repeat right 10px center;
  font-size: 13px;
  color: var(--text-color);
  cursor: pointer;
  appearance: none;
  outline: none;
}

.form-select:focus {
  border-color: var(--primary-color);
}

.form-select.sm {
  padding: 6px 28px 6px 10px;
  font-size: 12px;
}

.form-input.sm {
  padding: 6px 10px;
  font-size: 12px;
}

/* Item Lists (Problem Statement) */
.item-list {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.item-row {
  display: flex;
  gap: 8px;
  align-items: center;
}

.item-row .form-input {
  flex: 1;
}

.empty-hint {
  font-size: 13px;
  color: var(--text-muted);
  font-style: italic;
  padding: 8px 0;
}

/* Chip List (Approval States) */
.chip-list {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.chip-item {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 6px 10px;
  background: var(--bg-color);
  border: 1px solid var(--border-color);
  border-radius: 16px;
  font-size: 12px;
}

.chip-text {
  outline: none;
  cursor: text;
}

.chip-text:focus {
  background: var(--panel-bg);
  padding: 2px 6px;
  margin: -2px -6px;
  border-radius: 4px;
}

.chip-remove {
  background: none;
  border: none;
  color: var(--text-muted);
  cursor: pointer;
  padding: 0;
  font-size: 10px;
  line-height: 1;
}

.chip-remove:hover {
  color: var(--danger);
}

/* Form Actions */
.form-actions {
  display: flex;
  gap: 12px;
  padding-top: 8px;
}

/* Card Nested */
.card-nested {
  background: var(--bg-color);
  border: 1px solid var(--border-light);
  border-radius: var(--radius-sm);
  padding: 16px;
}

/* Goals Section */
.goals-list {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.goal-item {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.goal-header {
  display: flex;
  align-items: center;
  gap: 12px;
}

.goal-number {
  width: 28px;
  height: 28px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--primary-color);
  color: white;
  border-radius: 50%;
  font-size: 12px;
  font-weight: 600;
  flex-shrink: 0;
}

.goal-title {
  flex: 1;
  font-weight: 500;
}

.goal-body {
  display: flex;
  flex-direction: column;
  gap: 12px;
  padding-left: 40px;
}

.goal-meta {
  display: flex;
  gap: 20px;
  flex-wrap: wrap;
}

/* Timeline Section */
.timeline-list {
  display: flex;
  flex-direction: column;
  gap: 0;
  position: relative;
}

.timeline-item {
  display: flex;
  gap: 16px;
  position: relative;
  padding-left: 24px;
}

.timeline-item:not(:last-child) {
  padding-bottom: 20px;
}

.timeline-item:not(:last-child)::before {
  content: "";
  position: absolute;
  left: 7px;
  top: 24px;
  bottom: 0;
  width: 2px;
  background: var(--border-color);
}

.timeline-marker {
  position: absolute;
  left: 0;
  top: 6px;
  width: 16px;
  height: 16px;
  border-radius: 50%;
  background: var(--border-color);
  border: 3px solid var(--panel-bg);
  box-shadow: 0 0 0 2px var(--border-color);
  z-index: 1;
}

.timeline-marker.active {
  background: var(--primary-color);
  box-shadow: 0 0 0 2px var(--primary-color);
}

.timeline-marker.completed {
  background: var(--success);
  box-shadow: 0 0 0 2px var(--success);
}

.timeline-content {
  flex: 1;
}

.timeline-header {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 12px;
}

.timeline-title {
  flex: 1;
  font-weight: 500;
}

.timeline-body {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.timeline-meta {
  display: flex;
  gap: 16px;
  flex-wrap: wrap;
}

/* ========================================
   Gantt Chart Styles
   ======================================== */
.gantt-container {
  background: linear-gradient(135deg, #f8fafc 0%, #f1f5f9 100%);
  border-radius: var(--radius-lg);
  padding: 20px;
  margin-bottom: 24px;
  border: 1px solid var(--border-light);
  overflow-x: auto;
}

.gantt-header {
  position: relative;
  height: 32px;
  margin-bottom: 8px;
  border-bottom: 1px solid var(--border-color);
}

.gantt-month {
  position: absolute;
  top: 0;
  font-size: 11px;
  font-weight: 600;
  color: var(--text-muted);
  text-transform: uppercase;
  letter-spacing: 0.5px;
  white-space: nowrap;
  padding-bottom: 8px;
}

.gantt-body {
  position: relative;
  min-height: 100px;
}

.gantt-today {
  position: absolute;
  top: 0;
  bottom: 0;
  width: 2px;
  background: var(--danger);
  z-index: 10;
  opacity: 0.7;
}

.gantt-today span {
  position: absolute;
  top: -20px;
  left: 50%;
  transform: translateX(-50%);
  font-size: 10px;
  font-weight: 600;
  color: var(--danger);
  background: white;
  padding: 2px 6px;
  border-radius: 4px;
  white-space: nowrap;
}

.gantt-row {
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 8px 0;
  min-height: 40px;
}

.gantt-row:not(:last-child) {
  border-bottom: 1px solid rgba(0, 0, 0, 0.04);
}

.gantt-label {
  width: 140px;
  min-width: 140px;
  font-size: 13px;
  font-weight: 500;
  color: var(--text-color);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.gantt-track {
  flex: 1;
  position: relative;
  height: 24px;
  background: rgba(0, 0, 0, 0.03);
  border-radius: 12px;
  overflow: hidden;
}

.gantt-bar {
  position: absolute;
  top: 3px;
  height: 18px;
  border-radius: 9px;
  transition: all 0.2s ease;
  cursor: pointer;
}

.gantt-bar:hover {
  transform: scaleY(1.1);
  filter: brightness(1.05);
}

/* Gantt bar status colors */
.gantt-bar--planned {
  background: linear-gradient(90deg, #94a3b8 0%, #64748b 100%);
}

.gantt-bar--in_progress {
  background: linear-gradient(90deg, #3b82f6 0%, #2563eb 100%);
  box-shadow: 0 2px 8px rgba(59, 130, 246, 0.3);
}

.gantt-bar--completed {
  background: linear-gradient(90deg, #10b981 0%, #059669 100%);
  box-shadow: 0 2px 8px rgba(16, 185, 129, 0.3);
}

.gantt-bar--delayed {
  background: linear-gradient(90deg, #f59e0b 0%, #d97706 100%);
  box-shadow: 0 2px 8px rgba(245, 158, 11, 0.3);
}

.gantt-bar--cancelled {
  background: linear-gradient(90deg, #ef4444 0%, #dc2626 100%);
  opacity: 0.6;
}

.gantt-no-bar {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 100%;
  font-size: 11px;
  color: var(--text-light);
  font-style: italic;
}

.gantt-no-dates {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  padding: 20px;
  background: var(--bg-color);
  border-radius: var(--radius);
  margin-bottom: 20px;
  color: var(--text-muted);
  font-size: 13px;
}

.gantt-no-dates i {
  font-size: 18px;
  opacity: 0.6;
}

/* ========================================
   Milestone Card Styles
   ======================================== */
.timeline-list {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
  gap: 16px;
}

.milestone-card {
  background: var(--panel-bg);
  border: 1px solid var(--border-color);
  border-radius: var(--radius);
  padding: 16px;
  transition: all 0.2s ease;
}

.milestone-card:hover {
  border-color: var(--primary-color);
  box-shadow: 0 4px 12px rgba(45, 43, 135, 0.08);
}

.milestone-card__header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 10px;
}

.milestone-card__status {
  display: inline-flex;
  align-items: center;
  padding: 4px 10px;
  border-radius: 20px;
  font-size: 11px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.3px;
}

.status-badge--planned {
  background: rgba(100, 116, 139, 0.12);
  color: #475569;
}

.status-badge--in_progress {
  background: rgba(59, 130, 246, 0.12);
  color: #2563eb;
}

.status-badge--completed {
  background: rgba(16, 185, 129, 0.12);
  color: #059669;
}

.status-badge--delayed {
  background: rgba(245, 158, 11, 0.12);
  color: #d97706;
}

.status-badge--cancelled {
  background: rgba(239, 68, 68, 0.12);
  color: #dc2626;
  text-decoration: line-through;
}

.milestone-card__actions {
  display: flex;
  gap: 4px;
  opacity: 0;
  transition: opacity 0.2s ease;
}

.milestone-card:hover .milestone-card__actions {
  opacity: 1;
}

.milestone-card__title {
  font-size: 15px;
  font-weight: 600;
  color: var(--text-color);
  margin: 0 0 8px 0;
  line-height: 1.4;
}

.milestone-card__dates {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 13px;
  color: var(--text-muted);
  margin-bottom: 8px;
}

.milestone-card__dates i {
  color: var(--primary-color);
  opacity: 0.7;
}

.milestone-card__desc {
  font-size: 13px;
  color: var(--text-muted);
  margin: 0;
  line-height: 1.5;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

/* Team Members Section */
.add-member-form {
  background: var(--bg-color);
  border-radius: var(--radius-sm);
  padding: 16px;
  margin-bottom: 20px;
}

.add-member-row {
  display: flex;
  gap: 12px;
  align-items: center;
  flex-wrap: wrap;
}

.member-input-group {
  display: flex;
  align-items: center;
  gap: 10px;
  flex: 1;
  min-width: 200px;
  padding: 0 12px;
  background: var(--panel-bg);
  border: 1px solid var(--border-color);
  border-radius: var(--radius-sm);
}

.member-input-group i {
  color: var(--text-muted);
}

.member-input-group .form-input {
  border: none;
  padding: 10px 0;
  flex: 1;
}

.member-input-group .form-input:focus {
  outline: none;
  box-shadow: none;
}

.members-list {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.member-item {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px 16px;
  background: var(--bg-color);
  border-radius: var(--radius-sm);
  transition: var(--transition);
}

.member-item:hover {
  background: var(--border-light);
}

.member-avatar {
  width: 36px;
  height: 36px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--primary-color);
  color: white;
  border-radius: 50%;
  font-size: 14px;
}

.member-info {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
}

.member-name {
  font-size: 13px;
  font-weight: 500;
  color: var(--text-color);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.member-email {
  font-size: 12px;
  color: var(--text-muted);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.member-role {
  min-width: 140px;
}

.member-status .status-badge {
  display: inline-block;
  padding: 4px 8px;
  border-radius: 12px;
  font-size: 11px;
  font-weight: 500;
  text-transform: capitalize;
}

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

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

.member-actions {
  opacity: 0;
  transition: var(--transition);
}

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

/* Collapsed Card */
.collapsed-card .card-header.clickable {
  cursor: pointer;
}

.collapsed-card .card-header.clickable:hover {
  background: var(--bg-color);
}

.toggle-icon {
  transition: transform 0.2s;
  margin-right: 8px;
}

/* Roles Grid */
.roles-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
  gap: 12px;
}

.role-card {
  background: var(--bg-color);
  border-radius: var(--radius-sm);
  padding: 12px;
}

.role-name {
  font-size: 13px;
  font-weight: 600;
  color: var(--text-color);
  margin-bottom: 4px;
}

.role-desc {
  font-size: 12px;
  color: var(--text-muted);
  margin-bottom: 8px;
}

.role-perms {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
}

.perm-tag {
  padding: 2px 6px;
  background: var(--panel-bg);
  border: 1px solid var(--border-color);
  border-radius: 4px;
  font-size: 10px;
  color: var(--text-muted);
}

/* Risks Section */
.risks-list {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.risk-item {
  display: flex;
  flex-direction: column;
  gap: 12px;
  border-left: 3px solid var(--border-color);
}

.risk-item.low {
  border-left-color: var(--success);
}

.risk-item.medium {
  border-left-color: var(--warning);
}

.risk-item.high {
  border-left-color: var(--danger);
}

.risk-item.critical {
  border-left-color: #7c3aed;
}

.risk-header {
  display: flex;
  align-items: center;
  gap: 12px;
}

.risk-severity-indicator {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--border-color);
  flex-shrink: 0;
}

.risk-severity-indicator.low {
  background: var(--success);
}

.risk-severity-indicator.medium {
  background: var(--warning);
}

.risk-severity-indicator.high {
  background: var(--danger);
}

.risk-severity-indicator.critical {
  background: #7c3aed;
}

.risk-title {
  flex: 1;
  font-weight: 500;
}

.risk-body {
  display: flex;
  flex-direction: column;
  gap: 12px;
  padding-left: 20px;
}

.risk-meta {
  display: flex;
  gap: 16px;
  flex-wrap: wrap;
}

/* Button Variants */
.btn.secondary {
  background: var(--bg-color);
  border-color: var(--border-color);
  color: var(--text-color);
}

.btn.secondary:hover {
  background: var(--border-light);
}

.btn.danger,
.btn.ghost.danger {
  color: var(--danger);
}

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

/* Flex utilities */
.flex-1 {
  flex: 1;
}

@media (max-width: 768px) {
  .sidebar {
    transform: translateX(-100%);
  }
  
  .sidebar.open {
    transform: translateX(0);
  }
  
  .main-content {
    margin-left: 0;
  }
  
  .header-center {
    display: none;
  }
  
  .welcome-banner {
    padding: 24px;
  }
  
  .welcome-title {
    font-size: 22px;
  }
  
  .grid,
  .grid-3 {
    grid-template-columns: 1fr;
  }
  
  .app-builder-container {
    flex-direction: column;
  }
  
  .workspace-panel {
    width: 100%;
    min-width: 100%;
    max-height: 300px;
  }
  
  .ai-panel {
    width: 100%;
  }
}

/* ========================================
   VIEW COMPONENTS (New modular views)
   ======================================== */

/* List Item Component */
.list-item {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  padding: 12px 16px;
  background: var(--panel-bg);
  border: 1px solid var(--border-color);
  border-radius: var(--radius-sm);
  margin-bottom: 8px;
  transition: var(--transition);
}

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

.list-item-content {
  display: flex;
  flex-direction: column;
  gap: 4px;
  flex: 1;
  min-width: 0;
}

.list-item-content .list-item-badge {
  width: fit-content;
  margin-bottom: 4px;
}

.list-item-title {
  font-weight: 500;
  color: var(--text-color);
}

.list-item-desc {
  font-size: 13px;
  color: var(--text-muted);
}

.list-item-date {
  font-size: 12px;
  color: var(--text-muted);
  display: flex;
  align-items: center;
  gap: 4px;
}

.list-item-actions {
  display: flex;
  align-items: center;
  gap: 4px;
  opacity: 0;
  transition: opacity 0.2s;
}

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

.list-item-badge {
  display: inline-block;
  padding: 2px 8px;
  border-radius: 9999px;
  font-size: 11px;
  font-weight: 500;
  text-transform: capitalize;
}

.list-item-badge.in {
  background: rgba(16, 185, 129, 0.1);
  color: var(--success);
}

.list-item-badge.out {
  background: rgba(239, 68, 68, 0.1);
  color: var(--danger);
}

/* Priority badges */
.priority-badge.priority-wont,
.badge.priority-wont,
.list-item-badge.priority-low,
.badge.priority-low {
  background: rgba(107, 114, 128, 0.1);
  color: var(--text-muted);
}

.priority-badge.priority-could,
.badge.priority-could,
.list-item-badge.priority-medium,
.badge.priority-medium {
  background: rgba(59, 130, 246, 0.1);
  color: var(--info);
}

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

.priority-badge.priority-must,
.badge.priority-must,
.list-item-badge.priority-critical,
.badge.priority-critical {
  background: rgba(239, 68, 68, 0.1);
  color: var(--danger);
}

/* Severity badges */
.list-item-badge.severity-low,
.badge.severity-low {
  background: rgba(107, 114, 128, 0.1);
  color: var(--text-muted);
}

.list-item-badge.severity-medium,
.badge.severity-medium {
  background: rgba(245, 158, 11, 0.1);
  color: var(--warning);
}

.list-item-badge.severity-high,
.badge.severity-high {
  background: rgba(239, 68, 68, 0.1);
  color: var(--danger);
}

.list-item-badge.severity-critical,
.badge.severity-critical {
  background: rgba(220, 38, 38, 0.15);
  color: #dc2626;
}

/* ========================================
   Risk Management UI - Enhanced
   ======================================== */

/* Risk Summary Cards */
.risks-summary-cards {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 16px;
  margin-bottom: 20px;
}

@media (max-width: 1200px) {
  .risks-summary-cards {
    grid-template-columns: repeat(3, 1fr);
  }
}

@media (max-width: 768px) {
  .risks-summary-cards {
    grid-template-columns: repeat(2, 1fr);
  }
}

.risk-summary-card {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 16px;
  background: var(--panel-bg);
  border-radius: var(--radius-lg);
  border: 1px solid var(--border-color);
  transition: transform 0.2s, box-shadow 0.2s;
}

.risk-summary-card:hover {
  transform: translateY(-2px);
  box-shadow: var(--shadow-md);
}

.risk-summary-icon {
  width: 48px;
  height: 48px;
  border-radius: var(--radius);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 20px;
}

.risk-summary-card.total .risk-summary-icon {
  background: rgba(99, 102, 241, 0.1);
  color: #6366f1;
}

.risk-summary-card.critical .risk-summary-icon {
  background: rgba(220, 38, 38, 0.1);
  color: #dc2626;
}

.risk-summary-card.high .risk-summary-icon {
  background: rgba(234, 88, 12, 0.1);
  color: #ea580c;
}

.risk-summary-card.mitigating .risk-summary-icon {
  background: rgba(245, 158, 11, 0.1);
  color: #f59e0b;
}

.risk-summary-card.resolved .risk-summary-icon {
  background: rgba(16, 185, 129, 0.1);
  color: #10b981;
}

.risk-summary-content {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.risk-summary-value {
  font-size: 24px;
  font-weight: 700;
  color: var(--text-color);
  line-height: 1;
}

.risk-summary-label {
  font-size: 12px;
  color: var(--text-muted);
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

/* Risk Heatmap */
.risk-heatmap-card {
  margin-bottom: 20px;
}

.risk-heatmap-card .card-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.risk-heatmap-card .card-subtitle {
  font-size: 12px;
  color: var(--text-muted);
}

.risk-heatmap-container {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 20px;
}

.risk-heatmap-y-label {
  writing-mode: vertical-rl;
  text-orientation: mixed;
  transform: rotate(180deg);
  position: absolute;
  left: 10px;
  font-size: 12px;
  font-weight: 600;
  color: var(--text-muted);
  text-transform: uppercase;
  letter-spacing: 1px;
}

.risk-heatmap-container {
  position: relative;
  padding-left: 40px;
}

.risk-heatmap-x-label {
  margin-top: 12px;
  font-size: 12px;
  font-weight: 600;
  color: var(--text-muted);
  text-transform: uppercase;
  letter-spacing: 1px;
}

.risk-heatmap-grid {
  display: grid;
  grid-template-columns: 100px repeat(4, 1fr);
  gap: 4px;
  max-width: 500px;
  width: 100%;
}

.heatmap-corner {
  background: transparent;
}

.heatmap-col-header,
.heatmap-row-header {
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 11px;
  font-weight: 600;
  color: var(--text-muted);
  text-transform: uppercase;
  padding: 8px 4px;
}

.heatmap-row-header {
  justify-content: flex-end;
  padding-right: 12px;
}

.heatmap-cell {
  aspect-ratio: 1;
  min-height: 50px;
  border-radius: var(--radius);
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: transform 0.15s, box-shadow 0.15s;
  position: relative;
}

.heatmap-cell:hover {
  transform: scale(1.05);
  box-shadow: var(--shadow-md);
  z-index: 1;
}

.heatmap-cell.heatmap-empty {
  background: var(--bg-color);
  border: 1px dashed var(--border-color);
}

.heatmap-cell.heatmap-low {
  background: linear-gradient(135deg, #d1fae5 0%, #a7f3d0 100%);
  border: 1px solid #6ee7b7;
}

.heatmap-cell.heatmap-medium {
  background: linear-gradient(135deg, #fef3c7 0%, #fde68a 100%);
  border: 1px solid #fbbf24;
}

.heatmap-cell.heatmap-high {
  background: linear-gradient(135deg, #fed7aa 0%, #fdba74 100%);
  border: 1px solid #f97316;
}

.heatmap-cell.heatmap-critical {
  background: linear-gradient(135deg, #fecaca 0%, #fca5a5 100%);
  border: 1px solid #ef4444;
}

.heatmap-count {
  font-size: 16px;
  font-weight: 700;
  color: rgba(0, 0, 0, 0.7);
}

.heatmap-legend {
  display: flex;
  gap: 20px;
  justify-content: center;
  margin-top: 20px;
  padding-top: 16px;
  border-top: 1px solid var(--border-color);
}

.heatmap-legend-item {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 12px;
  color: var(--text-muted);
}

.heatmap-legend-color {
  width: 16px;
  height: 16px;
  border-radius: 4px;
}

.heatmap-legend-color.heatmap-low {
  background: linear-gradient(135deg, #d1fae5 0%, #a7f3d0 100%);
  border: 1px solid #6ee7b7;
}

.heatmap-legend-color.heatmap-medium {
  background: linear-gradient(135deg, #fef3c7 0%, #fde68a 100%);
  border: 1px solid #fbbf24;
}

.heatmap-legend-color.heatmap-high {
  background: linear-gradient(135deg, #fed7aa 0%, #fdba74 100%);
  border: 1px solid #f97316;
}

.heatmap-legend-color.heatmap-critical {
  background: linear-gradient(135deg, #fecaca 0%, #fca5a5 100%);
  border: 1px solid #ef4444;
}

/* Risk Cards Grid */
.risks-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(400px, 1fr));
  gap: 16px;
}

@media (max-width: 500px) {
  .risks-grid {
    grid-template-columns: 1fr;
  }
}

/* Enhanced Risk Card */
.risk-card-enhanced {
  background: var(--panel-bg);
  border-radius: var(--radius-lg);
  border: 1px solid var(--border-color);
  overflow: hidden;
  transition: box-shadow 0.2s, transform 0.2s;
}

.risk-card-enhanced:hover {
  box-shadow: var(--shadow-md);
  transform: translateY(-2px);
}

.risk-card-enhanced[data-severity="critical"] {
  border-left: 4px solid #dc2626;
}

.risk-card-enhanced[data-severity="high"] {
  border-left: 4px solid #ea580c;
}

.risk-card-enhanced[data-severity="medium"] {
  border-left: 4px solid #d97706;
}

.risk-card-enhanced[data-severity="low"] {
  border-left: 4px solid #059669;
}

.risk-card-header {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  padding: 16px;
  border-left: 4px solid transparent;
}

.risk-card-severity-icon {
  width: 44px;
  height: 44px;
  border-radius: var(--radius);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 18px;
  flex-shrink: 0;
}

.risk-card-title-section {
  flex: 1;
  min-width: 0;
}

.risk-card-title {
  font-size: 15px;
  font-weight: 600;
  color: var(--text-color);
  margin: 0 0 8px 0;
  line-height: 1.3;
}

.risk-card-badges {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

.risk-badge {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 3px 8px;
  border-radius: 4px;
  font-size: 11px;
  font-weight: 500;
  text-transform: capitalize;
}

.risk-badge.severity-critical {
  background: rgba(220, 38, 38, 0.1);
  color: #dc2626;
}

.risk-badge.severity-high {
  background: rgba(234, 88, 12, 0.1);
  color: #ea580c;
}

.risk-badge.severity-medium {
  background: rgba(217, 119, 6, 0.1);
  color: #d97706;
}

.risk-badge.severity-low {
  background: rgba(5, 150, 105, 0.1);
  color: #059669;
}

.risk-badge.likelihood-very_high,
.risk-badge.likelihood-high {
  background: rgba(239, 68, 68, 0.1);
  color: #ef4444;
}

.risk-badge.likelihood-medium {
  background: rgba(245, 158, 11, 0.1);
  color: #f59e0b;
}

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

.risk-card-actions {
  display: flex;
  gap: 4px;
  opacity: 0;
  transition: opacity 0.2s;
}

.risk-card-enhanced:hover .risk-card-actions {
  opacity: 1;
}

.risk-card-description {
  display: flex;
  gap: 10px;
  padding: 0 16px 12px 16px;
  color: var(--text-muted);
  font-size: 13px;
  line-height: 1.5;
}

.risk-card-description i {
  color: var(--text-muted);
  opacity: 0.5;
  margin-top: 2px;
}

.risk-card-description p {
  margin: 0;
}

.risk-card-mitigation {
  margin: 0 16px 12px 16px;
  padding: 12px;
  background: rgba(16, 185, 129, 0.05);
  border: 1px solid rgba(16, 185, 129, 0.2);
  border-radius: var(--radius);
}

.risk-card-mitigation .mitigation-header {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 6px;
  color: #059669;
  font-size: 12px;
}

.risk-card-mitigation p {
  margin: 0;
  font-size: 13px;
  color: var(--text-color);
  line-height: 1.5;
}

.risk-card-footer {
  padding: 12px 16px;
  background: var(--bg-color);
  border-top: 1px solid var(--border-color);
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.risk-score-indicator {
  display: flex;
  align-items: center;
  gap: 8px;
}

.risk-score-label {
  font-size: 12px;
  color: var(--text-muted);
}

.risk-score-value {
  font-size: 14px;
  font-weight: 700;
  padding: 2px 8px;
  border-radius: 4px;
}

.risk-score-value.severity-critical {
  background: rgba(220, 38, 38, 0.1);
  color: #dc2626;
}

.risk-score-value.severity-high {
  background: rgba(234, 88, 12, 0.1);
  color: #ea580c;
}

.risk-score-value.severity-medium {
  background: rgba(217, 119, 6, 0.1);
  color: #d97706;
}

.risk-score-value.severity-low {
  background: rgba(5, 150, 105, 0.1);
  color: #059669;
}

/* Status badges */
.badge.status-planned,
.list-item-badge.status-planned {
  background: rgba(107, 114, 128, 0.1);
  color: var(--text-muted);
}

.badge.status-in_progress,
.list-item-badge.status-in_progress {
  background: rgba(59, 130, 246, 0.1);
  color: var(--info);
}

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

.badge.status-delayed,
.list-item-badge.status-delayed {
  background: rgba(245, 158, 11, 0.1);
  color: var(--warning);
}

.badge.status-cancelled,
.list-item-badge.status-cancelled {
  background: rgba(239, 68, 68, 0.1);
  color: var(--danger);
}

/* Card Item Component */
.card-item {
  background: var(--panel-bg);
  border: 1px solid var(--border-color);
  border-radius: var(--radius);
  padding: 16px;
  margin-bottom: 12px;
  transition: var(--transition);
}

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

.card-item.full-width {
  width: 100%;
}

/* Rule Item */
.rule-item .rule-header,
.process-card .process-header,
.integration-card .integration-header,
.journey-card .journey-header,
.table-card .table-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 8px;
}

.rule-item .rule-info,
.process-card .process-info,
.integration-card .integration-info,
.journey-card .journey-info,
.table-card .table-info {
  display: flex;
  align-items: center;
  gap: 8px;
}

.rule-item .rule-id {
  font-weight: 600;
  color: var(--primary-color);
  font-family: var(--font-mono);
  font-size: 12px;
}

.rule-item .rule-name,
.process-card .process-name,
.integration-card .integration-name,
.journey-card .journey-name,
.table-card .table-name {
  font-weight: 600;
  color: var(--text-color);
}

.rule-item .rule-badges,
.process-card .process-badges,
.integration-card .integration-badges {
  display: flex;
  gap: 6px;
}

.rule-item .rule-actions,
.process-card .process-actions,
.integration-card .integration-actions,
.journey-card .journey-actions,
.table-card .table-actions {
  display: flex;
  gap: 4px;
  opacity: 0;
  transition: opacity 0.2s;
}

.card-item:hover .rule-actions,
.card-item:hover .process-actions,
.card-item:hover .integration-actions,
.card-item:hover .journey-actions,
.card-item:hover .table-actions {
  opacity: 1;
}

.rule-item .rule-description,
.process-card .process-description,
.integration-card .integration-description,
.journey-card .journey-description,
.table-card .table-description {
  font-size: 13px;
  color: var(--text-muted);
  margin-bottom: 8px;
}

.rule-item .rule-trigger,
.integration-card .integration-endpoint {
  font-size: 12px;
  color: var(--text-muted);
  margin-bottom: 8px;
}

.integration-card .integration-endpoint code {
  background: var(--bg-color);
  padding: 2px 6px;
  border-radius: var(--radius-sm);
  font-family: var(--font-mono);
  font-size: 11px;
}

.rule-item .rule-details {
  font-size: 12px;
}

.rule-item .rule-section {
  margin-bottom: 6px;
}

.rule-item .rule-list {
  margin: 4px 0 0 16px;
  padding: 0;
  color: var(--text-muted);
}

/* Enhanced Business Rule Cards */
.rule-card {
  position: relative;
  padding: 18px 18px 16px 22px;
  border-radius: 16px;
  background: linear-gradient(180deg, var(--panel-bg) 0%, rgba(248, 250, 252, 0.65) 100%);
  border: 1px solid var(--border-color);
  box-shadow: var(--shadow-sm);
  overflow: hidden;
}

.rule-card::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  width: 4px;
  background: linear-gradient(180deg, var(--primary-color), #22c55e);
  border-radius: 16px 0 0 16px;
  opacity: 0.9;
}

.rule-card .rule-card-top {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
}

.rule-card .rule-title-group {
  display: flex;
  flex-direction: column;
  gap: 8px;
  flex: 1;
  min-width: 0;
}

.rule-card .rule-title-group[data-action="edit"] {
  cursor: pointer;
}

.rule-card .rule-title-row {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
}

.rule-card .rule-id {
  background: var(--bg-color);
  border: 1px solid var(--border-color);
  padding: 4px 8px;
  border-radius: 999px;
}

.rule-card .rule-name {
  font-size: 15px;
}

.rule-card .rule-title-group:hover .rule-name {
  color: var(--primary-color);
}

.rule-card .rule-badges {
  display: flex;
  gap: 6px;
  flex-wrap: wrap;
}

.rule-card .badge.ghost {
  background: var(--bg-color);
  color: var(--text-muted);
  border: 1px dashed var(--border-color);
}

.rule-card .rule-meta {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
}

.rule-card .rule-meta-item {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 12px;
  color: var(--text-muted);
  background: var(--bg-color);
  border: 1px dashed var(--border-color);
  padding: 4px 8px;
  border-radius: 999px;
}

.rule-card .rule-actions {
  opacity: 1;
  gap: 6px;
}

.rule-card .rule-actions .btn {
  padding: 4px 8px;
}

.rule-card .rule-description {
  margin-top: 10px;
}

.rule-card .rule-details {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 10px;
  margin-top: 12px;
}

.rule-card .rule-section {
  background: var(--bg-color);
  border: 1px solid var(--border-color);
  border-radius: 12px;
  padding: 10px 12px;
  margin-bottom: 0;
}

.rule-card .rule-section-title {
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--text-muted);
  margin-bottom: 6px;
}

.rule-card .rule-list {
  margin: 0 0 0 16px;
}

/* Journey Preview */
.journey-card .journey-meta,
.process-card .process-meta,
.table-card .table-meta {
  font-size: 12px;
  color: var(--text-muted);
}

.journey-steps-preview,
.process-steps-preview {
  display: flex;
  align-items: center;
  gap: 4px;
  flex-wrap: wrap;
  margin-top: 8px;
}

.step-chip {
  display: inline-block;
  padding: 4px 10px;
  background: var(--bg-color);
  border-radius: 9999px;
  font-size: 11px;
  color: var(--text-color);
}

.step-chip.more {
  background: transparent;
  color: var(--text-muted);
}

.step-arrow {
  color: var(--text-light);
  font-size: 10px;
}

/* Fields Table */
.fields-container {
  margin-top: 12px;
}

.fields-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 13px;
}

.fields-table th,
.fields-table td {
  padding: 8px 12px;
  text-align: left;
  border-bottom: 1px solid var(--border-color);
}

.fields-table th {
  font-weight: 500;
  color: var(--text-muted);
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

.fields-table .type-badge {
  display: inline-block;
  padding: 2px 8px;
  background: rgba(99, 102, 241, 0.1);
  color: #6366f1;
  border-radius: 9999px;
  font-size: 11px;
  font-family: var(--font-mono);
}

.fields-table .text-success {
  color: var(--success);
}

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

.empty-fields-hint {
  font-size: 13px;
  color: var(--text-muted);
  font-style: italic;
}

/* Relationship Card */
.relationship-card .relationship-content {
  flex: 1;
}

.relationship-card .relationship-tables {
  display: flex;
  align-items: center;
  gap: 12px;
  flex-wrap: wrap;
}

.relationship-card .rel-table {
  font-weight: 600;
  color: var(--text-color);
  background: var(--bg-color);
  padding: 4px 12px;
  border-radius: var(--radius-sm);
}

.relationship-card .rel-arrow {
  display: flex;
  align-items: center;
  gap: 6px;
  color: var(--text-muted);
  font-size: 12px;
}

.relationship-card .rel-type-label {
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

.relationship-card .rel-description {
  font-size: 13px;
  color: var(--text-muted);
  margin-top: 8px;
}

.relationship-card .relationship-actions {
  display: flex;
  gap: 4px;
}

/* Persona Card */
.persona-card {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px;
  background: var(--panel-bg);
  border: 1px solid var(--border-color);
  border-radius: var(--radius-sm);
  margin-bottom: 8px;
}

.persona-card .persona-icon {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  color: white;
  flex-shrink: 0;
}

.persona-card .persona-info {
  flex: 1;
  display: flex;
  flex-direction: column;
}

.persona-card .persona-name {
  font-weight: 500;
  color: var(--text-color);
}

.persona-card .persona-role {
  font-size: 12px;
  color: var(--text-muted);
}

.persona-card .persona-actions {
  display: flex;
  gap: 4px;
  opacity: 0;
  transition: opacity 0.2s;
}

.persona-card:hover .persona-actions {
  opacity: 1;
}

/* Team Member Card */
.member-card .member-avatar {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  color: white;
  font-weight: 600;
  font-size: 16px;
  flex-shrink: 0;
}

/* Team member user search dropdown */
.tm-user-option:hover { background: #f3f4f6 !important; }
.tm-user-option:last-child { border-bottom: none !important; }
.tm-user-dropdown::-webkit-scrollbar { width: 6px; }
.tm-user-dropdown::-webkit-scrollbar-thumb { background: #d1d5db; border-radius: 3px; }
.tm-mode-tab:hover { opacity: 0.9; }
.tm-mode-tab:focus { outline: none; }

/* Chips */
.chip {
  display: inline-block;
  padding: 2px 8px;
  background: var(--bg-color);
  border-radius: 9999px;
  font-size: 11px;
  color: var(--text-color);
  margin-right: 4px;
}

/* Role Chips (Team) */
.role-chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 6px 12px;
  background: var(--bg-color);
  border: 1px solid var(--border-color);
  border-radius: 9999px;
  font-size: 13px;
  color: var(--text-color);
  margin: 0 4px 4px 0;
}

.role-chip .role-delete-btn {
  background: none;
  border: none;
  color: var(--text-muted);
  cursor: pointer;
  padding: 0;
  font-size: 10px;
  line-height: 1;
  transition: color 0.2s;
}

.role-chip .role-delete-btn:hover {
  color: var(--danger);
}

/* Integration Data Objects */
.integration-data-objects {
  font-size: 12px;
  color: var(--text-muted);
  margin-top: 8px;
}

.integration-data-objects .chip {
  margin-top: 4px;
}

/* Table Icon */
.table-icon {
  color: var(--primary-color);
  font-size: 16px;
}

/* Loading Indicator */
.loading-indicator {
  padding: 24px;
  text-align: center;
  color: var(--text-muted);
  font-size: 14px;
}

/* Empty Hint */
.empty-hint {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 32px;
  text-align: center;
  color: var(--text-muted);
}

.empty-hint i {
  font-size: 32px;
  margin-bottom: 12px;
  opacity: 0.5;
}

.empty-hint p {
  font-size: 14px;
  max-width: 300px;
}

/* Drawer Overlay */
.drawer-overlay {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.5);
  z-index: 2000;
  display: flex;
  justify-content: flex-end;
}

/* Drawer Panel */
.drawer {
  position: relative;
  width: 80%;
  max-width: 1200px;
  height: 100%;
  background: var(--panel-bg);
  box-shadow: var(--shadow-lg);
  display: flex;
  flex-direction: column;
  animation: slideIn 0.3s ease;
}

@keyframes slideIn {
  from { transform: translateX(100%); }
  to { transform: translateX(0); }
}

.drawerHeader {
  padding: 20px 24px;
  border-bottom: 1px solid var(--border-color);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  background: var(--panel-bg);
  flex-shrink: 0;
}

.drawerTitle {
  font-size: 20px;
  font-weight: 600;
  color: var(--text-color);
}

.drawerBody {
  flex: 1;
  padding: 24px;
  overflow-y: auto;
}

.drawerFooter {
  padding: 16px 24px;
  border-top: 1px solid var(--border-color);
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 12px;
  background: var(--bg-color);
  flex-shrink: 0;
}

.drawer-title-input {
  font-size: 18px;
  font-weight: 600;
  border: none;
  background: transparent;
  outline: none;
  min-width: 250px;
  color: var(--text-color);
}

.drawer-title-input:focus {
  border-bottom: 2px solid var(--primary-color);
}

/* ========================================
   USER / GROUP PROFILE DRAWERS (.ug-drawer-)
   ======================================== */

.ug-drawer-overlay {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0);
  z-index: 2000;
  display: flex;
  justify-content: flex-end;
  transition: background 0.3s ease;
}

.ug-drawer-overlay.ug-drawer-open {
  background: rgba(0, 0, 0, 0.45);
}

.ug-drawer-panel {
  position: relative;
  width: 480px;
  max-width: 100%;
  height: 100%;
  background: var(--panel-bg, #fff);
  box-shadow: -4px 0 24px rgba(0, 0, 0, 0.15);
  display: flex;
  flex-direction: column;
  overflow-y: auto;
  transform: translateX(100%);
  transition: transform 0.3s ease;
}

.ug-drawer-open .ug-drawer-panel {
  transform: translateX(0);
}

.ug-drawer-close {
  position: absolute;
  top: 16px;
  right: 16px;
  background: none;
  border: none;
  font-size: 18px;
  color: var(--text-muted, #888);
  cursor: pointer;
  width: 32px;
  height: 32px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 6px;
  z-index: 1;
  transition: background 0.15s, color 0.15s;
}

.ug-drawer-close:hover {
  background: var(--bg-color, #f5f5f5);
  color: var(--text-color, #333);
}

.ug-drawer-header {
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 24px 24px 20px;
  border-bottom: 1px solid var(--border-color, #e5e5e5);
}

.ug-drawer-avatar {
  width: 56px;
  height: 56px;
  border-radius: 50%;
  background: var(--primary-color, #4f46e5);
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 20px;
  font-weight: 700;
  flex-shrink: 0;
}

.ug-drawer-avatar.ug-drawer-avatar-group {
  border-radius: 12px;
  background: var(--primary-color, #4f46e5);
  font-size: 22px;
}

.ug-drawer-header-info {
  min-width: 0;
  flex: 1;
}

.ug-drawer-header-info h3 {
  margin: 0 0 4px;
  font-size: 18px;
  font-weight: 700;
  color: var(--text-color, #1a1a1a);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.ug-drawer-header-info p {
  margin: 0;
  font-size: 13px;
  color: var(--text-muted, #888);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.ug-drawer-badges {
  display: flex;
  gap: 8px;
  margin-top: 8px;
}

.ug-drawer-badge {
  display: inline-block;
  padding: 2px 10px;
  border-radius: 12px;
  font-size: 12px;
  font-weight: 600;
  text-transform: capitalize;
}

.ug-drawer-section {
  padding: 20px 24px;
  border-bottom: 1px solid var(--border-color, #e5e5e5);
}

.ug-drawer-section:last-child {
  border-bottom: none;
}

.ug-drawer-section h4 {
  margin: 0 0 12px;
  font-size: 14px;
  font-weight: 700;
  color: var(--text-color, #1a1a1a);
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

.ug-drawer-details {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.ug-drawer-detail-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 6px 0;
  font-size: 14px;
}

.ug-drawer-detail-label {
  font-weight: 500;
  color: var(--text-muted, #888);
}

.ug-drawer-empty {
  color: var(--text-muted, #888);
  font-size: 13px;
  font-style: italic;
  margin: 0;
}

.ug-drawer-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 13px;
}

.ug-drawer-table th {
  text-align: left;
  padding: 8px 8px;
  border-bottom: 2px solid var(--border-color, #e5e5e5);
  font-weight: 600;
  color: var(--text-muted, #888);
  font-size: 12px;
  text-transform: uppercase;
  letter-spacing: 0.3px;
}

.ug-drawer-table td {
  padding: 8px 8px;
  border-bottom: 1px solid var(--border-color, #e5e5e5);
  color: var(--text-color, #333);
  vertical-align: middle;
}

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

.ug-drawer-table .btn-icon {
  width: 28px;
  height: 28px;
  font-size: 12px;
}

.ug-drawer-add-row {
  display: flex;
  gap: 8px;
  margin-top: 12px;
  align-items: center;
}

.ug-drawer-add-row .form-select {
  flex: 1;
  min-width: 0;
  font-size: 13px;
}

.ug-drawer-add-row .btn {
  flex-shrink: 0;
}

.ug-drawer-link {
  color: var(--primary-color, #4f46e5);
  text-decoration: none;
  font-weight: 600;
  cursor: pointer;
  transition: color 0.15s;
}

.ug-drawer-link:hover {
  color: var(--primary-hover, #4338ca);
  text-decoration: underline;
}

@media (max-width: 600px) {
  .ug-drawer-panel {
    width: 100%;
  }

  .ug-drawer-header {
    padding: 16px 16px 14px;
  }

  .ug-drawer-section {
    padding: 14px 16px;
  }

  .ug-drawer-avatar {
    width: 44px;
    height: 44px;
    font-size: 16px;
  }

  .ug-drawer-header-info h3 {
    font-size: 16px;
  }
}

.ug-section-label {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 14px 0 8px;
  font-size: 13px;
  font-weight: 700;
  color: var(--text-muted, #888);
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

.ug-section-label i {
  font-size: 14px;
}

.ug-empty-members {
  text-align: center;
  padding: 40px 20px;
  color: var(--text-muted, #999);
}

.ug-empty-members i {
  font-size: 32px;
  margin-bottom: 12px;
  opacity: 0.4;
}

.ug-empty-members p {
  margin: 4px 0;
  font-size: 14px;
}

.ug-empty-members .ug-empty-hint {
  font-size: 12px;
  opacity: 0.7;
}

.role-badge.role-super_admin {
  background: rgba(139, 92, 246, 0.12);
  color: #7c3aed;
}

/* Bulk action bar */
.ug-bulk-bar {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px 12px;
  margin-bottom: 8px;
  background: var(--bg-tertiary, #f0f4ff);
  border: 1px solid var(--primary-light, #c7d2fe);
  border-radius: 8px;
  flex-wrap: wrap;
}

.ug-bulk-count {
  font-size: 13px;
  font-weight: 600;
  color: var(--primary, #6366f1);
  display: flex;
  align-items: center;
  gap: 6px;
  margin-right: 4px;
}

.th-checkbox, .td-checkbox {
  width: 36px;
  text-align: center;
}

.th-checkbox input, .td-checkbox input {
  cursor: pointer;
}

.group-row-check {
  display: flex;
  align-items: center;
  padding: 0 4px 0 0;
}

.group-row-check input {
  cursor: pointer;
}

.btn-ghost {
  background: none;
  border: 1px solid var(--border, #e5e7eb);
  color: var(--text-secondary, #666);
  cursor: pointer;
  border-radius: 6px;
  padding: 4px 10px;
  font-size: 12px;
}

.btn-ghost:hover {
  background: var(--bg-secondary, #f3f4f6);
}

.form-select-sm {
  padding: 4px 8px;
  font-size: 12px;
  height: auto;
}

/* Margin utilities */
.mt-4 {
  margin-top: 16px;
}

/* ========================================
   VIEW LAYOUTS - NFR, Solution Design, Implementation
   ======================================== */

.nfr-view,
.sd-view,
.impl-view {
  display: flex;
  gap: 24px;
  height: 100%;
}

.nfr-sidebar,
.sd-sidebar,
.impl-sidebar {
  width: 220px;
  flex-shrink: 0;
  background: var(--panel-bg);
  border-radius: var(--radius);
  padding: 16px;
  border: 1px solid var(--border-color);
}

.nfr-sidebar h3,
.sd-sidebar h3,
.impl-sidebar h3 {
  font-size: 14px;
  font-weight: 600;
  color: var(--text-color);
  margin-bottom: 16px;
  padding-bottom: 12px;
  border-bottom: 1px solid var(--border-color);
}

.nfr-nav,
.sd-nav,
.impl-nav {
  list-style: none;
  padding: 0;
  margin: 0;
}

.nfr-nav li,
.sd-nav li,
.impl-nav li {
  padding: 10px 12px;
  border-radius: var(--radius-sm);
  cursor: pointer;
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 13px;
  color: var(--text-muted);
  transition: var(--transition);
}

.nfr-nav li:hover,
.sd-nav li:hover,
.impl-nav li:hover {
  background: var(--bg-color);
  color: var(--text-color);
}

.nfr-nav li.active,
.sd-nav li.active,
.impl-nav li.active {
  background: var(--primary-color);
  color: #fff;
}

.nfr-nav li i,
.sd-nav li i,
.impl-nav li i {
  font-size: 14px;
  width: 18px;
  text-align: center;
}

.nfr-content,
.sd-content,
.impl-content {
  flex: 1;
  min-width: 0;
  overflow: auto;
}

/* ========================================
   SOLUTION ARCHITECTURE DIAGRAM
   ======================================== */

.arch-diagram-card,
.arch-details-card {
  margin-bottom: 24px;
}

.arch-diagram-card .card-header,
.arch-details-card .card-header {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.arch-diagram-card .card-hint,
.arch-details-card .card-hint {
  font-size: 12px;
  color: var(--text-muted);
}

.arch-diagram-container {
  position: relative;
  padding: 16px;
}

.arch-layers {
  display: flex;
  flex-direction: column;
  gap: 12px;
  position: relative;
}

.arch-layer {
  padding: 16px 20px;
  border-radius: 8px;
  display: flex;
  align-items: center;
  gap: 24px;
  min-height: 72px;
}

.arch-layer-label {
  font-size: 12px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  color: #666;
  min-width: 140px;
  flex-shrink: 0;
}

.arch-layer-components {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  flex: 1;
  justify-content: center;
}

.arch-component {
  display: flex;
  align-items: center;
  gap: 10px;
  background: white;
  border: 2px solid #ddd;
  border-radius: 8px;
  padding: 10px 16px;
  cursor: pointer;
  transition: all 0.2s ease;
  min-width: 160px;
  box-shadow: 0 1px 3px rgba(0,0,0,0.1);
}

.arch-component:hover {
  border-color: var(--primary-color);
  box-shadow: 0 2px 8px rgba(59, 130, 246, 0.2);
  transform: translateY(-2px);
}

.arch-component:focus {
  outline: none;
  border-color: var(--primary-color);
  box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.2);
}

.arch-component.selected {
  border-color: var(--primary-color);
  background: #f0f7ff;
  box-shadow: 0 2px 8px rgba(59, 130, 246, 0.3);
}

.arch-component-icon {
  width: 36px;
  height: 36px;
  border-radius: 8px;
  background: linear-gradient(135deg, var(--primary-color) 0%, #2563eb 100%);
  display: flex;
  align-items: center;
  justify-content: center;
  color: white;
  font-size: 16px;
  flex-shrink: 0;
}

.arch-component-info {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.arch-component-name {
  font-size: 13px;
  font-weight: 600;
  color: #333;
}

.arch-component-tech {
  font-size: 11px;
  color: #666;
}

/* Architecture Details Table */
.arch-details-table-container {
  overflow-x: auto;
}

.arch-details-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 13px;
}

.arch-details-table th {
  text-align: left;
  padding: 12px 16px;
  background: var(--bg-color);
  border-bottom: 2px solid var(--border-color);
  font-weight: 600;
  color: var(--text-color);
  white-space: nowrap;
}

.arch-details-table td {
  padding: 12px 16px;
  border-bottom: 1px solid var(--border-color);
  vertical-align: middle;
}

.arch-details-table tbody tr {
  cursor: pointer;
  transition: background 0.15s ease;
}

.arch-details-table tbody tr:hover {
  background: var(--hover-bg);
}

.arch-details-table tbody tr.selected {
  background: #f0f7ff;
}

.component-name-cell {
  display: flex;
  align-items: center;
  gap: 8px;
}

.component-name-cell i {
  color: var(--primary-color);
  width: 16px;
}

.arch-details-table code {
  background: #f1f5f9;
  padding: 2px 6px;
  border-radius: 4px;
  font-size: 12px;
  color: #0f172a;
}

/* Layer Badges */
.layer-badge {
  display: inline-block;
  padding: 4px 10px;
  border-radius: 12px;
  font-size: 11px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.3px;
}

.layer-badge.layer-client {
  background: #e8f5e9;
  color: #2e7d32;
}

.layer-badge.layer-presentation {
  background: #e3f2fd;
  color: #1565c0;
}

.layer-badge.layer-api-gateway {
  background: #fff3e0;
  color: #e65100;
}

.layer-badge.layer-application {
  background: #fce4ec;
  color: #c2185b;
}

.layer-badge.layer-data {
  background: #f3e5f5;
  color: #7b1fa2;
}

.layer-badge.layer-infrastructure {
  background: #eceff1;
  color: #455a64;
}

.layer-badge.layer-api {
  background: #fff3e0;
  color: #e65100;
}

/* Component Modal Styles */
.comp-modal-content {
  min-height: 200px;
}

.comp-modal-content.view-mode .comp-edit-mode,
.comp-modal-content.edit-mode .comp-view-mode {
  display: none;
}

.comp-modal-content.view-mode .comp-view-mode,
.comp-modal-content.edit-mode .comp-edit-mode {
  display: block;
}

.comp-detail-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 0;
}

.comp-detail-section {
  padding: 20px;
  border-bottom: 1px solid var(--stroke);
}

.comp-detail-section:last-child {
  border-bottom: none;
}

@media (min-width: 560px) {
  .comp-detail-section {
    border-bottom: none;
    border-right: 1px solid var(--stroke);
  }
  .comp-detail-section:last-child {
    border-right: none;
  }
}

.comp-detail-section h4 {
  font-size: 13px;
  font-weight: 600;
  color: var(--text-secondary);
  text-transform: uppercase;
  letter-spacing: 0.5px;
  margin-bottom: 16px;
}

.comp-detail-row {
  display: flex;
  flex-direction: column;
  gap: 4px;
  margin-bottom: 12px;
}

.comp-detail-row:last-child {
  margin-bottom: 0;
}

.comp-detail-label {
  font-size: 12px;
  font-weight: 500;
  color: var(--text-tertiary);
}

.comp-detail-value {
  font-size: 14px;
  color: var(--text-color);
}

.comp-detail-value code {
  font-family: 'JetBrains Mono', monospace;
  font-size: 13px;
  background: var(--surface-alt);
  padding: 2px 6px;
  border-radius: 4px;
  color: var(--primary-color);
}

/* Status Badges */
.status-badge {
  display: inline-flex;
  align-items: center;
  padding: 4px 10px;
  border-radius: 12px;
  font-size: 12px;
  font-weight: 500;
  text-transform: capitalize;
}

.status-badge.status-active {
  background: #dcfce7;
  color: #166534;
}

.status-badge.status-inactive {
  background: #fee2e2;
  color: #991b1b;
}

.status-badge.status-deprecated {
  background: #fef3c7;
  color: #92400e;
}

.status-badge.status-planned {
  background: #e0e7ff;
  color: #3730a3;
}

/* Modal footer action buttons */
.modal .view-mode-actions,
.modal .edit-mode-actions {
  display: flex;
  gap: 8px;
}


/* Architecture Layer Header */
.arch-layer-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 12px;
}

.arch-add-component-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  border: 1px dashed var(--stroke);
  border-radius: 6px;
  background: transparent;
  color: var(--text-tertiary);
  cursor: pointer;
  transition: all 0.2s ease;
  font-size: 12px;
}

.arch-add-component-btn:hover {
  border-color: var(--primary-color);
  color: var(--primary-color);
  background: rgba(59, 130, 246, 0.05);
}

/* GBOS Component Styling */
.arch-component.gbos-component {
  border-color: #8b5cf6;
}

.arch-component-icon.gbos {
  background: linear-gradient(135deg, #8b5cf6 0%, #6366f1 100%);
  color: white;
}

/* Add Component Modal - Category Tabs */
.comp-category-tabs {
  display: flex;
  border-bottom: 1px solid var(--stroke);
  padding: 0 20px;
  gap: 4px;
}

.comp-category-tab {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 12px 16px;
  border: none;
  background: transparent;
  color: var(--text-secondary);
  font-size: 14px;
  font-weight: 500;
  cursor: pointer;
  border-bottom: 2px solid transparent;
  margin-bottom: -1px;
  transition: all 0.2s ease;
}

.comp-category-tab:hover {
  color: var(--text-color);
}

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

.comp-category-tab i {
  font-size: 14px;
}

/* Category Content */
.comp-category-content {
  display: none;
  padding: 20px;
  max-height: 400px;
  overflow-y: auto;
}

.comp-category-content.active {
  display: block;
}

/* Component Catalog Grid */
.comp-catalog-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
  gap: 12px;
}

.comp-catalog-item {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  padding: 14px;
  border: 1px solid var(--stroke);
  border-radius: 8px;
  background: var(--surface);
  cursor: pointer;
  transition: all 0.2s ease;
  position: relative;
}

.comp-catalog-item:hover {
  border-color: var(--primary-color);
  background: #f8fafc;
}

.comp-catalog-item.selected {
  border-color: var(--primary-color);
  background: #eff6ff;
  box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.1);
}

.comp-catalog-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  min-width: 40px;
  border-radius: 8px;
  background: linear-gradient(135deg, #3b82f6 0%, #1d4ed8 100%);
  color: white;
  font-size: 16px;
}

.comp-catalog-icon.gbos {
  background: linear-gradient(135deg, #8b5cf6 0%, #6366f1 100%);
}

.comp-catalog-info {
  flex: 1;
  min-width: 0;
}

.comp-catalog-name {
  font-size: 14px;
  font-weight: 600;
  color: var(--text-color);
  margin-bottom: 2px;
}

.comp-catalog-tech {
  font-size: 12px;
  color: var(--primary-color);
  font-family: 'JetBrains Mono', monospace;
  margin-bottom: 4px;
}

.comp-catalog-desc {
  font-size: 12px;
  color: var(--text-secondary);
  line-height: 1.4;
}

.comp-catalog-check {
  position: absolute;
  top: 10px;
  right: 10px;
  width: 20px;
  height: 20px;
  border-radius: 50%;
  background: var(--primary-color);
  color: white;
  display: none;
  align-items: center;
  justify-content: center;
  font-size: 10px;
}

.comp-catalog-item.selected .comp-catalog-check {
  display: flex;
}

.comp-catalog-empty {
  grid-column: 1 / -1;
  padding: 40px 20px;
  text-align: center;
  color: var(--text-tertiary);
  font-size: 14px;
}

/* Custom Component Form */
.comp-custom-form {
  padding: 0;
}

/* Icon Picker */
.icon-picker {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.icon-option {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  border: 1px solid var(--stroke);
  border-radius: 8px;
  background: var(--surface);
  color: var(--text-secondary);
  cursor: pointer;
  transition: all 0.2s ease;
  font-size: 16px;
}

.icon-option:hover {
  border-color: var(--primary-color);
  color: var(--primary-color);
}

.icon-option.selected {
  border-color: var(--primary-color);
  background: var(--primary-color);
  color: white;
}

/* Required field indicator */
.required {
  color: #ef4444;
}

/* ========================================
   INTEGRATION CONNECTIONS STYLES
   ======================================== */

.integ-connections-list {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.integ-connection-item {
  border: 1px solid var(--stroke);
  border-radius: 8px;
  padding: 16px;
  background: var(--surface);
  transition: all 0.2s ease;
}

.integ-connection-item:hover {
  border-color: var(--primary-color);
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05);
}

.integ-conn-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 8px;
}

.integ-conn-flow {
  display: flex;
  align-items: center;
  gap: 12px;
}

.integ-conn-endpoint {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 6px 12px;
  border-radius: 6px;
  font-size: 13px;
  font-weight: 500;
}

.integ-conn-endpoint.source {
  background: #dbeafe;
  color: #1e40af;
}

.integ-conn-endpoint.dest {
  background: #dcfce7;
  color: #166534;
}

.integ-conn-endpoint i {
  font-size: 14px;
}

.integ-conn-arrow {
  color: var(--text-tertiary);
  font-size: 14px;
}

.integ-conn-actions {
  display: flex;
  gap: 8px;
}

.integ-conn-name {
  font-size: 15px;
  font-weight: 600;
  color: var(--text-color);
  margin-bottom: 8px;
}

.integ-conn-details {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  align-items: center;
}

.integ-conn-tag {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 4px 10px;
  border-radius: 12px;
  font-size: 12px;
  font-weight: 500;
  text-transform: capitalize;
}

.integ-conn-tag.active {
  background: #dcfce7;
  color: #166534;
}

.integ-conn-tag.paused {
  background: #fef3c7;
  color: #92400e;
}

.integ-conn-tag.draft {
  background: #e5e7eb;
  color: #6b7280;
}

.integ-conn-detail {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 12px;
  color: var(--text-secondary);
}

.integ-conn-detail i {
  font-size: 11px;
  color: var(--text-tertiary);
}

.integ-conn-desc {
  margin-top: 8px;
  font-size: 13px;
  color: var(--text-secondary);
  line-height: 1.4;
}

/* Form hint text */
.formHint {
  font-size: 12px;
  color: var(--text-tertiary);
  margin-top: 4px;
}

/* Defined Integrations (from Integrations section) */
.defined-integ-list {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.defined-integ-item {
  border: 1px solid var(--stroke);
  border-radius: 8px;
  padding: 16px;
  background: var(--surface);
  transition: all 0.2s ease;
}

.defined-integ-item:hover {
  border-color: var(--primary-color);
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05);
}

.defined-integ-item.has-missing {
  border-color: #f59e0b;
  background: #fffbeb;
}

.defined-integ-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 8px;
}

.defined-integ-flow {
  display: flex;
  align-items: center;
  gap: 12px;
}

.defined-integ-endpoint {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 6px 12px;
  border-radius: 6px;
  font-size: 13px;
  font-weight: 500;
}

.defined-integ-endpoint.source {
  background: #dbeafe;
  color: #1e40af;
}

.defined-integ-endpoint.dest {
  background: #dcfce7;
  color: #166534;
}

.defined-integ-endpoint i {
  font-size: 14px;
}

.defined-integ-arrow {
  color: var(--text-tertiary);
  font-size: 14px;
}

.defined-integ-warning {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 4px 10px;
  border-radius: 4px;
  font-size: 12px;
  font-weight: 500;
  background: #fef3c7;
  color: #92400e;
}

.defined-integ-warning i {
  font-size: 12px;
}

.defined-integ-complete {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 4px 10px;
  border-radius: 4px;
  font-size: 12px;
  font-weight: 500;
  background: #dcfce7;
  color: #166534;
}

.defined-integ-complete i {
  font-size: 12px;
}

.defined-integ-name {
  font-size: 15px;
  font-weight: 600;
  color: var(--text-color);
  margin-bottom: 8px;
}

.defined-integ-details {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  align-items: center;
}

.defined-integ-tag {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 4px 8px;
  border-radius: 4px;
  font-size: 12px;
  font-weight: 500;
}

.defined-integ-tag.active {
  background: #dcfce7;
  color: #166534;
}

.defined-integ-tag.draft {
  background: #f3f4f6;
  color: #6b7280;
}

.defined-integ-detail {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 13px;
  color: var(--text-secondary);
}

.defined-integ-detail i {
  font-size: 12px;
  color: var(--text-tertiary);
}

.defined-integ-missing {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 12px;
  color: #d97706;
}

.defined-integ-missing i {
  font-size: 11px;
}

/* System Deployment Styles */
.sys-dep-environments {
  display: flex;
  flex-direction: column;
  gap: 20px;
}

.sys-dep-env {
  border: 1px solid var(--stroke);
  border-radius: 12px;
  background: var(--surface);
  overflow: hidden;
}

.sys-dep-env-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 16px 20px;
  background: var(--panel-bg);
  border-bottom: 1px solid var(--stroke);
}

.sys-dep-env-info {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.sys-dep-env-name {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 16px;
  font-weight: 600;
  color: var(--text-color);
}

.sys-dep-env-name i {
  color: var(--primary-color);
  font-size: 18px;
}

.sys-dep-env-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  font-size: 13px;
  color: var(--text-secondary);
}

.sys-dep-env-meta span {
  display: flex;
  align-items: center;
  gap: 4px;
}

.sys-dep-env-meta i {
  font-size: 11px;
  color: var(--text-tertiary);
}

.sys-dep-env-actions {
  display: flex;
  gap: 8px;
}

.sys-dep-env-components {
  padding: 16px 20px;
}

.sys-dep-empty-components {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  padding: 24px;
  background: var(--panel-bg);
  border-radius: 8px;
  border: 1px dashed var(--stroke);
}

.sys-dep-comp-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap: 12px;
}

.sys-dep-comp {
  border: 1px solid var(--stroke);
  border-radius: 8px;
  padding: 14px;
  background: var(--surface);
  transition: all 0.2s ease;
}

.sys-dep-comp:hover {
  border-color: var(--primary-color);
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05);
}

.sys-dep-comp-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 8px;
}

.sys-dep-comp-provider {
  display: inline-block;
  padding: 2px 8px;
  border-radius: 4px;
  font-size: 11px;
  font-weight: 600;
  text-transform: uppercase;
}

.sys-dep-comp-provider.aws {
  background: #ff9900;
  color: #232f3e;
}

.sys-dep-comp-provider.gcp {
  background: #4285f4;
  color: white;
}

.sys-dep-comp-provider.azure {
  background: #0078d4;
  color: white;
}

.sys-dep-comp-type {
  font-size: 11px;
  color: var(--text-tertiary);
}

.sys-dep-comp-name {
  font-size: 14px;
  font-weight: 600;
  color: var(--text-color);
  margin-bottom: 6px;
}

.sys-dep-comp-desc {
  font-size: 12px;
  color: var(--text-secondary);
  line-height: 1.4;
  margin-bottom: 10px;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.sys-dep-comp-footer {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.sys-dep-comp-cost {
  font-size: 12px;
  color: var(--text-tertiary);
}

.sys-dep-comp-actions {
  display: flex;
  gap: 4px;
}

.sys-dep-comp-actions .iconBtn {
  padding: 4px 6px;
  font-size: 12px;
}

.sys-dep-comp.configured {
  border-color: var(--primary);
  background: linear-gradient(135deg, var(--card-bg), rgba(var(--primary-rgb), 0.03));
}

.sys-dep-comp-configured {
  font-size: 11px;
  color: var(--primary);
  display: flex;
  align-items: center;
  gap: 4px;
  margin-top: 4px;
  margin-bottom: 8px;
}

.sys-dep-comp-configured i {
  font-size: 12px;
}

/* ========================================
   COMPONENT CONFIGURATION MODAL STYLES
   ======================================== */

.comp-config-sections {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.comp-config-section {
  background: var(--bg-secondary);
  border: 1px solid var(--stroke);
  border-radius: 8px;
  overflow: hidden;
}

.comp-config-section-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 12px 16px;
  background: var(--card-bg);
  cursor: pointer;
  user-select: none;
  transition: background 0.2s;
}

.comp-config-section-header:hover {
  background: var(--hover-bg);
}

.comp-config-section-header h4 {
  margin: 0;
  font-size: 14px;
  font-weight: 600;
  color: var(--text-color);
}

.comp-config-section-header i {
  font-size: 12px;
  color: var(--text-tertiary);
  transition: transform 0.2s;
}

.comp-config-section.collapsed .comp-config-section-header i {
  transform: rotate(-90deg);
}

.comp-config-section-body {
  padding: 16px;
  border-top: 1px solid var(--stroke);
}

.comp-config-section.collapsed .comp-config-section-body {
  display: none;
}

.comp-config-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 16px;
}

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

.comp-config-field {
  min-width: 0;
}

.comp-config-field .formLabel {
  font-size: 13px;
  font-weight: 500;
  margin-bottom: 6px;
  display: block;
  color: var(--text-secondary);
}

.comp-config-field .checkbox-label {
  display: flex;
  align-items: center;
  gap: 8px;
  cursor: pointer;
}

.comp-config-field .checkbox-label input[type="checkbox"] {
  width: 16px;
  height: 16px;
  accent-color: var(--primary);
  cursor: pointer;
}

.comp-config-field .formInput,
.comp-config-field .select {
  width: 100%;
}

.comp-config-field .formTextarea {
  min-height: 80px;
  resize: vertical;
}

.comp-config-field[data-depends-on] {
  transition: opacity 0.2s, max-height 0.2s;
}

.tag.aws {
  background: #ff9900;
  color: #232f3e;
}

.tag.gcp {
  background: #4285f4;
  color: white;
}

.tag.azure {
  background: #0078d4;
  color: white;
}

/* ========================================
   FORM HELPERS STYLES
   ======================================== */

.section-view {
  padding: 0;
}

.section-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 24px;
}

.section-header h2 {
  font-size: 20px;
  font-weight: 600;
  color: var(--text-color);
}

.section-form {
  background: var(--panel-bg);
  border-radius: var(--radius);
  padding: 24px;
  border: 1px solid var(--border-color);
}

.form-grid {
  display: grid;
  gap: 20px;
}

.form-grid-2 {
  grid-template-columns: repeat(2, 1fr);
}

.form-grid-3 {
  grid-template-columns: repeat(3, 1fr);
}

.form-section {
  margin: 24px 0;
  padding-top: 20px;
  border-top: 1px solid var(--border-color);
}

.form-section:first-child {
  margin-top: 0;
  padding-top: 0;
  border-top: none;
}

.form-section-title {
  font-size: 15px;
  font-weight: 600;
  color: var(--text-color);
  margin-bottom: 8px;
}

.form-section-description {
  font-size: 13px;
  color: var(--text-muted);
  margin-bottom: 16px;
}

.form-section-content {
  margin-top: 16px;
}

/* Form Row - Inline inputs with delete button */
.form-row {
  display: flex;
  gap: 12px;
  align-items: center;
  margin-bottom: 12px;
  padding: 12px;
  background: var(--bg-color);
  border-radius: var(--radius-sm);
}

.form-row .form-input,
.form-row .form-select {
  flex: 1;
  margin: 0;
}

.form-row .remove-row {
  flex-shrink: 0;
}

/* Inline List for tags/items */
.inline-list {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-bottom: 12px;
}

.inline-tag {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 6px 12px;
  background: var(--bg-color);
  border-radius: 20px;
  font-size: 13px;
  color: var(--text-color);
}

.inline-tag .tag-remove {
  background: none;
  border: none;
  color: var(--text-muted);
  cursor: pointer;
  font-size: 16px;
  line-height: 1;
}

.inline-tag .tag-remove:hover {
  color: var(--danger);
}

.inline-add {
  display: flex;
  gap: 8px;
  margin-top: 12px;
}

.inline-add .form-input,
.inline-add .form-select {
  flex: 1;
}

/* Migration Checkbox Grid */
.migration-checkbox-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
  gap: 10px;
  max-height: 280px;
  overflow-y: auto;
  padding: 4px;
}

.migration-checkbox-item {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 14px;
  background: var(--bg-color);
  border: 1px solid var(--border-color);
  border-radius: var(--radius-sm);
  cursor: pointer;
  transition: all 0.15s ease;
  font-size: 13px;
  color: var(--text-color);
}

.migration-checkbox-item:hover {
  border-color: var(--primary);
  background: var(--primary-light);
}

.migration-checkbox-item.checked {
  border-color: var(--primary);
  background: var(--primary-light);
  box-shadow: 0 0 0 1px var(--primary);
}

.migration-checkbox-item.highlight {
  border-color: var(--success);
  background: rgba(34, 197, 94, 0.08);
}

.migration-checkbox-item.highlight:hover,
.migration-checkbox-item.highlight.checked {
  border-color: var(--success);
  background: rgba(34, 197, 94, 0.15);
  box-shadow: 0 0 0 1px var(--success);
}

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

.migration-checkbox-item i {
  width: 18px;
  color: var(--text-muted);
  text-align: center;
  flex-shrink: 0;
}

.migration-checkbox-item.checked i {
  color: var(--primary);
}

.migration-checkbox-item.highlight i {
  color: var(--success);
}

.migration-checkbox-item span {
  flex: 1;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* Application Overview - Category Badge */
.category-badge {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 6px 12px;
  border-radius: 20px;
  font-size: 12px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

.category-badge i {
  font-size: 11px;
}

.category-badge--build {
  background: rgba(59, 130, 246, 0.12);
  color: #3b82f6;
}

.category-badge--integration {
  background: rgba(168, 85, 247, 0.12);
  color: #a855f7;
}

.category-badge--improve {
  background: rgba(245, 158, 11, 0.12);
  color: #f59e0b;
}

.category-badge--migration {
  background: rgba(34, 197, 94, 0.12);
  color: #22c55e;
}

/* Application Overview - Info Grid */
.info-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 16px;
}

@media (max-width: 640px) {
  .info-grid {
    grid-template-columns: 1fr;
  }
}

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

.info-label {
  font-size: 12px;
  font-weight: 500;
  color: var(--text-muted);
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

.info-value {
  font-size: 14px;
  color: var(--text-color);
  font-weight: 500;
}

.info-link {
  color: var(--primary);
  text-decoration: none;
  display: inline-flex;
  align-items: center;
  gap: 6px;
}

.info-link:hover {
  text-decoration: underline;
}

.info-link i {
  font-size: 11px;
}

/* Application Overview - Info Section */
.info-section {
  margin-bottom: 0;
}

.info-section-label {
  display: block;
  font-size: 12px;
  font-weight: 500;
  color: var(--text-muted);
  text-transform: uppercase;
  letter-spacing: 0.5px;
  margin-bottom: 10px;
}

/* Application Overview - Tags Display */
.tags-display {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.tag {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 6px 12px;
  border-radius: 6px;
  font-size: 13px;
  font-weight: 500;
}

.tag i {
  font-size: 11px;
  opacity: 0.8;
}

.tag--source {
  background: rgba(59, 130, 246, 0.1);
  color: #3b82f6;
  border: 1px solid rgba(59, 130, 246, 0.2);
}

.tag--target {
  background: rgba(139, 92, 246, 0.1);
  color: #8b5cf6;
  border: 1px solid rgba(139, 92, 246, 0.2);
}

.tag--highlight {
  background: rgba(34, 197, 94, 0.15);
  color: #16a34a;
  border: 1px solid rgba(34, 197, 94, 0.3);
  font-weight: 600;
}

.tag--category {
  background: rgba(99, 102, 241, 0.1);
  color: #6366f1;
  border: 1px solid rgba(99, 102, 241, 0.2);
}

.tag--stack {
  background: rgba(14, 165, 233, 0.1);
  color: #0ea5e9;
  border: 1px solid rgba(14, 165, 233, 0.2);
  padding: 4px 10px;
  font-size: 12px;
}

.tag--env {
  background: rgba(168, 85, 247, 0.1);
  color: #a855f7;
  border: 1px solid rgba(168, 85, 247, 0.2);
  text-transform: uppercase;
  font-size: 11px;
  font-weight: 600;
}

/* Stack grid layout */
.stack-grid {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.stack-item {
  display: flex;
  align-items: flex-start;
  gap: 12px;
}

.stack-label {
  min-width: 80px;
  font-size: 12px;
  font-weight: 500;
  color: var(--text-muted);
  padding-top: 6px;
}

.stack-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

/* Application Overview - Badges */
.badge {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 4px 10px;
  border-radius: 12px;
  font-size: 12px;
  font-weight: 500;
}

.badge i {
  font-size: 10px;
}

.badge--success {
  background: rgba(34, 197, 94, 0.12);
  color: #16a34a;
}

.badge--neutral {
  background: rgba(100, 116, 139, 0.12);
  color: #64748b;
}

/* Form Actions */
.form-actions {
  display: flex;
  justify-content: flex-end;
  gap: 12px;
  margin-top: 24px;
  padding-top: 20px;
  border-top: 1px solid var(--border-color);
}

/* Cards Grid */
.cards-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
  gap: 16px;
}

.card {
  background: var(--panel-bg);
  border: 1px solid var(--border-color);
  border-radius: var(--radius);
  overflow: hidden;
  transition: var(--transition);
}

.card:hover {
  box-shadow: var(--shadow-md);
}

.card-header {
  padding: 16px;
  border-bottom: 1px solid var(--border-color);
  display: flex;
  align-items: center;
  gap: 12px;
  flex-wrap: wrap;
}

.card-header h4 {
  flex: 1;
  font-size: 15px;
  font-weight: 600;
  color: var(--text-color);
}

.card-body {
  padding: 16px;
}

.card-body p {
  font-size: 13px;
  color: var(--text-muted);
  margin-bottom: 8px;
}

.card-actions {
  padding: 12px 16px;
  background: var(--bg-color);
  border-top: 1px solid var(--border-color);
  display: flex;
  gap: 8px;
  justify-content: flex-end;
}

/* Data Table Styles */
.data-table-wrapper {
  overflow-x: auto;
  background: var(--panel-bg);
  border: 1px solid var(--border-color);
  border-radius: var(--radius);
}

.data-table {
  width: 100%;
  border-collapse: collapse;
}

.data-table th,
.data-table td {
  padding: 12px 16px;
  text-align: left;
  font-size: 13px;
  border-bottom: 1px solid var(--border-color);
}

.data-table th {
  background: var(--bg-color);
  font-weight: 600;
  color: var(--text-color);
}

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

.data-table tbody tr:hover {
  background: var(--bg-color);
}

.data-table .actions-cell,
.data-table .actions-header {
  text-align: right;
  white-space: nowrap;
}

.data-table .empty-cell {
  text-align: center;
  color: var(--text-light);
  padding: 32px;
}

/* Badge Styles */
.badge {
  display: inline-block;
  padding: 4px 10px;
  font-size: 11px;
  font-weight: 600;
  border-radius: 12px;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  background: var(--bg-color);
  color: var(--text-muted);
}

.badge-draft,
.badge-pending,
.badge-planned {
  background: #f3f4f6;
  color: #6b7280;
}

.badge-in_progress,
.badge-in_review,
.badge-active {
  background: #dbeafe;
  color: #2563eb;
}

.badge-completed,
.badge-approved,
.badge-published {
  background: #d1fae5;
  color: #059669;
}

.badge-rejected,
.badge-failed,
.badge-deprecated,
.badge-archived {
  background: #fee2e2;
  color: #dc2626;
}

.badge-critical,
.badge-high {
  background: #fef3c7;
  color: #d97706;
}

/* Modal Styles */
.modal-overlay {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.5);
  z-index: 3000;
  display: flex;
  align-items: center;
  justify-content: center;
}

.modal {
  background: var(--panel-bg);
  border-radius: var(--radius-lg);
  max-height: 90vh;
  display: flex;
  flex-direction: column;
  box-shadow: var(--shadow-lg);
}

.modal-medium {
  width: 500px;
}

.modal-large {
  width: 700px;
}

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

.modal-title {
  font-size: 18px;
  font-weight: 600;
  color: var(--text-color);
}

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

.modal-close-btn:hover {
  color: var(--text-color);
}

.modal-body {
  padding: 24px;
  overflow-y: auto;
  flex: 1;
}

.modal-footer {
  display: flex;
  justify-content: flex-end;
  gap: 12px;
  padding: 16px 24px;
  border-top: 1px solid var(--border-color);
}

/* Section Tabs */
.section-tabs {
  display: flex;
  gap: 4px;
  margin-bottom: 20px;
  background: var(--bg-color);
  padding: 4px;
  border-radius: var(--radius);
}

.tab-btn {
  padding: 10px 20px;
  border: none;
  background: transparent;
  font-size: 13px;
  font-weight: 500;
  color: var(--text-muted);
  cursor: pointer;
  border-radius: var(--radius-sm);
  transition: var(--transition);
}

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

.tab-btn.active {
  background: var(--panel-bg);
  color: var(--primary-color);
  box-shadow: var(--shadow-sm);
}

.tab-content {
  margin-top: 16px;
}

/* Empty State */
.empty-state {
  text-align: center;
  padding: 48px 24px;
  color: var(--text-muted);
  background: var(--bg-color);
  border-radius: var(--radius);
}

/* Loading */
.loading {
  text-align: center;
  padding: 48px;
  color: var(--text-muted);
}

/* Text Utilities */
.text-muted {
  color: var(--text-muted);
}

/* Color Row (Brand colors) */
.color-row,
.typography-row {
  display: flex;
  gap: 12px;
  align-items: center;
  margin-bottom: 12px;
  padding: 12px;
  background: var(--bg-color);
  border-radius: var(--radius-sm);
}

.color-picker {
  width: 40px;
  height: 40px;
  border: none;
  border-radius: var(--radius-sm);
  cursor: pointer;
}

.color-hex {
  width: 100px;
}

/* Permission Tags */
.permissions-grid {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-bottom: 12px;
}

.permission-tag {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 6px 12px;
  background: var(--primary-color);
  color: #fff;
  border-radius: 20px;
  font-size: 12px;
  font-weight: 500;
}

.permission-remove {
  background: none;
  border: none;
  color: rgba(255, 255, 255, 0.8);
  cursor: pointer;
  font-size: 14px;
}

.permission-remove:hover {
  color: #fff;
}

/* ADR Card */
.adr-card .adr-id {
  font-family: var(--font-mono);
  font-size: 12px;
}

/* Artifacts Table */
.artifact-filters {
  display: flex;
  gap: 12px;
  margin-bottom: 16px;
}

.artifact-filters .form-select {
  width: 200px;
}

.artifacts-table-wrapper {
  margin-top: 16px;
}

/* Authentication Method Row */
.auth-method-row {
  display: flex;
  gap: 12px;
  align-items: center;
  margin-bottom: 8px;
}

/* Segregation Row */
.segregation-row {
  display: flex;
  gap: 12px;
  align-items: center;
  padding: 8px 12px;
  background: var(--bg-color);
  border-radius: var(--radius-sm);
  margin-bottom: 8px;
}

.seg-role {
  font-weight: 500;
  color: var(--text-color);
}

.seg-reason {
  flex: 1;
  color: var(--text-muted);
  font-size: 13px;
}

/* Approval Row */
.approval-row {
  display: flex;
  gap: 12px;
  align-items: center;
  padding: 8px 12px;
  background: var(--bg-color);
  border-radius: var(--radius-sm);
  margin-bottom: 8px;
}

.approval-role {
  flex: 1;
  font-weight: 500;
  color: var(--text-color);
}

/* Tags Container */
.tags-container {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  min-height: 40px;
  padding: 8px;
  background: var(--bg-color);
  border-radius: var(--radius-sm);
  margin-bottom: 8px;
}

/* Responsive adjustments */
@media (max-width: 1024px) {
  .nfr-view,
  .sd-view,
  .impl-view {
    flex-direction: column;
  }

  .nfr-sidebar,
  .sd-sidebar,
  .impl-sidebar {
    width: 100%;
  }

  .nfr-nav,
  .sd-nav,
  .impl-nav {
    display: flex;
    flex-wrap: wrap;
    gap: 4px;
  }

  .form-grid-2,
  .form-grid-3 {
    grid-template-columns: 1fr;
  }

  .modal-large,
  .modal-medium {
    width: 95%;
    max-width: 95%;
  }
}

/* ================================================
   DATABASE DESIGN VIEW STYLES
   ================================================ */

.db-design-view {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.db-design-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
}

@media (max-width: 1024px) {
  .db-design-grid {
    grid-template-columns: 1fr;
  }
}

/* ERD Container */
.erd-container {
  min-height: 400px;
  background: linear-gradient(135deg, #f8fafc 0%, #f1f5f9 100%);
  border-radius: var(--radius);
  padding: 20px;
  position: relative;
  overflow: auto;
}

.erd-empty {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  height: 300px;
  color: var(--text-muted);
}

.erd-empty i {
  font-size: 48px;
  margin-bottom: 16px;
  opacity: 0.5;
}

.erd-empty p {
  font-size: 14px;
  max-width: 300px;
  text-align: center;
}

/* ERD Grid Layout */
.erd-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
  gap: 20px;
  padding: 10px;
}

/* ERD Table Box */
.erd-table {
  background: white;
  border: 2px solid #e2e8f0;
  border-radius: 8px;
  box-shadow: 0 2px 8px rgba(0,0,0,0.06);
  cursor: pointer;
  transition: all 0.2s ease;
  overflow: hidden;
}

.erd-table:hover {
  border-color: var(--primary);
  box-shadow: 0 4px 12px rgba(59,130,246,0.15);
  transform: translateY(-2px);
}

.erd-table.selected {
  border-color: var(--primary);
  box-shadow: 0 0 0 3px rgba(59,130,246,0.2);
}

.erd-table.external {
  border-style: dashed;
  border-color: #9ca3af;
}

.erd-table.external .erd-table-header {
  background: linear-gradient(135deg, #f3f4f6 0%, #e5e7eb 100%);
}

.erd-table-header {
  background: linear-gradient(135deg, #3b82f6 0%, #2563eb 100%);
  color: white;
  padding: 10px 12px;
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.erd-table-name {
  font-weight: 600;
  font-size: 13px;
  display: flex;
  align-items: center;
  gap: 6px;
}

.erd-table-name i {
  opacity: 0.8;
}

.erd-external-icon {
  color: #fbbf24;
}

.erd-table-badges {
  display: flex;
  gap: 4px;
}

.erd-badge {
  font-size: 9px;
  font-weight: 700;
  padding: 2px 5px;
  border-radius: 3px;
  text-transform: uppercase;
}

.erd-badge.pk {
  background: #fef3c7;
  color: #92400e;
}

.erd-badge.fk {
  background: #dbeafe;
  color: #1e40af;
}

.erd-badge.idx {
  background: #d1fae5;
  color: #065f46;
}

.erd-table-body {
  padding: 10px 12px;
  border-bottom: 1px solid #f1f5f9;
}

.erd-field-count {
  font-size: 12px;
  color: var(--text-muted);
  display: flex;
  align-items: center;
  gap: 6px;
}

.erd-table-stats {
  display: flex;
  gap: 10px;
  margin-top: 6px;
}

.erd-stat {
  font-size: 11px;
  color: var(--text-muted);
  display: flex;
  align-items: center;
  gap: 4px;
}

.erd-stat i {
  font-size: 10px;
}

.erd-fields-preview {
  padding: 8px 12px;
  background: #fafafa;
}

.erd-field {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 11px;
  padding: 3px 0;
  color: var(--text-color);
}

.erd-field-icon {
  width: 14px;
  color: var(--text-muted);
  font-size: 10px;
}

.erd-field-icon .fa-key {
  color: #f59e0b;
}

.erd-field-icon .fa-link {
  color: #3b82f6;
}

.erd-field-name {
  flex: 1;
  font-weight: 500;
}

.erd-field-type {
  color: var(--text-muted);
  font-family: var(--font-mono);
  font-size: 10px;
}

.erd-required {
  color: #ef4444;
  font-weight: bold;
}

.erd-more-fields {
  padding: 6px 12px;
  font-size: 11px;
  color: var(--text-muted);
  text-align: center;
  background: #f8fafc;
  border-top: 1px solid #f1f5f9;
}

/* ERD Relationships SVG */
.erd-relationships {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  z-index: 1;
}

/* Database Connections List */
.connections-list {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.connection-item {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px;
  background: var(--bg-color);
  border-radius: var(--radius);
  border: 1px solid var(--border-color);
  transition: all 0.15s ease;
}

.connection-item:hover {
  border-color: var(--primary);
  background: white;
}

.connection-icon {
  width: 40px;
  height: 40px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: linear-gradient(135deg, #3b82f6 0%, #2563eb 100%);
  color: white;
  border-radius: 8px;
  font-size: 16px;
}

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

.connection-name {
  font-weight: 600;
  font-size: 14px;
  color: var(--text-color);
}

.connection-details {
  font-size: 12px;
  color: var(--text-muted);
  display: flex;
  gap: 12px;
  margin-top: 2px;
}

.conn-type {
  font-weight: 500;
}

.connection-status {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 12px;
  font-weight: 500;
}

.connection-actions {
  display: flex;
  gap: 4px;
}

/* Tables List Compact */
.tables-list.compact {
  display: flex;
  flex-direction: column;
  gap: 6px;
  max-height: 400px;
  overflow-y: auto;
}

.table-list-item {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 12px;
  background: var(--bg-color);
  border-radius: var(--radius);
  border: 1px solid transparent;
  cursor: pointer;
  transition: all 0.15s ease;
}

.table-list-item:hover {
  background: white;
  border-color: var(--border-color);
}

.table-list-item.selected {
  background: #eff6ff;
  border-color: var(--primary);
}

.table-list-icon {
  color: var(--primary);
  font-size: 14px;
}

.table-list-info {
  flex: 1;
  min-width: 0;
}

.table-list-name {
  font-weight: 600;
  font-size: 13px;
  color: var(--text-color);
}

.table-list-meta {
  font-size: 11px;
  color: var(--text-muted);
  display: flex;
  gap: 8px;
  margin-top: 2px;
}

.badge-pk, .badge-fk, .badge-idx {
  font-size: 9px;
  font-weight: 600;
  padding: 1px 4px;
  border-radius: 3px;
}

.badge-pk {
  background: #fef3c7;
  color: #92400e;
}

.badge-fk {
  background: #dbeafe;
  color: #1e40af;
}

.badge-idx {
  background: #d1fae5;
  color: #065f46;
}

.table-list-actions {
  display: flex;
  gap: 2px;
  opacity: 0;
  transition: opacity 0.15s;
}

.table-list-item:hover .table-list-actions {
  opacity: 1;
}

/* Table Details Panel */
.table-details-panel {
  margin-top: 16px;
}

.table-details {
  display: flex;
  flex-direction: column;
  gap: 20px;
}

.detail-section h4 {
  font-size: 13px;
  font-weight: 600;
  color: var(--text-color);
  margin-bottom: 12px;
  padding-bottom: 8px;
  border-bottom: 1px solid var(--border-color);
}

.detail-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
  gap: 12px;
}

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

.detail-item label {
  font-size: 11px;
  font-weight: 500;
  color: var(--text-muted);
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

.detail-item span {
  font-size: 13px;
  color: var(--text-color);
}

/* Fields Detail Table */
.fields-detail-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 12px;
}

.fields-detail-table th,
.fields-detail-table td {
  padding: 8px 10px;
  text-align: left;
  border-bottom: 1px solid var(--border-color);
}

.fields-detail-table th {
  font-weight: 600;
  color: var(--text-muted);
  background: var(--bg-color);
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

.fields-detail-table td code {
  font-family: var(--font-mono);
  font-size: 11px;
  background: var(--bg-color);
  padding: 2px 6px;
  border-radius: 3px;
}

.fields-detail-table .text-success {
  color: #10b981;
}

/* Relationships Detail */
.relationships-detail {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.rel-detail-item {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px 12px;
  background: var(--bg-color);
  border-radius: var(--radius);
}

.rel-direction {
  font-size: 11px;
  font-weight: 500;
  color: var(--text-muted);
}

.rel-target {
  font-weight: 600;
  color: var(--text-color);
}

.rel-type-badge {
  font-size: 10px;
  font-weight: 600;
  padding: 2px 8px;
  background: #e0e7ff;
  color: #4338ca;
  border-radius: 10px;
  margin-left: auto;
}

/* Entity Selection List (Create from Design Modal) */
.entity-selection-list {
  display: flex;
  flex-direction: column;
  gap: 8px;
  max-height: 400px;
  overflow-y: auto;
  padding: 4px;
}

.entity-select-item {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px;
  background: var(--bg-color);
  border-radius: var(--radius);
  border: 1px solid var(--border-color);
  cursor: pointer;
  transition: all 0.15s ease;
}

.entity-select-item:hover {
  background: white;
  border-color: var(--primary);
}

.entity-select-item.exists {
  opacity: 0.6;
  cursor: not-allowed;
}

.entity-select-item input[type="checkbox"] {
  width: 18px;
  height: 18px;
}

.entity-select-info {
  flex: 1;
}

.entity-select-name {
  font-weight: 600;
  font-size: 14px;
  color: var(--text-color);
  display: flex;
  align-items: center;
  gap: 8px;
}

.exists-badge {
  font-size: 10px;
  font-weight: 500;
  padding: 2px 8px;
  background: #fef3c7;
  color: #92400e;
  border-radius: 10px;
}

.entity-select-meta {
  font-size: 12px;
  color: var(--text-muted);
  margin-top: 2px;
}

.modal-hint {
  font-size: 13px;
  color: var(--text-muted);
  margin-bottom: 16px;
}

/* Header Actions */
.header-actions {
  display: flex;
  gap: 8px;
  align-items: center;
}

/* Code Textarea */
.form-textarea.code {
  font-family: var(--font-mono);
  font-size: 12px;
  line-height: 1.5;
  background: #1e293b;
  color: #e2e8f0;
  border-color: #334155;
}

.form-textarea.code::placeholder {
  color: #64748b;
}

/* ================================================
   STORAGE DESIGN VIEW STYLES
   ================================================ */

.storage-design-view {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.storage-layout {
  display: grid;
  grid-template-columns: 1fr 1.2fr;
  gap: 16px;
}

@media (max-width: 1024px) {
  .storage-layout {
    grid-template-columns: 1fr;
  }
}

/* Provider Selection */
.provider-list {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.provider-option {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 14px 16px;
  background: var(--bg-color);
  border: 2px solid var(--border-color);
  border-radius: var(--radius);
  cursor: pointer;
  transition: all 0.2s ease;
  position: relative;
}

.provider-option:hover {
  border-color: var(--primary);
  background: white;
}

.provider-option.selected {
  border-color: var(--primary);
  background: #eff6ff;
}

.provider-icon {
  width: 44px;
  height: 44px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 10px;
  color: white;
  font-size: 20px;
  flex-shrink: 0;
}

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

.provider-name {
  font-weight: 600;
  font-size: 14px;
  color: var(--text-color);
}

.provider-desc {
  font-size: 12px;
  color: var(--text-muted);
  margin-top: 2px;
}

.provider-status {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 6px;
}

.status-badge {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 12px;
  font-weight: 500;
}

.config-btn {
  flex-shrink: 0;
}

/* Buckets List */
.buckets-list {
  display: flex;
  flex-direction: column;
  gap: 8px;
  max-height: 450px;
  overflow-y: auto;
}

.bucket-item {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px;
  background: var(--bg-color);
  border: 1px solid var(--border-color);
  border-radius: var(--radius);
  transition: all 0.15s ease;
}

.bucket-item:hover {
  background: white;
  border-color: var(--primary-light);
}

.bucket-item.selected {
  background: #eff6ff;
  border-color: var(--primary);
}

.bucket-checkbox {
  position: relative;
  display: flex;
  align-items: center;
  cursor: pointer;
}

.bucket-checkbox input[type="checkbox"] {
  width: 20px;
  height: 20px;
  cursor: pointer;
}

.bucket-icon {
  width: 36px;
  height: 36px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: linear-gradient(135deg, #8b5cf6 0%, #6366f1 100%);
  color: white;
  border-radius: 8px;
  font-size: 14px;
}

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

.bucket-name {
  font-weight: 600;
  font-size: 13px;
  color: var(--text-color);
}

.bucket-meta {
  display: flex;
  gap: 10px;
  font-size: 11px;
  color: var(--text-muted);
  margin-top: 3px;
  align-items: center;
}

.bucket-meta i {
  font-size: 10px;
}

.badge-default {
  background: #dbeafe;
  color: #1e40af;
  padding: 2px 6px;
  border-radius: 4px;
  font-size: 10px;
  font-weight: 500;
}

.badge-manual {
  background: #fef3c7;
  color: #92400e;
  padding: 2px 6px;
  border-radius: 4px;
  font-size: 10px;
  font-weight: 500;
}

.bucket-actions {
  display: flex;
  gap: 4px;
  opacity: 0;
  transition: opacity 0.15s;
}

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

.selected-count {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 12px;
  background: #f0fdf4;
  border: 1px solid #bbf7d0;
  border-radius: var(--radius);
  font-size: 13px;
  color: #166534;
  margin-top: 12px;
}

.selected-count i {
  color: #22c55e;
}

/* Folder Paths */
.folder-paths-list {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.folder-path-item {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  padding: 12px;
  background: var(--bg-color);
  border-radius: var(--radius);
  border: 1px solid var(--border-color);
}

.folder-path-icon {
  width: 32px;
  height: 32px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: #fef3c7;
  color: #d97706;
  border-radius: 6px;
  flex-shrink: 0;
}

.folder-path-info {
  flex: 1;
  min-width: 0;
}

.folder-path-value code {
  font-family: var(--font-mono);
  font-size: 13px;
  background: #1e293b;
  color: #e2e8f0;
  padding: 4px 8px;
  border-radius: 4px;
}

.folder-path-desc {
  font-size: 12px;
  color: var(--text-muted);
  margin-top: 4px;
}

.folder-path-env {
  display: flex;
  align-items: center;
  gap: 6px;
  margin-top: 6px;
  font-size: 11px;
  color: #059669;
}

.folder-path-env code {
  font-family: var(--font-mono);
  background: #d1fae5;
  color: #065f46;
  padding: 2px 6px;
  border-radius: 3px;
}

.folder-path-actions {
  display: flex;
  gap: 4px;
}

/* Empty States */
.empty-state-sm {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 40px 20px;
  color: var(--text-muted);
  text-align: center;
}

.empty-state-sm i {
  font-size: 36px;
  margin-bottom: 12px;
  opacity: 0.4;
}

.empty-state-sm p {
  font-size: 13px;
  max-width: 280px;
}

/* Config Notice */
.config-notice {
  display: flex;
  gap: 12px;
  padding: 12px 14px;
  background: #eff6ff;
  border: 1px solid #bfdbfe;
  border-radius: var(--radius);
  margin-bottom: 16px;
  font-size: 13px;
  color: #1e40af;
}

.config-notice i {
  color: #3b82f6;
  flex-shrink: 0;
  margin-top: 2px;
}

.config-notice p {
  margin: 0;
  line-height: 1.5;
}

/* Form Row */
.form-row {
  display: flex;
  gap: 12px;
}

.form-row .form-group {
  flex: 1;
}

.form-group.flex-1 {
  flex: 1;
}

/* Env Var Fields Animation */
.env-var-fields {
  padding-top: 12px;
  border-top: 1px dashed var(--border-color);
  margin-top: 12px;
}

/* ============================================
   BACKEND DESIGN VIEW STYLES
   ============================================ */

.backend-design-view {
  display: flex;
  flex-direction: column;
  gap: 20px;
}

/* Canvas Header */
.backend-canvas-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding-bottom: 8px;
  border-bottom: 1px solid var(--stroke);
}

.backend-canvas-title {
  font-size: 18px;
  font-weight: 600;
  color: var(--text);
}

/* Frontend Design Tabs — reuses .backend-tabs / .backend-tab pattern */
.fe-tabs {
  display: flex;
  gap: 4px;
  border-bottom: 1px solid var(--stroke);
  margin-bottom: 20px;
  overflow-x: auto;
}

.fe-tab {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 12px 18px;
  background: transparent;
  border: none;
  border-bottom: 2px solid transparent;
  font-size: 14px;
  font-weight: 500;
  color: var(--text-secondary);
  cursor: pointer;
  transition: all 0.2s ease;
  margin-bottom: -1px;
  white-space: nowrap;
}

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

.fe-tab.active {
  color: var(--accent);
  border-bottom-color: var(--accent);
  font-weight: 600;
}

.fe-tab i { font-size: 15px; }

.fe-tab .fe-tab-badge {
  font-size: 11px;
  font-weight: 600;
  background: var(--accent);
  color: #fff;
  padding: 1px 7px;
  border-radius: 10px;
  min-width: 18px;
  text-align: center;
  line-height: 16px;
}

.fe-tab.active .fe-tab-badge {
  background: var(--accent);
}

@media (max-width: 640px) {
  .fe-tab span:not(.fe-tab-badge) { display: none; }
  .fe-tab { padding: 10px 12px; }
}

/* Frontend Design — Item Cards */
.fe-item-card {
  background: var(--panel-bg);
  border: 1px solid var(--border-color);
  border-radius: var(--radius);
  padding: 16px;
  transition: border-color 0.2s, box-shadow 0.2s;
}
.fe-item-card:hover {
  border-color: var(--accent);
  box-shadow: 0 2px 8px rgba(0,0,0,0.06);
}
.fe-item-card-header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 10px;
}
.fe-item-card-title {
  font-weight: 600;
  font-size: 14px;
  color: var(--text);
  display: flex;
  align-items: center;
  gap: 8px;
}
.fe-item-card-title i {
  font-size: 14px;
  color: var(--accent);
}
.fe-item-card-actions {
  display: flex;
  gap: 4px;
  opacity: 0;
  transition: opacity 0.15s;
  flex-shrink: 0;
}
.fe-item-card:hover .fe-item-card-actions { opacity: 1; }
.fe-item-card-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-bottom: 8px;
}
.fe-item-card-desc {
  font-size: 12px;
  color: var(--text-secondary);
  line-height: 1.5;
}
.fe-item-card-desc code {
  background: var(--panel);
  padding: 1px 6px;
  border-radius: 4px;
  font-size: 11px;
}
.fe-item-card-footer {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-top: 10px;
  padding-top: 8px;
  border-top: 1px solid var(--stroke);
  font-size: 12px;
  color: var(--text-secondary);
}
.fe-items-grid {
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.fe-empty {
  text-align: center;
  padding: 40px 20px;
  color: var(--text-secondary);
}
.fe-empty i {
  font-size: 32px;
  margin-bottom: 12px;
  opacity: 0.4;
}

/* Navigation Tree */
.fe-nav-tree { display: flex; flex-direction: column; gap: 4px; }
.fe-nav-node {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 14px;
  background: var(--panel-bg);
  border: 1px solid var(--border-color);
  border-radius: var(--radius-sm);
  transition: border-color 0.2s, box-shadow 0.2s;
}
.fe-nav-node:hover {
  border-color: var(--accent);
  box-shadow: 0 1px 4px rgba(0,0,0,0.05);
}
.fe-nav-node.child {
  margin-left: 32px;
  border-left: 2px solid var(--accent);
}
.fe-nav-node-icon {
  width: 28px; height: 28px;
  display: flex; align-items: center; justify-content: center;
  border-radius: 6px;
  font-size: 13px;
  background: rgba(99,102,241,0.1);
  color: var(--accent);
  flex-shrink: 0;
}
.fe-nav-node-info { flex: 1; min-width: 0; }
.fe-nav-node-label { font-weight: 600; font-size: 13px; color: var(--text); }
.fe-nav-node-route { font-size: 11px; color: var(--text-secondary); }
.fe-nav-node-route code {
  background: var(--panel);
  padding: 1px 5px;
  border-radius: 3px;
  font-size: 11px;
}
.fe-nav-node-tags { display: flex; gap: 4px; flex-wrap: wrap; }
.fe-nav-node-actions {
  display: flex; gap: 4px;
  opacity: 0; transition: opacity 0.15s;
  flex-shrink: 0;
}
.fe-nav-node:hover .fe-nav-node-actions { opacity: 1; }

/* Stats Row */
.backend-stats {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: 16px;
}

.stat-card {
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 20px;
  background: var(--surface);
  border: 1px solid var(--stroke);
  border-radius: 12px;
  transition: all 0.2s ease;
}

.stat-card:hover {
  border-color: var(--accent);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
}

.stat-icon {
  width: 48px;
  height: 48px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 12px;
  font-size: 20px;
}

.stat-icon.routes {
  background: rgba(59, 130, 246, 0.1);
  color: #3b82f6;
}

.stat-icon.models {
  background: rgba(16, 185, 129, 0.1);
  color: #10b981;
}

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

.stat-icon.tables {
  background: rgba(245, 158, 11, 0.1);
  color: #f59e0b;
}

.stat-info {
  flex: 1;
}

.stat-value {
  font-size: 28px;
  font-weight: 700;
  color: var(--text-primary);
  line-height: 1;
}

.stat-label {
  font-size: 13px;
  color: var(--text-secondary);
  margin-top: 4px;
}

/* Tab Navigation */
.backend-tabs {
  display: flex;
  gap: 8px;
  border-bottom: 1px solid var(--stroke);
  margin-bottom: 20px;
}

.backend-tab {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 12px 20px;
  background: transparent;
  border: none;
  border-bottom: 2px solid transparent;
  font-size: 14px;
  font-weight: 500;
  color: var(--text-secondary);
  cursor: pointer;
  transition: all 0.2s ease;
  margin-bottom: -1px;
}

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

.backend-tab.active {
  color: var(--accent);
  border-bottom-color: var(--accent);
  font-weight: 600;
}

.backend-tab i {
  font-size: 16px;
}

/* Tab Content */
.backend-tab-content {
  min-height: 400px;
}

/* Empty State */
.backend-empty-state {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 60px 20px;
  text-align: center;
  background: var(--surface);
  border: 2px dashed var(--stroke);
  border-radius: 16px;
}

.backend-empty-state i {
  font-size: 48px;
  color: var(--text-tertiary);
  margin-bottom: 16px;
}

.backend-empty-state h3 {
  font-size: 20px;
  font-weight: 600;
  color: var(--text-primary);
  margin: 0 0 8px 0;
}

.backend-empty-state p {
  font-size: 14px;
  color: var(--text-secondary);
  margin: 0 0 24px 0;
  max-width: 400px;
}

/* Endpoints Table */
.endpoints-table-container {
  background: var(--surface);
  border: 1px solid var(--stroke);
  border-radius: 12px;
  overflow: hidden;
}

.endpoints-table {
  width: 100%;
  border-collapse: collapse;
}

.endpoints-table th {
  text-align: left;
  padding: 14px 16px;
  font-size: 12px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  color: var(--text-secondary);
  background: var(--hover);
  border-bottom: 1px solid var(--stroke);
}

.endpoints-table td {
  padding: 14px 16px;
  border-bottom: 1px solid var(--stroke);
  vertical-align: middle;
}

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

.endpoint-row:hover {
  background: var(--hover);
}

.col-method {
  width: 80px;
}

.col-path {
  min-width: 200px;
}

.col-model,
.col-controller {
  width: 140px;
}

.col-capabilities {
  width: 200px;
}

.col-actions {
  width: 100px;
  text-align: right;
}

/* Method Badges */
.method-badge {
  display: inline-block;
  padding: 4px 10px;
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  border-radius: 4px;
  letter-spacing: 0.5px;
}

.method-badge.get {
  background: rgba(16, 185, 129, 0.15);
  color: #059669;
}

.method-badge.post {
  background: rgba(59, 130, 246, 0.15);
  color: #2563eb;
}

.method-badge.put {
  background: rgba(245, 158, 11, 0.15);
  color: #d97706;
}

.method-badge.patch {
  background: rgba(139, 92, 246, 0.15);
  color: #7c3aed;
}

.method-badge.delete {
  background: rgba(239, 68, 68, 0.15);
  color: #dc2626;
}

/* Endpoint Path */
.endpoint-path {
  font-family: 'SF Mono', Monaco, Consolas, monospace;
  font-size: 13px;
  color: var(--text-primary);
  background: var(--hover);
  padding: 4px 8px;
  border-radius: 4px;
}

/* Model/Controller Tags */
.model-tag,
.controller-tag {
  font-size: 13px;
  color: var(--text-secondary);
}

/* Capability Badges */
.capability-badges {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
}

.capability-badge {
  padding: 3px 8px;
  font-size: 11px;
  background: var(--hover);
  color: var(--text-secondary);
  border-radius: 4px;
}

.capability-badge.more {
  background: var(--accent);
  color: white;
}

/* Icon Buttons */
.icon-btn {
  width: 32px;
  height: 32px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: transparent;
  border: none;
  border-radius: var(--radius-sm);
  color: var(--text-muted);
  cursor: pointer;
  transition: all 0.2s ease;
}

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

.icon-btn.danger:hover {
  background: rgba(239, 68, 68, 0.1);
  color: #dc2626;
}

.icon-btn.sm {
  width: 28px;
  height: 28px;
  font-size: 12px;
}

/* Empty List */
.empty-list {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 40px 20px;
  text-align: center;
  color: var(--text-tertiary);
}

.empty-list i {
  font-size: 32px;
  margin-bottom: 12px;
}

.empty-list p {
  margin: 0;
  font-size: 14px;
}

/* Routes List */
.routes-list {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.route-item {
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 14px 16px;
  background: var(--surface);
  border: 1px solid var(--stroke);
  border-radius: 8px;
  transition: all 0.15s ease;
}

.route-item:hover {
  border-color: var(--accent);
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.04);
}

.route-info {
  flex: 1;
  display: flex;
  align-items: center;
  gap: 12px;
  min-width: 0;
}

.route-path {
  font-family: 'SF Mono', Monaco, Consolas, monospace;
  font-size: 13px;
  color: var(--text-primary);
}

.route-desc {
  font-size: 13px;
  color: var(--text-secondary);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.route-meta {
  display: flex;
  gap: 8px;
}

.meta-tag {
  display: flex;
  align-items: center;
  gap: 4px;
  padding: 4px 8px;
  font-size: 11px;
  border-radius: 4px;
}

.meta-tag.auth {
  background: rgba(139, 92, 246, 0.1);
  color: #8b5cf6;
}

.meta-tag.rate {
  background: rgba(245, 158, 11, 0.1);
  color: #f59e0b;
}

.route-actions {
  display: flex;
  gap: 6px;
}

/* Models Grid */
.models-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap: 16px;
}

.model-card {
  background: var(--surface);
  border: 1px solid var(--stroke);
  border-radius: 12px;
  overflow: hidden;
  transition: all 0.2s ease;
}

.model-card:hover {
  border-color: var(--accent);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
}

.model-header {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 16px;
  background: var(--hover);
  border-bottom: 1px solid var(--stroke);
}

.model-icon {
  width: 36px;
  height: 36px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(16, 185, 129, 0.1);
  color: #10b981;
  border-radius: 8px;
  font-size: 16px;
}

.model-name {
  flex: 1;
  font-size: 16px;
  font-weight: 600;
  color: var(--text-primary);
}

.model-actions {
  display: flex;
  gap: 4px;
}

.model-table {
  padding: 12px 16px;
  border-bottom: 1px solid var(--stroke);
}

.model-table-name {
  font-family: 'SF Mono', Monaco, Consolas, monospace;
  font-size: 12px;
  color: var(--text-secondary);
}

.model-table-name::before {
  content: 'Table: ';
  color: var(--text-tertiary);
}

.model-fields {
  padding: 12px 16px;
}

.model-field {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 6px 0;
  font-size: 13px;
}

.model-field:not(:last-child) {
  border-bottom: 1px dashed var(--stroke);
}

.field-name {
  font-family: 'SF Mono', Monaco, Consolas, monospace;
  color: var(--text-primary);
}

.field-type {
  color: var(--text-tertiary);
  font-size: 11px;
  text-transform: uppercase;
}

.field-badge {
  padding: 2px 5px;
  font-size: 9px;
  font-weight: 700;
  border-radius: 3px;
  text-transform: uppercase;
}

.field-badge.pk {
  background: rgba(59, 130, 246, 0.15);
  color: #2563eb;
}

.field-badge.fk {
  background: rgba(245, 158, 11, 0.15);
  color: #d97706;
}

.model-field.more {
  color: var(--text-tertiary);
  font-style: italic;
  border-bottom: none;
}

/* Controllers List */
.controllers-list {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.controller-item {
  background: var(--surface);
  border: 1px solid var(--stroke);
  border-radius: 12px;
  overflow: hidden;
  transition: all 0.2s ease;
}

.controller-item:hover {
  border-color: var(--accent);
}

.controller-header {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 16px;
  background: var(--hover);
  border-bottom: 1px solid var(--stroke);
}

.controller-icon {
  width: 40px;
  height: 40px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(139, 92, 246, 0.1);
  color: #8b5cf6;
  border-radius: 8px;
  font-size: 18px;
}

.controller-info {
  flex: 1;
}

.controller-name {
  font-size: 16px;
  font-weight: 600;
  color: var(--text-primary);
}

.controller-model {
  font-size: 12px;
  color: var(--text-secondary);
  margin-top: 2px;
}

.controller-actions {
  display: flex;
  gap: 6px;
}

.controller-capabilities {
  padding: 14px 16px;
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

.capability-tag {
  padding: 5px 10px;
  font-size: 12px;
  background: var(--hover);
  color: var(--text-secondary);
  border-radius: 6px;
}

.no-caps {
  font-size: 13px;
  color: var(--text-tertiary);
  font-style: italic;
}

/* Modal Enhancements for Backend Design */
.form-label-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 8px;
}

.fields-container {
  border: 1px solid var(--stroke);
  border-radius: 8px;
  padding: 12px;
  max-height: 300px;
  overflow-y: auto;
  background: var(--hover);
}

.empty-fields {
  text-align: center;
  padding: 20px;
  color: var(--text-tertiary);
  font-size: 13px;
}

.field-row {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px;
  background: var(--surface);
  border: 1px solid var(--stroke);
  border-radius: 6px;
  margin-bottom: 8px;
}

.field-row:last-child {
  margin-bottom: 0;
}

.field-name-input {
  flex: 1;
  min-width: 100px;
}

.field-type-select {
  width: 120px;
}

.field-option {
  display: flex;
  align-items: center;
  gap: 4px;
  font-size: 11px;
  color: var(--text-secondary);
  cursor: pointer;
  white-space: nowrap;
}

.field-option input {
  margin: 0;
}

.remove-field-btn {
  flex-shrink: 0;
}

/* Capabilities Grid */
.capabilities-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
  gap: 8px;
}

.capability-checkbox {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  padding: 12px;
  background: var(--surface);
  border: 1px solid var(--stroke);
  border-radius: 8px;
  cursor: pointer;
  transition: all 0.15s ease;
}

.capability-checkbox:hover {
  border-color: var(--accent);
}

.capability-checkbox input {
  margin-top: 2px;
}

.capability-info {
  flex: 1;
}

.capability-name {
  font-size: 14px;
  font-weight: 500;
  color: var(--text-primary);
}

.capability-desc {
  font-size: 12px;
  color: var(--text-secondary);
  margin-top: 2px;
}

/* Table Selection List */
.table-selection-list {
  display: flex;
  flex-direction: column;
  gap: 8px;
  max-height: 250px;
  overflow-y: auto;
  padding: 4px;
}

.table-select-item {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px;
  background: var(--surface);
  border: 1px solid var(--stroke);
  border-radius: 8px;
  cursor: pointer;
  transition: all 0.15s ease;
}

.table-select-item:hover {
  border-color: var(--accent);
}

.table-select-item input {
  width: 18px;
  height: 18px;
}

.table-select-info {
  flex: 1;
}

.table-select-name {
  font-size: 14px;
  font-weight: 500;
  color: var(--text-primary);
}

.table-select-fields {
  font-size: 12px;
  color: var(--text-secondary);
}

/* Generation Preview */
.generation-preview {
  margin-top: 16px;
  border: 1px solid var(--stroke);
  border-radius: 8px;
  overflow: hidden;
}

.preview-header {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 10px 14px;
  background: var(--hover);
  border-bottom: 1px solid var(--stroke);
  font-size: 13px;
  font-weight: 500;
  color: var(--text-secondary);
}

.preview-content {
  padding: 14px;
  max-height: 200px;
  overflow-y: auto;
  font-size: 13px;
  color: var(--text-secondary);
}

.preview-table {
  margin-bottom: 16px;
}

.preview-table:last-child {
  margin-bottom: 0;
}

.preview-table-name {
  font-weight: 600;
  color: var(--text-primary);
  margin-bottom: 6px;
  padding-bottom: 6px;
  border-bottom: 1px solid var(--stroke);
}

.preview-item {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 4px 0;
  font-family: 'SF Mono', Monaco, Consolas, monospace;
  font-size: 12px;
}

.preview-item i {
  width: 16px;
  color: var(--text-tertiary);
}

/* Checkbox Group */
.checkbox-group {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.checkbox-item {
  display: flex;
  align-items: center;
  gap: 10px;
  cursor: pointer;
  font-size: 14px;
  color: var(--text-primary);
}

.checkbox-item input {
  width: 16px;
  height: 16px;
}

/* ============================================
   ENVIRONMENT SETUP VIEW STYLES
   ============================================ */

.env-setup-view {
  display: flex;
  flex-direction: column;
  gap: 20px;
  height: 100%;
}

.env-canvas-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding-bottom: 12px;
  border-bottom: 1px solid var(--stroke);
}

.env-canvas-title {
  font-size: 18px;
  font-weight: 600;
  color: var(--text);
}

.env-layout {
  display: grid;
  grid-template-columns: 280px 1fr;
  gap: 24px;
  flex: 1;
  min-height: 0;
}

/* Environment List Panel */
.env-list-panel {
  background: var(--surface);
  border: 1px solid var(--stroke);
  border-radius: 12px;
  display: flex;
  flex-direction: column;
  overflow: hidden;
}

.env-list-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 16px;
  border-bottom: 1px solid var(--stroke);
}

.env-list-title {
  font-weight: 600;
  color: var(--text);
}

.env-count {
  background: var(--panel);
  padding: 2px 8px;
  border-radius: 12px;
  font-size: 12px;
  color: var(--text-muted);
}

.env-list {
  flex: 1;
  overflow-y: auto;
  padding: 8px;
}

.env-empty-list {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 40px 20px;
  color: var(--text-muted);
  text-align: center;
}

.env-empty-list i {
  font-size: 32px;
  opacity: 0.5;
}

.env-list-item {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px;
  border-radius: 8px;
  cursor: pointer;
  transition: all 0.2s ease;
}

.env-list-item:hover {
  background: var(--panel);
}

.env-list-item.selected {
  background: var(--accent-soft);
  border: 1px solid var(--accent);
}

.env-item-icon {
  width: 40px;
  height: 40px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 10px;
  font-size: 16px;
  flex-shrink: 0;
}

.env-item-icon.development {
  background: rgba(59, 130, 246, 0.1);
  color: #3b82f6;
}

.env-item-icon.staging {
  background: rgba(245, 158, 11, 0.1);
  color: #f59e0b;
}

.env-item-icon.production {
  background: rgba(239, 68, 68, 0.1);
  color: #ef4444;
}

.env-item-icon.sandbox {
  background: rgba(16, 185, 129, 0.1);
  color: #10b981;
}

.env-item-info {
  flex: 1;
  min-width: 0;
}

.env-item-name {
  font-weight: 500;
  color: var(--text);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.env-item-meta {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-top: 4px;
}

.env-type-badge {
  font-size: 10px;
  padding: 2px 6px;
  border-radius: 4px;
  text-transform: uppercase;
  font-weight: 500;
}

.env-type-badge.development {
  background: rgba(59, 130, 246, 0.1);
  color: #3b82f6;
}

.env-type-badge.staging {
  background: rgba(245, 158, 11, 0.1);
  color: #f59e0b;
}

.env-type-badge.production {
  background: rgba(239, 68, 68, 0.1);
  color: #ef4444;
}

.env-type-badge.sandbox {
  background: rgba(16, 185, 129, 0.1);
  color: #10b981;
}

.env-status-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
}

.env-status-dot.planned {
  background: var(--text-muted);
}

.env-status-dot.active {
  background: #10b981;
}

.env-status-dot.deprecated {
  background: #ef4444;
}

.env-default-star {
  color: #f59e0b;
  font-size: 12px;
}

/* Environment Editor Panel */
.env-editor-panel {
  background: var(--surface);
  border: 1px solid var(--stroke);
  border-radius: 12px;
  display: flex;
  flex-direction: column;
  overflow: hidden;
}

.env-no-selection {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 12px;
  padding: 60px 20px;
  color: var(--text-muted);
  text-align: center;
}

.env-no-selection i {
  font-size: 48px;
  opacity: 0.3;
}

.env-no-selection h3 {
  color: var(--text);
  margin: 0;
}

.env-no-selection p {
  margin: 0;
  max-width: 300px;
}

.env-editor {
  display: flex;
  flex-direction: column;
  height: 100%;
}

.env-editor-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 16px 20px;
  border-bottom: 1px solid var(--stroke);
}

.env-editor-title {
  display: flex;
  align-items: center;
  gap: 12px;
}

.env-name-display {
  font-size: 18px;
  font-weight: 600;
  color: var(--text);
}

.env-editor-actions {
  display: flex;
  gap: 8px;
}

/* Environment Tabs */
.env-tabs {
  display: flex;
  gap: 4px;
  padding: 0 16px;
  border-bottom: 1px solid var(--stroke);
  overflow-x: auto;
}

.env-tab {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 12px 16px;
  background: transparent;
  border: none;
  border-bottom: 2px solid transparent;
  color: var(--text-muted);
  font-size: 13px;
  cursor: pointer;
  white-space: nowrap;
  transition: all 0.2s ease;
}

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

.env-tab.active {
  color: var(--accent);
  border-bottom-color: var(--accent);
  font-weight: 500;
}

.env-tab i {
  font-size: 14px;
}

/* Tab Content */
.env-tab-content {
  flex: 1;
  overflow-y: auto;
  padding: 20px;
}

.env-form-section {
  margin-bottom: 32px;
}

.env-form-section:last-child {
  margin-bottom: 0;
}

.env-form-title {
  font-size: 15px;
  font-weight: 600;
  color: var(--text);
  margin: 0 0 4px 0;
}

.env-form-desc {
  font-size: 13px;
  color: var(--text-muted);
  margin: 0 0 16px 0;
}

/* Form Layouts */
.form-grid-2 {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 16px;
  margin-bottom: 16px;
}

.form-grid-3 {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 16px;
  margin-bottom: 16px;
}

/* Radio Groups */
.radio-group {
  display: flex;
  gap: 20px;
  flex-wrap: wrap;
}

.radio-group.vertical {
  flex-direction: column;
  gap: 12px;
}

.radio-item {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  cursor: pointer;
}

.radio-item input[type="radio"] {
  margin-top: 3px;
}

.radio-label {
  font-weight: 500;
  color: var(--text);
  display: block;
}

.radio-desc {
  font-size: 12px;
  color: var(--text-muted);
  display: block;
  margin-top: 2px;
}

/* Checkbox Grid */
.checkbox-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
  gap: 12px;
}

.mini-checkbox-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 8px;
}

.checkbox-item.sm {
  font-size: 12px;
}

.checkbox-item.sm input {
  width: 14px;
  height: 14px;
}

/* Destinations List */
.destinations-list {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.destination-item {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px;
  background: var(--panel);
  border-radius: 8px;
  opacity: 0.7;
  transition: all 0.2s ease;
}

.destination-item.enabled {
  opacity: 1;
  background: var(--accent-soft);
}

.destination-item .checkbox-item {
  min-width: 180px;
}

.destination-item .form-input.sm {
  flex: 1;
  max-width: 300px;
}

/* Tools Grid */
.tools-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap: 16px;
}

.tool-card {
  background: var(--panel);
  border: 1px solid var(--stroke);
  border-radius: 10px;
  overflow: hidden;
  opacity: 0.7;
  transition: all 0.2s ease;
}

.tool-card.enabled {
  opacity: 1;
  border-color: var(--accent);
  background: var(--surface);
}

.tool-card-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 14px 16px;
  border-bottom: 1px solid var(--stroke);
}

.tool-info {
  display: flex;
  align-items: center;
  gap: 10px;
}

.tool-info i {
  font-size: 18px;
  color: var(--accent);
}

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

.tool-card-body {
  padding: 16px;
}

.tool-card-body .form-group {
  margin-bottom: 12px;
}

.tool-card-body .form-group:last-child {
  margin-bottom: 0;
}

.form-label.sm {
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  margin-bottom: 6px;
}

.form-select.sm,
.form-input.sm {
  padding: 6px 10px;
  font-size: 13px;
}

/* 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(--stroke);
  transition: 0.3s;
  border-radius: 24px;
}

.toggle-slider:before {
  position: absolute;
  content: "";
  height: 18px;
  width: 18px;
  left: 3px;
  bottom: 3px;
  background-color: white;
  transition: 0.3s;
  border-radius: 50%;
}

.toggle-switch input:checked + .toggle-slider {
  background-color: var(--accent);
}

.toggle-switch input:checked + .toggle-slider:before {
  transform: translateX(20px);
}

/* Range Slider */
.form-range {
  width: 100%;
  height: 6px;
  border-radius: 3px;
  background: var(--stroke);
  outline: none;
  -webkit-appearance: none;
}

.form-range::-webkit-slider-thumb {
  -webkit-appearance: none;
  width: 18px;
  height: 18px;
  border-radius: 50%;
  background: var(--accent);
  cursor: pointer;
}

.range-labels {
  display: flex;
  justify-content: space-between;
  font-size: 11px;
  color: var(--text-muted);
  margin-top: 6px;
}

/* Collaboration Mode Cards */
.collab-mode-cards {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 12px;
}

.collab-mode-card {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  padding: 20px;
  background: var(--panel);
  border: 2px solid var(--stroke);
  border-radius: 12px;
  cursor: pointer;
  transition: all 0.2s ease;
  text-align: center;
}

.collab-mode-card:hover {
  border-color: var(--accent);
}

.collab-mode-card.selected {
  border-color: var(--accent);
  background: var(--accent-soft);
}

.collab-mode-card input[type="radio"] {
  display: none;
}

.collab-mode-icon {
  width: 48px;
  height: 48px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--surface);
  border-radius: 12px;
  font-size: 20px;
  color: var(--accent);
}

.collab-mode-name {
  font-weight: 600;
  color: var(--text);
}

.collab-mode-desc {
  font-size: 12px;
  color: var(--text-muted);
}

/* Mapping Grid */
.mapping-grid {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.mapping-row {
  display: grid;
  grid-template-columns: 150px 1fr;
  gap: 16px;
  align-items: center;
}

.mapping-row.header {
  font-weight: 600;
  color: var(--text-muted);
  font-size: 12px;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  padding-bottom: 8px;
  border-bottom: 1px solid var(--stroke);
}

.mapping-row span {
  color: var(--text);
}

/* Responsive */
@media (max-width: 1024px) {
  .env-layout {
    grid-template-columns: 1fr;
  }
  
  .env-list-panel {
    max-height: 200px;
  }
  
  .form-grid-3 {
    grid-template-columns: repeat(2, 1fr);
  }
  
  .collab-mode-cards {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 640px) {
  .form-grid-2,
  .form-grid-3 {
    grid-template-columns: 1fr;
  }
  
  .tools-grid {
    grid-template-columns: 1fr;
  }
  
  .env-tabs {
    padding: 0 8px;
  }
  
  .env-tab {
    padding: 10px 12px;
    font-size: 12px;
  }
  
  .env-tab i {
    display: none;
  }
}

/* Full-width editor panel (for single environment view) */
.env-editor-panel.full-width {
  width: 100%;
  max-width: 100%;
}

.env-loading {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 60px;
  color: var(--text-muted);
}

/* ========================================
   Frontend Dev Agent Styles
   ======================================== */

.frontend-agent-container {
  padding: 0;
}

.frontend-agent-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 8px;
}

.frontend-agent-title {
  display: flex;
  align-items: center;
  gap: 12px;
}

.frontend-agent-title i {
  font-size: 24px;
  color: var(--primary-color);
}

.frontend-agent-title h2 {
  font-size: 20px;
  font-weight: 600;
  color: var(--text-color);
  margin: 0;
}

.frontend-agent-subtitle {
  color: var(--text-muted);
  font-size: 14px;
  margin-bottom: 24px;
  line-height: 1.5;
}

.frontend-agent-tabs {
  display: flex;
  gap: 4px;
  border-bottom: 2px solid var(--border-color);
  margin-bottom: 24px;
  padding-bottom: 0;
  flex-wrap: wrap;
}

.frontend-tab {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 12px 16px;
  border: none;
  background: transparent;
  color: var(--text-muted);
  font-size: 13px;
  font-weight: 500;
  cursor: pointer;
  border-bottom: 2px solid transparent;
  margin-bottom: -2px;
  transition: var(--transition);
  border-radius: var(--radius-sm) var(--radius-sm) 0 0;
}

.frontend-tab:hover {
  color: var(--primary-color);
  background: var(--bg-color);
}

.frontend-tab.active {
  color: var(--primary-color);
  border-bottom-color: var(--primary-color);
  background: var(--panel-bg);
}

.frontend-tab i {
  font-size: 14px;
}

.frontend-agent-content {
  min-height: 400px;
}

.frontend-pane {
  display: none;
}

.frontend-pane.active {
  display: block;
  animation: fadeIn 0.2s ease;
}

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

/* Page table in Pages tab */
.fe-page-table {
  width: 100%;
  border-collapse: collapse;
}

.fe-page-table th,
.fe-page-table td {
  padding: 12px;
  text-align: left;
  border-bottom: 1px solid var(--border-color);
}

.fe-page-table th {
  font-weight: 600;
  font-size: 12px;
  text-transform: uppercase;
  color: var(--text-muted);
  background: var(--bg-color);
}

.fe-page-table td {
  font-size: 14px;
}

.fe-page-table tr:hover td {
  background: var(--bg-color);
}

.fe-page-actions {
  display: flex;
  gap: 8px;
}

/* Prompt preview area */
.fe-prompt-preview {
  background: #1e1e2e;
  color: #cdd6f4;
  padding: 16px;
  border-radius: var(--radius);
  font-family: var(--font-mono);
  font-size: 12px;
  line-height: 1.6;
  max-height: 400px;
  overflow-y: auto;
  white-space: pre-wrap;
  word-break: break-word;
}

/* Responsive adjustments */
@media (max-width: 768px) {
  .frontend-agent-tabs {
    gap: 2px;
  }

  .frontend-tab {
    padding: 10px 12px;
    font-size: 12px;
  }

  .frontend-tab span {
    display: none;
  }

  .frontend-tab i {
    font-size: 16px;
  }
}

/* ========================================
   Integration Dev Agent - World Class UI
   ======================================== */

.integ-dev-container {
  display: flex;
  flex-direction: column;
  gap: 24px;
}

/* Integration Specs Grid */
.integ-specs-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(380px, 1fr));
  gap: 16px;
}

.integ-spec-card {
  background: var(--panel-bg);
  border: 1px solid var(--border-color);
  border-radius: var(--radius);
  padding: 16px;
  transition: var(--transition);
}

.integ-spec-card:hover {
  border-color: var(--primary-color);
  box-shadow: var(--shadow-md);
}

.integ-spec-header {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  margin-bottom: 12px;
}

.integ-spec-header h4 {
  font-size: 15px;
  font-weight: 600;
  color: var(--text-color);
  margin: 0;
}

.integ-spec-systems {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 12px;
  padding: 12px;
  background: var(--bg-color);
  border-radius: var(--radius-sm);
}

.integ-system {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  flex: 1;
  text-align: center;
}

.integ-system i {
  font-size: 24px;
  color: var(--primary-color);
}

.integ-system span {
  font-size: 12px;
  font-weight: 500;
  color: var(--text-color);
}

.integ-system small {
  font-size: 10px;
  color: var(--text-muted);
  text-transform: uppercase;
}

.integ-arrow {
  color: var(--text-muted);
  font-size: 16px;
}

.integ-spec-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-bottom: 12px;
}

.integ-spec-domains {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
  margin-bottom: 8px;
}

.integ-spec-desc {
  font-size: 13px;
  color: var(--text-muted);
  line-height: 1.5;
}

/* Connectors Grid */
.connectors-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
  gap: 16px;
}

.connector-card {
  background: var(--panel-bg);
  border: 1px solid var(--border-color);
  border-radius: var(--radius);
  padding: 16px;
  transition: var(--transition);
}

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

.connector-header {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  margin-bottom: 12px;
}

.connector-header h4 {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 15px;
  font-weight: 600;
  color: var(--text-color);
  margin: 0;
}

.connector-header h4 i {
  color: var(--primary-color);
  font-size: 18px;
}

.connector-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-bottom: 12px;
}

.connector-detail {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 12px;
  color: var(--text-muted);
  padding: 6px 0;
  border-bottom: 1px solid var(--border-light);
}

.connector-detail:last-child {
  border-bottom: none;
}

.connector-detail i {
  width: 16px;
  color: var(--text-light);
}

.connector-detail strong {
  color: var(--text-color);
  font-weight: 500;
}

/* Mappings List */
.mappings-list {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.mapping-item {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 16px;
  background: var(--panel-bg);
  border: 1px solid var(--border-color);
  border-radius: var(--radius);
  transition: var(--transition);
}

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

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

.mapping-name {
  font-size: 14px;
  font-weight: 600;
  color: var(--text-color);
}

.mapping-fields {
  font-size: 12px;
  color: var(--text-muted);
}

.mapping-actions {
  display: flex;
  gap: 8px;
}

/* Runbooks Grid */
.runbooks-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(360px, 1fr));
  gap: 16px;
}

.runbook-card {
  background: var(--panel-bg);
  border: 1px solid var(--border-color);
  border-radius: var(--radius);
  padding: 16px;
  transition: var(--transition);
}

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

.runbook-header {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  margin-bottom: 12px;
}

.runbook-header h4 {
  font-size: 15px;
  font-weight: 600;
  color: var(--text-color);
  margin: 0;
}

.runbook-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-bottom: 12px;
}

.runbook-detail {
  font-size: 13px;
  color: var(--text-muted);
  padding: 8px 0;
  border-bottom: 1px solid var(--border-light);
}

.runbook-detail:last-child {
  border-bottom: none;
}

.runbook-detail strong {
  display: block;
  font-size: 11px;
  font-weight: 600;
  text-transform: uppercase;
  color: var(--text-light);
  margin-bottom: 4px;
}

/* Chip variations for Integration Dev Agent */
.chipItem.success {
  background: rgba(16, 185, 129, 0.1);
  color: var(--success);
  border-color: rgba(16, 185, 129, 0.2);
}

.chipItem.danger {
  background: rgba(239, 68, 68, 0.1);
  color: var(--danger);
  border-color: rgba(239, 68, 68, 0.2);
}

.chipItem.warning {
  background: rgba(245, 158, 11, 0.1);
  color: var(--warning);
  border-color: rgba(245, 158, 11, 0.2);
}

.chipItem.info {
  background: rgba(59, 130, 246, 0.1);
  color: var(--info);
  border-color: rgba(59, 130, 246, 0.2);
}

.chipItem.sm {
  font-size: 10px;
  padding: 2px 8px;
}

/* Settings Row for Integration Dev Agent */
.integ-settings-row {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px 0;
  border-bottom: 1px solid var(--border-light);
}

.integ-settings-row:last-child {
  border-bottom: none;
}

.integ-settings-row label {
  flex: 1;
  font-size: 13px;
  color: var(--text-color);
}

.integ-settings-row select,
.integ-settings-row input[type="number"] {
  width: 200px;
  padding: 8px 12px;
  border: 1px solid var(--border-color);
  border-radius: var(--radius-sm);
  font-size: 13px;
  background: var(--panel-bg);
}

.integ-settings-row input[type="checkbox"] {
  width: 18px;
  height: 18px;
  cursor: pointer;
}

/* Execution Rules */
.execution-rules-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
  gap: 16px;
}

.execution-rules-section {
  background: var(--bg-color);
  border-radius: var(--radius);
  padding: 16px;
}

.execution-rules-section h4 {
  font-size: 13px;
  font-weight: 600;
  color: var(--text-color);
  margin-bottom: 12px;
  display: flex;
  align-items: center;
  gap: 8px;
}

.execution-rules-section h4 i {
  font-size: 14px;
}

.execution-rules-section .chips {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

/* Prompt Pack Preview */
.prompt-pack-preview {
  background: #1e1e2e;
  color: #cdd6f4;
  padding: 16px;
  border-radius: var(--radius);
  font-family: var(--font-mono);
  font-size: 12px;
  line-height: 1.6;
  max-height: 300px;
  overflow-y: auto;
  white-space: pre-wrap;
}

/* ===== Integration Preferences (BRD-style) ===== */
.integ-pref-connector-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(340px, 1fr));
  gap: 16px;
  margin-top: 16px;
}

.integ-pref-connector-card {
  background: var(--bg-color, #f8f9fc);
  border: 1px solid var(--border-color, rgba(0,0,0,0.06));
  border-radius: 10px;
  padding: 20px;
  transition: all 0.2s ease;
  position: relative;
}

.integ-pref-connector-card:hover {
  border-color: var(--primary-color, #2d2b87);
  box-shadow: 0 4px 12px rgba(0,0,0,0.06);
}

.integ-pref-connector-card .connector-top {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 16px;
}

.integ-pref-connector-card .connector-top .connector-label {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 15px;
  font-weight: 600;
  color: var(--text-color);
}

.integ-pref-connector-card .connector-top .connector-label i {
  font-size: 18px;
  color: var(--primary-color, #2d2b87);
}

.integ-pref-connector-card .connector-fields {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 14px;
}

.integ-pref-add-row {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 8px;
}

.integ-pref-add-row select {
  flex: 1;
}

/* Runbook template checklist */
.integ-pref-templates {
  display: flex;
  flex-direction: column;
  gap: 12px;
  margin-bottom: 20px;
}

.integ-pref-template-item {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 14px 16px;
  background: var(--bg-color, #f8f9fc);
  border: 1px solid var(--border-color, rgba(0,0,0,0.06));
  border-radius: 8px;
  cursor: pointer;
  transition: all 0.2s ease;
}

.integ-pref-template-item:hover {
  border-color: var(--primary-color, #2d2b87);
  background: rgba(45, 43, 135, 0.03);
}

.integ-pref-template-item input[type="checkbox"] {
  width: 18px;
  height: 18px;
  accent-color: var(--primary-color, #2d2b87);
  cursor: pointer;
  flex-shrink: 0;
}

.integ-pref-template-item .template-info {
  flex: 1;
}

.integ-pref-template-item .template-name {
  font-size: 14px;
  font-weight: 600;
  color: var(--text-color);
  margin-bottom: 2px;
}

.integ-pref-template-item .template-desc {
  font-size: 12px;
  color: var(--text-muted);
}

.integ-pref-template-item .template-icon {
  width: 40px;
  height: 40px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(45, 43, 135, 0.08);
  color: var(--primary-color, #2d2b87);
  border-radius: 8px;
  font-size: 16px;
  flex-shrink: 0;
}

/* Advanced accordion */
.integ-pref-accordion {
  border: 1px solid var(--border-color, rgba(0,0,0,0.06));
  border-radius: 8px;
  overflow: hidden;
  margin-top: 24px;
}

.integ-pref-accordion-header {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 14px 16px;
  background: var(--bg-color, #f8f9fc);
  cursor: pointer;
  transition: background 0.2s;
  user-select: none;
}

.integ-pref-accordion-header:hover {
  background: rgba(0,0,0,0.04);
}

.integ-pref-accordion-header i.toggle-chevron {
  transition: transform 0.2s ease;
  color: var(--text-muted);
  font-size: 12px;
}

.integ-pref-accordion-header.expanded i.toggle-chevron {
  transform: rotate(90deg);
}

.integ-pref-accordion-header span {
  font-size: 14px;
  font-weight: 600;
  color: var(--text-color);
}

.integ-pref-accordion-body {
  padding: 20px;
  display: none;
  border-top: 1px solid var(--border-color, rgba(0,0,0,0.06));
}

.integ-pref-accordion-body.expanded {
  display: block;
}

/* Style grid for integration style section */
.integ-pref-style-grid {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  gap: 20px;
}

/* Reliability options grid */
.integ-pref-reliability-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 20px;
}

@media (max-width: 768px) {
  .integ-pref-connector-grid {
    grid-template-columns: 1fr;
  }
  .integ-pref-connector-card .connector-fields {
    grid-template-columns: 1fr;
  }
  .integ-pref-style-grid {
    grid-template-columns: 1fr;
  }
  .integ-pref-reliability-grid {
    grid-template-columns: 1fr;
  }
}

/* Integration modal specific styles */
.integ-modal-section {
  margin-bottom: 20px;
  padding-bottom: 20px;
  border-bottom: 1px solid var(--border-light);
}

.integ-modal-section:last-child {
  margin-bottom: 0;
  padding-bottom: 0;
  border-bottom: none;
}

.integ-modal-section h4 {
  font-size: 13px;
  font-weight: 600;
  color: var(--text-muted);
  margin-bottom: 12px;
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

.integ-modal-row {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 16px;
  margin-bottom: 12px;
}

.integ-modal-row.single {
  grid-template-columns: 1fr;
}

/* Runbook steps in modal */
.runbook-steps-input {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.runbook-steps-input textarea {
  min-height: 80px;
  resize: vertical;
}

/* Empty state for integration sections */
.integ-empty-state {
  text-align: center;
  padding: 32px;
  background: var(--bg-color);
  border-radius: var(--radius);
  color: var(--text-muted);
}

.integ-empty-state i {
  font-size: 32px;
  margin-bottom: 12px;
  opacity: 0.5;
}

.integ-empty-state p {
  margin-bottom: 16px;
}

/* ========================================
   Users & Groups View Styles
   ======================================== */

.users-groups-view,
.billing-view,
.system-settings-view {
  padding: 24px;
  height: 100%;
  overflow-y: auto;
}

.view-header {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  margin-bottom: 24px;
}

.view-header-left h1 {
  font-size: 24px;
  font-weight: 600;
  color: var(--text-color);
  margin-bottom: 4px;
}

.view-header-left h1 i {
  color: var(--primary-color);
  margin-right: 10px;
}

.view-subtitle {
  color: var(--text-muted);
  font-size: 14px;
}

.view-header-actions {
  display: flex;
  gap: 10px;
}

/* View Tabs */
.view-tabs {
  display: flex;
  gap: 4px;
  border-bottom: 1px solid var(--border-color);
  margin-bottom: 20px;
}

.view-tab {
  padding: 12px 16px;
  background: none;
  border: none;
  font-size: 14px;
  font-weight: 500;
  color: var(--text-muted);
  cursor: pointer;
  border-bottom: 2px solid transparent;
  margin-bottom: -1px;
  transition: var(--transition);
  display: flex;
  align-items: center;
  gap: 8px;
}

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

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

.tab-count {
  background: var(--bg-color);
  padding: 2px 8px;
  border-radius: 10px;
  font-size: 12px;
  font-weight: 600;
}

.view-tab.active .tab-count {
  background: rgba(99, 102, 241, 0.1);
  color: var(--primary-color);
}

.tab-panel {
  display: none;
}

.tab-panel.active {
  display: block;
}

/* Panel Toolbar */
.panel-toolbar {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 16px;
  gap: 16px;
}

.search-box {
  position: relative;
  flex: 1;
  max-width: 320px;
}

.search-box i {
  position: absolute;
  left: 12px;
  top: 50%;
  transform: translateY(-50%);
  color: var(--text-muted);
  font-size: 14px;
}

.search-box .form-input {
  padding-left: 36px;
}

.filter-group {
  display: flex;
  gap: 10px;
}

/* Data Tables */
.data-table {
  width: 100%;
  border-collapse: collapse;
  background: var(--panel-bg);
  border-radius: var(--radius);
  overflow: hidden;
  box-shadow: var(--shadow-sm);
}

.data-table th,
.data-table td {
  padding: 12px 16px;
  text-align: left;
  border-bottom: 1px solid var(--border-color);
}

.data-table th {
  background: var(--bg-color);
  font-weight: 600;
  font-size: 12px;
  text-transform: uppercase;
  color: var(--text-muted);
  letter-spacing: 0.5px;
}

.data-table tbody tr:hover {
  background: var(--bg-color);
}

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

/* User Cell */
.user-cell {
  display: flex;
  align-items: center;
  gap: 12px;
}

.user-avatar {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  background: linear-gradient(135deg, var(--primary-color), #6366f1);
  color: white;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 13px;
  font-weight: 600;
}

.user-info {
  display: flex;
  flex-direction: column;
}

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

.user-email {
  font-size: 12px;
  color: var(--text-muted);
}

/* Badges */
.role-badge {
  display: inline-block;
  padding: 4px 10px;
  border-radius: 12px;
  font-size: 12px;
  font-weight: 500;
}

.role-badge.role-admin {
  background: rgba(239, 68, 68, 0.1);
  color: #dc2626;
}

.role-badge.role-developer {
  background: rgba(99, 102, 241, 0.1);
  color: #4f46e5;
}

.role-badge.role-viewer {
  background: rgba(107, 114, 128, 0.1);
  color: #4b5563;
}

.role-badge.role-owner {
  background: rgba(245, 158, 11, 0.1);
  color: #d97706;
}

.role-badge.role-member {
  background: rgba(99, 102, 241, 0.1);
  color: #4f46e5;
}

.role-badge.role-billing {
  background: rgba(16, 185, 129, 0.1);
  color: #059669;
}

.status-badge {
  display: inline-block;
  padding: 4px 10px;
  border-radius: 12px;
  font-size: 12px;
  font-weight: 500;
  text-transform: capitalize;
}

.status-badge.status-active,
.status-badge.status-paid {
  background: rgba(16, 185, 129, 0.1);
  color: #059669;
}

.status-badge.status-inactive,
.status-badge.status-expired {
  background: rgba(107, 114, 128, 0.1);
  color: #6b7280;
}

.status-badge.status-pending {
  background: rgba(245, 158, 11, 0.1);
  color: #d97706;
}

/* Row Actions */
.row-actions {
  display: flex;
  gap: 4px;
}

.btn-icon {
  width: 32px;
  height: 32px;
  border-radius: var(--radius-sm);
  border: none;
  background: transparent;
  color: var(--text-muted);
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: var(--transition);
}

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

.btn-icon.btn-danger:hover {
  background: rgba(239, 68, 68, 0.1);
  color: #dc2626;
}

/* Groups Grid */
.groups-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap: 16px;
}

.group-card {
  background: var(--panel-bg);
  border: 1px solid var(--border-color);
  border-radius: var(--radius);
  padding: 20px;
  transition: var(--transition);
}

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

.group-card-header {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  margin-bottom: 12px;
}

.group-icon {
  width: 40px;
  height: 40px;
  border-radius: var(--radius);
  background: linear-gradient(135deg, var(--primary-color), #6366f1);
  color: white;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 16px;
}

.group-actions {
  display: flex;
  gap: 4px;
  opacity: 0;
  transition: var(--transition);
}

.group-card:hover .group-actions {
  opacity: 1;
}

.group-name {
  font-size: 16px;
  font-weight: 600;
  color: var(--text-color);
  margin-bottom: 4px;
}

.group-description {
  font-size: 13px;
  color: var(--text-muted);
  margin-bottom: 12px;
}

.group-meta {
  display: flex;
  gap: 16px;
  font-size: 12px;
  color: var(--text-muted);
}

.group-meta i {
  margin-right: 4px;
}

.group-card-add {
  border: 2px dashed var(--border-color);
  background: transparent;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  color: var(--text-muted);
  cursor: pointer;
  min-height: 160px;
}

.group-card-add:hover {
  border-color: var(--primary-color);
  color: var(--primary-color);
}

.group-card-add i {
  font-size: 24px;
  margin-bottom: 8px;
}

/* Invitations List */
.invitations-list {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.invitation-row {
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 16px;
  background: var(--panel-bg);
  border: 1px solid var(--border-color);
  border-radius: var(--radius);
}

.invitation-info {
  flex: 1;
  display: flex;
  flex-direction: column;
}

.invitation-email {
  font-weight: 500;
  color: var(--text-color);
}

.invitation-meta {
  font-size: 12px;
  color: var(--text-muted);
}

.invitation-role,
.invitation-status {
  min-width: 100px;
}

.invitation-actions {
  display: flex;
  gap: 8px;
}

/* Permissions Panel */
.permissions-overview {
  background: var(--panel-bg);
  border: 1px solid var(--border-color);
  border-radius: var(--radius);
  padding: 24px;
}

.permissions-intro {
  margin-bottom: 20px;
}

.permissions-intro h3 {
  font-size: 16px;
  font-weight: 600;
  margin-bottom: 4px;
}

.permissions-intro p {
  font-size: 13px;
  color: var(--text-muted);
}

.permissions-categories {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
  gap: 20px;
}

.permission-category h4 {
  font-size: 13px;
  font-weight: 600;
  color: var(--text-muted);
  text-transform: uppercase;
  margin-bottom: 8px;
}

.permission-list {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.permission-item {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px 12px;
  background: var(--bg-color);
  border-radius: var(--radius-sm);
}

.permission-item code {
  font-family: var(--font-mono);
  font-size: 12px;
  color: var(--primary-color);
  background: rgba(99, 102, 241, 0.1);
  padding: 2px 6px;
  border-radius: 4px;
}

.permission-item span {
  font-size: 13px;
  color: var(--text-color);
}

/* ========================================
   Billing View Styles
   ======================================== */

.billing-content {
  display: flex;
  flex-direction: column;
  gap: 24px;
}

.billing-section {
  background: var(--panel-bg);
  border: 1px solid var(--border-color);
  border-radius: var(--radius);
  padding: 20px;
}

.billing-section .section-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 16px;
}

.billing-section .section-header h3 {
  font-size: 16px;
  font-weight: 600;
  color: var(--text-color);
}

.billing-section .section-header h3 i {
  color: var(--primary-color);
  margin-right: 8px;
}

/* Current Plan Card */
.current-plan-card {
  background: linear-gradient(135deg, #f8fafc 0%, #f1f5f9 100%);
  border-radius: var(--radius);
  padding: 24px;
}

.plan-card-header {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  margin-bottom: 24px;
}

.plan-info .plan-badge {
  display: inline-block;
  background: var(--primary-color);
  color: white;
  padding: 4px 12px;
  border-radius: 12px;
  font-size: 12px;
  font-weight: 600;
  margin-bottom: 8px;
}

.plan-info h2 {
  font-size: 36px;
  font-weight: 700;
  color: var(--text-color);
}

.plan-info .plan-cycle {
  font-size: 16px;
  font-weight: 400;
  color: var(--text-muted);
}

.plan-status {
  text-align: right;
}

.plan-status .next-billing {
  display: block;
  font-size: 13px;
  color: var(--text-muted);
  margin-top: 8px;
}

.plan-usage h4 {
  font-size: 14px;
  font-weight: 600;
  color: var(--text-muted);
  margin-bottom: 12px;
}

.usage-bars {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.usage-bar-item {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.usage-bar-header {
  display: flex;
  justify-content: space-between;
  font-size: 13px;
}

.usage-label {
  color: var(--text-color);
  font-weight: 500;
}

.usage-value {
  color: var(--text-muted);
}

.usage-bar-track {
  height: 6px;
  background: var(--border-color);
  border-radius: 3px;
  overflow: hidden;
}

.usage-bar-fill {
  height: 100%;
  background: var(--primary-color);
  border-radius: 3px;
  transition: width 0.5s ease;
}

.usage-bar-fill.warning {
  background: var(--warning);
}

.usage-bar-fill.danger {
  background: var(--danger);
}

.plan-actions {
  display: flex;
  gap: 12px;
  margin-top: 24px;
}

.btn-outline {
  background: transparent;
  border: 1px solid currentColor;
}

/* Payment Methods */
.payment-methods-list {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.payment-method-card {
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 16px;
  background: var(--bg-color);
  border: 1px solid var(--border-color);
  border-radius: var(--radius);
  transition: var(--transition);
}

.payment-method-card.default {
  border-color: var(--primary-color);
  background: rgba(99, 102, 241, 0.03);
}

.payment-method-icon {
  font-size: 28px;
  color: var(--text-color);
}

.payment-method-info {
  flex: 1;
  display: flex;
  flex-direction: column;
}

.payment-method-name {
  font-weight: 500;
  color: var(--text-color);
}

.payment-method-expiry {
  font-size: 12px;
  color: var(--text-muted);
}

.default-badge {
  background: var(--primary-color);
  color: white;
  padding: 4px 10px;
  border-radius: 12px;
  font-size: 11px;
  font-weight: 600;
}

.payment-method-actions {
  display: flex;
  gap: 4px;
}

/* Invoices Table */
.invoice-id {
  font-family: var(--font-mono);
  font-size: 13px;
  color: var(--primary-color);
}

.invoice-amount {
  font-weight: 600;
}

/* Cost Breakdown */
.cost-breakdown-grid {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.cost-item {
  padding: 12px;
  background: var(--bg-color);
  border-radius: var(--radius-sm);
}

.cost-item-header {
  display: flex;
  justify-content: space-between;
  margin-bottom: 8px;
}

.cost-label {
  font-weight: 500;
  color: var(--text-color);
}

.cost-value {
  font-weight: 600;
  color: var(--text-color);
}

.cost-bar {
  height: 4px;
  background: var(--border-color);
  border-radius: 2px;
  overflow: hidden;
}

.cost-bar::after {
  content: '';
  display: block;
  height: 100%;
  width: var(--percentage);
  background: var(--primary-color);
  border-radius: 2px;
}

.cost-detail {
  font-size: 12px;
  color: var(--text-muted);
  margin-top: 4px;
  display: block;
}

.cost-total {
  display: flex;
  justify-content: space-between;
  padding: 16px;
  background: var(--panel-bg);
  border: 2px solid var(--border-color);
  border-radius: var(--radius);
  font-weight: 600;
}

.total-value {
  font-size: 18px;
  color: var(--primary-color);
}

/* Plans Modal */
.plans-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 20px;
}

.plan-option {
  padding: 24px;
  background: var(--panel-bg);
  border: 2px solid var(--border-color);
  border-radius: var(--radius);
  text-align: center;
  position: relative;
  transition: var(--transition);
}

.plan-option:hover {
  border-color: var(--primary-color);
}

.plan-option.recommended {
  border-color: var(--primary-color);
  box-shadow: var(--shadow-md);
}

.plan-option.current {
  background: rgba(99, 102, 241, 0.03);
}

.recommended-badge,
.current-badge {
  position: absolute;
  top: -10px;
  left: 50%;
  transform: translateX(-50%);
  padding: 4px 12px;
  border-radius: 12px;
  font-size: 11px;
  font-weight: 600;
  white-space: nowrap;
}

.recommended-badge {
  background: var(--primary-color);
  color: white;
}

.current-badge {
  background: var(--bg-color);
  color: var(--text-muted);
  border: 1px solid var(--border-color);
}

.plan-option .plan-name {
  font-size: 18px;
  font-weight: 600;
  margin-bottom: 8px;
  margin-top: 8px;
}

.plan-option .plan-price {
  margin-bottom: 12px;
}

.price-amount {
  font-size: 32px;
  font-weight: 700;
  color: var(--text-color);
}

.price-cycle {
  font-size: 14px;
  color: var(--text-muted);
}

.plan-option .plan-description {
  font-size: 13px;
  color: var(--text-muted);
  margin-bottom: 16px;
}

.plan-option .plan-features {
  list-style: none;
  text-align: left;
  margin-bottom: 20px;
}

.plan-option .plan-features li {
  padding: 6px 0;
  font-size: 13px;
  color: var(--text-color);
}

.plan-option .plan-features li i {
  color: var(--success);
  margin-right: 8px;
}

.btn-block {
  width: 100%;
}

/* ========================================
   System Settings View Styles
   ======================================== */

/* Settings Fullwidth Layout */
.settings-fullwidth {
  display: flex;
  width: 100%;
  height: 100%;
  padding: 0 !important;
  overflow: hidden;
}

.settings-fullwidth .settings-sidebar {
  width: 260px;
  flex-shrink: 0;
  background: var(--panel-bg);
  border-right: 1px solid var(--border-color);
  display: flex;
  flex-direction: column;
  height: 100%;
  position: fixed;
  left: var(--sidebar-collapsed);
  top: var(--header-height);
  bottom: 0;
  z-index: 10;
}

.sidebar-expanded .settings-fullwidth .settings-sidebar {
  left: var(--sidebar-width);
}


.settings-fullwidth .settings-nav {
  flex: 1;
  padding: 12px;
  display: flex;
  flex-direction: column;
  gap: 4px;
  overflow-y: auto;
  background: transparent;
  border: none;
  border-radius: 0;
  position: static;
}

.settings-fullwidth .settings-content {
  flex: 1;
  overflow-y: auto;
  background: var(--bg-color);
  padding: 0;
  margin-left: 260px;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
}

.settings-fullwidth .settings-panel {
  display: none;
  padding: 24px 32px;
  background: transparent;
  border: none;
  border-radius: 0;
  width: 100%;
}

.settings-fullwidth .settings-panel.active {
  display: block;
}

.settings-fullwidth .panel-header {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  margin-bottom: 32px;
  padding-bottom: 16px;
  padding-top: 16px;
  border-bottom: 1px solid var(--border-color);
  position: sticky;
  top: 0;
  z-index: 10;
  background: var(--bg-color, #fff);
}

.settings-fullwidth .panel-header-text {
  flex: 1;
}

.settings-fullwidth .panel-header h3 {
  font-size: 20px;
  font-weight: 600;
  color: var(--text-color);
  margin-bottom: 4px;
}

.settings-fullwidth .panel-header p {
  font-size: 14px;
  color: var(--text-muted);
}

.settings-fullwidth .save-section-btn {
  flex-shrink: 0;
  margin-left: 16px;
}

/* Source Control Settings */
.sc-provider-cards {
  display: flex;
  gap: 16px;
  margin-top: 8px;
}

.sc-provider-card {
  flex: 1;
  display: flex;
  align-items: flex-start;
  gap: 14px;
  padding: 20px;
  border: 2px solid var(--border-color);
  border-radius: 12px;
  cursor: pointer;
  transition: border-color 0.2s, box-shadow 0.2s;
  position: relative;
}

.sc-provider-card:hover {
  border-color: var(--primary-color);
}

.sc-provider-card.selected {
  border-color: var(--primary-color);
  box-shadow: 0 0 0 3px rgba(99, 102, 241, 0.12);
}

.sc-provider-card .sc-provider-check {
  position: absolute;
  top: 12px;
  right: 12px;
  color: var(--border-color);
  font-size: 18px;
  transition: color 0.2s;
}

.sc-provider-card.selected .sc-provider-check {
  color: var(--primary-color);
}

.sc-provider-icon {
  font-size: 28px;
  width: 44px;
  height: 44px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 10px;
  flex-shrink: 0;
}

.sc-provider-card[data-provider="gitlab"] .sc-provider-icon {
  background: #fef3ec;
  color: #e24329;
}

.sc-provider-card[data-provider="github"] .sc-provider-icon {
  background: #f3f4f6;
  color: #24292f;
}

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

.sc-provider-name {
  font-size: 15px;
  font-weight: 600;
  color: var(--text-color);
}

.sc-provider-desc {
  font-size: 13px;
  color: var(--text-muted);
  line-height: 1.4;
}

.settings-section-desc {
  font-size: 13px;
  color: var(--text-muted);
  margin-top: -4px;
  margin-bottom: 16px;
}

/* GitHub connection */
.sc-github-connect {
  display: flex;
  flex-direction: column;
  gap: 14px;
}

.sc-github-connect-desc {
  font-size: 13px;
  color: var(--text-muted);
  margin: 0;
  line-height: 1.5;
}

.btn-dark {
  background: #24292f;
  color: #fff;
  border: none;
  padding: 10px 20px;
  border-radius: 8px;
  font-size: 14px;
  font-weight: 500;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  transition: background 0.2s;
  width: fit-content;
}

.btn-dark:hover {
  background: #1b1f23;
}

.sc-github-connected {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 14px 16px;
  background: #f0fdf4;
  border: 1px solid #bbf7d0;
  border-radius: 10px;
}

.sc-github-user {
  display: flex;
  align-items: center;
  gap: 12px;
}

.sc-github-avatar {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  object-fit: cover;
}

.sc-github-avatar-icon {
  font-size: 32px;
  color: #24292f;
}

.sc-github-username {
  display: block;
  font-weight: 600;
  font-size: 14px;
  color: var(--text-color);
}

.sc-github-details {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.sc-github-handle {
  display: block;
  font-size: 12px;
  color: var(--text-secondary, #6b7280);
}

.sc-github-status-text {
  display: block;
  font-size: 12px;
  color: #16a34a;
  margin-top: 2px;
}

.sc-github-status-text i {
  margin-right: 4px;
}

.sc-github-actions {
  display: flex;
  gap: 8px;
  align-items: center;
  flex-shrink: 0;
}

@media (max-width: 768px) {
  .sc-provider-cards {
    flex-direction: column;
  }
  .sc-github-connected {
    flex-direction: column;
    gap: 12px;
    align-items: flex-start;
  }
  .sc-github-actions {
    width: 100%;
  }
  .sc-github-actions .btn {
    flex: 1;
  }
}

/* Logo Upload Styles */
.logo-upload-container {
  display: flex;
  align-items: flex-start;
  gap: 20px;
}

.logo-preview {
  width: 100px;
  height: 100px;
  border: 2px dashed var(--border-color);
  border-radius: 8px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--bg-color);
  flex-shrink: 0;
  overflow: hidden;
}

.logo-preview i {
  font-size: 36px;
  color: var(--text-light);
}

.logo-preview.has-logo {
  border-style: solid;
  border-color: var(--primary-color);
}

.logo-preview img {
  width: 100%;
  height: 100%;
  object-fit: contain;
}

.logo-upload-controls {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.logo-upload-controls .btn {
  width: fit-content;
}

.logo-upload-controls .form-hint {
  margin-top: 4px;
}

.hidden-file-input {
  display: none;
}

.settings-fullwidth .settings-section {
  margin-bottom: 32px;
  padding: 24px;
  background: var(--panel-bg);
  border: 1px solid var(--border-color);
  border-radius: var(--radius-lg);
}

.settings-fullwidth .settings-section h4 {
  font-size: 16px;
  font-weight: 600;
  color: var(--text-color);
  margin-bottom: 16px;
}

/* Legacy settings layout (non-fullwidth) */
.settings-layout {
  display: flex;
  gap: 24px;
  min-height: calc(100vh - 200px);
}

.settings-sidebar {
  width: 220px;
  flex-shrink: 0;
}

.settings-nav {
  display: flex;
  flex-direction: column;
  gap: 4px;
  background: var(--panel-bg);
  border: 1px solid var(--border-color);
  border-radius: var(--radius);
  padding: 8px;
  position: sticky;
  top: 80px;
}

.settings-nav-item {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px 16px;
  border: none;
  background: transparent;
  border-radius: var(--radius-sm);
  font-size: 14px;
  font-weight: 500;
  color: var(--text-muted);
  cursor: pointer;
  transition: var(--transition);
  text-align: left;
  width: 100%;
}

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

.settings-nav-item.active {
  background: rgba(99, 102, 241, 0.1);
  color: var(--primary-color);
}

.settings-nav-item i {
  width: 20px;
  text-align: center;
}

/* Settings Nav Section Headers */
.settings-nav-section {
  margin-bottom: 8px;
}

.settings-nav-section:first-child {
  margin-top: 0;
}

.settings-nav-section-header {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 12px 16px 8px;
  font-size: 11px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  color: var(--text-muted);
}

.settings-nav-section-header i {
  font-size: 12px;
  opacity: 0.7;
}

.settings-nav-section .settings-nav-item {
  padding-left: 24px;
}

.settings-nav-item .nav-badge {
  margin-left: auto;
  font-size: 11px;
  padding: 2px 8px;
  background: rgba(99, 102, 241, 0.1);
  color: var(--primary-color);
  border-radius: 10px;
  font-weight: 500;
}

/* Reduce top padding for users/groups/invitations panels */
#usersPanel.settings-panel,
#groupsPanel.settings-panel,
#invitationsPanel.settings-panel {
  padding-top: 16px;
}

#usersPanel .panel-header,
#groupsPanel .panel-header,
#invitationsPanel .panel-header {
  margin-bottom: 16px;
  padding-bottom: 12px;
  position: sticky;
  top: 0;
  z-index: 10;
  background: var(--bg-color, #fff);
}

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

/* Settings Save Footer */
.settings-save-footer {
  position: sticky;
  bottom: 0;
  background: #f8f9fa;
  border-top: 1px solid #e2e8f0;
  padding: 16px 32px;
  display: flex;
  justify-content: flex-end;
  z-index: 10;
}

.settings-save-footer-btn {
  padding: 10px 28px;
  border-radius: 8px;
  font-weight: 600;
  font-size: 14px;
  border: 1px solid #d1d5db;
  background: #e5e7eb;
  color: #9ca3af;
  cursor: not-allowed;
  transition: all 0.25s ease;
}

.settings-save-footer-btn.active {
  background: #6366f1;
  border-color: #6366f1;
  color: #fff;
  cursor: pointer;
  box-shadow: 0 2px 8px rgba(99, 102, 241, 0.3);
}

.settings-save-footer-btn.active:hover {
  background: #4f46e5;
  border-color: #4f46e5;
}

.settings-panel {
  background: var(--panel-bg);
  border: 1px solid var(--border-color);
  border-radius: var(--radius);
  padding: 24px;
}

.settings-section {
  margin-bottom: 32px;
}

.settings-section:last-child {
  margin-bottom: 0;
}

.settings-section h3 {
  font-size: 16px;
  font-weight: 600;
  color: var(--text-color);
  margin-bottom: 4px;
}

.settings-description {
  font-size: 13px;
  color: var(--text-muted);
  margin-bottom: 16px;
}

.settings-form {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

/* Form Elements */
.form-group {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.form-group label {
  font-size: 13px;
  font-weight: 500;
  color: var(--text-color);
}

.form-input,
.form-select,
.form-textarea {
  padding: 10px 12px;
  border: 1px solid var(--border-color);
  border-radius: var(--radius-sm);
  font-size: 14px;
  color: var(--text-color);
  background: var(--panel-bg);
  transition: var(--transition);
}

.form-input:focus,
.form-select:focus,
.form-textarea:focus {
  outline: none;
  border-color: var(--primary-color);
  box-shadow: 0 0 0 3px rgba(99, 102, 241, 0.1);
}

.form-select {
  cursor: pointer;
}

.form-hint {
  font-size: 12px;
  color: var(--text-muted);
}

.form-row {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 16px;
}

/* Toggle Switch */
.toggle-label {
  display: flex;
  align-items: center;
  gap: 12px;
  cursor: pointer;
  font-weight: 500;
}

.toggle-input {
  display: none;
}

.toggle-switch {
  width: 44px;
  height: 24px;
  background: var(--border-color);
  border-radius: 12px;
  position: relative;
  transition: var(--transition);
  flex-shrink: 0;
}

.toggle-switch::after {
  content: '';
  position: absolute;
  top: 2px;
  left: 2px;
  width: 20px;
  height: 20px;
  background: white;
  border-radius: 50%;
  transition: var(--transition);
  box-shadow: var(--shadow-sm);
}

.toggle-input:checked + .toggle-switch {
  background: var(--primary-color);
}

.toggle-input:checked + .toggle-switch::after {
  left: 22px;
}

/* Checkbox Group */
.checkbox-group {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.checkbox-label {
  display: flex;
  align-items: center;
  gap: 8px;
  cursor: pointer;
  font-size: 14px;
}

.checkbox-label input[type="checkbox"] {
  width: 16px;
  height: 16px;
  accent-color: var(--primary-color);
}

/* Input with Action */
.input-with-action {
  display: flex;
  gap: 8px;
}

.input-with-action .form-input {
  flex: 1;
}

/* API Keys List */
.api-keys-list {
  display: flex;
  flex-direction: column;
  gap: 12px;
  margin-bottom: 16px;
}

.api-key-item {
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 16px;
  background: var(--bg-color);
  border-radius: var(--radius);
}

.api-key-info {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.api-key-name {
  font-weight: 500;
  color: var(--text-color);
}

.api-key-value {
  font-family: var(--font-mono);
  font-size: 12px;
  color: var(--text-muted);
  background: var(--panel-bg);
  padding: 4px 8px;
  border-radius: 4px;
}

.api-key-meta {
  display: flex;
  flex-direction: column;
  gap: 2px;
  font-size: 12px;
  color: var(--text-muted);
  text-align: right;
}

.api-key-actions {
  display: flex;
  gap: 4px;
}

/* Notification Options */
.notification-options {
  padding-left: 56px;
  display: flex;
  flex-direction: column;
  gap: 8px;
}

/* Permissions Selector */
.permissions-selector {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 20px;
  padding: 16px;
  background: var(--bg-color);
  border-radius: var(--radius);
}

.permission-category-select h5 {
  font-size: 13px;
  font-weight: 600;
  color: var(--text-muted);
  margin-bottom: 8px;
}

/* Modal Styles for new views */
.modal-overlay {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.5);
  display: none;
  align-items: center;
  justify-content: center;
  z-index: 1000;
  padding: 20px;
}

.modal-overlay.active {
  display: flex;
}

.modal {
  background: var(--panel-bg);
  border-radius: var(--radius-lg);
  width: 100%;
  max-width: 480px;
  max-height: 90vh;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  box-shadow: var(--shadow-lg);
}

.modal.modal-large {
  max-width: 600px;
}

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

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

.modal-header h3 {
  font-size: 18px;
  font-weight: 600;
}

.modal-close {
  width: 32px;
  height: 32px;
  border: none;
  background: transparent;
  color: var(--text-muted);
  cursor: pointer;
  border-radius: var(--radius-sm);
  display: flex;
  align-items: center;
  justify-content: center;
  transition: var(--transition);
}

.modal-close:hover {
  background: var(--bg-color);
  color: var(--text-color);
}

.modal-body {
  padding: 24px;
  overflow-y: auto;
  flex: 1;
}

.modal-footer {
  display: flex;
  justify-content: flex-end;
  gap: 12px;
  padding: 16px 24px;
  border-top: 1px solid var(--border-color);
  background: var(--bg-color);
}

/* AI Models Page Styles */
.ai-info-banner {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  padding: 12px 16px;
  background: rgba(99, 102, 241, 0.08);
  border: 1px solid rgba(99, 102, 241, 0.2);
  border-radius: var(--radius);
  margin-bottom: 20px;
}

.ai-info-banner i {
  color: var(--primary-color);
  font-size: 16px;
  margin-top: 2px;
  flex-shrink: 0;
}

.ai-info-banner span {
  font-size: 13px;
  color: var(--text-color);
  line-height: 1.5;
}

.ai-provider-cards {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.ai-provider-card {
  padding: 20px;
  background: #fff;
  border: 1px solid var(--border-color);
  border-radius: var(--radius);
  transition: border-color 0.2s;
}

.ai-provider-card.enabled {
  border-color: #fff;
  box-shadow: 0 0 0 1px rgba(99, 102, 241, 0.15);
}

.ai-provider-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.ai-provider-info {
  display: flex;
  align-items: center;
  gap: 12px;
}

.ai-provider-icon {
  width: 40px;
  height: 40px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 10px;
  flex-shrink: 0;
  overflow: hidden;
}

.ai-provider-icon img {
  width: 28px;
  height: 28px;
  object-fit: contain;
}

.ai-provider-name {
  display: block;
  font-size: 15px;
  font-weight: 600;
  color: var(--text-color);
}

.ai-provider-model-count {
  display: block;
  font-size: 12px;
  color: var(--text-muted);
  margin-top: 2px;
}

.ai-provider-body {
  margin-top: 16px;
  padding-top: 16px;
  border-top: 1px solid var(--border-color);
}

.ai-provider-body.hidden {
  display: none;
}

.ai-section {
  margin-bottom: 20px;
}

.ai-section:last-child {
  margin-bottom: 0;
}

.form-label-sm {
  display: block;
  font-size: 11px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  color: var(--text-muted);
  margin-bottom: 8px;
}

/* Auth Tabs (segmented control) */
.ai-auth-tabs {
  display: inline-flex;
  background: var(--panel-bg);
  border-radius: 8px;
  padding: 3px;
  margin-bottom: 12px;
  border: 1px solid var(--border-color);
}

.ai-auth-tab {
  padding: 6px 16px;
  font-size: 13px;
  font-weight: 500;
  border: none;
  background: transparent;
  color: var(--text-muted);
  border-radius: 6px;
  cursor: pointer;
  transition: all 0.2s;
}

.ai-auth-tab.active {
  background: var(--bg-color);
  color: var(--text-color);
  box-shadow: 0 1px 3px rgba(0,0,0,0.1);
}

.ai-auth-tab:hover:not(.active) {
  color: var(--text-color);
}

.ai-auth-panel.hidden {
  display: none;
}

/* OAuth panel */
.ai-auth-oauth {
  display: flex;
  align-items: center;
  gap: 12px;
  flex-wrap: wrap;
}

.ai-oauth-btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 8px 18px;
  font-size: 13px;
  font-weight: 500;
  border: 1px solid var(--border-color);
  background: var(--bg-color);
  color: var(--text-color);
  border-radius: var(--radius);
  cursor: pointer;
  transition: background 0.2s, border-color 0.2s;
}

.ai-oauth-btn:hover {
  background: var(--panel-bg);
  border-color: var(--primary-color);
}

.ai-oauth-btn-icon {
  width: 18px;
  height: 18px;
  object-fit: contain;
}

.ai-oauth-status {
  font-size: 13px;
  color: var(--text-muted);
}

.ai-oauth-status .fa-check-circle {
  color: var(--success-color, #22c55e);
}

/* API Key row */
.ai-apikey-row {
  display: flex;
  gap: 8px;
}

.ai-apikey-row .form-input {
  flex: 1;
  font-family: monospace;
  font-size: 13px;
}

/* Model Dropdown */
.ai-model-dropdown {
  position: relative;
}

.ai-model-dropdown-trigger {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  padding: 8px 12px;
  font-size: 13px;
  border: 1px solid var(--border-color);
  background: var(--bg-color);
  color: var(--text-color);
  border-radius: var(--radius);
  cursor: pointer;
  text-align: left;
  transition: border-color 0.2s;
}

.ai-model-dropdown-trigger:hover {
  border-color: var(--primary-color);
}

.ai-model-dropdown-trigger i {
  font-size: 11px;
  color: var(--text-muted);
  flex-shrink: 0;
  margin-left: 8px;
  transition: transform 0.2s;
}

.ai-model-dropdown-text {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  color: var(--text-muted);
}

.ai-model-dropdown-trigger:has(+ .ai-model-dropdown-menu:not(.hidden)) i {
  transform: rotate(180deg);
}

.ai-model-dropdown-menu {
  position: absolute;
  top: calc(100% + 4px);
  left: 0;
  right: 0;
  background: var(--bg-color);
  border: 1px solid var(--border-color);
  border-radius: var(--radius);
  box-shadow: 0 4px 12px rgba(0,0,0,0.1);
  z-index: 20;
  padding: 6px 0;
  max-height: 200px;
  overflow-y: auto;
}

.ai-model-dropdown-menu.hidden {
  display: none;
}

.ai-model-option {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px 14px;
  font-size: 13px;
  color: var(--text-color);
  cursor: pointer;
  transition: background 0.15s;
}

.ai-model-option:hover {
  background: var(--panel-bg);
}

.ai-model-option input[type="checkbox"] {
  accent-color: var(--primary-color);
  width: 15px;
  height: 15px;
  flex-shrink: 0;
}

/* Limit Slider */
.ai-limit-row {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 8px;
}

.ai-limit-slider {
  flex: 1;
  -webkit-appearance: none;
  appearance: none;
  height: 6px;
  border-radius: 3px;
  outline: none;
  background: linear-gradient(to right,
    var(--primary-color) 0%, var(--primary-color) var(--slider-percent, 0%),
    var(--border-color) var(--slider-percent, 0%), var(--border-color) 100%);
  cursor: pointer;
}

.ai-limit-slider::-webkit-slider-thumb {
  -webkit-appearance: none;
  appearance: none;
  width: 18px;
  height: 18px;
  border-radius: 50%;
  background: var(--primary-color);
  border: 2px solid #fff;
  box-shadow: 0 1px 4px rgba(0,0,0,0.2);
  cursor: pointer;
}

.ai-limit-slider::-moz-range-thumb {
  width: 18px;
  height: 18px;
  border-radius: 50%;
  background: var(--primary-color);
  border: 2px solid #fff;
  box-shadow: 0 1px 4px rgba(0,0,0,0.2);
  cursor: pointer;
}

.ai-limit-percent {
  font-size: 13px;
  font-weight: 600;
  color: var(--primary-color);
  min-width: 36px;
  text-align: right;
}

.ai-limit-input-row {
  display: flex;
  align-items: center;
  gap: 8px;
}

.ai-limit-input-row .form-input {
  width: 140px;
  font-family: monospace;
  font-size: 13px;
  text-align: right;
}

.ai-limit-max {
  font-size: 13px;
  color: var(--text-muted);
}

/* LLM Anthropic Card Styles */
.llm-key-actions {
  display: flex;
  gap: 8px;
  margin-top: 10px;
  flex-wrap: wrap;
}

.llm-status-row {
  margin-top: 10px;
}

.llm-status {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 13px;
  font-weight: 500;
}

.llm-status-connected { color: var(--success-color, #22c55e); }
.llm-status-pending { color: var(--warning-color, #f59e0b); }
.llm-status-error { color: var(--danger-color, #ef4444); }
.llm-status-disconnected { color: var(--text-muted); }

.llm-model-info {
  display: block;
  font-size: 12px;
  color: var(--text-muted);
  margin-top: 6px;
}

.llm-model-info i {
  color: var(--primary-color);
  margin-right: 2px;
}

.llm-temp-row {
  display: flex;
  align-items: center;
  gap: 12px;
}

.llm-temp-row .ai-limit-slider {
  flex: 1;
}

.llm-temp-value {
  font-size: 14px;
  font-weight: 600;
  color: var(--text-color);
  min-width: 30px;
  text-align: right;
}

.llm-advanced .form-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
}

.llm-advanced .form-group label {
  font-size: 13px;
  font-weight: 500;
  margin-bottom: 6px;
  display: block;
  color: var(--text-color);
}

.llm-help {
  border-top: 1px solid var(--border-color);
  padding-top: 16px;
}

.llm-help details {
  font-size: 13px;
  color: var(--text-muted);
}

.llm-help summary {
  cursor: pointer;
  font-weight: 500;
  color: var(--text-color);
  display: flex;
  align-items: center;
  gap: 6px;
}

.llm-help summary i {
  color: var(--primary-color);
}

.llm-help ol {
  margin: 10px 0 8px 20px;
  padding: 0;
  line-height: 1.8;
}

.llm-help a {
  color: var(--primary-color);
  text-decoration: none;
}

.llm-help a:hover {
  text-decoration: underline;
}

.llm-help code {
  background: var(--panel-bg);
  padding: 1px 5px;
  border-radius: 3px;
  font-size: 12px;
}

/* LLM OAuth Auth Method Selector */
.llm-auth-methods {
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin-top: 8px;
}

.llm-auth-method-option {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  padding: 12px 14px;
  border: 1px solid var(--border-color);
  border-radius: 8px;
  cursor: pointer;
  transition: border-color 0.2s, background 0.2s;
  background: var(--panel-bg, #f8f9fa);
}

.llm-auth-method-option:hover {
  border-color: var(--primary-color);
  background: #f0f4ff;
}

.llm-auth-method-option.selected {
  border-color: var(--primary-color);
  background: #f0f4ff;
}

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

.llm-auth-method-content {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.llm-auth-method-label {
  font-size: 14px;
  font-weight: 500;
  color: var(--text-color);
  display: flex;
  align-items: center;
  gap: 6px;
}

.llm-auth-method-label i {
  font-size: 14px;
}

.llm-auth-method-desc {
  font-size: 12px;
  color: var(--text-muted);
}

/* LLM OAuth Connected Account */
.llm-oauth-connected {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 12px 14px;
  background: var(--panel-bg, #f8f9fa);
  border: 1px solid var(--border-color);
  border-radius: 8px;
  margin-top: 8px;
}

.llm-oauth-user {
  display: flex;
  align-items: center;
  gap: 10px;
}

.llm-oauth-avatar {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  object-fit: cover;
}

.llm-oauth-avatar-fallback {
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--border-color);
  color: var(--text-muted);
  font-size: 16px;
}

.llm-oauth-user-info {
  display: flex;
  flex-direction: column;
  gap: 1px;
}

.llm-oauth-user-name {
  font-size: 14px;
  font-weight: 500;
  color: var(--text-color);
}

.llm-oauth-user-email {
  font-size: 12px;
  color: var(--text-muted);
}

/* Google Sign-in Button */
.llm-google-signin-btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 10px 20px;
  background: #fff;
  color: #3c4043;
  border: 1px solid #dadce0;
  border-radius: 6px;
  font-size: 14px;
  font-weight: 500;
  cursor: pointer;
  transition: background 0.2s, box-shadow 0.2s;
  margin-top: 8px;
}

.llm-google-signin-btn:hover {
  background: #f8f9fa;
  box-shadow: 0 1px 3px rgba(0,0,0,0.1);
}

.llm-google-signin-icon {
  width: 18px;
  height: 18px;
  object-fit: contain;
}

/* Deployment / Cloud Provider Card Styles */
.dep-provider-desc {
  font-size: 13px;
  color: var(--text-muted);
  margin: 0 0 16px 0;
  line-height: 1.5;
}

.dep-default-badge {
  display: inline-flex;
  align-items: center;
  padding: 4px 12px;
  font-size: 11px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  color: #fff;
  background: var(--primary-color, #6366f1);
  border-radius: 20px;
}

.dep-card-actions {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-top: 16px;
  padding-top: 16px;
  border-top: 1px solid var(--border-color);
}

.dep-status-row {
  margin-top: 10px;
}

.dep-field-input[data-field="serviceAccountKey"] {
  font-family: var(--font-mono, 'SF Mono', 'Fira Code', monospace);
  font-size: 12px;
  line-height: 1.5;
  resize: vertical;
}

/* Responsive */
@media (max-width: 600px) {
  .ai-provider-card {
    padding: 14px;
  }
  .ai-provider-icon {
    width: 34px;
    height: 34px;
    font-size: 15px;
  }
  .ai-auth-oauth {
    flex-direction: column;
    align-items: flex-start;
  }
  .ai-limit-input-row .form-input {
    width: 110px;
  }
  .llm-advanced .form-row {
    grid-template-columns: 1fr;
  }
  .llm-key-actions {
    flex-direction: column;
  }
  .llm-oauth-connected {
    flex-direction: column;
    gap: 10px;
    align-items: flex-start;
  }
  .llm-auth-method-option {
    padding: 10px 12px;
  }
  .dep-card-actions {
    flex-direction: column;
    align-items: stretch;
  }
  .dep-default-badge {
    font-size: 10px;
    padding: 3px 8px;
  }
}

.toggle-label.small {
  gap: 8px;
}

.toggle-label.small .toggle-switch {
  width: 36px;
  height: 20px;
}

.toggle-label.small .toggle-switch::after {
  width: 16px;
  height: 16px;
  top: 2px;
  left: 2px;
}

.toggle-label.small .toggle-input:checked + .toggle-switch::after {
  transform: translateX(16px);
}

/* JSON Code Block */
.json-code-block {
  position: relative;
  background: #1e1e2e;
  border-radius: var(--radius);
  overflow: hidden;
}

.json-code-block pre {
  margin: 0;
  padding: 20px;
  overflow-x: auto;
}

.json-code-block code {
  color: #cdd6f4;
  font-family: 'Monaco', 'Menlo', 'Ubuntu Mono', monospace;
  font-size: 13px;
  line-height: 1.5;
}

.json-code-block .copy-json-btn {
  position: absolute;
  top: 8px;
  right: 8px;
}

.modal-description {
  font-size: 14px;
  color: var(--text-muted);
  margin-bottom: 16px;
}

.json-fields-description {
  margin-top: 20px;
  padding: 16px;
  background: var(--bg-color);
  border-radius: var(--radius);
}

.json-fields-description h4 {
  font-size: 14px;
  font-weight: 600;
  color: var(--text-color);
  margin-bottom: 12px;
}

.json-fields-description ul {
  list-style: none;
  padding: 0;
  margin: 0;
}

.json-fields-description li {
  font-size: 13px;
  color: var(--text-muted);
  padding: 6px 0;
  border-bottom: 1px solid var(--border-color);
}

.json-fields-description li:last-child {
  border-bottom: none;
}

.json-fields-description strong {
  color: var(--text-color);
  font-weight: 600;
}

/* Empty State */
.empty-state {
  text-align: center;
  padding: 48px 24px;
  color: var(--text-muted);
}

.empty-state i {
  font-size: 48px;
  margin-bottom: 16px;
  opacity: 0.5;
}

.empty-state h3 {
  font-size: 18px;
  font-weight: 600;
  color: var(--text-color);
  margin-bottom: 8px;
}

.empty-state p {
  margin-bottom: 20px;
}

/* Loading State */
.loading-state {
  text-align: center;
  padding: 48px;
  color: var(--text-muted);
}

.loading-state i {
  margin-right: 8px;
}

/* Responsive adjustments */
@media (max-width: 768px) {
  .settings-layout {
    flex-direction: column;
  }

  .settings-sidebar {
    width: 100%;
  }

  .settings-nav {
    flex-direction: row;
    overflow-x: auto;
    position: static;
  }

  .settings-nav-item {
    white-space: nowrap;
  }

  .plans-grid {
    grid-template-columns: 1fr;
  }

  .form-row {
    grid-template-columns: 1fr;
  }

  .permissions-selector {
    grid-template-columns: 1fr;
  }
}

/* Clickable Stat Cards */
.stat-card-clickable {
  cursor: pointer;
}

.stat-card-clickable:hover {
  border-color: var(--primary-color);
  transform: translateY(-2px);
  box-shadow: 0 4px 12px rgba(99, 102, 241, 0.15);
}

.stat-card-clickable::after {
  content: '\f061';
  font-family: 'Font Awesome 5 Free';
  font-weight: 900;
  position: absolute;
  top: 8px;
  right: 8px;
  font-size: 10px;
  color: var(--text-light);
  opacity: 0;
  transition: opacity 0.2s ease;
}

.stat-card-clickable:hover::after {
  opacity: 1;
  color: var(--primary-color);
}

/* Activity User Name */
.activity-user {
  color: var(--primary-color);
  font-weight: 600;
  margin-right: 2px;
}

/* ========================================
   Users & Groups Full Width Layout
   ======================================== */

.users-groups-fullwidth {
  display: flex;
  width: 100%;
  height: 100%;
  padding: 0 !important;
  overflow: hidden;
  align-items: flex-start;
}

.ug-sidebar {
  width: 260px;
  flex-shrink: 0;
  background: var(--panel-bg);
  border-right: 1px solid var(--border-color);
  display: flex;
  flex-direction: column;
  height: 100%;
  position: fixed;
  left: var(--sidebar-collapsed);
  top: var(--header-height);
  bottom: 0;
  z-index: 10;
}

.sidebar-expanded .ug-sidebar {
  left: var(--sidebar-width);
}

.ug-sidebar-header {
  padding: 24px 20px;
  border-bottom: 1px solid var(--border-color);
}

.ug-sidebar-header h2 {
  font-size: 18px;
  font-weight: 600;
  color: var(--text-color);
  margin-bottom: 4px;
}

.ug-sidebar-header h2 i {
  color: var(--primary-color);
  margin-right: 8px;
}

.ug-sidebar-header p {
  font-size: 13px;
  color: var(--text-muted);
}

.ug-nav {
  flex: 1;
  padding: 12px;
  display: flex;
  flex-direction: column;
  gap: 4px;
  overflow-y: auto;
}

.ug-nav-item {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px 16px;
  border: none;
  background: transparent;
  border-radius: var(--radius);
  font-size: 14px;
  font-weight: 500;
  color: var(--text-muted);
  cursor: pointer;
  transition: var(--transition);
  text-align: left;
  width: 100%;
}

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

.ug-nav-item.active {
  background: rgba(99, 102, 241, 0.1);
  color: var(--primary-color);
}

.ug-nav-item i {
  width: 20px;
  text-align: center;
}

.ug-nav-item span:first-of-type {
  flex: 1;
}

.ug-nav-count {
  background: var(--bg-color);
  padding: 2px 8px;
  border-radius: 10px;
  font-size: 12px;
  font-weight: 600;
}

.ug-nav-item.active .ug-nav-count {
  background: rgba(99, 102, 241, 0.15);
}

.ug-sidebar-actions {
  padding: 16px;
  border-top: 1px solid var(--border-color);
}

.btn-block {
  width: 100%;
}

.ug-content {
  flex: 1;
  overflow-y: auto;
  background: var(--bg-color);
  margin-left: 260px;
  height: 100%;
  align-self: flex-start;
}

.ug-panel {
  display: none;
  padding: 24px 32px;
}

.ug-panel.active {
  display: block;
}

.ug-panel-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 20px;
}

.ug-panel-header h3 {
  font-size: 20px;
  font-weight: 600;
  color: var(--text-color);
}

.ug-panel-actions {
  display: flex;
  gap: 12px;
  align-items: center;
}

.ug-table-container {
  background: var(--panel-bg);
  border: 1px solid var(--border-color);
  border-radius: var(--radius);
  overflow: hidden;
}

/* App count badge */
.app-count-badge {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 4px 10px;
  background: rgba(99, 102, 241, 0.1);
  color: var(--primary-color);
  border-radius: 12px;
  font-size: 12px;
  font-weight: 500;
}

/* Group rows (list view) */
.groups-list {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.group-row {
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 20px;
  background: var(--panel-bg);
  border: 1px solid var(--border-color);
  border-radius: var(--radius);
  transition: var(--transition);
}

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

.group-row-icon {
  width: 48px;
  height: 48px;
  border-radius: var(--radius);
  background: linear-gradient(135deg, var(--primary-color), #6366f1);
  color: white;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 18px;
  flex-shrink: 0;
}

.group-row-info {
  flex: 1;
  min-width: 0;
}

.group-row-info h4 {
  font-size: 16px;
  font-weight: 600;
  color: var(--text-color);
  margin-bottom: 2px;
}

.group-row-info p {
  font-size: 13px;
  color: var(--text-muted);
  margin-bottom: 8px;
}

.group-row-meta {
  display: flex;
  gap: 16px;
  font-size: 12px;
  color: var(--text-muted);
}

.group-row-meta span {
  display: flex;
  align-items: center;
  gap: 4px;
}

.group-row-apps {
  display: flex;
  flex-direction: column;
  gap: 4px;
  min-width: 200px;
}

.group-apps-label {
  font-size: 11px;
  color: var(--text-muted);
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

.group-apps-list {
  font-size: 13px;
  color: var(--text-color);
}

.group-row-actions {
  display: flex;
  gap: 8px;
  flex-shrink: 0;
}

/* Modal tabs */
.modal-body-tabbed {
  padding: 0 !important;
}

.modal-tabs {
  display: flex;
  border-bottom: 1px solid var(--border-color);
  background: var(--bg-color);
  padding: 0 16px;
}

.modal-tab {
  padding: 14px 20px;
  border: none;
  background: none;
  font-size: 14px;
  font-weight: 500;
  color: var(--text-muted);
  cursor: pointer;
  border-bottom: 2px solid transparent;
  margin-bottom: -1px;
  transition: var(--transition);
  display: flex;
  align-items: center;
  gap: 8px;
}

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

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

.modal-tab-content {
  padding: 24px;
}

.modal-tab-panel {
  display: none;
}

.modal-tab-panel.active {
  display: block;
}

/* Password reset section */
.password-reset-section {
  max-width: 400px;
}

.password-info {
  display: flex;
  gap: 12px;
  padding: 16px;
  background: rgba(59, 130, 246, 0.1);
  border-radius: var(--radius);
  margin-bottom: 20px;
}

.password-info i {
  color: var(--info);
  font-size: 18px;
  margin-top: 2px;
}

.password-info p {
  font-size: 13px;
  color: var(--text-color);
  line-height: 1.5;
}

.password-actions {
  margin-bottom: 24px;
}

.password-divider {
  display: flex;
  align-items: center;
  gap: 16px;
  margin: 24px 0;
  color: var(--text-muted);
  font-size: 13px;
}

.password-divider::before,
.password-divider::after {
  content: '';
  flex: 1;
  height: 1px;
  background: var(--border-color);
}

/* User apps section */
.user-apps-section {
  max-width: 600px;
}

.user-apps-intro {
  font-size: 14px;
  color: var(--text-muted);
  margin-bottom: 16px;
}

.user-apps-list {
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin-bottom: 16px;
}

.app-access-item {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px 16px;
  background: var(--bg-color);
  border: 1px solid var(--border-color);
  border-radius: var(--radius);
  cursor: pointer;
  transition: var(--transition);
}

.app-access-item:hover {
  border-color: var(--primary-color);
}

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

.app-access-info {
  display: flex;
  align-items: center;
  gap: 12px;
  flex: 1;
}

.app-access-name {
  font-weight: 500;
  color: var(--text-color);
}

.app-access-status {
  font-size: 11px;
  padding: 2px 8px;
  border-radius: 10px;
  text-transform: capitalize;
}

.app-access-status.status-active {
  background: rgba(16, 185, 129, 0.1);
  color: #059669;
}

.app-access-status.status-development {
  background: rgba(245, 158, 11, 0.1);
  color: #d97706;
}

.user-apps-actions {
  display: flex;
  gap: 8px;
}

/* Group apps grid in modal */
.group-apps-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
  gap: 10px;
  margin-bottom: 16px;
}

.app-checkbox-card {
  display: flex;
  align-items: center;
  padding: 12px;
  background: var(--bg-color);
  border: 1px solid var(--border-color);
  border-radius: var(--radius);
  cursor: pointer;
  transition: var(--transition);
}

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

.app-checkbox-card input[type="checkbox"] {
  margin-right: 10px;
  accent-color: var(--primary-color);
}

.app-checkbox-card input[type="checkbox"]:checked + .app-checkbox-content {
  color: var(--primary-color);
}

.app-checkbox-content {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 13px;
  color: var(--text-color);
}

.app-checkbox-content i {
  color: var(--text-muted);
}

/* App checkbox list (in invite modal) */
.app-checkbox-list {
  display: flex;
  flex-direction: column;
  gap: 8px;
  max-height: 200px;
  overflow-y: auto;
  padding: 12px;
  background: var(--bg-color);
  border: 1px solid var(--border-color);
  border-radius: var(--radius);
}

.permissions-intro-text {
  font-size: 14px;
  color: var(--text-muted);
  margin-bottom: 20px;
}

/* ========================================
   Billing Full Width Layout (same pattern)
   ======================================== */

.billing-fullwidth {
  display: flex;
  width: 100%;
  height: 100%;
  padding: 0 !important;
  overflow: hidden;
}

.billing-sidebar {
  width: 260px;
  flex-shrink: 0;
  background: var(--panel-bg);
  border-right: 1px solid var(--border-color);
  display: flex;
  flex-direction: column;
  height: 100%;
  position: fixed;
  left: var(--sidebar-collapsed);
  top: var(--header-height);
  bottom: 0;
  z-index: 10;
}

.sidebar-expanded .billing-sidebar {
  left: var(--sidebar-width);
}

.billing-sidebar-header {
  padding: 24px 20px;
  border-bottom: 1px solid var(--border-color);
}

.billing-sidebar-header h2 {
  font-size: 18px;
  font-weight: 600;
  color: var(--text-color);
  margin-bottom: 4px;
}

.billing-sidebar-header h2 i {
  color: var(--primary-color);
  margin-right: 8px;
}

.billing-sidebar-header p {
  font-size: 13px;
  color: var(--text-muted);
}

.billing-nav {
  flex: 1;
  padding: 12px;
  display: flex;
  flex-direction: column;
  gap: 4px;
  overflow-y: auto;
}

.billing-nav-item {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px 16px;
  border: none;
  background: transparent;
  border-radius: var(--radius);
  font-size: 14px;
  font-weight: 500;
  color: var(--text-muted);
  cursor: pointer;
  transition: var(--transition);
  text-align: left;
  width: 100%;
}

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

.billing-nav-item.active {
  background: rgba(99, 102, 241, 0.1);
  color: var(--primary-color);
}

.billing-nav-item i {
  width: 20px;
  text-align: center;
}

.billing-content {
  flex: 1;
  overflow-y: auto;
  background: var(--bg-color);
  margin-left: 260px;
}

.billing-panel {
  display: none;
  padding: 24px 32px;
  max-width: 900px;
}

.billing-panel.active {
  display: block;
}

.billing-panel-header {
  margin-bottom: 24px;
}

.billing-panel-header h3 {
  font-size: 20px;
  font-weight: 600;
  color: var(--text-color);
  margin-bottom: 4px;
}

.billing-panel-header p {
  font-size: 14px;
  color: var(--text-muted);
}

/* Billing Nav Item Badges */
.billing-nav-item .nav-badge {
  margin-left: auto;
  font-size: 11px;
  font-weight: 600;
  padding: 2px 8px;
  border-radius: 10px;
  background: rgba(99, 102, 241, 0.15);
  color: var(--primary-color);
}

.billing-nav-item .nav-count {
  margin-left: auto;
  font-size: 12px;
  font-weight: 500;
  color: var(--text-muted);
  background: var(--bg-color);
  padding: 2px 8px;
  border-radius: 10px;
}

.billing-sidebar-actions {
  padding: 12px 16px;
  border-top: 1px solid var(--border-color);
}

.billing-sidebar-summary {
  padding: 16px;
  background: var(--bg-color);
  border-top: 1px solid var(--border-color);
}

.billing-sidebar-summary .summary-item {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 8px 0;
}

.billing-sidebar-summary .summary-item:not(:last-child) {
  border-bottom: 1px solid var(--border-color);
}

.billing-sidebar-summary .summary-label {
  font-size: 12px;
  color: var(--text-muted);
}

.billing-sidebar-summary .summary-value {
  font-size: 14px;
  font-weight: 600;
  color: var(--text-color);
}

/* Panel Header */
.billing-panel .panel-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 24px;
  padding-bottom: 16px;
  padding-top: 16px;
  border-bottom: 1px solid var(--border-color);
  position: sticky;
  top: 0;
  z-index: 10;
  background: var(--bg-color, #fff);
}

.billing-panel .panel-header h3 {
  font-size: 20px;
  font-weight: 600;
  color: var(--text-color);
}

.billing-panel .panel-header-actions {
  display: flex;
  gap: 8px;
  align-items: center;
}

/* Subscription Panel */
.subscription-overview {
  margin-bottom: 32px;
}

.plan-card-highlight {
  display: flex;
  align-items: center;
  gap: 20px;
  padding: 24px;
  background: linear-gradient(135deg, rgba(99, 102, 241, 0.1) 0%, rgba(99, 102, 241, 0.05) 100%);
  border: 1px solid rgba(99, 102, 241, 0.2);
  border-radius: var(--radius-lg);
}

.plan-card-icon {
  width: 56px;
  height: 56px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: linear-gradient(135deg, var(--primary-color) 0%, #818cf8 100%);
  border-radius: 12px;
  color: white;
  font-size: 24px;
}

.plan-card-info {
  flex: 1;
}

.plan-name-lg {
  display: block;
  font-size: 14px;
  font-weight: 500;
  color: var(--text-muted);
  margin-bottom: 4px;
}

.plan-price-lg {
  font-size: 32px;
  font-weight: 700;
  color: var(--text-color);
}

.plan-price-lg .price-cycle {
  font-size: 16px;
  font-weight: 400;
  color: var(--text-muted);
}

.plan-card-actions {
  display: flex;
  gap: 12px;
}

/* Subscription Details */
.subscription-details {
  margin-bottom: 32px;
}

.subscription-details h4 {
  font-size: 16px;
  font-weight: 600;
  color: var(--text-color);
  margin-bottom: 16px;
}

/* Usage Grid */
.usage-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
  gap: 16px;
}

.usage-card {
  padding: 16px;
  background: var(--panel-bg);
  border: 1px solid var(--border-color);
  border-radius: var(--radius);
}

.usage-card.warning {
  border-color: rgba(245, 158, 11, 0.3);
  background: rgba(245, 158, 11, 0.05);
}

.usage-card.danger {
  border-color: rgba(239, 68, 68, 0.3);
  background: rgba(239, 68, 68, 0.05);
}

.usage-card.over-limit {
  border-color: rgba(99, 102, 241, 0.3);
  background: rgba(99, 102, 241, 0.05);
}

.usage-bar-fill.over-limit {
  background: linear-gradient(90deg, #6366f1, #818cf8);
}

.sub-over-limit-note {
  font-size: 11px;
  color: #6366f1;
  margin-top: 6px;
  display: flex;
  align-items: center;
  gap: 4px;
}

.usage-card-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 12px;
}

.usage-card .usage-label {
  font-size: 13px;
  font-weight: 500;
  color: var(--text-color);
}

.usage-card .usage-percentage {
  font-size: 12px;
  font-weight: 600;
  color: var(--text-muted);
}

.usage-card .usage-bar-track {
  height: 6px;
  background: var(--bg-color);
  border-radius: 3px;
  margin-bottom: 8px;
  overflow: hidden;
}

.usage-card .usage-bar-fill {
  height: 100%;
  background: var(--primary-color);
  border-radius: 3px;
  transition: width 0.3s ease;
}

.usage-card .usage-bar-fill.warning {
  background: var(--warning-color);
}

.usage-card .usage-bar-fill.danger {
  background: var(--danger-color);
}

.usage-card-footer {
  display: flex;
  justify-content: space-between;
  font-size: 12px;
}

.usage-card-footer .usage-value {
  color: var(--text-color);
  font-weight: 500;
}

.usage-card-footer .usage-limit {
  color: var(--text-muted);
}

/* Subscription Actions */
.subscription-actions {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.action-card {
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 16px 20px;
  background: var(--panel-bg);
  border: 1px solid var(--border-color);
  border-radius: var(--radius);
}

.action-card .action-icon {
  width: 40px;
  height: 40px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(99, 102, 241, 0.1);
  border-radius: 8px;
  color: var(--primary-color);
  font-size: 16px;
}

.action-card .action-icon.warning {
  background: rgba(239, 68, 68, 0.1);
  color: var(--danger-color);
}

.action-card .action-info {
  flex: 1;
}

.action-card .action-info h5 {
  font-size: 14px;
  font-weight: 600;
  color: var(--text-color);
  margin-bottom: 2px;
}

.action-card .action-info p {
  font-size: 13px;
  color: var(--text-muted);
  margin: 0;
}

/* Payment Methods Grid */
.payment-methods-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap: 16px;
  margin-bottom: 32px;
}

.payment-method-card {
  position: relative;
  padding: 20px;
  background: var(--panel-bg);
  border: 1px solid var(--border-color);
  border-radius: var(--radius-lg);
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.payment-method-card.default {
  border-color: var(--primary-color);
  box-shadow: 0 0 0 3px rgba(99, 102, 241, 0.1);
}

.payment-method-card .default-ribbon {
  position: absolute;
  top: 12px;
  right: 12px;
  font-size: 10px;
  font-weight: 600;
  text-transform: uppercase;
  padding: 3px 8px;
  background: var(--primary-color);
  color: white;
  border-radius: 4px;
}

.payment-method-brand {
  font-size: 32px;
  color: var(--text-color);
}

.payment-method-brand .fa-cc-visa {
  color: #1a1f71;
}

.payment-method-brand .fa-cc-mastercard {
  color: #eb001b;
}

.payment-method-details {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.payment-method-details .card-name {
  font-size: 14px;
  font-weight: 600;
  color: var(--text-color);
}

.payment-method-details .card-number {
  font-size: 14px;
  font-family: monospace;
  color: var(--text-muted);
  letter-spacing: 1px;
}

.payment-method-details .card-expiry {
  font-size: 12px;
  color: var(--text-muted);
}

.payment-method-actions {
  display: flex;
  gap: 8px;
  margin-top: auto;
  padding-top: 12px;
  border-top: 1px solid var(--border-color);
}

.payment-method-add {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 12px;
  padding: 40px 20px;
  background: var(--bg-color);
  border: 2px dashed var(--border-color);
  border-radius: var(--radius-lg);
  cursor: pointer;
  transition: var(--transition);
  min-height: 180px;
}

.payment-method-add:hover {
  border-color: var(--primary-color);
  background: rgba(99, 102, 241, 0.05);
}

.payment-method-add .add-icon {
  width: 48px;
  height: 48px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--panel-bg);
  border: 1px solid var(--border-color);
  border-radius: 50%;
  font-size: 20px;
  color: var(--text-muted);
}

.payment-method-add span {
  font-size: 14px;
  color: var(--text-muted);
}

/* Payment Info Section */
.payment-info-section {
  margin-top: 24px;
}

.payment-info-section h4 {
  font-size: 16px;
  font-weight: 600;
  color: var(--text-color);
  margin-bottom: 16px;
}

.info-cards {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 16px;
}

.info-card {
  display: flex;
  gap: 16px;
  padding: 16px;
  background: var(--bg-color);
  border-radius: var(--radius);
}

.info-card > i {
  font-size: 24px;
  color: var(--primary-color);
  flex-shrink: 0;
}

.info-card h5 {
  font-size: 14px;
  font-weight: 600;
  color: var(--text-color);
  margin-bottom: 4px;
}

.info-card p {
  font-size: 13px;
  color: var(--text-muted);
  margin: 0;
  line-height: 1.5;
}

/* Invoices List */
.invoices-list {
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin-bottom: 24px;
}

.invoice-item {
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 16px 20px;
  background: var(--panel-bg);
  border: 1px solid var(--border-color);
  border-radius: var(--radius);
  transition: var(--transition);
}

.invoice-item:hover {
  border-color: var(--primary-color);
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05);
}

.invoice-icon {
  width: 40px;
  height: 40px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--bg-color);
  border-radius: 8px;
  color: var(--text-muted);
  font-size: 16px;
}

.invoice-info {
  flex: 1;
}

.invoice-info .invoice-id {
  display: block;
  font-size: 14px;
  font-weight: 600;
  color: var(--text-color);
}

.invoice-info .invoice-date {
  font-size: 12px;
  color: var(--text-muted);
}

.invoice-plan .plan-badge-sm {
  font-size: 11px;
  font-weight: 500;
  padding: 4px 10px;
  background: rgba(99, 102, 241, 0.1);
  color: var(--primary-color);
  border-radius: 12px;
}

.invoice-amount {
  font-size: 16px;
  font-weight: 600;
  color: var(--text-color);
  min-width: 80px;
  text-align: right;
}

.invoice-status {
  min-width: 80px;
}

.invoice-actions {
  display: flex;
  gap: 4px;
}

/* Invoices Summary */
.invoices-summary {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 16px;
  padding: 20px;
  background: var(--bg-color);
  border-radius: var(--radius-lg);
}

.invoices-summary .summary-card {
  display: flex;
  align-items: center;
  gap: 12px;
}

.invoices-summary .summary-icon {
  width: 44px;
  height: 44px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--panel-bg);
  border-radius: 10px;
  font-size: 18px;
  color: var(--primary-color);
}

.invoices-summary .summary-info {
  display: flex;
  flex-direction: column;
}

.invoices-summary .summary-number {
  font-size: 20px;
  font-weight: 700;
  color: var(--text-color);
}

.invoices-summary .summary-text {
  font-size: 12px;
  color: var(--text-muted);
}

/* Usage Panel - Cost Overview */
.cost-overview {
  margin-bottom: 32px;
}

.cost-total-card {
  padding: 32px;
  background: linear-gradient(135deg, var(--primary-color) 0%, #818cf8 100%);
  border-radius: var(--radius-lg);
  color: white;
  text-align: center;
}

.cost-total-label {
  font-size: 14px;
  opacity: 0.9;
  margin-bottom: 8px;
}

.cost-total-value {
  font-size: 48px;
  font-weight: 700;
  margin-bottom: 8px;
}

.cost-total-detail {
  font-size: 14px;
  opacity: 0.8;
}

/* Cost Breakdown */
.cost-breakdown {
  margin-bottom: 32px;
}

.cost-breakdown h4 {
  font-size: 16px;
  font-weight: 600;
  color: var(--text-color);
  margin-bottom: 16px;
}

.cost-items {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.cost-item {
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 16px 20px;
  background: var(--panel-bg);
  border: 1px solid var(--border-color);
  border-radius: var(--radius);
}

.cost-item-icon {
  width: 40px;
  height: 40px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--bg-color);
  border-radius: 8px;
  color: var(--text-muted);
  font-size: 16px;
}

.cost-item-info {
  flex: 1;
}

.cost-item-name {
  display: block;
  font-size: 14px;
  font-weight: 500;
  color: var(--text-color);
}

.cost-item-desc {
  font-size: 12px;
  color: var(--text-muted);
}

.cost-item-value {
  font-size: 16px;
  font-weight: 600;
  color: var(--text-color);
}

.cost-item-value.included {
  color: var(--success-color);
}

/* Usage Charts */
.usage-charts h4 {
  font-size: 16px;
  font-weight: 600;
  color: var(--text-color);
  margin-bottom: 16px;
}

.usage-chart-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  gap: 16px;
}

.usage-chart-card {
  padding: 20px;
  background: var(--panel-bg);
  border: 1px solid var(--border-color);
  border-radius: var(--radius);
}

.usage-chart-card h5 {
  font-size: 14px;
  font-weight: 500;
  color: var(--text-color);
  margin-bottom: 16px;
}

.mini-chart {
  height: 120px;
}

.chart-bars {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  height: 100%;
  gap: 8px;
}

.chart-bar {
  flex: 1;
  background: var(--primary-color);
  border-radius: 4px 4px 0 0;
  height: var(--height, 50%);
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  position: relative;
  transition: background 0.2s ease;
}

.chart-bar:hover {
  background: #818cf8;
}

.chart-bar span {
  position: absolute;
  bottom: -20px;
  left: 50%;
  transform: translateX(-50%);
  font-size: 10px;
  color: var(--text-muted);
}

/* Button xs size */
.btn-xs {
  padding: 4px 8px;
  font-size: 11px;
}

/* ========================================
   Subscription Plans & Pricing (.sub-)
   ======================================== */

/* Billing Cycle Toggle */
.sub-billing-toggle {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  margin-bottom: 28px;
  padding: 12px 0;
}

.sub-toggle-label {
  font-size: 14px;
  font-weight: 500;
  color: var(--text-muted);
  transition: color 0.2s;
}

.sub-toggle-label.active {
  color: var(--text-color);
  font-weight: 600;
}

.sub-toggle-switch {
  position: relative;
  display: inline-block;
  width: 44px;
  height: 24px;
}

.sub-toggle-switch input {
  opacity: 0;
  width: 0;
  height: 0;
}

.sub-toggle-slider {
  position: absolute;
  cursor: pointer;
  top: 0; left: 0; right: 0; bottom: 0;
  background: var(--border-color);
  border-radius: 24px;
  transition: background 0.3s;
}

.sub-toggle-slider::before {
  content: '';
  position: absolute;
  width: 18px;
  height: 18px;
  left: 3px;
  bottom: 3px;
  background: white;
  border-radius: 50%;
  transition: transform 0.3s;
  box-shadow: 0 1px 3px rgba(0,0,0,0.2);
}

.sub-toggle-switch input:checked + .sub-toggle-slider {
  background: var(--primary-color);
}

.sub-toggle-switch input:checked + .sub-toggle-slider::before {
  transform: translateX(20px);
}

.sub-save-badge {
  display: inline-block;
  padding: 3px 10px;
  background: rgba(16, 185, 129, 0.12);
  color: #10b981;
  border-radius: 12px;
  font-size: 12px;
  font-weight: 600;
}

/* Status Badge - Trial */
.status-badge.status-trial {
  background: rgba(245, 158, 11, 0.12);
  color: #f59e0b;
}

/* Legacy — kept for backwards compat */
.sub-limit-reached {
  font-size: 11px;
  color: var(--danger-color);
  font-weight: 600;
  margin-top: 6px;
}

/* Add-on Section */
.sub-addon-section {
  margin-bottom: 28px;
  padding: 20px;
  border: 2px dashed var(--border-color);
  border-radius: var(--radius-lg);
  background: rgba(99, 102, 241, 0.02);
}

.sub-addon-section h4 {
  font-size: 15px;
  font-weight: 600;
  color: var(--text-color);
  margin-bottom: 4px;
}

.sub-addon-cards {
  display: flex;
  gap: 16px;
  flex-wrap: wrap;
}

.sub-addon-card {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 14px 18px;
  background: var(--panel-bg);
  border: 1px solid var(--border-color);
  border-radius: var(--radius);
  flex: 1;
  min-width: 240px;
}

.sub-addon-icon {
  width: 36px;
  height: 36px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(99, 102, 241, 0.1);
  border-radius: 8px;
  color: var(--primary-color);
  font-size: 15px;
  flex-shrink: 0;
}

.sub-addon-info {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.sub-addon-name {
  font-size: 13px;
  font-weight: 600;
  color: var(--text-color);
}

.sub-addon-price {
  font-size: 12px;
  color: var(--text-muted);
}

.sub-addon-btn {
  margin-left: auto;
  flex-shrink: 0;
  white-space: nowrap;
}

.sub-addon-limit-badge {
  display: inline-block;
  font-size: 11px;
  font-weight: 600;
  color: #ef4444;
  background: rgba(239, 68, 68, 0.1);
  padding: 1px 8px;
  border-radius: 10px;
  margin-top: 2px;
}

.sub-addon-usage-text {
  font-size: 11px;
  color: var(--text-muted);
  margin-top: 2px;
}

/* Add-on Modal Styles */
.sub-addon-usage {
  margin-bottom: 20px;
}

.sub-addon-usage-label {
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-size: 13px;
  color: var(--text-color);
  margin-bottom: 6px;
}

.sub-addon-usage-pct {
  font-size: 12px;
  font-weight: 600;
  color: var(--text-muted);
}

.sub-addon-qty-section {
  margin-bottom: 20px;
}

.sub-addon-qty-label {
  display: block;
  font-size: 13px;
  font-weight: 600;
  color: var(--text-color);
  margin-bottom: 8px;
}

.sub-addon-qty {
  display: flex;
  align-items: center;
  gap: 0;
  width: fit-content;
}

.sub-addon-qty-btn {
  width: 36px;
  height: 36px;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 1px solid var(--border-color);
  background: var(--panel-bg);
  color: var(--text-color);
  cursor: pointer;
  font-size: 13px;
  transition: background 0.15s, color 0.15s;
}

.sub-addon-qty-btn:first-child {
  border-radius: var(--radius) 0 0 var(--radius);
  border-right: none;
}

.sub-addon-qty-btn:last-child {
  border-radius: 0 var(--radius) var(--radius) 0;
  border-left: none;
}

.sub-addon-qty-btn:hover {
  background: var(--primary-color);
  color: #fff;
  border-color: var(--primary-color);
}

.sub-addon-qty-input {
  width: 60px;
  height: 36px;
  text-align: center;
  border: 1px solid var(--border-color);
  background: var(--bg-color);
  color: var(--text-color);
  font-size: 15px;
  font-weight: 600;
  -moz-appearance: textfield;
  outline: none;
}

.sub-addon-qty-input::-webkit-inner-spin-button,
.sub-addon-qty-input::-webkit-outer-spin-button {
  -webkit-appearance: none;
  margin: 0;
}

.sub-addon-qty-input:focus {
  border-color: var(--primary-color);
}

.sub-addon-preview {
  background: var(--bg-color);
  border: 1px solid var(--border-color);
  border-radius: var(--radius);
  padding: 16px;
  margin-bottom: 16px;
}

.sub-addon-preview-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-size: 13px;
  color: var(--text-color);
  padding: 4px 0;
}

.sub-addon-preview-divider {
  border-top: 1px dashed var(--border-color);
  margin: 8px 0;
}

.sub-addon-total {
  font-weight: 700;
  font-size: 15px;
  color: var(--primary-color);
}

.sub-addon-note {
  font-size: 12px;
  color: var(--success-color);
  margin-top: 10px;
  display: flex;
  align-items: center;
  gap: 6px;
}

.sub-addon-pm-indicator {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 12px;
  color: var(--text-muted);
  padding: 10px 14px;
  background: rgba(99, 102, 241, 0.04);
  border-radius: var(--radius);
  border: 1px solid var(--border-color);
}

.sub-addon-pm-indicator i {
  font-size: 14px;
  color: var(--primary-color);
}

.sub-addon-pm-missing {
  background: rgba(239, 68, 68, 0.04);
  border-color: rgba(239, 68, 68, 0.2);
}

.sub-addon-pm-missing i {
  color: #ef4444;
}

.sub-addon-payment-info {
  margin-bottom: 4px;
}

/* Active Add-ons Section */
.sub-active-addons {
  margin-bottom: 28px;
  padding: 20px;
  background: var(--panel-bg);
  border: 1px solid var(--border-color);
  border-radius: var(--radius-lg);
}

.sub-active-addons h4 {
  font-size: 15px;
  font-weight: 600;
  color: var(--text-color);
  margin-bottom: 12px;
  display: flex;
  align-items: center;
  gap: 4px;
}

.sub-active-addon-list {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.sub-active-addon-item {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 12px 16px;
  background: var(--bg-color);
  border: 1px solid var(--border-color);
  border-radius: var(--radius);
  transition: border-color 0.15s;
}

.sub-active-addon-item:hover {
  border-color: var(--primary-color);
}

.sub-active-addon-icon {
  width: 32px;
  height: 32px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(99, 102, 241, 0.08);
  border-radius: 8px;
  color: var(--primary-color);
  font-size: 14px;
  flex-shrink: 0;
}

.sub-active-addon-details {
  display: flex;
  flex-direction: column;
  gap: 2px;
  flex: 1;
  min-width: 0;
}

.sub-active-addon-name {
  font-size: 13px;
  font-weight: 600;
  color: var(--text-color);
}

.sub-active-addon-meta {
  font-size: 12px;
  color: var(--text-muted);
}

.sub-addon-trial-badge {
  display: inline-block;
  font-size: 11px;
  font-weight: 600;
  color: var(--success-color);
  background: rgba(16, 185, 129, 0.1);
  padding: 1px 8px;
  border-radius: 10px;
}

.sub-active-addon-cost {
  font-size: 15px;
  font-weight: 700;
  color: var(--text-color);
  white-space: nowrap;
  flex-shrink: 0;
}

.sub-active-addon-cost span {
  font-size: 11px;
  font-weight: 400;
  color: var(--text-muted);
}

.sub-active-addon-actions {
  display: flex;
  gap: 6px;
  flex-shrink: 0;
}

.sub-active-addons-total {
  display: block;
  text-align: right;
  font-size: 13px;
  color: var(--text-muted);
  margin-top: 12px;
  padding-top: 12px;
  border-top: 1px solid var(--border-color);
}

.sub-active-addons-total strong {
  color: var(--primary-color);
}

@media (max-width: 640px) {
  .sub-active-addon-item {
    flex-wrap: wrap;
    gap: 8px;
  }
  .sub-active-addon-cost {
    margin-left: auto;
  }
  .sub-active-addon-actions {
    width: 100%;
    justify-content: flex-end;
  }
}

/* Billing Breakdown Table */
.sub-billing-breakdown {
  margin-top: 24px;
  padding: 20px 24px;
  background: var(--panel-bg);
  border: 1px solid var(--border-color);
  border-radius: 12px;
}

.sub-billing-breakdown h4 {
  font-size: 15px;
  font-weight: 600;
  margin: 0 0 16px 0;
  color: var(--text-color);
}

.sub-breakdown-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 13px;
}

.sub-breakdown-table th {
  text-align: left;
  font-weight: 600;
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  color: var(--text-muted);
  padding: 8px 12px;
  border-bottom: 2px solid var(--border-color);
}

.sub-breakdown-table td {
  padding: 10px 12px;
  border-bottom: 1px solid var(--border-color);
  color: var(--text-color);
}

.sub-breakdown-table .text-right {
  text-align: right;
}

.sub-breakdown-item-name {
  display: inline-flex;
  align-items: center;
  font-weight: 500;
}

.sub-breakdown-trial td {
  color: var(--text-muted);
}

.sub-breakdown-trial-badge {
  display: inline-block;
  font-size: 10px;
  padding: 1px 6px;
  border-radius: 4px;
  background: rgba(16, 185, 129, 0.12);
  color: #10b981;
  font-weight: 600;
  margin-left: 8px;
}

.sub-breakdown-total td {
  border-top: 2px solid var(--border-color);
  border-bottom: none;
  font-weight: 700;
  font-size: 15px;
  padding: 14px 12px;
  color: var(--text-color);
}

.sub-breakdown-note {
  font-size: 12px;
  color: var(--text-muted);
  margin: 12px 0 0 0;
  display: flex;
  align-items: center;
  gap: 6px;
}

@media (max-width: 640px) {
  .sub-billing-breakdown {
    padding: 16px;
  }
  .sub-breakdown-table th,
  .sub-breakdown-table td {
    padding: 8px 6px;
    font-size: 12px;
  }
  .sub-breakdown-total td {
    font-size: 14px;
  }
}

/* Plan Cards in Modal */
.sub-plan-card {
  position: relative;
  padding: 28px 24px;
  background: var(--panel-bg);
  border: 1px solid var(--border-color);
  border-radius: var(--radius-lg);
  text-align: center;
  transition: transform 0.2s, box-shadow 0.2s;
}

.sub-plan-card:hover {
  transform: translateY(-3px);
  box-shadow: 0 8px 24px rgba(0,0,0,0.08);
}

.sub-plan-card.sub-popular {
  border-color: var(--primary-color);
  box-shadow: 0 0 0 1px var(--primary-color);
}

.sub-plan-card.sub-current {
  border-color: rgba(16, 185, 129, 0.4);
  background: rgba(16, 185, 129, 0.03);
}

.sub-popular-badge {
  position: absolute;
  top: -11px;
  left: 50%;
  transform: translateX(-50%);
  padding: 3px 14px;
  background: var(--primary-color);
  color: white;
  border-radius: 12px;
  font-size: 11px;
  font-weight: 600;
  white-space: nowrap;
}

.sub-current-badge {
  position: absolute;
  top: -11px;
  left: 50%;
  transform: translateX(-50%);
  padding: 3px 14px;
  background: #10b981;
  color: white;
  border-radius: 12px;
  font-size: 11px;
  font-weight: 600;
  white-space: nowrap;
}

.sub-plan-icon {
  font-size: 28px;
  margin-bottom: 10px;
}

.sub-plan-name {
  font-size: 18px;
  font-weight: 700;
  color: var(--text-color);
  margin: 0 0 8px;
}

.sub-plan-price {
  margin-bottom: 10px;
}

.sub-price-amount {
  font-size: 36px;
  font-weight: 700;
  color: var(--text-color);
}

.sub-price-cycle {
  font-size: 14px;
  font-weight: 400;
  color: var(--text-muted);
}

.sub-plan-desc {
  font-size: 13px;
  color: var(--text-muted);
  margin-bottom: 18px;
  min-height: 36px;
}

.sub-plan-features {
  list-style: none;
  padding: 0;
  margin: 0 0 20px;
  text-align: left;
}

.sub-plan-features li {
  padding: 7px 0;
  font-size: 13px;
  color: var(--text-color);
  border-bottom: 1px solid rgba(0,0,0,0.04);
  display: flex;
  align-items: center;
  gap: 8px;
}

.sub-plan-features li.sub-feature-no {
  color: var(--text-muted);
  opacity: 0.6;
}

.sub-check {
  color: #10b981;
  font-size: 12px;
  flex-shrink: 0;
}

.sub-no {
  color: var(--text-muted);
  font-size: 12px;
  opacity: 0.4;
  flex-shrink: 0;
}

/* Comparison Table */
.sub-comparison-section {
  margin-top: 32px;
  padding-top: 24px;
  border-top: 1px solid var(--border-color);
}

.sub-comparison-section h4 {
  font-size: 16px;
  font-weight: 600;
  color: var(--text-color);
  margin-bottom: 16px;
  text-align: center;
}

.sub-comparison-table-wrap {
  overflow-x: auto;
}

.sub-comparison-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 13px;
}

.sub-comparison-table th,
.sub-comparison-table td {
  padding: 10px 16px;
  text-align: center;
  border-bottom: 1px solid var(--border-color);
}

.sub-comparison-table th {
  font-weight: 600;
  color: var(--text-color);
  background: rgba(0,0,0,0.02);
}

.sub-comparison-table td:first-child,
.sub-comparison-table th:first-child {
  text-align: left;
  font-weight: 500;
}

.sub-current-col {
  background: rgba(16, 185, 129, 0.06);
}

/* Add-on Footnote in Modal */
.sub-addon-info-section {
  margin-top: 24px;
  padding: 14px 18px;
  background: rgba(99, 102, 241, 0.04);
  border-radius: var(--radius);
  font-size: 13px;
  color: var(--text-muted);
  text-align: center;
}

.sub-addon-info-section i {
  color: var(--primary-color);
  margin-right: 6px;
}

/* Preview Modal Styles */
.sub-preview-content {
  padding: 8px 0;
}

.sub-plan-comparison {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 20px;
  margin-bottom: 20px;
}

.sub-preview-plan {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 18px 28px;
  border-radius: var(--radius);
  background: rgba(0,0,0,0.03);
  min-width: 140px;
}

.sub-preview-plan.sub-preview-new {
  background: rgba(16, 185, 129, 0.08);
  border: 2px solid rgba(16, 185, 129, 0.3);
}

.sub-preview-label {
  font-size: 11px;
  font-weight: 600;
  color: var(--text-muted);
  text-transform: uppercase;
  letter-spacing: 0.5px;
  margin-bottom: 6px;
}

.sub-preview-name {
  font-size: 16px;
  font-weight: 700;
  color: var(--text-color);
  margin-bottom: 4px;
}

.sub-preview-price {
  font-size: 20px;
  font-weight: 700;
  color: var(--primary-color);
}

.sub-preview-arrow {
  font-size: 20px;
  color: var(--text-muted);
}

.sub-price-change-desc {
  text-align: center;
  font-size: 14px;
  color: var(--text-muted);
  margin-bottom: 16px;
}

/* Blockers Warning */
.sub-blockers-warning {
  background: rgba(245, 158, 11, 0.08);
  border: 1px solid rgba(245, 158, 11, 0.3);
  border-radius: var(--radius);
  padding: 16px;
  margin-top: 8px;
}

.sub-blockers-warning h5 {
  color: #d97706;
  font-size: 13px;
  font-weight: 600;
  margin: 0 0 10px;
}

.sub-blockers-warning h5 i {
  margin-right: 6px;
}

.sub-blockers-warning ul {
  margin: 0;
  padding-left: 20px;
  font-size: 13px;
  color: var(--text-color);
}

.sub-blockers-warning li {
  margin-bottom: 4px;
}

/* Plans grid in modal - 3 columns */
.plans-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 20px;
  margin-bottom: 8px;
}

@media (max-width: 900px) {
  .plans-grid {
    grid-template-columns: 1fr;
    gap: 16px;
  }
  .sub-plan-comparison {
    flex-direction: column;
    gap: 12px;
  }
  .sub-addon-cards {
    flex-direction: column;
  }
}

@media (min-width: 901px) and (max-width: 1100px) {
  .plans-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

/* Stripe Card Element Container */
.sub-stripe-card-container {
  padding: 12px;
  border: 1px solid var(--border-color);
  border-radius: 8px;
  background: var(--card-bg);
  min-height: 40px;
  transition: border-color 0.2s, box-shadow 0.2s;
}

.sub-stripe-card-container:focus-within,
.sub-stripe-card-container.StripeElement--focus {
  border-color: var(--primary-color);
  box-shadow: 0 0 0 3px rgba(99, 102, 241, 0.12);
}

.sub-stripe-card-container.StripeElement--invalid {
  border-color: var(--danger-color);
  box-shadow: 0 0 0 3px rgba(239, 68, 68, 0.08);
}

.sub-stripe-error {
  color: var(--danger-color);
  font-size: 12px;
  margin-top: 6px;
  min-height: 18px;
}

.sub-stripe-hint {
  color: var(--text-secondary, #6b7280);
  font-size: 12px;
  margin-top: 6px;
  display: flex;
  align-items: center;
  gap: 6px;
}

.sub-stripe-hint i {
  color: var(--primary-color, #6366f1);
  font-size: 13px;
}

/* Empty Payment Method State */
.sub-empty-pm {
  text-align: center;
  padding: 40px 20px;
  color: var(--text-muted);
}

.sub-empty-pm i {
  font-size: 36px;
  margin-bottom: 12px;
  opacity: 0.4;
}

.sub-empty-pm p {
  margin: 4px 0;
  font-size: 14px;
}

/* Payment Method Status Badges */
.sub-pm-status {
  display: inline-block;
  padding: 2px 8px;
  border-radius: 10px;
  font-size: 11px;
  font-weight: 600;
  text-transform: capitalize;
}

.sub-pm-verified {
  background: rgba(16, 185, 129, 0.12);
  color: #10b981;
}

.sub-pm-pending {
  background: rgba(245, 158, 11, 0.12);
  color: #f59e0b;
}

/* Billing Summary Cards */
.sub-billing-summary-cards {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: 16px;
  margin-bottom: 28px;
}

.sub-summary-card {
  display: flex;
  align-items: flex-start;
  gap: 14px;
  padding: 18px;
  background: var(--card-bg);
  border: 1px solid var(--border-color);
  border-radius: 12px;
}

.sub-summary-icon {
  width: 40px;
  height: 40px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 10px;
  background: rgba(99, 102, 241, 0.08);
  color: var(--primary-color);
  font-size: 18px;
  flex-shrink: 0;
}

.sub-summary-info {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
}

.sub-summary-label {
  font-size: 12px;
  color: var(--text-muted);
  font-weight: 500;
}

.sub-summary-value {
  font-size: 16px;
  font-weight: 700;
  color: var(--text-color);
}

.sub-summary-note {
  font-size: 11px;
  color: var(--text-muted);
}

.sub-status-active {
  color: #10b981;
}

.sub-status-pending {
  color: #f59e0b;
}

.sub-status-failed {
  color: var(--danger-color);
}

/* Payment History Table */
.sub-payment-badge {
  display: inline-block;
  padding: 2px 8px;
  border-radius: 10px;
  font-size: 11px;
  font-weight: 600;
  text-transform: capitalize;
}

.sub-payment-badge.succeeded,
.sub-payment-badge.paid {
  background: rgba(16, 185, 129, 0.12);
  color: #10b981;
}

.sub-payment-badge.pending {
  background: rgba(245, 158, 11, 0.12);
  color: #f59e0b;
}

.sub-payment-badge.failed {
  background: rgba(239, 68, 68, 0.1);
  color: var(--danger-color);
}

.sub-payment-badge.refunded {
  background: rgba(107, 114, 128, 0.1);
  color: #6b7280;
}

/* Verify Badge */
.sub-verify-badge {
  display: inline-block;
  padding: 1px 6px;
  border-radius: 6px;
  font-size: 10px;
  font-weight: 600;
  background: rgba(245, 158, 11, 0.12);
  color: #f59e0b;
  cursor: pointer;
  transition: background 0.2s;
}

.sub-verify-badge:hover {
  background: rgba(245, 158, 11, 0.2);
}

/* Responsive for billing summary */
@media (max-width: 768px) {
  .sub-billing-summary-cards {
    grid-template-columns: 1fr;
  }
}

/* --- Account Balance Card --- */
.sub-balance-card {
  display: flex;
  align-items: center;
  justify-content: space-between;
  background: linear-gradient(135deg, rgba(16, 185, 129, 0.08) 0%, rgba(16, 185, 129, 0.02) 100%);
  border: 1px solid rgba(16, 185, 129, 0.2);
  border-radius: 12px;
  padding: 16px 20px;
  margin-bottom: 20px;
}
.sub-balance-left {
  display: flex;
  align-items: center;
  gap: 14px;
}
.sub-balance-icon {
  font-size: 24px;
  color: #10b981;
  opacity: 0.8;
}
.sub-balance-label {
  display: block;
  font-size: 12px;
  color: var(--text-muted);
  font-weight: 500;
  margin-bottom: 2px;
}
.sub-balance-amount {
  display: block;
  font-size: 22px;
  font-weight: 700;
  color: #10b981;
}
.sub-balance-right {
  text-align: right;
}
.sub-balance-note {
  display: block;
  font-size: 12px;
  color: var(--text-muted);
}
.sub-balance-date {
  display: block;
  font-size: 11px;
  color: var(--text-muted);
  margin-top: 2px;
  opacity: 0.7;
}
.sub-balance-card.sub-balance-zero {
  background: var(--bg-secondary, #f9fafb);
  border-color: var(--border-color, #e5e7eb);
}
.sub-balance-card.sub-balance-zero .sub-balance-icon {
  color: var(--text-muted);
}
.sub-balance-card.sub-balance-zero .sub-balance-amount {
  color: var(--text-color);
}

/* --- History Tabs --- */
.sub-history-tabs {
  display: flex;
  gap: 4px;
  background: var(--bg-secondary, #f3f4f6);
  border-radius: 10px;
  padding: 4px;
  margin-bottom: 16px;
}
.sub-history-tab {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 10px 16px;
  border: none;
  background: transparent;
  border-radius: 8px;
  font-size: 13px;
  font-weight: 500;
  color: var(--text-muted);
  cursor: pointer;
  transition: all 0.2s;
}
.sub-history-tab:hover {
  color: var(--text-color);
  background: rgba(255,255,255,0.5);
}
.sub-history-tab.active {
  background: var(--bg-primary, #fff);
  color: var(--text-color);
  box-shadow: 0 1px 3px rgba(0,0,0,0.08);
  font-weight: 600;
}
.sub-history-tab i {
  font-size: 13px;
  opacity: 0.7;
}
.sub-history-tab.active i {
  opacity: 1;
}
.sub-tab-count {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 20px;
  height: 20px;
  padding: 0 6px;
  border-radius: 10px;
  font-size: 11px;
  font-weight: 600;
  background: rgba(99, 102, 241, 0.1);
  color: #6366f1;
}
.sub-history-tab.active .sub-tab-count {
  background: #6366f1;
  color: #fff;
}

/* --- Transactions Table --- */
.sub-transactions-table {
  overflow-x: auto;
  border-radius: 10px;
  border: 1px solid var(--border-color, #e5e7eb);
  margin-bottom: 16px;
}
.sub-transactions-table table {
  width: 100%;
  border-collapse: collapse;
  font-size: 13px;
}
.sub-transactions-table thead th {
  background: var(--bg-secondary, #f9fafb);
  padding: 10px 14px;
  text-align: left;
  font-weight: 600;
  font-size: 12px;
  text-transform: uppercase;
  letter-spacing: 0.3px;
  color: var(--text-muted);
  border-bottom: 1px solid var(--border-color, #e5e7eb);
}
.sub-transactions-table tbody td {
  padding: 10px 14px;
  border-bottom: 1px solid var(--border-color, #e5e7eb);
  color: var(--text-color);
}
.sub-transactions-table tbody tr:last-child td {
  border-bottom: none;
}
.sub-transactions-table tbody tr:hover {
  background: var(--bg-secondary, #f9fafb);
}
.sub-tx-date {
  white-space: nowrap;
  color: var(--text-muted);
  font-size: 12px;
}
.sub-tx-type {
  display: inline-block;
  padding: 2px 8px;
  border-radius: 6px;
  font-size: 11px;
  font-weight: 600;
}
.sub-tx-type.sub-tx-credit,
.sub-tx-type.sub-tx-refund {
  background: rgba(16, 185, 129, 0.1);
  color: #10b981;
}
.sub-tx-type.sub-tx-debit,
.sub-tx-type.sub-tx-charge {
  background: rgba(239, 68, 68, 0.1);
  color: #ef4444;
}
.sub-tx-type.sub-tx-payment {
  background: rgba(99, 102, 241, 0.1);
  color: #6366f1;
}
.sub-tx-type.sub-tx-proration,
.sub-tx-type.sub-tx-adjustment {
  background: rgba(245, 158, 11, 0.1);
  color: #f59e0b;
}
.sub-tx-amount.sub-tx-credit {
  color: #10b981;
  font-weight: 600;
}
.sub-tx-amount.sub-tx-debit {
  color: #ef4444;
  font-weight: 600;
}

/* --- Pagination --- */
.sub-pagination {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  padding: 12px 0;
  margin-top: 8px;
}
.sub-pagination-info {
  font-size: 12px;
  color: var(--text-muted);
  font-weight: 500;
}

/* --- Payment History Responsive --- */
@media (max-width: 768px) {
  .sub-balance-card {
    flex-direction: column;
    align-items: flex-start;
    gap: 12px;
  }
  .sub-balance-right {
    text-align: left;
  }
  .sub-history-tabs {
    flex-direction: column;
  }
  .sub-transactions-table {
    font-size: 12px;
  }
  .sub-transactions-table thead th,
  .sub-transactions-table tbody td {
    padding: 8px 10px;
  }
}

/* ========================================
   Enterprise Applications Page - Full Width
   ======================================== */

/* Override empty-view centering when apps page is shown */
.empty-view:has(.apps-page-fullwidth) {
  align-items: stretch;
  justify-content: stretch;
}

.apps-page-fullwidth {
  height: calc(100vh - 56px);
  width: 100%;
  padding: 16px;
  box-sizing: border-box;
}

.apps-card {
  display: grid;
  grid-template-rows: auto 1fr;
  height: 100%;
  background: white;
  border-radius: 16px;
  border: 1px solid var(--border-color);
  overflow: hidden;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.04);
}

.apps-card-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 16px 24px;
  background: rgba(255, 255, 255, 0.95);
  border-bottom: 1px solid var(--border-color);
  flex-wrap: wrap;
}

.apps-card-header-left {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.apps-card-title {
  font-size: 20px;
  font-weight: 700;
  color: #1e293b;
  margin: 0;
  letter-spacing: -0.3px;
}

.apps-card-subtitle {
  font-size: 13px;
  color: #64748b;
  margin: 0;
}

.apps-card-header-right {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
}

.apps-card-header-right .apps-search {
  min-width: 200px;
  max-width: 280px;
}

.apps-card-header-right .apps-filter-select,
.apps-card-header-right .apps-sort-select {
  min-width: 120px;
}

.apps-header-divider {
  width: 1px;
  height: 28px;
  background: var(--border-color);
  margin: 0 4px;
}

.apps-count-badge {
  display: inline-flex;
  align-items: center;
  padding: 6px 12px;
  background: #f1f5f9;
  border-radius: 20px;
  font-size: 13px;
  font-weight: 500;
  color: #475569;
  white-space: nowrap;
}

.apps-card-body {
  display: grid;
  grid-template-rows: auto 1fr;
  overflow: hidden;
}

.apps-card-body .apps-table-header {
  background: #f8fafc;
  border-bottom: 1px solid var(--border-color);
}

.apps-card-body .apps-table-body {
  overflow-y: auto;
}

/* Legacy apps-page styles for backwards compatibility */
.apps-page {
  padding: 32px;
  max-width: 1400px;
  margin: 0 auto;
}

/* Page Header */
.apps-page-header {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  margin-bottom: 24px;
}

.apps-page-title {
  font-size: 28px;
  font-weight: 600;
  color: var(--text-color);
  margin: 0 0 4px 0;
  letter-spacing: -0.5px;
}

.apps-page-subtitle {
  font-size: 14px;
  color: var(--text-muted);
  margin: 0;
}

.btn-apps-create {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 12px 20px;
  background: var(--primary-color);
  color: white;
  border: none;
  border-radius: var(--radius-md);
  font-size: 14px;
  font-weight: 500;
  cursor: pointer;
  transition: all 0.2s ease;
  box-shadow: 0 2px 4px rgba(99, 102, 241, 0.2);
}

.btn-apps-create:hover {
  background: #5749e2;
  transform: translateY(-1px);
  box-shadow: 0 4px 12px rgba(99, 102, 241, 0.3);
}

.btn-apps-create:active {
  transform: translateY(0);
}

/* Toolbar */
.apps-toolbar {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 16px 20px;
  background: var(--panel-bg);
  border: 1px solid var(--border-color);
  border-radius: var(--radius-lg);
  margin-bottom: 16px;
  flex-wrap: wrap;
}

.apps-search {
  position: relative;
  flex: 1;
  min-width: 240px;
  max-width: 400px;
}

.apps-search i {
  position: absolute;
  left: 14px;
  top: 50%;
  transform: translateY(-50%);
  color: var(--text-muted);
  font-size: 14px;
}

.apps-search input {
  width: 100%;
  padding: 10px 14px 10px 40px;
  background: var(--bg-color);
  border: 1px solid var(--border-color);
  border-radius: var(--radius-md);
  font-size: 14px;
  color: var(--text-color);
  transition: all 0.2s ease;
}

.apps-search input:focus {
  outline: none;
  border-color: var(--primary-color);
  box-shadow: 0 0 0 3px rgba(99, 102, 241, 0.1);
}

.apps-search input::placeholder {
  color: var(--text-muted);
}

.apps-filters {
  display: flex;
  align-items: center;
  gap: 12px;
}

.apps-filter-select {
  padding: 10px 36px 10px 14px;
  background: var(--bg-color);
  border: 1px solid var(--border-color);
  border-radius: var(--radius-md);
  font-size: 13px;
  color: var(--text-color);
  cursor: pointer;
  appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 24 24' stroke='%239ca3af'%3E%3Cpath stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='M19 9l-7 7-7-7'%3E%3C/path%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 10px center;
  background-size: 16px;
  min-width: 130px;
  transition: all 0.2s ease;
}

.apps-filter-select:hover {
  border-color: var(--border-dark);
}

.apps-filter-select:focus {
  outline: none;
  border-color: var(--primary-color);
  box-shadow: 0 0 0 3px rgba(99, 102, 241, 0.1);
}

.apps-toolbar-divider {
  width: 1px;
  height: 32px;
  background: var(--border-color);
  margin: 0 4px;
}

.apps-view-toggle {
  display: flex;
  background: var(--bg-color);
  border: 1px solid var(--border-color);
  border-radius: var(--radius-md);
  overflow: hidden;
}

.apps-view-btn {
  padding: 8px 14px;
  background: transparent;
  border: none;
  color: var(--text-muted);
  cursor: pointer;
  font-size: 14px;
  transition: all 0.2s ease;
}

.apps-view-btn:hover {
  color: var(--text-color);
  background: var(--hover-bg);
}

.apps-view-btn.active {
  background: var(--primary-color);
  color: white;
}

.apps-sort {
  display: flex;
  align-items: center;
  gap: 8px;
  color: var(--text-muted);
  font-size: 13px;
}

.apps-sort label {
  white-space: nowrap;
}

.apps-sort select {
  padding: 8px 32px 8px 12px;
  background: var(--bg-color);
  border: 1px solid var(--border-color);
  border-radius: var(--radius-md);
  font-size: 13px;
  color: var(--text-color);
  cursor: pointer;
  appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 24 24' stroke='%239ca3af'%3E%3Cpath stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='M19 9l-7 7-7-7'%3E%3C/path%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 8px center;
  background-size: 14px;
  transition: all 0.2s ease;
}

.apps-sort select:focus {
  outline: none;
  border-color: var(--primary-color);
}

/* Table Container */
.apps-table-container {
  background: var(--panel-bg);
  border: 1px solid var(--border-color);
  border-radius: var(--radius-lg);
  overflow: hidden;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.05);
}

.apps-table-header {
  display: grid;
  grid-template-columns: 1fr 120px 100px 140px 120px 100px;
  padding: 14px 20px;
  background: var(--bg-color);
  border-bottom: 1px solid var(--border-color);
  gap: 16px;
}

.apps-th {
  font-size: 11px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  color: var(--text-muted);
}

.apps-th.sortable {
  cursor: pointer;
  display: flex;
  align-items: center;
  gap: 6px;
  transition: color 0.2s ease;
}

.apps-th.sortable:hover {
  color: var(--text-color);
}

.apps-th.sortable i {
  font-size: 10px;
  opacity: 0.5;
}

.apps-table-body {
  max-height: calc(100vh);
  overflow-y: auto;
}

/* Application Row */
.apps-row {
  display: grid;
  grid-template-columns: 1fr 120px 100px 140px 120px 100px;
  padding: 16px 20px;
  border-bottom: 1px solid var(--border-light);
  gap: 16px;
  align-items: center;
  transition: background 0.15s ease;
  cursor: pointer;
}

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

.apps-row:hover {
  background: var(--hover-bg);
}

.apps-td {
  display: flex;
  align-items: center;
}

.apps-td.apps-td-category {
  flex-direction: column;
  align-items: flex-start;
  gap: 4px;
}

.apps-row-main {
  display: flex;
  align-items: center;
  gap: 14px;
}

.apps-row-icon {
  width: 44px;
  height: 44px;
  border-radius: var(--radius-md);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 18px;
  color: white;
  flex-shrink: 0;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}

.apps-row-info {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
  margin-left: 12px;
}

.apps-row-name {
  font-size: 14px;
  font-weight: 600;
  color: var(--text-color);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

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

/* Status Badge */
.apps-status-badge {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 6px 12px;
  border-radius: 20px;
  font-size: 12px;
  font-weight: 500;
}

.apps-status-badge i {
  font-size: 8px;
}

.apps-status-badge.status-active {
  background: rgba(16, 185, 129, 0.1);
  color: #059669;
}

.apps-status-badge.status-draft {
  background: rgba(245, 158, 11, 0.1);
  color: #d97706;
}

.apps-status-badge.status-archived {
  background: rgba(107, 114, 128, 0.1);
  color: #6b7280;
}

.apps-status-badge.status-maintenance {
  background: rgba(239, 68, 68, 0.1);
  color: #dc2626;
}

/* Category Badge */
.apps-category-badge {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 4px 10px;
  background: var(--bg-color);
  border: 1px solid var(--border-color);
  border-radius: 6px;
  font-size: 11px;
  color: var(--text-color);
}

/* Application type badges */
.apps-type-badge {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 3px 8px;
  border-radius: 4px;
  font-size: 10px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  margin-right: 6px;
}

.apps-type-badge.type-build {
  background: rgba(59, 130, 246, 0.12);
  color: #3b82f6;
}

.apps-type-badge.type-integration {
  background: rgba(168, 85, 247, 0.12);
  color: #a855f7;
}

.apps-type-badge.type-improve {
  background: rgba(245, 158, 11, 0.12);
  color: #f59e0b;
}

.apps-type-badge.type-migration {
  background: rgba(34, 197, 94, 0.12);
  color: #22c55e;
}

.apps-no-category {
  color: var(--text-muted);
  font-size: 12px;
}

.apps-subcategory-row {
  display: flex;
  align-items: center;
  gap: 4px;
}

/* Users Column */
.apps-users-stack {
  display: flex;
  align-items: center;
}

.apps-user-avatar {
  width: 28px;
  height: 28px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 10px;
  font-weight: 600;
  color: white;
  border: 2px solid white;
  margin-left: -8px;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
}

.apps-user-avatar:first-child {
  margin-left: 0;
}

.apps-user-avatar.apps-user-more {
  background: #64748b;
  font-size: 9px;
}

.apps-no-users {
  color: var(--text-muted);
  font-size: 13px;
}

/* Timestamp */
.apps-timestamp {
  font-size: 13px;
  color: var(--text-muted);
}

/* Action Buttons */
.apps-actions {
  display: flex;
  align-items: center;
  gap: 4px;
  justify-content: flex-end;
}

.apps-action-btn {
  width: 32px;
  height: 32px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: transparent;
  border: none;
  border-radius: var(--radius-sm);
  color: var(--text-muted);
  cursor: pointer;
  transition: all 0.15s ease;
}

.apps-action-btn:hover {
  background: var(--hover-bg);
  color: var(--text-color);
}

.apps-action-btn.primary:hover {
  background: var(--primary-color);
  color: white;
}

/* Context Menu */
.apps-context-menu {
  position: fixed;
  background: var(--panel-bg);
  border: 1px solid var(--border-color);
  border-radius: var(--radius-md);
  box-shadow: 0 10px 40px rgba(0, 0, 0, 0.15);
  padding: 6px;
  min-width: 180px;
  z-index: 1000;
  animation: contextMenuFadeIn 0.15s ease;
}

@keyframes contextMenuFadeIn {
  from {
    opacity: 0;
    transform: scale(0.95) translateY(-4px);
  }
  to {
    opacity: 1;
    transform: scale(1) translateY(0);
  }
}

.apps-menu-item {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 14px;
  border-radius: var(--radius-sm);
  font-size: 13px;
  color: var(--text-color);
  cursor: pointer;
  transition: all 0.15s ease;
}

.apps-menu-item:hover {
  background: var(--hover-bg);
}

.apps-menu-item i {
  width: 16px;
  color: var(--text-muted);
}

.apps-menu-item.danger {
  color: var(--danger);
}

.apps-menu-item.danger i {
  color: var(--danger);
}

.apps-menu-item.danger:hover {
  background: rgba(239, 68, 68, 0.1);
}

.apps-menu-divider {
  height: 1px;
  background: var(--border-color);
  margin: 6px 0;
}

/* Table Footer */
.apps-table-footer {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 14px 20px;
  background: var(--bg-color);
  border-top: 1px solid var(--border-color);
}

.apps-count {
  font-size: 13px;
  color: var(--text-muted);
}

.apps-count strong {
  color: var(--text-color);
  font-weight: 600;
}

.btn-apps-secondary {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 8px 14px;
  background: transparent;
  border: 1px solid var(--border-color);
  border-radius: var(--radius-md);
  font-size: 13px;
  color: var(--text-color);
  cursor: pointer;
  transition: all 0.2s ease;
}

.btn-apps-secondary:hover {
  background: var(--hover-bg);
  border-color: var(--border-dark);
}

/* Empty State */
.apps-empty-state {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 80px 40px;
  text-align: center;
}

.apps-empty-icon {
  width: 80px;
  height: 80px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--bg-color);
  border-radius: 50%;
  margin-bottom: 24px;
}

.apps-empty-icon i {
  font-size: 32px;
  color: var(--text-muted);
}

.apps-empty-state h3 {
  font-size: 18px;
  font-weight: 600;
  color: var(--text-color);
  margin: 0 0 8px 0;
}

.apps-empty-state p {
  font-size: 14px;
  color: var(--text-muted);
  margin: 0 0 24px 0;
  max-width: 360px;
}

/* Loading State */
.apps-loading {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 60px 40px;
}

.apps-loading-spinner {
  width: 40px;
  height: 40px;
  border: 3px solid var(--border-color);
  border-top-color: var(--primary-color);
  border-radius: 50%;
  animation: spin 0.8s linear infinite;
  margin-bottom: 16px;
}

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

.apps-loading p {
  font-size: 14px;
  color: var(--text-muted);
  margin: 0;
}

/* Responsive */
@media (max-width: 1200px) {
  .apps-table-header,
  .apps-row {
    grid-template-columns: 1fr 110px 120px 100px;
  }

  .apps-table-header .apps-th:nth-child(3),
  .apps-row .apps-td:nth-child(3) {
    display: none;
  }
}

@media (max-width: 900px) {
  .apps-page {
    padding: 20px;
  }

  .apps-toolbar {
    flex-direction: column;
    align-items: stretch;
    gap: 12px;
  }

  .apps-search {
    max-width: none;
  }

  .apps-filters {
    flex-wrap: wrap;
  }

  .apps-toolbar-divider {
    display: none;
  }

  .apps-table-header,
  .apps-row {
    grid-template-columns: 1fr 90px;
  }

  .apps-table-header .apps-th:nth-child(2),
  .apps-table-header .apps-th:nth-child(4),
  .apps-row .apps-td:nth-child(2),
  .apps-row .apps-td:nth-child(4) {
    display: none;
  }
}

/* ========================================
   Notifications Page - Full Width
   ======================================== */

.empty-view:has(.notifications-page-fullwidth) {
  align-items: stretch;
  justify-content: stretch;
}

.notifications-page-fullwidth {
  height: calc(100vh - 56px);
  width: 100%;
  padding: 16px;
  box-sizing: border-box;
}

.notifications-card {
  display: grid;
  grid-template-rows: auto 1fr;
  height: 100%;
  background: white;
  border-radius: 16px;
  border: 1px solid var(--border-color);
  overflow: hidden;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.04);
}

.notifications-card-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 16px 24px;
  background: rgba(255, 255, 255, 0.95);
  border-bottom: 1px solid var(--border-color);
  flex-wrap: wrap;
}

.notifications-card-header-left {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.notifications-card-title {
  font-size: 20px;
  font-weight: 700;
  color: #1e293b;
  margin: 0;
  letter-spacing: -0.3px;
}

.notifications-card-subtitle {
  font-size: 13px;
  color: #64748b;
  margin: 0;
}

.notifications-card-header-right {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
}

.notifications-search {
  position: relative;
  min-width: 200px;
  max-width: 280px;
}

.notifications-search i {
  position: absolute;
  left: 12px;
  top: 50%;
  transform: translateY(-50%);
  color: var(--text-muted);
  font-size: 14px;
}

.notifications-search input {
  width: 100%;
  padding: 10px 12px 10px 36px;
  border: 1px solid var(--border-color);
  border-radius: 8px;
  font-size: 13px;
  background: var(--bg-color);
}

.notifications-filter-select {
  padding: 10px 32px 10px 12px;
  border: 1px solid var(--border-color);
  border-radius: 8px;
  font-size: 13px;
  background: var(--bg-color);
  min-width: 120px;
}

.notifications-header-divider {
  width: 1px;
  height: 28px;
  background: var(--border-color);
  margin: 0 4px;
}

.notifications-count-badge {
  display: inline-flex;
  align-items: center;
  padding: 6px 12px;
  background: #f1f5f9;
  border-radius: 20px;
  font-size: 13px;
  font-weight: 500;
  color: #475569;
  white-space: nowrap;
}

.btn-notifications-secondary {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 10px 16px;
  background: transparent;
  border: 1px solid var(--border-color);
  border-radius: 8px;
  font-size: 13px;
  color: var(--text-color);
  cursor: pointer;
  transition: all 0.2s ease;
}

.btn-notifications-secondary:hover {
  background: var(--hover-bg);
  border-color: var(--border-dark);
}

.notifications-card-body {
  display: grid;
  grid-template-rows: auto 1fr;
  overflow: hidden;
}

.notifications-table-header {
  display: grid;
  grid-template-columns: 1fr 100px 120px 100px;
  padding: 14px 20px;
  background: #f8fafc;
  border-bottom: 1px solid var(--border-color);
  gap: 16px;
}

.notifications-th {
  font-size: 11px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  color: var(--text-muted);
}

.notifications-table-body {
  max-height: calc(100vh);
  overflow-y: auto;
}

.notifications-row {
  display: grid;
  grid-template-columns: 1fr 100px 120px 100px;
  padding: 16px 20px;
  border-bottom: 1px solid var(--border-light);
  gap: 16px;
  align-items: center;
  transition: background 0.15s ease;
}

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

.notifications-row:hover {
  background: var(--hover-bg);
}

.notifications-row.unread {
  background: rgba(45, 43, 135, 0.03);
}

.notifications-td {
  display: flex;
  align-items: center;
}

.notifications-td-content {
  display: flex;
  align-items: center;
  gap: 12px;
}

.notifications-row-icon {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  background: rgba(45, 43, 135, 0.1);
  color: var(--primary-color);
}

.notifications-row-icon.type-success {
  background: rgba(34, 197, 94, 0.1);
  color: #22c55e;
}

.notifications-row-icon.type-warning {
  background: rgba(234, 179, 8, 0.1);
  color: #eab308;
}

.notifications-row-icon.type-error {
  background: rgba(239, 68, 68, 0.1);
  color: #ef4444;
}

.notifications-row-icon.type-info {
  background: rgba(59, 130, 246, 0.1);
  color: #3b82f6;
}

.notifications-row-info {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
}

.notifications-row-title {
  font-size: 14px;
  font-weight: 500;
  color: var(--text-color);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.notifications-row-desc {
  font-size: 12px;
  color: var(--text-muted);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 400px;
}

.notifications-type-badge {
  display: inline-flex;
  align-items: center;
  padding: 4px 10px;
  border-radius: 12px;
  font-size: 11px;
  font-weight: 500;
  background: var(--bg-color);
  color: var(--text-color);
}

.notifications-type-badge.type-success {
  background: rgba(34, 197, 94, 0.1);
  color: #16a34a;
}

.notifications-type-badge.type-warning {
  background: rgba(234, 179, 8, 0.1);
  color: #ca8a04;
}

.notifications-type-badge.type-error {
  background: rgba(239, 68, 68, 0.1);
  color: #dc2626;
}

.notifications-type-badge.type-info {
  background: rgba(59, 130, 246, 0.1);
  color: #2563eb;
}

.notifications-time {
  font-size: 13px;
  color: var(--text-muted);
}

.notifications-action-btn {
  width: 32px;
  height: 32px;
  border: none;
  background: transparent;
  border-radius: 6px;
  cursor: pointer;
  color: var(--text-muted);
  transition: all 0.15s ease;
}

.notifications-action-btn:hover {
  background: var(--hover-bg);
  color: var(--text-color);
}

.notifications-td-actions {
  display: flex;
  gap: 4px;
  justify-content: flex-end;
}

.notifications-empty-state {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 80px 40px;
  text-align: center;
}

.notifications-empty-icon {
  width: 80px;
  height: 80px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--bg-color);
  border-radius: 50%;
  margin-bottom: 24px;
}

.notifications-empty-icon i {
  font-size: 32px;
  color: var(--text-muted);
}

.notifications-empty-state h3 {
  font-size: 18px;
  font-weight: 600;
  color: var(--text-color);
  margin: 0 0 8px 0;
}

.notifications-empty-state p {
  font-size: 14px;
  color: var(--text-muted);
  margin: 0;
}

.notifications-loading {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 60px 40px;
}

.notifications-loading-spinner {
  width: 40px;
  height: 40px;
  border: 3px solid var(--border-color);
  border-top-color: var(--primary-color);
  border-radius: 50%;
  animation: spin 0.8s linear infinite;
  margin-bottom: 16px;
}

/* ========================================
   Category Selection Modal
   ======================================== */

.category-modal-overlay {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: rgba(0, 0, 0, 0.5);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 1000;
  opacity: 0;
  animation: fadeIn 0.2s ease forwards;
}

@keyframes fadeIn {
  to { opacity: 1; }
}

.category-modal {
  background: white;
  border-radius: 20px;
  width: min(680px, 95vw);
  max-height: 90vh;
  overflow: hidden;
  box-shadow: 0 25px 50px rgba(0, 0, 0, 0.25);
  transform: scale(0.95) translateY(10px);
  animation: modalSlideUp 0.3s ease forwards;
}

@keyframes modalSlideUp {
  to {
    transform: scale(1) translateY(0);
  }
}

.category-modal-header {
  padding: 24px 28px;
  border-bottom: 1px solid var(--border-color);
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.category-modal-title {
  font-size: 20px;
  font-weight: 700;
  color: #1e293b;
  margin: 0;
}

.category-modal-subtitle {
  font-size: 14px;
  color: #64748b;
  margin-top: 4px;
}

.category-modal-close {
  width: 36px;
  height: 36px;
  border: none;
  background: #f1f5f9;
  border-radius: 10px;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 18px;
  color: #64748b;
  transition: all 0.2s;
}

.category-modal-close:hover {
  background: #e2e8f0;
  color: #1e293b;
}

.category-modal-body {
  padding: 24px 28px;
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 16px;
}

.category-select-card {
  background: linear-gradient(135deg, #fafbff 0%, #f8fafc 100%);
  border: 2px solid #e2e8f0;
  border-radius: 16px;
  padding: 24px;
  cursor: pointer;
  transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1);
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.category-select-card:hover {
  border-color: #2d2b87;
  background: linear-gradient(135deg, #f0f0ff 0%, #e8e8f8 100%);
  transform: translateY(-4px);
  box-shadow: 0 12px 24px rgba(45, 43, 135, 0.15);
}

.category-select-card-icon {
  width: 52px;
  height: 52px;
  border-radius: 14px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 24px;
  color: white;
}

.category-select-card-icon.build { background: linear-gradient(135deg, #3b82f6 0%, #2563eb 100%); }
.category-select-card-icon.integration { background: linear-gradient(135deg, #8b5cf6 0%, #7c3aed 100%); }
.category-select-card-icon.improve { background: linear-gradient(135deg, #f59e0b 0%, #d97706 100%); }
.category-select-card-icon.migration { background: linear-gradient(135deg, #10b981 0%, #059669 100%); }

.category-select-card-title {
  font-size: 16px;
  font-weight: 700;
  color: #1e293b;
}

.category-select-card-desc {
  font-size: 13px;
  color: #64748b;
  line-height: 1.5;
}

.category-select-card-options {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-top: 4px;
}

.category-select-card-option {
  font-size: 11px;
  padding: 4px 10px;
  background: rgba(45, 43, 135, 0.08);
  color: #475569;
  border-radius: 20px;
  white-space: nowrap;
}

@media (max-width: 640px) {
  .category-modal-body {
    grid-template-columns: 1fr;
  }
}

/* Category form header badge */
.category-form-badge {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 8px 16px;
  border-radius: 24px;
  font-size: 13px;
  font-weight: 600;
  margin-bottom: 16px;
}

.category-form-badge.build {
  background: rgba(59, 130, 246, 0.1);
  color: #2563eb;
}

.category-form-badge.integration {
  background: rgba(139, 92, 246, 0.1);
  color: #7c3aed;
}

.category-form-badge.improve {
  background: rgba(245, 158, 11, 0.1);
  color: #d97706;
}

.category-form-badge.migration {
  background: rgba(16, 185, 129, 0.1);
  color: #059669;
}

/* ========== Application Overview - Additional Styles ========== */

/* Badge variants for modes */
.badge--primary {
  background: rgba(45, 43, 135, 0.12);
  color: #2d2b87;
}

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

/* Attachments list */
.attachments-list {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.attachments-list .attachment-item {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 10px 12px;
  background: #f8fafc;
  border-radius: 6px;
  border: 1px solid #e2e8f0;
  transition: all 0.15s ease;
}

.attachments-list .attachment-item:hover {
  background: #f1f5f9;
  border-color: #cbd5e1;
}

.attachments-list .attachment-item i {
  font-size: 18px;
  width: 24px;
  text-align: center;
}

.attachments-list .attachment-name {
  flex: 1;
  font-size: 13px;
  color: var(--text-color);
  font-weight: 500;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.attachments-list .attachment-size {
  font-size: 12px;
  color: var(--text-muted);
}

/* Clickable attachments */
.attachments-list a.attachment-item {
  text-decoration: none;
  cursor: pointer;
}

.attachments-list a.attachment-item.clickable:hover {
  background: #e0f2fe;
  border-color: #38bdf8;
}

.attachments-list .attachment-download-icon {
  font-size: 14px;
  color: var(--text-muted);
  opacity: 0;
  transition: opacity 0.15s ease;
}

.attachments-list a.attachment-item:hover .attachment-download-icon {
  opacity: 1;
  color: var(--primary-color);
}

/* Similar apps / references */
.similar-apps-list {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.similar-app-link {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 10px 12px;
  background: #f8fafc;
  border-radius: 6px;
  border: 1px solid #e2e8f0;
  color: var(--primary-color);
  text-decoration: none;
  font-size: 13px;
  transition: all 0.15s ease;
}

.similar-app-link:hover {
  background: rgba(45, 43, 135, 0.06);
  border-color: var(--primary-color);
}

.similar-app-link i {
  font-size: 11px;
  opacity: 0.7;
}

/* Compliance tag style */
.tag--compliance {
  background: rgba(139, 92, 246, 0.12);
  color: #7c3aed;
  padding: 4px 10px;
  border-radius: 12px;
  font-size: 12px;
  font-weight: 500;
  display: inline-flex;
  align-items: center;
  gap: 5px;
}

.tag--compliance i {
  font-size: 10px;
}

/* Color swatch in info items */
.color-swatch {
  display: inline-block;
  flex-shrink: 0;
}

/* ========================================
   COMPREHENSIVE MOBILE RESPONSIVENESS
   ======================================== */

/* Mobile CSS Variables Override */
@media (max-width: 768px) {
  :root {
    --mobile-padding: 12px;
    --mobile-gap: 12px;
    --touch-target: 44px;
  }
}

/* ========================================
   Tablet Breakpoint (768px - 1024px)
   ======================================== */
@media (max-width: 1024px) and (min-width: 769px) {
  .dashboard-stats-row {
    grid-template-columns: repeat(3, 1fr);
  }

  .grid-4 {
    grid-template-columns: repeat(2, 1fr);
  }

  .workspace-panel {
    width: 220px;
    min-width: 220px;
  }

  .ai-panel {
    width: 320px;
  }
}

/* ========================================
   Mobile Breakpoint (768px and below)
   ======================================== */
@media (max-width: 768px) {
  /* --- HEADER MOBILE --- */
  .header {
    padding: 0 12px;
    height: 56px;
  }

  .header-left {
    gap: 8px;
  }

  .logo-image {
    height: 32px;
  }

  .workspace-select {
    display: none;
  }

  .header-center {
    display: none;
  }

  .header-actions {
    gap: 4px;
  }

  .header-btn {
    width: 40px;
    height: 40px;
    min-width: 40px;
    min-height: 40px;
  }

  .header-btn.ai-btn {
    width: 40px;
    height: 40px;
  }

  .user-menu {
    width: 36px;
    height: 36px;
  }

  /* Mobile menu toggle button */
  .mobile-menu-toggle {
    display: flex !important;
    width: 40px;
    height: 40px;
    align-items: center;
    justify-content: center;
    background: transparent;
    border: none;
    color: var(--text-color);
    font-size: 20px;
    cursor: pointer;
    border-radius: var(--radius-sm);
  }

  .mobile-menu-toggle:hover {
    background: var(--bg-color);
  }

  /* --- SIDEBAR MOBILE DRAWER --- */
  .sidebar {
    position: fixed;
    top: 0;
    left: 0;
    height: 100vh;
    width: 280px;
    z-index: 1000;
    transform: translateX(-100%);
    transition: transform 0.3s ease;
    box-shadow: none;
  }

  .sidebar.open {
    transform: translateX(0);
    box-shadow: 4px 0 20px rgba(0, 0, 0, 0.15);
  }

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

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

  .sidebar .nav-item {
    padding: 12px 16px;
    min-height: var(--touch-target);
  }

  .sidebar .nav-link {
    font-size: 15px;
    padding: 12px 16px;
    min-height: var(--touch-target);
  }

  .sidebar .nav-icon {
    font-size: 18px;
    width: 24px;
  }

  /* --- MAIN CONTENT MOBILE --- */
  .main-content {
    margin-left: 0 !important;
    padding: 12px;
    padding-top: calc(var(--header-height) + 12px);
  }

  /* --- DASHBOARD MOBILE --- */
  .dashboard-container {
    padding: 12px;
  }

  .dashboard-header {
    flex-direction: column;
    align-items: flex-start;
    gap: 12px;
    padding: 0 0 12px 0;
  }

  .dashboard-header h1 {
    font-size: 20px;
  }

  .dashboard-stats-row {
    grid-template-columns: 1fr 1fr;
    gap: 8px;
  }

  .stat-card {
    padding: 12px;
  }

  .stat-number {
    font-size: 20px;
  }

  .stat-label {
    font-size: 11px;
  }

  .dashboard-grid {
    grid-template-columns: 1fr;
    gap: 12px;
  }

  .dashboard-card,
  .dashboard-card-lg,
  .dashboard-card-full {
    grid-column: span 1;
  }

  /* --- APPLICATIONS PAGE MOBILE --- */
  .apps-page-fullwidth {
    padding: 12px;
  }

  .apps-header {
    flex-direction: column;
    align-items: flex-start;
    gap: 12px;
  }

  .apps-header h1 {
    font-size: 20px;
  }

  .apps-header-actions {
    width: 100%;
    flex-direction: column;
    gap: 8px;
  }

  .apps-header-actions .search-input,
  .apps-header-actions input[type="text"] {
    width: 100%;
  }

  .apps-header-actions .btn {
    width: 100%;
    justify-content: center;
  }

  .apps-grid {
    grid-template-columns: 1fr;
    gap: 12px;
  }

  .app-card {
    padding: 16px;
  }

  .app-card-header {
    flex-direction: column;
    align-items: flex-start;
    gap: 8px;
  }

  .app-card-title {
    font-size: 15px;
  }

  /* --- SETTINGS PAGE MOBILE --- */
  .settings-fullwidth {
    padding: 12px;
  }

  .settings-header {
    flex-direction: column;
    align-items: flex-start;
    gap: 12px;
    margin-bottom: 16px;
  }

  .settings-header h1 {
    font-size: 20px;
  }

  .settings-layout {
    flex-direction: column;
    gap: 12px;
  }

  .settings-sidebar {
    width: 100%;
    flex-direction: row;
    overflow-x: auto;
    padding-bottom: 8px;
    -webkit-overflow-scrolling: touch;
  }

  .settings-nav {
    display: flex;
    flex-direction: row;
    gap: 4px;
    min-width: max-content;
  }

  .settings-nav-item {
    padding: 10px 16px;
    white-space: nowrap;
    min-height: var(--touch-target);
    border-radius: var(--radius-sm);
  }

  .settings-content {
    width: 100%;
    padding: 16px;
  }

  .settings-section-header {
    flex-direction: column;
    align-items: flex-start;
    gap: 12px;
  }

  .settings-section-header h2 {
    font-size: 18px;
  }

  /* --- APP BUILDER CONTAINER MOBILE --- */
  .app-builder-container {
    flex-direction: column;
    height: auto;
    min-height: calc(100vh - var(--header-height) - 24px);
  }

  /* Hide workspace panel on mobile - replaced by dropdown */
  .workspace-panel {
    display: none !important;
  }

  /* Mobile Section Navigation Dropdown */
  .mobile-section-nav {
    display: block !important;
    padding: 12px 16px;
    background: var(--panel-bg);
    border-bottom: 1px solid var(--border-color);
  }

  .mobile-section-select {
    width: 100%;
    min-height: 48px;
    padding: 12px 40px 12px 16px;
    font-size: 15px;
    font-weight: 500;
    color: var(--text-color);
    background: var(--bg-color);
    border: 1px solid var(--border-color);
    border-radius: var(--radius);
    cursor: pointer;
    appearance: none;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%236b7280' stroke-width='2'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 14px center;
    background-size: 16px;
    transition: var(--transition);
  }

  .mobile-section-select:focus {
    outline: none;
    border-color: var(--primary-color);
    box-shadow: 0 0 0 3px rgba(45, 43, 135, 0.1);
  }

  .mobile-section-select option {
    padding: 12px;
    font-size: 14px;
  }

  .mobile-section-select optgroup {
    font-weight: 600;
    font-size: 13px;
    color: var(--text-muted);
    padding: 8px 0;
  }

  /* Hide breadcrumbs on mobile - section dropdown replaces them */
  .breadcrumbs {
    display: none;
  }

  .content-panel {
    flex: 1;
    padding: 16px;
    overflow-y: auto;
  }

  /* --- AI PANEL MOBILE --- */
  .ai-panel {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    width: 100%;
    height: 100%;
    z-index: 1001;
    transform: translateX(100%);
    transition: transform 0.3s ease;
    background: var(--panel-bg);
    display: flex;
    flex-direction: column;
  }

  .ai-panel.collapsed {
    transform: translateX(100%);
  }

  .ai-panel:not(.collapsed) {
    transform: translateX(0);
  }

  .ai-panel-content {
    flex: 1;
    display: flex;
    flex-direction: column;
    height: 100%;
    overflow: hidden;
  }

  /* AI Chat Header - Mobile */
  .ai-chat-header {
    position: sticky;
    top: 0;
    z-index: 10;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 12px 16px;
    padding-top: max(12px, env(safe-area-inset-top));
    background: var(--panel-bg);
    border-bottom: 1px solid var(--border-color);
    flex-shrink: 0;
    min-height: 56px;
  }

  .ai-chat-header-left {
    flex: 1;
    display: flex;
    align-items: center;
    gap: 10px;
    min-width: 0;
  }

  .ai-chat-icon {
    width: 28px;
    height: 28px;
  }

  .ai-conversation-select {
    flex: 1;
    min-width: 0;
    max-width: none;
    font-size: 14px;
    padding: 8px 12px;
    height: 40px;
  }

  .ai-chat-header-actions {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-shrink: 0;
  }

  /* Mobile close button - large touch target */
  .ai-close-btn {
    width: 44px;
    height: 44px;
    min-width: 44px;
    min-height: 44px;
    border: none;
    background: var(--bg-color);
    color: var(--text-color);
    cursor: pointer;
    border-radius: var(--radius);
    display: flex !important;
    align-items: center;
    justify-content: center;
    font-size: 18px;
    transition: var(--transition);
  }

  .ai-close-btn:hover,
  .ai-close-btn:active {
    background: var(--border-color);
    color: var(--text-color);
  }

  /* New chat button - larger touch target */
  .ai-new-chat-btn {
    width: 40px;
    height: 40px;
    min-width: 40px;
    font-size: 14px;
  }

  /* AI Chat Content - Mobile */
  .ai-chat-content {
    flex: 1;
    display: flex;
    flex-direction: column;
    overflow: hidden;
    min-height: 0;
  }

  /* Chat tab container fills remaining space */
  .gbos-chat-tab {
    flex: 1;
    display: flex;
    flex-direction: column;
    overflow: hidden;
    min-height: 0;
  }

  /* Ensure chat messages area is scrollable */
  .ai-panel .chat-messages,
  .ai-panel [class*="chat-messages"],
  .ai-panel [class*="messages-container"] {
    flex: 1;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    padding: 16px;
    padding-bottom: max(16px, env(safe-area-inset-bottom));
  }

  /* Chat input area - fixed at bottom */
  .ai-panel .chat-input-area,
  .ai-panel [class*="chat-input"],
  .ai-panel [class*="input-area"] {
    position: sticky;
    bottom: 0;
    background: var(--panel-bg);
    border-top: 1px solid var(--border-color);
    padding: 12px 16px;
    padding-bottom: max(12px, env(safe-area-inset-bottom));
    flex-shrink: 0;
  }

  /* Chat input field - larger for mobile */
  .ai-panel input[type="text"],
  .ai-panel textarea {
    width: 100%;
    min-height: 44px;
    font-size: 16px; /* Prevents iOS zoom */
    padding: 12px;
    border-radius: var(--radius);
  }

  /* Send button - touch friendly */
  .ai-panel .send-btn,
  .ai-panel button[type="submit"],
  .ai-panel [class*="send-button"] {
    min-width: 44px;
    min-height: 44px;
  }

  .ai-panel-header {
    padding: 12px 16px;
  }

  .ai-panel-close {
    display: flex !important;
  }

  /* --- CARDS MOBILE --- */
  .card {
    padding: 12px;
    margin-bottom: 12px;
  }

  .card-header {
    padding: 12px;
    flex-direction: column;
    align-items: flex-start;
    gap: 8px;
  }

  .card-header-actions {
    width: 100%;
    display: flex;
    gap: 8px;
  }

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

  .card-title {
    font-size: 15px;
  }

  .card-body {
    padding: 12px;
  }

  .card-footer {
    padding: 12px;
  }

  /* --- SECTION HEADERS MOBILE --- */
  .section-header {
    flex-direction: column;
    align-items: flex-start;
    gap: 12px;
    margin-bottom: 16px;
  }

  .section-header h2 {
    font-size: 18px;
  }

  .section-header-actions {
    width: 100%;
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
  }

  .section-header-actions .btn {
    flex: 1;
    min-width: 120px;
    justify-content: center;
  }

  /* --- MODALS MOBILE --- */
  .modal-overlay {
    padding: 0;
    align-items: flex-end;
  }

  .modal {
    width: 100% !important;
    max-width: 100% !important;
    max-height: 90vh;
    margin: 0;
    border-radius: var(--radius-lg) var(--radius-lg) 0 0;
    animation: slideUp 0.3s ease;
  }

  @keyframes slideUp {
    from {
      transform: translateY(100%);
      opacity: 0;
    }
    to {
      transform: translateY(0);
      opacity: 1;
    }
  }

  .modal-header {
    padding: 16px;
    position: sticky;
    top: 0;
    background: var(--panel-bg);
    z-index: 1;
  }

  .modal-title {
    font-size: 17px;
  }

  .modal-close {
    width: 36px;
    height: 36px;
    min-width: 36px;
    font-size: 18px;
  }

  .modal-body {
    padding: 16px;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
  }

  .modal-footer {
    padding: 16px;
    position: sticky;
    bottom: 0;
    background: var(--panel-bg);
    flex-direction: column;
    gap: 8px;
  }

  .modal-footer .btn {
    width: 100%;
    justify-content: center;
    min-height: var(--touch-target);
  }

  /* Modal tabs mobile */
  .modal-tabs {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    padding: 0 16px;
    gap: 0;
  }

  .modal-tab {
    padding: 12px 16px;
    white-space: nowrap;
    min-height: var(--touch-target);
  }

  /* --- FORMS MOBILE --- */
  .form-group {
    margin-bottom: 16px;
  }

  .form-row {
    flex-direction: column;
    gap: 16px;
  }

  .form-row > * {
    width: 100%;
  }

  .form-label {
    font-size: 13px;
    margin-bottom: 6px;
  }

  .form-input,
  .form-select,
  .form-textarea,
  input[type="text"],
  input[type="email"],
  input[type="password"],
  input[type="number"],
  input[type="url"],
  input[type="date"],
  input[type="time"],
  select,
  textarea {
    width: 100%;
    min-height: var(--touch-target);
    padding: 12px;
    font-size: 16px; /* Prevents iOS zoom on focus */
    border-radius: var(--radius-sm);
  }

  textarea.form-textarea,
  textarea {
    min-height: 100px;
  }

  .form-hint {
    font-size: 12px;
  }

  /* Form inline groups stack on mobile */
  .form-inline {
    flex-direction: column;
    gap: 16px;
  }

  .form-inline > * {
    width: 100%;
  }

  /* --- BUTTONS MOBILE --- */
  .btn {
    min-height: var(--touch-target);
    padding: 12px 16px;
    font-size: 14px;
  }

  .btn.sm,
  .btn-sm {
    min-height: 38px;
    padding: 8px 12px;
    font-size: 13px;
  }

  .btn.xs,
  .btn-xs {
    min-height: 32px;
    padding: 6px 10px;
    font-size: 12px;
  }

  .btn-icon {
    width: var(--touch-target);
    height: var(--touch-target);
    min-width: var(--touch-target);
  }

  .btn-group {
    flex-direction: column;
    gap: 8px;
  }

  .btn-group .btn {
    width: 100%;
    justify-content: center;
  }

  /* --- TABLES MOBILE --- */
  .table-responsive {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    margin: 0 -12px;
    padding: 0 12px;
  }

  .table {
    min-width: 600px;
  }

  .table th,
  .table td {
    padding: 12px 8px;
    font-size: 13px;
  }

  .table th:first-child,
  .table td:first-child {
    padding-left: 12px;
  }

  .table th:last-child,
  .table td:last-child {
    padding-right: 12px;
  }

  /* Card-based table alternative for mobile */
  .table-cards-mobile {
    display: block;
  }

  .table-cards-mobile thead {
    display: none;
  }

  .table-cards-mobile tbody {
    display: flex;
    flex-direction: column;
    gap: 12px;
  }

  .table-cards-mobile tr {
    display: flex;
    flex-direction: column;
    background: var(--panel-bg);
    border: 1px solid var(--border-color);
    border-radius: var(--radius);
    padding: 12px;
    gap: 8px;
  }

  .table-cards-mobile td {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 4px 0;
    border: none;
  }

  .table-cards-mobile td::before {
    content: attr(data-label);
    font-weight: 500;
    color: var(--text-muted);
    font-size: 12px;
  }

  /* --- GRIDS MOBILE --- */
  .grid,
  .grid-2,
  .grid-3,
  .grid-4 {
    grid-template-columns: 1fr;
    gap: 12px;
  }

  .col-span-2,
  .col-span-3,
  .col-span-4 {
    grid-column: span 1;
  }

  /* --- TABS MOBILE --- */
  .tabs {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    padding-bottom: 2px;
  }

  .tabs-list {
    display: flex;
    gap: 0;
    min-width: max-content;
  }

  .tab-btn,
  .tab-item {
    padding: 12px 16px;
    white-space: nowrap;
    min-height: var(--touch-target);
    font-size: 14px;
  }

  .tab-content {
    padding: 16px 0;
  }

  /* --- LIST ITEMS MOBILE --- */
  .list-item {
    flex-direction: column;
    align-items: flex-start;
    gap: 12px;
    padding: 12px;
  }

  .list-item-actions {
    width: 100%;
    display: flex;
    gap: 8px;
  }

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

  /* --- BADGES & TAGS MOBILE --- */
  .badge,
  .tag,
  .status-badge {
    font-size: 11px;
    padding: 4px 8px;
  }

  /* --- DROPDOWNS MOBILE --- */
  .dropdown-menu {
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    top: auto;
    width: 100%;
    max-width: 100%;
    max-height: 60vh;
    border-radius: var(--radius-lg) var(--radius-lg) 0 0;
    animation: slideUp 0.3s ease;
  }

  .dropdown-item {
    padding: 14px 16px;
    min-height: var(--touch-target);
  }

  /* --- NOTIFICATION DROPDOWN MOBILE --- */
  .notification-dropdown {
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    top: auto;
    width: 100%;
    max-height: 70vh;
    border-radius: var(--radius-lg) var(--radius-lg) 0 0;
  }

  .notification-item {
    padding: 14px 16px;
  }

  /* --- ACCOUNT SWITCHER MOBILE --- */
  .account-switcher-trigger {
    max-width: 120px;
    padding: 5px 8px;
    font-size: 12px;
  }

  .account-switcher-dropdown {
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    top: auto;
    width: 100%;
    max-height: 60vh;
    border-radius: 16px 16px 0 0;
    box-shadow: 0 -4px 24px rgba(0,0,0,0.15);
  }

  /* --- USER DROPDOWN MOBILE --- */
  .user-dropdown {
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    top: auto;
    width: 100%;
    max-height: 70vh;
    border-radius: var(--radius-lg) var(--radius-lg) 0 0;
  }

  /* --- TREE VIEW MOBILE --- */
  .tree-item {
    padding: 10px 12px;
    min-height: var(--touch-target);
  }

  .tree-item-label {
    font-size: 13px;
  }

  .tree-toggle {
    width: 24px;
    height: 24px;
  }

  /* --- APP OVERVIEW MOBILE --- */
  .app-overview-header {
    flex-direction: column;
    gap: 12px;
    padding: 16px;
  }

  .app-overview-title {
    font-size: 18px;
  }

  .app-overview-tabs {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
  }

  .app-overview-tabs .tab-btn {
    padding: 12px 16px;
    white-space: nowrap;
  }

  .info-grid {
    grid-template-columns: 1fr;
    gap: 12px;
  }

  .info-item {
    padding: 12px;
  }

  .info-label {
    font-size: 11px;
  }

  .info-value {
    font-size: 13px;
  }

  /* --- FEATURES PAGE MOBILE --- */
  .features-header {
    flex-direction: column;
    gap: 12px;
  }

  .features-list {
    gap: 12px;
  }

  .feature-card {
    padding: 12px;
  }

  .feature-header {
    flex-direction: column;
    align-items: flex-start;
    gap: 8px;
  }

  .feature-actions {
    width: 100%;
    display: flex;
    gap: 8px;
  }

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

  /* --- DATA MODELS PAGE MOBILE --- */
  .data-models-header {
    flex-direction: column;
    gap: 12px;
  }

  .entity-card {
    padding: 12px;
  }

  .entity-header {
    flex-direction: column;
    align-items: flex-start;
    gap: 8px;
  }

  .entity-fields {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
  }

  /* --- TIMELINE MOBILE --- */
  .timeline {
    padding-left: 20px;
  }

  .timeline-item {
    padding-left: 24px;
    padding-bottom: 20px;
  }

  .timeline-marker {
    left: -20px;
    width: 10px;
    height: 10px;
  }

  .timeline-content {
    padding: 12px;
  }

  .timeline-title {
    font-size: 14px;
  }

  .timeline-date {
    font-size: 12px;
  }

  /* --- TEAM MEMBERS MOBILE --- */
  .team-grid {
    grid-template-columns: 1fr;
    gap: 12px;
  }

  .team-card {
    padding: 12px;
  }

  .team-avatar {
    width: 48px;
    height: 48px;
    font-size: 18px;
  }

  /* --- RISKS PAGE MOBILE --- */
  .risks-grid {
    grid-template-columns: 1fr;
    gap: 12px;
  }

  .risk-card {
    padding: 12px;
  }

  .risk-header {
    flex-direction: column;
    align-items: flex-start;
    gap: 8px;
  }

  .risk-matrix {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
  }

  /* --- INTEGRATIONS PAGE MOBILE --- */
  .integrations-grid {
    grid-template-columns: 1fr;
    gap: 12px;
  }

  .integration-card {
    padding: 12px;
  }

  /* --- ARCHITECTURE PAGE MOBILE --- */
  .architecture-diagram {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
  }

  .component-card {
    padding: 12px;
  }

  /* --- ENV SETUP / AGENT PAGES MOBILE --- */
  .agent-container {
    padding: 12px;
  }

  .agent-header {
    flex-direction: column;
    gap: 12px;
  }

  .agent-title {
    font-size: 18px;
  }

  .agent-controls {
    width: 100%;
    flex-direction: column;
    gap: 8px;
  }

  .agent-controls .btn {
    width: 100%;
    justify-content: center;
  }

  .agent-output {
    font-size: 12px;
    padding: 12px;
  }

  .terminal-output {
    font-size: 11px;
    padding: 12px;
    max-height: 300px;
  }

  /* --- BILLING PAGE MOBILE --- */
  .billing-header {
    flex-direction: column;
    gap: 12px;
  }

  .billing-stats {
    grid-template-columns: 1fr;
    gap: 12px;
  }

  .billing-card {
    padding: 12px;
  }

  .chart-container {
    height: 250px;
  }

  /* --- GUARDRAILS PAGE MOBILE --- */
  .guardrails-list {
    gap: 12px;
  }

  .guardrail-item {
    padding: 12px;
  }

  .guardrail-header {
    flex-direction: column;
    align-items: flex-start;
    gap: 8px;
  }

  /* --- EMPTY STATES MOBILE --- */
  .empty-state {
    padding: 32px 16px;
  }

  .empty-state-icon {
    font-size: 48px;
  }

  .empty-state-title {
    font-size: 16px;
  }

  .empty-state-text {
    font-size: 13px;
  }

  /* --- LOADING STATES MOBILE --- */
  .loading-spinner {
    width: 32px;
    height: 32px;
  }

  /* --- BREADCRUMBS MOBILE --- */
  .breadcrumbs {
    display: none;
  }

  /* Show condensed breadcrumb on mobile */
  .breadcrumb-mobile {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 13px;
    color: var(--text-muted);
  }

  /* --- PAGINATION MOBILE --- */
  .pagination {
    flex-wrap: wrap;
    justify-content: center;
    gap: 4px;
  }

  .pagination-btn {
    min-width: 40px;
    min-height: 40px;
    padding: 8px;
  }

  /* --- SEARCH RESULTS MOBILE --- */
  .search-results {
    max-height: 60vh;
  }

  .search-result-item {
    padding: 12px;
  }

  /* --- TOAST NOTIFICATIONS MOBILE --- */
  .toast-container {
    left: 12px;
    right: 12px;
    bottom: 12px;
    max-width: none;
  }

  .toast {
    padding: 12px 16px;
    font-size: 13px;
  }

  /* --- COLLABORATORS MODAL MOBILE --- */
  .collab-list {
    gap: 12px;
  }

  .collab-item {
    flex-direction: column;
    align-items: flex-start;
    gap: 8px;
    padding: 12px;
  }

  .collab-actions {
    width: 100%;
    display: flex;
    gap: 8px;
  }

  /* --- SCROLL INDICATORS --- */
  .scroll-indicator-left,
  .scroll-indicator-right {
    display: none;
  }

  /* --- HIDE DESKTOP-ONLY ELEMENTS --- */
  .desktop-only {
    display: none !important;
  }

  /* --- SHOW MOBILE-ONLY ELEMENTS --- */
  .mobile-only {
    display: block !important;
  }

  /* --- HORIZONTAL SCROLL CONTAINERS --- */
  .horizontal-scroll {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    -ms-overflow-style: none;
  }

  .horizontal-scroll::-webkit-scrollbar {
    display: none;
  }

  /* --- VIEW PAGE SPECIFIC MOBILE --- */
  .view-page-header {
    flex-direction: column;
    gap: 12px;
    padding: 12px 0;
  }

  .view-page-header h1 {
    font-size: 20px;
  }

  .view-page-actions {
    width: 100%;
    flex-direction: column;
    gap: 8px;
  }

  .view-page-actions .btn {
    width: 100%;
    justify-content: center;
  }

  /* --- SECTION FORMS MOBILE --- */
  .section-form {
    padding: 12px;
  }

  .section-form-header {
    flex-direction: column;
    gap: 8px;
  }

  .section-form-title {
    font-size: 15px;
  }

  /* --- INFO CARDS MOBILE --- */
  .info-card {
    padding: 12px;
  }

  .info-card-header {
    flex-direction: column;
    gap: 8px;
  }

  .info-card-title {
    font-size: 14px;
  }

  /* --- STATUS INDICATORS MOBILE --- */
  .status-indicator {
    padding: 6px 10px;
    font-size: 11px;
  }

  /* --- PROGRESS BARS MOBILE --- */
  .progress-bar {
    height: 8px;
  }

  .progress-label {
    font-size: 12px;
  }

  /* --- WIZARD MOBILE --- */
  .wizard-steps {
    flex-direction: column;
    gap: 8px;
  }

  .wizard-step {
    padding: 12px;
    flex-direction: row;
    justify-content: flex-start;
    gap: 12px;
  }

  .wizard-step-number {
    width: 32px;
    height: 32px;
    font-size: 14px;
  }

  .wizard-step-label {
    font-size: 13px;
  }

  .wizard-content {
    padding: 16px;
  }

  .wizard-footer {
    flex-direction: column;
    gap: 8px;
    padding: 16px;
  }

  .wizard-footer .btn {
    width: 100%;
  }
}

/* ========================================
   Small Mobile Breakpoint (480px and below)
   ======================================== */
@media (max-width: 480px) {
  /* Extra small adjustments */
  .header {
    padding: 0 8px;
  }

  .main-content {
    padding: 8px;
  }

  .card,
  .modal-body,
  .modal-header,
  .modal-footer {
    padding: 12px;
  }

  .dashboard-stats-row {
    grid-template-columns: 1fr;
  }

  .stat-card {
    padding: 10px;
  }

  .stat-number {
    font-size: 18px;
  }

  .btn {
    padding: 10px 14px;
    font-size: 13px;
  }

  .form-input,
  .form-select,
  input[type="text"],
  input[type="email"],
  select {
    padding: 10px;
  }

  .modal-title {
    font-size: 16px;
  }

  .section-header h2,
  .card-title {
    font-size: 15px;
  }

  .app-card-title,
  .feature-title {
    font-size: 14px;
  }

  /* Hide secondary action buttons on very small screens */
  .btn-group .btn:not(:first-child):not(:last-child) {
    display: none;
  }
}

/* ========================================
   Touch Device Enhancements
   ======================================== */
@media (pointer: coarse) {
  /* Increase touch targets for touch devices */
  .btn,
  .nav-link,
  .tab-btn,
  .dropdown-item,
  .list-item,
  .tree-item {
    min-height: 44px;
  }

  /* Remove hover effects that don't work well on touch */
  .btn:hover,
  .card:hover,
  .list-item:hover {
    transform: none;
  }

  /* Add active states for touch feedback */
  .btn:active {
    transform: scale(0.98);
    opacity: 0.9;
  }

  .card:active,
  .list-item:active {
    background: var(--bg-color);
  }

  /* Disable text selection on interactive elements */
  .btn,
  .nav-link,
  .tab-btn {
    -webkit-user-select: none;
    user-select: none;
  }
}

/* ========================================
   Landscape Mobile
   ======================================== */
@media (max-width: 896px) and (orientation: landscape) {
  .modal {
    max-height: 85vh;
  }

  .sidebar.open {
    height: 100vh;
  }

  .ai-panel.open {
    height: 100vh;
  }

  .notification-dropdown,
  .user-dropdown {
    max-height: 80vh;
  }
}

/* ========================================
   Print Styles
   ======================================== */
@media print {
  .sidebar,
  .header,
  .ai-panel,
  .modal-overlay,
  .btn,
  .toast-container {
    display: none !important;
  }

  .main-content {
    margin: 0;
    padding: 0;
  }

  .card {
    break-inside: avoid;
    box-shadow: none;
    border: 1px solid #ddd;
  }
}

/* ========================================
   Safe Area Insets (for notched devices)
   ======================================== */
@supports (padding: max(0px)) {
  @media (max-width: 768px) {
    .header {
      padding-left: max(12px, env(safe-area-inset-left));
      padding-right: max(12px, env(safe-area-inset-right));
    }

    .sidebar {
      padding-bottom: max(16px, env(safe-area-inset-bottom));
    }

    .modal {
      padding-bottom: max(16px, env(safe-area-inset-bottom));
    }

    .modal-footer {
      padding-bottom: max(16px, env(safe-area-inset-bottom));
    }

    .main-content {
      padding-left: max(12px, env(safe-area-inset-left));
      padding-right: max(12px, env(safe-area-inset-right));
      padding-bottom: max(12px, env(safe-area-inset-bottom));
    }
  }
}

/* ============================================
   REQUIREMENTS HUB STYLES
   ============================================ */

.requirements-hub {
  display: flex;
  flex-direction: column;
  height: 100%;
  min-height: calc(100vh - 180px);
  background: var(--bg-secondary, #f8fafc);
}

/* Hub Header */
.hub-header {
  background: white;
  border-bottom: 1px solid var(--border-color);
  padding: 20px 24px 0;
}

.hub-title-row {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 24px;
  margin-bottom: 20px;
}

.hub-title h1 {
  font-size: 24px;
  font-weight: 700;
  color: var(--text-primary);
  margin: 0 0 8px 0;
}

.hub-stats {
  display: flex;
  align-items: center;
  gap: 12px;
  font-size: 13px;
  color: var(--text-muted);
}

.hub-stats .stat-value {
  font-weight: 600;
  color: var(--text-primary);
}

.hub-stats .stat-divider {
  width: 4px;
  height: 4px;
  border-radius: 50%;
  background: var(--border-color);
}

.hub-actions {
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
}

.hub-actions .btn.accent {
  background: linear-gradient(135deg, #8b5cf6 0%, #6366f1 100%);
  color: white;
}

.hub-actions .btn.accent:hover {
  background: linear-gradient(135deg, #7c3aed 0%, #4f46e5 100%);
}

/* Hub Toolbar */
.hub-toolbar {
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 16px 0;
  flex-wrap: wrap;
}

.hub-search {
  position: relative;
  flex: 1;
  min-width: 200px;
  max-width: 400px;
}

.hub-search i {
  position: absolute;
  left: 12px;
  top: 50%;
  transform: translateY(-50%);
  color: var(--text-muted);
  font-size: 14px;
}

.hub-search input {
  width: 100%;
  padding: 10px 12px 10px 38px;
  border: 1px solid var(--border-color);
  border-radius: 8px;
  font-size: 14px;
  background: var(--bg-secondary);
  transition: all 0.2s;
}

.hub-search input:focus {
  outline: none;
  border-color: var(--primary-color);
  background: white;
  box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.1);
}

.hub-filters {
  display: flex;
  gap: 10px;
}

.filter-select {
  padding: 8px 32px 8px 12px;
  border: 1px solid var(--border-color);
  border-radius: 8px;
  font-size: 13px;
  background: white;
  cursor: pointer;
  min-width: 120px;
}

.hub-view-toggle {
  display: flex;
  background: var(--bg-secondary);
  border-radius: 8px;
  padding: 4px;
  gap: 4px;
}

.view-btn {
  padding: 8px 16px;
  border: none;
  background: transparent;
  border-radius: 6px;
  font-size: 13px;
  font-weight: 500;
  color: var(--text-muted);
  cursor: pointer;
  display: flex;
  align-items: center;
  gap: 6px;
  transition: all 0.2s;
}

.view-btn.active {
  background: white;
  color: var(--text-primary);
  box-shadow: 0 1px 3px rgba(0,0,0,0.1);
}

/* Hub Tabs */
.hub-tabs {
  display: flex;
  gap: 4px;
  border-top: 1px solid var(--border-color);
  margin: 0 -24px;
  padding: 0 24px;
}

.hub-tab {
  padding: 14px 20px;
  border: none;
  background: transparent;
  font-size: 14px;
  font-weight: 500;
  color: var(--text-muted);
  cursor: pointer;
  display: flex;
  align-items: center;
  gap: 8px;
  border-bottom: 2px solid transparent;
  margin-bottom: -1px;
  transition: all 0.2s;
}

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

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

.tab-count {
  background: var(--bg-secondary);
  padding: 2px 8px;
  border-radius: 10px;
  font-size: 12px;
  font-weight: 600;
}

.hub-tab.active .tab-count {
  background: rgba(59, 130, 246, 0.1);
  color: var(--primary-color);
}

/* Hub Content */
.hub-content {
  flex: 1;
  overflow: hidden;
}

/* Split View */
.hub-split-view {
  display: grid;
  grid-template-columns: 340px 1fr;
  height: 100%;
  gap: 0;
}

/* Tree Pane */
.hub-tree-pane {
  background: white;
  border-right: 1px solid var(--border-color);
  display: flex;
  flex-direction: column;
  overflow: hidden;
}

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

.tree-title {
  font-size: 13px;
  font-weight: 600;
  color: var(--text-muted);
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

.tree-content {
  flex: 1;
  overflow-y: auto;
  padding: 12px;
}

.tree-filter-notice {
  background: #fef3c7;
  color: #92400e;
  padding: 10px 14px;
  border-radius: 8px;
  font-size: 13px;
  margin-bottom: 12px;
  display: flex;
  align-items: center;
  gap: 8px;
}

.clear-filters-btn {
  margin-left: auto;
  background: none;
  border: none;
  color: #92400e;
  font-weight: 600;
  cursor: pointer;
  text-decoration: underline;
}

/* Capability Node */
.tree-capability {
  margin-bottom: 8px;
}

.capability-header {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 12px;
  border-radius: 10px;
  cursor: pointer;
  transition: all 0.15s;
}

.capability-header:hover {
  background: var(--bg-secondary);
}

.tree-capability.selected .capability-header {
  background: rgba(59, 130, 246, 0.08);
}

.toggle-icon {
  color: var(--text-muted);
  font-size: 10px;
  width: 16px;
  text-align: center;
}

.capability-icon {
  width: 36px;
  height: 36px;
  border-radius: 10px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 14px;
}

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

.capability-name {
  font-weight: 600;
  font-size: 14px;
  color: var(--text-primary);
  display: block;
  margin-bottom: 2px;
}

.capability-meta {
  display: flex;
  gap: 8px;
  font-size: 12px;
  color: var(--text-muted);
}

.capability-meta .meta-item.must {
  color: #ef4444;
}

.capability-meta .meta-item.approved {
  color: #10b981;
}

.capability-actions {
  opacity: 0;
  transition: opacity 0.15s;
}

.capability-header:hover .capability-actions {
  opacity: 1;
}

/* Tree Children */
.tree-children {
  margin-left: 26px;
  padding-left: 16px;
  border-left: 2px solid var(--border-color);
}

/* Requirement Node */
.tree-requirement {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  padding: 10px 12px;
  border-radius: 8px;
  cursor: pointer;
  transition: all 0.15s;
  margin-bottom: 4px;
}

.tree-requirement:hover {
  background: var(--bg-secondary);
}

.tree-requirement.selected {
  background: rgba(59, 130, 246, 0.1);
}

.requirement-indicator {
  width: 4px;
  height: 100%;
  min-height: 32px;
  border-radius: 2px;
  flex-shrink: 0;
}

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

.requirement-title {
  font-size: 13px;
  color: var(--text-primary);
  line-height: 1.4;
  display: block;
  margin-bottom: 4px;
}

.requirement-badges {
  display: flex;
  gap: 6px;
}

.badge-priority {
  font-size: 10px;
  font-weight: 700;
  padding: 2px 6px;
  border-radius: 4px;
}

.badge-status {
  font-size: 11px;
  color: var(--text-muted);
}

.badge-status.approved { color: #10b981; }
.badge-status.review { color: #f59e0b; }
.badge-status.blocked { color: #ef4444; }

/* Tree Add Buttons */
.tree-add-btn {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 8px 12px;
  background: transparent;
  border: 1px dashed var(--border-color);
  border-radius: 8px;
  font-size: 12px;
  color: var(--text-muted);
  cursor: pointer;
  width: 100%;
  margin-top: 8px;
  transition: all 0.2s;
}

.tree-add-btn:hover {
  border-color: var(--primary-color);
  color: var(--primary-color);
  background: rgba(59, 130, 246, 0.05);
}

.tree-add-capability-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 14px;
  background: var(--bg-secondary);
  border: 2px dashed var(--border-color);
  border-radius: 10px;
  font-size: 13px;
  font-weight: 500;
  color: var(--text-muted);
  cursor: pointer;
  width: 100%;
  margin-top: 16px;
  transition: all 0.2s;
}

.tree-add-capability-btn:hover {
  border-color: var(--primary-color);
  color: var(--primary-color);
  background: rgba(59, 130, 246, 0.05);
}

/* Tree Section (Ungrouped) */
.tree-section {
  margin-bottom: 8px;
}

.tree-section-header {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 12px;
  border-radius: 10px;
  cursor: pointer;
  transition: all 0.15s;
}

.tree-section-header:hover {
  background: var(--bg-secondary);
}

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

.section-name {
  flex: 1;
  font-weight: 600;
  font-size: 14px;
  color: var(--text-primary);
}

.section-count {
  font-size: 12px;
  color: var(--text-muted);
  background: var(--bg-secondary);
  padding: 2px 8px;
  border-radius: 10px;
}

/* Detail Pane */
.hub-detail-pane {
  background: var(--bg-secondary);
  overflow-y: auto;
  padding: 24px;
}

/* Empty State */
.hub-empty-state {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  height: 100%;
  text-align: center;
  padding: 48px;
}

.empty-illustration {
  width: 80px;
  height: 80px;
  border-radius: 50%;
  background: linear-gradient(135deg, #e0e7ff 0%, #c7d2fe 100%);
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 24px;
}

.empty-illustration i {
  font-size: 32px;
  color: #6366f1;
}

.hub-empty-state h3 {
  font-size: 18px;
  font-weight: 600;
  color: var(--text-primary);
  margin: 0 0 8px 0;
}

.hub-empty-state p {
  font-size: 14px;
  color: var(--text-muted);
  margin: 0 0 32px 0;
}

.empty-actions {
  display: flex;
  gap: 16px;
  flex-wrap: wrap;
  justify-content: center;
}

.capture-mode-btn {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  padding: 24px 32px;
  background: white;
  border: 1px solid var(--border-color);
  border-radius: 16px;
  cursor: pointer;
  transition: all 0.2s;
  min-width: 160px;
}

.capture-mode-btn:hover {
  border-color: var(--primary-color);
  box-shadow: 0 4px 12px rgba(59, 130, 246, 0.15);
  transform: translateY(-2px);
}

.capture-mode-btn i {
  font-size: 24px;
  color: var(--primary-color);
}

.capture-mode-btn .mode-title {
  font-size: 14px;
  font-weight: 600;
  color: var(--text-primary);
}

.capture-mode-btn .mode-desc {
  font-size: 12px;
  color: var(--text-muted);
}

/* Capture Panel */
.capture-panel {
  background: white;
  border-radius: 16px;
  box-shadow: 0 4px 24px rgba(0,0,0,0.08);
  max-width: 600px;
  margin: 0 auto;
}

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

.capture-header h3 {
  font-size: 18px;
  font-weight: 600;
  margin: 0;
  display: flex;
  align-items: center;
  gap: 10px;
}

.capture-header h3 i {
  color: var(--primary-color);
}

.capture-body {
  padding: 24px;
}

.capture-footer {
  display: flex;
  justify-content: flex-end;
  gap: 12px;
  padding: 16px 24px;
  border-top: 1px solid var(--border-color);
  background: var(--bg-secondary);
  border-radius: 0 0 16px 16px;
}

/* Requirement Detail */
.requirement-detail {
  background: white;
  border-radius: 16px;
  box-shadow: 0 4px 24px rgba(0,0,0,0.08);
}

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

.detail-type {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 6px 14px;
  border-radius: 8px;
  font-size: 13px;
  font-weight: 600;
}

.detail-actions {
  display: flex;
  gap: 8px;
}

.detail-title-row {
  padding: 20px 24px 0;
}

.detail-title-input {
  width: 100%;
  border: none;
  font-size: 20px;
  font-weight: 600;
  color: var(--text-primary);
  padding: 0;
  background: transparent;
}

.detail-title-input:focus {
  outline: none;
}

.detail-meta-row {
  display: flex;
  gap: 16px;
  padding: 20px 24px;
  flex-wrap: wrap;
}

.meta-field {
  flex: 1;
  min-width: 120px;
}

.meta-field label {
  display: block;
  font-size: 12px;
  font-weight: 500;
  color: var(--text-muted);
  margin-bottom: 6px;
}

/* Detail Sections */
.detail-sections {
  padding: 0 24px;
}

.detail-section {
  border: 1px solid var(--border-color);
  border-radius: 10px;
  margin-bottom: 12px;
  overflow: hidden;
}

.detail-section .section-header {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 14px 16px;
  cursor: pointer;
  background: var(--bg-secondary);
  font-weight: 500;
  font-size: 14px;
  color: var(--text-primary);
  transition: background 0.15s;
}

.detail-section .section-header:hover {
  background: #e2e8f0;
}

.detail-section .section-count {
  margin-left: auto;
  font-size: 12px;
  color: var(--text-muted);
  background: white;
  padding: 2px 8px;
  border-radius: 10px;
}

.detail-section .section-content {
  padding: 16px;
}

.detail-section.expanded .section-header {
  border-bottom: 1px solid var(--border-color);
}

/* Criteria List */
.criteria-list {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.criteria-item {
  display: flex;
  align-items: center;
  gap: 10px;
}

.criteria-item i {
  color: #10b981;
}

.criteria-input {
  flex: 1;
  border: 1px solid var(--border-color);
  border-radius: 6px;
  padding: 8px 12px;
  font-size: 13px;
}

.criteria-input:focus {
  outline: none;
  border-color: var(--primary-color);
}

.add-criteria-btn {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 8px 12px;
  background: transparent;
  border: 1px dashed var(--border-color);
  border-radius: 6px;
  font-size: 13px;
  color: var(--text-muted);
  cursor: pointer;
  margin-top: 8px;
  transition: all 0.2s;
}

.add-criteria-btn:hover {
  border-color: var(--primary-color);
  color: var(--primary-color);
}

/* Detail Footer */
.detail-footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 16px 24px;
  border-top: 1px solid var(--border-color);
  background: var(--bg-secondary);
  border-radius: 0 0 16px 16px;
}

.detail-meta-info {
  font-size: 12px;
  color: var(--text-muted);
}

/* Guided Capture */
.guided-steps {
  min-height: 300px;
}

.guided-step {
  display: none;
  gap: 16px;
}

.guided-step.active {
  display: flex;
}

.step-number {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  background: var(--primary-color);
  color: white;
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 700;
  flex-shrink: 0;
}

.step-content {
  flex: 1;
}

.type-cards, .priority-cards {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 12px;
  margin-top: 12px;
}

.type-card, .priority-card {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  padding: 20px 16px;
  background: white;
  border: 2px solid var(--border-color);
  border-radius: 12px;
  cursor: pointer;
  transition: all 0.2s;
}

.type-card:hover, .priority-card:hover {
  border-color: var(--primary-color);
}

.type-card.selected, .priority-card.selected {
  border-color: var(--primary-color);
  background: rgba(59, 130, 246, 0.05);
}

.type-card i {
  font-size: 24px;
}

.priority-card {
  --priority-color: #3b82f6;
}

.priority-badge {
  font-size: 12px;
  font-weight: 700;
  padding: 4px 10px;
  border-radius: 6px;
  background: var(--priority-color);
  color: white;
}

/* AI Capture */
.ai-input-area {
  margin-bottom: 20px;
}

.ai-upload-hint {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 12px;
  border: 1px dashed var(--border-color);
  border-radius: 8px;
  margin-top: 12px;
  font-size: 13px;
  color: var(--text-muted);
}

.ai-options {
  background: var(--bg-secondary);
  padding: 16px;
  border-radius: 10px;
}

.checkbox-group {
  display: flex;
  flex-direction: column;
  gap: 10px;
  margin-top: 10px;
}

.checkbox-item {
  display: flex;
  align-items: center;
  gap: 10px;
  cursor: pointer;
  font-size: 14px;
}

/* Features Tab */
.features-tab-content {
  padding: 24px;
  height: 100%;
}

.features-empty {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  height: 100%;
  text-align: center;
}

.features-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
  gap: 20px;
}

.feature-card {
  background: white;
  border-radius: 12px;
  padding: 20px;
  box-shadow: 0 2px 8px rgba(0,0,0,0.06);
  transition: all 0.2s;
}

.feature-card:hover {
  box-shadow: 0 4px 16px rgba(0,0,0,0.1);
  transform: translateY(-2px);
}

.feature-card-header {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  margin-bottom: 12px;
}

.feature-card-header .feature-priority {
  width: 24px;
  height: 24px;
  border-radius: 6px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 10px;
  font-weight: 700;
  color: white;
  flex-shrink: 0;
}

.feature-card-header .feature-name {
  flex: 1;
  font-size: 15px;
  font-weight: 600;
  color: var(--text-primary);
  margin: 0;
}

.feature-card-actions {
  display: flex;
  gap: 4px;
  opacity: 0;
  transition: opacity 0.15s;
}

.feature-card:hover .feature-card-actions {
  opacity: 1;
}

.feature-description {
  font-size: 13px;
  color: var(--text-muted);
  line-height: 1.5;
  margin-bottom: 16px;
}

.feature-card-footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding-top: 12px;
  border-top: 1px solid var(--border-color);
}

.linked-reqs-count {
  font-size: 12px;
  color: var(--text-muted);
  display: flex;
  align-items: center;
  gap: 6px;
}

.feature-status {
  font-size: 11px;
  font-weight: 600;
  padding: 4px 10px;
  border-radius: 12px;
  background: var(--bg-secondary);
  color: var(--text-muted);
}

.feature-status.planned { background: #dbeafe; color: #1d4ed8; }
.feature-status.in_progress { background: #fef3c7; color: #92400e; }
.feature-status.done { background: #d1fae5; color: #047857; }

.add-feature-fab {
  position: fixed;
  bottom: 32px;
  right: 32px;
  width: 56px;
  height: 56px;
  border-radius: 50%;
  background: var(--primary-color);
  color: white;
  border: none;
  box-shadow: 0 4px 16px rgba(59, 130, 246, 0.4);
  cursor: pointer;
  font-size: 20px;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all 0.2s;
}

.add-feature-fab:hover {
  transform: scale(1.1);
  box-shadow: 0 6px 24px rgba(59, 130, 246, 0.5);
}

/* Traceability Tab */
.traceability-matrix {
  padding: 24px;
}

.matrix-header {
  margin-bottom: 24px;
}

.matrix-header h3 {
  font-size: 18px;
  font-weight: 600;
  margin: 0 0 6px 0;
}

.matrix-header p {
  font-size: 14px;
  color: var(--text-muted);
  margin: 0;
}

.matrix-table-wrapper {
  background: white;
  border-radius: 12px;
  overflow-x: auto;
  box-shadow: 0 2px 8px rgba(0,0,0,0.06);
}

.matrix-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 13px;
}

.matrix-table th {
  background: var(--bg-secondary);
  padding: 14px 16px;
  text-align: left;
  font-weight: 600;
  color: var(--text-muted);
  border-bottom: 1px solid var(--border-color);
  white-space: nowrap;
}

.matrix-table td {
  padding: 14px 16px;
  border-bottom: 1px solid var(--border-color);
  vertical-align: middle;
}

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

.matrix-table tr.uncovered {
  background: #fef2f2;
}

.sticky-col {
  position: sticky;
  left: 0;
  background: white;
  z-index: 1;
}

.matrix-table tr.uncovered .sticky-col {
  background: #fef2f2;
}

.matrix-req-cell {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.req-id {
  font-size: 10px;
  color: var(--text-muted);
  font-family: monospace;
}

.req-title {
  font-weight: 500;
  color: var(--text-primary);
}

.type-badge {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-weight: 500;
}

.priority-badge-sm {
  display: inline-block;
  padding: 2px 8px;
  border-radius: 4px;
  font-size: 10px;
  font-weight: 700;
  color: white;
}

.status-badge {
  display: inline-block;
  padding: 4px 10px;
  border-radius: 12px;
  font-size: 11px;
  font-weight: 500;
  background: var(--bg-secondary);
}

.status-badge.draft { background: #f3f4f6; color: #6b7280; }
.status-badge.review { background: #fef3c7; color: #92400e; }
.status-badge.approved { background: #d1fae5; color: #047857; }
.status-badge.blocked { background: #fee2e2; color: #dc2626; }

.feature-chip {
  display: inline-block;
  background: #dbeafe;
  color: #1d4ed8;
  padding: 4px 10px;
  border-radius: 12px;
  font-size: 11px;
  font-weight: 500;
  margin: 2px;
}

.no-link {
  color: var(--text-muted);
}

.coverage-indicator {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  border-radius: 50%;
}

.coverage-indicator.covered {
  background: #d1fae5;
  color: #047857;
}

.coverage-indicator.uncovered {
  background: #fee2e2;
  color: #dc2626;
}

.matrix-summary {
  display: flex;
  gap: 32px;
  margin-top: 20px;
  padding: 16px 20px;
  background: white;
  border-radius: 12px;
}

.summary-stat {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.summary-stat .stat-label {
  font-size: 12px;
  color: var(--text-muted);
}

.summary-stat .stat-value {
  font-size: 24px;
  font-weight: 700;
  color: var(--text-primary);
}

.summary-stat .stat-value.covered {
  color: #047857;
}

.summary-stat .stat-value.uncovered {
  color: #dc2626;
}

/* Derive Modal */
.derive-modal {
  max-height: 90vh;
}

.derive-intro {
  font-size: 14px;
  color: var(--text-muted);
  margin-bottom: 20px;
}

.derive-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap: 16px;
}

.derive-feature-card {
  background: var(--bg-secondary);
  border: 1px solid var(--border-color);
  border-radius: 12px;
  padding: 16px;
}

.derive-card-header {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 12px;
}

.derive-checkbox {
  width: 18px;
  height: 18px;
  cursor: pointer;
}

.derive-feature-name {
  flex: 1;
  border: none;
  background: transparent;
  font-size: 14px;
  font-weight: 600;
  color: var(--text-primary);
  padding: 4px 0;
}

.derive-feature-name:focus {
  outline: none;
  background: white;
  padding: 4px 8px;
  border-radius: 4px;
}

.confidence-badge {
  font-size: 11px;
  font-weight: 600;
  color: #10b981;
  background: #d1fae5;
  padding: 4px 8px;
  border-radius: 12px;
}

.derive-feature-desc {
  width: 100%;
  border: 1px solid var(--border-color);
  border-radius: 8px;
  padding: 10px 12px;
  font-size: 13px;
  resize: none;
  margin-bottom: 12px;
}

.derive-linked-reqs {
  font-size: 12px;
}

.linked-label {
  color: var(--text-muted);
  display: flex;
  align-items: center;
  gap: 6px;
  margin-bottom: 8px;
}

.linked-list {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

.linked-req-chip {
  background: white;
  border: 1px solid var(--border-color);
  padding: 4px 10px;
  border-radius: 12px;
  font-size: 11px;
  color: var(--text-muted);
}

.derive-summary {
  flex: 1;
  font-size: 14px;
  color: var(--text-muted);
}

.derive-summary span {
  font-weight: 600;
  color: var(--primary-color);
}

/* Linked Features in Detail */
.linked-features {
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin-bottom: 12px;
}

.linked-feature-item {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 12px;
  background: var(--bg-secondary);
  border-radius: 8px;
}

.linked-feature-item i {
  color: var(--primary-color);
}

.linked-feature-item span {
  flex: 1;
  font-size: 13px;
}

/* Enhanced Linked Features (for requirement details) */
.linked-features-empty {
  text-align: center;
  padding: 24px;
  color: var(--text-muted);
}

.linked-features-empty .empty-icon {
  width: 48px;
  height: 48px;
  margin: 0 auto 12px;
  background: var(--bg-secondary);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
}

.linked-features-empty .empty-icon i {
  font-size: 20px;
  color: var(--text-muted);
}

.linked-features-empty p {
  margin: 0 0 8px;
  font-size: 13px;
}

.linked-features-empty .hint {
  font-size: 12px;
  opacity: 0.7;
}

.linked-features-actions {
  display: flex;
  gap: 8px;
  justify-content: center;
  margin-top: 16px;
}

.linked-features-list {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.linked-feature-card {
  background: var(--bg-secondary);
  border: 1px solid var(--border-color);
  border-radius: 8px;
  padding: 12px;
  transition: border-color 0.15s ease;
}

.linked-feature-card:hover {
  border-color: var(--primary-color);
}

.linked-feature-card .feature-card-header {
  display: flex;
  align-items: flex-start;
  gap: 10px;
}

.linked-feature-card .feature-icon {
  width: 32px;
  height: 32px;
  background: #8b5cf620;
  color: #8b5cf6;
  border-radius: 6px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.linked-feature-card .feature-info {
  flex: 1;
  min-width: 0;
}

.linked-feature-card .feature-name {
  font-weight: 500;
  font-size: 14px;
  color: var(--text-primary);
  display: block;
  margin-bottom: 4px;
}

.linked-feature-card .feature-meta {
  display: flex;
  gap: 8px;
  align-items: center;
}

.linked-feature-card .priority-badge {
  font-size: 10px;
  font-weight: 600;
  padding: 2px 6px;
  border-radius: 4px;
}

.linked-feature-card .status-badge {
  font-size: 11px;
  text-transform: capitalize;
  color: var(--text-muted);
}

.linked-feature-card .status-badge.draft { color: #6b7280; }
.linked-feature-card .status-badge.planned { color: #3b82f6; }
.linked-feature-card .status-badge.in_progress { color: #f59e0b; }
.linked-feature-card .status-badge.done { color: #10b981; }

.linked-feature-card .feature-actions {
  display: flex;
  gap: 4px;
  opacity: 0;
  transition: opacity 0.15s ease;
}

.linked-feature-card:hover .feature-actions {
  opacity: 1;
}

.linked-feature-card .feature-description {
  margin-top: 8px;
  font-size: 12px;
  color: var(--text-muted);
  line-height: 1.4;
}

/* Tree empty hint */
.tree-empty-hint {
  padding: 8px 12px 8px 32px;
  font-size: 12px;
  color: var(--text-muted);
  font-style: italic;
}

/* ============================================
   FEATURES VIEW
   ============================================ */

.features-view {
  display: flex;
  flex-direction: column;
  gap: 20px;
  padding: 20px;
  height: 100%;
}

.features-header {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.features-title-row {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 20px;
}

.features-title h1 {
  margin: 0;
  font-size: 24px;
  font-weight: 600;
  display: flex;
  align-items: center;
  gap: 10px;
}

.features-title h1 i {
  color: #8b5cf6;
}

.features-stats {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-top: 6px;
  font-size: 13px;
  color: var(--text-muted);
}

.features-stats .stat-value {
  font-weight: 600;
  color: var(--text-primary);
}

.features-stats .stat-divider {
  width: 4px;
  height: 4px;
  border-radius: 50%;
  background: var(--border-color);
}

.features-actions {
  display: flex;
  gap: 10px;
}

.features-toolbar {
  display: flex;
  align-items: center;
  gap: 16px;
  flex-wrap: wrap;
}

.features-search {
  position: relative;
  flex: 1;
  min-width: 200px;
  max-width: 400px;
}

.features-search i {
  position: absolute;
  left: 12px;
  top: 50%;
  transform: translateY(-50%);
  color: var(--text-muted);
}

.features-search input {
  width: 100%;
  padding: 10px 12px 10px 36px;
  border: 1px solid var(--border-color);
  border-radius: 8px;
  background: var(--bg-primary);
  font-size: 14px;
}

.features-filters {
  display: flex;
  gap: 10px;
}

.features-content {
  flex: 1;
  overflow-y: auto;
}

.features-loading {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  padding: 60px 20px;
  color: var(--text-muted);
}

.features-empty {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 60px 20px;
  text-align: center;
}

.features-empty .empty-illustration {
  width: 80px;
  height: 80px;
  background: var(--bg-secondary);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 20px;
}

.features-empty .empty-illustration i {
  font-size: 32px;
  color: var(--text-muted);
}

.features-empty h3 {
  margin: 0 0 8px;
  font-size: 18px;
}

.features-empty p {
  margin: 0;
  color: var(--text-muted);
  max-width: 400px;
}

.features-empty .empty-actions {
  display: flex;
  gap: 12px;
  margin-top: 24px;
}

.features-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
  gap: 16px;
}

.feature-card {
  background: var(--bg-primary);
  border: 1px solid var(--border-color);
  border-radius: 12px;
  overflow: hidden;
  transition: border-color 0.15s ease, box-shadow 0.15s ease;
}

.feature-card:hover {
  border-color: #8b5cf6;
  box-shadow: 0 4px 12px rgba(139, 92, 246, 0.1);
}

.feature-card-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 12px 16px;
  background: var(--bg-secondary);
  border-bottom: 1px solid var(--border-color);
}

.feature-priority {
  font-size: 11px;
  font-weight: 700;
  color: white;
  padding: 3px 8px;
  border-radius: 4px;
}

.feature-status {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 12px;
  font-weight: 500;
}

.feature-card-body {
  padding: 16px;
}

.feature-card-body .feature-name {
  margin: 0 0 8px;
  font-size: 16px;
  font-weight: 600;
  line-height: 1.3;
}

.feature-card-body .feature-description {
  margin: 0 0 12px;
  font-size: 13px;
  color: var(--text-muted);
  line-height: 1.5;
}

.feature-card-body .feature-description .placeholder {
  font-style: italic;
  opacity: 0.6;
}

.feature-criteria,
.feature-requirements {
  margin-bottom: 8px;
}

.criteria-label,
.requirements-label {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 12px;
  color: var(--text-muted);
}

.criteria-label i {
  color: #10b981;
}

.requirements-label i {
  color: #3b82f6;
}

.feature-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-top: 12px;
}

.feature-tag {
  font-size: 11px;
  padding: 3px 8px;
  background: var(--bg-secondary);
  border-radius: 4px;
  color: var(--text-muted);
}

.feature-tag-more {
  font-size: 11px;
  padding: 3px 8px;
  background: var(--primary-color);
  color: white;
  border-radius: 4px;
}

.feature-card-footer {
  display: flex;
  justify-content: flex-end;
  gap: 8px;
  padding: 12px 16px;
  border-top: 1px solid var(--border-color);
  background: var(--bg-secondary);
}

/* Criteria Editor in Modal */
.criteria-editor {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.criteria-row {
  display: flex;
  align-items: center;
  gap: 10px;
}

.criteria-row i {
  color: #10b981;
}

.criteria-row .form-input {
  flex: 1;
}

/* Requirements Selector */
.requirements-selector .checkbox-list {
  border: 1px solid var(--border-color);
  border-radius: 8px;
  padding: 8px;
}

.checkbox-item {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 6px 8px;
  border-radius: 4px;
  cursor: pointer;
}

.checkbox-item:hover {
  background: var(--bg-secondary);
}

.checkbox-item input {
  margin: 0;
}

.checkbox-item span {
  font-size: 13px;
}

/* Form hint */
.form-hint {
  font-size: 11px;
  color: var(--text-muted);
  margin-top: 4px;
}

/* Responsive */
@media (max-width: 768px) {
  .features-grid {
    grid-template-columns: 1fr;
  }

  .features-title-row {
    flex-direction: column;
  }

  .features-toolbar {
    flex-direction: column;
    align-items: stretch;
  }

  .features-search {
    max-width: none;
  }
}

/* ========================================
   Features View v3 - Hierarchical Tree Grid
   Module -> Capability -> Feature -> Steps
   dhtmlx TreeGrid inspired design
   ======================================== */

.features-treegrid-view {
  display: flex;
  flex-direction: column;
  height: 100%;
  padding: 20px;
  gap: 16px;
  position: relative;
}

/* Tree Grid Header */
.treegrid-header {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.treegrid-title-row {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 20px;
  flex-wrap: wrap;
}

.treegrid-title h1 {
  margin: 0;
  font-size: 24px;
  font-weight: 600;
  display: flex;
  align-items: center;
  gap: 10px;
  color: var(--text-primary);
}

.treegrid-title h1 i {
  color: #7c3aed;
}

.treegrid-stats {
  display: flex;
  align-items: center;
  gap: 16px;
  margin-top: 8px;
  flex-wrap: wrap;
}

.treegrid-stats .stat {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 13px;
  color: var(--text-muted);
  padding: 6px 12px;
  background: var(--bg-secondary);
  border-radius: 20px;
}

.treegrid-stats .stat i {
  font-size: 12px;
}

.treegrid-stats .stat strong {
  color: var(--text-primary);
}

.treegrid-actions {
  display: flex;
  gap: 10px;
}

.add-buttons {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
}

.treegrid-toolbar {
  display: flex;
  align-items: center;
  gap: 16px;
  flex-wrap: wrap;
}

.treegrid-search {
  position: relative;
  flex: 1;
  min-width: 250px;
  max-width: 450px;
}

.treegrid-search i {
  position: absolute;
  left: 14px;
  top: 50%;
  transform: translateY(-50%);
  color: var(--text-muted);
  font-size: 14px;
}

.treegrid-search input {
  width: 100%;
  padding: 11px 14px 11px 40px;
  border: 1px solid var(--border-color);
  border-radius: 8px;
  background: white;
  font-size: 14px;
  transition: all 0.2s ease;
}

.treegrid-search input:focus {
  border-color: #7c3aed;
  box-shadow: 0 0 0 3px rgba(124, 58, 237, 0.1);
  outline: none;
}

.treegrid-filters {
  display: flex;
  gap: 10px;
  align-items: center;
}

/* Tree Grid Container */
.treegrid-container {
  flex: 1;
  min-height: 0;
  background: white;
  border: 1px solid var(--border-color);
  border-radius: 12px;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  box-shadow: 0 1px 3px rgba(0,0,0,0.05);
}

/* Tree Grid Table */
.treegrid-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 14px;
  table-layout: fixed;
}

.treegrid-table thead {
  position: sticky;
  top: 0;
  z-index: 10;
  background: linear-gradient(180deg, #f8fafc 0%, #f1f5f9 100%);
  border-bottom: 2px solid var(--border-color);
}

.treegrid-table th {
  padding: 14px 16px;
  text-align: left;
  font-weight: 600;
  font-size: 12px;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  color: var(--text-muted);
  white-space: nowrap;
}

.treegrid-table th.col-name { width: 40%; }
.treegrid-table th.col-type { width: 12%; }
.treegrid-table th.col-status { width: 14%; }
.treegrid-table th.col-priority { width: 12%; }
.treegrid-table th.col-children { width: 10%; text-align: center; }
.treegrid-table th.col-actions { width: 12%; text-align: right; }

.treegrid-table tbody {
  overflow-y: auto;
}

/* Tree Grid Row */
.treegrid-row {
  border-bottom: 1px solid #f1f5f9;
  transition: all 0.15s ease;
}

.treegrid-row:hover {
  background: #f8fafc;
}

.treegrid-row.level-module {
  background: #faf5ff;
}

.treegrid-row.level-module:hover {
  background: #f3e8ff;
}

.treegrid-row.level-capability {
  background: #eff6ff;
}

.treegrid-row.level-capability:hover {
  background: #dbeafe;
}

.treegrid-row.level-feature {
  background: #ecfdf5;
}

.treegrid-row.level-feature:hover {
  background: #d1fae5;
}

.treegrid-row.level-step {
  background: #fffbeb;
}

.treegrid-row.level-step:hover {
  background: #fef3c7;
}

.treegrid-row.editing {
  background: #fefce8 !important;
}

.treegrid-row td {
  padding: 10px 16px;
  vertical-align: middle;
}

.treegrid-row td.col-children {
  text-align: center;
}

.treegrid-row td.col-actions {
  text-align: right;
}

/* Cell Content */
.cell-content {
  display: flex;
  align-items: center;
  gap: 10px;
}

.expand-btn {
  width: 20px;
  height: 20px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 4px;
  color: var(--text-muted);
  font-size: 10px;
  flex-shrink: 0;
  transition: all 0.2s ease;
}

.expand-btn.has-children {
  cursor: pointer;
}

.expand-btn.has-children:hover {
  background: rgba(0,0,0,0.05);
  color: var(--text-primary);
}

.type-icon {
  width: 28px;
  height: 28px;
  border-radius: 6px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 12px;
  flex-shrink: 0;
}

.item-name {
  font-weight: 500;
  color: var(--text-primary);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* Badges */
.type-badge {
  font-size: 11px;
  font-weight: 600;
  padding: 3px 8px;
  border-radius: 4px;
  text-transform: capitalize;
}

.status-badge {
  font-size: 11px;
  font-weight: 500;
  padding: 4px 10px;
  border-radius: 12px;
  display: inline-block;
}

.status-badge.sm {
  font-size: 10px;
  padding: 2px 8px;
}

.priority-badge {
  font-size: 11px;
  font-weight: 500;
  padding: 4px 10px;
  border-radius: 12px;
  display: inline-block;
}

.children-count {
  font-weight: 600;
  color: var(--text-muted);
  background: var(--bg-secondary);
  padding: 2px 10px;
  border-radius: 10px;
  font-size: 12px;
}

/* Row Actions */
.row-actions {
  display: flex;
  gap: 4px;
  justify-content: flex-end;
  opacity: 0;
  transition: opacity 0.15s ease;
}

.treegrid-row:hover .row-actions {
  opacity: 1;
}

.btn-icon {
  width: 28px;
  height: 28px;
  display: flex;
  align-items: center;
  justify-content: center;
  border: none;
  background: var(--bg-secondary);
  color: var(--text-muted);
  border-radius: 6px;
  cursor: pointer;
  transition: all 0.15s ease;
  font-size: 12px;
}

.btn-icon:hover {
  background: var(--border-color);
  color: var(--text-primary);
}

.btn-icon.primary {
  background: #7c3aed;
  color: white;
}

.btn-icon.primary:hover {
  background: #6d28d9;
}

.btn-icon.success {
  background: #10b981;
  color: white;
}

.btn-icon.success:hover {
  background: #059669;
}

.btn-icon.danger {
  color: #ef4444;
}

.btn-icon.danger:hover {
  background: #fef2f2;
  color: #dc2626;
}

/* Inline Edit */
.inline-edit-input {
  flex: 1;
  padding: 6px 10px;
  border: 1px solid #7c3aed;
  border-radius: 6px;
  font-size: 14px;
  background: white;
}

.inline-edit-input:focus {
  outline: none;
  box-shadow: 0 0 0 3px rgba(124, 58, 237, 0.1);
}

.inline-edit-select {
  padding: 6px 10px;
  border: 1px solid var(--border-color);
  border-radius: 6px;
  font-size: 12px;
  background: white;
  min-width: 100px;
}

/* Empty State */
.treegrid-empty {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 80px 20px;
  text-align: center;
}

.treegrid-empty .empty-illustration {
  width: 100px;
  height: 100px;
  background: linear-gradient(135deg, #ede9fe 0%, #ddd6fe 100%);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 24px;
}

.treegrid-empty .empty-illustration i {
  font-size: 40px;
  color: #7c3aed;
}

.treegrid-empty h3 {
  margin: 0 0 8px;
  font-size: 20px;
  color: var(--text-primary);
}

.treegrid-empty p {
  margin: 0 0 24px;
  color: var(--text-muted);
  max-width: 400px;
}

/* Drawer Overlay */
.drawer-overlay {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0.3);
  z-index: 1400;
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.3s ease, visibility 0.3s ease;
}

.drawer-overlay.open {
  opacity: 1;
  visibility: visible;
}

/* Details Drawer */
.details-drawer {
  position: fixed;
  top: 0;
  right: 0;
  width: 70%;
  max-width: 90vw;
  height: 100vh;
  background: white;
  box-shadow: -4px 0 20px rgba(0,0,0,0.15);
  z-index: 1500;
  transform: translateX(100%);
  transition: transform 0.3s ease;
  display: flex;
  flex-direction: column;
}

.details-drawer.open {
  transform: translateX(0);
}

.drawer-content {
  display: flex;
  flex-direction: column;
  height: 100%;
}

.drawer-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 20px 24px;
  border-bottom: 1px solid var(--border-color);
  background: #faf5ff;
}

.drawer-header h2 {
  margin: 0;
  font-size: 18px;
  font-weight: 600;
  display: flex;
  align-items: center;
  gap: 10px;
  color: #7c3aed;
}

.drawer-body {
  flex: 1;
  overflow-y: auto;
  overflow-x: hidden;
  padding: 24px;
  min-width: 0;
  display: block;
}

/* When comments tab is active, don't scroll drawer-body, let comments-list scroll */
.drawer-body:has(.comments-section.chat-style) {
  overflow-y: hidden;
}

.drawer-footer {
  display: flex;
  justify-content: flex-end;
  gap: 12px;
  padding: 16px 24px;
  border-top: 1px solid var(--border-color);
  background: var(--bg-secondary);
}

/* Detail Breadcrumb */
.detail-breadcrumb {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 6px;
  padding: 16px;
  background: #f8fafc;
  border-radius: 10px;
  margin-bottom: 24px;
}

.detail-breadcrumb .crumb {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 12px;
  padding: 4px 10px;
  border-radius: 6px;
  background: white;
  border: 1px solid var(--border-color);
}

.detail-breadcrumb .crumb.module {
  background: #ede9fe;
  border-color: #c4b5fd;
  color: #7c3aed;
}

.detail-breadcrumb .crumb.capability {
  background: #dbeafe;
  border-color: #93c5fd;
  color: #2563eb;
}

.detail-breadcrumb .crumb.feature {
  background: #d1fae5;
  border-color: #6ee7b7;
  color: #059669;
}

.detail-breadcrumb .crumb.step {
  background: #fef3c7;
  border-color: #fcd34d;
  color: #d97706;
}

.detail-breadcrumb .crumb.current {
  font-weight: 600;
}

.detail-breadcrumb .crumb-sep {
  color: var(--text-muted);
  font-size: 10px;
}

/* Detail Section */
.detail-section {
  margin-bottom: 24px;
}

.detail-section h3 {
  margin: 0 0 12px;
  font-size: 14px;
  font-weight: 600;
  color: var(--text-primary);
  display: flex;
  align-items: center;
  gap: 8px;
}

.detail-card {
  background: #f8fafc;
  border-radius: 10px;
  padding: 16px;
}

.detail-row {
  margin-bottom: 12px;
}

.detail-row:last-child {
  margin-bottom: 0;
}

.detail-row label {
  display: block;
  font-size: 11px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  color: var(--text-muted);
  margin-bottom: 4px;
}

.detail-row span {
  font-size: 14px;
  color: var(--text-primary);
  line-height: 1.5;
}

.detail-row-inline {
  display: flex;
  gap: 24px;
}

.detail-row-inline > div {
  flex: 1;
}

.detail-row-inline label {
  display: block;
  font-size: 11px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  color: var(--text-muted);
  margin-bottom: 4px;
}

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

/* Tree Grid Modal */
.treegrid-modal {
  width: min(520px, 95vw);
}

.treegrid-modal .modal-header .modal-title {
  display: flex;
  align-items: center;
  gap: 10px;
  font-weight: 600;
}

/* Comments Badge */
.comments-badge {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-size: 11px;
  font-weight: 600;
  padding: 4px 10px;
  border-radius: 12px;
  background: #dbeafe;
  color: #2563eb;
}

.comments-badge i {
  font-size: 10px;
}

.col-comments {
  text-align: center;
}

.treegrid-table th.col-comments { width: 10%; }

/* Inline Edit Button next to Name */
.btn-icon-inline {
  width: 24px;
  height: 24px;
  display: flex;
  align-items: center;
  justify-content: center;
  border: none;
  background: transparent;
  color: var(--text-muted);
  border-radius: 4px;
  cursor: pointer;
  transition: all 0.15s ease;
  font-size: 11px;
  opacity: 0;
  margin-left: auto;
  flex-shrink: 0;
}

.treegrid-row:hover .btn-icon-inline {
  opacity: 1;
}

.btn-icon-inline:hover {
  background: rgba(124, 58, 237, 0.1);
  color: #7c3aed;
}

/* Clickable Step Name */
.item-name.clickable {
  cursor: pointer;
  transition: all 0.15s ease;
}

.item-name.clickable:hover {
  color: #7c3aed;
  text-decoration: underline;
}

/* Drawer Tabs */
.drawer-tabs {
  display: flex;
  border-bottom: 1px solid var(--border-color);
  background: white;
}

.drawer-tab {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 14px 20px;
  border: none;
  background: transparent;
  font-size: 14px;
  font-weight: 500;
  color: var(--text-muted);
  cursor: pointer;
  transition: all 0.2s ease;
  position: relative;
}

.drawer-tab:hover {
  color: var(--text-primary);
  background: var(--bg-secondary);
}

.drawer-tab.active {
  color: #7c3aed;
  background: white;
}

.drawer-tab.active::after {
  content: '';
  position: absolute;
  bottom: -1px;
  left: 0;
  right: 0;
  height: 2px;
  background: #7c3aed;
}

.drawer-tab i {
  font-size: 14px;
}

.tab-badge {
  background: #7c3aed;
  color: white;
  font-size: 10px;
  font-weight: 700;
  padding: 2px 6px;
  border-radius: 10px;
  min-width: 18px;
  text-align: center;
}

/* Comments Section in Drawer */
.comments-section {
  display: flex;
  flex-direction: column;
  gap: 20px;
  overflow: hidden;
  min-width: 0;
  width: 100%;
}

/* Chat-style comments layout */
.comments-section.chat-style {
  height: 100%;
  gap: 16px;
}

.comments-section.chat-style .comments-list {
  flex: 1;
  overflow-y: auto;
  padding-right: 8px;
}

.add-comment-form {
  background: #f8fafc;
  border-radius: 12px;
  padding: 16px;
  flex-shrink: 0;
}

.comment-input-wrapper {
  display: flex;
  gap: 12px;
}

.comment-avatar {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  background: linear-gradient(135deg, #7c3aed 0%, #a78bfa 100%);
  color: white;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 14px;
  flex-shrink: 0;
}

.comment-input-container {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.comment-textarea {
  width: 100%;
  padding: 12px;
  border: 1px solid var(--border-color);
  border-radius: 8px;
  font-size: 14px;
  font-family: inherit;
  resize: none;
  min-height: 60px;
  max-height: 120px;
  transition: all 0.2s ease;
}

.comment-textarea:focus {
  outline: none;
  border-color: #7c3aed;
  box-shadow: 0 0 0 3px rgba(124, 58, 237, 0.1);
}

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

.comment-input-actions {
  display: flex;
  justify-content: flex-end;
}

/* Comments List */
.comments-list {
  display: block;
  min-width: 0;
  overflow: hidden;
}

.comments-list .comment-item {
  margin-bottom: 16px;
}

.comments-list .comment-item:last-child {
  margin-bottom: 0;
}

.no-comments {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 40px 20px;
  text-align: center;
  background: #f8fafc;
  border-radius: 12px;
}

.no-comments i {
  font-size: 40px;
  color: #c4b5fd;
  margin-bottom: 16px;
}

.no-comments p {
  margin: 0 0 4px;
  font-size: 16px;
  font-weight: 600;
  color: var(--text-primary);
}

.no-comments span {
  font-size: 13px;
  color: var(--text-muted);
}

/* Comment Item */
.comment-item {
  background: white;
  border: 1px solid var(--border-color);
  border-radius: 12px;
  padding: 16px;
  transition: all 0.2s ease;
  overflow: hidden;
  min-width: 0;
  max-width: 100%;
}

.comment-item:hover {
  box-shadow: 0 2px 8px rgba(0,0,0,0.05);
}

.comment-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 10px;
}

.comment-author {
  display: flex;
  align-items: center;
  gap: 10px;
}

.author-avatar {
  width: 28px;
  height: 28px;
  border-radius: 50%;
  background: linear-gradient(135deg, #7c3aed 0%, #a78bfa 100%);
  color: white;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 12px;
  font-weight: 600;
}

.author-name {
  font-weight: 600;
  font-size: 13px;
  color: var(--text-primary);
}

.comment-meta {
  display: flex;
  align-items: center;
  gap: 8px;
}

.comment-date {
  font-size: 12px;
  color: var(--text-muted);
}

.btn-icon-sm {
  width: 24px;
  height: 24px;
  display: flex;
  align-items: center;
  justify-content: center;
  border: none;
  background: transparent;
  color: var(--text-muted);
  border-radius: 4px;
  cursor: pointer;
  transition: all 0.15s ease;
  font-size: 11px;
  opacity: 0;
}

.comment-item:hover .btn-icon-sm {
  opacity: 1;
}

.btn-icon-sm.danger:hover {
  background: #fef2f2;
  color: #ef4444;
}

.comment-body {
  font-size: 14px;
  line-height: 1.6;
  color: var(--text-primary);
  white-space: pre-wrap;
  word-wrap: break-word;
  overflow-wrap: break-word;
  word-break: break-word;
  max-width: 100%;
  min-width: 0;
  overflow: hidden;
}

/* Responsive */
@media (max-width: 1024px) {
  .treegrid-title-row {
    flex-direction: column;
  }

  .add-buttons {
    width: 100%;
    justify-content: flex-start;
  }

  .treegrid-table th.col-children,
  .treegrid-table td.col-children {
    display: none;
  }
}

@media (max-width: 768px) {
  .features-treegrid-view {
    padding: 12px;
  }

  .treegrid-toolbar {
    flex-direction: column;
    align-items: stretch;
  }

  .treegrid-search {
    max-width: none;
  }

  .treegrid-filters {
    flex-wrap: wrap;
  }

  .treegrid-table th.col-type,
  .treegrid-table td.col-type,
  .treegrid-table th.col-priority,
  .treegrid-table td.col-priority,
  .treegrid-table th.col-comments,
  .treegrid-table td.col-comments {
    display: none;
  }

  .details-drawer {
    width: 100%;
  }

  .drawer-tabs {
    flex-shrink: 0;
  }

  .drawer-tab {
    padding: 12px 16px;
    font-size: 13px;
  }
}

/* Form Improvements */
.form-input.lg {
  font-size: 16px;
  padding: 14px 16px;
}

.icon-color-picker {
  display: flex;
  gap: 12px;
}

.icon-color-picker select {
  flex: 1;
}

.checkbox-list {
  border: 1px solid var(--border-color);
  border-radius: 8px;
  padding: 8px;
}

/* Responsive */
@media (max-width: 1024px) {
  .hub-split-view {
    grid-template-columns: 280px 1fr;
  }

  .hub-title-row {
    flex-direction: column;
  }

  .hub-actions {
    width: 100%;
    justify-content: flex-start;
  }
}

@media (max-width: 768px) {
  .hub-split-view {
    grid-template-columns: 1fr;
  }

  .hub-tree-pane {
    max-height: 40vh;
    border-right: none;
    border-bottom: 1px solid var(--border-color);
  }

  .type-cards, .priority-cards {
    grid-template-columns: repeat(2, 1fr);
  }

  .empty-actions {
    flex-direction: column;
  }

  .capture-mode-btn {
    width: 100%;
  }
}

/* ========================================
   Requirements Tree Table v2
   Modern split-panel tree table design
   ======================================== */

/* Main Container */
.req-content {
  display: flex;
  gap: 0;
  height: calc(100vh - var(--header-height) - 280px);
  min-height: 500px;
  background: var(--panel-bg);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-md);
  overflow: hidden;
}

/* Left Panel - Tree Table */
.req-tree-panel {
  width: 60%;
  display: flex;
  flex-direction: column;
  border-right: 1px solid var(--border-color);
  background: var(--panel-bg);
}

/* Tree Table Header */
.req-tree-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 16px 20px;
  border-bottom: 1px solid var(--border-color);
  background: var(--bg-color);
}

.req-tree-title {
  font-size: 16px;
  font-weight: 600;
  color: var(--text-color);
  display: flex;
  align-items: center;
  gap: 10px;
}

.req-tree-title i {
  color: var(--primary-color);
}

.req-tree-stats {
  display: flex;
  gap: 16px;
}

.req-stat {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 12px;
  color: var(--text-muted);
}

.req-stat-value {
  font-weight: 600;
  color: var(--text-color);
}

/* Tree Table */
.req-tree-table {
  flex: 1;
  overflow: auto;
}

.tree-table-header {
  display: flex;
  align-items: center;
  padding: 12px 16px;
  background: linear-gradient(to bottom, #f8fafc, #f1f5f9);
  border-bottom: 2px solid var(--border-color);
  font-size: 11px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  color: var(--text-muted);
  position: sticky;
  top: 0;
  z-index: 10;
}

.tree-col {
  display: flex;
  align-items: center;
  gap: 6px;
}

.tree-col.col-name {
  flex: 2;
  min-width: 200px;
}

.tree-col.col-type {
  width: 100px;
  flex-shrink: 0;
}

.tree-col.col-priority {
  width: 90px;
  flex-shrink: 0;
}

.tree-col.col-status {
  width: 100px;
  flex-shrink: 0;
}

.tree-col.col-features {
  width: 80px;
  flex-shrink: 0;
  text-align: center;
  justify-content: center;
}

/* Tree Body */
.tree-table-body {
  padding: 8px 0;
}

/* Capability Row */
.tree-capability-row {
  display: flex;
  align-items: center;
  padding: 12px 16px;
  background: linear-gradient(to right, #f8fafc, var(--panel-bg));
  border-bottom: 1px solid var(--border-light);
  cursor: pointer;
  transition: var(--transition);
}

.tree-capability-row:hover {
  background: linear-gradient(to right, #f1f5f9, #f8fafc);
}

.tree-capability-row.expanded {
  background: linear-gradient(to right, #e8f4fd, #f0f9ff);
  border-left: 3px solid var(--primary-color);
}

.cap-expand-btn {
  width: 28px;
  height: 28px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--panel-bg);
  border: 1px solid var(--border-color);
  border-radius: var(--radius-sm);
  color: var(--text-muted);
  cursor: pointer;
  transition: var(--transition);
  margin-right: 12px;
  flex-shrink: 0;
}

.cap-expand-btn:hover {
  background: var(--primary-color);
  color: white;
  border-color: var(--primary-color);
}

.cap-expand-btn i {
  font-size: 12px;
  transition: transform 0.2s ease;
}

.tree-capability-row.expanded .cap-expand-btn i {
  transform: rotate(90deg);
}

.cap-name {
  font-weight: 600;
  color: var(--text-color);
  flex: 2;
  min-width: 200px;
  display: flex;
  align-items: center;
  gap: 10px;
}

.cap-name i {
  color: var(--primary-color);
  font-size: 14px;
}

.cap-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 2px 8px;
  background: var(--primary-color);
  color: white;
  font-size: 11px;
  font-weight: 600;
  border-radius: 10px;
  min-width: 24px;
}

.cap-type-cell {
  width: 100px;
  flex-shrink: 0;
}

.cap-type-badge {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 4px 10px;
  background: #e0e7ff;
  color: #4338ca;
  font-size: 11px;
  font-weight: 500;
  border-radius: 12px;
}

.cap-priority-cell,
.cap-status-cell,
.cap-features-cell {
  color: var(--text-light);
  font-size: 12px;
}

.cap-priority-cell {
  width: 90px;
  flex-shrink: 0;
}

.cap-status-cell {
  width: 100px;
  flex-shrink: 0;
}

.cap-features-cell {
  width: 80px;
  flex-shrink: 0;
  text-align: center;
}

/* Requirement Row */
.tree-requirement-row {
  display: flex;
  align-items: center;
  padding: 10px 16px 10px 56px;
  background: var(--panel-bg);
  border-bottom: 1px solid var(--border-light);
  cursor: pointer;
  transition: var(--transition);
}

.tree-requirement-row:hover {
  background: #fafbfc;
}

.tree-requirement-row.selected {
  background: linear-gradient(to right, #e0f2fe, #f0f9ff);
  border-left: 3px solid var(--info);
}

.tree-requirement-row.selected:hover {
  background: linear-gradient(to right, #bae6fd, #e0f2fe);
}

.req-name-cell {
  flex: 2;
  min-width: 200px;
  display: flex;
  align-items: center;
  gap: 10px;
}

.req-serial {
  font-family: var(--font-mono);
  font-size: 11px;
  color: var(--text-muted);
  background: var(--bg-color);
  padding: 2px 6px;
  border-radius: 4px;
  flex-shrink: 0;
}

.req-title {
  font-weight: 500;
  color: var(--text-color);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.req-type-cell {
  width: 100px;
  flex-shrink: 0;
}

.req-type-badge {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 4px 8px;
  font-size: 11px;
  font-weight: 500;
  border-radius: 10px;
}

.req-type-badge.functional {
  background: #dbeafe;
  color: #1d4ed8;
}

.req-type-badge.non-functional {
  background: #fef3c7;
  color: #b45309;
}

.req-type-badge.technical {
  background: #e0e7ff;
  color: #4338ca;
}

.req-type-badge.business {
  background: #d1fae5;
  color: #047857;
}

.req-type-badge.ui_ux {
  background: #fce7f3;
  color: #be185d;
}

.req-priority-cell {
  width: 90px;
  flex-shrink: 0;
}

.req-priority-badge {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 4px 8px;
  font-size: 11px;
  font-weight: 600;
  border-radius: 10px;
}

.req-priority-badge.must {
  background: #fee2e2;
  color: #dc2626;
}

.req-priority-badge.should {
  background: #ffedd5;
  color: #ea580c;
}

.req-priority-badge.could {
  background: #fef9c3;
  color: #ca8a04;
}

.req-priority-badge.wont {
  background: #f3f4f6;
  color: #6b7280;
}

.req-status-cell {
  width: 100px;
  flex-shrink: 0;
}

.req-status-badge {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 4px 8px;
  font-size: 11px;
  font-weight: 500;
  border-radius: 10px;
}

.req-status-badge.draft {
  background: #f3f4f6;
  color: #6b7280;
}

.req-status-badge.review {
  background: #fef3c7;
  color: #b45309;
}

.req-status-badge.approved {
  background: #d1fae5;
  color: #047857;
}

.req-status-badge.implemented {
  background: #dbeafe;
  color: #1d4ed8;
}

.req-status-badge.deferred {
  background: #fce7f3;
  color: #be185d;
}

.req-features-cell {
  width: 80px;
  flex-shrink: 0;
  text-align: center;
}

.req-features-count {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  background: var(--bg-color);
  color: var(--text-muted);
  font-size: 12px;
  font-weight: 600;
  border-radius: 50%;
  border: 1px solid var(--border-color);
}

.req-features-count.has-features {
  background: var(--primary-color);
  color: white;
  border-color: var(--primary-color);
}

/* Ungrouped Section */
.tree-ungrouped-section {
  margin-top: 8px;
  border-top: 2px dashed var(--border-color);
  padding-top: 8px;
}

.tree-ungrouped-header {
  display: flex;
  align-items: center;
  padding: 10px 16px;
  color: var(--text-muted);
  font-size: 12px;
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

.tree-ungrouped-header i {
  margin-right: 8px;
}

/* Empty States */
.tree-empty-state {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 60px 20px;
  text-align: center;
}

.tree-empty-icon {
  width: 80px;
  height: 80px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: linear-gradient(135deg, #e0e7ff, #f0f9ff);
  border-radius: 50%;
  margin-bottom: 20px;
}

.tree-empty-icon i {
  font-size: 32px;
  color: var(--primary-color);
}

.tree-empty-title {
  font-size: 18px;
  font-weight: 600;
  color: var(--text-color);
  margin-bottom: 8px;
}

.tree-empty-text {
  font-size: 14px;
  color: var(--text-muted);
  max-width: 300px;
  margin-bottom: 20px;
}

.tree-empty-btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 10px 20px;
  background: var(--primary-color);
  color: white;
  font-size: 14px;
  font-weight: 500;
  border: none;
  border-radius: var(--radius);
  cursor: pointer;
  transition: var(--transition);
}

.tree-empty-btn:hover {
  background: var(--primary-hover);
  transform: translateY(-1px);
}

/* Right Panel - Detail View */
.req-detail-panel {
  width: 40%;
  display: flex;
  flex-direction: column;
  background: #fafbfc;
  overflow: hidden;
}

.detail-panel-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 16px 20px;
  background: var(--panel-bg);
  border-bottom: 1px solid var(--border-color);
}

.detail-panel-title {
  font-size: 16px;
  font-weight: 600;
  color: var(--text-color);
  display: flex;
  align-items: center;
  gap: 10px;
}

.detail-panel-title i {
  color: var(--info);
}

.detail-panel-actions {
  display: flex;
  gap: 8px;
}

.detail-action-btn {
  width: 36px;
  height: 36px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--panel-bg);
  border: 1px solid var(--border-color);
  border-radius: var(--radius-sm);
  color: var(--text-muted);
  cursor: pointer;
  transition: var(--transition);
}

.detail-action-btn:hover {
  background: var(--primary-color);
  color: white;
  border-color: var(--primary-color);
}

.detail-action-btn.danger:hover {
  background: var(--danger);
  border-color: var(--danger);
}

.detail-panel-content {
  flex: 1;
  overflow-y: auto;
  padding: 20px;
}

/* Detail Empty State */
.detail-empty-state {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  height: 100%;
  text-align: center;
  padding: 40px;
}

.detail-empty-icon {
  width: 100px;
  height: 100px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: linear-gradient(135deg, #f1f5f9, #e2e8f0);
  border-radius: 50%;
  margin-bottom: 24px;
}

.detail-empty-icon i {
  font-size: 40px;
  color: var(--text-light);
}

.detail-empty-title {
  font-size: 18px;
  font-weight: 600;
  color: var(--text-color);
  margin-bottom: 8px;
}

.detail-empty-text {
  font-size: 14px;
  color: var(--text-muted);
  max-width: 250px;
}

/* Detail Form Sections */
.detail-section {
  background: var(--panel-bg);
  border-radius: var(--radius);
  padding: 20px;
  margin-bottom: 16px;
  border: 1px solid var(--border-color);
}

.detail-section-title {
  font-size: 14px;
  font-weight: 600;
  color: var(--text-color);
  margin-bottom: 16px;
  display: flex;
  align-items: center;
  gap: 8px;
}

.detail-section-title i {
  color: var(--primary-color);
  font-size: 14px;
}

.detail-form-row {
  margin-bottom: 16px;
}

.detail-form-row:last-child {
  margin-bottom: 0;
}

.detail-form-label {
  font-size: 12px;
  font-weight: 500;
  color: var(--text-muted);
  margin-bottom: 6px;
  display: block;
}

.detail-form-input {
  width: 100%;
  padding: 10px 14px;
  border: 1px solid var(--border-color);
  border-radius: var(--radius-sm);
  font-size: 14px;
  color: var(--text-color);
  background: var(--panel-bg);
  transition: var(--transition);
}

.detail-form-input:focus {
  outline: none;
  border-color: var(--primary-color);
  box-shadow: 0 0 0 3px rgba(45, 43, 135, 0.1);
}

.detail-form-input::placeholder {
  color: var(--text-light);
}

textarea.detail-form-input {
  resize: vertical;
  min-height: 100px;
}

.detail-form-select {
  width: 100%;
  padding: 10px 14px;
  border: 1px solid var(--border-color);
  border-radius: var(--radius-sm);
  font-size: 14px;
  color: var(--text-color);
  background: var(--panel-bg);
  cursor: pointer;
  appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Cpath fill='%236b7280' d='M3 4.5L6 7.5L9 4.5'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 12px center;
}

.detail-form-select:focus {
  outline: none;
  border-color: var(--primary-color);
  box-shadow: 0 0 0 3px rgba(45, 43, 135, 0.1);
}

.detail-form-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 16px;
}

/* Linked Features in Detail Panel */
.detail-linked-features {
  background: var(--panel-bg);
  border-radius: var(--radius);
  padding: 20px;
  border: 1px solid var(--border-color);
}

.detail-linked-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 16px;
}

.detail-linked-title {
  font-size: 14px;
  font-weight: 600;
  color: var(--text-color);
  display: flex;
  align-items: center;
  gap: 8px;
}

.detail-linked-title i {
  color: #8b5cf6;
}

.detail-linked-count {
  background: var(--bg-color);
  color: var(--text-muted);
  padding: 4px 10px;
  border-radius: 12px;
  font-size: 12px;
  font-weight: 500;
}

.detail-linked-list {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.detail-linked-item {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px;
  background: var(--bg-color);
  border-radius: var(--radius-sm);
  transition: var(--transition);
}

.detail-linked-item:hover {
  background: #f1f5f9;
}

.detail-linked-icon {
  width: 36px;
  height: 36px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: linear-gradient(135deg, #8b5cf6, #a78bfa);
  color: white;
  border-radius: var(--radius-sm);
  font-size: 14px;
}

.detail-linked-info {
  flex: 1;
  min-width: 0;
}

.detail-linked-name {
  font-weight: 500;
  color: var(--text-color);
  font-size: 14px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.detail-linked-meta {
  font-size: 12px;
  color: var(--text-muted);
}

.detail-linked-empty {
  text-align: center;
  padding: 24px;
  color: var(--text-muted);
}

.detail-linked-empty i {
  font-size: 24px;
  color: var(--text-light);
  margin-bottom: 8px;
  display: block;
}

/* Tree Add Requirement Row */
.tree-add-row {
  display: flex;
  align-items: center;
  padding: 10px 16px 10px 56px;
  cursor: pointer;
  transition: var(--transition);
  border-bottom: 1px solid var(--border-light);
}

.tree-add-row:hover {
  background: #f0fdf4;
}

.tree-add-row i {
  margin-right: 10px;
  color: var(--success);
}

.tree-add-row span {
  font-size: 13px;
  color: var(--success);
  font-weight: 500;
}

/* Responsive Design for Tree Table */
@media (max-width: 1200px) {
  .req-tree-container {
    flex-direction: column;
    height: auto;
    max-height: calc(100vh - var(--header-height) - 120px);
  }

  .req-tree-panel {
    width: 100%;
    max-height: 50vh;
    border-right: none;
    border-bottom: 1px solid var(--border-color);
  }

  .req-detail-panel {
    width: 100%;
    min-height: 400px;
  }

  .tree-col-type,
  .tree-col-priority {
    display: none;
  }

  .cap-type-cell,
  .cap-priority-cell,
  .req-type-cell,
  .req-priority-cell {
    display: none;
  }
}

@media (max-width: 768px) {
  .req-tree-header {
    flex-direction: column;
    gap: 12px;
    align-items: flex-start;
  }

  .tree-col-status,
  .tree-col-features {
    display: none;
  }

  .cap-status-cell,
  .cap-features-cell,
  .req-status-cell,
  .req-features-cell {
    display: none;
  }

  .detail-form-grid {
    grid-template-columns: 1fr;
  }

  .tree-requirement-row {
    padding-left: 40px;
  }

  .tree-add-row {
    padding-left: 40px;
  }
}

/* ============================================
   COMPLIANCE REQUIREMENTS
   ============================================ */

.compliance-view {
    display: flex;
    flex-direction: column;
    gap: 24px;
}

.section-header {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 16px;
    flex-wrap: wrap;
}

.section-subtitle {
    margin-top: 4px;
    font-size: 13px;
    color: var(--text-muted);
}

/* Badge Status Colors */
.badge-required {
    background: rgba(239, 68, 68, 0.1);
    color: #dc2626;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    font-size: 11px;
    padding: 4px 8px;
    border-radius: 4px;
}

.badge-preferred {
    background: rgba(59, 130, 246, 0.1);
    color: #2563eb;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    font-size: 11px;
    padding: 4px 8px;
    border-radius: 4px;
}

/* Card Enhancements for Compliance */
.card-title-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 12px;
    margin-bottom: 4px;
}

.card-subtitle {
    font-size: 12px;
    color: var(--text-muted);
    font-weight: 500;
}

.card-notes {
    font-size: 13px;
    color: var(--text-color);
    line-height: 1.5;
    margin: 0;
}

.card-actions {
    display: flex;
    gap: 8px;
    padding: 12px 16px;
    border-top: 1px solid var(--border-color);
    background: var(--bg-color);
}

/* Empty State */
.empty-state {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 48px 24px;
    text-align: center;
}

/* Select2 Modal Styling */
.select2-container--default .select2-search--dropdown .select2-search__field {
    border: 1px solid var(--border-color);
    background: var(--panel-bg);
    color: var(--text-color);
    padding: 8px 12px;
}

.select2-container--default .select2-results__option--highlighted[aria-selected] {
    background-color: var(--primary-color);
    color: white;
}

.select2-dropdown {
    background-color: var(--panel-bg);
    border: 1px solid var(--border-color);
    box-shadow: var(--shadow-md);
}

.select2-results__option {
    color: var(--text-color);
}

/* Mobile Responsive */
@media (max-width: 768px) {
    .compliance-view .cards-grid {
        grid-template-columns: 1fr;
    }

    .compliance-view .section-header {
        flex-direction: column;
        align-items: stretch;
    }

    .compliance-view .section-header button {
        width: 100%;
    }
}

/* ========================================
   Security Section Redesign
   ======================================== */

/* Security Posture Selector */
.security-posture-section {
    background: var(--panel-bg);
    border: 1px solid var(--border-color);
    border-radius: var(--radius-lg);
    padding: 24px;
    margin-bottom: 24px;
}

.security-posture-header {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    margin-bottom: 20px;
}

.security-posture-title {
    font-size: 18px;
    font-weight: 600;
    color: var(--text-color);
}

.security-posture-subtitle {
    font-size: 13px;
    color: var(--text-muted);
    margin-top: 4px;
}

.security-posture-options {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 12px;
}

@media (max-width: 900px) {
    .security-posture-options {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (max-width: 500px) {
    .security-posture-options {
        grid-template-columns: 1fr;
    }
}

.posture-option {
    border: 2px solid var(--border-color);
    border-radius: var(--radius);
    padding: 16px;
    cursor: pointer;
    transition: all 0.2s ease;
    background: var(--panel-bg);
    position: relative;
}

.posture-option:hover {
    border-color: var(--primary-color);
    background: rgba(45, 43, 135, 0.02);
}

.posture-option.active {
    border-color: var(--primary-color);
    background: rgba(45, 43, 135, 0.05);
}

.posture-option.active::after {
    content: '';
    position: absolute;
    top: 8px;
    right: 8px;
    width: 20px;
    height: 20px;
    background: var(--primary-color);
    border-radius: 50%;
    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='white' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='20 6 9 17 4 12'%3E%3C/polyline%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: center;
}

.posture-option-icon {
    width: 40px;
    height: 40px;
    border-radius: var(--radius);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 20px;
    margin-bottom: 12px;
}

.posture-option.basic .posture-option-icon {
    background: #e0f2fe;
    color: #0284c7;
}

.posture-option.standard .posture-option-icon {
    background: #dbeafe;
    color: #2563eb;
}

.posture-option.enterprise .posture-option-icon {
    background: #e0e7ff;
    color: #4f46e5;
}

.posture-option.custom .posture-option-icon {
    background: #fae8ff;
    color: #a855f7;
}

.posture-option-name {
    font-weight: 600;
    font-size: 14px;
    color: var(--text-color);
    margin-bottom: 4px;
}

.posture-option-desc {
    font-size: 12px;
    color: var(--text-muted);
    line-height: 1.4;
}

/* Security Cards Grid */
.security-cards-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 20px;
    margin: 20px 0;
}

@media (max-width: 1000px) {
    .security-cards-grid {
        grid-template-columns: 1fr;
    }
}

.security-card {
    background: var(--panel-bg);
    border: 1px solid var(--border-color);
    border-radius: var(--radius);
    overflow: hidden;
}

.security-card.full-width {
    grid-column: 1 / -1;
}

.security-card-header {
    padding: 16px 20px;
    border-bottom: 1px solid var(--border-color);
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.security-card-title {
    font-weight: 600;
    font-size: 15px;
    color: var(--text-color);
    display: flex;
    align-items: center;
    gap: 10px;
}

.security-card-title i {
    color: var(--primary-color);
    font-size: 16px;
}

.security-card-hint {
    font-size: 12px;
    color: var(--text-muted);
    margin-top: 2px;
}

.security-card-body {
    padding: 20px;
}

/* Auth Method Cards */
.auth-methods-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
    gap: 12px;
}

.auth-method-card {
    border: 1px solid var(--border-color);
    border-radius: var(--radius);
    padding: 14px;
    cursor: pointer;
    transition: all 0.2s ease;
    position: relative;
}

.auth-method-card:hover {
    border-color: var(--primary-color);
}

.auth-method-card.selected {
    border-color: var(--primary-color);
    background: rgba(45, 43, 135, 0.03);
}

.auth-method-card.disabled {
    opacity: 0.5;
    cursor: not-allowed;
    pointer-events: none;
}

.auth-method-card input[type="checkbox"] {
    position: absolute;
    top: 12px;
    right: 12px;
    width: 18px;
    height: 18px;
    accent-color: var(--primary-color);
}

.auth-method-name {
    font-weight: 600;
    font-size: 13px;
    color: var(--text-color);
    margin-bottom: 4px;
    padding-right: 24px;
}

.auth-method-desc {
    font-size: 11px;
    color: var(--text-muted);
    line-height: 1.4;
}

.auth-method-badges {
    display: flex;
    gap: 6px;
    margin-top: 8px;
    flex-wrap: wrap;
}

.auth-badge {
    font-size: 10px;
    padding: 2px 6px;
    border-radius: 4px;
    font-weight: 500;
}

.auth-badge.recommended {
    background: #d1fae5;
    color: #047857;
}

.auth-badge.primary {
    background: #dbeafe;
    color: #1d4ed8;
}

.auth-badge.secondary {
    background: #f3f4f6;
    color: #6b7280;
}

.auth-badge.users {
    background: #fef3c7;
    color: #92400e;
}

.auth-badge.services {
    background: #e0e7ff;
    color: #4338ca;
}

/* Divider */
.security-divider {
    height: 1px;
    background: var(--border-color);
    margin: 20px 0;
}

/* Form Sections */
.security-form-section {
    margin-bottom: 20px;
}

.security-form-section:last-child {
    margin-bottom: 0;
}

.security-form-label {
    font-size: 13px;
    font-weight: 600;
    color: var(--text-color);
    margin-bottom: 8px;
    display: flex;
    align-items: center;
    gap: 8px;
}

.security-form-hint {
    font-size: 11px;
    color: var(--text-muted);
    margin-top: 4px;
}

/* Tooltip Icon */
.info-tooltip {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 16px;
    height: 16px;
    border-radius: 50%;
    background: var(--border-color);
    color: var(--text-muted);
    font-size: 10px;
    cursor: help;
    position: relative;
}

.info-tooltip:hover::after {
    content: attr(data-tooltip);
    position: absolute;
    bottom: calc(100% + 8px);
    left: 50%;
    transform: translateX(-50%);
    background: var(--text-color);
    color: white;
    padding: 8px 12px;
    border-radius: var(--radius-sm);
    font-size: 11px;
    font-weight: 400;
    white-space: nowrap;
    max-width: 280px;
    white-space: normal;
    z-index: 100;
    box-shadow: var(--shadow-md);
}

.info-tooltip:hover::before {
    content: '';
    position: absolute;
    bottom: calc(100% + 2px);
    left: 50%;
    transform: translateX(-50%);
    border: 6px solid transparent;
    border-top-color: var(--text-color);
    z-index: 100;
}

/* Authorization Preview */
.auth-preview {
    background: var(--bg-color);
    border: 1px solid var(--border-color);
    border-radius: var(--radius-sm);
    padding: 12px 16px;
    font-family: var(--font-mono);
    font-size: 12px;
    color: var(--text-muted);
}

.auth-preview-row {
    display: flex;
    gap: 8px;
    margin-bottom: 4px;
}

.auth-preview-row:last-child {
    margin-bottom: 0;
}

.auth-preview-label {
    color: var(--primary-color);
    min-width: 80px;
}

/* Audit Checkboxes */
.audit-checks {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.audit-check-item {
    display: flex;
    align-items: center;
    gap: 10px;
    cursor: pointer;
}

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

.audit-check-label {
    font-size: 13px;
    color: var(--text-color);
}

/* Session Warning */
.session-warning {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 11px;
    color: var(--warning);
    margin-top: 6px;
}

.session-warning i {
    font-size: 12px;
}

/* Data Classification Radio */
.classification-options {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 10px;
}

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

.classification-option {
    border: 1px solid var(--border-color);
    border-radius: var(--radius-sm);
    padding: 12px;
    cursor: pointer;
    transition: all 0.2s ease;
    display: flex;
    align-items: flex-start;
    gap: 10px;
}

.classification-option:hover {
    border-color: var(--primary-color);
}

.classification-option.selected {
    border-color: var(--primary-color);
    background: rgba(45, 43, 135, 0.03);
}

.classification-option input[type="radio"] {
    width: 18px;
    height: 18px;
    accent-color: var(--primary-color);
    margin-top: 2px;
}

.classification-option-content {
    flex: 1;
}

.classification-option-name {
    font-weight: 600;
    font-size: 13px;
    color: var(--text-color);
}

.classification-option-desc {
    font-size: 11px;
    color: var(--text-muted);
    margin-top: 2px;
}

/* Toggle Switch */
.toggle-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 12px 0;
    border-bottom: 1px solid var(--border-light);
}

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

.toggle-row-content {
    flex: 1;
}

.toggle-row-label {
    font-size: 13px;
    color: var(--text-color);
}

.toggle-row-hint {
    font-size: 11px;
    color: var(--text-muted);
}

.toggle-switch {
    position: relative;
    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: #ccc;
    transition: 0.3s;
    border-radius: 24px;
}

.toggle-slider:before {
    position: absolute;
    content: "";
    height: 18px;
    width: 18px;
    left: 3px;
    bottom: 3px;
    background-color: white;
    transition: 0.3s;
    border-radius: 50%;
}

.toggle-switch input:checked + .toggle-slider {
    background-color: var(--primary-color);
}

.toggle-switch input:checked + .toggle-slider:before {
    transform: translateX(20px);
}

.toggle-switch input:disabled + .toggle-slider {
    opacity: 0.5;
    cursor: not-allowed;
}

/* Locked indicator */
.locked-indicator {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 11px;
    color: var(--text-muted);
}

.locked-indicator i {
    font-size: 10px;
}

/* API Security Options */
.api-auth-options {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 10px;
}

@media (max-width: 700px) {
    .api-auth-options {
        grid-template-columns: 1fr;
    }
}

.api-auth-option {
    border: 1px solid var(--border-color);
    border-radius: var(--radius-sm);
    padding: 14px;
    cursor: pointer;
    transition: all 0.2s ease;
    text-align: center;
}

.api-auth-option:hover {
    border-color: var(--primary-color);
}

.api-auth-option.selected {
    border-color: var(--primary-color);
    background: rgba(45, 43, 135, 0.03);
}

.api-auth-option input[type="radio"] {
    display: none;
}

.api-auth-option-name {
    font-weight: 600;
    font-size: 13px;
    color: var(--text-color);
}

.api-auth-option-desc {
    font-size: 11px;
    color: var(--text-muted);
    margin-top: 4px;
}

/* CORS Options */
.cors-options {
    display: flex;
    gap: 10px;
}

.cors-option {
    flex: 1;
    border: 1px solid var(--border-color);
    border-radius: var(--radius-sm);
    padding: 12px;
    cursor: pointer;
    transition: all 0.2s ease;
    text-align: center;
}

.cors-option:hover {
    border-color: var(--primary-color);
}

.cors-option.selected {
    border-color: var(--primary-color);
    background: rgba(45, 43, 135, 0.03);
}

.cors-option input[type="radio"] {
    display: none;
}

/* Security Testing Checks */
.testing-checks-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 12px;
}

@media (max-width: 700px) {
    .testing-checks-grid {
        grid-template-columns: 1fr;
    }
}

.testing-check-card {
    border: 1px solid var(--border-color);
    border-radius: var(--radius-sm);
    padding: 14px;
    display: flex;
    align-items: flex-start;
    gap: 12px;
    cursor: pointer;
    transition: all 0.2s ease;
}

.testing-check-card:hover {
    border-color: var(--primary-color);
}

.testing-check-card.checked {
    border-color: var(--success);
    background: rgba(16, 185, 129, 0.03);
}

.testing-check-card input[type="checkbox"] {
    width: 18px;
    height: 18px;
    accent-color: var(--success);
    margin-top: 2px;
}

.testing-check-content {
    flex: 1;
}

.testing-check-name {
    font-weight: 600;
    font-size: 13px;
    color: var(--text-color);
}

.testing-check-desc {
    font-size: 11px;
    color: var(--text-muted);
    margin-top: 2px;
}

/* Quality Gates Preview */
.quality-gates-preview {
    background: #fef2f2;
    border: 1px solid #fecaca;
    border-radius: var(--radius-sm);
    padding: 14px;
    margin-top: 16px;
}

.quality-gates-title {
    font-weight: 600;
    font-size: 13px;
    color: #dc2626;
    margin-bottom: 8px;
    display: flex;
    align-items: center;
    gap: 8px;
}

.quality-gates-list {
    font-size: 12px;
    color: #991b1b;
    line-height: 1.6;
}

/* Section Accordion */
.security-accordion {
    border: 1px solid var(--border-color);
    border-radius: var(--radius);
    margin-top: 12px;
    overflow: hidden;
}

.security-accordion-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 12px 16px;
    background: var(--bg-color);
    cursor: pointer;
    transition: background 0.2s;
}

.security-accordion-header:hover {
    background: var(--border-light);
}

.security-accordion-title {
    font-size: 13px;
    font-weight: 600;
    color: var(--text-color);
}

.security-accordion-icon {
    color: var(--text-muted);
    transition: transform 0.2s;
}

.security-accordion.open .security-accordion-icon {
    transform: rotate(180deg);
}

.security-accordion-body {
    display: none;
    padding: 16px;
    border-top: 1px solid var(--border-color);
}

.security-accordion.open .security-accordion-body {
    display: block;
}

/* Input with unit */
.input-with-unit {
    display: flex;
    align-items: center;
    gap: 8px;
}

.input-unit {
    font-size: 12px;
    color: var(--text-muted);
}

/* Grid helpers */
.security-grid-2 {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 16px;
}

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

.security-grid-3 {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 16px;
}

@media (max-width: 800px) {
    .security-grid-3 {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (max-width: 500px) {
    .security-grid-3 {
        grid-template-columns: 1fr;
    }
}

/* ============================================
   MODERN ERD VISUALIZATION STYLES
   ============================================ */

/* Main View Container */
.db-design-view-modern {
  display: flex;
  flex-direction: column;
  gap: 24px;
}

/* ERD Section */
.erd-section {
  background: white;
  border-radius: 12px;
  border: 1px solid var(--border-color);
  overflow: hidden;
  box-shadow: 0 1px 3px rgba(0,0,0,0.05);
}

.erd-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 16px 20px;
  border-bottom: 1px solid var(--border-color);
  background: linear-gradient(to right, #fafbfc, #ffffff);
}

.erd-title-area {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.erd-main-title {
  font-size: 18px;
  font-weight: 600;
  color: var(--text-color);
  display: flex;
  align-items: center;
  gap: 10px;
  margin: 0;
}

.erd-main-title i {
  color: var(--primary);
}

.erd-subtitle {
  font-size: 13px;
  color: var(--text-muted);
  margin: 0;
}

.erd-toolbar {
  display: flex;
  align-items: center;
  gap: 16px;
}

.erd-zoom-controls {
  display: flex;
  align-items: center;
  gap: 4px;
  background: var(--bg-color);
  padding: 4px;
  border-radius: 8px;
  border: 1px solid var(--border-color);
}

.erd-tool-btn {
  width: 32px;
  height: 32px;
  display: flex;
  align-items: center;
  justify-content: center;
  border: none;
  background: transparent;
  border-radius: 6px;
  cursor: pointer;
  color: var(--text-muted);
  transition: all 0.15s ease;
}

.erd-tool-btn:hover {
  background: white;
  color: var(--primary);
  box-shadow: 0 1px 2px rgba(0,0,0,0.05);
}

.erd-zoom-level {
  min-width: 48px;
  text-align: center;
  font-size: 12px;
  font-weight: 600;
  color: var(--text-color);
}

.erd-actions {
  display: flex;
  gap: 8px;
}

/* ERD Canvas */
.erd-canvas-container {
  position: relative;
  min-height: 500px;
  background: 
    linear-gradient(90deg, #f8fafc 1px, transparent 1px),
    linear-gradient(#f8fafc 1px, transparent 1px),
    linear-gradient(to bottom right, #fafbfc, #f1f5f9);
  background-size: 20px 20px, 20px 20px, 100% 100%;
  overflow: auto;
}

.erd-canvas {
  position: relative;
  min-width: 100%;
  min-height: 100%;
  transform-origin: 0 0;
  transition: transform 0.1s ease;
}

/* ERD Empty State */
.erd-empty-state {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  min-height: 400px;
  text-align: center;
  padding: 40px;
}

.erd-empty-icon {
  width: 80px;
  height: 80px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: linear-gradient(135deg, #eff6ff, #dbeafe);
  border-radius: 20px;
  margin-bottom: 20px;
}

.erd-empty-icon i {
  font-size: 32px;
  color: var(--primary);
}

.erd-empty-state h3 {
  font-size: 18px;
  font-weight: 600;
  color: var(--text-color);
  margin: 0 0 8px;
}

.erd-empty-state p {
  font-size: 14px;
  color: var(--text-muted);
  max-width: 300px;
  margin: 0 0 20px;
}

/* ERD Entity Cards */
.erd-entity-card {
  position: absolute;
  width: 280px;
  background: white;
  border-radius: 12px;
  border: 2px solid #e2e8f0;
  box-shadow: 0 4px 12px rgba(0,0,0,0.06);
  cursor: pointer;
  transition: all 0.2s ease;
  overflow: hidden;
  z-index: 10;
}

.erd-entity-card:hover {
  border-color: var(--primary);
  box-shadow: 0 8px 24px rgba(59,130,246,0.15);
  transform: translateY(-2px);
  z-index: 20;
}

.erd-entity-card.selected {
  border-color: var(--primary);
  box-shadow: 0 0 0 3px rgba(59,130,246,0.2);
}

.erd-entity-header {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 12px 14px;
  background: linear-gradient(135deg, #3b82f6 0%, #2563eb 100%);
  color: white;
}

.erd-entity-icon {
  width: 28px;
  height: 28px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(255,255,255,0.2);
  border-radius: 6px;
  font-size: 12px;
}

.erd-entity-title {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.erd-entity-name {
  font-weight: 600;
  font-size: 14px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.erd-entity-module {
  font-size: 11px;
  opacity: 0.8;
}

.erd-entity-badges {
  display: flex;
  gap: 4px;
}

.erd-entity-badge {
  font-size: 9px;
  font-weight: 700;
  padding: 3px 6px;
  border-radius: 4px;
  text-transform: uppercase;
  background: rgba(255,255,255,0.2);
}

.erd-entity-badge.pk {
  background: #fef3c7;
  color: #92400e;
}

.erd-entity-badge.fk {
  background: #dbeafe;
  color: #1e40af;
}

.erd-entity-badge.idx {
  background: #d1fae5;
  color: #065f46;
}

/* ERD Entity Fields */
.erd-entity-fields {
  padding: 8px 0;
  max-height: 180px;
  overflow-y: auto;
}

.erd-no-fields {
  padding: 12px 14px;
  text-align: center;
  color: var(--text-muted);
  font-size: 12px;
}

.erd-field-row {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 6px 14px;
  font-size: 12px;
  transition: background 0.15s;
}

.erd-field-row:hover {
  background: #f8fafc;
}

.erd-field-row.pk {
  background: #fffbeb;
}

.erd-field-row.fk {
  background: #eff6ff;
}

.erd-field-key {
  width: 16px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.erd-field-bullet {
  width: 4px;
  height: 4px;
  background: #cbd5e1;
  border-radius: 50%;
}

.pk-icon {
  color: #f59e0b;
  font-size: 11px;
}

.fk-icon {
  color: #3b82f6;
  font-size: 11px;
}

.idx-icon {
  color: #10b981;
  font-size: 11px;
}

.erd-field-info {
  flex: 1;
  display: flex;
  align-items: center;
  gap: 4px;
  min-width: 0;
}

.erd-field-info .erd-field-name {
  font-weight: 500;
  color: var(--text-color);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.erd-required-mark {
  color: #ef4444;
  font-weight: bold;
}

.erd-field-type-badge {
  display: flex;
  align-items: center;
  gap: 4px;
  padding: 2px 6px;
  background: #f1f5f9;
  border-radius: 4px;
  font-size: 10px;
  color: var(--text-muted);
  font-family: var(--font-mono);
}

.erd-field-type-badge i {
  font-size: 9px;
}

.erd-fields-overflow {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  padding: 8px 14px;
  color: var(--text-muted);
  font-size: 11px;
  background: #f8fafc;
  border-top: 1px solid #f1f5f9;
}

/* ERD Entity Footer */
.erd-entity-footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 8px 14px;
  background: #fafbfc;
  border-top: 1px solid #f1f5f9;
}

.erd-entity-footer .erd-field-count {
  font-size: 11px;
  color: var(--text-muted);
  display: flex;
  align-items: center;
  gap: 6px;
}

.erd-entity-expand {
  width: 24px;
  height: 24px;
  display: flex;
  align-items: center;
  justify-content: center;
  border: none;
  background: transparent;
  border-radius: 4px;
  cursor: pointer;
  color: var(--text-muted);
  transition: all 0.15s;
}

.erd-entity-expand:hover {
  background: var(--primary);
  color: white;
}

/* ERD Relationships SVG */
.erd-relationships-svg {
  position: absolute;
  top: 0;
  left: 0;
  pointer-events: none;
  z-index: 5;
  overflow: visible;
}

.erd-rel-line {
  transition: stroke-width 0.2s;
}

.erd-rel-line:hover {
  stroke-width: 3;
}

.erd-rel-label {
  font-size: 10px;
  font-weight: 600;
  fill: #64748b;
}

/* ERD Legend */
.erd-legend {
  position: absolute;
  bottom: 16px;
  right: 16px;
  background: white;
  border: 1px solid var(--border-color);
  border-radius: 10px;
  padding: 12px 16px;
  box-shadow: 0 2px 8px rgba(0,0,0,0.06);
  z-index: 100;
}

.erd-legend-title {
  font-size: 11px;
  font-weight: 600;
  color: var(--text-muted);
  text-transform: uppercase;
  letter-spacing: 0.5px;
  margin-bottom: 10px;
}

.erd-legend-items {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.erd-legend-item {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 11px;
  color: var(--text-color);
}

.erd-legend-symbol {
  width: 20px;
  height: 20px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 4px;
  font-size: 10px;
}

.erd-legend-symbol.pk {
  background: #fef3c7;
  color: #f59e0b;
}

.erd-legend-symbol.fk {
  background: #dbeafe;
  color: #3b82f6;
}

.erd-legend-symbol.idx {
  background: #d1fae5;
  color: #10b981;
}

.erd-legend-divider {
  height: 1px;
  background: var(--border-color);
  margin: 4px 0;
}

.erd-legend-line {
  width: 24px;
  height: 2px;
  border-radius: 1px;
}

.erd-legend-line.one-to-one {
  background: #8b5cf6;
}

.erd-legend-line.one-to-many {
  background: #3b82f6;
}

.erd-legend-line.many-to-many {
  background: #f59e0b;
  background: repeating-linear-gradient(
    90deg,
    #f59e0b 0px,
    #f59e0b 4px,
    transparent 4px,
    transparent 8px
  );
}

/* Database Connections Section */
.db-connections-section {
  background: white;
  border-radius: 12px;
  border: 1px solid var(--border-color);
  overflow: hidden;
  box-shadow: 0 1px 3px rgba(0,0,0,0.05);
}

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

.connections-title {
  font-size: 16px;
  font-weight: 600;
  color: var(--text-color);
  display: flex;
  align-items: center;
  gap: 10px;
  margin: 0;
}

.connections-title i {
  color: var(--primary);
}

.connections-subtitle {
  font-size: 13px;
  color: var(--text-muted);
  margin: 4px 0 0;
}

/* Connections Grid */
.connections-grid {
  padding: 16px 20px;
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap: 16px;
}

.connections-empty {
  grid-column: 1 / -1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 40px;
  text-align: center;
}

.connections-empty-icon {
  width: 60px;
  height: 60px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: #f1f5f9;
  border-radius: 16px;
  margin-bottom: 16px;
}

.connections-empty-icon i {
  font-size: 24px;
  color: var(--text-muted);
}

.connections-empty p {
  font-size: 14px;
  color: var(--text-color);
  margin: 0;
}

.connections-empty-hint {
  font-size: 12px !important;
  color: var(--text-muted) !important;
  margin-top: 4px !important;
}

/* Connection Cards */
.connection-card {
  background: white;
  border: 1px solid var(--border-color);
  border-radius: 10px;
  overflow: hidden;
  transition: all 0.2s ease;
}

.connection-card:hover {
  border-color: var(--primary);
  box-shadow: 0 4px 12px rgba(59,130,246,0.1);
}

.connection-card-header {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  padding: 14px 14px 0;
}

.connection-type-icon {
  width: 40px;
  height: 40px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 10px;
  font-size: 18px;
}

.connection-status-indicator {
  width: 10px;
  height: 10px;
  border-radius: 50%;
}

.connection-card-body {
  padding: 12px 14px;
}

.connection-card .connection-name {
  font-size: 15px;
  font-weight: 600;
  color: var(--text-color);
  margin: 0 0 8px;
}

.connection-card .connection-details {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.connection-detail {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 12px;
  color: var(--text-muted);
}

.connection-detail i {
  width: 14px;
  font-size: 11px;
  color: #94a3b8;
}

.connection-card-footer {
  display: flex;
  justify-content: flex-end;
  gap: 4px;
  padding: 10px 14px;
  background: #fafbfc;
  border-top: 1px solid #f1f5f9;
}

.conn-action-btn {
  width: 32px;
  height: 32px;
  display: flex;
  align-items: center;
  justify-content: center;
  border: none;
  background: transparent;
  border-radius: 6px;
  cursor: pointer;
  color: var(--text-muted);
  transition: all 0.15s;
}

.conn-action-btn:hover {
  background: var(--primary);
  color: white;
}

.conn-action-btn.danger:hover {
  background: #ef4444;
}

/* Entity Details Modal Styles */
.entity-detail-grid {
  display: flex;
  flex-direction: column;
  gap: 24px;
}

.entity-detail-section h4 {
  font-size: 14px;
  font-weight: 600;
  color: var(--text-color);
  display: flex;
  align-items: center;
  gap: 8px;
  margin: 0 0 12px;
  padding-bottom: 8px;
  border-bottom: 1px solid var(--border-color);
}

.entity-detail-section h4 i {
  color: var(--primary);
}

.entity-detail-items {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
  gap: 16px;
}

.entity-detail-item {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.entity-detail-item.full-width {
  grid-column: 1 / -1;
}

.entity-detail-item label {
  font-size: 11px;
  font-weight: 500;
  color: var(--text-muted);
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

.entity-detail-item span {
  font-size: 14px;
  color: var(--text-color);
}

.entity-type-badge {
  display: inline-flex;
  padding: 2px 8px;
  background: #f1f5f9;
  border-radius: 4px;
  font-size: 12px !important;
  font-weight: 500;
  text-transform: capitalize;
}

.entity-fields-table-wrapper {
  overflow-x: auto;
  border: 1px solid var(--border-color);
  border-radius: 8px;
}

.entity-fields-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 13px;
}

.entity-fields-table th {
  text-align: left;
  padding: 10px 12px;
  background: #f8fafc;
  font-weight: 600;
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  color: var(--text-muted);
  border-bottom: 1px solid var(--border-color);
}

.entity-fields-table td {
  padding: 10px 12px;
  border-bottom: 1px solid #f1f5f9;
}

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

.entity-fields-table code {
  font-size: 12px;
  padding: 2px 6px;
  background: #f1f5f9;
  border-radius: 4px;
  color: var(--primary);
}

.required-indicator {
  color: #ef4444;
  font-weight: bold;
  margin-left: 4px;
}

.constraint-badge {
  display: inline-flex;
  padding: 2px 5px;
  border-radius: 3px;
  font-size: 9px;
  font-weight: 700;
  margin-right: 4px;
}

.constraint-badge.pk {
  background: #fef3c7;
  color: #92400e;
}

.constraint-badge.fk {
  background: #dbeafe;
  color: #1e40af;
}

.constraint-badge.unique {
  background: #f3e8ff;
  color: #7c3aed;
}

.constraint-badge.idx {
  background: #d1fae5;
  color: #065f46;
}

.entity-relationships-list {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.entity-rel-item {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 12px;
  background: #f8fafc;
  border-radius: 8px;
}

.rel-direction {
  width: 24px;
  height: 24px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  font-size: 10px;
}

.rel-direction.outgoing {
  background: #dbeafe;
  color: #3b82f6;
}

.rel-direction.incoming {
  background: #fef3c7;
  color: #f59e0b;
}

.rel-other-entity {
  flex: 1;
  font-weight: 500;
  color: var(--text-color);
}

.rel-type-pill {
  padding: 4px 10px;
  border-radius: 20px;
  font-size: 11px;
  font-weight: 600;
}

.no-data {
  color: var(--text-muted);
  font-style: italic;
  padding: 12px;
  text-align: center;
}

/* Responsive */
@media (max-width: 768px) {
  .erd-header {
    flex-direction: column;
    gap: 12px;
    align-items: flex-start;
  }
  
  .erd-toolbar {
    width: 100%;
    justify-content: space-between;
  }
  
  .connections-grid {
    grid-template-columns: 1fr;
  }
  
  .erd-legend {
    position: static;
    margin: 16px;
  }
}

/* ===================================================================
   BRD (Business Requirements Document) Styles
   =================================================================== */

.brd-container {
  display: flex;
  flex-direction: column;
  min-height: 100%;
  background: var(--bg);
}

/* Loading State */
.brd-loading {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  height: 100%;
  gap: 16px;
}

.brd-loading .spinner {
  width: 48px;
  height: 48px;
  border: 4px solid var(--border);
  border-top-color: var(--primary);
  border-radius: 50%;
  animation: spin 0.8s linear infinite;
}

.brd-loading p {
  color: var(--text-muted);
  font-size: 14px;
}

/* Header */
.brd-header {
  position: sticky;
  top: 0;
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 20px 32px;
  background: rgba(255, 255, 255, 0.95);
  border-bottom: 1px solid rgba(0, 0, 0, 0.06);
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.04);
  z-index: 100;
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
}

.brd-header-left {
  display: flex;
  align-items: center;
  gap: 16px;
}

.brd-title {
  font-size: 22px;
  font-weight: 700;
  margin: 0;
  display: flex;
  align-items: center;
  gap: 10px;
  color: var(--text);
  letter-spacing: -0.01em;
}

.brd-title i {
  color: var(--primary);
  opacity: 0.9;
}

.brd-meta {
  display: flex;
  align-items: center;
  gap: 12px;
}

.brd-save-status {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 13px;
  color: var(--success, #22c55e);
  padding: 6px 12px;
  background: var(--success-alpha, rgba(34, 197, 94, 0.15));
  border-radius: 6px;
  border: 1px solid var(--success, #22c55e);
  animation: fadeInOut 3s ease-in-out;
}

.brd-save-status i {
  font-size: 12px;
}

@keyframes fadeInOut {
  0% {
    opacity: 0;
    transform: translateY(-5px);
  }
  10% {
    opacity: 1;
    transform: translateY(0);
  }
  90% {
    opacity: 1;
    transform: translateY(0);
  }
  100% {
    opacity: 0;
    transform: translateY(-5px);
  }
}

.brd-last-updated {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 13px;
  color: var(--text-muted);
  padding: 6px 12px;
  background: var(--bg);
  border-radius: 6px;
  border: 1px solid var(--border-subtle);
}

.brd-last-updated i {
  font-size: 12px;
  opacity: 0.7;
}

/* Auto-save flash animation */
.brd-last-updated.save-flash {
  background: var(--success-alpha, rgba(34, 197, 94, 0.15));
  border-color: var(--success, #22c55e);
  color: var(--success, #22c55e);
  transition: all 0.3s ease;
}

.brd-last-updated.save-flash i {
  color: var(--success, #22c55e);
  opacity: 1;
}

.brd-version-group {
  display: flex;
  align-items: center;
  gap: 4px;
}

.brd-version-group .btn.icon-btn {
  width: 28px;
  height: 28px;
  min-width: 28px;
  padding: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 6px;
  background: var(--primary-alpha);
  color: var(--primary);
  border: 1px solid var(--primary);
  font-size: 12px;
}

.brd-version-group .btn.icon-btn:hover {
  background: var(--primary);
  color: white;
}

/* Checkbox label in header */
.checkbox-label {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px 12px;
  border-radius: 6px;
  cursor: pointer;
  font-size: 14px;
  color: var(--text);
  background: var(--bg);
  border: 1px solid var(--border);
  transition: all 0.2s ease;
}

.checkbox-label:hover {
  border-color: var(--primary);
  background: var(--primary-alpha);
}

.checkbox-label input[type="checkbox"] {
  width: 16px;
  height: 16px;
  accent-color: var(--primary);
}

.checkbox-label.sm {
  padding: 6px 10px;
  font-size: 13px;
}

.checkbox-label i {
  font-size: 14px;
}

/* Version controls in header */
.brd-version-controls {
  display: flex;
  align-items: center;
  gap: 4px;
}

.brd-version-select {
  padding: 6px 10px;
  font-size: 13px;
  border-radius: 6px;
  border: 1px solid var(--border);
  background: var(--bg);
  color: var(--text);
  cursor: pointer;
  min-width: 60px;
}

.brd-version-select:focus {
  outline: none;
  border-color: var(--primary);
}

/* Sync checkbox styling */
.brd-sync-checkbox {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 6px 12px;
  border-radius: 6px;
  cursor: pointer;
  font-size: 13px;
  color: var(--text);
  background: var(--bg);
  border: 1px solid var(--border);
  transition: all 0.2s ease;
}

.brd-sync-checkbox:hover {
  border-color: var(--primary);
  background: var(--primary-alpha);
}

.brd-sync-checkbox input[type="checkbox"] {
  width: 16px;
  height: 16px;
  accent-color: var(--primary);
  cursor: pointer;
}

.brd-sync-checkbox span {
  white-space: nowrap;
}

/* Version modal styles */
.version-options {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.version-option {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  padding: 16px;
  border: 1px solid var(--border);
  border-radius: 8px;
  cursor: pointer;
  transition: all 0.2s ease;
  background: var(--bg);
}

.version-option:hover {
  border-color: var(--primary);
  background: var(--primary-alpha);
}

.version-option:has(input:checked) {
  border-color: var(--primary);
  background: var(--primary-alpha);
}

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

.version-option-content {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.version-label {
  font-weight: 600;
  color: var(--text);
}

.version-input {
  width: 100%;
  max-width: 120px;
}

.brd-status {
  padding: 6px 14px;
  border-radius: 16px;
  font-size: 12px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  border: 1px solid;
}

.brd-status.status-draft {
  background: linear-gradient(135deg, rgba(100, 100, 100, 0.08), rgba(100, 100, 100, 0.12));
  color: #64748b;
  border-color: rgba(100, 100, 100, 0.15);
}

.brd-status.status-in_review {
  background: linear-gradient(135deg, rgba(255, 193, 7, 0.08), rgba(255, 193, 7, 0.12));
  color: #f59e0b;
  border-color: rgba(255, 193, 7, 0.2);
}

.brd-status.status-approved {
  background: linear-gradient(135deg, rgba(76, 175, 80, 0.08), rgba(76, 175, 80, 0.12));
  color: #10b981;
  border-color: rgba(76, 175, 80, 0.2);
}

.brd-version {
  font-size: 13px;
  color: var(--text-muted);
  font-weight: 500;
}

.brd-version-dropdown {
  position: relative;
}

.brd-version-select {
  padding: 6px 14px;
  border: 1.5px solid rgba(0, 0, 0, 0.08);
  border-radius: 8px;
  background: var(--bg);
  color: var(--text);
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.2s ease;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.04);
}

.brd-version-select:hover {
  border-color: var(--primary);
  background: var(--surface);
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.06);
  transform: translateY(-1px);
}

.brd-version-select:focus {
  outline: none;
  border-color: var(--primary);
  box-shadow: 0 0 0 3px rgba(var(--primary-rgb), 0.12), 0 2px 4px rgba(0, 0, 0, 0.06);
}

.brd-sync-badge {
  padding: 4px 10px;
  background: var(--primary);
  color: white;
  border-radius: 12px;
  font-size: 12px;
  font-weight: 600;
}

.brd-timestamp {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 6px 14px;
  border-radius: 8px;
  background: rgba(0, 0, 0, 0.03);
  font-size: 12px;
  color: var(--text-muted);
  font-weight: 500;
}

.brd-timestamp i {
  font-size: 11px;
  opacity: 0.7;
}

.brd-version-dropdown {
  display: flex;
  align-items: center;
  gap: 6px;
}

.brd-version-dropdown .btn {
  padding: 6px 10px;
  min-width: auto;
}

.brd-sync-checkbox {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px 12px;
  border-radius: 8px;
  background: rgba(0, 0, 0, 0.02);
  cursor: pointer;
  transition: all 0.2s ease;
}

.brd-sync-checkbox:hover {
  background: rgba(0, 0, 0, 0.04);
}

.brd-sync-checkbox input[type="checkbox"] {
  cursor: pointer;
}

.brd-sync-checkbox span {
  font-size: 13px;
  color: var(--text);
  font-weight: 500;
}

.brd-version-options {
  display: flex;
  flex-direction: column;
  gap: 12px;
  margin-top: 16px;
}

.brd-version-option {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  padding: 16px;
  border: 2px solid var(--border);
  border-radius: 8px;
  cursor: pointer;
  transition: all 0.2s ease;
}

.brd-version-option:hover {
  border-color: var(--primary);
  background: rgba(var(--primary-rgb), 0.02);
}

.brd-version-option input[type="radio"]:checked + div {
  color: var(--primary);
}

.brd-version-option input[type="radio"]:checked ~ * {
  border-color: var(--primary);
}

.brd-version-option h4 {
  margin: 0;
  font-size: 14px;
  font-weight: 600;
}

.brd-version-option p {
  margin: 0;
  font-size: 12px;
  color: var(--text-muted);
}

.version-option-content {
  flex: 1;
}

.version-option-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 4px;
}

.version-input {
  width: 80px;
  padding: 6px 10px;
  border: 1px solid var(--border);
  border-radius: 6px;
  font-size: 14px;
  font-weight: 600;
  text-align: center;
  background: var(--surface);
  color: var(--text);
}

.version-input:focus {
  outline: none;
  border-color: var(--primary);
  box-shadow: 0 0 0 3px rgba(var(--primary-rgb), 0.1);
}

.brd-version-option:has(input[type="radio"]:checked) .version-input {
  border-color: var(--primary);
  background: rgba(var(--primary-rgb), 0.05);
}

.version-current {
  margin-bottom: 16px;
  padding: 12px 16px;
  background: var(--hover);
  border-radius: 8px;
  font-size: 14px;
}

.brd-header-right {
  display: flex;
  gap: 8px;
  align-items: center;
}

/* Three-panel layout */
/* Content wrapper - full width */
.brd-content-wrapper {
  flex: 1;
}

.brd-editor-panel {
  min-height: 100%;
  background: #f8f9fc;
}

/* Legacy panel styles - kept for compatibility */
.brd-panels {
  display: grid;
  grid-template-columns: 1fr;
  height: calc(100vh - 180px);
  overflow: hidden;
}

.brd-panel {
  background: var(--surface);
}

.brd-outline-panel {
  display: none;
}

.brd-context-panel {
  display: none;
}

/* Outline Panel */
.brd-outline-header {
  padding: 16px;
  border-bottom: 1px solid var(--border);
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.brd-outline-header h3 {
  font-size: 14px;
  font-weight: 600;
  margin: 0;
}

.brd-completion {
  font-size: 12px;
  color: var(--text-muted);
}

.brd-outline {
  padding: 8px;
}

.brd-outline-item {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 10px 12px;
  border-radius: 6px;
  cursor: pointer;
  margin-bottom: 4px;
  transition: all 0.2s;
}

.brd-outline-item:hover {
  background: var(--hover);
}

.brd-outline-item.active {
  background: var(--primary-alpha);
  color: var(--primary);
}

.brd-outline-item-left {
  display: flex;
  align-items: center;
  gap: 10px;
}

.brd-completion-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  flex-shrink: 0;
}

.brd-completion-dot.empty {
  background: var(--border);
}

.brd-completion-dot.partial {
  background: #ffc107;
}

.brd-completion-dot.complete {
  background: #4caf50;
}

.brd-outline-label {
  font-size: 14px;
  font-weight: 500;
}

.brd-outline-item-right {
  display: flex;
  align-items: center;
  gap: 8px;
}

.brd-linked-icon {
  font-size: 12px;
  color: var(--primary);
}

.brd-outline-completion {
  font-size: 12px;
  color: var(--text-muted);
}

/* Editor Panel */
.brd-editor-panel {
  padding: 0;
}

/* All sections layout */
.brd-all-sections {
  max-width: 1200px;
  margin: 0 auto;
  padding: 40px 32px;
  background: #f8f9fc;
}

.brd-section {
  margin-bottom: 56px;
  padding: 32px;
  background: var(--surface);
  border-radius: 12px;
  border: 1px solid rgba(0, 0, 0, 0.04);
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.02), 0 1px 2px rgba(0, 0, 0, 0.04);
  transition: all 0.2s ease;
}

.brd-section:hover {
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.04), 0 2px 4px rgba(0, 0, 0, 0.06);
  border-color: rgba(0, 0, 0, 0.06);
}

.brd-section:last-child {
  margin-bottom: 0;
}

.brd-section-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 28px;
  padding-bottom: 20px;
  border-bottom: 2px solid rgba(0, 0, 0, 0.06);
}

.brd-section-header h2 {
  font-size: 26px;
  font-weight: 700;
  margin: 0;
  display: flex;
  align-items: center;
  gap: 14px;
  color: var(--text);
  letter-spacing: -0.02em;
}

.brd-section-header h2 i {
  color: var(--primary);
  font-size: 24px;
  opacity: 0.95;
}

.brd-section-content {
  max-width: 100%;
}

/* Save version modal */
.brd-save-options {
  display: flex;
  flex-direction: column;
  gap: 12px;
  margin-top: 16px;
}

.brd-save-option {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  padding: 16px;
  border: 2px solid var(--border);
  border-radius: 8px;
  cursor: pointer;
  transition: all 0.2s;
}

.brd-save-option:hover {
  border-color: var(--primary);
  background: var(--primary-alpha);
}

.brd-save-option input[type="radio"] {
  margin-top: 2px;
}

.brd-save-option input[type="radio"]:checked ~ .brd-save-option-content {
  color: var(--primary);
}

.brd-save-option-content h4 {
  margin: 0 0 4px 0;
  font-size: 16px;
  font-weight: 600;
}

.brd-save-option-content p {
  margin: 0;
  font-size: 14px;
  color: var(--text-muted);
}

/* Legacy editor header */
.brd-editor-header {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  margin-bottom: 24px;
}

.brd-editor-title h2 {
  font-size: 24px;
  font-weight: 600;
  margin: 0 0 8px 0;
  display: flex;
  align-items: center;
  gap: 12px;
}

.brd-section-content {
  max-width: 900px;
}

/* Empty State */
.brd-empty-state {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 60px 40px;
  text-align: center;
  max-width: 600px;
  margin: 0 auto;
}

.brd-empty-icon {
  font-size: 64px;
  color: var(--primary);
  margin-bottom: 24px;
}

.brd-empty-state h2 {
  font-size: 28px;
  margin: 0 0 12px 0;
}

.brd-empty-state p {
  font-size: 16px;
  color: var(--text-muted);
  margin: 0 0 32px 0;
}

.brd-empty-features {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 16px;
  margin-bottom: 32px;
  width: 100%;
}

.brd-empty-feature {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px 16px;
  background: var(--bg);
  border-radius: 8px;
}

.brd-empty-feature i {
  color: var(--primary);
  font-size: 20px;
}

.brd-empty-note {
  margin-top: 24px;
  font-size: 14px;
  color: var(--text-muted);
}

/* Rich Editor */
.brd-rich-editor {
  margin-bottom: 24px;
}

.brd-textarea {
  min-height: 120px;
  resize: vertical;
  font-family: inherit;
}

/* Subsections */
.brd-subsection {
  margin-top: 32px;
  padding-top: 24px;
  border-top: 1px solid var(--border);
}

.brd-subsection h4 {
  font-size: 16px;
  font-weight: 600;
  margin: 0 0 16px 0;
}

.brd-hint {
  font-size: 14px;
  color: var(--text-muted);
  margin-bottom: 16px;
}

/* List Items */
.brd-list-item {
  display: flex;
  gap: 8px;
  margin-bottom: 8px;
}

.brd-list-item input {
  flex: 1;
}

/* Metrics */
.brd-metric-item {
  display: grid;
  grid-template-columns: 1fr 200px auto;
  gap: 8px;
  margin-bottom: 8px;
}

/* Objectives */
.brd-objective-card {
  background: var(--bg);
  padding: 16px;
  border-radius: 8px;
  margin-bottom: 12px;
  border: 1px solid var(--border);
}

/* Scope Grid */
.brd-scope-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 24px;
}

.brd-scope-column h4 {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 16px;
}

.brd-scope-item {
  display: flex;
  gap: 8px;
  margin-bottom: 8px;
}

.brd-scope-item input {
  flex: 1;
}

/* State Grid */
.brd-state-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 24px;
  margin-bottom: 24px;
}

.brd-state-column h4 {
  margin-bottom: 12px;
}

/* Tables */
.brd-table-responsive {
  overflow-x: auto;
  margin-bottom: 16px;
}

.brd-table {
  width: 100%;
  border-collapse: collapse;
}

.brd-table th {
  text-align: left;
  font-weight: 600;
  font-size: 13px;
  padding: 12px;
  border-bottom: 2px solid var(--border);
  color: var(--text-muted);
}

.brd-table td {
  padding: 8px 12px;
  border-bottom: 1px solid var(--border);
}

.brd-table input,
.brd-table select {
  width: 100%;
  border: 1px solid var(--border);
  padding: 6px 10px;
  border-radius: 4px;
  font-size: 14px;
}

/* Functional Requirements Tree */
.brd-requirements-tree {
  margin-top: 16px;
}

.brd-req-module {
  margin-bottom: 24px;
  border: 1px solid var(--border);
  border-radius: 8px;
  overflow: hidden;
}

.brd-req-module-header {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 16px;
  background: var(--bg);
  cursor: pointer;
  transition: background 0.2s;
}

.brd-req-module-header:hover {
  background: var(--hover);
}

.brd-req-toggle {
  transition: transform 0.2s;
  color: var(--text-muted);
}

.brd-req-module-title {
  flex: 1;
  display: flex;
  align-items: center;
  gap: 12px;
}

.brd-req-module-title h3 {
  margin: 0;
  font-size: 18px;
}

.brd-req-module-content {
  padding: 16px;
  background: var(--surface);
}

.brd-req-capability {
  margin-bottom: 24px;
}

.brd-req-capability-header {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 16px;
}

.brd-req-capability-header h4 {
  margin: 0;
  font-size: 16px;
}

.brd-req-features {
  display: grid;
  gap: 12px;
  margin-left: 24px;
}

.brd-req-feature-card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 8px;
  padding: 16px;
}

.brd-req-feature-header {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  margin-bottom: 12px;
}

.brd-req-feature-title {
  display: flex;
  align-items: center;
  gap: 12px;
}

.brd-req-id {
  font-family: 'Courier New', monospace;
  font-size: 12px;
  background: var(--bg);
  padding: 4px 8px;
  border-radius: 4px;
  color: var(--primary);
  font-weight: 600;
}

.brd-req-feature-title h5 {
  margin: 0;
  font-size: 15px;
}

.brd-req-description {
  color: var(--text-muted);
  margin: 0 0 12px 0;
}

.brd-req-acceptance {
  margin: 12px 0;
  padding: 12px;
  background: var(--bg);
  border-radius: 6px;
}

.brd-req-acceptance ul {
  margin: 8px 0 0 0;
  padding-left: 20px;
}

.brd-req-metadata {
  display: flex;
  gap: 24px;
  margin-top: 12px;
  font-size: 13px;
}

.brd-req-meta-item {
  display: flex;
  gap: 6px;
}

.brd-req-meta-label {
  color: var(--text-muted);
  font-weight: 500;
}

/* NFR Links */
.brd-nfr-links {
  display: grid;
  gap: 12px;
  margin-top: 16px;
}

.brd-nfr-link-card {
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 16px;
  border: 1px solid var(--border);
  border-radius: 8px;
  background: var(--surface);
}

.brd-nfr-link-icon {
  width: 48px;
  height: 48px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--primary-alpha);
  color: var(--primary);
  border-radius: 8px;
  font-size: 20px;
}

.brd-nfr-link-content {
  flex: 1;
}

.brd-nfr-link-content h4 {
  margin: 0 0 8px 0;
  font-size: 15px;
}

.brd-nfr-link-checkbox label {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 13px;
  color: var(--text-muted);
}

/* Acceptance Items */
.brd-acceptance-item {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 8px;
}

.brd-acceptance-item input[type="checkbox"] {
  flex-shrink: 0;
}

.brd-acceptance-item input[type="text"] {
  flex: 1;
}

/* Notices */
.brd-notice {
  display: flex;
  gap: 12px;
  padding: 16px;
  border-radius: 8px;
  margin-bottom: 24px;
}

.brd-notice i {
  font-size: 20px;
  flex-shrink: 0;
  margin-top: 2px;
}

.brd-notice strong {
  display: block;
  margin-bottom: 4px;
}

.brd-notice p {
  margin: 0;
  font-size: 14px;
}

.brd-notice.info {
  background: rgba(33, 150, 243, 0.1);
  color: #2196f3;
}

.brd-notice.warning {
  background: rgba(255, 193, 7, 0.1);
  color: #ff9800;
}

/* Context Panel */
.brd-tabs {
  display: flex;
  border-bottom: 1px solid var(--border);
}

.brd-tab {
  flex: 1;
  padding: 12px;
  background: none;
  border: none;
  border-bottom: 2px solid transparent;
  cursor: pointer;
  font-size: 13px;
  font-weight: 500;
  color: var(--text-muted);
  transition: all 0.2s;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
}

.brd-tab:hover {
  color: var(--text);
  background: var(--hover);
}

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

.brd-tab-content {
  padding: 16px;
}

/* Context Panels */
.brd-context-empty {
  text-align: center;
  padding: 40px 20px;
  color: var(--text-muted);
}

.brd-context-empty i {
  font-size: 48px;
  margin-bottom: 16px;
  display: block;
}

.brd-context-links h4,
.brd-context-sync h4,
.brd-context-comments h4 {
  font-size: 14px;
  font-weight: 600;
  margin: 0 0 16px 0;
}

.brd-link-item {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px;
  background: var(--bg);
  border-radius: 6px;
  margin-bottom: 8px;
}

.brd-link-item i {
  color: var(--primary);
  font-size: 18px;
}

.brd-link-item div {
  flex: 1;
}

.brd-link-item strong {
  display: block;
  font-size: 14px;
  margin-bottom: 4px;
}

.brd-link-item p {
  font-size: 12px;
  color: var(--text-muted);
  margin: 0;
}

/* Sync Updates */
.brd-sync-item {
  display: flex;
  gap: 12px;
  padding: 12px;
  border-radius: 6px;
  margin-bottom: 8px;
  border-left: 3px solid;
}

.brd-sync-added {
  background: rgba(76, 175, 80, 0.1);
  border-color: #4caf50;
}

.brd-sync-changed {
  background: rgba(255, 193, 7, 0.1);
  border-color: #ffc107;
}

.brd-sync-removed {
  background: rgba(244, 67, 54, 0.1);
  border-color: #f44336;
}

.brd-sync-icon {
  width: 32px;
  height: 32px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  background: white;
  flex-shrink: 0;
}

.brd-sync-added .brd-sync-icon {
  color: #4caf50;
}

.brd-sync-changed .brd-sync-icon {
  color: #ffc107;
}

.brd-sync-removed .brd-sync-icon {
  color: #f44336;
}

.brd-sync-content {
  flex: 1;
}

.brd-sync-content strong {
  display: block;
  font-size: 14px;
  margin-bottom: 4px;
}

.brd-sync-content p {
  font-size: 13px;
  color: var(--text-muted);
  margin: 0;
}

/* Comments */
.brd-comments-list {
  margin-bottom: 16px;
}

.brd-comment-input textarea {
  width: 100%;
  margin-bottom: 8px;
}

/* Priority chips */
.chip-high {
  background: rgba(244, 67, 54, 0.1);
  color: #f44336;
}

.chip-medium {
  background: rgba(255, 193, 7, 0.1);
  color: #ff9800;
}

.chip-low {
  background: rgba(33, 150, 243, 0.1);
  color: #2196f3;
}

/* Responsive */
@media (max-width: 1400px) {
  .brd-panels {
    grid-template-columns: 240px 1fr 280px;
  }
}

@media (max-width: 1200px) {
  .brd-panels {
    grid-template-columns: 200px 1fr 0;
  }
  
  .brd-context-panel {
    display: none;
  }
}

@media (max-width: 768px) {
  .brd-panels {
    grid-template-columns: 1fr;
  }
  
  .brd-outline-panel,
  .brd-context-panel {
    display: none;
  }
  
  .brd-scope-grid,
  .brd-state-grid {
    grid-template-columns: 1fr;
  }

  .brd-empty-features {
    grid-template-columns: 1fr;
  }
}

/* AI Assist & Sync Modal Styles */
.modal-lg {
  max-width: 600px;
}

.brd-sync-updates {
  display: flex;
  flex-direction: column;
  gap: 12px;
  margin-top: 16px;
}

.brd-sync-update-item {
  display: flex;
  align-items: flex-start;
  gap: 14px;
  padding: 16px;
  background: var(--bg);
  border: 1px solid rgba(0, 0, 0, 0.06);
  border-radius: 10px;
  transition: all 0.2s ease;
}

.brd-sync-update-item:hover {
  border-color: rgba(0, 0, 0, 0.12);
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.04);
}

.brd-sync-update-icon {
  width: 36px;
  height: 36px;
  border-radius: 8px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.brd-sync-update-icon.added {
  background: linear-gradient(135deg, rgba(76, 175, 80, 0.12), rgba(76, 175, 80, 0.18));
  color: #10b981;
}

.brd-sync-update-icon.changed {
  background: linear-gradient(135deg, rgba(255, 193, 7, 0.12), rgba(255, 193, 7, 0.18));
  color: #f59e0b;
}

.brd-sync-update-icon.removed {
  background: linear-gradient(135deg, rgba(244, 67, 54, 0.12), rgba(244, 67, 54, 0.18));
  color: #ef4444;
}

.brd-sync-update-content {
  flex: 1;
}

.brd-sync-update-content h4 {
  margin: 0 0 6px 0;
  font-size: 15px;
  font-weight: 600;
  color: var(--text);
}

.brd-sync-update-content p {
  margin: 0;
  font-size: 13px;
  color: var(--text-muted);
  line-height: 1.5;
}

.checkbox-wrapper {
  display: flex;
  align-items: center;
  gap: 6px;
  cursor: pointer;
  user-select: none;
}

.checkbox-wrapper input[type="checkbox"] {
  width: 18px;
  height: 18px;
  cursor: pointer;
}

.checkbox-wrapper span {
  font-size: 13px;
  font-weight: 500;
  color: var(--text-muted);
}

.brd-sync-empty {
  text-align: center;
  padding: 40px 20px;
}

.brd-sync-empty h4 {
  margin: 0 0 8px 0;
  font-size: 18px;
  font-weight: 600;
}

.brd-sync-empty p {
  margin: 0;
  color: var(--text-muted);
  font-size: 14px;
}

/* Export Options */
.export-options {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 12px;
  margin-top: 16px;
}

.export-options .btn {
  flex-direction: column;
  gap: 8px;
  padding: 20px 16px;
  border: 2px solid var(--border);
  background: var(--bg);
  transition: all 0.2s ease;
}

.export-options .btn:hover {
  transform: translateY(-2px);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
  border-color: var(--primary);
}

.export-options .btn i {
  font-size: 28px;
}

/* Enhanced Form Inputs */
.formInput,
.brd-textarea {
  border: 1.5px solid rgba(0, 0, 0, 0.08);
  border-radius: 8px;
  padding: 10px 14px;
  font-size: 14px;
  transition: all 0.2s ease;
  background: var(--surface);
  color: var(--text);
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.02);
}

.formInput:hover {
  border-color: rgba(0, 0, 0, 0.12);
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.04);
}

.formInput:focus,
.brd-textarea:focus {
  outline: none;
  border-color: var(--primary);
  box-shadow: 0 0 0 3px rgba(var(--primary-rgb), 0.1), 0 2px 4px rgba(0, 0, 0, 0.04);
}

.formLabel {
  display: block;
  margin-bottom: 8px;
  font-size: 14px;
  font-weight: 600;
  color: var(--text);
  letter-spacing: -0.01em;
}

.formGroup {
  margin-bottom: 20px;
}

/* Enhanced Buttons */
.btn {
  border-radius: 8px;
  font-weight: 600;
  letter-spacing: -0.01em;
  transition: all 0.2s ease;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.04);
}

.btn:hover {
  transform: translateY(-1px);
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.08);
}

.btn.primary {
  background: linear-gradient(135deg, var(--primary), var(--primary));
  border: none;
  box-shadow: 0 2px 4px rgba(var(--primary-rgb), 0.2);
}

.btn.primary:hover {
  box-shadow: 0 4px 12px rgba(var(--primary-rgb), 0.3);
}

.btn.ghost {
  background: transparent;
  border: 1.5px solid rgba(0, 0, 0, 0.1);
  color: var(--text);
}

.btn.ghost:hover {
  border-color: var(--primary);
  background: rgba(var(--primary-rgb), 0.05);
  color: var(--primary);
}

/* Enhanced Chips */
.chip {
  padding: 4px 12px;
  border-radius: 12px;
  font-size: 12px;
  font-weight: 600;
  border: 1px solid rgba(0, 0, 0, 0.08);
  background: var(--bg);
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.02);
}

.chip-sm {
  padding: 3px 10px;
  font-size: 11px;
}

.chip-ghost {
  background: rgba(0, 0, 0, 0.04);
  border-color: transparent;
  color: var(--text-muted);
}

/* Text Utilities */
.text-muted {
  color: var(--text-muted);
}

/* =============================================================================
   RISK TRACKER STYLES
   ============================================================================= */

/* Risk Tracker Container */
.risk-tracker-container {
  background: var(--bg);
}

/* Auto-save indicator (used in drawer footer) */
.risk-autosave-indicator {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 12px;
  color: var(--text-muted);
  padding: 4px 10px;
  background: rgba(16, 185, 129, 0.1);
  border-radius: 12px;
}

.risk-autosave-indicator.saving {
  color: #f59e0b;
  background: rgba(245, 158, 11, 0.1);
}

.risk-autosave-indicator i {
  font-size: 11px;
}

/* Risk Badges in Header */
.risk-badge {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 4px 10px;
  border-radius: 12px;
  font-size: 12px;
  font-weight: 600;
}

.risk-badge-high {
  background: rgba(239, 68, 68, 0.12);
  color: #dc2626;
}

.risk-badge-overdue {
  background: rgba(245, 158, 11, 0.12);
  color: #d97706;
}

/* Filters Bar */
.risk-filters-bar {
  position: sticky;
  top: 73px; /* Below the header */
  z-index: 4;
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px 32px;
  background: var(--surface);
  border-bottom: 1px solid var(--border);
  flex-wrap: wrap;
}

.risk-filter {
  display: flex;
  align-items: center;
}

.risk-filter select {
  min-width: 140px;
  padding: 8px 12px;
  font-size: 13px;
}

/* KPI Row */
.risk-kpi-row {
  display: flex;
  gap: 16px;
  margin-bottom: 24px;
  flex-wrap: wrap;
}

.risk-kpi-chip {
  flex: 1;
  min-width: 140px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 20px 16px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 12px;
  text-align: center;
}

.risk-kpi-value {
  font-size: 32px;
  font-weight: 700;
  color: var(--text);
  line-height: 1;
  margin-bottom: 4px;
}

.risk-kpi-label {
  font-size: 12px;
  font-weight: 500;
  color: var(--text-muted);
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

.risk-kpi-high .risk-kpi-value {
  color: #dc2626;
}

.risk-kpi-warning .risk-kpi-value {
  color: #d97706;
}

.risk-kpi-success .risk-kpi-value {
  color: #059669;
}

/* Dashboard Grid */
.risk-dashboard-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 24px;
  margin-bottom: 24px;
}

@media (max-width: 1200px) {
  .risk-dashboard-grid {
    grid-template-columns: 1fr;
  }
}

/* Heat Map Card */
.risk-heatmap-card,
.risk-top-card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 12px;
  padding: 20px;
}

.risk-heatmap-card h3,
.risk-top-card h3 {
  font-size: 16px;
  font-weight: 600;
  margin: 0 0 8px 0;
}

/* Heat Map */
.risk-heatmap {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 16px 0;
}

.risk-heatmap-ylabel {
  font-size: 12px;
  font-weight: 600;
  color: var(--text-muted);
  text-transform: uppercase;
  letter-spacing: 0.5px;
  margin-bottom: 8px;
}

.risk-heatmap-grid {
  display: flex;
  gap: 8px;
}

.risk-heatmap-yaxis {
  display: flex;
  flex-direction: column;
  justify-content: space-around;
  padding-right: 8px;
}

.risk-heatmap-ylabel-value {
  font-size: 12px;
  font-weight: 600;
  color: var(--text-muted);
  height: 44px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.risk-heatmap-cells {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.risk-heatmap-row {
  display: flex;
  gap: 4px;
}

.risk-heatmap-cell {
  width: 44px;
  height: 44px;
  border-radius: 6px;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: transform 0.15s, box-shadow 0.15s;
  position: relative;
}

.risk-heatmap-cell:hover {
  transform: scale(1.08);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
  z-index: 1;
}

.risk-heatmap-cell.has-risks {
  cursor: pointer;
}

.risk-heatmap-count {
  font-size: 14px;
  font-weight: 700;
  color: white;
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.2);
}

/* Severity Colors */
.severity-low {
  background: linear-gradient(135deg, #a7f3d0, #6ee7b7);
}

.severity-medium {
  background: linear-gradient(135deg, #fde68a, #fcd34d);
}

.severity-high {
  background: linear-gradient(135deg, #fdba74, #fb923c);
}

.severity-critical {
  background: linear-gradient(135deg, #fca5a5, #f87171);
}

.risk-heatmap-xlabel {
  font-size: 12px;
  font-weight: 600;
  color: var(--text-muted);
  text-transform: uppercase;
  letter-spacing: 0.5px;
  margin-top: 8px;
}

.risk-heatmap-xaxis {
  display: flex;
  justify-content: center;
  gap: 4px;
  margin-left: 40px;
  margin-top: 4px;
}

.risk-heatmap-xlabel-value {
  width: 44px;
  text-align: center;
  font-size: 12px;
  font-weight: 600;
  color: var(--text-muted);
}

/* Heat Map Legend */
.risk-heatmap-legend {
  display: flex;
  justify-content: center;
  gap: 20px;
  margin-top: 16px;
  padding-top: 16px;
  border-top: 1px solid var(--border);
}

.risk-legend-item {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 12px;
  color: var(--text-muted);
}

.risk-legend-color {
  width: 16px;
  height: 16px;
  border-radius: 4px;
}

.risk-legend-color.severity-low {
  background: #6ee7b7;
}

.risk-legend-color.severity-medium {
  background: #fcd34d;
}

.risk-legend-color.severity-high {
  background: #fb923c;
}

.risk-legend-color.severity-critical {
  background: #f87171;
}

/* Top Risks List */
.risk-top-list {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.risk-top-empty {
  text-align: center;
  padding: 40px 20px;
  color: var(--text-muted);
}

.risk-top-empty i {
  font-size: 36px;
  margin-bottom: 12px;
  display: block;
  color: #10b981;
}

.risk-top-item {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px;
  background: var(--bg);
  border-radius: 8px;
  cursor: pointer;
  transition: all 0.15s;
}

.risk-top-item:hover {
  background: var(--hover);
  transform: translateX(4px);
}

.risk-top-rank {
  width: 28px;
  height: 28px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--primary);
  color: white;
  border-radius: 50%;
  font-size: 13px;
  font-weight: 700;
  flex-shrink: 0;
}

.risk-top-content {
  flex: 1;
  min-width: 0;
}

.risk-top-title {
  font-size: 14px;
  font-weight: 600;
  margin-bottom: 4px;
  display: flex;
  align-items: center;
  gap: 8px;
}

.risk-top-meta {
  display: flex;
  align-items: center;
  gap: 12px;
  font-size: 12px;
}

.risk-top-severity {
  width: 36px;
  height: 36px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 8px;
  font-size: 14px;
  font-weight: 700;
  color: white;
  flex-shrink: 0;
}

/* Category Tag */
.risk-category-tag {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 3px 8px;
  border-radius: 6px;
  font-size: 11px;
  font-weight: 600;
  background: color-mix(in srgb, var(--cat-color, #6b7280) 12%, transparent);
  color: var(--cat-color, #6b7280);
}

.risk-category-tag i {
  font-size: 10px;
}

/* Owner */
.risk-owner {
  color: var(--text-muted);
}

/* Due Date */
.risk-due-date {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  color: var(--text-muted);
}

.risk-due-date.overdue {
  color: #dc2626;
  font-weight: 600;
}

/* Overdue Badge */
.risk-overdue-badge {
  display: inline-flex;
  align-items: center;
  padding: 2px 6px;
  background: rgba(239, 68, 68, 0.12);
  color: #dc2626;
  font-size: 10px;
  font-weight: 600;
  border-radius: 4px;
  text-transform: uppercase;
}

/* Category Breakdown */
.risk-category-breakdown {
  margin-top: 8px;
}

.risk-category-breakdown h3 {
  font-size: 14px;
  font-weight: 600;
  margin: 0 0 12px 0;
}

.risk-category-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.risk-category-chip {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 8px 12px;
  background: color-mix(in srgb, var(--cat-color, #6b7280) 8%, var(--surface));
  border: 1px solid color-mix(in srgb, var(--cat-color, #6b7280) 20%, transparent);
  border-radius: 8px;
  cursor: pointer;
  transition: all 0.15s;
}

.risk-category-chip:hover {
  background: color-mix(in srgb, var(--cat-color, #6b7280) 15%, var(--surface));
  transform: translateY(-1px);
}

.risk-category-chip i {
  color: var(--cat-color, #6b7280);
}

.risk-category-chip span {
  font-size: 13px;
  font-weight: 500;
}

.risk-category-count {
  padding: 2px 8px;
  background: var(--cat-color, #6b7280);
  color: white;
  border-radius: 10px;
  font-size: 11px;
  font-weight: 700;
}

/* Risk Register Table */
.risk-register-table {
  width: 100%;
}

.risk-register-table th {
  font-size: 11px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  color: var(--text-muted);
  padding: 12px 8px;
  text-align: left;
  border-bottom: 2px solid var(--border);
}

.risk-register-table td {
  padding: 12px 8px;
  vertical-align: middle;
  border-bottom: 1px solid var(--border);
}

.risk-row {
  cursor: pointer;
  transition: background 0.15s;
}

.risk-row:hover {
  background: var(--hover);
}

.risk-row-overdue {
  background: rgba(239, 68, 68, 0.04);
}

.risk-row-overdue:hover {
  background: rgba(239, 68, 68, 0.08);
}

.risk-title-cell {
  display: flex;
  align-items: center;
  gap: 8px;
}

.risk-title {
  font-weight: 500;
}

.col-risk {
  min-width: 200px;
}

.col-category {
  min-width: 100px;
}

.col-owner {
  min-width: 100px;
}

.col-prob,
.col-impact {
  width: 60px;
  text-align: center;
}

.col-severity {
  width: 70px;
  text-align: center;
}

.col-status {
  min-width: 100px;
}

.col-due {
  min-width: 100px;
}

.col-actions {
  width: 80px;
  text-align: right;
}

/* Scale Badge */
.risk-scale-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  background: var(--bg);
  border: 1px solid var(--border);
  border-radius: 6px;
  font-size: 13px;
  font-weight: 600;
}

/* Severity Badge */
.risk-severity-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 32px;
  padding: 4px 8px;
  border-radius: 6px;
  font-size: 13px;
  font-weight: 700;
  color: white;
}

/* Status Badge */
.risk-status-badge {
  display: inline-flex;
  align-items: center;
  padding: 4px 10px;
  border-radius: 6px;
  font-size: 12px;
  font-weight: 600;
  background: color-mix(in srgb, var(--status-color, #6b7280) 12%, transparent);
  color: var(--status-color, #6b7280);
}

/* Table Empty State */
.risk-table-empty {
  text-align: center;
  padding: 40px 20px;
  color: var(--text-muted);
}

.risk-table-empty i {
  font-size: 32px;
  margin-bottom: 12px;
  display: block;
}

/* Risk Detail Drawer */
.risk-drawer-overlay {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.4);
  z-index: 999;
  animation: fadeIn 0.2s ease;
}

.risk-drawer {
  position: fixed;
  top: 0;
  right: 0;
  bottom: 0;
  width: 560px;
  max-width: 100vw;
  background: var(--surface);
  box-shadow: -4px 0 24px rgba(0, 0, 0, 0.15);
  z-index: 1000;
  display: flex;
  flex-direction: column;
  transform: translateX(100%);
  transition: transform 0.3s ease;
}

.risk-drawer.open {
  transform: translateX(0);
}

@keyframes fadeIn {
  from { opacity: 0; }
  to { opacity: 1; }
}

.risk-drawer-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 20px 24px;
  border-bottom: 1px solid var(--border);
  flex-shrink: 0;
}

.risk-drawer-header h3 {
  font-size: 18px;
  font-weight: 600;
  margin: 0;
}

.risk-drawer-body {
  flex: 1;
  overflow-y: auto;
  padding: 24px;
}

.risk-drawer-section {
  margin-bottom: 28px;
  padding-bottom: 24px;
  border-bottom: 1px solid var(--border);
}

.risk-drawer-section:last-child {
  border-bottom: none;
  margin-bottom: 0;
}

.risk-drawer-section h4 {
  font-size: 14px;
  font-weight: 600;
  margin: 0 0 16px 0;
  display: flex;
  align-items: center;
  gap: 8px;
  color: var(--text-muted);
}

.risk-drawer-section h4 i {
  color: var(--primary);
}

.risk-form-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
}

/* Risk Scoring Row */
.risk-scoring-row {
  display: grid;
  grid-template-columns: 1fr 1fr auto;
  gap: 20px;
  align-items: start;
}

.risk-slider-group {
  display: flex;
  align-items: center;
  gap: 12px;
}

.risk-slider {
  flex: 1;
  height: 6px;
  -webkit-appearance: none;
  appearance: none;
  background: var(--border);
  border-radius: 3px;
  outline: none;
}

.risk-slider::-webkit-slider-thumb {
  -webkit-appearance: none;
  appearance: none;
  width: 20px;
  height: 20px;
  background: var(--primary);
  border-radius: 50%;
  cursor: pointer;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.2);
}

.risk-slider::-moz-range-thumb {
  width: 20px;
  height: 20px;
  background: var(--primary);
  border-radius: 50%;
  cursor: pointer;
  border: none;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.2);
}

.risk-slider-value {
  width: 32px;
  height: 32px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--primary);
  color: white;
  border-radius: 8px;
  font-size: 14px;
  font-weight: 700;
}

.risk-slider-label {
  font-size: 11px;
  color: var(--text-muted);
  margin-top: 4px;
}

.risk-severity-display {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
}

.risk-severity-score {
  width: 56px;
  height: 56px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 12px;
  font-size: 24px;
  font-weight: 700;
  color: white;
}

/* Mitigation Items */
.risk-mitigation-item {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 8px;
}

.risk-mitigation-item input[type="checkbox"] {
  flex-shrink: 0;
  width: 18px;
  height: 18px;
}

.risk-mitigation-item input[type="text"] {
  flex: 1;
}

/* Risk Links */
.risk-links-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 20px;
}

.risk-link-group label {
  display: block;
  font-size: 12px;
  font-weight: 600;
  color: var(--text-muted);
  margin-bottom: 8px;
}

.risk-link-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.risk-link-chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 6px 10px;
  background: var(--bg);
  border: 1px solid var(--border);
  border-radius: 6px;
  font-size: 12px;
}

.risk-link-remove {
  background: none;
  border: none;
  color: var(--text-muted);
  cursor: pointer;
  padding: 2px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.risk-link-remove:hover {
  color: #dc2626;
}

/* History Log */
.risk-history-log {
  max-height: 200px;
  overflow-y: auto;
  margin-bottom: 12px;
}

.risk-history-entry {
  padding: 10px 12px;
  background: var(--bg);
  border-radius: 6px;
  margin-bottom: 8px;
}

.risk-history-date {
  font-size: 11px;
  color: var(--text-muted);
  margin-bottom: 4px;
}

.risk-history-text {
  font-size: 13px;
  margin-bottom: 4px;
}

.risk-history-user {
  font-size: 11px;
  color: var(--text-muted);
  font-style: italic;
}

.risk-history-empty {
  text-align: center;
  padding: 20px;
  color: var(--text-muted);
  font-size: 13px;
}

.risk-add-comment {
  display: flex;
  gap: 8px;
}

.risk-add-comment input {
  flex: 1;
}

/* Drawer Footer */
.risk-drawer-footer {
  display: flex;
  justify-content: flex-end;
  gap: 12px;
  padding: 16px 24px;
  border-top: 1px solid var(--border);
  background: var(--bg);
  flex-shrink: 0;
}

/* ========================================
   NODE DETAIL DRAWER (Development Nodes)
   ======================================== */

.node-detail-overlay {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.4);
  z-index: 999;
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.2s ease, visibility 0.2s ease;
}

.node-detail-overlay.open {
  opacity: 1;
  visibility: visible;
}

.node-detail-panel {
  position: fixed;
  top: 0;
  right: 0;
  bottom: 0;
  width: 50%;
  max-width: 100vw;
  background: var(--surface);
  box-shadow: -4px 0 24px rgba(0, 0, 0, 0.15);
  z-index: 1000;
  display: flex;
  flex-direction: column;
  transform: translateX(100%);
  transition: transform 0.3s ease;
}

.node-detail-panel.open {
  transform: translateX(0);
}

.node-detail-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 20px 24px;
  border-bottom: 1px solid var(--border);
  flex-shrink: 0;
}

.node-detail-header h3,
.node-detail-header .dn-modal-title {
  font-size: 18px;
  font-weight: 600;
  margin: 0;
  display: flex;
  align-items: center;
  gap: 10px;
}

.node-detail-header .dn-modal-title i {
  color: var(--primary);
}

.node-detail-header-actions {
  display: flex;
  align-items: center;
  gap: 10px;
}

.node-detail-body {
  flex: 1;
  overflow: hidden;
  padding: 24px;
  display: flex;
  flex-direction: column;
}

.node-detail-section {
  margin-bottom: 24px;
  padding-bottom: 20px;
  border-bottom: 1px solid var(--border);
}

.node-detail-section:last-child {
  border-bottom: none;
  margin-bottom: 0;
}

.node-detail-section-title {
  font-size: 12px;
  font-weight: 600;
  color: var(--text-muted);
  text-transform: uppercase;
  letter-spacing: 0.04em;
  margin-bottom: 12px;
}

.node-detail-footer {
  display: flex;
  justify-content: flex-end;
  gap: 12px;
  padding: 16px 24px;
  border-top: 1px solid var(--border);
  background: var(--bg);
  flex-shrink: 0;
}

@media (max-width: 768px) {
  .node-detail-panel {
    width: 100%;
  }
}

/* Required indicator */
.required {
  color: #dc2626;
}

/* Responsive */
@media (max-width: 768px) {
  .risk-filters-bar {
    padding: 12px 16px;
  }

  .risk-filter select {
    min-width: 120px;
  }

  .risk-kpi-row {
    flex-wrap: wrap;
  }

  .risk-kpi-chip {
    min-width: calc(50% - 8px);
  }

  .risk-dashboard-grid {
    grid-template-columns: 1fr;
  }

  .risk-drawer {
    width: 100%;
  }

  .risk-form-row,
  .risk-scoring-row,
  .risk-links-grid {
    grid-template-columns: 1fr;
  }

  .risk-register-table {
    font-size: 13px;
  }

  .col-prob,
  .col-impact,
  .col-due {
    display: none;
  }
}

/* =============================================================================
   SDD (Solution Design Document) Styles
   ============================================================================= */

.sdd-container {
  display: flex;
  flex-direction: column;
  height: 100%;
  background: var(--bg-primary);
}

.sdd-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 16px 24px;
  border-bottom: 1px solid var(--border);
  background: var(--bg-secondary);
}

.sdd-header-left {
  display: flex;
  align-items: center;
  gap: 16px;
}

.sdd-title {
  font-size: 1.25rem;
  font-weight: 600;
  display: flex;
  align-items: center;
  gap: 10px;
  margin: 0;
}

.sdd-title i {
  color: var(--primary);
}

.sdd-meta {
  display: flex;
  align-items: center;
  gap: 12px;
}

.sdd-status {
  padding: 4px 10px;
  border-radius: 12px;
  font-size: 0.75rem;
  font-weight: 500;
}

.sdd-status.status-draft {
  background: var(--warning-bg);
  color: var(--warning);
}

.sdd-status.status-in_review {
  background: var(--info-bg);
  color: var(--info);
}

.sdd-status.status-approved {
  background: var(--success-bg);
  color: var(--success);
}

.sdd-version {
  color: var(--text-muted);
  font-size: 0.875rem;
}

.sdd-sync-badge {
  background: var(--primary);
  color: white;
  padding: 4px 10px;
  border-radius: 12px;
  font-size: 0.75rem;
  display: flex;
  align-items: center;
  gap: 4px;
}

.sdd-header-right {
  display: flex;
  align-items: center;
  gap: 8px;
}

/* AI Dropdown */
.sdd-ai-dropdown {
  position: relative;
}

.sdd-ai-menu {
  position: absolute;
  top: 100%;
  right: 0;
  background: var(--bg-secondary);
  border: 1px solid var(--border);
  border-radius: 8px;
  box-shadow: 0 4px 12px rgba(0,0,0,0.15);
  min-width: 220px;
  z-index: 100;
  padding: 8px 0;
}

.sdd-ai-action {
  display: flex;
  align-items: center;
  gap: 10px;
  width: 100%;
  padding: 10px 16px;
  background: none;
  border: none;
  text-align: left;
  cursor: pointer;
  color: var(--text-primary);
  font-size: 0.875rem;
}

.sdd-ai-action:hover {
  background: var(--bg-hover);
}

.sdd-ai-action i {
  color: var(--primary);
  width: 16px;
}

/* Three-panel layout */
.sdd-panels {
  display: grid;
  grid-template-columns: 260px 1fr 300px;
  flex: 1;
  overflow: hidden;
}

.sdd-panel {
  overflow-y: auto;
}

.sdd-outline-panel {
  background: var(--bg-secondary);
  border-right: 1px solid var(--border);
}

.sdd-context-panel {
  background: var(--bg-secondary);
  border-left: 1px solid var(--border);
}

/* Outline Panel */
.sdd-outline-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 16px;
  border-bottom: 1px solid var(--border);
}

.sdd-outline-header h3 {
  margin: 0;
  font-size: 0.875rem;
  font-weight: 600;
}

.sdd-completion {
  font-size: 0.75rem;
  color: var(--primary);
}

.sdd-outline-toggle {
  padding: 8px 16px;
  border-bottom: 1px solid var(--border);
}

.sdd-toggle-label {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 0.75rem;
  color: var(--text-muted);
  cursor: pointer;
}

.sdd-outline {
  padding: 8px;
}

.sdd-outline-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 10px 12px;
  border-radius: 6px;
  cursor: pointer;
  margin-bottom: 2px;
  transition: background 0.15s;
}

.sdd-outline-item:hover {
  background: var(--bg-hover);
}

.sdd-outline-item.active {
  background: var(--primary-bg);
  color: var(--primary);
}

.sdd-outline-item.has-updates {
  border-left: 3px solid var(--warning);
}

.sdd-outline-item-left {
  display: flex;
  align-items: center;
  gap: 10px;
}

.sdd-completion-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--border);
}

.sdd-completion-dot.empty {
  background: var(--border);
}

.sdd-completion-dot.partial {
  background: var(--warning);
}

.sdd-completion-dot.complete {
  background: var(--success);
}

.sdd-outline-label {
  font-size: 0.875rem;
}

.sdd-outline-item-right {
  display: flex;
  align-items: center;
  gap: 8px;
}

.sdd-linked-icon {
  color: var(--primary);
  font-size: 0.75rem;
}

.sdd-update-icon {
  color: var(--warning);
  font-size: 0.75rem;
}

.sdd-outline-completion {
  font-size: 0.7rem;
  color: var(--text-muted);
}

/* Editor Panel */
.sdd-editor-panel {
  padding: 24px;
  overflow-y: auto;
}

.sdd-editor-header {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  margin-bottom: 20px;
}

.sdd-editor-title h2 {
  margin: 0 0 8px 0;
  font-size: 1.25rem;
  display: flex;
  align-items: center;
  gap: 10px;
}

.sdd-editor-badges {
  display: flex;
  gap: 8px;
}

.sdd-section-content {
  max-width: 900px;
}

/* Empty State */
.sdd-empty-state {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: 60px 40px;
  max-width: 600px;
  margin: 0 auto;
}

.sdd-empty-icon {
  font-size: 64px;
  color: var(--primary);
  opacity: 0.3;
  margin-bottom: 24px;
}

.sdd-empty-state h2 {
  margin: 0 0 12px 0;
  font-size: 1.5rem;
}

.sdd-empty-state p {
  color: var(--text-muted);
  margin-bottom: 24px;
}

.sdd-empty-preview {
  background: var(--bg-secondary);
  border: 1px solid var(--border);
  border-radius: 12px;
  padding: 20px;
  margin-bottom: 24px;
  width: 100%;
}

.sdd-empty-preview h4 {
  margin: 0 0 16px 0;
  font-size: 0.875rem;
  color: var(--text-muted);
}

.sdd-preview-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 12px;
}

.sdd-preview-item {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 12px;
  background: var(--bg-primary);
  border-radius: 8px;
  font-size: 0.8rem;
}

.sdd-preview-item i {
  color: var(--primary);
}

.sdd-empty-features {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 12px;
  margin-bottom: 24px;
  width: 100%;
}

.sdd-empty-feature {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 12px 16px;
  background: var(--bg-secondary);
  border-radius: 8px;
  font-size: 0.875rem;
}

.sdd-empty-feature i {
  color: var(--primary);
}

.sdd-empty-note {
  font-size: 0.8rem;
  color: var(--text-muted);
  margin-top: 16px;
}

/* Form Elements */
.sdd-form-group {
  margin-bottom: 20px;
}

.sdd-textarea {
  min-height: 100px;
  resize: vertical;
}

.sdd-two-col {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 20px;
}

.sdd-hint {
  font-size: 0.8rem;
  color: var(--text-muted);
  margin: 4px 0 0 0;
}

.sdd-empty-list {
  color: var(--text-muted);
  font-style: italic;
  padding: 12px;
}

/* Lists */
.sdd-list-item,
.sdd-goal-item,
.sdd-boundary-item {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 8px;
}

.sdd-list-item input[type="text"],
.sdd-goal-item input[type="text"],
.sdd-boundary-item input[type="text"] {
  flex: 1;
}

.sdd-goal-target {
  max-width: 150px;
}

/* Subsections */
.sdd-subsection {
  margin-top: 24px;
  padding-top: 24px;
  border-top: 1px solid var(--border);
}

.sdd-subsection h4 {
  margin: 0 0 16px 0;
  font-size: 1rem;
  display: flex;
  align-items: center;
  gap: 8px;
}

.sdd-subsection-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 16px;
}

.sdd-subsection-header h4 {
  margin: 0;
}

/* Tables */
.sdd-table-responsive {
  overflow-x: auto;
}

.sdd-table {
  width: 100%;
  border-collapse: collapse;
}

.sdd-table th {
  text-align: left;
  padding: 10px 12px;
  background: var(--bg-secondary);
  border-bottom: 2px solid var(--border);
  font-size: 0.75rem;
  text-transform: uppercase;
  color: var(--text-muted);
}

.sdd-table td {
  padding: 10px 12px;
  border-bottom: 1px solid var(--border);
}

.sdd-table input,
.sdd-table select {
  width: 100%;
  padding: 6px 8px;
  font-size: 0.875rem;
}

.sdd-empty-row td {
  text-align: center;
  color: var(--text-muted);
  font-style: italic;
  padding: 24px;
}

/* Service Selector */
.sdd-service-selector {
  margin-bottom: 20px;
}

.sdd-service-tabs {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 8px;
}

.sdd-service-tab {
  padding: 8px 16px;
  background: var(--bg-secondary);
  border: 1px solid var(--border);
  border-radius: 6px;
  cursor: pointer;
  font-size: 0.875rem;
  display: flex;
  align-items: center;
  gap: 6px;
  transition: all 0.15s;
}

.sdd-service-tab:hover {
  border-color: var(--primary);
}

.sdd-service-tab.active {
  background: var(--primary-bg);
  border-color: var(--primary);
  color: var(--primary);
}

.sdd-empty-service {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 60px;
  color: var(--text-muted);
  text-align: center;
}

.sdd-empty-service i {
  font-size: 48px;
  opacity: 0.3;
  margin-bottom: 16px;
}

/* Workflows */
.sdd-workflow-item {
  background: var(--bg-secondary);
  border: 1px solid var(--border);
  border-radius: 8px;
  padding: 12px;
  margin-bottom: 12px;
}

.sdd-workflow-item input {
  margin-bottom: 8px;
}

/* Linked Features */
.sdd-linked-features {
  margin-top: 20px;
  padding: 16px;
  background: var(--bg-secondary);
  border-radius: 8px;
}

.sdd-linked-features h5 {
  margin: 0 0 12px 0;
  font-size: 0.875rem;
}

.sdd-feature-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

/* Advanced Fields */
.sdd-advanced-fields {
  margin-top: 20px;
  padding: 16px;
  background: var(--bg-secondary);
  border-radius: 8px;
  border-left: 3px solid var(--primary);
}

.sdd-advanced-fields h5 {
  margin: 0 0 16px 0;
  font-size: 0.875rem;
  color: var(--primary);
}

.sdd-advanced {
  background: linear-gradient(to right, var(--primary-bg), transparent);
  border-radius: 8px;
  padding: 16px;
}

/* Diagram Canvas */
.sdd-diagram-container {
  margin-bottom: 24px;
}

.sdd-diagram-toolbar {
  display: flex;
  gap: 8px;
  margin-bottom: 12px;
}

.sdd-diagram-canvas {
  border: 2px dashed var(--border);
  border-radius: 8px;
  min-height: 300px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--bg-secondary);
}

.sdd-diagram-canvas img {
  max-width: 100%;
  max-height: 500px;
}

.sdd-diagram-placeholder {
  text-align: center;
  color: var(--text-muted);
}

.sdd-diagram-placeholder i {
  font-size: 48px;
  opacity: 0.3;
  margin-bottom: 12px;
  display: block;
}

/* Actor Cards */
.sdd-actor-card {
  background: var(--bg-secondary);
  border: 1px solid var(--border);
  border-radius: 8px;
  padding: 12px;
  margin-bottom: 12px;
}

.sdd-actor-header {
  display: flex;
  gap: 8px;
  margin-bottom: 8px;
}

.sdd-actor-header select {
  width: 120px;
}

.sdd-actor-header input {
  flex: 1;
}

/* Layers Grid */
.sdd-layers-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
}

.sdd-layer-card {
  background: var(--bg-primary);
  border: 1px solid var(--border);
  border-radius: 8px;
  padding: 12px;
}

.sdd-layer-card h5 {
  margin: 0 0 8px 0;
  font-size: 0.875rem;
}

/* Endpoints */
.sdd-endpoint-card {
  border: 1px solid var(--border);
  border-radius: 8px;
  margin-bottom: 12px;
  overflow: hidden;
}

.sdd-endpoint-header {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px;
  background: var(--bg-secondary);
}

.sdd-method {
  padding: 4px 8px;
  border-radius: 4px;
  font-size: 0.7rem;
  font-weight: 700;
  font-family: monospace;
}

.sdd-method-get { background: #61affe; color: white; }
.sdd-method-post { background: #49cc90; color: white; }
.sdd-method-put { background: #fca130; color: white; }
.sdd-method-delete { background: #f93e3e; color: white; }
.sdd-method-patch { background: #50e3c2; color: white; }

.sdd-endpoint-path {
  flex: 1;
  font-size: 0.875rem;
}

.sdd-endpoint-body {
  padding: 12px;
}

.sdd-endpoint-body p {
  margin: 0 0 8px 0;
  font-size: 0.875rem;
}

.sdd-endpoint-details {
  display: flex;
  gap: 16px;
  font-size: 0.75rem;
  color: var(--text-muted);
}

.sdd-empty-endpoints {
  text-align: center;
  padding: 40px;
  color: var(--text-muted);
}

.sdd-empty-endpoints i {
  font-size: 40px;
  opacity: 0.3;
  margin-bottom: 12px;
  display: block;
}

/* Integration Cards */
.sdd-integration-cards {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap: 16px;
}

.sdd-integration-card {
  border: 1px solid var(--border);
  border-radius: 8px;
  overflow: hidden;
}

.sdd-integration-header {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px;
  background: var(--bg-secondary);
}

.sdd-integration-icon {
  width: 40px;
  height: 40px;
  border-radius: 8px;
  background: var(--primary-bg);
  color: var(--primary);
  display: flex;
  align-items: center;
  justify-content: center;
}

.sdd-integration-header h5 {
  margin: 0;
  font-size: 0.875rem;
}

.sdd-integration-body {
  padding: 12px;
}

.sdd-integration-body p {
  margin: 0 0 12px 0;
  font-size: 0.875rem;
}

.sdd-integration-details {
  font-size: 0.75rem;
  color: var(--text-muted);
}

.sdd-integration-details div {
  margin-bottom: 4px;
}

.sdd-empty-integrations {
  grid-column: 1 / -1;
  text-align: center;
  padding: 40px;
  color: var(--text-muted);
}

.sdd-empty-integrations i {
  font-size: 40px;
  opacity: 0.3;
  margin-bottom: 12px;
  display: block;
}

/* NFR Table */
.sdd-nfr-table td:first-child {
  font-weight: 500;
  width: 150px;
}

.sdd-nfr-table td:last-child {
  color: var(--text-muted);
  font-size: 0.8rem;
}

/* Environments Grid */
.sdd-environments-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 16px;
}

.sdd-env-card {
  background: var(--bg-secondary);
  border: 1px solid var(--border);
  border-radius: 8px;
  padding: 16px;
}

.sdd-env-card h5 {
  margin: 0 0 12px 0;
  font-size: 0.9rem;
}

/* Risks */
.sdd-risk-card {
  border: 1px solid var(--border);
  border-radius: 8px;
  margin-bottom: 16px;
  overflow: hidden;
}

.sdd-risk-card.sdd-risk-low { border-left: 4px solid var(--success); }
.sdd-risk-card.sdd-risk-medium { border-left: 4px solid var(--warning); }
.sdd-risk-card.sdd-risk-high { border-left: 4px solid var(--danger); }
.sdd-risk-card.sdd-risk-critical { border-left: 4px solid #dc2626; }

.sdd-risk-header {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px;
  background: var(--bg-secondary);
}

.sdd-risk-severity {
  width: 100px;
}

.sdd-risk-title {
  flex: 1;
}

.sdd-risk-body {
  padding: 12px;
}

.sdd-risk-actions {
  margin-top: 12px;
  padding-top: 12px;
  border-top: 1px solid var(--border);
}

.sdd-empty-risks {
  text-align: center;
  padding: 40px;
  color: var(--text-muted);
}

.sdd-empty-risks i {
  font-size: 40px;
  color: var(--success);
  margin-bottom: 12px;
  display: block;
}

/* ADRs */
.sdd-adr-toolbar {
  display: flex;
  justify-content: space-between;
  margin-bottom: 20px;
}

.sdd-adr-card {
  border: 1px solid var(--border);
  border-radius: 8px;
  margin-bottom: 12px;
  overflow: hidden;
}

.sdd-adr-header {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px;
  background: var(--bg-secondary);
}

.sdd-adr-number {
  font-family: monospace;
  font-size: 0.75rem;
  color: var(--text-muted);
  background: var(--bg-primary);
  padding: 4px 8px;
  border-radius: 4px;
}

.sdd-adr-title {
  flex: 1;
}

.sdd-adr-status {
  width: 110px;
}

.sdd-adr-body {
  padding: 16px;
}

.sdd-adr-footer {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-top: 16px;
  padding-top: 12px;
  border-top: 1px solid var(--border);
}

.sdd-adr-date {
  font-size: 0.75rem;
  color: var(--text-muted);
}

.sdd-empty-adrs {
  text-align: center;
  padding: 60px;
  color: var(--text-muted);
}

.sdd-empty-adrs i {
  font-size: 48px;
  opacity: 0.3;
  margin-bottom: 16px;
  display: block;
}

/* Context Panel Tabs */
.sdd-tabs {
  display: flex;
  border-bottom: 1px solid var(--border);
}

.sdd-tab {
  flex: 1;
  padding: 12px 8px;
  background: none;
  border: none;
  border-bottom: 2px solid transparent;
  cursor: pointer;
  font-size: 0.75rem;
  color: var(--text-muted);
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 4px;
  transition: all 0.15s;
}

.sdd-tab:hover {
  color: var(--text-primary);
  background: var(--bg-hover);
}

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

.sdd-tab-content {
  padding: 16px;
  overflow-y: auto;
}

/* Context Links */
.sdd-context-links h4,
.sdd-context-sync h4,
.sdd-context-comments h4,
.sdd-context-outputs h4 {
  margin: 0 0 16px 0;
  font-size: 0.9rem;
}

.sdd-link-group {
  margin-bottom: 16px;
}

.sdd-link-group h5 {
  font-size: 0.75rem;
  color: var(--text-muted);
  margin: 0 0 8px 0;
  display: flex;
  align-items: center;
  gap: 6px;
}

.sdd-link-item {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px;
  background: var(--bg-primary);
  border-radius: 6px;
  margin-bottom: 6px;
}

.sdd-link-item i {
  color: var(--primary);
}

.sdd-link-item div {
  flex: 1;
}

.sdd-link-item strong {
  display: block;
  font-size: 0.8rem;
}

.sdd-link-item p {
  margin: 0;
  font-size: 0.7rem;
  color: var(--text-muted);
}

/* Sync Updates */
.sdd-sync-item {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  padding: 10px;
  background: var(--bg-primary);
  border-radius: 6px;
  margin-bottom: 8px;
}

.sdd-sync-added { border-left: 3px solid var(--success); }
.sdd-sync-changed { border-left: 3px solid var(--warning); }
.sdd-sync-removed { border-left: 3px solid var(--danger); }

.sdd-sync-icon {
  width: 24px;
  height: 24px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 0.7rem;
  background: var(--bg-secondary);
}

.sdd-sync-added .sdd-sync-icon { background: var(--success-bg); color: var(--success); }
.sdd-sync-changed .sdd-sync-icon { background: var(--warning-bg); color: var(--warning); }
.sdd-sync-removed .sdd-sync-icon { background: var(--danger-bg); color: var(--danger); }

.sdd-sync-content {
  flex: 1;
}

.sdd-sync-content strong {
  display: block;
  font-size: 0.8rem;
  margin-bottom: 2px;
}

.sdd-sync-content p {
  margin: 0 0 4px 0;
  font-size: 0.75rem;
  color: var(--text-muted);
}

.sdd-sync-actions {
  display: flex;
  gap: 4px;
}

/* Comments */
.sdd-comments-list {
  min-height: 200px;
}

.sdd-comment-input textarea {
  margin-bottom: 8px;
}

/* Outputs */
.sdd-output-section {
  margin-bottom: 16px;
}

.sdd-output-section h5 {
  font-size: 0.8rem;
  margin: 0 0 8px 0;
  display: flex;
  align-items: center;
  gap: 6px;
}

/* Context Empty State */
.sdd-context-empty {
  text-align: center;
  padding: 40px 20px;
  color: var(--text-muted);
}

.sdd-context-empty i {
  font-size: 32px;
  opacity: 0.3;
  margin-bottom: 12px;
  display: block;
}

/* Notice Boxes */
.sdd-notice {
  display: flex;
  gap: 12px;
  padding: 16px;
  border-radius: 8px;
  margin-bottom: 20px;
}

.sdd-notice i {
  font-size: 1.25rem;
  flex-shrink: 0;
}

.sdd-notice strong {
  display: block;
  margin-bottom: 4px;
}

.sdd-notice p {
  margin: 0;
  font-size: 0.875rem;
}

.sdd-notice.info {
  background: var(--info-bg);
  color: var(--info);
}

.sdd-notice.warning {
  background: var(--warning-bg);
  color: var(--warning);
}

/* Utility */
.full-width {
  width: 100%;
}

.text-warning { color: var(--warning); }
.text-center { text-align: center; }

/* SDD Loading States */
.sdd-loading,
.sdd-editor-loading {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 60px;
  color: var(--text-muted);
  min-height: 300px;
}

.sdd-loading-spinner {
  width: 40px;
  height: 40px;
  border: 3px solid var(--border-color);
  border-top-color: var(--accent);
  border-radius: 50%;
  animation: sdd-spin 0.8s linear infinite;
  margin-bottom: 16px;
}

@keyframes sdd-spin {
  to { transform: rotate(360deg); }
}

.sdd-loading p,
.sdd-editor-loading p {
  font-size: 14px;
  margin: 0;
}

/* SDD Save Indicator */
.sdd-save-indicator {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 12px;
  color: var(--text-muted);
  padding: 6px 12px;
  border-radius: 6px;
  background: var(--surface-bg);
}

.sdd-save-indicator.saving {
  color: var(--warning);
}

.sdd-save-indicator.saved {
  color: var(--success);
}

.sdd-save-indicator.error {
  color: var(--danger);
}

/* SDD Inline Lists */
.sdd-inline-list {
  margin: 12px 0;
}

.sdd-empty-list {
  padding: 24px;
  text-align: center;
  background: var(--surface-bg);
  border-radius: 8px;
  border: 1px dashed var(--border);
}

.sdd-inline-item {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 8px;
}

.sdd-inline-item .formInput {
  flex: 1;
}

.sdd-inline-table {
  border: 1px solid var(--border);
  border-radius: 8px;
  overflow: hidden;
}

.sdd-inline-table-header {
  display: flex;
  background: var(--surface-bg);
  border-bottom: 1px solid var(--border);
  padding: 8px 12px;
  gap: 8px;
}

.sdd-inline-th {
  flex: 1;
  font-size: 12px;
  font-weight: 600;
  color: var(--text-muted);
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

.sdd-inline-th.sdd-actions-col {
  flex: 0 0 40px;
  width: 40px;
}

.sdd-inline-table-row {
  display: flex;
  padding: 8px 12px;
  gap: 8px;
  border-bottom: 1px solid var(--border);
  align-items: center;
}

.sdd-inline-table-row:last-child {
  border-bottom: none;
}

.sdd-inline-table-row:hover {
  background: var(--surface-bg);
}

.sdd-inline-td {
  flex: 1;
}

.sdd-inline-td.sdd-actions-col {
  flex: 0 0 40px;
  width: 40px;
}

.sdd-inline-td .formInput {
  width: 100%;
  padding: 6px 10px;
  font-size: 13px;
}

.sdd-inline-input {
  border: 1px solid transparent;
  background: transparent;
  transition: all 0.2s ease;
}

.sdd-inline-input:focus {
  border-color: var(--accent);
  background: var(--bg);
}

.sdd-remove-item {
  opacity: 0.5;
  padding: 4px 8px !important;
}

.sdd-remove-item:hover {
  opacity: 1;
  color: var(--danger);
}

.sdd-add-inline {
  margin-top: 8px;
}

/* SDD Responsive */
@media (max-width: 1200px) {
  .sdd-panels {
    grid-template-columns: 220px 1fr 260px;
  }
}

@media (max-width: 992px) {
  .sdd-panels {
    grid-template-columns: 1fr;
  }

  .sdd-outline-panel,
  .sdd-context-panel {
    display: none;
  }

  .sdd-two-col,
  .sdd-layers-grid,
  .sdd-environments-grid {
    grid-template-columns: 1fr;
  }

  .sdd-preview-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (max-width: 768px) {
  .sdd-header {
    flex-direction: column;
    gap: 12px;
    align-items: flex-start;
  }

  .sdd-header-right {
    width: 100%;
    justify-content: flex-end;
    flex-wrap: wrap;
  }

  .sdd-empty-features {
    grid-template-columns: 1fr;
  }

  .sdd-preview-grid {
    grid-template-columns: 1fr;
  }
}

/* SDD Design Link Cards - Links to Solution Design pages */
.sdd-design-link-card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  overflow: hidden;
}

.sdd-design-link-header {
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 20px;
  background: linear-gradient(135deg, rgba(var(--primary-rgb), 0.03) 0%, transparent 100%);
  border-bottom: 1px solid var(--border-subtle);
}

.sdd-design-link-icon {
  width: 48px;
  height: 48px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--primary-alpha);
  border-radius: var(--radius);
  color: var(--primary);
  font-size: 20px;
  flex-shrink: 0;
}

.sdd-design-link-info {
  flex: 1;
  min-width: 0;
}

.sdd-design-link-info h4 {
  margin: 0 0 4px 0;
  font-size: 16px;
  font-weight: 600;
  color: var(--text);
}

.sdd-design-link-info p {
  margin: 0;
  font-size: 13px;
  color: var(--text-muted);
}

.sdd-design-link-preview {
  padding: 16px 20px;
  background: var(--bg);
}

.sdd-preview-stat {
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding: 12px;
  background: var(--surface);
  border-radius: var(--radius);
  border: 1px solid var(--border-subtle);
}

.sdd-preview-label {
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  color: var(--text-muted);
  font-weight: 600;
}

.sdd-preview-value {
  font-size: 14px;
  font-weight: 600;
  color: var(--text);
}

.sdd-preview-list {
  margin-top: 12px;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
  font-size: 13px;
}

.sdd-preview-list strong {
  color: var(--text-muted);
  font-weight: 500;
}

.sdd-go-to-design {
  color: var(--primary);
  text-decoration: none;
  font-weight: 500;
}

.sdd-go-to-design:hover {
  text-decoration: underline;
}

/* =============================================================================
   SOW (Scope of Work) Styles - Minimal (uses BRD layout classes)
   ============================================================================= */

/* BRD Reference Notice */
.sow-brd-reference {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 12px 16px;
  background: rgba(33, 150, 243, 0.1);
  border-radius: 8px;
  margin-bottom: 24px;
  font-size: 14px;
  color: #2196f3;
}

.sow-brd-reference a {
  color: var(--primary);
  font-weight: 600;
  text-decoration: none;
}

.sow-brd-reference a:hover {
  text-decoration: underline;
}

/* Form Elements */
.sow-form-group {
  margin-bottom: 20px;
}

.sow-form-row {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: 16px;
  margin-bottom: 20px;
}

/* Empty List State */
.sow-empty-list {
  padding: 32px;
  text-align: center;
  color: var(--text-muted);
  background: var(--hover);
  border-radius: 8px;
}

/* Tables (Deliverables) */
.sow-table-responsive {
  overflow-x: auto;
  margin-bottom: 20px;
}

.sow-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 14px;
}

.sow-table th,
.sow-table td {
  padding: 12px;
  text-align: left;
  border-bottom: 1px solid var(--border);
}

.sow-table th {
  font-weight: 600;
  background: var(--hover);
  font-size: 13px;
  white-space: nowrap;
}

.sow-table td input,
.sow-table td select {
  width: 100%;
  min-width: 100px;
}

.sow-table td:last-child {
  width: 40px;
}

.sow-empty-row td {
  text-align: center;
  color: var(--text-muted);
  padding: 32px;
}

/* Remove Button */
.sow-remove-btn {
  opacity: 0.5;
}

.sow-remove-btn:hover {
  opacity: 1;
  color: var(--danger);
}

/* Milestones */
.sow-milestones-list {
  display: flex;
  flex-direction: column;
  gap: 16px;
  margin-bottom: 20px;
}

.sow-milestone-card {
  background: var(--hover);
  border-radius: 8px;
  overflow: hidden;
}

.sow-milestone-header {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px 16px;
  background: var(--surface);
  border-bottom: 1px solid var(--border);
}

.sow-milestone-number {
  width: 32px;
  height: 32px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--primary);
  color: white;
  border-radius: 6px;
  font-size: 13px;
  font-weight: 600;
  flex-shrink: 0;
}

.sow-milestone-name {
  flex: 1;
  font-weight: 600;
}

.sow-milestone-body {
  padding: 16px;
}

.sow-milestone-actions {
  display: flex;
  gap: 12px;
}

/* Acceptance Criteria */
.sow-criteria-list {
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin-bottom: 12px;
}

.sow-criteria-item {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px;
  background: var(--hover);
  border-radius: 8px;
}

.sow-criteria-number {
  font-weight: 600;
  color: var(--text-muted);
  min-width: 24px;
}

.sow-criteria-item input[type="text"] {
  flex: 1;
}

/* Last Saved Display */
.brd-last-saved {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 13px;
  color: var(--text-muted);
}

.sow-approvers-list {
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin-bottom: 12px;
}

.sow-approver-item {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px;
  background: var(--hover);
  border-radius: 8px;
}

.sow-approver-item input {
  flex: 1;
}

.sow-approver-status {
  padding: 4px 12px;
  border-radius: 12px;
  font-size: 12px;
  font-weight: 500;
}

.sow-approver-status.pending {
  background: rgba(255, 193, 7, 0.1);
  color: #ffc107;
}

.sow-approver-status.approved {
  background: rgba(76, 175, 80, 0.1);
  color: #4caf50;
}

/* Responsive */
@media (max-width: 992px) {
  .sow-form-row {
    grid-template-columns: 1fr;
  }
}

/* ============================================
   Implementation Plan Styles
   ============================================ */

.impl-plan-container {
  display: flex;
  flex-direction: column;
  height: 100%;
  background: var(--bg);
  position: relative;
  overflow-y: auto;
}

.impl-plan-loading {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  height: 400px;
  gap: 16px;
}

.impl-plan-loading p {
  color: var(--text-muted);
  font-size: 14px;
}

/* Header - Sticky position like BRD */
.impl-plan-header {
  position: sticky;
  top: 0;
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 16px 32px;
  background: var(--surface);
  border-bottom: 1px solid rgba(0, 0, 0, 0.06);
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.04);
  z-index: 5;
}

.impl-plan-header-left {
  display: flex;
  align-items: center;
  gap: 16px;
}

.impl-plan-title {
  font-size: 22px;
  font-weight: 700;
  margin: 0;
  display: flex;
  align-items: center;
  gap: 10px;
  color: var(--text);
  letter-spacing: -0.01em;
}

.impl-plan-title i {
  color: var(--primary);
  opacity: 0.9;
}

.impl-plan-header-right {
  display: flex;
  align-items: center;
  gap: 8px;
}

.impl-plan-meta {
  display: flex;
  align-items: center;
  gap: 12px;
}

.impl-plan-timestamp {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 13px;
  color: var(--text-muted);
}

.impl-plan-timestamp i {
  font-size: 12px;
}

/* Version options for modal */
.impl-plan-version-options {
  display: flex;
  flex-direction: column;
  gap: 12px;
  margin-top: 16px;
}

.impl-plan-version-option {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  padding: 16px;
  border: 2px solid var(--border);
  border-radius: 8px;
  cursor: pointer;
  transition: all 0.2s ease;
}

.impl-plan-version-option:hover {
  border-color: var(--primary);
  background: rgba(var(--primary-rgb), 0.02);
}

.impl-plan-version-option:has(input[type="radio"]:checked) {
  border-color: var(--primary);
  background: rgba(var(--primary-rgb), 0.02);
}

.impl-plan-version-option h4 {
  margin: 0;
  font-size: 14px;
  font-weight: 600;
}

.impl-plan-version-option p {
  margin: 0;
  font-size: 12px;
  color: var(--text-muted);
}

.impl-plan-version-dropdown {
  position: relative;
}

.impl-plan-version-select {
  padding: 4px 24px 4px 10px;
  border: 1px solid var(--border);
  border-radius: 6px;
  font-size: 12px;
  background: var(--surface);
  cursor: pointer;
  appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%236b7280'%3E%3Cpath d='M7 10l5 5 5-5z'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 4px center;
  background-size: 16px;
}

.impl-plan-baseline-badge {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 4px 10px;
  border-radius: 20px;
  font-size: 12px;
  font-weight: 500;
  background: rgba(16, 185, 129, 0.1);
  color: #10b981;
}

.impl-plan-header-right {
  display: flex;
  align-items: center;
  gap: 8px;
}

/* Content Wrapper */
.impl-plan-content-wrapper {
  flex: 1;
  padding: 24px;
}

.impl-plan-editor-panel {
  max-width: 1400px;
  margin: 0 auto;
}

/* Sections */
.impl-plan-sections {
  display: flex;
  flex-direction: column;
  gap: 24px;
}

.impl-plan-section {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 12px;
  overflow: hidden;
}

.impl-plan-section-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 16px 20px;
  border-bottom: 1px solid var(--border);
  background: var(--bg);
}

.impl-plan-section-header h2 {
  font-size: 16px;
  font-weight: 600;
  margin: 0;
  display: flex;
  align-items: center;
  gap: 10px;
  color: var(--text);
}

.impl-plan-section-header h2 i {
  color: var(--primary);
  font-size: 14px;
}

.impl-plan-section-actions {
  display: flex;
  gap: 8px;
}

.impl-plan-section-content {
  padding: 20px;
}

/* Collapsible sections */
.impl-plan-section.collapsible .impl-plan-section-header {
  cursor: pointer;
}

.impl-plan-section.collapsible .collapse-icon {
  transition: transform 0.2s;
  margin-left: 8px;
  font-size: 12px;
  color: var(--text-muted);
}

.impl-plan-section.collapsible .collapse-icon.rotated {
  transform: rotate(180deg);
}

/* KPI Grid */
.impl-plan-kpi-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(120px, 1fr));
  gap: 16px;
  margin-bottom: 24px;
}

.impl-plan-kpi {
  text-align: center;
  padding: 16px;
  background: var(--bg);
  border-radius: 8px;
  border: 1px solid var(--border);
}

.impl-plan-kpi-value {
  font-size: 28px;
  font-weight: 700;
  color: var(--primary);
  line-height: 1.2;
}

.impl-plan-kpi-label {
  font-size: 12px;
  color: var(--text-muted);
  margin-top: 4px;
}

/* Overview Grid */
.impl-plan-overview-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
  margin-bottom: 24px;
}

.impl-plan-dates-card,
.impl-plan-health-card {
  padding: 16px;
  background: var(--bg);
  border-radius: 8px;
  border: 1px solid var(--border);
}

.impl-plan-dates-card h4,
.impl-plan-health-card h4 {
  margin: 0 0 12px;
  font-size: 14px;
  font-weight: 600;
  color: var(--text-muted);
}

.impl-plan-dates-row {
  display: flex;
  gap: 24px;
  margin-bottom: 12px;
}

.impl-plan-dates-row.baseline {
  padding-top: 12px;
  border-top: 1px dashed var(--border);
}

.impl-plan-date-item {
  flex: 1;
}

.impl-plan-date-label {
  display: block;
  font-size: 11px;
  color: var(--text-muted);
  margin-bottom: 4px;
}

.impl-plan-date-value {
  font-size: 14px;
  font-weight: 500;
  color: var(--text);
}

.impl-plan-health-indicator {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 18px;
  font-weight: 600;
  margin-bottom: 12px;
}

.impl-plan-health-indicator i {
  font-size: 24px;
}

.impl-plan-variance-summary {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 14px;
}

.impl-plan-variance-label {
  color: var(--text-muted);
}

.impl-plan-variance-value {
  font-weight: 600;
}

.impl-plan-variance-value.positive {
  color: #10b981;
}

.impl-plan-variance-value.negative {
  color: #ef4444;
}

/* Deviations */
.impl-plan-deviations h4 {
  margin: 0 0 12px;
  font-size: 14px;
  font-weight: 600;
  color: var(--text-muted);
}

.impl-plan-deviations-list {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.impl-plan-deviation-item {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 10px 12px;
  background: var(--bg);
  border-radius: 6px;
  border: 1px solid var(--border);
}

.impl-plan-deviation-name {
  font-size: 13px;
  color: var(--text);
}

.impl-plan-deviation-value {
  font-size: 13px;
  font-weight: 600;
}

/* Settings Grid */
.impl-plan-settings-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: 16px;
  margin-bottom: 16px;
}

.impl-plan-settings-toggles {
  display: flex;
  gap: 24px;
}

.toggle-label {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 14px;
  cursor: pointer;
}

.toggle-label input[type="checkbox"] {
  width: 16px;
  height: 16px;
}

/* Gantt Chart */
.impl-plan-gantt-wrapper {
  display: flex;
  border: 1px solid var(--border);
  border-radius: 8px;
  overflow: hidden;
  min-height: 400px;
}

.impl-plan-gantt-table {
  width: 55%;
  min-width: 600px;
  border-right: 1px solid var(--border);
  flex-shrink: 0;
  display: flex;
  flex-direction: column;
}

.impl-plan-gantt-table-header {
  display: flex;
  align-items: center;
  padding: 0;
  background: var(--bg);
  border-bottom: 1px solid var(--border);
  font-size: 12px;
  font-weight: 600;
  color: var(--text-muted);
  height: 40px;
  flex-shrink: 0;
}

.impl-plan-gantt-table-body {
  flex: 1;
  overflow-y: auto;
}

.impl-plan-gantt-col {
  padding: 8px 10px;
  display: flex;
  align-items: center;
  min-height: 40px;
}

.impl-plan-gantt-col.col-expand {
  width: 32px;
  flex-shrink: 0;
  justify-content: center;
}

.impl-plan-gantt-col.col-name {
  flex: 2;
  min-width: 200px;
  gap: 8px;
}

.impl-plan-gantt-col.col-owner {
  width: 100px;
  flex-shrink: 0;
}

.impl-plan-gantt-col.col-start,
.impl-plan-gantt-col.col-end {
  width: 90px;
  flex-shrink: 0;
  font-size: 12px;
}

.impl-plan-gantt-col.col-duration {
  width: 60px;
  flex-shrink: 0;
  font-size: 12px;
}

.impl-plan-gantt-col.col-progress {
  width: 100px;
  flex-shrink: 0;
  gap: 6px;
}

.impl-plan-gantt-col.col-agents {
  width: 120px;
  flex-shrink: 0;
  gap: 4px;
  flex-wrap: wrap;
}

/* Gantt Rows */
.impl-plan-gantt-row {
  display: flex;
  align-items: center;
  border-bottom: 1px solid var(--border);
  transition: background 0.15s;
  cursor: pointer;
}

.impl-plan-gantt-row:hover {
  background: var(--hover);
}

.impl-plan-gantt-row.milestone {
  background: rgba(124, 58, 237, 0.03);
}

.impl-plan-gantt-row.milestone:hover {
  background: rgba(124, 58, 237, 0.08);
}

.impl-plan-gantt-row.workgroup {
  background: rgba(37, 99, 235, 0.02);
}

.impl-plan-gantt-row.activity {
  background: var(--surface);
}

.btn-expand {
  width: 20px;
  height: 20px;
  display: flex;
  align-items: center;
  justify-content: center;
  border: none;
  background: transparent;
  cursor: pointer;
  border-radius: 4px;
  color: var(--text-muted);
  font-size: 10px;
}

.btn-expand:hover {
  background: var(--border);
  color: var(--text);
}

.impl-plan-type-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 20px;
  height: 20px;
  border-radius: 4px;
  font-size: 11px;
  font-weight: 600;
  flex-shrink: 0;
}

.impl-plan-type-badge.small {
  width: 16px;
  height: 16px;
  font-size: 9px;
}

.impl-plan-item-name {
  font-size: 13px;
  color: var(--text);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  flex: 1;
}

.impl-plan-row-actions {
  display: none;
  gap: 4px;
  margin-left: auto;
}

.impl-plan-gantt-row:hover .impl-plan-row-actions {
  display: flex;
}

.btn-action {
  width: 24px;
  height: 24px;
  display: flex;
  align-items: center;
  justify-content: center;
  border: none;
  background: transparent;
  cursor: pointer;
  border-radius: 4px;
  color: var(--text-muted);
  font-size: 11px;
}

.btn-action:hover {
  background: var(--border);
  color: var(--text);
}

.btn-action.danger:hover {
  background: rgba(239, 68, 68, 0.1);
  color: #ef4444;
}

.impl-plan-owner-chip {
  display: inline-block;
  padding: 2px 8px;
  background: var(--bg);
  border: 1px solid var(--border);
  border-radius: 12px;
  font-size: 11px;
  color: var(--text);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 90px;
}

.impl-plan-owner-unassigned {
  color: var(--text-muted);
  font-size: 12px;
}

.impl-plan-progress-bar {
  flex: 1;
  height: 6px;
  background: var(--border);
  border-radius: 3px;
  overflow: hidden;
}

.impl-plan-progress-fill {
  height: 100%;
  background: var(--primary);
  border-radius: 3px;
  transition: width 0.3s;
}

.impl-plan-progress-text {
  font-size: 11px;
  color: var(--text-muted);
  min-width: 30px;
  text-align: right;
}

.impl-plan-agent-chip {
  display: inline-block;
  padding: 2px 6px;
  border-radius: 4px;
  font-size: 10px;
  font-weight: 600;
}

.impl-plan-no-agents {
  color: var(--text-muted);
  font-size: 12px;
}

/* Gantt Timeline */
.impl-plan-gantt-timeline {
  flex: 1;
  min-width: 300px;
  display: flex;
  flex-direction: column;
  background: var(--bg);
}

.impl-plan-gantt-timeline.empty {
  display: flex;
  align-items: center;
  justify-content: center;
}

.impl-plan-gantt-no-dates {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  color: var(--text-muted);
  font-size: 13px;
}

.impl-plan-gantt-no-dates i {
  font-size: 24px;
}

.impl-plan-gantt-timeline-header {
  position: relative;
  height: 40px;
  border-bottom: 1px solid var(--border);
  background: var(--surface);
  flex-shrink: 0;
}

.impl-plan-gantt-month {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  font-size: 11px;
  font-weight: 500;
  color: var(--text-muted);
  padding-left: 8px;
  border-left: 1px solid var(--border);
}

.impl-plan-gantt-timeline-body {
  flex: 1;
  position: relative;
  overflow-y: auto;
}

.impl-plan-gantt-today {
  position: absolute;
  top: 0;
  bottom: 0;
  width: 2px;
  background: #ef4444;
  z-index: 10;
}

.impl-plan-gantt-today span {
  position: absolute;
  top: 4px;
  left: 4px;
  font-size: 10px;
  font-weight: 600;
  color: #ef4444;
  white-space: nowrap;
}

.impl-plan-gantt-bar-row {
  height: 40px;
  position: relative;
  border-bottom: 1px solid var(--border);
}

.impl-plan-gantt-baseline-bar {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  height: 6px;
  background: #9ca3af;
  border-radius: 3px;
  opacity: 0.5;
}

.impl-plan-gantt-bar {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  height: 16px;
  border-radius: 4px;
  display: flex;
  align-items: center;
  overflow: hidden;
  cursor: pointer;
  transition: filter 0.15s;
}

.impl-plan-gantt-bar:hover {
  filter: brightness(1.1);
}

.impl-plan-gantt-bar-progress {
  height: 100%;
  background: rgba(255, 255, 255, 0.3);
}

/* Assignments Section */
.impl-plan-assignments-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 24px;
}

.impl-plan-stakeholder-matrix h4,
.impl-plan-agent-allocation h4 {
  margin: 0 0 16px;
  font-size: 14px;
  font-weight: 600;
  color: var(--text-muted);
}

.impl-plan-matrix-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 13px;
}

.impl-plan-matrix-table th {
  text-align: left;
  padding: 10px 12px;
  background: var(--bg);
  font-weight: 600;
  color: var(--text-muted);
  border-bottom: 1px solid var(--border);
}

.impl-plan-matrix-table td {
  padding: 10px 12px;
  border-bottom: 1px solid var(--border);
}

.impl-plan-role-badge {
  display: inline-block;
  padding: 2px 8px;
  border-radius: 4px;
  font-size: 11px;
  font-weight: 500;
  background: var(--bg);
  color: var(--text);
  text-transform: capitalize;
}

.impl-plan-agent-demand-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
  gap: 12px;
}

.impl-plan-agent-demand-item {
  padding: 12px;
  background: var(--bg);
  border-radius: 8px;
  text-align: center;
}

.impl-plan-agent-demand-header {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  font-size: 12px;
  font-weight: 500;
  margin-bottom: 8px;
}

.impl-plan-agent-demand-count {
  font-size: 24px;
  font-weight: 700;
  color: var(--text);
}

.impl-plan-agent-demand-label {
  font-size: 11px;
  color: var(--text-muted);
}

.impl-plan-empty-text {
  color: var(--text-muted);
  font-size: 14px;
  text-align: center;
  padding: 24px;
}

/* Baseline Section */
.impl-plan-baseline-info {
  margin-bottom: 24px;
}

.impl-plan-baseline-card {
  padding: 16px;
  background: var(--bg);
  border-radius: 8px;
  border: 1px solid var(--border);
}

.impl-plan-baseline-card h4 {
  margin: 0 0 12px;
  font-size: 14px;
  font-weight: 600;
  color: var(--text);
}

.impl-plan-baseline-details {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.impl-plan-baseline-row {
  display: flex;
  gap: 12px;
  font-size: 13px;
}

.impl-plan-baseline-label {
  color: var(--text-muted);
  min-width: 100px;
}

.impl-plan-baseline-value {
  color: var(--text);
  font-weight: 500;
}

.impl-plan-variance-report h4 {
  margin: 0 0 16px;
  font-size: 14px;
  font-weight: 600;
  color: var(--text-muted);
}

.impl-plan-variance-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 13px;
}

.impl-plan-variance-table th {
  text-align: left;
  padding: 10px 12px;
  background: var(--bg);
  font-weight: 600;
  color: var(--text-muted);
  border-bottom: 1px solid var(--border);
}

.impl-plan-variance-table td {
  padding: 10px 12px;
  border-bottom: 1px solid var(--border);
}

.impl-plan-variance-table td.positive {
  color: #10b981;
  font-weight: 600;
}

.impl-plan-variance-table td.negative {
  color: #ef4444;
  font-weight: 600;
}

.impl-plan-no-baseline {
  text-align: center;
  padding: 48px 24px;
}

.impl-plan-no-baseline i {
  font-size: 48px;
  color: var(--border);
  margin-bottom: 16px;
}

.impl-plan-no-baseline h4 {
  margin: 0 0 8px;
  font-size: 18px;
  font-weight: 600;
  color: var(--text);
}

.impl-plan-no-baseline p {
  margin: 0 0 24px;
  font-size: 14px;
  color: var(--text-muted);
}

/* Change Requests Section */
.impl-plan-change-list {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  gap: 16px;
}

.impl-plan-change-card {
  padding: 16px;
  background: var(--bg);
  border-radius: 8px;
  border: 1px solid var(--border);
  cursor: pointer;
  transition: border-color 0.15s;
}

.impl-plan-change-card:hover {
  border-color: var(--primary);
}

.impl-plan-change-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 8px;
}

.impl-plan-change-status {
  padding: 2px 8px;
  border-radius: 4px;
  font-size: 11px;
  font-weight: 500;
  text-transform: capitalize;
}

.impl-plan-change-status.status-pending {
  background: rgba(245, 158, 11, 0.1);
  color: #f59e0b;
}

.impl-plan-change-status.status-approved {
  background: rgba(16, 185, 129, 0.1);
  color: #10b981;
}

.impl-plan-change-status.status-rejected {
  background: rgba(239, 68, 68, 0.1);
  color: #ef4444;
}

.impl-plan-change-id {
  font-size: 11px;
  color: var(--text-muted);
  font-family: monospace;
}

.impl-plan-change-title {
  margin: 0 0 8px;
  font-size: 14px;
  font-weight: 600;
  color: var(--text);
}

.impl-plan-change-desc {
  margin: 0 0 12px;
  font-size: 13px;
  color: var(--text-muted);
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.impl-plan-change-impact {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 12px;
  margin-bottom: 8px;
}

.impl-plan-change-impact-label {
  color: var(--text-muted);
}

.impl-plan-change-impact-value {
  font-weight: 600;
}

.impl-plan-change-impact-value.neutral {
  color: var(--text);
}

.impl-plan-change-affected {
  font-size: 12px;
  color: var(--text-muted);
}

.impl-plan-no-changes {
  text-align: center;
  padding: 48px 24px;
}

.impl-plan-no-changes i {
  font-size: 48px;
  color: var(--border);
  margin-bottom: 16px;
}

.impl-plan-no-changes h4 {
  margin: 0 0 8px;
  font-size: 18px;
  font-weight: 600;
  color: var(--text);
}

.impl-plan-no-changes p {
  margin: 0;
  font-size: 14px;
  color: var(--text-muted);
}

/* Empty State */
.impl-plan-empty-state {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 64px 24px;
  text-align: center;
}

.impl-plan-empty-icon {
  font-size: 64px;
  color: var(--border);
  margin-bottom: 24px;
}

.impl-plan-empty-state h2 {
  margin: 0 0 8px;
  font-size: 24px;
  font-weight: 600;
  color: var(--text);
}

.impl-plan-empty-state > p {
  margin: 0 0 24px;
  font-size: 14px;
  color: var(--text-muted);
  max-width: 400px;
}

.impl-plan-empty-features {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 16px;
  margin-bottom: 32px;
}

.impl-plan-empty-feature {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px 16px;
  background: var(--bg);
  border-radius: 20px;
  font-size: 13px;
  color: var(--text);
}

.impl-plan-empty-feature i {
  color: var(--primary);
}

.impl-plan-empty-note {
  margin-top: 24px;
  font-size: 13px;
  color: var(--text-muted);
  display: flex;
  align-items: center;
  gap: 8px;
}

/* Drawer Overlay */
.impl-plan-drawer-overlay {
  position: fixed;
  top: var(--header-height, 56px);
  left: 0;
  right: 0;
  bottom: 0;
  background: rgba(0, 0, 0, 0.4);
  z-index: 9998;
  animation: fadeIn 0.2s ease;
}

@keyframes fadeIn {
  from { opacity: 0; }
  to { opacity: 1; }
}

/* Drawer */
.impl-plan-drawer {
  position: fixed;
  top: var(--header-height, 56px);
  right: 0;
  width: 40%;
  min-width: 400px;
  max-width: 600px;
  height: calc(100vh - var(--header-height, 56px));
  background: var(--surface);
  border-left: 1px solid var(--border);
  box-shadow: -4px 0 20px rgba(0, 0, 0, 0.15);
  transform: translateX(100%);
  transition: transform 0.3s ease;
  z-index: 9999;
  display: flex;
  flex-direction: column;
  overflow: hidden;
}

.impl-plan-drawer.open {
  transform: translateX(0);
}

.impl-plan-drawer-content {
  display: flex;
  flex-direction: column;
  height: 100%;
  overflow: hidden;
}

.impl-plan-drawer-header {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  padding: 20px;
  border-bottom: 1px solid var(--border);
  flex-shrink: 0;
}

.impl-plan-drawer-title {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.impl-plan-drawer-title h3 {
  margin: 0;
  font-size: 18px;
  font-weight: 600;
  color: var(--text);
}

.impl-plan-drawer-body {
  flex: 1;
  overflow-y: auto;
  padding: 20px;
}

.impl-plan-drawer-section {
  margin-bottom: 24px;
}

.impl-plan-drawer-section h4 {
  margin: 0 0 12px;
  font-size: 14px;
  font-weight: 600;
  color: var(--text-muted);
}

.form-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
}

.impl-plan-progress-input {
  display: flex;
  align-items: center;
  gap: 12px;
}

.impl-plan-progress-input input[type="range"] {
  flex: 1;
}

.impl-plan-stakeholder-list,
.impl-plan-agent-list {
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin-bottom: 12px;
}

.impl-plan-stakeholder-item,
.impl-plan-agent-item {
  display: flex;
  align-items: center;
  gap: 8px;
}

.impl-plan-stakeholder-item input,
.impl-plan-stakeholder-item select,
.impl-plan-agent-item select,
.impl-plan-agent-item input {
  flex: 1;
}

.impl-plan-baseline-compare {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.impl-plan-compare-row {
  display: flex;
  justify-content: space-between;
  font-size: 13px;
  padding: 8px 0;
  border-bottom: 1px solid var(--border);
}

.impl-plan-compare-row.variance {
  background: var(--bg);
  padding: 12px;
  margin: 8px -12px 0;
  border-radius: 6px;
  border: none;
}

.impl-plan-compare-label {
  color: var(--text-muted);
}

.impl-plan-compare-value {
  font-weight: 500;
  color: var(--text);
}

.impl-plan-compare-value.positive {
  color: #10b981;
}

.impl-plan-compare-value.negative {
  color: #ef4444;
}

.impl-plan-drawer-footer {
  display: flex;
  justify-content: flex-end;
  gap: 12px;
  padding: 16px 20px;
  border-top: 1px solid var(--border);
  flex-shrink: 0;
  background: var(--bg);
}

/* Dropdowns */
.dropdown-container {
  position: relative;
}

.dropdown-menu {
  position: absolute;
  top: 100%;
  right: 0;
  min-width: 160px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 8px;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
  padding: 4px;
  display: none;
  z-index: 100;
}

.dropdown-menu.show {
  display: block;
}

.dropdown-item {
  display: flex;
  align-items: center;
  gap: 10px;
  width: 100%;
  padding: 10px 12px;
  border: none;
  background: none;
  font-size: 13px;
  color: var(--text);
  cursor: pointer;
  border-radius: 6px;
  text-align: left;
}

.dropdown-item:hover {
  background: var(--hover);
}

.dropdown-checkbox {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px 12px;
  font-size: 13px;
  cursor: pointer;
}

.dropdown-checkbox input {
  width: 14px;
  height: 14px;
}

/* Responsive */
@media (max-width: 1200px) {
  .impl-plan-gantt-table {
    width: 50%;
    min-width: 500px;
  }

  .impl-plan-assignments-grid {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 992px) {
  .impl-plan-gantt-wrapper {
    flex-direction: column;
  }

  .impl-plan-gantt-table {
    width: 100%;
    min-width: auto;
    border-right: none;
    border-bottom: 1px solid var(--border);
  }

  .impl-plan-gantt-timeline {
    min-height: 300px;
  }

  .impl-plan-overview-grid {
    grid-template-columns: 1fr;
  }

  .impl-plan-drawer {
    width: 100%;
  }
}

@media (max-width: 768px) {
  .impl-plan-header {
    flex-direction: column;
    gap: 12px;
    align-items: stretch;
  }

  .impl-plan-header-row {
    flex-wrap: wrap;
  }

  .impl-plan-actions-row {
    flex-direction: column;
    align-items: flex-start;
    gap: 12px;
  }

  .impl-plan-header-actions {
    flex-wrap: wrap;
  }

  .impl-plan-kpi-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

/* Implementation Plan Modal */
.impl-modal-overlay {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.5);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 3000;
  padding: 20px;
  animation: fadeIn 0.2s ease;
}

@keyframes fadeIn {
  from { opacity: 0; }
  to { opacity: 1; }
}

.impl-modal {
  background: var(--surface);
  border-radius: 12px;
  box-shadow: 0 20px 60px rgba(0, 0, 0, 0.2);
  width: 100%;
  max-width: 560px;
  max-height: 90vh;
  display: flex;
  flex-direction: column;
  animation: slideUp 0.25s ease;
}

@keyframes slideUp {
  from {
    opacity: 0;
    transform: translateY(20px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.impl-modal-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 20px 24px;
  border-bottom: 1px solid var(--border);
  flex-shrink: 0;
}

.impl-modal-title {
  display: flex;
  align-items: center;
  gap: 12px;
}

.impl-modal-title h2 {
  margin: 0;
  font-size: 18px;
  font-weight: 600;
  color: var(--text);
}

.impl-modal-type-badge {
  width: 32px;
  height: 32px;
  border-radius: 8px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 14px;
}

.impl-modal-close {
  width: 32px;
  height: 32px;
  border: none;
  background: none;
  cursor: pointer;
  border-radius: 6px;
  color: var(--text-muted);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 16px;
}

.impl-modal-close:hover {
  background: var(--hover);
  color: var(--text);
}

.impl-modal-parent-info {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 12px 24px;
  background: var(--bg);
  border-bottom: 1px solid var(--border);
  font-size: 13px;
  color: var(--text-muted);
}

.impl-modal-parent-info i {
  transform: rotate(90deg);
  font-size: 12px;
}

.impl-modal-parent-info strong {
  color: var(--text);
}

.impl-modal-body {
  padding: 24px;
  overflow-y: auto;
  flex: 1;
}

.impl-modal-body .form-group {
  margin-bottom: 20px;
}

.impl-modal-body .form-group:last-child {
  margin-bottom: 0;
}

.impl-modal-body .formLabel.required::after {
  content: " *";
  color: #ef4444;
}

.impl-modal-footer {
  display: flex;
  justify-content: flex-end;
  gap: 12px;
  padding: 16px 24px;
  border-top: 1px solid var(--border);
  background: var(--bg);
  flex-shrink: 0;
}

/* Modal Agent Rows */
.impl-modal-agents {
  display: flex;
  flex-direction: column;
  gap: 10px;
  margin-bottom: 12px;
}

.impl-modal-agent-row {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 12px;
  background: var(--bg);
  border-radius: 8px;
  border: 1px solid var(--border);
}

.impl-modal-agent-row select {
  flex: 1;
}

.impl-modal-agent-count {
  display: flex;
  align-items: center;
  gap: 4px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 6px;
  padding: 2px;
}

.btn-count {
  width: 28px;
  height: 28px;
  border: none;
  background: transparent;
  cursor: pointer;
  border-radius: 4px;
  font-size: 14px;
  font-weight: 600;
  color: var(--text);
  display: flex;
  align-items: center;
  justify-content: center;
}

.btn-count:hover:not(:disabled) {
  background: var(--hover);
}

.btn-count:disabled {
  color: var(--text-muted);
  cursor: not-allowed;
}

.count-value {
  min-width: 24px;
  text-align: center;
  font-weight: 600;
  font-size: 14px;
}

/* Empty State Actions */
.impl-plan-empty-actions {
  display: flex;
  flex-direction: column;
  gap: 16px;
  width: 100%;
  max-width: 400px;
  margin-top: 8px;
}

.impl-plan-empty-action-card {
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 20px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 12px;
  cursor: pointer;
  transition: all 0.2s;
}

.impl-plan-empty-action-card:hover {
  border-color: var(--primary);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
}

.impl-plan-action-icon {
  width: 48px;
  height: 48px;
  border-radius: 10px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 20px;
  flex-shrink: 0;
}

.impl-plan-action-content {
  flex: 1;
}

.impl-plan-action-content h4 {
  margin: 0 0 4px;
  font-size: 15px;
  font-weight: 600;
  color: var(--text);
}

.impl-plan-action-content p {
  margin: 0;
  font-size: 13px;
  color: var(--text-muted);
}

.impl-plan-empty-divider {
  display: flex;
  align-items: center;
  gap: 16px;
  color: var(--text-muted);
  font-size: 13px;
}

.impl-plan-empty-divider::before,
.impl-plan-empty-divider::after {
  content: "";
  flex: 1;
  height: 1px;
  background: var(--border);
}

/* Quick Add Buttons */
.impl-plan-quick-add-group {
  display: flex;
  gap: 8px;
  margin-right: 8px;
}

.quick-add-container {
  position: relative;
}

.quick-add-btn {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 8px 14px;
  background: var(--btn-bg, #f0f0f0);
  color: var(--btn-color, #333);
  border: none;
  border-radius: 8px;
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.2s;
  white-space: nowrap;
}

.quick-add-btn:hover {
  filter: brightness(0.95);
  transform: translateY(-1px);
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.12);
}

.quick-add-chevron {
  font-size: 10px;
  margin-left: 2px;
  transition: transform 0.2s;
}

.quick-add-dropdown {
  position: absolute;
  top: calc(100% + 6px);
  right: 0;
  min-width: 280px;
  background: var(--surface, #fff);
  border: 1px solid var(--border);
  border-radius: 12px;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.15);
  z-index: 1000;
  display: none;
  animation: dropdownFadeIn 0.15s ease;
}

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

.quick-add-dropdown.show {
  display: block;
}

.quick-add-dropdown-header {
  padding: 12px 16px;
  font-size: 12px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  color: var(--text-muted);
  border-bottom: 1px solid var(--border);
}

.quick-add-dropdown-body {
  max-height: 280px;
  overflow-y: auto;
  padding: 8px;
}

.quick-add-group-label {
  padding: 8px 12px 4px;
  font-size: 11px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  color: var(--text-muted);
}

.quick-add-option {
  display: flex;
  align-items: center;
  gap: 12px;
  width: 100%;
  padding: 10px 12px;
  background: transparent;
  border: none;
  border-radius: 8px;
  cursor: pointer;
  transition: background 0.15s;
  text-align: left;
}

.quick-add-option:hover {
  background: var(--hover);
}

.quick-add-option-badge {
  width: 28px;
  height: 28px;
  border-radius: 6px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 12px;
  flex-shrink: 0;
}

.quick-add-option-name {
  flex: 1;
  font-size: 14px;
  font-weight: 500;
  color: var(--text);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.quick-add-empty {
  padding: 24px;
  text-align: center;
  color: var(--text-muted);
  font-size: 13px;
}

/* Drag and Drop */
.impl-plan-gantt-row[draggable="true"] {
  cursor: grab;
}

.impl-plan-gantt-row.dragging {
  opacity: 0.5;
  cursor: grabbing;
}

.impl-plan-gantt-row.drag-over-top {
  border-top: 2px solid var(--primary);
}

.impl-plan-gantt-row.drag-over-bottom {
  border-bottom: 2px solid var(--primary);
}

.drop-indicator {
  height: 2px;
  background: var(--primary);
  position: absolute;
  left: 0;
  right: 0;
  z-index: 100;
  pointer-events: none;
}

/* Modern Drawer Styles */
.drawer-modern {
  display: flex;
  flex-direction: column;
  height: 100%;
  max-height: 100vh;
  background: var(--panel-bg, #fff);
  overflow: hidden;
}

.drawer-modern-header {
  padding: 20px 24px;
  border-bottom: 1px solid var(--border);
  position: relative;
}

.drawer-close-btn {
  position: absolute;
  top: 16px;
  right: 16px;
  width: 32px;
  height: 32px;
  border-radius: 8px;
  border: none;
  background: var(--hover);
  color: var(--text-muted);
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all 0.15s;
}

.drawer-close-btn:hover {
  background: var(--border);
  color: var(--text);
}

.drawer-breadcrumb {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 12px;
  color: var(--text-muted);
  margin-bottom: 12px;
}

.drawer-breadcrumb-item {
  cursor: pointer;
  color: var(--primary);
  transition: color 0.15s;
}

.drawer-breadcrumb-item:hover {
  color: var(--primary-dark);
  text-decoration: underline;
}

.drawer-breadcrumb i {
  font-size: 8px;
  opacity: 0.5;
}

.drawer-header-main {
  display: flex;
  align-items: flex-start;
  gap: 16px;
}

.drawer-type-icon {
  width: 48px;
  height: 48px;
  border-radius: 12px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 20px;
  flex-shrink: 0;
}

.drawer-header-content {
  flex: 1;
  min-width: 0;
}

.drawer-type-label {
  font-size: 11px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  color: var(--text-muted);
  display: block;
  margin-bottom: 4px;
}

.drawer-title-input {
  width: 100%;
  font-size: 18px;
  font-weight: 600;
  color: var(--text);
  background: transparent;
  border: none;
  outline: none;
  padding: 4px 0;
  border-bottom: 2px solid transparent;
  transition: border-color 0.15s;
}

.drawer-title-input:focus {
  border-bottom-color: var(--primary);
}

.drawer-quick-stats {
  display: flex;
  gap: 8px;
  margin-top: 16px;
  flex-wrap: wrap;
}

.drawer-stat {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 6px 12px;
  background: var(--hover);
  border-radius: 20px;
  font-size: 12px;
  font-weight: 500;
  color: var(--text);
}

.drawer-stat.stat-danger {
  background: #fee2e2;
  color: #dc2626;
}

.drawer-stat.stat-success {
  background: #d1fae5;
  color: #059669;
}

.drawer-modern-body {
  flex: 1;
  overflow-y: auto;
  padding: 24px;
  display: flex;
  flex-direction: column;
  gap: 20px;
}

.drawer-card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 12px;
  padding: 16px;
}

.drawer-card.drawer-card-muted {
  background: var(--hover);
}

.drawer-card-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 16px;
}

.drawer-card-header h4 {
  margin: 0;
  font-size: 14px;
  font-weight: 600;
  color: var(--text);
  display: flex;
  align-items: center;
  gap: 8px;
}

.drawer-card-header h4 i {
  color: var(--text-muted);
  font-size: 14px;
}

.drawer-card-badge {
  font-size: 12px;
  font-weight: 500;
  color: var(--text-muted);
  background: var(--bg);
  padding: 4px 8px;
  border-radius: 4px;
}

.drawer-card-body {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.drawer-field {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.drawer-field label {
  font-size: 11px;
  font-weight: 600;
  color: var(--text-muted);
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

.drawer-field p {
  font-size: 14px;
  color: var(--text);
  margin: 0;
  line-height: 1.5;
}

.drawer-field-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
}

.drawer-empty-text {
  font-size: 13px;
  color: var(--text-muted);
  font-style: italic;
  margin: 0;
}

.drawer-title-text {
  font-size: 16px;
  font-weight: 600;
  margin: 0;
  line-height: 1.4;
  color: var(--text);
}

.drawer-add-btn {
  width: 28px;
  height: 28px;
  border-radius: 6px;
  border: 1px dashed var(--border);
  background: transparent;
  color: var(--text-muted);
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 12px;
  transition: all 0.15s;
}

.drawer-add-btn:hover {
  border-color: var(--primary);
  color: var(--primary);
  background: var(--primary-light);
}

/* Progress Ring */
.drawer-progress-visual {
  display: flex;
  align-items: center;
  gap: 24px;
}

.drawer-progress-ring {
  width: 80px;
  height: 80px;
  position: relative;
  flex-shrink: 0;
}

.drawer-progress-ring svg {
  width: 100%;
  height: 100%;
  transform: rotate(-90deg);
}

.drawer-progress-ring .progress-bg {
  fill: none;
  stroke: var(--border);
  stroke-width: 3;
}

.drawer-progress-ring .progress-bar {
  fill: none;
  stroke: var(--primary);
  stroke-width: 3;
  stroke-linecap: round;
  transition: stroke-dasharray 0.3s ease;
}

.drawer-progress-ring .progress-value {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  font-size: 18px;
  font-weight: 700;
  color: var(--text);
}

.drawer-progress-slider {
  flex: 1;
}

.drawer-progress-slider input[type="range"] {
  width: 100%;
  height: 8px;
  -webkit-appearance: none;
  appearance: none;
  background: var(--border);
  border-radius: 4px;
  outline: none;
}

.drawer-progress-slider input[type="range"]::-webkit-slider-thumb {
  -webkit-appearance: none;
  appearance: none;
  width: 20px;
  height: 20px;
  background: var(--primary);
  border-radius: 50%;
  cursor: pointer;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.2);
}

.progress-marks {
  display: flex;
  justify-content: space-between;
  margin-top: 8px;
  font-size: 10px;
  color: var(--text-muted);
}

/* Schedule Grid */
.drawer-schedule-grid {
  display: flex;
  align-items: flex-end;
  gap: 16px;
}

.drawer-date-field {
  flex: 1;
}

.drawer-date-field label {
  display: block;
  font-size: 12px;
  font-weight: 500;
  color: var(--text-muted);
  margin-bottom: 6px;
}

.drawer-date-input-wrap {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 10px 12px;
  background: var(--hover);
  border: 1px solid var(--border);
  border-radius: 8px;
}

.drawer-date-input-wrap i {
  color: var(--text-muted);
  font-size: 12px;
}

.drawer-date-input {
  flex: 1;
  border: none;
  background: transparent;
  font-size: 14px;
  color: var(--text);
  outline: none;
}

.drawer-date-arrow {
  padding-bottom: 12px;
  color: var(--text-muted);
}

/* Status Selection */
.drawer-status-select {
  margin-top: 16px;
}

.drawer-status-select label {
  display: block;
  font-size: 12px;
  font-weight: 500;
  color: var(--text-muted);
  margin-bottom: 8px;
}

.drawer-status-options {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.drawer-status-option {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 8px 12px;
  background: var(--status-bg, #f3f4f6);
  color: var(--status-color, #6b7280);
  border: 2px solid transparent;
  border-radius: 8px;
  font-size: 12px;
  font-weight: 500;
  cursor: pointer;
  transition: all 0.15s;
}

.drawer-status-option:hover {
  filter: brightness(0.95);
}

.drawer-status-option.active {
  border-color: var(--status-color, #6b7280);
  box-shadow: 0 0 0 2px var(--status-bg, #f3f4f6);
}

/* Description */
.drawer-description {
  width: 100%;
  min-height: 80px;
  padding: 12px;
  background: var(--hover);
  border: 1px solid var(--border);
  border-radius: 8px;
  font-size: 14px;
  line-height: 1.5;
  color: var(--text);
  resize: vertical;
  outline: none;
  transition: border-color 0.15s;
}

.drawer-description:focus {
  border-color: var(--primary);
}

/* Team Section */
.drawer-team-owner {
  margin-bottom: 16px;
  padding-bottom: 16px;
  border-bottom: 1px solid var(--border);
}

.drawer-team-label {
  font-size: 11px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  color: var(--text-muted);
  margin-bottom: 8px;
}

.drawer-owner-input {
  display: flex;
  align-items: center;
  gap: 12px;
}

.drawer-avatar {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 14px;
  font-weight: 600;
  flex-shrink: 0;
}

.drawer-avatar.sm {
  width: 28px;
  height: 28px;
  font-size: 11px;
}

.drawer-owner-name {
  flex: 1;
  padding: 8px 12px;
  background: var(--hover);
  border: 1px solid var(--border);
  border-radius: 8px;
  font-size: 14px;
  color: var(--text);
  outline: none;
}

.drawer-owner-name:focus {
  border-color: var(--primary);
}

.drawer-contributors-list {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.drawer-contributor-item {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px;
  background: var(--hover);
  border-radius: 8px;
}

.drawer-contributor-name {
  flex: 1;
  padding: 6px 10px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 6px;
  font-size: 13px;
  color: var(--text);
  outline: none;
  min-width: 0;
}

.drawer-role-select {
  padding: 6px 10px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 6px;
  font-size: 12px;
  color: var(--text);
  outline: none;
}

.drawer-remove-btn {
  width: 24px;
  height: 24px;
  border-radius: 4px;
  border: none;
  background: transparent;
  color: var(--text-muted);
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 10px;
  transition: all 0.15s;
}

.drawer-remove-btn:hover {
  background: #fee2e2;
  color: #dc2626;
}

/* Agent Cards */
.drawer-agents-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
  gap: 12px;
}

.drawer-agent-card {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px;
  background: var(--hover);
  border-radius: 10px;
  position: relative;
}

.drawer-agent-icon {
  width: 40px;
  height: 40px;
  border-radius: 10px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 16px;
  flex-shrink: 0;
}

.drawer-agent-info {
  flex: 1;
  min-width: 0;
}

.drawer-agent-select {
  width: 100%;
  padding: 4px 8px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 6px;
  font-size: 12px;
  font-weight: 500;
  color: var(--text);
  outline: none;
  margin-bottom: 6px;
}

.drawer-agent-count {
  display: flex;
  align-items: center;
  gap: 4px;
}

.drawer-agent-count .count-btn {
  width: 24px;
  height: 24px;
  border-radius: 4px;
  border: 1px solid var(--border);
  background: var(--surface);
  color: var(--text);
  font-size: 14px;
  font-weight: 600;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all 0.15s;
}

.drawer-agent-count .count-btn:hover {
  border-color: var(--primary);
  color: var(--primary);
}

.drawer-agent-count .count-value {
  min-width: 24px;
  text-align: center;
  font-size: 14px;
  font-weight: 600;
}

.drawer-agent-remove {
  position: absolute;
  top: 8px;
  right: 8px;
  width: 20px;
  height: 20px;
  border-radius: 4px;
  border: none;
  background: transparent;
  color: var(--text-muted);
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 10px;
  opacity: 0;
  transition: all 0.15s;
}

.drawer-agent-card:hover .drawer-agent-remove {
  opacity: 1;
}

.drawer-agent-remove:hover {
  background: #fee2e2;
  color: #dc2626;
}

.drawer-empty-agents {
  grid-column: 1 / -1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 32px;
  color: var(--text-muted);
  text-align: center;
  gap: 8px;
}

.drawer-empty-agents i {
  font-size: 24px;
  opacity: 0.5;
}

/* Baseline Comparison */
.drawer-variance-badge {
  padding: 4px 10px;
  border-radius: 12px;
  font-size: 12px;
  font-weight: 600;
  background: var(--hover);
  color: var(--text-muted);
}

.drawer-variance-badge.negative {
  background: #fee2e2;
  color: #dc2626;
}

.drawer-variance-badge.positive {
  background: #d1fae5;
  color: #059669;
}

.drawer-baseline-compare {
  margin-top: 12px;
}

.drawer-baseline-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
}

.drawer-baseline-col {
  padding: 12px;
  background: var(--surface);
  border-radius: 8px;
}

.drawer-baseline-col.current {
  background: var(--primary-light, #eff6ff);
}

.drawer-baseline-label {
  font-size: 11px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  color: var(--text-muted);
  margin-bottom: 6px;
  display: block;
}

.drawer-baseline-dates {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 13px;
  color: var(--text);
}

.drawer-baseline-dates i {
  font-size: 10px;
  color: var(--text-muted);
}

/* Drawer Footer */
.drawer-modern-footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 16px 24px;
  border-top: 1px solid var(--border);
  background: var(--surface);
}

.drawer-footer-right {
  display: flex;
  gap: 8px;
}

/* ============================================
   ROADMAP STYLES
   Strategic roadmap with Now/Next/Later, Quarterly, and Release views
   ============================================ */

.roadmap-container {
  display: flex;
  flex-direction: column;
  min-height: 100%;
  overflow-x: hidden;
}

/* Controls Bar */
.roadmap-controls {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 12px 24px;
  background: rgba(255, 255, 255, 0.95);
  border-bottom: 1px solid var(--border, #e5e7eb);
  gap: 16px;
  flex-wrap: wrap;
  /* Sticky positioning below the header */
  position: sticky;
  top: 72px; /* Positioned below the sticky header (header height ~72px) */
  z-index: 99;
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  /* Prevent double scrollbar */
  overflow: visible;
  flex-shrink: 0;
}

.roadmap-controls-left,
.roadmap-controls-right {
  display: flex;
  align-items: center;
  gap: 16px;
}

/* View Switcher */
.roadmap-view-switcher {
  display: flex;
  background: var(--bg-color, #f7f9fc);
  border-radius: 8px;
  padding: 4px;
  gap: 4px;
}

.roadmap-view-btn {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 8px 14px;
  background: transparent;
  border: none;
  border-radius: 6px;
  font-size: 13px;
  font-weight: 500;
  color: var(--text-muted, #6b7280);
  cursor: pointer;
  transition: var(--transition);
  white-space: nowrap;
}

.roadmap-view-btn:hover {
  background: var(--panel-bg, #ffffff);
  color: var(--text-color, #374151);
}

.roadmap-view-btn.active {
  background: var(--panel-bg, #ffffff);
  color: var(--primary-color, #2d2b87);
  box-shadow: var(--shadow-sm);
}

.roadmap-view-btn i {
  font-size: 12px;
}

/* Group By */
.roadmap-group-by {
  display: flex;
  align-items: center;
  gap: 8px;
}

.roadmap-group-by label {
  font-size: 13px;
  color: var(--text-muted, #6b7280);
}

.roadmap-group-by .formInput.sm {
  min-width: 140px;
}

/* Canvas */
.roadmap-canvas {
  padding: 0 !important;
  overflow: visible;
}

/* ============================================
   NOW / NEXT / LATER VIEW
   ============================================ */

.roadmap-lanes {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 20px;
  padding: 24px;
  min-height: 500px;
}

.roadmap-lane {
  display: flex;
  flex-direction: column;
  background: var(--bg-color, #f7f9fc);
  border-radius: 12px;
  overflow: hidden;
}

.roadmap-lane-header {
  padding: 16px 20px;
  background: var(--panel-bg, #ffffff);
  border-bottom: 1px solid var(--border, #e5e7eb);
}

.roadmap-lane-title {
  display: flex;
  align-items: center;
  gap: 10px;
}

.roadmap-lane-title i {
  font-size: 14px;
  color: var(--primary-color, #2d2b87);
}

.roadmap-lane-title h3 {
  font-size: 16px;
  font-weight: 600;
  color: var(--text-color, #374151);
  margin: 0;
}

.roadmap-lane-count {
  background: var(--primary-color, #2d2b87);
  color: white;
  font-size: 11px;
  font-weight: 600;
  padding: 2px 8px;
  border-radius: 10px;
}

.roadmap-lane-subtitle {
  font-size: 12px;
  color: var(--text-muted, #6b7280);
  margin: 4px 0 0 0;
}

.roadmap-lane-content {
  flex: 1;
  padding: 16px;
  display: flex;
  flex-direction: column;
  gap: 12px;
  min-height: 300px;
  transition: background-color 0.2s ease;
}

.roadmap-lane-content.drag-over {
  background: rgba(99, 102, 241, 0.08);
}

.roadmap-lane-empty {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 100%;
  min-height: 150px;
  border: 2px dashed var(--border, #e5e7eb);
  border-radius: 8px;
  color: var(--text-muted, #6b7280);
  font-size: 13px;
}

.roadmap-add-to-lane {
  margin: 12px 16px 16px;
}

/* Grouping within lanes */
.roadmap-group {
  margin-bottom: 16px;
}

.roadmap-group-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 8px 0;
  margin-bottom: 8px;
}

.roadmap-group-name {
  font-size: 12px;
  font-weight: 600;
  color: var(--text-muted, #6b7280);
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

.roadmap-group-count {
  font-size: 11px;
  color: var(--text-muted, #6b7280);
  background: var(--panel-bg, #ffffff);
  padding: 2px 6px;
  border-radius: 4px;
}

.roadmap-group-items {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

/* Item Cards */
.roadmap-item-card {
  background: var(--panel-bg, #ffffff);
  border-radius: 8px;
  padding: 14px;
  box-shadow: var(--shadow-sm);
  cursor: pointer;
  transition: var(--transition);
  border: 2px solid transparent;
}

.roadmap-item-card:hover {
  box-shadow: var(--shadow-md);
  transform: translateY(-1px);
}

.roadmap-item-card.selected {
  border-color: var(--primary-color, #2d2b87);
}

.roadmap-item-card.dragging {
  opacity: 0.5;
  transform: rotate(2deg);
}

.roadmap-item-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 8px;
}

.roadmap-item-type {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-size: 10px;
  font-weight: 600;
  padding: 3px 8px;
  border-radius: 4px;
  text-transform: uppercase;
  letter-spacing: 0.3px;
}

.roadmap-item-type i {
  font-size: 9px;
}

.roadmap-moved-badge {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-size: 10px;
  font-weight: 500;
  padding: 3px 8px;
  border-radius: 4px;
  background: #fef3c7;
  color: #d97706;
}

.roadmap-item-name {
  font-size: 14px;
  font-weight: 600;
  color: var(--text-color, #374151);
  margin: 0 0 10px 0;
  line-height: 1.4;
}

.roadmap-item-meta {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  margin-bottom: 8px;
}

.roadmap-item-dates {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 12px;
  color: var(--text-muted, #6b7280);
}

.roadmap-item-dates i {
  font-size: 10px;
}

.roadmap-baseline-changed {
  color: #f59e0b;
  margin-left: 4px;
}

.roadmap-item-status {
  font-size: 10px;
  font-weight: 500;
  padding: 3px 8px;
  border-radius: 4px;
}

.roadmap-item-owner,
.roadmap-item-deps {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 11px;
  color: var(--text-muted, #6b7280);
}

.roadmap-item-owner i,
.roadmap-item-deps i {
  font-size: 10px;
}

/* ============================================
   QUARTERLY VIEW
   ============================================ */

.roadmap-quarterly {
  display: flex;
  flex-direction: column;
  overflow-x: auto;
}

.roadmap-quarterly-header {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  background: var(--panel-bg, #ffffff);
  border-bottom: 2px solid var(--border, #e5e7eb);
  position: sticky;
  top: 0;
  z-index: 10;
}

.roadmap-quarter-col {
  padding: 16px 20px;
  text-align: center;
  border-right: 1px solid var(--border, #e5e7eb);
}

.roadmap-quarter-col:last-child {
  border-right: none;
}

.roadmap-quarter-col h3 {
  font-size: 18px;
  font-weight: 700;
  color: var(--text-color, #374151);
  margin: 0;
}

.roadmap-quarter-year {
  font-size: 12px;
  color: var(--text-muted, #6b7280);
}

.roadmap-quarterly-body {
  flex: 1;
}

.roadmap-quarterly-row {
  display: flex;
  border-bottom: 1px solid var(--border, #e5e7eb);
}

.roadmap-quarterly-row:last-child {
  border-bottom: none;
}

.roadmap-quarterly-row-label {
  width: 180px;
  min-width: 180px;
  padding: 16px;
  background: var(--bg-color, #f7f9fc);
  border-right: 1px solid var(--border, #e5e7eb);
  display: flex;
  align-items: flex-start;
}

.roadmap-quarterly-row-label span {
  font-size: 13px;
  font-weight: 600;
  color: var(--text-color, #374151);
}

.roadmap-quarterly-row-content {
  flex: 1;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
}

.roadmap-quarter-cell {
  padding: 12px;
  border-right: 1px solid var(--border, #e5e7eb);
  display: flex;
  flex-direction: column;
  gap: 8px;
  min-height: 80px;
}

.roadmap-quarter-cell:last-child {
  border-right: none;
}

.roadmap-quarterly-item {
  background: var(--panel-bg, #ffffff);
  border-radius: 6px;
  padding: 10px 12px;
  cursor: pointer;
  transition: var(--transition);
  box-shadow: var(--shadow-sm);
}

.roadmap-quarterly-item:hover {
  box-shadow: var(--shadow-md);
}

.roadmap-quarterly-item.selected {
  box-shadow: 0 0 0 2px var(--primary-color, #2d2b87);
}

.roadmap-quarterly-item-content {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
}

.roadmap-quarterly-item-name {
  font-size: 12px;
  font-weight: 500;
  color: var(--text-color, #374151);
  flex: 1;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.roadmap-quarterly-item-status i {
  font-size: 8px;
}

.roadmap-baseline-indicator {
  margin-top: 6px;
  position: relative;
}

.roadmap-baseline-bar {
  display: block;
  height: 3px;
  background: rgba(245, 158, 11, 0.4);
  border-radius: 2px;
}

/* ============================================
   RELEASES VIEW
   ============================================ */

.roadmap-releases {
  display: flex;
  flex-direction: column;
  gap: 24px;
  padding: 24px;
}

.roadmap-releases-empty {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 60px 20px;
  color: var(--text-muted, #6b7280);
}

.roadmap-releases-empty i {
  font-size: 48px;
  margin-bottom: 16px;
  opacity: 0.5;
}

.roadmap-releases-empty p {
  margin: 0 0 16px 0;
  font-size: 14px;
}

.roadmap-release {
  background: var(--panel-bg, #ffffff);
  border-radius: 12px;
  box-shadow: var(--shadow-sm);
  overflow: hidden;
}

.roadmap-release-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 16px 20px;
  background: var(--bg-color, #f7f9fc);
  border-bottom: 1px solid var(--border, #e5e7eb);
}

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

.roadmap-release-info h3 {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 16px;
  font-weight: 600;
  color: var(--text-color, #374151);
  margin: 0;
}

.roadmap-release-info h3 i {
  font-size: 14px;
  color: var(--primary-color, #2d2b87);
}

.roadmap-release-date {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 12px;
  color: var(--text-muted, #6b7280);
}

.roadmap-release-date i {
  font-size: 10px;
}

.roadmap-release-progress {
  display: flex;
  align-items: center;
  gap: 12px;
}

.roadmap-progress-bar {
  width: 120px;
  height: 6px;
  background: var(--border, #e5e7eb);
  border-radius: 3px;
  overflow: hidden;
}

.roadmap-progress-fill {
  height: 100%;
  background: var(--success, #10b981);
  border-radius: 3px;
  transition: width 0.3s ease;
}

.roadmap-progress-text {
  font-size: 12px;
  font-weight: 500;
  color: var(--text-muted, #6b7280);
}

.roadmap-release-items {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap: 16px;
  padding: 20px;
}

/* ============================================
   DETAIL PANEL
   ============================================ */

.roadmap-detail-panel {
  position: fixed;
  top: 60px; /* Below the main header */
  right: 0;
  width: 420px;
  height: calc(100vh - 60px);
  background: var(--panel-bg, #ffffff);
  box-shadow: -4px 0 20px rgba(0, 0, 0, 0.15);
  z-index: 500; /* Above sticky headers (100) but below modals */
  display: flex;
  flex-direction: column;
  overflow: hidden;
}

.roadmap-detail-header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  padding: 20px;
  border-bottom: 1px solid var(--border, #e5e7eb);
}

.roadmap-detail-title {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.roadmap-detail-title h2 {
  font-size: 18px;
  font-weight: 600;
  color: var(--text-color, #374151);
  margin: 0;
}

.roadmap-detail-content {
  flex: 1;
  overflow-y: auto;
  padding: 20px;
  display: flex;
  flex-direction: column;
  gap: 20px;
}

.roadmap-detail-section {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.roadmap-detail-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
}

.roadmap-detail-field {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.roadmap-detail-desc {
  resize: vertical;
  min-height: 80px;
}

.roadmap-date-range {
  display: flex;
  align-items: center;
  gap: 8px;
}

.roadmap-date-range span {
  color: var(--text-muted, #6b7280);
  font-size: 12px;
}

.roadmap-date-range input {
  flex: 1;
}

.roadmap-detail-baseline {
  background: #fffbeb;
  border: 1px solid #fde68a;
  border-radius: 8px;
  padding: 14px;
}

.roadmap-baseline-info {
  display: flex;
  align-items: flex-start;
  gap: 12px;
}

.roadmap-baseline-info i {
  color: #f59e0b;
  font-size: 16px;
  margin-top: 2px;
}

.roadmap-baseline-info strong {
  display: block;
  font-size: 13px;
  color: #92400e;
  margin-bottom: 4px;
}

.roadmap-baseline-info p {
  font-size: 12px;
  color: #a16207;
  margin: 2px 0 0 0;
}

.roadmap-change-reason {
  margin-top: 12px;
  padding-top: 12px;
  border-top: 1px solid #fde68a;
}

.roadmap-change-reason p {
  font-size: 13px;
  color: var(--text-color, #374151);
  margin: 0;
}

.roadmap-linked-items,
.roadmap-dependencies {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.roadmap-linked-item,
.roadmap-dependency-item {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px 12px;
  background: var(--bg-color, #f7f9fc);
  border-radius: 6px;
  font-size: 13px;
}

.roadmap-linked-item i,
.roadmap-dependency-item i {
  color: var(--text-muted, #6b7280);
  font-size: 12px;
}

.roadmap-linked-item span,
.roadmap-dependency-item span {
  flex: 1;
  color: var(--text-color, #374151);
}

.roadmap-linked-item a {
  color: var(--primary-color, #2d2b87);
}

.roadmap-no-links,
.roadmap-no-deps {
  font-size: 13px;
  color: var(--text-muted, #6b7280);
  font-style: italic;
  margin: 0;
}

.roadmap-change-history {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.roadmap-history-item {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 8px 12px;
  background: var(--bg-color, #f7f9fc);
  border-radius: 6px;
  font-size: 12px;
}

.roadmap-history-date {
  color: var(--text-muted, #6b7280);
  min-width: 80px;
}

.roadmap-history-desc {
  flex: 1;
  color: var(--text-color, #374151);
}

.roadmap-history-cr {
  color: var(--primary-color, #2d2b87);
  font-weight: 500;
}

.roadmap-detail-footer {
  display: flex;
  justify-content: space-between;
  padding: 16px 20px;
  border-top: 1px solid var(--border, #e5e7eb);
  background: var(--bg-color, #f7f9fc);
}

/* ============================================
   ITEM MODAL
   ============================================ */

.roadmap-item-modal {
  width: 560px;
  max-width: 90vw;
}

.roadmap-item-modal .form-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
}

/* ============================================
   LANE TABS (Now/Next/Later Tab View)
   ============================================ */

.roadmap-lane-tabs {
  display: flex;
  gap: 0;
  background: var(--bg-color, #f7f9fc);
  border-bottom: 2px solid var(--border, #e5e7eb);
  padding: 0 24px;
}

.roadmap-lane-tab {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 16px 24px;
  background: transparent;
  border: none;
  border-bottom: 3px solid transparent;
  margin-bottom: -2px;
  font-size: 14px;
  font-weight: 500;
  color: var(--text-muted, #6b7280);
  cursor: pointer;
  transition: var(--transition);
}

.roadmap-lane-tab:hover {
  color: var(--text-color, #374151);
  background: rgba(0, 0, 0, 0.02);
}

.roadmap-lane-tab.active {
  color: var(--primary-color, #2d2b87);
  border-bottom-color: var(--primary-color, #2d2b87);
  background: var(--panel-bg, #ffffff);
}

.roadmap-lane-tab i {
  font-size: 14px;
}

.roadmap-lane-tab-label {
  font-weight: 600;
}

.roadmap-lane-tab-count {
  background: var(--bg-color, #f7f9fc);
  color: var(--text-muted, #6b7280);
  font-size: 11px;
  font-weight: 600;
  padding: 2px 8px;
  border-radius: 10px;
}

.roadmap-lane-tab.active .roadmap-lane-tab-count {
  background: var(--primary-color, #2d2b87);
  color: white;
}

/* Lane Panel */
.roadmap-lane-panel {
  padding: 24px;
}

.roadmap-lane-panel-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 20px;
}

.roadmap-lane-panel-info h3 {
  font-size: 18px;
  font-weight: 600;
  color: var(--text-color, #374151);
  margin: 0 0 4px 0;
}

.roadmap-lane-panel-info p {
  font-size: 13px;
  color: var(--text-muted, #6b7280);
  margin: 0;
}

/* Lane Empty State */
.roadmap-lane-empty-state {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 60px 20px;
  background: var(--bg-color, #f7f9fc);
  border-radius: 12px;
  border: 2px dashed var(--border, #e5e7eb);
}

.roadmap-lane-empty-state i {
  font-size: 48px;
  color: var(--text-muted, #6b7280);
  opacity: 0.3;
  margin-bottom: 16px;
}

.roadmap-lane-empty-state p {
  font-size: 14px;
  color: var(--text-muted, #6b7280);
  margin: 0 0 16px 0;
}

/* ============================================
   INLINE ADD/EDIT FORM
   ============================================ */

.roadmap-inline-form {
  background: var(--panel-bg, #ffffff);
  border: 2px solid var(--primary-color, #2d2b87);
  border-radius: 12px;
  margin-bottom: 16px;
  overflow: hidden;
}

.roadmap-inline-form-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 12px 16px;
  background: var(--primary-color, #2d2b87);
  color: white;
}

.roadmap-inline-form-header h4 {
  font-size: 14px;
  font-weight: 600;
  margin: 0;
}

.roadmap-inline-form-header .btn {
  color: white;
  opacity: 0.8;
}

.roadmap-inline-form-header .btn:hover {
  opacity: 1;
}

.roadmap-inline-form-body {
  padding: 16px;
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.roadmap-inline-form-row {
  display: flex;
  gap: 12px;
}

.roadmap-inline-form-field {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.roadmap-inline-form-field.flex-2 {
  flex: 2;
}

.roadmap-inline-form-field .formLabel {
  font-size: 11px;
  font-weight: 600;
  color: var(--text-muted, #6b7280);
  text-transform: uppercase;
  letter-spacing: 0.3px;
}

.roadmap-inline-form-field .formInput {
  font-size: 13px;
}

.roadmap-inline-form-footer {
  display: flex;
  justify-content: flex-end;
  gap: 8px;
  padding: 12px 16px;
  background: var(--bg-color, #f7f9fc);
  border-top: 1px solid var(--border, #e5e7eb);
}

/* ============================================
   ITEM ROWS (List View)
   ============================================ */

.roadmap-items-list {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.roadmap-items-group {
  margin-bottom: 16px;
}

.roadmap-items-group:last-child {
  margin-bottom: 0;
}

.roadmap-items-group-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 8px 0;
  margin-bottom: 8px;
  border-bottom: 1px solid var(--border, #e5e7eb);
}

.roadmap-items-group-name {
  font-size: 12px;
  font-weight: 600;
  color: var(--text-muted, #6b7280);
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

.roadmap-items-group-count {
  font-size: 11px;
  color: var(--text-muted, #6b7280);
  background: var(--bg-color, #f7f9fc);
  padding: 2px 8px;
  border-radius: 4px;
}

.roadmap-items-group-list {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.roadmap-item-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 12px 16px;
  background: var(--panel-bg, #ffffff);
  border: 1px solid var(--border, #e5e7eb);
  border-radius: 8px;
  cursor: pointer;
  transition: var(--transition);
}

.roadmap-item-row:hover {
  border-color: var(--primary-color, #2d2b87);
  box-shadow: var(--shadow-sm);
}

.roadmap-item-row.selected {
  border-color: var(--primary-color, #2d2b87);
  background: rgba(45, 43, 135, 0.03);
}

.roadmap-item-row-main {
  display: flex;
  align-items: center;
  gap: 12px;
  flex: 1;
  min-width: 0;
}

.roadmap-item-type-badge {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  border-radius: 8px;
  flex-shrink: 0;
}

.roadmap-item-type-badge i {
  font-size: 14px;
}

.roadmap-item-row-content {
  flex: 1;
  min-width: 0;
}

.roadmap-item-row-name {
  font-size: 14px;
  font-weight: 600;
  color: var(--text-color, #374151);
  margin: 0 0 4px 0;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.roadmap-item-row-meta {
  display: flex;
  align-items: center;
  gap: 12px;
  flex-wrap: wrap;
}

.roadmap-item-row-quarter,
.roadmap-item-row-owner {
  display: flex;
  align-items: center;
  gap: 4px;
  font-size: 12px;
  color: var(--text-muted, #6b7280);
}

.roadmap-item-row-quarter i,
.roadmap-item-row-owner i {
  font-size: 10px;
}

.roadmap-item-status-badge {
  font-size: 11px;
  font-weight: 500;
  padding: 4px 10px;
  border-radius: 4px;
  flex-shrink: 0;
}

.roadmap-item-row-actions {
  display: flex;
  align-items: center;
  gap: 4px;
  margin-left: 12px;
  opacity: 0;
  transition: opacity 0.2s ease;
}

.roadmap-item-row:hover .roadmap-item-row-actions {
  opacity: 1;
}

.roadmap-move-select {
  font-size: 11px;
  padding: 4px 8px;
  border: 1px solid var(--border, #e5e7eb);
  border-radius: 4px;
  background: var(--panel-bg, #ffffff);
  color: var(--text-muted, #6b7280);
  cursor: pointer;
}

.roadmap-move-select:hover {
  border-color: var(--primary-color, #2d2b87);
}

/* ============================================
   RELEASES VIEW ENHANCEMENTS
   ============================================ */

.roadmap-releases-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 16px 24px;
  border-bottom: 1px solid var(--border, #e5e7eb);
}

.roadmap-releases-header h3 {
  font-size: 16px;
  font-weight: 600;
  color: var(--text-color, #374151);
  margin: 0;
}

.roadmap-release-actions {
  display: flex;
  align-items: center;
  gap: 12px;
}

.roadmap-release-items {
  padding: 16px;
}

.roadmap-release-empty-items {
  padding: 24px;
  text-align: center;
  color: var(--text-muted, #6b7280);
  font-size: 13px;
}

.roadmap-release-add-item {
  padding: 12px 16px;
  border-top: 1px solid var(--border, #e5e7eb);
}

/* Quarterly View Empty */
.roadmap-quarterly-empty {
  padding: 60px 20px;
  text-align: center;
  color: var(--text-muted, #6b7280);
}

.roadmap-quarterly-add {
  padding: 16px 24px;
  border-top: 1px solid var(--border, #e5e7eb);
}

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

@media (max-width: 1200px) {
  .roadmap-lanes {
    grid-template-columns: 1fr;
    gap: 24px;
  }

  .roadmap-lane {
    max-height: none;
  }

  .roadmap-lane-content {
    min-height: 200px;
  }
}

@media (max-width: 992px) {
  .roadmap-controls {
    flex-direction: column;
    align-items: stretch;
  }

  .roadmap-view-switcher {
    flex-wrap: wrap;
  }

  .roadmap-quarterly-row-label {
    width: 120px;
    min-width: 120px;
  }

  .roadmap-detail-panel {
    width: 100%;
  }
}

@media (max-width: 768px) {
  .roadmap-view-btn {
    padding: 6px 10px;
    font-size: 12px;
  }

  .roadmap-view-btn span {
    display: none;
  }

  .roadmap-quarterly-header {
    grid-template-columns: repeat(2, 1fr);
  }

  .roadmap-quarterly-row-content {
    grid-template-columns: repeat(2, 1fr);
  }

  .roadmap-release-items {
    grid-template-columns: 1fr;
  }

  .roadmap-detail-row {
    grid-template-columns: 1fr;
  }

  .roadmap-item-modal .form-row {
    grid-template-columns: 1fr;
  }
}

/* ============================================
   TREE-SELECT DROPDOWN FOR FEATURES
   ============================================ */

.roadmap-tree-select-container {
  margin-bottom: 16px;
}

.roadmap-tree-select {
  border: 1px solid var(--border, #e5e7eb);
  border-radius: 8px;
  background: var(--panel-bg, #ffffff);
  max-height: 320px;
  overflow: hidden;
  display: flex;
  flex-direction: column;
}

.roadmap-tree-select-search {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 10px 12px;
  border-bottom: 1px solid var(--border, #e5e7eb);
  background: var(--panel-bg, #f9fafb);
}

.roadmap-tree-select-search i {
  color: var(--text-muted, #9ca3af);
  font-size: 13px;
}

.roadmap-tree-select-search input {
  flex: 1;
  border: none;
  background: transparent;
  font-size: 13px;
  color: var(--text-color, #374151);
  outline: none;
}

.roadmap-tree-select-search input::placeholder {
  color: var(--text-muted, #9ca3af);
}

.roadmap-tree-select-content {
  flex: 1;
  overflow-y: auto;
  padding: 8px;
}

.roadmap-tree-items {
  display: flex;
  flex-direction: column;
}

.roadmap-tree-item {
  display: flex;
  flex-direction: column;
}

.roadmap-tree-item-row {
  display: flex;
  align-items: center;
  padding: 6px 8px;
  border-radius: 4px;
  cursor: pointer;
  transition: background-color 0.15s ease;
}

.roadmap-tree-item-row:hover {
  background: var(--hover-bg, #f3f4f6);
}

.roadmap-tree-item.level-0 > .roadmap-tree-item-row {
  font-weight: 500;
}

.roadmap-tree-item.level-1 > .roadmap-tree-item-row {
  padding-left: 28px;
}

.roadmap-tree-item.level-2 > .roadmap-tree-item-row {
  padding-left: 48px;
}

.roadmap-tree-item.level-3 > .roadmap-tree-item-row {
  padding-left: 68px;
}

.roadmap-tree-children {
  display: flex;
  flex-direction: column;
}

.tree-expand-btn {
  width: 20px;
  height: 20px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--text-muted, #9ca3af);
  cursor: pointer;
  border-radius: 4px;
  transition: all 0.15s ease;
  flex-shrink: 0;
}

.tree-expand-btn.has-children:hover {
  background: var(--hover-bg, #e5e7eb);
  color: var(--text-color, #374151);
}

.tree-expand-btn i {
  font-size: 10px;
}

.tree-spacer {
  width: 20px;
  height: 20px;
  flex-shrink: 0;
}

.tree-checkbox-label {
  display: flex;
  align-items: center;
  gap: 8px;
  cursor: pointer;
  flex: 1;
}

.tree-select-checkbox {
  width: 16px;
  height: 16px;
  cursor: pointer;
  accent-color: var(--primary-color, #2d2b87);
}

.tree-item-icon {
  width: 24px;
  height: 24px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 4px;
  font-size: 11px;
  flex-shrink: 0;
}

.tree-item-name {
  font-size: 13px;
  color: var(--text-color, #374151);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.roadmap-tree-select-footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 8px 12px;
  background: var(--panel-bg, #f9fafb);
  border-top: 1px solid var(--border, #e5e7eb);
  font-size: 12px;
}

#selectedFeaturesCount {
  color: var(--primary-color, #2d2b87);
  font-weight: 500;
}

.roadmap-tree-empty {
  padding: 40px 20px;
  text-align: center;
  color: var(--text-muted, #6b7280);
}

.roadmap-tree-empty i {
  font-size: 32px;
  margin-bottom: 12px;
  opacity: 0.5;
}

.roadmap-tree-empty p {
  margin: 4px 0;
  font-size: 13px;
}

.roadmap-tree-empty .text-muted {
  font-size: 12px;
  opacity: 0.7;
}

/* ============================================
   TREE-GRID TABLE FOR ROADMAP ITEMS
   ============================================ */

.roadmap-items-treegrid {
  min-height: 200px;
}

.roadmap-treegrid-wrapper {
  overflow-x: auto;
}

.roadmap-treegrid-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 13px;
}

.roadmap-treegrid-table thead {
  background: var(--panel-bg, #f9fafb);
  border-bottom: 1px solid var(--border, #e5e7eb);
  position: sticky;
  top: 0;
  z-index: 1;
}

.roadmap-treegrid-table th {
  padding: 10px 12px;
  text-align: left;
  font-weight: 500;
  color: var(--text-muted, #6b7280);
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  white-space: nowrap;
}

.roadmap-treegrid-table td {
  padding: 10px 12px;
  border-bottom: 1px solid var(--border, #e5e7eb);
  vertical-align: middle;
}

.roadmap-treegrid-table .col-checkbox {
  width: 40px;
}

.roadmap-treegrid-table .col-name {
  min-width: 250px;
}

.roadmap-treegrid-table .col-status,
.roadmap-treegrid-table .col-priority {
  width: 110px;
}

.roadmap-treegrid-table .col-quarter,
.roadmap-treegrid-table .col-owner {
  width: 120px;
}

.roadmap-treegrid-table .col-actions {
  width: 140px;
}

.roadmap-treegrid-row {
  transition: background-color 0.15s ease;
}

.roadmap-treegrid-row:hover {
  background: var(--hover-bg, #f9fafb);
}

.roadmap-treegrid-row.selected {
  background: var(--primary-light, #eef2ff);
}

.roadmap-treegrid-row.group-row {
  background: var(--panel-bg, #f9fafb);
  font-weight: 500;
}

.roadmap-treegrid-row.group-row:hover {
  background: var(--hover-bg, #f3f4f6);
}

.roadmap-treegrid-row .cell-content {
  display: flex;
  align-items: center;
  gap: 8px;
}

.roadmap-treegrid-row .item-name {
  font-weight: 500;
  color: var(--text-color, #374151);
}

/* Expanded item row with description */
.roadmap-treegrid-row.item-row-expanded {
  vertical-align: top;
}

.roadmap-treegrid-row.item-row-expanded td {
  padding: 12px 8px;
}

.roadmap-treegrid-row .item-main-info {
  display: flex;
  align-items: flex-start;
  gap: 10px;
}

.roadmap-treegrid-row .item-details {
  display: flex;
  flex-direction: column;
  gap: 4px;
  flex: 1;
}

.roadmap-treegrid-row .item-description {
  font-size: 12px;
  color: var(--text-muted, #6b7280);
  line-height: 1.4;
  max-width: 400px;
}

.roadmap-treegrid-row .group-name {
  display: flex;
  align-items: center;
  gap: 8px;
  font-weight: 500;
  color: var(--text-color, #374151);
}

.roadmap-treegrid-row .group-name i {
  color: var(--text-muted, #9ca3af);
}

.roadmap-treegrid-row .group-count {
  background: var(--border, #e5e7eb);
  color: var(--text-muted, #6b7280);
  font-size: 11px;
  padding: 2px 8px;
  border-radius: 10px;
  font-weight: 500;
}

.roadmap-treegrid-table .status-badge,
.roadmap-treegrid-table .priority-badge {
  display: inline-block;
  padding: 4px 10px;
  border-radius: 12px;
  font-size: 11px;
  font-weight: 500;
  white-space: nowrap;
}

.roadmap-treegrid-table .owner-badge {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  color: var(--text-muted, #6b7280);
  font-size: 12px;
}

.roadmap-treegrid-table .owner-badge i {
  font-size: 10px;
}

.roadmap-treegrid-table .action-buttons {
  display: flex;
  align-items: center;
  gap: 4px;
}

.roadmap-treegrid-table .btn.danger:hover {
  color: var(--danger, #ef4444);
}

/* ============================================
   BULK ACTIONS
   ============================================ */

.roadmap-lane-panel-actions {
  display: flex;
  align-items: center;
  gap: 12px;
}

.roadmap-bulk-actions {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 6px 12px;
  background: var(--primary-light, #eef2ff);
  border-radius: 6px;
  border: 1px solid var(--primary-color, #2d2b87);
}

.roadmap-bulk-actions .bulk-count {
  font-size: 12px;
  font-weight: 500;
  color: var(--primary-color, #2d2b87);
  padding-right: 8px;
  border-right: 1px solid var(--primary-color, #2d2b87);
}

.roadmap-bulk-actions .btn {
  font-size: 11px;
  padding: 4px 8px;
}

/* ============================================
   RESPONSIVE TREE-SELECT
   ============================================ */

@media (max-width: 768px) {
  .roadmap-tree-select {
    max-height: 250px;
  }

  .roadmap-tree-item.level-1 > .roadmap-tree-item-row {
    padding-left: 20px;
  }

  .roadmap-tree-item.level-2 > .roadmap-tree-item-row {
    padding-left: 36px;
  }

  .roadmap-tree-item.level-3 > .roadmap-tree-item-row {
    padding-left: 52px;
  }

  .roadmap-treegrid-table {
    font-size: 12px;
  }

  .roadmap-treegrid-table th,
  .roadmap-treegrid-table td {
    padding: 8px;
  }

  .roadmap-bulk-actions {
    flex-wrap: wrap;
    gap: 4px;
  }
}

/* ============================================
   ROADMAP HEADER ENHANCEMENTS
   ============================================ */

/* Roadmap header uses sticky positioning from base .brd-header class */
.roadmap-header-fixed {
  /* Inherits position: sticky from .brd-header */
  /* No fixed positioning - scrolls naturally with content */
}

.roadmap-container .brd-content-wrapper {
  /* No extra padding needed - header is sticky, not fixed */
}

/* Last updated timestamp */
.brd-last-updated {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 12px;
  color: var(--text-muted, #6b7280);
}

.brd-last-updated i {
  font-size: 11px;
}

/* Version dropdown with add button */
.brd-version-dropdown {
  display: flex;
  align-items: center;
  gap: 4px;
}

.version-add-btn {
  width: 28px;
  height: 28px;
  padding: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 4px;
}

.version-add-btn:hover {
  background: var(--primary-light, #eef2ff);
  color: var(--primary-color, #2d2b87);
}

/* Github sync checkbox */
.roadmap-github-sync {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 6px 12px;
  border-radius: 6px;
  border: 1px solid var(--border, #e5e7eb);
  cursor: pointer;
  font-size: 13px;
  color: var(--text-color, #374151);
  transition: all 0.2s ease;
}

.roadmap-github-sync:hover {
  background: var(--hover-bg, #f3f4f6);
}

.roadmap-github-sync:has(input:checked) {
  background: var(--primary-light, #eef2ff);
  border-color: var(--primary-color, #2d2b87);
  color: var(--primary-color, #2d2b87);
}

.roadmap-github-sync input {
  display: none;
}

.roadmap-github-sync i {
  font-size: 16px;
}

.roadmap-github-sync span {
  font-weight: 500;
}

/* Saving indicator */
.roadmap-saving-indicator {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 12px;
  color: var(--text-muted, #6b7280);
  padding: 6px 12px;
  background: var(--hover-bg, #f3f4f6);
  border-radius: 4px;
}

.roadmap-saving-indicator i {
  color: var(--primary-color, #2d2b87);
}

/* ============================================
   VERSION MODAL
   ============================================ */

.version-current-info {
  margin-bottom: 16px;
  font-size: 14px;
  color: var(--text-muted, #6b7280);
}

.version-current-info strong {
  color: var(--text-color, #374151);
}

.version-options {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.version-option {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  padding: 16px;
  border: 1px solid var(--border, #e5e7eb);
  border-radius: 8px;
  cursor: pointer;
  transition: all 0.2s ease;
}

.version-option:hover {
  border-color: var(--primary-color, #2d2b87);
  background: var(--hover-bg, #f9fafb);
}

.version-option:has(input:checked) {
  border-color: var(--primary-color, #2d2b87);
  background: var(--primary-light, #eef2ff);
}

.version-option input[type="radio"] {
  margin-top: 4px;
  accent-color: var(--primary-color, #2d2b87);
}

.version-option-content {
  flex: 1;
}

.version-option-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 4px;
}

.version-option-label {
  font-weight: 600;
  font-size: 14px;
  color: var(--text-color, #374151);
}

.version-input {
  width: 80px;
  text-align: center;
  font-weight: 600;
  font-family: monospace;
}

.version-option-desc {
  font-size: 12px;
  color: var(--text-muted, #6b7280);
  margin: 0;
}

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

@media (max-width: 768px) {
  .roadmap-container .brd-header {
    padding: 12px 16px;
  }

  .roadmap-github-sync span {
    display: none;
  }

  .roadmap-github-sync {
    padding: 6px 8px;
  }
}

/* ========================================
   Change Management Styles
   ======================================== */

.cm-container {
  display: flex;
  flex-direction: column;
  height: 100%;
  background: var(--bg);
  position: relative;
}

.cm-loading {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  height: 300px;
  gap: 16px;
}

.cm-loading .spinner {
  width: 32px;
  height: 32px;
  border: 3px solid var(--border);
  border-top-color: var(--primary);
  border-radius: 50%;
  animation: spin 0.8s linear infinite;
}

.cm-loading p {
  color: var(--text-muted);
  font-size: 14px;
}

/* Header - Sticky position like BRD */
.cm-header {
  position: sticky;
  top: 0;
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 20px 32px;
  background: var(--surface);
  border-bottom: 1px solid rgba(0, 0, 0, 0.06);
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.04);
  z-index: 5;
}

.cm-header-left {
  display: flex;
  align-items: center;
  gap: 20px;
}

.cm-title {
  font-size: 22px;
  font-weight: 700;
  color: var(--text);
  display: flex;
  align-items: center;
  gap: 10px;
  margin: 0;
  letter-spacing: -0.01em;
}

.cm-title i {
  color: var(--primary);
  font-size: 20px;
  opacity: 0.9;
}

.cm-timestamp {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 13px;
  color: var(--text-muted);
}

.cm-timestamp i {
  font-size: 12px;
}

.cm-count-badge {
  font-size: 13px;
  color: var(--text-muted);
  padding: 4px 10px;
  background: var(--bg);
  border-radius: 12px;
}

/* Search Box */
.cm-search-box {
  display: flex;
  align-items: center;
  position: relative;
  flex: 1;
  max-width: 400px;
}

.cm-search-icon {
  position: absolute;
  left: 12px;
  color: var(--text-muted);
  font-size: 14px;
  pointer-events: none;
}

.cm-search-input {
  width: 100%;
  padding: 10px 36px 10px 36px;
  font-size: 14px;
  border: 1px solid var(--border);
  border-radius: 8px;
  background: var(--bg);
  color: var(--text);
  transition: border-color 0.2s, box-shadow 0.2s;
}

.cm-search-input:focus {
  outline: none;
  border-color: var(--primary);
  box-shadow: 0 0 0 3px var(--primary-alpha);
}

.cm-search-input::placeholder {
  color: var(--text-muted);
}

.cm-search-clear {
  position: absolute;
  right: 8px;
  width: 24px;
  height: 24px;
  border: none;
  background: var(--bg-hover);
  color: var(--text-muted);
  border-radius: 4px;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 12px;
  transition: background 0.2s, color 0.2s;
}

.cm-search-clear:hover {
  background: var(--border);
  color: var(--text);
}

.cm-meta {
  display: flex;
  align-items: center;
  gap: 10px;
}

.cm-count {
  font-size: 13px;
  color: var(--text-muted);
  padding: 4px 10px;
  background: var(--bg);
  border-radius: 12px;
}

.cm-pending-badge {
  font-size: 12px;
  color: #f59e0b;
  background: rgba(245, 158, 11, 0.1);
  padding: 4px 10px;
  border-radius: 12px;
  font-weight: 500;
}

.cm-header-right {
  display: flex;
  align-items: center;
  gap: 8px;
}

/* Filters Bar - Sticky below header */
.cm-filters {
  position: sticky;
  top: 73px;
  z-index: 4;
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 12px 32px;
  background: var(--surface);
  border-bottom: 1px solid var(--border);
  flex-shrink: 0;
}

.cm-filter-divider {
  width: 1px;
  height: 24px;
  background: var(--border);
}

.cm-filter-group {
  display: flex;
  align-items: center;
  gap: 6px;
}

.cm-filter-group label {
  font-size: 12px;
  color: var(--text-muted);
  font-weight: 500;
}

.cm-filter-select {
  padding: 6px 28px 6px 10px;
  font-size: 13px;
  border: 1px solid var(--border);
  border-radius: 6px;
  background: var(--surface) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='10' viewBox='0 0 10 10'%3E%3Cpath fill='%236b7280' d='M2 3.5L5 6.5L8 3.5'/%3E%3C/svg%3E") no-repeat right 8px center;
  appearance: none;
  cursor: pointer;
}

.cm-filter-select:focus {
  outline: none;
  border-color: var(--primary);
}

/* Content Area */
.cm-content {
  flex: 1;
  overflow: auto;
  padding: 0;
}

/* Empty State */
.cm-empty-state {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 60px 24px;
  text-align: center;
}

.cm-empty-icon {
  width: 80px;
  height: 80px;
  border-radius: 50%;
  background: var(--primary-alpha);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 32px;
  color: var(--primary);
  margin-bottom: 20px;
}

.cm-empty-state h2 {
  font-size: 18px;
  font-weight: 600;
  margin: 0 0 8px 0;
}

.cm-empty-state p {
  color: var(--text-muted);
  margin: 0 0 20px 0;
}

/* CR List Table */
.cm-list {
  background: var(--surface);
  border-radius: 12px;
  border: 1px solid var(--border);
  overflow: hidden;
}

.cm-table {
  width: 100%;
  border-collapse: collapse;
}

.cm-table th {
  padding: 12px 16px;
  text-align: left;
  font-size: 12px;
  font-weight: 600;
  color: var(--text-muted);
  text-transform: uppercase;
  letter-spacing: 0.5px;
  background: var(--bg);
  border-bottom: 1px solid var(--border);
}

.cm-table td {
  padding: 14px 16px;
  font-size: 14px;
  border-bottom: 1px solid var(--border-subtle);
  vertical-align: middle;
}

.cm-row {
  cursor: pointer;
  transition: background 0.15s ease;
}

.cm-row:hover {
  background: var(--hover);
}

.cm-row.selected {
  background: var(--primary-alpha);
}

.cm-row.active {
  background: var(--primary-alpha);
  box-shadow: inset 3px 0 0 var(--primary);
}

.cm-row:last-child td {
  border-bottom: none;
}

.cm-cell-id {
  width: 90px;
}

.cm-cr-id {
  font-family: var(--font-mono);
  font-size: 12px;
  font-weight: 600;
  color: var(--primary);
  background: var(--primary-alpha);
  padding: 3px 8px;
  border-radius: 4px;
}

.cm-cell-title {
  max-width: 300px;
}

.cm-title-cell {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.cm-cr-title {
  font-weight: 500;
  color: var(--text);
}

.cm-cr-excerpt {
  font-size: 12px;
  color: var(--text-muted);
}

.cm-cell-date {
  width: 100px;
  font-size: 12px;
  color: var(--text-muted);
}

/* Tags Group (merged type/status/priority) */
.cm-cell-tags {
  width: 260px;
}

.cm-tags-group {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  align-items: center;
}

.cm-tag {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 4px 8px;
  font-size: 11px;
  font-weight: 500;
  border-radius: 4px;
  background: color-mix(in srgb, var(--tag-color, #6b7280) 15%, transparent);
  color: var(--tag-color, #6b7280);
  white-space: nowrap;
}

.cm-tag i {
  font-size: 10px;
}

.cm-tag-type {
  background: color-mix(in srgb, var(--tag-color, var(--primary)) 12%, transparent);
  color: var(--tag-color, var(--primary));
}

.cm-tag-status {
  font-weight: 600;
}

.cm-tag-priority {
  text-transform: uppercase;
  letter-spacing: 0.3px;
}

/* Column widths */
.cm-th-id {
  width: 100px;
}

.cm-th-title {
  width: 35%;
  min-width: 250px;
}

.cm-th-tags {
  width: 260px;
}

.cm-th-date {
  width: 100px;
}

.cm-th-requester {
  width: 140px;
}

/* Type Badge */
.cm-type-badge {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 4px 10px;
  border-radius: 6px;
  font-size: 12px;
  font-weight: 500;
  background: color-mix(in srgb, var(--type-color) 12%, transparent);
  color: var(--type-color);
  white-space: nowrap;
}

.cm-type-badge i {
  font-size: 11px;
}

/* Status Badge */
.cm-status-badge {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 4px 10px;
  border-radius: 6px;
  font-size: 12px;
  font-weight: 500;
  background: color-mix(in srgb, var(--status-color) 12%, transparent);
  color: var(--status-color);
  white-space: nowrap;
}

.cm-status-badge i {
  font-size: 10px;
}

/* Priority Badge */
.cm-priority-badge {
  display: inline-flex;
  align-items: center;
  padding: 3px 8px;
  border-radius: 4px;
  font-size: 11px;
  font-weight: 600;
  background: color-mix(in srgb, var(--priority-color) 12%, transparent);
  color: var(--priority-color);
  text-transform: uppercase;
  letter-spacing: 0.3px;
}

/* Impact Badges */
.cm-impact-badges {
  display: flex;
  gap: 4px;
}

.cm-impact-badge {
  width: 24px;
  height: 24px;
  border-radius: 4px;
  background: var(--bg);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 11px;
  color: var(--text-muted);
  border: 1px solid var(--border);
}

.cm-impact-none {
  font-size: 11px;
  color: var(--text-light);
  font-style: italic;
}

/* Approval Progress */
.cm-approval-progress {
  display: flex;
  align-items: center;
  gap: 8px;
}

.cm-approval-count {
  font-size: 12px;
  font-weight: 500;
  color: var(--text-muted);
}

.cm-approval-bar {
  width: 60px;
  height: 6px;
  background: var(--bg);
  border-radius: 3px;
  overflow: hidden;
}

.cm-approval-fill {
  height: 100%;
  background: var(--success);
  border-radius: 3px;
  transition: width 0.3s ease;
}

/* Row Actions */
.cm-row-actions {
  display: flex;
  gap: 4px;
  opacity: 0;
  transition: opacity 0.15s ease;
}

.cm-row:hover .cm-row-actions {
  opacity: 1;
}

/* ========================================
   CR Drawer (Quick View)
   ======================================== */

.cm-drawer {
  position: fixed;
  top: var(--header-height);
  right: 0;
  bottom: 0;
  width: 480px;
  background: var(--surface);
  border-left: 1px solid var(--border);
  box-shadow: -8px 0 32px rgba(0, 0, 0, 0.15);
  transform: translateX(100%);
  transition: transform 0.25s cubic-bezier(0.4, 0, 0.2, 1);
  display: flex;
  flex-direction: column;
  z-index: 100;
}

.cm-drawer.open {
  transform: translateX(0);
}

.cm-drawer-inner {
  display: flex;
  flex-direction: column;
  height: 100%;
  overflow: hidden;
}

.cm-drawer-header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  padding: 24px;
  background: linear-gradient(180deg, var(--surface) 0%, var(--bg) 100%);
  border-bottom: 1px solid var(--border);
}

.cm-drawer-title {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.cm-drawer-title h3 {
  font-size: 16px;
  font-weight: 600;
  margin: 0;
  line-height: 1.3;
}

.cm-drawer-close {
  width: 32px;
  height: 32px;
  border: none;
  background: transparent;
  color: var(--text-muted);
  cursor: pointer;
  border-radius: 6px;
  font-size: 16px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.cm-drawer-close:hover {
  background: var(--bg);
  color: var(--text);
}

.cm-drawer-badges {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  padding: 14px 24px;
  background: var(--bg);
  border-bottom: 1px solid var(--border);
}

.cm-drawer-body {
  flex: 1;
  overflow-y: auto;
  scrollbar-width: thin;
  scrollbar-color: var(--border) transparent;
}

.cm-drawer-body::-webkit-scrollbar {
  width: 6px;
}

.cm-drawer-body::-webkit-scrollbar-track {
  background: transparent;
}

.cm-drawer-body::-webkit-scrollbar-thumb {
  background: var(--border);
  border-radius: 3px;
}

.cm-drawer-body::-webkit-scrollbar-thumb:hover {
  background: var(--text-muted);
}

.cm-drawer-content {
  flex: 1;
  overflow-y: auto;
  padding: 0;
}

.cm-drawer-section {
  border-bottom: 1px solid var(--border);
}

.cm-drawer-section h4 {
  font-size: 13px;
  font-weight: 600;
  color: var(--text);
  margin: 0;
  padding: 14px 24px;
  background: var(--bg);
  display: flex;
  align-items: center;
  gap: 8px;
}

.cm-drawer-section h4 i {
  color: var(--text-muted);
  font-size: 12px;
}

.cm-drawer-section-header {
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.cm-toggle-icon {
  color: var(--text-muted);
  font-size: 10px;
  transition: transform 0.2s ease;
  padding-right: 24px;
}

.cm-toggle-icon.rotated {
  transform: rotate(180deg);
}

.cm-drawer-section-content {
  padding: 16px 24px;
}

.cm-drawer-section-content.collapsed {
  display: none;
}

.cm-drawer-field {
  margin-bottom: 14px;
}

.cm-drawer-field:last-child {
  margin-bottom: 0;
}

.cm-drawer-field label {
  display: block;
  font-size: 11px;
  font-weight: 600;
  color: var(--text-muted);
  text-transform: uppercase;
  letter-spacing: 0.5px;
  margin-bottom: 4px;
}

.cm-drawer-field p {
  font-size: 14px;
  color: var(--text);
  margin: 0;
  line-height: 1.5;
}

.cm-drawer-field-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
  margin-bottom: 14px;
}

.cm-drawer-footer {
  padding: 20px 24px;
  border-top: 1px solid var(--border);
  display: flex;
  gap: 10px;
  justify-content: flex-end;
  background: var(--bg);
}

/* Status Action Buttons in Drawer */
.cm-drawer-status-actions {
  padding: 16px 24px;
  background: var(--bg);
  border-bottom: 1px solid var(--border);
}

.cm-status-label {
  font-size: 11px;
  font-weight: 600;
  color: var(--text-muted);
  text-transform: uppercase;
  letter-spacing: 0.5px;
  margin-bottom: 10px;
}

.cm-status-buttons {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.cm-status-btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 8px 14px;
  font-size: 12px;
  font-weight: 500;
  border: 1px solid var(--btn-color, var(--border));
  background: color-mix(in srgb, var(--btn-color, var(--primary)) 10%, transparent);
  color: var(--btn-color, var(--primary));
  border-radius: 6px;
  cursor: pointer;
  transition: all 0.2s ease;
}

.cm-status-btn:hover {
  background: color-mix(in srgb, var(--btn-color, var(--primary)) 20%, transparent);
  transform: translateY(-1px);
  box-shadow: 0 2px 8px color-mix(in srgb, var(--btn-color, var(--primary)) 25%, transparent);
}

.cm-status-btn:active {
  transform: translateY(0);
}

.cm-status-btn i {
  font-size: 11px;
}

/* Impact Cards in Drawer */
.cm-impact-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
}

.cm-impact-card {
  padding: 12px;
  border-radius: 8px;
  border: 1px solid var(--border);
  background: var(--bg);
}

.cm-impact-card.has-impact {
  border-color: var(--primary);
  background: var(--primary-alpha);
}

.cm-impact-card-header {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 12px;
  font-weight: 600;
  color: var(--text-muted);
  margin-bottom: 6px;
}

.cm-impact-card-header i {
  font-size: 11px;
}

.cm-impact-card.has-impact .cm-impact-card-header {
  color: var(--primary);
}

.cm-impact-summary {
  font-size: 13px;
  margin: 0;
  color: var(--text);
}

.cm-impact-details {
  font-size: 12px;
  color: var(--text-muted);
  margin: 4px 0 0 0;
}

.cm-no-impact {
  font-size: 12px;
  color: var(--text-light);
  font-style: italic;
  margin: 0;
}

.cm-impact-empty {
  text-align: center;
  padding: 20px;
  color: var(--text-muted);
}

/* Approvers in Drawer */
.cm-approvers-list {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.cm-approver-item {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 10px 12px;
  background: var(--bg);
  border-radius: 8px;
  border: 1px solid var(--border);
}

.cm-approver-avatar {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  background: linear-gradient(135deg, var(--primary), #7c3aed);
  color: white;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 14px;
  font-weight: 600;
}

.cm-approver-info {
  flex: 1;
  display: flex;
  flex-direction: column;
}

.cm-approver-name {
  font-size: 13px;
  font-weight: 500;
  color: var(--text);
}

.cm-approver-role {
  font-size: 11px;
  color: var(--text-muted);
}

.cm-approver-status {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 2px;
}

.cm-approved {
  font-size: 12px;
  color: var(--success);
  font-weight: 500;
}

.cm-rejected {
  font-size: 12px;
  color: var(--danger);
  font-weight: 500;
}

.cm-pending {
  font-size: 12px;
  color: var(--text-muted);
}

.cm-approval-date {
  font-size: 11px;
  color: var(--text-light);
}

.cm-approvals-empty {
  text-align: center;
  padding: 20px;
  color: var(--text-muted);
}

/* Activity Timeline in Drawer */
.cm-activity-timeline {
  display: flex;
  flex-direction: column;
}

.cm-activity-item {
  display: flex;
  gap: 12px;
  padding: 10px 0;
  position: relative;
}

.cm-activity-item:not(:last-child)::before {
  content: '';
  position: absolute;
  left: 5px;
  top: 26px;
  bottom: -10px;
  width: 2px;
  background: var(--border);
}

.cm-activity-dot {
  width: 12px;
  height: 12px;
  border-radius: 50%;
  background: var(--primary);
  flex-shrink: 0;
  margin-top: 4px;
}

.cm-activity-content {
  flex: 1;
}

.cm-activity-action {
  font-size: 13px;
  font-weight: 500;
  color: var(--text);
  display: block;
}

.cm-activity-user {
  font-size: 12px;
  color: var(--text-muted);
}

.cm-activity-time {
  font-size: 11px;
  color: var(--text-light);
  margin-left: 8px;
}

.cm-activity-notes {
  font-size: 12px;
  color: var(--text-muted);
  margin: 4px 0 0 0;
  padding: 8px 10px;
  background: var(--bg);
  border-radius: 6px;
}

.cm-activity-empty {
  text-align: center;
  padding: 20px;
  color: var(--text-muted);
}

/* ========================================
   CR Detail View (Full Edit)
   ======================================== */

.cm-detail {
  max-width: 900px;
  margin: 0 auto;
}

.cm-detail-nav {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 20px;
}

.cm-detail-actions {
  display: flex;
  gap: 8px;
}

/* Sections */
.cm-section {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 12px;
  margin-bottom: 20px;
  overflow: hidden;
}

.cm-section-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 16px 20px;
  background: var(--bg);
  border-bottom: 1px solid var(--border);
}

.cm-section-header h2 {
  font-size: 15px;
  font-weight: 600;
  color: var(--text);
  margin: 0;
  display: flex;
  align-items: center;
  gap: 10px;
}

.cm-section-header h2 i {
  color: var(--primary);
  font-size: 14px;
}

.cm-section-content {
  padding: 20px;
}

/* Form Elements */
.cm-form-row {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: 16px;
  margin-bottom: 16px;
}

.cm-form-row:last-child {
  margin-bottom: 0;
}

.cm-form-group {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.cm-form-group.flex-2 {
  grid-column: span 2;
}

.cm-label {
  font-size: 12px;
  font-weight: 600;
  color: var(--text-muted);
}

.cm-label.required::after {
  content: ' *';
  color: var(--danger);
}

.cm-input,
.cm-select,
.cm-textarea {
  padding: 10px 12px;
  font-size: 14px;
  border: 1px solid var(--border);
  border-radius: 8px;
  background: var(--surface);
  color: var(--text);
  transition: border-color 0.15s ease, box-shadow 0.15s ease;
}

.cm-input:focus,
.cm-select:focus,
.cm-textarea:focus {
  outline: none;
  border-color: var(--primary);
  box-shadow: 0 0 0 3px var(--primary-alpha);
}

.cm-select {
  appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Cpath fill='%236b7280' d='M3 4.5L6 7.5L9 4.5'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 12px center;
  padding-right: 32px;
  cursor: pointer;
}

.cm-textarea {
  resize: vertical;
  min-height: 60px;
  font-family: inherit;
}

/* Impact Forms */
.cm-impact-forms {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.cm-impact-form {
  border: 1px solid var(--border);
  border-radius: 10px;
  overflow: hidden;
}

.cm-impact-form-header {
  padding: 12px 16px;
  background: var(--bg);
  border-bottom: 1px solid var(--border);
}

.cm-checkbox {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 14px;
  font-weight: 500;
  color: var(--text);
  cursor: pointer;
}

.cm-checkbox input[type="checkbox"] {
  width: 18px;
  height: 18px;
  accent-color: var(--primary);
}

.cm-checkbox i {
  color: var(--text-muted);
}

.cm-optional-label {
  font-size: 11px;
  font-weight: 400;
  color: var(--text-light);
}

.cm-impact-form-body {
  padding: 16px;
}

.cm-impact-form-body.hidden {
  display: none;
}

/* Approvers Editor */
.cm-approvers-editor {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.cm-approvers-table table {
  width: 100%;
  border-collapse: collapse;
}

.cm-approvers-table th {
  padding: 10px 12px;
  text-align: left;
  font-size: 11px;
  font-weight: 600;
  color: var(--text-muted);
  text-transform: uppercase;
  background: var(--bg);
  border-bottom: 1px solid var(--border);
}

.cm-approvers-table td {
  padding: 8px 12px;
  border-bottom: 1px solid var(--border-subtle);
}

.cm-approvers-table td:last-child {
  width: 50px;
  text-align: center;
}

.cm-approvers-table .cm-input,
.cm-approvers-table .cm-select {
  padding: 8px 10px;
  font-size: 13px;
  width: 100%;
}

/* Baseline Options */
.cm-baseline-options {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
}

.cm-radio-card {
  display: flex;
  padding: 20px;
  border: 2px solid var(--border);
  border-radius: 10px;
  cursor: pointer;
  transition: all 0.15s ease;
}

.cm-radio-card:hover {
  border-color: var(--primary);
  background: var(--primary-alpha);
}

.cm-radio-card.selected {
  border-color: var(--primary);
  background: var(--primary-alpha);
}

.cm-radio-card input[type="radio"] {
  display: none;
}

.cm-radio-content {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: 8px;
}

.cm-radio-content i {
  font-size: 28px;
  color: var(--primary);
}

.cm-radio-content h4 {
  font-size: 14px;
  font-weight: 600;
  margin: 0;
}

.cm-radio-content p {
  font-size: 12px;
  color: var(--text-muted);
  margin: 0;
}

/* Radio Inline (for modals) */
.cm-radio-inline {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 8px 16px;
  border: 1px solid var(--border);
  border-radius: 6px;
  cursor: pointer;
  transition: all 0.15s ease;
  font-size: 14px;
}

.cm-radio-inline:hover {
  border-color: var(--primary);
  background: var(--primary-alpha);
}

.cm-radio-inline:has(input:checked) {
  border-color: var(--primary);
  background: var(--primary-alpha);
  color: var(--primary);
}

.cm-radio-inline input[type="radio"] {
  margin: 0;
  accent-color: var(--primary);
}

/* Attachments */
.cm-attachments {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.cm-attachments-list {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.cm-attachment-item {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 10px 14px;
  background: var(--bg);
  border: 1px solid var(--border);
  border-radius: 8px;
}

.cm-attachment-item i {
  font-size: 18px;
  color: var(--primary);
}

.cm-attachment-name {
  flex: 1;
  font-size: 13px;
  font-weight: 500;
}

.cm-attachment-size {
  font-size: 11px;
  color: var(--text-muted);
}

.cm-upload-area {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  padding: 32px;
  border: 2px dashed var(--border);
  border-radius: 10px;
  text-align: center;
  cursor: pointer;
  transition: all 0.15s ease;
}

.cm-upload-area:hover {
  border-color: var(--primary);
  background: var(--primary-alpha);
}

.cm-upload-area i {
  font-size: 32px;
  color: var(--text-muted);
}

.cm-upload-area p {
  margin: 0;
  color: var(--text-muted);
}

.cm-upload-area span {
  font-size: 11px;
  color: var(--text-light);
}

/* ========================================
   Responsive Adjustments
   ======================================== */

@media (max-width: 1200px) {
  .cm-drawer {
    width: 420px;
  }

  .cm-search-box {
    max-width: 300px;
  }

  .cm-th-title {
    min-width: 200px;
  }
}

@media (max-width: 992px) {
  .cm-drawer {
    width: 100%;
    max-width: 480px;
  }

  .cm-baseline-options {
    grid-template-columns: 1fr;
  }

  .cm-search-box {
    max-width: 250px;
  }

  .cm-tags-group {
    flex-direction: column;
    align-items: flex-start;
    gap: 4px;
  }
}

@media (max-width: 768px) {
  .cm-header {
    flex-direction: column;
    align-items: stretch;
    gap: 12px;
  }

  .cm-header-left {
    flex-direction: column;
    align-items: stretch;
    gap: 12px;
  }

  .cm-search-box {
    max-width: 100%;
  }

  .cm-filters {
    flex-wrap: wrap;
  }

  .cm-table {
    font-size: 12px;
  }

  .cm-table th,
  .cm-table td {
    padding: 10px 12px;
  }

  .cm-cell-title {
    max-width: 200px;
  }

  .cm-cell-tags {
    width: auto;
  }

  .cm-impact-grid {
    grid-template-columns: 1fr;
  }

  .cm-drawer-field-row {
    grid-template-columns: 1fr;
  }

  .cm-form-group.flex-2 {
    grid-column: span 1;
  }

  .cm-status-buttons {
    flex-direction: column;
  }

  .cm-status-btn {
    justify-content: center;
  }
}

/* ===================================================================
   GitHub Commit Modal Styles
   =================================================================== */

.github-commit-modal {
  max-width: 600px;
}

.github-commit-header-content {
  display: flex;
  align-items: center;
  gap: 16px;
}

.github-icon-large {
  font-size: 32px;
  color: #24292f;
}

.github-commit-subtitle {
  margin: 4px 0 0 0;
  font-size: 13px;
  color: var(--text-muted);
  font-weight: normal;
}

.github-commit-section {
  margin-bottom: 24px;
}

.github-section-title {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 14px;
  font-weight: 600;
  margin-bottom: 12px;
  color: var(--text);
}

.github-section-title i {
  color: var(--primary);
  font-size: 16px;
}

.github-preparation-details {
  background: var(--bg);
  border: 1px solid var(--border);
  border-radius: 8px;
  padding: 16px;
}

.github-prep-item {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px 0;
  font-size: 13px;
}

.github-prep-item:not(:last-child) {
  border-bottom: 1px solid var(--border);
}

.github-prep-item i {
  color: var(--text-muted);
  width: 16px;
  text-align: center;
}

.github-prep-label {
  color: var(--text-muted);
  font-weight: 500;
  min-width: 120px;
}

.github-prep-value {
  color: var(--text);
  font-weight: 600;
}

.github-commit-message {
  font-family: 'SF Mono', Monaco, 'Cascadia Code', 'Roboto Mono', Consolas, 'Courier New', monospace;
  font-size: 13px;
  line-height: 1.6;
  resize: vertical;
  min-height: 100px;
}

.github-commit-hint {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-top: 8px;
  padding: 8px 12px;
  background: rgba(99, 102, 241, 0.1);
  border: 1px solid rgba(99, 102, 241, 0.2);
  border-radius: 6px;
  font-size: 12px;
  color: #6366f1;
}

.github-commit-hint i {
  font-size: 14px;
}

.github-commit-progress {
  background: var(--bg);
  border: 1px solid var(--border);
  border-radius: 8px;
  padding: 20px;
}

.github-progress-step {
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 12px 0;
  transition: all 0.3s ease;
}

.github-progress-icon {
  width: 40px;
  height: 40px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  background: var(--surface);
  border: 2px solid var(--border);
  color: var(--text-muted);
  font-size: 18px;
  transition: all 0.3s ease;
}

.github-progress-text {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.github-progress-text strong {
  font-size: 14px;
  color: var(--text);
}

.github-progress-detail {
  font-size: 12px;
  color: var(--text-muted);
}

.github-commit-success {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 40px 20px;
  text-align: center;
}

.github-success-icon {
  width: 80px;
  height: 80px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  background: linear-gradient(135deg, rgba(16, 185, 129, 0.1), rgba(5, 150, 105, 0.15));
  margin-bottom: 24px;
}

.github-success-icon i {
  font-size: 40px;
  color: #10b981;
}

.github-commit-success h3 {
  font-size: 20px;
  font-weight: 700;
  margin-bottom: 8px;
  color: var(--text);
}

.github-commit-success p {
  font-size: 14px;
  color: var(--text-muted);
  margin-bottom: 16px;
}

.github-commit-hash {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px 16px;
  background: var(--bg);
  border: 1px solid var(--border);
  border-radius: 6px;
  font-family: 'SF Mono', Monaco, monospace;
  font-size: 13px;
}

.github-commit-hash i {
  color: var(--text-muted);
}

.github-commit-hash code {
  color: #6366f1;
  font-weight: 600;
}

.github-btn {
  position: relative;
}

.github-btn i.fab {
  font-size: 16px;
}

.btn.github-btn:hover {
  background: #24292f;
  color: white;
  border-color: #24292f;
}

.btn.github-btn.primary:hover {
  background: #1a1e22;
  border-color: #1a1e22;
}

/* ============================================
   BRIDGE PREFERENCES
   ============================================ */

.bridge-container {
  display: flex;
  flex-direction: column;
  min-height: 100%;
  background: var(--bg-color, #f7f9fc);
}

/* --- Header --- */
.bridge-header {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  padding: 20px 32px;
  background: rgba(255,255,255,0.85);
  backdrop-filter: blur(10px);
  border-bottom: 1px solid rgba(0,0,0,0.06);
  box-shadow: 0 1px 3px rgba(0,0,0,0.03);
  position: sticky;
  top: 0;
  z-index: 10;
}

.bridge-header-left {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.bridge-header-right {
  display: flex;
  gap: 8px;
  align-items: center;
}

.bridge-title {
  font-size: 22px;
  font-weight: 700;
  margin: 0;
  display: flex;
  align-items: center;
  gap: 10px;
  color: var(--text-color, #374151);
}

.bridge-title i {
  color: var(--primary-color, #2d2b87);
  opacity: 0.9;
}

.bridge-meta {
  display: flex;
  gap: 12px;
  align-items: center;
}

.bridge-status-pill {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 4px 12px;
  border-radius: 20px;
  font-size: 12px;
  font-weight: 600;
}

.bridge-status-pill.connected {
  background: rgba(16, 185, 129, 0.12);
  color: #10b981;
  border: 1px solid rgba(16, 185, 129, 0.25);
}

.bridge-status-pill.disconnected {
  background: rgba(156, 163, 175, 0.12);
  color: #6b7280;
  border: 1px solid rgba(156, 163, 175, 0.25);
}

.bridge-status-pill .bridge-status-dot {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: currentColor;
}

.bridge-status-pill.connected .bridge-status-dot {
  animation: bridgePulse 2s infinite;
}

@keyframes bridgePulse {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.4; }
}

.bridge-save-status {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 6px 12px;
  background: rgba(34, 197, 94, 0.15);
  border: 1px solid #22c55e;
  border-radius: 6px;
  color: #22c55e;
  font-size: 12px;
  font-weight: 600;
  animation: fadeInOut 2.5s ease;
}

/* --- Content wrapper --- */
.bridge-content-wrapper {
  flex: 1;
  background: #f8f9fc;
}

.bridge-all-sections {
  max-width: 1200px;
  margin: 0 auto;
  padding: 40px 32px;
}

/* --- Section cards --- */
.bridge-section {
  margin-bottom: 32px;
  padding: 32px;
  background: var(--panel-bg, #ffffff);
  border-radius: 12px;
  border: 1px solid rgba(0,0,0,0.04);
  box-shadow: 0 1px 3px rgba(0,0,0,0.02);
  transition: all 0.2s;
}

.bridge-section:hover {
  box-shadow: 0 4px 12px rgba(0,0,0,0.04);
  border-color: rgba(0,0,0,0.06);
}

.bridge-section-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 24px;
  padding-bottom: 16px;
  border-bottom: 2px solid rgba(0,0,0,0.06);
}

.bridge-section-header h2 {
  font-size: 20px;
  font-weight: 700;
  margin: 0;
  display: flex;
  align-items: center;
  gap: 12px;
  color: var(--text-color, #374151);
}

.bridge-section-header h2 i {
  color: var(--primary-color, #2d2b87);
  font-size: 20px;
  opacity: 0.95;
}

.bridge-section-content {
  max-width: 100%;
}

/* --- Subsection --- */
.bridge-subsection {
  margin-top: 24px;
  padding-top: 20px;
  border-top: 1px solid rgba(0,0,0,0.06);
}

.bridge-subsection:first-child {
  margin-top: 0;
  padding-top: 0;
  border-top: none;
}

.bridge-subsection h4 {
  font-size: 15px;
  font-weight: 600;
  margin: 0 0 4px 0;
  color: var(--text-color, #374151);
}

.bridge-hint {
  font-size: 13px;
  color: var(--text-muted, #6b7280);
  margin: 0 0 12px 0;
  line-height: 1.4;
}

/* --- Status card --- */
.bridge-status-card {
  display: flex;
  flex-direction: column;
  gap: 20px;
}

.bridge-status-info {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 24px;
  flex-wrap: wrap;
}

.bridge-status-indicator {
  display: flex;
  align-items: flex-start;
  gap: 14px;
  flex: 1;
  min-width: 240px;
}

.bridge-status-indicator strong {
  display: block;
  font-size: 15px;
  margin-bottom: 4px;
  color: var(--text-color, #374151);
}

.bridge-status-indicator p {
  margin: 0;
  font-size: 13px;
  color: var(--text-muted, #6b7280);
  line-height: 1.5;
}

.bridge-status-dot-lg {
  display: inline-block;
  width: 12px;
  height: 12px;
  border-radius: 50%;
  background: #9ca3af;
  margin-top: 4px;
  flex-shrink: 0;
}

.bridge-status-indicator.connected .bridge-status-dot-lg {
  background: #10b981;
  box-shadow: 0 0 0 3px rgba(16, 185, 129, 0.2);
  animation: bridgePulse 2s infinite;
}

.bridge-status-actions {
  display: flex;
  gap: 8px;
  flex-shrink: 0;
}

/* --- Pairing code --- */
.bridge-pairing-block {
  padding: 16px;
  background: var(--bg-color, #f7f9fc);
  border-radius: 8px;
  border: 1px solid rgba(0,0,0,0.06);
}

.bridge-pairing-code-row {
  display: flex;
  align-items: center;
  gap: 8px;
  margin: 8px 0;
}

.bridge-pairing-code {
  font-family: 'SF Mono', Monaco, 'Cascadia Code', 'Courier New', monospace;
  font-size: 18px;
  font-weight: 700;
  letter-spacing: 2px;
  color: var(--primary-color, #2d2b87);
  padding: 10px 16px;
  background: var(--panel-bg, #ffffff);
  border: 1px solid rgba(0,0,0,0.08);
  border-radius: 6px;
  user-select: all;
}

/* --- Folder items --- */
.bridge-folder-item {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px 12px;
  background: var(--bg-color, #f7f9fc);
  border-radius: 6px;
  margin-bottom: 8px;
  border: 1px solid rgba(0,0,0,0.04);
}

.bridge-folder-item i {
  color: var(--primary-color, #2d2b87);
  opacity: 0.7;
}

.bridge-folder-item code {
  flex: 1;
  font-family: 'SF Mono', Monaco, 'Cascadia Code', 'Courier New', monospace;
  font-size: 13px;
  color: var(--text-color, #374151);
}

.bridge-folder-item .btn {
  opacity: 0;
  transition: opacity 0.15s;
}

.bridge-folder-item:hover .btn {
  opacity: 1;
}

.bridge-add-row {
  display: flex;
  gap: 8px;
  margin-top: 8px;
}

.bridge-add-row .formInput {
  flex: 1;
}

/* --- Toggle row --- */
.bridge-toggle-row {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 24px;
  padding: 4px 0;
}

.bridge-toggle-row > div:first-child {
  flex: 1;
}

.bridge-toggle-row h4 {
  margin-bottom: 2px;
}

.bridge-toggle-row .toggle-switch {
  flex-shrink: 0;
  margin-top: 2px;
}

/* --- Patterns grid --- */
.bridge-patterns-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 24px;
}

.bridge-pattern-column {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.bridge-chips-list {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  min-height: 32px;
}

.bridge-chip-input-row {
  display: flex;
  gap: 6px;
}

.bridge-chip-input-row .formInput {
  flex: 1;
}

/* --- Radio card group --- */
.bridge-radio-group {
  display: flex;
  gap: 12px;
  flex-wrap: wrap;
}

.bridge-radio-group.vertical {
  flex-direction: column;
}

.bridge-radio-card {
  display: flex;
  align-items: center;
  flex: 1;
  min-width: 180px;
  padding: 14px 16px;
  border: 1px solid rgba(0,0,0,0.08);
  border-radius: 8px;
  background: var(--panel-bg, #ffffff);
  cursor: pointer;
  transition: all 0.2s;
}

.bridge-radio-card:hover {
  border-color: rgba(0,0,0,0.15);
  background: rgba(0,0,0,0.01);
}

.bridge-radio-card.selected {
  border-color: var(--primary-color, #2d2b87);
  background: rgba(45, 43, 135, 0.04);
  box-shadow: 0 0 0 1px var(--primary-color, #2d2b87);
}

.bridge-radio-card.compact {
  padding: 10px 14px;
}

.bridge-radio-card input[type="radio"] {
  display: none;
}

.bridge-radio-card-content {
  display: flex;
  align-items: center;
  gap: 12px;
  width: 100%;
}

.bridge-radio-card-content > i {
  font-size: 18px;
  color: var(--primary-color, #2d2b87);
  opacity: 0.7;
  flex-shrink: 0;
}

.bridge-radio-card.selected .bridge-radio-card-content > i {
  opacity: 1;
}

.bridge-radio-card-content strong {
  display: block;
  font-size: 14px;
  color: var(--text-color, #374151);
  margin-bottom: 2px;
}

.bridge-radio-card-content p {
  margin: 0;
  font-size: 12px;
  color: var(--text-muted, #6b7280);
  line-height: 1.4;
}

.bridge-radio-card-content span {
  font-size: 14px;
  color: var(--text-color, #374151);
}

/* Compact cards - inline label + chip */
.bridge-radio-card.compact .bridge-radio-card-content {
  justify-content: space-between;
}

/* --- Form row (2 cols) --- */
.bridge-form-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 24px;
}

.bridge-form-row .formGroup {
  margin-bottom: 0;
}

/* --- Chip variants for bridge --- */
.bridge-section .chipItem {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 4px 10px;
  border-radius: 6px;
  font-size: 13px;
  font-family: 'SF Mono', Monaco, 'Cascadia Code', 'Courier New', monospace;
  background: rgba(45, 43, 135, 0.08);
  color: var(--primary-color, #2d2b87);
  border: 1px solid rgba(45, 43, 135, 0.12);
}

.bridge-section .chipItem.danger {
  background: rgba(239, 68, 68, 0.08);
  color: #ef4444;
  border-color: rgba(239, 68, 68, 0.15);
}

.bridge-section .chipItem .chipRemoveBtn {
  background: none;
  border: none;
  cursor: pointer;
  font-size: 14px;
  line-height: 1;
  color: inherit;
  opacity: 0.6;
  padding: 0 2px;
}

.bridge-section .chipItem .chipRemoveBtn:hover {
  opacity: 1;
}

/* --- Advanced accordion --- */
.bridge-advanced-accordion {
  margin-top: 28px;
  border: 1px solid rgba(0,0,0,0.06);
  border-radius: 8px;
  overflow: hidden;
}

.bridge-advanced-header {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 14px 16px;
  background: var(--bg-color, #f7f9fc);
  cursor: pointer;
  font-size: 14px;
  font-weight: 600;
  color: var(--text-color, #374151);
  transition: background 0.15s;
  user-select: none;
}

.bridge-advanced-header:hover {
  background: rgba(0,0,0,0.04);
}

.bridge-advanced-header i.fa-gear {
  color: var(--text-muted, #6b7280);
}

.bridge-advanced-chevron {
  font-size: 11px;
  transition: transform 0.2s;
  color: var(--text-muted, #6b7280);
}

.bridge-advanced-chevron.expanded {
  transform: rotate(90deg);
}

.bridge-advanced-content {
  padding: 20px;
  display: flex;
  flex-direction: column;
  gap: 20px;
  border-top: 1px solid rgba(0,0,0,0.06);
}

/* --- Chip success variant --- */
.chip.chip-success {
  background: rgba(16, 185, 129, 0.12);
  color: #10b981;
  border-color: rgba(16, 185, 129, 0.2);
}

/* --- Responsive --- */
@media (max-width: 768px) {
  .bridge-header {
    padding: 16px 20px;
    flex-direction: column;
    gap: 12px;
  }

  .bridge-all-sections {
    padding: 20px 16px;
  }

  .bridge-section {
    padding: 20px;
  }

  .bridge-status-info {
    flex-direction: column;
  }

  .bridge-patterns-grid {
    grid-template-columns: 1fr;
  }

  .bridge-form-row {
    grid-template-columns: 1fr;
  }

  .bridge-radio-group {
    flex-direction: column;
  }

  .bridge-radio-card {
    min-width: unset;
  }

  .bridge-folder-item .btn {
    opacity: 1;
  }
}

/* ============================================
   DEVELOPMENT PLAN VIEW STYLES
   ============================================ */

.dp-container {
  display: flex;
  flex-direction: column;
  min-height: 100%;
}

.dp-header {
  padding: 20px 24px;
}

.dp-subtitle {
  padding: 0 24px 16px;
}

.dp-subtitle p {
  margin: 0;
  color: var(--text-muted);
  font-size: 14px;
}

.dp-content {
  flex: 1;
  padding: 0 24px 24px;
  overflow-y: auto;
}

.dp-editor {
  display: flex;
  flex-direction: column;
  gap: 20px;
  max-width: 1200px;
}

/* Mode Toggle */
.dp-mode-toggle {
  display: flex;
  gap: 4px;
  background: var(--bg-secondary, #f5f5f5);
  padding: 4px;
  border-radius: 8px;
  margin-right: 12px;
}

.dp-mode-toggle .btn.active {
  background: var(--bg);
  box-shadow: 0 1px 3px rgba(0,0,0,0.1);
}

/* Dropdown Menu */
.dropdown {
  position: relative;
}

.dropdown-menu {
  position: absolute;
  top: 100%;
  right: 0;
  margin-top: 4px;
  background: var(--bg);
  border: 1px solid var(--border);
  border-radius: 8px;
  box-shadow: 0 4px 12px rgba(0,0,0,0.15);
  min-width: 220px;
  z-index: 100;
  overflow: hidden;
}

.dropdown-item {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 12px 16px;
  font-size: 14px;
  color: var(--text);
  cursor: pointer;
  transition: background 0.15s;
}

.dropdown-item:hover {
  background: var(--bg-secondary, #f5f5f5);
}

.dropdown-item i {
  width: 18px;
  color: var(--text-muted);
}

/* Cards */
.dp-card {
  background: var(--bg);
  border: 1px solid var(--border);
  border-radius: 12px;
  overflow: hidden;
}

.dp-card-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 16px 20px;
  border-bottom: 1px solid var(--border);
  background: var(--bg-secondary, #fafafa);
}

.dp-card-title {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 15px;
  font-weight: 600;
  color: var(--text);
}

.dp-card-title i {
  color: var(--primary);
  font-size: 16px;
}

.dp-card-actions {
  display: flex;
  align-items: center;
  gap: 8px;
}

.dp-card-body {
  padding: 20px;
}

/* Settings Grid */
.dp-settings-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 24px;
}

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

.dp-setting-group {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.dp-setting-label {
  font-size: 13px;
  font-weight: 600;
  color: var(--text);
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

/* Radio Group */
.dp-radio-group {
  display: flex;
  gap: 8px;
}

.dp-radio-group.vertical {
  flex-direction: column;
}

.dp-radio-item {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  padding: 12px 14px;
  background: var(--bg);
  border: 2px solid var(--border);
  border-radius: 8px;
  cursor: pointer;
  transition: all 0.15s;
  flex: 1;
}

.dp-radio-item:hover {
  border-color: var(--primary-light, #93c5fd);
}

.dp-radio-item.selected {
  border-color: var(--primary);
  background: rgba(59, 130, 246, 0.05);
}

.dp-radio-item[disabled] {
  opacity: 0.6;
  cursor: not-allowed;
}

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

.dp-radio-content {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.dp-radio-label {
  font-size: 14px;
  font-weight: 500;
  color: var(--text);
  display: flex;
  align-items: center;
  gap: 8px;
}

.dp-radio-desc {
  font-size: 12px;
  color: var(--text-muted);
}

/* Slider */
.dp-slider-container {
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 8px 0;
}

.dp-slider {
  flex: 1;
  height: 8px;
  border-radius: 4px;
  appearance: none;
  background: var(--border);
  outline: none;
}

.dp-slider::-webkit-slider-thumb {
  appearance: none;
  width: 20px;
  height: 20px;
  border-radius: 50%;
  background: var(--primary);
  cursor: pointer;
  box-shadow: 0 2px 6px rgba(59, 130, 246, 0.4);
}

.dp-slider::-moz-range-thumb {
  width: 20px;
  height: 20px;
  border-radius: 50%;
  background: var(--primary);
  cursor: pointer;
  border: none;
}

.dp-slider-info {
  display: flex;
  align-items: baseline;
  gap: 6px;
  min-width: 140px;
}

.dp-slider-value {
  font-size: 24px;
  font-weight: 700;
  color: var(--primary);
}

.dp-slider-label {
  font-size: 13px;
  color: var(--text-muted);
}

/* Features List */
.dp-features-list {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.dp-feature-item {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 12px 14px;
  background: var(--bg);
  border: 1px solid var(--border);
  border-radius: 8px;
  transition: all 0.15s;
}

.dp-feature-item:hover {
  border-color: var(--primary-light, #93c5fd);
}

.dp-feature-item.deferred {
  opacity: 0.6;
  background: var(--bg-secondary, #f5f5f5);
}

.dp-feature-checkbox {
  display: flex;
  align-items: center;
  gap: 10px;
  cursor: pointer;
}

.dp-feature-checkbox input[type="checkbox"] {
  width: 18px;
  height: 18px;
  accent-color: var(--primary);
}

.dp-feature-name {
  font-size: 14px;
  font-weight: 500;
  color: var(--text);
}

.dp-feature-meta {
  display: flex;
  align-items: center;
  gap: 8px;
}

.dp-feature-estimate {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 13px;
  color: var(--text-muted);
}

.dp-feature-estimate i {
  font-size: 10px;
  color: var(--text-muted);
}

.dp-features-more {
  padding: 8px 0;
  text-align: center;
}

.dp-features-summary {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 24px;
  margin-top: 16px;
  padding-top: 16px;
  border-top: 1px solid var(--border);
}

.dp-summary-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
}

.dp-summary-value {
  font-size: 24px;
  font-weight: 700;
  color: var(--primary);
}

.dp-summary-label {
  font-size: 12px;
  color: var(--text-muted);
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

.dp-summary-divider {
  width: 1px;
  height: 40px;
  background: var(--border);
}

/* Phases */
.dp-phases-list {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.dp-phase {
  border: 1px solid var(--border);
  border-radius: 8px;
  overflow: hidden;
}

.dp-phase-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 14px 16px;
  background: var(--bg-secondary, #fafafa);
  cursor: pointer;
  transition: background 0.15s;
}

.dp-phase-header:hover {
  background: var(--bg);
}

.dp-phase-info {
  display: flex;
  align-items: center;
  gap: 12px;
}

.dp-phase-toggle {
  width: 24px;
  height: 24px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: none;
  border: none;
  color: var(--text-muted);
  cursor: pointer;
  font-size: 12px;
}

.dp-phase-icon {
  width: 36px;
  height: 36px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 8px;
  font-size: 16px;
}

.dp-phase-label {
  display: flex;
  align-items: baseline;
  gap: 8px;
}

.dp-phase-name {
  font-size: 15px;
  font-weight: 600;
  color: var(--text);
}

.dp-phase-count {
  font-size: 13px;
  color: var(--text-muted);
}

.dp-phase-actions {
  display: flex;
  align-items: center;
  gap: 8px;
}

.dp-phase-expand-text {
  font-size: 12px;
  color: var(--text-muted);
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

/* Tasks Table */
.dp-phase-tasks {
  border-top: 1px solid var(--border);
  overflow-x: auto;
}

.dp-tasks-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 13px;
}

.dp-tasks-table thead {
  background: var(--bg-secondary, #f5f5f5);
}

.dp-tasks-table th {
  padding: 10px 12px;
  text-align: left;
  font-weight: 600;
  color: var(--text-muted);
  text-transform: uppercase;
  font-size: 11px;
  letter-spacing: 0.5px;
  border-bottom: 1px solid var(--border);
}

.dp-tasks-table td {
  padding: 12px;
  border-bottom: 1px solid var(--border);
  vertical-align: middle;
}

.dp-tasks-table tbody tr:last-child td {
  border-bottom: none;
}

.dp-tasks-table tbody tr:hover {
  background: var(--bg-secondary, #fafafa);
}

.dp-task-id {
  font-family: 'Monaco', 'Menlo', monospace;
  font-size: 12px;
  font-weight: 600;
  color: var(--primary);
}

.dp-task-desc {
  font-size: 13px;
  color: var(--text);
}

.dp-task-deps {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
}

.dp-dep-chip {
  display: inline-block;
  padding: 2px 6px;
  background: var(--bg-secondary, #f0f0f0);
  border-radius: 4px;
  font-size: 11px;
  font-family: 'Monaco', 'Menlo', monospace;
  color: var(--text-muted);
}

.dp-no-deps {
  color: var(--text-muted);
}

.dp-complexity-chip,
.dp-layer-chip {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 4px 8px;
  border-radius: 4px;
  font-size: 11px;
  font-weight: 500;
}

.dp-layer-chip i {
  font-size: 10px;
}

/* Empty State */
.dp-empty-state {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 48px 24px;
  text-align: center;
}

.dp-empty-icon {
  width: 80px;
  height: 80px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--bg-secondary, #f5f5f5);
  border-radius: 50%;
  margin-bottom: 20px;
}

.dp-empty-icon i {
  font-size: 32px;
  color: var(--text-muted);
}

.dp-empty-state h3 {
  margin: 0 0 8px;
  font-size: 18px;
  font-weight: 600;
  color: var(--text);
}

.dp-empty-state p {
  margin: 0 0 24px;
  font-size: 14px;
  color: var(--text-muted);
}

/* Footer */
.dp-footer {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 16px 24px;
  background: var(--bg-secondary, #fafafa);
  border-top: 1px solid var(--border);
}

.dp-footer-left {
  display: flex;
  align-items: center;
  gap: 12px;
}

.dp-task-count {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 14px;
  color: var(--text-muted);
}

.dp-task-count i {
  color: var(--primary);
}

.dp-footer-right {
  display: flex;
  align-items: center;
  gap: 12px;
}

/* Chips */
.chip-xs {
  font-size: 10px;
  padding: 2px 6px;
}

.chip-sm {
  font-size: 11px;
  padding: 3px 8px;
}

.chip-success {
  background: rgba(16, 185, 129, 0.1);
  color: #10b981;
}

.chip-primary {
  background: rgba(59, 130, 246, 0.1);
  color: #3b82f6;
}

.chip-ghost {
  background: var(--bg-secondary, #f0f0f0);
  color: var(--text-muted);
}

/* Responsive */
@media (max-width: 768px) {
  .dp-header {
    flex-direction: column;
    align-items: flex-start;
    gap: 16px;
  }

  .brd-header-right {
    width: 100%;
    justify-content: flex-start;
    flex-wrap: wrap;
  }

  .dp-footer {
    flex-direction: column;
    gap: 16px;
    align-items: stretch;
  }

  .dp-footer-left,
  .dp-footer-right {
    justify-content: center;
  }

  .dp-tasks-table {
    font-size: 12px;
  }

  .dp-tasks-table th,
  .dp-tasks-table td {
    padding: 8px;
  }
}

/* ============================================
   DEVELOPMENT PLAN V2 - Tree Table Styles
   ============================================ */

.dp-view {
  display: flex;
  flex-direction: column;
  min-height: 100%;
  background: #ffffff;
}

/* Header Bar */
.dp-header-bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 16px 24px;
  border-bottom: 1px solid var(--border, #e5e7eb);
  background: #ffffff;
  flex-shrink: 0;
  position: sticky;
  top: 0;
  z-index: 100;
}

.dp-header-left {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.dp-title {
  display: flex;
  align-items: center;
  gap: 10px;
  margin: 0;
  font-size: 1.25rem;
  font-weight: 600;
  color: var(--text, #1f2937);
}

.dp-title i {
  color: var(--accent, #3b82f6);
}

.dp-meta {
  display: flex;
  align-items: center;
  gap: 12px;
}

.dp-timestamp {
  font-size: 0.75rem;
  color: var(--text-muted, #6b7280);
  display: flex;
  align-items: center;
  gap: 4px;
}

.dp-save-status {
  font-size: 0.75rem;
  color: var(--success, #10b981);
  display: flex;
  align-items: center;
  gap: 4px;
}

.dp-header-right {
  display: flex;
  align-items: center;
  gap: 8px;
}

/* Mode Toggle */
.dp-mode-toggle {
  display: flex;
  gap: 2px;
  background: var(--bg-secondary, #f3f4f6);
  padding: 3px;
  border-radius: 6px;
  margin-right: 8px;
}

.dp-mode-toggle .btn.active {
  background: var(--bg, #fff);
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.1);
}

/* Subtitle Bar */
.dp-subtitle-bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 12px 24px;
  background: #f9fafb;
  border-bottom: 1px solid var(--border, #e5e7eb);
  flex-shrink: 0;
  position: sticky;
  top: 79px; /* Height of header bar */
  z-index: 99;
}

.dp-subtitle-bar p {
  margin: 0;
  font-size: 0.85rem;
  color: var(--text-muted, #6b7280);
}

.dp-task-count {
  font-size: 0.75rem;
  color: var(--text-muted, #6b7280);
  display: flex;
  align-items: center;
  gap: 6px;
}

/* Tree Container */
.dp-tree-container {
  flex: 1;
  padding: 0;
}

/* Empty State */
.dp-empty-state {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 60px 24px;
  text-align: center;
}

.dp-empty-icon {
  width: 80px;
  height: 80px;
  border-radius: 50%;
  background: var(--bg-secondary, #f3f4f6);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 2rem;
  color: var(--text-muted, #9ca3af);
  margin-bottom: 16px;
}

.dp-empty-state h3 {
  margin: 0 0 8px;
  font-size: 1.125rem;
  color: var(--text, #1f2937);
}

.dp-empty-state p {
  margin: 0 0 20px;
  font-size: 0.875rem;
  color: var(--text-muted, #6b7280);
  max-width: 400px;
}

.dp-empty-actions {
  display: flex;
  gap: 12px;
}

/* Tree Table */
.dp-tree-table {
  display: flex;
  flex-direction: column;
  min-width: 900px;
  overflow: visible;
}

.dp-tree-header {
  display: flex;
  padding: 12px 16px;
  background: #f3f4f6;
  border-bottom: 1px solid var(--border, #e5e7eb);
  font-size: 0.75rem;
  font-weight: 600;
  color: var(--text-muted, #6b7280);
  text-transform: uppercase;
  letter-spacing: 0.5px;
  position: sticky;
  top: 79px; /* header-bar height */
  z-index: 10;
}

.dp-tree-body {
  display: flex;
  flex-direction: column;
}

.dp-tree-footer {
  padding: 12px 16px;
  border-top: 1px solid var(--border, #e5e7eb);
}

.dp-tree-col {
  display: flex;
  align-items: center;
}

.dp-col-name {
  flex: 1;
  min-width: 300px;
}

.dp-col-status {
  width: 100px;
}

.dp-col-complexity {
  width: 100px;
}

.dp-col-layer {
  width: 120px;
}

.dp-col-type {
  width: 110px;
}

.dp-col-priority {
  width: 90px;
}

.dp-col-assignee {
  width: 140px;
}

.dp-col-tags {
  width: 200px;
  min-width: 140px;
}

.dp-col-actions {
  width: 100px;
  justify-content: flex-end;
  gap: 4px;
}

/* Tags */
.dp-tags-wrap {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
}

.dp-tag {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 2px 8px;
  border-radius: 12px;
  font-size: 11px;
  font-weight: 500;
  border: 1px solid;
  white-space: nowrap;
  line-height: 1.4;
}

.dp-tag i {
  font-size: 9px;
}

/* Loading State */
.dp-loading-container {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 400px;
  padding: 48px;
}

.dp-loading {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 16px;
  color: var(--text-muted, #6b7280);
}

.dp-loading i {
  font-size: 2rem;
  color: var(--primary, #3b82f6);
}

.dp-loading span {
  font-size: 1rem;
}

/* Error State */
.dp-error-container {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 400px;
  padding: 48px;
}

.dp-error {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 16px;
  text-align: center;
  max-width: 400px;
}

.dp-error i {
  font-size: 3rem;
  color: var(--warning, #f59e0b);
}

.dp-error h3 {
  margin: 0;
  font-size: 1.25rem;
  color: var(--text, #1f2937);
}

.dp-error p {
  margin: 0;
  color: var(--text-muted, #6b7280);
}

/* Type Badge */
.dp-type-badge {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 2px 8px;
  font-size: 0.7rem;
  font-weight: 500;
  border-radius: 4px;
}

/* Priority Badge */
.dp-priority-badge {
  display: inline-flex;
  align-items: center;
  padding: 2px 8px;
  font-size: 0.7rem;
  font-weight: 500;
  border-radius: 4px;
}

/* Phase Progress Bar */
.dp-phase-progress {
  display: inline-flex;
  width: 60px;
  height: 6px;
  background: var(--border, #e5e7eb);
  border-radius: 3px;
  overflow: hidden;
  margin-left: 8px;
}

.dp-phase-progress-bar {
  height: 100%;
  background: var(--primary, #3b82f6);
  border-radius: 3px;
  transition: width 0.3s ease;
}

/* Phase Row Styling */
.dp-tree-row-phase {
  background: var(--bg-secondary, #f9fafb);
  font-weight: 500;
}

.dp-tree-row-phase:hover {
  background: var(--bg-hover, #f3f4f6);
}

/* Assign Button in Row */
.dp-assign-btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 4px 10px;
  font-size: 0.75rem;
  color: var(--text-muted, #6b7280);
  background: transparent;
  border: 1px dashed var(--border, #e5e7eb);
  border-radius: 4px;
  cursor: pointer;
  transition: all 0.15s;
}

.dp-assign-btn:hover {
  color: var(--primary, #3b82f6);
  border-color: var(--primary, #3b82f6);
  background: var(--primary-light, #eff6ff);
}

/* Assignee Badge in Row */
.dp-assignee-badge {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 4px 10px;
  font-size: 0.75rem;
  color: var(--text, #1f2937);
  background: var(--bg-secondary, #f3f4f6);
  border: 1px solid var(--border, #e5e7eb);
  border-radius: 4px;
  cursor: pointer;
  transition: all 0.15s;
}

.dp-assignee-badge:hover {
  background: var(--bg-hover, #e5e7eb);
  border-color: var(--primary, #3b82f6);
}

.dp-assignee-badge i {
  font-size: 0.7rem;
  color: var(--text-muted, #6b7280);
}

/* Tree Rows */
.dp-tree-row {
  display: flex;
  padding: 10px 16px;
  border-bottom: 1px solid var(--border-light, #f0f0f0);
  transition: background 0.15s;
}

.dp-tree-row:hover {
  background: var(--bg-hover, #f9fafb);
}

.dp-tree-row-milestone {
  background: var(--bg-secondary, #f9fafb);
  font-weight: 500;
}

.dp-tree-row-work_package {
  background: rgba(59, 130, 246, 0.03);
}

.dp-tree-row-activity {
  background: rgba(16, 185, 129, 0.03);
}

.dp-tree-toggle {
  width: 24px;
  height: 24px;
  border: none;
  background: transparent;
  border-radius: 4px;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--text-muted, #9ca3af);
  margin-right: 4px;
  flex-shrink: 0;
}

.dp-tree-toggle:hover {
  background: var(--bg-secondary, #f3f4f6);
  color: var(--text, #1f2937);
}

.dp-tree-toggle-placeholder {
  width: 24px;
  margin-right: 4px;
  flex-shrink: 0;
}

.dp-tree-icon {
  width: 24px;
  height: 24px;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-right: 8px;
  flex-shrink: 0;
}

.dp-tree-name {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 0.875rem;
  color: var(--text, #1f2937);
}

.dp-task-id {
  font-family: monospace;
  font-size: 0.75rem;
  color: var(--text-muted, #9ca3af);
  background: var(--bg-secondary, #f3f4f6);
  padding: 2px 6px;
  border-radius: 4px;
}

.dp-tree-count {
  font-size: 0.75rem;
  color: var(--text-muted, #9ca3af);
  margin-left: 4px;
}

/* Badges */
.dp-status-badge,
.dp-complexity-badge,
.dp-layer-badge {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 4px 8px;
  border-radius: 4px;
  font-size: 0.7rem;
  font-weight: 500;
}

.dp-layer-badge i {
  font-size: 0.65rem;
}

/* Action Buttons */
.dp-action-btn {
  width: 28px;
  height: 28px;
  border: none;
  background: transparent;
  border-radius: 4px;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--text-muted, #9ca3af);
  transition: all 0.15s;
}

.dp-action-btn:hover {
  background: var(--bg-secondary, #f3f4f6);
  color: var(--text, #1f2937);
}

.dp-action-btn.dp-delete-btn:hover {
  background: rgba(239, 68, 68, 0.1);
  color: #ef4444;
}

/* Footer Bar */
.dp-footer-bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 12px 24px;
  border-top: 1px solid var(--border, #e5e7eb);
  background: var(--bg, #fff);
  flex-shrink: 0;
  position: sticky;
  bottom: 0;
  z-index: 10;
}

.dp-footer-left,
.dp-footer-right {
  display: flex;
  align-items: center;
  gap: 8px;
}

/* Modal Styles */
.dp-modal-overlay {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: rgba(0, 0, 0, 0.5);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 1000;
  padding: 20px;
}

.dp-modal {
  background: var(--bg, #fff);
  border-radius: 12px;
  width: 100%;
  max-width: 640px;
  max-height: 85vh;
  display: flex;
  flex-direction: column;
  box-shadow: 0 20px 60px rgba(0, 0, 0, 0.2);
}

.dp-modal-sm {
  max-width: 480px;
}

.dp-modal-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 16px 20px;
  border-bottom: 1px solid var(--border, #e5e7eb);
}

.dp-modal-header h3 {
  margin: 0;
  font-size: 1rem;
  font-weight: 600;
  display: flex;
  align-items: center;
  gap: 8px;
  color: var(--text, #1f2937);
}

.dp-modal-close {
  width: 32px;
  height: 32px;
  border: none;
  background: transparent;
  border-radius: 6px;
  cursor: pointer;
  color: var(--text-muted, #9ca3af);
  display: flex;
  align-items: center;
  justify-content: center;
}

.dp-modal-close:hover {
  background: var(--bg-secondary, #f3f4f6);
  color: var(--text, #1f2937);
}

/* Modal Steps */
.dp-modal-steps {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 16px 20px;
  border-bottom: 1px solid var(--border, #e5e7eb);
  background: var(--bg-secondary, #f9fafb);
}

.dp-step {
  display: flex;
  align-items: center;
  gap: 8px;
  color: var(--text-muted, #9ca3af);
}

.dp-step.active {
  color: var(--accent, #3b82f6);
}

.dp-step.completed {
  color: var(--success, #10b981);
}

.dp-step-number {
  width: 24px;
  height: 24px;
  border-radius: 50%;
  background: var(--bg, #fff);
  border: 2px solid currentColor;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 0.75rem;
  font-weight: 600;
}

.dp-step.active .dp-step-number {
  background: var(--accent, #3b82f6);
  color: #fff;
  border-color: var(--accent, #3b82f6);
}

.dp-step.completed .dp-step-number {
  background: var(--success, #10b981);
  color: #fff;
  border-color: var(--success, #10b981);
}

.dp-step-label {
  font-size: 0.875rem;
  font-weight: 500;
}

.dp-step-line {
  width: 60px;
  height: 2px;
  background: var(--border, #e5e7eb);
  margin: 0 16px;
}

.dp-step-line.active {
  background: var(--success, #10b981);
}

/* Modal Body */
.dp-modal-body {
  padding: 20px;
  overflow-y: auto;
  flex: 1;
}

.dp-modal-section {
  display: flex;
  flex-direction: column;
  gap: 20px;
}

.dp-modal-section-title {
  margin: 0;
  font-size: 1rem;
  font-weight: 600;
  color: var(--text, #1f2937);
}

.dp-modal-section-desc {
  margin: -12px 0 0;
  font-size: 0.85rem;
  color: var(--text-muted, #6b7280);
}

/* Form Groups */
.dp-form-group {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.dp-form-label {
  font-size: 0.8rem;
  font-weight: 600;
  color: var(--text, #1f2937);
}

.dp-form-input,
.dp-form-textarea,
.dp-form-select {
  padding: 10px 12px;
  border: 1px solid var(--border, #e5e7eb);
  border-radius: 6px;
  font-size: 0.875rem;
  color: var(--text, #1f2937);
  background: var(--bg, #fff);
  transition: border-color 0.15s;
}

.dp-form-input:focus,
.dp-form-textarea:focus,
.dp-form-select:focus {
  outline: none;
  border-color: var(--accent, #3b82f6);
  box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.1);
}

.dp-form-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
}

/* Radio Cards */
.dp-radio-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 10px;
}

.dp-radio-card {
  position: relative;
  cursor: pointer;
}

.dp-radio-card input {
  position: absolute;
  opacity: 0;
}

.dp-radio-card-content {
  padding: 14px;
  border: 2px solid var(--border, #e5e7eb);
  border-radius: 8px;
  text-align: center;
  transition: all 0.15s;
}

.dp-radio-card:hover .dp-radio-card-content {
  border-color: var(--accent, #3b82f6);
}

.dp-radio-card.selected .dp-radio-card-content {
  border-color: var(--accent, #3b82f6);
  background: rgba(59, 130, 246, 0.05);
}

.dp-radio-card-title {
  display: block;
  font-weight: 600;
  font-size: 0.875rem;
  color: var(--text, #1f2937);
  margin-bottom: 4px;
}

.dp-radio-card-range {
  display: block;
  font-size: 0.75rem;
  color: var(--accent, #3b82f6);
  margin-bottom: 4px;
}

.dp-radio-card-desc {
  display: block;
  font-size: 0.7rem;
  color: var(--text-muted, #9ca3af);
}

/* Radio List */
.dp-radio-list {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.dp-radio-item-lg {
  position: relative;
  cursor: pointer;
}

.dp-radio-item-lg input {
  position: absolute;
  opacity: 0;
}

.dp-radio-item-content {
  padding: 12px 14px;
  border: 2px solid var(--border, #e5e7eb);
  border-radius: 8px;
  transition: all 0.15s;
}

.dp-radio-item-lg:hover .dp-radio-item-content {
  border-color: var(--accent, #3b82f6);
}

.dp-radio-item-lg.selected .dp-radio-item-content {
  border-color: var(--accent, #3b82f6);
  background: rgba(59, 130, 246, 0.05);
}

.dp-radio-item-title {
  display: flex;
  align-items: center;
  gap: 8px;
  font-weight: 500;
  font-size: 0.875rem;
  color: var(--text, #1f2937);
}

.dp-radio-item-desc {
  display: block;
  font-size: 0.75rem;
  color: var(--text-muted, #9ca3af);
  margin-top: 2px;
}

/* Slider Group */
.dp-slider-group {
  display: flex;
  align-items: center;
  gap: 16px;
}

.dp-slider {
  flex: 1;
  height: 6px;
  border-radius: 3px;
  background: var(--bg-secondary, #e5e7eb);
  appearance: none;
  cursor: pointer;
}

.dp-slider::-webkit-slider-thumb {
  appearance: none;
  width: 18px;
  height: 18px;
  border-radius: 50%;
  background: var(--accent, #3b82f6);
  cursor: pointer;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
}

.dp-slider-value {
  display: flex;
  align-items: baseline;
  gap: 4px;
  font-size: 0.875rem;
  color: var(--text, #1f2937);
  min-width: 120px;
}

.dp-slider-value span:first-child {
  font-weight: 600;
  font-size: 1.25rem;
  color: var(--accent, #3b82f6);
}

/* Features List */
.dp-features-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding-bottom: 12px;
  border-bottom: 1px solid var(--border, #e5e7eb);
}

.dp-select-all {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 0.85rem;
  color: var(--text, #1f2937);
  cursor: pointer;
}

.dp-features-summary {
  font-size: 0.75rem;
  color: var(--text-muted, #6b7280);
}

.dp-features-scroll {
  max-height: 300px;
  overflow-y: auto;
  margin-top: 12px;
}

.dp-feature-row {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 10px 12px;
  border-radius: 6px;
  cursor: pointer;
  transition: background 0.15s;
  opacity: 0.6;
}

.dp-feature-row:hover {
  background: var(--bg-secondary, #f9fafb);
}

.dp-feature-row.enabled {
  opacity: 1;
}

.dp-feature-checkbox {
  flex-shrink: 0;
}

.dp-feature-name {
  flex: 1;
  font-size: 0.875rem;
  color: var(--text, #1f2937);
}

.dp-feature-category {
  flex-shrink: 0;
}

.dp-feature-tasks {
  flex-shrink: 0;
  font-size: 0.75rem;
  color: var(--text-muted, #6b7280);
  min-width: 60px;
  text-align: right;
}

/* Modal Footer */
.dp-modal-footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 16px 20px;
  border-top: 1px solid var(--border, #e5e7eb);
}

/* Edit Form */
.dp-edit-form {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

/* Responsive */
@media (max-width: 768px) {
  .dp-header-bar {
    flex-direction: column;
    align-items: flex-start;
    gap: 12px;
  }

  .dp-header-right {
    width: 100%;
    flex-wrap: wrap;
  }

  .dp-radio-grid {
    grid-template-columns: 1fr;
  }

  .dp-form-row {
    grid-template-columns: 1fr;
  }

  .dp-tree-table {
    min-width: 100%;
  }

  .dp-col-complexity,
  .dp-col-layer,
  .dp-col-tags {
    display: none;
  }
}

/* Task Details Drawer */
.dp-drawer-overlay {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: rgba(0, 0, 0, 0.4);
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.25s ease, visibility 0.25s ease;
  z-index: 1098;
}

.dp-drawer-overlay.open {
  opacity: 1;
  visibility: visible;
}

.dp-drawer {
  position: fixed;
  top: 0;
  right: 0;
  width: 480px;
  max-width: 90vw;
  height: 100vh;
  background: var(--bg-primary, #ffffff);
  box-shadow: -4px 0 24px rgba(0, 0, 0, 0.15);
  transform: translateX(100%);
  transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  z-index: 1099;
  display: flex;
  flex-direction: column;
}

.dp-drawer.open {
  transform: translateX(0);
}

.dp-drawer-header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  padding: 20px 24px;
  border-bottom: 1px solid var(--border-primary, #e5e7eb);
  background: var(--bg-secondary, #f9fafb);
}

.dp-drawer-title-row {
  display: flex;
  flex-direction: column;
  gap: 6px;
  flex: 1;
  min-width: 0;
}

.dp-drawer-task-id {
  display: inline-flex;
  align-items: center;
  font-size: 0.7rem;
  font-weight: 600;
  color: #6b7280;
  background: #e5e7eb;
  padding: 2px 8px;
  border-radius: 4px;
  width: fit-content;
  font-family: 'Fira Code', 'SF Mono', 'Monaco', monospace;
}

.dp-drawer-title {
  font-size: 1.125rem;
  font-weight: 600;
  color: var(--text-primary);
  margin: 0;
  line-height: 1.3;
}

.dp-drawer-close {
  background: none;
  border: none;
  width: 32px;
  height: 32px;
  border-radius: 6px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--text-secondary);
  cursor: pointer;
  transition: all 0.15s ease;
  flex-shrink: 0;
}

.dp-drawer-close:hover {
  background: var(--bg-tertiary, #e5e7eb);
  color: var(--text-primary);
}

.dp-drawer-body {
  flex: 1;
  overflow-y: auto;
  padding: 20px 24px;
}

.dp-drawer-breadcrumb {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 6px;
  margin-bottom: 20px;
  padding: 10px 12px;
  background: var(--bg-secondary, #f9fafb);
  border-radius: 8px;
  font-size: 0.75rem;
}

.dp-breadcrumb-item {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  color: var(--text-secondary);
}

.dp-breadcrumb-item i {
  font-size: 0.7rem;
  opacity: 0.7;
}

.dp-breadcrumb-separator {
  color: #d1d5db;
  font-size: 0.65rem;
}

.dp-drawer-section {
  margin-bottom: 24px;
}

.dp-drawer-section:last-child {
  margin-bottom: 0;
}

.dp-drawer-section-title {
  font-size: 0.75rem;
  font-weight: 600;
  color: var(--text-secondary);
  text-transform: uppercase;
  letter-spacing: 0.5px;
  margin: 0 0 12px 0;
  display: flex;
  align-items: center;
  gap: 6px;
}

.dp-drawer-count {
  font-weight: 400;
  color: #9ca3af;
}

.dp-drawer-status-row {
  display: flex;
  align-items: center;
  gap: 12px;
}

.dp-status-lg {
  padding: 8px 14px;
  font-size: 0.85rem;
  font-weight: 500;
  border-radius: 8px;
  display: inline-flex;
  align-items: center;
  gap: 8px;
}

.dp-status-sm {
  padding: 2px 8px;
  font-size: 0.7rem;
  border-radius: 4px;
}

.dp-drawer-description {
  font-size: 0.875rem;
  color: var(--text-primary);
  line-height: 1.6;
  margin: 0;
}

.dp-drawer-empty {
  color: #9ca3af;
  font-style: italic;
}

.dp-drawer-props-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
  gap: 16px;
}

.dp-drawer-prop {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.dp-drawer-prop-label {
  font-size: 0.7rem;
  font-weight: 500;
  color: var(--text-secondary);
  text-transform: uppercase;
  letter-spacing: 0.3px;
}

.dp-drawer-prop-value {
  font-size: 0.875rem;
  color: var(--text-primary);
  font-weight: 500;
}

.dp-drawer-deps-list {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.dp-drawer-dep-item {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 12px;
  background: var(--bg-secondary, #f9fafb);
  border-radius: 8px;
  border: 1px solid var(--border-primary, #e5e7eb);
}

.dp-drawer-dep-id {
  font-size: 0.7rem;
  font-weight: 600;
  color: #6b7280;
  background: #e5e7eb;
  padding: 2px 6px;
  border-radius: 4px;
  font-family: 'Fira Code', 'SF Mono', 'Monaco', monospace;
}

.dp-drawer-dep-name {
  flex: 1;
  font-size: 0.8rem;
  color: var(--text-primary);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.dp-drawer-footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 16px 24px;
  border-top: 1px solid var(--border-primary, #e5e7eb);
  background: var(--bg-secondary, #f9fafb);
  gap: 12px;
}

/* Make task rows clickable */
.dp-tree-row-task {
  cursor: pointer;
}

.dp-tree-row-task:hover {
  background: rgba(59, 130, 246, 0.08);
}

@media (max-width: 640px) {
  .dp-drawer {
    width: 100%;
    max-width: 100%;
  }

  .dp-drawer-props-grid {
    grid-template-columns: 1fr 1fr;
  }

  .dp-drawer-footer {
    flex-direction: column;
  }

  .dp-drawer-footer .btn {
    width: 100%;
  }
}

/* ============================================
   Drawer Assignee Section
   ============================================ */

.dp-drawer-assignee {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 12px;
  background: var(--bg-secondary, #f9fafb);
  border: 1px solid var(--border, #e5e7eb);
  border-radius: 8px;
}

.dp-drawer-assignee-info {
  display: flex;
  align-items: center;
  gap: 12px;
}

.dp-drawer-assignee-avatar {
  width: 40px;
  height: 40px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--primary-light, #eff6ff);
  color: var(--primary, #3b82f6);
  border-radius: 50%;
  font-size: 1rem;
}

.dp-drawer-assignee-details {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.dp-drawer-assignee-name {
  font-weight: 500;
  color: var(--text, #1f2937);
}

.dp-drawer-assignee-type {
  font-size: 0.75rem;
  color: var(--text-muted, #6b7280);
}

.dp-drawer-assignee-empty {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;
  padding: 16px;
  background: var(--bg-secondary, #f9fafb);
  border: 1px dashed var(--border, #e5e7eb);
  border-radius: 8px;
  text-align: center;
}

/* ============================================
   Assign Modal Styles
   ============================================ */

.dp-assign-form {
  display: flex;
  flex-direction: column;
  gap: 20px;
}

.dp-assign-type-toggle {
  display: flex;
  gap: 12px;
}

.dp-assign-type-option {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  padding: 16px;
  background: var(--bg, #fff);
  border: 2px solid var(--border, #e5e7eb);
  border-radius: 8px;
  cursor: pointer;
  transition: all 0.15s;
}

.dp-assign-type-option:hover {
  border-color: var(--primary-light, #bfdbfe);
  background: var(--primary-light, #eff6ff);
}

.dp-assign-type-option.selected {
  border-color: var(--primary, #3b82f6);
  background: var(--primary-light, #eff6ff);
}

.dp-assign-type-option input {
  display: none;
}

.dp-assign-type-option i {
  font-size: 1.5rem;
  color: var(--text-muted, #6b7280);
}

.dp-assign-type-option.selected i {
  color: var(--primary, #3b82f6);
}

.dp-assign-type-option span {
  font-size: 0.875rem;
  font-weight: 500;
  color: var(--text, #1f2937);
}

.dp-assign-search {
  position: relative;
  margin-bottom: 12px;
}

.dp-assign-search i {
  position: absolute;
  left: 12px;
  top: 50%;
  transform: translateY(-50%);
  color: var(--text-muted, #9ca3af);
  font-size: 0.875rem;
}

.dp-assign-search-input {
  width: 100%;
  padding: 10px 12px 10px 36px;
  font-size: 0.875rem;
  border: 1px solid var(--border, #e5e7eb);
  border-radius: 6px;
  background: var(--bg, #fff);
  color: var(--text, #1f2937);
  transition: border-color 0.15s, box-shadow 0.15s;
}

.dp-assign-search-input:focus {
  outline: none;
  border-color: var(--primary, #3b82f6);
  box-shadow: 0 0 0 3px var(--primary-light, rgba(59, 130, 246, 0.1));
}

.dp-assign-search-input::placeholder {
  color: var(--text-muted, #9ca3af);
}

.dp-assign-list {
  display: flex;
  flex-direction: column;
  gap: 8px;
  max-height: 250px;
  overflow-y: auto;
}

.dp-assign-option {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px;
  background: var(--bg, #fff);
  border: 1px solid var(--border, #e5e7eb);
  border-radius: 8px;
  cursor: pointer;
  transition: all 0.15s;
}

.dp-assign-option:hover {
  border-color: var(--primary-light, #bfdbfe);
  background: var(--bg-secondary, #f9fafb);
}

.dp-assign-option.selected {
  border-color: var(--primary, #3b82f6);
  background: var(--primary-light, #eff6ff);
}

.dp-assign-option input {
  display: none;
}

.dp-assign-option-avatar {
  width: 36px;
  height: 36px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--bg-secondary, #f3f4f6);
  color: var(--text-muted, #6b7280);
  border-radius: 50%;
  font-size: 0.875rem;
}

.dp-assign-option.selected .dp-assign-option-avatar {
  background: var(--primary, #3b82f6);
  color: white;
}

.dp-assign-option-avatar-agent {
  background: var(--info-light, #dbeafe);
  color: var(--info, #2563eb);
}

.dp-assign-option.selected .dp-assign-option-avatar-agent {
  background: var(--info, #2563eb);
  color: white;
}

.dp-assign-option-info {
  display: flex;
  flex-direction: column;
  gap: 2px;
  flex: 1;
}

.dp-assign-option-name {
  font-weight: 500;
  color: var(--text, #1f2937);
}

.dp-assign-option-role {
  font-size: 0.75rem;
  color: var(--text-muted, #6b7280);
}

.dp-assign-empty {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;
  padding: 24px;
  background: var(--bg-secondary, #f9fafb);
  border: 1px dashed var(--border, #e5e7eb);
  border-radius: 8px;
  text-align: center;
}

.dp-assign-empty i {
  font-size: 2rem;
  color: var(--text-muted, #9ca3af);
}

.dp-assign-empty p {
  margin: 0;
  color: var(--text-muted, #6b7280);
}

.dp-assign-empty-link {
  color: var(--primary, #3b82f6);
  text-decoration: none;
  font-weight: 500;
}

.dp-assign-empty-link:hover {
  text-decoration: underline;
}

.dp-unassign-btn {
  color: var(--danger, #ef4444) !important;
}

.dp-unassign-btn:hover {
  background: var(--danger-light, #fef2f2) !important;
}

/* ============================================
   Development Nodes / Agent Swarm Dashboard Styles
   ============================================ */

.dn-container {
  max-width: 1400px;
  margin: 0 auto;
}

.dn-swarm-status {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 0.75rem;
  color: #10b981;
  padding: 4px 10px;
  background: rgba(16, 185, 129, 0.1);
  border-radius: 12px;
}

/* Status Grid */
.dn-status-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: 16px;
  margin-bottom: 24px;
}

.dn-status-card {
  background: var(--bg-secondary, #f8f9fa);
  border: 1px solid var(--border-primary, #e5e7eb);
  border-radius: 12px;
  padding: 16px 20px;
  display: flex;
  align-items: center;
  gap: 14px;
}

.dn-status-icon {
  width: 44px;
  height: 44px;
  border-radius: 10px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1rem;
}

.dn-status-info {
  display: flex;
  flex-direction: column;
}

.dn-status-value {
  font-size: 1.5rem;
  font-weight: 700;
  color: var(--text-primary);
  line-height: 1;
}

.dn-status-label {
  font-size: 0.75rem;
  color: var(--text-secondary);
  margin-top: 4px;
}

/* Filter Select */
.dn-filter-select {
  padding: 6px 12px;
  border: 1px solid var(--border-primary, #e5e7eb);
  border-radius: 6px;
  font-size: 0.8rem;
  color: var(--text-primary);
  background: var(--bg-primary, #fff);
  cursor: pointer;
}

/* Agents Grid */
.dn-agents-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
  gap: 20px;
}

/* Agent Card */
.dn-agent-card {
  background: var(--bg-primary, #fff);
  border: 1px solid var(--border-primary, #e5e7eb);
  border-radius: 12px;
  padding: 20px;
  transition: all 0.2s ease;
}

.dn-agent-card:hover {
  border-color: var(--accent-primary, #3b82f6);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
}

.dn-agent-header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  margin-bottom: 16px;
}

.dn-agent-icon {
  width: 48px;
  height: 48px;
  border-radius: 12px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.25rem;
}

.dn-agent-status {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 4px 10px;
  border-radius: 16px;
  font-size: 0.7rem;
  font-weight: 500;
}

.dn-agent-status i {
  font-size: 0.5rem;
}

.dn-agent-info {
  margin-bottom: 12px;
}

.dn-agent-name {
  margin: 0 0 4px 0;
  font-size: 1rem;
  font-weight: 600;
  color: var(--text-primary);
}

.dn-agent-type {
  margin: 0;
  font-size: 0.75rem;
  color: var(--text-secondary);
}

/* Agent Task */
.dn-agent-task {
  background: var(--bg-secondary, #f8f9fa);
  border-radius: 8px;
  padding: 12px;
  margin-bottom: 12px;
}

.dn-task-label {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 0.7rem;
  color: var(--text-tertiary);
  margin-bottom: 6px;
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

.dn-task-desc {
  margin: 0;
  font-size: 0.8rem;
  color: var(--text-primary);
  line-height: 1.4;
}

/* Capabilities */
.dn-agent-capabilities {
  margin-bottom: 12px;
}

.dn-caps-label {
  font-size: 0.7rem;
  color: var(--text-tertiary);
  text-transform: uppercase;
  letter-spacing: 0.5px;
  margin-bottom: 8px;
}

.dn-caps-list {
  display: flex;
  gap: 6px;
  flex-wrap: wrap;
}

.dn-cap-chip {
  width: 28px;
  height: 28px;
  border-radius: 6px;
  background: var(--bg-secondary, #f8f9fa);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 0.75rem;
  color: var(--text-secondary);
}

.dn-cap-more {
  width: 28px;
  height: 28px;
  border-radius: 6px;
  background: var(--bg-secondary, #f8f9fa);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 0.65rem;
  color: var(--text-tertiary);
}

/* Agent Stats */
.dn-agent-stats {
  display: flex;
  gap: 16px;
  padding-top: 12px;
  border-top: 1px solid var(--border-secondary, #f0f0f0);
  margin-bottom: 12px;
}

.dn-stat {
  display: flex;
  align-items: baseline;
  gap: 4px;
}

.dn-stat-value {
  font-size: 0.85rem;
  font-weight: 600;
  color: var(--text-primary);
}

.dn-stat-label {
  font-size: 0.7rem;
  color: var(--text-tertiary);
}

/* Agent Actions */
.dn-agent-actions {
  display: flex;
  gap: 8px;
}

.dn-agent-actions .btn {
  flex: 1;
}

.dn-agent-actions .btn:last-child {
  flex: 0;
}

/* Activity Log */
.dn-activity-panel {
  margin-top: 24px;
}

.dn-no-activity {
  text-align: center;
  padding: 32px;
  color: var(--text-tertiary);
}

.dn-no-activity i {
  font-size: 2rem;
  margin-bottom: 12px;
  opacity: 0.5;
}

.dn-no-activity p {
  margin: 0;
  font-size: 0.85rem;
}

.dn-activity-list {
  display: flex;
  flex-direction: column;
  gap: 12px;
  max-height: 400px;
  overflow-y: auto;
}

.dn-activity-item {
  display: flex;
  gap: 12px;
  padding: 12px;
  background: var(--bg-secondary, #f8f9fa);
  border-radius: 8px;
}

.dn-activity-icon {
  width: 32px;
  height: 32px;
  border-radius: 8px;
  background: var(--bg-primary, #fff);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 0.75rem;
  color: var(--text-secondary);
  flex-shrink: 0;
}

.dn-activity-content {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.dn-activity-text {
  font-size: 0.8rem;
  color: var(--text-primary);
}

.dn-activity-time {
  font-size: 0.7rem;
  color: var(--text-tertiary);
}

/* Modal */
.dn-modal-overlay {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: rgba(0, 0, 0, 0.5);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 1000;
  padding: 20px;
}

.dn-modal {
  background: var(--bg-primary, #fff);
  border-radius: 16px;
  width: 100%;
  max-width: 560px;
  max-height: 90vh;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  box-shadow: 0 20px 60px rgba(0, 0, 0, 0.2);
}

.dn-modal-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 20px 24px;
  border-bottom: 1px solid var(--border-primary, #e5e7eb);
}

.dn-modal-header h3 {
  margin: 0;
  font-size: 1.1rem;
  font-weight: 600;
  color: var(--text-primary);
  display: flex;
  align-items: center;
  gap: 10px;
}

.dn-modal-close {
  width: 32px;
  height: 32px;
  border: none;
  background: transparent;
  border-radius: 8px;
  cursor: pointer;
  color: var(--text-secondary);
  display: flex;
  align-items: center;
  justify-content: center;
}

.dn-modal-close:hover {
  background: var(--bg-secondary, #f8f9fa);
  color: var(--text-primary);
}

.dn-modal-body {
  padding: 24px;
  overflow-y: auto;
  flex: 1;
}

.dn-modal-footer {
  display: flex;
  gap: 12px;
  justify-content: flex-end;
  padding: 16px 24px;
  border-top: 1px solid var(--border-primary, #e5e7eb);
}

/* Form Elements */
.dn-form-group {
  margin-bottom: 20px;
}

.dn-form-group:last-child {
  margin-bottom: 0;
}

.dn-form-group label {
  display: block;
  font-size: 0.8rem;
  font-weight: 600;
  color: var(--text-primary);
  margin-bottom: 8px;
}

.dn-input,
.dn-textarea,
.dn-select {
  width: 100%;
  padding: 10px 14px;
  border: 1px solid var(--border-primary, #e5e7eb);
  border-radius: 8px;
  font-size: 0.875rem;
  color: var(--text-primary);
  background: var(--bg-primary, #fff);
  transition: border-color 0.2s;
}

.dn-input:focus,
.dn-textarea:focus,
.dn-select:focus {
  outline: none;
  border-color: var(--accent-primary, #3b82f6);
  box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.1);
}

.dn-textarea {
  resize: vertical;
  min-height: 60px;
}

/* Type Selection Grid */
.dn-type-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(160px, 1fr));
  gap: 10px;
}

.dn-type-option {
  position: relative;
  cursor: pointer;
}

.dn-type-option input {
  position: absolute;
  opacity: 0;
  width: 0;
  height: 0;
}

.dn-type-content {
  padding: 14px;
  border: 2px solid var(--border-primary, #e5e7eb);
  border-radius: 10px;
  background: var(--bg-primary, #fff);
  text-align: center;
  transition: all 0.2s;
}

.dn-type-option:hover .dn-type-content {
  border-color: var(--accent-primary, #3b82f6);
}

.dn-type-option.selected .dn-type-content {
  border-color: var(--accent-primary, #3b82f6);
  background: rgba(59, 130, 246, 0.05);
}

.dn-type-content i {
  font-size: 1.5rem;
  margin-bottom: 8px;
  display: block;
}

.dn-type-label {
  display: block;
  font-size: 0.8rem;
  font-weight: 600;
  color: var(--text-primary);
  margin-bottom: 4px;
}

.dn-type-desc {
  display: block;
  font-size: 0.65rem;
  color: var(--text-tertiary);
}

/* Capabilities Grid */
.dn-caps-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
  gap: 8px;
}

.dn-cap-option {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 10px 12px;
  border: 1px solid var(--border-primary, #e5e7eb);
  border-radius: 8px;
  cursor: pointer;
  transition: all 0.2s;
  font-size: 0.8rem;
  color: var(--text-secondary);
}

.dn-cap-option input {
  display: none;
}

.dn-cap-option:hover {
  border-color: var(--accent-primary, #3b82f6);
}

.dn-cap-option.selected {
  border-color: var(--accent-primary, #3b82f6);
  background: rgba(59, 130, 246, 0.05);
  color: var(--accent-primary, #3b82f6);
}

.dn-cap-option i {
  font-size: 0.9rem;
}

/* Responsive */
@media (max-width: 768px) {
  .dn-status-grid {
    grid-template-columns: repeat(2, 1fr);
  }

  .dn-agents-grid {
    grid-template-columns: 1fr;
  }

  .dn-type-grid {
    grid-template-columns: repeat(2, 1fr);
  }

  .dn-caps-grid {
    grid-template-columns: repeat(2, 1fr);
  }

  .dn-modal {
    max-height: 80vh;
  }
}

/* ==================== CLI Authorize Page ==================== */

.cli-authorize-page {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  background: linear-gradient(135deg, #f5f7fa 0%, #e4e8ec 100%);
  z-index: 10000;
  padding: 20px;
}

.cli-auth-card {
  background: #fff;
  border-radius: 16px;
  box-shadow: 0 10px 40px rgba(0, 0, 0, 0.12);
  max-width: 460px;
  width: 100%;
  overflow: hidden;
}

.cli-auth-logo-img {
  height: 36px;
  width: auto;
}

.cli-auth-card-header {
  background: #fff;
  padding: 20px 24px;
  display: flex;
  align-items: center;
  gap: 16px;
  border-bottom: 1px solid var(--border-color, #e5e7eb);
}

.cli-auth-header-content {
  display: flex;
  align-items: center;
  gap: 10px;
}

.cli-auth-header-icon {
  font-size: 22px;
  color: var(--primary-color, #2d2b87);
}

.cli-auth-title {
  margin: 0;
  font-size: 1.25rem;
  font-weight: 600;
  color: var(--primary-color, #2d2b87);
}

.cli-auth-card-body {
  padding: 24px;
}

.cli-auth-card-body.cli-auth-centered {
  text-align: center;
  padding: 40px 24px;
}

.cli-auth-description {
  color: var(--text-secondary, #6b7280);
  margin: 0 0 20px;
  text-align: center;
  line-height: 1.5;
}

/* Device Code Display */
.cli-auth-code-box {
  background: #f3f4f6;
  border-radius: 12px;
  padding: 16px;
  text-align: center;
  margin-bottom: 20px;
}

.cli-auth-code-label {
  display: block;
  font-size: 0.75rem;
  color: var(--text-secondary, #6b7280);
  text-transform: uppercase;
  letter-spacing: 0.5px;
  margin-bottom: 8px;
}

.cli-auth-code {
  display: block;
  font-family: 'SF Mono', Monaco, 'Cascadia Code', Consolas, monospace;
  font-size: 1.6rem;
  font-weight: 700;
  color: var(--text-primary, #1f2937);
  letter-spacing: 2px;
}

/* Device Details */
.cli-auth-details {
  border: 1px solid var(--border-color, #e5e7eb);
  border-radius: 12px;
  overflow: hidden;
  margin-bottom: 16px;
}

.cli-auth-detail-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 12px 16px;
  border-bottom: 1px solid var(--border-color, #e5e7eb);
}

.cli-auth-detail-row:last-child {
  border-bottom: none;
}

.cli-auth-detail-label {
  color: var(--text-secondary, #6b7280);
  font-size: 0.875rem;
}

.cli-auth-detail-value {
  font-weight: 500;
  color: var(--text-primary, #1f2937);
  font-size: 0.875rem;
  display: flex;
  align-items: center;
  gap: 6px;
}

.cli-auth-detail-value i {
  font-size: 1rem;
}

.cli-auth-mono {
  font-family: 'SF Mono', Monaco, 'Cascadia Code', Consolas, monospace;
}

/* Account Context */
.cli-auth-account-context {
  background: rgba(45, 43, 135, 0.06);
  border: 1px solid rgba(45, 43, 135, 0.15);
  border-radius: 8px;
  padding: 12px 16px;
  margin-bottom: 16px;
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 0.875rem;
  color: var(--primary-color, #2d2b87);
}

.cli-auth-account-context i {
  font-size: 1rem;
}

/* Timer */
.cli-auth-timer-container {
  text-align: center;
  margin-bottom: 16px;
  font-size: 0.875rem;
  color: var(--text-secondary, #6b7280);
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
}

.cli-auth-timer {
  font-family: 'SF Mono', Monaco, 'Cascadia Code', Consolas, monospace;
  font-weight: 600;
  color: var(--text-primary, #1f2937);
}

.cli-auth-timer.cli-auth-timer-urgent {
  color: var(--danger, #ef4444);
}

/* Security Warning */
.cli-auth-warning {
  background: #fffbeb;
  border: 1px solid #fcd34d;
  border-radius: 10px;
  padding: 14px;
  margin-bottom: 20px;
  display: flex;
  gap: 12px;
}

.cli-auth-warning-icon {
  color: #f59e0b;
  font-size: 1.1rem;
  flex-shrink: 0;
  margin-top: 2px;
}

.cli-auth-warning-content {
  font-size: 0.8rem;
  color: #92400e;
  line-height: 1.4;
}

.cli-auth-warning-content strong {
  display: block;
  margin-bottom: 4px;
  font-weight: 600;
}

.cli-auth-warning-content p {
  margin: 0;
}

/* Action Buttons */
.cli-auth-actions {
  display: flex;
  gap: 12px;
}

.cli-auth-btn-secondary,
.cli-auth-btn-primary {
  flex: 1;
  padding: 14px 20px;
  border-radius: 10px;
  font-size: 0.95rem;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.2s ease;
  border: none;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
}

.cli-auth-btn-secondary {
  background: #fff;
  border: 1px solid var(--border-color, #d1d5db);
  color: var(--text-primary, #374151);
}

.cli-auth-btn-secondary:hover {
  background: #f9fafb;
  border-color: #9ca3af;
}

.cli-auth-btn-primary {
  background: var(--primary-color, #2d2b87);
  color: #fff;
}

.cli-auth-btn-primary:hover {
  background: var(--primary-hover, #3d3ba0);
}

.cli-auth-btn-secondary:disabled,
.cli-auth-btn-primary:disabled {
  opacity: 0.6;
  cursor: not-allowed;
}

/* Status States */
.cli-auth-status-icon {
  width: 72px;
  height: 72px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0 auto 20px;
  font-size: 32px;
}

.cli-auth-status-success {
  background: #d1fae5;
  color: #059669;
}

.cli-auth-status-denied {
  background: #fee2e2;
  color: #dc2626;
}

.cli-auth-status-expired {
  background: #fef3c7;
  color: #d97706;
}

.cli-auth-status-notfound {
  background: #f3f4f6;
  color: #6b7280;
}

.cli-auth-status-error {
  background: #fee2e2;
  color: #dc2626;
}

.cli-auth-status-title {
  margin: 0 0 12px;
  font-size: 1.3rem;
  font-weight: 600;
  color: var(--text-primary, #1f2937);
}

.cli-auth-status-text {
  margin: 0 0 8px;
  color: var(--text-secondary, #6b7280);
  line-height: 1.5;
  font-size: 0.95rem;
}

.cli-auth-status-text code {
  background: #f3f4f6;
  padding: 2px 8px;
  border-radius: 4px;
  font-family: 'SF Mono', Monaco, 'Cascadia Code', Consolas, monospace;
  font-size: 0.85em;
}

.cli-auth-status-hint {
  margin: 0;
  color: var(--text-tertiary, #9ca3af);
  font-size: 0.85rem;
}

.cli-auth-timestamp {
  display: block;
  margin-top: 8px;
  font-size: 0.8rem;
  color: var(--text-tertiary, #9ca3af);
}

/* Loading Spinner */
.cli-auth-spinner {
  width: 48px;
  height: 48px;
  border: 4px solid #e5e7eb;
  border-top-color: var(--primary-color, #2d2b87);
  border-radius: 50%;
  animation: cli-auth-spin 0.8s linear infinite;
  margin: 0 auto 20px;
}

@keyframes cli-auth-spin {
  to {
    transform: rotate(360deg);
  }
}

.cli-auth-text {
  color: var(--text-secondary, #6b7280);
  font-size: 0.95rem;
  margin: 0;
}

/* Responsive */
@media (max-width: 480px) {
  .cli-authorize-page {
    padding: 16px;
  }

  .cli-auth-card-header {
    padding: 20px 16px;
  }

  .cli-auth-card-body {
    padding: 20px 16px;
  }

  .cli-auth-code {
    font-size: 1.3rem;
  }

  .cli-auth-actions {
    flex-direction: column;
  }

  .cli-auth-btn-secondary,
  .cli-auth-btn-primary {
    padding: 12px 16px;
  }
}

/* ============================================
   TEST STRATEGY (.ts- prefix)
   ============================================ */

.ts-container {
  width: 100%;
  max-width: 100%;
  padding: 0;
}

.ts-loading {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 60px 20px;
  gap: 16px;
}

.ts-loading p {
  color: var(--text-muted);
  font-size: 0.95rem;
}

/* Header */
.ts-header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  padding: 20px 24px;
  border-bottom: 1px solid var(--border-color);
  background: var(--panel-bg);
  border-radius: var(--radius) var(--radius) 0 0;
  gap: 16px;
  flex-wrap: wrap;
}

.ts-header-left {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.ts-title {
  font-size: 1.4rem;
  font-weight: 700;
  color: var(--text-color);
  margin: 0;
  display: flex;
  align-items: center;
  gap: 10px;
}

.ts-title i {
  color: var(--primary);
  font-size: 1.2rem;
}

.ts-version-badge {
  font-size: 0.7rem;
  padding: 2px 8px;
  border-radius: 10px;
  background: var(--primary);
  color: #fff;
  font-weight: 600;
}

.ts-meta {
  display: flex;
  align-items: center;
  gap: 12px;
  flex-wrap: wrap;
}

.ts-status-badge {
  font-size: 0.75rem;
  padding: 3px 10px;
  border-radius: 12px;
  font-weight: 600;
}

.ts-timestamp {
  font-size: 0.8rem;
  color: var(--text-muted);
  display: flex;
  align-items: center;
  gap: 4px;
}

.ts-save-indicator {
  font-size: 0.8rem;
  color: var(--success);
  display: inline-flex;
  align-items: center;
  gap: 4px;
  animation: tsFadeIn 0.3s ease;
}

@keyframes tsFadeIn {
  from { opacity: 0; }
  to { opacity: 1; }
}

.ts-header-right {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
}

.ts-status-select {
  width: auto;
  min-width: 120px;
  padding: 6px 10px;
  font-size: 0.85rem;
}

/* Sections */
.ts-sections {
  display: flex;
  flex-direction: column;
  gap: 0;
}

.ts-section {
  border: 1px solid var(--border-color);
  border-top: none;
  background: var(--panel-bg);
}

.ts-section:first-child {
  border-top: 1px solid var(--border-color);
}

.ts-section:last-child {
  border-radius: 0 0 var(--radius) var(--radius);
}

.ts-section-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 14px 20px;
  cursor: pointer;
  user-select: none;
  transition: background 0.15s;
}

.ts-section-header:hover {
  background: var(--bg-color);
}

.ts-section-header-left {
  display: flex;
  align-items: center;
  gap: 10px;
}

.ts-section-header-left h2 {
  font-size: 1rem;
  font-weight: 600;
  margin: 0;
  color: var(--text-color);
}

.ts-section-header-left i {
  color: var(--text-muted);
  font-size: 0.85rem;
}

.ts-collapse-icon {
  font-size: 0.7rem !important;
  width: 14px;
  transition: transform 0.15s;
}

.ts-section-body {
  padding: 16px 20px 20px;
  border-top: 1px solid var(--border-color);
}

/* Textarea */
.ts-textarea {
  min-height: 120px;
  resize: vertical;
  font-family: inherit;
  line-height: 1.6;
}

/* Hint text */
.ts-hint {
  font-size: 0.82rem;
  color: var(--text-muted);
  margin: 0 0 12px;
}

/* Tables */
.ts-table-responsive {
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}

.ts-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.88rem;
}

.ts-table th {
  text-align: left;
  padding: 10px 12px;
  font-weight: 600;
  font-size: 0.8rem;
  color: var(--text-muted);
  text-transform: uppercase;
  letter-spacing: 0.5px;
  border-bottom: 2px solid var(--border-color);
  white-space: nowrap;
}

.ts-table td {
  padding: 8px 12px;
  border-bottom: 1px solid var(--border-color);
  vertical-align: middle;
}

.ts-table td .formInput {
  margin: 0;
  font-size: 0.85rem;
}

.ts-table td:last-child {
  width: 40px;
  text-align: center;
}

/* Mobile cards (hidden on desktop) */
.ts-cards-mobile {
  display: none;
}

.ts-card-item {
  border: 1px solid var(--border-color);
  border-radius: var(--radius);
  padding: 14px;
  margin-bottom: 10px;
  background: var(--bg-color);
}

.ts-card-item-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 10px;
  padding-bottom: 8px;
  border-bottom: 1px solid var(--border-color);
}

/* Environment cards */
.ts-env-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap: 14px;
  margin-bottom: 14px;
}

.ts-env-card {
  border: 1px solid var(--border-color);
  border-radius: var(--radius);
  padding: 14px;
  background: var(--bg-color);
}

.ts-env-card-header {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 10px;
}

.ts-env-name {
  font-weight: 600;
}

.ts-env-status {
  font-size: 0.72rem;
  padding: 2px 8px;
  border-radius: 10px;
  font-weight: 600;
  cursor: pointer;
  user-select: none;
  white-space: nowrap;
}

.ts-env-active {
  background: var(--success)15;
  color: var(--success);
  border: 1px solid var(--success)40;
}

.ts-env-inactive {
  background: var(--text-muted)15;
  color: var(--text-muted);
  border: 1px solid var(--text-muted)40;
}

/* Criteria grid */
.ts-criteria-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 24px;
}

.ts-criteria-column h4 {
  margin: 0 0 6px;
  font-size: 0.95rem;
  display: flex;
  align-items: center;
  gap: 6px;
}

.ts-criteria-item {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 8px;
}

.ts-criteria-check {
  width: 16px;
  height: 16px;
  flex-shrink: 0;
  cursor: pointer;
  accent-color: var(--primary);
}

.ts-criteria-item .formInput {
  flex: 1;
  margin: 0;
  font-size: 0.85rem;
}

/* Tools section */
.ts-tools-summary {
  display: flex;
  align-items: center;
  gap: 16px;
  flex-wrap: wrap;
}

.ts-tools-summary p {
  margin: 0;
}

/* Priority badge colors */
.ts-priority-select option[value="high"] { color: var(--danger); }
.ts-priority-select option[value="medium"] { color: var(--warning); }
.ts-priority-select option[value="low"] { color: var(--success); }

/* ============================================
   TEST STRATEGY RESPONSIVE
   ============================================ */

@media (max-width: 768px) {
  .ts-header {
    flex-direction: column;
    padding: 16px;
  }

  .ts-header-right {
    width: 100%;
    justify-content: flex-start;
  }

  .ts-section-header {
    padding: 12px 14px;
  }

  .ts-section-body {
    padding: 14px;
  }

  .ts-criteria-grid {
    grid-template-columns: 1fr;
    gap: 20px;
  }

  .ts-env-grid {
    grid-template-columns: 1fr;
  }

  /* Switch table to mobile cards */
  .ts-table-responsive {
    display: none;
  }

  .ts-cards-mobile {
    display: block;
  }
}

@media (max-width: 640px) {
  .ts-title {
    font-size: 1.15rem;
  }

  .ts-header-right {
    flex-wrap: wrap;
  }

  .ts-header-right .btn {
    flex: 1;
    min-width: 100px;
    text-align: center;
    justify-content: center;
  }

  .ts-env-card {
    padding: 10px;
  }
}

/* ===================================================================
   Test Scope (.tsc-) Styles
   =================================================================== */

.tsc-container {
  min-height: 100%;
}

/* Status select in header */
.tsc-status-select {
  padding: 4px 10px;
  font-size: 12px;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background: var(--panel-bg);
  color: var(--text);
  cursor: pointer;
  font-weight: 500;
}

/* Section collapsible headers */
.tsc-section-header {
  cursor: pointer;
  user-select: none;
}

.tsc-section-header:hover {
  opacity: 0.85;
}

.tsc-collapse-icon {
  font-size: 14px;
  color: var(--text-muted);
  transition: transform 0.2s ease;
  margin-left: 8px;
}

/* Scope Grid (2-column In/Out) */
.tsc-scope-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 24px;
}

.tsc-scope-column h4 {
  font-size: 16px;
  font-weight: 600;
  margin: 0 0 4px;
  display: flex;
  align-items: center;
  gap: 8px;
}

.tsc-scope-column h4 i {
  font-size: 14px;
}

/* Scope cards */
.tsc-scope-card {
  background: var(--panel-bg);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 16px;
  margin-bottom: 12px;
  position: relative;
  transition: border-color 0.15s;
}

.tsc-scope-card:hover {
  border-color: var(--primary);
}

.tsc-scope-card-out {
  border-left: 3px solid var(--danger);
}

.tsc-scope-card .formGroup {
  margin-bottom: 10px;
}

.tsc-scope-card .formGroup:last-of-type {
  margin-bottom: 8px;
}

.tsc-remove-btn {
  color: var(--danger);
  opacity: 0.6;
}

.tsc-remove-btn:hover {
  opacity: 1;
}

/* Chip group for test types */
.tsc-chip-group {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

.tsc-chip-toggle {
  cursor: pointer;
  transition: all 0.15s;
  font-size: 11px;
  padding: 3px 10px;
}

.tsc-chip-toggle:hover {
  opacity: 0.8;
}

/* Coverage Matrix table */
.tsc-coverage-table {
  width: 100%;
}

.tsc-col-check {
  width: 40px;
  text-align: center;
}

.tsc-col-count {
  width: 60px;
}

.tsc-col-pct {
  width: 80px;
}

.tsc-col-status {
  width: 100px;
}

.tsc-count-input,
.tsc-pct-input {
  width: 100%;
  text-align: center;
  padding: 4px 6px;
  font-size: 13px;
}

.tsc-feature-name {
  font-weight: 500;
  min-width: 150px;
}

/* Coverage status badges */
.tsc-coverage-badge {
  display: inline-block;
  padding: 3px 10px;
  border-radius: 12px;
  font-size: 11px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.03em;
}

.tsc-status-covered {
  background: rgba(16, 185, 129, 0.12);
  color: var(--success);
}

.tsc-status-partial {
  background: rgba(245, 158, 11, 0.12);
  color: var(--warning);
}

.tsc-status-none {
  background: rgba(239, 68, 68, 0.12);
  color: var(--danger);
}

/* Quality Gates table */
.tsc-gates-table td {
  vertical-align: top;
}

.tsc-gate-criteria {
  font-size: 13px;
  resize: vertical;
  min-height: 40px;
}

/* Toggle switch */
.tsc-col-toggle {
  width: 60px;
  text-align: center;
}

.tsc-toggle {
  position: relative;
  display: inline-block;
  width: 36px;
  height: 20px;
}

.tsc-toggle input {
  opacity: 0;
  width: 0;
  height: 0;
}

.tsc-toggle-slider {
  position: absolute;
  cursor: pointer;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: var(--border);
  border-radius: 20px;
  transition: 0.2s;
}

.tsc-toggle-slider::before {
  content: '';
  position: absolute;
  height: 14px;
  width: 14px;
  left: 3px;
  bottom: 3px;
  background: white;
  border-radius: 50%;
  transition: 0.2s;
}

.tsc-toggle input:checked + .tsc-toggle-slider {
  background: var(--success);
}

.tsc-toggle input:checked + .tsc-toggle-slider::before {
  transform: translateX(16px);
}

/* Artifacts grid */
.tsc-artifacts-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap: 16px;
  margin-bottom: 16px;
}

.tsc-artifact-card {
  background: var(--panel-bg);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 16px;
  transition: border-color 0.15s, box-shadow 0.15s;
}

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

.tsc-artifact-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 12px;
}

.tsc-artifact-icon {
  width: 36px;
  height: 36px;
  border-radius: var(--radius);
  background: rgba(99, 102, 241, 0.1);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--primary);
  font-size: 16px;
}

.tsc-artifact-card .formGroup {
  margin-bottom: 10px;
}

/* Notice / info box */
.tsc-notice {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  padding: 16px;
  background: rgba(59, 130, 246, 0.06);
  border: 1px solid rgba(59, 130, 246, 0.15);
  border-radius: var(--radius);
  margin-bottom: 16px;
}

.tsc-notice i {
  color: var(--info);
  font-size: 18px;
  margin-top: 2px;
}

.tsc-notice strong {
  display: block;
  margin-bottom: 4px;
}

.tsc-notice p {
  margin: 0;
  font-size: 13px;
  color: var(--text-muted);
}

/* Version badge */
.brd-version-badge {
  display: inline-flex;
  align-items: center;
  padding: 2px 10px;
  background: rgba(99, 102, 241, 0.1);
  color: var(--primary);
  border-radius: 12px;
  font-size: 12px;
  font-weight: 600;
}

/* ===================================================================
   Test Scope Responsive
   =================================================================== */

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

  .tsc-artifacts-grid {
    grid-template-columns: 1fr;
  }

  .tsc-coverage-table {
    font-size: 12px;
  }

  .tsc-col-count,
  .tsc-col-pct {
    width: 50px;
  }

  .tsc-count-input,
  .tsc-pct-input {
    padding: 3px 4px;
    font-size: 12px;
  }
}

@media (max-width: 640px) {
  /* Coverage matrix becomes card list on mobile */
  .tsc-coverage-table thead {
    display: none;
  }

  .tsc-coverage-table tbody tr {
    display: block;
    border: 1px solid var(--border);
    border-radius: var(--radius);
    padding: 12px;
    margin-bottom: 12px;
    background: var(--panel-bg);
  }

  .tsc-coverage-table tbody td {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 4px 0;
    border: none;
  }

  .tsc-coverage-table tbody td::before {
    font-weight: 600;
    font-size: 12px;
    color: var(--text-muted);
  }

  .tsc-coverage-table tbody td:nth-child(1)::before { content: 'Feature'; }
  .tsc-coverage-table tbody td:nth-child(2)::before { content: 'Unit'; }
  .tsc-coverage-table tbody td:nth-child(3)::before { content: 'Count'; }
  .tsc-coverage-table tbody td:nth-child(4)::before { content: 'Integration'; }
  .tsc-coverage-table tbody td:nth-child(5)::before { content: 'Count'; }
  .tsc-coverage-table tbody td:nth-child(6)::before { content: 'E2E'; }
  .tsc-coverage-table tbody td:nth-child(7)::before { content: 'Count'; }
  .tsc-coverage-table tbody td:nth-child(8)::before { content: 'Target %'; }
  .tsc-coverage-table tbody td:nth-child(9)::before { content: 'Current %'; }
  .tsc-coverage-table tbody td:nth-child(10)::before { content: 'Status'; }

  .tsc-feature-name {
    min-width: auto;
    font-size: 14px;
  }

  /* Quality gates table to card on mobile */
  .tsc-gates-table thead {
    display: none;
  }

  .tsc-gates-table tbody tr {
    display: block;
    border: 1px solid var(--border);
    border-radius: var(--radius);
    padding: 12px;
    margin-bottom: 12px;
    background: var(--panel-bg);
  }

  .tsc-gates-table tbody td {
    display: block;
    padding: 4px 0;
    border: none;
  }
}

/* ============================================
   TESTING TOOLS (.tt-)
   ============================================ */

.tt-container {
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 4px;
}

.tt-loading {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 80px 20px;
}

/* Header */
.tt-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 20px 0 16px;
  flex-wrap: wrap;
  gap: 12px;
}

.tt-header-left {
  display: flex;
  align-items: center;
  gap: 12px;
}

.tt-title {
  font-size: 20px;
  font-weight: 700;
  color: var(--text-color);
  margin: 0;
  display: flex;
  align-items: center;
  gap: 8px;
}

.tt-count-badge {
  background: var(--primary-color);
  color: #fff;
  font-size: 11px;
  font-weight: 600;
  padding: 3px 10px;
  border-radius: 20px;
  letter-spacing: 0.3px;
}

.tt-header-actions {
  display: flex;
  align-items: center;
  gap: 8px;
}

.tt-view-toggle {
  display: flex;
  border: 1px solid var(--border-color);
  border-radius: var(--radius-sm);
  overflow: hidden;
}

.tt-toggle-btn {
  padding: 6px 10px;
  border: none;
  background: var(--panel-bg);
  color: var(--text-muted);
  cursor: pointer;
  font-size: 13px;
  transition: all 0.2s ease;
}

.tt-toggle-btn:hover {
  background: var(--bg-color);
  color: var(--text-color);
}

.tt-toggle-btn.active {
  background: var(--primary-color);
  color: #fff;
}

.tt-btn-primary {
  background: var(--primary-color) !important;
  color: #fff !important;
  border: 1px solid var(--primary-color) !important;
  padding: 7px 16px;
  border-radius: var(--radius-sm);
  font-size: 13px;
  font-weight: 500;
  cursor: pointer;
  transition: all 0.2s ease;
  display: inline-flex;
  align-items: center;
  gap: 6px;
}

.tt-btn-primary:hover {
  background: var(--primary-hover) !important;
}

.tt-btn-ghost {
  background: transparent !important;
  color: var(--text-muted) !important;
  border: 1px solid var(--border-color) !important;
  padding: 7px 16px;
  border-radius: var(--radius-sm);
  font-size: 13px;
  font-weight: 500;
  cursor: pointer;
  transition: all 0.2s ease;
  display: inline-flex;
  align-items: center;
  gap: 6px;
}

.tt-btn-ghost:hover {
  background: var(--bg-color) !important;
  color: var(--text-color) !important;
}

/* Filters */
.tt-filters {
  display: flex;
  flex-direction: column;
  gap: 12px;
  margin-bottom: 20px;
}

.tt-search-wrap {
  position: relative;
}

.tt-search-icon {
  position: absolute;
  left: 12px;
  top: 50%;
  transform: translateY(-50%);
  color: var(--text-muted);
  font-size: 13px;
  pointer-events: none;
}

.tt-search-input {
  width: 100%;
  padding-left: 36px !important;
  box-sizing: border-box;
}

.tt-category-chips {
  display: flex;
  gap: 6px;
  flex-wrap: wrap;
}

.tt-chip {
  padding: 5px 12px;
  border-radius: 20px;
  border: 1px solid var(--border-color);
  background: var(--panel-bg);
  color: var(--text-muted);
  font-size: 12px;
  font-weight: 500;
  cursor: pointer;
  transition: all 0.2s ease;
  display: inline-flex;
  align-items: center;
  gap: 5px;
}

.tt-chip:hover {
  border-color: var(--primary-color);
  color: var(--primary-color);
}

.tt-chip.active {
  background: var(--primary-color);
  color: #fff;
  border-color: var(--primary-color);
}

.tt-chip i {
  font-size: 11px;
}

/* Sections */
.tt-section {
  margin-bottom: 16px;
  border: 1px solid var(--border-color);
  border-radius: var(--radius);
  background: var(--panel-bg);
  overflow: hidden;
}

.tt-section-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 14px 18px;
  background: var(--bg-color);
  cursor: pointer;
  user-select: none;
  transition: background 0.15s ease;
}

.tt-section-header:hover {
  background: var(--border-light);
}

.tt-section-left {
  display: flex;
  align-items: center;
  gap: 10px;
}

.tt-section-chevron {
  font-size: 11px;
  color: var(--text-muted);
  transition: transform 0.2s ease;
}

.tt-section.collapsed .tt-section-chevron {
  transform: rotate(-90deg);
}

.tt-section.collapsed .tt-section-body {
  display: none;
}

.tt-section-title {
  font-weight: 600;
  font-size: 14px;
  color: var(--text-color);
}

.tt-section-count {
  background: var(--border-color);
  color: var(--text-muted);
  font-size: 11px;
  font-weight: 600;
  padding: 2px 8px;
  border-radius: 10px;
}

.tt-section-desc {
  font-size: 12px;
  color: var(--text-muted);
}

.tt-section-body {
  padding: 16px;
}

/* Card Grid */
.tt-card-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
  gap: 14px;
}

/* Tool Card */
.tt-tool-card {
  background: var(--panel-bg);
  border: 1px solid var(--border-color);
  border-radius: var(--radius);
  overflow: hidden;
  transition: all 0.2s ease;
}

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

.tt-tool-card.tt-editing {
  border-color: var(--primary-color);
  box-shadow: 0 0 0 2px rgba(var(--primary-rgb), 0.12);
}

.tt-tool-card-header {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  padding: 14px 16px 10px;
}

.tt-tool-icon {
  width: 36px;
  height: 36px;
  border-radius: 8px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 700;
  font-size: 13px;
  flex-shrink: 0;
}

.tt-tool-icon.tt-icon-sm {
  width: 28px;
  height: 28px;
  font-size: 10px;
  border-radius: 6px;
}

.tt-tool-info {
  flex: 1;
  min-width: 0;
}

.tt-tool-name {
  font-weight: 600;
  font-size: 14px;
  color: var(--text-color);
  display: block;
}

.tt-tool-meta {
  display: flex;
  align-items: center;
  gap: 6px;
  margin-top: 4px;
}

.tt-category-chip {
  font-size: 10px;
  font-weight: 600;
  padding: 2px 8px;
  border-radius: 4px;
  border: 1px solid;
  text-transform: uppercase;
  letter-spacing: 0.3px;
}

.tt-version {
  font-size: 11px;
  color: var(--text-muted);
  font-family: var(--font-mono);
}

.tt-status-badge {
  font-size: 11px;
  font-weight: 600;
  padding: 3px 10px;
  border-radius: 20px;
  border: 1px solid;
  white-space: nowrap;
  flex-shrink: 0;
}

.tt-tool-desc {
  padding: 0 16px 8px;
  font-size: 12px;
  color: var(--text-muted);
  line-height: 1.5;
  margin: 0;
}

.tt-tool-config {
  margin: 0 16px 10px;
  border-radius: var(--radius-sm);
  background: var(--bg-color);
  border: 1px solid var(--border-color);
  overflow: auto;
  max-height: 100px;
}

.tt-tool-config pre {
  margin: 0;
  padding: 8px 12px;
  font-size: 11px;
  font-family: var(--font-mono);
  color: var(--text-color);
  white-space: pre-wrap;
  word-break: break-all;
}

.tt-tool-config code {
  font-family: inherit;
}

.tt-tool-types {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
  padding: 0 16px;
  margin-bottom: 10px;
}

.tt-type-tag {
  font-size: 10px;
  font-weight: 500;
  padding: 2px 8px;
  border-radius: 4px;
  background: var(--bg-color);
  color: var(--text-muted);
  border: 1px solid var(--border-color);
}

.tt-tool-actions {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 8px 16px;
  border-top: 1px solid var(--border-color);
  background: var(--bg-color);
}

.tt-tool-updated {
  font-size: 11px;
  color: var(--text-light);
}

.tt-action-btn {
  padding: 4px 8px;
  border: none;
  background: transparent;
  color: var(--text-muted);
  cursor: pointer;
  border-radius: var(--radius-sm);
  transition: all 0.15s ease;
  font-size: 13px;
}

.tt-action-btn:hover {
  background: var(--border-light);
  color: var(--primary-color);
}

.tt-action-btn.tt-action-danger:hover {
  color: var(--danger);
  background: rgba(239, 68, 68, 0.08);
}

.tt-close-btn {
  padding: 4px 8px;
  border: none;
  background: transparent;
  color: var(--text-muted);
  cursor: pointer;
  border-radius: var(--radius-sm);
  font-size: 14px;
  transition: all 0.15s ease;
}

.tt-close-btn:hover {
  color: var(--text-color);
  background: var(--border-light);
}

/* Add Form */
.tt-add-form {
  margin-bottom: 20px;
}

.tt-form-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
}

.tt-form-full {
  grid-column: 1 / -1;
}

.tt-textarea {
  resize: vertical;
  min-height: 40px;
  font-size: 13px;
}

.tt-code {
  font-family: var(--font-mono) !important;
  font-size: 12px !important;
}

/* Type Chips (checkboxes) */
.tt-type-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

.tt-type-chip {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 4px 10px;
  border-radius: 4px;
  border: 1px solid var(--border-color);
  background: var(--panel-bg);
  cursor: pointer;
  font-size: 12px;
  color: var(--text-muted);
  transition: all 0.15s ease;
}

.tt-type-chip:hover {
  border-color: var(--primary-color);
}

.tt-type-chip input[type="checkbox"] {
  display: none;
}

.tt-type-chip:has(input:checked) {
  background: var(--primary-color);
  color: #fff;
  border-color: var(--primary-color);
}

/* Table View */
.tt-table-wrap {
  border: 1px solid var(--border-color);
  border-radius: var(--radius);
  overflow: auto;
  background: var(--panel-bg);
}

.tt-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 13px;
}

.tt-table thead th {
  padding: 10px 14px;
  text-align: left;
  font-weight: 600;
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  color: var(--text-muted);
  background: var(--bg-color);
  border-bottom: 1px solid var(--border-color);
  white-space: nowrap;
  cursor: pointer;
  user-select: none;
}

.tt-table thead th:hover {
  color: var(--text-color);
}

.tt-table thead th i {
  font-size: 10px;
  margin-left: 4px;
  opacity: 0.5;
}

.tt-table tbody td {
  padding: 10px 14px;
  border-bottom: 1px solid var(--border-light);
  color: var(--text-color);
  vertical-align: middle;
}

.tt-table tbody tr:hover {
  background: var(--bg-color);
}

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

/* Empty State */
.tt-empty {
  text-align: center;
  padding: 60px 20px;
  color: var(--text-muted);
}

.tt-empty-icon {
  width: 64px;
  height: 64px;
  border-radius: 50%;
  background: var(--bg-color);
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0 auto 16px;
  font-size: 24px;
  color: var(--text-light);
}

.tt-empty h3 {
  margin: 0 0 8px;
  font-size: 16px;
  font-weight: 600;
  color: var(--text-color);
}

.tt-empty p {
  margin: 0 0 20px;
  font-size: 13px;
  max-width: 360px;
  margin-left: auto;
  margin-right: auto;
}

/* Responsive */
@media (max-width: 768px) {
  .tt-header {
    flex-direction: column;
    align-items: flex-start;
  }

  .tt-header-actions {
    width: 100%;
    justify-content: flex-end;
  }

  .tt-card-grid {
    grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
  }

  .tt-form-grid {
    grid-template-columns: 1fr;
  }

  .tt-section-desc {
    display: none;
  }
}

@media (max-width: 640px) {
  .tt-card-grid {
    grid-template-columns: 1fr;
  }

  .tt-header-actions {
    flex-wrap: wrap;
  }

  .tt-category-chips {
    overflow-x: auto;
    flex-wrap: nowrap;
    -webkit-overflow-scrolling: touch;
    padding-bottom: 4px;
  }

  .tt-tool-config {
    max-height: 60px;
  }
}

/* ============================================
   TEST PLAN DOCUMENT (TPD) STYLES
   ============================================ */

.tpd-container {
  display: flex;
  flex-direction: column;
  min-height: 100%;
  background: var(--bg);
}

/* Loading State */
.tpd-loading {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  height: 100%;
  gap: 16px;
}

.tpd-loading .spinner {
  width: 48px;
  height: 48px;
  border: 4px solid var(--border);
  border-top-color: var(--primary);
  border-radius: 50%;
  animation: spin 0.8s linear infinite;
}

.tpd-loading p {
  color: var(--text-muted);
  font-size: 14px;
}

/* Header */
.tpd-header {
  position: sticky;
  top: 0;
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 20px 32px;
  background: rgba(255, 255, 255, 0.95);
  border-bottom: 1px solid rgba(0, 0, 0, 0.06);
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.04);
  z-index: 100;
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
}

.tpd-header-left {
  display: flex;
  align-items: center;
  gap: 16px;
}

.tpd-header-right {
  display: flex;
  align-items: center;
  gap: 8px;
}

.tpd-title {
  font-size: 22px;
  font-weight: 700;
  margin: 0;
  display: flex;
  align-items: center;
  gap: 10px;
  color: var(--text);
  letter-spacing: -0.01em;
}

.tpd-title i {
  color: var(--primary);
  opacity: 0.9;
}

.tpd-meta {
  display: flex;
  align-items: center;
  gap: 12px;
}

.tpd-version-badge {
  display: inline-flex;
  align-items: center;
  padding: 4px 10px;
  font-size: 12px;
  font-weight: 600;
  color: var(--primary);
  background: var(--primary-alpha, rgba(99, 102, 241, 0.1));
  border: 1px solid var(--primary);
  border-radius: 20px;
  letter-spacing: 0.02em;
}

.tpd-status {
  display: inline-flex;
  align-items: center;
  padding: 4px 12px;
  font-size: 12px;
  font-weight: 600;
  border-radius: 20px;
  letter-spacing: 0.02em;
  text-transform: capitalize;
}

.tpd-timestamp {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 13px;
  color: var(--text-muted);
  padding: 6px 12px;
  background: var(--bg);
  border-radius: 6px;
  border: 1px solid var(--border-subtle, var(--border));
}

.tpd-timestamp i {
  font-size: 12px;
  opacity: 0.7;
}

.tpd-save-status {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 13px;
  color: var(--success, #22c55e);
  padding: 6px 12px;
  background: var(--success-alpha, rgba(34, 197, 94, 0.15));
  border-radius: 6px;
  border: 1px solid var(--success, #22c55e);
  animation: fadeInOut 3s ease-in-out;
}

.tpd-save-status i {
  font-size: 12px;
}

.tpd-completion {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 13px;
  font-weight: 600;
  color: var(--primary);
  padding: 6px 12px;
  background: var(--primary-alpha, rgba(99, 102, 241, 0.1));
  border-radius: 6px;
  border: 1px solid var(--primary);
}

/* Content Layout */
.tpd-content-wrapper {
  flex: 1;
  display: flex;
  overflow: hidden;
}

.tpd-editor-panel {
  flex: 1;
  overflow-y: auto;
  padding: 0;
}

.tpd-all-sections {
  max-width: 1200px;
  margin: 0 auto;
  padding: 40px 32px;
}

/* Section Cards */
.tpd-section {
  margin-bottom: 32px;
  background: var(--surface, white);
  border: 1px solid rgba(0, 0, 0, 0.06);
  border-radius: 12px;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.04);
  overflow: hidden;
  transition: box-shadow 0.2s ease;
}

.tpd-section:hover {
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.06);
}

.tpd-section-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 20px 24px;
  cursor: pointer;
  border-bottom: 1px solid rgba(0, 0, 0, 0.06);
  background: rgba(0, 0, 0, 0.01);
  transition: background 0.2s ease;
  user-select: none;
}

.tpd-section-header:hover {
  background: rgba(0, 0, 0, 0.02);
}

.tpd-section-header-left {
  display: flex;
  align-items: center;
  gap: 12px;
}

.tpd-section-header-left h3 {
  margin: 0;
  font-size: 16px;
  font-weight: 600;
  color: var(--text);
}

.tpd-section-header-left i {
  color: var(--primary);
  opacity: 0.8;
  width: 20px;
  text-align: center;
}

.tpd-section-header-right {
  display: flex;
  align-items: center;
  gap: 8px;
}

.tpd-collapse-icon {
  transition: transform 0.3s ease;
  font-size: 12px;
  color: var(--text-muted);
}

.tpd-collapse-icon.collapsed {
  transform: rotate(-90deg);
}

.tpd-section-content {
  padding: 24px;
  transition: max-height 0.3s ease, padding 0.3s ease;
  overflow: hidden;
}

.tpd-section-content.collapsed {
  max-height: 0;
  padding: 0 24px;
  overflow: hidden;
}

.tpd-section-inner {
  display: flex;
  flex-direction: column;
  gap: 20px;
}

/* Completion Dots */
.tpd-completion-dot {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  display: inline-block;
  flex-shrink: 0;
}

.tpd-completion-dot.complete {
  background: var(--success, #22c55e);
  box-shadow: 0 0 6px rgba(34, 197, 94, 0.4);
}

.tpd-completion-dot.partial {
  background: var(--warning, #f59e0b);
  box-shadow: 0 0 6px rgba(245, 158, 11, 0.4);
}

.tpd-completion-dot.empty {
  background: var(--border, #e5e7eb);
}

/* Auto-generated Badge */
.tpd-section-header-right .badge {
  font-size: 10px;
  padding: 2px 8px;
  border-radius: 10px;
  font-weight: 600;
  letter-spacing: 0.04em;
}

/* Textarea */
.tpd-textarea {
  width: 100%;
  min-height: 120px;
  resize: vertical;
  border: 1.5px solid rgba(0, 0, 0, 0.08);
  border-radius: 8px;
  padding: 10px 14px;
  font-size: 14px;
  font-family: inherit;
  transition: all 0.2s ease;
  background: var(--surface);
  color: var(--text);
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.02);
}

.tpd-textarea:hover {
  border-color: rgba(0, 0, 0, 0.12);
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.04);
}

.tpd-textarea:focus {
  outline: none;
  border-color: var(--primary);
  box-shadow: 0 0 0 3px rgba(var(--primary-rgb, 99, 102, 241), 0.1), 0 2px 4px rgba(0, 0, 0, 0.04);
}

/* Rich Editor Block */
.tpd-rich-editor {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.tpd-rich-editor label {
  font-size: 14px;
  font-weight: 600;
  color: var(--text);
}

/* Subsection */
.tpd-subsection {
  margin-top: 24px;
  padding-top: 24px;
  border-top: 1px solid rgba(0, 0, 0, 0.06);
}

.tpd-subsection h4 {
  margin: 0 0 12px 0;
  font-size: 15px;
  font-weight: 600;
  color: var(--text);
}

/* Hint Text */
.tpd-hint {
  font-size: 13px;
  color: var(--text-muted);
  margin: 0 0 12px 0;
  line-height: 1.5;
}

/* Table Styles */
.tpd-table-responsive {
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}

.tpd-table {
  width: 100%;
  border-collapse: separate;
  border-spacing: 0;
  border: 1px solid rgba(0, 0, 0, 0.06);
  border-radius: 8px;
  overflow: hidden;
}

.tpd-table thead th {
  background: rgba(0, 0, 0, 0.02);
  padding: 12px 14px;
  font-size: 13px;
  font-weight: 600;
  color: var(--text-muted);
  text-align: left;
  border-bottom: 1px solid rgba(0, 0, 0, 0.06);
  white-space: nowrap;
}

.tpd-table tbody td {
  padding: 10px 14px;
  font-size: 14px;
  border-bottom: 1px solid rgba(0, 0, 0, 0.04);
  vertical-align: middle;
}

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

.tpd-table tbody tr:hover {
  background: rgba(0, 0, 0, 0.01);
}

.tpd-table .formInput,
.tpd-table select {
  width: 100%;
  min-width: 100px;
}

.tpd-table .btn.sm {
  padding: 4px 8px;
  font-size: 12px;
}

/* Scope Grid */
.tpd-scope-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 24px;
}

.tpd-scope-column h4 {
  margin: 0 0 12px 0;
  font-size: 15px;
  font-weight: 600;
  display: flex;
  align-items: center;
  gap: 8px;
}

.tpd-scope-column h4 i {
  font-size: 14px;
}

.tpd-scope-item {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 8px;
}

.tpd-scope-item input {
  flex: 1;
}

.tpd-scope-item .btn {
  flex-shrink: 0;
}

/* Notice / Info Box */
.tpd-notice {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  padding: 14px 18px;
  border-radius: 8px;
  font-size: 13px;
  line-height: 1.5;
}

.tpd-notice.info {
  background: rgba(59, 130, 246, 0.06);
  border: 1px solid rgba(59, 130, 246, 0.15);
  color: var(--text);
}

.tpd-notice.info i {
  color: #3b82f6;
  margin-top: 2px;
  flex-shrink: 0;
}

.tpd-notice.warning {
  background: rgba(245, 158, 11, 0.06);
  border: 1px solid rgba(245, 158, 11, 0.15);
  color: var(--text);
}

.tpd-notice.warning i {
  color: #f59e0b;
  margin-top: 2px;
  flex-shrink: 0;
}

/* Reference Items */
.tpd-reference-item {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 8px;
  padding: 8px 12px;
  background: var(--bg);
  border: 1px solid rgba(0, 0, 0, 0.06);
  border-radius: 8px;
}

.tpd-reference-item input {
  flex: 1;
  min-width: 0;
}

.tpd-reference-item .btn {
  flex-shrink: 0;
}

/* Training Items */
.tpd-training-item {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 8px;
}

.tpd-training-item input {
  flex: 1;
}

.tpd-training-item .btn {
  flex-shrink: 0;
}

/* Empty State */
.tpd-empty-state {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 80px 40px;
  text-align: center;
  max-width: 600px;
  margin: 0 auto;
}

.tpd-empty-icon {
  font-size: 64px;
  margin-bottom: 24px;
  opacity: 0.2;
}

.tpd-empty-state h2 {
  font-size: 24px;
  font-weight: 700;
  margin: 0 0 12px 0;
  color: var(--text);
}

.tpd-empty-state p {
  font-size: 15px;
  color: var(--text-muted);
  margin: 0 0 32px 0;
  line-height: 1.6;
}

.tpd-empty-features {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
  margin-bottom: 32px;
  width: 100%;
}

.tpd-empty-feature {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 12px 16px;
  background: var(--bg);
  border: 1px solid rgba(0, 0, 0, 0.06);
  border-radius: 8px;
  font-size: 13px;
  color: var(--text);
}

.tpd-empty-feature i {
  color: var(--primary);
  font-size: 16px;
  flex-shrink: 0;
}

.tpd-empty-note {
  font-size: 12px !important;
  color: var(--text-muted) !important;
  margin-top: 16px !important;
}

/* Responsive */
@media (max-width: 1200px) {
  .tpd-all-sections {
    padding: 32px 24px;
  }
}

@media (max-width: 768px) {
  .tpd-header {
    flex-direction: column;
    gap: 12px;
    padding: 16px 20px;
  }

  .tpd-header-left {
    flex-direction: column;
    align-items: flex-start;
    gap: 8px;
  }

  .tpd-meta {
    flex-wrap: wrap;
    gap: 8px;
  }

  .tpd-header-right {
    width: 100%;
    justify-content: flex-end;
  }

  .tpd-all-sections {
    padding: 20px 16px;
  }

  .tpd-section-header {
    padding: 16px 18px;
  }

  .tpd-section-content {
    padding: 18px;
  }

  .tpd-scope-grid {
    grid-template-columns: 1fr;
  }

  .tpd-empty-features {
    grid-template-columns: 1fr;
  }

  .tpd-title {
    font-size: 18px;
  }

  .tpd-table {
    font-size: 13px;
  }

  .tpd-table thead th,
  .tpd-table tbody td {
    padding: 8px 10px;
  }
}

/* ========================================
   Mode Toggle (Header Center)
   ======================================== */
.mode-toggle {
  display: inline-flex;
  align-items: center;
  background: var(--bg-color);
  border: 1px solid var(--border-color);
  border-radius: 24px;
  padding: 3px;
  gap: 2px;
}

.mode-toggle-btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 6px 16px;
  border: none;
  border-radius: 20px;
  background: transparent;
  color: var(--text-muted);
  font-size: 13px;
  font-weight: 500;
  cursor: pointer;
  transition: all 0.2s ease;
  white-space: nowrap;
}

.mode-toggle-btn i {
  font-size: 13px;
}

.mode-toggle-btn:hover {
  color: var(--text-color);
  background: rgba(0, 0, 0, 0.04);
}

.mode-toggle-btn.active {
  background: var(--primary-color);
  color: #fff;
  box-shadow: 0 1px 3px rgba(45, 43, 135, 0.3);
}

/* ========================================
   Guided Mode
   ======================================== */
.guided-mode-container {
  display: flex;
  flex-direction: column;
  height: calc(100vh - var(--header-height));
  background: var(--bg-color);
}

.guided-body {
  display: flex;
  flex-direction: row;
  flex: 1;
  min-height: 0;
  overflow: hidden;
}

.guided-sidebar {
  width: 280px;
  min-width: 280px;
  background: var(--panel-bg);
  border-right: 1px solid var(--border-color);
  display: flex;
  flex-direction: column;
  overflow: hidden;
}

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

.guided-sidebar-title {
  font-size: 14px;
  font-weight: 600;
  color: var(--text-color);
}

.guided-step-counter {
  font-size: 12px;
  font-weight: 500;
  color: var(--text-muted);
  background: var(--bg-color);
  padding: 2px 10px;
  border-radius: 10px;
}

.guided-sidebar-list {
  flex: 1;
  overflow-y: auto;
  padding: 8px 0;
}

.guided-stage-group {
  margin-bottom: 4px;
}

.guided-stage-header {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 10px 20px;
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  color: var(--text-muted);
  cursor: pointer;
  user-select: none;
}

.guided-stage-header i.chevron {
  font-size: 10px;
  transition: transform 0.2s;
}

.guided-stage-header.collapsed i.chevron {
  transform: rotate(-90deg);
}

.guided-stage-items {
  overflow: hidden;
  transition: max-height 0.2s ease;
}

.guided-stage-header.collapsed + .guided-stage-items {
  max-height: 0 !important;
}

.guided-step-item {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px 20px 8px 32px;
  font-size: 13px;
  color: var(--text-muted);
  cursor: pointer;
  transition: all 0.15s;
  border-left: 3px solid transparent;
}

.guided-step-item:hover {
  background: var(--bg-color);
  color: var(--text-color);
}

.guided-step-item.active {
  background: rgba(45, 43, 135, 0.06);
  color: var(--primary-color);
  border-left-color: var(--primary-color);
  font-weight: 600;
}

.guided-step-item.completed {
  color: var(--success);
}

.guided-step-item .step-num {
  width: 22px;
  height: 22px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 11px;
  font-weight: 600;
  background: var(--bg-color);
  color: var(--text-muted);
  flex-shrink: 0;
}

.guided-step-item.active .step-num {
  background: var(--primary-color);
  color: #fff;
}

.guided-step-item.completed .step-num {
  background: var(--success);
  color: #fff;
}

.guided-content {
  flex: 1;
  overflow-y: auto;
  padding: 24px 32px;
}

.guided-footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 24px;
  height: 52px;
  min-height: 52px;
  background: var(--panel-bg);
  border-top: 1px solid var(--border-color);
  flex-shrink: 0;
}

.guided-nav-btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 8px 20px;
  border: 1px solid var(--border-color);
  border-radius: 8px;
  background: var(--panel-bg);
  color: var(--text-color);
  font-size: 13px;
  font-weight: 500;
  cursor: pointer;
  transition: all 0.15s;
}

.guided-nav-btn:hover {
  border-color: var(--primary-color);
  color: var(--primary-color);
}

.guided-nav-btn:disabled {
  opacity: 0.4;
  cursor: not-allowed;
}

.guided-nav-btn.guided-nav-primary {
  background: var(--primary-color);
  color: #fff;
  border-color: var(--primary-color);
}

.guided-nav-btn.guided-nav-primary:hover {
  background: var(--primary-hover);
}

.guided-footer-label {
  font-size: 13px;
  color: var(--text-muted);
  font-weight: 500;
}

/* ========================================
   YOLO Mode
   ======================================== */
.yolo-mode-container {
  display: flex;
  flex-direction: row;
  height: calc(100vh - var(--header-height));
  background: var(--bg-color);
}

.yolo-chat-panel {
  width: 25%;
  min-width: 300px;
  max-width: 400px;
  display: flex;
  flex-direction: column;
  background: var(--panel-bg);
  border-right: 1px solid var(--border-color);
}

.yolo-chat-header {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 14px 20px;
  border-bottom: 1px solid var(--border-color);
  font-size: 14px;
  font-weight: 600;
  color: var(--text-color);
}

.yolo-chat-icon {
  width: 28px;
  height: 28px;
  border-radius: 50%;
}

.yolo-chat-messages {
  flex: 1;
  overflow-y: auto;
  padding: 16px 20px;
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.yolo-msg {
  padding: 10px 14px;
  border-radius: 12px;
  font-size: 13px;
  line-height: 1.5;
  max-width: 85%;
}

.yolo-msg-system {
  background: rgba(45, 43, 135, 0.08);
  color: var(--primary-color);
  align-self: flex-start;
}

.yolo-msg-user {
  background: var(--primary-color);
  color: #fff;
  align-self: flex-end;
  border-bottom-right-radius: 4px;
}

.yolo-msg-ai {
  background: var(--bg-color);
  color: var(--text-color);
  align-self: flex-start;
  border-bottom-left-radius: 4px;
}

.yolo-chat-input-area {
  display: flex;
  align-items: flex-end;
  gap: 8px;
  padding: 12px 16px;
  border-top: 1px solid var(--border-color);
}

.yolo-chat-input {
  flex: 1;
  resize: none;
  border: 1px solid var(--border-color);
  border-radius: 12px;
  padding: 10px 14px;
  font-size: 13px;
  font-family: var(--font-family);
  color: var(--text-color);
  background: var(--bg-color);
  outline: none;
  transition: border-color 0.15s;
}

.yolo-chat-input:focus {
  border-color: var(--primary-color);
}

.yolo-chat-send {
  width: 38px;
  height: 38px;
  border: none;
  border-radius: 50%;
  background: var(--primary-color);
  color: #fff;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 14px;
  transition: background 0.15s;
  flex-shrink: 0;
}

.yolo-chat-send:hover {
  background: var(--primary-hover);
}

.yolo-preview-panel {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
}

.yolo-preview-placeholder {
  text-align: center;
  color: var(--text-muted);
}

.yolo-preview-icon {
  font-size: 48px;
  color: var(--border-color);
  margin-bottom: 16px;
}

.yolo-preview-placeholder h3 {
  font-size: 18px;
  font-weight: 600;
  color: var(--text-color);
  margin-bottom: 8px;
}

.yolo-preview-placeholder p {
  font-size: 14px;
  max-width: 300px;
}

/* ========================================
   Responsive: Mode Toggle, Guided, YOLO
   ======================================== */
@media (max-width: 768px) {
  .mode-toggle-btn span {
    display: none;
  }
  .mode-toggle-btn {
    padding: 6px 12px;
  }

  .guided-sidebar {
    display: none;
  }
  .guided-content {
    padding: 16px;
  }

  .yolo-chat-panel {
    width: 100%;
    max-width: none;
  }
  .yolo-preview-panel {
    display: none;
  }
}

/* ==================== Guided Questionnaire (.gq-*) ==================== */

.gq-page {
  max-width: 680px;
  margin: 0 auto;
  padding: 40px 24px 60px;
}

/* Header */
.gq-header {
  text-align: center;
  margin-bottom: 36px;
}

.gq-header-icon {
  width: 64px;
  height: 64px;
  border-radius: 16px;
  background: linear-gradient(135deg, var(--primary-color, #4F46E5), #7C3AED);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 16px;
  box-shadow: 0 4px 16px rgba(79, 70, 229, 0.25);
}

.gq-header-icon i {
  font-size: 28px;
  color: #fff;
}

.gq-header-title {
  font-size: 28px;
  font-weight: 700;
  color: var(--text-color, #1a1a2e);
  margin: 0 0 8px;
  line-height: 1.2;
}

.gq-header-subtitle {
  font-size: 16px;
  color: var(--text-muted, #6b7280);
  margin: 0;
}

/* Questions */
.gq-questions {
  display: flex;
  flex-direction: column;
  gap: 32px;
}

.gq-question {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.gq-label {
  font-size: 15px;
  font-weight: 600;
  color: var(--text-color, #1a1a2e);
}

.gq-required {
  color: #ef4444;
}

/* Text / Textarea inputs */
.gq-text-input,
.gq-textarea {
  width: 100%;
  padding: 12px 14px;
  font-size: 14px;
  border: 2px solid var(--border-color, #e5e7eb);
  border-radius: 10px;
  background: var(--bg-color, #fff);
  color: var(--text-color, #1a1a2e);
  transition: border-color 0.2s, box-shadow 0.2s;
  outline: none;
  font-family: inherit;
  box-sizing: border-box;
}

.gq-text-input:focus,
.gq-textarea:focus {
  border-color: var(--primary-color, #4F46E5);
  box-shadow: 0 0 0 3px rgba(79, 70, 229, 0.1);
}

.gq-textarea {
  resize: vertical;
  min-height: 100px;
}

/* Card grid */
.gq-card-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
  gap: 12px;
}

.gq-card {
  position: relative;
  border: 2px solid var(--border-color, #e5e7eb);
  border-radius: 12px;
  padding: 16px;
  text-align: center;
  cursor: pointer;
  background: var(--bg-color, #fff);
  transition: border-color 0.2s, box-shadow 0.2s, transform 0.15s;
  user-select: none;
}

.gq-card:hover {
  border-color: var(--primary-color, #4F46E5);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
  transform: translateY(-2px);
}

.gq-card.selected {
  border-color: var(--primary-color, #4F46E5);
  background: rgba(79, 70, 229, 0.04);
  box-shadow: 0 2px 8px rgba(79, 70, 229, 0.15);
}

.gq-card-check {
  position: absolute;
  top: 8px;
  right: 8px;
  opacity: 0;
  transform: scale(0.6);
  transition: opacity 0.2s, transform 0.2s;
  color: var(--primary-color, #4F46E5);
  font-size: 18px;
}

.gq-card.selected .gq-card-check {
  opacity: 1;
  transform: scale(1);
}

.gq-card-icon {
  font-size: 24px;
  color: var(--primary-color, #4F46E5);
  margin-bottom: 8px;
}

.gq-card-label {
  font-size: 14px;
  font-weight: 600;
  color: var(--text-color, #1a1a2e);
  margin-bottom: 4px;
}

.gq-card-desc {
  font-size: 12px;
  color: var(--text-muted, #6b7280);
  line-height: 1.4;
}

/* Toggle */
.gq-toggle-wrapper {
  display: flex;
  align-items: center;
  gap: 12px;
}

.gq-toggle {
  position: relative;
  display: inline-block;
  width: 52px;
  height: 28px;
  flex-shrink: 0;
}

.gq-toggle input {
  opacity: 0;
  width: 0;
  height: 0;
  position: absolute;
}

.gq-toggle-slider {
  position: absolute;
  cursor: pointer;
  top: 0; left: 0; right: 0; bottom: 0;
  background: var(--border-color, #d1d5db);
  border-radius: 28px;
  transition: background 0.25s;
}

.gq-toggle-slider::before {
  content: '';
  position: absolute;
  height: 22px;
  width: 22px;
  left: 3px;
  bottom: 3px;
  background: #fff;
  border-radius: 50%;
  transition: transform 0.25s;
  box-shadow: 0 1px 3px rgba(0,0,0,0.15);
}

.gq-toggle input:checked + .gq-toggle-slider {
  background: var(--primary-color, #4F46E5);
}

.gq-toggle input:checked + .gq-toggle-slider::before {
  transform: translateX(24px);
}

.gq-toggle-label {
  font-size: 14px;
  color: var(--text-color, #1a1a2e);
  font-weight: 500;
}

/* Color picker */
.gq-color-wrapper {
  display: flex;
  align-items: center;
  gap: 12px;
}

.gq-color-input {
  width: 48px;
  height: 48px;
  border: 2px solid var(--border-color, #e5e7eb);
  border-radius: 10px;
  cursor: pointer;
  padding: 2px;
  background: none;
}

.gq-color-hex {
  width: 100px;
  padding: 10px 12px;
  font-size: 14px;
  font-family: monospace;
  border: 2px solid var(--border-color, #e5e7eb);
  border-radius: 10px;
  background: var(--bg-color, #fff);
  color: var(--text-color, #1a1a2e);
  outline: none;
  text-transform: uppercase;
}

.gq-color-hex:focus {
  border-color: var(--primary-color, #4F46E5);
  box-shadow: 0 0 0 3px rgba(79, 70, 229, 0.1);
}

.gq-color-preview {
  width: 36px;
  height: 36px;
  border-radius: 8px;
  border: 2px solid var(--border-color, #e5e7eb);
}

/* Generate section */
.gq-generate-section {
  margin-top: 40px;
  text-align: center;
}

.gq-generate-divider {
  position: relative;
  margin-bottom: 24px;
  display: flex;
  align-items: center;
  gap: 16px;
}

.gq-generate-divider::before,
.gq-generate-divider::after {
  content: '';
  flex: 1;
  height: 1px;
  background: var(--border-color, #e5e7eb);
}

.gq-generate-divider span {
  font-size: 13px;
  color: var(--text-muted, #6b7280);
  white-space: nowrap;
}

.gq-generate-btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 14px 32px;
  font-size: 16px;
  font-weight: 600;
  color: #fff;
  background: linear-gradient(135deg, var(--primary-color, #4F46E5), #7C3AED);
  border: none;
  border-radius: 12px;
  cursor: pointer;
  box-shadow: 0 4px 14px rgba(79, 70, 229, 0.3);
  transition: transform 0.15s, box-shadow 0.15s;
}

.gq-generate-btn:hover:not(:disabled) {
  transform: translateY(-2px);
  box-shadow: 0 6px 20px rgba(79, 70, 229, 0.4);
}

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

/* Sidebar answered indicator */
.guided-step-item .gq-answered-check {
  color: var(--primary-color, #4F46E5);
  font-size: 12px;
  margin-left: auto;
  opacity: 0.8;
}

/* Unsupported type fallback */
.gq-unsupported {
  color: var(--text-muted, #6b7280);
  font-style: italic;
}

/* ---------- Progressive reveal (one-at-a-time) ---------- */

/* Future questions hidden */
.gq-q-future {
  display: none !important;
}

/* Answered questions dimmed + clickable */
.gq-q-answered {
  opacity: 0.55;
  cursor: pointer;
  transition: opacity 0.25s;
  position: relative;
}
.gq-q-answered:hover {
  opacity: 0.8;
}
.gq-q-answered::after {
  content: '\f058'; /* fa-circle-check */
  font-family: 'Font Awesome 6 Free';
  font-weight: 900;
  position: absolute;
  top: 2px;
  right: 0;
  font-size: 16px;
  color: var(--primary-color, #4F46E5);
  opacity: 0.7;
}

/* Active question fade-in */
.gq-q-active {
  animation: gq-fade-in 0.35s ease-out;
}

@keyframes gq-fade-in {
  from { opacity: 0; transform: translateY(12px); }
  to   { opacity: 1; transform: translateY(0); }
}

/* Submit button per question */
.gq-submit-wrapper {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-top: 4px;
}
.gq-submit-wrapper.gq-submit-hidden {
  display: none;
}

.gq-submit-btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 10px 24px;
  font-size: 14px;
  font-weight: 600;
  color: #fff;
  background: var(--primary-color, #4F46E5);
  border: none;
  border-radius: 10px;
  cursor: pointer;
  transition: background 0.2s, transform 0.15s, box-shadow 0.15s;
  box-shadow: 0 2px 8px rgba(79, 70, 229, 0.25);
}
.gq-submit-btn:hover {
  background: #4338ca;
  transform: translateY(-1px);
  box-shadow: 0 4px 14px rgba(79, 70, 229, 0.35);
}
.gq-submit-btn:active {
  transform: translateY(0);
}

.gq-submit-hint {
  font-size: 11px;
  color: var(--text-muted, #9ca3af);
  background: var(--hover-bg, #f3f4f6);
  padding: 3px 8px;
  border-radius: 6px;
  font-family: -apple-system, system-ui, sans-serif;
  white-space: nowrap;
}

/* Question counter pill */
.gq-question-counter {
  text-align: center;
  margin-bottom: 24px;
}
.gq-question-counter span {
  display: inline-block;
  font-size: 12px;
  font-weight: 600;
  color: var(--primary-color, #4F46E5);
  background: rgba(79, 70, 229, 0.08);
  padding: 4px 14px;
  border-radius: 20px;
  letter-spacing: 0.02em;
}

/* Responsive */
@media (max-width: 640px) {
  .gq-page {
    padding: 24px 16px 48px;
  }

  .gq-header-title {
    font-size: 22px;
  }

  .gq-header-subtitle {
    font-size: 14px;
  }

  .gq-header-icon {
    width: 52px;
    height: 52px;
  }

  .gq-header-icon i {
    font-size: 22px;
  }

  .gq-card-grid {
    grid-template-columns: 1fr;
  }

  .gq-questions {
    gap: 24px;
  }

  .gq-submit-hint {
    display: none;
  }
}

/* ---------- List input (name + description pairs) ---------- */

.gq-list-input {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.gq-list-items {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.gq-list-item {
  display: flex;
  gap: 8px;
  align-items: center;
}

.gq-list-name,
.gq-list-desc {
  padding: 10px 12px;
  border: 2px solid var(--border-color, #e5e7eb);
  border-radius: 8px;
  font-size: 14px;
  font-family: inherit;
  background: var(--bg-color, #fff);
  color: var(--text-color, #1a1a2e);
  outline: none;
  transition: border-color 0.2s, box-shadow 0.2s;
  box-sizing: border-box;
}

.gq-list-name {
  flex: 1;
  min-width: 0;
}

.gq-list-desc {
  flex: 2;
  min-width: 0;
}

.gq-list-name:focus,
.gq-list-desc:focus {
  border-color: var(--primary-color, #4F46E5);
  box-shadow: 0 0 0 3px rgba(79, 70, 229, 0.1);
}

.gq-list-remove {
  width: 32px;
  height: 32px;
  border: none;
  background: none;
  color: var(--text-muted, #9ca3af);
  cursor: pointer;
  border-radius: 6px;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: color 0.2s, background 0.2s;
  flex-shrink: 0;
  font-size: 14px;
}

.gq-list-remove:hover {
  color: #ef4444;
  background: rgba(239, 68, 68, 0.08);
}

.gq-list-add {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 8px 16px;
  font-size: 13px;
  font-weight: 500;
  color: var(--primary-color, #4F46E5);
  background: none;
  border: 2px dashed var(--border-color, #e5e7eb);
  border-radius: 8px;
  cursor: pointer;
  transition: border-color 0.2s, background 0.2s;
  align-self: flex-start;
  font-family: inherit;
}

.gq-list-add:hover {
  border-color: var(--primary-color, #4F46E5);
  background: rgba(79, 70, 229, 0.04);
}

@media (max-width: 640px) {
  .gq-list-item {
    flex-direction: column;
    align-items: stretch;
  }
  .gq-list-remove {
    align-self: flex-end;
  }
}

/* --- Guided Questionnaire: Attachments / Dropzone --- */

.gq-attachments {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.gq-dropzone {
  position: relative;
  border: 2px dashed var(--border-color, #e5e7eb);
  border-radius: 12px;
  padding: 32px 24px;
  text-align: center;
  cursor: pointer;
  transition: border-color 0.2s, background 0.2s;
  background: var(--panel-bg, #fff);
}

.gq-dropzone:hover,
.gq-dropzone-active {
  border-color: var(--primary-color, #4F46E5);
  background: rgba(79, 70, 229, 0.03);
}

.gq-dropzone .gq-file-input {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  opacity: 0;
  cursor: pointer;
  pointer-events: none;
}

.gq-dropzone-content {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  pointer-events: none;
}

.gq-dropzone-icon {
  font-size: 28px;
  color: var(--primary-color, #4F46E5);
  opacity: 0.6;
  margin-bottom: 4px;
}

.gq-dropzone-text {
  margin: 0;
  font-size: 14px;
  font-weight: 500;
  color: var(--text-color, #374151);
}

.gq-dropzone-hint {
  margin: 0;
  font-size: 13px;
  color: var(--text-muted, #9ca3af);
}

.gq-dropzone-browse {
  color: var(--primary-color, #4F46E5);
  font-weight: 500;
  text-decoration: underline;
}

.gq-file-list {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.gq-file-item {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 10px 14px;
  background: var(--panel-bg, #fff);
  border: 1px solid var(--border-color, #e5e7eb);
  border-radius: 10px;
  transition: box-shadow 0.15s;
}

.gq-file-item:hover {
  box-shadow: 0 1px 4px rgba(0,0,0,0.06);
}

.gq-file-item-icon {
  font-size: 18px;
  color: var(--primary-color, #4F46E5);
  opacity: 0.7;
  flex-shrink: 0;
}

.gq-file-item-info {
  display: flex;
  flex-direction: column;
  min-width: 0;
  flex: 1;
}

.gq-file-item-name {
  font-size: 13px;
  font-weight: 500;
  color: var(--text-color, #374151);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.gq-file-item-size {
  font-size: 11px;
  color: var(--text-muted, #9ca3af);
}

.gq-file-remove {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  padding: 0;
  background: none;
  border: none;
  border-radius: 6px;
  cursor: pointer;
  color: var(--text-muted, #9ca3af);
  font-size: 13px;
  transition: color 0.15s, background 0.15s;
  flex-shrink: 0;
}

.gq-file-remove:hover {
  color: #ef4444;
  background: rgba(239, 68, 68, 0.08);
}

@media (max-width: 640px) {
  .gq-dropzone {
    padding: 24px 16px;
  }
  .gq-dropzone-icon {
    font-size: 24px;
  }
}

/* ================================================================
   Console Page – Orchestrator Integration (co-* prefix)
   ================================================================ */
.console-page {
  flex: 1;
  background: var(--bg-color, #f7f9fc);
  color: var(--text-color, #374151);
  overflow-y: auto;
  display: flex;
  flex-direction: column;
}

/* ── Header ────────────────────────────────────────────────── */
.co-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 14px 24px;
  border-bottom: 1px solid var(--border-color, #e6ebf1);
  background: var(--panel-bg, #fff);
  flex-shrink: 0;
  gap: 16px;
}
.co-header-left {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-shrink: 0;
}
.co-header-left i {
  font-size: 20px;
  color: var(--primary-color, #2d2b87);
}
.co-header-left h2 {
  margin: 0;
  font-size: 17px;
  font-weight: 600;
  color: var(--text-color, #374151);
}
.co-header-center {
  display: flex;
  align-items: center;
  gap: 18px;
  flex-wrap: wrap;
}
.co-header-right {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-shrink: 0;
}

/* ── Stats Bar ─────────────────────────────────────────────── */
.co-stats-bar {
  display: flex;
  align-items: center;
  gap: 18px;
}
.co-stat {
  font-size: 12px;
  color: #6b7280;
  display: flex;
  align-items: center;
  gap: 5px;
  white-space: nowrap;
}
.co-stat i {
  color: #9ca3af;
  font-size: 11px;
}
.co-stat strong {
  color: var(--text-color, #374151);
  font-weight: 600;
}
/* ws-dot removed — replaced by status badge */

/* ── Build Controls ────────────────────────────────────────── */
.co-build-controls {
  display: flex;
  align-items: center;
  gap: 6px;
}
.co-ctrl-btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 6px 14px;
  border: 1px solid var(--border-color, #e6ebf1);
  border-radius: 8px;
  background: var(--panel-bg, #fff);
  font-size: 12px;
  font-weight: 500;
  cursor: pointer;
  transition: all 0.2s;
  color: var(--text-color, #374151);
}
.co-ctrl-btn:hover:not(:disabled) {
  border-color: #a5b4fc;
  box-shadow: 0 1px 4px rgba(99,102,241,0.12);
}
.co-ctrl-btn:disabled {
  opacity: 0.4;
  cursor: not-allowed;
}
.co-ctrl-btn i {
  font-size: 11px;
}
.co-ctrl-start {
  background: linear-gradient(135deg, #6366f1, #8b5cf6);
  color: #fff;
  border-color: transparent;
}
.co-ctrl-start:hover:not(:disabled) {
  box-shadow: 0 2px 8px rgba(99,102,241,0.3);
}
.co-ctrl-stop {
  color: #ef4444;
  border-color: rgba(239,68,68,0.3);
}
.co-ctrl-stop:hover:not(:disabled) {
  background: rgba(239,68,68,0.06);
}

/* ── Main Layout ───────────────────────────────────────────── */
.co-main {
  display: flex;
  flex: 1;
  min-height: 0;
  overflow: hidden;
}

/* ── Task Sidebar ──────────────────────────────────────────── */
.co-task-sidebar {
  width: 260px;
  flex-shrink: 0;
  border-right: 1px solid var(--border-color, #e6ebf1);
  background: var(--panel-bg, #fff);
  display: flex;
  flex-direction: column;
  overflow: hidden;
}
.co-sidebar-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 14px 16px;
  border-bottom: 1px solid var(--border-color, #e6ebf1);
  flex-shrink: 0;
}
.co-sidebar-header h3 {
  margin: 0;
  font-size: 13px;
  font-weight: 600;
  color: var(--text-color, #374151);
  display: flex;
  align-items: center;
  gap: 8px;
}
.co-sidebar-badge {
  background: var(--primary-alpha, rgba(45,43,135,0.08));
  color: var(--primary-color, #2d2b87);
  font-size: 11px;
  font-weight: 700;
  padding: 1px 7px;
  border-radius: 10px;
}
.co-sidebar-toggle {
  font-size: 11px;
  color: #6b7280;
  cursor: pointer;
  padding: 3px 8px;
  border-radius: 6px;
  border: none;
  background: none;
  transition: background 0.2s;
}
.co-sidebar-toggle:hover {
  background: rgba(0,0,0,0.04);
}
.co-task-list {
  flex: 1;
  overflow-y: auto;
  padding: 8px;
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.co-task-item {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px 10px;
  border-radius: 6px;
  font-size: 12px;
  color: var(--text-color, #374151);
  transition: background 0.15s;
  cursor: default;
}
.co-task-item:hover {
  background: rgba(0,0,0,0.02);
}
.co-task-dot {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  flex-shrink: 0;
}
.co-task-pending .co-task-dot   { background: #9ca3af; }
.co-task-assigned .co-task-dot  { background: #3b82f6; }
.co-task-in_progress .co-task-dot { background: #6366f1; }
.co-task-completed .co-task-dot { background: #22c55e; }
.co-task-failed .co-task-dot    { background: #ef4444; }
.co-task-blocked .co-task-dot   { background: #f59e0b; }
.co-task-name {
  flex: 1;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.co-task-completed .co-task-name {
  color: #9ca3af;
  text-decoration: line-through;
}

/* ── Radial Area ───────────────────────────────────────────── */
.co-radial-area {
  flex: 1;
  position: relative;
  overflow: hidden;
  min-height: 400px;
}

/* ── SVG Connection Layer ──────────────────────────────────── */
.co-svg-layer {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  z-index: 1;
}
.co-connection {
  stroke: #cbd5e1;
  stroke-width: 1.5;
  stroke-dasharray: 8 4;
  fill: none;
  transition: stroke 0.3s;
}
.co-connection.active {
  stroke: #6366f1;
  stroke-width: 2;
  animation: dashFlow 1.5s linear infinite;
}

/* ── Orchestrator Hub ──────────────────────────────────────── */
.co-orchestrator-hub {
  position: absolute;
  width: 120px;
  height: 120px;
  border-radius: 50%;
  background: var(--panel-bg, #fff);
  border: 2px solid var(--border-color, #e6ebf1);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  z-index: 10;
  box-shadow: 0 4px 16px rgba(0,0,0,0.06);
  transition: border-color 0.3s;
}
.co-orchestrator-hub.running {
  border-color: #6366f1;
}
.co-hub-ring {
  position: absolute;
  top: -8px;
  left: -8px;
  right: -8px;
  bottom: -8px;
  border-radius: 50%;
  border: 2px solid rgba(99,102,241,0.3);
  opacity: 0;
  pointer-events: none;
}
.co-orchestrator-hub.running .co-hub-ring {
  opacity: 1;
  animation: hubPulse 2s ease-in-out infinite;
}
.co-hub-icon {
  font-size: 24px;
  color: var(--primary-color, #2d2b87);
  margin-bottom: 4px;
}
.co-hub-status {
  font-size: 11px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  color: #6b7280;
}
.co-orchestrator-hub.running .co-hub-status {
  color: #6366f1;
}
.co-hub-ticker {
  position: absolute;
  bottom: -28px;
  left: 50%;
  transform: translateX(-50%);
  width: 180px;
  text-align: center;
  font-size: 10px;
  color: #9ca3af;
  line-height: 1.4;
  overflow: hidden;
  max-height: 28px;
}

/* ── Agent Clusters ────────────────────────────────────────── */
.co-agent-cluster {
  position: absolute;
  z-index: 5;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  transition: transform 0.3s;
}
.co-cluster-label {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 11px;
  font-weight: 600;
  color: #6b7280;
  white-space: nowrap;
}
.co-cluster-label i {
  font-size: 13px;
}
.co-cluster-count {
  background: rgba(0,0,0,0.06);
  font-size: 10px;
  font-weight: 700;
  padding: 1px 6px;
  border-radius: 8px;
  color: #6b7280;
}
.co-cluster-stack {
  position: relative;
  width: 150px;
  min-height: 80px;
}
.co-cluster-stack:hover .co-agent-card {
  transform: translateY(calc(var(--fan-offset, 0) * 1px));
}

/* ── Agent Cards ───────────────────────────────────────────── */
.co-agent-card {
  width: 150px;
  background: var(--panel-bg, #fff);
  border: 1px solid var(--border-color, #e6ebf1);
  border-radius: 10px;
  padding: 10px;
  display: flex;
  flex-direction: column;
  gap: 5px;
  position: absolute;
  top: 0;
  left: 0;
  transform: translateY(calc(var(--stack-offset, 0) * 1px));
  transition: transform 0.35s ease, opacity 0.35s, box-shadow 0.2s;
  cursor: pointer;
  box-shadow: 0 1px 4px rgba(0,0,0,0.05);
}
.co-agent-card:hover {
  box-shadow: 0 4px 12px rgba(0,0,0,0.08);
  z-index: 20;
}
.co-agent-card-header {
  display: flex;
  align-items: center;
  gap: 6px;
}
.co-agent-led {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  flex-shrink: 0;
}
.co-agent-online .co-agent-led   { background: #22c55e; box-shadow: 0 0 5px rgba(34,197,94,0.4); }
.co-agent-creating .co-agent-led { background: #f59e0b; box-shadow: 0 0 5px rgba(245,158,11,0.4); }
.co-agent-offline .co-agent-led  { background: #ef4444; box-shadow: 0 0 5px rgba(239,68,68,0.4); }
.co-agent-card-header i {
  font-size: 12px;
}
.co-agent-label {
  font-size: 11px;
  font-weight: 600;
  color: var(--text-color, #374151);
  flex: 1;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.co-agent-vmid {
  font-size: 9px;
  color: #9ca3af;
  font-family: 'JetBrains Mono', 'Fira Code', monospace;
}
.co-agent-terminal {
  font-family: 'JetBrains Mono', 'Fira Code', monospace;
  font-size: 9px;
  color: #059669;
  background: #f1f5f9;
  border-radius: 5px;
  padding: 4px 6px;
  min-height: 28px;
  overflow: hidden;
  line-height: 1.5;
}
.co-agent-stats {
  display: flex;
  align-items: center;
  justify-content: space-between;
  font-size: 9px;
  color: #9ca3af;
}

/* Agent entrance/exit animations */
.co-agent-entering {
  animation: agentEntrance 0.5s ease-out forwards;
}
.co-agent-exiting {
  animation: agentExit 0.4s ease-in forwards;
}

/* ── Agent Drawer ──────────────────────────────────────────── */
.co-drawer-overlay {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(0,0,0,0.3);
  z-index: 999;
  opacity: 0;
  transition: opacity 0.3s;
}
.co-drawer-overlay.visible {
  opacity: 1;
}
.co-drawer-panel {
  position: fixed;
  top: 0;
  right: 0;
  width: 50%;
  max-width: 600px;
  height: 100%;
  background: var(--panel-bg, #fff);
  z-index: 1000;
  transform: translateX(100%);
  transition: transform 0.3s ease;
  display: flex;
  flex-direction: column;
  box-shadow: -4px 0 24px rgba(0,0,0,0.1);
}
.co-drawer-panel.open {
  transform: translateX(0);
}
.co-drawer-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 16px 20px;
  border-bottom: 1px solid var(--border-color, #e6ebf1);
  flex-shrink: 0;
}
.co-drawer-header h3 {
  margin: 0;
  font-size: 15px;
  font-weight: 600;
}
.co-drawer-close {
  width: 28px;
  height: 28px;
  border-radius: 6px;
  border: none;
  background: none;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #6b7280;
  font-size: 14px;
  transition: background 0.15s;
}
.co-drawer-close:hover {
  background: rgba(0,0,0,0.05);
}
.co-drawer-tabs {
  display: flex;
  border-bottom: 1px solid var(--border-color, #e6ebf1);
  flex-shrink: 0;
}
.co-drawer-tab {
  flex: 1;
  padding: 10px 16px;
  font-size: 12px;
  font-weight: 500;
  text-align: center;
  color: #6b7280;
  border: none;
  background: none;
  cursor: pointer;
  border-bottom: 2px solid transparent;
  transition: all 0.2s;
}
.co-drawer-tab.active {
  color: var(--primary-color, #2d2b87);
  border-bottom-color: var(--primary-color, #2d2b87);
}
.co-drawer-body {
  flex: 1;
  overflow-y: auto;
  padding: 16px 20px;
}
.co-drawer-terminal {
  background: #1e293b;
  border-radius: 8px;
  padding: 12px 14px;
  font-family: 'JetBrains Mono', 'Fira Code', monospace;
  font-size: 11px;
  line-height: 1.7;
  color: #4ade80;
  max-height: 100%;
  overflow-y: auto;
}
.co-drawer-overview-row {
  display: flex;
  justify-content: space-between;
  padding: 8px 0;
  border-bottom: 1px solid var(--border-color, #e6ebf1);
  font-size: 13px;
}
.co-drawer-overview-row:last-child {
  border-bottom: none;
}
.co-drawer-overview-label {
  color: #6b7280;
}
.co-drawer-overview-value {
  font-weight: 600;
  color: var(--text-color, #374151);
}
.co-drawer-task-item {
  padding: 8px 10px;
  border-radius: 6px;
  background: rgba(0,0,0,0.02);
  margin-bottom: 4px;
  font-size: 12px;
  display: flex;
  align-items: center;
  gap: 8px;
}

/* ── Animations ────────────────────────────────────────────── */
@keyframes agentEntrance {
  0%   { opacity: 0; transform: translateY(var(--stack-offset, 0)) scale(0.3); }
  70%  { opacity: 1; transform: translateY(var(--stack-offset, 0)) scale(1.05); }
  100% { opacity: 1; transform: translateY(calc(var(--stack-offset, 0) * 1px)) scale(1); }
}

@keyframes agentExit {
  0%   { opacity: 1; transform: translateY(calc(var(--stack-offset, 0) * 1px)) scale(1); }
  100% { opacity: 0; transform: translateY(calc(var(--stack-offset, 0) * 1px)) scale(0.5); }
}

@keyframes hubPulse {
  0%   { transform: scale(1); opacity: 0.6; }
  50%  { transform: scale(1.12); opacity: 0.2; }
  100% { transform: scale(1); opacity: 0.6; }
}

@keyframes dashFlow {
  0%   { stroke-dashoffset: 24; }
  100% { stroke-dashoffset: 0; }
}

/* ── Responsive ────────────────────────────────────────────── */
@media (max-width: 1024px) {
  .co-main {
    flex-direction: column;
  }
  .co-task-sidebar {
    width: 100%;
    max-height: 200px;
    border-right: none;
    border-bottom: 1px solid var(--border-color, #e6ebf1);
  }
  .co-radial-area {
    min-height: 350px;
  }
  .co-header {
    flex-wrap: wrap;
  }
}

@media (max-width: 768px) {
  .co-drawer-panel {
    width: 100%;
    max-width: none;
  }
  .co-header-center {
    order: 3;
    width: 100%;
    justify-content: center;
  }
  .co-stats-bar {
    flex-wrap: wrap;
    gap: 10px;
    justify-content: center;
  }
  .co-build-controls {
    flex-wrap: wrap;
  }
}

/* ── Status Badge ──────────────────────────────────────────── */
.co-status-badge {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  font-size: 11px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  padding: 3px 10px;
  border-radius: 12px;
  background: rgba(156,163,175,0.12);
  color: #6b7280;
  margin-left: 10px;
}
.co-status-badge::before {
  content: '';
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: currentColor;
  flex-shrink: 0;
}
.co-status-badge.running  { color: #22c55e; background: rgba(34,197,94,0.1); }
.co-status-badge.running::before { box-shadow: 0 0 6px rgba(34,197,94,0.5); }
.co-status-badge.paused   { color: #f59e0b; background: rgba(245,158,11,0.1); }
.co-status-badge.stopped  { color: #ef4444; background: rgba(239,68,68,0.1); }
.co-status-badge.starting { color: #6366f1; background: rgba(99,102,241,0.1); }
.co-status-badge.stopping { color: #f97316; background: rgba(249,115,22,0.1); }
.co-status-badge.failed   { color: #ef4444; background: rgba(239,68,68,0.15); }

/* ── Progress Bar ──────────────────────────────────────────── */
.co-progress-section {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-right: 16px;
}
.co-progress-bar {
  width: 140px;
  height: 6px;
  background: rgba(0,0,0,0.06);
  border-radius: 4px;
  overflow: hidden;
}
.co-progress-fill {
  height: 100%;
  background: linear-gradient(90deg, #6366f1, #8b5cf6);
  border-radius: 4px;
  transition: width 0.5s ease;
  width: 0%;
}
.co-progress-text {
  font-size: 11px;
  font-weight: 600;
  color: var(--text-color, #374151);
  white-space: nowrap;
}

/* ── Tab Bar (Content Area) ────────────────────────────────── */
.co-content {
  flex: 1;
  display: flex;
  flex-direction: column;
  min-width: 0;
  overflow: hidden;
}
.co-tab-bar {
  display: flex;
  border-bottom: 1px solid var(--border-color, #e6ebf1);
  flex-shrink: 0;
  background: var(--panel-bg, #fff);
}
.co-tab {
  padding: 10px 20px;
  font-size: 12px;
  font-weight: 500;
  color: #6b7280;
  border: none;
  background: none;
  cursor: pointer;
  border-bottom: 2px solid transparent;
  transition: all 0.2s;
  display: flex;
  align-items: center;
  gap: 6px;
}
.co-tab:hover { color: var(--text-color, #374151); }
.co-tab.active {
  color: var(--primary-color, #2d2b87);
  border-bottom-color: var(--primary-color, #2d2b87);
}
.co-tab i { font-size: 12px; }
.co-tab-badge {
  font-size: 10px;
  font-weight: 700;
  padding: 1px 6px;
  border-radius: 8px;
  background: rgba(0,0,0,0.06);
  color: #6b7280;
}
.co-tab.active .co-tab-badge {
  background: var(--primary-alpha, rgba(45,43,135,0.08));
  color: var(--primary-color, #2d2b87);
}
.co-tab-content {
  flex: 1;
  overflow: hidden;
  position: relative;
}

/* ── Modal ──────────────────────────────────────────────────── */
.co-modal-overlay {
  position: fixed;
  top: 0; left: 0; right: 0; bottom: 0;
  background: rgba(0,0,0,0.45);
  z-index: 1100;
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0;
  transition: opacity 0.2s;
}
.co-modal-overlay.visible { opacity: 1; }
.co-modal {
  background: var(--panel-bg, #fff);
  border-radius: 14px;
  width: 520px;
  max-width: 95vw;
  max-height: 85vh;
  display: flex;
  flex-direction: column;
  box-shadow: 0 20px 60px rgba(0,0,0,0.18);
  transform: translateY(10px);
  transition: transform 0.2s;
}
.co-modal-overlay.visible .co-modal { transform: translateY(0); }
.co-modal-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 18px 22px;
  border-bottom: 1px solid var(--border-color, #e6ebf1);
  flex-shrink: 0;
}
.co-modal-header h3 { margin: 0; font-size: 16px; font-weight: 600; }
.co-modal-close {
  width: 30px; height: 30px;
  border-radius: 8px; border: none; background: none;
  cursor: pointer; display: flex; align-items: center; justify-content: center;
  color: #6b7280; font-size: 15px; transition: background 0.15s;
}
.co-modal-close:hover { background: rgba(0,0,0,0.05); }
.co-modal-body {
  flex: 1;
  overflow-y: auto;
  padding: 20px 22px;
  display: flex;
  flex-direction: column;
  gap: 20px;
}
.co-modal-footer {
  display: flex;
  justify-content: flex-end;
  gap: 10px;
  padding: 14px 22px;
  border-top: 1px solid var(--border-color, #e6ebf1);
  flex-shrink: 0;
}
.co-modal-section {
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.co-modal-label {
  font-size: 12px;
  font-weight: 600;
  color: #6b7280;
  text-transform: uppercase;
  letter-spacing: 0.4px;
}
.co-modal-select {
  padding: 8px 12px;
  border: 1px solid var(--border-color, #e6ebf1);
  border-radius: 8px;
  font-size: 13px;
  background: var(--panel-bg, #fff);
  color: var(--text-color, #374151);
  outline: none;
  transition: border-color 0.2s;
}
.co-modal-select:focus { border-color: #6366f1; }

/* ── Mode Selector ──────────────────────────────────────────── */
.co-mode-selector {
  display: flex;
  gap: 8px;
}
.co-mode-btn {
  flex: 1;
  padding: 10px 14px;
  border: 2px solid var(--border-color, #e6ebf1);
  border-radius: 10px;
  background: var(--panel-bg, #fff);
  font-size: 13px;
  font-weight: 500;
  cursor: pointer;
  text-align: center;
  transition: all 0.2s;
  color: var(--text-color, #374151);
}
.co-mode-btn:hover { border-color: #a5b4fc; }
.co-mode-btn.active {
  border-color: #6366f1;
  background: rgba(99,102,241,0.06);
  color: #6366f1;
}

/* ── Scale Controls ─────────────────────────────────────────── */
.co-scale-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 6px 0;
}
.co-scale-row-label {
  font-size: 13px;
  font-weight: 500;
  color: var(--text-color, #374151);
  display: flex;
  align-items: center;
  gap: 8px;
}
.co-scale-row-label i { font-size: 14px; }
.co-scale-control {
  display: flex;
  align-items: center;
  gap: 4px;
}
.co-scale-btn {
  width: 28px; height: 28px;
  border-radius: 6px;
  border: 1px solid var(--border-color, #e6ebf1);
  background: var(--panel-bg, #fff);
  cursor: pointer;
  display: flex; align-items: center; justify-content: center;
  font-size: 14px; font-weight: 600; color: #6b7280;
  transition: all 0.15s;
}
.co-scale-btn:hover { border-color: #6366f1; color: #6366f1; }
.co-scale-input {
  width: 38px;
  text-align: center;
  padding: 4px;
  border: 1px solid var(--border-color, #e6ebf1);
  border-radius: 6px;
  font-size: 13px;
  font-weight: 600;
  color: var(--text-color, #374151);
}

/* ── Phase Checkboxes ───────────────────────────────────────── */
.co-phase-checks {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}
.co-phase-check {
  display: flex;
  align-items: center;
  gap: 5px;
  font-size: 12px;
  color: var(--text-color, #374151);
}
.co-phase-check input { accent-color: #6366f1; }

/* ── Log Sources ────────────────────────────────────────────── */
.co-log-sources {
  display: flex;
  gap: 6px;
  padding: 10px 14px;
  overflow-x: auto;
  flex-shrink: 0;
  border-bottom: 1px solid var(--border-color, #e6ebf1);
  background: var(--panel-bg, #fff);
}
.co-log-source {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 5px 12px;
  border-radius: 8px;
  border: 1px solid var(--border-color, #e6ebf1);
  background: var(--panel-bg, #fff);
  font-size: 11px;
  font-weight: 500;
  cursor: pointer;
  white-space: nowrap;
  color: #6b7280;
  transition: all 0.15s;
}
.co-log-source:hover { border-color: #a5b4fc; }
.co-log-source.active {
  border-color: #6366f1;
  background: rgba(99,102,241,0.06);
  color: #6366f1;
}
.co-log-source-badge {
  font-size: 9px;
  font-weight: 700;
  padding: 1px 5px;
  border-radius: 6px;
  background: rgba(0,0,0,0.06);
  color: #6b7280;
}
.co-log-source-error-badge {
  font-size: 9px;
  font-weight: 700;
  padding: 1px 5px;
  border-radius: 6px;
  background: rgba(239,68,68,0.1);
  color: #ef4444;
}

/* ── Log Filters ────────────────────────────────────────────── */
.co-log-filters {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px 14px;
  flex-shrink: 0;
  border-bottom: 1px solid var(--border-color, #e6ebf1);
  background: var(--panel-bg, #fff);
}
.co-log-level-filter {
  padding: 5px 10px;
  border: 1px solid var(--border-color, #e6ebf1);
  border-radius: 6px;
  font-size: 11px;
  background: var(--panel-bg, #fff);
  color: var(--text-color, #374151);
  outline: none;
  cursor: pointer;
}
.co-log-search {
  flex: 1;
  min-width: 120px;
  padding: 5px 10px;
  border: 1px solid var(--border-color, #e6ebf1);
  border-radius: 6px;
  font-size: 11px;
  background: var(--panel-bg, #fff);
  color: var(--text-color, #374151);
  outline: none;
}
.co-log-search:focus { border-color: #6366f1; }
.co-log-tail-indicator {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-size: 10px;
  font-weight: 600;
  text-transform: uppercase;
  color: #22c55e;
  letter-spacing: 0.4px;
}
.co-log-tail-indicator::before {
  content: '';
  width: 6px; height: 6px;
  border-radius: 50%;
  background: #22c55e;
  animation: livePulse 1.5s ease-in-out infinite;
}
@keyframes livePulse {
  0%, 100% { opacity: 1; }
  50%      { opacity: 0.3; }
}

/* ── Log Viewer (Dark Terminal) ─────────────────────────────── */
.co-log-viewer {
  flex: 1;
  background: #1a1b26;
  overflow-y: auto;
  font-family: 'JetBrains Mono', 'Fira Code', 'Cascadia Code', monospace;
  font-size: 12px;
  line-height: 1.65;
  padding: 12px 16px;
}
.co-log-load-older {
  text-align: center;
  padding: 8px;
}
.co-log-load-older button {
  padding: 4px 14px;
  border-radius: 6px;
  border: 1px solid rgba(255,255,255,0.15);
  background: transparent;
  color: #7aa2f7;
  font-size: 11px;
  cursor: pointer;
  transition: background 0.15s;
}
.co-log-load-older button:hover { background: rgba(255,255,255,0.06); }
.co-log-entries { }
.co-log-entry {
  display: flex;
  align-items: baseline;
  gap: 8px;
  padding: 1px 0;
  border-bottom: 1px solid rgba(255,255,255,0.03);
}
.co-log-ts {
  color: #565f89;
  font-size: 10px;
  flex-shrink: 0;
  min-width: 70px;
}
.co-log-level-badge {
  font-size: 9px;
  font-weight: 700;
  padding: 1px 5px;
  border-radius: 4px;
  text-transform: uppercase;
  flex-shrink: 0;
  min-width: 38px;
  text-align: center;
}
.co-log-badge-debug { background: rgba(86,95,137,0.3); color: #565f89; }
.co-log-badge-info  { background: rgba(122,162,247,0.2); color: #7aa2f7; }
.co-log-badge-warn  { background: rgba(224,175,104,0.2); color: #e0af68; }
.co-log-badge-error { background: rgba(247,118,142,0.2); color: #f7768e; }
.co-log-badge-fatal { background: rgba(247,118,142,0.35); color: #ff5370; }
.co-log-source-tag {
  font-size: 10px;
  color: #bb9af7;
  flex-shrink: 0;
  max-width: 120px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.co-log-msg {
  color: #a9b1d6;
  word-break: break-word;
  flex: 1;
}
.co-log-empty {
  text-align: center;
  padding: 40px 20px;
  color: #565f89;
  font-size: 13px;
}
.co-log-empty i {
  display: block;
  font-size: 28px;
  margin-bottom: 10px;
  opacity: 0.5;
}

/* ── History Table ──────────────────────────────────────────── */
.co-history-container {
  padding: 20px;
  overflow-y: auto;
  height: 100%;
}
.co-history-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 16px;
}
.co-history-header h3 {
  margin: 0;
  font-size: 15px;
  font-weight: 600;
  color: var(--text-color, #374151);
}
.co-history-refresh {
  padding: 6px 14px;
  border: 1px solid var(--border-color, #e6ebf1);
  border-radius: 8px;
  background: var(--panel-bg, #fff);
  font-size: 12px;
  cursor: pointer;
  color: #6b7280;
  transition: all 0.15s;
}
.co-history-refresh:hover { border-color: #a5b4fc; color: #6366f1; }
.co-history-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 12px;
}
.co-history-table th {
  text-align: left;
  padding: 10px 12px;
  font-size: 11px;
  font-weight: 600;
  color: #6b7280;
  text-transform: uppercase;
  letter-spacing: 0.3px;
  border-bottom: 2px solid var(--border-color, #e6ebf1);
}
.co-history-table td {
  padding: 10px 12px;
  color: var(--text-color, #374151);
  border-bottom: 1px solid var(--border-color, #e6ebf1);
}
.co-history-table tr:hover td {
  background: rgba(0,0,0,0.015);
}
.co-history-status {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-size: 11px;
  font-weight: 600;
  padding: 2px 8px;
  border-radius: 6px;
}
.co-history-status.completed { background: rgba(34,197,94,0.1); color: #22c55e; }
.co-history-status.stopped   { background: rgba(239,68,68,0.1); color: #ef4444; }
.co-history-status.running   { background: rgba(99,102,241,0.1); color: #6366f1; }
.co-history-status.failed    { background: rgba(239,68,68,0.15); color: #ef4444; }
.co-history-pagination {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  margin-top: 16px;
}
.co-history-pagination button {
  padding: 5px 12px;
  border: 1px solid var(--border-color, #e6ebf1);
  border-radius: 6px;
  background: var(--panel-bg, #fff);
  font-size: 12px;
  cursor: pointer;
  color: #6b7280;
  transition: all 0.15s;
}
.co-history-pagination button:hover:not(:disabled) { border-color: #6366f1; color: #6366f1; }
.co-history-pagination button:disabled { opacity: 0.4; cursor: not-allowed; }
.co-history-pagination span {
  font-size: 12px;
  color: #6b7280;
}
.co-history-empty {
  text-align: center;
  padding: 40px 20px;
  color: #9ca3af;
  font-size: 13px;
}
.co-history-empty i {
  display: block;
  font-size: 28px;
  margin-bottom: 10px;
  opacity: 0.5;
}

/* ── Sidebar Stats ──────────────────────────────────────────── */
.co-sidebar-stats {
  display: flex;
  gap: 10px;
  padding: 8px 16px;
  font-size: 11px;
  color: #6b7280;
  border-bottom: 1px solid var(--border-color, #e6ebf1);
  flex-shrink: 0;
}
.co-sidebar-stats span {
  display: flex;
  align-items: center;
  gap: 3px;
}

/* ── Retry Overlay (503) ────────────────────────────────────── */
.co-retry-overlay {
  position: absolute;
  top: 0; left: 0; right: 0; bottom: 0;
  background: rgba(0,0,0,0.6);
  z-index: 50;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 12px;
  border-radius: 8px;
}
.co-retry-countdown {
  font-size: 42px;
  font-weight: 700;
  color: #fff;
  font-variant-numeric: tabular-nums;
}
.co-retry-text {
  font-size: 14px;
  color: rgba(255,255,255,0.7);
}

/* ── Cluster Scale Buttons ──────────────────────────────────── */
.co-cluster-scale {
  display: flex;
  gap: 3px;
  margin-top: 4px;
}
.co-cluster-scale-btn {
  width: 22px; height: 22px;
  border-radius: 5px;
  border: 1px solid rgba(0,0,0,0.1);
  background: var(--panel-bg, #fff);
  cursor: pointer;
  display: flex; align-items: center; justify-content: center;
  font-size: 12px; font-weight: 700; color: #6b7280;
  transition: all 0.15s;
}
.co-cluster-scale-btn:hover { border-color: #6366f1; color: #6366f1; }

/* ── Logs Container (flex layout) ───────────────────────────── */
.co-logs-container {
  display: flex;
  flex-direction: column;
  height: 100%;
}

/* ── Console Responsive Updates ─────────────────────────────── */
@media (max-width: 1024px) {
  .co-content {
    min-height: 350px;
  }
  .co-tab-bar {
    overflow-x: auto;
  }
  .co-log-filters {
    flex-wrap: wrap;
  }
}

@media (max-width: 768px) {
  .co-tab { padding: 8px 14px; font-size: 11px; }
  .co-log-sources { gap: 4px; padding: 8px 10px; }
  .co-log-source { font-size: 10px; padding: 4px 8px; }
  .co-log-viewer { font-size: 11px; padding: 8px 10px; }
  .co-log-entry { gap: 5px; }
  .co-log-ts { min-width: 55px; font-size: 9px; }
  .co-history-container { padding: 12px; }
  .co-history-table { font-size: 11px; }
  .co-modal { width: 100%; max-width: none; margin: 10px; border-radius: 10px; }
}

/* ============================================================
   Go to Console Button (Build Stage Pages)
   ============================================================ */
.go-to-console-btn {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 6px 16px;
  background: linear-gradient(135deg, #6366f1, #8b5cf6);
  color: #fff;
  border: none;
  border-radius: 999px;
  font-size: 0.8rem;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.25s ease;
  box-shadow: 0 2px 8px rgba(99, 102, 241, 0.3);
  white-space: nowrap;
}
.go-to-console-btn:hover {
  background: linear-gradient(135deg, #4f46e5, #7c3aed);
  box-shadow: 0 4px 16px rgba(99, 102, 241, 0.45);
  transform: translateY(-1px);
}
.go-to-console-btn:active {
  transform: translateY(0);
}
.go-to-console-btn .gtc-icon {
  position: relative;
  font-size: 0.85rem;
}
.go-to-console-btn .gtc-pulse {
  position: absolute;
  top: -2px;
  right: -4px;
  width: 6px;
  height: 6px;
  background: #34d399;
  border-radius: 50%;
  animation: gtcPulse 1.8s ease-in-out infinite;
}
.go-to-console-btn .gtc-arrow {
  font-size: 0.7rem;
  opacity: 0.75;
  transition: transform 0.2s;
}
.go-to-console-btn:hover .gtc-arrow {
  transform: translateX(2px);
  opacity: 1;
}
@keyframes gtcPulse {
  0%, 100% { opacity: 1; transform: scale(1); }
  50% { opacity: 0.4; transform: scale(1.6); }
}

/* ============================================================
   Console Status Dot (Top Bar #headerConsoleBtn)
   ============================================================ */
#headerConsoleBtn {
  position: relative;
  width: 30px !important;
  height: 30px !important;
  min-width: 30px !important;
  min-height: 30px !important;
  font-size: 0.8rem;
  background: linear-gradient(135deg, #6366f1, #8b5cf6) !important;
  color: #fff !important;
  border-radius: 8px;
  box-shadow: 0 2px 8px rgba(99, 102, 241, 0.3);
  transition: all 0.25s ease;
}
#headerConsoleBtn:hover {
  background: linear-gradient(135deg, #4f46e5, #7c3aed) !important;
  box-shadow: 0 4px 14px rgba(99, 102, 241, 0.45);
  transform: translateY(-1px);
}
.console-status-dot {
  position: absolute;
  top: 2px;
  right: 2px;
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: #9ca3af;
  border: 1.5px solid var(--bg-primary, #fff);
  transition: background 0.3s;
}
#headerConsoleBtn.console-running .console-status-dot {
  background: #22c55e;
  animation: consoleStatusPulse 1.5s ease-in-out infinite;
}
@keyframes consoleStatusPulse {
  0%, 100% { box-shadow: 0 0 0 0 rgba(34, 197, 94, 0.5); }
  50% { box-shadow: 0 0 0 4px rgba(34, 197, 94, 0); }
}