:root{
  --bg:#f6f8fb;--panel:#fff;--text:#102333;--muted:#6f8191;--line:#e5ebf0;
  --nav:#0f2535;--nav2:#173b50;--accent:#0ea5a0;--accent2:#087f84;
  --danger:#b4233b;--warn:#a96912;--ok:#1f7a57;
  --shadow-sm:0 4px 16px rgba(15,35,52,.045);
  --shadow-md:0 14px 38px rgba(15,35,52,.09);
  --radius-sm:12px;--radius-md:18px;--radius-lg:24px;
  font-family:"Segoe UI Variable Text","Segoe UI",Tahoma,Arial,sans-serif;
}
body{background:
  radial-gradient(circle at 85% -10%,rgba(14,165,160,.06),transparent 28%),
  linear-gradient(180deg,#f9fbfc 0,#f5f8fb 48%,#f7f9fb 100%);
  color:var(--text);font-feature-settings:"kern" 1,"liga" 1}
.content{padding:28px 30px 40px}
.topbar{height:76px;background:rgba(255,255,255,.88);backdrop-filter:blur(14px);border-bottom:1px solid rgba(223,231,238,.9);padding:0 28px}
.sidebar{background:linear-gradient(180deg,#10283b 0%,#0d2130 100%);padding:20px 14px}
.brand{padding:8px 10px 20px}
.brand strong{font-size:18px;letter-spacing:-.2px}
.nav{gap:6px}
.nav button{border-radius:14px;padding:12px 13px;transition:.18s ease;color:#c9d7df}
.nav button>span:first-child{width:26px;height:26px;border-radius:9px;display:grid;place-items:center;background:rgba(255,255,255,.06);font-size:11px}
.nav button:hover{background:rgba(255,255,255,.07);transform:translateX(-1px)}
.nav button.active{background:linear-gradient(90deg,rgba(18,167,163,.24),rgba(255,255,255,.06));box-shadow:inset 0 0 0 1px rgba(117,226,218,.14)}
.headline{margin-bottom:20px}
.headline h1{font-size:28px;letter-spacing:-.35px;font-weight:800}
.headline p{font-size:13px;color:#728696}
.card,.table-wrap,.modal-card{border-color:var(--line);box-shadow:var(--shadow-sm)}
.card{border-radius:20px;padding:18px;transition:transform .16s ease,box-shadow .16s ease,border-color .16s ease}
.card:hover{border-color:#d6e0e8}
.kpis{gap:14px}
.card.kpi{min-height:116px;display:flex;flex-direction:column;justify-content:space-between;background:linear-gradient(180deg,#fff,#fbfdfe)}
.kpi small{font-size:12px;font-weight:700;color:#758897}
.kpi b{font-size:30px;letter-spacing:-.5px}
.table-wrap{border-radius:18px}
.table th{background:#f8fafc;color:#607685;padding:13px 14px}
.table td{padding:13px 14px}
.table tr{transition:background .15s ease}.table tbody tr:hover{background:#fbfdfe}
.btn{border-radius:13px;padding:10px 14px;box-shadow:none;transition:.16s ease}
.btn:hover{transform:translateY(-1px)}
.btn.secondary{background:#eef4f6;color:#285264}
.field input,.field select,.field textarea{border-radius:13px;background:#fff;padding:12px 13px}
.modal{background:rgba(8,25,37,.54);backdrop-filter:blur(4px)}
.modal-card{border-radius:24px;padding:24px}
.notice{border-radius:16px;padding:14px 16px;background:linear-gradient(180deg,#fffaf0,#fff7e7)}
.status{padding:6px 9px;border-radius:999px}
.meta{color:#778999}
.premium-actionable{cursor:pointer;position:relative;outline:none}
.premium-actionable:hover{transform:translateY(-2px);box-shadow:var(--shadow-md);border-color:#cad8e2}
.premium-actionable:focus-visible{box-shadow:0 0 0 4px rgba(14,165,160,.13),var(--shadow-md);border-color:var(--accent)}
.premium-actionable::after{content:"فتح التفاصيل ←";display:block;margin-top:10px;font-size:11px;font-weight:800;color:#0b8583;opacity:.82}
.premium-actionable[data-premium-kind="alert"]::after{content:"انتقل إلى الإجراء ←"}
.premium-actionable[data-premium-kind="notification"]::after{content:"فتح التنبيه والإجراء ←"}
.premium-actionable .actions{position:relative;z-index:2}
.premium-actionable .btn,.premium-actionable a,.premium-actionable input,.premium-actionable select,.premium-actionable textarea{position:relative;z-index:3}
.premium-kpi-route{overflow:hidden}
.premium-kpi-route::before{content:"";position:absolute;inset-inline-start:0;top:0;bottom:0;width:4px;background:linear-gradient(var(--accent),#68d2ca);opacity:.75}
.dtl2-notification{transition:.16s ease}
.dtl2-notification.unread{background:linear-gradient(180deg,#ffffff,#f7fdfd)}
.dtl7-kpis>button,.dtl7-sla{border-radius:18px;box-shadow:var(--shadow-sm)}
.dtl7-panel,.dtl6-task{border-radius:18px;box-shadow:var(--shadow-sm)}
.dtl7-table tbody tr{transition:.14s ease}.dtl7-table tbody tr:hover{background:#fbfdfe}
.top-user .avatar{box-shadow:inset 0 0 0 1px rgba(18,167,163,.16)}
@media(max-width:680px){
  .content{padding:16px 14px 86px}.topbar{height:66px;padding:0 14px}
  .headline h1{font-size:23px}.card{border-radius:17px;padding:15px}
  .kpi b{font-size:25px}.premium-actionable::after{font-size:10px}
}

/* UXQA1 — click, focus and tap polish */
button,.btn,[role="button"],[data-view],[data-pux3-route],[data-premium-actionable="1"]{
  cursor:pointer;
  -webkit-tap-highlight-color:transparent;
}
button:disabled,.btn:disabled,[aria-disabled="true"]{
  cursor:not-allowed;
  opacity:.58;
  transform:none!important;
  box-shadow:none!important;
}
button:focus-visible,.btn:focus-visible,[role="button"]:focus-visible,
a:focus-visible,input:focus-visible,select:focus-visible,textarea:focus-visible{
  outline:3px solid color-mix(in srgb,currentColor 28%, transparent);
  outline-offset:3px;
}
[data-premium-actionable="1"],[data-pux3-route],.kpi[data-view]{
  transition:transform .16s ease,box-shadow .16s ease,border-color .16s ease;
}
[data-premium-actionable="1"]:hover,[data-pux3-route]:hover,.kpi[data-view]:hover{
  transform:translateY(-1px);
}
@media(max-width:760px){
  button,.btn,.i18n-switch,.flow-mobile-dock button{min-height:44px}
  .actions{gap:10px}
  .actions>.btn{white-space:normal}
}