/* layout.css — topbar, nawigacja, kontener, ekran logowania */

/* ---------- topbar ---------- */
.topbar {
  display: flex; align-items: center; gap: 22px;
  height: var(--topbar-h);
  padding: 0 26px;
  position: sticky; top: 0; z-index: 50;
  background: var(--surface-glass);
  backdrop-filter: saturate(180%) blur(16px);
  -webkit-backdrop-filter: saturate(180%) blur(16px);
  border-bottom: 1px solid var(--line);
  box-shadow: 0 1px 0 rgba(255,255,255,.4), var(--sh-1);
}
.topbar-logo { display: flex; align-items: center; gap: 11px; color: var(--text-strong); }
.topbar-logo:hover { text-decoration: none; }
.logo-img { height: 30px; display: block; }
/* logo zależne od motywu: kolorowe (jasny) / białe (ciemny) */
.logo-dark { display: none; }
[data-theme="dark"] .logo-light { display: none; }
[data-theme="dark"] .logo-dark { display: block; }
.app-name {
  font-weight: 700; font-size: 15px; color: var(--text-strong); letter-spacing: -.02em;
  padding-left: 12px; margin-left: 1px; position: relative;
}
.app-name::before {
  content: ''; position: absolute; left: 0; top: 50%; transform: translateY(-50%);
  width: 1px; height: 22px; background: var(--line-strong);
}

#main-nav { display: flex; gap: 2px; flex: 1; align-items: center; }
#main-nav a {
  color: var(--muted); font-weight: 600; font-size: 13.5px;
  padding: 8px 13px; border-radius: var(--r-sm);
  position: relative; transition: color var(--t-fast) var(--ease), background var(--t-fast) var(--ease);
}
#main-nav a:hover { color: var(--text-strong); background: var(--surface-3); text-decoration: none; }
#main-nav a.active { color: var(--accent); background: var(--info-bg); }
#main-nav a.active::after {
  content: ''; position: absolute; left: 13px; right: 13px; bottom: -1px; height: 2px;
  background: var(--grad-brand); border-radius: 2px;
}

.topbar-user { display: flex; align-items: center; gap: 8px; font-size: 13px; color: var(--muted); }
#user-label {
  font-weight: 600; color: var(--text); padding: 5px 11px;
  background: var(--surface-3); border-radius: var(--r-pill); font-size: 12.5px;
  white-space: nowrap;
}
.theme-toggle {
  width: 34px; height: 34px; display: inline-grid; place-items: center;
  border: 1px solid var(--line); background: var(--surface); color: var(--muted);
  border-radius: var(--r-sm); cursor: pointer; font-size: 15px;
  transition: all var(--t-fast) var(--ease);
}
.theme-toggle:hover { color: var(--text-strong); border-color: var(--line-strong); transform: translateY(-1px); }

/* ---------- kontener główny ---------- */
/* układ: topbar + treść (rośnie) + stopka przyklejona do dołu na krótkich stronach */
#app-view { display: flex; flex-direction: column; min-height: 100vh; }
main {
  flex: 1 0 auto;
  max-width: 1400px; margin: 0 auto; width: 100%;
  padding: 30px 28px 80px;
  animation: fade-up var(--t-slow) var(--ease-out);
}

/* ---------- stopka aplikacji (informacja wewnętrzna) ---------- */
.app-footer {
  flex-shrink: 0;
  text-align: center;
  font-size: 12px; color: var(--faint);
  padding: 16px 20px 20px;
  border-top: 1px solid var(--line);
  background: var(--surface-glass);
  backdrop-filter: saturate(160%) blur(8px);
  -webkit-backdrop-filter: saturate(160%) blur(8px);
  letter-spacing: .01em;
}
.app-footer .heart { color: #e0245e; }
.app-footer .ver-link { color: var(--muted); font-weight: 700; text-decoration: none; border-bottom: 1px dashed var(--line-strong); padding-bottom: 1px; transition: color var(--t-fast) var(--ease), border-color var(--t-fast) var(--ease); }
.app-footer .ver-link:hover { color: var(--accent); border-bottom-color: var(--accent); text-decoration: none; }
@media print { .app-footer { display: none; } }
/* edytor kosztorysu — szeroki obszar roboczy (wykorzystuje niemal całą szerokość okna) */
main.wide { max-width: none; padding: 24px clamp(20px, 3vw, 48px) 90px; }

/* ---------- ekran logowania ---------- */
#login-view {
  display: flex; align-items: center; justify-content: center;
  min-height: 100vh; padding: 24px; position: relative; overflow: hidden;
}
#login-view::before {
  content: ''; position: absolute; inset: 0; z-index: 0;
  background:
    radial-gradient(680px 420px at 18% 12%, rgba(27,63,230,.22), transparent 60%),
    radial-gradient(620px 420px at 84% 86%, rgba(91,201,232,.22), transparent 60%),
    radial-gradient(520px 360px at 75% 8%, rgba(109,91,232,.18), transparent 60%);
  animation: fade-in .8s var(--ease);
}
.login-card {
  position: relative; z-index: 1;
  background: var(--surface-glass);
  backdrop-filter: saturate(180%) blur(20px);
  -webkit-backdrop-filter: saturate(180%) blur(20px);
  border-radius: var(--r-xl);
  border: 1px solid var(--line);
  padding: 42px 40px;
  width: 410px; max-width: 100%;
  box-shadow: var(--sh-4);
  animation: pop-in var(--t-slow) var(--ease-out);
}
.login-card::before {
  content: ''; position: absolute; inset: 0; border-radius: inherit; padding: 1px;
  background: var(--grad-brand); opacity: .5;
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor; mask-composite: exclude; pointer-events: none;
}
.login-card .logo-img { height: 38px; }
.login-sub { color: var(--muted); font-size: 13px; margin: 12px 0 26px; }
.login-card label { display: block; font-size: 12px; font-weight: 700; color: var(--text-strong); margin-bottom: 16px; }
.login-card input { display: block; width: 100%; margin-top: 6px; padding: 11px 13px; }
.login-link {
  display: block; text-align: center; font-size: 12.5px; margin-top: 16px; cursor: pointer;
  color: var(--muted); font-weight: 600;
}
.login-link:hover { color: var(--accent); text-decoration: none; }
.login-info { font-size: 13px; color: var(--text); margin-bottom: 18px; line-height: 1.6; }

/* ---------- nagłówek widoku ---------- */
.view-head {
  display: flex; align-items: center; justify-content: space-between; gap: 16px;
  margin-bottom: 22px; flex-wrap: wrap;
}
.view-head h1 {
  font-size: 25px; display: flex; align-items: center; gap: 13px; line-height: 1.2;
}
.view-head h1::before {
  content: ''; width: 5px; height: 26px; border-radius: 3px;
  background: var(--grad-brand); box-shadow: 0 2px 8px rgba(27,63,230,.35);
}
.view-head h1 .cell-sub, .view-head h1 span.cell-sub { font-size: 14px; }
.view-actions { display: flex; gap: 9px; align-items: center; flex-wrap: wrap; }
.view-actions input, .view-actions select { height: 38px; }

@media (max-width: 720px) {
  .topbar { gap: 12px; padding: 0 14px; overflow-x: auto; }
  #main-nav { gap: 0; }
  #main-nav a { padding: 8px 9px; font-size: 12.5px; }
  main { padding: 20px 14px 60px; }
  #user-label { display: none; }
}