/* ==========================================================================
   Layout System — AlleProfit
   Container, Sidebar, Topbar, Grid, Flex utilities
   ========================================================================== */

/* ==========================================================================
   CONTAINER
   ========================================================================== */

.container {
  width: 100%;
  max-width: var(--container-max);
  margin-left: auto;
  margin-right: auto;
  padding-left: var(--space-lg);
  padding-right: var(--space-lg);
}

@media (min-width: 1024px) {
  .container {
    padding-left: var(--space-2xl);
    padding-right: var(--space-2xl);
  }
}

.container-narrow {
  max-width: 720px;
}

.container-wide {
  max-width: 1440px;
}

/* ==========================================================================
   TOPBAR
   ========================================================================== */

.topbar {
  position: sticky;
  top: 0;
  z-index: var(--z-sticky);
  height: var(--topbar-height);
  background: rgba(248, 250, 252, 0.85);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border-bottom: 1px solid var(--color-border);
  display: flex;
  align-items: center;
  padding: 0 var(--space-lg);
}

[data-theme='dark'] .topbar {
  background: rgba(11, 17, 33, 0.85);
}

.topbar-inner {
  width: 100%;
  max-width: var(--container-max);
  margin: 0 auto;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-lg);
}

.topbar-brand {
  display: flex;
  align-items: center;
  gap: var(--space-sm);
  font-size: var(--text-xl);
  font-weight: var(--weight-bold);
  color: var(--color-text);
  text-decoration: none;
  flex-shrink: 0;
}

.topbar-brand svg {
  width: 28px;
  height: 28px;
}

.topbar-brand-highlight {
  color: var(--color-primary);
}

/* Theme-aware logo images */
.brand-logo {
  display: block;
}
.brand-logo--dark {
  display: none;
}
[data-theme='dark'] .brand-logo--light {
  display: none;
}
[data-theme='dark'] .brand-logo--dark {
  display: block;
}

.topbar-nav {
  display: flex;
  align-items: center;
  gap: var(--space-xs);
  list-style: none;
}

.topbar-nav a {
  display: inline-flex;
  align-items: center;
  padding: var(--space-sm) var(--space-md);
  font-size: var(--text-sm);
  font-weight: var(--weight-medium);
  color: var(--color-text-secondary);
  border-radius: var(--radius);
  transition: all var(--transition);
  white-space: nowrap;
}

.topbar-nav a:hover,
.topbar-nav a.active {
  color: var(--color-text);
  background: var(--color-surface-hover);
}

.topbar-actions {
  display: flex;
  align-items: center;
  gap: var(--space-sm);
}

/* Hamburger menu button */
.topbar-hamburger {
  display: none;
  width: 40px;
  height: 40px;
  align-items: center;
  justify-content: center;
  border-radius: var(--radius);
  color: var(--color-text);
  cursor: pointer;
}

.topbar-hamburger:hover {
  background: var(--color-surface-hover);
}

@media (max-width: 1023px) {
  .topbar-hamburger {
    display: flex;
    flex-shrink: 0;
  }

  .topbar-nav {
    display: none;
  }

  /* Allow filters/actions to wrap below 1023px so the hamburger never
     gets squeezed off-screen by the Synchronizuj button between 768-900px. */
  .topbar-inner {
    flex-wrap: wrap;
    row-gap: var(--space-sm);
  }

  /* When filters wrap, the topbar needs to grow too — otherwise the 2nd row
     (sync status + Synchronizuj button) spills past the bottom border. */
  .topbar {
    height: auto;
    min-height: var(--topbar-height);
    padding-top: var(--space-xs);
    padding-bottom: var(--space-xs);
  }
}

@media (max-width: 768px) {
  .topbar {
    height: auto;
    min-height: var(--topbar-height);
    padding: var(--space-sm) var(--space-md);
  }

  .topbar-inner {
    flex-wrap: wrap;
    gap: var(--space-sm);
  }

  /* Keep a comfortable gap between the green sync-status dot and the
     Synchronizuj button. space-sm was a no-op (same as the base rule) —
     bump to space-md so the pair visibly separates on phones. */
  .topbar-actions {
    gap: var(--space-md);
  }
}

@media (max-width: 480px) {
  .topbar {
    padding: var(--space-xs) var(--space-sm);
  }

  .topbar-brand {
    font-size: var(--text-base);
  }

  .topbar-brand svg {
    width: 22px;
    height: 22px;
  }
}

/* ==========================================================================
   MOBILE NAVIGATION DRAWER
   ========================================================================== */

.mobile-nav {
  position: fixed;
  inset: 0;
  z-index: var(--z-overlay);
  visibility: hidden;
  opacity: 0;
  transition:
    opacity var(--transition-slow),
    visibility var(--transition-slow);
}

.mobile-nav.active {
  visibility: visible;
  opacity: 1;
}

.mobile-nav-backdrop {
  position: absolute;
  inset: 0;
  background: rgba(0, 0, 0, 0.4);
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
}

.mobile-nav-panel {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  width: 300px;
  max-width: 85vw;
  background: var(--color-surface);
  box-shadow: var(--shadow-xl);
  padding: var(--space-xl);
  transform: translateX(100%);
  transition: transform var(--transition-slow);
  overflow-y: auto;
}

.mobile-nav.active .mobile-nav-panel {
  transform: translateX(0);
}

.mobile-nav-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: var(--space-xl);
}

.mobile-nav-links {
  display: flex;
  flex-direction: column;
  gap: var(--space-xs);
  list-style: none;
}

.mobile-nav-links a {
  display: flex;
  align-items: center;
  gap: var(--space-sm);
  padding: var(--space-md);
  font-size: var(--text-base);
  font-weight: var(--weight-medium);
  color: var(--color-text);
  border-radius: var(--radius);
  transition: background var(--transition);
}

.mobile-nav-links a:hover {
  background: var(--color-surface-hover);
}

.mobile-nav-divider {
  height: 1px;
  background: var(--color-border);
  margin: var(--space-md) 0;
}

/* ==========================================================================
   SIDEBAR (Dashboard Layout)
   ========================================================================== */

.sidebar {
  position: fixed;
  top: 0;
  left: 0;
  bottom: 0;
  width: var(--sidebar-width);
  background: var(--color-surface);
  border-right: 1px solid var(--color-border);
  z-index: var(--z-sticky);
  display: flex;
  flex-direction: column;
  transition:
    width var(--transition-slow),
    transform var(--transition-slow);
  overflow: hidden;
}

.sidebar-header {
  height: var(--topbar-height);
  display: flex;
  align-items: center;
  padding: 0 var(--space-lg);
  border-bottom: 1px solid var(--color-border);
  flex-shrink: 0;
}

.sidebar-nav {
  flex: 1;
  padding: var(--space-md);
  overflow-y: auto;
}

.sidebar-nav-item {
  display: flex;
  align-items: center;
  gap: var(--space-md);
  padding: var(--space-sm) var(--space-md);
  font-size: var(--text-sm);
  font-weight: var(--weight-medium);
  color: var(--color-text-secondary);
  border-radius: var(--radius);
  transition: all var(--transition);
  margin-bottom: 2px;
  cursor: pointer;
  white-space: nowrap;
}

.sidebar-nav-item:hover {
  background: var(--color-surface-hover);
  color: var(--color-text);
}

.sidebar-nav-item.active {
  background: var(--color-primary-light);
  color: var(--color-primary);
  font-weight: var(--weight-semibold);
}

.sidebar-nav-item svg {
  width: 20px;
  height: 20px;
  flex-shrink: 0;
}

.sidebar-section-label {
  font-size: var(--text-xs);
  font-weight: var(--weight-semibold);
  color: var(--color-text-muted);
  text-transform: uppercase;
  letter-spacing: 0.05em;
  padding: var(--space-lg) var(--space-md) var(--space-sm);
}

.sidebar-footer {
  padding: var(--space-md) var(--space-lg);
  border-top: 1px solid var(--color-border);
  flex-shrink: 0;
}

/* Short viewports (phone in landscape): header + footer ate the height and
   squeezed the nav to a ~40px sliver showing only the footer (audit ALPR-67).
   Scroll the whole drawer as one column so nav items are visible on open. */
@media (max-height: 500px) {
  .sidebar {
    overflow-y: auto;
  }
  .sidebar-nav {
    flex: none;
    overflow: visible;
  }
  .sidebar-header {
    position: sticky;
    top: 0;
    z-index: 1;
  }
  .sidebar-footer {
    flex-shrink: 0;
  }
}

/* Collapsed sidebar */
.sidebar.collapsed {
  width: var(--sidebar-collapsed);
}

.sidebar.collapsed .sidebar-nav-item span,
.sidebar.collapsed .sidebar-section-label,
.sidebar.collapsed .sidebar-footer {
  display: none;
}

.sidebar.collapsed .sidebar-nav-item {
  justify-content: center;
  padding: var(--space-sm);
}

/* ==========================================================================
   MAIN CONTENT
   ========================================================================== */

.main-content {
  margin-left: var(--sidebar-width);
  min-height: 100vh;
  transition: margin-left var(--transition-slow);
}

.sidebar.collapsed ~ .main-content {
  margin-left: var(--sidebar-collapsed);
}

.main-content-header {
  padding: var(--space-xl) var(--space-2xl);
  border-bottom: 1px solid var(--color-border);
  background: var(--color-surface);
}

.main-content-body {
  padding: var(--space-xl) var(--space-2xl);
}

/* No sidebar (landing pages, auth) */
.main-content.full-width {
  margin-left: 0;
}

@media (max-width: 1023px) {
  /* Sidebar slides below the topbar so the topbar + hamburger stay visible
     and the user can close the menu or change the date range without first
     dismissing it. --topbar-actual-height is updated by JS (ResizeObserver)
     so sidebar stays pinned correctly even when the topbar wraps to 2-3 rows. */
  .sidebar {
    top: var(--topbar-actual-height, var(--topbar-height));
    transform: translateX(-100%);
  }

  .sidebar.open {
    transform: translateX(0);
    box-shadow: var(--shadow-xl);
  }

  /* Hide the sidebar's own brand row — the topbar already shows the logo,
     so on mobile this header would just be a duplicate eating vertical space. */
  .sidebar-header {
    display: none;
  }

  /* Overlay also starts below the topbar so the topbar remains clickable. */
  .sidebar-overlay {
    top: var(--topbar-actual-height, var(--topbar-height));
  }

  .main-content {
    margin-left: 0;
  }

  .main-content-header,
  .main-content-body {
    padding: var(--space-lg);
  }
}

@media (max-width: 480px) {
  .main-content-header,
  .main-content-body {
    padding: var(--space-md);
  }

  .container {
    padding-left: var(--space-md);
    padding-right: var(--space-md);
  }
}

/* ==========================================================================
   GRID SYSTEM
   ========================================================================== */

.grid {
  display: grid;
  gap: var(--space-lg);
}

.grid-2 {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: var(--space-lg);
}

.grid-3 {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--space-lg);
}

.grid-4 {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: var(--space-lg);
}

/* Responsive grid breakpoints */
@media (max-width: 1279px) {
  .grid-4 {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (max-width: 1023px) {
  .grid-3 {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (max-width: 768px) {
  .grid-3 {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 639px) {
  .grid-2,
  .grid-3,
  .grid-4 {
    grid-template-columns: 1fr;
  }
}

/* Auto-fill grid */
.grid-auto {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap: var(--space-lg);
}

@media (max-width: 480px) {
  .grid-auto {
    grid-template-columns: 1fr;
  }
}

/* ==========================================================================
   FLEX UTILITIES
   ========================================================================== */

.flex {
  display: flex;
}
.flex-col {
  display: flex;
  flex-direction: column;
}
.flex-wrap {
  flex-wrap: wrap;
}
.flex-1 {
  flex: 1;
}

.flex-center {
  display: flex;
  align-items: center;
  justify-content: center;
}

.flex-between {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-sm);
  flex-wrap: wrap;
}

.flex-start {
  display: flex;
  align-items: flex-start;
}

.flex-end {
  display: flex;
  align-items: center;
  justify-content: flex-end;
}

.items-center {
  align-items: center;
}
.items-start {
  align-items: flex-start;
}
.items-end {
  align-items: flex-end;
}

.justify-center {
  justify-content: center;
}
.justify-between {
  justify-content: space-between;
}
.justify-end {
  justify-content: flex-end;
}

.gap-xs {
  gap: var(--space-xs);
}
.gap-sm {
  gap: var(--space-sm);
}
.gap-md {
  gap: var(--space-md);
}
.gap-lg {
  gap: var(--space-lg);
}
.gap-xl {
  gap: var(--space-xl);
}

/* ==========================================================================
   SPACING UTILITIES
   ========================================================================== */

.m-0 {
  margin: 0;
}
.mt-sm {
  margin-top: var(--space-sm);
}
.mt-md {
  margin-top: var(--space-md);
}
.mt-lg {
  margin-top: var(--space-lg);
}
.mt-xl {
  margin-top: var(--space-xl);
}
.mt-2xl {
  margin-top: var(--space-2xl);
}
.mt-3xl {
  margin-top: var(--space-3xl);
}

.mb-sm {
  margin-bottom: var(--space-sm);
}
.mb-md {
  margin-bottom: var(--space-md);
}
.mb-lg {
  margin-bottom: var(--space-lg);
}
.mb-xl {
  margin-bottom: var(--space-xl);
}
.mb-2xl {
  margin-bottom: var(--space-2xl);
}

.p-md {
  padding: var(--space-md);
}
.p-lg {
  padding: var(--space-lg);
}
.p-xl {
  padding: var(--space-xl);
}
.p-2xl {
  padding: var(--space-2xl);
}

/* ==========================================================================
   DISPLAY UTILITIES
   ========================================================================== */

.hidden {
  display: none;
}
.block {
  display: block;
}
.inline-block {
  display: inline-block;
}

@media (max-width: 639px) {
  .hide-mobile {
    display: none !important;
  }
}

/* Topbar przy tablet-landscape: pełna etykieta „Synchronizuj" wypychała
   akcje ~27px poza viewport (poziomy scroll na każdej podstronie aplikacji).
   Poniżej 1120px w topbarze zostaje sama ikona. */
@media (max-width: 1120px) {
  .topbar-actions .hide-mobile {
    display: none !important;
  }
}

@media (min-width: 640px) and (max-width: 1023px) {
  .hide-tablet {
    display: none !important;
  }
}

@media (min-width: 1024px) {
  .hide-desktop {
    display: none !important;
  }
}

@media (max-width: 1023px) {
  .hide-below-desktop {
    display: none !important;
  }
}

/* ==========================================================================
   WIDTH / HEIGHT UTILITIES
   ========================================================================== */

.w-full {
  width: 100%;
}
.h-full {
  height: 100%;
}
.min-h-screen {
  min-height: 100vh;
}

/* ==========================================================================
   AUTH LAYOUT (centered card)
   ========================================================================== */

.auth-layout {
  min-height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: var(--space-lg);
  background: var(--color-bg);
}

.auth-card {
  width: 100%;
  max-width: 420px;
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-xl);
  box-shadow: var(--shadow-lg);
  padding: var(--space-2xl);
}

.auth-header {
  text-align: center;
  margin-bottom: var(--space-2xl);
}

.auth-header h1 {
  font-size: var(--text-2xl);
  margin-top: var(--space-lg);
}

.auth-header p {
  margin-top: var(--space-sm);
  font-size: var(--text-sm);
}

.auth-footer {
  text-align: center;
  margin-top: var(--space-xl);
  font-size: var(--text-sm);
  color: var(--color-text-muted);
}

.auth-footer a {
  color: var(--color-primary);
  font-weight: var(--weight-medium);
}

.auth-footer a:hover {
  color: var(--color-primary-hover);
}

/* Very narrow phones (e.g. Z Fold front screen, 320–360px): drop the
   "Nie masz konta?" / "Zarejestruj się" pair onto two lines so the link
   isn't glued to the sentence, and force the password row's "Nie
   pamiętasz hasła?" link to its own line below the "Hasło" label. */
@media (max-width: 400px) {
  .auth-footer a {
    display: block;
    margin-top: var(--space-xs);
  }
  .form-group > .flex-between {
    flex-direction: column;
    align-items: flex-start;
    gap: var(--space-xs);
  }
}

/* ==========================================================================
   AUTH CARD - MOBILE
   login/register/reset-password/link-account load layout.css but NOT
   dashboard.css, where these rules originally lived - so phones kept the
   48px desktop padding (RWD audit 2026-07-02). Mirrors dashboard.css.
   ========================================================================== */
@media (max-width: 768px) {
  .auth-card {
    padding: var(--space-lg);
  }
}
@media (max-width: 480px) {
  .auth-card {
    padding: var(--space-md);
    border-radius: var(--radius-lg);
  }
  .auth-header h1 {
    font-size: var(--text-xl);
  }
}

/* Any viewport area past the body (iOS keyboard shifts, overscroll,
   scroll-lock glitches) shows the page background, not raw black. */
html {
  background: var(--color-bg);
}