/* ==========================================================================
   POWER KSEF — Power Apps Modern Controls theme (1:1)
   Font: Segoe UI Variable / Segoe UI (Microsoft system)
   Palette: PowerB2B (#417ce2) + Fluent-style greys
   ========================================================================== */

:root {
  /* Kolory jak na screenach Power Apps */
  --ksef-blue:       #417ce2;          /* PowerB2B primary (przyciski Save, taby aktywne) */
  --ksef-blue-dark:  #2c5fc0;          /* hover przycisków */
  --ksef-blue-bg:    #eff6ff;          /* bardzo jasny tint do hover w tabeli */
  --ksef-blue-soft:  #dbeafe;

  --ksef-ink:        #242424;          /* Fluent neutral-foreground-1 */
  --ksef-text:       #424242;          /* neutral-foreground-2 */
  --ksef-muted:      #616161;          /* neutral-foreground-3 */
  --ksef-muted-2:    #8a8886;          /* placeholder color */

  --ksef-bg:         #f5f5f5;          /* body background (jasny szary jak Power Apps) */
  --ksef-card:       #ffffff;
  --ksef-line:       #d1d1d1;          /* standardowa kreska Power Apps */
  --ksef-line-soft:  #edebe9;

  /* Power Apps Modern — border radius */
  --radius-input:    4px;
  --radius-card:     8px;

  /* Wsteczne aliasy używane w screenach */
  --radius:          8px;                       /* = --radius-card */
  --radius-sm:       4px;                       /* = --radius-input */
  --shadow-md:       0 2px 8px rgba(0,0,0,0.08);
  --shadow-sm:       0 1px 2px rgba(0,0,0,0.05);

  /* Font — Windows 11 system stack */
  --font-sans: 'Segoe UI Variable', 'Segoe UI', 'Inter', -apple-system, BlinkMacSystemFont, system-ui, sans-serif;
}

* { box-sizing: border-box; }

html, body {
  margin: 0;
  padding: 0;
  height: 100%;
  overflow: hidden;
}

body {
  font-family: var(--font-sans);
  background: var(--ksef-bg);
  color: var(--ksef-ink);
  /* Font skaluje się proporcjonalnie do szerokości viewportu.
     Bazowe 14px przy 1366px, rośnie do 18px przy 4K. */
  font-size: clamp(13px, calc(14px + (100vw - 1366px) * 0.003), 18px);
  line-height: 1.4;
  -webkit-font-smoothing: antialiased;
}

/* ── LAYOUT WRAPPER ────────────────────────────────────────────── */
.ksef-app {
  width: 100%;
  height: 100vh;
  display: flex;
  flex-direction: column;
  background: var(--ksef-card);
}

/* ── TOPBAR z logo + wersja (jak w Power Apps) ─────────────────── */
.ksef-topbar {
  height: 64px;
  padding: 0 24px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  border-bottom: 1px solid var(--ksef-line);
  flex: 0 0 auto;
  background: var(--ksef-card);
}

.ksef-topbar-logo {
  display: flex;
  align-items: center;
}

.ksef-topbar-logo img {
  height: 30px;
  width: auto;
}

.ksef-topbar-version {
  font-family: var(--font-sans);
  font-size: 11px;
  font-weight: 600;
  color: var(--ksef-blue);
  background: var(--ksef-blue-soft);
  padding: 3px 9px;
  border-radius: 4px;
}

/* ── SCREEN ────────────────────────────────────────────────────── */
.ksef-screen {
  flex: 1;
  overflow: auto;
  padding: 24px 32px 32px;
}

.ksef-screen-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 20px;
  flex-wrap: wrap;
  gap: 12px;
}

.ksef-screen-title {
  font-size: 24px;
  font-weight: 600;
  letter-spacing: -0.01em;
  color: var(--ksef-ink);
  margin: 0;
}

.ksef-screen-actions {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
}

/* ── PRZYCISKI (Modern Controls Button) ────────────────────────── */
.ksef-btn {
  height: 36px;
  padding: 0 16px;
  border-radius: var(--radius-input);
  font-family: var(--font-sans);
  font-size: 14px;
  font-weight: 600;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  cursor: pointer;
  transition: all 0.1s ease;
  border: 1px solid var(--ksef-line);
  background: var(--ksef-card);
  color: var(--ksef-ink);
  white-space: nowrap;
  line-height: 1;
}

.ksef-btn:hover {
  background: #f5f5f5;
  border-color: #b3b3b3;
}

.ksef-btn:active {
  background: #ebebeb;
}

.ksef-btn-primary {
  background: var(--ksef-blue);
  color: #fff;
  border-color: var(--ksef-blue);
}
.ksef-btn-primary:hover {
  background: var(--ksef-blue-dark);
  border-color: var(--ksef-blue-dark);
}
.ksef-btn-primary:active {
  background: #1e4ea0;
}

.ksef-btn-icon {
  width: 16px;
  height: 16px;
  stroke: currentColor;
  stroke-width: 1.75;
  fill: none;
  stroke-linecap: round;
  stroke-linejoin: round;
  flex-shrink: 0;
}

/* ── TABELA (Modern DataTable) ────────────────────────────────── */
.ksef-table-wrap {
  background: var(--ksef-card);
  border: 1px solid var(--ksef-line);
  border-radius: var(--radius-card);
  overflow: hidden;
}

.ksef-table {
  width: 100%;
  border-collapse: collapse;
}

.ksef-table thead th {
  text-align: left;
  padding: 14px 20px;
  font-size: 13px;
  font-weight: 600;
  color: var(--ksef-muted);
  background: var(--ksef-card);
  border-bottom: 1px solid var(--ksef-line);
  white-space: nowrap;
}

.ksef-table thead th.center { text-align: center; }
.ksef-table thead th.right  { text-align: right; }

.ksef-table tbody tr {
  border-bottom: 1px solid var(--ksef-line-soft);
  transition: background 0.1s;
  cursor: pointer;
}

.ksef-table tbody tr:hover { background: var(--ksef-blue-bg); }
.ksef-table tbody tr:last-child { border-bottom: none; }

.ksef-table td {
  padding: 16px 20px;
  font-size: 14px;
  color: var(--ksef-ink);
}

.ksef-table td.center  { text-align: center; }
.ksef-table td.right   { text-align: right; font-variant-numeric: tabular-nums; }
.ksef-table td.chevron {
  width: 40px;
  text-align: center;
  color: var(--ksef-muted-2);
  font-size: 18px;
}

.ksef-table td.empty {
  color: var(--ksef-muted-2);
  font-style: italic;
  font-size: 13px;
}

/* ── FILTR PANEL ──────────────────────────────────────────────── */
.ksef-with-filter {
  display: grid;
  grid-template-columns: 1fr 260px;
  gap: 16px;
}

.ksef-filter {
  background: var(--ksef-card);
  border: 1px solid var(--ksef-line);
  border-radius: var(--radius-card);
  padding: 20px;
  align-self: start;
}

.ksef-filter-title {
  font-size: 15px;
  font-weight: 600;
  color: var(--ksef-ink);
  text-align: center;
  margin-bottom: 20px;
  padding-bottom: 14px;
  border-bottom: 1px solid var(--ksef-line);
}

.ksef-filter-field { margin-bottom: 16px; }

.ksef-filter-field-label {
  display: flex;
  align-items: center;
  justify-content: space-between;
  font-size: 13px;
  color: var(--ksef-ink);
  margin-bottom: 6px;
  font-weight: 500;
}

.ksef-filter-field-reset {
  cursor: pointer;
  color: var(--ksef-muted-2);
  font-size: 14px;
  background: none;
  border: none;
  padding: 2px 6px;
  border-radius: 4px;
}
.ksef-filter-field-reset:hover {
  color: var(--ksef-blue);
  background: var(--ksef-blue-soft);
}

/* ── INPUTS (Modern Controls — cienkie, 32-36px) ───────────────── */
.ksef-input,
.ksef-select {
  width: 100%;
  height: 36px;
  padding: 0 12px;
  border: 1px solid var(--ksef-line);
  border-radius: var(--radius-input);
  font-size: 14px;
  color: var(--ksef-ink);
  background: var(--ksef-card);
  font-family: inherit;
  outline: none;
  transition: border-color 0.1s;
}

.ksef-input:hover,
.ksef-select:hover { border-color: #616161; }

.ksef-input:focus,
.ksef-select:focus {
  border-color: var(--ksef-blue);
  border-width: 2px;
  padding: 0 11px; /* kompensacja grubszego borderu */
}

.ksef-input::placeholder { color: var(--ksef-muted-2); }

/* ── MENU KAFELKI ─────────────────────────────────────────────── */
.ksef-menu-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
  margin-top: 12px;
}

.ksef-menu-tile {
  background: var(--ksef-card);
  border: 1px solid var(--ksef-line);
  border-radius: var(--radius-card);
  padding: 80px 32px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 32px;
  cursor: pointer;
  transition: all 0.1s;
  min-height: 420px;
}

.ksef-menu-tile:hover {
  border-color: var(--ksef-blue);
  box-shadow: 0 2px 8px rgba(65, 124, 226, 0.15);
}

.ksef-menu-tile-icon {
  width: 80px;
  height: 80px;
  color: var(--ksef-ink);
}
.ksef-menu-tile-icon svg { width: 100%; height: 100%; stroke-width: 1.5; }

.ksef-menu-tile-label {
  font-size: 18px;
  font-weight: 500;
  color: var(--ksef-ink);
}

/* ── BADGES ───────────────────────────────────────────────────── */
.ksef-badge {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 3px 10px;
  border-radius: 4px;
  font-size: 11.5px;
  font-weight: 500;
}

.ksef-badge-done        { background: #dff6dd; color: #107c10; }
.ksef-badge-todo        { background: #fff4ce; color: #8a4b00; }
.ksef-badge-none        { background: #f3f2f1;  color: var(--ksef-muted); }