/* ================================
   SAP Readiness Portal
   Apple-Inspired Clean Design
   ================================ */

:root {
    --bg-primary: #ffffff;
    --bg-secondary: #f5f5f7;
    --bg-tertiary: #fbfbfd;
    --bg-card: #ffffff;
    --bg-input: #ffffff;
    --border-subtle: #d2d2d7;
    --border-default: #d2d2d7;
    --border-focus: #0071e3;
    --text-primary: #1d1d1f;
    --text-secondary: #6e6e73;
    --text-muted: #86868b;
    --accent-blue: #0071e3;
    --accent-blue-light: #2997ff;
    --accent-blue-hover: #0077ed;
    --accent-green: #34c759;
    --accent-orange: #ff9500;
    --accent-red: #ff3b30;
    --accent-purple: #af52de;
    --accent-teal: #5ac8fa;
    --gradient-primary: linear-gradient(180deg, #0071e3 0%, #0077ed 100%);
    --font-sans: -apple-system, BlinkMacSystemFont, 'SF Pro Display', 'SF Pro Text', 'Helvetica Neue', Helvetica, Arial, sans-serif;
    --font-mono: 'JetBrains Mono', 'SF Mono', SFMono-Regular, ui-monospace, Menlo, Monaco, monospace;
    --space-xs: 0.25rem;
    --space-sm: 0.5rem;
    --space-md: 1rem;
    --space-lg: 1.5rem;
    --space-xl: 2rem;
    --space-2xl: 3rem;
    --radius-sm: 8px;
    --radius-md: 12px;
    --radius-lg: 18px;
    --radius-xl: 22px;
    --shadow-sm: 0 1px 3px rgba(0,0,0,0.04), 0 1px 2px rgba(0,0,0,0.06);
    --shadow-md: 0 4px 6px rgba(0,0,0,0.04), 0 2px 4px rgba(0,0,0,0.06);
    --shadow-lg: 0 10px 20px rgba(0,0,0,0.04), 0 6px 6px rgba(0,0,0,0.06);
    --shadow-card: 0 2px 8px rgba(0,0,0,0.08);
    --transition-fast: 150ms ease;
    --transition-normal: 250ms cubic-bezier(0.25,0.1,0.25,1);
}

*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { font-size: 16px; scroll-behavior: smooth; -webkit-font-smoothing: antialiased; }
body { font-family: var(--font-sans); background: var(--bg-secondary); color: var(--text-primary); line-height: 1.47; font-weight: 400; letter-spacing: -0.022em; min-height: 100vh; overflow-x: hidden; }

/* ===================================
   PORTAL LAYOUT
   =================================== */

.portal-container { min-height: 100vh; }

.portal-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: var(--space-md) var(--space-xl);
    background: rgba(255,255,255,0.8);
    backdrop-filter: saturate(180%) blur(20px);
    -webkit-backdrop-filter: saturate(180%) blur(20px);
    border-bottom: 1px solid var(--border-subtle);
    position: sticky;
    top: 0;
    z-index: 100;
}

.logo { display: flex; align-items: center; gap: var(--space-md); }
.logo-icon { width: 44px; height: 44px; display: flex; align-items: center; justify-content: center; background: var(--accent-blue); border-radius: var(--radius-md); color: white; }
.logo-icon svg { width: 24px; height: 24px; }
.logo-text h1 { font-size: 21px; font-weight: 600; color: var(--text-primary); letter-spacing: -0.01em; }
.logo-text .subtitle { font-size: 12px; color: var(--text-muted); font-weight: 400; }

.portal-nav { display: flex; background: var(--bg-secondary); border-radius: 9px; padding: 2px; }
.portal-nav-btn {
    display: flex; align-items: center; gap: 6px;
    padding: 7px 16px; font-family: var(--font-sans); font-size: 13px; font-weight: 500;
    background: transparent; border: none; border-radius: 7px;
    color: var(--text-secondary); cursor: pointer; transition: all var(--transition-fast);
}
.portal-nav-btn svg { width: 16px; height: 16px; }
.portal-nav-btn:hover { color: var(--text-primary); }
.portal-nav-btn.active { background: var(--bg-card); color: var(--text-primary); box-shadow: 0 1px 3px rgba(0,0,0,0.1); }

.portal-tab-content { display: none; }
.portal-tab-content.active { display: block; animation: fadeIn 0.3s ease; }

@keyframes fadeIn { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: translateY(0); } }

/* ===================================
   CALCULATOR TAB (existing styles)
   =================================== */

.app-container { min-height: calc(100vh - 60px); }
.main-content { padding: var(--space-xl) var(--space-2xl); max-width: 1100px; margin: 0 auto; }

.input-section, .results-section {
    background: var(--bg-card); border-radius: var(--radius-lg); padding: var(--space-xl); margin-bottom: var(--space-xl); box-shadow: var(--shadow-card);
}

.section-header { display: flex; align-items: center; justify-content: space-between; margin-bottom: var(--space-xl); padding-bottom: var(--space-lg); border-bottom: 1px solid var(--border-subtle); flex-wrap: wrap; gap: var(--space-md); }
.section-header h2 { font-size: 24px; font-weight: 600; }
.section-header-right { display: flex; align-items: center; gap: var(--space-md); }

/* Buttons */
.btn { display: inline-flex; align-items: center; justify-content: center; gap: var(--space-sm); padding: 9px 18px; font-family: var(--font-sans); font-size: 14px; font-weight: 500; border: none; border-radius: 980px; cursor: pointer; transition: all var(--transition-normal); white-space: nowrap; }
.btn svg { width: 16px; height: 16px; }
.btn-primary { background: var(--accent-blue); color: white; }
.btn-primary:hover { background: var(--accent-blue-hover); }
.btn-primary:active { transform: scale(0.98); }
.btn-secondary { background: var(--bg-secondary); color: var(--accent-blue); }
.btn-secondary:hover { background: #e8e8ed; }
.btn-outline { background: transparent; color: var(--accent-blue); }
.btn-outline:hover { background: rgba(0,113,227,0.1); }

/* Tabs */
.input-tabs { display: flex; background: var(--bg-secondary); border-radius: 9px; padding: 2px; }
.tab-btn { padding: 7px 16px; font-family: var(--font-sans); font-size: 13px; font-weight: 500; background: transparent; border: none; border-radius: 7px; color: var(--text-secondary); cursor: pointer; transition: all var(--transition-fast); }
.tab-btn:hover { color: var(--text-primary); }
.tab-btn.active { background: var(--bg-card); color: var(--text-primary); box-shadow: 0 1px 3px rgba(0,0,0,0.1); }
.tab-content { display: none; }
.tab-content.active { display: block; animation: fadeIn 0.3s ease; }

/* Form */
.form-grid { display: grid; gap: var(--space-xl); }
.form-section { background: var(--bg-secondary); border-radius: var(--radius-md); padding: var(--space-lg); }
.form-section h3 { font-size: 17px; font-weight: 600; margin-bottom: var(--space-lg); display: flex; align-items: center; gap: var(--space-sm); }
.form-section h3::before { content: ''; width: 4px; height: 18px; background: var(--accent-blue); border-radius: 2px; }
.form-row { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: var(--space-md); margin-bottom: var(--space-md); }
.form-row:last-child { margin-bottom: 0; }
.form-group { display: flex; flex-direction: column; gap: 6px; }
.form-group.full-width { grid-column: 1 / -1; }
.form-group label { font-size: 12px; font-weight: 600; color: var(--text-secondary); text-transform: uppercase; letter-spacing: 0.02em; }
.form-group input, .form-group select, .form-group textarea {
    padding: 11px 14px; background: var(--bg-input); border: 1px solid var(--border-default); border-radius: var(--radius-sm);
    color: var(--text-primary); font-family: var(--font-sans); font-size: 17px; transition: all var(--transition-fast);
}
.form-group input:focus, .form-group select:focus, .form-group textarea:focus { outline: none; border-color: var(--accent-blue); box-shadow: 0 0 0 4px rgba(0,113,227,0.15); }
.form-group input::placeholder, .form-group textarea::placeholder { color: var(--text-muted); }
.form-group select { cursor: pointer; appearance: none; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Cpath fill='%2386868b' d='M6 8L1 3h10z'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right 14px center; padding-right: 36px; }
.checkbox-group { flex-direction: row; align-items: center; }
.checkbox-group label { display: flex; align-items: center; gap: var(--space-sm); cursor: pointer; text-transform: none; font-weight: 400; font-size: 15px; color: var(--text-primary); }
.checkbox-group input[type="checkbox"] { width: 20px; height: 20px; accent-color: var(--accent-blue); }

/* Line Items */
.line-item { background: var(--bg-card); border-radius: var(--radius-md); padding: var(--space-md); margin-bottom: var(--space-md); border: 1px solid var(--border-subtle); position: relative; }
.line-item .remove-item { position: absolute; top: 8px; right: 8px; width: 24px; height: 24px; background: rgba(255,59,48,0.1); border: none; border-radius: 6px; color: var(--accent-red); cursor: pointer; display: flex; align-items: center; justify-content: center; }
.line-item .remove-item svg { width: 14px; height: 14px; }
.line-item .remove-item:hover { background: rgba(255,59,48,0.2); }
#addLineItem { margin-top: var(--space-md); }
.form-actions { display: flex; justify-content: flex-end; gap: var(--space-md); margin-top: var(--space-xl); padding-top: var(--space-lg); border-top: 1px solid var(--border-subtle); }

/* CSV Upload */
.csv-upload-area { border: 2px dashed var(--border-default); border-radius: var(--radius-lg); padding: var(--space-2xl); text-align: center; cursor: pointer; transition: all var(--transition-normal); background: var(--bg-secondary); }
.csv-upload-area:hover, .csv-upload-area.dragover { border-color: var(--accent-blue); background: rgba(0,113,227,0.04); }
.upload-icon { width: 56px; height: 56px; margin: 0 auto var(--space-lg); display: flex; align-items: center; justify-content: center; background: var(--bg-card); border-radius: 50%; color: var(--accent-blue); box-shadow: var(--shadow-md); }
.upload-icon svg { width: 28px; height: 28px; }
.upload-text { font-size: 19px; font-weight: 600; margin-bottom: var(--space-xs); }
.upload-subtext { font-size: 14px; color: var(--text-muted); }
.csv-preview { margin-top: var(--space-lg); }
.preview-header { display: flex; align-items: center; justify-content: space-between; margin-bottom: var(--space-md); }
.preview-header h3 { font-size: 17px; font-weight: 600; }
.record-count { background: var(--accent-green); color: white; font-size: 12px; font-weight: 600; padding: 5px 14px; border-radius: 20px; }
.preview-table-wrapper { max-height: 300px; overflow: auto; border-radius: var(--radius-md); border: 1px solid var(--border-subtle); }
.preview-table { width: 100%; border-collapse: collapse; font-size: 14px; }
.preview-table th, .preview-table td { padding: var(--space-sm) var(--space-md); text-align: left; border-bottom: 1px solid var(--border-subtle); white-space: nowrap; }
.preview-table th { background: var(--bg-secondary); color: var(--text-secondary); font-weight: 600; font-size: 12px; text-transform: uppercase; letter-spacing: 0.02em; position: sticky; top: 0; }

/* Results */
.decision-trail { background: var(--bg-secondary); border-radius: var(--radius-md); padding: var(--space-lg); margin-bottom: var(--space-xl); }
.decision-trail h3 { font-size: 17px; font-weight: 600; color: var(--accent-blue); margin-bottom: var(--space-lg); }
.trail-container { display: flex; flex-direction: column; gap: var(--space-md); }
.trail-step { display: flex; align-items: flex-start; gap: var(--space-md); padding: var(--space-md); background: var(--bg-card); border-radius: var(--radius-md); border-left: 4px solid var(--border-default); animation: slideIn 0.4s cubic-bezier(0.25,0.1,0.25,1) forwards; opacity: 0; box-shadow: var(--shadow-sm); }
.trail-step:nth-child(1) { animation-delay: 0.1s; }
.trail-step:nth-child(2) { animation-delay: 0.2s; }
.trail-step:nth-child(3) { animation-delay: 0.3s; }
.trail-step:nth-child(4) { animation-delay: 0.4s; }
@keyframes slideIn { from { opacity: 0; transform: translateX(-16px); } to { opacity: 1; transform: translateX(0); } }
.trail-step.passed { border-left-color: var(--accent-green); }
.trail-step.failed { border-left-color: var(--text-muted); }
.trail-step.matched { border-left-color: var(--accent-blue); background: rgba(0,113,227,0.04); }
.step-icon { width: 32px; height: 32px; display: flex; align-items: center; justify-content: center; border-radius: 50%; flex-shrink: 0; }
.trail-step.passed .step-icon { background: rgba(52,199,89,0.12); color: var(--accent-green); }
.trail-step.failed .step-icon { background: var(--bg-secondary); color: var(--text-muted); }
.trail-step.matched .step-icon { background: rgba(0,113,227,0.12); color: var(--accent-blue); }
.step-icon svg { width: 18px; height: 18px; }
.step-content { flex: 1; }
.step-title { font-weight: 600; font-size: 15px; margin-bottom: 4px; }
.step-description { font-size: 14px; color: var(--text-secondary); }
.step-result { font-size: 13px; font-family: var(--font-mono); color: var(--accent-blue); margin-top: var(--space-xs); font-weight: 500; }
.step-check { display: flex; align-items: flex-start; gap: 8px; padding: 6px 0; font-size: 13px; }
.step-check .check-icon { font-weight: bold; width: 16px; }
.step-check.found .check-icon { color: var(--accent-green); }
.step-check.not-found .check-icon { color: var(--text-muted); }
.step-check .check-text { color: var(--text-secondary); }
.trail-summary { padding: 1rem; background: rgba(0,113,227,0.06); border-radius: 8px; text-align: center; }
.trail-summary p { margin: 0; color: var(--text-secondary); }
.trail-summary strong { color: var(--accent-blue); }

.results-summary { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--space-lg); margin-bottom: var(--space-xl); }
.summary-card { background: var(--bg-card); border-radius: var(--radius-md); padding: var(--space-xl); text-align: center; border: 1px solid var(--border-subtle); position: relative; overflow: hidden; }
.summary-card::before { content: ''; position: absolute; top: 0; left: 0; right: 0; height: 3px; }
.summary-card.shipping-mode::before { background: var(--accent-blue); }
.summary-card.shipping-type::before { background: var(--accent-green); }
.summary-card.piece-count::before { background: var(--accent-orange); }
.card-label { font-size: 11px; font-weight: 600; text-transform: uppercase; letter-spacing: 0.06em; color: var(--text-muted); margin-bottom: var(--space-sm); }
.card-value { font-size: 34px; font-weight: 600; font-family: var(--font-mono); margin-bottom: 4px; letter-spacing: -0.02em; }
.shipping-mode .card-value { color: var(--accent-blue); }
.shipping-type .card-value { color: var(--accent-green); }
.piece-count .card-value { color: var(--accent-orange); }
.card-description { font-size: 13px; color: var(--text-secondary); }

.results-table-container { background: var(--bg-card); border-radius: var(--radius-md); padding: var(--space-lg); border: 1px solid var(--border-subtle); }
.results-table-container h3 { font-size: 17px; font-weight: 600; margin-bottom: var(--space-lg); }
.table-wrapper { overflow-x: auto; border-radius: var(--radius-sm); border: 1px solid var(--border-subtle); }
.results-table { width: 100%; border-collapse: collapse; font-size: 14px; }
.results-table th { background: var(--bg-secondary); color: var(--text-secondary); font-weight: 600; text-transform: uppercase; font-size: 11px; letter-spacing: 0.04em; padding: 14px 16px; text-align: left; white-space: nowrap; }
.results-table td { padding: 14px 16px; border-bottom: 1px solid var(--border-subtle); }
.results-table tr:last-child td { border-bottom: none; }
.results-table tr:hover td { background: var(--bg-secondary); }

.mode-badge, .type-badge { display: inline-flex; align-items: center; padding: 4px 12px; border-radius: 20px; font-family: var(--font-mono); font-size: 12px; font-weight: 600; }
.mode-badge { background: rgba(0,113,227,0.1); color: var(--accent-blue); }
.type-badge { background: rgba(52,199,89,0.1); color: var(--accent-green); }
.dest-badge { display: inline-block; padding: 4px 10px; border-radius: 6px; font-size: 11px; font-weight: 600; text-transform: uppercase; }
.dest-badge.residential { background: rgba(175,82,222,0.12); color: var(--accent-purple); }
.dest-badge.commercial { background: rgba(255,149,0,0.12); color: var(--accent-orange); }
.item-list { list-style: none; font-size: 13px; }
.item-list li { padding: 2px 0; color: var(--text-secondary); }

/* ===================================
   CHECKLIST TAB
   =================================== */

.checklist-container { max-width: 960px; margin: 0 auto; padding: var(--space-xl) var(--space-2xl); }

.checklist-toolbar {
    display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: var(--space-md);
    background: var(--bg-card); border-radius: var(--radius-lg); padding: var(--space-lg); margin-bottom: var(--space-xl);
    box-shadow: var(--shadow-card); position: sticky; top: 60px; z-index: 50;
}
.checklist-progress { flex: 1; min-width: 200px; }
.progress-bar { height: 8px; background: var(--bg-secondary); border-radius: 4px; overflow: hidden; margin-bottom: 6px; }
.progress-fill { height: 100%; background: var(--accent-green); border-radius: 4px; transition: width 0.4s ease; width: 0; }
.progress-text { font-size: 13px; color: var(--text-secondary); font-weight: 500; }
.checklist-actions { display: flex; gap: var(--space-sm); }

.cl-category { margin-bottom: var(--space-2xl); }
.cl-category-header { margin-bottom: var(--space-lg); }
.cl-category-header h3 { font-size: 20px; font-weight: 600; color: var(--text-primary); margin-bottom: 4px; }
.cl-category-header p { font-size: 14px; color: var(--text-secondary); }

.cl-items { display: flex; flex-direction: column; gap: var(--space-md); }

.cl-item {
    background: var(--bg-card); border-radius: var(--radius-md); padding: var(--space-lg);
    box-shadow: var(--shadow-sm); border-left: 4px solid var(--border-subtle); transition: border-color 0.3s ease;
}
.cl-item[data-status="confirmed"] { border-left-color: var(--accent-green); }
.cl-item[data-status="not-found"] { border-left-color: var(--accent-red); }
.cl-item[data-status="needs-creation"] { border-left-color: var(--accent-orange); }

.cl-item-header { display: flex; align-items: center; gap: var(--space-md); margin-bottom: var(--space-sm); }
.cl-item-title { font-size: 15px; font-weight: 600; }

.cl-status-selector { flex-shrink: 0; }
.cl-status-select {
    font-family: var(--font-sans); font-size: 12px; font-weight: 600; padding: 5px 10px;
    border: 1px solid var(--border-default); border-radius: 6px; background: var(--bg-secondary);
    cursor: pointer; appearance: auto; color: var(--text-primary);
}
.cl-item[data-status="confirmed"] .cl-status-select { background: rgba(52,199,89,0.12); color: #1a8f36; border-color: rgba(52,199,89,0.3); }
.cl-item[data-status="not-found"] .cl-status-select { background: rgba(255,59,48,0.1); color: #c62828; border-color: rgba(255,59,48,0.3); }
.cl-item[data-status="needs-creation"] .cl-status-select { background: rgba(255,149,0,0.1); color: #b36b00; border-color: rgba(255,149,0,0.3); }

.cl-item-desc { font-size: 14px; color: var(--text-secondary); margin-bottom: var(--space-md); }

.cl-sap-path, .cl-expected {
    background: var(--bg-secondary); border-radius: var(--radius-sm); padding: 10px 14px; margin-bottom: var(--space-sm); font-size: 13px;
}
.cl-sap-label, .cl-expected-label { font-weight: 600; color: var(--accent-blue); display: block; font-size: 11px; text-transform: uppercase; letter-spacing: 0.04em; margin-bottom: 4px; }
.cl-sap-value, .cl-expected-value { color: var(--text-primary); font-family: var(--font-mono); font-size: 12px; line-height: 1.6; }

.cl-notes-row { margin-top: var(--space-sm); }
.cl-notes {
    width: 100%; min-height: 48px; padding: 10px 14px; font-family: var(--font-sans); font-size: 14px;
    border: 1px solid var(--border-subtle); border-radius: var(--radius-sm); background: var(--bg-input);
    color: var(--text-primary); resize: vertical; transition: border-color var(--transition-fast);
}
.cl-notes:focus { outline: none; border-color: var(--accent-blue); box-shadow: 0 0 0 4px rgba(0,113,227,0.15); }
.cl-notes::placeholder { color: var(--text-muted); }

/* ===================================
   ABAP SPEC TAB
   =================================== */

.spec-container { max-width: 960px; margin: 0 auto; padding: var(--space-xl) var(--space-2xl); }

.spec-toolbar {
    display: flex; align-items: flex-start; justify-content: space-between; gap: var(--space-md);
    background: var(--bg-card); border-radius: var(--radius-lg); padding: var(--space-lg); margin-bottom: var(--space-xl);
    box-shadow: var(--shadow-card); position: sticky; top: 60px; z-index: 50;
}
.spec-toc { display: flex; flex-wrap: wrap; gap: 6px; flex: 1; }
.spec-toc-link {
    font-size: 12px; font-weight: 500; color: var(--text-secondary); text-decoration: none;
    padding: 5px 10px; border-radius: 6px; background: var(--bg-secondary); transition: all var(--transition-fast);
}
.spec-toc-link:hover { color: var(--accent-blue); background: rgba(0,113,227,0.08); }

.spec-section { background: var(--bg-card); border-radius: var(--radius-lg); padding: var(--space-xl); margin-bottom: var(--space-xl); box-shadow: var(--shadow-card); }
.spec-section-title { font-size: 22px; font-weight: 600; margin-bottom: var(--space-lg); padding-bottom: var(--space-md); border-bottom: 1px solid var(--border-subtle); }
.spec-text { font-size: 15px; color: var(--text-secondary); line-height: 1.7; }
.spec-text strong { color: var(--text-primary); }

.spec-code-block {
    background: #1d1d1f; border-radius: var(--radius-md); padding: var(--space-lg); overflow-x: auto; margin-top: var(--space-md);
}
.spec-code-block pre { margin: 0; }
.spec-code-block code {
    font-family: var(--font-mono); font-size: 13px; line-height: 1.65; color: #e5e5ea; white-space: pre;
}

.spec-table-block { margin-bottom: var(--space-xl); }
.spec-table-name { font-size: 17px; font-weight: 600; font-family: var(--font-mono); color: var(--accent-blue); margin-bottom: 4px; }
.spec-table-desc { font-size: 14px; color: var(--text-secondary); margin-bottom: var(--space-md); }
.spec-table { width: 100%; border-collapse: collapse; font-size: 13px; }
.spec-table th { background: var(--bg-secondary); font-weight: 600; text-transform: uppercase; font-size: 11px; letter-spacing: 0.04em; padding: 12px 14px; text-align: left; color: var(--text-secondary); }
.spec-table td { padding: 12px 14px; border-bottom: 1px solid var(--border-subtle); color: var(--text-primary); }
.spec-table tr:last-child td { border-bottom: none; }
.spec-table code { background: var(--bg-secondary); padding: 2px 6px; border-radius: 4px; font-family: var(--font-mono); font-size: 12px; color: var(--accent-blue); }
.key-badge { background: var(--accent-orange); color: white; font-size: 10px; font-weight: 700; padding: 2px 6px; border-radius: 4px; }

.spec-test-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(420px, 1fr)); gap: var(--space-lg); }
.spec-test-card { background: var(--bg-secondary); border-radius: var(--radius-md); padding: var(--space-lg); border: 1px solid var(--border-subtle); }
.spec-tc-header { display: flex; align-items: center; gap: var(--space-sm); margin-bottom: var(--space-md); }
.spec-tc-id { font-family: var(--font-mono); font-size: 12px; font-weight: 700; background: var(--accent-blue); color: white; padding: 3px 8px; border-radius: 6px; }
.spec-tc-title { font-size: 15px; font-weight: 600; }
.spec-tc-body { margin-bottom: var(--space-md); }
.spec-tc-row { display: flex; justify-content: space-between; padding: 4px 0; font-size: 13px; border-bottom: 1px solid var(--border-subtle); }
.spec-tc-row:last-child { border-bottom: none; }
.spec-tc-label { font-weight: 600; color: var(--text-secondary); font-size: 12px; text-transform: uppercase; }
.spec-tc-expected { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; margin-bottom: var(--space-sm); padding: 10px; background: var(--bg-card); border-radius: var(--radius-sm); }
.spec-tc-pieces { font-family: var(--font-mono); font-size: 12px; font-weight: 600; color: var(--text-secondary); }
.spec-tc-desc { font-size: 13px; color: var(--text-secondary); line-height: 1.5; }

/* ===================================
   RESPONSIVE
   =================================== */

@media (max-width: 768px) {
    .portal-header { flex-direction: column; gap: var(--space-md); padding: var(--space-md); }
    .portal-nav { width: 100%; overflow-x: auto; }
    .main-content { padding: var(--space-md); }
    .checklist-container, .spec-container { padding: var(--space-md); }
    .section-header { flex-direction: column; align-items: flex-start; }
    .form-row { grid-template-columns: 1fr; }
    .results-summary { grid-template-columns: 1fr; }
    .spec-test-grid { grid-template-columns: 1fr; }
    .checklist-toolbar { flex-direction: column; }
    .spec-toolbar { flex-direction: column; }
}

/* ===================================
   PRINT STYLES
   =================================== */

@media print {
    .portal-header, .portal-nav, .checklist-toolbar .checklist-actions, .spec-toolbar, .form-actions, .btn { display: none !important; }
    .portal-tab-content { display: block !important; }
    .cl-item, .spec-section { break-inside: avoid; box-shadow: none; border: 1px solid #ddd; }
    .spec-code-block { background: #f5f5f7 !important; }
    .spec-code-block code { color: #1d1d1f !important; }
    body { background: white; }
}

/* ===================================
   SCROLLBAR
   =================================== */

::-webkit-scrollbar { width: 8px; height: 8px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: var(--border-default); border-radius: 4px; }
::-webkit-scrollbar-thumb:hover { background: var(--text-muted); }