/* Retail Dashboard styles. Перенесено из retail_dashboard_v26.html. */

@import url('https://fonts.googleapis.com/css2?family=Bebas+Neue&family=IBM+Plex+Mono:wght@400;600&family=IBM+Plex+Sans:wght@300;400;600&display=swap');

:root {
  --bg:#0b0c10; --surface:#12131a; --card:#181922; --border:#272840;
  --accent:#e8ff47; --accent2:#47c8ff; --accent3:#ff6b47;
  --text:#e4e6f0; --muted:#636580; --green:#4dff91; --red:#ff4d6b;
  --purple:#b47fff; --orange:#ffb347;
}

* { margin:0; padding:0; box-sizing:border-box; }
body { background:var(--bg); color:var(--text); font-family:'IBM Plex Sans',sans-serif; min-height:100vh; }

/* ---- Header ---- */
header {
  background:var(--surface); border-bottom:1px solid var(--border);
  padding:14px 24px; display:flex; align-items:center; gap:16px;
  position:sticky; top:0; z-index:200;
}
header h1 { font-family:'Bebas Neue',sans-serif; font-size:24px; letter-spacing:4px; color:var(--accent); }
.nav-tabs { display:flex; gap:3px; margin-left:auto; flex-wrap:wrap; align-items:center; }
.nav-tab {
  padding:7px 14px; background:none; border:1px solid var(--border); color:var(--muted);
  font-family:'IBM Plex Mono',monospace; font-size:10px; cursor:pointer;
  transition:all .2s; letter-spacing:1px; white-space:nowrap;
}
.nav-tab.active, .nav-tab:hover { background:var(--accent); color:#000; border-color:var(--accent); }
.user-chip {
  font-family:'IBM Plex Mono',monospace; font-size:10px; color:var(--accent2);
  border:1px solid var(--border); padding:6px 10px; letter-spacing:1px;
}
.role-admin { color:var(--accent); }

main { padding:24px; }
.section { display:none; }
.section.active { display:block; }

/* ---- Summary cards ---- */
.summary-grid { display:grid; grid-template-columns:repeat(5,1fr); gap:12px; margin-bottom:20px; }
.sum-card {
  background:var(--card); border:1px solid var(--border); padding:16px;
  position:relative; overflow:hidden;
}
.sum-card::before { content:''; position:absolute; top:0; left:0; width:3px; height:100%; }
.sum-card.c-rev::before { background:var(--accent); }
.sum-card.c-dir::before { background:var(--accent3); }
.sum-card.c-ovh::before { background:var(--purple); }
.sum-card.c-tot::before { background:var(--orange); }
.sum-card.c-pro::before { background:var(--green); }
.sum-card .lbl {
  font-family:'IBM Plex Mono',monospace; font-size:9px; letter-spacing:2px;
  color:var(--muted); text-transform:uppercase; margin-bottom:5px;
}
.sum-card .val { font-family:'Bebas Neue',sans-serif; font-size:30px; letter-spacing:1px; line-height:1; }
.sum-card.c-rev .val { color:var(--accent); }
.sum-card.c-dir .val { color:var(--accent3); }
.sum-card.c-ovh .val { color:var(--purple); }
.sum-card.c-tot .val { color:var(--orange); }
.sum-card.c-pro .val { color:var(--green); }
.sum-card .sub { font-size:10px; color:var(--muted); margin-top:3px; font-family:'IBM Plex Mono',monospace; }

/* ---- Filters ---- */
.filters { display:flex; gap:8px; margin-bottom:16px; flex-wrap:wrap; align-items:center; }
.filters label { font-family:'IBM Plex Mono',monospace; font-size:10px; color:var(--muted); letter-spacing:1px; }
.fs {
  background:var(--card); border:1px solid var(--border); color:var(--text);
  padding:7px 10px; font-family:'IBM Plex Mono',monospace; font-size:11px;
  outline:none; cursor:pointer;
}
.fs:focus { border-color:var(--accent); }

/* ---- Tables ---- */
.table-wrap { background:var(--card); border:1px solid var(--border); overflow-x:auto; margin-bottom:20px; }
table { width:100%; border-collapse:collapse; }
thead th {
  background:var(--surface); padding:9px 12px; text-align:left;
  font-family:'IBM Plex Mono',monospace; font-size:9px; letter-spacing:1.5px;
  color:var(--muted); text-transform:uppercase;
  border-bottom:1px solid var(--border); white-space:nowrap;
  cursor:pointer; user-select:none;
}
thead th:hover { color:var(--accent); }
tbody tr { border-bottom:1px solid var(--border); transition:background .15s; }
tbody tr:hover { background:rgba(232,255,71,.04); }
tbody td { padding:9px 12px; font-family:'IBM Plex Mono',monospace; font-size:11px; white-space:nowrap; }
tbody td:first-child { font-weight:600; color:var(--accent2); }
.cp { color:var(--green); } .cn { color:var(--red); } .ca { color:var(--accent); font-weight:600; }
.cd { color:var(--accent3); } .co { color:var(--purple); } .ct { color:var(--orange); }

/* ---- Charts ---- */
.charts-grid { display:grid; grid-template-columns:1fr 1fr; gap:16px; margin-bottom:20px; }
.chart-box { background:var(--card); border:1px solid var(--border); padding:18px; }
.chart-title {
  font-family:'IBM Plex Mono',monospace; font-size:9px; letter-spacing:2px;
  color:var(--muted); text-transform:uppercase; margin-bottom:14px;
}
.bar-chart { display:flex; flex-direction:column; gap:7px; }
.bar-row { display:flex; align-items:center; gap:8px; }
.bar-label {
  font-family:'IBM Plex Mono',monospace; font-size:10px; color:var(--muted);
  width:62px; flex-shrink:0; text-align:right;
  overflow:hidden; text-overflow:ellipsis;
}
.bar-track { flex:1; height:20px; background:var(--border); border-radius:2px; overflow:hidden; }
.bar-fill {
  height:100%; border-radius:2px; display:flex; align-items:center; padding-left:5px;
  font-family:'IBM Plex Mono',monospace; font-size:10px; color:#000;
  font-weight:600; min-width:2px; transition:width .5s cubic-bezier(.4,0,.2,1);
}
.bf-rev { background:var(--accent); }
.bf-pro { background:var(--green); }
.bf-neg { background:var(--red); color:#fff; }

.mbar { display:inline-flex; align-items:center; gap:5px; }
.mbar-track { width:60px; height:4px; background:var(--border); border-radius:2px; overflow:hidden; }
.mbar-fill { height:100%; border-radius:2px; }

/* ---- Sections ---- */
.sec-title { font-family:'Bebas Neue',sans-serif; font-size:26px; letter-spacing:4px; color:var(--text); margin-bottom:16px; }
.sec-title span { color:var(--accent); }

/* ---- Forms ---- */
.form-grid { display:grid; grid-template-columns:1fr 1fr; gap:20px; }
.form-box { background:var(--card); border:1px solid var(--border); padding:20px; }
.form-box h3 { font-family:'Bebas Neue',sans-serif; font-size:18px; letter-spacing:2px; color:var(--accent); margin-bottom:14px; }
.cg-title {
  font-family:'IBM Plex Mono',monospace; font-size:9px; letter-spacing:2px;
  color:var(--muted); text-transform:uppercase;
  padding:5px 0; border-bottom:1px solid var(--border);
  margin-bottom:10px; margin-top:14px;
}
.form-row2 { display:flex; gap:10px; }
.form-row2 .fg { flex:1; }
.fg { margin-bottom:10px; }
.fg label {
  display:block; font-family:'IBM Plex Mono',monospace; font-size:9px;
  letter-spacing:1px; color:var(--muted); text-transform:uppercase; margin-bottom:4px;
}
.fg input, .fg select, .fi {
  width:100%; background:var(--surface); border:1px solid var(--border); color:var(--text);
  padding:8px 10px; font-family:'IBM Plex Mono',monospace; font-size:11px;
  outline:none; transition:border-color .2s;
}
.fg input:focus, .fg select:focus { border-color:var(--accent); }

.calc-box {
  background:var(--surface); border:1px solid var(--border);
  padding:10px 12px; margin-bottom:12px;
  font-family:'IBM Plex Mono',monospace; font-size:10px;
}
.calc-row { display:flex; justify-content:space-between; padding:2px 0; }
.calc-row.tot { border-top:1px solid var(--border); margin-top:4px; padding-top:4px; font-weight:600; }

/* ---- Buttons ---- */
.btn {
  padding:10px 22px; font-family:'IBM Plex Mono',monospace;
  font-size:11px; font-weight:600; letter-spacing:2px;
  cursor:pointer; border:none; transition:all .2s;
}
.btn-primary { background:var(--accent); color:#000; }
.btn-primary:hover { background:#d4eb3a; }
.btn-danger {
  background:none; border:1px solid var(--red); color:var(--red);
  padding:4px 9px; font-size:10px; font-family:'IBM Plex Mono',monospace; cursor:pointer;
}
.btn-danger:hover { background:var(--red); color:#fff; }
.btn-outline {
  background:none; border:1px solid var(--border); color:var(--text);
  padding:8px 16px; font-family:'IBM Plex Mono',monospace; font-size:10px;
  cursor:pointer; letter-spacing:1px; transition:all .2s;
}
.btn-outline:hover { border-color:var(--accent); color:var(--accent); }
.actions-bar { display:flex; gap:8px; margin-bottom:16px; flex-wrap:wrap; }

/* ---- Misc ---- */
.mb {
  display:inline-block; background:var(--accent); color:#000;
  font-family:'IBM Plex Mono',monospace; font-size:9px;
  padding:2px 6px; font-weight:600; letter-spacing:1px;
}
.rank-badge {
  display:inline-flex; align-items:center; justify-content:center;
  width:18px; height:18px; border-radius:50%;
  font-size:9px; font-weight:700; font-family:'IBM Plex Mono',monospace;
}
.rank-1 { background:var(--accent); color:#000; }
.rank-2 { background:#aaa; color:#000; }
.rank-3 { background:#cd7f32; color:#000; }
.pill {
  display:inline-block; font-family:'IBM Plex Mono',monospace; font-size:9px;
  padding:1px 6px; border-radius:2px; background:rgba(180,127,255,.15);
  color:var(--purple); margin-left:3px;
}

.toast {
  position:fixed; bottom:24px; right:24px; background:var(--green); color:#000;
  padding:10px 20px; font-family:'IBM Plex Mono',monospace; font-size:11px;
  font-weight:600; opacity:0; transform:translateY(12px);
  transition:all .3s; z-index:300; pointer-events:none;
}
.toast.show { opacity:1; transform:translateY(0); }

.ovh-info {
  background:var(--card); border:1px solid var(--border); border-left:3px solid var(--purple);
  padding:14px 18px; margin-bottom:16px;
}
.ovh-info p { font-family:'IBM Plex Mono',monospace; font-size:11px; color:var(--muted); line-height:1.7; }

/* ---- Login page ---- */
.login-body {
  min-height:100vh; display:flex; align-items:center; justify-content:center;
  background:radial-gradient(1200px 600px at 50% -20%, #1c1d28 0%, #0b0c10 60%);
}
.login-card {
  background:var(--card); border:1px solid var(--border); padding:32px 28px;
  width:100%; max-width:360px;
}
.login-logo {
  font-family:'Bebas Neue',sans-serif; font-size:22px; letter-spacing:4px;
  color:var(--accent); text-align:center; margin-bottom:24px;
}
.login-error {
  color:var(--red); font-family:'IBM Plex Mono',monospace; font-size:10px;
  min-height:14px; margin-top:6px;
}

@media (max-width:1100px) {
  .summary-grid { grid-template-columns:repeat(3,1fr); }
  .charts-grid  { grid-template-columns:1fr; }
  .form-grid    { grid-template-columns:1fr; }
}
@media (max-width:600px) {
  .summary-grid { grid-template-columns:1fr 1fr; }
  main { padding:12px; }
}