@import url('https://fonts.googleapis.com/css2?family=Plus+Jakarta+Sans:wght@400;500;600;700;800&display=swap');
:root{color-scheme:dark;--bg:#0c0c11;--panel:#14141d;--line:#2b2938;--muted:#a0a6ba;--purple:#9815f5;--green:#50e6a3}*{box-sizing:border-box}body{margin:0;background:var(--bg);color:#f5f4ff;font:14px Inter,system-ui,sans-serif}main{width:min(95%,1900px);margin:25px auto 60px}header,.period,.toolbar,.actions{display:flex;justify-content:space-between;align-items:center;gap:12px}header{padding-bottom:15px;border-bottom:1px solid var(--line);margin-bottom:12px}h1,h2,p{margin:0}h1{font-size:23px}h2{font-size:16px}p,small,label{color:var(--muted)}header p,.toolbar small{display:block;margin-top:4px}section,dialog{background:var(--panel);border:1px solid var(--line);border-radius:9px;padding:15px;margin-bottom:12px}.period{border-color:#44245d}.period strong,.stats strong{display:block;margin-top:5px}.period strong,.id{color:#dfb3ff}.period form{display:flex;gap:8px}.stats{display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:9px}.stats section{border-bottom:2px solid #7432a6;padding-bottom:20px}.stats strong{font-size:22px}.green{color:var(--green);font-weight:700}.filters{display:grid;grid-template-columns:2fr repeat(3,1fr);gap:10px;margin-top:12px}label{display:grid;gap:5px;font-size:12px}input,select,button{font:inherit;border:1px solid var(--line);border-radius:6px;padding:9px 11px;color:inherit}input,select{background:#0d0d13;min-width:0}button{cursor:pointer;background:var(--purple);color:white;font-weight:700}.secondary{background:#21172d;border-color:#513068}.orders{padding:0}.toolbar{padding:14px}.scroll{overflow:auto}table{border-collapse:collapse;width:100%;text-align:left;font-size:12px}th{background:#1b1b25;color:#bcc2d5;text-transform:uppercase;font-size:10px}th,td{padding:12px 9px;border-bottom:1px solid #242330;white-space:nowrap}tbody tr:hover{background:#1a1723}.badge{display:inline-block;padding:4px 7px;border-radius:12px;background:#342d46;font-size:10px;font-weight:750}.category-0{background:#6128a0}.category-1{background:#5941a4}.category-2,.success,.status-1{background:#105641}.category-4,.status-2{background:#782547}.waiting,.status-0{background:#654017}.notice,#empty{padding:12px}.login{max-width:390px;margin:14vh auto}.login form,dialog form{display:grid;gap:10px;margin-top:10px}dialog{width:min(460px,92vw);color:inherit;max-height:90vh}dialog::backdrop{background:#000a}.actions{justify-content:flex-end;margin-top:8px}@media(max-width:850px){.stats{grid-template-columns:repeat(3,1fr)}.filters{grid-template-columns:1fr 1fr}}@media(max-width:460px){.stats{grid-template-columns:1fr 1fr}.period{align-items:flex-start;flex-direction:column}.filters{grid-template-columns:1fr}}
:root{--bg:#171b22;--panel:#1d222b;--line:#354154;--muted:#abb6c8}
body{font-family:"Plus Jakarta Sans",system-ui,sans-serif}
.stats .metric{background:linear-gradient(145deg,var(--shade),var(--base));border:1px solid var(--edge);position:relative;overflow:hidden}
.metric-0{--shade:#414b61;--base:#262e3f;--edge:#56637b}
.metric-1{--shade:#98471e;--base:#512309;--edge:#ba622b}
.metric-2{--shade:#852f47;--base:#4b1729;--edge:#ac465d}
.metric-3{--shade:#305fa4;--base:#1c345b;--edge:#4c76b0}
.metric-4{--shade:#6b429c;--base:#382252;--edge:#8a5eb3}
.metric-5{--shade:#137a52;--base:#064631;--edge:#369b73;box-shadow:inset 0 1px #9fffd97a,0 6px 22px #031c1460}
.stats small{color:#f3f4ff}.stats .green{color:#d3ffeb}
.metric-5::after{content:"";position:absolute;inset:0;pointer-events:none;background:linear-gradient(155deg,#cbffe43b 0%,transparent 55%)}
th{background:#242b37}th,td{border-color:#354154}tbody tr[data-order]{cursor:pointer}tbody tr:hover{background:#262d39}
.order-link{background:none;border:0;padding:0;color:#e0c6ff;text-decoration:underline}
.row-actions{display:flex;align-items:center;gap:5px}.notes-button{font-size:16px;line-height:1}.has-notes{color:#ffcf75;border-color:#a96b37}
.badge[class*="method-"]{display:inline-flex;align-items:center;gap:5px;border-radius:5px;padding:4px 7px}
.method-paypal{background:#263b62;color:#b6d2ff}.method-paypal-ff{background:#52331e;color:#ffc093}
.method-free{background:#4b3b19;color:#ffdd77}.method-revolut{background:#38375b;color:#dbd6ff}.method-crypto{background:#4d371e;color:#ffc57e}
.method-cashapp,.method-wise{background:#214a36;color:#a6edb2}.method-skrill{background:#542848;color:#ffbce9}
.order-details{width:min(760px,94vw)}.detail-grid{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.order-details header{margin-bottom:15px}.detail-grid section{background:#191e27;margin:0}.detail-grid h3{margin:0 0 12px}
dl{display:grid;grid-template-columns:auto 1fr;gap:12px;margin:0}dt{color:var(--muted)}dd{margin:0}
textarea{width:100%;resize:vertical;color:inherit;background:#151a23;border:1px solid var(--line);border-radius:6px;padding:10px;font:inherit}
.clear-password{display:flex;align-items:center}.saved-password{overflow-wrap:anywhere}
@media(max-width:620px){.detail-grid{grid-template-columns:1fr}}

dialog:modal{position:fixed;inset:0;margin:auto;max-height:calc(100dvh - 32px);overflow:auto}
button:not(.order-link):not(.metric-trigger),.badge{background-image:linear-gradient(170deg,#ffffff26 0%,#ffffff08 42%,transparent 56%);box-shadow:inset 0 1px #ffffff24}
.badge.waiting{background-color:#b54a0a;color:#fff4e9}
.badge.success,.badge.status-1{background-color:#097c4d;color:#effff7}
.metric-1{--shade:#56361f;--base:#30241e;--edge:#68452d}
.metric-2{--shade:#51303b;--base:#30232c;--edge:#67414c}
.metric-3{--shade:#263e59;--base:#222d3d;--edge:#3b536e}
.metric-4{--shade:#403252;--base:#2c2538;--edge:#534468}
.stats .metric-5 strong{font-size:26px}
.metric-4:has(.metric-trigger){padding:0}
.metric-trigger{display:block;width:100%;height:100%;text-align:left;border:0;background:transparent;border-radius:inherit;padding:15px 15px 20px}
.metric-trigger:hover{background:#ffffff10}.metric-trigger:focus-visible{outline-offset:-4px}
.method-icon{display:grid;place-items:center;width:15px;height:15px;border-radius:3px;background:#ffffff22;font-size:11px;font-weight:800}
.method-revolut{background-color:#343442;color:#fff}.method-venmo{background-color:#174b73;color:#c9efff}
.method-zelle{background-color:#512588;color:#f4e5ff}.method-card{background-color:#37485f;color:#e0eeff}
.method-cashapp{background-color:#135735;color:#b6ffcf}.method-skrill{background-color:#692349;color:#ffd2e7}
.year-controls,.invoice-item{display:flex;align-items:center;justify-content:space-between;gap:10px}
.month-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:8px}
.month-grid [aria-pressed=true]{background-color:#7916b7;border-color:#cb79ff}
.order-details{width:min(1480px,96vw);background:#101116;padding:12px}
.invoice-hero{padding:16px;margin:0 0 12px;background:#181a21;border:1px solid #2a2d39;border-radius:8px;align-items:flex-start}
.invoice-hero h2{font-size:28px;margin:5px 0 10px}.invoice-tags{display:flex;align-items:center;flex-wrap:wrap;gap:6px}
.invoice-grid{display:grid;grid-template-columns:minmax(0,2fr) minmax(0,1fr);gap:12px}
.invoice-stack{display:grid;align-content:start;gap:12px}.invoice-stack section{margin:0;background:#181a21;border-color:#2a2d39}
.invoice-stack h3{margin:0 0 12px;padding-bottom:10px;border-bottom:1px solid #2a2d39;font-size:12px;text-transform:uppercase;letter-spacing:.04em;color:#b6bdcf}
.summary-list{grid-template-columns:minmax(0,1fr) minmax(0,1fr);align-items:center;gap:0}
.summary-list dt,.summary-list dd{padding:8px 0;border-bottom:1px solid #2a2d39;overflow-wrap:anywhere}
.summary-list dd{text-align:right}
.timeline{margin:0;padding:0 0 0 20px}.timeline li{padding:6px 0 10px}.timeline time{display:block;color:var(--muted);margin-top:3px}
@media(max-width:800px){.invoice-grid{grid-template-columns:1fr}}


:root {
  --bg: #100f15;
  --panel: var(--bg);
  --line: #292732;
  --muted: #b3b3b3;
}
input, select, textarea, th,
.order-details, .invoice-hero, .invoice-stack section, .detail-grid section {
  background: var(--panel);
  border-color: var(--line);
}
th, td, .invoice-stack h3, .summary-list dt, .summary-list dd {
  border-color: var(--line);
}
tbody tr:hover { background: #191720; }
.stats .metric {
  background: var(--panel);
  border: 1px solid var(--line);
  border-bottom-color: var(--edge);
  box-shadow: none;
}
.stats .metric-5 {
  background: linear-gradient(145deg, #168755, #06472e 75%);
  border-color: #34bf85;
  box-shadow: inset 0 1px #b9ffe488;
}
.metric-5 > * { position: relative; z-index: 1; }

.order-details .summary-list { grid-template-columns: minmax(0, 1fr); }
.summary-row {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  align-items: center;
  gap: 12px;
  padding: 8px 0;
  border-bottom: 1px solid var(--line);
}
.summary-list .summary-row > * { padding: 0; border: 0; }
input:focus-visible, select:focus-visible, textarea:focus-visible {
  outline: 2px solid #c477ff;
  outline-offset: 2px;
}

.stats .metric-1,
.stats .metric-2,
.stats .metric-3,
.stats .metric-4 {
  background: linear-gradient(145deg, var(--shade), var(--base));
  border-color: var(--edge);
}
.metric-1 { --shade: #a34a00; --base: #542300; --edge: #ff9d35; }
.metric-2 { --shade: #b02049; --base: #590d29; --edge: #ff6087; }
.metric-3 { --shade: #174ed4; --base: #102a75; --edge: #6695ff; }
.metric-4 { --shade: #7728c6; --base: #421076; --edge: #ba79ff; }

.badge[class*="method-"] {
  background-color: var(--method-color, #324d74);
  color: #fff;
}
.method-paypal { --method-color: #164ba8; }
.method-paypal-ff { --method-color: #a14708; }
.method-free { --method-color: #765500; }
.method-revolut { --method-color: #5137a7; }
.method-crypto { --method-color: #924707; }
.method-cashapp, .method-wise { --method-color: #08633e; }
.method-skrill { --method-color: #90266f; }
.method-venmo { --method-color: #1260a6; }
.method-zelle { --method-color: #6925ba; }
.method-card { --method-color: #215ab5; }

.badge.waiting, .badge.status-0 {
  background-color: #ad4100;
  color: #fff;
}

.timeline { list-style: none; padding: 0; }
.timeline li { position: relative; padding-left: 34px; }
.timeline li:not(:last-child)::before {
  content: "";
  position: absolute;
  left: 11px;
  top: 28px;
  bottom: -6px;
  border-left: 1px solid var(--line);
}
.timeline-icon {
  position: absolute;
  left: 0;
  top: 5px;
  display: grid;
  place-items: center;
  width: 24px;
  height: 24px;
  border: 1px solid var(--line);
  border-radius: 6px;
  background: #191820;
  color: #b3b3b3;
}
.timeline-icon svg { width: 15px; height: 15px; }
.timeline-icon-completed { color: #50e6a3; background: #10261d; border-color: #20563d; }

button:not(.metric-trigger):not(.order-link), .badge,
.badge[class*="method-"] {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 4px;
  min-height: 21px;
  padding: 2px 8px;
  border: 1px solid color-mix(in srgb, currentColor 23%, transparent);
  border-radius: 5px;
  background: color-mix(in srgb, currentColor 12%, var(--panel));
  box-shadow: none;
  font-size: 11px;
  font-weight: 700;
  line-height: 15px;
  white-space: nowrap;
}
button:not(.metric-trigger):not(.order-link) { color: #d29aff; }
button.secondary:not(.metric-trigger) { color: #d8cbe6; }
button.has-notes:not(.metric-trigger) { color: #ffcf75; }
button:not(.metric-trigger):not(.order-link):hover {
  background: color-mix(in srgb, currentColor 22%, var(--panel));
}
.badge { color: #cfb3ed; }
.badge.success, .badge.status-1 { color: #50e6a3; }
.badge.waiting, .badge.status-0 { color: #ff9c52; }
.badge.status-2, .badge.category-4 { color: #ff8cb7; }
.badge[class*="method-"] { color: color-mix(in srgb, var(--method-color, #324d74) 55%, white); }
.method-icon, .badge[class*="method-"] img { width: 12px; height: 12px; font-size: 9px; }
.month-grid button[aria-pressed=true] { color: #f3dbff; border-color: #ba79ff; }

/* Apply the same outlined treatment to every compact badge and action. */
button:not(.metric-trigger):not(.order-link),
.badge.badge,
.badge[class*="method-"] {
  border-color: color-mix(in srgb, currentColor 28%, transparent);
  background: color-mix(in srgb, currentColor 14%, var(--panel));
  box-shadow: none;
}
.badge.success, .badge.status-1 { color: #42f5a0; }
.badge.waiting, .badge.status-0 { color: #ffad58; }
.badge.status-2, .badge.category-4 { color: #ff83ba; }
.badge[class*="method-"] {
  color: var(--method-accent, #a7ceff);
  text-transform: uppercase;
}
.method-paypal { --method-accent: #80bdff; }
.method-paypal-ff, .method-crypto { --method-accent: #ffb255; }
.method-free { --method-accent: #ffe270; }
.method-revolut { --method-accent: #ae9aff; }
.method-cashapp, .method-wise { --method-accent: #59f29e; }
.method-skrill { --method-accent: #ff83dc; }
.method-venmo, .method-card { --method-accent: #78caff; }
.method-zelle { --method-accent: #cb94ff; }


.badge .method-icon {
  flex: 0 0 14px;
  width: 14px;
  height: 14px;
  border: 1px solid color-mix(in srgb, currentColor 32%, transparent);
  border-radius: 3px;
  background: color-mix(in srgb, currentColor 18%, var(--panel));
}
.badge .method-icon img { width: 10px; height: 10px; object-fit: contain; }

.badge[class*="method-"] {
  gap: 6px;
  min-height: 26px;
  padding: 3px 8px 3px 5px;
  border-radius: 7px;
}
.badge .method-icon {
  flex-basis: 18px;
  width: 18px;
  height: 18px;
  border: 0;
  border-radius: 5px;
  background: var(--method-color, #324d74);
  color: #fff;
  font-size: 12px;
}
.method-cashapp { --method-color: #008a36; }
.method-zelle { --method-color: #7929d6; }
.method-crypto { --method-color: #b45b00; }
.badge .method-icon img { width: 13px; height: 13px; }
.row-actions button.secondary:not(.metric-trigger) {
  min-height: 36px;
  min-width: 36px;
  padding: 8px 11px;
  border-radius: 6px;
  border-color: #513068;
  background: linear-gradient(165deg, #382948, #21172d);
  color: #fff;
  font-size: 12px;
}
.row-actions button.secondary:not(.metric-trigger):hover { background: #49305e; }
.row-actions button.has-notes:not(.metric-trigger) { color: #ffcf75; }

.edit-order input, .edit-order select { padding-inline-start: 7px; }
button.delete-order:not(.metric-trigger) { margin-right: auto; color: #ff646b; }
.badge.status-2 { color: #ff646b; }
.badge.method-revolut { --method-accent: #fff; --method-color: #fff; }
.badge.method-revolut .method-icon { color: #111; }
button[data-dialog="new-order"]:not(.metric-trigger),
button[data-dialog="choose-month"]:not(.metric-trigger) {
  min-height: 36px;
  padding: 8px 13px;
  font-size: 13px;
}

.invoice-tags > .badge {
  width: min(118px, 100%);
  height: 27px;
  border-radius: 6px;
  padding: 3px 6px;
  white-space: normal;
  overflow-wrap: anywhere;
  overflow: hidden;
}
.edit-order .actions button:not(.metric-trigger),
.delete-confirmation .actions button:not(.metric-trigger) {
  min-height: 35px;
  padding: 7px 11px;
  font-size: 12px;
}
.delete-confirmation { width: min(390px, 92vw); }
button.confirm-delete:not(.metric-trigger) { color: #ff646b; }

.invoice-hero > div { flex: 1; min-width: 0; }
.invoice-tags { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); width: min(366px, 100%); }
.invoice-tags > .badge { width: 100%; min-width: 0; }

.notes-dialog .actions button:not(.metric-trigger) {
  min-height: 35px;
  padding: 7px 11px;
  font-size: 12px;
}
.notes-button { position: relative; }
.notes-button[data-note-version]::after {
  content: "";
  position: absolute;
  top: -3px;
  right: -3px;
  width: 9px;
  height: 9px;
  background: #ff424c;
  border: 1px solid var(--panel);
  border-radius: 50%;
  pointer-events: none;
}