/* Templates.css -- Corporate QA template catalogue (read-only) module styles. */

/* Row actions -- right-aligned, no wrap */
.tpl-row-actions {
    display: flex;
    gap: var(--space-1);
    justify-content: flex-end;
    white-space: nowrap;
}

/* iPhone preview frame */
.tpl-preview-device {
    display: flex;
    justify-content: center;
    padding: var(--space-3) 0;
}

.tpl-preview-phone-frame {
    width: 375px;
    background: var(--bg-device-frame);
    border-radius: 40px;
    padding: 12px;
    box-shadow:
        0 0 0 2px var(--bg-device-bezel),
        var(--shadow-device);
}

.tpl-preview-phone-notch {
    width: 100%;
    height: 28px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.tpl-preview-phone-notch::after {
    content: '';
    width: 80px;
    height: 6px;
    background: var(--bg-device-bezel);
    border-radius: 3px;
}

.tpl-preview-phone-screen {
    width: 100%;
    height: 600px;
    border-radius: var(--border-radius-sm);
    overflow-y: auto;
    background: var(--bg-device-screen);
}

.tpl-preview-phone-screen #tpl-preview-body {
    padding: 12px;
}

/* QA context block in the iPhone preview -- scoped to the device screen so
   styles cannot leak into the catalogue panel or the rest of the app. The
   visual treatment mirrors the staff-app .qa-context block. */
.tpl-preview-phone-screen .qa-context {
    padding: var(--space-3) var(--space-3);
    background: var(--bg-surface);
    border-bottom: var(--border-width-1) solid var(--border-subtle);
    display: flex;
    flex-direction: column;
    gap: var(--space-2);
}

.tpl-preview-phone-screen .qa-context-title {
    font-size: var(--text-sm);
    font-weight: var(--font-weight-bold);
    color: var(--text-primary);
    line-height: 1.3;
}

.tpl-preview-phone-screen .qa-context-meta {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-1);
}

.tpl-preview-phone-screen .qa-context-badge {
    display: inline-flex;
    align-items: center;
    padding: 2px var(--space-2);
    border-radius: var(--border-radius-sm);
    font-size: var(--text-xs);
    font-weight: var(--font-weight-semibold);
    line-height: 1.4;
    background: var(--border-subtle);
    color: var(--text-primary);
}

.tpl-preview-phone-screen .qa-context-badge-iso {
    background: var(--color-info-light);
    color: var(--color-info);
}

.tpl-preview-phone-screen .qa-context-badge-freq {
    background: var(--color-warning-light);
    color: var(--color-warning);
}

.tpl-preview-phone-screen .qa-context-badge-category {
    background: var(--bg-muted);
    color: var(--text-secondary);
}

.tpl-preview-phone-screen .qa-context-description {
    font-size: var(--text-sm);
    color: var(--text-primary);
    line-height: 1.4;
}

.tpl-preview-phone-screen .qa-context-corrective {
    font-size: var(--text-xs);
    color: var(--text-secondary);
}

.tpl-preview-phone-screen .qa-context-corrective summary {
    cursor: pointer;
    min-height: 44px;
    display: flex;
    align-items: center;
    font-weight: var(--font-weight-semibold);
    text-transform: uppercase;
    letter-spacing: 0.03em;
    list-style: none;
}

.tpl-preview-phone-screen .qa-context-corrective summary::-webkit-details-marker {
    display: none;
}

.tpl-preview-phone-screen .qa-context-corrective summary::before {
    content: '> ';
    display: inline-block;
    margin-right: var(--space-1);
}

.tpl-preview-phone-screen .qa-context-corrective[open] summary::before {
    content: 'v ';
}

.tpl-preview-phone-screen .qa-context-corrective-body {
    padding: var(--space-1) 0 var(--space-2);
    line-height: 1.4;
    color: var(--text-primary);
}

.tpl-preview-phone-nav-bar {
    width: 100%;
    height: 20px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.tpl-preview-phone-nav-bar::after {
    content: '';
    width: 100px;
    height: 4px;
    background: var(--bg-device-nav);
    border-radius: 2px;
}