/* =====================================================
   DonePDF – shared tool UI (loaded on every page by includes/header.php)
   1. One size for the upload box of every tool
   2. Upload icon by tool category: the file type you upload (in its colour)
      plus a small badge for what the tool does
   3. Full-screen button and full-screen layout for every tool
   ===================================================== */

/* ---------- 1. Upload box ---------- */
/* (Compare PDF and Overlay PDF show two boxes side by side and keep their width) */
.tool-wrapper[data-tool] .upload-area:not(.compare-upload):not(.ovl4-drop):not(.dd-has-file) {
    width: 100% !important;
    max-width: 720px !important;
    min-height: 345px !important;
    margin-left: auto !important;
    margin-right: auto !important;
    padding: 30px 22px !important;
    box-sizing: border-box !important;
}
.tool-wrapper[data-tool] .upload-area:not([hidden]):not(.hidden) {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
}
/* many tools show their upload box again with style="display: block", which threw the
   centred content to the top of the box a moment after the page opened */
.tool-wrapper[data-tool] .upload-area[style*="display: block"]:not([hidden]):not(.hidden),
.tool-wrapper[data-tool] .upload-area[style*="display:block"]:not([hidden]):not(.hidden) { display: flex !important; }
.tool-wrapper[data-tool] .upload-area > .upload-inner { width: 100%; gap: 10px; }
/* the JSON / YAML / INI tools: container padding made their box 680 px wide */
.tool-wrapper.dd-tool[data-tool] { max-width: 760px; }
/* the same button and small print in every upload box */
.tool-wrapper[data-tool] .upload-area .upload-btn {
    padding: 11px 24px !important; font-size: 15px !important; font-weight: 600 !important; border-radius: 10px !important;
    background: var(--primary, #2563eb) !important; color: #fff !important; border: 0 !important; margin: 4px 0 0 !important; min-width: 0 !important;
}
.tool-wrapper[data-tool] .upload-area .upload-btn:hover { filter: brightness(1.08); }
.tool-wrapper[data-tool] .upload-area .upload-inner > p,
.tool-wrapper[data-tool] .upload-area .upload-inner > small,
.tool-wrapper[data-tool] .upload-area .upload-limits,
.tool-wrapper[data-tool] .upload-area [class$="-limits"],
.tool-wrapper[data-tool] .upload-area [class*="-note"] { font-size: 12.5px !important; line-height: 1.45 !important; margin: 2px 0 0 !important; }
.tool-wrapper[data-tool] .upload-area .upload-text { font-size: 20px; line-height: 1.35; }
.tool-wrapper[data-tool] .upload-area .upload-hint { font-size: 14px; line-height: 1.5; }

/* ---------- 2. Upload icon: one icon for the tool's format, in that format's colours ---------- */
.tool-wrapper .upload-icon.dp-ui-icon {
    display: inline-flex; align-items: center; justify-content: center;
    width: auto; height: auto; margin: 0 auto 8px; font-size: 52px; line-height: 1; opacity: 1;
    background: none !important; box-shadow: none !important; border: 0 !important;
}
.tool-wrapper .dp-ui-icon > i { color: var(--dp-ui-c, #e5252a) !important; }
/* The icon font loads after the page is shown: keep the icon's space from the start,
   otherwise everything in the upload box jumps down when the icons appear. */
.tool-wrapper .upload-icon.dp-ui-icon { height: 1em; min-width: 1em; }
.tool-wrapper .upload-icon.dp-ui-icon > i { display: inline-block; height: 1em; line-height: 1; }
.tool-wrapper[data-tool] .upload-area :is(.fas, .far, .fab, .fa, .fa-solid, .fa-regular, .fa-brands) { display: inline-block; height: 1em; line-height: 1; }
.tool-wrapper[data-tool] .upload-area .upload-btn > i:first-child { min-width: 1em; text-align: center; }
.dp-ui-icon[data-dp-type="pdf"]    { --dp-ui-c: #e5252a; }
.dp-ui-icon[data-dp-type="word"]   { --dp-ui-c: #185abd; }
.dp-ui-icon[data-dp-type="excel"],
.dp-ui-icon[data-dp-type="csv"]    { --dp-ui-c: #107c41; }
.dp-ui-icon[data-dp-type="ppt"]    { --dp-ui-c: #c43e1c; }
.dp-ui-icon[data-dp-type="image"],
.dp-ui-icon[data-dp-type="camera"] { --dp-ui-c: #7c3aed; }
.dp-ui-icon[data-dp-type="svg"]    { --dp-ui-c: #f59e0b; }
.dp-ui-icon[data-dp-type="eps"]    { --dp-ui-c: #f97316; }
.dp-ui-icon[data-dp-type="html"]   { --dp-ui-c: #e34f26; }
.dp-ui-icon[data-dp-type="md"]     { --dp-ui-c: #1f2937; }
.dp-ui-icon[data-dp-type="json"]   { --dp-ui-c: #d97706; }
.dp-ui-icon[data-dp-type="xml"]    { --dp-ui-c: #ea580c; }
.dp-ui-icon[data-dp-type="yaml"]   { --dp-ui-c: #cb171e; }
.dp-ui-icon[data-dp-type="ini"]    { --dp-ui-c: #64748b; }
.dp-ui-icon[data-dp-type="base64"] { --dp-ui-c: #0f766e; }
.dp-ui-icon[data-dp-type="text"]   { --dp-ui-c: #475569; }
.dp-ui-icon[data-dp-type="sub"]    { --dp-ui-c: #0284c7; }
.dp-ui-icon[data-dp-type="zip"]    { --dp-ui-c: #b45309; }
/* darker brand colours need a lift on dark backgrounds */
[data-theme="dark"] .tool-wrapper .dp-ui-icon > i,
[data-theme="dark-contrast"] .tool-wrapper .dp-ui-icon > i { filter: brightness(1.45) saturate(1.1); }
[data-theme="dark"] .dp-ui-icon[data-dp-type="md"],
[data-theme="dark-contrast"] .dp-ui-icon[data-dp-type="md"] { --dp-ui-c: #cbd5e1; }

/* ---------- 3. Full screen ---------- */
.dp-fs-bar { display: flex; justify-content: flex-end; margin: 0 0 8px; }
.dp-fs-bar[hidden] { display: none !important; }
.dp-fs-btn {
    display: inline-flex; align-items: center; gap: 7px; padding: 6px 12px; border-radius: 9px;
    border: 1px solid #e2e8f0; background: #fff; color: #334155; font: inherit; font-size: 13px; font-weight: 600; cursor: pointer;
}
.dp-fs-btn:hover { border-color: #2563eb; color: #2563eb; }
.tool-wrapper[data-tool]:fullscreen {
    background: #f8fafc; overflow: auto; padding: 14px 18px 24px !important; margin: 0 !important;
    max-width: none !important; width: 100% !important; box-sizing: border-box;
}
.tool-wrapper[data-tool]:fullscreen::backdrop { background: #f8fafc; }
[data-theme="dark"] .tool-wrapper[data-tool]:fullscreen,
[data-theme="dark-contrast"] .tool-wrapper[data-tool]:fullscreen { background: #0f172a; }
[data-theme="dark"] .dp-fs-btn, [data-theme="dark-contrast"] .dp-fs-btn { background: #1e293b; border-color: #334155; color: #e2e8f0; }

/* ---------- 4. OCR option (inc/ocr-options.php) ---------- */
.dp-ocr {
    max-width: 720px; margin: 0 auto 14px; padding: 12px 16px; box-sizing: border-box;
    border: 1px solid #e2e8f0; border-radius: 12px; background: #f8fafc; text-align: start;
    display: flex; flex-direction: column; gap: 8px; font-size: 14px; color: #334155;
}
.office-options .dp-ocr { flex: 1 1 100%; max-width: none; margin: 0; padding: 10px 0 0; border: 0; border-top: 1px solid #e2e8f0; border-radius: 0; background: none; }
.ppt-ready .dp-ocr { max-width: none; margin: 4px 0 14px; }
.dp-ocr-row { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px; cursor: pointer; margin: 0; }
.dp-ocr-title { font-weight: 600; color: #1e293b; }
.dp-ocr-check { flex-wrap: nowrap !important; align-items: flex-start !important; }
.dp-ocr-check input { margin-top: 2px !important; flex: none; }
.dp-ocr-check .dp-ocr-title { flex: 1 1 auto; min-width: 0; }
.dp-ocr-title i { color: #2563eb; margin-inline-end: 4px; }
.dp-ocr select {
    flex: 1 1 260px; min-width: 0; max-width: 100%; padding: 7px 10px; border: 1px solid #cbd5e1; border-radius: 8px;
    background: #fff; color: #1e293b; font: inherit; font-size: 14px;
}
.dp-ocr input[type="checkbox"] { width: 16px; height: 16px; accent-color: #2563eb; margin: 0; }
.dp-ocr-hint { font-size: 12.5px; color: #64748b; line-height: 1.5; }
.dp-ocr-langs { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 14px; }
.dp-ocr[hidden], .dp-ocr-langs[hidden] { display: none !important; }
.dp-ocr-sub { font-weight: 600; color: #475569; font-size: 13px; }
.dp-ocr-lang { display: inline-flex; align-items: center; gap: 6px; cursor: pointer; margin: 0; font-size: 13.5px; }
.dp-ocr-note { margin: 8px 0 0; padding: 8px 12px; border-radius: 8px; font-size: 13px; line-height: 1.5; background: #ecfdf5; color: #065f46; }
.dp-ocr-note.warn { background: #fffbeb; color: #92400e; }
[data-theme="dark"] .dp-ocr, [data-theme="dark-contrast"] .dp-ocr { background: #1e293b; border-color: #334155; color: #cbd5e1; }
[data-theme="dark"] .dp-ocr-title, [data-theme="dark-contrast"] .dp-ocr-title { color: #f1f5f9; }
[data-theme="dark"] .dp-ocr select, [data-theme="dark-contrast"] .dp-ocr select { background: #0f172a; border-color: #334155; color: #e2e8f0; }
[data-theme="dark"] .dp-ocr-note, [data-theme="dark-contrast"] .dp-ocr-note { background: #064e3b; color: #d1fae5; }
[data-theme="dark"] .dp-ocr-note.warn, [data-theme="dark-contrast"] .dp-ocr-note.warn { background: #78350f; color: #fef3c7; }

@media (max-width: 600px) {
    .tool-wrapper[data-tool] .upload-area:not(.compare-upload):not(.ovl4-drop):not(.dd-has-file) { min-height: 260px !important; padding: 24px 16px !important; }
    .tool-wrapper .upload-icon.dp-ui-icon { font-size: 44px; }
    .dp-fs-btn span { display: none; }
}

/* ---------- 5. Language picker (dp_ocr_lang_picker) ---------- */
.dp-langpick { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; }
.dp-langpick-chip {
    display: inline-flex !important; align-items: center; gap: 6px; padding: 4px 8px 4px 10px; margin: 0 !important;
    border-radius: 999px; background: #e0e7ff; color: #1e3a8a; font-size: 13px; font-weight: 600; cursor: pointer; line-height: 1.3;
}
.dp-langpick-chip[hidden] { display: none !important; }
.dp-langpick-chip input { position: absolute; opacity: 0; width: 1px; height: 1px; pointer-events: none; }
.dp-langpick-chip i { font-size: 11px; opacity: .65; }
.dp-langpick-chip:hover i { opacity: 1; }
.dp-langpick-chip:focus-within { outline: 2px solid #2563eb; outline-offset: 1px; }
.dp-langpick-add {
    max-width: 220px; padding: 4px 8px; border: 1px dashed #94a3b8; border-radius: 999px; background: #fff;
    color: #2563eb; font: inherit; font-size: 13px; font-weight: 600; cursor: pointer;
}
.dp-langpick-add:disabled { color: #94a3b8; cursor: default; }
[data-theme="dark"] .dp-langpick-chip, [data-theme="dark-contrast"] .dp-langpick-chip { background: #1e3a8a; color: #e0e7ff; }
[data-theme="dark"] .dp-langpick-add, [data-theme="dark-contrast"] .dp-langpick-add { background: #0f172a; color: #93c5fd; border-color: #475569; }


/* ---------- 6. PDF icon drawn from its SVG ----------
   On some browsers the Font Awesome font showed another file glyph ("PNG") for
   fa-file-pdf. The icon is drawn from the same Font Awesome Free 6.7.2 artwork
   (CC BY 4.0, fontawesome.com) as a mask in the text colour, so it no longer
   depends on the icon font. */
i.fa-file-pdf::before {
    content: "" !important; display: inline-block; width: 1em; height: 1em; vertical-align: -0.125em;
    background-color: currentColor;
    -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 512 512'%3E%3Cpath d='M0 64C0 28.7 28.7 0 64 0L224 0l0 128c0 17.7 14.3 32 32 32l128 0 0 144-208 0c-35.3 0-64 28.7-64 64l0 144-48 0c-35.3 0-64-28.7-64-64L0 64zm384 64l-128 0L256 0 384 128zM176 352l32 0c30.9 0 56 25.1 56 56s-25.1 56-56 56l-16 0 0 32c0 8.8-7.2 16-16 16s-16-7.2-16-16l0-48 0-80c0-8.8 7.2-16 16-16zm32 80c13.3 0 24-10.7 24-24s-10.7-24-24-24l-16 0 0 48 16 0zm96-80l32 0c26.5 0 48 21.5 48 48l0 64c0 26.5-21.5 48-48 48l-32 0c-8.8 0-16-7.2-16-16l0-128c0-8.8 7.2-16 16-16zm32 128c8.8 0 16-7.2 16-16l0-64c0-8.8-7.2-16-16-16l-16 0 0 96 16 0zm80-112c0-8.8 7.2-16 16-16l48 0c8.8 0 16 7.2 16 16s-7.2 16-16 16l-32 0 0 32 32 0c8.8 0 16 7.2 16 16s-7.2 16-16 16l-32 0 0 48c0 8.8-7.2 16-16 16s-16-7.2-16-16l0-64 0-64z'/%3E%3C/svg%3E") center / contain no-repeat;
    mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 512 512'%3E%3Cpath d='M0 64C0 28.7 28.7 0 64 0L224 0l0 128c0 17.7 14.3 32 32 32l128 0 0 144-208 0c-35.3 0-64 28.7-64 64l0 144-48 0c-35.3 0-64-28.7-64-64L0 64zm384 64l-128 0L256 0 384 128zM176 352l32 0c30.9 0 56 25.1 56 56s-25.1 56-56 56l-16 0 0 32c0 8.8-7.2 16-16 16s-16-7.2-16-16l0-48 0-80c0-8.8 7.2-16 16-16zm32 80c13.3 0 24-10.7 24-24s-10.7-24-24-24l-16 0 0 48 16 0zm96-80l32 0c26.5 0 48 21.5 48 48l0 64c0 26.5-21.5 48-48 48l-32 0c-8.8 0-16-7.2-16-16l0-128c0-8.8 7.2-16 16-16zm32 128c8.8 0 16-7.2 16-16l0-64c0-8.8-7.2-16-16-16l-16 0 0 96 16 0zm80-112c0-8.8 7.2-16 16-16l48 0c8.8 0 16 7.2 16 16s-7.2 16-16 16l-32 0 0 32 32 0c8.8 0 16 7.2 16 16s-7.2 16-16 16l-32 0 0 48c0 8.8-7.2 16-16 16s-16-7.2-16-16l0-64 0-64z'/%3E%3C/svg%3E") center / contain no-repeat;
}

/* ---------- 7. Focus mode (dp-tool-ui.js): only the tool while a file is open ---------- */
.dp-focus-hide { display: none !important; }
.dp-guide-bar { display: flex; justify-content: center; margin: 18px auto 8px; }
.dp-guide-btn {
    display: inline-flex; align-items: center; gap: 8px; padding: 8px 16px; border-radius: 999px;
    border: 1px solid #cbd5e1; background: #fff; color: #475569; font: inherit; font-size: 13.5px; font-weight: 600; cursor: pointer;
}
.dp-guide-btn:hover { border-color: #2563eb; color: #2563eb; }
.dp-guide-btn i { font-size: 13px; }
[data-theme="dark"] .dp-guide-btn, [data-theme="dark-contrast"] .dp-guide-btn { background: #1e293b; border-color: #334155; color: #cbd5e1; }

/* =====================================================================
   Dark themes: readable text, fields and panels on every tool page
   (tool stylesheets hard-code light colours; these rules use the theme
   variables so the same page works in both dark themes)
   ===================================================================== */
html[data-theme^="dark"] .tool-text-block,
html[data-theme^="dark"] .tool-usecases { background: transparent !important; }
html[data-theme^="dark"] .tool-text-block p,
html[data-theme^="dark"] .tool-text-block li,
html[data-theme^="dark"] .tool-block-list li,
html[data-theme^="dark"] .key-points li,
html[data-theme^="dark"] .content-text p { color: var(--text-light); }
html[data-theme^="dark"] .tool-text-block li strong,
html[data-theme^="dark"] .tool-text-block p strong,
html[data-theme^="dark"] .tool-block-list li strong,
html[data-theme^="dark"] .tool-usecase-item strong,
html[data-theme^="dark"] .key-points li strong,
html[data-theme^="dark"] .tool-text-block .tool-block-title,
html[data-theme^="dark"] .content-text h3 { color: var(--text-white); }
html[data-theme^="dark"] .key-points li,
html[data-theme^="dark"] .content-text { background-color: var(--bg-white); border-color: var(--border); }

html[data-theme^="dark"] .tool-wrapper .upload-area { background-color: var(--bg-light); border-color: var(--border-dark); }
html[data-theme^="dark"] .tool-wrapper .upload-text,
html[data-theme^="dark"] .tool-wrapper .upload-inner .upload-text { color: var(--text); }
html[data-theme^="dark"] .tool-wrapper .upload-hint { color: var(--text-light); }

html[data-theme^="dark"] .tool-wrapper label:not(.btn):not(.upload-btn),
html[data-theme^="dark"] .tool-wrapper .option-group > label,
html[data-theme^="dark"] .tool-wrapper .checkbox-group > label,
html[data-theme^="dark"] .tool-wrapper .option-label,
html[data-theme^="dark"] .tool-wrapper .slider-label,
html[data-theme^="dark"] .tool-wrapper .options-panel h3,
html[data-theme^="dark"] .tool-wrapper .dps-group-label,
html[data-theme^="dark"] .tool-wrapper .dps-counter { color: var(--text); }
html[data-theme^="dark"] .tool-wrapper small,
html[data-theme^="dark"] .tool-wrapper .dps-hint,
html[data-theme^="dark"] .tool-wrapper .dp-ocr-sub { color: var(--text-light); }
html[data-theme^="dark"] .tool-wrapper .file-details,
html[data-theme^="dark"] .tool-wrapper .file-details span,
html[data-theme^="dark"] .tool-wrapper .file-details div,
html[data-theme^="dark"] .tool-wrapper .file-details strong,
html[data-theme^="dark"] .tool-wrapper .file-name,
html[data-theme^="dark"] .tool-wrapper .file-meta,
html[data-theme^="dark"] .tool-wrapper .file-size { color: var(--text); }

html[data-theme^="dark"] .tool-wrapper input:not([type="checkbox"]):not([type="radio"]):not([type="range"]):not([type="color"]):not([type="file"]),
html[data-theme^="dark"] .tool-wrapper select,
html[data-theme^="dark"] .tool-wrapper textarea {
    color: var(--text);
    background-color: var(--bg-light);
    border-color: var(--border-dark);
    color-scheme: dark;
}
html[data-theme^="dark"] .tool-wrapper input::placeholder,
html[data-theme^="dark"] .tool-wrapper textarea::placeholder { color: var(--text-light); opacity: 0.8; }
html[data-theme^="dark"] .tool-wrapper .btn-secondary,
html[data-theme^="dark"] .tool-wrapper .dps-small-btn,
html[data-theme^="dark"] .tool-wrapper .anl-tab {
    color: var(--text);
    background-color: var(--secondary);
    border-color: var(--border-dark);
}
html[data-theme^="dark"] .tool-wrapper .btn-success { color: #052e1f; }
html[data-theme^="dark"] .tool-wrapper .btn-primary { color: #fff; }

/* the PDF page in a preview must stand out from its background */
html[data-theme^="dark"] .tool-wrapper .preview-content,
html[data-theme^="dark"] .tool-wrapper .preview-area { background-color: #0b0e16; border-color: var(--border-dark); }
.tool-wrapper .page-preview,
.tool-wrapper .preview-canvas { box-shadow: 0 0 0 1px rgba(15, 23, 42, 0.3), 0 4px 14px rgba(15, 23, 42, 0.25); background-color: #fff; }

/* panels that older tool stylesheets paint white */
html[data-theme^="dark"] .tool-wrapper :is(.file-box, .tool-settings, .preview-section, .preview-wrapper, .options-panel, .options-section, .file-details, .result-section, .progress-container, .progress-area, .thumbnails-grid, .editor-layout, .tool-container, .office-result, .office-options, .settings-row, .split-preview, .page-selection-group, .dropdown-panel, .status-message):not(#dp) {
    background-color: var(--bg-white);
    border-color: var(--border);
    color: var(--text);
}
html[data-theme^="dark"] .tool-wrapper :is(.thumbnail-item, .office-thumb, .thumb-pagination button, .office-btn, .btn-toolbar, .progress-bar-track):not(#dp) {
    background-color: var(--bg-light);
    border-color: var(--border-dark);
    color: var(--text);
}
html[data-theme^="dark"] .tool-wrapper .upload-security-note { color: var(--text-light); }

/* tool-specific light panels (their own stylesheets paint them white) */
html[data-theme^="dark"] :is(.invoice-form, .nse-app, .txt4-options, .enhance-side, .pma-panel, .pma-preview, .md4-options, .dpi-settings, .h2p4-options, .rdc-find, .rdc-bottom, .info-note, .inv-panel, .inv-preview, .lp-player, .file-card, .drk-editor, .formatting-controls, .preview-summary, .blur-panel, .cpr-panel, .protect-form, .extraction-controls, .h2p4-pane-head, .md4-pane-head, .grayscale-selection-group, .radio-group, .checkbox-strip):not(#dp) {
    background-color: var(--bg-white);
    border-color: var(--border);
    color: var(--text);
}
html[data-theme^="dark"] :is(.radio-option, .page-number, .nse-pat, .blur-nav button, .anl-pbtn, .file-size):not(#dp) {
    background-color: var(--bg-light);
    border-color: var(--border-dark);
    color: var(--text);
}
html[data-theme^="dark"] :is(.invoice-form, .nse-app, .pma-panel, .enhance-side, .controls, .dpi-settings, .rdc-find, .inv-panel, .blur-panel, .drk-editor, .protect-form):not(#dp) :is(label, strong, span, small, h3, h4, legend) { color: var(--text); }
html[data-theme^="dark"] :is(.controls, .info-note .note-content):not(#dp) { background-color: transparent; color: var(--text); }

/* last stragglers found by the dark-mode audit */
html[data-theme^="dark"] :is(.totals, .total-row, .lp-reader, .lp-player, .nse-thumb, .range-value, .slider-value, .page-nav button, .office-options, .invoice-form, .quiz-panel):not(#dp) {
    background-color: var(--bg-white);
    border-color: var(--border);
    color: var(--text);
}
html[data-theme^="dark"] :is(.totals, .total-row, .invoice-form, .lp-reader, .lp-player, .nse-thumb, .office-options) :is(span, b, strong, h2, h3, label, p, small):not(#dp) { color: var(--text); }
html[data-theme^="dark"] :is(.vp-h, .tool-settings h3, .options-panel h3, .invoice-form h2):not(#dp) { color: var(--text-white); }