/* ============================================================
   invoicekit.css — invoice.kit App Styles
   ============================================================ */

/* ── RESET & BASE ── */
html, body {
  overflow-x: hidden;
  max-width: 100vw;
}

* {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

:root {
  --a:        #c8401a;
  --a-dark:   #8a2810;
  --a-muted:  rgba(200, 64, 26, .15);
  --a-txt:    #fff;
  --ui-a:     #c8401a;
  --ui-dark:  #8a2810;
  --ui-muted: rgba(200, 64, 26, .15);
  --ui-txt:   #fff;
  --bg:       #141210;
  --pn:       #1e1b17;
  --br:       #2e2b27;
  --tx:       #ccc;
  --tx2:      #888;
  --tx3:      #555;
  --inp:      #0e0c0a;
  --brd:      #3a3630;
  --inv-font: "DM Mono", monospace;
}

body {
  background: var(--bg);
  font-family: 'DM Mono', monospace;
  min-height: 100vh;
  color: var(--tx);
}


/* ── APP SHELL ── */
.app {
  max-width: 980px;
  margin: 0 auto;
  padding: 24px 16px;
}


/* ── HEADER ── */
.hd {
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding-bottom: 16px;
  border-bottom: 1px solid var(--br);
  margin-bottom: 20px;
}

.hd-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
}

.hd-actions {
  display: flex;
  gap: 6px;
  flex-wrap: wrap;
  align-items: center;
}

.logo {
  font-family: 'Fraunces', serif;
  font-size: 18px;
  color: #ede8e0;
  font-weight: 300;
}

.logo b {
  color: var(--a);
  font-weight: 300;
}


/* ── CLIENT TABS ── */
.cbar {
  display: flex;
  gap: 6px;
  flex-wrap: wrap;
  margin-bottom: 16px;
}

.ctab {
  padding: 6px 14px;
  border: 1px solid var(--brd);
  background: transparent;
  color: var(--tx2);
  font-family: 'DM Mono', monospace;
  font-size: 10px;
  border-radius: 5px;
  cursor: pointer;
  transition: all .12s;
  text-transform: uppercase;
  letter-spacing: .8px;
}

.ctab:hover {
  border-color: #666;
  color: var(--tx);
}

.ctab.on {
  background: var(--a);
  border-color: var(--a);
  color: var(--a-txt);
}

.ctab.add {
  border-style: dashed;
  color: var(--tx3);
}

.ctab.add:hover {
  border-color: var(--a);
  color: var(--a);
}


/* ── PANELS ── */
.panel {
  background: var(--pn);
  border: 1px solid var(--br);
  border-radius: 10px;
  padding: 22px;
  margin-bottom: 14px;
}

.ptitle {
  font-size: 9px;
  letter-spacing: 2px;
  text-transform: uppercase;
  color: var(--tx3);
  margin-bottom: 14px;
}


/* ── EDIT CLIENT SECTIONS ── */
.esec {
  margin-bottom: 18px;
  padding-bottom: 18px;
  border-bottom: 1px solid var(--br);
}

.esec:last-child {
  border-bottom: none;
  margin-bottom: 0;
  padding-bottom: 0;
}

.esec-t {
  font-size: 9px;
  letter-spacing: 2px;
  text-transform: uppercase;
  color: var(--a);
  margin-bottom: 12px;
}


/* ── CLIENT PREVIEW ── */
.cprev {
  background: var(--inp);
  border: 1px solid var(--brd);
  border-radius: 5px;
  padding: 10px 14px;
  font-size: 10px;
  color: var(--tx2);
  line-height: 2;
  margin-top: 10px;
}

.cprev b      { color: #b8903a; }
.cprev .big   { font-size: 13px; color: #ede8e0; }


/* ── GRIDS ── */
.g2 { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.g3 { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 12px; }
.g4 { display: grid; grid-template-columns: repeat(4, 1fr); gap: 12px; }

.gf {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.gl {
  font-size: 8px;
  letter-spacing: 1.5px;
  text-transform: uppercase;
  color: var(--tx3);
}


/* ── FORM INPUTS ── */
input.ci,
select.ci,
textarea.ci {
  background: var(--inp);
  border: 1px solid var(--brd);
  color: #ddd;
  font-family: 'DM Mono', monospace;
  font-size: 11px;
  padding: 8px 10px;
  border-radius: 5px;
  outline: none;
  width: 100%;
  transition: border-color .1s;
}

input.ci:focus,
select.ci:focus,
textarea.ci:focus {
  border-color: var(--a);
}

input.ci[readonly] {
  opacity: .5;
  cursor: default;
}

select.ci option {
  background: #1e1b17;
}

textarea.ci {
  resize: vertical;
  line-height: 1.6;
}


/* ── BUTTONS ── */
.btn {
  padding: 8px 16px;
  border: 1px solid var(--brd);
  background: transparent;
  color: var(--tx2);
  font-family: 'DM Mono', monospace;
  font-size: 9px;
  letter-spacing: 1.2px;
  border-radius: 5px;
  cursor: pointer;
  transition: all .1s;
  text-transform: uppercase;
}

.btn:hover {
  border-color: var(--ui-a);
  color: var(--ui-a);
}

.btn.pr {
  background: var(--ui-a);
  border-color: var(--ui-a);
  color: var(--ui-txt);
}

.btn.pr:hover {
  background: var(--ui-dark);
}

.btn.dk         { color: #c44; }
.btn.dk:hover   { border-color: #c44; color: #c44; }

.btn.nav-on         { border-color: var(--a); color: var(--a); }
.btn.nav-on:hover   { border-color: var(--a); color: var(--a); }

.btn.go {
  background: var(--ui-a);
  border-color: var(--ui-a);
  color: var(--ui-txt);
  width: 100%;
  padding: 13px;
  font-size: 10px;
  letter-spacing: 1.5px;
  margin-top: 16px;
}

.btn.go:hover {
  background: var(--ui-dark);
}

.brow {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
  margin-top: 14px;
  align-items: center;
}


/* ── MODE TABS ── */
.tabrow {
  display: flex;
  gap: 4px;
  flex-wrap: wrap;
  margin-bottom: 14px;
}

.mtb {
  padding: 6px 14px;
  border: 1px solid var(--brd);
  background: transparent;
  color: var(--tx2);
  font-family: 'DM Mono', monospace;
  font-size: 10px;
  border-radius: 5px;
  cursor: pointer;
  transition: all .1s;
  text-transform: uppercase;
  letter-spacing: .8px;
}

.mtb:hover {
  border-color: #666;
  color: var(--tx);
}

.mtb.on {
  background: var(--a);
  border-color: var(--a);
  color: var(--a-txt);
}

.mtb.sm {
  padding: 4px 10px;
  font-size: 9px;
}

.mtb.sm.on {
  background: #2a2620;
  border-color: #666;
  color: #ddd;
}


/* ── BADGE ── */
.badge {
  display: inline-block;
  padding: 2px 8px;
  border-radius: 3px;
  font-size: 9px;
  background: var(--a-muted);
  color: var(--a);
  border: 1px solid var(--a-muted);
}


/* ── OPTIONS SECTION ── */
.opt-sec {
  border-top: 1px solid var(--br);
  margin-top: 16px;
  padding-top: 14px;
}

.opt-row {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 10px;
  flex-wrap: wrap;
}

.opt-row label {
  display: flex;
  align-items: center;
  gap: 7px;
  font-size: 10px;
  color: var(--tx2);
  cursor: pointer;
}

.opt-row input[type=checkbox] {
  width: 13px;
  height: 13px;
  accent-color: var(--a);
  cursor: pointer;
}

.adj-inp {
  display: none;
  align-items: center;
  gap: 6px;
}

.adj-inp.show    { display: flex; }
.adj-inp input.ci  { width: 80px; }
.adj-inp select.ci { width: 68px; }

.sect-lbl {
  font-size: 9px;
  letter-spacing: 2px;
  text-transform: uppercase;
  color: var(--tx3);
  margin-bottom: 8px;
}


/* ── LINE ITEMS ── */
.li-wrap {
  border-top: 1px solid var(--br);
  margin-top: 16px;
  padding-top: 14px;
}

.li-hd {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 10px;
}

.li-tbl {
  width: 100%;
  border-collapse: collapse;
  margin-bottom: 8px;
}

.li-tbl th {
  font-size: 8px;
  letter-spacing: 1.5px;
  text-transform: uppercase;
  color: var(--tx3);
  padding: 0 5px 7px 0;
  text-align: left;
  font-weight: 400;
  border-bottom: 1px solid var(--br);
}

.li-tbl th.r { text-align: right; }
.li-tbl td   { padding: 5px 5px 0 0; vertical-align: top; }

.li-inp {
  background: var(--inp);
  border: 1px solid var(--brd);
  color: #ddd;
  font-family: 'DM Mono', monospace;
  font-size: 11px;
  padding: 6px 7px;
  border-radius: 4px;
  outline: none;
  width: 100%;
  transition: border-color .1s;
}

.li-inp:focus { border-color: var(--a); }

.li-amt-cell {
  font-size: 11px;
  color: #b8903a;
  padding-top: 6px;
  text-align: right;
  font-weight: 500;
  white-space: nowrap;
  min-width: 90px;
}

.li-actions {
  white-space: nowrap;
  padding-top: 6px;
}

.li-btn {
  padding: 3px 7px;
  border: 1px solid var(--brd);
  background: transparent;
  color: var(--tx2);
  font-family: 'DM Mono', monospace;
  font-size: 11px;
  border-radius: 3px;
  cursor: pointer;
  transition: all .1s;
  margin-left: 3px;
}

.li-btn:hover         { border-color: var(--a); color: var(--a); }
.li-btn.red:hover     { border-color: #c04040; color: #c04040; }

.li-sub {
  display: flex;
  justify-content: flex-end;
  font-size: 11px;
  color: var(--tx2);
  padding: 8px 0 2px;
}

.li-sub b { color: #b8903a; margin-left: 8px; }


/* ── CLIENT DASHBOARD STATS ── */
.cd-stats {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 10px;
  margin-bottom: 14px;
}

.cd-stat {
  background: var(--inp);
  border: 1px solid var(--brd);
  border-radius: 7px;
  padding: 12px 14px;
}

.cd-stat-lbl {
  font-size: 8px;
  letter-spacing: 1.5px;
  text-transform: uppercase;
  color: var(--tx3);
  margin-bottom: 5px;
}

.cd-stat-val {
  font-size: 13px;
  color: #ede8e0;
  font-weight: 500;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.cd-stat-val.amber {
  color: #b8903a;
  font-family: 'Fraunces', serif;
  font-size: 13px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.cd-stat-val.green { color: #4ab464; }
.cd-stat-val.red   { color: #e05050; }


/* ── CLIENT DASHBOARD INFO ── */
.cd-info {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
  margin-bottom: 14px;
}

.cd-info-block {
  background: var(--inp);
  border: 1px solid var(--brd);
  border-radius: 7px;
  padding: 12px 14px;
}

.cd-info-lbl {
  font-size: 8px;
  letter-spacing: 1.5px;
  text-transform: uppercase;
  color: var(--tx3);
  margin-bottom: 6px;
}

.cd-info-val {
  font-size: 11px;
  color: #ddd;
  line-height: 1.8;
  white-space: pre-wrap;
  word-break: break-word;
}


/* ── INVOICE HISTORY TABLE ── */
.hist-filters {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
  margin-bottom: 10px;
}

.hist-filters input,
.hist-filters select {
  background: var(--inp);
  border: 1px solid var(--brd);
  color: #ddd;
  font-family: 'DM Mono', monospace;
  font-size: 10px;
  padding: 6px 9px;
  border-radius: 4px;
  outline: none;
  flex: 1;
  min-width: 90px;
}

.hist-filters input:focus,
.hist-filters select:focus { border-color: var(--a); }

.hist-filters select option { background: #1e1b17; }

.hist-empty {
  font-size: 11px;
  color: var(--tx3);
  text-align: center;
  padding: 20px 0;
}

.htbl {
  width: 100%;
  border-collapse: collapse;
}

.htbl th {
  font-size: 8px;
  letter-spacing: 1.5px;
  text-transform: uppercase;
  color: var(--tx3);
  padding: 0 8px 8px 0;
  text-align: left;
  font-weight: 400;
  border-bottom: 1px solid var(--br);
}

.htbl th.r { text-align: right; }

.htbl td {
  font-size: 11px;
  color: var(--tx2);
  padding: 9px 8px 0 0;
  vertical-align: middle;
  border-bottom: 1px solid rgba(255, 255, 255, .03);
}

.htbl td.hi    { color: #ddd; font-weight: 500; }
.htbl td.r     { text-align: right; }
.htbl td.amber { color: #b8903a; font-family: 'Fraunces', serif; font-size: 13px; }

.htbl tr:hover td { background: rgba(255, 255, 255, .015); }

.hb {
  padding: 2px 7px;
  border: 1px solid var(--brd);
  background: transparent;
  color: var(--tx2);
  font-family: 'DM Mono', monospace;
  font-size: 9px;
  border-radius: 3px;
  cursor: pointer;
  transition: all .1s;
  white-space: nowrap;
}

.hb:hover      { border-color: var(--a); color: var(--a); }
.hb.del:hover  { border-color: #c04040; color: #c04040; }

.hist-foot {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-top: 10px;
  padding-top: 10px;
  border-top: 1px solid var(--br);
}

.hb-clr {
  padding: 3px 10px;
  border: 1px solid var(--brd);
  background: transparent;
  color: var(--tx3);
  font-family: 'DM Mono', monospace;
  font-size: 9px;
  border-radius: 3px;
  cursor: pointer;
}

.hb-clr:hover { border-color: #c04040; color: #c04040; }


/* ── PAYMENT STATUS PILLS ── */
.pill {
  display: inline-block;
  padding: 2px 8px;
  border-radius: 10px;
  font-size: 9px;
  letter-spacing: .5px;
}

.pill.paid    { background: rgba(74, 180, 100, .12); color: #4ab464; border: 1px solid rgba(74, 180, 100, .25); }
.pill.pending { background: rgba(184, 144, 58, .12); color: #b8903a; border: 1px solid rgba(184, 144, 58, .25); }
.pill.unpaid  { background: rgba(220, 80, 80, .12);  color: #e05050; border: 1px solid rgba(220, 80, 80, .25); }


/* ── EMPTY STATE ── */
.empty-state {
  text-align: center;
  padding: 60px 20px;
}

.empty-state-icon  { font-size: 40px; margin-bottom: 16px; opacity: .4; }
.empty-state-title { font-family: 'Fraunces', serif; font-size: 22px; color: #ede8e0; font-weight: 300; margin-bottom: 8px; }
.empty-state-sub   { font-size: 11px; color: var(--tx3); margin-bottom: 24px; line-height: 1.7; }


/* ── ACTION BAR ── */
.abar {
  display: flex;
  gap: 6px;
  flex-wrap: wrap;
  margin-top: 12px;
  align-items: center;
}

.abar-sep  { width: 1px; height: 20px; background: var(--br); align-self: center; }
.abar-note { font-size: 9px; color: var(--tx3); }


/* ── INVOICE DOCUMENT ── */
.inv-wrap {
  display: none;
  margin-top: 4px;
}

.inv-doc {
  background: #fff;
  font-family: var(--inv-font);
  box-shadow: 0 4px 40px rgba(0, 0, 0, .5);
}

.inv-bar { height: 4px; background: var(--a); width: 100%; }

.inv-inner {
  padding: 40px 52px 48px;
  display: flex;
  flex-direction: column;
  min-height: calc(100% - 4px);
}

[contenteditable] { outline: none; }
[contenteditable]:hover  { background: var(--a-muted); opacity: .3; border-radius: 2px; }
[contenteditable]:focus  { background: var(--a-muted); opacity: .5; border-radius: 2px; }

/* Invoice header */
.ih  { display: flex; justify-content: space-between; align-items: flex-start; margin-bottom: 36px; gap: 20px; }
.ih-l { flex: 1; min-width: 0; }
.ih-r { text-align: right; flex-shrink: 0; }

.iname {
  font-family: 'Fraunces', serif !important;
  font-size: 24px;
  font-weight: 600;
  color: #0f0e0c;
  word-break: break-word;
  line-height: 1.2;
}

.irole {
  font-size: 11px;
  color: #8a8278;
  margin-top: 4px;
  word-break: break-word;
}

.iword {
  font-family: 'Fraunces', serif;
  font-size: 36px;
  font-weight: 300;
  font-style: italic;
  letter-spacing: -1px;
  display: block;
}

.inum {
  font-size: 12px;
  font-weight: 500;
  color: #0f0e0c;
  margin-top: 3px;
  text-align: right;
}

#i-logo {
  display: none;
  max-height: 56px;
  max-width: 150px;
  object-fit: contain;
  margin-bottom: 8px;
}

/* Invoice address block */
.iaddr {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 32px;
  margin-bottom: 28px;
  padding-bottom: 24px;
  border-bottom: 1px solid #d4cfc6;
}

.albl {
  font-size: 8px;
  letter-spacing: 2px;
  text-transform: uppercase;
  margin-bottom: 8px;
  font-weight: 500;
  display: block;
}

.ata {
  font-size: 12px;
  line-height: 1.8;
  color: #0f0e0c;
  word-break: break-word;
  min-height: 40px;
}

/* Invoice meta row */
.imeta {
  display: flex;
  flex-wrap: wrap;
  margin-bottom: 28px;
  padding-bottom: 20px;
  border-bottom: 1px solid #d4cfc6;
}

.mc      { flex: 1; min-width: 90px; padding-right: 14px; }
.mc-wide { flex: 2; min-width: 140px; }

.mli {
  font-size: 8px;
  letter-spacing: 1.8px;
  text-transform: uppercase;
  color: #8a8278;
  margin-bottom: 4px;
  display: block;
}

.mvi {
  font-size: 11px;
  color: #0f0e0c;
  font-weight: 500;
  display: block;
  line-height: 1.4;
  word-break: break-word;
}

/* Invoice line items */
.itbl { width: 100%; border-collapse: collapse; table-layout: fixed; }

.itbl thead tr { border-bottom: 1.5px solid #0f0e0c; }

.itbl th {
  font-size: 8px;
  letter-spacing: 1.8px;
  text-transform: uppercase;
  color: #8a8278;
  padding: 0 0 8px;
  text-align: left;
  font-weight: 400;
}

.itbl th.r { text-align: right; }
.itbl td   { padding: 12px 0 0; font-size: 13px; color: #0f0e0c; vertical-align: top; }
.itbl td.r { text-align: right; }

.tdm { font-size: 13px; font-weight: 500; word-break: break-word; display: block; }
.tds { font-size: 11px; color: #8a8278; margin-top: 3px; display: block; word-break: break-word; }
.tdr { text-align: right; word-break: break-word; display: block; }

/* Invoice totals */
.itot {
  display: flex;
  justify-content: flex-end;
  margin-top: 20px;
  padding-top: 16px;
  border-top: 1px solid #d4cfc6;
}

.tb2 { width: 280px; }

.tl {
  display: flex;
  justify-content: space-between;
  font-size: 12px;
  color: #8a8278;
  margin-bottom: 5px;
  gap: 8px;
}

.tl.gr {
  border-top: 2px solid #0f0e0c;
  margin-top: 8px;
  padding-top: 11px;
  font-size: 14px;
  color: #0f0e0c;
  font-weight: 500;
}

.ga { font-family: 'Fraunces', serif; font-size: 19px; }

/* Invoice payment section */
.ipay {
  margin-top: 32px;
  padding-top: 20px;
  border-top: 1px solid #d4cfc6;
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  gap: 14px 0;
}

.pc { padding-right: 14px; min-width: 0; overflow: hidden; }

.pl {
  font-size: 8px;
  letter-spacing: 1.8px;
  text-transform: uppercase;
  color: #8a8278;
  margin-bottom: 4px;
  display: block;
}

.pv {
  font-size: 12px;
  color: #0f0e0c;
  word-break: break-word;
  line-height: 1.6;
}

/* Invoice footer */
.ifoot {
  margin-top: auto;
  padding-top: 14px;
  border-top: 1px solid #d4cfc6;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 12px;
}

.fn  { font-size: 10px; color: #8a8278; font-style: italic; flex: 1; word-break: break-word; }
.fno { font-size: 10px; color: #8a8278; white-space: nowrap; }

/* B&W mode */
.inv-doc.bw .inv-bar          { background: #111; }
.inv-doc.bw .iword            { color: #111; }
.inv-doc.bw .albl             { color: #111; }
.inv-doc.bw .ga               { color: #111; }
.inv-doc.bw .itbl thead tr    { border-bottom-color: #111; }
.inv-doc.bw .tl.gr            { border-top-color: #111; }


/* ── EARNINGS CHART ── */
.chart-wrap {
  background: var(--pn);
  border: 1px solid var(--br);
  border-radius: 10px;
  padding: 18px;
  margin-bottom: 14px;
}

.chart-hd {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 16px;
  flex-wrap: wrap;
  gap: 8px;
}

.chart-title {
  font-size: 9px;
  letter-spacing: 2px;
  text-transform: uppercase;
  color: var(--tx3);
}

.chart-filters { display: flex; gap: 5px; flex-wrap: wrap; }

.cf-btn {
  padding: 4px 10px;
  border: 1px solid var(--brd);
  background: transparent;
  color: var(--tx2);
  font-family: 'DM Mono', monospace;
  font-size: 9px;
  border-radius: 4px;
  cursor: pointer;
  transition: all .1s;
}

.cf-btn:hover { border-color: #888; color: #ddd; }
.cf-btn.on    { background: var(--a); border-color: var(--a); color: var(--a-txt); }

.chart-summary {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 8px;
  margin-bottom: 16px;
}

.cs-item {
  background: var(--inp);
  border: 1px solid var(--brd);
  border-radius: 6px;
  padding: 10px 12px;
}

.cs-lbl {
  font-size: 8px;
  letter-spacing: 1.2px;
  text-transform: uppercase;
  color: var(--tx3);
  margin-bottom: 4px;
}

.cs-val {
  font-size: 13px;
  color: #ede8e0;
  font-weight: 500;
}

.cs-val.amber { color: #b8903a; font-family: 'Fraunces', serif; font-size: 15px; }
.cs-val.green { color: #4ab464; }

.chart-bars {
  display: flex;
  align-items: flex-end;
  gap: 4px;
  height: 110px;
  padding-bottom: 20px;
  position: relative;
  border-bottom: 1px solid var(--br);
  overflow: hidden;
}

.bar-col {
  display: flex;
  flex-direction: column;
  align-items: center;
  flex: 1;
  min-width: 0;
}

.bar-fill {
  background: var(--a);
  border-radius: 3px 3px 0 0;
  width: 100%;
  transition: height .3s;
  cursor: pointer;
  opacity: .85;
}

.bar-fill:hover { opacity: 1; }
.bar-fill.paid  { background: #4ab464; }

.bar-lbl {
  font-size: 8px;
  color: var(--tx3);
  margin-top: 5px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 100%;
  text-align: center;
}

.chart-legend {
  display: flex;
  gap: 14px;
  font-size: 9px;
  color: var(--tx3);
  margin-top: 10px;
}

.chart-empty {
  font-size: 11px;
  color: var(--tx3);
  text-align: center;
  padding: 30px 0;
  width: 100%;
}


/* ── CATALOG PAGE ── */
#v-catalog {
  max-width: 980px;
  margin: 0 auto;
  padding: 24px 16px;
}

.clist-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 14px 18px;
  border-bottom: 1px solid var(--br);
  transition: background .1s;
  flex-wrap: wrap;
  gap: 10px;
}

.clist-row:hover     { background: rgba(255, 255, 255, .02); }
.clist-row:last-child { border-bottom: none; }


/* ── PRINT ── */
@media print {
  * {
    -webkit-print-color-adjust: exact !important;
    print-color-adjust: exact !important;
  }

  body              { background: #fff !important; padding: 0 !important; }
  .hd, .cbar, .panel, .abar { display: none !important; }
  .inv-wrap         { display: block !important; max-width: 100% !important; margin: 0 !important; }
  .inv-doc          { box-shadow: none !important; }
}


/* ── RESPONSIVE ── */
@media (max-width: 640px) {
  .g2, .g3, .g4, .cd-stats, .cd-info { grid-template-columns: 1fr 1fr; }
  .iaddr    { grid-template-columns: 1fr; gap: 20px; }
  .inv-inner { padding: 28px 20px 36px; }
  .ipay     { grid-template-columns: 1fr 1fr; }
}

@media (max-width: 700px) {
  #cat-layout      { grid-template-columns: 1fr !important; }
  #sch-layout      { grid-template-columns: 1fr !important; }
  #ov-mid-grid     { grid-template-columns: 1fr !important; }
  .clist-row       { flex-direction: column; align-items: flex-start; }
  .clist-row > div:last-child { align-self: flex-end; }
}

@media (max-width: 600px) {
  html, body       { overflow-x: hidden; max-width: 100vw; }

  .app             { padding: 12px 10px; width: 100%; max-width: 100vw; overflow-x: hidden; }

  /* Header */
  .hd-top          { flex-wrap: wrap; gap: 6px; }
  .hd-top .logo    { font-size: 15px; }
  .hd-actions      { gap: 4px; flex-wrap: wrap; }
  .hd-actions .btn { font-size: 8px; padding: 6px 8px; letter-spacing: .8px; }

  /* Client tabs — horizontal scroll, hidden scrollbar */
  .cbar {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    flex-wrap: nowrap;
    padding-bottom: 4px;
    scrollbar-width: none;
  }
  .cbar::-webkit-scrollbar { display: none; }

  /* Stats — 2 columns */
  .chart-summary   { grid-template-columns: 1fr 1fr !important; }
  .cd-stats        { grid-template-columns: 1fr 1fr !important; }

  /* Info cards — 1 column */
  .cd-info, .g3, .g4 { grid-template-columns: 1fr !important; }
  .g2              { grid-template-columns: 1fr 1fr; }

  canvas           { max-width: 100% !important; height: auto !important; }

  /* Invoice form */
  .iaddr           { grid-template-columns: 1fr !important; gap: 16px; }
  .ipay            { grid-template-columns: 1fr !important; }

  /* History scrolls */
  #hist-wrap       { overflow-x: auto; -webkit-overflow-scrolling: touch; }
}