/* ===== SocialAgents · Upliso-Design ===== */
:root {
  --navy:   #1e2b48;
  --navy-2: #2a3a5e;
  --teal:   #17b8b0;
  --teal-d: #0f9d97;
  --teal-bg:#e7f7f6;
  --green:  #2fc257;
  --bg:     #f4f6f9;
  --card:   #ffffff;
  --line:   #e7ebf1;
  --muted:  #8a94a6;
  --text:   #2b3345;
  --grad:   linear-gradient(135deg, #12b5b0 0%, #2fc257 100%);
  --radius: 12px;
  --shadow: 0 1px 2px rgba(20,30,55,.04), 0 6px 18px rgba(20,30,55,.05);
}
* { box-sizing: border-box; }
body { background: var(--bg); color: var(--text); font-family: 'Inter', system-ui, -apple-system, 'Segoe UI', sans-serif; }
.sa-ico { display:block; }

/* Layout shell */
.sa-app { min-height:100vh; display:flex; flex-direction:column; }
.sa-body { display:flex; flex:1; }

/* Topbar */
.sa-topbar {
  height:64px; background:var(--card); border-bottom:1px solid var(--line);
  display:flex; align-items:center; gap:24px; padding:0 22px; position:sticky; top:0; z-index:30;
}
.sa-brand { display:flex; align-items:center; width:210px; }
.sa-brand img { height:30px; width:auto; }
.sa-search {
  flex:1; max-width:620px; margin:0 auto; position:relative; display:flex; align-items:center;
}
.sa-search input {
  width:100%; height:42px; border:1px solid var(--line); border-radius:10px; background:#fbfcfe;
  padding:0 70px 0 42px; font-size:.92rem; color:var(--text); transition:border-color .15s, box-shadow .15s;
}
.sa-search input:focus { outline:none; border-color:var(--teal); box-shadow:0 0 0 3px rgba(23,184,176,.15); background:#fff; }
.sa-search-ico { position:absolute; left:13px; color:var(--muted); display:flex; }
.sa-kbd {
  position:absolute; right:10px; font-size:.7rem; color:var(--muted); background:#eef1f6;
  border:1px solid var(--line); border-radius:6px; padding:2px 7px; font-weight:600;
}
.sa-user { display:flex; align-items:center; gap:12px; }
.sa-user-meta { text-align:right; line-height:1.15; }
.sa-user-name { font-weight:700; color:var(--navy); font-size:.9rem; }
.sa-user-role { font-size:.66rem; letter-spacing:.06em; color:var(--muted); font-weight:600; }
.sa-avatar {
  width:38px; height:38px; border-radius:50%; background:var(--grad); color:#fff;
  display:flex; align-items:center; justify-content:center; font-weight:700; font-size:.95rem;
}
.sa-logout, .sa-logout-row { background:none; border:none; cursor:pointer; color:var(--muted); padding:6px; border-radius:8px; }
.sa-logout:hover { color:#e05656; background:#fdeeee; }

/* Sidebar */
.sa-sidebar {
  width:236px; min-width:236px; background:var(--card); border-right:1px solid var(--line);
  padding:16px 14px; display:flex; flex-direction:column; position:sticky; top:64px; height:calc(100vh - 64px);
}
.sa-sidebar nav { flex:1; }
.sa-nav-group {
  font-size:.68rem; font-weight:700; letter-spacing:.08em; text-transform:uppercase;
  color:#a4adbd; margin:16px 10px 6px;
}
.sa-nav-group:first-child { margin-top:4px; }
.sa-nav-item {
  display:flex; align-items:center; gap:12px; padding:9px 12px; border-radius:9px;
  color:#5b6577; font-weight:600; font-size:.9rem; text-decoration:none; width:100%;
  background:none; border:none; cursor:pointer; margin-bottom:2px; transition:background .12s, color .12s;
}
.sa-nav-item:hover { background:#f3f5f9; color:var(--navy); }
.sa-nav-item.is-active { background:var(--teal-bg); color:var(--teal-d); }
.sa-nav-ico { display:flex; color:inherit; }
.sa-nav-item.is-active .sa-nav-ico { color:var(--teal-d); }
.sa-sidebar-foot { border-top:1px solid var(--line); padding-top:8px; }
.sa-logout-row { color:#5b6577; }
.sa-logout-row:hover { background:#fdeeee; color:#e05656; }

/* Main */
.sa-main { flex:1; padding:26px 30px; max-width:1400px; }

/* Typography */
.title { color:var(--navy); }
.subtitle { color:var(--muted); }

/* Cards / boxes */
.box { background:var(--card); border:1px solid var(--line); border-radius:var(--radius); box-shadow:var(--shadow); }
.has-dark-shadow { box-shadow:var(--shadow); }

/* Stat cards */
.sa-stat { text-align:left; position:relative; padding:20px 22px; }
.sa-stat .heading { color:var(--muted); font-weight:600; letter-spacing:.02em; }
.sa-stat .title { color:var(--navy); }
.sa-stat-ico {
  position:absolute; top:18px; right:18px; width:40px; height:40px; border-radius:10px;
  background:var(--teal-bg); color:var(--teal-d); display:flex; align-items:center; justify-content:center;
}

/* Buttons – Upliso teal/green gradient */
.button.is-primary, .button.is-link { background-image:var(--grad); border:none; color:#fff; font-weight:600; box-shadow:0 2px 6px rgba(23,184,176,.25); }
.button.is-primary:hover, .button.is-link:hover { filter:brightness(1.04); color:#fff; }
.button.is-link.is-light { background:var(--teal-bg); background-image:none; color:var(--teal-d); box-shadow:none; }
.button { border-radius:9px; }
.button.is-light { background:#f1f4f8; border-color:var(--line); color:#54607a; }
.button.is-light:hover { background:#e9edf3; }

/* Tables */
.table { background:transparent; color:var(--text); }
.table th { color:var(--muted); font-size:.72rem; letter-spacing:.05em; text-transform:uppercase; border-color:var(--line); font-weight:700; }
.table td { border-color:var(--line); vertical-align:middle; }
.table.is-hoverable tbody tr:hover { background:#f7f9fc; }

/* Tags / status pills */
.tag { border-radius:7px; font-weight:600; }
.tag.is-success, .tag.is-success.is-light { background:#e6f6ec; color:#159a45; }
.tag.is-warning, .tag.is-warning.is-light { background:#fdf3e2; color:#c07d15; }
.tag.is-info, .tag.is-info.is-light { background:#e8f1fe; color:#2f6fd0; }
.tag.is-danger, .tag.is-danger.is-light { background:#fdecec; color:#d24444; }
.tag.is-dark { background:var(--navy); color:#fff; }

/* Notifications */
.notification { border-radius:var(--radius); }

/* Preview / content */
.sa-preview { white-space:normal; background:#fbfcfe; border:1px solid var(--line); border-radius:10px; padding:1rem; }
.content h2 { color:var(--navy); }
pre { background:#1e2333; color:#e6e6e6; border-radius:10px; }
.breadcrumb a { color:var(--teal-d); }
code { color:var(--teal-d); background:#eef7f7; }

/* Inputs */
.input, .textarea, .select select { border-radius:9px; border-color:var(--line); }
.input:focus, .textarea:focus, .select select:focus { border-color:var(--teal); box-shadow:0 0 0 3px rgba(23,184,176,.15); }
.label { color:var(--navy); }

/* Auth screen */
.sa-hero { background:var(--navy); background-image:linear-gradient(140deg,#16233f 0%,#1e2b48 60%,#243a63 100%); min-height:100vh; }
.sa-auth-logo { display:block; margin:0 auto 6px; height:42px; }

/* Responsive */
@media (max-width: 900px) {
  .sa-sidebar { position:fixed; left:0; transform:translateX(-100%); z-index:40; transition:transform .2s; }
  .sa-search { display:none; }
  .sa-brand { width:auto; }
  .sa-main { padding:18px; }
}