/* Racio studio: red introduction, quiet navigation and airy working surfaces.
   Shared by the application, authentication and error pages. */
.rf-studio-page,
.rf-shell-page {
    --radius: 10px;
    --radius-lg: 16px;
    --radius-xl: 22px;
    --studio-hero: var(--racio-red-dark);
    --studio-hero-end: var(--racio-red);
    --studio-on-hero: var(--racio-white);
    --studio-on-hero-muted: var(--racio-white);
    --studio-link: var(--racio-red-dark);
    --interface-panel-shadow: 0 4px 20px rgb(25 25 28 / 4%);
    --interface-line: #e9e9ec;
    --border-color: var(--interface-line);
    --background: #f5f5f7;
    --interface-gutter: clamp(1rem, 2.6vw, 2.75rem);
}
:root[data-theme="dark"] .rf-studio-page,
:root[data-theme="dark"] .rf-shell-page {
    --background: #111214;
    --interface-line: #303137;
    --studio-hero: #860204;
    --studio-hero-end: #b90204;
    --studio-link: #ff7b7d;
    --interface-panel-shadow: 0 4px 20px rgb(0 0 0 / 12%);
}
.rf-shell-page .rf-app,
:root[data-theme="dark"] .rf-shell-page .rf-app { background: var(--background); }

/* Black, red, gray and white studio navigation in either application theme. */
:root .rf-shell-page .rf-sidebar {
    --surface: #121315;
    --surface-secondary: #202225;
    --surface-hover: #2a2c30;
    --text-primary: #f5f5f7;
    --text-secondary: #c6c8ce;
    --text-muted: #a4a7af;
    --interface-line: #34363b;
    --sidebar-background-bright: var(--surface);
    --nav-black: var(--surface);
    --nav-panel: var(--surface);
    --nav-raised: var(--surface-secondary);
    --nav-line: var(--interface-line);
    --nav-muted: var(--text-muted);
    --nav-white: var(--text-primary);
    border-color: var(--interface-line);
    border-radius: 20px;
    box-shadow: var(--interface-panel-shadow);
}
.rf-shell-page .rf-sidebar-head::before { display: none; }
:root .rf-shell-page .rf-sidebar .rf-sidebar-head { min-height: 86px; padding-top: 0; }
:root .rf-shell-page .rf-sidebar .rf-sidebar-logo-tile { background: var(--racio-white); border-radius: 10px; }
:root .rf-shell-page .rf-sidebar .rf-brand-name { color: var(--text-primary); }
:root .rf-shell-page .rf-sidebar .rf-brand-sub { font-size: .6rem; }
:root .rf-shell-page .rf-sidebar .rf-sidebar-collapse { color: var(--text-muted); background: var(--surface-secondary); }
:root .rf-shell-page .rf-sidebar .rf-sidebar-collapse:hover { color: var(--racio-white); background: var(--racio-red); }
:root .rf-shell-page .rf-sidebar .rf-nav-section { font-size: .65rem; letter-spacing: .1em; }
.rf-shell-page .rf-nav-section-number { display: none; }
:root .rf-shell-page .rf-sidebar .rf-nav-item { color: var(--text-secondary); border-radius: 10px; }
:root .rf-shell-page .rf-sidebar .rf-nav-item:hover { color: var(--text-primary); background: var(--surface-hover); }
:root .rf-shell-page .rf-sidebar .rf-nav-item.is-active {
    color: var(--racio-white); background: var(--racio-red); border-color: var(--racio-red);
    box-shadow: 0 4px 12px rgb(185 2 4 / 15%);
}
:root .rf-shell-page .rf-sidebar .rf-nav-item.is-active .rf-nav-label,
:root .rf-shell-page .rf-sidebar .rf-nav-item.is-active .rf-icon { color: var(--racio-white); }
:root .rf-shell-page .rf-sidebar .rf-nav-item.is-active .rf-icon { background: transparent; }
:root .rf-shell-page .rf-sidebar .rf-nav-item:hover:not(.is-active) .rf-icon { color: var(--text-primary); }
:root .rf-shell-page .rf-sidebar .rf-nav-badge { color: var(--racio-white); }
:root .rf-shell-page .rf-sidebar .rf-nav-item.is-active .rf-nav-badge { color: var(--racio-red-dark); background: var(--racio-white); }
:root .rf-shell-page .rf-sidebar .rf-sidebar-utilities > a { color: var(--text-secondary); }
:root .rf-shell-page .rf-sidebar .rf-sidebar-utilities > a:hover { color: var(--text-primary); }
:root .rf-shell-page .rf-sidebar .rf-sidebar-account { background: var(--surface-secondary); border-color: transparent; }
:root .rf-shell-page .rf-sidebar .rf-avatar { color: var(--text-primary); }
:root .rf-shell-page .rf-sidebar .rf-sidebar-signout:hover { color: var(--racio-white); }
:root .rf-shell-page .rf-sidebar :is(a, button):focus-visible { outline-color: var(--racio-red); }
:root .rf-shell-page .rf-sidebar .rf-nav-item.is-active:focus-visible { outline-color: var(--text-primary); }
:root .rf-shell-page .rf-sidebar .rf-sidebar-search input:focus { border-color: var(--racio-red); box-shadow: 0 0 0 3px var(--interface-ring); }

.rf-shell-page .rf-topbar { background: var(--surface); box-shadow: none; backdrop-filter: none; }
.rf-shell-page .rf-topbar-title { font-weight: 600; }
.rf-shell-page .rf-topbar-title::before { display: none; }
.rf-shell-page .rf-search input { border-color: transparent; background: var(--surface-secondary); }
.rf-shell-page .rf-search input:focus { border-color: var(--primary); }
.rf-shell-page .rf-content { padding-top: 1.75rem; }
.rf-shell-page .rf-page-head { padding-left: 0; }
.rf-shell-page .rf-page-head > div:first-child::before { display: none; }
.rf-shell-page .rf-page-title { font-weight: 650; letter-spacing: -.035em; }
.rf-shell-page .rf-card,
.rf-shell-page .rf-stat { border-radius: 16px; box-shadow: var(--interface-panel-shadow); }
.rf-shell-page .rf-card-head { background: var(--surface); padding: 1.1rem 1.35rem; }
.rf-shell-page .rf-card-body { padding: 1.25rem 1.35rem; }
.rf-shell-page .rf-card-body.is-flush { padding: 0; }
.rf-shell-page .rf-card-head h2 { font-size: .95rem; font-weight: 650; }
.rf-shell-page .rf-card-head p { font-size: .78rem; }
.rf-shell-page .rf-section-heading { margin: 1.5rem 0 .85rem; font-size: .72rem; }
.rf-shell-page .rf-section-heading::before { display: none; }
.rf-shell-page .rf-section-heading::after { opacity: .5; }
.rf-shell-page .rf-table thead th { background: var(--surface-secondary); font-size: .68rem; letter-spacing: .05em; }
.rf-shell-page .rf-table tbody td { padding-top: 1rem; padding-bottom: 1rem; }
.rf-shell-page .rf-btn { border-radius: 9px; }
.rf-shell-page .rf-btn-primary { box-shadow: none; }
.rf-shell-page .rf-quick { background: var(--surface); border-color: var(--interface-line); border-radius: 12px; padding: 1rem; }
.rf-shell-page .rf-quick:hover { border-color: var(--primary); background: var(--surface-secondary); transform: none; }
.rf-shell-page .rf-quick-icon { background: var(--surface-secondary); color: var(--text-secondary); border-radius: 10px; box-shadow: none; }
.rf-shell-page .rf-quick-title { font-weight: 600; }

/* Signature: a red welcome canvas and a white profile strip, like the reference. */
.rf-shell-page .rf-studio-hero {
    min-height: 225px; margin: 0; padding: 2rem 2.25rem 3rem;
    border: 0; border-radius: 22px; color: var(--studio-on-hero);
    background: linear-gradient(115deg, var(--studio-hero), var(--studio-hero-end));
    box-shadow: none; gap: 1.5rem;
}
.rf-shell-page .rf-studio-hero::before,
.rf-shell-page .rf-studio-hero::after { display: none; }
.rf-studio-welcome { flex: 1; min-width: 0; }
.rf-shell-page .rf-studio-hero .rf-hero-greeting { color: var(--studio-on-hero-muted); font-size: .65rem; letter-spacing: .14em; }
.rf-studio-hero .rf-hero-greeting span { margin: 0 .6rem; }
.rf-shell-page .rf-studio-hero h1 { margin: .8rem 0 .6rem; font-size: clamp(1.5rem, 2.5vw, 2.3rem); line-height: 1.2; font-weight: 600; letter-spacing: -.04em; color: var(--studio-on-hero); }
.rf-studio-intro { margin: 0; color: var(--studio-on-hero-muted); font-size: .84rem; line-height: 1.6; }
.rf-studio-date { display: flex; align-items: center; gap: .55rem; margin-top: 1.35rem; font-size: .75rem; color: var(--studio-on-hero); }
.rf-shell-page .rf-studio-hero .rf-hero-clock { min-width: 210px; padding: 1.2rem 1.5rem; border: 1px solid rgb(255 255 255 / 18%); border-radius: 14px; background: rgb(0 0 0 / 10%); box-shadow: none; }
.rf-shell-page .rf-studio-hero .rf-hero-clock-head,
.rf-shell-page .rf-studio-hero .rf-hero-clock-head .rf-icon,
.rf-shell-page .rf-studio-hero .rf-hero-tz { color: var(--studio-on-hero-muted); font-size: .65rem; }
.rf-shell-page .rf-studio-hero .rf-hero-clock-head .rf-icon { margin-left: 0; }
.rf-shell-page .rf-studio-hero .rf-hero-time { color: var(--studio-on-hero); font-family: var(--font-sans); font-size: 2rem; font-weight: 500; letter-spacing: -.02em; margin: .75rem 0; }
.rf-shell-page .rf-studio-hero .rf-hero-clock-zone { background: rgb(255 255 255 / 12%); color: var(--studio-on-hero); font-size: .6rem; }
.rf-studio-profile { position: relative; display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 1rem; margin: -23px 1.5rem 1.75rem; padding: 1rem 1.25rem; border: 1px solid var(--interface-line); border-radius: 13px; background: var(--surface); box-shadow: 0 8px 25px rgb(25 25 28 / 5%); }
.rf-studio-identity { display: flex; align-items: center; gap: .8rem; min-width: 0; }
.rf-studio-identity > div { min-width: 0; }
.rf-studio-identity strong { display: block; font-size: .9rem; font-weight: 600; }
.rf-studio-identity div > span { display: block; margin-top: .2rem; font-size: .72rem; color: var(--text-muted); }
.rf-studio-profile-actions { display: flex; gap: .6rem; flex-wrap: wrap; }
.rf-shell-page .rf-studio-profile-actions .rf-btn { min-height: 40px; padding-inline: .9rem; }
.rf-studio-overview { margin-bottom: 1.5rem; }
.rf-studio-overview .rf-grid { gap: 1rem; }
.rf-shell-page .rf-studio-overview .rf-stat { position: relative; min-height: 155px; padding: 1.35rem; align-items: flex-start; gap: .8rem; background: var(--surface); border: 1px solid var(--interface-line); }
.rf-shell-page .rf-studio-overview .rf-stat-icon { order: 2; margin-left: auto; width: 36px; height: 36px; border: 0; border-radius: 10px; background: var(--surface-secondary); color: var(--text-secondary); }
.rf-shell-page .rf-studio-overview .rf-stat > div { order: 1; }
.rf-shell-page .rf-studio-overview .rf-stat-label { font-size: .69rem; text-transform: none; letter-spacing: 0; color: var(--text-secondary); }
.rf-shell-page .rf-studio-overview .rf-stat-value { font-size: 2.35rem; font-weight: 500; line-height: 1.2; margin: .6rem 0 .4rem; color: var(--text-primary); }
.rf-shell-page .rf-studio-overview .rf-stat-meta { font-size: .72rem; color: var(--text-muted); }
.rf-shell-page .rf-studio-overview .rf-stat.is-brand .rf-stat-icon { color: var(--primary); background: var(--primary-soft); }
.rf-shell-page .rf-studio-overview .rf-stat.is-danger .rf-stat-meta { color: var(--danger); }

/* Static geometric accents behind the navigation. */
:root .rf-shell-page .rf-sidebar-art { display: block; opacity: 1; }
.rf-shell-page .rf-sidebar-art,
.rf-shell-page .rf-sidebar-art * { animation: none; transition: none; }
.rf-shell-page .rf-sidebar-art-white rect { fill: var(--racio-white); opacity: .06; }
.rf-shell-page .rf-sidebar-art-rectangles rect { fill: none; stroke: var(--text-muted); stroke-width: 1; opacity: .12; }
.rf-shell-page .rf-sidebar-art-red rect { fill: var(--racio-red); opacity: .15; }
:root .rf-shell-page .rf-sidebar .rf-nav-section,
:root .rf-shell-page .rf-sidebar .rf-nav-section:hover { cursor: default; background: transparent; color: var(--text-muted); }
:root .rf-shell-page .rf-sidebar .rf-sidebar-head { background: rgb(18 19 21 / 92%); }
:root .rf-shell-page .rf-sidebar .rf-sidebar-foot { background: rgb(18 19 21 / 94%); }
:root .rf-shell-page .rf-sidebar .rf-nav-item:not(.is-active):hover { background: var(--surface-hover); }
@media (min-width: 901px) {
    :root.rf-sidebar-collapsed .rf-shell-page .rf-sidebar-art { opacity: .5; }
}
@media (forced-colors: active) {
    :root .rf-shell-page .rf-sidebar-art { display: none; }
}

@media (min-width: 901px) {
    :root { --sidebar-gap: 16px; --sidebar-expanded-width: 232px; }
    .rf-shell-page { --topbar-height: 76px; }
}
@media (max-width: 1100px) {
    .rf-shell-page .rf-studio-overview .rf-grid-4 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .rf-shell-page .rf-studio-hero { padding: 1.75rem 1.5rem 2.8rem; }
}
@media (max-width: 900px) {
    .rf-shell-page .rf-main { margin-left: 0; }
    .rf-shell-page .rf-content { padding-top: 1rem; }
    .rf-shell-page .rf-studio-hero { min-height: 0; }
    .rf-shell-page .rf-studio-profile-actions .rf-btn { min-height: 44px; }
}
@media (max-width: 600px) {
    .rf-shell-page .rf-studio-hero { gap: 1.25rem; padding: 1.5rem 1.25rem 2.6rem; border-radius: 16px; }
    .rf-studio-welcome { flex-basis: 100%; }
    .rf-shell-page .rf-studio-hero .rf-hero-clock { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: .65rem; width: 100%; min-width: 0; padding: .8rem 1rem; }
    .rf-shell-page .rf-studio-hero .rf-hero-time { margin: 0; font-size: 1.55rem; }
    .rf-shell-page .rf-studio-hero .rf-hero-tz { width: 100%; }
    .rf-studio-profile { margin: -20px .65rem 1.35rem; padding: 1rem; }
    .rf-studio-profile-actions { width: 100%; }
    .rf-studio-profile-actions .rf-btn { flex: 1; }
    .rf-shell-page .rf-studio-overview .rf-stat { min-height: 150px; padding: 1rem; }
    .rf-shell-page .rf-studio-overview .rf-stat-icon { width: 26px; height: 26px; }
    .rf-shell-page .rf-studio-overview .rf-stat-value { font-size: 2rem; }
    .rf-shell-page .rf-card-head, .rf-shell-page .rf-card-body { padding: 1rem; }
    .rf-shell-page .rf-card-body.is-flush { padding: 0; }
}
@media (max-width: 380px) {
    .rf-shell-page .rf-studio-overview .rf-stat { gap: .25rem; padding: .85rem; }
    .rf-shell-page .rf-studio-overview .rf-stat-icon { display: none; }
}
@media (prefers-reduced-motion: reduce) {
    .rf-shell-page *, .rf-shell-page *::before, .rf-shell-page *::after { animation: none !important; transition: none !important; scroll-behavior: auto !important; }
}
@media print {
    .rf-shell-page .rf-studio-hero { background: none; color: #111; border: 1px solid #ccc; }
    .rf-shell-page .rf-studio-hero :is(h1, p, div, span, time) { color: #111; }
    .rf-studio-profile { margin: 1rem 0; box-shadow: none; }
    .rf-studio-profile-actions { display: none; }
}

/* Standard pages: one compact brand header, followed by working surfaces. */
.rf-shell-page .rf-studio-page-head {
    align-items: center;
    min-height: 0;              /* compact: the banner holds a title, not a hero */
    margin-bottom: 1.25rem;
    padding: 1.1rem 1.5rem;
    border: 0;
    border-radius: 16px;
    background: linear-gradient(115deg, var(--studio-hero), var(--studio-hero-end));
    color: var(--studio-on-hero);
}
.rf-studio-eyebrow { margin-bottom: .7rem; color: var(--studio-on-hero-muted); font-size: .62rem; font-weight: 600; letter-spacing: .12em; text-transform: uppercase; }
.rf-studio-eyebrow > span { margin-inline: .5rem; }
.rf-shell-page .rf-studio-page-head .rf-page-title { max-width: 38ch; color: var(--studio-on-hero); font-size: clamp(1.3rem, 2vw, 1.6rem); line-height: 1.25; }
.rf-shell-page .rf-studio-page-head .rf-page-subtitle { max-width: 68ch; margin-top: .5rem; color: var(--studio-on-hero-muted); font-size: .82rem; line-height: 1.6; }
.rf-studio-page-head .rf-breadcrumb { margin-bottom: .5rem; }
.rf-studio-page-head .rf-breadcrumb,
.rf-studio-page-head .rf-breadcrumb :is(a, span, .rf-icon) { color: var(--studio-on-hero-muted); }
.rf-studio-page-head .rf-breadcrumb a:hover { color: var(--studio-on-hero); text-decoration: underline; }
.rf-shell-page .rf-studio-page-head .rf-page-actions { max-width: 460px; gap: .65rem; }
.rf-shell-page .rf-studio-page-head .rf-btn { min-height: 44px; border: 1px solid rgb(255 255 255 / 40%); background: transparent; color: var(--studio-on-hero); box-shadow: none; }
.rf-shell-page .rf-studio-page-head .rf-btn-primary { background: var(--racio-white); border-color: var(--racio-white); color: var(--racio-red-dark); }
.rf-shell-page .rf-studio-page-head .rf-btn:hover { background: var(--racio-white); color: var(--racio-red-dark); }
.rf-shell-page .rf-studio-page-head :is(a, button):focus-visible { outline: 2px solid var(--studio-on-hero); outline-offset: 4px; }
.rf-studio-page-head .rf-breadcrumb + .rf-page-title { margin-top: .2rem; }

/* Forms, filtering and navigation share the dashboard's restrained geometry. */
.rf-studio-page :is(.rf-input, .rf-select, .rf-textarea) {
    border-radius: 10px;
    border-color: var(--border-strong);
    background-color: var(--surface);
    color: var(--text-primary);
}
.rf-studio-page :is(.rf-input, .rf-select, .rf-textarea):focus { border-color: var(--primary); box-shadow: 0 0 0 3px var(--interface-ring); }
.rf-studio-page .rf-label { font-weight: 600; }
.rf-studio-page :is(.rf-btn, .rf-icon-btn, .rf-ig-action) { border-radius: 10px; }
.rf-studio-page .rf-btn-primary { box-shadow: none; }
.rf-shell-page .rf-filters { padding: 1rem 1.25rem; border-radius: 14px; background: var(--surface); box-shadow: none; }
.rf-shell-page .rf-tabs { gap: .35rem; border-bottom-color: var(--interface-line); }
.rf-shell-page .rf-tab { min-height: 44px; font-size: .8rem; font-weight: 600; }
.rf-shell-page :is(.rf-tab.is-active, .rf-tab[aria-selected="true"]) { color: var(--primary); border-bottom-color: var(--primary); }
.rf-shell-page :is(.rf-modal, .rf-focus-drawer, .rf-widget-panel, .rf-dropdown-panel) { border-color: var(--interface-line); box-shadow: var(--interface-float-shadow); }
.rf-shell-page :is(.rf-modal-head, .rf-modal-foot, .rf-focus-drawer-head, .rf-widget-panel-head) { background: var(--surface); }
.rf-shell-page :is(.rf-input:disabled, .rf-select:disabled, .rf-textarea:disabled) { background: var(--surface-secondary); color: var(--text-muted); }
.rf-shell-page .rf-filedrop { border-radius: 14px; background: var(--surface-secondary); box-shadow: none; }
.rf-shell-page form:not(.rf-form-grid):not(.rf-filters) > .rf-field + .rf-field { margin-top: 1rem; }
.rf-shell-page form:not(.rf-filters) > .rf-field + .rf-btn { margin-top: 1rem; }
.rf-shell-page :is(.rf-empty-icon, .rf-list-icon) { border-radius: 12px; background: var(--surface-secondary); box-shadow: none; }
.rf-shell-page .rf-stat-value { font-weight: 500; font-size: 2rem; }
.rf-shell-page .rf-stat-label { font-size: .72rem; letter-spacing: .025em; }
.rf-shell-page .rf-stat-icon { background: var(--surface-secondary); border: 0; }

/* Module surfaces: keep status meaning while unifying spacing and materials. */
.rf-shell-page :is(.rf-approval-chip, .rf-approval-queue, .rf-print-overview-item, .rf-print-submission, .rf-queue-stat, .rf-job, .rf-attendance-card, .rf-contact-card, .rf-calendar) {
    border-radius: 16px;
    background-color: var(--surface);
    box-shadow: var(--interface-panel-shadow);
}
.rf-shell-page :is(.rf-approval-chip, .rf-queue-stat, .rf-job, .rf-contact-card):hover { transform: none; box-shadow: var(--interface-panel-shadow); }
.rf-shell-page :is(.rf-approval-chip.is-active, .rf-queue-stat.is-active) { border-color: var(--primary); background: var(--primary-soft); box-shadow: none; }
.rf-shell-page :is(.rf-approval-chip-value, .rf-queue-stat .rf-qs-value, .rf-print-overview-item strong, .rf-stock-value) { font-weight: 500; font-size: 1.85rem; letter-spacing: -.035em; }
.rf-shell-page :is(.rf-approval-queue-head, .rf-attendance-card .rf-att-head, .rf-calendar-head) { background: var(--surface); border-bottom-color: var(--interface-line); }
.rf-shell-page :is(.rf-print-message, .rf-print-document, .rf-record-summary > div, .rf-task-assignee-toolbar) { background: var(--surface-secondary); border-color: var(--interface-line); }
.rf-shell-page .rf-settings-tabs { border-color: var(--interface-line); padding: .6rem; gap: .4rem; box-shadow: none; }
.rf-shell-page .rf-settings-tab { border-radius: 9px; min-height: 46px; }
.rf-shell-page .rf-settings-tab.is-active { background: var(--primary); border-color: var(--primary); color: var(--racio-white); box-shadow: none; }
.rf-shell-page .rf-settings-tab.is-active .rf-icon { color: inherit; }
.rf-shell-page .rf-placement-summary { border-top: 3px solid var(--primary); }
.rf-shell-page .rf-report { border-radius: 16px; box-shadow: var(--interface-panel-shadow); }

/* Messages keep their viewport-sized conversation layout and fixed composer. */
.rf-shell-page.rf-chat-page .rf-content { padding: .9rem; }
.rf-shell-page.rf-chat-page .rf-page-head { display: none; }
.rf-shell-page .rf-chat { border-color: var(--interface-line); border-radius: 18px; box-shadow: var(--interface-panel-shadow); }
.rf-shell-page .rf-chat-list { border-right-color: var(--interface-line); }
.rf-shell-page .rf-chat-list-head { padding: 1.15rem; background: linear-gradient(115deg, var(--studio-hero), var(--studio-hero-end)); }
.rf-shell-page .rf-clh-copy h2 { color: var(--studio-on-hero); font-weight: 600; }
.rf-shell-page .rf-clh-copy > span { color: var(--studio-on-hero-muted); }
.rf-shell-page .rf-clh-actions .rf-icon-btn { background: transparent; border-color: rgb(255 255 255 / 35%); color: var(--studio-on-hero); }
.rf-shell-page .rf-clh-actions .rf-icon-btn:hover { background: rgb(255 255 255 / 15%); }
.rf-shell-page .rf-chat-search input { background: var(--surface); border-radius: 10px; }
.rf-shell-page .rf-chat-filters { padding: .7rem; }
.rf-shell-page .rf-chat-filter.is-active { border-color: var(--primary); background: var(--primary); color: var(--racio-white); }
.rf-shell-page .rf-thread.is-active { background: var(--primary-soft); border-color: var(--primary); }
.rf-shell-page .rf-chat-head { background: var(--surface); border-bottom-color: var(--interface-line); }
.rf-shell-page .rf-chat-messages { background: var(--surface-secondary); background-image: none; }
.rf-shell-page .rf-chat-placeholder { background: var(--surface-secondary); background-image: none; }

/* Sign-in and recovery: the same red canvas paired with a white form card. */
html.rf-login-document,
html.rf-login-document body.rf-studio-page.rf-login-page { height: auto; min-height: 100%; overflow: auto; }
.rf-studio-page .rf-login-shell { height: auto; min-height: 100dvh; overflow: visible; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); background: var(--background); padding: 1rem; gap: 1rem; }
.rf-studio-page .rf-login-brand,
.rf-studio-page .rf-auth-brand { height: auto; min-height: 0; padding: clamp(2rem, 4vw, 3.5rem); border-radius: 22px; background: linear-gradient(145deg, var(--studio-hero), var(--studio-hero-end)); color: var(--studio-on-hero); }
.rf-studio-page :is(.rf-login-brand, .rf-auth-brand)::before,
.rf-studio-page :is(.rf-login-brand, .rf-auth-brand)::after,
.rf-studio-page :is(.rf-login-brand-glow, .rf-auth-shape) { display: none; }
.rf-studio-page .rf-login-logo-tile { width: 80px; height: 80px; border-radius: 16px; box-shadow: none; }
.rf-studio-page .rf-login-brand-body { padding-block: 3rem; }
.rf-studio-page .rf-login-brand-body h1 { font-size: clamp(2rem, 3.2vw, 3.2rem); line-height: 1.15; font-weight: 600; }
.rf-studio-page :is(.rf-login-eyebrow, .rf-login-product small, .rf-login-brand-body > p, .rf-login-headline > span:last-child, .rf-login-brand-foot, .rf-login-capabilities small, .rf-auth-brand-copy p, .rf-auth-brand-foot) { color: var(--studio-on-hero-muted); }
.rf-studio-page :is(.rf-login-headline em, .rf-login-capabilities .rf-icon, .rf-auth-brand-copy h1 .u-brand) { color: var(--studio-on-hero); }
.rf-studio-page .rf-login-eyebrow::before { background: var(--studio-on-hero); }
.rf-studio-page .rf-login-headline > span { animation: none; opacity: 1; transform: none; }
.rf-studio-page .rf-login-capabilities > div { border: 1px solid rgb(255 255 255 / 20%); background: rgb(0 0 0 / 8%); border-radius: 12px; }
.rf-studio-page .rf-login-brand-foot { border-top-color: rgb(255 255 255 / 25%); }
:root .rf-studio-page .rf-login-access { height: auto; overflow: visible; padding: 2rem; background: var(--background); }
:root .rf-studio-page .rf-login-card { height: auto; min-height: 0; padding: 2.25rem; border: 1px solid var(--interface-line); border-radius: 20px; background: var(--surface); box-shadow: var(--interface-panel-shadow); }
.rf-studio-page .rf-login-card::before { height: 4px; background: var(--primary); }
:root .rf-studio-page .rf-login-submit,
:root .rf-studio-page .rf-login-submit:hover { box-shadow: none; }
.rf-studio-page .rf-auth { min-height: 100dvh; padding: 1rem; gap: 1rem; background: var(--background); }
.rf-studio-page .rf-auth-panel { background: var(--background); }
.rf-studio-page .rf-auth-form { max-width: 460px; padding: 2rem; border-radius: 20px; box-shadow: var(--interface-panel-shadow); }
.rf-studio-page .rf-auth-title { font-weight: 600; }
.rf-studio-page :is(.rf-login-label-row a, .rf-login-kicker, .rf-auth-alt a, .rf-auth-row a) { color: var(--studio-link); }
.rf-studio-page .rf-auth-brand-logo { align-self: flex-start; }
.rf-studio-page .rf-auth-brand-logo img { max-width: 210px; }
.rf-studio-page :is(.rf-auth-theme, .rf-login-theme) { z-index: 2; }

/* Errors and lock screens remain useful even when the database is offline. */
.rf-studio-page :is(.rf-lock, .rf-errpage) { background: var(--background); background-image: none; }
.rf-studio-page .rf-lock::before,
.rf-studio-page .rf-lock::after,
.rf-studio-page .rf-errcard::before { display: none; }
.rf-studio-page :is(.rf-lock-card, .rf-errcard) { border: 1px solid var(--interface-line); border-top: 5px solid var(--primary); border-radius: 20px; box-shadow: var(--interface-panel-shadow); }
.rf-studio-page .rf-lock-card::before,
.rf-studio-page .rf-errcard::after { display: none; }
.rf-studio-page :is(.rf-lock-time, .rf-errcode) { font-weight: 500; letter-spacing: -.04em; }
.rf-studio-page.rf-database-error { background: var(--background); }
.rf-studio-page.rf-database-error .card { border: 1px solid var(--interface-line); border-top: 5px solid var(--primary); border-radius: 20px; box-shadow: var(--interface-panel-shadow); }
.rf-studio-page.rf-database-error .card::before,
.rf-studio-page.rf-database-error .card::after { display: none; }
.rf-studio-debug { min-height: 100dvh; padding: clamp(1.25rem, 4vw, 3rem); background: var(--background); color: var(--text-primary); }
.rf-studio-debug > h1 { padding: 1.5rem; border-radius: 16px; background: var(--studio-hero); color: var(--studio-on-hero); }
.rf-studio-debug .box { margin-bottom: 1rem; padding: 1.5rem; border: 1px solid var(--interface-line); border-radius: 16px; background: var(--surface); color: var(--text-primary); }
.rf-studio-debug :is(.msg, pre) { color: var(--text-primary); }

@media (max-width: 1100px) {
    .rf-shell-page .rf-studio-page-head { grid-template-columns: minmax(0, 1fr); gap: 1rem; }
    .rf-shell-page .rf-studio-page-head .rf-page-actions { max-width: none; justify-content: flex-start; }
}
@media (max-width: 900px) {
    .rf-shell-page .rf-studio-page-head { padding: 1rem 1.1rem; min-height: 0; border-radius: 14px; }
    .rf-shell-page.rf-chat-page .rf-content { padding: 0 0 calc(var(--mobile-nav-height) + 1.5rem + env(safe-area-inset-bottom)); }
    .rf-shell-page .rf-chat { border-radius: 14px; }
}
@media (max-width: 860px) {
    .rf-studio-page .rf-login-shell { display: block; padding: 0; }
    :root .rf-studio-page .rf-login-access { min-height: 100dvh; padding: 2rem 1rem; }
    .rf-studio-page .rf-login-mobile-brand { display: flex; }
    .rf-studio-page .rf-auth { display: block; padding: 0; }
    .rf-studio-page .rf-auth-brand { display: none; }
    .rf-studio-page .rf-auth-panel { min-height: 100dvh; padding: 3.5rem 1rem 2rem; }
    .rf-studio-page .rf-auth-mobile-logo { display: block; }
}
@media (max-width: 600px) {
    .rf-shell-page .rf-studio-page-head { gap: 1rem; padding: 1.25rem; }
    .rf-shell-page .rf-studio-page-head .rf-page-actions { display: flex; flex-wrap: wrap; }
    .rf-shell-page .rf-studio-page-head .rf-page-actions .rf-btn { width: auto; flex: 1 1 135px; }
    .rf-shell-page.rf-chat-page .rf-content { padding: 0 0 calc(var(--mobile-nav-height) + 1.5rem + env(safe-area-inset-bottom)); }
    .rf-shell-page .rf-filters { padding: 1rem; }
    .rf-shell-page .rf-report { padding: 1.25rem; }
    :root .rf-studio-page .rf-login-card { padding: 1.5rem 1.15rem; }
    .rf-studio-page .rf-login-mobile-brand { margin-bottom: 1.25rem; }
    .rf-studio-page .rf-login-mobile-brand .rf-login-logo-tile { width: 64px; height: 64px; }
    .rf-studio-page .rf-auth-form { padding: 1.5rem 1.15rem; }
    .rf-studio-page :is(.rf-input, .rf-select, .rf-textarea) { font-size: 16px; }
    .rf-studio-page .rf-ig-action { min-width: 44px; min-height: 44px; }
}
/* Text must determine a component's height, including long names and labels. */
.rf-studio-page :is(.rf-card, .rf-stat, .rf-alert, .rf-modal, .rf-studio-profile, .rf-page-head, .rf-bubble, .rf-print-document, .rf-record-summary) {
    overflow-wrap: anywhere;
}
.rf-studio-page :is(.rf-stat, .rf-studio-identity, .rf-approval-chip, .rf-print-overview-item, .rf-queue-stat) > div,
.rf-studio-page :is(.rf-studio-profile-actions, .rf-approval-item, .rf-approval-item-actions, .rf-task-assignee-actions) {
    min-width: 0;
    max-width: 100%;
}
.rf-studio-page :is(.rf-badge, .rf-chip, .rf-settings-tab, .rf-tab, .rf-task-assignee-count) {
    height: auto;
    white-space: normal;
    overflow-wrap: anywhere;
    line-height: 1.4;
}
.rf-studio-page :is(.rf-btn, .rf-settings-tab, .rf-tab) { text-align: center; }
.rf-studio-page :is(.rf-btn, .rf-badge, .rf-chip, .rf-tab, .rf-settings-tab) > .rf-icon { flex-shrink: 0; }
.rf-studio-page :is(.rf-btn, .rf-settings-tab, .rf-tab) > span { min-width: 0; white-space: normal; }
.rf-studio-page :is(.rf-tab-count, .rf-nav-badge) { height: auto; min-height: 18px; flex-shrink: 0; }
.rf-shell-page .rf-settings-tabs { grid-template-columns: repeat(auto-fit, minmax(min(100%, 9rem), 1fr)); }
.rf-shell-page .rf-settings-tab { padding: .7rem .8rem; }
.rf-studio-page :is(.rf-tabs, .rf-pagination-pages, .rf-filters-actions, .rf-approval-item-actions, .rf-task-assignee-toolbar, .rf-task-assignee-actions) { flex-wrap: wrap; }
.rf-studio-page .rf-task-assignee-toolbar > div:first-child { flex-wrap: wrap; }
.rf-studio-page :is(.rf-filters-actions, .rf-task-assignee-actions) { gap: .5rem; }
.rf-studio-page .rf-dropdown-panel { max-width: calc(100vw - 1rem); }
.rf-studio-page :is(.rf-dropdown-item, .rf-search-item) { text-align: left; }
.rf-studio-page :is(.rf-stat-value, .rf-approval-chip-value, .rf-qs-value, .rf-stock-value) { font-variant-numeric: tabular-nums; overflow-wrap: anywhere; }
.rf-studio-page :is(.rf-stat, .rf-stat-icon):hover,
.rf-studio-page .rf-stat:hover .rf-stat-icon { transform: none; }
.rf-studio-page .rf-stat:hover { box-shadow: var(--interface-panel-shadow); }
.rf-studio-page .rf-bubble { min-width: 0; }
.rf-studio-page .rf-bubble pre { max-width: 100%; white-space: pre-wrap; overflow-wrap: anywhere; }
@media screen {
    /* Dense tables scroll inside their card instead of crushing each word. */
    .rf-studio-page .rf-table-wrap .rf-table:not(.is-stacked):has(tr > :nth-child(4)) { min-width: 38rem; }
}
@media (max-width: 768px) {
    /* Notification menus have an inline desktop minimum width. */
    .rf-studio-page .rf-dropdown-panel { min-width: 0 !important; }
    .rf-studio-page .rf-table.is-stacked tbody td { flex-wrap: wrap; white-space: normal; }
    .rf-studio-page .rf-table.is-stacked tbody td::before { max-width: 45%; white-space: normal; overflow-wrap: anywhere; }
    .rf-studio-page .rf-approval-item { grid-template-columns: auto minmax(0, 1fr); }
    .rf-studio-page .rf-approval-item-actions { grid-column: 2; justify-content: flex-end; }
}
@media (max-width: 480px) {
    /* Two compact stats per row keep the day's summary on one screen. */
    .rf-shell-page .rf-studio-overview .rf-grid-4 { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .6rem; }
    .rf-shell-page .rf-studio-overview .rf-stat { min-height: 0; padding: .85rem; }
    .rf-shell-page .rf-studio-overview .rf-stat-icon { display: none; }
    .rf-shell-page .rf-studio-overview .rf-stat-value { font-size: 1.5rem; }
}
@media (prefers-reduced-motion: reduce) {
    .rf-studio-page *, .rf-studio-page *::before, .rf-studio-page *::after { animation: none !important; transition: none !important; scroll-behavior: auto !important; }
}
@media print {
    .rf-shell-page .rf-studio-page-head { min-height: 0; padding: 0 0 1rem; border: 0; border-bottom: 1px solid #ccc; border-radius: 0; background: none; }
    .rf-shell-page .rf-studio-page-head :is(.rf-page-title, .rf-page-subtitle) { color: #111; }
    .rf-studio-page-head :is(.rf-studio-eyebrow, .rf-breadcrumb, .rf-page-actions) { display: none !important; }
    .rf-shell-page .rf-report { padding: 0; border: 0; border-radius: 0; box-shadow: none; }
    .rf-shell-page :is(.rf-card, .rf-stat, .rf-approval-chip, .rf-approval-queue, .rf-print-submission, .rf-attendance-card) { box-shadow: none; }
}

/* Sidebar backdrop: the same brand objects as the sign-in page — a red glow,
   an outlined frame (its edge is the diagonal line), a translucent red tile
   and a soft grey circle — kept faint so every label stays easy to read. */
:root .rf-shell-page .rf-sidebar {
    background:
        radial-gradient(circle at 92% 4%, rgba(229, 3, 5, .24), transparent 46%),
        linear-gradient(160deg, #080808 0%, #151515 58%, #0d0d0d 100%);
}
:root .rf-shell-page .rf-sidebar > :not(.rf-sidebar-art) { position: relative; z-index: 1; }
:root .rf-shell-page .rf-sidebar .rf-sidebar-head,
:root .rf-shell-page .rf-sidebar .rf-sidebar-foot { background: transparent; }
.rf-shell-page .rf-sidebar-art > span { position: absolute; display: block; }
.rf-shell-page .rf-sidebar-art-circle {
    width: 320px;
    height: 320px;
    left: -170px;
    bottom: -120px;
    border-radius: 50%;
    background: rgba(90, 84, 86, .16);
    filter: blur(2px);
}
.rf-shell-page .rf-sidebar-art-frame {
    width: 230px;
    height: 520px;
    right: -160px;
    bottom: -150px;
    border: 1px solid rgba(255, 255, 255, .09);
    border-radius: 64px;
    transform: rotate(28deg);
}
.rf-shell-page .rf-sidebar-art-tile {
    width: 140px;
    height: 140px;
    right: -48px;
    top: 36%;
    border-radius: 34px;
    background: rgba(229, 3, 5, .09);
    transform: rotate(28deg);
}
/* The phone/tablet menu drawer keeps the same backdrop (responsive.css forces a flat colour there). */
@media (max-width: 900px) {
    :root .rf-shell-page .rf-sidebar {
        background:
            radial-gradient(circle at 92% 4%, rgba(229, 3, 5, .24), transparent 46%),
            linear-gradient(160deg, #080808 0%, #151515 58%, #0d0d0d 100%) !important;
    }
    .rf-shell-page .rf-sidebar-art-tile { width: 110px; height: 110px; right: -40px; }
}