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

/* ===============================================
   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;
}

/* ===============================================
   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,
.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"] fluent-nav-link:focus,
html[class*="high-contrast"] fluent-nav-group:hover,
html[class*="high-contrast"] 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-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: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;
}

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)
   =============================================== */

.fluent-select {
    width: 100%;
    min-width: 150px;
    height: 32px;
    padding: 6px 32px 6px 12px;
    border: 1px solid var(--neutral-stroke-rest);
    border-radius: var(--control-corner-radius);
    background-color: var(--neutral-fill-input-rest);
    color: var(--neutral-foreground-rest);
    font-family: var(--body-font);
    font-size: 13px !important;
    line-height: 1.2 !important;
    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;
}

.fluent-select:focus {
    outline: none;
    border-color: var(--accent-fill-rest);
    box-shadow: 0 0 0 1px var(--accent-fill-rest);
}

.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;
}