/* Typography - Exact React App Matching */
.title { 
  font-size: var(--text-lg); /* 1.125rem */
  font-weight: var(--font-weight-semibold); /* 600 */
  line-height: 1.5;
  color: var(--foreground);
  margin: 0;
}

.small { 
  font-size: var(--text-sm); /* 0.875rem */
  font-weight: var(--font-weight-normal); /* 400 */
  line-height: 1.5;
  color: var(--foreground);
}

.tiny { 
  font-size: var(--text-xs); /* 0.75rem */
  font-weight: var(--font-weight-normal); /* 400 */
  line-height: 1.5;
  color: var(--muted-foreground);
}

.big { 
  font-size: var(--text-2xl); /* 1.5rem */
  font-weight: var(--font-weight-bold); /* 700 */
  line-height: 1.5;
  color: var(--foreground);
}

.mono { 
  font-family: ui-monospace, SFMono-Regular, "SF Mono", Consolas, "Liberation Mono", Menlo, monospace;
}

.muted { 
  color: var(--muted-foreground);
}

.admin-layout { display: grid; grid-template-columns: 240px 1fr; min-height: 100vh; }

/* Admin sidebar - Exact React App Matching */
.admin-sidebar { 
  width: 240px;
  height: 100vh;
  background: #0f0f0f; 
  border-right: 1px solid #2d2d2d; 
  display: flex; 
  flex-direction: column; 
}


/* Brand section - Exact React App Matching */
.admin-brand { 
  display: flex; 
  align-items: center; 
  justify-content: space-between; 
  padding: 24px; 
  border-bottom: 1px solid #2d2d2d; 
}

.admin-brand .logo { 
  width: 32px; 
  height: 32px; 
  border-radius: 6px; 
  background: transparent; 
  color: var(--primary-foreground); 
  display: grid; 
  place-items: center; 
  font-weight: var(--font-weight-bold); 
  font-size: var(--text-sm);
}

.admin-brand .title { 
  color: var(--foreground); 
  font-size: var(--text-sm); 
  font-weight: var(--font-weight-normal); 
}

.admin-brand .sub { 
  color: var(--muted-foreground); 
  font-size: var(--text-xs); 
  font-weight: var(--font-weight-normal);
}

/* Navigation - Exact React App Matching */
.admin-nav { 
  flex: 1; 
  overflow-y: auto; 
  padding: 16px 12px; 
}

.admin-nav .sec { 
  margin-bottom: 24px; 
}

.admin-nav .sec-title { 
  color: var(--muted-foreground); 
  font-size: var(--text-xs); 
  font-weight: var(--font-weight-normal); 
  text-transform: uppercase; 
  letter-spacing: 0.05em; 
  margin-bottom: 8px; 
  padding: 0 12px; 
}

.admin-nav .sec-items { 
  display: flex; 
  flex-direction: column; 
  gap: 4px; 
}

.admin-nav .sec-link { 
  width: 100%;
  display: flex; 
  align-items: center; 
  gap: 12px; 
  padding: 10px 12px; 
  border-radius: 8px; 
  color: var(--muted-foreground); 
  text-decoration: none; 
  transition: all 0.2s; 
  font-size: var(--text-sm); 
  font-weight: var(--font-weight-normal);
  border: none;
  background: none;
  cursor: pointer;
  text-align: left;
}

.admin-nav .sec-link:hover { 
  background: #1a1a1a; 
  color: var(--foreground); 
}

.admin-nav .sec-link.active { 
  background: #1e1e1e; 
  color: var(--primary); 
}

/* Footer section - Exact React App Matching */
.admin-side-footer { 
  display: flex; 
  align-items: center; 
  gap: 12px; 
  padding: 16px 24px; 
  border-top: 1px solid #2d2d2d; 
}

.admin-side-footer .avatar { 
  width: 32px; 
  height: 32px; 
  border-radius: 9999px; 
  background: #1e1e1e; 
  display: grid; 
  place-items: center; 
  color: var(--primary); 
  font-size: var(--text-xs); 
  font-weight: var(--font-weight-normal);
}

.admin-side-footer .name { 
  color: var(--foreground); 
  font-size: var(--text-sm); 
  font-weight: var(--font-weight-normal); 
}

.admin-side-footer .email { 
  color: var(--muted-foreground); 
  font-size: var(--text-xs); 
  font-weight: var(--font-weight-normal);
}

.admin-side-footer .flex-1 { 
  flex: 1; 
}

.admin-side-footer .min-w-0 { 
  min-width: 0; 
}

/* Reports Module - Exact React App Matching */
.admin-reports .space-y-6 > * + * {
  margin-top: 24px;
}

.reports-action-grid {
  display: grid;
  gap: 16px;
  grid-template-columns: repeat(1, minmax(0, 1fr));
}

@media (min-width: 768px) {
  .reports-action-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

.reports-table-header {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

@media (min-width: 640px) {
  .reports-table-header {
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
  }
}

/* Badge variants */
.badge.blue {
  background: rgba(59, 130, 246, 0.1);
  color: #60a5fa;
  border-color: rgba(59, 130, 246, 0.2);
}

.badge.purple {
  background: rgba(168, 85, 247, 0.1);
  color: #c084fc;
  border-color: rgba(168, 85, 247, 0.2);
}

.badge.yellow {
  background: rgba(234, 179, 8, 0.1);
  color: #fbbf24;
  border-color: rgba(234, 179, 8, 0.2);
}

/* Info boxes */
.info-box {
  padding: 12px;
  border-radius: 8px;
  border: 1px solid;
}

.info-box.blue {
  background: rgba(59, 130, 246, 0.1);
  border-color: rgba(59, 130, 246, 0.2);
  color: #60a5fa;
}

.info-box strong {
  font-weight: var(--font-weight-semibold);
}

/* Dialog/Modal */
.dialog {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 100;
  display: flex;
  align-items: center;
  justify-content: center;
}

.dialog.hidden {
  display: none;
}

.dialog-overlay {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: rgba(0, 0, 0, 0.7);
  -webkit-backdrop-filter: blur(4px);
  backdrop-filter: blur(4px);
}

.dialog-content {
  position: relative;
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: 12px;
  max-width: 500px;
  width: 90%;
  max-height: 90vh;
  overflow-y: auto;
  z-index: 101;
}

.dialog-header {
  padding: 24px 24px 16px;
  border-bottom: 1px solid var(--border);
}

.dialog-body {
  padding: 24px;
}

.dialog-footer {
  padding: 16px 24px;
  border-top: 1px solid var(--border);
  display: flex;
  gap: 12px;
  justify-content: flex-end;
}

/* Form groups */
.form-group {
  margin-bottom: 16px;
}

.form-group:last-child {
  margin-bottom: 0;
}

.label {
  display: block;
  margin-bottom: 8px;
  font-size: var(--text-sm);
  font-weight: var(--font-weight-medium);
  color: var(--foreground);
}

/* Utility classes */
.flex {
  display: flex;
}

.items-center {
  align-items: center;
}

.items-start {
  align-items: flex-start;
}

.justify-between {
  justify-content: space-between;
}

.gap-2 {
  gap: 8px;
}

.w-full {
  width: 100%;
}

.text-right {
  text-align: right;
}

/* Reports Table - Exact React App Matching */
.reports-table {
  width: 100%;
  font-size: var(--text-sm);
  border-collapse: collapse;
}

.reports-table-header {
  border-bottom: 1px solid var(--border);
}

.reports-table-row-header {
  background: rgba(148, 163, 184, 0.05); /* bg-muted/50 equivalent */
  border-bottom: 1px solid var(--border);
  transition: background-color 0.2s;
}

.reports-table-row {
  border-bottom: 1px solid var(--border);
  transition: background-color 0.2s;
}

.reports-table-row:hover {
  background: rgba(148, 163, 184, 0.05); /* hover:bg-muted/50 */
}

.reports-table-row:last-child {
  border-bottom: 0;
}

.reports-table-head {
  height: 40px;
  padding: 12px 8px;
  text-align: left;
  vertical-align: middle;
  font-weight: var(--font-weight-medium);
  color: var(--muted-foreground);
  white-space: nowrap;
}

.reports-table-head:has([role="checkbox"]) {
  padding-right: 0;
}

.reports-table-head > [role="checkbox"] {
  transform: translateY(2px);
}

.reports-table-cell {
  padding: 12px 8px;
  height: 56px;
  vertical-align: middle;
  white-space: nowrap;
}

.reports-table-cell:has([role="checkbox"]) {
  padding-right: 0;
}

.reports-table-cell > [role="checkbox"] {
  transform: translateY(2px);
}

.reports-table-cell.max-w-xs {
  max-width: 20rem;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* Override border for table wrapper */
.border.border-border {
  border: 1px solid var(--border);
}

.rounded-lg {
  border-radius: 8px;
}

.overflow-hidden {
  overflow: hidden;
}

.overflow-x-auto {
  overflow-x: auto;
}

/* Audit Logs Module - Exact React App Matching */
.admin-audit-logs .space-y-6 > * + * {
  margin-top: 24px;
}

/* Audit Filters */
.audit-filters {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.audit-filters-row {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

@media (min-width: 768px) {
  .audit-filters-row {
    flex-direction: row;
  }
}

.audit-search-container {
  flex: 1;
  position: relative;
  display: flex;
  align-items: center;
}

.audit-search-container svg {
  position: absolute;
  left: 12px;
  top: 50%;
  transform: translateY(-50%);
  pointer-events: none;
}

.audit-search-input {
  padding-left: 40px;
}

.audit-filter-select {
  width: 100%;
}

@media (min-width: 768px) {
  .audit-filter-select {
    width: 180px;
  }
}

/* Audit Table */
.audit-table-header {
  padding: 24px;
  border-bottom: 1px solid rgba(6, 182, 212, 0.1);
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.audit-table {
  width: 100%;
  font-size: var(--text-sm);
  border-collapse: collapse;
}

.audit-table-header {
  border-bottom: 1px solid var(--border);
}

.audit-table-row-header {
  background: rgba(148, 163, 184, 0.1); /* bg-muted/30 equivalent */
  border-bottom: 1px solid var(--border);
  transition: background-color 0.2s;
}

.audit-table-row {
  border-bottom: 1px solid var(--border);
  transition: background-color 0.2s;
}

.audit-table-row:hover {
  background: rgba(148, 163, 184, 0.05); /* hover:bg-muted/10 */
}

.audit-table-row:last-child {
  border-bottom: 0;
}

.audit-table-head {
  height: 56px;
  padding: 12px 24px;
  text-align: left;
  vertical-align: middle;
  font-weight: var(--font-weight-medium);
  color: var(--foreground);
  white-space: nowrap;
}

.audit-table-cell {
  padding: 12px 24px;
  vertical-align: middle;
  white-space: nowrap;
}

/* Audit Badge Variants */
.audit-badge-primary {
  background: rgba(6, 182, 212, 0.2);
  color: #06b6d4;
  border-color: rgba(6, 182, 212, 0.3);
}

.audit-badge-green {
  background: rgba(16, 185, 129, 0.2);
  color: #10b981;
  border-color: rgba(16, 185, 129, 0.3);
}

.audit-badge-purple {
  background: rgba(168, 85, 247, 0.2);
  color: #a78bfa;
  border-color: rgba(168, 85, 247, 0.3);
}

.audit-badge-blue {
  background: rgba(59, 130, 246, 0.2);
  color: #60a5fa;
  border-color: rgba(59, 130, 246, 0.3);
}

.audit-badge-yellow {
  background: rgba(234, 179, 8, 0.2);
  color: #fbbf24;
  border-color: rgba(234, 179, 8, 0.3);
}

.audit-badge-orange {
  background: rgba(249, 115, 22, 0.2);
  color: #fb923c;
  border-color: rgba(249, 115, 22, 0.3);
}

/* Audit Links */
.audit-user-link,
.audit-context-link {
  background: none;
  border: none;
  color: var(--primary);
  text-decoration: none;
  cursor: pointer;
  font-size: var(--text-sm);
  font-family: inherit;
  padding: 0;
}

.audit-user-link:hover,
.audit-context-link:hover {
  text-decoration: underline;
}

.audit-context-link {
  font-family: ui-monospace, SFMono-Regular, "SF Mono", Consolas, "Liberation Mono", Menlo, monospace;
}

/* Audit Pagination */
.audit-pagination {
  padding: 16px 24px;
  border-top: 1px solid var(--border);
}

.audit-pagination-content {
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.audit-pagination-controls {
  display: flex;
  align-items: center;
  gap: 4px;
}

.audit-pagination-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  height: 32px;
  min-width: 32px;
  padding: 0 8px;
  border-radius: 6px;
  border: 1px solid var(--border);
  background: var(--background);
  color: var(--foreground);
  font-size: var(--text-sm);
  font-weight: var(--font-weight-medium);
  cursor: pointer;
  transition: all 0.2s;
}

.audit-pagination-btn:hover:not(:disabled) {
  background: var(--muted);
}

.audit-pagination-btn.active {
  background: var(--primary);
  color: var(--primary-foreground);
  border-color: var(--primary);
}

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

.audit-pagination-ellipsis {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  height: 32px;
  min-width: 32px;
  color: var(--muted-foreground);
  font-size: var(--text-sm);
}

/* Utility classes */
.mt-0\.5 {
  margin-top: 2px;
}

/* Users Module - Exact React App Matching */
.admin-users .space-y-6 > * + * {
  margin-top: 24px;
}

/* Users Tabs */
.users-tabs-list {
  display: grid;
  grid-template-columns: 1fr 1fr;
  max-width: 448px;
  background: rgba(148, 163, 184, 0.1); /* bg-muted/30 */
  border-radius: 8px;
  padding: 4px;
}

.users-tabs-trigger {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 36px;
  padding: 0 16px;
  border-radius: 6px;
  border: none;
  background: transparent;
  color: var(--muted-foreground);
  font-size: var(--text-sm);
  font-weight: var(--font-weight-medium);
  cursor: pointer;
  transition: all 0.2s;
}

.users-tabs-trigger.active {
  background: var(--background);
  color: var(--foreground);
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.1);
}

.users-tab-content {
  margin-top: 24px;
}

/* Users Card Header */
.users-card-header {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

@media (min-width: 640px) {
  .users-card-header {
    flex-direction: row;
    align-items: flex-start;
    justify-content: space-between;
  }
}

.users-card-title-section {
  flex: 1;
}

/* Users Filters */
.users-filters {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

@media (min-width: 640px) {
  .users-filters {
    flex-direction: row;
  }
}

.users-search-container {
  flex: 1;
  position: relative;
  display: flex;
  align-items: center;
}

.users-search-container svg {
  position: absolute;
  left: 12px;
  top: 50%;
  transform: translateY(-50%);
  pointer-events: none;
}

.users-search-input {
  padding-left: 40px;
}

.users-filter-select {
  width: 100%;
}

@media (min-width: 640px) {
  .users-filter-select {
    width: 192px;
  }
}

.users-export-section {
  display: flex;
  justify-content: flex-end;
}

/* Users Table */
.users-table-container {
  border: 1px solid var(--border);
  border-radius: 8px;
  overflow: hidden;
}

.users-table {
  width: 100%;
  font-size: var(--text-sm);
  border-collapse: collapse;
}

.users-table-header {
  border-bottom: 1px solid var(--border);
}

.users-table-row-header {
  background: rgba(148, 163, 184, 0.25); /* bg-muted/50 */
  border-bottom: 1px solid var(--border);
  transition: background-color 0.2s;
}

.users-table-row {
  border-bottom: 1px solid var(--border);
  transition: background-color 0.2s;
  cursor: pointer;
}

.users-table-row:hover {
  background: rgba(148, 163, 184, 0.25); /* hover:bg-muted/50 - exact React match */
}

.users-table-row:last-child {
  border-bottom: 0;
}

.users-table-head {
  height: 40px; /* h-10 = 40px */
  padding: 0 8px; /* px-2 = 8px horizontal */
  text-align: left;
  vertical-align: middle;
  font-weight: var(--font-weight-medium);
  color: var(--foreground);
  white-space: nowrap;
}

.users-table-cell {
  padding: 8px; /* p-2 = 8px all around */
  vertical-align: middle;
  white-space: nowrap;
}

/* Users Badge Variants */
.users-badge-admin {
  background: rgba(6, 182, 212, 0.1);
  color: #06b6d4;
  border-color: rgba(6, 182, 212, 0.2);
}

.users-badge-triage {
  background: rgba(59, 130, 246, 0.1);
  color: #60a5fa;
  border-color: rgba(59, 130, 246, 0.2);
}

.users-badge-viewer {
  background: rgba(148, 163, 184, 0.1);
  color: var(--muted-foreground);
  border-color: var(--border);
}

.users-badge-gold {
  background: rgba(234, 179, 8, 0.1);
  color: #fbbf24;
  border-color: rgba(234, 179, 8, 0.2);
}

.users-badge-silver {
  background: rgba(156, 163, 175, 0.1);
  color: #d1d5db;
  border-color: rgba(156, 163, 175, 0.2);
}

.users-badge-bronze {
  background: rgba(249, 115, 22, 0.1);
  color: #fb923c;
  border-color: rgba(249, 115, 22, 0.2);
}

.users-badge-new {
  background: rgba(148, 163, 184, 0.1);
  color: var(--muted-foreground);
  border-color: var(--border);
}

.users-badge-enabled {
  background: rgba(16, 185, 129, 0.1);
  color: #10b981;
  border-color: rgba(16, 185, 129, 0.2);
}

.users-badge-disabled {
  background: rgba(234, 179, 8, 0.1);
  color: #fbbf24;
  border-color: rgba(234, 179, 8, 0.2);
}

.users-badge-active {
  background: rgba(6, 182, 212, 0.1);
  color: #06b6d4;
  border-color: rgba(6, 182, 212, 0.2);
}

.users-badge-suspended,
.users-badge-banned {
  background: rgba(239, 68, 68, 0.1);
  color: #f87171;
  border-color: rgba(239, 68, 68, 0.2);
}

/* Users Actions */
.users-actions {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 4px;
}

.users-action-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  border-radius: 6px;
  border: none;
  background: transparent;
  color: var(--primary);
  cursor: pointer;
  transition: all 0.2s;
}

.users-action-btn:hover {
  color: var(--primary);
  background: rgba(6, 182, 212, 0.1);
}

.users-action-btn.users-action-warning {
  color: #fbbf24;
}

.users-action-btn.users-action-warning:hover {
  color: #f59e0b;
  background: rgba(234, 179, 8, 0.1);
}

.users-action-btn.users-action-danger {
  color: #f87171;
}

.users-action-btn.users-action-danger:hover {
  color: #ef4444;
  background: rgba(239, 68, 68, 0.1);
}

.users-action-btn.users-action-success {
  color: #10b981;
}

.users-action-btn.users-action-success:hover {
  color: #059669;
  background: rgba(16, 185, 129, 0.1);
}

.admin-main-wrap { display:flex; flex-direction:column; height:100vh; background:#0a0a0a; }
.admin-topbar { height:64px; border-bottom:1px solid #2d2d2d; background:#0a0a0a; display:flex; align-items:center; justify-content:space-between; padding:0 16px; overflow-x: visible; min-width: 0; }
.admin-topbar .left { display:flex; align-items:center; gap:12px; }
.admin-topbar .menu { display:none; }
.admin-topbar .breadcrumbs .crumb { color: var(--foreground); font-size: var(--text-sm); font-weight: var(--font-weight-medium); }
.admin-topbar .breadcrumbs .crumb.muted { 
  color: var(--muted-foreground); 
  text-decoration: none;
  cursor: pointer;
  transition: color 0.2s ease;
}
.admin-topbar .breadcrumbs .crumb.muted:hover { 
  color: #06b6d4; 
}
.admin-topbar .breadcrumbs .sep { color: var(--muted-foreground); margin:0 6px; }
.admin-topbar .right { display:flex; align-items:center; gap:8px; flex-shrink: 0; }
.admin-topbar-title { color: var(--foreground); font-size: var(--text-xl); font-weight: var(--font-weight-medium); line-height: 1.5; margin: 0; }
.admin-topbar-subtitle { color: var(--muted-foreground); font-size: var(--text-sm); margin: 2px 0 0; }
/* Aliases for existing HTML that uses -left/-right */
.admin-topbar-left { display:flex; align-items:center; gap:12px; }
.admin-topbar-right { display:flex; align-items:center; gap:8px; flex-shrink: 0; }
.admin-topbar .btn { height:32px; padding:0 10px; border-radius:6px; border:1px solid #2d2d2d; background:#0f0f0f; color:#fff; }
.admin-topbar .btn.ghost { background:#121212; }
.admin-topbar .btn.icon { width:40px; height:40px; border-radius:8px; position:relative; }
.admin-topbar .btn .badge { position:absolute; top:-4px; right:-4px; background:#06b6d4; color:#0a0a0a; border-radius:6px; padding:2px 6px; font-size:12px; }

/* Notifications Dropdown - Using existing .active class system */

/* Breadcrumbs */
.breadcrumbs { display:flex; align-items:center; gap:8px; }
.breadcrumbs .crumb { color: var(--muted-foreground); font-size: var(--text-sm); }
.breadcrumbs .crumb.muted { 
  color: var(--muted-foreground); 
  text-decoration: none;
  cursor: pointer;
  transition: color 0.2s ease;
}
.breadcrumbs .crumb.muted:hover { 
  color: #06b6d4; 
}
.breadcrumbs .sep { color: var(--muted-foreground); }

/* Notifications Dropdown Styles */
.notifications-dropdown {
  position: relative;
  display: inline-block;
}

.notifications-dropdown-content {
  position: absolute;
  top: 100%;
  right: 0;
  width: 420px;
  background: transparent;
  z-index: 1000;
  margin-top: 8px;
  opacity: 0;
  visibility: hidden;
  transform: translateY(-10px);
  transition: all 0.2s ease;
}

.notifications-dropdown.active .notifications-dropdown-content {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
}

/* Profile Dropdown */
.profile-dropdown { position: relative; }
.profile-dropdown-content { 
  position: absolute; 
  top: 100%; 
  right: 0; 
  width: 240px; 
  background: transparent; 
  z-index: 1000; 
  margin-top: 8px; 
  opacity: 0;
  visibility: hidden;
  transform: translateY(-10px);
  transition: all 0.2s ease;
}
.profile-dropdown.active .profile-dropdown-content {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
}

.profile-card {
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: 12px;
  box-shadow: 0 10px 25px rgba(0, 0, 0, 0.3);
  overflow: hidden;
}

.profile-header {
  padding: 16px 16px 12px 16px;
  border-bottom: 1px solid var(--border);
}

.profile-info {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.profile-name {
  font-size: 14px;
  font-weight: 500;
  color: var(--foreground);
  margin: 0;
}

.profile-email {
  font-size: 12px;
  color: var(--muted-foreground);
  margin: 0;
}

.profile-menu {
  padding: 8px 0;
}

.profile-menu-separator {
  height: 1px;
  background: var(--border);
  margin: 8px 0;
}

.profile-menu-item {
  display: flex;
  align-items: center;
  gap: 12px;
  width: 100%;
  padding: 8px 16px;
  background: none;
  border: none;
  color: var(--foreground);
  font-size: 14px;
  text-decoration: none;
  cursor: pointer;
  transition: background-color 0.2s ease;
}

.profile-menu-item:hover {
  background: var(--muted);
}

.profile-menu-item.profile-logout {
  color: #ef4444;
}

.profile-menu-item.profile-logout:hover {
  background: rgba(239, 68, 68, 0.1);
}

.profile-menu-icon {
  flex-shrink: 0;
}

.profile-avatar {
  width: 32px;
  height: 32px;
  background: var(--primary);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--primary-foreground);
}

.notifications-card {
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: 12px;
  box-shadow: 0 10px 25px rgba(0, 0, 0, 0.3);
  overflow: hidden;
}

/* Notifications Header */
.notifications-header {
  padding: 20px 20px 16px 20px;
  border-bottom: 1px solid var(--border);
}

.notifications-header-top {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  margin-bottom: 12px;
}

.notifications-title {
  color: var(--foreground);
  font-size: 20px;
  font-weight: 500;
  margin: 0;
}

.mark-all-read-btn {
  color: var(--primary);
  background: none;
  border: none;
  font-size: 14px;
  font-weight: 500;
  cursor: pointer;
  transition: color 0.2s ease;
}

.mark-all-read-btn:hover {
  color: rgba(6, 182, 212, 0.8);
}

.notifications-subtitle {
  color: var(--muted-foreground);
  font-size: 14px;
  margin: 0;
}

/* Notifications List */
.notifications-list-container {
  position: relative;
  height: 480px;
}

.notifications-fade-top {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 48px;
  background: linear-gradient(to bottom, var(--card), transparent);
  pointer-events: none;
  z-index: 10;
  opacity: 0;
  transition: opacity 0.3s ease;
}

.notifications-fade-bottom {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  height: 48px;
  background: linear-gradient(to top, var(--card), transparent);
  pointer-events: none;
  z-index: 10;
  opacity: 1;
  transition: opacity 0.3s ease;
}

.notifications-scroll {
  height: 100%;
  overflow-y: auto;
  scrollbar-gutter: stable;
}

.notifications-scroll::-webkit-scrollbar {
  width: 6px;
}

.notifications-scroll::-webkit-scrollbar-track {
  background: transparent;
}

.notifications-scroll::-webkit-scrollbar-thumb {
  background: rgba(148, 162, 183, 0.3);
  border-radius: 3px;
}

.notifications-scroll::-webkit-scrollbar-thumb:hover {
  background: rgba(148, 162, 183, 0.5);
}

/* Notification Items */
.notification-item {
  padding: 16px 20px;
  cursor: pointer;
  transition: all 0.2s ease;
  border-left: 2px solid transparent;
  display: flex;
  gap: 16px;
}

.notification-item:hover {
  background: rgba(148, 162, 183, 0.1);
}

.notification-item.unread {
  background: rgba(6, 182, 212, 0.05);
  border-left-color: var(--primary);
}

.notification-item.unread:hover {
  background: rgba(6, 182, 212, 0.1);
}

.notification-icon {
  flex-shrink: 0;
  margin-top: 2px;
}

.notification-icon-bg {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background: rgba(148, 162, 183, 0.2);
  display: flex;
  align-items: center;
  justify-content: center;
}

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

.notification-content-top {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 8px;
}

.notification-title {
  color: var(--foreground);
  font-weight: 500;
  font-size: 14px;
  margin: 0;
}

.notification-dismiss {
  flex-shrink: 0;
  padding: 6px;
  border-radius: 6px;
  background: none;
  border: none;
  cursor: pointer;
  opacity: 0.6;
  transition: all 0.2s ease;
  color: #ffffff;
}

.notification-dismiss:hover {
  background: rgba(148, 162, 183, 0.2);
  opacity: 1;
  color: #ffffff;
}

.notification-message {
  color: var(--muted-foreground);
  font-size: 14px;
  line-height: 1.5;
  margin-bottom: 12px;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

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

.notification-timestamp {
  color: var(--muted-foreground);
  font-size: 12px;
}

.notification-badge {
  background: rgba(6, 182, 212, 0.1);
  color: var(--primary);
  border: 1px solid rgba(6, 182, 212, 0.3);
  border-radius: 12px;
  padding: 2px 8px;
  font-size: 12px;
  font-weight: 500;
  height: 20px;
  display: flex;
  align-items: center;
}

/* Notifications Footer */
.notifications-footer {
  border-top: 1px solid var(--border);
  padding: 16px;
}

.view-all-notifications-btn {
  width: 100%;
  text-align: center;
  color: var(--primary);
  background: none;
  border: none;
  font-weight: 500;
  padding: 8px;
  cursor: pointer;
  transition: color 0.2s ease;
}

.view-all-notifications-btn:hover {
  color: rgba(6, 182, 212, 0.8);
}

/* Color classes for notification icons */
.text-orange-500 {
  color: #f97316;
}

.text-green-500 {
  color: #22c55e;
}

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

/* Notifications Page Styles */
.notifications-page {
  padding: 24px;
}

.notifications-page-header {
  margin-bottom: 24px;
}

.notifications-page-header-top {
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin-bottom: 8px;
}

.notifications-page-title {
  color: var(--foreground);
  font-size: 20px;
  font-weight: 500;
  margin: 0;
}

.notifications-page-badge .badge {
  background: rgba(6, 182, 212, 0.1);
  color: var(--primary);
  border: 1px solid rgba(6, 182, 212, 0.2);
  border-radius: 12px;
  padding: 4px 12px;
  font-size: 12px;
  font-weight: 500;
}

.notifications-page-subtitle {
  color: var(--muted-foreground);
  font-size: 14px;
  margin: 0;
}

/* Actions Bar */
.notifications-actions-bar {
  display: flex;
  flex-direction: column;
  gap: 12px;
  margin-bottom: 24px;
}

.notifications-actions-left {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.notifications-actions-right {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 8px 16px;
  border-radius: 6px;
  /*font-size: 14px;*/
  font-weight: 500;
  cursor: pointer;
  transition: all 0.2s ease;
  border: none;
}

.btn-primary {
  background: var(--primary);
  color: #0a0a0a;
}

.btn-primary:hover {
  background: rgba(6, 182, 212, 0.9);
}

.btn-outline {
  background: transparent;
  color: var(--foreground);
  border: 1px solid var(--border);
}

.btn-outline:hover {
  background: rgba(148, 162, 183, 0.1);
}

.notifications-filter,
.notifications-sort {
  background: var(--input-background);
  border: 1px solid var(--border);
  border-radius: 6px;
  padding: 8px 12px;
  color: var(--foreground);
  font-size: 14px;
  cursor: pointer;
}

.notifications-filter:focus,
.notifications-sort:focus {
  outline: none;
  border-color: var(--primary);
}

/* Notifications Table */
.notifications-table-container {
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: 12px;
  overflow: hidden;
}

.notifications-table-header {
  padding: 20px 24px;
  border-bottom: 1px solid var(--border);
}

.notifications-table-title {
  color: var(--foreground);
  font-size: 16px;
  font-weight: 500;
  margin: 0 0 4px 0;
}

.notifications-table-subtitle {
  color: var(--muted-foreground);
  font-size: 14px;
  margin: 0;
}

.notifications-table {
  width: 100%;
}

.notification-row {
  display: grid;
  grid-template-columns: 40px 100px 1fr 150px 100px;
  gap: 16px;
  padding: 16px 24px;
  border-bottom: 1px solid var(--border);
  cursor: pointer;
  transition: background-color 0.2s ease;
  align-items: center;
}

.notification-row:hover {
  background: rgba(148, 162, 183, 0.05);
}

.notification-row.unread {
  background: rgba(6, 182, 212, 0.02);
  border-left: 3px solid var(--primary);
}

.notification-checkbox {
  display: flex;
  align-items: center;
  justify-content: center;
}

.notification-select {
  width: 16px;
  height: 16px;
  cursor: pointer;
}

.notification-date {
  color: var(--muted-foreground);
  font-size: 12px;
  font-weight: 500;
}

.notification-content-cell {
  min-width: 0;
}

.notification-title-cell {
  color: var(--foreground);
  font-weight: 500;
  font-size: 14px;
  margin: 0 0 4px 0;
}

.notification-message-cell {
  color: var(--muted-foreground);
  font-size: 14px;
  line-height: 1.4;
  margin: 0 0 4px 0;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.notification-submission {
  color: var(--muted-foreground);
  font-size: 12px;
  margin: 0;
}

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

.notification-type-icon {
  width: 24px;
  height: 24px;
  border-radius: 50%;
  background: rgba(148, 162, 183, 0.2);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.notification-type-badge {
  color: var(--foreground);
  font-size: 12px;
  font-weight: 500;
}

.notification-status {
  display: flex;
  justify-content: flex-end;
}

.badge {
  padding: 4px 8px;
  border-radius: 12px;
  font-size: 12px;
  font-weight: 500;
  text-align: center;
}

.badge.new {
  background: rgba(6, 182, 212, 0.1);
  color: var(--primary);
  border: 1px solid rgba(6, 182, 212, 0.3);
}

            .badge.read {
              background: rgba(148, 162, 183, 0.1);
              color: var(--muted-foreground);
              border: 1px solid rgba(148, 162, 183, 0.3);
            }

            /* Notifications Table - Desktop */
            .notifications-table-desktop {
              background: var(--card);
              border: 1px solid var(--border);
              border-radius: 12px;
              overflow: hidden;
              margin-bottom: 24px;
            }

            .notifications-table-desktop .notifications-table-header {
              padding: 24px;
              border-bottom: 1px solid rgba(6, 182, 212, 0.1);
            }

            .notifications-table-desktop .notifications-table-header-content {
              display: flex;
              align-items: center;
              justify-content: space-between;
            }

            .notifications-table-desktop .notifications-table-title {
              color: var(--foreground);
              font-size: 16px;
              font-weight: 500;
              margin: 0;
            }

            .notifications-table-desktop .notifications-table-subtitle {
              color: var(--muted-foreground);
              font-size: 14px;
              margin: 4px 0 0 0;
            }

            .notifications-table-desktop .notifications-table {
              width: 100%;
              border-collapse: collapse;
            }

            .notifications-table-desktop .table-header-row {
              background: rgba(148, 162, 183, 0.3);
              border-bottom: 1px solid var(--border);
            }

            .notifications-table-desktop .table-header-row:hover {
              background: rgba(148, 162, 183, 0.3);
            }

            .notifications-table-desktop .table-header-checkbox {
              width: 48px;
              height: 56px;
              padding: 0 24px;
              position: sticky;
              left: 0;
              z-index: 10;
              background: rgba(148, 162, 183, 0.3);
              box-shadow: 2px 0 8px rgba(0, 0, 0, 0.1);
              text-align: center;
            }

            .notifications-table-desktop .table-header-date {
              color: var(--foreground);
              height: 56px;
              padding: 0 24px;
              width: 176px;
              position: relative;
              z-index: 0;
              font-weight: 500;
              text-align: left;
            }

            .notifications-table-desktop .table-header-message {
              color: var(--foreground);
              height: 56px;
              padding: 0 24px;
              min-width: 400px;
              position: relative;
              z-index: 0;
              font-weight: 500;
              text-align: left;
            }

            .notifications-table-desktop .table-header-type {
              color: var(--foreground);
              height: 56px;
              padding: 0 24px;
              width: 224px;
              position: relative;
              z-index: 0;
              font-weight: 500;
              text-align: left;
            }

            .notifications-table-desktop .table-header-status {
              color: var(--foreground);
              height: 56px;
              padding: 0 24px;
              width: 112px;
              position: relative;
              z-index: 0;
              font-weight: 500;
              text-align: left;
            }

            .notifications-table-desktop .notification-table-row {
              border-bottom: 1px solid var(--border);
              cursor: pointer;
              transition: background-color 0.15s ease;
            }

            .notifications-table-desktop .notification-table-row:hover {
              background: rgba(148, 162, 183, 0.2);
            }

            .notifications-table-desktop .notification-table-row.unread {
              background: rgba(6, 182, 212, 0.05);
            }

            .notifications-table-desktop .notification-table-row.unread:hover {
              background: rgba(6, 182, 212, 0.1);
            }

            .notifications-table-desktop .table-cell-checkbox {
              width: 48px;
              padding: 20px 24px;
              position: sticky;
              left: 0;
              z-index: 10;
              background: inherit;
              box-shadow: 2px 0 8px rgba(0, 0, 0, 0.1);
              text-align: center;
            }

            .notifications-table-desktop .table-cell-date {
              color: var(--muted-foreground);
              white-space: nowrap;
              padding: 20px 24px;
              width: 176px;
              position: relative;
              z-index: 0;
              font-size: 14px;
              font-weight: 500;
            }

            .notifications-table-desktop .table-cell-message {
              padding: 20px 24px;
              min-width: 400px;
              position: relative;
              z-index: 0;
            }

            .notifications-table-desktop .notification-message-text {
              color: var(--foreground);
              margin: 0;
              font-size: 14px;
            }

            .notifications-table-desktop .notification-submission-text {
              color: var(--muted-foreground);
              font-size: 14px;
              margin: 4px 0 0 0;
            }

            .notifications-table-desktop .table-cell-type {
              padding: 20px 24px;
              width: 224px;
              position: relative;
              z-index: 0;
            }

            .notifications-table-desktop .notification-type-content {
              display: flex;
              align-items: center;
              gap: 8px;
            }

            .notifications-table-desktop .notification-type-icon {
              width: 24px;
              height: 24px;
              border-radius: 50%;
              background: rgba(148, 162, 183, 0.2);
              display: flex;
              align-items: center;
              justify-content: center;
              flex-shrink: 0;
            }

            .notifications-table-desktop .notification-type-badge {
              color: var(--foreground);
              font-size: 12px;
              font-weight: 500;
            }

            .notifications-table-desktop .table-cell-status {
              padding: 20px 24px;
              width: 112px;
              position: relative;
              z-index: 0;
            }

            /* Table Footer with Pagination */
            .notifications-table-footer {
              display: flex;
              align-items: center;
              justify-content: space-between;
              padding: 16px 24px;
              border-top: 1px solid var(--border);
              background: var(--card);
            }

            .notifications-table-footer-left {
              flex: 1;
            }

            .notifications-table-footer-center {
              flex: 1;
              display: flex;
              justify-content: center;
            }

            .notifications-table-footer-right {
              flex: 1;
              display: flex;
              justify-content: flex-end;
            }

            .notifications-showing {
              color: var(--muted-foreground);
              font-size: 14px;
            }

            .notifications-summary {
              color: var(--muted-foreground);
              font-size: 14px;
            }

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

            .pagination-btn {
              display: flex;
              align-items: center;
              gap: 8px;
              padding: 8px 12px;
              background: transparent;
              border: 1px solid var(--border);
              border-radius: 6px;
              color: var(--foreground);
              font-size: 14px;
              cursor: pointer;
              transition: all 0.2s ease;
            }

            .pagination-btn:hover:not(:disabled) {
              background: rgba(148, 162, 183, 0.1);
            }

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

            .pagination-page {
              padding: 8px 12px;
              background: transparent;
              border: 1px solid transparent;
              border-radius: 6px;
              color: var(--foreground);
              font-size: 14px;
              cursor: pointer;
              transition: all 0.2s ease;
              min-width: 40px;
              text-align: center;
            }

            .pagination-page:hover {
              background: rgba(148, 162, 183, 0.1);
            }

            .pagination-page.active {
              background: var(--primary);
              color: #0a0a0a;
              border-color: var(--primary);
            }

            /* Notifications Cards - Mobile */
            .notifications-cards-mobile {
              display: none;
            }

            .notification-card {
              background: var(--card);
              border: 1px solid var(--border);
              border-radius: 12px;
              padding: 16px;
              margin-bottom: 12px;
              cursor: pointer;
              transition: background-color 0.15s ease;
            }

            .notification-card:hover {
              background: rgba(148, 162, 183, 0.2);
            }

            .notification-card.unread {
              background: rgba(6, 182, 212, 0.05);
              border-color: rgba(6, 182, 212, 0.2);
            }

            .notification-card.unread:hover {
              background: rgba(6, 182, 212, 0.1);
            }

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

            .notification-card-type {
              display: flex;
              align-items: center;
              gap: 8px;
              flex: 1;
              min-width: 0;
            }

            .notification-card-message {
              color: var(--foreground);
              font-size: 14px;
              margin: 0 0 8px 0;
            }

            .notification-card-submission {
              color: var(--muted-foreground);
              font-size: 12px;
              margin: 0 0 8px 0;
            }

            .notification-card-footer {
              display: flex;
              align-items: center;
              justify-content: space-between;
              font-size: 12px;
            }

            .notification-card-date {
              color: var(--muted-foreground);
            }

            /* Responsive Design */
            @media (max-width: 768px) {
              .notifications-table-desktop {
                display: none;
              }
              
              .notifications-cards-mobile {
                display: block;
              }
            }

            @media (min-width: 640px) {
              .notifications-actions-bar {
                flex-direction: row;
                justify-content: space-between;
                align-items: center;
              }
              
              .notifications-actions-left {
                flex-direction: row;
              }
              
              .notifications-actions-right {
                flex-direction: row;
              }
            }

/* Remove surrounding spacing from topbar within inbox page */
.admin-inbox > .admin-topbar {
  margin-left: -24px;
  margin-right: -24px;
  padding-left: 24px;
  padding-right: 24px;
}

/* Topbar controls matching JS version */
.admin-topbar-btn { width:40px; height:40px; display:grid; place-items:center; border-radius:8px; background:#121212; border:1px solid #2d2d2d; color: var(--foreground); }
.admin-topbar-btn:hover { background:#1a1a1a; }
.admin-topbar-divider { width:1px; height:24px; background:#2d2d2d; margin:0 8px; }
.admin-topbar-user { display:flex; align-items:center; gap:8px; background:#121212; border:1px solid #2d2d2d; color: var(--foreground); height:40px; padding:0 10px; border-radius:8px; }
.admin-topbar-user:hover { background:#1a1a1a; }
.admin-topbar-user-avatar { width:24px; height:24px; border-radius:9999px; display:grid; place-items:center; background:#0f0f0f; border:1px solid #2d2d2d; }

.admin-main-wrap { display:flex; flex-direction:column; min-height:100vh; overflow-x: auto; }
.admin-main { flex:1; padding:24px; overflow-y: auto; overflow-x: auto; }

/* Special layout for inbox page - fixed viewport height */
.admin-inbox-page .admin-main-wrap { height: 100vh; overflow: hidden; }
.admin-inbox-page .admin-main { overflow: hidden; display: flex; flex-direction: column; }
.admin-inbox-page .admin-content { flex: 1; overflow: hidden; display: flex; flex-direction: column; }
.admin-topbar { position: sticky; top:0; z-index: 50; }
.admin-dashboard .adm-head { display:flex; gap:16px; justify-content:space-between; align-items:flex-end; flex-wrap:wrap; }
.admin-dashboard h1 { color: var(--foreground); font-size: var(--text-xl); font-weight: var(--font-weight-medium); margin:0; line-height: 1.5; }
.admin-dashboard .muted { color: var(--muted-foreground); }
.admin-dashboard .actions { display:flex; gap:12px; align-items:center; }
.admin-dashboard .select { height:36px; border-radius:6px; background:#121212; color:#fff; border:1px solid #2d2d2d; padding:0 12px; font-size:14px; }
.admin-dashboard .btn { height:36px; border-radius:6px; background:#06b6d4; color:#0a0a0a; border:none; padding:0 12px; }
.admin-dashboard .btn.ghost { background:#1a1a1a; color:#fff; border:1px solid #2d2d2d; }
.admin-dashboard .btn.w100 { width:100%; }
/* Submission Detail Page Styles */
.submission-detail { width: 100%; max-width: 1400px; margin: 0 auto; }
.submission-detail .grid { display: grid; }
.submission-detail .grid-cols-1 { grid-template-columns: 1fr; }
.submission-detail .xl\:grid-cols-\[1fr_380px\] { grid-template-columns: 1fr 380px; }
.submission-detail .gap-6 { gap: 24px; }
.submission-detail .space-y-6 > * + * { margin-top: 24px; }
.submission-detail .min-w-0 { min-width: 0; }
.submission-detail .items-start { align-items: flex-start; }

/* React-style cards for submission detail - exact match */
.submission-detail .card.bg-card {
  background: var(--card, #1a1a1a) !important;
  border: 1px solid var(--border, #2d2d2d) !important;
  border-radius: 8px !important;
  padding: 24px !important;
  box-shadow: none !important;
}

.submission-detail .card.bg-card h3 {
  color: var(--foreground, #ffffff) !important;
  font-size: 18px !important;
  font-weight: 500 !important;
  line-height: 1.5 !important;
  margin-bottom: 16px !important;
}

.submission-detail .card.bg-card p {
  color: var(--foreground, #ffffff) !important;
}

.submission-detail .card.bg-card .text-muted-foreground {
  color: var(--muted-foreground, #94a3b8) !important;
}

.submission-detail .card.bg-card .text-xs {
  font-size: 12px !important;
  text-transform: uppercase !important;
  letter-spacing: 0.05em !important;
  font-weight: 500 !important;
}

.submission-detail .card.bg-card .text-sm {
  font-size: 14px !important;
}

.submission-detail .card.bg-card .break-all {
  word-break: break-all !important;
}

/* React-style grid layout for submission information */
.submission-detail .grid.grid-cols-2 {
  display: grid !important;
  grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  gap: 16px !important;
}

.submission-detail .grid.grid-cols-2 > div {
  display: flex !important;
  flex-direction: column !important;
}

.submission-detail .text-xs.uppercase.tracking-wide {
  font-size: 12px !important;
  text-transform: uppercase !important;
  letter-spacing: 0.05em !important;
  font-weight: 500 !important;
  margin-bottom: 4px !important;
}

.submission-detail .mb-1 {
  margin-bottom: 4px !important;
}

/* Tabs */
.tabs { width: 100%; }
.tabs-list { display: grid; grid-template-columns: repeat(3, 1fr); width: 100%; margin-bottom: 16px; }
.tabs-trigger { 
  padding: 8px 16px; 
  text-align: center; 
  background: transparent; 
  border: 1px solid var(--border); 
  color: var(--muted-foreground); 
  cursor: pointer; 
  transition: all 0.2s;
  border-radius: 6px 6px 0 0;
}
.tabs-trigger:first-child { border-radius: 6px 0 0 0; }
.tabs-trigger:last-child { border-radius: 0 6px 0 0; }
.tabs-trigger.active { 
  background: var(--background); 
  color: var(--foreground); 
  border-bottom-color: transparent; 
}
.tabs-content { display: none; }
.tabs-content.active { display: block; }

/* Chat Messages */
.chat-message { display: flex; }
.chat-bubble { 
  background: var(--primary); 
  color: var(--primary-foreground); 
  box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.05);
}
.chat-bubble-received { 
  background: var(--muted); 
  color: var(--foreground); 
}
.chat-bubble-researcher { 
  background: var(--muted); 
  color: var(--foreground); 
}

/* Code blocks */
pre { 
  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
  white-space: pre-wrap;
  word-wrap: break-word;
}

/* React-style code blocks for submission detail - exact match */
.submission-detail .bg-\[#0f1729\] {
  background: #0f1729 !important;
  border: 1px solid #1e293b !important;
  border-radius: 8px !important;
  padding: 16px !important;
  margin: 0 !important;
  display: block !important;
}

/* Alternative selector for the colored card */
.submission-detail .card .rounded-lg {
  background: #0f1729 !important;
  border: 1px solid #1e293b !important;
  border-radius: 8px !important;
  padding: 16px !important;
}

/* Attached Evidence file entries - exact React styling */
.submission-detail .space-y-2 > button {
  width: 100% !important;
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  padding: 12px !important;
  background: #0f1729 !important; /* Dark blue background like code blocks */
  border-radius: 8px !important;
  border: 1px solid #1e293b !important; /* Darker blue border */
  transition: all 0.2s !important;
  cursor: pointer !important;
  text-align: left !important;
  margin-bottom: 8px !important;
}

.submission-detail .space-y-2 > button:hover {
  border-color: rgba(6, 182, 212, 0.5) !important;
  background: #1e293b !important; /* Slightly lighter blue on hover */
}

.submission-detail .space-y-2 > button > div:first-child {
  display: flex !important;
  align-items: center !important;
  gap: 12px !important;
}

.submission-detail .space-y-2 > button > div:first-child > div {
  display: flex !important;
  flex-direction: column !important;
}

.submission-detail .space-y-2 > button > div:first-child > div > p:first-child {
  color: var(--foreground, #ffffff) !important;
  font-size: 14px !important;
  margin: 0 !important;
  font-weight: 500 !important;
}

.submission-detail .space-y-2 > button > div:first-child > div > p:last-child {
  color: var(--muted-foreground, #94a3b8) !important;
  font-size: 12px !important;
  margin: 0 !important;
}

/* Ghost button styling - exact React match */
.submission-detail .btn-ghost.btn-sm {
  height: 32px !important;
  padding: 0 12px !important;
  border-radius: 6px !important;
  background: transparent !important;
  border: none !important;
  color: var(--foreground, #ffffff) !important;
  font-size: 14px !important;
  font-weight: 500 !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 6px !important;
  transition: all 0.2s !important;
  cursor: pointer !important;
  outline: none !important;
}

.submission-detail .btn-ghost.btn-sm:hover {
  background: var(--accent, #0e7490) !important;
  color: var(--accent-foreground, #ffffff) !important;
}

/* Hide View buttons in Attached Evidence section */
.submission-detail .evidence-section .btn-ghost.btn-sm {
  display: none !important;
}

/* Utility classes for attached evidence - Tailwind equivalents */
.bg-muted\/30 {
  background: rgba(148, 163, 184, 0.3) !important;
}

.border-border {
  border-color: var(--border) !important;
}

.hover\:border-primary\/50:hover {
  border-color: rgba(6, 182, 212, 0.5) !important;
}

.hover\:bg-muted\/50:hover {
  background: rgba(148, 163, 184, 0.5) !important;
}

.gap-3 {
  gap: 12px !important;
}

.space-y-2 > * + * {
  margin-top: 8px !important;
}

.space-y-4 > * + * {
  margin-top: 16px !important;
}

/* Margin utility classes */
.mb-6 {
  margin-bottom: 24px !important;
}

.mb-2 {
  margin-bottom: 8px !important;
}

.mb-4 {
  margin-bottom: 16px !important;
}

/* Ensure researcher info flex container spans full width */
.submission-detail .flex.items-center.justify-between {
  width: 100% !important;
}

/* More specific selector for researcher info section */
.submission-detail .space-y-4 > .flex.items-center.justify-between {
  width: 100% !important;
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
}

/* Chat Bubble Styles - exact React match */
.submission-detail .chat-bubble {
  position: relative !important;
  word-wrap: break-word !important;
  overflow-wrap: break-word !important;
}

.submission-detail .chat-bubble-sent {
  background: linear-gradient(135deg, var(--primary, #06b6d4) 0%, #0891b2 100%) !important;
  box-shadow: 0 2px 8px rgba(6, 182, 212, 0.15) !important;
}

.submission-detail .chat-bubble-received {
  background: rgba(234, 179, 8, 0.08) !important;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1) !important;
}

/* More specific selector to override any existing chat bubble styles */
.submission-detail .tabs-content .chat-bubble.chat-bubble-received {
  background: rgba(234, 179, 8, 0.08) !important;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1) !important;
  color: var(--foreground, #ffffff) !important;
}

/* Ultra-specific selector to force the light background */
#internal .chat-bubble.chat-bubble-received,
.submission-detail #internal .chat-bubble.chat-bubble-received {
  background: rgba(234, 179, 8, 0.08) !important;
  background-color: rgba(234, 179, 8, 0.08) !important;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1) !important;
  color: var(--foreground, #ffffff) !important;
}

/* Sarah's message bubble - exact Figma styling */
.submission-detail .chat-bubble-sarah {
  background: rgba(234, 179, 8, 0.08) !important;
  border: 1px solid rgba(240, 176, 0, 0.2) !important;
  border-radius: 16px 16px 16px 6px !important;
  padding: 13px 17px !important;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1) !important;
  position: relative !important;
}

.submission-detail .chat-bubble-sarah p {
  color: #ffffff !important;
  font-size: 14px !important;
  font-weight: 400 !important;
  line-height: 22.75px !important;
  margin: 0 !important;
}

/* Clean Chat Container Styles */
.chat-container {
  display: flex !important;
  flex-direction: column !important;
  height: 500px !important;
  width: 100% !important;
}

.chat-messages {
  flex: 1 !important;
  overflow-y: auto !important;
  padding: 16px !important;
  display: flex !important;
  flex-direction: column !important;
  gap: 16px !important;
}

.message-container {
  display: flex !important;
  flex-direction: column !important;
  gap: 4px !important;
}

.admin-message {
  align-items: flex-end !important;
}

.sarah-message {
  align-items: flex-start !important;
}

.message-header {
  display: flex !important;
  align-items: center !important;
  gap: 6px !important;
  padding: 0 4px !important;
}

.sender-name {
  color: #94a3b8 !important;
  font-size: 12px !important;
  font-weight: 500 !important;
  line-height: 16px !important;
}

.separator {
  color: rgba(148, 162, 183, 0.6) !important;
  font-size: 12px !important;
  font-weight: 400 !important;
  line-height: 1 !important;
  vertical-align: middle !important;
  display: inline-flex !important;
  align-items: center !important;
}

.timestamp {
  color: rgba(148, 162, 183, 0.8) !important;
  font-size: 12px !important;
  font-weight: 400 !important;
}

.message-bubble {
  border-radius: 16px !important;
  padding: 12px 16px !important;
  max-width: 70% !important;
  word-wrap: break-word !important;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1) !important;
}

.admin-bubble {
  background: linear-gradient(135deg, #06b6d4, #0891b2) !important;
  border-radius: 16px 16px 6px 16px !important;
  box-shadow: 0 2px 8px rgba(6, 182, 212, 0.15) !important;
}

.sarah-bubble {
  background: rgba(234, 179, 8, 0.08) !important;
  border: 1px solid rgba(240, 176, 0, 0.2) !important;
  border-radius: 16px 16px 16px 6px !important;
}

.message-text {
  color: #0a0a0a !important;
  font-size: 14px !important;
  font-weight: 400 !important;
  line-height: 22.75px !important;
}

            .sarah-bubble .message-text {
              color: #ffffff !important;
            }

            .researcher-message {
              align-items: flex-start !important;
            }

            .researcher-bubble {
              background: rgba(59, 130, 246, 0.08) !important;
              border: 1px solid rgba(59, 130, 246, 0.2) !important;
              border-radius: 16px 16px 16px 6px !important;
            }

            .researcher-bubble .message-text {
              color: #ffffff !important;
            }

.chat-input-container {
  padding: 17px 8px !important;
  background: rgba(26, 26, 26, 0.5) !important;
  border-top: 1px solid rgba(45, 44, 44, 0.5) !important;
  display: flex !important;
  flex-direction: column !important;
  gap: 8px !important;
}

.input-main-container {
  display: flex !important;
  align-items: flex-start !important;
  flex-wrap: nowrap !important;
  gap: 8px !important;
  position: relative !important;
  width: 100% !important;
  height: 40px !important;
}

.input-wrapper {
  display: flex !important;
  align-items: center !important;
  flex-wrap: nowrap !important;
  flex-grow: 1 !important;
  flex-shrink: 0 !important;
  flex-basis: 0 !important;
  position: relative !important;
  height: 36px !important;
  padding: 4px 16px 4px 16px !important;
  background: #1a1a1a !important;
  border: 1px solid #06b6d4 !important;
  overflow: hidden !important;
  border-radius: 16777200px !important;
}

.text-input {
  flex-shrink: 0 !important;
  flex-basis: auto !important;
  position: relative !important;
  height: 17px !important;
  color: #94a3b8 !important;
  font-family: Inter, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Ubuntu, "Helvetica Neue", Helvetica, Arial, "PingFang SC", "Hiragino Sans GB", "Microsoft Yahei UI", "Microsoft Yahei", "Source Han Sans CN", sans-serif !important;
  font-size: 14px !important;
  font-weight: 400 !important;
  line-height: 16.943px !important;
  text-align: left !important;
  white-space: nowrap !important;
  z-index: 1 !important;
  background: transparent !important;
  border: none !important;
  outline: none !important;
  width: 100% !important;
}

.text-input::placeholder {
  color: #94a3b8 !important;
}

.send-button {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  flex-wrap: nowrap !important;
  flex-shrink: 0 !important;
  position: relative !important;
  width: 40px !important;
  height: 40px !important;
  background: #06b6d4 !important;
  opacity: 0.5 !important;
  z-index: 2 !important;
  border-radius: 16777200px !important;
  cursor: pointer !important;
}

.send-button:hover {
  opacity: 0.8 !important;
}

.send-icon {
  flex-shrink: 0 !important;
  position: relative !important;
  width: 16px !important;
  height: 16px !important;
  z-index: 3 !important;
  overflow: hidden !important;
  color: #ffffff !important;
}

.input-help {
  display: flex !important;
  align-items: center !important;
  gap: 4px !important;
  height: 16px !important;
}

.help-text {
  color: rgba(148, 162, 183, 0.7) !important;
  font-size: 12px !important;
  font-weight: 400 !important;
  line-height: 16px !important;
}

.key-indicator {
  display: flex !important;
  align-items: center !important;
  padding: 2px 6px !important;
  background: #1e293b !important;
  border-radius: 4px !important;
}

.key-text {
  color: rgba(148, 162, 183, 0.7) !important;
  font-size: 12px !important;
  font-weight: 400 !important;
  line-height: 16px !important;
}

/* Workflow Actions Figma Styles */
.workflow-actions-container {
  overflow: hidden !important;
  display: flex !important;
  flex-direction: column !important;
  align-items: flex-start !important;
  flex-wrap: nowrap !important;
  gap: 40px !important;
  position: relative !important;
  width: 380px !important;
  height: auto !important;
  margin: 0 auto !important;
  padding: 24px 0 24px 24px !important;
  background: #1a1a1a !important;
  border: 1px solid #2d2d2d !important;
  border-radius: 12px !important;
}

/* Sticky workflow actions */
aside.sticky {
  position: sticky !important;
  top: 20px !important;
  align-self: flex-start !important;
  max-height: calc(100vh - 40px) !important;
  overflow-y: auto !important;
}

/* Ensure proper spacing between workflow cards */
aside.sticky.space-y-4 > * + * {
  margin-top: 16px !important; /* 16px spacing between cards */
}

.workflow-actions-container * {
  box-sizing: border-box !important;
}

.workflow-actions-container input,
.workflow-actions-container select,
.workflow-actions-container textarea,
.workflow-actions-container button {
  outline: 0 !important;
}

.workflow-header {
  display: flex !important;
  align-items: center !important;
  gap: 8px !important;
  position: relative !important;
}

.workflow-title {
  flex-shrink: 0 !important;
  position: relative !important;
  height: 24px !important;
  color: #ffffff !important;
  font-family: Inter, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Ubuntu, "Helvetica Neue", Helvetica, Arial, "PingFang SC", "Hiragino Sans GB", "Microsoft Yahei UI", "Microsoft Yahei", "Source Han Sans CN", sans-serif !important;
  font-size: 16px !important;
  font-weight: 400 !important;
  line-height: 24px !important;
  text-align: left !important;
  white-space: nowrap !important;
  z-index: 2 !important;
  margin-left: 8px !important;
}

.workflow-icon {
  flex-shrink: 0 !important;
  position: relative !important;
  width: 20px !important;
  height: 20px !important;
  z-index: 1 !important;
  overflow: hidden !important;
  color: #ffffff !important;
}

.workflow-buttons {
  display: flex !important;
  flex-direction: column !important;
  align-items: flex-start !important;
  flex-wrap: nowrap !important;
  flex-grow: 1 !important;
  flex-shrink: 0 !important;
  flex-basis: 0 !important;
  gap: 12px !important;
  position: relative !important;
  width: 330px !important;
  min-height: 0 !important;
  z-index: 3 !important;
}

.workflow-button {
  align-self: stretch !important;
  flex-shrink: 0 !important;
  position: relative !important;
  min-width: 0 !important;
  height: 36px !important;
  border-radius: 6px !important;
  display: flex !important;
  align-items: center !important;
  justify-content: flex-start !important;
  padding-left: 12px !important;
  cursor: pointer !important;
  transition: all 0.2s !important;
}

.validate-button {
  background: #06b6d4 !important;
  z-index: 4 !important;
}

.validate-button .button-text {
  color: #0a0a0a !important;
}

.validate-button .button-icon {
  color: #0a0a0a !important;
}

.outline-button {
  background: #121212 !important;
  border: 1px solid #2d2d2d !important;
  z-index: 7 !important;
}

.outline-button:hover {
  border-color: #06b6d4 !important;
  background: #1a1a1a !important;
}

.reject-button {
  background: #121212 !important;
  border: 1px solid rgba(238, 67, 67, 0.5) !important;
  z-index: 17 !important;
}

.reject-button:hover {
  background: rgba(238, 67, 67, 0.1) !important;
  border-color: #ef4444 !important;
}

.disabled-button {
  background: #121212 !important;
  border: 1px solid #2d2d2d !important;
  opacity: 0.5 !important;
  z-index: 21 !important;
  cursor: not-allowed !important;
}

.button-text {
  color: #ffffff !important;
  font-family: Inter, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Ubuntu, "Helvetica Neue", Helvetica, Arial, "PingFang SC", "Hiragino Sans GB", "Microsoft Yahei UI", "Microsoft Yahei", "Source Han Sans CN", sans-serif !important;
  font-size: 14px !important;
  font-weight: 500 !important;
  line-height: 20px !important;
  text-align: left !important;
  white-space: nowrap !important;
  margin-left: 8px !important;
}

.reject-button .button-text {
  color: #ef4444 !important;
}

.reject-button .button-icon {
  color: #ef4444 !important;
}

.button-icon {
  flex-shrink: 0 !important;
  position: relative !important;
  width: 16px !important;
  height: 16px !important;
  z-index: 5 !important;
  overflow: hidden !important;
  color: #ffffff !important;
}

.workflow-separator {
  align-self: stretch !important;
  flex-shrink: 0 !important;
  position: relative !important;
  min-width: 0 !important;
  height: 1px !important;
  background: #2d2d2d !important;
  z-index: 13 !important;
}

/* Quick Reference Card Styles */
.quick-reference-container {
  display: flex !important;
  flex-direction: column !important;
  align-items: flex-start !important;
  flex-wrap: nowrap !important;
  gap: 16px !important;
  position: relative !important;
  width: 380px !important;
  height: auto !important;
  margin: 0 auto !important;
  padding: 16px !important;
  background: #1a1a1a !important;
  border: 1px solid #2d2d2d !important;
  border-radius: 12px !important;
}

.quick-reference-header {
  display: flex !important;
  align-items: center !important;
  flex-wrap: nowrap !important;
  gap: 8px !important;
  position: relative !important;
  width: 100% !important;
  height: 24px !important;
}

.quick-reference-title {
  flex-shrink: 0 !important;
  position: relative !important;
  height: 24px !important;
  color: #ffffff !important;
  font-family: Inter, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Ubuntu, "Helvetica Neue", Helvetica, Arial, "PingFang SC", "Hiragino Sans GB", "Microsoft Yahei UI", "Microsoft Yahei", "Source Han Sans CN", sans-serif !important;
  font-size: 14px !important;
  font-weight: 500 !important;
  line-height: 24px !important;
  text-align: left !important;
  white-space: nowrap !important;
}

.quick-reference-content {
  display: flex !important;
  flex-direction: column !important;
  align-items: flex-start !important;
  flex-wrap: nowrap !important;
  gap: 8px !important;
  position: relative !important;
  width: 100% !important;
  min-height: 0 !important;
}

.quick-reference-item {
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  flex-wrap: nowrap !important;
  gap: 8px !important;
  position: relative !important;
  width: 100% !important;
  height: 20px !important;
}

.quick-reference-label {
  flex-shrink: 0 !important;
  position: relative !important;
  height: 20px !important;
  color: rgba(148, 162, 183, 0.8) !important;
  font-family: Inter, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Ubuntu, "Helvetica Neue", Helvetica, Arial, "PingFang SC", "Hiragino Sans GB", "Microsoft Yahei UI", "Microsoft Yahei", "Source Han Sans CN", sans-serif !important;
  font-size: 12px !important;
  font-weight: 400 !important;
  line-height: 20px !important;
  text-align: left !important;
  white-space: nowrap !important;
}

.quick-reference-value {
  flex-shrink: 0 !important;
  position: relative !important;
  height: 20px !important;
  color: #ffffff !important;
  font-family: Inter, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Ubuntu, "Helvetica Neue", Helvetica, Arial, "PingFang SC", "Hiragino Sans GB", "Microsoft Yahei UI", "Microsoft Yahei", "Source Han Sans CN", sans-serif !important;
  font-size: 12px !important;
  font-weight: 500 !important;
  line-height: 20px !important;
  text-align: right !important;
  white-space: nowrap !important;
}

.figma-chat-container * {
  box-sizing: border-box !important;
}

.figma-chat-container input,
.figma-chat-container select,
.figma-chat-container textarea,
.figma-chat-container button {
  outline: 0 !important;
}

.figma-chat-container .group {
  flex-grow: 1 !important;
  flex-shrink: 0 !important;
  flex-basis: 0 !important;
  position: relative !important;
  width: 100% !important;
  overflow: hidden !important;
}

.figma-chat-container .group-2 {
  position: relative !important;
  width: 100% !important;
  height: auto !important;
  margin-bottom: 16px !important;
  z-index: 34 !important;
}

.figma-chat-container .wrapper {
  position: relative !important;
  width: auto !important;
  height: auto !important;
  margin: 0 0 16px auto !important;
  max-width: 70% !important;
  z-index: 1 !important;
  overflow: visible auto !important;
}

.figma-chat-container .group-3 {
  display: flex !important;
  align-items: center !important;
  flex-wrap: nowrap !important;
  gap: 6px !important;
  position: relative !important;
  width: auto !important;
  height: 16px !important;
  margin: 0 0 0 auto !important;
  padding: 0 4px 0 4px !important;
  z-index: 2 !important;
}

.figma-chat-container .section {
  flex-shrink: 0 !important;
  position: relative !important;
  width: 66.961px !important;
  height: 16px !important;
  z-index: 3 !important;
}

.figma-chat-container .text {
  color: #94a3b8 !important;
  font-family: Inter, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Ubuntu, "Helvetica Neue", Helvetica, Arial, "PingFang SC", "Hiragino Sans GB", "Microsoft Yahei UI", "Microsoft Yahei", "Source Han Sans CN", sans-serif !important;
  font-size: 12px !important;
  font-weight: 500 !important;
  line-height: 16px !important;
  margin: 0 !important;
}

.figma-chat-container .box {
  flex-shrink: 0 !important;
  position: relative !important;
  width: 6.75px !important;
  height: 16px !important;
  z-index: 5 !important;
}

.figma-chat-container .text-2 {
  color: rgba(148, 162, 183, 0.6) !important;
  font-family: Inter, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Ubuntu, "Helvetica Neue", Helvetica, Arial, "PingFang SC", "Hiragino Sans GB", "Microsoft Yahei UI", "Microsoft Yahei", "Source Han Sans CN", sans-serif !important;
  font-size: 12px !important;
  font-weight: 400 !important;
  line-height: 16px !important;
  margin: 0 !important;
}

.figma-chat-container .box-2 {
  flex-grow: 1 !important;
  flex-shrink: 0 !important;
  flex-basis: 0 !important;
  position: relative !important;
  min-width: 0 !important;
  height: 16px !important;
  z-index: 7 !important;
}

.figma-chat-container .text-3 {
  color: rgba(148, 162, 183, 0.8) !important;
  font-family: Inter, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Ubuntu, "Helvetica Neue", Helvetica, Arial, "PingFang SC", "Hiragino Sans GB", "Microsoft Yahei UI", "Microsoft Yahei", "Source Han Sans CN", sans-serif !important;
  font-size: 12px !important;
  font-weight: 400 !important;
  line-height: 16px !important;
  margin: 0 !important;
}

.figma-chat-container .wrapper-2 {
  display: flex !important;
  flex-direction: column !important;
  align-items: flex-start !important;
  flex-wrap: nowrap !important;
  position: relative !important;
  width: auto !important;
  height: auto !important;
  margin: 4px 0 0 0 !important;
  padding: 12px 16px !important;
  background: linear-gradient(135deg, #06b6d4, #0891b2) !important;
  z-index: 9 !important;
  border-radius: 16px 16px 6px 16px !important;
  box-shadow: 0 2px 8px 0 rgba(6, 182, 212, 0.15) !important;
}

.figma-chat-container .box-3 {
  align-self: stretch !important;
  flex-shrink: 0 !important;
  position: relative !important;
  min-width: 0 !important;
  height: 22.75px !important;
  z-index: 10 !important;
}

.figma-chat-container .text-4 {
  color: #0a0a0a !important;
  font-family: Inter, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Ubuntu, "Helvetica Neue", Helvetica, Arial, "PingFang SC", "Hiragino Sans GB", "Microsoft Yahei UI", "Microsoft Yahei", "Source Han Sans CN", sans-serif !important;
  font-size: 14px !important;
  font-weight: 400 !important;
  line-height: 22.75px !important;
  margin: 0 !important;
}

.figma-chat-container .wrapper-3 {
  position: relative !important;
  width: auto !important;
  height: auto !important;
  margin: 0 0 16px auto !important;
  max-width: 70% !important;
  z-index: 34 !important;
  overflow: visible auto !important;
}

.figma-chat-container .box-4 {
  display: flex !important;
  align-items: center !important;
  flex-wrap: nowrap !important;
  gap: 6px !important;
  position: relative !important;
  width: auto !important;
  height: 16px !important;
  margin: 0 0 0 auto !important;
  padding: 0 4px 0 4px !important;
  z-index: 35 !important;
}

.figma-chat-container .section-2 {
  flex-shrink: 0 !important;
  position: relative !important;
  width: 66.961px !important;
  height: 16px !important;
  z-index: 36 !important;
}

.figma-chat-container .text-5 {
  display: flex !important;
  align-items: flex-start !important;
  justify-content: flex-start !important;
  position: absolute !important;
  height: 16px !important;
  top: 0.5px !important;
  left: 0 !important;
  color: #94a3b8 !important;
  font-family: Inter, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Ubuntu, "Helvetica Neue", Helvetica, Arial, "PingFang SC", "Hiragino Sans GB", "Microsoft Yahei UI", "Microsoft Yahei", "Source Han Sans CN", sans-serif !important;
  font-size: 12px !important;
  font-weight: 500 !important;
  line-height: 16px !important;
  text-align: left !important;
  white-space: nowrap !important;
  z-index: 37 !important;
}

.figma-chat-container .group-4 {
  flex-shrink: 0 !important;
  position: relative !important;
  width: 6.75px !important;
  height: 16px !important;
  z-index: 38 !important;
}

.figma-chat-container .text-6 {
  display: flex !important;
  align-items: flex-start !important;
  justify-content: flex-start !important;
  position: absolute !important;
  height: 16px !important;
  top: 0.5px !important;
  left: 0 !important;
  color: rgba(148, 162, 183, 0.6) !important;
  font-family: Inter, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Ubuntu, "Helvetica Neue", Helvetica, Arial, "PingFang SC", "Hiragino Sans GB", "Microsoft Yahei UI", "Microsoft Yahei", "Source Han Sans CN", sans-serif !important;
  font-size: 12px !important;
  font-weight: 400 !important;
  line-height: 16px !important;
  text-align: left !important;
  white-space: nowrap !important;
  z-index: 39 !important;
}

.figma-chat-container .section-3 {
  flex-grow: 1 !important;
  flex-shrink: 0 !important;
  flex-basis: 0 !important;
  position: relative !important;
  min-width: 0 !important;
  height: 16px !important;
  z-index: 40 !important;
}

.figma-chat-container .text-7 {
  display: flex !important;
  align-items: flex-start !important;
  justify-content: flex-start !important;
  position: absolute !important;
  height: 16px !important;
  top: 0.5px !important;
  left: 0 !important;
  color: rgba(148, 162, 183, 0.8) !important;
  font-family: Inter, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Ubuntu, "Helvetica Neue", Helvetica, Arial, "PingFang SC", "Hiragino Sans GB", "Microsoft Yahei UI", "Microsoft Yahei", "Source Han Sans CN", sans-serif !important;
  font-size: 12px !important;
  font-weight: 400 !important;
  line-height: 16px !important;
  text-align: left !important;
  white-space: nowrap !important;
  z-index: 41 !important;
}

.figma-chat-container .wrapper-4 {
  display: flex !important;
  flex-direction: column !important;
  align-items: flex-start !important;
  flex-wrap: nowrap !important;
  position: relative !important;
  width: auto !important;
  height: auto !important;
  margin: 4px 0 0 0 !important;
  padding: 12px 16px !important;
  background: linear-gradient(135deg, #06b6d4, #0891b2) !important;
  z-index: 42 !important;
  border-radius: 16px 16px 6px 16px !important;
  box-shadow: 0 2px 8px 0 rgba(6, 182, 212, 0.15) !important;
}

.figma-chat-container .section-4 {
  align-self: stretch !important;
  flex-shrink: 0 !important;
  position: relative !important;
  min-width: 0 !important;
  height: 22.75px !important;
  z-index: 43 !important;
}

.figma-chat-container .text-8 {
  display: flex !important;
  align-items: flex-start !important;
  justify-content: flex-start !important;
  position: absolute !important;
  height: 23px !important;
  top: 0.5px !important;
  left: 0 !important;
  color: #0a0a0a !important;
  font-family: Inter, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Ubuntu, "Helvetica Neue", Helvetica, Arial, "PingFang SC", "Hiragino Sans GB", "Microsoft Yahei UI", "Microsoft Yahei", "Source Han Sans CN", sans-serif !important;
  font-size: 14px !important;
  font-weight: 400 !important;
  line-height: 22.75px !important;
  text-align: left !important;
  white-space: nowrap !important;
  z-index: 44 !important;
}

.figma-chat-container .group-5 {
  position: relative !important;
  width: 100% !important;
  height: auto !important;
  margin-bottom: 16px !important;
  z-index: 23 !important;
}

.figma-chat-container .wrapper-5 {
  position: relative !important;
  width: auto !important;
  height: auto !important;
  margin: 0 0 16px 0 !important;
  max-width: 70% !important;
  z-index: 12 !important;
  overflow: visible auto !important;
}

.figma-chat-container .group-6 {
  display: flex !important;
  align-items: center !important;
  flex-wrap: nowrap !important;
  gap: 6px !important;
  position: relative !important;
  width: 235.133px !important;
  height: 16px !important;
  margin: 0 0 0 0 !important;
  padding: 0 4px 0 4px !important;
  z-index: 13 !important;
}

.figma-chat-container .wrapper-6 {
  flex-shrink: 0 !important;
  position: relative !important;
  width: 86.883px !important;
  height: 16px !important;
  z-index: 14 !important;
}

.figma-chat-container .text-9 {
  display: flex !important;
  align-items: flex-start !important;
  justify-content: flex-start !important;
  position: absolute !important;
  height: 16px !important;
  top: 0.5px !important;
  left: 0 !important;
  color: #94a3b8 !important;
  font-family: Inter, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Ubuntu, "Helvetica Neue", Helvetica, Arial, "PingFang SC", "Hiragino Sans GB", "Microsoft Yahei UI", "Microsoft Yahei", "Source Han Sans CN", sans-serif !important;
  font-size: 12px !important;
  font-weight: 500 !important;
  line-height: 16px !important;
  text-align: left !important;
  white-space: nowrap !important;
  z-index: 15 !important;
}

.figma-chat-container .wrapper-7 {
  flex-shrink: 0 !important;
  position: relative !important;
  width: 6.75px !important;
  height: 16px !important;
  z-index: 16 !important;
}

.figma-chat-container .text-a {
  display: flex !important;
  align-items: flex-start !important;
  justify-content: flex-start !important;
  position: absolute !important;
  height: 16px !important;
  top: 0.5px !important;
  left: 0 !important;
  color: rgba(148, 162, 183, 0.6) !important;
  font-family: Inter, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Ubuntu, "Helvetica Neue", Helvetica, Arial, "PingFang SC", "Hiragino Sans GB", "Microsoft Yahei UI", "Microsoft Yahei", "Source Han Sans CN", sans-serif !important;
  font-size: 12px !important;
  font-weight: 400 !important;
  line-height: 16px !important;
  text-align: left !important;
  white-space: nowrap !important;
  z-index: 17 !important;
}

.figma-chat-container .wrapper-8 {
  flex-grow: 1 !important;
  flex-shrink: 0 !important;
  flex-basis: 0 !important;
  position: relative !important;
  min-width: 0 !important;
  height: 16px !important;
  z-index: 18 !important;
}

.figma-chat-container .text-b {
  display: flex !important;
  align-items: flex-start !important;
  justify-content: flex-start !important;
  position: absolute !important;
  height: 16px !important;
  top: 0.5px !important;
  left: 0 !important;
  color: rgba(148, 162, 183, 0.8) !important;
  font-family: Inter, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Ubuntu, "Helvetica Neue", Helvetica, Arial, "PingFang SC", "Hiragino Sans GB", "Microsoft Yahei UI", "Microsoft Yahei", "Source Han Sans CN", sans-serif !important;
  font-size: 12px !important;
  font-weight: 400 !important;
  line-height: 16px !important;
  text-align: left !important;
  white-space: nowrap !important;
  z-index: 19 !important;
}

.figma-chat-container .group-7 {
  display: flex !important;
  flex-direction: column !important;
  align-items: flex-start !important;
  flex-wrap: nowrap !important;
  position: relative !important;
  width: auto !important;
  height: auto !important;
  margin: 4px 0 0 0 !important;
  padding: 13px 17px !important;
  background: rgba(234, 179, 8, 0.08) !important;
  border: 1px solid rgba(240, 176, 0, 0.2) !important;
  z-index: 20 !important;
  border-radius: 16px 16px 16px 6px !important;
  box-shadow: 0 2px 8px 0 rgba(0, 0, 0, 0.1) !important;
}

.figma-chat-container .section-5 {
  align-self: stretch !important;
  flex-shrink: 0 !important;
  position: relative !important;
  min-width: 0 !important;
  height: 22.75px !important;
  z-index: 21 !important;
}

.figma-chat-container .text-c {
  display: flex !important;
  align-items: flex-start !important;
  justify-content: flex-start !important;
  position: absolute !important;
  height: 23px !important;
  top: 0.5px !important;
  left: 0 !important;
  color: #ffffff !important;
  font-family: Inter, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Ubuntu, "Helvetica Neue", Helvetica, Arial, "PingFang SC", "Hiragino Sans GB", "Microsoft Yahei UI", "Microsoft Yahei", "Source Han Sans CN", sans-serif !important;
  font-size: 14px !important;
  font-weight: 400 !important;
  line-height: 22.75px !important;
  text-align: left !important;
  white-space: nowrap !important;
  z-index: 22 !important;
}

.figma-chat-container .group-8 {
  position: relative !important;
  width: auto !important;
  height: auto !important;
  margin: 0 0 16px 0 !important;
  max-width: 70% !important;
  z-index: 23 !important;
  overflow: visible auto !important;
}

.figma-chat-container .box-5 {
  display: flex !important;
  align-items: center !important;
  flex-wrap: nowrap !important;
  gap: 6px !important;
  position: relative !important;
  width: 239.602px !important;
  height: 16px !important;
  margin: 0 0 0 0 !important;
  padding: 0 4px 0 4px !important;
  z-index: 24 !important;
}

.figma-chat-container .box-6 {
  flex-shrink: 0 !important;
  position: relative !important;
  width: 86.883px !important;
  height: 16px !important;
  z-index: 25 !important;
}

.figma-chat-container .text-d {
  display: flex !important;
  align-items: flex-start !important;
  justify-content: flex-start !important;
  position: absolute !important;
  height: 16px !important;
  top: 0.5px !important;
  left: 0 !important;
  color: #94a3b8 !important;
  font-family: Inter, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Ubuntu, "Helvetica Neue", Helvetica, Arial, "PingFang SC", "Hiragino Sans GB", "Microsoft Yahei UI", "Microsoft Yahei", "Source Han Sans CN", sans-serif !important;
  font-size: 12px !important;
  font-weight: 500 !important;
  line-height: 16px !important;
  text-align: left !important;
  white-space: nowrap !important;
  z-index: 26 !important;
}

.figma-chat-container .group-9 {
  flex-shrink: 0 !important;
  position: relative !important;
  width: 6.75px !important;
  height: 16px !important;
  z-index: 27 !important;
}

.figma-chat-container .text-e {
  display: flex !important;
  align-items: flex-start !important;
  justify-content: flex-start !important;
  position: absolute !important;
  height: 16px !important;
  top: 0.5px !important;
  left: 0 !important;
  color: rgba(148, 162, 183, 0.6) !important;
  font-family: Inter, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Ubuntu, "Helvetica Neue", Helvetica, Arial, "PingFang SC", "Hiragino Sans GB", "Microsoft Yahei UI", "Microsoft Yahei", "Source Han Sans CN", sans-serif !important;
  font-size: 12px !important;
  font-weight: 400 !important;
  line-height: 16px !important;
  text-align: left !important;
  white-space: nowrap !important;
  z-index: 28 !important;
}

.figma-chat-container .section-6 {
  flex-grow: 1 !important;
  flex-shrink: 0 !important;
  flex-basis: 0 !important;
  position: relative !important;
  min-width: 0 !important;
  height: 16px !important;
  z-index: 29 !important;
}

.figma-chat-container .text-f {
  display: flex !important;
  align-items: flex-start !important;
  justify-content: flex-start !important;
  position: absolute !important;
  height: 16px !important;
  top: 0.5px !important;
  left: 0 !important;
  color: rgba(148, 162, 183, 0.8) !important;
  font-family: Inter, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Ubuntu, "Helvetica Neue", Helvetica, Arial, "PingFang SC", "Hiragino Sans GB", "Microsoft Yahei UI", "Microsoft Yahei", "Source Han Sans CN", sans-serif !important;
  font-size: 12px !important;
  font-weight: 400 !important;
  line-height: 16px !important;
  text-align: left !important;
  white-space: nowrap !important;
  z-index: 30 !important;
}

.figma-chat-container .section-7 {
  display: flex !important;
  flex-direction: column !important;
  align-items: flex-start !important;
  flex-wrap: nowrap !important;
  position: relative !important;
  width: auto !important;
  height: auto !important;
  margin: 4px 0 0 0 !important;
  padding: 13px 17px !important;
  background: rgba(234, 179, 8, 0.08) !important;
  border: 1px solid rgba(240, 176, 0, 0.2) !important;
  z-index: 31 !important;
  border-radius: 16px 16px 16px 6px !important;
  box-shadow: 0 2px 8px 0 rgba(0, 0, 0, 0.1) !important;
}

.figma-chat-container .section-8 {
  align-self: stretch !important;
  flex-shrink: 0 !important;
  position: relative !important;
  min-width: 0 !important;
  height: 22.75px !important;
  z-index: 32 !important;
}

.figma-chat-container .text-10 {
  display: flex !important;
  align-items: flex-start !important;
  justify-content: flex-start !important;
  position: absolute !important;
  height: 23px !important;
  top: 0.5px !important;
  left: 0 !important;
  color: #ffffff !important;
  font-family: Inter, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Ubuntu, "Helvetica Neue", Helvetica, Arial, "PingFang SC", "Hiragino Sans GB", "Microsoft Yahei UI", "Microsoft Yahei", "Source Han Sans CN", sans-serif !important;
  font-size: 14px !important;
  font-weight: 400 !important;
  line-height: 22.75px !important;
  text-align: left !important;
  white-space: nowrap !important;
  z-index: 33 !important;
}

.figma-chat-container .box-7 {
  display: flex !important;
  flex-direction: column !important;
  align-items: flex-start !important;
  flex-wrap: nowrap !important;
  flex-shrink: 0 !important;
  gap: 8px !important;
  position: relative !important;
  width: 100% !important;
  height: 81px !important;
  padding: 17px 8px 0 8px !important;
  background: rgba(26, 26, 26, 0.5) !important;
  border-bottom: 1px solid rgba(45, 44, 44, 0.5) !important;
  z-index: 45 !important;
}

.figma-chat-container .wrapper-9 {
  display: flex !important;
  align-items: flex-start !important;
  align-self: stretch !important;
  flex-wrap: nowrap !important;
  flex-shrink: 0 !important;
  gap: 8px !important;
  position: relative !important;
  min-width: 0 !important;
  height: 40px !important;
  z-index: 46 !important;
}

.figma-chat-container .box-8 {
  display: flex !important;
  align-items: center !important;
  flex-wrap: nowrap !important;
  flex-grow: 1 !important;
  flex-shrink: 0 !important;
  flex-basis: 0 !important;
  position: relative !important;
  height: 36px !important;
  padding: 4px 16px 4px 16px !important;
  background: #1a1a1a !important;
  border: 1px solid #2d2d2d !important;
  z-index: 47 !important;
  overflow: hidden !important;
  border-radius: 16777200px !important;
}

.figma-chat-container .text-11 {
  flex-shrink: 0 !important;
  flex-basis: auto !important;
  position: relative !important;
  height: 17px !important;
  color: #ffffff !important;
  font-family: Inter, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Ubuntu, "Helvetica Neue", Helvetica, Arial, "PingFang SC", "Hiragino Sans GB", "Microsoft Yahei UI", "Microsoft Yahei", "Source Han Sans CN", sans-serif !important;
  font-size: 14px !important;
  font-weight: 400 !important;
  line-height: 16.943px !important;
  text-align: left !important;
  white-space: nowrap !important;
  z-index: 48 !important;
  background: transparent !important;
  border: none !important;
  outline: none !important;
  width: 100% !important;
}

.figma-chat-container .text-11::placeholder {
  color: #94a3b8 !important;
}

.figma-chat-container .box-9 {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  flex-wrap: nowrap !important;
  flex-shrink: 0 !important;
  position: relative !important;
  width: 40px !important;
  height: 40px !important;
  background: #06b6d4 !important;
  opacity: 0.5 !important;
  z-index: 49 !important;
  border-radius: 16777200px !important;
  cursor: pointer !important;
}

.figma-chat-container .box-9:hover {
  opacity: 0.8 !important;
}

.figma-chat-container .pic {
  flex-shrink: 0 !important;
  position: relative !important;
  width: 16px !important;
  height: 16px !important;
  z-index: 50 !important;
  overflow: hidden !important;
  color: #ffffff !important;
}

.figma-chat-container .wrapper-a {
  align-self: stretch !important;
  flex-shrink: 0 !important;
  position: relative !important;
  min-width: 0 !important;
  height: 16px !important;
  z-index: 51 !important;
}

.figma-chat-container .wrapper-b {
  display: flex !important;
  align-items: flex-start !important;
  flex-wrap: nowrap !important;
  position: absolute !important;
  width: 48.125px !important;
  height: 18px !important;
  top: -1px !important;
  left: 42.797px !important;
  padding: 2px 6px 2px 6px !important;
  background: #1e293b !important;
  z-index: 53 !important;
  border-radius: 4px !important;
}

.figma-chat-container .text-12 {
  flex-grow: 1 !important;
  flex-shrink: 0 !important;
  flex-basis: auto !important;
  position: relative !important;
  min-width: 0 !important;
  height: 16px !important;
  color: rgba(148, 162, 183, 0.7) !important;
  font-family: Inter, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Ubuntu, "Helvetica Neue", Helvetica, Arial, "PingFang SC", "Hiragino Sans GB", "Microsoft Yahei UI", "Microsoft Yahei", "Source Han Sans CN", sans-serif !important;
  font-size: 12px !important;
  font-weight: 400 !important;
  line-height: 16px !important;
  text-align: left !important;
  white-space: nowrap !important;
  z-index: 54 !important;
}

.figma-chat-container .text-13 {
  display: flex !important;
  align-items: flex-start !important;
  justify-content: flex-start !important;
  position: absolute !important;
  height: 16px !important;
  top: 0.5px !important;
  left: 8px !important;
  color: rgba(148, 162, 183, 0.7) !important;
  font-family: Inter, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Ubuntu, "Helvetica Neue", Helvetica, Arial, "PingFang SC", "Hiragino Sans GB", "Microsoft Yahei UI", "Microsoft Yahei", "Source Han Sans CN", sans-serif !important;
  font-size: 12px !important;
  font-weight: 400 !important;
  line-height: 16px !important;
  text-align: left !important;
  white-space: nowrap !important;
  z-index: 52 !important;
}

.figma-chat-container .text-14 {
  display: flex !important;
  align-items: flex-start !important;
  justify-content: flex-start !important;
  position: absolute !important;
  height: 16px !important;
  top: 0.5px !important;
  left: 90.922px !important;
  color: rgba(148, 162, 183, 0.7) !important;
  font-family: Inter, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Ubuntu, "Helvetica Neue", Helvetica, Arial, "PingFang SC", "Hiragino Sans GB", "Microsoft Yahei UI", "Microsoft Yahei", "Source Han Sans CN", sans-serif !important;
  font-size: 12px !important;
  font-weight: 400 !important;
  line-height: 16px !important;
  text-align: left !important;
  white-space: nowrap !important;
  z-index: 55 !important;
}

.submission-detail .chat-bubble-researcher {
  background: rgba(59, 130, 246, 0.08) !important;
  box-shadow: 0 2px 8px rgba(59, 130, 246, 0.1) !important;
}

.submission-detail .bg-\[#0f1729\] pre {
  color: rgba(255, 255, 255, 0.9) !important;
  font-size: 14px !important;
  line-height: 1.6 !important;
  margin: 0 !important;
  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace !important;
  white-space: pre-wrap !important;
}

/* Separator */
.separator { 
  height: 1px; 
  background: var(--border); 
  margin: 16px 0; 
}

/* Gold badge */
.badge.gold { 
  background: rgba(251, 191, 36, 0.15); 
  color: rgb(251, 191, 36); 
  border: 1px solid rgba(251, 191, 36, 0.3); 
  padding: 3px 10px; 
  border-radius: 9999px; 
  font-size: 12px; 
  font-weight: 500; 
}

/* Silver badge */
.badge.silver {
  background: rgba(148, 163, 184, 0.15);
  color: rgb(148, 163, 184);
  border: 1px solid rgba(148, 163, 184, 0.3);
  padding: 3px 10px;
  border-radius: 9999px;
  font-size: 12px;
  font-weight: 500;
}

.badge.gold {
  background: rgba(251, 191, 36, 0.15);
  color: rgb(251, 191, 36);
  border: 1px solid rgba(251, 191, 36, 0.3);
  padding: 3px 10px;
  border-radius: 9999px;
  font-size: 12px;
  font-weight: 500;
}

/* Input styling */
input[type="text"] { 
  background: var(--input); 
  border: 1px solid var(--border); 
  border-radius: 6px; 
  padding: 8px 12px; 
  color: var(--foreground); 
  font-size: 14px; 
}
input[type="text"]:focus { 
  outline: none; 
  border-color: var(--primary); 
  box-shadow: 0 0 0 2px rgba(6, 182, 212, 0.2); 
}

/* Kbd styling */
kbd { 
  padding: 2px 6px; 
  font-size: 11px; 
  background: var(--muted); 
  border-radius: 4px; 
  border: 1px solid var(--border); 
}

/* React-style workflow action buttons - exact match */
.submission-detail .btn.w-full {
  width: 100% !important;
  height: 40px !important;
  border-radius: 6px !important;
  font-size: 14px !important;
  font-weight: 500 !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 8px !important;
  margin-bottom: 12px !important;
  transition: all 0.2s ease-in-out !important;
  cursor: pointer !important;
}

.submission-detail .btn.w-full.bg-primary {
  background: var(--primary, #06b6d4) !important;
  color: var(--primary-foreground, #0a0a0a) !important;
  border: none !important;
}

.submission-detail .btn.w-full.bg-primary:hover {
  background: var(--accent, #0e7490) !important;
}

.submission-detail .btn.w-full.btn-outline {
  background: transparent !important;
  color: var(--foreground, #ffffff) !important;
  border: 1px solid var(--border, #2d2d2d) !important;
}

.submission-detail .btn.w-full.btn-outline:hover {
  background: var(--accent, #0e7490) !important;
  border-color: var(--accent, #0e7490) !important;
}

.submission-detail .btn.w-full.text-destructive {
  background: transparent !important;
  color: var(--destructive, #ef4444) !important;
  border: 1px solid rgba(239, 68, 68, 0.5) !important;
}

.submission-detail .btn.w-full.text-destructive:hover {
  background: rgba(239, 68, 68, 0.1) !important;
  border-color: var(--destructive, #ef4444) !important;
}

.submission-detail .btn.w-full:disabled {
  background: var(--muted, #1e293b) !important;
  color: var(--muted-foreground, #94a3b8) !important;
  border: 1px solid var(--border, #2d2d2d) !important;
  cursor: not-allowed !important;
  opacity: 0.5 !important;
}

.submission-detail .btn.w-full svg {
  width: 18px !important;
  height: 18px !important;
  flex-shrink: 0 !important;
}

/* Responsive */
@media (max-width: 1280px) {
  .submission-detail .xl\:grid-cols-\[1fr_380px\] { grid-template-columns: 1fr; }
  .submission-detail .xl\:sticky { position: static; }
}

/* Global primary button to match React CTA */
.btn-primary { height:36px; border-radius:6px; background: var(--primary, #06b6d4); color:#0a0a0a; border:none; padding:0 12px; font-weight: var(--font-weight-medium); }
.btn-primary:hover { filter: brightness(1.05); }

.admin-dashboard .kpis { display:grid; gap:16px; grid-template-columns: repeat(1, minmax(0,1fr)); }
@media (min-width: 768px) { .admin-dashboard .kpis { grid-template-columns: repeat(2, minmax(0,1fr)); } }
@media (min-width: 1024px) { .admin-dashboard .kpis { grid-template-columns: repeat(3, minmax(0,1fr)); } }
.card { background:#1a1a1a; border:1px solid #2d2d2d; border-radius:12px; }
.card-h { padding:16px; border-bottom:1px solid #2d2d2d; display:flex; align-items:center; justify-content:space-between; }
.card-h .title { color: var(--foreground); font-weight: var(--font-weight-semibold); font-size: var(--text-lg); }
.card-c { padding:16px; color: var(--foreground); }
.card-c.no-pad { padding:0; }
.big { font-size: var(--text-3xl); font-weight: var(--font-weight-bold); color: var(--foreground); }
.unit { font-size: var(--text-base); color: var(--muted-foreground); }
.pairs { display:flex; gap:16px; margin-top:12px; }
.dot { display:inline-block; width:12px; height:12px; border-radius:9999px; margin-right:8px; }
.dot.y{ background:#eab308; } .dot.g{ background:#10b981; } .dot.bb{ background:#06b6d4; } .dot.crit{ background:#ef4444; } .dot.hi{ background:#f97316; } .dot.med{ background:#eab308; } .dot.lo{ background:#06b6d4; }
.bar { width:100%; height:8px; background:#2d2d2d; border-radius:9999px; overflow:hidden; margin-top:8px; }
.bar .bar-fill { height:100%; background:#10b981; }

.row.grid2 { display:grid; grid-template-columns:1fr; gap:16px; margin-top:16px; }
@media (min-width: 768px) { .row.grid2 { grid-template-columns:1fr 1fr; } }

.dist { display:grid; grid-template-columns: 200px 1fr; gap:16px; align-items:center; }
.dist .pie { width:200px; height:200px; border-radius:9999px; background: conic-gradient(#ef4444 0 12%, #f97316 12% 35%, #eab308 35% 66%, #06b6d4 66% 100%); }
.dist .legend { display:grid; grid-template-columns: 1fr 1fr; gap:12px; }
.dist .legend div { display:flex; align-items:center; justify-content:space-between; padding:8px; background:rgba(255,255,255,0.06); border-radius:8px; }
.dist .legend span { color:#fff; }

.sources .bar-row { display:grid; grid-template-columns: 1fr auto 40px 40px; gap:12px; align-items:center; padding:8px; background:rgba(255,255,255,0.06); border-radius:8px; margin-bottom:8px; }
.sources .bar { height:8px; background:#2d2d2d; border-radius:9999px; overflow:hidden; }
.sources .bar div { height:100%; background:#06b6d4; }
.sources b { color:#fff; }
.sources em { color:#94a3b8; font-style:normal; text-align:right; }

.trends .legend2 { display:flex; align-items:center; gap:12px; margin-bottom:12px; }
.trends .line { width:24px; height:3px; background:#06b6d4; border-radius:9999px; display:inline-block; }
.trends .line.gr { background:#10b981; }
.trends .spark { height:200px; background:linear-gradient(180deg, rgba(255,255,255,0.06), transparent); border-radius:8px; border:1px solid #2d2d2d; }
.trends .stats { display:grid; grid-template-columns:1fr 1fr; gap:16px; margin-top:16px; }
.trends .stat { padding:12px; border:1px solid #2d2d2d; border-radius:8px; background:rgba(255,255,255,0.06); display:flex; align-items:center; gap:8px; }

/* Inbox table and badges */
.admin-inbox .kpis { display:grid; gap:16px; grid-template-columns: repeat(1, minmax(0,1fr)); }
@media (min-width: 768px) { .admin-inbox .kpis { grid-template-columns: repeat(3, minmax(0,1fr)); } }

.admin-inbox .filters { display:grid; gap:12px; grid-template-columns: 1fr; }
@media (min-width: 768px) { .admin-inbox .filters { grid-template-columns: 1fr 180px 180px; } }
.admin-inbox .input { height:36px; border-radius:6px; background:#121212; color:#fff; border:1px solid #2d2d2d; padding:0 12px; font-size:14px; }
.table-wrap { overflow:auto; }
.table { width:100%; border-collapse: collapse; font-size:14px; }
.table thead tr { background: rgba(255,255,255,0.06); }
.table th, .table td { padding:12px 16px; border-bottom:1px solid #2d2d2d; text-align:left; vertical-align:middle; }
.table thead th { color:#fff; font-weight:500; height:56px; }
.table tbody td { height:56px; }
.table tbody tr:hover { background: rgba(255,255,255,0.06); }
.table .chk { width:16px; height:16px; accent-color: var(--primary, #06b6d4); }
.mono { font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace; }
.small { font-size: 13px; }
.tiny { font-size: 12px; }
.flex { display:flex; }
.gap-12 { gap:12px; }
.align-center { align-items:center; }
.icon svg { display:block; }

.badge { display:inline-block; padding:2px 8px; border-radius:9999px; font-size:12px; border:1px solid rgba(255,255,255,0.16); }
.badge.red { background:#ef444433; color:#fca5a5; border-color:#ef444455; }
.badge.orange { background:#f9731633; color:#fdba74; border-color:#f9731655; }
.badge.yellow { background:#eab30833; color:#fde047; border-color:#eab30855; }
.badge.blue { background:#06b6d433; color:#7dd3fc; border-color:#06b6d455; }
.badge.cyan { background:#06b6d433; color:#67e8f9; border-color:#06b6d455; }
.badge.purple { background:#8b5cf633; color:#c4b5fd; border-color:#8b5cf655; }
.badge.green { background:#10b98133; color:#86efac; border-color:#10b98155; }

.pager { display:flex; gap:12px; align-items:center; justify-content:flex-end; }

/* Buttons */
.btn { 
  height:36px; 
  padding:0 12px; 
  border-radius:6px; 
  border:1px solid transparent; 
  background: var(--primary); 
  color: var(--primary-foreground); 
  font-weight: var(--font-weight-medium);
  font-size: var(--text-sm);
  font-family: inherit;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  cursor: pointer;
  transition: all 0.2s;
}
.btn.ghost { background: var(--background); color: var(--foreground); border-color: var(--border); }
.btn:hover { filter: brightness(1.05); }

/* Download button specific styling */
.reports-table-cell .btn {
  padding: 6px 12px;
  height: auto;
}

/* Detail view */
.admin-detail .grid2 { display:grid; grid-template-columns:1fr 1fr; gap:16px; }
.detail-grid { display:grid; grid-template-columns:1fr; gap:24px; align-items:start; }
@media (min-width: 1200px) { .detail-grid { grid-template-columns:1fr 380px; } }
.detail-aside { position: sticky; top:24px; height: -moz-fit-content; height: fit-content; }
.tabs { display:flex; flex-direction:column; }
.tabs .tab-list { display:grid; grid-template-columns: repeat(3, minmax(0,1fr)); gap:8px; margin-bottom:16px; }
.tabs .tab { background:#121212; color:#fff; border:1px solid #2d2d2d; padding:8px 10px; border-radius:8px; text-align:center; cursor:pointer; }
.tabs .tab.active { border-color:#06b6d4; background:#0f0f0f; }
.dialog-backdrop { position:fixed; inset:0; background:rgba(0,0,0,0.5); display:flex; align-items:center; justify-content:center; }
.dialog { width:520px; max-width:calc(100% - 32px); background:#1a1a1a; border:1px solid #2d2d2d; border-radius:12px; padding:16px; }
.dialog .header { margin-bottom:8px; }
.dialog .footer { margin-top:12px; display:flex; gap:8px; justify-content:flex-end; }

.codeblock { background:#0f1729; padding:16px; border-radius:8px; border:1px solid #1e293b; color:#dbeafe; font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace; font-size:14px; white-space:pre-wrap; }

.list-timeline { position:relative; list-style:none; padding-left:0; }
.list-timeline::before { content:""; position:absolute; left:20px; top:12px; bottom:12px; width:2px; background:#2d2d2d; }
.list-timeline li { position:relative; display:flex; gap:12px; margin-bottom:16px; }
.list-timeline .dot { position:relative; width:40px; height:40px; border-radius:9999px; background:rgba(6,182,212,0.1); border:2px solid #121212; display:flex; align-items:center; justify-content:center; flex-shrink:0; z-index:1; }

.link { color: var(--primary, #06b6d4); text-decoration:none; }
.link:hover { text-decoration:underline; }

.input { 
  height:36px; 
  border-radius:6px; 
  background: var(--input-background); 
  color: var(--foreground); 
  border:1px solid var(--border); 
  padding:0 12px; 
  font-size: var(--text-sm);
  font-weight: var(--font-weight-normal);
  font-family: inherit;
  width:100%; 
}
.input[type="textarea"], textarea.input { padding:8px 12px; min-height:100px; }
.hidden { display:none!important; }

/* Evidence list */
.file-list { display:flex; flex-direction:column; gap:8px; }
.file-item { display:flex; align-items:center; justify-content:space-between; padding:12px; background:rgba(255,255,255,0.04); border:1px solid #2d2d2d; border-radius:10px; }
.file-item .meta { display:flex; align-items:center; gap:10px; }
.file-item .name { color:#fff; font-size:14px; }
.file-item .sub { color:#94a3b8; font-size:12px; }
.file-item .view { border:1px solid #2d2d2d; background:#121212; color:#fff; border-radius:6px; padding:6px 10px; }

.chip { display:inline-flex; align-items:center; gap:6px; border:1px solid #2d2d2d; background:#121212; color:#fff; border-radius:9999px; padding:4px 8px; font-size:12px; }
.chip.gold { border-color:#eab30855; color:#fde047; background:#eab3081a; }

/* Payouts */
.payouts .kpi-grid { display:grid; grid-template-columns: 1fr; gap:16px; }
@media (min-width: 768px) { .payouts .kpi-grid { grid-template-columns: 1fr 1fr; } }
.kpi { display:flex; align-items:center; gap:12px; }
.kpi .icon { width:40px; height:40px; border-radius:10px; display:grid; place-items:center; }
.kpi .icon.green { background: rgba(16, 185, 129, 0.15); color: #10b981; }
.kpi .icon.yellow { background: rgba(234, 179, 8, 0.15); color: #eab308; }
.kpi .icon.blue { background: rgba(6, 182, 212, 0.15); color: #06b6d4; }
.kpi .icon.red { background: rgba(239, 68, 68, 0.15); color: #ef4444; }
.kpi .icon.primary { background: var(--primary-light); color: var(--primary); }

.toolbar { display:grid; gap:12px; grid-template-columns: 1fr; }
@media (min-width: 768px) { .toolbar { grid-template-columns: 1fr 180px 180px; } }
/* Pentest */
.pentest .kpi-grid { display:grid; grid-template-columns: 1fr; gap:16px; }
@media (min-width: 768px) { .pentest .kpi-grid { grid-template-columns: repeat(3, minmax(0,1fr)); } }

/* DAST Scans - 3 columns on md+ (matches React: grid gap-4 md:grid-cols-3) */
.dast-scans .kpi-grid { display:grid; grid-template-columns: 1fr; gap:16px; }
@media (min-width: 768px) { .dast-scans .kpi-grid { grid-template-columns: repeat(3, minmax(0,1fr)); } }

/* Reports - 2 columns on md+ (matches React: grid gap-4 md:grid-cols-2) */
.reports .kpi-grid { display:grid; grid-template-columns: 1fr; gap:16px; }
@media (min-width: 768px) { .reports .kpi-grid { grid-template-columns: repeat(2, minmax(0,1fr)); } }

/* Users - 2 columns on md+ (matches React: grid gap-4 md:grid-cols-2) */
.users .kpi-grid { display:grid; grid-template-columns: 1fr; gap:16px; }
@media (min-width: 768px) { .users .kpi-grid { grid-template-columns: repeat(2, minmax(0,1fr)); } }

/* Global Tailwind-style Grid Classes */
.grid { display: grid; }
.grid-cols-1 { grid-template-columns: repeat(1, minmax(0, 1fr)); }
.grid-cols-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.grid-cols-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.gap-4 { gap: 1rem; }
.gap-6 { gap: 1.5rem; }
.flex-shrink-0 { flex-shrink: 0; }

/* Responsive grid columns */
@media (min-width: 768px) {
  .md\:grid-cols-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .md\:grid-cols-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

/* Flexbox utilities */
.flex { display: flex; }
.items-center { align-items: center; }
.justify-between { justify-content: space-between; }
.mb-4 { margin-bottom: 1rem; }
.mt-1 { margin-top: 0.25rem; }
.text-sm { font-size: 0.875rem; }
.text-xs { font-size: 0.75rem; }
.text-2xl { font-size: 1.5rem; }
.text-foreground { color: var(--foreground); }
.text-muted-foreground { color: var(--muted-foreground); }
.p-6 { padding: 1.5rem; }
.p-3 { padding: 0.75rem; }
.rounded-lg { border-radius: 0.5rem; }
.bg-card { background-color: var(--card); }
.bg-green-500\/10 { background-color: rgba(34, 197, 94, 0.1); }
.bg-yellow-500\/10 { background-color: rgba(234, 179, 8, 0.1); }
.border-border { border-color: var(--border); }
.border { border-width: 1px; border-style: solid; }

/* Edit Amount Button - matches React version */
.edit-amount-btn {
  height: 24px;
  width: 24px;
  padding: 0;
  background: transparent;
  border: none;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 4px;
  color: #9ca3af; /* muted-foreground color */
  transition: all 0.2s ease;
}

.edit-amount-btn:hover {
  background-color: rgba(156, 163, 175, 0.1); /* subtle hover background */
  color: #06b6d4; /* primary color on hover */
}

.edit-amount-btn svg {
  stroke: currentColor;
}

/* Action Buttons - matches React version exactly */
.action-btn {
  height: 32px; /* h-8 */
  padding: 0 12px; /* px-3 */
  border-radius: 6px; /* rounded-md */
  font-size: 14px; /* text-sm */
  font-weight: 500; /* font-medium */
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px; /* gap-1.5 */
  cursor: pointer;
  text-decoration: none;
  transition: all 0.2s ease;
  border: 1px solid;
  background: transparent;
  white-space: nowrap;
  outline: none;
}

.action-btn svg {
  stroke: currentColor;
  flex-shrink: 0;
  pointer-events: none;
}

/* View Button - outline variant */
.view-btn {
  border-color: var(--border);
  color: var(--foreground);
  background: var(--background);
}

.view-btn:hover {
  background-color: var(--accent);
  color: var(--accent-foreground);
}

/* Mark Paid Button - green solid style */
.mark-paid-btn {
  border: none;
  color: #0a0a0a; /* dark text */
  background-color: #16a34a; /* bg-green-600 */
}

.mark-paid-btn:hover {
  background-color: #15803d; /* hover:bg-green-700 */
  color: #0a0a0a; /* keep dark text on hover */
}

/* Dialog Styling - matches React Dialog component exactly */
.dialog-overlay {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 50;
  background-color: rgba(0, 0, 0, 0.5); /* bg-black/50 */
}

.dialog-content {
  position: fixed;
  top: 50%;
  left: 50%;
  z-index: 50;
  display: grid;
  width: 100%;
  max-width: calc(100% - 2rem); /* max-w-[calc(100%-2rem)] */
  gap: 1rem; /* gap-4 */
  border-radius: 8px; /* rounded-lg */
  border: 1px solid var(--border);
  background-color: var(--background);
  padding: 1.5rem; /* p-6 */
  box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.25); /* shadow-lg */
  transform: translateX(-50%) translateY(-50%);
  transition: all 200ms ease; /* duration-200 */
}

@media (min-width: 640px) {
  .dialog-content {
    max-width: 512px; /* sm:max-w-lg */
  }
}

.dialog-close {
  position: absolute;
  top: 1rem; /* top-4 */
  right: 1rem; /* right-4 */
  border-radius: 2px; /* rounded-xs */
  opacity: 0.7;
  transition: opacity 0.2s ease;
  background: transparent;
  border: none;
  cursor: pointer;
  padding: 4px;
  color: var(--muted-foreground);
}

.dialog-close:hover {
  opacity: 1;
}

.dialog-close svg {
  pointer-events: none;
  flex-shrink: 0;
  width: 16px;
  height: 16px;
}

.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

.dialog-header {
  display: flex;
  flex-direction: column;
  gap: 8px; /* gap-2 */
  text-align: center;
}

@media (min-width: 640px) {
  .dialog-header {
    text-align: left; /* sm:text-left */
  }
}

.dialog-title {
  font-size: 18px; /* text-lg */
  line-height: 1; /* leading-none */
  font-weight: 600; /* font-semibold */
  color: var(--foreground);
  margin: 0;
}

.dialog-description {
  color: var(--muted-foreground);
  font-size: 14px; /* text-sm */
  margin: 0;
}

.dialog-footer {
  display: flex;
  flex-direction: column-reverse;
  gap: 8px; /* gap-2 */
}

@media (min-width: 640px) {
  .dialog-footer {
    flex-direction: row; /* sm:flex-row */
    justify-content: flex-end; /* sm:justify-end */
  }
}

.modal-header {
  display: flex;
  flex-direction: column;
  gap: 8px; /* gap-2 */
  text-align: left;
  position: relative;
}

.modal-header h3 {
  font-size: 18px; /* text-lg */
  font-weight: 600; /* font-semibold */
  color: var(--foreground);
  margin: 0;
  line-height: 1.4;
}

.modal-header p {
  font-size: 14px; /* text-sm */
  color: var(--muted-foreground);
  margin: 0;
}

.modal-close {
  position: absolute;
  top: 0;
  right: 0;
  background: transparent;
  border: none;
  color: var(--muted-foreground);
  cursor: pointer;
  padding: 4px;
  border-radius: 4px;
  opacity: 0.7;
  transition: opacity 0.2s ease;
  height: 24px;
  width: 24px;
}

.modal-close:hover {
  opacity: 1;
}

.modal-close svg {
  pointer-events: none;
  flex-shrink: 0;
}

.modal-body {
  margin: 0;
  padding: 16px 0; /* py-4 */
}

.space-y-4 > * + * {
  margin-top: 16px;
}

.space-y-2 > * + * {
  margin-top: 8px;
}

.modal-label {
  font-size: 14px; /* text-sm */
  font-weight: 500; /* font-medium */
  color: var(--foreground);
  display: block;
  margin-bottom: 8px;
}

.modal-input {
  width: 100%;
  height: 36px; /* h-9 */
  padding: 0 12px; /* px-3 */
  background-color: var(--input-background);
  border: 1px solid var(--border);
  border-radius: 6px; /* rounded-md */
  color: var(--foreground);
  font-size: 14px; /* text-sm */
  transition: border-color 0.2s ease;
  outline: none;
}

.modal-input:focus {
  border-color: var(--primary);
  box-shadow: 0 0 0 2px rgba(6, 182, 212, 0.2);
}

.modal-input::placeholder {
  color: var(--muted-foreground);
}

.modal-footer {
  display: flex;
  justify-content: flex-end;
  gap: 12px;
}

.modal-btn {
  height: 36px;
  padding: 0 16px;
  border-radius: 6px;
  font-size: 14px;
  font-weight: 500;
  cursor: pointer;
  transition: all 0.2s ease;
  border: 1px solid;
}

.modal-btn-outline {
  background: transparent;
  border-color: var(--border);
  color: var(--foreground);
}

.modal-btn-outline:hover {
  background-color: var(--accent);
  color: var(--accent-foreground);
}

.modal-btn-primary {
  background-color: #16a34a; /* bg-green-600 */
  border-color: #16a34a;
  color: #0a0a0a; /* dark text */
}

.modal-btn-primary:hover {
  background-color: #15803d; /* hover:bg-green-700 */
  border-color: #15803d;
}

/* Submission Detail */
.submission-detail .card { margin-bottom: 24px; }
.submission-detail .card:last-child { margin-bottom: 0; }
.submission-detail pre { margin: 0; }
.submission-detail .btn.active { background: var(--primary); color: white; }
.submission-detail .btn.active:hover { background: var(--primary-hover); }

/* Pentest Detail */
.pentest-detail .card {
    margin-bottom: 24px;
    margin-top: 24px;
}
.pentest-detail .card:last-child { margin-bottom: 0; }

/* Finding Detail */
.finding-detail .card { margin-bottom: 24px; }
.finding-detail .card:last-child { margin-bottom: 0; }
.finding-detail pre { margin: 0; }

/* Modal Styles */
.modal {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0.8);
  display: none; /* Hidden by default */
  align-items: center;
  justify-content: center;
  z-index: 1000;
}

.modal-content {
  background: #121212;
  border: 1px solid #2d2d2d;
  border-radius: 12px;
  max-width: 600px;
  width: 90%;
  max-height: 90vh;
  overflow-y: auto;
}

.modal-header {
  padding: 24px 24px 16px;
  border-bottom: 1px solid #2d2d2d;
  display: flex;
  flex-direction: column;
  gap: 8px;
  position: relative;
}

.modal-header .btn {
  position: absolute;
  top: 16px;
  right: 16px;
  padding: 8px;
}

.modal-body {
  padding: 24px;
}

.modal-footer {
  padding: 16px 24px 24px;
  border-top: 1px solid #2d2d2d;
  display: flex;
  gap: 12px;
  justify-content: flex-end;
}

.progress-grid { display:grid; grid-template-columns: 1fr; gap:16px; }
@media (min-width: 640px) { .progress-grid { grid-template-columns: repeat(3, minmax(0,1fr)); } }

.engagement-grid { display:grid; grid-template-columns: 1fr; gap:24px; }
@media (min-width: 1024px) { .engagement-grid { grid-template-columns: repeat(2, minmax(0,1fr)); } }

.findings-grid { display:grid; grid-template-columns: 1fr; gap:16px; }
@media (min-width: 640px) { .findings-grid { grid-template-columns: repeat(2, minmax(0,1fr)); } }
@media (min-width: 768px) { .findings-grid { grid-template-columns: repeat(4, minmax(0,1fr)); } }

.finding-detail-grid { display:grid; grid-template-columns: 1fr; gap:24px; }
@media (min-width: 1024px) { .finding-detail-grid { grid-template-columns: 2fr 1fr; } }

.metadata-grid { display:grid; grid-template-columns: 1fr; gap:16px; }
@media (min-width: 640px) { .metadata-grid { grid-template-columns: repeat(2, minmax(0,1fr)); } }
@media (min-width: 768px) { .metadata-grid { grid-template-columns: repeat(4, minmax(0,1fr)); } }

/* Findings Summary - Exact React Styling */
.findings-summary-grid { 
  display: grid; 
  grid-template-columns: repeat(4, 1fr); 
  gap: 16px; 
  margin-bottom: 0;
}

.severity-card {
  padding: 16px;
  border-radius: 8px;
  text-align: left;
}

.severity-card.critical {
  background: rgba(239, 68, 68, 0.1);
  border: 1px solid rgba(239, 68, 68, 0.2);
}

.severity-card.high {
  background: rgba(251, 146, 60, 0.1);
  border: 1px solid rgba(251, 146, 60, 0.2);
}

.severity-card.medium {
  background: rgba(250, 204, 21, 0.1);
  border: 1px solid rgba(250, 204, 21, 0.2);
}

.severity-card.low {
  background: rgba(34, 211, 238, 0.1);
  border: 1px solid rgba(34, 211, 238, 0.2);
}

.severity-label {
  font-size: 12px;
  line-height: 16px;
  margin: 0 0 4px 0;
  font-weight: 400;
}

.severity-card.critical .severity-label { color: #f87171; }
.severity-card.high .severity-label { color: #fb923c; }
.severity-card.medium .severity-label { color: #facc15; }
.severity-card.low .severity-label { color: #22d3ee; }

.severity-count {
  font-size: 30px;
  line-height: 36px;
  font-weight: 700;
  margin: 0;
}

.severity-card.critical .severity-count { color: #ef4444; }
.severity-card.high .severity-count { color: #fb923c; }
.severity-card.medium .severity-count { color: #facc15; }
.severity-card.low .severity-count { color: #22d3ee; }

.findings-separator {
  height: 1px;
  background: #2d2d2d;
  margin: 24px 0;
}

.recent-findings-title {
  color: #ffffff;
  font-size: 14px;
  font-weight: 600;
  line-height: 20px;
  margin: 0 0 12px 0;
}

.recent-findings-list {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.recent-finding-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 12px;
  border-radius: 8px;
  border: 1px solid #2d2d2d;
  cursor: pointer;
  transition: background-color 0.15s ease;
}

.recent-finding-item:hover {
  background: rgba(45, 45, 45, 0.3);
}

.finding-info {
  display: flex;
  align-items: center;
  gap: 12px;
}

.finding-details {
  display: flex;
  flex-direction: column;
}

.finding-title {
  color: #ffffff;
  font-size: 14px;
  line-height: 20px;
  margin: 0;
  font-weight: 400;
}

.finding-id {
  color: #94a3b8;
  font-size: 12px;
  line-height: 16px;
  margin: 0;
  font-family: ui-monospace, SFMono-Regular, "SF Mono", Consolas, "Liberation Mono", Menlo, monospace;
}

.finding-status {
  background: rgba(45, 45, 45, 0.3);
  color: #ffffff;
  font-size: 12px;
  line-height: 16px;
  padding: 2px 8px;
  border-radius: 4px;
  border: 1px solid #2d2d2d;
  font-weight: 400;
}

/* DAST Scans */
.integration-grid { 
  display: grid; 
  grid-template-columns: 1fr; 
  gap: 16px; 
  margin-bottom: 24px;
}
@media (min-width: 768px) { .integration-grid { grid-template-columns: repeat(3, minmax(0,1fr)); } }

.integration-warning {
  padding: 12px;
  border-radius: 8px;
  background: rgba(250, 204, 21, 0.1);
  border: 1px solid rgba(250, 204, 21, 0.2);
}

/* Modal/Dialog Styles */
.modal {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0.5);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 1000;
}

.modal-content {
  background: #1a1a1a;
  border: 1px solid #2d2d2d;
  border-radius: 8px;
  width: 90%;
  max-width: 500px;
  max-height: 90vh;
  overflow-y: auto;
}

.modal-header {
  padding: 20px 20px 16px 20px;
  border-bottom: 1px solid #2d2d2d;
  position: relative;
}

.modal-close {
  position: absolute;
  top: 16px;
  right: 16px;
  background: none;
  border: none;
  color: #94a3b8;
  font-size: 24px;
  cursor: pointer;
  width: 32px;
  height: 32px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 4px;
}

.modal-close:hover {
  background: #2d2d2d;
  color: #ffffff;
}

.modal-body {
  padding: 20px;
}

.modal-footer {
  padding: 16px 20px 20px 20px;
  border-top: 1px solid #2d2d2d;
  display: flex;
  gap: 12px;
  justify-content: flex-end;
}
.toolbar .search { position:relative; }
.toolbar .search input { padding-left:34px; }
.toolbar .search .ico { position:absolute; left:10px; top:50%; transform: translateY(-50%); color:#94a3b8; }

/* Force calendar icon to be white in all modals - ULTRA SPECIFIC */
.modal input[type="date"]::-webkit-calendar-picker-indicator,
.modal-content input[type="date"]::-webkit-calendar-picker-indicator,
#markPaidModal input[type="date"]::-webkit-calendar-picker-indicator,
#editAmountModal input[type="date"]::-webkit-calendar-picker-indicator,
.modal .input[type="date"]::-webkit-calendar-picker-indicator,
.modal-content .input[type="date"]::-webkit-calendar-picker-indicator {
  filter: invert(1) brightness(1) !important;
  cursor: pointer !important;
  opacity: 1 !important;
  background: transparent !important;
  color: white !important;
  -webkit-filter: invert(1) brightness(1) !important;
}

.modal input[type="date"]::-webkit-calendar-picker-indicator:hover,
.modal-content input[type="date"]::-webkit-calendar-picker-indicator:hover,
#markPaidModal input[type="date"]::-webkit-calendar-picker-indicator:hover,
#editAmountModal input[type="date"]::-webkit-calendar-picker-indicator:hover,
.modal .input[type="date"]::-webkit-calendar-picker-indicator:hover,
.modal-content .input[type="date"]::-webkit-calendar-picker-indicator:hover {
  opacity: 1 !important;
  filter: invert(1) brightness(1) !important;
  -webkit-filter: invert(1) brightness(1) !important;
}

/* Alternative approach - target the input directly */
#markPaidModal input[type="date"] {
  color-scheme: dark !important;
}

#markPaidModal input[type="date"]::-webkit-calendar-picker-indicator {
  filter: invert(1) !important;
  -webkit-filter: invert(1) !important;
  cursor: pointer !important;
  opacity: 1 !important;
  background: none !important;
  color: white !important;
  width: 16px !important;
  height: 16px !important;
}

@media (max-width: 768px) {
  .admin-layout { grid-template-columns: 1fr; }
  .admin-sidebar { display:none; }
}

/* Responsive adjustments for smaller screens */
@media (max-width: 1024px) {
  .admin-main { padding: 16px; }
  .admin-topbar { padding: 0 12px; }
  .admin-topbar-right { gap: 6px; }
}

@media (max-width: 900px) {
  .admin-main { padding: 12px; }
  .admin-topbar { padding: 0 8px; }
  .admin-topbar-right { gap: 4px; }
  .admin-topbar .btn { padding: 0 8px; font-size: 12px; }
  .admin-topbar .btn.icon { width: 36px; height: 36px; }
  
  /* Search and filter responsive adjustments */
  .search-filters { flex-wrap: wrap; gap: 8px; }
  .search-box { min-width: 150px; }
  .custom-dropdown { min-width: 120px; }
  .custom-dropdown-trigger { padding: 6px 10px; font-size: 13px; }
}

@media (max-width: 768px) {
  .admin-main { padding: 8px; }
  .admin-topbar { padding: 0 8px; }
  .admin-topbar-right { gap: 4px; }
  .admin-topbar .btn { padding: 0 6px; font-size: 11px; }
  .admin-topbar .btn.icon { width: 32px; height: 32px; }
}

/* ===== INTEGRATIONS MODULE ===== */
.admin-integrations {
  /* Page Header */
  .space-y-6 > div:first-child {
    margin-bottom: 24px;
  }

  .space-y-6 > div:first-child h2 {
    font-size: var(--text-2xl);
    font-weight: var(--font-weight-semibold);
    color: var(--foreground);
    margin-bottom: 8px;
  }

  .space-y-6 > div:first-child p {
    color: var(--muted-foreground);
    font-size: var(--text-sm);
  }
}

/* Integrations Card Header */
.integrations-card-header {
  padding: 24px;
  border-bottom: 1px solid var(--border);
}

.integrations-card-content {
  padding: 24px;
}

.integrations-icon-wrapper {
  padding: 8px;
  background: rgba(59, 130, 246, 0.1);
  border-radius: 8px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.integrations-card-content .space-y-4 > div {
  margin-bottom: 16px;
}

.integrations-card-content .space-y-4 > div:last-child {
  margin-bottom: 0;
}

.integrations-label {
  display: block;
  font-size: var(--text-sm);
  font-weight: var(--font-weight-medium);
  color: var(--foreground);
  margin-bottom: 8px;
}

.integrations-help-text {
  font-size: var(--text-xs);
  color: var(--muted-foreground);
  margin-top: 4px;
}

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

.integrations-actions {
  display: flex;
  align-items: center;
  gap: 12px;
  padding-top: 16px;
  border-top: 1px solid var(--border);
  margin-top: 24px;
}

.integrations-teams-section {
  padding-top: 24px;
  border-top: 1px solid var(--border);
}

.integrations-save-section {
  padding-top: 24px;
  border-top: 1px solid var(--border);
}

.integrations-info-card {
  background: rgba(59, 130, 246, 0.05);
  border: 1px solid rgba(59, 130, 246, 0.2);
  border-radius: 8px;
}

.integrations-info-content {
  padding: 24px;
}

.integrations-info-content h4 {
  font-size: var(--text-base);
  font-weight: var(--font-weight-medium);
  color: var(--foreground);
  margin-bottom: 8px;
}

.integrations-info-content p {
  color: var(--muted-foreground);
  font-size: var(--text-sm);
  line-height: 1.6;
}

/* ===== SETTINGS MODULE ===== */
.admin-settings {
  /* Page Header */
  .space-y-8 > div:first-child {
    margin-bottom: 32px;
  }

  .space-y-8 > div:first-child h1 {
    font-size: var(--text-3xl);
    font-weight: var(--font-weight-semibold);
    color: var(--foreground);
    margin-bottom: 8px;
  }

  .space-y-8 > div:first-child p {
    color: var(--muted-foreground);
    font-size: var(--text-sm);
  }
}

/* Settings Card Header */
.settings-card-header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
}

.settings-card-header h4 {
  font-size: var(--text-lg);
  font-weight: var(--font-weight-semibold);
  color: var(--foreground);
  display: flex;
  align-items: center;
  gap: 8px;
}

.settings-card-header p {
  color: var(--muted-foreground);
  font-size: var(--text-sm);
  margin-top: 8px;
}

/* Settings Table */
.settings-table-container {
  border: 1px solid var(--border);
  border-radius: 8px;
  overflow: hidden;
}

.settings-table {
  width: 100%;
  border-collapse: collapse;
}

.settings-table-header {
  background: rgba(148, 163, 184, 0.25);
}

.settings-table-row-header {
  border-bottom: 1px solid var(--border);
}

.settings-table-head {
  padding: 12px 16px;
  text-align: left;
  font-size: var(--text-sm);
  font-weight: var(--font-weight-medium);
  color: var(--foreground);
  min-width: 250px;
}

.settings-table-head.text-center {
  text-align: center;
}

.settings-table-body {
  background: var(--card);
}

.settings-table-row {
  border-bottom: 1px solid var(--border);
  transition: background-color 0.2s;
}

.settings-table-row:last-child {
  border-bottom: none;
}

.settings-table-row:hover {
  background: rgba(148, 163, 184, 0.05);
}

.settings-table-cell {
  padding: 12px 16px;
  font-size: var(--text-sm);
  color: var(--foreground);
}

.settings-table-cell.text-center {
  text-align: center;
}

/* Settings Switch */
.settings-switch {
  position: relative;
  display: inline-block;
  width: 44px;
  height: 24px;
}

.settings-switch input {
  opacity: 0;
  width: 0;
  height: 0;
}

.settings-switch-slider {
  position: absolute;
  cursor: pointer;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: var(--muted);
  transition: 0.4s;
  border-radius: 24px;
}

.settings-switch-slider:before {
  position: absolute;
  content: "";
  height: 18px;
  width: 18px;
  left: 3px;
  bottom: 3px;
  background-color: white;
  transition: 0.4s;
  border-radius: 50%;
}

.settings-switch input:checked + .settings-switch-slider {
  background-color: var(--primary);
}

.settings-switch input:checked + .settings-switch-slider:before {
  transform: translateX(20px);
}

/* Settings Separator */
.settings-separator {
  height: 1px;
  background: var(--border);
  margin: 24px 0;
}

/* Settings Toggle Items */
.settings-toggle-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 16px;
  background: rgba(148, 163, 184, 0.1);
  border-radius: 8px;
  border: 1px solid var(--border);
}

.settings-toggle-item-danger {
  background: rgba(239, 68, 68, 0.1);
  border-color: rgba(239, 68, 68, 0.3);
}

.settings-toggle-item p:first-child {
  font-size: var(--text-sm);
  font-weight: var(--font-weight-medium);
  color: var(--foreground);
  margin-bottom: 4px;
}

.settings-toggle-item p:last-child {
  font-size: var(--text-xs);
  color: var(--muted-foreground);
}

/* Settings Badges */
.settings-badge-primary {
  background: rgba(59, 130, 246, 0.1);
  color: var(--primary);
  border: 1px solid rgba(59, 130, 246, 0.2);
  padding: 4px 8px;
  border-radius: 4px;
  font-size: var(--text-xs);
  font-weight: var(--font-weight-medium);
  display: inline-flex;
  align-items: center;
  gap: 4px;
}

.settings-badge-danger {
  background: var(--destructive);
  color: white;
  padding: 4px 8px;
  border-radius: 4px;
  font-size: var(--text-xs);
  font-weight: var(--font-weight-medium);
}

.settings-badge-success {
  background: rgba(34, 197, 94, 0.1);
  color: #22c55e;
  border: 1px solid rgba(34, 197, 94, 0.2);
  padding: 4px 8px;
  border-radius: 4px;
  font-size: var(--text-xs);
  font-weight: var(--font-weight-medium);
  display: inline-flex;
  align-items: center;
  gap: 4px;
}

.settings-badge-warning {
  background: rgba(245, 158, 11, 0.1);
  color: #f59e0b;
  border: 1px solid rgba(245, 158, 11, 0.2);
  padding: 4px 8px;
  border-radius: 4px;
  font-size: var(--text-xs);
  font-weight: var(--font-weight-medium);
}

.settings-badge-muted {
  background: rgba(148, 163, 184, 0.1);
  color: var(--muted-foreground);
  border: 1px solid var(--border);
  padding: 4px 8px;
  border-radius: 4px;
  font-size: var(--text-xs);
  font-weight: var(--font-weight-medium);
  display: inline-flex;
  align-items: center;
  gap: 4px;
}

/* Settings Severity Configuration */
.settings-severity-item {
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 16px;
  background: rgba(148, 163, 184, 0.1);
  border-radius: 8px;
  border: 1px solid var(--border);
}

.settings-label-small {
  display: block;
  font-size: var(--text-xs);
  color: var(--muted-foreground);
  margin-bottom: 4px;
}

.settings-color-section {
  width: 128px;
}

.settings-color-picker {
  width: 40px;
  height: 36px;
  border-radius: 4px;
  border: 1px solid var(--border);
  cursor: pointer;
  background: none;
}

.settings-color-preview {
  width: 96px;
  height: 36px;
  border-radius: 4px;
  border: 1px solid var(--border);
  display: flex;
  align-items: center;
  justify-content: center;
}

.settings-color-text {
  font-size: var(--text-xs);
  font-weight: var(--font-weight-semibold);
}

/* Settings Textarea */
.settings-textarea {
  font-family: 'Courier New', monospace;
  font-size: var(--text-sm);
  min-height: 120px;
  resize: vertical;
}

/* Settings Integrations Grid */
.settings-integrations-grid {
  display: grid;
  gap: 12px;
  margin-top: 16px;
}

.settings-integration-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 12px;
  background: rgba(148, 163, 184, 0.1);
  border-radius: 8px;
  border: 1px solid var(--border);
}

.settings-integration-item p:first-child {
  font-size: var(--text-sm);
  font-weight: var(--font-weight-medium);
  color: var(--foreground);
}

.settings-integration-item p:last-child {
  font-size: var(--text-xs);
  color: var(--muted-foreground);
  margin-top: 2px;
}

/* Settings Actions */
.admin-settings .flex.justify-end {
  margin-top: 32px;
  padding-top: 24px;
  border-top: 1px solid var(--border);
}

/* ===== DASHBOARD MODULE ===== */
.admin-dashboard {
  /* Page container */
  .space-y-6 > * + * {
    margin-top: 24px;
  }
}

/* Dashboard Header */
.dashboard-header {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

@media (min-width: 640px) {
  .dashboard-header {
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
  }
}

.dashboard-header h1 {
  font-size: var(--text-3xl);
  font-weight: var(--font-weight-semibold);
  color: var(--foreground);
}

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

.dashboard-select {
  width: 160px;
  padding: 8px 12px;
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: 6px;
  color: var(--foreground);
  font-size: var(--text-sm);
  cursor: pointer;
}

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

/* Dashboard KPI Grid */
.dashboard-kpi-grid {
  display: grid;
  gap: 16px;
  grid-template-columns: 1fr;
}

@media (min-width: 768px) {
  .dashboard-kpi-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (min-width: 1024px) {
  .dashboard-kpi-grid {
    grid-template-columns: repeat(3, 1fr);
  }
}

/* Dashboard KPI Header */
.dashboard-kpi-header {
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: space-between;
  padding: 16px 24px 8px 24px;
}

.dashboard-kpi-title {
  font-size: var(--text-sm);
  font-weight: var(--font-weight-medium);
  color: var(--foreground);
}

/* Dashboard KPI Value */
.dashboard-kpi-value {
  font-size: var(--text-3xl);
  font-weight: var(--font-weight-semibold);
  color: var(--foreground);
}

.dashboard-kpi-unit {
  font-size: var(--text-xl);
  color: var(--muted-foreground);
}

.dashboard-kpi-breakdown {
  display: flex;
  align-items: center;
  gap: 16px;
  margin-top: 12px;
}

.dashboard-kpi-item {
  display: flex;
  align-items: center;
  gap: 8px;
}

.dashboard-kpi-subtitle {
  font-size: var(--text-xs);
  color: var(--muted-foreground);
  margin-top: 8px;
}

/* MTTR Progress */
.dashboard-mttr-progress {
  margin-top: 12px;
}

.dashboard-mttr-label {
  display: flex;
  align-items: center;
  justify-content: space-between;
  font-size: var(--text-sm);
  margin-bottom: 4px;
}

.dashboard-progress-bar {
  width: 100%;
  height: 8px;
  background: var(--muted);
  border-radius: 9999px;
  overflow: hidden;
}

.dashboard-progress-fill {
  height: 100%;
  background: #22c55e;
  border-radius: 9999px;
  transition: width 0.3s ease;
}

/* Quick Actions */
.dashboard-quick-actions {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.dashboard-action-btn {
  width: 100%;
  justify-content: flex-start;
}

/* Dashboard Charts Grid */
.dashboard-charts-grid {
  display: grid;
  gap: 16px;
  grid-template-columns: 1fr;
}

@media (min-width: 768px) {
  .dashboard-charts-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

/* Dashboard Chart Placeholder */
.dashboard-chart-placeholder {
  width: 100%;
  height: 300px;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 16px;
  padding: 15px;
  overflow: visible;
  box-sizing: border-box;
}

/* Allow chart hover effects to extend beyond card boundaries */
.dashboard-card:has(.dashboard-chart-placeholder) {
  overflow: visible;
}

.dashboard-card:has(.dashboard-chart-placeholder) .dashboard-card-content {
  overflow: visible;
}

.dashboard-pie-chart,
.dashboard-bar-chart,
.dashboard-line-chart {
  width: 100%;
  height: 100%;
}

.dashboard-line-chart-container {
  height: 350px;
}

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

.dashboard-severity-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 8px;
  background: rgba(148, 163, 184, 0.1);
  border-radius: 6px;
}

/* Source List */
.dashboard-source-list {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.dashboard-source-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 8px;
  background: rgba(148, 163, 184, 0.1);
  border-radius: 6px;
}

.dashboard-source-percentage {
  font-size: var(--text-xs);
  color: var(--muted-foreground);
  width: 48px;
  text-align: right;
}

/* Trend Analysis */
.dashboard-trend-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.dashboard-trend-stats {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 16px;
  margin-top: 16px;
}

.dashboard-trend-stat {
  padding: 12px;
  background: rgba(148, 163, 184, 0.1);
  border: 1px solid var(--border);
  border-radius: 6px;
}

.dashboard-trend-value {
  font-size: var(--text-2xl);
  font-weight: var(--font-weight-semibold);
  color: var(--foreground);
}

/* ===== DATA TABLE COMPONENT ===== */
.data-table-container {
  width: 100%;
}

.data-table-container .card {
  margin: 0;
}

/* Data Table Toolbar */
.data-table-toolbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  flex-wrap: wrap;
}

.data-table-search {
  flex: 1;
  min-width: 200px;
}

.data-table-search .search {
  position: relative;
  max-width: 300px;
}

.data-table-search .search .ico {
  position: absolute;
  left: 12px;
  top: 50%;
  transform: translateY(-50%);
  color: var(--muted-foreground);
  display: flex;
  align-items: center;
  justify-content: center;
}

.data-table-search .search input {
  padding-left: 40px;
}

.data-table-toolbar-right {
  display: flex;
  align-items: center;
  gap: 16px;
}

.data-table-entries {
  display: flex;
  align-items: center;
  gap: 8px;
}

.data-table-label {
  font-size: var(--text-sm);
  color: var(--foreground);
  white-space: nowrap;
}

.data-table-select {
  padding: 6px 8px;
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: 4px;
  color: var(--foreground);
  font-size: var(--text-sm);
  min-width: 60px;
}

.data-table-info {
  font-size: var(--text-sm);
  color: var(--muted-foreground);
  white-space: nowrap;
}

/* Toggle Switch */
.toggle-switch {
  position: relative;
  display: inline-block;
  width: 44px;
  height: 24px;
  cursor: pointer;
}

.toggle-switch input {
  opacity: 0;
  width: 0;
  height: 0;
}

.toggle-slider {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: #2d2d2d;
  border: 1px solid #404040;
  border-radius: 24px;
  transition: 0.3s;
}

.toggle-slider:before {
  position: absolute;
  content: "";
  height: 18px;
  width: 18px;
  left: 2px;
  bottom: 2px;
  background-color: #6b7280;
  border-radius: 50%;
  transition: 0.3s;
}

.toggle-switch input:checked + .toggle-slider {
  background-color: #3b82f6;
  border-color: #3b82f6;
}

.toggle-switch input:checked + .toggle-slider:before {
  transform: translateX(20px);
  background-color: white;
}

.toggle-switch:hover .toggle-slider {
  border-color: #6b7280;
}

.toggle-switch input:checked:hover + .toggle-slider {
  background-color: #2563eb;
  border-color: #2563eb;
}

/* Data Table */
.data-table {
  width: 100%;
  border-collapse: collapse;
}

.data-table-header {
  padding: 12px 8px;
  text-align: left;
  font-weight: var(--font-weight-medium);
  color: var(--foreground);
  background: rgba(148, 163, 184, 0.25);
  border-bottom: 1px solid var(--border);
  position: relative;
}

.data-table-sortable {
  cursor: pointer;
  -webkit-user-select: none;
  user-select: none;
  transition: background-color 0.2s;
}

.data-table-sortable:hover {
  background: rgba(148, 163, 184, 0.35);
}

.data-table-header-content {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
}

.data-table-sort-icon {
  font-size: var(--text-sm);
  color: var(--muted-foreground);
  transition: color 0.2s;
}

.data-table-sort-asc,
.data-table-sort-desc {
  color: var(--primary);
}

.data-table-row {
  border-bottom: 1px solid var(--border);
  transition: background-color 0.2s;
}

.data-table-row:hover {
  background: rgba(148, 163, 184, 0.05);
}

.data-table-row-selected {
  background: rgba(59, 130, 246, 0.1);
}

.data-table-row-selected:hover {
  background: rgba(59, 130, 246, 0.15);
}

.data-table-cell {
  padding: 12px 8px;
  font-size: var(--text-sm);
  color: var(--foreground);
  vertical-align: middle;
}

.data-table-select-col {
  width: 48px;
  text-align: center;
  padding: 8px;
}

.data-table-checkbox {
  width: 16px;
  height: 16px;
  cursor: pointer;
}

.data-table-empty {
  text-align: center;
  padding: 40px 16px;
}

.data-table-empty-content {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
}

/* Pagination */
.data-table-pagination {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  flex-wrap: wrap;
}

.data-table-pagination-info {
  font-size: var(--text-sm);
  color: var(--muted-foreground);
}

.data-table-pagination-controls {
  display: flex;
  align-items: center;
  gap: 8px;
}

.data-table-page-numbers {
  display: flex;
  align-items: center;
  gap: 4px;
}

.data-table-page-btn {
  padding: 6px 12px;
  background: transparent;
  border: 1px solid var(--border);
  border-radius: 4px;
  color: var(--foreground);
  font-size: var(--text-sm);
  cursor: pointer;
  transition: all 0.2s;
  min-width: 36px;
}

.data-table-page-btn:hover {
  background: var(--muted);
  border-color: var(--primary);
}

.data-table-page-current {
  background: var(--primary);
  border-color: var(--primary);
  color: white;
}

.data-table-page-current:hover {
  background: var(--primary);
  border-color: var(--primary);
}

.data-table-page-btn:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}

.data-table-page-btn:disabled:hover {
  background: transparent;
  border-color: var(--border);
}

.data-table-page-ellipsis {
  padding: 6px 8px;
  color: var(--muted-foreground);
  font-size: var(--text-sm);
}

/* Responsive Design */
@media (max-width: 768px) {
  .data-table-toolbar {
    flex-direction: column;
    align-items: stretch;
  }
  
  .data-table-toolbar-right {
    justify-content: space-between;
  }
  
  .data-table-pagination {
    flex-direction: column;
    align-items: stretch;
    gap: 12px;
  }
  
  .data-table-pagination-controls {
    justify-content: center;
  }
  
  .data-table-page-numbers {
    flex-wrap: wrap;
    justify-content: center;
  }
}

/* Table Wrapper */
.table-wrap {
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}

/* Badge variants for DataTable */
.data-table .badge {
  display: inline-flex;
  align-items: center;
  padding: 2px 8px;
  border-radius: 4px;
  font-size: var(--text-xs);
  font-weight: var(--font-weight-medium);
  white-space: nowrap;
}

.data-table .badge.badge-critical {
  background: rgba(239, 68, 68, 0.1);
  color: #ef4444;
  border: 1px solid rgba(239, 68, 68, 0.2);
}

.data-table .badge.badge-high {
  background: rgba(249, 115, 22, 0.1);
  color: #f97316;
  border: 1px solid rgba(249, 115, 22, 0.2);
}

.data-table .badge.badge-medium {
  background: rgba(234, 179, 8, 0.1);
  color: #eab308;
  border: 1px solid rgba(234, 179, 8, 0.2);
}

.data-table .badge.badge-low {
  background: rgba(6, 182, 212, 0.1);
  color: #06b6d4;
  border: 1px solid rgba(6, 182, 212, 0.2);
}

/* DAST scans table spacing and badge colors consistent with React */
.dast-scans .data-table thead th { padding: 14px 16px; }
.dast-scans .data-table tbody td { padding: 14px 16px; }
.dast-scans .badge.yellow { background:#f59e0b22; color:#facc15; border-color:#facc15; }
.dast-scans .badge.green { background:#16a34a22; color:#22c55e; border-color:#22c55e; }
.dast-scans .badge.red { background:#ef444422; color:#ef4444; border-color:#ef4444; }
.dast-scans .badge.blue { background:#3b82f622; color:#3b82f6; border-color:#3b82f6; }

.data-table .badge.badge-success {
  background: rgba(34, 197, 94, 0.1);
  color: #22c55e;
  border: 1px solid rgba(34, 197, 94, 0.2);
}

.data-table .badge.badge-warning {
  background: rgba(245, 158, 11, 0.1);
  color: #f59e0b;
  border: 1px solid rgba(245, 158, 11, 0.2);
}

.data-table .badge.badge-danger {
  background: rgba(239, 68, 68, 0.1);
  color: #ef4444;
  border: 1px solid rgba(239, 68, 68, 0.2);
}

.data-table .badge.badge-info {
  background: rgba(59, 130, 246, 0.1);
  color: #3b82f6;
  border: 1px solid rgba(59, 130, 246, 0.2);
}

.data-table .badge.badge-muted {
  background: rgba(148, 163, 184, 0.1);
  color: var(--muted-foreground);
  border: 1px solid var(--border);
}

/* Status and Severity Chips - Match React */
.badge {
  display: inline-flex;
  align-items: center;
  padding: 3px 10px;
  border-radius: 9999px; /* fully rounded */
  font-size: 12px;
  font-weight: 500;
  text-transform: none; /* React chips are lowercase text but not forced */
  letter-spacing: 0;
}
.badge.new { background: rgba(6, 182, 212, 0.2); color: rgb(6, 182, 212); border: 1px solid rgba(6,182,212,0.3); }
.badge.needs-triage { background: rgba(234, 179, 8, 0.2); color: #eab308; border: 1px solid rgba(234,179,8,0.3); }
.badge.in-remediation { background: rgba(168, 85, 247, 0.2); color: #a855f7; border: 1px solid rgba(168,85,247,0.3); }
.badge.validated { background: rgba(34, 197, 94, 0.2); color: #22c55e; border: 1px solid rgba(34,197,94,0.3); }
.badge.rejected { background: rgba(239, 68, 68, 0.2); color: #ef4444; border: 1px solid rgba(239,68,68,0.3); }
.badge.paid { background: rgba(34, 197, 94, 0.2); color: #22c55e; border: 1px solid rgba(34,197,94,0.3); }

/* Severity Badges - Exact React Colors */
.badge.critical { background: rgba(239, 68, 68, 0.2); color: #ef4444; border: 1px solid rgba(239,68,68,0.3); }
.badge.high { background: rgba(245, 158, 11, 0.2); color: #f59e0b; border: 1px solid rgba(245,158,11,0.3); }
.badge.medium { background: rgba(234, 179, 8, 0.2); color: #eab308; border: 1px solid rgba(234,179,8,0.3); }
.badge.low { background: rgba(6, 182, 212, 0.2); color: #06b6d4; border: 1px solid rgba(6,182,212,0.3); }

/* Table Styles - Match React */
.data-table {
  width: 100%;
  border-collapse: separate;
  border-spacing: 0;
}

.data-table {
  width: 100%;
  border-collapse: separate;
  border-spacing: 0;
}

.data-table th {
  background: rgba(255, 255, 255, 0.02);
  font-weight: 500;
  font-size: 14px; /* match React TableHead text-sm */
  color: var(--foreground);
  text-align: left;
  padding: 12px 24px;
  border-bottom: 1px solid var(--border);
  white-space: nowrap;
}

.data-table td {
  padding: 16px 24px;
  font-size: 14px;
  border-bottom: 1px solid var(--border);
  color: var(--muted-foreground); /* base row text color similar to React */
}

.data-table tr:hover td {
  background: rgba(255, 255, 255, 0.02);
}

/* ID Column */
.data-table td .font-mono {
  color: rgb(6, 182, 212);
  font-size: 14px; /* text-sm */
  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
  white-space: nowrap; /* keep ID on one line */
  word-break: keep-all;
  cursor: pointer; /* Show clickable cursor on hover */
  transition: color 0.2s; /* Smooth color transition */
}

.data-table td .font-mono:hover {
  color: rgb(34, 211, 238); /* Lighter primary color on hover */
}

/* Title Column */
.data-table td button.text-foreground {
  color: var(--foreground);
  font-size: 16px; /* title closer to React default text-base */
  background: none;
  border: none;
  padding: 0;
  cursor: pointer;
  text-align: left;
  width: 100%;
  transition: color 0.2s;
}

.data-table td button.text-foreground:hover {
  color: rgb(6, 182, 212);
}

/* Researcher Column */
.data-table td button.text-primary {
  color: rgb(6, 182, 212);
  font-size: 16px; /* researcher name */
  background: none;
  border: none;
  padding: 0;
  cursor: pointer;
  text-decoration: none;
  text-align: left; /* align researcher text left */
  display: inline-block;
}

.data-table td button.text-primary:hover {
  text-decoration: underline;
}

/* Override underline for submission ID links */
.data-table td a.text-primary,
.data-table td a.text-primary:hover,
.data-table td a.text-primary:focus,
.data-table td a.text-primary:active {
  text-decoration: none !important;
}

/* Date Column */
.data-table td .flex.flex-col {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.data-table td .text-foreground.text-sm {
  color: var(--foreground);
  font-size: 14px;
}

.data-table td .text-muted-foreground.text-xs {
  color: var(--muted-foreground);
  font-size: 12px;
}

/* Table Header Section */
.table-header-section {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  padding: 24px;
  border-bottom: 1px solid var(--border);
  background: var(--card);
}

.table-title-row {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.table-title {
  font-size: 16px;
  font-weight: 500;
  color: var(--foreground);
  margin: 0;
  line-height: 1.2;
}

.table-subtitle {
  font-size: 14px;
  color: var(--muted-foreground);
  margin: 0;
}

.table-sort-controls {
  display: flex;
  align-items: center;
  gap: 8px;
}

.sort-dropdown-wrapper {
  position: relative;
}

.sort-dropdown {
  appearance: none;
  background: var(--input-background);
  border: 1px solid var(--border);
  border-radius: 6px;
  color: var(--foreground);
  font-size: 14px;
  padding: 8px 12px;
  padding-right: 32px;
  cursor: pointer;
  min-width: 140px;
}

.sort-dropdown:hover {
  background: rgba(255, 255, 255, 0.02);
}

.sort-direction-btn {
  height: 36px;
  width: 36px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: transparent;
  border: 1px solid var(--border);
  border-radius: 6px;
  color: var(--foreground);
  font-size: 16px;
  cursor: pointer;
  padding: 0;
}

.sort-direction-btn:hover {
  background: rgba(255, 255, 255, 0.02);
}

/* Table Footer */
.table-footer {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 12px 24px;
  border-top: 1px solid var(--border);
  background: var(--card);
}

.table-footer-left {
  display: flex;
  align-items: center;
  gap: 8px;
}

.select-wrapper {
  position: relative;
  display: inline-block;
}

.select-chevron {
  position: absolute;
  right: 8px;
  top: 50%;
  transform: translateY(-50%);
  pointer-events: none;
  color: var(--muted-foreground);
}

.rows-select {
  background: transparent;
  border: 1px solid var(--border);
  border-radius: 6px;
  color: var(--foreground);
  font-size: 14px;
  padding: 6px 28px 6px 12px;
  cursor: pointer;
  width: 80px;
  height: 36px;
  transition: border-color 0.2s ease;
  appearance: none;
  -webkit-appearance: none;
}

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

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

/* Utility classes for table footer */
.text-sm {
  font-size: 14px;
  line-height: 20px;
}

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

.whitespace-nowrap {
  white-space: nowrap;
}

.pagination-controls {
  display: flex;
  align-items: center;
  gap: 2px;
}

.pagination-btn {
  padding: 0 12px;
  height: 32px;
  background: transparent;
  border: 1px solid var(--border);
  border-radius: 6px;
  color: var(--foreground);
  font-size: 14px;
  cursor: pointer;
  display: flex;
  align-items: center;
  gap: 6px;
  transition: all 0.15s ease;
}

.pagination-btn svg {
  width: 14px;
  height: 14px;
  stroke-width: 2;
  color: var(--muted-foreground);
}

.pagination-btn:hover:not(:disabled) {
  background: rgba(255, 255, 255, 0.03);
  border-color: var(--border-hover);
}

.pagination-btn:active:not(:disabled) {
  background: rgba(255, 255, 255, 0.05);
}

.pagination-btn:disabled {
  opacity: 0.5;
  cursor: not-allowed;
  background: transparent;
  border-color: var(--border);
}

.page-numbers {
  display: flex;
  align-items: center;
  gap: 4px;
}

.page-numbers button {
  min-width: 32px;
  height: 32px;
  padding: 0;
  background: transparent;
  border: 1px solid var(--border);
  border-radius: 6px;
  color: var(--foreground);
  font-size: 14px;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all 0.2s ease;
}

.page-numbers button:hover:not(.current):not(:disabled) {
  background: rgba(255, 255, 255, 0.05);
  border-color: var(--border-hover);
}

.page-numbers button:active:not(.current):not(:disabled) {
  background: rgba(255, 255, 255, 0.1);
}

.page-numbers button.current {
  background: var(--primary);
  color: white;
  border-color: var(--primary);
  font-weight: 500;
}

.page-numbers button:disabled {
  opacity: 0.5;
  cursor: not-allowed;
  background: transparent;
  border-color: var(--border);
}

.page-numbers .ellipsis {
  color: var(--muted-foreground);
  padding: 0 4px;
  user-select: none;
}

/* Previous/Next buttons */
.pagination-btn {
  padding: 6px 12px;
  background: transparent;
  border: 1px solid var(--border);
  border-radius: 6px;
  color: var(--foreground);
  font-size: 14px;
  cursor: pointer;
  display: flex;
  align-items: center;
  gap: 8px;
  transition: all 0.2s ease;
}

.pagination-btn:hover:not(:disabled) {
  background: rgba(255, 255, 255, 0.05);
  border-color: var(--border-hover);
}

.pagination-btn:active:not(:disabled) {
  background: rgba(255, 255, 255, 0.1);
}

.pagination-btn:disabled {
  opacity: 0.5;
  cursor: not-allowed;
  background: transparent;
  border-color: var(--border);
}

/* Checkbox Column */
.data-table td:first-child,
.data-table th:first-child {
  padding-left: 24px;
  width: 48px;
}

/* Actions Column */
.data-table td:last-child,
.data-table th:last-child {
  padding-right: 24px;
  width: 160px;
}

/* Sort Dropdown */
.admin-inbox .sort-dropdown {
  background: transparent;
  border: 1px solid var(--border);
  border-radius: 6px;
  color: var(--foreground);
  padding: 8px 12px;
  font-size: 14px;
  display: flex;
  align-items: center;
  gap: 8px;
}

.admin-inbox .sort-dropdown:hover {
  background: rgba(255, 255, 255, 0.02);
}

/* Rows per page selector */
.admin-inbox .rows-per-page {
  display: flex;
  align-items: center;
  gap: 8px;
  color: var(--muted-foreground);
  font-size: 14px;
}

.admin-inbox .rows-per-page select {
  background: transparent;
  border: none;
  color: var(--foreground);
  font-size: 14px;
  padding: 4px 8px;
}

/* Table Header */
.admin-inbox .table-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 16px 24px;
  border-bottom: 1px solid var(--border);
}

.admin-inbox .table-header h3 {
  font-size: 16px;
  font-weight: 500;
  margin: 0;
}

.admin-inbox .table-header p {
  color: var(--muted-foreground);
  font-size: 14px;
  margin: 4px 0 0 0;
}

/* Search and Filters Card */
.search-filters-card {
  padding: 16px;
  margin-bottom: 0; /* no extra gap below the wrapper */
  border-radius: 12px;
  flex-shrink: 0;
  min-height: 86px; /* match React visual height */
  display: block; /* let inner layout control alignment */
}

@media (min-width: 640px) {
  .search-filters-card {
    padding: 24px;
  }
}

/* Search and Filters */
.search-filters {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

@media (min-width: 768px) {
  .search-filters {
    flex-direction: row;
    align-items: center; /* align filters with input baseline */
  }
}

.search-box {
  flex: 1 1 auto; /* fill remaining width */
  position: relative;
  display: flex;
  align-items: center;
}

.search-icon {
  position: absolute;
  left: 12px;
  top: 50%;
  transform: translateY(-50%);
  color: var(--muted-foreground);
  z-index: 2; /* Ensure icon is above input */
  pointer-events: none;
  width: 16px;
  height: 16px;
}

.search-input {
  width: 100%;
  height: 40px; /* Increased height to match React version */
  padding: 8px 12px 8px 40px; /* Better padding to match React */
  background: var(--input-background);
  border: 1px solid var(--border);
  border-radius: 8px; /* Slightly more rounded to match React */
  color: var(--foreground);
  font-size: 14px;
  transition: border-color 0.2s, box-shadow 0.2s; /* Smooth transitions */
}

.search-input::placeholder {
  color: var(--muted-foreground);
}

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

/* Search Input Wrapper - Standardized across all pages */
.search-input-wrapper {
  position: relative;
  display: flex;
  align-items: center;
  width: 100%;
}

.search-input-wrapper .search-icon {
  position: absolute;
  left: 12px;
  color: var(--muted-foreground);
  z-index: 1;
  pointer-events: none;
}

.search-input-wrapper .search-input {
  width: 100%;
  padding-left: 40px;
  padding-right: 12px;
  height: 36px;
  background-color: var(--input-background);
  border: 1px solid var(--border);
  border-radius: 6px;
  color: var(--foreground);
  font-size: 14px;
  transition: all 0.2s ease;
}

.search-input-wrapper .search-input:focus {
  outline: none;
  border-color: var(--primary);
  box-shadow: 0 0 0 3px rgba(6, 182, 212, 0.1);
}

.search-input-wrapper .search-input::placeholder {
  color: var(--muted-foreground);
}

.filter-select-wrapper {
  position: relative;
  display: flex;
  align-items: center;
  width: 100%;
}

@media (min-width: 768px) {
  .filter-select-wrapper {
    max-width: 180px;
  }
}

.filter-icon {
  position: absolute;
  left: 12px;
  color: var(--muted-foreground);
  pointer-events: none;
  z-index: 1;
}

.dropdown-chevron {
  position: absolute;
  right: 12px;
  color: var(--muted-foreground);
  pointer-events: none;
  z-index: 1;
}

.filter-dropdown {
  width: 100%;
  height: 36px;
  padding: 8px 36px 8px 36px;
  background: var(--input-background);
  border: 1px solid var(--border);
  border-radius: 6px;
  color: var(--foreground);
  font-size: 14px;
  cursor: pointer;
  appearance: none;
  -webkit-appearance: none;
}

.filter-dropdown:hover {
  background: rgba(255, 255, 255, 0.02);
}

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

/* Fix dropdown option styling for dark theme */
.filter-dropdown option,
.sort-dropdown option,
.rows-select option {
  background: var(--input-background);
  color: var(--foreground);
  padding: 8px 12px;
}

.filter-dropdown option:hover,
.sort-dropdown option:hover,
.rows-select option:hover {
  background: var(--primary);
  color: var(--primary-foreground);
}

.filter-dropdown option:checked,
.sort-dropdown option:checked,
.rows-select option:checked {
  background: var(--primary);
  color: var(--primary-foreground);
}

/* Action Buttons */
.btn.small { 
  height: 32px; 
  padding: 0 10px; 
  font-size: 13px;
  border-radius: 6px;
  background: rgb(6, 182, 212, 0.1);
  color: rgb(6, 182, 212);
  border: none;
  display: flex;
  align-items: center;
  gap: 8px;
  cursor: pointer;
}

.btn.small-red {
    background: rgba(239, 68, 68, 0.15);
    color: #ef4444;
    font-size: 13px;
    height: 32px;
}

.btn.small:hover {
  background: rgb(6, 182, 212, 0.15);
}

.btn.small-red:hover {
    background: rgb(239 68 68 / 31%)
}

.btn.success { 
  background: rgba(22, 163, 74, 0.1); 
  color: rgb(22, 163, 74); 
}
.btn.success:hover { 
  background: rgba(22, 163, 74, 0.15); 
}

.btn.danger { 
  background: rgba(220, 38, 38, 0.1); 
  color: rgb(220, 38, 38); 
}
.btn.danger:hover { 
  background: rgba(220, 38, 38, 0.15); 
}

.btn.warning {
    background: rgb(188 217 69 / 14%);
    color: rgb(206 184 43);
}

    .btn.warning:hover {
        background: rgb(188 217 69 / 17%);
    }

.btn.ghost { 
  background: transparent; 
  color: var(--foreground); 
  border: 1px solid var(--border);
}
.btn.ghost:hover { 
  background: rgba(255, 255, 255, 0.02);
}

/* Styles moved from inline */
.inbox-header-title { font-size: 1.5rem; font-weight: 600; color: #fff; margin: 0 0 8px 0; }
.inbox-header-subtitle { margin: 0 0 24px 0; }
.kpi-metric-label { margin-bottom: 4px; }
.kpi-metric-value { font-size: 1.875rem; margin: 0; }
.inbox-card { margin-top: 24px; }
.inbox-card-content { padding: 16px; }
.inbox-filters-container { display: flex; flex-direction: column; gap: 16px; }
.card-header-actions { display: flex; gap: 12px; }
.pagination-gap { gap: 4px; }
.card-padding { padding: 24px; }
.bulk-actions-bar { display: none; align-items: center; gap: 12px; padding: 12px; background: rgba(6,182,212,0.05); border: 1px solid rgba(6,182,212,0.2); border-radius: 8px; }
.bulk-actions-buttons { margin-left: auto; display: flex; gap: 8px; }
.sort-select { width: 140px; }
.table-cell-padding { padding: 0 24px; }
.date-submitted-cell { display: flex; flex-direction: column; }
.action-button-icon { margin-right: 8px; }

/* Inbox filters block - match React sizing and rounded corners */
.admin-inbox .input {
  height: 40px;
  border-radius: 8px;
}
.admin-inbox select.input {
  height: 40px;
  border-radius: 8px;
}
.admin-inbox .input::placeholder {
  color: var(--muted-foreground);
}
.admin-inbox .absolute.left-3.top-1\/2.-translate-y-1\/2.text-muted-foreground {
  color: var(--muted-foreground);
}
.admin-inbox .flex.flex-col.md\:flex-row.gap-4 > .relative {
  min-width: 220px;
}
.admin-inbox .card.filters-card-spacing { margin: 16px 0; }

/* Make table take remaining height with sticky footer */
.admin-inbox {
  flex: 1 1 auto; /* fill remaining space */
  min-height: 0; /* allow internal scroll areas */
  display: flex;
  flex-direction: column;
  gap: 16px;
  overflow: hidden; /* Prevent double scrollbars */
  padding-bottom: 0;
}

/* Ensure inbox page uses fixed viewport height properly */
.admin-inbox-page .admin-inbox {
  height: 100%;
}

/* Only the main table card should stretch */
.admin-inbox .card.bg-card.border.border-border.overflow-hidden {
  display: flex;
  flex-direction: column;
  flex: 1 1 auto;
  min-height: 0; /* Important for Firefox */
  margin-bottom: 0;
}

/* Prevent other cards (KPIs, filters, etc) from stretching */
.admin-inbox .kpis .card,
.admin-inbox .search-filters-card,
.admin-inbox .bulk-actions-bar {
  flex: 0 0 auto;
}

/* Make the table container scroll within the stretching card */
.admin-inbox .card.bg-card.border.border-border.overflow-hidden > .overflow-x-auto {
  flex: 1 1 auto;
  overflow-y: auto;
  min-height: 0; /* Important for Firefox */
}

.admin-inbox .table {
  margin-bottom: 0;
}

.admin-inbox .table-footer {
  position: sticky;
  bottom: 0;
  background: var(--card);
  z-index: 10;
  border-top: 1px solid var(--border);
  margin-top: auto;
  padding: 12px 24px;
}

/* Text color utilities */
.text-red-500 {
  color: #ef4444;
}

.text-red-500:hover {
  color: #dc2626;
}

/* Integrations Container */
.integrations-container {
    display: grid;
    grid-template-columns: 1fr;
    gap: 24px;
    max-width: 80rem; /* max-w-5xl equivalent */
}

@media (min-width: 768px) {
    .integrations-container {
        gap: 32px;
    }
}