/* dashboard.css — стили логина, дашборда, статистики, экспорта/импорта */

/* ── LOGIN ─────────────────────────────────────────── */
.login-wrap  { display:flex; align-items:center; justify-content:center; min-height:100vh; padding:20px; }
.login-card  { background:var(--surface); border:1px solid var(--border); border-radius:14px; padding:36px 32px; width:100%; max-width:380px; }
.login-logo  { font-size:42px; text-align:center; margin-bottom:12px; }
.login-title { font-size:20px; font-weight:700; text-align:center; margin-bottom:4px; }
.login-sub   { color:var(--dim); font-size:13px; text-align:center; margin-bottom:24px; }
.step-block  { background:var(--surface2); border:1px solid var(--border2); border-radius:var(--r); padding:16px; margin-bottom:12px; }
.step-label  { font-size:11px; color:var(--dim); text-transform:uppercase; letter-spacing:.8px; margin-bottom:10px; }
.otp-hint    { font-size:12px; color:var(--dim); text-align:center; margin-top:8px; }
.otp-input   { width:100%; background:var(--bg); border:1px solid var(--border); color:var(--text); border-radius:var(--r); padding:10px 14px; font-size:24px; letter-spacing:8px; text-align:center; font-family:monospace; }
.otp-input:focus { outline:none; border-color:var(--blue); }

/* ── DASHBOARD ──────────────────────────────────────── */
#dashboard   { padding:20px; max-width:1100px; margin:0 auto; }
.topbar      { display:flex; align-items:center; justify-content:space-between; margin-bottom:20px; padding-bottom:16px; border-bottom:1px solid var(--border); }
.topbar-logo { font-size:16px; font-weight:700; display:flex; align-items:center; gap:8px; }
.badge       { background:var(--surface2); border:1px solid var(--border); border-radius:4px; font-size:11px; padding:2px 7px; color:var(--dim); }

/* ── STATS ───────────────────────────────────────────── */
.stats       { display:grid; grid-template-columns:repeat(auto-fit,minmax(140px,1fr)); gap:12px; margin-bottom:16px; }
.stat        { background:var(--surface); border:1px solid var(--border); border-radius:var(--r); padding:14px 16px; }
.stat-lbl    { font-size:11px; color:var(--dim); text-transform:uppercase; letter-spacing:.5px; margin-bottom:6px; }
.stat-val    { font-size:26px; font-weight:700; color:var(--blue); }
.stat-val.green { color:var(--green); }
.stat-date   { font-size:13px; margin-top:4px; color:var(--green); }

/* ── GRID / CARDS ────────────────────────────────────── */
.grid2       { display:grid; grid-template-columns:1fr 1fr; gap:16px; margin-bottom:16px; }
@media(max-width:680px) { .grid2 { grid-template-columns:1fr; } }
.card        { background:var(--surface); border:1px solid var(--border); border-radius:10px; padding:20px; }
.card-title  { font-size:14px; font-weight:600; margin-bottom:6px; display:flex; align-items:center; gap:8px; }
.card-hint   { font-size:12px; color:var(--dim); margin-bottom:14px; }

/* ── LOG BOX ────────────────────────────────────────── */
.log-wrap    { margin-top:10px; }
.log-box     { background:#0d1117; border:1px solid var(--border); border-radius:var(--r); padding:10px 12px; font-family:'Courier New',monospace; font-size:11.5px; height:180px; overflow-y:auto; line-height:1.6; }
.l-ok        { color:var(--green); }
.l-error     { color:var(--red); }
.l-warn      { color:var(--yellow); }
.l-info      { color:var(--dim); }

/* ── PROGRESS BAR ───────────────────────────────────── */
.pbar        { height:3px; background:var(--border2); border-radius:99px; overflow:hidden; margin-top:8px; }
.pbar-fill   { height:100%; background:var(--blue); width:0; transition:width .3s; }
.pbar-fill.run { animation:indeterminate 1.4s linear infinite; }
@keyframes indeterminate { 0%{width:30%;margin-left:-30%} 100%{width:30%;margin-left:110%} }

/* ── UPLOAD / PREVIEW ───────────────────────────────── */
.drop-zone   { border:2px dashed var(--border); border-radius:var(--r); padding:22px; text-align:center; cursor:pointer; transition:.2s; margin-bottom:10px; }
.drop-zone:hover,.drop-zone.over { border-color:var(--blue); background:#0d1e30; }
.drop-ico    { font-size:26px; margin-bottom:6px; }
.drop-txt    { color:var(--dim); font-size:12px; }
.drop-txt b  { color:var(--blue); }
.preview     { background:#0d1f10; border:1px solid #2d5a3f; border-radius:var(--r); padding:12px; font-size:12px; margin-bottom:10px; }
.prow        { display:flex; justify-content:space-between; padding:2px 0; }
.pk          { color:var(--dim); }
.pv          { color:var(--green); font-weight:600; }

/* ── BACKUPS TABLE ──────────────────────────────────── */
table        { width:100%; border-collapse:collapse; font-size:12px; }
th           { padding:7px 10px; text-align:left; font-size:10px; text-transform:uppercase; letter-spacing:.6px; color:var(--dim); border-bottom:1px solid var(--border); font-weight:500; }
td           { padding:8px 10px; border-bottom:1px solid var(--border2); vertical-align:middle; }
tr:last-child td { border-bottom:none; }
tr:hover td  { background:var(--surface2); }
.no-data     { color:var(--dim); text-align:center; padding:20px; font-size:12px; }

/* ── MODULE TABS ─────────────────────────────────────── */
.module-tabs { display:flex; gap:6px; margin-bottom:16px; flex-wrap:wrap; }
.module-tab  { display:inline-flex; align-items:center; gap:6px; background:var(--surface); border:1px solid var(--border); border-radius:var(--r); padding:8px 16px; font-size:13px; font-weight:500; color:var(--dim); cursor:pointer; transition:.15s; white-space:nowrap; }
.module-tab:hover  { border-color:var(--blue); color:var(--text); }
.module-tab.active { background:var(--surface2); border-color:var(--blue); color:var(--blue); }

/* ── DB SELECT ───────────────────────────────────────── */
.db-select-row { display:flex; align-items:center; gap:8px; margin-bottom:10px; }
.db-label      { font-size:12px; color:var(--dim); white-space:nowrap; min-width:70px; }
.db-select     { flex:1; background:var(--surface2); border:1px solid var(--border); border-radius:var(--r); color:var(--text); font-size:12px; padding:6px 10px; cursor:pointer; outline:none; }
.db-select:focus { border-color:var(--blue); }

/* ── SECTION TABS ────────────────────────────────────── */
.section-tabs    { display:flex; gap:6px; margin-bottom:16px; border-bottom:1px solid var(--border); padding-bottom:0; }
.section-tab     { background:transparent; border:1px solid transparent; border-radius:6px 6px 0 0; color:var(--dim); padding:8px 18px; font-size:13px; font-weight:500; cursor:pointer; transition:.15s; white-space:nowrap; margin-bottom:-1px; }
.section-tab:hover  { color:var(--text); border-color:var(--border); }
.section-tab.active { background:var(--surface2); color:var(--blue); border-color:var(--border); border-bottom-color:var(--surface2); }