/* GENERATED by scripts/build-global-css.mjs — do not edit. Source: normalize.css + revyfy-modern.css + app.css */
/* --- normalize.css --- */
/*! normalize.css v3.0.3 | MIT License | github.com/necolas/normalize.css */
/**
 * 1. Set default font family to sans-serif.
 * 2. Prevent iOS and IE text size adjust after device orientation change,
 *    without disabling user zoom.
 */
html {
  font-family: sans-serif;
  /* 1 */
  -ms-text-size-adjust: 100%;
  /* 2 */
  -webkit-text-size-adjust: 100%;
  /* 2 */
}
/**
 * Remove default margin.
 */
body {
  margin: 0;
}
/* HTML5 display definitions
   ========================================================================== */
/**
 * Correct `block` display not defined for any HTML5 element in IE 8/9.
 * Correct `block` display not defined for `details` or `summary` in IE 10/11
 * and Firefox.
 * Correct `block` display not defined for `main` in IE 11.
 */
article,
aside,
details,
figcaption,
figure,
footer,
header,
hgroup,
main,
menu,
nav,
section,
summary {
  display: block;
}
/**
 * 1. Correct `inline-block` display not defined in IE 8/9.
 * 2. Normalize vertical alignment of `progress` in Chrome, Firefox, and Opera.
 */
audio,
canvas,
progress,
video {
  display: inline-block;
  /* 1 */
  vertical-align: baseline;
  /* 2 */
}
/**
 * Prevent modern browsers from displaying `audio` without controls.
 * Remove excess height in iOS 5 devices.
 */
audio:not([controls]) {
  display: none;
  height: 0;
}
/**
 * Address `[hidden]` styling not present in IE 8/9/10.
 * Hide the `template` element in IE 8/9/10/11, Safari, and Firefox < 22.
 */
[hidden],
template {
  display: none;
}
/* Links
   ========================================================================== */
/**
 * Remove the gray background color from active links in IE 10.
 */
a {
  background-color: transparent;
}
/**
 * Improve readability of focused elements when they are also in an
 * active/hover state.
 */
a:active,
a:hover {
  outline: 0;
}
/* Text-level semantics
   ========================================================================== */
/**
 * Address styling not present in IE 8/9/10/11, Safari, and Chrome.
 */
abbr[title] {
  border-bottom: 1px dotted;
}
/**
 * Address style set to `bolder` in Firefox 4+, Safari, and Chrome.
 */
b,
strong {
  font-weight: bold;
}
/**
 * Address styling not present in Safari and Chrome.
 */
dfn {
  font-style: italic;
}
/**
 * Address variable `h1` font-size and margin within `section` and `article`
 * contexts in Firefox 4+, Safari, and Chrome.
 */
h1 {
  font-size: 2em;
  margin: 0.67em 0;
}
/**
 * Address styling not present in IE 8/9.
 */
mark {
  background: #ff0;
  color: #000;
}
/**
 * Address inconsistent and variable font size in all browsers.
 */
small {
  font-size: 80%;
}
/**
 * Prevent `sub` and `sup` affecting `line-height` in all browsers.
 */
sub,
sup {
  font-size: 75%;
  line-height: 0;
  position: relative;
  vertical-align: baseline;
}
sup {
  top: -0.5em;
}
sub {
  bottom: -0.25em;
}
/* Embedded content
   ========================================================================== */
/**
 * Remove border when inside `a` element in IE 8/9/10.
 */
img {
  border: 0;
}
/**
 * Correct overflow not hidden in IE 9/10/11.
 */
svg:not(:root) {
  overflow: hidden;
}
/* Grouping content
   ========================================================================== */
/**
 * Address margin not present in IE 8/9 and Safari.
 */
figure {
  margin: 1em 40px;
}
/**
 * Address differences between Firefox and other browsers.
 */
hr {
  box-sizing: content-box;
  height: 0;
}
/**
 * Contain overflow in all browsers.
 */
pre {
  overflow: auto;
}
/**
 * Address odd `em`-unit font size rendering in all browsers.
 */
code,
kbd,
pre,
samp {
  font-family: monospace, monospace;
  font-size: 1em;
}
/* Forms
   ========================================================================== */
/**
 * Known limitation: by default, Chrome and Safari on OS X allow very limited
 * styling of `select`, unless a `border` property is set.
 */
/**
 * 1. Correct color not being inherited.
 *    Known issue: affects color of disabled elements.
 * 2. Correct font properties not being inherited.
 * 3. Address margins set differently in Firefox 4+, Safari, and Chrome.
 */
button,
input,
optgroup,
select,
textarea {
  color: inherit;
  /* 1 */
  font: inherit;
  /* 2 */
  margin: 0;
  /* 3 */
}
/**
 * Address `overflow` set to `hidden` in IE 8/9/10/11.
 */
button {
  overflow: visible;
}
/**
 * Address inconsistent `text-transform` inheritance for `button` and `select`.
 * All other form control elements do not inherit `text-transform` values.
 * Correct `button` style inheritance in Firefox, IE 8/9/10/11, and Opera.
 * Correct `select` style inheritance in Firefox.
 */
button,
select {
  text-transform: none;
}
/**
 * 1. Avoid the WebKit bug in Android 4.0.* where (2) destroys native `audio`
 *    and `video` controls.
 * 2. Correct inability to style clickable `input` types in iOS.
 * 3. Improve usability and consistency of cursor style between image-type
 *    `input` and others.
 * 4. CUSTOM FOR WEBFLOW: Removed the input[type="submit"] selector to reduce
 *    specificity and defer to the .w-button selector
 */
button,
html input[type="button"],
input[type="reset"] {
  -webkit-appearance: button;
  /* 2 */
  cursor: pointer;
  /* 3 */
}
/**
 * Re-set default cursor for disabled elements.
 */
button[disabled],
html input[disabled] {
  cursor: default;
}
/**
 * Remove inner padding and border in Firefox 4+.
 */
button::-moz-focus-inner,
input::-moz-focus-inner {
  border: 0;
  padding: 0;
}
/**
 * Address Firefox 4+ setting `line-height` on `input` using `!important` in
 * the UA stylesheet.
 */
input {
  line-height: normal;
}
/**
 * It's recommended that you don't attempt to style these elements.
 * Firefox's implementation doesn't respect box-sizing, padding, or width.
 *
 * 1. Address box sizing set to `content-box` in IE 8/9/10.
 * 2. Remove excess padding in IE 8/9/10.
 */
input[type="checkbox"],
input[type="radio"] {
  box-sizing: border-box;
  /* 1 */
  padding: 0;
  /* 2 */
}
/**
 * Fix the cursor style for Chrome's increment/decrement buttons. For certain
 * `font-size` values of the `input`, it causes the cursor style of the
 * decrement button to change from `default` to `text`.
 */
input[type="number"]::-webkit-inner-spin-button,
input[type="number"]::-webkit-outer-spin-button {
  height: auto;
}
/**
 * 1. CUSTOM FOR WEBFLOW: changed from `textfield` to `none` to normalize iOS rounded input
 * 2. CUSTOM FOR WEBFLOW: box-sizing: content-box rule removed
 *    (similar to normalize.css >=4.0.0)
 */
input[type="search"] {
  -webkit-appearance: none;
  /* 1 */
}
/**
 * Remove inner padding and search cancel button in Safari and Chrome on OS X.
 * Safari (but not Chrome) clips the cancel button when the search input has
 * padding (and `textfield` appearance).
 */
input[type="search"]::-webkit-search-cancel-button,
input[type="search"]::-webkit-search-decoration {
  -webkit-appearance: none;
}
/**
 * Define consistent border, margin, and padding.
 */
fieldset {
  border: 1px solid #c0c0c0;
  margin: 0 2px;
  padding: 0.35em 0.625em 0.75em;
}
/**
 * 1. Correct `color` not being inherited in IE 8/9/10/11.
 * 2. Remove padding so people aren't caught out if they zero out fieldsets.
 */
legend {
  border: 0;
  /* 1 */
  padding: 0;
  /* 2 */
}
/**
 * Remove default vertical scrollbar in IE 8/9/10/11.
 */
textarea {
  overflow: auto;
}
/**
 * Don't inherit the `font-weight` (applied by a rule above).
 * NOTE: the default cannot safely be changed in Chrome and Safari on OS X.
 */
optgroup {
  font-weight: bold;
}
/* Tables
   ========================================================================== */
/**
 * Remove most spacing between table cells.
 */
table {
  border-collapse: collapse;
  border-spacing: 0;
}
td,
th {
  padding: 0;
}

/* --- revyfy-modern.css --- */
/* ============================================================
   revyfy-modern.css
   Primary stylesheet — loaded after normalize.css.
   Contains all app styles including migrated rules from the
   former rev.css (deleted). All overrides use existing HTML
   class selectors.
   ============================================================ */


/* ============================================================
   0. GLOBAL RESETS (previously provided by webflow.css)
   ============================================================ */
*, *:before, *:after {
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
}

/* Ensure buttons and links styled as buttons never show underlines */
.button, a.button, button {
    text-decoration: none;
}

/* ============================================================
   1. CSS CUSTOM PROPERTIES
   ============================================================ */
:root {
    --rev-brand:        #b9006a;
    --rev-accent:       #e60e89;
    --rev-dark:         #232323;
    --rev-body:         #383838;
    --rev-surface-0:    #181a28;
    --rev-surface-1:    #1f2232;
    --rev-surface-2:    #212332;
    --rev-surface-3:    #2a2d3f;
    --rev-border:       rgba(255, 255, 255, 0.07);
    --rev-border-strong: rgba(255, 255, 255, 0.12);
    --rev-text:         #ebedf0;
    /* Lightened #888ba0 → #979ab0 (July 2026 a11y pass): muted text is used at
       11–12px in table headers / labels where the old value sat below WCAG AA
       on the dark surfaces. */
    --rev-text-muted:   #979ab0;
    --rev-radius-sm:    6px;
    --rev-radius-md:    10px;
    --rev-radius-lg:    14px;
    --rev-shadow-card:  0 2px 8px rgba(0, 0, 0, 0.35), 0 1px 2px rgba(0, 0, 0, 0.2);
    --rev-shadow-hover: 0 4px 16px rgba(0, 0, 0, 0.5);
    --rev-transition:   150ms cubic-bezier(0.4, 0, 0.2, 1);
    /* Extended palette */
    --rev-violet:       #7c3aed;
    --rev-violet-dim:   rgba(124, 58, 237, 0.15);
    --rev-amber:        #f59e0b;
    --rev-amber-dim:    rgba(245, 158, 11, 0.15);
    --rev-green:        #10b981;
    --rev-green-dim:    rgba(16, 185, 129, 0.15);
    --rev-red:          #ef4444;
    --rev-red-dim:      rgba(239, 68, 68, 0.15);
    --rev-gradient-card: linear-gradient(135deg, var(--rev-surface-2) 0%, var(--rev-surface-1) 100%);
    --rev-glow-pink:    0 0 0 3px rgba(230, 14, 137, 0.18);
    --rev-glow-violet:  0 0 0 3px rgba(124, 58, 237, 0.18);
    --rev-bottom-nav-height: 64px;
    /* Registration / onboarding extended tokens */
    --rev-text-tertiary: #adb0c8; /* midpoint between the brightened #c5c8dc and the marketing/finances scoped override #9498b3 */
    --rev-surface-input-hover: #242740;
    --rev-border-focus: rgba(185, 0, 106, 0.5);
    --rev-brand-glow: rgba(185, 0, 106, 0.15);
    /* Typography */
    --rev-font-display:       'Montserrat', sans-serif;
    --rev-font-body:          'DM Sans', -apple-system, BlinkMacSystemFont, sans-serif;
    --rev-font-size-base:     14px;
    --rev-font-weight-normal:   400;
    --rev-font-weight-medium:   500;
    --rev-font-weight-semibold: 600;
    --rev-font-weight-bold:     700;
}


/* ============================================================
   2. APP CHROME — TOPBAR RAIL & SIDEBAR PANEL
   ============================================================ */

/* ============================================================
   2. CORE APP SHELL LAYOUT
   ============================================================ */

.rev-app-shell {
    min-height: 100vh;
}

.rev-app-shell--impersonating {
    padding-top: 28px;
    --rs-top-offset: 148px; /* 120px base + 28px impersonation bar */
}

/* Trial topbar — gradient background replaces default surface */
.rev-topbar-inner--trial {
    background: linear-gradient(135deg, var(--rev-accent, #e60e89), #9b59b6) !important;
}
.rev-topbar-inner--trial-expired {
    background: linear-gradient(135deg, #c0392b, #e74c3c) !important;
}

.rev-trial-text {
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    font-size: 14px;
    color: rgba(255, 255, 255, 0.9);
    white-space: nowrap;
    letter-spacing: 0.2px;
}

.rev-trial-text strong {
    color: #fff;
}

.rev-trial-cta {
    color: #fff;
    font-weight: 600;
    text-decoration: none;
    background: rgba(255, 255, 255, 0.2);
    padding: 5px 16px;
    border-radius: 4px;
    font-size: 12px;
    margin-left: 12px;
    transition: background 150ms ease;
}

.rev-trial-cta:hover {
    background: rgba(255, 255, 255, 0.35);
    color: #fff;
}

/* Keep topbar identity text white on trial gradient */
.rev-topbar-inner--trial .rev-topbar-tenant,
.rev-topbar-inner--trial .rev-topbar-user {
    color: rgba(255, 255, 255, 0.9);
}

/* Tablet/Mobile: make sidebar heading transparent so trial gradient shows through */
@media (max-width: 1024px) {
    .rev-topbar-rail--trial {
        background: linear-gradient(135deg, var(--rev-accent, #e60e89), #9b59b6) !important;
        border-bottom-color: rgba(255, 255, 255, 0.2);
    }
    .rev-topbar-rail--trial:has(.rev-topbar-inner--trial-expired) {
        background: linear-gradient(135deg, #c0392b, #e74c3c) !important;
    }
    .rev-topbar-rail--trial .rev-sidebar-heading {
        background-color: transparent !important;
        position: static !important;
        width: auto !important;
        height: auto !important;
    }
    .rev-topbar-rail--trial .rev-sidebar-brand {
        display: none !important;
    }
    .rev-topbar-rail--trial .rev-sidebar-toggle {
        color: #fff;
    }
    .rev-topbar-inner--trial {
        background: transparent !important;
    }
    .rev-topbar-inner--trial .rev-topbar-identity {
        display: none;
    }
    .rev-topbar-inner--trial .rev-topbar-menu-item {
        display: none;
    }
    .rev-trial-text {
        font-size: 13px;
    }
    .rev-trial-cta {
        font-size: 11px;
        padding: 3px 10px;
    }
}

/* ≤767: drop the informational trial suffix ("· test messages come to you") —
   the nowrap banner + Subscribe CTA + setup-guide pill + Ask Revy share one
   54px bar and the suffix alone costs ~180px. Full text returns ≥768. */
@media (max-width: 767px) {
    .rev-trial-suffix {
        display: none;
    }
}

/* Mobile: compact text */
@media (max-width: 480px) {
    .rev-topbar-inner--trial {
        /* Both sides squeezed — the banner, Subscribe CTA, setup-guide avatar
           and the Ask Revy disc all share this one 54px bar at 375px. */
        padding-right: 8px !important;
        padding-left: 12px !important;
    }
    .rev-trial-text {
        font-size: 11px;
        gap: 4px;
    }
    .rev-trial-cta {
        padding: 3px 8px;
        font-size: 10px;
        margin-left: 4px;
    }
    .rev-trial-suffix {
        display: none;
    }
}

/* Fixed topbar rail — full width at the top */
.rev-topbar-rail {
    position: fixed;
    left: 0;
    top: 0;
    right: 0;
    z-index: 100;
    display: flex;
    height: 54px;
    align-items: stretch;
    background-color: var(--rev-surface-1);
    border-bottom: 2px solid var(--rev-accent);
    box-shadow: 0 2px 16px rgba(0, 0, 0, 0.45);
}

/* App body — offset below topbar */
.rev-app-body {
    display: flex;
    min-height: 100vh;
    padding-top: 54px;
}

/* Spacer to push main content right of the sidebar */
.rev-app-sidebar-spacer {
    width: 260px;
    flex-shrink: 0;
}

/* Main content area */
.rev-app-main {
    flex: 1;
    overflow: hidden;
}

/* The Forms editor (like the settings layout) relies on sticky element + properties panels.
   The overflow:hidden above makes .rev-app-main the sticky scroll-container, which doesn't
   scroll (the document does), so sticky descendants never pin. Restore the scroll context for
   the editor route (mirrors .rev-app-main:has(.rev-settings-layout) in settings.css). */
.rev-app-main:has(.builder-page) { overflow: visible !important; }

/* ------------------------------------------------------------
   AI chat (/ai) — fixed-viewport surface, not document-scroll.
   The default shell grows the document (.rev-app-body min-height:100vh
   + padding-top, and .rev-app-main min-height:100vh on mobile), which is
   right for normal pages but wrong for the chat: it pushes the composer
   off-screen and scrolls the whole page instead of just the message list.
   On the AI route we pin the body to the viewport and give main a definite
   height below the fixed 54px topbar (minus the bottom nav on mobile), so
   .rev-ai-page can fill it via flex and only .rev-ai-list scrolls. Banners
   (offline / email-verify) sit above the chat and simply eat into the flex
   space, so the composer stays visible. Scoped with :has() so no other
   route is touched (mirrors .rev-app-main:has(.rev-settings-layout)).
   --rev-ai-bar is the fixed bar that sits ABOVE the shell: 0 normally, 28px
   when a super-admin is impersonating (.rev-app-shell--impersonating adds a
   28px padding-top), so the chat stays exactly viewport-height in both. */
.rev-app-shell { --rev-ai-bar: 0px; }
.rev-app-shell--impersonating { --rev-ai-bar: 28px; }
.rev-app-body:has(.rev-ai-page) {
    min-height: 0;
    height: calc(100dvh - var(--rev-ai-bar));
    overflow: hidden;
}
.rev-app-main:has(.rev-ai-page) {
    min-height: 0;
    height: calc(100dvh - var(--rev-ai-bar) - 54px);
    display: flex;
    flex-direction: column;
}
@media screen and (max-width: 767px) {
    .rev-app-main:has(.rev-ai-page) {
        height: calc(100dvh - var(--rev-ai-bar) - 54px - var(--rev-bottom-nav-height, 64px));
    }
}

/* Impersonation banner */
.impersonation-banner {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    z-index: 9999;
    background: #f59e0b;
    color: #1a1a1a;
    padding: 4px 16px;
    font-size: 12px;
    height: 28px;
    display: flex;
    align-items: center;
    gap: 8px;
}

.impersonation-banner-exit {
    margin-left: auto;
    color: #1a1a1a;
    text-decoration: underline;
    font-weight: 600;
    display: flex;
    align-items: center;
    gap: 4px;
}

.impersonation-banner-exit:hover {
    color: #7c2d12;
}


/* ============================================================
   3. SIDEBAR PANEL
   ============================================================ */

/* Fixed left panel below the topbar */
.rev-sidebar-panel {
    position: fixed;
    left: 0;
    top: 54px;
    bottom: 0;
    width: 260px;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    background-color: var(--rev-surface-1);
    box-shadow: 2px 0 20px rgba(0, 0, 0, 0.35);
    overflow: hidden;
    z-index: 90;
}

/* Accent gradient line on right edge */
.rev-sidebar-panel::after {
    content: '';
    position: fixed;
    left: 260px;
    top: 0;
    bottom: 0;
    width: 2px;
    background: linear-gradient(180deg, var(--rev-accent) 0%, var(--rev-brand) 100%);
    pointer-events: none;
    z-index: 100;
}

/* Sidebar heading — occupies the left 260px of the topbar */
.rev-sidebar-heading {
    position: fixed;
    left: 0;
    top: 0;
    z-index: 101;
    width: 260px;
    height: 54px;
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: flex-start;
    background-color: var(--rev-surface-1);
}

/* Logo link */
.rev-sidebar-brand {
    display: flex;
    height: 54px;
    padding: 10px 20px;
    justify-content: center;
    align-items: center;
    transition: opacity 100ms ease-in-out;
    text-decoration: none;
}

.rev-sidebar-brand:hover {
    opacity: 0.8;
}

.rev-sidebar-brand-logo {
    max-height: 45px;
    max-width: 200px;
    text-align: center;
}

.rev-sidebar-brand-logo-small {
    display: none;
    width: 20px;
}

/* Mobile hamburger toggle (hidden on desktop) */
.rev-sidebar-toggle {
    display: none;
    width: 34px;
    height: 34px;
    margin: 0 10px 0 20px;
    padding: 0;
    border-radius: 5px;
    cursor: pointer;
    border: none;
    background: transparent;
    color: var(--rev-text);
    font-size: 18px;
    align-items: center;
    justify-content: center;
}

.rev-sidebar-toggle:hover {
    background-color: rgba(255, 255, 255, 0.08);
}

/* Scrollable body */
.rev-sidebar-body {
    flex: 1;
    overflow-y: auto;
    padding-top: 12px;
    padding-bottom: 12px;
}

/* Footer links area */
.rev-sidebar-footer {
    border-top: 1px solid var(--rev-border);
    padding-top: 8px;
    padding-bottom: 8px;
}

.rev-sidebar-section-label {
    font-size: 10px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: var(--rev-text-muted);
    padding: 8px 16px 4px 52px;
}


/* ============================================================
   4. SIDEBAR NAV LINKS
   ============================================================ */

.rev-sidebar-link {
    position: relative;
    padding-left: 52px;
    padding-right: 16px;
    min-height: 44px;
    height: auto;
    display: flex;
    align-items: center;
    border-radius: 0 var(--rev-radius-md) var(--rev-radius-md) 0;
    margin-right: 12px;
    margin-top: 2px;
    margin-bottom: 2px;
    font-family: var(--rev-font-body);
    font-size: 14px;
    font-weight: 500;
    letter-spacing: 0.2px;
    color: var(--rev-text-muted);
    text-decoration: none;
    transition: background-color var(--rev-transition), color var(--rev-transition),
                border-color 150ms ease;
    background-color: transparent;
    border: none;
    border-left: 3px solid transparent;
    width: calc(100% - 12px);
    text-align: left;
    cursor: pointer;
    box-shadow: none;
}

.rev-sidebar-link:hover {
    background-color: rgba(255, 255, 255, 0.06);
    color: var(--rev-text);
}

.rev-sidebar-link.active,
.rev-sidebar-link.w--current {
    background-color: var(--rev-accent);
    color: #fff;
    font-weight: 600;
    border-left-color: var(--rev-accent);
    box-shadow: inset 3px 0 12px rgba(230, 14, 137, 0.12);
}

.rev-sidebar-link .nav-icon {
    position: absolute;
    left: 18px;
    top: 50%;
    transform: translateY(-50%);
    width: 20px;
    text-align: center;
    font-size: 15px;
    opacity: 0.7;
    transition: opacity var(--rev-transition);
}

.rev-sidebar-link:hover .nav-icon {
    opacity: 0.9;
}

.rev-sidebar-link.active .nav-icon,
.rev-sidebar-link.w--current .nav-icon {
    opacity: 1;
}

/* "New" badge for recently-shipped nav items (Forms, Marketing). White pill + accent text reads
   on both the dark row and the active (accent) row; right-aligned via the flex link. */
.nav-new {
    margin-left: auto;
    flex-shrink: 0;
    font-size: 9px;
    font-weight: 800;
    letter-spacing: 0.5px;
    text-transform: uppercase;
    color: var(--rev-accent);
    background: #fff;
    border-radius: 999px;
    padding: 2px 7px;
    line-height: 1.5;
}


/* ============================================================
   5. SIDEBAR DROPDOWNS (SALES / STOCK)
   ============================================================ */

.rev-sidebar-dropdown {
    display: block;
}

/* Toggle button — same visual style as nav link */
.rev-sidebar-dropdown-toggle {
    position: relative;
    padding-left: 52px;
    padding-right: 16px;
    min-height: 44px;
    display: flex;
    align-items: center;
    border-radius: 0 var(--rev-radius-md) var(--rev-radius-md) 0;
    margin-right: 12px;
    margin-top: 2px;
    margin-bottom: 2px;
    font-family: var(--rev-font-body);
    font-size: 14px;
    font-weight: 500;
    letter-spacing: 0.2px;
    color: var(--rev-text-muted);
    transition: background-color var(--rev-transition), color var(--rev-transition);
    background-color: transparent;
    border: none;
    border-left: 3px solid transparent;
    width: calc(100% - 12px);
    text-align: left;
    cursor: pointer;
}

.rev-sidebar-dropdown-toggle:hover {
    background-color: rgba(255, 255, 255, 0.06);
    color: var(--rev-text);
}

.rev-sidebar-dropdown-toggle.is-open {
    color: var(--rev-text);
}

.rev-sidebar-dropdown-toggle .nav-icon {
    position: absolute;
    left: 18px;
    top: 50%;
    transform: translateY(-50%);
    width: 20px;
    text-align: center;
    font-size: 15px;
    opacity: 0.7;
    transition: opacity var(--rev-transition);
}

.rev-sidebar-dropdown-toggle:hover .nav-icon,
.rev-sidebar-dropdown-toggle.is-open .nav-icon {
    opacity: 0.9;
}

/* Chevron arrow */
.rev-sidebar-chevron {
    margin-left: auto;
    display: inline-block;
    width: 0;
    height: 0;
    border-left: 4px solid transparent;
    border-right: 4px solid transparent;
    border-top: 5px solid var(--rev-text-muted);
    transition: transform var(--rev-transition);
}

.rev-sidebar-dropdown-toggle.is-open .rev-sidebar-chevron {
    transform: rotate(180deg);
    border-top-color: #fff;
}

/* Accordion list */
.rev-sidebar-dropdown-list {
    display: none;
    background: transparent;
    padding: 0;
}

.rev-sidebar-dropdown-list.is-open {
    display: block;
}

/* Child links — indented */
.rev-sidebar-dropdown-list .rev-sidebar-link {
    padding-left: 68px;
}

.rev-sidebar-dropdown-list .rev-sidebar-link .nav-icon {
    left: 34px;
}


/* ============================================================
   6. TOPBAR INNER
   ============================================================ */

.rev-topbar-inner {
    display: flex;
    padding-right: 20px;
    padding-left: 20px;
    justify-content: flex-end;
    flex: 1;
    background-color: var(--rev-surface-1);
}

.rev-topbar-menu {
    display: flex;
    align-items: center;
    /* Right-align the cluster (Ask Revy / identity / avatar). Only the trial
       banner's flex:1 used to push it right — without a banner (subscribed,
       setup complete) the cluster sat at the far LEFT, underneath the fixed
       sidebar heading, and was invisible. */
    justify-content: flex-end;
    gap: 8px;
    height: 100%;
    width: 100%;
}

.rev-topbar-menu-item {
    display: flex;
    align-items: center;
}

/* Business name + user name block */
.rev-topbar-identity {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    margin-right: 8px;
    line-height: 1.2;
}

.rev-topbar-tenant {
    font-family: var(--rev-font-display);
    font-size: 13px;
    font-weight: 600;
    color: var(--rev-text);
    letter-spacing: 0.2px;
    white-space: nowrap;
}

.rev-topbar-user {
    font-family: var(--rev-font-body);
    font-size: 11px;
    font-weight: 400;
    color: var(--rev-text-muted);
    white-space: nowrap;
}

/* Profile avatar circle */
.rev-avatar {
    width: 36px;
    height: 36px;
    border-radius: 50%;
    background-color: var(--rev-brand);
    border: 2px solid var(--rev-accent);
    display: flex;
    align-items: center;
    justify-content: center;
    font-family: var(--rev-font-display);
    font-size: 13px;
    font-weight: 700;
    color: #fff;
    letter-spacing: 0.5px;
    cursor: pointer;
    transition: border-color var(--rev-transition), box-shadow var(--rev-transition);
    user-select: none;
}

.rev-avatar:hover {
    border-color: #fff;
    box-shadow: 0 0 0 3px rgba(230, 14, 137, 0.25);
}


/* ============================================================
   7. TOPBAR PROFILE DROPDOWN
   ============================================================ */

.rev-topbar-dropdown {
    position: relative;
}

.rev-topbar-dropdown-toggle {
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    background: none;
    border: none;
    padding: 0;
}

.rev-topbar-dropdown-list {
    position: absolute;
    right: 0;
    top: calc(100% + 4px);
    z-index: 200;
    background-color: var(--rev-surface-1);
    border: 1px solid var(--rev-border-strong);
    border-radius: var(--rev-radius-md);
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.55);
    min-width: 220px;
    padding: 6px;
    opacity: 0;
    transform: scale(0.96) translateY(-4px);
    transform-origin: top right;
    transition: opacity 150ms cubic-bezier(0.4, 0, 0.2, 1),
                transform 150ms cubic-bezier(0.4, 0, 0.2, 1);
    pointer-events: none;
}

.rev-topbar-dropdown-list.is-open {
    opacity: 1;
    transform: scale(1) translateY(0);
    pointer-events: auto;
}

.rev-topbar-dropdown-link {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 10px 16px;
    border-radius: var(--rev-radius-sm);
    color: var(--rev-text);
    text-decoration: none;
    transition: background-color var(--rev-transition);
    font-family: var(--rev-font-body);
    font-size: 14px;
    background: none;
    border: none;
    width: 100%;
    text-align: left;
    cursor: pointer;
}

.rev-topbar-dropdown-link:hover {
    background-color: rgba(255, 255, 255, 0.06);
    color: var(--rev-text);
}

.rev-topbar-dropdown-link.active {
    background-color: rgba(255, 255, 255, 0.06);
}

.rev-topbar-dropdown-icon {
    width: 16px;
    text-align: center;
    color: var(--rev-text-muted);
    font-size: 14px;
}

.rev-topbar-dropdown-check {
    margin-left: auto;
    color: var(--rev-accent);
    font-size: 12px;
}

.rev-topbar-dropdown-divider {
    height: 1px;
    background-color: var(--rev-border);
    margin: 6px 0;
}

.rev-topbar-dropdown-label {
    font-family: var(--rev-font-body);
    font-size: 11px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.6px;
    color: var(--rev-text-muted);
    padding: 8px 12px 4px;
}


/* ============================================================
   8. RESPONSIVE — TABLET / MOBILE (≤ 1024px)
   ============================================================ */

@media screen and (max-width: 1024px) {
    .rev-app-body {
        display: block;
    }

    .rev-app-sidebar-spacer {
        display: none;
    }

    .rev-app-main {
        min-height: 100vh;
    }

    .rev-sidebar-panel {
        display: none;
        width: 260px;
        max-height: calc(100vh - 54px);
        overflow-y: auto;
    }

    /* Hide the desktop accent line on mobile */
    .rev-sidebar-panel::after {
        display: none;
    }

    .rev-sidebar-panel.is-open {
        display: flex;
    }

    .rev-sidebar-heading {
        width: 100%;
    }

    /* Swap the large wordmark for the compact one. The old rule hid the whole
       .rev-sidebar-brand anchor — which also hid the small logo inside it that
       the next rule was trying to show — leaving the tablet/mobile bar bare. */
    .rev-sidebar-brand {
        padding: 10px 12px;
    }

    .rev-sidebar-brand-logo {
        display: none;
    }

    .rev-sidebar-brand-logo-small {
        display: block;
        width: auto;
        height: 32px;
    }

    .rev-sidebar-toggle {
        display: flex;
    }

    .rev-sidebar-link {
        width: calc(100% - 12px);
        margin-right: 12px;
    }

    .rev-sidebar-dropdown-toggle {
        width: calc(100% - 12px);
        margin-right: 12px;
    }

    .rev-sidebar-dropdown,
    .rev-sidebar-dropdown-list {
        width: 100%;
    }
}

/* Notification content */
.notification-content-heading {
    font-family: var(--rev-font-body);
    font-size: 12px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.6px;
    color: var(--rev-text-muted);
    padding: 8px 12px 4px;
}


/* ============================================================
   8. PAGE HEADER BAR
   ============================================================ */

.app-main-layout-wrapper {
    display: flex;
    max-width: 1500px;
    margin-right: auto;
    margin-left: auto;
    padding: 20px 4% 0px;
    flex-direction: column;
}

.app-main-layout-header {
    background-color: var(--rev-surface-1) !important;
    border-bottom: 1px solid var(--rev-border) !important;
    box-shadow: 0 1px 0 rgba(255, 255, 255, 0.02);
}

.app-main-layout-wrapper.header {
    background-color: var(--rev-surface-1) !important;
}

.page-heading h2,
.page-heading h1 {
    font-family: var(--rev-font-display) !important;
    font-size: 20px !important;
    font-weight: 700 !important;
    letter-spacing: -0.3px;
    color: var(--rev-text) !important;
    margin-bottom: 0;
    padding-bottom: 4px;
}

/* Page tab links in header */
.page-tab-link {
    display: inline-flex;
    align-items: center;
    padding: 10px 14px;
    background-image: none !important;
    color: var(--rev-text-muted) !important;
    border-bottom: 2px solid transparent;
    text-decoration: none !important;
    font-weight: 500;
    transition: color var(--rev-transition), border-color var(--rev-transition);
}

.page-tab-link:hover {
    color: var(--rev-text) !important;
    border-bottom-color: rgba(230, 14, 137, 0.4);
    text-decoration: none !important;
}

.page-tab-link.w--current,
.page-tab-link.rev--current {
    color: var(--rev-accent) !important;
    border-bottom-color: var(--rev-accent);
    background-image: none !important;
    text-decoration: none !important;
}

/* Null all page-tab-link PNG backgrounds */
.page-tab-link[class*=" "] {
    background-image: none !important;
}


/* ============================================================
   9. CARDS
   ============================================================ */

.card {
    padding: 20px;
    background-color: var(--rev-surface-2) !important;
    border-radius: var(--rev-radius-md) !important;
    border: 1px solid var(--rev-border) !important;
    box-shadow: var(--rev-shadow-card) !important;
    color: var(--rev-text) !important;
    transition: box-shadow var(--rev-transition);
}

.card:hover {
    box-shadow: var(--rev-shadow-hover) !important;
}

.card.dark {
    background-color: var(--rev-surface-1) !important;
}

.card-heading {
    margin-bottom: 16px;
    font-family: var(--rev-font-display);
    font-weight: 600;
    color: var(--rev-text);
}


/* ============================================================
   10. BUTTONS
   ============================================================ */

.button {
    display: inline-block;
    height: 44px;
    padding: 0px 40px;
    line-height: 42px;
    border-radius: var(--rev-radius-sm) !important;
    font-family: var(--rev-font-body) !important;
    font-weight: 600 !important;
    letter-spacing: 0.3px;
    color: var(--rev-text) !important;
    text-align: center;
    cursor: pointer;
    transition: background-color var(--rev-transition),
                transform var(--rev-transition),
                box-shadow var(--rev-transition) !important;
}

.button.button-primary {
    background-color: var(--rev-accent) !important;
    box-shadow: 0 2px 8px rgba(230, 14, 137, 0.35) !important;
    border: none !important;
}

.button.button-primary:hover {
    background-color: var(--rev-brand) !important;
    box-shadow: 0 4px 14px rgba(230, 14, 137, 0.45) !important;
    transform: translateY(-1px);
}

.button.button-primary:active {
    transform: translateY(0);
    box-shadow: 0 1px 4px rgba(230, 14, 137, 0.3) !important;
}

.button.button-outline,
.button.button-secondary {
    border: 1px solid var(--rev-border-strong) !important;
    background-color: transparent !important;
    color: var(--rev-text) !important;
}

.button.button-outline:hover {
    background-color: rgba(255, 255, 255, 0.06) !important;
}

/* Minimum touch target on mobile */
@media (max-width: 768px) {
    .button { min-height: 44px; }
}


/* ============================================================
   11. INPUTS & TEXTAREAS — FIX BLUE FOCUS BUG
   ============================================================ */

.input,
.textarea,
.w-input,
.w-select {
    display: block;
    width: 100%;
    height: 44px;
    min-height: 44px;
    padding: 0px 15px;
    line-height: 40px;
    border-style: solid;
    border-width: 1px;
    background-color: var(--rev-surface-2) !important;
    border-color: var(--rev-border-strong) !important;
    border-radius: var(--rev-radius-sm) !important;
    color: var(--rev-text) !important;
    font-family: var(--rev-font-body) !important;
    transition: border-color var(--rev-transition), box-shadow var(--rev-transition);
}

.textarea {
    height: auto;
    min-height: 120px;
    padding: 10px 15px;
    line-height: 1.5;
}

.input:focus,
.textarea:focus,
.w-input:focus,
.w-select:focus {
    border-color: var(--rev-accent) !important;
    box-shadow: 0 0 0 3px rgba(230, 14, 137, 0.15) !important;
    outline: none !important;
}

.input::placeholder,
.textarea::placeholder,
.w-input::placeholder {
    color: var(--rev-text-muted) !important;
}


/* ============================================================
   12. CHECKBOX — MAGENTA BRAND OVERRIDE
   ============================================================ */

/* Legacy Webflow class — kept for any remaining old markup */
.w-checkbox-input--inputType-custom.w--redirected-checked {
    background-color: var(--rev-accent) !important;
    border-top-color: var(--rev-accent) !important;
    border-bottom-color: var(--rev-accent) !important;
    border-left-color: var(--rev-accent) !important;
    border-right-color: var(--rev-accent) !important;
}

.w-checkbox-input--inputType-custom.w--redirected-focus {
    box-shadow: 0 0 0 3px rgba(230, 14, 137, 0.15) !important;
}

/* New rev--checked state for Checkbox.razor (replaces w--redirected-checked) */
.checkbox.rev--checked {
    border-color: var(--rev-accent) !important;
    background-color: var(--rev-accent) !important;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 10 8'%3E%3Cpath d='M1 4l3 3 5-5' stroke='%23fff' stroke-width='2' fill='none' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") !important;
    background-position: 50% 50% !important;
    background-size: 10px !important;
    background-repeat: no-repeat !important;
}


/* ============================================================
   13. TABLE / LIST ROWS
   ============================================================ */

/* --- rev-list-table system (replaces card+receipt-table+receipt-row+card-setting-text) --- */

.rev-list-table {
    background: var(--rev-surface-2);
    border-radius: var(--rev-radius-md);
    border: 1px solid var(--rev-border);
    box-shadow: var(--rev-shadow-card);
    overflow: hidden; /* clips negative margins from inner w-row */
}

/* Heading section padding (replaces .card padding: 10px 20px) */
.rev-list-table .card-heading-small {
    padding: 10px 20px;
    margin-bottom: 0;
}

/* Nested table (replaces card.no-padding.receipt-table) */
.rev-list-table.is-nested {
    border: none;
    border-radius: 0;
    background: transparent;
    box-shadow: none;
    overflow-x: auto;
    margin-top: 4px;
}

.rev-list-row {
    display: flex;
    padding: 10px 10px 10px 20px;
    justify-content: space-around;
    align-items: center;
    border-bottom: 1px solid var(--rev-border);
    transition: background-color 150ms ease;
}

.rev-list-row:last-child {
    border-bottom: none;
}

.rev-list-row:hover {
    background-color: rgba(255, 255, 255, 0.03);
}

.rev-list-row.is-parent {
    background-color: var(--rev-surface-3);
}

.rev-list-row.no-border {
    border-bottom: none;
}

.rev-list-cell {
    padding-right: 10px;
    flex: 1;
    font-size: 13px;
    color: var(--rev-text);
}

.rev-list-cell.is-header {
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.6px;
    text-transform: uppercase;
    color: var(--rev-text-muted);
}

/* --- end rev-list-table system --- */

.row.table-row {
    transition: background-color var(--rev-transition);
}

.row.table-row:hover {
    background-color: rgba(255, 255, 255, 0.04) !important;
}

.row.table-row.table-header {
    border-bottom: 1px solid var(--rev-border) !important;
    background-color: transparent !important;
}

.row.table-row.table-header .column-heading,
.row.table-row.table-header div,
.row.table-row.table-header td {
    font-size: 11px !important;
    font-weight: 700 !important;
    letter-spacing: 0.7px !important;
    text-transform: uppercase !important;
    color: var(--rev-text-muted) !important;
}


/* ============================================================
   14. STATUS BADGES
   ============================================================ */

.status {
    display: inline-flex !important;
    align-items: center;
    gap: 5px;
    padding: 3px 10px !important;
    border-radius: 99px !important;
    font-size: 11px !important;
    font-weight: 600 !important;
    letter-spacing: 0.4px;
}

.status.green {
    background-color: rgba(34, 197, 94, 0.12) !important;
    color: #4ade80 !important;
}

.status.red {
    background-color: rgba(239, 68, 68, 0.12) !important;
    color: #f87171 !important;
}

.status.blue {
    background-color: rgba(230, 14, 137, 0.12) !important;
    color: var(--rev-accent) !important;
}

.status.orange {
    background-color: rgba(251, 146, 60, 0.12) !important;
    color: #fb923c !important;
}


/* Section 15 (old .modal overrides) — removed, replaced by 15b rev-modal */


/* ============================================================
   15b. REV-MODAL  (new shared modal system)
   ============================================================ */

.rev-modal {
    position: fixed;
    inset: 0;
    z-index: 1200;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(0, 0, 0, 0.55);
    padding: 16px;
}

.rev-modal-mask {
    position: absolute;
    inset: 0;
    z-index: 0;
    border: none;
    padding: 0;
    background: transparent;
    cursor: default;
    display: block;
    width: 100%;
    height: 100%;
}

.rev-modal-container {
    position: relative;
    z-index: 1;
    width: 100%;
    max-width: 480px;
    max-height: calc(100vh - 32px);
    background: var(--rev-surface-1);
    border: 1px solid var(--rev-border-strong);
    border-radius: var(--rev-radius-lg);
    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.65);
    display: flex;
    flex-direction: column;
    overflow: hidden;
}

/* Size variants */
.rev-modal-container.rev-modal-sm { max-width: 360px; }
.rev-modal-container.rev-modal-lg { max-width: 600px; }

/* Header */
.rev-modal-header {
    flex-shrink: 0;
    padding: 16px 20px;
    border-bottom: 1px solid var(--rev-border);
    background: var(--rev-surface-3);
}

.rev-modal-title {
    font-size: 16px;
    font-weight: 700;
    color: var(--rev-text);
    line-height: 1.2;
}

.rev-modal-subtitle {
    font-size: 12px;
    color: var(--rev-text-muted);
    margin-top: 2px;
}

/* Modal header split layout (title left, meta right) */
.rev-modal-header-split {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
}

.rev-modal-header-date {
    font-size: 13px;
    font-weight: 500;
    color: var(--rev-text-muted);
    display: flex;
    align-items: center;
    gap: 6px;
    white-space: nowrap;
}

.rev-modal-header-date i {
    color: var(--rev-accent);
    font-size: 12px;
}

.rev-modal-header-time {
    color: var(--rev-text);
    font-weight: 600;
}

/* Scrollable body */
.rev-modal-body {
    flex: 1;
    overflow-y: auto;
    padding: 16px 20px;
    display: flex;
    flex-direction: column;
    gap: 12px;
}

/* Sticky footer */
.rev-modal-footer {
    flex-shrink: 0;
    padding: 14px 20px;
    border-top: 1px solid var(--rev-border);
    background: var(--rev-surface-3);
    display: flex;
    gap: 10px;
}

.rev-modal-footer .button-block {
    margin-bottom: 0 !important;
    flex: 1;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

@media (max-width: 767px) {
    .rev-modal-footer .button {
        padding-left: 10px !important;
        padding-right: 10px !important;
    }
}

/* Mobile: bottom-sheet */
@media (max-width: 767px) {
    .rev-modal {
        padding: 0;
        padding-bottom: var(--rev-bottom-nav-height);
        align-items: flex-end;
    }

    .rev-modal-container {
        max-width: 100%;
        max-height: 92vh;
        height: auto;
        border-radius: var(--rev-radius-lg) var(--rev-radius-lg) 0 0;
        border: none;
        border-top: 1px solid var(--rev-border-strong);
    }

    .rev-modal-header-split {
        flex-wrap: wrap;
        gap: 4px;
    }
}


/* ============================================================
   15b. DURATION TIMELINE (split service segments in booking modal)
   ============================================================ */

.rev-duration-timeline {
    display: flex;
    flex-direction: row;
    gap: 6px;
    align-items: stretch;
    margin: 8px 0 12px;
    padding: 8px;
    background: rgba(255, 255, 255, 0.03);
    border-radius: var(--rev-radius-sm);
    border: 1px solid var(--rev-border-subtle);
    overflow-x: auto;
}

.rev-duration-timeline__segment {
    flex: 1;
    min-width: 140px;
    padding: 8px;
    background: var(--rev-surface-card);
    border-radius: var(--rev-radius-sm);
    border-left: 3px solid var(--rev-accent);
}

.rev-duration-timeline__segment-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 4px;
}

.rev-duration-timeline__segment-name {
    font-size: 11px;
    font-weight: 600;
    text-transform: uppercase;
    color: var(--rev-text-secondary);
    letter-spacing: 0.5px;
}

.rev-duration-timeline__segment-duration {
    font-size: 11px;
    font-weight: 600;
    color: var(--rev-accent);
}

.rev-duration-timeline__segment-time {
    font-size: 12px;
    color: var(--rev-text-secondary);
    margin-bottom: 6px;
}

.rev-duration-timeline__segment-staff {
    font-size: 13px;
}

.rev-duration-timeline__gap {
    display: flex;
    align-items: center;
    justify-content: center;
    min-width: 50px;
    padding: 4px;
}

.rev-duration-timeline__gap-label {
    font-size: 10px;
    color: var(--rev-text-tertiary);
    white-space: nowrap;
    padding: 2px 6px;
    border: 1px dashed var(--rev-border-subtle);
    border-radius: var(--rev-radius-sm);
}

/* Mobile: vertical card stack */
@media (max-width: 767px) {
    .rev-duration-timeline {
        flex-direction: column;
        gap: 4px;
        overflow-x: visible;
    }

    .rev-duration-timeline__segment {
        min-width: unset;
    }

    .rev-duration-timeline__gap {
        min-width: unset;
        padding: 2px 0;
    }

    .rev-duration-timeline__gap-label {
        font-size: 11px;
    }
}

/* Tablet: allow wrap if segments overflow */
@media (min-width: 768px) and (max-width: 1024px) {
    .rev-duration-timeline {
        flex-wrap: wrap;
    }
}


/* ============================================================
   15c. BOOKING PANEL — Slide-in side panel system
   ============================================================ */

/* --- Backdrop --- */
.rev-panel-backdrop {
    position: fixed;
    inset: 0;
    z-index: 1199;
    background: rgba(0, 0, 0, 0.45);
    opacity: 0;
    pointer-events: none;
    transition: opacity 280ms ease;
}

.rev-panel-backdrop.open {
    opacity: 1;
    pointer-events: auto;
}

/* --- Panel container --- */
.rev-panel {
    position: fixed;
    top: 0;
    right: 0;
    bottom: 0;
    width: 500px;
    z-index: 1200;
    display: flex;
    flex-direction: column;
    background: var(--rev-surface-1);
    box-shadow: -4px 0 24px rgba(0, 0, 0, 0.35);
    transform: translateX(100%);
    transition: transform 280ms cubic-bezier(0.4, 0, 0.2, 1);
}

.rev-panel.open {
    transform: translateX(0);
}

/* --- Close button --- */
.rev-panel-close {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    border-radius: var(--rev-radius-sm);
    border: none;
    background: transparent;
    color: var(--rev-text-muted);
    font-size: 16px;
    cursor: pointer;
    transition: background 150ms, color 150ms;
}

.rev-panel-close:hover {
    background: var(--rev-surface-3);
    color: var(--rev-text);
}

/* --- Header --- */
.rev-panel-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 12px 16px;
    border-bottom: 1px solid var(--rev-border);
    flex-shrink: 0;
}

/* --- Tabs --- */
.rev-panel-tabs {
    display: flex;
    gap: 4px;
}

.rev-panel-tab {
    padding: 6px 14px;
    font-size: 13px;
    font-weight: 500;
    color: var(--rev-text-muted);
    background: transparent;
    border: none;
    border-bottom: 2px solid transparent;
    cursor: pointer;
    transition: color 150ms, border-color 150ms;
    border-radius: var(--rev-radius-sm) var(--rev-radius-sm) 0 0;
}

.rev-panel-tab:hover {
    color: var(--rev-text);
}

.rev-panel-tab.active {
    color: var(--rev-accent);
    border-bottom-color: var(--rev-accent);
}

/* --- Body --- */
.rev-panel-body {
    flex: 1;
    overflow-y: auto;
    padding: 16px;
    display: flex;
    flex-direction: column;
    gap: 16px;
}

/* --- Footer --- */
.rev-panel-footer {
    position: sticky;
    bottom: 0;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 12px 16px;
    border-top: 1px solid var(--rev-border);
    background: var(--rev-surface-1);
    flex-shrink: 0;
    gap: 12px;
}

.rev-panel-footer-info {
    display: flex;
    align-items: center;
    gap: 8px;
    flex: 0 1 auto;
    min-width: 0;
}

.rev-panel-footer-actions {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-shrink: 0;
    margin-left: auto;
}

.rev-panel-total-duration {
    font-size: 12px;
    font-weight: 600;
    color: var(--rev-text-muted);
    white-space: nowrap;
}

/* --- Section --- */
.rev-panel-section {
    background: var(--rev-surface-2);
    border-radius: var(--rev-radius-md);
    border: 1px solid var(--rev-border);
    padding: 16px;
    margin-bottom: 0;
}

.rev-panel-section-header {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 11px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    color: var(--rev-text-muted);
    margin-bottom: 12px;
}

.rev-panel-section-header i {
    font-size: 12px;
}

/* --- Client card --- */
.rev-panel-client-card {
    display: flex;
    flex-direction: column;
    gap: 8px;
    padding: 12px;
    background: var(--rev-surface-3);
    border-radius: var(--rev-radius-sm);
    border: 1px solid var(--rev-border);
}

.rev-panel-client-name {
    font-size: 14px;
    font-weight: 600;
    color: var(--rev-text);
}

.rev-panel-client-stats {
    display: flex;
    gap: 16px;
    flex-wrap: wrap;
}

.rev-panel-stat {
    font-size: 12px;
    color: var(--rev-text-muted);
}

.rev-panel-stat strong {
    color: var(--rev-text);
}

/* --- Quick pick chips --- */
.rev-panel-quick-picks {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    margin-top: 8px;
}

.rev-panel-chip {
    display: inline-flex;
    align-items: center;
    padding: 4px 12px;
    font-size: 12px;
    font-weight: 500;
    color: var(--rev-text-muted);
    background: var(--rev-surface-3);
    border: 1px solid var(--rev-border);
    border-radius: 999px;
    cursor: pointer;
    transition: background 150ms, color 150ms, border-color 150ms;
}

.rev-panel-chip:hover {
    color: var(--rev-text);
    background: var(--rev-surface-1);
    border-color: var(--rev-border-strong);
}

/* --- Quick Add Client form --- */
.rev-quick-client-form {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.rev-quick-client-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.rev-quick-client-title {
    font-size: 13px;
    font-weight: 600;
    color: var(--rev-text);
}

.rev-quick-client-cancel {
    font-size: 12px;
    color: var(--rev-text-muted);
    cursor: pointer;
    text-decoration: none;
}

.rev-quick-client-cancel:hover {
    color: var(--rev-text);
}

.rev-quick-client-field {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.rev-quick-client-field .label {
    font-size: 11px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    color: var(--rev-text-muted);
    margin: 0;
}

.rev-quick-client-save {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    margin-top: 4px;
    width: 100%;
}

/* --- Service card --- */
.rev-panel-service-card {
    background: var(--rev-surface-2);
    border-radius: var(--rev-radius-md);
    border: 1px solid var(--rev-border);
    padding: 16px;
}

.rev-panel-service-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 12px;
}

.rev-panel-service-header h6 {
    margin: 0;
    font-size: 13px;
    font-weight: 600;
    color: var(--rev-text);
}

.rev-panel-service-meta {
    display: flex;
    gap: 12px;
    margin-bottom: 12px;
}

.rev-panel-service-time {
    font-size: 12px;
    color: var(--rev-text-muted);
}

.rev-panel-service-end {
    font-size: 12px;
    color: var(--rev-text-muted);
}

/* --- Split timeline --- */
.rev-panel-split {
    display: flex;
    flex-direction: column;
    gap: 0;
    padding: 8px 0 8px 8px;
}

.rev-panel-step {
    display: flex;
    gap: 12px;
    min-height: 56px;
}

.rev-panel-step-indicator {
    display: flex;
    flex-direction: column;
    align-items: center;
    width: 24px;
    flex-shrink: 0;
}

.rev-panel-step-number {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 24px;
    height: 24px;
    border-radius: 50%;
    background: var(--rev-accent);
    color: #fff;
    font-size: 11px;
    font-weight: 700;
    flex-shrink: 0;
}

.rev-panel-step-line {
    flex: 1;
    width: 2px;
    background: var(--rev-border-strong);
    margin: 4px 0;
}

.rev-panel-step-content {
    flex: 1;
    padding-bottom: 12px;
}

.rev-panel-step-label {
    font-size: 12px;
    font-weight: 600;
    color: var(--rev-text);
    margin-bottom: 2px;
}

.rev-panel-step-time {
    font-size: 11px;
    color: var(--rev-text-muted);
    margin-bottom: 6px;
}

/* --- Gap --- */
.rev-panel-step-gap {
    display: flex;
    gap: 12px;
    align-items: center;
    min-height: 32px;
    margin: 2px 0 8px;
}

.rev-panel-step-gap-line {
    display: flex;
    flex-direction: column;
    align-items: center;
    width: 24px;
    flex-shrink: 0;
}

.rev-panel-step-gap-line::before {
    content: '';
    width: 2px;
    height: 100%;
    min-height: 24px;
    background: repeating-linear-gradient(
        to bottom,
        var(--rev-border-strong) 0,
        var(--rev-border-strong) 4px,
        transparent 4px,
        transparent 8px
    );
}

.rev-panel-step-gap-label {
    font-size: 13px;
    font-style: italic;
    color: var(--rev-text-muted);
}

.rev-panel-step-gap-edit {
    display: flex;
    align-items: center;
    gap: 6px;
}

.rev-panel-step-gap-input {
    width: 56px;
    padding: 4px 6px;
    border: 1px solid var(--rev-border);
    border-radius: 4px;
    font-size: 13px;
    text-align: center;
    color: var(--rev-text-muted);
    background: transparent;
}

.rev-panel-step-gap-input:focus {
    border-color: var(--rev-primary);
    outline: none;
}

/* --- Time row --- */
.rev-panel-time-row {
    display: flex;
    align-items: center;
    gap: 8px;
}

.rev-panel-time-row i {
    font-size: 12px;
    color: var(--rev-text-muted);
}

/* --- Toggle row --- */
.rev-panel-toggle-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 8px 0;
}

/* --- Remove button --- */
.rev-panel-remove {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 24px;
    height: 24px;
    border: none;
    background: transparent;
    color: var(--rev-text-muted);
    font-size: 14px;
    cursor: pointer;
    border-radius: var(--rev-radius-sm);
    transition: background 150ms, color 150ms;
}

.rev-panel-remove:hover {
    background: rgba(239, 68, 68, 0.12);
    color: var(--rev-red);
}

/* --- Add service link --- */
.rev-panel-add-service {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 6px;
    padding: 8px 0;
}

/* --- Date row --- */
.rev-panel-date-row {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 13px;
    color: var(--rev-text-muted);
}

.rev-panel-date-row i {
    font-size: 14px;
}

/* --- Colour + staff row --- */
.rev-panel-colour-staff {
    display: flex;
    align-items: center;
    gap: 12px;
}

/* --- Mobile overrides (<=767px): bottom-sheet style --- */
@media (max-width: 767px) {
    .rev-panel {
        width: 100%;
        top: auto;
        bottom: 0;
        max-height: 95vh;
        border-radius: var(--rev-radius-lg) var(--rev-radius-lg) 0 0;
        transform: translateY(100%);
    }

    .rev-panel.open {
        transform: translateY(0);
    }

    /* Reduce panel body padding on mobile */
    .rev-panel-body {
        padding: 12px;
        gap: 12px;
    }

    /* Reduce section padding */
    .rev-panel-section {
        padding: 12px;
    }

    /* Service card padding */
    .rev-panel-service-card {
        padding: 12px;
    }

    /* Service meta: ensure time/duration fields don't overflow */
    .rev-panel-service-meta {
        display: grid;
        grid-template-columns: 1fr 1fr;
        gap: 8px;
    }

    .rev-panel-service-meta .input {
        width: 100%;
        min-width: 0;
        font-size: 13px;
    }

    /* Split timeline: more compact on mobile */
    .rev-panel-split {
        padding: 8px 0 8px 0;
    }

    .rev-panel-step {
        gap: 8px;
    }

    .rev-panel-step-content {
        min-width: 0;
        padding-bottom: 8px;
    }

    .rev-panel-step-label {
        font-size: 12px;
    }

    .rev-panel-step-time {
        font-size: 11px;
    }

    /* Prevent typeahead from overflowing in split steps */
    .rev-panel-step-content .blazored-typeahead {
        max-width: 100%;
    }

    /* Split step: contain stacking context so gap row sits cleanly below */
    .rev-panel-step {
        position: relative;
        z-index: 1;
    }

    .rev-panel-step-content {
        min-width: 0;
        padding-bottom: 4px;
        position: relative;
    }

    .rev-panel-step-gap {
        position: relative;
        z-index: 2;
        margin: 4px 0 8px;
        padding: 4px 0 4px 32px;
        background: var(--rev-surface-2);
    }

    .rev-panel-step-gap-line {
        display: none;
    }

    .rev-panel-step-gap-edit {
        gap: 8px;
    }

    .rev-panel-step-gap-label {
        font-size: 12px;
    }

    .rev-panel-step-gap-input {
        font-size: 12px;
    }

    /* Hide the extra "add more" input in split step typeahead when staff is already selected */
    .rev-panel-step-content .blazored-typeahead__input {
        height: 0;
        min-height: 0;
        padding: 0;
        margin: 0;
        border: none;
        opacity: 0;
        overflow: hidden;
    }

    /* Footer: stack on very narrow screens */
    .rev-panel-footer {
        padding: 10px 12px;
        flex-wrap: wrap;
        gap: 8px;
    }

    .rev-panel-footer-info {
        width: 100%;
        flex: none;
    }

    /* Make total duration stand out */
    .rev-panel-total-duration {
        font-size: 14px;
        font-weight: 700;
        color: var(--rev-text);
    }

    .rev-panel-footer-actions {
        width: 100%;
        display: flex;
        gap: 8px;
    }

    /* Fix button vertical centering */
    .rev-panel-footer-actions .button {
        flex: 1;
        min-width: 0;
        height: 44px;
        padding: 0 8px;
        font-size: 13px;
        display: flex;
        align-items: center;
        justify-content: center;
    }

    /* Header: tighten tabs on mobile */
    .rev-panel-header {
        padding: 10px 12px;
    }

    .rev-panel-tab {
        padding: 6px 10px;
        font-size: 12px;
    }

    /* Make date/time row stand out on mobile */
    .rev-panel-date-row {
        font-size: 13px;
        font-weight: 600;
        color: var(--rev-text);
    }

    /* Client stats wrap properly */
    .rev-panel-client-stats {
        gap: 10px;
    }

    /* Quick pick chips wrap better */
    .rev-panel-quick-picks {
        gap: 4px;
    }

    .rev-panel-chip {
        font-size: 11px;
        padding: 4px 8px;
    }

    /* Ensure all inputs and typeaheads respect container width */
    .rev-panel .input,
    .rev-panel .textarea,
    .rev-panel .blazored-typeahead {
        max-width: 100%;
        box-sizing: border-box;
    }

    /* Prevent flex shrinking so panel body scrolls instead of collapsing content */
    .rev-panel-body > * {
        flex-shrink: 0;
    }
}

/* --- Tablet overrides (768-1024px): 60% width --- */
@media (min-width: 768px) and (max-width: 1024px) {
    .rev-panel {
        width: 60%;
    }
}


/* ============================================================
   16. BUSY SPINNER (new classes — BusySpinner.razor updated)
   ============================================================ */

.rev-spinner-overlay {
    position: fixed;
    inset: 0;
    z-index: 9999;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(27, 29, 42, 0.75);
    backdrop-filter: blur(4px);
    -webkit-backdrop-filter: blur(4px);
}

.rev-spinner-ring {
    width: 48px;
    height: 48px;
    border-radius: 50%;
    border: 4px solid rgba(255, 255, 255, 0.1);
    border-top-color: var(--rev-accent);
    animation: rev-spin 0.75s linear infinite;
}


/* ============================================================
   17. TAB CONTROL
   ============================================================ */

.w-tab-menu {
    border-bottom: 1px solid var(--rev-border) !important;
}

.w-tab-menu .w-tab-link,
.tabs-menu .w-tab-link {
    font-family: var(--rev-font-body) !important;
    font-size: 13px !important;
    font-weight: 500 !important;
    color: var(--rev-text-muted) !important;
    border-bottom: 2px solid transparent !important;
    padding: 10px 16px !important;
    margin-bottom: -1px;
    background-color: transparent !important;
    border-radius: var(--rev-radius-sm) var(--rev-radius-sm) 0 0;
    transition: color var(--rev-transition), border-color var(--rev-transition),
                background-color var(--rev-transition) !important;
    background-image: none !important;
}

.w-tab-menu .w-tab-link:hover,
.tabs-menu .w-tab-link:hover {
    color: var(--rev-text) !important;
    background-color: rgba(255, 255, 255, 0.04) !important;
}

.w-tab-menu .w-tab-link.w--current,
.tabs-menu .w-tab-link.w--current,
.w-tab-menu .w-tab-link.rev--current,
.tabs-menu .w-tab-link.rev--current {
    color: var(--rev-accent) !important;
    border-bottom-color: var(--rev-accent) !important;
    background-color: transparent !important;
    font-weight: 600 !important;
}

/* Tab page icons */
.tab-link .fa-solid {
    margin-right: 6px;
    font-size: 13px;
    opacity: 0.75;
}

.tab-link.w--current .fa-solid,
.tab-link.rev--current .fa-solid {
    opacity: 1;
}


/* ============================================================
   18. FOOTER
   ============================================================ */

.footer {
    border-top: 1px solid var(--rev-border) !important;
    background-color: transparent !important;
    padding: 16px 0 !important;
    color: var(--rev-text-muted) !important;
    font-size: 12px !important;
    font-family: var(--rev-font-body);
}

.footer-link {
    color: var(--rev-text-muted) !important;
    transition: color var(--rev-transition);
}

.footer-link:hover {
    color: var(--rev-accent) !important;
}

@media (max-width: 767px) {
    .footer {
        display: none !important;
    }
}


/* ============================================================
   18b. HOME QUICK ACTIONS
   ============================================================ */

.rev-home-quick-actions {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
    gap: 14px;
    margin-top: 8px;
}

.rev-home-action-card {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 10px;
    padding: 24px 16px;
    background: var(--rev-gradient-card);
    border: 1px solid var(--rev-border-strong);
    border-radius: var(--rev-radius-lg);
    text-decoration: none;
    color: var(--rev-text);
    font-size: 13px;
    font-weight: 500;
    transition: transform 200ms ease, box-shadow 200ms ease, border-color 200ms ease;
}

.rev-home-action-card:hover {
    transform: translateY(-2px);
    box-shadow: var(--rev-shadow-hover);
    border-color: var(--rev-accent);
    color: var(--rev-text);
}

.rev-home-action-icon {
    width: 44px;
    height: 44px;
    border-radius: var(--rev-radius-md);
    background: rgba(230, 14, 137, 0.12);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 18px;
    color: var(--rev-accent);
}

.rev-home-action-icon.violet {
    background: var(--rev-violet-dim);
    color: var(--rev-violet);
}

.rev-home-action-icon.green {
    background: var(--rev-green-dim);
    color: var(--rev-green);
}

.rev-home-action-icon.amber {
    background: var(--rev-amber-dim);
    color: var(--rev-amber);
}

@media (max-width: 479px) {
    .rev-home-quick-actions {
        grid-template-columns: repeat(2, 1fr);
    }
}

/* ============================================================
   18c. EMPTY STATE
   ============================================================ */

.rev-empty-state {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
    padding: 48px 24px;
    gap: 8px;
}

.rev-empty-state .rev-empty-icon,
.rev-empty-state i.rev-empty-icon {
    font-size: 40px;
    color: var(--rev-text-muted);
    margin-bottom: 8px;
    opacity: 0.6;
}

.rev-empty-state h5 {
    font-size: 16px;
    font-weight: 600;
    color: var(--rev-text);
    margin: 0;
}

.rev-empty-state p {
    font-size: 13px;
    color: var(--rev-text-muted);
    margin: 0;
    max-width: 320px;
    line-height: 1.5;
}

.rev-empty-state-btn {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    margin-top: 12px;
    padding: 8px 20px;
    font-size: 13px;
    font-weight: 600;
    color: var(--rev-accent);
    border: 1.5px solid var(--rev-accent);
    border-radius: var(--rev-radius-md);
    text-decoration: none;
    transition: background-color 150ms ease, color 150ms ease;
}

.rev-empty-state-btn:hover {
    background: rgba(230, 14, 137, 0.1);
    color: var(--rev-accent);
}


/* ============================================================
   19. BLAZORED TOAST
   ============================================================ */

.blazored-toast-container {
    z-index: 1300 !important;
}

.blazored-toast-container .blazored-toast {
    border-radius: var(--rev-radius-md) !important;
    font-family: var(--rev-font-body) !important;
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.4) !important;
    border: 1px solid var(--rev-border-strong) !important;
}


/* ============================================================
   21. LOGIN PAGE (.single-layout)
   ============================================================ */

.single-layout {
    min-height: 100vh !important;
    background-color: var(--rev-body) !important;
}

.single-layout-row {
    display: flex;
    min-height: 100vh;
}

/* Left branded panel */
.single-layout-col.left {
    flex: 0 0 45%;
    background: linear-gradient(135deg, var(--rev-brand) 0%, var(--rev-surface-1) 100%) !important;
}

.single-layout-left {
    display: flex;
    flex-direction: column;
    justify-content: center;
    height: 100%;
    padding: 40px;
}

/* Right form panel */
.single-layout-col.right {
    flex: 1;
    background-color: var(--rev-body) !important;
    display: flex;
    align-items: center;
    justify-content: center;
}

.single-layout-right {
    background-color: var(--rev-body) !important;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 100%;
    min-height: 100vh;
}

.single-layout-right-content {
    background-color: var(--rev-surface-1) !important;
    border-radius: var(--rev-radius-lg) !important;
    border: 1px solid var(--rev-border-strong) !important;
    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.45) !important;
    padding: 40px !important;
    width: 100%;
    max-width: 420px;
}

/* Hide left panel on mobile */
@media (max-width: 767px) {
    .single-layout-col.left {
        display: none !important;
    }
    .single-layout-col.right {
        width: 100% !important;
        padding: 20px !important;
    }
    .single-layout-right {
        padding: 0 !important;
    }
    .single-layout-right-content {
        padding: 28px 24px !important;
        box-shadow: none !important;
        border: none !important;
    }
}


/* ============================================================
   22. MOBILE RESPONSIVE SIDEBAR — SMOOTH DRAWER
   ============================================================ */

@media screen and (max-width: 1024px) {
    /* Slide sidebar off-screen by default */
    .sidebar-navbar-menu {
        transform: translateX(-100%);
        transition: transform 300ms cubic-bezier(0.4, 0, 0.2, 1);
        will-change: transform;
        position: fixed !important;
        top: 0 !important;
        left: 0 !important;
        height: 100vh !important;
        z-index: 9000 !important;
        width: 260px !important;
    }

    /* Webflow sets data-nav-menu-open on the .w-nav element when hamburger is tapped */
    [data-nav-menu-open] .sidebar-navbar-menu {
        transform: translateX(0);
        display: flex !important; /* override webflow's display:none on .w-nav[data-collapse="medium"] .w-nav-menu */
    }

    /* Semi-transparent backdrop */
    .sidebar-navbar-menu::before {
        content: '';
        position: fixed;
        inset: 0;
        background: rgba(0, 0, 0, 0.55);
        z-index: -1;
        opacity: 0;
        transition: opacity 300ms ease;
        pointer-events: none;
    }

    [data-nav-menu-open] .sidebar-navbar-menu::before {
        opacity: 1;
        pointer-events: auto;
    }

    /* Hide the desktop accent line pseudo-element */
    .sidebar-navbar-menu::after {
        display: none !important;
    }
}

@media screen and (max-width: 479px) {
    .sidebar-navbar-link {
        min-height: 52px !important;
        font-size: 15px !important;
    }

    .page-heading h2,
    .page-heading h1 {
        font-size: 18px !important;
    }

    .app-main-layout-wrapper.header {
        padding-top: 16px !important;
        padding-bottom: 12px !important;
    }
}


/* ============================================================
   23. ANIMATIONS
   ============================================================ */

/* --- Page content fade-in on navigation --- */
.app-main-layout {
    /* animation removed — it created a containing block that broke position:fixed for FAB/overlay */
}

@keyframes rev-page-in {
    from {
        opacity: 0;
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* --- Spinner rotation --- */
@keyframes rev-spin {
    to { transform: rotate(360deg); }
}

/* --- Modal slide-up + fade on open --- */
.rev-modal-container {
    animation: rev-modal-in 180ms cubic-bezier(0.4, 0, 0.2, 1) both;
}

@keyframes rev-modal-in {
    from {
        opacity: 0;
        transform: translateY(16px) scale(0.98);
    }
    to {
        opacity: 1;
        transform: translateY(0) scale(1);
    }
}

.rev-modal-mask {
    animation: rev-fade-in 180ms ease both;
}

@keyframes rev-fade-in {
    from { opacity: 0; }
    to   { opacity: 1; }
}

/* --- Card entrance stagger --- */
.card {
    animation: rev-card-in 200ms cubic-bezier(0.4, 0, 0.2, 1) both;
}

@keyframes rev-card-in {
    from {
        opacity: 0;
    }
    to {
        opacity: 1;
    }
}

.card:nth-child(1)  { animation-delay: 0ms; }
.card:nth-child(2)  { animation-delay: 40ms; }
.card:nth-child(3)  { animation-delay: 80ms; }
.card:nth-child(4)  { animation-delay: 120ms; }
.card:nth-child(n+5){ animation-delay: 160ms; }

/* --- Table row entrance stagger --- */
.row.table-row {
    animation: rev-card-in 150ms cubic-bezier(0.4, 0, 0.2, 1) both;
}

.row.table-row:nth-child(1)  { animation-delay: 0ms; }
.row.table-row:nth-child(2)  { animation-delay: 20ms; }
.row.table-row:nth-child(3)  { animation-delay: 40ms; }
.row.table-row:nth-child(4)  { animation-delay: 60ms; }
.row.table-row:nth-child(5)  { animation-delay: 80ms; }
.row.table-row:nth-child(n+6){ animation-delay: 100ms; }


/* ============================================================
   24. MISC REFINEMENTS
   ============================================================ */

/* Search input in pages */
.searchinput,
input[type="search"].w-input {
    background-color: var(--rev-surface-2) !important;
    border-color: var(--rev-border-strong) !important;
    border-radius: var(--rev-radius-sm) !important;
    color: var(--rev-text) !important;
}

.searchinput:focus,
input[type="search"].w-input:focus {
    border-color: var(--rev-accent) !important;
    box-shadow: 0 0 0 3px rgba(230, 14, 137, 0.15) !important;
}

/* Validation errors */
.validation-error,
.field-validation-error,
span.text-danger {
    color: #f87171 !important;
    font-size: 12px;
    font-family: var(--rev-font-body);
}

/* Hint / helper text */
.hint {
    color: var(--rev-text-muted) !important;
    font-family: var(--rev-font-body);
    font-size: 12px;
}

/* Links */
a.custom-link,
a.link {
    color: var(--rev-accent) !important;
    transition: color var(--rev-transition);
}

a.custom-link:hover,
a.link:hover {
    color: var(--rev-brand) !important;
}

/* Dividers */
.divider,
.section-divider {
    border-color: var(--rev-border) !important;
}

/* Error boundary message */
.error-message {
    color: #f87171;
    font-family: var(--rev-font-body);
    padding: 20px;
    text-align: center;
}

/* Form validation error banner — hidden by default, shown via rev-form-fail-show */
.rev-form-fail { display: none; }
.rev-form-fail-show { display: block; }


/* ============================================================
   24b. ROW EXPAND / COLLAPSE
   ============================================================ */

/* Toggle header — inline row that opens a sub-panel */
.rev-row-expand-toggle {
    position: relative;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    cursor: pointer;
    user-select: none;
}

.rev-row-expand-chevron {
    font-size: 10px;
    color: var(--rev-text-muted);
    transition: transform 200ms ease;
}

.rev-row-expand-toggle.is-open .rev-row-expand-chevron {
    transform: rotate(180deg);
}

/* Expandable panel — hidden by default, shown when is-open */
.rev-row-expand-panel {
    display: none;
}

.rev-row-expand-panel.is-open {
    display: block;
}

/* ============================================================
   24c. FILTER DROPDOWN (inline page filter)
   ============================================================ */

.rev-filter-dropdown {
    position: relative;
    display: inline-block;
}

.rev-filter-dropdown-toggle {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    cursor: pointer;
}

.rev-filter-dropdown-toggle .rev-row-expand-chevron {
    transition: transform 200ms ease;
}

.rev-filter-dropdown-toggle.is-open .rev-row-expand-chevron {
    transform: rotate(180deg);
}

.rev-filter-dropdown-list {
    display: none;
    position: absolute;
    top: calc(100% + 4px);
    left: 0;
    background: var(--rev-surface-2);
    border: 1px solid var(--rev-border-strong);
    border-radius: var(--rev-radius-md);
    min-width: 140px;
    z-index: 200;
    box-shadow: 0 4px 16px rgba(0,0,0,0.3);
}

.rev-filter-dropdown-list.is-open {
    display: block;
}

.rev-filter-dropdown-link {
    display: block;
    padding: 8px 14px;
    color: var(--rev-text);
    font-size: 13px;
    text-decoration: none;
    transition: background-color 150ms ease;
}

.rev-filter-dropdown-link:hover {
    background: var(--rev-surface-3);
    color: var(--rev-text);
}

/* ============================================================
   25. SEARCH PANEL (list pages)
   ============================================================ */

.rev-search-panel {
    background-color: var(--rev-surface-2);
    border: 1px solid var(--rev-border-strong);
    border-radius: var(--rev-radius-md);
    padding: 14px 16px;
    margin-bottom: 14px;
    box-shadow: var(--rev-shadow-card);
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.rev-search-row {
    display: flex;
    align-items: center;
    gap: 10px;
    flex-wrap: wrap;
}

.rev-search-row .searchinput {
    flex: 1;
    min-width: 160px;
}

.rev-filter-row {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
    padding-top: 10px;
    border-top: 1px solid var(--rev-border);
}

.rev-filter-label {
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.6px;
    text-transform: uppercase;
    color: var(--rev-text-muted);
    margin-right: 4px;
    white-space: nowrap;
}

.rev-filter-sep {
    flex: 1;
}


/* ============================================================
   26. DATA TABLE CARD (single-card list view)
   ============================================================ */

.rev-data-card {
    background-color: var(--rev-surface-2);
    border-radius: var(--rev-radius-md);
    border: 1px solid var(--rev-border-strong);
    box-shadow: var(--rev-shadow-card);
    margin-bottom: 16px;
    overflow: visible;
}

.rev-data-card-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 14px 20px;
    border-bottom: 1px solid var(--rev-border);
}

.rev-data-card-title {
    font-size: 13px;
    font-weight: 600;
    font-family: var(--rev-font-display);
    color: var(--rev-text);
}

.rev-data-card-count {
    font-size: 12px;
    color: var(--rev-text-muted);
}

/* List container: flex column with gap between cards */
.rev-data-card [role="list"] {
    display: flex;
    flex-direction: column;
    gap: 8px;
    padding: 12px;
}

/* Each row = its own mini-card */
.rev-data-card [role="listitem"] {
    background: var(--rev-surface-3);
    border-radius: var(--rev-radius-md);
    border: 1px solid var(--rev-border-strong);
    box-shadow: var(--rev-shadow-card);
    transition: transform 150ms ease, box-shadow 150ms ease, border-color 150ms ease;
    cursor: pointer;
    overflow: hidden;
}

.rev-data-card [role="listitem"]:hover {
    transform: translateY(-2px);
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.5), 0 0 0 1px var(--rev-accent);
    border-color: var(--rev-accent);
}

.rev-data-card [role="listitem"] .row.table-row {
    animation: none;
    text-align: left !important;
    padding: 12px 16px !important;
    min-height: 72px !important;
    border-bottom: none !important;
}

/* Column header row inside data card — offset to align with list rows (12px list padding + 16px row padding) */
.rev-data-card .row.table-row.table-header {
    padding-left: 28px !important;
    padding-right: 28px !important;
}
/* Avatar (first col) and Status (last col) stay centred */
.rev-data-card [role="listitem"] .row.table-row > [class*="w-col"]:first-child,
.rev-data-card [role="listitem"] .row.table-row > [class*="w-col"]:last-child {
    text-align: center !important;
}
/* contact-profile-info: always left-aligned */
.rev-data-card .contact-profile-info {
    text-align: left !important;
}

/* Avatar size */
.contacts-avatar {
    width: 44px !important;
    height: 44px !important;
    border-radius: 50% !important;
    object-fit: cover;
}


/* ============================================================
   27. EMPTY STATE
   ============================================================ */

.rev-empty-state {
    text-align: center;
    padding: 60px 24px;
    color: var(--rev-text-muted);
}

.rev-empty-state .rev-empty-icon {
    font-size: 38px;
    opacity: 0.22;
    margin-bottom: 16px;
    display: block;
}

.rev-empty-state h5 {
    font-size: 15px;
    font-weight: 600;
    color: var(--rev-text);
    margin-bottom: 8px;
}

.rev-empty-state p {
    font-size: 13px;
    color: var(--rev-text-muted);
    margin-bottom: 20px;
}


/* ============================================================
   28. PAGINATION
   ============================================================ */

.rev-pagination {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 12px;
    padding: 14px 20px;
    border-top: 1px solid var(--rev-border);
}

.rev-page-nav {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    height: 34px;
    padding: 0 14px;
    border-radius: var(--rev-radius-sm);
    background-color: transparent;
    border: 1px solid var(--rev-border-strong);
    color: var(--rev-text-muted);
    font-size: 12px;
    font-weight: 600;
    font-family: var(--rev-font-body);
    cursor: pointer;
    transition: background-color var(--rev-transition), color var(--rev-transition), border-color var(--rev-transition);
    white-space: nowrap;
}

.rev-page-nav:hover:not(:disabled) {
    background-color: rgba(255, 255, 255, 0.06);
    color: var(--rev-text);
}

.rev-page-nav:disabled {
    opacity: 0.35;
    cursor: not-allowed;
}

.rev-page-info {
    display: flex;
    align-items: center;
    gap: 8px;
    color: var(--rev-text-muted);
    font-size: 13px;
    font-weight: 500;
    font-family: var(--rev-font-body);
}

.rev-page-info-label {
    white-space: nowrap;
}

.rev-page-input {
    width: 52px;
    height: 34px;
    border-radius: var(--rev-radius-sm);
    border: 1px solid var(--rev-border-strong);
    background-color: var(--rev-surface-2);
    color: var(--rev-text);
    font-size: 13px;
    font-weight: 600;
    font-family: var(--rev-font-body);
    text-align: center;
    padding: 0 6px;
    -moz-appearance: textfield;
}

.rev-page-input::-webkit-inner-spin-button,
.rev-page-input::-webkit-outer-spin-button {
    -webkit-appearance: none;
    margin: 0;
}

.rev-page-input:focus {
    outline: none;
    border-color: var(--rev-accent);
}


/* ============================================================
   29. CARD SECTION LABELS (detail pages + dashboard)
   ============================================================ */

.rev-card-section {
    border-color: var(--rev-border-strong) !important;
}

.rev-card-section-label {
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.7px;
    text-transform: uppercase;
    color: var(--rev-text-muted);
    padding: 12px 20px;
    border-bottom: 1px solid var(--rev-border);
    font-family: var(--rev-font-body);
    margin-bottom: 0 !important;
    display: block;
}

/* Card heading with bottom border — makes dashboard chart cards clearly delineated */
.card > .card-heading,
.card > .card-heading.center {
    border-bottom: 1px solid var(--rev-border) !important;
    padding-bottom: 12px !important;
    margin-bottom: 16px !important;
}


/* ============================================================
   30. LIST PAGE POLISH & RESPONSIVE
   ============================================================ */

/* ---- Modern pill sort buttons ----
   Override the legacy segmented-control `.switcher-tab` style
   when it appears inside a .rev-filter-row                      */

.rev-filter-row .switcher-tab,
.rev-filter-row .switcher-tab.left,
.rev-filter-row .switcher-tab.right {
    min-width: unset !important;
    padding: 0 12px !important;
    height: 28px !important;
    line-height: 28px !important;
    border-radius: 20px !important;
    border: 1px solid var(--rev-border-strong) !important;
    background-color: transparent !important;
    color: var(--rev-text-muted) !important;
    font-size: 11px !important;
    font-weight: 600 !important;
    letter-spacing: 0.3px;
    font-family: var(--rev-font-body) !important;
    transition: background-color 0.15s ease, color 0.15s ease, border-color 0.15s ease !important;
    cursor: pointer;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    text-decoration: none !important;
    white-space: nowrap;
}

.rev-filter-row .switcher-tab > div {
    color: inherit !important;
    font-size: inherit !important;
    font-weight: inherit !important;
}

.rev-filter-row .switcher-tab:hover,
.rev-filter-row .switcher-tab.left:hover,
.rev-filter-row .switcher-tab.right:hover {
    background-color: rgba(255, 255, 255, 0.08) !important;
    color: var(--rev-text) !important;
    border-color: rgba(255, 255, 255, 0.22) !important;
    text-decoration: none !important;
}

.rev-filter-row .switcher-tab.w--current,
.rev-filter-row .switcher-tab.rev--current {
    background-color: var(--rev-accent) !important;
    border-color: var(--rev-accent) !important;
    color: #fff !important;
    box-shadow: 0 2px 8px rgba(230, 14, 137, 0.30) !important;
}

/* Onboarding step indicator rev--current alias */
.onboarding-steps.rev--current {
    background-image: url('../images/step-line.svg'), url('../images/step-active.svg');
    color: #e60e89;
}

.onboarding-steps.last.rev--current {
    background-image: url('../images/step-active.svg');
}


/* ---- Search row: prevent + button expanding full-width ---- */
.rev-search-row .button,
.rev-search-row a.button {
    flex-shrink: 0 !important;
    width: auto !important;
}



/* ============================================================
   31. MOBILE RESPONSIVE (list pages ≤ 767px)
   ============================================================ */

@media screen and (max-width: 767px) {

    /* ---- Search panel ---- */

    .rev-search-row {
        flex-wrap: nowrap !important;
        gap: 8px !important;
    }
    .rev-search-row .searchinput {
        flex: 1 !important;
        min-width: 0 !important;
    }

    /* + Add button → pink circle with + icon. 44px both ways: the global mobile
       `.button { min-height: 44px }` touch-target rule would stretch a 40px
       circle into a 40×44 oval. */
    .rev-search-row .button.button-primary.searchadd {
        font-size: 0 !important;
        width: 44px !important;
        min-width: 44px !important;
        max-width: 44px !important;
        height: 44px !important;
        padding: 0 !important;
        border-radius: 50% !important;
        display: inline-flex !important;
        align-items: center !important;
        justify-content: center !important;
        flex-shrink: 0 !important;
    }
    .rev-search-row .button.button-primary.searchadd::after {
        content: '+';
        font-size: 24px;
        font-weight: 600;
        color: #fff;
        line-height: 1;
    }

    /* Clear button → muted circle with × icon (44px — see searchadd note) */
    .rev-search-row .button.button-outline {
        font-size: 0 !important;
        width: 44px !important;
        min-width: 44px !important;
        max-width: 44px !important;
        height: 44px !important;
        padding: 0 !important;
        border-radius: 50% !important;
        display: inline-flex !important;
        align-items: center !important;
        justify-content: center !important;
        flex-shrink: 0 !important;
    }
    .rev-search-row .button.button-outline::after {
        content: '×';
        font-size: 20px;
        font-weight: 400;
        color: inherit;
        line-height: 1;
    }

    /* Sort pills: tighten gap on mobile */
    .rev-filter-row {
        gap: 6px !important;
    }

    /* The trailing checkbox ("Show Inactive" etc.) gets its own line on
       phones — when the sort chips wrap, the last chip and the checkbox
       otherwise share a ragged, misaligned second row. */
    .rev-filter-row .rev-filter-checkbox {
        flex-basis: 100%;
    }

    /* ---- Data table: stacked card rows ---- */

    /* Hide column header row on mobile */
    .rev-data-card .row.table-row.table-header {
        display: none !important;
    }

    /* Row → CSS Grid: [48px avatar] [1fr content] [auto status] */
    .rev-data-card [role="listitem"] .row.table-row {
        display: grid !important;
        grid-template-columns: 48px 1fr auto !important;
        padding: 12px 14px !important;
        gap: 2px 10px !important;
        border-bottom: none !important;
        min-height: unset !important;
        align-items: start !important;
    }

    /* Reset all webflow w-col float/width stacking */
    .rev-data-card [role="listitem"] .row.table-row > [class*="w-col"] {
        width: auto !important;
        float: none !important;
        left: auto !important;
        right: auto !important;
        clear: none !important;
        padding: 0 !important;
    }

    /* Avatar col (1st): grid-column 1, row 1, vertically centred */
    .rev-data-card [role="listitem"] .row.table-row > [class*="w-col"]:first-child {
        grid-column: 1 !important;
        grid-row: 1 !important;
        align-self: center !important;
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
    }

    /* Name col (2nd): grid-column 2, row 1 */
    .rev-data-card [role="listitem"] .row.table-row > [class*="w-col"]:nth-child(2) {
        grid-column: 2 !important;
        grid-row: 1 !important;
        text-align: left !important;
        overflow: hidden;
    }

    /* Status col (last): grid-column 3, row 1 */
    .rev-data-card [role="listitem"] .row.table-row > [class*="w-col"]:last-child {
        grid-column: 3 !important;
        grid-row: 1 !important;
        text-align: right !important;
        align-self: start !important;
    }

    /* Middle cols (Tags, Phone, Address…): span cols 2–3, auto-placed rows */
    .rev-data-card [role="listitem"] .row.table-row > [class*="w-col"]:not(:first-child):not(:nth-child(2)):not(:last-child) {
        grid-column: 2 / span 2 !important;
        grid-row: auto !important;
        text-align: left !important;
        font-size: 12px !important;
        color: var(--rev-text-muted) !important;
        padding-top: 2px !important;
    }

    /* Truncate long names */
    .rev-data-card [role="listitem"] .row.table-row h6 {
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
    }

    /* Status badge: slightly compact on mobile */
    .rev-data-card [role="listitem"] .status {
        font-size: 10px !important;
        padding: 2px 8px !important;
    }

    /* ---- New rev-col table rows (avatar merged into name col) ---- */
    /* Override grid layout for rows that use .col.table-col children */
    .rev-data-card [role="listitem"] .row.table-row:has(> .col.table-col) {
        display: flex !important;
        flex-direction: row !important;
        align-items: center !important;
        padding: 10px 14px !important;
        gap: 0 !important;
    }
    /* Hide all table-col cells by default */
    .rev-data-card [role="listitem"] .row.table-row > .col.table-col {
        display: none !important;
    }
    /* Show first col (name + avatar) */
    .rev-data-card [role="listitem"] .row.table-row > .col.table-col:first-child {
        display: flex !important;
        flex: 1 !important;
        min-width: 0 !important;
        align-items: center !important;
        text-align: left !important;
        overflow: hidden !important;
    }
    /* Inner flex wrapper and name info must also constrain width */
    .rev-data-card [role="listitem"] .row.table-row > .col.table-col:first-child > div {
        min-width: 0;
        overflow: hidden;
    }
    .rev-data-card [role="listitem"] .row.table-row > .col.table-col:first-child .contact-profile-info {
        min-width: 0;
        overflow: hidden;
    }
    /* Show last col (status badge) */
    .rev-data-card [role="listitem"] .row.table-row > .col.table-col:last-child {
        display: flex !important;
        flex: 0 0 auto !important;
        align-items: center !important;
        justify-content: flex-end !important;
    }

    /* Mobile row sub-line: key hidden-column values (date · client · amount)
       shown as a muted second line under the row title. Desktop keeps the
       real columns and hides this span (default rule outside this block). */
    .rev-data-card [role="listitem"] .row.table-row .tc-mobile-sub {
        display: block;
        font-size: 11px;
        color: var(--rev-text-muted);
        margin-top: 2px;
        text-align: left;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
    }
    .rev-data-card [role="listitem"] .row.table-row .tc-name-wrap {
        display: flex;
        flex-direction: column;
        align-items: flex-start;
        min-width: 0;
        overflow: hidden;
        text-align: left;
    }

    /* Sort/filter pills: taller tap target on touch (28px is too tight) */
    .rev-filter-row .switcher-tab,
    .rev-filter-row .switcher-tab.left,
    .rev-filter-row .switcher-tab.right {
        height: 34px !important;
        line-height: 34px !important;
    }

    /* Pagination: hide text labels on mobile, keep icon-only buttons */
    .rev-page-nav-label {
        display: none;
    }

    .rev-page-nav {
        padding: 0 10px !important;
    }

    .rev-page-info {
        font-size: 12px !important;
        gap: 6px !important;
    }

    .rev-page-input {
        width: 44px !important;
        height: 36px !important;
    }

    .rev-page-nav {
        height: 36px !important;
        min-width: 36px !important;
    }
}

/* Mobile-only row sub-line — hidden on desktop (real columns shown there) */
.tc-mobile-sub {
    display: none;
}

/* ============================================================
   AUTH PAGES (Login, Register, Forgot/Reset Password)
   ============================================================ */

.auth-layout {
    display: flex;
    min-height: 100vh;
    background: var(--rev-surface-1);
    font-family: var(--rev-font-body);
}

/* Left brand panel */
.auth-panel-left {
    width: 38%;
    flex-shrink: 0;
    background: linear-gradient(160deg, #1a1c2b 0%, #161827 100%);
    border-right: 2px solid transparent;
    border-image: linear-gradient(180deg, var(--rev-accent) 0%, var(--rev-brand) 100%) 1;
    display: flex;
    flex-direction: column;
    justify-content: center;
    padding: 60px 48px;
    position: relative;
    overflow: hidden;
}

.auth-panel-left::before {
    content: '';
    position: absolute;
    top: -120px;
    right: -80px;
    width: 320px;
    height: 320px;
    border-radius: 50%;
    background: radial-gradient(circle, rgba(230, 14, 137, 0.08) 0%, transparent 70%);
    pointer-events: none;
}

.auth-panel-left::after {
    content: '';
    position: absolute;
    bottom: -80px;
    left: -60px;
    width: 240px;
    height: 240px;
    border-radius: 50%;
    background: radial-gradient(circle, rgba(185, 0, 106, 0.06) 0%, transparent 70%);
    pointer-events: none;
}

.auth-panel-left .auth-logo {
    display: block;
    margin-bottom: 48px;
}

.auth-panel-left h2 {
    font-family: var(--rev-font-display);
    font-size: 26px;
    font-weight: 700;
    color: var(--rev-text);
    margin: 0 0 14px 0;
    line-height: 1.2;
}

.auth-panel-left p {
    font-size: 15px;
    color: var(--rev-text-muted);
    margin: 0 0 28px 0;
    line-height: 1.6;
}

/* Right form panel */
.auth-panel-right {
    flex: 1;
    background: var(--rev-surface-2);
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 60px 48px;
    overflow-y: auto;
}

.auth-form-card {
    width: 100%;
    max-width: 420px;
    animation: rev-fade-in 200ms var(--rev-transition) both;
}

.auth-logo-right {
    text-align: center;
    margin-bottom: 28px;
}

.auth-logo-right img {
    width: 64px;
    height: auto;
}

.auth-title {
    font-family: var(--rev-font-display);
    font-size: 22px;
    font-weight: 700;
    color: var(--rev-text);
    text-align: center;
    margin: 0 0 28px 0;
}

.auth-subtitle {
    font-size: 13px;
    color: var(--rev-text-muted);
    text-align: right;
    margin-bottom: 28px;
}

.auth-subtitle a {
    color: var(--rev-accent);
    text-decoration: none;
    font-weight: 600;
}

.auth-subtitle a:hover {
    text-decoration: underline;
}

.auth-label {
    display: block;
    font-size: 11px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.7px;
    color: var(--rev-text-muted);
    margin-bottom: 6px;
}

.auth-form-card .form-group {
    margin-bottom: 18px;
}

.auth-form-card .input,
.auth-form-card .w-input {
    width: 100%;
    box-sizing: border-box;
}

.auth-form-card .button-block {
    width: 100%;
    margin-top: 8px;
    height: 44px;
    font-size: 15px;
    font-weight: 600;
}

.auth-hint {
    text-align: center;
    margin-top: 16px;
    font-size: 13px;
    color: var(--rev-text-muted);
}

.auth-hint a {
    color: var(--rev-accent);
    text-decoration: none;
    font-weight: 500;
}

.auth-hint a:hover {
    text-decoration: underline;
}

/* Validation error */
.auth-form-card .validation-error {
    background: rgba(248, 113, 113, 0.08);
    border: 1px solid rgba(248, 113, 113, 0.25);
    border-radius: var(--rev-radius-sm);
    padding: 10px 14px;
    font-size: 13px;
    color: #f87171;
    margin-bottom: 18px;
}

.auth-form-card .text-danger {
    display: block;
    font-size: 12px;
    color: #f87171;
    margin-top: 4px;
}

/* Quick-select saved users */
.auth-quick-select {
    margin-bottom: 20px;
}

.auth-account-item {
    display: flex;
    align-items: center;
    gap: 12px;
    background: var(--rev-surface-3);
    border: 1px solid var(--rev-border);
    border-radius: var(--rev-radius-md);
    padding: 10px 14px;
    margin-bottom: 8px;
    cursor: pointer;
    transition: var(--rev-transition);
    text-decoration: none;
}

.auth-account-item:hover {
    border-color: var(--rev-accent);
    transform: translateY(-1px);
    box-shadow: 0 4px 12px rgba(230, 14, 137, 0.12);
}

.auth-account-item .auth-account-icon {
    width: 32px;
    height: 32px;
    border-radius: 50%;
    background: rgba(230, 14, 137, 0.12);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 14px;
    color: var(--rev-accent);
    flex-shrink: 0;
}

.auth-account-item .auth-account-email {
    font-size: 13px;
    font-weight: 500;
    color: var(--rev-text);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* Description text below form (e.g. ForgotPassword) */
.auth-description {
    font-size: 14px;
    color: var(--rev-text-muted);
    text-align: center;
    margin-bottom: 24px;
    line-height: 1.6;
}

/* Responsive: stack panels on tablet and mobile */
@media (max-width: 1024px) {
    .auth-layout {
        flex-direction: column;
    }

    .auth-panel-left {
        display: none;
    }

    .auth-panel-left h2 {
        font-size: 22px;
    }

    .auth-panel-right {
        padding: 40px 20px;
    }
}


/* ============================================================
   26. MICRO-INTERACTIONS
   ============================================================ */

/* Button press depress */
.button:active,
.button-primary:active,
.button-outline:active,
.w-button:active,
[class*="button"]:active {
    transform: scale(0.97);
    transition: transform 80ms ease;
}

/* Input focus glow */
.w-input:focus,
input[type="text"]:focus,
input[type="email"]:focus,
input[type="password"]:focus,
input[type="number"]:focus,
input[type="tel"]:focus,
textarea:focus,
select:focus,
.rev-input:focus {
    outline: none;
    border-color: var(--rev-accent) !important;
    box-shadow: var(--rev-glow-pink) !important;
    transition: box-shadow 150ms ease, border-color 150ms ease;
}

/* Card hover lift */
.rev-data-card {
    transition: transform 200ms cubic-bezier(0.4, 0, 0.2, 1), box-shadow 200ms cubic-bezier(0.4, 0, 0.2, 1);
}

/* Nav items: stable left border for layout, accent on active/hover */
.sidebar-navbar-link,
.sidebar-nav-link,
.sidebar-dropdown-link,
a[class*="sidebar-nav"] {
    border-left: 3px solid transparent !important;
    transition: border-color 150ms ease, background-color 150ms ease, color 150ms ease !important;
}

.sidebar-navbar-link.w--current,
.sidebar-navbar-link.active,
.sidebar-nav-link.w--current,
.sidebar-dropdown-link.w--current,
a[class*="sidebar-nav"].w--current {
    border-left-color: var(--rev-accent) !important;
    box-shadow: inset 3px 0 12px rgba(230, 14, 137, 0.12) !important;
}

/* rev-sidebar-link active border is handled inline in section 4 above */

/* Table row hover: lift + left accent line via ::before */
.table-row.w-row {
    position: relative;
    overflow: hidden;
    transition: background-color 150ms ease, transform 150ms ease;
    cursor: pointer;
}

.table-row.w-row::before {
    content: '';
    position: absolute;
    left: 0;
    top: 0;
    bottom: 0;
    width: 3px;
    background: var(--rev-accent);
    transform: scaleY(0);
    transform-origin: center;
    transition: transform 150ms cubic-bezier(0.4, 0, 0.2, 1);
    border-radius: 0 2px 2px 0;
}

.table-row.w-row:hover::before {
    transform: scaleY(1);
}

.table-row.w-row:hover {
    background-color: rgba(230, 14, 137, 0.04) !important;
    transform: translateX(2px);
}


/* ============================================================
   27. STAGGER ANIMATIONS — EXTENDED TO 12 ROWS
   ============================================================ */

@keyframes rev-row-in {
    from {
        opacity: 0;
        transform: translateY(8px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.rev-table-row-0  { animation: rev-row-in 280ms cubic-bezier(0.34, 1.56, 0.64, 1) 0ms   both; }
.rev-table-row-1  { animation: rev-row-in 280ms cubic-bezier(0.34, 1.56, 0.64, 1) 30ms  both; }
.rev-table-row-2  { animation: rev-row-in 280ms cubic-bezier(0.34, 1.56, 0.64, 1) 60ms  both; }
.rev-table-row-3  { animation: rev-row-in 280ms cubic-bezier(0.34, 1.56, 0.64, 1) 90ms  both; }
.rev-table-row-4  { animation: rev-row-in 280ms cubic-bezier(0.34, 1.56, 0.64, 1) 120ms both; }
.rev-table-row-5  { animation: rev-row-in 280ms cubic-bezier(0.34, 1.56, 0.64, 1) 150ms both; }
.rev-table-row-6  { animation: rev-row-in 280ms cubic-bezier(0.34, 1.56, 0.64, 1) 180ms both; }
.rev-table-row-7  { animation: rev-row-in 280ms cubic-bezier(0.34, 1.56, 0.64, 1) 210ms both; }
.rev-table-row-8  { animation: rev-row-in 280ms cubic-bezier(0.34, 1.56, 0.64, 1) 240ms both; }
.rev-table-row-9  { animation: rev-row-in 280ms cubic-bezier(0.34, 1.56, 0.64, 1) 270ms both; }
.rev-table-row-10 { animation: rev-row-in 280ms cubic-bezier(0.34, 1.56, 0.64, 1) 300ms both; }
.rev-table-row-11 { animation: rev-row-in 280ms cubic-bezier(0.34, 1.56, 0.64, 1) 330ms both; }


/* ============================================================
   28. DASHBOARD KPI STAT CARDS
   ============================================================ */

.rev-kpi-row {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
    gap: 16px;
    margin-bottom: 24px;
}

@keyframes rev-stat-card-in {
    from {
        opacity: 0;
    }
    to {
        opacity: 1;
    }
}

.rev-stat-card {
    background: var(--rev-gradient-card);
    border: 1px solid var(--rev-border-strong);
    border-radius: var(--rev-radius-lg);
    padding: 20px;
    display: flex;
    flex-direction: column;
    gap: 12px;
    transition: transform 200ms ease, box-shadow 200ms ease;
}

.rev-stat-card:hover {
    transform: translateY(-2px);
    box-shadow: var(--rev-shadow-hover);
}

.rev-stat-top {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 12px;
}

.rev-stat-icon {
    width: 40px;
    height: 40px;
    border-radius: var(--rev-radius-md);
    background: rgba(230, 14, 137, 0.12);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 16px;
    color: var(--rev-accent);
    flex-shrink: 0;
}

.rev-stat-icon.violet {
    background: var(--rev-violet-dim);
    color: var(--rev-violet);
}

.rev-stat-icon.amber {
    background: var(--rev-amber-dim);
    color: var(--rev-amber);
}

.rev-stat-icon.green {
    background: var(--rev-green-dim);
    color: var(--rev-green);
}

.rev-stat-icon.red {
    background: var(--rev-red-dim);
    color: var(--rev-red);
}

.rev-stat-body {
    display: flex;
    flex-direction: column;
    gap: 2px;
    flex: 1;
}

.rev-stat-label {
    font-size: 12px;
    font-weight: 500;
    color: var(--rev-text-muted);
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

.rev-stat-value {
    font-size: 28px;
    font-weight: 700;
    letter-spacing: -0.5px;
    color: var(--rev-text);
    line-height: 1.1;
    margin-top: 4px;
}

@keyframes rev-trend-in {
    from {
        opacity: 0;
        transform: translateY(4px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.rev-stat-trend {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    font-size: 12px;
    font-weight: 600;
    margin-top: 4px;
    animation: rev-trend-in 300ms ease 400ms both;
}

.rev-stat-trend.up {
    color: var(--rev-amber);
}

.rev-stat-trend.down {
    color: var(--rev-red);
}

.rev-stat-trend.neutral {
    color: var(--rev-text-muted);
}

.rev-stat-bar {
    height: 4px;
    border-radius: 2px;
    background: var(--rev-border-strong);
    overflow: hidden;
}

@keyframes rev-bar-in {
    from { width: 0; }
}

.rev-stat-bar-fill {
    height: 100%;
    width: var(--fill, 0%);
    border-radius: 2px;
    background: linear-gradient(90deg, var(--rev-brand), var(--rev-accent));
    animation: rev-bar-in 800ms cubic-bezier(0.4, 0, 0.2, 1) 300ms both;
}

/* Responsive KPI grid */
@media (max-width: 1024px) {
    .rev-kpi-row {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (max-width: 767px) {
    .rev-kpi-row {
        grid-template-columns: repeat(2, 1fr);
        gap: 12px;
        margin-bottom: 16px;
    }

    .rev-stat-value {
        font-size: 22px;
    }
}

@media (max-width: 479px) {
    .rev-kpi-row {
        grid-template-columns: 1fr;
    }
}

.rev-kpi-section {
    display: flex;
    flex-direction: column;
}

.rev-kpi-date-filter {
    display: flex;
    gap: 6px;
    flex-wrap: wrap;
    justify-content: flex-end;
    margin-top: 8px;
}

.rev-kpi-date-select {
    display: none;
}

.rev-date-select {
    background: var(--rev-surface-3);
    border: 1px solid var(--rev-border);
    border-radius: 20px;
    padding: 6px 14px;
    font-size: 12px;
    font-weight: 500;
    color: var(--rev-text);
    cursor: pointer;
    appearance: auto;
}

.rev-timeline-date-select {
    margin-left: auto;
}

@media (max-width: 767px) {
    .rev-kpi-date-pills {
        display: none;
    }

    .rev-kpi-date-select {
        display: flex;
        justify-content: flex-end;
    }
}


/* ============================================================
   29. PREMIUM PILL TABS
   ============================================================ */

.rev-tab-list {
    display: flex;
    align-items: center;
    gap: 2px;
    background: var(--rev-surface-1);
    border-radius: var(--rev-radius-md);
    padding: 4px;
    border: 1px solid var(--rev-border);
    overflow-x: auto;
    scrollbar-width: none;
}

.rev-tab-list::-webkit-scrollbar {
    display: none;
}

.rev-tab-item {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 7px 14px;
    text-decoration: none;
    border-radius: var(--rev-radius-sm);
    font-size: 13px;
    font-weight: 500;
    color: var(--rev-text-muted);
    cursor: pointer;
    transition: color 150ms ease, background-color 150ms ease;
    white-space: nowrap;
    border: none;
    background: transparent;
    user-select: none;
}

.rev-tab-item:hover {
    color: var(--rev-text);
    background-color: rgba(255, 255, 255, 0.05);
}

.rev-tab-item.active {
    background: var(--rev-surface-3);
    color: var(--rev-accent);
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.3), 0 0 0 1px var(--rev-border-strong);
    border-bottom: 2px solid var(--rev-accent);
}

.rev-tab-item i {
    font-size: 12px;
    opacity: 0.8;
}

@keyframes rev-tab-in {
    from {
        opacity: 0;
        transform: translateY(4px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.rev-tab-panel {
    animation: rev-tab-in 150ms ease-out both;
}


/* ============================================================
   30. INLINE EXPAND/COLLAPSE CONTROLS
   ============================================================ */

/* Contact/Address pill list */
.rev-control-section {
    margin-bottom: 20px;
}


.rev-control-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0 0 10px 0;
    border-bottom: 1px solid var(--rev-border);
    margin-bottom: 10px;
}

.rev-control-title {
    font-size: 12px;
    font-weight: 600;
    color: var(--rev-text-muted);
    text-transform: uppercase;
    letter-spacing: 0.06em;
    display: flex;
    align-items: center;
    gap: 6px;
}

.rev-add-btn {
    display: flex;
    align-items: center;
    gap: 5px;
    font-size: 12px;
    font-weight: 500;
    color: var(--rev-accent);
    cursor: pointer;
    background: none;
    border: none;
    padding: 4px 8px;
    border-radius: var(--rev-radius-sm);
    transition: background-color 150ms ease;
    text-decoration: none;
}

.rev-add-btn:hover {
    background: rgba(230, 14, 137, 0.08);
    color: var(--rev-accent);
}

/* Pill item — collapsed state */
.rev-pill-item {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 10px 12px;
    border-radius: var(--rev-radius-md);
    border: 1px solid var(--rev-border);
    background: var(--rev-surface-3);
    cursor: pointer;
    transition: border-color 150ms ease, background-color 150ms ease;
    margin-bottom: 6px;
    user-select: none;
}

.rev-pill-item:hover {
    border-color: var(--rev-border-strong);
    background: rgba(255, 255, 255, 0.04);
}

.rev-pill-item.expanded {
    border-color: var(--rev-accent);
    background: rgba(230, 14, 137, 0.04);
}

.rev-pill-badge {
    font-size: 10px;
    font-weight: 600;
    color: var(--rev-text-muted);
    background: var(--rev-border-strong);
    border-radius: 4px;
    padding: 2px 6px;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    flex-shrink: 0;
}

.rev-pill-value {
    flex: 1;
    font-size: 13px;
    font-weight: 500;
    color: var(--rev-text);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.rev-pill-default {
    font-size: 10px;
    color: var(--rev-accent);
    font-weight: 600;
}

.rev-pill-chevron {
    font-size: 11px;
    color: var(--rev-text-muted);
    transition: transform 200ms ease;
    flex-shrink: 0;
}

.rev-pill-item.expanded .rev-pill-chevron {
    transform: rotate(180deg);
}

/* Expand/collapse container — CSS grid trick for smooth height */
.rev-pill-expand {
    display: grid;
    grid-template-rows: 0fr;
    transition: grid-template-rows 200ms cubic-bezier(0.4, 0, 0.2, 1);
    overflow: hidden;
}

.rev-pill-expand.open {
    grid-template-rows: 1fr;
}

.rev-pill-expand-inner {
    min-height: 0;
    overflow: hidden;
}

.rev-pill-form {
    padding: 12px 12px 4px;
    border: 1px solid var(--rev-accent);
    border-top: none;
    border-radius: 0 0 var(--rev-radius-md) var(--rev-radius-md);
    background: rgba(230, 14, 137, 0.03);
    margin-bottom: 6px;
}

.rev-pill-form .form-group {
    margin-bottom: 10px;
}

.rev-pill-form-row {
    display: flex;
    gap: 8px;
    margin-bottom: 8px;
}

.rev-pill-form-row .input {
    min-width: 0;
}

.rev-pill-form-row .w-select {
    flex: 1;
}

.rev-pill-form-row .w-input {
    flex: 2;
}

@media (max-width: 767px) {
    .rev-pill-form-row {
        flex-direction: column;
    }
}

.rev-pill-empty {
    text-align: center;
    padding: 16px 12px;
    color: var(--rev-text-muted);
    font-size: 13px;
    border: 1px dashed var(--rev-border-strong);
    border-radius: var(--rev-radius-md);
    margin-bottom: 8px;
}

/* ── Channel cards (edit mode) ── */
.rev-channel-card {
    background: var(--rev-surface-3);
    border: 1px solid var(--rev-border);
    border-radius: var(--rev-radius-md);
    padding: 16px;
    margin-bottom: 12px;
}

.rev-channel-card .rev-control-section {
    margin-bottom: 0;
}

/* Channel icon colour tints */
.rev-control-title.channel-phone i { color: #4ade80; }
.rev-control-title.channel-email i { color: #60a5fa; }
.rev-control-title.channel-social i { color: #a78bfa; }

/* Reminder row inside channel card */
.rev-channel-reminders {
    display: flex;
    gap: 20px;
    padding-top: 10px;
    margin-top: 10px;
    border-top: 1px solid var(--rev-border);
}

/* Toggle switch */
.rev-toggle {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    cursor: pointer;
    font-size: 13px;
    color: var(--rev-text-muted);
    user-select: none;
}

.rev-toggle input[type="checkbox"] {
    position: absolute;
    opacity: 0;
    width: 0;
    height: 0;
}

.rev-toggle-track {
    position: relative;
    width: 36px;
    height: 20px;
    /* OFF state — clearly distinguishable from dark page surfaces */
    background: #4a4f66;
    border: 1px solid rgba(255, 255, 255, 0.10);
    border-radius: 10px;
    box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.35);
    transition: background-color 200ms ease, border-color 200ms ease, box-shadow 200ms ease;
    flex-shrink: 0;
}

.rev-toggle-track::after {
    content: '';
    position: absolute;
    top: 1px;
    left: 1px;
    width: 16px;
    height: 16px;
    /* Slightly off-white for OFF state — reads as "inactive" */
    background: #d6d8e0;
    border-radius: 50%;
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.35);
    transition: transform 200ms ease, background-color 200ms ease;
}

.rev-toggle:hover .rev-toggle-track {
    border-color: rgba(255, 255, 255, 0.18);
}

.rev-toggle input:focus-visible + .rev-toggle-track {
    outline: 2px solid var(--rev-accent);
    outline-offset: 2px;
}

.rev-toggle input:checked + .rev-toggle-track {
    /* ON state — accent fill, no inset shadow so it reads as "lit" */
    background: var(--rev-accent);
    border-color: var(--rev-accent);
    box-shadow: 0 0 0 1px rgba(230, 14, 137, 0.35), 0 0 8px rgba(230, 14, 137, 0.25);
}

.rev-toggle input:checked + .rev-toggle-track::after {
    transform: translateX(16px);
    /* Pure white knob when on */
    background: #ffffff;
}

.rev-toggle input:disabled + .rev-toggle-track {
    opacity: 0.5;
    cursor: not-allowed;
}

/* Checkbox label (native checkbox + text) */
.rev-checkbox-label {
    display: flex;
    align-items: center;
    gap: 8px;
    cursor: pointer;
    font-size: 13px;
    color: var(--rev-text);
    user-select: none;
}

.rev-checkbox-label input[type="checkbox"] {
    width: 16px;
    height: 16px;
    accent-color: var(--rev-brand);
    cursor: pointer;
}

/* Filter checkbox (list page filters) */
.rev-filter-checkbox {
    display: flex;
    align-items: center;
    gap: 8px;
    cursor: pointer;
    font-size: 13px;
    color: var(--rev-text);
    user-select: none;
}

.rev-filter-checkbox input[type="checkbox"] {
    width: 16px;
    height: 16px;
    accent-color: var(--rev-brand);
    cursor: pointer;
}

/* Tag chip pills */
.rev-tag-chips {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    margin-bottom: 10px;
}

.rev-tag-chip {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 4px 10px;
    border-radius: 20px;
    background: var(--rev-violet-dim);
    border: 1px solid rgba(124, 58, 237, 0.25);
    color: var(--rev-text);
    font-size: 12px;
    font-weight: 500;
}

.rev-tag-chip-remove {
    cursor: pointer;
    color: var(--rev-text-muted);
    font-size: 10px;
    line-height: 1;
    padding: 1px;
    border-radius: 50%;
    transition: color 150ms ease, background-color 150ms ease;
    background: none;
    border: none;
}

.rev-tag-chip-remove:hover {
    color: var(--rev-red);
    background: rgba(239, 68, 68, 0.1);
}

.rev-tag-add-row {
    display: flex;
    align-items: center;
    gap: 8px;
}

.rev-tag-add-input {
    flex: 1;
    background: var(--rev-surface-3);
    border: 1px solid var(--rev-border);
    border-radius: var(--rev-radius-sm);
    padding: 7px 12px;
    font-size: 13px;
    color: var(--rev-text);
    transition: border-color 150ms ease, box-shadow 150ms ease;
}

.rev-tag-add-input:focus {
    outline: none;
    border-color: var(--rev-accent);
    box-shadow: var(--rev-glow-pink);
}


/* ============================================================
   31. MOBILE — CARD LIST LAYOUT
   ============================================================ */

@media (max-width: 767px) {
    /* Hide desktop table header */
    .table-header.w-row {
        display: none !important;
    }

    /* Each data row becomes a card on mobile */
    .table-row.w-row:not(.table-header) {
        display: flex !important;
        flex-direction: row !important;
        flex-wrap: wrap !important;
        align-items: center !important;
        padding: 12px 14px !important;
        border-radius: var(--rev-radius-md) !important;
        margin-bottom: 8px !important;
        background: var(--rev-surface-2) !important;
        border: 1px solid var(--rev-border) !important;
        gap: 8px !important;
        transform: none !important;
    }

    .table-row.w-row:not(.table-header):hover {
        transform: none !important;
        border-color: var(--rev-border-strong) !important;
    }

    /* Hide address column on mobile — too cramped */
    .table-row.w-row:not(.table-header) .w-col-3:nth-child(5) {
        display: none !important;
    }

    /* Show data-label before value */
    .table-row.w-row:not(.table-header) [data-label]::before {
        content: attr(data-label) ': ';
        font-size: 11px;
        font-weight: 600;
        color: var(--rev-text-muted);
        text-transform: uppercase;
        letter-spacing: 0.05em;
        display: block;
        margin-bottom: 2px;
    }

    /* Avatar takes natural size */
    .table-row.w-row:not(.table-header) .w-col-1:first-child {
        flex: 0 0 auto !important;
        width: auto !important;
    }

    /* Name takes remaining space */
    .table-row.w-row:not(.table-header) .w-col-3:nth-child(2),
    .table-row.w-row:not(.table-header) .w-col-2:nth-child(2) {
        flex: 1 !important;
        width: auto !important;
        min-width: 0 !important;
    }

    /* Status badge floats right */
    .table-row.w-row:not(.table-header) .w-col-1:last-child {
        flex: 0 0 auto !important;
        width: auto !important;
        margin-left: auto !important;
    }
}


/* ============================================================
   32. MOBILE — BOTTOM NAVIGATION BAR
   ============================================================ */

.rev-bottom-nav {
    display: none; /* hidden on desktop */
}

@media (max-width: 767px) {
    /* Hide sidebar on mobile */
    .app-nav-layout {
        display: none !important;
    }

    /* Hide topbar hamburger — the bottom nav is the primary navigation now */
    .rev-sidebar-toggle {
        display: none !important;
    }

    /* Pad main content above bottom nav.
       NB: targets `.app-main-layout-wrapper:not(.header)` — the content wrapper every page
       actually renders. The old selector `.app-main-layout-container` matched no element, so
       this clearance never applied and the last ~64px of every page sat behind the fixed bottom
       nav (most visible on short pages whose last row — e.g. the campaign recipients table —
       ended right at the bottom). `:not(.header)` leaves the title bar untouched. */
    .app-main-layout-wrapper:not(.header) {
        padding-bottom: var(--rev-bottom-nav-height) !important;
    }

    /* Show bottom nav */
    .rev-bottom-nav {
        display: flex;
        position: fixed;
        bottom: 0;
        left: 0;
        right: 0;
        height: var(--rev-bottom-nav-height);
        background: var(--rev-surface-1);
        border-top: 1px solid var(--rev-border-strong);
        box-shadow: 0 -4px 20px rgba(0, 0, 0, 0.4);
        z-index: 1000;
        padding: 0 8px;
        align-items: stretch;
        justify-content: space-around;
    }
}

.rev-bottom-nav-item {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 4px;
    flex: 1;
    padding: 8px 4px;
    color: var(--rev-text-muted);
    text-decoration: none;
    font-size: 10px;
    font-weight: 500;
    letter-spacing: 0.02em;
    transition: color 150ms ease;
    cursor: pointer;
    background: none;
    border: none;
}

.rev-bottom-nav-item i {
    font-size: 20px;
    transition: transform 150ms cubic-bezier(0.34, 1.56, 0.64, 1), color 150ms ease;
}

.rev-bottom-nav-item:hover,
.rev-bottom-nav-item.active {
    color: var(--rev-accent);
}

.rev-bottom-nav-item.active i {
    transform: scale(1.15);
}

/* Mobile "More" slide-up sheet */
.rev-mobile-sheet-mask {
    display: none;
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.6);
    z-index: 1100;
    animation: rev-fade-in 200ms ease both;
}

.rev-mobile-sheet-mask.open {
    display: block;
}

.rev-mobile-sheet {
    position: fixed;
    bottom: var(--rev-bottom-nav-height);
    left: 0;
    right: 0;
    background: var(--rev-surface-2);
    border-top: 1px solid var(--rev-border-strong);
    border-radius: var(--rev-radius-lg) var(--rev-radius-lg) 0 0;
    z-index: 1101;
    padding: 16px 16px 8px;
    animation: rev-sheet-in 250ms cubic-bezier(0.34, 1.56, 0.64, 1) both;
}

@keyframes rev-sheet-in {
    from {
        transform: translateY(100%);
        opacity: 0;
    }
    to {
        transform: translateY(0);
        opacity: 1;
    }
}

.rev-mobile-sheet-handle {
    width: 36px;
    height: 4px;
    border-radius: 2px;
    background: var(--rev-border-strong);
    margin: 0 auto 16px;
}

.rev-mobile-sheet-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 10px;
}

.rev-mobile-sheet-link {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 6px;
    padding: 16px 8px;
    border-radius: var(--rev-radius-md);
    background: var(--rev-surface-3);
    border: 1px solid var(--rev-border-strong);
    color: var(--rev-text-muted);
    font-size: 11px;
    font-weight: 500;
    text-decoration: none;
    transition: border-color 150ms ease, color 150ms ease, background-color 150ms ease;
}

.rev-mobile-sheet-link i {
    font-size: 22px;
}

/* NEW badge inside a sheet tile: pin to the corner so it doesn't add a
   third row and break the uniform tile height across the grid. */
.rev-mobile-sheet-link .nav-new {
    position: absolute;
    top: 6px;
    right: 6px;
    margin-left: 0;
}

.rev-mobile-sheet-link:hover,
.rev-mobile-sheet-link.active {
    color: var(--rev-accent);
    border-color: rgba(230, 14, 137, 0.3);
    background: rgba(230, 14, 137, 0.05);
}

.rev-mobile-sheet-link.rev-sheet-logout {
    color: var(--rev-text-muted);
    border-color: var(--rev-border);
    border-top: 1px solid var(--rev-border-strong);
}


/* ============================================================
   33. POS ITEM GRID ANIMATIONS
   ============================================================ */

@keyframes rev-item-tile-in {
    from {
        opacity: 0;
        transform: scale(0.93) translateY(6px);
    }
    to {
        opacity: 1;
        transform: scale(1) translateY(0);
    }
}

.rev-item-grid {
    /* Wrapper class — no structural change needed */
}

.rev-item-tile-0  { animation: rev-item-tile-in 220ms cubic-bezier(0.34, 1.56, 0.64, 1) 0ms   both; }
.rev-item-tile-1  { animation: rev-item-tile-in 220ms cubic-bezier(0.34, 1.56, 0.64, 1) 30ms  both; }
.rev-item-tile-2  { animation: rev-item-tile-in 220ms cubic-bezier(0.34, 1.56, 0.64, 1) 60ms  both; }
.rev-item-tile-3  { animation: rev-item-tile-in 220ms cubic-bezier(0.34, 1.56, 0.64, 1) 90ms  both; }
.rev-item-tile-4  { animation: rev-item-tile-in 220ms cubic-bezier(0.34, 1.56, 0.64, 1) 120ms both; }
.rev-item-tile-5  { animation: rev-item-tile-in 220ms cubic-bezier(0.34, 1.56, 0.64, 1) 150ms both; }
.rev-item-tile-6  { animation: rev-item-tile-in 220ms cubic-bezier(0.34, 1.56, 0.64, 1) 180ms both; }
.rev-item-tile-7  { animation: rev-item-tile-in 220ms cubic-bezier(0.34, 1.56, 0.64, 1) 210ms both; }


/* ===================================================================
   Section 34 — Notes Control
   =================================================================== */

/* --- Composer Card --- */
.rev-notes-composer {
    background: var(--rev-gradient-card);
    border: 1px solid var(--rev-border);
    border-radius: var(--rev-radius-lg);
    overflow: hidden;
    margin-bottom: 20px;
}

.rev-composer-subject input.input {
    background: transparent !important;
    border: none !important;
    border-bottom: 1px solid var(--rev-border) !important;
    border-radius: 0 !important;
    box-shadow: none !important;
    padding: 12px 16px !important;
    font-size: 13px !important;
    font-weight: 500;
    color: var(--rev-text) !important;
    width: 100%;
    outline: none;
}

.rev-composer-subject input.input:focus {
    box-shadow: none !important;
    border-bottom-color: var(--rev-accent) !important;
}

.rev-composer-body textarea.textarea {
    background: transparent !important;
    border: none !important;
    border-radius: 0 !important;
    box-shadow: none !important;
    padding: 12px 16px !important;
    font-size: 13px !important;
    color: var(--rev-text) !important;
    width: 100%;
    resize: none;
    min-height: 80px;
    outline: none;
    display: block;
}

.rev-composer-body textarea.textarea:focus {
    box-shadow: none !important;
}

.rev-composer-footer {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 8px 16px 10px;
    border-top: 1px solid var(--rev-border);
}

.rev-composer-hint {
    font-size: 11px;
    color: var(--rev-text-muted);
    opacity: 0.6;
}

/* --- Note Cards --- */
@keyframes rev-note-in {
    from { opacity: 0; transform: translateY(8px); }
    to   { opacity: 1; transform: translateY(0); }
}

.rev-note-card {
    background: var(--rev-surface-3);
    border: 1px solid var(--rev-border);
    border-left: 3px solid var(--rev-accent);
    border-radius: var(--rev-radius-md);
    padding: 14px 16px;
    margin-bottom: 12px;
    animation: rev-note-in 200ms ease-out both;
    transition: background 150ms, box-shadow 150ms;
    position: relative;
}

.rev-note-card:hover {
    background: var(--rev-surface-3);
    box-shadow: var(--rev-shadow-hover);
}

/* --- Note Card Header --- */
.rev-note-header {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 10px;
    margin-bottom: 8px;
}

.rev-note-author-row {
    display: flex;
    align-items: center;
    gap: 10px;
    flex: 1;
    min-width: 0;
}

.rev-note-avatar {
    width: 32px;
    height: 32px;
    border-radius: 50%;
    background: var(--rev-violet-dim);
    border: 1px solid var(--rev-violet);
    color: var(--rev-violet);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 13px;
    flex-shrink: 0;
}

.rev-note-meta {
    display: flex;
    flex-direction: column;
    min-width: 0;
}

.rev-note-author-name {
    font-size: 13px;
    font-weight: 600;
    color: var(--rev-text);
    line-height: 1.2;
}

.rev-note-date {
    font-size: 11px;
    color: var(--rev-text-muted);
    opacity: 0.7;
}

/* --- Note Actions (hover-reveal) --- */
.rev-note-actions {
    display: flex;
    align-items: center;
    gap: 4px;
    opacity: 0;
    pointer-events: none;
    transition: opacity 150ms;
    flex-shrink: 0;
}

.rev-note-card:hover .rev-note-actions {
    opacity: 1;
    pointer-events: auto;
}

.rev-note-action-btn {
    background: none;
    border: none;
    cursor: pointer;
    padding: 5px 7px;
    border-radius: var(--rev-radius-sm);
    color: var(--rev-text-muted);
    font-size: 13px;
    line-height: 1;
    transition: color 120ms, background 120ms;
}

.rev-note-action-btn:hover { background: rgba(255,255,255,0.06); }
.rev-note-action-btn.edit:hover  { color: var(--rev-accent); }
.rev-note-action-btn.delete:hover { color: #ef4444; }
.rev-note-action-btn.save:hover  { color: #10b981; }

/* --- Note Subject --- */
.rev-note-subject {
    font-size: 12px;
    font-weight: 600;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: var(--rev-accent);
    margin-bottom: 6px;
}

/* --- Note Body --- */
.rev-note-body p {
    font-size: 13px;
    color: var(--rev-text);
    line-height: 1.6;
    margin: 0;
}

.rev-note-body textarea.textarea {
    width: 100%;
    font-size: 13px;
    min-height: 70px;
    resize: vertical;
}

/* --- Attachment Chips Row --- */
.rev-attach-row {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    margin-top: 12px;
    padding-top: 10px;
    border-top: 1px solid var(--rev-border);
    align-items: center;
}

.rev-attach-chip {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    background: rgba(255,255,255,0.06);
    border: 1px solid var(--rev-border);
    border-radius: 20px;
    padding: 3px 10px 3px 8px;
    font-size: 12px;
    color: var(--rev-text);
    max-width: 200px;
}

.rev-attach-chip .rev-attach-icon {
    color: var(--rev-violet);
    font-size: 11px;
    flex-shrink: 0;
}

.rev-attach-chip a {
    color: var(--rev-text);
    text-decoration: none;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    cursor: pointer;
}

.rev-attach-chip a:hover { color: var(--rev-accent); }

.rev-attach-chip-btn {
    background: none;
    border: none;
    cursor: pointer;
    color: var(--rev-text-muted);
    font-size: 11px;
    padding: 2px 3px;
    border-radius: 4px;
    line-height: 1;
    transition: color 120ms;
    flex-shrink: 0;
}

.rev-attach-chip-btn:hover { color: var(--rev-accent); }
.rev-attach-chip-btn.remove:hover { color: #ef4444; }

.rev-attach-add {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    background: transparent;
    border: 1px dashed var(--rev-border);
    border-radius: 20px;
    padding: 3px 12px;
    font-size: 12px;
    color: var(--rev-text-muted);
    cursor: pointer;
    transition: border-color 150ms, color 150ms;
    text-decoration: none;
}

.rev-attach-add:hover {
    border-color: var(--rev-accent);
    color: var(--rev-accent);
}

/* --- Section header --- */
.rev-notes-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 14px;
}

.rev-notes-title {
    font-size: 14px;
    font-weight: 600;
    color: var(--rev-text);
    letter-spacing: 0.03em;
    text-transform: uppercase;
    opacity: 0.7;
}

/* Mobile: always show actions */
@media (max-width: 767px) {
    .rev-note-actions {
        opacity: 1;
        pointer-events: auto;
    }
}


/* ===================================================================
   Section 35 — Compact Page Header (reduce vertical waste)
   =================================================================== */

/* Tighter header wrapper on all screen sizes */
.app-main-layout-wrapper.header {
    padding-top: 14px !important;
    padding-bottom: 0 !important;
}

.page-heading {
    margin-bottom: 10px !important;
}

.page-heading h2 {
    font-size: 20px !important;
    margin-bottom: 0 !important;
    line-height: 1.2 !important;
}

/* Content wrapper — reduce top padding */
.app-main-layout-wrapper:not(.header) {
    padding-top: 12px !important;
}

/* Mobile — even tighter */
@media (max-width: 767px) {
    .app-main-layout-wrapper.header {
        padding-top: 8px !important;
        padding-bottom: 0 !important;
    }

    .page-heading h2 {
        font-size: 17px !important;
    }

    .app-main-layout-wrapper:not(.header) {
        padding-top: 8px !important;
        padding-right: 12px !important;
        padding-left: 12px !important;
    }

    .rev-search-panel {
        margin-bottom: 8px !important;
    }
}


/* ===================================================================
   Section 36 — Remove top-nav offset on mobile
   The 54px padding-top on .app-main-layout-container exists to clear
   the fixed top navbar. On mobile the top nav is hidden (bottom nav
   is used instead), so that space is wasted.
   =================================================================== */
@media (max-width: 767px) {
    .app-main-layout-container {
        padding-top: 0 !important;
    }
}


/* ===================================================================
   Section 37 — POS Redesign
   Complete redesign: FA icons, mobile tab toggle, sticky pay bar,
   compact header selectors, clean cart layout.
   =================================================================== */

/* --- Two-column grid layout --- */
.rev-pos-layout {
    display: grid;
    grid-template-columns: minmax(0, 1.6fr) minmax(0, 1fr);
    gap: 16px;
    align-items: stretch;
}
/* Desktop: fill the viewport height rather than leaving ~half the page empty
   below a short catalog (July 2026 UI review). Both panes stretch together. */
@media (min-width: 768px) {
    .rev-pos-layout {
        min-height: calc(100vh - 200px);
    }
}
.rev-pos-catalog-pane,
.rev-pos-cart-pane {
    min-width: 0;
    min-height: 0;
    display: flex;
    flex-direction: column;
}
.rev-pos-cart-wrapper {
    display: flex;
    flex-direction: column;
    flex: 1 1 auto;
    min-height: 0;
    min-width: 0;
}
.rev-pos-cart-wrapper > .rev-pos-cart-toolbar { flex: 0 0 auto; }
.rev-pos-cart-wrapper > .pc-root { flex: 1 1 auto; min-height: 0; }
.rev-pos-cart-wrapper > .rev-pos-action-chips { flex: 0 0 auto; }
.rev-pos-cart-wrapper > .rev-pos-pay-bar { flex: 0 0 auto; }
/* Catalog pane: shell so the search row + tabs + tile grid fit inside a
   bordered card matching the cart pane height. */
.rev-pos-catalog-pane {
    background: linear-gradient(180deg, var(--rev-surface-1) 0%, var(--rev-surface-0) 100%);
    border: 1px solid var(--rev-border-strong);
    border-radius: var(--rev-radius-lg);
    overflow: hidden;
}

/* --- Header row: title + inline store/register selectors --- */
.rev-pos-header-row {
    display: flex;
    align-items: center;
    gap: 12px;
    flex-wrap: wrap;
}

.rev-pos-title {
    font-size: 20px !important;
    margin: 0 !important;
    line-height: 1.2 !important;
    flex: 1;
    min-width: 0;
}

.rev-pos-selectors {
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
}

.rev-pos-select {
    background: var(--rev-surface-3) !important;
    border: 1px solid var(--rev-border-strong) !important;
    border-radius: var(--rev-radius-md) !important;
    color: var(--rev-text) !important;
    font-size: 13px !important;
    padding: 6px 28px 6px 10px !important;
    height: auto !important;
    cursor: pointer;
    transition: border-color var(--rev-transition);
}

.rev-pos-select:focus {
    outline: none !important;
    border-color: var(--rev-accent) !important;
    box-shadow: var(--rev-glow-pink) !important;
}

.rev-pos-session-label {
    display: flex;
    align-items: center;
    gap: 8px;
    background: var(--rev-surface-3);
    border: 1px solid var(--rev-border);
    border-radius: var(--rev-radius-md);
    padding: 6px 12px;
    font-size: 13px;
    color: var(--rev-text-muted);
}

.rev-pos-session-dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: var(--rev-green);
    flex-shrink: 0;
}

.rev-pos-session-close {
    background: none;
    border: none;
    color: var(--rev-text-muted);
    cursor: pointer;
    padding: 0;
    font-size: 14px;
    line-height: 1;
    transition: color var(--rev-transition);
}

.rev-pos-session-close:hover { color: var(--rev-red); }

/* --- Setup card (no active session) --- */
.rev-pos-setup-card {
    max-width: 480px;
    margin: 40px auto;
    background: var(--rev-gradient-card);
    border: 1px solid var(--rev-border);
    border-radius: var(--rev-radius-lg);
    padding: 32px;
}

/* --- Mobile tab bar (hidden on desktop) --- */
.rev-pos-tabs {
    display: none;
    gap: 0;
    margin-bottom: 12px;
    background: var(--rev-surface-2);
    border: 1px solid var(--rev-border);
    border-radius: var(--rev-radius-md);
    padding: 4px;
}

.rev-pos-tab {
    flex: 1;
    background: none;
    border: none;
    color: var(--rev-text-muted);
    font-size: 14px;
    font-weight: 500;
    padding: 8px 12px;
    border-radius: calc(var(--rev-radius-md) - 2px);
    cursor: pointer;
    transition: all var(--rev-transition);
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
}

.rev-pos-tab.active {
    background: var(--rev-surface-3);
    color: var(--rev-accent);
}

.rev-pos-tab-badge {
    background: var(--rev-accent);
    color: white;
    border-radius: 10px;
    padding: 1px 6px;
    font-size: 11px;
    font-weight: 700;
    line-height: 1.4;
}

/* --- Catalog panel --- */
.rev-pos-catalog {
    background: var(--rev-gradient-card);
    border: 1px solid var(--rev-border);
    border-radius: var(--rev-radius-lg);
    padding: 16px;
}

.rev-pos-search {
    margin-bottom: 12px;
}

.rev-pos-back-pill {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    background: var(--rev-surface-3);
    border: 1px solid var(--rev-border);
    border-radius: 20px;
    padding: 4px 12px;
    font-size: 12px;
    color: var(--rev-accent);
    cursor: pointer;
    margin-bottom: 12px;
    text-decoration: none;
    transition: background var(--rev-transition);
}

.rev-pos-back-pill:hover { background: rgba(230, 14, 137, 0.1); }

/* Item tile grid */
.rev-item-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 10px;
}

.rev-item-tile {
    background: var(--rev-surface-3);
    border: 1px solid var(--rev-border);
    border-radius: var(--rev-radius-md);
    padding: 12px 8px;
    cursor: pointer;
    text-align: center;
    transition: transform var(--rev-transition), box-shadow var(--rev-transition), border-color var(--rev-transition);
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 6px;
}

.rev-item-tile:hover {
    transform: translateY(-2px);
    box-shadow: var(--rev-shadow-hover);
    border-color: var(--rev-border-strong);
}

.rev-item-tile:active { transform: translateY(0); }

.rev-item-tile-icon {
    width: 40px;
    height: 40px;
    border-radius: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 18px;
    flex-shrink: 0;
}

.rev-item-tile-icon.service { background: rgba(230, 14, 137, 0.15); color: var(--rev-accent); }
.rev-item-tile-icon.product { background: var(--rev-violet-dim); color: var(--rev-violet); }
.rev-item-tile-icon.gift    { background: var(--rev-amber-dim);  color: var(--rev-amber);  }

.rev-item-tile-name {
    font-size: 12px;
    color: var(--rev-text);
    font-weight: 500;
    line-height: 1.3;
}

.rev-item-tile-price {
    font-size: 12px;
    color: var(--rev-accent);
    font-weight: 600;
}

.rev-item-tile-stock {
    font-size: 11px;
    color: var(--rev-text-muted);
}

/* --- Cart panel --- */
.rev-pos-cart {
    background: var(--rev-gradient-card);
    border: 1px solid var(--rev-border);
    border-radius: var(--rev-radius-lg);
    display: flex;
    flex-direction: column;
    max-height: calc(100vh - 140px);
    position: sticky;
    top: 70px;
    overflow: hidden;
}

.rev-pos-cart-inner {
    flex: 1;
    overflow-y: auto;
    min-height: 0;
    padding: 16px;
    padding-bottom: 8px;
}

/* Client section */
.rev-pos-client {
    margin-bottom: 14px;
    padding-bottom: 14px;
    border-bottom: 1px solid var(--rev-border);
}

.rev-pos-client-row {
    display: flex;
    align-items: center;
    gap: 10px;
}

.rev-pos-client-avatar {
    position: relative;
    flex-shrink: 0;
    width: 44px;
    height: 44px;
    border-radius: 50%;
    overflow: hidden;
    background: var(--rev-surface-2, rgba(255,255,255,0.06));
    border: 1px solid var(--rev-border);
    display: flex;
    align-items: center;
    justify-content: center;
}

.rev-pos-client-img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

.rev-pos-client-search { flex: 1; min-width: 0; }

.rev-pos-client-chips {
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
    margin-top: 10px;
}

.rev-pos-client-chip {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    background: var(--rev-surface-3);
    border: 1px solid var(--rev-border);
    border-radius: 20px;
    padding: 3px 10px;
    font-size: 12px;
    color: var(--rev-text-muted);
}

.rev-pos-client-chip i { color: var(--rev-amber); }

/* Basket */
.rev-pos-basket { margin-bottom: 12px; }

.rev-pos-basket-label {
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: var(--rev-text-muted);
    font-weight: 600;
    margin-bottom: 10px;
    display: flex;
    align-items: center;
    gap: 6px;
}

.rev-pos-basket-item {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    padding: 10px 0;
    border-bottom: 1px solid var(--rev-border);
    position: relative;
}

.rev-pos-basket-item:last-child { border-bottom: none; }

.rev-pos-basket-item-icon {
    width: 32px;
    height: 32px;
    border-radius: 8px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 14px;
    flex-shrink: 0;
    margin-top: 2px;
}

.rev-pos-basket-item-icon.service     { background: rgba(230,14,137,0.15); color: var(--rev-accent); }
.rev-pos-basket-item-icon.product     { background: var(--rev-violet-dim);  color: var(--rev-violet); }
.rev-pos-basket-item-icon.gift        { background: var(--rev-amber-dim);   color: var(--rev-amber);  }
.rev-pos-basket-item-icon.account     { background: var(--rev-green-dim);   color: var(--rev-green);  }
.rev-pos-basket-item-icon.credit-note { background: rgba(255,255,255,0.06); color: var(--rev-text-muted); }

.rev-pos-basket-item-details { flex: 1; min-width: 0; }

.rev-pos-basket-item-name {
    font-size: 13px;
    font-weight: 500;
    color: var(--rev-text);
    margin-bottom: 2px;
}

.rev-pos-basket-item-meta {
    font-size: 12px;
    color: var(--rev-text-muted);
}

.rev-pos-basket-item-warning {
    font-size: 11px;
    color: var(--rev-red);
    margin-top: 3px;
}

.rev-pos-basket-item-price {
    font-size: 13px;
    font-weight: 600;
    color: var(--rev-text);
    white-space: nowrap;
    padding-top: 2px;
}

.rev-pos-basket-item-actions {
    display: flex;
    gap: 4px;
    opacity: 0;
    pointer-events: none;
    transition: opacity 150ms;
}

.rev-pos-basket-item:hover .rev-pos-basket-item-actions {
    opacity: 1;
    pointer-events: auto;
}

.rev-pos-item-btn {
    background: none;
    border: 1px solid var(--rev-border);
    border-radius: 6px;
    color: var(--rev-text-muted);
    width: 28px;
    height: 28px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 12px;
    cursor: pointer;
    transition: all var(--rev-transition);
}

.rev-pos-item-btn.edit:hover   { color: var(--rev-accent); border-color: var(--rev-accent); }
.rev-pos-item-btn.remove:hover { color: var(--rev-red);    border-color: var(--rev-red);    }

/* Cart toolbar (matches POS redesign mockup) — clickable register status */
.rev-pos-cart-toolbar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 100%;
    padding: 10px 14px;
    background: var(--rev-surface-2);
    border: 1px solid var(--rev-border);
    border-radius: var(--rev-radius-md);
    margin-bottom: 10px;
    font-size: 12.5px;
    color: var(--rev-text-muted);
    font-family: inherit;
    cursor: pointer;
    text-align: left;
    transition: border-color 150ms, background 150ms;
}
.rev-pos-cart-toolbar:hover:not(.disabled):not(:disabled) {
    border-color: rgba(230, 14, 137, 0.45);
    background: var(--rev-surface-3);
}
.rev-pos-cart-toolbar:focus-visible {
    outline: none;
    border-color: var(--rev-accent);
    box-shadow: 0 0 0 3px rgba(230, 14, 137, 0.20);
}
.rev-pos-cart-toolbar.disabled,
.rev-pos-cart-toolbar:disabled {
    cursor: default;
}
.rev-pos-cart-toolbar .reg {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-weight: 500;
    color: var(--rev-text);
}
.rev-pos-cart-toolbar .reg i { color: var(--rev-accent); }
.rev-pos-cart-toolbar .status-group {
    display: inline-flex;
    align-items: center;
    gap: 8px;
}
.rev-pos-cart-toolbar .status-pill {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 2px 10px;
    border-radius: 999px;
    background: rgba(16, 185, 129, 0.14);
    color: var(--rev-green);
    font-weight: 700;
    font-size: 11px;
    letter-spacing: 0.4px;
}
.rev-pos-cart-toolbar .status-pill .dot {
    width: 6px;
    height: 6px;
    border-radius: 999px;
    background: var(--rev-green);
    box-shadow: 0 0 0 3px rgba(16, 185, 129, 0.18);
}
.rev-pos-cart-toolbar .caret {
    color: var(--rev-text-muted);
    font-size: 10px;
    transition: transform 150ms, color 150ms;
}
.rev-pos-cart-toolbar:hover:not(.disabled):not(:disabled) .caret {
    color: var(--rev-text);
    transform: translateX(2px);
}

/* Action chips */
.rev-pos-action-chips {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    margin: 12px 0;
    padding: 0;
}

.rev-pos-action-chip {
    flex: 1 1 0;
    min-width: 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    background: var(--rev-surface-2);
    border: 1px solid var(--rev-border);
    border-radius: var(--rev-radius-md);
    padding: 9px 10px;
    font-size: 11.5px;
    font-weight: 600;
    color: var(--rev-text-muted);
    cursor: pointer;
    text-decoration: none;
    transition: all var(--rev-transition);
    white-space: nowrap;
    font-family: inherit;
}

.rev-pos-action-chip:hover { color: var(--rev-text); border-color: rgba(230, 14, 137, 0.45); }
.rev-pos-action-chip.disabled { opacity: 0.4; pointer-events: none; cursor: default; }

/* Totals */
.rev-pos-totals { margin-bottom: 8px; }

.rev-pos-totals-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 4px 0;
    font-size: 13px;
    color: var(--rev-text-muted);
}

.rev-pos-totals-row.total {
    font-size: 16px;
    font-weight: 700;
    color: var(--rev-accent);
    padding-top: 8px;
    border-top: 1px solid var(--rev-border);
    margin-top: 4px;
}

.rev-pos-totals-row.discount  { color: var(--rev-green); }
.rev-pos-totals-row.paid      { color: var(--rev-text); cursor: pointer; }
.rev-pos-totals-row.remaining { color: var(--rev-text-muted); font-style: italic; }

/* --- Sticky pay bar (mockup style: ghost left, magenta primary right) --- */
.rev-pos-pay-bar {
    flex-shrink: 0;
    margin-top: 8px;
    display: flex;
    gap: 8px;
}

.rev-pos-pay-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    height: 56px;
    border-radius: var(--rev-radius-md);
    font-size: 15px;
    font-weight: 600;
    padding: 0 20px;
    cursor: pointer;
    text-decoration: none;
    transition: all var(--rev-transition);
    border: 1px solid var(--rev-border-strong);
    background: transparent;
    color: var(--rev-text);
    white-space: nowrap;
    font-family: inherit;
}

.rev-pos-pay-btn.ghost {
    flex: 0 0 auto;
    min-width: 110px;
}
.rev-pos-pay-btn.ghost:hover { background: rgba(255, 255, 255, 0.04); }

.rev-pos-pay-btn.primary {
    flex: 1 1 0;
    min-width: 0;
    background: linear-gradient(135deg, var(--rev-accent), var(--rev-brand));
    border-color: transparent;
    color: #fff;
    box-shadow: 0 8px 24px rgba(185, 0, 106, 0.40);
}
.rev-pos-pay-btn.primary:hover {
    transform: translateY(-1px);
    box-shadow: 0 12px 32px rgba(185, 0, 106, 0.50);
}
.rev-pos-pay-btn.primary.success {
    background: linear-gradient(135deg, var(--rev-green) 0%, #059669 100%);
    box-shadow: 0 8px 24px rgba(16, 185, 129, 0.30);
}
.rev-pos-pay-btn.primary.refund {
    background: linear-gradient(135deg, var(--rev-amber) 0%, var(--rev-red) 100%);
    box-shadow: 0 8px 24px rgba(239, 68, 68, 0.30);
}

.rev-pos-pay-btn .amt {
    font-family: var(--rev-font-display);
    font-weight: 700;
    font-variant-numeric: tabular-nums;
}

.rev-pos-pay-btn.disabled { opacity: 0.4; pointer-events: none; }

/* legacy alias kept for any consumers still using .secondary */
.rev-pos-pay-btn.secondary {
    flex: 0 0 auto;
    min-width: 110px;
    background: transparent;
    color: var(--rev-text);
    border: 1px solid var(--rev-border-strong);
}
.rev-pos-pay-btn.secondary:hover { background: rgba(255, 255, 255, 0.04); }

/* Payment modal button grid */
.rev-pos-payment-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 10px;
    margin-bottom: 10px;
}

.rev-pos-payment-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    background: var(--rev-surface-3);
    border: 1px solid var(--rev-border-strong);
    border-radius: var(--rev-radius-md);
    color: var(--rev-text);
    font-size: 14px;
    font-weight: 500;
    padding: 14px;
    cursor: pointer;
    text-decoration: none;
    transition: all var(--rev-transition);
}

.rev-pos-payment-btn:hover {
    border-color: var(--rev-accent);
    color: var(--rev-accent);
    background: rgba(230, 14, 137, 0.08);
}

/* --- Mobile overrides --- */
@media (max-width: 767px) {
    /* Lift toast notifications above the bottom nav bar */
    .blazored-toast-container.position-bottomright,
    .blazored-toast-container.position-bottomleft,
    .blazored-toast-container.position-bottomcenter {
        bottom: calc(var(--rev-bottom-nav-height) + 8px) !important;
    }

    .rev-pos-tabs { display: flex; }

    .rev-pos-layout { display: block; }
    .rev-pos-layout.show-catalog .rev-pos-cart-pane    { display: none; }
    .rev-pos-layout.show-cart    .rev-pos-catalog-pane { display: none; }
    .rev-pos-catalog-pane { border: 0; border-radius: 0; background: transparent; }

    .rev-pos-cart {
        position: static;
        max-height: calc(100vh - var(--rev-bottom-nav-height) - 60px - 16px);
    }

    .rev-pos-header-row { gap: 8px; }
    .rev-pos-selectors  { gap: 6px; }
    .rev-pos-select     { font-size: 12px !important; padding: 5px 24px 5px 8px !important; }

    .rev-item-grid { grid-template-columns: repeat(2, 1fr); }

    .rev-pos-basket-item-actions { opacity: 1; pointer-events: auto; }
    .rev-pos-payment-grid { grid-template-columns: 1fr 1fr; }
}

/* ============================================================
   Section 38: Product Attributes & Variants Redesign
   ============================================================ */

/* --- Attribute pills --- */
.rev-attr-pills {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    padding: 4px 0;
}

.rev-attr-pill {
    background: transparent;
    border: 1.5px solid var(--rev-border);
    border-radius: 20px;
    padding: 6px 14px;
    font-size: 13px;
    font-weight: 500;
    color: var(--rev-text-muted);
    cursor: pointer;
    transition: all 150ms ease;
    line-height: 1.4;
}

.rev-attr-pill:hover {
    border-color: var(--rev-accent);
    color: var(--rev-accent);
}

.rev-attr-pill.active {
    background: var(--rev-accent);
    border-color: var(--rev-accent);
    color: white;
    font-weight: 600;
}

/* --- Variant list --- */
.rev-variant-list {
    display: flex;
    flex-direction: column;
    gap: 8px;
    margin-top: 8px;
}

/* --- Variant card --- */
.rev-variant-card {
    background: var(--rev-surface-2);
    border: 1px solid var(--rev-border);
    border-radius: var(--rev-radius-md);
    overflow: hidden;
    transition: border-color 150ms ease;
}

.rev-variant-card.open {
    border-color: var(--rev-accent);
}

/* --- Variant header row --- */
.rev-variant-header {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 10px 14px;
    cursor: pointer;
    user-select: none;
}

.rev-variant-thumb {
    width: 40px;
    height: 40px;
    border-radius: var(--rev-radius-sm);
    background: var(--rev-surface-3);
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    color: var(--rev-text-muted);
    overflow: hidden;
    font-size: 16px;
}

.rev-variant-thumb img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.rev-variant-info {
    flex: 1;
    min-width: 0;
}

.rev-variant-name {
    font-size: 14px;
    font-weight: 600;
    color: var(--rev-text-primary);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.rev-variant-meta {
    font-size: 12px;
    color: var(--rev-text-muted);
    margin-top: 1px;
}

.rev-variant-chevron {
    color: var(--rev-text-muted);
    font-size: 13px;
    transition: transform 200ms ease;
    flex-shrink: 0;
}

.rev-variant-card.open .rev-variant-chevron {
    transform: rotate(180deg);
}

.rev-variant-delete-btn {
    background: transparent;
    border: none;
    color: var(--rev-text-muted);
    padding: 4px 6px;
    border-radius: var(--rev-radius-sm);
    cursor: pointer;
    font-size: 14px;
    flex-shrink: 0;
    transition: color 150ms;
}

.rev-variant-delete-btn:hover {
    color: #e53e3e;
}

/* --- Variant body --- */
.rev-variant-body {
    padding: 0 14px 14px;
    display: none;
}

.rev-variant-card.open .rev-variant-body {
    display: block;
}

/* --- Photo upload area --- */
.rev-variant-upload {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 8px 10px;
    background: var(--rev-surface-3);
    border-radius: var(--rev-radius-sm);
    cursor: pointer;
    font-size: 13px;
    color: var(--rev-accent);
    margin-bottom: 4px;
    border: 1px dashed var(--rev-border);
}

.rev-variant-upload:hover {
    border-color: var(--rev-accent);
}

.rev-variant-upload img {
    width: 20px;
    height: 20px;
    object-fit: cover;
    border-radius: 4px;
}

/* --- Grouped sections --- */
.rev-variant-section {
    margin-bottom: 4px;
}

.rev-variant-section-title {
    font-size: 11px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .6px;
    color: var(--rev-text-muted);
    padding: 10px 0 8px;
    border-top: 1px solid var(--rev-border);
    margin-bottom: 10px;
}

/* --- Field grid --- */
.rev-variant-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 10px;
}

.rev-variant-field {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.rev-variant-field > label,
.rev-variant-field > .rev-field-label {
    font-size: 12px;
    color: var(--rev-text-muted);
    font-weight: 500;
}

.rev-variant-field-inline {
    display: flex;
    align-items: center;
    gap: 8px;
}

.rev-variant-field-inline .w-select {
    width: auto;
    flex-shrink: 0;
}

.rev-variant-field-full {
    grid-column: 1 / -1;
}

/* --- Mobile --- */
@media (max-width: 767px) {
    .rev-variant-grid {
        grid-template-columns: 1fr;
    }
    .rev-variant-field-full {
        grid-column: 1;
    }
}

/* ── Section header utility (icon + label + actions inline) ── */
.rev-section-header {
    display: flex;
    align-items: center;
    gap: 8px;
}

.rev-section-icon {
    font-size: 15px;
    color: var(--rev-accent);
}

.rev-section-label {
    font-size: 14px;
    font-weight: 700;
    color: var(--rev-text-primary);
}

/* ── Field hint text ── */
.rev-field-hint {
    font-size: 13px;
    color: var(--rev-text-muted);
}


/* ============================================================
   CUSTOM CHART COMPONENTS
   ============================================================ */

/* Chart series colour palette */
:root {
    --rev-chart-1: #e60e89;   /* magenta  */
    --rev-chart-2: #7c3aed;   /* violet   */
    --rev-chart-3: #10b981;   /* green    */
    --rev-chart-4: #f59e0b;   /* amber    */
    --rev-chart-5: #06b6d4;   /* cyan     */
    --rev-chart-prev: rgba(255, 255, 255, 0.25); /* previous-year muted line */
}

/* ── Chart card wrapper ── */
.rev-chart-card {
    background: var(--rev-gradient-card);
    border: 1px solid var(--rev-border-strong);
    border-radius: var(--rev-radius-md);
    box-shadow: var(--rev-shadow-card);
    padding: 20px;
    display: flex;
    flex-direction: column;
    gap: 12px;
    min-width: 0;
    overflow: hidden;
}

.rev-chart-card-header {
    display: flex;
    align-items: center;
    gap: 10px;
}

/* Per-card coloured icon chip in front of the (neutral) title — subtle differentiation. */
.rev-chart-card-icon {
    width: 28px;
    height: 28px;
    border-radius: 8px;
    display: grid;
    place-items: center;
    font-size: 12px;
    flex-shrink: 0;
    background: rgba(230, 14, 137, 0.14);
    color: var(--rev-accent);
}
.rev-chart-card-icon.rci-violet { background: var(--rev-violet-dim); color: #a78bfa; }
.rev-chart-card-icon.rci-amber  { background: rgba(245, 158, 11, 0.15); color: #fbbf24; }
.rev-chart-card-icon.rci-green  { background: rgba(16, 185, 129, 0.15); color: #34d399; }
.rev-chart-card-icon.rci-sky    { background: rgba(56, 189, 248, 0.15); color: #7dd3fc; }
.rev-chart-card-icon.rci-cyan   { background: rgba(6, 182, 212, 0.15); color: #22d3ee; }
.rev-chart-card-icon.rci-red    { background: rgba(239, 68, 68, 0.15); color: #f87171; }
/* Header no longer uses space-between (icon + title now flow left), so pin the legend right. */
.rev-chart-card-header .rev-chart-legend { margin-left: auto; }

.rev-chart-card-title {
    font-family: var(--rev-font-display);
    font-size: 13px;
    font-weight: 700;
    color: var(--rev-text);
    letter-spacing: 0.02em;
    text-transform: uppercase;
}

.rev-chart-card-subtitle {
    font-size: 12px;
    color: var(--rev-text-muted);
    margin-left: auto;
}

.rev-chart-legend {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
    justify-content: flex-end;
}

.rev-chart-legend-item {
    display: flex;
    align-items: center;
    gap: 5px;
    font-size: 11px;
    color: var(--rev-text-muted);
    font-weight: 600;
}

.rev-chart-legend-dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    flex-shrink: 0;
}

/* ── SVG area chart ── */
.rev-chart-svg {
    width: 100%;
    overflow: hidden;
    display: block;
}

.rev-chart-area-line {
    fill: none;
    stroke-width: 2.5;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.rev-chart-area-fill {
    opacity: 0.15;
}

.rev-chart-point {
    cursor: pointer;
    transition: r 120ms ease;
}

.rev-chart-point:hover {
    r: 5;
}

.rev-chart-grid-line {
    stroke: rgba(255, 255, 255, 0.05);
    stroke-width: 1;
}

.rev-chart-axis-label {
    fill: var(--rev-text-muted);
    font-size: 11px;
    font-family: var(--rev-font-body);
}

/* ── Donut chart ── */
.rev-donut-wrap {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 16px;
}

.rev-donut-svg {
    overflow: visible;
}

.rev-donut-segment {
    transition: opacity 150ms ease, filter 150ms ease;
    cursor: pointer;
}

.rev-donut-segment:hover {
    opacity: 0.85;
    filter: brightness(1.15);
}

.rev-donut-center-text {
    fill: var(--rev-text-muted);
    font-size: 12px;
    font-family: var(--rev-font-body);
    font-weight: 600;
    text-anchor: middle;
    dominant-baseline: middle;
}

.rev-donut-legend {
    display: flex;
    flex-wrap: wrap;
    gap: 8px 16px;
    justify-content: center;
    width: 100%;
}

.rev-donut-legend-item {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 12px;
    color: var(--rev-text-muted);
    font-weight: 500;
}

.rev-donut-legend-dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    flex-shrink: 0;
}

.rev-donut-empty {
    font-size: 13px;
    color: var(--rev-text-muted);
    text-align: center;
    padding: 32px 0;
}

/* ── Bar list ── */
.rev-bar-list {
    display: flex;
    flex-direction: column;
    gap: 10px;
    width: 100%;
}

.rev-bar-list-item {
    display: grid;
    grid-template-columns: auto 1fr auto;
    align-items: center;
    gap: 11px;
}

.rev-bar-list-rank {
    width: 22px;
    height: 22px;
    border-radius: 6px;
    background: var(--rev-surface-3);
    display: grid;
    place-items: center;
    font-family: var(--rev-font-display);
    font-size: 11px;
    font-weight: 700;
    color: var(--rev-text-muted);
    flex-shrink: 0;
}

.rev-bar-list-main {
    min-width: 0;
}

.rev-bar-list-label {
    display: block;
    font-size: 12.5px;
    font-weight: 600;
    color: var(--rev-text);
    min-width: 0;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.rev-bar-list-track {
    width: 100%;
    height: 7px;
    border-radius: 99px;
    background: var(--rev-surface-0);
    margin-top: 5px;
    overflow: hidden;
}

.rev-bar-list-fill {
    height: 100%;
    border-radius: 99px;
    width: 0;
    animation: rev-bar-fill 800ms cubic-bezier(0.4, 0, 0.2, 1) forwards;
    animation-delay: var(--bar-delay, 0ms);
}

@keyframes rev-bar-fill {
    to { width: var(--bar-pct, 0%); }
}

.rev-bar-list-value {
    font-size: 13px;
    font-weight: 700;
    color: var(--rev-text);
    min-width: 52px;
    text-align: right;
    flex-shrink: 0;
}

.rev-bar-list-empty {
    font-size: 13px;
    color: var(--rev-text-muted);
    text-align: center;
    padding: 24px 0;
}

/* ── Dashboard grid helpers ── */
.rev-dash-grid-2 {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 16px;
}

.rev-dash-grid-3 {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    gap: 16px;
}

.rev-dash-grid-2-staff {
    display: grid;
    grid-template-columns: 2fr 1fr;
    gap: 16px;
}

.rev-dash-section {
    margin-bottom: 16px;
}

@media (max-width: 1024px) {
    .rev-dash-grid-3 {
        grid-template-columns: 1fr 1fr;
    }
}

@media (max-width: 767px) {
    .rev-dash-grid-2,
    .rev-dash-grid-2-staff,
    .rev-dash-grid-3 {
        grid-template-columns: 1fr;
    }
}

/* ── Coming Soon ── */
.rev-coming-soon-wrap {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 24px;
    padding: 40px 0 60px;
}

.rev-coming-soon-hero {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 16px;
    text-align: center;
    max-width: 520px;
}

.rev-coming-soon-icon-ring {
    width: 80px;
    height: 80px;
    border-radius: 50%;
    background: rgba(230, 14, 137, 0.1);
    border: 2px solid rgba(230, 14, 137, 0.35);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 30px;
    color: var(--rev-accent);
    box-shadow: 0 0 32px rgba(230, 14, 137, 0.18);
    animation: rev-stat-card-in 400ms cubic-bezier(0.4, 0, 0.2, 1) both;
}

.rev-coming-soon-badge {
    display: inline-flex;
    align-items: center;
    padding: 4px 14px;
    border-radius: 99px;
    background: rgba(230, 14, 137, 0.12);
    border: 1px solid rgba(230, 14, 137, 0.35);
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--rev-accent);
}

.rev-coming-soon-title {
    font-family: var(--rev-font-display);
    font-size: 26px;
    font-weight: 800;
    color: var(--rev-text);
    margin: 0;
}

.rev-coming-soon-desc {
    font-size: 14px;
    color: var(--rev-text-muted);
    line-height: 1.7;
    margin: 0;
}

.rev-coming-soon-features {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 12px;
    width: 100%;
    max-width: 640px;
}

.rev-coming-soon-feature {
    display: flex;
    align-items: flex-start;
    gap: 14px;
    background: var(--rev-gradient-card);
    border: 1px solid var(--rev-border-strong);
    border-radius: var(--rev-radius-md);
    padding: 16px;
    box-shadow: var(--rev-shadow-card);
    animation: rev-stat-card-in 400ms cubic-bezier(0.4, 0, 0.2, 1) both;
}

.rev-coming-soon-feature-icon {
    width: 36px;
    height: 36px;
    border-radius: var(--rev-radius-md);
    background: rgba(230, 14, 137, 0.12);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 14px;
    color: var(--rev-accent);
    flex-shrink: 0;
}

.rev-coming-soon-feature-icon.violet {
    background: var(--rev-violet-dim);
    color: var(--rev-violet);
}

.rev-coming-soon-feature-icon.amber {
    background: var(--rev-amber-dim);
    color: var(--rev-amber);
}

.rev-coming-soon-feature-icon.green {
    background: var(--rev-green-dim);
    color: var(--rev-green);
}

.rev-coming-soon-feature-title {
    font-size: 13px;
    font-weight: 700;
    color: var(--rev-text);
    margin-bottom: 4px;
}

.rev-coming-soon-feature-desc {
    font-size: 12px;
    color: var(--rev-text-muted);
    line-height: 1.5;
}

@media (max-width: 479px) {
    .rev-coming-soon-features {
        grid-template-columns: 1fr;
    }
    .rev-coming-soon-title {
        font-size: 22px;
    }
}

/* ── Revenue staff table ── */
.rev-staff-table {
    width: 100%;
    border-collapse: collapse;
}

.rev-staff-table-header {
    display: grid;
    grid-template-columns: 2fr 1fr 1fr 1fr 1fr 1fr;
    gap: 8px;
    padding: 10px 16px;
    border-bottom: 1px solid var(--rev-border-strong);
    margin-bottom: 6px;
}

.rev-staff-table-header-cell {
    font-size: 11px;
    font-weight: 700;
    color: var(--rev-text-muted);
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

.rev-staff-table-header-cell.right {
    text-align: right;
}

.rev-staff-row {
    display: grid;
    grid-template-columns: 2fr 1fr 1fr 1fr 1fr 1fr;
    gap: 8px;
    align-items: center;
    padding: 12px 16px;
    background: var(--rev-surface-3);
    border-radius: var(--rev-radius-md);
    margin-bottom: 6px;
    border: 1px solid transparent;
    transition: border-color var(--rev-transition), transform var(--rev-transition), box-shadow var(--rev-transition);
}

.rev-staff-row:hover {
    border-color: rgba(230, 14, 137, 0.25);
    transform: translateY(-1px);
    box-shadow: var(--rev-shadow-hover);
}

.rev-staff-row.totals {
    background: rgba(230, 14, 137, 0.06);
    border-color: rgba(230, 14, 137, 0.15);
    margin-top: 8px;
}

.rev-staff-row-name {
    display: flex;
    align-items: center;
    gap: 10px;
}

.rev-staff-avatar {
    width: 32px;
    height: 32px;
    border-radius: 50%;
    background: var(--rev-violet-dim);
    border: 1px solid var(--rev-violet);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 11px;
    font-weight: 700;
    color: var(--rev-violet);
    flex-shrink: 0;
    text-transform: uppercase;
}

.rev-staff-name-text {
    font-size: 13px;
    font-weight: 600;
    color: var(--rev-text);
}

.rev-staff-cell {
    font-size: 13px;
    color: var(--rev-text-muted);
    text-align: right;
}

.rev-staff-cell.bold {
    font-weight: 700;
    color: var(--rev-text);
}

.rev-staff-totals-label {
    font-size: 12px;
    font-weight: 700;
    color: var(--rev-text-muted);
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

/* ============================================================
   CLOSE REGISTER — content classes  (.rev-cr-*)
   Shell classes (modal/mask/container/header/body/footer) now use rev-modal.
   ============================================================ */

/* Payment method cards */
.rev-cr-card {
    background: var(--rev-surface-3);
    border: 1px solid var(--rev-border);
    border-radius: var(--rev-radius-md);
    padding: 14px 16px;
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.rev-cr-card-title {
    font-size: 13px;
    font-weight: 700;
    color: var(--rev-text);
    margin-bottom: 4px;
    display: flex;
    align-items: center;
    gap: 7px;
}

.rev-cr-card-title i {
    color: var(--rev-accent);
}

/* Rows inside a card */
.rev-cr-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    font-size: 13px;
    color: var(--rev-text-muted);
    min-height: 28px;
}

.rev-cr-row.expected {
    font-weight: 600;
    color: var(--rev-text);
    border-top: 1px solid var(--rev-border);
    padding-top: 8px;
    margin-top: 2px;
}

.rev-cr-label {
    color: inherit;
}

.rev-cr-value {
    color: var(--rev-text);
    font-variant-numeric: tabular-nums;
}

/* Actual input */
.rev-cr-input-wrap {
    flex: 0 0 120px;
}

.rev-cr-input-wrap input {
    width: 100% !important;
    min-height: 34px !important;
    height: 34px !important;
    margin-bottom: 0 !important;
    text-align: right;
    font-variant-numeric: tabular-nums;
}

/* Difference value */
.rev-cr-diff {
    font-weight: 600;
    font-variant-numeric: tabular-nums;
    color: var(--rev-text-muted);
    transition: color var(--rev-transition);
}

.rev-cr-diff.balanced {
    color: var(--rev-green);
}

.rev-cr-diff.unbalanced {
    color: var(--rev-red);
}

/* Redeemed pills */
.rev-cr-redeemed-pills {
    display: flex;
    gap: 10px;
    flex-wrap: wrap;
}

.rev-cr-pill {
    flex: 1;
    min-width: 120px;
    background: rgba(255, 255, 255, 0.04);
    border: 1px solid var(--rev-border);
    border-radius: var(--rev-radius-sm);
    padding: 10px 12px;
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.rev-cr-pill-label {
    font-size: 11px;
    color: var(--rev-text-muted);
    text-transform: uppercase;
    letter-spacing: 0.05em;
    display: flex;
    align-items: center;
    gap: 5px;
}

.rev-cr-pill-label i {
    color: var(--rev-amber);
}

.rev-cr-pill-value {
    font-size: 16px;
    font-weight: 700;
    color: var(--rev-text);
    font-variant-numeric: tabular-nums;
}

/* Session totals summary row */
.rev-cr-totals-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-size: 13px;
    color: var(--rev-text-muted);
    padding: 0 4px;
}

.rev-cr-totals-value {
    font-size: 15px;
    font-weight: 700;
    color: var(--rev-text);
    font-variant-numeric: tabular-nums;
}

/* Notes */
.rev-cr-notes-wrap {
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.rev-cr-notes-label {
    font-size: 11px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: var(--rev-text-muted);
}

.rev-cr-notes-wrap input {
    width: 100% !important;
    min-height: 36px !important;
    height: 36px !important;
    margin-bottom: 0 !important;
}

/* Footer and mobile rules now handled by rev-modal */


/* ============================================================
   DatesControl — expanded form layout (reuses rev-pill-* for shell)
   ============================================================ */

/* Desktop: all 4 selects side-by-side */
.dc-form-row {
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
    margin-bottom: 8px;
}

.dc-select-type  { flex: 1.5 1 120px; min-width: 0; }
.dc-select-day   { flex: 0.6 1 60px;  min-width: 0; }
.dc-select-month { flex: 1   1 80px;  min-width: 0; }
.dc-select-year  { flex: 0.9 1 74px;  min-width: 0; }

.dc-form-row .input {
    width: 100%;
    margin-bottom: 0;
}

.dc-form-footer {
    display: flex;
    justify-content: flex-end;
}

/* ============================================================
   WorkingDaysControl — expanded form layout
   ============================================================ */

.dc-wdc-day  { flex: 1.2 1 100px; min-width: 0; }
.dc-wdc-time { flex: 1   1 100px; min-width: 0; }

/* ============================================================
   HolidayEntitlementsControl — expanded form layout
   ============================================================ */

.dc-hol-field {
    display: flex;
    flex-direction: column;
    flex: 1 1 130px;
    min-width: 0;
}

.dc-hol-days { flex: 0.6 1 80px; }

.dc-hol-label {
    font-size: 11px;
    color: var(--rev-text-muted);
    margin-bottom: 4px;
    font-weight: 500;
    text-transform: uppercase;
    letter-spacing: 0.04em;
}

.dc-hol-field .input {
    width: 100%;
    margin-bottom: 0;
}

/* ============================================================
   DurationControl — expanded form layout
   ============================================================ */

.dc-dur-input { flex: 1 1 80px; max-width: 160px; min-width: 0; }

/* Gap badge — muted amber to distinguish from Time blocks */
.rev-pill-badge.gap,
.rev-pill-badge-gap {
    background: rgba(217, 119, 6, 0.15);
    color: var(--rev-amber);
}

/* Time badge — muted green for duration time blocks */
.rev-pill-badge-time {
    background: rgba(16, 185, 129, 0.15);
    color: #10b981;
}

/* Day dots — visual week strip for working days */
.rev-day-dots {
    display: flex;
    gap: 6px;
    margin-top: 4px;
}

.rev-day-dot {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 3px;
}

.rev-day-dot-label {
    font-size: 10px;
    font-weight: 600;
    color: var(--rev-text-muted);
    line-height: 1;
}

.rev-day-dot-indicator {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: var(--rev-surface-3);
}

.rev-day-dot.active .rev-day-dot-label {
    color: var(--rev-text);
}

.rev-day-dot.active .rev-day-dot-indicator {
    background: var(--rev-accent);
}

/* Duration total in header */
.rev-duration-total {
    font-size: 12px;
    font-weight: 400;
    color: var(--rev-text-muted);
    margin-left: 6px;
}

/* Pill form field label (used in holiday entitlements etc.) */
.rev-pill-field-label {
    font-size: 11px;
    color: var(--rev-text-muted);
    font-weight: 500;
}

/* Discount toggle buttons */
.rev-discount-toggle {
    width: 32px;
    height: 32px;
    border-radius: var(--rev-radius-sm);
    border: 1px solid var(--rev-border);
    background: var(--rev-surface-2);
    color: var(--rev-text-muted);
    font-size: 13px;
    font-weight: 600;
    cursor: pointer;
    transition: background 150ms, color 150ms, border-color 150ms;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0;
}

.rev-discount-toggle:hover {
    background: var(--rev-surface-3);
    color: var(--rev-text);
}

.rev-discount-toggle.active {
    background: var(--rev-accent);
    border-color: var(--rev-accent);
    color: #fff;
}

/* Job role pricing pill rows */
.rev-role-price-row {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 8px 12px;
    background: var(--rev-surface-3);
    border-radius: var(--rev-radius-sm);
    border: 1px solid var(--rev-border);
    font-size: 13px;
}

.rev-role-price-name {
    font-weight: 600;
    color: var(--rev-text);
    min-width: 0;
    white-space: nowrap;
}

.rev-role-price-amount {
    color: var(--rev-accent);
    font-weight: 600;
    margin-left: auto;
    white-space: nowrap;
}

.rev-role-price-duration {
    color: var(--rev-text-muted);
    font-size: 12px;
    white-space: nowrap;
    padding-left: 8px;
    border-left: 1px solid var(--rev-border);
}

/* Dimmed unconfigured pill items */
.rev-pill-item.dimmed {
    opacity: 0.45;
    padding-top: 6px;
    padding-bottom: 6px;
}

.rev-pill-item.dimmed:hover {
    opacity: 0.7;
}

/* Duration summary — read-only view */
.rev-duration-summary {
    display: flex;
    flex-direction: column;
    gap: 16px;
}

.rev-duration-summary-row {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.rev-duration-summary-label {
    font-size: 11px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: var(--rev-text-muted);
}

.rev-duration-summary-value {
    display: flex;
    align-items: baseline;
    flex-wrap: wrap;
    gap: 8px;
    font-size: 14px;
    color: var(--rev-text);
}

.rev-duration-summary-breakdown {
    font-size: 12px;
    color: var(--rev-text-muted);
}

.rev-duration-summary-price {
    font-size: 13px;
    color: var(--rev-accent);
    font-weight: 600;
}

/* Compact page heading for info pages */
.rev-page-heading-compact {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 8px 0;
}

.rev-page-heading-title {
    font-size: 12px;
    color: var(--rev-text-muted);
    font-weight: 500;
}

/* ============================================================
   CLIENT DETAIL PAGE — compact header, inline edit, timeline
   ============================================================ */

.rev-address-lookup-item {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    padding: 10px 12px;
    border-radius: var(--rev-radius-sm);
    background: var(--rev-surface-1);
    border: 1px solid var(--rev-border);
    cursor: pointer;
    font-size: 13px;
    color: var(--rev-text);
    transition: background 150ms, border-color 150ms;
}

.rev-address-lookup-item:hover {
    background: var(--rev-surface-2);
    border-color: var(--rev-accent);
}

.rev-address-lookup-item i {
    margin-top: 2px;
}

.rev-segmented-control {
    display: inline-flex;
    border: 1px solid var(--rev-border);
    border-radius: var(--rev-radius-md);
    overflow: hidden;
}

.rev-segment {
    padding: 6px 20px;
    font-size: 13px;
    font-weight: 500;
    background: transparent;
    color: var(--rev-text-muted);
    border: none;
    cursor: pointer;
    transition: background 150ms, color 150ms;
}

.rev-segment:not(:last-child) {
    border-right: 1px solid var(--rev-border);
}

.rev-segment.active {
    background: var(--rev-accent);
    color: #fff;
}

.rev-segment:hover:not(.active) {
    background: rgba(255, 255, 255, 0.05);
    color: var(--rev-text);
}

.rev-back-link {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: 13px;
    color: var(--rev-text-muted);
    text-decoration: none;
    transition: color 150ms;
}

.rev-back-link:hover {
    color: var(--rev-accent);
}

.rev-back-link i {
    font-size: 12px;
}

/* ── Profile Header ── */
.rev-client-header {
    background: var(--rev-surface-2);
    border: 1px solid var(--rev-border);
    border-radius: var(--rev-radius-lg);
    padding: 20px 24px;
    margin-bottom: 20px;
    animation: rev-card-in 200ms cubic-bezier(0.4, 0, 0.2, 1) both;
}

.rev-client-header + .row .w-tab-menu,
.rev-client-header ~ .rev-client-columns .w-tab-menu { margin-top: 0; }
.rev-client-header .rev-stat-card { padding: 14px 16px; align-items: center; text-align: center; min-height: 75px; box-sizing: border-box; }
.rev-client-header .rev-stat-top { justify-content: center; }
.rev-client-header .rev-stat-body { align-items: center; }
.rev-client-header .rev-stat-value { font-size: 20px; }
.rev-client-header .rev-stat-label { color: rgba(235, 237, 240, 0.55); }
.rev-client-header .rev-stat-icon { width: 32px; height: 32px; font-size: 13px; }

.rev-client-profile-row {
    display: flex;
    align-items: center;
    gap: 16px;
    flex-wrap: wrap;
}

.rev-client-avatar {
    width: 56px;
    height: 56px;
    border-radius: 50%;
    background-size: cover;
    background-position: center;
    border: 2px solid var(--rev-border-strong);
    cursor: pointer;
    flex-shrink: 0;
    transition: border-color 200ms ease;
}

.rev-client-avatar:hover {
    border-color: var(--rev-accent);
}

.rev-client-identity {
    display: flex;
    flex-direction: column;
    gap: 2px;
    flex: 1;
    min-width: 0;
}

.rev-client-identity h5 {
    margin: 0;
    font-size: 18px;
    font-weight: 600;
    color: var(--rev-text);
}

.rev-client-identity .rev-client-meta {
    font-size: 13px;
    color: var(--rev-text-muted);
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
}

.rev-client-cta-row {
    display: flex;
    gap: 8px;
    flex-shrink: 0;
}

.rev-client-cta-row .cta-btn {
    background: transparent;
    border: 1.5px solid var(--rev-accent);
    color: var(--rev-accent);
    border-radius: var(--rev-radius-md);
    font-weight: 500;
    display: inline-flex;
    flex-direction: row;
    align-items: center;
    justify-content: center;
    gap: 6px;
    padding: 8px 16px;
    width: auto;
    height: auto;
    font-size: 13px;
    text-decoration: none;
    cursor: pointer;
    transition: background 200ms ease, color 200ms ease, border-color 200ms ease;
}

.rev-client-cta-row .cta-btn:hover {
    background: rgba(230, 14, 137, 0.1);
    border-color: var(--rev-accent);
    color: var(--rev-accent);
}

.rev-client-cta-row .cta-btn:active {
    transform: scale(0.97);
}

.rev-client-cta-row .cta-btn:disabled,
.rev-client-cta-row .cta-btn[disabled] {
    opacity: 0.45;
    cursor: not-allowed;
    border-color: var(--rev-border);
    color: var(--rev-text-muted);
    background: transparent;
}

.rev-client-cta-row .cta-btn:disabled:hover,
.rev-client-cta-row .cta-btn[disabled]:hover {
    background: transparent;
    border-color: var(--rev-border);
    color: var(--rev-text-muted);
}

.rev-client-cta-row .cta-btn i {
    font-size: 13px;
}

.rev-client-cta-row .cta-btn.cta-alert {
    border-color: var(--rev-amber, #f59e0b);
    color: var(--rev-amber, #f59e0b);
}

.rev-client-cta-row .cta-btn.cta-alert:hover {
    background: rgba(245, 158, 11, 0.12);
}

.rev-client-cta-row .cta-btn .rev-badge-count {
    position: absolute;
    top: -6px;
    right: -6px;
    min-width: 18px;
    height: 18px;
    border-radius: 9px;
    background: var(--rev-amber, #f59e0b);
    color: #000;
    font-size: 11px;
    font-weight: 700;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0 4px;
    line-height: 1;
}

.rev-client-alert-badge {
    position: relative;
    cursor: pointer;
    background: rgba(245, 158, 11, 0.12);
    border: 1.5px solid var(--rev-amber, #f59e0b);
    border-radius: 20px;
    padding: 6px 14px;
    margin-left: 8px;
    display: none; /* replaced by cta-btn pattern */
    align-items: center;
    gap: 6px;
    transition: background 200ms ease, transform 200ms ease;
}

.rev-client-alert-badge:hover {
    background: rgba(245, 158, 11, 0.2);
    transform: scale(1.03);
}

.rev-client-alert-badge .rev-badge-count {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 13px;
    font-weight: 600;
    color: var(--rev-amber, #f59e0b);
    background: none;
    padding: 0;
    min-width: auto;
    height: auto;
    border-radius: 0;
}

.rev-client-alert-badge .rev-badge-count::before {
    content: "\f071";
    font-family: "Font Awesome 6 Free";
    font-weight: 900;
    font-size: 12px;
    margin-right: 5px;
    color: var(--rev-amber, #f59e0b);
}

.rev-client-alert-badge .rev-badge-icon {
    font-size: 14px;
    color: var(--rev-text-muted);
    transition: color 200ms ease;
}

.rev-client-alert-badge:hover .rev-badge-icon {
    color: var(--rev-amber, #f59e0b);
}

@keyframes rev-alert-pulse {
    0%, 100% { box-shadow: 0 0 0 0 rgba(245, 158, 11, 0.3); }
    50% { box-shadow: 0 0 0 6px rgba(245, 158, 11, 0); }
}

.rev-client-alert-badge:has(.rev-badge-count) {
    animation: rev-alert-pulse 2.5s ease-in-out infinite;
}

/* Stats row in header */
.rev-client-stats {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(120px, 1fr));
    gap: 12px;
    margin-top: 16px;
    padding-top: 16px;
    border-top: 1px solid var(--rev-border);
}

.rev-client-stat {
    display: flex;
    flex-direction: column;
    gap: 2px;
    text-align: center;
}

.rev-client-stat.clickable {
    cursor: pointer;
    border-radius: var(--rev-radius-md);
    padding: 8px 4px;
    transition: background 200ms ease;
}

.rev-client-stat.clickable:hover {
    background: var(--rev-surface-3);
}

.rev-client-stat-label {
    font-size: 11px;
    font-weight: 600;
    color: var(--rev-text-muted);
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

.rev-client-stat-value {
    font-size: 22px;
    font-weight: 700;
    color: var(--rev-text);
    letter-spacing: -0.3px;
}

/* ── Page Loading State ──
   Centres the spinner at the optical centre of the viewport, not the centre
   of the available content area. Uses dvh on supporting browsers so mobile
   address-bar collapse doesn't shift the spinner; falls back to vh elsewhere.

   The offset must equal *twice* the distance from the viewport top to the
   loading container's top (chrome above), so that
       container_top + (viewport - offset) / 2 = viewport / 2
   centres the spinner at viewport / 2 regardless of how much chrome is above.

   The default of 240px ≈ 2 × the typical detail-page chrome (top bar + back
   header ≈ 116px). Pages with more chrome above the loading container should
   override --rev-page-loading-offset inline. Examples:
     - Detail pages   : default (240px)         — chrome ~116px
     - Dashboard      : 560px (date + tab strip) — chrome ~278px
     - My Profile     : default
*/
.rev-page-loading {
    --rev-page-loading-offset: 240px;
    min-height: calc(100vh - var(--rev-page-loading-offset));
    min-height: calc(100dvh - var(--rev-page-loading-offset));
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 40px;
    box-sizing: border-box;
}

/* ── Inline Editable Sections ── */
.rev-edit-section {
    border-bottom: 1px solid var(--rev-border);
    padding: 20px 0;
    animation: rev-card-in 200ms cubic-bezier(0.4, 0, 0.2, 1) both;
}

.rev-edit-section:first-child {
    padding-top: 0;
}

.rev-edit-section:last-child {
    border-bottom: none;
}

.rev-edit-section-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 16px;
}

.rev-edit-section-title {
    font-size: 13px;
    font-weight: 700;
    color: var(--rev-text-muted);
    text-transform: none;
    letter-spacing: 0.02em;
    display: flex;
    align-items: center;
    gap: 8px;
}

.rev-edit-section-title i {
    font-size: 14px;
    color: var(--rev-accent);
}

.rev-edit-section-title i.rev-icon-contact,
.rev-control-title i.rev-icon-contact { color: #e91e8c; }
.rev-edit-section-title i.rev-icon-address,
.rev-control-title i.rev-icon-address { color: #f59e0b; }
.rev-edit-section-title i.rev-icon-personal,
.rev-control-title i.rev-icon-personal { color: #3b82f6; }
.rev-edit-section-title i.rev-icon-prefs,
.rev-control-title i.rev-icon-prefs { color: #10b981; }

.rev-edit-btn {
    background: none;
    border: 1px solid var(--rev-border);
    border-radius: var(--rev-radius-md);
    color: var(--rev-text-muted);
    cursor: pointer;
    padding: 5px 12px;
    font-size: 13px;
    display: flex;
    align-items: center;
    gap: 6px;
    transition: all 200ms ease;
}

.rev-edit-btn:hover {
    color: var(--rev-accent);
    border-color: var(--rev-accent);
    background: rgba(230, 14, 137, 0.08);
}

.rev-edit-actions {
    display: flex;
    gap: 8px;
    justify-content: flex-end;
    margin-top: 16px;
    padding-top: 12px;
    border-top: 1px solid var(--rev-border);
}

@media (max-width: 480px) {
    .rev-edit-actions .w-button {
        flex: 1;
        text-align: center;
        padding-left: 8px;
        padding-right: 8px;
        font-size: 12px;
        min-width: 0;
    }
}

/* Discard unsaved changes banner */
.rev-discard-banner {
    margin-top: 16px;
    padding: 14px 16px;
    background: rgba(245, 158, 11, 0.1);
    border: 1px solid rgba(245, 158, 11, 0.3);
    border-radius: var(--rev-radius-md);
    animation: rev-discard-pulse 400ms ease-out;
}

.rev-discard-banner-content {
    display: flex;
    align-items: center;
    gap: 10px;
    font-size: 13px;
    font-weight: 600;
    color: #f59e0b;
    margin-bottom: 12px;
}

.rev-discard-banner-content i {
    font-size: 16px;
}

.rev-discard-banner-actions {
    display: flex;
    gap: 8px;
    justify-content: flex-end;
}

.rev-discard-btn-keep {
    padding: 7px 16px;
    font-size: 12px;
    font-weight: 600;
    border: 1px solid var(--rev-border);
    border-radius: 6px;
    background: transparent;
    color: var(--rev-text);
    cursor: pointer;
    transition: all 150ms;
}

.rev-discard-btn-keep:hover {
    background: rgba(255, 255, 255, 0.08);
    border-color: var(--rev-text-muted);
}

.rev-discard-btn-discard {
    padding: 7px 16px;
    font-size: 12px;
    font-weight: 600;
    border: none;
    border-radius: 6px;
    background: #ef4444;
    color: #fff;
    cursor: pointer;
    transition: opacity 150ms;
}

.rev-discard-btn-discard:hover {
    opacity: 0.85;
}

@keyframes rev-discard-pulse {
    0% { transform: scale(0.97); opacity: 0; }
    50% { transform: scale(1.01); }
    100% { transform: scale(1); opacity: 1; }
}

@media (max-width: 480px) {
    .rev-discard-banner-actions {
        flex-direction: row;
    }
    .rev-discard-btn-keep,
    .rev-discard-btn-discard {
        flex: 1;
        text-align: center;
    }
}

/* Read-only field display */
.rev-read-fields {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 16px 28px;
}

.rev-read-field {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.rev-read-field-label {
    font-size: 12px;
    font-weight: 600;
    color: var(--rev-text-muted);
    text-transform: uppercase;
    letter-spacing: 0.04em;
}

.rev-read-field-value {
    font-size: 15px;
    color: var(--rev-text);
}

.rev-read-field-value a {
    color: var(--rev-text);
    text-decoration: none;
    transition: color 200ms ease;
}

.rev-read-field-value a:hover {
    color: var(--rev-accent);
}

.rev-read-field-value .rev-empty {
    color: var(--rev-text-muted);
    font-style: italic;
}

/* Preference badges */
.rev-pref-row {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

.rev-pref-badge {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 4px 10px;
    border-radius: var(--rev-radius-md);
    font-size: 12px;
    font-weight: 500;
}

.rev-pref-badge.on {
    background: var(--rev-green-dim);
    color: var(--rev-green);
}

.rev-pref-badge.off {
    background: rgba(255, 255, 255, 0.05);
    color: var(--rev-text-muted);
}

.rev-pref-badge.pending {
    background: rgba(245, 158, 11, 0.12);
    color: #f59e0b;
}

.rev-default-pill {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 2px 8px;
    border-radius: 10px;
    background: rgba(230, 14, 137, 0.12);
    color: var(--rev-accent);
    font-size: 11px;
    font-weight: 600;
    margin-left: 6px;
    vertical-align: middle;
}

.rev-created-on {
    font-size: 11px;
    color: var(--rev-text-muted);
    margin-top: 16px;
    padding-top: 8px;
    opacity: 0.7;
}

/* ── Unified Timeline ── */
.rev-timeline-filters {
    display: flex;
    gap: 6px;
    flex-wrap: wrap;
    margin-bottom: 16px;
}

.rev-filter-chip {
    background: var(--rev-surface-3);
    border: 1px solid var(--rev-border);
    border-radius: 20px;
    padding: 5px 14px;
    font-size: 12px;
    font-weight: 500;
    color: var(--rev-text-muted);
    cursor: pointer;
    transition: all 200ms ease;
    white-space: nowrap;
}

.rev-filter-chip:hover {
    border-color: var(--rev-accent);
    color: var(--rev-text);
}

.rev-filter-chip.active {
    background: var(--rev-accent);
    border-color: var(--rev-accent);
    color: #fff;
}

.rev-show-more {
    display: block;
    width: 100%;
    padding: 10px;
    margin: 4px 0 16px;
    background: var(--rev-surface-3);
    border: 1px dashed var(--rev-border);
    border-radius: var(--rev-radius-lg);
    color: var(--rev-text-muted);
    font-size: 12px;
    font-weight: 500;
    cursor: pointer;
    transition: all 200ms ease;
    text-align: center;
}

.rev-show-more:hover {
    border-color: var(--rev-accent);
    color: var(--rev-text);
}

.rev-timeline {
    display: flex;
    flex-direction: column;
    scrollbar-width: thin;
    scrollbar-color: rgba(255,255,255,0.12) transparent;
}

.rev-timeline::-webkit-scrollbar { width: 5px; }
.rev-timeline::-webkit-scrollbar-track { background: transparent; }
.rev-timeline::-webkit-scrollbar-thumb {
    background: rgba(255,255,255,0.12);
    border-radius: 10px;
}
.rev-timeline:hover::-webkit-scrollbar-thumb { background: rgba(255,255,255,0.2); }

.rev-timeline-date-group {
    font-size: 12px;
    font-weight: 600;
    color: var(--rev-text-muted);
    text-transform: uppercase;
    letter-spacing: 0.04em;
    padding: 12px 0 8px;
    border-bottom: 1px solid var(--rev-border);
    margin-bottom: 4px;
}

.rev-timeline-item {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    padding: 10px 8px;
    border-radius: var(--rev-radius-md);
    transition: background 200ms ease;
    animation: rev-row-in 280ms cubic-bezier(0.34, 1.56, 0.64, 1) both;
}

.rev-timeline-item:hover {
    background: var(--rev-surface-3);
}

.rev-timeline-item.clickable {
    cursor: pointer;
}

.rev-timeline-icon {
    width: 32px;
    height: 32px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 13px;
    flex-shrink: 0;
}

.rev-timeline-icon.appointment {
    background: rgba(59, 130, 246, 0.15);
    color: #3b82f6;
}

.rev-timeline-icon.service {
    background: rgba(230, 14, 137, 0.15);
    color: var(--rev-accent);
}

.rev-timeline-icon.product {
    background: rgba(139, 92, 246, 0.15);
    color: var(--rev-violet);
}

.rev-timeline-icon.gift {
    background: rgba(217, 119, 6, 0.15);
    color: var(--rev-amber);
}

.rev-timeline-icon.account {
    background: var(--rev-green-dim);
    color: var(--rev-green);
}

.rev-timeline-icon.sms {
    background: rgba(99, 102, 241, 0.15);
    color: #6366f1;
}

.rev-timeline-icon.email {
    background: rgba(56, 189, 248, 0.15);
    color: #38bdf8;
}

.rev-timeline-icon.holiday {
    background: rgba(245, 158, 11, 0.15);
    color: var(--rev-amber);
}

.rev-timeline-content {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.rev-timeline-title {
    font-size: 14px;
    font-weight: 500;
    color: var(--rev-text);
}

.rev-timeline-subtitle {
    font-size: 12px;
    color: var(--rev-text-muted);
}

.rev-timeline-details {
    margin-top: 4px;
    padding: 4px 8px 4px 10px;
    border-left: 2px solid var(--rev-accent);
    background: rgba(230, 14, 137, 0.06);
    border-radius: 0 4px 4px 0;
    font-size: 12px;
    color: var(--rev-text);
    font-style: italic;
    display: inline-flex;
    align-items: flex-start;
    gap: 6px;
    max-width: 100%;
    word-break: break-word;
}

.rev-timeline-details i {
    color: var(--rev-accent);
    font-size: 9px;
    margin-top: 4px;
    flex: 0 0 auto;
}

.rev-timeline-right {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 2px;
    flex-shrink: 0;
}

.rev-timeline-amount {
    font-size: 14px;
    font-weight: 600;
    color: var(--rev-text);
}

.rev-timeline-status {
    font-size: 11px;
    font-weight: 500;
    padding: 2px 8px;
    border-radius: 10px;
}

.rev-timeline-status.green {
    background: var(--rev-green-dim);
    color: var(--rev-green);
}

.rev-timeline-status.amber {
    background: rgba(217, 119, 6, 0.15);
    color: var(--rev-amber);
}

.rev-timeline-status.red {
    background: rgba(239, 68, 68, 0.15);
    color: var(--rev-red, #ef4444);
}

.rev-timeline-upcoming-header {
    font-size: 13px;
    font-weight: 600;
    color: var(--rev-accent);
    text-transform: uppercase;
    letter-spacing: 0.04em;
    padding: 0 0 8px;
    margin-bottom: 4px;
    border-bottom: 1px solid var(--rev-border);
}

/* ============================================================
   NOTES FAB + OVERLAY (tablet/mobile)
   ============================================================ */

/* FAB — hidden on desktop, shown via media query */
.rev-notes-fab {
    display: none;
    position: fixed;
    bottom: 160px;
    right: 24px;
    width: 56px;
    height: 56px;
    border-radius: 50%;
    background: var(--rev-accent);
    color: #fff;
    border: none;
    cursor: pointer;
    z-index: 1150;
    box-shadow: 0 4px 16px rgba(230, 14, 137, 0.4), 0 2px 6px rgba(0, 0, 0, 0.3);
    font-size: 22px;
    align-items: center;
    justify-content: center;
    transition: transform 200ms ease, box-shadow 200ms ease;
}

.rev-notes-fab:hover {
    transform: scale(1.08);
}

.rev-notes-fab:active {
    transform: scale(0.95);
}

.rev-notes-fab-count {
    position: absolute;
    top: -4px;
    right: -4px;
    background: var(--rev-amber, #f59e0b);
    color: #000;
    font-size: 11px;
    font-weight: 700;
    min-width: 20px;
    height: 20px;
    border-radius: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0 5px;
}

/* Full-screen overlay for notes */
.rev-notes-overlay {
    display: none;
    position: fixed;
    inset: 0;
    z-index: 1200;
    background: var(--rev-surface-1);
    flex-direction: column;
}

.rev-notes-overlay.open {
    display: flex;
}

.rev-notes-overlay-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 12px 16px;
    border-bottom: 1px solid var(--rev-border);
    flex-shrink: 0;
}

.rev-notes-overlay-header h4 {
    margin: 0;
    font-size: 16px;
    font-weight: 600;
    color: var(--rev-text);
}

.rev-notes-overlay-close {
    background: none;
    border: none;
    color: var(--rev-text-muted);
    font-size: 20px;
    cursor: pointer;
    padding: 8px;
    border-radius: var(--rev-radius-sm);
    transition: color 150ms ease, background 150ms ease;
}

.rev-notes-overlay-close:hover {
    color: var(--rev-text);
    background: var(--rev-surface-3);
}

/* Override notes panel sizing when inside overlay */
.rev-notes-overlay .rev-notes-panel {
    max-height: none;
    height: 100%;
    flex: 1;
    min-height: 0;
    padding: 0 16px;
}

.rev-notes-overlay .rev-notes-thread {
    flex: 1;
}

/* ── Client Detail Responsive ── */

/* Tablet — 1024px */
@media (max-width: 1024px) {
    .rev-client-columns {
        flex-direction: column;
    }

    .rev-client-main {
        width: 100%;
    }

    .rev-notes-col {
        display: none !important;
    }

    .rev-notes-fab {
        display: flex !important;
    }

    body:not(:has(.ai-orb)) .rev-notes-fab {
        bottom: 24px;
    }

    .rev-client-header {
        padding: 16px 20px;
    }

    .rev-client-cta-row {
        flex-wrap: wrap;
    }

    .rev-client-header .rev-kpi-row {
        grid-template-columns: repeat(3, 1fr);
    }
}

/* Mobile — 767px */
@media (max-width: 767px) {
    .rev-client-profile-row {
        flex-direction: column;
        text-align: center;
    }

    .rev-client-identity {
        align-items: center;
    }

    .rev-client-cta-row {
        justify-content: center;
    }

    .rev-client-cta-row .cta-btn span {
        display: none;
    }

    .rev-client-cta-row .cta-btn {
        padding: 10px;
        width: 42px;
        height: 42px;
        border-radius: 50%;
    }

    .rev-client-cta-row .cta-btn i {
        font-size: 16px;
    }

    .rev-client-header .rev-kpi-row {
        grid-template-columns: repeat(2, 1fr);
    }

    .rev-read-fields {
        grid-template-columns: 1fr;
    }

    .rev-client-header {
        padding: 14px 16px;
        margin-bottom: 14px;
    }

    .rev-notes-fab {
        bottom: calc(var(--rev-bottom-nav-height, 64px) + 100px);
        width: 40px;
        height: 40px;
        font-size: 16px;
    }

    /* When AI orb is not present, move notes FAB to AI orb position */
    body:not(:has(.ai-orb)) .rev-notes-fab {
        bottom: calc(var(--rev-bottom-nav-height, 64px) + 16px);
    }

    .rev-notes-fab-count {
        font-size: 9px;
        min-width: 14px;
        height: 14px;
        top: -4px;
        right: -4px;
    }

    .rev-edit-section:last-child {
        padding-bottom: 80px;
    }

    .rev-timeline-item {
        padding: 8px 4px;
        gap: 10px;
    }

    .rev-timeline-icon {
        width: 28px;
        height: 28px;
        font-size: 12px;
    }

    .rev-timeline-title {
        font-size: 13px;
    }

    .rev-timeline-amount {
        font-size: 13px;
    }

    .rev-timeline-filters {
        flex-wrap: wrap;
        overflow-x: visible;
        padding-bottom: 4px;
        max-width: 100%;
    }

    .rev-timeline-date-select {
        margin-left: auto;
    }

    .w-tabs,
    .tabs-content.w-tab-content,
    .rev-tab-panel {
        min-width: 0;
        max-width: 100%;
    }

    .rev-timeline-filters::-webkit-scrollbar {
        display: none;
    }

    .rev-client-main {
        min-height: auto;
        min-width: 0;
        overflow-x: hidden;
    }
}

/* Extra small — 479px */
@media (max-width: 479px) {
    .rev-client-header {
        padding: 12px;
    }

    .rev-client-avatar {
        width: 48px;
        height: 48px;
    }

    .rev-client-identity h5 {
        font-size: 16px;
    }

    .rev-client-header .rev-stat-card {
        padding: 10px 12px;
    }

    .rev-client-header .rev-stat-value {
        font-size: 16px;
    }

    .rev-client-header .rev-stat-label,
    .rev-client-header .rev-stat-trend {
        font-size: 10px;
    }

    .rev-client-header .rev-stat-icon {
        width: 26px;
        height: 26px;
        font-size: 11px;
    }

    .rev-client-header .rev-kpi-row {
        grid-template-columns: repeat(2, 1fr);
    }

    .rev-client-cta-row .cta-btn {
        width: 38px;
        height: 38px;
        padding: 8px;
    }

    .rev-notes-fab {
        font-size: 18px;
    }
}

/* ============================================================
   CLIENT DETAIL — Two-column layout
   ============================================================ */
.rev-client-columns {
    display: flex;
    gap: 28px;
    align-items: flex-start;
}

.rev-client-main {
    flex: 3;
    min-width: 0;
    background: var(--rev-surface-2);
    border: 1px solid var(--rev-border);
    border-radius: var(--rev-radius-lg);
    padding: 0 24px 20px;
    animation: rev-card-in 200ms cubic-bezier(0.4, 0, 0.2, 1) both;
}

.rev-notes-col {
    position: sticky;
    top: 20px;
    flex: 2;
    min-height: 200px;
    max-height: min(calc(100vh - 100px), 850px);
    overflow: hidden;
    background: var(--rev-surface-2);
    border: 1px solid var(--rev-border);
    border-radius: var(--rev-radius-lg);
    padding: 20px 20px 12px;
    animation: rev-card-in 200ms cubic-bezier(0.4, 0, 0.2, 1) both;
    display: flex;
    flex-direction: column;
}

/* ============================================================
   NOTES PANEL V2 — Card-Based Timeline
   ============================================================ */

.rev-notes-panel {
    display: flex;
    flex-direction: column;
    flex: 1;
    min-height: 0;
    overflow: hidden;
}

/* Header */
.rev-notes-header {
    display: flex;
    align-items: center;
    gap: 2px;
    padding: 0 0 12px 0;
    border-bottom: 1px solid var(--rev-border);
    flex-shrink: 0;
}

.rev-notes-title {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 14px;
    font-weight: 600;
    color: var(--rev-text-muted);
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

.rev-notes-title i {
    font-size: 14px;
    color: var(--rev-accent);
}

.rev-notes-count {
    margin-left: auto;
    color: #fff;
    font-size: 11px;
    font-weight: 700;
    background: var(--rev-accent);
    min-width: 20px;
    height: 20px;
    border-radius: 50%;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0 5px;
}

/* + New Note button */
.rev-notes-new-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    width: 100%;
    padding: 10px 16px;
    margin: 12px 0;
    background: transparent;
    border: 1px dashed var(--rev-border);
    border-radius: var(--rev-radius-md);
    color: var(--rev-text-muted);
    font-size: 13px;
    font-weight: 600;
    cursor: pointer;
    transition: all 200ms;
}

.rev-notes-new-btn:hover {
    color: var(--rev-accent);
    border-color: var(--rev-accent);
    background: rgba(230, 14, 137, 0.06);
}

.rev-notes-new-btn i {
    font-size: 12px;
}

/* Composer (expanded) */
.rev-notes-composer {
    margin: 12px 0;
    padding: 14px;
    background: var(--rev-surface-2);
    border: 1px solid var(--rev-border);
    border-radius: var(--rev-radius-md);
    flex-shrink: 0;
}

.rev-notes-composer-subject {
    width: 100%;
    background: transparent;
    border: none;
    border-bottom: 1px solid var(--rev-border);
    color: var(--rev-text);
    font-size: 12px;
    font-weight: 500;
    padding: 6px 0;
    outline: none;
    margin-bottom: 8px;
}

.rev-notes-composer-subject::placeholder {
    color: var(--rev-text-muted);
    opacity: 0.6;
}

.rev-notes-composer-subject:focus {
    border-bottom-color: var(--rev-accent);
}

.rev-notes-composer-input {
    width: 100%;
    background: var(--rev-surface-3);
    border: 1px solid var(--rev-border);
    border-radius: var(--rev-radius-md);
    color: var(--rev-text);
    font-size: 13px;
    padding: 10px 12px;
    min-height: 60px;
    max-height: 120px;
    resize: none;
    outline: none;
    font-family: inherit;
    field-sizing: content;
}

.rev-notes-composer-input::placeholder {
    color: var(--rev-text-muted);
}

.rev-notes-composer-input:focus {
    border-color: var(--rev-accent);
}

.rev-notes-composer-actions {
    display: flex;
    gap: 8px;
    justify-content: flex-end;
    margin-top: 10px;
}

/* Thread */
.rev-notes-thread {
    padding: 4px 0;
    display: flex;
    flex-direction: column;
    gap: 10px;
    overflow-y: auto;
    flex: 1;
    min-height: 0;
    scrollbar-width: thin;
    scrollbar-color: rgba(255,255,255,0.12) transparent;
}

.rev-notes-thread::-webkit-scrollbar { width: 5px; }
.rev-notes-thread::-webkit-scrollbar-track { background: transparent; }
.rev-notes-thread::-webkit-scrollbar-thumb {
    background: rgba(255,255,255,0.12);
    border-radius: 10px;
}
.rev-notes-thread:hover::-webkit-scrollbar-thumb { background: rgba(255,255,255,0.2); }

/* Empty state */
.rev-notes-empty {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
    padding: 40px 20px;
    color: var(--rev-text-muted);
}

.rev-notes-empty i {
    font-size: 36px;
    opacity: 0.3;
}

.rev-notes-empty-title {
    font-size: 14px;
    font-weight: 600;
}

.rev-notes-empty-desc {
    font-size: 12px;
    opacity: 0.6;
}

/* Note card */
.rev-note-card {
    background: var(--rev-surface-3);
    border: 1px solid var(--rev-border);
    border-left: 3px solid var(--rev-accent);
    border-radius: var(--rev-radius-md);
    padding: 14px 16px;
    animation: rev-note-in 200ms ease-out both;
    transition: border-color 200ms;
}

.rev-note-card:hover {
    border-left-color: var(--rev-brand);
}

.rev-note-card-header {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 8px;
}

.rev-note-card-author {
    font-size: 12px;
    font-weight: 600;
    color: #60a5fa;
}

.rev-note-card-time {
    font-size: 11px;
    color: var(--rev-text-muted);
    margin-left: auto;
}

.rev-note-card-subject {
    display: block;
    color: #f59e0b;
    font-size: 12px;
    font-weight: 700;
    margin-bottom: 6px;
}

.rev-note-card-body {
    font-size: 13px;
    color: var(--rev-text);
    line-height: 1.5;
    word-break: break-word;
}

.rev-note-text {
    white-space: pre-line;
}

.rev-note-text.clamped {
    display: -webkit-box;
    -webkit-line-clamp: 4;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.rev-note-toggle-btn {
    background: none;
    border: none;
    color: var(--rev-accent);
    font-size: 12px;
    font-weight: 600;
    cursor: pointer;
    padding: 4px 0 0 0;
    transition: opacity 150ms;
}

.rev-note-toggle-btn:hover {
    opacity: 0.7;
}

/* Card footer with actions */
.rev-note-card-footer {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-top: 10px;
    padding-top: 8px;
    border-top: 1px solid var(--rev-border);
}

.rev-note-card-actions {
    display: flex;
    gap: 2px;
    margin-left: auto;
}

.rev-note-action {
    background: none;
    border: none;
    color: var(--rev-text-muted);
    cursor: pointer;
    padding: 3px 7px;
    border-radius: 4px;
    font-size: 11px;
    transition: all 150ms;
}

.rev-note-action:hover { background: rgba(255,255,255,0.08); color: var(--rev-accent); }
.rev-note-action.delete:hover { color: #ef4444; }

/* Edit mode */
.rev-note-edit-subject {
    width: 100%;
    background: var(--rev-surface-3);
    border: 1px solid var(--rev-border);
    border-radius: 6px;
    color: var(--rev-accent);
    font-size: 12px;
    font-weight: 600;
    padding: 6px 12px;
    margin-bottom: 8px;
    outline: none;
}

.rev-note-edit-subject::placeholder {
    color: var(--rev-text-muted);
    font-weight: 400;
}

.rev-note-edit-subject:focus {
    border-color: var(--rev-accent);
}

.rev-note-edit-area {
    width: 100%;
    background: var(--rev-surface-3) !important;
    border: 1px solid var(--rev-border) !important;
    border-radius: 6px !important;
    color: var(--rev-text) !important;
    font-size: 13px !important;
    padding: 10px 12px !important;
    min-height: 60px;
    max-height: 200px;
    field-sizing: content;
    resize: none;
    outline: none;
    line-height: 1.5;
}

.rev-note-edit-area:focus {
    border-color: var(--rev-accent) !important;
}

.rev-note-edit-actions {
    display: flex;
    gap: 6px;
    margin-left: auto;
}

/* Attachments */
.rev-note-attachments {
    display: flex;
    flex-wrap: wrap;
    gap: 4px;
    margin-top: 8px;
}

.rev-note-file {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    background: var(--rev-surface-3);
    border: 1px solid var(--rev-border);
    border-radius: 6px;
    padding: 3px 8px;
    font-size: 11px;
}

.rev-note-file i:first-child {
    color: var(--rev-accent);
    font-size: 10px;
}

.rev-note-file a,
.rev-note-file .rev-note-file-link {
    color: var(--rev-text);
    text-decoration: none;
    cursor: pointer;
    background: none;
    border: none;
    padding: 0;
    font: inherit;
}

.rev-note-file a:hover,
.rev-note-file .rev-note-file-link:hover { color: var(--rev-accent); }

.rev-note-file-btn {
    background: none;
    border: none;
    color: var(--rev-text-muted);
    cursor: pointer;
    padding: 0 2px;
    font-size: 10px;
    transition: color 150ms;
}

.rev-note-file-btn:hover { color: var(--rev-accent); }
.rev-note-file-btn.remove:hover { color: #ef4444; }

.rev-note-attach-btn {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    color: var(--rev-text-muted);
    font-size: 11px;
    cursor: pointer;
    padding: 3px 10px;
    border: 1px solid var(--rev-border);
    border-radius: 12px;
    background: transparent;
    transition: color 150ms, border-color 150ms, background 150ms;
}

.rev-note-attach-btn:hover {
    color: var(--rev-accent);
    border-color: rgba(230, 14, 137, 0.3);
    background: rgba(230, 14, 137, 0.06);
}

/* Shared button styles */
.rev-notes-btn-cancel {
    padding: 5px 14px;
    font-size: 12px;
    font-weight: 500;
    border: 1px solid var(--rev-border);
    border-radius: 6px;
    background: transparent;
    color: var(--rev-text-muted);
    cursor: pointer;
    transition: color 150ms, border-color 150ms;
}

.rev-notes-btn-cancel:hover {
    color: var(--rev-text);
    border-color: var(--rev-text-muted);
}

.rev-notes-btn-post,
.rev-notes-btn-save {
    padding: 5px 16px;
    font-size: 12px;
    font-weight: 600;
    border: none;
    border-radius: 6px;
    background: var(--rev-accent);
    color: #fff;
    cursor: pointer;
    display: flex;
    align-items: center;
    gap: 6px;
    transition: opacity 150ms;
}

.rev-notes-btn-post:hover,
.rev-notes-btn-save:hover {
    opacity: 0.85;
}

.rev-notes-btn-delete {
    padding: 5px 14px;
    font-size: 12px;
    font-weight: 600;
    border: none;
    border-radius: 6px;
    background: var(--rev-red);
    color: #fff;
    cursor: pointer;
    transition: opacity 150ms;
}

.rev-notes-btn-delete:hover {
    opacity: 0.85;
}

/* Confirm delete */
.rev-note-confirm-delete {
    padding: 12px 0;
    display: flex;
    align-items: center;
    justify-content: space-between;
    font-size: 13px;
    color: var(--rev-text-muted);
}

.rev-note-confirm-actions {
    display: flex;
    gap: 6px;
}

/* Responsive — mobile cards */
@media (max-width: 767px) {
    .rev-note-card {
        padding: 12px;
    }

    /* Move composer/new-note button to bottom in overlay */
    .rev-notes-overlay .rev-notes-panel {
        display: flex;
        flex-direction: column;
    }

    .rev-notes-overlay .rev-notes-thread {
        order: 1;
        flex: 1;
    }

    .rev-notes-overlay .rev-notes-new-btn {
        order: 2;
        margin: 0;
        border-radius: 0;
        border-left: none;
        border-right: none;
        border-bottom: none;
        padding: 14px 16px;
    }

    .rev-notes-overlay .rev-notes-composer {
        order: 2;
        margin: 0;
        border-radius: 0;
        border: none;
        border-top: 1px solid var(--rev-border);
        padding: 12px 16px;
        flex-shrink: 0;
    }
}


/* ============================================================
   SKELETON LOADING
   Reusable shimmer placeholders for async content.
   ============================================================ */

@keyframes rev-skeleton-shimmer {
    0%   { background-position: -200% 0; }
    100% { background-position: 200% 0; }
}

.rev-skeleton {
    background: linear-gradient(90deg,
        var(--rev-surface-3) 25%,
        rgba(255, 255, 255, 0.06) 50%,
        var(--rev-surface-3) 75%);
    background-size: 200% 100%;
    animation: rev-skeleton-shimmer 1.5s ease-in-out infinite;
    border-radius: var(--rev-radius-sm);
}

.rev-skeleton-line {
    height: 14px;
    margin-bottom: 8px;
}

.rev-skeleton-line.short { width: 40%; }
.rev-skeleton-line.medium { width: 65%; }
.rev-skeleton-line.long { width: 85%; }

.rev-skeleton-circle {
    border-radius: 50%;
}

/* Skeleton stat card */
.rev-stat-card.skeleton {
    pointer-events: none;
    min-height: 75px;
    box-sizing: border-box;
}

.rev-stat-card.skeleton .rev-stat-icon {
    background: var(--rev-surface-3);
}

.rev-stat-card.skeleton .rev-skeleton-label {
    height: 10px;
    width: 70px;
}

.rev-stat-card.skeleton .rev-skeleton-value {
    height: 22px;
    width: 50px;
}

/* Skeleton timeline item */
.rev-skeleton-timeline-item {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 12px 16px;
    border-bottom: 1px solid var(--rev-border);
}

.rev-skeleton-timeline-icon {
    width: 36px;
    height: 36px;
    flex-shrink: 0;
    border-radius: var(--rev-radius-md);
}

.rev-skeleton-timeline-content {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.rev-skeleton-timeline-right {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 6px;
}

/* Skeleton note card */
.rev-skeleton-note {
    background: var(--rev-surface-3);
    border-radius: var(--rev-radius-md);
    padding: 16px;
    margin-bottom: 12px;
    border-left: 3px solid var(--rev-border-strong);
}

.rev-skeleton-note-header {
    display: flex;
    justify-content: space-between;
    margin-bottom: 12px;
}

.rev-skeleton-note-body {
    display: flex;
    flex-direction: column;
    gap: 6px;
}

/* Skeleton table rows */
.rev-skeleton-table-row {
    pointer-events: none;
    min-height: 52px;
}

.rev-skeleton-pill {
    height: 22px;
    width: 60px;
    border-radius: 11px;
}


/* ============================================================
   site.css — Merged (Blazor UI, modals, invoices, utilities)
   ============================================================ */

#blazor-error-ui {
    background: red;
    bottom: 0;
    box-shadow: 0 -1px 2px rgba(0, 0, 0, 0.2);
    display: none;
    left: 0;
    padding: 0.6rem 1.25rem 0.7rem 1.25rem;
    position: fixed;
    width: 100%;
    z-index: 1000;
}

#blazor-error-ui .dismiss {
    cursor: pointer;
    position: absolute;
    right: 0.75rem;
    top: 0.5rem;
    color: whitesmoke;
}

#blazor-error-ui .reload {
    cursor: pointer;
    color: whitesmoke;
}

.rev-reconnect-bar {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    z-index: 10000;
}

.rev-reconnect-bar > div {
    display: none;
}

.components-reconnect-hide > div {
    display: none;
}

.components-reconnect-show > .show,
.components-reconnect-failed > .failed,
.components-reconnect-rejected > .rejected {
    display: block;
}

.rev-reconnect-bar-inner {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    padding: 8px 16px;
    background: rgba(27, 29, 42, 0.95);
    color: rgba(255, 255, 255, 0.85);
    font-size: 13px;
    font-weight: 500;
    border-bottom: 2px solid #e60e89;
}

.rev-reconnect-spinner {
    width: 14px;
    height: 14px;
    border: 2px solid rgba(255, 255, 255, 0.3);
    border-top-color: #e60e89;
    border-radius: 50%;
    animation: spin 700ms linear infinite;
}

.rev-reconnect-link {
    color: #e60e89;
    cursor: pointer;
    text-decoration: underline;
}



/* This is the override for the rev css */

.body {
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
}

/* Common */
.validation-errors ul {
    color: red;
}

.validation-message {
    color: red;
}

.photo-icon {
    margin-right: 8px;
    margin-bottom: 5px;
}

.padding-bottom {
    padding-bottom: 10px;
}

/* .modal { display: block } — removed, replaced by rev-modal */

.helpbutton {
    width: 20px;
    height: 20px;
    background-image: url('../images/icons8-help-100_1icons8-help-100.png');
    margin-bottom: 10px;
}

.cursor-pointer {
    cursor: pointer
}

.color-white {
    color: #ebedf0;
}

.margin-bottom-10 {
    margin-bottom: 10px;
}

.small-text {
    font-size: 11px;
}

.spinner {
    border: 16px solid #212332;
    border-top: 16px solid #e60e89;
    border-radius: 50%;
    width: 80px;
    height: 80px;
    animation: spin 700ms linear infinite;
    top: 50%;
    left: 50%;
    margin-left: -40px;
    position: relative;
}

@keyframes spin {
    0% {
        transform: rotate(0deg)
    }

    100% {
        transform: rotate(360deg)
    }
}

/* Store */
.product-info-wrapper {
    padding-left: 50px;
    padding-right: 50px;
}

.product-info-variant-wrapper {
    margin-top: 30px;
}


.product-option_group {
    margin-bottom: 12px;
    -webkit-flex-wrap: wrap;
    -ms-flex-wrap: wrap;
    flex-wrap: wrap;
}

.product-option_button {
    display: -webkit-box;
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex;
    height: 50px;
    margin-right: 12px;
    margin-bottom: 12px;
    padding-right: 16px;
    padding-left: 16px;
    -webkit-box-pack: center;
    -webkit-justify-content: center;
    -ms-flex-pack: center;
    justify-content: center;
    -webkit-box-align: center;
    -webkit-align-items: center;
    -ms-flex-align: center;
    align-items: center;
    border-radius: 0;
}

.product-page_button-wrapper {
    display: -webkit-box;
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex;
    margin-top: 40px;
}

/* ===================================
   invoices
====================================== */
.invoice-box {
    max-width: 800px;
    margin: auto;
    padding: 30px;
    border: 1px solid #eee;
    box-shadow: 0 0 10px rgba(0, 0, 0, 0.15);
    font-size: 13px;
    line-height: 24px;
}

.invoice-box table {
    width: 100%;
    line-height: inherit;
    text-align: left;
}

.invoice-box table td {
    padding: 5px;
    vertical-align: top;
}

.invoice-box table tr td:nth-child(2) {
    text-align: right;
}

.invoice-box table tr.top table td {
    padding-bottom: 20px;
}

.invoice-box table tr.top table td.title {
    font-size: 45px;
    line-height: 45px;
    color: #333;
}

.invoice-box table tr.information table td {
    padding-bottom: 40px;
}

.invoice-box table tr.heading td {
    background: hsla(0, 0%, 100%, 0.05);
    border-bottom: 1px solid hsla(0, 0%, 100%, 0.05);
    font-weight: bold;
    color: #fff;
}

.invoice-box table tr.details td {
    padding-bottom: 20px;
}

.invoice-box table tr.item td {
    border-bottom: 1px solid #eee;
}

.invoice-box table tr.item.last td {
    border-bottom: none;
}

.invoice-box table tr.total-top td:nth-child(2) {
    border-top: 2px solid #eee;
}

.invoice-box table tr.total-top-bold td:nth-child(2) {
    border-top: 2px solid #eee;
    font-weight: bold;
}

.invoice-box table tr.total-bold td:nth-child(2) {
    font-weight: bold;
}

/* Money cells never wrap — a long item name squeezes the second column and
   "Total: £17.50" otherwise breaks across two lines on phones */
.invoice-box table tr.total-top td:nth-child(2),
.invoice-box table tr.total-top-bold td:nth-child(2),
.invoice-box table tr.total-bold td:nth-child(2),
.invoice-box table tr.total td:nth-child(2),
.invoice-box table tr.item td:nth-child(2),
.invoice-box table tr.details td:nth-child(2) {
    white-space: nowrap;
}

@media only screen and (max-width: 600px) {
    .invoice-box {
        padding: 16px;
        line-height: 20px;
    }

    .invoice-box table tr.top table td {
        width: 100%;
        display: block;
        text-align: center;
        padding-bottom: 10px;
    }

    .invoice-box table tr.information table td {
        width: 100%;
        display: block;
        text-align: center;
        padding-bottom: 14px;
    }
}

/* Email verification banner */
.email-verify-banner {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 10px 20px;
    background: rgba(230, 14, 137, 0.12);
    border-bottom: 1px solid rgba(230, 14, 137, 0.25);
    font-size: 13px;
    color: rgba(255, 255, 255, 0.85);
    position: relative;
}
.email-verify-banner i.fa-envelope {
    color: var(--rev-accent, #e60e89);
    flex-shrink: 0;
}
.email-verify-banner-link {
    color: var(--rev-accent, #e60e89);
    cursor: pointer;
    text-decoration: underline;
    background: none;
    border: none;
    padding: 0;
    font-size: inherit;
}
.email-verify-banner-dismiss {
    margin-left: auto;
    background: none;
    border: none;
    color: rgba(255, 255, 255, 0.4);
    cursor: pointer;
    padding: 4px;
    line-height: 1;
    font-size: 14px;
    flex-shrink: 0;
    transition: color 150ms ease;
}
.email-verify-banner-dismiss:hover {
    color: rgba(255, 255, 255, 0.8);
}

/* ============================================================
   Section 25a: Settings form layout (rev-form-cols system)
   ============================================================ */
.rev-form-cols {
    display: flex;
    gap: 20px;
    flex-wrap: wrap;
    margin: 0;
}
.rev-form-col {
    flex: 1;
    min-width: 280px;
}
.rev-form-cols-4 {
    display: flex;
    flex-wrap: wrap;
    padding: 6px 0;
}
.rev-form-cols-4 .rev-form-col {
    flex: 1;
    min-width: 100px;
    padding: 0 10px;
}
.rev-form-field-narrow {
    max-width: 380px;
}
.rev-label-row {
    display: flex;
    align-items: center;
    gap: 8px;
}

/* Icon action buttons — need display:inline-block (width/height set, no display) */
.addicon,
.editicon,
.deleteicon,
.upicon,
.downicon {
    display: inline-block;
}

/* .col previously got width:100% from w-col; restore flex growth in flex containers */
.flex.row > .col {
    flex: 1;
    min-width: 0;
}

/* table-col cells in flex rows — default equal distribution, overridden by rev-col-N */
.row.flex-center .col.table-col,
.row.table-row .col.table-col {
    flex: 1;
    min-width: 0;
}

/* 12-column proportional flex grid — use on .col.table-col to restore original proportions */
.rev-col-1  { flex: 1 !important; }
.rev-col-2  { flex: 2 !important; }
.rev-col-3  { flex: 3 !important; }
.rev-col-4  { flex: 4 !important; }
.rev-col-5  { flex: 5 !important; }
.rev-col-6  { flex: 6 !important; }
.rev-col-7  { flex: 7 !important; }
.rev-col-8  { flex: 8 !important; }
.rev-col-9  { flex: 9 !important; }
.rev-col-10 { flex: 10 !important; }
.rev-col-11 { flex: 11 !important; }
.rev-col-12 { flex: 12 !important; }

/* ============================================================
   MIGRATED FROM rev.css
   Active rules preserved when rev.css was deleted.
   ============================================================ */

/* --- Global scrollbars --- */
::-webkit-scrollbar {
    width: 6px;
    height: 6px;
}
::-webkit-scrollbar-track {
    background: transparent;
}
::-webkit-scrollbar-thumb {
    background-color: rgba(255, 255, 255, 0.2);
    border-radius: 10px;
}
    ::-webkit-scrollbar-thumb:hover {
        background-color: rgba(255, 255, 255, 0.35);
    }
* {
    scrollbar-width: thin;
    scrollbar-color: rgba(255,255,255,0.25) transparent;
}

/* --- Heading sizes --- */
h1 {
    margin-top: 0px;
    margin-bottom: 10px;
    color: #ebedf0;
    font-size: 48px;
    font-weight: 500;
}
h2 {
    margin-top: 0px;
    margin-bottom: 10px;
    color: #ebedf0;
    font-size: 34px;
    font-weight: 500;
}
h3 {
    margin-top: 0px;
    margin-bottom: 10px;
    color: #ebedf0;
    font-size: 28px;
    font-weight: 500;
}
h4 {
    margin-top: 0px;
    margin-bottom: 10px;
    color: #ebedf0;
    font-size: 22px;
    font-weight: 500;
}
h5 {
    margin-top: 0px;
    margin-bottom: 10px;
    color: #ebedf0;
    font-size: 18px;
    font-weight: 500;
}
h6 {
    margin-top: 0px;
    margin-bottom: 10px;
    color: #ebedf0;
    font-size: 14px;
    font-weight: 500;
}

/* --- Base element defaults --- */
p {
    margin-bottom: 10px;
    color: #ebedf0;
}
a {
    color: #e60e89;
    font-weight: 500;
    text-decoration: underline;
}
    a:hover {
        color: #2e50c9;
        text-decoration: none;
    }
ul {
    margin-top: 0px;
    margin-bottom: 10px;
    padding-left: 20px;
    color: #ebedf0;
}
ol {
    margin-top: 0px;
    margin-bottom: 10px;
    padding-left: 20px;
    color: #404250;
}
img {
    display: inline-block;
    max-width: 100%;
}
blockquote {
    margin-bottom: 10px;
    padding: 20px;
    border-left: 3px solid #e60e89;
    background-color: #f6f7f9;
    color: #808292;
}
figure {
    margin-bottom: 10px;
}
.rich-text img { border-radius: 5px; }
.rich-text figure { margin-top: 20px; margin-bottom: 20px; }

/* --- Body class --- */
.body {
    background-color: #1b1d2a;
    font-family: var(--rev-font-display);
    color: #ebedf0;
    font-size: 14px;
    line-height: 1.4;
    font-weight: 400;
}

/* --- Typography utilities --- */
.caption {
    margin-bottom: 10px;
    color: #ebedf0;
    font-size: 12px;
    font-weight: 500;
    letter-spacing: 2px;
    text-transform: uppercase;
}
.bold { font-weight: 700; }
.medium { font-weight: 500; }
.heading { background-color: transparent; }
.heading-4 { color: #ebedf0; }
.primary-text { color: #e60e89; }
.text-green { color: #31ba7e; }
.text-red { color: #f64f59; }
.list-item { color: #404250; }

.link {
    color: #e60e89;
    font-weight: 500;
    text-decoration: none;
    cursor: pointer;
}
    .link:hover {
        color: #e60e89;
        text-decoration: underline;
    }
.custom-link {
    display: inline-block;
    padding-right: 20px;
    background-image: url('../images/icons8-right-arrow-64_1icons8-right-arrow-64.png');
    background-position: 100% 50%;
    background-size: 16px;
    background-repeat: no-repeat;
    transition: padding 100ms ease-in-out, background-position 100ms ease-in-out;
    color: #e60e89;
    text-decoration: none;
    cursor: pointer;
}
    .custom-link:hover {
        padding-right: 25px;
        color: #e60e89;
    }

/* --- Layout --- */
.row {
    display: block;
    margin-right: -10px;
    margin-left: -10px;
}
    .row.padding { margin-right: -10px; margin-left: -10px; }
        .row.padding.date {
            display: flex;
            padding-top: 10px;
            padding-bottom: 10px;
            align-items: flex-start;
        }
        .row.padding.contact {
            display: flex;
            padding-top: 10px;
            padding-bottom: 10px;
            align-items: flex-start;
        }
        .row.padding.address {
            display: flex;
            padding-top: 10px;
            padding-bottom: 10px;
            align-items: center;
        }

.col {
    display: block;
}
    .col.table-col { padding-right: 10px; padding-left: 0px; }
        .col.table-col.left-padding { padding-left: 10px; }
    .col.text-center { align-self: center; }
    .col.padding { display: block; padding-right: 10px; padding-left: 10px; }
    .col.align-right { align-self: center; order: 1; }

.section { margin-bottom: 20px; }
    .section.section-center { max-width: 500px; margin-right: auto; margin-left: auto; }

.flex {
    display: flex;
}
    .flex.row { align-items: stretch; flex: 1; }

.flex-center {
    display: flex;
    align-items: center;
}

.text-center { text-align: center; }
.align-right { text-align: right; }
.inline { display: inline-block; }

/* --- Spacing utilities --- */
.mb-0 { margin-bottom: 0px; color: #ebedf0; }
.mt-20 { margin-top: 20px; }
.mb-40 { margin-bottom: 40px; }
.margin-top-10 { margin-top: 10px; }
.margin-bottom-10 { margin-bottom: 10px; }
.margin-bottom-20 { margin-bottom: 20px; }
.margin-left-10 { margin-left: 10px; }
.noBottomPadding { margin-bottom: 0px; }

/* --- App layout --- */
.app-main-layout-content { flex: 1; }

/* --- Forms & inputs --- */
.label {
    color: #ebedf0;
    font-size: 12px;
    font-weight: 500;
}
.form-group { margin-bottom: 30px; }
.form-block { margin-bottom: 0px; }
.input-group {
    display: flex;
    margin-bottom: 10px;
    align-items: center;
}
.input-group-item-left { margin-right: 10px; flex: 1; }
.radio { margin-left: 1px; }
.radio-label-default { display: none; }
.checkbox {
    position: absolute;
    left: 0%; top: 0%;
    width: 16px; height: 16px;
    margin-top: 2px; margin-right: 10px; margin-left: 0px;
    border-style: solid; border-width: 1px; border-color: #808292;
    background-color: #404250;
}
    .checkbox.w--redirected-checked {
        border-color: #e60e89;
        background-color: #e60e89;
        background-size: 14px;
    }
.checkbox-field { position: relative; padding-left: 30px; color: #ebedf0; }
    .checkbox-field.mb-40 { padding-left: 25px; }

/* --- Dividers --- */
.devider { height: 1px; margin-top: 20px; margin-bottom: 20px; background-color: #54576f; }
.primary-divider { height: 3px; margin-top: 10px; margin-bottom: 30px; background-color: #e60e89; }

/* --- Messages --- */
.success-message {
    border: 1px solid #31ba7e;
    border-radius: 5px;
    background-color: #fff;
    color: #31ba7e;
    font-weight: 400;
    text-align: center;
}
.message-actions { margin-top: 20px; text-align: right; }

/* --- Page heading --- */
.page-heading { margin-bottom: 20px; justify-content: space-between; }
    .page-heading.with-button { display: flex; }
.page-tabs-menu { display: flex; align-items: flex-end; border-bottom: 1px solid var(--rev-border); margin-bottom: 0; }

/* --- Tabs (legacy underline style — only applies when NOT using rev-tab-list pill system) --- */
.tabs-menu:not(.rev-tab-list) { border-bottom: 1px solid var(--rev-border); }
.tab-link:not(.rev-tab-item) {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    text-align: center;
    margin-bottom: -1px;
    padding-right: 15px;
    padding-left: 15px;
    border-bottom: 1px solid transparent;
    background-color: transparent;
    color: #ebedf0;
    font-weight: 500;
}
    .tab-link:not(.rev-tab-item):hover { color: #e60e89; }
    .tab-link:not(.rev-tab-item).w--current {
        border-bottom: 2px solid #e60e89;
        background-color: transparent;
        color: #e60e89;
        font-weight: 500;
    }
    .tab-link i {
        font-size: 0.95rem;
        line-height: 1;
        display: inline-block;
        vertical-align: middle;
    }
.tabs-content { padding-top: 20px; padding-bottom: 20px; color: #ebedf0; }
.button-group-item { margin-right: 5px; margin-left: 5px; }
.button-group { margin-right: -5px; margin-left: -5px; }
    .button-group.change-plan-button { margin-top: 20px; }
    .button-group.cancel-subscription { margin-top: 20px; }

/* --- Switchers --- */
.switcher-wrapper { width: 40px; padding: 2px; border-radius: 50px; background-color: #54576f; cursor: pointer; }
    .switcher-wrapper.active { background-color: #e60e89; }
.switcher-button { width: 16px; height: 16px; border-radius: 50%; background-color: whitesmoke; }
    .switcher-button.active { transform: translate3d(20px, 0px, 0px); }
.switcher-tab {
    min-width: 80px;
    padding-right: 20px;
    padding-left: 20px;
    border-top: 1px solid #ebedf0;
    border-bottom: 1px solid #ebedf0;
    background-color: transparent;
    color: #ebedf0;
    font-size: 12px;
    font-weight: 400;
    text-align: center;
}
    .switcher-tab:hover { background-color: #212332; color: #e60e89; }
    .switcher-tab.right {
        border-right: 1px solid #ebedf0;
        border-left: 1px solid #fff;
        border-top-right-radius: 3px;
        border-bottom-right-radius: 3px;
    }
        .switcher-tab.right.w--current { border-right-color: #e60e89; }
    .switcher-tab.left {
        border-right: 1px solid #fff;
        border-left: 1px solid #ebedf0;
        border-top-left-radius: 3px;
        border-bottom-left-radius: 3px;
    }
        .switcher-tab.left.w--current { border-right-color: transparent; border-left-color: #e60e89; }

/* --- Cards (supplemental variants not in modern) --- */
.card.notecard { height: auto; margin: 10px; background-color: #2a2d3f; }
.card-heading-small { margin-bottom: 20px; }
    .card-heading-small.flex { justify-content: space-between; align-items: center; }
.card-setting-container {
    display: flex;
    padding: 20px;
    justify-content: space-around;
    border-bottom: 1px solid #ebedf0;
}
.card-setting-switcher { order: 1; }
.card-icon-header-image { margin-top: -12px; margin-right: -12px; margin-left: 5px; }

/* --- Modals --- */
.modal {
    position: fixed;
    left: 0%; top: 0%; right: 0%; bottom: 0%;
    z-index: 900;
    display: none;
    overflow: auto;
    max-height: 100vh;
    padding: 20px;
    background-color: rgba(0, 0, 0, 0.4);
}
.modal-container {
    position: relative;
    z-index: 1000;
    width: 100%;
    max-width: 420px;
    margin: auto;
    padding: 50px 30px 30px;
    border-radius: 3px;
    background-color: #212332;
    box-shadow: 0 0 5px 0 rgba(0, 0, 0, 0.05);
    color: #fff;
}
.modal-mask { position: absolute; left: 0%; top: 0%; right: 0%; bottom: 0%; z-index: 901; }
.modal-title { margin-bottom: 40px; }
.modal-close {
    position: absolute;
    left: auto; top: 10px; right: 10px; bottom: auto;
    width: 30px; height: 30px;
    border-radius: 50%;
    background-color: #f6f7f9;
    background-image: url('../images/icons8-multiply-64-1_1icons8-multiply-64 (1).png');
    background-position: 50% 50%;
    background-size: 16px;
    background-repeat: no-repeat;
    transition: background-color 200ms ease-in-out;
    cursor: pointer;
}
    .modal-close:hover { background-color: #ebedf0; }

/* --- Table --- */
.table-wrapper { overflow: auto; max-width: 100%; }
.table.wide { min-width: 400px; padding-bottom: 10px; }
.table.extra-wide { min-width: 200px; padding-bottom: 20px; }
    .table.extra-wide.single { padding-bottom: 0px; }

/* --- Avatar & profile --- */
.avatar {
    position: relative;
    width: 100px; height: 100px;
    margin-bottom: 10px;
    border-radius: 50%;
    background-image: url('../images/lucas-sankey-bXq8pVfP-fY-unsplash_1lucas-sankey-bXq8pVfP-fY-unsplash.png');
    background-position: 50% 50%;
    background-size: cover;
    background-repeat: no-repeat;
    box-shadow: inset 0 0 0 2px hsla(0, 0%, 100%, 0.7);
    cursor: pointer;
}
    .avatar.big {
        width: 130px; height: 130px;
        flex: 0 0 auto;
        background-image: url('../images/lucas-sankey-bXq8pVfP-fY-unsplash-2.jpg');
        box-shadow: inset 0 0 0 2px hsla(0, 0%, 100%, 0.7);
    }
.avatar-container { display: inline-block; margin-bottom: 5px; }
.profile-info { display: flex; margin-top: -50px; margin-bottom: 10px; }
.contact-profile-info { flex: 0 0 auto; }
.online-status {
    position: absolute;
    left: auto; top: 0%; right: 0%; bottom: auto;
    width: 15px; height: 15px;
    border: 2px solid #fff;
    border-radius: 50%;
    background-color: #ebedf0;
}
    .online-status.on { background-color: #31ba7e; }
    .online-status.off { background-color: #f64f59; }

/* --- Account --- */
.account { display: flex; justify-content: flex-start; align-items: center; }
.account-item {
    position: relative;
    display: block;
    height: 100%;
    padding: 30px;
    border-left: 3px solid #393c4c;
    border-radius: 3px;
    background-color: #212332;
    box-shadow: 0 1px 0px 0px rgb(0 0 0 / 20%), 0 1px 3px 0px rgb(0 0 0 / 19%);
    font-weight: 400;
    text-decoration: none;
}
    .account-item:hover { border-left-color: #e60e89; opacity: 0.9; }
.account-login-text { overflow: hidden; max-width: 100%; }

/* --- Labels & tags --- */
.label-item {
    display: inline-block;
    padding: 2px 10px;
    border-style: solid; border-width: 1px; border-color: #404250;
    border-radius: 4px;
    background-color: #404250;
    color: #ebedf0;
    font-weight: 400;
}
.section-inner { margin-bottom: 20px; }
    .section-inner.notessection { overflow: auto; height: 40vh; background-color: #212332; }

/* --- Payment methods --- */
.current-method-container { display: flex; align-items: center; flex: 1; }
.current-method-icon { margin-right: 10px; }
.current-method-details { flex: 1; }

/* --- Icons (image-based) --- */
.upicon {
    width: 30px; height: 30px; border-radius: 3px;
    background-color: transparent;
    background-image: url('../images/icons8-low-priority-100-1_1icons8-low-priority-100 (1).png');
    background-position: 50% 50%; background-size: contain; background-repeat: no-repeat;
    cursor: pointer;
}
.downicon {
    width: 30px; height: 30px; border-radius: 3px;
    background-color: transparent;
    background-image: url('../images/icons8-low-priority-100_1icons8-low-priority-100.png');
    background-position: 50% 50%; background-size: contain; background-repeat: no-repeat;
    cursor: pointer;
}
.editicon {
    width: 30px; height: 30px; border-radius: 3px;
    background-color: transparent;
    background-image: url('../images/icons8-create-100_1icons8-create-100.png');
    background-position: 50% 50%; background-size: contain; background-repeat: no-repeat;
    cursor: pointer;
}
    .editicon:hover { background-image: url('../images/icons8-edit-100_1icons8-edit-100.png'); }
    .editicon.modal-action { background-image: url('../images/icons8-create-100_1icons8-create-100.png'); background-position: 50% 50%; background-size: contain; }
.deleteicon {
    width: 30px; height: 30px; border-radius: 3px;
    background-color: transparent;
    background-image: url('../images/icons8-trash-100_1icons8-trash-100-white.png');
    background-position: 50% 50%; background-size: contain; background-repeat: no-repeat;
    cursor: pointer;
}
    .deleteicon:hover { background-image: url('../images/icons8-trash-100_1icons8-trash-100-red.png'); }
    .deleteicon.modal-action { background-image: url('../images/icons8-trash-100_1icons8-trash-100-white.png'); background-position: 50% 50%; background-size: contain; }
.addicon {
    width: 30px; height: 30px; border-radius: 3px;
    background-color: transparent;
    background-image: url('../images/plus-100-white.png');
    background-position: 50% 50%; background-size: contain; background-repeat: no-repeat;
    cursor: pointer;
}
    .addicon:hover { background-image: url('../images/plus-56.png'); }
    .addicon.modal-action { background-image: url('../images/plus-100-white.png'); background-position: 50% 50%; background-size: contain; }

/* --- Pricing / subscription --- */
.select-price-plan-wrapper { position: relative; overflow: hidden; padding-left: 0px; }
.select-price-plan-icon { position: absolute; left: 0%; top: 0%; overflow: hidden; width: 1px; height: 1px; opacity: 0; }
.price-plan-select {
    display: flex;
    margin-bottom: 10px;
    padding: 20px;
    justify-content: space-between;
    align-items: center;
    border-style: solid; border-width: 1px; border-color: #ebedf0;
    border-radius: 5px;
    cursor: pointer;
}
    .price-plan-select:hover { border-color: #404250; }
    .price-plan-select.last { margin-bottom: 20px; }
.select-price-plan-price { color: #e60e89; font-size: 24px; font-weight: 500; }
.select-price-plan { margin-top: 20px; }
.price-plan-row { margin-top: 20px; color: #404250; }

/* --- Revenue / receipts --- */
.receipt-download.hidden { opacity: 0; }
.revenue-value { color: #ebedf0; font-size: 30px; font-weight: 500; }
.revenue-description { margin-top: 10px; }
.chart-tab-content { margin-top: 20px; }
.status-icon { margin-right: 5px; margin-left: 5px; }

/* --- POS --- */
.positems { padding: 10px 0px 0px; }
.positem {
    display: flex;
    min-height: 100px;
    margin-left: 5px;
    padding-right: 5px;
    border-bottom: 1px solid #404250;
}
.positemcontainer {
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex: 1;
}
.posactioncontainer {
    display: flex;
    padding-right: 10px; padding-left: 10px;
    justify-content: space-between;
    align-items: center;
    flex: 1;
}
.positemdetails { margin-left: 10px; flex: 1; }
.positemnametext { margin-bottom: 5px; }
    .positemnametext.white { font-size: 16px; }
.positemprice { margin-bottom: 5px; }
    .positemprice.primary { color: #e60e89; font-size: 13px; font-weight: 400; }
.possearchitem {
    display: flex;
    min-height: 100px;
    margin: 5px;
    padding-right: 0px;
    cursor: pointer;
}
.possearchitemtext { margin-bottom: 5px; font-size: 12px; }
    .possearchitemtext.white { margin-bottom: 10px; }
.positemslistwrapper { overflow: auto; }
.pospaybutton {
    display: inline-block;
    height: 44px;
    padding: 0px 40px;
    border: 1px solid transparent;
    border-radius: 3px;
    background-color: #2e50c9;
    transition: color 100ms ease-in-out, background-color 100ms ease-in-out;
    color: #ebedf0;
    line-height: 42px;
    font-weight: 500;
    text-align: center;
    letter-spacing: 1px;
    cursor: pointer;
}
    .pospaybutton:hover { background-color: #4660bd; color: #ebedf0; text-decoration: none; }
    .pospaybutton.button-primary { width: 100%; background-color: #e60e89; color: #fff; }
        .pospaybutton.button-primary:hover { background-color: #c22d82; color: #fff; }

/* --- Notes --- */
.notessection { margin-top: 1.5rem; }
.notecard {
    background-color: #1e1f2f;
    border-radius: 10px;
    padding: 1.25rem;
    margin-bottom: 1rem;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.25);
    transition: background-color 0.2s ease, transform 0.1s ease;
}
    .notecard:hover { background-color: #24263a; transform: translateY(-1px); }

/* --- Misc action links --- */
.removelink { float: right; clear: left; font-size: 9px; text-align: left; cursor: pointer; }
.addlink { margin-bottom: 5px; padding-left: 10px; font-size: 11px; cursor: pointer; }
.itemadd { display: block; }
    .itemadd.padding { display: flex; padding-right: 10px; padding-left: 10px; align-items: center; }
.discountbutton {
    display: block;
    min-height: 44px;
    align-content: center;
    vertical-align: middle;
    background-color: #ebedf0;
    color: black;
}
    .discountbutton.selected { background-color: #e60e89; color: #ebedf0; }
.helpbutton { margin-bottom: 5px; margin-left: 10px; cursor: pointer; }
.empty-state { background-color: #1f2232; }

/* --- Onboarding steps --- */
.onboarding-steps {
    display: block;
    overflow: hidden;
    min-height: 30px;
    margin-bottom: 5px;
    padding-top: 1px; padding-bottom: 20px; padding-left: 30px;
    background-image: url('../images/step-line.svg'), url('../images/step-default.svg');
    background-position: 9px 25px, 0px 0px;
    background-size: 2px, 20px;
    background-repeat: no-repeat, no-repeat;
    transition: color 200ms ease;
    color: #ebedf0;
    font-weight: 400;
    text-decoration: none;
    cursor: pointer;
}
    .onboarding-steps:hover { color: #e60e89; }
    .onboarding-steps.w--current { background-image: url('../images/step-line.svg'), url('../images/step-active.svg'); color: #e60e89; }
    .onboarding-steps.passed { background-image: url('../images/step-line.svg'), url('../images/step-passed.svg'); }
    .onboarding-steps.last { background-image: url('../images/step-default.svg'); background-position: 0px 0px; background-size: 20px; background-repeat: no-repeat; }
        .onboarding-steps.last.w--current { background-image: url('../images/step-active.svg'); }
.onboarding-steps-container { width: 100%; }

/* --- CTA button --- */
.cta-btn {
    background: #ff0099;
    color: #fff;
    border: none;
    border-radius: 10px;
    font-weight: 500;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
    gap: 6px;
    padding: 14px 0;
    width: 50px;
    height: 50px;
    font-size: 0.75rem;
    box-shadow: 0 2px 8px rgba(255, 0, 153, 0.3);
    transition: all 0.2s ease;
    text-decoration: none;
}
    .cta-btn:hover { background: #ff33aa; }
    .cta-btn:active { transform: scale(0.96); }
    .cta-btn i { font-size: 0.9rem; }

/* --- Impersonation banner --- */
.impersonation-banner {
    position: fixed;
    top: 0; left: 0; right: 0;
    z-index: 9999;
    background: #f59e0b;
    color: #1a1a1a;
    padding: 4px 16px;
    font-size: 12px;
    height: 28px;
    display: flex;
    align-items: center;
    gap: 8px;
}
.impersonation-banner-exit {
    margin-left: auto;
    color: #1a1a1a;
    text-decoration: underline;
    font-weight: 600;
    display: flex;
    align-items: center;
    gap: 4px;
}
    .impersonation-banner-exit:hover { color: #7c2d12; }

/* --- Admin impersonate page --- */
.admin-impersonate-page { max-width: 960px; margin: 0 auto; padding: 40px 24px; }
.admin-impersonate-header { margin-bottom: 24px; }
.admin-impersonate-header h2 { font-size: 1.5rem; margin-bottom: 4px; color: #fff; }
.admin-impersonate-subtitle { color: #94a3b8; margin-bottom: 16px; }
.admin-continue-btn { display: inline-flex; align-items: center; gap: 6px; }
.admin-search-box {
    display: flex; align-items: center; gap: 8px;
    background: var(--rev-surface, #1e293b);
    border: 1px solid var(--rev-border, #334155);
    border-radius: 8px;
    padding: 10px 14px;
    margin-bottom: 24px;
}
.admin-search-box i { color: #64748b; }
.admin-search-box input { flex: 1; background: transparent; border: none; outline: none; color: #fff; font-size: 14px; }
.admin-loading,
.admin-no-results { text-align: center; color: #94a3b8; padding: 40px 0; }
.admin-business-list { display: flex; flex-direction: column; gap: 16px; }
.admin-business-card {
    background: var(--rev-surface, #1e293b);
    border: 1px solid var(--rev-border, #334155);
    border-radius: 10px;
    overflow: hidden;
}
.admin-business-card-header {
    padding: 14px 18px;
    border-bottom: 1px solid var(--rev-border, #334155);
    display: flex; align-items: center; gap: 12px;
}
.admin-business-card-header h3 { margin: 0; font-size: 1rem; color: #fff; }
.admin-business-city { font-size: 12px; color: #64748b; }
.admin-users-table { width: 100%; border-collapse: collapse; }
.admin-users-table th {
    text-align: left; padding: 8px 18px;
    font-size: 11px; text-transform: uppercase; letter-spacing: 0.05em; color: #64748b;
    border-bottom: 1px solid var(--rev-border, #334155);
}
.admin-users-table td { padding: 10px 18px; font-size: 13px; color: #cbd5e1; border-bottom: 1px solid rgba(51, 65, 85, 0.4); }
.admin-users-table tr:last-child td { border-bottom: none; }
.admin-user-type-badge {
    display: inline-block; padding: 2px 8px; border-radius: 4px;
    font-size: 11px; font-weight: 600; text-transform: capitalize;
    background: rgba(99, 102, 241, 0.15); color: #818cf8;
}

/* --- button-sm override --- */
.button-sm { padding: 4px 12px !important; font-size: 12px !important; }

/* Mobile: collapse the impersonate users table into a stacked card per row.
   Native 4-col table overflows narrow phones and pushes the Impersonate
   button off-screen, which made the page unusable on mobile. */
@media screen and (max-width: 640px) {
    .admin-impersonate-page { padding: 16px 12px; }
    .admin-impersonate-header h2 { font-size: 1.15rem; }
    .admin-impersonate-subtitle { font-size: 13px; margin-bottom: 12px; }
    .admin-continue-btn { width: 100%; justify-content: center; }
    .admin-search-box { margin-bottom: 14px; padding: 8px 12px; }
    .admin-impersonate-override { padding: 10px 12px; margin: 10px 0 16px; }
    .admin-business-card-header { padding: 12px 14px; }
    .admin-business-card-header h3 { font-size: 0.95rem; }

    .admin-users-table,
    .admin-users-table thead,
    .admin-users-table tbody,
    .admin-users-table tr,
    .admin-users-table th,
    .admin-users-table td {
        display: block;
        width: 100%;
        box-sizing: border-box;
    }
    .admin-users-table thead { display: none; }
    .admin-users-table tr {
        padding: 12px 14px;
        border-bottom: 1px solid rgba(51, 65, 85, 0.4);
    }
    .admin-users-table tr:last-child { border-bottom: none; }
    .admin-users-table td {
        padding: 4px 0;
        border-bottom: none;
        font-size: 14px;
        word-break: break-word;
    }
    /* Tiny eyebrow label above each value, drawn from data-label */
    .admin-users-table td[data-label]::before {
        content: attr(data-label);
        display: block;
        font-size: 10px;
        text-transform: uppercase;
        letter-spacing: 0.05em;
        color: #64748b;
        margin-bottom: 2px;
    }
    /* Action cell — full-width button, no eyebrow */
    .admin-users-table-action { margin-top: 10px; }
    .admin-users-table-action::before { display: none !important; }
    .admin-users-table-action .button {
        width: 100%;
        justify-content: center;
        padding: 8px 12px !important;
        font-size: 13px !important;
    }
}

/* --- Responsive: tablet (≤1024px) --- */
@media screen and (max-width: 1024px) {
    .app-main-layout-wrapper { padding-right: 20px; padding-left: 20px; }
    .row.padding.date { display: block; }
    .row.padding.contact { display: block; }
    .row.padding.address { display: block; }
}

/* --- Responsive: mobile (≤767px) --- */
@media screen and (max-width: 767px) {
    h1 { font-size: 34px; }
    h2 { font-size: 30px; }
    h3 { font-size: 26px; }
    .col { margin-bottom: 20px; }
        .col.table-col { margin-bottom: 10px; }
    .section { margin-bottom: 0px; }
        .section.section-center { margin-bottom: 20px; }
    .flex.row { flex-direction: column; }
    .page-tabs-menu {
        display: flex;
        overflow: auto;
        margin-right: -20px; margin-bottom: -20px; margin-left: -20px;
        padding-right: 20px; padding-bottom: 20px; padding-left: 20px;
    }
    .page-tab-link { flex: 0 0 auto; }
    .avatar.big { width: 100px; height: 100px; }
    .profile-info { margin-top: -40px; }
    .devider { margin-top: 20px; margin-bottom: 20px; }
    .modal-container { padding-right: 20px; padding-bottom: 20px; padding-left: 20px; }
    .switcher-tab {
        display: block;
        border-style: none solid;
        border-right-width: 1px; border-right-color: #ebedf0;
        border-left-width: 1px; border-left-color: #ebedf0;
    }
        .switcher-tab.right { border-bottom-style: solid; border-top-right-radius: 0px; border-bottom-left-radius: 3px; }
        .switcher-tab.left { border-top-style: solid; border-top-right-radius: 3px; border-bottom-left-radius: 0px; }
            .switcher-tab.left.w--current { border-right-color: #e60e89; }
    .contact-profile-info { flex: 0 0 auto; }
    .account-item { padding: 20px; }
    .itemadd { margin-bottom: 20px; }
    .noBottomPadding { margin-bottom: 0px; }
}

/* --- Responsive: small mobile (≤479px) --- */
@media screen and (max-width: 479px) {
    .tabs-menu { border-bottom-style: none; }
    .tab-link {
        margin-right: 0px; margin-bottom: 5px;
        padding-right: 10px; padding-left: 10px;
        border-radius: 5px; background-color: #1b1d2a;
    }
        .tab-link.w--current {
            margin-bottom: 5px; padding-right: 10px; padding-left: 10px;
            border-bottom-style: none; border-radius: 5px; background-color: #1b1d2a;
        }
    .button-group-item { margin-right: 0px; margin-bottom: 10px; margin-left: 0px; }
    .row.table-row.flex-center.single-row {
        display: flex; flex-direction: column; justify-content: center; flex-wrap: nowrap; align-items: center;
    }
        .row.table-row.flex-center.single-row.text-center { display: block; }
    .avatar.big { margin-right: auto; margin-left: auto; }
    .profile-info { flex-direction: column; align-items: stretch; text-align: center; }
    .devider { margin-top: 20px; margin-bottom: 20px; }
    .price-plan-select { padding: 15px 10px; }
        .select-price-plan-price { padding-left: 20px; font-size: 20px; text-align: right; }
    .pospaybutton { display: block; width: 100%; }
    .cta-btn { flex: 1; width: auto; height: 50px; border-radius: 12px; padding: 10px 0; font-size: 0.75rem; max-width: 55px; }
        .cta-btn i { font-size: 0.9rem; }
}

/* --- Utility / error pages --- */
.utility-page-wrap {
    display: flex;
    width: 100vw;
    height: 100vh;
    max-height: 100%;
    max-width: 100%;
    justify-content: center;
    align-items: center;
}
.utility-page-content {
    display: flex;
    width: 260px;
    flex-direction: column;
    text-align: center;
}
    .utility-page-content.card {
        width: 100%;
        height: auto;
        max-width: 400px;
        align-items: center;
    }
@media (max-width: 479px) {
    .utility-page-wrap { padding-right: 20px; padding-left: 20px; }
}

/* --- Text / colour utilities --- */
.text-large { font-size: 16px; }
.white { color: #fff; }
    .white.text-large { opacity: 0.8; }

/* --- Transaction icon --- */
.transaction-icon {
    width: 30px;
    height: 30px;
    border-radius: 50%;
    background-color: #f6f7f9;
}
    .transaction-icon.sent {
        margin-right: 10px;
        flex: 0 0 auto;
        background-image: url('../images/icons8-up-100-1_1icons8-up-100 (1).png');
        background-position: 50% 50%;
        background-size: 20px;
        background-repeat: no-repeat;
    }
    .transaction-icon.receive {
        margin-right: 10px;
        background-image: url('../images/icons8-down-arrow-100-1_1icons8-down-arrow-100 (1).png');
        background-position: 50% 50%;
        background-size: 20px;
        background-repeat: no-repeat;
    }

/* --- Upload photo --- */
.upload-photo { display: flex; align-items: center; }
.upload-photo-icon { margin-right: 5px; }

/* --- end migration --- */

/* --- app.css --- */
/* ============================================================
   app.css — SvelteKit-specific additions
   Supplements revyfy-modern.css (ported from Blazor app)
   ============================================================ */

/* Base styles (equivalent to what Webflow/Blazor provided) */
html {
    font-size: var(--rev-font-size-base, 14px);
    /* Global safety net: a few stray px of overflow anywhere in the tree
       (icon font metrics, safe-area rounding, WebKit-vs-Blink flex/grid
       sizing differences) otherwise makes the *entire* document
       horizontally scrollable on mobile Safari. Individual pages already
       set this locally (register, setup/wizard) — hoist it here so every
       page is covered, not just the ones someone remembered to guard. */
    overflow-x: hidden;
}

body {
    margin: 0;
    padding: 0;
    font-family: var(--rev-font-body);
    font-size: var(--rev-font-size-base, 14px);
    font-weight: var(--rev-font-weight-normal, 400);
    line-height: 1.5;
    color: var(--rev-text);
    background-color: var(--rev-surface-0);
    min-height: 100vh;
    overflow-x: hidden;
}

h1, h2, h3, h4, h5, h6 {
    font-family: var(--rev-font-display);
    font-weight: 600;
    color: var(--rev-text);
    margin-top: 0;
    margin-bottom: 0;
}

a {
    color: var(--rev-accent);
    text-decoration: none;
}

img {
    max-width: 100%;
    vertical-align: middle;
    border: 0;
}

/* Login page */
.rev-login-page {
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 100vh;
    background: var(--rev-surface-0);
    padding: 20px;
}

.rev-login-card {
    background: var(--rev-surface-2);
    border: 1px solid var(--rev-border);
    border-radius: var(--rev-radius-lg);
    box-shadow: var(--rev-shadow-card);
    padding: 40px;
    width: 100%;
    max-width: 400px;
}

.rev-login-logo {
    display: flex;
    justify-content: center;
    margin-bottom: 32px;
}

.rev-login-logo img {
    height: 36px;
    width: auto;
}

.rev-login-title {
    font-family: var(--rev-font-display);
    font-size: 20px;
    font-weight: 600;
    color: var(--rev-text);
    text-align: center;
    margin-bottom: 24px;
}

.rev-login-form {
    display: flex;
    flex-direction: column;
    gap: 16px;
}

.rev-login-field {
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.rev-login-field label {
    font-family: var(--rev-font-body);
    font-size: 13px;
    font-weight: 500;
    color: var(--rev-text-muted);
}

.rev-login-field input {
    font-family: var(--rev-font-body);
    font-size: 14px;
    color: var(--rev-text);
    background: var(--rev-surface-1);
    border: 1px solid var(--rev-border-strong);
    border-radius: var(--rev-radius-sm);
    padding: 10px 14px;
    outline: none;
    transition: border-color var(--rev-transition), box-shadow var(--rev-transition);
}

.rev-login-field input:focus {
    border-color: var(--rev-border-focus);
    box-shadow: var(--rev-brand-glow);
}

.rev-login-field input::placeholder {
    color: var(--rev-text-tertiary);
}

.rev-login-btn {
    font-family: var(--rev-font-body);
    font-size: 14px;
    font-weight: 600;
    color: #fff;
    background: var(--rev-brand);
    border: none;
    border-radius: var(--rev-radius-sm);
    padding: 12px;
    cursor: pointer;
    transition: background var(--rev-transition);
    margin-top: 8px;
}

.rev-login-btn:hover {
    background: var(--rev-accent);
}

.rev-login-btn:disabled {
    opacity: 0.5;
    cursor: not-allowed;
}

.rev-login-error {
    font-family: var(--rev-font-body);
    font-size: 13px;
    color: var(--rev-red);
    background: var(--rev-red-dim);
    border-radius: var(--rev-radius-sm);
    padding: 10px 14px;
    text-align: center;
}

/* Tenant selection */
.rev-tenant-list {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.rev-tenant-btn {
    font-family: var(--rev-font-body);
    font-size: 14px;
    font-weight: 500;
    color: var(--rev-text);
    background: var(--rev-surface-3);
    border: 1px solid var(--rev-border);
    border-radius: var(--rev-radius-sm);
    padding: 14px 16px;
    cursor: pointer;
    text-align: left;
    transition: background var(--rev-transition), border-color var(--rev-transition);
}

.rev-tenant-btn:hover {
    background: var(--rev-surface-1);
    border-color: var(--rev-accent);
}

/* Account picker on /login (Blazor parity — known users on this device) */
.rev-account-picker {
    display: flex;
    flex-direction: column;
    gap: 8px;
    margin-bottom: 16px;
}

.rev-account-item {
    display: flex;
    align-items: stretch;
    gap: 6px;
}

.rev-account-pick {
    flex: 1;
    min-width: 0;
    display: inline-flex;
    align-items: center;
    gap: 12px;
    font-family: var(--rev-font-body);
    font-size: 14px;
    font-weight: 500;
    color: var(--rev-text);
    background: var(--rev-surface-3);
    border: 1px solid var(--rev-border);
    border-radius: var(--rev-radius-sm);
    padding: 12px 16px;
    cursor: pointer;
    text-align: left;
    transition: background var(--rev-transition), border-color var(--rev-transition);
}

.rev-account-pick:hover {
    background: var(--rev-surface-1);
    border-color: var(--rev-accent);
}

.rev-account-pick i {
    color: var(--rev-accent);
    font-size: 22px;
    flex-shrink: 0;
}

/* Truncate long emails so the saved-account chip can never force the card
   (and the page) wider than the viewport — without min-width:0 the flex item
   refuses to shrink below the email's intrinsic width, overflowing on mobile. */
.rev-account-pick span {
    flex: 1;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.rev-account-forget {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 36px;
    flex-shrink: 0;
    background: transparent;
    border: 1px solid var(--rev-border);
    border-radius: var(--rev-radius-sm);
    color: var(--rev-text-muted);
    cursor: pointer;
    transition: color var(--rev-transition), border-color var(--rev-transition), background var(--rev-transition);
}

.rev-account-forget:hover {
    color: var(--rev-red, #e74c3c);
    border-color: var(--rev-red, #e74c3c);
    background: rgba(231, 76, 60, 0.08);
}

/* Identity pages */
.rev-login-field-row {
    display: flex;
    gap: 12px;
}

.rev-login-field-row .rev-login-field {
    flex: 1;
}

.rev-login-forgot {
    text-align: right;
    margin-top: -8px;
}

.rev-identity-subtitle {
    font-family: var(--rev-font-body);
    font-size: 13px;
    color: var(--rev-text-muted);
    text-align: center;
    margin-bottom: 20px;
    line-height: 1.5;
}

.rev-identity-message {
    font-family: var(--rev-font-body);
    font-size: 14px;
    color: var(--rev-text);
    text-align: center;
    line-height: 1.6;
    margin-bottom: 20px;
}

.rev-identity-link {
    font-family: var(--rev-font-body);
    font-size: 13px;
    color: var(--rev-brand);
    text-decoration: none;
    transition: color var(--rev-transition);
}

.rev-identity-link:hover {
    color: var(--rev-accent);
    text-decoration: underline;
}

.rev-identity-link-btn {
    display: block;
    text-align: center;
    font-size: 14px;
    font-weight: 600;
    padding: 12px;
    border-radius: var(--rev-radius-sm);
    margin-top: 8px;
    text-decoration: none;
    color: #fff;
    background: var(--rev-brand);
    transition: background var(--rev-transition);
}

.rev-identity-link-btn:hover {
    background: var(--rev-accent);
    color: #fff;
    text-decoration: none;
}

.rev-identity-footer {
    font-family: var(--rev-font-body);
    font-size: 13px;
    color: var(--rev-text-muted);
    text-align: center;
    margin-top: 20px;
}

.rev-field-error {
    font-family: var(--rev-font-body);
    font-size: 12px;
    color: var(--rev-red);
}

.rev-field-optional {
    font-weight: 400;
    color: var(--rev-text-tertiary);
}

@media (max-width: 480px) {
    .rev-login-field-row {
        flex-direction: column;
        gap: 16px;
    }

    .rev-login-card {
        padding: 28px 20px;
    }
}

/* Stub page styling */
.rev-stub-page {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 80px 20px;
    text-align: center;
}

.rev-stub-icon {
    font-size: 48px;
    color: var(--rev-text-muted);
    margin-bottom: 16px;
    opacity: 0.5;
}

.rev-stub-title {
    font-family: var(--rev-font-display);
    font-size: 18px;
    font-weight: 600;
    color: var(--rev-text);
    margin-bottom: 8px;
}

.rev-stub-text {
    font-family: var(--rev-font-body);
    font-size: 14px;
    color: var(--rev-text-muted);
}

/* Avatar initials fallback (SvelteKit — Blazor uses a default PNG instead) */
.rev-client-avatar-initials {
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--rev-surface-3);
    color: var(--rev-text-muted);
    font-family: var(--rev-font-heading);
    font-size: 18px;
    font-weight: 600;
    letter-spacing: 0.5px;
}

/* Clickable avatar with camera overlay */
.rev-avatar-clickable {
    cursor: pointer;
    position: relative;
}

.rev-avatar-overlay {
    position: absolute;
    inset: 0;
    border-radius: 50%;
    background: rgba(0, 0, 0, 0.5);
    display: flex;
    align-items: center;
    justify-content: center;
    opacity: 0;
    transition: opacity var(--rev-transition);
    color: #fff;
    font-size: 18px;
}

.rev-avatar-clickable:hover .rev-avatar-overlay {
    opacity: 1;
}