/* Theme CSS - Light and Dark Mode Variables */

:root {
  /* Light Theme Colors (Default) */
  --bg-primary: #ffffff;
  --bg-secondary: #f8f9fa;
  --bg-tertiary: #ecf0f1;
  --bg-card: #ffffff;
  --bg-hover: #f8f9fa;
  --bg-navbar: #ffffff;

  /* Text Colors - Visual Hierarchy */
  --text-primary: #2c3e50;
  --text-secondary: #7f8c8d;
  --text-muted: #95a5a6;
  --text-inverse: #ffffff;
  --text-label: #7f8c8d;
  --text-value: #2c3e50;
  --text-currency: #27ae60;
  --text-currency-negative: #e74c3c;

  /* Link Colors */
  --link-color: #2980b9;
  --link-hover: #1a5276;
  --link-visited: #8e44ad;

  /* Border Colors */
  --border-primary: #dee2e6;
  --border-secondary: #ecf0f1;
  --border-focus: #27ae60;

  /* Primary Brand Colors */
  --color-primary: #27ae60;
  --color-primary-hover: #229954;
  --color-primary-light: #d4edda;
  --color-primary-dark: #155724;

  /* Status Colors */
  --color-success: #28a745;
  --color-success-bg: #d4edda;
  --color-success-text: #155724;

  --color-info: #17a2b8;
  --color-info-bg: #d1ecf1;
  --color-info-text: #0c5460;

  --color-warning: #ffc107;
  --color-warning-bg: #fff3cd;
  --color-warning-text: #856404;

  --color-danger: #dc3545;
  --color-danger-bg: #f8d7da;
  --color-danger-text: #721c24;

  --color-secondary: #6c757d;
  --color-secondary-bg: #e2e3e5;
  --color-secondary-text: #383d41;

  /* Shadow */
  --shadow-sm: 0 1px 3px rgba(0, 0, 0, 0.1);
  --shadow-md: 0 2px 6px rgba(0, 0, 0, 0.1);
  --shadow-lg: 0 4px 12px rgba(0, 0, 0, 0.1);
  --shadow-focus: 0 0 0 3px rgba(39, 174, 96, 0.25);
  --shadow-hover: 0 8px 24px rgba(0, 0, 0, 0.15), 0 0 0 1px rgba(0, 0, 0, 0.05);

  /* Transition */
  --transition: all 0.3s ease;
}

/* Dark Theme */
[data-theme="dark"] {
  /* Dark Background Colors */
  --bg-primary: #0d1117;
  --bg-secondary: #161b22;
  --bg-tertiary: #1c2128;
  --bg-card: #21262d;
  --bg-hover: #30363d;
  --bg-navbar: #161b22;

  /* Text Colors - Visual Hierarchy */
  --text-primary: #e6edf3;
  --text-secondary: #b1bac4;
  --text-muted: #8b949e;
  --text-inverse: #0d1117;
  --text-label: #8b949e;
  --text-value: #e6edf3;
  --text-currency: #7ee787;
  --text-currency-negative: #ffa198;

  /* Link Colors - Desaturated for readability */
  --link-color: #93c5fd;
  --link-hover: #bfdbfe;
  --link-visited: #c4b5fd;

  /* Border Colors */
  --border-primary: #30363d;
  --border-secondary: #21262d;
  --border-focus: #58a6ff;

  /* Primary Brand Colors - Bright for contrast */
  --color-primary: #58a6ff;
  --color-primary-hover: #79c0ff;
  --color-primary-light: rgba(88, 166, 255, 0.15);
  --color-primary-dark: #1f6feb;

  /* Status Colors - Vibrant for dark mode */
  --color-success: #3fb950;
  --color-success-bg: rgba(63, 185, 80, 0.15);
  --color-success-text: #3fb950;

  --color-info: #79c0ff;
  --color-info-bg: rgba(121, 192, 255, 0.15);
  --color-info-text: #79c0ff;

  --color-warning: #d29922;
  --color-warning-bg: rgba(210, 153, 34, 0.15);
  --color-warning-text: #d29922;

  --color-danger: #f85149;
  --color-danger-bg: rgba(248, 81, 73, 0.15);
  --color-danger-text: #f85149;

  --color-secondary: #8b949e;
  --color-secondary-bg: rgba(139, 148, 158, 0.15);
  --color-secondary-text: #8b949e;

  /* Shadow - Subtle for dark mode */
  --shadow-sm: 0 1px 3px rgba(0, 0, 0, 0.4);
  --shadow-md: 0 2px 6px rgba(0, 0, 0, 0.4);
  --shadow-lg: 0 4px 12px rgba(0, 0, 0, 0.4);
  --shadow-focus: 0 0 0 3px rgba(88, 166, 255, 0.4);
  --shadow-hover: 0 8px 24px rgba(0, 0, 0, 0.5), 0 0 0 1px rgba(139, 148, 158, 0.1);
}

/* Global Styles Using CSS Variables */
body {
  background-color: var(--bg-primary);
  color: var(--text-primary);
  transition: var(--transition);
}

/* Theme Toggle Button Styles */
.theme-toggle {
  background: transparent;
  border: 1px solid var(--border-primary);
  border-radius: 5px;
  padding: 6px 10px;
  cursor: pointer;
  color: var(--text-primary);
  font-size: 16px;
  transition: var(--transition);
  display: flex;
  align-items: center;
  gap: 5px;
}

.theme-toggle:hover {
  background: var(--bg-hover);
  border-color: var(--color-primary);
}

.theme-toggle .icon {
  font-size: 18px;
}

/* Override navbar styles */
.navbar {
  background: var(--bg-navbar);
  border-bottom: 1px solid var(--border-primary);
  box-shadow: var(--shadow-sm);
}

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

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

/* Cards */
.card, .form-card, .stat-card, .summary-card {
  background: var(--bg-card);
  border: 1px solid var(--border-primary);
  box-shadow: var(--shadow-sm);
  color: var(--text-primary);
}

/* Tables */
table {
  background: var(--bg-card);
  color: var(--text-primary);
}

table th {
  background: var(--bg-secondary);
  color: var(--text-primary);
  border-color: var(--border-primary);
}

table td {
  border-color: var(--border-primary);
}

table tbody tr:hover {
  background: var(--bg-hover);
}

/* Forms */
.form-input,
.form-select,
.form-textarea,
input[type="text"],
input[type="email"],
input[type="number"],
input[type="date"],
input[type="datetime-local"],
select,
textarea {
  background: var(--bg-card);
  color: var(--text-primary);
  border: 1px solid var(--border-primary);
}

.form-input:focus,
.form-select:focus,
.form-textarea:focus,
input:focus,
select:focus,
textarea:focus {
  border-color: var(--color-primary);
  box-shadow: var(--shadow-focus);
  background: var(--bg-card);
}

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

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

/* Buttons */
.btn {
  transition: var(--transition);
}

.btn-primary {
  background: var(--color-primary);
  border-color: var(--color-primary);
  color: var(--text-inverse);
}

.btn-primary:hover {
  background: var(--color-primary-hover);
  border-color: var(--color-primary-hover);
  box-shadow: var(--shadow-md);
}

.btn-secondary {
  background: var(--bg-tertiary);
  border: 1px solid var(--border-primary);
  color: var(--text-primary);
}

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

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

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

/* Status Badges */
.status-badge {
  font-weight: 600;
  transition: var(--transition);
}

.status-badge.active {
  background: var(--color-success-bg);
  color: var(--color-success-text);
}

.status-badge.paid_in_full,
.status-badge.settled {
  background: var(--color-info-bg);
  color: var(--color-info-text);
}

.status-badge.disputed {
  background: var(--color-warning-bg);
  color: var(--color-warning-text);
}

.status-badge.legal,
.status-badge.bankruptcy {
  background: var(--color-danger-bg);
  color: var(--color-danger-text);
}

.status-badge.closed,
.status-badge.deceased,
.status-badge.returned {
  background: var(--color-secondary-bg);
  color: var(--color-secondary-text);
}

/* Alert Messages */
.alert {
  border: 1px solid;
  transition: var(--transition);
}

.alert.success {
  background: var(--color-success-bg);
  color: var(--color-success-text);
  border-color: var(--color-success);
}

.alert.danger, .alert.error {
  background: var(--color-danger-bg);
  color: var(--color-danger-text);
  border-color: var(--color-danger);
}

.alert.warning {
  background: var(--color-warning-bg);
  color: var(--color-warning-text);
  border-color: var(--color-warning);
}

.alert.info {
  background: var(--color-info-bg);
  color: var(--color-info-text);
  border-color: var(--color-info);
}

/* Toolbar */
.toolbar {
  background: var(--bg-secondary);
  border: 1px solid var(--border-primary);
}

/* Pagination */
.pagination a {
  background: var(--bg-card);
  color: var(--text-primary);
  border: 1px solid var(--border-primary);
}

.pagination a:hover {
  background: var(--bg-hover);
  border-color: var(--color-primary);
}

.pagination a.active {
  background: var(--color-primary);
  color: var(--text-inverse);
  border-color: var(--color-primary);
}

/* Section Headers */
.section-header {
  background: var(--bg-secondary);
  border-bottom: 2px solid var(--border-primary);
  color: var(--text-primary);
}

/* Meta Items */
.meta-item .meta-label {
  color: var(--text-muted);
}

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

/* Override inline styles for dark mode */
[data-theme="dark"] .container {
  background: var(--bg-primary) !important;
}

[data-theme="dark"] .content {
  background: var(--bg-primary) !important;
}

/* Smooth transitions for theme switching */
* {
  transition: background-color 0.3s ease, color 0.3s ease, border-color 0.3s ease;
}

/* ======================== */
/* Link Styling             */
/* ======================== */
a {
  color: var(--link-color);
  text-decoration: none;
  transition: color 0.2s ease;
}

a:hover {
  color: var(--link-hover);
  text-decoration: underline;
}

a:visited {
  color: var(--link-visited);
}

/* Links inside buttons should not use link color */
.btn a,
a.btn {
  color: inherit;
  text-decoration: none;
}

.btn a:hover,
a.btn:hover {
  text-decoration: none;
}

/* ======================== */
/* Card Hover Effects       */
/* ======================== */
.card,
.form-card,
.stat-card,
.summary-card,
.kanban-card,
.note-item,
.task-item,
.document-item,
.info-card {
  transition: box-shadow 0.2s ease, transform 0.2s ease;
}

.card:hover,
.form-card:hover,
.stat-card:hover,
.summary-card:hover,
.kanban-card:hover,
.note-item:hover,
.task-item:hover,
.document-item:hover,
.info-card:hover {
  box-shadow: var(--shadow-hover);
  transform: translateY(-2px);
}

/* ======================== */
/* Visual Hierarchy Classes */
/* ======================== */
/* Labels - muted, smaller visual weight */
.info-label,
.meta-label,
.field-label,
.detail-label {
  color: var(--text-label);
  font-size: 13px;
  font-weight: 500;
}

/* Values - primary, clear readability */
.info-value,
.meta-value,
.field-value,
.detail-value {
  color: var(--text-value);
  font-weight: 600;
}

/* Currency/Money - accent color for quick scanning */
.currency,
.balance,
.amount,
.money {
  color: var(--text-currency);
  font-weight: 600;
}

.currency-negative,
.balance-negative,
.amount-negative {
  color: var(--text-currency-negative);
  font-weight: 600;
}