/* PANWAR CHATS ADMIN V3.7 PRO UI
   Safe visual layer: does not change the app shell geometry or force content widths. */
:root{
  --pro-bg:#071421;
  --pro-surface:#0b2034;
  --pro-surface-2:#0e2942;
  --pro-surface-3:#102f4b;
  --pro-line:#214968;
  --pro-line-soft:rgba(80,139,185,.22);
  --pro-text:#f7fbff;
  --pro-muted:#9eb5ce;
  --pro-blue:#60a8ff;
  --pro-cyan:#3dd6d0;
  --pro-green:#28c47a;
  --pro-amber:#f2b35b;
  --pro-red:#ef6672;
  --pro-violet:#9b83ff;
  --pro-shadow:0 14px 36px rgba(0,0,0,.22);
}
html,body{font-family:"Segoe UI Variable","Segoe UI",Inter,Arial,sans-serif!important}
body{background:radial-gradient(circle at 84% -15%,rgba(44,111,176,.12),transparent 34%),linear-gradient(180deg,#071421 0%,#06111e 100%)!important;color:var(--pro-text)!important}

/* Sidebar — style only, no width/position overrides */
.sidebar{background:linear-gradient(180deg,#081a2e 0%,#071727 100%)!important;border-right:1px solid var(--pro-line)!important;box-shadow:10px 0 30px rgba(0,0,0,.08)!important}
.sidebar .brand,.brand{padding-top:18px!important;padding-bottom:14px!important;border-bottom:1px solid rgba(255,255,255,.055)!important}
.sidebar .brand b,.sidebar .brand strong,.brand-title{font-size:18px!important;letter-spacing:-.01em!important}
.sidebar .brand span,.brand-subtitle{font-size:12px!important;color:var(--pro-muted)!important;line-height:1.35!important}
.nav,.sidebar nav{gap:5px!important}
.nav a,.sidebar nav a,.nav button,.sidebar nav button,.nav-item{min-height:46px!important;border-radius:13px!important;padding-top:9px!important;padding-bottom:9px!important;color:#b7cae0!important;font-size:14px!important;font-weight:650!important;transition:background .16s,border-color .16s,color .16s,transform .16s!important}
.nav a:hover,.sidebar nav a:hover,.nav button:hover,.sidebar nav button:hover,.nav-item:hover{background:#0d2942!important;color:#fff!important;transform:translateX(1px)!important}
.nav a.active,.sidebar nav a.active,.nav button.active,.sidebar nav button.active,.nav-item.active{background:linear-gradient(135deg,#153d64,#123453)!important;border-color:#30689d!important;color:#fff!important;box-shadow:0 7px 20px rgba(0,0,0,.16)!important}
.pro37-nav-icon{width:26px;height:26px;flex:0 0 26px;display:grid;place-items:center;border-radius:8px;background:rgba(96,168,255,.09);color:#79baff}
.pro37-nav-icon svg{width:15px;height:15px;display:block}
.pro37-nav-label{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.sidebar nav::-webkit-scrollbar,.nav::-webkit-scrollbar{width:6px}
.sidebar nav::-webkit-scrollbar-thumb,.nav::-webkit-scrollbar-thumb{background:#315674;border-radius:999px}
#staffChip,.staff-chip{background:linear-gradient(180deg,#0b233a,#0a1f34)!important;border:1px solid var(--pro-line)!important;border-radius:14px!important;box-shadow:inset 0 1px rgba(255,255,255,.025)!important}
#staffChip b,.staff-chip b{font-size:13px!important}
#staffChip span,.staff-chip span{font-size:11px!important;color:var(--pro-muted)!important}
#signOutBtn,.sidebar .signout,button.signout{border-radius:13px!important;background:#102b47!important;border:1px solid #2b5375!important;color:#eef7ff!important}

/* Topbar */
.topbar,.header,.page-header{background:linear-gradient(180deg,rgba(8,27,46,.96),rgba(8,24,42,.93))!important;border-bottom:1px solid var(--pro-line)!important;box-shadow:0 8px 24px rgba(0,0,0,.08)!important}
#viewEyebrow,.eyebrow{font-size:11px!important;font-weight:800!important;letter-spacing:.16em!important;color:#70aff8!important}
#viewTitle,.page-title,h1{font-size:34px!important;line-height:1.08!important;letter-spacing:-.025em!important;color:#fff!important}
#refreshBtn{background:#102d49!important;border-color:#2d567a!important;color:#ecf6ff!important}

/* Dashboard metrics */
.metric-grid{gap:14px!important}
.metric,.metric-card,.metric-box,.metric-grid>div{position:relative!important;overflow:hidden!important;min-height:110px!important;background:linear-gradient(145deg,#0f2b47 0%,#0c2238 100%)!important;border:1px solid var(--pro-line)!important;border-radius:16px!important;box-shadow:none!important;transition:transform .16s,border-color .16s,box-shadow .16s!important}
.metric:hover,.metric-card:hover,.metric-box:hover,.metric-grid>div:hover{transform:translateY(-1px)!important;border-color:#32658e!important;box-shadow:0 12px 26px rgba(0,0,0,.12)!important}
.metric::before,.metric-card::before,.metric-box::before,.metric-grid>div::before{content:"";position:absolute;inset:0 auto 0 0;width:3px;background:var(--metric-accent,var(--pro-blue));opacity:.9}
.metric b,.metric strong,.metric-value,.metric-grid>div>b{font-size:30px!important;letter-spacing:-.02em!important;color:#fff!important}
.metric span,.metric small,.metric-label,.metric-grid>div span{color:var(--pro-muted)!important}
.pro37-metric-icon{position:absolute;right:14px;top:14px;width:34px;height:34px;display:grid;place-items:center;border-radius:10px;background:color-mix(in srgb,var(--metric-accent,var(--pro-blue)) 14%, transparent);color:var(--metric-accent,var(--pro-blue));opacity:.9}
.pro37-metric-icon svg{width:17px;height:17px}

/* General panels */
.panel{background:linear-gradient(180deg,#0b2035 0%,#091b2d 100%)!important;border:1px solid var(--pro-line)!important;border-radius:18px!important;box-shadow:var(--pro-shadow)!important}
.panel h2,.panel-title{font-size:19px!important;color:#fff!important;letter-spacing:-.01em!important}
.section-note,.muted,.panel p{color:var(--pro-muted)!important}
.secure-note{background:linear-gradient(180deg,#0d2943,#0b2339)!important;border:1px solid var(--pro-line)!important;border-radius:14px!important}

/* Quick actions */
.quick-grid{gap:12px!important}
.quick-card{position:relative!important;overflow:hidden!important;min-height:88px!important;border-radius:15px!important;background:linear-gradient(180deg,#0b2035,#091a2d)!important;border:1px solid #1f4262!important;text-align:left!important;transition:transform .16s,border-color .16s,background .16s!important;padding-left:54px!important}
.quick-card:hover{transform:translateY(-1px)!important;border-color:#386f9f!important;background:#0d2841!important}
.quick-card b{font-size:14px!important;color:#fff!important}
.quick-card span{font-size:12px!important;color:var(--pro-muted)!important}
.pro37-quick-icon{position:absolute;left:14px;top:50%;transform:translateY(-50%);width:30px;height:30px;display:grid;place-items:center;border-radius:9px;background:rgba(96,168,255,.11);color:#7abaff}
.pro37-quick-icon svg{width:15px;height:15px}

/* Forms */
label{color:#cfdded!important;font-size:12px!important;font-weight:700!important}
input,select,textarea{background:#07192a!important;border:1px solid #244967!important;border-radius:12px!important;color:#fff!important;transition:border-color .15s,box-shadow .15s!important}
input::placeholder,textarea::placeholder{color:#6f88a3!important}
input:focus,select:focus,textarea:focus{border-color:#5798df!important;box-shadow:0 0 0 3px rgba(87,152,223,.14)!important;outline:none!important}

/* Buttons */
button{border-radius:12px!important;font-weight:700!important;transition:transform .14s,filter .14s,border-color .14s!important}
button:hover:not(:disabled){filter:brightness(1.06);transform:translateY(-1px)}
button.primary{background:linear-gradient(180deg,#5fa9ff,#428de8)!important;border-color:#72b4ff!important;color:white!important}
button.ghost{background:#102a43!important;border-color:#2a506f!important;color:#eef7ff!important}
button.success{background:linear-gradient(180deg,#28bd78,#17955b)!important;border-color:#36ca87!important;color:#fff!important}
button.warning{background:linear-gradient(180deg,#f4bb64,#d99836)!important;border-color:#ffc978!important;color:#152131!important}
button.danger{background:linear-gradient(180deg,#ea6673,#c74755)!important;border-color:#f07984!important;color:#fff!important}

/* Tables */
.table-wrap{border-radius:14px!important;overflow:auto!important}
table{border:1px solid var(--pro-line)!important;border-radius:14px!important;overflow:hidden!important;background:#08192b!important}
thead th{background:#0e2944!important;color:#b9d2eb!important;font-size:10px!important;letter-spacing:.10em!important;text-transform:uppercase!important;padding-top:12px!important;padding-bottom:12px!important}
tbody td{border-top:1px solid #193952!important;color:#e8f1fb!important;padding-top:13px!important;padding-bottom:13px!important}
tbody tr:hover td{background:#0c2339!important}
.badge{border-radius:999px!important;font-weight:800!important;letter-spacing:.01em!important}

/* Modal */
.modal,.modal-card,.dialog{background:linear-gradient(180deg,#0c2238,#091b2e)!important;border:1px solid #2c587d!important;border-radius:20px!important;box-shadow:0 30px 90px rgba(0,0,0,.46)!important}
.detail-list>div:nth-child(odd){color:#8fa9c5!important;font-weight:700!important}

/* Toasts if present */
.toast{border-radius:13px!important;box-shadow:0 16px 40px rgba(0,0,0,.35)!important}

@media(max-width:1200px){
  #viewTitle,.page-title,h1{font-size:30px!important}
  .pro37-metric-icon{display:none}
}