/* ═══════════════════════════════════════════════════════════════════════════════
   Színházi Próbatábla V2 — Global Component Primitives
   Prefix: sznpb-v2-
   Reusable classes for all common patterns.
   ═══════════════════════════════════════════════════════════════════════════════ */

/* ── Buttons ── */
.sznpb-v2-btn { display: inline-flex; align-items: center; gap: var(--space-2); font-family: var(--font-ui); font-weight: 700; font-size: .8125rem; letter-spacing: .03em; padding: var(--space-2) var(--space-6); border-radius: 0; cursor: pointer; transition: filter var(--duration-fast); min-height: var(--control-min-height); }
.sznpb-v2-btn--primary { background: var(--color-brand-teal); color: var(--color-white); }
.sznpb-v2-btn--primary:hover { filter: brightness(.88); }
.sznpb-v2-btn--secondary { background: var(--surface-panel); color: var(--color-black); border: 1px solid var(--border-default); }
.sznpb-v2-btn--secondary:hover { background: var(--surface-selected); }
.sznpb-v2-btn--danger { background: var(--color-danger); color: var(--color-white); }
.sznpb-v2-btn--icon { width: var(--control-min-height); height: var(--control-min-height); padding: 0; justify-content: center; background: transparent; color: var(--color-muted); }
.sznpb-v2-btn--icon:hover { background: var(--surface-selected); color: var(--color-brand-teal); }
.sznpb-v2-btn--ghost { background: transparent; color: var(--color-brand-teal); }
.sznpb-v2-btn--ghost:hover { background: var(--surface-selected); }
.sznpb-v2-btn--yellow { background: var(--color-brand-yellow); color: var(--color-black); min-height: var(--control-min-height-lg); }
.sznpb-v2-btn--yellow:hover { filter: brightness(.92); }
.sznpb-v2-btn--brand { background: var(--color-brand-yellow); color: var(--color-black); }
.sznpb-v2-btn--brand:hover { filter: brightness(.94); }
.sznpb-v2-btn:disabled, .sznpb-v2-btn[disabled] { opacity: .5; cursor: not-allowed; filter: none; }

/* ── Forms ── */
.sznpb-v2-input, .sznpb-v2-select, .sznpb-v2-textarea { font-family: var(--font-ui); font-size: var(--text-body); padding: var(--space-2) var(--space-3); border: 1px solid var(--border-default); border-radius: 0; background: var(--color-white); color: var(--color-black); min-height: var(--control-min-height); transition: border-color var(--duration-fast); }
.sznpb-v2-input:focus, .sznpb-v2-select:focus, .sznpb-v2-textarea:focus { border-color: var(--color-focus); outline: 2px solid var(--color-focus); outline-offset: -1px; }
.sznpb-v2-input[disabled], .sznpb-v2-select[disabled] { background: var(--surface-app); color: var(--color-disabled); }
.sznpb-v2-field { display: flex; flex-direction: column; gap: var(--space-1); }
.sznpb-v2-field-label { font-family: var(--font-ui); font-weight: 500; font-size: var(--text-small); color: var(--color-muted); }
.sznpb-v2-field-error { font-family: var(--font-ui); font-size: var(--text-caption); color: var(--color-danger); }

/* ── Cards ── */
.sznpb-v2-card { background: var(--surface-panel); border-radius: 0; border: 1px solid var(--border-light); box-shadow: var(--shadow-xs); overflow: hidden; }
.sznpb-v2-card--raised { box-shadow: var(--shadow-md); }
.sznpb-v2-card--selected { border-color: var(--color-brand-teal); box-shadow: 0 0 0 2px rgba(0,118,130,.15); }
.sznpb-v2-card-header { padding: var(--space-4) var(--space-6); border-bottom: 1px solid var(--border-light); }
.sznpb-v2-card-body { padding: var(--space-4); }
.sznpb-v2-card-footer { padding: var(--space-4) var(--space-6); border-top: 1px solid var(--border-light); }

/* ── Badges ── */
.sznpb-v2-badge { display: inline-flex; align-items: center; font-family: var(--font-ui); font-weight: 700; font-size: var(--text-caption); letter-spacing: .06em; padding: 1px 6px; border-radius: 0; }
.sznpb-v2-badge--category { /* Category badge — colors set via data-category */ }
.sznpb-v2-badge--active { background: var(--color-brand-yellow); color: var(--color-black); }
.sznpb-v2-badge--modified { background: #FFF0F0; color: var(--color-modified); border: 1px solid #F5C6C6; }
.sznpb-v2-badge--file { font-family: var(--font-mono); text-transform: uppercase; letter-spacing: .04em; background: var(--surface-app); border: 1px solid var(--border-default); }

/* ── Media 3:2 ── */
.sznpb-v2-media-3x2 { width: 100%; aspect-ratio: 3 / 2; overflow: hidden; position: relative; }
.sznpb-v2-media-3x2 > img { width: 100%; height: 100%; display: block; object-fit: cover; object-position: center; }

/* ── Tables ── */
.sznpb-v2-table { width: 100%; border-collapse: collapse; font-family: var(--font-ui); font-size: var(--text-body); }
.sznpb-v2-table th { text-align: left; font-weight: 500; font-size: var(--text-caption); text-transform: uppercase; letter-spacing: .08em; color: var(--color-muted); padding: var(--space-3); border-bottom: 1px solid var(--border-default); }
.sznpb-v2-table td { padding: var(--space-3); border-bottom: 1px solid var(--border-light); }
.sznpb-v2-table tr:hover td { background: var(--surface-selected); }

/* ── Panels ── */
.sznpb-v2-panel { background: var(--surface-panel); border-radius: 0; border: 1px solid var(--border-light); box-shadow: var(--shadow-xs); overflow: hidden; display: flex; flex-direction: column; }
.sznpb-v2-panel-header { padding: var(--space-3) var(--space-6); border-bottom: 1px solid var(--border-light); display: flex; align-items: center; justify-content: space-between; }
.sznpb-v2-panel-body { padding: var(--space-3); flex: 1; overflow-y: auto; min-height: 0; }

/* ── Navigation ── */
.sznpb-v2-nav-item { display: flex; align-items: center; gap: var(--space-3); padding: var(--space-2) var(--space-3); border-radius: 0; font-family: var(--font-ui); font-weight: 500; font-size: .8125rem; color: rgba(255,255,255,.55); transition: all var(--duration-fast); min-height: var(--control-min-height); cursor: pointer; }
.sznpb-v2-nav-item:hover { color: rgba(255,255,255,.85); background: rgba(255,255,255,.04); }
.sznpb-v2-nav-item--active { background: var(--surface-active-row); color: var(--surface-active-row-text); font-weight: 700; }
.sznpb-v2-nav-item--active * { color: var(--surface-active-row-text); }

/* ── Tabs ── */
.sznpb-v2-tabs { display: flex; border-bottom: 1px solid var(--border-light); }
.sznpb-v2-tab { flex: 1; font-family: var(--font-ui); font-weight: 500; font-size: var(--text-small); text-transform: uppercase; letter-spacing: .06em; padding: var(--space-3) var(--space-2); text-align: center; color: var(--color-muted); border-bottom: 2px solid transparent; cursor: pointer; transition: all var(--duration-fast); white-space: nowrap; }
.sznpb-v2-tab:hover { color: var(--color-black); }
.sznpb-v2-tab--active { color: var(--color-brand-teal); border-bottom-color: var(--color-brand-teal); font-weight: 700; }

/* ── Empty / Loading / Error states ── */
.sznpb-v2-empty { display: flex; flex-direction: column; align-items: center; justify-content: center; padding: var(--space-12); gap: var(--space-2); color: var(--color-muted-light); text-align: center; }
.sznpb-v2-loading { display: flex; align-items: center; justify-content: center; padding: var(--space-12); }
.sznpb-v2-error { display: flex; flex-direction: column; align-items: center; justify-content: center; padding: var(--space-12); gap: var(--space-2); color: var(--color-danger); }

/* ── Modals / Overlays ── */
.sznpb-v2-overlay { position: fixed; inset: 0; background: rgba(0,0,0,.55); z-index: 350; display: flex; align-items: center; justify-content: center; }
.sznpb-v2-modal { background: var(--color-white); border-radius: 0; box-shadow: var(--shadow-modal); overflow: hidden; width: min(90vw, 900px); max-height: 90vh; display: flex; flex-direction: column; }
.sznpb-v2-modal-header { display: flex; align-items: center; justify-content: space-between; padding: var(--space-4) var(--space-6); background: var(--color-shell-dark); color: var(--color-white); }
.sznpb-v2-modal-body { padding: var(--space-8); flex: 1; overflow-y: auto; }
.sznpb-v2-modal-footer { padding: var(--space-4) var(--space-6); border-top: 1px solid var(--border-light); }

/* ── Status indicators ── */
.sznpb-v2-status--today { background: #fef0cc; color: var(--color-black); border: 1px solid #fde9a0; }
.sznpb-v2-status--modified { background: #FFF0F0; color: var(--color-modified); border: 1px solid #F5C6C6; }

/* ── Category code badge (content area) ── */
.sznpb-v2-category-code { display: inline-flex; align-items: center; justify-content: center; font-family: var(--font-ui); font-weight: 700; font-size: var(--text-caption); letter-spacing: .06em; padding: 2px 7px; border-radius: 0; line-height: 1.3; min-width: 32px; }
.sznpb-v2-category-code[data-category="napi"] { background: var(--category-napi); color: var(--category-napi-text); border: 1.5px solid rgba(0,0,0,.20); }
.sznpb-v2-category-code[data-category="heti"] { background: var(--category-heti); color: var(--category-heti-text); }
.sznpb-v2-category-code[data-category="havi"] { background: var(--category-havi); color: var(--category-havi-text); }
.sznpb-v2-category-code[data-category="havi_szereposztas"] { background: var(--category-havi-szereposztas); color: var(--category-havi-szereposztas-text); }
.sznpb-v2-category-code[data-category="szereposztas"] { background: var(--category-szereposztas); color: var(--category-szereposztas-text); }
.sznpb-v2-category-code[data-category="igazgatoi"] { background: var(--category-igazgatoi); color: var(--category-igazgatoi-text); }
.sznpb-v2-category-code[data-category="egyeb"] { background: var(--category-egyeb); color: var(--category-egyeb-text); }

/* ── Phase 4: Batch Card ───────────────────────────────── */

.sznpb-v2-batch-card {
  background: #fff;
  border-radius: 0;
  padding: var(--spacing-md);
  cursor: pointer;
  transition: transform .15s, box-shadow .15s;
  border: 1px solid #FDC400;
}
.sznpb-v2-batch-card:hover {
  transform: translateY(-1px);
  box-shadow: var(--shadow-sm);
}
.sznpb-v2-batch-card-header {
  display: flex;
  gap: var(--spacing-sm);
  align-items: center;
  margin-bottom: var(--spacing-sm);
}
.sznpb-v2-batch-card-thumb {
  position: relative;
  width: 48px;
  height: 48px;
  border-radius: 0;
  overflow: hidden;
  flex-shrink: 0;
}
.sznpb-v2-batch-card-thumb img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.sznpb-v2-batch-card-code {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  font-size: 10px;
  font-weight: 700;
  text-align: center;
  padding: 1px 0;
  background: rgba(0,0,0,.55);
  color: #fff;
  letter-spacing: .5px;
}
.sznpb-v2-batch-card-meta {
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.sznpb-v2-batch-card-label {
  font-size: 13px;
  color: var(--text-muted);
}
.sznpb-v2-batch-card-count {
  font-size: 14px;
  font-weight: 600;
  color: var(--text-primary);
}
.sznpb-v2-batch-card-range {
  font-size: 13px;
  color: var(--text-secondary);
  margin-bottom: var(--spacing-sm);
  padding: 2px 0;
  border-top: 1px solid var(--border-light);
  border-bottom: 1px solid var(--border-light);
}
.sznpb-v2-batch-card-list {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.sznpb-v2-batch-card-item {
  display: flex;
  align-items: center;
  gap: var(--spacing-xs);
  font-size: 13px;
  color: var(--text-primary);
  padding: 3px 0;
  flex-wrap: wrap;
}
.sznpb-v2-batch-card-item .sznpb-v2-modified-badge {
  font-size: 10px;
  padding: 0 4px;
}
.sznpb-v2-batch-card-dl {
  font-size: 11px;
  color: var(--color-primary, #21759b);
  text-decoration: none;
  margin-left: auto;
  padding: 2px 6px;
  border: 1px solid var(--color-primary, #21759b);
  border-radius: 0;
  flex-shrink: 0;
}
.sznpb-v2-batch-card-dl:hover {
  background: var(--color-primary, #21759b);
  color: #fff;
}

@media (max-width: 480px) {
  .sznpb-v2-batch-card-item {
    flex-direction: column;
    align-items: flex-start;
  }
  .sznpb-v2-batch-card-dl {
    margin-left: 0;
    margin-top: 4px;
  }
}

/* ── Phase 5: Calendar Grid Lines ─────────────────── */

.sznpb-v2-cal-grid-wrap {
  position: relative;
}

.sznpb-v2-cal-column-lines {
  position: absolute;
  top: 0; left: var(--sznpb-cal-week-col, 34px); right: 0; bottom: 0;
  display: grid;
  grid-template-columns: repeat(7, minmax(0, 1fr));
  pointer-events: none;
  z-index: 3;
}
.sznpb-v2-cal-column-lines span {
  border-right: 1px solid rgba(0, 0, 0, 0.10);
}
.sznpb-v2-cal-column-lines span:last-child {
  border-right: none;
}

/* Overflow button */
.sznpb-v2-cal-overflow-btn {
  font-size: 9px;
  line-height: 1;
  padding: 1px 3px;
  background: #e2e8f0;
  border: 1px solid #cbd5e1;
  border-radius: 0;
  color: #334155;
  cursor: pointer;
  margin-top: 1px;
  z-index: 3;
  position: relative;
  max-width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.sznpb-v2-cal-overflow-btn:hover { background: #cbd5e1; }

.sznpb-v2-cal-overflow-panel {
  position: absolute;
  left: 0; right: 0;
  top: 100%;
  background: #fff;
  border: 1px solid #e2e8f0;
  border-radius: 0;
  box-shadow: 0 4px 12px rgba(0,0,0,.1);
  z-index: 50;
  min-width: 200px;
  padding: 4px;
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.sznpb-v2-cal-overflow-item {
  display: flex;
  align-items: center;
  gap: 4px;
  padding: 4px 6px;
  border: none;
  background: none;
  cursor: pointer;
  font-size: 12px;
  text-align: left;
  border-radius: 0;
  width: 100%;
}
.sznpb-v2-cal-overflow-item:hover { background: #f1f5f9; }
.sznpb-v2-overflow-title { flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

@media (max-width: 480px) {
  .sznpb-v2-cal-segment {
    height: 4px;
    border-radius: 0;
  }
  .sznpb-v2-cal-seg-single { border-radius: 0; }
  .sznpb-v2-cal-seg-start { border-radius: 0; }
  .sznpb-v2-cal-seg-end { border-radius: 0; }
  .sznpb-v2-cal-overflow-panel { min-width: 160px; }
}

/* ── Phase 6: Dashboard CTA ────────────────────────── */

.sznpb-v2-dashboard-cta {
  text-align: center;
  margin: var(--spacing-md) 0;
}
.sznpb-v2-cta-icon {
  font-size: 20px;
  line-height: 1;
  margin-right: 4px;
}