/* =========================================================
   Layout CSS
   Navbar, Menubar, Alerts, Dropdowns (Desktop + Mobile)
   ========================================================= */

:root{
  --navbar-height:56px;
  --menubar-height:48px;
  --base-gap:6px;
}

/* ================= NAVBAR ================= */

.navbar{
  position:fixed;
  top:0;
  left:0;
  right:0;
  height:var(--navbar-height);
  z-index:1200;
}

/* ================= MENUBAR ================= */

.menubar{
  position:fixed;
  top:var(--navbar-height);
  left:0;
  right:0;
  height:var(--menubar-height);
  z-index:1150;
  display:flex;
  align-items:center;
  padding:6px 12px;
  box-sizing:border-box;
  border-bottom:1px solid rgba(0,0,0,0.08);
  background:#000;
  color:#fff;
}

.menubar-inner{
  display:flex;
  align-items:center;
  width:100%;
}

/* ================= ALERTS ================= */

#global-alerts,
.global-alerts{
  position:relative;
  display:none;
  margin-top:calc(var(--navbar-height) + var(--menubar-height) + var(--base-gap));
  padding:0 12px;
  z-index:1140;
  box-sizing:border-box;
}

#global-alerts.show,
.global-alerts.show{
  display:block;
}

#global-alerts .container,
.global-alerts .container{
  max-width:1150px;
  margin:0 auto;
}

#global-alerts .alert,
.global-alerts .alert{
  margin:6px 0;
  box-shadow:0 4px 10px rgba(0,0,0,0.06);
}

/* ================= CONTENT OFFSET ================= */

.content-wrapper{
  margin-top:calc(var(--menubar-height) + var(--base-gap));
  padding:0 12px 24px;
}

/* ================= MENU LINKS ================= */

.menu-links{
  display:flex;
  align-items:center;
  gap:8px;
  margin-left:6px;
}

.menu-links > a,
.menu-links > .dropdown > .dropdown-toggle{
  color:#fff;
  padding:0 12px;
  text-decoration:none;
  line-height:var(--menubar-height);
  display:inline-flex;
  align-items:center;
  gap:6px;
  background:none;
  border:none;
  cursor:pointer;
  font:inherit;
}

/* ================= DROPDOWNS ================= */

.dropdown{
  position:relative;
}

/* Single, consistent arrow */
.dropdown-toggle::after{
  content:"▾";
  font-size:0.75em;
  margin-left:6px;
}

/* ================= DESKTOP DROPDOWNS ================= */

@media (min-width:769px){

  .hamburger{
    display:none;
  }

  .dropdown-menu{
    display:none;
    position:absolute;
    top:100%;
    left:0;
    min-width:180px;
    background:#111;
    border:1px solid rgba(255,255,255,0.08);
    box-shadow:0 6px 12px rgba(0,0,0,0.2);
    z-index:2000;
  }

  .dropdown:hover > .dropdown-menu{
    display:block;
  }

  .dropdown-menu a{
    display:block;
    padding:8px 12px;
    color:#fff;
    text-decoration:none;
    white-space:nowrap;
  }

  .dropdown-menu a:hover{
    background:#333;
  }

  /* ===== Second-level submenu (desktop) ===== */

  .dropdown-submenu{
    position:relative;
  }

  .dropdown-submenu > .dropdown-menu{
    top:0;
    left:100%;
    display:none;
  }

  .dropdown-submenu:hover > .dropdown-menu{
    display:block;
  }

  .dropdown-submenu > .dropdown-toggle::after{
    content:"›";
    margin-left:auto;
  }
}

/* ================= MOBILE MENU ================= */

@media (max-width:768px){

  .hamburger{
    display:block;
  }

  .menu-links{
    display:none;
    position:absolute;
    top:var(--menubar-height);
    left:0;
    background:#111;
    width:max-content;
    max-width:240px;
    padding:6px 0;
    z-index:9999;
  }

  .menu-links.open{
    display:block;
  }

  .menu-links a,
  .menu-links .dropdown-toggle{
    display:block;
    width:100%;
    padding:10px 16px;
    text-align:left;
  }

  .dropdown-menu{
    display:none;
    position:static;
    background:#111;
    border:none;
    box-shadow:none;
    padding-left:16px;
  }

  .dropdown.open > .dropdown-menu{
    display:block;
  }

  .dropdown-submenu.open > .dropdown-menu{
    display:block;
  }
}

/* ================= STATEMENT / OTHER UI (UNCHANGED) ================= */

.statement-sticky-header{
  position:sticky;
  top:60px;
  z-index:10;
  background:#fff;
  padding:10px 0;
  display:flex;
  justify-content:center;
  gap:24px;
  border-bottom:2px solid #ccc;
  box-shadow:0 2px 4px rgba(0,0,0,0.06);
}

.statement-header-left,
.statement-header-right{
  flex:0 0 40%;
}

.statement-header-right{
  border:1px solid #ccc;
  padding:10px;
  background:#fff;
  margin-top:34px;
}

.statement-header-right table,
.statement-totals table{
  border-collapse:collapse;
}

.statement-header-right th,
.statement-header-right td,
.statement-totals th,
.statement-totals td{
  border:1px solid #ccc;
  padding:6px 10px;
  text-align:right;
}

.statement-totals th:first-child,
.statement-totals td:first-child{
  text-align:left;
}
.statement-header-left table th,
.statement-header-left table td {
    padding: 4px 8px;
    font-size: 0.9rem;
}
.statement-header-right h3 {
    font-size: 1.05rem;
}

.statement-header-right .badge {
    font-size: 0.75rem;
}