:root{
      --greenA: rgba(178, 255, 193, 0.90);
      --greenB: rgba(144, 238, 144, 0.78);

      --panel: rgba(255,255,255,0.08);
      --panelStroke: rgba(255,255,255,0.16);

      --accent: #61A4F7;

      /* black-friendly text */
      --ink: #111827;
      --ink2:#374151;
      --muted:#6B7280;
    }

    *{ box-sizing:border-box; }
    html,body{ height:100%; margin:0; font-family: system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif; }

    .bg{
      position: fixed; inset: 0;
      background-image: url("https://images.unsplash.com/photo-1500937386664-56d1dfef3854?auto=format&fit=crop&w=2400&q=80");
      background-size: cover; background-position: center;
      transform: scale(1.07);
      filter: blur(14px);
      opacity: 0.96;
      z-index: -2;
    }
    .overlay{
      position: fixed; inset: 0;
      background:
        radial-gradient(900px 520px at 50% 10%, rgba(255,255,255,0.14), transparent 55%),
        linear-gradient(180deg, rgba(0,0,0,0.70), rgba(0,0,0,0.30));
      z-index: -1;
    }

    .wrap{
      min-height: 100%;
      padding: calc(env(safe-area-inset-top) + 16px) 14px calc(env(safe-area-inset-bottom) + 18px);
      display: flex;
      flex-direction: column;
      gap: 16px;
      align-items: center;
    }

    .title-card{
      width: min(520px, 100%);
      text-align: center;
      padding: 16px;
      border-radius: 22px;
      background: linear-gradient(180deg, var(--greenA), var(--greenB));
      border: 1px solid rgba(255,255,255,0.35);
      box-shadow: 0 18px 50px rgba(0,0,0,0.42);
      overflow: hidden;
    }
    .title{
      margin: 0;
      color: #0b2a12;
      font-weight: 950;
      letter-spacing: 1.2px;
      text-transform: uppercase;
      font-size: clamp(34px, 8vw, 54px);
      text-shadow: 0 2px 0 rgba(255,255,255,0.35), 0 12px 26px rgba(0,0,0,0.35);
    }

    .panel{
      width: min(520px, 100%);
      border-radius: 24px;
      padding: 14px;
      background: var(--panel);
      border: 1px solid var(--panelStroke);
      backdrop-filter: blur(10px);
      -webkit-backdrop-filter: blur(10px);
      box-shadow: 0 18px 50px rgba(0,0,0,0.35);
    }

    .btn-grid{
      display: grid;
      grid-template-columns: repeat(2, minmax(0, 1fr));
      gap: 12px;
    }
    @media (min-width: 720px){
      .btn-grid{ grid-template-columns: repeat(3, minmax(0, 1fr)); }
    }

    .pill{
      width: 100%;
      border: 1px solid rgba(255,255,255,0.22);
      background: rgba(0,0,0,0.22);
      color: rgba(255,255,255,0.96);
      padding: 14px;
      border-radius: 999px;
      font-size: 15px;
      font-weight: 800;
      cursor: pointer;
      box-shadow: 0 12px 22px rgba(0,0,0,0.25);
      -webkit-tap-highlight-color: transparent;
    }
    .pill:active{ transform: scale(0.98); }
    .pill.primary{
      background: linear-gradient(135deg, rgba(255, 205, 95, 0.40), rgba(90, 190, 255, 0.30));
      border-color: rgba(255,255,255,0.40);
    }

    .hidden{ display:none !important; }

    /* Light panel for Ganna */
    .light-panel{
      background: rgba(255,255,255,0.92);
      border: 1px solid rgba(0,0,0,0.10);
      backdrop-filter: blur(12px);
      -webkit-backdrop-filter: blur(12px);
      color: var(--ink);
      box-shadow: 0 18px 50px rgba(0,0,0,0.30);
    }

    .topbar{
      display:flex;
      align-items:center;
      justify-content:space-between;
      gap:10px;
      margin-bottom:12px;
    }

    .light-panel .section-title{
      color: var(--ink);
      font-weight: 950;
      font-size: 16px;
      margin: 0;
      text-align: center;
      flex: 1;
    }

    .light-panel .back,
    .light-panel .settings{
      border-radius:999px;
      padding:10px 14px;
      border: 1px solid rgba(0,0,0,0.14);
      background: rgba(0,0,0,0.06);
      color: var(--ink);
      font-weight: 900;
      cursor:pointer;
      -webkit-tap-highlight-color: transparent;
      white-space: nowrap;
    }

    .tabs{
      display:flex;
      gap:10px;
      flex-wrap:wrap;
      margin-bottom:12px;
      padding: 10px;
      border-radius: 18px;
      background: rgba(255,255,255,0.98);
      border: 1px solid rgba(0,0,0,0.08);
      box-shadow: 0 10px 22px rgba(0,0,0,0.12);
    }

    .tab{
      border-radius:999px;
      padding:10px 12px;
      border: 1px solid rgba(0,0,0,0.12);
      background: rgba(0,0,0,0.06);
      color: var(--ink);
      font-weight: 950;
      cursor:pointer;
      flex: 1 1 auto;
      text-align:center;
      min-width: 130px;
      -webkit-tap-highlight-color: transparent;
    }
    .tab[aria-selected="true"]{
      background: rgba(0,0,0,0.12);
      border-color: rgba(0,0,0,0.18);
      box-shadow: inset 0 0 0 2px rgba(97, 164, 247, 0.25);
    }

    .light-panel .tab-content{
      border-radius: 18px;
      background: rgba(255,255,255,0.96);
      border: 1px solid rgba(0,0,0,0.08);
      padding: 14px;
      color: var(--ink2);
      line-height: 1.55;
      font-size: 14px;
      box-shadow: 0 10px 22px rgba(0,0,0,0.10);
    }
    .light-panel b{ color: var(--ink); }

    .form{ display:grid; gap:12px; margin-top: 8px; }
    .field{ display:grid; gap:6px; }

    .light-panel label{
      color: var(--ink);
      font-weight: 950;
      font-size: 13px;
    }

    .light-panel input,
    .light-panel select{
      width: 100%;
      padding: 12px;
      border-radius: 14px;
      border: 1px solid rgba(0,0,0,0.14);
      background: rgba(0,0,0,0.04);
      color: var(--ink);
      outline: none;
      font-size: 15px;
      appearance: none;
    }

    .light-panel select{
      background-image:
        linear-gradient(45deg, transparent 50%, rgba(17,24,39,0.7) 50%),
        linear-gradient(135deg, rgba(17,24,39,0.7) 50%, transparent 50%);
      background-position:
        calc(100% - 18px) calc(50% - 3px),
        calc(100% - 13px) calc(50% - 3px);
      background-size: 6px 6px, 6px 6px;
      background-repeat: no-repeat;
      padding-right: 36px;
    }

    .light-panel input::placeholder{ color: rgba(17,24,39,0.45); }
    .light-panel input:focus,
    .light-panel select:focus{
      border-color: rgba(97, 164, 247, 0.55);
      box-shadow: 0 0 0 3px rgba(97, 164, 247, 0.18);
    }

    .row-2{
      display:grid;
      grid-template-columns: 1fr 1fr;
      gap: 10px;
      align-items: start;
    }
    @media (max-width: 420px){
      .row-2{ grid-template-columns: 1fr 1fr; }
      .light-panel input, .light-panel select{ padding: 11px; font-size: 14px; }
    }

    .mini-label{
      font-weight: 950;
      font-size: 12px;
      color: var(--muted);
    }

    .light-panel .subnote{
      margin-top: -4px;
      color: var(--muted);
      font-size: 12px;
      line-height: 1.35;
    }

    .light-panel .save{
      border-radius: 999px;
      padding: 13px 14px;
      border: 1px solid rgba(0,0,0,0.14);
      background: rgba(97, 164, 247, 0.16);
      color: var(--ink);
      font-weight: 950;
      cursor: pointer;
      -webkit-tap-highlight-color: transparent;
    }

    .mini-card{
      border-radius: 16px;
      border: 1px solid rgba(0,0,0,0.10);
      background: rgba(255,255,255,0.98);
      padding: 12px;
      box-shadow: 0 8px 18px rgba(0,0,0,0.08);
    }

    .money-wrap{
      position: relative;
    }
    .money-wrap .rs{
      position: absolute;
      left: 12px;
      top: 50%;
      transform: translateY(-50%);
      font-weight: 900;
      color: rgba(17,24,39,0.70);
      pointer-events: none;
    }
    .money-wrap input{
      padding-left: 30px;
    }

    .light-panel .hint{
      margin-top: 10px;
      text-align:center;
      font-size: 13px;
      line-height: 1.45;
      color: var(--muted);
    }
   /* Compact summary card (slightly larger text) */
.summary-card{
  border-radius: 14px;
  border: 1px solid rgba(0,0,0,0.10);
  background: rgba(255,255,255,0.98);
  padding: 11px;
  box-shadow: 0 6px 14px rgba(0,0,0,0.07);
}

.summary-row{
  display:flex;
  align-items:flex-start;
  justify-content:space-between;
  gap: 10px;
}

.summary-date{
  font-weight: 950;
  color: var(--ink);
  font-size: 13px;   /* ↑ */
  line-height: 1.15;
}

.summary-sub{
  margin-top: 3px;
  font-weight: 850;
  color: var(--muted);
  font-size: 12px;   /* ↑ */
  line-height: 1.15;
}

.summary-holder-wrap{
  display:flex;
  flex-direction:column;
  align-items:flex-end;
  gap: 3px;
}

.summary-holder{
  font-weight: 950;
  color: var(--ink);
  font-size: 13px;   /* ↑ */
  line-height: 1.15;
  text-align: right;
}

.summary-weight{
  font-weight: 850;
  color: var(--muted);
  font-size: 12px;   /* ↑ */
  line-height: 1.15;
}

/* Total + Unpaid row */
.summary-chips-row{
  margin-top: 9px;
  display:flex;
  gap: 8px;
  align-items:center;
}

.summary-chips-row .summary-chip{
  flex: 1;
  text-align: center;
  padding: 7px 10px; /* ↑ */
  border-radius: 999px;
  border: 1px solid rgba(0,0,0,0.10);
  background: rgba(0,0,0,0.04);
  font-weight: 900;
  font-size: 12px;   /* ↑ */
  line-height: 1.15;
}

/* Make ganna panel a positioning context for overlay */
#gannaView{ position: relative; overflow: hidden; }

/* Full cover overlay */
.details-top .back,
.details-top .settings{
  padding: 7px 10px;
  border-radius: 999px;
  font-size: 12px;
  font-weight: 950;
  border: 1px solid rgba(85, 64, 64, 0.12);
  background: rgba(0,0,0,0.06);
  color: var(--ink);
  box-shadow: none;
}
.details-overlay{
  position: absolute;
  inset: 0;
  border-radius: 24px;
  background: rgba(255,255,255,0.96);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  padding: 12px;
  z-index: 50;
}

.details-card{
  height: 100%;
  border-radius: 18px;
  border: 1px solid rgba(0,0,0,0.10);
  background: rgba(255,255,255,0.98);
  box-shadow: 0 12px 30px rgba(0,0,0,0.12);
  display: flex;
  flex-direction: column;
  overflow: hidden;
}

.details-top{
  padding: 10px;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap: 10px;
  border-bottom: 1px solid rgba(0,0,0,0.08);
}

.details-title{
  font-weight: 950;
  color: var(--ink);
  font-size: 14px;
}

.details-body{
  padding: 12px;
  overflow: auto;
}

/* Detail rows */
.drow{
  display:flex;
  align-items:flex-start;
  justify-content:space-between;
  gap: 12px;
  padding: 10px 0;
  border-bottom: 1px solid rgba(0,0,0,0.08);
}
.drow:last-child{ border-bottom: none; }

.dlabel{
  color: var(--muted);
  font-weight: 900;
  font-size: 12px;
}
.dvalue{
  color: var(--ink);
  font-weight: 950;
  font-size: 13px;
  text-align: right;
}
/* Make the ganna panel keep height even when its children are hidden */
#gannaView{
  position: relative;
  min-height: 74vh;       /* key line */
  display: flex;
  flex-direction: column;
}

/* Ensure overlay fills the whole ganna panel */
.details-overlay{
  position: absolute;
  inset: 0;
  z-index: 50;
  border-radius: 24px;
}
.pay-title{
  font-weight: 950;
  color: var(--ink);
  font-size: 13px;
  margin-bottom: 8px;
}

.pay-grid{
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
}

.pay-actions{
  display:flex;
  gap: 10px;
  margin-top: 10px;
}

.pay-btn{
  flex: 1;
  border-radius: 999px;
  padding: 10px 12px;
  border: 1px solid rgba(0,0,0,0.14);
  font-weight: 950;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
  background: rgba(97,164,247,0.16);
  color: var(--ink);
}
.pay-btn:active{ transform: scale(0.98); }

.pay-list{
  display:grid;
  gap: 8px;
}

.pay-item{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap: 10px;
  padding: 10px 12px;
  border-radius: 14px;
  border: 1px solid rgba(0,0,0,0.10);
  background: rgba(0,0,0,0.03);
}

.pay-item .left{
  display:flex;
  flex-direction:column;
  gap: 2px;
}
.pay-item .pdate{
  font-weight: 950;
  color: var(--ink);
  font-size: 12px;
}
.pay-item .pid{
  font-weight: 850;
  color: var(--muted);
  font-size: 11px;
}

.pay-item .amt{
  font-weight: 950;
  color: var(--ink);
  font-size: 13px;
}
.modal{
  position: absolute;
  inset: 0;
  z-index: 80;
  display:flex;
  align-items:center;
  justify-content:center;
  padding: 14px;
  background: rgba(0,0,0,0.35);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  border-radius: 24px;
}

.modal-card{
  width: min(520px, 100%);
  max-height: 92%;
  overflow: hidden;
  border-radius: 18px;
  border: 1px solid rgba(0,0,0,0.12);
  background: rgba(255,255,255,0.98);
  box-shadow: 0 18px 50px rgba(0,0,0,0.25);
  display:flex;
  flex-direction:column;
}

.modal-top{
  display:flex;
  align-items:center;
  justify-content:space-between;
  padding: 10px 12px;
  border-bottom: 1px solid rgba(0,0,0,0.08);
}

.modal-title{
  font-weight: 950;
  color: var(--ink);
  font-size: 14px;
}

.icon-btn{
  border: 1px solid rgba(0,0,0,0.12);
  background: rgba(0,0,0,0.06);
  color: var(--ink);
  border-radius: 999px;
  padding: 6px 10px;
  font-weight: 950;
  font-size: 12px;
  cursor:pointer;
}

.modal-body{
  padding: 12px;
  overflow:auto;
}

.modal-actions{
  padding: 10px 12px;
  border-top: 1px solid rgba(0,0,0,0.08);
  display:flex;
  gap: 10px;
}

.pill-lite{
  flex:1;
  border-radius:999px;
  padding: 11px 12px;
  border: 1px solid rgba(0,0,0,0.14);
  background: rgba(0,0,0,0.06);
  font-weight: 950;
  color: var(--ink);
  cursor:pointer;
}

.pill-primary{
  flex:1;
  border-radius:999px;
  padding: 11px 12px;
  border: 1px solid rgba(97,164,247,0.35);
  background: rgba(97,164,247,0.18);
  font-weight: 950;
  color: var(--ink);
  cursor:pointer;
}

.pill-lite:active, .pill-primary:active, .icon-btn:active{ transform: scale(0.98); }

/* Review mode: make header left and hide the Review button */
/* Review mode header centered */
#gannaView.review-mode .topbar{ position: relative; }
#gannaView.review-mode .section-title{
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  text-align: center;
  flex: 0;
}
#gannaView.review-mode #reviewBtn{ display:none; }

/* Keep Review content inside the Ganna panel (no leaking below the panel) */
#gannaView.review-mode #reviewView{
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 12px;
  min-height: 0; /* allow children to scroll */
}
#gannaView.review-mode #reviewView .sheet-wrap{
  flex: 1;
  max-height: none; /* let it use available space */
}




.sheet-wrap{
  overflow:auto;
  border-radius: 14px;
  border: 1px solid rgba(0,0,0,0.10);
  background: rgba(255,255,255,0.98);
  box-shadow: 0 8px 18px rgba(0,0,0,0.08);
}

.sheet{
  width: 100%;
  border-collapse: separate;
  border-spacing: 0;
  min-width: 720px; /* allows horizontal scroll on mobile */
  font-size: 12px;
  color: var(--ink);
}

.sheet thead th{
  position: sticky;
  top: 0;
  background: rgba(255,255,255,0.98);
  z-index: 1;
  text-align: left;
  padding: 10px 10px;
  font-weight: 950;
  border-bottom: 1px solid rgba(0,0,0,0.10);
  white-space: nowrap;
}

.sheet td{
  padding: 10px 10px;
  border-bottom: 1px solid rgba(0,0,0,0.08);
  white-space: nowrap;
}

.sheet tbody tr:last-child td{ border-bottom: none; }
.sheet tbody tr:hover td{ background: rgba(0,0,0,0.03); }
/* Review table: vertical scroll after ~8 rows (JS will set exact height) */
#reviewView .sheet-wrap{
  max-height: 70vh;      /* fallback */
  overflow: auto;
}

.metrics-row{
  display:flex;
  gap:10px;
  flex-wrap: wrap;
}
.metric{
  flex: 1;
  min-width: 140px;
  border: 1px solid rgba(0,0,0,0.10);
  background: rgba(0,0,0,0.03);
  border-radius: 14px;
  padding: 10px;
}
.mlabel{
  font-size: 11px;
  font-weight: 900;
  color: var(--muted);
}
.mval{
  margin-top: 4px;
  font-size: 13px;
  font-weight: 950;
  color: var(--ink);
}

.filter-bar{
  display:flex;
  gap:10px;
  flex-wrap: wrap;
}

.chip-btn{
  border-radius: 999px;
  padding: 8px 12px;
  border: 1px solid rgba(0,0,0,0.12);
  background: rgba(0,0,0,0.05);
  color: var(--ink);
  font-weight: 950;
  font-size: 12px;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}
.chip-btn.active{
  background: rgba(97,164,247,0.18);
  border-color: rgba(97,164,247,0.35);
}
.chip-btn:active{ transform: scale(0.98); }


/* Compact filter chips */
.chip-btn{
  padding: 6px 10px;     /* smaller */
  font-size: 11px;       /* smaller text */
  font-weight: 950;
  border-radius: 999px;
  line-height: 1.1;
  min-height: 30px;      /* tap friendly */
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

/* Tighter wrap and spacing for filter row */
#reviewView .mini-card > div:last-child{
  gap: 6px !important;
}


@page{
  size: A4 landscape;
  margin: 8mm;
}

@media print{
/* --- Print/PDF layout fixes --- */
html, body{ background:#fff !important; }
.bg, .overlay{ display:none !important; }
.title-card{ display:none !important; }

/* remove width constraints so the sheet can use full A4 */
.wrap{ padding:0 !important; max-width:none !important; width:100% !important; align-items:stretch !important; }
.panel, .light-panel{
  max-width:none !important;
  width:100% !important;
  border-radius:0 !important;
  box-shadow:none !important;
  background: transparent !important;
  border:none !important;
  backdrop-filter:none !important;
  -webkit-backdrop-filter:none !important;
  padding:0 !important;
}
#gannaView{ min-height:auto !important; overflow:visible !important; }
/* hide the filter card completely (avoid blank empty box) */
#reviewFiltersCard{ display:none !important; }

  /* hide everything except review content */
  #homeView, .topbar, .tabs, #entryDetails, #editModal { display:none !important; }

  #gannaView{ display:block !important; }
  #reviewView{ display:block !important; padding:0 !important; margin:0 !important; }

  /* remove the review header (buttons/title/status) */
  #reviewHeaderBar{ display:none !important; }

  /* make cards become "flat" full-page sections */
  .mini-card{
    box-shadow:none !important;
    border:none !important;
    background: transparent !important;
    padding:0 !important;
    margin:0 0 8mm 0 !important;
  }

  /* table uses full page */
  #reviewView .sheet-wrap{
    max-height:none !important;
    overflow:visible !important;
    border:none !important;
    box-shadow:none !important;
    background: transparent !important;
    border-radius:0 !important;
  }

  .sheet{
    width: 100% !important;
    min-width: 0 !important;
    font-size: 11px !important;
  }

  .sheet th, .sheet td{
    padding: 6px 6px !important;
    white-space: normal !important;
  }

  /* hide filter chips in print */
  .chip-btn{ display:none !important; }
}

.toast{
  position: fixed;
  left: 50%;
  bottom: 18px;
  transform: translateX(-50%);
  padding: 10px 14px;
  border-radius: 999px;
  background: rgba(0,0,0,0.78);
  color: #fff;
  font-weight: 900;
  font-size: 12px;
  z-index: 9999;
  box-shadow: 0 10px 30px rgba(0,0,0,0.25);
}
.toast.hidden{ display:none; }

#summaryList{
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
}