/* assets/common.css
   Общие стили для всех страниц (index/report/stats/library)
   Light/Dark через CSS-переменные
*/

/* ===== Theme variables (dark default) ===== */
:root{
  --bg:#0f1115;
  --card:#171a21;
  --text:#e8eaf0;
  --muted:#9aa3b2;
  --line:#2a2f3a;

  --radius:16px;
  --radius-sm:12px;

  --btn-bg: var(--card);
  --btn-border: var(--line);
  --btn-text: var(--text);

  --input-bg: var(--bg);
  --input-border: var(--line);
  --input-text: var(--text);

  /* glass surfaces (header/footer) */
  --glass-bg: rgba(15,17,21,.92);

  /* small buttons inside month nav */
  --month-btn-bg: rgba(0,0,0,.15);
  --month-btn-border: var(--line);
}

/* ===== Light theme =====
   Включение: body[data-theme="light"] { ... }
*/
body[data-theme="light"]{
  --bg:#f6f7fb;
  --card:#ffffff;
  --text:#0f1115;
  --muted:#5b6472;
  --line:#d8dde6;

  --btn-bg: var(--card);
  --btn-border: var(--line);
  --btn-text: var(--text);

  --input-bg:#ffffff;
  --input-border: var(--line);
  --input-text: var(--text);

  --glass-bg: rgba(246,247,251,.92);

  --month-btn-bg: rgba(15,17,21,.06);
  --month-btn-border: var(--line);
}

/* ===== Base ===== */
*{ box-sizing:border-box; }
html, body{ height:100%; }

body{
  margin:0;
  font-family:-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Arial,sans-serif;
  background:var(--bg);
  color:var(--text);
  
}

/* ===== Layout ===== */
.wrap{
  padding:14px;
  padding-bottom: calc(140px + env(safe-area-inset-bottom));
  max-width:980px;
  margin:0 auto;
}

/* ===== Header ===== */
header{
  position:sticky;
  top:0;
  z-index:10;
  background:var(--glass-bg);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  border-bottom:1px solid var(--line);
  padding:12px 14px;
}

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

.title{
  font-weight:900;
  font-size:16px;
}

/* ===== Controls ===== */
.btn{
  border:1px solid var(--btn-border);
  background:var(--btn-bg);
  color:var(--btn-text);
  padding:10px 12px;
  border-radius:var(--radius-sm);
  font-weight:800;
  cursor:pointer;
  text-decoration:none;
  display:inline-flex;
  align-items:center;
  gap:8px;
}

.btn:active{ transform: translateY(1px); }

select{
  border:1px solid var(--line);
  background:var(--card);
  color:var(--text);
  padding:9px 10px;
  border-radius:var(--radius-sm);
  font-weight:800;
}

label{
  color:var(--muted);
  font-size:13px;
  display:flex;
  align-items:center;
  gap:8px;
}

input[type="checkbox"]{ transform: scale(1.1); }

/* Inputs (используется в модалках на разных страницах) */
.field input,
.field textarea{
  width:100%;
  border:1px solid var(--input-border);
  background:var(--input-bg);
  color:var(--input-text);
  border-radius:var(--radius-sm);
  padding:10px 12px;
  font-size:14px;
}

.field textarea{
  min-height:90px;
  resize:vertical;
}

/* ===== Month navigation (shared) ===== */
.monthNav{
  display:flex;
  align-items:center;
  gap:8px;
  border:1px solid var(--line);
  background:var(--card);
  border-radius:var(--radius-sm);
  padding:6px 8px;
}

.monthBtn{
  border:1px solid var(--month-btn-border);
  background:var(--month-btn-bg);
  color:var(--text);
  padding:8px 10px;
  border-radius:10px;
  font-weight:950;
  cursor:pointer;
  line-height:1;
}

.monthBtn:disabled{ opacity:.4; cursor:not-allowed; }

.monthLabel{
  font-weight:950;
  font-size:13px;
  color:var(--text);
  white-space:nowrap;
  padding:0 4px;
  cursor:pointer;
}

/* ===== Helpers ===== */
.muted{ color:var(--muted); font-size:12px; }

.empty{
  border:1px dashed var(--line);
  border-radius:var(--radius);
  padding:14px;
  color:var(--muted);
  text-align:center;
  margin:14px 0;
}

/* ===== Footer (footer.php) ===== */
footer.siteFooter{
  position:fixed;
  left:0;
  right:0;
  bottom:0;
  z-index:20;
  background:var(--glass-bg);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  border-top:1px solid var(--line);
  padding:10px 14px;
}

.siteFooter .footerRow{
  max-width:980px;
  margin:0 auto;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:10px;
}

.siteFooter .footerLeft{
  color:var(--muted);
  font-size:12px;
  font-weight:800;
}

.siteFooter .footerRight{
  display:flex;
  align-items:center;
  gap:10px;
}
/* ===== Auth screen (login) — mobile centered ===== */

/* чтобы фиксированный футер не перекрывал контент на страницах без .wrap */
body{
  padding-bottom: calc(74px + env(safe-area-inset-bottom));
}

/* центрируем блок пароля и делаем нормальные отступы */
.authWrap{
  min-height: 100dvh;
  display: flex;
  align-items: center;
  justify-content: center;

  padding: 16px;
  padding-bottom: calc(16px + 74px + env(safe-area-inset-bottom)); /* место под футер */
  max-width: 980px;
  margin: 0 auto;
}
.authCard{
  width: min(520px, 100%);
  border: 1px solid var(--line);
  background: var(--card);
  border-radius: var(--radius);
  padding: 16px;
  box-shadow: 0 10px 30px rgba(0,0,0,.25);
}

.authTitle{
  margin: 0 0 10px;
  font-weight: 900;
  font-size: 18px;
}

/* поле пароля крупнее и аккуратнее */
.authCard .field input[type="password"]{
  height: 46px;
  font-size: 16px; /* важно для iOS: меньше 16px даёт автозум */
  transform: translateY(-24px);
}

/* кнопка OK — удобная на телефоне */
.authCard .btn[type="submit"]{
  width: 100%;
  justify-content: center;
  margin-top: 12px;
  height: 44px;
}

/* подсказка/ошибка */
.authErr{ color:#ff9aa9; font-size:13px; margin-top:10px; }
.authCard input[type="password"]{
  box-shadow: none;
  border-color: var(--line);
}

.authCard input[type="password"]:focus{
  outline: none;
  border-color: var(--line);
  box-shadow: none;
}