/*
 * HealthLink/YAKAP master palette
 * Source: assets/images/yakap_logo.png.
 * Loaded after page-level styles so every first-party screen shares one theme.
 */
:root {
  --healthlink-blue: #1679bd;
  --healthlink-blue-dark: #0a477a;
  --healthlink-navy: #092d50;
  --healthlink-cyan: #53a6da;
  --healthlink-cyan-soft: #d8efff;
  --healthlink-purple: #ffb800;
  --healthlink-gold: #ffbd12;
  --healthlink-gold-light: #ffe18a;
  --healthlink-ink: #172f45;
  --healthlink-muted: #526a7d;
  --healthlink-canvas: #fff9e9;
  --healthlink-surface: #ffffff;
  --healthlink-soft: #fff1c8;
  --healthlink-line: #ead9ab;
  --healthlink-line-strong: #d9bd75;
  --healthlink-shadow: 0 18px 42px rgba(70, 51, 18, 0.11);
  --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: var(--healthlink-blue-dark);
  --blue: var(--healthlink-blue);
  --cyan: var(--healthlink-cyan);
  --violet: var(--healthlink-purple);
  --orange: var(--healthlink-gold);
  --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(70, 51, 18, 0.08);

  --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: #08764d;
  --color-green2: #08764d;
  --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-gold);
  --bs-primary-rgb: 255, 189, 18;
  --bs-secondary: var(--healthlink-blue);
  --bs-secondary-rgb: 22, 121, 189;
  --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(255, 189, 18, 0.20), transparent 34%),
    radial-gradient(circle at 88% 6%, rgba(255, 217, 102, 0.14), 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: var(--healthlink-navy);
  background: var(--healthlink-gold-light);
}

.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);
}

.card:not(.border-success):not(.border-danger),
.content-card,
.form-container {
  border-top-color: #eecb67;
}

.card-header:not(.bg-danger):not(.bg-success) {
  border-bottom-color: var(--healthlink-line);
  background: linear-gradient(90deg, #fff8df, #fffdf8);
}

.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: var(--healthlink-navy) !important;
  border-color: #df9f00 !important;
  background-color: var(--healthlink-gold) !important;
  background-image: linear-gradient(180deg, var(--healthlink-gold-light), var(--healthlink-gold)) !important;
}

.btn-primary:hover,
.btn-primary:focus,
.btn-blue:hover,
.btn-color-3:hover,
button.primary:hover,
input[type="submit"]:hover {
  border-color: #b98100 !important;
  background-color: #e6a800 !important;
  box-shadow: 0 10px 22px rgba(184, 129, 0, 0.22);
}

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

.btn-outline-primary:hover,
.btn-outline-primary:focus {
  color: var(--healthlink-navy) !important;
  background-color: var(--healthlink-gold-light) !important;
}

.badge.bg-primary,
.nav-pills .nav-link.active,
.page-item.active .page-link,
.progress-bar {
  color: var(--healthlink-navy) !important;
  border-color: #dfa000 !important;
  background-color: var(--healthlink-gold) !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-blue) !important;
  box-shadow: 0 0 0 0.2rem rgba(22, 121, 189, 0.18) !important;
  outline-color: var(--healthlink-blue);
}

.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;
  }
}