/* The subscriber workspace uses its own visual tokens in both themes.
   Light: bg/card were only a couple of points apart, so cards had no visible
   edge -- bg is pulled down and lines darkened enough to read as structure.
   Dark: pulled back from near-black/near-white the same way the main app
   theme was, so this page doesn't feel harsher than the rest of the app. */
.client-page { --cp-bg:#eaf1ef; --cp-card:#fff; --cp-text:#1c3235; --cp-muted:#5c6f73; --cp-line:#d2e0dd; --cp-soft:#eef4f3; --cp-green:#0f6d5a; --cp-green-soft:#e3f2ed; --cp-blue:#3c6288; --cp-red:#a34435; --cp-warn:#8a6310; }
[data-theme="dark"] .client-page { --cp-bg:#15232a; --cp-card:#1d2f36; --cp-text:#dbe7e4; --cp-muted:#94a9ac; --cp-line:#2c434a; --cp-soft:#213539; --cp-green:#63c4a4; --cp-green-soft:#1e3a34; --cp-blue:#93b6d9; --cp-red:#e69182; --cp-warn:#d9bd72; }
.client-page .content { background:var(--cp-bg); padding:28px 36px 48px; }
.client-page .topbar { background:var(--cp-card); border-color:var(--cp-line); box-shadow:none; }
.client-page .topbar h1 { color:var(--cp-text); font-size:16px; }
.client-page .topbar p { color:var(--cp-muted); }
.client-page .sidebar { background:#f2f8f7; box-shadow:none; border:0; }
.client-page .sidebar .nav-item { color:#43595c; border-radius:9px; }
.client-page .sidebar .nav-item.active { background:#dcece8; color:#12433c; box-shadow:none; }
.client-page .sidebar .nav-item:hover { background:#e6f1ef; }
.client-page .sidebar .brand-mark:not(.has-logo) { background:#0f6d5a; box-shadow:none; }
.client-page .sidebar .brand-text strong { color:#173a35; }
.client-page .sidebar .brand-text small { color:#537370; }
[data-theme="dark"] .client-page .sidebar { background:#132a2c; }
[data-theme="dark"] .client-page .sidebar .nav-item { color:#a6bebc; }
[data-theme="dark"] .client-page .sidebar .nav-item.active { background:#234244; color:#fff; }
[data-theme="dark"] .client-page .sidebar .nav-item:hover { background:#1c3436; }
[data-theme="dark"] .client-page .sidebar .brand-mark:not(.has-logo) { background:#2c6058; }
[data-theme="dark"] .client-page .sidebar .brand-text strong { color:#e9f5f2; }
[data-theme="dark"] .client-page .sidebar .brand-text small { color:#9fb8b5; }
#view-subscriber-detail { max-width:1520px; margin:0 auto; color:var(--cp-text); }
.cp-breadcrumb { display:flex; align-items:center; gap:10px; font-size:13px; color:var(--cp-muted); margin:0 0 26px; }
.cp-breadcrumb button { border:0; background:none; color:var(--cp-muted); cursor:pointer; padding:0; font:inherit; }
.cp-breadcrumb button:hover { color:var(--cp-green); }
.cp-page-heading { display:flex; justify-content:space-between; align-items:center; gap:24px; margin-bottom:30px; }
.cp-identity { display:flex; gap:18px; align-items:center; min-width:0; }
.cp-company-mark { width:58px; height:58px; flex-shrink:0; background:var(--cp-card); border:1px solid var(--cp-line); border-radius:16px; display:grid; place-items:center; color:var(--cp-green); }
.cp-company-mark .icon { width:25px; height:25px; }
.cp-page-heading #detailCompany { margin:0 0 9px; font-size:28px; line-height:1.3; color:var(--cp-text); font-weight:750; letter-spacing:-.7px; overflow-wrap:anywhere; }
#detailMeta { display:flex; flex-wrap:wrap; align-items:center; gap:14px; margin:0; font-size:13px; color:var(--cp-muted); }
.cp-action-group { display:flex; gap:10px; flex-wrap:wrap; align-items:center; }
.client-page .cp-button,.client-page .cp-icon-button,.client-page .cp-text-button { font-family:inherit; cursor:pointer; }
.cp-button { display:inline-flex; align-items:center; justify-content:center; gap:8px; min-height:40px; padding:10px 15px; background:var(--cp-card); border:1px solid var(--cp-line); color:var(--cp-text); border-radius:8px; font-size:13px; line-height:1.5; font-weight:600; text-decoration:none; }
.cp-button .icon { width:16px; height:16px; flex-shrink:0; }
.cp-button:hover { background:var(--cp-soft); border-color:var(--cp-green); }
.cp-button.primary { background:#187d6b; color:white; border-color:#187d6b; box-shadow:0 2px 3px #164a3010; }
.cp-button.primary:hover { background:#126957; }
.cp-button.danger { color:var(--cp-red); }
.cp-button:disabled { opacity:.55; cursor:wait; }
.cp-icon-button { display:inline-grid; place-items:center; width:38px; height:38px; border:1px solid var(--cp-line); border-radius:8px; background:var(--cp-card); color:var(--cp-muted); font-size:22px; }
.cp-icon-button .icon { width:15px; height:15px; }
.cp-icon-button:hover { color:var(--cp-green); background:var(--cp-green-soft); }
.cp-text-button { background:none; border:0; color:var(--cp-green); font-size:13px; padding:8px 0 8px 12px; white-space:nowrap; }
.cp-tabs { display:flex; align-items:center; gap:30px; border-bottom:1px solid var(--cp-line); margin-bottom:28px; overflow-x:auto; }
.cp-tabs button { background:none; border:0; border-bottom:2px solid transparent; color:var(--cp-muted); white-space:nowrap; padding:0 2px 15px; font-size:13px; font-weight:600; line-height:1.5; font-family:inherit; cursor:pointer; display:flex; align-items:center; gap:8px; min-height:42px; }
.cp-tabs button[aria-selected="true"] { color:var(--cp-green); border-bottom-color:var(--cp-green); }
.cp-tabs button span { border-radius:5px; background:var(--cp-line); padding:1px 6px; font-size:12px; color:var(--cp-muted); }
.cp-tabs button[aria-selected="true"] span { color:var(--cp-green); background:var(--cp-green-soft); }
.cp-tab-panel[hidden] { display:none!important; }
.cp-section-intro { display:flex; align-items:center; justify-content:space-between; gap:22px; margin:0 0 21px; }
.cp-eyebrow { display:block; color:var(--cp-muted); font-size:12px; font-weight:600; letter-spacing:.7px; margin-bottom:8px; }
.client-panel h2 { font-size:19px; font-weight:650; line-height:1.5; margin:0; letter-spacing:-.3px; }
.cp-section-intro p { font-size:13px; color:var(--cp-muted); line-height:1.8; margin:5px 0 0; }
.cp-updated { display:flex; gap:7px; align-items:center; color:var(--cp-muted); font-size:12px; white-space:nowrap; }
.cp-updated i { width:6px; height:6px; border-radius:50%; background:var(--cp-green); }
.cp-summary { display:grid; grid-template-columns:1.08fr 1fr 1fr; gap:18px; margin-bottom:24px; }
.cp-balance,.cp-metric { min-width:0; border-radius:13px; min-height:186px; padding:23px 25px 19px; border:1px solid var(--cp-line); }
.cp-balance { background:#187967; color:#fff; border-color:#187967; position:relative; overflow:hidden; }
.cp-balance:after { content:''; width:190px; height:190px; border:1px solid #ffffff0f; position:absolute; right:-80px; bottom:-90px; border-radius:50%; pointer-events:none; box-shadow:0 0 0 26px #ffffff04,0 0 0 52px #ffffff03; }
.cp-balance.has-debt { background:#844b43; border-color:#844b43; }
.cp-balance-top { display:flex; justify-content:space-between; align-items:center; font-size:13px; color:#d4eae4; }
.cp-balance-top .icon { width:19px; height:19px; }
.cp-balance>strong { display:block; font-size:44px; font-weight:600; letter-spacing:-1.3px; line-height:1.2; margin:20px 0 19px; font-variant-numeric:tabular-nums; }
.cp-balance-foot { border-top:1px solid #ffffff25; padding-top:13px; display:flex; align-items:center; gap:7px; font-size:12px; color:#e1f2eb; }
.cp-balance-foot .icon { width:14px; height:14px; flex-shrink:0; }
.cp-metric { background:var(--cp-card); }
.cp-metric-label { color:var(--cp-muted); display:flex; justify-content:space-between; align-items:center; font-size:13px; }
.cp-metric-label .icon { width:18px; height:18px; color:var(--cp-muted); }
.cp-metric>strong { font-size:37px; line-height:1.2; font-weight:600; letter-spacing:-.7px; margin:18px 0 5px; display:block; color:var(--cp-text); }
.cp-metric>strong.cp-paid-month { font-size:29px; margin-top:23px; }
.cp-metric>p { font-size:12px; color:var(--cp-muted); margin:0 0 17px; }
.cp-metric-foot { display:flex; flex-wrap:wrap; align-items:center; gap:12px; padding-top:11px; border-top:1px solid var(--cp-line); color:var(--cp-muted); font-size:12px; min-height:32px; }
.cp-metric-foot b { color:var(--cp-text); font-weight:600; margin-left:3px; }
.cp-badge { display:inline-flex; align-items:center; gap:5px; border-radius:5px; padding:4px 8px; font-size:12px; line-height:1.6; font-weight:500; white-space:nowrap; background:var(--cp-soft); color:var(--cp-muted); }
.cp-badge.good { background:var(--cp-green-soft); color:var(--cp-green); }
.cp-badge.good:before { content:''; width:4px; height:4px; border-radius:50%; background:currentColor; }
.cp-badge.blue { color:var(--cp-blue); background:color-mix(in srgb,var(--cp-blue) 9%,var(--cp-card)); }
.cp-badge.bad { color:var(--cp-red); background:color-mix(in srgb,var(--cp-red) 9%,var(--cp-card)); }
.cp-badge.warn { color:var(--cp-warn); background:color-mix(in srgb,var(--cp-warn) 10%,var(--cp-card)); }
.cp-main-grid { display:grid; grid-template-columns:minmax(0,2.15fr) minmax(255px,1fr); gap:22px; align-items:start; }
.cp-main-column,.cp-side-column { display:grid; gap:20px; min-width:0; }
.cp-card { background:var(--cp-card); border:1px solid var(--cp-line); border-radius:12px; min-width:0; overflow:hidden; }
.cp-card-head { display:flex; align-items:center; justify-content:space-between; gap:15px; padding:21px 23px 17px; }
.client-panel h3 { font-size:14px; line-height:1.55; font-weight:650; margin:0; color:var(--cp-text); }
.cp-card-head p { font-size:12px; color:var(--cp-muted); margin:5px 0 0; line-height:1.7; }
.cp-equation { display:grid; grid-template-columns:1fr 15px 1fr 15px 1.15fr; align-items:center; gap:10px; padding:8px 23px 19px; }
.cp-equation>div { padding:12px 0; min-width:0; }
.cp-equation span:not(.cp-operator) { display:block; font-size:12px; color:var(--cp-muted); line-height:1.5; }
.cp-equation strong { display:block; font-size:28px; font-weight:600; line-height:1.25; margin:9px 0 7px; letter-spacing:-.7px; }
.cp-equation small { display:block; color:var(--cp-muted); font-size:11px; line-height:1.6; }
.cp-operator { color:var(--cp-muted); font-size:21px; }
.cp-equation .cp-equation-result { background:var(--cp-green-soft); border:1px solid color-mix(in srgb,var(--cp-green) 14%,var(--cp-card)); padding:14px; border-radius:9px; }
.cp-equation-result strong { color:var(--cp-green); }
.cp-cycle-dates { display:flex; flex-wrap:wrap; gap:22px; border-top:1px solid var(--cp-line); margin:0 23px; padding:17px 0; }
.cp-cycle-dates>div { display:flex; align-items:center; gap:9px; color:var(--cp-muted); font-size:12px; }
.cp-cycle-dates .icon { width:16px; height:16px; }
.cp-cycle-dates b { display:block; color:var(--cp-text); margin-top:4px; font-size:12px; font-weight:600; }
.cp-explainer { color:var(--cp-muted); font-size:12px; line-height:1.9; margin:0; }
.cp-cycle>.cp-explainer { padding:12px 23px; background:var(--cp-soft); border-top:1px solid var(--cp-line); }
.cp-month-strip { display:grid; grid-template-columns:repeat(6,minmax(0,1fr)); gap:0; padding:5px 17px 19px; }
.cp-month { min-width:0; border:0; background:none; text-align:center; cursor:pointer; padding:7px 3px; border-radius:8px; font:inherit; color:var(--cp-text); }
.cp-month:hover { background:var(--cp-soft); }
.cp-month>span { display:block; color:var(--cp-muted); font-size:12px; }
.cp-month>b { display:block; font-size:13px; font-weight:600; margin:8px 0 12px; }
.cp-month i { width:25px; height:25px; margin:0 auto 8px; display:grid; place-items:center; border:1px solid color-mix(in srgb,var(--cp-green) 25%,var(--cp-card)); border-radius:50%; color:var(--cp-green); background:var(--cp-green-soft); }
.cp-month i .icon { width:13px; height:13px; }
.cp-month.owing i { color:var(--cp-red); border-color:var(--cp-red); background:var(--cp-soft); }
.cp-month.zero i { color:var(--cp-muted); border-color:var(--cp-line); background:var(--cp-soft); }
.cp-month small { font-size:11px; color:var(--cp-muted); }
.cp-strip-footer { display:flex; justify-content:space-between; padding:12px 23px; border-top:1px solid var(--cp-line); font-size:11px; color:var(--cp-muted); }
.cp-recent-row { display:flex; align-items:center; gap:12px; padding:17px 23px; border-top:1px solid var(--cp-line); }
.cp-receipt-icon { display:grid; place-items:center; width:34px; height:34px; border-radius:9px; background:var(--cp-green-soft); color:var(--cp-green); flex-shrink:0; }
.cp-receipt-icon.debt { background:var(--cp-soft); color:var(--cp-red); }
.cp-receipt-icon .icon { width:16px; height:16px; }
.cp-recent-row>div { flex:1; min-width:0; }
.cp-recent-row b { display:block; font-size:12px; font-weight:600; }
.cp-recent-row small { display:block; font-size:12px; color:var(--cp-muted); margin-top:5px; line-height:1.6; }
.cp-recent-row>strong { font-size:15px; white-space:nowrap; font-weight:600; }
.cp-green { color:var(--cp-green)!important; }
.cp-red { color:var(--cp-red)!important; }
.cp-service { padding:0 21px 20px; }
.cp-service .cp-card-head { padding:21px 0 19px; }
.cp-speed { display:flex; align-items:center; gap:10px; }
.cp-speed>.icon { color:var(--cp-green); width:23px; height:23px; }
.cp-speed strong { font-size:25px; font-weight:600; letter-spacing:-.5px; }
.cp-service>p { margin:6px 0 21px; font-size:12px; color:var(--cp-muted); }
.cp-service-price { display:flex; justify-content:space-between; align-items:center; font-size:12px; margin-bottom:15px; }
.cp-service-price span { color:var(--cp-muted); }
.cp-service-price b { font-size:20px; font-weight:600; }
.cp-info-line { display:flex; justify-content:space-between; gap:10px; font-size:12px; color:var(--cp-muted); border-top:1px solid var(--cp-line); padding:15px 0; }
.cp-info-line b { color:var(--cp-text); font-weight:500; }
.cp-service>.cp-button { width:100%; background:var(--cp-soft); }
.cp-money-flow { padding:0 21px 20px; }
.cp-money-flow .cp-card-head { padding:21px 0 17px; }
.cp-money-flow>div:not(.cp-card-head):not(.cp-flow-bar) { display:flex; justify-content:space-between; gap:8px; font-size:12px; color:var(--cp-muted); margin-bottom:13px; }
.cp-money-flow b { color:var(--cp-text); font-size:13px; font-weight:600; }
.cp-money-flow>.cp-flow-total { border-top:1px solid var(--cp-line); padding-top:14px; }
.cp-money-flow>.cp-flow-total b { color:var(--cp-green); }
.cp-flow-bar { width:100%; height:5px; border-radius:6px; overflow:hidden; background:#9dcabc; margin:16px 0 9px; }
.cp-flow-bar i { display:block; background:#258a72; height:100%; border-radius:6px; }
.cp-money-flow>small { color:var(--cp-muted); font-size:11px; }
.cp-map-card { overflow:hidden; }
.cp-minimap { height:250px; margin:0 16px; border-radius:12px; overflow:hidden; background:#1b2430; border:1px solid var(--cp-line, rgba(127,127,127,.25)); }
.cp-minimap-empty { height:100%; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:10px; padding:18px; text-align:center; color:var(--cp-muted); font-size:12.5px; line-height:1.7; background:var(--cp-soft, rgba(127,127,127,.06)); }
.cp-minimap-empty .icon { width:26px; height:26px; opacity:.7; }
.cp-mm-mark { width:34px; height:34px; display:grid; place-items:center; border-radius:50%; border:3px solid #fff; box-shadow:0 3px 10px rgba(0,0,0,.45); color:#fff; }
.cp-mm-mark .icon { width:17px; height:17px; }
.cp-mm-mark.sub { background:#8b5cf6; }
.cp-mm-mark.site { background:#fff; color:#1d2433; }
.cp-mm-mark.dc { background:#2f66ea; border-radius:10px; }
.cp-mm-label { padding:2px 8px !important; border:0 !important; border-radius:999px !important; background:rgba(12,16,26,.82) !important; color:#fff !important; font:600 11.5px "Noto Sans Georgian", sans-serif !important; box-shadow:none !important; }
.cp-mm-label::before { display:none !important; }
.cp-map-info { display:grid; gap:9px; padding:14px 18px 4px; }
.cp-map-info>div { display:grid; grid-template-columns:92px minmax(0,1fr); column-gap:10px; align-items:baseline; font-size:12.5px; }
.cp-map-info span { color:var(--cp-muted); }
.cp-map-info b { font-weight:650; overflow-wrap:anywhere; }
.cp-map-info small { grid-column:2; color:var(--cp-muted); font-size:11.5px; }
.cp-map-warn { display:flex; gap:8px; align-items:flex-start; margin:0; color:var(--cp-amber, #b3690a); font-size:12px; line-height:1.6; }
.cp-map-warn .icon { width:16px; height:16px; flex:none; margin-top:1px; }
.cp-map-actions { display:flex; gap:8px; padding:12px 16px 16px; }
.cp-map-actions .cp-button { flex:1; justify-content:center; }
.cp-history-help { padding:21px; background:var(--cp-green-soft); border:1px dashed color-mix(in srgb,var(--cp-green) 25%,var(--cp-card)); border-radius:12px; }
.cp-help-icon { display:block; color:var(--cp-green); margin-bottom:12px; }
.cp-help-icon .icon { width:20px; height:20px; }
.cp-history-help h3 { font-size:13px; }
.cp-history-help p { color:var(--cp-muted); font-size:12px; line-height:1.9; margin:9px 0 16px; }
.cp-history-help .cp-button { background:transparent; border-color:color-mix(in srgb,var(--cp-green) 22%,var(--cp-card)); color:var(--cp-green); width:100%; }
.cp-filter-bar { display:flex; align-items:center; flex-wrap:wrap; gap:14px; padding:18px 20px; border-bottom:1px solid var(--cp-line); }
.cp-search { display:flex; align-items:center; gap:8px; padding:0 11px; background:var(--cp-soft); border:1px solid var(--cp-line); border-radius:8px; flex:1; min-width:200px; }
.cp-search .icon { width:15px; height:15px; color:var(--cp-muted); }
.cp-search input { width:100%; min-width:0; background:none; border:0; padding:11px 0; font:inherit; font-size:12px; color:var(--cp-text); box-shadow:none; }
.cp-search input::placeholder { color:var(--cp-muted); }
.cp-year { display:flex; align-items:center; gap:8px; color:var(--cp-muted); font-size:12px; }
.cp-year select { background:var(--cp-card); border:1px solid var(--cp-line); border-radius:7px; padding:10px; color:var(--cp-text); font:inherit; }
.cp-check { display:flex; gap:7px; align-items:center; font-size:12px; color:var(--cp-muted); }
.cp-check input { accent-color:#187d6b; width:15px; height:15px; }
.cp-table-scroll { overflow-x:auto; }
/* A long list keeps its head (freeze.js): the company's tabs stay under the top bar, a table's column titles under them. */
.cp-tabs.freeze-bar { background:var(--cp-bg); }
.cp-table-scroll.head-page { overflow:clip; }
.cp-card:has(.head-page) { overflow:clip; }
.cp-table-scroll.head-own { max-height:var(--freeze-room, none); }
.cp-table-scroll:is(.head-page, .head-own) .cp-table th { position:sticky; top:0; z-index:5; box-shadow:inset 0 -1px 0 var(--cp-line); }
.cp-table-scroll.head-page .cp-table th { top:var(--freeze-top, 0px); }
.cp-table { width:100%; border-collapse:collapse; color:var(--cp-text); font-size:12px; }
.cp-table th { text-align:left!important; color:var(--cp-muted); font-size:12px; background:var(--cp-soft); padding:15px 16px; border-bottom:1px solid var(--cp-line); white-space:nowrap; font-weight:500; position:static; }
.cp-table td { text-align:left!important; padding:17px 16px; border-bottom:1px solid var(--cp-line); line-height:1.7; }
.cp-table tr:last-child td { border-bottom:0; }
.cp-table td.cp-number { text-align:right!important; font-variant-numeric:tabular-nums; white-space:nowrap; }
.cp-table td b { display:block; font-weight:500; }
.cp-table td small { display:block; color:var(--cp-muted); font-size:12px; margin-top:3px; }
.cp-table tbody tr:hover { background:var(--cp-soft); }
.cp-payment-note { max-width:350px; overflow-wrap:anywhere; }
.cp-table-footer { display:flex; justify-content:space-between; gap:12px; padding:17px 20px; border-top:1px solid var(--cp-line); font-size:12px; color:var(--cp-muted); }
.cp-table-footer b { color:var(--cp-text); margin-left:6px; }
.cp-empty { padding:55px 25px; text-align:center; }
.cp-empty>.icon { width:28px; height:28px; color:var(--cp-muted); margin-bottom:15px; }
.cp-empty p { color:var(--cp-muted); font-size:13px; line-height:1.8; margin:8px 0 0; }
.cp-profile-grid { display:grid; grid-template-columns:1fr 1fr; gap:22px; }
.cp-profile-row { display:flex; justify-content:space-between; gap:20px; padding:17px 23px; border-top:1px solid var(--cp-line); font-size:13px; }
.cp-profile-row>span { color:var(--cp-muted); flex-shrink:0; }
.cp-profile-row>b { font-weight:500; text-align:right; overflow-wrap:anywhere; min-width:0; }
.cp-contact-actions { display:flex; flex-wrap:wrap; gap:10px; padding:20px 23px; }
.cp-service-management { display:flex; align-items:center; justify-content:space-between; gap:25px; padding:23px; margin-top:22px; }
.cp-service-management p { font-size:13px; color:var(--cp-muted); line-height:1.8; margin:6px 0 0; }
.cp-dialog { width:min(510px,calc(100vw - 30px)); padding:27px; color:var(--cp-text); background:var(--cp-card); border:1px solid var(--cp-line); border-radius:16px; box-shadow:0 24px 100px #102b3240; max-height:90dvh; overflow-y:auto; }
.cp-dialog::backdrop { background:#102b3277; backdrop-filter:blur(3px); }
.cp-dialog-head { display:flex; align-items:center; justify-content:space-between; margin-bottom:24px; gap:20px; }
.cp-field { display:flex; flex-direction:column; gap:9px; font-size:13px; margin-bottom:17px; }
.cp-field input { width:100%; border:1px solid var(--cp-line); border-radius:8px; background:var(--cp-soft); color:var(--cp-text); padding:12px; font:inherit; font-size:15px; }
.cp-month-context { display:flex; flex-direction:column; gap:11px; padding:15px; background:var(--cp-green-soft); border-radius:8px; margin-bottom:20px; font-size:12px; color:var(--cp-muted); }
.cp-month-context span { display:flex; justify-content:space-between; gap:14px; }
.cp-month-context b { color:var(--cp-text); font-weight:600; }
.cp-dialog-actions { display:flex; justify-content:space-between; gap:10px; margin-top:23px; }
.client-panel button:focus-visible,.client-panel input:focus-visible,.client-panel select:focus-visible,.cp-page-heading button:focus-visible { outline:3px solid #69b8aa; outline-offset:3px; }
@media (min-width:1600px) { .client-page .content { padding:32px 50px 60px; } .cp-equation { gap:20px; } .cp-summary { gap:22px; } }
@media (max-width:1200px) { .client-page .content { padding:24px; } .cp-main-grid { grid-template-columns:minmax(0,1fr) 255px; gap:18px; } .cp-page-heading { flex-wrap:wrap; } .cp-balance,.cp-metric { padding:20px; } .cp-equation { gap:6px; padding-left:18px; padding-right:18px; } .cp-equation strong { font-size:24px; } .cp-card-head { padding:19px 18px; } .cp-summary { gap:12px; } }
@media (max-width:1000px) { .cp-main-grid { grid-template-columns:1fr; } .cp-side-column { grid-template-columns:1fr 1fr; } .cp-history-help, .cp-map-card { grid-column:1/-1; } .cp-updated { display:none; } .cp-section-intro { align-items:flex-start; flex-wrap:wrap; } .cp-balance>strong { font-size:36px; } .cp-metric>strong { font-size:32px; } .cp-metric>strong.cp-paid-month { font-size:24px; } }
@media (max-width:640px) { .client-page .content { padding:20px 15px 35px; } .cp-breadcrumb { margin-bottom:20px; } .cp-page-heading { margin-bottom:22px; gap:20px; } .cp-page-heading #detailCompany { font-size:24px; } .cp-company-mark { width:45px; height:45px; border-radius:12px; } .cp-identity { gap:12px; } #detailMeta { gap:7px 12px; font-size:12px; } .cp-page-heading>.cp-action-group { width:100%; } .cp-page-heading>.cp-action-group>.cp-button { flex:1; padding:10px; font-size:12px; } .cp-tabs { gap:23px; margin-bottom:22px; } .cp-tabs button { font-size:13px; } .client-panel h2 { font-size:17px; } .cp-summary { grid-template-columns:1fr 1fr; gap:12px; } .cp-balance { grid-column:1/-1; min-height:172px; } .cp-metric { padding:17px 14px; min-height:172px; } .cp-metric-label { font-size:12px; gap:7px; } .cp-metric-label .icon { width:15px; } .cp-metric>strong { font-size:30px; } .cp-metric>strong.cp-paid-month { font-size:23px; } .cp-metric>p { font-size:11px; line-height:1.6; } .cp-metric-foot { font-size:11px; gap:5px; } .cp-metric-foot .cp-badge { font-size:11px; } .cp-card-head { padding:18px 15px 12px; align-items:flex-start; } .cp-card-head h3 { font-size:13px; } .cp-card-head p { font-size:11px; } .cp-card-head .cp-badge { font-size:11px; } .cp-equation { grid-template-columns:1fr 10px 1fr 10px 1.1fr; padding:9px 13px 17px; gap:5px; } .cp-equation strong { font-size:23px; } .cp-equation span:not(.cp-operator) { font-size:11px; } .cp-equation small { font-size:11px; } .cp-equation .cp-equation-result { padding:12px 8px; } .cp-operator { font-size:16px; } .cp-cycle-dates { margin:0 15px; gap:18px; } .cp-cycle-dates>div { font-size:11px; } .cp-cycle>.cp-explainer { padding:12px 15px; font-size:11px; } .cp-month-strip { padding:7px 10px 16px; grid-template-columns:repeat(3,1fr); row-gap:12px; } .cp-strip-footer { padding:12px 15px; font-size:11px; gap:15px; } .cp-recent-row { padding:16px 15px; } .cp-side-column { grid-template-columns:1fr; } .cp-history-help { grid-column:auto; } .cp-profile-grid { grid-template-columns:1fr; } .cp-profile-row { flex-direction:column; gap:7px; } .cp-profile-row>b { text-align:left; } .cp-service-management { flex-direction:column; align-items:flex-start; } .cp-dialog { padding:21px; } .cp-dialog-actions { flex-wrap:wrap; } .cp-dialog-actions button { flex:1; font-size:12px; } .cp-text-button { font-size:12px; } .cp-table { min-width:780px; } .cp-filter-bar { gap:12px; padding:15px; } .cp-search { flex-basis:100%; } .cp-section-intro .cp-action-group { width:100%; } .cp-section-intro .cp-action-group button { font-size:12px; flex:1; } }
@media (prefers-reduced-motion:no-preference) { .cp-tab-panel:not([hidden]) { animation:cp-appear .18s ease-out; } @keyframes cp-appear { from { opacity:.6; transform:translateY(4px); } to { opacity:1; transform:translateY(0); } } }

.client-page .sidebar .user-info strong, .client-page .user-card strong { color:#173a35; }
.client-page .sidebar .user-info small, .client-page .user-card small { color:#537370; }
[data-theme="dark"] .client-page .sidebar .user-info strong, [data-theme="dark"] .client-page .user-card strong { color:#dcece8; }
[data-theme="dark"] .client-page .sidebar .user-info small, [data-theme="dark"] .client-page .user-card small { color:#aac1be; }

.cp-speed .cp-no-speed { font-size:13px; font-weight:500; line-height:1.7; letter-spacing:0; color:var(--cp-muted); }
@media(max-width:640px) { .client-page .workspace { width:100%!important; margin-left:0!important; } .cp-equation strong { font-size:24px; } }

.cp-row-actions { display:flex; gap:6px; }

.cp-history-details { padding:0; margin-top:20px; }
.cp-history-details > summary { display:flex; justify-content:space-between; align-items:center; gap:16px; padding:21px 23px; cursor:pointer; list-style:none; }
.cp-history-details > summary::-webkit-details-marker { display:none; }
.cp-history-details > summary b { display:block; font-size:14px; font-weight:650; color:var(--cp-text); }
.cp-history-details > summary small { display:block; color:var(--cp-muted); font-size:12px; margin-top:4px; font-weight:400; }
.cp-history-body { padding:0 23px 23px; border-top:1px solid var(--cp-line); }
.cp-history-body table input[type=number] { width:110px; border:1px solid var(--cp-line); border-radius:7px; background:var(--cp-soft); color:var(--cp-text); padding:8px 10px; font:inherit; font-size:12px; }
.cp-history-body table input:disabled { opacity:.5; }
.cp-history-body table input[aria-invalid="true"] { border-color:var(--cp-red); }
.cp-history-body table input[type=checkbox] { accent-color:#187d6b; width:16px; height:16px; }
.cp-history-actions { display:flex; justify-content:space-between; align-items:center; gap:14px; margin:16px 0; font-size:12px; color:var(--cp-muted); }
.cp-history-actions b { color:var(--cp-text); }
.cp-history-compare { display:grid; gap:2px; margin:14px 0; }
.cp-history-compare > div { display:grid; grid-template-columns:1fr auto auto; gap:20px; align-items:center; padding:9px 0; border-bottom:1px solid var(--cp-line); font-size:12.5px; }
.cp-history-compare > div:first-child { color:var(--cp-muted); font-weight:600; font-size:11px; }
.cp-history-compare b { font-variant-numeric:tabular-nums; text-align:right; min-width:70px; }
.cp-history-changed { color:var(--cp-green); }
.cp-history-save { display:flex; justify-content:flex-end; margin-top:16px; }
.client-page { --panel:var(--cp-card); --panel-elevated:var(--cp-card); --panel-muted:var(--cp-soft); --text:var(--cp-text); --muted:var(--cp-muted); --line:var(--cp-line); --primary:#187d6b; --primary-soft:var(--cp-green-soft); --btn-primary-bg:#187d6b; --btn-primary-bg-hover:#126957; --btn-primary-text:#fff; --btn-primary-shadow:none; --btn-primary-shadow-hover:none; }
.cp-name-row { display:flex; align-items:center; flex-wrap:wrap; gap:8px 12px; margin-bottom:9px; }
.cp-name-row #detailCompany { margin:0; }
.cp-alerts { display:inline-flex; flex-wrap:wrap; gap:6px; }
.cp-alerts:empty { display:none; }
.cp-alerts button { border:0; font:inherit; font-size:12px; cursor:pointer; }
@media (pointer: coarse) { .cp-alerts button { min-height:36px; } }

/* Monthly automatic sends: one row per send, switch on the right. */
.cp-auto-card { margin-top:22px; }
.cp-auto-row { display:flex; align-items:center; justify-content:space-between; gap:20px; padding:16px 23px; border-top:1px solid var(--cp-line); }
.cp-auto-row h4 { display:flex; align-items:center; flex-wrap:wrap; gap:8px; margin:0; font-size:14px; color:var(--cp-text); }
.cp-auto-row p { margin:5px 0 0; font-size:13px; line-height:1.7; color:var(--cp-muted); }
.cp-auto-row p b { color:var(--cp-text); }
@media (max-width:640px) { .cp-auto-row { flex-direction:column; align-items:flex-start; padding:14px 15px; } }

/* ---- the line itself: a light by the name, the "ინტერნეტი" tab ---- */
.net-led { --led: #94a3b8; display: inline-block; width: 14px; height: 14px; flex: none; border-radius: 50%; background: var(--led); box-shadow: 0 0 0 3px color-mix(in srgb, var(--led) 22%, transparent), 0 0 10px color-mix(in srgb, var(--led) 70%, transparent); vertical-align: middle; }
.net-led.is-green { --led: #22c55e; }
.net-led.is-blue { --led: #3b82f6; }
.net-led.is-yellow { --led: #f59e0b; }
.net-led.is-red { --led: #ef4444; }
.net-led.is-none { --led: #94a3b8; box-shadow: none; opacity: .7; }
.net-led.small { width: 9px; height: 9px; box-shadow: 0 0 0 2px color-mix(in srgb, var(--led) 22%, transparent); }
.net-led.big { width: 26px; height: 26px; box-shadow: 0 0 0 6px color-mix(in srgb, var(--led) 20%, transparent), 0 0 22px color-mix(in srgb, var(--led) 70%, transparent); }
@media (prefers-reduced-motion: no-preference) {
  .net-led[data-level="1"] { animation: net-blink 3.2s steps(1, end) infinite; }
  .net-led[data-level="2"] { animation: net-blink 1.6s steps(1, end) infinite; }
  .net-led[data-level="3"] { animation: net-blink .7s steps(1, end) infinite; }
  .cp-net-flow { animation: cp-net-flow var(--flow, 1.2s) linear infinite; }
}
/* as a port's light on a MikroTik: lit, with short dark flickers at uneven gaps -- more often the more traffic */
@keyframes net-blink { 0%, 13%, 30%, 41%, 61%, 82%, 94%, 100% { opacity: 1; } 9%, 27%, 36%, 58%, 77%, 91% { opacity: .15; } }
@keyframes cp-net-flow { to { stroke-dashoffset: -36; } }
.cp-net-head { display: inline-flex; align-items: center; margin: 0 2px 9px; }
.net-led-btn { display: inline-grid; place-items: center; width: 34px; height: 34px; padding: 0; border: 0; border-radius: 50%; background: none; cursor: pointer; }
.net-led-btn:hover { background: var(--cp-soft); }
.net-led-btn:focus-visible { outline: 2px solid var(--cp-green); outline-offset: 2px; }
.cp-tab-led { display: inline-flex; margin-right: 7px; vertical-align: middle; }
.cp-tab-led:empty { display: none; }
.cp-net-status { border-left: 4px solid var(--cp-line); }
.cp-net-status.is-green { border-left-color: #22c55e; }
.cp-net-status.is-blue { border-left-color: #3b82f6; }
.cp-net-status.is-yellow { border-left-color: #f59e0b; }
.cp-net-status.is-red { border-left-color: #ef4444; }
.cp-net-now { display: flex; align-items: center; gap: 20px; padding: 22px 23px 14px; }
.cp-net-now h3 { font-size: 18px !important; }
.cp-net-now p { margin: 3px 0 0; color: var(--cp-text); font-size: 13px; }
.cp-net-now small { display: block; margin-top: 4px; color: var(--cp-muted); font-size: 11.5px; }
.cp-net-legend { display: flex; flex-wrap: wrap; gap: 6px 16px; padding: 10px 23px 16px; border-top: 1px solid var(--cp-line); color: var(--cp-muted); font-size: 11.5px; }
.cp-net-legend span { display: inline-flex; align-items: center; gap: 6px; }
.cp-net-note { margin: 0; padding: 0 23px 20px; color: var(--cp-muted); font-size: 12.5px; line-height: 1.7; }
.cp-net-rates { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; padding: 0 23px 10px; }
.cp-net-rate span { display: block; color: var(--cp-muted); font-size: 12px; }
.cp-net-rate b { display: block; font-size: 26px; font-weight: 650; letter-spacing: -.5px; font-variant-numeric: tabular-nums; }
.cp-net-rate small { color: var(--cp-muted); font-size: 11.5px; }
.cp-net-bar { display: block; height: 6px; margin-top: 6px; border-radius: 4px; background: var(--cp-soft); overflow: hidden; }
.cp-net-bar em { display: block; height: 100%; border-radius: 4px; background: #22c55e; }
.cp-net-bar.is-high em { background: #f59e0b; }
.cp-net-bar.is-full em { background: #3b82f6; }
.cp-net-chart { display: block; width: calc(100% - 46px); height: 120px; margin: 4px 23px 0; }
.cp-net-down, .cp-net-up { fill: none; stroke-width: 2; vector-effect: non-scaling-stroke; stroke-linejoin: round; }
.cp-net-down { stroke: #3b82f6; }
.cp-net-up { stroke: #22c55e; }
.cp-net-limit { stroke: var(--cp-muted); stroke-width: 1; stroke-dasharray: 5 5; vector-effect: non-scaling-stroke; }
.cp-net-scale { display: flex; justify-content: space-between; flex-wrap: wrap; gap: 8px; padding: 4px 23px 18px; color: var(--cp-muted); font-size: 11.5px; }
.cp-net-scale i { display: inline-block; width: 12px; height: 3px; margin: 0 4px 2px 10px; border-radius: 2px; vertical-align: middle; }
.cp-net-scale i.down { background: #3b82f6; }
.cp-net-scale i.up { background: #22c55e; }
.cp-net-table { min-width: 640px; }
.cp-net-table td { padding: 12px 14px; vertical-align: top; }
.cp-net-sub { color: var(--cp-muted); font-size: 11.5px; }
.cp-net-sub.mono { font-family: ui-monospace, Consolas, monospace; }
.cp-net-link { display: grid; gap: 10px; padding: 0 23px 18px; }
.cp-net-search { width: 100%; min-height: 40px; padding: 8px 12px; border: 1px solid var(--cp-line); border-radius: 9px; background: var(--cp-soft); color: var(--cp-text); font: inherit; font-size: 13px; }
.cp-net-picks { display: grid; gap: 6px; max-height: 360px; overflow-y: auto; }
.cp-net-pick { display: flex; align-items: center; gap: 10px; padding: 8px 10px; border: 1px solid var(--cp-line); border-radius: 9px; }
.cp-net-pick.is-likely { border-color: color-mix(in srgb, var(--cp-green) 45%, var(--cp-line)); background: var(--cp-green-soft); }
.cp-net-pick > div { flex: 1; min-width: 0; }
.cp-net-pick b { display: block; font-size: 13px; overflow-wrap: anywhere; }
.cp-net-pick small { display: block; color: var(--cp-muted); font-size: 11.5px; overflow-wrap: anywhere; }
.cp-net-pick .cp-button { min-height: 34px; padding: 6px 12px; }
.cp-net-outs { display: grid; padding: 0 23px 14px; }
.cp-net-out { display: flex; align-items: center; gap: 12px; padding: 10px 0; border-top: 1px solid var(--cp-line); }
.cp-net-out > div { flex: 1; min-width: 0; }
.cp-net-out b { display: block; font-size: 13px; font-weight: 600; overflow-wrap: anywhere; }
.cp-net-out small { color: var(--cp-muted); font-size: 11.5px; }
.cp-net-out strong { font-size: 13px; font-variant-numeric: tabular-nums; white-space: nowrap; }
.cp-net-out-ico { display: grid; place-items: center; width: 30px; height: 30px; flex: none; border-radius: 8px; background: color-mix(in srgb, #ef4444 12%, var(--cp-card)); color: #ef4444; }
.cp-net-out-ico .icon { width: 15px; height: 15px; }
.cp-net-out.is-open strong { color: #ef4444; }
.cp-net-ants { display: grid; gap: 10px; padding: 0 23px 18px; }
.cp-net-ant { display: flex; align-items: center; gap: 10px; }
.cp-net-ant > .icon { width: 18px; height: 18px; flex: none; color: var(--cp-muted); }
.cp-net-ant b { display: block; font-size: 13px; }
.cp-net-ant small { color: var(--cp-muted); font-size: 11.5px; }
@media (max-width: 640px) {
  .cp-net-now { padding: 18px 15px 12px; gap: 14px; }
  .cp-net-legend, .cp-net-note, .cp-net-link, .cp-net-outs, .cp-net-ants { padding-left: 15px; padding-right: 15px; }
  .cp-net-rates { padding: 0 15px 8px; gap: 10px; }
  .cp-net-rate b { font-size: 21px; }
  .cp-net-chart { width: calc(100% - 30px); margin: 4px 15px 0; }
  .cp-net-scale { padding: 4px 15px 16px; }
}
.cp-tabs .cp-tab-led .net-led.net-led { padding: 0; border-radius: 50%; background: var(--led); }

/* what the company carried: a bar a day, download with upload on top of it */
.cp-net-days { display: flex; align-items: flex-end; gap: 3px; height: 84px; margin: 4px 23px 6px; padding: 6px 6px 0; border-radius: 10px; background: var(--cp-soft, var(--panel-muted)); }
.cp-net-days i { flex: 1; min-width: 3px; height: 100%; display: flex; flex-direction: column-reverse; justify-content: flex-start; }
.cp-net-days b { display: block; min-height: 0; background: #3b82f6; }
.cp-net-days u { display: block; min-height: 0; border-radius: 3px 3px 0 0; background: #22c55e; text-decoration: none; }
.cp-net-days i:hover b, .cp-net-days i:hover u { filter: brightness(1.15); }
@media (max-width: 640px) { .cp-net-days { margin-left: 15px; margin-right: 15px; } }

/* ---- the overview: the money in one band, the months, the latest money in and the map ---- */
.cp-overview { display:grid; gap:20px; }
.cp-fin .cp-card-head p b { color:var(--cp-text); font-weight:650; }
.cp-fin-grid { display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); border-top:1px solid var(--cp-line); }
.cp-fin-item { min-width:0; padding:18px 23px 21px; }
.cp-fin-item + .cp-fin-item { border-left:1px solid var(--cp-line); }
.cp-fin-item>span { display:block; font-size:12px; color:var(--cp-muted); }
.cp-fin-item>strong { display:block; margin:8px 0 6px; font-size:30px; font-weight:650; line-height:1.2; letter-spacing:-.6px; color:var(--cp-text); font-variant-numeric:tabular-nums; }
.cp-fin-item>small { display:block; font-size:12px; line-height:1.65; color:var(--cp-muted); }
.cp-fin-item>small b { color:var(--cp-text); font-weight:600; }
.cp-fin-item.due.has-debt { background:color-mix(in srgb,var(--cp-red) 7%,var(--cp-card)); }
.cp-fin-item.due.has-debt>strong, .cp-fin-item.due.has-debt>small b { color:var(--cp-red); }
.cp-fin-item.due:not(.has-debt)>strong { color:var(--cp-green); }
.cp-fin-item.paid>strong { font-size:26px; margin-top:11px; }
.cp-fin-item.paid.none>strong { color:var(--cp-muted); }
.cp-fin-item.paid.good>strong { color:var(--cp-green); }
.cp-fin-item.paid.warn>strong { color:var(--cp-warn); }
.cp-fin-item.paid.bad>strong { color:var(--cp-red); }
.cp-month-strip { grid-template-columns:repeat(auto-fill,minmax(84px,1fr)); }
.cp-month.part i { color:var(--cp-warn); border-color:var(--cp-warn); }
.cp-other-debt { display:flex; flex-wrap:wrap; align-items:center; gap:8px; padding:12px 23px; border-top:1px solid var(--cp-line); font-size:12px; color:var(--cp-muted); }
.cp-other-debt button { border:0; cursor:pointer; font:inherit; font-size:12px; }
.cp-overview-pair { display:grid; grid-template-columns:minmax(0,1.25fr) minmax(0,1fr); gap:20px; align-items:stretch; }
.cp-overview-pair .cp-card-head p b { color:var(--cp-text); font-weight:600; }
@media (max-width:1000px) { .cp-fin-grid { grid-template-columns:1fr 1fr; } .cp-fin-item:nth-child(3) { border-left:0; } .cp-fin-item:nth-child(n+3) { border-top:1px solid var(--cp-line); } .cp-overview-pair { grid-template-columns:minmax(0,1fr); } }
@media (max-width:640px) { .cp-overview { gap:14px; } .cp-fin-item { padding:14px 15px 16px; } .cp-fin-item>strong { font-size:24px; } .cp-fin-item.paid>strong { font-size:21px; } .cp-month-strip { grid-template-columns:repeat(4,1fr); } .cp-other-debt { padding:12px 15px; } }

/* the company's contacts, at the top of the overview */
.cp-contact-grid { display:grid; grid-template-columns:minmax(0,1.2fr) minmax(0,1fr); gap:18px 28px; padding:0 23px 21px; }
.cp-contact-reach { display:grid; gap:10px; align-content:start; }
.cp-phones { display:flex; flex-wrap:wrap; gap:8px 22px; }
.cp-phone { display:inline-flex; align-items:center; gap:9px; color:var(--cp-text); text-decoration:none; }
.cp-phone .icon { width:19px; height:19px; color:var(--cp-green); }
.cp-phone b { font-size:22px; font-weight:650; letter-spacing:-.3px; }
.cp-phone:hover b { color:var(--cp-green); }
.cp-mail { display:inline-flex; align-items:center; gap:9px; width:fit-content; max-width:100%; color:var(--cp-blue); font-size:14px; text-decoration:none; overflow-wrap:anywhere; }
.cp-mail .icon { width:17px; height:17px; flex:none; }
.cp-mail:hover { text-decoration:underline; }
.cp-contact-none { color:var(--cp-muted); font-size:13px; }
.cp-contact-reach .cp-contact-actions { display:flex; flex-wrap:wrap; gap:8px; margin:4px 0 0; padding:0; }
.cp-contact-facts { display:grid; gap:12px; margin:0; align-content:start; }
.cp-contact-facts div { display:grid; gap:3px; }
.cp-contact-facts dt { font-size:12px; color:var(--cp-muted); }
.cp-contact-facts dd { margin:0; font-size:14px; font-weight:600; color:var(--cp-text); overflow-wrap:anywhere; }
.cp-map-loc { padding:4px 0 6px; }
.cp-overview .cp-service-management { margin:0; }
@media (max-width:760px) { .cp-contact-grid { grid-template-columns:minmax(0,1fr); padding:0 15px 16px; } .cp-phone b { font-size:19px; } }

/* the further numbers, under the main one */
.cp-phones-more { display:flex; flex-wrap:wrap; align-items:baseline; gap:4px 14px; font-size:13.5px; }
.cp-phones-more span { color:var(--cp-muted); font-size:12px; }
.cp-phones-more a { color:var(--cp-text); text-decoration:none; font-weight:600; font-variant-numeric:tabular-nums; }
.cp-phones-more a:hover { color:var(--cp-green); }
/* the card's maps (Leaflet) keep their layers to themselves -- never over an open window */
.cp-minimap { position:relative; z-index:0; isolation:isolate; }

/* the statement: the account in one list -- its figures on top, a line per charge or payment, the balance after each */
.cp-stmt-sum { display:flex; flex-wrap:wrap; gap:1px; background:var(--cp-line); border-bottom:1px solid var(--cp-line); }
.cp-stmt-sum > div { flex:1 1 170px; display:grid; gap:2px; align-content:start; padding:16px 20px; background:var(--cp-card); }
.cp-stmt-sum span { font-size:12px; color:var(--cp-muted); }
.cp-stmt-sum strong { font-size:21px; font-weight:650; letter-spacing:-.3px; font-variant-numeric:tabular-nums; color:var(--cp-text); }
.cp-stmt-sum small { font-size:11.5px; color:var(--cp-muted); }
.cp-seg { display:inline-flex; gap:2px; padding:3px; background:var(--cp-soft); border:1px solid var(--cp-line); border-radius:9px; max-width:100%; overflow-x:auto; scrollbar-width:none; }
.cp-seg button { border:0; background:none; color:var(--cp-muted); font:inherit; font-size:12px; font-weight:600; padding:7px 12px; min-height:32px; border-radius:6px; cursor:pointer; white-space:nowrap; }
.cp-seg button:hover { color:var(--cp-text); }
.cp-seg button[aria-pressed="true"] { background:var(--cp-card); color:var(--cp-green); box-shadow:0 1px 2px rgba(15,40,40,.12); }
.cp-seg button:focus-visible { outline:2px solid var(--cp-green); outline-offset:1px; }
/* the site's tables keep a 930px floor (they scroll sideways); this one fits its card, and turns to cards below */
.cp-table.cp-stmt { min-width:0; }
.cp-stmt th.num { text-align:right!important; }
.cp-stmt td { vertical-align:middle; }
.cp-stmt td.date { white-space:nowrap; color:var(--cp-muted); font-variant-numeric:tabular-nums; }
.cp-stmt td.what { min-width:260px; }
.cp-stmt-op { display:grid; grid-template-columns:30px minmax(0,1fr); gap:12px; align-items:center; }
.cp-stmt-ico { display:grid; place-items:center; width:30px; height:30px; border-radius:8px; background:var(--cp-soft); color:var(--cp-muted); }
.cp-stmt-ico .icon { width:15px; height:15px; }
.cp-stmt-ico.pay { background:var(--cp-green-soft); color:var(--cp-green); }
.cp-stmt-what { display:flex; flex-wrap:wrap; align-items:center; gap:4px 10px; }
.cp-stmt .cp-stmt-what b { display:inline; font-weight:600; }
.cp-stmt .cp-stmt-what .cp-badge { padding:2px 7px; font-size:11px; }
.cp-stmt td.what small { display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden; max-width:70ch; overflow-wrap:anywhere; }
.cp-stmt td.amt { font-size:13px; font-weight:600; }
.cp-stmt td.bal b { display:block; font-weight:600; }
.cp-stmt td.bal small { font-size:11px; margin-top:1px; }
.cp-stmt td.act { width:1%; white-space:nowrap; }
.cp-stmt tr.zero td.amt, .cp-stmt tr.zero .cp-stmt-what b { color:var(--cp-muted); }
.cp-stmt tr.zero .cp-stmt-ico { opacity:.6; }
@media (max-width:640px) {
  .cp-stmt-sum > div { flex-basis:40%; padding:13px 15px; }
  .cp-stmt-sum strong { font-size:18px; }
  .cp-seg { width:100%; }
  .cp-seg button { flex:1; padding:7px 6px; }
}
/* where the list is narrower than its columns (a phone, a tablet, a half screen) every line becomes a small card --
   the date and the amount on top, what it is under them, the balance last: never a sideways scroll */
#cp-stmt-table { container-type:inline-size; }
@container (max-width:760px) {
  .cp-stmt thead { display:none; }
  .cp-stmt tbody tr { display:grid; grid-template-columns:minmax(0,1fr) auto; grid-template-areas:"date amt" "what what" "bal act"; gap:6px 12px; align-items:center; padding:14px 15px; border-bottom:1px solid var(--cp-line); }
  .cp-stmt tbody tr:last-child { border-bottom:0; }
  .cp-stmt td { padding:0; border:0; }
  .cp-stmt td.date { grid-area:date; font-size:12px; }
  .cp-stmt td.what { grid-area:what; min-width:0; }
  .cp-stmt td.amt { grid-area:amt; font-size:15px; }
  .cp-stmt td.nil { display:none; }
  .cp-stmt td.cp-number.bal { grid-area:bal; display:flex; align-items:baseline; gap:6px; text-align:left!important; }
  .cp-stmt td.bal::before { content:attr(data-label); font-size:12px; color:var(--cp-muted); }
  .cp-stmt td.bal b { display:inline; }
  .cp-stmt td.act { grid-area:act; justify-self:end; width:auto; }
}

/* the charges alone, the payments alone: they fit the card as the statement does; their titles may wrap */
.cp-table.cp-cards { min-width:0; }
.cp-cards th { white-space:normal; }
.cp-cards th.num { text-align:right!important; }
.cp-cards td.act { width:1%; white-space:nowrap; }
.cp-cards tr.zero td { color:var(--cp-muted); }
@container (max-width:900px) {
  .cp-cards thead { display:none; }
  .cp-cards tbody tr { display:grid; grid-template-columns:repeat(2, minmax(0,1fr)); gap:6px 28px; align-items:start; padding:14px 15px; border-bottom:1px solid var(--cp-line); }
  .cp-cards tbody tr:last-child { border-bottom:0; }
  .cp-cards td { padding:0; border:0; font-size:12.5px; min-width:0; }
  .cp-cards td[data-label] { display:flex; justify-content:space-between; align-items:baseline; gap:12px; }
  .cp-cards td[data-label]::before { content:attr(data-label); color:var(--cp-muted); font-size:12px; white-space:nowrap; }
  .cp-cards td.head { grid-column:1; grid-row:1; align-self:center; font-size:14px; }
  .cp-cards td.act { grid-column:2; grid-row:1; justify-self:end; width:auto; }
  .cp-cards td.wide { grid-column:1 / -1; padding-top:4px; }
}
@container (max-width:480px) { .cp-cards td[data-label] { grid-column:1 / -1; } }
/* the money tab's bar: the views, the year and the download on one row; where that row is short, the search
   takes a row of its own under them -- never a button left alone on a line */
.cp-money-card { container-type:inline-size; }
@container (max-width:820px) {
  .cp-money-card .cp-search { order:9; flex-basis:100%; }
  .cp-money-card .cp-year { margin-left:auto; }
}
/* a tab's title and its buttons: side by side while both fit -- the text gives way first, then the buttons take a
   row of their own (not squeezed into two rows beside a long sentence) */
.cp-section-intro { flex-wrap:wrap; }
.cp-section-intro > div:first-child { flex:1 1 320px; min-width:0; }
.cp-section-intro > .cp-action-group { flex:0 1 auto; }
/* on a phone the four views stand two by two, every word whole */
@container (max-width:480px) { .cp-money-card .cp-seg { display:grid; grid-template-columns:repeat(2, minmax(0,1fr)); width:100%; } }