/* ==========================================================================
   Beam Filings — brand layer
   Loaded AFTER main.min.css and dev.css, so it wins ties.
   STYLE ONLY. No logic. Safe to delete to revert brand overrides.
   Phase 1: color + type tokens.   Phase 2: chrome (sidebar, top bar, logo).
   Locked choices: forest sidebar + light work-area background.
   ========================================================================== */

:root{
  --cs-green-500:#49C358;  --cs-green-600:#2FA24E;  --cs-green-700:#1C6B3A;
  --cs-green-900:#113422;  --cs-green-950:#042715;  --cs-green-050:#EAF7EC;
  --cs-lime-400:#8CC63F;
  --cs-blue-500:var(--cs-green-500);  --cs-blue-600:var(--cs-green-600);  --cs-blue-700:var(--cs-green-700);
  --cs-blue-900:var(--cs-green-900);  --cs-blue-950:var(--cs-green-950);  --cs-blue-050:var(--cs-green-050);
  --cs-sky-400:var(--cs-lime-400);
  --cs-bg:#F4F5F3;  --cs-cream:#F5F3E8;  --cs-surface:#FFFFFF;
  --cs-ink-900:#0C1F14;  --cs-ink-600:#3F4A43;  --cs-ink-400:#5B6B62;
  --cs-border:#E4E8E5;
  --cs-focus:0 0 0 3px rgba(73,195,88,.25);
}

/* ---- Typography: DM Sans everywhere ---- */
body, .page-wrapper, .btn, .form-control, .form-select, .form-label,
input, textarea, select, button, .mantine-DataTable-root, .navbar, .card,
h1,h2,h3,h4,h5,h6, label, .badge {
  font-family:'DM Sans', system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
}

/* ---- App background (locked: light) ---- */
.page-wrapper .all-content-wrapper{ background:var(--cs-bg) !important; }

/* ---- Bootstrap primary remap: brand green ---- */
.btn-primary{
  --bs-btn-bg:#1C6B3A; --bs-btn-border-color:#1C6B3A;
  --bs-btn-hover-bg:#113422; --bs-btn-hover-border-color:#113422;
  --bs-btn-active-bg:#113422; --bs-btn-active-border-color:#113422;
  --bs-btn-disabled-bg:#1C6B3A; --bs-btn-disabled-border-color:#1C6B3A;
}
.btn-outline-primary{
  --bs-btn-color:#1C6B3A; --bs-btn-border-color:#1C6B3A;
  --bs-btn-hover-bg:#1C6B3A; --bs-btn-hover-border-color:#1C6B3A;
  --bs-btn-active-bg:#113422; --bs-btn-active-border-color:#113422;
}
a{ color:#1C6B3A; }
a:hover{ color:#113422; }
.text-primary{ color:#1C6B3A !important; }
.bg-primary{ background-color:#1C6B3A !important; }
.link-primary{ color:#1C6B3A !important; }
/* stray Bootstrap-blue helper text (e.g. "More transactions available") → muted,
   on-brand. NOTE: .badge.bg-info is intentionally left as the soft-blue "Cold"
   lead / info tag (Hot=red, Moderate=amber, Cold=blue is a temperature scale). */
.text-info:not(.badge){ color:#5B6B78 !important; }

/* ---- Status pills: success stays distinct from brand green ---- */
.badge.bg-primary, .badge.text-bg-primary{ background-color:#1C6B3A !important; }
.badge.bg-success, .badge.text-bg-success{ background-color:#2FA24E !important; }
.badge.bg-danger,  .badge.text-bg-danger { background-color:#C4362B !important; }
.badge.bg-warning, .badge.text-bg-warning{ background-color:#B7791F !important; color:#fff !important; }
.badge.bg-info,    .badge.text-bg-info   { background-color:#2C7BE5 !important; }

/* ---- Form labels: fix tan/brown -> ink ---- */
label, .form-label, .col-form-label, .form_control_label, .field__item label{
  color:var(--cs-ink-600) !important;
}

/* ---- Blue focus rings ---- */
.form-control:focus, .form-select:focus, input:focus, textarea:focus,
.field__wrap input:focus{
  border-color:var(--cs-green-500) !important;
  box-shadow:var(--cs-focus) !important;
}
.form-check-input:checked{ background-color:#1C6B3A !important; border-color:#1C6B3A !important; }
.form-check-input:focus{ box-shadow:var(--cs-focus) !important; border-color:var(--cs-green-500) !important; }

/* ---- Override leftover blues baked into dev.css (loads before this) ---- */
table.table.table-theme tr th{ background:#113422 !important; border-color:#1c5233 !important; }
.table-responsive .mantine-DataTable-root .mantine-DataTable-header th,
.table-responsive .mantine-DataTable-root thead tr th,
.table-responsive .mantine-DataTable-root [data-mantine-datatable="header"] th{
  background:#113422 !important; background-color:#113422 !important;
  border-color:#1c5233 !important; color:#fff !important;
}
.btn-theme-2{ border:1px solid #1C6B3A !important; color:#1C6B3A !important; }
.btn-theme-2:hover{ background:#EAF7EC !important; }
.section-header.client-info{ color:#1C6B3A; }
.section-header.building-info{ color:#2FA24E; }
.section-header.fines-compliance{ color:#C4362B; }
.filter-count-bubble{ background-color:#1C6B3A !important; }
.tabs-active{ color:#1C6B3A !important; }
.tabs:hover{ color:#1C6B3A !important; }

/* ==========================================================================
   PHASE 2 — CHROME
   ========================================================================== */

/* ---- Sidebar (forest green) ---- */
.left-sidebar-wrapper nav.sidebar{ background:#113422 !important; }

/* logo area: NYC Buildings mark expanded, compact when mini */
.sidebar-header{ padding:20px 12px 16px; text-align:center; }
.sidebar-header a{ display:block; }
.cs-brand-logo{
  display:block; width:auto; max-width:148px; height:auto; margin:0 auto;
  background:transparent; padding:0;
}
.cs-brand-logo-sm{ max-width:52px; }
.cs-brand-name{
  display:block; color:#fff; font-weight:700; font-size:20px; letter-spacing:.02em;
  line-height:1.2;
}
.cs-brand-mark{
  display:block; color:#fff; font-weight:700; font-size:16px; letter-spacing:.04em;
}
.mini-sidebar .cs-brand-name{ display:none; }
.sidebar-header strong{ display:none; }
.mini-sidebar .sidebar-header > a{ display:none; }
.mini-sidebar .sidebar-header strong{ display:block; }

/* nav items */
.left-nav-menu ul li a{
  color:#DBE7DF !important; border-radius:0 999px 999px 0;
  margin:1px 10px 1px 0; padding:.62rem 1rem !important;
  transition:background .18s ease, color .18s ease, box-shadow .18s ease;
}
.left-nav-menu ul li a .menu_txt{ font-weight:500; }
.left-nav-menu ul li a:hover{ background:rgba(255,255,255,.06) !important; color:#fff !important; }

/* active item: subtle green tint + bright-green indicator bar */
.theme-3 .left-nav-menu>ul>li.active>a,
.left-nav-menu .has_menu.active,
.left-nav-menu ul li a.active{
  background:rgba(73,195,88,.16) !important; color:#fff !important;
  box-shadow:inset 3px 0 0 #49C358; font-weight:600;
}
.theme-3 .left-nav-menu>ul>li.active>a:hover{ background:rgba(73,195,88,.22) !important; }

/* divider + version footer */
.left-nav-menu hr.solid{ border:0; border-top:1px solid rgba(255,255,255,.12); margin:12px 16px; }
.version .vs-mobile{ color:rgba(255,255,255,.5) !important; font-size:11px; letter-spacing:.03em; }

/* ---- Top bar ---- */
.navbar.header-navbar{ background:#fff !important; border-bottom:1px solid var(--cs-border); }
.navbar.header-navbar .menu-hamburger, .navbar.header-navbar .slideUp_header{ color:var(--cs-ink-600); }

/* profile chip + dropdown */
.user-profile .dropdown-toggle{ display:flex; align-items:center; gap:8px; }
.user-profile .dropdown-toggle span{ color:var(--cs-ink-900); font-weight:500; }
.user-profile img.img-radius{ border:1px solid var(--cs-border); }
.profile-notification.dropdown-menu{
  border:1px solid var(--cs-border); border-radius:12px;
  box-shadow:0 8px 24px rgba(16,40,28,.12); padding:6px; min-width:190px;
}
.profile-notification li a{ border-radius:8px; padding:8px 10px; color:var(--cs-ink-600); display:flex; align-items:center; gap:8px; }
.profile-notification li a:hover{ background:var(--cs-green-050); color:#113422; }

/* ==========================================================================
   PHASE 3 — LOGIN  (dark hero + skyline + spacing + autofill)
   ========================================================================== */
.pageLogin{ min-height:100vh; background:var(--cs-bg) !important; padding:0 !important; }
.pageLogin .login-wrapper{ min-height:100vh; }
.pageLogin .log__Right_sideContain{ display:none !important; }

/* left: DARK forest hero (beats the theme's lightened !important bg) */
.pageLogin .log__Left_sideContain,
.pageLogin.theme-color-1 .log__Left_sideContain{
  flex:1 1 50%;
  background:linear-gradient(165deg,#123D24 0%,#0C2E1B 55%,#08220F 100%) !important;
  display:flex; align-items:center; justify-content:center; padding:56px 48px;
  position:relative; overflow:hidden;
}
/* soft horizon glow behind the skyline */
.pageLogin .log__Left_sideContain::before{
  content:""; position:absolute; left:0; right:0; bottom:0; height:60%;
  background:radial-gradient(120% 90% at 50% 100%, rgba(73,195,88,.16), transparent 70%);
  z-index:0; pointer-events:none;
}
/* skyline silhouette */
.cs-login-skyline{ position:absolute; left:0; right:0; bottom:0; height:50%; z-index:0; pointer-events:none; }
.cs-login-skyline svg{ width:100%; height:100%; display:block; }
.cs-tw{ animation:cs-twinkle 3.6s ease-in-out infinite; }
@keyframes cs-twinkle{ 0%,100%{opacity:.18} 50%{opacity:.9} }

/* content above skyline */
.cs-login-brand{ max-width:440px; position:relative; z-index:1; }
.cs-login-logo{
  display:block; width:auto; max-width:220px; height:auto;
  margin:0 0 24px; background:transparent; padding:0;
}
.cs-login-logo-text{ color:#fff; font-weight:700; font-size:36px; letter-spacing:.02em; margin:0 0 24px; line-height:1.15; }
.cs-form-logo{
  display:block; width:auto; max-width:180px; height:auto; margin:0 auto 20px;
}
.cs-login-tagline{ color:#fff; font-weight:700; font-size:30px; line-height:1.25; margin:0 0 16px; }
.cs-login-tagline em{ color:#8CC63F; font-style:italic; }
.cs-login-sub{ color:rgba(226,236,248,.82); font-size:15px; line-height:1.55; margin:0; }

/* right: white form */
.pageLogin .Form__mainContain{
  flex:1 1 50%; background:#fff; display:flex; align-items:center; justify-content:center; padding:48px;
}
.pageLogin .wrapLogin__form{ width:100%; max-width:384px; }
.pageLogin .Login__box_wrap h2{ color:var(--cs-ink-900); font-weight:700; font-size:26px; margin:0 0 6px; text-align:center; }
.pageLogin .Login__box_wrap > p{ color:var(--cs-ink-400); text-align:center; margin-bottom:26px; font-size:14px; }

/* fields: clean single box + roomy spacing */
.pageLogin .field__item{ margin-bottom:20px; }
.pageLogin .field__item label{ display:block; font-weight:500; color:var(--cs-ink-600); font-size:13px; margin-bottom:8px; }
.pageLogin .field__wrap{ position:relative; background:transparent !important; border:0 !important; box-shadow:none !important; padding:0 !important; }
.pageLogin .field__wrap input{
  width:100%; height:48px; border:1px solid var(--cs-border); border-radius:10px;
  padding:0 16px 0 46px; font-size:14px; background:#fff; color:var(--cs-ink-900); box-shadow:none;
}
.pageLogin .field__wrap input::placeholder{ color:var(--cs-ink-400); }
.pageLogin .field__wrap input:focus{ border-color:var(--cs-green-500); box-shadow:var(--cs-focus); outline:none; }
.pageLogin .field_log_icon.icon-in-start{ position:absolute; left:15px; top:50%; transform:translateY(-50%); color:var(--cs-ink-400); font-size:16px; line-height:1; }
.pageLogin .field_log_icon.icon-in-end{ display:none; }

/* error: spaced away from the box */
.pageLogin .errorMsg{ color:#C4362B !important; font-size:12px; margin-top:7px; }

/* button */
.pageLogin button.btn-custom{
  width:100%; height:48px; background:#1C6B3A !important; color:#fff !important; border:0 !important;
  border-radius:10px; font-weight:600; font-size:15px; margin-top:8px; transition:background .2s ease; box-shadow:none;
}
.pageLogin button.btn-custom:hover{ background:#113422 !important; }

/* kill the browser autofill grey/blue background */
.pageLogin input:-webkit-autofill,
.pageLogin input:-webkit-autofill:hover,
.pageLogin input:-webkit-autofill:focus,
.pageLogin input:-webkit-autofill:active{
  -webkit-box-shadow:0 0 0 1000px #fff inset !important;
  box-shadow:0 0 0 1000px #fff inset !important;
  -webkit-text-fill-color:var(--cs-ink-900) !important;
  caret-color:var(--cs-ink-900) !important;
  border:1px solid var(--cs-border) !important;
  transition:background-color 9999s ease-in-out 0s;
}

@media (prefers-reduced-motion: reduce){ .cs-tw{ animation:none; } }
@media (max-width:820px){
  .pageLogin .log__Left_sideContain{ display:none; }
  .pageLogin .Form__mainContain{ flex-basis:100%; }
}

/* first-time contact line (bottom of form) */
.pageLogin .cs-login-help{ margin-top:30px; text-align:center; font-size:13px; color:var(--cs-ink-400); }
.pageLogin .cs-login-help a{ color:#1C6B3A; font-weight:600; text-decoration:none; }
.pageLogin .cs-login-help a:hover{ text-decoration:underline; }

/* ==========================================================================
   PHASE 4 — DASHBOARD  (+ global page-header flatten)
   ========================================================================== */
/* flatten the old banner into a clean header (applies to every page header) */
.theme-3 .all-content-wrapper .page-header{
  background:transparent !important; padding-top:26px !important;
  padding-bottom:14px !important; margin-bottom:8px !important;
}
.page-header .page-header-title h5{ font-size:22px; font-weight:700; color:var(--cs-ink-900); margin:0; }
.page-header .page-header-title span{ color:var(--cs-ink-400); font-size:13px; }
.breadcrumbBig_icon{ background:var(--cs-green-050) !important; color:#1C6B3A !important; box-shadow:none !important; }
.page-header .breadcrumb .breadcrumb-item a{ color:var(--cs-ink-400); }
.page-header .breadcrumb .breadcrumb-item:last-child a{ color:#1C6B3A; }

/* stat cards */
.cs-stat, .cs-stat-hero{
  border:1px solid var(--cs-border); border-radius:16px;
  box-shadow:0 1px 2px rgba(16,40,28,.04), 0 6px 20px rgba(16,40,28,.05);
}
.cs-stat .card-body, .cs-stat-hero .card-body{ padding:20px 22px; }
.cs-stat-top{ display:flex; align-items:flex-start; justify-content:space-between; gap:10px; }
.cs-stat-label{ font-size:13px; font-weight:500; color:var(--cs-ink-600); line-height:1.35; }
.cs-stat-num{ font-size:34px; font-weight:700; color:var(--cs-ink-900); margin-top:14px; line-height:1; letter-spacing:-.5px; }
.cs-stat-foot{ font-size:12px; color:var(--cs-ink-400); margin-top:8px; }
.cs-stat-ico{ flex-shrink:0; width:40px; height:40px; border-radius:11px; display:inline-flex; align-items:center; justify-content:center; background:var(--cs-green-050); color:#1C6B3A; font-size:18px; }
.cs-stat-ico--warn{ background:#FBF3E2; color:#B7791F; }

/* hero card (forest) */
.cs-stat-hero{ background:linear-gradient(160deg,#1C6B3A,#113422); border:0; color:#fff; }
.cs-stat-hero .cs-stat-label{ color:rgba(255,255,255,.82); }
.cs-stat-hero .cs-stat-num{ color:#fff; font-size:42px; }
.cs-stat-hero .cs-stat-foot{ color:rgba(255,255,255,.6); }
.cs-stat-hero .cs-stat-ico{ background:rgba(255,255,255,.14); color:#8CC63F; }

/* ---- Phase 4b: card hover pop + hero corner skyline ---- */
.cs-stat, .cs-stat-hero{ transition:transform .18s ease, box-shadow .18s ease; }
.cs-stat:hover, .cs-stat-hero:hover{
  transform:translateY(-4px);
  box-shadow:0 2px 4px rgba(16,40,28,.06), 0 16px 34px rgba(16,40,28,.14);
}
.cs-stat-hero{ position:relative; overflow:hidden; }
.cs-stat-hero .card-body{ position:relative; z-index:1; }
.cs-stat-hero-sky{ position:absolute; right:0; bottom:0; width:46%; max-width:190px; opacity:.55; z-index:0; pointer-events:none; }
.cs-stat-hero-sky svg{ width:100%; height:auto; display:block; }
.cs-stat-section{
  font-size:11px; font-weight:700; letter-spacing:.08em; text-transform:uppercase;
  color:var(--cs-ink-400); margin:4px 4px 10px;
}
.cs-stat-link{ display:block; color:inherit; text-decoration:none; }
.cs-stat-link:hover{ color:inherit; }
.cs-bar-row{ display:flex; align-items:center; gap:10px; margin-top:12px; }
.cs-bar-name{ flex:0 0 92px; font-size:13px; color:var(--cs-ink-600); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.cs-bar-name--wide{ flex-basis:150px; }
.cs-bar-track{ flex:1; height:8px; background:var(--cs-green-050); border-radius:99px; overflow:hidden; }
.cs-bar-fill{ height:100%; background:#1C6B3A; border-radius:99px; min-width:0; }
.cs-bar-val{ flex:0 0 46px; text-align:right; font-weight:600; font-size:13px; color:var(--cs-ink-900); }
.cs-change-split{ display:flex; gap:28px; margin-top:18px; padding-top:14px; border-top:1px solid var(--cs-border); }
.cs-change-num{ font-size:22px; font-weight:700; color:var(--cs-ink-900); }
@media (prefers-reduced-motion: reduce){
  .cs-stat:hover, .cs-stat-hero:hover{ transform:none; }
}

/* ==========================================================================
   PHASE 5 — BUTTONS, BADGES, TOASTS
   ========================================================================== */
/* button base */
.btn-custom{ border-radius:10px !important; font-weight:600; padding:.5rem .9rem; display:inline-flex; align-items:center; gap:6px; line-height:1.2; transition:transform .16s ease, background .16s ease, border-color .16s ease, color .16s ease; }
.btn-custom:hover{ transform:translateY(-1px); }
.btn-custom i{ font-size:.85em; }

/* PRIMARY (solid green) */
.btn-theme{ border:1px solid #113422 !important; }
.btn-theme:hover{ background:#0c2a19 !important; color:#fff !important; }

/* SECONDARY (outline) */
.cs-btn-outline{ background:#fff !important; border:1px solid var(--cs-border) !important; color:var(--cs-ink-600) !important; }
.cs-btn-outline:hover{ border-color:#1C6B3A !important; color:#1C6B3A !important; background:#fff !important; }
.cs-btn-outline.is-active{ background:var(--cs-green-050) !important; border-color:#1C6B3A !important; color:#113422 !important; }

/* TERTIARY (ghost) */
.cs-btn-ghost{ background:transparent !important; border:1px solid transparent !important; color:var(--cs-ink-400) !important; }
.cs-btn-ghost:hover{ background:#EEF0F3 !important; color:var(--cs-ink-900) !important; transform:none; }

/* status pills: tinted, rounded, keep the text label (accessible, not color-only) */
.badge{ border-radius:999px !important; font-weight:600 !important; padding:.36em .72em !important; letter-spacing:.01em; }
.badge.bg-success, .badge.text-bg-success{ background:#E7F6EC !important; color:#1B7A3D !important; }
.badge.bg-danger,  .badge.text-bg-danger { background:#FBEAE8 !important; color:#B4302A !important; }
.badge.bg-warning, .badge.text-bg-warning{ background:#FBF3E2 !important; color:#8A5A12 !important; }
.badge.bg-info,    .badge.text-bg-info   { background:#EAF1FB !important; color:#255FA8 !important; }
.badge.bg-primary, .badge.text-bg-primary{ background:#EAF7EC !important; color:#1C6B3A !important; }
.badge.bg-secondary,.badge.text-bg-secondary{ background:#EEF0F3 !important; color:#576370 !important; }
.badge.bg-light,   .badge.text-bg-light  { background:#F1F3F5 !important; color:#3F4A55 !important; }

/* toasts */
.Toastify__toast{ border-radius:10px !important; font-family:'DM Sans',system-ui,sans-serif; }
.Toastify__toast--success{ background:#1C6B3A !important; color:#fff !important; }
.Toastify__toast--error{ background:#C4362B !important; color:#fff !important; }
.Toastify__toast--warning{ background:#B7791F !important; color:#fff !important; }
.Toastify__toast--info{ background:#255FA8 !important; color:#fff !important; }
.Toastify__progress-bar{ background:rgba(255,255,255,.6) !important; }

/* ==========================================================================
   PHASE 6 — FORMS & INPUTS
   (the 6 react-select dropdowns are legacy/unused, so not styled here)
   ========================================================================== */
.form-control, .form-select{
  border:1px solid var(--cs-border) !important;
  border-radius:10px !important;
  color:var(--cs-ink-900);
  box-shadow:none !important;
  transition:border-color .15s ease, box-shadow .15s ease;
}
.form-control::placeholder{ color:var(--cs-ink-400); opacity:1; }
.form-control:focus, .form-select:focus{
  border-color:var(--cs-green-500) !important;
  box-shadow:var(--cs-focus) !important;
}
.form-control:disabled, .form-control[readonly]{ background:#F4F5F3; color:var(--cs-ink-600); }
textarea.form-control{ min-height:96px; }
.form-label, .col-form-label{ color:var(--cs-ink-600); font-weight:500; font-size:13px; margin-bottom:6px; }

/* selects: appearance is stripped app-wide (App.css), so add a visible grey caret */
select.form-control, select.form-select, .form-select{
  -webkit-appearance:none; -moz-appearance:none; appearance:none;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%233F4A43' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
  background-repeat:no-repeat; background-position:right 12px center; background-size:15px;
  padding-right:36px;
}

/* input-group buttons (password show/copy/generate) align with the field */

/* react-datepicker */
.react-datepicker__input-container input{
  border:1px solid var(--cs-border) !important; border-radius:10px !important; padding:.4rem .6rem;
}
.react-datepicker__input-container input:focus{ border-color:var(--cs-green-500) !important; box-shadow:var(--cs-focus) !important; outline:none; }
.react-datepicker__header{ background:var(--cs-green-050) !important; border-bottom-color:var(--cs-border) !important; }
.react-datepicker__day--selected, .react-datepicker__day--keyboard-selected, .react-datepicker__day--in-range{ background:#1C6B3A !important; color:#fff !important; }
.react-datepicker__day--today{ color:#1C6B3A; font-weight:700; }

/* selects: keep white background */
select.form-control, select.form-select, .form-select{ background-color:#fff !important; }

/* ==========================================================================
   PHASE 6b — form buttons (real fix), field icons, error spacing
   ========================================================================== */
/* This project's Bootstrap (5.1) hardcodes button colors, so the CSS-var
   remap didn't take. Override the actual color properties. */
.btn-primary{ background-color:#1C6B3A !important; border-color:#1C6B3A !important; color:#fff !important; }
.btn-primary:hover, .btn-primary:focus, .btn-primary:active, .btn-primary:disabled{ background-color:#113422 !important; border-color:#113422 !important; color:#fff !important; }
.btn-outline-primary{ color:#1C6B3A !important; border-color:#1C6B3A !important; background-color:transparent !important; }
.btn-outline-primary:hover, .btn-outline-primary:focus, .btn-outline-primary:active{ background-color:#1C6B3A !important; border-color:#1C6B3A !important; color:#fff !important; }

/* custom form label */
.form_control_label{ display:block; color:var(--cs-ink-600); font-weight:500; font-size:13px; margin-bottom:7px; }

/* error breathing room + brand color */
.errorMsg{ color:#C4362B !important; font-size:12px; margin-top:7px; display:block; }

/* leading field icons */
.cs-ipt{ position:relative; display:block; }
.cs-ipt-ico{ position:absolute; left:13px; top:50%; transform:translateY(-50%); color:var(--cs-ink-400); font-size:15px; pointer-events:none; z-index:2; }
.form-control.cs-ipt-input{ padding-left:38px !important; }

/* generic input-group radii (works with a lock prefix + trailing buttons) */
.input-group > :first-child{ border-radius:10px 0 0 10px !important; }
.input-group > :last-child{ border-radius:0 10px 10px 0 !important; }
.input-group > :not(:first-child):not(:last-child){ border-radius:0 !important; }
.input-group-text{ background:#fff !important; border:1px solid var(--cs-border) !important; color:var(--cs-ink-400) !important; }

/* ==========================================================================
   PHASE 6c — form/card CONSISTENCY + global autofill fix
   ========================================================================== */
/* consistent card header across all forms/pages */
.card-header{ border-bottom:1px solid var(--cs-border) !important; background:transparent !important; }
.card-header h5{ font-weight:700 !important; font-size:16px !important; margin:0 !important; color:var(--cs-ink-900); }
/* consistent footer button row */
.form_control_submit_container{ display:flex; justify-content:center; gap:12px; align-items:center; flex-wrap:wrap; }
/* global browser-autofill fix (kills the grey/blue fill on every form, not just login) */
input:-webkit-autofill, input:-webkit-autofill:hover, input:-webkit-autofill:focus, input:-webkit-autofill:active,
select:-webkit-autofill, textarea:-webkit-autofill{
  -webkit-box-shadow:0 0 0 1000px #fff inset !important;
  box-shadow:0 0 0 1000px #fff inset !important;
  -webkit-text-fill-color:var(--cs-ink-900) !important;
  caret-color:var(--cs-ink-900) !important;
  transition:background-color 9999s ease-in-out 0s;
}

/* ==========================================================================
   PHASE 6d — CONSISTENT CARD across every page
   ========================================================================== */
.card{
  border:1px solid var(--cs-border) !important;
  border-radius:16px !important;
  box-shadow:0 1px 2px rgba(16,40,28,.04), 0 6px 20px rgba(16,40,28,.05) !important;
}
/* dashboard hero stays borderless (forest fill) */
.cs-stat-hero{ border:0 !important; }

/* ==========================================================================
   PHASE 6e — MANTINE PAGINATION → brand blue
   ========================================================================== */
:root{
  --mantine-primary-color-filled:#1C6B3A;
  --mantine-primary-color-filled-hover:#2FA24E;
  --mantine-primary-color-light:#EAF7EC;
  --mantine-primary-color-light-hover:#dce8f8;
  --mantine-primary-color-light-color:#1C6B3A;
}
/* active page pill */
.mantine-Pagination-control[data-active],
.mantine-Pagination-control[data-active="true"]{
  background-color:var(--cs-green-700) !important;
  border-color:var(--cs-green-700) !important;
  color:#fff !important;
}
/* inactive page hover */
.mantine-Pagination-control:not([data-active]):hover{
  background-color:var(--cs-green-050) !important;
  border-color:var(--cs-green-050) !important;
  color:var(--cs-green-700) !important;
}
/* prev / next arrow controls on hover */
.mantine-Pagination-control:hover{ color:var(--cs-green-700); }

/* ==========================================================================
   PHASE 8a — BUILDING LOGS accordions (kills grey "Create Log" + Bootstrap blue)
   ========================================================================== */
/* "Create Log" header — was bg-secondary grey → brand blue */
.accordion-button.bg-secondary,
.accordion-button.bg-secondary:not(.collapsed){
  background-color:var(--cs-green-700) !important;
  color:#fff !important;
  box-shadow:none !important;
}
.accordion-button.bg-secondary::after{ filter:brightness(0) invert(1) !important; } /* white chevron */

/* individual log items when expanded — brand blue tint */
.accordion-button:not(.collapsed){
  background-color:var(--cs-green-050) !important;
  color:var(--cs-green-900) !important;
  box-shadow:none !important;
}
.accordion-button:not(.collapsed)::after{
  background-image:url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='%231C6B3A'%3e%3cpath fill-rule='evenodd' d='M1.646 4.646a.5.5 0 0 1 .708 0L8 10.293l5.646-5.647a.5.5 0 0 1 .708.708l-6 6a.5.5 0 0 1-.708 0l-6-6a.5.5 0 0 1 0-.708z'/%3e%3c/svg%3e") !important;
}
/* focus ring on any accordion button → blue */
.accordion-button:focus{
  border-color:transparent !important;
  box-shadow:var(--cs-focus) !important;
}

/* ==========================================================================
   PHASE 7 — FILTER MODAL + TABLE colour consistency
   ========================================================================== */
/* Filters / Columns tabs — active pill → brand blue */
.filter-float .nav-pills .nav-link.active,
.filter-float .nav-link.tabs.active,
.nav-pills .nav-link.tabs.active,
.nav-pills .nav-link.active{
  background-color:#1C6B3A !important;
  color:#fff !important;
}
.filter-float .nav-link.tabs{ color:#1C6B3A; }

/* all checkboxes / radios (Columns tab, filter toggles) → brand blue */
input[type="checkbox"], input[type="radio"]{ accent-color:#1C6B3A; }

/* datatable pagination active page — belt-and-suspenders on the datatable class too */
.mantine-datatable-pagination-pages-control[data-active]{
  background:#1C6B3A !important; background-color:#1C6B3A !important;
  color:#fff !important; border-color:transparent !important;
}

/* react-datepicker inside filters: blue selected day */
.filter-float .react-datepicker__day--selected,
.filter-float .react-datepicker__day--keyboard-selected,
.react-datepicker__day--selected,
.react-datepicker__day--keyboard-selected{
  background-color:#1C6B3A !important; color:#fff !important;
}

/* ==========================================================================
   PHASE 2b — SIDEBAR skyline (same silhouette + twinkle as login/hero)
   ========================================================================== */
/* NOTE: do NOT set position on nav.sidebar — the theme already positions it
   (fixed) and overriding it drops the sidebar into normal flow. The fixed
   sidebar is itself the positioning context the skyline anchors to. */
.cs-sidebar-sky{
  position:absolute; left:0; right:0; bottom:0; width:100%;
  opacity:.5; z-index:0; pointer-events:none;
}
.cs-sidebar-sky svg{ width:100%; height:auto; display:block; }
.sidebar .left-nav-menu, .sidebar .sidebar-header{ position:relative; z-index:1; }
.sidebar .version{ position:relative; z-index:1; }
/* hide the skyline when the sidebar is collapsed */
.mini-sidebar .cs-sidebar-sky{ display:none; }

/* ==========================================================================
   PHASE 7c — FILTERS DRAWER (right slide-in). Overrides App.css .filter-float
   with higher-specificity .container.filter-float. Layout/logic untouched.
   ========================================================================== */
.cs-filter-backdrop{
  position:fixed; inset:0; background:rgba(9,20,14,.38);
  z-index:1049; animation:cs-fade .2s ease;
}
@keyframes cs-fade{ from{opacity:0} to{opacity:1} }
@keyframes cs-drawer-in{ from{transform:translateX(100%)} to{transform:translateX(0)} }

.container.filter-float{
  position:fixed !important; top:0 !important; right:0 !important; bottom:0 !important; left:auto !important;
  width:460px !important; max-width:94vw !important; height:100vh !important; max-height:100vh !important;
  margin:0 !important; padding:0 !important;
  background:#fff !important; border:0 !important; border-radius:16px 0 0 16px !important;
  box-shadow:-16px 0 48px rgba(16,40,28,.22) !important;
  z-index:1050 !important; overflow:hidden !important;
  animation:cs-drawer-in .28s cubic-bezier(.2,.8,.2,1);
}
/* header / tabs bar */
.filter-float .filter-header-row{
  background:#F4F5F3 !important; margin:0 !important;
  padding:16px 20px 12px !important; border-bottom:1px solid #E4E8ED;
}
.filter-float .filter-tab-container{ padding:0 !important; }
.filter-float .nav-pills{ gap:8px; }
.filter-float .nav-link.tabs{
  padding:7px 16px !important; border-radius:9px !important; font-weight:600 !important;
  border:1px solid transparent;
}
.filter-float .nav-link.tabs:not(.active){ background:#fff; border-color:#E4E8ED; color:#1C6B3A; }
.filter-float .filter-tab-container .btn-close{ right:18px !important; opacity:1; }

/* scroll body fills the drawer under the header */
.filter-float .show-tab-filters{
  max-height:calc(100vh - 74px) !important; height:calc(100vh - 74px);
  padding:14px 20px 0 !important;
}
/* section headers */
.filter-float .accordion-header{
  background:#F7F8FA; border:1px solid #E4E8ED; border-radius:10px;
  padding:10px 12px !important; margin-top:10px;
}
.filter-float .accordion-header:hover{ background:#EEF2F7; }
.filter-float .section-header{ font-size:13px !important; font-weight:700 !important; margin-bottom:0 !important; }

/* inputs / selects / labels */
.filter-float .form-control{
  height:38px !important; padding:7px 10px !important; font-size:13px !important;
  border:1px solid #E4E8ED !important; box-shadow:none !important; border-radius:9px !important;
}
.filter-float .form_control_label{ font-size:12px !important; font-weight:600 !important; color:#3F4A55; }
.filter-float .react-datepicker__input-container input{
  height:38px !important; border:1px solid #E4E8ED !important; border-radius:9px !important; box-shadow:none !important;
}

/* sticky footer with Reset (ghost) + Apply (solid blue) */
.filter-float .form_control_submit_container{
  position:sticky; bottom:0; z-index:2;
  background:#fff !important; margin:16px -20px 0 !important; padding:14px 20px !important;
  border-top:1px solid #E4E8ED !important;
  display:flex !important; justify-content:flex-end !important; gap:12px !important;
}
.filter-float .form_control_submit_container .btn{ min-width:120px; margin:0 !important; }
.filter-float .form_control_submit_container .btn.btn-primary:first-of-type{
  background:#fff !important; color:#1C6B3A !important; border:1px solid #1C6B3A !important;
}

/* ==========================================================================
   PHASE 7d — Issue Date field (calendar icon + un-clipped popup) + section icons
   ========================================================================== */
.filter-float .react-datepicker-wrapper{ width:100%; display:block; }
.filter-float .react-datepicker__input-container input{
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%231C6B3A' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3' y='4' width='18' height='18' rx='2'/%3E%3Cline x1='16' y1='2' x2='16' y2='6'/%3E%3Cline x1='8' y1='2' x2='8' y2='6'/%3E%3Cline x1='3' y1='10' x2='21' y2='10'/%3E%3C/svg%3E");
  background-repeat:no-repeat; background-position:left 11px center; background-size:16px;
  padding-left:36px !important;
}
/* popup escapes the drawer's overflow (strategy:fixed) and sits above it */
.react-datepicker-popper.cs-dp-pop, .react-datepicker-popper{ z-index:1200 !important; }
.react-datepicker__header{ background:#F4F5F3 !important; border-bottom:1px solid #E4E8ED !important; }
.react-datepicker__day--selected, .react-datepicker__day--keyboard-selected{ background-color:#1C6B3A !important; color:#fff !important; }
.react-datepicker__day--today{ color:#1C6B3A; font-weight:700; }

/* subtle section-header icons (inherit the section colour) */
.filter-float .cs-sec-ico{ margin-right:8px; font-size:14px; opacity:.9; vertical-align:middle; }

/* ==========================================================================
   PHASE 7e — DATA TABLES: refined light header, zebra, green hover (all tables)
   real Mantine 7.6 classes; project imports LAYERED mantine css so these win.
   ========================================================================== */
.mantine-datatable{
  border:1px solid var(--cs-border) !important; border-radius:14px !important; overflow:hidden;
  box-shadow:0 1px 2px rgba(16,40,28,.04), 0 6px 20px rgba(16,40,28,.05);
}
/* header cells */
.mantine-Table-th{
  background:#F4F6F9 !important; color:#0C1520 !important;
  font-weight:700 !important; font-size:12.5px !important;
  border-bottom:1px solid var(--cs-border) !important; border-color:#E9EBEE !important;
  padding-top:11px !important; padding-bottom:11px !important;
}
/* body cells */
.mantine-Table-td{
  font-size:13px !important; color:#28323A !important; border-color:#EEF1F4 !important;
}
/* zebra + blue hover */
.mantine-datatable-row:nth-of-type(even) .mantine-Table-td{ background:#F8FAFC !important; }
.mantine-datatable-row:hover .mantine-Table-td{ background:#EAF7EC !important; }
/* sortable header hover → brand blue */
.mantine-datatable-header-cell-sortable:hover{ color:#1C6B3A !important; }

/* ==========================================================================
   PHASE 8 — DETAIL PAGES: consistent section-card headers (building + payments)
   ========================================================================== */
.card > .card-header{
  border-bottom:1px solid var(--cs-border) !important;
  font-weight:700 !important; color:#0C1520 !important; font-size:15px !important;
  position:relative; padding-left:20px !important;
}
/* subtle blue accent bar on each section header */
.card > .card-header::before{
  content:""; position:absolute; left:0; top:50%; transform:translateY(-50%);
  width:4px; height:18px; border-radius:0 3px 3px 0; background:#1C6B3A;
}
/* keep any h5 inside from double-weighting */
.card > .card-header h5{ font-weight:700 !important; }

/* ==========================================================================
   PHASE 9 — RESPONSIVENESS & ACCESSIBILITY HARDENING
   ========================================================================== */
/* --- visible keyboard focus rings (a11y) --- */
a:focus-visible, button:focus-visible, .btn:focus-visible, .btn-custom:focus-visible,
.nav-link:focus-visible, [role="button"]:focus-visible,
.mantine-Pagination-control:focus-visible, .mantine-datatable-pagination-pages-control:focus-visible,
.accordion-button:focus-visible, .form-check-input:focus-visible, .btn-close:focus-visible{
  outline:2px solid #1C6B3A !important; outline-offset:2px !important;
  box-shadow:var(--cs-focus) !important;
}
/* hide the default outline only for mouse users, keep it for keyboard */
:focus:not(:focus-visible){ outline:none; }

/* --- reduced motion: kill decorative + transition motion --- */
@media (prefers-reduced-motion: reduce){
  .cs-tw{ animation:none !important; }
  .container.filter-float, .cs-filter-backdrop{ animation:none !important; }
  .cs-stat, .card, .btn, .nav-link, .accordion-content{ transition:none !important; }
}

/* --- small screens: touch targets + full-width drawer --- */
@media (max-width:768px){
  .btn, .btn-custom, .nav-link, .mantine-Pagination-control,
  .mantine-datatable-pagination-pages-control{ min-height:40px; }
  .container.filter-float{
    width:100vw !important; max-width:100vw !important; border-radius:0 !important;
  }
  /* let dense tables scroll sideways instead of squashing */
  .table-responsive{ overflow-x:auto !important; -webkit-overflow-scrolling:touch; }
  /* stacked stat cards keep comfortable spacing */
  .cs-stat, .cs-stat-hero{ margin-bottom:2px; }
}

/* --- ensure muted helper text clears AA contrast on white --- */
.text-muted{ color:#5B6B78 !important; }

/* ==========================================================================
   POST-QA — native <select> option colour (best-effort; hover highlight in an
   OPEN native dropdown is drawn by the browser/OS and is not fully CSS-controllable)
   ========================================================================== */
select{ accent-color:#1C6B3A; }
option:checked, option[selected]{
  background:#EAF7EC !important; color:#1C6B3A !important;
  box-shadow:0 0 10px 100px #EAF7EC inset;
}
option:hover, option:focus{ background:#EAF7EC !important; color:#1C6B3A !important; }

/* ==========================================================================
   POST-QA — react-datepicker calendar (blue theme) + themed avatar
   ========================================================================== */
.react-datepicker{ border:1px solid var(--cs-border) !important; border-radius:14px !important; box-shadow:0 12px 32px rgba(16,40,28,.16) !important; font-family:'DM Sans',system-ui,sans-serif !important; overflow:hidden; padding-bottom:6px; }
.react-datepicker__header{ background:#F4F6F9 !important; border-bottom:1px solid var(--cs-border) !important; padding-top:12px !important; }
.react-datepicker__current-month{ color:#0C1520 !important; font-weight:700 !important; margin-bottom:6px; }
.react-datepicker__day-name{ color:#5B6B78 !important; font-weight:600; }
.react-datepicker__navigation-icon::before{ border-color:#1C6B3A !important; }
.react-datepicker__navigation:hover *::before{ border-color:#113422 !important; }
.react-datepicker__day{ border-radius:8px !important; color:#28323A; }
.react-datepicker__day:hover{ background:#EAF7EC !important; color:#1C6B3A !important; }
.react-datepicker__day--today{ font-weight:700 !important; color:#1C6B3A !important; }
.react-datepicker__day--selected, .react-datepicker__day--keyboard-selected{ background:#1C6B3A !important; color:#fff !important; }
.react-datepicker__day--selected:hover, .react-datepicker__day--keyboard-selected:hover{ background:#113422 !important; color:#fff !important; }
.react-datepicker__month-select, .react-datepicker__year-select{ border:1px solid var(--cs-border) !important; border-radius:8px !important; padding:3px 8px !important; background:#fff !important; accent-color:#1C6B3A; font-weight:600; }
.react-datepicker__triangle{ display:none !important; }

/* themed profile avatar (replaces the grey placeholder person) */
.cs-avatar{ display:inline-flex; align-items:center; justify-content:center; width:40px; height:40px; border-radius:50%; overflow:hidden; background:linear-gradient(170deg,#F2F6FB,#CDE0F0); }
/* user dropdown caret — force icomoon glyph (feather font isn't loaded) + visible colour */
.user-profile .dropdown-toggle .cs-caret{ font-family:'icomoon' !important; color:#3F4A55; font-size:14px; margin-left:4px; }
.cs-avatar svg{ width:100%; height:100%; display:block; }

/* ==========================================================================
   POST-QA — compact "Go to page" jump control (replaces the redundant-looking
   stacked "Page No" row; same input + handlers, just tighter presentation)
   ========================================================================== */
.cs-jump{
  display:flex; align-items:center; justify-content:flex-end; gap:8px;
  margin:6px 6px 2px 0; font-size:13px; font-weight:600; color:#5B6B78;
}
.cs-jump-label{ color:#5B6B78; }
.cs-jump-input{
  width:66px !important; height:34px !important; text-align:center;
  border:1px solid var(--cs-border) !important; border-radius:8px !important;
  padding:4px 6px !important; box-shadow:none !important;
}
.cs-jump-total{ color:#8A9197; font-weight:500; }

/* ==========================================================================
   POST-QA — table column drag-handle icon + search icon → brand blue
   ========================================================================== */
/* drag-handle grip: colour the dots only (the icon uses stroke=currentColor);
   do NOT force stroke on children or it draws a box around the grip */
.mantine-datatable-header-cell-draggable-action-icon{ color:#1C6B3A !important; background:transparent !important; border:0 !important; box-shadow:none !important; }

/* ==========================================================================
   CsSelect — custom dropdown (replaces native <select> so option hover/selection
   can be branded blue; native option lists can't be styled by CSS)
   ========================================================================== */
.cs-select{ position:relative; }
.cs-select-btn{ display:flex !important; align-items:center; justify-content:space-between; width:100%; text-align:left; cursor:pointer; background:#fff; }
.cs-select-btn:disabled{ background:#e9ecef; cursor:not-allowed; opacity:.7; }
.cs-select-value{ overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.cs-select-ph{ color:#8A9197; }
.cs-select-caret{ width:0; height:0; border-left:5px solid transparent; border-right:5px solid transparent; border-top:6px solid #5B6B78; margin-left:8px; flex:0 0 auto; transition:transform .15s; }
.cs-select.open .cs-select-caret{ transform:rotate(180deg); }
.cs-select-menu{ list-style:none; margin:0; padding:6px; background:#fff; border:1px solid var(--cs-border); border-radius:10px; box-shadow:0 12px 32px rgba(16,40,28,.16); max-height:260px; overflow-y:auto; }
.cs-select-opt{ padding:8px 12px; border-radius:7px; cursor:pointer; font-size:14px; color:#28323A; }
.cs-select-opt:hover{ background:#EAF7EC; color:#1C6B3A; }
.cs-select-opt.sel{ background:#1C6B3A; color:#fff; font-weight:600; }
.cs-select-opt.sel:hover{ background:#113422; color:#fff; }
.cs-select-opt.ph{ color:#8A9197; }

/* ==========================================================================
   POST-QA — breathing room between filter section title and its count bubble
   ========================================================================== */
.filter-count-bubble{ margin-left:10px !important; }

/* ==========================================================================
   POST-QA — optically centre the column-header info icon with the title
   (target the info ActionIcon = the one WITHOUT the hide-button class)
   ========================================================================== */
.mantine-Table-th .column-header-container .mantine-ActionIcon-root:not(.column-hide-button){
  position:relative; top:-2px;
}

/* ==========================================================================
   POST-QA — MOBILE: keep top bar on one line; stack list toolbars neatly
   ========================================================================== */
@media (max-width:768px){
  /* top navbar: search + avatar stay on one line; drop the long name text */
  .header-navbar .row{ flex-wrap:nowrap !important; }
  .header-navbar .col{ min-width:0 !important; }
  .header-navbar .navbar-container{ padding-left:8px !important; padding-right:8px !important; }
  .header-navbar .user-profile .dropdown-toggle > span:not(.cs-avatar){ display:none !important; }
  .header-navbar .user-profile .dropdown-toggle{ display:flex; align-items:center; gap:4px; }

  /* list toolbars (Buildings, Users, Admins, Claims): title on top, buttons wrap below */
  .card-header.d-flex{ flex-wrap:wrap !important; row-gap:12px; }
  .card-header .left-widget{ width:auto !important; max-width:none !important; flex:0 0 auto !important; }
  .card-header .right-widget{ width:100% !important; max-width:100% !important; margin-left:0 !important; flex:0 0 100% !important; }
  .card-header .right-widget .float-right,
  .card-header .right-widget.d-flex{
    float:none !important; display:flex !important; flex-wrap:wrap !important;
    gap:8px !important; justify-content:flex-start !important;
  }
  .card-header .right-widget .float-right > *,
  .card-header .right-widget .btn-custom{ margin:0 !important; }
}

/* ==========================================================================
   POST-QA — MOBILE overflow safety net (text/inputs staying inside their box)
   ========================================================================== */
@media (max-width:768px){
  /* global search: let the input shrink so the placeholder/text clips inside the box */
  .header-navbar .col input{ min-width:0 !important; }

  /* inputs/selects/textareas never exceed their container */
  .form-control, textarea, select, .cs-select-btn,
  input:not([type="checkbox"]):not([type="radio"]){ min-width:0 !important; max-width:100% !important; }

  /* long words/labels wrap instead of spilling out (tables excluded — they scroll) */
  .card-body .form_control_label, .form-check-label, .section-header,
  .page-header-title, .breadcrumb, h5, h6, p, label{ overflow-wrap:break-word; }

  /* radio / checkbox / small button rows wrap instead of overflowing */
  .card-body .d-flex.gap-4, .card-body .d-flex.gap-3, .card-body .d-flex.gap-2{
    flex-wrap:wrap !important; row-gap:10px !important;
  }

  /* a touch less card padding so content has room on small screens */
  .card-body{ padding-left:16px !important; padding-right:16px !important; }
}

/* ==========================================================================
   POST-QA — unify solid primary buttons: one green (#1C6B3A) + one shape
   (btn-theme was the theme's dark #113422; btn-primary was #1C6B3A — now equal)
   ========================================================================== */
.btn-custom.btn-theme, .btn-theme{
  background-color:#1C6B3A !important; border-color:#1C6B3A !important; color:#fff !important;
}
.btn-custom.btn-theme:hover, .btn-theme:hover{
  background-color:#113422 !important; border-color:#113422 !important; color:#fff !important;
}
/* Bootstrap primary buttons match the btn-custom radius/padding/weight */
.btn.btn-primary{ border-radius:10px !important; padding:.5rem .9rem !important; font-weight:600 !important; }

/* ==========================================================================
   POST-QA — profile dropdown items: keep icon fixed, wrap text under the text
   (was: "Change Password" wrapped and "Password" sat under the icon)
   ========================================================================== */
.profile-notification li a, .profile-notification li > a{
  display:flex !important; align-items:center; gap:8px; white-space:normal;
}
.profile-notification li a i{ flex:0 0 auto; width:16px; text-align:center; }

/* ==========================================================================
   POST-QA v2 — MOBILE full-screen menu = replication of the desktop sidebar
   (logo top-left, close X top-right, big tappable rows, skyline + version bottom;
    tapping any item closes the menu via onClick in header.js)
   ========================================================================== */
/* close button — only visible inside the mobile menu */
.cs-menu-close{ display:none; position:absolute; top:14px; right:14px; z-index:5; width:40px; height:40px; align-items:center; justify-content:center; background:transparent; border:0; color:#fff; font-size:22px; line-height:1; cursor:pointer; border-radius:10px; }
.cs-menu-close:hover{ background:rgba(255,255,255,.10); }

@media (max-width:768px){
  .mini-sidebar .left-sidebar-wrapper nav.sidebar{
    width:100vw !important; min-width:100vw !important; max-width:100vw !important;
    left:0 !important; top:0 !important; height:100vh !important;
    margin:0 !important; border-radius:0 !important; z-index:2000 !important; overflow-y:auto;
  }
  /* header: wordmark, left-aligned (like desktop) */
  .mini-sidebar .left-sidebar-wrapper .sidebar-header{ display:flex !important; align-items:center; justify-content:flex-start; padding:18px 20px !important; }
  .mini-sidebar .left-sidebar-wrapper .sidebar-header > a{ display:block !important; }
  .mini-sidebar .left-sidebar-wrapper .sidebar-header strong{ display:none !important; }
  .mini-sidebar .cs-brand-name, .mini-sidebar .cs-brand-logo{ display:block !important; margin-top:0; text-align:left; }
  .mini-sidebar .cs-menu-close{ display:flex !important; }
  /* labels + big tappable rows */
  .mini-sidebar .left-sidebar-wrapper span.menu_txt{ display:inline-block !important; }
  .mini-sidebar .left-nav-menu{ height:auto !important; max-height:none !important; overflow:visible !important; padding-top:4px; }
  .mini-sidebar .left-nav-menu ul li a{ display:flex !important; align-items:center; gap:14px; padding:1rem 1.4rem !important; font-size:1.05rem !important; }
  /* uniform icon slot: same width + no boxed icon-wrap, so labels line up */
  .mini-sidebar .left-nav-menu ul li a > span:first-child,
  .mini-sidebar .left-nav-menu ul li a > i:first-child{
    flex:0 0 26px !important; width:26px !important; min-width:26px; text-align:center;
    font-size:1.2rem !important; display:inline-flex; align-items:center; justify-content:center;
    padding:0 !important; margin:0 !important; background:transparent !important; border:0 !important; box-shadow:none !important; border-radius:0 !important;
  }
  /* keep the skyline visible and pin the version to the bottom */
  .mini-sidebar .cs-sidebar-sky{ display:block !important; }
  .mini-sidebar .version{ position:absolute !important; bottom:14px; left:0; right:0; text-align:center; z-index:2; }
}

/* ==========================================================================
   POST-QA — Dashboard header: drop the redundant "home / Dashboard" breadcrumb
   (repeats the big home icon + title; only rendered on the Dashboard)
   ========================================================================== */
.page-header .page-header-breadcrumb{ display:none !important; }
@media (max-width:768px){
  .page-header{ padding-bottom:0 !important; }
  .page-header-title{ flex-wrap:nowrap !important; gap:12px; align-items:center; }
  .page-header-title .breadcrumbBig_icon{ flex:0 0 auto; }
}

/* ==========================================================================
   POST-QA v2.4 — FORM FIELD LAYOUT (app-wide): stop labels touching boxes and
   fields crowding each other, on BOTH desktop and mobile.
   Root cause was react-datepicker's wrapper defaulting to inline-block, so the
   label flowed inline against the box (and the height mismatch shoved sibling
   action buttons out of line). Generalise the block layout to every page.
   ========================================================================== */
/* every date field behaves like a normal block form control: label on top,
   full-width box below (was inline-block → label jammed beside the box) */
.react-datepicker-wrapper{ width:100% !important; display:block !important; }
.react-datepicker__input-container{ display:block !important; width:100% !important; }
.react-datepicker__input-container input{ width:100% !important; box-sizing:border-box; }

/* label always sits clearly above its control (never touching), everywhere */
.card-body .form-label,
.card-body label:not(.form-check-label):not(.cs-select-opt),
.form_control_label{ display:block; margin-bottom:6px; }

/* Filter rows (date + action button, e.g. Payments history): with both the date
   columns and the button column now label-on-top + block control, their heights
   match, so the action button (Refresh/Apply) lines up with the date boxes on the
   same row instead of floating low or off to the side. The existing `&nbsp;`
   spacer label in those columns keeps that alignment; no JS change needed. */

/* comfortable vertical gap between fields that share a row (both when they sit
   side by side and when they stack) — kills the "boxes near-touching" look */
.card-body .row{ row-gap:16px; }

@media (max-width:768px){
  /* On phones `col-md-*`/`col-lg-*` fields are only sized at >=768px, so they sit
     content-width side by side and crowd; force just those to stack full width with
     a clear gap. Plain col-* (col-5, col-6 …) are intentionally sized on mobile too,
     so we leave them alone to avoid restacking deliberate layouts. */
  .card-body .row{ row-gap:14px; }
  .card-body .row [class*="col-md-"],
  .card-body .row [class*="col-lg-"]{ width:100% !important; flex:0 0 100% !important; }
  /* only the datepicker INPUT field goes full width — not an inline calendar
     (react-datepicker--inline keeps its natural grid size) */
  .card-body .react-datepicker-wrapper,
  .card-body .cs-select{ width:100% !important; }
}