/* ============================================================
   Small additions to the site's .st-* simple-tools design system
   (wwwroot/css/simple-tools.css), for the Z cluster tools whose
   shape does not fit a few fields and one answer: the virtual
   background resizer, the z-index generator and the ZIP content
   viewer.

   EVERYTHING HERE IS SCOPED under a .zt- prefix, so loading this
   file changes no page that has not opted into it.
   ============================================================ */

.zt-drop {
    border: 2px dashed var(--border, #d9dde8);
    border-radius: 12px;
    padding: 28px 16px;
    text-align: center;
    color: var(--ink-3, #5f677d);
    cursor: pointer;
    background: var(--surface-2, #f7f8fc);
}

.zt-drop.is-dragover { border-color: #5b8def; background: rgba(91, 141, 239, .08); }
.zt-drop input[type="file"] { display: none; }

.zt-canvas-wrap {
    display: flex;
    justify-content: center;
    margin-top: 14px;
    overflow-x: auto;
}

.zt-canvas-wrap canvas {
    max-width: 100%;
    border-radius: 10px;
    border: 1px solid var(--border, #e3e6ee);
}

/* ---- css z-index generator ---- */

.zt-layer-row {
    display: grid;
    grid-template-columns: 1fr 90px 90px 90px 130px 34px;
    gap: 8px;
    align-items: center;
    margin-bottom: 8px;
}

.zt-layer-row input, .zt-layer-row select {
    padding: 7px 8px;
    font-size: 13.5px;
    border: 1px solid var(--border, #d9dde8);
    border-radius: 8px;
    width: 100%;
}

.zt-layer-row button {
    border: 1px solid var(--border, #d9dde8);
    background: #fff;
    border-radius: 8px;
    height: 32px;
    cursor: pointer;
    color: var(--ink-3, #5f677d);
}

.zt-layer-row button:hover { border-color: #e2a2a2; color: #b3261e; }

.zt-preview {
    position: relative;
    height: 260px;
    margin-top: 14px;
    border-radius: 12px;
    border: 1px solid var(--border, #e3e6ee);
    background:
        linear-gradient(45deg, #eee 25%, transparent 25%),
        linear-gradient(-45deg, #eee 25%, transparent 25%),
        linear-gradient(45deg, transparent 75%, #eee 75%),
        linear-gradient(-45deg, transparent 75%, #eee 75%);
    background-size: 20px 20px;
    background-position: 0 0, 0 10px, 10px -10px, -10px 0px;
    overflow: hidden;
}

.zt-preview-box {
    position: absolute;
    width: 120px;
    height: 90px;
    border-radius: 8px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #fff;
    font-weight: 700;
    font-size: 13px;
    box-shadow: 0 4px 10px rgba(0, 0, 0, .18);
}

.zt-css-out {
    margin-top: 12px;
    padding: 12px;
    border-radius: 10px;
    background: var(--surface-2, #f7f8fc);
    border: 1px solid var(--border, #e3e6ee);
    font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
    font-size: 13px;
    white-space: pre-wrap;
    word-break: break-word;
}

/* ---- zip archive content viewer ---- */

.zt-file-table { width: 100%; border-collapse: collapse; font-size: 13.5px; margin-top: 14px; }
.zt-file-table th, .zt-file-table td { padding: 7px 10px; text-align: left; border-bottom: 1px solid var(--border-soft, #eef0f5); }
.zt-file-table th { background: var(--surface-2, #f7f8fc); font-weight: 700; color: var(--ink-2, #454d63); }
.zt-file-table td.zt-num { text-align: right; font-variant-numeric: tabular-nums; }
.zt-file-icon { opacity: .6; margin-right: 6px; }

.theme-dark .zt-drop { background: #171a22; border-color: #2b3040; }
.theme-dark .zt-layer-row input, .theme-dark .zt-layer-row select, .theme-dark .zt-layer-row button { background: #0f1218; border-color: #2b3040; color: #e8eaf2; }
.theme-dark .zt-css-out { background: #12151c; border-color: #2b3040; }
.theme-dark .zt-file-table th { background: #12151c; color: #c9cede; }