/* FlowHub - census of the organisation chart and its equipment.
 * Mobile first (C12): the survey is used on a phone while walking the offices; the dashboard is
 * a desk screen that still works on a tablet and a phone. Touch targets are at least 44 px. */

:root {
    --navy: #0d1f30;
    --navy-2: #16304a;
    --blue: #1d6fb8;
    --blue-soft: #e6f0fa;
    --teal: #0e7c66;
    --teal-soft: #e3f4ef;
    --amber: #a86a08;
    --amber-soft: #fcf2e2;
    --red: #b42318;
    --red-soft: #fdecea;
    --ink: #0e1a26;
    --ink-2: #4a5563;
    --ink-3: #7a8594;
    --line: #dde4ec;
    --line-2: #eef2f6;
    --bg: #f3f6f9;
    --card: #ffffff;
    --radius: 12px;
    --shadow: 0 1px 2px rgba(13, 31, 48, .06), 0 4px 14px rgba(13, 31, 48, .06);
    --bar-h: 56px;
    --nav-h: 64px;
    font-size: 16px;
}

* { box-sizing: border-box; }
html, body { margin: 0; padding: 0; }
body {
    background: var(--bg);
    color: var(--ink);
    font-family: "Segoe UI", system-ui, -apple-system, "Helvetica Neue", Arial, sans-serif;
    line-height: 1.45;
    -webkit-text-size-adjust: 100%;
    overflow-x: hidden;
    /* DEF-06 follow-up: inherited, so it reaches every name an operator types without touching
       each selector - a long unbroken run (a hostname, a serial with no spaces, a pasted string)
       breaks instead of forcing its box, and so the page, wider than the phone. It only ever acts
       when there is truly no other place to break the line, so normal word-spaced text is unaffected,
       and it does nothing where a label already truncates with white-space: nowrap + ellipsis
       (overflow: hidden there already gives that flex/grid item an automatic minimum width of 0). */
    overflow-wrap: anywhere;
}
button, input, select, textarea { font: inherit; color: inherit; }
button, [role="button"], a, label.check, .clickable, select { cursor: pointer; }
a { color: var(--blue); }
.hidden { display: none !important; }
.muted { color: var(--ink-3); }
.small { font-size: .86rem; }
.nowrap { white-space: nowrap; }
.grow { flex: 1 1 auto; min-width: 0; }
.row { display: flex; align-items: center; gap: 8px; }
.wrap { flex-wrap: wrap; }
.stack > * + * { margin-top: 12px; }
.ellipsis { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* ------------------------------------------------------------------ buttons */
.btn {
    display: inline-flex; align-items: center; justify-content: center; gap: 8px;
    min-height: 44px; padding: 0 16px; border-radius: 10px;
    border: 1px solid var(--line); background: var(--card); color: var(--ink);
    font-weight: 600; text-decoration: none; white-space: nowrap;
    transition: background .15s, border-color .15s, box-shadow .15s;
}
.btn:hover { border-color: #c4cfdb; background: #f8fafc; }
.btn:focus-visible, .chip:focus-visible, .tree-row:focus-visible, .type-btn:focus-visible { outline: 3px solid rgba(29, 111, 184, .35); outline-offset: 1px; }
.btn.primary { background: var(--blue); border-color: var(--blue); color: #fff; }
.btn.primary:hover { background: #185f9e; }
.btn.danger { color: var(--red); }
.btn.danger:hover { background: var(--red-soft); border-color: #f2b8b2; }
.btn.ghost { background: transparent; border-color: transparent; }
.btn.ghost:hover { background: rgba(13, 31, 48, .06); }
.btn.icon { width: 44px; padding: 0; }
.btn.block { width: 100%; }
.btn.big { min-height: 56px; font-size: 1.05rem; border-radius: 14px; }
.btn[disabled] { opacity: .55; cursor: not-allowed; }

/* ------------------------------------------------------------------ top bar and nav */
.topbar {
    position: sticky; top: 0; z-index: 30;
    height: var(--bar-h); display: flex; align-items: center; gap: 10px;
    padding: 0 12px; background: var(--navy); color: #fff;
}
.brand { display: flex; align-items: center; gap: 10px; font-weight: 700; letter-spacing: .01em; min-width: 0; }
.brand .mark {
    width: 34px; height: 34px; border-radius: 9px; flex: 0 0 auto;
    background: linear-gradient(135deg, #2b86d6, #1d6fb8 55%, #0e7c66);
    display: grid; place-items: center; font-size: 1rem;
}
.brand .name { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
/* Visible badge next to the title on every non-production environment (stage/dev): /api/public/info
 * only sends env_label there, PROD never shows it. */
.env-badge {
    display: inline-flex; align-items: center; margin-left: 6px; padding: 2px 8px; border-radius: 999px;
    font-size: .68rem; font-weight: 700; letter-spacing: .03em; background: var(--amber-soft, #fde9c7); color: #6b4a0c;
    flex: 0 0 auto;
}
.login .brand .env-badge { color: #6b4a0c; }
/* The top bar is tight at phone width (brand name + live indicator + profile button all share
 * one row): the badge already shows prominently on the login screen, so it steps aside here
 * rather than truncating the title down to a few letters. */
@media (max-width: 479px) { .topbar .env-badge { display: none; } }
.topnav { display: none; gap: 4px; margin-left: 12px; }
.topnav a {
    color: #c9d6e3; text-decoration: none; padding: 0 14px; height: 40px; border-radius: 8px;
    display: inline-flex; align-items: center; gap: 8px; font-weight: 600;
}
.topnav a:hover { background: var(--navy-2); color: #fff; }
.topnav a.active { background: rgba(255, 255, 255, .12); color: #fff; }
.topbar .spacer { flex: 1; }
.topbar .btn.ghost { color: #dfe8f1; }
.topbar .btn.ghost:hover { background: var(--navy-2); }
.live {
    display: inline-flex; align-items: center; gap: 6px; font-size: .8rem; font-weight: 600;
    color: #a9f0d1; padding: 0 8px; white-space: nowrap;
}
.live .dot { width: 9px; height: 9px; border-radius: 50%; background: #34d399; box-shadow: 0 0 0 0 rgba(52, 211, 153, .6); animation: pulse 2s infinite; }
.live.off { color: #f6c97a; }
.live.off .dot { background: #f59e0b; animation: none; }
@keyframes pulse { 0% { box-shadow: 0 0 0 0 rgba(52, 211, 153, .55); } 70% { box-shadow: 0 0 0 8px rgba(52, 211, 153, 0); } 100% { box-shadow: 0 0 0 0 rgba(52, 211, 153, 0); } }

.bottomnav {
    position: fixed; left: 0; right: 0; bottom: 0; z-index: 30;
    height: calc(var(--nav-h) + env(safe-area-inset-bottom));
    padding-bottom: env(safe-area-inset-bottom);
    display: flex; background: #fff; border-top: 1px solid var(--line);
}
.bottomnav a {
    flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 3px;
    color: var(--ink-3); text-decoration: none; font-size: .74rem; font-weight: 600;
}
.bottomnav a i { font-size: 1.25rem; }
.bottomnav a.active { color: var(--blue); }

main { padding: 14px 12px calc(var(--nav-h) + 24px + env(safe-area-inset-bottom)); max-width: 1500px; margin: 0 auto; }
body.editing main { padding-bottom: calc(var(--nav-h) + 96px + env(safe-area-inset-bottom)); }

@media (min-width: 900px) {
    .topnav { display: flex; }
    .bottomnav { display: none; }
    main { padding: 20px 24px 40px; }
    body.editing main { padding-bottom: 110px; }
}

/* ------------------------------------------------------------------ page heading, cards */
.page-head { display: flex; align-items: flex-start; gap: 12px; flex-wrap: wrap; margin-bottom: 14px; }
.page-head h1 { font-size: 1.35rem; margin: 0; line-height: 1.25; }
.page-head .sub { color: var(--ink-2); font-size: .92rem; margin-top: 2px; }
.page-head .actions { margin-left: auto; display: flex; gap: 8px; flex-wrap: wrap; }
.card { background: var(--card); border: 1px solid var(--line); border-radius: var(--radius); box-shadow: var(--shadow); }
.card-pad { padding: 16px; }
.card h2 { font-size: 1.05rem; margin: 0 0 10px; }
.section-title { font-size: .78rem; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--ink-3); margin: 18px 0 8px; display: flex; align-items: center; gap: 8px; }
.empty { text-align: center; color: var(--ink-3); padding: 28px 12px; }
.empty i { font-size: 1.8rem; display: block; margin-bottom: 8px; color: #b5c0cc; }
.back { display: inline-flex; align-items: center; gap: 6px; min-height: 44px; color: var(--ink-2); text-decoration: none; font-weight: 600; }

/* ------------------------------------------------------------------ form fields */
.field { display: block; margin-bottom: 14px; }
.field > label, .field > .label { display: block; font-weight: 600; font-size: .9rem; margin-bottom: 6px; color: var(--ink); }
.field .req { color: var(--red); margin-left: 2px; }
.input, select.input, textarea.input {
    width: 100%; min-height: 48px; padding: 10px 12px; border-radius: 10px;
    border: 1px solid #cdd6e0; background: #fff; font-size: 1rem;
}
textarea.input { min-height: 96px; resize: vertical; line-height: 1.4; }
.input:focus { outline: none; border-color: var(--blue); box-shadow: 0 0 0 3px rgba(29, 111, 184, .18); }
.form-text { font-size: .82rem; color: var(--ink-3); margin-top: 5px; }
.grid2 { display: grid; grid-template-columns: 1fr; gap: 0 14px; }
@media (min-width: 640px) { .grid2 { grid-template-columns: 1fr 1fr; } }
label.check { display: flex; align-items: center; gap: 12px; min-height: 48px; padding: 6px 2px; font-weight: 600; }
label.check input { width: 22px; height: 22px; accent-color: var(--blue); cursor: pointer; flex: 0 0 auto; }
.picker {
    width: 100%; min-height: 52px; display: flex; align-items: center; gap: 10px; text-align: left;
    padding: 8px 12px; border: 1px solid #cdd6e0; border-radius: 10px; background: #fff;
}
.picker .val { flex: 1; min-width: 0; }
.picker .val .path { display: block; font-size: .78rem; color: var(--ink-3); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.picker .val .main { display: block; font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.picker .val .none { color: var(--ink-3); }

/* ------------------------------------------------------------------ chips */
.chips { display: flex; flex-wrap: wrap; gap: 8px; }
.chip {
    display: inline-flex; align-items: center; gap: 8px; min-height: 44px; padding: 0 6px 0 12px;
    background: var(--blue-soft); color: #134a7c; border: 1px solid #c6dcf1; border-radius: 999px; font-weight: 600; font-size: .92rem;
}
.chip button { border: 0; background: transparent; width: 32px; height: 32px; border-radius: 50%; color: inherit; display: grid; place-items: center; }
.chip button:hover { background: rgba(19, 74, 124, .12); }
.chip.new { background: var(--amber-soft); border-color: #ecd3a6; color: #6b4a0c; }
.suggest { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 8px; }
.suggest button { min-height: 44px; padding: 0 12px; border-radius: 999px; border: 1px dashed #b9c6d4; background: #fff; font-size: .9rem; }
.suggest button:hover { border-color: var(--blue); color: var(--blue); }

/* ------------------------------------------------------------------ survey */
.hero-actions { display: grid; grid-template-columns: 1fr; gap: 10px; margin-bottom: 18px; }
@media (min-width: 640px) { .hero-actions { grid-template-columns: repeat(3, 1fr); } }
.hero-btn {
    display: flex; align-items: center; gap: 14px; min-height: 72px; padding: 12px 16px; text-align: left;
    border-radius: 14px; border: 1px solid var(--line); background: var(--card); box-shadow: var(--shadow);
}
.hero-btn i { width: 44px; height: 44px; border-radius: 12px; display: grid; place-items: center; font-size: 1.2rem; background: var(--blue-soft); color: var(--blue); flex: 0 0 auto; }
.hero-btn.primary { background: var(--blue); color: #fff; border-color: var(--blue); }
.hero-btn.primary i { background: rgba(255, 255, 255, .18); color: #fff; }
.hero-btn b { display: block; font-size: 1.02rem; }
.hero-btn span { display: block; font-size: .84rem; opacity: .8; }
.search { position: relative; }
.search i { position: absolute; left: 14px; top: 50%; transform: translateY(-50%); color: var(--ink-3); }
.search .input { padding-left: 40px; }

.list { background: var(--card); border: 1px solid var(--line); border-radius: var(--radius); overflow: hidden; }
.list-item {
    display: flex; align-items: center; gap: 12px; width: 100%; min-height: 60px; padding: 10px 14px;
    border: 0; border-bottom: 1px solid var(--line-2); background: transparent; text-align: left;
}
.list-item:last-child { border-bottom: 0; }
.list-item:hover { background: #f8fafc; }
.list-item .t { font-weight: 600; }
.list-item .s { font-size: .84rem; color: var(--ink-3); }
.list-item > .fa-chevron-right { color: #b5c0cc; }
.avatar {
    width: 40px; height: 40px; border-radius: 50%; flex: 0 0 auto; display: grid; place-items: center;
    font-weight: 700; font-size: .9rem; color: #134a7c; background: var(--blue-soft);
}
.badge { display: inline-flex; align-items: center; gap: 4px; padding: 2px 8px; border-radius: 999px; font-size: .74rem; font-weight: 700; background: var(--line-2); color: var(--ink-2); white-space: nowrap; }
.badge.blue { background: var(--blue-soft); color: #134a7c; }
.badge.teal { background: var(--teal-soft); color: #0b5e4e; }
.badge.amber { background: var(--amber-soft); color: #6b4a0c; }
.badge.red { background: var(--red-soft); color: var(--red); }

.editor { max-width: 760px; margin: 0 auto; }
.editor .card { margin-bottom: 14px; }
.editor .card-title { display: flex; align-items: center; gap: 10px; font-weight: 700; font-size: 1.02rem; margin-bottom: 14px; }
.editor .card-title i { color: var(--blue); width: 22px; text-align: center; }
.savebar {
    position: fixed; left: 0; right: 0; z-index: 25;
    bottom: calc(var(--nav-h) + env(safe-area-inset-bottom));
    background: rgba(255, 255, 255, .96); border-top: 1px solid var(--line);
    padding: 10px 12px; display: flex; gap: 10px; justify-content: center;
    backdrop-filter: blur(6px);
}
.savebar .inner { width: 100%; max-width: 760px; display: flex; gap: 10px; }
.savebar .btn { flex: 1; }
.savebar .btn.primary { flex: 2; }
@media (min-width: 900px) { .savebar { bottom: 0; } }

.asset-list { display: grid; gap: 8px; }
.asset {
    display: flex; align-items: center; gap: 12px; padding: 10px 12px; min-height: 60px;
    border: 1px solid var(--line); border-radius: 10px; background: #fbfcfe; text-align: left; width: 100%;
}
.asset:hover { border-color: #c4cfdb; }
.asset .ic { width: 40px; height: 40px; border-radius: 10px; display: grid; place-items: center; background: var(--teal-soft); color: var(--teal); flex: 0 0 auto; font-size: 1.1rem; }
.asset .t { font-weight: 600; }
.asset .s { font-size: .82rem; color: var(--ink-3); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.type-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; }
@media (min-width: 560px) { .type-grid { grid-template-columns: repeat(4, 1fr); } }
.type-btn {
    min-height: 84px; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 6px;
    padding: 8px 4px; border: 1px solid var(--line); border-radius: 12px; background: #fff; font-size: .8rem; font-weight: 600; text-align: center; line-height: 1.15;
}
.type-btn i { font-size: 1.35rem; color: var(--teal); }
.type-btn:hover { border-color: var(--teal); }
.type-btn.sel { border-color: var(--teal); background: var(--teal-soft); box-shadow: inset 0 0 0 1px var(--teal); }
.with-btn { display: flex; gap: 8px; }
.with-btn .input { flex: 1; min-width: 0; }

/* ------------------------------------------------------------------ dashboard */
.kpis { display: grid; grid-template-columns: repeat(2, 1fr); gap: 10px; margin-bottom: 16px; }
@media (min-width: 640px) { .kpis { grid-template-columns: repeat(5, 1fr); } }
@media (min-width: 1200px) { .kpis { grid-template-columns: repeat(10, 1fr); } }
.kpi { background: var(--card); border: 1px solid var(--line); border-radius: var(--radius); padding: 12px 14px; box-shadow: var(--shadow); transition: background .6s; min-width: 0; }
.kpi .k { display: flex; align-items: flex-start; gap: 7px; font-size: .78rem; font-weight: 600; color: var(--ink-2); line-height: 1.25; min-height: 2.5em; }
.kpi .k i { margin-top: 2px; }
.kpi .k i { color: var(--blue); }
.kpi .v { font-size: 1.6rem; font-weight: 700; line-height: 1.1; margin-top: 4px; font-variant-numeric: tabular-nums; }
.kpi.bump { background: #fff7e0; }

/* minmax(0, 1fr), not a bare 1fr (DEF-06 follow-up): a bare 1fr still lets the single mobile column
   grow to the min-content width of whatever is inside it - one office or person card with a long
   unbroken token (a hostname, a pasted note with no spaces) silently pushed the whole dashboard
   wider than the phone and put the page itself in horizontal scroll, defeating every ellipsis
   inside it that was relying on the column actually stopping at the viewport edge. */
.dash { display: grid; grid-template-columns: minmax(0, 1fr); gap: 16px; align-items: start; }
@media (min-width: 1100px) { .dash { grid-template-columns: 340px minmax(0, 1fr) 300px; } }
@media (min-width: 900px) and (max-width: 1099px) { .dash { grid-template-columns: 300px minmax(0, 1fr); } .dash .feed-col { grid-column: 1 / -1; } }
.tree-col .card, .feed-col .card { overflow: hidden; }
@media (min-width: 900px) { .tree-col { position: sticky; top: calc(var(--bar-h) + 16px); } .tree-col .tree { max-height: calc(100vh - var(--bar-h) - 150px); overflow: auto; } }
.panel-head { display: flex; align-items: center; gap: 8px; padding: 12px 14px; border-bottom: 1px solid var(--line-2); font-weight: 700; flex-wrap: wrap; }
.panel-head .btn { min-height: 36px; padding: 0 10px; font-size: .85rem; }
@media (max-width: 899px) { .panel-head .btn { min-height: 44px; } }
.tree { padding: 6px; }
.tree ul { list-style: none; margin: 0; padding: 0 0 0 14px; }
.tree > ul { padding-left: 0; }
.tree-row {
    display: flex; align-items: center; gap: 6px; width: 100%; min-height: 44px; padding: 4px 8px 4px 2px;
    border: 0; background: transparent; border-radius: 8px; text-align: left;
}
.tree-row:hover { background: #f1f5f9; }
.tree-row.sel { background: var(--blue-soft); }
.tree-row .tog { width: 28px; height: 28px; border-radius: 6px; display: grid; place-items: center; color: var(--ink-3); flex: 0 0 auto; }
.tree-row .tog:hover { background: rgba(13, 31, 48, .08); }
.tree-row .sw { width: 10px; height: 10px; border-radius: 3px; flex: 0 0 auto; }
.tree-row .nm { flex: 1; min-width: 0; font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.tree-row .cnt { font-size: .74rem; color: var(--ink-3); white-space: nowrap; font-variant-numeric: tabular-nums; }
.tree-row.flash, .flash { animation: flash 2.4s ease-out; }
@keyframes flash { 0% { background: #ffe9a8; } 100% { background: transparent; } }

.dept-head { display: flex; gap: 12px; align-items: flex-start; flex-wrap: wrap; }
.dept-head .crumbs { font-size: .82rem; color: var(--ink-3); display: flex; flex-wrap: wrap; gap: 4px; }
.dept-head .crumbs button { border: 0; background: none; padding: 4px 2px; color: var(--blue); font-size: .82rem; }
.dept-head h2 { margin: 2px 0 4px; font-size: 1.3rem; }
.seg { display: inline-flex; border: 1px solid var(--line); border-radius: 10px; overflow: hidden; background: #fff; }
.seg button { border: 0; background: transparent; min-height: 44px; padding: 0 12px; font-weight: 600; font-size: .86rem; color: var(--ink-2); }
.seg button.on { background: var(--navy); color: #fff; }
.stat-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 8px; margin: 14px 0; }
@media (min-width: 640px) { .stat-grid { grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); } }
.stat { border: 1px solid var(--line-2); background: #fafcfe; border-radius: 10px; padding: 10px 12px; min-width: 0; }
.stat .k { font-size: .76rem; color: var(--ink-2); font-weight: 600; display: flex; gap: 6px; align-items: flex-start; line-height: 1.25; min-height: 2.5em; }
.stat .k i { margin-top: 2px; }
.stat .k i { color: var(--teal); }
.stat .v { font-size: 1.35rem; font-weight: 700; font-variant-numeric: tabular-nums; }
.bars { display: grid; gap: 6px; }
.bar { display: grid; grid-template-columns: minmax(110px, 180px) 1fr 40px; gap: 10px; align-items: center; font-size: .86rem; }
.bar .track { display: block; height: 10px; border-radius: 6px; background: var(--line-2); overflow: hidden; }
.bar .fill { display: block; height: 100%; background: linear-gradient(90deg, var(--teal), #3aa98f); border-radius: 6px; }
.bar .n { text-align: right; font-variant-numeric: tabular-nums; font-weight: 600; }
.subdepts { display: flex; flex-wrap: wrap; gap: 8px; }
.subdepts button { min-height: 44px; border: 1px solid var(--line); background: #fff; border-radius: 10px; padding: 0 12px; font-weight: 600; font-size: .88rem; display: inline-flex; gap: 8px; align-items: center; }
.subdepts button:hover { border-color: var(--blue); }
.offices { display: grid; grid-template-columns: 1fr; gap: 12px; }
@media (min-width: 1300px) { .offices { grid-template-columns: 1fr 1fr; } }
.office { border: 1px solid var(--line); border-radius: 12px; background: #fff; overflow: hidden; }
.office-head { display: flex; align-items: center; gap: 10px; padding: 10px 12px; background: #f7f9fc; border-bottom: 1px solid var(--line-2); }
.office-head .t { font-weight: 700; }
.office-head .s { font-size: .8rem; color: var(--ink-3); }
.person {
    display: flex; gap: 10px; align-items: flex-start; padding: 10px 12px; border-bottom: 1px solid var(--line-2); width: 100%;
    border-left: 0; border-right: 0; border-top: 0; background: transparent; text-align: left;
}
.person:last-child { border-bottom: 0; }
.person:hover { background: #fafcff; }
.person .t { font-weight: 600; display: flex; gap: 6px; align-items: center; flex-wrap: wrap; }
.person .s { font-size: .82rem; color: var(--ink-2); }
.person .hw { display: flex; flex-wrap: wrap; gap: 4px; margin-top: 4px; }
.hw-tag { display: inline-flex; gap: 5px; align-items: center; font-size: .74rem; padding: 2px 7px; border-radius: 6px; background: var(--teal-soft); color: #0b5e4e; font-weight: 600; }
.hw-tag.shared { background: var(--amber-soft); color: #6b4a0c; }
.feed { max-height: 70vh; overflow: auto; }
.feed-item { padding: 10px 14px; border-bottom: 1px solid var(--line-2); font-size: .88rem; }
.feed-item:last-child { border-bottom: 0; }
.feed-item .when { font-size: .76rem; color: var(--ink-3); display: flex; gap: 6px; }
.feed-item.fresh { animation: flash 3s ease-out; }
.sound-hint { background: var(--amber-soft); border: 1px solid #ecd3a6; color: #6b4a0c; border-radius: 10px; padding: 10px 12px; margin-bottom: 12px; display: flex; gap: 10px; align-items: center; font-size: .9rem; }
.dash-search { margin-bottom: 12px; }
.results { margin-top: 8px; }
.tree-toggle { display: none; }
@media (max-width: 899px) {
    .tree-toggle { display: inline-flex; }
    .tree-col.collapsed .tree { display: none; }
}

/* ------------------------------------------------------------------ tables (users), cards on a phone */
.table { width: 100%; border-collapse: collapse; }
.table th { text-align: left; font-size: .78rem; text-transform: uppercase; letter-spacing: .05em; color: var(--ink-3); padding: 10px 12px; border-bottom: 1px solid var(--line); }
.table td { padding: 10px 12px; border-bottom: 1px solid var(--line-2); vertical-align: middle; }
.table tr:last-child td { border-bottom: 0; }
@media (max-width: 1023px) {
    .table thead { display: none; }
    .table, .table tbody, .table tr, .table td { display: block; width: 100%; }
    .table tr { padding: 10px 12px; border-bottom: 1px solid var(--line-2); }
    .table td { border: 0; padding: 3px 0; }
    .table td[data-k]::before { content: attr(data-k) ": "; color: var(--ink-3); font-size: .82rem; }
}

/* ------------------------------------------------------------------ modal, toast */
.modal-wrap { position: fixed; inset: 0; z-index: 60; background: rgba(13, 31, 48, .45); display: flex; align-items: flex-end; justify-content: center; }
.modal {
    width: 100%; max-height: 100%; background: #fff; display: flex; flex-direction: column;
    border-radius: 16px 16px 0 0; box-shadow: 0 20px 60px rgba(0, 0, 0, .25);
}
.modal.full { height: 100%; border-radius: 0; }
@media (max-width: 639px) { .modal { height: 100%; border-radius: 0; } }
@media (min-width: 640px) { .modal-wrap { align-items: center; padding: 24px; } .modal { max-width: 560px; border-radius: 16px; max-height: calc(100vh - 48px); } .modal.wide { max-width: 760px; } .modal.full { height: auto; border-radius: 16px; } }
.modal-head { display: flex; align-items: center; gap: 8px; padding: 10px 10px 10px 18px; border-bottom: 1px solid var(--line-2); }
.modal-head h3 { margin: 0; font-size: 1.08rem; flex: 1; min-width: 0; }
.modal-body { padding: 16px 18px; overflow: auto; flex: 1; }
.modal-foot { display: flex; gap: 10px; justify-content: flex-end; padding: 12px 18px calc(12px + env(safe-area-inset-bottom)); border-top: 1px solid var(--line-2); flex-wrap: wrap; }
@media (max-width: 639px) { .modal-foot .btn { flex: 1; } }
.toasts { position: fixed; z-index: 80; left: 12px; right: 12px; bottom: calc(var(--nav-h) + 12px + env(safe-area-inset-bottom)); display: flex; flex-direction: column; gap: 8px; align-items: center; pointer-events: none; }
@media (min-width: 900px) { .toasts { left: auto; right: 20px; bottom: 20px; align-items: flex-end; } }
.toast { pointer-events: auto; max-width: 440px; width: 100%; background: var(--navy); color: #fff; padding: 12px 14px; border-radius: 12px; box-shadow: 0 10px 30px rgba(0, 0, 0, .25); display: flex; gap: 10px; align-items: flex-start; font-size: .92rem; animation: toast-in .25s ease-out; }
.toast.ok i { color: #6ee7b7; }
.toast.err { background: #7a1a12; }
.toast.live-ev { background: #0f3b5f; }
.toast.live-ev i { color: #fcd34d; }
@keyframes toast-in { from { transform: translateY(12px); opacity: 0; } to { transform: none; opacity: 1; } }
.alert { border-radius: 10px; padding: 10px 12px; font-size: .9rem; margin-bottom: 12px; }
.alert.err { background: var(--red-soft); color: var(--red); border: 1px solid #f2b8b2; }
.alert.info { background: var(--blue-soft); color: #134a7c; border: 1px solid #c6dcf1; }
.alert.warn { background: var(--amber-soft); color: #6b4a0c; border: 1px solid #ecd3a6; }
.secret { font-family: Consolas, "SF Mono", Menlo, monospace; font-size: 1.15rem; letter-spacing: .04em; background: var(--line-2); padding: 10px 12px; border-radius: 8px; word-break: break-all; }

/* ------------------------------------------------------------------ login */
.login-wrap { min-height: 100vh; display: grid; place-items: center; padding: 20px 16px; background: radial-gradient(1200px 600px at 20% -10%, #1d3f5f 0, var(--navy) 60%); }
.login { width: 100%; max-width: 400px; background: #fff; border-radius: 18px; padding: 26px 22px; box-shadow: 0 30px 80px rgba(0, 0, 0, .35); }
.login .brand { color: var(--ink); margin-bottom: 4px; font-size: 1.15rem; }
.login .brand .mark { color: #fff; }
.login p.lead { color: var(--ink-2); margin: 4px 0 20px; font-size: .92rem; }
/* Password show/hide buttons come from KiPasswordReveal (js/ki-password-reveal.js), which injects
   its own scoped CSS: no .pwd rules needed here any more (ARCH-2.11). */

/* ------------------------------------------------------------------ structure page */
.struct-tree ul { list-style: none; margin: 0; padding: 0 0 0 18px; border-left: 1px dashed #d4dce5; }
.struct-tree > ul { padding-left: 0; border-left: 0; }
.struct-node { margin: 6px 0; }
.struct-row { display: flex; align-items: center; gap: 8px; padding: 6px 8px; border-radius: 10px; background: #fff; border: 1px solid var(--line); flex-wrap: wrap; }
.struct-row .nm { font-weight: 700; flex: 1; min-width: 140px; }
.struct-row .acts { display: flex; gap: 4px; flex-wrap: wrap; }
.struct-row .acts .btn { min-height: 44px; padding: 0 10px; font-size: .84rem; }
.struct-offices { padding: 4px 0 2px 12px; display: flex; flex-direction: column; gap: 4px; }
.struct-office { display: flex; align-items: center; gap: 6px; padding: 4px 8px; font-size: .9rem; border-radius: 8px; }
.struct-office:hover { background: #f4f7fa; }
.struct-office .nm { flex: 1; min-width: 0; }
.tabs { display: flex; gap: 6px; margin-bottom: 14px; overflow-x: auto; }
.tabs button { min-height: 44px; padding: 0 14px; border-radius: 10px; border: 1px solid var(--line); background: #fff; font-weight: 600; white-space: nowrap; }
.tabs button.on { background: var(--navy); color: #fff; border-color: var(--navy); }

.scan-video { width: 100%; border-radius: 10px; background: #000; aspect-ratio: 4 / 3; object-fit: cover; }
.feed-item a { text-decoration: none; }
.feed-item a:hover { text-decoration: underline; }
@media (max-width: 639px) {
    .kpis { grid-template-columns: repeat(3, 1fr); gap: 8px; }
    .kpi { padding: 9px 10px; }
    .kpi .k { font-size: .72rem; }
    .kpi .v { font-size: 1.3rem; }
    .stat-grid { grid-template-columns: repeat(3, 1fr); }
    .stat { padding: 8px 9px; }
    .stat .v { font-size: 1.15rem; }
    /* DEF-07: a deep chart (up to 8 levels) must not push the structure page wider than the phone;
       less indentation per level than the desktop's 18px, and the row's name wraps instead of
       holding a wide minimum width. */
    .struct-tree ul { padding-left: 10px; }
    .struct-row .nm { min-width: 0; }
}
.tree-legend { padding: 4px 10px 8px; }

/* Export: the format as three option cards, one column on a phone. */
.fmt-grid { display: grid; gap: 10px; }
@media (min-width: 640px) { .fmt-grid { grid-template-columns: repeat(3, 1fr); } }
.fmt-btn {
    display: flex; align-items: flex-start; gap: 12px; min-height: 64px; padding: 12px 14px; text-align: left;
    border: 1px solid var(--line); border-radius: 12px; background: #fff; color: inherit;
}
@media (min-width: 640px) { .fmt-btn { flex-direction: column; } }
.fmt-btn i { font-size: 1.5rem; color: var(--teal); width: 28px; flex: 0 0 auto; }
.fmt-btn b { display: block; font-size: 1rem; }
.fmt-btn span { display: block; font-size: .82rem; color: var(--ink-2); margin-top: 2px; line-height: 1.3; }
.fmt-btn:hover { border-color: var(--teal); }
.fmt-btn.sel { border-color: var(--teal); background: var(--teal-soft); box-shadow: inset 0 0 0 1px var(--teal); }
.fmt-btn:focus-visible { outline: 3px solid rgba(29, 111, 184, .35); outline-offset: 1px; }