/* Shared visual language; monitoring and frontline layouts remain role-specific. */
:root {
  --ui-font: "Segoe UI", system-ui, -apple-system, BlinkMacSystemFont, sans-serif;
  --ui-accent: #05DBF7;
  --ui-accent-dark: #028ca0;
  --ui-accent-soft: #e6fbfe;
  --ui-green: var(--ui-accent);
  --ui-ink: #17231e;
  --ui-muted: #52686c;
  --ui-border: #d4e9ec;
  --ui-radius: 8px;
}
body { font-family: var(--ui-font); line-height: 1.5; -webkit-font-smoothing: antialiased; }
.monitoring-icon { display: inline-block; vertical-align: middle; flex: 0 0 auto; }
.language-toggle {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 3px;
  border: 1px solid var(--ui-border);
  border-radius: 999px;
  background: rgb(255 255 255 / .86);
  color: var(--ui-muted);
  font-size: .78rem;
  font-weight: 800;
  line-height: 1;
  white-space: nowrap;
}
.language-toggle__option {
  min-height: 30px;
  min-width: 38px;
  padding: 0 10px;
  border: 0;
  border-radius: 999px;
  background: transparent;
  color: inherit;
  cursor: pointer;
  font: inherit;
}
.language-toggle__option.is-active {
  background: var(--ui-accent);
  color: #06363c;
}
.language-toggle__option:focus-visible {
  outline: 3px solid var(--ui-accent);
  outline-offset: 2px;
}
.operations-mobile { --ink: var(--ui-ink); --muted: var(--ui-muted); --line: var(--ui-border); --accent: var(--ui-green); background: transparent; }
.operations-mobile h1 { font-size: 1.5rem; line-height: 1.3; letter-spacing: -.025em; font-weight: 700; }
.operations-mobile h2 { font-size: 1.125rem; line-height: 1.4; font-weight: 650; }
.operations-mobile .sidebar { background: linear-gradient(180deg, #045f6c, #02798a); }
.sidebar nav a { display: flex; align-items: center; gap: 12px; border-radius: 10px; }
.operations-mobile .main { min-width: 0; }
.operations-mobile .mobile-panel, .operations-mobile .client-summary, .operations-mobile .notice-panel { border: 1px solid var(--line); border-radius: var(--ui-radius); }
.operations-mobile .button, .operations-mobile button { border-radius: 10px; min-height: 44px; }
.operations-mobile .button { gap: 10px; }
.operations-mobile :is(a, button, input, select, textarea):focus-visible { outline: 3px solid var(--ui-accent); outline-offset: 3px; }
.provider-home { width: 100%; max-width: none; margin: 0; }
.chw-home { width: 100%; max-width: 720px; margin: 0 auto; }
.product-label { display: flex; align-items: center; gap: 8px; margin: 0 0 8px; font-size: .875rem; font-weight: 600; color: var(--muted); }
.provider-home-header { gap: 4px; }
.provider-counters { grid-template-columns: repeat(3, minmax(0, 1fr)); border: 0; background: transparent; gap: 10px; }
.provider-counters div, .provider-counters a, .chw-home .metric-row > span { background: white; border: 1px solid var(--line); border-radius: var(--ui-radius); padding: 14px 16px; text-align: left; text-decoration: none; color: inherit; }
.provider-counters .monitoring-icon, .chw-home .metric-row .monitoring-icon { display: block; margin-bottom: 12px; color: var(--ui-green); }
.provider-counters span { font-size: .875rem; font-weight: 500; }
.provider-counters strong, .chw-home .metric-row strong { display: block; margin-top: 6px; font-size: 1.75rem; line-height: 1.2; font-weight: 700; font-variant-numeric: tabular-nums; }
.chw-home .metric-row { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
.chw-home .metric-row > span { min-width: 0; font-size: .875rem; }
.provider-home .facility-context, .provider-home .work-list { padding: 18px; background: white; border: 1px solid var(--line); border-radius: var(--ui-radius); }
.work-row { min-height: 56px; }
.work-row:hover { background: var(--ui-accent-soft); }
.operations-mobile .mobile-bottom-nav a[aria-current="page"] { color: var(--ui-accent-dark); background: var(--ui-accent-soft); font-weight: 700; }
.operations-mobile .mobile-bottom-nav .nav-icon { width: 24px; height: 24px; color: inherit; }
@media (max-width: 760px) {
  .provider-counters { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 480px) {
  .provider-counters { gap: 8px; }
  .provider-counters div, .provider-counters a { padding: 12px; }
  .operations-mobile h1 { font-size: 1.375rem; }
  .chw-home .metric-row > span { padding: 12px; }
}

.operations-mobile .provider-primary-action { height: auto; padding: 12px 16px; text-align: center; }
/* Shared guided day-first date and date-time controls. */
.mrms-date-control {
  --mrms-date-border: #8aa3b8;
  --mrms-date-focus: #1769aa;
  align-items: stretch;
  background: #fff;
  border: 1px solid var(--mrms-date-border);
  border-radius: .45rem;
  box-sizing: border-box;
  display: grid;
  gap: 0;
  grid-template-columns: minmax(0, 1fr) 2.65rem;
  max-width: 100%;
  min-height: 48px;
  min-width: 0;
  position: relative;
  width: 100%;
}

.mrms-date-control--datetime {
  grid-template-columns: minmax(0, 1fr) repeat(2, 2.65rem);
}

.mrms-date-control > [data-mrms-date-input],
.mrms-date-control > [data-mrms-datetime-input] {
  border: 0 !important;
  border-radius: .4rem 0 0 .4rem !important;
  box-shadow: none !important;
  flex: 1 1 12rem;
  grid-column: 1;
  height: auto;
  min-height: 0 !important;
  min-width: 0;
  outline: 0 !important;
  width: 100% !important;
}

.mrms-date-control:hover,
.mrms-date-control:focus-within {
  border-color: var(--mrms-date-focus);
}

.mrms-date-control:focus-within {
  box-shadow: 0 0 0 3px rgba(23, 105, 170, .16);
}

.field:has(.error) > .mrms-date-control,
.workflow-field-invalid > .mrms-date-control,
.auth-field--invalid .mrms-date-control,
.mrms-date-control:has(> [aria-invalid="true"]) {
  border-color: #b4232f;
}

.mrms-picker-button {
  align-items: center;
  align-self: stretch;
  background: transparent;
  border: 0;
  border-left: 1px solid var(--mrms-date-border);
  border-radius: 0;
  color: #163a59;
  cursor: pointer;
  display: inline-flex;
  justify-content: center;
  max-width: 2.65rem;
  min-height: 0;
  min-width: 2.65rem;
  padding: .5rem;
  position: relative;
  width: 2.65rem;
  z-index: 1;
}

.mrms-picker-button:not(:last-child) {
  border-radius: 0;
}

.mrms-picker-button:last-child {
  border-radius: 0 .4rem .4rem 0;
}

.mrms-picker-button svg {
  fill: none;
  height: 1.15rem;
  stroke: currentColor;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-width: 1.8;
  width: 1.15rem;
}

.mrms-picker-button:hover,
.mrms-picker-button:focus-visible {
  background: #eef8fb;
  box-shadow: inset 0 0 0 2px rgba(23, 105, 170, .38);
  outline: 0;
}

.mrms-picker-button:disabled {
  cursor: not-allowed;
  opacity: .5;
}

.mrms-date-control > .mrms-native-picker {
  border: 0 !important;
  height: 100%;
  left: auto;
  min-height: 0 !important;
  opacity: 0;
  padding: 0 !important;
  pointer-events: none;
  position: absolute;
  right: 0;
  top: 0;
  width: 2.65rem !important;
  z-index: 0;
}

/* The calendar is portalled to <body>, so clipped form/scroll containers cannot
   cut it off. JavaScript measures this rendered box before applying flip/shift. */
.mrms-calendar-popup {
  box-sizing: border-box;
  position: fixed;
  z-index: 2000;
  width: min(20rem, calc(100vw - 16px));
  overflow: auto;
  overscroll-behavior: contain;
  padding: .75rem;
  border: 1px solid #9fb4c3;
  border-radius: .65rem;
  background: #fff;
  color: #17344d;
  box-shadow: 0 16px 38px rgba(17, 42, 58, .24);
  font: 400 .9rem/1.25 system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
}

.mrms-calendar-popup[hidden] { display: none !important; }

.mrms-calendar-header {
  display: grid;
  grid-template-columns: 2.5rem minmax(0, 1fr) 2.5rem;
  align-items: center;
  gap: .35rem;
  margin-bottom: .45rem;
}

.mrms-calendar-header strong {
  min-width: 0;
  overflow-wrap: anywhere;
  text-align: center;
  text-transform: capitalize;
}

.mrms-calendar-header button,
.mrms-calendar-days button,
.mrms-calendar-footer button {
  min-width: 0;
  border: 0;
  border-radius: .4rem;
  background: transparent;
  color: inherit;
  cursor: pointer;
  font: inherit;
}

.mrms-calendar-header button {
  min-height: 2.35rem;
  padding: .2rem;
  font-size: 1.6rem;
  line-height: 1;
}

.mrms-calendar-weekdays,
.mrms-calendar-days {
  display: grid;
  grid-template-columns: repeat(7, minmax(0, 1fr));
  gap: .15rem;
}

.mrms-calendar-weekdays span {
  min-width: 0;
  padding: .35rem 0;
  color: #52697a;
  font-size: .72rem;
  font-weight: 750;
  text-align: center;
  text-transform: capitalize;
}

.mrms-calendar-days button {
  min-height: 2.25rem;
  padding: .25rem 0;
  text-align: center;
}

.mrms-calendar-header button:hover:not(:disabled),
.mrms-calendar-days button:hover:not(:disabled),
.mrms-calendar-footer button:hover:not(:disabled) {
  background: #e9f5f7;
}

.mrms-calendar-popup button:focus-visible {
  outline: 3px solid #028ca0;
  outline-offset: 1px;
}

.mrms-calendar-days button.is-outside-month { color: #758896; }
.mrms-calendar-days button.is-today { box-shadow: inset 0 0 0 1px #028ca0; }
.mrms-calendar-days button.is-selected { background: #076979; color: #fff; font-weight: 750; }
.mrms-calendar-popup button:disabled { cursor: not-allowed; opacity: .38; }

.mrms-calendar-footer {
  display: flex;
  justify-content: flex-end;
  gap: .35rem;
  margin-top: .55rem;
  padding-top: .55rem;
  border-top: 1px solid #d8e2e8;
}

.mrms-calendar-footer button {
  min-height: 2.25rem;
  padding: .35rem .65rem;
  color: #075d69;
  font-weight: 700;
}

.monitoring-field > .mrms-date-control {
  --mrms-date-border: var(--monitoring-border-strong, #aebfca);
  --mrms-date-focus: var(--monitoring-green-600, #1769aa);
  border-radius: var(--monitoring-radius-control, .45rem);
  min-height: 42px;
}

.provider-filter-toolbar .mrms-date-control {
  min-height: 42px;
}

.operational-workspace .mrms-date-control {
  --mrms-date-border: #bbceca;
  --mrms-date-focus: var(--accent, #028ca0);
  border-radius: 7px;
  min-height: 48px;
}

/* Django admin retains its split time input and timezone handling. */
.form-row .mrms-date-control {
  display: inline-flex;
  min-height: 40px;
  vertical-align: middle;
  width: min(14rem, 100%);
}

.form-row .mrms-date-control > .datetimeshortcuts {
  display: none !important;
}

@media (max-width: 480px) {
  .mrms-picker-button {
    flex-basis: 2.6rem;
  }
}