:root{
  --brand-900:#0b1e3f;
  --brand-800:#12306a;
  --brand-700:#1a4494;
  --brand-600:#2158bf;
  --brand-500:#2f6fe0;
  --brand-050:#eef3fb;
  --sidebar-w: 250px;
}
*{box-sizing:border-box}
html,body{height:100%}
body{background:#f5f7fb;font-family:-apple-system,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif}
[data-bs-theme="dark"] body{background:#0f172a}

.app{display:flex;min-height:100vh}
.sidebar{
  width:var(--sidebar-w);
  background:linear-gradient(180deg,var(--brand-900),var(--brand-800));
  color:#e6ecf7;padding:20px 14px;display:flex;flex-direction:column;position:sticky;top:0;height:100vh;
}
.brand{display:flex;align-items:center;gap:12px;padding:6px 8px 20px;border-bottom:1px solid rgba(255,255,255,.08);margin-bottom:14px}
.brand i{font-size:28px;color:#fff;background:var(--brand-600);width:44px;height:44px;display:grid;place-items:center;border-radius:12px}
.brand-title{font-weight:700;font-size:17px;color:#fff;line-height:1}
.brand-sub{font-size:11px;letter-spacing:.14em;text-transform:uppercase;color:#8fa5cf;margin-top:4px}

.sidebar .nav-link{
  color:#cdd7ec;border-radius:10px;padding:10px 12px;margin-bottom:4px;
  display:flex;align-items:center;gap:12px;font-size:14px;transition:.15s;
}
.sidebar .nav-link i{font-size:18px;opacity:.85}
.sidebar .nav-link:hover{background:rgba(255,255,255,.06);color:#fff}
.sidebar .nav-link.active{background:var(--brand-600);color:#fff;box-shadow:0 6px 18px rgba(47,111,224,.35)}
.sidebar .nav-link.mt-auto{margin-top:auto!important}

.main{flex:1;min-width:0;display:flex;flex-direction:column}
.topbar{
  background:#fff;border-bottom:1px solid #e6eaf2;padding:14px 24px;
  display:flex;align-items:center;gap:14px;position:sticky;top:0;z-index:20;
}
[data-bs-theme="dark"] .topbar{background:#111827;border-color:#1f2937}
.content{padding:24px;flex:1}
.avatar{width:36px;height:36px;border-radius:50%;background:var(--brand-600);color:#fff;display:grid;place-items:center;font-weight:600}

.stat-card{border:0;border-radius:14px;box-shadow:0 2px 12px rgba(15,30,60,.06)}
.stat-card .label{color:#6c7893;font-size:12px;letter-spacing:.08em;text-transform:uppercase}
.stat-card .value{font-size:28px;font-weight:700;color:var(--brand-900)}
.stat-card .icon{width:46px;height:46px;border-radius:12px;display:grid;place-items:center;font-size:22px;color:#fff}
[data-bs-theme="dark"] .stat-card .value{color:#e5e7eb}

.card{border:0;border-radius:14px;box-shadow:0 2px 12px rgba(15,30,60,.05)}
.card-header{background:transparent;border-bottom:1px solid #eef1f7;font-weight:600}
[data-bs-theme="dark"] .card{background:#111827;color:#e5e7eb}
[data-bs-theme="dark"] .card-header{border-color:#1f2937}

.btn-brand{background:var(--brand-600);color:#fff;border:0}
.btn-brand:hover{background:var(--brand-700);color:#fff}
.text-brand{color:var(--brand-700)!important}

.table thead th{font-size:12px;letter-spacing:.05em;text-transform:uppercase;color:#6c7893;border-bottom-width:1px}
.table td{vertical-align:middle}

.auth-wrap{
  min-height:100vh;display:grid;place-items:center;padding:20px;
  background:radial-gradient(1200px 600px at 10% 10%,#1a4494 0%,#0b1e3f 60%,#07142c 100%);
}
.auth-card{width:100%;max-width:420px;background:#fff;border-radius:18px;padding:32px;box-shadow:0 24px 60px rgba(0,0,0,.35); margin-top: -100px;}
.auth-brand{display:flex;align-items:center;gap:12px;margin-bottom:22px}
.auth-brand .logo{width:44px;height:44px;border-radius:12px;background:var(--brand-600);color:#fff;display:grid;place-items:center;font-size:22px}

.chat-wrap{display:grid;grid-template-columns:280px 1fr;gap:16px;height:calc(100vh - 160px)}
.chat-list{background:#fff;border-radius:14px;overflow:auto}
.chat-list .item{padding:14px 16px;border-bottom:1px solid #eef1f7;cursor:pointer;display:flex;gap:10px;align-items:center}
.chat-list .item.active{background:var(--brand-050)}
.chat-panel{background:#fff;border-radius:14px;display:flex;flex-direction:column;overflow:hidden}
.chat-header{padding:14px 18px;border-bottom:1px solid #eef1f7;font-weight:600}
.chat-body{flex:1;overflow:auto;padding:18px;background:#f8fafc}
.chat-input{padding:12px;border-top:1px solid #eef1f7;display:flex;gap:8px}
.msg{max-width:70%;padding:10px 14px;border-radius:14px;margin-bottom:10px;font-size:14px;line-height:1.4}
.msg.me{background:var(--brand-600);color:#fff;margin-left:auto;border-bottom-right-radius:4px}
.msg.them{background:#eef1f7;color:#0b1e3f;margin-right:auto;border-bottom-left-radius:4px}
.msg .meta{display:block;font-size:10px;opacity:.7;margin-top:4px}

@media (max-width: 767px){
  .sidebar{position:fixed;left:-260px;transition:.2s;z-index:50}
  .sidebar.show{left:0}
  .chat-wrap{grid-template-columns:1fr;height:auto}
}

/* ---- Alfaresi logo swaps ---- */
.brand .brand-logo{width:120px;height:auto;display:block}
.auth-brand .auth-logo{width:110px;height:auto;}
.auth-iso{margin-top:18px;display:flex;justify-content:center}
.auth-iso img{max-width:220px;width:100%;height:auto;border-radius:8px}

/* ---- Shared site footer ---- */
.site-footer{
  background:#0a1024;color:#cbd5e1;
  padding:36px 28px 18px;margin-top:32px;
  border-top:1px solid rgba(255,255,255,.06);
}
.auth-body .site-footer{margin-top:-100px !important}
.site-footer-inner{
  max-width:1200px;margin:0 auto;
  display:grid;grid-template-columns:1.4fr 1fr 1fr;gap:32px;align-items:start;
}
.sf-brand .sf-logo{width:130px;height:auto;filter:brightness(0) invert(1);margin-bottom:12px}
.sf-tag{color:#94a3b8;font-size:14px;margin:0;max-width:320px}
.sf-title{color:#e2e8f0;font-size:15px;font-weight:600;margin-bottom:14px;letter-spacing:.02em}
.sf-apps,.sf-social{display:flex;gap:12px;align-items:center}
.sf-apps a,.sf-social a{
  width:44px;height:44px;border-radius:10px;
  display:grid;place-items:center;
  background:rgba(255,255,255,.04);
  border:1px solid rgba(255,255,255,.08);
  color:#e2e8f0;font-size:20px;text-decoration:none;transition:.15s;
}
.sf-apps a:hover,.sf-social a:hover{background:rgba(255,255,255,.09);color:#fff;transform:translateY(-1px)}
.sf-huawei{font-size:11px!important;font-weight:700;letter-spacing:.05em;width:auto!important;padding:0 12px}
.sf-copy{
  max-width:1200px;margin:24px auto 0;padding-top:16px;
  border-top:1px solid rgba(255,255,255,.06);
  text-align:center;color:#64748b;font-size:12px;
}
@media (max-width: 767px){
  .site-footer-inner{grid-template-columns:1fr;gap:24px}
}

/* ---- Centered auth brand ---- */
.auth-brand.auth-brand-center{
  flex-direction:column;align-items:center;gap:2px;margin-bottom:18px;text-align:center;
}
.auth-brand.auth-brand-center .auth-logo{width:150px}