:root{
  --ink-900:#12141a;
  --blue-600:#2f5fdb;
  --blue-700:#2549ad;
  --line-day:#e2e5ea;
  --line-night:#2a2e3a;
}
:root, :root[data-theme="day"]{
  --bg:#ffffff;
  --main-bg:#f5f6f7;
  --surface:#ffffff;
  --surface-2:#f5f6f8;
  --text:#12141a;
  --text-soft:#5b6472;
  --text-faint:#8a919c;
  --line:var(--line-day);
  --blue:var(--blue-600);
  --blue-soft:#eaf1ff;
  --good:#1f8a55; --good-soft:#e4f5ec;
  --bad:#c0392b; --bad-soft:#fbe9e7;
  --warn:#b5762b; --warn-soft:#fbf0e2;
  --purple:#7c3aed; --purple-soft:#f1e9fe;
  --shadow:0 1px 2px rgba(18,20,26,.05), 0 8px 24px -14px rgba(18,20,26,.18);
}
:root[data-theme="night"]{
  --bg:#0c0d12;
  --main-bg:var(--bg);
  --surface:#181a22;
  --surface-2:#1f2129;
  --text:#eef0f4;
  --text-soft:#a2a8b4;
  --text-faint:#6b7280;
  --line:var(--line-night);
  --blue:#5b8bff;
  --blue-soft:#182240;
  --good:#4cbf85; --good-soft:#132a20;
  --bad:#e0685a; --bad-soft:#331b18;
  --warn:#e0a256; --warn-soft:#332512;
  --purple:#a78bfa; --purple-soft:#241b3d;
  --shadow:0 1px 2px rgba(0,0,0,.4), 0 8px 24px -14px rgba(0,0,0,.6);
}

*{box-sizing:border-box;}
html,body{margin:0;padding:0;height:100%; overflow-x:hidden;}
body{
  font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;
  background:var(--bg); color:var(--text); font-size:12px;
  -webkit-font-smoothing:antialiased;
}
/* Applied while a modal or the lead detail panel is open, so the page's own scrollbar
   doesn't stay visible/usable behind the overlay (JS also adds matching padding-right
   to compensate for the scrollbar's width, so content doesn't shift sideways). */
body.no-scroll{overflow:hidden;}
.num{font-variant-numeric:tabular-nums;}
a{color:inherit;}
button{font-family:inherit;}

.app{display:grid; grid-template-columns:1fr; grid-template-rows:56px 48px 1fr; min-height:100vh; transition:grid-template-columns .2s ease;}
html[data-menu-layout="vertical"] .app{grid-template-columns:240px 1fr; grid-template-rows:56px 1fr;}
html[data-menu-layout="vertical"] .app.collapsed{grid-template-columns:0 1fr;}

/* ---------- sidebar (vertical layout only) ---------- */
.sidebar{display:none;}
/* Always pinned to the full viewport height with its own scrollbar (previously this
   was only true while a separate "Lock Menu" toggle was on; that toggle is gone now
   and this is just how the sidebar behaves). */
html[data-menu-layout="vertical"] .sidebar{
  display:flex; flex-direction:column;
  position:fixed; top:0; left:0; height:100vh; width:240px; z-index:150;
  background:var(--sidemenu-bg-custom, var(--ink-900)); color:var(--sidemenu-fg-custom, #e0e2e5); padding:16px 0;
  transition:transform .22s ease;
}
/* The brand/logo (flex:none, see .sidebar-brand below) stays fixed in place; only
   .side-nav scrolls beneath it now — previously the whole .sidebar (brand included)
   was one scroll region, so the logo scrolled away with the menu. */
.side-nav{
  overflow-y:auto; min-height:0;
  scrollbar-width:thin; scrollbar-color:transparent transparent;
}
/* :hover here must match (or beat) the base rule's specificity above — which includes
   the html[data-menu-layout="vertical"] prefix — or the hover override silently loses
   the cascade to the base rule's own scrollbar-color:transparent, regardless of :hover
   actually matching. */
html[data-menu-layout="vertical"] .side-nav:hover{scrollbar-color:rgba(255,255,255,.25) transparent;}
.side-nav::-webkit-scrollbar{width:6px;}
.side-nav::-webkit-scrollbar-track{background:transparent;}
.side-nav::-webkit-scrollbar-thumb{background:transparent; border-radius:6px;}
.side-nav:hover::-webkit-scrollbar-thumb{background:rgba(255,255,255,.25);}
html[data-menu-layout="vertical"] .sidebar.sm-on-light .side-nav:hover{scrollbar-color:rgba(0,0,0,.2) transparent;}
.sidebar.sm-on-light .side-nav:hover::-webkit-scrollbar-thumb{background:rgba(0,0,0,.2);}
/* Set only when the user picks a light custom Side Menu Background color (Settings
   popup) — swaps the menu text from its light-on-dark default to a legible dark tone.
   --sidemenu-fg-custom (Side Menu Font Color, same popup) always wins when set, on
   either background, since it's the fallback's fallback in every rule below. */
/* The logo asset is white/light (built for a dark sidebar) — invert it so it's still
   visible instead of disappearing against a light custom background. */
.sidebar.sm-on-light .brand-logo{filter:invert(1);}
.sidebar.sm-on-light{color:var(--sidemenu-fg-custom, #3a3f4b);}
.sidebar.sm-on-light .side-nav a{color:var(--sidemenu-fg-custom, #3a3f4b);}
.sidebar.sm-on-light .side-nav a:hover{background:rgba(0,0,0,.05); color:var(--sidemenu-fg-custom, #12141a);}
.sidebar.sm-on-light .side-nav a.active{background:var(--blue-600); color:#fff;}
.sidebar.sm-on-light .side-nav .submenu a{color:var(--sidemenu-fg-custom, #5b6472);}
.sidebar.sm-on-light .side-nav .submenu a:hover{color:var(--sidemenu-fg-custom, #12141a);}
.sidebar.sm-on-light .sidebar-foot{color:var(--sidemenu-fg-custom, #8a919c); border-top-color:rgba(0,0,0,.08);}
/* When collapsed, the sidebar leaves normal flow and slides fully off-screen;
   hovering the thin strip at the left edge (or the sidebar itself) peeks it back
   in as a floating overlay, without pushing the main content. */
html[data-menu-layout="vertical"] .app.collapsed .sidebar{
  position:fixed; top:0; left:0; height:100vh; width:240px; z-index:250;
  transform:translateX(-100%); box-shadow:12px 0 30px rgba(0,0,0,.3);
}
html[data-menu-layout="vertical"] .app.collapsed .sidebar.peek{transform:translateX(0);}
.sidebar-hover-zone{display:none;}
html[data-menu-layout="vertical"] .app.collapsed .sidebar-hover-zone{
  display:block; position:fixed; top:0; left:0; width:14px; height:100vh; z-index:240;
}

.side-nav{list-style:none; margin:0; padding:0; flex:1;}
.side-nav li{display:block; margin:2px 10px;}
.side-nav a{
  display:flex; align-items:center; gap:11px; padding:9px 12px; border-radius:8px;
  font-size:13px; color:var(--sidemenu-fg-custom, #e0e2e5); text-decoration:none; cursor:pointer; white-space:nowrap;
}
.side-nav a:hover{background:rgba(255,255,255,.06); color:var(--sidemenu-fg-custom, #fff);}
.side-nav a.active{background:var(--blue-600); color:#fff;}
.side-nav li.has-children > a .chevron{
  margin-left:auto; font-size:10px; transition:transform .15s ease; opacity:.7;
}
.side-nav li.has-children.expanded > a .chevron{transform:rotate(90deg);}
.side-nav .submenu{
  list-style:none; margin:0; padding:0; max-height:0; overflow:hidden; transition:max-height .18s ease;
}
.side-nav li.has-children.expanded .submenu{max-height:260px;}
.side-nav .submenu li{margin:2px 0 2px 10px;}
.side-nav .submenu a{
  padding:7px 12px 7px 30px; font-size:12.5px; color:var(--sidemenu-fg-custom, #9aa1ad); position:relative;
}
.side-nav .submenu a::before{
  content:""; position:absolute; left:14px; top:50%; width:5px; height:5px; border-radius:50%;
  background:currentColor; opacity:.6; transform:translateY(-50%);
}
.side-nav .submenu a:hover{color:var(--sidemenu-fg-custom, #fff);}
.side-nav .submenu a.active{background:var(--blue-600); color:#fff;}
.sidebar-foot{padding:14px 20px 4px; font-size:11px; color:var(--sidemenu-fg-custom, #6b7180); border-top:1px solid rgba(255,255,255,.08); margin-top:8px; white-space:nowrap;}

/* ---------- topbar ----------
   Fixed to the viewport (same technique .sidebar already uses) instead of relying on
   the grid row/track to keep it in place — a grid row only stays put if nothing forces
   the grid taller than the viewport, and long pages (e.g. the Profile page) could still
   scroll it away. grid-template-rows still reserves the same 56px (see .app), so .main
   needs no extra top offset — the fixed bar just sits over that already-reserved space. */
.topbar{
  position:fixed; top:0; left:0; right:0; height:56px; z-index:130;
  display:flex; align-items:center; gap:20px; padding:0 20px;
  border-bottom:1px solid var(--line); background:var(--topbar-bg-custom, var(--ink-900));
}
.topbar .spacer{flex:1;}
.topbar .iconbtn{color:var(--topbar-fg-custom, #c7ccd6);}
.topbar .iconbtn:hover{background:rgba(255,255,255,.08); color:var(--topbar-fg-custom, #fff);}
.topbar .avatar{background:rgba(255,255,255,.14); color:#fff;}
html[data-menu-layout="vertical"] .topbar{left:240px; background:var(--topbar-bg-custom, var(--surface));}
html[data-menu-layout="vertical"] .app.collapsed .topbar{left:0;}
html[data-menu-layout="vertical"] .topbar .iconbtn{color:var(--topbar-fg-custom, var(--text-soft));}
html[data-menu-layout="vertical"] .topbar .iconbtn:hover{background:var(--surface-2); color:var(--topbar-fg-custom, var(--text));}
html[data-menu-layout="vertical"] .topbar .avatar{background:var(--blue-soft); color:var(--blue);}

/* Set only when the user picks a light custom Top Bar Background color (Settings
   popup) — swaps the topbar's light-on-dark default icons to a legible dark tone.
   --topbar-fg-custom (Top Bar Font Color, same popup) always wins when set, on either
   background, since it's the fallback's fallback in every rule above and below. */
.topbar.tb-on-light .brand-logo{filter:invert(1);}
.topbar.tb-on-light .iconbtn{color:var(--topbar-fg-custom, var(--text-soft));}
.topbar.tb-on-light .iconbtn:hover{background:var(--surface-2); color:var(--topbar-fg-custom, var(--text));}
.topbar.tb-on-light .avatar{background:var(--blue-soft); color:var(--blue);}

/* ---------- page header (title + primary action, inside main content) ---------- */
.page-head{display:flex; align-items:center; justify-content:space-between; margin-bottom:20px;}
.page-head h1{font-size:20px; font-weight:400; margin:0; color:var(--text); line-height:1.2;}
.page-head-count{font-size:13px; font-weight:400; color:var(--text-faint);}
.page-head-actions{display:flex; align-items:center; gap:8px;}

.brand-h{display:flex; align-items:center; flex:none;}
.brand-logo{height:40px; width:auto; flex:none; object-fit:contain; display:block; margin-top:4px;}
.sidebar-brand{display:flex; align-items:center; justify-content:center; padding:0 20px 20px; flex:none;}

/* ---------- sidebar-toggle button — vertical layout only ---------- */
#btnSidebarToggle{display:none;}
html[data-menu-layout="vertical"] #btnSidebarToggle{display:flex;}

/* ---------- horizontal menu bar ---------- */
.hmenu{
  position:fixed; top:56px; left:0; right:0; z-index:120;
  background:var(--surface); border-bottom:1px solid var(--line); padding:0 20px;
  overflow-x:auto; scrollbar-width:thin; scrollbar-color:transparent transparent;
}
.hmenu:hover{scrollbar-color:var(--line) transparent;}
.hmenu::-webkit-scrollbar{height:3px;}
.hmenu::-webkit-scrollbar-track{background:transparent;}
.hmenu::-webkit-scrollbar-thumb{background:transparent; border-radius:6px;}
.hmenu:hover::-webkit-scrollbar-thumb{background:var(--line);}
html[data-menu-layout="vertical"] .hmenu{display:none;}
.hmenu-list{display:flex; align-items:stretch; flex-wrap:nowrap; list-style:none; margin:0; padding:0; gap:2px;}
.hmenu-item{position:relative;}
.hmenu-item > a{
  display:flex; align-items:center; gap:7px; height:48px; padding:0 14px;
  font-size:12.5px; font-weight:600; color:var(--text-soft); text-decoration:none; cursor:pointer; white-space:nowrap;
}
.hmenu-item > a:hover{color:var(--blue);}
.hmenu-item > a.active{color:var(--blue);}
.hmenu-item > a .chevron{font-size:9px; opacity:.7; transition:transform .15s ease;}
.hmenu-item.has-children:hover > a .chevron{transform:rotate(180deg);}

.hmenu-dropdown{
  list-style:none; margin:0; padding:6px; position:absolute; top:100%; left:0; min-width:220px;
  background:var(--surface); border:1px solid var(--line); border-radius:0 0 10px 10px; box-shadow:var(--shadow);
  opacity:0; visibility:hidden; transform:translateY(-6px); pointer-events:none;
  transition:opacity .14s ease, transform .14s ease, visibility .14s;
}
.hmenu-item.has-children:hover .hmenu-dropdown,
.hmenu-item.has-children:focus-within .hmenu-dropdown{
  opacity:1; visibility:visible; transform:translateY(0); pointer-events:auto;
}
.hmenu-dropdown li{margin:1px 0;}
.hmenu-dropdown a{
  display:block; padding:8px 12px; border-radius:7px; font-size:12.5px; color:var(--text-soft); text-decoration:none; white-space:nowrap;
}
.hmenu-dropdown a:hover{background:var(--surface-2); color:var(--text);}
.hmenu-dropdown a.active{background:var(--blue-soft); color:var(--blue);}
.iconbtn{
  width:34px; height:34px; border-radius:50%; border:none; background:transparent;
  display:flex; align-items:center; justify-content:center; cursor:pointer; color:var(--text-soft); font-size:16.5px;
  position:relative;
}
.iconbtn:hover{background:var(--surface-2); color:var(--text);}
.btn{
  border:none; border-radius:8px; padding:8px 14px; font-size:12.5px; font-weight:600; cursor:pointer;
}
/* 80% of the base .btn's own padding/font-size — same ratio the mobile media query already
   applies to .page-head-actions .btn, just made real everywhere .btn-sm is used instead of
   being silently overridden back to full size by the rule above (same specificity, this one
   loads later in the cascade). */
.btn-sm{padding:5px 9px; font-size:10.5px; min-width:50px;}
.btn-primary{background:var(--blue); color:#fff;}
.btn-primary:hover{background:var(--blue-700);}
.btn-ghost{background:transparent; border:1px solid var(--line); color:var(--text);}
.btn-ghost:hover{background:var(--surface-2);}
.btn-danger{background:var(--bad); color:#fff;}
.avatar{
  width:32px; height:32px; border-radius:50%; background:var(--blue-soft); color:var(--blue);
  display:flex; align-items:center; justify-content:center; font-weight:700; font-size:12px; cursor:pointer;
}

/* ---------- profile popup ---------- */
.profile-wrap{position:relative;}
.profile-pop{
  display:block; position:absolute; top:44px; right:0; z-index:120; width:230px;
  background:var(--surface); border:1px solid var(--line); border-radius:14px; box-shadow:var(--shadow);
  overflow:hidden; opacity:0; visibility:hidden; pointer-events:none; transform:translateY(-6px);
  transition:opacity .14s ease, transform .14s ease, visibility .14s;
}
.profile-pop.show{opacity:1; visibility:visible; pointer-events:auto; transform:translateY(0);}
.profile-pop-head{
  background:linear-gradient(135deg, #0f8a6c, #0c6e56); color:#fff; padding:16px;
  display:flex; align-items:center; gap:10px;
}
.profile-pop-avatar{
  width:36px; height:36px; border-radius:50%; background:rgba(255,255,255,.2); color:#fff;
  display:flex; align-items:center; justify-content:center; font-weight:700; font-size:13px; flex:none;
}
.profile-pop-name{font-size:13.5px; font-weight:700;}
.profile-pop-role{font-size:11px; color:rgba(255,255,255,.8); margin-top:1px;}
.profile-pop ul{list-style:none; margin:0; padding:6px;}
.profile-pop li a{
  display:flex; align-items:center; gap:10px; padding:9px 10px; border-radius:8px;
  font-size:13px; color:var(--text); text-decoration:none; transition:background .1s;
}
.profile-pop li a .pmi{font-size:13px; width:16px; text-align:center; color:var(--text-faint);}
.profile-pop li a:hover{background:var(--surface-2);}
.profile-pop li a.danger{color:var(--bad);}
.profile-pop li a.danger .pmi{color:var(--bad);}
.profile-pop li a.danger:hover{background:var(--bad-soft);}
.profile-pop-divider{height:1px; background:var(--line); margin:2px 0;}

/* ---------- settings popup ---------- */
.settingspop-wrap{position:relative;}
.settingspop{
  display:block; position:absolute; top:44px; right:0; z-index:120; width:300px;
  background:var(--surface); border:1px solid var(--line); border-radius:14px; box-shadow:var(--shadow);
  overflow:hidden; opacity:0; visibility:hidden; pointer-events:none; transform:translateY(-6px);
  transition:opacity .14s ease, transform .14s ease, visibility .14s;
}
.settingspop.show{opacity:1; visibility:visible; pointer-events:auto; transform:translateY(0);}
.settingspop-head{
  padding:12px 16px; font-size:13px; font-weight:700; border-bottom:1px solid var(--line); color:var(--text);
}
.settingspop-body{padding:14px 16px 16px; display:flex; flex-direction:column; gap:14px;}
.settingspop-fld label{display:block; font-size:10.5px; text-transform:uppercase; letter-spacing:.05em; color:var(--text-faint); font-weight:600; margin-bottom:7px;}
.settingspop-fld select{
  width:100%; border:1px solid var(--line); border-radius:7px; padding:7px 9px; font-size:12.5px;
  background:var(--surface); color:var(--text); font-family:inherit;
}
.settingspop-fld-row{display:flex; gap:10px;}
.settingspop-fld-row .settingspop-fld{flex:1; min-width:0;}
/* Same segmented-switch look as .usersel-switch/.usersel-switch-btn (User Selection
   modal) — a rounded pill track with a raised "active" segment, instead of two
   separate bordered buttons. */
.theme-choice{display:flex; gap:2px; padding:3px; background:var(--surface-2); border-radius:9px;}
.theme-choice-btn{
  flex:1; border:none; background:transparent; border-radius:7px; color:var(--text-soft); font-family:inherit;
  padding:8px 6px; font-size:12px; cursor:pointer; display:flex; align-items:center; justify-content:center; gap:6px;
}
.theme-choice-btn:hover{color:var(--text);}
.theme-choice-btn.active{background:var(--surface); color:var(--blue); box-shadow:var(--shadow);}

.color-pick-row{display:flex; align-items:center; gap:8px;}
.color-pick-row input[type="color"]{
  width:44px; height:32px; border:1px solid var(--line); border-radius:7px; padding:2px;
  background:var(--surface); cursor:pointer;
}
.color-reset-btn{
  width:32px; height:32px; border:1px solid var(--line); border-radius:7px; background:var(--surface);
  color:var(--text-soft); cursor:pointer; font-size:11.5px; display:flex; align-items:center; justify-content:center;
}
.color-reset-btn:hover{background:var(--surface-2); color:var(--text);}

/* ---------- notifications popup ---------- */
.notifpop-wrap{position:relative;}
.notif-badge{
  position:absolute; top:-5px; right:-5px; min-width:16px; height:16px; padding:0 3px; border-radius:99px;
  background:var(--bad); color:#fff; font-size:9.5px; font-weight:700; display:flex; align-items:center; justify-content:center;
}
.notifpop{
  display:block; position:absolute; top:44px; right:0; z-index:120; width:320px;
  background:var(--surface); border:1px solid var(--line); border-radius:14px; box-shadow:var(--shadow);
  overflow:hidden; opacity:0; visibility:hidden; pointer-events:none; transform:translateY(-6px);
  transition:opacity .14s ease, transform .14s ease, visibility .14s;
}
.notifpop.show{opacity:1; visibility:visible; pointer-events:auto; transform:translateY(0);}
.notifpop-head{
  padding:13px 16px; display:flex; align-items:center; justify-content:space-between;
  border-bottom:1px solid var(--line); font-size:13px; font-weight:700; color:var(--text);
}
.notifpop-head a{font-size:11.5px; font-weight:500; color:var(--blue); text-decoration:none;}
.notifpop-head a:hover{text-decoration:underline;}
.notifpop-list{list-style:none; margin:0; padding:0; max-height:320px; overflow-y:auto;}
.notifpop-list li{
  display:flex; gap:10px; padding:11px 16px; border-bottom:1px solid var(--line); cursor:pointer;
}
.notifpop-list li:hover{background:var(--surface-2);}
.notifpop-list li:last-child{border-bottom:none;}
.notif-ic{
  width:28px; height:28px; border-radius:50%; flex:none; display:flex; align-items:center; justify-content:center;
  font-size:12px; color:#fff;
}
.notif-ic-lead{background:#5b6fd6;}
.notif-ic-meeting{background:#2f5f8a;}
.notif-ic-call{background:#e0a53a;}
.notif-ic-won{background:#1fae7a;}
.notifpop-list .body .t{font-size:12.5px; font-weight:600; color:var(--text); line-height:1.35;}
.notifpop-list .body .m{font-size:11px; color:var(--text-faint); margin-top:2px;}
.notifpop-foot{padding:11px 16px; text-align:center; border-top:1px solid var(--line);}
.notifpop-foot a{font-size:12px; color:var(--blue); text-decoration:none;}
.notifpop-foot a:hover{text-decoration:underline;}

/* ---------- select2 (theme-aware) ---------- */
.select2-container{width:100% !important;}
/* Fixed height (not padding) matched to .formgrid/.fld input,select's own rendered height
   (37.5px) — Select2's outer box has no padding of its own by default, all horizontal inset
   comes from .select2-selection__rendered's padding instead, so adding padding to the outer
   box here (tried first) just pushed __rendered's text into the arrow icon rather than
   growing the box. line-height on __rendered is height minus the 2px of top+bottom border,
   so the text sits vertically centered the same way a padded input's text does. */
.select2-container .select2-selection--single{
  height:37.5px !important; border:1px solid var(--line) !important; border-radius:7px !important;
  background:var(--surface) !important; padding:0 !important;
}
/* Scoped to --single specifically — this selector used to be bare ".select2-container
   .select2-selection__rendered", which (since it wasn't restricted to the single-select
   variant) also matched the multi-select's __rendered container and forced every tag chip to
   inherit its 35.5px line-height, stretching each pill to ~41px tall instead of a normal
   compact chip. */
.select2-container .select2-selection--single .select2-selection__rendered{
  color:var(--text) !important; line-height:35.5px !important; font-size:13px;
  padding-left:10px !important; padding-right:28px !important;
}
.select2-container .select2-selection__arrow{height:35.5px !important; top:1px !important;}
.select2-container .select2-selection__arrow{height:100% !important;}
/* Matches .formgrid input:focus (line ~600 above) so the Select2-rendered dropdown gets the
   same blue-border focus treatment as the plain text inputs next to it, instead of the
   browser's own default focus outline/glow which looked inconsistent alongside them. */
.select2-container--focus .select2-selection--single,
.select2-container--open .select2-selection--single{
  outline:none !important; border-color:var(--blue) !important;
  /* rgb(37,140,251) matches the browser's own native focus-visible ring color that
     .formgrid input:focus gets for free (it's not one of our theme's CSS variables) — using
     var(--blue) here instead looked visibly darker/harsher than State Code's actual glow. */
  box-shadow:#fff 0 0 0 1.6px, rgb(37, 140, 251) 0 0 0 4px !important;
}
/* Multi-select variant (e.g. Employee Details' "Allot User") — none of the --single rules
   above apply here, .select2-selection--multiple is a different DOM shape (a <ul> of tag
   "choices" plus an inline search input, not a single rendered/arrow pair), so without its
   own rules it fell back entirely to Select2's unstyled browser defaults: an oversized empty
   box with the placeholder floating at the bottom instead of vertically centered. */
.select2-container .select2-selection--multiple{
  min-height:37.5px !important; border:1px solid var(--line) !important; border-radius:7px !important;
  background:var(--surface) !important; padding:3px 6px !important;
}
.select2-container--focus .select2-selection--multiple,
.select2-container--open .select2-selection--multiple{
  outline:none !important; border-color:var(--blue) !important;
  box-shadow:#fff 0 0 0 1.6px, rgb(37, 140, 251) 0 0 0 4px !important;
}
.select2-selection--multiple .select2-selection__rendered{
  display:flex !important; flex-wrap:wrap; align-items:center; gap:4px; padding:0 !important; margin:0;
}
.select2-selection--multiple .select2-selection__choice{
  display:flex !important; align-items:center; gap:5px; margin:0 !important;
  background:var(--surface-2) !important; color:var(--text) !important; border:none !important;
  border-radius:6px; padding:3px 6px !important; font-size:12px; font-weight:600;
}
.select2-selection--multiple .select2-selection__choice__remove{
  /* Select2's own default CSS makes this position:absolute (its default template reserves
     space via __display's padding-left instead) — absolutely-positioned elements are pulled
     out of flex flow entirely, so the "order:2" below did nothing and the button just sat on
     top of the text with nothing to push it aside. position:static puts it back in the flex
     row as a normal item, ordered after the name via that same "order". */
  position:static !important;
  color:var(--text-faint) !important; border:none !important; margin:0 !important; order:2; font-weight:700; padding:0 2px;
}
.select2-selection--multiple .select2-selection__choice__remove:hover{background:transparent !important; color:var(--bad) !important;}
.select2-selection--multiple .select2-selection__choice__display{padding-left:0 !important; order:1;}
.select2-selection--multiple .select2-search--inline{margin:0;}
.select2-selection--multiple .select2-search--inline .select2-search__field{
  border:none !important; background:transparent !important; color:var(--text) !important;
  font-size:12.5px; padding:3px 4px !important; margin:0 !important; min-height:0;
}
.select2-dropdown{background:var(--surface) !important; border:1px solid var(--line) !important; color:var(--text) !important;}
.select2-search__field{background:var(--surface) !important; color:var(--text) !important; border:1px solid var(--line) !important;}
/* The dropdown's own search box auto-focuses itself when Select2 opens (see the orange native
   browser focus ring this left behind, inconsistent with the blue border used everywhere else
   in the theme — same fix as .select2-selection--single above). */
.select2-search__field:focus{outline:none !important; border-color:var(--blue) !important;}
.select2-results__option{color:var(--text) !important;}
.select2-container--default .select2-results__option--highlighted[aria-selected],
.select2-results__option:hover{background:var(--blue) !important; color:#fff !important;}
.select2-container--default .select2-results__option[aria-selected="true"]{background:var(--surface-2) !important; color:var(--text) !important;}
.select2-results__option[aria-disabled="true"]{color:var(--text-faint) !important;}
.fld .select2-container, .formgrid .select2-container{margin-top:0;}

/* ---------- section-switcher popup ---------- */
.sectionpop-wrap{position:relative;}
.sectionpop{
  display:grid; position:absolute; top:44px; right:0; z-index:120;
  background:var(--surface); border:1px solid var(--line); border-radius:12px; box-shadow:var(--shadow);
  padding:14px; gap:14px 10px; grid-template-columns:repeat(4, 64px);
  opacity:0; visibility:hidden; pointer-events:none; transform:translateY(-6px);
  transition:opacity .14s ease, transform .14s ease, visibility .14s;
}
.sectionpop.show{opacity:1; visibility:visible; pointer-events:auto; transform:translateY(0);}
.sectionpop-tile{
  display:flex; flex-direction:column; align-items:center; gap:7px; cursor:pointer;
  padding:6px 4px; border-radius:8px;
}
.sectionpop-tile:hover{background:var(--surface-2);}
.sectionpop-ic{
  width:40px; height:40px; border-radius:11px; display:flex; align-items:center; justify-content:center;
  font-size:17px; color:#fff;
}
.sectionpop-ic.ic-leads{background:#5b6fd6;}
.sectionpop-ic.ic-calls{background:#e0a53a;}
.sectionpop-ic.ic-hrm{background:#1fae7a;}
.sectionpop-ic.ic-account{background:#df5a5a;}
.sectionpop-ic.ic-booking{background:#6b7280;}
.sectionpop-ic.ic-franchise{background:#8b5cf6;}
.sectionpop-ic.ic-inventory{background:#e0763a;}
.sectionpop-ic.ic-rental{background:#2aa9a0;}
.sectionpop-lbl{font-size:11px; color:var(--text-soft); text-align:center;}

/* ---------- main ---------- */
.main{grid-row:3; grid-column:1; padding:15px; overflow-y:auto; overflow-x:hidden; background:var(--mainbg-custom, var(--main-bg));}
/* Replaces the browser's own native scrollbar rendering (which can draw a shadow/
   gradient alongside it on some platforms) with a plain custom one. */
.main::-webkit-scrollbar{width:10px;}
.main::-webkit-scrollbar-track{background:transparent;}
.main::-webkit-scrollbar-thumb{background:var(--line); border-radius:99px;}
.main::-webkit-scrollbar-thumb:hover{background:var(--text-faint);}
html[data-menu-layout="vertical"] .main{grid-row:2; grid-column:2;}

.filterbar{
  display:flex; flex-wrap:wrap; gap:10px; align-items:flex-end;
  background:var(--surface); border:1px solid var(--line); border-radius:10px; padding:14px 16px; margin-bottom:14px;
  box-shadow:var(--shadow);
}
.fld{display:flex; flex-direction:column; gap:5px;}
/* Fixes a select's own width so a Select2 dropdown (width:100% of its parent) doesn't
   visibly resize the field as the selected option's text length changes. */
.fld-fixed-110{width:110px; flex:none;}
/* date inputs need more room than a plain dropdown — dd-mm-yyyy plus the native calendar
   icon reads as cramped at 110px. */
.fld-fixed-100{width:100px; flex:none;}
/* Wider than -110 for a quick-filter select whose option text (e.g. a Lead Stage name) tends
   to run longer than the fixed date-range controls' own short labels. */
.fld-fixed-140{width:140px; flex:none;}
.fld label{font-size:10.5px; text-transform:uppercase; letter-spacing:.05em; color:var(--text-faint); font-weight:600;}
.fld select, .fld input{
  border:none; border-bottom:2px solid var(--line); border-radius:5px; padding:7px; font-size:12px;
  background:#f1ebeb59; color:var(--text); width:100%;
}
.fld select:hover, .fld input:hover{border-bottom-color:var(--text-faint);}
.fld select:focus, .fld input:focus{outline:none; border-bottom-color:var(--blue); box-shadow:none !important;}
.filter-clear{font-size:12px; color:var(--blue); cursor:pointer; background:none; border:none; padding:8px 4px; align-self:center;}
.result-count{margin-left:auto; align-self:center; font-size:12px; color:var(--text-faint);}

.tablewrap{background:var(--surface); border:1px solid var(--line); border-radius:10px; box-shadow:var(--shadow); overflow-x:auto; overflow-y:hidden;}
/* min-width:max-content is a floor, not a fixed size — on a wide .tablewrap it's a
   no-op (100% already exceeds the table's natural width), but it stops narrow screens
   from squeezing every column down to unreadable slivers: the table instead grows to
   its natural width and .tablewrap's overflow-x:auto scrolls it horizontally. */
table.leads{width:100%; min-width:max-content; border-collapse:collapse; font-size:12.5px;}
table.leads thead th{
  text-align:left; padding:10px 14px; font-size:10.5px; text-transform:uppercase; letter-spacing:.05em;
  color:var(--text-faint); font-weight:600; border-bottom:1px solid var(--line); background:var(--surface-2);
  white-space:nowrap;
}
table.leads tbody td{padding:11px 14px; border-bottom:1px solid var(--line); vertical-align:middle;}
table.leads tbody tr:last-child td{border-bottom:none;}
table.leads tbody tr:hover{background:var(--surface-2);}
.lead-name{font-weight:600; cursor:pointer;}
.lead-name:hover{color:var(--blue); text-decoration:underline;}
.lead-sub{color:var(--text-faint); font-size:11px; margin-top:1px;}
.badge{display:inline-block; padding:3px 9px; border-radius:99px; font-size:11px; font-weight:600; white-space:nowrap; background:var(--blue-soft); color:var(--blue);}
.badge.stage-fresh{background:var(--blue-soft); color:var(--blue);}
.badge.stage-contacted{background:var(--warn-soft); color:var(--warn);}
.badge.stage-meeting{background:var(--blue-soft); color:var(--blue);}
.badge.stage-negotiation{background:var(--warn-soft); color:var(--warn);}
.badge.stage-won{background:var(--good-soft); color:var(--good);}
.badge.stage-lost{background:var(--bad-soft); color:var(--bad);}
.rowactions{display:flex; gap:4px; justify-content:flex-end;}
.rowbtn{
  width:22px; height:22px; border-radius:5px; border:1px solid var(--line); background:var(--surface);
  color:var(--text-soft); cursor:pointer; font-size:10px; display:inline-flex; align-items:center; justify-content:center;
}
.rowbtn:hover{background:var(--surface-2); color:var(--text);}
.rowbtn.del:hover{background:var(--bad-soft); color:var(--bad); border-color:var(--bad-soft);}
.empty-row td{text-align:center; color:var(--text-faint); padding:34px;}

/* ---------- modal ----------
   Named .crm-modal (not .modal) deliberately: Bootstrap 5 ships its own .modal class
   (display:none; position:fixed; width:100%; height:100%; z-index:1055; ...). Since our
   own rules here never touched display/position/height, Bootstrap's colliding .modal
   rule was winning the cascade and rendering every one of our modals permanently
   display:none — invisible regardless of the "show" class we add to .overlay. */
/* display stays flex always (never display:none) so opacity/transform can actually
   transition both ways — matching Bootstrap's own .fade timing: backdrop opacity
   .15s linear, dialog transform .3s ease-out sliding in from -50px. */
.overlay{
  /* Above .side-panel-overlay's z-index:260 — the Create/Edit and confirm modals (this
     class) need to sit on top of the details side panel when opened from inside it (see
     site.js's openFormModal/confirmDialog), not underneath it. */
  position:fixed; inset:0; background:rgba(10,11,15,.5); display:flex; align-items:center; justify-content:center; z-index:300;
  opacity:0; visibility:hidden; pointer-events:none;
  transition:opacity .15s linear, visibility .15s;
}
.overlay.show{opacity:1; visibility:visible; pointer-events:auto;}
/* A second modal opened from inside the first (see #quickAddOverlay in _Layout.cshtml and
   site.js's openQuickAddModal) needs to render on top of it, not behind it or replacing it. */
.overlay.overlay-stacked{z-index:350;}

/* "No results" state for an ajax Select2 (see initCustomerPicker in Lead/Create.cshtml) that
   offers creating the missing record inline instead of just saying nothing matched, plus the
   built-in "type more characters" / "Searching…" placeholder row (aria-disabled). Neither is a
   selectable option, so neither should pick up the blue hover/highlight fill meant for real
   options above — background and color there come from two separate, equally-specific rules,
   so hovering one of these rows turned the background interactive-blue while the text stayed
   each row's own resting color (soft-gray or the link's blue), reading as invisible/near-blank
   on hover instead of just showing the row's normal look. */
.select2-results__option.select2-results__message:hover,
.select2-results__option[aria-disabled="true"]:hover{background:transparent !important;}
.select2-results__option[aria-disabled="true"]:hover{color:var(--text-faint) !important;}
.select2-no-results-add{padding:6px 2px; font-size:12.5px; color:var(--text-soft);}
.select2-no-results-add a{color:var(--blue); font-weight:600; text-decoration:none;}
.select2-no-results-add a:hover{text-decoration:underline;}
/* display:flex column + overflow:hidden on the card itself (not overflow-y:auto) so the
   head/foot never scroll and there's only ever ONE scrollbar — on .crm-modal-body — even
   for tall content like the User Selection table, instead of the whole card growing its
   own scrollbar on top of the table's own internal one. */
.crm-modal{
  /* position:relative so this (not the full-viewport .overlay) is the containing block for
     Select2's absolutely-positioned dropdown (dropdownParent is this element — see
     initFormSelect2 in site.js). Without an explicit position, .crm-modal is position:static
     while shown (transform:none below no longer creates one either), so the dropdown would
     size/position itself relative to .overlay's viewport-spanning box instead — right by
     coincidence for a field near the top of an unscrolled form, wildly wrong for anything
     lower down or once .crm-modal-body has been scrolled. */
  position:relative;
  width:520px; max-width:92vw; max-height:90vh; overflow:hidden; background:var(--surface); border-radius:12px;
  box-shadow:0 20px 60px rgba(0,0,0,.35); border:1px solid var(--line);
  display:flex; flex-direction:column;
  transform:translateY(-50px); transition:transform .3s ease-out;
}
/* transform:none (not translateY(0)) once shown — same final visual position, but
   translateY(0) is still a non-"none" transform value and per spec that alone creates a
   new containing block for position:absolute/fixed descendants, which was throwing off
   Select2's dropdown positioning for any select inside the modal (see initFormSelect2 in
   site.js) — Select2 computes its dropdown's offset assuming a normal, untransformed
   ancestor chain up to dropdownParent. transform:none has no such side effect. */
.overlay.show .crm-modal{transform:none;}
.crm-modal-head{display:flex; align-items:center; justify-content:space-between; padding:12px 18px; border-bottom:1px solid var(--line); flex:none;}
.crm-modal-head h3{margin:0; font-size:15px;}
/* Holds the close (X) button plus any per-form extra action a loaded popup injects here (see
   PageSetting/Index.cshtml's save icon) — grouped so they sit adjacent on the right instead of
   .crm-modal-head's own space-between spreading a 3rd item out to the center. */
.crm-modal-head-actions{display:flex; align-items:center; gap:4px;}
/* Same page-canvas color .main itself sits on — without it, a .dash-card's own #fbfbfb sat
   directly against .crm-modal's white, too close in value to actually read as a distinct
   card the way the exact same card pops against .main's gray on a real dashboard page. */
.crm-modal-body{padding:18px; overflow-y:auto; flex:1; min-height:0; background:var(--mainbg-custom, var(--main-bg));}
.crm-modal-foot{padding:14px 18px; border-top:1px solid var(--line); display:flex; justify-content:flex-end; gap:8px; flex:none;}

/* Create/Edit popup size options (see TableDataModel.PopupSize + site.js's openFormModal,
   which swaps these on #formModal instead of the base .crm-modal's own fixed 520px). */
.crm-modal.popup-sm{width:360px;}
.crm-modal.popup-md{width:480px;}
.crm-modal.popup-lg{width:720px;}
/* .crm-modal's own base max-width:92vw/max-height:90vh still applies to the others, but a
   "full" popup is meant to span the screen on both axes, so it needs its own wider/taller
   caps here too — height (not just max-height) so it actually fills that space instead of
   just being allowed to, matching how width already behaves. */
.crm-modal.popup-full{width:98vw; max-width:98vw; height:94vh; max-height:94vh;}

/* Even spacing between each field (and the submit button, itself sitting in its own
   .form-group) on the Create/Edit forms rendered inside #formModalBody. */
#formModalBody .form-group{margin-bottom:10px;}
#formModalBody .form-group:last-child{margin-bottom:0;}

/* 12-column grid (Bootstrap's col-1..col-12 naming, reimplemented on CSS Grid rather than
   Bootstrap's own flex .row/.col — this lives inside arbitrary field-list markup, not a
   .row, and Grid's `span N` gives the same "how many of 12 tracks" sizing without needing a
   wrapping .row/.container). Plain fields with no col-* class default to col-6 (half width,
   two per line) — the same look every existing form already had before this class existed,
   so no view needs to change to keep working. .formgrid-4's own children are excluded (still
   4-across via their own auto-placed 4-track grid, untouched by the 12-col default). */
.formgrid{display:grid; grid-template-columns:repeat(12, 1fr); gap:12px;}
.formgrid .full{grid-column:1 / -1;}
/* :where(:not(...)) rather than a bare :not(...) — :not()'s specificity is normally that of
   its argument (1 class), which combined with the "div" type selector below would outrank
   the single-class .col-N utilities and make them unable to override this default at all.
   :where() always contributes zero specificity, dropping this rule below every .col-N rule
   regardless of source order. */
.formgrid:where(:not(.formgrid-4)) > div{grid-column:span 6;}
.formgrid .col-1{grid-column:span 1;}
.formgrid .col-2{grid-column:span 2;}
.formgrid .col-3{grid-column:span 3;}
.formgrid .col-4{grid-column:span 4;}
.formgrid .col-5{grid-column:span 5;}
.formgrid .col-6{grid-column:span 6;}
.formgrid .col-7{grid-column:span 7;}
.formgrid .col-8{grid-column:span 8;}
.formgrid .col-9{grid-column:span 9;}
.formgrid .col-10{grid-column:span 10;}
.formgrid .col-11{grid-column:span 11;}
.formgrid .col-12{grid-column:span 12;}
/* 4-across variant (see Lead/Create.cshtml's Others details card) — same field/label styling,
   just a wider grid for sections with many short fields. Steps down at the same breakpoints
   as .dash-row/.formgrid so it doesn't get overly cramped on narrower viewports. */
.formgrid-4{grid-template-columns:repeat(4, 1fr);}
@media (max-width:1100px){ .formgrid-4{grid-template-columns:1fr 1fr;} }
.formgrid label{display:block; font-size:10px; text-transform:uppercase; letter-spacing:.04em; color:var(--text-faint); font-weight:600; margin-bottom:2px;}
.formgrid input, .formgrid select, .formgrid textarea{
  width:100%; border:1px solid var(--line); border-radius:7px; padding:8px 10px; font-size:13px;
  background:var(--surface); color:var(--text); font-family:inherit;
}
.formgrid input:focus, .formgrid select:focus, .formgrid textarea:focus{outline:none; border-color:var(--blue);}
/* A checkbox caught by the width:100%/border/padding rule above (meant for text/date/number
   inputs) loses its intended box — combined with Bootstrap's .form-check-input, which already
   does its own appearance:none + fixed 1em sizing + its own border/background for the drawn
   checkbox square, the width:100% here wins by specificity and stretches it into a big bordered
   rectangle (see Company/Create.cshtml's toggle fields). Overriding just width/height/padding
   back to Bootstrap's own 1em/1em/0 restores the checkbox's size without touching its
   border/background, which still need to come from .form-check-input (or the browser's native
   checkbox rendering, for a checkbox with no such class). */
.formgrid input[type="checkbox"]{width:1em; height:1em; padding:0;}

/* Opt-in modifier for a .formgrid that should lay its fields out in a single flex row
   (e.g. the Profile page's inline punch form) instead of the fixed 12-column grid every
   other .formgrid uses — children flex instead of taking a fixed span, and a bare
   <button> (no label, so it'd otherwise sit taller than the fields next to it) aligns to
   the same baseline as the inputs via align-items:flex-end. */
.formgrid.formgrid-inline{display:flex; align-items:flex-end; gap:12px; flex-wrap:wrap;}
.formgrid.formgrid-inline > div{flex:1 1 160px;}
.formgrid.formgrid-inline > .btn{flex:none;}

/* ---------- row-click details side panel (LeadCampaign Index) ----------
   Content is the same Details view/action used for the full-page /LeadCampaign/Details/5
   route (see LeadCampaignController.Details and Views/LeadCampaign/Details.cshtml) — the
   .side-panel-header/-section-label/-row/-foot classes below style that shared content
   itself, in both places it renders (the slide-in panel here, and the standalone page,
   where they just lay out as normal in-flow blocks instead of a pinned shell). */
.side-panel-overlay{
  position:fixed; inset:0; background:transparent; z-index:260;
  opacity:0; visibility:hidden; pointer-events:none;
  transition:opacity .15s linear, visibility .15s;
}
.side-panel-overlay.show{opacity:1; visibility:visible;}
.side-panel{
  position:fixed; top:0; right:0; height:100vh; width:420px; max-width:90vw;
  background:var(--surface); border-left:1px solid var(--line); box-shadow:-20px 0 60px rgba(0,0,0,.25);
  display:flex; flex-direction:column; overflow:hidden;
  transform:translateX(100%); transition:transform .25s ease-out;
  pointer-events:auto;
}
.side-panel-overlay.show .side-panel{transform:translateX(0);}
/* Header text + Edit/Delete/Close icons on one line (see _TableDataGrid.cshtml's
   side-panel-titlebar) — #detailsPanelHeader only exists in the panel shell, not on the
   standalone Details page, so this row (and its 20px/16px inset) only applies there; the
   standalone page's .side-panel-header keeps its own border/padding below instead. flex:none
   pins the whole titlebar in place so only #detailsPanelBody scrolls. align-items:flex-start
   keeps the icons level with the title's own line even when a badge (see LeadCampaign's
   Details.cshtml) wraps onto a second line underneath it. */
.side-panel-titlebar{
  display:flex; align-items:flex-start; justify-content:space-between; gap:12px;
  flex:none; padding:20px 20px 6px;
}
#detailsPanelHeader{flex:1; min-width:0;}
#detailsPanelHeader .side-panel-header{border-bottom:none; padding-bottom:0;}
.side-panel-titlebar-actions{display:flex; gap:2px; flex:none;}
.side-panel-icon-btn{
  width:29px; height:29px; border-radius:6px; font-size:14px;
  border:none; background:transparent; color:var(--text-faint); cursor:pointer;
  display:flex; align-items:center; justify-content:center;
}
.side-panel-icon-btn:hover{background:var(--surface-2); color:var(--text);}
.side-panel-body{
  padding:6px 20px 20px; overflow-y:auto; flex:1; min-height:0; font-size:12px; transition:opacity .2s ease;
  scrollbar-width:thin; scrollbar-color:transparent transparent;
}
.side-panel-body:hover{scrollbar-color:var(--text-faint) transparent;}
.side-panel-body::-webkit-scrollbar{width:6px;}
.side-panel-body::-webkit-scrollbar-track{background:transparent;}
.side-panel-body::-webkit-scrollbar-thumb{background:transparent; border-radius:6px;}
.side-panel-body:hover::-webkit-scrollbar-thumb{background:var(--text-faint);}
/* Employee Details' "Alloted User" tab — a highlighted chip per row instead of a plain
   side-panel-row, so an allotment reads as a distinct, removable item rather than blending
   into the flat label/value rows used everywhere else in the panel. */
.alloted-user-chip{
  display:flex; align-items:center; gap:10px; padding:8px 10px; margin-bottom:6px;
  background:var(--blue-soft); border-radius:8px; transition:background .12s ease;
}
.alloted-user-chip:hover{background:var(--surface-2);}
.alloted-user-avatar{
  width:26px; height:26px; border-radius:50%; background:var(--blue); color:#fff;
  display:flex; align-items:center; justify-content:center; font-size:11px; font-weight:700; flex:none;
}
.alloted-user-name{flex:1; font-weight:600; font-size:12.5px; color:var(--text);}
.btn-remove-alloted{
  background:transparent; border:none; color:var(--text-faint); cursor:pointer; padding:4px 6px;
  border-radius:6px; font-size:12px; flex:none;
}
.btn-remove-alloted:hover{background:var(--bad-soft); color:var(--bad);}
/* LeadCampaign/LeadSource/Project's shared _AllotedTab partial — a disabled allotment fades
   (same idea as .status-inactive elsewhere) instead of disappearing, since disabling is a
   reversible "paused" state, not a removal. The toggle button itself sits between the chip's
   name and its own Remove (×) button. */
.alloted-user-chip.is-disabled{background:var(--surface-2); opacity:.7;}
.alloted-user-chip.is-disabled .alloted-user-avatar{background:var(--text-faint);}
.btn-toggle-alloted{
  background:transparent; border:none; color:var(--good); cursor:pointer; padding:4px 6px;
  border-radius:6px; font-size:15px; flex:none; line-height:1;
}
.alloted-user-chip.is-disabled .btn-toggle-alloted{color:var(--text-faint);}
.btn-toggle-alloted:hover{background:var(--surface);}

.side-panel-header{border-bottom:1px solid var(--line); padding-bottom:16px;}
.side-panel-header h2{margin:0 0 8px; font-size:17px; font-weight:600; color:var(--text); line-height:1.25;}
.badge.status-active{background:var(--good-soft); color:var(--good);}
.badge.status-inactive{background:var(--bad-soft); color:var(--bad);}
.side-panel-tabs{display:flex; gap:4px; border-bottom:1px solid var(--line); margin-bottom:12px;}
.side-panel-tab{
  border:none; background:transparent; cursor:pointer; padding:8px 4px; margin-right:16px;
  font-size:13px; font-weight:600; color:var(--text-faint); border-bottom:2px solid transparent;
}
.side-panel-tab:hover{color:var(--text);}
.side-panel-tab.active{color:var(--blue); border-bottom-color:var(--blue);}
.side-panel-section-label{font-size:11px; text-transform:uppercase; letter-spacing:.04em; color:var(--text-faint); font-weight:700; margin:20px 0 4px;}
.side-panel-section-label:first-of-type{margin-top:0;}
.side-panel-row{display:flex; align-items:center; justify-content:space-between; gap:12px; padding:1px 0;}
.side-panel-row .label{font-size:12px; color:var(--text-faint);}
.side-panel-row .value{font-size:12px; font-weight:600; color:var(--text); text-align:right;}
/* Per-field accent colors for the Lead details panel (see Lead/Details.cshtml) — Status/
   Assigned To in blue, Source in purple, Budget in amber, matching the reference layout;
   dates stay the default .value color. */
.side-panel-row .value.v-blue{color:var(--blue);}
.side-panel-row .value.v-purple{color:var(--purple);}
.side-panel-row .value.v-amber{color:var(--warn);}
/* Each note (see the Notes section in Lead/Details.cshtml) as its own card — plain
   .side-panel-row styling made note text read as a bold, right-aligned "value" like a field,
   which is wrong for free-text content, and gave successive notes no visual separation at
   all. Left-aligned, normal-weight body text with a subtle background sets each note apart
   without needing the .side-panel-row border-bottom we removed elsewhere. */
.quick-update-row{display:flex; gap:8px;}
.quick-update-row .qu-field{flex:1; min-width:0;}
.quick-update-row select, .quick-update-row input{width:100%; font-size:12px; padding:5px 9px; height:auto;}
.qu-label{display:block; font-size:11px; color:var(--text-faint); margin-bottom:2px;}
.qu-fdate{font-size:12px; padding:5px 9px; height:auto;}
.note-card{background:var(--surface-2); border-radius:8px; padding:10px 12px; margin-bottom:8px;}
.note-card:last-child{margin-bottom:0;}
.note-card .note-meta{font-size:80%; color:var(--text-faint); margin-bottom:4px;}
.note-card .note-text{font-size:12px; font-weight:400; color:var(--text); line-height:1.5; text-align:left; white-space:pre-wrap;}
/* Sits below all tab content, above .side-panel-foot — Employee Details' "Privilege
   Setting" link (see Views/Employee/Details.cshtml), kept out of .side-panel-foot itself
   since that div is stripped inside the AJAX side panel (openDetailsPanel in site.js). */
.side-panel-bottom-section{padding-top:14px; margin-top:6px; border-top:1px solid var(--line);}
/* Vertical tab layout for the Privilege Setting popup (Views/Employee/Privilege.cshtml) —
   same active/hover language as .side-panel-tab above, just a left-hand column instead of
   an underlined row, since ten module categories read better as a list than as a tab strip
   that would wrap across several lines. */
.priv-tabs-layout{display:flex; gap:0; min-height:320px;}
.priv-tabs-nav{display:flex; flex-direction:column; width:180px; flex-shrink:0; gap:2px; padding-right:14px; border-right:1px solid var(--line);}
.priv-tab{
  border:none; background:transparent; cursor:pointer; text-align:left; padding:9px 12px;
  font-size:13px; font-weight:600; color:var(--text-faint); border-radius:6px; border-left:3px solid transparent;
}
.priv-tab:hover{color:var(--text); background:var(--surface-2);}
.priv-tab.active{color:var(--blue); background:var(--surface-2); border-left-color:var(--blue);}
.priv-tabs-content{flex:1; padding-left:20px; min-width:0;}
@media (max-width:700px){
  .priv-tabs-layout{flex-direction:column;}
  .priv-tabs-nav{flex-direction:row; flex-wrap:wrap; width:auto; border-right:none; border-bottom:1px solid var(--line); padding-right:0; padding-bottom:10px; margin-bottom:10px;}
  .priv-tabs-content{padding-left:0;}
}
.side-panel-foot{display:flex; gap:10px; padding-top:16px; margin-top:6px; border-top:1px solid var(--line);}
.side-panel-foot .btn{
  flex:1; text-align:center; border-radius:999px; padding:9px 0; font-weight:600; font-size:13px;
}
/* This app's own flat .btn base (further up, shared with the sidebar/topbar chrome) sets
   border:none — Bootstrap's real .btn-outline-secondary needs that border back, or it
   renders as bare text with no visible button shape at all. */
.side-panel-foot .btn-outline-secondary{border:1px solid var(--line); background:transparent; color:var(--text-soft);}
.side-panel-foot .btn-outline-secondary:hover{background:var(--surface-2); color:var(--text);}
/* Meeting/Details.cshtml's lifecycle buttons ("Reached Location"/"Meeting In") hit the same
   border-stripped-by-the-flat-.btn-base issue as .side-panel-foot's buttons above — same fix,
   different container, since these live in .meeting-progress instead. */
.meeting-progress .btn-outline-secondary{border:1px solid var(--line); background:transparent; color:var(--text-soft);}
.meeting-progress .btn-outline-secondary:hover{background:var(--surface-2); color:var(--text);}
.details-back-link{margin-top:10px; font-size:13px;}
.details-back-link a{color:var(--text-faint);}
.details-back-link a:hover{color:var(--text);}
/* Only matters on the standalone /LeadCampaign/Details/5 page — inside the panel this
   content already sits in a 420px-wide shell, so this just keeps the same content from
   stretching edge-to-edge (Edit/Delete going full-bleed thin) on the wide page layout. */
.details-page-content{max-width:420px;}

/* ---------- user selection (switch user) modal ---------- */
.usersel-modal{width:640px;}
.usersel-switch-row{display:flex; align-items:center; gap:12px; margin-bottom:12px; flex-wrap:wrap;}
.usersel-switch{
  display:flex; gap:2px; padding:3px; flex:1; min-width:220px; background:var(--surface-2); border-radius:9px;
}
/* Unlike the other .usersel-switch uses (which stretch full width by design), the Lead
   Funnel dimension switch sits alongside a card title and should just size to its own
   content, right-aligned by the header's justify-content:space-between. */
#funnelDimSwitch{flex:none; min-width:0;}
.usersel-switch-btn{
  flex:1; border:none; background:transparent; border-radius:7px; padding:8px 16px; cursor:pointer;
  font-size:12.5px; font-weight:600; color:var(--text-soft); font-family:inherit; text-align:center; white-space:nowrap;
}
.usersel-switch-btn:hover{color:var(--text);}
.usersel-switch-btn.active{background:var(--surface); color:var(--blue); box-shadow:var(--shadow);}
.usersel-tools{display:flex; align-items:center; justify-content:space-between; gap:14px; margin-bottom:12px; flex-wrap:wrap;}
.usersel-search{
  display:flex; align-items:center; gap:8px; border:1px solid var(--line); border-radius:7px; padding:7px 10px;
  flex:1; min-width:160px; color:var(--text-faint); font-size:12.5px;
}
.usersel-search input{border:none; outline:none; background:transparent; color:var(--text); font-size:12.5px; width:100%; font-family:inherit;}
.usersel-pagesize{display:flex; align-items:center; gap:8px; font-size:12.5px; color:var(--text-soft); white-space:nowrap;}
.usersel-pagesize select{border:1px solid var(--line); border-radius:7px; padding:5px 7px; font-size:12.5px; background:var(--surface); color:var(--text);}
/* min-height lives here (a plain block div), not on .usersel-table itself: a <table>'s
   min-height stretches its lone row to fill the extra space (cells default to
   vertical-align:middle), which visually breaks a short last page down to 1 row —
   the row grows huge with its text centered in it instead of leaving real blank space
   below a normal-height row. --table-min-height is still sourced from the table's own
   data-height attribute (see script.js); only where it's applied moved to fix this. */
.usersel-tablewrap{
  box-shadow:none; margin-bottom:12px; max-height:300px; min-height:var(--table-min-height, 300px); overflow-y:auto;
  scrollbar-width:thin; scrollbar-color:transparent transparent;
}
.usersel-tablewrap:hover{scrollbar-color:var(--text-faint) transparent;}
.usersel-tablewrap::-webkit-scrollbar{width:8px;}
.usersel-tablewrap::-webkit-scrollbar-track{background:transparent;}
.usersel-tablewrap::-webkit-scrollbar-thumb{background:transparent; border-radius:8px;}
.usersel-tablewrap:hover::-webkit-scrollbar-thumb{background:var(--text-faint);}
.usersel-table th{cursor:pointer; user-select:none; position:sticky; top:0; z-index:1;}
.usersel-table th i{font-size:10px; opacity:.5; margin-left:4px;}
.usersel-table th.sorted i{opacity:1; color:var(--blue);}
.usersel-table tbody tr{cursor:pointer;}
.usersel-table tbody tr.selected{background:var(--blue-soft);}
.usersel-table tbody tr.selected:hover{background:var(--blue-soft);}
.usersel-foot{display:flex; align-items:center; justify-content:space-between; gap:12px; flex-wrap:wrap; margin-top:10px;}
.usersel-count{font-size:12px; color:var(--text-faint);}
.usersel-pager{display:flex; align-items:center; gap:4px;}
.usersel-pager button{
  min-width:26px; height:26px; padding:0 6px; border:1px solid var(--line); background:var(--surface); border-radius:6px;
  color:var(--text-soft); cursor:pointer; font-size:11.5px; display:flex; align-items:center; justify-content:center;
}
.usersel-pager button:hover{background:var(--surface-2);}
.usersel-pager button.active{background:var(--blue); border-color:var(--blue); color:#fff;}
.usersel-pager button:disabled{opacity:.4; cursor:default;}
#userSelMsg{margin-top:10px; font-size:12.5px; color:var(--good); display:none;}
#userSelMsg.show{display:block;}

/* ---------- detail panel ---------- */
.detail-scrim{position:fixed; inset:0; background:rgba(10,11,15,.4); display:none; z-index:150;}
.detail-scrim.show{display:block;}
.detail-panel{
  position:fixed; top:0; right:0; height:100%; width:420px; max-width:92vw; background:var(--surface);
  box-shadow:-16px 0 40px rgba(0,0,0,.25); transform:translateX(100%); transition:transform .22s ease; z-index:160;
  display:flex; flex-direction:column; border-left:1px solid var(--line);
}
.detail-panel.show{transform:translateX(0);}
.detail-head{padding:18px; border-bottom:1px solid var(--line); display:flex; justify-content:space-between; align-items:flex-start;}
.detail-head h3{margin:0 0 4px; font-size:16px;}
.detail-body{padding:18px; overflow-y:auto; flex:1;}
.detail-section{margin-bottom:20px;}
.detail-section h4{font-size:11px; text-transform:uppercase; letter-spacing:.05em; color:var(--text-faint); margin:0 0 10px; font-weight:700;}
.kv{display:flex; justify-content:space-between; padding:6px 0; font-size:13px; border-bottom:1px dashed var(--line);}
.kv:last-child{border-bottom:none;}
.kv .k{color:var(--text-soft);}
.kv .v{font-weight:600; text-align:right;}
.activity-row{display:flex; gap:10px; padding:9px 0; border-bottom:1px solid var(--line);}
.activity-row:last-child{border-bottom:none;}
.activity-ic{width:26px; height:26px; border-radius:50%; background:var(--blue-soft); color:var(--blue); flex:none; display:flex; align-items:center; justify-content:center; font-size:11px;}
.activity-row .body{flex:1;}
.activity-row .t{font-size:12.5px; font-weight:600;}
.activity-row .m{font-size:11.5px; color:var(--text-faint);}
.detail-foot{padding:14px 18px; border-top:1px solid var(--line); display:flex; gap:8px;}
textarea.notes{width:100%; min-height:70px; border:1px solid var(--line); border-radius:7px; padding:9px; font-family:inherit; font-size:12.5px; background:var(--surface); color:var(--text); resize:vertical;}
/* Lead/Details.cshtml's Meeting tab — Remarks (a plain .notes textarea, not .form-control)
   otherwise just gets the browser's default focus ring instead of the same focus treatment
   as the .form-control inputs right above it (e.g. Developer RM name) — values copied
   straight from Bootstrap's own .form-control:focus so the two match exactly. */
.new-meeting-form textarea.notes:focus{border-color:#86b7fe; outline:0; box-shadow:0 0 0 0.25rem rgba(13, 110, 253, 0.25);}
/* Meeting/Details.cshtml's Finish form — single-line notes (rows="1" worth of height) and
   smaller inputs than the rest of the app's .form-control default, since this whole form sits
   inside the details panel's narrow column alongside several fields at once. */
textarea.meeting-finish-notes{min-height:34px; height:34px; font-size:12px; padding:7px 9px;}
/* Lead/Details.cshtml's Meeting tab's Schedule form — every field (date pickers, selects,
   text inputs) at the same compact size instead of the theme's larger default .form-control,
   which read inconsistent next to the Visit place/Purpose selects below them. */
.new-meeting-form .form-control{font-size:12px; padding:5px 9px; height:auto;}
.meeting-finish-input{font-size:12px; padding:5px 9px; height:auto;}
/* Country/State/City/Community/Project/Customer/FyMaster's Create/Edit modals — smaller
   fields than the theme's larger default .formgrid input (see line ~596 above), matching the
   more compact feel needed once the dash-card wrapper around the fields was dropped in favor
   of the modal's own title bar carrying the "Add/Edit X" heading instead. */
.compact-form .formgrid input, .compact-form .formgrid select, .compact-form .formgrid textarea{font-size:12px; padding:5px 9px; height:auto;}
/* Select2 replaces the native <select> with its own .select2-selection box, which the plain
   input/select/textarea rule above can't reach — without this it stays at the theme's larger
   37.5px default (see line ~369 above) and looks visibly taller than the compact text fields
   next to it (e.g. State's Country picker vs. State Name/State Code). */
.compact-form .select2-container .select2-selection--single{height:30px !important;}
.compact-form .select2-container .select2-selection__rendered{line-height:28px !important; font-size:12px; padding-left:9px !important; padding-right:24px !important;}
.compact-form .select2-container .select2-selection__arrow{height:28px !important;}
/* Same shrink as .btn-sm, applied automatically to every button in a compact form (Save/
   Update/Cancel etc.) so the submit action matches the smaller fields above it instead of
   standing out at the theme's full .btn size. */
.compact-form .btn{padding:5px 9px; font-size:10.5px; min-width:50px;}
/* Space between the last field row and the Save/Update button now that it's a bare <input>
   rather than sitting in its own .dash-card (which used to supply this via its own padding). */
.form-actions-gap{margin-top:16px;}

.switch{position:relative; width:44px; height:24px; flex:none;}
.switch input{opacity:0; width:0; height:0; position:absolute;}
.switch .track{position:absolute; inset:0; background:var(--surface-2); border:1px solid var(--line); border-radius:99px; cursor:pointer; transition:.15s;}
.switch .knob{position:absolute; top:2px; left:2px; width:18px; height:18px; border-radius:50%; background:var(--text-faint); transition:.15s; display:flex; align-items:center; justify-content:center; font-size:9px;}
.switch input:checked + .track{background:var(--ink-900); border-color:var(--ink-900);}
.switch input:checked + .track .knob{transform:translateX(20px); background:var(--blue);}

@media (max-width:880px){
  /* .hmenu's own overflow-x/nowrap now apply at every width (see the base rule above) — no
     longer needs restating here. */
  html[data-menu-layout="vertical"] .app{grid-template-columns:1fr;}
  /* Layout is forced to vertical below this width (see tlp-theme.js's isMobileWidth()
     check in applyMenuLayout) — nothing left for this toggle to do here. */
  .menu-layout-fld{display:none;}
  /* Below 880px the sidebar becomes an off-canvas drawer (hidden by default, slid in
     over the content) instead of the desktop hover-to-peek collapse — toggled by the
     same #btnSidebarToggle button, see the mobile branch in tlp-theme.js, with a scrim
     behind it to tap-close. */
  html[data-menu-layout="vertical"] .sidebar{transform:translateX(-100%); transition:transform .22s ease; z-index:250;}
  html[data-menu-layout="vertical"] .app.mobile-nav-open .sidebar{transform:translateX(0); box-shadow:12px 0 30px rgba(0,0,0,.3);}
  html[data-menu-layout="vertical"] .topbar{left:0;}
  html[data-menu-layout="vertical"] .main{grid-column:1;}
  .mobile-nav-scrim{display:none; position:fixed; inset:0; background:rgba(10,11,15,.45); z-index:245;}
  html[data-menu-layout="vertical"] .app.mobile-nav-open .mobile-nav-scrim{display:block;}

  .dash-row, .formgrid{grid-template-columns:1fr;}
  /* Below this width every field stacks full-width regardless of its col-N span — a col-3
     field spanning 3 of only 1 available track would otherwise force extra implicit columns
     instead of just taking the full row. */
  .formgrid > div{grid-column:1 / -1 !important;}
  .funnel-tablewrap{min-width:0;}

  /* Profile hero: centered column layout on mobile only — desktop keeps the left-aligned
     row above. */
  .profile-hero{flex-direction:column; align-items:center; text-align:center;}
  .profile-hero-info{flex:none; min-width:0;}
  .profile-hero-meta{justify-content:center;}
  .profile-hero-actions{justify-content:center;}

  /* Page head: title row + action buttons stack instead of sharing one space-between row
     (not enough width for both side by side once the title itself needs to wrap), title
     drops to 80% size (20px * .8 = 16px), and the button group scales down to 80% too —
     numbers below are each button's own desktop value (see .btn-export-icon, .page-head
     h1 etc.) times .8, not independently chosen. */
  body{font-size:12px;}
  .page-head{flex-direction:column; align-items:flex-start; gap:10px;}
  .page-head h1{font-size:16px;}
  .page-head-actions{width:100%;}
  .page-head-actions .btn{padding:6.4px 11.2px; font-size:10px;}
}

/* ---------- login page (modern split layout) ---------- */
.login-shell{min-height:100vh; display:flex;}

.login-visual{
  flex:1 1 46%; position:relative; overflow:hidden; display:flex; flex-direction:column; justify-content:center;
  padding:60px; color:#fff;
  background:linear-gradient(135deg, var(--ink-900) 0%, #1d2b52 55%, var(--blue-700) 100%);
}
.login-blob{position:absolute; border-radius:50%; filter:blur(70px); pointer-events:none;}
.login-blob-1{width:360px; height:360px; background:var(--blue-600); opacity:.55; top:-100px; right:-90px;}
.login-blob-2{width:300px; height:300px; background:#7c3aed; opacity:.32; bottom:-110px; left:-70px;}
.login-visual-content{position:relative; z-index:1; max-width:420px;}
.login-visual-logo{display:inline-flex; margin-bottom:34px;}
.login-visual-logo img{display:block; height:40px; width:auto;}
.login-visual-content h1{font-size:32px; font-weight:800; line-height:1.2; margin:0 0 14px;}
.login-visual-content .lead{font-size:14.5px; line-height:1.65; color:rgba(255,255,255,.78); margin:0 0 34px;}
.login-visual-points{list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:15px;}
.login-visual-points li{display:flex; align-items:center; gap:12px; font-size:13.5px; color:rgba(255,255,255,.92);}
.login-visual-points li i{
  width:28px; height:28px; border-radius:8px; background:rgba(255,255,255,.14); flex:none;
  display:flex; align-items:center; justify-content:center; font-size:11.5px;
}

.login-form-panel{flex:1 1 54%; min-width:0; position:relative; display:flex; align-items:center; justify-content:center; background:var(--bg); padding:40px 24px; box-sizing:border-box;}
.login-theme-toggle{
  position:absolute; top:24px; right:28px; width:38px; height:38px; border-radius:10px; border:1px solid var(--line);
  background:var(--surface); color:var(--text-soft); display:flex; align-items:center; justify-content:center;
  cursor:pointer; transition:background .15s, color .15s;
}
.login-theme-toggle:hover{background:var(--surface-2); color:var(--text);}

.login-card{width:380px; max-width:100%; min-width:0;}
.login-brand{display:flex; align-items:center; gap:9px; margin-bottom:30px;}
.login-brand .dot{width:10px; height:10px; border-radius:50%; background:var(--blue);}
.login-brand span.name{font-weight:700; font-size:16px; color:var(--text);}
.login-card h2{font-size:24px; font-weight:800; margin:0 0 6px; color:var(--text);}
.login-card .sub{color:var(--text-soft); font-size:13px; margin-bottom:28px;}

.login-fld{margin-bottom:18px;}
.login-fld label{display:block; font-size:11px; text-transform:uppercase; letter-spacing:.04em; color:var(--text-faint); font-weight:700; margin-bottom:7px;}
.login-field-error{display:block; color:var(--bad); font-size:11.5px; margin-top:6px;}
.login-input-wrap{position:relative; display:flex; align-items:center;}
.login-input-wrap i.fld-icon{position:absolute; left:13px; color:var(--text-faint); font-size:13px; pointer-events:none;}
.login-input-wrap input, .login-fld select{
  width:100%; border:1.5px solid var(--line); border-radius:10px; padding:11px 14px 11px 38px; font-size:13.5px;
  background:var(--surface); color:var(--text); font-family:inherit; transition:border-color .15s, box-shadow .15s;
}
.login-input-wrap input:focus, .login-fld select:focus{outline:none; border-color:var(--blue); box-shadow:0 0 0 3px var(--blue-soft);}
.login-input-wrap .pw-toggle{
  position:absolute; right:12px; border:none; background:none; color:var(--text-faint); font-size:13px; cursor:pointer;
  display:flex; align-items:center; padding:4px;
}
.login-input-wrap .pw-toggle:hover{color:var(--text-soft);}

.btn-login{
  width:100%; margin-top:6px; border:none; border-radius:10px; padding:12.5px; font-size:14px; font-weight:700;
  background:linear-gradient(135deg, var(--blue-600), var(--blue-700)); color:#fff; cursor:pointer;
  display:flex; align-items:center; justify-content:center; gap:8px;
  box-shadow:0 10px 22px -10px rgba(47,95,219,.6); transition:transform .12s ease, box-shadow .12s ease;
}
.btn-login:hover{transform:translateY(-1px); box-shadow:0 12px 26px -8px rgba(47,95,219,.7);}
.btn-login:active{transform:translateY(0);}

.login-error{
  background:var(--bad-soft); color:var(--bad); font-size:12.5px; border-radius:9px; padding:10px 13px;
  margin-bottom:18px; display:flex; align-items:flex-start; gap:8px;
}
.login-error i{margin-top:1px;}
.login-foot{text-align:center; margin-top:26px; font-size:11.5px; color:var(--text-faint);}

@media (max-width:880px){
  .login-visual{display:none;}
  .login-form-panel{flex:1 1 100%;}
}

/* ---------- modern native <select> styling ----------
   A native <select>'s own dropdown/option list is rendered by the OS/browser and can't
   be restyled or animated from CSS in any cross-browser way — the "fluid" part here is
   the closed box itself: a custom chevron (swapped for a themed one in night mode),
   and a smooth border/glow transition on focus/hover, instead of an instant snap. */
select{appearance:none; -webkit-appearance:none; -moz-appearance:none; cursor:pointer;}
.fld select, .formgrid select, .settingspop-fld select, .usersel-pagesize select, .login-fld select, #fySelect{
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6' viewBox='0 0 10 6'%3E%3Cpath d='M1 1l4 4 4-4' stroke='%235b6472' stroke-width='1.5' fill='none' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  background-repeat:no-repeat;
  background-position:right 10px center;
  background-size:10px 6px;
  padding-right:28px;
  transition:border-color .15s ease, box-shadow .15s ease;
}
:root[data-theme="night"] .fld select,
:root[data-theme="night"] .formgrid select,
:root[data-theme="night"] .settingspop-fld select,
:root[data-theme="night"] .usersel-pagesize select,
:root[data-theme="night"] .login-fld select,
:root[data-theme="night"] #fySelect{
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6' viewBox='0 0 10 6'%3E%3Cpath d='M1 1l4 4 4-4' stroke='%23a2a8b4' stroke-width='1.5' fill='none' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
}
.fld select:hover, .formgrid select:hover, .settingspop-fld select:hover, .usersel-pagesize select:hover, .login-fld select:hover, #fySelect:hover{
  border-color:var(--text-faint);
}
.fld select:focus, .formgrid select:focus, .settingspop-fld select:focus, .usersel-pagesize select:focus, .login-fld select:focus, #fySelect:focus{
  outline:none; border-color:var(--blue); box-shadow:0 0 0 3px var(--blue-soft);
}

/* ---------- profile page (My Profile) ----------
   Left-aligned row on desktop; the @media (max-width:880px) block further down switches
   this to the centered column layout instead (see that block for the mobile override). */
.profile-hero{
  display:flex; align-items:center; gap:20px; flex-wrap:wrap;
  background:linear-gradient(135deg, var(--blue-600), var(--blue-700)); color:#fff;
  border-radius:12px; padding:22px 24px; box-shadow:var(--shadow); margin-bottom:16px;
}
.profile-hero-avatar{
  width:72px; height:72px; border-radius:50%; background:rgba(255,255,255,.18); color:#fff;
  display:flex; align-items:center; justify-content:center; font-weight:700; font-size:24px; flex:none;
}
.profile-hero-info{flex:1; min-width:200px;}
.profile-hero-info h1{margin:0; font-size:21px; font-weight:700; color:#fff;}
.profile-hero-role{font-size:13px; color:rgba(255,255,255,.85); margin-top:3px;}
.profile-hero-meta{display:flex; align-items:center; gap:10px; margin-top:10px; flex-wrap:wrap;}
.profile-hero-id{
  display:inline-flex; align-items:center; padding:3px 10px; border-radius:99px;
  background:rgba(255,255,255,.14); color:rgba(255,255,255,.9); font-size:11px; font-weight:600; white-space:nowrap;
}
.profile-hero-actions{display:flex; gap:8px; flex:none;}
.profile-hero-actions .btn-ghost{border-color:rgba(255,255,255,.45); color:#fff;}
.profile-hero-actions .btn-ghost:hover{background:rgba(255,255,255,.14);}

.profile-section-title{display:flex; align-items:center; gap:8px; font-size:11px; text-transform:uppercase; letter-spacing:.05em; color:var(--text-faint); font-weight:700; margin:0 0 12px;}
.profile-section-title i{color:var(--blue); font-size:12px;}
.kv .k i{width:14px; margin-right:7px; color:var(--text-faint); font-size:11px;}

.profile-attendance-stats{display:flex; gap:10px; flex-wrap:wrap;}
.stat-pill{flex:1; min-width:100px; border-radius:10px; padding:10px 12px; text-align:center;}
.stat-pill .stat-num{display:block; font-size:19px; font-weight:700;}
.stat-pill .stat-label{display:block; font-size:11px; color:var(--text-faint); margin-top:2px;}
.stat-pill.stat-good{background:var(--good-soft);} .stat-pill.stat-good .stat-num{color:var(--good);}
.stat-pill.stat-bad{background:var(--bad-soft);} .stat-pill.stat-bad .stat-num{color:var(--bad);}
.stat-pill.stat-warn{background:var(--warn-soft);} .stat-pill.stat-warn .stat-num{color:var(--warn);}
.stat-pill.stat-info{background:var(--blue-soft);} .stat-pill.stat-info .stat-num{color:var(--blue);}
.stat-pill.stat-muted{background:var(--surface-soft, rgba(0,0,0,.04));} .stat-pill.stat-muted .stat-num{color:var(--text-faint);}

/* ---------- lead dashboard + lead funnel (merged) ---------- */
.stat-tile-grid{display:grid; grid-template-columns:repeat(auto-fill, minmax(150px, 1fr)); gap:12px; margin:14px 0;}
.stat-tile{
  border-radius:10px; padding:14px 16px; color:#fff; cursor:pointer; box-shadow:var(--shadow);
  display:flex; flex-direction:column; gap:4px; transition:transform .12s ease;
}
.stat-tile:hover{transform:translateY(-2px);}
.stat-tile .stat-tile-count{font-size:22px; font-weight:700;}
.stat-tile .stat-tile-label{font-size:11px; font-weight:600; text-transform:uppercase; letter-spacing:.04em; opacity:.9;}

/* min-width:0 overrides the grid/flex-item default of min-width:auto — without it, a
   .dash-card sitting in a .dash-row (display:grid) can't shrink below its content's
   intrinsic width (e.g. the fixed-width sbr-label/sbr-count pair in a stage-bar-list row),
   so the grid track grows past its 1fr share and the card spills out of its column. */
.dash-card{background:#fbfbfb; border:1px solid var(--line); border-radius:10px; /* box-shadow:var(--shadow); */ padding:16px; margin-bottom:14px; min-width:0; border-top:3px solid #ededed;}
.dash-card-head{display:flex; align-items:center; justify-content:space-between; margin-bottom:14px; flex-wrap:wrap; gap:10px;}
.dash-card-head h3{margin:0; font-size:14px; font-weight:700; color:var(--text);}
.dash-card-head-switches{display:flex; align-items:center; gap:10px; flex-wrap:wrap;}
.dash-card-foot{margin-top:12px; padding-top:12px; border-top:1px dashed var(--line); font-size:12.5px; color:var(--text-soft); display:flex; align-items:center; justify-content:space-between;}

.dash-row{display:grid; grid-template-columns:1fr 1fr; gap:14px;}
@media (max-width:880px){ .dash-row{grid-template-columns:1fr;} }

.dash-row-3{display:grid; grid-template-columns:1fr 1fr 1fr; gap:14px;}
@media (max-width:1180px){ .dash-row-3{grid-template-columns:1fr 1fr;} }
@media (max-width:700px){ .dash-row-3{grid-template-columns:1fr;} }

/* Colored top accent + hover lift for dashboard breakdown cards — set --accent per card
   (falls back to the theme's own blue when not overridden) to tie each card's border to the
   color used inside its own bars/dots. */
.dash-card-accent{--accent:var(--text-faint); border-top:3px solid var(--accent); transition:transform .15s ease, box-shadow .15s ease;}
.dash-card-accent:hover{transform:translateY(-2px); box-shadow:0 6px 20px rgba(0,0,0,.08);}
.dash-card-count-badge{
  margin-left:auto; font-size:11px; font-weight:700; color:var(--accent, var(--blue));
  background:color-mix(in srgb, var(--accent, var(--blue)) 14%, transparent);
  padding:2px 9px; border-radius:99px;
}
.sbr-pct{color:var(--text-faint); font-weight:400; margin-left:4px;}

.dash-stack{display:grid; grid-template-columns:1fr; gap:14px;}

.dash-card-link{font-size:12px; color:var(--blue); text-decoration:none; font-weight:600;}
.dash-card-link:hover{text-decoration:underline;}

.stage-bar-list{display:flex; flex-direction:column; gap:2px;}
.sbr-row{display:flex; align-items:center; gap:12px; padding:9px 10px; border-radius:9px; transition:background .12s ease;}
.sbr-row:hover{background:var(--surface-2);}
.sbr-label{
  display:flex; align-items:center; gap:8px; width:150px; flex:none;
  font-size:11px; font-weight:700; text-transform:uppercase; letter-spacing:.04em; color:var(--text-soft);
  white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
}
.sbr-dot{width:8px; height:8px; border-radius:50%; flex:none; display:inline-block; box-shadow:0 0 0 3px var(--surface-2);}
.sbr-track{flex:1; height:7px; border-radius:99px; background:var(--surface-2); overflow:hidden;}
.sbr-fill{display:block; height:100%; border-radius:99px; transition:width .6s cubic-bezier(.34,1.25,.3,1);}
.sbr-count{width:140px; flex:none; text-align:right; font-size:12px; color:var(--text-faint); font-variant-numeric:tabular-nums; white-space:nowrap;}

/* Narrower sbr-label/sbr-count for a stage-bar-list sitting in a doubly-nested column (a
   dash-row inside a dash-card that's itself already half-width) — the default 150px+140px
   pair doesn't leave the track any room at that width and forces the row to overflow. */
.stage-bar-list-compact .sbr-label{width:92px;}
.stage-bar-list-compact .sbr-count{width:100px; font-size:11px;}

/* Tighter still for a stage-bar-list sitting in a 3-up .dash-row-3 column — even less room
   than the 2-up nested case .stage-bar-list-compact was tuned for. Labels wrap onto a second
   line instead of ellipsis-truncating — a project/city name cut to "ADDRESS FO…" reads worse
   than the same name on two lines, and the row has vertical room to spare. */
.stage-bar-list-compact-3 .sbr-label{
  width:120px; font-size:10px; white-space:normal; overflow:visible; text-overflow:clip;
  line-height:1.25; align-self:flex-start; padding-top:2px;
}
.stage-bar-list-compact-3 .sbr-row{align-items:flex-start;}
.stage-bar-list-compact-3 .sbr-track{align-self:center;}
.stage-bar-list-compact-3 .sbr-count{width:56px; font-size:10.5px; align-self:flex-start; padding-top:2px;}

/* Same thin, hover-reveal scrollbar as .funnel-tablewrap (Date Wise/User Wise Report). */
.stage-bar-list-compact{scrollbar-width:thin; scrollbar-color:transparent transparent;}
.stage-bar-list-compact:hover{scrollbar-color:var(--text-faint) transparent;}
.stage-bar-list-compact::-webkit-scrollbar{width:6px;}
.stage-bar-list-compact::-webkit-scrollbar-track{background:transparent;}
.stage-bar-list-compact::-webkit-scrollbar-thumb{background:transparent; border-radius:6px;}
.stage-bar-list-compact:hover::-webkit-scrollbar-thumb{background:var(--text-faint);}

.followup-tablewrap{box-shadow:none; max-height:260px; overflow-y:auto;}

.funnel-body{display:flex; gap:20px; flex-wrap:wrap;}
.funnel-donut-wrap{display:flex; flex-direction:column; align-items:center; gap:14px; flex:none;}
.funnel-donut{width:160px; height:160px; border-radius:50%;}
.funnel-legend{display:flex; flex-direction:column; gap:8px; font-size:12px;}
.funnel-legend-row{display:flex; align-items:center; gap:8px;}
.funnel-legend-dot{width:10px; height:10px; border-radius:50%; flex:none;}
.funnel-legend-label{color:var(--text-soft); flex:1;}
.funnel-legend-count{font-weight:700; color:var(--text); white-space:nowrap;}
.funnel-tablewrap{
  flex:1; min-width:280px; box-shadow:none; height:300px; overflow-y:auto;
  scrollbar-width:thin; scrollbar-color:transparent transparent;
}
.funnel-tablewrap:hover{scrollbar-color:var(--text-faint) transparent;}
.funnel-tablewrap::-webkit-scrollbar{width:6px;}
.funnel-tablewrap::-webkit-scrollbar-track{background:transparent;}
.funnel-tablewrap::-webkit-scrollbar-thumb{background:transparent; border-radius:6px;}
.funnel-tablewrap:hover::-webkit-scrollbar-thumb{background:var(--text-faint);}
.funnel-tablewrap th{position:sticky; top:0; z-index:1;}
.funnel-cell-success{background:var(--good-soft); color:var(--good); font-weight:600;}
.funnel-cell-inprocess{background:var(--warn-soft); color:var(--warn); font-weight:600;}
.funnel-cell-hold{background:var(--bad-soft); color:var(--bad); font-weight:600;}
.funnel-cell-loss{background:var(--surface-2); color:var(--text-soft); font-weight:600;}

/* ---------- CallingDashboard polish (icons, corner sheen, table zebra) ---------- */
.dash-page-subtitle{font-size:12.5px; color:var(--text-faint); margin:2px 0 0;}
.stat-tile{position:relative; overflow:hidden;}
.stat-tile::after{
  content:""; position:absolute; top:-34px; right:-24px; width:110px; height:110px;
  border-radius:50%; background:rgba(255,255,255,.14); pointer-events:none;
}
.stat-tile-icon{position:absolute; top:12px; right:14px; font-size:19px; opacity:.55;}
.dash-card-head h3 i{margin-right:7px; color:var(--blue);}
/* Explicit rather than relying on Bootstrap's own --bs-table-bg:transparent default — makes
   the intent permanent regardless of a future Bootstrap upgrade or theme change, so every
   dashboard report table (plain .table, e.g. the Lead Funnel/Lead Reports tables, and
   .table-sm alike) always shows the surrounding .dash-card's own background (see its own
   background/border-top) through every row, instead of risking an opaque fill of their own
   reading as a mismatched panel-within-a-panel. Deliberately stops at thead/tbody/th, not
   every td — the funnel-cell-success/-inprocess/-hold/-loss cells further down set their own
   real background on purpose, and a blanket "every td" rule here would have out-specificity'd
   and blanked those back out to transparent. */
.dash-card table, .dash-card table thead, .dash-card table tbody,
.dash-card table thead th{background:transparent;}
/* Plain "table" (element selector, not just .table-sm) so every dashboard report table gets
   the same header/hover/zebra polish — the Lead Funnel and Lead Reports tables use bare
   class="table" (no -sm), and were falling through these rules entirely before. */
.dash-card table thead th{
  border-bottom:2px solid var(--line); font-size:10.5px; text-transform:uppercase;
  letter-spacing:.03em; white-space:nowrap;
}
.dash-card table tbody td{font-variant-numeric:tabular-nums;}
.dash-card table tbody tr{transition:background .12s ease;}
.dash-card table tbody tr:hover{background:var(--surface-2);}
.dash-card table tbody tr:nth-child(even){background:rgba(127,127,127,.05);}
.dash-card table tbody tr:nth-child(even):hover{background:var(--surface-2);}
.fn-toolbar{
  background:var(--surface); border:1px solid var(--line); border-radius:10px;
  padding:12px 14px; box-shadow:var(--shadow);
}
.fn-toolbar-icon{color:var(--text-faint); font-size:13px; margin-right:2px;}

/* ---------- ColumnControl dropdown (search/order popover) ----------
   80% of the inherited (body) font-size, expressed as a relative % rather than a fixed
   px value. Only .dtcc-dropdown itself gets the 80% — descendants get "inherit" (not
   another 80%), since percentages compound against each element's own parent: a nested
   80% would land at 80% of 80% (64%) instead of matching the popover's own size.
   !important is needed because ColumnControl's own bundled CSS sizes some nested elements
   (e.g. list items) in em, which would otherwise override the inherited value. */
.dtcc-dropdown{font-size:80%;}
.dtcc-dropdown *{font-size:inherit !important;}
/* ColumnControl fades its header buttons (order arrow + the "More..." dropdown trigger)
   to 40% opacity at rest, only reaching 90% on hover — kept them fully visible instead of
   fading in/out. Its own rule is table.dataTable span.dtcc button.dtcc-button (3 classes +
   3 tags), so a plain .dtcc-button override loses the specificity fight regardless of
   stylesheet order — matching that same selector shape is what actually wins here. */
table.dataTable span.dtcc button.dtcc-button,
table.dataTable span.dtcc button.dtcc-button:hover{opacity:1;}
/* DataTables right-aligns numeric AND date column headers (th.dt-type-numeric,
   th.dt-type-date) by reversing .dt-column-header's flex-direction — that also flips the
   order/search icon (.dtcc) to the LEFT of the title instead of the right, inconsistent
   with every other column (confirmed live: Entry Date's header computed to flex-direction:
   row-reverse while every plain-string column stayed row). Forcing row order back keeps the
   title on the left and the icon on the right for every column regardless of data type; the
   numeric/date cell data itself still right-aligns on its own (that's a separate rule on the
   <td>, untouched). */
table.dataTable th.dt-type-numeric div.dt-column-header,
table.dataTable th.dt-type-date div.dt-column-header{flex-direction:row;}
/* DataTables' own bundled CSS also right-aligns the actual text (table.dataTable
   th.dt-type-numeric/dt-type-date, td.dt-type-numeric/dt-type-date { text-align: right }) —
   overridden here (same selector shape, so it wins purely by loading after datatables.min.css)
   so every column's header label AND cell data reads left-aligned regardless of data type,
   matching the icon-position fix above. */
table.dataTable th.dt-type-numeric,
table.dataTable th.dt-type-date,
table.dataTable td.dt-type-numeric,
table.dataTable td.dt-type-date{text-align:left;}
/* Responsive's collapse/expand arrow (td.dtr-control's ::before triangle) is plain CSS on
   every row regardless of whether anything's actually collapsed — site.js toggles this
   .dtr-no-hidden class (via responsive.hasHidden()) once there's enough width to show every
   column, so the arrow only appears when there's an actual detail view behind it. */
.dtr-no-hidden td.dtr-control:before{display:none;}
.dtr-no-hidden td.dtr-control{cursor:default;}
/* ColumnControl already sizes .dtcc-list-buttons (the searchList checklist) off this
   variable — with 200 campaign names on LeadCampaign.Name, the popover was growing to fit
   every option instead of scrolling. */
.dtcc-dropdown{--dtcc-list-buttons_max-height:200px;}
/* Same hide-until-hover scrollbar as .funnel-tablewrap / div.dt-scroll-body. */
.dtcc-list-buttons{scrollbar-width:thin; scrollbar-color:transparent transparent;}
.dtcc-list-buttons:hover{scrollbar-color:var(--text-faint) transparent;}
.dtcc-list-buttons::-webkit-scrollbar{width:6px;}
.dtcc-list-buttons::-webkit-scrollbar-track{background:transparent;}
.dtcc-list-buttons::-webkit-scrollbar-thumb{background:transparent; border-radius:6px;}
.dtcc-list-buttons:hover::-webkit-scrollbar-thumb{background:var(--text-faint);}

/* ---------- DataTables: row hover + sorted-column highlight ----------
   Row hover: Bootstrap's own .table's base rule paints every cell via
   box-shadow:inset 0 0 0 9999px var(--bs-table-bg-state, ...), and .table-hover>tbody>tr:hover>*
   just sets --bs-table-bg-state to --bs-table-hover-bg on those same cells when hovering — no
   background-color involved, it's a box-shadow the whole way. DataTables' bundled CSS ships a
   more specific selector (table.dataTable.table-hover>tbody>tr:hover>*) that overwrites that same
   box-shadow property outright with rgba(var(--dt-row-hover), .075) instead of reading Bootstrap's
   variable, so Bootstrap's own hover color never got a chance to apply. Re-declare box-shadow
   here reading Bootstrap's actual variable chain instead, so hovering uses Bootstrap's real
   --bs-table-hover-bg rather than DataTables' unrelated --dt-row-hover value (!important because
   table.table.dataTable.table-hover has one more class than table.dataTable.table-hover, so a
   plain-specificity override loses to DataTables' rule).
   DataTables tags every cell in the currently-sorted column with sorting_1 (and sorting_2/_3 for
   secondary/tertiary sort columns) regardless of config here, but the bundled CSS never styles
   those classes — styled explicitly below with rgb(176 185 209 / 8%), a muted blue-gray.
   Bootstrap's own default --bs-table-hover-bg is only 7.5% black — correct, but too faint to
   read as "hovering" at a glance, which is why wiring the variable through wasn't enough on its
   own. Bumped it up and tinted it to the same muted blue-gray as the sorted-column highlight
   (stronger opacity so the two stay visually distinct) directly on the table, the same place
   Bootstrap's own .table rule defines it, so it wins by specificity without needing !important
   on the variable itself. */
table.dataTable.table-hover{--bs-table-hover-bg:rgb(176 185 209 / 15%);}
table.dataTable.table-hover>tbody>tr:hover>td, table.dataTable.table-hover>tbody>tr:hover>th{box-shadow:inset 0 0 0 9999px var(--bs-table-bg-state, var(--bs-table-accent-bg)) !important;}
table.dataTable td.sorting_1, table.dataTable th.sorting_1{box-shadow:inset 0 0 0 9999px rgb(176 185 209 / 8%);}
table.dataTable td.sorting_2, table.dataTable th.sorting_2{box-shadow:inset 0 0 0 9999px rgb(176 185 209 / 4%);}
table.dataTable td.sorting_3, table.dataTable th.sorting_3{box-shadow:inset 0 0 0 9999px rgb(176 185 209 / 4%);}

/* No-wrap mode (see PageSettingController's "Columns" popup / site.js's per-draw cell-length
   check) — every cell single-line by default, except one site.js has flagged as over the
   page's own wrap-threshold, which reads better wrapped than clipped. */
table.dataTable.dt-nowrap td{white-space:nowrap;}
table.dataTable.dt-nowrap td.cell-wrap-long{white-space:normal; min-width:200px;}

/* Header labels wrapping to 2-3 lines (e.g. "Entry Date", "Total Times") made every column
   as tall as its longest label — one line each, letting the table scroll horizontally
   (already supported below the grid) instead of growing vertically. */
table.dataTable thead th{white-space:nowrap;}
/* Tinted, uppercase, letter-spaced header — matches .tablewrap's own mockup table
   (table.leads thead th) and .dash-card .table-sm's report tables, brought here so the live
   grid reads the same way instead of Bootstrap's plain bold-black-on-white default. Font-size
   only shrinks the label text itself; ColumnControl's own order/filter icon buttons keep their
   own separately-set size (see table.dataTable span.dtcc button.dtcc-button) since they don't
   inherit from this rule's box, just sit inside it. */
table.dataTable thead th{
  background:var(--surface-2); color:var(--text-faint); font-size:11px; font-weight:700;
  text-transform:uppercase; letter-spacing:.04em; padding-top:8px; padding-bottom:8px;
}
/* Tighter row height than Bootstrap's own default .table cell padding (.5rem/8px) — more
   rows fit on screen without scrolling, matching this app's general compact-density leaning
   (see .compact-form's own 5px field padding) rather than the earlier 11px "extra breathing
   room" pass. */
table.dataTable tbody td{padding-top:6px; padding-bottom:6px;}
/* Light vertical column separators — Bootstrap's own .table only draws horizontal row
   borders, which reads fine for a couple of columns but gets hard to track across a wide,
   many-column grid without something marking where one column ends and the next begins.
   Last column skipped so the table's own right edge stays clean, matching the existing
   last-row/no-bottom-border convention just above. */
table.dataTable thead th, table.dataTable tbody td{border-right:1px solid var(--line);}
table.dataTable thead th:last-child, table.dataTable tbody td:last-child{border-right:none;}
/* Outer border around the whole table — border-collapse:separate (DataTables' own default,
   confirmed in datatables.min.css) means this draws independently of the cell borders above
   rather than merging/doubling up with them. */
table.dataTable{border:1px solid var(--line);}
/* DataTables' own scrolling wrapper (div.dt-scroll-body, present whenever scrollY/scrollX is
   on — every grid here has scrollY:"350px") draws its own bottom border by default, which
   just doubles up with the outer table border directly above/below it once scrolled. */
div.dt-scroll-body{border-bottom:none;}
/* Overdue-date warning for a WarnIfOverdue column (see site.js's date/datetime render
   functions and TableDataColumn.WarnIfOverdue — e.g. Lead's own Follow Date) — plain red text
   on the date itself, not a pill/badge, so it reads as this same cell just flagged, not a
   different kind of content replacing it. */
.cell-missing-warn{color:var(--bad); font-weight:600;}
/* .side-panel-row .value{color:var(--text);} (see Lead/Details.cshtml's "Next follow-up" row)
   outranks a bare .cell-missing-warn on specificity alone (two classes vs one) — this chain
   matches it so the warning color actually wins instead of being silently overridden. */
.side-panel-row .value.cell-missing-warn{color:var(--bad);}
/* Meeting's own "Process" column (see site.js's "meetingProgress" format) — same plain-
   colored-text convention as .cell-missing-warn above: green once the visit's Completed
   (done, nothing to flag), blue while whichever open stage (Started/Reached/Meeting In) began
   today, red once that same open stage has been sitting there since an earlier day. */
.cell-meeting-started{color:var(--blue); font-weight:600;}
.cell-meeting-notclosed{color:var(--bad); font-weight:600;}
.cell-meeting-completed{color:var(--good); font-weight:600;}

/* Selected rows (Select extension) — same tint and opacity as row hover instead of
   Bootstrap's default solid, saturated blue. --dt-row-selected is consumed as
   rgb(var(--dt-row-selected)), so the override itself carries the alpha via the modern
   "R G B / A%" space+slash form rather than 3 plain channel numbers — text/link colors
   also need to flip from white/light-gray (meant for a dark solid background) to this
   app's normal text/link colors, since the new background is a pale tint instead. */
:root{--dt-row-selected:176 185 209 / 15%; --dt-row-selected-text:18 20 26; --dt-row-selected-link:47 95 219;}
:root[data-theme="night"]{--dt-row-selected-text:238 240 244; --dt-row-selected-link:91 139 255;}

/* scrollY's scroll body — same hide-until-hover scrollbar as .funnel-tablewrap.
   scrollCollapse:true (see site.js) shrinks this below the 350px scrollY height whenever a
   filter leaves only a couple of rows — min-height keeps it from collapsing all the way
   down to near-nothing for a 1-2 row result set. */
div.dt-scroll-body{scrollbar-width:thin; scrollbar-color:transparent transparent; min-height:300px;}
div.dt-scroll-body:hover{scrollbar-color:var(--text-faint) transparent;}
div.dt-scroll-body::-webkit-scrollbar{width:6px;}
div.dt-scroll-body::-webkit-scrollbar-track{background:transparent;}
div.dt-scroll-body::-webkit-scrollbar-thumb{background:transparent; border-radius:6px;}
div.dt-scroll-body:hover::-webkit-scrollbar-thumb{background:var(--text-faint);}

div.dt-length select{height:34px;}

/* DataTables' own bundled CSS only sets width:100% here, no background at all. */
div.dt-scroll{width:100%; background:#fff;}

/* The whole grid — toolbar, header, rows, paging — now reads as one elevated card (same
   border/radius/shadow language as .tablewrap's own mockup table and every .dash-card)
   instead of sitting directly on .main's gray background with no edge of its own. Padded
   rather than overflow:hidden, so nothing inside (ColumnControl's per-column dropdowns,
   ColumnControl's own popovers, ordinary tooltips) risks getting clipped the way Select2's
   dropdownParent did when it was first tried pinned to a scrolling ancestor — see site.js's
   own comment on that for the exact failure mode this avoids repeating here. ".page-head +"
   here (rather than styling dt-container unconditionally) used to also carry a negative-
   margin pull-up hack to close the gap .page-head's margin-bottom left before this container
   had any background of its own — now that it's a real bordered/shadowed card, ordinary
   spacing below the header reads correctly on its own, same as any .dash-card, so that hack
   is gone rather than fighting the new border for space. */
.page-head + div.dt-container,
.page-head + .bulk-action-toolbar + div.dt-container{
  background:var(--surface); border:1px solid var(--line); border-radius:10px;
  box-shadow:var(--shadow); padding:6px;
}
/* While the toolbar is expanded it visually caps the top of the card itself (its own border/
   radius/shadow below), so the container underneath squares off its top corners and drops its
   own top border instead of doubling the seam between the two — collapsed (no .show), the
   toolbar contributes nothing visible and the container keeps its normal all-around rounding. */
.bulk-action-toolbar.show + div.dt-container{border-top:0; border-radius:0 0 10px 10px;}
/* The top row holding the toolbar + search box specifically (not the whole dt-container,
   which would also paint the table/paging area behind it) — targeted by content rather
   than a fixed :first-child/:nth-child position, since that row only exists there once
   site.js has actually moved .date-range-toolbar into it. */
.dt-container>.row:has(.date-range-toolbar){background:var(--surface); padding:15px 10px; margin:0; border-radius:8px 8px 0 0;}
.date-range-toolbar{display:flex; align-items:flex-end; gap:12px; margin-bottom:12px; flex-wrap:wrap;}
/* Once moved (by site.js) into DataTables' own top row alongside the search box: Bootstrap's
   grid sets width:100% (and max-width:100%) on every direct child of .row, which forces
   width:auto's flex-basis fallback to 100% regardless of flex-grow/shrink — overriding both
   explicitly is what actually stops it from pushing the search box onto its own line below. */
.dt-container .date-range-toolbar{flex:0 0 auto; width:auto; max-width:none; margin-bottom:0;}

/* Delayed DataTables loading overlay (see site.js's preXhr.dt/xhr.dt handlers) — only ever
   added to the DOM if a request is still running 300ms after it started, so a normal (fast)
   grid load or redraw never shows this at all. Faded in rather than popped, so even the slow
   case doesn't itself read as a blink. */
.dt-loading-overlay{
  position:absolute; inset:0; z-index:5; display:flex; align-items:center; justify-content:center;
  background:color-mix(in srgb, var(--surface) 70%, transparent);
  opacity:0; pointer-events:none; transition:opacity .15s ease;
}
.dt-loading-overlay.show{opacity:1;}
.dt-loading-overlay .spinner-border{color:var(--blue);}

/* Bootstrap's own .btn-outline-secondary:hover inverts to a solid gray fill + white
   icon/text — overriding color back to the resting state's own value (rgb(108,117,125))
   on hover is what actually keeps the icon color from changing, since the background/
   border-color hover swap isn't being touched, only color specifically. */
.date-range-clear, .select-col-toggle{background:#faf8f8; box-shadow:0px 1px 1px #ddd;}
.date-range-clear:hover, .select-col-toggle:hover{background:#faf8f8; color:#6c757d;}

/* Shown above the grid's own search toolbar only while >=1 row is checkbox-selected (see the
   select/deselect/draw listener in site.js). Always display:flex (never display:none) so the
   centering/gap layout is never lost — the slide-down/up is done entirely by animating
   max-height/opacity/padding via the .show class instead, since jQuery's slideDown()/slideUp()
   would reset display to their tag's generic default ("block" for a <div>) and break the flex
   layout the same way .toggle()/.show() did before (see site.js's own comment on that). */
.bulk-action-toolbar{
  display:flex; align-items:center; justify-content:center; gap:10px; flex-wrap:wrap;
  margin:0; padding:0 16px; background:var(--surface);
  border:0 solid var(--line); border-radius:10px 10px 0 0;
  max-height:0; opacity:0; overflow:hidden;
  transition:max-height .25s ease, opacity .2s ease, padding .25s ease, border-width .25s ease;
}
.bulk-action-toolbar.show{
  max-height:80px; opacity:1; padding:12px 16px; border-width:1px 1px 1px 1px;
  box-shadow:var(--shadow);
}
/* These buttons only carry the base .btn class (no .btn-primary/.btn-danger variant), so
   Bootstrap's own --bs-btn-active-bg/--bs-btn-hover-bg custom properties are still whatever
   the base .btn class left them at (effectively white) — and Bootstrap's :active rule
   (":not(.btn-check)+.btn:active") has higher specificity than a plain ".bulk-action-toolbar
   .btn" selector, so on click it was winning the cascade and flashing the button white.
   Setting the custom properties directly (not just background/color/border) fixes this at the
   source: Bootstrap's own hover/active/focus rules now read OUR color instead of the
   unset-variant default, regardless of which selector "wins". */
.bulk-action-toolbar .btn{
  --bs-btn-bg: var(--blue); --bs-btn-hover-bg: var(--blue); --bs-btn-active-bg: var(--blue);
  --bs-btn-border-color: var(--blue); --bs-btn-hover-border-color: var(--blue); --bs-btn-active-border-color: var(--blue);
  --bs-btn-color: #fff; --bs-btn-hover-color: #fff; --bs-btn-active-color: #fff; --bs-btn-disabled-color: #fff;
  background:var(--blue); color:#fff; border:1px solid var(--blue); font-weight:600;
}
.bulk-action-toolbar .btn:hover{filter:brightness(0.92); color:#fff;}
.bulk-action-toolbar .bulk-delete-btn{
  --bs-btn-bg: var(--bad); --bs-btn-hover-bg: var(--bad); --bs-btn-active-bg: var(--bad);
  --bs-btn-border-color: var(--bad); --bs-btn-hover-border-color: var(--bad); --bs-btn-active-border-color: var(--bad);
  background:var(--bad); border-color:var(--bad);
}

/* Column picker injected next to DataTables' own "Search:" box (see site.js's
   data-global-search-columns handling) — matches its sibling input's sizing, and both get
   the same underline style as the .fld toolbar controls instead of Bootstrap's boxed
   form-control/form-select look, so the two toolbars read as one consistent design. */
.global-search-column{width:100px; display:inline-block; margin-right:.5em;}
div.dt-search input, .global-search-column{
  border:none; border-bottom:2px solid var(--line); border-radius:5px; padding:7px; font-size:12px;
  background:#f1ebeb59; color:var(--text); height:34px;
}
div.dt-search input:hover, .global-search-column:hover{border-bottom-color:var(--text-faint);}
/* Bootstrap's own .form-control:focus{background-color:var(--bs-body-bg)} otherwise fills
   this back in — CSS resolves conflicts per property, not per rule, so a rule that simply
   omits background doesn't stop a *different* rule from supplying one; re-asserting the
   same base color here is what actually keeps it constant across focus. */
div.dt-search input:focus, .global-search-column:focus{outline:none; border-bottom-color:var(--blue); background-color:#f1ebeb59; box-shadow:none !important;}

.pagination{--bs-pagination-padding-x:0.55rem; --bs-pagination-padding-y:0.3rem; --bs-pagination-font-size:.9rem;}

/* Import/Export/Columns (all plain Bootstrap .btn-outline-secondary, including the DataTables
   Buttons export button — see site.js's className: "btn-outline-secondary btn-sm") otherwise
   invert to a solid dark-gray fill + white text on hover, which read too heavy for this small
   icon-button group. Softer gray hover instead, scoped to this group so the toolbar's own
   .date-range-clear/.select-col-toggle (which already have their own, deliberately different,
   no-invert hover from earlier) are unaffected. */
.page-head-actions .btn-outline-secondary:hover,
.page-head-actions .btn-outline-secondary:focus{background:#e4e4e4; color:var(--text); border-color:#e4e4e4;}
/* DataTables Buttons always adds its own "btn btn-secondary" base class ahead of whatever
   className config supplies (see site.js's Export button) — Bootstrap's .btn-secondary sets
   --bs-btn-bg/--bs-btn-border-color/--bs-btn-color directly, which wins over .btn-outline-
   secondary's own --bs-btn-* vars at equal specificity purely by which one Bootstrap's own
   stylesheet declares last. The two-class selector here outranks either alone, forcing Export
   back to the exact transparent/bordered look Import and Columns already have. */
.page-head-actions .btn-secondary.btn-outline-secondary{
  --bs-btn-bg:transparent; --bs-btn-border-color:#6c757d; --bs-btn-color:#6c757d;
  --bs-btn-hover-bg:#e4e4e4; --bs-btn-hover-border-color:#e4e4e4; --bs-btn-hover-color:var(--text);
  --bs-btn-active-bg:#e4e4e4; --bs-btn-active-border-color:#e4e4e4; --bs-btn-active-color:var(--text);
}

/* Shared "Loading…" placeholder (see site.js's openFormModal/openQuickAddModal/
   openDetailsPanel — same markup, one class) — a plain static line read as frozen/broken
   rather than in-progress, especially on a slow fetch. A small spinner makes the wait legible. */
.side-panel-loading{
  display:flex; align-items:center; justify-content:center; gap:10px;
  padding:48px 20px; color:var(--text-faint); font-size:13px;
}
.side-panel-loading::before{
  content:""; width:16px; height:16px; border-radius:50%; flex:none;
  border:2px solid var(--line); border-top-color:var(--blue);
  animation:side-panel-spin .7s linear infinite;
}
@keyframes side-panel-spin{ to { transform:rotate(360deg); } }

/* Meeting lifecycle advance button (Meeting\Details.cshtml's Start/Reached/Meeting In/Finish
   buttons) — was a plain .btn-primary/.btn-outline-secondary, easy to miss against the rest of
   the side panel. Gradient + icon + hover lift makes the single next action stand out; color
   shifts stage-to-stage (blue while in progress, green on Finish) so the panel visually signals
   "this is the completing step" without needing to read the label. */
.meeting-advance-btn{
  display:inline-flex; align-items:center; gap:7px; padding:8px 16px; font-size:12.5px;
  font-weight:600; color:#fff; border:none; border-radius:8px;
  box-shadow:0 2px 8px rgba(47,95,219,.28);
  transition:transform .12s ease, box-shadow .12s ease, filter .12s ease;
}
.meeting-advance-btn i{ font-size:11px; }
.meeting-advance-btn:hover{ transform:translateY(-1px); filter:brightness(1.05); color:#fff; }
.meeting-advance-btn:active{ transform:translateY(0); filter:brightness(.97); }
.meeting-advance-btn.stage-start,
.meeting-advance-btn.stage-reached,
.meeting-advance-btn.stage-meetin{
  background:linear-gradient(135deg, var(--blue-600), var(--blue-700));
  box-shadow:0 2px 8px rgba(47,95,219,.28);
}
.meeting-advance-btn.stage-finish{
  background:linear-gradient(135deg, #1f8a55, #146b40);
  box-shadow:0 2px 8px rgba(31,138,85,.3);
}