/*
 * MobileService admin panel.
 *
 * Why this file exists instead of Orchid's stylesheet: Orchid separates
 * everything with a faint shadow on a grey page — white cards on #edeef0, one
 * card per layout primitive, no edges. Every screen reads as floating boxes and
 * the content blends into the background. Here separation is 1px borders on
 * white, which is what makes dense admin UI legible.
 *
 * Plain CSS, no build step: the project has Tailwind + Vite configured but never
 * built, and the server that runs this only has composer and artisan.
 *
 * Lives under assets/ and not panel/ deliberately: a public/panel directory would
 * shadow the /panel route on any server configured with `try_files $uri $uri/`,
 * which answers from the directory instead of handing the request to Laravel.
 */

*, *::before, *::after { box-sizing: border-box; }

:root {
    --ink: #14171a;
    --ink2: #43494f;
    --ink3: #6b737b;
    --ink4: #99a1a9;
    --line: #e0e4e8;
    --line2: #eef0f3;
    --bg: #ffffff;
    --bg2: #f8f9fb;
    --side: #12151a;
    --side-hover: #1b2027;
    --side-on: #232931;
    --side-ink: #b3bac1;
    --side-ink2: #6d757e;
    --accent: #1a5fd0;
    --accent-ink: #14479c;
    --ok: #12703a;
    --okbg: #eaf6ee;
    --okline: #c6e3d0;
    --warn: #8a5300;
    --warnbg: #fdf5e6;
    --warnline: #f0e0bd;
    --bad: #ab1f2b;
    --badbg: #fdedee;
    --badline: #f2cdd0;
    --radius: 7px;
}

html, body { margin: 0; padding: 0; }

body {
    background: var(--bg);
    color: var(--ink);
    font: 400 14px/1.5 "Instrument Sans", system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
    -webkit-font-smoothing: antialiased;
    font-variant-numeric: tabular-nums;
}

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

code, .mono, input.mono, .num {
    font-family: "JetBrains Mono", ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
}
code { font-size: 12px; }

h1, h2, h3 { margin: 0; font-weight: 600; letter-spacing: -.015em; }

/* ── shell ───────────────────────────────────────────────── */

.shell { display: flex; min-height: 100vh; align-items: stretch; }

.side {
    width: 232px; flex: 0 0 232px; background: var(--side);
    display: flex; flex-direction: column; padding: 16px 10px;
}

.side .brand {
    display: flex; align-items: center; gap: 8px;
    padding: 2px 10px 14px; color: #fff; font-size: 14px; font-weight: 600;
}
.side .brand:hover { text-decoration: none; color: #fff; }

.sgroup {
    font-size: 10px; font-weight: 600; letter-spacing: .1em; text-transform: uppercase;
    color: var(--side-ink2); padding: 16px 10px 6px;
}

.sitem {
    display: flex; align-items: center; gap: 8px;
    padding: 7px 10px; border-radius: 5px; margin-bottom: 1px;
    color: var(--side-ink); font-size: 13px; text-decoration: none;
}
.sitem:hover { background: var(--side-hover); color: #e4e8eb; text-decoration: none; }
.sitem.on { background: var(--side-on); color: #fff; font-weight: 500; }
.sitem.dim { color: var(--side-ink2); }
.sitem .grow { flex-grow: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.sitem .badge { font-size: 11px; color: var(--side-ink2); flex-shrink: 0; }
.sitem .badge.warn { color: #d8a441; }
.sitem .badge.bad { color: #e0707a; }
.sitem.on .badge { color: var(--side-ink); }

.side .spacer { flex-grow: 1; }

.whoami {
    display: flex; align-items: center; gap: 8px; padding: 9px 10px;
    margin-top: 8px; border-top: 1px solid #1f242a;
}
.whoami .av {
    width: 26px; height: 26px; border-radius: 50%; background: #2c3238; color: #c3c9d0;
    display: flex; align-items: center; justify-content: center;
    font-size: 11px; font-weight: 600; flex-shrink: 0;
}
.whoami .who { min-width: 0; }
.whoami .who b { display: block; color: #e3e7ea; font-size: 12px; font-weight: 500; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.whoami .who span { color: var(--side-ink2); font-size: 10.5px; }
.whoami form { margin-left: auto; }
.whoami button {
    background: none; border: 0; padding: 4px; cursor: pointer; color: var(--side-ink2);
    display: flex; align-items: center;
}
.whoami button:hover { color: #e4e8eb; }

.main { flex-grow: 1; min-width: 0; display: flex; flex-direction: column; }

.topbar {
    border-bottom: 1px solid var(--line);
    padding: 16px 24px;
    display: flex; align-items: flex-end; justify-content: space-between; gap: 20px;
}
.topbar h1 { font-size: 19px; }
.topbar .sub { margin: 3px 0 0; color: var(--ink3); font-size: 13px; max-width: 78ch; }
.topbar .crumb { font-size: 12px; color: var(--ink4); margin-bottom: 4px; }
.topbar .crumb a { color: var(--ink3); }
.topbar .acts { display: flex; gap: 8px; flex-shrink: 0; }

.body { padding: 20px 24px 44px; display: flex; flex-direction: column; gap: 20px; }

/*
 * Icon tile: a portal logo when one resolves, otherwise the first letter on the
 * portal's colour.
 *
 * Set the colour inline with `background-color`, never the `background`
 * shorthand — the shorthand resets background-size and background-position, and
 * a 1080px logo then renders at natural size anchored top-left, which for a
 * round logo with transparent corners looks exactly like a blank coloured box.
 */
.ico {
    border-radius: 5px; color: #fff; display: flex; align-items: center; justify-content: center;
    font-size: 11px; font-weight: 600; flex-shrink: 0; width: 24px; height: 24px;
    background-size: cover; background-position: center; background-repeat: no-repeat;
}
.ico.sm { width: 16px; height: 16px; font-size: 9px; border-radius: 4px; }
.ico.lg { width: 38px; height: 38px; font-size: 16px; border-radius: var(--radius); }
.ico.xl { width: 44px; height: 44px; font-size: 17px; border-radius: var(--radius); }

/* ── panels ──────────────────────────────────────────────── */

.pnl { border: 1px solid var(--line); border-radius: var(--radius); }
.pnl.bad { border-color: var(--badline); }
.pnl.flat { border-radius: var(--radius); overflow: hidden; }

.phd {
    display: flex; align-items: center; justify-content: space-between; gap: 12px;
    padding: 10px 13px; background: var(--bg2);
    border-bottom: 1px solid var(--line);
    border-radius: var(--radius) var(--radius) 0 0;
}
.phd h2 { font-size: 13px; }
.phd .note { font-size: 12px; color: var(--ink3); }
.pnl.bad .phd { background: var(--badbg); border-color: var(--badline); }
.pnl.bad .phd h2 { color: var(--bad); }

.pft {
    padding: 10px 13px; border-top: 1px solid var(--line2);
    font-size: 12.5px; color: var(--ink3);
}
.pbd { padding: 12px 13px; }

.eyebrow {
    font-size: 10px; font-weight: 600; letter-spacing: .1em; text-transform: uppercase;
    color: var(--ink4);
}

.note-strip {
    padding: 10px 13px; font-size: 12.5px;
    background: var(--bg2); border-bottom: 1px solid var(--line2); color: var(--ink3);
}
.note-strip.warn { background: var(--warnbg); border-color: var(--warnline); color: var(--warn); }

/* ── attention cards ─────────────────────────────────────── */

.att {
    border: 1px solid var(--line); border-radius: var(--radius);
    border-left: 3px solid var(--ink4);
    display: flex; align-items: center; gap: 16px; padding: 13px 15px;
}
.att.bad { border-left-color: var(--bad); }
.att.warn { border-left-color: var(--warn); }
.att.ok { border-left-color: var(--ok); }
.att .txt { flex-grow: 1; min-width: 0; }
.att .txt b { font-size: 14px; font-weight: 600; }
.att .txt p { margin: 2px 0 0; color: var(--ink3); font-size: 12.5px; }
.att .side-note { font-size: 12px; color: var(--ink3); white-space: nowrap; }

/* ── tables ──────────────────────────────────────────────── */

.tbl { width: 100%; border-collapse: collapse; }
.tbl th {
    font-size: 11px; font-weight: 600; letter-spacing: .05em; text-transform: uppercase;
    color: var(--ink4); text-align: left; padding: 8px 13px;
    border-bottom: 1px solid var(--line); background: var(--bg2);
}
.tbl td { padding: 10px 13px; border-bottom: 1px solid var(--line2); font-size: 13.5px; vertical-align: middle; }
.tbl tbody tr:last-child td { border-bottom: 0; }
.tbl tbody tr:hover { background: #fcfcfd; }
.tbl .r { text-align: right; }
.tbl .num { font-variant-numeric: tabular-nums; }
.tbl a.rowlink { color: inherit; font-weight: 500; }
.tbl a.rowlink:hover { color: var(--accent); text-decoration: none; }

.scroll-x { overflow-x: auto; }

/* ── tags, buttons ───────────────────────────────────────── */

.tag {
    display: inline-flex; align-items: center; gap: 4px;
    padding: 2px 7px; border-radius: 4px; font-size: 11px; font-weight: 600;
    border: 1px solid transparent; white-space: nowrap;
}
.tag.ok { background: var(--okbg); color: var(--ok); border-color: var(--okline); }
.tag.warn { background: var(--warnbg); color: var(--warn); border-color: var(--warnline); }
.tag.bad { background: var(--badbg); color: var(--bad); border-color: var(--badline); }
.tag.mut { background: #f2f4f6; color: var(--ink3); border-color: var(--line); }

.btn {
    display: inline-flex; align-items: center; gap: 6px; justify-content: center;
    border: 1px solid #ccd2d8; background: #fff; border-radius: 5px;
    padding: 6px 12px; font: inherit; font-size: 13px; color: var(--ink);
    cursor: pointer; text-decoration: none; white-space: nowrap;
}
.btn:hover { background: var(--bg2); color: var(--ink); text-decoration: none; }
.btn.pri { background: var(--accent); border-color: var(--accent); color: #fff; font-weight: 500; }
.btn.pri:hover { background: var(--accent-ink); border-color: var(--accent-ink); color: #fff; }
.btn.danger { color: var(--bad); border-color: var(--badline); }
.btn.danger:hover { background: var(--badbg); color: var(--bad); }
.btn.sm { padding: 4px 10px; font-size: 12.5px; }
.btn.wide { width: 100%; }
.btn[disabled] { opacity: .5; cursor: not-allowed; }

/* ── fields ──────────────────────────────────────────────── */

.fld { padding: 12px 13px; border-bottom: 1px solid var(--line2); }
.fld:last-child { border-bottom: 0; }
.lbl { font-size: 12.5px; font-weight: 500; margin-bottom: 6px; }
.lbl .hint { display: block; font-weight: 400; color: var(--ink3); font-size: 12px; margin-top: 1px; }
.lbl .hint code { font-size: 11.5px; }

.inp {
    border: 1px solid #ccd2d8; border-radius: 5px; padding: 6px 9px;
    font: inherit; font-size: 13px; width: 100%; background: #fff; color: var(--ink);
}
.inp:focus { outline: 2px solid rgba(26, 95, 208, .25); border-color: var(--accent); }
.inp[disabled], .inp[readonly] { background: #f6f7f9; color: var(--ink3); }
textarea.inp { resize: vertical; min-height: 76px; }
select.inp { padding: 6px 8px; }

.row2 { display: flex; gap: 8px; align-items: flex-start; }
.row2 > * { min-width: 0; }

.err { color: var(--bad); font-size: 12px; margin-top: 4px; }
.inp.has-err { border-color: var(--badline); }

/* ── switch ──────────────────────────────────────────────── */

.sw {
    border: 0; cursor: pointer; padding: 0; background: none;
    display: inline-flex; align-items: center; gap: 8px; font: inherit; font-size: 12.5px;
    color: var(--ink3);
}
.sw .track {
    width: 34px; height: 20px; border-radius: 999px; flex-shrink: 0;
    display: flex; align-items: center; padding: 2px; background: #c8ced4;
    justify-content: flex-start; transition: background .12s ease, justify-content 0s;
}
.sw .knob { width: 16px; height: 16px; border-radius: 50%; background: #fff; box-shadow: 0 1px 2px rgba(0,0,0,.3); }
.sw.on .track { background: var(--ok); justify-content: flex-end; }
.sw.on { color: var(--ok); font-weight: 500; }
.sw[disabled] { cursor: not-allowed; opacity: .55; }

/* ── service rows ────────────────────────────────────────── */

.svc {
    display: flex; align-items: center; gap: 12px;
    padding: 10px 13px; border-bottom: 1px solid var(--line2);
}
.svc:last-child { border-bottom: 0; }
.svc:hover { background: #fcfcfd; }
.svc.off { background: #fcfcfd; }
.svc .txt { flex-grow: 1; min-width: 0; }
.svc .txt .nm { font-size: 13.5px; font-weight: 500; }
.svc.off .txt .nm { color: var(--ink4); }
.svc .txt code { font-size: 11.5px; color: var(--ink4); }
.svc .why { font-size: 12px; color: var(--warn); margin-top: 3px; }
.svc .why code { color: inherit; }

/* ── checks list ─────────────────────────────────────────── */

.chk { display: flex; align-items: flex-start; gap: 8px; padding: 8px 13px; border-bottom: 1px solid var(--line2); }
.chk:last-child { border-bottom: 0; }
.chk .t { font-size: 12.5px; flex-grow: 1; min-width: 0; }
.chk .t small { display: block; color: var(--ink3); font-size: 11.5px; margin-top: 1px; }
.chk svg { flex-shrink: 0; margin-top: 2px; }

/* ── stat rows ───────────────────────────────────────────── */

.stat { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; }
.stat + .stat { margin-top: 11px; }
.stat .k { font-size: 12.5px; color: var(--ink3); }
.stat .v { font-size: 17px; font-weight: 600; }
.stat .v.sm { font-size: 12.5px; font-weight: 400; }

/* ── layout helpers ──────────────────────────────────────── */

.cols { display: grid; grid-template-columns: minmax(0, 1fr) 300px; gap: 20px; align-items: start; }
.cols > .left { display: flex; flex-direction: column; gap: 18px; min-width: 0; }
.cols > .rail { display: flex; flex-direction: column; gap: 16px; }
@media (max-width: 1080px) { .cols { grid-template-columns: minmax(0, 1fr); } }

.two { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 18px; align-items: start; }
@media (max-width: 1080px) { .two { grid-template-columns: minmax(0, 1fr); } }

.stack { display: flex; flex-direction: column; gap: 9px; }

.flash {
    border: 1px solid var(--okline); background: var(--okbg); color: var(--ok);
    border-radius: 6px; padding: 9px 12px; font-size: 13px;
}
.flash.warn { border-color: var(--warnline); background: var(--warnbg); color: var(--warn); }
.flash.bad { border-color: var(--badline); background: var(--badbg); color: var(--bad); }

.empty { padding: 26px 13px; text-align: center; color: var(--ink4); font-size: 13px; }

/* ── sign-in ─────────────────────────────────────────────── */

.signin { min-height: 100vh; display: flex; align-items: center; justify-content: center; padding: 24px; background: var(--bg2); }
.signin .card { width: 100%; max-width: 372px; background: #fff; border: 1px solid var(--line); border-radius: 9px; }
.signin .card > header { padding: 20px 20px 4px; }
.signin .card h1 { font-size: 17px; }
.signin .card p { margin: 5px 0 0; color: var(--ink3); font-size: 12.5px; }
.signin .card .fld { border-bottom: 0; padding: 10px 20px; }
.signin .card footer { padding: 6px 20px 20px; }
.signin .mark {
    display: inline-flex; align-items: center; gap: 8px; margin-bottom: 14px;
    font-size: 14px; font-weight: 600;
}