/* ── Utility classes ── */
.hidden     { display: none; }
.wide       { width: 100%; }
.left       { float: left; }
.right      { float: right; }
.half       { display: inline-block; width: 48.65%; }
.third      { width: 32%; }
.quarter    { display: inline-block; width: 23%; }
.two_thirds { display: inline-block; width: 65.32%; }
.left_aligned { margin: auto; text-align: left; display: inline-block; }
.bordered   { border: var(--size-1) solid #CCCCCC; background: white; padding: var(--size-5); }
.underline  { border-bottom: var(--size-1) solid #cccccc; }
.highlight  { background-color: #ff0; }
.error      { color: red; }
.no-print   {}
.print-only { display: none; }

/* ── Status message boxes ── */
.error_message       { color: #f00; background: #fee; padding: var(--size-5); border-radius: var(--size-4); margin-bottom: var(--size-5); }
.in_progress_message { color: #880; background: #ffe; padding: var(--size-5); border-radius: var(--size-4); margin-bottom: var(--size-5); }
.success_message     { color: #0a0; background: #efe; padding: var(--size-5); border-radius: var(--size-4); margin-bottom: var(--size-5); }
.emphasized_warning  { color: #f00; background: #fee; padding: var(--size-5); border-radius: var(--size-4); margin-bottom: var(--size-5); }

/* ── Sidebar navigation ── */
.sidebar-new {
  background-color: var(--primary);
  color: white;
  position: fixed;
  top: 0;
  left: 0;
  height: 100vh;
  z-index: 1;
  transition: width 0.5s;
  overflow: hidden;
}
.sidebar-new.collapsed { width: 5.66rem; }
.sidebar-new.expanded  { width: 27rem; }

.sidebar-new a,
.sidebar-new span { color: white; text-decoration: none; }
.sidebar-new a:hover { color: #FFDB9F; }

/* ── Print ── */
@media print {
  .no-print, .alert-overlay, .overlay, header { display: none !important; }
  .wrapper { margin: 0 auto; }
  .print-only { display: block; }
  table.tablesorter, table.tablesorter thead tr th { font-size: 6pt; }
}

/* ── Responsive ── */
@media only screen and (max-width: 1900px) {}
@media only screen and (max-width: 1110px) {}
@media only screen and (max-width: 850px)  {}
@media only screen and (max-width: 600px)  {
  .half, .quarter, .two_thirds { width: 100%; display: block; }
}
@media only screen and (max-width: 480px)  {}