/* PERIOP CMS — exact patient-screen palette and gradients */
html body[data-cms-protected],
html body.cms-login-page {
    --ui-bg: #2f2e2d;
    --ui-bg-deep: #20201f;
    --ui-surface: rgba(255,255,255,.052);
    --ui-surface-hover: rgba(255,255,255,.085);
    --ui-surface-strong: rgba(255,255,255,.10);
    --ui-surface-dark: rgba(15,15,15,.34);
    --ui-border: rgba(205,213,211,.16);
    --ui-border-strong: rgba(200,165,106,.40);
    --ui-text: #f4f1eb;
    --ui-text-secondary: rgba(244,241,235,.68);
    --ui-text-muted: rgba(244,241,235,.54);
    --ui-accent: #c8a56a;
    --ui-accent-soft: rgba(200,165,106,.055);
    --ui-selected: #e9e3d8;
    --ui-selected-text: #211f1c;
    --bg: var(--ui-bg);
    --bg-deep: var(--ui-bg-deep);
    --panel: var(--ui-surface);
    --panel-strong: var(--ui-surface-strong);
    --line: var(--ui-border);
    --line-strong: var(--ui-border-strong);
    --text: var(--ui-text);
    --muted: var(--ui-text-secondary);
    --accent: var(--ui-accent);
    --accent-soft: var(--ui-accent-soft);
    --app-bg: var(--ui-bg);
    --app-text: var(--ui-text);
    color: #f4f1eb !important;
    background:
        radial-gradient(circle at 12% 8%, rgba(108, 99, 255, .18), transparent 31%),
        radial-gradient(circle at 88% 17%, rgba(0, 212, 255, .13), transparent 29%),
        radial-gradient(circle at 58% 100%, rgba(108, 99, 255, .10), transparent 36%),
        linear-gradient(145deg, #080808 0%, #0d0d12 55%, #08080b 100%) !important;
    background-attachment: fixed !important;
}

/* Patient header gradient: purple/teal are ambient light only, never interactive accents. */
html body[data-cms-protected] .cms-unified-topbar > .module-nav,
html body[data-cms-protected] nav.module-nav {
    border: 1px solid rgba(255,255,255,.11) !important;
    background:
        radial-gradient(820px 320px at 0% 0%, rgba(92,72,158,.20), transparent 44%),
        radial-gradient(760px 300px at 100% 0%, rgba(57,103,111,.075), transparent 42%),
        linear-gradient(90deg,
            rgba(27,24,32,.94) 0%,
            rgba(15,15,18,.98) 48%,
            rgba(14,15,17,.98) 62%,
            rgba(20,27,29,.93) 100%
        ) !important;
    box-shadow: inset 0 1px 0 rgba(255,255,255,.04), 0 24px 70px rgba(0,0,0,.20) !important;
    backdrop-filter: blur(24px) !important;
    -webkit-backdrop-filter: blur(24px) !important;
}

html body[data-cms-protected] nav.module-nav > a,
html body[data-cms-protected] nav.module-nav > a[href="/patient/"] {
    border-color: rgba(205,213,211,.16) !important;
    background: linear-gradient(145deg, rgba(255,255,255,.052), rgba(255,255,255,.026)) !important;
    color: rgba(244,241,235,.68) !important;
    box-shadow: none !important;
}

html body[data-cms-protected] nav.module-nav > a:hover,
html body[data-cms-protected] nav.module-nav > a:focus-visible {
    border-color: rgba(200,165,106,.30) !important;
    background: rgba(255,255,255,.075) !important;
    color: #f4f1eb !important;
}

html body[data-cms-protected] nav.module-nav > a.active {
    color: #211f1c !important;
    background: #e9e3d8 !important;
    border-color: rgba(255,255,255,.18) !important;
    box-shadow: inset 0 -2px 0 rgba(200,165,106,.72), 0 4px 14px rgba(0,0,0,.12) !important;
}

html body[data-cms-protected] .eyebrow,
html body[data-cms-protected] .label,
html body.cms-login-page .eyebrow {
    color: #c8a56a !important;
}

html body[data-cms-protected] .subtitle,
html body[data-cms-protected] .muted,
html body[data-cms-protected] small,
html body.cms-login-page .login-copy,
html body.cms-login-page .login-meta,
html body.cms-login-page small {
    color: rgba(244,241,235,.58) !important;
}

/* Patient setup-card gradient for primary CMS surfaces. */
html body[data-cms-protected] .panel,
html body[data-cms-protected] dialog,
html body[data-cms-protected] .dashboard-panel,
html body[data-cms-protected] .system-hero,
html body.cms-login-page .login-shell {
    border-color: rgba(255,255,255,.11) !important;
    background:
        radial-gradient(900px 520px at 0% 0%, rgba(86,68,146,.105), transparent 47%),
        radial-gradient(850px 520px at 100% 5%, rgba(56,101,108,.055), transparent 46%),
        linear-gradient(90deg,
            rgba(29,27,31,.91) 0%,
            rgba(17,17,19,.96) 52%,
            rgba(20,25,27,.92) 100%
        ) !important;
    box-shadow: 0 28px 80px rgba(0,0,0,.24) !important;
    backdrop-filter: blur(24px) !important;
    -webkit-backdrop-filter: blur(24px) !important;
}

/* Patient field-card gradient for secondary/nested cards. */
html body[data-cms-protected] .card,
html body[data-cms-protected] .metric-card {
    border-color: rgba(205,213,211,.16) !important;
    background: linear-gradient(145deg, rgba(255,255,255,.052), rgba(255,255,255,.026)) !important;
    box-shadow: inset 0 1px 0 rgba(255,255,255,.045), 0 16px 45px rgba(0,0,0,.12) !important;
    backdrop-filter: blur(18px) !important;
    -webkit-backdrop-filter: blur(18px) !important;
}

html body[data-cms-protected] dialog::backdrop {
    background: rgba(24,23,22,.78) !important;
    backdrop-filter: blur(10px) !important;
    -webkit-backdrop-filter: blur(10px) !important;
}

html body[data-cms-protected] input,
html body[data-cms-protected] select,
html body[data-cms-protected] textarea,
html body.cms-login-page input,
html body.cms-login-page select,
html body.cms-login-page textarea {
    color: #f4f1eb !important;
    border-color: rgba(255,255,255,.11) !important;
    background: rgba(15,15,15,.34) !important;
    box-shadow: inset 0 1px 0 rgba(255,255,255,.025) !important;
}

html body[data-cms-protected] input:focus,
html body[data-cms-protected] select:focus,
html body[data-cms-protected] textarea:focus,
html body.cms-login-page input:focus,
html body.cms-login-page select:focus,
html body.cms-login-page textarea:focus {
    border-color: rgba(200,165,106,.58) !important;
    box-shadow: 0 0 0 3px rgba(200,165,106,.08) !important;
    outline: none !important;
}

html body[data-cms-protected] input[readonly],
html body[data-cms-protected] textarea[readonly] {
    color: rgba(244,241,235,.64) !important;
    background: rgba(255,255,255,.04) !important;
}

html body[data-cms-protected] .button,
html body[data-cms-protected] .cms-logout,
html body[data-cms-protected] .icon-button {
    border-color: rgba(255,255,255,.10) !important;
    background: rgba(255,255,255,.055) !important;
    color: #f4f1eb !important;
}

html body[data-cms-protected] .button:hover,
html body[data-cms-protected] .cms-logout:hover,
html body[data-cms-protected] .icon-button:hover {
    border-color: rgba(255,255,255,.17) !important;
    background: rgba(255,255,255,.085) !important;
}

/* Patient primary-button: ivory surface with dark copy. */
html body[data-cms-protected] .button.primary,
html body[data-cms-protected] button.primary,
html body.cms-login-page #loginSubmit {
    color: #201e1b !important;
    border-color: #f4f1eb !important;
    background: #f4f1eb !important;
    box-shadow: 0 14px 35px rgba(0,0,0,.18) !important;
}

html body[data-cms-protected] .button.primary:hover,
html body[data-cms-protected] button.primary:hover,
html body.cms-login-page #loginSubmit:hover {
    transform: translateY(-1px);
    filter: none !important;
}

/* Semantic danger remains red, as on the patient emergency/error surfaces. */
html body[data-cms-protected] .button.danger,
html body[data-cms-protected] button.danger {
    color: #ffc2c0 !important;
    border-color: rgba(232,131,131,.30) !important;
    background: rgba(232,131,131,.11) !important;
    box-shadow: none !important;
}

html body[data-cms-protected] .button.danger:hover,
html body[data-cms-protected] button.danger:hover {
    border-color: rgba(232,131,131,.42) !important;
    background: rgba(232,131,131,.16) !important;
    filter: none !important;
}

html body[data-cms-protected] .security-tab,
html body[data-cms-protected] .queue-filter,
html body[data-cms-protected] .filter-chip,
html body[data-cms-protected] .catalog-type-tabs button {
    color: rgba(244,241,235,.68) !important;
    border-color: rgba(205,213,211,.16) !important;
    background: linear-gradient(145deg, rgba(255,255,255,.052), rgba(255,255,255,.026)) !important;
    box-shadow: none !important;
}

html body[data-cms-protected] .security-tab:hover,
html body[data-cms-protected] .queue-filter:hover,
html body[data-cms-protected] .filter-chip:hover,
html body[data-cms-protected] .catalog-type-tabs button:hover {
    color: #f4f1eb !important;
    border-color: rgba(200,165,106,.30) !important;
    background: rgba(255,255,255,.075) !important;
}

html body[data-cms-protected] .security-tab.active,
html body[data-cms-protected] .queue-filter.active,
html body[data-cms-protected] .filter-chip.active,
html body[data-cms-protected] .catalog-type-tabs button.active,
html body[data-cms-protected] [role="tab"][aria-selected="true"] {
    color: #211f1c !important;
    border-color: rgba(255,255,255,.18) !important;
    background: #e9e3d8 !important;
    box-shadow: inset 0 -2px 0 rgba(200,165,106,.72), 0 4px 14px rgba(0,0,0,.12) !important;
}

html body[data-cms-protected] .cms-session-user {
    color: rgba(244,241,235,.68) !important;
}

html body[data-cms-protected] .notice:not(.error),
html body[data-cms-protected] .status-item,
html body[data-cms-protected] .production-check,
html body[data-cms-protected] .account-readonly,
html body[data-cms-protected] .doctor-list-item,
html body[data-cms-protected] .operation-row,
html body[data-cms-protected] .protocol-row,
html body[data-cms-protected] .event-item,
html body[data-cms-protected] .doctor-clinic-row {
    border-color: rgba(205,213,211,.16) !important;
    background: linear-gradient(145deg, rgba(255,255,255,.052), rgba(255,255,255,.026)) !important;
    box-shadow: inset 0 1px 0 rgba(255,255,255,.035) !important;
}

html body.cms-login-page .login-mark {
    color: #e8d4ae !important;
    border-color: rgba(200,165,106,.22) !important;
    background: rgba(200,165,106,.10) !important;
    box-shadow: 0 10px 26px rgba(0,0,0,.18) !important;
}

html body[data-cms-protected] :focus-visible,
html body.cms-login-page :focus-visible {
    outline: 2px solid rgba(200,165,106,.78) !important;
    outline-offset: 3px !important;
}

html body[data-cms-protected] ::selection,
html body.cms-login-page ::selection {
    color: #201e1b;
    background: rgba(200,165,106,.62);
}

@media (prefers-reduced-motion: reduce) {
    html body[data-cms-protected] *,
    html body[data-cms-protected] *::before,
    html body[data-cms-protected] *::after,
    html body.cms-login-page *,
    html body.cms-login-page *::before,
    html body.cms-login-page *::after {
        animation-duration: .01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: .01ms !important;
    }
}