/* ============================================================
   ТАКСИ ВХОД — Стилове
   ============================================================ */

*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

:root {
  /* Палитра — землисто зелено, крем, лавандула */
  --bg:        #f0efe8;        /* топъл крем фон */
  --surface:   #faf9f5;        /* почти бяло с топлина */
  --header:    #3d5a47;        /* дълбоко горско зелено */
  --header-2:  #2e4436;        /* по-тъмно за hover/active */
  --primary:   #4a7c59;        /* средно зелено — CTA */
  --primary-hover: #3d6b4a;
  --danger:    #c0392b;        /* земно червено */
  --success:   #4a7c59;        /* същото зелено */
  --warning:   #b8860b;        /* тъмно злато */
  --accent:    #9b8bb4;        /* лавандула — акцент */
  --accent-light: #ede9f4;     /* светла лавандула */
  --text:      #2c3e2d;        /* много тъмно зелено */
  --text-sub:  #6b7c6d;        /* приглушено зелено-сиво */
  --border:    #dddcd5;        /* топла сива граница */
  --radius:    14px;
  --shadow:    0 1px 4px rgba(44,62,45,0.10);
}

html, body {
  height: 100%;
  font-family: 'Segoe UI', system-ui, -apple-system, sans-serif;
  background: var(--bg);
  color: var(--text);
  font-size: 15px;
  -webkit-tap-highlight-color: transparent;
}

/* ── SCREENS ── */
.screen { display: none; min-height: 100vh; }
.screen.active { display: block; }

/* ── LOADING ── */
.loading-wrap {
  min-height: 100vh;
  display: flex; flex-direction: column;
  align-items: center; justify-content: center;
  gap: 16px; color: var(--text-sub);
  background: var(--header);
}
.loading-wrap p { color: #94a3b8; font-size: 14px; }

.spinner {
  width: 36px; height: 36px;
  border: 3px solid #2e4436;
  border-top-color: #9b8bb4;
  border-radius: 50%;
  animation: spin 0.8s linear infinite;
}
@keyframes spin { to { transform: rotate(360deg); } }

/* ── LOGIN ── */
.login-card {
  max-width: 380px; margin: 0 auto;
  padding: 48px 24px 40px;
  min-height: 100vh;
  display: flex; flex-direction: column;
  align-items: center;
  background: var(--bg);
}
.login-icon { font-size: 52px; margin-bottom: 12px; }
.login-card h1 { font-size: 26px; font-weight: 800; color: var(--text); }
.login-sub { font-size: 13px; color: var(--text-sub); margin-bottom: 28px; }

.tab-row {
  display: flex; gap: 8px; margin-bottom: 24px;
  background: var(--border); border-radius: 12px; padding: 4px;
  width: 100%;
}
.tab {
  flex: 1; padding: 9px 0; border: none; border-radius: 9px;
  font-size: 14px; font-weight: 600; cursor: pointer;
  background: transparent; color: var(--text-sub);
  transition: all 0.2s;
}
.tab.active { background: var(--header); color: #e8f0e9; box-shadow: var(--shadow); }

.tab-content { display: none; width: 100%; }
.tab-content.active { display: flex; flex-direction: column; gap: 0; }

/* ── INPUTS ── */
.input {
  width: 100%; padding: 12px 14px;
  border: 1.5px solid var(--border); border-radius: var(--radius);
  font-size: 15px; color: var(--text); background: var(--surface);
  outline: none; transition: border-color 0.2s;
  appearance: none; -webkit-appearance: none;
}
.input:focus { border-color: var(--primary); }
select.input { cursor: pointer; }

.field-group { margin-bottom: 14px; }
.field-label {
  display: block; margin-bottom: 6px;
  font-size: 11px; font-weight: 700; color: var(--text-sub);
  text-transform: uppercase; letter-spacing: 0.5px;
}

/* ── BUTTONS ── */
.btn-primary {
  width: 100%; padding: 14px 0; margin-top: 8px;
  background: var(--primary); color: #f0f7f1;
  border: none; border-radius: var(--radius);
  font-size: 15px; font-weight: 700; cursor: pointer;
  transition: opacity 0.2s;
}
.btn-primary:disabled { opacity: 0.45; cursor: default; }
.btn-primary:not(:disabled):active { opacity: 0.85; }

.btn-secondary {
  width: 100%; padding: 13px 0; margin-top: 4px;
  background: #f0fdf4; color: #16a34a;
  border: 1.5px solid #bbf7d0; border-radius: var(--radius);
  font-size: 15px; font-weight: 700; cursor: pointer;
}

.btn-cancel {
  width: 100%; padding: 13px 0;
  background: var(--border); color: var(--text-sub);
  border: none; border-radius: var(--radius);
  font-size: 15px; font-weight: 600; cursor: pointer;
}

.btn-icon {
  background: #2e4436; border: none; color: #a8c5a0;
  width: 36px; height: 36px; border-radius: 10px;
  font-size: 18px; cursor: pointer; display: flex;
  align-items: center; justify-content: center;
  flex-shrink: 0;
}

.btn-small {
  padding: 6px 14px; border-radius: 8px;
  font-size: 12px; font-weight: 700; cursor: pointer; border: none;
}
.btn-small.pay { background: var(--accent-light); color: var(--accent); font-weight: 700; }

/* ── ERROR ── */
.error-msg {
  background: #450a0a; color: #fca5a5;
  padding: 10px 14px; border-radius: 10px;
  font-size: 13px; margin-bottom: 10px; text-align: center;
}
.hidden { display: none !important; }

/* ── HEADER ── */
.app-header {
  background: var(--header); color: #e8f0e9;
  padding: 18px 16px 16px;
  display: flex; justify-content: space-between; align-items: center;
  position: sticky; top: 0; z-index: 10;
}
.header-title { font-size: 20px; font-weight: 800; }
.header-sub { font-size: 12px; color: #94a3b8; margin-top: 2px; }

/* ── BOTTOM NAV ── */
.bottom-nav {
  display: flex; background: var(--header-2);
  border-top: 1px solid #2e4436;
  position: sticky; top: 64px; z-index: 9;
}
.nav-btn {
  flex: 1; padding: 10px 4px 8px;
  background: transparent; border: none;
  color: #64748b; font-size: 11px; font-weight: 600;
  cursor: pointer; transition: color 0.2s;
  display: flex; flex-direction: column; align-items: center; gap: 2px;
}
.nav-btn.active { color: #c8e6c9; }

/* ── CONTENT ── */
.content { padding: 12px; max-width: 600px; margin: 0 auto; }

/* ── VIEWS ── */
.view { display: none; }
.view.active { display: block; }

/* ── BALANCE CARD ── */
.balance-card {
  background: var(--header); color: #e8f0e9;
  border-radius: 20px; padding: 24px 20px;
  margin-bottom: 16px; text-align: center;
}
.balance-label { font-size: 12px; color: #94a3b8; font-weight: 600; text-transform: uppercase; letter-spacing: 0.5px; margin-bottom: 8px; }
.balance-amount { font-size: 42px; font-weight: 800; margin-bottom: 4px; }
.balance-amount.owed { color: #ffb3ae; }
.balance-amount.clear { color: #a8d5b5; }
.balance-amount.credit { color: #c5b8e0; }
.balance-note { font-size: 13px; color: #94a3b8; }

/* ── SECTION TITLE ── */
.section-title {
  font-size: 12px; font-weight: 700; color: var(--header);
  text-transform: uppercase; letter-spacing: 0.5px;
  margin: 16px 0 8px;
}

/* ── HISTORY LIST ── */
.history-list { display: flex; flex-direction: column; gap: 8px; }

.history-item {
  background: var(--surface); border-radius: var(--radius);
  padding: 14px 16px; box-shadow: var(--shadow);
  display: flex; justify-content: space-between; align-items: center;
}
.history-month { font-weight: 700; font-size: 14px; }
.history-detail { font-size: 12px; color: var(--text-sub); margin-top: 2px; }
.history-amount { font-size: 15px; font-weight: 800; }
.history-amount.owed { color: #c0392b; }
.history-amount.clear { color: var(--primary); }

/* ── APT LIST (overview + payments) ── */
.apt-list { display: grid; grid-template-columns: 1fr; gap: 8px; }


.apt-row {
  background: var(--surface); border-radius: var(--radius);
  padding: 12px 14px; box-shadow: var(--shadow);
  display: flex; justify-content: space-between; align-items: center;
  border-left: 4px solid transparent;
}
.apt-row.owed { border-left-color: #c0392b; }
.apt-row.clear { border-left-color: var(--primary); }
.apt-row.credit { border-left-color: var(--accent); }

.apt-number { font-size: 11px; color: var(--text-sub); font-weight: 700; }
.apt-name { font-size: 14px; font-weight: 600; }
.apt-balance { font-size: 16px; font-weight: 800; }
.apt-balance.owed { color: #c0392b; }
.apt-balance.clear { color: var(--primary); }
.apt-balance.credit { color: var(--accent); }

/* ── MONTH SELECTOR ── */
.month-selector {
  display: flex; align-items: center; justify-content: center;
  gap: 16px; padding: 12px 0; margin-bottom: 8px;
}
.month-label { font-size: 18px; font-weight: 800; min-width: 140px; text-align: center; }

/* ── CARDS ── */
.card {
  background: var(--surface); border-radius: var(--radius);
  padding: 18px 16px; box-shadow: var(--shadow);
  margin-bottom: 12px;
}
.card-title { font-size: 14px; font-weight: 700; margin-bottom: 14px; }
.card-note { font-size: 13px; color: var(--text-sub); margin-bottom: 12px; line-height: 1.5; }

/* ── OCCUPANCY GRID ── */
.occupancy-grid {
  display: grid; grid-template-columns: 1fr 1fr;
  gap: 8px; margin-bottom: 12px;
}
.occ-item {
  display: flex; align-items: center; justify-content: space-between;
  background: var(--bg); border-radius: 10px; padding: 8px 10px;
}
.occ-label { font-size: 13px; font-weight: 600; }
.occ-input {
  width: 52px; padding: 6px 8px; text-align: center;
  border: 1.5px solid var(--border); border-radius: 8px;
  font-size: 14px; font-weight: 700;
}

/* ── TARIFF DISPLAY ── */
.tariff-display { font-size: 14px; line-height: 2; color: var(--text-sub); }
.tariff-display strong { color: var(--text); }

/* ── PAYMENTS ROW ── */
.pay-row {
  background: var(--surface); border-radius: var(--radius);
  padding: 12px 14px; box-shadow: var(--shadow);
  display: flex; justify-content: space-between; align-items: center;
  border-left: 4px solid transparent;
}
.pay-row.owed { border-left-color: #c0392b; }
.pay-row.clear { border-left-color: var(--primary); }
.pay-due { font-size: 13px; color: var(--text-sub); margin-top: 2px; }

/* ── MODAL ── */
.modal-overlay {
  position: fixed; inset: 0;
  background: rgba(15,23,42,0.6);
  display: flex; align-items: flex-end; justify-content: center;
  z-index: 100;
}
.modal {
  background: var(--surface);
  border-radius: 24px 24px 0 0;
  padding: 24px 20px 40px;
  width: 100%; max-width: 500px;
  max-height: 90vh; overflow-y: auto;
}
.modal-title { font-size: 18px; font-weight: 700; margin-bottom: 18px; }
.modal-actions { display: flex; flex-direction: column; gap: 10px; margin-top: 16px; }

/* ── TOAST ── */
.toast {
  position: fixed; bottom: 24px; left: 50%; transform: translateX(-50%);
  background: var(--header); color: #e8f0e9;
  padding: 12px 24px; border-radius: 20px;
  font-size: 14px; font-weight: 600;
  z-index: 200; white-space: nowrap;
  box-shadow: 0 4px 20px rgba(0,0,0,0.2);
  animation: fadeIn 0.2s ease;
}
@keyframes fadeIn { from { opacity: 0; transform: translateX(-50%) translateY(8px); } }

/* ── EMPTY STATE ── */
.empty-state {
  text-align: center; color: var(--text-sub);
  padding: 32px 0; font-size: 14px;
}

/* ── МЕСЕЧНИ ИМЕНА ── */
/* използват се в JS */

/* ── OVERVIEW DATE LABEL ── */
.overview-date {
  font-size: 12px; color: var(--text-sub);
  margin-bottom: 10px; font-style: italic;
}

/* ── APT ROW — extra info row (desktop) ── */
.apt-row-main {
  display: flex; justify-content: space-between; align-items: center;
  width: 100%;
}
.apt-row-extra {
  display: none; /* скрито на мобилен */
  gap: 12px; margin-top: 6px;
}
.apt-extra-item {
  font-size: 12px; color: var(--text-sub);
}

/* ── DESKTOP: три колони + extra info ── */
@media (min-width: 900px) {
  .content { max-width: 1200px; }

  #view-overview .apt-list {
    grid-template-columns: 1fr 1fr 1fr;
  }

  .apt-row {
    flex-direction: column;
    align-items: stretch;
  }

  .apt-row-extra {
    display: flex;
    border-top: 1px solid var(--border);
    padding-top: 6px;
    margin-top: 6px;
  }
}

/* ── TABLET: две колони ── */
@media (min-width: 480px) and (max-width: 899px) {
  #view-overview .apt-list {
    grid-template-columns: 1fr 1fr;
  }
}

/* ── MONTHLY INPUTS GRID ── */
.monthly-inputs-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0 12px;
}
@media (min-width: 900px) {
  .monthly-inputs-grid {
    grid-template-columns: 1fr 1fr 1fr 1fr;
  }
}

/* ── OCCUPANCY GRID — три колони на десктоп ── */
@media (min-width: 900px) {
  .occupancy-grid {
    grid-template-columns: 1fr 1fr 1fr;
  }
}

/* ── ДОПЪЛНИТЕЛНИ АКЦЕНТИ ── */

/* Login екран — топъл фон */
#screen-login {
  background: var(--bg);
}

/* Карти — лека топлина */
.card {
  border: 1px solid var(--border);
}

/* Apt row — лека топлина */
.apt-row {
  border: 1px solid var(--border);
}

/* Header subtitle */
.header-sub { color: #a8c5a0; }

/* Nav inactive */
.nav-btn { color: #7fa885; }

/* Overview date */
.overview-date { color: var(--header); font-weight: 600; }

/* Balance card accent line */
.balance-card {
  border-bottom: 3px solid var(--accent);
}

/* Btn secondary — лавандула акцент */
.btn-secondary {
  background: var(--accent-light);
  color: var(--accent);
  border-color: #c5b8e0;
}

/* Field label color */
.field-label { color: var(--header); }

/* Input focus — зелен border */
.input:focus { border-color: var(--primary); }

/* Tab row */
.tab-row { background: #e5e4dc; }