/* EMSIEN — Custom styles (Tailwind override) */

:root[data-theme="dark"] {
  --bg-primary: #0f1117;
  --bg-primary-rgb: 15, 17, 23;
  --surface: #16181f;
  --surface-rgb: 22, 24, 31;
  --surface2: #1e2130;
  --surface2-rgb: 30, 33, 48;
  --border-color: #2a2d3e;
  --border-rgb: 42, 45, 62;
  --text-primary: #e8eaf0;
  --text-primary-rgb: 232, 234, 240;
  --text-secondary: #c5cad3;
  --text-secondary-rgb: 197, 202, 211;
  --text-muted: #6b7280;
  --text-muted-rgb: 107, 114, 128;
  --accent: #e8a045;
  --accent-rgb: 232, 160, 69;
  --accent-hover: #d4903a;
  --accent-blue: #3d8ef8;
  --accent-blue-rgb: 61, 142, 248;
  --green: #2ecc87;
  --green-rgb: 46, 204, 135;
  --red: #e05c5c;
  --red-rgb: 224, 92, 92;
  --amber: #f59e0b;
  --amber-rgb: 245, 158, 11;

  --chart-text: #e8eaf0;
  --chart-tick: #9ca3af;
  --chart-grid: rgba(107, 114, 128, 0.22);
  --chart-tooltip-bg: #11131a;
  --chart-tooltip-border: #2a2d3e;
  --page-enter-duration: 0.25s;
  --page-enter-ease: ease;
  --page-enter-start-opacity: 0;
  --page-enter-start-y: 6px;
}

:root[data-theme="light"] {
  --bg-primary: #f4f7fc;
  --bg-primary-rgb: 244, 247, 252;
  --surface: #ffffff;
  --surface-rgb: 255, 255, 255;
  --surface2: #edf2fb;
  --surface2-rgb: 237, 242, 251;
  --border-color: #d0d8e8;
  --border-rgb: 208, 216, 232;
  --text-primary: #1c2333;
  --text-primary-rgb: 28, 35, 51;
  --text-secondary: #4f5f7c;
  --text-secondary-rgb: 79, 95, 124;
  --text-muted: #5e697e;
  --text-muted-rgb: 94, 105, 126;
  --accent: #e8a045;
  --accent-rgb: 232, 160, 69;
  --accent-hover: #d4903a;
  --accent-blue: #2f78df;
  --accent-blue-rgb: 47, 120, 223;
  --green: #1ea86a;
  --green-rgb: 30, 168, 106;
  --red: #d64a4a;
  --red-rgb: 214, 74, 74;
  --amber: #c98300;
  --amber-rgb: 201, 131, 0;

  --chart-text: #1c2333;
  --chart-tick: #5e697e;
  --chart-grid: rgba(146, 159, 185, 0.34);
  --chart-tooltip-bg: #ffffff;
  --chart-tooltip-border: #d0d8e8;
  --page-enter-duration: 0.18s;
  --page-enter-ease: cubic-bezier(0.22, 0.61, 0.36, 1);
  --page-enter-start-opacity: 0.95;
  --page-enter-start-y: 2px;
}

/* Scrollbar */
::-webkit-scrollbar { width: 5px; height: 5px; }
::-webkit-scrollbar-track { background: var(--bg-primary); }
::-webkit-scrollbar-thumb { background: var(--border-color); border-radius: 3px; }
::-webkit-scrollbar-thumb:hover { background: var(--accent); }

/* Page enter animation */
.page-enter {
  animation: pageEnter var(--page-enter-duration) var(--page-enter-ease) both;
}
@keyframes pageEnter {
  from { opacity: var(--page-enter-start-opacity); transform: translateY(var(--page-enter-start-y)); }
  to   { opacity: 1; transform: translateY(0); }
}

@media (prefers-reduced-motion: reduce) {
  .page-enter {
    animation: none !important;
  }
}

/* Числа — monospace */
.font-numeric { font-family: "DM Mono", monospace; }

/* HTMX loading индикатор */
.htmx-indicator { opacity: 0; transition: opacity 0.2s; }
.htmx-request .htmx-indicator { opacity: 1; }

/* Премахва стрелката на select в Safari */
select { -webkit-appearance: none; }

/* Focus ring за достъпност */
*:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}

/* Sidebar navigation polish */
.sidebar-nav {
  --sidebar-item-radius: 0.65rem;
  --sidebar-item-hover-bg: rgba(var(--surface2-rgb), 0.75);
  --sidebar-item-hover-color: var(--text-primary);
  --sidebar-item-active-bg: rgba(var(--accent-rgb), 0.13);
  --sidebar-item-active-color: var(--accent);
  --sidebar-subitem-active-bg: rgba(var(--accent-blue-rgb), 0.15);
  --sidebar-subitem-active-color: var(--accent-blue);
  --sidebar-focus-ring: rgba(var(--accent-rgb), 0.85);
}

.sidebar-nav-section {
  color: var(--text-muted);
  letter-spacing: 0.18em;
}

.sidebar-nav-item,
.sidebar-nav-subitem {
  align-items: center;
  border-radius: var(--sidebar-item-radius);
  color: var(--text-muted);
  text-decoration: none;
  transition: background-color 0.16s ease, color 0.16s ease, box-shadow 0.16s ease, transform 0.16s ease;
}

.sidebar-nav-item:hover {
  background: var(--sidebar-item-hover-bg);
  color: var(--sidebar-item-hover-color);
}

.sidebar-nav-subitem {
  border-radius: 0.6rem;
  font-size: 0.76rem;
}

.sidebar-nav-subitem:hover {
  background: rgba(var(--surface2-rgb), 0.56);
  color: var(--sidebar-item-hover-color);
}

.sidebar-nav-item[aria-current="page"] {
  background: var(--sidebar-item-active-bg);
  box-shadow: inset 2px 0 0 rgba(var(--accent-rgb), 0.95);
  color: var(--sidebar-item-active-color);
}

.sidebar-nav-subitem[aria-current="page"] {
  background: var(--sidebar-subitem-active-bg);
  box-shadow: inset 2px 0 0 rgba(var(--accent-blue-rgb), 0.95);
  color: var(--sidebar-subitem-active-color);
}

.sidebar-nav-item:focus-visible,
.sidebar-nav-subitem:focus-visible {
  outline: 2px solid var(--sidebar-focus-ring);
  outline-offset: 1px;
}

.sidebar-nav-icon {
  color: currentColor;
}

.sidebar-nav-label {
  line-height: 1.22;
}

.sidebar-nav-divider {
  border-color: rgba(var(--border-rgb), 0.9);
}

.sidebar-footer-chip {
  display: inline-flex;
  align-items: center;
  border: 1px solid rgba(var(--border-rgb), 0.85);
  border-radius: 999px;
  color: var(--text-secondary);
  line-height: 1;
  padding: 0.3rem 0.6rem;
}

@media (max-width: 767px) {
  .sidebar-nav-item,
  .sidebar-nav-subitem {
    min-height: 44px;
  }
}

/* Light theme compatibility layer for hardcoded Tailwind arbitrary colors */
:root[data-theme="light"] .bg-\[\#0f1117\] {
  background-color: var(--bg-primary) !important;
}

:root[data-theme="light"] .bg-\[\#16181f\] {
  background-color: var(--surface) !important;
}

:root[data-theme="light"] .bg-\[\#16181f\]\/95 {
  background-color: rgba(var(--surface-rgb), 0.95) !important;
}

:root[data-theme="light"] .bg-\[\#1e2130\] {
  background-color: var(--surface2) !important;
}

:root[data-theme="light"] .bg-\[\#2a2d3e\] {
  background-color: var(--border-color) !important;
}

:root[data-theme="light"] .bg-\[\#1e2130\]\/25 { background-color: rgba(var(--surface2-rgb), 0.25) !important; }
:root[data-theme="light"] .bg-\[\#1e2130\]\/30 { background-color: rgba(var(--surface2-rgb), 0.3) !important; }
:root[data-theme="light"] .bg-\[\#1e2130\]\/35 { background-color: rgba(var(--surface2-rgb), 0.35) !important; }
:root[data-theme="light"] .bg-\[\#1e2130\]\/40 { background-color: rgba(var(--surface2-rgb), 0.4) !important; }
:root[data-theme="light"] .bg-\[\#1e2130\]\/45 { background-color: rgba(var(--surface2-rgb), 0.45) !important; }
:root[data-theme="light"] .bg-\[\#1e2130\]\/50 { background-color: rgba(var(--surface2-rgb), 0.5) !important; }
:root[data-theme="light"] .bg-\[\#1e2130\]\/60 { background-color: rgba(var(--surface2-rgb), 0.6) !important; }
:root[data-theme="light"] .bg-\[\#1e2130\]\/70 { background-color: rgba(var(--surface2-rgb), 0.7) !important; }

:root[data-theme="light"] .border-\[\#2a2d3e\] {
  border-color: var(--border-color) !important;
}

:root[data-theme="light"] .divide-\[\#2a2d3e\] > :not([hidden]) ~ :not([hidden]) {
  border-color: var(--border-color) !important;
}

:root[data-theme="light"] .text-\[\#e8eaf0\] {
  color: var(--text-primary) !important;
}

:root[data-theme="light"] .text-\[\#d8dce4\],
:root[data-theme="light"] .text-\[\#c6cad4\],
:root[data-theme="light"] .text-\[\#c5cad3\],
:root[data-theme="light"] .text-\[\#9eb8e9\] {
  color: var(--text-secondary) !important;
}

:root[data-theme="light"] .text-\[\#9ca3af\],
:root[data-theme="light"] .text-\[\#9da5b4\],
:root[data-theme="light"] .text-\[\#9aa2b2\],
:root[data-theme="light"] .text-\[\#8d96a8\],
:root[data-theme="light"] .text-\[\#8a92a3\],
:root[data-theme="light"] .text-\[\#7f889a\],
:root[data-theme="light"] .text-\[\#6b7280\] {
  color: var(--text-muted) !important;
}

:root[data-theme="light"] .text-\[\#66a9ff\],
:root[data-theme="light"] .text-\[\#3d8ef8\] {
  color: var(--accent-blue) !important;
}

:root[data-theme="light"] .text-\[\#7de5b2\],
:root[data-theme="light"] .text-\[\#2ecc87\] {
  color: var(--green) !important;
}

:root[data-theme="light"] .text-\[\#f1aaaa\],
:root[data-theme="light"] .text-\[\#f3a8a8\],
:root[data-theme="light"] .text-\[\#f6c8c8\],
:root[data-theme="light"] .text-\[\#e05c5c\] {
  color: var(--red) !important;
}

:root[data-theme="light"] .text-\[\#f5b54b\],
:root[data-theme="light"] .text-\[\#ffd7a5\],
:root[data-theme="light"] .text-\[\#f59e0b\] {
  color: var(--amber) !important;
}

:root[data-theme="light"] .placeholder-\[\#6b7280\]::placeholder {
  color: rgba(var(--text-muted-rgb), 0.9) !important;
}

:root[data-theme="light"] .hover\:bg-\[\#1e2130\]:hover {
  background-color: var(--surface2) !important;
}

:root[data-theme="light"] .hover\:bg-\[\#1e2130\]\/40:hover { background-color: rgba(var(--surface2-rgb), 0.4) !important; }
:root[data-theme="light"] .hover\:bg-\[\#1e2130\]\/45:hover { background-color: rgba(var(--surface2-rgb), 0.45) !important; }
:root[data-theme="light"] .hover\:bg-\[\#1e2130\]\/60:hover { background-color: rgba(var(--surface2-rgb), 0.6) !important; }

:root[data-theme="light"] .hover\:text-\[\#e8eaf0\]:hover {
  color: var(--text-primary) !important;
}

:root[data-theme="light"] .from-\[\#16181f\] {
  --tw-gradient-from: var(--surface) var(--tw-gradient-from-position) !important;
  --tw-gradient-to: rgba(var(--surface-rgb), 0) var(--tw-gradient-to-position) !important;
}

:root[data-theme="light"] .via-\[\#16181f\] {
  --tw-gradient-to: rgba(var(--surface-rgb), 0) var(--tw-gradient-to-position) !important;
  --tw-gradient-stops: var(--tw-gradient-from), var(--surface) var(--tw-gradient-via-position), var(--tw-gradient-to) !important;
}

:root[data-theme="light"] .to-\[\#1e2130\]\/70 {
  --tw-gradient-to: rgba(var(--surface2-rgb), 0.7) var(--tw-gradient-to-position) !important;
}

/* Checkbox/radio contrast in light theme */
input[type="checkbox"],
input[type="radio"] {
  accent-color: var(--accent);
}

:root[data-theme="light"] input[type="checkbox"],
:root[data-theme="light"] input[type="radio"] {
  border-color: #95a3bd !important;
  background-color: #ffffff !important;
}

:root[data-theme="light"] input[type="checkbox"]:checked,
:root[data-theme="light"] input[type="radio"]:checked,
:root[data-theme="light"] input[type="checkbox"]:indeterminate {
  border-color: var(--accent) !important;
  background-color: var(--accent) !important;
}

:root[data-theme="light"] input[type="checkbox"]:focus-visible,
:root[data-theme="light"] input[type="radio"]:focus-visible {
  outline: 2px solid rgba(var(--accent-rgb), 0.6);
  outline-offset: 2px;
}