/* AccTheme Common Styles - Refactored with CSS Variables */

/* Shared home/care controls. Page styles own layout, not button appearance. */
:root {
    --acc-control-accent: #18364d;
    --acc-control-accent-hover: #102b40;
    --acc-control-on-accent: #ffffff;
    --acc-control-surface: #edf2f6;
    --acc-control-hover: #dfe8ef;
    --acc-control-text: #18364d;
    --acc-control-border: #a5b6c3;
    --acc-control-font-size: 1rem;
    --acc-control-font-weight: 600;
}

html[class*="high-contrast"] {
    --acc-control-accent: var(--hc-accent);
    --acc-control-accent-hover: var(--hc-accent);
    --acc-control-on-accent: var(--hc-accent-text);
    --acc-control-surface: var(--hc-bg-primary);
    --acc-control-hover: var(--hc-bg-secondary);
    --acc-control-text: var(--hc-text-primary);
    --acc-control-border: var(--hc-border);
}

:is(.acc-controls, .care-filter-grid, fluent-dialog, .ai-assistant-panel, .recharge-panel, .acc-profile-menu-popover) fluent-button {
    min-height: 40px;
    height: auto;
    color: var(--acc-control-text);
    font-size: var(--acc-control-font-size);
    font-weight: var(--acc-control-font-weight);
}

:is(.acc-controls, .care-filter-grid, fluent-dialog, .ai-assistant-panel, .recharge-panel, .acc-profile-menu-popover) fluent-button[appearance="accent"] {
    color: var(--acc-control-on-accent);
}

:is(.acc-controls, .care-filter-grid, fluent-dialog, .ai-assistant-panel, .recharge-panel, .acc-profile-menu-popover) fluent-button svg {
    color: inherit !important;
    fill: currentColor !important;
}

:is(.acc-button, .acc-view-button, .acc-calendar-nav-button, .acc-calendar-today-button,
    .acc-reservation-detail-button, .acc-store-closure-button, .acc-reservation-search button),
:is(.acc-controls, .care-filter-grid, fluent-dialog, .ai-assistant-panel, .recharge-panel, .acc-profile-menu-popover) fluent-button::part(control) {
    box-sizing: border-box;
    min-width: 44px;
    min-height: 40px;
    height: auto;
    padding: 9px 14px;
    border: 1px solid var(--acc-control-border);
    border-radius: 8px;
    background: var(--acc-control-surface);
    color: var(--acc-control-text);
    font-size: var(--acc-control-font-size);
    font-weight: var(--acc-control-font-weight);
    line-height: 20px;
    text-decoration: none;
    cursor: pointer;
}

.acc-view-button { min-width: 64px; }

/* Group navigation uses the established workspace surface, not native button chrome. */
.text-groups-page {
    --type-ramp-base-font-size: 1rem;
    --type-ramp-base-line-height: 1.5rem;
    color: var(--hc-text-primary, var(--neutral-foreground-rest));
    font-size: 1rem;
    line-height: 1.5;
}
.text-groups-page :is(p, small, label, .text-group-item__counts) {
    font-size: 1rem;
    line-height: 1.5;
    color: inherit;
}
.text-groups-page :is(h2, h3) { font-size: 1.25rem; line-height: 1.5; }
.text-groups-page :is(.text-groups-pane, .text-groups-members) {
    background: var(--hc-bg-primary, var(--neutral-layer-1));
    border: 1px solid var(--hc-border, var(--acc-control-border));
    border-radius: 12px;
}
.text-group-item {
    border: 1px solid var(--hc-border, var(--acc-control-border));
    border-radius: 8px;
    background: var(--hc-bg-primary, var(--neutral-layer-1));
    color: inherit;
    font: inherit;
    cursor: pointer;
}
.text-group-item:hover,
.text-group-item[aria-pressed="true"] {
    background: var(--acc-control-surface);
    color: var(--acc-control-text);
}
.text-group-item[aria-pressed="true"] {
    border-color: var(--acc-control-text);
    box-shadow: inset 4px 0 var(--acc-control-text);
}
.text-groups-page .text-groups-member-link { color: inherit; }
.text-groups-page fluent-badge,
.text-groups-page fluent-badge::part(control) { font-size: 1rem; line-height: 1.5; }
.text-groups-page .acc-button,
.text-groups-page fluent-button::part(control) { line-height: 1.25; }

/* Keep the text field border centered around its enlarged input control. */
.text-groups-page fluent-text-field::part(root) {
    height: auto;
    min-height: 40px;
    align-items: center;
}

.text-groups-page .text-groups-member-workspace {
    border-top: 1px solid var(--hc-border, var(--acc-control-border));
}

.group-rule :is(select, input[type="number"]),
select.fluent-select {
    box-sizing: border-box;
    min-width: 0;
    width: 100%;
    min-height: 40px;
    padding: 8px 12px;
    border: 1px solid var(--hc-border, #71869b);
    border-radius: 8px;
    background: var(--hc-bg-primary, var(--neutral-layer-1));
    color: var(--hc-text-primary, var(--neutral-foreground-rest));
    font: inherit;
    font-size: var(--acc-control-font-size);
    line-height: 1.5;
}

/* Time controls use the same typography and selection palette as other forms. */
/* Shared status families for calendar/list and care detail. */
.acc-scheduler-event--scheduled,
.acc-scheduler-event--received,
.acc-scheduler-event--paid,
.acc-care-status-badge[data-care-status="Scheduled"],
.acc-care-status-badge[data-care-status="ReceivedInStore"],
.acc-care-status-badge[data-care-status="PaymentCompleted"],
.acc-care-status-badge[data-care-status="DeferredPaymentApproved"] {
    --acc-schedule-status-color: #35659a;
    background-color: #edf2f8;
    border-color: #35659a;
    color: #35659a;
}
.acc-scheduler-event--in-progress,
.acc-care-status-badge[data-care-status="InProgress"] {
    --acc-schedule-status-color: #3c716b;
    background-color: #eaf3f1;
    border-color: #3c716b;
    color: #3c716b;
}
.acc-scheduler-event--completed,
.acc-care-status-badge[data-care-status="Completed"] {
    --acc-schedule-status-color: #356b47;
    background-color: #edf5ef;
    border-color: #356b47;
    color: #356b47;
}
.acc-scheduler-event--no-show,
.acc-scheduler-event--refunded,
.acc-scheduler-event--canceled,
.acc-scheduler-event--default,
.acc-care-status-badge[data-care-status="NoShow"],
.acc-care-status-badge[data-care-status="Refunded"],
.acc-care-status-badge[data-care-status="Canceled"] {
    --acc-schedule-status-color: #596675;
    background-color: #eef0f3;
    border-color: #596675;
    color: #596675;
}
.acc-scheduler-event--payment-incomplete,
.acc-care-status-badge[data-care-status="RetroactivePayment"] {
    --acc-schedule-status-color: #974650;
    background-color: #f7edef;
    border-color: #974650;
    color: #974650;
}
.acc-care-status-badge { padding: 2px 6px; border-radius: 4px; font-size: .875rem; font-weight: 600; }
html[class*="high-contrast"] .acc-care-status-badge { background: var(--hc-bg-secondary); color: var(--hc-text-primary); border: 1px solid var(--hc-border); }

.care-details-content,
.care-detail-sections {
    display: flex;
    flex-direction: column;
    gap: 16px;
}

.care-detail-section {
    display: flex;
    flex-direction: column;
    gap: 12px;
    min-width: 0;
}

.acc-detail-field-label {
    font-size: 0.875rem;
    line-height: 1.5;
    font-weight: 400;
    color: var(--hc-text-primary, var(--neutral-foreground-rest, #293b50));
}

.acc-detail-field-value {
    font-size: 1rem;
    line-height: 1.5;
    font-weight: 600;
    color: var(--hc-text-primary, var(--neutral-foreground-rest, #293b50));
}

.payment-submit-actions .payment-guidance { white-space: pre-line; }

.acc-time-picker {
    display: inline-flex;
    max-width: 100%;
    flex: 0 0 auto;
}

.acc-time-picker-shell {
    position: relative;
    display: inline-block;
    min-width: 0;
    max-width: 100%;
}

.acc-time-picker-popup {
    position: absolute;
    top: calc(100% + 4px);
    right: 0;
    left: auto;
    min-width: 224px;
    opacity: 1;
    backdrop-filter: none;
    isolation: isolate;
    z-index: 1200;
    display: grid;
    grid-template-columns: 84px 70px 70px;
    padding: 8px;
    gap: 6px;
    border: 1px solid var(--acc-control-border);
    border-radius: 8px;
    background: var(--hc-bg-primary, var(--neutral-layer-floating, #fff));
    color: var(--hc-text-primary, var(--neutral-foreground-rest, #18364d));
    box-shadow: 0 10px 24px rgb(15 23 42 / 14%);
}

.acc-time-picker-column {
    display: flex;
    flex-direction: column;
    gap: 4px;
    max-height: min(160px, 55vh);
    overflow-y: auto;
    scrollbar-gutter: stable;
}

.acc-time-picker-column--period {
    align-self: start;
    max-height: none;
    overflow-y: visible;
    scrollbar-gutter: auto;
}

.acc-time-picker-option {
    min-height: 36px;
    flex-shrink: 0;
    padding: 6px 10px;
    border: 0;
    border-radius: 6px;
    background: transparent;
    color: inherit;
    font: inherit;
    font-size: var(--acc-control-font-size);
    font-weight: 400;
    line-height: 24px;
    text-align: center;
    cursor: pointer;
}

.acc-time-picker-option:hover:not(.acc-time-picker-option--selected) {
    background: var(--acc-control-hover);
}

.acc-time-picker-option--selected {
    background: var(--acc-control-accent);
    color: var(--acc-control-on-accent);
    font-weight: 600;
}

:root[data-msgenie-input-modality="keyboard"] .acc-time-picker-option:focus-visible {
    color: var(--acc-focus-underline) !important;
}

/* Customer search and add rows share dimensions across reservation and reception. */
.acc-customer-row {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 136px;
    align-items: center;
    gap: 8px;
    width: 100%;
    min-width: 0;
}

.acc-customer-row > :is(input, select, button, fluent-text-field, fluent-select, fluent-button) {
    box-sizing: border-box;
    width: 100%;
    min-width: 0;
    height: 40px;
    min-height: 40px;
    margin: 0;
    font-size: var(--acc-control-font-size);
}

.acc-customer-row > :is(fluent-text-field, fluent-select)::part(root),
.acc-customer-row > :is(fluent-text-field, fluent-select, fluent-button)::part(control) {
    box-sizing: border-box;
    height: 40px;
    min-height: 40px;
}

.acc-customer-row > :is(button, fluent-button) { white-space: nowrap; }

:is(.acc-button, .acc-view-button, .acc-calendar-nav-button, .acc-calendar-today-button,
    .acc-reservation-detail-button, .acc-store-closure-button, .acc-reservation-search button):not(.acc-button--disabled):hover:not(:disabled),
:is(.acc-controls, .care-filter-grid, fluent-dialog, .ai-assistant-panel, .recharge-panel, .acc-profile-menu-popover) fluent-button:not([disabled]):hover::part(control) {
    background: var(--acc-control-hover);
}

:is(.acc-button--primary, .acc-view-button[aria-pressed="true"]),
:is(.acc-controls, .care-filter-grid, fluent-dialog, .ai-assistant-panel, .recharge-panel, .acc-profile-menu-popover) fluent-button[appearance="accent"]::part(control) {
    background: var(--acc-control-accent);
    color: var(--acc-control-on-accent);
}

:is(.acc-button--primary, .acc-view-button[aria-pressed="true"]):not(.acc-button--disabled):hover:not(:disabled),
:is(.acc-controls, .care-filter-grid, fluent-dialog, .ai-assistant-panel, .recharge-panel, .acc-profile-menu-popover) fluent-button[appearance="accent"]:not([disabled]):hover::part(control) {
    background: var(--acc-control-accent-hover);
}

:is(.acc-controls, .care-filter-grid, fluent-dialog, .ai-assistant-panel, .recharge-panel, .acc-profile-menu-popover) fluent-button[appearance="stealth"],
:is(.acc-controls, .care-filter-grid, fluent-dialog, .ai-assistant-panel, .recharge-panel, .acc-profile-menu-popover) fluent-button[appearance="stealth"]::part(control) {
    background: transparent;
    border-color: transparent;
    color: var(--hc-text-primary, var(--neutral-foreground-rest, var(--acc-control-text)));
}

/* Routine toolbar actions share the quiet surface; final form actions keep accent. */
html:not([class*="high-contrast"]) :is(.acc-calendar-toolbar, .acc-reservation-toolbar, .acc-list-toolbar-actions, .care-workflow-toolbar) fluent-button[appearance="accent"]:not([disabled]) {
    color: var(--acc-control-text);
}

html:not([class*="high-contrast"]) :is(.acc-calendar-toolbar, .acc-reservation-toolbar, .acc-list-toolbar-actions, .care-workflow-toolbar) fluent-button[appearance="accent"]:not([disabled])::part(control) {
    background: var(--acc-control-surface);
    color: var(--acc-control-text);
}

html:not([class*="high-contrast"]) :is(.acc-calendar-toolbar, .acc-reservation-toolbar, .acc-list-toolbar-actions, .care-workflow-toolbar) fluent-button[appearance="accent"]:not([disabled]):hover::part(control) {
    background: var(--acc-control-hover);
}

/* Filter choices are toggle buttons styled as tabs, with a non-color selected cue. */
.acc-controls .acc-inline-navigation {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: flex-end;
    gap: 4px;
}

.acc-period-search-row { display: flex; flex-wrap: wrap; gap: 12px; }
.acc-period-upper-actions { margin-left: auto; }
.acc-embedded-filter .acc-period-search-row {
    display: grid;
    grid-template-columns: calc(16.666667% - 12px) minmax(480px, 1fr) minmax(360px, 1fr);
    align-items: start;
    gap: 12px;
}

.acc-embedded-filter .acc-period-search-row > button { grid-column: 1; grid-row: 1; justify-self: start; }
.acc-embedded-filter .acc-period-presets { grid-column: 2; grid-row: 1; min-width: 0; }
.care-filter-grid.acc-embedded-filter > .fluent-grid[spacing] { width: 100%; margin: 0; row-gap: 8px; }
.care-filter-grid.acc-embedded-filter > .fluent-grid[spacing] > div { padding: 0; }
.care-filter-grid.acc-embedded-filter > .fluent-grid[spacing] > .acc-filter-status { padding-right: 190px; padding-bottom: 8px; }
.care-filter-grid.acc-embedded-filter > .fluent-grid[spacing] > .acc-filter-label { align-self: start; padding-top: 10px; }
.acc-filter-period-actions { width: 100%; }

.acc-embedded-filter .acc-period-search-actions {
    display: contents;
}
.acc-embedded-filter .acc-period-search-actions > .acc-reservation-search { grid-column: 3; grid-row: 1; align-self: end; width: 100%; }

@container care-list-filter (max-width: 1040px) {
    .acc-embedded-filter .acc-period-search-row { grid-template-columns: calc(16.666667% - 12px) minmax(0, 1fr); }
    .acc-embedded-filter .acc-period-search-actions > .acc-reservation-search { grid-column: 2; grid-row: 2; }
}

@container care-list-filter (max-width: 650px) {
    .acc-embedded-filter .acc-period-search-row { grid-template-columns: minmax(0, 1fr); }
    .acc-embedded-filter .acc-period-search-row > button { grid-column: 1; grid-row: 1; }
    .acc-embedded-filter .acc-period-presets { grid-column: 1; grid-row: 2; }
    .acc-embedded-filter .acc-period-search-actions > .acc-reservation-search { grid-column: 1; grid-row: 3; }
}

@media (max-width: 760px) {
    .care-filter-grid.acc-embedded-filter > .fluent-grid[spacing] > .acc-filter-status { padding-right: 0; }
}

.acc-controls .acc-inline-navigation fluent-button::part(control) {
    padding: 5px 8px;
    min-height: 36px;
}

.acc-care-header { display: flex; flex-wrap: wrap; align-items: center; gap: 12px; margin-bottom: 16px; padding-bottom: 12px; border-bottom: 1px solid var(--neutral-stroke-divider); }
.acc-care-header .acc-care-heading { font-weight: 600; color: var(--acc-control-text); }
.acc-care-header-actions { display: flex; flex-direction: column; align-items: flex-end; margin-left: auto; min-width: 0; }
.care-edit-repayment-guidance {
    margin: 0 0 8px;
    color: var(--hc-text-primary, var(--neutral-foreground-rest, var(--acc-control-text)));
    font-size: var(--acc-control-font-size);
    line-height: 1.5;
    overflow-wrap: anywhere;
}

.care-filter-grid fluent-button.acc-filter-tab {
    display: inline-flex;
    min-height: 42px;
    height: auto;
}

.care-filter-grid fluent-button.acc-filter-tab::part(control) {
    background: transparent;
    border-color: transparent;
    border-bottom: 3px solid transparent;
    border-radius: 0;
    font-weight: 400;
}

.care-filter-grid fluent-button.acc-filter-tab[aria-pressed="true"]::part(control) {
    border-bottom-color: currentColor;
    font-weight: 700;
}

html[class*="high-contrast"] .care-filter-grid fluent-button.acc-filter-tab,
html[class*="high-contrast"] .care-filter-grid fluent-button.acc-filter-tab::part(control) {
    background: transparent !important;
    color: var(--hc-text-primary) !important;
    border-color: transparent !important;
}

.care-filter-grid .fluent-select {
    font-size: var(--acc-control-font-size) !important;
}

html[class*="high-contrast"] .care-filter-grid fluent-button.acc-filter-tab[aria-pressed="true"]::part(control) {
    border-bottom-color: var(--hc-text-primary) !important;
    text-decoration: underline;
    text-underline-offset: 4px;
}

:is(.acc-button, .acc-view-button, .acc-calendar-nav-button, .acc-calendar-today-button, .acc-reservation-detail-button, .acc-store-closure-button, .acc-reservation-search button):disabled,
.acc-button--disabled,
:is(.acc-controls, .care-filter-grid, fluent-dialog, .ai-assistant-panel, .recharge-panel, .acc-profile-menu-popover) fluent-button[disabled],
:is(.acc-controls, .care-filter-grid, fluent-dialog, .ai-assistant-panel, .recharge-panel, .acc-profile-menu-popover) fluent-button[disabled]::part(control) {
    background: var(--hc-disabled-bg, #e5e9ed);
    color: var(--hc-disabled-text, #596775);
    border-color: var(--hc-border, #9aa8b5);
    cursor: not-allowed;
}

/* Keep the AI toolbar stable while history deletion is temporarily unavailable. */
.ai-assistant-control-actions fluent-button[appearance="stealth"][disabled],
.ai-assistant-control-actions fluent-button[appearance="stealth"][disabled]::part(control) {
    background: transparent;
    border-color: transparent;
}

:is(.acc-button, .acc-view-button, .acc-calendar-nav-button, .acc-calendar-today-button,
    .acc-reservation-detail-button, .acc-store-closure-button, .acc-reservation-search button):focus-visible,
:is(.acc-controls, .care-filter-grid, fluent-dialog, .ai-assistant-panel, .recharge-panel, .acc-profile-menu-popover) fluent-button:focus-within::part(control) {
    outline: 3px solid var(--hc-focus, #b07100);
    outline-offset: 2px;
}

/* Overlay appearance lives here; individual components retain only their layout. */
/* Fluent popup options use their own shadow parts rather than button styles. */
.fluent-datepicker-popup {
    color: var(--hc-text-primary, var(--neutral-foreground-rest, #18364d));
    background: var(--hc-bg-primary, var(--neutral-layer-1, #fff));
    border: 1px solid var(--hc-border, var(--neutral-stroke-strong-rest, #687d8e));
    border-radius: 8px;
}

.fluent-datepicker-popup .fluent-calendar {
    --calendar-cell-size: 36px;
    --accent-fill-rest: var(--acc-control-accent);
    --foreground-on-accent-rest: var(--acc-control-on-accent);
    font-size: var(--acc-control-font-size);
    line-height: 1.5;
}

.fluent-datepicker-popup .fluent-calendar .day {
    font-size: var(--acc-control-font-size);
    border-radius: 6px;
}

.fluent-datepicker-popup .fluent-calendar .day[selected] {
    background: var(--acc-control-accent);
    color: var(--acc-control-on-accent);
    border-color: var(--acc-control-accent);
    font-weight: 600;
}

.fluent-datepicker-popup .fluent-calendar .day:not([selected])[today] {
    color: inherit;
    background: transparent;
    border: 1px solid currentColor;
}

fluent-select::part(listbox) {
    font-size: var(--acc-control-font-size);
    line-height: 1.5;
    background: var(--hc-bg-primary, var(--neutral-layer-1, #fff));
    color: var(--hc-text-primary, var(--neutral-foreground-rest, #18364d));
    border: 1px solid var(--hc-border, var(--neutral-stroke-strong-rest, #687d8e));
    border-radius: 8px;
    max-height: min(320px, 50vh);
    overflow-y: auto;
}

fluent-option {
    box-sizing: border-box;
    min-height: 40px;
    padding: 8px 12px;
    font-size: var(--acc-control-font-size);
    font-weight: 400;
    line-height: 24px;
    color: var(--hc-text-primary, var(--neutral-foreground-rest, #18364d));
}

fluent-option[aria-selected="true"] {
    background: var(--acc-control-accent);
    color: var(--acc-control-on-accent);
    font-weight: 600;
}

:is(fluent-dialog, .ai-assistant-panel, .recharge-panel, .acc-profile-menu-popover) fluent-checkbox {
    font-size: 1rem;
    font-weight: 400;
    line-height: 1.5;
    color: var(--hc-text-primary, var(--neutral-foreground-rest, #18364d));
}

:is(fluent-dialog, .ai-assistant-panel, .recharge-panel, .acc-profile-menu-popover) fluent-checkbox::part(control) {
    width: 20px;
    height: 20px;
    border: 1px solid var(--hc-border, var(--neutral-stroke-strong-rest, #687d8e));
    border-radius: 3px;
    background: var(--hc-bg-primary, var(--neutral-layer-1, #fff));
}

:is(fluent-dialog, .ai-assistant-panel, .recharge-panel, .acc-profile-menu-popover) fluent-checkbox[aria-checked="true"]::part(control) {
    background: var(--acc-control-accent);
    border-color: var(--acc-control-accent);
    color: var(--acc-control-on-accent);
}

:is(fluent-dialog, .ai-assistant-panel, .recharge-panel, .acc-profile-menu-popover) fluent-checkbox::part(checked-indicator) { color: var(--acc-control-on-accent); fill: currentColor; }

:is(fluent-dialog, .ai-assistant-panel, .recharge-panel, .acc-profile-menu-popover) {
    --type-ramp-base-font-size: 1rem;
    --type-ramp-base-line-height: 1.5rem;
    color: var(--hc-text-primary, var(--neutral-foreground-rest, var(--acc-control-text)));
    font-size: 1rem;
    line-height: 1.5;
}

fluent-dialog::part(positioning-region) {
    align-items: center;
    justify-content: center;
    box-sizing: border-box;
    padding: 16px;
}

/* Visible dialogs and the docked AI assistant behave as peer work surfaces.
   Pointerdown promotes the selected surface while the application stays inert. */
fluent-dialog[data-msgenie-dialog-peer="true"] {
    position: fixed;
    inset: 0;
    z-index: 1395 !important;
    pointer-events: none;
}

fluent-dialog[data-msgenie-dialog-peer="true"]::part(overlay),
fluent-dialog[data-msgenie-dialog-peer="true"]::part(positioning-region) {
    z-index: auto;
    pointer-events: none;
}

fluent-dialog[data-msgenie-dialog-peer="true"]::part(control) {
    pointer-events: auto;
}

fluent-dialog[data-msgenie-dialog-peer="true"][data-msgenie-dialog-active="true"] {
    z-index: 1420 !important;
}

.ai-assistant-overlay[data-msgenie-dialog-peer="true"] {
    z-index: 1400;
}

.ai-assistant-overlay[data-msgenie-dialog-peer="true"][data-msgenie-dialog-active="true"] {
    z-index: 1420;
}

:is(.ai-assistant-panel, .recharge-panel, .acc-profile-menu-popover),
fluent-dialog::part(control) {
    box-sizing: border-box;
    margin: 0;
    max-width: calc(100vw - 32px);
    max-height: calc(100dvh - 32px);
    background: var(--hc-bg-primary, var(--neutral-layer-1));
    border: 1px solid var(--hc-border, var(--acc-control-border));
    border-radius: 12px;
    box-shadow: 0 12px 32px rgb(24 54 77 / 16%);
}
fluent-dialog .fluent-dialog-body {
    box-sizing: border-box;
    padding-inline: 12px;
    min-width: 0;
    max-height: calc(100dvh - 160px);
    overflow: auto !important;
}
@supports (scrollbar-gutter: stable both-edges) {
    fluent-dialog .fluent-dialog-body {
        scrollbar-gutter: stable both-edges;
    }
}
/* Intrinsic grid/flex widths must not enlarge a dialog at 200% text. */
fluent-dialog::part(control) {
    min-width: 0;
    grid-template-columns: minmax(0, 1fr);
}
fluent-dialog :is(.fluent-dialog-header, .fluent-dialog-header > div, .fluent-dialog-footer) {
    min-width: 0;
    max-width: 100%;
    overflow-wrap: anywhere;
}
fluent-dialog .fluent-dialog-footer { flex-wrap: wrap; }
.ai-assistant-panel { min-width: 0; overflow-y: auto; scrollbar-gutter: stable both-edges; }
.ai-assistant-panel :is(.ai-assistant-header, .ai-assistant-controls, .ai-assistant-tts-controls, .ai-assistant-buttons) {
    min-width: 0;
    flex-wrap: wrap;
}
.ai-assistant-panel :is(.ai-assistant-title, .ai-assistant-input-wrap, .ai-assistant-history) {
    min-width: 0;
    overflow-wrap: anywhere;
}
.ai-assistant-header .ai-assistant-title { flex: 1; }
.ai-assistant-history { flex-basis: 8rem; }
.ai-assistant-panel fluent-text-area { min-width: 0; max-width: 100%; }
.ai-assistant-panel fluent-text-area::part(control) { min-width: 0; width: 100%; box-sizing: border-box; }
:is(fluent-dialog, .ai-assistant-panel) fluent-button { min-width: 0; max-width: 100%; }
:is(fluent-dialog, .ai-assistant-panel) fluent-button::part(content) { min-width: 0; white-space: normal; overflow-wrap: anywhere; }
:is(fluent-dialog, .ai-assistant-panel) fluent-button::part(control) { max-width: 100%; line-height: 1.25; }
.ai-tts-settings-header { min-width: 0; overflow-wrap: anywhere; }
.ai-tts-settings-header h2 { min-width: 0; }
.ai-tts-slider-label { flex-wrap: wrap; gap: 4px; }
@media (max-width: 600px) {
    fluent-dialog:has(.telephony-event-dialog__body)::part(control) {
        width: calc(100vw - 32px);
        padding-inline: 16px;
    }
    .telephony-event-dialog__history-body .telephony-history { padding-inline: 0; }
}
fluent-dialog:not(:has(.fluent-dialog-body))::part(control) {
    overflow-y: auto;
    scrollbar-gutter: stable both-edges;
}

/* Keep the single-column editor centered; the shared dialog body owns scrolling. */
fluent-dialog:has(.care-info-edit-body)::part(control) {
    --dialog-padding: 16px;
    padding-inline: 24px;
    width: min(760px, calc(100vw - 32px));
    height: auto;
    box-sizing: border-box;
}

:is(.ai-assistant-title, .reception-dialog-heading) {
    color: var(--hc-text-primary, var(--neutral-foreground-rest, var(--acc-control-text)));
    font-size: 1.125rem;
    font-weight: 600;
}

.recharge-section-title { color: var(--hc-text-primary, var(--neutral-foreground-rest, var(--acc-control-text))); font-weight: 600; }
.acc-profile-menu-popover .fluent-popover-content { box-sizing: border-box; width: 100%; padding: 12px; }
.acc-profile-menu-popover fluent-menu-item {
    box-sizing: border-box;
    padding: 8px 12px;
    border-radius: 6px;
    font-size: 1rem;
    font-weight: 400;
    line-height: 1.5;
    min-height: 40px;
    color: var(--hc-text-primary, var(--neutral-foreground-rest, #18364d));
}
.acc-profile-menu-popover fluent-menu-item:hover { background: var(--hc-bg-secondary, var(--acc-control-hover)); }
.acc-profile-menu-popover fluent-menu-item::part(content) { font: inherit; color: inherit; min-width: 0; white-space: normal; overflow-wrap: anywhere; }
/* Keep the profile menu attached to its Fluent anchor; only its content scrolls. */
.acc-profile-menu-popover { overflow-y: auto; max-height: calc(100dvh - 160px); }
.acc-profile-menu-popover fluent-menu-item { height: auto; min-width: 0; white-space: normal; }

fluent-dialog :is(fluent-text-field, fluent-number-field, fluent-text-area, fluent-select) {
    box-sizing: border-box;
    min-width: 0;
    max-width: 100%;
    font-size: var(--acc-control-font-size);
}
fluent-dialog :is(fluent-text-field, fluent-number-field, fluent-text-area)::part(root) {
    box-sizing: border-box;
    border: 1px solid var(--hc-border, #71869b);
    border-radius: 8px;
    min-height: 40px;
    background: var(--hc-bg-primary, var(--neutral-layer-1, #fff));
}
fluent-dialog fluent-select::part(control) {
    border: 1px solid var(--hc-border, #71869b);
    border-radius: 8px;
    background: var(--hc-bg-primary, var(--neutral-layer-1, #fff));
}
fluent-dialog :is(fluent-text-field, fluent-number-field, fluent-text-area)[disabled]::part(root),
fluent-dialog fluent-select[disabled]::part(control) {
    background: var(--hc-disabled-bg, #e5e9ed);
    border-color: var(--hc-border, #a5b6c3);
    cursor: not-allowed;
}
fluent-dialog :is(fluent-text-field, fluent-number-field, fluent-text-area):focus-within::part(root),
fluent-dialog fluent-select:focus-within::part(control) {
    border-color: var(--hc-accent, var(--acc-control-accent));
}
fluent-dialog :is(fluent-text-field, fluent-number-field, fluent-select)::part(control) {
    box-sizing: border-box;
    min-height: 40px;
    font-size: var(--acc-control-font-size);
}

.ai-tts-settings-form .ai-tts-slider {
    appearance: none;
    width: 100%;
    height: 32px;
    margin: 0;
    background: transparent;
    accent-color: var(--acc-control-accent);
    cursor: pointer;
}
.ai-tts-slider::-webkit-slider-runnable-track { height: 6px; border-radius: 3px; background: var(--hc-border, #687d8e); }
.ai-tts-slider::-moz-range-track { height: 6px; border-radius: 3px; background: var(--hc-border, #687d8e); }
.ai-tts-slider::-webkit-slider-thumb { appearance: none; width: 22px; height: 22px; margin-top: -8px; border: 2px solid var(--acc-control-on-accent); border-radius: 50%; background: var(--acc-control-accent); box-shadow: 0 0 0 1px var(--acc-control-accent); }
.ai-tts-slider::-moz-range-thumb { width: 18px; height: 18px; border: 2px solid var(--acc-control-on-accent); border-radius: 50%; background: var(--acc-control-accent); box-shadow: 0 0 0 1px var(--acc-control-accent); }
.ai-tts-slider:focus-visible { outline: 3px solid var(--hc-focus, #b07100); outline-offset: 2px; border-radius: 4px; }

/* ===============================================
   BASE STYLES
   =============================================== */

/* Screen reader only class */
.screen-reader-only {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}

:root {
    --acc-focus-background: #ffdd00;
    --acc-focus-underline: #0b0c0c;
    --acc-time-picker-trigger-focus-outline: none;
}

:root:has(.telephony-event-dialog__body),
body:has(.telephony-event-dialog__body),
:root:has(.telephony-history),
body:has(.telephony-history) {
    overflow: hidden;
    overscroll-behavior: none;
}

fluent-dialog:has(.telephony-history)::part(control),
fluent-dialog:has(.telephony-event-dialog__body)::part(control) {
    margin-inline: auto;
    justify-self: center;
}

fluent-dialog:has(.telephony-history)::part(positioning-region),
fluent-dialog:has(.telephony-event-dialog__body)::part(positioning-region) {
    overflow: hidden;
}

:root[data-msgenie-input-modality="keyboard"] {
    --acc-time-picker-trigger-focus-outline: 2px solid var(--accent-fill-rest);
}

/* Shared keyboard focus treatment. */
:root:root[data-msgenie-input-modality="keyboard"] :focus-visible:not(table.fluent-data-grid) {
    --focus-stroke-outer: transparent !important;
    --focus-stroke-inner: transparent !important;
    outline: none !important;
    background-color: var(--acc-focus-background) !important;
    box-shadow: 0 4px 0 var(--acc-focus-underline) !important;
    -webkit-box-decoration-break: clone;
    box-decoration-break: clone;
}

/* Script-managed grid targets may receive focus programmatically after a keyboard action. */
:root:root[data-msgenie-input-modality="keyboard"] [data-msgenie-grid-cell="true"]:focus {
    --focus-stroke-outer: transparent !important;
    --focus-stroke-inner: transparent !important;
    outline: none !important;
    background-color: var(--acc-focus-background) !important;
    box-shadow: 0 4px 0 var(--acc-focus-underline) !important;
}

/* Fluent may focus its table root internally even though it is not a user action. */
:root:root table.fluent-data-grid:focus {
    outline: none !important;
    background-color: transparent !important;
    box-shadow: none !important;
}

:root:root[data-msgenie-input-modality="keyboard"] :where(
    fluent-badge,
    fluent-button,
    fluent-checkbox,
    fluent-date-picker,
    fluent-menu-item,
    fluent-number-field,
    fluent-profile-menu,
    fluent-radio,
    fluent-search,
    fluent-select,
    fluent-switch,
    fluent-text-area,
    fluent-text-field,
    fluent-time-picker,
    .mud-checkbox
):focus-within {
    --focus-stroke-outer: transparent !important;
    --focus-stroke-inner: transparent !important;
    outline: none !important;
    background-color: var(--acc-focus-background) !important;
    box-shadow:
        0 0 0 4px var(--acc-focus-background),
        0 8px 0 var(--acc-focus-underline) !important;
}

:root:root[data-msgenie-input-modality="keyboard"] :where(
    fluent-button,
    fluent-date-picker,
    fluent-menu-item,
    fluent-number-field,
    fluent-profile-menu,
    fluent-search,
    fluent-select,
    fluent-text-area,
    fluent-text-field,
    fluent-time-picker
):focus-within::part(control),
:root:root[data-msgenie-input-modality="keyboard"] :where(
    fluent-date-picker,
    fluent-search,
    fluent-text-field
):focus-within::part(root) {
    background: var(--acc-focus-background) !important;
}

/* Keep the selected state visible inside native and Fluent choice controls. */
:root:root[data-msgenie-input-modality="keyboard"] :where(
    input[type="checkbox"],
    input[type="radio"]
):focus-visible {
    background-color: revert !important;
    box-shadow:
        0 0 0 4px var(--acc-focus-background),
        0 8px 0 var(--acc-focus-underline) !important;
}

:root:root[data-msgenie-input-modality="keyboard"] fluent-accordion-item:focus-within::part(heading),
:root:root[data-msgenie-input-modality="keyboard"] fluent-accordion-item:focus-within::part(button) {
    outline: none !important;
    background-color: var(--acc-focus-background) !important;
    box-shadow: 0 4px 0 var(--acc-focus-underline) !important;
}

@media (forced-colors: active) {
    :root {
        --acc-focus-background: Highlight;
        --acc-focus-underline: CanvasText;
    }
}

/* ===============================================
   HIGH CONTRAST THEME DEFINITIONS
   =============================================== */

/* Mode 1: Black background + White text */
:root.high-contrast-1 {
    --hc-bg-primary: #000000;
    --hc-bg-secondary: #1A1A1A;
    --hc-bg-tertiary: #333333;
    --hc-text-primary: #FFFFFF;
    --hc-text-secondary: #FFFFFF;
    --hc-border: #FFFFFF;
    --hc-accent: #00CCFF;
    --hc-accent-text: #000000;
    --hc-focus: #FFFF00;
    --hc-error: #FF4444;
    --hc-success: #00FF00;
    --hc-warning: #FFFF00;
    --hc-input-bg: #333333;
    --hc-card-bg: #1A1A1A;
    --hc-nav-bg: #1A1A1A;
    --hc-nav-hover: #333333;
    --hc-disabled-bg: #666666;
    --hc-disabled-text: #999999;
}

/* Mode 2: Yellow background + Black text */
:root.high-contrast-2 {
    --hc-bg-primary: #FFFF00;
    --hc-bg-secondary: #FFFF33;
    --hc-bg-tertiary: #FFFF66;
    --hc-text-primary: #000000;
    --hc-text-secondary: #000000;
    --hc-border: #000000;
    --hc-accent: #0000CC;
    --hc-accent-text: #FFFFFF;
    --hc-focus: #FF0000;
    --hc-error: #CC0000;
    --hc-success: #006600;
    --hc-warning: #FF6600;
    --hc-input-bg: #FFFFCC;
    --hc-card-bg: #FFFF33;
    --hc-nav-bg: #FFFF00;
    --hc-nav-hover: #FFEB3B;
    --hc-disabled-bg: #CCCC99;
    --hc-disabled-text: #666666;
}

/* Mode 3: Blue background + Yellow text */
:root.high-contrast-3 {
    --hc-bg-primary: #000080;
    --hc-bg-secondary: #0000A0;
    --hc-bg-tertiary: #0000C0;
    --hc-text-primary: #FFFF00;
    --hc-text-secondary: #FFFF00;
    --hc-border: #FFFF00;
    --hc-accent: #00FFFF;
    --hc-accent-text: #000080;
    --hc-focus: #FF00FF;
    --hc-error: #FF4444;
    --hc-success: #00FF00;
    --hc-warning: #FFAA00;
    --hc-input-bg: #000060;
    --hc-card-bg: #0000A0;
    --hc-nav-bg: #0000A0;
    --hc-nav-hover: #0000C0;
    --hc-disabled-bg: #333399;
    --hc-disabled-text: #999999;
}

/* Mode 4: White background + Black text */
:root.high-contrast-4 {
    --hc-bg-primary: #FFFFFF;
    --hc-bg-secondary: #F0F0F0;
    --hc-bg-tertiary: #E0E0E0;
    --hc-text-primary: #000000;
    --hc-text-secondary: #000000;
    --hc-border: #000000;
    --hc-accent: #0000FF;
    --hc-accent-text: #FFFFFF;
    --hc-focus: #FF0000;
    --hc-error: #CC0000;
    --hc-success: #006600;
    --hc-warning: #FF6600;
    --hc-input-bg: #FFFFFF;
    --hc-card-bg: #F8F8F8;
    --hc-nav-bg: #F0F0F0;
    --hc-nav-hover: #E0E0E0;
    --hc-disabled-bg: #D0D0D0;
    --hc-disabled-text: #999999;
}

/* Mode 5: Dark grey + Light grey */
:root.high-contrast-5 {
    --hc-bg-primary: #1A1A1A;
    --hc-bg-secondary: #2A2A2A;
    --hc-bg-tertiary: #3A3A3A;
    --hc-text-primary: #E6E6E6;
    --hc-text-secondary: #E6E6E6;
    --hc-border: #E6E6E6;
    --hc-accent: #66B3FF;
    --hc-accent-text: #000000;
    --hc-focus: #FFD700;
    --hc-error: #FF6666;
    --hc-success: #66FF66;
    --hc-warning: #FFB366;
    --hc-input-bg: #333333;
    --hc-card-bg: #2A2A2A;
    --hc-nav-bg: #2A2A2A;
    --hc-nav-hover: #3A3A3A;
    --hc-disabled-bg: #555555;
    --hc-disabled-text: #999999;
}

/* ===============================================
   PRIVACY POLICY FOOTER
   =============================================== */

.privacy-footer-container {
    background: var(--neutral-layer-2, #f5f5f5);
    color: var(--neutral-foreground-rest, #323130);
    padding: 16px 24px;
    display: flex !important;
    flex-direction: column !important;
    gap: 8px;
}

.footer-first-row {
    display: flex !important;
    justify-content: space-between;
    align-items: center;
    width: 100%;
    gap: 16px;
}

.footer-second-row {
    display: flex !important;
    align-items: center;
    width: 100%;
    gap: 1rem;
}

.company-info {
    flex: 1;
}

.version-info {
    flex-shrink: 0;
    white-space: nowrap;
}

.copyright-info {
    color: var(--neutral-foreground-rest);
}

.privacy-footer {
    display: block;
}

.privacy-footer__link {
    color: var(--neutral-foreground-rest);
    text-decoration: none;
    font-weight: 600;
}

.privacy-footer__link:hover,
:root[data-msgenie-input-modality="keyboard"] .privacy-footer__link:focus {
    text-decoration: underline;
    color: var(--neutral-foreground-hover);
}

.privacy-footer__version {
    margin-left: auto;
    font-size: 0.85rem;
    color: var(--neutral-foreground-hint, rgba(50, 49, 48, 0.8));
}

@media (max-width: 768px) {
    .privacy-footer__wrapper {
        padding: 12px 16px;
        flex-direction: column;
        align-items: flex-start;
        gap: 8px;
    }

    .privacy-footer__version {
        margin-left: 0;
    }
}

/* ===============================================
   PRIVACY POLICY PAGE
   =============================================== */

.privacy-policy-page {
    max-width: 960px;
    margin: 0 auto;
    padding: 32px 24px 64px;
    line-height: 1.7;
    color: var(--neutral-foreground-rest, #323130);
}

.privacy-policy-page section {
    margin-bottom: 32px;
}

.privacy-policy-page h2 {
    font-size: 1.2rem;
    margin-bottom: 12px;
    font-weight: 600;
}

.privacy-policy-page p {
    margin: 0 0 12px;
}

.privacy-policy-page ul,
.privacy-policy-page dl {
    margin: 0 0 12px;
    padding-left: 1.2rem;
}

.privacy-policy-page li {
    margin-bottom: 6px;
}

.privacy-policy-page dl {
    padding-left: 0;
}

.privacy-policy-page dt {
    font-weight: 600;
    margin-top: 12px;
}

.privacy-policy-page a {
    color: var(--accent-fill-rest, #0f6cbd);
}

@media (max-width: 768px) {
    .privacy-policy-page {
        padding: 24px 16px 48px;
    }
}


/* ===============================================
   HIGH CONTRAST MODE APPLICATIONS
   =============================================== */

/* Apply to all high contrast modes */
[class*="high-contrast"] {
    /* FluentUI CSS Variables */
    --neutral-fill-rest: var(--hc-bg-tertiary);
    --neutral-fill-hover: var(--hc-bg-secondary);
    --neutral-fill-active: var(--hc-bg-tertiary);
    --neutral-fill-input-rest: var(--hc-input-bg);
    --neutral-fill-input-hover: var(--hc-bg-secondary);
    --neutral-foreground-rest: var(--hc-text-primary);
    --neutral-foreground-hover: var(--hc-text-primary);
    --accent-fill-rest: var(--hc-bg-tertiary);
    --accent-fill-hover: var(--hc-bg-secondary);
    --accent-fill-active: var(--hc-bg-tertiary);
    --accent-foreground-rest: var(--hc-text-primary);
    --accent-foreground-hover: var(--hc-text-primary);
    --foreground-on-accent-rest: var(--hc-text-primary);
    --foreground-on-accent-hover: var(--hc-text-primary);
    --foreground-on-accent-active: var(--hc-text-primary);
    --focus-stroke-outer: var(--hc-focus);
    --focus-stroke-inner: var(--hc-bg-primary);
    --neutral-stroke-rest: var(--hc-border);
    --neutral-stroke-hover: var(--hc-border);
    --neutral-layer-1: var(--hc-bg-primary);
    --neutral-layer-2: var(--hc-bg-secondary);
    --neutral-layer-3: var(--hc-bg-tertiary);
    --error-fill-rest: var(--hc-error);
    --success-fill-rest: var(--hc-success);
    --warning-fill-rest: var(--hc-warning);
    
    /* Disabled states */
    --neutral-fill-stealth-rest: var(--hc-disabled-bg);
    --neutral-fill-stealth-hover: var(--hc-disabled-bg);
    --neutral-fill-stealth-active: var(--hc-disabled-bg);
    --neutral-foreground-disabled: var(--hc-disabled-text);
    --accent-fill-disabled: var(--hc-disabled-bg);
    --accent-foreground-disabled: var(--hc-disabled-text);
    --disabled-opacity: 1;

    /* Radzen CSS Variables */
    --rz-background-color: var(--hc-bg-primary) !important;
    --rz-base-background-color: var(--hc-bg-primary) !important;
    --rz-body-background-color: var(--hc-bg-primary) !important;
    --rz-text-color: var(--hc-text-primary) !important;
    --rz-text: var(--hc-text-primary) !important;
    --rz-primary: var(--hc-accent) !important;
    --rz-border-color: var(--hc-border) !important;
    --rz-grid-header-background-color: var(--hc-nav-bg) !important;
    --rz-grid-header-text-color: var(--hc-text-primary) !important;
    --rz-grid-background-color: var(--hc-bg-primary) !important;
    --rz-grid-text-color: var(--hc-text-primary) !important;
    --rz-input-background-color: var(--hc-input-bg) !important;
    --rz-input-text-color: var(--hc-text-primary) !important;
    --rz-input-border-color: var(--hc-border) !important;
}

/* Layout Components */
html[class*="high-contrast"],
html[class*="high-contrast"] body,
html[class*="high-contrast"] .main,
html[class*="high-contrast"] fluent-layout,
html[class*="high-contrast"] fluent-stack,
html[class*="high-contrast"] fluent-body-content {
    background-color: var(--hc-bg-primary) !important;
    color: var(--hc-text-primary) !important;
}

/* Headers */
html[class*="high-contrast"] header.header,
html[class*="high-contrast"] header.header span,
html[class*="high-contrast"] header.header .header-gutters {
    background-color: var(--hc-nav-bg) !important;
    color: var(--hc-text-primary) !important;
    font-weight: bold !important;
}

/* Navigation */
html[class*="high-contrast"] .navmenu,
html[class*="high-contrast"] .sitenav,
html[class*="high-contrast"] fluent-nav-menu,
html[class*="high-contrast"] fluent-nav-link,
html[class*="high-contrast"] fluent-nav-group,
html[class*="high-contrast"] .fluent-nav-item {
    background-color: var(--hc-nav-bg) !important;
    color: var(--hc-text-primary) !important;
    font-weight: bold !important;
    border: 2px solid var(--hc-border) !important;
}

html[class*="high-contrast"] fluent-nav-link:hover,
html[class*="high-contrast"][data-msgenie-input-modality="keyboard"] fluent-nav-link:focus,
html[class*="high-contrast"] fluent-nav-group:hover,
html[class*="high-contrast"][data-msgenie-input-modality="keyboard"] fluent-nav-group:focus,
html[class*="high-contrast"] .fluent-nav-item:hover {
    background-color: var(--hc-nav-hover) !important;
    color: var(--hc-text-primary) !important;
}

/* Icons in navigation */
html[class*="high-contrast"] fluent-nav-link fluent-icon,
html[class*="high-contrast"] fluent-nav-group fluent-icon,
html[class*="high-contrast"] .navmenu fluent-icon,
html[class*="high-contrast"] .sitenav fluent-icon {
    color: var(--hc-text-primary) !important;
    fill: var(--hc-text-primary) !important;
}

/* High contrast yellow/black mode: keep nav icons black for readability */
html.high-contrast-2 fluent-nav-link fluent-icon,
html.high-contrast-2 fluent-nav-group fluent-icon,
html.high-contrast-2 .navmenu fluent-icon,
html.high-contrast-2 .sitenav fluent-icon {
    color: #000000 !important;
    fill: #000000 !important;
}

/* fluent-nav-item 하위 모든 요소에 배경색 적용 */
html[class*="high-contrast"] .fluent-nav-item *,
html[class*="high-contrast"] .fluent-nav-item a,
html[class*="high-contrast"] .fluent-nav-item div,
html[class*="high-contrast"] .fluent-nav-item span,
html[class*="high-contrast"] .fluent-nav-item svg,
html[class*="high-contrast"] .fluent-nav-item .positioning-region,
html[class*="high-contrast"] .fluent-nav-item .content-region,
html[class*="high-contrast"] .fluent-nav-item .fluent-nav-text,
html[class*="high-contrast"] .fluent-nav-item .fluent-nav-icon {
    background-color: var(--hc-nav-bg) !important;
    color: var(--hc-text-primary) !important;
    fill: var(--hc-text-primary) !important;
    font-weight: bold !important;
}

/* fluent-nav-item 호버 시 하위 요소들에 배경색 적용 */
html[class*="high-contrast"] .fluent-nav-item:hover *,
html[class*="high-contrast"] .fluent-nav-item:hover a,
html[class*="high-contrast"] .fluent-nav-item:hover div,
html[class*="high-contrast"] .fluent-nav-item:hover span,
html[class*="high-contrast"] .fluent-nav-item:hover svg,
html[class*="high-contrast"] .fluent-nav-item:hover .positioning-region,
html[class*="high-contrast"] .fluent-nav-item:hover .content-region,
html[class*="high-contrast"] .fluent-nav-item:hover .fluent-nav-text,
html[class*="high-contrast"] .fluent-nav-item:hover .fluent-nav-icon {
    background-color: var(--hc-nav-hover) !important;
    color: var(--hc-text-primary) !important;
    fill: var(--hc-text-primary) !important;
    font-weight: bold !important;
}

/* Form Controls */
html[class*="high-contrast"] fluent-text-field,
html[class*="high-contrast"] fluent-text-area,
html[class*="high-contrast"] fluent-search,
html[class*="high-contrast"] .fluent-select,
html[class*="high-contrast"] input,
html[class*="high-contrast"] select,
html[class*="high-contrast"] textarea {
    background-color: var(--hc-input-bg) !important;
    color: var(--hc-text-primary) !important;
    border: 2px solid var(--hc-border) !important;
}

/* Buttons */
html[class*="high-contrast"] fluent-button,
html[class*="high-contrast"] .fluent-button,
html[class*="high-contrast"] button:not(.hc-nav-button) {
    background-color: var(--hc-bg-tertiary) !important;
    color: var(--hc-text-primary) !important;
    border: 2px solid var(--hc-border) !important;
    font-weight: bold !important;
}

/* High contrast yellow/black mode: ensure neutral/outline button icons stay black */
html.high-contrast-2 fluent-button:not([appearance="accent"]) fluent-icon,
html.high-contrast-2 .fluent-button:not([appearance="accent"]) fluent-icon,
html.high-contrast-2 button:not([appearance="accent"]) fluent-icon,
html.high-contrast-2 fluent-button:not([appearance="accent"]) svg,
html.high-contrast-2 .fluent-button:not([appearance="accent"]) svg,
html.high-contrast-2 button:not([appearance="accent"]) svg {
    color: #000000 !important;
    fill: #000000 !important;
}

/* High contrast yellow/black mode: force accent/primary button icons to black as well */
html.high-contrast-2 fluent-button fluent-icon,
html.high-contrast-2 .fluent-button fluent-icon,
html.high-contrast-2 button fluent-icon,
html.high-contrast-2 fluent-button svg,
html.high-contrast-2 .fluent-button svg,
html.high-contrast-2 button svg,
html.high-contrast-2 fluent-button::part(start),
html.high-contrast-2 fluent-button::part(end) {
    color: #000000 !important;
    fill: #000000 !important;
}

/* High contrast white/black mode: force button icons to black for consistency */
html.high-contrast-4 fluent-button fluent-icon,
html.high-contrast-4 .fluent-button fluent-icon,
html.high-contrast-4 button fluent-icon,
html.high-contrast-4 fluent-button svg,
html.high-contrast-4 .fluent-button svg,
html.high-contrast-4 button svg,
html.high-contrast-4 fluent-button::part(start),
html.high-contrast-4 fluent-button::part(end) {
    color: #000000 !important;
    fill: #000000 !important;
}

/* Primary buttons (navigation, headers) */
html[class*="high-contrast"] .hc-nav-button,
html[class*="high-contrast"] .rz-button,
html[class*="high-contrast"] [role="button"]:not(.fluent-nav-menu [role="button"]) {
    background-color: var(--hc-nav-bg) !important;
    color: var(--hc-text-primary) !important;
    border: 2px solid var(--hc-border) !important;
    font-weight: bold !important;
}

/* Cards */
html[class*="high-contrast"] fluent-card,
html[class*="high-contrast"] .fluent-card {
    background-color: var(--hc-card-bg) !important;
    color: var(--hc-text-primary) !important;
    border: 2px solid var(--hc-border) !important;
}

/* Dialogs */
html[class*="high-contrast"] fluent-dialog,
html[class*="high-contrast"] .fluent-dialog {
    color: var(--hc-text-primary) !important;
}

html[class*="high-contrast"] fluent-dialog::part(control),
html[class*="high-contrast"] .fluent-dialog::part(control) {
    background-color: var(--hc-card-bg) !important;
    color: var(--hc-text-primary) !important;
    border: 2px solid var(--hc-border) !important;
}

html[class*="high-contrast"] fluent-dialog::part(overlay),
html[class*="high-contrast"] .fluent-dialog::part(overlay),
html[class*="high-contrast"] fluent-dialog::part(backdrop),
html[class*="high-contrast"] .fluent-dialog::part(backdrop) {
    background-color: rgba(0, 0, 0, 0.55) !important;
}

/* FluentButton Shadow DOM Support - 강화된 스타일 */
html[class*="high-contrast"] fluent-button::part(control) {
    background: var(--hc-bg-tertiary) !important;
    color: var(--hc-text-primary) !important;
    font-weight: bold !important;
}

/* FluentButton Disabled State */
html[class*="high-contrast"] fluent-button[disabled]::part(control),
html[class*="high-contrast"] fluent-button[disabled] .control {
    background: var(--hc-disabled-bg) !important;
    color: var(--hc-disabled-text) !important;
    border: 2px solid var(--hc-disabled-text) !important;
    font-weight: bold !important;
    opacity: 1 !important;
}

/* Additional disabled state selectors */
html[class*="high-contrast"] fluent-button[disabled],
html[class*="high-contrast"] fluent-button[aria-disabled="true"] {
    --neutral-fill-rest: var(--hc-disabled-bg) !important;
    --neutral-foreground-rest: var(--hc-disabled-text) !important;
    --neutral-stroke-rest: var(--hc-disabled-text) !important;
    --accent-fill-rest: var(--hc-disabled-bg) !important;
    --accent-foreground-rest: var(--hc-disabled-text) !important;
    background-color: var(--hc-disabled-bg) !important;
    color: var(--hc-disabled-text) !important;
    border-color: var(--hc-disabled-text) !important;
    opacity: 1 !important;
}

/* FluentButton disabled with direct styling */
html[class*="high-contrast"] fluent-button[disabled] {
    background: var(--hc-disabled-bg) !important;
    color: var(--hc-disabled-text) !important;
    border: 2px solid var(--hc-disabled-text) !important;
}

/* FluentSearch Shadow DOM Support */
html[class*="high-contrast"] fluent-search::part(control),
html[class*="high-contrast"] fluent-search::part(root) {
    background: var(--hc-input-bg) !important;
    color: var(--hc-text-primary) !important;
    font-weight: bold !important;
}

/* FluentToolbar Support */
html[class*="high-contrast"] fluent-toolbar {
    background-color: var(--hc-bg-secondary) !important;
    color: var(--hc-text-primary) !important;
    border: 2px solid var(--hc-border) !important;
    font-weight: bold !important;
}

/* Base Fluent MessageBar contrast adjustments */
.fluent-messagebar .fluent-messagebar-message {
    font-size: var(--acc-control-font-size, 1rem);
    line-height: 1.5;
}

fluent-message-bar::part(control) {
    background-color: var(--neutral-layer-1, #f5f7fb);
    color: var(--neutral-foreground-rest, #1f2937);
    border-radius: calc(var(--design-unit, 4) * 1px);
}

fluent-message-bar::part(icon),
fluent-message-bar::part(actions),
fluent-message-bar::part(start) {
    color: inherit;
}

fluent-message-bar a,
fluent-message-bar button,
fluent-message-bar fluent-button::part(control) {
    color: inherit;
}

/* FluentTextField/FluentDatePicker Support */
html[class*="high-contrast"] fluent-text-field::part(control),
html[class*="high-contrast"] fluent-text-field::part(root) {
    background: var(--hc-input-bg) !important;
    color: var(--hc-text-primary) !important;
    border: 1px solid var(--hc-border) !important;
    font-weight: bold !important;
}

/* Active/Selected States */
html[class*="high-contrast"] fluent-button[appearance="accent"],
html[class*="high-contrast"] fluent-button[selected],
html[class*="high-contrast"] fluent-button:active,
html[class*="high-contrast"] .rz-button.rz-state-active,
html[class*="high-contrast"] button.acc-time-picker-option--selected,
html[class*="high-contrast"] button:checked {
    background-color: var(--hc-accent) !important;
    color: var(--hc-accent-text) !important;
    border: 2px solid var(--hc-border) !important;
}

/* Profile Menu */
html[class*="high-contrast"] fluent-profile-menu,
html[class*="high-contrast"] .fluent-profile-menu,
html[class*="high-contrast"] .fluent-popover-content  
{
    background-color: var(--hc-card-bg) !important;
    color: var(--hc-text-primary) !important;
}

/* Manager shell refresh: preserve the configured high-contrast palette. */
html[class*="high-contrast"] .app-header,
html[class*="high-contrast"] .acc-primary-rail,
html[class*="high-contrast"] .acc-section-tabs,
html[class*="high-contrast"] .acc-calendar-shell,
html[class*="high-contrast"] .acc-reservation-list-shell,
html[class*="high-contrast"] .acc-month-control-row,
html[class*="high-contrast"] .acc-day-control-row,
html[class*="high-contrast"] .acc-month-day,
html[class*="high-contrast"] .acc-month-day-header {
    background: var(--hc-bg-primary) !important;
    color: var(--hc-text-primary) !important;
    border-color: var(--hc-border) !important;
}

html[class*="high-contrast"] .acc-primary-item,
html[class*="high-contrast"] .acc-section-tab {
    color: var(--hc-text-primary) !important;
}

html[class*="high-contrast"] .acc-primary-item.active,
html[class*="high-contrast"] .acc-primary-item.is-active,
html[class*="high-contrast"] .acc-section-tab.active,
html[class*="high-contrast"] .acc-section-tab[aria-current="page"],
html[class*="high-contrast"] .acc-view-button[aria-pressed="true"],
html[class*="high-contrast"] .acc-calendar-day-button--today {
    background: var(--hc-accent) !important;
    color: var(--hc-accent-text) !important;
    border-color: var(--hc-border) !important;
    box-shadow: inset 0 0 0 2px var(--hc-border) !important;
}

html[class*="high-contrast"] .acc-scheduler-event,
html[class*="high-contrast"] .acc-month-event,
html[class*="high-contrast"] .acc-list-status {
    background-color: var(--hc-card-bg) !important;
    color: var(--hc-text-primary) !important;
    border-color: var(--hc-border) !important;
}

html[class*="high-contrast"] fluent-menu-item,
html[class*="high-contrast"] .fluent-menu-item {
    background-color: var(--hc-card-bg) !important;
    color: var(--hc-text-primary) !important;
}

html[class*="high-contrast"] fluent-menu-item:hover,
html[class*="high-contrast"] .fluent-menu-item:hover {
    background-color: var(--hc-bg-secondary) !important;
    color: var(--hc-text-primary) !important;

}

/* Schedule Page - Radzen Components */
html[class*="high-contrast"] .rz-scheduler,
html[class*="high-contrast"] .rz-calendar {
    background-color: var(--hc-bg-primary) !important;
    color: var(--hc-text-primary) !important;
}

/* Calendar buttons and navigation */
html[class*="high-contrast"] .rz-button-group button,
html[class*="high-contrast"] .rz-scheduler-view-button,
html[class*="high-contrast"] .rz-toolbar button {
    background-color: var(--hc-bg-primary) !important;
    color: var(--hc-text-primary) !important;
    border: 2px solid var(--hc-border) !important;
    font-weight: bold !important;
}

/* Table headers */
html[class*="high-contrast"] th,
html[class*="high-contrast"] .rz-grid-header {
    background-color: var(--hc-nav-bg) !important;
    color: var(--hc-text-primary) !important;
    font-weight: bold !important;
}

/* Text Elements */
html[class*="high-contrast"] p,
html[class*="high-contrast"] span,
html[class*="high-contrast"] div,
html[class*="high-contrast"] h1,
html[class*="high-contrast"] h2,
html[class*="high-contrast"] h3,
html[class*="high-contrast"] h4,
html[class*="high-contrast"] h5,
html[class*="high-contrast"] h6,
html[class*="high-contrast"] label,
html[class*="high-contrast"] td,
html[class*="high-contrast"] li,
html[class*="high-contrast"] a {
    color: var(--hc-text-primary) !important;
}

/* Card Headers - Special Treatment */
html[class*="high-contrast"] .card-header,
html[class*="high-contrast"] .page-header,
html[class*="high-contrast"] [class*="header"],
html[class*="high-contrast"] [class*="title"] {
    background-color: var(--hc-nav-bg) !important;
    color: var(--hc-text-primary) !important;
    font-weight: bold !important;
}

/* ===============================================
   FLUENT-UI STYLE SELECT (Non-HC styles)
   =============================================== */

select.fluent-select,
.group-rule select.fluent-select {
    padding-inline-end: 32px;
    appearance: none;
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 20 20'%3e%3cpath stroke='%236b7280' stroke-linecap='round' stroke-linejoin='round' stroke-width='1.5' d='m6 8 4 4 4-4'/%3e%3c/svg%3e");
    background-position: right 8px center;
    background-repeat: no-repeat;
    background-size: 16px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* Native arrows retain the active system/contrast colors. */
html[class*="high-contrast"] .group-rule select.fluent-select {
    appearance: auto;
    background-image: none;
}

@media (forced-colors: active) {
    .group-rule select.fluent-select {
        appearance: auto;
        background-image: none;
    }
}

:root[data-msgenie-input-modality="keyboard"] select.fluent-select:focus {
    outline: none;
    border-color: var(--accent-fill-rest);
    box-shadow: 0 0 0 1px var(--accent-fill-rest);
}

select.fluent-select:disabled {
    background-color: var(--neutral-fill-input-disabled);
    color: var(--neutral-foreground-disabled);
    cursor: not-allowed;
}

/* ===============================================
   EXPLANATION CARD STYLES
   =============================================== */

/* Explanation card container styling */
.explanation-card {
    margin: 20px 0;
    padding: 24px;
    background-color: var(--neutral-layer-2);
}

/* Explanation card content stack */
.explanation-content {
    gap: 16px;
    flex-direction: column;
}

/* Explanation text labels */
.explanation-text {
    color: var(--neutral-foreground-rest);
    line-height: 1.5;
}

/* Legend container with controlled width and spacing */
.explanation-legend {
    gap: 6px;
    flex-direction: row;
    flex-wrap: nowrap;
    width: 30%;
    margin-top: 12px;
}

/* Individual legend items */
.legend-item {
    gap: 8px;
    flex-direction: row;
    align-items: center;
}

/* Legend item labels */
.legend-label {
    font-size: 14px;
}

/* ===============================================
   DIALOG LABEL STYLES
   =============================================== */

/* Common dialog label styling for AccTheme */
.acc-dialog-label {
    font-size: 16px;
    white-space: normal;
    word-break: keep-all;
}

/* ===============================================
   CTI DIALOG OVERRIDES
   =============================================== */

/* Recent-visit grids live inside Fluent stacks that default to align-items:start. */
.telephony-event-dialog__header:focus,
.telephony-event-dialog__header:focus-visible,
.telephony-event-dialog__header > [tabindex]:focus,
.telephony-event-dialog__header > [tabindex]:focus-visible {
    outline: none !important;
    background-color: transparent !important;
    box-shadow: none !important;
}

.telephony-event-dialog__history-grid {
    width: 100% !important;
    align-self: stretch !important;
}

.telephony-event-dialog__history-grid > .fluent-grid {
    width: 100% !important;
}

.telephony-event-dialog__quick-customer {
    width: 100%;
}

.telephony-event-dialog__quick-customer-grid {
    width: 100%;
}