/* ============================================================
   revyfy-modern.css
   Modern UI override layer — loaded after rev.css and webflow.css.
   Do NOT edit rev.css or webflow.css directly.
   All overrides use existing HTML class selectors.
   ============================================================ */


/* ============================================================
   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;
    --rev-text-muted:   #888ba0;
    --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-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;
}


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

/* Topbar rail */
.app-nav-layout {
    background-color: var(--rev-surface-1) !important;
    border-bottom: 2px solid var(--rev-accent) !important;
    box-shadow: 0 2px 16px rgba(0, 0, 0, 0.45) !important;
}

/* Sidebar panel */
.sidebar-navbar-menu {
    background-color: var(--rev-surface-1) !important;
    border-right: none !important;
    box-shadow: 2px 0 20px rgba(0, 0, 0, 0.35);
}

/* Accent gradient line on right edge of sidebar (desktop) */
.sidebar-navbar-menu::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 / logo area */
.sidebar-navbar-heading {
    background-color: var(--rev-surface-1) !important;
    border-bottom: none !important;
}

/* Sidebar body */
.sidebar-navbar-body {
    border-right: none !important;
    padding-top: 12px;
    padding-bottom: 12px;
}

/* Sidebar body container */
.sidebar-navbar-body-container {
    border-right: none !important;
}

/* Sidebar footer */
.sidebar-navbar-footer {
    border-right: none !important;
    border-top: 1px solid var(--rev-border) !important;
    padding-top: 8px;
    padding-bottom: 8px;
}


/* ============================================================
   3. SIDEBAR NAV LINKS
   ============================================================ */

/* Remove ALL PNG background images from sidebar links */
.sidebar-navbar-link,
.sidebar-navbar-link[class*="link-"] {
    background-image: none !important;
    position: relative;
    padding-left: 52px !important;
    padding-right: 16px !important;
    min-height: 44px;
    height: auto !important;
    display: flex !important;
    align-items: center;
    border-radius: 0 var(--rev-radius-md) var(--rev-radius-md) 0;
    margin-right: 12px;
    font-family: 'DM Sans', 'Gill Sans', sans-serif;
    font-size: 14px;
    font-weight: 500;
    letter-spacing: 0.2px;
    color: var(--rev-text-muted) !important;
    transition: background-color var(--rev-transition), color var(--rev-transition);
    margin-top: 2px;
    margin-bottom: 2px;
}

/* Hover state */
.sidebar-navbar-link:hover {
    background-color: rgba(255, 255, 255, 0.06) !important;
    color: var(--rev-text) !important;
}

/* Active state */
.sidebar-navbar-link.w--current {
    background-color: var(--rev-accent) !important;
    color: #fff !important;
    font-weight: 600;
}

/* FA icon inside nav links — positioned absolutely */
.sidebar-navbar-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);
}

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

.sidebar-navbar-link.w--current .nav-icon {
    opacity: 1;
}

/* Logout button (input[type=submit]) styled as nav link */
.sidebar-navbar-footer .sidebar-navbar-link.w-button {
    background-color: transparent !important;
    background-image: none !important;
    border: none !important;
    width: 100%;
    text-align: left;
    cursor: pointer;
    box-shadow: none !important;
}

.sidebar-navbar-footer .sidebar-navbar-link.w-button:hover {
    background-color: rgba(255, 255, 255, 0.06) !important;
    color: var(--rev-text) !important;
}


/* ============================================================
   4. SIDEBAR DROPDOWN SUBMENUS (SALES / STOCK)
   ============================================================ */

.sidebar-navbar-dropdown-list {
    background-color: transparent !important;
    border: none !important;
    box-shadow: none !important;
    padding-left: 0 !important;
    margin-left: 0 !important;
}

/* Child nav links — indented to show hierarchy */
.sidebar-navbar-dropdown-list .sidebar-navbar-link {
    padding-left: 68px !important;
}

.sidebar-navbar-dropdown-list .sidebar-navbar-link .nav-icon {
    left: 34px !important;
}

/* Dropdown toggle — same style as nav link */
.sidebar-navbar-dropdown .w-dropdown-toggle {
    background-image: none !important;
    cursor: pointer;
    display: block !important;
    padding-left: 52px !important;
    padding-right: 0 !important;
    margin: 0 !important;
    white-space: normal !important;
}

/* Chevron rotation when open */
.sidebar-navbar-dropdown .w-icon-dropdown-toggle {
    transition: transform var(--rev-transition);
    border-color: var(--rev-text-muted) !important;
}

.sidebar-navbar-dropdown .w-dropdown-toggle.w--open .w-icon-dropdown-toggle {
    transform: rotate(180deg);
    border-color: #fff !important;
}


/* ============================================================
   5. TOPBAR CONTAINER & CONTROLS
   ============================================================ */

.app-navbar-container {
    background-color: var(--rev-surface-1);
}

.app-navbar-menu {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 0 16px;
    height: 100%;
}

.app-navbar-menu-item {
    display: flex;
    align-items: center;
}

/* Menu dropdown toggle buttons */
.menu-dropdown-toggle {
    background-image: none !important;
    width: 36px;
    height: 36px;
    border-radius: var(--rev-radius-sm);
    display: flex !important;
    align-items: center;
    justify-content: center;
    color: var(--rev-text-muted);
    font-size: 17px;
    transition: background-color var(--rev-transition), color var(--rev-transition);
    cursor: pointer;
}

.menu-dropdown-toggle:hover,
.menu-dropdown-toggle.w--open {
    background-color: rgba(255, 255, 255, 0.08);
    color: var(--rev-text);
}

/* Remove PNG backgrounds from specific dropdown toggles */
.menu-dropdown-toggle.dropdown-notification,
.menu-dropdown-toggle.dropdown-message,
.menu-dropdown-toggle.dropdown-search {
    background-image: none !important;
}


/* ============================================================
   6. TOPBAR — IDENTITY DISPLAY & PROFILE AVATAR
   ============================================================ */

/* 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: 'Montserrat', sans-serif;
    font-size: 13px;
    font-weight: 600;
    color: var(--rev-text);
    letter-spacing: 0.2px;
    white-space: nowrap;
}

.rev-topbar-user {
    font-family: 'DM Sans', sans-serif;
    font-size: 11px;
    font-weight: 400;
    color: var(--rev-text-muted);
    white-space: nowrap;
}

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

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

/* Profile dropdown menu */
.menu-dropdown-link {
    display: flex !important;
    align-items: center;
    gap: 10px;
    padding: 10px 16px;
    border-radius: var(--rev-radius-sm);
    color: var(--rev-text) !important;
    text-decoration: none !important;
    transition: background-color var(--rev-transition);
    font-family: 'DM Sans', sans-serif;
    font-size: 14px;
}

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

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

/* Hide img icons in profile dropdown */
.menu-dropdown-link img.menu-dropdown-link-icon {
    display: none;
}

.munu-dropdown-link-container {
    display: flex;
    align-items: center;
    gap: 10px;
}


/* ============================================================
   7. DROPDOWN PANELS — SCALE + FADE ANIMATION
   ============================================================ */

.menu-dropdown-list {
    background-color: var(--rev-surface-1) !important;
    border: 1px solid var(--rev-border-strong) !important;
    border-radius: var(--rev-radius-md) !important;
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.55) !important;
    min-width: 220px;
    padding: 6px !important;
    /* Animation base state */
    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;
}

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

/* Sidebar submenus open downward */
.sidebar-navbar-dropdown-list {
    transform-origin: top left;
    border: none !important;
    box-shadow: none !important;
    min-width: unset;
    padding: 0 !important;
}

.sidebar-navbar-dropdown-list.w--open {
    opacity: 1;
    transform: scale(1) translateY(0);
    pointer-events: auto;
}

/* Notification content */
.notification-content-heading {
    font-family: 'DM Sans', sans-serif;
    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-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: 'Montserrat', sans-serif !important;
    font-size: 20px !important;
    font-weight: 700 !important;
    letter-spacing: -0.3px;
    color: var(--rev-text) !important;
    margin-bottom: 0;
}

/* Page tab links in header */
.page-tab-link {
    background-image: none !important;
    padding-left: 10px !important;
    color: var(--rev-text-muted) !important;
    border-bottom: 2px solid transparent;
    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);
}

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

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


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

.card {
    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: 'Montserrat', sans-serif;
    font-weight: 600;
    color: var(--rev-text);
}


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

.button {
    border-radius: var(--rev-radius-sm) !important;
    font-family: 'DM Sans', sans-serif !important;
    font-weight: 600 !important;
    letter-spacing: 0.3px;
    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 {
    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: 'DM Sans', sans-serif !important;
    transition: border-color var(--rev-transition), box-shadow var(--rev-transition);
}

.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
   ============================================================ */

.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;
}


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

.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;
}


/* ============================================================
   15. MODAL
   ============================================================ */

.modal-container {
    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.65) !important;
    padding: 28px 32px !important;
}

.modal-mask {
    background-color: rgba(0, 0, 0, 0.65) !important;
    backdrop-filter: blur(4px);
    -webkit-backdrop-filter: blur(4px);
}

.modal-close {
    background-image: none !important;
    background-color: rgba(255, 255, 255, 0.08) !important;
    border-radius: 50% !important;
    width: 28px !important;
    height: 28px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    cursor: pointer;
    transition: background-color var(--rev-transition);
    color: var(--rev-text-muted);
    font-size: 14px;
}

.modal-close:hover {
    background-color: rgba(255, 255, 255, 0.16) !important;
    color: var(--rev-text);
}


/* ============================================================
   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: 'DM Sans', sans-serif !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 {
    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 {
    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: 'DM Sans', sans-serif;
}

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

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


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

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


/* ============================================================
   20. SYNCFUSION SCHEDULER — BRAND COLOUR HARMONISATION
   ============================================================ */

.e-schedule .e-appointment:hover {
    opacity: 0.85;
}

.e-schedule .e-selected-cell {
    background-color: rgba(230, 14, 137, 0.15) !important;
}

.e-schedule .e-header-cells.e-current-day,
.e-schedule .e-current-time {
    color: var(--rev-accent) !important;
}


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

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

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

/* Left branded panel */
.single-layout-col.left {
    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 {
    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: rev-page-in 150ms cubic-bezier(0.4, 0, 0.2, 1) both;
}

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

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

/* --- Modal slide-up + fade on open --- */
.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);
    }
}

.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;
        transform: translateY(10px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.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: 'DM Sans', sans-serif;
}

/* Hint / helper text */
.hint {
    color: var(--rev-text-muted) !important;
    font-family: 'DM Sans', sans-serif;
    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: 'DM Sans', sans-serif;
    padding: 20px;
    text-align: center;
}


/* ============================================================
   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: 'Montserrat', sans-serif;
    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 */
.rev-data-card .row.table-row.table-header {
    padding-left: 12px;
    padding-right: 12px;
}
/* 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: 'DM Sans', sans-serif;
    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: 'DM Sans', sans-serif;
}

.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: 'DM Sans', sans-serif;
    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: 'DM Sans', sans-serif;
    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: 'DM Sans', sans-serif !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 {
    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;
}


/* ---- 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 */
    .rev-search-row .button.button-primary.searchadd {
        font-size: 0 !important;
        width: 40px !important;
        min-width: 40px !important;
        max-width: 40px !important;
        height: 40px !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 */
    .rev-search-row .button.button-outline {
        font-size: 0 !important;
        width: 40px !important;
        min-width: 40px !important;
        max-width: 40px !important;
        height: 40px !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;
    }

    /* ---- 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;
    }

    /* 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: 30px !important;
    }

    .rev-page-nav {
        height: 30px !important;
    }
}

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

.auth-layout {
    display: flex;
    min-height: 100vh;
    background: var(--rev-surface-1);
    font-family: 'DM Sans', sans-serif;
}

/* 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: 'Montserrat', sans-serif;
    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: 'Montserrat', sans-serif;
    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 mobile */
@media (max-width: 767px) {
    .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-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;
}

/* 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;
        transform: translateY(12px) scale(0.98);
    }
    to {
        opacity: 1;
        transform: translateY(0) scale(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;
    animation: rev-stat-card-in 300ms cubic-bezier(0.4, 0, 0.2, 1) var(--delay, 0ms) both;
    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-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;
    }
}


/* ============================================================
   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;
    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-text);
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.3), 0 0 0 1px var(--rev-border-strong);
}

.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-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;
}

/* 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;
    }

    /* Pad main content above bottom nav */
    .app-main-layout-container {
        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: 8px;
}

.rev-mobile-sheet-link {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 6px;
    padding: 14px 8px;
    border-radius: var(--rev-radius-md);
    background: var(--rev-surface-3);
    border: 1px solid var(--rev-border);
    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: 20px;
}

.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);
}


/* ============================================================
   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-2);
    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: 55fr 45fr;
    gap: 16px;
    align-items: start;
}

/* --- 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;
    cursor: pointer;
}

.rev-pos-client-img {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    object-fit: cover;
    border: 2px solid var(--rev-border-strong);
}

.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);    }

/* Action chips */
.rev-pos-action-chips {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    margin-bottom: 14px;
    padding: 12px 0;
    border-top: 1px solid var(--rev-border);
    border-bottom: 1px solid var(--rev-border);
}

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

.rev-pos-action-chip:hover { border-color: var(--rev-accent); color: var(--rev-accent); }
.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 --- */
.rev-pos-pay-bar {
    flex-shrink: 0;
    border-top: 1px solid var(--rev-border);
    padding: 12px 16px;
    background: var(--rev-surface-1);
    border-radius: 0 0 var(--rev-radius-lg) var(--rev-radius-lg);
    display: flex;
    gap: 8px;
}

.rev-pos-pay-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    border-radius: var(--rev-radius-md);
    font-size: 14px;
    font-weight: 600;
    padding: 12px 20px;
    cursor: pointer;
    text-decoration: none;
    transition: all var(--rev-transition);
    border: none;
    white-space: nowrap;
}

.rev-pos-pay-btn.primary {
    background: var(--rev-accent);
    color: white;
    flex: 1;
}

.rev-pos-pay-btn.primary:hover {
    background: #d00d7c;
    box-shadow: var(--rev-shadow-hover);
    transform: translateY(-1px);
}

.rev-pos-pay-btn.secondary {
    background: var(--rev-surface-3);
    color: var(--rev-text);
    border: 1px solid var(--rev-border-strong);
}

.rev-pos-pay-btn.secondary:hover { border-color: var(--rev-accent); color: var(--rev-accent); }
.rev-pos-pay-btn.disabled { opacity: 0.4; pointer-events: none; }

/* 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    { display: none; }
    .rev-pos-layout.show-cart    .rev-pos-catalog { display: none; }

    .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;
    justify-content: space-between;
    gap: 8px;
}

.rev-chart-card-title {
    font-family: 'Montserrat', sans-serif;
    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: 'DM Sans', sans-serif;
}

/* ── 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: 'DM Sans', sans-serif;
    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: flex;
    align-items: center;
    gap: 10px;
}

.rev-bar-list-rank {
    font-size: 11px;
    font-weight: 700;
    color: var(--rev-text-muted);
    width: 16px;
    flex-shrink: 0;
    text-align: center;
}

.rev-bar-list-label {
    font-size: 13px;
    font-weight: 500;
    color: var(--rev-text);
    flex: 1;
    min-width: 0;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.rev-bar-list-track {
    width: 80px;
    height: 6px;
    border-radius: 99px;
    background: rgba(255, 255, 255, 0.07);
    flex-shrink: 0;
    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: 'Montserrat', sans-serif;
    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 MODAL  (.rev-cr-*)
   ============================================================ */

.rev-cr-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-cr-mask {
    position: absolute;
    inset: 0;
    z-index: 0;
}

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

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

.rev-cr-header-inner {
    display: flex;
    align-items: center;
    gap: 12px;
}

.rev-cr-header-icon {
    font-size: 22px;
    color: var(--rev-accent);
    flex-shrink: 0;
}

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

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

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

/* 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 */
.rev-cr-footer {
    flex-shrink: 0;
    padding: 14px 20px;
    border-top: 1px solid var(--rev-border);
    background: var(--rev-surface-3);
    display: flex;
    gap: 10px;
}

.rev-cr-footer .button-block {
    margin-bottom: 0 !important;
    flex: 1;
}

/* Mobile: bottom sheet sized to content */
@media (max-width: 767px) {
    .rev-cr-modal {
        padding: 0;
        align-items: flex-end;
    }

    .rev-cr-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);
    }
}


/* ============================================================
   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 {
    background: rgba(217, 119, 6, 0.15);
    color: var(--rev-amber);
}