/* ==========================================================================
   Global Dark Theme — Applied to all dashboard tabs
   Scoped under #dashboard-screen so login page stays light
   ========================================================================== */

/* ---------------------------------------------------------------------------
   Override CSS Custom Properties for Dark Mode
   --------------------------------------------------------------------------- */

#dashboard-screen {
  --bg: #0a0e1a;
  --surface: #111827;
  --surface-hover: #1a2035;
  --border: rgba(255, 255, 255, 0.1);
  --border-light: rgba(255, 255, 255, 0.06);

  --text: #e2e8f0;
  --text-secondary: #94a3b8;
  --text-muted: #64748b;

  --primary-light: rgba(15, 98, 254, 0.15);
  --success-bg: rgba(16, 185, 129, 0.15);
  --warning-bg: rgba(245, 158, 11, 0.15);
  --danger-bg: rgba(239, 68, 68, 0.15);
  --info-bg: rgba(59, 130, 246, 0.15);

  --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.3);
  --shadow: 0 1px 3px rgba(0, 0, 0, 0.4), 0 1px 2px rgba(0, 0, 0, 0.3);
  --shadow-md: 0 4px 12px rgba(0, 0, 0, 0.4);
  --shadow-lg: 0 10px 30px rgba(0, 0, 0, 0.5);
}

/* ---------------------------------------------------------------------------
   Main Area & Topbar
   --------------------------------------------------------------------------- */

#dashboard-screen .main-area {
  background: #0a0e1a;
}

#dashboard-screen .topbar {
  background: #0d1117;
  border-bottom-color: rgba(255, 255, 255, 0.06);
}

#dashboard-screen .topbar .topbar-title,
#dashboard-screen .topbar .admin-greeting {
  color: #e2e8f0;
}

#dashboard-screen .topbar .btn-ghost {
  color: #94a3b8;
}

#dashboard-screen .topbar .btn-ghost:hover {
  background: rgba(255, 255, 255, 0.06);
  color: #e2e8f0;
}

#dashboard-screen .sidebar-toggle {
  color: #94a3b8;
}

/* ---------------------------------------------------------------------------
   Main Content Area
   --------------------------------------------------------------------------- */

#dashboard-screen .main-content {
  background: #0a0e1a;
}

/* ---------------------------------------------------------------------------
   Stat Cards (non-overview pages)
   --------------------------------------------------------------------------- */

#dashboard-screen .stat-card {
  background: #1a2035;
  border-color: rgba(255, 255, 255, 0.06);
  box-shadow: 0 0 20px rgba(15, 98, 254, 0.08);
}

#dashboard-screen .stat-card:hover {
  box-shadow: 0 0 30px rgba(15, 98, 254, 0.15);
}

#dashboard-screen .stat-card .stat-value {
  color: #e2e8f0;
}

#dashboard-screen .stat-card .stat-label {
  color: #94a3b8;
}

/* Stat icons — dark mode backgrounds */
#dashboard-screen .calls-icon {
  background: rgba(79, 70, 229, 0.15);
  color: #818cf8;
}

#dashboard-screen .tickets-icon {
  background: rgba(217, 119, 6, 0.15);
  color: #fbbf24;
}

#dashboard-screen .customers-icon {
  background: rgba(5, 150, 105, 0.15);
  color: #34d399;
}

/* Active stat card keeps its gradient */
#dashboard-screen .stat-card.stat-active {
  border-color: transparent;
}

/* ---------------------------------------------------------------------------
   Panels
   --------------------------------------------------------------------------- */

#dashboard-screen .panel {
  background: #111827;
  border-color: rgba(255, 255, 255, 0.06);
}

#dashboard-screen .panel-header h2 {
  color: #e2e8f0;
}

/* ---------------------------------------------------------------------------
   Tables
   --------------------------------------------------------------------------- */

#dashboard-screen .data-table th {
  color: #94a3b8;
  border-bottom-color: rgba(255, 255, 255, 0.1);
}

#dashboard-screen .data-table td {
  color: #e2e8f0;
  border-bottom-color: rgba(255, 255, 255, 0.04);
}

#dashboard-screen .data-table tbody tr:hover {
  background: rgba(255, 255, 255, 0.03);
}

#dashboard-screen .empty-cell {
  color: #64748b;
}

/* ---------------------------------------------------------------------------
   Filters & Form Inputs
   --------------------------------------------------------------------------- */

#dashboard-screen .filters select,
#dashboard-screen .filters input[type="text"],
#dashboard-screen .filters input[type="date"] {
  background: #1a2035;
  border-color: rgba(255, 255, 255, 0.1);
  color: #e2e8f0;
}

#dashboard-screen .filters select:focus,
#dashboard-screen .filters input:focus {
  border-color: var(--primary);
  box-shadow: 0 0 0 3px rgba(15, 98, 254, 0.2);
}

#dashboard-screen .filters select option {
  background: #1a2035;
  color: #e2e8f0;
}

#dashboard-screen .form-group input,
#dashboard-screen .form-group select,
#dashboard-screen .form-group textarea {
  background: #1a2035;
  border-color: rgba(255, 255, 255, 0.1);
  color: #e2e8f0;
}

#dashboard-screen .form-group input:focus,
#dashboard-screen .form-group select:focus,
#dashboard-screen .form-group textarea:focus {
  border-color: var(--primary);
  box-shadow: 0 0 0 3px rgba(15, 98, 254, 0.2);
}

#dashboard-screen .form-group input::placeholder,
#dashboard-screen .form-group textarea::placeholder {
  color: #4b5563;
}

#dashboard-screen .form-group label {
  color: #94a3b8;
}

#dashboard-screen .form-group select option {
  background: #1a2035;
  color: #e2e8f0;
}

/* ---------------------------------------------------------------------------
   Buttons
   --------------------------------------------------------------------------- */

#dashboard-screen .btn-secondary {
  background: #1a2035;
  color: #94a3b8;
  border-color: rgba(255, 255, 255, 0.1);
}

#dashboard-screen .btn-secondary:hover {
  background: #243049;
  color: #e2e8f0;
  border-color: rgba(255, 255, 255, 0.15);
}

#dashboard-screen .btn-ghost {
  color: #94a3b8;
}

#dashboard-screen .btn-ghost:hover {
  background: rgba(255, 255, 255, 0.06);
  color: #e2e8f0;
}

/* ---------------------------------------------------------------------------
   Badges & Status Badges — Dark-compatible backgrounds
   --------------------------------------------------------------------------- */

#dashboard-screen .status-badge.active,
#dashboard-screen .status-badge.open,
#dashboard-screen .status-badge.in_progress {
  background: rgba(59, 130, 246, 0.15);
  color: #60a5fa;
}

#dashboard-screen .status-badge.completed,
#dashboard-screen .status-badge.closed,
#dashboard-screen .status-badge.paid {
  background: rgba(16, 185, 129, 0.15);
  color: #34d399;
}

#dashboard-screen .status-badge.escalated,
#dashboard-screen .status-badge.critical,
#dashboard-screen .status-badge.failed {
  background: rgba(239, 68, 68, 0.15);
  color: #f87171;
}

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

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

#dashboard-screen .status-badge.low {
  background: rgba(156, 163, 175, 0.1);
  color: #6b7280;
}

#dashboard-screen .status-badge.processing {
  background: rgba(245, 158, 11, 0.15);
  color: #fbbf24;
}

/* ---------------------------------------------------------------------------
   Active Calls & Activity Lists
   --------------------------------------------------------------------------- */

#dashboard-screen .active-call-item {
  background: #1a2035;
  border-left-color: var(--primary);
}

#dashboard-screen .call-customer {
  color: #e2e8f0;
}

#dashboard-screen .call-phone {
  color: #94a3b8;
}

#dashboard-screen .activity-item {
  border-bottom-color: rgba(255, 255, 255, 0.04);
}

#dashboard-screen .activity-icon {
  background: rgba(15, 98, 254, 0.15);
  color: #60a5fa;
}

#dashboard-screen .activity-title {
  color: #e2e8f0;
}

#dashboard-screen .empty-message {
  color: #64748b;
}

/* ---------------------------------------------------------------------------
   Modals
   --------------------------------------------------------------------------- */

#dashboard-screen .modal-content {
  background: #111827;
  border: 1px solid rgba(255, 255, 255, 0.06);
}

#dashboard-screen .modal-header {
  border-bottom-color: rgba(255, 255, 255, 0.06);
}

#dashboard-screen .modal-header h2 {
  color: #e2e8f0;
}

#dashboard-screen .modal-close {
  color: #64748b;
}

#dashboard-screen .modal-close:hover {
  background: rgba(255, 255, 255, 0.06);
  color: #e2e8f0;
}

#dashboard-screen .modal-body {
  color: #e2e8f0;
}

#dashboard-screen .modal-backdrop {
  background: rgba(0, 0, 0, 0.7);
}

/* ---------------------------------------------------------------------------
   Detail Sections (inside modals)
   --------------------------------------------------------------------------- */

#dashboard-screen .detail-section h3 {
  color: #94a3b8;
}

#dashboard-screen .detail-item {
  background: #1a2035;
}

#dashboard-screen .detail-label {
  color: #64748b;
}

#dashboard-screen .detail-value {
  color: #e2e8f0;
}

/* ---------------------------------------------------------------------------
   Transcripts
   --------------------------------------------------------------------------- */

#dashboard-screen .transcript {
  background: #0a0e1a;
}

#dashboard-screen .transcript-speaker {
  color: #94a3b8;
}

#dashboard-screen .transcript-content {
  background: #1a2035;
  color: #e2e8f0;
}

#dashboard-screen .transcript-item.customer .transcript-content {
  background: rgba(59, 130, 246, 0.1);
  border-left-color: #3b82f6;
  color: #e2e8f0;
}

#dashboard-screen .transcript-item.assistant .transcript-content {
  background: rgba(16, 185, 129, 0.1);
  border-left-color: #10b981;
  color: #e2e8f0;
}

/* ---------------------------------------------------------------------------
   Upload Zone (Knowledge Base)
   --------------------------------------------------------------------------- */

#dashboard-screen .upload-zone {
  border-color: rgba(255, 255, 255, 0.12);
  color: #64748b;
  background: transparent;
}

#dashboard-screen .upload-zone:hover,
#dashboard-screen .upload-zone.drag-over {
  border-color: var(--primary);
  background: rgba(15, 98, 254, 0.08);
  color: #60a5fa;
}

#dashboard-screen .upload-zone svg {
  stroke: currentColor;
}

#dashboard-screen .progress-bar {
  background: #1a2035;
}

#dashboard-screen .upload-status {
  color: #94a3b8;
}

/* ---------------------------------------------------------------------------
   Configuration
   --------------------------------------------------------------------------- */

#dashboard-screen .config-item {
  background: #1a2035;
}

#dashboard-screen .config-item label {
  color: #e2e8f0;
}

#dashboard-screen .config-item input,
#dashboard-screen .config-item textarea {
  background: #0d1117;
  border-color: rgba(255, 255, 255, 0.1);
  color: #e2e8f0;
}

#dashboard-screen .config-item input:focus,
#dashboard-screen .config-item textarea:focus {
  border-color: var(--primary);
  box-shadow: 0 0 0 3px rgba(15, 98, 254, 0.2);
}

#dashboard-screen .config-item input::placeholder,
#dashboard-screen .config-item textarea::placeholder {
  color: #4b5563;
}

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

#dashboard-screen .save-message.error {
  background: rgba(239, 68, 68, 0.15);
  color: #f87171;
}

/* Business hours time inputs */
#dashboard-screen #business-hours-body input[type="time"] {
  background: #1a2035;
  border-color: rgba(255, 255, 255, 0.1);
  color: #e2e8f0;
}

#dashboard-screen #business-hours-body input[type="time"]:focus {
  border-color: var(--primary);
}

#dashboard-screen #business-hours-body input[type="checkbox"] {
  accent-color: var(--primary);
}

/* Reset panel text */
#dashboard-screen #reset-panel p {
  color: #64748b !important;
}

/* ---------------------------------------------------------------------------
   Help Page
   --------------------------------------------------------------------------- */

#dashboard-screen .help-card {
  background: #111827;
  border-color: rgba(255, 255, 255, 0.06);
}

#dashboard-screen .help-card:hover {
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.3);
}

#dashboard-screen .help-card-icon {
  background: rgba(15, 98, 254, 0.15);
  color: #60a5fa;
}

#dashboard-screen .help-card h3 {
  color: #e2e8f0;
}

#dashboard-screen .help-card p {
  color: #94a3b8;
}

/* ---------------------------------------------------------------------------
   User Status Indicators
   --------------------------------------------------------------------------- */

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

#dashboard-screen .user-status-inactive {
  background: rgba(239, 68, 68, 0.15);
  color: #f87171;
}

/* ---------------------------------------------------------------------------
   Feedback & Requests
   --------------------------------------------------------------------------- */

#dashboard-screen .feedback-submit-panel {
  border-left-color: var(--primary);
}

#dashboard-screen .feedback-intro {
  color: #94a3b8;
}

#dashboard-screen .feedback-form-grid .form-group select,
#dashboard-screen .feedback-form-grid .form-group input,
#dashboard-screen .feedback-form-grid .form-group textarea {
  background: #1a2035;
  border-color: rgba(255, 255, 255, 0.1);
  color: #e2e8f0;
}

#dashboard-screen .feedback-form-grid .form-group select:focus,
#dashboard-screen .feedback-form-grid .form-group input:focus,
#dashboard-screen .feedback-form-grid .form-group textarea:focus {
  border-color: var(--primary);
  box-shadow: 0 0 0 3px rgba(15, 98, 254, 0.2);
}

#dashboard-screen .feedback-form-grid .form-group select option {
  background: #1a2035;
  color: #e2e8f0;
}

/* Feedback cards */
#dashboard-screen .feedback-card {
  background: #111827;
  border-color: rgba(255, 255, 255, 0.06);
  border-left-color: var(--primary);
}

#dashboard-screen .feedback-card:hover {
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.3);
}

#dashboard-screen .feedback-card.feedback-resolved {
  border-left-color: var(--success);
}

#dashboard-screen .feedback-card-title {
  color: #e2e8f0;
}

#dashboard-screen .feedback-card-desc {
  color: #94a3b8;
}

#dashboard-screen .feedback-card-footer {
  border-top-color: rgba(255, 255, 255, 0.06);
  color: #64748b;
}

/* Feedback category tags */
#dashboard-screen .feedback-cat-bug {
  background: rgba(239, 68, 68, 0.15);
  color: #f87171;
}

#dashboard-screen .feedback-cat-feature {
  background: rgba(245, 158, 11, 0.15);
  color: #fbbf24;
}

#dashboard-screen .feedback-cat-change {
  background: rgba(59, 130, 246, 0.15);
  color: #60a5fa;
}

#dashboard-screen .feedback-cat-improvement {
  background: rgba(16, 185, 129, 0.15);
  color: #34d399;
}

#dashboard-screen .feedback-cat-question {
  background: rgba(124, 58, 237, 0.15);
  color: #a78bfa;
}

/* Feedback priority tags */
#dashboard-screen .priority-low {
  background: rgba(156, 163, 175, 0.1);
  color: #6b7280;
}

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

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

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

/* Feedback status tags */
#dashboard-screen .status-new {
  background: rgba(59, 130, 246, 0.15);
  color: #60a5fa;
}

#dashboard-screen .status-in_review {
  background: rgba(245, 158, 11, 0.15);
  color: #fbbf24;
}

#dashboard-screen .status-planned {
  background: rgba(124, 58, 237, 0.15);
  color: #a78bfa;
}

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

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

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

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

/* Feedback admin notes */
#dashboard-screen .feedback-admin-notes {
  background: rgba(16, 185, 129, 0.1);
  border-left-color: #10b981;
  color: #e2e8f0;
}

/* Feedback comments */
#dashboard-screen .feedback-comment {
  background: #1a2035;
  border-left-color: var(--primary);
}

#dashboard-screen .feedback-comment-header strong {
  color: #e2e8f0;
}

#dashboard-screen .feedback-comment-date {
  color: #64748b;
}

#dashboard-screen .feedback-comment p {
  color: #94a3b8;
}

/* ---------------------------------------------------------------------------
   Spinner
   --------------------------------------------------------------------------- */

#dashboard-screen .spinner {
  border-color: rgba(255, 255, 255, 0.1);
  border-top-color: var(--primary);
}

/* ---------------------------------------------------------------------------
   Error Messages
   --------------------------------------------------------------------------- */

#dashboard-screen .error-message {
  color: #f87171;
}

/* ---------------------------------------------------------------------------
   Scrollbar Styling (Dashboard-wide)
   --------------------------------------------------------------------------- */

#dashboard-screen ::-webkit-scrollbar {
  width: 6px;
  height: 6px;
}

#dashboard-screen ::-webkit-scrollbar-track {
  background: #0a0e1a;
}

#dashboard-screen ::-webkit-scrollbar-thumb {
  background: #1e293b;
  border-radius: 3px;
}

#dashboard-screen ::-webkit-scrollbar-thumb:hover {
  background: #334155;
}

#dashboard-screen {
  scrollbar-color: #1e293b #0a0e1a;
  scrollbar-width: thin;
}

/* ---------------------------------------------------------------------------
   Inline style overrides for elements with hardcoded colors
   --------------------------------------------------------------------------- */

/* Modal disabled inputs (like resend welcome user display) */
#dashboard-screen input:disabled {
  background: #1a2035 !important;
  color: #64748b !important;
  border-color: rgba(255, 255, 255, 0.06) !important;
}

/* The about panel on help page has inline color styles */
#dashboard-screen #tab-help .panel p {
  color: #94a3b8 !important;
}

/* Resend welcome modal description */
#dashboard-screen .modal-body > p {
  color: #94a3b8;
}