@import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&display=swap');

:root {
    --color-primary: #0F172A;
    --color-secondary: #6366F1;
    --color-success: #10B981;
    --color-warning: #F59E0B;
    --color-error: #EF4444;
    --color-info: #3B82F6;
    --color-bg: #F8FAFC;
    --color-surface: #FFFFFF;
    --color-text-primary: #1E293B;
    --color-text-secondary: #64748B;
    --color-border: #E2E8F0;
    --shadow-sm: 0 1px 2px 0 rgb(0 0 0 / 0.05);
    --shadow-md: 0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1);
    --radius: 8px;
}

html, body {
    font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
    background-color: var(--color-bg);
    color: var(--color-text-primary);
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

/* Content Header */
.content-header {
    display: flex !important;
    flex-direction: row !important;
    flex-wrap: nowrap !important;
    align-items: center !important;
    justify-content: flex-start;
    padding: 0.5rem 1rem;
    background: var(--color-surface);
    border-bottom: 1px solid var(--color-border);
    min-height: 48px;
    position: sticky;
    top: 0;
    z-index: 100;
    gap: 0.5rem;
}

.content-header .header-spacer {
    flex: 1 1 auto !important;
    min-width: 0;
}

.content-header .menu-toggle {
    color: var(--color-text-secondary);
}

.content-header .header-quick-actions {
    margin-left: 0.25rem;
    flex: 0 0 auto;
}

.content-header .user-info {
    margin-left: auto !important;
}

/* User Menu Dropdown */
.content-header .user-menu {
    margin-left: auto !important;
}

.user-dropdown {
    display: flex !important;
    align-items: center !important;
    gap: 0.75rem;
    cursor: pointer;
    padding: 0.4rem 1rem;
    border-radius: 6px;
    transition: background-color 0.2s ease;
}

.user-dropdown:hover {
    background-color: var(--color-bg);
}

.user-avatar-header {
    width: 32px !important;
    height: 32px !important;
    font-size: 0.8rem !important;
}

.user-menu-btn .mud-button-root {
    text-transform: none !important;
    font-weight: 500 !important;
    color: var(--color-text-primary) !important;
    padding: 0.25rem 0.5rem !important;
    min-width: auto !important;
}

.user-menu-btn .mud-icon-root {
    color: var(--color-text-secondary) !important;
}

.mud-menu .mud-list {
    padding: 0.5rem 0;
}

.mud-menu .mud-menu-item {
    font-size: 0.875rem;
    padding: 0.5rem 1rem;
}

.mud-menu .mud-menu-item .mud-icon-root {
    margin-right: 0.75rem;
    font-size: 1.25rem;
    color: var(--color-text-secondary);
}

.app-header .mud-icon-button {
    color: var(--color-text-secondary);
}

.user-avatar {
    background: var(--color-secondary) !important;
    color: white !important;
    font-weight: 600;
    font-size: 0.75rem;
}

/* Sidebar */
.sidebar {
    background: var(--color-primary) !important;
    border-right: none !important;
    height: 100vh !important;
}

.sidebar-header {
    border-bottom: 1px solid rgba(255,255,255,0.1);
    margin-bottom: 0.5rem;
}

.brand-icon {
    color: var(--color-secondary) !important;
}

.brand-text {
    color: white !important;
    font-weight: 600;
}

.nav-menu {
    padding: 0 0.5rem;
}

.nav-section-title {
    color: rgba(255,255,255,0.4) !important;
    font-size: 0.65rem !important;
    letter-spacing: 0.1em;
    padding: 1rem 1rem 0.5rem 1rem;
    margin-top: 0.5rem;
}

.nav-menu .mud-nav-link {
    color: rgba(255,255,255,0.7) !important;
    border-radius: 6px;
    margin-bottom: 2px;
    font-size: 0.8125rem;
}

.nav-menu .mud-nav-link:hover {
    background: rgba(255,255,255,0.08) !important;
    color: white !important;
}

.nav-menu .mud-nav-link.active {
    background: var(--color-secondary) !important;
    color: white !important;
}

.nav-menu .mud-nav-link .mud-icon-root {
    color: inherit !important;
    font-size: 1.25rem;
}

/* Main Content */
.main-content {
    background: var(--color-bg);
    min-height: 100vh;
}

.mud-main-content.main-content {
    padding-top: 0 !important;
}

/* Page Header */
.page-header {
    margin-bottom: 1.5rem;
}

.page-header .mud-typography-h4 {
    margin-bottom: 0.25rem;
}

/* Stat Cards */
.stat-card {
    display: flex;
    align-items: center;
    gap: 1rem;
    padding: 1.25rem;
    background: var(--color-surface);
    border: 1px solid var(--color-border);
    border-radius: var(--radius);
    transition: all 0.2s ease;
}

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

.stat-icon {
    width: 48px;
    height: 48px;
    border-radius: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.stat-icon .mud-icon-root {
    font-size: 1.5rem;
    color: white;
}

.stat-icon-primary { background: linear-gradient(135deg, #6366F1 0%, #8B5CF6 100%); }
.stat-icon-info { background: linear-gradient(135deg, #3B82F6 0%, #60A5FA 100%); }
.stat-icon-success { background: linear-gradient(135deg, #10B981 0%, #34D399 100%); }
.stat-icon-warning { background: linear-gradient(135deg, #F59E0B 0%, #FBBF24 100%); }

.stat-content {
    flex: 1;
    min-width: 0;
}

.stat-label {
    color: var(--color-text-secondary) !important;
    font-size: 0.75rem;
    font-weight: 500;
    text-transform: uppercase;
    letter-spacing: 0.025em;
}

.stat-value {
    color: var(--color-text-primary) !important;
    font-weight: 600 !important;
    margin-top: 0.25rem;
}

/* Data Cards */
.data-card {
    background: var(--color-surface);
    border: 1px solid var(--color-border);
    border-radius: var(--radius);
    overflow: hidden;
}

.card-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 1rem 1.25rem;
    border-bottom: 1px solid var(--color-border);
}

.card-body {
    padding: 1.25rem;
}

/* Overview Items */
.overview-item {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0.5rem 0;
}

.overview-label {
    color: var(--color-text-secondary);
    font-size: 0.875rem;
}

.overview-value {
    font-weight: 600;
    color: var(--color-text-primary);
}

.text-success { color: var(--color-success) !important; }
.text-warning { color: var(--color-warning) !important; }
.text-error { color: var(--color-error) !important; }

/* Tables */
.invoice-table {
    background: transparent;
}

.invoice-table .mud-table-head th {
    background: var(--color-bg) !important;
    font-size: 0.75rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.025em;
    color: var(--color-text-secondary);
    border-bottom: 1px solid var(--color-border);
}

.invoice-table .mud-table-row:hover {
    background: var(--color-bg) !important;
}

.font-weight-medium {
    font-weight: 500;
}

/* Status Chips */
.status-chip {
    font-size: 0.7rem !important;
    font-weight: 600;
    height: 22px !important;
    text-transform: uppercase;
    letter-spacing: 0.025em;
}

/* Empty State */
.empty-state {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 3rem;
    text-align: center;
}

/* Login Page */
.login-container {
    min-height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
    background: linear-gradient(135deg, #0F172A 0%, #1E293B 100%);
}

.login-card {
    width: 100%;
    max-width: 400px;
    background: var(--color-surface);
    border-radius: 12px;
    padding: 2.5rem;
    box-shadow: 0 25px 50px -12px rgb(0 0 0 / 0.25);
}

.login-header {
    text-align: center;
    margin-bottom: 2rem;
}

.login-logo {
    width: 56px;
    height: 56px;
    background: linear-gradient(135deg, #6366F1 0%, #8B5CF6 100%);
    border-radius: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 auto 1rem;
}

.login-logo .mud-icon-root {
    color: white;
    font-size: 1.75rem;
}

.login-title {
    font-weight: 600;
    color: var(--color-text-primary);
    margin-bottom: 0.25rem;
}

.login-subtitle {
    color: var(--color-text-secondary);
    font-size: 0.875rem;
}

.login-form .mud-input-control {
    margin-bottom: 1rem;
}

.login-button {
    margin-top: 0.5rem;
    height: 44px;
    font-weight: 600;
    text-transform: none;
    letter-spacing: 0;
}

.login-footer {
    text-align: center;
    margin-top: 1.5rem;
    padding-top: 1.5rem;
    border-top: 1px solid var(--color-border);
}

/* MudBlazor Overrides */
.mud-paper {
    box-shadow: none;
}

.mud-table-container {
    box-shadow: none !important;
}

.mud-button-root {
    text-transform: none;
    font-weight: 500;
    letter-spacing: 0;
}

.mud-input-label {
    font-size: 0.875rem;
}

.mud-chip {
    font-weight: 500;
}

/* Fix DateRangePicker popover visibility */
.mud-popover-provider {
    z-index: 10000 !important;
}

.mud-popover {
    z-index: 10001 !important;
    overflow: visible !important;
}

.mud-picker .mud-popover {
    min-width: 320px !important;
}

.mud-picker-container {
    z-index: 10001 !important;
    overflow: visible !important;
}

.mud-picker-calendar {
    min-width: 300px !important;
}

.mud-drawer {
    overflow: visible !important;
}

.mud-main-content {
    overflow: visible !important;
}

.mud-picker-datepicker-header {
    min-width: 300px !important;
}

/* Remove the up/down spinner arrows from every numeric field (MudNumericField). */
.mud-input-numeric-spin {
    display: none !important;
}

/* Loading Progress */
.loading-progress {
    position: relative;
    display: block;
    width: 6rem;
    height: 6rem;
    margin: 20vh auto 1rem auto;
}

.loading-progress circle {
    fill: none;
    stroke: var(--color-border);
    stroke-width: 0.4rem;
    transform-origin: 50% 50%;
    transform: rotate(-90deg);
}

.loading-progress circle:last-child {
    stroke: var(--color-secondary);
    stroke-dasharray: calc(3.141 * var(--blazor-load-percentage, 0%) * 0.8), 500%;
    transition: stroke-dasharray 0.05s ease-in-out;
}

.loading-progress-text {
    position: absolute;
    text-align: center;
    font-weight: 500;
    color: var(--color-text-secondary);
    inset: calc(20vh + 2.5rem) 0 auto 0;
    font-size: 0.875rem;
}

.loading-progress-text:after {
    content: var(--blazor-load-percentage-text, "Loading");
}

/* Error UI */
#blazor-error-ui {
    background: var(--color-error);
    bottom: 0;
    box-shadow: var(--shadow-md);
    display: none;
    left: 0;
    padding: 0.75rem 1.5rem;
    position: fixed;
    width: 100%;
    z-index: 1000;
    color: white;
    font-size: 0.875rem;
}

#blazor-error-ui .dismiss {
    cursor: pointer;
    position: absolute;
    right: 1rem;
    top: 0.5rem;
}

.blazor-error-boundary {
    background: var(--color-error);
    padding: 1rem;
    color: white;
    border-radius: var(--radius);
}

.blazor-error-boundary::after {
    content: "An error has occurred.";
}

/* Responsive */
@media (max-width: 600px) {
    .stat-card {
        padding: 1rem;
    }

    .stat-icon {
        width: 40px;
        height: 40px;
    }

    .page-header {
        margin-bottom: 1rem;
    }
}

/* ========== Header notification bells ========== */
.header-bells {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    margin-right: 1rem;
}
.bell-btn .mud-icon-root { color: #475569 !important; }
.bell-btn-payment:hover .mud-icon-root  { color: #10B981 !important; }
.bell-btn-activity:hover .mud-icon-root { color: #3B82F6 !important; }
.bell-badge .mud-badge {
    font-size: 0.65rem !important;
    height: 18px !important;
    min-width: 18px !important;
    padding: 0 4px !important;
}
.notif-item-unread {
    background: #EFF6FF;
}
.notif-item-unread:hover {
    background: #DBEAFE !important;
}

/* ========== Mobile / narrow-screen header ==========
   The content-header is a single non-wrapping flex row (hamburger + quick
   actions + bells + user menu). On phones it overflows and clips. These rules
   progressively compact it so everything stays on one row and fully visible. */

/* Tablet & down: tighten spacing so the row has room to breathe. */
@media (max-width: 768px) {
    .content-header {
        padding: 0.4rem 0.5rem;
        gap: 0.35rem;
    }
    .content-header .header-quick-actions {
        margin-left: 0 !important;
        gap: 0.35rem !important;
    }
    .header-bells {
        gap: 0.1rem;
        margin-right: 0.25rem;
    }
    .user-dropdown {
        gap: 0.35rem;
        padding: 0.3rem 0.4rem;
    }
    .quick-action-btn {
        min-width: 0 !important;
        padding: 0.3rem 0.6rem !important;
    }
}

/* Small phones: drop the username label (avatar + chevron remain the menu
   trigger). The text node can't be targeted directly, so collapse the whole
   button label and restore the chevron icon's size. */
@media (max-width: 600px) {
    .user-menu-btn .mud-button-root {
        padding: 0.25rem !important;
    }
    .user-menu-btn .mud-button-label {
        font-size: 0 !important;
    }
    .user-menu-btn .mud-button-label .mud-button-icon-end {
        font-size: 1.25rem !important;
    }
}

/* Very small phones: collapse the two quick-action buttons to icon-only.
   font-size:0 hides the text node; the start-icon size is restored and its
   right margin removed so the button becomes a tidy square. */
@media (max-width: 480px) {
    .quick-action-btn {
        padding: 0.35rem !important;
    }
    .quick-action-btn .mud-button-label {
        font-size: 0 !important;
    }
    .quick-action-btn .mud-button-label .mud-button-icon-start {
        margin: 0 !important;
        font-size: 1.25rem !important;
    }
}

/* ========== Dashboard period filter (Today/Yesterday/Week/Month/Year) ==========
   On desktop this is a right-aligned row of 5 fixed 90px buttons (~450px wide).
   On phones it overflows the viewport and clips the leading buttons. Let the row
   wrap, and on small screens drop the fixed width so the buttons size to content
   and wrap neatly (centered). Keyed off the inline min-width:90px those buttons
   carry, which is unique to this control (avoids touching the precompiled .razor). */
.mud-stack-row:has(> .mud-button-root[style*="min-width: 90px"]) {
    flex-wrap: wrap !important;
}
@media (max-width: 560px) {
    .mud-stack-row:has(> .mud-button-root[style*="min-width: 90px"]) {
        justify-content: center !important;
    }
    .mud-button-root[style*="min-width: 90px"] {
        min-width: 0 !important;
    }
}

/* Dashboard "Top Users" / "Top Sell Sites" collapsible panels.
   Desktop: chevron hidden + body always visible (layout unchanged).
   Mobile (<=768px): chevron shown, body collapsed by default, .open expands it. */
.dash-toggle { display: none; }
@media (max-width: 768px) {
    .dash-head { cursor: pointer; }
    .dash-toggle { display: inline-flex !important; }
    .dash-body { display: none; }
    .dash-body.open { display: block; }
}

/* ============================================================================
   FULL-SITE MOBILE RESPONSIVENESS  (added 2026-06-17)
   Activates only at <=768px; desktop layout is left completely untouched.
   Goal: no horizontal page overflow on phones, keeping the existing design.
   ============================================================================ */
@media (max-width: 768px) {
    /* 1) Hard guard: the page itself must never scroll sideways. */
    html, body { overflow-x: hidden !important; }
    .mud-main-content.main-content { overflow-x: hidden !important; }

    /* 2) Shrink the generous content padding (MudContainer pa-6 = 24px). */
    .main-content .mud-container { padding-left: 12px !important; padding-right: 12px !important; }

    /* 3) Toolbars / filter rows wrap instead of overflowing. Wrapping only
          kicks in when content can't fit, so rows that already fit are unchanged. */
    .main-content .mud-stack-row { flex-wrap: wrap !important; }
    .main-content .d-flex.flex-row { flex-wrap: wrap !important; }

    /* 4) Neutralise hard min-width floors on toolbar inputs so they can shrink,
          and cap fixed-width selects/fields to the available width. */
    .main-content [style*="min-width:"] { min-width: 0 !important; }
    .main-content [style*="width: 140px"],
    .main-content [style*="width: 180px"],
    .main-content [style*="width: 200px"],
    .main-content [style*="width: 250px"],
    .main-content .mud-input-control[style*="width:"],
    .main-content .mud-select[style*="width:"] { max-width: 100% !important; }

    /* 5) Dialogs use the full mobile width (and never exceed the viewport). */
    .mud-dialog { width: calc(100vw - 24px) !important; max-width: calc(100vw - 24px) !important; }

    /* 6) TABLES: keep the table look and scroll horizontally instead of
          MudBlazor's card-stacking (its stacking is gated by the JS-applied
          .mud-xs/sm/md/lg-table classes — we undo those here). */
    .mud-table .mud-table-container { overflow-x: auto !important; }
    .mud-xs-table .mud-table-head .mud-table-row, .mud-sm-table .mud-table-head .mud-table-row,
    .mud-md-table .mud-table-head .mud-table-row, .mud-lg-table .mud-table-head .mud-table-row { display: table-row !important; }
    .mud-xs-table .mud-table-foot, .mud-sm-table .mud-table-foot,
    .mud-md-table .mud-table-foot, .mud-lg-table .mud-table-foot { display: table-footer-group !important; }
    .mud-xs-table .mud-table-row, .mud-sm-table .mud-table-row,
    .mud-md-table .mud-table-row, .mud-lg-table .mud-table-row { display: table-row !important; }
    .mud-xs-table .mud-table-cell, .mud-sm-table .mud-table-cell,
    .mud-md-table .mud-table-cell, .mud-lg-table .mud-table-cell { display: table-cell !important; }
    .mud-xs-table .mud-table-cell:before, .mud-sm-table .mud-table-cell:before,
    .mud-md-table .mud-table-cell:before, .mud-lg-table .mud-table-cell:before { content: none !important; display: none !important; }
    /* restore inline column alignment that stacked-mode forced to start */
    .mud-xs-table .mud-table-cell[style*="text-align:right"], .mud-sm-table .mud-table-cell[style*="text-align:right"],
    .mud-md-table .mud-table-cell[style*="text-align:right"], .mud-lg-table .mud-table-cell[style*="text-align:right"],
    .mud-xs-table .mud-table-cell[style*="text-align: right"], .mud-sm-table .mud-table-cell[style*="text-align: right"],
    .mud-md-table .mud-table-cell[style*="text-align: right"], .mud-lg-table .mud-table-cell[style*="text-align: right"] { text-align: right !important; }
    .mud-xs-table .mud-table-cell[style*="text-align:center"], .mud-sm-table .mud-table-cell[style*="text-align:center"],
    .mud-md-table .mud-table-cell[style*="text-align:center"], .mud-lg-table .mud-table-cell[style*="text-align:center"],
    .mud-xs-table .mud-table-cell[style*="text-align: center"], .mud-sm-table .mud-table-cell[style*="text-align: center"],
    .mud-md-table .mud-table-cell[style*="text-align: center"], .mud-lg-table .mud-table-cell[style*="text-align: center"] { text-align: center !important; }
    .mud-table-smalldevices-sortselect { display: none !important; }

    /* 7) Print / public invoice views (InvoicePrint, InvoicePublicPrint):
          stack the 2-col header and trim the wide page padding. */
    .inv { padding: 16px !important; }
    .inv-top { grid-template-columns: 1fr !important; gap: 16px !important; }
    .inv-toolbar { flex-wrap: wrap !important; padding-left: 16px !important; padding-right: 16px !important; }

    /* 8) GrapesJS mail-template editor: trim the tall fixed min-height. */
    .mte-editor-wrap { min-height: 360px !important; }

    /* 9) Notification dialogs (NotificationsDialog .pn-*): responsive desktop-style
          card laid out with CSS grid — [check] [invoice no. (left)] [time over amount
          (right)]. Grid rows keep the time chip and amount in separate cells so they
          can't overlap, with no wasted vertical space. Fits dialog width, no h-scroll. */
    .pn-body { min-width: 0 !important; overflow-x: hidden !important; }
    .pn-card {
        display: grid !important;
        grid-template-columns: auto minmax(0, 1fr) auto !important;
        grid-template-rows: auto auto !important;
        align-items: start !important;
        column-gap: 10px !important; row-gap: 2px !important;
        padding: 11px 12px !important;
    }
    .pn-check { grid-column: 1 !important; grid-row: 1 / span 2 !important; align-self: center !important; }
    .pn-col-inv, .pn-col-msg { grid-column: 2 !important; grid-row: 1 / span 2 !important; min-width: 0 !important; }
    .pn-time { grid-column: 3 !important; grid-row: 1 !important; position: static !important;
               margin: 0 !important; justify-self: end !important; align-self: start !important; }
    .pn-col-amt { grid-column: 3 !important; grid-row: 2 !important; margin: 0 !important;
                  align-items: flex-end !important; text-align: right !important; }
    .pn-col-amt .pn-k { display: none !important; }   /* hide the "AMOUNT" label on mobile */
    /* show the full invoice number (wrap if needed) instead of ellipsis-truncating */
    .pn-inv { font-size: 0.82rem !important; white-space: normal !important; overflow: visible !important;
              text-overflow: clip !important; line-height: 1.25 !important; overflow-wrap: anywhere !important; }
    .pn-copy { width: 20px !important; height: 20px !important; flex: 0 0 20px !important; }
}

/* ========== Thin scrollbars (left menu + main body) ========== */

/* Force the sidebar drawer to scroll vertically (overrides the global
   `.mud-drawer { overflow: visible }` rule above, which exists to keep
   picker popovers visible but kills the sidebar scrollbar). */
.mud-drawer.sidebar,
.sidebar .mud-drawer-content,
.sidebar .mud-navmenu {
    overflow-y: auto !important;
    overflow-x: hidden !important;
}

/* Firefox */
html, body,
.mud-drawer.sidebar,
.sidebar .mud-drawer-content,
.sidebar .mud-navmenu,
.main-content,
.mud-main-content {
    scrollbar-width: thin;
}

html, body,
.main-content,
.mud-main-content {
    scrollbar-color: rgba(148, 163, 184, 0.6) transparent;
}

.mud-drawer.sidebar,
.sidebar .mud-drawer-content,
.sidebar .mud-navmenu {
    scrollbar-color: rgba(255, 255, 255, 0.35) transparent;
}

/* WebKit (Chrome, Edge, Safari) */
html::-webkit-scrollbar,
body::-webkit-scrollbar,
.mud-drawer.sidebar::-webkit-scrollbar,
.sidebar .mud-drawer-content::-webkit-scrollbar,
.sidebar .mud-navmenu::-webkit-scrollbar,
.main-content::-webkit-scrollbar,
.mud-main-content::-webkit-scrollbar {
    width: 6px;
    height: 6px;
}

html::-webkit-scrollbar-track,
body::-webkit-scrollbar-track,
.mud-drawer.sidebar::-webkit-scrollbar-track,
.sidebar .mud-drawer-content::-webkit-scrollbar-track,
.sidebar .mud-navmenu::-webkit-scrollbar-track,
.main-content::-webkit-scrollbar-track,
.mud-main-content::-webkit-scrollbar-track {
    background: transparent;
}

html::-webkit-scrollbar-thumb,
body::-webkit-scrollbar-thumb,
.main-content::-webkit-scrollbar-thumb,
.mud-main-content::-webkit-scrollbar-thumb {
    background: rgba(148, 163, 184, 0.6);
    border-radius: 3px;
}

html::-webkit-scrollbar-thumb:hover,
body::-webkit-scrollbar-thumb:hover,
.main-content::-webkit-scrollbar-thumb:hover,
.mud-main-content::-webkit-scrollbar-thumb:hover {
    background: rgba(100, 116, 139, 0.8);
}

.mud-drawer.sidebar::-webkit-scrollbar-thumb,
.sidebar .mud-drawer-content::-webkit-scrollbar-thumb,
.sidebar .mud-navmenu::-webkit-scrollbar-thumb {
    background: rgba(255, 255, 255, 0.35);
    border-radius: 3px;
}

.mud-drawer.sidebar::-webkit-scrollbar-thumb:hover,
.sidebar .mud-drawer-content::-webkit-scrollbar-thumb:hover,
.sidebar .mud-navmenu::-webkit-scrollbar-thumb:hover {
    background: rgba(255, 255, 255, 0.55);
}

/* Sidebar resizer handle (drag-to-resize between menu and body).
   Sits flush against the right edge of the menu using --rbill-sidebar-w,
   which sidebarResizer.applyWidth keeps in sync on the document root. */
:root {
    --rbill-sidebar-w: 240px;
}
.sidebar-resizer {
    position: fixed;
    top: 0;
    left: var(--rbill-sidebar-w, 240px);
    /* MudBlazor's `.mud-drawer ~ div:not(.mud-main-content)` rule applies
       margin-left: var(--mud-drawer-width-left) to siblings of the drawer.
       The resizer is such a sibling, so without this override it gets shifted
       by an extra sidebar-width and ends up at 2× the intended position. */
    margin-left: 0 !important;
    width: 8px;
    height: 100vh;
    cursor: col-resize;
    background: transparent;
    z-index: 1301;
    touch-action: none;
    transition: background-color 0.15s ease;
}

.sidebar-resizer::after {
    content: '';
    position: absolute;
    top: 50%;
    left: 3px;
    width: 2px;
    height: 40px;
    background: rgba(148, 163, 184, 0.55);
    border-radius: 1px;
    transform: translateY(-50%);
    transition: background-color 0.15s ease, height 0.15s ease;
    pointer-events: none;
}

.sidebar-resizer:hover {
    background-color: rgba(99, 102, 241, 0.12);
}

.sidebar-resizer:hover::after,
.sidebar-resizer:active::after {
    background: rgba(99, 102, 241, 0.95);
    height: 56px;
}

/* ===== Invoices table (always a table; horizontal scroll when wider than the screen) ===== */
.inv-grid-wrap {
    overflow-x: auto;
    border: 1px solid var(--color-border);
    border-radius: 10px;
    background: var(--color-surface);
}
.inv-grid { width: 100%; margin-bottom: 0; font-size: 0.82rem; border-collapse: separate; border-spacing: 0; }

/* header */
.inv-grid thead th {
    background: #f1f5f9;
    color: #475569;
    font-weight: 600;
    font-size: 0.7rem;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    white-space: nowrap;
    vertical-align: middle;
    border-bottom: 1px solid var(--color-border);
    padding: 11px 14px;
}
.inv-grid thead th:first-child { border-top-left-radius: 10px; }
.inv-grid thead th:last-child  { border-top-right-radius: 10px; }
.inv-grid thead th[role="button"] { cursor: pointer; user-select: none; transition: color .12s; }
.inv-grid thead th[role="button"]:hover { color: var(--color-secondary); }
.inv-grid .inv-sort { color: #cbd5e1; font-size: 0.65rem; margin-left: 3px; }

/* body */
.inv-grid tbody td {
    padding: 10px 14px;
    vertical-align: middle;
    white-space: nowrap;
    border-top: 1px solid #eef2f7;
    color: var(--color-text-primary);
}
.inv-grid tbody tr:first-child td { border-top: none; }
.inv-grid tbody tr:hover td { background: #f8fafc; }

/* footer summary */
.inv-grid tfoot td {
    padding: 12px 14px;
    border-top: 2px solid var(--color-border);
    background: #f8fafc;
    white-space: nowrap;
}
.inv-grid tfoot tr td:last-child { border-bottom-right-radius: 10px; }
.inv-grid tfoot tr td:first-child { border-bottom-left-radius: 10px; }

/* keep long emails from blowing the row width out too far */
.inv-grid td[data-label="Email"] { max-width: 240px; overflow: hidden; text-overflow: ellipsis; }

/* Bootstrap isn't loaded, so make the alignment utility classes the grid markup uses
   actually take effect (header + data line up per column). Scoped to .inv-grid. */
.inv-grid th.text-center, .inv-grid td.text-center { text-align: center; }
.inv-grid th.text-end,    .inv-grid td.text-end    { text-align: right; }

/* ===== Invoices pager (self-styled; no Bootstrap dependency) ===== */
.inv-pager { display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; gap: 10px; margin-top: 14px; }
.inv-pager-info { color: var(--color-text-secondary); font-size: 0.8rem; }
.inv-pager-info .inv-dot { margin: 0 6px; color: var(--color-border); }
.inv-pager-right { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }

.inv-input {
    height: 32px; border: 1px solid var(--color-border); border-radius: 6px;
    padding: 0 8px; font-size: 0.8rem; background: #fff; color: var(--color-text-primary);
}
.inv-input:focus { outline: none; border-color: var(--color-secondary); }

.inv-go { display: inline-flex; align-items: center; border: 1px solid var(--color-border); border-radius: 6px; overflow: hidden; height: 32px; }
.inv-go-label { background: #f1f5f9; padding: 0 9px; height: 100%; display: flex; align-items: center; font-size: 0.76rem; color: #475569; border-right: 1px solid var(--color-border); }
.inv-go-input { width: 58px; border: none; height: 100%; padding: 0 8px; font-size: 0.8rem; }
.inv-go-input:focus { outline: none; }

.inv-pagination { display: flex; align-items: center; list-style: none; gap: 3px; margin: 0; padding: 0; }
.inv-pagination li { display: flex; }
.inv-pagination li button, .inv-pagination li span {
    display: inline-flex; align-items: center; justify-content: center;
    min-width: 32px; height: 32px; padding: 0 8px;
    border: 1px solid var(--color-border); background: #fff; color: var(--color-text-primary);
    border-radius: 6px; font-size: 0.8rem; cursor: pointer; transition: background .12s, color .12s;
}
.inv-pagination li button:hover { background: #f1f5f9; }
.inv-pagination li.active button { background: var(--color-secondary); border-color: var(--color-secondary); color: #fff; font-weight: 600; }
.inv-pagination li.disabled button { color: #cbd5e1; cursor: default; background: #fff; }
.inv-pagination li.disabled button:hover { background: #fff; }
.inv-pagination li.ellipsis span { border: none; cursor: default; min-width: 18px; color: var(--color-text-secondary); }

/* ===== Project-wide Bootstrap-style grid theme (applied to every MudBlazor MudTable) ===== */
/* mirrors the Invoices (.inv-grid) look so all grids are visually consistent */
.mud-table .mud-table-container { border: 1px solid var(--color-border); border-radius: 10px; }
.mud-table .mud-table-root { border-collapse: separate; border-spacing: 0; }

/* header */
.mud-table .mud-table-head .mud-table-cell {
    background: #f1f5f9 !important;
    color: #475569 !important;
    font-weight: 600 !important;
    font-size: 0.7rem !important;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    border-bottom: 1px solid var(--color-border) !important;
    white-space: nowrap;
}
.mud-table .mud-table-head .mud-table-sort-label,
.mud-table .mud-table-head .mud-table-sort-label .mud-button-root,
.mud-table .mud-table-head .mud-button-label { color: #475569 !important; }

/* body */
.mud-table .mud-table-body .mud-table-cell {
    border-bottom: 1px solid #eef2f7 !important;
    font-size: 0.82rem;
    color: var(--color-text-primary);
}
.mud-table .mud-table-body .mud-table-row:hover { background: #f8fafc !important; }
.mud-table.mud-table-dense .mud-table-cell { padding: 9px 14px; }

/* footer summary */
.mud-table .mud-table-foot .mud-table-cell {
    background: #f8fafc !important;
    border-top: 2px solid var(--color-border) !important;
    font-weight: 600;
}

/* pager: lighter, matches the Invoices pager */
.mud-table .mud-table-pager { border-top: 1px solid var(--color-border); font-size: 0.8rem; }

/* ===== Rich-text (Quill-authored) message preview — restore proper list indentation =====
   The app's global reset sets ol/ul padding to 0, which makes rendered template lists
   (e.g. the payment-instructions email) hang their numbers to the far left. Re-indent them
   here so any template renders cleanly, regardless of how it was edited in the editor. */
.rte-content ol,
.rte-content ul { padding-left: 1.5rem; margin: 0.25rem 0; list-style-position: outside; }
.rte-content ol { list-style-type: decimal; }
.rte-content ul { list-style-type: disc; }
.rte-content li { margin: 0.15rem 0; }
/* hide leftover Quill editor artifacts that shouldn't render outside the editor */
.rte-content li .ql-ui { display: none; }