/**
 * Dark Theme CSS Variables
 *
 * Semantic naming convention - variables named by purpose, not color value.
 * Uses darker/muted variants of colors for dark mode readability.
 */

:root {
  /* ===========================
   * SURFACE/BACKGROUND COLORS
   * =========================== */
  --bg-body: #0f172a;
  --bg-surface: #1e293b;
  --bg-surface-muted: #1e293b;
  --bg-surface-subtle: #334155;
  --bg-surface-elevated: #334155;

  /* ===========================
   * TEXT COLORS
   * =========================== */
  --text-primary: #e2e8f0;
  --text-secondary: #cbd5e1;
  --text-muted: #94a3b8;
  --text-placeholder: #64748b;
  --text-inverse: #0f172a;

  /* ===========================
   * BRAND/PRIMARY COLORS
   * =========================== */
  --brand-primary: #60a5fa;
  --brand-primary-hover: #3b82f6;
  --brand-primary-light: #93c5fd;
  --brand-primary-bg: rgba(96, 165, 250, 0.2);

  /* ===========================
   * LINK COLORS
   * =========================== */
  --link-default: #60a5fa;
  --link-hover-bg: #3b82f6;
  --link-hover-text: #ffffff;

  /* ===========================
   * BORDER COLORS
   * =========================== */
  --border-default: #334155;
  --border-subtle: #1e293b;
  --border-strong: #475569;
  --border-dark: #475569;
  --border-focus: #60a5fa;
  --border-accent: #60a5fa;

  /* ===========================
   * FORM INPUT COLORS
   * =========================== */
  --input-bg: #334155;
  --input-bg-hover: #475569;
  --input-border: #475569;
  --input-text: #e2e8f0;

  /* ===========================
   * BUTTON COLORS
   * =========================== */
  --btn-primary-bg: #3b82f6;
  --btn-primary-bg-hover: #2563eb;
  --btn-primary-text: #ffffff;

  /* ===========================
   * CHAT MESSAGE BUBBLES
   * =========================== */
  /* Others' messages - Darker Blue */
  --msg-other-bg: #1e3a5f;
  --msg-other-border: #1e4976;
  --msg-other-gradient-start: rgb(30, 58, 95);
  --msg-other-gradient-end: rgb(37, 99, 150);
  --msg-other-tail: #1e3a5f;

  /* Own messages - Darker Green */
  --msg-own-bg: #14532d;
  --msg-own-border: #166534;
  --msg-own-gradient-start: rgb(22, 78, 33);
  --msg-own-gradient-end: rgb(34, 120, 50);
  --msg-own-tail: #164e21;

  /* System messages - Darker Red */
  --msg-system-bg: #7f1d1d;
  --msg-system-border: #991b1b;
  --msg-system-gradient-start: rgb(127, 29, 29);
  --msg-system-gradient-end: rgb(153, 27, 27);
  --msg-system-tail: #7f1d1d;

  /* Message boxes (.msg, .msg1) */
  --msg-box-bg: #1e3a5f;
  --msg-box-alt-bg: #1e293b;
  --msg-box-text: #e2e8f0;
  --msg-box-border: #475569;

  /* ===========================
   * STATUS COLORS
   * =========================== */
  /* Error/Danger */
  --status-error: #f87171;
  --status-error-bg: #450a0a;
  --status-error-text: #fecaca;
  --status-error-border: #7f1d1d;

  /* Success */
  --status-success: #34d399;
  --status-success-bg: #064e3b;
  --status-success-text: #a7f3d0;

  /* Warning */
  --status-warning: #fbbf24;
  --status-warning-bg: #78350f;
  --status-warning-text: #fde68a;

  /* ===========================
   * CODE BLOCKS
   * =========================== */
  --code-bg: #334155;
  --code-border: #475569;
  --code-accent: #60a5fa;
  --code-text: #e2e8f0;

  /* ===========================
   * HIGHLIGHTS
   * =========================== */
  --highlight-yellow: #854d0e;
  --highlight-blue: #1e3a5f;

  /* ===========================
   * CODE SYNTAX COLORS (PHP highlight_string)
   * =========================== */
  --syntax-default: #e2e8f0;
  --syntax-keyword: #86efac;
  --syntax-string: #fca5a5;
  --syntax-comment: #fbbf24;
  --syntax-variable: #93c5fd;

  /* ===========================
   * SCROLLBAR
   * =========================== */
  --scrollbar-track: #1e293b;
  --scrollbar-thumb: #475569;
  --scrollbar-thumb-hover: #64748b;

  /* ===========================
   * SHADOWS
   * =========================== */
  --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.3);
  --shadow-md: 0 4px 6px rgba(0, 0, 0, 0.4);
  --shadow-container: 0 0 3px 3px rgba(96, 165, 250, 0.3);
  --shadow-error: 0 0 50px rgba(127, 29, 29, 0.5);
  --shadow-inset: inset 0 5px 5px rgba(0, 0, 0, 0.3), 0 1px 3px rgba(0, 0, 0, 0.4);
  --shadow-text-light: 0 1px 1px rgba(0, 0, 0, 0.3);

  /* ===========================
   * SPECIAL/LEGACY
   * =========================== */
  --table-bg: #334155;
  --nav-bg: #1e293b;
  --nav-border-accent: #60a5fa;
  --img-border-accent: #c084fc;
  --img-border-hover: #f87171;

  /* ===========================
   * HEADER/FOOTER
   * =========================== */
  --header-bg: #1e293b;
  --footer-bg: #1e293b;
}

/* Utility classes */
.text-emphasis {
  color: var(--text-primary);
  font-weight: 500;
}

.link-text {
  color: var(--link-default);
}

.text-warning {
  color: var(--status-error);
  font-weight: 500;
}

/* Additional dark mode utility classes */
.dark .text-slate-500 {
  color: var(--text-muted) !important;
}

.dark .text-slate-400 {
  color: var(--text-placeholder) !important;
}

.dark .text-slate-600 {
  color: var(--text-secondary) !important;
}

.dark .text-slate-700 {
  color: var(--text-primary) !important;
}

.dark .text-slate-800 {
  color: var(--text-primary) !important;
}

.dark .bg-slate-100 {
  background-color: var(--bg-surface-subtle) !important;
}

.dark .bg-slate-50 {
  background-color: var(--bg-surface-subtle) !important;
}

.dark .border-slate-200 {
  border-color: var(--border-default) !important;
}

.dark .divide-slate-100 > :not([hidden]) ~ :not([hidden]) {
  border-color: var(--border-default) !important;
}

/* Fix stats boxes text */
.dark .text-primary {
  color: var(--brand-primary) !important;
}

/* Fix gray background classes */
.dark .bg-gray-100 {
  background-color: var(--bg-surface-subtle) !important;
}

.dark .bg-gray-50 {
  background-color: var(--bg-surface-muted) !important;
}

.dark .bg-gray-200 {
  background-color: var(--bg-surface-elevated) !important;
}

/* Fix gray text classes */
.dark .text-gray-500 {
  color: var(--text-muted) !important;
}

.dark .text-gray-600 {
  color: var(--text-secondary) !important;
}

.dark .text-gray-700 {
  color: var(--text-primary) !important;
}

.dark .text-gray-800 {
  color: var(--text-primary) !important;
}

.dark .text-gray-900 {
  color: var(--text-primary) !important;
}

/* Fix gray border classes */
.dark .border-gray-100 {
  border-color: var(--border-subtle) !important;
}

.dark .border-gray-200 {
  border-color: var(--border-default) !important;
}

.dark .border-gray-300 {
  border-color: var(--border-strong) !important;
}

/* Fix blue background classes */
.dark .bg-blue-50 {
  background-color: rgba(30, 58, 95, 0.3) !important;
}

.dark .bg-blue-100 {
  background-color: rgba(30, 58, 95, 0.5) !important;
}

/* Fix blue text classes */
.dark .text-blue-500,
.dark .text-blue-600 {
  color: #60a5fa !important;
}

.dark .text-blue-700 {
  color: #93c5fd !important;
}

/* Fix green background classes */
.dark .bg-green-50 {
  background-color: rgba(6, 78, 59, 0.3) !important;
}

.dark .bg-green-100 {
  background-color: rgba(6, 78, 59, 0.5) !important;
}

/* Fix green text classes */
.dark .text-green-500,
.dark .text-green-600 {
  color: #34d399 !important;
}

/* Fix red text classes */
.dark .text-red-500,
.dark .text-red-600 {
  color: #f87171 !important;
}

/* Fix orange text classes */
.dark .text-orange-500 {
  color: #fb923c !important;
}

/* Fix white backgrounds to dark surfaces */
.dark .bg-white {
  background-color: var(--bg-surface) !important;
}

/* Links in content */
a {
  color: var(--link-default);
}

a:hover {
  color: var(--brand-primary-hover);
}

/* ===========================
 * SEMANTIC UTILITY CLASSES
 * =========================== */

/* Card/Container backgrounds */
.card {
  background-color: #1e293b;
}

.card-header {
  background-color: #0f172a;
}

.card-icon {
  background-color: #0f172a;
}

.card-hover:hover {
  background-color: #0f172a;
}

/* Container wrapper */
.container-bg {
  background-color: #0f172a;
}

/* Borders */
.border-card {
  border-color: #334155;
}

.border-subtle {
  border-color: #334155;
}

.divide-card > :not([hidden]) ~ :not([hidden]) {
  border-color: #334155;
}

/* Text colors */
.text-heading {
  color: #e2e8f0;
}

.text-body {
  color: #cbd5e1;
}

.text-body-secondary {
  color: #94a3b8;
}

.text-label {
  color: #94a3b8;
}

.text-input-value {
  color: #f1f5f9;
}

/* Form elements */
.form-input {
  background-color: var(--input-bg);
  border-color: var(--input-border);
  color: var(--input-text);
}

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

.form-select {
  background-color: var(--input-bg);
  border-color: var(--input-border);
  color: var(--input-text);
}

/* Status backgrounds */
.status-error-box {
  background-color: rgba(127, 29, 29, 0.3);
  border-color: #7f1d1d;
}

.status-error-text {
  color: #fca5a5;
}

.status-success-box {
  background-color: rgba(6, 78, 59, 0.3);
  border-color: #064e3b;
}

.status-success-text {
  color: #6ee7b7;
}

.status-warning-box {
  background-color: rgba(120, 53, 15, 0.3);
  border-color: #78350f;
}

.status-warning-text {
  color: #fcd34d;
}

.status-info-box {
  background-color: rgba(30, 58, 95, 0.3);
  border-color: #1e3a5f;
}

.status-info-text {
  color: #93c5fd;
}

/* VIP/Premium */
.vip-box {
  background: linear-gradient(to right, rgba(120, 53, 15, 0.2), rgba(120, 53, 15, 0.3));
  border-color: #78350f;
}

.vip-icon {
  background-color: rgba(120, 53, 15, 0.5);
  color: #fbbf24;
}

.vip-text {
  color: #fbbf24;
}

.vip-text-bold {
  color: #fcd34d;
}

/* Badges */
.badge-default {
  background-color: #0f172a;
  color: #94a3b8;
}

.badge-primary {
  background-color: rgba(96, 165, 250, 0.2);
  color: #60a5fa;
}

.badge-success {
  background-color: rgba(6, 78, 59, 0.5);
  color: #34d399;
}

.badge-error {
  background-color: rgba(127, 29, 29, 0.5);
  color: #f87171;
}

/* Action buttons (small) */
.action-delete {
  color: #f87171;
  border-color: #7f1d1d;
}

.action-delete:hover {
  color: #fca5a5;
  background-color: rgba(127, 29, 29, 0.2);
}

/* Header navigation */
.nav-item {
  background-color: #334155;
  color: #e2e8f0;
}

.nav-item:hover {
  background-color: #475569;
}

.nav-item-primary {
  background-color: rgba(96, 165, 250, 0.2);
  color: #60a5fa;
}

.nav-item-primary:hover {
  background-color: rgba(96, 165, 250, 0.3);
}

/* Pagination */
.page-link {
  background-color: #0f172a;
  color: #e2e8f0;
}

.page-link:hover {
  background-color: #3b82f6;
  color: #ffffff;
}

/* ===========================
 * PHP highlight_string() overrides
 * =========================== */
.d code {
  color: var(--syntax-default) !important;
}

.d code span {
  /* Reset all inline color styles */
  color: inherit;
}

/* Default/base text - #000000 */
.d span[style*="color: #000000"],
.d span[style*="color:#000000"] {
  color: var(--syntax-default) !important;
}

/* Keywords (if, else, echo, etc.) - #007700 */
.d span[style*="color: #007700"],
.d span[style*="color:#007700"] {
  color: var(--syntax-keyword) !important;
}

/* Strings - #DD0000 */
.d span[style*="color: #DD0000"],
.d span[style*="color:#DD0000"],
.d span[style*="color: #dd0000"],
.d span[style*="color:#dd0000"] {
  color: var(--syntax-string) !important;
}

/* Comments - #FF8000 */
.d span[style*="color: #FF8000"],
.d span[style*="color:#FF8000"],
.d span[style*="color: #ff8000"],
.d span[style*="color:#ff8000"] {
  color: var(--syntax-comment) !important;
}

/* Variables, PHP tags - #0000BB */
.d span[style*="color: #0000BB"],
.d span[style*="color:#0000BB"],
.d span[style*="color: #0000bb"],
.d span[style*="color:#0000bb"] {
  color: var(--syntax-variable) !important;
}