/* Tabler owns layout and components. This file holds the brand (colour, logo), accessibility fixes, and the
   small set of tokens that turn Tabler's admin defaults into a calmer product: type scale, surfaces, spacing. */
:root {
  --care-accent: #16856b;
  --care-accent-rgb: 22, 133, 107;
  --care-accent-hover: #13755e;
  --care-ink: #115643;
  --care-on-accent: #fff;
  --tblr-primary: var(--care-accent);
  --tblr-primary-rgb: var(--care-accent-rgb);
  --tblr-green: var(--care-accent);
  --tblr-green-rgb: var(--care-accent-rgb);
  --tblr-body-bg: #f6f7f6;
  --tblr-font-sans-serif: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  /* Slightly larger, airier text than Tabler's 14px admin default. */
  --tblr-body-font-size: .9375rem;
  --tblr-body-line-height: 1.55;
  /* Cards float on a soft shadow instead of sitting in a grey outline. */
  --tblr-shadow-card: 0 1px 2px rgba(16, 24, 20, .04), 0 2px 8px rgba(16, 24, 20, .04);
}
.card {
  --tblr-card-border-color: rgba(16, 24, 20, .06);
  --tblr-card-spacer-y: 1.5rem;
  --tblr-card-spacer-x: 1.5rem;
  --tblr-card-cap-padding-y: 1.125rem;
  --tblr-card-cap-padding-x: 1.5rem;
  --tblr-card-cap-bg: transparent;
}
.card-title { font-size: 1.0625rem; font-weight: 600; letter-spacing: -.01em; }
.card-subtitle { color: var(--tblr-secondary); }
.card-footer { background: transparent; }
.page-header { margin-top: 0; padding-top: 2rem; }
.page-pretitle { letter-spacing: .06em; }
.page-title { font-size: 1.75rem; line-height: 1.2; font-weight: 700; letter-spacing: -.025em; }
.page-body { margin-top: 1.5rem; margin-bottom: 3rem; }
.form-label { font-weight: 500; }
.form-hint { color: var(--tblr-secondary); }
.btn { font-weight: 500; }
/* One header row: white, a hairline underneath, no second navigation bar. */
.care-header { background: #fff; border-bottom: 1px solid rgba(16, 24, 20, .07); box-shadow: none; min-height: 4rem; }
.care-header .nav-link { font-weight: 500; }
.care-header .nav-item.active .nav-link { color: var(--care-ink); }
.care-account-toggle { border-radius: var(--tblr-border-radius-pill); }
.care-account-toggle:hover { background: rgba(var(--care-accent-rgb), .06); }
.care-account-menu { min-width: 16rem; }
.care-notice { display: flex; align-items: center; gap: .5rem; }
.care-notice .alert-icon { margin: 0; }
.dropdown-item.active, .dropdown-item:active { color: var(--care-ink); background: rgba(var(--care-accent-rgb), .08); }
.care-brand {
  gap: .625rem;
  color: var(--care-ink);
  font-size: 1.25rem;
  font-weight: 600;
  letter-spacing: -.025em;
}
/* An exact viewport onto the top-left Forest & sage mark in maybe_logo.png.
   Source pixels are unchanged; the other concepts and labels remain outside it. */
.care-logo {
  --logo-size: 42px;
  display: inline-block;
  position: relative;
  flex: 0 0 var(--logo-size);
  width: var(--logo-size);
  height: var(--logo-size);
  overflow: hidden;
  vertical-align: middle;
}
.care-logo img {
  position: absolute;
  width: calc(var(--logo-size) * 3.339130435);
  max-width: none;
  height: auto;
  left: calc(var(--logo-size) * -.434782609);
  top: calc(var(--logo-size) * -.293478261);
}
.care-logo-large { --logo-size: 112px; }
.care-logo-filter { position: absolute; width: 0; height: 0; pointer-events: none; }
.care-logo img { filter: url(#care-logo-tint); }
.empty-img { margin-bottom: 1.5rem; }
.nav-link-icon img { opacity: .65; }
.nav-item.active .nav-link { color: var(--tblr-primary); }
.btn-primary {
  --tblr-btn-color: var(--care-on-accent);
  --tblr-btn-hover-color: var(--care-on-accent);
  --tblr-btn-active-color: var(--care-on-accent);
  --tblr-btn-bg: var(--care-accent);
  --tblr-btn-border-color: var(--care-accent);
  --tblr-btn-hover-bg: var(--care-accent-hover);
  --tblr-btn-hover-border-color: var(--care-accent-hover);
  --tblr-btn-active-bg: var(--care-accent-hover);
  --tblr-btn-active-border-color: var(--care-accent-hover);
}
.btn-outline-primary {
  --tblr-btn-color: var(--care-accent);
  --tblr-btn-border-color: var(--care-accent);
  --tblr-btn-hover-bg: var(--care-accent);
  --tblr-btn-hover-border-color: var(--care-accent);
}
.skip-link { position: absolute; top: -100px; left: 16px; padding: 12px; background: white; z-index: 1100; }
.skip-link:focus { top: 8px; }
a:focus-visible, button:focus-visible { outline: 3px solid var(--care-ink); outline-offset: 3px; }
#main:focus { outline: none; }
.care-auth-brand .care-logo { --logo-size: 52px; }
.care-text-button {
  display: inline;
  padding: 0;
  border: 0;
  background: none;
  color: var(--care-ink);
  font: inherit;
  cursor: pointer;
}
.care-text-button:hover { text-decoration: underline; }
.care-text-button:disabled { cursor: default; opacity: .6; }
.form-check-input:checked { background-color: var(--care-ink); border-color: var(--care-ink); }
.form-control:focus, .form-select:focus {
  border-color: var(--care-ink);
  box-shadow: 0 0 0 .25rem rgba(var(--care-accent-rgb), .15);
}
.input-group:focus-within {
  border-color: var(--care-accent);
  box-shadow: 0 0 0 .25rem rgba(var(--care-accent-rgb), .15);
}
.input-group .form-control:focus { box-shadow: none; }
.care-auth .form-check-input:focus {
  border-color: var(--care-accent);
  box-shadow: 0 0 0 .25rem rgba(var(--care-accent-rgb), .15);
}
@media (max-width: 767px) {
  .care-brand { font-size: 1.1rem; }
  .care-logo { --logo-size: 36px; }
  .care-logo-large { --logo-size: 96px; }
  .empty { padding: 1.5rem .5rem; }
}
/* Compact Tabler password controls with a generous keyboard/touch target. */
.care-password-toggle {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 44px;
  min-height: 44px;
  padding: 6px;
  margin: -6px;
  border: 0;
  border-radius: var(--tblr-border-radius);
  background: transparent;
  color: var(--tblr-secondary);
  cursor: pointer;
}
.care-password-toggle:hover { color: var(--care-ink); background: rgba(var(--care-accent-rgb), .08); }
.care-password-toggle[hidden], .care-password-toggle svg[hidden] { display: none; }
.input-group.is-invalid { border-color: var(--tblr-danger); }
.input-group .form-control.is-invalid { background-image: none; }
.input-group.is-invalid:focus-within { box-shadow: 0 0 0 .25rem rgba(var(--tblr-danger-rgb), .15); }
.input-group.is-invalid .input-group-text { border-color: var(--tblr-danger); }
.form-control.is-invalid:focus {
  border-color: var(--tblr-danger);
  box-shadow: 0 0 0 .25rem rgba(var(--tblr-danger-rgb), .15);
}
.input-group .form-control.is-invalid:focus { box-shadow: none; }

.care-password-toggle:focus-visible { outline: 2px solid var(--care-ink); outline-offset: 2px; }
@media (max-width: 575px) {
  /* 16px stops iOS zooming into fields; 44px is the minimum touch target. */
  .form-control, .form-select { font-size: 16px; min-height: 44px; }
  .btn { min-height: 44px; }
  .page-header { padding-top: 1.25rem; }
  .page-title { font-size: 1.5rem; }
}

/* Account settings. */
.care-content { max-width: 56rem; }
.care-scroll-x { overflow-x: auto; flex-wrap: nowrap; scrollbar-width: none; }
.care-scroll-x .nav-link { white-space: nowrap; flex: 1 0 auto; }
/* The file input stays in the tab order; its label is the visible button. */
.care-file-input:focus-visible + label { outline: 3px solid var(--care-ink); outline-offset: 2px; }
.care-qr svg { display: block; width: 176px; height: 176px; }
.care-illustration { max-width: 280px; }
.care-illustration svg { width: 100%; height: auto; }
.care-measure { max-width: 36rem; }
.card-link:hover { box-shadow: 0 2px 4px rgba(16, 24, 20, .06), 0 6px 16px rgba(16, 24, 20, .06); }
.care-illustration-lg { max-width: 420px; }

/* Sidebar (Tabler vertical layout, light). White, a hairline edge, quiet section heading, workspace utilities at the foot. */
.care-sidebar { background: #fff; --tblr-navbar-border-color: rgba(16, 24, 20, .07); }
.care-sidebar .navbar-brand { padding: .25rem 0; }
.care-sidebar .nav-link { border-radius: var(--tblr-border-radius); font-weight: 500; color: var(--tblr-secondary); padding: .5rem .75rem; margin: 1px 0; }
.care-sidebar .nav-link:hover { color: var(--tblr-body-color); background: rgba(16, 24, 20, .04); }
.care-sidebar .nav-item.active .nav-link { color: var(--care-ink); background: rgba(var(--care-accent-rgb), .09); }
.care-sidebar .nav-item.active .nav-link-icon { color: var(--care-accent); }
.care-nav-heading { font-size: .6875rem; font-weight: 600; letter-spacing: .06em; text-transform: uppercase; color: var(--tblr-secondary); padding: 1.5rem .75rem .5rem; }
.care-sidebar-foot { border-top: 1px solid rgba(16, 24, 20, .07); padding: 1rem .25rem; margin-top: 1.5rem; }
@media (min-width: 992px) {
  .care-sidebar .container-fluid { padding: 1.25rem 1rem; min-height: 100%; flex-direction: column; align-items: stretch; }
  .care-sidebar .care-sidebar-foot { width: 100%; flex-shrink: 0; padding-bottom: .5rem; }
  .care-sidebar .navbar-collapse { flex-direction: column; align-items: stretch; flex-grow: 1; }
  .care-sidebar .navbar-nav { margin: 0; }
}
@media (max-width: 991.98px) {
  .care-sidebar { border-bottom: 1px solid rgba(16, 24, 20, .07); }
  .care-sidebar .navbar-collapse { padding-bottom: .5rem; }
}
.min-w-0 { min-width: 0; }
@media (min-width: 992px) {
  .care-sidebar { overflow-x: hidden; }
}
.care-sidebar-foot .avatar { flex-shrink: 0; }
/* Keep the eye toggle from making password fields taller than their neighbours; phones keep the 44px target. */
@media (min-width: 576px) {
  .care-password-toggle { min-width: 28px; min-height: 28px; padding: 4px; margin: -6px -4px; }
  .input-group-flat .input-group-text { padding-top: 0; padding-bottom: 0; }
}
/* Top bar (desktop): context, notifications and the account menu. Same white and hairline as the sidebar. */
.care-topbar { background: #fff; border-bottom: 1px solid rgba(16, 24, 20, .07); box-shadow: none; min-height: 3.75rem; }
.care-context { display: flex; align-items: center; font-weight: 500; border-radius: var(--tblr-border-radius); padding: .375rem .625rem; }
.care-context:hover { background: rgba(16, 24, 20, .04); }
.care-context strong { color: var(--care-ink); }

.care-profile-link:hover { background: rgba(var(--care-accent-rgb), .06); }
.care-sidebar .care-sidebar-foot .navbar-nav .nav-link { justify-content: flex-start; }

/* Supplied Tabler settings panel: local navigation and flat sections within one card. */
.care-settings-section { border-bottom: 1px solid var(--tblr-border-color); padding-bottom: 1.5rem; }
.care-settings-body .card-subtitle { margin-top: 0; }
@media (min-width: 992px) {
  .care-settings-nav { border-right: 1px solid var(--tblr-border-color); }
}
@media (max-width: 991.98px) {
  .care-settings-nav { border-bottom: 1px solid var(--tblr-border-color); }
  .care-settings-nav .card-body { padding: .75rem; }
  .care-settings-nav .list-group { flex-direction: row; }
  .care-settings-nav .list-group-item { flex: 1; padding: .5rem; text-align: center; }
}

/* Tabler's root scrollbar compensation offsets content but not the fixed sidebar. */
html.care-shell { margin-left: 0; }
@media (min-width: 992px) {
  .care-sidebar.navbar-vertical.navbar-expand-lg { overflow-y: auto; }
}

.care-notifications { width: 18rem; max-width: calc(100vw - 2rem); }

/* Quiet account-menu states; keep the avatar legible inside Tabler buttons. */
.care-account-button {
  --tblr-btn-hover-bg: #f1f3f2;
  --tblr-btn-active-bg: #f1f3f2;
  --tblr-btn-hover-color: var(--tblr-body-color);
  --tblr-btn-active-color: var(--tblr-body-color);
  color: var(--tblr-body-color);
}
.care-account-button:hover, .care-account-button[aria-expanded="true"] {
  background: #f1f3f2;
  color: var(--tblr-body-color);
}
.care-account-button .avatar { width: 2rem; height: 2rem; min-width: 2rem; flex-shrink: 0; font-size: .8rem; }
.care-sidebar .care-settings-link[aria-current] { font-weight: 700; color: var(--tblr-body-color); }
.care-sidebar .care-settings-link[aria-current] .nav-link-icon { color: var(--tblr-body-color); }

/* Shared workspace gutters match the calendar's fluid Tabler container. */
.care-shell .page-wrapper { --care-page-gutter: 1rem; }
.care-shell .page-wrapper > .page-header { margin-top: 0; padding-top: 1.5rem; }
.care-shell .page-wrapper > .container-xl,
.care-shell .page-wrapper > .page-header > .container-xl,
.care-shell .page-wrapper > .page-body > .container-xl,
.care-shell .page-wrapper > .footer > .container-xl {
  max-width: none;
  padding-inline: var(--care-page-gutter);
}
@media (min-width: 992px) {
  .care-shell .page-wrapper { --care-page-gutter: 1.5rem; }
}
@media (max-width: 575.98px) {
  /* Let header actions wrap below the title instead of squeezing it into a narrow column. */
  .care-shell .page-header .row > .col { flex-basis: 100%; }
}

/* Focused setup form: centred within the workspace, with readable field widths. */
.circle-create { max-width: 48rem; margin-inline: auto; }

/* Keep workspace choices legible inside the narrow sidebar. */
.care-sidebar #workspace-options .nav-link { padding-left: 1rem; font-size: .875rem; }
.care-sidebar #workspace-options .nav-link-title { white-space: normal; overflow-wrap: anywhere; }