/*
Theme Name: prcomps-main
Theme URI: https://datasador.net/
Author: Datasador | PRComps
Author URI: https://datasador.net/
Description: Clean Bootstrap 5.3 theme with Admin-style sidebar + top navbar, tuned for PRComps brand.
Version: 1.0.0
License: MIT
Text Domain: prcomps-main
*/

/* ---------------------------------- */
/* Vars                               */
/* ---------------------------------- */
:root {
  --brand-primary: #1e2a38;
  --brand-primary-600: #0c448e;
  --brand-accent: #0089cf;

  --sidebar-width: 240px;
  --sidebar-width-collapsed: 56px;
  --navbar-height: 56px;

  /* AdminKit-like sidebar */
  --sidebar-bg: #1e2a38;
  --sidebar-hover: rgba(255,255,255,.06);
  --sidebar-active: rgba(255,255,255,.10);
  --sidebar-border: rgba(255,255,255,.12);

  /* WP admin bar offset (updated via body.admin-bar below) */
  --adminbar-h: 0px;
}
body.admin-bar { --adminbar-h: 32px; }
@media (max-width: 782px) {
  body.admin-bar { --adminbar-h: 46px; }
}

/* ---------------------------------- */
/* Base layout                        */
/* ---------------------------------- */
html, body { height: 100%; }
body { background: #f6f8fb; }
.wrapper { position: relative; }

/* ---------------------------------- */
/* Sidebar (base)                     */
/* ---------------------------------- */
.sidebar {
  position: fixed;
  top: var(--adminbar-h);
  left: 0;
  bottom: 0;
  width: var(--sidebar-width);
  height: calc(100vh - var(--adminbar-h));
  overflow-y: auto;

  background: var(--brand-primary);
  color: #fff;
  z-index: 1020; /* below Bootstrap modal */
}

/* Brand row */
.sidebar .brand {
  display: flex;
  align-items: center;
  gap: .5rem;
  padding: .9rem 1rem;
  font-weight: 700;
  letter-spacing: .2px;
}
.sidebar .brand .dot {
  width: 10px; height: 10px; border-radius: 50%;
  background: #fff; opacity: .9;
}

/* Section title (legacy) */
.sidebar .section-title {
  opacity:.75; font-size: .85rem;
  padding: .5rem 1rem; margin-top: .25rem;
}

/* Links (legacy) */
.sidebar a {
  display: block;
  padding: .6rem 1rem;
  color: #ffffff;
  text-decoration: none;
  border-left: 3px solid transparent;
}
.sidebar a:hover { background: rgba(255,255,255,.08); }
.sidebar a.active { background: rgba(255,255,255,.12); border-left-color:#fff; }

/* ---------------------------------- */
/* Collapsed sidebar (base)           */
/* ---------------------------------- */
body.sidebar-collapsed .sidebar { width: var(--sidebar-width-collapsed); }
body.sidebar-collapsed .sidebar .label { display: none; }
body.sidebar-collapsed .sidebar .brand span.label { display:none; }

/* ---------------------------------- */
/* Main area                          */
/* ---------------------------------- */
.main {
  margin-left: var(--sidebar-width);
  min-height: 100vh;
  display:flex; flex-direction:column;
  border-left: 1px solid #e9edf3; /* subtle divider */
}
body.sidebar-collapsed .main { margin-left: var(--sidebar-width-collapsed); }

/* ---------------------------------- */
/* Navbar                             */
/* ---------------------------------- */
.navbar {
  position: sticky; top: 0;
  z-index: 1020;
  height: var(--navbar-height);
  background: #fff;
  border-bottom: 1px solid #e5e7eb;
  padding: 0 .75rem !important; /* tighter */
}
.navbar .btn {
  height: 36px;
  display:flex; align-items:center;
  border-radius: .4rem !important;
  font-size: .875rem;
  padding: .35rem .75rem;
  gap: .4rem;
}

/* ---------------------------------- */
/* Content                            */
/* ---------------------------------- */
.content { padding: 16px; }

/* ---------------------------------- */
/* Buttons tuned to brand             */
/* ---------------------------------- */
.btn-primary {
  --bs-btn-bg: var(--brand-primary);
  --bs-btn-border-color: var(--brand-primary);
  --bs-btn-hover-bg: var(--brand-primary-600);
  --bs-btn-hover-border-color: var(--brand-primary-600);
}
.btn-outline-primary {
  --bs-btn-color: var(--brand-primary);
  --bs-btn-border-color: var(--brand-primary);
  --bs-btn-hover-bg: var(--brand-primary);
  --bs-btn-hover-border-color: var(--brand-primary);
  --bs-btn-hover-color: #fff;
}

/* Filter bar actions */
.filter-bar { border-bottom: 1px solid #e5e7eb; background: #fff; }
.filter-bar .btn {
  min-width: 100px;
  font-weight: 500;
  border-radius: .4rem !important;
  box-shadow: 0 1px 2px rgba(0,0,0,.04);
}

/* ---------------------------------- */
/* Cards / Panels                     */
/* ---------------------------------- */
.card { border-radius: .5rem; border-color: #e7eaf0; }
.card-header { background:#fff; }
a { color: var(--brand-primary); }

/* ---------------------------------- */
/* Modal safety                       */
/* ---------------------------------- */
.modal-backdrop{ z-index:2000 !important; }
.modal{ z-index:2005 !important; }
.wrapper.modal-open, .main.modal-open{ transform:none !important; }

/* ---------------------------------- */
/* Small utilities                    */
/* ---------------------------------- */
.text-brand { color: var(--brand-primary) !important; }
.bg-brand { background: var(--brand-primary) !important; color:#fff !important; }

/* ===================================================================== */
/* AdminKit-style sidebar overrides (append-only; refines the base rules) */
/* ===================================================================== */

/* base colors/typography */
.sidebar{
  background: var(--sidebar-bg) !important;
  color:#fff;
  font-size:.95rem;
}

/* brand row */
.sidebar .brand{
  padding:1rem !important;
  font-weight:600 !important;
  border-bottom:1px solid var(--sidebar-border);
}

/* small section headers (Home / Tools) */
.sidebar .muted,
.sidebar .section-title{
  font-size:.75rem !important;
  font-weight:700;
  text-transform:uppercase;
  letter-spacing:.5px;
  margin:1rem 0 .25rem 1rem !important;
  opacity:.55;
}

/* nav links */
.sidebar a{
  display:flex !important;
  align-items:center;
  gap:.75rem;
  padding:.65rem 1rem !important;
  margin:2px 8px;               /* inset look */
  color:#fff !important;
  text-decoration:none !important;
  border-radius:8px;             /* pill-ish cards */
  border-left:0 !important;      /* override older left border style */
  transition:background .15s ease;
}
.sidebar a:hover,
.sidebar a:focus{
  background:var(--sidebar-hover);
}

/* active state (subtle) */
.sidebar a.active,
.sidebar a[aria-current="page"],
.sidebar a[aria-current="true"]{
  background:var(--sidebar-active) !important;
  font-weight:600;
  box-shadow: inset 0 0 0 1px var(--sidebar-border);
}

/* feather icon sizing/opacity */
.sidebar a .feather{
  width:18px;
  height:18px;
  margin-right:0 !important;   /* we use gap instead */
  opacity:.9;
}

/* collapse behavior: icon-only sidebar */
body.sidebar-collapsed .sidebar { width: var(--sidebar-width-collapsed); }
body.sidebar-collapsed .sidebar .label,
body.sidebar-collapsed .sidebar .muted,
body.sidebar-collapsed .sidebar .section-title{ display:none !important; }
body.sidebar-collapsed .sidebar .brand{ justify-content:center; }
body.sidebar-collapsed .sidebar a{ justify-content:center; padding:.65rem 0 !important; margin:4px 6px; }

/* keep main shift consistent with collapse */
body.sidebar-collapsed .main{ margin-left: var(--sidebar-width-collapsed); }

/* optional: subtle divider between sidebar and content (already set above) */
.main{ border-left:1px solid #e9edf3; }

/* keep brand buttons consistent on dark bg if placed in sidebar */
.sidebar .btn-outline-primary{
  --bs-btn-color:#fff;
  --bs-btn-border-color:rgba(255,255,255,.4);
  --bs-btn-hover-bg:#fff;
  --bs-btn-hover-border-color:#fff;
  --bs-btn-hover-color:var(--brand-primary);
}

/* === Active sidebar link "pill" with brand accent === */
.sidebar a.active,
.sidebar a[aria-current="page"],
.sidebar a[aria-current="true"] {
  background: var(--brand-accent) !important;  /* brighter blue pill */
  color: #fff !important;
  font-weight: 600;
  border-radius: 6px;
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.15);
}
.sidebar a.active .feather,
.sidebar a[aria-current="page"] .feather,
.sidebar a[aria-current="true"] .feather { opacity: 1; }

/* ---------------------------------- */
/* Responsive (optional)              */
/* ---------------------------------- */
@media (max-width: 991.98px){
  /* If you later want a slide-in sidebar on mobile, you can toggle a `sidebar-open` class */
  .main{ margin-left: 0 !important; }
  /* Keep sidebar fixed; JS can add .sidebar-open to body to slide it in */
}


/* Brand logo swap (expanded vs collapsed) */
.sidebar .brand { text-align:center; }

.sidebar .brand .brand-side { display:inline-block; }
.sidebar .brand .brand-icon { display:none; }

body.sidebar-collapsed .sidebar .brand { justify-content:center; }
body.sidebar-collapsed .sidebar .brand .brand-side { display:none; }
body.sidebar-collapsed .sidebar .brand .brand-icon { display:inline-block; }

/* Optional: tighten brand padding in collapsed state */
body.sidebar-collapsed .sidebar .brand { padding: .75rem 0 !important; }

/* === Tighten space under sidebar logo === */
.sidebar .brand{
  /* top / left-right / bottom */
  padding: .65rem 1rem .40rem !important; /* was ~1rem bottom */
  border-bottom: 1px solid var(--sidebar-border);
}

/* (optional) slightly smaller logo if you want it tighter */
.sidebar .brand .brand-side{ max-height: 30px; }  /* was 34px */
body.sidebar-collapsed .sidebar .brand{ padding: .55rem 0 !important; }

/* Reduce gap before the first section header ("Home") */
.sidebar .brand + .muted,
.sidebar .brand + .section-title{
  margin-top: .4rem !important; /* was ~1rem */
}

/* Reduce gap between that header and the first nav item */
.sidebar .brand + .muted + a,
.sidebar .brand + .section-title + a{
  margin-top: .2rem !important;
}

/* === Mobile sidebar: below navbar, slide-in drawer === */
@media (max-width: 991.98px){
  /* Sidebar sits below navbar and admin bar */
  .sidebar{
    position: fixed !important;
    top: calc(var(--adminbar-h) + var(--navbar-height)) !important;
    left: 0 !important; right: auto !important; bottom: 0 !important;
    width: var(--sidebar-width) !important;
    height: calc(100vh - var(--adminbar-h) - var(--navbar-height)) !important;

    /* Slide off-canvas by default */
    transform: translateX(-100%) !important;
    transition: transform .25s ease !important;

    /* Make sure it draws OVER the navbar */
    z-index: 1050 !important; /* navbar is ~1020 */
  }

  /* Show when body has .sidebar-open */
  body.sidebar-open .sidebar{ transform: translateX(0) !important; }

  /* Do NOT shift content on mobile */
  .main{ margin-left: 0 !important; }
  body.sidebar-collapsed .main{ margin-left: 0 !important; }
}

/* Backdrop behind the mobile drawer */
.sidebar-backdrop{
  position: fixed;
  top: calc(var(--adminbar-h) + var(--navbar-height));
  left: 0; right: 0; bottom: 0;
  background: rgba(0,0,0,.35);
  z-index: 1045; /* just under the sidebar */
  opacity: 0; visibility: hidden;
  transition: opacity .2s ease, visibility .2s;
}
@media (max-width: 991.98px){
  body.sidebar-open .sidebar-backdrop{ opacity: 1; visibility: visible; }
}

/* === Ensure hover/button open override earlier !important widths === */
@media (min-width: 992px){
  /* Hover-open */
  body.sidebar-collapsed .sidebar:hover {
    width: var(--sidebar-width) !important;
  }
  body.sidebar-collapsed .sidebar:hover ~ .main {
    margin-left: var(--sidebar-width) !important;
  }

  /* Button-open (temporary open via .sidebar-desktop-open) */
  body.sidebar-collapsed.sidebar-desktop-open .sidebar {
    width: var(--sidebar-width) !important;
  }
  body.sidebar-collapsed.sidebar-desktop-open .sidebar ~ .main {
    margin-left: var(--sidebar-width) !important;
  }

  /* Make sure labels/headers appear when open (hover or button) */
  body.sidebar-collapsed .sidebar:hover .label,
  body.sidebar-collapsed .sidebar:hover .muted,
  body.sidebar-collapsed .sidebar:hover .section-title,
  body.sidebar-collapsed.sidebar-desktop-open .label,
  body.sidebar-collapsed.sidebar-desktop-open .muted,
  body.sidebar-collapsed.sidebar-desktop-open .section-title {
    display: initial !important;
  }

  /* Swap logos correctly when open */
  body.sidebar-collapsed .sidebar:hover .brand .brand-side,
  body.sidebar-collapsed.sidebar-desktop-open .brand .brand-side { display:inline-block !important; }
  body.sidebar-collapsed .sidebar:hover .brand .brand-icon,
  body.sidebar-collapsed.sidebar-desktop-open .brand .brand-icon { display:none !important; }

  /* Restore nav item layout when open */
  body.sidebar-collapsed .sidebar:hover a,
  body.sidebar-collapsed.sidebar-desktop-open .sidebar a {
    justify-content: flex-start;
    padding: .65rem 1rem !important;
    margin: 2px 8px;
  }
}

/* === FINAL: Desktop smooth open/close + text reveal (hover & button-open) === */
@media (min-width: 992px){
  /* Rail + content shift (smooth) */
  body.sidebar-collapsed .sidebar{
    transition: width .65s cubic-bezier(.22,.61,.36,1) !important;
    will-change: width;
    overflow-x: hidden;
  }
  body.sidebar-collapsed .sidebar ~ .main{
    transition: margin-left .65s cubic-bezier(.22,.61,.36,1) !important;
    will-change: margin-left;
  }

  /* Width overrides when OPEN (hover or button-open) */
  body.sidebar-collapsed .sidebar:hover,
  body.sidebar-collapsed.sidebar-desktop-open .sidebar{
    width: var(--sidebar-width) !important;
  }
  body.sidebar-collapsed .sidebar:hover ~ .main,
  body.sidebar-collapsed.sidebar-desktop-open .sidebar ~ .main{
    margin-left: var(--sidebar-width) !important;
  }

  /* Horizontal text reveal (no vertical motion) */
  .sidebar .label,
  .sidebar .muted,
  .sidebar .section-title{
    overflow: hidden;
    white-space: nowrap;
    max-width: 0;
    opacity: 0;
    transform: none !important;
    transition:
      max-width .45s cubic-bezier(.22,.61,.36,1),
      opacity   .30s ease .10s;  /* rail starts first */
  }
  body.sidebar-collapsed .sidebar:hover .label,
  body.sidebar-collapsed .sidebar:hover .muted,
  body.sidebar-collapsed .sidebar:hover .section-title,
  body.sidebar-collapsed.sidebar-desktop-open .label,
  body.sidebar-collapsed.sidebar-desktop-open .muted,
  body.sidebar-collapsed.sidebar-desktop-open .section-title{
    max-width: 220px;
    opacity: 1 !important;
  }

  /* Restore nav item layout when open */
  .sidebar a{ display:flex; align-items:center; gap:.75rem; }
  body.sidebar-collapsed .sidebar a{ padding: .65rem .75rem; } /* collapsed */
  body.sidebar-collapsed .sidebar:hover a,
  body.sidebar-collapsed.sidebar-desktop-open .sidebar a{
    justify-content: flex-start;
    padding: .65rem 1rem !important;
    margin: 2px 8px;
  }

  /* Brand fade swap (icon ↔ wide logo) */
  .sidebar .brand .brand-side,
  .sidebar .brand .brand-icon{ transition: opacity .25s ease; }
  body.sidebar-collapsed .sidebar .brand .brand-side{ opacity:0; visibility:hidden; }
  body.sidebar-collapsed .sidebar .brand .brand-icon{ opacity:1; visibility:visible; }
  body.sidebar-collapsed .sidebar:hover .brand .brand-side,
  body.sidebar-collapsed.sidebar-desktop-open .brand .brand-side{ opacity:1; visibility:visible; }
  body.sidebar-collapsed .sidebar:hover .brand .brand-icon,
  body.sidebar-collapsed.sidebar-desktop-open .brand .brand-icon{ opacity:0; visibility:hidden; }
}

/* === Prevent the "closing" animation on first paint === */
body.sidebar-preload .sidebar,
body.sidebar-preload .sidebar ~ .main {
  transition: none !important;      /* no width/margin-left tween */
}

/* Optional: keep labels hidden during preload to avoid flicker */
body.sidebar-preload .sidebar .label,
body.sidebar-preload .sidebar .muted,
body.sidebar-preload .sidebar .section-title {
  opacity: 0 !important;
  max-width: 0 !important;
}

/* Optional: show the small icon logo only during preload */
body.sidebar-preload .sidebar .brand .brand-side { opacity: 0 !important; visibility: hidden !important; }
body.sidebar-preload .sidebar .brand .brand-icon { opacity: 1 !important; visibility: visible !important; }


/* === Mobile drawer: when open, show full menu (labels + left align) === */
@media (max-width: 991.98px){
  /* Show text and headers even if 'sidebar-collapsed' is present */
  body.sidebar-open .sidebar .label,
  body.sidebar-open .sidebar .muted,
  body.sidebar-open .sidebar .section-title{
    display: initial !important;
    opacity: 1 !important;
    max-width: 220px !important;  /* match desktop reveal width */
  }

  /* Normal link layout */
  body.sidebar-open .sidebar a{
    justify-content: flex-start !important;
    padding: .65rem 1rem !important;
    margin: 2px 8px !important;
    text-align: left !important;
  }

  /* Use the wide brand logo when the drawer is open */
  body.sidebar-open .sidebar .brand .brand-side{ 
    display: inline-block !important; 
    opacity: 1 !important; 
    visibility: visible !important; 
  }
  body.sidebar-open .sidebar .brand .brand-icon{ 
    display: none !important; 
  }
}

@media (max-width: 991.98px){
  .navbar .dropdown .btn i{ width: 18px; height: 18px; }
  .dropdown-menu .dropdown-item i{ width: 18px; height: 18px; }
}



/* === Sidebar link colors: grey → white on hover/active === */
:root{
  --sidebar-link: rgba(255,255,255,.72);
  --sidebar-link-hover: #fff;
}

.sidebar a,
.sidebar a .label{
  color: var(--sidebar-link) !important;
  transition: color .15s ease;
}

/* Feather uses stroke. Drive it from currentColor */
.sidebar a .feather{
  color: var(--sidebar-link) !important;   /* for safety */
  stroke: var(--sidebar-link) !important;  /* icon = same grey */
  opacity: 1 !important;
  transition: stroke .15s ease, color .15s ease;
}

/* Hover / focus / active → white */
.sidebar a:hover,
.sidebar a:focus,
.sidebar a.active{
  color: var(--sidebar-link-hover) !important;
}
.sidebar a:hover .feather,
.sidebar a:focus .feather,
.sidebar a.active .feather{
  color: var(--sidebar-link-hover) !important;
  stroke: var(--sidebar-link-hover) !important;
}

/* Mobile drawer open: same behavior */
@media (max-width: 991.98px){
  body.sidebar-open .sidebar a,
  body.sidebar-open .sidebar a .label{
    color: var(--sidebar-link) !important;
  }
  body.sidebar-open .sidebar a .feather{
    color: var(--sidebar-link) !important;
    stroke: var(--sidebar-link) !important;
  }
  body.sidebar-open .sidebar a:hover,
  body.sidebar-open .sidebar a:focus,
  body.sidebar-open .sidebar a.active{
    color: var(--sidebar-link-hover) !important;
  }
  body.sidebar-open .sidebar a:hover .feather,
  body.sidebar-open .sidebar a:focus .feather,
  body.sidebar-open .sidebar a.active .feather{
    color: var(--sidebar-link-hover) !important;
    stroke: var(--sidebar-link-hover) !important;
  }
}

/* Sidebar section headers: normal case (no ALL CAPS) */
.sidebar .muted,
.sidebar .section-title{
  text-transform: none !important;
  letter-spacing: .2px;   /* optional: relax tracking */
  font-weight: 600;       /* optional: slightly less heavy */
  /* color: var(--sidebar-link);  /* uncomment if you want grey like links */ */
}


/* === Smaller navbar buttons (desktop & mobile) === */
.navbar{
  --nav-btn-h: 32px;                 /* overall button height */
  --nav-btn-font: .85rem;            /* text size */
  --nav-icon: 16px;                  /* feather icon size */
}

/* All buttons in the top navbar */
.navbar .btn{
  height: var(--nav-btn-h) !important;
  padding: 0 .55rem !important;      /* tighter sides */
  font-size: var(--nav-btn-font) !important;
  line-height: 1 !important;
  border-radius: .375rem !important;
  display: inline-flex;
  align-items: center;
  gap: .35rem;
}

/* Ensure feather icons scale down with the text */
.navbar .btn [data-feather],
.navbar .dropdown .btn i{
  width: var(--nav-icon);
  height: var(--nav-icon);
  stroke-width: 2;                   /* keep icon weight crisp */
}

/* Optional: make them a hair smaller on phones */
@media (max-width: 575.98px){
  .navbar{
    --nav-btn-h: 30px;
    --nav-btn-font: .82rem;
    --nav-icon: 15px;
  }
}


/* Transparent active/hover pill for sidebar links */
:root{
  /* tune these % to make it lighter/darker */
  --pill-active-mix: 40%;
  --pill-hover-mix: 15%;
}

/* HOVER: subtle tint */
.sidebar a:hover,
.sidebar a:focus{
  /* fallback for older browsers */
  background: rgba(0,137,207,.12) !important;
  /* modern: mix brand with transparent */
  background: color-mix(in srgb, var(--brand-accent) var(--pill-hover-mix), transparent) !important;
}

/* ACTIVE: stronger tint + thin inner border */
.sidebar a.active{
  /* fallback */
  background: rgba(0,137,207,.20) !important;
  /* modern */
  background: color-mix(in srgb, var(--brand-accent) var(--pill-active-mix), transparent) !important;
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--brand-accent) 45%, transparent) !important;
  color: #fff !important;
}
.sidebar a.active .feather{ stroke:#fff !important; }

/* keep the effect on mobile drawer too */
@media (max-width: 991.98px){
  body.sidebar-open .sidebar a:hover,
  body.sidebar-open .sidebar a:focus{
    background: rgba(0,137,207,.12) !important;
    background: color-mix(in srgb, var(--brand-accent) var(--pill-hover-mix), transparent) !important;
  }
  body.sidebar-open .sidebar a.active{
    background: rgba(0,137,207,.20) !important;
    background: color-mix(in srgb, var(--brand-accent) var(--pill-active-mix), transparent) !important;
    box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--brand-accent) 45%, transparent) !important;
  }
}


/* keep these (your custom SVG via CSS mask) */
.icon{
  display:inline-block;
  width: var(--nav-icon, 18px);
  height: var(--nav-icon, 18px);
  background-color: currentColor;
}
.icon-menu{
  -webkit-mask: url('assets/img/menu.svg') no-repeat center / contain;
          mask: url('assets/img/menu.svg') no-repeat center / contain;
}

/* ---- ONLY the menu toggle (outline-secondary) ---- */
#sidebarToggle.btn-outline-secondary{
  /* base / idle */
  --bs-btn-color: var(--brand-primary);
  --bs-btn-border-color: transparent;
  background: transparent;
  border-width: 0;
  padding: 0 .5rem;
  height: 32px; /* adjust if you like */
  line-height: 1;
  display: inline-flex;
  align-items: center;
  gap: .35rem;
  box-shadow: none;
}

/* icon size */
#sidebarToggle .icon{
  width: 22px;
  height: 22px;
}

/* hover: solid brand color (not translucent) */
#sidebarToggle.btn-outline-secondary:hover{
  background: var(--brand-accent) !important;
  border-color: var(--brand-accent) !important;
  color: #fff !important;                 /* SVG mask inherits this */
  border-radius: .375rem;
}

/* focus ring */
#sidebarToggle.btn-outline-secondary:focus-visible{
  outline: 2px solid var(--brand-accent);
  outline-offset: 2px;
}

/* active (mouse down) */
#sidebarToggle.btn-outline-secondary:active{
  background: var(--brand-primary) !important;
  border-color: var(--brand-primary) !important;
  color: #fff !important;
}

/* when the mobile drawer is open, keep it "active" */
@media (max-width: 991.98px){
  body.sidebar-open #sidebarToggle.btn-outline-secondary{
    background: var(--brand-accent) !important;
    border-color: var(--brand-accent) !important;
    color: #fff !important;
  }
}

/* optional: larger tap target on phones */
@media (max-width: 991.98px){
  #sidebarToggle.btn-outline-secondary{ height: 44px; }
  #sidebarToggle .icon{ width: 24px; height: 24px; }
}

/* Flatten the action bar + pull it closer to the navbar */
.filter-bar--flat{
  background: transparent !important;
  border: 0 !important;
  box-shadow: none !important;
  padding: 0 !important;
  margin-top: -6px;         /* pull upward; try -10px/-12px if you want more */
  margin-bottom: .25rem;
}
.filter-bar--flat .container-fluid{
  padding-top: .25rem !important;
  padding-bottom: .25rem !important;
}

/* Tune the space between the filter bar and the Caspio block */
.caspio-scroll{ margin-top: -15px !important; } /* adjust as you like */

/* Tighten top padding of the page content so everything sits higher */
.page-template-page-comparables .content,
.page-template-page-comparables-php .content{
  padding-top: 8px !important; /* default was ~16px */
}

/* Horizontal scroll only if needed (keeps table layout intact) */
.caspio-scroll{
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  max-width: 100%;
  padding-bottom: .25rem;
}
.caspio-scroll [id^="CaspioFormDiv_"],
.caspio-scroll .cbOuterContainer{ max-width: 100% !important; }

.footer a:hover{ color: var(--brand-primary) !important; text-decoration: none; }
.footer .list-inline-item i{ width: 18px; height: 18px; }

/* Footer links: no underline (normal, hover, focus, active, visited) */
.footer a,
.footer a:hover,
.footer a:focus,
.footer a:active,
.footer a:visited{
  text-decoration: none !important;
}

/* (optional) keep a subtle hover color without underline */
.footer a:hover,
.footer a:focus{
  color: var(--brand-primary) !important;
}

/* Use the same chrome color for navbar & footer */
:root{
  --chrome-bg: #fff;               /* same as your navbar */
  --chrome-border: #e5e7eb;        /* same thin line used on navbar */
}

/* Main column fills viewport; footer sticks to bottom */
html, body{ height: 100%; }
.main{
  min-height: 100dvh;              /* better than 100vh across devices */
  display: flex;
  flex-direction: column;
}
.content{
  flex: 1 0 auto;                  /* <-- lets content stretch and footer drop */
}

/* Footer look = navbar look */
.footer{
  background: var(--chrome-bg);
  border-top: 1px solid var(--chrome-border);
  margin-top: auto;                /* push to the bottom of the flex column */
}

/* ======== Image viewer modal (keep) ======= */
#imgModal .modal-dialog { --bs-modal-width: 560px; }
#imgModal img { max-height: 65vh; object-fit: contain; }

/* ======== Details modal ======= */
/* Equal gaps on all sides for the Details modal */
#detailsModal{
  --gap: 12px;                  /* ← set the frame size you want */
  --bs-backdrop-opacity: .35;
  padding-right: 0 !important;  /* remove Bootstrap’s scrollbar compensation */
  padding-left: 0 !important;
}

#detailsModal .modal-dialog.almost-fullscreen{
  margin: var(--gap) auto;                          /* equal L/R & T/B gaps */
  max-width: calc(100% - var(--gap) * 2);           /* use overlay width, not vw */
}

#detailsModal .almost-fullscreen .modal-content{
  height: calc(100dvh - var(--gap) * 2);            /* fill between top/bottom gaps */
  border-radius: 14px;
  overflow: hidden;
}

#detailsModal #detailsFrame{ height: 100%; }

/* Buttons size */
.icon-16 svg { width:22px; height:22px; display:block; }

/* sidebar */
.side-icon svg { width:20px; height:20px; display:inline-block; }

/* === Nudge sidebar icons a tiny bit right (collapsed only) === */
:root { --sidebar-icon-nudge-x: 2px; } /* tweak: 1px–3px */

@media (min-width: 992px){
  /* Only when the rail is collapsed and not “opened” by hover/button */
  body.sidebar-collapsed .sidebar:not(:hover) a .side-icon,
  body.sidebar-collapsed .sidebar:not(:hover) a > i,
  body.sidebar-collapsed.sidebar-desktop-open .sidebar a .side-icon { transform: none; } /* safety reset */

  /* Actual nudge */
  body.sidebar-collapsed .sidebar:not(:hover) a .side-icon,
  body.sidebar-collapsed .sidebar:not(:hover) a > i {
    display: inline-block;                 /* keeps layout stable */
    transform: translateX(var(--sidebar-icon-nudge-x));
  }
}