/*
 * App chrome restyle (top bar + left navigation) — matches the approved
 * header mockup (design-files/image (7).png) exactly: a white top bar and a
 * light sidebar with a fixed teal/gold brand palette below, not
 * Settings > Theme's configurable colour. That's a deliberate switch from
 * this file's earlier design (which read --theme-primary and re-coloured
 * with whatever the admin picked) — this chrome is being pinned to the
 * mockup's own literal colours instead, the same call already made for the
 * Leads screens (public/theme/css/leads-redesign.css) and now extended to
 * the header/sidebar that wraps every page. --theme-primary itself is left
 * alone for whatever else still reads it (buttons, pagination); only this
 * file stops consuming it.
 *
 * Presentation only: no markup, links, permissions or active-state logic
 * changes beyond the header's own notification-bell/avatar-initials markup
 * added alongside this file, so every page keeps the nav it already had.
 * Loaded after theme/css/style.css purely to override it; the !important
 * flags exist to outrank that file's id-based rules, nothing else.
 *
 * Things worth knowing before editing:
 *  - Submenus are `<ul class="nav nav-list tree">` — they carry `nav-list`
 *    too, so every rule here targets the outer list via a direct-child
 *    selector. A plain `.nav-list` descendant selector hits submenus as well.
 *  - The clock is pinned with position:absolute against the fixed sidebar,
 *    not with flex. A flex-fill list collapsed to a single visible row here.
 *  - `.tree` padding/margin deliberately avoid !important: the theme's
 *    jQuery animates those properties while sliding a submenu open, and an
 *    !important here outranks its inline values, which makes the box jump
 *    instead of easing. This file still wins at rest by load order.
 *  - Width stays 200px: several layouts offset their content against that
 *    exact number, so changing it would shift every page in the app.
 */

:root {
    /* Mockup's literal chrome palette — not derived from Settings > Theme. */
    --hdr-bg: #FFFFFF;
    --hdr-surface-2: #F4F3EF;
    --hdr-line: #EAE7DE;
    --hdr-ink: #1F2430;
    --hdr-muted: #8A8F98;
    --hdr-accent: #E7B001 ;
    --hdr-accent-soft: #E4F5F3;
    --hdr-accent-deep: #E7B001;
    --hdr-gold: #E7B001 ;
    --hdr-danger: #E5484D;
    --hdr-ink-mid: #5B6675;
    --hdr-ink-soft: #8C96A5;
}

/* ============================ TOP BAR ============================
 * White bar with a hairline base, matching the mockup exactly — a fixed
 * design, not a re-skin of whatever Settings > Theme's primary colour is.
 *
 * The brand block is sized to the sidebar's 200px so it reads as that
 * column's header, with the divider continuing the sidebar's edge.
 */
.navbar.header {
    height: 60px !important;
    background-color: var(--hdr-bg) !important;
    border-bottom: 1px solid var(--hdr-line) !important;
    box-shadow: none !important;
    color: var(--hdr-ink) !important;
}

/* The theme lays this bar out with Bootstrap 3 floats, so each item was
   nudged into place with its own margin and none of them truly line up.
   One flex row with align-items:center replaces all of that: the brand sits
   at the start, the account is pushed to the end with margin-left:auto, and
   nothing needs a vertical nudge of its own. */
.navbar.header .nav-wrapper {
    height: 60px;
    padding: 0 !important;
}
.navbar.header .navbar-header {
    display: flex !important;
    align-items: center;
    height: 60px;
    float: none !important;
}
.navbar.header .navbar-nav {
    float: none !important;
    display: flex;
    align-items: center;
    height: 60px;
    margin: 0 !important;
    padding: 0 !important;
    padding-bottom: 11px !important;
}
.navbar.header .navbar-nav > li {
    float: none !important;
    display: flex;
    align-items: center;
}
.navbar.header .user-nav {
    margin-left: auto !important;
    gap: 10px;
    padding-right: 16px !important;
}

.navbar.header .navbar-brand {
    display: flex !important;
    align-items: center;
    gap: 10px;
    width: 250px;
    height: 60px;
    margin: 0 !important;
    padding: 0 14px !important;
    font-size: 14px !important;
    padding-bottom: 11px !important;
    text-shadow: none !important;
    color: var(--hdr-ink) !important;
}
.navbar.header .navbar-brand img {
    height: 34px;
    width: auto;
    flex: 0 0 auto;
}
.navbar.header .brand-text { display: flex; flex-direction: column; min-width: 0; line-height: 1.2; }
.navbar.header .brand-name {
    font-size: 14.5px; font-weight: 700; color: var(--hdr-ink);
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.navbar.header .brand-sub {
    font-size: 10px; font-weight: 500; color: var(--hdr-muted);
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}

/* ---- Search ----
 * Fills the gap between the brand block and the account controls (up to a
 * cap) rather than sitting at one fixed pixel width — the `.search-nav`/
 * `.search` chain is flex-grown for that, since `.navbar-header` and its
 * `<li>`s are already flex containers (see above). Without flex-grow here
 * the box only shrink-wraps its content and reads much narrower than the
 * mockup, which is also what was pushing the "Ctrl + K" hint up against
 * the placeholder instead of the field's actual right edge. */
.navbar.header .search-nav {
    /* display:flex/align-items/height already come from the shared
       .navbar-nav rule above — this ul carries that class too. */
    flex: 1 1 auto;
    min-width: 0;
}
.navbar.header .search-nav > li {
    flex: 1 1 auto;
    min-width: 0;
}
.navbar.header .search {
    position: relative;
    flex: 1 1 auto;
    min-width: 0;
    max-width: 860px;
    padding: 0 !important;
    margin: 0 0 0 18px;
}
.navbar.header .search .icon-search {
    position: absolute;
    left: 12px;
    top: 50%;
    transform: translateY(-50%);
    z-index: 2;
    font-size: 13px !important;
    color: var(--hdr-muted);
    pointer-events: none;
}
.navbar.header .search .form-animate-text {
    float: none !important;
    margin: 0 !important;
    padding: 0 !important;
}
.navbar.header .search .form-text {
    height: 40px;
    /*background: var(--hdr-surface-2);*/
    border: 1px solid var(--hdr-line) !important;
    border-radius: 7px !important;
    padding: 0 58px 0 34px;
    font-size: 12.5px;
    color: var(--hdr-ink);
    width: 600px;
}
.navbar.header .search .form-text::placeholder { color: var(--hdr-muted); opacity: 1; }
.navbar.header .search .form-text:focus {
    outline: none;
    background: var(--hdr-bg);
    border-color: var(--hdr-gold) !important;
    box-shadow: 0 0 0 3px var(--hdr-accent-soft);
}
/* The animated underline and floating label belong to the old treatment. */
.navbar.header .search .bar { display: none !important; }
.navbar.header .search .label-search {
    position: absolute !important;
    width: 1px; height: 1px; padding: 0; margin: -1px;
    overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}
/* "Ctrl + K" hint — plain muted text at the field's right edge, exactly as
   in the mockup: no chip, no border, just text sitting inside the input. */
.navbar.header .search-kbd {
    position: absolute;
    right: 14px;
    top: 50%;
    transform: translateY(-50%);
    z-index: 2;
    color: var(--hdr-muted);
    font-size: 12px;
    font-weight: 400;
    line-height: 1;
    pointer-events: none;
}

/* ---- Notification bell ---- */
.navbar.header .notification-dropdown { position: relative; }
.navbar.header .notification-bell {
    position: relative;
    display: flex !important;
    align-items: center;
    justify-content: center;
    width: 34px;
    height: 34px;
    border-radius: 50%;
    color: var(--hdr-muted);
    font-size: 16px;
}
.navbar.header .notification-bell:hover { background: var(--hdr-surface-2); color: var(--hdr-ink); }
.navbar.header .notification-dot {
    position: absolute;
    top: 7px;
    right: 8px;
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: var(--hdr-danger);
    border: 1.5px solid var(--hdr-bg);
}
.navbar.header .notification-menu {
    min-width: 260px;
    max-width: 320px;
    padding: 6px 0;
    border: 1px solid var(--hdr-line);
    border-radius: 10px;
    box-shadow: 0 8px 24px rgba(20, 32, 54, .12);
}
.navbar.header .notification-item,
.navbar.header .notification-empty {
    padding: 9px 14px;
    font-size: 12.5px;
    color: var(--hdr-ink);
    white-space: normal;
    line-height: 1.4;
    border-bottom: 1px solid var(--hdr-line);
}
.navbar.header .notification-empty { color: var(--hdr-muted); text-align: center; }
.navbar.header .notification-item:last-of-type { border-bottom: none; }
.navbar.header .notification-footer { padding: 8px 14px 2px; text-align: center; }
.navbar.header .notification-footer a { font-size: 11.5px; font-weight: 600; color: var(--hdr-accent); }

/* ---- Account ---- */
.navbar.header .user-name {
    display: flex !important;
    flex-direction: column;
    line-height: 1.25;
    text-align: right;
    padding: 0 !important;
}
.navbar.header .user-name .who-name { font-size: 12.5px; font-weight: 700; color: var(--hdr-ink); }
.navbar.header .user-name .who-role { font-size: 10.5px; color: var(--hdr-muted); }
.navbar.header .user-name:after,
.navbar.header .avatar-dropdown:after { display: none !important; }
.navbar.header .avatar {
    height: 36px !important;
    width: 36px !important;
    margin-top: 0 !important;
    border-radius: 50%;
}
.navbar.header .avatar-initials {
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 13px;
    font-weight: 700;
    color: #fff;
}
/* The markup carries mt-1/h-100 utilities that fight the centred row. */
.navbar.header .avatar-dropdown > div {
    margin: 0 !important;
    height: auto !important;
    display: flex;
    align-items: center;
    background: transparent !important;
    cursor: pointer;
}

.navbar.header .opener-left-menu {
    background-color: transparent !important;
    padding: 22px 14px 22px 0 !important;
}

@media (max-width: 880px) {
    .navbar.header .navbar-brand { width: auto; }
    .navbar.header .brand-text { display: none; }
    .navbar.header .search { max-width: none; }
    .navbar.header .search .form-text { padding-right: 34px; }
    .navbar.header .search-kbd { display: none; }
    .navbar.header .user-name { display: none !important; }
}

/* ============================ LEFT NAV ============================
 * One row style for top-level AND nested links, so a submenu never reads
 * as a busier, separately-designed component glued under its parent —
 * that's what the earlier boxed/bordered/shadowed submenu card with a
 * drop-shadowed icon chip on every row amounted to. Nesting is shown the
 * plain way instead: an indent plus a thin guide line down the left edge
 * of the group, same row look throughout.
 */
#left-menu .sub-left-menu {
    background-color: var(--hdr-bg);
    box-shadow: 1px 0 0 var(--hdr-line) !important;
}

#left-menu .sub-left-menu > ul.nav-list {
    padding: 16px 12px 18px;
    margin: 0;
    max-height: calc(100% - 96px);
    overflow-y: auto;
    scrollbar-width: thin;
    scrollbar-color: rgba(107, 118, 132, .3) transparent;
}
#left-menu .sub-left-menu > ul.nav-list::-webkit-scrollbar { width: 6px; }
#left-menu .sub-left-menu > ul.nav-list::-webkit-scrollbar-track { background: transparent; }
#left-menu .sub-left-menu > ul.nav-list::-webkit-scrollbar-thumb { background: rgba(107, 118, 132, .3); border-radius: 3px; }

#left-menu .sub-left-menu > ul.nav-list > li {
    line-height: normal;
    margin-bottom: 8px;
}

/* ---- Nav rows: top-level sizing matches the approved reference screenshot
   (taller rows, wider icon-to-label gap, near-stadium active pill); nested
   rows keep their own smaller, tighter sizing below. ---- */
#left-menu .sub-left-menu > ul.nav-list > li > a,
#left-menu .sub-left-menu .tree li a {
    display: flex;
    align-items: center;
    font-weight: 500;
    line-height: 1.25;
    color: var(--hdr-ink-mid);
    transition: background-color .12s ease, color .12s ease;
}
#left-menu .sub-left-menu > ul.nav-list > li > a {
    gap: 14px;
    padding: 13px 14px;
    border-radius: 8px;
    font-size: 14.5px;
}
#left-menu .sub-left-menu > ul.nav-list > li > a:hover,
#left-menu .sub-left-menu .tree li a:hover {
    background-color: var(--hdr-surface-2);
    color: var(--hdr-ink);
}
#left-menu .sub-left-menu > ul.nav-list > li > a > span[class*="fa"],
#left-menu .sub-left-menu .tree li a > span[class*="fa"] {
    text-align: center;
    color: var(--hdr-ink-soft);
}
#left-menu .sub-left-menu > ul.nav-list > li > a > span[class*="fa"] {
    width: 20px;
    flex: 0 0 20px;
    font-size: 16px;
}
#left-menu .sub-left-menu .tree li a > span[class*="fa"] {
    width: 18px;
    flex: 0 0 18px;
    font-size: 14px;
}
#left-menu .sub-left-menu > ul.nav-list > li > a:hover > span[class*="fa"],
#left-menu .sub-left-menu .tree li a:hover > span[class*="fa"] {
    color: var(--hdr-accent);
}
#left-menu .sub-left-menu .right-arrow {
    float: none !important;
    padding-top: 0 !important;
    margin-left: auto;
    font-size: 12px;
    opacity: .55;
}
#left-menu .sub-left-menu > ul.nav-list > li > a.tree-toggle {
    margin-bottom: 2px;
}

/* ---- Active item: one solid accent pill, wherever it appears ---- */
#left-menu .sub-left-menu .active-menu,
#left-menu .sub-left-menu > ul.nav-list > li.active-menu {
    background-color: transparent !important;
    color: inherit !important;
}
#left-menu .sub-left-menu > ul.nav-list > li.active-menu > a,
#left-menu .sub-left-menu > ul.nav-list > li.active-menu > a:hover,
#left-menu .sub-left-menu > ul.nav-list > li > a.menu-click {
    background-color: var(--hdr-accent) !important;
    color: #fff !important;
    font-weight: 600;
}
#left-menu .sub-left-menu > ul.nav-list > li.active-menu > a > span[class*="fa"],
#left-menu .sub-left-menu > ul.nav-list > li > a.menu-click > span[class*="fa"] {
    color: #fff;
}
/* A selected *nested* item is marked by colour alone — golden label and icon
   on no fill. The solid pill stays with its parent row (`.menu-click`, set
   above), so an open branch reads as one highlighted section with the
   current page called out inside it, rather than two stacked solid blocks
   or a parent in an odd in-between tint. */
#left-menu .sub-left-menu .tree li.active-menu > a,
#left-menu .sub-left-menu .tree li.active-menu > a:hover {
    background-color: transparent !important;
    color: var(--hdr-accent) !important;
    font-weight: 600;
}
#left-menu .sub-left-menu .tree li.active-menu > a > span[class*="fa"] {
    color: var(--hdr-accent) !important;
}

/* ---- Submenus: an indented, guide-lined list, not a separate boxed panel ----
 * No !important on padding/margin — the theme's jQuery slide animation
 * tweens those properties inline; an !important here would make the box
 * jump instead of easing. This file still wins at rest by load order. */
#left-menu .sub-left-menu .tree {
    position: relative;
    padding: 0 0 0 12px;
    margin-left: -4px;
    /*border-left: 2px solid var(--hdr-line);*/
    /* minify/css/app.css has its own uncommented copy of this exact
       selector with a 1px top+bottom border (--ddd) — style.css's copy has
       the same border commented out, which is what made this easy to miss. */
    border-top: none;
    border-bottom: none;
}
#left-menu .sub-left-menu .tree::before {
    display: none;
}
#left-menu .sub-left-menu .tree li {
    position: relative;
    padding: 0 !important;
    line-height: normal;
    margin-bottom: 10px;
    border-bottom: none;
}
#left-menu .sub-left-menu .tree li:last-child {
    margin-bottom: 0;
}
#left-menu .sub-left-menu .tree li::before {
    display: none;
}
#left-menu .sub-left-menu .tree li a {
    gap: 10px;
    padding: 8px 10px;
    border-radius: 8px;
    min-height: 32px;
    font-size: 12.75px;
}
#left-menu .sub-left-menu .tree li.active-menu::before {
    display: none;
}

/* ---- Clock, pinned to the bottom of the fixed sidebar ---- */
#left-menu .sub-left-menu > ul.nav-list > li.time {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    margin: 0;
    padding: 14px 23px 16px;
    background: var(--hdr-bg);
    border-top: 1px solid var(--hdr-line);
}
#left-menu .sub-left-menu .time h1 {
    font-size: 38px !important;
    font-weight: 600 !important;
    text-align: left !important;
    color: var(--hdr-ink) !important;
    margin: 0 0 2px !important;
    letter-spacing: -1px;
    line-height: 1.05;
}
#left-menu .sub-left-menu .time p {
    margin-top: 0 !important;
    text-align: left !important;
    font-size: 11.5px !important;
    color: var(--hdr-ink-soft) !important;
    line-height: 1.4;
}

/* ============================ SIDEBAR TOGGLE ============================
 * The theme's hamburger/cross lived in the top bar and collapsed the
 * sidebar to zero width. It is replaced by a toggle that belongs to the
 * sidebar itself and collapses to a 64px icon rail instead — collapsing to
 * zero would take the toggle with it and leave no way back.
 */
.navbar.header .opener-left-menu { display: none !important; }

/* Floats over the sidebar's top-right corner rather than sitting in the
   flow — a tab on the sidebar's outer edge, so it never sits over a nav
   item and the list keeps its original padding.

   Fixed, not absolute: .sub-left-menu is itself position:fixed and #left-menu
   has no box of its own, so an absolute toggle would anchor to the page and
   land on the far right. `left` tracks the rail width so the tab stays
   welded to the edge in both states. */
#left-menu .nav-toggle {
    position: fixed;
    top: 333px;
    left: 250px;
    z-index: 223;
    width: 17px;
    height: 36px;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0;
    border: 1px solid var(--hdr-line);
    border-left: none;
    border-radius: 0 7px 7px 0;
    background: var(--hdr-bg);
    color: var(--hdr-ink-soft);
    cursor: pointer;
    font-size: 11px;
    line-height: 1;
    box-shadow: 2px 0 4px rgba(20, 32, 54, .06);
}
#left-menu .nav-toggle:hover {
    color: var(--hdr-accent);
    border-color: var(--hdr-accent);
    border-left: none;
}

/* ---- Collapsed rail ---- */
body.nav-collapsed #left-menu .sub-left-menu { width: 64px !important; }
body.nav-collapsed #content { padding-left: 64px !important; }
body.nav-collapsed .navbar.header .navbar-brand { width: 64px; padding: 0 !important; justify-content: center; }
body.nav-collapsed .navbar.header .brand-text { display: none; }

body.nav-collapsed #left-menu .nav-toggle { left: 64px; }
body.nav-collapsed #left-menu .nav-toggle .fa { transform: rotate(180deg); }
body.nav-collapsed #left-menu .sub-left-menu > ul.nav-list { padding-left: 8px; padding-right: 8px; }

/* The label is a bare text node next to the icon, so it cannot be hidden by
   selector — zeroing the row's font-size drops it and the icon is restored
   to its own size. */
body.nav-collapsed #left-menu .sub-left-menu > ul.nav-list > li > a {
    justify-content: center;
    gap: 0;
    padding: 11px 0;
    font-size: 0;
}
body.nav-collapsed #left-menu .sub-left-menu > ul.nav-list > li > a > span[class*="fa"] { font-size: 16px; }
body.nav-collapsed #left-menu .sub-left-menu .right-arrow { display: none !important; }
body.nav-collapsed #left-menu .sub-left-menu .tree { display: none !important; }
body.nav-collapsed #left-menu .sub-left-menu > ul.nav-list > li.time { display: none !important; }

/* ---- Mobile/off-canvas menu: separate markup from the desktop sidebar.
 * It renders on a plain white background (not a coloured overlay — checked
 * against style.css, nothing sets #mimin-mobile's own background), so this
 * mirrors the desktop sidebar's now-shipped look (same fixed --hdr-* tokens,
 * no boxed/bordered tree panel) instead of the old translucent-white-on-
 * colour treatment that was designed for a backdrop this menu doesn't
 * actually have — that mismatch was rendering as a barely-visible grey box
 * with a stray solid-blue hover state.
 */
#mimin-mobile .sub-mimin-mobile-menu-list {
    background-color: var(--hdr-bg);
}
#mimin-mobile .sub-mimin-mobile-menu-list > ul.nav-list {
    padding: 16px 12px 18px;
}
#mimin-mobile .sub-mimin-mobile-menu-list > ul.nav-list > li {
    margin-bottom: 6px;
}
#mimin-mobile .sub-mimin-mobile-menu-list > ul.nav-list > li > a {
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 13px 14px;
    border-radius: 18px;
    font-size: 14.5px;
    font-weight: 500;
    color: var(--hdr-ink-mid);
}
#mimin-mobile .sub-mimin-mobile-menu-list > ul.nav-list > li > a:hover {
    background-color: var(--hdr-surface-2);
    color: var(--hdr-ink);
}
#mimin-mobile .sub-mimin-mobile-menu-list > ul.nav-list > li > a > span[class*="fa"] {
    width: 20px;
    flex: 0 0 20px;
    text-align: center;
    font-size: 16px;
    color: var(--hdr-ink-soft);
}
#mimin-mobile .sub-mimin-mobile-menu-list > ul.nav-list > li.active-menu > a,
#mimin-mobile .sub-mimin-mobile-menu-list > ul.nav-list > li > a.menu-click-m {
    background-color: var(--hdr-accent) !important;
    color: #fff !important;
    font-weight: 600;
}
#mimin-mobile .sub-mimin-mobile-menu-list > ul.nav-list > li.active-menu > a > span[class*="fa"],
#mimin-mobile .sub-mimin-mobile-menu-list > ul.nav-list > li > a.menu-click-m > span[class*="fa"] {
    color: #fff;
}

#mimin-mobile .sub-mimin-mobile-menu-list .tree {
    position: relative;
    margin: 4px 0 8px 6px !important;
    padding: 0 0 0 8px !important;
    border-left: 2px solid var(--hdr-line);
    border-radius: 0;
    background: none !important;
    border-top: none;
    border-right: none;
    border-bottom: none;
}

#mimin-mobile .sub-mimin-mobile-menu-list .tree li {
    padding: 0 !important;
    margin-bottom: 4px;
    line-height: normal;
}

#mimin-mobile .sub-mimin-mobile-menu-list .tree li:last-child {
    margin-bottom: 0;
}

#mimin-mobile .sub-mimin-mobile-menu-list .tree li a {
    display: flex !important;
    align-items: center;
    gap: 10px;
    min-height: 32px;
    padding: 11px 12px !important;
    border-radius: 9px;
    font-size: 13.5px;
    font-weight: 500;
    line-height: 1.3;
    color: var(--hdr-ink-mid);
}

#mimin-mobile .sub-mimin-mobile-menu-list .tree li a:hover {
    background-color: var(--hdr-surface-2) !important;
    color: var(--hdr-ink) !important;
}

/* Golden label/icon, no fill — the solid pill belongs to the parent row
   (`.menu-click-m` above), same rule as the desktop sidebar. */
#mimin-mobile .sub-mimin-mobile-menu-list .tree li.active-menu > a {
    background-color: transparent !important;
    color: var(--hdr-accent) !important;
    font-weight: 600;
}
#mimin-mobile .sub-mimin-mobile-menu-list .tree li.active-menu > a > span[class*="fa"] {
    color: var(--hdr-accent) !important;
}

/* ====================== UNIFORM PAGE GUTTER ======================
 * #content already offsets the sidebar. On top of that, the dashboard
 * (home.blade.php) uses a single flat 10px gutter, while most other
 * screens nest `.panel.content-header > .panel-body > .col-md-*`, each
 * level adding its own padding — so those pages sat noticeably further
 * right and lower than the dashboard.
 *
 * 65 views share that wrapper, so it's normalised here instead of being
 * edited in each file. On pages like Tasks and Incentives the whole page
 * lives inside this wrapper, so this aligns their entire content; on
 * pages like Leads it wraps only the title block.
 */
#content {
    margin-top: 60px !important;
}
#content > .panel.content-header {
    margin: 0 !important;
    padding: 10px !important;
    background: transparent !important;
    border: 0 !important;
    box-shadow: none !important;
}
#content > .panel.content-header > .panel-body {
    padding: 0 !important;
}
/* :not(.page-shell) matters — this selector is an ID plus several classes,
   so with both carrying !important it outranks the single-class .page-shell
   below and would zero the shell's own inset, leaving its content flush
   against the border. */
#content > .panel.content-header > .panel-body > [class*="col-md-"]:not(.page-shell),
#content > .panel.content-header > .panel-body > [class*="col-sm-"]:not(.page-shell) {
    float: none !important;
    width: 100% !important;
    padding: 0 !important;
}
#content > .panel.content-header > .panel-body > .page-shell {
    float: none !important;
    width: 100% !important;
}
/* On Tasks/Teams/Users/Incentives the shell is nested *inside* the
   content-header, so that header's own 10px gutter stacked on the shell's
   own — 20px from the left and top, against 10px on screens where the shell
   is a direct child of #content. Zeroed here so both routes land on the same
   inset; :has() scopes it to headers that actually wrap a shell. */
#content > .panel.content-header:has(.page-shell) {
    padding: 0 !important;
}

/* ---- Page shell ----
 * The dashboards sit inside a container card (home.blade.php's .sc-dash and
 * the executive dashboard's .ed-dash: tinted ground, hairline border,
 * rounded, padded). Other screens had no equivalent, so their panels floated
 * straight on the page background and looked unrelated to the dashboards.
 * Same spec as .sc-dash so the two read as one system.
 */
/* Spacing only — no grey ground, border or radius. The visible card on these
   screens is the panel inside, same as the Leads listing; a second container
   wrapped around it just read as a box inside a box. */
.page-shell {
    background: transparent;
    border: 0;
    padding: 10px !important;
    /* Several of these wrappers also carry .top-20 (margin-top: 20px), which
       made the top gap 30px against a 10px left gutter. Zeroed so the inset
       is equal on both sides. */
    margin-top: 0 !important;
    margin-bottom: 24px;
}
/* Rounded like the create/edit lead card (.lead-form-card), rather than
   Bootstrap's 4px .panel default. */
.page-shell .panel,
.page-shell .card {
    border-radius: 14px;
}
/* The tm and ic design systems (Tasks, Teams, Users, Incentives) set their
   own top padding on the wrapper, which stacked on the shell's and made the
   top gap far larger than the left one. */
.page-shell.tm-wrap,
.page-shell.ic-wrap {
    padding-top: 10px !important;
}
/* Inside a panel these are already on a white card, so their own border and
   radius just drew a second box around the table. */
.page-shell .panel .tm-card,
.page-shell .panel .ic-card {
    border: 0;
    border-radius: 0;
    background: transparent;
}
/* ...except one marked as an inset: a box deliberately drawn *inside* the
   page's card (the incentive plan's bands table), which does need its own
   outline to read as a grouped sub-table. */
.page-shell .panel .ic-card.ic-card-inset,
.page-shell .panel .tm-card.tm-card-inset {
    border: 1px solid var(--ic-border, #e8eaee);
    border-radius: 12px;
    background: #fff;
}

/* Form action buttons (Cancel / Create Status): rounded and spaced, instead
   of Bootstrap's 3px radius with the two sitting flush against each other. */
.status-form-actions {
    display: flex;
    gap: 10px;
    align-items: center;
    justify-content: flex-end;
    /* No rule above the actions — the <hr> that used to sit here was removed
       with the markup; this guards against Bootstrap's form-group borders
       reintroducing one. */
    border-top: 0;
    padding-top: 4px;
}
.status-form-actions .btn {
    border-radius: 8px !important;
    padding: 7px 16px;
    margin: 0;
}
/* Rounder form fields on the tm-* screens (New Team and friends). The base
   .tm-input is 8px; matching the 14px cards reads as one system. Selects get
   the arrow drawn here too, since `appearance: none` removes the native one. */
.page-shell .tm-input {
    border-radius: 14px !important;
    padding: 10px 14px;
}
.page-shell select.tm-input {
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    padding-right: 34px;
    background-image:
        linear-gradient(45deg, transparent 50%, var(--hdr-muted) 50%),
        linear-gradient(135deg, var(--hdr-muted) 50%, transparent 50%);
    background-position: calc(100% - 18px) center, calc(100% - 13px) center;
    background-size: 5px 5px, 5px 5px;
    background-repeat: no-repeat;
}
.page-shell .tm-member-list {
    border-radius: 14px;
}

/* ---- Create/Edit status layout ---- */
.status-form-row {
    display: flex;
    flex-wrap: wrap;
    gap: 16px;
    align-items: flex-start;
}
/* Neutralise the Bootstrap float/width/gutter on the two columns so the
   flex row above actually controls the layout. */
.status-form-row > [class*="col-md-"] {
    float: none !important;
    width: auto !important;
    padding: 0 !important;
    margin: 0 !important;
}
.status-form-row > .status-form-main { flex: 1 1 420px; min-width: 0; }
.status-form-row > .status-form-aside { flex: 0 1 320px; min-width: 0; }

.status-help-card {
    background: #FBFAF7;
    border: 1px solid #E7E3D8 !important;
}
.status-help-card > .panel-heading {
    background: transparent !important;
    border-bottom: 1px solid #E7E3D8;
    color: inherit !important;
}
.status-help-card .panel-title {
    font-size: 13px;
    font-weight: 700;
    color: #1F2430;
}
.status-help-card .panel-body { font-size: 12.5px; }
.status-help-card .panel-body p {
    margin: 0 0 12px;
    line-height: 1.6;
    color: #5B6675;
}
.status-help-card .panel-body strong {
    display: block;
    color: #1F2430;
    margin-bottom: 2px;
}
.status-help-card .status-help-note {
    margin: 0;
    padding-top: 12px;
    border-top: 1px solid #E7E3D8;
    color: #1F2430;
}

/* Standalone action buttons in a panel heading ("New Status" and friends).
   Scoped to .panel-heading on purpose: a blanket .page-shell .btn rule would
   also hit the grouped row-action buttons in the leads table, and rounding
   each one individually breaks a .btn-group's joined shape. */
.page-shell .panel-heading .btn {
    border-radius: 8px !important;
    padding: 6px 14px;
}
/* The shell supplies the inset, so a nested full-width column shouldn't add
   Bootstrap's own gutter on top of it. */
.page-shell > [class*="col-md-12"],
.page-shell > [class*="col-sm-12"] {
    padding-left: 0 !important;
    padding-right: 0 !important;
}

/* ---- Title merged into the shell ----
 * The dashboards keep their heading inside the container card. Most other
 * screens render the title in a separate .content-header block sitting
 * above it, which read as two disconnected slabs. Rather than restructure
 * the div nesting in dozens of views, the two are merged visually: the
 * header becomes the shell's top edge and the shell drops its own.
 * :has() is doing the "only when a shell actually follows" test — where a
 * browser lacks it the rule is skipped and the page renders exactly as it
 * does today, so this degrades cleanly rather than breaking a title block.
 */
/* Same 10px left inset as the shell below it, so the heading lines up with
   the panel's edge instead of sitting 6px further in. */
#content > .panel.content-header:has(+ .page-shell) {
    background: transparent !important;
    border: 0 !important;
    padding: 10px 10px 0 !important;
    margin: 0 !important;
}
#content > .panel.content-header + .page-shell {
    margin-top: 0 !important;
    padding-top: 10px !important;
}
/* The title itself carries theme margins meant for a standalone bar. */
#content > .panel.content-header:has(+ .page-shell) h3 {
    margin: 0 0 2px !important;
    font-size: 19px;
    font-weight: 700;
}
#content > .panel.content-header:has(+ .page-shell) p {
    margin: 0 !important;
}
/* Screens that keep the title inside their panel (Leads, Dead Leads,
   Archived Months) rather than in a .content-header above the shell — same
   type scale either way, so both routes read identically. Not a direct-child
   selector: the heading sits a few levels in, inside .panel > .panel-body. */
.page-shell .lead-page-head {
    margin: 0 0 12px;
}
.page-shell .lead-page-head h3 {
    margin: 0 0 2px !important;
    font-size: 19px;
    font-weight: 700;
}
.page-shell .lead-page-head p {
    margin: 0 !important;
}

/* ===================== SHARED PAGE SHELL ALIGNMENT =====================
 * Some screens use the newer m_theme `.main-content` shell while other
 * screens use the classic `#content` shell. Both must begin at the same
 * sidebar edge and the same header gutter. The vendor stylesheet still has
 * the newer shell hard-coded to 250px/70px.
 */
.mimin-wrapper > .main-content {
    margin-left: 200px !important;
    overflow: visible;
}
.mimin-wrapper > .main-content > .page-content {
    padding-top: 70px !important;
    padding-right: 10px !important;
    padding-bottom: 40px !important;
    padding-left: 10px !important;
}
body.nav-collapsed .mimin-wrapper > .main-content {
    margin-left: 64px !important;
}

@media (max-width: 479px) {
    .mimin-wrapper > .main-content {
        margin-left: 0 !important;
    }
    .mimin-wrapper > .main-content > .page-content {
        padding-top: 70px !important;
        padding-left: 10px !important;
        padding-right: 10px !important;
    }
}

/* ---- Global loading overlay (shown while a modal / list is loading) ----
 * A small ring in the theme colour with a fading tail, centred over a soft warm
 * wash. Kept cheap on purpose so it stays smooth while the page is busy:
 *  - no backdrop blur (it makes every frame expensive and the spin stutters),
 *  - the ring is promoted to its own layer, so the rotation runs on the
 *    compositor even if the main thread is busy rendering the modal,
 *  - constant linear speed, and the overlay fades in instead of popping. */
.overly {
    background: rgba(251, 250, 247, .7) !important;
}
body.loading .overly {
    animation: ov-fade .18s ease-out both;
}
.overly .loader,
.overly .loader:before,
.overly .loader:after {
    border-radius: 50%;
}
.overly .loader {
    position: fixed !important;
    top: 50%;
    left: 50%;
    width: 44px !important;
    height: 44px !important;
    margin: -22px 0 0 -22px !important;
    font-size: 0 !important;
    text-indent: 0 !important;
    border: 0 !important;
    /* Arc that fades from transparent to the theme colour, with the ring cut out of the middle. */
    background: conic-gradient(from 0deg, transparent 0%, var(--theme-primary, #E7B001) 100%) !important;
    -webkit-mask: radial-gradient(farthest-side, transparent calc(100% - 5px), #000 calc(100% - 4px));
    mask: radial-gradient(farthest-side, transparent calc(100% - 5px), #000 calc(100% - 4px));
    will-change: transform;
    -webkit-backface-visibility: hidden;
    backface-visibility: hidden;
    /* No `transform` declaration here: an !important transform would beat the animation below. */
    animation: ov-spin .9s linear infinite !important;
    -webkit-animation: ov-spin .9s linear infinite !important;
}
.overly .loader:before,
.overly .loader:after {
    display: none !important;
    content: none !important;
}
/* Explicit rotate() start and end: the old .loader rule leaves a translateZ(0) transform on the
   element, and a `to`-only keyframe would be matrix-interpolated from it (a full turn is the
   identity matrix, so nothing moved). */
@keyframes ov-spin {
    from { transform: rotate(0deg); }
    to { transform: rotate(360deg); }
}
@-webkit-keyframes ov-spin {
    from { -webkit-transform: rotate(0deg); transform: rotate(0deg); }
    to { -webkit-transform: rotate(360deg); transform: rotate(360deg); }
}
@keyframes ov-fade {
    from { opacity: 0; }
    to { opacity: 1; }
}
@media (prefers-reduced-motion: reduce) {
    .overly .loader { animation-duration: 2.4s !important; }
}
