/* SecureTech Platform Admin UX Standard v1
   Shared interaction/layout layer. Product brand colors and business modules remain product-owned. */
:root{
  --sx-admin-sidebar:258px;
  --sx-admin-header:72px;
  --sx-admin-radius:16px;
  --sx-admin-radius-sm:11px;
  --sx-admin-gap:14px;
  --sx-admin-bg:#f5f7fa;
  --sx-admin-surface:#fff;
  --sx-admin-line:#e3e9ef;
  --sx-admin-text:#183247;
  --sx-admin-muted:#6d7d8c;
  --sx-admin-shadow:0 8px 26px rgba(13,41,68,.07);
  --sx-admin-focus:0 0 0 3px rgba(21,101,245,.14);
}
html{scroll-behavior:smooth}
body{background:var(--bg,var(--sx-admin-bg));}
button,a,input,select,textarea{font:inherit}
button,a{ -webkit-tap-highlight-color:transparent }
button:focus-visible,a:focus-visible,input:focus-visible,select:focus-visible,textarea:focus-visible{
  outline:0;box-shadow:var(--sx-admin-focus)
}
.side,aside.side{
  width:var(--sx-admin-sidebar);
  scrollbar-width:thin;
}
.side nav,.side{overscroll-behavior:contain}
.side button,.side a{
  min-height:42px;
  border-radius:10px;
  transition:background .16s ease,color .16s ease,transform .16s ease;
}
.side button:hover,.side a:hover{transform:translateX(1px)}
.top,.topbar,.toolbar{
  min-height:var(--sx-admin-header);
  background:var(--sx-admin-surface);
  border-bottom:1px solid var(--line,var(--sx-admin-line));
  backdrop-filter:saturate(150%) blur(10px);
}
.main,.content{
  min-width:0;
}
.card,.kpi,.portal-card{
  border-radius:var(--radius,var(--sx-admin-radius));
  box-shadow:var(--shadow,var(--sx-admin-shadow));
}
.card,.portal-card{background:var(--card,var(--sx-admin-surface))}
.btn,.primary,.secondary,button.button{
  min-height:40px;
  border-radius:var(--sx-admin-radius-sm);
  font-weight:800;
}
.btn,.primary,.secondary{transition:transform .16s ease,box-shadow .16s ease,background .16s ease}
.btn:hover,.primary:hover,.secondary:hover{transform:translateY(-1px)}
input,select,textarea,.search{
  min-height:42px;
  border-radius:var(--sx-admin-radius-sm)!important;
}
table{font-variant-numeric:tabular-nums}
.table{border-radius:14px}
.status,.pill,.badge,.chip{font-weight:850}
.section-title,.card-head,.welcome,.top-tools,.top-actions,.ticket-actions,.actions{
  gap:10px;
}
.user-chip,.profile{
  border-radius:12px;
}
.empty-state,.empty-ticket{
  background:var(--sx-admin-surface);
  border:1px dashed var(--line,var(--sx-admin-line));
  border-radius:var(--sx-admin-radius);
}
@media (max-width:900px){
  :root{--sx-admin-header:64px}
  .side,aside.side{width:min(280px,88vw)}
  .main,.content{padding-left:14px!important;padding-right:14px!important}
  .top,.topbar,.toolbar{padding-left:14px!important;padding-right:14px!important}
  .btn,.primary,.secondary,button.button{min-height:44px}
  input,select,textarea,.search{min-height:46px}
}
@media (max-width:540px){
  .card,.kpi,.portal-card{border-radius:14px}
  .main,.content{padding-left:12px!important;padding-right:12px!important}
  .section-title,.card-head,.welcome{align-items:flex-start}
  .ticket-actions,.actions,.top-actions{flex-wrap:wrap}
  .ticket-actions>.btn,.actions>.btn{flex:1 1 140px}
}