/* =============================================================================
   Keret: belépés, fejléc, oldalsáv (rajzjegyzék), oldalszerkezet
   ========================================================================== */

/* ---------- Belépés ---------- */
#authScreen {
  position: fixed; inset: 0;
  display: flex; align-items: center; justify-content: center;
  z-index: 9000; padding: 20px;
  background-color: var(--paper);
  /* finom szerkesztőrács — a tervezőasztal motívuma */
  background-image:
    linear-gradient(rgba(27, 94, 142, .08) 1px, transparent 1px),
    linear-gradient(90deg, rgba(27, 94, 142, .08) 1px, transparent 1px);
  background-size: 48px 48px;
}
#authScreen.hidden { display: none; }
.auth-card {
  background: var(--sheet); padding: 34px 34px 30px;
  border: 1px solid var(--rule); border-radius: var(--r-lg);
  width: 420px; max-width: 100%;
  box-shadow: var(--sh-pop);
  position: relative;
}
.auth-card h1 { font-size: 26px; margin-bottom: 4px; display: flex; gap: 12px; align-items: center; }
.auth-card h1 .mark {
  width: 36px; height: 36px; border-radius: 50%;
  border: 2px solid var(--ink); background: var(--sheet); color: var(--ink);
  display: inline-flex; align-items: center; justify-content: center;
  font-family: var(--font-cond); font-size: 18px; font-weight: 700;
  position: relative; flex: 0 0 auto;
}
.auth-card h1 .mark::after {
  content: ''; position: absolute; top: -3px; right: -3px; width: 10px; height: 10px; border-radius: 50%;
  background: var(--signal); border: 2px solid var(--sheet);
}
.auth-card .sub { color: var(--ink-3); margin-bottom: 22px; font-size: var(--fs-md); }
.auth-card .form-row { margin-bottom: 14px; }
.auth-card button.primary {
  width: 100%; min-height: 44px; padding: 11px;
  background: var(--primary); color: #fff;
  border: 1px solid var(--primary); border-radius: var(--r-sm);
  font-weight: 600; font-size: var(--fs-md);
  transition: background var(--transition);
}
.auth-card button.primary:hover { background: var(--primary-hover); }
.auth-card button.primary:disabled { opacity: .6; cursor: wait; }
.app-lang-btn.auth-mode { color: var(--ink-2); border-right-color: var(--rule) !important; }
.app-lang-btn.auth-mode:hover { background: var(--sheet-3); color: var(--ink); }
.app-lang-btn.auth-mode.active { background: var(--ink); color: #fff; }
.auth-toggle { text-align: center; margin-top: 16px; font-size: var(--fs-sm); color: var(--ink-3); }
.auth-toggle a, .auth-link { color: var(--primary); cursor: pointer; font-weight: 600; text-decoration: underline; text-underline-offset: 2px; font-size: var(--fs-sm); }
.auth-back { font-size: var(--fs-sm); color: var(--ink-3); margin-bottom: 12px; cursor: pointer; }
.auth-back:hover { color: var(--ink); }
.auth-error, .auth-success {
  padding: 10px 12px; border-radius: var(--r-sm);
  font-size: var(--fs-sm); margin-bottom: 14px; display: none;
  border: 1px solid transparent;
}
.auth-error { background: var(--danger-tint); color: #8c1d29; border-color: #f2c4ca; }
.auth-success { background: var(--success-tint); color: #155c38; border-color: #bfe3cf; }
.auth-error.show, .auth-success.show { display: block; }
.captcha-row {
  background: var(--sheet-2); border: 1px solid var(--rule);
  border-radius: var(--r-sm); padding: 10px 12px;
  display: flex; gap: 10px; align-items: center; margin-bottom: 12px;
}
.captcha-q { font-family: var(--font-cond); font-weight: 600; font-size: 18px; flex: 1; }
.captcha-row input { width: 100px; }
.captcha-row button { background: none; border: none; color: var(--ink-3); font-size: var(--fs-xs); padding: 4px 8px; }
.captcha-row button:hover { color: var(--ink); }
.code-input { font-family: var(--font-cond); font-size: 26px !important; letter-spacing: 10px !important; text-align: center !important; font-weight: 600; padding: 14px !important; }
.standalone-info {
  background: var(--warning-tint); border: 1px solid #f0d49b; color: #6e4300;
  padding: 12px 14px; border-radius: var(--r-sm); font-size: var(--fs-sm); margin-bottom: 14px; line-height: 1.5;
}

/* ---------- Fejléc ---------- */
header.app-header {
  background: var(--sheet); color: var(--ink);
  padding: 0 16px 0 18px; height: var(--header-h);
  display: flex; align-items: center; gap: 14px;
  flex-shrink: 0; position: relative; z-index: 60;
  border-bottom: 1px solid var(--rule);
}
.logo { display: flex; align-items: center; gap: 10px; font-family: var(--font-cond); font-weight: 700; font-size: 20px; letter-spacing: .01em; white-space: nowrap; }
/* Márkajel: a kapcsolási rajzok generátor-jele (kör + betű) és egy jelzőlámpa */
.logo-mark {
  width: 30px; height: 30px; border-radius: 50%;
  border: 2px solid var(--ink); color: var(--ink); background: var(--sheet);
  display: inline-flex; align-items: center; justify-content: center;
  font-family: var(--font-cond); font-size: 16px; font-weight: 700; line-height: 1;
  position: relative; flex: 0 0 auto;
}
.logo-mark::after {
  content: ''; position: absolute; top: -3px; right: -3px;
  width: 9px; height: 9px; border-radius: 50%;
  background: var(--signal); border: 2px solid var(--sheet);
}
body.is-offline .logo-mark::after { background: var(--rule-2); }
.header-divider { width: 1px; height: 24px; background: var(--rule); }
.project-pill { display: flex; align-items: center; gap: 8px; min-width: 0; font-family: var(--font-cond); font-size: 17px; font-weight: 600; color: var(--ink); }
.project-pill #projectLabel { display: inline-flex; align-items: center; gap: 8px; min-width: 0; }
.project-pill strong { font-weight: 600; }
.role-badge {
  font-family: var(--font-cond); font-size: 12px; font-weight: 600; line-height: 1;
  padding: 3px 7px 4px; border-radius: var(--r-xs);
  text-transform: none; letter-spacing: .01em;
  display: inline-flex; align-items: center; white-space: nowrap;
}
/* "Gravírozott tábla" — mint a kapcsolószekrények feliratai */
.role-badge.admin { background: var(--ink); color: #fff; }
.role-badge.editor { background: var(--primary-tint); color: var(--primary-ink); }
.role-badge.viewer { background: var(--sheet-3); color: var(--ink-2); }
.header-spacer { flex: 1; min-width: 0; }
.header-actions { display: flex; gap: 6px; align-items: center; position: relative; }
.header-actions .btn {
  background: transparent; color: var(--ink-2);
  border: 1px solid transparent; min-height: 36px; padding: 6px 10px;
  border-radius: var(--r-sm); font-size: var(--fs-sm); font-weight: 500;
  display: inline-flex; align-items: center; gap: 6px;
}
.header-actions .btn:hover { background: var(--sheet-3); color: var(--ink); border-color: var(--rule); }
/* Csengő: emoji helyett vonalikon */
#notifBell { background: transparent !important; border: 1px solid transparent !important; color: var(--ink-2) !important; width: 38px; height: 38px; padding: 0 !important; justify-content: center; border-radius: var(--r-sm) !important; }
#notifBell:hover { background: var(--sheet-3) !important; border-color: var(--rule) !important; }
#bellIcon { font-size: 0 !important; width: 20px; height: 20px; display: inline-block; background: currentColor; -webkit-mask: var(--i-bell) center / contain no-repeat; mask: var(--i-bell) center / contain no-repeat; }
#notifCount { background: var(--danger) !important; font-family: var(--font-cond); font-size: 11px !important; top: 2px !important; right: 2px !important; border: 2px solid var(--sheet); }

.user-menu-btn {
  background: transparent; color: var(--ink);
  border: 1px solid transparent; padding: 3px 10px 3px 3px;
  border-radius: var(--r-pill); font-size: var(--fs-sm); font-weight: 500;
  display: inline-flex; align-items: center; gap: 8px;
}
.user-menu-btn:hover { background: var(--sheet-3); border-color: var(--rule); }
.user-menu-btn .avatar { width: 30px; height: 30px; font-size: 12px; }
.user-menu {
  position: absolute; top: calc(100% + 6px); right: 0;
  background: var(--sheet); border: 1px solid var(--rule);
  border-radius: var(--r-md); min-width: 230px; box-shadow: var(--sh-pop);
  display: none; z-index: 300; overflow: hidden; padding: 4px 0;
}
.user-menu.open { display: block; }
.user-menu .menu-head { padding: 10px 14px 12px; border-bottom: 1px solid var(--rule); margin-bottom: 4px; }
.user-menu .menu-head strong { display: block; font-weight: 600; }
.user-menu .menu-head small { color: var(--ink-3); font-size: var(--fs-xs); }
.user-menu a {
  display: flex; align-items: center; gap: 10px; padding: 9px 14px;
  color: var(--ink); text-decoration: none; cursor: pointer; font-size: var(--fs-md);
}
.user-menu a:hover { background: var(--sheet-3); }
.user-menu a:last-child { color: var(--danger); border-top: 1px solid var(--rule); margin-top: 4px; }
.user-menu .menu-mobile-only { display: none; }

/* Nyelvválasztó — szegmentált kapcsoló */
.lang-switcher {
  display: inline-flex; border: 1px solid var(--rule-2); border-radius: var(--r-sm); overflow: hidden; background: var(--sheet);
}
.app-lang-btn {
  background: transparent; color: var(--ink-2); border: none;
  padding: 5px 9px; min-height: 30px;
  font-family: var(--font-cond); font-size: 13px; font-weight: 600; letter-spacing: .02em;
  border-right: 1px solid var(--rule);
  transition: background var(--transition), color var(--transition);
}
.lang-switcher .app-lang-btn:last-child { border-right: none; }
.app-lang-btn:hover { background: var(--sheet-3); color: var(--ink); }
.app-lang-btn.active, .app-lang-btn.active:hover { background: var(--ink); color: #fff; }

/* Deviza */
.currency-switcher { position: relative; display: inline-block; }
.currency-trigger {
  background: var(--sheet); color: var(--ink-2);
  border: 1px solid var(--rule-2); border-radius: var(--r-sm);
  padding: 5px 9px; min-height: 32px; font-family: var(--font-cond); font-size: 13px; font-weight: 600;
  display: inline-flex; align-items: center; gap: 5px; min-width: 60px;
}
.currency-trigger:hover { background: var(--sheet-3); color: var(--ink); }
.currency-trigger .arrow { font-size: 9px; opacity: .7; }
.currency-menu {
  position: absolute; top: calc(100% + 6px); right: 0;
  background: var(--sheet); border: 1px solid var(--rule); border-radius: var(--r-md);
  min-width: 220px; max-height: 340px; overflow-y: auto;
  box-shadow: var(--sh-pop); z-index: 300; display: none; padding: 4px 0;
}
.currency-menu.open { display: block; }
.currency-option { display: flex; align-items: center; gap: 8px; padding: 8px 14px; cursor: pointer; color: var(--ink); font-size: var(--fs-sm); }
.currency-option:hover { background: var(--sheet-3); }
.currency-option.active { background: var(--primary-tint); color: var(--primary-ink); font-weight: 600; }
.currency-option .flag { font-size: 16px; min-width: 20px; }
.currency-option .code { font-family: var(--font-cond); font-weight: 600; min-width: 36px; }
.currency-option .name { font-size: var(--fs-xs); color: var(--ink-3); flex: 1; }

/* Tárhely-jelző */
.storage-indicator {
  display: flex; align-items: center; gap: 7px;
  padding: 4px 8px; min-height: 32px;
  border: 1px solid transparent; border-radius: var(--r-sm);
  font-family: var(--font-cond); font-size: 13px; font-weight: 600; color: var(--ink-3);
  cursor: pointer; white-space: nowrap; flex-shrink: 0;
}
.storage-indicator:hover { background: var(--sheet-3); border-color: var(--rule); color: var(--ink); }
.storage-indicator .label { font-size: 0; width: 16px; height: 16px; background: currentColor; -webkit-mask: var(--i-database) center / contain no-repeat; mask: var(--i-database) center / contain no-repeat; }
.storage-indicator .bar { width: 48px; height: 5px; background: var(--sheet-3); border-radius: 3px; overflow: hidden; border: 1px solid var(--rule); }
.storage-indicator .fill { height: 100%; background: var(--primary); transition: width .3s, background .3s; }
.storage-indicator.warn .fill { background: var(--lamp-orange); }
.storage-indicator.danger .fill { background: var(--danger); }
.storage-indicator.danger { color: var(--danger); }
.storage-indicator .pct { min-width: 28px; text-align: right; }

/* Jelenlévők */
.presence { display: flex; align-items: center; }
.presence-avatar {
  width: 28px; height: 28px; border-radius: 50%;
  background: var(--primary-tint); color: var(--primary-ink);
  font-family: var(--font-cond); font-size: 12px; font-weight: 700;
  display: flex; align-items: center; justify-content: center;
  border: 2px solid var(--sheet); margin-left: -6px;
}
.presence-avatar:first-child { margin-left: 0; }
.presence-avatar.viewer { background: var(--sheet-3); color: var(--ink-2); }
.presence-avatar.editor { background: #e6efe0; color: #2f5a1b; }

/* ---------- Fő elrendezés ---------- */
.app-main { flex: 1; display: flex; overflow: hidden; min-height: 0; }

/* Oldalsáv — "rajzjegyzék": egyszerű lista, a számok jobbra igazítva */
.side-nav {
  width: var(--nav-w); background: var(--sheet); color: var(--ink-2);
  flex-shrink: 0; display: flex; flex-direction: column; overflow-y: auto;
  padding: 8px 10px 16px; border-right: 1px solid var(--rule);
}
.nav-section {
  padding: 16px 10px 6px; font-family: var(--font); font-size: var(--fs-xs); font-weight: 600;
  text-transform: none; letter-spacing: 0; color: var(--ink-3);
}
#navProjectName {
  font-family: var(--font-cond) !important; font-size: 18px !important; font-weight: 600 !important;
  color: var(--ink) !important; padding: 14px 10px 8px !important; line-height: 1.2;
  overflow-wrap: anywhere;
}
.nav-item {
  padding: 7px 10px; min-height: 38px; display: flex; align-items: center; gap: 10px;
  cursor: pointer; font-family: var(--font-cond); font-size: 16px; font-weight: 500;
  border-radius: var(--r-sm); margin: 1px 0; position: relative;
  color: var(--ink-2);
  transition: background var(--transition), color var(--transition);
}
.nav-item:hover { background: var(--sheet-3); color: var(--ink); }
.nav-item.active { background: var(--primary-tint); color: var(--primary-ink); font-weight: 600; }
.nav-item.active::before {
  content: ''; position: absolute; left: -10px; top: 6px; bottom: 6px; width: 3px; border-radius: 0 3px 3px 0;
  background: var(--primary);
}
/* Emoji helyett vonalikon (a data-page alapján) */
.nav-icon {
  font-size: 0 !important; width: 20px; height: 20px; flex: 0 0 auto;
  background-color: currentColor; opacity: .8;
  -webkit-mask: var(--i, var(--i-layers)) center / contain no-repeat; mask: var(--i, var(--i-layers)) center / contain no-repeat;
}
.nav-item.active .nav-icon, .nav-item:hover .nav-icon { opacity: 1; }
.nav-item[data-page="hub"] { --i: var(--i-home); }
.nav-item[data-page="tozsde"] { --i: var(--i-trend); }
.nav-item[data-page="admin"] { --i: var(--i-shield); }
.nav-item[data-page="customers"] { --i: var(--i-contact); }
.nav-item[data-page="suppliers"] { --i: var(--i-truck); }
.nav-item[data-page="purchaseorders"] { --i: var(--i-cart); }
.nav-item[data-page="inventory"] { --i: var(--i-box); }
.nav-item[data-page="offers"] { --i: var(--i-filetext); }
.nav-item[data-page="salesorders"] { --i: var(--i-clipcheck); }
.nav-item[data-page="receivables"] { --i: var(--i-wallet); }
.nav-item[data-nav="back"] { --i: var(--i-back); color: var(--primary); }
.nav-item[data-page="dashboard"] { --i: var(--i-dashboard); }
.nav-item[data-page="plans"] { --i: var(--i-plan); }
.nav-item[data-page="lightning"] { --i: var(--i-bolt); }
.nav-item[data-page="pincats"] { --i: var(--i-tag); }
.nav-item[data-page="tasks"] { --i: var(--i-tasks); }
.nav-item[data-page="checklists"] { --i: var(--i-checklist); }
.nav-item[data-page="worktasks"][data-task-kind="expense"] { --i: var(--i-expense); }
.nav-item[data-page="worktasks"][data-task-kind="income"] { --i: var(--i-income); }
.nav-item[data-page="gantt"] { --i: var(--i-gantt); }
.nav-item[data-page="photogallery"] { --i: var(--i-image); }
.nav-item[data-page="messenger"] { --i: var(--i-chat); }
.nav-item[data-page="members"] { --i: var(--i-users); }
.nav-item[data-page="docs"] { --i: var(--i-folder); }
.nav-item[data-page="reports"] { --i: var(--i-chart); }
.nav-item[data-page="activity"] { --i: var(--i-pulse); }
.nav-item[data-page="pinhistory"] { --i: var(--i-history); }
.nav-item[data-page="ai"] { --i: var(--i-chip); }
#navAdmin { color: var(--ink-2) !important; font-weight: 500 !important; }
#navAI { border-top: 1px solid var(--rule) !important; margin-top: 10px !important; padding-top: 12px !important; font-weight: 500 !important; }
.nav-badge {
  margin-left: auto; font-family: var(--font-cond); font-size: 14px; font-weight: 500;
  color: var(--ink-3); background: none; border: none; padding: 0 2px; min-width: 18px; text-align: right;
}
.nav-item.active .nav-badge { color: var(--primary-ink); }

/* ---------- Oldalak ---------- */
.page-container { flex: 1; overflow: auto; background: var(--paper); position: relative; min-width: 0; }
.page { display: none; height: 100%; }
.page.active { display: flex; flex-direction: column; }
/* Oldalfej — a tervlap szövegmezőjének mintájára: cím balra, műveletek jobbra */
.page-head {
  background: var(--sheet); padding: 14px 24px;
  border-bottom: 1px solid var(--rule);
  display: flex; align-items: center; gap: 12px; flex-shrink: 0; min-height: 64px;
}
.page-head h2 { font-size: 24px; font-weight: 600; }
.page-head h2 + span, .page-head h2 + div { color: var(--ink-3); }
.head-spacer { flex: 1; }
.page-body { flex: 1; overflow: auto; padding: 24px; }
.page-body.no-pad { padding: 0; }
.empty-state { padding: 56px 20px; text-align: center; color: var(--ink-3); }
.empty-state .icon {
  width: 44px; height: 44px; margin: 0 auto 12px; font-size: 0; color: transparent;
  background: var(--ink-3); opacity: .55;
  -webkit-mask: var(--i, var(--i-layers)) center / contain no-repeat; mask: var(--i, var(--i-layers)) center / contain no-repeat;
}

/* Mobil menügomb (asztalin rejtve) */
.mobile-menu-btn { display: none; }

/* Felhasználói menü: vonalikonok és (mobilon) a beállítások */
.user-menu a.mi::before {
  content: ''; width: 18px; height: 18px; flex: 0 0 auto; background: currentColor; opacity: .75;
  -webkit-mask: var(--i) center / contain no-repeat; mask: var(--i) center / contain no-repeat;
}
.menu-settings { padding: 4px 0 6px; border-bottom: 1px solid var(--rule); margin-bottom: 4px; }
.user-menu .menu-setting { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 7px 14px; min-height: 46px; color: var(--ink); font-size: var(--fs-md); border: none; margin: 0; }
.user-menu .menu-setting:last-child { color: var(--ink); border-top: none; margin-top: 0; }
.mi-label { display: inline-flex; align-items: center; gap: 10px; }
.mi-label::before { content: ''; width: 18px; height: 18px; background: currentColor; opacity: .75; -webkit-mask: var(--i) center / contain no-repeat; mask: var(--i) center / contain no-repeat; }
.menu-setting select { width: auto; min-width: 120px; min-height: 36px; padding: 4px 30px 4px 10px; }
.menu-setting .lang-switcher .app-lang-btn { min-height: 34px; padding: 5px 11px; }
.menu-setting-val { font-family: var(--font-cond); font-weight: 600; color: var(--ink-2); }
.nav-kbd { margin-left: auto; font-size: 11px; color: var(--ink-3); background: transparent; }

/* Próbaidő-sáv (JS hozza létre, inline stílussal) — a fejléc fölött, nyugodt tónusban */
#trialBanner {
  background: var(--ink) !important; color: #fff !important; box-shadow: none !important;
  height: 36px; padding: 0 16px !important; display: flex; align-items: center; justify-content: center; gap: 6px;
  font-family: var(--font); font-size: 13px !important; font-weight: 500 !important;
}
#trialBanner a { color: var(--signal) !important; font-weight: 600; }