/* ============================================================
   CitationGuard AI — Components (components.css)
   ============================================================ */

/* ── Buttons ─────────────────────────────────────────────────── */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 0.5rem;
  padding: 0.625rem 1.25rem; border-radius: 12px;
  font-family: var(--font-sans); font-size: var(--text-sm); font-weight: 600;
  border: 1px solid transparent; cursor: pointer;
  transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1); white-space: nowrap;
  text-decoration: none !important; line-height: 1.4;
  letter-spacing: -0.01em;
}
.btn:disabled { opacity: 0.55; cursor: not-allowed; }
.btn-sm  { padding: 0.4rem 0.875rem; font-size: var(--text-xs); border-radius: 8px; font-weight: 600; }
.btn-lg  { padding: 0.75rem 1.5rem;  font-size: var(--text-base); border-radius: 12px; font-weight: 700; }
.btn-xl  { padding: 0.875rem 1.75rem; font-size: 1rem; border-radius: 12px; font-weight: 700; }
.btn-icon{ padding: 0.5rem; border-radius: 10px; }
.btn-icon-sm { padding: 0.375rem; border-radius: 8px; }

.btn-primary { 
  background: var(--primary-600) !important; 
  color: #FFFFFF !important; 
  box-shadow: 0 4px 12px rgba(79, 70, 229, 0.25); 
}
.btn-primary:hover { 
  background: var(--primary-700) !important; 
  transform: translateY(-1px); 
  box-shadow: 0 8px 20px rgba(79, 70, 229, 0.35); 
}

.btn-gradient {
  background: linear-gradient(135deg, #4F46E5 0%, #7C3AED 100%) !important;
  color: #FFFFFF !important;
  border: none !important;
  font-weight: 700 !important;
  box-shadow: 0 4px 14px rgba(79, 70, 229, 0.3);
}
.btn-gradient:hover {
  background: linear-gradient(135deg, #4338CA 0%, #6D28D9 100%) !important;
  color: #FFFFFF !important;
  transform: translateY(-2px);
  box-shadow: 0 10px 25px rgba(79, 70, 229, 0.4);
}

.btn-secondary { 
  background: #FFFFFF !important; 
  color: #1E293B !important; 
  border: 1px solid #CBD5E1 !important; 
  font-weight: 600 !important;
  box-shadow: 0 2px 6px rgba(15, 23, 42, 0.05);
}
.btn-secondary:hover { 
  background: #F8FAFC !important; 
  color: #0F172A !important;
  border-color: #94A3B8 !important;
  transform: translateY(-1px); 
  box-shadow: 0 4px 12px rgba(15, 23, 42, 0.08);
}

.btn-ghost { background: transparent; color: var(--gray-700); border-color: transparent; font-weight: 600; }
.btn-ghost:hover { background: var(--gray-100); color: var(--gray-900); }

.btn-danger { background: var(--danger-600) !important; color: #ffffff !important; font-weight: 600; }
.btn-danger:hover { background: var(--danger-700) !important; transform: translateY(-1px); }

.btn-success { background: var(--success-600) !important; color: #ffffff !important; font-weight: 600; box-shadow: 0 4px 12px rgba(16, 185, 129, 0.25); }
.btn-success:hover { background: var(--success-700) !important; transform: translateY(-1px); }

.btn-outline-primary { background: transparent; color: var(--primary-600); border-color: var(--primary-300); font-weight: 600; }
.btn-outline-primary:hover { background: var(--primary-50); }


/* ── Cards ───────────────────────────────────────────────────── */
.card {
  background: var(--color-surface);
  border: 1px solid rgba(99, 102, 241, 0.08);
  border-radius: var(--radius-xl);
  box-shadow: 0 4px 20px -2px rgba(99, 102, 241, 0.04), 0 2px 6px -1px rgba(99, 102, 241, 0.03);
  transition: all var(--transition-base);
}
.card:hover {
  border-color: var(--primary-300);
  box-shadow: 0 10px 25px -3px rgba(99, 102, 241, 0.08), 0 4px 12px -2px rgba(99, 102, 241, 0.06);
}
.card-hover:hover {
  transform: translateY(-2px);
  border-color: var(--primary-300);
  box-shadow: 0 10px 25px -3px rgba(99, 102, 241, 0.08), 0 4px 12px -2px rgba(99, 102, 241, 0.06);
}
.card-body { padding: var(--sp-6); }
.card-header { padding: var(--sp-4) var(--sp-6); border-bottom: 2px solid var(--color-border); display: flex; align-items: center; justify-content: space-between; }
.card-footer { padding: var(--sp-4) var(--sp-6); border-top: 2px solid var(--color-border); }

.card-glass {
  background: var(--glass-bg); backdrop-filter: var(--glass-blur);
  border: 1px solid var(--glass-border); border-radius: var(--radius-2xl);
}

/* ── Badges ──────────────────────────────────────────────────── */
.badge {
  display: inline-flex; align-items: center; gap: 4px;
  padding: 2px 8px; border-radius: var(--radius-full);
  font-size: var(--text-xs); font-weight: var(--fw-semibold); line-height: 1.5;
}
.badge-blue    { background: var(--primary-100);  color: var(--primary-700);  }
.badge-purple  { background: #EDE9FE;             color: var(--purple-700);   }
.badge-green   { background: var(--success-50);   color: var(--success-700);  }
.badge-yellow  { background: var(--warning-50);   color: var(--warning-600);  }
.badge-red     { background: var(--danger-50);    color: var(--danger-700);   }
.badge-gray    { background: var(--gray-100);     color: var(--gray-600);     }
.badge-orange  { background: #FFF7ED;             color: #9A3412;             }

.badge-dot::before {
  content: ''; width: 6px; height: 6px; border-radius: 50%; background: currentColor;
}

/* Risk Badges */
.risk-low      { background: var(--success-50); color: var(--success-700); }
.risk-moderate { background: var(--warning-50); color: var(--warning-600); }
.risk-high     { background: var(--danger-50);  color: var(--danger-700);  }
.risk-critical { background: #FFF7ED;           color: #9A3412;            }

/* ── Form Elements ───────────────────────────────────────────── */
.form-group   { display: flex; flex-direction: column; gap: var(--sp-2); }
.form-label   { font-size: var(--text-sm); font-weight: var(--fw-medium); color: var(--gray-700); }
.form-hint    { font-size: var(--text-xs); color: var(--color-text-muted); }
.form-error   { font-size: var(--text-xs); color: var(--danger-600); }

.input, .textarea, .select {
  width: 100%; padding: 0.625rem 0.875rem;
  border: 1px solid var(--color-border); border-radius: var(--radius-lg);
  font-family: var(--font-sans); font-size: var(--text-sm); color: var(--color-text);
  background: #fff; transition: border-color var(--transition-fast), box-shadow var(--transition-fast);
  appearance: none;
}
.input:focus, .textarea:focus, .select:focus {
  outline: none; border-color: var(--primary-500);
  box-shadow: 0 0 0 3px rgba(37,99,235,0.1);
}
.input::placeholder, .textarea::placeholder { color: var(--color-text-subtle); }
.input-lg { padding: 0.75rem 1rem; font-size: var(--text-base); }

.input-group { display: flex; align-items: stretch; }
.input-group .input { border-radius: var(--radius-lg) 0 0 var(--radius-lg); flex: 1; }
.input-group .btn   { border-radius: 0 var(--radius-lg) var(--radius-lg) 0; border-left: none; }
.input-prefix { position: relative; }
.input-prefix .icon { position: absolute; left: 0.75rem; top: 50%; transform: translateY(-50%); color: var(--color-text-muted); pointer-events: none; }
.input-prefix .input { padding-left: 2.5rem; }

.select { background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 20 20'%3e%3cpath stroke='%236b7280' stroke-linecap='round' stroke-linejoin='round' stroke-width='1.5' d='M6 8l4 4 4-4'/%3e%3c/svg%3e"); background-position: right 0.75rem center; background-repeat: no-repeat; background-size: 1rem; padding-right: 2.5rem; }

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

.checkbox-group, .radio-group { display: flex; align-items: center; gap: var(--sp-2); }
input[type="checkbox"], input[type="radio"] { width: 1rem; height: 1rem; accent-color: var(--primary-600); cursor: pointer; }

/* ── Sidebar Navigation ──────────────────────────────────────── */
.sidebar { background: var(--gray-900); color: var(--sidebar-text); }
.sidebar-logo { display: flex; align-items: center; gap: var(--sp-3); padding: var(--sp-5) var(--sp-4); border-bottom: 1px solid rgba(255,255,255,0.08); }
.sidebar-logo .logo-icon { width: 36px; height: 36px; background: linear-gradient(135deg, var(--primary-500), var(--purple-600)); border-radius: var(--radius-lg); display: flex; align-items: center; justify-content: center; color: #fff; font-size: var(--text-lg); flex-shrink: 0; }
.sidebar-title { font-size: var(--text-base); font-weight: var(--fw-bold); color: #fff; }
.sidebar-subtitle { font-size: var(--text-xs); color: var(--gray-400); margin-top: 1px; }

.sidebar-nav { flex: 1; padding: var(--sp-4) 0; overflow-y: auto; }
.nav-section { margin-bottom: var(--sp-4); }
.nav-section-label { font-size: 10px; font-weight: var(--fw-semibold); text-transform: uppercase; letter-spacing: 0.08em; color: var(--gray-500); padding: 0 var(--sp-4); margin-bottom: var(--sp-2); }
.nav-item {
  display: flex; align-items: center; gap: var(--sp-3);
  padding: 0.625rem var(--sp-4); margin: 2px var(--sp-3);
  border-radius: var(--radius-lg); color: var(--sidebar-text);
  cursor: pointer; transition: all var(--transition-base);
  text-decoration: none; font-size: var(--text-sm);
  border-left: 3px solid transparent;
}
.nav-item:hover { background: rgba(255,255,255,0.06); color: #fff; padding-left: calc(var(--sp-4) + 2px); }
.nav-item.active {
  background: rgba(99, 102, 241, 0.12);
  color: var(--primary-300);
  border-left-color: var(--primary-500);
  font-weight: var(--fw-semibold);
}
.nav-item .nav-icon { width: 18px; height: 18px; flex-shrink: 0; }
.nav-badge { margin-left: auto; background: var(--danger-500); color: #fff; font-size: 10px; padding: 1px 6px; border-radius: var(--radius-full); font-weight: var(--fw-bold); }

.sidebar-user { padding: var(--sp-4); border-top: 1px solid rgba(255,255,255,0.08); display: flex; align-items: center; gap: var(--sp-3); }
.user-avatar { width: 36px; height: 36px; border-radius: 50%; background: linear-gradient(135deg, var(--primary-400), var(--purple-500)); display: flex; align-items: center; justify-content: center; color: #fff; font-size: var(--text-sm); font-weight: var(--fw-bold); flex-shrink: 0; }
.user-info .user-name  { font-size: var(--text-sm); font-weight: var(--fw-medium); color: #fff; }
.user-info .user-role  { font-size: var(--text-xs); color: var(--gray-400); text-transform: capitalize; }

/* ── Topbar ───────────────────────────────────────────────────── */
.topbar-title { font-family: var(--font-display); font-size: 1.25rem; font-weight: 800; color: var(--gray-900); letter-spacing: -0.02em; white-space: nowrap; flex-shrink: 0; }
.topbar-search { flex: 1; max-width: 380px; margin: 0 1rem; }
.topbar-actions { display: flex; align-items: center; gap: 0.75rem; margin-left: auto; flex-shrink: 0; }
.notification-btn { position: relative; }
.notification-dot { position: absolute; top: 6px; right: 6px; width: 8px; height: 8px; background: var(--danger-500); border-radius: 50%; border: 2px solid #fff; }


/* ── Stats/KPI Cards ─────────────────────────────────────────── */
.kpi-card { background: #fff; border: 1px solid var(--color-border); border-radius: var(--radius-xl); padding: var(--sp-5) var(--sp-6); display: flex; align-items: flex-start; gap: var(--sp-4); transition: all var(--transition-base); }
.kpi-card:hover { box-shadow: var(--shadow-md); transform: translateY(-1px); }
.kpi-icon { width: 48px; height: 48px; border-radius: var(--radius-xl); display: flex; align-items: center; justify-content: center; flex-shrink: 0; }
.kpi-icon-blue   { background: var(--primary-50);  color: var(--primary-600);  }
.kpi-icon-purple { background: #EDE9FE;            color: var(--purple-600);   }
.kpi-icon-green  { background: var(--success-50);  color: var(--success-600);  }
.kpi-icon-orange { background: #FFF7ED;            color: #EA580C;             }
.kpi-icon-red    { background: var(--danger-50);   color: var(--danger-600);   }
.kpi-label { font-size: var(--text-sm); color: var(--color-text-muted); margin-bottom: var(--sp-1); }
.kpi-value { font-size: var(--text-3xl); font-weight: var(--fw-bold); color: var(--gray-900); line-height: 1; }
.kpi-change { font-size: var(--text-xs); margin-top: var(--sp-1); }
.kpi-change.up   { color: var(--success-600); }
.kpi-change.down { color: var(--danger-600); }

/* ── Progress Bar ────────────────────────────────────────────── */
.progress { height: 6px; background: var(--gray-100); border-radius: var(--radius-full); overflow: hidden; }
.progress-bar { height: 100%; border-radius: var(--radius-full); transition: width 0.6s cubic-bezier(0.4,0,0.2,1); }
.progress-primary  { background: linear-gradient(90deg, var(--primary-500), var(--primary-600)); }
.progress-green    { background: linear-gradient(90deg, var(--success-400), var(--success-600)); }
.progress-orange   { background: linear-gradient(90deg, var(--warning-400), var(--warning-600)); }
.progress-red      { background: linear-gradient(90deg, var(--danger-400), var(--danger-600)); }
.progress-lg { height: 10px; }

/* ── Ring / Donut Score ──────────────────────────────────────── */
.score-ring { position: relative; display: inline-flex; align-items: center; justify-content: center; }
.score-ring svg { transform: rotate(-90deg); }
.score-ring-value { position: absolute; font-size: var(--text-xl); font-weight: var(--fw-bold); }

/* ── Tabs ────────────────────────────────────────────────────── */
.tabs { display: flex; border-bottom: 2px solid var(--color-border); gap: 0; }
.tab-btn { padding: var(--sp-3) var(--sp-4); font-size: var(--text-sm); font-weight: var(--fw-medium); color: var(--color-text-muted); border: none; background: none; cursor: pointer; border-bottom: 2px solid transparent; margin-bottom: -2px; transition: all var(--transition-fast); display: flex; align-items: center; gap: var(--sp-2); }
.tab-btn:hover  { color: var(--gray-700); }
.tab-btn.active { color: var(--primary-600); border-bottom-color: var(--primary-600); }
.tab-content    { padding: var(--sp-6) 0; }
.tab-pane       { display: none; }
.tab-pane.active{ display: block; }

/* ── Modal ───────────────────────────────────────────────────── */
.modal-overlay { position: fixed; inset: 0; background: rgba(0,0,0,0.5); backdrop-filter: blur(4px); z-index: 1000; display: flex; align-items: center; justify-content: center; padding: var(--sp-4); opacity: 0; pointer-events: none; transition: opacity var(--transition-base); }
.modal-overlay.show { opacity: 1; pointer-events: all; }
.modal { background: #fff; border-radius: var(--radius-2xl); box-shadow: var(--shadow-2xl); width: 100%; max-width: 560px; max-height: 90vh; overflow: hidden; display: flex; flex-direction: column; transform: scale(0.96) translateY(8px); transition: transform var(--transition-bounce); }
.modal-overlay.show .modal { transform: scale(1) translateY(0); }
.modal-lg   { max-width: 780px; }
.modal-xl   { max-width: 1000px; }
.modal-header { padding: var(--sp-5) var(--sp-6); border-bottom: 1px solid var(--color-border); display: flex; align-items: center; justify-content: space-between; flex-shrink: 0; }
.modal-title  { font-size: var(--text-lg); font-weight: var(--fw-semibold); }
.modal-body   { padding: var(--sp-6); overflow-y: auto; flex: 1; }
.modal-footer { padding: var(--sp-4) var(--sp-6); border-top: 1px solid var(--color-border); display: flex; align-items: center; justify-content: flex-end; gap: var(--sp-3); flex-shrink: 0; }

/* ── Alert Banners ───────────────────────────────────────────── */
.alert { display: flex; align-items: flex-start; gap: var(--sp-3); padding: var(--sp-4); border-radius: var(--radius-xl); font-size: var(--text-sm); }
.alert-info    { background: var(--primary-50);  color: var(--primary-800);  border: 1px solid var(--primary-200);  }
.alert-success { background: var(--success-50);  color: var(--success-800) ; border: 1px solid #A7F3D0; }
.alert-warning { background: var(--warning-50);  color: #92400E;             border: 1px solid #FDE68A; }
.alert-danger  { background: var(--danger-50);   color: var(--danger-800)  ; border: 1px solid #FECACA; }

/* ── Toast Notifications ─────────────────────────────────────── */
#toast-container { position: fixed; top: var(--sp-4); right: var(--sp-4); z-index: 9999; display: flex; flex-direction: column; gap: var(--sp-2); pointer-events: none; }
.toast { background: var(--gray-900); color: #fff; padding: var(--sp-3) var(--sp-5); border-radius: var(--radius-xl); box-shadow: var(--shadow-xl); font-size: var(--text-sm); max-width: 360px; display: flex; align-items: center; gap: var(--sp-3); pointer-events: all; transform: translateX(100%); opacity: 0; transition: all 0.3s cubic-bezier(0.34,1.56,0.64,1); }
.toast.show     { transform: translateX(0); opacity: 1; }
.toast-success  { border-left: 4px solid var(--success-500); }
.toast-error    { border-left: 4px solid var(--danger-500);  }
.toast-info     { border-left: 4px solid var(--primary-500); }
.toast-warning  { border-left: 4px solid var(--warning-500); }

/* ── Table ───────────────────────────────────────────────────── */
.table-wrap { overflow-x: auto; border-radius: var(--radius-xl); border: 1px solid var(--color-border); }
table { width: 100%; border-collapse: collapse; background: #fff; }
thead th { background: var(--gray-50); padding: var(--sp-3) var(--sp-4); text-align: left; font-size: var(--text-xs); font-weight: var(--fw-semibold); text-transform: uppercase; letter-spacing: 0.05em; color: var(--gray-500); border-bottom: 1px solid var(--color-border); }
tbody td { padding: var(--sp-4); border-bottom: 1px solid var(--color-border-subtle); font-size: var(--text-sm); color: var(--color-text); }
tbody tr:last-child td { border-bottom: none; }
tbody tr:hover td { background: var(--gray-50); }

/* ── Empty State ─────────────────────────────────────────────── */
.empty-state { display: flex; flex-direction: column; align-items: center; justify-content: center; padding: var(--sp-16); text-align: center; gap: var(--sp-4); }
.empty-icon  { width: 72px; height: 72px; background: var(--gray-100); border-radius: 50%; display: flex; align-items: center; justify-content: center; color: var(--gray-400); }
.empty-title { font-size: var(--text-xl); font-weight: var(--fw-semibold); color: var(--gray-700); }
.empty-desc  { font-size: var(--text-sm); color: var(--color-text-muted); max-width: 320px; }

/* ── Dropdown ────────────────────────────────────────────────── */
.dropdown { position: relative; }
.dropdown-menu { position: absolute; top: calc(100% + var(--sp-2)); right: 0; background: #fff; border: 1px solid var(--color-border); border-radius: var(--radius-xl); box-shadow: var(--shadow-xl); min-width: 180px; z-index: 200; overflow: hidden; opacity: 0; transform: translateY(-8px); pointer-events: none; transition: all var(--transition-base); }
.dropdown-menu.show { opacity: 1; transform: translateY(0); pointer-events: all; }
.dropdown-item { display: flex; align-items: center; gap: var(--sp-3); padding: var(--sp-3) var(--sp-4); font-size: var(--text-sm); color: var(--gray-700); cursor: pointer; transition: background var(--transition-fast); }
.dropdown-item:hover { background: var(--gray-50); }
.dropdown-item.danger { color: var(--danger-600); }
.dropdown-divider { border-top: 1px solid var(--color-border); margin: var(--sp-1) 0; }

/* ── Tooltip ─────────────────────────────────────────────────── */
[data-tooltip] { position: relative; }
[data-tooltip]::after { content: attr(data-tooltip); position: absolute; bottom: calc(100% + 6px); left: 50%; transform: translateX(-50%); background: var(--gray-900); color: #fff; font-size: 11px; padding: 4px 10px; border-radius: var(--radius-md); white-space: nowrap; opacity: 0; pointer-events: none; transition: opacity var(--transition-fast); z-index: 300; }
[data-tooltip]:hover::after { opacity: 1; }

/* ── Skeleton Loader ─────────────────────────────────────────── */
.skeleton { background: linear-gradient(90deg, var(--gray-100) 25%, var(--gray-200) 50%, var(--gray-100) 75%); background-size: 200% 100%; animation: skeleton-shimmer 1.5s infinite; border-radius: var(--radius-md); }
@keyframes skeleton-shimmer { 0% { background-position: -200% 0; } 100% { background-position: 200% 0; } }

/* ── Spinner ─────────────────────────────────────────────────── */
.spinner { width: 20px; height: 20px; border: 2px solid var(--gray-200); border-top-color: var(--primary-600); border-radius: 50%; animation: spin 0.6s linear infinite; }
.spinner-sm { width: 14px; height: 14px; }
.spinner-lg { width: 32px; height: 32px; border-width: 3px; }
@keyframes spin { to { transform: rotate(360deg); } }

/* ── Citation Inline Marker ──────────────────────────────────── */
.citation-marker { display: inline-flex; align-items: center; justify-content: center; width: 18px; height: 18px; background: var(--primary-600); color: #fff; border-radius: 3px; font-size: 10px; font-weight: var(--fw-bold); cursor: pointer; margin: 0 1px; vertical-align: super; line-height: 1; transition: background var(--transition-fast); }
.citation-marker:hover { background: var(--primary-700); }

/* ── Confidence Bar ──────────────────────────────────────────── */
.confidence-bar { display: flex; align-items: center; gap: var(--sp-2); }
.confidence-track { flex: 1; height: 4px; background: var(--gray-100); border-radius: var(--radius-full); overflow: hidden; }
.confidence-fill { height: 100%; border-radius: var(--radius-full); transition: width 0.5s ease; }
.confidence-high   { background: var(--danger-500);  }
.confidence-medium { background: var(--warning-500); }
.confidence-low    { background: var(--success-500); }