/* Shared UI for the document makers (Resume, Biodata). The paper/page styles
   live in each tool's own <style id="paperCss"> so they can be printed as-is. */

.db-wrap { display:flex; gap:20px; align-items:flex-start; }
.db-form { width:46%; min-width:0; }
.db-preview { width:54%; min-width:0; position:sticky; top:66px; align-self:flex-start; }

.db-card {
    background:#fff;
    border-radius:14px;
    box-shadow:0 6px 18px rgba(0,0,0,.08);
    padding:16px 18px;
    margin-bottom:14px;
}
.db-card > h4 { margin:0 0 4px; font-size:16px; font-weight:700; }
.db-hint { font-size:12.5px; color:#778; margin:2px 0 8px; }

details.db-sec {
    background:#fff;
    border-radius:14px;
    box-shadow:0 6px 18px rgba(0,0,0,.08);
    margin-bottom:12px;
    overflow:hidden;
}
details.db-sec > summary {
    list-style:none;
    cursor:pointer;
    padding:14px 18px;
    font-weight:700;
    font-size:15px;
    display:flex;
    justify-content:space-between;
    align-items:center;
}
details.db-sec > summary::-webkit-details-marker { display:none; }
details.db-sec > summary::after { content:"+"; font-size:20px; color:#4a90e2; font-weight:400; }
details.db-sec[open] > summary::after { content:"\2212"; }
details.db-sec > .db-body { padding:0 18px 16px; }

.db-grid { display:grid; grid-template-columns:1fr 1fr; gap:10px 12px; }
.db-fld { display:block; margin:0; }
.db-grid > * { min-width:0; }
.db-fld.full { grid-column:1 / -1; }
/* when one label wraps to two lines, keep the inputs of the row level */
.db-fld:not(.db-check) { display:flex; flex-direction:column; justify-content:flex-end; }
.db-fld > span { display:block; font-size:12.5px; font-weight:600; color:#445; margin-bottom:3px; }
.db-fld > span small { font-weight:400; color:#889; }
.db-fld input, .db-fld textarea, .db-fld select,
.db-input {
    width:100%;
    padding:8px 10px;
    border:1px solid #cdd3dc;
    border-radius:8px;
    font-size:14px;
    font-family:inherit;
    box-sizing:border-box;
    background:#fff;
}
.db-fld textarea { resize:vertical; min-height:64px; }
/* tick boxes inside a field label must not take the text-input styling (full width, padding, border) */
.db-fld input[type="checkbox"], .db-fld input[type="radio"], .db-check input[type="checkbox"] { width:auto; padding:0; border:0; margin:0; flex:none; box-shadow:none; }
.db-fld input:focus, .db-fld textarea:focus, .db-fld select:focus { outline:none; border-color:#4a90e2; box-shadow:0 0 0 3px rgba(74,144,226,.15); }

.db-rep { border:1px solid #e2e6ed; border-radius:10px; padding:10px 12px; margin-bottom:10px; background:#fafbfc; }
.db-rep-head { display:flex; align-items:center; gap:6px; margin-bottom:8px; }
.db-rep-title { flex:1; font-weight:600; font-size:13.5px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.db-icon-btn {
    width:28px; height:28px;
    border:1px solid #d5dae2;
    background:#fff;
    border-radius:6px;
    cursor:pointer;
    font-size:13px;
    padding:0;
}
.db-icon-btn:disabled { opacity:.35; cursor:default; }

.db-btn {
    background:#4a90e2;
    color:#fff;
    border:none;
    border-radius:8px;
    padding:10px 16px;
    font-size:14px;
    cursor:pointer;
}
.db-btn.green { background:#28a745; }
.db-btn-ghost {
    background:#fff;
    color:#333;
    border:1px solid #cdd3dc;
    border-radius:8px;
    padding:8px 14px;
    font-size:13.5px;
    cursor:pointer;
}
.db-btn-ghost:hover { border-color:#4a90e2; color:#2f6fbd; }
.db-btn:disabled, .db-btn-ghost:disabled { opacity:.5; cursor:not-allowed; }

.db-check { display:flex; align-items:center; gap:8px; margin:8px 0; font-size:14px; font-weight:500; line-height:1.35; }
.db-check input { margin:0; }

.db-photo { display:flex; align-items:center; gap:14px; margin-bottom:10px; }
.db-photo-box {
    width:72px; height:72px;
    border:2px dashed #c3cad5;
    border-radius:10px;
    overflow:hidden;
    display:flex; align-items:center; justify-content:center;
    color:#99a; font-size:11px; text-align:center;
    flex-shrink:0;
    background:#f5f7fa;
}
.db-photo-box img { width:100%; height:100%; object-fit:cover; display:none; }

/* toolbar above the preview */
.db-toolbar { background:#fff; border-radius:14px; box-shadow:0 6px 18px rgba(0,0,0,.08); padding:12px 14px; margin-bottom:12px; }
.db-tool-row { display:flex; flex-wrap:wrap; gap:8px 14px; align-items:center; }
.db-tool-row + .db-tool-row { margin-top:10px; }
.db-tool-row label { margin:0; font-size:12.5px; font-weight:600; color:#445; display:flex; align-items:center; gap:6px; }
.db-tool-row select { padding:6px 8px; border:1px solid #cdd3dc; border-radius:8px; font-size:13px; background:#fff; }

.db-chips { display:flex; flex-wrap:wrap; gap:6px; }
.db-chip {
    border:1px solid #cdd3dc;
    background:#f7f8fa;
    border-radius:16px;
    padding:5px 13px;
    font-size:13px;
    cursor:pointer;
    font-weight:600;
    color:#445;
}
.db-chip.active { background:#4a90e2; border-color:#4a90e2; color:#fff; }

.db-swatches { display:flex; gap:6px; align-items:center; flex-wrap:wrap; }
.db-swatch {
    width:22px; height:22px;
    border-radius:50%;
    border:2px solid #fff;
    box-shadow:0 0 0 1px #c6ccd6;
    cursor:pointer;
    padding:0;
}
.db-swatch.active { box-shadow:0 0 0 2px #333; }
.db-swatches input[type="color"] { width:28px; height:26px; padding:0; border:none; background:none; cursor:pointer; }

.db-stage {
    background:#e4e8ee;
    border-radius:14px;
    padding:14px;
    max-height:calc(100vh - 250px);
    overflow-y:auto;
    overflow-x:hidden;
}
.db-stage-inner { width:100%; }
.db-page-info { font-size:12.5px; color:#667; margin-top:8px; }
.db-page-info.warn { color:#b26a00; }

.db-note { background:#f7fbff; border-left:4px solid #2196f3; border-radius:6px; padding:9px 12px; font-size:13px; color:#333; margin-top:10px; }
.db-note.warn { background:#fff8e1; border-left-color:#ffb300; color:#6e5200; }

@media (max-width: 991px) {
    .db-wrap { flex-direction:column; }
    .db-form, .db-preview { width:100%; }
    .db-preview { position:static; }
    .db-stage { max-height:none; }
}
@media (max-width: 520px) {
    .db-grid { grid-template-columns:1fr; }
}

/* dialogs (replace confirm / alert) */
.db-modal-overlay {
    position:fixed; top:0; right:0; bottom:0; left:0; z-index:100000;
    background:rgba(15,23,42,.5);
    display:flex !important; align-items:center; justify-content:center;
    padding:16px;
    opacity:0; transition:opacity .15s ease;
}
.db-modal-overlay.show { opacity:1; }
.db-modal {
    width:100%; max-width:400px;
    background:#fff;
    border-radius:16px;
    box-shadow:0 20px 50px rgba(0,0,0,.28);
    padding:22px 22px 18px;
    transform:translateY(8px) scale(.98);
    transition:transform .15s ease;
}
.db-modal-overlay.show .db-modal { transform:none; }
.db-modal-title { font-size:17px; font-weight:700; color:#1b2330; margin-bottom:6px; }
.db-modal-msg { font-size:14.5px; line-height:1.5; color:#4a5568; white-space:pre-line; }
.db-modal-actions { display:flex; justify-content:flex-end; gap:10px; margin-top:20px; }
.db-modal-actions button { min-width:88px; }
.db-btn.danger { background:#d64545; }
.db-btn:focus-visible, .db-btn-ghost:focus-visible { outline:3px solid rgba(74,144,226,.45); outline-offset:2px; }
body.db-modal-open { overflow:hidden; }
@media (prefers-reduced-motion: reduce) {
    .db-modal-overlay, .db-modal { transition:none; }
}
.db-import { border:2px dashed #c3cad6; border-radius:12px; padding:14px 16px; margin-bottom:12px; background:#fff; text-align:center; }
.db-import.drag { border-color:#3b82f6; background:#eff6ff; }
.db-import-t { font-weight:700; font-size:14.5px; color:#2b3340; }
.db-import-s { font-size:12.5px; color:#778; margin:2px 0 10px; }
.db-import-m { font-size:13px; margin-top:10px; line-height:1.5; text-align:left; }
.db-import-m.err { color:#8f1d1d; background:#fdeceb; border:1px solid #f3c1bd; border-radius:8px; padding:8px 10px; }
.db-import-m.ok { color:#1d5c34; background:#e6f4ea; border:1px solid #bfe0c9; border-radius:8px; padding:8px 10px; }
.db-checks { display:flex; flex-wrap:wrap; gap:6px 16px; margin-top:4px; }
.db-check-item { display:inline-flex; align-items:center; gap:6px; margin:0; font-weight:400; font-size:14px; cursor:pointer; }