#authCard, #profileView, #tabProcessPane, #tabCodesPane, #tabPendingReviewsPane, #tabHistoryPane, #tabDashboardPane {
  margin-left: auto;
  margin-right: auto;
  padding-left: 20px;
  padding-right: 20px;
  padding-bottom: 32px;
  box-sizing: border-box;
}
#authCard, #profileView { max-width: 820px; }
/* No max-width here (unlike the auth/profile cards above) - these fill
   whatever width #facturasContent has next to the sidebar, instead of
   leaving a growing gap of empty background on wide viewports. */
#tabProcessPane, #tabCodesPane, #tabPendingReviewsPane, #tabHistoryPane, #tabDashboardPane { width: 100%; }

#header {
  position: fixed;
  top: 0; left: 0; right: 0;
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: center;
  gap: 12px;
  /* White, not --sf-bg - only the sidebar column is the grayish tone (see
     #facturasSidebar below), matching the reference layout. */
  background: #fff;
  border-bottom: 1px solid var(--sf-border);
  padding: 7px 20px;
  box-sizing: border-box;
  z-index: 20;
}
/* Fixed headers don't reserve their own space in the flow, so every
   top-level page wrapper needs a matching top offset - reuses the same
   value the sidebar is fixed against (see common/nav.js), since it's the
   same "how far down does real content start" measurement either way. */
/* #profileView and #workInProgressPane aren't listed here - both are now
   nested inside #appContent (see profile.html/wip.html), which already
   gets this same offset once as their shared parent, instead of stacking
   two margins if either pane also had its own. */
#appContent, #authCard {
  margin-top: var(--sidebar-fixed-top, 90px);
}
/* Login is the only page whose only in-flow content is this one card, and
   the only page with no header at all (see #header display:none below) -
   centers it in the full viewport height, no top clearance needed.
   Scoped via :has() so no other page (which all have real scrolling
   content, and a real header) is affected. */
body:has(#authCard) {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 100vh;
  /* The background image carries the logo/wordmark centered in its right
     half (see login-background.jpg) - reserving the right 50% as padding
     and centering within what's left puts the card in the middle of the
     left half, proportionally, instead of pinned to a fixed pixel offset
     that only looks right at one particular viewport width. */
  padding-right: 50%;
  box-sizing: border-box;
  /* CSS url()s can't use the Jinja app_base variable (this is a static
     file, not server-rendered) - hardcoded to match the /Billing static
     mount in main.py instead. */
  background: url("/Billing/static/img/login-background.jpg") center center / cover no-repeat, var(--sf-bg);
}
@media (max-width: 900px) {
  /* Below this width there's no room for a left-half/right-half split -
     the logo half of the image would already be squeezed out by the
     cover crop, so just center the card over the whole background. */
  body:has(#authCard) { padding-left: 20px; padding-right: 20px; }
}
/* Login keeps the app's name/icon out of the browser tab only (favicon in
   base.html) - the in-page header bar would just repeat the same logo
   already shown large on the background image, so it's hidden here only. */
body:has(#authCard) #header {
  display: none;
}
body:has(#authCard) #authCard {
  /* Auto margins on both sides would otherwise re-center this flex item
     regardless of the body's justify-content: flex-start above. Narrower
     than the shared 820px auth/profile max-width - that width fits a
     full-page centered form, not a card floating over a wide background image. */
  margin: 0;
  max-width: 540px;
  width: 100%;
}
#headerLeft { display: flex; align-items: center; gap: 10px; min-width: 0; }
#headerCenter { min-width: 0; overflow: hidden; display: flex; justify-content: center; }
.app-title-group { display: flex; align-items: center; gap: 6px; min-width: 0; text-decoration: none; }
#appLogo { width: 34px; height: 34px; flex-shrink: 0; object-fit: contain; }
h1 {
  font-size: 1.25rem;
  font-weight: 600;
  color: var(--sf-navy);
  margin: 0;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  cursor: pointer;
}
#navToggleButton { display: none; flex-shrink: 0; }
#sessionBar { display: none; align-items: center; gap: 10px; flex-shrink: 0; justify-self: end; }
#sessionBar.visible { display: flex; }
#logoutButton { display: inline-flex; align-items: center; gap: 6px; }
#logoutButton svg { width: 14px; height: 14px; flex-shrink: 0; }
/* #userEmail widens into a pill (icon + email) whenever there's room -
   only the compact header (narrow screens) collapses it to a bare icon. */
#userEmail {
  width: auto; padding: 0 14px 0 6px; border-radius: 18px; gap: 8px;
}
#userEmail .user-email-text {
  font-size: 0.85rem; color: var(--sf-navy); white-space: nowrap; overflow: hidden;
  text-overflow: ellipsis; max-width: 220px;
}
#header.header-compact #userEmail { width: 36px; padding: 0; }
#header.header-compact #userEmail .user-email-text { display: none; }
#globalCompanyFilterWrapper { position: relative; width: 220px; flex-shrink: 1; min-width: 0; }
#globalCompanyFilterInput {
  width: 100%; box-sizing: border-box; padding: 7px 30px 7px 12px; border: 1px solid var(--sf-border);
  border-radius: 18px; font-size: 0.85rem; background: #fff;
}
#globalCompanyFilterInput:focus { outline: none; border-color: var(--sf-blue); box-shadow: 0 0 0 1px var(--sf-blue); }
#globalCompanyFilterClear {
  display: none; position: absolute; top: 50%; right: 8px; transform: translateY(-50%);
  width: 18px; height: 18px; border-radius: 50%; padding: 0;
  background: none; border: none; color: var(--sf-red); cursor: pointer;
  align-items: center; justify-content: center; font-size: 0.9rem; line-height: 1;
}
#globalCompanyFilterClear.visible { display: flex; }
#globalCompanyFilterClear:hover { background: #FDECEA; }
#header.header-compact #globalCompanyFilterWrapper { display: none; }
/* Compact header: hamburger left, logo+title centered, icon-only session
   actions. #appTitleLink stays in #headerLeft in the markup - absolute
   positioning here just lifts it out of the grid flow and re-centers it on
   #header itself. */
#header.header-compact #navToggleButton { display: inline-flex; }
#header.header-compact #appTitleLink {
  position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%);
  max-width: calc(100% - 120px);
}
#header.header-compact #logoutButton {
  width: 36px; height: 36px; padding: 0; border-radius: 50%; justify-content: center; gap: 0;
}
#header.header-compact #logoutButton .logout-text { display: none; }
#navOverflowMenu {
  display: none; position: absolute; top: 100%; z-index: 20;
  background: #fff; border: 1px solid var(--sf-border); border-radius: 4px;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.12); min-width: 200px; padding: 6px;
  flex-direction: column; gap: 2px;
  /* The mobile ("align-left") variant now nests the whole sidebar (see
     common/nav.js's buildFacturasOverflowGroup) - can get taller than the
     viewport on a short phone in landscape, so it scrolls internally
     instead of overflowing off-screen. */
  max-height: calc(100vh - 80px); overflow-y: auto;
}
#navOverflowMenu.open { display: flex; }
#navOverflowMenu.align-right { right: 20px; }
#navOverflowMenu.align-left { left: 20px; }
#navOverflowMenu .tab-button {
  display: flex; align-items: center; gap: 10px; width: 100%; box-sizing: border-box;
  text-align: left; padding: 10px 12px; border-bottom: none; margin-bottom: 0; border-radius: 4px;
}
#navOverflowMenu .tab-button svg { width: 18px; height: 18px; flex-shrink: 0; color: #706E6B; }
#navOverflowMenu .tab-button:hover { background: var(--sf-bg); }
#navOverflowMenu .tab-button.active { background: #EEF4FF; }
/* A nav item whose sidebar entry has its own nested submenu (currently just
   "Mi perfil" - see partials/sidebar.html's #profileSidebarSubmenu) becomes
   an expandable group here instead of a flat link, mirroring the same
   pattern one level up ("Facturas" itself, wrapping the whole sidebar) -
   see common/nav.js's buildOverflowSubmenu, which applies this generically
   to any item followed by a sub-nested container, not just this one. */
.nav-overflow-group-toggle {
  justify-content: space-between; background: none; border: none; cursor: pointer; font: inherit; color: inherit;
}
/* The toggle's only two flex children are this label and the ::after
   chevron below - keeps the icon+text inside the label from being pried
   apart by the toggle's own justify-content:space-between. */
.nav-overflow-group-label { display: inline-flex; align-items: center; gap: 10px; min-width: 0; }
.nav-overflow-group-toggle::after {
  content: "▾"; font-size: 0.65rem; color: #706E6B; flex-shrink: 0; transition: transform 0.15s ease;
}
.nav-overflow-group-toggle.open::after { transform: rotate(180deg); }
.nav-overflow-submenu {
  display: none; flex-direction: column; gap: 2px;
  padding-left: 16px; margin: 2px 0 4px; border-left: 2px solid var(--sf-border);
}
.nav-overflow-submenu.open { display: flex; }
#tabOverflowWrapper { display: none; }

#tabMenu {
  display: flex; align-items: center; gap: 4px; min-width: 0; max-width: 100%;
  overflow: hidden; white-space: nowrap;
}
.tab-button {
  background: none; border: none; cursor: pointer; padding: 10px 18px; font-size: 0.9rem; font-weight: 600;
  color: #706E6B; border-bottom: 2px solid transparent; margin-bottom: -1px; flex-shrink: 0;
  text-decoration: none; display: inline-block;
}
.tab-button:hover { color: var(--sf-navy); }
.tab-button.active { color: var(--sf-blue); border-bottom-color: var(--sf-blue); }
.tab-button.sub { font-size: 0.85rem; padding: 8px 14px; }

#mainLayout { display: flex; align-items: flex-start; gap: 24px; }
#facturasSidebar {
  display: flex; flex-direction: column; gap: 2px; flex-shrink: 0; width: 220px;
  box-sizing: border-box; padding-left: 14px; padding-bottom: 20px;
  /* The one grayish column against the otherwise-white page (see body/
     #header above) - the right border is the separator line. */
  background: var(--sf-bg);
  border-right: 1px solid var(--sf-border);
}
#facturasSidebar .tab-button {
  display: flex; align-items: center; gap: 10px; text-align: left; width: 100%; box-sizing: border-box;
  border-bottom: none; margin-bottom: 0; padding: 10px 14px; border-radius: 4px; position: relative;
}
#facturasSidebar .tab-button svg { width: 18px; height: 18px; flex-shrink: 0; color: #706E6B; }
#facturasSidebar .tab-button.active { background: #EEF4FF; border-bottom: none; }
#facturasSidebar .tab-button.active svg { color: var(--sf-blue); }
/* Mi perfil's own sub-pages (see profile.html/profile.js) live as nested
   branches under its own sidebar item instead of a horizontal tab bar in
   the content area - only rendered at all while "Mi perfil" is the active
   page (see partials/sidebar.html). */
#profileSidebarSubmenu { display: flex; flex-direction: column; gap: 2px; margin: 2px 0 4px; }
#facturasSidebar .tab-button.sub-nested {
  padding: 8px 14px 8px 42px; font-size: 0.82rem; color: #706E6B;
  border-radius: 4px; text-align: left; width: 100%; box-sizing: border-box;
  background: none; border: none; cursor: pointer;
}
#facturasSidebar .tab-button.sub-nested:hover { color: var(--sf-navy); }
#facturasSidebar .tab-button.sub-nested.active { background: #EEF4FF; color: var(--sf-blue); font-weight: 600; }
#facturasContent { flex: 1; min-width: 0; }
.sidebar-user-block {
  margin-top: auto; padding-top: 12px; border-top: 1px solid var(--sf-border);
  display: flex; flex-direction: column; gap: 8px;
}
.sidebar-user-email {
  display: flex; align-items: center; justify-content: center; gap: 10px; padding: 6px 14px;
  color: var(--sf-navy); text-decoration: none; font-size: 0.85rem;
}
.sidebar-user-email svg { width: 20px; height: 20px; flex-shrink: 0; color: #706E6B; }
.sidebar-user-email .user-email-text { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.sidebar-user-actions { display: flex; gap: 8px; margin: 0 14px; }
.sidebar-user-actions a, .sidebar-user-actions button {
  flex: 1; text-align: center; padding: 7px 6px; font-size: 0.78rem; white-space: nowrap;
}
@media (min-width: 901px) {
  /* The sidebar-page header carries this same user pill/logout in the
     sidebar's bottom-pinned block instead - see .sidebar-user-block - so the
     header's own copy only needs to stay for non-sidebar pages (profile,
     work in progress) and for narrower widths (see the 900px block below). */
  #header.has-sidebar #sessionBar #userEmail,
  #header.has-sidebar #sessionBar #logoutButton {
    display: none;
  }
  /* Truly fixed (not sticky) - sticky still scrolls away once its flex
     parent's bottom edge comes into view on a short page; fixed never
     moves regardless of scroll position or page length. Uses --header-height
     (no gap) rather than --sidebar-fixed-top (which adds one for page
     CONTENT) - the sidebar itself is a grayish nav column that should butt
     right up against the header with no visible seam between them. Both
     custom properties are measured in common/nav.js from the header's
     actual rendered height, since the header isn't itself fixed and can
     change size (e.g. wrapping). */
  #facturasSidebar {
    position: fixed; top: var(--header-height, 70px); left: 0;
    height: calc(100vh - var(--header-height, 70px));
    overflow-y: auto; z-index: 10;
  }
  #facturasContent { margin-left: 244px; }
  /* Centers the title over the sidebar's own column instead of hugging the
     page's left edge, so it visually lines up with the sidebar below it. */
  #header.has-sidebar #headerLeft { width: 220px; justify-content: center; }
}
@media (max-width: 900px) {
  #mainLayout { flex-direction: column; align-items: stretch; }
  #facturasContent { width: 100%; }
}
/* Below NAV_COMPACT_BREAKPOINT (see common/nav.js) the whole sidebar is
   superseded by the hamburger's own nested "Facturas" dropdown (see
   buildFacturasOverflowGroup), which clones every one of these same items -
   leaving the real sidebar visible here too used to show it twice at once
   (as an ugly wrapped row, since #facturasSidebar has no narrow-width
   layout of its own beyond the >=901px fixed-column one above). */
#facturasSidebar.nav-sidebar-hidden { display: none; }
.nav-badge {
  display: inline-flex; align-items: center; justify-content: center;
  min-width: 16px; height: 16px; padding: 0 4px; margin-left: 5px;
  background: var(--sf-red); color: #fff; border-radius: 999px;
  font-size: 0.7rem; font-weight: 700; line-height: 1; vertical-align: middle;
}
/* "Usuarios" (see partials/sidebar.html) - hidden by default so there's no
   flash of it before /auth/me resolves and common/session.js removes this
   class for a gestor account (the only role it's shown to). */
.nav-gestor-only { display: none; }