html {
  font-size: 12px;
  box-sizing: border-box;
}
*, *::before, *::after { box-sizing: inherit; }

body.pageBody {
  margin: 0;
  padding: 0;
  font-family: 'Lato', sans-serif;
  color: #444444;
  background-color: #f4f4f4;
  overflow-x: auto;
}

/* Typography */
h1, h2, h3, h4, h5, h6, p, ul, ol { margin: 0 0 15px 0; }
h5, h6 { margin: 0 0 4px 0; }

h1 { font-family: 'Lato', sans-serif; font-weight: 700; font-size: 2.5rem; }
h2 { font-family: 'Lato', sans-serif; font-weight: 700; font-size: 1.667rem; }
h3 { font-family: 'Lato Light', 'Lato', sans-serif; font-size: 1.667rem; text-transform: uppercase; }
h4 { font-family: 'Lato', sans-serif; font-weight: 700; font-size: 1rem; }
h5 { font-family: 'Lato Light', 'Lato', sans-serif; font-style: italic; font-size: 1rem; }
h6 { font-family: 'Lato', sans-serif; font-weight: 400; font-size: 2.083rem; color: var(--primary); }
p  { font-size: 1rem; line-height: 19px; }

a { color: var(--primary); text-decoration: none; }
a:hover { text-decoration: underline; }

/* Wrapper */
.wrapper { min-height: 100vh; }

/* ── Header ── */
header#header-bar {
  position: fixed;
  top: 0;
  z-index: 2;
  width: 100%;
}

.new-ui-topheader {
  display: inline-flex;
  align-items: center;
  width: 100%;
  height: 4.5rem;
  background-color: #878a91;
}

.new-ui-topheader.sidebar-collapsed { padding-left: var(--size-7); transition: padding-left 0.5s; }
.new-ui-topheader.sidebar-expanded  { padding-left: 27rem;         transition: padding-left 0.5s; }

.new-logo { height: 3rem; width: auto; }

#new-toprightnav {
  margin-left: auto;
  display: flex;
  align-items: center;
  gap: var(--size-4);
  padding-right: var(--size-7);
}

/* Header icon buttons */
.header-dialog-button {
  border: none;
  background: none;
  font-size: 2.8rem;
  color: #EFEFEF;
  transition: color 0.5s ease;
  cursor: pointer;
  line-height: 1;
  padding: 0 var(--size-4);
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
.header-dialog-button:hover { color: #FFFFFF; }

.header-icon-background {
  color: var(--accent);
  opacity: 0;
  transition: opacity 0.3s;
}
.header-dialog-button:hover .header-icon-background { opacity: 1; }
.header-icon { font-size: 1.5rem; }

/* ── Breadcrumb ── */
div.breadcrumb {
  background-color: #eeeeee;
  font-style: italic;
  font-size: 1.2rem;
  color: #7F7F7F;
  height: 3.2rem;
  border-bottom: 0.075rem solid #cccccc;
  display: flex;
  align-items: center;
  padding: 0 var(--size-7);
  gap: var(--size-5);
}
div.breadcrumb a       { color: var(--primary); text-decoration: none; }
div.breadcrumb a:hover { text-decoration: underline; }
div.breadcrumb span    { color: var(--accent); }

/* ── Content ── */
.content { padding-top: 5rem; }
.content.sidebar-collapsed { margin-left: 0;    transition: margin-left 0.5s; }
.content.sidebar-expanded  { margin-left: 27rem; transition: margin-left 0.5s; }

/* ── Alert overlays ── */
div.alert-overlay {
  display: none;
  background-color: #eeeeee;
  color: inherit;
  position: fixed;
  top: 1rem;
  right: 1rem;
  z-index: 200;
  padding: var(--size-5) var(--size-7);
  border-radius: var(--size-4);
  box-shadow: var(--shadow);
  max-width: 26rem;
  font-size: 1rem;
  font-family: 'Lato', sans-serif;
}
div.alert-overlay.error   { color: var(--state-red);   background-color: var(--state-red-bg); }
div.alert-overlay.warning { color: var(--state-amber); background-color: var(--state-amber-bg); }
div.alert-overlay.notice  { color: var(--state-green); background-color: var(--state-green-bg); }

/* ── Notification badge ── */
.badge {
  background-color: #D07B18;
  color: white;
  border-radius: 1rem;
  min-height: 1.5rem;
  min-width: 1.5rem;
  font-size: 1rem;
  z-index: 2;
  padding: var(--size-3) var(--size-5);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-weight: bold;
}

/* ── Header dialog dropdowns ── */
.header-dialog { position: fixed; z-index: 3; }
.header-dialog-content {
  background: white;
  border-radius: 1rem;
  box-shadow: 0.1rem 0.1rem 0.5rem rgba(0, 0, 0, 0.7), inset 0 0 0 0.08rem #a8a8a8;
}
.header-dialog-header {
  background-color: #227b99;
  color: white;
  border-radius: 1rem 1rem 0 0;
  font-size: 1.7rem;
  font-weight: 600;
  min-height: 4.45rem;
  display: flex;
  align-items: center;
  padding: 0 var(--size-6);
}

@media only screen and (max-width: 600px) {
  .content.sidebar-collapsed,
  .content.sidebar-expanded { margin-left: 0; }
}