/* ==== Blue Theme Overrides (#0101fe) ====
   Load AFTER your main CSS (and after style.blue.css if used).
   This file normalizes hover, active, focus, and background states.
*/

:root {
  --primary-50:  #f5f7ff;
  --primary-100: #ebefff;
  --primary-200: #d6dcff;
  --primary-300: #b8c0ff;
  --primary-400: #99a0ff;
  --primary-500: #4d55ff; /* mid accent */
  --primary-600: #0101fe; /* main */
  --primary-700: #0000c8; /* hover */
  --primary-800: #0000a0; /* active */
  --primary-900: #00007a;
  --ring-focus: rgba(1, 1, 254, 0.35);
}

/* ---- Links ---- */
a {
  color: var(--primary-600);
}
a:hover,
a:focus {
  color: var(--primary-700);
}
a:active {
  color: var(--primary-800);
}

/* ---- Generic Buttons ---- */
.btn,
.button,
[class*="btn-"],
[class*="button-"] {
  --btn-bg: var(--primary-600);
  --btn-border: var(--primary-600);
  --btn-text: #ffffff;
}
.btn-primary,
.button-primary,
.btn[class*="primary"],
.button[class*="primary"] {
  background-color: var(--btn-bg) !important;
  border-color: var(--btn-border) !important;
  color: var(--btn-text) !important;
}
.btn-primary:hover,
.button-primary:hover,
.btn[class*="primary"]:hover,
.button[class*='primary']:hover {
  background-color: var(--primary-700) !important;
  border-color: var(--primary-700) !important;
  color: #ffffff !important;
}
.btn-primary:active,
.button-primary:active,
.btn[class*="primary"]:active,
.button[class*='primary']:active,
.btn-primary.active,
.button-primary.active {
  background-color: var(--primary-800) !important;
  border-color: var(--primary-800) !important;
  color: #ffffff !important;
}
.btn-primary:focus,
.button-primary:focus,
.btn[class*="primary"]:focus,
.button[class*='primary']:focus {
  outline: 0;
  box-shadow: 0 0 0 0.25rem var(--ring-focus) !important;
  border-color: var(--primary-700) !important;
}

/* Disabled keeps readable contrast */
.btn-primary:disabled,
.button-primary:disabled,
.btn[class*="primary"]:disabled,
.button[class*='primary']:disabled {
  background-color: var(--primary-300) !important;
  border-color: var(--primary-300) !important;
  color: #ffffff !important;
}

/* ---- Outline/ghost variants (if present) ---- */
.btn-outline-primary,
.button-outline-primary {
  background-color: transparent !important;
  color: var(--primary-600) !important;
  border-color: var(--primary-600) !important;
}
.btn-outline-primary:hover,
.button-outline-primary:hover {
  background-color: var(--primary-50) !important;
  color: var(--primary-700) !important;
  border-color: var(--primary-700) !important;
}
.btn-outline-primary:active,
.button-outline-primary:active {
  background-color: var(--primary-200) !important;
  color: var(--primary-800) !important;
  border-color: var(--primary-800) !important;
}
.btn-outline-primary:focus,
.button-outline-primary:focus {
  box-shadow: 0 0 0 0.25rem var(--ring-focus) !important;
  border-color: var(--primary-700) !important;
}

/* ---- Tag/Link components found in CSS ---- */
.link-hover:hover,
.link-press:active,
.link-tag:hover {
  color: var(--primary-700) !important;
  border-color: var(--primary-700) !important;
}
.link-tag,
.link-tag:focus,
.link-tag:active {
  color: var(--primary-600) !important;
  border-color: var(--primary-600) !important;
}

/* ---- Navigation ---- */
.nav-link:hover,
.nav-link:focus {
  color: var(--primary-700) !important;
}
.nav-link.active,
.nav-item.active > .nav-link {
  color: var(--primary-800) !important;
  border-color: var(--primary-800) !important;
}

/* ---- Forms ---- */
input:focus,
textarea:focus,
select:focus,
.form-control:focus {
  outline: 0;
  border-color: var(--primary-700) !important;
  box-shadow: 0 0 0 0.25rem var(--ring-focus) !important;
}
input[type="checkbox"]:focus,
input[type="radio"]:focus {
  box-shadow: 0 0 0 0.2rem var(--ring-focus) !important;
  border-color: var(--primary-700) !important;
}

/* ---- Background helpers ---- */
.bg-primary,
.bg-accent,
[class*="bg-primary"] {
  background-color: var(--primary-600) !important;
  color: #ffffff;
}
.bg-primary-soft,
.bg-soft,
.bg-light-primary {
  background-color: var(--primary-50) !important;
}
.bg-gradient-primary {
  background-image: linear-gradient(135deg, var(--primary-400), var(--primary-600)) !important;
  color: #ffffff;
}

/* ---- Borders / dividers ---- */
.border-primary,
[class*="border-primary"] {
  border-color: var(--primary-600) !important;
}

/* ---- Icons / SVGs ---- */
svg.stroke-primary { stroke: var(--primary-600) !important; }
svg.fill-primary { fill: var(--primary-600) !important; }

/* ---- Misc components spotted in the original CSS ---- */
.page .btn:not(:disabled):not(.disabled):active:focus,
.page .btn:not(:disabled):not(.disabled).active:focus,
.btn:active:focus,
.btn.active:focus {
  box-shadow: 0 0 0 0.25rem var(--ring-focus) !important;
  border-color: var(--primary-800) !important;
}
.icon-box:hover,
.box-counter:hover {
  border-color: var(--primary-700) !important;
}