/* =====================================================================
   Habitat UX layer
   Loaded globally after each page's stylesheet. Polishes the shared
   components (header, sidebar, tables, badges, forms, toasts) without
   rewriting the individual views. Depends on the palette in style.css.
   ===================================================================== */

:root {
  --ux-radius: 10px;
  --ux-radius-sm: 6px;
  --ux-shadow: 0 1px 2px rgba(0, 27, 12, .06), 0 4px 16px rgba(0, 27, 12, .06);
  --ux-shadow-hover: 0 6px 20px rgba(0, 27, 12, .12);
  --ux-border: #e1e8e3;
  --ux-muted: #66756c;
  --ux-surface: #f5f8f6;
  --ux-gap: 20px;          /* the one gap between cards, columns and sections */
  --ux-control-h: 44px;    /* form controls: inputs, selects and their buttons */
  --ux-control-h-sm: 38px; /* dense toolbar controls */
}

/* ---------- Base ---------- */
body.app-body:has(.sidebar) { background: var(--ux-surface) !important; }
body.app-body { color: var(--ink); }
/* Auth pages (no sidebar): a centred white card on the brand gradient */
body.app-body:not(:has(.sidebar)) .card { border: 0 !important; border-radius: 16px !important; box-shadow: 0 20px 60px rgba(0,27,12,.35) !important; }
body.app-body:not(:has(.sidebar)) .logo_name { text-shadow: 0 1px 2px rgba(0,0,0,.3); }
.task__section { background-color: transparent; }
*:focus-visible { outline: 2px solid var(--accent-2); outline-offset: 2px; border-radius: 4px; }
a { transition: color .15s ease; }

/* ---------- Page header ---------- */
.task__section .text.header-text {
  position: sticky; top: 0; z-index: 20;
  width: 100%;
  padding: 14px 24px;
  font-size: 20px;
  font-weight: 700 !important;
  color: var(--ink);
  background: rgba(255, 255, 255, .92);
  backdrop-filter: saturate(160%) blur(8px);
  box-shadow: 0 1px 0 var(--ux-border);
  margin-bottom: 14px;
}
.header-text span {
  font-size: 13px; font-weight: 500; color: var(--ux-muted);
  background: var(--ux-surface); border: 1px solid var(--ux-border);
  padding: 4px 12px; border-radius: 999px; white-space: nowrap;
}
.header-text span b { color: var(--primary); }

/* ---------- Page title row ---------- */
.board-title { padding: 6px 24px 10px; flex-wrap: wrap; gap: 10px; }
.board-title h1 { font-size: 22px; font-weight: 700; color: var(--ink); letter-spacing: -.01em; }
.board-title h1::before {
  content: ""; display: inline-block; width: 4px; height: 20px; margin-right: 10px;
  vertical-align: -3px; border-radius: 2px; background: var(--accent);
}
.board-title .btn, .board-title .btn-sm { border-radius: var(--ux-radius-sm); padding: 8px 16px; font-weight: 600; font-size: 13px; }
.board-title form { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.board-title label { color: var(--ux-muted); font-size: 13px; }
.board-title input[type=date], .board-title input[type=month], .board-title select {
  border: 1px solid var(--ux-border); border-radius: var(--ux-radius-sm); padding: 6px 10px; background: #fff; font-size: 13px;
}
.flex { padding: 0 24px; }

/* ---------- Cards / white panels ---------- */
.col-md-12.rounded.p-3.bg-white, .rounded.bg-white {
  border-radius: var(--ux-radius) !important;
  box-shadow: var(--ux-shadow);
  border: 1px solid var(--ux-border);
}
.db-box-content {
  border-radius: var(--ux-radius) !important; border: 1px solid var(--ux-border) !important;
  box-shadow: var(--ux-shadow) !important;
  transition: transform .18s ease, box-shadow .18s ease;
}
a.td-none:hover .db-box-content { transform: translateY(-3px); box-shadow: var(--ux-shadow-hover) !important; }
.box-icon i {
  font-size: 34px !important; margin-top: 0 !important;
  width: 64px; height: 64px; display: inline-flex; align-items: center; justify-content: center;
  border-radius: 16px; background: rgba(var(--accent-rgb), .10); color: var(--accent);
}
.box-subtitle h2 { font-size: 30px !important; letter-spacing: -.02em; }
.box-subtitle h3, .box-subtitle p { color: var(--ux-muted) !important; font-weight: 500; }

/* ---------- Tables ---------- */
.ux-table-wrap { position: relative; overflow-x: auto; -webkit-overflow-scrolling: touch; border-radius: var(--ux-radius-sm); }
.ux-table-wrap.has-overflow::after {
  content: ""; position: absolute; top: 0; right: 0; bottom: 0; width: 28px; pointer-events: none;
  background: linear-gradient(to right, rgba(255,255,255,0), #fff);
}
table.dataTable { border-collapse: separate !important; border-spacing: 0; }
table.dataTable thead th {
  font-size: 12px; text-transform: uppercase; letter-spacing: .04em; font-weight: 700;
  color: var(--ux-muted); background: var(--ux-surface);
  border-bottom: 1px solid var(--ux-border) !important; padding: 12px 10px !important;
}
table.dataTable thead th:first-child { border-top-left-radius: var(--ux-radius-sm); }
table.dataTable thead th:last-child  { border-top-right-radius: var(--ux-radius-sm); }
table.dataTable tbody td { padding: 12px 10px !important; vertical-align: middle; border-bottom: 1px solid var(--ux-border) !important; font-size: 14px; }
table.dataTable tbody tr { background: #fff !important; transition: background .12s ease; }
table.dataTable tbody tr.odd, table.dataTable tbody tr.even { background: #fff !important; }
table.dataTable tbody tr:hover { background: rgba(var(--accent-rgb), .045) !important; }
table.dataTable tfoot { display: none; }             /* duplicate header row at the bottom */
table.dataTable.no-footer { border-bottom: 0 !important; }
.dataTables_wrapper .dataTables_length select,
.dataTables_wrapper .dataTables_filter input {
  border: 1px solid var(--ux-border); border-radius: var(--ux-radius-sm); padding: 6px 10px; background: #fff;
}
.dataTables_wrapper .dataTables_filter input { width: 220px; padding-left: 32px;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='%236b7a70' viewBox='0 0 16 16'%3E%3Cpath d='M11.742 10.344a6.5 6.5 0 1 0-1.397 1.398l3.85 3.85a1 1 0 0 0 1.415-1.414zM12 6.5a5.5 5.5 0 1 1-11 0 5.5 5.5 0 0 1 11 0'/%3E%3C/svg%3E");
  background-repeat: no-repeat; background-position: 10px center; }
.dataTables_wrapper .dataTables_filter label, .dataTables_wrapper .dataTables_length label { color: var(--ux-muted); font-size: 13px; }
.dataTables_wrapper .dataTables_info { color: var(--ux-muted); font-size: 13px; padding-top: 14px !important; }
.dataTables_wrapper .dataTables_paginate { padding-top: 10px; }
.dataTables_wrapper .dataTables_paginate .paginate_button {
  border-radius: var(--ux-radius-sm) !important; border: 1px solid transparent !important; padding: 5px 11px !important; font-size: 13px;
}
.dataTables_wrapper .dataTables_paginate .paginate_button.current,
.dataTables_wrapper .dataTables_paginate .paginate_button.current:hover {
  background: var(--primary) !important; color: #fff !important; border-color: var(--primary) !important;
}
.dataTables_wrapper .dataTables_paginate .paginate_button:hover { background: rgba(var(--accent-rgb), .08) !important; color: var(--primary) !important; border-color: transparent !important; }
table.dataTable tbody td.dataTables_empty { padding: 44px 10px !important; color: var(--ux-muted); font-size: 14px; }
table.dataTable tbody td.dataTables_empty::before {
  content: ""; display: block; width: 44px; height: 44px; margin: 0 auto 10px; opacity: .7;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%236b7a70' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M21 8v13H3V8'/%3E%3Cpath d='M1 3h22v5H1z'/%3E%3Cpath d='M10 12h4'/%3E%3C/svg%3E") center/contain no-repeat;
}

/* ---------- Badges (status / role chips) ---------- */
a.notify, span.notify {
  text-decoration: none !important;
  border-radius: 999px; padding: 4px 11px; font-size: 12px; font-weight: 600; line-height: 1.4;
  letter-spacing: .01em; white-space: nowrap; border: 1px solid transparent;
}
a.notify:not([href]):not(.userrowdelete):not(.billrowdelete):not(.paymentrowdelete):not(.qryrowdelete):not(.qryrowstatus):not(.dvisitor) { cursor: default; }
.notify.alert-success { background: rgba(var(--accent-rgb), .12); color: var(--accent); border-color: rgba(var(--accent-rgb), .18); }
.notify.alert-info    { background: rgba(var(--primary-rgb), .08); color: var(--primary); border-color: rgba(var(--primary-rgb), .14); }
.notify.alert-warning { background: rgba(var(--accent-3-rgb), .22); color: #7a5b00; border-color: rgba(var(--accent-3-rgb), .35); }
.notify.alert-danger  { background: #fdecec; color: #b42318; border-color: #f8d0cc; }
.notify.alert-secondary, .notify.alert-default, .notify.alert-light { background: var(--ux-surface); color: var(--ux-muted); border-color: var(--ux-border); }
.notify.alert-primary { background: rgba(var(--accent-bright-rgb), .35); color: var(--primary); border-color: rgba(var(--accent-bright-rgb), .6); }
.notify.bg-success, .notify.bg-warning, .notify.bg-danger { color: #fff; }

/* Icon-only action buttons inside tables */
td a.notify[title], td a.notify-btn[title], td .notify i.bx, td .notify-btn i.bx { font-size: 15px; }
td a.notify:has(> i.bx), td a.notify-btn:has(> i.bx) {
  width: 32px; height: 32px; padding: 0; display: inline-flex; align-items: center; justify-content: center;
  border-radius: 8px; margin: 1px; cursor: pointer;
  transition: transform .12s ease, box-shadow .12s ease, background .12s ease;
}
td a.notify:has(> i.bx):hover, td a.notify-btn:has(> i.bx):hover { transform: translateY(-1px); box-shadow: 0 3px 8px rgba(0,27,12,.14); }
td a.notify.alert-primary:has(> i.bx):hover { background: var(--accent-bright); }
td a.notify.alert-danger:has(> i.bx):hover  { background: #f8d0cc; }
td a.notify.alert-info:has(> i.bx):hover    { background: rgba(var(--primary-rgb), .16); }

/* ---------- Buttons ---------- */
.btn { border-radius: var(--ux-radius-sm); font-weight: 600; transition: transform .12s ease, box-shadow .12s ease, background .12s ease; }
.btn:not(.btn-trans):not(.btn-link):hover { transform: translateY(-1px); box-shadow: 0 4px 12px rgba(0,27,12,.14); }
.btn:active { transform: translateY(0); box-shadow: none; }
.btn.is-loading { position: relative; color: transparent !important; pointer-events: none; }
.btn.is-loading::after {
  content: ""; position: absolute; inset: 0; margin: auto; width: 18px; height: 18px;
  border: 2px solid rgba(255,255,255,.45); border-top-color: #fff; border-radius: 50%;
  animation: ux-spin .7s linear infinite;
}
.btn-light.is-loading::after, .btn-warning.is-loading::after { border-color: rgba(0,27,12,.25); border-top-color: var(--ink); }
@keyframes ux-spin { to { transform: rotate(360deg); } }

/* ---------- Forms ---------- */
label.small, .form-group label, .form-label {
  color: var(--ink) !important; font-size: 13px !important; font-weight: 600; margin-bottom: 4px; display: inline-block;
}
label.small::after, .form-group > label::after { content: ""; }
.form-group { margin-bottom: 14px; }
.input-group { border-radius: var(--ux-radius-sm); overflow: hidden; }
.input-group input, .input-group select, .input-group textarea, .input-group input:active, .form-control {
  border: 1px solid var(--ux-border) !important; background: #fff !important; font-size: 14px;
  transition: border-color .15s ease, box-shadow .15s ease;
}
.input-group input:focus, .input-group select:focus, .input-group textarea:focus, .form-control:focus {
  border-color: var(--accent-2) !important; box-shadow: 0 0 0 3px rgba(var(--accent-rgb), .14) !important;
}
.input-group .input-icon { background: rgba(var(--accent-rgb), .10); }
.input-group select.form-control[style*="pointer-events: none"] { background: var(--ux-surface) !important; color: var(--ux-muted); }
::placeholder { color: #9aa79f !important; }
.box-title { font-size: 20px !important; font-weight: 700 !important; color: var(--ink); }
.text-danger:not(.btn):not(.alert):not(td):not(.notify) { font-weight: 500; }
.sub-title-3, .card-title { color: var(--ink); }
.card { border-radius: var(--ux-radius) !important; border-color: var(--ux-border) !important; }
.form-text, .help-text { color: var(--ux-muted); font-size: 12px; }
.is-invalid, .input-group.is-invalid input { border-color: #b42318 !important; }
.invalid-feedback { display: block; color: #b42318; font-size: 12px; margin-top: 4px; }

/* ---------- Sidebar ---------- */
.sidebar .nav-list li a { border-radius: 8px; margin: 2px 8px; transition: background .12s ease, color .12s ease; }
.sidebar .nav-list li a:hover { background: rgba(255,255,255,.08) !important; }
.sidebar .nav-list li a.ux-active {
  background: rgba(var(--accent-bright-rgb), .16) !important; color: var(--accent-bright) !important;
  box-shadow: inset 3px 0 0 var(--accent-bright);
}
.sidebar .nav-list li a.ux-active i, .sidebar .nav-list li a.ux-active .link_name { color: var(--accent-bright) !important; }
span.divider.ux-active-group { color: #fff !important; }
.sidebar .nav-list li a .link_name { transition: none; }

/* ---------- Toast / flash ---------- */
.response-msg .alert {
  display: flex; align-items: center; gap: 10px;
  min-width: 300px; max-width: 520px;
  border-radius: var(--ux-radius) !important; padding: 12px 40px 12px 14px !important;
  font-size: 14px; font-weight: 500;
  border-left: 4px solid var(--accent) !important;
  background: #fff !important; color: var(--ink) !important;
  box-shadow: 0 10px 30px rgba(0,27,12,.22) !important;
  animation: ux-toast-in .28s cubic-bezier(.2,.8,.2,1);
}
.response-msg .alert.ux-error { border-left-color: #b42318 !important; }
.response-msg .alert::before {
  content: ""; flex: 0 0 22px; width: 22px; height: 22px; border-radius: 50%;
  background: var(--accent) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='%23fff'%3E%3Cpath d='M13.485 1.929a1 1 0 0 1 .03 1.414l-7.5 8a1 1 0 0 1-1.44.02l-3.5-3.5a1 1 0 1 1 1.414-1.414L5.3 9.257l6.77-7.3a1 1 0 0 1 1.414-.03z'/%3E%3C/svg%3E") center/12px no-repeat;
}
.response-msg .alert.ux-error::before {
  background-color: #b42318;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='%23fff'%3E%3Cpath d='M8 1a7 7 0 1 0 0 14A7 7 0 0 0 8 1zm0 3.5a.9.9 0 0 1 .9.9v3.2a.9.9 0 1 1-1.8 0V5.4a.9.9 0 0 1 .9-.9zm0 7.2a1 1 0 1 1 0-2 1 1 0 0 1 0 2z'/%3E%3C/svg%3E");
}
.response-msg .alert .btn-close { position: absolute; right: 10px; top: 50%; transform: translateY(-50%); opacity: .5; }
.response-msg .alert ul { margin: 0; padding-left: 16px; }
.response-msg.ux-hide .alert { animation: ux-toast-out .25s ease forwards; }
@keyframes ux-toast-in  { from { opacity: 0; transform: translateY(16px) scale(.98); } to { opacity: 1; transform: none; } }
@keyframes ux-toast-out { to { opacity: 0; transform: translateY(12px); } }

/* ---------- Popups (SweetAlert / custom modals) ---------- */
.swal-modal { border-radius: 14px; }
.swal-button { border-radius: var(--ux-radius-sm); font-weight: 600; }
.swal-button--confirm { background: var(--primary); }
.swal-button--danger { background: #b42318; }
.pop-table th { color: var(--ux-muted); font-weight: 600; font-size: 13px; }
.pop-table td { font-size: 14px; }

/* ---------- Scrollbars ---------- */
::-webkit-scrollbar { width: 8px; height: 8px; }
::-webkit-scrollbar-thumb { background: rgba(var(--accent-rgb), .45); }
::-webkit-scrollbar-thumb:hover { background: var(--accent); }

/* ---------- Mobile ---------- */
@media (max-width: 767px) {
  .task__section .text.header-text { padding: 10px 14px; font-size: 16px; overflow: hidden; }
  .header-text span { font-size: 11px; padding: 3px 9px; }
  .board-title { padding: 4px 14px 8px; }
  .board-title h1 { font-size: 18px; }
  .flex { padding: 0 12px; }
  .col-md-12.rounded.p-3.bg-white { padding: 10px !important; }
  .dataTables_wrapper .dataTables_filter { text-align: left; margin-top: 6px; }
  .dataTables_wrapper .dataTables_filter input { width: 100%; }
  .dataTables_wrapper .dataTables_length, .dataTables_wrapper .dataTables_filter { float: none; width: 100%; }
  table.dataTable tbody td, table.dataTable thead th { white-space: nowrap; }
  .response-msg { bottom: 84px; padding: 0 12px; }
  .response-msg .alert { min-width: 0; width: 100%; }
  nav.navbar.fixed-bottom.mobile { box-shadow: 0 -4px 16px rgba(0,27,12,.18); }
  nav.navbar.fixed-bottom.mobile .nav-link { font-size: 11px; opacity: .8; }
  nav.navbar.fixed-bottom.mobile .nav-link.active { opacity: 1; color: var(--accent-bright) !important; }
  nav.navbar.fixed-bottom.mobile .nav-link i { font-size: 20px; }
}

/* ---------- Print ---------- */
@media print {
  .sidebar, nav.navbar.mobile, .board-title .btn, .dataTables_filter, .dataTables_length, .dataTables_paginate, .response-msg { display: none !important; }
  .task__section { left: 0 !important; width: 100% !important; }
}

/* ---------- Dashboard: quick actions & activity panels ---------- */
.ux-quick { display: flex; flex-wrap: wrap; gap: 12px; margin: 0; }
.ux-quick-btn {
  display: inline-flex; align-items: center; gap: 8px; padding: 10px 16px;
  background: #fff; border: 1px solid var(--ux-border); border-radius: 999px;
  color: var(--ink); font-size: 13px; font-weight: 600; text-decoration: none;
  box-shadow: var(--ux-shadow); transition: transform .12s ease, box-shadow .12s ease, border-color .12s ease;
}
.ux-quick-btn i { font-size: 18px; color: var(--accent); }
.ux-quick-btn:hover { transform: translateY(-2px); box-shadow: var(--ux-shadow-hover); border-color: rgba(var(--accent-rgb), .4); color: var(--primary); }
.ux-panel { background: #fff; border: 1px solid var(--ux-border); border-radius: var(--ux-radius); box-shadow: var(--ux-shadow); padding: 0px 0 0px; height: 100%; }
.ux-panel-head { display: flex; align-items: center; justify-content: space-between; padding: 10px 18px 8px; border-bottom: 1px solid var(--ux-border); }
.ux-panel-head h3 { font-size: 15px; font-weight: 700; margin: 0; color: var(--ink); display: flex; align-items: center; gap: 8px; text-transform: none; }
.ux-panel-head h3 i { color: var(--accent); font-size: 18px; }
.ux-panel-head a { font-size: 12.5px; font-weight: 600; color: var(--accent); text-decoration: none; }
.ux-panel-head a:hover { text-decoration: underline; }
.ux-row { display: flex; align-items: center; gap: 12px; padding: 10px 18px; border-bottom: 1px solid #f0f3f1; color: inherit; text-decoration: none; }
.ux-row:last-child { border-bottom: 0; }
.ux-row-link { transition: background .12s ease; }
.ux-row-link:hover { background: rgba(var(--accent-rgb), .045); color: inherit; }
.ux-row-body { flex: 1; min-width: 0; }
.ux-row-title { font-size: 14px; font-weight: 600; color: var(--ink); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; text-transform: none; }
.ux-row-title small { font-weight: 500; color: var(--ux-muted); margin-left: 6px; }
.ux-row-sub { font-size: 12.5px; color: var(--ux-muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ux-avatar { flex: 0 0 38px; width: 38px; height: 38px; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center;
  background: rgba(var(--accent-rgb), .12); color: var(--accent); font-weight: 700; font-size: 15px; }
.ux-avatar-warn { background: rgba(var(--accent-3-rgb), .25); color: #7a5b00; }
.ux-avatar-flat { border-radius: 10px; font-size: 12px; background: rgba(var(--primary-rgb), .08); color: var(--primary); }
.ux-date { flex: 0 0 44px; text-align: center; background: rgba(var(--accent-rgb), .10); border-radius: 10px; padding: 4px 0; line-height: 1.1; }
.ux-date b { display: block; font-size: 17px; color: var(--primary); }
.ux-date small { font-size: 11px; color: var(--accent); font-weight: 600; text-transform: uppercase; }
.ux-amount { font-weight: 700; color: #b42318; font-size: 14px; white-space: nowrap; }
.ux-chev { color: #b8c2bb; font-size: 20px; }
.ux-empty { padding: 26px 18px; text-align: center; color: var(--ux-muted); font-size: 13.5px; }
.ux-empty a { color: var(--accent); font-weight: 600; }
@media (max-width: 767px) { .ux-quick-btn { padding: 9px 12px; font-size: 12.5px; } }

/* ---------- Owner dashboard: security level + pay now ---------- */
.ux-level { display: inline-block; padding: 4px 14px; border-radius: 999px; font-size: 18px; font-weight: 700; letter-spacing: .02em; }
.ux-level-strong { background: rgba(var(--accent-rgb), .12); color: var(--accent); }
.ux-level-mild   { background: rgba(var(--accent-3-rgb), .25); color: #7a5b00; }
.ux-level-off    { background: var(--ux-surface); color: var(--ux-muted); }
.box-subtitle h3 .ux-link { color: var(--accent); font-weight: 600; text-transform: none; }
.ux-paynow { text-align: left; }
.ux-paynow h4 i { color: var(--accent); vertical-align: -2px; }
.ux-paynow-note { font-size: 12.5px; color: var(--ux-muted); margin-bottom: 10px; }
.ux-paynow .ux-empty i { display: block; font-size: 34px; color: var(--accent); opacity: .7; margin-bottom: 6px; }
.ux-paynow #qrcodeimg { display: flex; justify-content: center; padding: 8px; background: #fff; border: 1px solid var(--ux-border); border-radius: 10px; }
.ux-paynow #qrcodeimg img, .ux-paynow #qrcodeimg canvas { max-width: 200px; height: auto !important; }
.ux-copy { display: flex; margin: 10px 0; }
.ux-copy .copy-input { flex: 1; border: 1px solid var(--ux-border); border-right: 0; border-radius: 8px 0 0 8px; padding: 8px 10px; font-size: 13px; background: var(--ux-surface); }
.ux-copy .copy-btn { border: 1px solid var(--ux-border); background: #fff; border-radius: 0 8px 8px 0; padding: 0 12px; color: var(--accent); cursor: pointer; }
.ux-copy .copy-btn:hover { background: rgba(var(--accent-rgb), .08); }
.ux-dl { display: grid; grid-template-columns: auto 1fr; gap: 6px 14px; margin: 6px 0 0; font-size: 13.5px; }
.ux-dl dt { color: var(--ux-muted); font-weight: 500; }
.ux-dl dd { margin: 0; font-weight: 600; color: var(--ink); word-break: break-all; }

/* The legacy stylesheet capitalises every <p>; sentences should read naturally. */
p, .ux-row-sub, .ux-empty, td, .swal-text { text-transform: none; }

/* ---------- Mobile layout fixes (pre-existing overflow) ---------- */
@media (max-width: 767px) {
  html, body { overflow-x: hidden; }
  .task__section { left: 0 !important; width: 100% !important; overflow-x: hidden; padding-bottom: 90px; }
  .flex > [class*="col-"], .flex > .col { flex: 0 0 100%; width: 100%; max-width: 100%; }
  .row > [class*="col-"] { min-width: 0; }
  .db-box-content { padding: 16px 16px !important; }
  .box-icon i { width: 48px; height: 48px; font-size: 26px !important; }
  .box-subtitle h2 { font-size: 22px !important; }
  .box-subtitle h3 { font-size: 12px; }
  .board-title .btn-group-lg, .board-title .group-btn { width: 100%; }
  .board-title .btn-group-lg .btn, .board-title .group-btn .btn { flex: 1; }
  .ux-quick { gap: 8px; }
  .ux-quick-btn { flex: 1 1 calc(50% - 8px); justify-content: center; }
  .ux-row-title, .ux-row-sub { white-space: normal; }
  .task__section .text.header-text > span { max-width: 45%; overflow: hidden; text-overflow: ellipsis; }
  .task__section .text.header-text form, .task__section .text.header-text select { max-width: 45%; }
}
@media (max-width: 767px) {
  /* legacy rule floated action icons, stacking them vertically in narrow cells */
  table tbody tr td:last-child { white-space: nowrap; }
  table tbody tr td:last-child a { float: none !important; display: inline-flex !important; width: 30px !important; height: 30px !important; line-height: 1 !important; padding: 0 !important; margin: 1px !important; }
  /* stat cards two-up */
  /* stat cards two-up — but never override an explicit mobile width */
  .row > .col-xl-4:not([class*="col-12"]):not([class*="col-sm-"]):not([class*="col-md-"]),
  .row > .col-lg-4:not([class*="col-12"]):not([class*="col-sm-"]):not([class*="col-md-"]),
  .row > .col-xl-3:not([class*="col-12"]):not([class*="col-sm-"]):not([class*="col-md-"]),
  .row > .col-lg-3:not([class*="col-12"]):not([class*="col-sm-"]):not([class*="col-md-"]),
  .row > .col-xl-6.col-lg-6.col-md-6 { flex: 0 0 50%; max-width: 50%; }
  .db-box-content { flex-direction: column; align-items: flex-start; gap: 6px; }
  .db-box-content .box-subtitle { text-align: left; width: 100%; }
  .task__section .text.header-text select, .task__section .text.header-text form { max-width: 48%; min-width: 130px; }
}

/* ---------- Form section dividers ---------- */
form h3.h5, form h5.sub-title-3, form .sub-title-3 {
  display: flex; align-items: center; gap: 12px; text-align: left !important;
  font-size: 13px !important; font-weight: 700 !important; letter-spacing: .06em; text-transform: uppercase;
  color: var(--accent) !important; margin: 18px 0 6px;
}
form h3.h5::after, form .sub-title-3::after { content: ""; flex: 1; height: 1px; background: var(--ux-border); }
form .box-title + hr, .box-title + hr { opacity: .35; }
/* the "Generate" action is primary, not destructive */
.board-title a.btn-danger.bg-danger[title*="Generate"] { background: var(--primary) !important; border-color: var(--primary) !important; }


/* ---------- Brand v2: sidebar #045C35, active #F4E51C, primary #087A45, CTA #F4E51C ---------- */
h1, h2, h3, h4, h5, h6, .box-title, .board-title h1 { color: var(--ink); }
.sidebar, .mobile-sidebar { background: linear-gradient(180deg, var(--sidebar), var(--sidebar-dark)) !important; }
.sidebar .nav-list li a.ux-active {
  background: rgba(var(--accent-bright-rgb), .14) !important; color: var(--accent-bright) !important;
  box-shadow: inset 3px 0 0 var(--accent-bright);
}
.sidebar .nav-list li a.ux-active i, .sidebar .nav-list li a.ux-active .link_name { color: var(--accent-bright) !important; }
span.divider.ux-active-group { color: var(--accent-bright) !important; }
nav.navbar.fixed-bottom.mobile { background: var(--sidebar-dark) !important; }
nav.navbar.fixed-bottom.mobile .nav-link.active { color: var(--accent-bright) !important; }
/* CTA / important actions: yellow with dark text */
.btn-warning, .btn-warning:hover, .btn-warning:focus, .btn-warning:active,
.board-title a.btn-danger.bg-danger[title*="Generate"] { background: var(--cta) !important; border-color: var(--cta) !important; color: var(--cta-ink) !important; }
.btn-warning:hover, .board-title a.btn-danger.bg-danger[title*="Generate"]:hover { background: var(--accent-gold-2) !important; border-color: var(--accent-gold-2) !important; }
.btn-warning.bg-warning { background: var(--cta) !important; }
/* Icons: green by default, yellow on the sidebar/dark surfaces */
.box-icon i, .ux-quick-btn i, .ux-panel-head h3 i, .ux-paynow h4 i { color: var(--accent); }
.sidebar .nav-list li a i, .mobile-sidebar .nav-list li a i { color: #fff; }
.sidebar .nav-list li a:hover i, .sidebar .nav-list li a:hover .link_name { color: var(--accent-bright) !important; }
.sidebar .profile-details, .sidebar .logo_details { background: rgba(0,0,0,.12); }
/* Yellow "pending/owner" chips read better on the yellow CTA hue */
.notify.alert-warning { background: rgba(var(--accent-3-rgb), .30); color: #5d5400; border-color: rgba(var(--accent-3-rgb), .55); }
.ux-level-mild, .ux-avatar-warn { background: rgba(var(--accent-3-rgb), .30); color: #5d5400; }

/* Yellow is for CTAs and the active menu only; edit chips go back to soft green */
.notify.alert-primary { background: rgba(var(--primary-rgb), .12) !important; color: var(--primary) !important; border-color: rgba(var(--primary-rgb), .2) !important; }
td a.notify.alert-primary:has(> i.bx):hover { background: rgba(var(--primary-rgb), .22) !important; }
a.btn.btn-danger.bg-danger[title*="Generate"], a.btn.btn-danger.bg-danger[title*="Generate"]:hover { background: var(--primary) !important; border-color: var(--primary) !important; color: #fff !important; }
.notify.alert-success.bg-warning, .notify.bg-warning { background: rgba(var(--accent-3-rgb), .30) !important; color: #5d5400 !important; }

/* =====================================================================
   Sidebar v2 — flat menu, outline icons, yellow pill for the active item,
   skyline illustration + tagline at the foot.
   ===================================================================== */
.sidebar.desktop {
  background: linear-gradient(180deg, #05633a 0%, var(--sidebar) 45%, var(--sidebar-dark) 100%) !important;
  box-shadow: 4px 0 24px rgba(0, 27, 12, .18);
}
.sidebar.open { width: 260px; }
.sidebar.open ~ .task__section, .sidebar.open ~ .kanban__board { left: 260px; width: calc(100% - 260px); }

/* Logo block */
.sidebar .logo_details { height: 78px; padding: 0 16px; background: transparent; }
.sidebar .logo_details .slogo {
  width: 44px; height: 44px; border-radius: 12px; object-fit: cover;
  background: #fff; padding: 3px; box-shadow: 0 4px 12px rgba(0,0,0,.25);
}
.sidebar .logo_details .logo_name {
  margin: 0 0 0 12px; letter-spacing: .12em; font-size: 20px; font-weight: 700; line-height: 1.05; color: #fff;
}
.sidebar .logo_details .logo_name .ux-wm-accent { color: var(--accent-bright); }
.sidebar .logo_details .logo_name small { display: block; letter-spacing: .02em; font-size: 9.5px; font-weight: 600; opacity: .85; margin-top: 3px; text-transform: uppercase; }
.sidebar .logo_details #btn { left: auto; right: 10px; color: rgba(255,255,255,.75); }
.sidebar .logo_details #btn:hover { color: var(--accent-bright); }

/* Menu list */
.sidebar .nav-list { height: calc(100vh - 78px - 64px - 150px); padding: 8px 0 12px; }
.sidebar li { margin: 2px 0; padding: 0; }
.sidebar li hr { display: none; }
.sidebar li a::after { display: none; }                      /* legacy white hover wipe */
.sidebar li .tooltip { display: none !important; }

/* Top-level items: Dashboard link and each group header */
.sidebar .nav-list > li > a,
.sidebar span.divider {
  display: flex !important; align-items: center; gap: 12px;
  margin: 2px 14px 2px 0; padding: 0 14px 0 20px; height: 42px; line-height: 42px;
  border-radius: 0 999px 999px 0; opacity: 1; font-size: 14px; font-weight: 600; color: #fff;
  cursor: pointer; transition: background .15s ease, color .15s ease, padding .15s ease; position: relative;
}
.sidebar .nav-list > li > a i,
.sidebar span.divider i.ux-gicon {
  position: static; width: 22px; height: auto; line-height: 1; font-size: 20px; color: #fff; border-radius: 0; text-align: center; flex: 0 0 22px;
}
.sidebar .nav-list > li > a:hover, .sidebar span.divider:hover { background: rgba(255,255,255,.08); padding-left: 24px; }
.sidebar .nav-list > li > a:hover .link_name, .sidebar .nav-list > li > a:hover i { color: #fff !important; }
.sidebar span.divider i.bx-chevron-down-circle {
  position: static; margin-left: auto; font-size: 16px; opacity: .55; transition: transform .2s ease;
}
.sidebar span.divider:not(.collapsed) i.bx-chevron-down-circle { transform: rotate(180deg); opacity: .9; }
.sidebar span.divider.ux-active-group { color: var(--accent-bright) !important; }
.sidebar span.divider.ux-active-group i.ux-gicon { color: var(--accent-bright); }

/* Active pill (Dashboard or a group header that is itself the page) */
.sidebar .nav-list > li > a.ux-active {
  background: var(--accent-bright) !important; color: var(--ink) !important; box-shadow: 0 6px 16px rgba(0,0,0,.22);
}
.sidebar .nav-list > li > a.ux-active i, .sidebar .nav-list > li > a.ux-active .link_name { color: var(--ink) !important; }

/* Sub-items */
.sidebar .collapse ul, .sidebar .collapsing ul { padding: 2px 0 4px; }
.sidebar .collapse li a, .sidebar .collapsing li a {
  margin: 1px 14px 1px 0 !important; padding: 0 14px 0 30px; height: 36px; line-height: 36px;
  border-radius: 0 999px 999px 0; gap: 10px; box-shadow: none !important;
}
.sidebar .collapse li a i { position: static; width: 20px; height: auto; line-height: 1; font-size: 17px; color: rgba(255,255,255,.7); border-radius: 0; flex: 0 0 20px; }
.sidebar .collapse li a .link_name { font-size: 13.5px; font-weight: 500; color: rgba(255,255,255,.82); padding-top: 0; }
.sidebar .collapse li a:hover { background: rgba(255,255,255,.08) !important; }
.sidebar .collapse li a:hover .link_name, .sidebar .collapse li a:hover i { color: #fff !important; }
.sidebar .collapse li a.ux-active {
  background: var(--accent-bright) !important; box-shadow: 0 6px 16px rgba(0,0,0,.22) !important;
}
.sidebar .collapse li a.ux-active .link_name, .sidebar .collapse li a.ux-active i { color: var(--ink) !important; font-weight: 700; }
.sidebar .nav-list li a.ux-active { box-shadow: none; }

/* Footer: skyline + tagline, then the profile strip */
.sidebar .ux-art {
  position: fixed; left: 0; bottom: 64px; width: 260px; height: 150px; overflow: hidden; pointer-events: none;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 260 150' preserveAspectRatio='xMidYMax slice'%3E%3Cdefs%3E%3ClinearGradient id='g' x1='0' y1='0' x2='0' y2='1'%3E%3Cstop offset='0' stop-color='%23f4e51c'/%3E%3Cstop offset='1' stop-color='%23b7ad12'/%3E%3C/linearGradient%3E%3C/defs%3E%3Cellipse cx='200' cy='168' rx='150' ry='42' fill='%230a8f52' opacity='.55'/%3E%3Cellipse cx='120' cy='176' rx='190' ry='44' fill='%230a8f52' opacity='.35'/%3E%3Cg fill='url(%23g)'%3E%3Crect x='168' y='58' width='30' height='78' rx='2'/%3E%3Crect x='204' y='74' width='24' height='62' rx='2'/%3E%3Crect x='232' y='90' width='20' height='46' rx='2'/%3E%3Crect x='140' y='84' width='24' height='52' rx='2'/%3E%3C/g%3E%3Cg fill='%2317221d' opacity='.35'%3E%3Crect x='174' y='66' width='5' height='6'/%3E%3Crect x='183' y='66' width='5' height='6'/%3E%3Crect x='174' y='78' width='5' height='6'/%3E%3Crect x='183' y='78' width='5' height='6'/%3E%3Crect x='174' y='90' width='5' height='6'/%3E%3Crect x='183' y='90' width='5' height='6'/%3E%3Crect x='174' y='102' width='5' height='6'/%3E%3Crect x='183' y='102' width='5' height='6'/%3E%3Crect x='209' y='82' width='5' height='6'/%3E%3Crect x='218' y='82' width='5' height='6'/%3E%3Crect x='209' y='94' width='5' height='6'/%3E%3Crect x='218' y='94' width='5' height='6'/%3E%3Crect x='209' y='106' width='5' height='6'/%3E%3Crect x='218' y='106' width='5' height='6'/%3E%3Crect x='236' y='98' width='4' height='5'/%3E%3Crect x='244' y='98' width='4' height='5'/%3E%3Crect x='236' y='109' width='4' height='5'/%3E%3Crect x='244' y='109' width='4' height='5'/%3E%3Crect x='145' y='92' width='5' height='6'/%3E%3Crect x='154' y='92' width='5' height='6'/%3E%3Crect x='145' y='104' width='5' height='6'/%3E%3Crect x='154' y='104' width='5' height='6'/%3E%3C/g%3E%3Ccircle cx='128' cy='120' r='9' fill='%2360c26a'/%3E%3Crect x='126.5' y='126' width='3' height='10' fill='%23a58a2a'/%3E%3Ccircle cx='250' cy='124' r='7' fill='%2360c26a'/%3E%3Crect x='248.8' y='129' width='2.4' height='7' fill='%23a58a2a'/%3E%3C/svg%3E") right bottom / 230px 132px no-repeat;
}
.sidebar .ux-art .ux-tagline {
  position: absolute; left: 18px; bottom: 26px; color: #fff; font-size: 13.5px; max-width: 130px; font-weight: 700; line-height: 1.25; letter-spacing: -.01em;
  text-shadow: 0 1px 2px rgba(0,0,0,.3);
}
.sidebar .ux-art .ux-tagline span { color: var(--accent-bright); display: block; }
.sidebar:not(.open) .ux-art { display: none; }

.sidebar li.profile {
  height: 64px; bottom: 0; padding: 10px 14px; background: rgba(0,0,0,.22) !important; box-shadow: none;
  border-top: 1px solid rgba(255,255,255,.08); backdrop-filter: blur(6px);
}
.sidebar.open li.profile { width: 260px; }
.sidebar .profile .profile_details img { width: 38px; height: 38px; border-radius: 50%; background: #fff; padding: 6px; }
.sidebar .profile .name { color: #fff; font-weight: 700; font-size: 14px; }
.sidebar .profile .designation { color: var(--accent-bright); font-size: 11.5px; font-weight: 600; }
.sidebar .profile form button { background: transparent; border: 0; color: rgba(255,255,255,.75); }
.sidebar .profile form button:hover { color: var(--accent-bright); }
.sidebar .profile #log_out { font-size: 20px; }

/* Collapsed (icon-only) state */
.sidebar:not(.open) .nav-list > li > a, .sidebar:not(.open) span.divider { padding: 0; justify-content: center; margin: 2px 8px; border-radius: 10px; }
.sidebar:not(.open) .link_name { display: none; }
.sidebar:not(.open) .logo_details .logo_name { display: none; }

/* Mobile drawer inherits the same look */
.mobile-sidebar .nav-list > li > a, .mobile-sidebar span.divider { display: flex !important; align-items: center; gap: 12px; padding: 0 14px 0 20px; height: 42px; line-height: 42px; margin-right: 14px; border-radius: 0 999px 999px 0; color: #fff; font-weight: 600; opacity: 1; }
.mobile-sidebar span.divider i.ux-gicon { position: static; font-size: 20px; }
.mobile-sidebar span.divider i.bx-chevron-down-circle { position: static; margin-left: auto; opacity: .6; }
.mobile-sidebar .collapse li a { padding-left: 30px; height: 36px; line-height: 36px; margin-right: 14px; border-radius: 0 999px 999px 0; }
.mobile-sidebar .collapse li a.ux-active, .mobile-sidebar .nav-list > li > a.ux-active { background: var(--accent-bright) !important; }
.mobile-sidebar a.ux-active .link_name, .mobile-sidebar a.ux-active i { color: var(--ink) !important; }

.sidebar span.divider, .mobile-sidebar span.divider { white-space: nowrap; overflow: hidden; }
.sidebar span.divider .ux-glabel, .mobile-sidebar span.divider .ux-glabel { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; }
.sidebar span.divider i.bx-chevron-down-circle, .mobile-sidebar span.divider i.bx-chevron-down-circle { flex: 0 0 auto; display: inline-block !important; }

.sidebar span.divider i.bx-chevron-down-circle, .mobile-sidebar span.divider i.bx-chevron-down-circle { display: none !important; }
.sidebar .nav-list { height: calc(100vh - 78px - 64px - 140px); }

.sidebar .ux-art { background-size: 212px 122px; }
.sidebar .ux-art .ux-tagline { bottom: 30px; }

/* ---------- Flat sidebar (v3) ---------- */
.sidebar .nav-list.ux-flat { height: calc(100vh - 78px - 64px - 140px); padding: 6px 0 10px; }
.sidebar .nav-list.ux-flat > li > a { margin: 3px 16px 3px 0; height: 44px; line-height: 44px; font-size: 14.5px; }
.sidebar .nav-list.ux-flat > li > a i { font-size: 21px; }
.sidebar .nav-list.ux-flat > li > a .link_name { font-weight: 600; letter-spacing: .005em; }
.sidebar .nav-list.ux-flat > li > a:not(.ux-active) .link_name { color: rgba(255,255,255,.92); }
.sidebar .nav-list.ux-flat > li > a.ux-active { box-shadow: 0 8px 18px rgba(0,0,0,.25); }
.sidebar .nav-list.ux-flat > li > a.ux-active::before {
  content: ""; position: absolute; left: -16px; top: 0; bottom: 0; width: 16px; background: var(--accent-bright);
}
@media (min-height: 900px) { .sidebar .nav-list.ux-flat > li > a { height: 46px; line-height: 46px; margin-top: 4px; margin-bottom: 4px; } }
.mobile-sidebar .mobile-logo { display: flex; align-items: center; gap: 10px; padding: 14px 16px 8px; }
.mobile-sidebar .mobile-logo #mbtn { font-size: 26px; color: #fff; cursor: pointer; order: 2; margin-left: auto; }
.mobile-sidebar .mobile_logo_name { font-weight: 700; letter-spacing: .12em; color: #fff; font-size: 18px; }
.mobile-sidebar .nav-list.ux-flat > li > a { margin: 3px 16px 3px 0; height: 44px; line-height: 44px; }
.mobile-sidebar .nav-list.ux-flat > li > a i { position: static; font-size: 21px; color: #fff; }
.mobile-sidebar .nav-list.ux-flat > li > a .link_name { opacity: 1; color: #fff; font-weight: 600; }
.mobile-sidebar.open { box-shadow: -8px 0 32px rgba(0,0,0,.35); }

/* Fit more items: tighter rows, shorter footer art, fade hint above the art */
.sidebar .ux-art { height: 118px; background-size: 190px 108px; }
.sidebar .ux-art .ux-tagline { bottom: 22px; font-size: 13px; }
.sidebar .ux-art::before { content: ""; position: absolute; top: 0; left: 0; right: 0; height: 26px; background: linear-gradient(to bottom, rgba(4,92,53,0), rgba(4,92,53,.9)); }
.sidebar .nav-list.ux-flat { height: calc(100vh - 78px - 64px - 108px); padding: 4px 0 14px; }
.sidebar .nav-list.ux-flat > li > a { margin: 2px 16px 2px 0; height: 40px; line-height: 40px; font-size: 14px; }
.sidebar .nav-list.ux-flat > li > a i { font-size: 20px; }
@media (min-height: 900px) { .sidebar .nav-list.ux-flat > li > a { height: 42px; line-height: 42px; margin-top: 3px; margin-bottom: 3px; } }
@media (min-height: 1000px) { .sidebar .nav-list.ux-flat > li > a { height: 44px; line-height: 44px; } .sidebar .ux-art { height: 150px; background-size: 212px 122px; } .sidebar .nav-list.ux-flat { height: calc(100vh - 78px - 64px - 140px); } }

.sidebar .ux-art::before { background: linear-gradient(to bottom, rgba(3,72,42,0), rgba(3,72,42,.35)); height: 20px; }
.sidebar .ux-art .ux-tagline { bottom: 24px; font-size: 12.5px; max-width: 120px; }
.sidebar .ux-art { background-position: right 0 bottom 0; }

.sidebar .ux-art .ux-tagline { bottom: 34px; }

/* =====================================================================
   Brand v3: the sidebar palette (#045C35 / #F4E51C) drives the whole app
   ===================================================================== */
/* Page header: white with a yellow-on-green accent strip and green title */
.task__section .text.header-text { border-top: 3px solid var(--sidebar); color: var(--sidebar); }
.task__section .text.header-text::after { content: ""; position: absolute; left: 0; bottom: -1px; width: 72px; height: 3px; background: var(--accent-bright); }
.task__section .text.header-text { position: sticky; }
.header-text span { background: rgba(var(--sidebar-rgb), .06); border-color: rgba(var(--sidebar-rgb), .15); color: var(--sidebar); }
.header-text span b { color: var(--sidebar); }
/* Page titles: yellow marker bar, green text */
.board-title h1 { color: var(--sidebar); }
.board-title h1::before { background: var(--accent-bright); width: 5px; }
/* Tables: green header row text, yellow sort indicator, green pagination */
table.dataTable thead th { color: var(--sidebar); background: rgba(var(--sidebar-rgb), .06); }
table.dataTable thead th.sorting_asc, table.dataTable thead th.sorting_desc { box-shadow: inset 0 -2px 0 var(--accent-bright); }
table.dataTable tbody tr:hover { background: rgba(var(--sidebar-rgb), .05) !important; }
.dataTables_wrapper .dataTables_paginate .paginate_button.current { background: var(--sidebar) !important; border-color: var(--sidebar) !important; }
/* Forms: green icon boxes, green focus, yellow required marker */
.input-group .input-icon { background: rgba(var(--sidebar-rgb), .10); }
.input-group input:focus, .input-group select:focus, .input-group textarea:focus, .form-control:focus { border-color: var(--sidebar) !important; box-shadow: 0 0 0 3px rgba(var(--sidebar-rgb), .14) !important; }
label.small, .form-group label { color: var(--sidebar) !important; }
form h3.h5, form .sub-title-3 { color: var(--sidebar) !important; }
form h3.h5::after, form .sub-title-3::after { background: linear-gradient(to right, var(--accent-bright), transparent); height: 2px; }
/* Stat cards & panels */
.box-icon i { background: rgba(var(--sidebar-rgb), .10); color: var(--sidebar); }
.db-box-content { border-top: 3px solid var(--sidebar) !important; }
a.td-none:hover .db-box-content { border-top-color: var(--accent-bright) !important; }
.ux-panel-head { border-bottom: 2px solid rgba(var(--sidebar-rgb), .12); }
.ux-panel-head h3 i, .ux-quick-btn i { color: var(--sidebar); }
.ux-quick-btn:hover { border-color: var(--accent-bright); background: rgba(var(--accent-bright-rgb), .18); color: var(--sidebar); }
.ux-avatar, .ux-date { background: rgba(var(--sidebar-rgb), .10); color: var(--sidebar); }
.ux-date b { color: var(--sidebar); } .ux-date small { color: var(--primary-light); }
/* Buttons: primary = sidebar green, hover = lighter green; CTA stays yellow */
.btn-primary, .btn-dark { background-color: var(--sidebar) !important; border-color: var(--sidebar) !important; }
.btn-primary:hover, .btn-primary:focus, .btn-dark:hover, .btn-dark:focus { background-color: var(--primary-light) !important; border-color: var(--primary-light) !important; }
.btn-info { background-color: rgba(var(--sidebar-rgb), .10) !important; border-color: transparent !important; color: var(--sidebar) !important; }
.btn-info:hover { background-color: var(--sidebar) !important; color: #fff !important; }
.btn-light { background: #fff !important; border: 1px solid var(--ux-border) !important; color: var(--sidebar) !important; }
/* Links, chips, toasts, select2 */
a { color: var(--sidebar); }
.notify.alert-success { background: rgba(var(--sidebar-rgb), .10); color: var(--sidebar); border-color: rgba(var(--sidebar-rgb), .18); }
.notify.alert-info { background: rgba(var(--sidebar-rgb), .07); color: var(--sidebar); }
.response-msg .alert { border-left-color: var(--sidebar) !important; }
.response-msg .alert::before { background-color: var(--sidebar); }
.select2-container--default .select2-results__option--highlighted[aria-selected] { background-color: var(--sidebar); }
.form-check-input:checked { background-color: var(--sidebar); border-color: var(--sidebar); }
::-webkit-scrollbar-thumb { background: rgba(var(--sidebar-rgb), .45); }
/* Mobile bottom bar */
nav.navbar.fixed-bottom.mobile { background: var(--sidebar) !important; }
/* Auth pages */
body.app-body:not(:has(.sidebar)) { background: linear-gradient(135deg, var(--sidebar-dark), var(--sidebar) 55%, var(--primary-light)) !important; }
body.app-body:not(:has(.sidebar)) .card { border-top: 4px solid var(--accent-bright) !important; }
body.app-body:not(:has(.sidebar)) .card-title .small, body.app-body:not(:has(.sidebar)) span.small { color: var(--sidebar) !important; }
body.app-body:not(:has(.sidebar)) .btn-dark { background: var(--accent-bright) !important; border-color: var(--accent-bright) !important; color: var(--ink) !important; font-weight: 700; }
body.app-body:not(:has(.sidebar)) .btn-dark:hover { background: var(--accent-gold-2) !important; border-color: var(--accent-gold-2) !important; }

body.app-body:not(:has(.sidebar)) .logo_name .ux-wm-accent { color: var(--accent-bright); }

/* =====================================================================
   Auth pages v2 — split layout (brand panel + form panel)
   ===================================================================== */
body.app-body:has(.ux-auth) { background: #fff !important; }
body.app-body:has(.ux-auth) .response-msg { display: none; }       /* errors are shown inline in the card */
.ux-auth { display: grid; grid-template-columns: minmax(360px, 46%) 1fr; min-height: 100vh; }

/* Brand panel */
.ux-auth-brand {
  position: relative; display: flex; flex-direction: column; justify-content: space-between; overflow: hidden;
  padding: 44px 48px 0; color: #fff;
  background: radial-gradient(120% 80% at 0% 0%, #087a45 0%, var(--sidebar) 45%, var(--sidebar-dark) 100%);
}
.ux-auth-brand::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 240px; pointer-events: none;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 600 240' preserveAspectRatio='xMaxYMax slice'%3E%3Cdefs%3E%3ClinearGradient id='g' x1='0' y1='0' x2='0' y2='1'%3E%3Cstop offset='0' stop-color='%23f4e51c'/%3E%3Cstop offset='1' stop-color='%23b7ad12'/%3E%3C/linearGradient%3E%3C/defs%3E%3Cellipse cx='420' cy='268' rx='330' ry='70' fill='%230a8f52' opacity='.5'/%3E%3Cellipse cx='250' cy='282' rx='420' ry='70' fill='%230a8f52' opacity='.3'/%3E%3Cg fill='url(%23g)'%3E%3Crect x='330' y='70' width='58' height='150' rx='3'/%3E%3Crect x='400' y='104' width='46' height='116' rx='3'/%3E%3Crect x='456' y='136' width='40' height='84' rx='3'/%3E%3Crect x='276' y='120' width='46' height='100' rx='3'/%3E%3Crect x='508' y='96' width='52' height='124' rx='3'/%3E%3C/g%3E%3Cg fill='%2317221d' opacity='.35'%3E%3Crect x='342' y='84' width='9' height='11'/%3E%3Crect x='360' y='84' width='9' height='11'/%3E%3Crect x='342' y='108' width='9' height='11'/%3E%3Crect x='360' y='108' width='9' height='11'/%3E%3Crect x='342' y='132' width='9' height='11'/%3E%3Crect x='360' y='132' width='9' height='11'/%3E%3Crect x='342' y='156' width='9' height='11'/%3E%3Crect x='360' y='156' width='9' height='11'/%3E%3Crect x='342' y='180' width='9' height='11'/%3E%3Crect x='360' y='180' width='9' height='11'/%3E%3Crect x='410' y='118' width='9' height='11'/%3E%3Crect x='428' y='118' width='9' height='11'/%3E%3Crect x='410' y='142' width='9' height='11'/%3E%3Crect x='428' y='142' width='9' height='11'/%3E%3Crect x='410' y='166' width='9' height='11'/%3E%3Crect x='428' y='166' width='9' height='11'/%3E%3Crect x='464' y='150' width='8' height='10'/%3E%3Crect x='480' y='150' width='8' height='10'/%3E%3Crect x='464' y='172' width='8' height='10'/%3E%3Crect x='480' y='172' width='8' height='10'/%3E%3Crect x='286' y='134' width='9' height='11'/%3E%3Crect x='304' y='134' width='9' height='11'/%3E%3Crect x='286' y='158' width='9' height='11'/%3E%3Crect x='304' y='158' width='9' height='11'/%3E%3Crect x='518' y='110' width='9' height='11'/%3E%3Crect x='540' y='110' width='9' height='11'/%3E%3Crect x='518' y='134' width='9' height='11'/%3E%3Crect x='540' y='134' width='9' height='11'/%3E%3Crect x='518' y='158' width='9' height='11'/%3E%3Crect x='540' y='158' width='9' height='11'/%3E%3C/g%3E%3Ccircle cx='250' cy='190' r='16' fill='%2360c26a'/%3E%3Crect x='247' y='202' width='6' height='18' fill='%23a58a2a'/%3E%3Ccircle cx='585' cy='196' r='12' fill='%2360c26a'/%3E%3Crect x='583' y='206' width='4' height='14' fill='%23a58a2a'/%3E%3C/svg%3E") right bottom / auto 240px no-repeat;
}
.ux-auth-brand-top { position: relative; z-index: 1; max-width: 460px; }
.ux-auth-logo { display: flex; align-items: center; gap: 14px; margin-bottom: 44px; }
.ux-auth-logo .slogo { width: 56px; height: 56px; border-radius: 14px; background: #fff; padding: 4px; box-shadow: 0 6px 18px rgba(0,0,0,.25); }
.ux-auth-logo .logo_name { font-size: 24px; font-weight: 700; letter-spacing: .14em; line-height: 1; color: #fff; }
.ux-auth-logo .logo_name small { display: block; font-size: 10px; letter-spacing: .06em; font-weight: 600; opacity: .85; margin-top: 5px; text-transform: uppercase; }
.ux-auth-brand h1 { color: #fff; font-size: 30px; font-weight: 700; line-height: 1.25; letter-spacing: -.01em; text-transform: none; margin: 0 0 26px; }
.ux-auth-points { list-style: none; margin: 0; padding: 0; display: grid; gap: 14px; }
.ux-auth-points li { display: flex; gap: 12px; align-items: flex-start; font-size: 14.5px; line-height: 1.45; color: rgba(255,255,255,.88); }
.ux-auth-points li b { color: #fff; }
.ux-auth-points li i { flex: 0 0 36px; width: 36px; height: 36px; border-radius: 10px; display: inline-flex; align-items: center; justify-content: center; font-size: 19px; background: rgba(255,255,255,.12); color: var(--accent-bright); }
.ux-auth-brand-foot { position: relative; z-index: 1; padding: 40px 0 44px; }
.ux-auth-brand-foot .ux-tagline { font-size: 18px; font-weight: 700; line-height: 1.3; color: #fff; text-shadow: 0 1px 2px rgba(0,0,0,.3); }
.ux-auth-brand-foot .ux-tagline span { display: block; color: var(--accent-bright); }

/* Form panel */
.ux-auth-form { display: flex; flex-direction: column; align-items: center; justify-content: center; padding: 40px 24px; background: var(--ux-surface); }
.ux-auth-card { width: 100%; max-width: 440px; background: #fff; border: 1px solid var(--ux-border); border-radius: 18px; padding: 36px 36px 28px; box-shadow: 0 12px 40px rgba(0,27,12,.08); }
.ux-auth-mobile-logo { display: none; align-items: center; gap: 10px; margin-bottom: 18px; }
.ux-auth-mobile-logo .slogo { width: 40px; height: 40px; border-radius: 10px; }
.ux-auth-mobile-logo .logo_name { font-weight: 700; letter-spacing: .12em; color: var(--sidebar); }
.ux-auth-card h2 { font-size: 26px; font-weight: 700; color: var(--ink); text-transform: none; margin: 0 0 4px; letter-spacing: -.01em; }
.ux-auth-sub { color: var(--ux-muted); font-size: 14px; margin: 0 0 22px; }
.ux-auth-card label { display: block; font-size: 13px; font-weight: 700; color: var(--sidebar); margin: 0 0 6px; }
.ux-label-row { display: flex; align-items: baseline; justify-content: space-between; margin-top: 16px; }
.ux-label-row label { margin: 0 0 6px; }
.ux-link { font-size: 12.5px; font-weight: 600; color: var(--primary-light); text-decoration: none; }
.ux-link:hover { text-decoration: underline; color: var(--sidebar); }
.ux-field { display: flex; align-items: center; border: 1.5px solid var(--ux-border); border-radius: 10px; background: #fff; transition: border-color .15s ease, box-shadow .15s ease; }
.ux-field:focus-within { border-color: var(--sidebar); box-shadow: 0 0 0 4px rgba(var(--sidebar-rgb), .12); }
.ux-field.is-invalid { border-color: #b42318; }
.ux-field.is-invalid:focus-within { box-shadow: 0 0 0 4px rgba(180,35,24,.12); }
.ux-field > i { flex: 0 0 44px; text-align: center; font-size: 19px; color: var(--sidebar); }
.ux-field input { flex: 1; min-width: 0; border: 0 !important; outline: 0; background: transparent !important; padding: 13px 12px 13px 0 !important; font-size: 15px; color: var(--ink); box-shadow: none !important; }
.ux-field input::placeholder { color: #9aa79f; }
.ux-eye { flex: 0 0 44px; height: 44px; border: 0; background: transparent; color: var(--ux-muted); font-size: 19px; cursor: pointer; border-radius: 0 10px 10px 0; }
.ux-eye:hover { color: var(--sidebar); background: rgba(var(--sidebar-rgb), .06); }
.ux-hint { font-size: 12px; color: var(--ux-muted); margin: 6px 0 0; }
.ux-capslock { font-size: 12px; color: #7a5b00; background: rgba(var(--accent-3-rgb), .25); border-radius: 6px; padding: 5px 9px; margin-top: 8px; display: inline-flex; gap: 6px; align-items: center; }
.ux-capslock[hidden] { display: none; }
.ux-check { display: flex; align-items: center; gap: 10px; margin: 18px 0 20px; font-size: 13.5px; color: var(--ink); cursor: pointer; font-weight: 500 !important; }
.ux-check input { width: 18px; height: 18px; accent-color: var(--sidebar); margin: 0; }
.ux-btn-cta {
  width: 100%; border: 0; border-radius: 10px; padding: 14px 18px; font-size: 15.5px; font-weight: 700; color: var(--ink);
  background: var(--accent-bright); display: inline-flex; align-items: center; justify-content: center; gap: 6px; cursor: pointer;
  box-shadow: 0 8px 20px rgba(244,229,28,.35); transition: transform .12s ease, box-shadow .12s ease, background .12s ease; position: relative;
}
.ux-btn-cta i { font-size: 22px; transition: transform .15s ease; }
.ux-btn-cta:hover { background: var(--accent-gold-2); transform: translateY(-1px); box-shadow: 0 10px 24px rgba(244,229,28,.45); }
.ux-btn-cta:hover i { transform: translateX(3px); }
.ux-btn-cta.is-loading { color: transparent; pointer-events: none; }
.ux-btn-cta.is-loading::after { content: ""; position: absolute; inset: 0; margin: auto; width: 20px; height: 20px; border: 2.5px solid rgba(23,34,29,.25); border-top-color: var(--ink); border-radius: 50%; animation: ux-spin .7s linear infinite; }
.ux-auth-error, .ux-auth-ok { display: flex; gap: 10px; align-items: flex-start; border-radius: 10px; padding: 11px 13px; font-size: 13.5px; margin-bottom: 18px; line-height: 1.4; }
.ux-auth-error { background: #fdecec; color: #8a1c14; border: 1px solid #f8d0cc; }
.ux-auth-ok { background: rgba(var(--sidebar-rgb), .08); color: var(--sidebar); border: 1px solid rgba(var(--sidebar-rgb), .18); }
.ux-auth-error i, .ux-auth-ok i { font-size: 19px; flex: 0 0 auto; margin-top: -1px; }
.ux-auth-help { margin-top: 22px; padding-top: 16px; border-top: 1px solid var(--ux-border); font-size: 12.5px; color: var(--ux-muted); display: flex; gap: 8px; align-items: flex-start; line-height: 1.5; }
.ux-auth-help i { font-size: 17px; color: var(--sidebar); flex: 0 0 auto; }
.ux-auth-help a { color: var(--sidebar); font-weight: 600; }
.ux-auth-footer { display: flex; gap: 18px; justify-content: space-between; width: 100%; max-width: 440px; margin-top: 18px; font-size: 12.5px; color: var(--ux-muted); }
.ux-auth-footer a { color: var(--sidebar); font-weight: 600; text-decoration: none; display: inline-flex; align-items: center; gap: 4px; }
.ux-auth-footer a:hover { text-decoration: underline; }

@media (max-width: 991px) {
  .ux-auth { grid-template-columns: 1fr; }
  .ux-auth-brand { display: none; }
  .ux-auth-mobile-logo { display: flex; }
  .ux-auth-form { min-height: 100vh; padding: 28px 16px; background: linear-gradient(180deg, var(--sidebar) 0, var(--sidebar) 180px, var(--ux-surface) 180px); }
  .ux-auth-card { padding: 28px 22px 22px; }
  .ux-auth-mobile-logo .logo_name { color: var(--sidebar); }
}

.ux-auth-card label.ux-check { display: flex; align-items: center; }
.ux-auth-card label.ux-check input { transform: translateY(0); }

/* =====================================================================
   Header user menu (profile moved out of the sidebar)
   ===================================================================== */
.task__section .text.header-text.has-user-menu { gap: 12px; }
.task__section .text.header-text.has-user-menu > span,
.task__section .text.header-text.has-user-menu > form { margin-left: auto; }
.task__section .text.header-text.has-user-menu > .ux-user-menu { margin-left: 0; }
.task__section .text.header-text.has-user-menu > span + .ux-user-menu,
.task__section .text.header-text.has-user-menu > form + .ux-user-menu { margin-left: 4px; }
.ux-user-menu { position: relative; flex: 0 0 auto; font-weight: 400; }
.ux-user-menu:first-child, .task__section .text.header-text > .ux-user-menu:only-child { margin-left: auto; }
.ux-user-btn {
  display: inline-flex; align-items: center; gap: 10px; padding: 5px 10px 5px 5px; border-radius: 999px;
  border: 1px solid var(--ux-border); background: #fff; cursor: pointer; text-align: left; line-height: 1.15;
  transition: background .12s ease, border-color .12s ease, box-shadow .12s ease;
}
.ux-user-btn:hover, .ux-user-menu.open .ux-user-btn { border-color: rgba(var(--sidebar-rgb), .35); background: rgba(var(--sidebar-rgb), .05); box-shadow: 0 2px 8px rgba(0,27,12,.08); }
.ux-user-avatar {
  width: 34px; height: 34px; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center;
  background: var(--sidebar); color: var(--accent-bright); font-weight: 700; font-size: 15px; flex: 0 0 34px;
}
.ux-user-text { display: flex; flex-direction: column; min-width: 0; }
.ux-user-name { font-size: 13.5px; font-weight: 700; color: var(--ink); white-space: nowrap; max-width: 180px; overflow: hidden; text-overflow: ellipsis; }
.ux-user-role { font-size: 11.5px; color: var(--ux-muted); font-weight: 500; white-space: nowrap; max-width: 220px; overflow: hidden; text-overflow: ellipsis; }
.ux-user-btn > i { font-size: 18px; color: var(--ux-muted); transition: transform .15s ease; }
.ux-user-menu.open .ux-user-btn > i { transform: rotate(180deg); }
.ux-user-dd {
  position: absolute; right: 0; top: calc(100% + 8px); min-width: 240px; background: #fff; border: 1px solid var(--ux-border);
  border-radius: 12px; box-shadow: 0 14px 40px rgba(0,27,12,.16); padding: 6px; z-index: 40;
  opacity: 0; transform: translateY(-6px); pointer-events: none; transition: opacity .14s ease, transform .14s ease;
}
.ux-user-menu.open .ux-user-dd { opacity: 1; transform: none; pointer-events: auto; }
.ux-user-dd-head { padding: 10px 12px 10px; border-bottom: 1px solid var(--ux-border); margin-bottom: 4px; }
.ux-user-dd-head .ux-user-name { max-width: none; white-space: normal; }
.ux-user-email { font-size: 12px; color: var(--ux-muted); word-break: break-all; }
.ux-user-dd a, .ux-user-dd button {
  display: flex; align-items: center; gap: 10px; width: 100%; padding: 9px 12px; border-radius: 8px; border: 0; background: transparent;
  color: var(--ink); font-size: 13.5px; font-weight: 500; text-decoration: none; cursor: pointer; text-align: left;
}
.ux-user-dd a i, .ux-user-dd button i { font-size: 18px; color: var(--sidebar); }
.ux-user-dd a:hover, .ux-user-dd button:hover { background: rgba(var(--sidebar-rgb), .07); color: var(--sidebar); }
.ux-user-dd form { margin: 4px 0 0; padding-top: 4px; border-top: 1px solid var(--ux-border); }
.ux-user-dd form button { color: #b42318; } .ux-user-dd form button i { color: #b42318; }
.ux-user-dd form button:hover { background: #fdecec; color: #8a1c14; }
.ux-user-menu-floating { position: fixed; top: 12px; right: 16px; z-index: 30; }
@media (max-width: 767px) {
  .ux-user-text, .ux-user-btn > i { display: none; }
  .ux-user-btn { padding: 3px; border-color: transparent; }
  .ux-user-avatar { width: 32px; height: 32px; }
  .task__section .text.header-text.has-user-menu > span { max-width: 38%; }
}

/* Sidebar foot without the profile strip: art sits on the bottom, list gets the room back */
.sidebar .ux-art { bottom: 0; }
.sidebar .nav-list.ux-flat { height: calc(100vh - 78px - 108px); }
@media (min-height: 1000px) { .sidebar .nav-list.ux-flat { height: calc(100vh - 78px - 140px); } }

/* The header's count-chip rule targets bare <span>s; reset it inside the user menu */
.header-text .ux-user-menu span { background: none; border: 0; padding: 0; border-radius: 0; font-size: inherit; color: inherit; white-space: nowrap; }
.header-text .ux-user-menu .ux-user-avatar { width: 34px; height: 34px; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center; background: var(--sidebar); color: var(--accent-bright); font-weight: 700; font-size: 15px; flex: 0 0 34px; }
.header-text .ux-user-menu .ux-user-text { display: flex; flex-direction: column; min-width: 0; }
.header-text .ux-user-menu .ux-user-name { font-size: 13.5px; font-weight: 700; color: var(--ink); max-width: 180px; overflow: hidden; text-overflow: ellipsis; }
.header-text .ux-user-menu .ux-user-role { font-size: 11.5px; color: var(--ux-muted); font-weight: 500; max-width: 220px; overflow: hidden; text-overflow: ellipsis; }
.header-text .ux-user-menu .ux-user-dd .ux-user-name { max-width: none; white-space: normal; }
.header-text .ux-user-menu .ux-user-btn { line-height: 1.15; font-weight: 400; }
@media (max-width: 767px) { .header-text .ux-user-menu .ux-user-text { display: none; } .header-text .ux-user-menu .ux-user-avatar { width: 32px; height: 32px; } }

/* Weight cap: nothing heavier than 700 anywhere in the app */
b, strong, .fw-bold, .font-weight-bold, .fw-bolder, h1, h2, h3, h4, h5, h6 { font-weight: 700 !important; }

/* ---------- Login card: rhythm & clarity pass ---------- */
.ux-auth-card { padding: 40px 40px 30px; max-width: 460px; }
.ux-auth-card h2 { font-size: 28px; margin-bottom: 6px; }
.ux-auth-sub { margin-bottom: 26px; font-size: 14.5px; }
.ux-auth-card form > label, .ux-label-row { margin-top: 0; }
.ux-auth-card label { font-size: 13.5px; margin-bottom: 8px; }
.ux-field { border-radius: 12px; }
.ux-field > i { flex-basis: 48px; }
.ux-field input { padding: 14px 14px 14px 0 !important; font-size: 15.5px; }
.ux-eye { flex-basis: 48px; height: 50px; }
.ux-hint { margin: 8px 0 22px; font-size: 12.5px; line-height: 1.45; }
.ux-label-row { margin-bottom: 8px; }
.ux-label-row label { margin: 0; }
.ux-link { font-size: 13px; }
.ux-capslock { margin-top: 10px; }
/* custom checkbox */
.ux-auth-card label.ux-check { margin: 20px 0 22px; gap: 10px; font-size: 14px; color: var(--ink); }
.ux-check input { position: absolute; opacity: 0; width: 1px; height: 1px; pointer-events: none; }
.ux-check-box { width: 20px; height: 20px; border: 1.5px solid #b8c4bc; border-radius: 6px; background: #fff; display: inline-flex; align-items: center; justify-content: center; color: #fff; transition: background .12s ease, border-color .12s ease; flex: 0 0 20px; }
.ux-check-box i { font-size: 16px; opacity: 0; }
.ux-check input:checked + .ux-check-box { background: var(--sidebar); border-color: var(--sidebar); }
.ux-check input:checked + .ux-check-box i { opacity: 1; }
.ux-check input:focus-visible + .ux-check-box { box-shadow: 0 0 0 4px rgba(var(--sidebar-rgb), .14); }
.ux-check:hover .ux-check-box { border-color: var(--sidebar); }
/* button */
.ux-btn-cta { padding: 15px 18px; border-radius: 12px; box-shadow: 0 4px 12px rgba(244,229,28,.28); }
.ux-btn-cta:hover { box-shadow: 0 6px 16px rgba(244,229,28,.36); }
/* help block */
.ux-auth-help { display: block; margin-top: 26px; padding: 16px 18px 14px; background: var(--ux-surface); border: 1px solid var(--ux-border); border-radius: 12px; }
.ux-auth-help-title { display: flex; align-items: center; gap: 8px; font-size: 13.5px; font-weight: 700; color: var(--sidebar); margin-bottom: 8px; }
.ux-auth-help-title i { font-size: 18px; }
.ux-auth-help ul { margin: 0; padding-left: 18px; color: var(--ux-muted); font-size: 13px; line-height: 1.55; }
.ux-auth-help ul li + li { margin-top: 4px; }
.ux-auth-help a { color: var(--sidebar); font-weight: 700; text-decoration: underline; text-underline-offset: 2px; }
/* footer */
.ux-auth-footer { max-width: 460px; margin-top: 20px; align-items: center; }
.ux-auth-footer a { padding: 8px 14px; border: 1px solid var(--ux-border); border-radius: 999px; background: #fff; }
.ux-auth-footer a:hover { text-decoration: none; border-color: var(--sidebar); background: rgba(var(--sidebar-rgb), .05); }
.ux-auth-footer a i { font-size: 17px; }
@media (max-width: 991px) { .ux-auth-card { padding: 28px 22px 22px; } }

/* Wordmark: "SocietyOne" is mixed-case, so no wide letter-spacing */
.sidebar .logo_details .logo_name, .ux-auth-logo .logo_name, .mobile-sidebar .mobile_logo_name, .ux-auth-mobile-logo .logo_name { letter-spacing: 0; font-size: 21px; }
.ux-auth-logo .logo_name { font-size: 25px; }
.sidebar .logo_details .logo_name small, .ux-auth-logo .logo_name small { letter-spacing: .06em; }

/* ---------- Auth: forgot / reset pages ---------- */
.ux-back { display: inline-flex; align-items: center; gap: 4px; font-size: 13px; font-weight: 600; color: var(--ux-muted); text-decoration: none; margin-bottom: 18px; }
.ux-back i { font-size: 18px; } .ux-back:hover { color: var(--sidebar); }
.ux-auth-card form > .ux-btn-cta { margin-top: 4px; }
.ux-auth-card form label + .ux-field, .ux-strength + label, .ux-match + .ux-btn-cta { margin-top: 0; }
.ux-strength + label { display: block; margin-top: 18px; }
.ux-strength { margin: 10px 0 0; }
.ux-strength-bar { display: flex; gap: 6px; margin-bottom: 6px; }
.ux-strength-bar span { flex: 1; height: 5px; border-radius: 3px; background: var(--ux-border); transition: background .15s ease; }
.ux-strength-label { font-size: 12.5px; color: var(--ux-muted); }
.ux-strength.lvl-1 span.on { background: #d9534f; } .ux-strength.lvl-1 .ux-strength-label { color: #b42318; }
.ux-strength.lvl-2 span.on { background: var(--accent-gold-2); } .ux-strength.lvl-2 .ux-strength-label { color: #7a5b00; }
.ux-strength.lvl-3 span.on { background: var(--primary-light); } .ux-strength.lvl-3 .ux-strength-label { color: var(--primary-light); }
.ux-strength.lvl-4 span.on { background: var(--sidebar); } .ux-strength.lvl-4 .ux-strength-label { color: var(--sidebar); font-weight: 600; }
.ux-field.is-valid { border-color: var(--primary-light); }
.ux-match { display: inline-flex; align-items: center; gap: 4px; color: #b42318; font-weight: 600; margin-bottom: 18px !important; }
.ux-match.ok { color: var(--sidebar); }
.ux-match[hidden] { display: none; }
.ux-match i { font-size: 16px; }
.ux-auth-state { text-align: center; }
.ux-auth-state-icon { width: 72px; height: 72px; margin: 4px auto 18px; border-radius: 50%; display: flex; align-items: center; justify-content: center; background: rgba(var(--sidebar-rgb), .10); color: var(--sidebar); font-size: 34px; }
.ux-auth-state .ux-auth-sub { margin-bottom: 18px; }
.ux-auth-state .ux-auth-sub b { color: var(--ink); word-break: break-all; }
.ux-steps { text-align: left; margin: 0 0 22px; padding: 0; list-style: none; counter-reset: s; display: grid; gap: 8px; }
.ux-steps li { counter-increment: s; display: flex; align-items: center; gap: 12px; font-size: 14px; color: var(--ink); }
.ux-steps li::before { content: counter(s); width: 26px; height: 26px; border-radius: 50%; background: var(--accent-bright); color: var(--ink); font-weight: 700; font-size: 13px; display: inline-flex; align-items: center; justify-content: center; flex: 0 0 26px; }
.ux-auth-state .ux-auth-help { text-align: left; }
a.ux-btn-cta { text-decoration: none; }

.ux-auth-card .ux-strength { margin-bottom: 20px; }
.ux-auth-card .ux-strength + label { margin-top: 0; }
.ux-auth-card #cnWrap { margin-bottom: 20px; }
.ux-auth-card .ux-match:not([hidden]) { margin: -12px 0 18px !important; }

/* =====================================================================
   Master panel
   ===================================================================== */
.mx-kpis { display: grid; grid-template-columns: repeat(auto-fit, minmax(210px, 1fr)); gap: var(--ux-gap); margin-bottom: 0; }
.mx-kpis-6 { grid-template-columns: repeat(auto-fit, minmax(170px, 1fr)); }
.mx-kpi { display: flex; align-items: center; gap: 14px; background: #fff; border: 1px solid var(--ux-border); border-top: 3px solid var(--sidebar); border-radius: var(--ux-radius); padding: 16px 18px; box-shadow: var(--ux-shadow); text-decoration: none; color: inherit; transition: transform .15s ease, box-shadow .15s ease; }
a.mx-kpi:hover { transform: translateY(-2px); box-shadow: var(--ux-shadow-hover); color: inherit; }
.mx-kpi > i { width: 46px; height: 46px; flex: 0 0 46px; border-radius: 12px; display: inline-flex; align-items: center; justify-content: center; font-size: 24px; background: rgba(var(--sidebar-rgb), .10); color: var(--sidebar); }
.mx-kpi b { display: block; font-size: 24px; line-height: 1.1; color: var(--ink); font-weight: 700; letter-spacing: -.01em; }
.mx-kpi span { display: block; font-size: 12.5px; color: var(--ux-muted); font-weight: 600; }
.mx-kpi small { display: block; font-size: 11.5px; color: #9aa79f; margin-top: 2px; }
.mx-kpi-warn { border-top-color: var(--accent-3); }
.mx-kpi-warn > i { background: rgba(var(--accent-3-rgb), .25); color: #7a5b00; }
.mx-health .ux-table-wrap { padding: 0 6px 6px; }
.mx-table { width: 100%; border-collapse: separate; border-spacing: 0; }
.mx-table thead th { font-size: 11.5px; text-transform: uppercase; letter-spacing: .04em; color: var(--sidebar); background: rgba(var(--sidebar-rgb), .06); padding: 10px 12px; text-align: left; white-space: nowrap; }
.mx-table tbody td { padding: 10px 12px; border-bottom: 1px solid #f0f3f1; font-size: 13.5px; vertical-align: middle; }
.mx-table tbody tr:hover { background: rgba(var(--sidebar-rgb), .04); }
.mx-table .text-end { text-align: right; }
.mx-due { color: #b42318; font-weight: 700; }
.mx-soc { display: flex; align-items: center; gap: 10px; text-decoration: none; color: inherit; }
.mx-soc b, .mx-cell b { display: block; font-size: 13.5px; color: var(--ink); font-weight: 700; }
.mx-soc small, .mx-cell small { display: block; font-size: 11.5px; color: var(--ux-muted); }
.mx-dot { display: inline-block; width: 9px; height: 9px; border-radius: 50%; background: #dfe6e1; margin-right: 3px; }
.mx-dot.ok { background: var(--primary-light); }
.mx-actions { display: flex; flex-wrap: wrap; gap: 8px; padding: 10px 18px 4px; }
.mx-actions .btn { font-size: 12.5px; }
.mx-danger { color: #b42318 !important; }
.mx-dl { padding: 12px 18px 16px; }
.mx-progress { height: 8px; background: var(--ux-surface); border-radius: 999px; margin: 12px 18px 6px; overflow: hidden; }
.mx-progress span { display: block; height: 100%; background: var(--primary-light); border-radius: 999px; transition: width .3s ease; }
.mx-checks { list-style: none; margin: 8px 0 4px; padding: 0 18px; display: grid; gap: 6px; }
.mx-checks li { display: flex; align-items: center; gap: 8px; font-size: 13.5px; color: var(--ux-muted); }
.mx-checks li.ok { color: var(--ink); }
.mx-checks li i { font-size: 18px; color: #c6cfc9; }
.mx-checks li.ok i { color: var(--primary-light); }
.mx-perm { display: flex; gap: 10px; align-items: baseline; padding: 6px 0; border-bottom: 1px solid #f0f3f1; font-size: 13px; }
.mx-perm:last-child { border-bottom: 0; }
.mx-perm b { flex: 0 0 90px; color: var(--ink); }
.mx-perm em { font-style: normal; display: inline-block; background: rgba(var(--sidebar-rgb), .08); color: var(--sidebar); border-radius: 999px; padding: 2px 8px; font-size: 11.5px; margin: 0 4px 4px 0; }
.ux-panel .ux-panel-head.mt-2 { border-top: 1px solid var(--ux-border); margin-top: 8px; }

/* Impersonation bar */
.ux-imp-bar { position: fixed; top: 0; left: 0; right: 0; z-index: 2000; display: flex; align-items: center; gap: 10px; padding: 8px 16px; background: var(--accent-bright); color: var(--ink); font-size: 13.5px; font-weight: 600; box-shadow: 0 2px 10px rgba(0,0,0,.18); }
.ux-imp-bar i { font-size: 18px; }
.ux-imp-bar form { margin-left: auto; }
.ux-imp-bar button { border: 0; background: var(--sidebar); color: #fff; border-radius: 999px; padding: 6px 14px; font-size: 12.5px; font-weight: 700; cursor: pointer; display: inline-flex; align-items: center; gap: 4px; }
.ux-imp-bar button:hover { background: var(--sidebar-dark); }
body:has(.ux-imp-bar) .sidebar, body:has(.ux-imp-bar) .task__section { margin-top: 38px; }
body:has(.ux-imp-bar) .task__section .text.header-text { top: 38px; }
@media (max-width: 767px) { .ux-imp-bar { font-size: 12px; padding: 6px 10px; } .ux-imp-bar span b { display: inline; } }
.board-title .btn-group-lg { gap: 8px; align-items: center; }
.board-title .btn-group-lg form { margin: 0; }
.board-title .btn-group-lg .btn { white-space: nowrap; display: inline-flex; align-items: center; gap: 6px; }
.board-title .btn-group-lg .btn i { font-size: 16px; }
.board-title .btn-group-lg .btn:disabled { opacity: .55; cursor: not-allowed; }
.ux-panel .ux-row .ux-row-sub { white-space: normal; }
.mx-dl dd { word-break: normal; overflow-wrap: anywhere; }
.mx-filters { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; }
.mx-filters select { border: 1px solid var(--ux-border); border-radius: var(--ux-radius-sm); padding: 7px 10px; font-size: 13px; background: #fff; width: auto; min-width: 140px; }
@media (max-width: 767px) { .mx-filters { width: 100%; } .mx-filters select { flex: 1; min-width: 0; } }

/* ---------- Master dashboard polish ---------- */
.mx-legend { display: flex; align-items: center; gap: 14px; font-size: 12px; color: var(--ux-muted); }
.mx-legend span { display: inline-flex; align-items: center; gap: 5px; }
.mx-legend .mx-dot { margin: 0; }
.mx-tablehint { padding: 0 18px 8px; margin: 0; }
.mx-table thead th small { display: block; font-weight: 500; text-transform: none; letter-spacing: 0; font-size: 10.5px; color: #9aa79f; margin-top: 1px; }
.mx-table thead th.text-end { text-align: right; }
.mx-table thead th.text-end.sorting:after, .mx-table thead th.text-end.sorting_asc:after, .mx-table thead th.text-end.sorting_desc:after { position: static; margin-left: 4px; }
.mx-table td.mx-setup { white-space: nowrap; }
.mx-zero { color: #9aa79f; }
tr.mx-clickable { cursor: pointer; }
tr.mx-clickable:focus-visible { outline: 2px solid var(--accent-2); outline-offset: -2px; }
tr.mx-clickable td:first-child { position: relative; }
tr.mx-clickable:hover td:first-child::before { content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 3px; background: var(--accent-bright); }
.mx-wrap { white-space: normal !important; }
.ux-empty i { display: block; font-size: 30px; color: var(--sidebar); opacity: .45; margin-bottom: 8px; }
.ux-panel { display: flex; flex-direction: column; }
.ux-panel .ux-empty { flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: center; }
/* KPI strip: 6-up on wide screens, 3-up on tablets, 2-up on phones */
@media (min-width: 1800px) { .mx-kpis { grid-template-columns: repeat(6, 1fr); } }
@media (min-width: 1150px) and (max-width: 1799px) { .mx-kpis { grid-template-columns: repeat(3, 1fr); } }
@media (min-width: 620px) and (max-width: 1149px) { .mx-kpis { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 619px) { .mx-kpis { grid-template-columns: 1fr; } }
.mx-kpi span, .mx-kpi small { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
@media (min-width: 1800px) { .mx-kpi span, .mx-kpi small { white-space: normal; } }
.mx-kpi b { font-size: 22px; }
/* keep DataTables sort arrows clear of the label */
.mx-table thead th { padding-right: 26px !important; position: relative; }
.mx-table thead th.sorting:after, .mx-table thead th.sorting_asc:after, .mx-table thead th.sorting_desc:after,
.mx-table thead th.sorting:before, .mx-table thead th.sorting_asc:before, .mx-table thead th.sorting_desc:before { right: 8px !important; opacity: .35; }
.mx-table thead th.text-end { padding-right: 26px !important; }
.mx-soc b, .mx-soc small, .mx-cell b, .mx-cell small { white-space: nowrap; }
.mx-table td:first-child, .mx-table td:nth-child(2) { min-width: 190px; }
.mx-table thead th:nth-child(6) small { white-space: nowrap; }
.mx-actions-bar { display: flex; gap: 10px; flex-wrap: wrap; justify-content: flex-end; align-items: center; }
.mx-actions-bar > form, .mx-actions-bar > a { margin: 0; flex: 0 0 auto; }

/* ---------- Master table: alignment & density ---------- */
.mx-table thead th { vertical-align: middle; white-space: nowrap; }
.mx-table thead th small { display: none; }                  /* sub-labels moved to tooltips/legend */
/* numeric cells share the header's arrow padding so columns line up exactly */
.mx-table thead th.text-end, .mx-table tbody td.text-end { padding-right: 26px !important; }
.mx-table thead th.mx-nosort, .mx-table tbody td.mx-setup { padding-right: 12px !important; }
.mx-table thead th:last-child, .mx-table tbody td:last-child { padding-right: 16px !important; }
.mx-table thead th:first-child, .mx-table tbody td:first-child { padding-left: 16px !important; }
.mx-table tbody td { padding-top: 12px; padding-bottom: 12px; }
.mx-table tbody tr:last-child td { border-bottom: 0; }
.mx-legend-key { color: var(--ink); font-weight: 600; }
.mx-legend { gap: 10px; }
.mx-legend span + span { margin-left: -2px; }
/* panel footer CTA */
.mx-panel-cta { display: flex; align-items: center; justify-content: center; gap: 6px; margin-top: auto; padding: 12px 18px;
  border-top: 1px dashed var(--ux-border); color: var(--sidebar); font-size: 13px; font-weight: 600; text-decoration: none; }
.mx-panel-cta:hover { background: rgba(var(--sidebar-rgb), .05); color: var(--sidebar); }
.mx-panel-cta i { font-size: 17px; }
/* table controls: put the length + search on one tidy line */
.mx-health .dataTables_wrapper .dataTables_length { padding-left: 16px; }
.mx-health .dataTables_wrapper .dataTables_filter { padding-right: 16px; }
.mx-health .dataTables_wrapper .dataTables_info { padding-left: 16px; }
.mx-health .dataTables_wrapper .dataTables_paginate { padding-right: 16px; }
/* Society health: keep every column readable at laptop widths */
@media (max-width: 1599px) {
  /* the admin column repeats on the society page; drop it before anything clips */
  .mx-table thead th:nth-child(2), .mx-table tbody td:nth-child(2) { display: none; }
  .mx-table td:first-child { min-width: 170px; }
  .mx-table thead th, .mx-table tbody td { font-size: 13px; }
  .mx-table thead th.text-end, .mx-table tbody td.text-end { padding-right: 22px !important; }
}
@media (max-width: 1150px) {
  /* narrower still: the table scrolls, with the edge fade from .ux-table-wrap */
  .mx-table thead th, .mx-table tbody td { padding-left: 10px; padding-right: 10px; }
}

/* =====================================================================
   Button system — one consistent size, weight and icon rhythm everywhere
   ===================================================================== */
.btn, .btn-sm {
  display: inline-flex; align-items: center; justify-content: center; gap: 7px;
  min-height: 38px; padding: 0 16px; border-radius: 8px; border: 1px solid transparent;
  font-size: 13.5px; font-weight: 600; line-height: 1; letter-spacing: .005em;
  text-decoration: none; white-space: nowrap; cursor: pointer;
  transition: background-color .14s ease, border-color .14s ease, color .14s ease, box-shadow .14s ease, transform .1s ease;
}
.btn i, .btn-sm i { font-size: 17px; line-height: 1; flex: 0 0 auto; margin: 0; }
.btn:focus-visible { outline: none; box-shadow: 0 0 0 3px rgba(var(--sidebar-rgb), .28); }
.btn:active { transform: translateY(1px); }
.btn:disabled, .btn.disabled { opacity: .5; pointer-events: none; }

/* Primary — the main action on a screen */
.btn-primary, .btn-dark {
  background: var(--sidebar) !important; border-color: var(--sidebar) !important; color: #fff !important;
  box-shadow: 0 1px 2px rgba(0, 27, 12, .12);
}
.btn-primary:hover, .btn-dark:hover { background: var(--primary-light) !important; border-color: var(--primary-light) !important; box-shadow: 0 3px 10px rgba(4, 92, 53, .28); }

/* Secondary — a visible outline, not a ghost */
.btn-light, .btn-light.border, .btn-secondary {
  background: #fff !important; border-color: #cdd8d1 !important; color: var(--sidebar) !important;
  box-shadow: 0 1px 2px rgba(0, 27, 12, .05);
}
.btn-light:hover, .btn-light.border:hover, .btn-secondary:hover {
  background: rgba(var(--sidebar-rgb), .06) !important; border-color: var(--sidebar) !important; color: var(--sidebar) !important; box-shadow: 0 3px 8px rgba(0, 27, 12, .10);
}
.btn-light i, .btn-secondary i { color: var(--sidebar); }

/* CTA — yellow, reserved for the one stand-out action */
.btn-warning, .btn-warning.bg-warning {
  background: var(--cta) !important; border-color: var(--cta) !important; color: var(--cta-ink) !important;
  box-shadow: 0 1px 2px rgba(0, 27, 12, .10);
}
.btn-warning:hover, .btn-warning.bg-warning:hover { background: var(--accent-gold-2) !important; border-color: var(--accent-gold-2) !important; box-shadow: 0 3px 10px rgba(220, 205, 15, .4); }
.btn-warning i { color: var(--cta-ink); }

/* Tertiary / destructive */
.btn-info { background: rgba(var(--sidebar-rgb), .08) !important; border-color: transparent !important; color: var(--sidebar) !important; }
.btn-info:hover { background: var(--sidebar) !important; color: #fff !important; }
.btn-info:hover i { color: #fff; }
.btn-success, .btn-success.bg-success { background: var(--primary-light) !important; border-color: var(--primary-light) !important; color: #fff !important; }
.btn-success:hover { background: var(--sidebar) !important; border-color: var(--sidebar) !important; }
.btn-danger, .btn-danger.bg-danger { background: #fff !important; border-color: #f3c9c5 !important; color: #b42318 !important; }
.btn-danger:hover, .btn-danger.bg-danger:hover { background: #b42318 !important; border-color: #b42318 !important; color: #fff !important; }
.btn-danger i { color: inherit; }
.mx-danger, .btn-light.mx-danger { color: #b42318 !important; }
.mx-danger:hover, .btn-light.mx-danger:hover { background: #fdecec !important; border-color: #f3c9c5 !important; color: #b42318 !important; }
.mx-danger i { color: #b42318 !important; }

/* Toolbars: even spacing, wraps instead of clipping */
.board-title .btn-group-lg, .board-title .group-btn, .mx-actions-bar, .mx-actions {
  display: flex; gap: 10px; align-items: center; flex-wrap: wrap; justify-content: flex-end;
}
.board-title .btn-group-lg > form, .mx-actions-bar > form, .mx-actions > form { margin: 0; }
.mx-actions { justify-content: flex-start; }
.btn-trans { min-height: 0; padding: 0 10px; border: 0; background: transparent; box-shadow: none; }
.btn-trans:hover { background: transparent; box-shadow: none; }

@media (max-width: 767px) {
  .board-title .btn-group-lg, .board-title .group-btn { width: 100%; justify-content: stretch; }
  .board-title .btn-group-lg > .btn, .board-title .group-btn > .btn { flex: 1 1 auto; }
  .btn, .btn-sm { min-height: 40px; }        /* comfortable touch target */
}
/* Filter "Submit" buttons are a minor action — secondary, not the yellow CTA */
button.filterbtn {
  height: 38px !important; padding: 0 16px !important; border-radius: 8px !important;
  border: 1px solid #cdd8d1 !important; background: #fff !important; color: var(--sidebar) !important;
  font-size: 13.5px !important; font-weight: 600 !important; line-height: 1 !important;
  display: inline-flex; align-items: center; gap: 6px; cursor: pointer;
  transition: background-color .14s ease, border-color .14s ease, box-shadow .14s ease;
  box-shadow: 0 1px 2px rgba(0, 27, 12, .05);
}
button.filterbtn:hover { background: rgba(var(--sidebar-rgb), .06) !important; border-color: var(--sidebar) !important; box-shadow: 0 3px 8px rgba(0, 27, 12, .10); }
button.filterbtn:focus-visible { outline: none; box-shadow: 0 0 0 3px rgba(var(--sidebar-rgb), .28); }
/* Bootstrap .btn-group glues buttons together; these are separate actions */
.board-title .btn-group { display: flex; gap: 10px; flex-wrap: wrap; justify-content: flex-end; }
.board-title .btn-group > .btn { border-radius: 8px !important; }
/* date/month inputs in the filter bar match the button height */
.board-title input[type=date], .board-title input[type=month], .board-title select {
  height: 38px; border-radius: 8px; border: 1px solid #cdd8d1; padding: 0 10px; font-size: 13.5px; color: var(--ink); background: #fff;
}
.board-title input[type=date]:focus, .board-title input[type=month]:focus, .board-title select:focus {
  outline: none; border-color: var(--sidebar); box-shadow: 0 0 0 3px rgba(var(--sidebar-rgb), .14);
}
.board-title label, .board-title .text-small { font-size: 13px; color: var(--ux-muted); font-weight: 600; }
/* Icon-only action chips: status chips keep their colour, action chips stay neutral */
td a.notify.alert-info:has(> i.bx) { background: rgba(var(--sidebar-rgb), .08); color: var(--sidebar); border-color: transparent; }
td a.notify.alert-info:has(> i.bx):hover { background: var(--sidebar); color: #fff; }
td a.notify:has(> i.bx) i { font-size: 16px; }

/* ---------- Data table alignment: text left, counts centred, money right ---------- */
.mx-table th.mx-num, .mx-table td.mx-num { text-align: center; }
.mx-table th.mx-money, .mx-table td.mx-money { text-align: right; }
.mx-table td.mx-money { font-variant-numeric: tabular-nums; font-feature-settings: "tnum"; }
.mx-table td.mx-num { font-variant-numeric: tabular-nums; }
/* sort arrows sit inline after the label instead of pinned to the column edge,
   so a centred/right label stays visually tied to the values below it */
.mx-table thead th.sorting, .mx-table thead th.sorting_asc, .mx-table thead th.sorting_desc { padding-right: 12px !important; }
.mx-table thead th.sorting:before, .mx-table thead th.sorting:after,
.mx-table thead th.sorting_asc:before, .mx-table thead th.sorting_asc:after,
.mx-table thead th.sorting_desc:before, .mx-table thead th.sorting_desc:after { display: none !important; }
.mx-table thead th.sorting, .mx-table thead th.sorting_asc, .mx-table thead th.sorting_desc { cursor: pointer; }
.mx-table thead th.mx-nosort { cursor: default; }
.mx-table td.mx-money, .mx-table th.mx-money { padding-right: 16px !important; }
/* keep numeric columns compact so values sit near their labels */
.mx-table th.mx-num, .mx-table td.mx-num { width: 1%; white-space: nowrap; }

.mx-table thead th.sorting::after,
.mx-table thead th.sorting_asc::after,
.mx-table thead th.sorting_desc::after {
  display: inline-block !important; position: static !important;
  top: auto !important; right: auto !important; bottom: auto !important; left: auto !important;
  margin-left: 5px; font-size: 11px; content: "95"; opacity: .32; color: inherit;
}
.mx-table thead th.sorting_asc::after { content: "91"; opacity: 1; color: var(--sidebar); }
.mx-table thead th.sorting_desc::after { content: "93"; opacity: 1; color: var(--sidebar); }
.mx-table thead th.sorting:hover::after { opacity: .7; }
.mx-table th:first-child, .mx-table td:first-child { width: 26%; }
.mx-table th:nth-child(2), .mx-table td:nth-child(2) { width: 24%; }
.mx-table th:nth-child(7), .mx-table td:nth-child(7) { width: 14%; }
/* ---------- Panel header strip: everything vertically centred on one line ---------- */
.ux-panel-head {
  display: flex; align-items: center; justify-content: space-between; gap: 14px;
  min-height: 52px; padding: 0 18px;                 /* symmetric: centring does the work */
  flex-wrap: wrap;
}
.ux-panel-head > * { display: flex; align-items: center; }
.ux-panel-head h3 { line-height: 1; margin: 0; align-self: center; }
.ux-panel-head h3 i { line-height: 1; display: inline-flex; align-items: center; }
.ux-panel-head a { line-height: 1; align-self: center; }
.mx-legend { align-items: center; line-height: 1; flex-wrap: wrap; row-gap: 4px; }
.mx-legend span, .mx-legend a { display: inline-flex; align-items: center; line-height: 1; }
.mx-legend .mx-dot { position: relative; top: 0; align-self: center; }
/* the "mt-2" variant used as a section break inside a panel keeps the same rhythm */
.ux-panel .ux-panel-head.mt-2 { margin-top: 6px; }
@media (max-width: 767px) {
  .ux-panel-head { min-height: 0; padding: 12px 14px; row-gap: 6px; }
  .mx-legend { font-size: 11.5px; }
}

/* ---------- Card grid spacing: breathing room between panels ---------- */
/* Bootstrap gutters inside our flex sections */
.flex .row { --bs-gutter-x: var(--ux-gap); --bs-gutter-y: var(--ux-gap); }
.flex .row.g-3 { --bs-gutter-x: var(--ux-gap); --bs-gutter-y: var(--ux-gap); }
/* vertical rhythm between stacked sections (KPIs -> table -> panels) */
.scrum-board-container > .flex + .flex { margin-top: var(--ux-gap); }
.scrum-board-container > .flex > .col-md-12 > .ux-panel,
.scrum-board-container > .flex > .col-md-12 > .row { margin-bottom: 0; }
/* the quick-action row sits tighter to the cards above it */
.scrum-board-container > .flex > .ux-quick { margin-top: 0; }
/* dashboard stat cards (role dashboards use .row > .col-*) */
.flex .row > [class*="col-"] { margin-bottom: 0; }
.db-box-content { margin-bottom: 0 !important; }
.flex .row.g-0 { --bs-gutter-x: 0; --bs-gutter-y: 0; }
@media (max-width: 991px) { :root { --ux-gap: 14px; } }
/* one gap value for every card grid on a page */

/* ---------- Single source of truth for card spacing ----------
   Everything that sits side by side or stacked on a page uses --ux-gap,
   so the rhythm stays identical regardless of grid type (CSS grid,
   Bootstrap row, or flex strip). */
.mx-kpis, .ux-quick, .flex .row, .scrum-board-container > .flex + .flex { }
.mx-kpis { gap: var(--ux-gap) !important; }
.flex .row, .flex .row.g-1, .flex .row.g-2, .flex .row.g-3, .flex .row.g-4 {
  --bs-gutter-x: var(--ux-gap) !important; --bs-gutter-y: var(--ux-gap) !important;
}
.scrum-board-container > .flex + .flex { margin-top: var(--ux-gap) !important; }
.scrum-board-container { padding-bottom: var(--ux-gap); }

/* ---------- Table toolbar & footer: breathing room above and below ---------- */
.dataTables_wrapper .dataTables_length,
.dataTables_wrapper .dataTables_filter { padding-top: 14px; padding-bottom: 14px; margin: 0; }
.dataTables_wrapper .dataTables_info { padding-top: 16px !important; padding-bottom: 14px; }
.dataTables_wrapper .dataTables_paginate { padding-top: 12px; padding-bottom: 12px; }
/* inside a panel the toolbar gets a divider so it reads as its own band */
.ux-panel .dataTables_wrapper .dataTables_length,
.ux-panel .dataTables_wrapper .dataTables_filter { padding-top: 12px; padding-bottom: 12px; }
.mx-health .dataTables_wrapper .dataTables_length,
.mx-health .dataTables_wrapper .dataTables_filter { padding-left: 16px; padding-right: 16px; }
.mx-health .dataTables_wrapper .dataTables_info { padding-left: 16px; }
.mx-health .dataTables_wrapper .dataTables_paginate { padding-right: 16px; }
/* the header band sits directly above; keep the two from touching */
.mx-health .ux-table-wrap { padding-top: 0; }
.mx-health .ux-panel-head { border-bottom: 1px solid var(--ux-border); }

/* =====================================================================
   One table treatment for every list in the app
   (promotes what the Master dashboard table already uses)
   ===================================================================== */
/* Sort indicators: inline after the label, never pinned to the column edge */
table.dataTable thead th.sorting::before, table.dataTable thead th.sorting::after,
table.dataTable thead th.sorting_asc::before, table.dataTable thead th.sorting_asc::after,
table.dataTable thead th.sorting_desc::before, table.dataTable thead th.sorting_desc::after { content: none !important; }
table.dataTable thead th.sorting, table.dataTable thead th.sorting_asc, table.dataTable thead th.sorting_desc {
  cursor: pointer; padding-right: 12px !important; position: relative;
}
table.dataTable thead th.sorting::after,
table.dataTable thead th.sorting_asc::after,
table.dataTable thead th.sorting_desc::after {
  content: "\2195" !important; display: inline-block !important; position: static !important;
  top: auto !important; right: auto !important; bottom: auto !important; left: auto !important;
  margin-left: 5px; font-size: 11px; opacity: .32; color: inherit; font-weight: 400;
}
table.dataTable thead th.sorting_asc::after { content: "\2191" !important; opacity: 1; color: var(--sidebar); }
table.dataTable thead th.sorting_desc::after { content: "\2193" !important; opacity: 1; color: var(--sidebar); }
table.dataTable thead th.sorting:hover::after { opacity: .7; }

/* Cells that hold only a status/role chip are centred, like the dashboard */
table.dataTable tbody td.ux-chip-cell { text-align: center; }
table.dataTable thead th.ux-chip-col { text-align: center; }
/* Action-icon columns centre too */
table.dataTable tbody td.ux-action-cell { text-align: center; white-space: nowrap; }
table.dataTable thead th.ux-action-col { text-align: center; }
/* Muted empty placeholder so "--" reads as "nothing here", not as data */
.ux-empty-cell { color: #b3bdb7; }
/* Consistent density with the dashboard table */
table.dataTable tbody td { padding-top: 12px !important; padding-bottom: 12px !important; }
table.dataTable tbody tr:last-child td { border-bottom: 0 !important; }
table.dataTable thead th:first-child, table.dataTable tbody td:first-child { padding-left: 16px !important; }
table.dataTable thead th:last-child, table.dataTable tbody td:last-child { padding-right: 16px !important; }

/* =====================================================================
   Density pass — trim the chrome so more content fits on screen.
   Card gaps (--ux-gap) stay; only the internal padding of each band moves.
   ===================================================================== */
/* sticky page header: 77px -> ~64px */
.task__section .text.header-text { padding: 10px 24px; font-size: 18px; margin-bottom: 10px; }
.header-text span { padding: 3px 10px; font-size: 12.5px; }

/* page title row */
.board-title { padding: 2px 24px 8px; }
.board-title h1 { font-size: 20px; }
.board-title h1::before { height: 18px; }

/* white card wrapper: 16px -> 12px */
.col-md-12.rounded.p-3.bg-white { padding: 12px !important; }

/* table toolbar: 63px -> ~54px */
.dataTables_wrapper .dataTables_length,
.dataTables_wrapper .dataTables_filter { padding-top: 8px; padding-bottom: 8px; }
.ux-panel .dataTables_wrapper .dataTables_length,
.ux-panel .dataTables_wrapper .dataTables_filter { padding-top: 8px; padding-bottom: 8px; }
.dataTables_wrapper .dataTables_length select,
.dataTables_wrapper .dataTables_filter input { padding: 5px 10px; }
.dataTables_wrapper .dataTables_filter input { padding-left: 32px; }

/* table rows: 52px -> ~46px */
table.dataTable tbody td { padding-top: 9px !important; padding-bottom: 9px !important; }
.mx-table tbody td { padding-top: 9px; padding-bottom: 9px; }
table.dataTable thead th { padding-top: 10px !important; padding-bottom: 10px !important; }

/* table footer: 50px -> ~40px */
.dataTables_wrapper .dataTables_info { padding-top: 10px !important; padding-bottom: 8px; }
.dataTables_wrapper .dataTables_paginate { padding-top: 8px; padding-bottom: 6px; }

/* panels & list rows */
.ux-panel-head { min-height: 46px; }
.ux-row { padding-top: 9px; padding-bottom: 9px; }
.mx-kpi { padding: 14px 16px; }
.mx-kpi > i { width: 42px; height: 42px; flex-basis: 42px; font-size: 22px; }
.mx-kpi b { font-size: 21px; }

/* dashboard stat cards */
.db-box-content { padding: 16px 18px !important; }
.box-icon i { width: 54px; height: 54px; font-size: 28px !important; }
.box-subtitle h2 { font-size: 26px !important; }

/* section bottom padding */
.scrum-board-container { padding-top: 0 !important; padding-bottom: var(--ux-gap) !important; }

/* Breathing room under the sticky header (the views carry .mb-0, so the
   header's own margin can't do it — the content container owns the space). */
.scrum-board-container { padding-top: 14px !important; }
.task__section .text.header-text { margin-bottom: 0; }

/* =====================================================================
   Filter bar — grouped, labelled, with a visible active state
   ===================================================================== */
.ux-filters {
  display: flex; align-items: center; gap: 6px; flex-wrap: wrap;
  background: #fff; border: 1px solid var(--ux-border); border-radius: 10px;
  padding: 4px 6px 4px 4px; box-shadow: 0 1px 2px rgba(0, 27, 12, .05);
  transition: border-color .15s ease, box-shadow .15s ease;
}
.ux-filters.is-active { border-color: rgba(var(--sidebar-rgb), .45); box-shadow: 0 1px 3px rgba(4, 92, 53, .12); }
.ux-filters-icon {
  display: inline-flex; align-items: center; justify-content: center; width: 30px; height: 30px;
  border-radius: 7px; background: rgba(var(--sidebar-rgb), .08); color: var(--sidebar); font-size: 18px; flex: 0 0 30px;
}
.ux-filters.is-active .ux-filters-icon { background: var(--sidebar); color: var(--accent-bright); }

/* each filter is a labelled control: caption sits above the value, no extra height */
.ux-filter { display: inline-flex; flex-direction: column; justify-content: center; gap: 0; margin: 0; padding: 2px 4px; border-radius: 7px; cursor: pointer; transition: background .12s ease; }
.ux-filter:hover { background: rgba(var(--sidebar-rgb), .05); }
.ux-filter-cap { font-size: 9.5px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--ux-muted); line-height: 1; padding-left: 7px; }
.ux-filter select {
  border: 0 !important; background: transparent !important; box-shadow: none !important; outline: none;
  font-size: 13.5px; font-weight: 600; color: var(--ink); padding: 2px 6px 0; margin: 0; height: 22px; line-height: 1;
  max-width: 190px; cursor: pointer; appearance: none; -webkit-appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='%2366756c'%3E%3Cpath d='M4.5 6.5 8 10l3.5-3.5z'/%3E%3C/svg%3E") !important;
  background-repeat: no-repeat !important; background-position: right 2px center !important; background-size: 14px !important;
  padding-right: 20px !important;
}
.ux-filter select:focus-visible { outline: 2px solid var(--accent-2); outline-offset: 2px; border-radius: 4px; }
/* a filter that is actually set reads as "on" */
.ux-filter.is-set { background: rgba(var(--sidebar-rgb), .08); }
.ux-filter.is-set .ux-filter-cap { color: var(--sidebar); }
.ux-filter.is-set select { color: var(--sidebar); }

.ux-filters-count { font-size: 11.5px; font-weight: 700; color: var(--sidebar); background: rgba(var(--sidebar-rgb), .10); border-radius: 999px; padding: 4px 9px; white-space: nowrap; }
.ux-filters-clear {
  display: inline-flex; align-items: center; gap: 2px; font-size: 12.5px; font-weight: 600; color: #b42318;
  text-decoration: none; padding: 5px 9px; border-radius: 7px; white-space: nowrap;
}
.ux-filters-clear i { font-size: 16px; }
.ux-filters-clear:hover { background: #fdecec; color: #8a1c14; }

@media (max-width: 767px) {
  .ux-filters { width: 100%; }
  .ux-filter { flex: 1 1 auto; }
  .ux-filter select { max-width: none; width: 100%; }
}

/* =====================================================================
   Detail-page header (society 360 and similar)
   ===================================================================== */
.mx-page-head { align-items: flex-start; gap: 16px; padding-bottom: 12px; }
.mx-page-head-main { min-width: 0; }
.mx-page-head .ux-back { margin-bottom: 6px; }
.mx-page-head h1 { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin: 0 0 6px; }
.mx-page-sub { display: flex; flex-wrap: wrap; gap: 14px; font-size: 12.5px; color: var(--ux-muted); }
.mx-page-sub span { display: inline-flex; align-items: center; gap: 5px; }
.mx-page-sub i { font-size: 15px; color: var(--sidebar); opacity: .7; }

/* Manage actions are grouped, then a rule, then the primary CTA — so a
   destructive button never sits flush against the yellow call to action. */
.mx-actions-bar { align-items: center; }
.mx-actions-group { display: flex; gap: 8px; flex-wrap: wrap; }
.mx-actions-sep { width: 1px; align-self: center; height: 24px; background: #c2d0c7; margin: 0 4px; flex: 0 0 1px; }

/* Secondary buttons need a real edge when they sit next to a saturated CTA */
.btn-light, .btn-light.border, .btn-secondary, button.filterbtn { border-color: #c2d0c7 !important; }
.btn-light:hover, .btn-light.border:hover, .btn-secondary:hover { border-color: var(--sidebar) !important; }
.btn-light.mx-danger { border-color: #edc9c5 !important; }
.btn-light.mx-danger:hover { border-color: #d9a49e !important; }

@media (max-width: 767px) {
  .mx-page-head { flex-direction: column; }
  .mx-actions-bar { width: 100%; justify-content: flex-start; }
  .mx-actions-sep { display: none; }
  .mx-actions-group { width: 100%; }
  .mx-actions-group .btn { flex: 1; }
  .mx-actions-bar > form { width: 100%; }
  .mx-actions-bar > form .btn { width: 100%; }
}

/* ---------- Society 360: two-column layout, panels sized to content ---------- */

/* compact definition list inside the admin card */
.mx-dl { padding: 10px 18px 14px; gap: 5px 12px; font-size: 13px; }
.mx-dl dt { font-size: 12.5px; }
/* permission matrix reads as rows, not a wall of chips */
.mx-perm { padding: 7px 0; gap: 12px; }
.mx-perm b { flex: 0 0 96px; font-size: 12.5px; }
.mx-perm span { display: flex; flex-wrap: wrap; gap: 4px; }
.mx-perm em { margin: 0; }
/* Society panels: every card in a row is the same height, and the content
   inside distributes so the extra space reads as padding, not as a gap. */
.mx-panels > [class*="col-"] { display: flex; }
.mx-panels .ux-panel { width: 100%; height: 100%; align-self: stretch; }
.mx-panels .ux-panel > :last-child { margin-bottom: auto; }
.mx-progress-label { font-size: 12px; font-weight: 700; color: var(--ux-muted); background: var(--ux-surface); border-radius: 999px; padding: 3px 9px; }
.mx-progress-label.is-done { color: var(--sidebar); background: rgba(var(--sidebar-rgb), .10); }
.mx-progress { margin: 12px 18px 8px; }
.mx-perms { padding: 4px 18px 12px; }
.ux-panel .ux-row-link b { color: var(--ink); }

/* ---------- Equal-height cards across every card grid ---------- */
/* Bootstrap rows: the column stretches, the panel fills it. */
/* equal-height card columns — never form rows, whose columns are field groups */
.flex .row > [class*="col-"]:not(.form-group):not(.form-check) { display: flex; }
.flex .row > [class*="col-"] > .ux-panel,
.flex .row > [class*="col-"] > .db-box-content,
.flex .row > [class*="col-"] > a.td-none { width: 100%; }
.flex .row > [class*="col-"] > a.td-none { display: flex; }
.flex .row > [class*="col-"] > a.td-none > .db-box-content { width: 100%; height: 100%; }
.ux-panel { display: flex; flex-direction: column; }
/* only panels inside a card grid stretch to match their row */
.flex .row > [class*="col-"] > .ux-panel { height: 100%; }
/* list rows sit at the top; the trailing footer/CTA anchors to the bottom */
.ux-panel > .ux-panel-head { flex: 0 0 auto; }
.ux-panel > .mx-panel-cta { margin-top: auto; }
/* CSS-grid strips already equalise by default */
.mx-kpis > * { height: 100%; }

/* ---------- In-app forms: same field system as the auth pages ---------- */
.ux-formcard { max-width: 560px; }
.ux-form { padding: 16px 18px 18px; }
.ux-form label { display: block; font-size: 13px; font-weight: 700; color: var(--sidebar); margin: 0 0 7px; }
.ux-form .ux-field { margin-bottom: 0; }
.ux-form .ux-hint { margin: 7px 0 18px; }
.ux-form .ux-strength { margin: 10px 0 18px; }
.ux-form .ux-match:not([hidden]) { margin: 8px 0 18px !important; }
.ux-form-actions { display: flex; gap: 10px; flex-wrap: wrap; margin-top: 20px; }
.ux-form-actions .btn { min-width: 132px; }
.ux-form .ux-auth-error { margin-bottom: 16px; }
.ux-tips { padding: 10px 18px 14px; }
.ux-tips li { font-size: 13px; color: var(--ux-muted); }
.ux-tips li i { color: var(--primary-light); }
.ux-panel.mt-3 { margin-top: var(--ux-gap); }
@media (max-width: 767px) { .ux-form-actions .btn { flex: 1; min-width: 0; } }

.ux-formcard { align-self: flex-start; }
.ux-formcard .ux-panel { height: auto; }

/* ---------- Settings / single-form pages ---------- */
.ux-settings { max-width: 1100px; }
.ux-settings .row > [class*="col-"] > .ux-panel { height: 100%; }
/* whose account is being changed — matters when Master is impersonating */
.ux-whoami { display: flex; align-items: center; gap: 10px; padding: 12px 18px; background: var(--ux-surface); border-bottom: 1px solid var(--ux-border); }
.ux-whoami b { display: block; font-size: 13.5px; color: var(--ink); }
.ux-whoami small { display: block; font-size: 12px; color: var(--ux-muted); }
.ux-tipnote { display: flex; gap: 8px; align-items: flex-start; margin: 4px 18px 16px; padding: 10px 12px; background: rgba(var(--sidebar-rgb), .06); border-radius: 8px; font-size: 12.5px; color: var(--sidebar); line-height: 1.45; }
.ux-tipnote i { font-size: 16px; flex: 0 0 auto; margin-top: 1px; }

/* card grid columns must have a mobile base width */
.flex .row > [class*="col-"]:not([class*="col-12"]):not(.col) { min-width: 0; }

/* =====================================================================
   Control size scale — one height for inputs and the buttons beside them
     .btn      / .ux-field / .form-control / select  -> --ux-control-h (44px)
     .btn-sm   / toolbar filters                     -> --ux-control-h-sm (38px)
   ===================================================================== */
.btn { min-height: var(--ux-control-h); padding: 0 18px; }
.btn-sm, .btn.btn-sm { min-height: var(--ux-control-h-sm); padding: 0 16px; font-size: 13px; }

/* Text fields used by the auth pages and in-app forms */
.ux-field { min-height: var(--ux-control-h); align-items: stretch; }
.ux-field > i { flex: 0 0 44px; display: flex; align-items: center; justify-content: center; font-size: 18px; }
.ux-field input {
  padding: 0 12px 0 0 !important; height: auto; min-height: 0; align-self: stretch;
  font-size: 15px; line-height: 1.2;
}
.ux-eye { flex: 0 0 44px; height: auto; min-height: 0; align-self: stretch; display: flex; align-items: center; justify-content: center; border-radius: 0 10px 10px 0; }

/* Bootstrap-style fields used by the older CRUD forms */
.ux-form .form-control, .ux-form select.form-control,
.board-title input[type=date], .board-title input[type=month], .board-title select,
button.filterbtn { height: var(--ux-control-h-sm) !important; }
.input-group { min-height: var(--ux-control-h); align-items: stretch; }
.input-group .form-control, .input-group select, .input-group textarea:not([rows]) {
  min-height: 0; align-self: stretch; padding-top: 0; padding-bottom: 0; line-height: 1.2;
}
.input-group .input-icon { align-self: stretch; height: auto; display: flex; align-items: center; justify-content: center; }
.input-group textarea { min-height: calc(var(--ux-control-h) * 2); padding-top: 10px; padding-bottom: 10px; }

/* Form action rows: buttons match the field height above them */
.ux-form-actions .btn { min-height: var(--ux-control-h); }
@media (max-width: 767px) {
  :root { --ux-control-h: 46px; --ux-control-h-sm: 40px; }
}
/* the legacy icon <img> is 45px square and was setting the row height */
.input-group { display: flex; }
.input-group .input-icon {
  flex: 0 0 44px; width: 44px !important; height: var(--ux-control-h) !important;
  padding: 0 12px !important; object-fit: contain; align-self: stretch;
}
.input-group > .form-control, .input-group > select, .input-group > input { height: var(--ux-control-h) !important; }
.input-group > textarea.form-control { height: auto !important; }
/* style.css:1126 pins these to 46px !important — override with the token */
.input-group, img.input-icon { height: var(--ux-control-h) !important; }
.input-group:has(textarea) { height: auto !important; min-height: calc(var(--ux-control-h) * 2); }
.input-group:has(textarea) textarea { height: auto !important; }

/* Settings / single-form pages sit centred in the content area */
.ux-settings { margin-left: auto; margin-right: auto; }
.ux-formcard { margin-left: auto; margin-right: auto; }

/* Centred single-task pages: the heading lines up with the content below it.
   The heading is border-box at (content cap + both paddings) so it tracks the
   block at every width; content-box at the bare cap overflowed the content
   area once the viewport narrowed to less than cap + padding. */
.ux-centered-page > .flex > .ux-settings { max-width: 1100px; margin-left: auto; margin-right: auto; width: 100%; }
.ux-centered-page > .flex { padding-left: 24px; padding-right: 24px; }
.ux-centered-page > .board-title {
  box-sizing: border-box; width: 100%;
  max-width: calc(1100px + 48px); margin-left: auto; margin-right: auto;
  padding-left: 24px; padding-right: 24px;
}
@media (max-width: 767px) {
  .ux-centered-page > .flex { padding-left: 12px; padding-right: 12px; }
  .ux-centered-page > .board-title { max-width: calc(1100px + 24px); padding-left: 12px; padding-right: 12px; }
}

/* ---------- Multi-panel settings forms (society profile) ---------- */
/* .flex .row > col is display:flex, so a column holding several stacked
   panels needs an inner column-flow wrapper rather than a row of panels. */
.ux-stack { display: flex; flex-direction: column; gap: var(--ux-gap); width: 100%; min-width: 0; }
.ux-stack > .ux-panel { height: auto; }
.ux-stack > .ux-form-actions { margin-top: 0; }

/* two-up field grid; collapses to one column on small screens */
.ux-fieldset { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px 18px; }
.ux-fg { min-width: 0; display: flex; flex-direction: column; }
.ux-fg.full { grid-column: 1 / -1; }
.ux-form .ux-fieldset label { margin: 0 0 7px; }
.ux-form .ux-fieldset .ux-hint { margin: 7px 0 0; }
@media (max-width: 575px) { .ux-fieldset { grid-template-columns: 1fr; } }

.ux-req { color: #b42318; font-weight: 700; }

.ux-field.is-readonly { background: var(--ux-surface); }
.ux-field.is-readonly input { color: var(--ux-muted); cursor: default; }

/* textarea that matches .ux-field, without the 38px .form-control height cap */
.ux-textarea {
  display: block; width: 100%; min-height: 92px; resize: vertical;
  border: 1.5px solid var(--ux-border); border-radius: 10px; background: #fff;
  padding: 11px 13px; font-size: 15px; line-height: 1.45; color: var(--ink);
  font-family: inherit; transition: border-color .15s ease, box-shadow .15s ease;
}
.ux-textarea::placeholder { color: #9aa79f; }
.ux-textarea:focus { outline: 0; border-color: var(--sidebar); box-shadow: 0 0 0 4px rgba(var(--sidebar-rgb), .12); }

/* flash messages sit in their own card above the form */
.ux-flashcard { padding: 14px 18px 0; }
.ux-flashcard .ux-auth-ok, .ux-flashcard .ux-auth-error { margin-bottom: 14px; }

/* the help panel follows a long form instead of stretching beside it
   (needs to outrank .ux-settings .row > [class*="col-"] > .ux-panel) */
/* the column is a flex container, so align-self — not height — stops the stretch */
.ux-settings .row > [class*="col-"] > .ux-panel.ux-sidecard { height: auto; align-self: flex-start; }
@media (min-width: 992px) {
  .ux-settings .row > [class*="col-"] > .ux-panel.ux-sidecard { position: sticky; top: 16px; }
}

/* the save/cancel row keeps the card language of the panels above it */
.ux-actioncard { padding: 14px 18px; }
.ux-actioncard .ux-form-actions { margin-top: 0; }

/* ---------- Brand logo ----------
   logo.png is a white/yellow wordmark on transparency, so it only goes on the
   dark surfaces (sidebar, auth brand panel). favicon.png is the square mark,
   used where the sidebar is collapsed and on the white mobile auth card. */
.slogo-word { display: block; height: 38px; width: auto; max-width: 100%; object-fit: contain; }

/* sidebar: wordmark while open, square mark once collapsed */
.sidebar .logo_details .slogo-word { margin-left: 2px; }
.sidebar.open .logo_details .slogo { display: none; }
.sidebar:not(.open) .logo_details .slogo-word { display: none; }
.sidebar:not(.open) .logo_details .slogo {
  display: block; width: 44px; height: 44px; border-radius: 12px;
  object-fit: contain; background: #fff; padding: 3px; box-shadow: 0 4px 12px rgba(0,0,0,.25);
}

/* auth brand panel */
.ux-auth-logo .slogo-word { height: 42px; }

/* the mobile auth card is white: square mark + dark text, never the white wordmark */
.ux-auth-mobile-logo .slogo { object-fit: contain; background: transparent; padding: 0; }

/* ---------- Sidebar brand block ----------
   The wordmark was rendering at 58% of its natural width in a 260px rail, and
   the logo was not clickable. Give it the available width and make it a link
   back to the dashboard, with the collapse control as its own hit target. */
.sidebar .logo_details { width: 100%; height: 82px; padding: 0 12px 0 14px; gap: 8px; }
.sidebar .logo_details .logo-link {
  display: flex; align-items: center; flex: 1; min-width: 0;
  padding: 6px 4px; border-radius: 10px; text-decoration: none;
  transition: background .15s ease;
}
.sidebar .logo_details .logo-link:hover { background: rgba(255,255,255,.08); }
.sidebar.open .logo_details .slogo-word { height: 44px; }

/* collapse control: a real 38px target instead of an absolutely-placed glyph */
.sidebar .logo_details #btn {
  position: static; transform: none; margin: 0; left: auto; right: auto;
  flex: 0 0 38px; width: 38px; min-width: 38px; height: 38px;  /* .sidebar i sets min-width:55px */
  display: flex; align-items: center; justify-content: center;
  border-radius: 9px; font-size: 22px; transition: background .15s ease, color .15s ease;
}
.sidebar.open .logo_details #btn { text-align: center; margin-top: 0; }
.sidebar .logo_details #btn:hover { background: rgba(255,255,255,.12); }

/* collapsed rail: stack the square mark above the toggle */
.sidebar:not(.open) .logo_details { flex-direction: column; height: auto; padding: 12px 0 10px; gap: 8px; }
.sidebar:not(.open) .logo_details .logo-link { flex: none; padding: 0; justify-content: center; }

/* style.css:1398 sets `#btn.bx-menu { opacity: 0 }` - and bx-menu is exactly the
   class the toggle takes when the rail collapses, so the control disappeared on
   the first click and there was no way to expand it again. */
.sidebar .logo_details #btn.bx-menu { opacity: 1; }

/* ---------- Sidebar foot tagline ----------
   "Connected Communities." needs 163px but the box was capped at 120px and a
   hard <br> split it again, so a two-line tagline rendered as four cramped
   lines beside the skyline. Give it the width the phrases need and pull the
   skyline back so the two do not collide. */
.sidebar .ux-art { background-size: 165px 94px; }
.sidebar .ux-art .ux-tagline { max-width: 174px; line-height: 1.3; }

/* Five KPIs in a three-up grid left a dead slot on the second row. Lay them on
   six tracks so the first row takes three cards and the second row two, each
   stretching to fill the width instead of leaving a hole. */
@media (min-width: 1100px) {
  .mx-kpis-5 { grid-template-columns: repeat(6, minmax(0, 1fr)); }
  .mx-kpis-5 > * { grid-column: span 2; }
  .mx-kpis-5 > *:nth-child(4), .mx-kpis-5 > *:nth-child(5) { grid-column: span 3; }
}
/* two-up range: the fifth card would sit alone, so let it span the row */
@media (min-width: 620px) and (max-width: 1099px) {
  .mx-kpis-5 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .mx-kpis-5 > *:nth-child(5) { grid-column: span 2; }
}