/* ═══════════════════════════════════════════════════════════════
   layout.css
   ═══════════════════════════════════════════════════════════════ */

/* ── AUTH SCREEN ─────────────────────────────────────────────── */
#auth-screen {
  min-height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--bg-base);
  padding: 20px;
}

.auth-card {
  width: 420px;
  background: var(--bg-raised);
  border: 1px solid var(--border-mid);
  border-radius: var(--radius-xl);
  box-shadow: var(--shadow-lg);
  overflow: hidden;
}

.auth-brand {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 28px 32px 20px;
  border-bottom: 1px solid var(--border);
}

.auth-brand-icon {
  width: 36px; height: 36px;
  color: var(--accent);
  filter: drop-shadow(0 0 8px var(--accent-glow));
}

.auth-brand-name {
  font-size: 20px;
  font-weight: 800;
  letter-spacing: -0.03em;
}

.auth-brand-sub {
  font-size: 11px;
  color: var(--text-muted);
  font-family: var(--font-mono);
}

.auth-tabs {
  display: flex;
  border-bottom: 1px solid var(--border);
}

.auth-tab {
  flex: 1;
  padding: 12px;
  border: none;
  background: transparent;
  color: var(--text-muted);
  font-size: 13px;
  font-weight: 600;
  border-bottom: 2px solid transparent;
  transition: all var(--t-fast);
  font-family: var(--font-ui);
}

.auth-tab.active {
  color: var(--accent);
  border-bottom-color: var(--accent);
  background: var(--accent-faint);
}

.auth-form {
  padding: 24px 32px 28px;
  display: flex;
  flex-direction: column;
  gap: 14px;
}

.auth-form.hidden { display: none; }

.form-group {
  display: flex;
  flex-direction: column;
  gap: 5px;
}

.form-label {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.07em;
  text-transform: uppercase;
  color: var(--text-muted);
  display: flex;
  align-items: center;
  gap: 6px;
}

.form-label i { color: var(--accent); font-size: 12px; }

.form-input {
  width: 100%;
  padding: 9px 12px;
  background: var(--bg-base);
  border: 1px solid var(--border-mid);
  border-radius: var(--radius-md);
  color: var(--text-primary);
  font-family: var(--font-ui);
  font-size: 13px;
  outline: none;
  transition: border-color var(--t-fast), box-shadow var(--t-fast);
}

.form-input:focus {
  border-color: var(--accent);
  box-shadow: 0 0 0 3px var(--accent-glow);
}

.form-input::placeholder { color: var(--text-muted); }

.auth-error {
  background: var(--danger-faint);
  border: 1px solid var(--danger);
  border-radius: var(--radius-md);
  padding: 8px 12px;
  font-size: 12px;
  color: var(--danger);
  display: none;
}

.auth-error.visible { display: block; }

/* ── APP SHELL ───────────────────────────────────────────────── */
#app-shell {
  display: grid;
  grid-template-rows: 52px 1fr 28px;
  height: 100vh;
  overflow: hidden;
}

#app-shell.hidden { display: none; }
#auth-screen.hidden { display: none; }

/* ── HEADER ──────────────────────────────────────────────────── */
#app-header {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 0 14px;
  background: var(--bg-surface);
  border-bottom: 1px solid var(--border);
  box-shadow: var(--shadow-sm);
  z-index: 100;
}

.header-brand {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-shrink: 0;
}

.brand-icon {
  width: 26px; height: 26px;
  color: var(--accent);
  filter: drop-shadow(0 0 5px var(--accent-glow));
}

.brand-name { font-size: 15px; font-weight: 800; letter-spacing: -0.02em; }
.brand-version {
  font-size: 10px; font-family: var(--font-mono);
  color: var(--text-muted); padding: 2px 5px;
  border: 1px solid var(--border-mid); border-radius: var(--radius-sm);
}

.header-connection {
  flex: 1;
  display: flex;
  align-items: center;
  gap: 8px;
  min-width: 0;
}

.conn-status {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 4px 10px;
  border-radius: var(--radius-md);
  background: var(--bg-raised);
  border: 1px solid var(--border);
  font-size: 12px;
  color: var(--text-secondary);
  min-width: 0;
  overflow: hidden;
}

.conn-dot {
  width: 7px; height: 7px;
  border-radius: 50%;
  background: var(--text-muted);
  flex-shrink: 0;
  transition: background var(--t-med);
}

.conn-dot.connected    { background: var(--success); box-shadow: 0 0 5px var(--success); }
.conn-dot.connecting   { background: var(--warning); animation: pulse 1s infinite; }
.conn-dot.disconnected { background: var(--text-muted); }

@keyframes pulse {
  0%,100% { opacity: 1; } 50% { opacity: 0.3; }
}

.conn-label {
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  font-family: var(--font-mono); font-size: 11px;
}

.header-right {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-shrink: 0;
}

.hue-control {
  display: flex; align-items: center; gap: 7px; color: var(--text-muted); font-size: 13px;
}
.hue-control input[type="range"] {
  width: 80px;
  background: linear-gradient(to right,
    hsl(0,80%,58%),hsl(60,80%,58%),hsl(120,80%,58%),
    hsl(180,80%,58%),hsl(210,80%,58%),hsl(270,80%,58%),hsl(359,80%,58%));
  height: 5px;
}

.user-badge {
  display: flex; align-items: center; gap: 7px;
  padding: 4px 10px;
  background: var(--bg-raised); border: 1px solid var(--border);
  border-radius: var(--radius-md); cursor: pointer;
  transition: background var(--t-fast);
  position: relative;
}
.user-badge:hover { background: var(--bg-hover); }
.user-avatar {
  width: 24px; height: 24px; border-radius: 50%;
  background: var(--accent-faint); border: 1px solid var(--accent);
  display: flex; align-items: center; justify-content: center;
  font-size: 11px; font-weight: 700; color: var(--accent);
}
.user-name { font-size: 12px; font-weight: 600; }

/* ── MAIN LAYOUT ─────────────────────────────────────────────── */
#main-layout {
  display: grid;
  grid-template-columns: 220px 1fr;
  overflow: hidden;
}

/* ── SIDEBAR ─────────────────────────────────────────────────── */
#sidebar {
  background: var(--bg-surface);
  border-right: 1px solid var(--border);
  display: flex;
  flex-direction: column;
  overflow: hidden;
}

.sidebar-section {
  border-bottom: 1px solid var(--border);
}

.sidebar-title {
  display: flex; align-items: center; justify-content: space-between;
  padding: 8px 12px;
  font-size: 10px; font-weight: 700; letter-spacing: 0.1em;
  text-transform: uppercase; color: var(--text-muted);
}
.sidebar-title i { color: var(--accent); font-size: 13px; }

.profile-list { overflow-y: auto; max-height: 280px; }

.profile-item {
  display: flex; align-items: center; gap: 8px;
  padding: 8px 12px;
  cursor: pointer;
  border-bottom: 1px solid var(--border);
  transition: background var(--t-fast);
}
.profile-item:hover { background: var(--bg-hover); }
.profile-item.active { background: var(--accent-faint); }

.profile-proto {
  font-size: 9px; font-weight: 700; letter-spacing: 0.05em;
  padding: 2px 5px; border-radius: var(--radius-sm);
  text-transform: uppercase; flex-shrink: 0;
}
.proto-ftp  { background: hsla(210,70%,58%,0.15); color: hsl(210,70%,65%); }
.proto-ftps { background: hsla(145,65%,50%,0.15); color: hsl(145,65%,55%); }
.proto-sftp { background: hsla(270,70%,60%,0.15); color: hsl(270,70%,68%); }

.profile-info { flex: 1; min-width: 0; }
.profile-label { font-size: 12px; font-weight: 600; color: var(--text-primary);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.profile-host  { font-size: 10px; font-family: var(--font-mono); color: var(--text-muted);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

.profile-actions { display: flex; gap: 2px; opacity: 0; transition: opacity var(--t-fast); }
.profile-item:hover .profile-actions { opacity: 1; }

.quick-connect { padding: 10px 12px; }

/* ── CONTENT AREA ────────────────────────────────────────────── */
#content-area {
  display: flex;
  flex-direction: column;
  overflow: hidden;
}

/* ── DUAL PANE ───────────────────────────────────────────────── */
#dual-pane {
  display: grid;
  grid-template-columns: 1fr 4px 1fr;
  flex: 1;
  overflow: hidden;
}

.pane {
  display: flex;
  flex-direction: column;
  overflow: hidden;
  background: var(--bg-base);
}

.pane-header {
  display: flex; align-items: center; gap: 6px;
  padding: 6px 10px;
  background: var(--bg-surface);
  border-bottom: 1px solid var(--border);
  flex-shrink: 0;
}

.pane-title {
  font-size: 11px; font-weight: 700; letter-spacing: 0.07em;
  text-transform: uppercase; color: var(--text-muted);
  display: flex; align-items: center; gap: 5px;
}

.pane-path {
  flex: 1;
  font-family: var(--font-mono); font-size: 11px; color: var(--text-secondary);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}

.pane-toolbar {
  display: flex; align-items: center; gap: 3px;
  padding: 5px 8px;
  background: var(--bg-raised);
  border-bottom: 1px solid var(--border);
  flex-wrap: wrap;
  flex-shrink: 0;
}

.pane-divider {
  background: var(--border-mid);
  cursor: col-resize;
  transition: background var(--t-fast);
}
.pane-divider:hover { background: var(--accent); }

/* ── FILE TABLE ──────────────────────────────────────────────── */
.file-table-wrap {
  flex: 1;
  overflow: auto;
}

.file-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 12px;
}

.file-table thead {
  position: sticky; top: 0; z-index: 5;
  background: var(--bg-surface);
}

.file-table th {
  padding: 6px 10px;
  text-align: left;
  font-size: 10px; font-weight: 700;
  letter-spacing: 0.07em; text-transform: uppercase;
  color: var(--text-muted); border-bottom: 1px solid var(--border);
  white-space: nowrap; user-select: none; cursor: pointer;
}
.file-table th:hover { color: var(--text-primary); }

.file-table tbody tr {
  border-bottom: 1px solid var(--border);
  transition: background var(--t-fast);
  cursor: pointer;
}
.file-table tbody tr:hover    { background: var(--bg-hover); }
.file-table tbody tr.selected { background: var(--accent-faint); }
.file-table tbody tr.cut      { opacity: 0.4; }

.file-table td {
  padding: 5px 10px;
  color: var(--text-secondary);
  white-space: nowrap;
}

.file-name-cell {
  display: flex; align-items: center; gap: 7px;
  font-weight: 500; color: var(--text-primary);
}

.file-icon { font-size: 14px; color: var(--accent); }
.dir-icon  { color: var(--warning); }
.up-icon   { color: var(--text-muted); }

.col-name { min-width: 160px; }
.col-size { width: 80px; text-align: right; font-family: var(--font-mono); font-size: 11px; }
.col-perms { width: 90px; font-family: var(--font-mono); font-size: 10px; }
.col-date  { width: 130px; font-family: var(--font-mono); font-size: 10px; }

/* ── TRANSFER QUEUE ──────────────────────────────────────────── */
#transfer-panel {
  border-top: 1px solid var(--border);
  background: var(--bg-surface);
  flex-shrink: 0;
  max-height: 160px;
  overflow-y: auto;
}

.transfer-header {
  display: flex; align-items: center; justify-content: space-between;
  padding: 5px 12px;
  font-size: 10px; font-weight: 700; letter-spacing: 0.08em;
  text-transform: uppercase; color: var(--text-muted);
  border-bottom: 1px solid var(--border);
  cursor: pointer;
}

.transfer-item {
  display: flex; align-items: center; gap: 10px;
  padding: 6px 12px;
  border-bottom: 1px solid var(--border);
  font-size: 11px;
}

.transfer-icon { font-size: 13px; flex-shrink: 0; }
.transfer-icon.upload   { color: var(--accent); }
.transfer-icon.download { color: var(--success); }
.transfer-icon.error    { color: var(--danger); }

.transfer-name { flex: 1; color: var(--text-primary); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.transfer-size { font-family: var(--font-mono); color: var(--text-muted); font-size: 10px; flex-shrink: 0; }

.transfer-prog-wrap {
  width: 120px; height: 3px; background: var(--bg-active); border-radius: 2px; overflow: hidden; flex-shrink: 0;
}
.transfer-prog-bar { height: 100%; background: var(--accent); border-radius: 2px; transition: width 100ms; }

.transfer-status {
  font-size: 10px; font-family: var(--font-mono); flex-shrink: 0;
}
.transfer-status.done     { color: var(--success); }
.transfer-status.error    { color: var(--danger); }
.transfer-status.active   { color: var(--accent); }

/* ── STATUS BAR ──────────────────────────────────────────────── */
#status-bar {
  display: flex; align-items: center; justify-content: space-between;
  padding: 0 14px;
  background: var(--bg-surface); border-top: 1px solid var(--border);
  font-family: var(--font-mono); font-size: 11px; color: var(--text-muted);
}

/* ── EMPTY STATE ─────────────────────────────────────────────── */
.empty-state {
  flex: 1; display: flex; flex-direction: column;
  align-items: center; justify-content: center; gap: 10px;
  color: var(--text-muted); padding: 40px;
  text-align: center;
}
.empty-state i { font-size: 44px; opacity: 0.3; }
.empty-state p { font-size: 13px; }
.empty-state small { font-size: 11px; opacity: 0.7; }

/* ── DROP ZONE HIGHLIGHT ─────────────────────────────────────── */
.pane.drag-over { outline: 2px dashed var(--accent); outline-offset: -4px; }

/* ── USER DROPDOWN ───────────────────────────────────────────── */
.user-menu {
  position: absolute;
  top: calc(100% + 6px);
  right: 0;
  background: var(--bg-raised);
  border: 1px solid var(--border-mid);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-lg);
  min-width: 180px;
  z-index: 500;
  overflow: hidden;
}
.user-menu.hidden { display: none; }
.user-menu-item {
  display: flex; align-items: center; gap: 9px;
  padding: 9px 14px;
  font-size: 13px; color: var(--text-primary);
  cursor: pointer; border: none; background: none;
  width: 100%; text-align: left;
  transition: background var(--t-fast);
  font-family: var(--font-ui);
}
.user-menu-item:hover { background: var(--bg-hover); }
.user-menu-item i { color: var(--text-muted); font-size: 14px; }
.user-menu-item.danger { color: var(--danger); }
.user-menu-item.danger i { color: var(--danger); }
.user-menu-sep { height: 1px; background: var(--border); margin: 3px 0; }