/* ViiSync Client Portal — shell built on the design-system tokens (tokens.css loaded first). */
@import url('https://fonts.googleapis.com/css2?family=IBM+Plex+Mono:wght@400;500;600&family=IBM+Plex+Sans:wght@400;500;600;700&display=swap');

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

html, body {
    margin: 0;
    height: 100%;
    overflow: hidden;
    background: var(--bg);
    color: var(--fg);
    font-family: var(--sans);
    font-size: var(--fs-body);
}

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

.boot { display: grid; place-items: center; height: 100vh; color: var(--fg-faint); font-family: var(--mono); }

/* ── App shell ─────────────────────────────────────────────────────────── */
.app { display: flex; flex-direction: column; height: 100vh; min-height: 0; }

.titlebar {
    height: var(--h-titlebar); flex: 0 0 auto;
    display: flex; align-items: center; gap: 12px;
    padding: 0 16px; background: var(--titlebar);
    border-bottom: 1px solid var(--border-tb);
}
.titlebar .brand { display: flex; align-items: center; gap: 9px; font-weight: 600; letter-spacing: .3px; }
.titlebar .brand .mark {
    width: 18px; height: 18px; border-radius: var(--r-xs);
    background: var(--grad); box-shadow: 0 0 10px var(--glow);
}
.titlebar .spacer { flex: 1; }
.titlebar .who { font-family: var(--mono); font-size: var(--fs-meta); color: var(--fg-dim); }
.titlebar .who .role {
    margin-left: 8px; padding: 1px 7px; border-radius: 999px;
    background: var(--grad); color: var(--on-grad-ink); font-size: var(--fs-micro);
    font-weight: 600; text-transform: uppercase; letter-spacing: .5px;
}

.body { flex: 1; display: flex; min-height: 0; }

.sidebar {
    width: var(--w-sidebar); flex: 0 0 auto; min-width: 0;
    background: var(--bg); border-right: 1px solid var(--border);
    display: flex; flex-direction: column; padding: 14px 10px;
}
.side-label {
    font-family: var(--mono); font-size: var(--fs-label); font-weight: 600;
    text-transform: uppercase; letter-spacing: 1px; color: var(--fg-faint);
    padding: 6px 10px 8px;
}
.navlink {
    display: flex; align-items: center; gap: 9px; height: var(--h-node);
    padding: 0 10px; border-radius: var(--r-sm); color: var(--fg-dim);
    font-size: var(--fs-body-s); cursor: pointer; position: relative;
    text-decoration: none; margin-bottom: 1px;
}
.navlink:hover { background: var(--hover); color: var(--fg2); }
.navlink.active { background: var(--sel); color: var(--fg2); }
.navlink.active::before {
    content: ''; position: absolute; left: 0; top: 4px; bottom: 4px; width: 2px;
    background: var(--grad); box-shadow: 0 0 8px var(--glow); border-radius: 2px;
}

.main { flex: 1; min-width: 0; display: flex; flex-direction: column; overflow: hidden; }
.content { flex: 1; overflow: auto; padding: var(--pad-content); }
.content .inner { max-width: 980px; }

.view-title { font-size: var(--fs-title); font-weight: 600; color: var(--fg2); margin: 0 0 4px; }
.view-sub { color: var(--fg-dim); font-size: var(--fs-body-s); margin: 0 0 22px; }

.section-label {
    font-family: var(--mono); font-size: var(--fs-label); font-weight: 600;
    text-transform: uppercase; letter-spacing: 1px; color: var(--fg-faint);
    margin: 22px 0 10px;
}

/* ── Stat cards ─────────────────────────────────────────────────────────── */
.stats { display: flex; gap: var(--gap-grid-lg); flex-wrap: wrap; }
.stat {
    background: var(--panel); border: 1px solid var(--border); border-radius: var(--r-card);
    padding: var(--pad-card); min-width: 150px;
}
.stat .k { font-family: var(--mono); font-size: var(--fs-label); text-transform: uppercase; letter-spacing: 1px; color: var(--fg-faint); }
.stat .v { font-size: var(--fs-stat); font-weight: 700; color: var(--fg2); margin-top: 6px; }

/* ── Tables ─────────────────────────────────────────────────────────────── */
.tbl { width: 100%; border-collapse: collapse; font-family: var(--mono); font-size: var(--fs-row); border: 1px solid var(--border); border-radius: var(--r-table); overflow: hidden; }
.tbl thead th {
    text-align: left; font-weight: 600; font-size: var(--fs-th); color: var(--fg-faint);
    text-transform: uppercase; letter-spacing: .5px; padding: 9px 14px;
    background: var(--panel); border-bottom: 1px solid var(--border-tb);
}
.tbl tbody td { padding: 9px 14px; border-bottom: 1px solid var(--border-soft); color: var(--tx2); }
.tbl tbody tr:nth-child(even) { background: var(--bg2); }
.tbl tbody tr:hover { background: var(--hover); }
.tbl .actions { display: flex; gap: 6px; }

.pill { padding: 1px 8px; border-radius: 999px; font-size: var(--fs-micro); font-weight: 600; text-transform: uppercase; letter-spacing: .5px; border: 1px solid var(--border2); color: var(--fg-dim); }
.pill.admin { background: var(--grad); color: var(--on-grad-ink); border-color: transparent; }
.pill.manager { color: var(--fg2); border-color: var(--border4); }
.pill.client { color: var(--fg-dim); }

/* ── Buttons ────────────────────────────────────────────────────────────── */
.btn {
    font-family: var(--sans); font-size: var(--fs-body-s); font-weight: 600;
    padding: 7px 14px; border-radius: var(--r-btn); border: 1px solid var(--border2);
    background: var(--surf1); color: var(--fg); cursor: pointer; line-height: 1;
}
.btn:hover { background: var(--hover); color: var(--fg2); }
.btn.primary { background: var(--grad); color: var(--on-grad-ink); border-color: transparent; box-shadow: 0 0 10px var(--glow); }
.btn.danger { color: var(--red); border-color: var(--border3); }
.btn.danger:hover { background: rgba(240,106,106,.12); }
.btn.sm { padding: 4px 9px; font-size: var(--fs-micro); }
.btn:disabled { opacity: .45; cursor: not-allowed; }

/* ── Forms ──────────────────────────────────────────────────────────────── */
.field { margin-bottom: 14px; max-width: 420px; }
.field label { display: block; font-family: var(--mono); font-size: var(--fs-label); text-transform: uppercase; letter-spacing: 1px; color: var(--fg-faint); margin-bottom: 6px; }
.field input, .field select, .field textarea {
    width: 100%; padding: 8px 11px; background: var(--surf0); color: var(--fg);
    border: 1px solid var(--border2); border-radius: var(--r-input); font-family: var(--sans); font-size: var(--fs-body);
}
.field input:focus, .field select:focus, .field textarea:focus { outline: none; border-color: var(--accent); }
.field textarea { min-height: 74px; resize: vertical; }

.msg { padding: 9px 13px; border-radius: var(--r-sm); font-size: var(--fs-body-s); margin-bottom: 14px; max-width: 420px; }
.msg.err { color: var(--err-soft); border: 1px solid var(--border3); background: rgba(240,106,106,.08); }
.msg.ok { color: var(--green); border: 1px solid var(--border3); background: rgba(63,185,80,.08); }

/* ── Login ──────────────────────────────────────────────────────────────── */
.login-wrap { display: grid; place-items: center; height: 100vh; }
.login-card {
    width: 340px; background: var(--panel); border: 1px solid var(--border);
    border-radius: var(--r-modal); padding: 28px 26px; box-shadow: 0 18px 50px rgba(0,0,0,.55);
}
.login-card .brand { display: flex; align-items: center; gap: 10px; margin-bottom: 6px; font-weight: 600; font-size: var(--fs-modal-h); }
.login-card .brand .mark { width: 20px; height: 20px; border-radius: var(--r-xs); background: var(--grad); box-shadow: 0 0 10px var(--glow); }
.login-card .sub { color: var(--fg-dim); font-size: var(--fs-body-s); margin-bottom: 20px; }

/* ── Companies ──────────────────────────────────────────────────────────── */
.co-icon { display: inline-flex; align-items: center; justify-content: center; width: 20px; height: 20px; color: var(--fg-dim); vertical-align: middle; }
.co-icon svg { width: 18px; height: 18px; }
.co-icon-empty { border: 1px dashed var(--border3); border-radius: var(--r-xs); }
.srv-card { background: var(--panel); border: 1px solid var(--border); border-radius: var(--r-card); padding: 14px 16px; margin-bottom: 12px; max-width: 720px; }
.srv-head { display: flex; align-items: center; gap: 10px; }
.srv-name { flex: 1; padding: 7px 10px; background: var(--surf0); color: var(--fg); border: 1px solid var(--border2); border-radius: var(--r-input); font-family: var(--sans); font-size: var(--fs-body); }
.srv-name:focus, .ep-in:focus { outline: none; border-color: var(--accent); }
.ep-in { width: 100%; padding: 6px 9px; background: var(--surf0); color: var(--fg); border: 1px solid var(--border2); border-radius: var(--r-input); font-family: var(--mono); font-size: var(--fs-row); }