/* ==========================================================================
   MonerDaktar - Modern UI layer
   Loaded last, on top of Bootstrap 4 + the legacy sheets. Purely presentational:
   it restyles existing markup, it never changes behaviour hooks.
   ========================================================================== */

:root {
  --md-brand:        #007b59;
  --md-brand-dark:   #005f45;
  --md-brand-light:  #e6f4ef;
  --md-brand-ring:   rgba(0, 123, 89, .18);

  --md-ink:          #14202b;
  --md-ink-soft:     #4b5b68;
  /* Was #7c8b98, which is 3.5:1 on white and 3.25:1 on the page background --
     under the 4.5:1 WCAG AA needs for body text, and this token carries most
     of the secondary text on the site: card sub-lines, hints, empty states,
     table meta. Darkened to clear AA on both grounds while still reading as
     clearly secondary against --md-ink-soft. */
  --md-ink-muted:    #64727e;

  --md-bg:           #f4f7f6;
  --md-surface:      #ffffff;
  --md-line:         #e3e9ea;
  --md-line-strong:  #cfd8da;

  /* Both carry white text on buttons and chips. At #d64545 and #c77700 those
     came out at 4.38:1 and 3.46:1 -- the amber badly so. Nudged until white
     on them clears AA. */
  --md-danger:       #cc3f3f;
  --md-warning:      #a86500;
  --md-success:      #17835f;
  --md-info:         #1e6fb8;

  --md-r-sm: 8px;
  --md-r:    12px;
  --md-r-lg: 18px;

  --md-sh-sm: 0 1px 2px rgba(16, 34, 45, .06), 0 1px 3px rgba(16, 34, 45, .04);
  --md-sh:    0 2px 6px rgba(16, 34, 45, .05), 0 8px 24px rgba(16, 34, 45, .06);
  --md-sh-lg: 0 8px 20px rgba(16, 34, 45, .08), 0 24px 48px rgba(16, 34, 45, .10);

  --md-font: 'Inter', 'Hind Siliguri', 'Baloo Da 2', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
}

/* --------------------------------------------------------------- base ---- */

*, *::before, *::after { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; }

body {
  font-family: var(--md-font) !important;
  background-color: var(--md-bg) !important;
  color: var(--md-ink);
  font-size: 15px;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  overflow-x: hidden;
}

/* Sticky-footer shell, only on the layouts that opt in. The clinician
   dashboards run their own sidebar grid and must not be turned into a column. */
body.md-app {
  display: flex;
  flex-direction: column;
  min-height: 100vh;
  padding-left: 0 !important;
  padding-right: 0 !important;
}

/* Legacy layouts declare `* { font-family: 'Baloo Da 2' }` inline - reassert ours. */
body * { font-family: inherit; }
body .fa, body .fas, body .far, body .fab {
  font-family: 'FontAwesome', 'Font Awesome 5 Free', 'Font Awesome 5 Brands' !important;
}
body .material-icons { font-family: 'Material Icons' !important; }

h1, h2, h3, h4, h5, h6, .h1, .h2, .h3, .h4, .h5, .h6 {
  color: var(--md-ink);
  font-weight: 700;
  /* No letter-spacing: this site is almost entirely Bengali, and negative
     tracking pulls conjuncts/matras into each other so words render garbled. */
  line-height: 1.3;
}
h1, .h1 { font-size: 2rem; }
h2, .h2 { font-size: 1.6rem; }
h3, .h3 { font-size: 1.3rem; }
h4, .h4 { font-size: 1.12rem; }
h5, .h5 { font-size: 1rem; }
h6, .h6 { font-size: .9rem; }

a { color: var(--md-brand); text-decoration: none; transition: color .15s ease; }
a:hover { color: var(--md-brand-dark); text-decoration: none; }

hr { border-top: 1px solid var(--md-line); }

::selection { background: var(--md-brand-ring); }

a:focus-visible,
button:focus-visible,
.btn:focus-visible,
[tabindex]:focus-visible {
  outline: 2px solid var(--md-brand);
  outline-offset: 2px;
}

/* --------------------------------------------------------------- shell --- */

/* Sticky footer: the page body grows, the footer stays at the bottom. */
body.md-app > .container,
body.md-app > .parent_container,
body.md-app > .md-page { flex: 1 0 auto; }

.parent_container { min-height: 0; }

.md-page {
  flex: 1 0 auto;
  width: 100%;
  padding: 32px 0 56px;
}

.md-shell {
  width: 100%;
  max-width: 1180px;
  margin: 0 auto;
  padding: 0 20px;
}
.md-shell--narrow { max-width: 720px; }
.md-shell--mid    { max-width: 940px; }

.md-page-head {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  justify-content: space-between;
  gap: 12px 20px;
  margin-bottom: 24px;
}
.md-page-head__title { margin: 0; font-size: 1.65rem; }
.md-page-head__lead  { margin: 6px 0 0; color: var(--md-ink-soft); font-size: .95rem; }

.md-eyebrow {
  display: inline-block;
  font-size: .72rem;
  font-weight: 700;
  letter-spacing: .09em;
  text-transform: uppercase;
  color: var(--md-brand);
  margin-bottom: 6px;
}

/* --------------------------------------------------------------- navbar -- */

.navbar.navgrid,
nav.navbar.fixed-top {
  background: rgba(232, 235, 236, .92) !important;
  background-image: none !important;
  backdrop-filter: saturate(160%) blur(12px);
  -webkit-backdrop-filter: saturate(160%) blur(12px);
  border-bottom: 1px solid var(--md-line);
  box-shadow: 0 1px 2px rgba(16, 34, 45, .04);
  padding: .4rem 0;
  min-height: 64px;
}
.navbar .container-fluid { max-width: 1240px; margin: 0 auto; padding: 0 20px; position: relative; }

.navbar-brand { padding: 0; margin-right: 24px; display: flex; align-items: center; }
.navbar-brand img { max-height: 46px; width: auto !important; margin: 0 !important; }

.navbar .nav-item { min-width: 0 !important; text-align: left !important; }

.navbar .nav-link,
.navbar .nav-link.nav-link-color {
  color: var(--md-ink-soft) !important;
  font-weight: 600;
  font-size: .93rem;
  padding: .5rem .85rem !important;
  border-radius: 999px;
  transition: background-color .15s ease, color .15s ease;
  white-space: nowrap;
}
.navbar .nav-link:hover,
a.nav-link.nav-link-color:hover {
  background-color: var(--md-brand-light) !important;
  color: var(--md-brand-dark) !important;
}
.navbar li.nav-item.active { background-color: transparent !important; }
.navbar .nav-item.active > .nav-link {
  background-color: var(--md-brand-light) !important;
  color: var(--md-brand) !important;
}

.navbar .navbar-nav { margin-left: 0 !important; align-items: center; }

/* Desktop nav: brand pinned left, primary links true-centered, auth links pinned right. */
@media (min-width: 1200px) {
  .navbar .navbar-collapse { display: contents; }
  .navbar .navbar-nav.md-nav-main {
    display: flex;
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
  }
  .navbar .navbar-nav.md-nav-auth {
    display: flex;
    margin-left: auto !important;
  }
}

.navbar .rounded-circle {
  border: 2px solid var(--md-line);
  object-fit: cover;
  transition: border-color .15s ease;
}
.navbar .rounded-circle:hover { border-color: var(--md-brand); }

.navbar-toggler {
  border: 1px solid var(--md-line-strong);
  border-radius: var(--md-r-sm);
  padding: .35rem .6rem;
}
.navbar-dark .navbar-toggler-icon,
.navbar .navbar-toggler-icon {
  background-image: url("data:image/svg+xml;charset=utf8,%3Csvg viewBox='0 0 30 30' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath stroke='%2314202b' stroke-width='2.2' stroke-linecap='round' d='M4 7h22M4 15h22M4 23h22'/%3E%3C/svg%3E");
}

/* Nav call-to-action: reads as a button rather than one more link. */
.navbar .nav-link.md-nav-cta {
  background: var(--md-brand) !important;
  color: #fff !important;
  padding: .5rem 1.15rem !important;
  box-shadow: 0 1px 2px rgba(0, 123, 89, .3);
}
.navbar .nav-link.md-nav-cta:hover { background: var(--md-brand-dark) !important; color: #fff !important; }

.dropdown-menu,
.dropdown-menu.profiledrop {
  border: 1px solid var(--md-line);
  border-radius: var(--md-r);
  box-shadow: var(--md-sh);
  padding: 6px;
  margin-top: 10px;
  min-width: 210px;
}
.dropdown-item {
  border-radius: var(--md-r-sm);
  padding: .55rem .75rem;
  font-size: .9rem;
  font-weight: 500;
  color: var(--md-ink-soft);
}
.dropdown-item:hover, .dropdown-item:focus {
  background-color: var(--md-brand-light);
  color: var(--md-brand-dark);
}
.dropdown-divider { border-top-color: var(--md-line); }

@media (max-width: 1199.98px) {
  .navbar .navbar-collapse {
    background: #fff;
    border: 1px solid var(--md-line);
    border-radius: var(--md-r);
    box-shadow: var(--md-sh);
    margin-top: 10px;
    padding: 10px;
    max-height: 78vh;
    overflow-y: auto;
  }
  .navbar .nav-item { display: block !important; width: 100%; }
  .navbar .nav-link { border-radius: var(--md-r-sm); }
  .navbar .dropdown-menu { border: 0; box-shadow: none; margin-top: 0; padding-left: 10px; }
}

/* ---------------------------------------------------------------- cards -- */

.card {
  background: var(--md-surface);
  border: 1px solid var(--md-line);
  border-radius: var(--md-r-lg);
  box-shadow: var(--md-sh-sm);
  overflow: hidden;
}
.card-body { padding: 24px; }
.card-header {
  background: #fff;
  border-bottom: 1px solid var(--md-line);
  padding: 18px 24px;
  font-weight: 700;
  color: var(--md-ink);
}
.card-footer { background: #fbfcfc; border-top: 1px solid var(--md-line); padding: 16px 24px; }
.card-title { font-weight: 700; color: var(--md-ink); }

/* Legacy pages fake a card header with `.card-title > .alert`; make it read as one. */
.card > .card-title > .alert,
.card .card-title .alert-primary {
  background: linear-gradient(135deg, var(--md-brand) 0%, #01916a 100%) !important;
  border: 0 !important;
  border-radius: 0 !important;
  color: #fff !important;
  font-weight: 700;
  font-size: 1.05rem;
  margin: 0 !important;
  padding: 18px 24px !important;
}

.md-card { background: var(--md-surface); border: 1px solid var(--md-line); border-radius: var(--md-r-lg); box-shadow: var(--md-sh-sm); }
.md-card--pad { padding: 24px; }
.md-card--hover { transition: transform .18s ease, box-shadow .18s ease; }
.md-card--hover:hover { transform: translateY(-3px); box-shadow: var(--md-sh); }

.md-section-title {
  font-size: .78rem;
  font-weight: 700;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--md-ink-muted);
  margin: 0 0 14px;
}

/* ---------------------------------------------------------------- forms -- */

label, .control-label {
  display: block;
  font-weight: 600;
  font-size: .86rem;
  color: var(--md-ink);
  margin-bottom: 6px;
}
label i { color: var(--md-ink-muted); font-weight: 400; font-style: normal; font-size: .82rem; }

.form-group { margin-bottom: 18px; }

.form-control,
select.form-control,
textarea.form-control,
body select, body input, body textarea { border-radius: var(--md-r) !important; }

.form-control {
  height: auto;
  min-height: 46px;
  padding: .62rem .9rem;
  font-size: .95rem;
  color: var(--md-ink);
  background-color: #fff;
  border: 1px solid var(--md-line-strong);
  box-shadow: none;
  transition: border-color .15s ease, box-shadow .15s ease;
}
textarea.form-control { min-height: 110px; }
.form-control::placeholder { color: var(--md-ink-muted); }
.form-control:hover { border-color: #b6c2c5; }
.form-control:focus {
  border-color: var(--md-brand);
  box-shadow: 0 0 0 4px var(--md-brand-ring);
  background-color: #fff;
  color: var(--md-ink);
}
.form-control:disabled, .form-control[readonly] { background-color: #f2f5f5; color: var(--md-ink-soft); }

select.form-control:not([multiple]):not([size]) {
  appearance: none;
  -webkit-appearance: none;
  -moz-appearance: none;
  padding-right: 2.4rem;
  background-image: url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='%234b5b68' stroke-width='1.8' stroke-linecap='round'%3E%3Cpath d='M4 6.5 8 10.5 12 6.5'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right .85rem center;
  background-size: 16px 16px;
}

/* File inputs: the browser default is the ugliest control on these pages. */
input[type="file"] {
  display: block;
  width: 100%;
  padding: 10px 12px;
  font-size: .88rem;
  color: var(--md-ink-soft);
  background: #fbfcfc;
  border: 1px dashed var(--md-line-strong);
  border-radius: var(--md-r);
  cursor: pointer;
}
input[type="file"]:hover { border-color: var(--md-brand); background: var(--md-brand-light); }
input[type="file"]::file-selector-button {
  margin-right: 12px;
  padding: 7px 14px;
  font-weight: 600;
  font-size: .84rem;
  color: var(--md-brand-dark);
  background: var(--md-brand-light);
  border: 1px solid transparent;
  border-radius: 999px;
  cursor: pointer;
}
input[type="file"]::-webkit-file-upload-button {
  margin-right: 12px;
  padding: 7px 14px;
  font-weight: 600;
  font-size: .84rem;
  color: var(--md-brand-dark);
  background: var(--md-brand-light);
  border: 1px solid transparent;
  border-radius: 999px;
  cursor: pointer;
}

input[type="checkbox"], input[type="radio"] {
  width: 17px;
  height: 17px;
  accent-color: var(--md-brand);
  vertical-align: middle;
  cursor: pointer;
  border-radius: 4px !important;
}
input[type="radio"] { border-radius: 50% !important; }

.form-check, .checkbox { display: flex; align-items: center; gap: 9px; padding-left: 0; }
.form-check-input, .checkbox input[type="checkbox"] { position: static; margin: 0; flex: none; }
.form-check-label, .checkbox label {
  margin: 0;
  font-weight: 500;
  font-size: .9rem;
  color: var(--md-ink-soft);
  cursor: pointer;
}

/* A tappable option card built from a native radio/checkbox. */
.md-choice {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 12px 14px;
  border: 1px solid var(--md-line-strong);
  border-radius: var(--md-r);
  background: #fff;
  cursor: pointer;
  transition: border-color .15s ease, background-color .15s ease;
  margin: 0;
  font-weight: 500;
}
.md-choice:hover { border-color: var(--md-brand); background: var(--md-brand-light); }
.md-choice input { flex: none; }

.md-field-hint { display: block; margin-top: 6px; font-size: .8rem; color: var(--md-ink-muted); font-weight: 400; }

.mandetory, label.mandetory { display: inline; color: var(--md-danger); font-weight: 700; margin: 0 2px 0 0; }

.invalid-feedback, .invalid-feedback strong { font-size: .82rem; font-weight: 500; color: var(--md-danger); }
.is-invalid, .form-control.is-invalid { border-color: var(--md-danger); background-image: none; }
.form-control.is-invalid:focus { box-shadow: 0 0 0 4px rgba(214, 69, 69, .16); }

fieldset.scheduler-border {
  border: 1px solid var(--md-line) !important;
  border-radius: var(--md-r-lg);
  padding: 8px 20px 20px !important;
  margin-bottom: 22px !important;
  background: #fff;
}
legend.scheduler-border {
  font-size: .78rem !important;
  font-weight: 700;
  letter-spacing: .07em;
  text-transform: uppercase;
  color: var(--md-ink-muted);
  padding: 0 8px;
  width: auto;
  margin-bottom: 0;
}

/* -------------------------------------------------------------- buttons -- */

.btn {
  border-radius: var(--md-r);
  font-weight: 600;
  font-size: .93rem;
  padding: .62rem 1.25rem;
  line-height: 1.35;
  border: 1px solid transparent;
  box-shadow: none;
  transition: background-color .15s ease, border-color .15s ease, color .15s ease,
              transform .12s ease, box-shadow .15s ease;
}
.btn:active { transform: translateY(1px); }
.btn:focus { box-shadow: 0 0 0 4px var(--md-brand-ring); }

/* Selectors are doubled as `.btn-x` and `.btn.btn-x`: the clinician
   dashboards load an admin theme whose own button colours are written as
   `.btn.btn-primary` etc. That compound selector outranks a plain
   `.btn-primary` no matter which stylesheet loads last, so matching its
   specificity here is what actually wins the cascade on those pages. */

.btn-primary, .btn-custom,
.btn.btn-primary, .btn.btn-custom {
  background-color: var(--md-brand);
  border-color: var(--md-brand);
  color: #fff;
}
.btn-primary:hover, .btn-custom:hover,
.btn.btn-primary:hover, .btn.btn-custom:hover,
.btn-primary:not(:disabled):not(.disabled):active,
.btn.btn-primary:not(:disabled):not(.disabled):active {
  background-color: var(--md-brand-dark);
  border-color: var(--md-brand-dark);
  color: #fff;
}
.btn-success, .btn.btn-success { background-color: var(--md-success); border-color: var(--md-success); }
.btn-success:hover, .btn.btn-success:hover { background-color: #106b4c; border-color: #106b4c; }
.btn-danger, .btn.btn-danger  { background-color: var(--md-danger); border-color: var(--md-danger); }
.btn-danger:hover, .btn.btn-danger:hover { background-color: #b83a3a; border-color: #b83a3a; }
.btn-info, .btn.btn-info    { background-color: var(--md-info); border-color: var(--md-info); }
.btn-info:hover, .btn.btn-info:hover { background-color: #185b96; border-color: #185b96; }
.btn-warning, .btn.btn-warning { background-color: var(--md-warning); border-color: var(--md-warning); color: #fff; }
.btn-warning:hover, .btn.btn-warning:hover { background-color: #8a5600; border-color: #8a5600; color: #fff; }

.btn-secondary, .btn.btn-secondary { background-color: #eef2f2; border-color: #eef2f2; color: var(--md-ink); }
.btn-secondary:hover, .btn.btn-secondary:hover { background-color: #e2e8e8; border-color: #e2e8e8; color: var(--md-ink); }

.btn-outline-primary, .btn.btn-outline-primary { color: var(--md-brand); border-color: var(--md-line-strong); background: #fff; }
.btn-outline-primary:hover, .btn.btn-outline-primary:hover { background: var(--md-brand); border-color: var(--md-brand); color: #fff; }

.btn-outline-danger, .btn.btn-outline-danger { color: var(--md-danger); border-color: var(--md-line-strong); background: #fff; }
.btn-outline-danger:hover, .btn.btn-outline-danger:hover { background: var(--md-danger); border-color: var(--md-danger); color: #fff; }

.btn-link, .btn.btn-link { color: var(--md-brand); font-weight: 600; padding: .62rem .5rem; }
.btn-link:hover, .btn.btn-link:hover { color: var(--md-brand-dark); text-decoration: underline; }

.btn-sm { padding: .38rem .8rem; font-size: .82rem; border-radius: var(--md-r-sm); }
.btn-lg { padding: .8rem 1.7rem; font-size: 1rem; border-radius: var(--md-r); }
.md-btn-pill { border-radius: 999px; }

.btn.disabled, .btn:disabled { opacity: .55; box-shadow: none; }

/* --------------------------------------------------------------- alerts -- */

.alert {
  border: 1px solid transparent;
  border-radius: var(--md-r);
  padding: 14px 18px;
  font-size: .92rem;
  font-weight: 500;
}
.alert ul { margin: 0; padding-left: 18px; list-style: disc; }
.alert li { margin: 2px 0; }
.alert-danger  { background: #fdf0f0; border-color: #f6d5d5; color: #92302f; }
.alert-success { background: #eaf7f1; border-color: #c8e8da; color: #0d6144; }
.alert-warning { background: #fdf5e6; border-color: #f4e2bd; color: #8a5600; }
.alert-info    { background: #eef5fc; border-color: #d2e3f5; color: #14548c; }
.alert-primary { background: var(--md-brand-light); border-color: #c9e6db; color: var(--md-brand-dark); }

/* --------------------------------------------------------------- tables -- */

.md-table-wrap {
  background: #fff;
  border: 1px solid var(--md-line);
  border-radius: var(--md-r-lg);
  box-shadow: var(--md-sh-sm);
  overflow: hidden;
}
.md-table-wrap .table-responsive { margin: 0; }

.table { margin-bottom: 0; color: var(--md-ink); font-size: .92rem; }
.table thead th {
  background: #f7faf9;
  border-bottom: 1px solid var(--md-line) !important;
  border-top: 0;
  color: var(--md-ink-muted);
  font-size: .74rem;
  font-weight: 700;
  letter-spacing: .07em;
  text-transform: uppercase;
  padding: 14px 16px;
  white-space: nowrap;
}
.table td, .table th { border-top: 1px solid var(--md-line); padding: 14px 16px; vertical-align: middle; }
.table tbody tr:first-child td { border-top: 0; }
.table-hover tbody tr:hover { background-color: #f7faf9; }
.table-bordered, .table-bordered td, .table-bordered th { border-color: var(--md-line); }
.table-striped tbody tr:nth-of-type(odd) { background-color: #fbfcfc; }

/* --------------------------------------------------------------- badges -- */

.badge {
  border-radius: 999px;
  font-weight: 600;
  font-size: .74rem;
  padding: .4em .8em;
}
.md-chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 5px 12px;
  border-radius: 999px;
  font-size: .78rem;
  font-weight: 600;
  background: var(--md-brand-light);
  color: var(--md-brand-dark);
}
.md-chip--muted  { background: #eef2f2; color: var(--md-ink-soft); }
.md-chip--warn   { background: #fdf5e6; color: #8a5600; }
.md-chip--danger { background: #fdf0f0; color: #92302f; }
.md-chip--info   { background: #eef5fc; color: #14548c; }

.md-dot { width: 8px; height: 8px; border-radius: 50%; display: inline-block; background: currentColor; }
.online { color: var(--md-success) !important; }

/* ----------------------------------------------------------------- tabs -- */

.nav-tabs { border-bottom: 1px solid var(--md-line); gap: 4px; }
.nav-tabs .nav-item { min-width: 0 !important; }
.nav-tabs .nav-link {
  border: 0;
  border-bottom: 2px solid transparent;
  border-radius: 0;
  color: var(--md-ink-soft);
  font-weight: 600;
  font-size: .93rem;
  padding: .75rem 1.15rem;
  transition: color .15s ease, border-color .15s ease, background-color .15s ease;
}
.nav-tabs .nav-link:hover { color: var(--md-brand); background: var(--md-brand-light); border-bottom-color: transparent; }
.nav-tabs .nav-link.active,
.nav-tabs .nav-item.show .nav-link {
  color: var(--md-brand);
  background: transparent;
  border-bottom-color: var(--md-brand);
}

.nav-pills .nav-link { border-radius: 999px; font-weight: 600; color: var(--md-ink-soft); }
.nav-pills .nav-link.active { background-color: var(--md-brand); color: #fff; }

/* --------------------------------------------------------------- modals -- */

.modal-content { border: 0; border-radius: var(--md-r-lg); box-shadow: var(--md-sh-lg); overflow: hidden; }
.modal-header { border-bottom: 1px solid var(--md-line); padding: 18px 24px; }
.modal-title { font-weight: 700; font-size: 1.05rem; }
.modal-body { padding: 24px; }
.modal-footer { border-top: 1px solid var(--md-line); padding: 16px 24px; }
.close { font-weight: 400; opacity: .5; text-shadow: none; }
.close:hover { opacity: 1; }

/* ----------------------------------------------------------- pagination -- */

.pagination { gap: 4px; }
.page-link {
  border: 1px solid var(--md-line);
  border-radius: var(--md-r-sm) !important;
  color: var(--md-ink-soft);
  font-weight: 600;
  font-size: .87rem;
  padding: .45rem .8rem;
}
.page-link:hover { background: var(--md-brand-light); border-color: var(--md-brand-light); color: var(--md-brand-dark); }
.page-item.active .page-link { background: var(--md-brand); border-color: var(--md-brand); color: #fff; }
.page-item.disabled .page-link { color: var(--md-ink-muted); background: #fff; }

/* --------------------------------------------------------------- footer -- */

footer, .footer, footer.footergrad {
  flex-shrink: 0;
  background: #0f2c25 !important;
  color: rgba(255, 255, 255, .72);
  margin-top: auto;
  padding: 8px 0 0;
  line-height: 1.6;
}
footer a, footer .ft-legal-list a { color: rgba(255, 255, 255, .82) !important; }
footer a:hover { color: #fff !important; text-decoration: underline; }
footer small { font-size: .84rem; }
footer .text, footer .ft-main-item div { color: rgba(255, 255, 255, .72); }
footer ul { list-style: none; padding-left: 0; margin: 0; }

.ft-title {
  color: #fff !important;
  font-family: var(--md-font) !important;
  font-size: .78rem !important;
  font-weight: 700;
  letter-spacing: .09em;
  text-transform: uppercase;
  padding-bottom: 12px;
}
.ft-main {
  max-width: 1180px;
  margin: 0 auto;
  padding: 40px 20px 24px;
  display: flex;
  flex-wrap: wrap;
  gap: 32px;
  justify-content: space-between;
}
.ft-main-item { padding: 0; min-width: 220px; flex: 1 1 240px; }

.ft-social { padding: 0 20px 20px; }
.ft-social-list {
  max-width: 1180px;
  margin: 0 auto;
  display: flex;
  justify-content: center;
  gap: 10px;
  border-top: 1px solid rgba(255, 255, 255, .12);
  padding-top: 22px;
}
.ft-social-list li { margin: 0; font-size: 1rem; }
.ft-social-list a {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 38px;
  height: 38px;
  border-radius: 50%;
  background: rgba(255, 255, 255, .08);
  transition: background-color .15s ease, transform .15s ease;
}
.ft-social-list a:hover { background: var(--md-brand); transform: translateY(-2px); text-decoration: none; }

.ft-legal-list {
  max-width: 1180px;
  margin: 0 auto;
  display: flex;
  flex-wrap: wrap;
  gap: 6px 20px;
  align-items: center;
  padding: 0 20px 26px;
  font-size: .8rem;
  color: rgba(255, 255, 255, .6);
}
.ft-legal-list li { margin: 0; white-space: normal; }
.ft-legal-list li:nth-last-child(2) { flex: 1; }

/* ---------------------------------------------------------- misc legacy -- */

.col-lg-4.col-sm-6.col-md-4 { box-shadow: none; border: 0; }

.form-header-k {
  height: auto;
  background: linear-gradient(135deg, var(--md-brand) 0%, #01916a 100%);
  color: #fff !important;
  padding: 18px 24px;
  border-radius: var(--md-r-lg);
  box-shadow: none;
  font-weight: 700;
}

.img-responsive { height: auto; width: 100%; border-radius: var(--md-r); }

.md-avatar { border-radius: 50%; object-fit: cover; background: var(--md-brand-light); }
.md-avatar--lg { width: 96px; height: 96px; }
.md-avatar--md { width: 56px; height: 56px; }
.md-avatar--sm { width: 40px; height: 40px; }

/* Empty states - legacy pages just render a blank table body. */
.md-empty { text-align: center; padding: 48px 24px; color: var(--md-ink-muted); }
.md-empty__icon { font-size: 2rem; color: var(--md-line-strong); margin-bottom: 10px; }
.md-empty__title { font-weight: 700; color: var(--md-ink-soft); margin-bottom: 4px; }

/* Stat tiles for the dashboards. */
.md-stats { display: grid; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); gap: 16px; }
.md-stat {
  background: var(--md-surface);
  border: 1px solid var(--md-line);
  border-radius: var(--md-r-lg);
  box-shadow: var(--md-sh-sm);
  padding: 20px;
  display: flex;
  align-items: center;
  gap: 14px;
}
.md-stat__icon {
  flex: none;
  width: 44px;
  height: 44px;
  border-radius: var(--md-r);
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--md-brand-light);
  color: var(--md-brand);
  font-size: 1.1rem;
}
.md-stat__value { font-size: 1.5rem; font-weight: 700; line-height: 1.1; color: var(--md-ink); }
.md-stat__label { font-size: .82rem; color: var(--md-ink-muted); font-weight: 500; }

.md-divider { height: 1px; background: var(--md-line); border: 0; margin: 24px 0; }

/* ---- auth pages (login / register / password reset) ---------------------- */

.md-auth { padding: 0; }

.md-auth__grid {
    display: grid;
    grid-template-columns: 1.05fr 1fr;
    min-height: calc(100vh - 64px);
    align-items: stretch;
}

/* Reassurance panel */
.md-auth__aside {
    position: relative;
    display: flex;
    align-items: center;
    padding: 56px 6vw;
    color: #fff;
    background: linear-gradient(140deg, #00402f 0%, #007b59 55%, #019068 100%);
    overflow: hidden;
}
.md-auth__aside::after {
    /* soft glow, keeps the flat gradient from reading as a coloured box */
    content: "";
    position: absolute;
    right: -120px;
    bottom: -140px;
    width: 420px;
    height: 420px;
    border-radius: 50%;
    background: radial-gradient(circle, rgba(255, 255, 255, .12) 0%, rgba(255, 255, 255, 0) 70%);
}
.md-auth__aside-inner { position: relative; z-index: 1; max-width: 460px; }

.md-auth__eyebrow {
    display: inline-block;
    font-size: .72rem;
    font-weight: 700;
    letter-spacing: .14em;
    text-transform: uppercase;
    color: rgba(255, 255, 255, .75);
    margin-bottom: 16px;
}
.md-auth__headline {
    color: #fff;
    font-size: 2.3rem;
    line-height: 1.35;
    font-weight: 700;
    margin: 0 0 16px;
}
.md-auth__sub {
    color: rgba(255, 255, 255, .82);
    font-size: 1rem;
    line-height: 1.8;
    margin: 0 0 32px;
}
.md-auth__points { margin: 0; padding: 0; list-style: none; }
.md-auth__points li {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 11px 0;
    font-size: .95rem;
    color: rgba(255, 255, 255, .9);
    border-top: 1px solid rgba(255, 255, 255, .14);
}
.md-auth__points li:first-child { border-top: 0; }
.md-auth__points i {
    flex: none;
    width: 32px;
    height: 32px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    background: rgba(255, 255, 255, .14);
    font-size: .85rem;
}

/* Form panel */
.md-auth__panel {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 48px 24px;
    background: var(--md-bg);
}
.md-auth__card {
    width: 100%;
    max-width: 430px;
    background: #fff;
    border: 1px solid var(--md-line);
    border-radius: 20px;
    box-shadow: var(--md-sh);
    padding: 36px 34px;
}
.md-auth__head { margin-bottom: 26px; }
.md-auth__title { font-size: 1.55rem; margin: 0 0 6px; }
.md-auth__lead { color: var(--md-ink-soft); font-size: .93rem; margin: 0; }

.md-req { color: var(--md-danger); }

.md-label-row {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 12px;
    margin-bottom: 6px;
}
.md-auth__forgot { font-size: .82rem; font-weight: 600; }

/* Password field with a reveal toggle */
.md-input-affix { position: relative; }
.md-input-affix .form-control { padding-right: 46px; }
.md-input-affix__btn {
    position: absolute;
    top: 50%;
    right: 6px;
    transform: translateY(-50%);
    width: 34px;
    height: 34px;
    display: flex;
    align-items: center;
    justify-content: center;
    border: 0;
    border-radius: 50%;
    background: transparent;
    color: var(--md-ink-muted);
    cursor: pointer;
    transition: background-color .15s ease, color .15s ease;
}
.md-input-affix__btn:hover { background: var(--md-brand-light); color: var(--md-brand); }

.md-auth__foot {
    margin: 22px 0 0;
    padding-top: 20px;
    border-top: 1px solid var(--md-line);
    text-align: center;
    font-size: .9rem;
    color: var(--md-ink-soft);
}
.md-auth__foot a { font-weight: 600; }

@media (max-width: 991.98px) {
    .md-auth__grid { grid-template-columns: 1fr; min-height: 0; }
    .md-auth__aside { padding: 40px 24px; }
    .md-auth__headline { font-size: 1.7rem; }
    .md-auth__sub { margin-bottom: 22px; }
    .md-auth__panel { padding: 32px 16px 56px; }
}
@media (max-width: 575.98px) {
    .md-auth__card { padding: 26px 20px; border-radius: 16px; }
    .md-auth__aside { display: none; }
}

/* ---------------------------------------------------- registration form -- */

.md-reg-head { margin-bottom: 24px; }

/* Role picker - Bootstrap tab triggers restyled as choice cards. */
.md-roles {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(210px, 1fr));
  gap: 12px;
  margin-bottom: 22px;
  border: 0;
}
.md-role {
  display: flex;
  align-items: center;
  gap: 13px;
  padding: 15px 16px;
  background: #fff;
  border: 1px solid var(--md-line-strong);
  border-radius: var(--md-r-lg);
  box-shadow: var(--md-sh-sm);
  color: var(--md-ink);
  transition: border-color .15s ease, box-shadow .15s ease, background-color .15s ease;
}
.md-role:hover { border-color: var(--md-brand); color: var(--md-ink); text-decoration: none; }
.md-role.active {
  border-color: var(--md-brand);
  background: var(--md-brand-light);
  box-shadow: 0 0 0 3px var(--md-brand-ring);
}
.md-role__icon {
  flex: none;
  width: 42px;
  height: 42px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  background: var(--md-brand-light);
  color: var(--md-brand);
  font-size: 1.05rem;
}
.md-role.active .md-role__icon { background: var(--md-brand); color: #fff; }
.md-role__body { display: flex; flex-direction: column; line-height: 1.35; min-width: 0; }
.md-role__title { font-weight: 700; font-size: .98rem; }
.md-role__note { font-size: .8rem; color: var(--md-ink-muted); }

/* The tab panels themselves carry no chrome; the card inside does. */
.tab-content { background: transparent; border: 0; padding: 0; }

.md-form-card { padding: 30px; }
.md-form-card__head { margin-bottom: 24px; padding-bottom: 20px; border-bottom: 1px solid var(--md-line); }
.md-form-card__title { font-size: 1.25rem; margin: 0 0 6px; }
.md-form-card__lead { margin: 0; color: var(--md-ink-soft); font-size: .92rem; }

/* Section within a long form. */
.md-fieldset { margin-bottom: 30px; }
.md-fieldset:last-of-type { margin-bottom: 22px; }
.md-fieldset__title {
  font-size: .76rem;
  font-weight: 700;
  letter-spacing: .09em;
  text-transform: uppercase;
  color: var(--md-ink-muted);
  margin: 0 0 16px;
  padding-bottom: 10px;
  border-bottom: 1px solid var(--md-line);
}

.md-form .form-row { margin-left: -8px; margin-right: -8px; }
.md-form .form-row > [class*="col-"] { padding-left: 8px; padding-right: 8px; }

.md-form-actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 12px 20px;
  padding-top: 22px;
  border-top: 1px solid var(--md-line);
}
.md-form-actions__note { font-size: .9rem; color: var(--md-ink-soft); }
.md-form-actions__note a { font-weight: 600; }

/* Prefix inside an input, e.g. the currency mark on a fee field. */
.md-input-affix--prefix .form-control { padding-left: 2.1rem; }
.md-input-affix__label {
  position: absolute;
  left: .9rem;
  top: 50%;
  transform: translateY(-50%);
  color: var(--md-ink-muted);
  font-weight: 600;
  pointer-events: none;
}

@media (max-width: 575.98px) {
  .md-form-card { padding: 20px 18px; }
  .md-form-actions .btn { width: 100%; }
}

/* Flash message banner, rendered above the page content. */
.md-flash-wrap { max-width: 1180px; margin: 20px auto -8px; padding: 0 20px; width: 100%; }
.md-flash { display: flex; align-items: flex-start; gap: 10px; margin: 0; }
.md-flash i { margin-top: 3px; }

/* ------------------------------------------- single-step auth screens ---- */

.md-auth-step {
  max-width: 520px;
  margin: 24px auto;
  padding: 34px 32px;
  border-radius: 20px;
  box-shadow: var(--md-sh);
}
.md-auth-step__title { font-size: 1.4rem; margin: 0 0 8px; }
.md-auth-step__lead { color: var(--md-ink-soft); font-size: .93rem; margin: 0 0 24px; }
.md-auth-step__foot {
  margin: 22px 0 0;
  padding-top: 18px;
  border-top: 1px solid var(--md-line);
  text-align: center;
  font-size: .9rem;
  color: var(--md-ink-soft);
}
.md-auth-step__foot a { font-weight: 600; }

/* Progress through the reset flow, so people know how many steps are left. */
.md-steps { display: flex; gap: 8px; margin-bottom: 26px; }
.md-step {
  display: flex;
  align-items: center;
  gap: 8px;
  flex: 1;
  padding: 9px 12px;
  border-radius: 999px;
  background: #f2f5f5;
  color: var(--md-ink-muted);
  font-size: .82rem;
  font-weight: 700;
}
.md-step b { font-weight: 600; font-size: .8rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.md-step--current { background: var(--md-brand); color: #fff; }
.md-step--done { background: var(--md-brand-light); color: var(--md-brand-dark); }

.md-code-input {
  font-size: 1.3rem;
  letter-spacing: .5em;
  text-align: center;
  font-weight: 600;
  -moz-appearance: textfield;
}
/* A verification code is not a quantity - drop the number spinners. */
.md-code-input::-webkit-outer-spin-button,
.md-code-input::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }

@media (max-width: 575.98px) {
  .md-auth-step { padding: 24px 20px; margin: 0 auto; }
  .md-step b { display: none; }
  .md-step { flex: none; width: 38px; justify-content: center; }
}

.md-verify-icon {
  width: 56px;
  height: 56px;
  border-radius: 50%;
  background: var(--md-brand-light);
  color: var(--md-brand);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.4rem;
  margin-bottom: 18px;
}
.md-verify-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 14px 16px;
  border: 1px solid var(--md-line);
  border-radius: var(--md-r);
  background: #fbfcfc;
}
.md-verify-row__label { font-size: .82rem; color: var(--md-ink-muted); font-weight: 600; }
.md-verify-row__value { font-weight: 700; }

.md-mt-16 { margin-top: 16px; }
.md-mt-10 { margin-top: 10px; }

/* Account menu in the signed-in navbars. */
.md-account__toggle { display: flex; align-items: center; gap: 9px; }
.md-account__toggle .rounded-circle { width: 34px; height: 34px; }
.md-account__name { font-weight: 600; max-width: 150px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.dropdown-item i { width: 18px; margin-right: 6px; color: var(--md-ink-muted); }
.dropdown-item:hover i { color: inherit; }
.dropdown-item.text-danger { color: var(--md-danger) !important; }
.dropdown-item.text-danger:hover { background: #fdf0f0; color: #92302f !important; }

@media (max-width: 1199.98px) {
  .md-account__toggle { justify-content: flex-start; }
}

/* ------------------------------------------------- dashboard building blocks -- */

.md-block { margin-bottom: 44px; }
.md-block:last-child { margin-bottom: 0; }
.md-block-cta { margin-top: 20px; text-align: center; }

.md-group-title {
  font-size: 1.02rem;
  font-weight: 700;
  color: var(--md-ink);
  margin: 0 0 14px;
}
.md-block .md-group-title:not(:first-of-type) { margin-top: 26px; }

/* Service cards - image, title, one line of what it is, and a clear next step. */
.md-service-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: 18px;
}
.md-service {
  display: flex;
  flex-direction: column;
  background: var(--md-surface);
  border: 1px solid var(--md-line);
  border-radius: var(--md-r-lg);
  box-shadow: var(--md-sh-sm);
  overflow: hidden;
  color: var(--md-ink);
  transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease;
}
.md-service:hover {
  transform: translateY(-3px);
  box-shadow: var(--md-sh);
  border-color: var(--md-brand);
  color: var(--md-ink);
  text-decoration: none;
}
.md-service__media { display: block; height: 168px; overflow: hidden; background: var(--md-brand-light); }
.md-service__media img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform .3s ease; }
.md-service:hover .md-service__media img { transform: scale(1.04); }
.md-service__body { display: flex; flex-direction: column; gap: 6px; padding: 18px 20px 20px; flex: 1; }
.md-service__title { font-weight: 700; font-size: 1.02rem; line-height: 1.4; }
.md-service__note { font-size: .87rem; color: var(--md-ink-soft); flex: 1; }
.md-service__cta { font-size: .85rem; font-weight: 700; color: var(--md-brand); margin-top: 6px; }
.md-service__cta i { transition: transform .18s ease; }
.md-service:hover .md-service__cta i { transform: translateX(4px); }

/* Expert cards. */
.md-expert-grid {
  display: grid;
  /* a fixed card size (not 1fr) so a row with only 1-2 experts stays a normal
     card instead of stretching to fill the whole row/page. */
  grid-template-columns: repeat(auto-fit, minmax(200px, 240px));
  justify-content: center;
  gap: 18px;
}
/* Directory page (gdoctors): a steady 3-up grid regardless of how many
   experts are in a given group, instead of auto-fit's variable column count. */
.md-expert-grid--directory {
  grid-template-columns: repeat(3, minmax(0, 1fr));
  justify-content: stretch;
}
@media (max-width: 900px) {
  .md-expert-grid--directory { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 560px) {
  .md-expert-grid--directory { grid-template-columns: minmax(0, 1fr); }
}
.md-expert {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  text-align: center;
  gap: 4px;
  padding: 0 0 18px;
  overflow: hidden;
  background: var(--md-surface);
  border: 1px solid var(--md-line);
  border-radius: var(--md-r-lg);
  box-shadow: var(--md-sh-sm);
  color: var(--md-ink);
  transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease;
}
.md-expert:hover {
  transform: translateY(-3px);
  box-shadow: var(--md-sh);
  border-color: var(--md-brand);
  color: var(--md-ink);
  text-decoration: none;
}
.md-expert__photo {
  width: 100%;
  aspect-ratio: 1 / 1;
  object-fit: cover;
  object-position: center top;
  background: var(--md-brand-light);
  margin-bottom: 14px;
  font-size: 2.4rem;
}
.md-expert__name { padding: 0 18px; font-weight: 700; font-size: 1rem; line-height: 1.4; }
.md-expert__degree { padding: 0 18px; font-size: .82rem; color: var(--md-ink-soft); }
.md-expert__place { padding: 0 18px; font-size: .8rem; color: var(--md-ink-muted); }
.md-expert__cta {
  margin: auto 18px 0;
  padding: 7px 16px;
  border-radius: 999px;
  background: var(--md-brand-light);
  color: var(--md-brand-dark);
  font-size: .82rem;
  font-weight: 700;
  transition: background-color .15s ease, color .15s ease;
}
.md-expert:hover .md-expert__cta { background: var(--md-brand); color: #fff; }

/* ------------------------------------------------------- profile summary -- */

.md-profile { padding: 28px 30px; }
.md-profile__head {
  display: flex;
  align-items: center;
  gap: 22px;
  padding-bottom: 24px;
  margin-bottom: 24px;
  border-bottom: 1px solid var(--md-line);
}
.md-profile__name { font-size: 1.3rem; margin: 0 0 4px; }
.md-profile__meta { margin: 0; font-size: .87rem; color: var(--md-ink-muted); }
.md-profile__meta i { margin-right: 4px; }

.md-avatar--empty {
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--md-brand);
  font-size: 2rem;
  flex: none;
}

.md-detail-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 16px;
  margin: 0 0 28px;
}
.md-detail {
  padding: 14px 16px;
  border: 1px solid var(--md-line);
  border-radius: var(--md-r);
  background: #fbfcfc;
}
.md-detail dt {
  font-size: .76rem;
  font-weight: 700;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--md-ink-muted);
  margin-bottom: 5px;
}
.md-detail dd { margin: 0; font-weight: 600; color: var(--md-ink); word-break: break-word; }

.md-profile__summary { margin: -8px 0 22px; color: var(--md-ink-soft); line-height: 1.7; }

.md-quick-links {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
  gap: 14px;
  margin-top: 22px;
}
.md-quick-link {
  display: flex;
  align-items: center;
  gap: 13px;
  padding: 16px 18px;
  background: var(--md-surface);
  border: 1px solid var(--md-line);
  border-radius: var(--md-r-lg);
  box-shadow: var(--md-sh-sm);
  color: var(--md-ink);
  transition: border-color .15s ease, transform .15s ease, box-shadow .15s ease;
}
.md-quick-link:hover {
  border-color: var(--md-brand);
  transform: translateY(-2px);
  box-shadow: var(--md-sh);
  color: var(--md-ink);
  text-decoration: none;
}
.md-quick-link__icon {
  flex: none;
  width: 40px;
  height: 40px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: var(--md-r);
  background: var(--md-brand-light);
  color: var(--md-brand);
}
.md-quick-link b { display: block; font-size: .93rem; }
.md-quick-link small { color: var(--md-ink-muted); font-size: .8rem; }

@media (max-width: 575.98px) {
  .md-profile { padding: 20px 18px; }
  .md-profile__head { flex-direction: column; text-align: center; gap: 14px; }
}

/* ------------------------------------------------------ list page toolbar -- */

.md-list-toolbar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 12px 18px;
  margin-bottom: 20px;
}
.md-search { position: relative; flex: 1 1 320px; max-width: 420px; }
.md-search i {
  position: absolute;
  left: 15px;
  top: 50%;
  transform: translateY(-50%);
  color: var(--md-ink-muted);
  pointer-events: none;
}
.md-search .form-control { padding-left: 42px; }
.md-search input[type="search"]::-webkit-search-cancel-button { cursor: pointer; }
.md-list-toolbar__count { font-size: .87rem; color: var(--md-ink-muted); font-weight: 600; }

.md-expert__fee {
  margin: 8px 0 14px;
  padding: 0 18px;
  font-size: .82rem;
  font-weight: 700;
  color: var(--md-ink-soft);
}

/* ------------------------------------------------------- booking flow ---- */

.md-expert-head {
  display: flex;
  align-items: center;
  gap: 26px;
  padding: 28px 30px;
  margin-bottom: 18px;
}
.md-expert-head__photo {
  flex: none;
  width: 132px;
  height: 132px;
  border-radius: 50%;
  object-fit: cover;
  object-position: top center;
  background: var(--md-brand-light);
  border: 3px solid #fff;
  box-shadow: 0 0 0 1px var(--md-line);
}
.md-expert-head__body { min-width: 0; }
.md-expert-head__name { font-size: 1.5rem; margin: 0 0 6px; }
.md-expert-head__degree { margin: 0 0 4px; color: var(--md-ink-soft); font-size: .95rem; }
.md-expert-head__role { margin: 0 0 2px; color: var(--md-ink-muted); font-size: .87rem; }
.md-expert-head__facts { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 14px; }

.md-bio { margin-bottom: 18px; }
.md-bio p { margin: 0; color: var(--md-ink-soft); line-height: 1.8; }

.md-emergency {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 16px 24px;
  padding: 22px 26px;
  margin-bottom: 18px;
  border-color: #f4e2bd;
  background: #fdf9f0;
}
.md-emergency__title { font-size: 1.1rem; margin: 0 0 4px; color: #8a5600; }
.md-emergency__note { margin: 0; font-size: .89rem; color: var(--md-ink-soft); max-width: 60ch; }

/* Bookable slots. */
.md-slot-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(210px, 1fr));
  gap: 14px;
}
.md-slot-grid--times { grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); }

.md-slot {
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 18px 20px;
  background: var(--md-surface);
  border: 1px solid var(--md-line-strong);
  border-radius: var(--md-r-lg);
  box-shadow: var(--md-sh-sm);
  color: var(--md-ink);
  cursor: pointer;
  transition: border-color .15s ease, transform .15s ease, box-shadow .15s ease, background-color .15s ease;
}
.md-slot:hover {
  border-color: var(--md-brand);
  background: var(--md-brand-light);
  transform: translateY(-2px);
  box-shadow: var(--md-sh);
  color: var(--md-ink);
  text-decoration: none;
}
.md-slot__date { font-weight: 700; font-size: 1.02rem; color: var(--md-brand-dark); }
.md-slot__time { font-weight: 700; font-size: 1.35rem; color: var(--md-brand-dark); }
.md-slot__meta { display: flex; flex-wrap: wrap; gap: 4px 16px; font-size: .84rem; color: var(--md-ink-soft); }
.md-slot__left { font-size: .8rem; color: var(--md-ink-muted); }
.md-slot--time { align-items: center; text-align: center; }

.md-date-tabs { margin-bottom: 20px; overflow-x: auto; flex-wrap: nowrap; }
.md-date-tabs .nav-link { white-space: nowrap; }
.md-date-panels { padding-top: 0; }

/* Confirmation summary inside the booking modal. */
.md-confirm { margin: 0 0 22px; }
.md-confirm > div {
  display: flex;
  justify-content: space-between;
  gap: 16px;
  padding: 11px 0;
  border-bottom: 1px solid var(--md-line);
}
.md-confirm > div:last-child { border-bottom: 0; }
.md-confirm dt { font-size: .84rem; color: var(--md-ink-muted); font-weight: 600; margin: 0; }
.md-confirm dd { margin: 0; font-weight: 700; text-align: right; }

@media (max-width: 575.98px) {
  .md-expert-head { flex-direction: column; text-align: center; padding: 22px 18px; }
  .md-expert-head__facts { justify-content: center; }
  .md-emergency { flex-direction: column; align-items: flex-start; }
}

/* --------------------------------------------------- articles and posts -- */

.md-article { overflow: hidden; }
.md-article__hero { width: 100%; height: 320px; object-fit: cover; display: block; }
.md-article__body { padding: 30px 34px 34px; }
.md-article__title { font-size: 1.7rem; margin: 0 0 10px; }
.md-article__byline { color: var(--md-ink-muted); font-size: .87rem; margin: 0 0 18px; }
.md-article__lead { font-size: 1.02rem; font-weight: 600; color: var(--md-ink); margin: 0 0 18px; }
.md-article__body p { color: var(--md-ink-soft); line-height: 1.85; }
.md-article__text {
  color: var(--md-ink-soft);
  line-height: 1.85;
  white-space: pre-wrap;
  word-wrap: break-word;
}
.md-article__refs { margin-top: 30px; padding-top: 22px; border-top: 1px solid var(--md-line); }
.md-article__refs p { font-size: .89rem; word-break: break-word; }
.md-article__actions { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 26px; }

.md-post-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
  gap: 20px;
}
.md-post {
  display: flex;
  flex-direction: column;
  background: var(--md-surface);
  border: 1px solid var(--md-line);
  border-radius: 0;
  box-shadow: var(--md-sh-sm);
  overflow: hidden;
  color: var(--md-ink);
  transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease;
}
.md-post:hover {
  transform: translateY(-3px);
  box-shadow: var(--md-sh);
  border-color: var(--md-brand);
  color: var(--md-ink);
  text-decoration: none;
}
.md-post__media { display: block; aspect-ratio: 16 / 10; overflow: hidden; background: var(--md-brand-light); }
.md-post__media img { width: 100%; height: 100%; object-fit: cover; display: block; }
.md-post__placeholder {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 100%;
  color: var(--md-brand);
  font-size: 1.6rem;
}
.md-post__body { padding: 16px 18px 18px; display: flex; flex-direction: column; gap: 6px; flex: 1; }
.md-post__title {
  font-weight: 700;
  font-size: .95rem;
  line-height: 1.6;
  word-break: normal;
  overflow-wrap: normal;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  min-height: calc(1.6em * 2);
}
.md-post__byline { font-size: .8rem; color: var(--md-ink-muted); margin-top: auto; }

@media (max-width: 575.98px) {
  .md-article__hero { height: 200px; }
  .md-article__body { padding: 22px 20px 26px; }
  .md-article__title { font-size: 1.35rem; }
}

/* --------------------------------------------------- profile photo field -- */

.md-photo-field { display: flex; align-items: center; gap: 24px; flex-wrap: wrap; }
.md-photo-field__preview {
  width: 110px;
  height: 110px;
  border-radius: 50%;
  object-fit: cover;
  object-position: top center;
  background: var(--md-brand-light);
  border: 3px solid #fff;
  box-shadow: 0 0 0 1px var(--md-line);
  flex: none;
}
.md-photo-field__input { flex: 1 1 260px; min-width: 0; }

.md-fieldset__note {
  margin: -6px 0 16px;
  font-size: .86rem;
  color: var(--md-ink-muted);
}

/* --------------------------------------------------------------- payment -- */

.md-pay-summary {
  display: flex;
  flex-wrap: wrap;
  gap: 18px 40px;
  padding: 20px 26px;
  margin-bottom: 22px;
}
.md-pay-summary > div { display: flex; flex-direction: column; gap: 3px; }
.md-pay-summary__label {
  font-size: .74rem;
  font-weight: 700;
  letter-spacing: .07em;
  text-transform: uppercase;
  color: var(--md-ink-muted);
}
.md-pay-summary__value { font-weight: 700; font-size: 1rem; }
.md-pay-summary__value--amount { color: var(--md-brand); font-size: 1.3rem; }

.md-pay-tabs { margin-bottom: 20px; }

.md-steps-list { margin: 0 0 24px; padding-left: 20px; color: var(--md-ink-soft); }
.md-steps-list li { margin-bottom: 8px; line-height: 1.65; }

.md-bank { margin: 0 0 26px; padding: 18px 20px; background: #fbfcfc; border: 1px solid var(--md-line); border-radius: var(--md-r); }
.md-bank > div { display: flex; flex-wrap: wrap; gap: 4px 16px; padding: 7px 0; }
.md-bank dt { flex: 0 0 140px; font-size: .84rem; color: var(--md-ink-muted); font-weight: 600; margin: 0; }
.md-bank dd { margin: 0; font-weight: 600; }

/* ------------------------------------------------- detail page building -- */

.md-two-col {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
  gap: 18px;
  margin-bottom: 40px;
}

.md-panel-title { font-size: 1.15rem; margin: 0 0 4px; }
.md-panel-sub { margin: 0 0 4px; color: var(--md-ink-muted); font-size: .87rem; }

.md-kv { margin: 18px 0 0; }
.md-kv > div {
  display: flex;
  flex-wrap: wrap;
  gap: 4px 16px;
  justify-content: space-between;
  padding: 11px 0;
  border-top: 1px solid var(--md-line);
}
.md-kv > div:first-child { border-top: 0; padding-top: 0; }
.md-kv dt { font-size: .84rem; color: var(--md-ink-muted); font-weight: 600; margin: 0; }
.md-kv dd { margin: 0; font-weight: 600; text-align: right; }

.md-block-head {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 10px 16px;
}
.md-block-head .md-section-title { margin-bottom: 14px; }

/* Downloadable files. */
.md-file-list { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 12px; }
.md-file {
  display: flex;
  align-items: center;
  gap: 13px;
  padding: 14px 16px;
  background: var(--md-surface);
  border: 1px solid var(--md-line);
  border-radius: var(--md-r);
  box-shadow: var(--md-sh-sm);
  color: var(--md-ink);
  transition: border-color .15s ease, transform .15s ease;
}
.md-file:hover { border-color: var(--md-brand); transform: translateY(-2px); color: var(--md-ink); text-decoration: none; }
.md-file__icon {
  flex: none;
  width: 38px;
  height: 38px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: var(--md-r-sm);
  background: var(--md-brand-light);
  color: var(--md-brand);
}
.md-file__icon--alt { background: #eef5fc; color: var(--md-info); }
.md-file__body { flex: 1; min-width: 0; }
.md-file__body b { display: block; font-size: .92rem; word-break: break-word; }
.md-file__body small { color: var(--md-ink-muted); font-size: .78rem; }
.md-file__go { color: var(--md-ink-muted); }

/* Comment thread. */
.md-comment-form { margin-bottom: 20px; }
.md-comment-form__row { display: flex; flex-wrap: wrap; gap: 10px; }
.md-comment-form__row .form-control { flex: 1 1 240px; }

.md-comments { display: flex; flex-direction: column; gap: 12px; }
.md-comment {
  padding: 16px 18px;
  background: var(--md-surface);
  border: 1px solid var(--md-line);
  border-radius: var(--md-r);
  box-shadow: var(--md-sh-sm);
}
.md-comment__head { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 12px; margin-bottom: 6px; }
.md-comment__head small { color: var(--md-ink-muted); font-size: .78rem; }
.md-comment p { margin: 0; color: var(--md-ink-soft); }

.md-tab-content { padding-top: 24px; }
.md-tab-count {
  display: inline-block;
  min-width: 20px;
  padding: 1px 7px;
  margin-left: 6px;
  border-radius: 999px;
  background: #eef2f2;
  color: var(--md-ink-soft);
  font-size: .74rem;
  font-weight: 700;
  text-align: center;
}
.nav-tabs .nav-link.active .md-tab-count { background: var(--md-brand-light); color: var(--md-brand-dark); }

/* A count of work waiting rather than a count of things: the number is the
   reason to click the tab, so it carries the warning colour on both states. */
.md-tab-count--alert,
.nav-tabs .nav-link.active .md-tab-count--alert { background: #fdf5e6; color: #8a5600; }
.md-expert__status { margin-bottom: 10px; }

/* --------------------------------------------------------- legal pages -- */

.md-legal { padding: 8px 0; }
.md-legal section {
  padding: 26px 32px;
  border-bottom: 1px solid var(--md-line);
}
.md-legal section:first-child { padding-top: 30px; }
.md-legal section:last-child { border-bottom: 0; padding-bottom: 30px; }
.md-legal h2 { font-size: 1.1rem; margin: 0 0 14px; }
.md-legal h3 { font-size: .95rem; margin: 18px 0 8px; }
.md-legal p { color: var(--md-ink-soft); line-height: 1.85; margin: 0 0 12px; }
.md-legal p:last-child { margin-bottom: 0; }
.md-legal ul { margin: 0 0 14px; padding-left: 22px; color: var(--md-ink-soft); }
.md-legal li { margin-bottom: 6px; line-height: 1.7; }

@media (max-width: 575.98px) {
  .md-legal section { padding: 20px; }
}

@media (max-width: 575.98px) {
  .md-page { padding: 20px 0 40px; }
  .md-shell { padding: 0 14px; }
  .card-body { padding: 18px; }
  .md-page-head__title { font-size: 1.35rem; }
}

@media print {
  .navbar, footer, .md-no-print { display: none !important; }
  body { background: #fff !important; }
}

/* ============================================================== contrast ==
   Text that could not be read against what sits behind it.

   Two separate problems. The palette had three tokens below the 4.5:1 WCAG AA
   floor for body text, fixed at :root above. The rest is cascade: the legacy
   sheets set white text on elements whose dark background this layer later
   removed, and those declarations carry !important, so neutralising the
   background was not enough to make the text visible again.
   ========================================================================== */

/* custom.css ends with `li.nav-item.active { background-color: #007b59
   !important; color: #fff !important }`. The background is overridden further
   up, but nothing outranked the colour, so the list item went on handing
   white down to anything inside it that is not the .nav-link itself -- on a
   navbar that is now near-white. */
.navbar li.nav-item.active,
.navbar li.nav-item.active > * {
  color: var(--md-ink-soft);
}
.navbar .nav-item.active > .nav-link,
.navbar .nav-item.active > .nav-link.nav-link-color {
  color: var(--md-brand) !important;
}

/* Bootstrap's own defaults, all of which put #fff on a mid-tone fill and land
   between 3.0 and 4.0:1. They are reachable through markup this project still
   uses, so they are brought onto the palette rather than left as-is. */
.badge-primary { background-color: var(--md-brand) !important; color: #fff !important; }
.badge-success { background-color: var(--md-success) !important; color: #fff !important; }
.badge-info    { background-color: var(--md-info) !important; color: #fff !important; }
.badge-warning { background-color: var(--md-warning) !important; color: #fff !important; }
.badge-danger  { background-color: var(--md-danger) !important; color: #fff !important; }
.badge-light   { background-color: #eef2f2 !important; color: var(--md-ink) !important; }
.badge-secondary { background-color: #eef2f2 !important; color: var(--md-ink) !important; }

.progress-bar { background-color: var(--md-brand); color: #fff; }

.list-group-item.active {
  background-color: var(--md-brand);
  border-color: var(--md-brand);
  color: #fff;
}
.list-group-item-light { background-color: #f7f9f9; color: var(--md-ink-soft); }

.dropdown-item.active, .dropdown-item:active {
  background-color: var(--md-brand-light);
  color: var(--md-brand-dark);
}

.alert-light { background-color: #f7f9f9; border-color: var(--md-line); color: var(--md-ink-soft); }

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

.custom-control-input:checked ~ .custom-control-label::before {
  background-color: var(--md-brand);
  border-color: var(--md-brand);
}

/* Used by the admin's take-offline control. Bootstrap leaves it at #6c757d,
   which is legible but sits outside this palette. */
.btn-outline-secondary, .btn.btn-outline-secondary {
  color: var(--md-ink-soft);
  border-color: var(--md-line-strong);
  background: #fff;
}
.btn-outline-secondary:hover, .btn.btn-outline-secondary:hover {
  background: var(--md-ink-soft);
  border-color: var(--md-ink-soft);
  color: #fff;
}

/* A disabled button keeps its own colours at .55 opacity, which drops white
   on brand to roughly 2:1. Give it a flat, readable resting state instead. */
.btn.disabled, .btn:disabled {
  opacity: 1;
  background-color: #eef2f2;
  border-color: #e2e8e8;
  color: var(--md-ink-muted);
  box-shadow: none;
  cursor: not-allowed;
}

/* `.text-muted` is Bootstrap's #6c757d, which clears AA on white but not on
   the tinted rows and chips it is used inside. Pin it to the palette. */
.text-muted, .small.text-muted, .text-muted.small { color: var(--md-ink-muted) !important; }

/* A stray inline `style="color: white"` on a table cell of accept/decline
   buttons -- the buttons colour themselves, the cell just made any text
   beside them invisible on the white striped table. */
table td[style*="color: white"], table td[style*="color:white"] { color: var(--md-ink) !important; }

/* Bootstrap's pressed state for these is `:not(:disabled):not(.disabled):active`
   -- four classes deep, so it outranks the plain `:hover` rules above and
   flashes #007bff behind white text while the mouse is down. Matched here so
   the button presses in the brand colour instead. */
.btn-outline-primary:not(:disabled):not(.disabled):active,
.btn-outline-primary:not(:disabled):not(.disabled).active,
.show > .btn-outline-primary.dropdown-toggle {
  background-color: var(--md-brand);
  border-color: var(--md-brand);
  color: #fff;
}
.btn-outline-danger:not(:disabled):not(.disabled):active,
.btn-outline-danger:not(:disabled):not(.disabled).active {
  background-color: var(--md-danger);
  border-color: var(--md-danger);
  color: #fff;
}
.btn-outline-secondary:not(:disabled):not(.disabled):active,
.btn-outline-secondary:not(:disabled):not(.disabled).active {
  background-color: var(--md-ink-soft);
  border-color: var(--md-ink-soft);
  color: #fff;
}

/* --------------------------------------------------- theme gradients -- */

/* The admin panel loads adminx.css, a Bootstrap 4 theme that paints buttons,
   alerts and dropdown rows with the `background` shorthand carrying a
   linear-gradient: `background: #007bff linear-gradient(...) repeat-x`. Every
   brand colour in this sheet is set with `background-color`, which cannot
   displace a gradient image -- so the theme's blue went on showing through
   underneath and the admin's primary buttons stayed Bootstrap blue on pages
   restyled everywhere else. Clearing the image lets the colour beneath show.

   Scoped to the three components that actually carry one. Not everything
   gradient-filled is a mistake -- .bg-gradient-*, the striped progress bar
   and the carousel controls are asking for one on purpose. */
.btn, .alert, .dropdown-item {
  background-image: none !important;
}