/* style.css — чистий файл (dark + light), таблиця зі СКРОЛОМ X/Y + sticky колонки/шапка */

:root{
  --accent:#d2770a;

  /* dark */
  --bg:#0f0c0a;
  --panel:#14110f;
  --panel2:#0e0c0b;
  --text:#f2efe9;
  --muted:#b7afa6;
  --line:rgba(255,255,255,.10);

  --btnBg:rgba(255,255,255,.06);
  --btnBg2:rgba(255,255,255,.10);
  --btnLine:rgba(255,255,255,.14);

  --okBg:rgba(46, 174, 92, .18);
  --warnBg:rgba(240, 170, 70, .18);
  --badBg:rgba(210, 75, 75, .18);
  --offBg:rgba(255,255,255,.04);

  --shadow:0 20px 60px rgba(0,0,0,.45);
  --radius:20px;
  --radiusSm:14px;
}

body.light{
  /* light */
  --bg:#f6efe6;
  --panel:#ffffff;
  --panel2:#fffaf3;
  --text:#d2770a;          /* ✅ як ти просив */
  --muted:#b07b36;
  --line:rgba(0,0,0,.10);

  --btnBg:rgba(210,119,10,.08);
  --btnBg2:rgba(210,119,10,.12);
  --btnLine:rgba(210,119,10,.28);

  --okBg:rgba(66, 170, 120, .18);
  --warnBg:rgba(240, 170, 70, .18);
  --badBg:rgba(220, 90, 90, .18);
  --offBg:rgba(0,0,0,.03);

  --shadow:0 18px 50px rgba(60,30,0,.18);
}

*{ box-sizing:border-box; }
html,body{ height:100%; }
body{
  margin:0;
  font-family:system-ui,-apple-system,Segoe UI,Roboto,Arial,sans-serif;
  background:
    radial-gradient(900px 400px at 10% 0%, rgba(210,119,10,.20), transparent 60%),
    radial-gradient(900px 400px at 90% 0%, rgba(210,119,10,.10), transparent 60%),
    var(--bg);
  color:var(--text);
}

/* ---------- top bar ---------- */
.top{
  width:min(1200px, calc(100% - 24px));
  margin:18px auto 12px;
  padding:14px 14px;
  background:linear-gradient(180deg, var(--panel), var(--panel2));
  border:1px solid var(--line);
  border-radius:var(--radius);
  box-shadow:var(--shadow);

  display:flex;
  flex-wrap:wrap;
  gap:10px 12px;
  align-items:center;
}

.top b{ font-size:20px; }
.muted{ color:var(--muted); }
.badge{
  margin-left:auto;
  padding:8px 12px;
  border-radius:999px;
  border:1px solid var(--line);
  background:var(--btnBg);
}

/* ---------- buttons ---------- */
.btn{
  appearance:none;
  border:1px solid var(--btnLine);
  background:linear-gradient(180deg, var(--btnBg2), var(--btnBg));
  color:var(--text);
  padding:10px 14px;
  border-radius:999px;
  cursor:pointer;
  font-weight:700;
  line-height:1;
  text-decoration:none;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:8px;
  user-select:none;
}
.btn:hover{ filter:brightness(1.04); }
.btn:active{ transform:translateY(1px); }
.btn[disabled]{ opacity:.55; cursor:not-allowed; transform:none; }

.btn.mini{
  padding:8px 10px;
  border-radius:12px;
  font-weight:800;
  min-width:40px;
}
.btn.ghost{ background:transparent; }
.btn.danger{
  border-color:rgba(220,70,70,.45);
  background:linear-gradient(180deg, rgba(220,70,70,.20), rgba(220,70,70,.10));
}

/* ---------- selects / inputs ---------- */
select, input{
  border:1px solid var(--line);
  background:var(--panel);
  color:var(--text);
  padding:10px 12px;
  border-radius:999px;
  outline:none;
}
input::placeholder{ color:color-mix(in oklab, var(--muted) 78%, transparent); }

.row{ display:flex; gap:10px; align-items:center; flex-wrap:wrap; }
.right{ text-align:right; }
.mt10{ margin-top:10px; }

/* ---------- toast ---------- */
.toast{
  margin-left:auto;
  padding:8px 12px;
  border-radius:999px;
  border:1px solid var(--line);
  background:var(--btnBg);
  opacity:0;
  transform:translateY(-4px);
  transition:.18s ease;
  pointer-events:none;
}
.toast.on{ opacity:1; transform:translateY(0); }

/* ---------- WRAP / TABLE SCROLL X + Y ---------- */
.wrap{
  width:min(1200px, calc(100% - 24px));
  margin:0 auto 18px;

  /* ✅ СКРОЛ */
  overflow:auto;
  -webkit-overflow-scrolling:touch;

  /* ✅ щоб був і вертикальний скрол */
  max-height:calc(100vh - 220px);

  border:1px solid var(--line);
  border-radius:var(--radius);
  background:linear-gradient(180deg, var(--panel), var(--panel2));
  box-shadow:var(--shadow);
}

/* щоб sticky працював правильно */
table{
  border-collapse:separate;
  border-spacing:0;
  width:max-content;          /* ✅ не стискаємо */
  min-width:100%;             /* але не менше контейнера */
}

th, td{
  padding:12px 12px;
  border-right:1px solid var(--line);
  border-bottom:1px solid var(--line);
  white-space:nowrap;
  vertical-align:middle;
  font-weight:700;
}

tr:last-child td, tr:last-child th{ border-bottom:none; }
th:last-child, td:last-child{ border-right:none; }

/* header sticky */
th{
  background:color-mix(in oklab, var(--panel) 85%, transparent);
  position:sticky;
  top:0;
  z-index:5;
  text-align:center;
}

/* ---------- вклад “внески” (таблиця з людьми) ---------- */
td.name, th:first-child{ text-align:left; }

/* ✅ ширша колонка з прізвищем */
td.name, th:first-child{
  min-width:260px;
  max-width:420px;
}

/* ✅ колонка “Рік” */
td.yearcell, th:nth-child(2){
  min-width:190px;
  text-align:center;
  font-weight:800;
}
td.yearcell b{ font-size:18px; }
td.yearcell .muted{ font-weight:700; }

/* ✅ місячні колонки ширші щоб не була “каша” */
th:nth-child(n+3), td:nth-child(n+3){
  min-width:96px;
  text-align:center;
}

/* sticky first column (name) */
th:first-child, td.name{
  position:sticky;
  left:0;
  z-index:6;
  background:linear-gradient(180deg, var(--panel), var(--panel2));
}

/* sticky second column (year) */
th:nth-child(2), td.yearcell{
  position:sticky;
  left:260px;                 /* має співпасти з min-width першої */
  z-index:6;
  background:linear-gradient(180deg, var(--panel), var(--panel2));
}

/* name row + кнопки */
.nameRow{
  display:flex;
  align-items:center;
  gap:10px;
}
.nameText{
  flex:1 1 auto;
  overflow:hidden;
  text-overflow:ellipsis;
}
.nameRow .btn{
  flex:0 0 auto;
}

/* клітинки станів */
.cell{ cursor:pointer; }
.cell-ok{ background:var(--okBg); }
.cell-warn{ background:var(--warnBg); }
.cell-bad{ background:var(--badBg); }
.cell-off{
  background:var(--offBg);
  color:color-mix(in oklab, var(--muted) 85%, transparent);
  cursor:default;
}

/* ---------- сторінка “витрати” (2 колонки) ---------- */
body.page-expenses #tbl th:first-child,
body.page-expenses #tbl td.name{
  min-width:140px;             /* ✅ “Місяць” вузькіший */
}
body.page-expenses #tbl th:nth-child(2),
body.page-expenses #tbl td:nth-child(2){
  min-width:260px;
  text-align:center;           /* ✅ “Витрати” по центру */
}

/* ---------- MODAL ---------- */
.modal{
  position:fixed;
  inset:0;
  display:none;
  align-items:center;
  justify-content:center;
  padding:18px;
  background:rgba(0,0,0,.55);
  z-index:9999;                /* ✅ завжди спереду */
}
.modal.on{ display:flex; }

.modal .card{
  width:min(980px, 100%);
  background:linear-gradient(180deg, var(--panel), var(--panel2));
  border:1px solid var(--line);
  border-radius:var(--radius);
  box-shadow:var(--shadow);
  padding:16px;
  pointer-events:auto;
}
.modal .row b{ font-size:18px; }

/* список оплат/витрат */
.list{ margin-top:12px; display:flex; flex-direction:column; gap:10px; }
.item{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
  padding:12px;
  border-radius:var(--radiusSm);
  border:1px solid var(--line);
  background:var(--btnBg);
}
.item-left{ min-width:0; }
.item-left > div{ white-space:normal; }
.item-right{ display:flex; align-items:center; gap:10px; }

/* ---------- mobile ---------- */
@media (max-width:720px){
  .top b{ font-size:18px; }
  .badge{ width:100%; margin-left:0; text-align:center; }
  .toast{ width:100%; margin-left:0; text-align:center; }

  /* більше місця під скрол таблиці */
  .wrap{ max-height:calc(100vh - 260px); }

  /* sticky left offsets на моб */
  td.name, th:first-child{ min-width:220px; }
  th:nth-child(2), td.yearcell{ left:220px; min-width:170px; }

  th,td{ padding:10px 10px; }
  th:nth-child(n+3), td:nth-child(n+3){ min-width:88px; }
}

/* ---------- small UX ---------- */
a.btn{ color:var(--text); }

/* ===== MOBILE SCROLL FIX ===== */
@media (max-width: 900px){

  html, body{
    height:100%;
    overflow-x:hidden;
  }

  .wrap{
    width:100%;
    overflow-x:auto;
    -webkit-overflow-scrolling: touch;
  }

  .wrap table{
    min-width:1200px;   /* широка таблиця → зʼявляється горизонтальний скрол */
  }

  /* вертикальний скрол сторінки */
  body{
    overflow-y:auto;
    -webkit-overflow-scrolling: touch;
  }

  /* щоб перші колонки не ламали скрол */
  .namecol{
    position:sticky;
    left:0;
    z-index:5;
    background:inherit;
  }

  .yearcol{
    position:sticky;
    left:320px;
    z-index:5;
    background:inherit;
  }

  /* щоб модалка не блокувала прокрутку */
  .modal{
    position:fixed;
    inset:0;
    overflow:auto;
    -webkit-overflow-scrolling: touch;
  }
}

/* ===== iPhone VERTICAL SCROLL FIX (put at END of style.css) ===== */
@media (max-width: 900px){

  /* 1) РОЗБЛОКУВАТИ вертикальний скрол (часто його ріже overflow:hidden/100vh) */
  html, body{
    height: auto !important;
    min-height: 100dvh !important;
    overflow-y: auto !important;
    overflow-x: hidden !important;
    -webkit-overflow-scrolling: touch;
  }

  /* якщо ти в body ставиш display:flex і воно ламає прокрутку */
  body{
    display: block !important;
  }

  /* 2) WRAP = ТІЛЬКИ горизонтальний скрол, вертикаль — сторінка */
  .wrap{
    overflow-x: auto !important;
    overflow-y: visible !important;
    -webkit-overflow-scrolling: touch;
    touch-action: pan-x;              /* горизонтальний свайп по таблиці */
  }

  /* 3) Таблиця широка → зʼявляється горизонтальний скрол */
  .wrap table{
    min-width: 1200px !important;
  }

  /* 4) Модалка: прокручується всередині, але НЕ блокує сторінку назавжди */
  .modal{
    position: fixed;
    inset: 0;
    overflow: auto;
    -webkit-overflow-scrolling: touch;
  }

  /* 5) На всяк випадок: якщо є якісь секції-контейнери з overflow hidden */
  .top, .card, .panel, .container{
    overflow: visible !important;
  }
}

/* ===== iPhone portrait FIX – нормальний вертикальний скрол ===== */
@media screen and (max-width: 900px) and (orientation: portrait){

  html, body{
    height:auto !important;
    overflow-y:auto !important;
    -webkit-overflow-scrolling:touch;
  }

  body{
    position:relative !important;
  }

  .wrap{
    height:auto !important;
    max-height:none !important;
    overflow:visible !important;
  }

  table{
    margin-bottom:120px;
  }

}

/* ===== iPhone width FIX (реальний скрол) ===== */
@media (max-width: 430px){

  html, body{
    height:auto !important;
    min-height:100% !important;
    overflow-y:auto !important;
    overflow-x:hidden !important;
    position:relative !important;
    -webkit-overflow-scrolling:touch;
  }

  body.page-expenses{
    overflow-y:auto !important;
  }

  .wrap{
    height:auto !important;
    max-height:none !important;
    overflow:visible !important;
  }

  .top{
    position:relative !important;
  }

  table{
    margin-bottom:160px;
  }

}