:root {
  font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  color: #24303d;
  background: #f6f7f9;
  font-synthesis: none;
  font-size: 14px;
}
* { box-sizing: border-box; }
body { margin: 0; }
button, input, textarea { font: inherit; }
button { cursor: pointer; }
button:focus-visible, input:focus-visible, textarea:focus-visible, .table-scroll:focus-visible {
  outline: 2px solid #2763a0;
  outline-offset: 2px;
}
.inventory { margin: 12px auto 0; padding: 0 12px; max-width: 1600px; }
.load-status { margin: 0 0 8px; color: #5b6572; font-size: .86rem; }
.load-status:empty { display: none; }
.load-status.is-error { color: #9b3026; }
.table-scroll {
  max-height: calc(100dvh - 70px);
  overflow: auto;
  overscroll-behavior-x: contain;
  border: 1px solid #d8dde4;
  border-radius: 5px;
  background: #fff;
}
table { width: 100%; border-collapse: separate; border-spacing: 0; font-size: .92rem; }
th, td { padding: 8px 10px; text-align: left; vertical-align: top; border-bottom: 1px solid #e5e8ed; }
th { position: sticky; top: 0; z-index: 1; padding: 0; background: #edf0f4; font-weight: 600; white-space: nowrap; }
th button {
  display: flex; align-items: center; justify-content: space-between; gap: 5px;
  width: 100%; min-height: 42px; padding: 10px;
  border: 0; color: inherit; background: transparent; text-align: inherit; font-weight: inherit;
}
th button:hover { background: #e1e7ee; }
.sort-mark::after { content: "↕"; color: #6b7683; font-size: .8rem; }
th[aria-sort="ascending"] .sort-mark::after { content: "↑"; color: #24303d; }
th[aria-sort="descending"] .sort-mark::after { content: "↓"; color: #24303d; }
tr:last-child td { border-bottom: 0; }
tbody tr:hover { background: #fafbfd; }
td.identifier { min-width: 115px; max-width: 220px; font-weight: 600; overflow-wrap: anywhere; }
td.media-type, td.manufacturer { min-width: 80px; max-width: 160px; overflow-wrap: anywhere; }
.numeric { text-align: right; white-space: nowrap; font-variant-numeric: tabular-nums; }
.numeric button { justify-content: flex-end; }
.usage { width: 245px; min-width: 230px; font-variant-numeric: tabular-nums; }
.usage-top { display: flex; justify-content: space-between; gap: 8px; color: #596574; font-size: .8rem; }
.usage-percent { font-weight: 600; color: #35485d; }
.usage-values { display: block; margin-top: 4px; color: #596574; font-size: .77rem; white-space: nowrap; }
.usage-bar { display: block; appearance: none; width: 100%; height: 7px; margin: 5px 0 0; border: 0; border-radius: 4px; overflow: hidden; background: #e1e7ed; }
.usage-bar::-webkit-progress-bar { background: #e1e7ed; border-radius: 4px; }
.usage-bar::-webkit-progress-value { background: #567b9f; border-radius: 4px; }
.usage-bar::-moz-progress-bar { background: #567b9f; border-radius: 4px; }
.usage-bar[hidden] { display: block; visibility: hidden; }
.usage.is-anomaly .usage-bar::-webkit-progress-value { background: #b57329; }
.usage.is-anomaly .usage-bar::-moz-progress-bar { background: #b57329; }
.usage-warning { display: block; margin-top: 3px; color: #89521f; font-size: .76rem; }
.usage-warning:empty { display: none; }
.note-cell { min-width: 235px; width: 27%; white-space: pre-wrap; overflow-wrap: anywhere; }
.login-version { position: fixed; bottom: 10px; left: 14px; right: 14px; color: #6c7682; font-size: .73rem; }
.app-footer {
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  max-width: 1600px; margin: 8px auto; padding: 0 14px; color: #6c7682;
}
.app-footer small { font-size: .73rem; overflow-wrap: anywhere; }
.app-footer form { margin: 0; }
.logout { border: 0; padding: 5px 0 5px 10px; background: transparent; color: #5c6877; font-size: .8rem; }
.logout:hover { text-decoration: underline; }
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; }
.login-page { min-height: 100dvh; display: grid; place-items: center; padding: 20px; }
.login-panel { width: min(100%, 330px); padding: 24px; background: #fff; border: 1px solid #d8dde4; border-radius: 6px; }
.login-panel h1 { margin: 0 0 22px; font-size: 1.35rem; font-weight: 600; }
.login-panel form { display: grid; gap: 9px; }
.login-panel label { margin-top: 5px; font-size: .87rem; }
.login-panel input:not([type="hidden"]) { width: 100%; min-height: 42px; padding: 8px; border: 1px solid #bac5d1; border-radius: 3px; }
.login-submit { min-height: 42px; margin-top: 12px; border: 0; border-radius: 3px; color: #fff; background: #355d86; }
.login-submit:hover { background: #284c70; }
.login-error { margin: -5px 0 14px; color: #a03429; font-size: .87rem; overflow-wrap: anywhere; }
@media (max-width: 700px) {
  .inventory { margin-top: 6px; padding: 0 6px; }
  .table-scroll { max-height: calc(100dvh - 60px); }
  th, td { padding-left: 8px; padding-right: 8px; }
  th { padding: 0; }
  th button { padding: 10px 8px; min-height: 44px; }
  table { font-size: .88rem; }
  .note-cell { min-width: 210px; }
  .usage { min-width: 215px; }
  .app-footer { margin-top: 6px; padding: 0 8px; }
}