/* ── CardForge dark theme tokens ──────────────────────────────────────────── */
:root {
  --cf-bg:          #0f0f0f;
  --cf-surface:     #1a1a1a;
  --cf-border:      #2a2a2a;
  --cf-text:        #e0e0e0;
  --cf-muted:       #888;
  --cf-subtle:      #555;

  --cf-green-bg:    #14532d;
  --cf-green-text:  #4ade80;
  --cf-green-border:#22c55e;

  --cf-blue-bg:     #1e3a5f;
  --cf-blue-text:   #60a5fa;
  --cf-blue-border: #3b82f6;

  --cf-red-bg:      #7f1d1d;
  --cf-red-text:    #f87171;
  --cf-red-border:  #ef4444;

  --cf-yellow-bg:   #3f2200;
  --cf-yellow-text: #fbbf24;
  --cf-yellow-border: #d97706;

  --cf-purple-bg:   #2e1065;
  --cf-purple-text: #c084fc;
  --cf-purple-border:#9333ea;

  --cf-gray-bg:     #1a1a1a;
  --cf-gray-text:   #7d7d7d;
  --cf-gray-border: #3a3a3a;
}

/* ── Badge classes ───────────────────────────────────────────────────────── */
.badge-green  { background: var(--cf-green-bg);  color: var(--cf-green-text);  border: 1px solid var(--cf-green-border); }
.badge-blue   { background: var(--cf-blue-bg);   color: var(--cf-blue-text);   border: 1px solid var(--cf-blue-border); }
.badge-red    { background: var(--cf-red-bg);    color: var(--cf-red-text);    border: 1px solid var(--cf-red-border); }
.badge-yellow { background: var(--cf-yellow-bg); color: var(--cf-yellow-text); border: 1px solid var(--cf-yellow-border); }
.badge-purple { background: var(--cf-purple-bg); color: var(--cf-purple-text); border: 1px solid var(--cf-purple-border); }
.badge-gray   { background: var(--cf-gray-bg);   color: var(--cf-gray-text);   border: 1px solid var(--cf-gray-border); }

.badge-green, .badge-blue, .badge-red, .badge-yellow, .badge-purple, .badge-gray {
  display: inline-flex;
  align-items: center;
  font-size: 10px;
  font-weight: 700;
  padding: 2px 8px;
  border-radius: 3px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  white-space: nowrap;
}

/* ── Card panel ──────────────────────────────────────────────────────────── */
.card-panel {
  background:    var(--cf-surface);
  border:        1px solid var(--cf-border);
  border-radius: 6px;
  margin-bottom: 12px;
  overflow:      hidden;
  transition:    box-shadow 0.2s;
}

.card-panel:hover {
  box-shadow: 0 0 0 1px #333;
}

.card-panel.is-dragging {
  box-shadow: 0 8px 32px rgba(0,0,0,0.6);
}

/* Panel toggle transition via max-height (JS sets the value) */
.panel-content {
  overflow:   hidden;
  transition: max-height 0.3s ease;
}

/* Resize handle drag bar */
.panel-resize-bar {
  height:    8px;
  background: #111;
  cursor:    ns-resize;
  position:  relative;
}

.panel-resize-bar::after {
  content:          '';
  position:         absolute;
  top:              3px;
  left:             50%;
  transform:        translateX(-50%);
  width:            32px;
  height:            2px;
  background:       #333;
  border-radius:    1px;
}

/* ── Step types ──────────────────────────────────────────────────────────── */

/* Checklist: checked state dims the label */
.step-checklist.is-checked label {
  color:           var(--cf-muted);
  text-decoration: line-through;
}

/* Decision buttons – active state via inline styles from Stimulus */
.step-decision button:focus { outline: none; }

/* Note textarea focus glow */
.step-note textarea:focus {
  outline:       none;
  border-color:  #3b82f6;
  box-shadow:    0 0 0 2px rgba(59,130,246,0.2);
}

/* Info callout left-accent */
.step-info .callout {
  border-left:   3px solid var(--cf-blue-border);
  padding:       10px 14px;
  background:    #111;
  border-radius: 0 4px 4px 0;
}

/* ── Saved indicator (note step) ────────────────────────────────────────── */
@keyframes cf-fade-out {
  0%   { opacity: 1; }
  70%  { opacity: 1; }
  100% { opacity: 0; }
}

.step-saved-indicator {
  animation: cf-fade-out 1.8s forwards;
}

/* ── Progress bar animation ─────────────────────────────────────────────── */
.cf-progress-fill {
  transition: width 0.3s ease;
}

/* ── "Karty Operacyjne" portal card grid ─────────────────────────────────── */
.cf-card-grid {
  display:               grid;
  grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
  gap:                   16px;
}

.cf-card-tile {
  background:    var(--cf-surface);
  border:        1px solid var(--cf-border);
  border-radius: 8px;
  padding:       20px;
  transition:    border-color 0.2s, box-shadow 0.2s;
  cursor:        pointer;
  text-decoration: none;
  display:       block;
  color:         var(--cf-text);
}

.cf-card-tile:hover {
  border-color: #444;
  box-shadow:   0 4px 16px rgba(0,0,0,0.4);
}