/* BosLog — Yönetim Konsolu. Design tokens lifted verbatim from the approved
   "BosLog Yonetim Konsolu-2" mockup so the console matches it 1:1. */
:root {
  --bos-white:#FFFFFF;
  --bos-ink:#151515; --bos-ink-800:#202020; --bos-ink-900:#12131A;
  --bos-gray-100:#FAFAFA; --bos-gray-150:#F2F2F2; --bos-gray-200:#E0E0E0;
  --bos-gray-300:#CCCCCC; --bos-gray-400:#B3B3B3; --bos-gray-600:#828282;
  --bos-blue-50:#EDF3FE; --bos-blue-100:#DCE8FD; --bos-blue-300:#93B8F7;
  --bos-blue-500:#5C96F3; --bos-blue-600:#2A6FDB; --bos-blue-700:#0050B5; --bos-blue-800:#003C87;
  --bos-navy-700:#1C2740; --bos-navy-800:#131A2E; --bos-navy-900:#0B1020;
  --bos-slate-500:#696C80; --bos-slate-600:#545F71;
  --bos-green-100:#E3F4EA; --bos-green-500:#1F9D55;
  --bos-red-100:#FBE5E5; --bos-red-500:#D85757; --bos-red-600:#C13E3E;
  --bos-amber-100:#FBF0D3; --bos-amber-500:#E3A008;
  --bos-cyan-400:#4FD1E0;
  --font-brand:"Titillium Web","Segoe UI",system-ui,sans-serif;
  --font-mono:"Roboto Mono",ui-monospace,Menlo,monospace;
  --hairline:1px solid #E3E7EE;
  --radius-lg:12px; --radius-md:9px; --radius-pill:999px;
  --shadow-sm:0 1px 3px rgba(20,30,54,.08);
  --shadow-md:0 6px 18px rgba(20,30,54,.10);
  --shadow-lg:0 18px 44px rgba(20,30,54,.16);
}

* { box-sizing:border-box; }
html,body { height:100%; margin:0; }
body {
  font-family:var(--font-brand); color:var(--bos-ink);
  background:var(--bos-gray-150);
  -webkit-font-smoothing:antialiased;
}
button { font-family:inherit; cursor:pointer; }
.hidden { display:none !important; }

/* ============ LOGIN ============ */
#login {
  position:fixed; inset:0; z-index:50;
  display:flex; align-items:center; justify-content:center;
  background:radial-gradient(1200px 600px at 30% -10%, #1C2740 0%, var(--bos-navy-900) 60%);
}
.login-card {
  width:380px; max-width:92vw; background:var(--bos-white);
  border-radius:var(--radius-lg); box-shadow:var(--shadow-lg); padding:32px 30px;
}
.login-brand { display:flex; align-items:center; gap:12px; margin-bottom:6px; }
.login-brand .logo { width:42px; height:42px; object-fit:contain; display:block; }
.login-brand h1 { font:800 22px/1 var(--font-brand); margin:0; color:var(--bos-navy-800); }
.login-brand .sub { font:600 12px/1.3 var(--font-brand); color:var(--bos-slate-500); }
.login-card p.hint { color:var(--bos-slate-500); font-size:13px; margin:2px 0 22px; }
.field { margin-bottom:14px; }
.field label { display:block; font:600 12px/1 var(--font-brand); color:var(--bos-slate-600); margin-bottom:6px; }
.field input {
  width:100%; padding:11px 12px; border:var(--hairline); border-radius:var(--radius-md);
  font:400 15px/1 var(--font-brand); background:var(--bos-gray-100); outline:none;
}
.field input:focus { border-color:var(--bos-blue-500); background:#fff; box-shadow:0 0 0 3px var(--bos-blue-50); }
.btn-primary {
  width:100%; padding:12px; border:none; border-radius:var(--radius-md); color:#fff;
  background:linear-gradient(180deg,var(--bos-blue-600),var(--bos-blue-700));
  font:700 15px/1 var(--font-brand); box-shadow:var(--shadow-sm);
}
.btn-primary:hover { filter:brightness(1.04); }
.login-warn { color:var(--bos-red-600); font-size:13px; min-height:18px; margin-top:8px; }

/* ============ APP SHELL ============ */
#app { display:grid; grid-template-columns:74px 1fr; height:100vh; }

/* left rail */
.rail { background:var(--bos-navy-900); display:flex; flex-direction:column; align-items:center; padding:0 0 14px; gap:6px; }
/* logo occupies the header band so its base lines up with the 60px topbar */
.rail .brandmark { width:68px; height:60px; margin-bottom:14px; object-fit:contain; display:block; }
.rail .navitem {
  width:52px; padding:9px 0 7px; border-radius:var(--radius-md); background:transparent; border:none;
  color:#8A93AD; display:flex; flex-direction:column; align-items:center; gap:4px; position:relative;
}
.rail .navitem svg { width:22px; height:22px; }
.rail .navitem .lbl { font:600 10px/1 var(--font-brand); }
.rail .navitem:hover { background:rgba(255,255,255,.06); color:#C7D0E6; }
.rail .navitem.active { background:var(--bos-blue-700); color:#fff; }
.rail .navitem .badge {
  position:absolute; top:4px; right:8px; min-width:16px; height:16px; padding:0 4px;
  background:var(--bos-red-500); color:#fff; border-radius:var(--radius-pill);
  font:700 10px/16px var(--font-brand); text-align:center;
}
.rail .spacer { flex:1; }
.rail .avatar {
  width:40px; height:40px; border-radius:50%; background:var(--bos-blue-600); color:#fff;
  display:flex; align-items:center; justify-content:center; font:700 15px/1 var(--font-brand);
  border:2px solid rgba(255,255,255,.25); cursor:pointer;
}

/* main column */
.main { display:flex; flex-direction:column; min-width:0; background:var(--bos-gray-150); }
.topbar {
  height:60px; flex:0 0 60px; background:#fff; border-bottom:var(--hairline);
  display:flex; align-items:center; justify-content:space-between; padding:0 22px;
}
.topbar h2 { font:800 19px/1 var(--font-brand); margin:0; color:var(--bos-navy-800); }
.topbar .sub { font:500 12px/1.3 var(--font-brand); color:var(--bos-slate-500); }
.status-badge {
  display:inline-flex; align-items:center; gap:8px; padding:7px 13px; border-radius:var(--radius-pill);
  background:var(--bos-green-100); color:var(--bos-green-500); font:700 13px/1 var(--font-brand);
}
.status-badge .dot { width:8px; height:8px; border-radius:50%; background:var(--bos-green-500); }
.content { flex:1; overflow:auto; padding:22px; position:relative; }
.content.nopad { padding:0; }

/* cards & bits */
.card { background:#fff; border:var(--hairline); border-radius:var(--radius-lg); box-shadow:var(--shadow-sm); }
.card .hd { padding:14px 16px; border-bottom:var(--hairline); font:700 14px/1 var(--font-brand); color:var(--bos-navy-800); display:flex; justify-content:space-between; align-items:center; }
.card .bd { padding:14px 16px; }
.grid4 { display:grid; grid-template-columns:repeat(4,1fr); gap:16px; margin-bottom:16px; }
.grid2 { display:grid; grid-template-columns:1.2fr 1fr; gap:16px; }
@media (max-width:900px){ .grid4{grid-template-columns:repeat(2,1fr);} .grid2{grid-template-columns:1fr;} }

.stat { background:#fff; border:var(--hairline); border-radius:var(--radius-lg); box-shadow:var(--shadow-sm); padding:16px 18px; }
.stat .k { font:800 30px/1 var(--font-brand); color:var(--bos-navy-800); }
.stat .l { font:600 12px/1 var(--font-brand); color:var(--bos-slate-500); margin-top:8px; text-transform:uppercase; letter-spacing:.4px; }
.stat .ic { float:right; width:38px; height:38px; border-radius:var(--radius-md); display:flex; align-items:center; justify-content:center; }

.dot { width:9px; height:9px; border-radius:50%; display:inline-block; }
.dot.on { background:var(--bos-green-500); } .dot.off { background:var(--bos-gray-400); }
.dot.hi { background:var(--bos-red-500); } .dot.mid { background:var(--bos-amber-500); } .dot.lo { background:var(--bos-gray-400); }

.row { display:flex; align-items:center; gap:12px; padding:10px 4px; border-bottom:1px solid var(--bos-gray-150); }
.row:last-child { border-bottom:none; }
.row .grow { flex:1; min-width:0; }
.row .name { font:600 14px/1.2 var(--font-brand); color:var(--bos-ink-800); }
.row .meta { font:500 12px/1.3 var(--font-brand); color:var(--bos-slate-500); }
.chip { display:inline-flex; align-items:center; gap:6px; padding:3px 10px; border-radius:var(--radius-pill); font:700 11px/1.4 var(--font-brand); }
.chip.blue { background:var(--bos-blue-50); color:var(--bos-blue-700); }
.chip.green { background:var(--bos-green-100); color:var(--bos-green-500); }
.chip.red { background:var(--bos-red-100); color:var(--bos-red-600); }
.chip.gray { background:var(--bos-gray-150); color:var(--bos-slate-600); }

.avatar-sm { width:34px; height:34px; border-radius:50%; display:flex; align-items:center; justify-content:center; color:#fff; font:700 13px/1 var(--font-brand); flex:0 0 auto; }

.btn { padding:8px 14px; border-radius:var(--radius-md); border:var(--hairline); background:#fff; font:700 13px/1 var(--font-brand); color:var(--bos-navy-800); }
.btn:hover { background:var(--bos-gray-100); }
.btn.primary { background:var(--bos-blue-700); color:#fff; border-color:transparent; }
.btn.primary:hover { filter:brightness(1.06); }
.btn.danger { color:var(--bos-red-600); border-color:var(--bos-red-100); }
.btn.sm { padding:6px 10px; font-size:12px; }
.btn.ghost { border-color:transparent; background:transparent; color:var(--bos-blue-700); }

.feed-item { display:flex; gap:11px; padding:11px 4px; border-bottom:1px solid var(--bos-gray-150); }
.feed-item .fic { width:30px; height:30px; border-radius:var(--radius-md); flex:0 0 auto; display:flex; align-items:center; justify-content:center; }
.feed-item .ft { font:600 13px/1.35 var(--font-brand); color:var(--bos-ink-800); }
.feed-item .fm { font:500 11px/1.3 var(--font-brand); color:var(--bos-gray-600); margin-top:2px; }

/* ============ MAP ============ */
#mapwrap { position:absolute; inset:0; display:flex; }
#map { flex:1; min-width:0; background:var(--bos-navy-900); }
.leaflet-container { background:var(--bos-navy-900); font-family:var(--font-brand); }
.map-side { width:320px; flex:0 0 320px; background:#fff; border-left:var(--hairline); display:flex; flex-direction:column; }
.map-side .hd { padding:14px 16px; border-bottom:var(--hairline); font:800 15px/1 var(--font-brand); color:var(--bos-navy-800); }
.map-side .bd { flex:1; overflow:auto; padding:8px 12px; }
.map-zoom { position:absolute; top:14px; right:334px; display:flex; flex-direction:column; gap:6px; z-index:600; }
.map-zoom button { width:38px; height:38px; border-radius:var(--radius-md); background:#fff; border:var(--hairline); box-shadow:var(--shadow-md); font:700 20px/1 var(--font-brand); color:var(--bos-navy-800); }
.map-legend { position:absolute; left:14px; bottom:14px; z-index:600; background:rgba(255,255,255,.94); border:var(--hairline); border-radius:var(--radius-md); box-shadow:var(--shadow-md); padding:9px 12px; display:flex; gap:14px; font:600 12px/1 var(--font-brand); color:var(--bos-slate-600); }
.map-legend span { display:inline-flex; align-items:center; gap:6px; }
.map-tools { position:absolute; top:14px; left:14px; z-index:600; display:flex; gap:8px; }
.map-tools button { display:inline-flex; align-items:center; gap:6px; padding:9px 13px; border-radius:var(--radius-md); background:#fff; border:var(--hairline); box-shadow:var(--shadow-md); font:700 12px/1 var(--font-brand); color:var(--bos-navy-800); }
.map-tools button span { font-size:14px; line-height:1; }
.map-tools button:hover { background:var(--bos-gray-100); }
.map-tools button.on { background:var(--bos-blue-700); color:#fff; border-color:transparent; }
.map-readout { position:absolute; left:50%; bottom:64px; transform:translateX(-50%); z-index:600; background:var(--bos-navy-800); color:#fff; padding:9px 16px; border-radius:var(--radius-pill); box-shadow:var(--shadow-lg); font:700 13px/1.3 var(--font-brand); text-align:center; }
.map-readout .sub { font:500 11px/1.3 var(--font-brand); opacity:.75; margin-top:2px; }
.leaflet-popup-content { font-family:var(--font-brand); margin:12px 14px; }
.leaflet-popup-content .btn { margin-top:6px; }
.pop-acts { display:flex; gap:6px; margin-top:8px; }

/* team cluster marker */
.team-marker { display:flex; flex-direction:column; align-items:center; }
.team-marker .count { min-width:30px; height:30px; padding:0 5px; border-radius:15px; background:#fff; border:3px solid var(--bos-blue-600); display:flex; align-items:center; justify-content:center; font:700 13px/1 var(--font-brand); box-shadow:var(--shadow-md); }
.team-marker .chip2 { margin-top:5px; padding:2px 9px; border-radius:var(--radius-pill); background:#fff; box-shadow:var(--shadow-sm); font:700 10px/1.4 var(--font-brand); white-space:nowrap; border:var(--hairline); }
.mem-marker { width:16px; height:16px; border-radius:50%; border:3px solid #fff; box-shadow:var(--shadow-md); }
/* member pin: dot + name-surname label underneath (no popup) */
.mem-wrap { display:flex; flex-direction:column; align-items:center; }
.mem-dot-holder { position:relative; width:16px; height:16px; }
.mem-chip { margin-top:5px; padding:2px 8px; border-radius:var(--radius-pill); background:#fff; border:1px solid var(--bos-gray-200); box-shadow:var(--shadow-sm); font:700 10px/1.4 var(--font-brand); color:var(--bos-navy-800); white-space:nowrap; }
/* shared marker (pin / area) label under the icon */
.mk-wrap { display:flex; flex-direction:column; align-items:center; cursor:pointer; }
.mk-pin { line-height:0; filter:drop-shadow(0 2px 3px rgba(20,30,54,.35)); }
.mk-ring { width:14px; height:14px; border-radius:50%; border:3px solid; background:rgba(255,255,255,.55); box-shadow:var(--shadow-sm); }

/* member detail (right side panel) — BosApp-like card */
.mem-detail { display:flex; align-items:center; gap:12px; margin-bottom:14px; }
.mem-avatar { width:46px; height:46px; border-radius:50%; display:flex; align-items:center; justify-content:center; color:#fff; font:800 17px/1 var(--font-brand); flex:0 0 auto; box-shadow:var(--shadow-sm); }
.mem-name { font:800 16px/1.2 var(--font-brand); color:var(--bos-navy-800); margin-bottom:5px; }
.info-row { display:flex; justify-content:space-between; align-items:center; gap:12px; padding:10px 0; border-bottom:1px solid var(--bos-gray-150); }
.info-row .info-k { font:600 12px/1 var(--font-brand); color:var(--bos-slate-500); }
.info-row .info-v { font:600 13px/1.3 var(--font-brand); color:var(--bos-ink-800); text-align:right; }
.info-v.mono { font-family:var(--font-mono); font-weight:400; font-size:12px; }
.mem-actions { display:grid; grid-template-columns:1fr 1fr; gap:8px; margin-top:14px; }
.mem-actions .btn { width:100%; justify-content:center; text-align:center; }
.mem-actions .btn.wide { grid-column:1 / -1; }

/* in-map placement panel (İşaret / Alan) — replaces browser prompts */
.place-panel { position:absolute; left:50%; bottom:56px; transform:translateX(-50%); z-index:650; width:340px; max-width:92%; background:#fff; border:var(--hairline); border-radius:var(--radius-lg); box-shadow:var(--shadow-lg); padding:16px 18px; }
.place-panel h3 { margin:0 0 4px; font:800 15px/1 var(--font-brand); color:var(--bos-navy-800); display:flex; align-items:center; gap:8px; }
.place-panel .pp-sub { font:500 12px/1.3 var(--font-brand); color:var(--bos-slate-500); margin-bottom:12px; }
.place-panel input[type=text] { width:100%; padding:10px 12px; border:var(--hairline); border-radius:var(--radius-md); background:var(--bos-gray-100); font:400 14px/1 var(--font-brand); outline:none; }
.place-panel input[type=text]:focus { background:#fff; border-color:var(--bos-blue-500); box-shadow:0 0 0 3px var(--bos-blue-50); }
.pp-diam { margin-top:12px; }
.pp-diam-head { display:flex; justify-content:space-between; font:600 12px/1 var(--font-brand); color:var(--bos-slate-600); margin-bottom:7px; }
.pp-diam-val { font:800 13px/1 var(--font-brand); color:var(--bos-blue-700); }
.place-panel input[type=range] { width:100%; accent-color:var(--bos-blue-600); }
.pp-color { margin-top:12px; }
.pp-color-head { font:600 12px/1 var(--font-brand); color:var(--bos-slate-600); margin-bottom:7px; }
.pp-colors { display:flex; gap:10px; }
.pp-sw { width:30px; height:30px; border-radius:50%; border:2px solid #fff; box-shadow:0 0 0 1px rgba(0,0,0,.15); cursor:pointer; padding:0; transition:transform .1s, box-shadow .1s; }
.pp-sw:hover { transform:scale(1.08); }
.pp-sw.active { box-shadow:0 0 0 2px #fff, 0 0 0 4px var(--bos-blue-600); transform:scale(1.08); }
.pp-acts { display:flex; gap:10px; margin-top:14px; }
.pp-acts .btn { flex:1; justify-content:center; text-align:center; }
@keyframes bosPulse { 0%{transform:scale(.6);opacity:.55;} 100%{transform:scale(2.1);opacity:0;} }
/* Dalga yalnızca yeni konum alındığında çizilir (app.js locFresh); TEK
   yineleme ile kendini bitirir, LOC_PULSE_MS dolunca yeniden çizimle kalkar. */
.pulse { position:absolute; left:50%; top:50%; width:34px; height:34px; margin:-17px 0 0 -17px; border-radius:50%; animation:bosPulse 2.2s ease-out 1; z-index:-1; }

/* ============ CHAT ============ */
#chatwrap { position:absolute; inset:0; display:flex; }
.chan-list { width:290px; flex:0 0 290px; background:#fff; border-right:var(--hairline); overflow:auto; }
.chan-new { padding:10px 12px; border-bottom:1px solid var(--bos-gray-150); }
.chan-new .btn { width:100%; justify-content:center; }
.chan-sep { font:700 10px/1 var(--font-brand); letter-spacing:.06em; text-transform:uppercase; color:var(--bos-slate-500); padding:12px 14px 5px; }
.chan { display:flex; gap:11px; padding:12px 14px; border-bottom:1px solid var(--bos-gray-150); cursor:pointer; }
.chan:hover { background:var(--bos-gray-100); } .chan.active { background:var(--bos-blue-50); }
.chan .grow { flex:1; min-width:0; }
.chan .top { display:flex; justify-content:space-between; }
.chan .cn { font:700 14px/1.2 var(--font-brand); color:var(--bos-ink-800); }
.chan .ct { font:500 11px/1 var(--font-brand); color:var(--bos-gray-600); }
.chan .cm { font:500 12px/1.3 var(--font-brand); color:var(--bos-slate-500); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; margin-top:3px; }
.chan .unread { min-width:18px; height:18px; padding:0 5px; border-radius:var(--radius-pill); background:var(--bos-blue-700); color:#fff; font:700 11px/18px var(--font-brand); text-align:center; }
.chat-main { flex:1; display:flex; flex-direction:column; min-width:0; background:var(--bos-gray-100); }
.chat-hd { height:56px; flex:0 0 56px; background:#fff; border-bottom:var(--hairline); display:flex; align-items:center; justify-content:space-between; padding:0 18px; }
.chat-stream { flex:1; overflow:auto; padding:18px; display:flex; flex-direction:column; gap:10px; }
.bubble { max-width:64%; padding:9px 13px; border-radius:14px; font:500 14px/1.4 var(--font-brand); box-shadow:var(--shadow-sm); }
.bubble .who { font:700 11px/1 var(--font-brand); margin-bottom:4px; opacity:.75; }
.bubble .tm { font:500 10px/1 var(--font-brand); opacity:.6; margin-top:5px; text-align:right; }
.msg { display:flex; }
.msg.me { justify-content:flex-end; } .msg.me .bubble { background:var(--bos-blue-700); color:#fff; border-bottom-right-radius:4px; }
.msg.them .bubble { background:#fff; color:var(--bos-ink-800); border-bottom-left-radius:4px; }
/* Paylaşılan konum baloncuğu (BosApp ChatDetail konum kartı karşılığı) */
.bubble.has-loc { padding:8px 8px 6px; }
.loc-card { cursor:pointer; }
.loc-head { display:flex; align-items:center; gap:5px; font:600 12px/1 var(--font-brand); margin:1px 3px 6px; }
.loc-map { position:relative; width:220px; height:120px; max-width:100%; border-radius:10px; overflow:hidden; background:var(--bos-gray-150); }
.loc-map img { position:absolute; width:256px; height:256px; user-select:none; pointer-events:none; }
.loc-pin { position:absolute; left:50%; top:50%; transform:translate(-50%,-100%); color:#E5484D; filter:drop-shadow(0 1px 2px rgba(0,0,0,.55)); display:flex; }
.loc-pin svg { width:24px; height:24px; }
.chat-input { flex:0 0 auto; background:#fff; border-top:var(--hairline); padding:12px 16px; display:flex; gap:10px; }
.chat-input input { flex:1; padding:11px 14px; border:var(--hairline); border-radius:var(--radius-pill); font:400 14px/1 var(--font-brand); background:var(--bos-gray-100); outline:none; }
.chat-input input:focus { background:#fff; border-color:var(--bos-blue-500); }

/* ============ TASKS ============ */
.task-cols { display:grid; grid-template-columns:repeat(3,1fr); gap:16px; }
@media (max-width:900px){ .task-cols{grid-template-columns:1fr;} }
.task-col { background:#fff; border:var(--hairline); border-radius:var(--radius-lg); box-shadow:var(--shadow-sm); display:flex; flex-direction:column; min-height:120px; }
.task-col .ch { padding:13px 15px; border-bottom:var(--hairline); font:800 13px/1 var(--font-brand); color:var(--bos-navy-800); display:flex; justify-content:space-between; }
.task-col .cb { padding:12px; display:flex; flex-direction:column; gap:10px; }
.task { border:var(--hairline); border-radius:var(--radius-md); padding:11px 12px; background:var(--bos-gray-100); }
.task .tt { display:flex; align-items:center; gap:8px; font:700 14px/1.25 var(--font-brand); color:var(--bos-ink-800); }
.task .tn { font:500 12px/1.35 var(--font-brand); color:var(--bos-slate-500); margin:5px 0 8px; }
.task .tf { display:flex; align-items:center; justify-content:space-between; gap:8px; }
.task .who2 { font:600 12px/1 var(--font-brand); color:var(--bos-blue-700); }
.task .loc { font:500 11px/1 var(--font-brand); color:var(--bos-gray-600); display:inline-flex; align-items:center; gap:4px; }
.task .adv { border:none; background:transparent; color:var(--bos-blue-700); font:700 12px/1 var(--font-brand); }

/* ============ NETWORK ============ */
.team-card { background:#fff; border:var(--hairline); border-radius:var(--radius-lg); box-shadow:var(--shadow-sm); margin-bottom:16px; }
.team-card .th { padding:14px 16px; border-bottom:var(--hairline); display:flex; align-items:center; gap:12px; }
.team-card .th .badge { width:38px; height:38px; border-radius:var(--radius-md); display:flex; align-items:center; justify-content:center; color:#fff; font:800 14px/1 var(--font-brand); }
.team-card .th .tn { font:800 15px/1 var(--font-brand); color:var(--bos-navy-800); }
.team-card .th .tm { font:500 12px/1.3 var(--font-brand); color:var(--bos-slate-500); margin-top:3px; }
.team-card .tacts { margin-left:auto; display:flex; gap:8px; }
.team-card .tb { padding:6px 16px 14px; }

.net-switch { padding:8px 12px; border:var(--hairline); border-radius:var(--radius-md); background:var(--bos-gray-100); font:800 14px/1 var(--font-brand); color:var(--bos-navy-800); outline:none; cursor:pointer; }
.net-switch:focus { border-color:var(--bos-blue-500); background:#fff; }

/* ---- davet yaşam döngüsü (BosApp NetworksScreen eşleniği) ---- */
/* Durum rozeti — renkler BosApp getInviteStatusBadge ile inline verilir */
.inv-badge { display:inline-flex; align-items:center; padding:3px 10px; border-radius:var(--radius-pill); font:700 11px/1.4 var(--font-brand); white-space:nowrap; flex:0 0 auto; }
/* Tekrar dene — BosApp RetryIcon (turuncu) ikon butonu */
.retry-btn { width:30px; height:30px; border-radius:var(--radius-md); border:1px solid #FFE0B2; background:#FFF3E0; display:inline-flex; align-items:center; justify-content:center; padding:0; flex:0 0 auto; }
.retry-btn:hover { background:#FFE7C2; }
/* Gelen ağ daveti kartı — BosApp amber "Bekleyen Davetler" kartı */
.invite-card { display:flex; align-items:center; gap:12px; background:#FFF8E1; border:1px solid #FFE082; border-left:3px solid #FFB300; border-radius:var(--radius-lg); padding:14px 16px; margin-bottom:8px; box-shadow:var(--shadow-sm); }
.invite-card .inv-type { font:700 11px/1 var(--font-brand); color:#B8860B; text-transform:uppercase; letter-spacing:.4px; }
.invite-card .inv-name { font:800 15px/1.3 var(--font-brand); color:var(--bos-navy-800); margin-top:3px; }
.invite-card .inv-sender { font:500 12px/1.3 var(--font-brand); color:var(--bos-slate-600); margin-top:2px; }
.invite-card .inv-accept { background:var(--bos-green-500); color:#fff; border-color:transparent; }
.invite-card .inv-accept:hover { filter:brightness(1.06); background:var(--bos-green-500); }
.invite-card .inv-reject { background:#fff; color:var(--bos-red-600); border-color:var(--bos-red-100); }
/* kalem (ad düzenleme) mini butonu */
.edit-btn { border:none; background:transparent; color:var(--bos-gray-600); font-size:13px; padding:2px 4px; border-radius:6px; line-height:1; vertical-align:middle; }
.edit-btn:hover { background:var(--bos-gray-150); color:var(--bos-navy-800); }
/* bölüm içi küçük başlık (Üyeler / Gruplar) */
.sec-label { font:700 11px/1 var(--font-brand); letter-spacing:.06em; text-transform:uppercase; color:var(--bos-slate-500); margin:2px 0 6px; }
/* otomatik ID önizleme kutusu (Ağ ID / Grup Index) */
.gen-id { display:flex; align-items:center; justify-content:space-between; gap:10px; background:var(--bos-gray-100); border:var(--hairline); border-radius:var(--radius-md); padding:10px 12px; }
.gen-id span { font:700 15px/1 var(--font-mono); color:var(--bos-blue-700); letter-spacing:.5px; }
/* onay metni + kırmızı onay butonu */
.confirm-text { margin:2px 0 4px; font:600 14px/1.55 var(--font-brand); color:var(--bos-ink-800); }
.btn.danger-solid { background:var(--bos-red-600); color:#fff; border-color:transparent; }
.btn.danger-solid:hover { filter:brightness(1.06); background:var(--bos-red-600); }
/* kişi seçim modalı (BosApp Contact Selection) */
.pick-search { display:flex; align-items:center; gap:8px; margin-bottom:10px; }
.pick-search input { flex:1; padding:10px 12px; border:var(--hairline); border-radius:var(--radius-md); background:var(--bos-gray-100); font:400 14px/1 var(--font-brand); outline:none; }
.pick-search input:focus { background:#fff; border-color:var(--bos-blue-500); box-shadow:0 0 0 3px var(--bos-blue-50); }
.pick-row.sel { background:var(--bos-blue-50); }
.pick-row.sel:hover { background:var(--bos-blue-100); }
.pick-check { width:22px; height:22px; border-radius:50%; background:var(--bos-blue-700); color:#fff; display:inline-flex; align-items:center; justify-content:center; font:800 12px/1 var(--font-brand); flex:0 0 auto; }

/* modal */
.modal-bg { position:fixed; inset:0; background:rgba(11,16,32,.5); z-index:1000; display:flex; align-items:center; justify-content:center; }
.modal { width:420px; max-width:92vw; background:#fff; border-radius:var(--radius-lg); box-shadow:var(--shadow-lg); overflow:hidden; }
.modal .mh { padding:16px 20px; border-bottom:var(--hairline); font:800 16px/1 var(--font-brand); color:var(--bos-navy-800); }
.modal .mb { padding:18px 20px; max-height:70vh; overflow:auto; }
.modal .mf { padding:14px 20px; border-top:var(--hairline); display:flex; justify-content:flex-end; gap:10px; }
select, textarea { font-family:var(--font-brand); }
.field select, .field textarea { width:100%; padding:10px 12px; border:var(--hairline); border-radius:var(--radius-md); background:var(--bos-gray-100); font:400 14px/1.3 var(--font-brand); outline:none; }
/* görev konum satırı */
.tk-loc { display:flex; align-items:center; gap:10px; }
.tk-loc #tk-loc-txt { flex:1; font:500 13px/1.3 var(--font-brand); }
.tk-loc #tk-loc-txt.set { color:var(--bos-navy-800); font-weight:700; }
/* yeni sohbet seçici */
.pick-list { max-height:240px; overflow:auto; display:flex; flex-direction:column; gap:2px; }
.pick-row { display:flex; align-items:center; gap:11px; padding:8px 10px; border:none; background:transparent; border-radius:var(--radius-md); cursor:pointer; text-align:left; width:100%; }
.pick-row:hover { background:var(--bos-gray-100); }
.pick-row .grow { display:flex; flex-direction:column; min-width:0; }
.pick-name { font:700 14px/1.2 var(--font-brand); color:var(--bos-ink-800); }
.pick-meta { font:500 12px/1.3 var(--font-brand); color:var(--bos-slate-500); }
.pick-add { margin-top:14px; border-top:var(--hairline); padding-top:14px; }
.pick-add-h { font:700 12px/1 var(--font-brand); color:var(--bos-slate-600); margin-bottom:9px; }
.pick-add-row { display:flex; gap:8px; }
.pick-add input { width:100%; padding:10px 12px; border:var(--hairline); border-radius:var(--radius-md); background:var(--bos-gray-100); font:400 14px/1 var(--font-brand); outline:none; margin-top:8px; }
.pick-add-row input { margin-top:0; }
.pick-add #nc-add { width:100%; justify-content:center; }

/* toast */
#toast { position:fixed; bottom:22px; left:50%; transform:translateX(-50%); z-index:1300; display:flex; flex-direction:column; gap:8px; align-items:center; }
.toast { background:var(--bos-navy-800); color:#fff; padding:10px 18px; border-radius:var(--radius-pill); font:600 13px/1 var(--font-brand); box-shadow:var(--shadow-lg); }

/* message delivery info icon + right drawer */
.msg-info { cursor:pointer; display:inline-block; margin-left:2px; opacity:.85; font-size:12px; }
.msg-info:hover { opacity:1; }
.drawer-backdrop { position:fixed; inset:0; background:rgba(11,16,32,.35); z-index:980; }
.drawer { position:fixed; top:0; right:0; width:360px; max-width:92vw; height:100vh; background:#fff; box-shadow:var(--shadow-lg); z-index:981; display:flex; flex-direction:column; animation:drawerIn .18s ease-out; }
@keyframes drawerIn { from { transform:translateX(24px); opacity:.4; } to { transform:none; opacity:1; } }
.drawer-hd { height:56px; flex:0 0 56px; border-bottom:var(--hairline); display:flex; align-items:center; justify-content:space-between; padding:0 16px; font:800 16px/1 var(--font-brand); color:var(--bos-navy-800); }
.drawer-bd { flex:1; overflow:auto; padding:16px; }
.mi-msg { background:var(--bos-blue-50); border:1px solid var(--bos-blue-100); border-radius:var(--radius-md); padding:12px 14px; }
.mi-text { font:500 14px/1.4 var(--font-brand); color:var(--bos-ink-800); }
.mi-summary { display:flex; align-items:center; gap:10px; margin:14px 0 6px; }
.mi-sec { font:700 12px/1 var(--font-brand); color:var(--bos-slate-500); text-transform:uppercase; letter-spacing:.4px; margin:14px 0 6px; }

.section-title { font:800 16px/1 var(--font-brand); color:var(--bos-navy-800); margin:2px 0 14px; }
.muted { color:var(--bos-slate-500); font-size:13px; }