@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&display=swap');


/* =========================================================
   VARIABLES
========================================================= */

:root {
  --primary: #2563eb;
  --primary-dark: #1d4ed8;
  --primary-soft: #eff6ff;

  --text: #172033;
  --text-secondary: #334155;

  --muted: #64748b;
  --muted-light: #94a3b8;

  --border: #e5e7eb;
  --border-light: #eef2f7;

  --surface: #ffffff;
  --background: #f5f7fb;

  --success: #15803d;
  --success-bg: #f0fdf4;

  --warning: #c2410c;
  --warning-bg: #fff7ed;

  --danger: #b91c1c;
  --danger-bg: #fef2f2;

  --shadow-sm:
    0 1px 2px rgba(15, 23, 42, 0.04);

  --shadow:
    0 10px 35px rgba(15, 23, 42, 0.07);

  --radius: 16px;
}


/* =========================================================
   RESET
========================================================= */

* {
  box-sizing: border-box;
}


html {
  min-height: 100%;
}


body {
  min-height: 100vh;

  margin: 0;

  font-family:
    Inter,
    -apple-system,
    BlinkMacSystemFont,
    "Segoe UI",
    sans-serif;

  background: var(--background);

  color: var(--text);

  -webkit-font-smoothing: antialiased;
}


button,
input {
  font: inherit;
}


button {
  -webkit-tap-highlight-color: transparent;
}


.hidden {
  display: none !important;
}


/* =========================================================
   PAGE
========================================================= */

.page-shell {
  width: min(
    1180px,
    calc(100% - 40px)
  );

  min-height: 100vh;

  margin: 0 auto;

  display: flex;

  flex-direction: column;
}


/* =========================================================
   HEADER
========================================================= */

.site-header {
  padding: 30px 0 10px;
}


.brand {
  display: inline-flex;

  align-items: center;

  gap: 11px;
}


.brand-mark {
  width: 42px;
  height: 42px;

  display: grid;

  place-items: center;

  border-radius: 12px;

  background: var(--primary);

  color: white;

  font-size: 19px;

  font-weight: 700;

  box-shadow:
    0 5px 15px
    rgba(37, 99, 235, 0.22);
}


.brand-name {
  font-size: 15px;

  font-weight: 700;

  line-height: 1.2;
}


.secure-label {
  display: flex;

  align-items: center;

  gap: 5px;

  margin-top: 3px;

  color: var(--muted);

  font-size: 11px;
}


.secure-dot {
  width: 6px;
  height: 6px;

  border-radius: 50%;

  background: #22c55e;
}


/* =========================================================
   MAIN
========================================================= */

#app {
  flex: 1;

  padding:
    34px 0
    45px;
}


/* =========================================================
   HERO
========================================================= */

.hero {
  display: flex;

  justify-content: space-between;

  align-items: flex-end;

  gap: 30px;

  margin-bottom: 30px;
}


.hero h1 {
  margin: 0;

  font-size:
    clamp(
      28px,
      4vw,
      36px
    );

  line-height: 1.15;

  letter-spacing: -0.03em;
}


.eyebrow {
  display: block;

  margin-bottom: 8px;

  color: var(--primary);

  font-size: 11px;

  font-weight: 700;

  letter-spacing: 0.09em;
}


.hero-copy {
  max-width: 610px;

  margin:
    9px 0 0;

  color: var(--muted);

  font-size: 14px;

  line-height: 1.6;
}


/* =========================================================
   CUSTOMER CARD
========================================================= */

.customer-card {
  min-width: 230px;

  padding:
    15px 18px;

  border:
    1px solid var(--border);

  border-radius: 12px;

  background:
    var(--surface);

  box-shadow:
    var(--shadow-sm);
}


.customer-label {
  display: block;

  margin-bottom: 5px;

  color: var(--muted-light);

  font-size: 10px;

  font-weight: 700;

  letter-spacing: 0.08em;
}


.customer-card strong {
  display: block;

  overflow: hidden;

  color: var(--text);

  font-size: 14px;

  text-overflow: ellipsis;

  white-space: nowrap;
}


/* =========================================================
   ERROR
========================================================= */

.message {
  margin-bottom: 24px;

  padding:
    15px 17px;

  border:
    1px solid transparent;

  border-radius: 12px;

  font-size: 14px;

  line-height: 1.5;
}


.error {
  border-color: #fecaca;

  background:
    var(--danger-bg);

  color:
    var(--danger);
}


/* =========================================================
   LOADING
========================================================= */

.loading-card {
  min-height: 180px;

  display: flex;

  align-items: center;

  justify-content: center;

  gap: 10px;

  border:
    1px solid var(--border);

  border-radius:
    var(--radius);

  background:
    var(--surface);

  color:
    var(--muted);

  font-size: 14px;

  box-shadow:
    var(--shadow-sm);
}


.spinner {
  width: 18px;
  height: 18px;

  border:
    2px solid #dbeafe;

  border-top-color:
    var(--primary);

  border-radius: 50%;

  animation:
    spin 0.75s linear infinite;
}


@keyframes spin {
  to {
    transform: rotate(360deg);
  }
}


/* =========================================================
   MAIN GRID
========================================================= */

.content-grid {
  display: grid;

  grid-template-columns:
    minmax(0, 1fr)
    340px;

  gap: 24px;

  align-items: start;
}


/* =========================================================
   INVOICE PANEL
========================================================= */

.invoice-panel {
  min-width: 0;

  overflow: hidden;

  border:
    1px solid var(--border);

  border-radius:
    var(--radius);

  background:
    var(--surface);

  box-shadow:
    var(--shadow-sm);
}


/* =========================================================
   PANEL HEADER
========================================================= */

.panel-header {
  min-height: 82px;

  display: flex;

  align-items: center;

  justify-content: space-between;

  gap: 20px;

  padding:
    18px 21px;

  border-bottom:
    1px solid var(--border);
}


.panel-header h2 {
  margin: 0;

  font-size: 17px;

  letter-spacing: -0.01em;
}


.panel-header p {
  margin:
    4px 0 0;

  color: var(--muted);

  font-size: 12px;
}


/* =========================================================
   SELECT ALL
========================================================= */

.select-all {
  display: inline-flex;

  align-items: center;

  gap: 8px;

  flex-shrink: 0;

  color: #475569;

  font-size: 13px;

  font-weight: 600;

  cursor: pointer;

  user-select: none;
}


.select-all input,
table input {
  width: 17px;
  height: 17px;

  margin: 0;

  accent-color:
    var(--primary);

  cursor: pointer;
}


/* =========================================================
   TABLE
========================================================= */

.table-wrap {
  width: 100%;

  overflow-x: auto;
}


table {
  width: 100%;

  min-width: 680px;

  border-collapse: collapse;
}


th {
  padding:
    12px 18px;

  background:
    #f8fafc;

  color:
    #64748b;

  text-align: left;

  font-size: 10px;

  font-weight: 700;

  letter-spacing: 0.07em;

  text-transform: uppercase;

  white-space: nowrap;
}


td {
  padding:
    17px 18px;

  border-top:
    1px solid var(--border-light);

  color:
    var(--text-secondary);

  font-size: 13px;

  vertical-align: middle;
}


tbody tr {
  transition:
    background 0.15s ease;
}


tbody tr:hover {
  background:
    #f8fbff;
}


.checkbox-col {
  width: 50px;
}


.amount-col {
  text-align: right;
}


td:nth-child(5) {
  color:
    var(--text);

  text-align: right;

  font-weight: 600;

  white-space: nowrap;
}


td:nth-child(2) {
  color:
    var(--text);

  font-weight: 600;
}


/* =========================================================
   STATUS BADGE
========================================================= */

.badge {
  display: inline-flex;

  align-items: center;

  min-height: 25px;

  padding:
    4px 9px;

  border-radius: 999px;

  background:
    var(--warning-bg);

  color:
    var(--warning);

  font-size: 11px;

  font-weight: 600;

  white-space: nowrap;
}


/* =========================================================
   PAYMENT SUMMARY
========================================================= */

.summary {
  position: sticky;

  top: 20px;

  padding: 22px;

  border:
    1px solid var(--border);

  border-radius:
    var(--radius);

  background:
    var(--surface);

  box-shadow:
    var(--shadow);
}


.summary-heading {
  display: flex;

  align-items: flex-start;

  justify-content: space-between;

  gap: 12px;
}


.summary-eyebrow {
  display: block;

  margin-bottom: 5px;

  color:
    var(--muted-light);

  font-size: 10px;

  font-weight: 700;

  letter-spacing: 0.08em;
}


.summary h2 {
  margin: 0;

  font-size: 18px;

  letter-spacing: -0.02em;
}


.invoice-count {
  flex-shrink: 0;

  padding:
    5px 8px;

  border-radius: 7px;

  background:
    var(--primary-soft);

  color:
    var(--primary);

  font-size: 10px;

  font-weight: 700;
}


/* =========================================================
   SUMMARY ROWS
========================================================= */

.summary-lines {
  margin-top: 23px;
}


.summary-row {
  display: flex;

  justify-content: space-between;

  gap: 20px;

  margin: 14px 0;

  color:
    var(--muted);

  font-size: 13px;
}


.summary-row strong {
  color:
    var(--text);

  font-weight: 600;

  white-space: nowrap;
}


.summary-row.deduction strong {
  color:
    var(--success);
}


.summary-row small {
  color:
    var(--muted-light);

  font-size: 11px;
}


.summary-divider {
  height: 1px;

  margin:
    21px 0;

  background:
    var(--border);
}


/* =========================================================
   TOTAL
========================================================= */

.total-row {
  display: flex;

  align-items: center;

  justify-content: space-between;

  gap: 15px;
}


.total-row span {
  color:
    #475569;

  font-size: 13px;

  font-weight: 600;
}


.total-row strong {
  color:
    var(--text);

  font-size: 23px;

  letter-spacing: -0.025em;

  white-space: nowrap;
}


/* =========================================================
   PAY BUTTON
========================================================= */

.pay-button {
  width: 100%;

  min-height: 49px;

  display: flex;

  align-items: center;

  justify-content: center;

  gap: 10px;

  margin-top: 23px;

  padding:
    12px 18px;

  border: 0;

  border-radius: 10px;

  background:
    var(--primary);

  color: #fff;

  font-size: 14px;

  font-weight: 700;

  cursor: pointer;

  box-shadow:
    0 7px 17px
    rgba(37, 99, 235, 0.18);

  transition:
    background 0.18s ease,
    transform 0.18s ease,
    box-shadow 0.18s ease;
}


.pay-button:hover:not(:disabled) {
  background:
    var(--primary-dark);

  transform:
    translateY(-1px);

  box-shadow:
    0 9px 20px
    rgba(37, 99, 235, 0.22);
}


.pay-button:active:not(:disabled) {
  transform:
    translateY(0);
}


.pay-button:disabled {
  background:
    #cbd5e1;

  box-shadow:
    none;

  cursor:
    not-allowed;
}


.button-arrow {
  font-size: 17px;

  line-height: 1;
}


/* =========================================================
   PAYMENT NOTE
========================================================= */

.payment-note {
  display: flex;

  align-items: center;

  justify-content: center;

  gap: 5px;

  margin:
    13px 0 0;

  color:
    var(--muted-light);

  text-align: center;

  font-size: 10px;

  line-height: 1.5;
}


.mobile-payment-note {
  display: none;
}


/* =========================================================
   FOOTER
========================================================= */

.site-footer {
  display: flex;

  justify-content: center;

  gap: 8px;

  padding-bottom: 25px;

  color:
    var(--muted-light);

  font-size: 10px;
}


.footer-separator {
  color:
    #cbd5e1;
}


/* =========================================================
   MODAL
========================================================= */

.modal {
  position: fixed;

  inset: 0;

  z-index: 1000;

  display: grid;

  place-items: center;

  padding: 20px;
}


.modal-backdrop {
  position: absolute;

  inset: 0;

  background:
    rgba(15, 23, 42, 0.48);

  backdrop-filter:
    blur(3px);
}


.modal-card {
  position: relative;

  width:
    min(480px, 100%);

  max-height:
    calc(100vh - 40px);

  overflow-y: auto;

  padding:
    28px;

  border:
    1px solid
    rgba(255, 255, 255, 0.7);

  border-radius:
    20px;

  background:
    #fff;

  box-shadow:
    0 25px 70px
    rgba(15, 23, 42, 0.2);

  animation:
    modal-in 0.18s ease-out;
}


@keyframes modal-in {

  from {
    opacity: 0;

    transform:
      translateY(8px)
      scale(0.985);
  }

  to {
    opacity: 1;

    transform:
      translateY(0)
      scale(1);
  }

}


/* =========================================================
   MODAL CLOSE
========================================================= */

.modal-close {
  position: absolute;

  top: 17px;

  right: 17px;

  width: 34px;

  height: 34px;

  border: 0;

  border-radius: 8px;

  background:
    #f8fafc;

  color:
    #64748b;

  font-size: 23px;

  line-height: 1;

  cursor: pointer;
}


.modal-close:hover {
  background:
    #f1f5f9;

  color:
    var(--text);
}


/* =========================================================
   MODAL ICON
========================================================= */

.modal-icon {
  width: 43px;

  height: 43px;

  display: grid;

  place-items: center;

  margin-bottom: 18px;

  border-radius: 12px;

  background:
    var(--primary-soft);

  color:
    var(--primary);

  font-weight: 700;
}


/* =========================================================
   MODAL HEADING
========================================================= */

.modal-heading h2 {
  margin: 0;

  font-size: 23px;

  letter-spacing: -0.025em;
}


.modal-heading p {
  margin:
    7px 0 0;

  color:
    var(--muted);

  font-size: 12px;

  line-height: 1.5;
}


/* =========================================================
   MODAL INVOICES
========================================================= */

.modal-invoices {
  margin-top: 22px;

  padding: 14px;

  border:
    1px solid var(--border);

  border-radius: 11px;

  background:
    #f8fafc;
}


.modal-list-heading {
  display: flex;

  justify-content: space-between;

  gap: 10px;

  margin-bottom: 7px;

  color:
    #475569;

  font-size: 11px;

  font-weight: 700;
}


#modalList {
  max-height: 160px;

  overflow-y: auto;

  margin: 0;

  padding: 0;

  list-style: none;
}


#modalList li {
  display: flex;

  justify-content: space-between;

  gap: 15px;

  padding:
    9px 0;

  border-top:
    1px solid #e2e8f0;

  color:
    #334155;

  font-size: 12px;
}


#modalList li:first-child {
  border-top: 0;
}


/* =========================================================
   MODAL TOTAL
========================================================= */

.modal-total {
  display: flex;

  align-items: center;

  justify-content: space-between;

  gap: 15px;

  margin-top: 19px;
}


.modal-total span {
  color:
    #475569;

  font-size: 13px;

  font-weight: 600;
}


.modal-total strong {
  font-size: 22px;

  letter-spacing: -0.02em;
}


.hint {
  margin:
    5px 0 0;

  color:
    var(--muted-light);

  text-align: right;

  font-size: 10px;
}


/* =========================================================
   MODAL ACTIONS
========================================================= */

.actions {
  display: grid;

  grid-template-columns:
    1fr 1.6fr;

  gap: 10px;

  margin-top: 22px;
}


.secondary-button,
.confirm-button {
  min-height: 45px;

  padding:
    11px 16px;

  border-radius: 9px;

  font-size: 13px;

  font-weight: 700;

  cursor: pointer;

  transition:
    background 0.18s ease,
    transform 0.18s ease,
    opacity 0.18s ease;
}


.secondary-button {
  border:
    1px solid var(--border);

  background:
    #fff;

  color:
    #475569;
}


.secondary-button:hover {
  background:
    #f8fafc;
}


.confirm-button {
  display: flex;

  align-items: center;

  justify-content: center;

  gap: 9px;

  border: 0;

  background:
    var(--primary);

  color: #fff;
}


.confirm-button:hover:not(:disabled) {
  background:
    var(--primary-dark);

  transform:
    translateY(-1px);
}


.confirm-button:disabled {
  opacity: 0.6;

  cursor:
    not-allowed;
}


.modal-security {
  margin:
    13px 0 0;

  color:
    var(--muted-light);

  text-align: center;

  font-size: 10px;
}


/* =========================================================
   FOCUS
========================================================= */

button:focus-visible,
input:focus-visible {
  outline:
    3px solid
    rgba(37, 99, 235, 0.2);

  outline-offset: 2px;
}


/* =========================================================
   TABLET
========================================================= */

@media (max-width: 900px) {

  .content-grid {
    grid-template-columns:
      1fr;
  }


  .summary {
    position:
      static;
  }


  .hero {
    align-items:
      flex-start;
  }


  .customer-card {
    min-width:
      210px;
  }

}


/* =========================================================
   MOBILE
========================================================= */

@media (max-width: 650px) {

  .page-shell {
    width:
      min(
        100% - 20px,
        1180px
      );
  }


  .site-header {
    padding-top:
      20px;
  }


  #app {
    padding-top:
      25px;
  }


  .hero {
    display:
      block;

    margin-bottom:
      23px;
  }


  .customer-card {
    width:
      100%;

    min-width:
      0;

    margin-top:
      18px;
  }


  .hero h1 {
    font-size:
      27px;
  }


  .hero-copy {
    font-size:
      13px;
  }


  .panel-header {
    min-height:
      72px;

    padding:
      15px;
  }


  .panel-header p {
    display:
      none;
  }


  th,
  td {
    padding:
      14px 12px;
  }


  .table-wrap {
    overflow-x:
      auto;
  }


  .mobile-payment-note {
    display:
      flex;

    align-items:
      center;

    justify-content:
      center;

    gap:
      6px;

    padding:
      13px;

    border-top:
      1px solid var(--border-light);

    color:
      var(--muted-light);

    font-size:
      10px;
  }


  .summary {
    padding:
      19px;
  }


  .summary-total strong {
    font-size:
      21px;
  }


  .site-footer {
    padding-bottom:
      18px;
  }


  .modal {
    padding:
      10px;
  }


  .modal-card {
    max-height:
      calc(100vh - 20px);

    padding:
      23px 19px;

    border-radius:
      17px;
  }


  .actions {
    grid-template-columns:
      1fr;
  }


  .confirm-button {
    order:
      -1;
  }

}


/* =========================================================
   SMALL MOBILE
========================================================= */

@media (max-width: 430px) {

  .brand-name {
    font-size:
      14px;
  }


  .panel-header {
    gap:
      10px;
  }


  .panel-header h2 {
    font-size:
      15px;
  }


  .select-all {
    font-size:
      12px;
  }


  .summary-row {
    font-size:
      12px;
  }


  .total-row strong {
    font-size:
      20px;
  }

}
.pay-loading {
  position: fixed;
  inset: 0;
  z-index: 9999;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(15, 23, 42, 0.45);
  backdrop-filter: blur(2px);
}

.pay-loading.hidden {
  display: none;
}

.pay-loading-card {
  background: #fff;
  border-radius: 12px;
  padding: 28px 32px;
  text-align: center;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.15);
  max-width: 320px;
}

.pay-loading-card .spinner {
  display: inline-block;
  width: 36px;
  height: 36px;
  margin-bottom: 14px;
  border: 3px solid #e5e7eb;
  border-top-color: #2563eb;
  border-radius: 50%;
  animation: spin 0.8s linear infinite;
}

.pay-loading-card p {
  margin: 0 0 6px;
  font-size: 16px;
  font-weight: 600;
  color: #0f172a;
}

.pay-loading-card small {
  color: #64748b;
  font-size: 13px;
  line-height: 1.4;
}

@keyframes spin {
  to { transform: rotate(360deg); }
}
.inv-link {
  color: #2563eb;
  text-decoration: none;
  font-weight: 600;
}
.inv-link:hover {
  text-decoration: underline;
}