:root {
   --bg: #f4f5f7;
   --card: #ffffff;
   --text: #1d2330;
   --muted: #5b6475;
   --accent: #0b5cad;
   --accent-hover: #094a8b;
   --error-bg: #fdecec;
   --error: #a32020;
   --zebra: rgba(0, 0, 0, .04);
}
@media (prefers-color-scheme: dark) {
   :root {
      --bg: #15181e;
      --card: #1f232b;
      --text: #e6e8ec;
      --muted: #a0a8b6;
      --accent: #4c9be8;
      --accent-hover: #6aaef0;
      --error-bg: #3a1f22;
      --error: #f1a3a3;
      --zebra: rgba(255, 255, 255, .05);
   }
}
* { box-sizing: border-box; }
body {
   margin: 0;
   font-family: system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
   background: var(--bg);
   color: var(--text);
}
a { color: var(--accent); }
.topbar {
   display: flex;
   justify-content: space-between;
   align-items: center;
   gap: 16px;
   padding: 12px 16px;
   background: var(--card);
   border-bottom: 1px solid rgba(127, 127, 127, .2);
}
.brand { font-weight: 600; }
.who { color: var(--muted); font-size: .9rem; }
main { max-width: 1267px; margin: 32px auto; padding: 0 16px; }
.card {
   background: var(--card);
   border-radius: 8px;
   padding: 24px;
   box-shadow: 0 1px 3px rgba(0, 0, 0, .08);
}
.login { max-width: 420px; margin: 64px auto; text-align: center; }
.login p { color: var(--muted); }
h1 { margin-top: 0; font-size: 1.4rem; }
.button {
   display: inline-block;
   padding: 10px 20px;
   border-radius: 6px;
   background: var(--accent);
   color: #fff;
   text-decoration: none;
   font-weight: 600;
}
.button:hover { background: var(--accent-hover); }
.error {
   background: var(--error-bg);
   color: var(--error);
   padding: 8px 12px;
   border-radius: 6px;
}
h2 { margin-top: 0; font-size: 1.15rem; }
.card + .card, .notice + .card, .error + .card { margin-top: 16px; }
.notice {
   background: var(--card);
   border-left: 4px solid var(--accent);
   padding: 8px 12px;
   border-radius: 6px;
}
.tablewrap { overflow-x: auto; }
table { border-collapse: collapse; width: 100%; font-size: .92rem; }
th, td { text-align: left; padding: 6px 10px; border-bottom: 1px solid rgba(127, 127, 127, .2); white-space: nowrap; }
th { color: var(--muted); font-weight: 600; }
.mono { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; }
form.request { display: grid; gap: 12px; max-width: 560px; }
form.request label { display: grid; gap: 4px; color: var(--muted); font-size: .9rem; }
form.request input, form.request textarea {
   font: inherit;
   color: var(--text);
   background: var(--bg);
   border: 1px solid rgba(127, 127, 127, .35);
   border-radius: 6px;
   padding: 8px;
}
form.request button { justify-self: start; border: 0; cursor: pointer; font: inherit; font-weight: 600; }
table.keys > tbody > tr:first-child > td { border-bottom: 1px solid rgba(127, 127, 127, .2); }
button.expand {
   background: none;
   border: 1px solid rgba(127, 127, 127, .35);
   border-radius: 4px;
   color: var(--text);
   cursor: pointer;
   width: 26px;
   height: 26px;
   line-height: 1;
   transition: transform .15s;
}
button.expand[aria-expanded="true"] { transform: rotate(90deg); }
button.expand:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
tr.devices > td { background: var(--bg); padding: 8px 10px 12px; }
table.devtable { font-size: .88rem; }
table.devtable th, table.devtable td { padding: 4px 8px; }
.muted { color: var(--muted); margin: 0; }
form.search { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px; }
form.search label { font-weight: 600; }
form.search input[type="search"] {
   flex: 1 1 280px;
   font: inherit;
   color: var(--text);
   background: var(--bg);
   border: 1px solid rgba(127, 127, 127, .35);
   border-radius: 6px;
   padding: 8px;
}
form.search button { border: 0; cursor: pointer; font: inherit; font-weight: 600; }
form.search ~ p, form.search ~ .tablewrap { margin-top: 16px; }
.duplicates { margin-bottom: 20px; }
.duplicates > p, .duplicates > .scrollbox { margin-top: 16px; }
label.showinactive { display: inline-flex; align-items: center; gap: 6px; margin: 10px 0 6px; color: var(--muted); font-size: .9rem; cursor: pointer; }
table.devtable tr.inactive > td { color: var(--muted); font-style: italic; }
html:not(.show-inactive) table.devtable tr.inactive,
html.show-inactive table.devtable tr.noactive { display: none; }
button.release {
   font: inherit;
   font-size: .85rem;
   padding: 3px 10px;
   border-radius: 4px;
   border: 1px solid var(--error);
   background: none;
   color: var(--error);
   cursor: pointer;
}
button.release:hover { background: var(--error-bg); }
dialog#confirmRelease {
   max-width: 460px;
   width: calc(100% - 32px);
   border: 0;
   border-radius: 8px;
   padding: 24px;
   background: var(--card);
   color: var(--text);
   box-shadow: 0 10px 40px rgba(0, 0, 0, .3);
}
dialog#confirmRelease::backdrop { background: rgba(0, 0, 0, .45); }
dl.crdetails { display: grid; grid-template-columns: max-content 1fr; gap: 4px 12px; margin: 0 0 12px; }
dl.crdetails dt { color: var(--muted); }
dl.crdetails dd { margin: 0; word-break: break-all; }
.dialog-actions { display: flex; justify-content: flex-end; gap: 8px; margin-top: 20px; }
.dialog-actions button { font: inherit; font-weight: 600; cursor: pointer; }
button.secondary {
   padding: 10px 20px;
   border-radius: 6px;
   border: 1px solid rgba(127, 127, 127, .35);
   background: none;
   color: var(--text);
}
.button.danger { background: #b42318; border: 0; }
.button.danger:hover { background: #912018; }
.button.danger:disabled { opacity: .6; cursor: default; }
table.devtable tbody tr:nth-child(even) > td { background: var(--zebra); }

/* Wide tables: hints that more columns are hidden (see portal.js) */
.scrollbox { position: relative; }
.scrollhint { display: none; justify-content: space-between; gap: 8px; margin-bottom: 6px; }
.scrollbox.more-left .scrollhint, .scrollbox.more-right .scrollhint { display: flex; }
.scrollhint button {
   font: inherit;
   font-size: .85rem;
   font-weight: 600;
   padding: 4px 12px;
   border-radius: 999px;
   border: 1px solid var(--accent);
   background: none;
   color: var(--accent);
   cursor: pointer;
   visibility: hidden;
}
.scrollhint button:hover { background: var(--zebra); }
.scrollhint .scroll-right { margin-left: auto; }
.scrollbox.more-left .scroll-left, .scrollbox.more-right .scroll-right { visibility: visible; }
.scrollarea { position: relative; }
.scrollarea::before, .scrollarea::after {
   content: '';
   position: absolute;
   top: 0;
   bottom: 12px;
   width: 56px;
   pointer-events: none;
   opacity: 0;
   transition: opacity .15s;
   z-index: 1;
}
.scrollarea::before { left: 0; background: linear-gradient(to left, transparent, var(--card)); }
.scrollarea::after { right: 0; background: linear-gradient(to right, transparent, var(--card)); }
.scrollbox.more-left .scrollarea::before, .scrollbox.more-right .scrollarea::after { opacity: 1; }
/* Keep the horizontal scrollbar visible (macOS hides it by default) */
.tablewrap { padding-bottom: 2px; }
.tablewrap::-webkit-scrollbar { height: 10px; }
.tablewrap::-webkit-scrollbar-track { background: var(--zebra); border-radius: 5px; }
.tablewrap::-webkit-scrollbar-thumb { background: rgba(127, 127, 127, .5); border-radius: 5px; }
@supports not selector(::-webkit-scrollbar) {
   .tablewrap { scrollbar-width: thin; scrollbar-color: rgba(127, 127, 127, .5) var(--zebra); }
}

/* Sortable column headers */
th button.sort {
   font: inherit;
   font-weight: 600;
   color: inherit;
   background: none;
   border: 0;
   padding: 0;
   cursor: pointer;
   white-space: nowrap;
}
th button.sort::after { content: '\2195'; margin-left: 4px; opacity: .35; }
th[aria-sort="ascending"] button.sort::after { content: '\2191'; opacity: 1; }
th[aria-sort="descending"] button.sort::after { content: '\2193'; opacity: 1; }
th button.sort:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }

.subtitle { color: var(--muted); margin: -8px 0 16px; }
.dirfilter { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px; margin-bottom: 12px; }
.dirfilter label { font-weight: 600; }
.dirfilter input {
   flex: 0 1 280px;
   font: inherit;
   color: var(--text);
   background: var(--bg);
   border: 1px solid rgba(127, 127, 127, .35);
   border-radius: 6px;
   padding: 6px 8px;
}
table.directory tbody tr.alt > td { background: var(--zebra); }