/* Frontida unified responsive header — v10
   Keeps the preferred 40px controls while making the application header
   consistent, cleaner and responsive from wide desktop to small phones. */

:root{
  --frontida-header-control-height:40px;
  --frontida-header-control-pad-x:12px;
  --frontida-header-control-radius:12px;
  --frontida-header-gap:8px;
  --frontida-header-border:rgba(20,40,30,.10);
  --frontida-header-shadow:0 5px 18px rgba(15,31,23,.045);
}

/* ---------- Header shell ---------- */
/* The header gets its own wider container so navigation does not inherit a
   narrow page-content width (some dashboards use 1100px content containers). */
.topbar > .container{
  width:min(1540px,96%) !important;
  margin-left:auto !important;
  margin-right:auto !important;
}

.topbar{
  position:sticky !important;
  top:0 !important;
  z-index:100 !important;
  background:rgba(255,255,255,.96) !important;
  -webkit-backdrop-filter:saturate(155%) blur(14px);
  backdrop-filter:saturate(155%) blur(14px);
  border-bottom:1px solid var(--frontida-header-border) !important;
  box-shadow:var(--frontida-header-shadow);
}

.topbar .topbar-inner{
  display:flex !important;
  align-items:center !important;
  justify-content:space-between !important;
  gap:12px !important;
  padding:10px 0 !important;
  min-height:60px;
  flex-wrap:nowrap !important;
}

/* ---------- Brand / page identity ---------- */
.topbar .brand{
  display:flex !important;
  align-items:center !important;
  gap:11px !important;
  min-width:0 !important;
  max-width:320px;
  flex:0 1 auto !important;
  font-family:ui-sans-serif,system-ui,-apple-system,"Segoe UI",Roboto,Arial,sans-serif !important;
  font-weight:950 !important;
  line-height:1.16 !important;
  color:rgba(15,31,23,.96) !important;
}
.topbar .brand > div{min-width:0;}
.topbar .brand img{
  display:block !important;
  width:auto !important;
  height:34px !important;
  max-width:130px !important;
  object-fit:contain;
  flex:0 0 auto;
}
.topbar .brand small{
  display:block !important;
  margin-top:3px !important;
  font-size:11.5px !important;
  font-weight:750 !important;
  line-height:1.28 !important;
  color:rgba(15,31,23,.62) !important;
}

/* ---------- Main navigation ---------- */
.topbar .nav,
.topbar nav.nav,
.topbar .actions{
  display:flex !important;
  align-items:center !important;
  justify-content:flex-end !important;
  gap:var(--frontida-header-gap) !important;
  min-width:0 !important;
  margin-left:auto !important;
  flex:0 1 auto !important;
  flex-wrap:nowrap !important;
}

/* Keep content-width buttons, but normalize the physical size of every
   control type (<a>, <button>, <summary>, dropdown wrappers). */
.topbar .nav > a.btn,
.topbar .nav > button.btn,
.topbar .nav > summary.btn,
.topbar .nav > .menu,
.topbar .nav > .nav-dd,
.topbar .nav > .nav-dropdown,
.topbar .nav > details.nav-dd,
.topbar .nav > details.nav-dropdown,
.topbar .nav > .btn-badge-wrap,
.topbar .actions > a.btn,
.topbar .actions > button.btn,
.topbar .actions > summary.btn,
.topbar .actions > form > .btn{
  box-sizing:border-box !important;
  width:auto !important;
  min-width:0 !important;
  max-width:none !important;
  height:var(--frontida-header-control-height) !important;
  min-height:var(--frontida-header-control-height) !important;
  max-height:var(--frontida-header-control-height) !important;
  flex:0 0 auto !important;
}

.topbar .nav > .menu > .btn,
.topbar .nav > .menu .revision-nav-wrap > .btn,
.topbar .nav > .nav-dd > summary.btn,
.topbar .nav > .nav-dropdown > summary.btn,
.topbar .nav > details.nav-dd > summary.btn,
.topbar .nav > details.nav-dropdown > summary.btn,
.topbar .nav > .btn-badge-wrap > .btn{
  box-sizing:border-box !important;
  width:auto !important;
  min-width:0 !important;
  max-width:none !important;
  height:100% !important;
  min-height:0 !important;
  max-height:none !important;
}

.topbar .nav > a.btn,
.topbar .nav > button.btn,
.topbar .nav > summary.btn,
.topbar .nav > .menu > .btn,
.topbar .nav > .menu .revision-nav-wrap > .btn,
.topbar .nav > .nav-dd > summary.btn,
.topbar .nav > .nav-dropdown > summary.btn,
.topbar .nav > details > summary.btn,
.topbar .nav > .btn-badge-wrap > .btn,
.topbar .actions > a.btn,
.topbar .actions > button.btn,
.topbar .actions > summary.btn,
.topbar .actions > form > .btn{
  padding:0 var(--frontida-header-control-pad-x) !important;
  display:inline-flex !important;
  align-items:center !important;
  justify-content:center !important;
  gap:5px !important;
  font-family:ui-sans-serif,system-ui,-apple-system,"Segoe UI",Roboto,Arial,sans-serif !important;
  font-size:13.5px !important;
  font-weight:900 !important;
  line-height:1 !important;
  text-align:center !important;
  border-radius:var(--frontida-header-control-radius) !important;
  white-space:nowrap !important;
  vertical-align:middle !important;
  text-decoration:none !important;
}

.topbar button.btn,
.topbar summary.btn{
  appearance:none !important;
  -webkit-appearance:none !important;
}
.topbar summary.btn{list-style:none !important;}
.topbar summary.btn::-webkit-details-marker{display:none !important;}

.topbar .menu,
.topbar .nav-dd,
.topbar .nav-dropdown,
.topbar details.nav-dd,
.topbar details.nav-dropdown,
.topbar .btn-badge-wrap{
  position:relative;
  display:inline-flex !important;
  align-items:center !important;
}

/* Avoid hover transforms making one header control look taller than another. */
@media (hover:hover){
  .topbar .btn:hover{transform:none !important;}
}

/* ---------- Final control normalization ----------
   Every primary header action uses the same 40px control box, regardless of
   whether it is an <a>, <button>, <summary>, badge wrapper, or nested menu.
   This also fixes custom notification wrappers such as Fleet & Liquidation. */
.topbar .nav > a.btn,
.topbar .nav > button.btn,
.topbar .nav > summary.btn,
.topbar .nav > details > summary.btn,
.topbar .nav > .menu > .btn,
.topbar .nav > .menu > .revision-nav-wrap,
.topbar .nav > .menu > .revision-nav-wrap > .btn,
.topbar .nav > .btn-badge-wrap,
.topbar .nav > .btn-badge-wrap > .btn,
.topbar .actions > a.btn,
.topbar .actions > button.btn,
.topbar .actions > form > .btn{
  height:var(--frontida-header-control-height) !important;
  min-height:var(--frontida-header-control-height) !important;
  max-height:var(--frontida-header-control-height) !important;
  box-sizing:border-box !important;
}
.topbar .nav > .menu > .revision-nav-wrap{
  display:inline-flex !important;
  align-items:stretch !important;
  position:relative !important;
}
.topbar .nav > .menu > .revision-nav-wrap > .btn{
  padding-top:0 !important;
  padding-bottom:0 !important;
  margin:0 !important;
}
.topbar .nav > details.nav-dd > summary.btn,
.topbar .nav > details.nav-dropdown > summary.btn{
  margin:0 !important;
}

/* ---------- Account / role pill ---------- */
.topbar .nav-user-tag{
  box-sizing:border-box !important;
  display:inline-flex !important;
  align-items:center !important;
  justify-content:center !important;
  width:auto !important;
  min-width:0 !important;
  max-width:220px !important;
  min-height:34px !important;
  height:34px !important;
  padding:0 11px !important;
  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap !important;
  flex:0 1 auto !important;
  font-size:12px !important;
  line-height:1 !important;
}

/* ---------- Notification badges ---------- */
.topbar .notif,
.topbar .nav-notif,
.topbar .notif-badge,
.topbar .revision-nav-badge{
  z-index:5;
  pointer-events:none;
}

/* ---------- Dropdown panels ---------- */
.topbar .submenu,
.topbar .nav-dd-menu,
.topbar .nav-dropdown-menu{
  max-width:min(330px,calc(100vw - 24px));
}

/* Clear keyboard focus without changing control dimensions. */
.topbar .btn:focus-visible,
.topbar summary.btn:focus-visible,
.frontida-nav-toggle:focus-visible{
  outline:3px solid rgba(62,214,176,.34) !important;
  outline-offset:2px !important;
}

/* ---------- Responsive menu toggle (injected by frontida-header-responsive.js) ---------- */
.frontida-nav-toggle{
  display:none;
  align-items:center;
  justify-content:center;
  gap:8px;
  height:40px;
  padding:0 12px;
  border:1px solid rgba(57,126,6,.24);
  border-radius:12px;
  background:#fff;
  color:var(--text,#0f1f17);
  font:900 13px/1 ui-sans-serif,system-ui,-apple-system,"Segoe UI",Roboto,Arial,sans-serif;
  cursor:pointer;
  box-shadow:0 2px 8px rgba(15,31,23,.04);
}
.frontida-nav-toggle-bars{
  position:relative;
  display:block;
  width:17px;
  height:12px;
  border-top:2px solid currentColor;
  border-bottom:2px solid currentColor;
}
.frontida-nav-toggle-bars::after{
  content:"";
  position:absolute;
  left:0;
  right:0;
  top:4px;
  border-top:2px solid currentColor;
}

/* ---------- Medium screens: deliberately use a clean second row instead of
   allowing one or two controls to wrap by themselves. ---------- */
@media (max-width:1499px) and (min-width:901px){
  .topbar .topbar-inner{
    flex-wrap:wrap !important;
    row-gap:8px !important;
  }
  .topbar .brand{
    max-width:none;
  }
  .topbar .nav,
  .topbar nav.nav,
  .topbar .actions{
    width:100% !important;
    margin-left:0 !important;
    justify-content:flex-start !important;
    flex-wrap:wrap !important;
    row-gap:8px !important;
  }
}

/* ---------- Phones / tablets: compact brand row + collapsible navigation ---------- */
@media (max-width:900px){
  .topbar .topbar-inner{
    position:relative;
    flex-wrap:wrap !important;
    min-height:58px;
    padding:9px 0 !important;
    gap:8px 10px !important;
  }
  .topbar .brand{
    max-width:calc(100% - 92px) !important;
    flex:1 1 auto !important;
  }
  .topbar .brand img{
    height:32px !important;
    max-width:118px !important;
  }

  .frontida-nav-toggle{
    display:inline-flex;
    flex:0 0 auto;
    margin-left:auto;
  }

  .topbar .nav,
  .topbar nav.nav,
  .topbar .actions{
    display:none !important;
    width:100% !important;
    max-height:calc(100vh - 82px);
    overflow-y:auto;
    overscroll-behavior:contain;
    margin:0 !important;
    padding:6px 0 3px !important;
    grid-template-columns:minmax(0,1fr);
    gap:8px !important;
  }
  .topbar.is-nav-open .nav,
  .topbar.is-nav-open nav.nav,
  .topbar.is-nav-open .actions{
    display:grid !important;
  }

  .topbar .nav > a.btn,
  .topbar .nav > button.btn,
  .topbar .nav > summary.btn,
  .topbar .nav > .menu,
  .topbar .nav > .menu .revision-nav-wrap,
  .topbar .nav > .nav-dd,
  .topbar .nav > .nav-dropdown,
  .topbar .nav > details.nav-dd,
  .topbar .nav > details.nav-dropdown,
  .topbar .nav > .btn-badge-wrap,
  .topbar .actions > a.btn,
  .topbar .actions > button.btn,
  .topbar .actions > summary.btn,
  .topbar .actions > form,
  .topbar .actions > form > .btn{
    width:100% !important;
    max-width:none !important;
  }

  .topbar .nav > .menu,
  .topbar .nav > .nav-dd,
  .topbar .nav > .nav-dropdown,
  .topbar .nav > details.nav-dd,
  .topbar .nav > details.nav-dropdown,
  .topbar .nav > .btn-badge-wrap{
    display:block !important;
    height:auto !important;
    min-height:var(--frontida-header-control-height) !important;
    max-height:none !important;
  }
  .topbar .nav > .menu > .btn,
  .topbar .nav > .menu .revision-nav-wrap > .btn,
  .topbar .nav > .nav-dd > summary.btn,
  .topbar .nav > .nav-dropdown > summary.btn,
  .topbar .nav > details.nav-dd > summary.btn,
  .topbar .nav > details.nav-dropdown > summary.btn,
  .topbar .nav > .btn-badge-wrap > .btn{
    width:100% !important;
    height:var(--frontida-header-control-height) !important;
  }

  /* Mobile dropdowns become part of the document flow, so they never render
     off-screen or get clipped by the scrollable mobile menu. */
  .topbar .submenu,
  .topbar .nav-dd-menu,
  .topbar .nav-dropdown-menu{
    position:static !important;
    inset:auto !important;
    width:100% !important;
    max-width:none !important;
    min-width:0 !important;
    margin-top:6px !important;
    border-radius:12px !important;
    box-shadow:none !important;
    transform:none !important;
  }
  .topbar .submenu::before,
  .topbar .nav-dd-menu::before,
  .topbar .nav-dropdown-menu::before{
    display:none !important;
  }
  .topbar .submenu.show{display:grid !important;gap:4px;}

  .topbar .nav-user-tag{
    width:100% !important;
    max-width:none !important;
    height:36px !important;
    justify-content:flex-start !important;
    padding:0 12px !important;
  }
}

@media (max-width:520px){
  .topbar .topbar-inner{padding:8px 0 !important;}
  .topbar .brand{gap:9px !important;}
  .topbar .brand img{height:30px !important;max-width:108px !important;}
  .topbar .brand{font-size:14.5px !important;}
  .topbar .brand small{font-size:10.5px !important;}
  .frontida-nav-toggle{height:38px;padding:0 10px;}
}

@media (max-width:390px){
  .topbar .brand small{display:none !important;}
  .topbar .brand{max-width:calc(100% - 82px) !important;}
  .frontida-nav-toggle-label{display:none;}
  .frontida-nav-toggle{width:40px;padding:0;}
}

/* Header stays out of printed reports. */
@media print{
  .frontida-nav-toggle{display:none !important;}
}