/*
 *  diff-checker.css
 *
 *  Loaded by:  webdev-tools/diff-checker.php  (after tool-input.css)
 *
 *  Purpose:    All styles for the advanced Diff Checker tool. The `dcx-`
 *              prefix is scoped exclusively to this tool so it can never
 *              collide with the Simple Diff Checker (`dc-` prefix) or any
 *              other page.
 *
 *  Load order: tool-input.css first (shared tool-page base), then this file.
 *              Any override of tool-input.css selectors is deliberate.
 */

/* ---------------------------------------------------------------
   Web-dev wide layout note
   --------------------------------------------------------------- */
#diffCheckerApp {
    width: 94%;
    margin: 0 auto;
}
/* ---------------------------------------------------------------
   Input area: two editors side by side
   --------------------------------------------------------------- */
.dcx-input-row {
    display: flex;
    gap: 16px;
    flex-wrap: wrap;
}

.dcx-col {
    flex: 1;
    min-width: 280px;
}

.dcx-file-tab {
    display: inline-block;
    color: #0d6efd;
    cursor: pointer;
    font-weight: 600;
}

.dcx-file-tab:hover { text-decoration: underline; }

.dcx-label {
    display: block;
    font-weight: 600;
    margin-top: 10px;
}

.dcx-drag-hint {
    font-weight: 400;
    color: #6c757d;
}

.dcx-editor {
    height: 300px;
    resize: vertical;
}

/* Drop zone wrappers (toolkit toggles .tool-drop-zone-active) */
.dcx-drop-zone {
    border: 2px dashed transparent;
    border-radius: 6px;
    padding: 8px;
    transition: border-color .15s;
}

.dcx-drop-zone.tool-drop-zone-active {
    border-color: #198754;
    background-color: #eef8f2;
}

.dcx-swap-row {
    margin-top: 6px;
}

/* ---------------------------------------------------------------
   Actions / settings
   --------------------------------------------------------------- */
.dcx-settings {
    text-align: center;
    margin: 8px 0 0;
}

.dcx-settings select {
    padding: 2px 4px;
}

.dcx-actions {
    text-align: center;
    margin: 12px 0;
}

.dcx-actions .btn {
    margin: 0 6px;
}

/* busy state on the Compare button */
.btn-compare.btn-busy {
    pointer-events: none;
    filter: brightness(0.87);
    animation: dcx-pulse 1s infinite;
}

@keyframes dcx-pulse {
    0% { filter: brightness(1); }
    50% { filter: brightness(0.82); }
    100% { filter: brightness(1); }
}

.dcx-stats {
    text-align: center;
    font-weight: 600;
    margin-bottom: 10px;
}

.dcx-stats .dcx-stat-del { color: #c0392b; }
.dcx-stats .dcx-stat-add { color: #168332; }

/* stats bar: badges + meta counts + navigation + result actions */
.dcx-result-bar {
    align-items: center;
    flex-wrap: wrap;
    gap: 10px;
    border: 1px solid #e2e2e2;
    border-radius: 6px;
    background-color: #fafafa;
    padding: 8px 12px;
    margin-bottom: 10px;
}

.dcx-bar-spacer {
    flex: 1;
}

.dcx-badge {
    display: inline-block;
    min-width: 34px;
    text-align: center;
    border-radius: 4px;
    padding: 1px 8px;
    font-weight: 700;
    color: #fff;
}

.dcx-badge-del { background-color: #c0392b; color: #fff; }
.dcx-badge-add { background-color: #2e9a44; color: #fff; margin-left: 6px; }

.dcx-stats-sep {
    color: #999;
    margin: 0 4px;
    font-weight: 400;
}

.dcx-nav-group .btn {
    margin: 0 2px;
}

.dcx-result-actions .btn {
    margin: 0 2px;
}

/* locked row when navigating with Prev/Next change */
.dcx-output tr.dcx-nav-focus {
    outline: 2px solid #0d6efd;
    outline-offset: -2px;
}

.dcx-legend {
    display: flex;
    justify-content: center;
    gap: 18px;
    flex-wrap: wrap;
    margin: 10px 0;
    font-size: 90%;
}

.dcx-swatch {
    display: inline-block;
    width: 14px;
    height: 14px;
    border: 1px solid #999;
    vertical-align: -2px;
    margin-right: 4px;
}

.dcx-swatch-add { background-color: #b6d7a8; }
.dcx-swatch-del { background-color: #ea9999; }

/* ---------------------------------------------------------------
   Print / PDF export (diff table only, colors preserved)
   --------------------------------------------------------------- */
@media print {
    body * {
        visibility: hidden;
    }

    #diffCheckerApp,
    #diffCheckerApp * {
        visibility: visible;
    }

    #diffCheckerApp {
        position: absolute;
        left: 0;
        top: 0;
        width: 100%;
    }

    /* nothing editable or interactive gets printed */
    #diffCheckerApp > p,
    #dcxTryExampleWrap,
    #dcxInput,
    .dcx-transforms,
    .dcx-ignore-wrap,
    .dcx-recents,
    .dcx-settings,
    .dcx-actions,
    .dcx-nav-group,
    .dcx-result-actions,
    #dcxOutputActions,
    #dcxLegend .dcx-text-muted,
    #dcxResultMessage {
        display: none !important;
    }

    .dcx-output,
    .dcx-output table,
    .dcx-output tr,
    .dcx-output td {
        page-break-inside: avoid;
    }

    .dcx-output tr,
    .dcx-output td.dcx-td-del,
    .dcx-output td.dcx-td-add,
    .dcx-output td.dcx-line,
    .dcx-marker-del,
    .dcx-marker-ins {
        -webkit-print-color-adjust: exact;
        print-color-adjust: exact;
    }
}

/* ---------------------------------------------------------------
   Merge arrows column (between the two sides)
   --------------------------------------------------------------- */
.dcx-output td.dcx-merge-row {
    width: 30px;
    text-align: center;
    padding: 2px 1px;
    vertical-align: middle;
    white-space: nowrap;
    background-color: #f1f1f1;
}

.dcx-output button.dcx-merge {
    display: block;
    width: 22px;
    margin: 1px auto;
    padding: 1px 3px;
    line-height: 1.2;
    font-size: 11px;
    color: #0d6efd;
    background-color: #f8f9fa;
    border: 1px solid #c9d6e8;
    border-radius: 4px;
    cursor: pointer;
}

.dcx-output button.dcx-merge:hover {
    background-color: #0d6efd;
    color: #fff;
    border-color: #0d6efd;
}

.dcx-output table.dcx-table-unified td.dcx-merge-row {
    width: 30px;
}

/* ---------------------------------------------------------------
   Transform utilities
   --------------------------------------------------------------- */
.dcx-transforms {
    display: flex;
    justify-content: center;
    gap: 40px;
    flex-wrap: wrap;
    margin: 4px 0 8px;
}

.dcx-transform-col {
    text-align: center;
}

.dcx-transform-title {
    margin: 2px 0 4px;
    font-size: 85%;
    color: #6c757d;
    font-weight: 600;
}

.dcx-transform-btn {
    display: inline-block;
    margin: 0 3px;
    padding: 2px 8px;
    font-size: 82%;
    border: 1px solid #c9d6e8;
    border-radius: 4px;
    background-color: #f8f9fa;
    color: #0d6efd;
    cursor: pointer;
}

.dcx-transform-btn:hover { background-color: #eef4fc; }

/* ---------------------------------------------------------------
   Ignore rules panel
   --------------------------------------------------------------- */
.dcx-ignore-wrap {
    margin: 4px 0 10px;
}

.dcx-ignore-toggle,
#dcxIgnoreToggle {
    color: #0d6efd;
    text-decoration: none;
    font-weight: 600;
}

#dcxIgnorePanel {
    max-width: 560px;
    margin: 8px auto 0;
    padding: 10px 12px;
    border: 1px solid #dfe4ea;
    border-radius: 6px;
    background-color: #fafafa;
    text-align: left;
}

.dcx-ignore-checks label {
    display: inline-block;
    margin-right: 14px;
    white-space: nowrap;
    font-size: 90%;
}

.dcx-rules-head {
    display: block;
    margin: 8px 0 4px;
    font-size: 90%;
    font-weight: 600;
}

.dcx-rules-input {
    width: 100%;
    font-family: "SFMono-Regular", Consolas, "Liberation Mono", Menlo, monospace;
    font-size: 12px;
    resize: vertical;
}

/* ---------------------------------------------------------------
   Recents (browser-local comparison list)
   --------------------------------------------------------------- */
.dcx-recents {
    text-align: center;
    margin: 2px 0 8px;
}

#dcxRecentsToggle {
    color: #6c757d;
    text-decoration: none;
    font-size: 90%;
    font-weight: 600;
}

#dcxRecentsPanel {
    max-width: 640px;
    margin: 6px auto 0;
    border: 1px solid #dfe4ea;
    border-radius: 6px;
    background-color: #fdfdfd;
    padding: 6px 10px;
    text-align: left;
}

.dcx-recents-empty {
    text-align: center;
    color: #8b9199;
    margin: 4px 0;
    font-style: italic;
}

.dcx-recent-item {
    border-bottom: 1px solid #f0f0f0;
    padding: 6px 2px;
    font-size: 88%;
}

.dcx-recent-item:last-child { border-bottom: none; }

.dcx-recent-when {
    color: #8b9199;
    font-size: 82%;
    margin-right: 8px;
}

.dcx-recent-title {
    font-weight: 600;
    margin-top: 2px;
    font-family: "SFMono-Regular", Consolas, "Liberation Mono", Menlo, monospace;
    font-size: 88%;
    word-break: break-word;
}

button.dcx-recent-restore {
    margin-right: 8px;
    padding: 0 8px;
    font-size: 78%;
}

button.dcx-recent-delete {
    border: none;
    background: none;
    color: #c0392b;
    cursor: pointer;
    font-size: 90%;
    padding: 0 4px;
}

/* ---------------------------------------------------------------
   Diff table
   --------------------------------------------------------------- */
.dcx-output table {
    border-collapse: collapse;
    width: 100%;
    font-family: "SFMono-Regular", Consolas, "Liberation Mono", Menlo, monospace;
    font-size: 13px;
    table-layout: fixed;
}

.dcx-output { margin-top: 10px; }

.dcx-output td.dcx-line-num {
    width: 50px;
    text-align: right;
    vertical-align: top;
    padding: 2px 6px;
    color: #777;
    background-color: #fafafa;
    border-right: 1px solid #ddd;
    user-select: none;
}

.dcx-output td.dcx-line {
    padding: 2px 6px;
    vertical-align: top;
    white-space: pre-wrap;
    word-wrap: break-word;
    overflow-wrap: break-word;
}

.dcx-output tr.dcx-add td.dcx-line { background-color: #b6d7a8; }
.dcx-output tr.dcx-del td.dcx-line { background-color: #ea9999; }

/* Per-cell change coloring (side-by-side paired replace rows) */
.dcx-output td.dcx-td-del { background-color: #ea9999; }
.dcx-output td.dcx-td-add { background-color: #b6d7a8; }

.dcx-output td.dcx-empty {
    background-color: #f1f1f1;
    color: #999;
}

/* ---------------------------------------------------------------
   Unified view
   --------------------------------------------------------------- */
.dcx-output table.dcx-table-unified td.dcx-line-num {
    width: 44px;
}

.dcx-output td.dcx-marker {
    width: 16px;
    text-align: center;
    padding: 2px 2px;
    font-weight: 700;
    color: #666;
}

.dcx-marker-del { color: #c0392b; }
.dcx-marker-ins { color: #168332; }

.dcx-unified-del td.dcx-line { background-color: #ea9999; }
.dcx-unified-ins td.dcx-line { background-color: #b6d7a8; }

/* ---------------------------------------------------------------
   Collapse ("hide unchanged lines")
   --------------------------------------------------------------- */
.dcx-output tr.dcx-collapse-row td {
    background-color: #f1f1f1;
    border-top: 1px solid #ddd;
    border-bottom: 1px solid #ddd;
    color: #666;
    text-align: center;
    font-style: italic;
    padding: 4px;
    white-space: normal;
}

.dcx-collapse-text {
    color: #666;
}

.dcx-expand {
    color: #0d6efd;
    text-decoration: none;
    font-style: normal;
    font-weight: 600;
    padding: 0 6px;
}

.dcx-expand:hover {
    text-decoration: underline;
}

/* ---------------------------------------------------------------
   Syntax tokens (prism.min.css defines .token colors; scope-friendly
   tweaks here keep them readable over the red/green diff backgrounds)
   --------------------------------------------------------------- */
.dcx-output del .token,
.dcx-output ins .token { text-decoration: inherit; }

.dcx-output .token.comment,
.dcx-output .token.prolog,
.dcx-output .token.cdata { color: #6a737d; }

.dcx-output .token.string,
.dcx-output .token.char { color: #11429c; }

.dcx-output .token.keyword,
.dcx-output .token.boolean,
.dcx-output .token.null { color: #8a1a00; }

.dcx-output .token.number { color: #134b0d; }

/* ---------------------------------------------------------------
   Inner-line marks inside changed lines
   --------------------------------------------------------------- */
.dcx-output ins {
    text-decoration: none;
    background-color: #a9e29c;
    border-bottom: 1px solid #4c9b3f;
}

.dcx-output del {
    text-decoration: line-through;
    background-color: #f5a08a;
}

.dcx-output del.dcx-word-del {
    text-decoration: line-through;
}

/* ---------------------------------------------------------------
   Responsive
   --------------------------------------------------------------- */
@media (max-width: 768px) {
    .dcx-output table {
        font-size: 11px;
    }
}