/* IOD Core Web - Navigator Styles */

/* ============================================================================
   Variables & Base Colors
   ============================================================================ */

:root {

    /* Spacing/radius/border-width tokens live in base.css (loaded on every
       page) — see :root there. */
}

/* ============================================================================
   Capacity Header
   ============================================================================ */

.capacity-header {
    margin-bottom: var(--space-xl);
    border-bottom: var(--border-width-thick) solid var(--iod-blue);
    padding-bottom: var(--space-lg);
}

.capacity-header-top {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: var(--space-sm);
    margin-bottom: var(--space-sm);
}

.capacity-code {
    display: inline-block;
    background: var(--iod-blue);
    color: white;
    padding: var(--space-xs) var(--space-md);
    border-radius: var(--radius-sm);
    font-size: x-small;
    font-weight: bold;
}

.capacity-name {
    font-size: xx-large;
    font-weight: normal;
    color: var(--iod-blue);
}

.capacity-meta {
    display: flex;
    gap: var(--space-lg);
    flex-wrap: wrap;
}

.capacity-meta-item {
    font-size: small;
    color: var(--text-secondary);
}

.capacity-meta-label {
    font-weight: bold;
    color: var(--text-primary);
}

/* ============================================================================
   Sections & Titles
   ============================================================================ */

.section {
    margin-bottom: var(--space-xl);
}

.section-title {
    font-size: large;
    font-weight: bold;
    color: var(--iod-red);
    margin-bottom: var(--space-xxs);
    padding: var(--space-xxs) var(--space-md);
    background: rgb(230, 244, 234);
    border-radius: var(--radius-sm);
    display: inline-block;
}

/* ============================================================================
   Content Boxes
   ============================================================================ */

.definition-box {
    background: var(--bg-light);
    padding: var(--space-lg);
    border-left: var(--space-xxs) solid var(--iod-red);
    border-radius: var(--radius-sm);
    font-size: medium;
    line-height: 1.7;
    margin-bottom: var(--space-lg);
    color: #333;
}

.description-text,
.context-text {
    font-size: medium;
    line-height: 1.8;
    color: var(--text-secondary);
}

.description-text {
    color: #444;
}

.context-text {
    color: #555;
}

/* ============================================================================
   Questions
   ============================================================================ */

.questions-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    gap: var(--space-xxs);
    margin-top: var(--space-xxs);
}

.question-card {
    background: white;
    padding: var(--space-xxs);
    border-radius: var(--radius-sm);
    border-left: var(--space-xxs) solid var(--iod-green);
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
}

.question-text {
    font-weight: normal;
    margin-bottom: var(--space-xxs);
    font-size: small;
    color: var(--iod-blue);
}

.items-list {
    margin-top: var(--space-sm);
    padding-left: var(--space-md);
}

.item {
    margin-bottom: 1px;
    font-size: small;
    color: #555;
}

.item::before {
    content: "✓ ";
    color: var(--iod-green);
    font-weight: bold;
    margin-right: var(--space-xs);
}

/* ============================================================================
   Observable Items (grouped by category: OK / EXC / DEP / INS)
   ============================================================================ */

.observable-categories {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--space-xxs);
    margin-top: var(--space-xxs);
}

.observable-category {
    background: white;
    padding: var(--space-xxs);
    border-radius: var(--radius-sm);
    border-left: var(--space-xxs) solid var(--iod-blue);
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
}

.observable-category-label {
    font-weight: bold;
    margin-bottom: var(--space-xxs);
    font-size: small;
    color: var(--iod-blue);
}

/* ============================================================================
   EQF Scales — compact, professional tables, side by side
   ============================================================================ */

.scales-container {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--space-md);
    align-items: start;
}

.scale {
    border: var(--border-width-thin) solid var(--border-color);
    border-left-width: var(--border-width-thick);
    border-radius: var(--radius-sm);
    overflow: hidden;
}

.scale-authority {
    border-left-color: var(--iod-blue);
}

.scale-expertise {
    border-left-color: var(--iod-orange);
}

.eqf-table {
    width: 100%;
    border-collapse: collapse;
    font-size: small;
}

.eqf-table caption {
    caption-side: top;
    text-align: left;
    padding: var(--space-xs) var(--space-sm);
    font-size: small;
    font-weight: bold;
    color: var(--iod-blue);
    background: var(--bg-light);
    border-bottom: var(--border-width-thin) solid var(--border-color);
}

.scale-expertise .eqf-table caption {
    color: var(--iod-orange);
}

.eqf-col-level {
    width: 32px;
    text-align: center;
}

.eqf-table tbody td {
    padding: var(--space-xs) var(--space-sm);
    line-height: 1.4;
    border-bottom: var(--border-width-thin) solid var(--border-light);
    vertical-align: top;
}

.eqf-table tbody tr:last-child td {
    border-bottom: none;
}

.eqf-table tbody tr:nth-child(even) {
    background: var(--bg-lighter);
}

.eqf-row td.eqf-col-level {
    text-align: center;
    font-variant-numeric: tabular-nums;
    font-weight: bold;
    color: var(--text-secondary);
}

.eqf-descriptor {
    font-weight: normal;
    color: var(--text-primary);
    font-size: normal;
}

.eqf-frontiere {
    margin-top: var(--space-xxs);
    font-size: small;
    line-height: 1.5;
    color: var(--text-secondary);
}

/* ============================================================================
   Sidebar Sections
   ============================================================================ */

.sidebar-section {
    border-top: var(--border-width-thick) solid var(--iod-green);
    margin-top: var(--space-md);
    padding-top: 0;
}

.sidebar-section:first-child {
    border-top: none;
    margin-top: 0;
}

.sidebar-section-title {
    padding: var(--space-sm) var(--space-md);
    background: #e8f5e9;
    border-bottom: var(--border-width-thin) solid var(--border-color);
    font-weight: bold;
    font-size: x-small;
    color: var(--iod-green);
    text-transform: uppercase;
}

/* ============================================================================
   Empty State
   ============================================================================ */

.detail-empty {
    text-align: center;
    padding: var(--space-xxl) var(--space-lg);
    color: var(--text-muted);
}

.detail-empty p {
    font-size: medium;
    margin-bottom: var(--space-lg);
}

/* ============================================================================
   Responsive Design — single breakpoint, shared with base.css (768px)
   ============================================================================ */

@media (max-width: 768px) {
    .scales-container,
    .observable-categories {
        grid-template-columns: 1fr;
    }

    .capacity-name {
        font-size: x-large;
    }

    .section-title {
        font-size: medium;
    }
}