/* ==========================================================================
   cloudeBond - project overrides on top of the Velzon theme.
   Keep this file small: prefer theme variables over ad-hoc CSS so all nine
   appearance presets keep working.
   ========================================================================== */

/* Theme settings launcher: fixed to the right edge, above page content but
   below modals. Velzon styles .customizer-setting but only inside its own demo
   layout, so the positioning is pinned here. */
.customizer-setting {
    position: fixed;
    right: 0;
    bottom: 90px;
    width: 40px;
    height: 40px;
    border-top-right-radius: 0;
    border-bottom-right-radius: 0;
    z-index: 1030;
    box-shadow: 0 3px 10px rgba(0, 0, 0, .2);
}

.cb-theme-panel { width: 24rem; max-width: 92vw; }
.cb-theme-panel .offcanvas-footer { background: var(--vz-card-bg); }
.cb-preset-btn { line-height: 1.15; }
.cb-preset-btn i { opacity: .85; }

/* Colour / image swatches in the theme panel. A gradient cannot be described by
   a button label, so sidebar gradients and images are chosen by sight. */
.cb-swatch {
    width: 1.75rem; height: 1.75rem; padding: 2px; cursor: pointer;
    border: 2px solid transparent; overflow: hidden; flex: 0 0 auto;
    transition: border-color .15s ease-in-out, transform .15s ease-in-out;
}
.cb-swatch:hover { transform: scale(1.08); }
.cb-swatch-on { border-color: var(--vz-primary); }
.cb-swatch-img { width: 2.25rem; height: 2.25rem; border-radius: .375rem; background: var(--vz-light); }
.btn-check:checked + .cb-swatch { border-color: var(--vz-primary); }

/* Checkbox tree-view (Role Menu Mapping, user Menu Details).
   Velzon ships no treeview, so this is ours. */
.cb-tree { list-style: none; padding-left: 0; margin-bottom: 0; }
.cb-tree ul { list-style: none; padding-left: 1.5rem; margin: .25rem 0 0; border-left: 1px dashed var(--vz-border-color); }
.cb-tree li { padding: .15rem 0; }
.cb-tree .cb-tree-toggle { cursor: pointer; width: 1.1rem; display: inline-block; color: var(--vz-secondary-color); }
.cb-tree .cb-tree-label { cursor: pointer; user-select: none; }
.cb-tree li.cb-ineligible > .cb-tree-row { opacity: .45; }

/* Authorization grid: keep the menu column visible while scrolling wide. */
.cb-auth-grid th:first-child,
.cb-auth-grid td:first-child { position: sticky; left: 0; background: var(--vz-card-bg); z-index: 2; }

/* View is implied by every other right: while something depends on it, the box
   is ringed so it reads as "held by the rest of the row", not as a free choice.
   Deliberately NOT `disabled` - clearing View is how you clear the whole row. */
.form-check-input.cb-view-implied {
    box-shadow: 0 0 0 .18rem rgba(var(--vz-warning-rgb), .35);
    border-color: rgba(var(--vz-warning-rgb), .8);
}

/* Live filter over a card's list-group (Geography's four cascading columns).

   !important is REQUIRED here, not sloppiness. The rows being hidden carry
   Bootstrap's .d-flex, which is `display: flex !important` - a plain
   `display: none` loses to it, so the JS ran, the match counter updated, and
   not one row actually disappeared. Any rule that hides an element carrying a
   Bootstrap display utility has to out-rank that utility. */
.cb-filter-empty { display: none !important; }
.cb-filter-none { padding: .75rem; font-size: .8125rem; }

/* Lead activity timeline. Velzon ships no vertical timeline, so this is ours.
   A left rail with a status dot per entry, and system-written entries dimmed so
   "Status changed to Qualified" does not compete with a real call note. */
.cb-timeline { position: relative; padding-left: 1.75rem; }
.cb-timeline::before {
    content: ""; position: absolute; left: .45rem; top: .35rem; bottom: .35rem;
    width: 2px; background: var(--vz-border-color);
}
.cb-timeline-item { position: relative; padding-bottom: 1.1rem; }
.cb-timeline-item:last-child { padding-bottom: 0; }
.cb-timeline-dot {
    position: absolute; left: -1.55rem; top: .35rem;
    width: .7rem; height: .7rem; border-radius: 50%;
    box-shadow: 0 0 0 3px var(--vz-card-bg);
}
.cb-timeline-system .cb-timeline-body { opacity: .68; }
.cb-timeline-system .cb-timeline-dot { background: var(--vz-secondary-color) !important; }

/* Duplicate merge: the two candidates side by side, with the chosen value
   highlighted per field. */
.cb-merge-pick { cursor: pointer; }
.cb-merge-pick input:checked + span { font-weight: 600; }
.cb-merge-col-a { border-left: 3px solid rgba(var(--vz-primary-rgb), .5); }
.cb-merge-col-b { border-left: 3px solid rgba(var(--vz-warning-rgb), .5); }

/* Data grids collapse to cards below md, per the responsive rule. */
@media (max-width: 767.98px) {
    .cb-grid-responsive thead { display: none; }
    .cb-grid-responsive tbody tr {
        display: block; margin-bottom: .75rem;
        border: 1px solid var(--vz-border-color); border-radius: .375rem; padding: .5rem;
    }
    .cb-grid-responsive tbody td { display: flex; justify-content: space-between; border: 0; padding: .35rem .25rem; }
    .cb-grid-responsive tbody td::before {
        content: attr(data-label); font-weight: 600; color: var(--vz-secondary-color); margin-right: 1rem;
    }
}

/* ==========================================================================
   SIDEBAR MENU LEGIBILITY
   Author : Vidhya Malve
   Created: 09 Aug 2026   Updated: 09 Aug 2026
   --------------------------------------------------------------------------
   The rule that renders every sidebar link is, in app.min.css:

       .navbar-menu .navbar-nav .nav-link { color: var(--vz-vertical-menu-item-color); ... }

   so the colour is NOT hard-coded there - it comes from a custom property the
   theme sets per sidebar variant. That is why this override lives here and
   changes the VARIABLE rather than editing app.min.css: the minified file is
   vendor output and is replaced wholesale by any Velzon update, which would
   silently undo the change and leave nobody with a clue why the menu went pale
   again. Setting the variable also keeps all nine appearance presets working,
   because each one reads the same property.

   The shipped values were too faint to read comfortably:

       light sidebar  #6d7080 on #ffffff  = 4.6:1   (bare minimum for AA)
       dark  sidebar  #A4AAC7 on #2a2f34  = 6.1:1
       "brand" preset #abb9e8 on indigo   = 4.9:1

   Raised so ordinary items are comfortable and the ACTIVE item is unmistakably
   the current page rather than merely a slightly different grey.
   ========================================================================== */

/* Light sidebar - the default. #495057 is Bootstrap's gray-700: 8.6:1 on
   white, which is AAA for body text rather than scraping AA. */
:root,
[data-sidebar="light"] {
    --vz-vertical-menu-item-color: #495057;
    --vz-vertical-menu-item-hover-color: var(--vz-primary);
    --vz-vertical-menu-item-active-color: var(--vz-primary);
    --vz-vertical-menu-sub-item-color: #5b6570;
    --vz-vertical-menu-sub-item-hover-color: var(--vz-primary);
    --vz-vertical-menu-sub-item-active-color: var(--vz-primary);
}

/* Dark and brand sidebars: lift the text towards white instead of sitting in
   the mid-greys where thin weights disappear on a small screen.

   NOTE THE SELECTOR. The theme sets this variable with TWO attribute
   selectors - [data-theme=default][data-sidebar=dark] - which is specificity
   (0,2,0). A plain [data-sidebar="dark"] is (0,1,0) and loses no matter how
   late this file is loaded, which is precisely what the first attempt did:
   the light sidebar went to AAA and the dark one did not move at all.
   Measured, not assumed - 3.93:1, still failing AA.

   :root adds a pseudo-class, so :root[data-theme][data-sidebar="dark"] is
   (0,3,0) and wins outright without resorting to !important. [data-theme]
   unqualified matches whichever of the nine presets is active. */
:root[data-theme][data-sidebar="dark"],
:root[data-theme][data-sidebar="brand"],
:root[data-theme][data-sidebar="modern"],
:root[data-theme][data-layout-mode="dark"] {
    --vz-vertical-menu-item-color: #dfe3ee;
    --vz-vertical-menu-item-hover-color: #ffffff;
    --vz-vertical-menu-item-active-color: #ffffff;
    --vz-vertical-menu-sub-item-color: #c9d0e4;
    --vz-vertical-menu-sub-item-hover-color: #ffffff;
    --vz-vertical-menu-sub-item-active-color: #ffffff;
}

/* Weight, not just colour. The active item was distinguishable only by a hue
   shift, which is exactly what a colour-blind user cannot see - so it now
   carries a second, non-colour signal. */
.navbar-menu .navbar-nav .nav-link.active,
.navbar-menu .navbar-nav .nav-link[aria-expanded="true"] {
    font-weight: 600;
}

/* The horizontal layout puts the menu in the topbar, where the bar is dark and
   the same variable would make it unreadable. Scoped separately for that
   reason rather than folded into the block above. */
[data-layout="horizontal"] .navbar-menu .navbar-nav > .nav-item > .nav-link {
    color: rgba(255, 255, 255, .85);
}

[data-layout="horizontal"] .navbar-menu .navbar-nav > .nav-item > .nav-link:hover,
[data-layout="horizontal"] .navbar-menu .navbar-nav > .nav-item > .nav-link.active {
    color: #ffffff;
}