/* Most aliasów legacy → design system UI. Nie nadpisuje .app-shell / .btn / .nav-item / .kpi-* z ui-base/components. */

/* --- Alias przycisków i komunikatów --- */
.button-link,
a.button-link {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-2);
  border-radius: var(--radius-sm);
  border: 1px solid var(--color-border-strong);
  background: var(--color-surface);
  color: var(--color-text);
  font-size: var(--fs-sm);
  font-weight: var(--fw-medium);
  padding: 0.5rem 0.9rem;
  min-height: 40px;
  height: 40px;
  box-sizing: border-box;
  text-decoration: none;
  cursor: pointer;
  align-self: center;
}
.button-link:hover { background: var(--color-surface-hover); }
button.secondary,
.btn.secondary {
  border-color: transparent;
  background: transparent;
}
button.secondary:hover,
.btn.secondary:hover { background: var(--color-surface-hover); }
button[type="submit"]:not(.btn):not(.btn-ghost):not(.btn-danger):not(.secondary) {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-2);
  border-radius: var(--radius-sm);
  border: 1px solid var(--color-accent);
  background: var(--color-accent);
  color: #fff;
  font-size: var(--fs-sm);
  font-weight: var(--fw-medium);
  padding: 0.5rem 0.9rem;
  min-height: 40px;
  height: 40px;
  box-sizing: border-box;
  cursor: pointer;
  box-shadow: 0 2px 8px rgba(109, 74, 238, 0.28);
  align-self: center;
}
button[type="submit"]:not(.btn):not(.btn-ghost):not(.btn-danger):not(.secondary):hover {
  background: var(--color-accent-hover);
  border-color: var(--color-accent-hover);
}

.alert {
  padding: 0.75rem 1rem;
  border-radius: var(--radius-md);
  background: var(--color-danger-tint);
  border: 1px solid var(--color-danger-border);
  color: var(--color-danger);
  margin: 0 0 var(--space-4);
  font-size: var(--fs-sm);
}
.alert.success,
.flash-ok {
  background: var(--color-success-tint);
  border-color: var(--color-success-border);
  color: var(--color-success);
}
.field-error,
.error-text {
  font-size: var(--fs-2xs);
  color: var(--color-danger);
  margin: 0.15rem 0 0;
}
.status-note { color: var(--color-text-muted); font-size: var(--fs-sm); margin-bottom: var(--space-3); }

/* --- Formularze bez .input/.select (legacy) --- */
.company-form fieldset,
.filters fieldset {
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  padding: var(--space-4);
  margin: 0 0 var(--space-4);
  background: var(--color-surface);
}
.company-form legend,
.filters legend {
  font-size: var(--fs-xs);
  font-weight: var(--fw-semibold);
  color: var(--color-text-secondary);
  padding: 0 var(--space-1);
}
.company-form label,
.filters label,
.filters-more label,
.doc-filters label,
.ksef-panel label,
.payment-form label,
.stack label {
  display: flex;
  flex-direction: column;
  gap: 0.35rem;
  font-size: var(--fs-xs);
  font-weight: var(--fw-semibold);
  color: var(--color-text-secondary);
  margin-bottom: var(--space-3);
}

.company-form input:not([type="checkbox"]):not([type="radio"]):not([type="hidden"]),
.company-form select,
.company-form textarea,
.filters input:not([type="checkbox"]):not([type="radio"]):not([type="hidden"]),
.filters select,
.filters textarea,
.filters-more input:not([type="checkbox"]):not([type="radio"]):not([type="hidden"]),
.filters-more select,
.payment-form input:not([type="checkbox"]):not([type="radio"]):not([type="hidden"]),
.payment-form select,
.payment-form textarea,
.ksef-panel input:not([type="checkbox"]):not([type="radio"]):not([type="hidden"]),
.ksef-panel select,
.ksef-panel textarea,
.stack input:not([type="checkbox"]):not([type="radio"]):not([type="hidden"]),
.stack select,
.stack textarea {
  width: 100%;
  min-height: 40px;
  height: 40px;
  padding: 0.5rem 0.7rem;
  border: 1px solid var(--color-border-strong);
  border-radius: var(--radius-sm);
  background: var(--color-surface);
  color: var(--color-text);
  font: inherit;
  box-sizing: border-box;
}
.company-form textarea,
.payment-form textarea,
.ksef-panel textarea,
.stack textarea {
  min-height: 6rem;
  height: auto;
  resize: vertical;
}
.ksef-panel input[type="file"] {
  height: auto;
  min-height: 40px;
  padding: 0.4rem;
}

.filters {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
  gap: var(--space-3);
  align-items: end;
  padding: var(--space-4);
  margin: 0 0 var(--space-4);
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-xs);
}
.filters > button,
.filters .btn,
.filters .filter-actions,
.doc-filters .filter-actions .btn {
  align-self: end;
  height: 40px;
  min-height: 40px;
  width: auto;
}
.filters .filter-actions,
.doc-filters .filter-actions {
  display: flex;
  align-items: flex-end;
  gap: var(--space-2);
  grid-column: 1 / -1;
}

/* Filtry dokumentów: pasek + rozwijane „Więcej” */
.doc-filters { margin-bottom: var(--space-4); }
.doc-filters .filter-bar {
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-xs);
  padding: var(--space-3);
}
.doc-filters .select { width: auto; min-width: 10rem; height: 40px; }
.filters-more {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
  gap: var(--space-3);
  align-items: end;
  margin-top: var(--space-3);
  padding: var(--space-4);
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
}
.filters-more[hidden] { display: none !important; }

/* Segmented links (period / direction) */
.segmented a.segmented-link,
.segmented button.segmented-btn {
  border: none;
  background: none;
  padding: 0.4rem 0.85rem;
  border-radius: 7px;
  font-size: var(--fs-sm);
  font-weight: var(--fw-medium);
  color: var(--color-text-secondary);
  cursor: pointer;
  text-decoration: none;
  display: inline-flex;
  align-items: center;
  font-family: inherit;
}
.segmented a.segmented-link[aria-pressed="true"],
.segmented button.segmented-btn[aria-pressed="true"] {
  background: var(--color-surface);
  color: var(--color-accent-hover);
  box-shadow: var(--shadow-xs);
}

.period-year-form { margin-left: auto; }
.period-year-form .select {
  width: auto;
  min-width: 5.5rem;
  height: 36px;
  min-height: 36px;
}
.info-collapse {
  margin: 0 0 var(--space-4);
  font-size: var(--fs-sm);
  color: var(--color-text-secondary);
}
.info-collapse > summary {
  cursor: pointer;
  font-weight: var(--fw-medium);
  color: var(--color-accent-hover);
  list-style: none;
}
.info-collapse > summary::-webkit-details-marker { display: none; }
.info-collapse[open] > summary { margin-bottom: var(--space-2); }
.kpi-info-panel {
  margin: var(--space-3) 0 0;
  font-size: var(--fs-2xs);
  color: var(--color-text-muted);
  line-height: 1.4;
}
.kpi-info-panel[hidden] { display: none !important; }
.amount-strong { font-weight: var(--fw-semibold); }

/* User menu */
.user-menu { position: relative; flex-shrink: 1; min-width: 0; }
.user-menu-btn { max-width: 100%; }
.user-menu-panel {
  position: absolute;
  right: 0;
  top: calc(100% + 6px);
  min-width: 200px;
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-md);
  padding: var(--space-3);
  z-index: var(--z-modal);
}
.user-menu-panel[hidden] { display: none !important; }

/* --- Listy szczegółów / outstanding --- */
dl.details {
  display: grid;
  grid-template-columns: minmax(8rem, 14rem) 1fr;
  gap: 0.55rem 1rem;
  margin: 0 0 var(--space-5);
  padding: var(--space-4);
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-xs);
}
dl.details dt {
  color: var(--color-text-muted);
  font-size: var(--fs-xs);
  font-weight: var(--fw-semibold);
}
dl.details dd { margin: 0; font-size: var(--fs-sm); }
.finance-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: var(--space-4);
  margin: var(--space-4) 0;
}
.finance-card,
.outstanding .finance-card {
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-sm);
  padding: var(--space-4);
}
.finance-card h3 {
  margin: 0 0 var(--space-2);
  font-size: var(--fs-sm);
  color: var(--color-text-secondary);
  font-weight: var(--fw-semibold);
}
.finance-value {
  font-size: var(--fs-xl);
  font-weight: var(--fw-bold);
  font-variant-numeric: tabular-nums;
  letter-spacing: -0.01em;
  margin: 0 0 var(--space-2);
}
.quick-actions { display: flex; flex-wrap: wrap; gap: var(--space-2); margin: var(--space-4) 0; }
.completeness-list { list-style: none; padding: 0; margin: 0; display: grid; gap: var(--space-2); }
.completeness-list li {
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  padding: 0.75rem 1rem;
  font-size: var(--fs-sm);
}
.amount-dot { width: 10px; height: 10px; border-radius: 999px; flex-shrink: 0; background: var(--color-border-strong); display: inline-block; }
.amount-dot-blue { background: var(--tile-blue-fg); }
.amount-dot-purple { background: var(--tile-purple-fg); }
.amount-dot-orange { background: var(--tile-orange-fg); }
.amount-dot-green { background: var(--tile-green-fg); }
.shell-inline { display: flex; align-items: center; gap: 0.75rem; }
.shell-inline-between { display: flex; justify-content: space-between; align-items: center; gap: var(--space-3); margin-bottom: var(--space-4); }
.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}
.year-chart { width: 100%; height: auto; display: block; }
.page-actions { display: flex; flex-wrap: wrap; gap: var(--space-2); }
.ksef-stat-note { display: flex; align-items: flex-start; gap: var(--space-2); font-size: var(--fs-xs); }

/* KSeF: przyciski w siatce formularza nie rozciągają wysokości wiersza */
.ksef-panel .ksef-form-row { align-items: end; }
.ksef-panel .ksef-actions .btn,
.ksef-panel .ksef-link-list .btn {
  height: 40px;
  min-height: 40px;
  align-self: center;
}
.ksef-panel .ksef-card.panel { padding: var(--space-4) var(--space-5); }

.inline-form { display: inline; margin: 0; }
.row.gap-2 { display: flex; flex-wrap: wrap; gap: var(--space-2); align-items: center; }
.document-form-simple {
  max-width: 36rem;
}
.document-form-simple fieldset {
  margin-bottom: var(--space-4);
}
.doc-actions { display: flex; flex-wrap: wrap; align-items: baseline; gap: 0.15rem 0; }
button.link-action {
  display: inline;
  margin: 0;
  padding: 0;
  border: 0;
  background: none;
  color: var(--color-accent-hover);
  font: inherit;
  text-decoration: underline;
  cursor: pointer;
}
button.link-action:hover { color: var(--color-accent); }
.btn-settle {
  color: var(--color-success);
  border-color: var(--color-success-border);
  background: var(--color-success-tint);
  font-weight: var(--fw-semibold);
}
.btn-settle:hover {
  background: #d8f0e2;
  color: var(--color-success);
}

/* --- Dokumenty: szybki filtr 3 miesięcy w nagłówku --- */
.page-header-docs {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
  align-items: center;
  gap: var(--space-4);
}
.page-header-docs > :first-child { min-width: 0; }
.page-header-docs .page-actions {
  justify-self: end;
  align-self: start;
}
.doc-month-nav {
  display: inline-flex;
  align-items: center;
  gap: 2px;
  padding: 4px;
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-pill);
  box-shadow: var(--shadow-xs);
  justify-self: center;
}
.doc-month-nav-months {
  display: flex;
  align-items: center;
  gap: 2px;
}
.doc-month-chip {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 36px;
  padding: 0.35rem 0.95rem;
  border-radius: var(--radius-pill);
  font-size: var(--fs-sm);
  font-weight: var(--fw-medium);
  color: var(--color-text-secondary);
  text-decoration: none;
  white-space: nowrap;
  transition: background 0.15s ease, color 0.15s ease, box-shadow 0.15s ease;
}
.doc-month-chip:hover {
  background: var(--color-surface-hover);
  color: var(--color-text);
}
.doc-month-chip.is-active {
  background: var(--color-accent);
  color: #fff;
  font-weight: var(--fw-semibold);
  box-shadow: var(--shadow-xs);
}
.doc-month-chip.is-active:hover {
  background: var(--color-accent-hover);
  color: #fff;
}
.doc-month-nav-arrow {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 34px;
  height: 34px;
  border-radius: var(--radius-pill);
  color: var(--color-text-muted);
  text-decoration: none;
  flex-shrink: 0;
}
.doc-month-nav-arrow:hover {
  background: var(--color-surface-hover);
  color: var(--color-accent-hover);
}
.doc-month-nav-arrow .icon-sm {
  width: 18px;
  height: 18px;
}

@media (max-width: 1100px) {
  .page-header-docs {
    grid-template-columns: minmax(0, 1fr) auto;
    grid-template-areas:
      "title actions"
      "months months";
  }
  .page-header-docs > :first-child { grid-area: title; }
  .page-header-docs .page-actions { grid-area: actions; }
  .page-header-docs .doc-month-nav {
    grid-area: months;
    justify-self: stretch;
    justify-content: space-between;
  }
  .page-header-docs .doc-month-nav-months { flex: 1; justify-content: center; }
}

@media (max-width: 520px) {
  .doc-month-chip {
    padding: 0.35rem 0.55rem;
    font-size: var(--fs-2xs);
    min-height: 32px;
  }
  .doc-month-nav-arrow { width: 30px; height: 30px; }
}
dl.details.document-summary { margin-bottom: var(--space-4); }
.document-details-collapse.panel {
  padding: var(--space-4) var(--space-5);
  margin: var(--space-4) 0 var(--space-5);
}
.document-details-collapse > summary {
  font-size: var(--fs-base);
  font-weight: var(--fw-semibold);
}
.document-details-collapse[open] > summary { margin-bottom: var(--space-4); }
.document-details-collapse .table-wrap { margin-bottom: var(--space-4); }

/* --- Pozycje faktury (podgląd XML) --- */
.invoice-items-preview { margin: var(--space-3) 0 var(--space-5); max-width: 100%; }
.invoice-items-section { margin-bottom: var(--space-4); max-width: 100%; }
.invoice-items-section .panel-title-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-3);
  flex-wrap: wrap;
  margin-bottom: var(--space-3);
}
.invoice-items-table-wrap {
  max-width: 100%;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}
.invoice-items-name-col { min-width: 12rem; width: 40%; }
.invoice-items-table { min-width: 40rem; }
.invoice-items-table td.invoice-items-name-col {
  white-space: normal;
  word-break: break-word;
  font-weight: var(--fw-medium);
}
.invoice-item-cards { display: none; flex-direction: column; gap: var(--space-3); }
.invoice-item-card {
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  padding: var(--space-3) var(--space-4);
  box-shadow: var(--shadow-xs);
  max-width: 100%;
}
.invoice-item-card-top {
  display: flex;
  justify-content: space-between;
  gap: var(--space-2);
  margin-bottom: var(--space-2);
}
.invoice-item-card-name {
  font-weight: var(--fw-semibold);
  font-size: var(--fs-sm);
  white-space: normal;
  overflow-wrap: anywhere;
  margin-bottom: var(--space-2);
}
.invoice-item-card-meta { font-size: var(--fs-2xs); color: var(--color-text-muted); }
.invoice-item-card-amount {
  margin-top: var(--space-2);
  font-weight: var(--fw-bold);
  font-variant-numeric: tabular-nums;
}
.invoice-items-notes { margin: 0 0 var(--space-4); }
.invoice-items-more { margin-top: var(--space-3); }

@media (max-width: 860px) {
  .invoice-items-table-wrap.responsive-cards { display: none; }
  .invoice-item-cards { display: flex; }
}

/* --- Toast flash (serwerowy, bez JS) --- */
.toast-region .toast {
  display: flex;
  align-items: flex-start;
  gap: var(--space-3);
  padding: 0.75rem 1rem;
  border-radius: var(--radius-md);
  border: 1px solid var(--color-border);
  background: var(--color-surface);
  box-shadow: var(--shadow-sm);
  margin-bottom: var(--space-3);
  font-size: var(--fs-sm);
}
.toast-region .toast-success {
  background: var(--color-success-tint);
  border-color: var(--color-success-border);
  color: var(--color-success);
}
.toast-region .toast-danger {
  background: var(--color-danger-tint);
  border-color: var(--color-danger-border);
  color: var(--color-danger);
}

/* Overflow / mobile tables — szerokie tabele tylko w .table-wrap */
html, body { overflow-x: clip; }
.app-shell,
.app-main-col,
.view-container,
.panel,
.document-details-collapse,
.invoice-items-preview {
  min-width: 0;
  max-width: 100%;
}
.table-wrap {
  max-width: 100%;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}
/* Nadpisanie ui-base (720px): bez sztucznego min-width rozpychającego stronę.
   Tabela rośnie z treścią (max-content) i przewija się w .table-wrap. */
table.data-table { min-width: 0; }
.table-wrap table.data-table {
  width: max(100%, max-content);
  min-width: 0;
}
.table-wrap.responsive-cards table.data-table,
.invoice-items-table-wrap.responsive-cards table.data-table {
  width: 100%;
  min-width: 0;
}
/* W panelu / details bez ujemnych marginesów (nie wychodź poza kartę). */
.panel > .table-wrap,
.document-details-collapse .table-wrap {
  margin-left: 0;
  margin-right: 0;
  border-radius: var(--radius-md);
  border: 1px solid var(--color-border);
}

@media (max-width: 860px) {
  .table-wrap:not(.responsive-cards) {
    margin-left: calc(-1 * var(--space-4));
    margin-right: calc(-1 * var(--space-4));
    border-radius: 0;
    border-left: 0;
    border-right: 0;
  }
  .panel > .table-wrap:not(.responsive-cards),
  .document-details-collapse .table-wrap:not(.responsive-cards) {
    margin-left: 0;
    margin-right: 0;
    border-radius: var(--radius-md);
    border: 1px solid var(--color-border);
  }
  dl.details { grid-template-columns: 1fr; }
  dl.details dt { margin-top: var(--space-2); }
  .filters { grid-template-columns: 1fr; }
  .period-bar { gap: var(--space-2); }
  .period-year-form { margin-left: 0; width: 100%; }
  .period-year-form .select { width: 100%; }
  .doc-filters .filter-bar { flex-direction: column; align-items: stretch; }
  .doc-filters .select { width: 100%; }
  .doc-filters .segmented { width: 100%; display: flex; }
  .doc-filters .segmented .segmented-btn { flex: 1; justify-content: center; }
}