/**
 * Theme Definitions
 * File: themes.css
 * Defines CSS custom properties for light/dark modes and color schemes.
 * Format: data-theme="{mode}-{scheme}" (e.g. "light-blue", "dark-purple")
 */

/* =============================================================================
   LIGHT MODE BASE
   ============================================================================= */

[data-theme^="light"] {
	/* Backgrounds */
	--bg-body: #f8f9fa;
	--bg-surface: #ffffff;
	--bg-surface-secondary: #f8f9fa;
	--bg-surface-hover: #e9ecef;
	--bg-overlay: rgba(0,0,0,0.5);

	/* Text */
	--text-primary: #495057;
	--text-heading: #212529;
	--text-secondary: #6c757d;
	--text-muted: #adb5bd;
	--text-on-accent: #ffffff;

	/* Borders */
	--border-color: #dee2e6;
	--border-light: #e9ecef;
	--border-subtle: #f0f0f0;

	/* Shadows */
	--shadow-sm: 0 2px 10px rgba(0,0,0,0.05);
	--shadow-md: 0 4px 15px rgba(0,0,0,0.1);
	--shadow-lg: 0 8px 30px rgba(0,0,0,0.12);
	--shadow-navbar: 0 2px 10px rgba(0,0,0,0.1);

	/* Forms */
	--input-bg: #ffffff;
	--input-border: #ced4da;
	--input-text: #212529;
	--input-placeholder: #6c757d;

	/* Misc */
	--code-bg: #f1f3f5;
	--notification-unread: #e8f4fd;
	--notification-unread-hover: #d6ecf8;
	--notification-page-unread: #f8fbff;
	--stat-bg: rgba(0, 123, 255, 0.05);
	--stat-bg-hover: rgba(0, 123, 255, 0.1);
	--table-stripe: rgba(0,0,0,0.02);
	--table-header-bg: #f8f9fa;
	--dropdown-bg: #ffffff;
	--dropdown-mobile-bg: rgba(255,255,255,0.95);
	--footer-bg: #f8f9fa;
	--autocomplete-bg: #ffffff;
}

/* =============================================================================
   DARK MODE BASE
   ============================================================================= */

[data-theme^="dark"] {
	/* Backgrounds */
	--bg-body: #1a1d21;
	--bg-surface: #2b2f35;
	--bg-surface-secondary: #23272b;
	--bg-surface-hover: #383d44;
	--bg-overlay: rgba(0,0,0,0.7);

	/* Text */
	--text-primary: #dee2e6;
	--text-heading: #f8f9fa;
	--text-secondary: #adb5bd;
	--text-muted: #6c757d;
	--text-on-accent: #ffffff;

	/* Borders */
	--border-color: #495057;
	--border-light: #3a3f44;
	--border-subtle: #343a40;

	/* Shadows */
	--shadow-sm: 0 2px 10px rgba(0,0,0,0.2);
	--shadow-md: 0 4px 15px rgba(0,0,0,0.3);
	--shadow-lg: 0 8px 30px rgba(0,0,0,0.4);
	--shadow-navbar: 0 2px 10px rgba(0,0,0,0.3);

	/* Forms */
	--input-bg: #23272b;
	--input-border: #495057;
	--input-text: #dee2e6;
	--input-placeholder: #6c757d;

	/* Misc */
	--code-bg: #23272b;
	--notification-unread: #1e3a4f;
	--notification-unread-hover: #254a63;
	--notification-page-unread: #1e2a3a;
	--stat-bg: rgba(255,255,255,0.05);
	--stat-bg-hover: rgba(255,255,255,0.1);
	--table-stripe: rgba(255,255,255,0.03);
	--table-header-bg: #23272b;
	--dropdown-bg: #2b2f35;
	--dropdown-mobile-bg: rgba(43,47,53,0.98);
	--footer-bg: #23272b;
	--autocomplete-bg: #2b2f35;
}

/* =============================================================================
   COLOR SCHEME: BLUE (Default - matches current site)
   ============================================================================= */

[data-theme$="-blue"] {
	--accent: #2a5298;
	--accent-hover: #244a89;
	--accent-light: rgba(42, 82, 152, 0.25);
	--navbar-gradient-start: #1e3c72;
	--navbar-gradient-end: #2a5298;
	--navbar-gradient-start-hover: #1a3463;
	--navbar-gradient-end-hover: #244a89;
	--accent-stat: #007bff;
}

/* =============================================================================
   COLOR SCHEME: GREEN
   ============================================================================= */

[data-theme$="-green"] {
	--accent: #2e7d32;
	--accent-hover: #266b29;
	--accent-light: rgba(46, 125, 50, 0.25);
	--navbar-gradient-start: #1b5e20;
	--navbar-gradient-end: #2e7d32;
	--navbar-gradient-start-hover: #154d19;
	--navbar-gradient-end-hover: #266b29;
	--accent-stat: #2e7d32;
}

/* =============================================================================
   COLOR SCHEME: RED
   ============================================================================= */

[data-theme$="-red"] {
	--accent: #b91c1c;
	--accent-hover: #a11818;
	--accent-light: rgba(185, 28, 28, 0.25);
	--navbar-gradient-start: #7f1d1d;
	--navbar-gradient-end: #b91c1c;
	--navbar-gradient-start-hover: #6b1919;
	--navbar-gradient-end-hover: #a11818;
	--accent-stat: #b91c1c;
}

/* =============================================================================
   COLOR SCHEME: PURPLE
   ============================================================================= */

[data-theme$="-purple"] {
	--accent: #7b1fa2;
	--accent-hover: #6a1b8a;
	--accent-light: rgba(123, 31, 162, 0.25);
	--navbar-gradient-start: #4a148c;
	--navbar-gradient-end: #7b1fa2;
	--navbar-gradient-start-hover: #3d1175;
	--navbar-gradient-end-hover: #6a1b8a;
	--accent-stat: #7b1fa2;
}

/* =============================================================================
   DARK MODE — BOOTSTRAP COMPONENT OVERRIDES
   ============================================================================= */

[data-theme^="dark"] .card {
	background-color: var(--bg-surface);
	color: var(--text-primary);
}

[data-theme^="dark"] .modal-content {
	background-color: var(--bg-surface);
	color: var(--text-primary);
	border-color: var(--border-color);
}

[data-theme^="dark"] .form-control,
[data-theme^="dark"] .form-select {
	background-color: var(--input-bg);
	border-color: var(--input-border);
	color: var(--input-text);
}

[data-theme^="dark"] .form-control::placeholder {
	color: var(--input-placeholder);
}

[data-theme^="dark"] .form-control:disabled,
[data-theme^="dark"] .form-select:disabled,
[data-theme^="dark"] .form-control[readonly] {
	background-color: var(--bg-surface-secondary);
	color: var(--text-secondary);
}

[data-theme^="dark"] .dropdown-menu {
	background-color: var(--dropdown-bg);
	border-color: var(--border-color);
}

[data-theme^="dark"] .dropdown-item {
	color: var(--text-primary);
}

[data-theme^="dark"] .dropdown-item:hover,
[data-theme^="dark"] .dropdown-item:focus {
	background: linear-gradient(135deg, var(--navbar-gradient-start) 0%, var(--navbar-gradient-end) 100%);
	color: var(--text-on-accent);
}

[data-theme^="dark"] .dropdown-divider {
	border-color: var(--border-color);
}

[data-theme^="dark"] .table {
	color: var(--text-primary);
	--bs-table-bg: var(--bg-surface);
	--bs-table-striped-bg: var(--table-stripe);
	--bs-table-hover-bg: var(--bg-surface-hover);
	border-color: var(--border-color);
}

[data-theme^="dark"] .table th {
	background-color: var(--table-header-bg);
	color: var(--text-primary);
	border-color: var(--border-color);
}

[data-theme^="dark"] .table td {
	border-color: var(--border-color);
	color: var(--text-primary);
}

[data-theme^="dark"] #ticketViewContent {
	color: var(--text-primary);
}

[data-theme^="dark"] #ticketViewContent .table {
	--bs-table-color: var(--text-primary);
}

[data-theme^="dark"] .bg-light {
	background-color: var(--bg-surface-secondary) !important;
}

[data-theme^="dark"] .bg-white {
	background-color: var(--bg-surface) !important;
}

[data-theme^="dark"] .text-dark {
	color: var(--text-heading) !important;
}

[data-theme^="dark"] .text-muted {
	color: var(--text-secondary) !important;
}

[data-theme^="dark"] .border {
	border-color: var(--border-color) !important;
}

[data-theme^="dark"] .border-bottom {
	border-color: var(--border-color) !important;
}

[data-theme^="dark"] .border-top {
	border-color: var(--border-color) !important;
}

[data-theme^="dark"] .list-group-item {
	background-color: var(--bg-surface);
	color: var(--text-primary);
	border-color: var(--border-color);
}

[data-theme^="dark"] .alert-info {
	background-color: var(--notification-unread);
	border-color: var(--border-color);
	color: var(--text-primary);
}

[data-theme^="dark"] .alert-danger {
	background-color: #3b1c1c;
	border-color: #5c2a2a;
	color: #f5c6cb;
}

[data-theme^="dark"] .alert-success {
	background-color: #1c3b1c;
	border-color: #2a5c2a;
	color: #c6f5c6;
}

[data-theme^="dark"] .alert-warning {
	background-color: #3b351c;
	border-color: #5c4f2a;
	color: #f5ebc6;
}

[data-theme^="dark"] .nav-tabs {
	border-color: var(--border-color);
}

[data-theme^="dark"] .nav-tabs .nav-link {
	color: var(--text-secondary);
}

[data-theme^="dark"] .nav-tabs .nav-link.active {
	background-color: var(--bg-surface);
	color: var(--accent);
	border-color: var(--border-color) var(--border-color) var(--bg-surface);
}

[data-theme^="dark"] .nav-tabs .nav-link:hover {
	border-color: var(--border-light) var(--border-light) var(--border-color);
}

[data-theme^="dark"] .breadcrumb {
	color: var(--text-secondary);
}

[data-theme^="dark"] .breadcrumb-item a {
	color: var(--accent);
}

[data-theme^="dark"] .breadcrumb-item.active {
	color: var(--text-muted);
}

[data-theme^="dark"] .btn-outline-secondary {
	color: var(--text-secondary);
	border-color: var(--border-color);
}

[data-theme^="dark"] .btn-outline-secondary:hover {
	background-color: var(--bg-surface-hover);
	color: var(--text-primary);
	border-color: var(--text-secondary);
}

[data-theme^="dark"] .btn-light {
	background-color: var(--bg-surface-hover);
	border-color: var(--border-color);
	color: var(--text-primary);
}

[data-theme^="dark"] .btn-close {
	filter: invert(1) grayscale(100%) brightness(200%);
}

[data-theme^="dark"] .page-link {
	background-color: var(--bg-surface);
	border-color: var(--border-color);
	color: var(--accent);
}

[data-theme^="dark"] .page-item.active .page-link {
	background-color: var(--accent);
	border-color: var(--accent);
	color: var(--text-on-accent);
}

[data-theme^="dark"] .page-item.disabled .page-link {
	background-color: var(--bg-surface-secondary);
	border-color: var(--border-color);
	color: var(--text-muted);
}

[data-theme^="dark"] .input-group-text {
	background-color: var(--bg-surface-secondary);
	border-color: var(--input-border);
	color: var(--text-primary);
}

[data-theme^="dark"] hr {
	border-color: var(--border-color);
	opacity: 0.5;
}

[data-theme^="dark"] pre {
	color: var(--text-primary);
}

/* =============================================================================
   SMOOTH THEME TRANSITION
   ============================================================================= */

html.theme-transition,
html.theme-transition *,
html.theme-transition *::before,
html.theme-transition *::after {
	transition: background-color 0.3s ease,
				color 0.3s ease,
				border-color 0.3s ease,
				box-shadow 0.3s ease !important;
}