/**
 * CLIENT AREA SLICK - Dashboard & Sidebar Enhancements
 * =====================================================
 *
 * Provides styling for:
 * - Service card grid layout on dashboard
 * - Service card components with prominent labels
 * - Sidebar hybrid navigation with expandable categories
 *
 * SCOPE: body.template_togglebox
 * REQUIRES: theme-variables.css, slick-defaults.css
 */

.template_togglebox img[data-theme-logo] {
    background-color: transparent;
}

/* ===========================================
   SERVICE CARD GRID
   =========================================== */

.template_togglebox .slick-services-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
    gap: 20px;
    padding: 20px 0;
}

/* Responsive adjustments */
@media (max-width: 767px) {
    .template_togglebox .slick-services-grid {
        grid-template-columns: 1fr;
        gap: 16px;
        padding: 16px 0;
    }
}

@media (min-width: 768px) and (max-width: 1199px) {
    .template_togglebox .slick-services-grid {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (min-width: 1200px) {
    .template_togglebox .slick-services-grid {
        grid-template-columns: repeat(3, 1fr);
    }
}

/* ===========================================
   SERVICE CARD COMPONENT
   =========================================== */

.template_togglebox .slick-service-card {
    background: var(--surface-card, #fff);
    border: 1px solid var(--color-border-subtle);
    border-radius: 12px;
    box-shadow: var(--shadow-sm);
    overflow: hidden;
    transition: transform 0.2s ease, box-shadow 0.2s ease, border-color 0.2s ease;
    display: flex;
    flex-direction: column;
}

.template_togglebox .slick-service-card:hover {
    transform: translateY(-4px);
    box-shadow: var(--shadow-md);
    border-color: var(--brand-primary);
}

/* Card Header */
.template_togglebox .slick-service-card__header {
    padding: 12px 16px;
    background: linear-gradient(180deg, var(--color-surface-subtle) 0%, var(--color-surface-3) 100%);
    border-bottom: 1px solid var(--color-border-subtle);
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px;
}

/* Label Badge - Prominent display */
.template_togglebox .slick-service-card__label-badge {
    display: inline-flex;
    align-items: center;
    padding: 4px 10px;
    background: var(--brand-primary-gradient);
    color: var(--text-inverse, #fff);
    font-size: var(--font-size-sm, 12px);
    font-weight: var(--font-weight-700, 700);
    text-transform: uppercase;
    letter-spacing: var(--letter-spacing-050px, 0.5px);
    border-radius: var(--radius-pill);
    box-shadow: var(--shadow-brand-sm, 0 2px 4px rgba(41, 167, 230, 0.2));
}

/* Category Tag */
.template_togglebox .slick-service-card__category {
    color: var(--color-fg-muted);
    font-size: var(--font-size-sm, 12px);
    font-weight: var(--font-weight-500, 500);
    text-transform: uppercase;
    letter-spacing: var(--letter-spacing-030, 0.03em);
}

/* Status Badge - Position to right */
.template_togglebox .slick-service-card__header .badge {
    margin-left: auto;
}

/* Card Body */
.template_togglebox .slick-service-card__body {
    padding: 16px;
    flex: 1;
}

.template_togglebox .slick-service-card__name {
    margin: 0 0 8px;
    font-size: 16px;
    font-weight: var(--font-weight-600, 600);
    color: var(--color-fg-strong);
    line-height: var(--line-height-130, 1.3);
}

.template_togglebox .slick-service-card__domain {
    margin: 0;
    font-size: 13px;
    color: var(--color-fg-muted);
    word-break: break-all;
}

/* Card Footer */
.template_togglebox .slick-service-card__footer {
    padding: 12px 16px;
    background: var(--color-surface-subtle);
    border-top: 1px solid var(--color-border-subtle);
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 12px;
}

.template_togglebox .slick-service-card__meta {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 12px;
    font-size: 12px;
    color: var(--color-fg-muted);
}

.template_togglebox .slick-service-card__price {
    font-weight: var(--font-weight-700, 700);
    color: var(--color-fg-strong);
    font-size: 14px;
}

.template_togglebox .slick-service-card__cycle {
    padding: 2px 8px;
    background: var(--color-surface-2);
    border-radius: 4px;
    font-size: var(--font-size-sm, 12px);
    text-transform: capitalize;
}

.template_togglebox .slick-service-card__expiry {
    display: flex;
    align-items: center;
    gap: 4px;
}

.template_togglebox .slick-service-card__expiry::before {
    content: '';
    width: 4px;
    height: 4px;
    background: var(--color-fg-muted);
    border-radius: 50%;
}

/* Manage Button - Use Bootstrap styling from slick-defaults */
.template_togglebox .slick-service-card .btn-primary {
    padding: 8px 16px;
    font-size: 13px;
    white-space: nowrap;
}

/* Mobile stacked footer */
@media (max-width: 479px) {
    .template_togglebox .slick-service-card__footer {
        flex-direction: column;
        align-items: stretch;
    }

    .template_togglebox .slick-service-card__meta {
        justify-content: center;
    }

    .template_togglebox .slick-service-card .btn-primary {
        width: 100%;
        text-align: center;
    }
}

/* Hidden state for tab filtering */
.template_togglebox .slick-service-card.hidden {
    display: none !important;
}

/* Stack the Services trigger and submenu in-flow so they join cleanly
   without offset hacks that interfere with injected service-context UI. */
.template_togglebox .sidebar .sidebar-services-nav-item {
    display: flex;
    flex-direction: column;
}

/* Bootstrap keeps .nav.flex-column as a wrapping flex container.
   In the fixed-width sidebar that can push injected nav content wider
   than the rail and make the right edge look clipped. */
.template_togglebox .sidebar .nav.flex-column,
.template_togglebox .sidebar .nav.nav-subnav.flex-column {
    flex-wrap: nowrap;
}

/* The sidebar is a dark surface in both themes, so its focus outlines take the
   sidebar focus colour (at least 3:1 on the surface, hover and active fills).
   Sidebar outlines are drawn inset (outline-offset: -2px) so the overflow:hidden
   sidebar wrappers cannot clip them.
   Off-canvas stacking comes from the shared z-scale: the module VM drawer uses
   the same tokens, so the sidebar (drawer or open rail) and the VM drawer sit
   on one tier. */
.template_togglebox .sidebar {
    --focus-outline: var(--sidebar-focus);
    z-index: var(--z-offcanvas, 1000);
}

.template_togglebox .sidebar-overlay {
    z-index: var(--z-offcanvas-backdrop, 850);
}

/* Sidebar tiers (TbSidebar in js/sidebar.js; the inline script after <body>
   in header.shared.tpl sets the first state before paint).
   - Below 768px (--bp-sidebar-drawer-max) the sidebar is an off-canvas
     drawer: body.sidebar-drawer-open opens it. A sidebar that is off-screen
     is visibility:hidden as well as inert, so its links leave the tab order:
     the drawer turns visible at once when it opens (focus moves in on the
     next frame) and hides only after the slide out. The drawer keeps clear of
     the fixed chat widget at the bottom of the viewport.
   - body.sidebar-rail collapses it to an icon rail: always from 768px to
     993px, and from 994px unless the user pinned it (the default from 1400px,
     --bp-wide-min). body.sidebar-rail-open expands the rail over the content
     (hover, keyboard focus or the hamburger) without moving the page;
     body.sidebar-rail-scrim adds the backdrop when a tap or the tablet
     hamburger opened it.
   The classes are exclusive per tier, so crossing a breakpoint cannot leave
   a state behind. The OpenNebula VM drawer keeps its own 993px boundary
   (--bp-offcanvas-max) on the same z-scale. */
@media not all and (min-width: 768px) {
    .template_togglebox .sidebar {
        visibility: hidden;
        transition: margin 0.3s ease, visibility 0s linear 0.3s;
    }

    .template_togglebox .sidebar-overlay {
        visibility: hidden;
    }

    .template_togglebox.sidebar-drawer-open .sidebar {
        margin-left: 0;
        visibility: visible;
        transition: margin 0.3s ease, visibility 0s;
    }

    .template_togglebox.sidebar-drawer-open.rtl .sidebar,
    [dir="rtl"] .template_togglebox.sidebar-drawer-open .sidebar {
        margin-right: 0;
    }

    .template_togglebox.sidebar-drawer-open .sidebar-overlay {
        visibility: visible;
    }

    .template_togglebox .sidebar .sidebar-wrap {
        padding-bottom: var(--chat-widget-clearance);
    }
}

@media (prefers-reduced-motion: reduce) {
    @media not all and (min-width: 768px) {
        .template_togglebox .sidebar,
        .template_togglebox.sidebar-drawer-open .sidebar {
            transition: none;
        }
    }
}

/* Icon rail. The compiled sidebar keeps its full width (the HostBill admin
   setting) and layout inside; the rail only narrows the clipping box, so
   every icon stays exactly where it sits in the full column and nothing
   shifts as the rail opens. The compiled width is !important, hence the
   !important here. */
.template_togglebox.sidebar-rail .sidebar {
    margin-left: 0;
    margin-right: 0;
    visibility: visible;
    transition: width var(--motion-base) var(--ease-out), box-shadow var(--motion-base) var(--ease-out);
}

.template_togglebox.sidebar-rail:not(.sidebar-rail-open) .sidebar {
    width: var(--sidebar-rail-width) !important;
}

.template_togglebox.sidebar-rail-open .sidebar {
    box-shadow: var(--shadow-lg);
}

/* The page sits beside the rail, never under it, and does not move when the
   rail opens. */
.template_togglebox.sidebar-rail :is(.body-content, .footer-content, .navbar.sub-bar) {
    margin-left: var(--sidebar-rail-width);
}

.template_togglebox.sidebar-rail.rtl :is(.body-content, .footer-content, .navbar.sub-bar),
[dir="rtl"] .template_togglebox.sidebar-rail :is(.body-content, .footer-content, .navbar.sub-bar) {
    margin-right: var(--sidebar-rail-width);
    margin-left: 0;
}

/* The phone-style sub-bar (below 992px) is a full-width .navbar. */
.template_togglebox.sidebar-rail .navbar.sub-bar {
    width: auto;
}

/* Collapsed rows: a 42px icon tile on the same 15px inset as the full rows.
   Labels, badges and chevrons stay in the DOM (they are the accessible
   names) and fade in once the rail has mostly opened. */
.template_togglebox.sidebar-rail:not(.sidebar-rail-open) .sidebar .nav .nav-item > .nav-link,
.template_togglebox.sidebar-rail:not(.sidebar-rail-open) .sidebar .nav .nav-link.nav-link-add {
    width: 42px;
    margin: 5px 15px;
    padding: 8px;
    border-radius: var(--radius-md);
    overflow: hidden;
    white-space: nowrap;
}

.template_togglebox.sidebar-rail .sidebar .nav-link > :not(:first-child),
.template_togglebox.sidebar-rail .sidebar .sidebar-heading > span {
    transition: opacity var(--motion-fast) linear 60ms;
}

.template_togglebox.sidebar-rail:not(.sidebar-rail-open) .sidebar .nav-link > :not(:first-child),
.template_togglebox.sidebar-rail:not(.sidebar-rail-open) .sidebar .sidebar-heading > span {
    opacity: 0;
    transition-delay: 0s;
}

/* Section headings keep their height, so rows never move vertically, and
   show as a hairline over the tile column. */
.template_togglebox.sidebar-rail:not(.sidebar-rail-open) .sidebar .sidebar-heading {
    background: linear-gradient(var(--sidebar-divider), var(--sidebar-divider)) 16px 50% / 40px 1px no-repeat;
}

.template_togglebox.sidebar-rail.rtl:not(.sidebar-rail-open) .sidebar .sidebar-heading,
[dir="rtl"] .template_togglebox.sidebar-rail:not(.sidebar-rail-open) .sidebar .sidebar-heading {
    background-position: right 16px center;
}

.template_togglebox.sidebar-rail:not(.sidebar-rail-open) .sidebar .sidebar-heading:first-of-type {
    background: none;
}

/* Nested lists (the services tree, module branches) belong to the open
   rail only. */
.template_togglebox.sidebar-rail:not(.sidebar-rail-open) .sidebar .sub-nav,
.template_togglebox.sidebar-rail:not(.sidebar-rail-open) .sidebar .nav-subnav {
    display: none;
}

/* Scrim, shown only when the hamburger opened the rail; tapping it closes. */
.template_togglebox.sidebar-rail .sidebar-overlay {
    position: fixed;
    inset: 0;
    width: auto;
    margin: 0;
    background: var(--color-scrim);
    opacity: 0;
    visibility: hidden;
    transition: opacity var(--motion-base) var(--ease-out), visibility 0s linear var(--motion-base);
}

.template_togglebox.sidebar-rail.sidebar-rail-scrim .sidebar-overlay {
    opacity: 1;
    visibility: visible;
    transition: opacity var(--motion-base) var(--ease-out), visibility 0s;
}

/* Above 993px the navbar's left panel is the rail's cap. It keeps the full
   sidebar layout (logo, then the hamburger at the far end) at the full width
   (--sidebar-full-width, set by js/sidebar.js from the compiled sidebar), and
   overlays the navbar so it never moves the search and account controls.
   Collapsed, a clip-path cuts it to the rail width and a second one cuts the
   logo to its mark (the first 16% of the default logo, 28px as rendered),
   which is inset to centre over the icon column. Opening the rail removes
   both clips, which reveals the wordmark and the hamburger in place. The
   clipped hamburger stays focusable, and focusing it opens the rail. Touch
   screens (no hover to open the cap) and RTL pages (where the logo's mark
   falls outside the visible strip) show the hamburger in the collapsed cap
   instead of the mark. Below 994px the phone-style top bar stays full
   width. */
@media (min-width: 994px) {
    /* Pinned or collapsed, the mark sits over the icon column, so pinning and
       unpinning never move the logo. The panel also covers the navbar's 1px
       bottom border, which otherwise draws a light line between the navy panel
       and the navy sidebar below it. */
    .template_togglebox .navbar .navbar-left {
        height: calc(100% + 1px);
        padding-left: calc((var(--sidebar-rail-width) - 28px) / 2);
    }

    .template_togglebox.rtl .navbar .navbar-left,
    [dir="rtl"] .template_togglebox .navbar .navbar-left {
        padding-right: calc((var(--sidebar-rail-width) - 28px) / 2);
        padding-left: 0.75rem;
    }

    .template_togglebox.sidebar-rail .navbar .navbar-left {
        position: absolute;
        top: 0;
        bottom: 0;
        left: 0;
        z-index: 1001; /* the compiled .navbar-body is z-index 1000 too */
        width: var(--sidebar-full-width, 250px);
        clip-path: inset(0 calc(100% - var(--sidebar-rail-width)) 0 0);
        transition: clip-path var(--motion-base) var(--ease-out);
    }

    .template_togglebox.sidebar-rail.rtl .navbar .navbar-left,
    [dir="rtl"] .template_togglebox.sidebar-rail .navbar .navbar-left {
        right: 0;
        left: auto;
        clip-path: inset(0 0 0 calc(100% - var(--sidebar-rail-width)));
    }

    .template_togglebox.sidebar-rail-open .navbar .navbar-left,
    .template_togglebox.sidebar-rail-open.rtl .navbar .navbar-left,
    [dir="rtl"] .template_togglebox.sidebar-rail-open .navbar .navbar-left {
        clip-path: inset(0);
    }

    .template_togglebox.sidebar-rail .navbar .navbar-left .navbar-brand {
        flex-shrink: 0;
        margin-right: 0;
    }

    .template_togglebox.sidebar-rail .navbar .navbar-left .navbar-brand img {
        clip-path: inset(0 84% 0 0);
        transition: clip-path var(--motion-base) var(--ease-out);
    }

    .template_togglebox.sidebar-rail-open .navbar .navbar-left .navbar-brand img {
        clip-path: inset(0);
    }

    .template_togglebox.sidebar-rail .navbar .navbar-left .btn-toggler {
        opacity: 0;
        transition: opacity var(--motion-fast) linear;
    }

    .template_togglebox.sidebar-rail-open .navbar .navbar-left .btn-toggler {
        opacity: 1;
        transition-delay: 60ms;
    }

    .template_togglebox.sidebar-rail.rtl:not(.sidebar-rail-open) .navbar .navbar-left > .d-flex,
    [dir="rtl"] .template_togglebox.sidebar-rail:not(.sidebar-rail-open) .navbar .navbar-left > .d-flex {
        position: absolute;
        top: 0;
        right: 0;
        bottom: 0;
        width: var(--sidebar-rail-width);
        justify-content: center;
    }

    .template_togglebox.sidebar-rail.rtl:not(.sidebar-rail-open) .navbar .navbar-left .btn-toggler,
    [dir="rtl"] .template_togglebox.sidebar-rail:not(.sidebar-rail-open) .navbar .navbar-left .btn-toggler {
        opacity: 1;
    }

    .template_togglebox.sidebar-rail.rtl:not(.sidebar-rail-open) .navbar .navbar-left .navbar-brand,
    [dir="rtl"] .template_togglebox.sidebar-rail:not(.sidebar-rail-open) .navbar .navbar-left .navbar-brand {
        visibility: hidden;
    }

    .template_togglebox.sidebar-rail .navbar .navbar-body {
        margin-left: var(--sidebar-rail-width);
    }

    .template_togglebox.sidebar-rail.rtl .navbar .navbar-body,
    [dir="rtl"] .template_togglebox.sidebar-rail .navbar .navbar-body {
        margin-right: var(--sidebar-rail-width);
        margin-left: 0;
    }

    .template_togglebox.sidebar-rail .navbar .dropdown-order-items {
        left: var(--sidebar-rail-width);
    }

    .template_togglebox.sidebar-rail.rtl .navbar .dropdown-order-items,
    [dir="rtl"] .template_togglebox.sidebar-rail .navbar .dropdown-order-items {
        right: var(--sidebar-rail-width) !important;
        left: 0;
    }
}

@media (min-width: 994px) and (hover: none) {
    .template_togglebox.sidebar-rail:not(.sidebar-rail-open) .navbar .navbar-left > .d-flex {
        position: absolute;
        top: 0;
        bottom: 0;
        left: 0;
        width: var(--sidebar-rail-width);
        justify-content: center;
    }

    .template_togglebox.sidebar-rail:not(.sidebar-rail-open) .navbar .navbar-left .btn-toggler {
        opacity: 1;
    }

    .template_togglebox.sidebar-rail:not(.sidebar-rail-open) .navbar .navbar-left .navbar-brand {
        visibility: hidden;
    }
}

@media (prefers-reduced-motion: reduce) {
    .template_togglebox.sidebar-rail .sidebar,
    .template_togglebox.sidebar-rail .sidebar .nav-link > :not(:first-child),
    .template_togglebox.sidebar-rail .sidebar .sidebar-heading > span,
    .template_togglebox.sidebar-rail .sidebar-overlay,
    .template_togglebox.sidebar-rail .navbar .navbar-left,
    .template_togglebox.sidebar-rail .navbar .navbar-left .btn-toggler,
    .template_togglebox.sidebar-rail .navbar .navbar-left .navbar-brand img {
        transition: none;
    }
}

/* Base sidebar states. custom*.min.css (compiled from src/scss in the HostBill
   admin) paints the active row #fff on #29A7E6/#3FB7F2 (2.3-2.7:1) and darkens
   the label on hover. These overrides put the base rows on the same sidebar
   tokens as the module branch below: one hover treatment (lighter fill,
   brighter label) and the --brand-primary-deep active fill in both themes.
   The active rule needs !important to beat slick-defaults.css's generic
   `.template_togglebox .nav .nav-link.active` accent-700 fill, which is
   !important for the page tabs and pills.
   At rest the top-level rows (Dashboard, Services, ...) take --sidebar-fg
   instead of the compiled #94A3B8, and keyboard focus uses the module rows'
   ring. :where() keeps the resting rule at the compiled rule's specificity,
   so the hover and active rules below still win; nested .nav-subnav rows
   (services list, module tree) keep their own rules. */
.template_togglebox .sidebar :where(.nav:not(.nav-subnav)) > .nav-item > .nav-link,
.template_togglebox .sidebar :where(.nav:not(.nav-subnav)) > .nav-item > .nav-link > .material-icons {
    color: var(--sidebar-fg);
}

/* One size for every sidebar row. The compiled SCSS sets $menu-item-size
   (0.83rem, 13.28px) on the base rows while the module tree rows beside them
   use the 14px data role. */
.template_togglebox .sidebar .nav-item > .nav-link,
.template_togglebox .sidebar .nav-link.nav-link-add {
    font-size: var(--font-size-md, 14px);
}

/* Legacy services sub-list: the expanded Services toggle and the rows of the
   nested .nav-subnav lists (#menu-services categories such as Hourly Cloud).
   The compiled SCSS paints them #8898B0 on #17202d / #000104; these put them
   on the sidebar tokens. The toggle rule matches the compiled 0,5,0 selector
   and the row rule outranks it, while the hover and active rules below still
   win. */
.template_togglebox .sidebar .nav-item .nav-subnav {
    background-color: var(--sidebar-surface-sunken);
}

.template_togglebox .sidebar .nav-item > .nav-link.nav-link-dropdown:where(:not(.collapsed)),
.template_togglebox .sidebar .nav-item .nav-subnav .nav-item > .nav-link {
    background-color: var(--sidebar-surface-sunken);
    color: var(--sidebar-fg-muted);
}

.template_togglebox .sidebar .nav-item > .nav-link.nav-link-dropdown:where(:not(.collapsed)) > .material-icons {
    color: var(--sidebar-fg-muted);
}

.template_togglebox .sidebar .nav-item > .nav-link:focus-visible {
    outline: 2px solid var(--focus-outline);
    outline-offset: -2px;
}

.template_togglebox .sidebar .nav-item > .nav-link:hover:not(.active),
.template_togglebox .sidebar .nav-item .nav-subnav .nav-item > .nav-link:hover:not(.active, .disabled) {
    background-color: var(--sidebar-hover-bg);
    color: var(--sidebar-fg-strong);
}

.template_togglebox .sidebar .nav-link.nav-link-add:hover:not(.active, .disabled) {
    background-color: var(--sidebar-hover-bg) !important;
    color: var(--sidebar-fg-strong);
}

.template_togglebox .sidebar .nav-item > .nav-link:hover:not(.active) > .material-icons,
.template_togglebox .sidebar .nav-link.nav-link-add:hover:not(.active, .disabled) .material-icons {
    color: var(--sidebar-fg-strong);
}

.template_togglebox .sidebar .nav-item > .nav-link.active,
.template_togglebox .sidebar .nav-item .nav-subnav .nav-item > .nav-link.active {
    background-color: var(--sidebar-active-bg) !important;
    border-color: var(--sidebar-active-bg) !important;
    color: var(--sidebar-active-fg) !important;
}

.template_togglebox .sidebar .nav-item > .nav-link.active .material-icons,
.template_togglebox .sidebar .nav-item .nav-subnav .nav-item > .nav-link.active .material-icons {
    color: var(--sidebar-active-fg);
}

/* Sidebar scrollbar (perfect-scrollbar on .sidebar-wrap). The compiled thumb
   is lighten(menu-bg) and turns royal blue in dark mode. */
.template_togglebox .sidebar .ps__rail-y,
.template_togglebox .sidebar .ps__rail-x {
    background-color: var(--sidebar-scrollbar-rail);
}

.template_togglebox .sidebar .ps__thumb-y,
.template_togglebox .sidebar .ps__thumb-x {
    background-color: var(--sidebar-scrollbar-thumb);
}

.template_togglebox .sidebar .ps__rail-y:hover > .ps__thumb-y,
.template_togglebox .sidebar .ps__rail-x:hover > .ps__thumb-x,
.template_togglebox .sidebar .ps__rail-y.ps--clicking .ps__thumb-y,
.template_togglebox .sidebar .ps__rail-x.ps--clicking .ps__thumb-x {
    background-color: var(--sidebar-scrollbar-thumb-hover);
}

/* ===========================================
   SIDEBAR HYBRID NAVIGATION
   =========================================== */

/* The sidebar Services and category toggles (menu.left.*.tpl) and the navbar
   account menu (menu.top.logged.tpl) are <button>s. These zero-specificity
   resets only clear the user-agent button chrome, so the .nav-link rules from
   the compiled SCSS and above still style them. */
:where(.template_togglebox .sidebar button:is(.nav-link-dropdown, .nav-link-category)),
:where(.template_togglebox .navbar button.nav-link) {
    appearance: none;
    border: 0;
    background-color: transparent;
    color: inherit;
    font: inherit;
    text-align: start;
    cursor: pointer;
}

/* The widths keep their specificity so a page stylesheet that sizes every
   button, such as the OpenNebula module's phone-width `.btn, button
   { width: 100% }`, cannot push a closed toggle past the sidebar edge. */
.template_togglebox .sidebar button:is(.nav-link-dropdown, .nav-link-category) {
    width: 100%;
}

/* Closed top-level toggles keep the compiled `margin: 5px 15px`. */
.template_togglebox .sidebar .nav-pills > .nav-item > button.nav-link-dropdown.collapsed {
    width: calc(100% - 30px);
}

/* Category header styling */
.template_togglebox .slick-sidebar-category {
    border-bottom: 1px solid var(--sidebar-divider);
}

.template_togglebox .slick-sidebar-category:last-of-type {
    border-bottom: none;
}

.template_togglebox .nav-link-category {
    display: flex;
    align-items: center;
    padding: 10px 12px;
    cursor: pointer;
    transition: background 0.15s ease;
}

.template_togglebox .nav-link-category:hover {
    background: var(--sidebar-hover-bg);
}

.template_togglebox .nav-link-category .badge {
    font-size: var(--font-size-sm, 12px);
    padding: 2px 6px;
}

.template_togglebox .nav-link-category .icon-expand {
    margin-left: auto;
    transition: transform 0.2s ease;
}

.template_togglebox .nav-link-category[aria-expanded="true"] .icon-expand,
.template_togglebox .nav-link-category:not(.collapsed) .icon-expand {
    transform: rotate(180deg);
}

/* Category services list */
.template_togglebox .slick-category-services {
    background: var(--sidebar-surface-sunken);
    margin-left: 16px;
    padding-left: 8px;
}

/* Individual service item in sidebar */
.template_togglebox .slick-sidebar-service {
    border-bottom: 1px solid var(--sidebar-divider);
}

.template_togglebox .slick-sidebar-service:last-child {
    border-bottom: none;
}

.template_togglebox .slick-sidebar-service .nav-link {
    display: flex;
    align-items: flex-start;
    padding: 8px 12px;
    gap: 10px;
    transition: background 0.15s ease;
}

.template_togglebox .slick-sidebar-service .nav-link:hover {
    background: var(--sidebar-hover-bg);
    color: var(--sidebar-fg-strong);
}

/* Status indicator icon: each status has its own glyph (sidebar-services.js
   getServiceStatusIcon) so the state does not rest on colour alone. The
   selectors outrank the compiled `.sidebar .nav-item > .nav-link >
   .material-icons` size and colour and the row hover colour above. */
.template_togglebox .sidebar .slick-sidebar-service > .nav-link > .slick-sidebar-service__indicator {
    flex-shrink: 0;
    margin-top: 1px;
    font-size: 14px;
    line-height: 1;
    color: var(--color-fg-muted);
}

.template_togglebox .sidebar .slick-sidebar-service > .nav-link > .slick-sidebar-service__indicator--Active {
    color: var(--brand-success);
}

.template_togglebox .sidebar .slick-sidebar-service > .nav-link > .slick-sidebar-service__indicator--Pending {
    color: var(--brand-warning);
}

.template_togglebox .sidebar .slick-sidebar-service > .nav-link > .slick-sidebar-service__indicator--Suspended {
    color: var(--brand-primary);
}

.template_togglebox .sidebar .slick-sidebar-service > .nav-link > .slick-sidebar-service__indicator--Cancelled,
.template_togglebox .sidebar .slick-sidebar-service > .nav-link > .slick-sidebar-service__indicator--Terminated {
    color: var(--brand-danger);
}

/* Service info container */
.template_togglebox .slick-sidebar-service__info {
    display: flex;
    flex-direction: column;
    gap: 2px;
    min-width: 0;
    flex: 1;
}

/* Service label in sidebar */
.template_togglebox .slick-sidebar-service__label {
    font-size: var(--font-size-sm, 12px);
    font-weight: var(--font-weight-600, 600);
    line-height: var(--line-height-125, 1.25);
    text-transform: uppercase;
    letter-spacing: var(--letter-spacing-030, 0.03em);
    color: var(--badge-label-fg, var(--brand-primary));
    background: var(--badge-label-bg, rgba(41, 167, 230, 0.1));
    padding: 1px 6px;
    border-radius: var(--radius-sm);
    display: inline-block;
    width: fit-content;
}

/* Service name in sidebar */
.template_togglebox .slick-sidebar-service__name {
    font-size: 13px;
    font-weight: var(--font-weight-500, 500);
    color: var(--sidebar-fg);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* View All link */
.template_togglebox .slick-sidebar-viewall {
    border-top: 1px solid var(--sidebar-divider);
    margin-top: 8px;
    padding-top: 8px;
}

.template_togglebox .slick-sidebar-viewall .nav-link {
    color: var(--sidebar-focus); /* 6.0:1 on the sidebar hover; brand blue 3.8:1 */
    font-weight: var(--font-weight-500, 500);
    font-size: 13px;
}

.template_togglebox .slick-sidebar-viewall .nav-link:hover {
    background: var(--sidebar-hover-bg);
}

/* Loading indicator */
.template_togglebox #sidebar-services-loading {
    color: var(--sidebar-fg-muted);
    font-size: 13px;
}

.template_togglebox #sidebar-services-loading .spin {
    animation: spin 1s linear infinite;
}

@keyframes spin {
    from { transform: rotate(0deg); }
    to { transform: rotate(360deg); }
}

/* Reduced motion keeps a progress cue without rotation: an opacity pulse
   (one-pulse, slick-animations.css). */
@media (prefers-reduced-motion: reduce) {
  .template_togglebox #sidebar-services-loading .spin {
    animation: one-pulse 2s ease-in-out infinite;
  }
}

.template_togglebox .slick-sidebar-service-context {
    margin: 0;
}

.template_togglebox .tb-oneb-sidebar-branch {
    margin: 0 0 8px;
    border-bottom: 1px solid var(--sidebar-divider);
    padding-bottom: 10px;
}

/* Specificity shield: override base-theme sidebar rules inside the branch.
   custom.min.css sets dark bg/color on .sidebar .nav-item .nav-subnav and
   child .nav-link selectors; these resets let the branch tokens take effect. */
.template_togglebox .sidebar .tb-oneb-sidebar-branch .nav.nav-subnav {
    background-color: transparent;
}

.template_togglebox .sidebar .tb-oneb-sidebar-branch .nav-subnav .nav-item > .nav-link {
    background-color: transparent;
    color: var(--sidebar-fg);
    padding: 8px 12px;
}

.template_togglebox .sidebar .tb-oneb-sidebar-branch .nav-subnav .nav-item > .nav-link:hover:not(.active, .disabled) {
    background: var(--sidebar-hover-bg);
    color: var(--sidebar-fg-strong);
}

.template_togglebox .sidebar .tb-oneb-sidebar-branch .nav-subnav .nav-item > .nav-link.active {
    background: var(--sidebar-active-bg) !important;
    color: var(--sidebar-active-fg);
}

.template_togglebox .sidebar .tb-oneb-sidebar-branch .nav-item > .nav-link > .material-icons {
    color: currentColor;
    font-size: 18px;
}

.template_togglebox .tb-oneb-sidebar-branch__header {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    padding: 14px 12px 12px;
    border-bottom: 1px solid var(--sidebar-divider);
}

.template_togglebox .tb-oneb-sidebar-branch__toggle {
    display: inline-flex;
    flex: 0 0 auto;
    align-items: center;
    justify-content: center;
    align-self: flex-start;
    width: 24px;
    min-width: 24px;
    height: 24px;
    padding: 0;
    margin-left: auto;
    border: 0;
    border-radius: var(--radius-sm);
    background: transparent;
    color: var(--sidebar-fg-muted);
    font-size: 0;
    line-height: 0;
    transition: background-color var(--transition-fast), color var(--transition-fast);
}

/* Coarse-pointer hit areas for the branch toggle and rename (recipe and
   token from the .slick-hit-area utility in slick-components.css). */
@media (pointer: coarse) {
    .template_togglebox .tb-oneb-sidebar-branch__toggle,
    .template_togglebox .tb-oneb-sidebar-branch__edit {
        position: relative;
    }

    .template_togglebox .tb-oneb-sidebar-branch__toggle::after,
    .template_togglebox .tb-oneb-sidebar-branch__edit::after {
        content: "";
        position: absolute;
        inset: min(0px, calc((100% - var(--touch-target-min)) / 2));
    }
}

.template_togglebox .tb-oneb-sidebar-branch__toggle:hover {
    background: var(--sidebar-hover-bg);
    color: var(--sidebar-fg-strong);
}

.template_togglebox .tb-oneb-sidebar-branch__toggle:focus {
    outline: none;
}

.template_togglebox .tb-oneb-sidebar-branch__toggle:focus-visible {
    outline: 2px solid var(--focus-outline);
    outline-offset: -2px;
}

.template_togglebox .tb-oneb-sidebar-branch__content {
    display: flex;
    flex: 1 1 0;
    min-width: 0;
    flex-direction: column;
    gap: 6px;
}

.template_togglebox .tb-oneb-sidebar-branch__title-row {
    display: flex;
    align-items: flex-start;
    min-width: 0;
}

.template_togglebox .tb-oneb-sidebar-branch__title {
    display: block;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    font-size: 16px;
    font-weight: 700;
    line-height: 1.2;
    color: var(--sidebar-fg-strong);
}

.template_togglebox .tb-oneb-sidebar-branch__meta {
    display: flex;
    align-items: flex-start;
    min-width: 0;
}

.template_togglebox .tb-oneb-sidebar-branch__product-row {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    justify-content: flex-start;
    gap: 4px;
    width: 100%;
    min-width: 0;
}

.template_togglebox .tb-oneb-sidebar-branch__product {
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    font-size: 13px;
    color: var(--sidebar-fg-muted);
}

.template_togglebox .tb-oneb-sidebar-branch__edit {
    display: inline-flex;
    flex: 0 0 auto;
    align-items: center;
    justify-content: flex-start;
    gap: 4px;
    min-height: 24px;
    max-width: 100%;
    padding: 0;
    border: 0;
    border-radius: 0;
    background: transparent;
    color: var(--sidebar-fg-strong);
    font-size: 12px;
    font-weight: 600;
    line-height: 1;
    white-space: nowrap;
    cursor: pointer;
    transition: color var(--transition-fast);
}

.template_togglebox .tb-oneb-sidebar-branch__edit:hover {
    color: var(--sidebar-fg-strong);
    text-decoration: underline;
}

.template_togglebox .tb-oneb-sidebar-branch__edit:focus {
    outline: none;
}

.template_togglebox .tb-oneb-sidebar-branch__edit:focus-visible {
    outline: 2px solid var(--focus-outline);
    outline-offset: -2px;
}

.template_togglebox .tb-oneb-sidebar-branch__edit i.material-icons {
    font-size: 12px;
    line-height: 12px;
}

.template_togglebox .tb-oneb-sidebar-branch__icon,
.template_togglebox .tb-oneb-sidebar-link__caret {
    flex: 0 0 auto;
    color: var(--sidebar-fg-muted);
    transition: transform var(--transition-normal), color var(--transition-fast);
}

.template_togglebox .tb-oneb-sidebar-branch__icon {
    margin-top: 0;
    color: currentColor;
}

.template_togglebox .tb-oneb-sidebar-branch__panel,
.template_togglebox .tb-oneb-sidebar-submenu {
    display: grid;
    grid-template-rows: 0fr;
    opacity: 0.3;
    transition: grid-template-rows var(--transition-normal), opacity var(--transition-normal);
}

.template_togglebox .tb-oneb-sidebar-branch__panel > *,
.template_togglebox .tb-oneb-sidebar-submenu > * {
    min-height: 0;
    overflow: hidden;
}

.template_togglebox .tb-oneb-sidebar-branch.is-open .tb-oneb-sidebar-branch__panel,
.template_togglebox .tb-oneb-sidebar-item.is-open .tb-oneb-sidebar-submenu {
    grid-template-rows: 1fr;
    opacity: 1;
}

.template_togglebox .tb-oneb-sidebar-branch.is-open .tb-oneb-sidebar-branch__icon,
.template_togglebox .tb-oneb-sidebar-item.is-open .tb-oneb-sidebar-link__caret {
    transform: rotate(180deg);
}

.template_togglebox .tb-oneb-sidebar-branch__panel-body {
    display: flex;
    flex-direction: column;
    gap: 4px;
    padding: 8px 0 0;
}

.template_togglebox .tb-oneb-sidebar-tree,
.template_togglebox .tb-oneb-sidebar-submenu__list {
    gap: 0;
}

.template_togglebox .tb-oneb-sidebar-tree {
    display: flex;
    flex-direction: column;
    padding: 0 8px;
}

.template_togglebox .tb-oneb-sidebar-item {
    border-top: 0;
    padding-top: 2px;
}

.template_togglebox .tb-oneb-sidebar-link--group,
.template_togglebox .tb-oneb-sidebar-link--direct,
.template_togglebox .tb-oneb-sidebar-link--child {
    display: flex;
    position: relative;
    align-items: center;
    gap: 10px;
    min-height: 40px;
    border: 0;
    border-radius: 8px;
    color: var(--sidebar-fg);
    font-size: 14px;
    line-height: var(--line-height-md);
    transition: background-color var(--transition-fast), color var(--transition-fast);
}

.template_togglebox .tb-oneb-sidebar-link--group,
.template_togglebox .tb-oneb-sidebar-link--direct {
    width: 100%;
    padding: 8px 12px;
    text-align: left;
}

/* Counteract the generic sidebar submenu .nav-link shell that also matches
   group toggles because they are rendered as buttons with the nav-link class. */
.template_togglebox .sidebar .tb-oneb-sidebar-tree .tb-oneb-sidebar-item > .tb-oneb-sidebar-link--group {
    margin: 0;
    min-height: 40px;
    padding: 8px 12px;
    border-radius: 8px;
    background: transparent;
    color: var(--sidebar-fg);
}

.template_togglebox .tb-oneb-sidebar-link__icon {
    flex: 0 0 auto;
    width: 18px;
    font-size: 18px;
    line-height: 1;
    color: currentColor;
    opacity: 0.88;
}

.template_togglebox .tb-oneb-sidebar-link__label {
    flex: 1 1 auto;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* Material Symbols glyphs (the Databases cylinder) are drawn filled at the
   classic icons' weight so the column reads as one filled set. */
.template_togglebox .material-symbols-outlined.tb-oneb-sidebar-link__icon {
    font-variation-settings: "FILL" 1, "wght" 400, "GRAD" 0, "opsz" 24;
}

/* How many of the product the service holds: quiet inventory, right-aligned
   in tabular figures. The slot keeps its width while the count loads so the
   row never shifts; the label truncates before it. */
.template_togglebox .tb-oneb-sidebar-link__count {
    flex: 0 0 auto;
    min-width: 2ch;
    color: var(--sidebar-fg-muted);
    font-size: var(--font-size-sm);
    font-weight: 400;
    font-variant-numeric: tabular-nums;
    text-align: right;
}

.template_togglebox .tb-oneb-sidebar-link--child {
    margin-left: 30px;
    padding: 8px 12px;
}

.template_togglebox .tb-oneb-sidebar-link--group:hover,
.template_togglebox .tb-oneb-sidebar-link--direct:hover,
.template_togglebox .tb-oneb-sidebar-link--child:hover {
    background: var(--sidebar-hover-bg);
    color: var(--sidebar-fg-strong);
}

.template_togglebox .tb-oneb-sidebar-link--direct:focus,
.template_togglebox .tb-oneb-sidebar-link--child:focus {
    outline: none;
}

.template_togglebox .tb-oneb-sidebar-link--direct:focus-visible,
.template_togglebox .tb-oneb-sidebar-link--child:focus-visible {
    background: var(--sidebar-hover-bg);
    color: var(--sidebar-fg-strong);
    outline: 2px solid var(--focus-outline);
    outline-offset: -2px;
}

.template_togglebox .sidebar .tb-oneb-sidebar-tree .tb-oneb-sidebar-item > .tb-oneb-sidebar-link--group:hover:not(.active, .disabled),
.template_togglebox .sidebar .tb-oneb-sidebar-tree .tb-oneb-sidebar-item > .tb-oneb-sidebar-link--group:focus-visible {
    background: var(--sidebar-hover-bg);
    color: var(--sidebar-fg-strong);
}

.template_togglebox .sidebar .tb-oneb-sidebar-tree .tb-oneb-sidebar-item > .tb-oneb-sidebar-link--group:focus {
    outline: none;
}

.template_togglebox .sidebar .tb-oneb-sidebar-tree .tb-oneb-sidebar-item > .tb-oneb-sidebar-link--group:focus-visible {
    outline: 2px solid var(--focus-outline);
    outline-offset: -2px;
}

.template_togglebox .sidebar .tb-oneb-sidebar-tree .tb-oneb-sidebar-item > .tb-oneb-sidebar-link--group:hover:not(.active, .disabled) .tb-oneb-sidebar-link__caret,
.template_togglebox .sidebar .tb-oneb-sidebar-tree .tb-oneb-sidebar-item > .tb-oneb-sidebar-link--group:focus-visible .tb-oneb-sidebar-link__caret {
    color: var(--sidebar-fg-strong);
}

.template_togglebox .tb-oneb-sidebar-link--group.is-current-section {
    background: var(--sidebar-current-bg);
    color: var(--sidebar-fg-strong);
    font-weight: 700;
}

.template_togglebox .tb-oneb-sidebar-link--group.is-current-section .tb-oneb-sidebar-link__caret {
    color: var(--sidebar-fg-strong);
}

.template_togglebox .tb-oneb-sidebar-link--direct.active,
.template_togglebox .tb-oneb-sidebar-link--child.active,
.template_togglebox .tb-oneb-sidebar-link--direct[aria-current="page"],
.template_togglebox .tb-oneb-sidebar-link--child[aria-current="page"] {
    background: var(--sidebar-active-bg);
    color: var(--sidebar-active-fg);
    font-weight: 700;
}

.template_togglebox .tb-oneb-sidebar-link--direct.active .tb-oneb-sidebar-link__icon,
.template_togglebox .tb-oneb-sidebar-link--child.active .tb-oneb-sidebar-link__icon,
.template_togglebox .tb-oneb-sidebar-link--direct.active .tb-oneb-sidebar-link__label,
.template_togglebox .tb-oneb-sidebar-link--child.active .tb-oneb-sidebar-link__label,
.template_togglebox .tb-oneb-sidebar-link--direct[aria-current="page"] .tb-oneb-sidebar-link__icon,
.template_togglebox .tb-oneb-sidebar-link--child[aria-current="page"] .tb-oneb-sidebar-link__icon,
.template_togglebox .tb-oneb-sidebar-link--direct[aria-current="page"] .tb-oneb-sidebar-link__label,
.template_togglebox .tb-oneb-sidebar-link--child[aria-current="page"] .tb-oneb-sidebar-link__label,
.template_togglebox .tb-oneb-sidebar-link--direct.active .tb-oneb-sidebar-link__count,
.template_togglebox .tb-oneb-sidebar-link--child.active .tb-oneb-sidebar-link__count,
.template_togglebox .tb-oneb-sidebar-link--direct[aria-current="page"] .tb-oneb-sidebar-link__count,
.template_togglebox .tb-oneb-sidebar-link--child[aria-current="page"] .tb-oneb-sidebar-link__count {
    color: var(--sidebar-active-fg);
}

@media (max-width: 575.98px) {
    .template_togglebox .tb-oneb-sidebar-branch__header {
        gap: 10px;
        padding: 14px 12px 12px;
    }

    .template_togglebox .tb-oneb-sidebar-branch__toggle {
        width: 24px;
        min-width: 24px;
        max-width: 24px;
        height: 24px;
        flex: 0 0 24px;
    }

    .template_togglebox .tb-oneb-sidebar-branch__meta {
        align-items: flex-start;
    }

    .template_togglebox .tb-oneb-sidebar-branch__product-row {
        flex-wrap: wrap;
        width: 100%;
        align-items: flex-start;
    }

    .template_togglebox .tb-oneb-sidebar-branch__edit {
        width: auto;
    }

    .template_togglebox .tb-oneb-sidebar-branch__panel-body {
        padding-top: 10px;
    }

    .template_togglebox .tb-oneb-sidebar-tree {
        padding: 0 8px 10px;
    }

    .template_togglebox .tb-oneb-sidebar-link--group,
    .template_togglebox .tb-oneb-sidebar-link--direct,
    .template_togglebox .tb-oneb-sidebar-link--child {
        min-height: 42px;
        padding-left: 10px;
        padding-right: 10px;
    }
}

/* ===========================================
   DASHBOARD (clientarea/dashboard.tpl, js/dashboard.js)
   =========================================== */

.template_togglebox .tb-dash h1 {
    margin: 0;
    font-size: var(--font-size-24, 24px);
    font-weight: var(--font-weight-600, 600);
    line-height: 1.25;
    color: var(--color-fg-strong);
}

.template_togglebox .tb-dash .tb-dash__title {
    margin: 0;
    font-size: var(--font-size-18, 18px);
    font-weight: var(--font-weight-600, 600);
    line-height: 1.3;
    color: var(--color-fg-strong);
}

/* Title row: the page heading with the account-health figures beside it. */
.template_togglebox .tb-dash__head {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    justify-content: space-between;
    gap: var(--space-2, 8px) var(--space-5, 20px);
}

.template_togglebox .tb-dash-health {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: var(--space-1, 4px) var(--space-5, 20px);
    margin: 0;
}

.template_togglebox .tb-dash-health__item {
    display: flex;
    align-items: baseline;
    gap: var(--space-2, 8px);
}

.template_togglebox .tb-dash-health dt {
    font-size: var(--font-size-13, 13px);
    font-weight: var(--font-weight-400, 400);
    color: var(--color-fg-muted);
}

.template_togglebox .tb-dash-health dd {
    margin: 0;
    font-size: var(--font-size-16, 16px);
    font-weight: var(--font-weight-600, 600);
    font-variant-numeric: tabular-nums;
    color: var(--color-fg-strong);
}

.template_togglebox .tb-dash-health .tb-dash-health__value--due {
    color: var(--color-danger-strong);
}

.template_togglebox .tb-dash-health .tb-dash-health__note {
    font-size: var(--font-size-13, 13px);
    font-weight: var(--font-weight-400, 400);
    color: var(--color-success-strong);
}

/* Keep the last rows clear of the fixed live-chat launcher. */
.template_togglebox .tb-dash {
    padding-bottom: var(--chat-widget-clearance);
}

/* Attention banner: the shared .slick-info-banner holding a list of items. */
.template_togglebox .tb-dash-attention {
    margin-top: var(--space-5, 20px);
}

.template_togglebox .tb-dash-attention__body {
    flex: 1 1 auto;
    min-width: 0;
}

#dashboard-main .tb-dash-attention__title {
    margin: 0 0 var(--space-2, 8px);
    font-size: var(--font-size-16, 16px);
    color: var(--color-fg-strong);
}

.template_togglebox .tb-dash-attention__list {
    margin: 0;
    padding: 0;
    list-style: none;
}

.template_togglebox .tb-dash-attention__item {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-2, 8px) var(--space-4, 16px);
    padding: var(--space-2, 8px) 0;
}

.template_togglebox .tb-dash-attention__item + .tb-dash-attention__item {
    border-top: 1px solid color-mix(in srgb, var(--color-fg) 12%, transparent);
}

.template_togglebox .tb-dash-attention__text {
    flex: 1 1 320px;
    margin: 0;
    font-size: var(--font-size-14, 14px);
    color: var(--color-fg-subtle);
}

.template_togglebox .tb-dash-attention__text strong {
    font-weight: var(--font-weight-600, 600);
    color: var(--color-fg-strong);
}

.template_togglebox a.tb-dash-attention__action:not(.btn) {
    display: inline-flex;
    align-items: center;
    min-height: 44px;
    font-size: var(--font-size-14, 14px);
    font-weight: var(--font-weight-500, 500);
    color: var(--color-primary-strong);
    white-space: nowrap;
}

.template_togglebox .tb-dash-attention__clear {
    margin: 0;
    font-size: var(--font-size-14, 14px);
    color: var(--color-fg-muted);
}

/* Services header */
.template_togglebox .tb-dash-services {
    margin-top: var(--space-6, 24px);
}

.template_togglebox .tb-dash-services__head {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-end;
    justify-content: space-between;
    gap: var(--space-2, 8px) var(--space-4, 16px);
    margin-bottom: var(--space-3, 12px);
}

.template_togglebox .tb-dash-services__summary {
    display: flex;
    flex-wrap: wrap;
    gap: 0 var(--space-3, 12px);
    margin: var(--space-1, 4px) 0 0;
    font-size: var(--font-size-14, 14px);
    color: var(--color-fg-muted);
}

.template_togglebox .tb-dash-services__summary span + span::before {
    margin-right: var(--space-3, 12px);
    content: "·";
}

.template_togglebox .tb-dash-services__groups {
    display: inline-flex;
    align-items: center;
    min-height: 44px;
    gap: var(--space-1, 4px);
    font-size: var(--font-size-14, 14px);
    font-weight: var(--font-weight-500, 500);
    color: var(--color-primary-strong);
}

.template_togglebox .tb-dash-services__groups .material-icons {
    font-size: 18px;
}

/* Category filter: the shared .slick-filter-tabs, rendered as buttons. */
.template_togglebox .tb-dash-filter {
    margin-bottom: var(--space-3, 12px);
}

/* Services table */
.template_togglebox .tb-dash-table {
    margin-bottom: 0;
}

.template_togglebox .tb-dash-table thead th {
    font-size: var(--font-size-12, 12px);
    font-weight: var(--font-weight-600, 600);
    letter-spacing: var(--letter-spacing-040, 0.04em);
    text-transform: uppercase;
    color: var(--color-fg-muted);
}

.template_togglebox .tb-dash-table td {
    vertical-align: middle;
}

.template_togglebox .tb-dash-group__head th {
    padding-top: var(--space-4, 16px);
    text-transform: none;
    letter-spacing: normal;
    font-size: var(--font-size-13, 13px);
    font-weight: var(--font-weight-600, 600);
    color: var(--color-fg-subtle);
    background: var(--color-surface);
}

.template_togglebox .tb-dash-table--filtered .tb-dash-group__head {
    display: none;
}

.template_togglebox .tb-dash-group__count {
    margin-left: var(--space-2, 8px);
    font-weight: var(--font-weight-500, 500);
    color: var(--color-fg-muted);
}

.template_togglebox .tb-dash-group__more td {
    padding-top: var(--space-2, 8px);
    padding-bottom: var(--space-3, 12px);
}

.template_togglebox .tb-dash-group__more a {
    display: inline-flex;
    align-items: center;
    font-size: var(--font-size-14, 14px);
    font-weight: var(--font-weight-500, 500);
    color: var(--color-primary-strong);
}

.template_togglebox .tb-dash-group__more .material-icons {
    font-size: 18px;
}

.template_togglebox .tb-dash-row {
    position: relative;
}

.template_togglebox .tb-dash-row:hover {
    background: var(--brand-primary-bg);
    box-shadow: inset 3px 0 0 var(--color-primary-fill);
}

.template_togglebox .tb-dash-row__service {
    min-width: 220px;
}

.template_togglebox .tb-dash-row__link {
    display: block;
    font-size: var(--font-size-16, 16px);
    font-weight: var(--font-weight-600, 600);
    color: var(--color-fg-strong);
    word-break: break-word;
}

.template_togglebox .tb-dash-row__link:hover,
.template_togglebox .tb-dash-row__link:focus {
    color: var(--color-primary-strong);
    text-decoration: none;
}

.template_togglebox .tb-dash-row__link:focus-visible {
    outline: none;
}

.template_togglebox .tb-dash-row__link:focus-visible::after {
    outline: 2px solid var(--focus-outline);
    outline-offset: -2px;
}

.template_togglebox .tb-dash-row__label:empty,
.template_togglebox .tb-dash-row__label:not(:empty) + .tb-dash-row__fallback {
    display: none;
}

.template_togglebox .tb-dash-row__service:not(:has(.tb-dash-row__label:not(:empty))) .tb-dash-row__product--dup {
    display: none;
}

.template_togglebox .tb-dash-row__meta {
    display: block;
    font-size: var(--font-size-13, 13px);
    color: var(--color-fg-muted);
}

.template_togglebox .tb-dash-row__edit {
    z-index: 2;
    margin-left: var(--space-1, 4px);
    vertical-align: middle;
    opacity: 0;
}

.template_togglebox .tb-dash-row:hover .tb-dash-row__edit,
.template_togglebox .tb-dash-row:focus-within .tb-dash-row__edit,
.template_togglebox .tb-dash-row__edit:focus-visible {
    opacity: 1;
}

@media (hover: none) {
    .template_togglebox .tb-dash-row__edit {
        opacity: 1;
    }
}

/* Touch: the label pencil gets a full 44px target. */
@media (pointer: coarse) {
    .template_togglebox .tb-dash-row__edit {
        width: 44px;
        height: 44px;
        margin-top: -8px;
        margin-bottom: -8px;
    }
}

.template_togglebox .tb-dash-row__status,
.template_togglebox .tb-dash-row__cost,
.template_togglebox .tb-dash-row__renews {
    white-space: nowrap;
}

.template_togglebox .tb-dash-row__cost small,
.template_togglebox .tb-dash-row__renews small,
.template_togglebox .tb-dash-row__note {
    display: block;
    font-size: var(--font-size-12, 12px);
    color: var(--color-fg-muted);
}

.template_togglebox .tb-dash-row__amount {
    font-weight: var(--font-weight-600, 600);
    font-variant-numeric: tabular-nums;
    color: var(--color-fg-strong);
}

.template_togglebox .tb-dash-row__muted {
    font-size: var(--font-size-13, 13px);
    color: var(--color-fg-muted);
}

.template_togglebox .tb-dash-row__late,
.template_togglebox .tb-dash-row__renews .tb-dash-row__note--danger {
    font-weight: var(--font-weight-600, 600);
    color: var(--color-danger-strong);
}

.template_togglebox .tb-dash-row__note--warning {
    margin-top: var(--space-1, 4px);
    color: var(--color-warning-strong);
}

/* Live cloud state (filled in by js/dashboard.js): .slick-meta text with a
   .slick-state-dot. */
.template_togglebox .tb-dash-cloud {
    display: block;
    margin-top: var(--space-1, 4px);
}

.template_togglebox .tb-dash-cloud:empty {
    display: none;
}

/* Widget blocks, tickets and invoices */
.template_togglebox .tb-dash-blocks,
.template_togglebox .tb-dash-panels {
    margin-top: var(--space-6, 24px);
}

/* Tickets and invoices sit side by side when both fit, stacked otherwise.
   A grid, not a Bootstrap .row: the row's negative margins overflowed the
   10px page padding on phones. */
.template_togglebox .tb-dash-panels {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 420px), 1fr));
    gap: var(--space-5, 20px) var(--space-6, 24px);
}

.template_togglebox .tb-dash-panel {
    min-width: 0;
}

.template_togglebox .tb-dash-panel__head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-3, 12px);
    margin-bottom: var(--space-3, 12px);
}

/* PNotify's bright theme paints decorative diagonal stripes on error notices. */
.template_togglebox .brighttheme-error {
    background-image: none;
}

/* Notifications dropdown title: inset its row from the divider under it. */
.template_togglebox .notifications-drop .notifications-drop-title {
    padding: var(--space-2, 8px) 15px;
}

/* HostBill core appends a "Powered by" line after the page content. */
.template_togglebox .section-main > center {
    margin-top: var(--space-6, 24px);
    font-size: var(--font-size-12, 12px);
    color: var(--color-fg-muted);
}

.template_togglebox .section-main > center a {
    color: var(--color-fg-muted);
    text-decoration: underline;
    text-underline-offset: 2px;
}

.template_togglebox .section-main > center a strong {
    font-weight: var(--font-weight-500, 500);
}

.template_togglebox .tb-dash-mini {
    margin-bottom: 0;
}

.template_togglebox .tb-dash-mini td {
    vertical-align: middle;
}

.template_togglebox .tb-dash-mini__title {
    display: block;
    font-size: var(--font-size-14, 14px);
    font-weight: var(--font-weight-500, 500);
    color: var(--color-fg-strong);
}

.template_togglebox .tb-dash-mini__meta {
    font-size: var(--font-size-12, 12px);
    color: var(--color-fg-muted);
}

.template_togglebox .tb-dash-mini__amount {
    font-weight: var(--font-weight-600, 600);
    color: var(--color-fg-strong);
}

.template_togglebox .tb-dash-mini__end {
    width: 1%;
    text-align: right;
    white-space: nowrap;
}

.template_togglebox .tb-dash-mini__pay {
    margin-left: var(--space-2, 8px);
}

/* The compiled shell pads page content by 10px below the desktop layout;
   give it the standard 16px gutter. */
@media (max-width: 993px) {
    .template_togglebox .body-content .section-main {
        padding-right: var(--space-4, 16px);
        padding-left: var(--space-4, 16px);
    }
}

/* Narrow screens: each service becomes a stacked card. */
@media (max-width: 767px) {
    .template_togglebox .tb-dash-services__summary {
        flex-direction: column;
    }

    /* On cards the caption already names the column. */
    .template_togglebox .tb-dash-row__renews small:not(.tb-dash-row__note) {
        display: none;
    }

    .template_togglebox .tb-dash-services__summary span + span::before {
        content: none;
    }

    .template_togglebox .tb-dash-table thead {
        position: absolute;
        width: 1px;
        height: 1px;
        overflow: hidden;
        clip: rect(0, 0, 0, 0);
    }

    .template_togglebox .tb-dash-table,
    .template_togglebox .tb-dash-table tbody:not(.tb-hidden),
    .template_togglebox .tb-dash-group__head,
    .template_togglebox .tb-dash-group__head th,
    .template_togglebox .tb-dash-group__more,
    .template_togglebox .tb-dash-group__more td {
        display: block;
        width: 100%;
    }

    .template_togglebox .tb-dash-row {
        display: grid;
        grid-template-columns: repeat(3, minmax(0, 1fr));
        gap: var(--space-2, 8px);
        padding: var(--space-3, 12px) 0;
        border-top: 1px solid var(--color-border);
    }

    .template_togglebox .tb-dash-row > td {
        display: block;
        padding: 0 var(--space-3, 12px);
        border: 0;
        white-space: normal;
    }

    .template_togglebox .tb-dash-row > .tb-dash-row__service {
        grid-column: 1 / -1;
        min-width: 0;
    }

    .template_togglebox .tb-dash-row > td[data-label]::before {
        display: block;
        font-size: var(--font-size-11, 11px);
        font-weight: var(--font-weight-600, 600);
        letter-spacing: var(--letter-spacing-040, 0.04em);
        text-transform: uppercase;
        content: attr(data-label);
        color: var(--color-fg-muted);
    }

    .template_togglebox .tb-dash-mini__pay {
        margin-top: var(--space-1, 4px);
    }
}

/* ===========================================
   DARK MODE LEGACY BRIDGE
   =========================================== */

/* Kept: removing it changes th border-top-color #334155 -> #a3b1c6 on the dashboard. */
html[data-theme="dark"] .template_togglebox .section-dashboard .table th,
html[data-theme="dark"] .template_togglebox .section-dashboard .table td {
    border-top-color: var(--color-border, #334155) !important;
}

/* Kept: removing it changes th border-bottom-color #334155 -> #a3b1c6 on the dashboard. */
html[data-theme="dark"] .template_togglebox .section-dashboard .table thead th {
    border-bottom-color: var(--color-border, #334155) !important;
}

/* Kept: removing it changes div.slider background-color #334155 -> #eeeeee on the services list. */
html[data-theme="dark"] .template_togglebox .nav-tabs-wrapper .nav-tabs .slider {
    background: var(--color-border, #334155) !important;
}

/* Kept: removing it changes a.nav-link color #a3b1c6 -> #6c757d on the services list. */
html[data-theme="dark"] .template_togglebox .nav-tabs-wrapper .nav-tabs li.nav-item a.nav-link {
    color: var(--color-fg-muted, #94a3b8) !important;
}

/* Kept: removing it changes a.nav-link color #f8fafc -> #a3b1c6 on the services list. */
html[data-theme="dark"] .template_togglebox .nav-tabs-wrapper .nav-tabs li.nav-item.active a.nav-link {
    color: var(--color-fg-strong, #f8fafc) !important;
}

/* Kept: removing it changes span.nav-tabs-arrow-left color #a3b1c6 -> #ced4da on the services list. */
html[data-theme="dark"] .template_togglebox .nav-tabs-wrapper .nav-tabs-arrow-left {
    background: linear-gradient(
        to right,
        var(--color-bg, #0f172a) 0%,
        var(--color-bg, #0f172a) 65%,
        rgba(15, 23, 42, 0) 100%
    ) !important;
    color: var(--color-fg-muted) !important;
}

/* Kept: removing it changes span.nav-tabs-arrow-right color #a3b1c6 -> #ced4da on the services list. */
html[data-theme="dark"] .template_togglebox .nav-tabs-wrapper .nav-tabs-arrow-right {
    background: linear-gradient(
        to left,
        var(--color-bg, #0f172a) 0%,
        var(--color-bg, #0f172a) 65%,
        rgba(15, 23, 42, 0) 100%
    ) !important;
    color: var(--color-fg-muted) !important;
}
/* Kept: no verification page renders it, so the token diff cannot show it is redundant yet. */
html[data-theme="dark"] .template_togglebox .info-box .info-box-items .nav-pills {
    border-right-color: var(--color-border, #334155) !important;
}

/* Kept: removing it changes iframe.info-box-invoice background-color #ffffff -> transparent on the invoice. */
html[data-theme="dark"] .template_togglebox .invoice-iframe .info-box-invoice {
    background-color: var(--invoice-paper-bg, #fff) !important;
}

/* ===========================================
   LIVECHAT SAFE AREA (MINIMIZED)
   =========================================== */

/* --livechat-safe-bottom and --chat-widget-height live in theme-variables.css. */

html {
    scroll-padding-bottom: var(--livechat-safe-bottom);
    overflow-y: hidden;
}

body.template_togglebox {
    /*
     * Reserve a non-scrollable strip at the bottom of the viewport for the
     * minimized LiveChat widget so content cannot be obscured.
     *
     * This makes <body> the scroll container and shortens it by the widget
     * height, effectively carving out space in the layout (vs. only adding
     * extra scroll range via padding).
     */
    overflow-y: auto;
    height: calc(100vh - var(--livechat-safe-bottom));
    -webkit-overflow-scrolling: touch;
    /* <body> is the scroller, so the navbar clearance for focus and anchor
       scrolling belongs here, not on <html>. */
    scroll-padding-top: var(--shell-scroll-padding-top);
    /* Keeps a focused field clear of a sticky action bar; js/contact-edit.js
       sets --tb-sticky-h to the bar's height. */
    scroll-padding-bottom: var(--tb-sticky-h, 0);
}

/* Lift bottom-fixed bars so they don't overlap the chat widget */
body.template_togglebox #orderpage-summary.orderpage-summary-sticky,
body.template_togglebox #pricing-display.price-float {
    bottom: var(--livechat-safe-bottom) !important;
}

/* ============================================================
   Profile / contact permissions (profiles/add, profiles/edit)
   Roles-first picker + collapsible, searchable permission matrix.
   Scoped to .tb-perms; token-first so light/dark flip via vars.
   Theme-owned (loads after the compiled CSS), so nothing here
   depends on editing the HostBill-generated custom.min.css.
   ============================================================ */
.template_togglebox .tb-perms {
    margin-top: var(--space-6, 24px);
}
.template_togglebox .tb-perms__head {
    margin-bottom: var(--space-4, 16px);
}
.template_togglebox .tb-perms__title {
    margin: 0 0 var(--space-2, 8px);
    font-size: var(--font-size-18, 18px);
    font-weight: var(--font-weight-600, 600);
    line-height: var(--line-height-130, 1.3);
    color: var(--color-fg-strong, #111827);
}
.template_togglebox .tb-perms__intro {
    max-width: 70ch;
    text-wrap: pretty;
    margin: 0;
    font-size: var(--font-size-md, 14px);
    line-height: var(--line-height-140, 1.4);
    color: var(--color-fg-subtle, #495057);
}

/* --- Primary: permission templates (segmented buttons) --- */
.template_togglebox .tb-perms__roles {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-2, 8px);
    margin: var(--space-4, 16px) 0;
}
.template_togglebox .tb-role {
    display: inline-flex;
    align-items: center;
    padding: var(--space-2, 8px) var(--space-4, 16px);
    border: 1px solid var(--color-border, #dee2e6);
    border-radius: var(--radius-md);
    background: var(--color-bg-elevated, #fff);
    color: var(--color-fg, #212529);
    font-size: var(--font-size-md, 14px);
    font-weight: var(--font-weight-600, 600);
    cursor: pointer;
    transition: background-color var(--transition-fast, .15s ease),
                border-color var(--transition-fast, .15s ease),
                color var(--transition-fast, .15s ease),
                box-shadow var(--transition-fast, .15s ease);
}

@media (pointer: coarse) {
    .template_togglebox .tb-role {
        min-height: var(--touch-target-min);
    }
}

.template_togglebox .tb-role:hover {
    border-color: var(--brand-primary);
    background: var(--brand-primary-bg, rgba(41, 167, 230, 0.08));
    color: var(--color-link);
}
.template_togglebox .tb-role[aria-pressed="true"] {
    background: var(--color-primary-fill);
    border-color: var(--color-primary-fill);
    color: var(--color-fg-inverse);
    box-shadow: var(--shadow-brand-sm, 0 2px 4px rgba(41, 167, 230, 0.2));
}
.template_togglebox .tb-role:focus-visible {
    outline: 2px solid var(--focus-outline);
    outline-offset: 2px;
    box-shadow: 0 0 0 4px var(--focus-ring-strong, rgba(41, 167, 230, 0.3));
}

/* --- Count pills (advanced total + per-group + per-accordion) --- */
.template_togglebox .tb-perms__count,
.template_togglebox .tb-group__count,
.template_togglebox .tb-acc__count {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 22px;
    height: 22px;
    padding: 0 7px;
    border-radius: var(--radius-pill);
    background: var(--brand-primary-bg, rgba(41, 167, 230, 0.08));
    color: var(--color-link);
    font-size: var(--font-size-sm, 12px);
    font-weight: var(--font-weight-600, 600);
    font-variant-numeric: tabular-nums;
    line-height: 1;
    white-space: nowrap;
}
.template_togglebox .tb-perms__count.is-zero,
.template_togglebox .tb-group__count,
.template_togglebox .tb-acc__count {
    background: var(--color-surface-2, #e9ecef);
    color: var(--color-fg-subtle, #495057);
}
.template_togglebox .tb-acc.has-selected .tb-acc__count,
.template_togglebox .tb-group.has-selected .tb-group__count {
    background: var(--brand-primary-bg, rgba(41, 167, 230, 0.08));
    color: var(--color-link);
}

/* --- Secondary: advanced disclosure --- */
.template_togglebox .tb-perms__advanced {
    margin-top: var(--space-4, 16px);
    border: 1px solid var(--color-border, #dee2e6);
    border-radius: var(--radius-lg);
    background: var(--color-bg-elevated, #fff);
    box-shadow: var(--shadow-sm, 0 1px 3px rgba(0, 0, 0, 0.05));
}
.template_togglebox .tb-perms__advanced-summary {
    display: flex;
    align-items: center;
    gap: var(--space-3, 12px);
    padding: var(--space-4, 16px) var(--space-5, 20px);
    border-radius: var(--radius-lg);
    color: var(--color-fg-strong, #111827);
    font-weight: var(--font-weight-600, 600);
    cursor: pointer;
    list-style: none;
    user-select: none;
}

@media (pointer: coarse) {
    .template_togglebox .tb-perms__advanced-summary {
        min-height: var(--touch-target-min);
    }
}

.template_togglebox .tb-perms__advanced-summary::-webkit-details-marker { display: none; }
.template_togglebox .tb-perms__advanced-summary:hover { background: var(--color-surface, #f8f9fa); }
.template_togglebox .tb-perms__advanced-summary:focus-visible {
    outline: 2px solid var(--focus-outline);
    outline-offset: -2px;
}
.template_togglebox .tb-perms__advanced[open] .tb-perms__advanced-summary {
    border-bottom: 1px solid var(--color-border, #dee2e6);
    border-radius: var(--radius-lg) var(--radius-lg) 0 0;
}
.template_togglebox .tb-perms__advanced-icon {
    font-size: var(--icon-size-lg, 22px);
    color: var(--color-fg-subtle, #495057);
}
.template_togglebox .tb-perms__advanced-label { flex: 1 1 auto; }
.template_togglebox .tb-perms__chev,
.template_togglebox .tb-acc__chev {
    color: var(--color-fg-subtle, #495057);
    transition: transform var(--transition-fast, .15s ease);
}
.template_togglebox .tb-perms__advanced[open] .tb-perms__chev,
.template_togglebox .tb-acc[open] .tb-acc__chev { transform: rotate(180deg); }
.template_togglebox .tb-perms__body { padding: var(--space-5, 20px); }

/* --- Search --- */
.template_togglebox .tb-perms__search {
    position: relative;
    display: block;
    margin-bottom: var(--space-5, 20px);
}
.template_togglebox .tb-perms__search > .material-icons {
    position: absolute;
    left: 12px;
    top: 50%;
    transform: translateY(-50%);
    color: var(--color-fg-muted, #5f676e);
    font-size: var(--icon-size-md, 18px);
    pointer-events: none;
    z-index: 1; /* the input paints an opaque background over earlier siblings */
}
.template_togglebox .tb-perms__search-input { padding-left: 40px; }

/* --- Account-level groups --- */
.template_togglebox .tb-perms__groups { margin-bottom: var(--space-2, 8px); }
.template_togglebox .tb-priv-group {
    padding: var(--space-4, 16px) 0;
    border-top: 1px solid var(--color-border, #dee2e6);
}
.template_togglebox .tb-priv-group:first-child {
    padding-top: 0;
    border-top: 0;
}
.template_togglebox .tb-priv-group__head {
    display: flex;
    align-items: center;
    gap: var(--space-2, 8px);
    margin-bottom: var(--space-3, 12px);
}
.template_togglebox .tb-priv-group__title {
    margin: 0;
    color: var(--color-fg-strong, #111827);
    font-weight: var(--font-weight-600, 600);
    cursor: pointer;
}
.template_togglebox .tb-perms__subtitle {
    margin: var(--space-5, 20px) 0 var(--space-3, 12px);
    font-size: var(--font-size-md, 14px);
    font-weight: var(--font-weight-600, 600);
    color: var(--color-fg-strong, #111827);
}

/* --- Permission grid + items --- */
.template_togglebox .tb-priv-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
    gap: var(--space-2, 8px) var(--space-4, 16px);
}
.template_togglebox .tb-priv-item {
    display: flex;
    align-items: flex-start;
    gap: var(--space-2, 8px);
    min-height: 26px;
}
.template_togglebox .tb-priv-item input[type="checkbox"] {
    flex: 0 0 auto;
    margin-top: 1px;
}

@media (pointer: coarse) {
    .template_togglebox .tb-priv-item {
        align-items: center;
        min-height: var(--touch-target-min);
    }
    .template_togglebox .tb-priv-item input[type="checkbox"] {
        width: 20px;
        height: 20px;
        margin-top: 0;
    }
    .template_togglebox .tb-priv-label {
        align-self: stretch;
        flex: 1 1 auto;
    }
}
.template_togglebox .tb-priv-label {
    display: inline-flex;
    align-items: center;
    flex-wrap: wrap;
    gap: var(--space-2, 8px);
    margin: 0;
    color: var(--color-fg, #212529);
    line-height: var(--line-height-135, 1.35);
    cursor: pointer;
}
/* The chip follows the last word instead of dropping to a line of its own. */
.template_togglebox .tb-priv-label--sensitive {
    display: block;
    align-self: center;
}
.template_togglebox .tb-priv-label--sensitive .tb-sensitive {
    margin-left: var(--space-2);
    vertical-align: 1px;
}
.template_togglebox .tb-priv-item--all {
    margin-bottom: var(--space-2, 8px);
    padding-bottom: var(--space-2, 8px);
    border-bottom: 1px dashed var(--color-border, #dee2e6);
}
.template_togglebox .tb-priv-label--all { font-weight: var(--font-weight-600, 600); }

/* --- Sensitive permission marker (replaces inline color:red) --- */
.template_togglebox .tb-sensitive {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 1px 8px;
    border-radius: var(--radius-pill);
    background: color-mix(in srgb, var(--brand-warning, #f59e0b) 15%, var(--color-bg-elevated, #fff));
    color: var(--color-warning-strong, #92400e);
    font-size: var(--font-size-sm, 12px);
    font-weight: var(--font-weight-600, 600);
    letter-spacing: var(--letter-spacing-030, .03em);
    line-height: 1.5;
    white-space: nowrap;
}
.template_togglebox .tb-sensitive .material-icons { font-size: 13px; }

/* --- Per-service / per-domain accordions --- */
.template_togglebox .tb-acc {
    margin-bottom: var(--space-2, 8px);
    border: 1px solid var(--color-border, #dee2e6);
    border-radius: var(--radius-md);
    background: var(--color-bg-elevated, #fff);
    overflow: hidden;
}
.template_togglebox .tb-acc.has-selected { border-color: var(--brand-primary); }
.template_togglebox .tb-acc__summary {
    display: flex;
    align-items: center;
    gap: var(--space-3, 12px);
    padding: var(--space-3, 12px) var(--space-4, 16px);
    cursor: pointer;
    list-style: none;
    user-select: none;
}

@media (pointer: coarse) {
    .template_togglebox .tb-acc__summary {
        min-height: var(--touch-target-min);
    }
}

.template_togglebox .tb-acc__summary::-webkit-details-marker { display: none; }
.template_togglebox .tb-acc__summary:hover { background: var(--color-surface, #f8f9fa); }
.template_togglebox .tb-acc__summary:focus-visible {
    outline: 2px solid var(--focus-outline);
    outline-offset: -2px;
}
.template_togglebox .tb-acc__title {
    flex: 1 1 auto;
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: var(--space-2, 8px);
    min-width: 0;
}
.template_togglebox .tb-acc__name {
    font-weight: var(--font-weight-500, 500);
    color: var(--color-fg, #212529);
}
.template_togglebox .tb-acc__meta {
    color: var(--color-fg-subtle, #495057);
    font-size: var(--font-size-13, 13px);
}
.template_togglebox .tb-acc__tag {
    padding: 1px 8px;
    border-radius: var(--radius-pill);
    background: var(--badge-label-bg, rgba(41, 167, 230, 0.1));
    color: var(--color-link);
    font-size: var(--font-size-sm, 12px);
    font-weight: var(--font-weight-600, 600);
}
.template_togglebox .tb-acc__id {
    font-family: var(--font-mono);
    font-size: var(--font-size-sm, 12px);
    color: var(--color-fg-muted, #5f676e);
}
.template_togglebox .tb-acc__body {
    padding: var(--space-3, 12px) var(--space-4, 16px) var(--space-4, 16px);
    border-top: 1px solid var(--color-border, #dee2e6);
}

/* --- Product-type groups (built in JS from data-catname) --- */
/* Category groups sit inside the Customize panel, so they are divided sections,
   not cards inside a card. The count pill carries the "has selections" signal. */
.template_togglebox .tb-group {
    border-top: 1px solid var(--color-border, #dee2e6);
}
.template_togglebox .tb-group:last-child { border-bottom: 1px solid var(--color-border, #dee2e6); }
.template_togglebox .tb-group__summary {
    display: flex;
    align-items: center;
    gap: var(--space-3, 12px);
    padding: var(--space-3, 12px) 0;
    cursor: pointer;
    list-style: none;
    user-select: none;
}

@media (pointer: coarse) {
    .template_togglebox .tb-group__summary {
        min-height: var(--touch-target-min);
    }
}

.template_togglebox .tb-group__summary::-webkit-details-marker { display: none; }
.template_togglebox .tb-group__summary:hover { background: var(--color-surface, #f8f9fa); }
.template_togglebox .tb-group__summary:focus-visible {
    outline: 2px solid var(--focus-outline);
    outline-offset: -2px;
}
.template_togglebox .tb-group__name {
    flex: 0 1 auto;
    min-width: 0;
    font-weight: var(--font-weight-600, 600);
    color: var(--color-fg-strong, #111827);
}
.template_togglebox .tb-group__meta {
    flex: 1 1 auto;
    color: var(--color-fg-muted, #5f676e);
    font-size: var(--font-size-13, 13px);
}
.template_togglebox .tb-group__chev {
    color: var(--color-fg-subtle, #495057);
    transition: transform var(--transition-fast, .15s ease);
}
.template_togglebox .tb-group[open] .tb-group__chev { transform: rotate(180deg); }
.template_togglebox .tb-group__body {
    padding: 0 0 var(--space-4, 16px) var(--space-6, 24px);
}
/* Inner accordions become flush rows inside a group — never nested cards. */
.template_togglebox .tb-group__body .tb-acc {
    margin: 0;
    border: 0;
    border-top: 1px solid var(--color-border, #dee2e6);
    border-radius: 0;
    background: transparent;
    overflow: visible;
}
.template_togglebox .tb-group__body .tb-acc:first-of-type { border-top: 0; }
.template_togglebox .tb-group__body .tb-acc.has-selected {
    border-color: var(--color-border, #dee2e6); /* keep row dividers neutral; the count pill signals selection */
}

/* --- Group bulk-apply bar (tri-state, shared perms only; inputs have no name) --- */
/* A plain wrapped list under its disclosure, not a panel inside the group. */
.template_togglebox .tb-group__bulk {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--space-1, 4px) var(--space-4, 16px);
    margin-bottom: var(--space-3, 12px);
    padding: 0 0 0 var(--space-6, 24px);
}
.template_togglebox .tb-bulk {
    display: inline-flex;
    align-items: center;
    gap: var(--space-2, 8px);
    margin: 0;
    color: var(--color-fg, #212529);
    cursor: pointer;
}

@media (pointer: coarse) {
    .template_togglebox .tb-bulk {
        min-height: var(--touch-target-min);
    }
}

.template_togglebox .tb-bulk input[type="checkbox"] {
    flex: 0 0 auto;
    accent-color: var(--brand-primary);
    cursor: pointer;
}


/* --- Role descriptions, legend, current-state line, notes --- */
.template_togglebox .tb-perms__roles .tb-role {
    flex-direction: column;
    align-items: flex-start;
    flex: 1 1 200px;
    max-width: 320px;
    gap: 2px;
    text-align: left;
}
.template_togglebox .tb-role__desc {
    color: var(--color-fg-subtle);
    font-size: var(--font-size-sm);
    font-weight: var(--font-weight-400);
    line-height: var(--line-height-140);
}
.template_togglebox .tb-role__desc:empty { display: none; }
.template_togglebox .tb-role:hover .tb-role__desc { color: inherit; }
.template_togglebox .tb-role[aria-pressed="true"] .tb-role__desc { color: inherit; opacity: .9; }
/* One sentence: the chip reads as the subject of "marks permissions that…". */
.template_togglebox .tb-perms__legend {
    max-width: 80ch;
    margin: 0 0 var(--space-4);
    color: var(--color-fg-subtle);
    font-size: var(--font-size-sm);
    line-height: var(--line-height-140);
}
.template_togglebox .tb-perms__legend .tb-sensitive { margin-right: var(--space-1); }
.template_togglebox .tb-perms__current {
    margin: 0 0 var(--space-4);
    color: var(--color-fg);
    font-size: var(--font-size-md);
}
.template_togglebox .tb-perms__current:empty { display: none; }
.template_togglebox .tb-priv-group__hint,
.template_togglebox .tb-perms__note {
    max-width: 80ch;
    margin: 0 0 var(--space-3);
    color: var(--color-fg-subtle);
    font-size: var(--font-size-sm);
    line-height: var(--line-height-140);
}
.template_togglebox .tb-perms__note {
    display: flex;
    align-items: flex-start;
    gap: var(--space-2);
    margin-top: var(--space-3);
    color: var(--color-fg);
    font-size: var(--font-size-md);
}
.template_togglebox .tb-perms__note .material-icons {
    flex: 0 0 auto;
    color: var(--color-warning-strong);
    font-size: var(--icon-size-md);
}

/* --- Bulk bar disclosure: one line until opened --- */
.template_togglebox .tb-group__bulkwrap { margin-bottom: var(--space-3); }
.template_togglebox .tb-group__bulk-summary {
    display: inline-flex;
    align-items: center;
    gap: var(--space-2);
    padding: var(--space-1) 0;
    color: var(--color-link);
    font-size: var(--font-size-md);
    font-weight: var(--font-weight-600);
    list-style: none;
    cursor: pointer;
}
.template_togglebox .tb-group__bulk-summary::-webkit-details-marker { display: none; }
.template_togglebox .tb-group__bulk-summary .material-icons { font-size: var(--icon-size-md); }
.template_togglebox .tb-group__bulk-summary:focus-visible {
    outline: 2px solid var(--focus-outline);
    outline-offset: 2px;
}
.template_togglebox .tb-group__bulkwrap[open] .tb-group__bulk-summary { margin-bottom: var(--space-2); }
.template_togglebox .tb-group__bulkwrap .tb-group__bulk { margin-bottom: 0; }

@media (pointer: coarse) {
    .template_togglebox .tb-group__bulk-summary { min-height: var(--touch-target-min); }
}

/* --- Contact edit page: header, sections, action bars --- */
.template_togglebox .tb-contact-head .tb-back-link {
    display: inline-flex;
    align-items: center;
    gap: var(--space-1);
    margin-bottom: var(--space-2);
    color: var(--color-link);
    font-size: var(--font-size-md);
}
.template_togglebox .tb-contact-head .tb-back-link .material-icons { font-size: var(--icon-size-md); }
.template_togglebox .tb-contact-head h1 { margin-bottom: var(--space-1); }
.template_togglebox .tb-contact-head__meta {
    margin: 0 0 var(--space-5);
    color: var(--color-fg-subtle);
    font-size: var(--font-size-md);
    overflow-wrap: anywhere;
}
.template_togglebox .tb-form-section + .tb-form-section {
    margin-top: var(--space-6);
    padding-top: var(--space-2);
    border-top: 1px solid var(--color-border);
}
.template_togglebox .tb-form-section__title {
    margin: 0 0 var(--space-4);
    font-size: var(--font-size-18);
    font-weight: var(--font-weight-600);
    line-height: var(--line-height-130);
    color: var(--color-fg-strong);
}
.template_togglebox .tb-form-section__hint {
    margin: 0 0 var(--space-3);
    color: var(--color-fg-subtle);
    font-size: var(--font-size-sm);
    line-height: var(--line-height-140);
}
.template_togglebox .tb-check-row {
    display: grid;
    grid-template-columns: auto 1fr;
    align-items: center;
    column-gap: var(--space-2);
}
.template_togglebox .tb-check-row label { margin: 0; }
.template_togglebox .tb-check-row .tb-form-section__hint { grid-column: 2; margin: 0; }

/* A field the account type hides leaves its grid column behind; drop the column too. */
.template_togglebox .tb-signup-form .row > [class*="col-"]:has(> .d-none) { display: none; }

/* Floated labels: core shrinks them to 70% (~10px); keep them readable. */
.template_togglebox .tb-signup-form .form-label-group.freeze label.form-label-placeholder,
.template_togglebox .tb-signup-form .form-label-group input.form-control:focus ~ label.form-label-placeholder,
.template_togglebox .tb-signup-form .form-label-group select.form-control ~ label.form-label-placeholder {
    font-size: var(--font-size-sm);
}

.template_togglebox .tb-form-actions {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-3) var(--space-4);
    margin-top: var(--space-5);
}
.template_togglebox .tb-form-actions--inline { justify-content: flex-end; }
.template_togglebox .tb-form-actions--sticky {
    position: sticky;
    bottom: 0;
    z-index: var(--z-sticky);
    margin-left: calc(var(--space-4) * -1);
    margin-right: calc(var(--space-4) * -1);
    padding: var(--space-3) var(--space-4);
    border-top: 1px solid var(--color-border);
    background: var(--color-bg-elevated);
    box-shadow: var(--shadow-sticky);
}
.template_togglebox .tb-form-actions__status {
    display: flex;
    flex: 1 1 260px;
    flex-direction: column;
    gap: var(--space-1);
    min-width: 0;
}
.template_togglebox .tb-form-actions__diff {
    color: var(--color-fg-subtle);
    font-size: var(--font-size-md);
}
.template_togglebox .tb-form-actions.is-dirty .tb-form-actions__diff {
    color: var(--color-fg-strong);
    font-weight: var(--font-weight-600);
}
.template_togglebox .tb-form-actions__sensitive { color: var(--color-warning-strong); }
.template_togglebox .tb-form-actions__errors {
    color: var(--color-danger-strong);
    font-size: var(--font-size-md);
    line-height: var(--line-height-140);
}
.template_togglebox .tb-form-actions--inline .tb-form-actions__errors { flex: 1 1 260px; }
.template_togglebox .tb-form-section__errors { margin: 0 0 var(--space-4); }
.template_togglebox .tb-form-actions__diffline {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: 0 var(--space-3);
}
.template_togglebox .tb-form-actions__review {
    padding: 0;
    border: 0;
    font-size: var(--font-size-md);
    font-weight: var(--font-weight-600);
    vertical-align: baseline;
}

/* Unsaved permission changes, opened from the sticky bar's "Review". */
.template_togglebox .tb-perms-review {
    flex: 1 1 100%;
    max-height: min(40vh, 320px);
    overflow-y: auto;
    padding-bottom: var(--space-3);
    border-bottom: 1px solid var(--color-border);
}
.template_togglebox .tb-perms-review__place {
    margin: var(--space-3) 0 var(--space-1);
    color: var(--color-fg-strong);
    font-size: var(--font-size-md);
    font-weight: var(--font-weight-600);
}
.template_togglebox .tb-perms-review__place:first-child { margin-top: 0; }
.template_togglebox .tb-perms-review__list {
    margin: 0;
    padding: 0;
    list-style: none;
}
.template_togglebox .tb-perms-review__item {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--space-1) var(--space-2);
    padding: 2px 0;
    font-size: var(--font-size-md);
}
.template_togglebox .tb-perms-review__item .material-icons { font-size: var(--icon-size-md); }
.template_togglebox .tb-perms-review__item.is-added .material-icons { color: var(--color-success-strong); }
.template_togglebox .tb-perms-review__item.is-removed .material-icons { color: var(--color-danger-strong); }
.template_togglebox .tb-perms-review__item.is-removed .tb-perms-review__label { text-decoration: line-through; }

/* --- Contact edit: fields grouped under headings (contact-edit.js) --- */
.template_togglebox .tb-fieldset {
    min-width: 0;
    margin: 0 0 var(--space-4);
    padding: 0;
    border: 0;
}
.template_togglebox .tb-fieldset__legend {
    width: auto;
    margin: 0 0 var(--space-2);
    color: var(--color-fg-strong);
    font-size: var(--font-size-md);
    font-weight: var(--font-weight-600);
    line-height: var(--line-height-130);
}

/* One label style: every label sits above its field, as the phone fields' do. */
.template_togglebox form[data-tb-contact-split] .tb-signup-form .form-label-group {
    display: flex;
    flex-direction: column;
}
.template_togglebox form[data-tb-contact-split] .tb-signup-form .form-label-group label.form-label-placeholder {
    position: static;
    order: -1;
    width: auto;
    margin-bottom: 6px;
    padding: 0;
    font-size: var(--font-size-md);
    font-weight: var(--font-weight-500);
    pointer-events: auto;
    cursor: default;
}
.template_togglebox form[data-tb-contact-split] .tb-signup-form .form-label-group .form-control {
    padding-top: .375rem;
    padding-bottom: .375rem;
}

.template_togglebox .tb-pw { margin-top: var(--space-1); }
.template_togglebox .tb-pw__summary {
    display: inline-flex;
    align-items: center;
    gap: var(--space-1);
    min-height: var(--touch-target-min);
    color: var(--color-link);
    font-size: var(--font-size-md);
    font-weight: var(--font-weight-600);
    list-style: none;
    cursor: pointer;
}
.template_togglebox .tb-pw__summary::-webkit-details-marker { display: none; }
.template_togglebox .tb-pw__chev { font-size: var(--icon-size-md); transition: transform var(--transition-fast); }
.template_togglebox .tb-pw[open] .tb-pw__chev { transform: rotate(180deg); }
.template_togglebox .tb-pw__summary:focus-visible {
    outline: 2px solid var(--focus-outline);
    outline-offset: 2px;
}
.template_togglebox .tb-pw > .row { margin-top: var(--space-2); }
.template_togglebox .tb-pw .tb-form-section__hint { margin-top: calc(var(--space-2) * -1); }

/* --- Contact edit: team membership (one field in the contact grid) --- */
.template_togglebox .tb-teams { margin-bottom: var(--space-4); }
.template_togglebox .tb-teams__title {
    display: block;
    margin-bottom: var(--space-1);
    font-weight: var(--font-weight-600);
    color: var(--color-fg-strong);
}
.template_togglebox .tb-teams__status {
    margin: 0;
    color: var(--color-fg-subtle);
    font-size: var(--font-size-md);
}
.template_togglebox .tb-teams__chips {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-2);
    margin: 0 0 var(--space-2);
    padding: 0;
    list-style: none;
}
.template_togglebox .tb-team-chip {
    display: inline-flex;
    align-items: center;
    gap: var(--space-1);
    padding: 2px var(--space-1) 2px var(--space-3);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-pill);
    font-size: var(--font-size-md);
}
.template_togglebox .tb-team-chip.is-adding { border-color: var(--brand-primary); }
.template_togglebox .tb-team-chip.is-removing .tb-team-chip__name { text-decoration: line-through; }
.template_togglebox .tb-team-chip__name { font-weight: var(--font-weight-600); }
.template_togglebox .tb-team-chip__note {
    padding-right: var(--space-2);
    color: var(--color-fg-subtle);
    font-size: var(--font-size-sm);
}
.template_togglebox .tb-team-chip.is-adding .tb-team-chip__note,
.template_togglebox .tb-team-chip.is-removing .tb-team-chip__note { padding-right: 0; }
.template_togglebox .tb-team-chip__btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 24px;
    min-height: 24px;
    padding: 0 var(--space-2);
    border: 0;
    border-radius: var(--radius-pill);
    background: transparent;
    color: var(--color-link);
    font-size: var(--font-size-sm);
    cursor: pointer;
}
.template_togglebox .tb-team-chip__btn--icon { padding: 0; color: var(--color-fg-subtle); }
.template_togglebox .tb-team-chip__btn .material-icons { font-size: 16px; }
.template_togglebox .tb-team-chip__btn:hover { background: var(--color-surface); color: var(--color-fg-strong); }
.template_togglebox .tb-team-chip__btn:focus-visible {
    outline: 2px solid var(--focus-outline);
    outline-offset: 1px;
}
.template_togglebox .tb-teams__add {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--space-2) var(--space-3);
}
.template_togglebox .tb-teams__add select { flex: 0 1 240px; }
.template_togglebox .tb-teams__new { font-size: var(--font-size-sm); }
.template_togglebox .tb-teams__hint {
    margin: 0 0 var(--space-2);
    color: var(--color-fg-subtle);
    font-size: var(--font-size-sm);
    line-height: var(--line-height-140);
}

@media (pointer: coarse) {
    .template_togglebox .tb-team-chip__btn { min-width: var(--touch-target-min); min-height: var(--touch-target-min); }
}

.template_togglebox .tb-error-link {
    padding: 0;
    border: 0;
    color: inherit;
    font-size: inherit;
    font-weight: var(--font-weight-600);
    text-decoration: underline;
    vertical-align: baseline;
}
.template_togglebox .tb-form-actions .btn-outline-secondary {
    border-color: var(--color-border-strong);
    color: var(--color-fg);
}
.template_togglebox .tb-form-actions__buttons {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-2);
    margin-left: auto;
}

/* --- Mobile --- */
@media (max-width: 767px) {
    .template_togglebox .tb-perms__roles .tb-role { max-width: none; }
    .template_togglebox .tb-form-actions__buttons { width: 100%; }
    .template_togglebox .tb-form-actions__buttons .btn { flex: 1 1 0; min-height: var(--touch-target-min); }
    .template_togglebox .tb-perms__body { padding: var(--space-4, 16px); }
    .template_togglebox .tb-role { flex: 1 1 auto; justify-content: center; }
    .template_togglebox .tb-group__body { padding: 0 0 var(--space-3, 12px) var(--space-3, 12px); }
    .template_togglebox .tb-group__bulk { gap: var(--space-1, 4px) var(--space-3, 12px); padding-left: var(--space-3, 12px); }
    .template_togglebox .tb-bulk { flex: 1 0 45%; } /* two-up so each stays an easy tap target */
}

@media (prefers-reduced-motion: reduce) {
    .template_togglebox .tb-role,
    .template_togglebox .tb-perms__chev,
    .template_togglebox .tb-acc__chev,
    .template_togglebox .tb-group__chev { transition: none; }
}

/* Skip link — visually hidden until keyboard focus, then pinned top-left above all chrome */
.tb-skip-link {
    position: absolute;
    left: -9999px;
    top: auto;
    overflow: hidden;
}

.tb-skip-link:focus {
    position: fixed;
    left: 12px;
    top: 12px;
    z-index: 2147480001;
    padding: 10px 16px;
    border-radius: var(--radius-md);
    background: var(--surface-card, var(--color-bg, #fff));
    color: var(--color-fg-strong, #1f2937);
    border: 2px solid var(--brand-primary);
    box-shadow: var(--shadow-lg, 0 8px 24px rgba(0, 0, 0, 0.18));
    text-decoration: none;
    font-weight: var(--font-weight-600, 600);
}

/* The skip-link target shouldn't show a focus ring when jumped to */
#main-content:focus {
    outline: none;
}

/* Accessibility hardening for theme templates (was dist/css/theme-a11y.css,
   a separate request loaded right after this file; same cascade position).
   Colours come from theme-variables.css tokens, which carry the dark values. */

/* Controls whose native input is visually hidden show keyboard focus on the
   visible wrapper: the ticket attachment button and the 3-point rating faces. */
.template_togglebox .fileinput-button:has(input:focus-visible),
.template_togglebox .rating .rating-icon:has(input:focus-visible) {
  outline: 2px solid var(--focus-outline);
  outline-offset: 2px;
  border-radius: 4px;
}

/* Invoices (clientarea/invoices.tpl): a "Needs payment" table above the full
   history, each under a heading row that carries its own actions. */
.template_togglebox .tb-inv-head {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  justify-content: space-between;
  gap: var(--space-3, 12px) var(--space-4, 16px);
  margin: var(--space-6, 24px) 0 var(--space-3, 12px);
}

.template_togglebox .tb-inv-head__text {
  min-width: 0;
}

.template_togglebox .tb-inv-head__title {
  margin: 0;
  font-size: var(--font-size-18, 18px);
  font-weight: var(--font-weight-600, 600);
  line-height: 1.3;
  color: var(--color-fg-strong);
}

.template_togglebox .tb-inv-head__note {
  margin: var(--space-1, 4px) 0 0;
  max-width: 65ch;
  font-size: var(--font-size-14, 14px);
  color: var(--color-fg-muted);
}

.template_togglebox .tb-inv-head__note strong {
  color: var(--color-fg-strong);
}

.template_togglebox .tb-inv-head__actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-2, 8px);
}

.template_togglebox .tb-inv-head__actions .btn .material-icons {
  vertical-align: -3px;
}

/* "Needs payment" lists unpaid invoices only, so "Date paid" never applies. */
.template_togglebox .tb-inv-due-table .tb-inv-paid {
  display: none !important;
}

.template_togglebox .tb-inv-row--overdue .tb-inv-total {
  font-weight: var(--font-weight-600, 600);
  color: var(--color-fg-strong);
}

/* Merged into another invoice: its balance is carried there, so the row
   reads as reference, not as a second amount to pay. */
.template_togglebox .tb-inv-row--merged td {
  color: var(--color-fg-muted);
}

.template_togglebox .tb-inv-row--merged .tb-inv-total {
  text-decoration: line-through;
}

.template_togglebox .tb-inv-merged {
  text-decoration: none;
}

.template_togglebox .tb-inv-merged:hover,
.template_togglebox .tb-inv-merged:focus-visible {
  text-decoration: underline;
}

/* The checkbox is the theme's native control (slick-defaults.css); the label
   only adds hit area around it. */
.template_togglebox .tb-inv-check {
  display: inline-flex;
  align-items: center;
  margin: 0;
  cursor: pointer;
}

.template_togglebox .section-invoices {
  padding-bottom: var(--chat-widget-clearance);
}

@media (max-width: 767px) {
  /* Stacked-row labels: compiled app.css paints them $gray-500 (2.1:1). */
  .template_togglebox .table.stackable:not(.table-responsive) tbody td::before {
    color: var(--color-fg-muted);
  }

  /* Sort headers wrap as one row of chips instead of one line each. The
     selector matches the compiled stackable rule's :not() specificity. */
  .template_togglebox .tb-inv-all-table.stackable:not(.table-responsive) thead tr:not(.hidden),
  .template_togglebox .tb-inv-due-table.stackable:not(.table-responsive) thead tr:not(.hidden) {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0 var(--space-4, 16px);
  }

  .template_togglebox .tb-inv-all-table.stackable thead th {
    padding: var(--space-2, 8px) 0;
  }

  /* "Needs payment" has no sort links: its header keeps only select-all. */
  .template_togglebox .tb-inv-all-table.stackable thead th.tb-inv-th-plain,
  .template_togglebox .tb-inv-due-table.stackable thead th:not(.tb-inv-select) {
    display: none !important;
  }

  /* 44px touch targets for the row checkbox and invoice link. */
  .template_togglebox .tb-inv-check {
    justify-content: center;
    min-width: 44px;
    min-height: 44px;
    margin: -10px 0 -10px -10px;
  }

  .template_togglebox .invoices-table .tb-inv-link {
    display: inline-flex;
    align-items: center;
    min-height: 44px;
    margin: -10px 0;
    padding: 0 var(--space-2, 8px);
  }
}

/* ===========================================
   Support tickets (support/*.tpl, ajax.tickets.tpl, js/tickets.js)
   =========================================== */

/* Page head shared by the list and the new-ticket form. */
.template_togglebox .tb-tk-head {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  justify-content: space-between;
  gap: var(--space-3) var(--space-4);
  margin: 0 0 var(--space-6);
}

.template_togglebox .tb-tk-head__text {
  min-width: 0;
}

.template_togglebox .tb-tk-head__title {
  margin: 0;
}

.template_togglebox .tb-tk-head__lede {
  max-width: var(--measure-prose);
  margin: var(--space-2) 0 0;
  font-size: var(--font-size-16);
  color: var(--color-fg-muted);
}

.template_togglebox .tb-tk-head__actions .btn,
.template_togglebox .tb-tk-view__actions .btn,
.template_togglebox .tb-tk-composer__actions .btn,
.template_togglebox .tb-tk-actions .btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
}

.template_togglebox .tb-tk-back {
  display: inline-flex;
  align-items: center;
  gap: var(--space-1);
  min-height: 32px;
  margin-bottom: var(--space-2);
  font-size: var(--font-size-14);
  font-weight: var(--font-weight-500);
}

/* List: filters and search on one row, wrapping on narrow screens. */
.template_togglebox .tb-tk-toolbar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-3) var(--space-4);
  margin-bottom: var(--space-4);
}

.template_togglebox .tb-tk-toolbar .slick-filter-tabs {
  margin: 0;
}

.template_togglebox .tb-tk-search {
  position: relative;
  flex: 0 1 280px;
  min-width: 200px;
}

.template_togglebox .tb-tk-search .form-control {
  padding-left: 36px;
}

.template_togglebox .tb-tk-search__icon {
  position: absolute;
  top: 50%;
  left: 10px;
  font-size: 20px;
  color: var(--color-fg-muted);
  z-index: 1;
  pointer-events: none;
  transform: translateY(-50%);
}

.template_togglebox .tb-tk-table thead th {
  white-space: nowrap;
}

/* The subject link stretches over its row: one tab stop, one tap target. */
.template_togglebox .tb-tk-table tbody tr.tb-tk-row {
  position: relative;
}

.template_togglebox .tb-tk-table .tb-tk-link {
  font-weight: var(--font-weight-500);
}

.template_togglebox .tb-tk-table .tb-tk-link::after {
  position: absolute;
  inset: 0;
  content: "";
}

.template_togglebox .tb-tk-table .tb-tk-link:focus-visible {
  outline: none;
}

.template_togglebox .tb-tk-table .tb-tk-link:focus-visible::after {
  outline: var(--focus-outline-width, 2px) solid var(--focus-outline);
  outline-offset: var(--focus-outline-offset-inset, -2px);
}

.template_togglebox .tb-tk-table .tb-tk-num,
.template_togglebox .tb-tk-table .tb-tk-when {
  color: var(--color-fg-muted);
  white-space: nowrap;
}

.template_togglebox .tb-tk-table tr.tb-tk-row--attention .tb-tk-link {
  font-weight: var(--font-weight-600);
}

.template_togglebox .tb-tk-table tr.tb-tk-empty td {
  background: transparent;
}

/* Status badges keep one line; "Awaiting your reply" is the longest. */
.template_togglebox .tb-tk-status {
  white-space: nowrap;
}

/* New-ticket form */
.template_togglebox .tb-tk-form {
  max-width: 760px;
}

.template_togglebox .tb-tk-dept-note {
  max-width: var(--measure-prose);
  margin: 0 0 var(--space-4);
  font-size: var(--font-size-14);
  color: var(--color-fg-muted);
}

.template_togglebox .tb-tk-form .form-text,
.template_togglebox .tb-tk-service .form-text {
  color: var(--color-fg-muted);
}

.template_togglebox .tb-tk-check {
  display: grid;
  grid-template-columns: auto 1fr;
  column-gap: var(--space-2);
  align-items: start;
  padding-left: 0;
  margin: var(--space-3) 0;
}

.template_togglebox .tb-tk-check input {
  position: static;
  margin: 3px 0 0;
}

.template_togglebox .tb-tk-check label {
  margin: 0;
}

.template_togglebox .tb-tk-check .form-text {
  grid-column: 2;
  margin-top: 2px;
}

.template_togglebox .tb-tk-more {
  margin: var(--space-4) 0;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
}

.template_togglebox .tb-tk-more__summary {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 0 var(--space-2);
  min-height: 44px;
  padding: var(--space-3) var(--space-4);
  font-weight: var(--font-weight-500);
  color: var(--color-fg-strong);
  cursor: pointer;
  list-style: none;
}

.template_togglebox .tb-tk-more__summary::-webkit-details-marker {
  display: none;
}

.template_togglebox .tb-tk-more__summary::before {
  font-family: "Material Icons";
  font-size: 20px;
  line-height: 1;
  content: "chevron_right";
  align-self: center;
  transition: transform var(--motion-fast, .15s) ease;
}

.template_togglebox .tb-tk-more[open] > .tb-tk-more__summary::before {
  transform: rotate(90deg);
}

.template_togglebox .tb-tk-more__summary:focus-visible {
  outline: var(--focus-outline-width, 2px) solid var(--focus-outline);
  outline-offset: var(--focus-outline-offset-inset, -2px);
  border-radius: var(--radius-lg);
}

.template_togglebox .tb-tk-more__hint {
  font-size: var(--font-size-13);
  font-weight: normal;
  color: var(--color-fg-muted);
}

.template_togglebox .tb-tk-more__body {
  padding: 0 var(--space-4) var(--space-2);
}

.template_togglebox .tb-tk-actions {
  margin-top: var(--space-5);
}

/* Attachments: a visible verb, not a lone paperclip. */
.template_togglebox .tb-tk-attach.fileupload {
  margin: var(--space-4) 0;
  padding: 0;
  border: 0;
}

.template_togglebox .tb-tk-attach__label {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-1) var(--space-2);
  min-height: 44px;
  margin: 0;
  padding: var(--space-2) var(--space-3);
  border: 1px dashed var(--input-border);
  border-radius: var(--radius-lg);
  color: var(--color-fg);
  cursor: pointer;
}

.template_togglebox .tb-tk-attach__label:hover {
  border-color: var(--color-primary-fill);
}

.template_togglebox .tb-tk-attach__button input:focus-visible + .tb-tk-attach__label {
  outline: var(--focus-outline-width, 2px) solid var(--focus-outline);
  outline-offset: var(--focus-outline-offset, 2px);
}

.template_togglebox .tb-tk-attach__verb {
  font-weight: var(--font-weight-500);
  color: var(--color-fg-strong);
}

.template_togglebox .tb-tk-attach__hint {
  font-size: var(--font-size-13);
  color: var(--color-fg-muted);
}

/* Ticket view */
.template_togglebox .tb-tk-view__head {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;
  justify-content: space-between;
  gap: var(--space-3) var(--space-6);
  margin-bottom: var(--space-4);
}

.template_togglebox .tb-tk-view__heading {
  flex: 1 1 420px;
  min-width: 0;
}

.template_togglebox .tb-tk-view__title {
  margin: 0 0 var(--space-2);
  font-size: var(--font-size-24);
  line-height: 1.3;
  overflow-wrap: anywhere;
}

.template_togglebox .tb-tk-view__num {
  font-weight: normal;
  color: var(--color-fg-muted);
}

.template_togglebox .tb-tk-meta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-1) var(--space-3);
  margin: 0;
  padding: 0;
  font-size: var(--font-size-14);
  color: var(--color-fg-muted);
  list-style: none;
}

.template_togglebox .tb-tk-meta li + li::before {
  margin-right: var(--space-3);
  content: "·";
  color: var(--color-fg-subtle);
}

.template_togglebox .tb-tk-meta li:nth-child(2)::before {
  content: none;
}

.template_togglebox .tb-tk-view__actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-2);
}

.template_togglebox .tb-tk-view__actions form {
  margin: 0;
}

.template_togglebox .tb-tk-turn {
  margin-bottom: var(--space-5);
}

/* Thread */
.template_togglebox .tb-tk-msg:focus-visible {
  outline: var(--focus-outline-width, 2px) solid var(--focus-outline);
  outline-offset: var(--focus-outline-offset, 2px);
}

.template_togglebox .tb-tk-msg:focus:not(:focus-visible) {
  outline: none;
}

.template_togglebox .tb-tk-msg__who {
  display: flex;
  flex-direction: column;
  min-width: 0;
}

.template_togglebox .tb-tk-msg__author {
  margin: 0;
  font-size: var(--font-size-14);
  font-weight: var(--font-weight-600);
  line-height: 1.3;
  color: var(--color-fg-strong);
}

.template_togglebox .tb-tk-msg__role {
  font-size: var(--font-size-12);
  color: var(--color-fg-muted);
}

.template_togglebox .tb-tk-msg__main {
  min-width: 0;
}

.template_togglebox .tb-tk-msg__body {
  margin: 0;
  overflow-wrap: anywhere;
}

.template_togglebox .section-tickets .tb-tk-msg__foot .comment-date {
  font-size: var(--font-size-13);
}

.template_togglebox .tb-tk-quote {
  align-self: flex-start;
  color: var(--color-fg-muted);
}

.template_togglebox .tb-tk-fold {
  display: flex;
  align-items: center;
  gap: var(--space-1);
  margin: 0 auto var(--space-5);
}

/* Reply composer */
.template_togglebox .tb-tk-composer {
  margin-top: var(--space-6);
  scroll-margin-top: 96px;
}

.template_togglebox .tb-tk-composer__title {
  margin: 0;
  font-size: var(--font-size-16);
  font-weight: var(--font-weight-600);
}

.template_togglebox .tb-tk-composer__title label {
  margin: 0;
}

.template_togglebox .tb-tk-composer__actions {
  display: flex;
  justify-content: flex-start;
  margin-top: var(--space-4);
}

.template_togglebox .tb-tk-msg,
.template_togglebox .tb-tk-thread .tb-tk-fold {
  scroll-margin-top: 96px;
}

.template_togglebox .tb-rel-time {
  white-space: nowrap;
}

@media (max-width: 767px) {
  /* Phone rows read as cards: number and status, the subject, then the last
     update. The selectors outrank the compiled stackable rules. */
  .template_togglebox .tb-tk-table.stackable:not(.table-responsive) tbody tr.tb-tk-row {
    display: grid !important;
    grid-template-areas:
      "num state"
      "subject subject"
      "when when";
    grid-template-columns: 1fr auto;
    gap: var(--space-1) var(--space-3);
    align-items: center;
    padding: var(--space-3) var(--space-4);
    border-bottom: 1px solid var(--color-border);
  }

  .template_togglebox .tb-tk-table.stackable:not(.table-responsive) tbody tr.tb-tk-row > td {
    float: none;
    padding: 0;
    border: 0;
    background: transparent;
  }

  .template_togglebox .tb-tk-table.stackable:not(.table-responsive) tbody tr.tb-tk-row > td.tb-tk-num { grid-area: num; }
  .template_togglebox .tb-tk-table.stackable:not(.table-responsive) tbody tr.tb-tk-row > td.tb-tk-state { grid-area: state; }
  .template_togglebox .tb-tk-table.stackable:not(.table-responsive) tbody tr.tb-tk-row > td.tb-tk-subject { grid-area: subject; }
  .template_togglebox .tb-tk-table.stackable:not(.table-responsive) tbody tr.tb-tk-row > td.tb-tk-when { grid-area: when; }

  .template_togglebox .tb-tk-table.stackable:not(.table-responsive) thead tr:not(.hidden) {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0 var(--space-4);
  }

  .template_togglebox .tb-tk-table.stackable:not(.table-responsive) thead th {
    padding: var(--space-2) 0;
  }

  /* Last update has no sort link; on a phone it is in every card already. */
  .template_togglebox .tb-tk-table.stackable:not(.table-responsive) thead th:not(:has(a)) {
    display: none !important;
  }

  .template_togglebox .tb-tk-head__actions,
  .template_togglebox .tb-tk-head__actions .btn,
  .template_togglebox .tb-tk-search {
    flex: 1 1 100%;
    width: 100%;
  }

  .template_togglebox .tb-tk-view__actions {
    width: 100%;
  }

  /* The turn notice stacks its title over the message instead of squeezing
     the title into a narrow column. */
  .template_togglebox .tb-tk-turn.oneb-alert {
    flex-direction: column;
    gap: var(--space-1);
  }

  /* Meta items wrap onto new lines on a phone, where a leading dot reads as a bullet. */
  .template_togglebox .tb-tk-meta li + li::before {
    content: none;
  }

  .template_togglebox .tb-tk-view__actions > .btn,
  .template_togglebox .tb-tk-view__actions > form {
    flex: 1 1 auto;
  }

  .template_togglebox .tb-tk-view__actions > form .btn {
    width: 100%;
  }

  .template_togglebox .tb-tk-composer__actions .btn {
    width: 100%;
  }
}

@media (pointer: coarse) {
  .template_togglebox .tb-tk-view__actions .btn,
  .template_togglebox .tb-tk-head__actions .btn,
  .template_togglebox .tb-tk-composer__actions .btn,
  .template_togglebox .tb-tk-actions .btn,
  .template_togglebox .tb-tk-back,
  .template_togglebox .tb-tk-fold {
    min-height: var(--touch-target-min);
  }
}