@import 'Invoicing.Client.v24a8e0lj2.bundle.scp.css';

/* /Components/UserManual/Manual.razor.rz.scp.css */
.manual[b-kkpp5erdhg] {
    --ink: #1c2833;
    --muted: #5d6d7e;
    --brand: #1B4F72;
    --accent: #117A65;
    --line: #d5dbe1;
    --soft: #f4f7fa;
    color: var(--ink);
    background: #fff;
    font-family: Roboto, "Segoe UI", Arial, sans-serif;
    font-size: 15px;
    line-height: 1.6;
    max-width: 1180px;
    margin: 0 auto;
    padding: 24px 20px 48px;
}

/* ---------- header ---------- */
.top[b-kkpp5erdhg] {
    display: flex;
    align-items: center;
    gap: 18px;
    border-bottom: 3px solid var(--brand);
    padding-bottom: 14px;
    flex-wrap: wrap;
}
.logo[b-kkpp5erdhg] { height: 64px; width: auto; }
.title[b-kkpp5erdhg] { flex: 1; min-width: 220px; }
.title h1[b-kkpp5erdhg] { margin: 0; font-size: 28px; color: var(--brand); letter-spacing: .2px; }
.sub[b-kkpp5erdhg] { margin: 2px 0 0; color: var(--muted); }
.actions[b-kkpp5erdhg] { display: flex; gap: 8px; flex-wrap: wrap; }
.btn[b-kkpp5erdhg] {
    display: inline-block;
    padding: 7px 16px;
    border-radius: 6px;
    background: var(--brand);
    color: #fff;
    border: 1px solid var(--brand);
    text-decoration: none;
    font: inherit;
    font-size: 14px;
    cursor: pointer;
}
.btn.ghost[b-kkpp5erdhg] { background: #fff; color: var(--brand); }
.btn:hover[b-kkpp5erdhg] { filter: brightness(1.1); }

.status[b-kkpp5erdhg] {
    background: #fff8e6;
    border-left: 4px solid #e0a800;
    padding: 10px 14px;
    margin: 16px 0 8px;
    font-size: 14px;
}

/* ---------- two-column body ---------- */
.body[b-kkpp5erdhg] { display: grid; grid-template-columns: 250px 1fr; gap: 32px; margin-top: 18px; }
.toc[b-kkpp5erdhg] {
    position: sticky;
    top: 12px;
    align-self: start;
    background: var(--soft);
    border: 1px solid var(--line);
    border-radius: 8px;
    padding: 12px 14px;
    font-size: 13.5px;
    max-height: calc(100vh - 24px);
    overflow-y: auto;
}
.toc-title[b-kkpp5erdhg] { font-weight: 700; color: var(--brand); margin-bottom: 4px; }
.toc ol[b-kkpp5erdhg] { margin: 0; padding-left: 20px; }
.toc li[b-kkpp5erdhg] { margin: 3px 0; }
.toc a[b-kkpp5erdhg] { color: var(--ink); text-decoration: none; }
.toc a:hover[b-kkpp5erdhg] { color: var(--brand); text-decoration: underline; }

main[b-kkpp5erdhg] { min-width: 0; }
section[b-kkpp5erdhg] { padding-top: 6px; margin-bottom: 30px; scroll-margin-top: 12px; }
h2[b-kkpp5erdhg] {
    font-size: 22px;
    color: var(--brand);
    border-bottom: 1px solid var(--line);
    padding-bottom: 6px;
    margin: 10px 0 12px;
    display: flex;
    align-items: center;
    gap: 10px;
}
h2 .n[b-kkpp5erdhg] {
    display: inline-grid;
    place-items: center;
    width: 30px; height: 30px;
    border-radius: 50%;
    background: var(--brand);
    color: #fff;
    font-size: 15px;
    flex: 0 0 30px;
}
h3[b-kkpp5erdhg] { font-size: 17px; margin: 18px 0 8px; color: var(--ink); }
p[b-kkpp5erdhg] { margin: 8px 0; }
code[b-kkpp5erdhg] { background: var(--soft); padding: 1px 5px; border-radius: 4px; font-size: 13px; }

.where[b-kkpp5erdhg] {
    background: var(--soft);
    border: 1px solid var(--line);
    border-radius: 6px;
    padding: 6px 10px;
    font-size: 14px;
}
.note[b-kkpp5erdhg] {
    border-left: 4px solid var(--accent);
    background: #eef8f5;
    padding: 8px 12px;
    font-size: 14px;
}

/* ---------- tables ---------- */
.grid[b-kkpp5erdhg] { width: 100%; border-collapse: collapse; margin: 10px 0; font-size: 14px; }
.grid th[b-kkpp5erdhg], .grid td[b-kkpp5erdhg] { border: 1px solid var(--line); padding: 7px 10px; vertical-align: top; text-align: left; }
.grid thead th[b-kkpp5erdhg] { background: var(--brand); color: #fff; font-weight: 600; }
.grid tbody tr:nth-child(even) td[b-kkpp5erdhg] { background: #fafbfc; }
.grid td:first-child[b-kkpp5erdhg] { width: 30%; }
.fields td:first-child[b-kkpp5erdhg] { font-weight: 600; }

/* ---------- numbered steps ---------- */
.steps[b-kkpp5erdhg] { counter-reset: step; list-style: none; padding-left: 0; margin: 8px 0; }
.steps > li[b-kkpp5erdhg] {
    counter-increment: step;
    position: relative;
    padding: 4px 0 6px 40px;
}
.steps > li[b-kkpp5erdhg]::before {
    content: counter(step);
    position: absolute;
    left: 0; top: 4px;
    width: 26px; height: 26px;
    border-radius: 50%;
    border: 2px solid var(--accent);
    color: var(--accent);
    font-weight: 700;
    font-size: 13px;
    display: grid;
    place-items: center;
}
.checks > li[b-kkpp5erdhg] { margin: 6px 0; }

/* ---------- flow strip ---------- */
.flow[b-kkpp5erdhg] { display: flex; flex-wrap: wrap; gap: 0; margin: 12px 0; }
.flow > div[b-kkpp5erdhg] {
    flex: 1 1 130px;
    position: relative;
    background: var(--soft);
    border: 1px solid var(--line);
    padding: 10px 12px 10px 22px;
    font-size: 13.5px;
    color: var(--muted);
}
.flow > div b[b-kkpp5erdhg] { display: block; color: var(--brand); font-size: 15px; }
.flow > div + div[b-kkpp5erdhg] { border-left: none; }
.flow > div:not(:last-child)[b-kkpp5erdhg]::after {
    content: "›";
    position: absolute;
    right: -9px; top: 50%;
    transform: translateY(-50%);
    width: 18px; height: 18px;
    border-radius: 50%;
    background: var(--brand);
    color: #fff;
    font-size: 14px;
    line-height: 17px;
    text-align: center;
    z-index: 1;
}

/* ---------- FAQ ---------- */
.faq dt[b-kkpp5erdhg] { font-weight: 700; margin-top: 12px; }
.faq dd[b-kkpp5erdhg] { margin: 4px 0 0 0; color: var(--ink); }

.foot[b-kkpp5erdhg] {
    margin-top: 40px;
    border-top: 1px solid var(--line);
    padding-top: 10px;
    color: var(--muted);
    font-size: 13px;
}

/* ---------- phone ---------- */
@media (max-width: 820px) {
    .body[b-kkpp5erdhg] { grid-template-columns: 1fr; gap: 12px; }
    .toc[b-kkpp5erdhg] { position: static; max-height: none; }
    .grid td:first-child[b-kkpp5erdhg] { width: 38%; }
    .title h1[b-kkpp5erdhg] { font-size: 23px; }
}

/* ---------- print / save as PDF ---------- */
@media print {
    .no-print[b-kkpp5erdhg] { display: none !important; }
    .manual[b-kkpp5erdhg] { max-width: none; padding: 0; font-size: 11pt; }
    .body[b-kkpp5erdhg] { display: block; }
    section[b-kkpp5erdhg] { break-inside: auto; }
    h2[b-kkpp5erdhg] { break-after: avoid; }
    .grid tr[b-kkpp5erdhg], .steps > li[b-kkpp5erdhg] { break-inside: avoid; }
    .grid thead th[b-kkpp5erdhg], h2 .n[b-kkpp5erdhg], .steps > li[b-kkpp5erdhg]::before, .flow > div:not(:last-child)[b-kkpp5erdhg]::after {
        -webkit-print-color-adjust: exact; print-color-adjust: exact;
    }
}