/* ============================================================
   CodersFarm brand theme — cyan → purple, overrides OneUI's
   default blue accent app-wide. Loaded last so it wins the
   cascade over oneui.min.css without needing !important.
   ============================================================ */

:root {
  --cf-cyan: #22d3ee;
  --cf-purple: #8b5cf6;
  --cf-purple-dark: #7c3aed;
  --cf-gradient: linear-gradient(135deg, var(--cf-cyan), var(--cf-purple));

  --bs-primary: var(--cf-purple);
  --bs-primary-rgb: 139, 92, 246;
  --bs-link-color: var(--cf-purple);
  --bs-link-hover-color: var(--cf-purple-dark);
}

/* ── Links ─────────────────────────────────────────────────── */
a { color: var(--cf-purple); }
a:hover { color: var(--cf-purple-dark); }

/* ── Buttons ───────────────────────────────────────────────── */
.btn-primary {
  color: #fff;
  background: var(--cf-gradient);
  border-color: var(--cf-purple);
}
.btn-primary:hover {
  color: #fff;
  background: linear-gradient(135deg, #0ea5c4, var(--cf-purple-dark));
  border-color: var(--cf-purple-dark);
  filter: brightness(1.02);
}
.btn-check:focus + .btn-primary,
.btn-primary:focus {
  color: #fff;
  background: var(--cf-gradient);
  border-color: var(--cf-purple-dark);
  box-shadow: 0 0 0 0.25rem rgba(139, 92, 246, 0.3);
}
.btn-check:checked + .btn-primary,
.btn-check:active + .btn-primary,
.btn-primary:active,
.btn-primary.active,
.show > .btn-primary.dropdown-toggle {
  color: #fff;
  background: linear-gradient(135deg, #0ea5c4, var(--cf-purple-dark));
  border-color: var(--cf-purple-dark);
}
.btn-primary:disabled,
.btn-primary.disabled {
  background: var(--cf-gradient);
  border-color: var(--cf-purple);
  opacity: 0.55;
}

.btn-outline-primary {
  color: var(--cf-purple);
  border-color: var(--cf-purple);
}
.btn-outline-primary:hover,
.btn-check:checked + .btn-outline-primary,
.btn-outline-primary:active,
.btn-outline-primary.active {
  color: #fff;
  background: var(--cf-gradient);
  border-color: var(--cf-purple);
}
.btn-outline-primary:focus,
.btn-check:focus + .btn-outline-primary {
  box-shadow: 0 0 0 0.25rem rgba(139, 92, 246, 0.3);
}

.btn-alt-primary {
  color: var(--cf-purple-dark);
  background-color: rgba(139, 92, 246, 0.12);
  border-color: transparent;
}
.btn-alt-primary:hover,
.btn-alt-primary:focus,
.btn-alt-primary:active {
  color: #fff;
  background: var(--cf-gradient);
  border-color: transparent;
}

/* ── Utility color classes ────────────────────────────────── */
.bg-primary { background-color: var(--cf-purple) !important; }
.text-primary { color: var(--cf-purple) !important; }
.border-primary { border-color: var(--cf-purple) !important; }
.badge.bg-primary { background-color: var(--cf-purple) !important; }

/* Extra badge colors — used for things like service-type tags that need to
   stay visually distinct from status badges (Active=green, Expired=red,
   Pending=amber, Cancelled=black, Transferred=cyan) elsewhere on the same
   row, without borrowing any of those same colors for an unrelated label. */
.badge.bg-teal   { background-color: #0d9488 !important; color: #fff !important; }
.badge.bg-indigo { background-color: #4f46e5 !important; color: #fff !important; }
.badge.bg-pink   { background-color: #db2777 !important; color: #fff !important; }
.badge.bg-slate  { background-color: #475569 !important; color: #fff !important; }

/* ── Form focus states ────────────────────────────────────── */
.form-control:focus,
.form-select:focus {
  border-color: var(--cf-purple);
  box-shadow: 0 0 0 0.25rem rgba(139, 92, 246, 0.2);
}
input[type="checkbox"],
input[type="radio"] {
  accent-color: var(--cf-purple);
}
.form-check-input:checked {
  background-color: var(--cf-purple);
  border-color: var(--cf-purple);
}
.form-check-input:focus {
  border-color: var(--cf-purple);
  box-shadow: 0 0 0 0.25rem rgba(139, 92, 246, 0.2);
}

/* ── Pagination ───────────────────────────────────────────── */
.page-item.active .page-link {
  background-color: var(--cf-purple) !important;
  border-color: var(--cf-purple) !important;
  /* OneUI's own .page-item.active .page-link rule sets a blue text color —
     without forcing this, the active page number stays blue on our purple
     background, which reads as barely-visible/"not showing". !important is
     deliberate here: this is a narrow, one-off override of a hardcoded
     third-party default that has already resisted a plain specificity fix. */
  color: #fff !important;
}
.page-link {
  color: var(--cf-purple);
}
.page-link:hover {
  color: var(--cf-purple-dark);
}

/* ── Sidebar active nav accent ───────────────────────────── */
.sidebar-dark #sidebar .nav-main-link.active {
  position: relative;
  background: linear-gradient(90deg, rgba(139, 92, 246, 0.22), transparent);
}
.sidebar-dark #sidebar .nav-main-link.active::before {
  content: '';
  position: absolute;
  left: 0; top: 0; bottom: 0;
  width: 3px;
  background: var(--cf-gradient);
  border-radius: 0 3px 3px 0;
}
.sidebar-dark #sidebar .nav-main-link.active > .nav-main-link-icon {
  color: var(--cf-cyan);
}

/* ── Misc brand touches ───────────────────────────────────── */
::selection {
  background: rgba(139, 92, 246, 0.25);
}
.spinner-border.text-primary,
.spinner-grow.text-primary {
  color: var(--cf-purple) !important;
}

/* ── Mobile safety net ───────────────────────────────────────
   Any single too-wide element (a table, a long unbroken string in a flex
   row, a fixed-width block) can otherwise drag the *whole page* sideways
   on a phone, clipping headings/cards at the left edge. Individual
   offenders should still be fixed at the source, but this stops one
   missed spot from breaking the entire page layout. */
@media (max-width: 767.98px) {
  html, body {
    overflow-x: hidden;
    max-width: 100%;
  }
}

/* ── Money hide/show toggle ───────────────────────────────────
   Shared, project-wide version of the pattern first built for Work List:
   wrap a sensitive amount as <span class="money-mask">•••</span><span
   class="money-real">₹1,234.00</span>, then toggle a "show-financials"
   class on any ancestor (a "Show Financials" button per page) to reveal
   it. Money stays masked by default on every fresh page load. */
.money-real { display: none; }
.money-mask { display: inline; color: #cbd5e1; letter-spacing: 1px; cursor: default; }
.show-financials .money-real { display: inline; }
.show-financials .money-mask { display: none; }