/* ══════════════════════════════════════════════════════════════════
   Deploy module — standalone FTP-client interface
   ══════════════════════════════════════════════════════════════════ */
:root {
    --ftp-bar:        #1f2733;
    --ftp-bar-2:      #2a3543;
    --ftp-accent:     #3b82f6;
    --ftp-bg:         #f4f6f9;
    --ftp-pane:       #ffffff;
    --ftp-border:     #dfe3ea;
    --ftp-head:       #eef1f6;
    --ftp-row-hover:  #eaf2ff;
    --ftp-row-sel:    #d8e9ff;
    --ftp-text:       #1f2733;
    --ftp-muted:      #6b7684;
    --ftp-folder:     #f4b740;
    --ftp-file:       #8b97a6;
    --ftp-ok:         #16a34a;
    --ftp-err:        #dc2626;
    --ftp-mono:       ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, monospace;
}

.main-area .right-workspace { background: var(--ftp-bg); }

.ftp-app {
    display: flex;
    flex-direction: column;
    height: calc(100vh - 50px);
    background: var(--ftp-bg);
    color: var(--ftp-text);
    overflow: hidden;
    font-size: 0.85rem;
}

/* ── Connection bar ─────────────────────────────────────────────── */
.ftp-connbar {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding: 0.5rem 0.85rem;
    background: linear-gradient(180deg, var(--ftp-bar-2), var(--ftp-bar));
    color: #e8edf3;
    box-shadow: 0 1px 0 rgba(0,0,0,.25);
}
.cb-brand { font-size: 1.3rem; color: #7fb0ff; }
.cb-field { display: flex; flex-direction: column; min-width: 240px; }
.cb-field label { font-size: 0.62rem; text-transform: uppercase; letter-spacing: .06em; color: #9fb0c4; margin-bottom: 1px; }
.cb-select {
    background: #10151d; color: #eaf0f7; border: 1px solid #3a4757;
    border-radius: 6px; padding: 0.28rem 0.5rem; font-size: 0.85rem; font-weight: 600;
}
.cb-select:focus { outline: none; border-color: var(--ftp-accent); box-shadow: 0 0 0 2px rgba(59,130,246,.35); }
.cb-status { display: flex; align-items: center; gap: 0.4rem; font-size: 0.8rem; color: #c4d0dd; }
.cb-status .dot { width: 9px; height: 9px; border-radius: 50%; display: inline-block; }
.dot-off { background: #6b7684; }
.dot-on  { background: #22c55e; box-shadow: 0 0 8px #22c55e; }
.dot-busy{ background: #f59e0b; animation: pulse 1s infinite; }
@keyframes pulse { 0%,100%{opacity:1} 50%{opacity:.35} }
.cb-actions { margin-left: auto; display: flex; gap: 0.35rem; }
.cb-actions .btn { --bs-btn-border-color: #44536604; display: inline-flex; align-items: center; gap: 0.3rem; font-size: 0.78rem; }
.cb-actions .btn-outline-light { color: #dce4ee; border-color: #3f4d5e; }
.cb-actions .btn-outline-light:hover { background: #35424f; color: #fff; }
.cb-actions .btn span { line-height: 1; }

/* ── Upload toolbar ─────────────────────────────────────────────── */
.ftp-uploadbar {
    display: flex; align-items: center; gap: 1rem;
    padding: 0.5rem 0.85rem;
    background: var(--ftp-pane);
    border-bottom: 1px solid var(--ftp-border);
    flex-wrap: wrap;
}
.ub-group { display: flex; align-items: center; gap: 0.45rem; }
.ub-label { font-size: 0.72rem; font-weight: 700; text-transform: uppercase; letter-spacing: .04em; color: var(--ftp-muted); }
.ub-select { border: 1px solid var(--ftp-border); border-radius: 6px; padding: 0.22rem 0.4rem; font-size: 0.8rem; background: #fff; color: var(--ftp-text); }
.ub-spacer { flex: 1; }
.btn-upload { font-weight: 600; box-shadow: 0 2px 6px rgba(59,130,246,.35); }

.segmented { display: inline-flex; border: 1px solid var(--ftp-border); border-radius: 7px; overflow: hidden; background: #fff; }
.segmented .seg {
    border: none; background: transparent; padding: 0.28rem 0.7rem; font-size: 0.78rem;
    color: var(--ftp-muted); cursor: pointer; border-right: 1px solid var(--ftp-border);
}
.segmented .seg:last-child { border-right: none; }
.segmented .seg.active { background: var(--ftp-accent); color: #fff; font-weight: 600; }
.segmented .seg:not(.active):hover { background: var(--ftp-head); color: var(--ftp-text); }

/* ── Dual-pane explorer ─────────────────────────────────────────── */
.ftp-panes { flex: 1; display: flex; min-height: 0; background: var(--ftp-bg); }
.pane {
    flex: 1; display: flex; flex-direction: column; min-width: 0; min-height: 0;
    background: var(--ftp-pane); margin: 0.55rem;
    border: 1px solid var(--ftp-border); border-radius: 10px; overflow: hidden;
    box-shadow: 0 1px 2px rgba(16,24,40,.04);
}
.pane-divider { display: flex; align-items: center; color: var(--ftp-muted); font-size: 1.1rem; }
.pane-head {
    display: flex; align-items: center; gap: 0.45rem;
    padding: 0.5rem 0.7rem; background: var(--ftp-head);
    border-bottom: 1px solid var(--ftp-border); font-size: 0.82rem;
}
.pane-title { font-weight: 700; }
.pane-sub { color: var(--ftp-muted); font-size: 0.72rem; font-family: var(--ftp-mono); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: 220px; }
.pane-btn {
    border: 1px solid transparent; background: transparent; color: var(--ftp-muted);
    width: 26px; height: 26px; border-radius: 6px; cursor: pointer; font-size: 0.85rem;
}
.pane-btn:hover { background: #fff; border-color: var(--ftp-border); color: var(--ftp-accent); }

.crumbs {
    display: flex; align-items: center; gap: 0.15rem; flex-wrap: wrap;
    padding: 0.32rem 0.6rem; border-bottom: 1px solid var(--ftp-border);
    font-family: var(--ftp-mono); font-size: 0.74rem; background: #fbfcfe;
}
.crumbs .crumb { color: var(--ftp-accent); cursor: pointer; padding: 1px 3px; border-radius: 4px; }
.crumbs .crumb:hover { background: var(--ftp-row-hover); }
.crumbs .crumb.static { color: var(--ftp-muted); cursor: default; }
.crumbs .sep { color: var(--ftp-muted); }

.filelist { flex: 1; overflow-y: auto; min-height: 0; }
.frow {
    display: grid; grid-template-columns: 1fr auto auto; align-items: center; gap: 0.5rem;
    padding: 0.25rem 0.6rem; cursor: default; border-bottom: 1px solid #f4f6f9;
    font-size: 0.8rem; position: relative;
}
.frow:hover { background: var(--ftp-row-hover); }
.frow.selected { background: var(--ftp-row-sel); }
.frow .fname { display: flex; align-items: center; gap: 0.45rem; overflow: hidden; }
.frow .fname .fi { flex: 0 0 auto; font-size: 0.95rem; }
.frow .fname .fi-dir { color: var(--ftp-folder); }
.frow .fname .fi-file { color: var(--ftp-file); }
.frow .fname .flabel { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.frow.is-dir .flabel { cursor: pointer; font-weight: 500; }
.frow.is-dir .flabel:hover { text-decoration: underline; color: var(--ftp-accent); }
.frow .fsize { font-family: var(--ftp-mono); font-size: 0.72rem; color: var(--ftp-muted); white-space: nowrap; }
.frow .fmeta { font-size: 0.7rem; color: var(--ftp-muted); white-space: nowrap; }
.frow .factions { display: none; position: absolute; right: 6px; gap: 2px; background: linear-gradient(90deg, transparent, var(--ftp-row-hover) 22%); padding-left: 24px; }
.frow:hover .factions { display: flex; }
.frow .factions button { border: none; background: transparent; color: var(--ftp-muted); width: 24px; height: 22px; border-radius: 5px; cursor: pointer; }
.frow .factions button:hover { background: #fff; color: var(--ftp-accent); }
.frow .factions button.del:hover { color: var(--ftp-err); }

.pane-empty { display: flex; flex-direction: column; align-items: center; justify-content: center; height: 100%; color: var(--ftp-muted); text-align: center; padding: 1.5rem; }
.pane-empty i { font-size: 2rem; opacity: .5; margin-bottom: 0.5rem; }
.pane-empty p { font-weight: 600; margin: 0 0 0.15rem; }
.pane-empty span { font-size: 0.78rem; max-width: 260px; }
.filelist .list-loading { text-align: center; color: var(--ftp-muted); padding: 1.4rem; font-size: 0.8rem; }

/* ── Bottom dock ────────────────────────────────────────────────── */
.ftp-dock { height: 210px; display: flex; flex-direction: column; background: var(--ftp-pane); border-top: 1px solid var(--ftp-border); }
.dock-tabs { display: flex; align-items: center; gap: 0.15rem; padding: 0.25rem 0.5rem 0; border-bottom: 1px solid var(--ftp-border); }
.dock-tab {
    border: none; background: transparent; padding: 0.4rem 0.75rem; font-size: 0.78rem; color: var(--ftp-muted);
    border-bottom: 2px solid transparent; cursor: pointer;
}
.dock-tab.active { color: var(--ftp-text); font-weight: 600; border-bottom-color: var(--ftp-accent); }
.dock-tab:hover:not(.active) { color: var(--ftp-text); }
.tab-badge { background: var(--ftp-accent); color: #fff; border-radius: 10px; padding: 0 6px; font-size: 0.65rem; }
.dock-stats { font-size: 0.74rem; color: var(--ftp-muted); padding-right: 0.4rem; display: flex; gap: 0.9rem; }
.dock-stats b { color: var(--ftp-text); }
.dock-progress { height: 4px; border-radius: 0; }
.dock-body { flex: 1; overflow: hidden; position: relative; }
.dock-panel { display: none; height: 100%; overflow-y: auto; padding: 0.5rem 0.7rem; }
.dock-panel.active { display: block; }
.dock-hint { color: var(--ftp-muted); font-size: 0.8rem; text-align: center; padding: 1.2rem; }

.transfer-log { font-family: var(--ftp-mono); font-size: 0.74rem; line-height: 1.55; }
.log-line { display: flex; gap: 0.4rem; padding: 0.05rem 0.2rem; border-radius: 4px; }
.log-line .li { flex: 0 0 auto; }
.log-line .lp { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.log-line .ls { margin-left: auto; color: #adb5bd; }
.log-file  { color: var(--ftp-ok); }
.log-error { color: var(--ftp-err); background: #fef2f2; }
.log-info  { color: var(--ftp-accent); }
.log-plan  { color: var(--ftp-muted); }

.hist-table { width: 100%; font-size: 0.76rem; border-collapse: collapse; }
.hist-table td { padding: 0.3rem 0.5rem; border-bottom: 1px solid #f1f3f7; white-space: nowrap; }
.hist-table .h-badge { font-size: 0.66rem; font-weight: 700; padding: 1px 7px; border-radius: 10px; }
.h-success { background: #dcfce7; color: #15803d; }
.h-partial { background: #fef9c3; color: #a16207; }
.h-failed  { background: #fee2e2; color: #b91c1c; }
.hist-table .h-host { font-family: var(--ftp-mono); color: var(--ftp-muted); }

/* ── Diagnostics report ─────────────────────────────────────────── */
.diag-report { font-size: 0.8rem; }
.diag-summary { padding: 0.5rem 0.7rem; border-radius: 7px; margin-bottom: 0.5rem; font-weight: 500; }
.diag-summary.ok { background: #dcfce7; color: #15803d; }
.diag-summary.bad { background: #fee2e2; color: #b91c1c; }
.diag-stage { display: flex; align-items: flex-start; gap: 0.5rem; padding: 0.32rem 0.5rem; border-bottom: 1px solid #f1f3f7; }
.diag-stage .ds-ic { flex: 0 0 auto; margin-top: 1px; }
.diag-stage .ds-ic.ok { color: var(--ftp-ok); }
.diag-stage .ds-ic.bad { color: var(--ftp-err); }
.diag-stage .ds-name { font-weight: 600; min-width: 160px; }
.diag-stage .ds-detail { color: var(--ftp-muted); font-size: 0.76rem; }
.modal-diag .diag-stage { font-size: 0.76rem; }

/* ── Status bar ─────────────────────────────────────────────────── */
.ftp-statusbar {
    display: flex; align-items: center; padding: 0.25rem 0.8rem;
    background: var(--ftp-bar); color: #c4d0dd; font-size: 0.74rem;
    font-family: var(--ftp-mono);
}

/* ── Toasts ─────────────────────────────────────────────────────── */
#actionFeedback { position: fixed; bottom: 1rem; right: 1rem; z-index: 9999; max-width: 440px; }

/* ── Busy ───────────────────────────────────────────────────────── */
.ftp-app.busy .btn-upload, .ftp-app.busy #btnDryRun { pointer-events: none; opacity: .65; }

/* ── Responsive ─────────────────────────────────────────────────── */
@media (max-width: 991.98px) {
    .right-workspace { width: 100% !important; }
    .ftp-panes { flex-direction: column; }
    .pane-divider { transform: rotate(90deg); padding: 0.2rem 0; }
    .cb-field { min-width: 150px; }
    .cb-actions .btn span { display: none; }
}

/* ══════════════════════════════════════════════════════════════════
   Polish pass — responsiveness, motion, refinement
   ══════════════════════════════════════════════════════════════════ */

/* Smooth, consistent transitions everywhere interactive */
.cb-actions .btn, .pane-btn, .seg, .dock-tab, .frow, .btn-upload,
.ub-select, .cb-select, #dbConnectionSelect { transition: background .15s ease, color .15s ease, border-color .15s ease, box-shadow .15s ease, transform .12s ease; }

/* Bars wrap gracefully on narrow widths instead of overflowing */
.ftp-connbar, .ftp-uploadbar { flex-wrap: wrap; row-gap: 0.45rem; }
.cb-field { flex: 1 1 220px; }
.cb-actions { flex-wrap: wrap; justify-content: flex-end; }

/* Connect button gets a confident gradient */
#btnConnect.btn-success {
    background: linear-gradient(180deg, #22c55e, #16a34a); border: none;
    box-shadow: 0 1px 3px rgba(22,163,74,.5);
}
#btnConnect.btn-success:hover { filter: brightness(1.06); }

/* Primary upload button — gradient + lift on hover */
.btn-upload {
    background: linear-gradient(180deg, #4f8bff, #2f6fe4); border: none;
}
.btn-upload:hover:not(:disabled) { filter: brightness(1.05); transform: translateY(-1px); box-shadow: 0 4px 12px rgba(59,130,246,.45); }
.btn-upload:active { transform: translateY(0); }

/* Segmented control — active gets a subtle inner glow */
.segmented .seg.active { box-shadow: inset 0 0 0 1px rgba(255,255,255,.25); }

/* File rows: crisper hover, folder cursor affordance */
.frow { transition: background .12s ease; }
.frow.is-dir { cursor: pointer; }
.frow.is-dir:hover .fi-dir { transform: scale(1.08); }
.frow .fi { transition: transform .12s ease; }

/* Sticky headers so context stays visible while scrolling long listings */
.pane-head, .crumbs { position: sticky; z-index: 2; }
.pane-head { top: 0; }
.crumbs { top: 41px; }

/* Refined, unobtrusive scrollbars */
.filelist, .dock-panel, .transfer-log { scrollbar-width: thin; scrollbar-color: rgba(140,150,165,.5) transparent; }
.filelist::-webkit-scrollbar, .dock-panel::-webkit-scrollbar, .transfer-log::-webkit-scrollbar { width: 9px; height: 9px; }
.filelist::-webkit-scrollbar-thumb, .dock-panel::-webkit-scrollbar-thumb, .transfer-log::-webkit-scrollbar-thumb {
    background: rgba(140,150,165,.45); border-radius: 6px; border: 2px solid transparent; background-clip: content-box;
}
.filelist::-webkit-scrollbar-thumb:hover { background: rgba(140,150,165,.7); background-clip: content-box; }

/* Accessible focus rings */
.cb-select:focus-visible, .ub-select:focus-visible, .pane-btn:focus-visible,
.seg:focus-visible, .dock-tab:focus-visible, .btn:focus-visible {
    outline: 2px solid var(--ftp-accent); outline-offset: 1px;
}

/* Empty/error states: a touch more polish + a call to action slot */
.pane-empty i { opacity: .55; }
.pane-empty .pe-actions { margin-top: 0.8rem; display: flex; gap: 0.4rem; }
.pane-empty .btn { font-size: 0.78rem; }

/* Status bar dot reflects connection */
.ftp-statusbar .sb-dot { width: 8px; height: 8px; border-radius: 50%; display: inline-block; margin-right: 0.4rem; }

/* Connecting shimmer on the remote pane list-loading */
.list-loading i { display: inline-block; animation: spin 0.9s linear infinite; }
@keyframes spin { to { transform: rotate(360deg); } }

/* Toolbars a hair taller/comfier on desktop */
@media (min-width: 992px) {
    .ftp-uploadbar { padding-top: 0.6rem; padding-bottom: 0.6rem; }
    .cb-actions .btn { padding-inline: 0.7rem; }
}

/* Tablet: keep both panes but shrink chrome */
@media (max-width: 1200px) {
    .pane-sub { max-width: 140px; }
    .ub-label { display: none; }
}

/* Mobile: stack panes, dock shorter, hide non-essential labels */
@media (max-width: 991.98px) {
    .ftp-app { height: auto; min-height: calc(100vh - 50px); }
    .ftp-panes { min-height: 60vh; }
    .pane { margin: 0.4rem; min-height: 240px; }
    .ftp-dock { height: 180px; }
    .cb-brand { display: none; }
    .btn-upload { flex: 1; }
}

/* ══════════════════════════════════════════════════════════════════
   Connection bar + upload toolbar refinement & tooltips
   ══════════════════════════════════════════════════════════════════ */

/* Connection bar: comfier, balanced, non-stretched */
.ftp-connbar { padding: 0.55rem 1rem; gap: 0.85rem; }
.cb-brand {
    display: flex; align-items: center; justify-content: center;
    width: 34px; height: 34px; border-radius: 9px;
    background: rgba(127,176,255,.14); color: #7fb0ff; font-size: 1.15rem; flex: 0 0 auto;
}
.cb-field { flex: 0 1 460px; min-width: 190px; }
.cb-select {
    width: 100%; height: 34px; padding: 0 0.7rem;
    background: #0e141d url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 16 16' fill='%239fb0c4'><path d='M4 6l4 4 4-4'/></svg>") no-repeat right 0.55rem center;
    -webkit-appearance: none; appearance: none;
}
.cb-select:hover { border-color: #4a5a6d; }

/* Status as a soft chip */
.cb-status {
    padding: 0.28rem 0.6rem; border-radius: 20px;
    background: rgba(255,255,255,.05); border: 1px solid #33404f;
    font-weight: 500; white-space: nowrap;
}

/* Action buttons grouped into a segment + prominent Connect */
.cb-actions { gap: 0.55rem; align-items: center; }
.cb-btngroup {
    display: inline-flex; gap: 2px; padding: 3px;
    background: rgba(255,255,255,.05); border: 1px solid #3744543f; border-radius: 9px;
}
.cb-btngroup .btn {
    border: none !important; border-radius: 6px; background: transparent;
    color: #cdd8e4; padding: 0.28rem 0.6rem;
}
.cb-btngroup .btn:hover:not(:disabled) { background: #384654; color: #fff; }
.cb-btngroup .btn:disabled { opacity: .4; }
#btnConnect { height: 34px; border-radius: 8px; padding-inline: 0.95rem; font-weight: 600; }

/* Upload toolbar: tidy groups with separators */
.ftp-uploadbar { padding: 0.6rem 1rem; gap: 0.8rem; }
.ub-sep { width: 1px; align-self: stretch; margin: 0.1rem 0.15rem; background: var(--ftp-border); }
.ub-select { height: 32px; max-width: 260px; }
.ftp-uploadbar .form-switch .form-check-input { cursor: pointer; }
.ftp-uploadbar .form-check-label { cursor: pointer; color: var(--ftp-text); }
#btnManageDb { width: 30px; height: 30px; }
.btn-upload, #btnDryRun { height: 32px; }

/* Segmented control a touch taller to match */
.segmented .seg { padding: 0.34rem 0.75rem; }

/* Attractive tooltips */
.ftp-tip {
    --bs-tooltip-bg: #0d1520;
    --bs-tooltip-color: #eaf0f7;
    --bs-tooltip-opacity: 1;
    --bs-tooltip-max-width: 250px;
    font-family: inherit;
}
.ftp-tip .tooltip-inner {
    padding: 0.45rem 0.65rem; border-radius: 8px; text-align: left;
    font-size: 0.745rem; font-weight: 500; line-height: 1.35;
    box-shadow: 0 8px 24px rgba(0,0,0,.32); border: 1px solid rgba(255,255,255,.08);
}

@media (max-width: 991.98px) {
    .cb-field { flex: 1 1 100%; }
    .ub-sep { display: none; }
}

/* ══════════════════════════════════════════════════════════════════
   Connection editor modal — compact + pinned diagnostics
   ══════════════════════════════════════════════════════════════════ */
/* The Bootstrap modal is a light surface regardless of the app theme, so its
   internal elements use fixed light-appropriate colours (not theme vars). */
.conn-modal .modal-content { max-height: min(88vh, 720px); }
.conn-modal .modal-body.cf { padding: 0.85rem 1rem 0.7rem; }
.cf .form-label { font-size: 0.72rem; font-weight: 600; margin-bottom: 0.12rem; color: #3a4453; letter-spacing: .01em; }
.cf .form-label .text-muted { font-weight: 400; color: #8a94a3 !important; }
.cf .form-check-label { font-size: 0.82rem; color: #3a4453; }
.cf .row { --bs-gutter-y: 0.5rem; }

/* Test bar sits between the scrollable body and the footer — always visible */
.conn-testbar {
    display: flex; align-items: center; gap: 0.6rem;
    padding: 0.55rem 1rem; border-top: 1px solid #e6e9ef;
    background: #f4f6f9; flex-shrink: 0;
}
.conn-testbar #modalTestResult { line-height: 1.3; }

/* Diagnostics: capped height with its own scroll so the footer never moves */
.modal-diag { flex-shrink: 0; }
.modal-diag:not(:empty) { max-height: 168px; overflow-y: auto; padding: 0.5rem 1rem; border-top: 1px solid #e6e9ef; background: #fff; }
.modal-diag .diag-summary { padding: 0.4rem 0.55rem; margin-bottom: 0.4rem; font-size: 0.76rem; }
.modal-diag .diag-stage { padding: 0.26rem 0.4rem; font-size: 0.75rem; border-bottom-color: #f1f3f7; }
.modal-diag .diag-stage .ds-name { min-width: 130px; color: #2b3442; }
.modal-diag .diag-stage .ds-detail { color: #6b7684; }

/* Live-DB modal note + divider (light surface, theme-independent) */
.cf .cf-note {
    background: #eef4ff; border: 1px solid #d6e4ff; color: #33507a;
    border-radius: 8px; padding: 0.5rem 0.7rem; font-size: 0.76rem; line-height: 1.4; margin-bottom: 0.7rem;
}
.cf .cf-note code { color: #b5179e; background: transparent; }
.cf .cf-hr { margin: 0.6rem 0; border-top: 1px solid #e6e9ef; opacity: 1; }
