/* Reference-mockup layout, with the live portal's existing colour tokens.
   Presentation only: never override .hidden or role-based visibility. */
:root { --uf-rail-width: 256px; --uf-workspace-gap: clamp(16px, 2.2vw, 36px); }
body.uf-redesign { background-image: none; }
.uf-redesign :is(.uf-card, .saas-card, .uf-stat, .uf-conv, .uf-panel) {
    border-radius: 18px;
    box-shadow: var(--uf-shadow-sm);
    backdrop-filter: none;
}
.uf-redesign :is(.glass-panel, .uf-app-header, #sidebar-drawer-overlay) { backdrop-filter: none; }
.uf-redesign :is(.uf-main, .uf-main .grid, .uf-main .flex) > * { min-width: 0; }
.uf-redesign .uf-main { max-width: none; width: auto; padding: var(--uf-workspace-gap); }
.uf-redesign .uf-main > [id$="-view"] { max-width: 1600px; margin-inline: auto; }
.uf-redesign .uf-main :is(.uf-card, .saas-card) { border-radius: 18px; }
.uf-redesign .uf-main h2 { font-size: clamp(22px, 2vw, 30px); font-weight: 800; }
.uf-redesign .uf-main h3 { line-height: 1.35; }
.uf-redesign .uf-main :is(input:not([type="checkbox"]):not([type="radio"]), select, textarea) {
    max-width: 100%; min-height: 40px; border-radius: 9px;
}
.uf-redesign .uf-main :is(input[type="checkbox"], input[type="radio"]) { flex-shrink: 0; }
.uf-redesign :is(button, a) { touch-action: manipulation; }
.uf-redesign .uf-main :is(button, .uf-chip) { max-width: 100%; }
.uf-redesign .uf-main button { white-space: normal; }
.uf-redesign .uf-main :is(.overflow-x-auto, .uf-table-wrap) { max-width: 100%; overscroll-behavior-x: contain; }
.uf-redesign .uf-main table { width: 100%; min-width: 760px; }
.uf-redesign .uf-main :is(th, td) { padding: 13px 16px; line-height: 1.5; }
.uf-redesign .uf-main th { font-size: 10px; font-weight: 700; white-space: nowrap; }
.uf-redesign .uf-main td { font-size: 12px; }
.uf-redesign .uf-main tbody tr:hover { background: var(--uf-surface-2) !important; }
.uf-redesign .uf-main :is(.uf-card, .saas-card) > .overflow-x-auto { border-radius: 12px; }
/* Page introductions are not cards. Outrank the legacy direct-child card rule
   without removing surfaces from tables, filters, forms or header actions. */
body.uf-redesign main.uf-main > [id$="-view"] > :first-child:has(h2),
body.uf-redesign #admin-settings-container > :first-child:has(h2) {
    background: transparent !important; border: 0 !important; padding: 0 0 8px;
    box-shadow: none !important; border-radius: 0;
}
.uf-redesign .uf-stat { padding: 20px; min-height: 150px; border-top-width: 1px; }
.uf-redesign .uf-stat-value { font-size: 30px; line-height: 1.3; }
.uf-redesign .uf-stat-label { font-size: 11px; text-transform: none; letter-spacing: 0; }
.uf-redesign .uf-stat-foot { font-size: 11px; line-height: 1.5; }
.uf-redesign #welcome-view { text-align: left; margin-block: 0; }
.uf-redesign #welcome-view > :first-child > :is(div, p) { margin-inline: 0; }
.uf-redesign #welcome-view > :first-child > div:has(img) { display: none; }
.uf-redesign #welcome-cards-container { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 20px; }
.uf-redesign #welcome-cards-container > button { width: 100%; min-height: 320px; padding: 24px; }
.uf-redesign #dashboard-view > div:nth-child(2) > .grid { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 16px; }
.uf-redesign :is(.uf-stat, .saas-card-interactive):hover { transform: none; box-shadow: var(--uf-shadow-sm); }
.uf-redesign .uf-app-header { min-height: 72px; padding-inline: var(--uf-workspace-gap); box-shadow: none !important; }
.uf-breadcrumb { display: flex; gap: 12px; align-items: center; color: var(--uf-text-muted); font-size: 12px; white-space: nowrap; }
.uf-breadcrumb strong { color: var(--uf-text); overflow: hidden; text-overflow: ellipsis; max-width: 230px; }
.uf-redesign #sidebar-drawer { width: var(--uf-rail-width); box-shadow: none; }
.uf-redesign #sidebar-drawer > :first-child { min-height: 88px; padding: 20px; }
.uf-redesign #sidebar-drawer > :nth-child(2) { padding: 16px 12px; }
.uf-redesign #sidebar-drawer .uf-nav-item { min-height: 42px; padding: 10px 14px; font-size: 12px; border-radius: 9px; }
.uf-redesign #sidebar-drawer .uf-nav-group-label { padding-inline: 14px; margin-block: 20px 8px; letter-spacing: .13em; font-size: 9px; }
.uf-redesign #sidebar-drawer .uf-nav-group-label:first-child { margin-top: 0; }
.uf-redesign #sidebar-drawer .uf-nav-item[aria-current="page"] {
    background: var(--uf-accent) !important; color: var(--uf-text) !important;
    box-shadow: none; font-weight: 800;
}
.uf-redesign #sidebar-drawer .uf-nav-item[aria-current="page"] :is(i, svg) { color: inherit; }
.uf-redesign #sidebar-drawer > :last-child { padding: 16px; }
.uf-redesign .uf-login-brand { padding: clamp(32px, 5vw, 88px); background: var(--uf-surface-2); color: var(--uf-text); }
.uf-redesign .uf-login-brand::after { display: none; }
.uf-redesign .uf-login-brand p { color: var(--uf-text-muted); }
.uf-redesign .uf-login-brand h1 { font-size: clamp(32px, 3.2vw, 54px); }
.uf-redesign .uf-login-form-side { background: var(--uf-surface); }
.uf-redesign .uf-login-form-inner { max-width: 480px; border: 0; box-shadow: none; background: transparent; }
.uf-redesign .uf-login-form-inner h2 { font-size: 32px; }
.uf-redesign .uf-trust-item { color: var(--uf-text-muted); }
.uf-redesign .uf-trust-dot { color: var(--uf-accent); background: var(--uf-surface); border-color: var(--uf-edge); }
.uf-outcome-notice { position: fixed; bottom: 24px; right: 24px; z-index: 10700; max-width: min(420px, calc(100vw - 32px)); padding: 16px 20px; background: var(--uf-surface); color: var(--uf-text); border: 1px solid var(--uf-edge); border-inline-start: 4px solid var(--uf-success); border-radius: 12px; box-shadow: var(--uf-shadow-md); font-size: 13px; }
/* Drop decorative motion. Keep loading spinners and operational alerts intact. */
.uf-redesign :is(.animate-bounce, .animate-pulse) { animation: none; }
.uf-redesign :is(.btn-glow-primary, .btn-glow-orange, .btn-glow-purple, .btn-glow-amber) { box-shadow: none; }
.uf-redesign :is(div, p, span, header, footer) { transition-property: none; }
.uf-redesign .uf-main > [id$="-view"] { animation: none; }
.uf-redesign #sidebar-drawer { transition: transform .18s ease; }
body:not(.uf-workspace) #sidebar-drawer { visibility: hidden; }
/* The 480px image-export canvas must not widen the viewport on small phones. */
.uf-redesign .no-print:has(> #screenshot-card) { position: fixed !important; left: -10000px !important; }
.uf-redesign #uf-calculator-grid > div { grid-column: auto; }
.uf-redesign #uf-calculator-grid > div:first-child { display: contents; }
.uf-redesign #uf-calculator-grid > div:first-child > div { margin-top: 0; }
.uf-redesign #uf-calculator-grid { gap: 20px; }
.uf-redesign #uf-calculator-grid :is(.flex:has(> #input-program-months), .flex:has(> #input-fee-rate)) { flex-wrap: wrap; }
.uf-redesign #uf-calculator-grid div:has(> label):has(#input-program-months),
.uf-redesign #uf-calculator-grid div:has(> label):has(#input-fee-rate) { flex-direction: column; align-items: flex-start; gap: 8px; }
.uf-redesign #uf-calculator-grid :is(#input-program-months, #input-fee-rate) { min-width: 64px; flex-shrink: 0; }
.uf-redesign .uf-main canvas { max-width: 100%; }
@media (min-width: 1200px) {
    .uf-redesign #dashboard-view > div:nth-child(2) > .grid { grid-template-columns: repeat(12, minmax(0, 1fr)); }
    .uf-redesign #dashboard-view > div:nth-child(2) > .grid > button { grid-column: span 3; }
    .uf-redesign #dashboard-view > div:nth-child(2) > .grid > button:is(:nth-child(3), :nth-child(4), :nth-child(7)) { order: 2; grid-column: span 4; min-height: 118px; }
    body.uf-workspace .uf-main, body.uf-workspace .uf-app-header { margin-left: var(--uf-rail-width); }
    body.uf-workspace #sidebar-drawer { transform: none !important; z-index: 41; }
    body.uf-workspace :is(#sidebar-drawer-overlay, #btn-sidebar-menu, .uf-drawer-close) { display: none !important; }
    body.uf-workspace .uf-app-header > div > div:first-child > div:first-child { display: none; }
    body.uf-workspace :is(#btn-nav-script, #btn-nav-chatbot, #btn-nav-portal) { display: none; }
    .uf-redesign #calculator-view > .grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
@media (max-width: 1199px) {
    .uf-redesign #welcome-cards-container { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .uf-breadcrumb { display: none; }
    .uf-redesign #dashboard-view > div:nth-child(2) > .grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
    .uf-redesign #calculator-view > .grid { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 767px) {
    .uf-redesign #welcome-cards-container { grid-template-columns: minmax(0, 1fr); }
    .uf-redesign .uf-main :is(.grid-cols-3, .grid-cols-4) { grid-template-columns: minmax(0, 1fr); }
    .uf-redesign #dashboard-view > div:nth-child(2) > .grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
    .uf-redesign .uf-stat { min-height: 130px; padding: 14px; }
    .uf-redesign .uf-stat-head { gap: 6px; }
    .uf-redesign .uf-app-header { padding-inline: 12px; min-height: 64px; }
    .uf-redesign .uf-header-actions { min-width: 0; }
    .uf-redesign .uf-main :is(th, td) { padding: 12px; }
    .uf-redesign .uf-main > [id$="-view"] > :first-child:has(h2) .flex { flex-wrap: wrap; }
    .uf-redesign .uf-main .uf-chip { flex-wrap: wrap; }
    .uf-redesign .uf-main .uf-chip select { min-width: 0; }
}
@media print {
    body.uf-workspace .uf-main { margin-left: 0; padding: 0; }
    #sidebar-drawer, .uf-outcome-notice { display: none !important; }
}