:root{
  --bg: #eaf3f4;
  --panel: rgba(250,254,255,0.82);
  --panel-border: rgba(0,0,0,0.06);
  --text: #243036;
  --muted: #607481;
  --accent: #006666;     /* primary teal */
  --accent-2: #149bb2;   /* secondary teal */
  --ring: rgba(20,155,178,.25);
  --radius: 18px;
  --shadow: 0 10px 30px rgba(0,0,0,0.08);
}

*{box-sizing:border-box}
html,body{height:100%}
body{
  margin:0;
  font-family: 'Montserrat', system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
  color:var(--text);
  background:
    radial-gradient(1200px 800px at 10% -10%, rgba(20,155,178,.15), transparent 60%),
    radial-gradient(1000px 700px at 110% 10%, rgba(0,102,102,.12), transparent 60%),
    linear-gradient(180deg, #f5fbfc, #e9f2f3);
}

/* Appbar */
.appbar{
  position: sticky; top:0; z-index: 20;
  backdrop-filter: saturate(140%) blur(16px);
  background: rgba(250,254,255,.75);
  border-bottom: 1px solid var(--panel-border);
}
.appbar-inner{
  display:flex; justify-content:space-between; align-items:center;
  max-width:1100px; margin:0 auto; padding:16px;
}
.brand{ margin:0; font-size:22px; font-weight:700; letter-spacing:.5px; color:var(--accent); }
.appbar-actions .btn{ margin-left:8px; }

/* Main */
#main{ max-width:1100px; margin:24px auto; padding:0 16px; }

.view.hidden{ display:none; }

.panel{
  background: var(--panel);
  border: 1px solid var(--panel-border);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  padding: 18px;
  margin-bottom: 18px;
}

.grid-2{ display:grid; grid-template-columns: 1fr 1fr; gap:16px; }
.grid-3{ display:grid; grid-template-columns: repeat(4,1fr); gap:16px; }
@media (max-width: 900px){
  .grid-2, .grid-3{ grid-template-columns: 1fr; }
}

h2{ margin:0 0 10px 0; font-weight:700; }
h3{ margin:0 0 10px 0; font-weight:700; }
h4{ margin:0 0 8px 0; font-weight:600; }

p{ margin:6px 0; }
.muted{ color:var(--muted); }
.small{ font-size:12px; }
.center{ text-align:center; }

/* Buttons */
.btn{
  border:1px solid var(--accent);
  background: linear-gradient(180deg, #fafeff, #e9f5f6);
  color: var(--accent);
  border-radius: 12px;
  padding: 10px 14px;
  font-weight:600;
  cursor:pointer;
  transition: transform .05s ease, box-shadow .15s ease;
}
.btn:hover{ box-shadow: 0 6px 16px rgba(0,102,102,.12); }
.btn:active{ transform: translateY(1px); }
.btn.primary{
  background: linear-gradient(180deg, #0aa1b8, #007e7e);
  color:#fff; border-color: transparent;
}
.btn.ghost{
  background: transparent; border-color: rgba(0,102,102,.35); color: var(--accent);
}
.icon-btn{
  border:none; background:transparent; font-size:18px; cursor:pointer; color:var(--muted);
}
.icon-btn:hover{ color:var(--accent); }

.row{ display:flex; gap:8px; align-items:center; }
.add-row input[type="text"], .add-row input[type="number"]{ flex:1; }

/* Add spacing between the list of people/categories and the add-row in the setup view */
#setupView .add-row { margin-top: 24px; }

/* Inputs */
input, select{
  width:100%; padding:10px 12px; border-radius:12px;
  border:1px solid var(--panel-border); background:#fff;
  outline:none;
}
input:focus, select:focus{
  border-color: var(--accent-2);
  box-shadow: 0 0 0 4px var(--ring);
}

/* Lists */
.list{ display:flex; flex-direction:column; gap:8px; }
.list .item{
  display:grid; grid-template-columns: 1fr auto; gap:8px;
  background:#fff; border:1px solid var(--panel-border);
  border-radius:12px; padding:10px 12px; align-items:center;
}
.list.compact .item{ grid-template-columns: 1fr 120px auto; }
.list .right{ text-align:right; }
.list .item .actions .icon-btn{ margin-left:6px; }

/* Totals */
.totals{ display:flex; justify-content:space-between; align-items:center; background:#fff; border:1px solid var(--panel-border); border-radius:12px; padding:10px 12px; margin-top:8px; }

/* Cards */
.card{
  background: var(--panel);
  border: 1px solid var(--panel-border);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  padding: 16px;
}
.card .big{ font-size:26px; font-weight:700; margin:6px 0; }

/* Toolbar */
.toolbar{
  display:flex; justify-content:space-between; align-items:flex-end;
  margin-bottom:16px;
}
.toolbar label{ display:block; font-size:12px; color:var(--muted); margin-bottom:4px; }
.toolbar .btn{ margin-left:8px; }

/* People summary */
.people-grid{ display:grid; grid-template-columns: repeat(2, 1fr); gap:12px; }
@media (max-width: 700px){ .people-grid{ grid-template-columns: 1fr; } }
.person-card{
  background:#fff; border:1px solid var(--panel-border); border-radius:12px; padding:12px;
}
.person-card .row{ justify-content:space-between; }
.person-card .name{ font-weight:700; color:#10242a; }
.person-card .pill{ padding:6px 10px; border-radius:999px; font-size:12px; font-weight:600; }
.pill.warn{ background: #fff4e5; color:#8a4b00; }
.pill.ok{ background: #e9fbef; color:#106b36; }
.person-card .kv{ display:grid; grid-template-columns: auto 1fr; gap:6px 12px; margin-top:8px; }
.kv div:nth-child(odd){ color: var(--muted); }

/* Table */
.table-wrap{ overflow:auto; border:1px solid var(--panel-border); border-radius:12px; background:#fff; }
.table{ width:100%; border-collapse:collapse; min-width:640px; }
.table th, .table td{ padding:10px 12px; border-bottom:1px solid #eef2f4; font-size:14px; }
.table th{ text-align:left; color:var(--muted); font-weight:600; }
.table td.right{ text-align:right; }
.table tbody tr:hover{ background:#f8fbfc; }
.table .del-btn{ color:#b00020; }

/* Center the Budget / Actual / Variance columns in the Category Spend table */
#categorySummaryTable th.right,
#categorySummaryTable td.right {
  text-align: center;
}

/* Modal */
.modal{
  position:fixed; inset:0; display:flex; align-items:center; justify-content:center;
  background: rgba(14, 32, 36, .35);
  z-index: 100; padding: 16px;
  overflow: auto;                /* allow overlay to scroll if needed */
  overscroll-behavior: contain;  /* stop scroll chaining to page */
}
.modal.hidden{ display:none; }
.modal-card{
  background: var(--panel); border:1px solid var(--panel-border);
  border-radius:16px; box-shadow: var(--shadow);
  width: 100%; max-width: 560px;
  max-height: min(92dvh, 720px); /* fit on phones; use dynamic viewport units */
  display: flex;
  flex-direction: column;
}
.modal-head, .modal-foot{ padding:12px 14px; display:flex; align-items:center; justify-content:space-between; flex: 0 0 auto; }
.modal-head h3{ margin:0; }
.modal-body{ padding:14px; flex: 1 1 auto; min-height: 0;                 /* allows flex child to shrink */ overflow: auto;                /* inner scrolling area */ -webkit-overflow-scrolling: touch;  /* momentum scroll on iOS */ overscroll-behavior: contain;       /* prevent rubber-banding to background */ }

/* Increase Settings modal overlay opacity and make its card more opaque (only affects #settingsModal) */
#settingsModal {
  background: rgba(14, 32, 36, 0.6); /* stronger overlay than other modals */
}
#settingsModal .modal-card {
  background: rgba(250, 254, 255, 0.98); /* make settings card nearly opaque */
}

/* Consistent vertical spacing inside Settings modal */
#settingsModal .modal-body label { display:block; }
#settingsModal .modal-body input,
#settingsModal .modal-body select,
#settingsModal .modal-body textarea {
  margin-bottom: 16px; /* consistent spacing after each control */
  display: block;
}
#settingsModal .modal-body .row,
#settingsModal .modal-body .add-row,
#settingsModal .modal-body .list,
#settingsModal .modal-body .totals {
  margin-bottom: 16px; /* spacing between groups */
}
#settingsModal .modal-body .list .item { margin-bottom: 8px; } /* slightly smaller between list items */

/* Remove extra outer boxes for inputs inside Settings modal */
#settingsModal .modal-body .list .item,
#settingsModal .modal-body .add-row,
#settingsModal .modal-body .row {
  background: transparent !important;
  border: none !important;
  padding: 0 !important;
  box-shadow: none !important;
}

/* Ensure inputs keep their own visible box */
#settingsModal .modal-body .list .item input,
#settingsModal .modal-body .add-row input,
#settingsModal .modal-body .row input {
  background: #fff;
  border: 1px solid var(--panel-border);
  border-radius: 10px;
  padding: 10px 12px;
}

/* Keep spacing between list items when their outer boxes are removed */
#settingsModal .modal-body .list { padding-top: 6px; }
#settingsModal .modal-body .list .item { margin-bottom: 12px; }

/* Lock background scroll whenever a modal is open */
body.noscroll{
  overflow: hidden !important;
  touch-action: none;            /* extra iOS safety */
}

/* --- Settings Modal Cleanup --- */
#settingsModal .modal-card {
  background: #fff;                /* pure white, consistent with rest of UI */
  border-radius: 14px;             /* slightly smaller radius for tighter look */
  box-shadow: 0 8px 28px rgba(0,0,0,0.12);
  padding: 0;                      /* let inner spacing handle layout */
}

#settingsModal .modal-head,
#settingsModal .modal-foot {
  padding: 16px 20px;
  border-bottom: 1px solid var(--panel-border);
}
#settingsModal .modal-foot {
  border-top: 1px solid var(--panel-border);
  border-bottom: none;
}

#settingsModal .modal-body {
  padding: 20px;
}

/* Settings modal layout: stack sections vertically and enforce uniform spacing/sizing */
#settingsModal .modal-body .grid-2 {
  display: grid;
  grid-template-columns: 1fr; /* stack People above Categories */
  gap: 12px;                  /* consistent vertical gap */
}

#settingsModal .modal-body input,
#settingsModal .modal-body select,
#settingsModal .modal-body textarea {
  margin-bottom: 12px;       /* uniform spacing */
  padding: 10px 12px;        /* consistent inner padding */
  height: 40px;              /* consistent control height */
  box-sizing: border-box;
  width: 100%;
}
#settingsModal .modal-body textarea {
  height: 100px;            /* larger multiline area */
  padding-top: 10px;
}

/* Ensure input-with-button rows align and keep same spacing */
#settingsModal .modal-body .row,
#settingsModal .modal-body .add-row,
#settingsModal .modal-body .list,
#settingsModal .modal-body .totals {
  margin-bottom: 12px;      /* uniform spacing between groups */
}

#settingsModal .modal-body .list .item {
  margin-bottom: 8px;
  padding: 8px 10px;
}

/* Smaller tweaks for inputs inside add-row (button groups) so text inputs keep height */
#settingsModal .modal-body .add-row input[type="text"],
#settingsModal .modal-body .add-row input[type="number"] {
  height: 40px;
}

/* Uniform control styles */
#settingsModal .modal-body input,
#settingsModal .modal-body select,
#settingsModal .modal-body textarea {
  width: 100%;
  margin: 0 0 14px 0;
  padding: 10px 12px;
  border: 1px solid var(--panel-border);
  border-radius: 10px;
  font-size: 14px;
  line-height: 1.4;
  background: #fff;
  box-sizing: border-box;
}

/* Label spacing + tone down */
#settingsModal .modal-body label {
  font-size: 13px;
  font-weight: 600;
  color: var(--muted);
  margin-bottom: 6px;
  display: block;
}

/* Lists inside settings: tighter, cleaner */
#settingsModal .modal-body .list {
  gap: 6px;
  margin-bottom: 14px;
}
#settingsModal .modal-body .list .item {
  padding: 8px 10px;
  border-radius: 10px;
  font-size: 14px;
}

/* Rows / groups: more breathing space */
#settingsModal .modal-body .row,
#settingsModal .modal-body .add-row,
#settingsModal .modal-body .totals {
  margin-bottom: 18px;
}

/* Buttons inside settings: subtle */
#settingsModal .btn {
  font-size: 14px;
  padding: 8px 12px;
  border-radius: 10px;
}

/* Utilities */
.hidden{ display:none !important; }
.right{ text-align:right; }

/* Variance coloring: over = red, under = green */
.variance-over { color:#b00020; font-weight:700; }   /* Actual > Budget */
.variance-under { color:#106b36; font-weight:700; }  /* Actual < Budget */

/* Balance coloring */
.balance-pos { color: #106b36; font-weight: 700; }  /* green */
.balance-neg { color: #b00020; font-weight: 700; }  /* red   */

.grid-3 + .panel { margin-top: 24px; }

/* iOS Safari: prevent focus zoom by keeping controls >=16px */
@supports (-webkit-touch-callout: none) {
  input, select, textarea {
    font-size: 16px !important;
    line-height: 1.35;
  }
  input[type="number"],
  input[type="date"],
  input[type="month"],
  input[type="time"] {
    font-size: 16px !important;
  }
}