/* StandardsView - Custom styles (extends W3.CSS) */

/* Reset body margin */
body {
    margin: 0;
}

/* Top bar - fixed height for predictable layout */
.top-bar {
    height: 70px;
    padding: 12px 16px;
    box-sizing: border-box;
}

/* Color variables for dimension badges */
:root {
    --color-dci: #2e7d32;
    --color-sep: #1565c0;
    --color-ccc: #6a1b9a;
    --color-nos: #ef6c00;
    --color-ets: #00838f;
}

/* PE List Cards */
.pe-card {
    display: block;
    text-decoration: none;
    color: inherit;
    margin-bottom: 8px;
}

.pe-card:hover {
    background-color: #f5f5f5;
}

.pe-card-code {
    font-weight: bold;
    color: #1565c0;
}

.pe-card-description {
    color: #666;
    font-size: 0.95em;
    margin-top: 4px;
}

/* PE Detail View */
.pe-header {
    background-color: #3f51b5;
    color: white;
    padding: 16px;
    border-radius: 4px 4px 0 0;
}

.pe-code {
    font-size: 1.5em;
    font-weight: bold;
    margin: 0;
}

.pe-description {
    margin: 8px 0 0 0;
    opacity: 0.95;
}

.pe-classifications {
    background-color: #f5f5f5;
    padding: 12px 16px;
    display: flex;
    gap: 24px;
    flex-wrap: wrap;
    font-size: 0.9em;
}

.pe-classification-label {
    font-weight: bold;
    color: #666;
}

.pe-section {
    padding: 16px;
    border-bottom: 1px solid #e0e0e0;
}

.pe-section:last-child {
    border-bottom: none;
}

.pe-section-title {
    font-weight: bold;
    font-size: 0.85em;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    margin: 0 0 12px 0;
    padding: 4px 8px;
    display: inline-block;
    border-radius: 3px;
}

.pe-section-title.dci {
    background-color: #e8f5e9;
    color: var(--color-dci);
}

.pe-section-title.sep {
    background-color: #e3f2fd;
    color: var(--color-sep);
}

.pe-section-title.ccc {
    background-color: #f3e5f5;
    color: var(--color-ccc);
}

.pe-section-title.nos {
    background-color: #fff3e0;
    color: var(--color-nos);
}

.pe-section-title.ets {
    background-color: #e0f7fa;
    color: var(--color-ets);
}

.pe-section-content ul {
    margin: 0;
    padding-left: 20px;
}

.pe-section-content li {
    margin-bottom: 8px;
}

.pe-clarification,
.pe-assessment {
    background-color: #fafafa;
    font-style: italic;
}

/* Subsections (e.g., component ideas under DCI) */
.pe-subsection {
    margin-top: 12px;
    padding-left: 12px;
    border-left: 3px solid #e0e0e0;
}

.pe-subsection-title {
    font-weight: 600;
    font-size: 0.9em;
    color: #555;
    margin-bottom: 6px;
}

/* Loading state */
.loading {
    text-align: center;
    padding: 32px;
    color: #999;
}

/* Split Panel Layout for PE Detail with PDF */
.split-panel-container {
    display: flex;
    height: calc(100vh - 70px - 50px); /* viewport minus top bar minus nav bar */
}

.split-panel-left {
    width: 50%;
    overflow-y: auto;
    border-right: 1px solid #ddd;
}

.split-panel-right {
    width: 50%;
    overflow: hidden;
}

#pdf-container {
    height: 100%;
    display: flex;
    flex-direction: column;
}

#pdf-viewer {
    flex: 1;
}

#pdf-fallback {
    flex: 1;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
}

/* Navigation buttons */
#pe-nav button:disabled {
    opacity: 0.5;
    cursor: not-allowed;
}