From 00aca957b3b8efed72ab62bc41240a55919c66f6 Mon Sep 17 00:00:00 2001
From: Damir Mukimov <mukimov.d@gmail.com>
Date: Wed, 24 Dec 2025 18:50:31 +0100
Subject: [PATCH] Add prototype style.css

---
 prototype/style.css | 56 +++++++++++++++++++++++++++++++++++++++++++++
 1 file changed, 56 insertions(+)
 create mode 100644 prototype/style.css

diff --git a/prototype/style.css b/prototype/style.css
new file mode 100644
index 0000000..9d6d322
--- /dev/null
+++ b/prototype/style.css
@@ -0,0 +1,56 @@
+*{box-sizing:border-box;font-family:Inter,ui-sans-serif,system-ui,-apple-system,'Segoe UI',Roboto,'Helvetica Neue',Arial}
+:root{--bg:#0f1720;--card:#0b1220;--muted:#9aa3b2;--accent:#0ea5a4;--danger:#ef4444}
+body{margin:0;background:#f6f7f9;color:#0b1720}
+.container{max-width:1200px;margin:18px auto;padding:16px}
+.topbar .title-row{display:flex;justify-content:space-between;align-items:center}
+.brand{display:flex;gap:12px;align-items:center}
+.logo{font-size:28px;background:#eef2ff;padding:8px;border-radius:10px}
+h1{margin:0;font-size:18px}
+.subtitle{font-size:12px;color:#6b7280}
+.actions{display:flex;gap:8px;align-items:center}
+.actions button{padding:8px 12px;border-radius:10px;border:1px solid #e6e9ef;background:white;cursor:pointer}
+.switch{display:flex;gap:6px;align-items:center;font-size:13px}
+.filters{margin-top:12px;display:flex;flex-wrap:wrap;gap:12px;align-items:end}
+.filter-group label{font-size:12px;color:#6b7280}
+.filter-group select,input{padding:8px;border-radius:10px;border:1px solid #e6e9ef}
+.search input{width:220px}
+.meta{font-size:12px;color:#9aa3b2;margin-left:8px}
+.kpis{display:grid;grid-template-columns:repeat(auto-fit,minmax(180px,1fr));gap:12px;margin-top:18px}
+.kpi{background:white;border-radius:12px;padding:12px;border:1px solid #e6e9ef}
+.kpi .label{font-size:12px;color:#6b7280}
+.kpi .value{font-size:20px;font-weight:700;margin-top:6px}
+.kpi .hint{font-size:12px;color:#9aa3b2}
+.kpi.good{border-color:#dcfce7}
+.kpi.danger{border-color:#fee2e2}
+.tabs{display:flex;gap:8px;margin-top:18px}
+.tabs button{padding:8px 12px;border-radius:10px;border:1px solid #e6e9ef;background:white}
+.tabs button.active{background:linear-gradient(180deg,#f8fafc,#fff);box-shadow:0 1px 0 rgba(11,17,32,0.04)}
+main{margin-top:12px}
+.grid{display:grid;grid-template-columns:1fr 360px;gap:12px}
+.card{background:white;border-radius:12px;padding:12px;border:1px solid #e6e9ef}
+.map-card .map-placeholder{height:220px;border-radius:8px;background:linear-gradient(90deg,#f3f4f6,#fff);display:flex;align-items:center;justify-content:center;position:relative}
+.map-card .badge{position:absolute;top:10px;right:12px;background:#fff;padding:6px;border-radius:999px;border:1px solid #e6e9ef;font-size:12px}
+.small-stats{display:grid;grid-template-columns:repeat(4,1fr);gap:8px;margin-top:12px}
+.small{background:#fafbff;padding:8px;border-radius:8px;font-size:13px}
+.card .note{margin-top:8px;font-size:12px;color:#9aa3b2}
+.hotspots .empty{padding:20px;text-align:center;color:#9aa3b2}
+.hotspot-btn{width:100%;text-align:left;padding:12px;border-radius:10px;border:1px solid #f1f5f9;background:#fff;margin-bottom:8px;cursor:pointer}
+.h-title{font-weight:600}
+.h-meta{font-size:12px;color:#9aa3b2;margin-top:6px}
+.h-stats{display:flex;gap:12px;font-size:12px;margin-top:8px;color:#4b5563}
+.badge{background:#f1f5f9;padding:6px;border-radius:999px;font-size:12px}
+.side-panel{position:fixed;right:20px;bottom:20px;width:420px;background:white;border-radius:12px;border:1px solid #e6e9ef;padding:12px;box-shadow:0 10px 30px rgba(11,17,32,0.08);transform:translateY(20px);opacity:0;pointer-events:none;transition:all .25s}
+.side-panel.open{transform:translateY(0);opacity:1;pointer-events:auto}
+.side-panel button{float:right}
+.detail-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:10px;margin-top:12px}
+.provider{display:flex;justify-content:space-between;align-items:center;padding:10px;border-radius:8px;border:1px solid #f1f5f9;margin-top:8px}
+.p-meta{font-size:12px;color:#9aa3b2}
+.p-actions .assign{padding:6px 10px;border-radius:8px;border:none;background:#eef2ff;cursor:pointer}
+.card .chart-placeholder{height:200px;border-radius:8px;background:#f8fafc;display:flex;align-items:center;justify-content:center;color:#9aa3b2}
+.small-grid{display:grid;gap:8px;margin-top:12px}
+.escalation{margin-top:12px;font-size:13px;color:#9aa3b2}
+.demand-item{padding:10px;border-radius:8px;background:#fff;margin-top:8px;border:1px solid #f1f5f9}
+.footer{margin-top:18px;color:#9aa3b2}
+.foot{margin-top:18px;font-size:12px;color:#9aa3b2}
+.hidden{display:none}
+@media(max-width:900px){.grid{grid-template-columns:1fr;}.actions{flex-wrap:wrap}.filters{gap:8px}}