/* Baselyner brand overrides — loaded AFTER the Highdmin theme so these win.
   Replaces the stock teal (#02c0ce) with a solid indigo-blue, refines the sidebar,
   and gives the selected menu item a proper "you are here" state. */

:root {
  --bl-primary:        #3a56d4;   /* solid indigo-blue */
  --bl-primary-rgb:    58, 86, 212;
  --bl-primary-dark:   #2c42a8;   /* hover / active */
  --bl-primary-tint:   rgba(58, 86, 212, 0.10);
  --bl-primary-tint-2: rgba(58, 86, 212, 0.16);
  --bl-ink:            #1f2733;   /* strong slate for headings/wordmark */
}

/* ---- Bootstrap primary (buttons, links, text-primary, bg-primary utilities) ---- */
:root,
:root[data-bs-theme="light"],
:root[data-bs-theme="dark"] {
  --bs-primary: var(--bl-primary);
  --bs-primary-rgb: var(--bl-primary-rgb);
  --bs-link-color: var(--bl-primary);
  --bs-link-color-rgb: var(--bl-primary-rgb);
  --bs-link-hover-color: var(--bl-primary-dark);
  --bs-link-hover-color-rgb: var(--bl-primary-rgb);
}

.btn-primary {
  --bs-btn-bg: var(--bl-primary);
  --bs-btn-border-color: var(--bl-primary);
  --bs-btn-hover-bg: var(--bl-primary-dark);
  --bs-btn-hover-border-color: var(--bl-primary-dark);
  --bs-btn-active-bg: var(--bl-primary-dark);
  --bs-btn-active-border-color: var(--bl-primary-dark);
  --bs-btn-disabled-bg: var(--bl-primary);
  --bs-btn-disabled-border-color: var(--bl-primary);
  --bs-btn-focus-shadow-rgb: var(--bl-primary-rgb);
}

.text-primary { color: var(--bl-primary) !important; }
.bg-primary   { background-color: var(--bl-primary) !important; }
.border-primary { border-color: var(--bl-primary) !important; }
.link-primary { color: var(--bl-primary) !important; }
.form-check-input:checked { background-color: var(--bl-primary); border-color: var(--bl-primary); }
.form-control:focus, .form-select:focus { border-color: var(--bl-primary); box-shadow: 0 0 0 .2rem var(--bl-primary-tint); }

/* ---- Highdmin menu colour tokens (light + dark) ---- */
:root[data-menu-color="light"] {
  --highdmin-menu-item-hover-color: var(--bl-primary);
  --highdmin-menu-item-hover-bg: var(--bl-primary-tint);
  --highdmin-menu-item-active-color: var(--bl-primary);
  --highdmin-menu-item-active-bg: var(--bl-primary-tint);
  --highdmin-sidebar-user-bg: #f5f7fe;
}
:root[data-menu-color="dark"],
:root[data-bs-theme="dark"] {
  --highdmin-menu-item-hover-color: #c9d4ff;
  --highdmin-menu-item-hover-bg: rgba(91, 116, 230, 0.16);
  --highdmin-menu-item-active-color: #ffffff;
  --highdmin-menu-item-active-bg: rgba(91, 116, 230, 0.20);
}

/* ---- a tighter, more solid topbar (was 85px) ---- */
:root { --highdmin-topbar-height: 72px; }

/* ---- sidebar menu: refine weight/spacing so it reads cleaner, not chunky ---- */
.sidenav-menu .side-nav .side-nav-item .side-nav-link {
  font-weight: 500;
  color: #55637c;
  border-radius: 8px;
  transition: background-color .15s ease, color .15s ease;
}
.sidenav-menu .side-nav .side-nav-item .side-nav-link:hover,
.sidenav-menu .side-nav .side-nav-item .side-nav-link:focus {
  background: var(--bl-primary-tint);
  color: var(--bl-primary);
}
.sidenav-menu .side-nav .side-nav-item .side-nav-link .menu-icon { opacity: .9; }

/* Solid selected state — works whether `active` is on the <li> or the <a>.
   Tinted pill + brand text + semibold + a left accent bar = clear "you are here". */
.sidenav-menu .side-nav .side-nav-item.active > .side-nav-link,
.sidenav-menu .side-nav .side-nav-item .side-nav-link.active {
  background: var(--bl-primary-tint-2);
  color: var(--bl-primary);
  font-weight: 600;
}
.sidenav-menu .side-nav .side-nav-item.active > .side-nav-link::before,
.sidenav-menu .side-nav .side-nav-item .side-nav-link.active::before {
  content: "";
  position: absolute;
  left: 0; top: 18%; bottom: 18%;
  width: 3px;
  border-radius: 0 3px 3px 0;
  background: var(--bl-primary);
}
.sidenav-menu .side-nav .side-nav-item.active > .side-nav-link .menu-icon,
.sidenav-menu .side-nav .side-nav-item .side-nav-link.active .menu-icon { opacity: 1; }

/* section headings: quieter, refined */
.sidenav-menu .side-nav .side-nav-title {
  color: #9aa6bd;
  font-weight: 600;
  font-size: 0.68rem;
}

/* auth pages: logo sizing */
.auth-brand img { height: 34px; width: auto; }

/* Detached layout: the sticky topbar card adds a 1.5rem top padding to the flow that the stock
   page-content min-height doesn't subtract, so the column overshoots the viewport (scrollbar) and the
   footer drops below the sidebar. Subtract it so the footer bottom aligns with the sidebar card bottom
   and the grey gutter sits evenly below both, with no page scroll. */
html[data-layout-mode="detached"]:not([data-layout="topnav"]) .page-content {
  min-height: calc(100vh - var(--highdmin-topbar-height) - 1.5rem);
}

/* ---- Skeleton loading (shown in the content area during partial navigation) ---- */
.bl-skel { position: relative; overflow: hidden; background: #e9edf4; border-radius: 6px; }
.bl-skel::after {
  content: ""; position: absolute; inset: 0; transform: translateX(-100%);
  background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.6), transparent);
  animation: bl-shimmer 1.2s infinite;
}
@keyframes bl-shimmer { 100% { transform: translateX(100%); } }
.bl-skel-line { height: 12px; }
.bl-skel-heading { height: 26px; }
.bl-skel-block { height: 220px; border-radius: 10px; }
[data-bs-theme="dark"] .bl-skel { background: #2a2c38; }
[data-bs-theme="dark"] .bl-skel::after { background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.08), transparent); }

/* ---- Stylised modal (applies to EVERY modal in the app) ---- */
.modal-content {
  border: 0;
  border-radius: 14px;
  box-shadow: 0 24px 60px rgba(16, 24, 40, 0.22);
  overflow: hidden;
}
.modal-header {
  padding: 1rem 1.25rem;
  background: var(--bs-tertiary-bg);
  border-bottom: 1px solid var(--bs-border-color);
}
.modal-header .modal-title { font-weight: 600; color: var(--bl-ink); }
[data-bs-theme="dark"] .modal-header .modal-title { color: #e7ebf3; }
.modal-body { padding: 1.25rem; }
.modal-footer { padding: .85rem 1.25rem; border-top: 1px solid var(--bs-border-color); }
.modal-backdrop.show { opacity: .4; }

/* ---- Toasts (window.blToast) ---- */
.bl-toast-container {
  position: fixed; top: 1rem; right: 1rem; z-index: 1200;
  display: flex; flex-direction: column; gap: .5rem; max-width: 360px;
}
.bl-toast {
  display: flex; align-items: center; gap: .6rem;
  padding: .7rem .9rem; border-radius: 10px;
  background: #ffffff; color: #1f2733;
  border: 1px solid #e3e7ef; border-left: 4px solid var(--bl-primary);
  box-shadow: 0 10px 30px rgba(16, 24, 40, 0.16);
  transform: translateX(120%); opacity: 0;
  transition: transform .25s ease, opacity .25s ease;
  font-size: .86rem;
}
[data-bs-theme="dark"] .bl-toast { background: #2a2c38; color: #e7ebf3; border-color: rgba(255, 255, 255, 0.12); }
.bl-toast-in { transform: none; opacity: 1; }
.bl-toast i { font-size: 1.15rem; line-height: 1; }
.bl-toast-success { border-left-color: #16a34a; } .bl-toast-success i { color: #16a34a; }
.bl-toast-danger  { border-left-color: #dc2626; } .bl-toast-danger i  { color: #dc2626; }
.bl-toast-info    { border-left-color: var(--bl-primary); } .bl-toast-info i { color: var(--bl-primary); }
.bl-toast-close { margin-left: auto; border: 0; background: none; font-size: 1.15rem; line-height: 1; color: inherit; opacity: .45; cursor: pointer; }
.bl-toast-close:hover { opacity: 1; }

/* ---- Wizard step rail (modal with steps down the left) ---- */
.bl-wizard { display: flex; gap: 1.25rem; }
.bl-wizard-rail { flex: 0 0 190px; display: flex; flex-direction: column; gap: .25rem; border-right: 1px solid var(--bs-border-color); padding-right: 1rem; }
.bl-wizard-body { flex: 1 1 auto; min-width: 0; }
.bl-step { display: flex; align-items: center; gap: .6rem; padding: .55rem .6rem; border-radius: 8px; color: var(--bs-secondary-color); font-size: .85rem; }
.bl-step-num { width: 24px; height: 24px; flex: 0 0 24px; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center; font-size: .78rem; font-weight: 600; background: var(--bs-tertiary-bg); color: var(--bs-secondary-color); border: 1px solid var(--bs-border-color); }
.bl-step.bl-step-active { background: var(--bl-primary-tint); color: var(--bl-primary); font-weight: 600; }
.bl-step.bl-step-active .bl-step-num { background: var(--bl-primary); color: #fff; border-color: var(--bl-primary); }
.bl-step.bl-step-done .bl-step-num { background: #16a34a; color: #fff; border-color: #16a34a; }
@media (max-width: 575px) {
  .bl-wizard { flex-direction: column; }
  .bl-wizard-rail { flex-direction: row; flex-wrap: wrap; border-right: 0; border-bottom: 1px solid var(--bs-border-color); padding-right: 0; padding-bottom: .5rem; }
}

/* ---- Tabulator theme bridge (bl-table.js) — maps the grid onto Bootstrap theme vars for light/dark ---- */
.tabulator { background: var(--bs-secondary-bg); border: 1px solid var(--bs-border-color); border-radius: .5rem; color: var(--bs-body-color); font-size: .8125rem; }
.tabulator .tabulator-header { background: var(--bs-tertiary-bg); color: var(--bs-body-color); border-bottom: 1px solid var(--bs-border-color); font-weight: 600; }
.tabulator .tabulator-header .tabulator-col { background: transparent; border-right: 1px solid var(--bs-border-color); }
.tabulator .tabulator-header .tabulator-col.tabulator-sortable.tabulator-col-sorter-element:hover { background: var(--bs-secondary-bg); }
.tabulator .tabulator-header .tabulator-col .tabulator-header-filter input,
.tabulator .tabulator-header .tabulator-col .tabulator-header-filter select {
  background: var(--bs-body-bg); color: var(--bs-body-color); border: 1px solid var(--bs-border-color); border-radius: .375rem; padding: .2rem .4rem;
}
.tabulator .tabulator-row { background: var(--bs-secondary-bg); border-bottom: 1px solid var(--bs-border-color); color: var(--bs-body-color); }
.tabulator .tabulator-row.tabulator-row-even { background: var(--bs-body-bg); }
.tabulator .tabulator-row.tabulator-selectable:hover { background: var(--bs-tertiary-bg); }
.tabulator .tabulator-row.tabulator-selected,
.tabulator .tabulator-row.tabulator-selected:hover { background: var(--bs-primary-bg-subtle); }
.tabulator .tabulator-row .tabulator-cell { border-right: 1px solid var(--bs-border-color); padding: .5rem .65rem; }
.tabulator .tabulator-row.tabulator-group { background: var(--bs-tertiary-bg); color: var(--bs-body-color); font-weight: 600; border-top: 1px solid var(--bs-border-color); }
.tabulator .tabulator-row.tabulator-group span { color: var(--bs-secondary-color); font-weight: 500; }
.tabulator .tabulator-footer { background: var(--bs-tertiary-bg); color: var(--bs-body-color); border-top: 1px solid var(--bs-border-color); }
.tabulator .tabulator-footer .tabulator-page { background: var(--bs-secondary-bg); color: var(--bs-body-color); border: 1px solid var(--bs-border-color); border-radius: .375rem; }
.tabulator .tabulator-footer .tabulator-page.active { background: var(--bl-primary); color: #fff; border-color: var(--bl-primary); }
.tabulator .tabulator-footer .tabulator-paginator label { color: var(--bs-secondary-color); }
.tabulator-cell .tabulator-editing input,
.tabulator-cell .tabulator-editing select { background: var(--bs-body-bg) !important; color: var(--bs-body-color) !important; border: 1px solid var(--bl-primary) !important; }
.tabulator-edit-list { background: var(--bs-secondary-bg); color: var(--bs-body-color); border: 1px solid var(--bs-border-color); }
.tabulator-edit-list .tabulator-edit-list-item.active,
.tabulator-edit-list .tabulator-edit-list-item:hover { background: var(--bl-primary); color: #fff; }
.tabulator-col-resize-handle { opacity: .35; }

/* ---- Estate filter bar (tenancy scope across the 365 estate pages) ---- */
.bl-estatebar { display: flex; align-items: center; gap: .6rem; padding: .5rem .25rem 0; margin-bottom: .75rem; flex-wrap: wrap; }
.bl-estatebar .label { font-size: .75rem; text-transform: uppercase; letter-spacing: .05em; color: var(--bs-secondary-color); }
.bl-estate-dd { position: relative; }
.bl-estate-menu { position: absolute; z-index: 1030; top: calc(100% + 4px); left: 0; min-width: 260px; max-height: 340px; overflow: auto;
  background: var(--bs-secondary-bg); border: 1px solid var(--bs-border-color); border-radius: .6rem; box-shadow: 0 8px 28px rgba(16,24,40,.18); padding: .4rem; display: none; }
.bl-estate-menu.open { display: block; }
.bl-estate-opt { display: flex; align-items: center; gap: .55rem; padding: .4rem .55rem; border-radius: .4rem; font-size: .8125rem; cursor: pointer; margin: 0; }
.bl-estate-opt:hover { background: var(--bs-tertiary-bg); }
.bl-estate-opt.all { border-bottom: 1px solid var(--bs-border-color); margin-bottom: .25rem; padding-bottom: .5rem; border-radius: 0; }
.bl-estate-opt input { width: 15px; height: 15px; }