/* App-specific styling layered on top of Bootstrap + mockmotor-imperial.css.
   Only what those two don't already cover: the side file lists, the impact-tree view,
   and the XML payload diff viewer. */

html, body {
    height: 100%;
}

body {
    display: flex;
    flex-direction: column;
}

body > .container {
    flex: 1 0 auto;
}

body > footer {
    flex-shrink: 0;
}

.status {
    font-size: 0.7em;
    margin-top: 6px;
    min-height: 1em;
}

.hidden {
    display: none !important;
}

input[type="file"].form-control {
    width: 100%;
    max-width: none;
}

#old-clear-btn,
#nue-clear-btn {
    flex-shrink: 0;
    white-space: nowrap;
}

.btn:disabled,
.btn.disabled {
    background-color: #cbd5e1;
    border-color: #cbd5e1;
    color: #fff;
    opacity: 1;
}

/* mockmotor's colored badges don't set text color for the darker backgrounds. mockmotor-imperial.css
   has no "darkorange" variant at all - defined below for the "Not breaking" badge specifically,
   distinct from the plain "orange" used for "Maybe breaking". */
.badge.element-bg-color-darkred,
.badge.element-bg-color-red,
.badge.element-bg-color-orange,
.badge.element-bg-color-darkorange,
.badge.element-bg-color-green,
.badge.element-bg-color-blue,
.badge.element-bg-color-seagreen {
    color: #fff;
}

.badge.element-bg-color-darkorange {
    background-color: #b45309;
}

.impact-badge {
    font-size: 0.75em;
    border-radius: var(--bs-border-radius);
}

/* ---- Enumeration value diff (added/removed), sorted case-insensitively - see app.js
   renderEnumerationDiff ---- */

.enum-added {
    color: #0b3d2a;
    font-weight: 700;
    background-color: rgba(27, 141, 77, 0.22);
    padding: 0 3px;
    border-radius: 2px;
}

.enum-removed {
    color: #7f0814;
    font-weight: 600;
    text-decoration: line-through;
    background-color: rgba(175, 11, 28, 0.18);
    padding: 0 3px;
    border-radius: 2px;
}

/* ---- Side file lists ---- */

.fetch-row {
    display: flex;
    gap: 6px;
    flex-wrap: wrap;
    align-items: center;
    margin: 8px 0;
}

.fetch-row input[type="text"],
.fetch-row input[type="password"] {
    flex: 1 1 160px;
}

.fetch-row select {
    flex: 0 0 auto;
    width: auto;
}

.file-list {
    list-style: none;
    margin: 8px 0 0 0;
    padding: 0;
    font-size: 0.85em;
}

.file-list li {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 6px;
    padding: 3px 0;
    border-bottom: 1px solid #eee;
}

.file-list .file-name {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.file-list .file-name-wsdl {
    font-weight: bold;
}

/* Used-XSD (or imported-WSDL) rows nested under their owning WSDL row. */
.file-list li.used-file-row {
    padding-left: 18px;
    border-bottom: 1px dotted #eee;
}

.file-list li.used-file-row .file-name {
    font-weight: normal;
    color: #6b7280;
}

.file-list .file-remove {
    flex-shrink: 0;
    width: 22px;
    height: 22px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background-color: #af0b1c;
    border: none;
    border-radius: 3px;
    color: #fff;
    cursor: pointer;
    font-size: 1em;
    font-weight: bold;
    line-height: 1;
    padding: 0;
}

.file-list .file-remove:hover {
    background-color: #df0e24;
}

.errors {
    margin: 6px 0 0 0;
    padding-left: 18px;
    font-size: 0.8em;
    color: #af0b1c;
}

/* ---- Matched pairs table ---- */

#matches-tbody tr {
    cursor: pointer;
}

#matches-tbody tr.active-match {
    background-color: rgba(175, 11, 28, 0.08);
}

/* ---- Ports / bindings / operations tree ---- */

.overview-tree ul {
    list-style: none;
    margin: 0;
    padding-left: 18px;
}

.overview-tree > ul {
    padding-left: 0;
}

.tree-row {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 3px 0;
}

.tree-row .tree-label {
    font-family: "SFMono-Regular", Consolas, "Liberation Mono", Menlo, monospace;
    font-size: 0.85em;
}

.tree-row.operation-row {
    cursor: pointer;
}

.tree-row.operation-row:hover .tree-label {
    color: #af0b1c;
    text-decoration: underline;
}

.tree-row.operation-row.active-operation {
    background-color: rgba(175, 11, 28, 0.08);
}

/* ---- Change-detail tree (recursive) ---- */

.change-tree ul {
    list-style: none;
    margin: 0;
    padding-left: 16px;
}

.change-tree > ul {
    padding-left: 0;
}

.change-node {
    padding: 2px 0;
    font-family: "SFMono-Regular", Consolas, "Liberation Mono", Menlo, monospace;
    font-size: 0.8em;
}

.change-node .change-values {
    color: #3a3a3a;
}

.change-node .change-old {
    color: #7f0814;
    font-weight: 600;
    text-decoration: line-through;
    background-color: rgba(175, 11, 28, 0.18);
    padding: 0 3px;
    border-radius: 2px;
}

.change-node .change-new {
    color: #0b3d2a;
    font-weight: 700;
    background-color: rgba(27, 141, 77, 0.22);
    padding: 0 3px;
    border-radius: 2px;
}

.change-node .change-explanation {
    display: block;
    margin: 2px 0 2px 0;
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
    font-size: 1.05em;
    color: #6b7280;
}

.change-node.has-change > .change-values {
    font-weight: bold;
}

/* "[0,unlimited]"-style occurrence range shown next to an ELEMENT's name when it isn't the
   default required-single [1,1] - see app.js elementOccursSuffix. */
.occurs-count {
    color: #6b7280;
    font-weight: normal;
}

/* ---- Payload diff viewer (same visual language as SwaggerValidator's JSON viewer) ---- */

.payload-tabs .btn {
    font-size: 0.8em;
}

.payload-viewer {
    font-family: "SFMono-Regular", Consolas, "Liberation Mono", Menlo, monospace;
    font-size: 0.65em;
    line-height: 1.55;
    background-color: #fafad2;
    border-left: solid 4px #af0b1c;
    max-height: 480px;
    overflow: auto;
}

.payload-line {
    display: flex;
    white-space: pre;
    padding: 0 8px;
}

.payload-line:hover {
    background-color: rgba(0, 0, 0, 0.04);
}

.payload-line .line-no {
    color: #9aa4b2;
    text-align: right;
    width: 60px;
    flex-shrink: 0;
    user-select: none;
    margin-right: 12px;
}

.payload-line .line-content {
    flex: 1;
}

.payload-line.line-insert {
    background-color: rgba(27, 77, 62, 0.14);
    border-left: 3px solid #1b4d3e;
}

.payload-line.line-delete {
    background-color: rgba(175, 11, 28, 0.16);
    border-left: 3px solid #af0b1c;
}

/* The "..." row shown between two non-adjacent kept ranges in Only Changes/Only Breaking mode. */
.payload-line-gap {
    justify-content: center;
    color: #9aa4b2;
    user-select: none;
    letter-spacing: 2px;
}

.payload-line.line-change {
    background-color: rgba(238, 118, 0, 0.14);
    border-left: 3px solid #ee7600;
}

.payload-line del.diff-old {
    background-color: rgba(175, 11, 28, 0.25);
    color: #7f0814;
    text-decoration: line-through;
}

.payload-line ins.diff-new {
    background-color: rgba(27, 77, 62, 0.2);
    color: #1b4d3e;
    text-decoration: none;
}

.thanks-stripe {
    flex-shrink: 0;
    background-color: #f9f9f9;
    border-top: 1px solid #e2e2e2;
    padding: 10px 16px;
    text-align: center;
}

.thanks-title {
    font-size: 0.7em;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: #6b7280;
    margin-bottom: 4px;
}

.thanks-links {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 4px 14px;
    font-size: 0.75em;
}

.thanks-links a {
    color: #3a3a3a;
    text-decoration: none;
}

.thanks-links a:hover {
    color: #af0b1c;
    text-decoration: underline;
}

/* ---- "Humming along..." busy overlay - shown while a side change (upload/remove/fetch/clear)
   is being re-matched and re-diffed server-side ---- */

.busy-overlay {
    position: fixed;
    inset: 0;
    background-color: rgba(20, 20, 20, 0.35);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 1050;
}

.busy-box {
    background-color: #fff;
    border-radius: 8px;
    padding: 24px 32px;
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.25);
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 12px;
}

.busy-spinner {
    width: 32px;
    height: 32px;
    border: 3px solid #e2e2e2;
    border-top-color: #af0b1c;
    border-radius: 50%;
    animation: busy-spin 0.8s linear infinite;
}

.busy-text {
    font-size: 0.9em;
    color: #3a3a3a;
}

@keyframes busy-spin {
    to { transform: rotate(360deg); }
}