:root {
    --paper: #f3efe7;
    --ink: #1c1915;
    --muted: #5e584f;
    --line: #e3dbd0;
    --card: #fffcf7;
    --sidebar: #1b2422;
    --sidebar-text: #e7e1d6;
    --accent: #9a4318;
    --accent-ink: #fff8f3;
    --ok: #1d6b45;
    --warn: #8a4b12;
    --danger: #8d2f2f;
    --bar: #1f6f66;
    --shadow: none;
    --font: "SF Pro Text", "SF Pro Display", -apple-system, BlinkMacSystemFont, "Helvetica Neue", Helvetica, Arial, sans-serif;
    --font-display: "SF Pro Display", "SF Pro Text", -apple-system, BlinkMacSystemFont, "Helvetica Neue", Helvetica, Arial, sans-serif;
    font-family: var(--font);
    color: var(--ink);
    background: var(--paper);
}

* { box-sizing: border-box; }
body {
    margin: 0;
    font-family: var(--font);
    font-weight: 400;
    letter-spacing: -0.022em;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}
h1, h2, .brand { font-family: var(--font-display); font-weight: 600; letter-spacing: -0.021em; }
h1 { font-size: 2rem; margin: 0; }
h2 { font-size: 1.15rem; margin: 0 0 0.4rem; }
a { color: var(--accent); }
button, .button, .primary {
    font: inherit;
    border: 1px solid var(--ink);
    background: transparent;
    color: var(--ink);
    padding: 0.45rem 0.8rem;
    border-radius: 4px;
    text-decoration: none;
    cursor: pointer;
}
.primary, a.primary {
    background: var(--accent);
    border-color: var(--accent);
    color: var(--accent-ink);
}
button:hover, .button:hover { background: #fff; }
.primary:hover { background: #7d3614; }
button.danger, .danger {
    border-color: var(--danger);
    color: var(--danger);
}
button.danger:hover, .danger:hover { background: #f8eaea; }
.note.filter-active { color: var(--ink); }

.app { display: grid; grid-template-columns: 240px minmax(0, 1fr); min-height: 100vh; }
.sidebar {
    background: var(--sidebar);
    color: var(--sidebar-text);
    padding: 1.4rem 1rem 1rem;
    display: flex;
    flex-direction: column;
    gap: 1rem;
}
.brand { color: white; text-decoration: none; font-size: 1.45rem; }
.brand-note { margin: -0.6rem 0 0; color: #b7c2bc; font-size: 0.85rem; }
.sidebar nav { display: flex; flex-direction: column; gap: 0.2rem; }
.sidebar nav a {
    color: var(--sidebar-text);
    text-decoration: none;
    padding: 0.45rem 0.6rem;
    border-radius: 4px;
}
.sidebar nav a.active, .sidebar nav a:hover { background: #2a3834; }
.sidebar-foot { margin-top: auto; display: flex; flex-direction: column; gap: 0.35rem; font-size: 0.92rem; }
.sidebar-foot button { color: var(--sidebar-text); border-color: #41504c; background: transparent; text-align: left; }
.sidebar-foot a { color: #d5c4ae; }

main { padding: 1.6rem 1.8rem 3rem; max-width: 1180px; min-width: 0; }
.page-head { display: flex; justify-content: space-between; align-items: flex-end; gap: 1rem; margin-bottom: 1rem; }
.eyebrow { margin: 0 0 0.2rem; text-transform: uppercase; letter-spacing: 0.08em; font-size: 0.75rem; color: var(--muted); }
.note, .hint, .quiet { color: var(--muted); font-size: 0.92rem; }
.flash { padding: 0.7rem 0.9rem; border: 1px solid var(--line); background: #fff; }
.flash.ok { border-color: var(--ok); }
.flash.bad { border-color: var(--danger); }
.pay-banner {
    margin: 0 0 1.1rem;
    padding: 1rem 1.1rem;
    border: 2px solid var(--danger);
    border-left-width: 8px;
    border-radius: 6px;
    background: #fceceb;
    color: #5c1515;
    box-shadow: 0 0 0 1px rgba(141, 47, 47, 0.12);
}
.pay-banner-label {
    margin: 0 0 0.35rem;
    font-size: 0.78rem;
    font-weight: 700;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--danger);
}
.pay-banner-text {
    margin: 0;
    font-size: 1.08rem;
    font-weight: 600;
    line-height: 1.45;
    color: #7a1f1f;
}
.total-due { margin-top: 1.2rem; }
.total-due strong { font-size: 1.6rem; }
.balance-card strong { display: block; font-size: 2rem; margin: 0.25rem 0; font-variant-numeric: tabular-nums; }
.balance-ok { color: var(--ink); }
.balance-negative { color: var(--danger) !important; font-weight: 700; }
.balance-chip {
    display: inline-block;
    color: #d5c4ae;
    text-decoration: none;
    font-variant-numeric: tabular-nums;
    font-weight: 600;
}
.balance-chip.balance-negative { color: #f0a0a0; }
.sidebar-foot .balance-chip { margin: 0.15rem 0; }

.stats { display: grid; grid-template-columns: repeat(4, 1fr); gap: 0.8rem; margin: 1rem 0; }
.stats article, .card {
    background: var(--card);
    border: 1px solid var(--line);
    border-radius: 8px;
    padding: 0.9rem 1rem;
}
.stats p { margin: 0; color: var(--muted); font-size: 0.85rem; }
.stats strong { display: block; font-size: 1.45rem; margin-top: 0.2rem; font-variant-numeric: tabular-nums; }
.stats span { color: var(--muted); font-size: 0.85rem; }
.split { display: grid; grid-template-columns: 1fr 1fr; gap: 0.8rem; margin: 1rem 0; }
dl { display: grid; grid-template-columns: 1fr 1fr; gap: 0.45rem 1rem; margin: 0.6rem 0 0; }
dl div { display: flex; justify-content: space-between; gap: 0.5rem; border-bottom: 1px solid var(--line); padding-bottom: 0.25rem; }
dt { color: var(--muted); }
dd { margin: 0; font-variant-numeric: tabular-nums; }
.did-strip { margin: 1rem 0; }

.filters, .form-grid, .inline { display: flex; flex-wrap: wrap; gap: 0.7rem; align-items: end; }
.filters label, .form-grid label, .card label { display: flex; flex-direction: column; gap: 0.25rem; font-size: 0.88rem; color: var(--muted); }
input, select, textarea {
    font: inherit;
    color: var(--ink);
    background: white;
    border: 1px solid #cfc6ba;
    border-radius: 4px;
    padding: 0.45rem 0.55rem;
    min-width: 0;
    max-width: 100%;
}
input[type="date"],
.filters input[name="activated_from"],
.filters input[name="activated_to"] {
    width: 11.5rem;
    min-width: 11.5rem;
    flex: 0 0 auto;
    font-variant-numeric: tabular-nums;
}
textarea { width: 100%; }
.form-grid { display: grid; grid-template-columns: 1fr 1fr; }
form.card { margin: 1rem 0; }
details.card { margin-top: 1rem; }
details.card summary { cursor: pointer; font-weight: 600; }
details.card form { margin-top: 0.8rem; }
code { font-family: ui-monospace, "SF Mono", Menlo, Consolas, monospace; font-size: 0.86rem; }
.form-grid .wide, .form-grid fieldset, .form-grid .form-actions, .form-grid .note { grid-column: 1 / -1; }
fieldset { border: 1px solid var(--line); border-radius: 8px; margin: 0; }
legend { padding: 0 0.3rem; }
.three { display: grid; grid-template-columns: repeat(3, 1fr); gap: 0.7rem; }
.form-actions { display: flex; gap: 0.8rem; align-items: center; }
.stack { display: flex; flex-direction: column; gap: 0.8rem; }
.inline-form { margin-top: 0.8rem; }
.check { flex-direction: row; align-items: center; }

.table-wrap { overflow-x: auto; max-width: 100%; border: 1px solid var(--line); border-radius: 8px; background: var(--card); }
table { width: 100%; border-collapse: collapse; font-variant-numeric: tabular-nums; }
th, td { text-align: left; padding: 0.55rem 0.7rem; border-bottom: 1px solid var(--line); vertical-align: top; font-size: 0.95rem; }
th { font-size: 0.78rem; text-transform: uppercase; letter-spacing: 0.04em; color: var(--muted); font-weight: 600; }
.num { text-align: right; }
.actions { white-space: nowrap; }
.actions a, .actions button, td form button { margin-right: 0.45rem; }
td form { display: inline; }
.tag { font-size: 0.75rem; border: 1px solid var(--warn); color: var(--warn); border-radius: 99px; padding: 0.05rem 0.4rem; }
.chip { font-size: 0.75rem; border: 1px solid var(--line); border-radius: 99px; padding: 0.05rem 0.45rem; margin: 0 0.25rem 0.2rem 0; display: inline-block; }
.bulk-bar { display: flex; flex-wrap: wrap; gap: 0.7rem; align-items: end; margin: 1rem 0; }
.pager { display: flex; gap: 1rem; align-items: center; }

.bars { list-style: none; padding: 0; margin: 0; }
.bars li { display: grid; grid-template-columns: 7.2rem 1fr auto; gap: 0.6rem; align-items: center; margin: 0.35rem 0; }
.bar { background: #e7e0d6; height: 0.7rem; border-radius: 99px; }
.bar span { display: block; height: 100%; background: var(--bar); border-radius: 99px; }

.login-wrap { min-height: 100vh; display: grid; place-items: center; padding: 1.5rem; }
.login-grid { display: grid; grid-template-columns: 1.1fr 0.9fr; gap: 2rem; max-width: 920px; align-items: center; }
.lede { font-size: 1.15rem; }
.rule-list { padding-left: 1.1rem; }
.rule-list li { margin: 0.25rem 0; }
.login-grid .card { display: flex; flex-direction: column; gap: 0.7rem; }
.charge-instructions { margin: 1rem 0; }
.charge-instructions h2 { margin-top: 0.2rem; }
.login-grid label { display: flex; flex-direction: column; gap: 0.25rem; }

/* Invoices — OnAsterisk document look inside the portal */
.invoice-howto { border-left: 4px solid #f15a29; }
.invoice-brand-mark {
    margin: 0 0 0.35rem;
    font-family: var(--font-display);
    font-weight: 700;
    letter-spacing: -0.02em;
    color: #0a1628;
    font-size: 1.05rem;
}
.invoice-generate-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 1rem;
    margin: 1rem 0;
}
.inv-kind {
    display: inline-block;
    font-size: 0.78rem;
    font-weight: 600;
    padding: 0.15rem 0.5rem;
    border-radius: 99px;
    border: 1px solid var(--line);
    background: #fff;
}
.inv-kind-usage { border-color: #1f8a8a; color: #146363; }
.inv-kind-services, .inv-kind-recurring { border-color: #f15a29; color: #d44518; }

.invoice-doc {
    --inv-navy: #0a1628;
    --inv-accent: #f15a29;
    --inv-teal: #1f8a8a;
    --inv-paper: #f7f9fc;
    background:
        radial-gradient(900px 320px at 100% 0%, rgba(241, 90, 41, 0.08), transparent 55%),
        radial-gradient(700px 280px at 0% 10%, rgba(31, 138, 138, 0.07), transparent 50%),
        #fff;
    border: 1px solid #e3e8f0;
    border-radius: 14px;
    padding: 1.6rem 1.8rem 1.4rem;
    margin: 0 0 1.2rem;
    box-shadow: 0 12px 36px rgba(7, 16, 28, 0.06);
}
.invoice-doc-head {
    display: flex;
    justify-content: space-between;
    gap: 1.5rem;
    padding-bottom: 1.1rem;
    border-bottom: 2px solid var(--inv-navy);
    margin-bottom: 1.1rem;
}
.invoice-doc-brand {
    margin: 0;
    font-family: var(--font-display);
    font-size: 1.65rem;
    font-weight: 700;
    letter-spacing: -0.03em;
    color: var(--inv-navy);
}
.invoice-doc-tagline { margin: 0.2rem 0 0.45rem; color: #5b6b82; font-size: 0.92rem; }
.invoice-doc-meta { margin: 0.15rem 0; color: #5b6b82; font-size: 0.86rem; }
.invoice-doc-right { text-align: right; }
.invoice-doc-right h1 { margin: 0.15rem 0 0.5rem; font-size: 1.45rem; color: var(--inv-navy); }
.invoice-doc-label {
    margin: 0;
    display: inline-block;
    background: var(--inv-accent);
    color: #fff;
    font-size: 0.72rem;
    font-weight: 700;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    padding: 0.25rem 0.55rem;
    border-radius: 4px;
}
.invoice-doc-facts { margin: 0; display: grid; gap: 0.2rem; }
.invoice-doc-facts div { display: flex; justify-content: flex-end; gap: 0.75rem; border: 0; padding: 0; }
.invoice-doc-facts dt { color: #5b6b82; }
.invoice-doc-facts dd { margin: 0; font-variant-numeric: tabular-nums; }
.invoice-doc-parties {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 1rem;
    margin-bottom: 1rem;
}
.invoice-doc-parties h2 {
    margin: 0 0 0.35rem;
    font-size: 0.75rem;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: #5b6b82;
}
.invoice-doc-balance { margin: 0; font-size: 1.35rem; font-weight: 700; font-variant-numeric: tabular-nums; }
.invoice-doc-blurb {
    background: rgba(31, 138, 138, 0.08);
    border-left: 3px solid var(--inv-teal);
    padding: 0.7rem 0.9rem;
    margin: 0 0 0.8rem;
    color: var(--inv-navy);
    font-size: 0.95rem;
}
.invoice-doc-notes { color: #5b6b82; font-size: 0.92rem; margin: 0 0 1rem; }
.invoice-doc-section { margin: 1rem 0; }
.invoice-doc-section h2 {
    margin: 0 0 0.45rem;
    font-size: 0.95rem;
    color: var(--inv-navy);
    border-bottom: 1px solid #e3e8f0;
    padding-bottom: 0.3rem;
}
.invoice-doc-table { border-color: #e3e8f0; }
.invoice-doc-total {
    margin-top: 1rem;
    padding-top: 0.8rem;
    border-top: 2px solid var(--inv-navy);
    display: flex;
    flex-direction: column;
    align-items: flex-end;
}
.invoice-doc-total dl { margin: 0; min-width: 14rem; }
.invoice-doc-total .invoice-doc-grand dd {
    font-size: 1.35rem;
    font-weight: 700;
    color: var(--inv-accent);
}
.invoice-doc-foot {
    margin-top: 1.4rem;
    padding-top: 0.8rem;
    border-top: 1px solid #e3e8f0;
    color: #5b6b82;
    font-size: 0.86rem;
}
.invoice-doc-foot a { color: var(--inv-navy); }

@media (max-width: 860px) {
    .app { grid-template-columns: minmax(0, 1fr); }
    .sidebar { padding-bottom: 0.6rem; }
    .sidebar nav { flex-direction: row; flex-wrap: wrap; }
    .sidebar-foot { flex-direction: row; flex-wrap: wrap; align-items: center; }
    .page-head { flex-direction: column; align-items: flex-start; }
    .filters { display: grid; grid-template-columns: 1fr; }
    .filters label, .filters input, .filters select { min-width: 0; max-width: 100%; }
    .filters input, .filters select, .filters button { width: 100%; }
    .filters input[type="date"] { width: 100%; min-width: 0; }
    .stats, .split, .form-grid, .three, .login-grid, .bars li { grid-template-columns: 1fr; }
    .invoice-generate-grid, .invoice-doc-head, .invoice-doc-parties { grid-template-columns: 1fr; display: grid; }
    .invoice-doc-right { text-align: left; }
    .invoice-doc-facts div { justify-content: flex-start; }
    main { padding: 1rem; }
}

@media print {
    .sidebar, .flash, .no-print, .page-head.no-print { display: none !important; }
    .app { display: block; }
    main { max-width: none; padding: 0; }
    .invoice-doc { box-shadow: none; border: 0; padding: 0; }
}