/* =========================================================
   TrashIQ Customer Portal – portal.css (Jungle Green • Glass)
   ========================================================= */

/* Safe-area + palette */
:root {
  --sat: env(safe-area-inset-top);
  --sab: env(safe-area-inset-bottom);

  /* Base jungle palette */
  --ti-bg: #08110d;
  --ti-bg-2: #0a1912;
  --ti-bg-3: #08110d;

  --ti-card: rgba(20, 38, 28, 0.45);
  --ti-border: rgba(60, 100, 80, 0.35);

  --ti-text: #ecfdf5;
  --ti-muted: #a7c4b3;

  --ti-accent: #16a34a;   /* jungle primary */
  --ti-accent-2: #34d399; /* lighter accent */

  /* KPI theme tints (soft & comfortable) */
  --kpi1-a: 25, 130, 90;   /* balance: emerald */
  --kpi2-a: 18, 114, 110;  /* invoiced: teal */
  --kpi3-a: 78, 87, 170;   /* paid: indigo */
  --kpi4-a: 184, 129, 29;  /* count: amber */
}

.safe-bottom { padding-bottom: max(.5rem, var(--sab)); }

/* Background stack (ambient gradients + grid + noise) */
.app-bg, .app-grid, .app-vignette, .app-noise { position: fixed; inset: 0; pointer-events: none; }
.app-bg {
  z-index: 0;
  background:
    radial-gradient(1400px 800px at 20% 10%, rgba(22,163,74,0.20), transparent 60%),
    radial-gradient(1000px 700px at 80% 90%, rgba(52,211,153,0.18), transparent 60%),
    linear-gradient(180deg, var(--ti-bg) 0%, var(--ti-bg-2) 60%, var(--ti-bg-3) 100%);
}
.app-grid {
  z-index: 1; opacity: .05;
  background-image:
    linear-gradient(to right, #fff 1px, transparent 1px),
    linear-gradient(to bottom, #fff 1px, transparent 1px);
  background-size: 44px 44px;
}
.app-vignette {
  z-index: 2;
  background: radial-gradient(ellipse at center, transparent 60%, rgba(0,0,0,.5) 100%);
}
.app-noise {
  z-index: 3; opacity: .06;
  background-image: url("data:image/svg+xml;utf8,\
  <svg xmlns='http://www.w3.org/2000/svg' width='140' height='140' viewBox='0 0 140 140'>\
    <filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='4' stitchTiles='stitch'/></filter>\
    <rect width='100%' height='100%' filter='url(%23n)' opacity='0.35'/>\
  </svg>");
  background-size: 140px 140px;
}

/* Base layout */
body.ti-portal {
  background: transparent; color: var(--ti-text);
  font: 14px/1.5 system-ui, -apple-system, Segoe UI, Roboto, Arial;
  margin: 0;
}
.ti-container {
  position: relative; z-index: 4;
  max-width: 1100px; margin: 16px auto 96px; padding: 0 12px;
}

/* NAV (desktop + mobile) */
.ti-header{
  position: sticky; top: 0; z-index: 10;
  padding: 10px 14px; border-bottom: 1px solid var(--ti-border);
  background: rgba(8,17,13,.65); backdrop-filter: blur(10px);
}
.ti-brand{display:flex;align-items:center;justify-content:space-between;gap:12px}
.ti-brand .brand{display:flex;align-items:center;gap:8px;text-decoration:none}

.ti-nav{display:flex;align-items:center;gap:10px}
.ti-nav a{
  color:var(--ti-muted); text-decoration:none; padding:8px 10px; border-radius:10px;
  transition: background .2s ease, color .2s ease;
}
.ti-nav a:hover{ color:#09110d; background: var(--ti-accent) }
.ti-nav a.logout{ border:1px solid var(--ti-accent); color: var(--ti-text); background: rgba(22,163,74,.1) }
.ti-nav a.logout:hover{ background: var(--ti-accent); color: #000 }

.nav-toggle{display:none;background:transparent;border:0;padding:8px;border-radius:10px;cursor:pointer}
.nav-toggle span{display:block;width:22px;height:2px;background:var(--ti-text);margin:4px 0;border-radius:2px}

@media (max-width: 880px){
  .nav-toggle{display:flex;align-items:center;justify-content:center}
  .ti-nav{
    position:fixed; top:56px; left:12px; right:12px; display:none; flex-direction:column; gap:8px;
    background:rgba(8,17,13,.92); border:1px solid var(--ti-border); border-radius:14px; padding:10px; z-index:20; backdrop-filter: blur(12px);
  }
  .ti-nav.open{ display:flex }
  .ti-nav a{ width:100%; text-align:center }
}

/* Cards / grid */
.grid-4{
  display:grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 16px; align-items: stretch;
}
.card{
  background: var(--ti-card);
  border:1px solid var(--ti-border);
  border-radius:16px; padding:16px;
  display:flex; flex-direction:column; justify-content:center; min-height:120px;
  box-shadow:0 10px 30px rgba(0,0,0,.25);
  backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px);
  transition: transform .18s ease, border-color .18s ease, box-shadow .18s ease;
}
.card:hover{ transform: translateY(-2px); border-color: rgba(255,255,255,.12); box-shadow:0 16px 36px rgba(0,0,0,.3) }

.card-title{ font-weight:600; margin-bottom:8px; color: var(--ti-accent) }
.kpi-label{ color:var(--ti-muted); font-size:13px; letter-spacing:.2px }
.kpi-value{ font-size:22px; font-weight:700; margin-top:6px; color:var(--ti-text) }

/* KPI color variants (calm gradients) */
.kpi {
  position: relative; overflow: hidden;
}
.kpi::before {
  content:""; position:absolute; inset:-1px; border-radius:inherit; z-index:0;
  background: linear-gradient(135deg, rgba(255,255,255,.06), rgba(255,255,255,.02));
}
.kpi > * { position: relative; z-index: 1; }

.kpi-balance{
  background: linear-gradient(180deg, rgba(var(--kpi1-a),.22), rgba(var(--kpi1-a),.10));
  border-color: rgba(var(--kpi1-a), .35);
}
.kpi-invoiced{
  background: linear-gradient(180deg, rgba(var(--kpi2-a),.22), rgba(var(--kpi2-a),.10));
  border-color: rgba(var(--kpi2-a), .35);
}
.kpi-paid{
  background: linear-gradient(180deg, rgba(var(--kpi3-a),.22), rgba(var(--kpi3-a),.10));
  border-color: rgba(var(--kpi3-a), .35);
}
.kpi-count{
  background: linear-gradient(180deg, rgba(var(--kpi4-a),.22), rgba(var(--kpi4-a),.10));
  border-color: rgba(var(--kpi4-a), .35);
}

/* Inline “Last Payment” row (sleek) */
.card-row{
  display:flex; align-items:center; gap:10px; flex-wrap:wrap;
  background: var(--ti-card); border:1px solid var(--ti-border); border-radius:14px;
  padding:12px 16px; backdrop-filter: blur(12px);
}
.card-row .row-label{ font-weight:700; color: var(--ti-accent) }
.card-row .row-value{ color: var(--ti-text); font-size:14px }
.badge{
  display:inline-flex; align-items:center; gap:6px;
  padding:4px 8px; border-radius:999px; font-size:12px;
  background: rgba(255,255,255,.08); border:1px solid rgba(255,255,255,.12);
  color: var(--ti-text);
}

/* Tables (responsive stack) */
.table{ width:100%; border-collapse: collapse; }
.table th, .table td{ padding:10px; border-bottom:1px solid var(--ti-border); text-align:left }
.table th{ color:var(--ti-muted); font-weight:500; font-size:13px }
.table tbody tr:hover { background: rgba(255,255,255,.03); }

@media (max-width: 700px){
  .table thead{ display:none }
  .table tr{
    display:grid; grid-template-columns:1fr 1fr; gap:6px;
    padding:10px 0; border-bottom:1px solid var(--ti-border);
  }
  .table td{ display:flex; justify-content:space-between; border:0; padding:4px 0 }
  .table td::before{ content: attr(data-label); color: var(--ti-muted); margin-right:12px }
}

/* Invoice detail layout */
.invoice-grid{ display:grid; grid-template-columns:1fr 1fr; gap:12px }
@media (max-width: 900px){ .invoice-grid{ grid-template-columns:1fr } }
.items-table .table td:nth-child(2),
.items-table .table td:nth-child(3),
.items-table .table td:nth-child(4){ white-space: nowrap }

/* Buttons & footer */
.btn{
  display:inline-flex; align-items:center; justify-content:center;
  padding:8px 12px; border-radius:10px;
  border:1px solid var(--ti-accent);
  background: rgba(22,163,74,.12);
  color: var(--ti-text); text-decoration:none;
  transition: background .2s ease, color .2s ease, border-color .2s ease;
}
.btn:hover{ background: var(--ti-accent); color:#000; border-color: var(--ti-accent) }

.ti-footer{
  position:fixed; left:0; right:0; bottom:0; z-index:9;
  display:flex; align-items:center; justify-content:center; gap:12px;
  padding:10px 16px; padding-bottom: max(10px, var(--sab));
  border-top:1px solid var(--ti-border);
  background: rgba(8,17,13,.7); backdrop-filter: blur(10px);
  color: var(--ti-muted); font-size:13px;
}

/* Spacing utilities (comfortable rhythm) */
.stack-lg > * + * { margin-top: 20px; }
.stack-md > * + * { margin-top: 14px; }

@media (max-width: 600px){
  .kpi-value{ font-size:20px }
  .card{ padding:14px }
  .ti-container{ margin:12px auto 96px }
}

/* Focus rings (accessibility) */
a:focus, button:focus, .btn:focus, .nav-toggle:focus{
  outline: 2px solid var(--ti-accent-2);
  outline-offset: 2px; border-radius: 6px;
}


/* -------- Responsive Table Enhancements -------- */

.table-wrap {
  position: relative;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  border-radius: 12px;
}

/* Soft scroll edge shadows (toggle via JS class) */
.table-wrap::before,
.table-wrap::after {
  content: "";
  position: absolute;
  top: 0; bottom: 0;
  width: 20px;
  pointer-events: none;
  z-index: 2;
  opacity: 0;
  transition: opacity .2s ease;
}
.table-wrap::before {
  left: 0;
  background: linear-gradient(to right, rgba(0,0,0,.25), transparent);
}
.table-wrap::after {
  right: 0;
  background: linear-gradient(to left, rgba(0,0,0,.25), transparent);
}
.table-wrap.scrolling-left::before { opacity: 1; }
.table-wrap.scrolling-right::after { opacity: 1; }

/* Make tables comfy on desktop and keep width on small screens */
.table {
  min-width: 720px; /* let small screens scroll instead of cramping */
}

/* Sticky header for wide/tablet views */
.table thead th {
  position: sticky;
  top: 0;
  z-index: 1;
  backdrop-filter: blur(8px);
  background: rgba(12, 22, 17, 0.8); /* jungle glass */
}

/* Subtle row hover */
.table tbody tr:hover {
  background: rgba(255,255,255,.04);
}

/* --- Ultra-small phones: convert rows into stacked "cards" --- */
@media (max-width: 480px) {
  .table { min-width: 0; }          /* allow stacking mode */
  .table thead { display: none; }   /* no header; use data-labels instead */

  .table tbody tr {
    display: grid;
    grid-template-columns: 1fr;
    gap: 8px;
    padding: 12px 8px;
    border-bottom: 1px solid var(--ti-border);
    border-radius: 12px;
    background: rgba(255,255,255,.02);
  }

  .table tbody td {
    display: grid;
    grid-template-columns: 140px 1fr; /* label | value */
    align-items: center;
    gap: 10px;
    border: none;
    padding: 0;
  }

  .table tbody td::before {
    content: attr(data-label);
    color: var(--ti-muted);
    font-size: 12px;
    text-transform: none;
    letter-spacing: .2px;
  }

  /* Buttons expand to full width at the row end */
  .table tbody td:last-child a.btn {
    width: 100%;
    justify-content: center;
  }
}

/* Buttons: never spill, wrap nicely, and go full-width when stacked */
.btn{
  display:inline-flex; align-items:center; justify-content:center;
  padding:8px 12px; border-radius:10px; border:1px solid var(--ti-accent);
  background: rgba(22,163,74,.12); color: var(--ti-text); text-decoration:none;
  transition:.2s; max-width:100%; white-space: normal; word-break: break-word;
}

/* On tiny stacked rows, action button goes full width */
@media (max-width: 480px){
  .table tbody td:last-child .btn{
    width:100%; display:flex; justify-content:center;
  }
}

/* Pagination buttons wrap nicely on small screens */
.pager{
  display:flex; gap:8px; flex-wrap:wrap; justify-content:flex-end; align-items:center; margin-top:12px;
}
.pager .btn{ padding:8px 10px }
.pager .btn.is-disabled{ opacity:.5; pointer-events:none; }
.pager .page-indicator{ color: var(--ti-muted); font-size:13px; padding:6px 0 }


/* --- Fix mobile Open button overflow and alignment --- */
@media (max-width: 480px) {
  /* Shrink the action cell and align to left */
  .table tbody td.actions {
    display: flex !important;
    justify-content: flex-start !important;
    align-items: center !important;
    padding-right: 0;
    margin: 0;
    overflow: hidden;
  }

  /* Make the button small and never wider than the screen */
  .table tbody td.actions .btn,
  .table tbody td.actions .btn-sm {
    width: auto;
    max-width: 100%;
    padding: 4px 8px;
    font-size: 12px;
    border-radius: 6px;
    line-height: 1.2;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }

  /* Prevent table wrapper from creating horizontal scroll */
  .table-wrap {
    overflow-x: hidden !important;
  }
}

/* ===== Distinguish invoice rows ===== */

/* Desktop/tablet: zebra + subtle hover */
.table.table--zebra tbody tr:nth-child(even) {
  background: rgba(255,255,255,.03);
}
.table.table--zebra tbody tr:hover {
  background: rgba(255,255,255,.06);
}

/* Mobile: turn each row into a card with spacing between rows */
@media (max-width: 700px) {
  .table.table--cards tbody tr {
    background: rgba(255,255,255,.03);
    border: 1px solid var(--ti-border);
    border-radius: 12px;
    padding: 12px 10px;
    box-shadow: 0 4px 16px rgba(0,0,0,.20);
  }
  .table.table--cards tbody tr + tr {
    margin-top: 12px;        /* separation between invoices */
  }
  /* Keep the inner grid look from your responsive table rules */
  .table.table--cards tbody td {
    padding: 0;               /* we already add padding on the row card */
    border: 0;
  }
}

/* Tiny phones: a touch more spacing */
@media (max-width: 480px) {
  .table.table--cards tbody tr {
    padding: 12px;
    border-radius: 14px;
  }
}

/* Optional: status badges for quick scanning */
.badge-status {
  display:inline-flex; align-items:center; gap:6px;
  font-size:12px; padding:3px 8px; border-radius:999px;
  border:1px solid rgba(255,255,255,.12);
  background: rgba(255,255,255,.08);
  color: var(--ti-text);
}
.badge-status--unpaid,
.badge-status--overdue { border-color: rgba(255,70,70,.35); background: rgba(255,70,70,.10); }
.badge-status--partly-paid { border-color: rgba(255,180,50,.35); background: rgba(255,180,50,.10); }
.badge-status--paid { border-color: rgba(60,200,120,.35); background: rgba(60,200,120,.10); }