/* poste.io inspired admin theme: dark navy sidebar, flat white content, blue accent.
   Layout rules, in the order the page is built: shell (sidebar + main), top bar, content,
   then the pieces every page uses (cards, tables, key/value tables, stats, time line). */
:root {
    --pio-sidebar-bg: #1f2d3d;
    --pio-sidebar-bg-2: #182433;
    --pio-sidebar-text: #c5cfdb;
    --pio-sidebar-active: #ffffff;
    --pio-accent: #2f7ed8;
    --pio-accent-2: #3d8ff0;
    --pio-body: #f4f6f8;
    --pio-border: #e1e5ea;
    --pio-text: #2b3440;
    --pio-muted: #6c7a89;
    --pio-sidebar-w: 232px;
    --pio-gutter: 28px;
}
html, body { height: 100%; }
body {
    background: var(--pio-body);
    color: var(--pio-text);
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, "PingFang SC", "Hiragino Sans", "Microsoft YaHei", sans-serif;
    font-size: 14px;
}
a { color: var(--pio-accent); text-decoration: none; }
a:hover { color: var(--pio-accent-2); }

/* ---------------------------------------------------------------- shell */
.pio-shell { display: flex; min-height: 100vh; }
.pio-sidebar {
    width: var(--pio-sidebar-w); flex: 0 0 var(--pio-sidebar-w);
    background: var(--pio-sidebar-bg); color: var(--pio-sidebar-text);
    display: flex; flex-direction: column; position: sticky; top: 0; height: 100vh; z-index: 1040;
}
.pio-brand {
    display: flex; align-items: center; gap: 10px; padding: 16px 18px; min-height: 60px;
    color: #fff; font-weight: 600; font-size: 15px; letter-spacing: .2px; line-height: 1.25;
    background: var(--pio-sidebar-bg-2); border-bottom: 1px solid rgba(255,255,255,.06);
}
.pio-brand:hover { color: #fff; }
.pio-brand-mark { display: inline-flex; flex: 0 0 30px; width: 30px; height: 30px; border-radius: 6px; background: var(--pio-accent); align-items: center; justify-content: center; font-size: 17px; }
.pio-brand-text { min-width: 0; overflow-wrap: anywhere; }
.pio-nav { padding: 10px 0; flex: 1; overflow-y: auto; }
.pio-nav a {
    display: flex; align-items: center; gap: 10px; padding: 10px 20px;
    color: var(--pio-sidebar-text); border-left: 3px solid transparent; font-size: 14px;
}
.pio-nav a i { width: 18px; text-align: center; opacity: .85; }
.pio-nav a:hover { background: rgba(255,255,255,.04); color: #fff; }
.pio-nav a.active { background: rgba(255,255,255,.07); color: var(--pio-sidebar-active); border-left-color: var(--pio-accent); }
.pio-nav-section { padding: 14px 20px 4px; font-size: 11px; text-transform: uppercase; letter-spacing: .08em; color: #7d8c9c; }
.pio-sidebar-footer { padding: 12px 18px; border-top: 1px solid rgba(255,255,255,.06); font-size: 13px; }
.pio-user { margin-bottom: 8px; color: #fff; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pio-lang { color: #8ea0b5; font-size: 12px; }
.pio-lang.on { color: #fff; font-weight: 600; }
.pio-backdrop { display: none; }

.pio-main { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.pio-topbar {
    background: #fff; border-bottom: 1px solid var(--pio-border);
    padding: 10px var(--pio-gutter); min-height: 60px;
    display: flex; align-items: center; gap: 12px;
    position: sticky; top: 0; z-index: 1020;
}
.pio-menu-btn {
    display: none; flex: 0 0 auto; width: 36px; height: 36px; align-items: center; justify-content: center;
    border: 1px solid var(--pio-border); border-radius: 4px; background: #fff; color: var(--pio-text); font-size: 20px; line-height: 1;
}
.pio-title { font-size: 18px; font-weight: 600; margin: 0; flex: 1 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pio-topbar-actions { display: flex; flex: 0 1 auto; flex-wrap: wrap; justify-content: flex-end; align-items: center; gap: 8px; }
.pio-topbar-actions form { margin: 0; }
.pio-content { padding: 24px var(--pio-gutter); min-width: 0; }

/* Below 992px the sidebar is a drawer opened from the top bar. */
@media (max-width: 991.98px) {
    :root { --pio-gutter: 16px; }
    .pio-sidebar {
        position: fixed; top: 0; bottom: 0; left: 0; height: auto;
        width: min(280px, 86vw); flex-basis: auto;
        transform: translateX(-100%); transition: transform .18s ease-out; visibility: hidden;
    }
    .pio-shell.nav-open .pio-sidebar { transform: none; visibility: visible; box-shadow: 0 0 24px rgba(0,0,0,.35); }
    .pio-shell.nav-open .pio-backdrop { display: block; position: fixed; inset: 0; z-index: 1035; background: rgba(15,23,32,.45); }
    .pio-menu-btn { display: inline-flex; }
    .pio-content { padding-top: 16px; padding-bottom: 16px; }
    .pio-title { font-size: 16px; }
}
@media (prefers-reduced-motion: reduce) { .pio-sidebar { transition: none; } }

/* ---------------------------------------------------------------- pieces */
.card { border: 1px solid var(--pio-border); border-radius: 4px; box-shadow: none; }
.card-header { background: #fff; border-bottom: 1px solid var(--pio-border); font-weight: 600; font-size: 14px; }
.btn-primary { background: var(--pio-accent); border-color: var(--pio-accent); }
.btn-primary:hover { background: var(--pio-accent-2); border-color: var(--pio-accent-2); }
.btn { border-radius: 3px; font-size: 13.5px; }
.btn-sm { font-size: 12.5px; }
.form-control, .form-select { border-radius: 3px; font-size: 13.5px; }
.badge { font-weight: 500; border-radius: 3px; padding: .35em .55em; }
.badge.bg-light { color: var(--pio-text); border: 1px solid var(--pio-border); }
.text-muted { color: var(--pio-muted) !important; }
code, .mono { font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; font-size: 12.5px; }
code { overflow-wrap: anywhere; }
pre.mono {
    background: #f7f9fb; border: 1px solid var(--pio-border); padding: 10px; border-radius: 3px;
    max-height: 360px; max-width: 100%; overflow: auto; white-space: pre-wrap; overflow-wrap: anywhere; margin-bottom: .75rem;
}
.alert { overflow-wrap: anywhere; }
.pagination { flex-wrap: wrap; row-gap: 4px; margin-bottom: 0; }

/* Tables. A table sits in .table-responsive inside its card, so one that is wider than the
   card scrolls sideways there instead of being cut off or pushing the page wide. */
.table { font-size: 13.5px; margin-bottom: 0; }
.table > :not(caption) > * > * { padding: .55rem .75rem; vertical-align: middle; }
.table thead th { font-size: 12px; text-transform: uppercase; letter-spacing: .04em; color: var(--pio-muted); border-bottom-width: 1px; font-weight: 600; white-space: nowrap; }
.card > .table-responsive > .table > :last-child > tr:last-child > * { border-bottom: 0; }
.card > .table-responsive { border-radius: 4px; }

/* List tables (one row per device, order, command…): cells stay on one line and the table
   keeps a width it can be read at; .wrap marks the one free-text cell that may break. */
.table-list { min-width: 640px; }
.table-list td { white-space: nowrap; }
.table-list td.wrap { white-space: normal; overflow-wrap: anywhere; min-width: 14rem; }
.table-list details > pre { max-width: min(70ch, 72vw); }
.table-list.table-wide { min-width: 880px; }

/* Key / value tables: the label column has a fixed share, values break wherever they must
   (UDIDs, URLs, key material). */
.kv { table-layout: fixed; width: 100%; }
.kv th { width: 200px; color: var(--pio-muted); font-weight: 500; overflow-wrap: anywhere; }
.kv td { overflow-wrap: anywhere; word-break: break-word; }
.health i.ok { color: #2bb673; } .health i.bad { color: #d9534f; }
@media (max-width: 575.98px) {
    .kv th { width: 38%; }
}

/* Below 768px the device and order lists turn into one block per row, label on the left. */
@media (max-width: 767.98px) {
    .table.table-stack { display: block; min-width: 0; width: 100%; }
    .table-stack thead { display: none; }
    .table-stack tbody { display: block; }
    .table-stack tbody tr { display: block; padding: 10px 14px; border-bottom: 1px solid var(--pio-border); }
    .table-stack tbody tr:last-child { border-bottom: 0; }
    .table-stack tbody td {
        display: flex; justify-content: space-between; align-items: baseline; gap: 16px;
        padding: 3px 0; border: 0; white-space: normal; text-align: right; overflow-wrap: anywhere;
    }
    .table-stack tbody td::before { content: attr(data-label); flex: 0 0 auto; color: var(--pio-muted); font-size: 12px; text-align: left; }
    .table-stack tbody td:first-child { font-size: 14.5px; font-weight: 600; padding-bottom: 6px; }
    .table-stack tbody td:first-child::before { content: none; }
    .table-stack tbody td.empty-row { display: block; text-align: center; }
    .table-stack tbody td.empty-row::before { content: none; }
}

/* Filter bars above lists: fields share the row, and take a full row each on a phone. */
.pio-filter { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 16px; }
.pio-filter .form-control { flex: 1 1 220px; max-width: 320px; }
.pio-filter .form-select { flex: 0 1 190px; width: auto; }
@media (max-width: 575.98px) {
    .pio-filter .form-control, .pio-filter .form-select { flex: 1 1 100%; max-width: none; }
    .pio-filter .btn { flex: 1 1 100%; }
}

/* Dashboard counters: 8 in a row on a wide screen, 4 below that, 2 on a phone. */
.stat-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
@media (min-width: 576px) { .stat-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
@media (min-width: 1500px) { .stat-grid:not(.stat-grid-4) { grid-template-columns: repeat(8, minmax(0, 1fr)); } }
.stat { display: block; background: #fff; border: 1px solid var(--pio-border); border-radius: 4px; padding: 14px 16px; min-width: 0; }
.stat .n { font-size: 26px; font-weight: 600; line-height: 1.1; }
.stat .l { font-size: 12px; color: var(--pio-muted); text-transform: uppercase; letter-spacing: .04em; margin-top: 4px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.stat.ok { border-left: 4px solid #2bb673; }
.stat.warn { border-left: 4px solid #f0ad4e; }
.stat.bad { border-left: 4px solid #d9534f; }
.stat.info { border-left: 4px solid var(--pio-accent); }

.timeline { list-style: none; padding: 0; margin: 0; }
.timeline li { padding: 8px 0 8px 18px; border-left: 2px solid var(--pio-border); position: relative; overflow-wrap: anywhere; }
.timeline li::before { content: ""; position: absolute; left: -6px; top: 13px; width: 10px; height: 10px; border-radius: 50%; background: var(--pio-accent); }
.timeline li.warning::before { background: #f0ad4e; }
.timeline li.error::before { background: #d9534f; }
.timeline .t { color: var(--pio-muted); font-size: 12px; }
.pio-scroll { max-height: 560px; overflow-y: auto; }

/* Rows of small action buttons (device and order pages). */
.pio-actions { display: flex; flex-wrap: wrap; gap: 8px; }
.pio-actions form { margin: 0; }

.login-wrap { min-height: 100vh; display: flex; align-items: center; justify-content: center; padding: 16px; background: var(--pio-sidebar-bg); }
.login-card { width: min(380px, 100%); background: #fff; border-radius: 6px; padding: 32px; }
.login-card h1 { font-size: 20px; font-weight: 600; margin-bottom: 22px; overflow-wrap: anywhere; }
@media (max-width: 575.98px) { .login-card { padding: 24px 20px; } }