/* InOneCRM Client App styles */
:root{
  --bg:#0b0f17;
  --panel:#101828;
  --line:rgba(255,255,255,.10);
  --text:#e5e7eb;
  --muted:#a3a3a3;
  --primary:#0A84FF;
}
*{ box-sizing:border-box; }
html,body{ margin:0; font-family: Arial, sans-serif; background: radial-gradient(900px 500px at 20% 0%, rgba(10,132,255,0.20), transparent), var(--bg); color:var(--text); }
.wrap{ width:min(1100px,92vw); margin:18px auto; }
.row{ display:flex; gap:10px; }
.space{ justify-content:space-between; }
.center{ align-items:center; }
.hidden{ display:none !important; }
.topbar{ position:sticky; top:0; z-index:20; background: rgba(11,15,23,0.75); backdrop-filter: blur(10px); border-bottom:1px solid var(--line); }
.brand{ display:flex; gap:12px; align-items:center; padding:12px 0; }
.logo{ width:42px; height:42px; border-radius:14px; display:grid; place-items:center; font-weight:900; background: linear-gradient(135deg, var(--primary), rgba(10,132,255,0.35)); }
.brandName{ font-weight:900; }
.brandSub{ font-size:12px; color:var(--muted); margin-top:2px; }
.nav{ display:flex; gap:14px; align-items:center; }
.nav a{ font-size:14px; color:var(--text); opacity:.9; text-decoration:none; }
.nav a.active{ opacity:1; border-bottom:2px solid rgba(10,132,255,0.6); padding-bottom:6px; }
.navToggle{ display:none; border:1px solid var(--line); background: rgba(255,255,255,0.03); color:var(--text); border-radius:12px; padding:10px 12px; cursor:pointer; }
h1{ margin:0 0 6px; font-size:30px; }
h2{ margin:0 0 6px; font-size:22px; }
.muted{ color:var(--muted); }
.small{ font-size:12px; }
.btn{ border:1px solid var(--line); background: rgba(255,255,255,0.03); color:var(--text); padding:10px 12px; border-radius:12px; cursor:pointer; }
.btn.primary{ background: var(--primary); border-color: transparent; font-weight:800; }
.btn.ghost{ background: transparent; }
.btn.full{ width:100%; }
.card{ border:1px solid var(--line); background: rgba(255,255,255,0.02); border-radius:16px; padding:16px; }
.cardTitle{ font-weight:900; margin-bottom:10px; }
.grid2{ display:grid; grid-template-columns: 1fr 1fr; gap:12px; }
.grid3{ display:grid; grid-template-columns: repeat(3,1fr); gap:12px; }
label{ display:block; margin-top:10px; margin-bottom:6px; font-size:13px; color:#cbd5e1; }
input, select{
  width:100%;
  padding:12px;
  border-radius:12px;
  border:1px solid var(--line);
  background: rgba(0,0,0,0.25);
  color:var(--text);
  outline:none;
}
input:focus, select:focus{
  border-color: rgba(10,132,255,0.55);
  box-shadow: 0 0 0 6px rgba(10,132,255,0.10);
}
.sideCard{ border:1px solid var(--line); border-radius:16px; padding:16px; background: rgba(255,255,255,0.02); }
.sideTitle{ font-weight:900; margin-bottom:8px; }
.sideList{ margin:0; padding-left:18px; color:var(--muted); line-height:1.9; }
.sep{ height:1px; background: var(--line); margin:14px 0; }
.stat{ border:1px solid var(--line); background: rgba(255,255,255,0.02); border-radius:16px; padding:16px; }
.statLabel{ color:var(--muted); font-size:13px; }
.statValue{ font-size:30px; font-weight:900; margin-top:8px; }
.pre{ margin:10px 0 0; padding:12px; border-radius:12px; border:1px solid var(--line); background: rgba(0,0,0,0.25); overflow:auto; }
.table{ width:100%; border-collapse: collapse; }
.table th, .table td{ text-align:left; padding:10px; border-bottom:1px solid rgba(255,255,255,0.06); font-size:13px; }
.table th{ color:var(--muted); font-weight:700; }
.board{ display:grid; grid-auto-flow: column; grid-auto-columns: minmax(260px, 1fr); gap:12px; overflow:auto; padding-bottom:10px; }
.col{ border:1px solid var(--line); background: rgba(255,255,255,0.02); border-radius:16px; padding:12px; min-height: 180px; }
.colTitle{ font-weight:900; margin-bottom:8px; }
.deal{ border:1px solid rgba(255,255,255,0.08); border-radius:14px; padding:10px; background: rgba(0,0,0,0.20); margin-bottom:8px; }
.dealTitle{ font-weight:800; }
.dealSub{ color:var(--muted); font-size:12px; margin-top:4px; }
.modal{ position:fixed; inset:0; background: rgba(0,0,0,0.55); display:grid; place-items:center; z-index: 50; padding: 16px; }
.modalCard{ width:min(740px, 96vw); border-radius:16px; border:1px solid var(--line); background: rgba(16,24,40,0.92); backdrop-filter: blur(10px); padding:16px; }
.modalTitle{ font-weight:900; font-size:16px; }
.toast{
  position: fixed;
  left: 50%;
  top: 86px;
  transform: translateX(-50%);
  border:1px solid var(--line);
  background: rgba(16,24,40,0.92);
  padding:10px 12px;
  border-radius: 14px;
  font-size: 13px;
  z-index: 100;
}
.toast.ok{ border-color: rgba(34,197,94,0.35); }
.toast.err{ border-color: rgba(248,113,113,0.35); }
@media (max-width: 900px){
  .grid2{ grid-template-columns: 1fr; }
  .grid3{ grid-template-columns: 1fr; }
  .nav{ display:none; }
  .navToggle{ display:block; }
}