/* Shared UI primitives. Page styles keep layout-specific columns and behavior. */

/* Filter and search toolbars. */
.mur-toolbar {
    box-sizing: border-box;
    align-items: end;
    gap: 12px;
    margin: 16px 0;
}
.mur-toolbar :where(label,.mur-toolbar-label) { min-width: 0; }
.mur-toolbar :where(label,.mur-toolbar-label) > :first-child:not(input):not(select) { display: block; margin-bottom: 5px; }
.mur-toolbar :where(input[type="search"],input[type="text"],select,.mur-toolbar-control) {
    box-sizing: border-box;
    width: 100%;
    min-width: 0;
    height: 36px;
    min-height: 36px;
    margin: 0;
    padding: 7px 10px;
    border: 1px solid var(--border,#ddd);
    border-radius: 6px;
    background: var(--surface,#fff);
    color: var(--text,#000);
    font: inherit;
    font-weight: 400;
    line-height: 1.4;
    box-shadow: none;
}
.mur-toolbar :where(input[type="search"],input[type="text"],select,.mur-toolbar-control):focus-visible {
    outline: 2px solid var(--link,#1e2751);
    outline-offset: 2px;
}
.mur-toolbar-count { min-width: 0; color: var(--muted,#666); font-variant-numeric: tabular-nums; white-space: nowrap; }

/* Explicit search clear action, matching the Phase 2 search control. */
.mur-search-control { position: relative; min-width: 0; }
.mur-search-control > input[type=search] { padding-right: 42px !important; }
.mur-search-control > input[type=search]::-webkit-search-cancel-button { display: none; }
.mur-search-control > input[type=search]::-moz-search-clear-button { display: none; }
.content2 button.mur-search-clear:not(.ui-button):not(.bk-btn) {
    position: absolute;
    top: 50%;
    right: 4px;
    display: inline-grid;
    box-sizing: border-box;
    width: 32px;
    min-width: 32px;
    height: 32px;
    min-height: 32px;
    margin: 0;
    padding: 0;
    place-items: center;
    transform: translateY(-50%);
    border: 0 !important;
    border-radius: 4px;
    background: transparent !important;
    color: var(--muted,#666);
    box-shadow: none;
}
.content2 button.mur-search-clear:hover:not(:disabled),
.content2 button.mur-search-clear:focus-visible:not(:disabled) { background: var(--stripe,#eee) !important; color: var(--heading,#1e2751); }
.mur-search-clear[hidden] { display: none !important; }
.mur-search-clear svg { width: 17px; height: 17px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; }

/* Match native search cancel controls to the Phase 2 clear action. */
:root {
    --mur-search-clear-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23666' stroke-width='1.8' stroke-linecap='round'%3E%3Cpath d='M7 7l10 10M17 7 7 17'/%3E%3C/svg%3E");
}
:root[data-theme=dark] {
    --mur-search-clear-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23d4d4d8' stroke-width='1.8' stroke-linecap='round'%3E%3Cpath d='M7 7l10 10M17 7 7 17'/%3E%3C/svg%3E");
}
:is(.statistics-search-field,.schedule-filters,.users-filters) input[type=search]::-webkit-search-cancel-button,
.phase1-page .select2-search__field::-webkit-search-cancel-button,
.mur-select2-dropdown .select2-search__field::-webkit-search-cancel-button {
    -webkit-appearance: none;
    appearance: none;
    box-sizing: border-box;
    width: 28px;
    height: 28px;
    margin: -4px -5px -4px 4px;
    border-radius: 4px;
    background: transparent var(--mur-search-clear-icon) center/17px 17px no-repeat;
    cursor: pointer;
}
:is(.statistics-search-field,.schedule-filters,.users-filters) input[type=search]::-webkit-search-cancel-button:hover,
.phase1-page .select2-search__field::-webkit-search-cancel-button:hover,
.mur-select2-dropdown .select2-search__field::-webkit-search-cancel-button:hover {
    background-color: var(--stripe,#eee);
}
:is(.statistics-search-field,.schedule-filters,.users-filters) input[type=search]::-moz-search-clear-button,
.phase1-page .select2-search__field::-moz-search-clear-button,
.mur-select2-dropdown .select2-search__field::-moz-search-clear-button {
    width: 28px;
    height: 28px;
    border: 0;
    border-radius: 4px;
    background: transparent var(--mur-search-clear-icon) center/17px 17px no-repeat;
    cursor: pointer;
}

/* Searchable Select2 controls used by proposal forms and schedule filters. */
.mur-select2-container { position: relative; display: inline-block; max-width: 100%; vertical-align: middle; font-weight: 400; }
.mur-select2-container > .selection { display: block; width: 100%; }
.mur-select2-container:is(.select2-container--focus,.select2-container--open) :is(.select2-selection--single,.select2-selection--multiple) {
    border-color: var(--link,#1e2751);
    outline: 2px solid color-mix(in srgb,var(--link,#1e2751) 38%,transparent);
    outline-offset: 1px;
}
.mur-select2-dropdown {
    border-color: var(--border,#ddd);
    border-radius: 6px;
    background: var(--surface,#fff);
    color: var(--text,#000);
    box-shadow: 0 10px 24px rgba(0,0,0,.18);
}
.mur-select2-dropdown .select2-search { padding: 8px; }
.mur-select2-dropdown .select2-search__field {
    box-sizing: border-box;
    width: 100%;
    min-height: 38px;
    margin: 0;
    padding: 7px 9px;
    border: 1px solid var(--border,#ddd);
    border-radius: 5px;
    background: var(--page-bg,#fff);
    color: var(--text,#000);
    font: inherit;
    box-shadow: none;
}
.mur-select2-dropdown .select2-search__field:focus {
    border-color: var(--link,#1e2751);
    outline: 2px solid color-mix(in srgb,var(--link,#1e2751) 30%,transparent);
    outline-offset: 1px;
}
.mur-select2-dropdown .select2-results__option { padding: 9px 11px; color: var(--text,#000); line-height: 1.35; cursor: pointer; }
.mur-select2-dropdown .select2-results__option[aria-selected=true] { background: var(--stripe,#eee); color: var(--text,#000); }
.mur-select2-dropdown .select2-results__option--highlighted[aria-selected] { background: var(--hover,#e8edf7); color: var(--hover-text,#1e2751); }
.mur-select2-dropdown .select2-results__option[aria-disabled=true] { opacity: .5; cursor: not-allowed; }

/* Compact semantic labels. Interactive switches keep their component-specific structure. */
.mur-badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    box-sizing: border-box;
    min-height: 26px;
    padding: 3px 8px;
    border: 1px solid var(--border,#ddd);
    border-radius: 4px;
    background: var(--stripe,#eee);
    color: var(--muted,#666);
    font-size: 12px;
    font-weight: 600;
    line-height: 1.35;
    white-space: nowrap;
}
.mur-badge[data-tone="success"] { border-color: var(--success-border,#3e8e58); background: var(--success-bg,#edf8f0); color: var(--success-text,#185d31); }
.mur-badge[data-tone="warning"] { border-color: var(--warning-border,#c58a00); background: var(--warning-bg,#fff7df); color: var(--warning-text,#654b00); }
.mur-badge[data-tone="error"] { border-color: var(--danger-border,#c74b50); background: var(--danger-bg,#fff0f0); color: var(--danger-text,#741d22); }
.mur-badge[data-tone="info"] { border-color: color-mix(in srgb,var(--usable,#1f77b4) 45%,var(--border,#ddd)); background: color-mix(in srgb,var(--usable,#1f77b4) 10%,var(--surface,#fff)); color: var(--usable,#1f77b4); }

/* Form fields used by registration, recovery, contact, and profile. */
:where(.mur-form-field,.account-registration-field,.account-recovery-field,.contact-field,.account-profile-field) { min-width: 0; }
:where(.mur-form-field,.account-registration-field,.account-recovery-field,.contact-field,.account-profile-field) > label,
:where(.mur-form-field,.account-registration-field,.account-recovery-field,.contact-field,.account-profile-field) > :where(label):first-child {
    display: block;
    margin: 0 0 7px;
    color: var(--text,#000);
    font-size: 13px;
    font-weight: 600;
    line-height: 1.4;
}
:where(.mur-form-field,.account-registration-field,.account-recovery-field,.contact-field,.account-profile-field) > label span { color: var(--danger,#a62027); }
:is(.mur-form .mur-form-field,#account-registration-form .account-registration-field,.account-recovery-form .account-recovery-field,.contact-form .contact-field,#account-profile-form .account-profile-field) :where(input:not([type="checkbox"]):not([type="radio"]):not([type="submit"]):not([type="button"]),select,textarea) {
    box-sizing: border-box;
    width: 100%;
    max-width: 100%;
    min-width: 0;
    min-height: 42px;
    margin: 0;
    padding: 9px 10px;
    border: 1px solid var(--border,#ddd);
    border-radius: 4px;
    background: color-mix(in srgb,var(--stripe,#eee) 55%,var(--surface,#fff));
    color: var(--text,#000);
    font: inherit;
    font-weight: 400;
    line-height: 1.4;
    box-shadow: none;
}
:is(#account-registration-form .account-registration-field,.account-recovery-form .account-recovery-field,.contact-form .contact-field) :where(input:not([type="checkbox"]):not([type="radio"]):not([type="submit"]):not([type="button"]),select,textarea) { font-size: 16px; }
:is(.mur-form .mur-form-field,.contact-form .contact-field) textarea { resize: vertical; }
:is(.mur-form .mur-form-field,#account-registration-form .account-registration-field,.account-recovery-form .account-recovery-field,.contact-form .contact-field,#account-profile-form .account-profile-field) :where(input,select,textarea):focus-visible { outline: 2px solid var(--link,#1e2751); outline-offset: 2px; }
:is(.mur-form .mur-form-field,#account-registration-form .account-registration-field,.account-recovery-form .account-recovery-field,.contact-form .contact-field,#account-profile-form .account-profile-field) :where(input,select,textarea)[aria-invalid="true"] { border-color: var(--danger-border,#c74b50); }
:where(.mur-field-help,.mur-field-error,.account-registration-help,.account-registration-field-error,.account-recovery-help,.account-recovery-field-error,.contact-help,.contact-field-error,.account-profile-help,.account-profile-field-error) { display: block; margin-top: 7px; font-size: 12px; line-height: 1.45; }
:where(.mur-field-help,.account-registration-help,.account-recovery-help,.contact-help,.account-profile-help) { color: var(--muted,#666); }
:where(.mur-field-error,.account-registration-field-error,.account-recovery-field-error,.contact-field-error,.account-profile-field-error) { color: var(--danger,#a62027); }

/* Switch track shared by proposal options, recurrence, instruments, and sequences. */
:where(.mur-switch-control,.phase1-option-switch,.phase2-window-repeat-control,.phase2-instrument-switch-control,.sequence-option-switch) {
    position: relative;
    display: block;
    box-sizing: border-box;
    flex: 0 0 34px;
    width: 34px;
    height: 19px;
    border: 1px solid color-mix(in srgb,var(--muted,#666) 65%,var(--border,#ddd));
    border-radius: 10px;
    background: var(--surface,#fff);
    transition: border-color .16s ease,background-color .16s ease;
}
:where(.mur-switch-control,.phase1-option-switch,.phase2-window-repeat-control,.phase2-instrument-switch-control,.sequence-option-switch)::after {
    position: absolute;
    top: 3px;
    left: 3px;
    width: 11px;
    height: 11px;
    border-radius: 50%;
    background: var(--muted,#666);
    content: "";
    transition: transform .16s ease,background-color .16s ease;
}
input:checked + :where(.mur-switch-control,.phase1-option-switch,.phase2-window-repeat-control,.phase2-instrument-switch-control,.sequence-option-switch) { border-color: var(--link,#1e2751); background: color-mix(in srgb,var(--link,#1e2751) 22%,var(--surface,#fff)); }
input:checked + :where(.mur-switch-control,.phase1-option-switch,.phase2-window-repeat-control,.phase2-instrument-switch-control,.sequence-option-switch)::after { background: var(--link,#1e2751); transform: translateX(15px); }
input:focus-visible + :where(.mur-switch-control,.phase1-option-switch,.phase2-window-repeat-control,.phase2-instrument-switch-control,.sequence-option-switch) { outline: 2px solid var(--link,#1e2751); outline-offset: 2px; }
input:disabled + :where(.mur-switch-control,.phase1-option-switch,.phase2-window-repeat-control,.phase2-instrument-switch-control,.sequence-option-switch) { opacity: .48; }

/* Buttons that live outside .content2 and icon-only actions. */
:is(.mur-button,.mur-modal-footer .ui-state-default) {
    appearance: none;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 7px;
    box-sizing: border-box;
    min-height: 38px;
    padding: 7px 14px;
    border: 1px solid color-mix(in srgb,var(--link,#1e2751) 42%,var(--border,#ddd));
    border-radius: 6px;
    background: var(--surface,#fff);
    color: var(--heading,#1e2751);
    font: inherit;
    font-weight: 600;
    line-height: 1.4;
    text-decoration: none !important;
    cursor: pointer;
    box-shadow: none;
}
.mur-button:hover:not(:disabled),.mur-modal-footer .ui-state-default:hover:not(:disabled) { border-color: var(--link,#1e2751); background: var(--stripe,#eee); color: var(--heading,#1e2751); }
.mur-button:focus-visible,.mur-icon-button:focus-visible { outline: 2px solid var(--link,#1e2751); outline-offset: 2px; }
:is(.mur-button,.mur-modal-footer .ui-state-default):disabled { opacity: .48; cursor: not-allowed; }
.mur-back-button { flex: 0 0 auto; color: var(--heading,#1e2751) !important; text-decoration: none !important; white-space: nowrap; }
.mur-back-button > span { min-width: 0; }
.mur-back-button svg { flex: 0 0 18px; width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
:is(.mur-button-primary,.mur-modal-footer .mur-action-primary) { border-color: #46527b; background: #1e2751 url('../img/background2.jpg') center/cover no-repeat; color: #fff; }
:is(.mur-button-primary,.mur-modal-footer .mur-action-primary):hover:not(:disabled) { border-color: #7f8db9; background-image: linear-gradient(rgba(255,255,255,.12),rgba(255,255,255,.12)),url('../img/background2.jpg'); color: #fff; }
.mur-icon-button {
    appearance: none;
    display: inline-grid;
    place-items: center;
    box-sizing: border-box;
    flex: 0 0 36px;
    width: 36px;
    min-width: 36px;
    height: 36px;
    min-height: 36px;
    margin: 0;
    padding: 7px;
    border: 1px solid var(--border,#ddd);
    border-radius: 6px;
    background: var(--surface,#fff);
    color: var(--heading,#1e2751);
    font: inherit;
    cursor: pointer;
    box-shadow: none;
}
.mur-icon-button:hover:not(:disabled) { border-color: var(--link,#1e2751); background: var(--stripe,#eee); color: var(--heading,#1e2751); }
.mur-icon-button svg { width: 19px; height: 19px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.mur-modal-close { border-color: transparent; background: transparent; color: var(--muted,#666); }

/* Native-dialog shell. Individual dialogs set only their width and body layout. */
.mur-modal {
    position: fixed;
    inset: 0;
    box-sizing: border-box;
    max-width: calc(100vw - 24px);
    max-height: calc(100dvh - 24px);
    margin: auto;
    padding: 0;
    overflow: hidden;
    border: 1px solid var(--border,#ddd);
    border-radius: 8px;
    background: var(--surface,#fff);
    color: var(--text,#000);
    box-shadow: 0 24px 64px rgba(0,0,0,.38);
}
.mur-modal::backdrop { background: rgba(3,8,20,.7); backdrop-filter: blur(2px); }
.mur-modal-header { display: flex; align-items: center; justify-content: space-between; gap: 14px; padding: 14px 16px; border-bottom: 1px solid var(--border,#ddd); background: color-mix(in srgb,var(--link,#1e2751) 7%,var(--surface,#fff)); }
.mur-modal-header > div { display: grid; gap: 3px; min-width: 0; }
.mur-modal-header h2,.mur-modal-header h3 { margin: 0; color: var(--heading,#1e2751); }
.mur-modal-header > div > span { color: var(--muted,#666); font-size: 10px; font-weight: 700; letter-spacing: .07em; text-transform: uppercase; }
.mur-modal-body { box-sizing: border-box; min-height: 0; padding: 18px; overflow: auto; }
.mur-modal-footer { display: flex; justify-content: flex-end; gap: 8px; padding: 12px 16px; border-top: 1px solid var(--border,#ddd); background: var(--page-bg,#fff); }

/* Empty-state typography with layout variants for cards, inline blocks, and table rows. */
.mur-empty-state { color: var(--muted,#666); text-align: center; }
.mur-empty-state svg { width: 30px; height: 30px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; color: var(--link,#1e2751); }
.mur-empty-state strong { color: var(--heading,#1e2751); }
.mur-empty-card { display: grid; justify-items: center; gap: 6px; padding: 26px 18px; border: 1px solid var(--border,#ddd); border-radius: 6px; background: var(--surface,#fff); }
.mur-empty-inline { padding: 12px; border: 1px dashed var(--border,#ddd); border-radius: 6px; }
.mur-empty-row > td { padding: 24px 12px; color: var(--muted,#666); text-align: center; }

@media (max-width: 680px) {
    .mur-toolbar { gap: 10px; }
    .mur-toolbar :where(input[type="search"],input[type="text"],select,.mur-toolbar-control,button) { min-height: 44px; }
    :is(.mur-form .mur-form-field,#account-registration-form .account-registration-field,.account-recovery-form .account-recovery-field,.contact-form .contact-field,#account-profile-form .account-profile-field) :where(input:not([type="checkbox"]):not([type="radio"]),select,textarea) { font-size: 16px; }
    .mur-modal { max-width: calc(100vw - 16px); max-height: calc(100dvh - 16px); }
    .mur-modal-footer { padding: 10px 12px; }
}
@media (prefers-reduced-motion: reduce) {
    :where(.mur-switch-control,.phase1-option-switch,.phase2-window-repeat-control,.phase2-instrument-switch-control,.sequence-option-switch),
    :where(.mur-switch-control,.phase1-option-switch,.phase2-window-repeat-control,.phase2-instrument-switch-control,.sequence-option-switch)::after { transition: none; }
}
/* Route-level loading feedback. Phase 2 reuses the established Statistics
   orbit loader so loading feedback stays consistent across MUR. */
.mur-route-loader {
    z-index: 20000;
    flex-direction: column;
    gap: 12px;
    opacity: 1;
    transition: opacity .18s ease;
    cursor: progress;
}
.mur-route-loader[hidden] { display: none !important; }
.mur-route-loader.is-finishing { opacity: 0; pointer-events: none; }
.mur-route-loader .statistics-orbit-loader { position: relative; transform-style: preserve-3d; display: block; width: 280px; max-width: 100%; height: 250px; flex: 0 0 auto; }
.mur-route-loader .statistics-orbit-loader .star { top: 50%; transform: translate3d(-50%,-50%,0); }
.mur-route-loader .statistics-orbit-loader .planet { left: 50%; margin: -10px 0 0 -10px; z-index: auto; background: transparent; transform-style: preserve-3d; animation: statistics-orbit 6s ease-in-out infinite; will-change: transform; }
.mur-route-loader .statistics-planet-body {
    position: absolute;
    inset: 0;
    border-radius: 50%;
    background: #2c2b52;
    transform-origin: 0 0;
    animation: statistics-planet-depth 6s ease-in-out infinite;
    animation-duration: inherit;
    animation-delay: inherit;
    animation-play-state: inherit;
    will-change: transform;
}
.mur-route-loader .loader-text { margin: 0; font-size: 16px; }
html.mur-route-loading, html.mur-route-loading body { cursor: progress; }
@keyframes statistics-orbit {
    0%,100% { transform: translate3d(120px,100px,0); }
    50% { transform: translate3d(-80px,-90px,0); }
}
@keyframes statistics-planet-depth {
    0%,100% { transform: translateZ(1px) scale(1); }
    10% { transform: translateZ(1px) scale(1.05); }
    25% { transform: translateZ(1px) scale(1.1); }
    50% { transform: translateZ(1px) scale(1.05); }
    75% { transform: translateZ(-1px) scale(.9); }
    85% { transform: translateZ(-1px) scale(.925); }
    95% { transform: translateZ(-1px) scale(.95); }
}
@media (prefers-reduced-motion: reduce) {
    .mur-route-loader { transition: none; }
    .mur-route-loader .statistics-orbit-loader .planet { animation: none; transform: translate3d(120px,100px,0); will-change: auto; }
    .mur-route-loader .statistics-planet-body { animation: none; transform: translateZ(1px); will-change: auto; }
}
@media print { .mur-route-loader { display: none !important; } }