:root {
  --care-teal: #087f75;
  --care-teal-dark: #065f58;
  --care-teal-soft: #e8f6f3;
  --care-green: #2f855a;
  --care-surface: #f5f7f8;
  --care-border: #dce3e7;
  --tblr-primary: var(--care-teal);
  --tblr-primary-rgb: 8, 127, 117;
}

html { background: var(--care-surface); }
body { color: #263238; background: var(--care-surface); }
.page { min-height: 100vh; }
.care-sidebar { background: #fff; border-right: 1px solid var(--care-border); }
.care-topbar { min-height: 64px; background: rgba(255, 255, 255, .96); border-bottom: 1px solid var(--care-border); }
.navbar-brand { gap: .75rem; justify-content: flex-start; white-space: normal; }
.brand-mark { width: 2.5rem; height: 2.5rem; display: inline-grid; place-items: center; border-radius: .75rem; color: #fff; background: linear-gradient(145deg, var(--care-teal), var(--care-green)); font-size: 1.4rem; box-shadow: 0 .25rem .8rem rgba(8,127,117,.2); }
.brand-copy { display: grid; line-height: 1.15; font-size: .9rem; }
.brand-copy small { color: #667781; font-size: .7rem; margin-top: .25rem; }
.care-sidebar .nav-link { border-radius: .55rem; margin: .1rem .65rem; color: #3a4b53; }
.care-sidebar .navbar-nav { padding-bottom: 2.5rem; }
.care-sidebar .nav-link:hover, .care-sidebar .nav-link.active { color: var(--care-teal-dark); background: var(--care-teal-soft); }
.care-sidebar .nav-link.active { font-weight: 600; box-shadow: inset 3px 0 var(--care-teal); }
.care-sidebar .nav-link-planned { opacity: .72; cursor: not-allowed; }
.nav-section-label { display: block; padding: .75rem 1.4rem .35rem; color: #84929a; font-size: .68rem; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; }
.page-header { padding-top: 1.4rem; }
.page-title { letter-spacing: -.025em; }
.breadcrumb { font-size: .8rem; }
.card { border-color: var(--care-border); box-shadow: 0 1px 2px rgba(30, 50, 60, .04); }
.dashboard-filter { border-top: 3px solid var(--care-teal); }
.btn-teal { --tblr-btn-bg: var(--care-teal); --tblr-btn-border-color: var(--care-teal); --tblr-btn-hover-bg: var(--care-teal-dark); --tblr-btn-hover-border-color: var(--care-teal-dark); color: #fff; }
.text-teal { color: var(--care-teal) !important; }
.metric-card { overflow: hidden; position: relative; }
.metric-card::before { content: ""; position: absolute; inset: 0 auto 0 0; width: 4px; background: var(--metric-accent, var(--care-teal)); }
.metric-card[data-accent="green"] { --metric-accent: #2f855a; }
.metric-card[data-accent="blue"] { --metric-accent: #2878b5; }
.metric-card[data-accent="amber"] { --metric-accent: #b7791f; }
.metric-card[data-accent="red"] { --metric-accent: #c53030; }
.metric-card[data-accent="purple"] { --metric-accent: #6b46c1; }
.metric-card[data-accent="slate"] { --metric-accent: #64748b; }
.metric-card-clickable { transition: transform .16s ease, box-shadow .16s ease, border-color .16s ease; }
.metric-card-clickable:hover { transform: translateY(-2px); border-color: color-mix(in srgb, var(--metric-accent) 38%, var(--care-border)); box-shadow: 0 .45rem 1.2rem rgba(30, 50, 60, .1); }
.metric-card-clickable:focus-within { outline: 3px solid rgba(8,127,117,.18); outline-offset: 2px; }
.metric-value { font-size: 2rem; font-weight: 700; letter-spacing: -.04em; line-height: 1.1; }
.metric-icon { width: 2.65rem; height: 2.65rem; border-radius: .75rem; display: grid; place-items: center; color: var(--metric-accent, var(--care-teal)); background: color-mix(in srgb, var(--metric-accent, var(--care-teal)) 12%, white); font-size: 1.35rem; }
.form-control:focus, .form-select:focus { border-color: var(--care-teal); box-shadow: 0 0 0 .25rem rgba(8,127,117,.12); }
.table thead th { color: #596a73; background: #f8fafb; font-size: .72rem; letter-spacing: .04em; text-transform: uppercase; }
.care-list-toolbar { padding-top: .85rem; padding-bottom: .85rem; }
.care-list-search { max-width: 32rem; }
.care-list-footer { min-height: 4rem; background: #fff; }
.care-list-page-size { width: auto; min-width: 4.75rem; }
.care-list-row-hidden { display: none !important; }
.empty-icon { font-size: 2.2rem; color: #91a1a9; }
.login-card, .auth-card { border-top: 3px solid var(--care-teal); }
.login-mark { display: inline-grid; place-items: center; width: 3.5rem; height: 3.5rem; border-radius: 1rem; color: #fff; background: linear-gradient(145deg, var(--care-teal), var(--care-green)); font-size: 1.7rem; box-shadow: 0 .4rem 1rem rgba(8,127,117,.2); }
.auth-page { min-height: 100vh; background: radial-gradient(circle at top, #eef9f7 0, var(--care-surface) 44%, #f7f9fa 100%); }
.auth-brand { display: inline-flex; align-items: center; gap: .75rem; color: #263238; text-decoration: none; }
.auth-brand:hover { color: var(--care-teal-dark); }
.auth-page .container-tight { max-width: 32rem; }
.auth-login-container { width: min(920px, calc(100% - 2rem)); max-width: 920px; padding: 1rem 0; }
.login-frame { min-height: min(680px, calc(100dvh - 2rem)); display: grid; grid-template-columns: minmax(0, .92fr) minmax(390px, 1.08fr); overflow: hidden; border: 1px solid rgba(23,50,77,.12); border-radius: 1.25rem; background: #fff; box-shadow: 0 1.25rem 4rem rgba(23,50,77,.14); }
.login-frame-artwork { min-height: min(620px, calc(100dvh - 2rem)); grid-template-columns: minmax(320px, .9fr) minmax(390px, 1.1fr); }
.login-art { position: relative; min-height: 100%; overflow: hidden; background: linear-gradient(145deg, #17324d 0%, #0b625f 67%, #087f75 100%); }
.login-art-grid { position: absolute; inset: 0; opacity: .16; background-image: linear-gradient(rgba(255,255,255,.18) 1px, transparent 1px), linear-gradient(90deg, rgba(255,255,255,.18) 1px, transparent 1px); background-size: 42px 42px; mask-image: linear-gradient(to bottom right, #000, transparent 78%); }
.login-art-orbit { position: absolute; border: 1px solid rgba(255,255,255,.16); border-radius: 50%; }
.login-art-orbit-one { width: 28rem; height: 28rem; left: -14rem; top: -10rem; box-shadow: 0 0 0 4rem rgba(255,255,255,.025), 0 0 0 8rem rgba(255,255,255,.018); }
.login-art-orbit-two { width: 20rem; height: 20rem; right: -10rem; bottom: -7rem; background: rgba(114,219,199,.07); box-shadow: 0 0 0 3rem rgba(255,255,255,.025); }
.login-art-mark { position: absolute; left: 50%; top: 43%; display: grid; place-items: center; width: 7.5rem; height: 7.5rem; transform: translate(-50%, -50%); border: 1px solid rgba(255,255,255,.3); border-radius: 2.1rem; color: #fff; background: linear-gradient(145deg, rgba(255,255,255,.2), rgba(255,255,255,.08)); box-shadow: 0 1.4rem 3rem rgba(0,0,0,.2), inset 0 1px rgba(255,255,255,.3); backdrop-filter: blur(8px); font-size: 3.6rem; }
.login-art-card { position: absolute; display: grid; grid-template-columns: 2rem 1fr; grid-template-rows: 1fr 1fr; gap: .35rem .65rem; width: 9.5rem; padding: .85rem; border: 1px solid rgba(255,255,255,.28); border-radius: .8rem; background: rgba(255,255,255,.13); box-shadow: 0 .8rem 2rem rgba(0,0,0,.13); backdrop-filter: blur(7px); }
.login-art-card i { grid-row: 1 / 3; align-self: center; color: #9ce5da; font-size: 1.55rem; }
.login-art-card span { display: block; height: .4rem; align-self: end; border-radius: 1rem; background: rgba(255,255,255,.72); }
.login-art-card span:last-child { width: 62%; align-self: start; opacity: .55; }
.login-art-card-top { right: 1.6rem; top: 13%; transform: rotate(3deg); }
.login-art-card-bottom { left: 1.5rem; bottom: 15%; transform: rotate(-4deg); }
.login-art-dots { position: absolute; right: 2rem; bottom: 2rem; display: grid; grid-template-columns: repeat(3, .35rem); gap: .55rem; }
.login-art-dots i { width: .35rem; height: .35rem; border-radius: 50%; background: rgba(255,255,255,.45); }
.login-assurance { position: relative; display: flex; flex-direction: column; padding: clamp(2rem, 4vw, 3.5rem); overflow: hidden; color: #fff; background: linear-gradient(145deg, #17324d 0%, #0b625f 70%, #087f75 100%); }
.login-assurance::before, .login-assurance::after { content: ""; position: absolute; border-radius: 50%; border: 1px solid rgba(255,255,255,.12); }
.login-assurance::before { width: 24rem; height: 24rem; right: -12rem; top: -8rem; }
.login-assurance::after { width: 18rem; height: 18rem; left: -10rem; bottom: -9rem; background: rgba(255,255,255,.035); }
.auth-brand-inverse, .auth-brand-inverse:hover { position: relative; z-index: 1; color: #fff; }
.auth-brand-inverse .brand-copy small { color: #bfe9e4; }
.login-assurance-copy { position: relative; z-index: 1; margin-block: auto; }
.login-eyebrow { color: #8ee3d7; font-size: .72rem; font-weight: 800; letter-spacing: .12em; text-transform: uppercase; }
.login-assurance h1 { margin: .8rem 0 1rem; color: #fff; font-size: clamp(2.2rem, 4vw, 3.25rem); line-height: 1.03; letter-spacing: -.045em; }
.login-assurance p { max-width: 27rem; color: #dcebea; font-size: 1rem; line-height: 1.65; }
.login-trust { display: grid; gap: .65rem; margin-top: 1.5rem; color: #eaf5f4; font-size: .82rem; }
.login-trust i { width: 1.4rem; color: #8ee3d7; font-size: 1rem; }
.login-assurance-foot { position: relative; z-index: 1; color: #b9d2d0; font-size: .72rem; letter-spacing: .05em; text-transform: uppercase; }
.login-form-panel { display: grid; place-items: center; padding: clamp(1.75rem, 4vw, 4rem); background: linear-gradient(180deg, #fff, #fbfdfc); }
.login-form-inner { width: min(100%, 25rem); }
.login-form-inner h2 { color: #17324d; font-size: 1.75rem; letter-spacing: -.025em; }
.login-help { display: flex; gap: .45rem; margin-top: 1.15rem; padding: .7rem .8rem; border-radius: .55rem; color: #5b6b73; background: #f1f6f5; font-size: .75rem; line-height: 1.35; }
.login-help i { color: var(--care-teal); font-size: 1rem; }
.login-footer { margin-top: 1.2rem; color: #87949a; font-size: .68rem; text-align: center; }
.footer { border-top: 1px solid var(--care-border); }
.schedule-totals { display: flex; gap: .75rem; flex-wrap: wrap; }
.schedule-totals span { padding: .45rem .7rem; border: 1px solid var(--care-border); border-radius: .5rem; background: #fff; color: #596a73; }
.schedule-totals span span { padding: 0; border: 0; border-radius: 0; }
.schedule-total-duration { display: block; margin-top: .15rem; color: #718087; font-size: .72rem; font-style: italic; text-align: center; }
.schedule-sheet { border-top: 3px solid var(--care-teal); }
.schedule-floating-header { position: fixed; top: 0; z-index: 1040; display: none; height: 43px; overflow: hidden; border: 1px solid var(--care-border); border-top: 3px solid var(--care-teal); background: #f8fafb; box-shadow: 0 .25rem .65rem rgba(23,50,77,.14); }
.schedule-floating-header.is-visible { display: block; }
.schedule-floating-track { display: grid; grid-template-columns: 230px repeat(4, minmax(235px, 1fr)); min-width: 1180px; height: 40px; will-change: transform; }
.schedule-floating-track span, .schedule-floating-client { display: flex; align-items: center; padding: .65rem .75rem; color: #596a73; background: #f8fafb; font-size: .72rem; font-weight: 600; letter-spacing: .04em; text-transform: uppercase; }
.schedule-floating-track span { border-right: 1px solid var(--care-border); }
.schedule-floating-client { position: absolute; inset: 3px auto 0 0; z-index: 2; width: 230px; height: 40px; box-shadow: 2px 0 0 var(--care-border); }
.schedule-grid { min-width: 1180px; table-layout: fixed; }
.schedule-grid th, .schedule-grid td { vertical-align: top; }
.schedule-field-label { margin-bottom: .2rem; color: var(--tblr-secondary-color); font-size: .6875rem; font-weight: 600; }
.schedule-grid .client-column { position: sticky; left: 0; z-index: 2; width: 230px; min-width: 230px; background: #fff; box-shadow: 2px 0 0 var(--care-border); }
.schedule-grid thead .client-column { z-index: 5; background: #f8fafb; box-shadow: 2px 2px 0 var(--care-border); }
.schedule-cell { min-width: 235px; transition: background-color .15s ease, opacity .15s ease; }
.schedule-cell.visit-excluded .visit-fields { opacity: .48; }
.schedule-cell details summary { cursor: pointer; }
.schedule-cell[data-call="Morning"] { box-shadow: inset 0 3px #e9a23b; }
.schedule-cell[data-call="Afternoon"] { box-shadow: inset 0 3px #2878b5; }
.schedule-cell[data-call="Tea"] { box-shadow: inset 0 3px #6b46c1; }
.schedule-cell[data-call="Evening"] { box-shadow: inset 0 3px #087f75; }
.care-time-input { min-width: 0; cursor: pointer; color-scheme: light; }
.care-time-input:read-only { cursor: default; }
.care-time-input::-webkit-calendar-picker-indicator { cursor: pointer; opacity: .72; }
.care-time-input:not(:read-only)::-webkit-calendar-picker-indicator:hover { opacity: 1; }
.care-time-picker .care-time-input::-webkit-calendar-picker-indicator { display: none; }
.care-time-picker-button { min-width: 2.4rem; justify-content: center; color: var(--care-teal); background: #f4fbf9; border-color: #b8dcd7; cursor: pointer; }
.care-time-picker-button:hover, .care-time-picker-button:focus-visible { color: #fff; background: var(--care-teal); border-color: var(--care-teal); }
.care-time-dialog { width: min(28rem, calc(100vw - 2rem)); padding: 0; overflow: hidden; color: #17324d; background: #fff; border: 1px solid var(--care-border); border-radius: .85rem; box-shadow: 0 1.25rem 3.5rem rgba(23, 50, 77, .25); }
.care-time-dialog::backdrop { background: rgba(23, 50, 77, .48); backdrop-filter: blur(2px); }
.care-time-dialog-panel { display: grid; gap: 1rem; padding: 1.1rem; }
.care-time-dialog-header, .care-time-dialog-actions { display: flex; align-items: center; justify-content: space-between; gap: 1rem; }
.care-time-selected { display: flex; align-items: center; justify-content: center; gap: .5rem; padding: .7rem; color: var(--care-teal-dark); font-size: 1.35rem; background: var(--care-teal-soft); border-radius: .55rem; }
.care-time-columns { display: grid; grid-template-columns: 1fr 1fr; gap: .85rem; }
.care-time-column-label { margin-bottom: .35rem; color: #52606d; font-size: .72rem; font-weight: 700; letter-spacing: .06em; text-align: center; text-transform: uppercase; }
.care-time-scroll { height: 14rem; padding: .3rem; overflow-y: scroll; scrollbar-width: auto; scrollbar-color: var(--care-teal) #e3efed; background: #f8fafb; border: 1px solid var(--care-border); border-radius: .55rem; }
.care-time-scroll::-webkit-scrollbar { width: 14px; }
.care-time-scroll::-webkit-scrollbar-track { background: #e3efed; border-radius: 999px; }
.care-time-scroll::-webkit-scrollbar-thumb { background: var(--care-teal); border: 3px solid #e3efed; border-radius: 999px; }
.care-time-option { display: block; width: 100%; margin-bottom: .2rem; padding: .5rem; color: #304853; font: inherit; font-weight: 600; text-align: center; background: #fff; border: 1px solid transparent; border-radius: .4rem; }
.care-time-option:hover, .care-time-option:focus-visible { color: var(--care-teal-dark); background: #dff1ed; border-color: #87c8c0; outline: 0; }
.care-time-option.active { color: #fff; background: var(--care-teal); border-color: var(--care-teal); }
.attendance-card { padding: 1rem; border: 1px solid var(--care-border); border-radius: .65rem; background: #fbfcfc; }
.gps-evidence { height: 100%; padding: .75rem; border: 1px solid var(--care-border); border-radius: .5rem; background: #fff; }

@media (min-width: 768px) {
  .schedule-sheet .table-responsive { max-height: none; overflow-x: auto; overflow-y: visible; scrollbar-gutter: auto; }
  .schedule-grid thead th { position: sticky; top: 0; z-index: 4; background: #f8fafb; box-shadow: 0 2px 0 var(--care-border); }
  .schedule-grid thead .client-column { z-index: 5; }
}

@media (max-width: 767.98px) {
  .schedule-floating-header { display: none !important; }
  .schedule-sheet { border: 0; background: transparent; box-shadow: none; }
  .schedule-sheet .table-responsive { overflow: visible; }
  .schedule-grid { min-width: 0; table-layout: auto; display: block; }
  .schedule-grid thead { display: none; }
  .schedule-grid tbody, .schedule-grid tr, .schedule-grid td, .schedule-grid th { display: block; width: 100%; }
  .schedule-grid tr { margin-bottom: 1rem; border: 1px solid var(--care-border); border-radius: .65rem; overflow: hidden; background: #fff; }
  .schedule-grid .client-column { position: static; width: 100%; min-width: 0; box-shadow: none; background: var(--care-teal-soft); }
  .schedule-cell { min-width: 0; padding-top: 1.75rem; position: relative; }
  .schedule-cell::before { content: attr(data-call); position: absolute; top: .45rem; right: .75rem; color: #657780; font-size: .7rem; font-weight: 700; letter-spacing: .05em; text-transform: uppercase; }
}

@media (min-width: 992px) {
  .care-sidebar,
  .care-sidebar ~ .page-wrapper { transition: width .2s ease, margin-inline-start .2s ease; }
  body.sidebar-collapsed .care-sidebar { width: var(--tblr-sidebar-folded-width, 4rem); }
  body.sidebar-collapsed .care-sidebar ~ .page-wrapper { --tblr-sidebar-width: var(--tblr-sidebar-folded-width, 4rem); }
  body.sidebar-collapsed .page-wrapper .container-xl { max-width: none; }
  body.sidebar-collapsed .care-sidebar .brand-copy,
  body.sidebar-collapsed .care-sidebar .nav-link-title,
  body.sidebar-collapsed .care-sidebar .nav-section-label { display: none; }
  body.sidebar-collapsed .care-sidebar .navbar-brand { justify-content: center; }
  body.sidebar-collapsed .care-sidebar .nav-link { justify-content: center; }
}

@media (max-width: 991.98px) {
  .care-sidebar { border-right: 0; border-bottom: 1px solid var(--care-border); }
  .page-header { padding-top: 1rem; }
  .metric-value { font-size: 1.65rem; }
  .auth-login-container { width: min(32rem, calc(100% - 2rem)); }
  .login-frame { min-height: auto; grid-template-columns: 1fr; }
  .login-art { display: none; }
  .login-assurance { display: none; }
  .login-form-panel { padding: 1.5rem; }
}

@media (max-height: 720px) and (min-width: 992px) {
  .login-frame { min-height: calc(100dvh - 1rem); }
  .auth-login-container { padding: .5rem 0; }
  .login-assurance, .login-form-panel { padding-block: 1.5rem; }
  .login-assurance h1 { font-size: 2.35rem; }
  .login-trust { margin-top: 1rem; }
  .login-form-inner .login-mark { width: 3rem; height: 3rem; }
  .login-form-inner .mb-4 { margin-bottom: 1rem !important; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { scroll-behavior: auto !important; transition-duration: .01ms !important; animation-duration: .01ms !important; }
}
.care-date-picker {
  position: relative;
}

.care-date-picker-button {
  min-width: 2.75rem;
  justify-content: center;
  color: var(--care-teal, #087f75);
  background: #f7fbfa;
  border: var(--tblr-border-width) solid var(--tblr-border-color);
  cursor: pointer;
}

.care-date-picker-button:hover {
  color: #fff;
  background: var(--care-teal, #087f75);
  border-color: var(--care-teal, #087f75);
}

.care-date-picker-native {
  position: absolute;
  width: 1px;
  height: 1px;
  inset-inline-end: 2.75rem;
  bottom: 0;
  opacity: 0;
  pointer-events: none;
}

.care-date-picker:focus-within .care-date-picker-button {
  border-color: var(--care-teal, #087f75);
  box-shadow: 0 0 0 .25rem rgba(8, 127, 117, .12);
}

.care-report-tabs-header {
  display: block;
  min-height: 0;
  padding: 1rem 1rem 0;
  border-bottom: 0;
}

.care-report-tabs {
  width: 100%;
  gap: .5rem;
  flex-wrap: wrap;
  border-bottom: 0;
}

.care-report-tabs .nav-item {
  flex: 1 1 13rem;
}

.care-report-tabs .nav-link {
  width: 100%;
  min-height: 2.75rem;
  padding: .7rem 1rem;
  color: var(--care-teal-dark);
  font-weight: 600;
  background: var(--care-teal-soft);
  border: 1px solid #b8dcd7;
  border-radius: .55rem .55rem 0 0;
}

.care-report-tabs .nav-link:hover,
.care-report-tabs .nav-link:focus-visible {
  color: var(--care-teal-dark);
  background: #d7efeb;
  border-color: var(--care-teal);
}

.care-report-tabs .nav-link.active {
  color: #fff;
  background: var(--care-teal);
  border-color: var(--care-teal);
  box-shadow: 0 .2rem .5rem rgba(8, 127, 117, .2);
}

.care-report-pane-header {
  min-height: 0;
  padding-top: 1.25rem;
  padding-bottom: 1rem;
  gap: 1rem;
  flex-wrap: wrap;
  align-items: center;
  border-top: 1px solid var(--care-border);
}

.care-report-pane-header .card-actions {
  margin-top: 0;
  transform: none;
}

.care-report-table-scroll {
  max-height: none;
  overflow: visible;
}

.care-report-table {
  margin-bottom: 0;
  border-collapse: separate;
  border-spacing: 0;
}

.care-report-table thead th {
  position: sticky;
  top: 0;
  z-index: 3;
  background: #edf5f3;
  border-bottom: 2px solid #a8d2cc;
  box-shadow: 0 .2rem .45rem rgba(30, 50, 60, .08);
}

.care-report-table tfoot td {
  position: sticky;
  bottom: 0;
  z-index: 2;
  padding-top: 1rem;
  padding-bottom: 1rem;
  color: #173f3b;
  font-size: .95rem;
  font-weight: 700;
  background: #dff1ed;
  border-top: 3px solid var(--care-teal);
  box-shadow: 0 -.35rem .8rem rgba(30, 50, 60, .1);
}

.care-report-total-label {
  display: inline-flex;
  align-items: center;
  gap: .5rem;
  color: var(--care-teal-dark);
  font-size: .78rem;
  font-weight: 800;
  letter-spacing: .06em;
  text-transform: uppercase;
}

.care-report-duration-detail {
  font-size: .72rem;
  font-style: italic;
  font-weight: 400;
  white-space: nowrap;
  opacity: .78;
}

@media (max-width: 575.98px) {
  .care-report-tabs .nav-item { flex-basis: 100%; }
  .care-report-tabs .nav-link { border-radius: .5rem; }
  .care-report-table-scroll { overflow-x: auto; overflow-y: visible; }
}
