/*
 * HealthLink master palette
 * Source: the official HealthLink logo and native client experience.
 * Loaded after page-level styles so every first-party screen shares one theme.
 */
:root {
  --healthlink-blue: #0757f8;
  --healthlink-blue-dark: #053e8b;
  --healthlink-navy: #082b6f;
  --healthlink-cyan: #12bce1;
  --healthlink-cyan-soft: #9cecf5;
  --healthlink-purple: #563cf5;
  --healthlink-ink: #092864;
  --healthlink-muted: #5d7192;
  --healthlink-canvas: #eef7ff;
  --healthlink-surface: #ffffff;
  --healthlink-soft: #f1f6fd;
  --healthlink-line: #d9eaf8;
  --healthlink-line-strong: #b8d7f0;
  --healthlink-shadow: 0 18px 42px rgba(8, 43, 111, 0.13);
  --healthlink-font: Inter, ui-sans-serif, system-ui, -apple-system,
    BlinkMacSystemFont, "Segoe UI", Arial, sans-serif;

  /* Existing project tokens now resolve to the HealthLink palette. */
  --navy: var(--healthlink-navy);
  --navy2: #053e8b;
  --blue: var(--healthlink-blue);
  --cyan: var(--healthlink-cyan);
  --violet: var(--healthlink-purple);
  --orange: var(--healthlink-cyan);
  --ink: var(--healthlink-ink);
  --muted: var(--healthlink-muted);
  --line: var(--healthlink-line);
  --line2: var(--healthlink-line-strong);
  --soft: var(--healthlink-canvas);
  --soft2: var(--healthlink-soft);
  --white: #fff;
  --shadow: var(--healthlink-shadow);
  --soft-shadow: 0 10px 26px rgba(8, 43, 111, 0.09);

  --color-bg: var(--healthlink-canvas);
  --color-sang: var(--healthlink-muted);
  --color-gunian: var(--healthlink-cyan);
  --color-3: var(--healthlink-cyan);
  --color-grey: var(--healthlink-muted);
  --color-green: var(--healthlink-purple);
  --color-green2: var(--healthlink-purple);
  --color-blue: var(--healthlink-blue);
  --color-white: #fff;
  --color-black: var(--healthlink-ink);
  --color-dark-blue: var(--healthlink-blue-dark);
  --color-date: var(--healthlink-cyan);
  --color-seemore: var(--healthlink-blue);

  /* Bootstrap variables used throughout the project. */
  --bs-body-font-family: var(--healthlink-font);
  --bs-body-color: var(--healthlink-ink);
  --bs-body-bg: var(--healthlink-canvas);
  --bs-primary: var(--healthlink-blue);
  --bs-primary-rgb: 7, 87, 248;
  --bs-secondary: var(--healthlink-purple);
  --bs-secondary-rgb: 86, 60, 245;
  --bs-link-color: var(--healthlink-blue);
  --bs-link-hover-color: var(--healthlink-blue-dark);
  --bs-border-color: var(--healthlink-line);
}

html,
body {
  font-family: var(--healthlink-font) !important;
  color: var(--healthlink-ink);
  background-color: var(--healthlink-canvas);
}

body {
  background-image:
    radial-gradient(circle at 12% 8%, rgba(86, 60, 245, 0.08), transparent 30%),
    radial-gradient(circle at 88% 6%, rgba(18, 188, 225, 0.12), transparent 32%);
  background-attachment: fixed;
}

h1,
h2,
h3,
h4,
h5,
h6,
.title,
.page-title,
.section-title {
  color: var(--healthlink-navy);
}

a {
  color: var(--healthlink-blue);
}

a:hover,
a:focus {
  color: var(--healthlink-blue-dark);
}

::selection {
  color: #fff;
  background: var(--healthlink-purple);
}

.card,
.modal-content,
.dropdown-menu,
.offcanvas,
.list-group-item,
.accordion-item,
.table,
.content-card,
.form-container,
.login-container,
.register-container {
  --bs-card-color: var(--healthlink-ink);
  --bs-card-bg: rgba(255, 255, 255, 0.97);
  --bs-table-color: var(--healthlink-ink);
  --bs-table-bg: transparent;
  color: var(--healthlink-ink);
  border-color: var(--healthlink-line);
}

.card,
.modal-content,
.offcanvas,
.content-card,
.form-container,
.login-container,
.register-container {
  background-color: rgba(255, 255, 255, 0.97);
  box-shadow: var(--healthlink-shadow);
}

.text-primary {
  color: var(--healthlink-blue) !important;
}

.text-secondary,
.text-muted {
  color: var(--healthlink-muted) !important;
}

.bg-primary,
.btn-primary,
.btn-blue,
.btn-color-3,
button.primary,
input[type="submit"] {
  color: #fff !important;
  border-color: var(--healthlink-blue) !important;
  background-color: var(--healthlink-blue) !important;
  background-image: linear-gradient(135deg, var(--healthlink-purple), var(--healthlink-blue) 56%, var(--healthlink-cyan)) !important;
}

.btn-primary:hover,
.btn-primary:focus,
.btn-blue:hover,
.btn-color-3:hover,
button.primary:hover,
input[type="submit"]:hover {
  border-color: var(--healthlink-blue-dark) !important;
  background-color: var(--healthlink-blue-dark) !important;
  box-shadow: 0 10px 22px rgba(7, 87, 248, 0.22);
}

.btn-outline-primary {
  color: var(--healthlink-blue) !important;
  border-color: var(--healthlink-blue) !important;
}

.btn-outline-primary:hover,
.btn-outline-primary:focus {
  color: #fff !important;
  background-color: var(--healthlink-blue) !important;
}

.badge.bg-primary,
.nav-pills .nav-link.active,
.page-item.active .page-link,
.progress-bar {
  color: #fff !important;
  border-color: var(--healthlink-blue) !important;
  background-color: var(--healthlink-blue) !important;
}

.nav-link,
.page-link {
  color: var(--healthlink-blue);
}

.nav-link:hover,
.nav-link:focus,
.page-link:hover,
.page-link:focus {
  color: var(--healthlink-blue-dark);
}

.form-control,
.form-select,
input,
select,
textarea {
  color: var(--healthlink-ink);
  border-color: var(--healthlink-line-strong);
  background-color: #fff;
}

.form-control:focus,
.form-select:focus,
input:focus,
select:focus,
textarea:focus {
  border-color: var(--healthlink-cyan) !important;
  box-shadow: 0 0 0 0.2rem rgba(18, 188, 225, 0.18) !important;
  outline-color: var(--healthlink-cyan);
}

.table > :not(caption) > * > * {
  color: var(--healthlink-ink);
  border-bottom-color: var(--healthlink-line);
}

.table thead th,
.table-dark,
thead.table-dark {
  color: #fff;
  border-color: var(--healthlink-blue-dark);
  background-color: var(--healthlink-navy);
}

hr,
.dropdown-divider,
.border,
.border-top,
.border-end,
.border-bottom,
.border-start {
  border-color: var(--healthlink-line) !important;
}

@media print {
  html,
  body {
    color: #000;
    background: #fff !important;
  }

  .card,
  .modal-content,
  .content-card,
  .form-container {
    box-shadow: none !important;
  }
}