/* ==========================================================================
   Compatibility layer (foundation, stage D0): accessibility overrides of
   specific LEGACY rules in style.css, so existing screens meet the new
   baseline before they are redesigned. Loaded last of the ds files.
   When a screen is rebuilt on ds-* components, its legacy rule can go, and
   the matching line here becomes dead and can be deleted.
   ========================================================================== */

/* ---------- 1. Focus: legacy rules replaced the outline by a pale shadow ("outline: none; box-shadow: 0 0 0 3px mint"). Keyboard focus always shows a real ring. ---------- */
:focus-visible {
	outline: var(--ds-focus-width) solid var(--ds-focus) !important;
	outline-offset: var(--ds-focus-offset) !important;
}
/* Visually-hidden real inputs (pills, choice cards): the label shows the ring (their own :has rules). */
.pill input:focus-visible, .ds-choice input:focus-visible { outline: none !important; }
/* The search overlay input sits inside a bordered box that carries the ring. */
.site-search-overlay__box:focus-within { outline: var(--ds-focus-width) solid var(--ds-focus); outline-offset: 2px; }
.site-search-overlay__input:focus-visible { outline: none !important; }

/* ---------- 2. Form control borders (WCAG 1.4.11): hairline #f1f5f9/#DDE7E3 is not a visible boundary for a control ---------- */
body input:not([type="checkbox"]):not([type="radio"]):not([type="range"]):not([type="file"]):not([type="hidden"]):not([type="submit"]):not([type="button"]):not([type="color"]),
body select,
body textarea {
	border-color: var(--ds-control-line);
}
body input:not([type="checkbox"]):not([type="radio"]):not([type="range"]):not([type="file"]):not([type="hidden"]):not([type="submit"]):not([type="button"]):hover,
body select:hover,
body textarea:hover {
	border-color: var(--ds-deep);
}
body input[aria-invalid="true"], body select[aria-invalid="true"], body textarea[aria-invalid="true"] { border-color: var(--ds-danger); }
body input:disabled, body select:disabled, body textarea:disabled { background-color: var(--ds-disabled-bg); color: var(--ds-disabled-text); }
/* Text fields at 16px: iOS Safari zooms the whole page on focus below that. */
@media (max-width: 767.98px) {
	body input:not([type="checkbox"]):not([type="radio"]):not([type="range"]):not([type="file"]):not([type="hidden"]):not([type="submit"]):not([type="button"]),
	body select, body textarea { font-size: max(1rem, 16px); }
}
body input[type="checkbox"], body input[type="radio"] { accent-color: var(--ds-action); }

/* ---------- 3. Touch targets >= 44px ---------- */
.btn, .btn--sm, .btn--lg { min-height: var(--ds-control-h); }
.header-icon-link, .site-lang-switch, .site-nav-toggle, .site-search-overlay__close,
.notif-bell, .mentayar-modal__close, .invoice-modal__close, .cal-add__btn { min-width: var(--ds-control-h); min-height: var(--ds-control-h); }
.header-icon-link, .site-lang-switch, .site-nav-toggle { width: var(--ds-control-h); height: var(--ds-control-h); }
.site-lang-switch { font-size: var(--ds-fs-xs); }
.notif-bell { width: var(--ds-control-h); height: var(--ds-control-h); }
.dashboard-nav__item, .dashboard-nav__group-toggle { min-height: var(--ds-control-h); }
button.pill, a.pill, label.pill, .time-slot, .date-chip { min-height: var(--ds-control-h); }
.site-nav ul li a { min-height: var(--ds-control-h); }
.mentayar-modal__close, .invoice-modal__close { display: inline-flex; align-items: center; justify-content: center; }

/* ---------- 4. Dashboard hero surfaces: flat deep green, white text 8:1. The legacy gradient ended in #0a8f7f (4.0:1) and a white radial highlight lightened a corner below 4.5. ---------- */
.dashboard-sidebar__user, .dash-hero, .prof-hero, .wallet-hero, .loy-balance {
	background: var(--ds-deep);
	color: var(--ds-on-action);
}
.dash-hero::after, .wallet-hero::after, .loy-balance::after, .prof-hero::after, .dash-hero::before, .prof-hero::before { display: none; }
.dashboard-sidebar__name small { font-size: var(--ds-fs-xs); opacity: 1; }
.dashboard-sidebar__avatar, .notif-bell { border-color: rgba(255, 255, 255, 0.7); }
.dashboard-sidebar__user .notif-bell { color: var(--ds-on-action); }
/* language switch in the dashboard hero: a 44px target (the legacy pill was 32px) */
.dash-hero__lang .lang-pref__opt { min-block-size: var(--ds-control-h); min-inline-size: var(--ds-control-h); }
.dashboard-sidebar { box-shadow: none; }
.dashboard-nav__item.is-active { background: var(--ds-mint-strong); color: var(--ds-deep); }
.dashboard-nav__item[aria-current="page"] { background: var(--ds-mint-strong); color: var(--ds-deep); font-weight: var(--ds-fw-bold); }
.notif-bell__badge { background: var(--ds-danger); color: var(--ds-on-action); font-size: 0.75rem; }

/* ---------- 5. Collapsed navigation groups must not stay in the tab order ---------- */
.dashboard-nav__group:not(.is-open) > .dashboard-nav__group-items { visibility: hidden; transition: max-height 0.2s ease, visibility 0s linear 0.2s; }
.dashboard-nav__group.is-open > .dashboard-nav__group-items { visibility: visible; transition: max-height 0.2s ease, visibility 0s; }

/* ---------- 6. Status that was colour only gets an icon (same mask icons as .ds-badge) ---------- */
.invoice-status, .intake-status__badge { display: inline-flex; align-items: center; gap: 0.375em; }
.invoice-status::before, .intake-status__badge::before {
	content: ""; flex: none; inline-size: 1em; block-size: 1em; background: currentColor;
	-webkit-mask: var(--ds-i-clock) center / contain no-repeat; mask: var(--ds-i-clock) center / contain no-repeat;
}
.invoice-status--success::before { -webkit-mask-image: var(--ds-i-check); mask-image: var(--ds-i-check); }
.invoice-status--failed::before, .invoice-status--refunded::before { -webkit-mask-image: var(--ds-i-x); mask-image: var(--ds-i-x); }
.intake-status__badge--is-attention::before { -webkit-mask-image: var(--ds-i-warn); mask-image: var(--ds-i-warn); }
.invoice-status--pending { color: var(--ds-warning); background: var(--ds-warning-bg); }
.invoice-status--success { background: var(--ds-success-bg); }
.invoice-status--failed, .invoice-status--refunded { background: var(--ds-danger-bg); }
.checkout__hold-banner--urgent, .waiting-room__hint, .intake-status__badge--is-attention { color: var(--ds-warning); }

/* ---------- 7. Legacy modals: phone = bottom sheet, safe areas, scroll containment (roles and focus handling come from ui.js, the legacy-modal adapter) ---------- */
.invoice-modal__card, .mentayar-modal { overscroll-behavior: contain; max-height: 90vh; max-height: 90dvh; overflow-y: auto; }
.mentayar-modal-overlay { z-index: var(--ds-z-overlay); backdrop-filter: none; background: var(--ds-overlay); }
.invoice-modal { z-index: var(--ds-z-overlay); }
.invoice-modal__backdrop { background: var(--ds-overlay); }
@media (max-width: 639.98px) {
	.invoice-modal, .mentayar-modal-overlay { align-items: flex-end; padding: 0; }
	.invoice-modal__card, .mentayar-modal { max-width: none; width: 100%; border-end-start-radius: 0; border-end-end-radius: 0; padding-block-end: calc(1.5rem + var(--ds-safe-bottom)); }
}

/* ---------- 8. Public header and mobile menu ---------- */
.site-header { z-index: var(--ds-z-header); }
.site-nav ul li a[aria-current="page"] { background: var(--ds-deep); color: var(--ds-on-action); font-weight: var(--ds-fw-semibold); }
#mentayar-search-trigger { border-color: var(--ds-line); }
#mentayar-search-trigger:hover { transform: none; box-shadow: none; }
.header-auth-link.btn--soft:hover, .header-auth-link.btn--soft:focus-visible { background: var(--ds-action-hover); color: var(--ds-on-action); }
.site-search-overlay { z-index: calc(var(--ds-z-overlay) - 1); }
@media (max-width: 1199px) {
	.site-nav { max-height: calc(100vh - var(--ds-header-h)); max-height: calc(100dvh - var(--ds-header-h)); overscroll-behavior: contain; box-shadow: var(--ds-shadow-pop); }
	.site-nav__mobile-actions .header-auth-link { padding-block: 0; }
}

/* ---------- 9. Role shell below 1024px: the bottom tab bar replaces the sidebar list (only once shell.js has built the bar; without JS the sidebar stays) ---------- */
@media (max-width: 1023.98px) {
	body.ds-has-tabbar .dashboard-layout { flex-direction: column; gap: var(--ds-space-4); }
	body.ds-has-tabbar .dashboard-layout > .dashboard-sidebar { inline-size: 100%; position: static; padding: var(--ds-space-2); }
	body.ds-has-tabbar .dashboard-layout > .dashboard-sidebar .dashboard-nav { display: none; }
	body.ds-has-tabbar .dashboard-layout > .dashboard-sidebar .dashboard-sidebar__user { margin: 0; }
	body.ds-has-tabbar .container--full { padding-inline: var(--ds-gutter); }
}

/* ---------- 10. Motion and text-size details ---------- */
.notif-bell__badge { animation: none; }
.site-header, .dashboard-sidebar, .ds-tabbar { font-size: 1rem; }

/* ---------- 11. Verify-phase fixes: 44px targets for the logo link and link-type tag pills ---------- */
.site-logo { align-items: center; min-block-size: 44px; }
a.tag-pill, .client-card a.tag-pill { display: inline-flex; align-items: center; min-block-size: 44px; }
.pub-contact__item a { display: inline-flex; align-items: center; min-block-size: 44px; }
.wr-support a { display: inline-flex; align-items: center; min-block-size: 44px; }
.ds-tap { display: inline-flex; align-items: center; min-block-size: 44px; }
/* Single-line text controls reach 44px everywhere (profile and form fields were 42px). */
input:not([type="checkbox"]):not([type="radio"]):not([type="hidden"]):not([type="range"]):not([type="file"]):not(.mentayar-honeypot), select { min-block-size: 44px; }
.breadcrumb a { display: inline-flex; align-items: center; justify-content: center; min-block-size: 44px; min-inline-size: 44px; }