/*
  Global design tokens for easy theme customization.
  Edit this file to rebrand the app colors in one place.
*/

:root,
[data-bs-theme="light"] {
  /* Brand palette */
  --brand-primary: #2275fc;
  --brand-secondary: #5d7186;
  --brand-success: #5cc184;
  --brand-warning: #f0934e;
  --brand-info: #45c5cd;
  --brand-danger: #e96767;

  /* App surfaces */
  --app-page-bg: #f9f9fc;
  --app-dropdown-bg: #ffffff;
  --app-dropdown-header-bg: #f8f9fa;
  --app-dropdown-border: #eaedf1;
  --app-sidebar-bg: #152238;
  --app-condensed-scrollbar-thumb: rgba(168, 178, 181, 0.45);
  --app-sidebar-item-color: #c7d7ff;
  --app-sidebar-item-hover-color: #ffffff;
  --app-sidebar-active-bg: rgba(47, 118, 255, 0.18);
  --app-sidebar-active-border: #2f76ff;
  --app-sidebar-active-color: #ffffff;
  --app-sidebar-sub-active-bg: rgba(47, 118, 255, 0.14);
  --app-sidebar-hover-bg: transparent;

  /* Topbar status icon accents (light) */
  --app-status-icon-muted: #6b7280;
  --app-status-bell-active: #f4b400;
  --app-status-box-active: #f97316;
  --app-status-money-active: #16a34a;

  /* Delete modal accents */
  --app-danger-soft: #ff6b6b;
  --app-danger-soft-2: #ff8787;
  --app-danger-soft-hover: #fa5252;

  /* Primary action buttons */
  --app-action-btn-color: var(--brand-primary);
  --app-action-btn-hover-color: #fff;
  --app-action-btn-min-width: 112px;
  --app-action-btn-min-height: 40px;
  --app-action-btn-padding-y: 0.5rem;
  --app-action-btn-padding-x: 1rem;
  --app-action-btn-radius: 6px;
  --app-action-btn-font-weight: 400;
  --app-action-btn-gap: 0.45rem;
}

[data-bs-theme="dark"] {
  /* Keep same brand colors by default in dark mode */
  --brand-primary: #2275fc;
  --brand-secondary: #8391a2;
  --brand-success: #5cc184;
  --brand-warning: #f0934e;
  --brand-info: #45c5cd;
  --brand-danger: #e96767;

  --app-page-bg: #141a21;
  --app-dropdown-bg: #1c252e;
  --app-dropdown-header-bg: #2f3943;
  --app-dropdown-border: #2f3944;
  --app-sidebar-bg: #152238;
  --app-condensed-scrollbar-thumb: rgba(168, 178, 181, 0.45);
  --app-sidebar-item-color: #c7d7ff;
  --app-sidebar-item-hover-color: #ffffff;
  --app-sidebar-active-bg: rgba(47, 118, 255, 0.18);
  --app-sidebar-active-border: #2f76ff;
  --app-sidebar-active-color: #ffffff;
  --app-sidebar-sub-active-bg: rgba(47, 118, 255, 0.14);
  --app-sidebar-hover-bg: transparent;

  --app-status-icon-muted: #cbd5e1;
  --app-status-bell-active: #facc15;
  --app-status-box-active: #fb923c;
  --app-status-money-active: #4ade80;

  --app-danger-soft: #ff6b6b;
  --app-danger-soft-2: #ff8787;
  --app-danger-soft-hover: #fa5252;

  --app-action-btn-color: #aab8c5;
  --app-action-btn-hover-color: #fff;
}

/* Bootstrap variable remap */
:root {
  --bs-primary: var(--brand-primary);
  --bs-secondary: var(--brand-secondary);
  --bs-success: var(--brand-success);
  --bs-warning: var(--brand-warning);
  --bs-info: var(--brand-info);
  --bs-danger: var(--brand-danger);
  --bs-primary-rgb: 34, 117, 252;
  --bs-secondary-rgb: 93, 113, 134;
  --bs-focus-ring-color: rgba(34, 117, 252, 0.25);
  --bs-primary-bg-subtle: rgba(34, 117, 252, 0.15);
  --bs-primary-border-subtle: rgba(34, 117, 252, 0.35);
  --bs-secondary-bg-subtle: rgba(34, 117, 252, 0.12);
  --bs-secondary-border-subtle: rgba(34, 117, 252, 0.28);
  --brand-primary-hover: #1d66dd;
  --brand-primary-active: #195bc7;
  --bs-pagination-color: var(--brand-primary);
  --bs-pagination-hover-color: var(--brand-primary-hover);
  --bs-pagination-focus-color: var(--brand-primary-hover);
  --bs-pagination-active-bg: var(--brand-primary);
  --bs-pagination-active-border-color: var(--brand-primary);
  --bs-pagination-focus-box-shadow: 0 0 0 0.25rem rgba(34, 117, 252, 0.25);
}

/* Compatibility overrides for precompiled theme buttons */
.btn-primary {
  --bs-btn-bg: var(--brand-primary) !important;
  --bs-btn-border-color: var(--brand-primary) !important;
  --bs-btn-hover-bg: var(--brand-primary-hover) !important;
  --bs-btn-hover-border-color: var(--brand-primary-hover) !important;
  --bs-btn-active-bg: var(--brand-primary-active) !important;
  --bs-btn-active-border-color: var(--brand-primary-active) !important;
  --bs-btn-disabled-bg: var(--brand-primary) !important;
  --bs-btn-disabled-border-color: var(--brand-primary) !important;
}

.btn-secondary {
  --bs-btn-bg: var(--bs-secondary) !important;
  --bs-btn-border-color: var(--bs-secondary) !important;
  --bs-btn-hover-bg: #4f6275 !important;
  --bs-btn-hover-border-color: #4f6275 !important;
  --bs-btn-active-bg: #455667 !important;
  --bs-btn-active-border-color: #455667 !important;
  --bs-btn-disabled-bg: var(--bs-secondary) !important;
  --bs-btn-disabled-border-color: var(--bs-secondary) !important;
}

.btn-outline-primary {
  --bs-btn-color: var(--brand-primary) !important;
  --bs-btn-border-color: var(--brand-primary) !important;
  --bs-btn-hover-bg: var(--brand-primary) !important;
  --bs-btn-hover-border-color: var(--brand-primary) !important;
  --bs-btn-active-bg: var(--brand-primary-active) !important;
  --bs-btn-active-border-color: var(--brand-primary-active) !important;
  --bs-btn-disabled-color: var(--brand-primary) !important;
  --bs-btn-disabled-border-color: var(--brand-primary) !important;
}

.btn-primary i,
.btn-outline-primary i {
  color: currentColor !important;
}

[data-bs-theme="dark"] .btn-outline-primary {
  --bs-btn-color: #aab8c5 !important;
  --bs-btn-hover-color: #fff !important;
  --bs-btn-active-color: #fff !important;
  --bs-btn-disabled-color: #aab8c5 !important;
}

/* Standard primary action button. Use this on main CTAs across the app. */
.app-action-btn,
.dashboard-action-btn {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: var(--app-action-btn-gap) !important;
  min-width: var(--app-action-btn-min-width);
  min-height: var(--app-action-btn-min-height);
  padding: var(--app-action-btn-padding-y) var(--app-action-btn-padding-x) !important;
  border-radius: var(--app-action-btn-radius) !important;
  font-weight: var(--app-action-btn-font-weight) !important;
  line-height: 1.2 !important;
  white-space: nowrap;
}

.app-action-btn.btn-outline-primary,
.dashboard-action-btn.btn-outline-primary {
  color: var(--app-action-btn-color) !important;
}

.app-action-btn.btn-outline-primary i,
.dashboard-action-btn.btn-outline-primary i {
  color: var(--app-action-btn-color) !important;
}

.app-action-btn.btn-outline-primary:hover,
.app-action-btn.btn-outline-primary:focus,
.app-action-btn.btn-outline-primary:active,
.app-action-btn.btn-outline-primary.active,
.dashboard-action-btn.btn-outline-primary:hover,
.dashboard-action-btn.btn-outline-primary:focus,
.dashboard-action-btn.btn-outline-primary:active,
.dashboard-action-btn.btn-outline-primary.active {
  color: var(--app-action-btn-hover-color) !important;
}

.app-action-btn.btn-outline-primary:hover i,
.app-action-btn.btn-outline-primary:focus i,
.app-action-btn.btn-outline-primary:active i,
.app-action-btn.btn-outline-primary.active i,
.dashboard-action-btn.btn-outline-primary:hover i,
.dashboard-action-btn.btn-outline-primary:focus i,
.dashboard-action-btn.btn-outline-primary:active i,
.dashboard-action-btn.btn-outline-primary.active i {
  color: var(--app-action-btn-hover-color) !important;
}

.btn-outline-secondary {
  --bs-btn-color: var(--brand-primary) !important;
  --bs-btn-border-color: var(--brand-primary) !important;
  --bs-btn-hover-bg: var(--brand-primary) !important;
  --bs-btn-hover-border-color: var(--brand-primary) !important;
  --bs-btn-active-bg: var(--brand-primary-active) !important;
  --bs-btn-active-border-color: var(--brand-primary-active) !important;
  --bs-btn-disabled-color: var(--brand-primary) !important;
  --bs-btn-disabled-border-color: var(--brand-primary) !important;
}

.btn-soft-primary {
  color: var(--brand-primary) !important;
  background-color: rgba(34, 117, 252, 0.14) !important;
  border-color: rgba(34, 117, 252, 0.2) !important;
}

.btn-soft-primary:hover,
.btn-soft-primary:focus,
.btn-soft-primary:active {
  color: #fff !important;
  background-color: var(--brand-primary) !important;
  border-color: var(--brand-primary) !important;
}

/* Common helpers frequently hardcoded in legacy templates */
.text-primary {
  color: var(--brand-primary) !important;
}

.text-secondary {
  color: var(--bs-secondary-color) !important;
}

.bg-primary {
  background-color: rgba(var(--bs-primary-rgb), var(--bs-bg-opacity, 1)) !important;
}

.bg-secondary-subtle {
  background-color: rgba(34, 117, 252, 0.12) !important;
}

.badge.bg-secondary-subtle.text-secondary {
  color: var(--brand-primary) !important;
}

.form-check-input:checked {
  background-color: var(--brand-primary) !important;
  border-color: var(--brand-primary) !important;
}

.form-check-input:focus {
  border-color: var(--bs-border-color) !important;
  box-shadow: none !important;
}

/* Global focus cleanup: remove Bootstrap blue rings while keeping active/hover states. */
.btn:focus,
.btn:focus-visible,
.btn-check:focus + .btn,
.btn-check:checked + .btn:focus,
.btn-check:active + .btn:focus,
.btn.active:focus,
.btn.show:focus,
.btn:active:focus,
.show > .btn.dropdown-toggle:focus,
.dropdown-toggle:focus,
.dropdown-item:focus,
.form-control:focus,
.form-select:focus,
.form-check-input:focus,
.page-link:focus,
.paginate_button:focus,
[role="button"]:focus,
[tabindex]:focus {
  box-shadow: none !important;
  outline: 0 !important;
}

.form-control:focus,
.form-select:focus {
  border-color: var(--bs-border-color) !important;
}

.dropdown-item:focus {
  background-color: var(--bs-tertiary-bg) !important;
  color: var(--bs-body-color) !important;
}

/* Pills/tabs */
.nav-pills .nav-link {
  color: var(--bs-secondary-color);
}

.nav-pills .nav-link.active,
.nav-pills .show > .nav-link {
  background-color: var(--brand-primary) !important;
  color: #fff !important;
}

/* Pagination compatibility (Bootstrap + DataTables) */
.pagination .page-item.active .page-link,
.pagination .page-link.active {
  background-color: var(--brand-primary) !important;
  border-color: var(--brand-primary) !important;
  color: #fff !important;
}

.pagination .page-link {
  color: var(--brand-primary) !important;
}

.pagination .page-link:focus {
  box-shadow: none !important;
  outline: 0 !important;
}

.dataTables_wrapper .dataTables_paginate .paginate_button.current,
.dataTables_wrapper .dataTables_paginate .paginate_button.current:hover {
  background: var(--brand-primary) !important;
  border-color: var(--brand-primary) !important;
  color: #fff !important;
}