/* LLMs.txt Manager — Admin Stylesheet v1.1 */

/* ── Layout ───────────────────────────────────────────────────── */

.llms-wrap { max-width: 1280px; }

.llms-layout {
    display: grid;
    grid-template-columns: 1fr 360px;
    gap: 20px;
    margin-top: 20px;
    align-items: start;
}

@media ( max-width: 1100px ) {
    .llms-layout { grid-template-columns: 1fr; }
}

/* ── Bestandsstatus ───────────────────────────────────────────── */

.llms-status-bar {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 11px 16px;
    border-radius: 4px;
    margin: 16px 0;
    font-size: 13px;
    flex-wrap: wrap;
}

.llms-status-ok   { background: #d1fae5; border: 1px solid #6ee7b7; color: #065f46; }
.llms-status-warn { background: #fff3dc; border: 1px solid #fcd34d; color: #7a4800; }

.llms-status-icon.dashicons {
    font-size: 20px;
    width: 20px;
    height: 20px;
    flex-shrink: 0;
}

.llms-status-info { flex: 1; min-width: 200px; }
.llms-status-info code {
    font-size: 12px;
    background: rgba(0,0,0,.07);
    padding: 1px 5px;
    border-radius: 3px;
}

/* ── Pills ────────────────────────────────────────────────────── */

.llms-pill {
    display: inline-flex;
    align-items: center;
    gap: 3px;
    font-size: 10px;
    font-weight: 600;
    padding: 2px 7px;
    border-radius: 10px;
    vertical-align: middle;
    margin-left: 4px;
    letter-spacing: .01em;
}

.llms-pill--ok  { background: #d1fae5; color: #065f46; }
.llms-pill--err { background: #fee2e2; color: #991b1b; }
.llms-pill--dim { background: #f0f0f1; color: #50575e; }

/* ── Import-melding (banner) ──────────────────────────────────── */

.llms-import-notice {
    display: flex;
    align-items: center;
    gap: 12px;
    background: #fff3dc;
    border: 1px solid #fcd34d;
    border-left: 4px solid #e6a020;
    border-radius: 0 4px 4px 0;
    padding: 12px 16px;
    margin-bottom: 16px;
    flex-wrap: wrap;
}

.llms-import-notice-text {
    flex: 1;
    font-size: 13px;
    color: #7a4800;
    min-width: 200px;
}

.llms-import-notice-close {
    background: none;
    border: none;
    cursor: pointer;
    color: #7a4800;
    opacity: .6;
    padding: 2px;
    flex-shrink: 0;
}

.llms-import-notice-close:hover { opacity: 1; }
.llms-import-notice-close .dashicons { font-size: 18px; width: 18px; height: 18px; }

/* ── Import-balk (compact, geen banner) ──────────────────────── */

.llms-import-bar {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 13px;
    color: #646970;
    margin-bottom: 16px;
    flex-wrap: wrap;
}

.llms-import-bar .dashicons { color: #2271b1; }

/* ── Tabs ─────────────────────────────────────────────────────── */

.llms-tabs {
    display: flex;
    gap: 0;
    margin-bottom: 0;
    border-bottom: 1px solid #ddd;
}

.llms-tab {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 8px 18px;
    font-size: 13px;
    font-weight: 400;
    color: #646970;
    background: #f0f0f1;
    border: 1px solid #ddd;
    border-bottom: none;
    cursor: pointer;
    border-radius: 4px 4px 0 0;
    margin-bottom: -1px;
    transition: background .1s, color .1s;
}

.llms-tab:hover:not(.llms-tab--active) {
    background: #f8f8f8;
    color: #2271b1;
}

.llms-tab--active {
    background: #fff;
    color: #2271b1;
    font-weight: 600;
    border-color: #ddd;
    border-bottom-color: #fff;
    z-index: 1;
}

.llms-tab .dashicons {
    font-size: 15px;
    width: 15px;
    height: 15px;
}

/* ── Kaarten ──────────────────────────────────────────────────── */

.llms-card {
    background: #fff;
    border: 1px solid #ddd;
    border-top: none;
    border-radius: 0 4px 4px 4px;
    padding: 18px 22px;
    margin-bottom: 16px;
}

/* Eerste kaart in visueel-paneel heeft geen border-top
   want de tab heeft al een border-bottom. */
#llms-panel-visual .llms-card:first-child { border-top: none; }
#llms-panel-raw    .llms-card:first-child { border-top: none; }

/* Kaarten in sidebar hebben wel border-top. */
.llms-side-col .llms-card {
    border-top: 1px solid #ddd;
    border-radius: 4px;
}

.llms-card > h2 {
    font-size: 14px;
    font-weight: 600;
    margin: 0 0 14px;
    padding: 0 0 10px;
    border-bottom: 1px solid #f0f0f1;
    display: flex;
    align-items: center;
    gap: 7px;
    color: #1d2327;
}

.llms-card > h2 .dashicons {
    font-size: 18px;
    width: 18px;
    height: 18px;
    color: #646970;
    flex-shrink: 0;
}

.llms-badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: #2271b1;
    color: #fff;
    font-size: 11px;
    font-weight: 600;
    min-width: 20px;
    height: 20px;
    border-radius: 10px;
    padding: 0 6px;
    margin-left: 4px;
}

/* ── Checkboxen ───────────────────────────────────────────────── */

.llms-checkgroup {
    display: grid;
    grid-template-columns: repeat( auto-fill, minmax( 200px, 1fr ) );
    gap: 10px;
    margin-bottom: 18px;
}

.llms-check-item {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    padding: 11px 14px;
    background: #f9f9f9;
    border: 1px solid #e0e0e0;
    border-radius: 4px;
    cursor: pointer;
    transition: background .1s, border-color .1s;
}

.llms-check-item:hover { background: #f0f6fb; border-color: #72aee6; }
.llms-check-item--dim  { opacity: .55; cursor: not-allowed; }
.llms-check-item--dim:hover { background: #f9f9f9; border-color: #e0e0e0; }

.llms-check-item input[type="checkbox"] { flex-shrink: 0; margin-top: 3px; }

.llms-check-label { display: flex; flex-direction: column; gap: 3px; }
.llms-check-label strong { font-size: 13px; color: #1d2327; display: flex; align-items: center; flex-wrap: wrap; gap: 4px; }
.llms-check-label small  { font-size: 11px; color: #646970; line-height: 1.4; }

/* ── Velden ───────────────────────────────────────────────────── */

.llms-field { margin-top: 14px; }

.llms-field > label {
    display: block;
    font-size: 12px;
    font-weight: 600;
    color: #50575e;
    margin-bottom: 5px;
}

.llms-hint {
    font-size: 11px;
    color: #888;
    font-weight: 400;
    margin-left: 3px;
}

/* ── Secties ──────────────────────────────────────────────────── */

.llms-section {
    background: #f7f7f7;
    border: 1px solid #e0e0e0;
    border-radius: 4px;
    padding: 12px 14px;
    margin-bottom: 10px;
}

.llms-section-head {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 10px;
}

.llms-section-name { flex: 1 !important; font-weight: 600 !important; }

.llms-move-col { display: flex; flex-direction: column; gap: 1px; flex-shrink: 0; }

.llms-move-btn {
    background: none;
    border: none;
    padding: 1px 4px;
    cursor: pointer;
    color: #a0aec0;
    font-size: 10px;
    line-height: 1.1;
    border-radius: 2px;
}

.llms-move-btn:hover:not(:disabled) { background: #e5e7eb; color: #2271b1; }
.llms-move-btn:disabled { opacity: .25; cursor: default; }

.llms-del-section { color: #b32d2e !important; text-decoration: none !important; flex-shrink: 0; }
.llms-del-section .dashicons { font-size: 16px; width: 16px; height: 16px; }
.llms-del-section:hover { opacity: .7; }

/* ── Links ────────────────────────────────────────────────────── */

.llms-links-list { margin-bottom: 8px; }

.llms-link-row {
    display: flex;
    align-items: center;
    gap: 6px;
    margin-bottom: 6px;
    flex-wrap: wrap;
}

.llms-link-drag.dashicons { font-size: 16px; width: 16px; height: 16px; color: #c0c0c0; cursor: grab; flex-shrink: 0; }
.llms-link-label { width: 140px !important; }
.llms-link-url   { width: 200px !important; }
.llms-link-desc  { flex: 1 !important; min-width: 100px; }

.llms-del-link { color: #b32d2e !important; text-decoration: none !important; flex-shrink: 0; }
.llms-del-link .dashicons { font-size: 14px; width: 14px; height: 14px; }

/* ── Broncode editor ──────────────────────────────────────────── */

.llms-raw-info {
    display: flex;
    align-items: flex-start;
    gap: 8px;
    background: #e8f0fb;
    border-left: 3px solid #2271b1;
    border-radius: 0 3px 3px 0;
    padding: 9px 12px;
    font-size: 12px;
    color: #185fa5;
    margin-bottom: 14px;
    line-height: 1.5;
}

.llms-raw-info .dashicons { flex-shrink: 0; font-size: 16px; width: 16px; height: 16px; margin-top: 1px; }

#llms-raw-editor {
    font-family: 'Courier New', Courier, monospace;
    font-size: 12px;
    line-height: 1.7;
    background: #1d2327;
    color: #7dd3a8;
    border: none;
    border-radius: 4px;
    resize: vertical;
    width: 100%;
}

/* ── Opslaan ──────────────────────────────────────────────────── */

.llms-save-card { text-align: center; }

.llms-save-card .button-hero {
    width: 100%;
    height: 42px;
    font-size: 14px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
}

.llms-save-icon { font-size: 18px; width: 18px; height: 18px; }

.llms-save-hint {
    margin: 10px 0 0;
    font-size: 12px;
    color: #888;
    display: flex;
    align-items: center;
    gap: 4px;
    justify-content: center;
}

.llms-save-hint .dashicons { font-size: 14px; width: 14px; height: 14px; }

/* ── Notificaties ─────────────────────────────────────────────── */

.llms-notice {
    padding: 9px 13px;
    border-radius: 3px;
    margin-top: 12px;
    font-size: 13px;
    line-height: 1.5;
    text-align: left;
}

.llms-notice-ok  { background: #d1fae5; border: 1px solid #6ee7b7; color: #065f46; }
.llms-notice-err { background: #fee2e2; border: 1px solid #fca5a5; color: #991b1b; }

/* ── Voorbeeld ────────────────────────────────────────────────── */

.llms-preview-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 12px;
}

.llms-preview-head h2 {
    font-size: 14px !important;
    font-weight: 600 !important;
    margin: 0 !important;
    border: none !important;
    padding: 0 !important;
    display: flex;
    align-items: center;
    gap: 6px;
    color: #1d2327;
}

#llms-preview-box {
    background: #1d2327;
    color: #7dd3a8;
    font-family: 'Courier New', Courier, monospace;
    font-size: 11px;
    line-height: 1.75;
    padding: 14px 16px;
    border-radius: 4px;
    overflow: auto;
    max-height: 380px;
    white-space: pre-wrap;
    word-break: break-word;
    margin: 0;
    transition: opacity .15s;
}

#llms-preview-box.llms-loading { opacity: .45; }

/* ── Versiegeschiedenis ───────────────────────────────────────── */

.llms-history-list { list-style: none; margin: 0; padding: 0; }

.llms-history-list li {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 7px 0;
    border-bottom: 1px solid #f0f0f1;
    font-size: 12px;
}

.llms-history-list li:last-child { border-bottom: none; }
.llms-history-date { color: #50575e; }

/* ── Animaties ────────────────────────────────────────────────── */

@keyframes llms-spin {
    from { transform: rotate(0deg); }
    to   { transform: rotate(360deg); }
}

.llms-spinning { animation: llms-spin .8s linear infinite; display: inline-block; }