/* Incident Response Playbook — toolkit-specific styles
   Shared styles (card-header-flex, checklists-grid, step-item, tabs, etc.)
   live in ../../../shared/css/toolkit-base.css */

/* Breadcrumb strip */
.breadcrumb-strip {
    border-bottom: 1px solid var(--cc-gray-200);
    background: rgba(255, 255, 255, 0.95);
    backdrop-filter: blur(4px);
}
.breadcrumb-inner {
    max-width: 80rem;
    margin: 0 auto;
    padding: 0.5rem var(--cc-spacing-lg);
    display: flex;
    align-items: center;
    gap: 0.375rem;
    font-size: 0.8125rem;
    color: var(--cc-gray-500);
}
.breadcrumb-link {
    color: var(--cc-gray-500);
    text-decoration: none;
    transition: color 0.15s;
}
.breadcrumb-link:hover { color: var(--cc-primary); }
.breadcrumb-sep { color: var(--cc-gray-400); }
.breadcrumb-current {
    color: var(--cc-primary);
    font-weight: 500;
}
.dark-mode .breadcrumb-strip,
.dark .breadcrumb-strip {
    background: rgba(31, 41, 55, 0.95);
    border-bottom-color: var(--cc-gray-200);
}

/* Playbook-specific checklist cards */
.checklist-card {
    cursor: pointer;
    padding: var(--cc-spacing-md);
    border-radius: var(--cc-radius-md);
    border-left: 4px solid var(--cc-primary);
    background: var(--cc-gray-50);
    transition: background 0.2s, transform 0.2s;
}

.checklist-card:hover {
    background: var(--cc-gray-100);
    transform: translateY(-1px);
}

.checklist-card.critical { border-left-color: var(--cc-error); }
.checklist-card.high     { border-left-color: var(--cc-warning); }
.checklist-card.medium   { border-left-color: var(--cc-info); }

/* Playbook step override: checkbox-aligned layout */
.step-item {
    display: flex;
    align-items: flex-start;
    gap: 0.75rem;
    padding: 0.75rem;
    margin-bottom: 0.5rem;
    border-radius: var(--cc-radius-md);
    background: var(--cc-gray-50);
    transition: background 0.2s;
}

.step-item:hover { background: var(--cc-gray-100); }

.step-item.completed { opacity: 0.7; }
.step-item.completed .step-text { text-decoration: line-through; }

.step-checkbox {
    margin-top: 0.25rem;
    cursor: pointer;
    flex-shrink: 0;
}

/* Tab icons */
.tab svg {
    vertical-align: middle;
    margin-right: 0.375rem;
}

/* Dark mode */
.dark-mode .checklist-card {
    background: var(--cc-gray-100);
}

.dark-mode .checklist-card:hover {
    background: var(--cc-gray-200);
}

.dark-mode .step-item {
    background: var(--cc-gray-100);
}

.dark-mode .step-item:hover {
    background: var(--cc-gray-200);
}