/*
 * CommissarySpace App Light Accessibility Overlay B16
 * CSS-only overlay. No JavaScript. No route behavior. No app.js.
 * Goal: make /app readable for low vision while preserving B14.1 behavior.
 */

/* Scope only when body class is present. */
body.cs-app-light-accessibility-b16,
body.cs-low-vision-mode {
  background: #f6f8fc !important;
  color: #061426 !important;
}

/* Broad app shell normalization */
body.cs-app-light-accessibility-b16 .app,
body.cs-app-light-accessibility-b16 main,
body.cs-app-light-accessibility-b16 .screen,
body.cs-app-light-accessibility-b16 .view,
body.cs-app-light-accessibility-b16 .page,
body.cs-app-light-accessibility-b16 section,
body.cs-app-light-accessibility-b16 article {
  color: #061426 !important;
}

/* Top/header zones */
body.cs-app-light-accessibility-b16 header,
body.cs-app-light-accessibility-b16 .topbar,
body.cs-app-light-accessibility-b16 .app-header,
body.cs-app-light-accessibility-b16 .nav,
body.cs-app-light-accessibility-b16 .toolbar {
  background: #ffffff !important;
  color: #061426 !important;
  border-color: #c7d2e2 !important;
  box-shadow: 0 4px 18px rgba(15, 23, 42, .08) !important;
}

/* Cards/panels/modals */
body.cs-app-light-accessibility-b16 .card,
body.cs-app-light-accessibility-b16 .panel,
body.cs-app-light-accessibility-b16 .sheet,
body.cs-app-light-accessibility-b16 .modal,
body.cs-app-light-accessibility-b16 [role="dialog"],
body.cs-app-light-accessibility-b16 #bookingSummary,
body.cs-app-light-accessibility-b16 #reviewCard,
body.cs-app-light-accessibility-b16 .booking-review,
body.cs-app-light-accessibility-b16 .booking-receipt,
body.cs-app-light-accessibility-b16 .cs-preconfirm-card,
body.cs-app-light-accessibility-b16 .cs-receipt-card,
body.cs-app-light-accessibility-b16 .cs-resource-time-blocks,
body.cs-app-light-accessibility-b16 .cs-phase-row,
body.cs-app-light-accessibility-b16 .cs-month-calendar,
body.cs-app-light-accessibility-b16 .cs-month-cell,
body.cs-app-light-accessibility-b16 #cs-month-popover {
  background: #ffffff !important;
  color: #061426 !important;
  border-color: #b8c6da !important;
  box-shadow: 0 18px 46px rgba(15, 23, 42, .14) !important;
}

/* Text contrast everywhere inside /app */
body.cs-app-light-accessibility-b16 h1,
body.cs-app-light-accessibility-b16 h2,
body.cs-app-light-accessibility-b16 h3,
body.cs-app-light-accessibility-b16 h4,
body.cs-app-light-accessibility-b16 h5,
body.cs-app-light-accessibility-b16 h6,
body.cs-app-light-accessibility-b16 p,
body.cs-app-light-accessibility-b16 div,
body.cs-app-light-accessibility-b16 span,
body.cs-app-light-accessibility-b16 label,
body.cs-app-light-accessibility-b16 li,
body.cs-app-light-accessibility-b16 strong,
body.cs-app-light-accessibility-b16 small,
body.cs-app-light-accessibility-b16 em,
body.cs-app-light-accessibility-b16 .muted,
body.cs-app-light-accessibility-b16 .hint,
body.cs-app-light-accessibility-b16 .subtle,
body.cs-app-light-accessibility-b16 .kv-row span,
body.cs-app-light-accessibility-b16 .kv-row strong,
body.cs-app-light-accessibility-b16 .cs-phase-name strong,
body.cs-app-light-accessibility-b16 .cs-phase-name span,
body.cs-app-light-accessibility-b16 .cs-phase-row label,
body.cs-app-light-accessibility-b16 .cs-month-daynum,
body.cs-app-light-accessibility-b16 .cs-month-head h3,
body.cs-app-light-accessibility-b16 .cs-month-pop-date,
body.cs-app-light-accessibility-b16 .cs-month-pop-resource,
body.cs-app-light-accessibility-b16 .cs-month-pop-time,
body.cs-app-light-accessibility-b16 .cs-month-pop-meta {
  color: #061426 !important;
  text-shadow: none !important;
}

body.cs-app-light-accessibility-b16 .muted,
body.cs-app-light-accessibility-b16 .hint,
body.cs-app-light-accessibility-b16 .subtle,
body.cs-app-light-accessibility-b16 small,
body.cs-app-light-accessibility-b16 .cs-month-pop-meta {
  color: #31435f !important;
}

/* Inputs: date/time fields must be readable */
body.cs-app-light-accessibility-b16 input,
body.cs-app-light-accessibility-b16 select,
body.cs-app-light-accessibility-b16 textarea,
body.cs-app-light-accessibility-b16 input[type="time"],
body.cs-app-light-accessibility-b16 input[type="date"],
body.cs-app-light-accessibility-b16 input[type="datetime-local"],
body.cs-app-light-accessibility-b16 .cs-phase-row input[type="time"] {
  background: #ffffff !important;
  color: #061426 !important;
  -webkit-text-fill-color: #061426 !important;
  border: 2px solid #6b7f9f !important;
  border-radius: 14px !important;
  opacity: 1 !important;
  box-shadow: inset 0 0 0 1px rgba(15,23,42,.08) !important;
  font-weight: 850 !important;
}

/* Chrome/WebKit date/time internals, because apparently input fields are tiny haunted houses */
body.cs-app-light-accessibility-b16 input[type="time"]::-webkit-datetime-edit,
body.cs-app-light-accessibility-b16 input[type="date"]::-webkit-datetime-edit,
body.cs-app-light-accessibility-b16 input[type="datetime-local"]::-webkit-datetime-edit,
body.cs-app-light-accessibility-b16 input[type="time"]::-webkit-datetime-edit-fields-wrapper,
body.cs-app-light-accessibility-b16 input[type="date"]::-webkit-datetime-edit-fields-wrapper,
body.cs-app-light-accessibility-b16 input[type="datetime-local"]::-webkit-datetime-edit-fields-wrapper,
body.cs-app-light-accessibility-b16 input[type="time"]::-webkit-datetime-edit-text,
body.cs-app-light-accessibility-b16 input[type="date"]::-webkit-datetime-edit-text,
body.cs-app-light-accessibility-b16 input[type="datetime-local"]::-webkit-datetime-edit-text,
body.cs-app-light-accessibility-b16 input[type="time"]::-webkit-datetime-edit-hour-field,
body.cs-app-light-accessibility-b16 input[type="time"]::-webkit-datetime-edit-minute-field,
body.cs-app-light-accessibility-b16 input[type="time"]::-webkit-datetime-edit-ampm-field {
  color: #061426 !important;
  -webkit-text-fill-color: #061426 !important;
  opacity: 1 !important;
}

body.cs-app-light-accessibility-b16 input[type="time"]::-webkit-calendar-picker-indicator,
body.cs-app-light-accessibility-b16 input[type="date"]::-webkit-calendar-picker-indicator,
body.cs-app-light-accessibility-b16 input[type="datetime-local"]::-webkit-calendar-picker-indicator {
  filter: invert(0) contrast(1.35) !important;
  opacity: 1 !important;
}

/* Buttons/chips */
body.cs-app-light-accessibility-b16 button,
body.cs-app-light-accessibility-b16 .btn,
body.cs-app-light-accessibility-b16 .chip,
body.cs-app-light-accessibility-b16 .pill,
body.cs-app-light-accessibility-b16 .resource-chip,
body.cs-app-light-accessibility-b16 .cs-live-resource-chip,
body.cs-app-light-accessibility-b16 .cs-month-booking {
  background: #eef4ff !important;
  color: #061426 !important;
  border-color: #9fb2cf !important;
  text-shadow: none !important;
  font-weight: 900 !important;
}

body.cs-app-light-accessibility-b16 button:hover,
body.cs-app-light-accessibility-b16 button:focus,
body.cs-app-light-accessibility-b16 .btn:hover,
body.cs-app-light-accessibility-b16 .btn:focus,
body.cs-app-light-accessibility-b16 .chip:hover,
body.cs-app-light-accessibility-b16 .chip:focus,
body.cs-app-light-accessibility-b16 .pill:hover,
body.cs-app-light-accessibility-b16 .pill:focus {
  outline: 3px solid rgba(37, 99, 235, .35) !important;
}

body.cs-app-light-accessibility-b16 .chip.active,
body.cs-app-light-accessibility-b16 .pill.active,
body.cs-app-light-accessibility-b16 .resource-chip.active,
body.cs-app-light-accessibility-b16 .cs-live-resource-chip.active,
body.cs-app-light-accessibility-b16 .btn.primary,
body.cs-app-light-accessibility-b16 button.primary,
body.cs-app-light-accessibility-b16 .cs-month-booking:hover,
body.cs-app-light-accessibility-b16 .cs-month-booking:focus {
  background: #cfeeff !important;
  color: #031425 !important;
  border-color: #0284c7 !important;
  box-shadow: 0 0 0 3px rgba(14,165,233,.22) !important;
}

/* Status/warnings */
body.cs-app-light-accessibility-b16 .cs-preconfirm-status,
body.cs-app-light-accessibility-b16 .available,
body.cs-app-light-accessibility-b16 .success {
  color: #064e3b !important;
  background: #d1fae5 !important;
  border-color: #34d399 !important;
}

body.cs-app-light-accessibility-b16 .cs-live-warning,
body.cs-app-light-accessibility-b16 .live-mode-badge,
body.cs-app-light-accessibility-b16 #cs-v10-live-status {
  color: #061426 !important;
  background: #fff7cc !important;
  border-color: #eab308 !important;
}

/* Calendar */
body.cs-app-light-accessibility-b16 .cs-month-dow div,
body.cs-app-light-accessibility-b16 .calendar-dow,
body.cs-app-light-accessibility-b16 .weekday {
  background: #e8eef8 !important;
  color: #061426 !important;
}

body.cs-app-light-accessibility-b16 .cs-month-booking,
body.cs-app-light-accessibility-b16 .calendar-event {
  background: #dbeafe !important;
  color: #061426 !important;
  border-color: #60a5fa !important;
}

body.cs-app-light-accessibility-b16 .cs-month-booking strong,
body.cs-app-light-accessibility-b16 .cs-month-booking span,
body.cs-app-light-accessibility-b16 .calendar-event strong,
body.cs-app-light-accessibility-b16 .calendar-event span {
  color: #061426 !important;
}

/* Larger readable text where the app allows it */
body.cs-app-light-accessibility-b16 {
  font-size: 18px !important;
}

body.cs-app-light-accessibility-b16 input,
body.cs-app-light-accessibility-b16 select,
body.cs-app-light-accessibility-b16 textarea,
body.cs-app-light-accessibility-b16 button,
body.cs-app-light-accessibility-b16 .btn,
body.cs-app-light-accessibility-b16 .chip,
body.cs-app-light-accessibility-b16 .pill {
  font-size: 17px !important;
}

/* Print should stay clean */
@media print {
  body.cs-app-light-accessibility-b16 {
    background: #ffffff !important;
    color: #000000 !important;
    font-size: 12pt !important;
  }
  body.cs-app-light-accessibility-b16 * {
    color: #000000 !important;
    text-shadow: none !important;
    box-shadow: none !important;
  }
}


/* === CS B16.1 Review Booking Contrast Fix ===
   CSS-only. Targets the pre-confirm / review card that remained pale in B16.
*/
body.cs-app-light-accessibility-b16 #bookingSummary,
body.cs-app-light-accessibility-b16 #reviewCard,
body.cs-app-light-accessibility-b16 .booking-review,
body.cs-app-light-accessibility-b16 .review-card,
body.cs-app-light-accessibility-b16 .cs-preconfirm-card,
body.cs-app-light-accessibility-b16 .cs-phase-review,
body.cs-app-light-accessibility-b16 [class*="review"],
body.cs-app-light-accessibility-b16 [id*="review"] {
  background: #ffffff !important;
  color: #031426 !important;
  border-color: #8fa3c1 !important;
  text-shadow: none !important;
  opacity: 1 !important;
}

body.cs-app-light-accessibility-b16 #bookingSummary *,
body.cs-app-light-accessibility-b16 #reviewCard *,
body.cs-app-light-accessibility-b16 .booking-review *,
body.cs-app-light-accessibility-b16 .review-card *,
body.cs-app-light-accessibility-b16 .cs-preconfirm-card *,
body.cs-app-light-accessibility-b16 .cs-phase-review *,
body.cs-app-light-accessibility-b16 [class*="review"] *,
body.cs-app-light-accessibility-b16 [id*="review"] * {
  color: #031426 !important;
  -webkit-text-fill-color: #031426 !important;
  text-shadow: none !important;
  opacity: 1 !important;
  background-color: transparent !important;
}

body.cs-app-light-accessibility-b16 #bookingSummary h1,
body.cs-app-light-accessibility-b16 #bookingSummary h2,
body.cs-app-light-accessibility-b16 #bookingSummary h3,
body.cs-app-light-accessibility-b16 #bookingSummary strong,
body.cs-app-light-accessibility-b16 #reviewCard h1,
body.cs-app-light-accessibility-b16 #reviewCard h2,
body.cs-app-light-accessibility-b16 #reviewCard h3,
body.cs-app-light-accessibility-b16 #reviewCard strong,
body.cs-app-light-accessibility-b16 .cs-preconfirm-card h1,
body.cs-app-light-accessibility-b16 .cs-preconfirm-card h2,
body.cs-app-light-accessibility-b16 .cs-preconfirm-card h3,
body.cs-app-light-accessibility-b16 .cs-preconfirm-card strong,
body.cs-app-light-accessibility-b16 .cs-phase-review h1,
body.cs-app-light-accessibility-b16 .cs-phase-review h2,
body.cs-app-light-accessibility-b16 .cs-phase-review h3,
body.cs-app-light-accessibility-b16 .cs-phase-review strong {
  color: #020617 !important;
  -webkit-text-fill-color: #020617 !important;
  font-weight: 950 !important;
}

body.cs-app-light-accessibility-b16 #bookingSummary .muted,
body.cs-app-light-accessibility-b16 #bookingSummary small,
body.cs-app-light-accessibility-b16 #reviewCard .muted,
body.cs-app-light-accessibility-b16 #reviewCard small,
body.cs-app-light-accessibility-b16 .cs-preconfirm-card .muted,
body.cs-app-light-accessibility-b16 .cs-preconfirm-card small,
body.cs-app-light-accessibility-b16 .cs-phase-review .muted,
body.cs-app-light-accessibility-b16 .cs-phase-review small {
  color: #24364f !important;
  -webkit-text-fill-color: #24364f !important;
  font-weight: 800 !important;
}

/* Status pill in the review card */
body.cs-app-light-accessibility-b16 #bookingSummary .cs-preconfirm-status,
body.cs-app-light-accessibility-b16 #reviewCard .cs-preconfirm-status,
body.cs-app-light-accessibility-b16 .cs-preconfirm-card .cs-preconfirm-status,
body.cs-app-light-accessibility-b16 .cs-phase-review .cs-preconfirm-status,
body.cs-app-light-accessibility-b16 #bookingSummary [class*="status"],
body.cs-app-light-accessibility-b16 #reviewCard [class*="status"] {
  background: #d1fae5 !important;
  color: #064e3b !important;
  -webkit-text-fill-color: #064e3b !important;
  border: 2px solid #10b981 !important;
}

/* Review item rows: names left, times right */
body.cs-app-light-accessibility-b16 #bookingSummary li,
body.cs-app-light-accessibility-b16 #reviewCard li,
body.cs-app-light-accessibility-b16 .cs-preconfirm-card li,
body.cs-app-light-accessibility-b16 .cs-phase-review li,
body.cs-app-light-accessibility-b16 #bookingSummary .cs-preconfirm-items > *,
body.cs-app-light-accessibility-b16 #reviewCard .cs-preconfirm-items > *,
body.cs-app-light-accessibility-b16 .cs-preconfirm-card .cs-preconfirm-items > *,
body.cs-app-light-accessibility-b16 .cs-phase-review .cs-preconfirm-items > * {
  border-color: #d5deeb !important;
  color: #031426 !important;
  -webkit-text-fill-color: #031426 !important;
}

/* Selection highlight should not be the only way to see text. But if text is selected, keep it readable too. */
body.cs-app-light-accessibility-b16 #bookingSummary ::selection,
body.cs-app-light-accessibility-b16 #reviewCard ::selection,
body.cs-app-light-accessibility-b16 .cs-preconfirm-card ::selection,
body.cs-app-light-accessibility-b16 .cs-phase-review ::selection {
  background: #bfdbfe !important;
  color: #020617 !important;
  -webkit-text-fill-color: #020617 !important;
}

/* Confirm button zone below review card */
body.cs-app-light-accessibility-b16 #bookingSummary button,
body.cs-app-light-accessibility-b16 #reviewCard button,
body.cs-app-light-accessibility-b16 .cs-preconfirm-card button,
body.cs-app-light-accessibility-b16 .cs-phase-review button {
  background: #dbeafe !important;
  color: #031426 !important;
  -webkit-text-fill-color: #031426 !important;
  border-color: #60a5fa !important;
}
body.cs-app-light-accessibility-b16 #bookingSummary button.primary,
body.cs-app-light-accessibility-b16 #reviewCard button.primary,
body.cs-app-light-accessibility-b16 .cs-preconfirm-card button.primary,
body.cs-app-light-accessibility-b16 .cs-phase-review button.primary {
  background: #bfdbfe !important;
  color: #020617 !important;
  -webkit-text-fill-color: #020617 !important;
  border-color: #2563eb !important;
}


/* === CS B16.2 Date/Time Picker Icon Visibility Fix ===
   CSS-only. Restores visible calendar/clock affordances on light inputs.
   The input itself remains the click target; icons are visual cues.
*/
body.cs-app-light-accessibility-b16 input[type="date"],
body.cs-app-light-accessibility-b16 input[type="time"],
body.cs-app-light-accessibility-b16 input[type="datetime-local"],
body.cs-app-light-accessibility-b16 .cs-phase-row input[type="time"] {
  padding-right: 46px !important;
  background-repeat: no-repeat !important;
  background-position: right 14px center !important;
  background-size: 22px 22px !important;
}

body.cs-app-light-accessibility-b16 input[type="date"] {
  background-image:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='26' height='26' viewBox='0 0 24 24' fill='none' stroke='%23031426' stroke-width='2.7' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3' y='4' width='18' height='18' rx='3' ry='3'/%3E%3Cline x1='16' y1='2' x2='16' y2='6'/%3E%3Cline x1='8' y1='2' x2='8' y2='6'/%3E%3Cline x1='3' y1='10' x2='21' y2='10'/%3E%3Ccircle cx='8' cy='15' r='1.2' fill='%23031426' stroke='none'/%3E%3Ccircle cx='12' cy='15' r='1.2' fill='%23031426' stroke='none'/%3E%3Ccircle cx='16' cy='15' r='1.2' fill='%23031426' stroke='none'/%3E%3C/svg%3E") !important;
}

body.cs-app-light-accessibility-b16 input[type="time"] {
  background-image:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='26' height='26' viewBox='0 0 24 24' fill='none' stroke='%23031426' stroke-width='2.7' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='9'/%3E%3Cpolyline points='12 7 12 12 16 14'/%3E%3C/svg%3E") !important;
}

body.cs-app-light-accessibility-b16 input[type="datetime-local"] {
  background-image:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='26' height='26' viewBox='0 0 24 24' fill='none' stroke='%23031426' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3' y='4' width='18' height='17' rx='3' ry='3'/%3E%3Cline x1='16' y1='2' x2='16' y2='6'/%3E%3Cline x1='8' y1='2' x2='8' y2='6'/%3E%3Cline x1='3' y1='10' x2='21' y2='10'/%3E%3Ccircle cx='16.5' cy='16.5' r='3.2'/%3E%3Cpolyline points='16.5 14.8 16.5 16.7 18 17.5'/%3E%3C/svg%3E") !important;
}

/* Keep native WebKit indicators present and clickable instead of hiding them.
   We make them transparent enough not to fight the drawn icon, but still full-size.
*/
body.cs-app-light-accessibility-b16 input[type="date"]::-webkit-calendar-picker-indicator,
body.cs-app-light-accessibility-b16 input[type="time"]::-webkit-calendar-picker-indicator,
body.cs-app-light-accessibility-b16 input[type="datetime-local"]::-webkit-calendar-picker-indicator {
  display: block !important;
  visibility: visible !important;
  opacity: .01 !important;
  width: 42px !important;
  height: 42px !important;
  margin-right: -10px !important;
  cursor: pointer !important;
  background: transparent !important;
  color: transparent !important;
  filter: none !important;
}

/* Focus state: make picker inputs scream "I am active" in a useful way. */
body.cs-app-light-accessibility-b16 input[type="date"]:focus,
body.cs-app-light-accessibility-b16 input[type="time"]:focus,
body.cs-app-light-accessibility-b16 input[type="datetime-local"]:focus,
body.cs-app-light-accessibility-b16 .cs-phase-row input[type="time"]:focus {
  outline: 4px solid rgba(37, 99, 235, .35) !important;
  border-color: #2563eb !important;
  box-shadow: 0 0 0 4px rgba(37, 99, 235, .16) !important;
}

/* Disabled/read-only inputs still need visible icon/text, but should look inactive. */
body.cs-app-light-accessibility-b16 input[type="date"]:disabled,
body.cs-app-light-accessibility-b16 input[type="time"]:disabled,
body.cs-app-light-accessibility-b16 input[type="datetime-local"]:disabled,
body.cs-app-light-accessibility-b16 input[type="date"][readonly],
body.cs-app-light-accessibility-b16 input[type="time"][readonly],
body.cs-app-light-accessibility-b16 input[type="datetime-local"][readonly] {
  color: #334155 !important;
  -webkit-text-fill-color: #334155 !important;
  opacity: 1 !important;
  background-color: #eef2f7 !important;
}