@import '_content/Blazored.Modal/Blazored.Modal.bundle.scp.css';

/* /Layout/EditorWindowMenubar.razor.rz.scp.css */
article.content1[b-8hkvnx5kn3] {
    flex: 1;
    overflow-y: auto;
    margin-left: 11.1rem;
    margin-top: 20px;
}

.side-bar[b-8hkvnx5kn3] {
    background-color: #3399ff;
    width: 11.1rem;
    position: fixed;
    top: 3.5rem;
    bottom: 3.5rem;
    left: 0;
    overflow-y: auto;
    display: flex;
    flex-direction: column;
    scrollbar-width: thin;
    scrollbar-color: #99c2ff #f1f1f1;
    z-index: 1;
    border-right: 1px solid #ccc;
}

/* MAIN MENU (Level 1) */
.side-bar-btns label[b-8hkvnx5kn3],
.sub-group-label[b-8hkvnx5kn3] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 12px 16px;
    color: white;
    font-weight: 600;
    cursor: pointer;
    transition: background-color 0.3s;
    fill: white;
    border-bottom: 1px solid #ccc;
    background-color: #3399ff;
}

.sub-group-label[b-8hkvnx5kn3] {
    border-left: 4px solid #ffffff;
}

.side-bar-btns label:hover[b-8hkvnx5kn3],
.sub-group-label:hover[b-8hkvnx5kn3] {
    background-color: #66b3ff;
    color: black;
    fill: black;
}


/* SUB MENU (Expanded area) */
.sub-menu[b-8hkvnx5kn3] {
    background: #e6f2ff;
    font-weight: 500;
    margin: 0;
    padding: 0;
    overflow: hidden;
    border-left: 3px solid #3399ff;
    animation: expand-b-8hkvnx5kn3 0.3s ease-out;
}


/* SUB MENU LINKS */
.sub-menu a[b-8hkvnx5kn3] {
    cursor: pointer;
    display: block;
    padding: 10px 26px;
    font-size: 14px;
    color: #333;
    text-decoration: none;
    border-bottom: 1px solid #d9ecff;
    transition: background 0.2s, color 0.2s;
}

.sub-menu a:hover[b-8hkvnx5kn3] {
    background: #cce6ff;
    color: #000;
}

/* ARROW ICONS */
.menu-label .arrow[b-8hkvnx5kn3],
.sub-group-label .arrow[b-8hkvnx5kn3] {
    transition: transform 0.3s ease;
}

.menu-label.open .arrow[b-8hkvnx5kn3],
.sub-group-label.open .arrow[b-8hkvnx5kn3] {
    transform: rotate(180deg);
}

/* EXPAND ANIMATION */
@keyframes expand-b-8hkvnx5kn3 {
    from {
        max-height: 0;
        opacity: 0;
    }
    to {
        max-height: 500px;
        opacity: 1;
    }
}
/* /Layout/HeaderClock.razor.rz.scp.css */
/* Sits in the top bar before the notification bell, which MainLayout2.razor.css pins at
   right: 132px with a width of 32px — so this clears it at 132 + 32 + a 12px gap = 176.
   (The bell in turn clears Logout, pinned at right: 20px with a width of 100px.)

   Type and icon deliberately match the user name / company name header (HeaderUser.razor.css):
   they share the same bar, and three different treatments in a 2.5rem strip reads as three
   unrelated things. */
.header-clock[b-4eov2kovt6] {
    position: absolute;
    right: 176px;
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 13px;
    font-weight: bold;
    color: #333;
    white-space: nowrap;
    /* The seconds tick once a second; a proportional font would nudge the whole row on every digit
       change. */
    font-variant-numeric: tabular-nums;
}

.header-clock-icon[b-4eov2kovt6] {
    fill: #808080;
    width: 18px;
    height: 18px;
    flex-shrink: 0;
}

.header-clock-date[b-4eov2kovt6] {
    color: #222;
}

/* Below 700px the bar wraps into two lines (MainLayout2.razor.css) and the clock owns the left half
   of line 2, so it stops positioning itself and becomes a flex item instead.

   order:3 is what puts it there: it is second in the DOM, so without it a full-width clock would
   break the line straight after the brand and push Logout down onto a third line.

   flex-basis:100% is what forces the wrap in the first place, and the padding-right is how the
   right half of the line is kept clear for the user/company name — that name is a position:fixed
   overlay, so nothing else reserves space for it. A max-width would not do: the flex algorithm
   breaks lines on the hypothetical main size, which a max-width clamps, and a 45%-wide clock would
   simply fit back onto line 1.

   The date, hidden while all of this shared one 2.5rem line, fits again now. */
@media (max-width: 700px) {
    .header-clock[b-4eov2kovt6] {
        position: static;
        right: auto;
        order: 3;
        flex: 1 1 100%;
        height: 2rem;
        margin-left: 0;
        padding-right: 55%;
        overflow: hidden;
        min-width: 0;
        font-size: 11px;
    }

    .header-clock-icon[b-4eov2kovt6] {
        width: 16px;
        height: 16px;
    }
}
/* /Layout/HeaderUser.razor.rz.scp.css */
/* Fixed into the same 2.5rem strip as MainLayout2's brand/Logout bar, starting where the sidebar
   ends so the two never overlap on the pages that have one. It stays at 13.5rem on the invoice
   pages too, which have no sidebar — one consistent place for it across the app.

   These rules were previously in SidebarLayout.razor.css under .sidebar-user-header*; they moved
   with the markup, and were renamed because the header is no longer the sidebar's. Names kept
   specific rather than generic (EditorWindow.css defines top-row-home-header* globally). */
.user-company-header[b-u5b74ephy2] {
    position: fixed;
    top: 0;
    left: 13.5rem; /* stays put when the sidebar collapses to icon-only — the user wants this anchored, not sliding with the sidebar width */
    height: 2.5rem;
    display: flex;
    align-items: center;
    justify-content: flex-start;
    gap: 6px 16px;
    padding: 0 20px;
    z-index: 1; /* above app.css .top-row's own z-index:0 */
}

.user-company-header-name[b-u5b74ephy2] {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 13px;
    font-weight: bold;
    color: #333;
}

.user-company-header-icon[b-u5b74ephy2] {
    fill: #808080;
    width: 18px;
    height: 18px;
    flex-shrink: 0;
}

.user-company-header-company[b-u5b74ephy2] {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 15px;
    font-weight: bold;
    color: #222;
}

.company-info-icon[b-u5b74ephy2] {
    cursor: pointer;
    fill: #808080;
    width: 20px;
    height: 20px;
    flex-shrink: 0;
}

/* Below 700px the bar is two lines tall (MainLayout2.razor.css) and this docks to the right of
   line 2, opposite the clock — it used to be hidden outright, because none of it fitted alongside
   brand + hamburger + clock + Logout on a single 2.5rem line.

   The 55% width is the other half of the deal struck in HeaderClock.razor.css, whose padding-right
   reserves exactly this much: two fixed boundaries rather than two boxes that have to agree at
   runtime, so a long company name can never end up printed over the time. */
@media (max-width: 700px) {
    .user-company-header[b-u5b74ephy2] {
        top: 2.5rem;
        left: auto;
        right: 0;
        width: 55%;
        height: 2rem;
        justify-content: flex-end;
        flex-wrap: nowrap;
        gap: 10px;
        padding: 0 10px 0 0;
        overflow: hidden;
    }

    /* The user name yields first: the company being worked in is the one that matters here, and
       there is only ever one signed-in user to forget. */
    .user-company-header-name[b-u5b74ephy2] {
        flex: 0 1 auto;
        min-width: 0;
        overflow: hidden;
        white-space: nowrap;
        font-size: 11px;
    }

    .user-company-header-company[b-u5b74ephy2] {
        flex: 0 1 auto;
        min-width: 0;
        overflow: hidden;
        white-space: nowrap;
        font-size: 12px;
    }

    .user-company-header-icon[b-u5b74ephy2] {
        width: 14px;
        height: 14px;
    }

    .company-info-icon[b-u5b74ephy2] {
        width: 16px;
        height: 16px;
    }
}
/* /Layout/MainLayout.razor.rz.scp.css */
.page[b-zmtskjpx6h] {
    min-height: 100dvh;
    min-width: 100dvw;
    display: flex;
    flex-direction: row;
    overflow-x: hidden;
}

main[b-zmtskjpx6h] {
    display: flex;
    flex-direction: column;
    flex: 1;
    background-color: #f9fcff;
}

article.content[b-zmtskjpx6h] {
    flex: 1;
    overflow-y: auto;
}
/* /Layout/MainLayout2.razor.rz.scp.css */
.page[b-v6sitc457u] {
    min-height: 100dvh;
    min-width: 100dvw;
    display: flex;
    flex-direction: row;
    overflow-x: hidden;
    background-color: #eef0f3;
}

main[b-v6sitc457u] {
    display: flex;
    flex-direction: column;
    flex: 1;
    min-width: 0; /* flex items default to min-width:auto, refusing to shrink below their content's intrinsic width — without this, wide nested content (e.g. the master table's width:max-content) pushes main/content1 wider than the viewport, which .page's overflow-x:hidden then silently clips instead of letting things reflow to fit */
}

article.content1[b-v6sitc457u] {
    flex: 1;
    min-width: 0;
    overflow-y: auto;
}

.logout-btn[b-v6sitc457u] {
    right: 20px;
    display: flex;
    flex-direction: row;
    align-items: center;
    position: absolute;
    height: 30px;
    width: 100px;
    gap: 8px;
    padding: 6px 8px;
    border: 1px solid #ccc;
    border-radius: 6px;
    background: #FF2400;
    font-size: 12px;
    font-weight: 700;
    cursor: pointer;
    color: white;
}

.logout-icon[b-v6sitc457u] {
    fill: white;
    height: 20px;
    width: 20px;
}

.app-brand[b-v6sitc457u] {
    position: absolute;
    left: 20px;
    display: flex;
    align-items: center;
    gap: 10px;
    font-weight: 700;
    font-size: 16px;
    color: #222;
    white-space: nowrap;
}

.app-brand b[b-v6sitc457u] {
    color: #3399ff;
}

/* Toggles the sidebar drawer on whichever page is active (SidebarLayout's
   Master-menu nav or Main.razor's company list nav) via MobileMenuService —
   always visible, not just on mobile, so there's one consistent control. */
.menu-toggle-btn[b-v6sitc457u] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 30px;
    height: 30px;
    border: 1px solid #e0e0e0;
    border-radius: 6px;
    background: #ffffff;
    cursor: pointer;
    fill: #6b7280;
    flex-shrink: 0;
}

.menu-toggle-btn:hover[b-v6sitc457u] {
    background: #f0f0f0;
}

/* The bar pins the brand to the left and Logout to the right, with the clock parked just inside
   Logout (HeaderClock.razor.css) and the user/company name fixed over the middle of the same strip
   (HeaderUser.razor.css, or Main.css's own .top-row-header on the company-list screen).

   All four fit across a desktop and none of it fits across a phone: the clock and the name used to
   be dropped or truncated to make room. Below 700px the bar is 4.5rem instead and wraps into two
   lines so everything stays readable:

       line 1 (2.5rem)   Easy Hishabbook  [menu]                        [Logout]
       line 2 (2rem)     31-07-2026 11:04:22 AM         user name / company name

   Line 1's height comes from .app-brand's explicit 2.5rem rather than from whichever child happens
   to be tallest, because the name on line 2 is a position:fixed overlay (it is rendered by the page,
   not by this bar) and has to be given a top offset that matches. align-content:flex-start keeps the
   two lines at their own heights instead of sharing out the spare 4.5rem between them, which would
   make that offset depend on content. */
@media (max-width: 700px) {
    .top-row[b-v6sitc457u] {
        flex-direction: row;
        align-items: center;
        justify-content: flex-start;
        flex-wrap: wrap;
        align-content: flex-start;
        height: 4.5rem;
        /* No row-gap: the two lines are 2.5rem + 2rem = exactly the 4.5rem above, and any gap here
           shifts line 2 down out of the band and away from the name overlay pinned at top:2.5rem. */
        gap: 0;
        /* !important only because the element also carries Bootstrap's px-4, whose 1.5rem sides are
           themselves !important and would leave the items ~48px short of fitting. */
        padding-left: 10px !important;
        padding-right: 10px !important;
    }

    .app-brand[b-v6sitc457u],
    .logout-btn[b-v6sitc457u] {
        position: static;
        left: auto;
        right: auto;
    }

    .app-brand[b-v6sitc457u] {
        font-size: 14px;
        gap: 8px;
        min-width: 0;
        height: 2.5rem; /* fixes line 1's height; see above */
    }

    /* The clock used to be what pushed Logout across (its own margin-left:auto). It moves to line 2
       here, so Logout has to take that job over or it ends up sitting against the hamburger. */
    .logout-btn[b-v6sitc457u] {
        flex-shrink: 0;
        width: auto;
        margin-left: auto;
    }
}

/* Notification bell, between the clock and Logout — see NotificationService for what it reads.
   First link in the right-hand offset chain after Logout: 20px + Logout's 100px + a 12px gap.

   The chain as a whole, right edge inwards:
       Logout        right: 20px   width 100px   (below)
       bell          right: 132px  width  32px   (here)
       clock         right: 176px  width 180px   (HeaderClock.razor.css)
       share         right: 368px  width  30px   (below)

   Deliberately in this file rather than in NotificationPopup.css with the popup it opens: the
   offsets above only work as a set, and splitting them across a scoped sheet and a global one is
   how they drift apart. The scope attribute applies because the button is MainLayout2's markup. */
.header-notify-btn[b-v6sitc457u] {
    position: absolute;
    right: 132px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 30px;
    padding: 0;
    border: 1px solid #ccc;
    border-radius: 6px;
    background: #fff;
    cursor: pointer;
}

.header-notify-btn:hover[b-v6sitc457u] {
    background: #f1f3f5;
}

.header-notify-icon[b-v6sitc457u] {
    width: 18px;
    height: 18px;
    /* Neutral by default, matching the share button beside it. The supplied SVGs carry
       fill="#e3e3e3", which is for a dark bar; this one is white. */
    fill: #6b7280;
}

/* Unread. The two Material glyphs differ only by a small dot, which is invisible at 18px, so the
   state is carried by colour as well as by the icon swap in the markup. */
.header-notify-btn.has-unread[b-v6sitc457u] {
    border-color: #f5c000;
    background: #fffbe9;
}

.header-notify-btn.has-unread .header-notify-icon[b-v6sitc457u] {
    fill: #d98c00;
}

/* The count, so the user can tell one notice from nine without opening the popup. Positioned
   against the button, which is why the mobile rule below keeps it position:relative rather than
   dropping to static — static would hand the badge to some ancestor instead. */
.header-notify-count[b-v6sitc457u] {
    position: absolute;
    top: -6px;
    right: -6px;
    min-width: 15px;
    height: 15px;
    padding: 0 4px;
    border-radius: 8px;
    background: #e53935;
    color: #fff;
    font-size: 9px;
    font-weight: bold;
    line-height: 15px;
    text-align: center;
    box-sizing: border-box;
    pointer-events: none;
}

/* Below 700px the bar wraps into two lines and the clock leaves for line 2, so the offsets above
   stop meaning anything and the bell becomes a flex item on line 1. relative, not static: the
   count badge above is positioned against it. */
@media (max-width: 700px) {
    .header-notify-btn[b-v6sitc457u] {
        position: relative;
        right: auto;
        flex-shrink: 0;
        margin-left: 8px;
    }
}

/* WhatsApp shortcut, parked immediately to the left of the clock.

   Same offset chain as the bell above — the clock's left edge sits at 176 + 180 = 356px, and
   356 + the same 12px gap puts this button at 368.

   The clock's 180px is the one measured quantity in that chain: it is what dd-MM-yyyy and
   hh:mm:ss tt plus an 18px icon and two 6px gaps come to in Inter at 13px bold tabular-nums. If
   two of these ever touch, that is the number to nudge, and it only moves if the clock's font or
   format changes. */
.header-wa-btn[b-v6sitc457u] {
    position: absolute;
    right: 368px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 30px;
    height: 30px;
    padding: 0;
    border: 1px solid #ccc;
    border-radius: 6px;
    background: #fff;
    cursor: pointer;
}

.header-wa-btn:hover[b-v6sitc457u] {
    background: #f1f3f5;
}

.header-wa-icon[b-v6sitc457u] {
    width: 18px;
    height: 18px;
    /* Neutral, matching the menu-toggle button beside it. WhatsApp's green belonged to a button
       that only did WhatsApp; this one opens the Share popup and picks a channel inside. */
    fill: #6b7280;
}

/* Below 700px the bar wraps into two lines and the clock leaves for line 2, so there is nothing
   left to sit before. The shortcut becomes a flex item on line 1 instead, next to Logout.

   margin-left:auto moves here from .logout-btn: with the auto on both, the free space would be
   split between them and this button would end up stranded mid-bar. This rule comes after that
   one in the file, so the 8px wins. */
@media (max-width: 700px) {
    .header-wa-btn[b-v6sitc457u] {
        position: static;
        right: auto;
        margin-left: auto;
        flex-shrink: 0;
    }

    .logout-btn[b-v6sitc457u] {
        margin-left: 8px;
    }
}
/* /Layout/SidebarLayout.razor.rz.scp.css */

article.content1[b-9101jzzo11] {
    flex: 1;
    overflow-y: auto;
    margin-left: 13.5rem;
    margin-top: 20px;
    transition: margin-left 0.25s ease;
}

article.content1.sidebar-collapsed[b-9101jzzo11] {
    margin-left: 4.5rem;
}

.side-bar[b-9101jzzo11] {
    background: #ffffff;
    border-right: 1px solid #ccc;
    width: 13.5rem;
    position: fixed;
    top: 2.5rem;
    bottom: 0;
    left: 0;
    display: flex;
    flex-direction: column;
    z-index: 2;
    transition: left 0.25s ease, width 0.2s ease;
}

.side-bar.collapsed[b-9101jzzo11] {
    width: 4.5rem;
}

/* Only this section scrolls, leaving the collapse button fixed at the bottom.
   Scrollbar is hidden but the element still scrolls via wheel/touch/keyboard. */
.side-bar-scroll[b-9101jzzo11] {
    flex: 1;
    min-height: 0;
    overflow-y: auto;
    overflow-x: hidden;
    scrollbar-width: none; /* Firefox */
    -ms-overflow-style: none; /* old Edge/IE */
}

.side-bar-scroll[b-9101jzzo11]::-webkit-scrollbar {
    display: none; /* Chrome, Edge, Safari */
}

.side-bar-btns[b-9101jzzo11] {
    padding: 12px 8px 0;
}

/* Main menu labels */
.side-bar-btns label[b-9101jzzo11] {
    display: flex;
    align-items: center;
    gap: 10px;
    margin: 2px 0;
    padding: 10px 12px;
    border-radius: 6px;
    color: #333;
    font-weight: 600;
    font-size: 13.5px;
    cursor: pointer;
    transition: background-color 0.15s ease, color 0.15s ease;
    fill: #808080;
    white-space: nowrap;
}

.side-bar-btns label:hover[b-9101jzzo11] {
    background-color: #e6f2ff;
    color: #3399ff;
    fill: #3399ff;
}

/* Currently expanded top-level item reads as the active one */
.side-bar-btns label.open[b-9101jzzo11] {
    background-color: #e6f2ff;
    color: #3399ff;
    fill: #3399ff;
}

.side-bar.collapsed .side-bar-btns label .nav-label[b-9101jzzo11],
.side-bar.collapsed .side-bar-btns label .arrow[b-9101jzzo11] {
    display: none;
}

.side-bar.collapsed .side-bar-btns label[b-9101jzzo11] {
    justify-content: center;
}

/* Submenu container (collapsed by default) */
.sub-menu[b-9101jzzo11] {
    font-weight: 500;
    margin: 0 0 4px;
    padding: 0;
    overflow: hidden;
    animation: expand-b-9101jzzo11 0.3s ease-out;
}

.side-bar.collapsed .sub-menu[b-9101jzzo11] {
    display: none;
}

/* Submenu links */
.sub-menu a[b-9101jzzo11] {
    cursor: pointer;
    display: block;
    padding: 8px 12px 8px 34px;
    border-radius: 6px;
    font-size: 13px;
    color: #555;
    text-decoration: none;
    transition: background 0.15s ease, color 0.15s ease;
}

.sub-menu a:hover[b-9101jzzo11] {
    background: #e6f2ff;
    color: #3399ff;
}

/* Nested group header inside a submenu (Entry > Sale Vouchers / Purc. Vouchers).
   Selectors carry .side-bar-btns so they outweigh the generic `.side-bar-btns label`
   block above, which would otherwise impose the top-level padding and weight. */
.side-bar-btns .sub-menu-label[b-9101jzzo11] {
    display: flex;
    align-items: center;
    gap: 6px;
    margin: 0;
    padding: 8px 12px 8px 34px;
    border-radius: 6px;
    font-size: 13px;
    font-weight: 500;
    color: #555;
    fill: #808080;
    cursor: pointer;
    white-space: nowrap;
    transition: background 0.15s ease, color 0.15s ease;
}

.side-bar-btns .sub-menu-label:hover[b-9101jzzo11],
.side-bar-btns .sub-menu-label.open[b-9101jzzo11] {
    background: #e6f2ff;
    color: #3399ff;
    fill: #3399ff;
}

/* Third level: same steps of indent again, so depth reads at a glance */
.sub-menu-2[b-9101jzzo11] {
    margin: 0;
    padding: 0;
    overflow: hidden;
    animation: expand-b-9101jzzo11 0.3s ease-out;
}

.sub-menu-2 a[b-9101jzzo11] {
    cursor: pointer;
    display: block;
    padding: 7px 12px 7px 52px;
    border-radius: 6px;
    font-size: 12.5px;
    color: #666;
    text-decoration: none;
    transition: background 0.15s ease, color 0.15s ease;
}

.sub-menu-2 a:hover[b-9101jzzo11] {
    background: #e6f2ff;
    color: #3399ff;
}

/* Arrow styling */
.menu-label .arrow[b-9101jzzo11],
.sub-menu-label .arrow[b-9101jzzo11] {
    margin-left: auto;
    flex-shrink: 0;
    transition: transform 0.3s ease;
}

/* When submenu is open → rotate arrow upward */
.menu-label.open .arrow[b-9101jzzo11],
.sub-menu-label.open .arrow[b-9101jzzo11] {
    transform: rotate(180deg);
}

/* Simple expand animation */
@keyframes expand-b-9101jzzo11 {
    from {
        max-height: 0;
        opacity: 0;
    }

    to {
        max-height: 500px;
        opacity: 1;
    }
}

.nav-icon[b-9101jzzo11] {
    width: 18px;
    height: 18px;
    flex-shrink: 0;
}

.side-bar-collapse-btn[b-9101jzzo11] {
    position: absolute;
    right: -14px;
    bottom: 24px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 28px;
    height: 28px;
    border: 1px solid #e0e0e0;
    border-radius: 50%;
    background: #ffffff;
    box-shadow: 0 1px 4px rgba(0, 0, 0, 0.15);
    cursor: pointer;
    fill: #808080;
    z-index: 1;
}

.side-bar-collapse-btn:hover[b-9101jzzo11] {
    background: #e6f2ff;
}

.side-bar.collapsed .side-bar-collapse-btn svg[b-9101jzzo11] {
    transform: rotate(180deg);
}

/* The username/company header that used to live here is now the HeaderUser component, so that the
   invoice pages — which sit on MainLayout2 without this layout — can show it too. Its styling,
   including hiding it below 700px, moved with it to HeaderUser.razor.css. */

/* ==========================================================================
   Mobile drawer
   Below 700px the sidebar slides off-canvas; the always-visible menu-toggle
   button in MainLayout2's top-row (wired via MobileMenuService) and the
   backdrop bring it back on top.
   ========================================================================== */
.sidebar-backdrop[b-9101jzzo11] {
    display: none;
}

@media (max-width: 700px) {
    article.content1[b-9101jzzo11],
    article.content1.sidebar-collapsed[b-9101jzzo11] {
        margin-left: 0;
    }

    .side-bar[b-9101jzzo11],
    .side-bar.collapsed[b-9101jzzo11] {
        left: -13.5rem;
        width: 13.5rem;
        top: 4.5rem; /* the top band is two lines tall here (MainLayout2.razor.css) */
    }

    .side-bar.open[b-9101jzzo11] {
        left: 0;
    }

    .sidebar-backdrop.open[b-9101jzzo11] {
        display: block;
        position: fixed;
        inset: 0;
        background: rgba(0, 0, 0, 0.35);
        z-index: 1;
    }
}
/* /Pages/Odometer.razor.rz.scp.css */
/* Odometer's own styling, scoped to the component.

   This was a <style> block inside Odometer.razor, which the renderer emits once per instance -- the
   dashboard puts four of these on one page, so that was four identical copies in the DOM. A
   .razor.css file is compiled into SimpleBilling.styles.css (already linked in index.html) and
   scoped by the b-* attribute, so it lands once whatever the instance count.

   font-size is the only measurement that matters here: odometer.js sizes its digit ribbons off the
   inherited font size, so the caller's FontSize parameter -- an inline style on this same element,
   which outranks the rule below -- scales the whole block. */
.price-wrapper[b-rloltcf4cr] {
    display: flex;
    align-items: center;
    font-size: 40px;
    font-weight: bold;
    line-height: 1.15;
}

.currency[b-rloltcf4cr] {
    margin-right: 4px;
}
/* /Pages/WhatsAppPopup.razor.rz.scp.css */
/* Sized to the QR rather than to the form: the code is the widest thing this popup ever shows,
   and letting the modal resize between "scan this" and "type a message" makes the two feel like
   different windows. */
.wa-popup[b-m15e24ljz4] {
    width: 340px;
    max-width: 90vw;

    /* The e-mail side carries two fields the WhatsApp side does not - an address and a subject -
       and that pushed the dialog past the bottom of a 768-tall laptop. Capped and scrolled rather
       than trimmed to fit: the popup grows and shrinks with the channel, the template and the
       attachment, so any height tuned to one of those combinations is wrong for the others.
       12rem covers Blazored's 1.75rem margins, the dialog's 1.5rem padding and its header. */
    max-height: calc(100vh - 12rem);
    overflow-y: auto;
    scrollbar-width: thin;
}

/* app.css already makes this sticky; it needs a background of its own once something scrolls
   underneath it, or the message shows through the buttons. */
.wa-popup .custom-modal-footer[b-m15e24ljz4] {
    background: #ffffff;
}

/* One line, ellipsised. A long "Name <address>" wrapped to two and cost the dialog 19px of the
   height it was already short of - and the part that wraps away is the least useful half. */
.wa-linked[b-m15e24ljz4] {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* A single centred block. Whatever goes in here must be ONE element: this is a flex row, so a bare
   sentence with a <b> in it comes apart into separate items and the punctuation strands itself. */
.wa-centre[b-m15e24ljz4] {
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 120px;
    text-align: center;
}

.wa-linked[b-m15e24ljz4] {
    background: #e8f7ee;
    border: 1px solid #b7e4c7;
    color: #1b7a44;
    border-radius: 6px;
    padding: 8px 10px;
    font-size: 13px;
    font-weight: 600;
    margin-bottom: 14px;
}

.wa-field[b-m15e24ljz4] {
    margin-bottom: 12px;
}

/* Flex, not block, so the Material glyph sits on the label's baseline band rather than pushing
   the text off it. The phone field's label carries no icon - its "+" and code box are the marker
   for that row. */
.wa-field label[b-m15e24ljz4] {
    display: flex;
    align-items: center;
    gap: 5px;
    font-size: 12px;
    font-weight: 600;
    color: #555;
    margin-bottom: 4px;
}

.wa-label-icon[b-m15e24ljz4] {
    width: 15px;
    height: 15px;
    fill: #777;
    flex-shrink: 0;
}

.wa-field input[type="tel"][b-m15e24ljz4],
.wa-field input[type="email"][b-m15e24ljz4],
.wa-field input[type="text"][b-m15e24ljz4],
.wa-field select[b-m15e24ljz4],
.wa-field textarea[b-m15e24ljz4] {
    width: 100%;
    border: 1px solid #ccc;
    border-radius: 6px;
    padding: 7px 9px;
    font: inherit;
    font-size: 14px;
}

.wa-field textarea[b-m15e24ljz4] {
    resize: vertical;
}

.wa-field input[type="tel"]:focus[b-m15e24ljz4],
.wa-field input[type="email"]:focus[b-m15e24ljz4],
.wa-field input[type="text"]:focus[b-m15e24ljz4],
.wa-field select:focus[b-m15e24ljz4],
.wa-field textarea:focus[b-m15e24ljz4] {
    outline: none;
    border-color: #3399ff;
}

/* Code box and number box share one border so the row reads as a single field. */
.wa-phone[b-m15e24ljz4] {
    display: flex;
    align-items: stretch;
    border: 1px solid #ccc;
    border-radius: 6px;
    overflow: hidden;
}

.wa-phone:focus-within[b-m15e24ljz4] {
    border-color: #3399ff;
}

/* The "+" is painted beside the code, never inside it: it is not a digit, and keeping it out of
   the value is what stops it from being submitted or retyped. */
.wa-cc-plus[b-m15e24ljz4] {
    display: flex;
    align-items: center;
    padding: 0 1px 0 9px;
    background: #f1f3f5;
    font-size: 14px;
    font-weight: 600;
    color: #555;
}

/* Fixed width rather than flexible, and the type selector is repeated so this outranks
   .wa-field input[type="tel"]'s width: 100%. A code growing from 2 digits to 3 must not shift
   the number box's caret sideways, so the box is sized for the longest code from the start:
   measured, not guessed - a 3-digit code needs 47px of content box before Chrome starts
   scrolling it, and 52px is that plus the padding and a little slack for another font. */
.wa-phone input[type="tel"].wa-cc-input[b-m15e24ljz4] {
    flex: 0 0 52px;
    width: 52px;
    background: #f1f3f5;
    border-right: 1px solid #ccc;
    padding: 7px 4px 7px 2px;
    font-weight: 600;
    color: #555;
}

.wa-phone input[type="tel"][b-m15e24ljz4] {
    border: none;
    border-radius: 0;
    flex: 1;
    min-width: 0;
}

.wa-phone input[type="tel"]:focus[b-m15e24ljz4] {
    border: none;
}

/* The format picker sits inside the Attachment field, above the rendered file, so the two read as
   one control: what is attached, and what it was drawn with. Slightly smaller than the message
   fields -- it is a qualifier on the row beneath it, not a field of its own. */
.wa-format[b-m15e24ljz4] {
    margin-bottom: 6px;
    font-size: 13px;
}

.wa-file[b-m15e24ljz4] {
    margin-top: 6px;
    font-size: 12px;
    color: #555;
    word-break: break-all;
}

.wa-scan-hint[b-m15e24ljz4] {
    font-size: 13px;
    color: #444;
    margin-bottom: 12px;
    line-height: 1.45;
}

/* White plate behind the code: a QR needs a light quiet zone to scan, and the modal's own
   background is not guaranteed to be one. */
.wa-qr[b-m15e24ljz4] {
    background: #fff;
    border: 1px solid #e3e3e3;
    border-radius: 8px;
    padding: 10px;
    text-align: center;
}

.wa-qr img[b-m15e24ljz4] {
    display: block;
    width: 100%;
    max-width: 280px;
    margin: 0 auto;
}

.wa-note[b-m15e24ljz4] {
    font-size: 12px;
    color: #777;
    margin-top: 10px;
    line-height: 1.45;
}

/* The shared footer is built for the full-page dialogs: 30px gaps and flex-basis: 300px on every
   button. Three of those in a 340px popup overflow it, and each button then settles on its own
   content width - Send widest, because it carries a glyph the other two do not. An explicit
   grid of equal columns plus one fixed height is what puts the three on a single line at one size -
   flex with an equal basis left them a couple of pixels apart. The button is still a flex box
   itself, which is what keeps Send's glyph and label on one baseline.

   Both rules are scoped to this component, so the .custom-modal-footer every other popup uses is
   untouched. */
.custom-modal-footer[b-m15e24ljz4] {
    display: grid;
    grid-auto-flow: column;
    grid-auto-columns: 1fr;
    gap: 8px;
    padding-top: 14px;
}

.custom-modal-footer .btn[b-m15e24ljz4] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    min-width: 0;
    height: 34px;
    padding: 0 6px;
    font-size: 13px;
    line-height: 1;
    white-space: nowrap;
}

/* currentColor rather than a fixed fill: the glyph then follows the button's own text colour,
   including whatever Bootstrap does to it while disabled. */
.wa-btn-icon[b-m15e24ljz4] {
    width: 16px;
    height: 16px;
    fill: currentColor;
    flex-shrink: 0;
}

/*======================================== Message preview ======================================*/

/* With a template picked there is nothing to type, so the message is shown as it will arrive
   rather than as an editable box -- the same bubble the template editor previews into, at the
   width this popup is fixed to. Capped and scrolled: a long template must not push Send off a
   laptop screen -- measured, at 150px the whole dialog comes to ~605px, which clears a 768-tall
   screen once the browser has taken its share. */
.wa-preview[b-m15e24ljz4] {
    max-height: 150px;
    overflow-y: auto;
    padding: 12px 10px;
    background: #ece5dd;
    border: 1px solid #dcd5cc;
    border-radius: 6px;
    scrollbar-width: thin;
    scrollbar-color: #b9b2a8 #ece5dd;
}

.wa-bubble[b-m15e24ljz4] {
    margin-left: auto;
    max-width: 90%;
    width: fit-content;
    padding: 7px 9px;
    background: #dcf8c6;
    border-radius: 8px 0 8px 8px;
    box-shadow: 0 1px 1px rgba(0, 0, 0, 0.12);
    font-size: 13px;
    line-height: 1.5;
    color: #111;
    /* The template's line breaks are the message's line breaks. */
    white-space: pre-wrap;
    overflow-wrap: anywhere;
}

.wa-bubble code[b-m15e24ljz4] {
    font-family: Consolas, "Courier New", monospace;
    font-size: 12px;
}

/*======================================== Attachment ===========================================*/

/* The rendered document, and the cross that takes it back off. */
.wa-file-auto[b-m15e24ljz4] {
    display: flex;
    align-items: center;
    gap: 8px;
    background: #e8f7ee;
    border: 1px solid #b7e4c7;
    border-radius: 6px;
    padding: 6px 8px;
    color: #1b7a44;
}

.wa-file-name[b-m15e24ljz4] {
    flex: 1 1 auto;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.wa-file-drop[b-m15e24ljz4] {
    flex: 0 0 auto;
    height: 20px;
    width: 20px;
    padding: 0;
    line-height: 1;
    font-size: 16px;
    border: none;
    border-radius: 50%;
    background: transparent;
    color: #1b7a44;
    cursor: pointer;
}

.wa-file-drop:hover[b-m15e24ljz4] {
    background: #cdebd9;
}

.wa-file-busy[b-m15e24ljz4] {
    color: #777;
    font-style: italic;
}

/*======================================== Channel tabs =========================================*/

/* WhatsApp or e-mail, on one document. Tabs rather than a dropdown: there are two, both are always
   available, and which one is active changes the whole form beneath - that is a choice worth
   showing rather than hiding behind a click. */
.wa-tabs[b-m15e24ljz4] {
    display: flex;
    gap: 4px;
    margin-bottom: 14px;
    padding: 3px;
    background: #eef0f3;
    border-radius: 8px;
}

.wa-tab[b-m15e24ljz4] {
    flex: 1 1 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    padding: 7px 8px;
    border: none;
    border-radius: 6px;
    background: transparent;
    color: #6b7280;
    font: inherit;
    font-size: 13px;
    font-weight: 600;
    cursor: pointer;
    transition: background-color 0.15s ease, color 0.15s ease;
}

.wa-tab:hover[b-m15e24ljz4] {
    color: #333;
}

/* The active tab is a raised card against the sunken strip, so the pair reads as one control with
   one of them chosen - not as two buttons where either might be pressed. */
.wa-tab.active[b-m15e24ljz4] {
    background: #ffffff;
    color: #111;
    box-shadow: 0 1px 2px rgba(16, 24, 40, 0.12);
}

.wa-tab-icon[b-m15e24ljz4] {
    height: 16px;
    width: 16px;
    fill: currentColor;
    flex-shrink: 0;
}

/*======================================== Plain preview ========================================*/

/* E-mail carries no *bold*, so its preview is not a chat bubble: it is the text as the recipient
   will read it, on the paper-white an e-mail client shows. */
/* Taller than it was, and tighter: this now holds a card with its own header and attachment rows
   rather than a bare paragraph, and 120px cut the body off after about two lines. The cap still
   exists — .wa-popup is capped at calc(100vh - 12rem), and a long template has to scroll somewhere
   rather than push the Send button off a laptop screen.

   overflow: hidden, not auto: the scrolling moved inside, to the body alone. Scrolling the whole
   card took the attachment row out of sight on any message longer than a few lines, which is
   exactly the message most likely to have a document on it. */
.wa-preview-plain[b-m15e24ljz4] {
    background: #f7f7f5;
    border-color: #e2e2dd;
    padding: 8px;
    max-height: 210px;
    overflow: hidden;
}

.wa-plain[b-m15e24ljz4] {
    font-size: 13px;
    line-height: 1.55;
    color: #111;
    /* The template's line breaks are the message's line breaks. */
    white-space: pre-wrap;
    overflow-wrap: anywhere;
}

/* The e-mail preview: the message inside the envelope it arrives in, the way .wa-bubble shows the
   WhatsApp one inside a chat. The card is white on the panel's grey so it reads as a message
   sitting in an inbox rather than as another field. */
/* A column so the two chrome rows can hold their ground and the body take what is left:
   From/To/Subject and the attachment stay in view however long the message runs. 194px is the
   210px cap less this element's 8px of padding on each side. */
.wa-mail[b-m15e24ljz4] {
    display: flex;
    flex-direction: column;
    max-height: 194px;
    background: #fff;
    border: 1px solid #e2e2dd;
    border-radius: 5px;
    overflow: hidden;
}

.wa-mail-head[b-m15e24ljz4] {
    flex: 0 0 auto;
    padding: 8px 10px;
    background: #fafafa;
    border-bottom: 1px solid #ededea;
}

/* Grid, not flex: the three values line up on one left edge however wide "Subject" renders, which
   is what makes the block scan as a header rather than as three unrelated sentences. */
.wa-mail-line[b-m15e24ljz4] {
    display: grid;
    grid-template-columns: 52px 1fr;
    gap: 6px;
    align-items: baseline;
    font-size: 12px;
    line-height: 1.5;
}

.wa-mail-key[b-m15e24ljz4] {
    color: #8a8a83;
    font-weight: 600;
}

/* One line, ellipsised — the same call .wa-linked makes above, for the same reason. A long
   "Name <address>" wrapped to three lines here and ate the body's room inside a card that cannot
   grow. Nothing is lost by it: the address is in the editable box directly above this, in full. */
.wa-mail-val[b-m15e24ljz4] {
    color: #111;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* The subject is the exception: it is the line the recipient reads first and the one most likely
   to matter past its fortieth character, so it wraps — to two lines, then ellipsises. */
.wa-mail-subject[b-m15e24ljz4] {
    font-weight: 600;
    white-space: normal;
    overflow-wrap: anywhere;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

/* Greyed and italic so a missing recipient or subject reads as absent rather than as the value. */
.wa-mail-empty[b-m15e24ljz4] {
    color: #a9a9a2;
    font-style: italic;
    font-weight: 400;
}

/* The only part that scrolls. min-height: 0 is what actually allows it to: a flex item's
   default min-height is auto, which refuses to shrink below its content and would push the
   attachment row back out of the card instead. */
.wa-mail-body[b-m15e24ljz4] {
    flex: 1 1 auto;
    min-height: 0;
    overflow-y: auto;
    padding: 10px;
    scrollbar-width: thin;
}

.wa-mail-attach[b-m15e24ljz4] {
    flex: 0 0 auto;
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 7px 10px;
    border-top: 1px solid #ededea;
    background: #fafafa;
    font-size: 12px;
    color: #444;
}

.wa-mail-clip[b-m15e24ljz4] {
    flex: 0 0 auto;
    width: 14px;
    height: 14px;
    fill: #8a8a83;
}