/* Shared document chips and compact educational-component directory. */
.ok-materials { display:flex; flex-wrap:wrap; align-items:center; gap:6px; min-width:0; }
.ok-material-link { display:inline-flex; align-items:center; gap:5px; padding:5px 9px; border:1px solid #dce5f0; border-radius:7px; background:#f4f8fd; color:#24537f; font-size:.76rem; font-weight:600; line-height:1.5; text-decoration:none; }
.ok-material-link:hover { background:#e6f0fa; color:#173c60; border-color:#9ebcda; }
.ok-material-link--program { background:#fff7ed; color:#885016; border-color:#f3ddbf; }
.ok-material-link:focus-visible,.opp-ok-directory :is(input,select,button,a):focus-visible { outline:3px solid #2574b9; outline-offset:3px; }
.ok-row { grid-template-columns:28px minmax(0,1fr) auto; align-items:start; gap:8px 12px; padding:13px 14px; }
.ok-row .ok-materials { grid-column:2; }
.ok-row .ok-card-actions { grid-column:3; grid-row:1 / span 2; }
.opp-components-section .opp-component-tabs { display:flex; flex-wrap:wrap; gap:8px; margin:0 0 16px; border:0; }
.opp-components-section .opp-component-tabs .nav-item { flex:1 1 170px; width:auto; }
.opp-components-section .opp-component-tabs .nav-link { display:flex; align-items:center; gap:8px; min-height:52px; height:100%; padding:11px 14px; border-radius:12px; box-shadow:none; transform:none; }
.opp-components-section .opp-component-tabs .nav-link i { margin:0; font-size:1.15rem; }
.opp-components-section .opp-component-tabs .nav-link h4 { margin:0; font-size:.85rem; line-height:1.4; font-weight:650; }
.opp-components-section .opp-component-content { padding:24px; border-radius:18px; }
.opp-components-section #components-tab-ok .opp-tab-header { padding:0 0 18px; margin:0; background:none; border-radius:0; }
.opp-components-section #components-tab-ok .opp-tab-header p { margin:6px 0 0; color:#66768a; font-size:.9rem; }
.opp-ok-toolbar { display:flex; align-items:center; flex-wrap:wrap; gap:10px; margin:0 0 18px; padding:12px; background:#f5f7fa; border:1px solid #e1e7ef; border-radius:12px; }
.opp-ok-search { display:flex; align-items:center; flex:1 1 260px; gap:9px; color:#697b90; }
.opp-ok-search input { width:100%; min-width:0; background:white; color:#203d60; border:1px solid #d6e0eb; border-radius:8px; padding:9px 10px; font-size:.9rem; }
.opp-ok-filter select { max-width:100%; padding:9px 30px 9px 10px; background:white; border:1px solid #d6e0eb; border-radius:8px; font-size:.85rem; color:#203d60; }
.opp-ok-count { font-size:.8rem; font-variant-numeric:tabular-nums; white-space:nowrap; color:#566b83; }
.opp-ok-directory [hidden] { display:none!important; }
.opp-ok-directory .opp-ok-card--compact { padding:16px 18px; border:1px solid #e0e7ef; border-radius:12px; box-shadow:none; overflow:visible; height:auto; background:white; }
.opp-ok-directory .opp-ok-card--compact::before { display:none; }
.opp-ok-directory .opp-ok-card--compact:hover { transform:none; border-color:#b4c8dd; box-shadow:0 3px 12px #203d6009; }
.opp-ok-number { flex:none; display:grid; place-items:center; width:30px; height:30px; border-radius:8px; background:#eef3f9; color:#5b7290; font-size:.75rem; font-weight:650; }
.opp-ok-summary { flex:1; min-width:0; }
.opp-ok-directory .opp-ok-type { display:inline-block; padding:0; border:0; background:none; color:#6a7d92; font-size:.72rem; font-weight:600; }
.opp-ok-directory .opp-ok-card h4 { margin:4px 0 7px; font-size:1rem; line-height:1.45; font-weight:650; letter-spacing:0; }
.opp-ok-directory .opp-ok-card h4 a { color:#203d60; text-decoration:none; }
.opp-ok-directory .opp-ok-card h4 a:hover { color:#b25414; text-decoration:underline; }
.opp-ok-summary > p { font-size:.8rem; color:#68778b; line-height:1.5; }
.opp-ok-lecturers { display:flex; flex-wrap:wrap; gap:5px 12px; font-size:.76rem; }
.opp-ok-lecturers :is(a,span) { color:#5b6d80; }
.opp-ok-lecturers a:hover { color:#24537f; text-decoration:underline; }
.opp-ok-directory .opp-ok-note { background:none; border-left:2px solid #e0a261; padding:2px 0 2px 9px; margin:8px 0 0; font-size:.8rem; font-weight:400; }
.opp-ok-directory .opp-ok-actions { margin:10px 0 0 46px!important; align-items:center; gap:8px; }
.opp-ok-directory .opp-ok-actions > .opp-small-btn { padding:5px 9px; font-size:.74rem; border-radius:7px; }
.opp-ok-no-results { padding:30px 16px; text-align:center; color:#5b6d80; }
.opp-ok-no-results button { border:1px solid #c5d4e4; border-radius:8px; padding:7px 12px; background:white; color:#24537f; }
@media(max-width:767px) {
 .opp-components-section .opp-component-content { padding:16px 12px; }
 .opp-components-section .opp-component-tabs .nav-item { flex:1 1 140px; }
 .opp-ok-directory .opp-ok-card--compact { padding:13px 11px; }
 .opp-ok-directory .opp-ok-actions { margin-left:0!important; }
 .opp-ok-toolbar { align-items:stretch; }
 .opp-ok-search { flex:1 1 100%; }
 .opp-ok-filter { flex:1 1 180px; min-width:0; }
 .opp-ok-filter select { width:100%; }
 .opp-ok-count { align-self:center; }
 .ok-row { grid-template-columns:24px minmax(0,1fr) auto; gap:8px; padding:12px 10px; }
 .ok-row .ok-materials { grid-column:2 / -1; }
}