/* Fireground Command — admin shell (sidebar + topbar)
   Reconstructed from Figma node 21:452 "03-realtime-command".
   Canvas target: 1536 x 1024. */

:root{
  --nav-w: 195px;
  --top-h: 70px;

  --bg-app:      #eef1f5;
  --bg-panel:    #ffffff;
  --bg-sidebar:  #1b232c;
  --bg-sidebar-2:#202a34;
  --sidebar-line:#2c3742;

  --primary:     #0659e0;
  --primary-700: #0a4fbd;
  --link:        #2f6fe0;

  --text:        #2b2f36;
  --text-2:      #6a6d83;
  --text-3:      #9a9da8;
  --text-inv:    #eef2f8;

  --red:         #e5484d;
  --red-soft:    #fdecec;
  --orange:      #f59e0b;
  --orange-soft: #fdf1dc;
  --green:       #16a34a;
  --green-soft:  #e7f6ec;
  --blue-soft:   #eaf1fd;

  --border:      #e4e7ec;
  --border-2:    #eef0f3;
  --radius:      10px;
  --shadow:      0 1px 2px rgba(16,24,40,.04), 0 1px 3px rgba(16,24,40,.06);

  --font: "Inter","Apple SD Gothic Neo","Noto Sans KR","Malgun Gothic","맑은 고딕",-apple-system,BlinkMacSystemFont,sans-serif;
}

*{ box-sizing:border-box; }
html,body{ margin:0; padding:0; }
body{
  font-family:var(--font);
  color:var(--text);
  background:var(--bg-app);
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
}

/* ---------- App frame ---------- */
.app{
  position:relative;
  width:1536px;
  min-height:1024px;
  margin:0 auto;
  background:var(--bg-app);
  display:flex;
}
.app.sidebar-collapsed{ --nav-w: 72px; }
.app.sidebar-collapsed .sb-brand .t1,
.app.sidebar-collapsed .sb-brand .t2,
.app.sidebar-collapsed .sb-item span,
.app.sidebar-collapsed .sb-status,
.app.sidebar-collapsed .sb-logout span{ display:none; }
.app.sidebar-collapsed .sb-brand{ justify-content:center;padding:0; }
.app.sidebar-collapsed .sb-item{ justify-content:center;padding:0; }
.app.sidebar-collapsed .sb-logout{ margin-left:10px;margin-right:10px; }

/* ---------- Sidebar ---------- */
.sidebar{
  width:var(--nav-w);
  min-height:1024px;
  background:linear-gradient(180deg,#1c242e 0%,#19212a 100%);
  color:var(--text-inv);
  display:flex;
  flex-direction:column;
  flex:0 0 var(--nav-w);
  position:relative;
}
.sb-brand{
  height:76px;
  display:flex;
  align-items:center;
  gap:11px;
  padding:0 14px;
  border-bottom:0;
}
.sb-logo{
  width:48px;height:34px;border-radius:0;
  display:flex;align-items:center;justify-content:center;
  background:transparent;
  flex:0 0 48px;
}
.sb-logo svg{ width:24px;height:24px; }
.sb-logo img{ width:48px;height:34px;object-fit:contain;display:block; }
.sb-brand .t1{ font-size:17px;font-weight:700;line-height:1.1;letter-spacing:-.3px; }
.sb-brand .t2{ font-size:11px;color:#8b95a3;margin-top:3px; }

.sb-nav{ padding:8px 9px 0; display:flex; flex-direction:column; gap:2px; }
.sb-item{
  display:flex;align-items:center;gap:13px;
  height:48px;padding:0 14px;border-radius:9px;
  color:#c3cad4;text-decoration:none;font-size:15px;font-weight:500;
  cursor:pointer;
}
.sb-item svg{ width:22px;height:22px;flex:0 0 22px;opacity:.85; }
.sb-item:hover{ background:rgba(255,255,255,.06); color:#fff; }
.sb-item.active{
  background:var(--primary);
  color:#fff;
  box-shadow:0 6px 16px rgba(6,89,224,.35);
}
.sb-item.active svg{ opacity:1; }

.sb-spacer{ flex:1 1 auto; }

.sb-status{
  margin:0 11px 12px;
  background:#161d25;
  border:1px solid var(--sidebar-line);
  border-radius:11px;
  padding:11px 13px;
}
.sb-status h4{
  margin:0 0 9px;font-size:13px;font-weight:700;color:#dfe4ea;
  display:flex;align-items:center;gap:7px;
}
.sb-status h4::before{
  content:"";width:8px;height:8px;border-radius:50%;background:var(--green);
  box-shadow:0 0 0 3px rgba(22,163,74,.18);
}
.sb-status .row{
  display:flex;justify-content:space-between;align-items:center;
  font-size:12px;color:#9aa3ad;padding:5px 0;
  cursor:pointer;border-radius:5px;
}
.sb-status .row:hover{ background:rgba(255,255,255,.04); }
.sb-status .row b{ color:#7fd49a;font-weight:600;font-size:12px; }
.sb-status .row b.ok{ color:#7fd49a; }
.sb-status .row b.warn{ color:#facc15; }
.sb-status .row b.error{ color:#f87171; }
.sb-logout{
  margin:0 14px 22px;height:43px;border-radius:9px;
  border:1px solid var(--sidebar-line);
  background:#222b35;color:#cfd6de;
  display:flex;align-items:center;justify-content:center;gap:9px;
  font-size:14px;font-weight:600;cursor:pointer;text-decoration:none;
}
.sb-logout:hover{ background:#2a3440; }
.sb-logout svg{ width:18px;height:18px; }

/* ---------- Main column ---------- */
.main{
  flex:1 1 auto;
  min-width:0;
  display:flex;
  flex-direction:column;
}

/* ---------- Topbar ---------- */
.topbar{
  position:relative;
  height:var(--top-h);
  background:var(--bg-panel);
  border-bottom:1px solid var(--border);
  display:flex;align-items:center;gap:16px;
  padding:0 22px;
  flex:0 0 var(--top-h);
}
.tb-burger{
  width:34px;height:34px;border-radius:8px;border:1px solid var(--border);
  background:#fff;display:flex;align-items:center;justify-content:center;cursor:pointer;color:#4b5563;
}
.tb-burger svg{ width:18px;height:18px; }
.tb-incident{
  display:flex;align-items:center;gap:10px;
  height:42px;padding:0 14px;border:1px solid var(--border);border-radius:9px;
  background:#fbfcfd;min-width:430px;cursor:pointer;
}
.tb-incident .pill{
  background:var(--green-soft);color:var(--green);font-size:13px;font-weight:700;
  padding:4px 10px;border-radius:6px;border:1px solid #bfe6cb;
}
.tb-incident .txt{ font-size:15px;font-weight:600;color:#374151;white-space:nowrap; }
.tb-incident .chev{ margin-left:auto;color:#9aa0aa; }
.incident-menu{
  position:absolute;left:72px;top:58px;width:430px;z-index:80;
  display:none;background:#fff;border:1px solid var(--border);border-radius:10px;
  box-shadow:0 18px 46px rgba(15,23,42,.18);padding:8px;
}
.incident-menu.open{ display:block; }
.incident-menu-h{ padding:8px 10px 9px;color:var(--text-3);font-size:12px;font-weight:800;border-bottom:1px solid var(--border-2); }
.incident-menu button{
  width:100%;border:0;background:transparent;border-radius:8px;padding:10px;
  display:grid;gap:4px;text-align:left;cursor:pointer;font-family:inherit;color:#27303a;
}
.incident-menu button:hover,.incident-menu button.active{ background:var(--blue-soft); }
.incident-menu button b{ font-size:14px;font-weight:800; }
.incident-menu button span{ font-size:12px;color:var(--text-2);overflow:hidden;text-overflow:ellipsis;white-space:nowrap; }
.incident-menu a{ display:block;margin-top:5px;padding:9px 10px;border-top:1px solid var(--border-2);color:var(--link);font-size:13px;font-weight:800;text-decoration:none; }

.tb-search{
  flex:1 1 auto;max-width:360px;height:42px;position:relative;
}
.tb-search input{
  width:100%;height:100%;border:1px solid var(--border);border-radius:9px;
  padding:0 40px 0 14px;font-size:14px;color:#374151;background:#fff;font-family:inherit;
}
.tb-search input::placeholder{ color:#9aa0aa; }
.tb-search .ico{ position:absolute;right:13px;top:50%;transform:translateY(-50%);color:#9aa0aa; }

.tb-right{ display:flex;align-items:center;gap:18px;margin-left:auto; }
.tb-ico-btn{ position:relative;display:flex;align-items:center;gap:7px;color:#4b5563;cursor:pointer;font-size:14px;font-weight:600; }
.tb-ico-btn svg{ width:22px;height:22px; }
.tb-badge{
  position:absolute;top:-7px;left:13px;background:var(--red);color:#fff;
  font-size:10px;font-weight:700;line-height:1;padding:2px 5px;border-radius:9px;border:2px solid #fff;
}
.tb-divider{ width:1px;height:30px;background:var(--border); }
.tb-user{ display:flex;align-items:center;gap:10px;cursor:pointer; }
.tb-user img{ width:40px;height:40px;border-radius:50%;object-fit:cover;border:2px solid #e8ebef; }
.tb-user .nm{ font-size:14px;font-weight:700;color:#2b2f36;line-height:1.2; }
.tb-user .org{ font-size:11px;color:#8a8f99;margin-top:2px; }
.tb-user .chev{ color:#9aa0aa; }

/* ---------- Generic content ---------- */
.content{ flex:1 1 auto; padding:22px 24px; overflow:auto; }
.page-head{ display:flex;align-items:flex-end;gap:14px;margin-bottom:18px; }
.page-head h1{ font-size:25px;font-weight:800;letter-spacing:-.6px;margin:0;color:#1f2530; }
.page-head .sub{ font-size:13px;color:var(--text-3);margin-bottom:3px; }

.card{
  background:var(--bg-panel);border:1px solid var(--border);border-radius:var(--radius);
  box-shadow:var(--shadow);
}
.btn{
  display:inline-flex;align-items:center;gap:8px;height:36px;padding:0 16px;border-radius:9px;
  font-size:14px;font-weight:600;border:1px solid var(--border);background:#fff;color:#374151;cursor:pointer;font-family:inherit;
}
.btn svg{ width:16px;height:16px; }
.btn.primary{ background:var(--primary);border-color:var(--primary);color:#fff; }
.btn.primary:hover{ background:var(--primary-700); }
.btn:hover{ background:#f6f7f9; }
.btn.primary:hover{ background:var(--primary-700); }