/*
 * Precision Guard Books styles. Same colors and type as the CRM. Phone first; from 1024px the menu is a fixed sidebar.
 */
:root {
    --bg: #f5f2eb;
    --card: #fff;
    --ink: #1b1f1d;
    --muted: #6b6a63;
    --line: #e7e1d6;
    --field: #d9d1c3;
    --green: #1e3d34;
    --green-2: #2c5546;
    --green-soft: #e6efe9;
    --gold: #a6843f;
    --bad: #a33a2f;
    --bad-soft: #fbe5e2;
    --warn: #fff3dc;
    --ok-soft: #e3f1e7;
    --orange: #c06a2b;
    --orange-soft: #fbeadb;
    --head: #f3eee4;
    --serif: "Iowan Old Style", "Palatino Linotype", Palatino, Georgia, "Times New Roman", serif;
    --radius: 14px;
    --shadow: 0 1px 2px rgba(30, 40, 30, .04);
    --side: 248px;
}

* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
    margin: 0;
    font: 16px/1.45 -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
    color: var(--ink);
    background: var(--bg);
    -webkit-tap-highlight-color: transparent;
}
a { color: var(--green); }
[hidden] { display: none !important; }
:focus-visible { outline: 2px solid var(--gold); outline-offset: 2px; }
.ico { flex: none; display: inline-block; vertical-align: -3px; }
h1 { font: 600 1.9rem/1.15 var(--serif); margin: 0 0 .75rem; color: var(--ink); }
h2 { font: 600 1.15rem/1.25 var(--serif); margin: 0 0 .6rem; }
h3 { font-size: 1rem; margin: .8rem 0 .4rem; }
code { font-size: .92em; background: var(--green-soft); padding: .05rem .3rem; border-radius: 6px; }

label { display: block; font-size: .85rem; font-weight: 600; color: #3b3a35; }
input, select, textarea {
    display: block;
    width: 100%;
    min-height: 42px;
    margin-top: .25rem;
    font: inherit;
    font-weight: 400;
    padding: .5rem .7rem;
    border: 1px solid var(--field);
    border-radius: 10px;
    background: #fff;
    color: inherit;
}
input:focus, select:focus, textarea:focus { outline: none; border-color: var(--green); box-shadow: 0 0 0 3px rgba(30, 61, 52, .14); }
input[type="checkbox"], input[type="radio"] { display: inline-block; width: auto; min-height: 0; margin: 0 .35rem 0 0; accent-color: var(--green); }
input[type="date"] { -webkit-appearance: none; appearance: none; min-width: 0; }
label.check { display: flex; align-items: center; font-weight: 500; }

.btn {
    display: inline-flex;
    align-items: center;
    gap: .35rem;
    min-height: 42px;
    padding: .5rem 1rem;
    border: 1px solid var(--field);
    border-radius: 10px;
    background: #fff;
    color: var(--green);
    font: inherit;
    font-weight: 700;
    text-decoration: none;
    cursor: pointer;
}
.btn.primary { background: var(--green); border-color: var(--green); color: #fff; }
.btn.small { min-height: 34px; padding: .3rem .7rem; font-size: .88rem; }
.btn:disabled { opacity: .6; cursor: default; }
.link { background: none; border: 0; padding: 0; color: var(--green); font: inherit; text-decoration: underline; cursor: pointer; }
.icon-btn { background: none; border: 0; color: inherit; padding: .4rem; cursor: pointer; }

/* Shell */
.topbar { position: sticky; top: 0; z-index: 20; display: flex; align-items: center; gap: .5rem; padding: .5rem .75rem; padding-top: max(.5rem, env(safe-area-inset-top)); background: var(--green); color: #fff; }
.side { position: fixed; z-index: 30; top: 0; bottom: 0; left: 0; width: var(--side); overflow-y: auto; background: var(--green); color: #fff; transform: translateX(-100%); transition: transform .2s; display: flex; flex-direction: column; }
.menu-open .side { transform: none; box-shadow: 0 0 0 100vmax rgba(0, 0, 0, .35); }
.side .brand { display: block; padding: 1.4rem 1.25rem 1rem; color: #fff; text-decoration: none; }
.side .brand img, .brand-plate img { display: block; width: 100%; max-width: 190px; height: auto; }
.brand-text { display: block; font: 600 1.25rem/1.1 var(--serif); }
.brand-text small { display: block; font-size: .72rem; letter-spacing: .32em; text-transform: uppercase; opacity: .85; margin-top: .25rem; }
.side ul { list-style: none; margin: 0; padding: 0 .75rem; flex: 1; }
.side .group { padding: 1.1rem .6rem .35rem; font-size: .7rem; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: rgba(255, 255, 255, .55); }
.side .group.spacer { padding: .5rem 0 0; margin-bottom: .5rem; border-bottom: 1px solid rgba(255, 255, 255, .12); }
.side a { display: flex; align-items: center; gap: .65rem; padding: .55rem .65rem; border-radius: 9px; color: #dfe9e3; text-decoration: none; font-size: .95rem; }
.side a:hover { background: rgba(255, 255, 255, .07); color: #fff; }
.side a.on { background: var(--green-2); color: #fff; font-weight: 600; box-shadow: inset 3px 0 0 var(--orange); }
.side .who { display: flex; align-items: center; gap: .6rem; padding: .9rem 1rem; border-top: 1px solid rgba(255, 255, 255, .12); font-size: .92rem; }
.side .who > span:nth-child(2) { flex: 1; min-width: 0; }
.side .who small { display: block; opacity: .7; }
.side .who form { margin: 0; }
.avatar { flex: none; display: inline-grid; place-items: center; width: 36px; height: 36px; border-radius: 50%; background: var(--orange); color: #fff; font-weight: 700; font-size: .85rem; }
main { max-width: 1180px; margin: 0 auto; padding: 1rem .75rem 3rem; }
main.bare { max-width: 28rem; padding-top: 2.5rem; }
.brand-plate { background: var(--green); border-radius: var(--radius); padding: 1.4rem 1.5rem; margin-bottom: 1rem; color: #fff; }
.page-head { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: .75rem; margin-bottom: 1.1rem; }
.page-head h1 { display: none; margin: 0; }
.page-head .sub { margin: .25rem 0 0; color: var(--muted); }
@media (min-width: 1024px) {
    .topbar { display: none; }
    .side { transform: none; }
    .menu-open .side { box-shadow: none; }
    body:has(.side) main { margin-left: var(--side); max-width: calc(1180px + var(--side)); padding: 2rem 2.25rem 3rem; }
    .page-head h1 { display: block; }
}
@media (max-width: 1023px) {
    .page-head .sub { margin: 0; }
}

/* Building blocks */
.card { background: var(--card); border: 1px solid var(--line); border-radius: var(--radius); box-shadow: var(--shadow); padding: 1.1rem 1.25rem; margin-bottom: 1rem; }
.card.narrow, .narrow { max-width: 32rem; }
.banner { border-radius: 12px; padding: .7rem .9rem; margin-bottom: 1rem; background: var(--green-soft); }
.banner.ok { background: var(--ok-soft); }
.banner.error { background: var(--bad-soft); color: var(--bad); }
.banner.warn { background: var(--warn); }
.muted { color: var(--muted); }
.small, small { font-size: .85rem; }
.neg { color: var(--bad); }
.pos { color: var(--green); }
.off { opacity: .55; }
.pill { display: inline-block; padding: .1rem .6rem; border-radius: 999px; background: var(--green-soft); color: var(--green); font-size: .78rem; font-weight: 700; white-space: nowrap; }
.pill.warn { background: var(--orange-soft); color: var(--orange); }
.count { display: inline-block; min-width: 1.3rem; padding: 0 .35rem; border-radius: 999px; background: var(--bad); color: #fff; font-size: .75rem; text-align: center; }
.in { color: var(--green); font-weight: 600; }
.out { color: var(--orange); font-weight: 600; }
.accent { color: var(--orange); }
.stack > * + * { margin-top: .75rem; }
ul.stack { list-style: none; padding: 0; }
.inline { display: inline; }
form.inline, .inline form { display: inline-block; margin: 0; }
.grid { display: grid; gap: .75rem; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); align-items: end; }
.grid.compact { grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); }
.grid .wide, label.wide { grid-column: 1 / -1; }
.actions { display: flex; flex-wrap: wrap; align-items: center; gap: .5rem; justify-content: space-between; margin-bottom: .5rem; }
.actions h2 { margin: 0; }
.grid > .actions { grid-column: 1 / -1; justify-content: flex-start; }
.filters { display: flex; flex-wrap: wrap; gap: .75rem; align-items: end; }
.filters label { min-width: 150px; }
.tabs { display: flex; gap: .25rem; overflow-x: auto; margin-bottom: 1rem; scrollbar-width: none; }
.tabs a { flex: none; padding: .45rem .8rem; border-radius: 999px; text-decoration: none; font-weight: 700; color: var(--green); background: #fff; border: 1px solid var(--line); }
.tabs a.on { background: var(--green); color: #fff; border-color: var(--green); }
.tabs.line { gap: 1.25rem; border-bottom: 1px solid var(--line); }
.tabs.line a { background: none; border: 0; border-radius: 0; padding: .55rem 0; color: var(--muted); border-bottom: 2px solid transparent; }
.tabs.line a.on { color: var(--green); border-bottom-color: var(--orange); }
.tabs.line .count { background: var(--head); color: var(--ink); }
.tabs.line a.on .count { background: var(--orange-soft); color: var(--orange); }
.tiles { display: grid; gap: .9rem; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); margin-bottom: 1rem; }
.tile { position: relative; background: var(--card); border: 1px solid var(--line); border-radius: var(--radius); box-shadow: var(--shadow); padding: 1rem 1.1rem 1rem 1.35rem; text-decoration: none; color: inherit; display: block; overflow: hidden; }
.tile::before { content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 4px; background: var(--orange); }
.tile small { color: var(--muted); font-weight: 600; }
.tile strong { display: block; font: 600 1.7rem/1.2 var(--serif); color: var(--ink); margin: .2rem 0; }
.tile strong.neg { color: var(--bad); }
.split { display: grid; gap: 0 1rem; }
@media (min-width: 900px) { .split { grid-template-columns: 1.15fr 1fr; } }
.attention, .glance { list-style: none; margin: 0; padding: 0; }
.attention li { display: flex; align-items: center; gap: .8rem; padding: .75rem 0; border-bottom: 1px solid var(--line); }
.attention li:last-child, .glance li:last-child { border-bottom: 0; }
.attention li > span:nth-child(2) { flex: 1; min-width: 0; }
.attention small { display: block; }
.attention .dot { flex: none; display: inline-grid; place-items: center; width: 38px; height: 38px; border-radius: 10px; background: var(--orange-soft); color: var(--orange); }
.attention li.bad .dot { background: var(--bad-soft); color: var(--bad); }
.glance li { display: flex; align-items: center; gap: .5rem; padding: .7rem 0; border-bottom: 1px solid var(--line); }
.glance li strong { margin-left: auto; font: 600 1.05rem var(--serif); }
.promo { display: flex; flex-wrap: wrap; gap: 1rem; align-items: center; justify-content: space-between; background: var(--green); border-color: var(--green); color: #e6efe9; }
.promo h2 { color: #fff; }
.promo p { margin: 0; max-width: 46rem; }
.acct-cards { display: grid; gap: .9rem; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); margin-bottom: 1rem; }
.acct-cards a { display: block; padding: 1rem 1.1rem; background: var(--card); border: 1px solid var(--line); border-radius: var(--radius); color: inherit; text-decoration: none; }
.acct-cards a.on { border-color: var(--green); box-shadow: inset 0 0 0 1px var(--green); }
.acct-cards small { display: block; color: var(--muted); font-weight: 600; }
.acct-cards strong { display: block; font: 600 1.5rem/1.2 var(--serif); margin: .2rem 0; }
.with-aside { display: grid; gap: 0 1rem; }
@media (min-width: 1100px) {
    .with-aside { grid-template-columns: minmax(0, 1fr) 250px; }
    .with-aside > aside { grid-column: 2; grid-row: 1; align-self: start; position: sticky; top: 1.5rem; }
}
.library h3 { margin: .4rem 0 .3rem; font-size: .7rem; letter-spacing: .12em; text-transform: uppercase; color: var(--muted); }
.library ul { list-style: none; margin: 0 0 .6rem; padding: 0; }
.library a { display: flex; align-items: center; gap: .5rem; padding: .45rem .55rem; border-radius: 8px; color: var(--ink); text-decoration: none; font-size: .94rem; }
.library a:hover { background: var(--head); }
.library a.on { background: var(--green-soft); color: var(--green); font-weight: 700; }
.summary { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1rem; margin-bottom: 1rem; padding: 1rem 1.25rem; background: var(--card); border: 1px solid var(--line); border-radius: var(--radius); }
.summary small { display: block; color: var(--muted); font-weight: 600; }
.summary strong { font: 600 1.5rem/1.2 var(--serif); }
.grow { flex: 1; min-width: 10rem; }
.row-actions { display: flex; flex-wrap: wrap; align-items: center; justify-content: flex-end; gap: .4rem; }
.row-actions details { position: relative; }
.row-actions details[open] form { position: absolute; right: 0; top: calc(100% + .3rem); z-index: 5; display: flex; gap: .4rem; width: 18rem; padding: .6rem; background: #fff; border: 1px solid var(--line); border-radius: 10px; box-shadow: 0 6px 20px rgba(0, 0, 0, .1); }
.row-actions details input { margin: 0; }
details > summary.btn { list-style: none; }
details > summary.btn::-webkit-details-marker { display: none; }
table.data td { vertical-align: middle; }
table.data td select { margin-top: 0; }
.install-box { display: grid; grid-template-columns: 52px 1fr; gap: .75rem 1rem; align-items: center; }
.install-box[hidden], .nav-install[hidden] { display: none; }
.install-box img { display: block; border-radius: 12px; }
.install-box strong { display: block; font: 600 1.05rem var(--serif); }
.install-box span { display: block; color: var(--muted); font-size: .9rem; }
.install-box .install-app { grid-column: 1 / -1; justify-content: center; width: 100%; background: var(--green); border-color: var(--green); color: #fff; }
.install-box .install-note, .install-box [data-install-later] { grid-column: 1 / -1; }
.install-box [data-install-later] { justify-self: center; color: var(--muted); }
.install-note { margin: 0; padding: .6rem .75rem; border-radius: 10px; background: var(--orange-soft); color: var(--ink); font-size: .9rem; }
.install-note .ico { vertical-align: -2px; }
.nav-install { padding: .5rem .75rem; }
.nav-install .install-app { width: 100%; justify-content: center; background: transparent; border-color: rgba(255, 255, 255, .3); color: #fff; }
.nav-install .install-note { margin-top: .5rem; }
.card.locked { border-color: var(--orange); background: #fffaf5; }
.todo { list-style: none; padding: 0; margin: 0; }
.todo li { padding: .5rem 0; border-bottom: 1px solid var(--line); }
.codes { columns: 2; font-family: ui-monospace, Consolas, monospace; font-size: 1.05rem; list-style: none; padding: 0; }
.qr { width: 220px; max-width: 100%; margin: .5rem 0; }
.qr svg { width: 100%; height: auto; display: block; }
code.key { display: inline-block; font: 600 1.05rem/1.5 ui-monospace, Consolas, "Courier New", monospace; letter-spacing: .06em; user-select: all; }

/* Tables */
.wide { overflow-x: auto; }
.card { overflow-x: auto; }
table.data { width: 100%; border-collapse: collapse; font-size: .94rem; }
table.data th, table.data td { padding: .45rem .5rem; border-bottom: 1px solid var(--line); text-align: left; vertical-align: top; }
table.data th, table.data td { padding: .6rem .6rem; }
table.data thead th { background: var(--head); font-size: .8rem; font-weight: 700; color: var(--muted); border-bottom-color: var(--line); }
table.data tr.total td, table.data tr.total th { font-weight: 700; border-top: 1px solid var(--field); }
table.data tfoot th, table.data tfoot td { font-weight: 800; background: var(--green-soft); color: var(--green); border-top: 2px solid var(--green); }
table.data tbody th { background: var(--green-soft); color: var(--green); font-weight: 700; }
table.data tbody tr:hover td { background: #fbf9f4; }
.num, table.data .num { text-align: right; white-space: nowrap; font-variant-numeric: tabular-nums; }
table.lines input, table.lines select { margin-top: 0; min-width: 7rem; }
.bank-line, .row { display: flex; flex-wrap: wrap; gap: .5rem 1rem; align-items: center; padding: .6rem 0; border-bottom: 1px solid var(--line); }
.match { background: var(--green-soft); border-radius: 10px; padding: .4rem .6rem; }

@media print {
    .topbar, .side, .tabs, .filters, .btn, form.inline, .library { display: none !important; }
    .with-aside { display: block; }
    body { background: #fff; }
    main, body:has(.side) main { margin: 0; max-width: none; padding: 0; }
    .card { box-shadow: none; padding: 0; }
}