/* CaseSurvey - collection of the specifications of a case-management module.
 * Mobile first (C12): every page works at 390 and 820 px, touch targets are at least 44 px.
 * Shell, fields, modals and toasts come from OrgSurvey; the catalogue has its own section. */

: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; }
.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); }

/* ------------------------------------------------------------------ lists, badges */
.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); }

/* ------------------------------------------------------------------ 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). */