:root {
  --ink: #173449;
  --muted: #6d8190;
  --line: #d9e5ed;
  --canvas: #f3f7fa;
  --brand: #075f96;
  --brand-dark: #03436f;
  --brand-soft: #e2f0f9;
  --blue-soft: #e5eef8;
  --shadow: 0 18px 50px rgba(16, 65, 98, .09);
}

.brand-logo {
  display: block;
  max-width: 100%;
  object-fit: contain;
}

.brand-logo-login {
  width: min(470px, 100%);
  padding: 8px 13px;
  border-radius: 12px;
  background: white;
}

.brand-logo-header {
  width: 330px;
  max-height: 54px;
}

.brand-logo-mobile {
  width: min(360px, 100%);
}

.login-story {
  background: linear-gradient(145deg, #032f50 0%, #075b8e 70%, #0873a8 100%);
}

.story-copy .eyebrow { color: #abd8f2; }
.story-days span.accent { color: var(--brand-dark); }
.eyebrow { color: var(--brand); }
.topbar { height: 78px; }
.brand-mark { background: var(--brand); }
.button-primary { background: var(--brand); box-shadow: 0 7px 18px rgba(7,95,150,.19); }
.button-primary:hover { background: var(--brand-dark); }
.avatar { color: var(--brand-dark); background: var(--brand-soft); }
.day.today .day-number { background: var(--brand); }
.occupancy::before { background: #6da9d0; }

.vacation-chip {
  border-left-color: #78a9ca;
  color: #315f7d;
  background: #edf5fa;
}

.vacation-chip.own {
  border-left-color: var(--brand);
  color: var(--brand-dark);
  background: #dceef9;
}

.day.has-own-vacation {
  background: #edf6fc;
}

.day.has-own-vacation:hover {
  background: #e5f1f9;
}

.selection-hint {
  border-bottom-color: #b9d7ea;
  color: var(--brand-dark);
  background: #e5f2fa;
}

.day.selection-preview {
  background: #dceef9 !important;
  box-shadow: inset 0 2px 0 #6ca8cf, inset 0 -2px 0 #6ca8cf;
}

.day.selection-start,
.day.selection-end {
  background: #c8e3f3 !important;
  box-shadow: inset 0 0 0 2px var(--brand);
}

#planned-progress { background: var(--brand); }

.upcoming-vacation {
  border-color: #ccdeeb;
  background: #f1f7fb;
}

.upcoming-vacation:hover { border-color: #82abc7; }
.upcoming-date { background: var(--brand); }

.doctor-search-field {
  position: relative;
  z-index: 5;
}

.doctor-search-field input.selected {
  border-color: var(--brand);
  background: #f5faff;
}

.search-help {
  display: block;
  margin-top: 6px;
  color: #91a2af;
  font-size: 10px;
  font-weight: 500;
}

.login-search-results {
  position: absolute;
  z-index: 40;
  top: 71px;
  right: 0;
  left: 0;
  overflow: hidden;
  padding: 5px;
  border: 1px solid #cbdde9;
  border-radius: 12px;
  background: white;
  box-shadow: 0 16px 40px rgba(9, 61, 96, .18);
}

.login-search-option {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  width: 100%;
  padding: 10px 11px;
  border: 0;
  border-radius: 8px;
  cursor: pointer;
  background: transparent;
  text-align: left;
}

.login-search-option:hover,
.login-search-option.active {
  color: var(--brand-dark);
  background: var(--brand-soft);
}

.login-search-option strong,
.login-search-option small { display: block; }
.login-search-option strong { font-size: 12px; }
.login-search-option small { margin-top: 3px; color: var(--muted); font-size: 9px; }
.login-search-option > span:last-child { color: var(--brand); }
.search-empty { padding: 13px; color: var(--muted); font-size: 11px; text-align: center; }

@media (max-width: 900px) {
  .brand-logo-mobile { width: 330px; }
}

@media (max-width: 640px) {
  .topbar { height: 64px; }
  .brand-logo-header { width: 205px; max-height: 44px; }
  .topbar .brand { max-width: 210px; }
}