shoc-frontend-new/src/index.css

:root{
  --sidebar-w: 220px;
  --topbar-h: 64px;
  --blue:#0b4b6a;
  --muted:#f2f4f6;
}

*{box-sizing:border-box}
html,body,#root{height:100%}
body{
  margin:0;
  font-family: "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  background:#f4f6f7;
  color:#333;
}

/* Layout */
.app{display:flex;min-height:100vh;align-items:stretch}
.sidebar{
  width:var(--sidebar-w);
  background:#f1f3f4;
  border-right:1px solid #e0e3e4;
  padding:18px 12px;
  position:fixed;
  left:0;top:0;bottom:0;
  overflow:auto;
}
.mainArea{
  margin-left:var(--sidebar-w);
  flex:1;
  min-height:100vh;
  display:flex;
  flex-direction:column;
}
.topbar{
  height:var(--topbar-h);
  background:var(--blue);
  color:white;
  display:flex;
  align-items:center;
  justify-content:space-between;
  padding:0 50px;
  position:sticky;
  top:0;
  z-index:10;
}
.topbar .hamburger{background:transparent;border:none;color:white;font-size:20px;margin-right:12px}
.topbar .searchBox{background:#083a52; padding:6px 10px;border-radius:6px;min-width:420px;}
.topbar input{width:100%;border:none;padding:6px 8px;border-radius:4px;background:white;color:#333}
.topRight{display:flex;align-items:center;gap:12px}
.topRight .avatar{background:#1fa8de;color:white;width:36px;height:36px;border-radius:50%;display:flex;align-items:center;justify-content:center;font-weight:600}
.topRight .notif{position:relative}
.topRight .dot{position:absolute;right:-6px;top:-6px;background:#ffb400;color:#222;padding:2px 6px;border-radius:10px;font-size:11px}
.topLeft {display: flex;}
/* Sidebar content */
.logoRow{display:flex;align-items:center;gap:8px;padding-bottom:16px}
.logoMark{width:48px;height:48px;background:linear-gradient(90deg,#60c6ff,#1fa8de);color:white;border-radius:6px;display:flex;align-items:center;justify-content:center;font-weight:800}
.logoText{font-size:14px;line-height:1}
.logoText span{font-size:11px;color:#556}
.navTitle{font-size:12px;color:#7b8588;margin:10px 6px}
.navList{list-style:none;padding:0;margin:0}
.navItem{display:flex;align-items:center;gap:10px;padding:10px;border-radius:6px;color:#394647;cursor:pointer}
.navItem .glyph{display:inline-block;width:22px;text-align:center;color:#8b9496}
.navItem:hover{background:#e9edf0}
.navItem.active{background:#e1edf4;border-left:3px solid #0b80b5}

/* Content */
.contentWrapper{padding:20px 40px;}

/* Contacts page */
.contactsPage .pageTitle{font-size:18px;font-weight:600;margin-bottom:10px}
.card.controlsCard{
  background:white;
  border-radius:4px;
  padding:18px;
  box-shadow:0 1px 0 rgba(0,0,0,0.06);
  border:1px solid #e6e9ea;
}

/* controls */
.controlsTop{display:flex;justify-content:space-between;align-items:center;margin-bottom:12px}
.leftControls{display:flex;align-items:center;gap:12px}
.iconBtn{border:1px solid #d6d9da;background:#fff;padding:8px;border-radius:4px}
.filter{display:flex;gap:8px;align-items:center}
.filter select{padding:8px;border-radius:4px;border:1px solid #d8d8d8;background:#fff}
.filter input{padding:8px;border-radius:4px;border:1px solid #d8d8d8;min-width:360px}
.searchBtn{background:#0b95d4;color:#fff;border:none;padding:8px 12px;border-radius:4px}
.rightControls{display:flex;gap:8px;align-items:center}
.iconSmall{background:transparent;border:1px solid #e0e0e0;padding:6px;border-radius:6px;cursor:pointer}

/* table */
.tableWrap{margin-top:6px}
.contactTable{width:100%;border-collapse:collapse}
.contactTable thead th{
  text-align:left;padding:12px;background:#9fb2bf;color:white;font-weight:600;border-bottom:1px solid #d5d8d9;
}
.contactTable thead .colCheck{width:48px}
.contactTable tbody td{border-bottom:1px solid #eee;padding:14px 12px;vertical-align:middle}
.contactTable tbody tr:nth-child(odd){background:#fff}
.contactTable tbody tr:nth-child(even){background:#fbfbfb}
.rowName{display:flex;align-items:center;gap:12px}
.avatarThumb{width:40px;height:40px;border-radius:6px;background:#f0b380;border:1px solid #9b6b45;display:flex;align-items:center;justify-content:center;color:#4b2b18;font-weight:700}
.nameText .nameLink{color:#0b6fa1;font-weight:600}
.nameText .sub{font-size:12px;color:#8f9a9f}
.mono{font-family:monospace;color:#444}
.link{color:#0a8ab6}
.actionsCol{width:120px;text-align:right}

/* footer of table */
.tableFooter{display:flex;justify-content:space-between;align-items:center;margin-top:12px;padding:8px 6px;color:#666;font-size:13px}
.tableFooter select{margin-left:8px;padding:6px}

/* rightPanel */
.rightPanel{
  width:320px;
  position:fixed;
  right:0;
  top:0;
  bottom:0;
  background:#222b34;
  color:white;
  border-left:1px solid rgba(255,255,255,0.04);
  padding:18px;
  overflow:auto;
}
.panelHeader{background:#623be3;padding:12px;border-radius:6px;text-align:center;margin-bottom:14px;font-weight:700;color:white}
.panelBody{padding:6px}
.panelInput{width:100%;padding:10px;border-radius:4px;border:none;background:#333;color:#ddd;margin-bottom:12px}
.panelRow{margin:10px 0}
.allianceList{margin-top:14px}
.allianceRow{display:flex;align-items:center;gap:10px;padding:8px;background:#2a3138;border-radius:6px;margin-bottom:10px;justify-content:space-between}
.pill{padding:6px 10px;border-radius:6px;color:white;font-weight:700}
.pill.blue{background:#6fb3e6}
.pill.purple{background:#7f63e3}
.pill.green{background:#2b9b59}
.numbers{color:#d5dbe0}