:root {
  color-scheme: light;
  --ink: #15201d;
  --muted: #66736f;
  --line: #d9e2dd;
  --panel: #ffffff;
  --soft: #f4f7f4;
  --accent: #006b5b;
  --accent-strong: #004c40;
  --accent-soft: #dff3ed;
  --gold: #c6932f;
  --danger: #b93838;
  --danger-soft: #ffe9e9;
  --shadow: 0 18px 55px rgba(25, 44, 39, 0.12);
  font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
}
* { box-sizing: border-box; }
body {
  margin: 0; min-height: 100vh;
  background:
    linear-gradient(135deg, rgba(0,107,91,.08), transparent 34%),
    linear-gradient(315deg, rgba(198,147,47,.12), transparent 30%),
    #edf3ef;
  color: var(--ink);
}
button,input { font: inherit; }
button { cursor:pointer; }
.shell { width:min(1320px,calc(100% - 32px)); margin:0 auto; padding:32px 0; }
.hidden { display:none !important; }

.login-view {
  min-height:calc(100vh - 64px);
  display:grid;
  grid-template-columns:minmax(0,1.1fr) minmax(320px,.7fr);
  gap:24px; align-items:center;
}
.brand-panel,.login-card,.entry-panel,.records-panel,.source-note,.claim-guide,.summary-card {
  background:rgba(255,255,255,.92);
  border:1px solid rgba(217,226,221,.9);
  box-shadow:var(--shadow);
}
.brand-panel {
  position:relative; overflow:hidden; border-radius:8px;
  padding:clamp(32px,6vw,72px); min-height:520px;
  display:flex; flex-direction:column; justify-content:center;
}
.brand-panel::after {
  content:""; position:absolute; inset:auto -10% -30% 20%; height:260px;
  background:repeating-linear-gradient(-18deg,rgba(0,107,91,.12) 0 16px,rgba(255,255,255,.18) 16px 34px);
  transform:rotate(-2deg);
}
.brand-mark {
  width:76px;height:76px;display:grid;place-items:center;border-radius:8px;
  color:var(--accent);background:var(--accent-soft);margin-bottom:28px;
}
.brand-mark svg { width:46px;height:46px;fill:none;stroke:currentColor;stroke-width:4;stroke-linecap:round;stroke-linejoin:round; }
.eyebrow { margin:0 0 8px;color:var(--gold);font-size:.78rem;font-weight:800;text-transform:uppercase; }
h1,h2,p { margin-top:0; }
h1 { margin-bottom:14px;font-size:clamp(2.3rem,5vw,4.8rem);line-height:1; }
h2 { margin-bottom:6px;font-size:1.1rem; }
.brand-panel p:not(.eyebrow) { max-width:56ch;color:var(--muted);font-size:1.08rem;line-height:1.7; }

.price-strip { position:relative;z-index:1;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px;margin-top:32px; }
.price-strip div { border:1px solid var(--line);border-radius:8px;padding:16px;background:rgba(255,255,255,.78); }
.price-strip span,.summary-card span { display:block;color:var(--muted);font-size:.84rem; }
.price-strip strong,.summary-card strong { display:block;margin-top:6px;font-size:1.6rem; }

.login-card,.entry-panel,.records-panel,.source-note { border-radius:8px;padding:20px; }
.login-card { padding:28px; }
label,legend { display:block;margin-bottom:8px;color:var(--ink);font-weight:750; }
input[type=text],input[type=number],input[type=date] {
  width:100%;min-height:48px;border:1px solid var(--line);border-radius:8px;
  padding:0 14px;background:white;color:var(--ink);outline:none;
}
input:focus { border-color:var(--accent);box-shadow:0 0 0 4px rgba(0,107,91,.12); }

.primary-button,.ghost-button,.danger-button {
  min-height:44px;border-radius:8px;border:1px solid transparent;padding:0 16px;font-weight:800;
}
.primary-button { width:100%;margin-top:16px;background:var(--accent);color:white; }
.primary-button:hover { background:var(--accent-strong); }
.ghost-button { background:white;border-color:var(--line);color:var(--ink); }
.danger-button { background:var(--danger-soft);border-color:#ffcaca;color:var(--danger); }

.helper-text,.status-line,.panel-title p,.source-note p,.summary-card small { color:var(--muted); }
.helper-text { margin:14px 0 0;font-size:.9rem;line-height:1.5; }
.error-text { min-height:20px;margin:8px 0 0;color:var(--danger);font-size:.9rem;font-weight:700; }
.save-status { margin:4px 0 0;color:var(--muted);font-size:.88rem; }
.save-status.success { color:var(--accent-strong);font-weight:700; }
.save-status.warning { color:#8a5a00;font-weight:700; }
.save-status.error { color:var(--danger);font-weight:700; }

.app-view { display:grid;gap:18px; }
.app-header { display:flex;justify-content:space-between;gap:18px;align-items:start;padding:16px 0 4px; }
.app-header h1 { margin-bottom:8px;font-size:clamp(2rem,4vw,3.3rem); }
.header-actions,.form-actions { display:flex;gap:10px;flex-wrap:wrap; }

.summary-grid { display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:14px; }
.summary-card { border-radius:8px;padding:18px; }
.summary-card.accent { background:var(--accent);color:white; }
.summary-card.accent span,.summary-card.accent small { color:rgba(255,255,255,.78); }
.summary-card.claim-card { border-color:rgba(198,147,47,.6);background:linear-gradient(180deg,#fff8e8,#fff); }
.summary-card.claim-card strong { color:var(--accent-strong); }

.claim-guide { border-radius:8px;padding:14px 16px;color:var(--ink);line-height:1.55; }
.claim-guide strong,.claim-guide b { color:var(--accent-strong); }

.workspace { display:grid;grid-template-columns:360px minmax(0,1fr);gap:18px;align-items:start; }
.entry-panel { max-height:calc(100vh - 32px);overflow:auto;scrollbar-gutter:stable; }
.field-row { margin-top:16px; }
.rate-picker { margin:18px 0 0;padding:0;border:0; }
.rate-picker label {
  display:flex;align-items:center;gap:10px;min-height:42px;margin:8px 0;padding:0 12px;
  border:1px solid var(--line);border-radius:8px;background:white;
}
.rate-picker input { accent-color:var(--accent); }
.payment-preview {
  margin-top:16px;padding:13px;border:1px solid #cfe4dc;border-radius:8px;
  background:var(--accent-soft);color:#173f37;font-size:.9rem;line-height:1.55;
}
.form-actions .primary-button { width:auto;flex:1 1 160px; }
.split { display:flex;justify-content:space-between;gap:16px;align-items:center; }

.table-wrap { position:relative;overflow-x:auto;margin-top:16px;border:1px solid var(--line);border-radius:8px;background:white; }
table { width:100%;border-collapse:collapse;min-width:1320px;background:white; }
th,td { padding:13px 12px;text-align:left;border-bottom:1px solid var(--line);vertical-align:middle;white-space:nowrap; }
th { color:var(--muted);font-size:.75rem;text-transform:uppercase; }
td { font-size:.91rem; }
tbody tr:last-child td { border-bottom:0; }
.row-actions { display:flex;gap:8px; }
.row-actions button { min-height:34px;border-radius:8px;border:1px solid var(--line);background:white;padding:0 10px;font-weight:750; }
.row-actions button:last-child { color:var(--danger); }

.empty-state { border-top:1px solid var(--line);padding:28px;color:var(--muted);background:white;text-align:center; }
.source-note { box-shadow:none; }
.source-note h2 { margin-bottom:8px; }
.source-note p { margin-bottom:0;line-height:1.6; }
.negative { color:var(--danger) !important; }
.muted { color:var(--muted);font-size:.82rem; }


/* ---------- Responsive layout ---------- */

@media (max-width: 1180px) {
  .shell {
    width: min(100% - 28px, 1180px);
  }

  .summary-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  .workspace {
    grid-template-columns: 330px minmax(0, 1fr);
  }

  h1 {
    font-size: clamp(2rem, 4vw, 3.6rem);
  }
}

@media (max-width: 960px) {
  .login-view,
  .workspace {
    grid-template-columns: 1fr;
  }

  .summary-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .brand-panel {
    min-height: auto;
    padding: 36px;
  }

  .app-header,
  .split {
    flex-direction: column;
    align-items: stretch;
  }

  .header-actions {
    width: 100%;
  }

  .header-actions button {
    flex: 1 1 180px;
  }

  .entry-panel {
    max-height: none;
  }
}

@media (max-width: 680px) {
  body {
    font-size: 14px;
  }

  .shell {
    width: calc(100% - 16px);
    padding: 8px 0 18px;
  }

  .brand-panel,
  .login-card,
  .entry-panel,
  .records-panel,
  .source-note,
  .claim-guide,
  .summary-card {
    border-radius: 12px;
  }

  .brand-panel,
  .login-card,
  .entry-panel,
  .records-panel,
  .source-note {
    padding: 16px;
  }

  .brand-panel {
    padding: 22px 18px;
  }

  .brand-mark {
    width: 54px;
    height: 54px;
    margin-bottom: 16px;
  }

  .brand-mark svg {
    width: 34px;
    height: 34px;
  }

  h1 {
    font-size: 2rem;
    line-height: 1.05;
    margin-bottom: 10px;
  }

  h2 {
    font-size: 1rem;
  }

  .brand-panel p:not(.eyebrow) {
    font-size: .95rem;
    line-height: 1.55;
  }

  .price-strip {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 8px;
    margin-top: 18px;
  }

  .price-strip div {
    padding: 12px;
  }

  .price-strip strong,
  .summary-card strong {
    font-size: 1.3rem;
  }

  .app-view {
    gap: 12px;
  }

  .app-header {
    padding-top: 6px;
    gap: 10px;
  }

  .app-header h1 {
    font-size: 1.8rem;
    margin-bottom: 5px;
  }

  .status-line,
  .save-status {
    font-size: .8rem;
    line-height: 1.4;
  }

  .header-actions {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 8px;
  }

  .header-actions button {
    width: 100%;
    min-height: 40px;
    padding: 0 10px;
    font-size: .86rem;
  }

  .summary-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 8px;
  }

  .summary-card {
    padding: 12px;
    min-width: 0;
  }

  .summary-card span {
    font-size: .72rem;
    line-height: 1.25;
  }

  .summary-card strong {
    font-size: 1.22rem;
    word-break: break-word;
  }

  .summary-card small {
    display: block;
    margin-top: 4px;
    font-size: .72rem;
    line-height: 1.3;
  }

  .claim-guide {
    padding: 12px;
    font-size: .84rem;
  }

  .field-row {
    margin-top: 12px;
  }

  input[type="text"],
  input[type="number"],
  input[type="date"] {
    min-height: 44px;
    padding: 0 12px;
    font-size: 16px; /* prevents iPhone zoom */
  }

  .rate-picker {
    margin-top: 14px;
  }

  .rate-picker label {
    min-height: 40px;
    margin: 6px 0;
  }

  .payment-preview {
    padding: 11px;
    font-size: .82rem;
  }

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

  .form-actions .primary-button,
  .form-actions .ghost-button {
    width: 100%;
    min-height: 42px;
    margin-top: 0;
  }

  .records-panel .split {
    gap: 10px;
  }

  .danger-button {
    width: 100%;
    min-height: 40px;
  }

  /* Mobile payment records become compact cards instead of a huge wide table. */
  .table-wrap {
    overflow: visible;
    border: 0;
    background: transparent;
  }

  table {
    min-width: 0;
    width: 100%;
    background: transparent;
  }

  thead {
    display: none;
  }

  tbody {
    display: grid;
    gap: 10px;
  }

  tbody tr {
    display: block;
    border: 1px solid var(--line);
    border-radius: 10px;
    background: white;
    overflow: hidden;
  }

  tbody td {
    display: grid;
    grid-template-columns: minmax(110px, 42%) 1fr;
    align-items: center;
    gap: 10px;
    padding: 9px 11px;
    white-space: normal;
    font-size: .84rem;
  }

  tbody td::before {
    content: attr(data-label);
    color: var(--muted);
    font-size: .72rem;
    font-weight: 800;
    text-transform: uppercase;
  }

  .row-actions {
    justify-content: flex-end;
  }

  .row-actions button {
    min-height: 32px;
    font-size: .78rem;
  }

  .empty-state {
    padding: 20px 14px;
    font-size: .84rem;
    border: 1px solid var(--line);
    border-radius: 10px;
  }
}

@media (max-width: 420px) {
  .shell {
    width: calc(100% - 12px);
  }

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

  .summary-card {
    padding: 10px;
  }

  .summary-card strong {
    font-size: 1.12rem;
  }

  .summary-card span,
  .summary-card small {
    font-size: .68rem;
  }

  .price-strip {
    grid-template-columns: 1fr 1fr;
  }

  .price-strip strong {
    font-size: 1.08rem;
  }

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

  tbody td {
    grid-template-columns: 102px 1fr;
    padding: 8px 10px;
  }
}

/* Editable starting balance and three current fuel prices */
.price-strip { grid-template-columns:repeat(3,minmax(0,1fr)); }
.balance-editor { margin-top:12px; padding-top:12px; border-top:1px solid rgba(255,255,255,.3); }
.balance-editor label { display:block; font-size:.79rem; font-weight:700; margin-bottom:8px; color:#fff; }
.balance-editor-row { display:flex; gap:8px; align-items:stretch; }
.balance-editor-row input { min-width:0; flex:1; width:100%; padding:8px; min-height:40px; background:#fff; color:#192d2a; }
.balance-editor-row button { border:1px solid rgba(255,255,255,.6); border-radius:8px; padding:6px 13px; background:#fff; color:#125e51; font-weight:800; }
.balance-editor #balanceStatus { display:block; margin-top:7px; font-size:.75rem; line-height:1.35; color:#fff; }
@media (max-width:680px) {
  .price-strip { grid-template-columns:1fr; }
  .price-strip div { min-width:0; padding:10px 8px; }
  .price-strip strong { font-size:clamp(.85rem,3.4vw,1.3rem); overflow-wrap:anywhere; }
}


/* BUDI95 monthly estimator — visually aligned with the existing dashboard */
.budi-quota-panel {
  min-width:0; padding:20px; border:1px solid var(--line);
  border-radius:8px; background:var(--surface, #fff); box-shadow:var(--shadow, none);
}
.budi-quota-header { display:flex; align-items:center; justify-content:space-between; gap:16px; }
.budi-quota-header h2 { margin:4px 0 5px; font-size:1.26rem; }
.budi-quota-header small, .budi-quota-note { color:var(--muted); }
.budi-quota-cap { color:var(--accent-strong); font-size:1.55rem; white-space:nowrap; }
.budi-quota-grid { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:14px; margin-top:16px; }
.budi-quota-stat { min-width:0; padding:14px; border-radius:8px; background:var(--accent-soft); }
.budi-quota-stat span { display:block; color:var(--muted); font-size:.82rem; }
.budi-quota-stat strong { display:block; margin-top:5px; font-size:1.25rem; overflow-wrap:anywhere; }
.budi-quota-meter { height:10px; margin-top:16px; border-radius:99px; overflow:hidden; background:#dbe6e3; }
#budiQuotaFill { height:100%; width:0; background:var(--accent); border-radius:99px; transition:width .2s ease; }
.budi-quota-note { margin:12px 0 0; font-size:.82rem; line-height:1.55; }
.budi-preview-note { margin:10px 0 0; padding-top:10px; border-top:1px solid #cfe4dc; font-weight:700; }

/* Keep spacing and column edges consistent across smaller phone layouts. */
@media (max-width:680px) {
  .shell { width:calc(100% - 24px); max-width:100%; padding:12px 0 22px; }
  .login-view, .app-view, .workspace, .summary-grid { gap:12px; }
  .app-header { gap:12px; padding:12px 0 2px; }
  .header-actions, .form-actions, .row-actions { gap:10px; }
  .brand-panel, .login-card, .entry-panel, .records-panel, .source-note,
  .claim-guide, .summary-card, .budi-quota-panel { padding:16px; box-sizing:border-box; }
  .brand-panel { padding:18px 16px; }
  .summary-card, .budi-quota-panel, .login-card, .entry-panel, .records-panel { min-width:0; }
  .price-strip { gap:12px; margin-top:18px; }
  .price-strip div { padding:12px; min-width:0; }
  .field-row { margin-top:12px; }
  .rate-picker { margin-top:12px; }
  .rate-picker label { margin:8px 0; }
  .payment-preview { margin-top:12px; }
  .table-wrap { margin-top:12px; max-width:100%; overflow-x:auto; }
  .budi-quota-panel { border-radius:12px; }
  .budi-quota-header { gap:12px; }
  .budi-quota-grid { gap:12px; margin-top:12px; }
  .budi-quota-stat { padding:12px; }
  .budi-quota-meter { margin-top:12px; }
  .balance-editor-row { gap:10px; }
  input, button { max-width:100%; }
}
@media (max-width:420px) {
  .budi-quota-grid { grid-template-columns:1fr; }
  .budi-quota-header { align-items:flex-start; }
  .budi-quota-cap { font-size:1.32rem; }
  .summary-grid { grid-template-columns:1fr; }
}