/* UA NOC Fresh Shell - phase 1
   موحد للسايدبار والشريط العلوي بدون حواف ثقيلة */
:root{
  --ua-noc-bg:#050b14;
  --ua-noc-bg2:#081321;
  --ua-noc-panel:rgba(7,16,30,.74);
  --ua-noc-line:rgba(103,189,255,.10);
  --ua-noc-line-strong:rgba(103,189,255,.18);
  --ua-noc-text:#eef6ff;
  --ua-noc-soft:rgba(221,235,255,.68);
  --ua-noc-cyan:#43d9ff;
  --ua-noc-blue:#2f8dff;
  --ua-noc-green:#25e193;
}


/* ==========================================================
   UA GLOBAL PROGRAM BACKGROUND
   المصدر: خلفية صفحة عرض المشتركين.
   مطبقة من الجذر على كل صفحات البرنامج الموثقة بدون نسخ/ترقيع داخل الصفحات.
   ========================================================== */
:root{
  --ua-program-bg-base:#0f2a66;
  --ua-program-bg:
    radial-gradient(circle at 84% 2%, rgba(59,130,246,.30) 0 2px, transparent 3px),
    radial-gradient(circle at 5% 70%, rgba(34,197,94,.22) 0 1px, transparent 2px),
    linear-gradient(135deg,#122856 0%,#213f92 52%,#1f3f93 100%);
}

html,
body,
body.ua-authed,
body.ua-shell-chrome,
body.ua-shell-plain{
  background:var(--ua-program-bg) !important;
  background-attachment:fixed !important;
  color:#f8fafc;
}

body.ua-authed .ua-shell,
body.ua-authed .ua-main,
body.ua-authed .ua-page,
body.ua-authed .content-wrapper,
body.ua-authed .content,
body.ua-authed .wrapper,
body.ua-authed .main-wrapper,
body.ua-authed .container,
body.ua-authed .container-fluid,
body.ua-authed .ua-unified-shell-block,
body.ua-authed .ua-page-windowbar,
body.ua-authed .ua-shell-gold-line{
  background:var(--ua-program-bg) !important;
  background-attachment:fixed !important;
}

body.ua-authed .content-wrapper > .content,
body.ua-authed .content-wrapper .content{
  background:transparent !important;
}

body.ua-authed .ua-unified-shell-block,
body.ua-authed .ua-page-windowbar{
  border-color:rgba(255,255,255,.14) !important;
  box-shadow:0 18px 45px rgba(0,0,0,.18), inset 0 1px 0 rgba(255,255,255,.08) !important;
}


body.ua-authed .ua-shell,
body.ua-authed .ua-main,
body.ua-authed .ua-page,
body.ua-authed .content-wrapper,
body.ua-authed .content{
  background:var(--ua-program-bg) !important;
  background-attachment:fixed !important;
}

/* أخفِ الشريط الفارغ القديم في صفحة الداشبورد بعد أن صار هناك شريط داخل الصفحة */
body.ua-authed .ua-topbar.ua-topbar-empty{
  display:none !important;
}

.ua-sb3{
  width:252px !important;
  background:
    linear-gradient(180deg, rgba(9,20,36,.94), rgba(4,10,20,.97)) !important;
  border-inline-start:1px solid rgba(67,217,255,.08) !important;
  border-inline-end:0 !important;
  box-shadow:-22px 0 54px rgba(0,0,0,.36) !important;
}
.ua-sb3::before{
  background:
    radial-gradient(circle at 64% 8%, rgba(67,217,255,.14), transparent 34%),
    linear-gradient(180deg, rgba(255,255,255,.04), transparent 44%) !important;
  opacity:1 !important;
}
.ua-sb3-head{
  padding:18px 16px 16px !important;
  border-bottom:1px solid rgba(255,255,255,.055) !important;
  background:transparent !important;
}
.ua-sb3-avatar{
  width:48px !important;
  height:48px !important;
  border-radius:18px !important;
  background:linear-gradient(135deg, #1687ff, #43d9ff) !important;
  color:#fff !important;
  font-size:20px !important;
  box-shadow:0 12px 28px rgba(22,135,255,.22) !important;
}
.ua-sb3-name{font-size:16px !important;color:#fff !important;}
.ua-sb3-sub{font-size:11px !important;color:rgba(221,235,255,.58) !important;}
.ua-sb3-nav{padding:12px 12px 18px !important;}
.ua-sb3-item{
  min-height:48px !important;
  margin:3px 0 !important;
  padding:8px 10px !important;
  border:0 !important;
  border-radius:16px !important;
  background:transparent !important;
  color:rgba(232,244,255,.70) !important;
  box-shadow:none !important;
  transform:none !important;
}
.ua-sb3-item:hover{
  color:#fff !important;
  background:linear-gradient(90deg, rgba(67,217,255,.10), rgba(47,141,255,.05)) !important;
  box-shadow:0 0 0 1px rgba(67,217,255,.07), inset 0 1px 0 rgba(255,255,255,.04) !important;
}
.ua-sb3-item.is-active,
.ua-sb3-item.is-open{
  color:#fff !important;
  background:linear-gradient(90deg, rgba(47,141,255,.24), rgba(67,217,255,.09)) !important;
  box-shadow:0 12px 24px rgba(0,0,0,.18), 0 0 24px rgba(67,217,255,.08) !important;
}
.ua-sb3-item.is-active::after,
.ua-sb3-item.is-open::after{
  content:'' !important;
  position:absolute !important;
  right:8px !important;
  top:50% !important;
  transform:translateY(-50%) !important;
  width:3px !important;
  height:22px !important;
  border-radius:99px !important;
  background:linear-gradient(180deg, #43d9ff, #25e193) !important;
  box-shadow:0 0 20px rgba(67,217,255,.36) !important;
}
.ua-sb3-ic{
  width:36px !important;
  height:36px !important;
  border-radius:13px !important;
  background:rgba(255,255,255,.035) !important;
  border:0 !important;
  box-shadow:none !important;
}
.ua-sb3-ic img{
  width:18px !important;
  height:18px !important;
  filter:brightness(0) saturate(100%) invert(84%) sepia(20%) saturate(737%) hue-rotate(174deg) brightness(101%) contrast(96%) !important;
}
.ua-sb3-item.is-active .ua-sb3-ic,
.ua-sb3-item.is-open .ua-sb3-ic{
  background:rgba(67,217,255,.12) !important;
}
.ua-sb3-t{font-size:14px !important;font-weight:850 !important;}
.ua-sb3-caret{opacity:.38 !important;}
.ua-sb3-foot{
  border-top:1px solid rgba(255,255,255,.055) !important;
  background:transparent !important;
}
.ua-sb3-flyout-host{
  border:1px solid rgba(67,217,255,.10) !important;
  background:linear-gradient(180deg, rgba(8,18,32,.98), rgba(5,11,22,.98)) !important;
  border-radius:20px !important;
  box-shadow:0 24px 60px rgba(0,0,0,.42), 0 0 34px rgba(67,217,255,.06) !important;
}
.ua-sb3-link{
  border:0 !important;
  border-radius:14px !important;
  background:transparent !important;
}
.ua-sb3-link:hover,
.ua-sb3-link.is-active{
  background:linear-gradient(90deg, rgba(67,217,255,.12), rgba(47,141,255,.04)) !important;
}

/* UA NOC Shell - Phase 2 sidebar polish */
.ua-sb3{
  background:
    radial-gradient(circle at 65% 0%, rgba(67,217,255,.12), transparent 32%),
    linear-gradient(180deg, rgba(7,17,31,.94), rgba(3,9,18,.98)) !important;
  border:0 !important;
  box-shadow:-18px 0 55px rgba(0,0,0,.28), inset 1px 0 0 rgba(255,255,255,.035) !important;
}
.ua-sb3-head,
.ua-sb3-foot{border:0 !important;}
.ua-sb3-item{
  border:0 !important;
  border-radius:15px !important;
  background:transparent !important;
  box-shadow:none !important;
  margin:2px 0 !important;
}
.ua-sb3-item:hover{
  background:linear-gradient(90deg, rgba(67,217,255,.105), rgba(255,255,255,.015)) !important;
  box-shadow:none !important;
}
.ua-sb3-item.is-active,
.ua-sb3-item.is-open{
  background:linear-gradient(90deg, rgba(47,141,255,.22), rgba(67,217,255,.07)) !important;
  box-shadow:0 0 28px rgba(67,217,255,.07) !important;
}
.ua-sb3-ic{
  border:0 !important;
  background:rgba(255,255,255,.035) !important;
}
.ua-sb3-item.is-active .ua-sb3-ic,
.ua-sb3-item.is-open .ua-sb3-ic{
  background:rgba(67,217,255,.115) !important;
}
.ua-sb3-t{letter-spacing:0 !important;}

/* UA NOC Shell - Phase 3: premium borderless rail + unified programmatic background */
:root{
  --ua-noc-shell-bg-a:#030914;
  --ua-noc-shell-bg-b:#061426;
  --ua-noc-shell-accent:#43d9ff;
  --ua-noc-shell-accent2:#25e193;
}

html,body{
  min-height:100%;
  background:
    radial-gradient(circle at 28% -8%, rgba(67,217,255,.13), transparent 30%),
    radial-gradient(circle at 92% 12%, rgba(47,141,255,.10), transparent 28%),
    linear-gradient(180deg, var(--ua-noc-shell-bg-a) 0%, var(--ua-noc-shell-bg-b) 100%) !important;
}
body.ua-authed::before{
  content:'';
  position:fixed;
  inset:0;
  pointer-events:none;
  z-index:0;
  background-image:
    linear-gradient(rgba(67,217,255,.030) 1px, transparent 1px),
    linear-gradient(90deg, rgba(67,217,255,.026) 1px, transparent 1px),
    radial-gradient(circle at 50% 0%, rgba(37,225,147,.045), transparent 38%);
  background-size:42px 42px,42px 42px,100% 100%;
  mask-image:linear-gradient(180deg, rgba(0,0,0,.82), rgba(0,0,0,.18));
}
body.ua-authed .ua-shell,
body.ua-authed .ua-main,
body.ua-authed .content-wrapper,
body.ua-authed .content,
body.ua-authed .nocx-page{
  position:relative;
  z-index:1;
}

/* Sidebar: clean command-rail style */
.ua-sb3{
  width:238px !important;
  padding:10px 8px !important;
  background:
    radial-gradient(circle at 74% 2%, rgba(67,217,255,.14), transparent 34%),
    linear-gradient(180deg, rgba(5,14,27,.88), rgba(3,8,17,.96)) !important;
  box-shadow:-16px 0 42px rgba(0,0,0,.22), inset 1px 0 0 rgba(255,255,255,.026) !important;
  backdrop-filter:blur(16px) saturate(130%);
}
.ua-sb3::before{opacity:.75 !important;}
.ua-sb3-head{
  padding:12px 10px 13px !important;
  margin:0 0 8px !important;
}
.ua-sb3-avatar{
  width:42px !important;
  height:42px !important;
  border-radius:15px !important;
  background:
    linear-gradient(135deg, rgba(67,217,255,.95), rgba(47,141,255,.95)) !important;
  box-shadow:0 16px 34px rgba(47,141,255,.20) !important;
}
.ua-sb3-nav{
  padding:4px 4px 12px !important;
}
.ua-sb3-item{
  position:relative !important;
  min-height:42px !important;
  margin:1px 0 !important;
  padding:6px 8px !important;
  border-radius:14px !important;
  overflow:hidden !important;
}
.ua-sb3-item::before{
  content:'' !important;
  position:absolute !important;
  inset:4px !important;
  border-radius:12px !important;
  opacity:0 !important;
  background:linear-gradient(90deg, rgba(67,217,255,.13), rgba(37,225,147,.04), transparent) !important;
  transition:opacity .18s ease !important;
}
.ua-sb3-item:hover::before,
.ua-sb3-item.is-active::before,
.ua-sb3-item.is-open::before{opacity:1 !important;}
.ua-sb3-item:hover,
.ua-sb3-item.is-active,
.ua-sb3-item.is-open{
  background:transparent !important;
  box-shadow:none !important;
}
.ua-sb3-item > *{position:relative;z-index:1;}
.ua-sb3-ic{
  width:32px !important;
  height:32px !important;
  border-radius:12px !important;
  background:rgba(255,255,255,.025) !important;
}
.ua-sb3-ic img{width:17px !important;height:17px !important;opacity:.92 !important;}
.ua-sb3-t{font-size:13px !important;font-weight:800 !important;}
.ua-sb3-item.is-active::after,
.ua-sb3-item.is-open::after{
  right:2px !important;
  height:24px !important;
  width:3px !important;
  background:linear-gradient(180deg, var(--ua-noc-shell-accent), var(--ua-noc-shell-accent2)) !important;
}
.ua-sb3-flyout-host{
  border:0 !important;
  background:linear-gradient(180deg, rgba(7,18,33,.97), rgba(4,10,20,.98)) !important;
  box-shadow:0 26px 70px rgba(0,0,0,.38), inset 0 1px 0 rgba(255,255,255,.04) !important;
}
.ua-sb3-link{border:0 !important;}

/* ===== Sidebar Phase 5: external premium submenu, no heavy boxes ===== */
.ua-sb3-flyout-host{
  position:fixed !important;
  width:min(240px, calc(100vw - 24px)) !important;
  min-width:0 !important;
  max-width:240px !important;
  box-sizing:border-box !important;
  max-height:min(72vh, 620px) !important;
  overflow:auto !important;
  z-index:2140 !important;
  border:0 !important;
  border-radius:22px !important;
  padding:10px !important;
  background:
    radial-gradient(circle at 85% 0%, rgba(67,217,255,.16), transparent 32%),
    linear-gradient(180deg, rgba(7,18,33,.98), rgba(3,9,18,.98)) !important;
  box-shadow:0 26px 70px rgba(0,0,0,.42), inset 0 1px 0 rgba(255,255,255,.055) !important;
  backdrop-filter:blur(16px) saturate(130%) !important;
}
.ua-sb3-fly{
  direction:rtl !important;
}
.ua-sb3-fly-head{
  padding:9px 12px 12px !important;
  color:#fff !important;
  font-size:14px !important;
  font-weight:950 !important;
  border:0 !important;
}
.ua-sb3-fly-body{
  display:flex !important;
  flex-direction:column !important;
  gap:4px !important;
}
.ua-sb3-link{
  min-height:40px !important;
  display:flex !important;
  align-items:center !important;
  gap:10px !important;
  padding:7px 10px !important;
  border:0 !important;
  border-radius:14px !important;
  background:transparent !important;
  color:rgba(231,242,255,.76) !important;
  text-decoration:none !important;
  box-shadow:none !important;
  transition:background .16s ease, color .16s ease, transform .16s ease !important;
}
.ua-sb3-link .ua-sb3-ic{
  width:28px !important;
  height:28px !important;
  border-radius:12px !important;
  background:rgba(255,255,255,.035) !important;
  color:#8feaff !important;
}
.ua-sb3-link:hover,
.ua-sb3-link.is-active{
  color:#fff !important;
  transform:translateX(-2px) !important;
  background:linear-gradient(90deg, rgba(67,217,255,.13), rgba(37,225,147,.045), transparent) !important;
}
.ua-sb3-link.is-active::after{
  content:'' !important;
  margin-inline-start:auto !important;
  width:6px !important;
  height:6px !important;
  border-radius:50% !important;
  background:#43d9ff !important;
  box-shadow:0 0 14px rgba(67,217,255,.6) !important;
}
.ua-sb3-flyout-host::-webkit-scrollbar{width:4px !important;}
.ua-sb3-flyout-host::-webkit-scrollbar-thumb{background:rgba(67,217,255,.28) !important;border-radius:99px !important;}
/* hide unified footer when a page explicitly requests it */
body:has(.nocx-page) .ua-footer{display:none !important;}
body:has(.nocx-page) .ua-main{padding-bottom:0 !important;}


/* UA GLOBAL PROGRAM BACKGROUND - final guard
   يمنع رجوع الخلفيات البيضاء/القديمة من أي ستايل سابق. */
html body.ua-authed,
html body.ua-authed.ua-shell-chrome,
html body.ua-authed.ua-shell-plain,
html body.ua-authed .ua-shell,
html body.ua-authed .ua-main,
html body.ua-authed .ua-page,
html body.ua-authed .content-wrapper,
html body.ua-authed .content,
html body.ua-authed .wrapper,
html body.ua-authed .main-wrapper,
html body.ua-authed .container,
html body.ua-authed .container-fluid,
html body.ua-authed .ua-unified-shell-block,
html body.ua-authed .ua-page-windowbar,
html body.ua-authed .ua-shell-gold-line{
  background:var(--ua-program-bg) !important;
  background-attachment:fixed !important;
}

html body.ua-authed .card,
html body.ua-authed .modal-content,
html body.ua-authed .dropdown-menu,
html body.ua-authed .table-responsive,
html body.ua-authed .ua-panel{
  background-clip:padding-box !important;
}

/* ==========================================================
   UA GLOBAL GLASS TRANSPARENCY - cards & bars
   المطلوب: جعل الكروت والأشرطة في كل صفحات البرنامج شفافة
   حتى تظهر خلفية عرض المشتركين، بدون لمس منطق الصفحات.
   ========================================================== */
:root{
  --ua-glass-card:rgba(7,16,30,.48);
  --ua-glass-card-strong:rgba(7,16,30,.58);
  --ua-glass-card-soft:rgba(7,16,30,.34);
  --ua-glass-bar:rgba(5,12,24,.46);
  --ua-glass-bar-strong:rgba(5,12,24,.62);
  --ua-glass-border:rgba(255,255,255,.16);
  --ua-glass-border-gold:rgba(255,211,92,.22);
  --ua-glass-shadow:0 18px 45px rgba(0,0,0,.20), inset 0 1px 0 rgba(255,255,255,.075);
}

html body.ua-authed :where(
  .card,.box,.panel,.well,.callout,
  .ua-card,.sa-card,.ua-panel,.ua-studio-card,.nocx-card,.mk-stat-card,
  .small-box,.info-box,.stat-card,.dashboard-card,.metric-card,
  .widget,.widget-card,.profile-card,.settings-card,
  .invoice-card,.voucher-card,.agent-card,.finance-card,
  .modal-content,.dropdown-menu,.popover
){
  background:linear-gradient(180deg, var(--ua-glass-card-strong), var(--ua-glass-card-soft)) !important;
  border-color:var(--ua-glass-border) !important;
  box-shadow:var(--ua-glass-shadow) !important;
  backdrop-filter:blur(16px) saturate(135%) !important;
  -webkit-backdrop-filter:blur(16px) saturate(135%) !important;
  background-clip:padding-box !important;
}

html body.ua-authed :where(
  .card-header,.box-header,.panel-heading,.modal-header,
  .card-footer,.box-footer,.panel-footer,.modal-footer,
  .ua-card-head,.ua-card-header,.ua-panel-head,.ua-studio-head,
  .nocx-card-head,.widget-header,.profile-header,.settings-header
){
  background:linear-gradient(180deg, rgba(255,255,255,.075), rgba(255,255,255,.018)) !important;
  border-color:rgba(255,255,255,.13) !important;
  backdrop-filter:blur(12px) saturate(125%) !important;
  -webkit-backdrop-filter:blur(12px) saturate(125%) !important;
}

html body.ua-authed :where(
  .ua-topbar,.main-header,.navbar,.navbar-custom-menu,
  .content-header,.page-header,.ua-page-titlebar,
  .ua-unified-shell-block,.ua-page-windowbar,.ua-windowbar,
  .ua-shell-gold-line,.nav-tabs,.nav-pills,.breadcrumb,
  .toolbar,.page-toolbar,.actions-bar,.filter-bar,.search-bar,
  .dataTables_wrapper .row:first-child,
  .dataTables_wrapper .row:last-child
){
  background:linear-gradient(180deg, var(--ua-glass-bar-strong), var(--ua-glass-bar)) !important;
  border-color:var(--ua-glass-border-gold) !important;
  box-shadow:0 14px 34px rgba(0,0,0,.18), inset 0 1px 0 rgba(255,255,255,.07) !important;
  backdrop-filter:blur(16px) saturate(135%) !important;
  -webkit-backdrop-filter:blur(16px) saturate(135%) !important;
  background-clip:padding-box !important;
}

html body.ua-authed :where(
  .table-responsive,.table-wrapper,.grid-wrapper,.list-wrapper,
  .dataTables_wrapper,.dt-container
){
  background:rgba(6,16,30,.42) !important;
  border-color:rgba(255,211,92,.18) !important;
  box-shadow:0 14px 34px rgba(0,0,0,.16), inset 0 1px 0 rgba(255,255,255,.055) !important;
  backdrop-filter:blur(13px) saturate(125%) !important;
  -webkit-backdrop-filter:blur(13px) saturate(125%) !important;
}

html body.ua-authed table,
html body.ua-authed table.table{
  background:transparent !important;
}
html body.ua-authed :where(table,.table) :where(tbody tr, tbody td, tbody th){
  background-color:rgba(7,17,32,.30) !important;
}
html body.ua-authed :where(table,.table) :where(thead tr, thead th, thead td){
  background-color:rgba(6,16,30,.56) !important;
}

html body.ua-authed :where(
  .form-control,.form-select,select,textarea,
  input[type="text"],input[type="password"],input[type="number"],input[type="email"],input[type="date"],input[type="search"]
){
  background-color:rgba(6,16,30,.52) !important;
  border-color:rgba(255,255,255,.16) !important;
  color:#f8fafc !important;
  backdrop-filter:blur(10px) !important;
  -webkit-backdrop-filter:blur(10px) !important;
}

/* السايدبار أيضاً شفاف لكن مع عتامة كافية حتى لا تضيع القوائم */
html body.ua-authed .ua-sb3,
html body.ua-authed .main-sidebar,
html body.ua-authed .control-sidebar{
  background:
    radial-gradient(circle at 68% 0%, rgba(67,217,255,.14), transparent 34%),
    linear-gradient(180deg, rgba(7,17,31,.70), rgba(3,9,18,.78)) !important;
  backdrop-filter:blur(18px) saturate(135%) !important;
  -webkit-backdrop-filter:blur(18px) saturate(135%) !important;
  box-shadow:-18px 0 55px rgba(0,0,0,.24), inset 1px 0 0 rgba(255,255,255,.05) !important;
}

html body.ua-authed .ua-sb3-flyout-host{
  background:linear-gradient(180deg, rgba(7,18,33,.72), rgba(4,10,20,.78)) !important;
  border:1px solid rgba(255,255,255,.12) !important;
  backdrop-filter:blur(18px) saturate(135%) !important;
  -webkit-backdrop-filter:blur(18px) saturate(135%) !important;
}
