/*
  THEME MODERN — Rozliczenia Vistula
  Warstwa wizualna (formularze, przyciski, tabele, panele) nakładana na tokens / ui-base / components / app-bridge.
  Szkielet (sidebar/topbar) → shell.css, pulpit (KPI, wykresy, statusy) → dashboard.css.
  Nie zmienia struktury HTML ani logiki. Aby wrócić do poprzedniego wyglądu,
  wystarczy usunąć link do tego pliku z app/Views/layout.php.
*/

/* ===================== BAZA ===================== */
html { scroll-behavior: smooth; }
body {
  font-family: var(--font-ui);
  font-optical-sizing: auto;
  letter-spacing: -0.003em;
  background:
    radial-gradient(900px 420px at 78% -140px, rgba(109, 74, 238, 0.07), transparent 70%),
    radial-gradient(700px 360px at 0% 0%, rgba(47, 111, 237, 0.045), transparent 70%),
    var(--color-bg);
  background-attachment: fixed;
}
::selection { background: rgba(109, 74, 238, 0.2); }
a { text-decoration-thickness: 1px; text-underline-offset: 3px; }
:focus-visible { box-shadow: var(--shadow-focus); }

.num, .amount, td.num, th.num, .kpi-value, .finance-value, .amount-strong {
  font-variant-numeric: tabular-nums;
  font-feature-settings: "tnum" 1, "cv11" 1;
}

@keyframes page-in {
  from { opacity: 0; transform: translateY(8px); }
  to { opacity: 1; transform: none; }
}
.view-container { animation: page-in 260ms var(--ease-standard) both; }
@media (prefers-reduced-motion: reduce) {
  .view-container { animation: none; }
  html { scroll-behavior: auto; }
}

/* ===================== NAGŁÓWKI STRON ===================== */
.view-container > h1,
.page-header h1 {
  font-size: 1.75rem;
  font-weight: 700;
  letter-spacing: -0.025em;
  line-height: 1.15;
}
.view-container > h1 { margin-bottom: var(--space-1); }
.view-container > h1 + p.muted,
.page-header .lede { font-size: var(--fs-base); color: var(--color-text-secondary); }
.view-container > h1 + p { margin-bottom: var(--space-5); }
.page-header { margin-bottom: var(--space-6); }

.view-container h2 {
  font-size: 1.125rem;
  font-weight: 650;
  letter-spacing: -0.015em;
}
.view-container > section { margin-top: var(--space-8); }
.view-container > section > h2 { margin-bottom: var(--space-2); }
.view-container > section > p.muted { margin-bottom: var(--space-4); font-size: var(--fs-sm); }
.status-note { color: var(--color-text-muted); }

/* ===================== PRZYCISKI ===================== */
a.btn, a.button-link { text-decoration: none; }
.btn,
.button-link, a.button-link {
  border-radius: 11px;
  min-height: 40px;
  font-weight: 550;
  letter-spacing: -0.005em;
  border-color: var(--color-border-strong);
  box-shadow: var(--shadow-xs);
  transition: background var(--dur-fast) var(--ease-standard), border-color var(--dur-fast), box-shadow var(--dur-fast), transform var(--dur-fast) var(--ease-standard);
}
.btn:hover, .button-link:hover {
  background: #fff;
  border-color: #BFC5DB;
  box-shadow: 0 2px 6px rgba(22, 26, 46, 0.08);
}
.btn:active, .button-link:active { transform: translateY(1px); box-shadow: none; }

.btn-primary,
button[type="submit"]:not(.btn):not(.btn-ghost):not(.btn-danger):not(.secondary) {
  background: var(--accent-gradient);
  border-color: transparent;
  color: #fff;
  border-radius: 11px;
  font-weight: 600;
  box-shadow: 0 10px 20px -8px rgba(109, 74, 238, 0.6), inset 0 1px 0 rgba(255, 255, 255, 0.22);
}
.btn-primary:hover,
button[type="submit"]:not(.btn):not(.btn-ghost):not(.btn-danger):not(.secondary):hover {
  background: var(--accent-gradient);
  border-color: transparent;
  filter: brightness(1.06);
  box-shadow: 0 14px 26px -8px rgba(109, 74, 238, 0.68), inset 0 1px 0 rgba(255, 255, 255, 0.22);
}
.btn-primary:active,
button[type="submit"]:not(.btn):not(.btn-ghost):not(.btn-danger):not(.secondary):active {
  transform: translateY(1px);
  filter: brightness(0.97);
  box-shadow: 0 4px 10px -4px rgba(109, 74, 238, 0.6);
}
.btn[disabled], button[disabled] { opacity: 0.55; }
.btn-ghost { box-shadow: none; }
.btn-ghost:hover { background: var(--color-surface-hover); box-shadow: none; border-color: transparent; }
.btn-danger { border-radius: 11px; box-shadow: none; }
.btn-danger:hover { background: #F9DDE1; border-color: #EDAEB8; }
.btn-settle { box-shadow: none; }

.fab { background: var(--accent-gradient); box-shadow: 0 16px 28px -8px rgba(109, 74, 238, 0.6); }

/* ===================== KARTY / PANELE ===================== */
.panel, .finance-card, .outstanding .finance-card,
.register-tab, .stat-tile, .rubryka-box, .status-hero, .doc-card,
dl.details, .filters, .doc-filters .filter-bar, .filters-more, .period-bar,
.completeness-list li {
  border-color: var(--color-border);
}
.panel { border-radius: var(--radius-lg); padding: var(--space-6); box-shadow: var(--shadow-sm); }
.panel-title { font-size: var(--fs-md); font-weight: 650; letter-spacing: -0.015em; }
.panel-subtitle { font-size: var(--fs-sm); margin-top: 3px; }

.finance-card { border-radius: var(--radius-lg); }
.finance-value { font-size: 1.625rem; letter-spacing: -0.025em; }
.widget-row { border-radius: 12px; }
.completeness-list li { border-radius: 12px; padding: 0.8rem 1.1rem; }

/* ===================== OKRES / FILTRY / SEGMENTY ===================== */
.period-bar {
  border-radius: var(--radius-lg);
  padding: var(--space-3) var(--space-4);
  box-shadow: var(--shadow-xs);
  gap: var(--space-4);
}
.period-label { font-weight: 650; letter-spacing: -0.01em; }
.segmented {
  background: var(--color-surface-sunken);
  border: none;
  border-radius: 12px;
  padding: 3px;
}
.segmented a.segmented-link,
.segmented button.segmented-btn,
.segmented button {
  border-radius: 9px;
  padding: 0.42rem 0.95rem;
  font-weight: 550;
  transition: background var(--dur-fast), color var(--dur-fast), box-shadow var(--dur-fast);
}
.segmented a.segmented-link:hover,
.segmented button:hover { color: var(--color-text); }
.segmented a.segmented-link[aria-pressed="true"],
.segmented button.segmented-btn[aria-pressed="true"],
.segmented button[aria-pressed="true"] {
  background: #fff;
  color: var(--color-accent-hover);
  font-weight: 650;
  box-shadow: 0 1px 2px rgba(22, 26, 46, 0.08), 0 2px 6px rgba(22, 26, 46, 0.05);
}
.view-container section > .segmented { margin: 0 0 var(--space-4); }

.doc-filters .filter-bar, .filters, .filters-more {
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-xs);
}
.doc-month-nav { box-shadow: var(--shadow-xs); }
.doc-month-chip { font-weight: 550; }
.doc-month-chip.is-active { background: var(--accent-gradient); box-shadow: 0 6px 14px -6px rgba(109, 74, 238, 0.6); }
.search-box input { padding-left: 2.4rem; }

/* ===================== FORMULARZE ===================== */
.company-form label,
.filters label, .filters-more label, .doc-filters label,
.ksef-panel label, .payment-form label, .stack label,
.field label {
  font-size: var(--fs-sm);
  font-weight: 600;
  color: var(--color-text);
  letter-spacing: -0.005em;
}

.view-container input:not([type="checkbox"]):not([type="radio"]):not([type="hidden"]):not([type="file"]),
.view-container select,
.view-container textarea,
.login-screen input:not([type="checkbox"]):not([type="radio"]):not([type="hidden"]),
.input, .select, .textarea {
  min-height: 44px;
  height: 44px;
  padding: 0.55rem 0.85rem;
  border: 1px solid var(--color-border-strong);
  border-radius: 11px;
  background-color: #fff;
  color: var(--color-text);
  font-size: var(--fs-base);
  box-shadow: 0 1px 1px rgba(22, 26, 46, 0.03) inset;
  transition: border-color var(--dur-fast) var(--ease-standard), box-shadow var(--dur-fast) var(--ease-standard), background-color var(--dur-fast);
}
.view-container textarea, .textarea { height: auto; min-height: 6rem; }
.view-container input:not([type="checkbox"]):not([type="radio"]):not([type="hidden"]):not([type="file"]):hover,
.view-container select:hover, .view-container textarea:hover,
.input:hover, .select:hover, .textarea:hover { border-color: #B8BED6; }
.view-container input:not([type="checkbox"]):not([type="radio"]):not([type="hidden"]):not([type="file"]):focus,
.view-container select:focus, .view-container textarea:focus,
.login-screen input:focus,
.input:focus, .select:focus, .textarea:focus {
  outline: none;
  border-color: var(--color-accent);
  box-shadow: var(--shadow-focus);
  background-color: #fff;
}
.view-container input::placeholder, .input::placeholder { color: #9AA0BA; }
.view-container input:read-only:not([type="hidden"]):not([type="checkbox"]):not([type="radio"]) {
  background-color: var(--color-bg-raised);
  color: var(--color-text-secondary);
}
.view-container select, .select {
  appearance: none;
  -webkit-appearance: none;
  padding-right: 2.4rem;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%236A7090' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 0.8rem center;
  background-size: 16px;
}
.view-container input[type="checkbox"], .view-container input[type="radio"] {
  accent-color: var(--color-accent);
  width: 18px; height: 18px;
}
.field-error, .error-text { font-size: var(--fs-xs); font-weight: 500; margin-top: 0.3rem; }
.view-container input.has-error, .field.has-error .input { border-color: var(--color-danger); }

/* Fieldset jako karta z tytułem w środku */
.company-form fieldset,
.filters fieldset {
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  padding: var(--space-6);
  margin: 0 0 var(--space-5);
  box-shadow: var(--shadow-sm);
  min-width: 0;
}
.company-form > fieldset > legend,
.document-form > fieldset > legend {
  float: left;
  width: 100%;
  padding: 0 0 var(--space-4);
  margin: 0;
  font-size: var(--fs-md);
  font-weight: 650;
  letter-spacing: -0.015em;
  color: var(--color-text);
}
.company-form > fieldset > legend + *,
.document-form > fieldset > legend + * { clear: both; }
.company-form > fieldset::after { content: ""; display: table; clear: both; }

/* Uproszczony formularz dokumentu */
.document-form-simple { max-width: 52rem; }
.form-grid {
  display: grid;
  grid-template-columns: repeat(6, minmax(0, 1fr));
  gap: var(--space-4) var(--space-4);
}
.form-grid > .fld { grid-column: span 6; display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.form-grid > .fld > label { margin: 0; }
.form-grid > .fld.span-4 { grid-column: span 4; }
.form-grid > .fld.span-3 { grid-column: span 3; }
.form-grid > .fld.span-2 { grid-column: span 2; }
.form-grid .field-error { margin: 0; }

.vat-row.form-row {
  display: grid;
  grid-template-columns: minmax(7.5rem, 0.7fr) repeat(3, minmax(0, 1fr));
  gap: var(--space-4);
  align-items: start;
  margin-bottom: 0;
}
.vat-row.form-row > div { min-width: 0; }
.vat-row.form-row label { margin-bottom: 0; gap: 6px; }
.view-container .document-form .vat-row.form-row input[data-role="gross"][type="text"] { background-color: var(--color-accent-tint); border-color: var(--color-accent-tint-strong); font-weight: 600; }
.document-form-simple > .actions, .document-form > p:last-child { margin-top: var(--space-5); }
.document-form-simple button[type="submit"] { min-height: 46px; height: 46px; padding: 0.6rem 1.6rem; font-size: var(--fs-base); }

dl.details { border-radius: var(--radius-lg); padding: var(--space-5) var(--space-6); box-shadow: var(--shadow-sm); }
dl.details dt { font-size: var(--fs-sm); }

/* ===================== ALERTY / BADGE / TOAST ===================== */
.alert {
  border-radius: var(--radius-md);
  padding: 0.85rem 1.1rem;
  border-width: 1px;
  box-shadow: var(--shadow-xs);
}
.badge { font-size: var(--fs-xs); padding: 0.22rem 0.65rem; letter-spacing: 0; }
.toast { border-radius: var(--radius-md); box-shadow: var(--shadow-md); }
.empty-state { border: 1px dashed var(--color-border-strong); border-radius: var(--radius-lg); background: rgba(255, 255, 255, 0.6); }

/* ===================== TABELE ===================== */
.table-wrap {
  border-radius: var(--radius-lg);
  border-color: var(--color-border);
  box-shadow: var(--shadow-sm);
}
.data-table th {
  background: #FAFAFE;
  font-size: 0.6875rem;
  letter-spacing: 0.06em;
  font-weight: 650;
  padding: 0.85rem var(--space-4);
  color: var(--color-text-muted);
  border-bottom: 1px solid var(--color-border);
}
.data-table td {
  padding: 0.9rem var(--space-4);
  border-bottom: 1px solid #F0F1F7;
  font-size: var(--fs-sm);
  color: var(--color-text);
}
.data-table tbody tr { transition: background var(--dur-fast); }
.data-table tbody tr:hover { background: #F8F8FE; }
.data-table td.num, .data-table th.num { text-align: right; }
.data-table tbody th[scope="row"] { font-weight: 600; text-align: left; padding: 0.9rem var(--space-4); border-bottom: 1px solid #F0F1F7; font-size: var(--fs-sm); }
.data-table tr.is-highlight td { background: var(--color-accent-tint); }
.data-table td a { font-weight: 600; text-decoration: none; color: var(--color-accent-hover); }
.data-table td a:hover { text-decoration: underline; }
.data-table tfoot td, .data-table tfoot th { font-weight: 650; background: #FAFAFE; }

.pagination { font-size: var(--fs-sm); color: var(--color-text-secondary); }
.pagination a {
  display: inline-flex; align-items: center;
  margin-left: var(--space-2);
  padding: 0.35rem 0.8rem;
  border: 1px solid var(--color-border-strong);
  border-radius: 10px;
  background: #fff;
  color: var(--color-text);
  font-weight: 550;
  text-decoration: none;
  transition: background var(--dur-fast), border-color var(--dur-fast);
}
.pagination a:hover { background: var(--color-surface-hover); border-color: #BFC5DB; }

/* ===================== LOGOWANIE ===================== */
.login-screen {
  background:
    radial-gradient(700px 480px at 12% 8%, rgba(128, 98, 247, 0.20), transparent 62%),
    radial-gradient(640px 460px at 92% 90%, rgba(47, 111, 237, 0.14), transparent 60%),
    var(--color-bg);
}
.login-card {
  max-width: 420px;
  border-radius: 24px;
  padding: var(--space-10) var(--space-8) var(--space-8);
  box-shadow: var(--shadow-md);
  border-color: rgba(214, 218, 232, 0.7);
}
.login-brand .brand-mark { width: 54px; height: 54px; border-radius: 16px; font-size: var(--fs-lg); }
.login-brand h1 { font-size: 1.5rem; letter-spacing: -0.025em; }
.login-card .btn-primary { min-height: 46px; font-size: var(--fs-base); }

/* ===================== MOBILE ===================== */
@media (max-width: 860px) {
  .view-container { padding: var(--space-5) var(--space-4); padding-bottom: calc(var(--space-16) + var(--space-6)); }
  .view-container > h1, .page-header h1 { font-size: 1.5rem; }
  .panel { padding: var(--space-5); }
  .company-form fieldset { padding: var(--space-5) var(--space-4); }
  .form-grid { grid-template-columns: 1fr; }
  .form-grid > .fld, .form-grid > .fld.span-4, .form-grid > .fld.span-3, .form-grid > .fld.span-2 { grid-column: 1 / -1; }
  .vat-row.form-row { grid-template-columns: 1fr 1fr; }
  .vat-row.form-row > div:first-child,
  .vat-row.form-row > div:last-child { grid-column: 1 / -1; }
  /* 16px zapobiega powiększaniu strony przez iOS po kliknięciu w pole */
  .view-container input, .view-container select, .view-container textarea, .login-screen input { font-size: 16px; }
}