/* ═══════════════════════════════════════════════════════════════════════
   STYLE STRON MODUŁÓW — zakładki, paski narzędzi, panele, paginacja.
   Nowa warstwa frontendu KaniewskiMagazyn (Symfony + Twig).
   ═══════════════════════════════════════════════════════════════════════ */

/* ─── ZAKŁADKI ─────────────────────────────────────── */
.tabs {
    display: flex;
    gap: var(--space-1);
    border-bottom: 1px solid var(--ink-200);
    overflow-x: auto;
    scrollbar-width: none;
    margin-bottom: var(--space-6);
}
.tabs::-webkit-scrollbar { display: none; }

.tab {
    position: relative;
    display: inline-flex;
    align-items: center;
    gap: var(--space-2);
    padding: var(--space-3) var(--space-4);
    font-size: 0.875rem;
    font-weight: var(--font-medium);
    color: var(--ink-500);
    background: none;
    border: none;
    border-bottom: 2px solid transparent;
    margin-bottom: -1px;
    cursor: pointer;
    white-space: nowrap;
    transition-property: color, border-color;
    transition-duration: var(--t-fast);
    transition-timing-function: var(--ease-out);
}
.tab .icon { width: 16px; height: 16px; }
.tab:hover { color: var(--ink-900); }
.tab.active {
    color: var(--accent-500);
    border-bottom-color: var(--accent-500);
}

/* ─── PANEL (powierzchnia treści) ───────────────────── */
.panel {
    background: var(--bg-surface);
    border: 1px solid var(--ink-100);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-border);
    overflow: hidden;
    margin-bottom: var(--space-6);
}
.panel-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-3);
    padding: var(--space-4) var(--space-5);
    border-bottom: 1px solid var(--ink-100);
}
.panel-title {
    font-size: var(--text-base);
    font-weight: var(--font-semibold);
    letter-spacing: -0.01em;
}
.panel-subtitle { margin-top: 2px; font-size: var(--text-xs); color: var(--ink-400); }
.panel-body { padding: var(--space-5); }
.panel-body.pad-0 { padding: 0; }

/* ─── PASEK NARZĘDZI (filtry + akcje) ──────────────── */
.toolbar {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-3);
    margin-bottom: var(--space-4);
}
.toolbar-filters {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--space-3);
}
.toolbar-actions { display: flex; gap: var(--space-2); }

.filter-group {
    display: flex;
    align-items: center;
    gap: var(--space-2);
}
.filter-group label {
    font-size: var(--text-sm);
    color: var(--ink-500);
    white-space: nowrap;
}
.filter-group .form-input,
.filter-group .form-control {
    width: auto;
    min-width: 150px;
    min-height: 36px;
}

/* ─── PAGINACJA ────────────────────────────────────── */
.pagination {
    display: flex;
    align-items: center;
    gap: var(--space-1);
    justify-content: space-between;
    padding: var(--space-3) var(--space-5);
    border-top: 1px solid var(--ink-100);
}
.pagination-count { font-size: var(--text-xs); color: var(--ink-400); }
.pagination-pages { display: flex; gap: var(--space-1); }
.page-link {
    min-width: 32px;
    height: 32px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: var(--radius-sm);
    font-size: 0.8125rem;
    color: var(--ink-500);
    text-decoration: none;
}
.page-link:hover { background: var(--bg-surface-2); color: var(--ink-900); }
.page-link.active { background: var(--accent-500); color: #fff; }
.page-link.disabled { color: var(--ink-300); pointer-events: none; }

/* ─── SIATKA FORMULARZA ────────────────────────────── */
.field-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: var(--space-4);
}
.field-grid .span-2 { grid-column: span 2; }

/* ─── AKCJE WIERSZA TABELI ─────────────────────────── */
.table-actions { display: inline-flex; gap: var(--space-1); }
.icon-btn {
    width: 32px;
    height: 32px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: var(--radius-sm);
    border: none;
    background: none;
    color: var(--ink-400);
    cursor: pointer;
    transition-property: background-color, color;
    transition-duration: var(--t-fast);
    transition-timing-function: var(--ease-out);
}
.icon-btn:hover { background: var(--bg-surface-2); color: var(--ink-900); }
.icon-btn .icon { width: 16px; height: 16px; }
.icon-btn.danger:hover { background: var(--danger-100); color: var(--danger-600); }

/* ─── STATUS (kropka + tekst) ──────────────────────── */
.status { display: inline-flex; align-items: center; gap: var(--space-2); font-size: var(--text-sm); }
.status-dot { width: 8px; height: 8px; border-radius: 50%; flex-shrink: 0; }
.status-dot.ok { background: var(--success-500); }
.status-dot.warn { background: var(--warning-500); }
.status-dot.bad { background: var(--danger-500); }
.status-dot.muted { background: var(--ink-300); }

/* ─── SIATKA SKRYTEK (jajomaty) ────────────────────── */
.slot-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(36px, 1fr));
    gap: 6px;
}
.slot {
    height: 36px;
    border-radius: var(--radius-sm);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 11px;
    font-family: var(--font-mono);
    font-variant-numeric: tabular-nums;
}
.slot.free { background: var(--bg-surface-2); color: var(--ink-400); }
.slot.taken { background: var(--accent-100); color: var(--accent-600); font-weight: 500; }
.slot.expiring { background: var(--warning-100); color: var(--warning-600); font-weight: 500; }
.slot-legend {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-4);
    font-size: var(--text-sm);
    color: var(--ink-500);
    margin-top: var(--space-3);
}

/* ─── PODGLĄD ETYKIETY (generatory) ────────────────── */
.label-preview {
    border: 1px dashed var(--ink-300);
    border-radius: var(--radius-md);
    padding: var(--space-5);
    font-family: var(--font-mono);
    font-size: 13px;
    line-height: 1.7;
    color: var(--ink-900);
    background: var(--bg-surface);
}
.label-preview .lp-title {
    font-weight: 600;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    margin-bottom: var(--space-3);
    font-size: 12px;
    color: var(--ink-500);
}

/* ─── RESPONSYWNOŚĆ ────────────────────────────────── */
@media (max-width: 640px) {
    .field-grid { grid-template-columns: 1fr; }
    .field-grid .span-2 { grid-column: span 1; }
    .toolbar { align-items: stretch; flex-direction: column; }
    .toolbar-actions { justify-content: flex-end; }
    .filter-group { align-items: stretch; flex-direction: column; }
    .filter-group .form-input,
    .filter-group .form-control { width: 100%; }
}