/* Eendraadschema-tekentool */

/* Donkere hero zodat de witte navbar-tekst leesbaar is (zoals blog/gids) */
.eds-hero {
    padding: 130px 0 44px;
    background: var(--dark);
    color: var(--white);
    text-align: center;
}

.eds-hero .section-tag { margin-bottom: 16px; }

.eds-hero h1 {
    font-size: clamp(1.6rem, 4vw, 2.4rem);
    color: var(--white);
    margin-bottom: 12px;
}

.eds-hero p {
    max-width: 700px;
    margin: 0 auto;
    color: rgba(255, 255, 255, 0.7);
}

/* --- App-schil --- */
.eds-app {
    border: 1px solid var(--gray-200);
    border-radius: var(--radius-lg);
    overflow: hidden;
    box-shadow: var(--shadow-lg);
    margin: 24px auto 48px;
    background: var(--white);
}

.eds-toolbar {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    padding: 10px 14px;
    border-bottom: 1px solid var(--gray-200);
    background: var(--gray-50);
    align-items: center;
}

.eds-toolbar .eds-spacer { flex: 1; }

.eds-toolbar button,
.eds-toolbar .eds-btn-link {
    font: inherit;
    font-size: 0.82rem;
    font-weight: 500;
    padding: 7px 12px;
    border: 1px solid var(--gray-300);
    border-radius: var(--radius-sm);
    background: var(--white);
    color: var(--gray-700);
    cursor: pointer;
    transition: var(--transition);
    display: inline-block;
    line-height: 1.4;
}

.eds-toolbar button:hover,
.eds-toolbar .eds-btn-link:hover {
    border-color: var(--primary);
    color: var(--primary);
}

.eds-toolbar button.eds-primary {
    background: var(--primary);
    border-color: var(--primary);
    color: var(--white);
}

.eds-toolbar button.eds-primary:hover { background: var(--primary-dark); }

.eds-body {
    display: grid;
    grid-template-columns: 400px 1fr;
    min-height: 620px;
    max-height: calc(100vh - 140px);
}

/* --- Linkerpaneel: boom + eigenschappen --- */
.eds-side {
    border-right: 1px solid var(--gray-200);
    display: flex;
    flex-direction: column;
    min-height: 0;
}

.eds-tree {
    flex: 1.4;
    overflow: auto;
    padding: 10px 8px;
    min-height: 0;
}

.eds-row {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 4px 6px 4px calc(6px + var(--depth) * 16px);
    border-radius: var(--radius-sm);
    cursor: pointer;
    font-size: 0.82rem;
    color: var(--gray-700);
    user-select: none;
}

.eds-row:hover { background: var(--gray-100); }

.eds-row-sel {
    background: rgba(0, 102, 204, 0.1) !important;
    color: var(--primary-dark);
}

.eds-row-icon { width: 18px; text-align: center; flex-shrink: 0; }

.eds-row-title {
    flex: 1;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.eds-row-actions {
    display: none;
    gap: 2px;
    flex-shrink: 0;
}

.eds-row:hover .eds-row-actions,
.eds-row-sel .eds-row-actions { display: inline-flex; }

.eds-row-actions button {
    font-size: 0.72rem;
    width: 22px;
    height: 22px;
    border: none;
    border-radius: 4px;
    background: transparent;
    color: var(--gray-500);
    cursor: pointer;
}

.eds-row-actions button:hover {
    background: var(--gray-200);
    color: var(--dark);
}

.eds-add {
    padding: 2px 6px 6px calc(6px + var(--depth) * 16px);
}

.eds-add input {
    font: inherit;
    font-size: 0.76rem;
    color: var(--gray-600);
    border: 1px dashed var(--gray-300);
    border-radius: var(--radius-sm);
    background: transparent;
    padding: 3px 6px;
    width: 210px;
    max-width: 100%;
}

.eds-add input::placeholder { color: var(--gray-500); }

.eds-add input:hover { border-color: var(--primary); }

.eds-add input:focus {
    outline: none;
    border-color: var(--primary);
    border-style: solid;
    background: var(--white);
}

/* eigenschappen */
.eds-props {
    border-top: 1px solid var(--gray-200);
    padding: 14px;
    overflow: auto;
    flex: 1;
    min-height: 170px;
    background: var(--gray-50);
}

.eds-props h3 {
    font-size: 0.9rem;
    color: var(--dark);
    margin-bottom: 10px;
}

.eds-props-empty {
    font-size: 0.8rem;
    color: var(--gray-500);
}

.eds-field {
    display: grid;
    grid-template-columns: 130px 1fr;
    align-items: center;
    gap: 8px;
    margin-bottom: 8px;
    font-size: 0.78rem;
    color: var(--gray-600);
}

.eds-field input[type="text"],
.eds-field input[type="number"],
.eds-field select {
    font: inherit;
    font-size: 0.8rem;
    padding: 5px 8px;
    border: 1px solid var(--gray-300);
    border-radius: var(--radius-sm);
    background: var(--white);
    width: 100%;
}

.eds-field input:focus,
.eds-field select:focus {
    outline: 2px solid rgba(0, 102, 204, 0.3);
    border-color: var(--primary);
}

.eds-field input[type="checkbox"] {
    justify-self: start;
    width: 16px;
    height: 16px;
    accent-color: var(--primary);
}

/* --- Rechterpaneel: schema --- */
.eds-canvas-wrap {
    overflow: auto;
    background:
        linear-gradient(var(--gray-100) 1px, transparent 1px),
        linear-gradient(90deg, var(--gray-100) 1px, transparent 1px);
    background-size: 24px 24px;
    background-color: #fdfdfd;
    padding: 18px;
    min-height: 0;
}

.eds-canvas-wrap svg {
    background: white;
    box-shadow: var(--shadow);
    border-radius: 4px;
}

/* --- SEO-blok onder de tool --- */
.eds-info { padding: 20px 0 60px; }

.eds-info h2 {
    font-size: 1.4rem;
    color: var(--dark);
    margin: 28px 0 10px;
}

.eds-info p, .eds-info li {
    color: var(--gray-600);
    max-width: 820px;
}

.eds-info p { margin-bottom: 14px; }

.eds-info .btn {
    margin-top: 14px;
    margin-bottom: 24px;
}

.eds-info ul {
    list-style: disc;
    padding-left: 22px;
}

/* --- Mobiel --- */
@media (max-width: 900px) {
    .eds-body {
        grid-template-columns: 1fr;
        max-height: none;
    }

    .eds-side {
        border-right: none;
        border-bottom: 1px solid var(--gray-200);
        max-height: 55vh;
    }

    .eds-canvas-wrap { min-height: 420px; }
}

/* --- Print: enkel het schema --- */
@media print {
    .navbar, .footer, .eds-hero, .eds-toolbar, .eds-side, .eds-info {
        display: none !important;
    }

    .eds-app {
        border: none;
        box-shadow: none;
        margin: 0;
    }

    .eds-body {
        display: block;
        max-height: none;
        min-height: 0;
    }

    .eds-canvas-wrap {
        overflow: visible;
        background: white;
        padding: 0;
    }

    .eds-canvas-wrap svg {
        box-shadow: none;
        max-width: 100%;
        height: auto;
    }
}