/* assets/css/ua_modern.css
   Clean modern RTL theme (no AdminLTE)
*/

:root{
  /* Armoury-inspired Dark + Gold system */
  --ua-bg: #0b0f14;
  --ua-card: rgba(20,26,34,.72);
  --ua-border: rgba(255,255,255,.10);
  --ua-border-strong: rgba(255,255,255,.16);
  --ua-shadow: 0 22px 70px rgba(0, 0, 0, .45);
  --ua-shadow-soft: 0 14px 34px rgba(0, 0, 0, .32);

  --ua-text: #eaf0ff;
  --ua-text-soft: rgba(234,240,255,.72);

  --ua-accent: #f5b000;
  --ua-accent-2: #ffcc33;
  --ua-ok: #22c55e;
  --ua-warn: #f59e0b;
  --ua-bad: #ef4444;

  /* Sidebar sizing (legacy) */
  --ua-sb-gap: 4px; /* المسافة بين السايدبار والمحتوى */
  --ua-sidebar-w: 260px;
  --ua-sidebar-mini: 260px;

  /* Decorative gradients (subtle on dark) */
  --ua-grad-1: rgba(245,176,0,.20);
  --ua-grad-2: rgba(122,167,255,.16);
  --ua-grad-3: rgba(190,130,255,.14);
  --ua-grad-4: rgba(255,140,60,.12);
}


*{ box-sizing: border-box; }
html, body{ height:100%; }
body{
  direction: rtl;
  margin:0;
  background:
    radial-gradient(1000px 650px at 20% 10%, var(--ua-grad-2), transparent 60%),
    radial-gradient(900px 600px at 80% 20%, var(--ua-grad-3), transparent 58%),
    radial-gradient(900px 600px at 40% 92%, var(--ua-grad-1), transparent 55%),
    radial-gradient(700px 520px at 82% 86%, var(--ua-grad-4), transparent 58%),
    var(--ua-bg);
  color: var(--ua-text);
  font-family: system-ui, -apple-system, Segoe UI, Tahoma, Arial, sans-serif;
}

/* Shell */
.ua-shell{
  min-height: 100vh;
  display:flex;
  flex-direction: column;
}
.ua-shell.ua-embed .ua-topbar,
.ua-shell.ua-embed .ua-mega,
.ua-shell.ua-embed .ua-sidebar{
  display:none !important;
}

/* Topbar */
.ua-topbar{
  position: sticky;
  top: 0;
  z-index: 50;
  display:flex;
  align-items:center;
  gap:14px;
  padding: 14px 16px;
  margin: 10px 14px 0;
  border-radius: 16px;
  background: rgba(14,18,26,.70);
  border: 1px solid var(--ua-border);
  box-shadow: var(--ua-shadow-soft);
  backdrop-filter: blur(14px);
  position: relative;
  overflow: hidden;
}
.ua-top-left{ display:flex; align-items:center; gap:12px; min-width: 260px; }
.ua-burger{
  border: 0;
  background: linear-gradient(160deg, rgba(245,176,0,.98), rgba(245,176,0,.72), rgba(255,204,51,.35));
  backdrop-filter: blur(14px);
  color:#0b0f14;
  width: 44px;
  height: 44px;
  border-radius: 14px;
  font-size: 18px;
  cursor:pointer;
  box-shadow: 0 10px 25px rgba(255, 122, 166, .18);
}

/* Mobile-only burger (desktop sidebar is hover-expand) */
@media (min-width: 993px){
  .ua-burger{ display:none; }
}
.ua-brand{ line-height:1.1; }
.ua-brand-title{ font-weight: 900; font-size: 15px; }
.ua-brand-sub{ opacity:.75; font-weight: 700; font-size: 12px; }

.ua-top-center{ flex:1; display:flex; justify-content:center; }
.ua-search{
  width:min(560px, 100%);
  display:flex;
  align-items:center;
  gap:10px;
  background: rgba(255,255,255,.06);
  border: 1px solid var(--ua-border);
  border-radius: 16px;
  padding: 10px 14px;
}
.ua-search input{
  border:0;
  outline:none;
  width:100%;
  background: transparent;
  font-weight:800;
  color: var(--ua-text);
}
.ua-search input::placeholder{ color: rgba(234,240,255,.55); }
.ua-search i{ color: rgba(245,176,0,.85); }

.ua-top-right{ min-width: 130px; display:flex; justify-content:flex-end; }
.ua-toplink{
  display:inline-flex;
  align-items:center;
  gap:8px;
  padding: 9px 11px;
  border-radius: 14px;
  text-decoration:none;
  font-weight: 900;
  color: var(--ua-text);
  background: rgba(255,255,255,.06);
  border: 1px solid var(--ua-border);
}
.ua-toplink:hover{ background: rgba(255,255,255,.10); border-color: var(--ua-border-strong); }

.ua-toplink:hover{ background: rgba(255,255,255,.85); }

/* Mega menu */
.ua-mega{
  z-index: 45;
  margin: 10px 14px 0;
  padding: 10px 10px;
  border-radius: 16px;
  background: rgba(255,255,255,.55);
  border: 1px solid rgba(255,255,255,.45);
  box-shadow: var(--ua-shadow-soft);
  backdrop-filter: blur(10px);
  display:flex;
  flex-wrap: wrap;
  gap:10px;
  justify-content: flex-start;
}
.ua-dd{ position: relative; }
.ua-pill{
  border: 0;
  cursor: pointer;
  display:flex;
  align-items:center;
  gap:10px;
  padding: 10px 14px;
  border-radius: 16px;
  background: rgba(255,255,255,.85);
  border: 1px solid var(--ua-border);
  box-shadow: 0 10px 25px rgba(20,20,40,.06);
  font-weight: 900;
}
.ua-pill .ua-ico{ opacity:.95; width: 20px; text-align:center; }
.ua-pill .ua-caret{ opacity:.55; font-weight: 900; margin-inline-start: 2px; }
.ua-pill:hover{ background: rgba(255,255,255,.98); }

.ua-menu{
  position:absolute;
  inset-inline-start: 0;
  top: calc(100% + 8px);
  min-width: 240px;
  padding: 8px;
  border-radius: 16px;
  background: rgba(255,255,255,.92);
  border: 1px solid rgba(0,0,0,.06);
  box-shadow: var(--ua-shadow);
  backdrop-filter: blur(12px);
  display:none;
}
.ua-dd.is-open .ua-menu{ display:block; }
.ua-item{
  display:flex;
  align-items:center;
  gap:10px;
  padding: 9px 11px;
  border-radius: 14px;
  text-decoration:none;
  color:#1b1d24;
  font-weight: 800;
}
.ua-item i{ width:18px; text-align:center; opacity:.85; }
.ua-item:hover{ background: rgba(122,167,255,.14); }

/* Sidebar (Right - fixed, no logical inset to avoid RTL flip) */
.ua-sidebar{
  position: fixed;
  top: 12px;
  bottom: 12px;
  right: 12px !important;
  left: auto !important;
  width: var(--ua-sidebar-w);
  border-radius: 26px;
  overflow: hidden;
  z-index: 60;

  display:flex;
  flex-direction: column;

  background: linear-gradient(165deg, rgba(255,181,107,.92), rgba(255,122,166,.78), rgba(122,167,255,.72));
  box-shadow: 0 24px 60px rgba(25, 25, 60, .16);
  border: 1px solid rgba(255,255,255,.35);
}

.ua-sb-art{
  position:absolute;
  inset:0;
  pointer-events:none;
  opacity:.95;
}
.ua-sb-art:after{
  content:'';
  position:absolute;
  inset:0;
  background:
    radial-gradient(260px 220px at 20% 10%, rgba(255,255,255,.40), transparent 60%),
    radial-gradient(280px 220px at 80% 30%, rgba(255,255,255,.22), transparent 60%),
    radial-gradient(320px 260px at 50% 90%, rgba(255,255,255,.16), transparent 60%);
  mix-blend-mode: soft-light;
}
.ua-sb-art .blob{
  position:absolute;
  border-radius: 999px;
  filter: blur(10px);
  opacity:.55;
  transform: translateZ(0);
}
.ua-sb-art .b1{ width: 220px; height: 220px; top:-60px; inset-inline-start: -60px; background: rgba(255,255,255,.45); }
.ua-sb-art .b2{ width: 260px; height: 260px; top: 140px; inset-inline-end: -80px; background: rgba(255,255,255,.22); }
.ua-sb-art .b3{ width: 240px; height: 240px; bottom: -70px; inset-inline-start: 40px; background: rgba(255,255,255,.18); }

.ua-sb-head{
  position: relative;
  display:flex;
  gap:10px;
  align-items:center;
  padding: 14px 16px 8px;
}
.ua-avatar{
  width: 44px;
  height: 44px;
  border-radius: 16px;
  background: rgba(255,255,255,.35);
  border: 1px solid rgba(255,255,255,.35);
  display:flex;
  align-items:center;
  justify-content:center;
  font-weight: 900;
  color:#fff;
}
.ua-sb-user{ color:#fff; }
.ua-sb-role{ font-weight: 800; font-size: 12px; opacity:.92; }
.ua-sb-name{ font-weight: 900; font-size: 14px; }

.ua-sb-nav{
  position: relative;
  padding: 10px 14px 12px;
  display:flex;
  flex-direction: column;
  gap: 10px;
  flex: 1;
  overflow-y: auto;
  overflow-x: hidden;
}

/* Sidebar link / accordion base styling (fix: blue underlined links) */
.ua-sb-link,
.ua-sb-sec-btn{
  position: relative;
  display: flex;
  align-items: center;
  gap: 10px;
  width: 100%;
  padding: 10px 12px; /* ~15% smaller */
  border-radius: 18px;
  color: rgba(255,255,255,.98);
  text-decoration: none;
  font-weight: 900;
  background: rgba(255,255,255,.14);
  border: 1px solid rgba(255,255,255,.22);
  box-shadow: 0 10px 22px rgba(0,0,0,.06);
  cursor: pointer;
  user-select: none;
}
.ua-sb-link span{ flex: 1; }
.ua-sb-link:hover,
.ua-sb-sec-btn:hover{ background: rgba(255,255,255,.20); }
.ua-sb-link:active,
.ua-sb-sec-btn:active{ transform: translateY(0); }
.ua-sb-sec-btn{ border: 1px solid rgba(255,255,255,.22); outline: none; }
.ua-sb-sec-btn span{ flex: 1; }
.ua-sb-sec-btn .ua-sb-caret{ opacity:.75; font-size: 13px; min-width: 18px; text-align:center; }

.ua-sb-sec{ position: relative; }
.ua-sb-sub{
  margin-top: 8px;
  padding: 6px 6px;
  border-radius: 18px;
  background: rgba(255,255,255,.10);
  border: 1px solid rgba(255,255,255,.14);
  display: none;
}
.ua-sb-sec.is-open .ua-sb-sub{ display: block; }

.ua-sb-sublink{
  position: relative;
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 9px 12px; /* ~15% smaller */
  border-radius: 16px;
  color: rgba(255,255,255,.96);
  text-decoration: none;
  font-weight: 850;
  background: rgba(255,255,255,.08);
  border: 1px solid rgba(255,255,255,.12);
  margin: 6px 0;
}
.ua-sb-sublink i{ width: 18px; text-align:center; opacity:.92; }
.ua-sb-sublink span{ flex: 1; }
.ua-sb-sublink:hover{ background: rgba(255,255,255,.16); transform: translateY(-1px); }

/* Active styles for sublinks */
.ua-sb-sublink.is-active{ background: rgba(255,255,255,.22); box-shadow: 0 12px 24px rgba(0,0,0,.08); }
.ua-sb-sublink i,
.ua-sb-sec-btn i,
.ua-sb-link i{ width: 18px; text-align:center; opacity: .95; }

/* Reduce general icon size ~15% */
.ua-sidebar .fa{ font-size: 0.92em; }
.ua-sb-nav::-webkit-scrollbar{ width: 10px; }
.ua-sb-nav::-webkit-scrollbar-thumb{ background: rgba(255,255,255,.28); border-radius: 999px; }
.ua-sb-nav::-webkit-scrollbar-track{ background: rgba(0,0,0,.08); }

/* Deeper hover shine (wave) */
.ua-sb-link::before,
.ua-sb-sublink::before{
  content:'';
  position:absolute;
  inset:0;
  border-radius: inherit;
  background: linear-gradient(115deg, transparent 0%, rgba(255,255,255,.22) 45%, transparent 70%);
  transform: translateX(110%);
  opacity: 0;
  pointer-events:none;
}
.ua-sb-link:hover::before,
.ua-sb-sublink:hover::before{
  opacity: 1;
  animation: ua-shine 650ms ease;
}
@keyframes ua-shine{
  from{ transform: translateX(110%); }
  to{ transform: translateX(-120%); }
}
.ua-sb-link i{ width: 18px; text-align:center; opacity:.95; }
.ua-sb-link span{ flex: 1; text-align: start; }
.ua-sb-link:hover{
  transform: translateY(-1px);
  background: rgba(255,255,255,.22);
}
.ua-sb-link.is-active{
  background: rgba(255,255,255,.28);
}

.ua-sb-foot{
  position:absolute;
  inset-inline: 14px;
  bottom: 14px;
  display:flex;
  gap: 10px;
}
.ua-sb-btn{
  flex: 1;
  border: 0;
  cursor: pointer;
  padding: 12px 12px;
  border-radius: 16px;
  font-weight: 900;
  color:#fff;
  background: rgba(255,255,255,.18);
  border: 1px solid rgba(255,255,255,.22);
  text-decoration:none;
  text-align:center;
}
.ua-sb-btn:hover{ background: rgba(255,255,255,.26); }
.ua-sb-btn.danger{ background: rgba(0,0,0,.14); }

/* Main area */
.ua-main{
  flex: 1;
  position: relative;
}
.ua-page{
  padding: 14px 14px 0;
}

/* Allocate space for sidebar on desktop */
body.ua-authed .ua-page{
  padding-right: calc(var(--ua-sidebar-w) + var(--ua-sb-gap));
  padding-left: 14px;
}
body.ua-authed .ua-topbar{
  margin-right: calc(var(--ua-sidebar-w) + var(--ua-sb-gap));
  margin-left: 14px;
}
body.ua-guest .ua-page{
  padding-right: 14px;
  padding-left: 14px;
}

/* Make topbar follow sidebar open/mini (desktop)
   IMPORTANT: keep the spacing consistent with the sidebar width.
   A previous tweak added a fixed +26px which created a visible gap.
*/
body.ua-authed .ua-topbar{
  margin-right: calc(var(--ua-sidebar-w) + var(--ua-sb-gap));
  margin-left: 14px;
}
body.ua-authed.ua-sidebar-mini .ua-topbar{
  margin-right: calc(var(--ua-sidebar-mini) + var(--ua-sb-gap));
}
@media (max-width: 992px){
  body.ua-authed .ua-topbar{ margin-right: 14px; margin-left: 14px; }
}

/* Make footer follow sidebar open/mini (desktop) */
body.ua-authed .ua-footer{
  margin-right: calc(var(--ua-sidebar-w) + var(--ua-sb-gap));
  margin-left: 14px;
}
body.ua-authed.ua-sidebar-mini .ua-footer{
  margin-right: calc(var(--ua-sidebar-mini) + var(--ua-sb-gap));
}
@media (max-width: 992px){
  body.ua-authed .ua-footer{ margin-right: 14px; margin-left: 14px; }
}

/* Legacy wrappers (pages still use AdminLTE-like markup) */
.content-wrapper{
  /* Workspace: gray (requested) while keeping Armoury dark shell */
  background: linear-gradient(180deg, rgba(182,186,196,.94), rgba(151,156,168,.94));
  border: 1px solid rgba(0,0,0,.18);
  border-radius: 24px;
  box-shadow: var(--ua-shadow-soft);
  padding: 14px;
  min-height: calc(100vh - 240px);
  backdrop-filter: blur(6px);
}

.content-header h1{
  font-size: 1.35rem;
  font-weight: 900;
  margin: 0 0 12px;
}

/* Cards/forms fine tuning */
.card{
  border-radius: 18px !important;
  border: 1px solid var(--ua-border) !important;
  background: var(--ua-card) !important;
  box-shadow: var(--ua-shadow-soft);
  color: var(--ua-text);
}
.card-header{
  border-radius: 18px 18px 0 0 !important;
  background: rgba(255,255,255,.06) !important;
  border-bottom: 1px solid var(--ua-border) !important;
  color: var(--ua-text);
}
.btn{ border-radius: 14px !important; font-weight: 800; }

/* Footer */
.ua-footer{
  margin: 14px;
  border-radius: 16px;
  position: relative;
  overflow: hidden;
  background: rgba(14,18,26,.70);
  border: 1px solid var(--ua-border);
  box-shadow: var(--ua-shadow-soft);
  backdrop-filter: blur(14px);
}

.ua-footer::before{
  content: "";
  position: absolute;
  inset: 0;
  background: rgba(255,255,255,.46);
  pointer-events: none;
}
.ua-footer::after{
  content: "";
  position: absolute;
  inset: -40px;
  background:
    radial-gradient(circle at 12% 30%, rgba(255,181,107,.35), transparent 52%),
    radial-gradient(circle at 55% 0%, rgba(255,122,166,.25), transparent 58%),
    radial-gradient(circle at 92% 75%, rgba(122,167,255,.28), transparent 60%);
  opacity: .55;
  filter: blur(18px);
  pointer-events: none;
}
.ua-footer-inner{
  padding: 10px 14px;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap: 12px;
  font-weight: 800;
  position: relative;
  z-index: 1;
}

/* Footer pills spacing */
.ua-footer-right{ display:flex; align-items:center; gap: 12px; flex-wrap: wrap; }
.ua-foot-pill{
  display:inline-flex;
  align-items:center;
  gap:8px;
  padding: 7px 12px;
  border-radius: 999px;
  background: rgba(255,255,255,.72);
  border: 1px solid rgba(255,255,255,.58);
  box-shadow: 0 10px 22px rgba(0,0,0,.06);
  white-space: nowrap;
}
.ua-foot-brand{
  background: linear-gradient(135deg, rgba(255,181,107,.42), rgba(255,122,166,.28), rgba(122,167,255,.22));
  border-color: rgba(255,255,255,.55);
}
.ua-footer-left{ display:flex; align-items:center; gap: 10px; opacity:.86; white-space: nowrap; }

.ua-foot-meta{
  opacity: .92;
}
.ua-foot-badge{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  width: 34px;
  height: 28px;
  border-radius: 999px;
  background: linear-gradient(135deg, rgba(255,181,107,.95), rgba(255,122,166,.75), rgba(122,167,255,.65));
  color:#fff;
  font-weight: 1000;
  letter-spacing: .5px;
}

/* Logout top link subtle */
.ua-toplink.ua-logout{
  background: linear-gradient(135deg, rgba(255,181,107,.30), rgba(255,122,166,.22), rgba(122,167,255,.18));
}

/* Guest hero + modal */
.ua-guest-hero{
  min-height: calc(100vh - 160px);
  display:flex;
  align-items:center;
  justify-content:center;
  padding: 30px 16px;
}
.ua-hero-card{
  width: min(640px, 100%);
  border-radius: 28px;
  background: rgba(255,255,255,.72);
  border: 1px solid rgba(255,255,255,.55);
  box-shadow: var(--ua-shadow);
  backdrop-filter: blur(12px);
  padding: 26px;
  text-align:center;
}
.ua-hero-badge{
  display:inline-block;
  padding: 8px 12px;
  border-radius: 999px;
  background: linear-gradient(135deg, rgba(255,181,107,.95), rgba(255,122,166,.75), rgba(122,167,255,.65));
  color:#fff;
  font-weight: 900;
  margin-bottom: 12px;
}
.ua-hero-title{ font-weight: 1000; margin: 0 0 6px; }
.ua-hero-sub{ margin:0; opacity:.85; font-weight: 800; }
.ua-hero-actions{ margin-top: 18px; }
.ua-hero-btn{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  padding: 12px 16px;
  border-radius: 16px;
  text-decoration:none;
  font-weight: 900;
  color:#fff;
  background: linear-gradient(135deg, rgba(255,181,107,.95), rgba(255,122,166,.85), rgba(122,167,255,.75));
  box-shadow: 0 18px 40px rgba(255, 122, 166, .22);
}

/* Modal */
.ua-modal{ position: fixed; inset:0; display:none; z-index: 100; }
.ua-modal.is-open{ display:block; }
.ua-modal-backdrop{
  position:absolute; inset:0;
  background: rgba(0,0,0,.35);
  backdrop-filter: blur(8px);
}
.ua-modal-dialog{
  position:relative;
  min-height: 100%;
  display:flex;
  align-items:center;
  justify-content:center;
  padding: 18px;
}
.ua-modal-card{
  width: min(560px, 100%);
  border-radius: 22px;
  overflow:hidden;
  background: rgba(255,255,255,.78);
  border: 1px solid rgba(255,255,255,.55);
  box-shadow: var(--ua-shadow);
  backdrop-filter: blur(14px);
}
.ua-modal-strip{
  padding: 18px;
  color:#fff;
  background: linear-gradient(135deg, rgba(255,181,107,.95), rgba(255,122,166,.85), rgba(122,167,255,.78));
}
.ua-modal-title{ font-weight: 1000; font-size: 18px; }
.ua-modal-sub{ opacity:.9; font-weight: 800; margin-top: 4px; }
.ua-modal-body{ padding: 18px; }
.ua-login-btn{
  width:100%;
  border:0;
  border-radius: 16px;
  padding: 9px 11px;
  font-weight: 1000;
  color:#fff;
  background: linear-gradient(135deg, rgba(255,181,107,.95), rgba(255,122,166,.85), rgba(122,167,255,.78));
}
.ua-cancel-btn{
  width:100%;
  border:0;
  background: transparent;
  font-weight: 900;
  opacity: .8;
}

/* Sidebar mini */
body.ua-authed.ua-sidebar-mini .ua-sidebar{
  width: var(--ua-sidebar-mini);
}
body.ua-authed.ua-sidebar-mini .ua-sb-user,
body.ua-authed.ua-sidebar-mini .ua-sb-link span,
body.ua-authed.ua-sidebar-mini .ua-sb-sec-btn span,
body.ua-authed.ua-sidebar-mini .ua-sb-sublink span{
  display:none;
}
body.ua-authed.ua-sidebar-mini .ua-sb-link{
  justify-content:center;
}
body.ua-authed.ua-sidebar-mini .ua-sb-sec-btn{
  justify-content:center;
}
body.ua-authed.ua-sidebar-mini body.ua-authed.ua-sidebar-mini .ua-sb-link i{
  margin:0;
}

body.ua-authed.ua-sidebar-mini .ua-sb-sec-btn{
  justify-content:center;
}
body.ua-authed.ua-sidebar-mini .ua-sb-caret{
  display:none;
}
@media (max-width: 992px){
  body.ua-authed .ua-page{ padding-right: 14px; }
  .ua-sidebar{
    transform: translateX(110%);
    transition: transform .2s ease;
    right: 10px;
    left: auto;
    width: min(var(--ua-sidebar-w), 92vw);
  }
  body.ua-authed.ua-sidebar-open .ua-sidebar{ transform: translateX(0); }
}

/* === Smart Sidebar Enhancements (v2) === */

/* Backdrop for mobile sidebar */
.ua-sb-backdrop{
  position: fixed;
  inset: 0;
  z-index: 58; /* under sidebar (60) */
  background: rgba(0,0,0,.25);
  backdrop-filter: blur(2px);
  display: none;
}
body.ua-authed.ua-sidebar-open .ua-sb-backdrop{ display:block; }

/* Smoother sidebar motion */
.ua-sidebar{
  transition: width .22s ease, transform .22s ease;
}

/* Artistic blob motion */
@keyframes uaFloat1{ 0%,100%{ transform: translate(0,0) scale(1); } 50%{ transform: translate(10px, -14px) scale(1.03); } }
@keyframes uaFloat2{ 0%,100%{ transform: translate(0,0) scale(1); } 50%{ transform: translate(-12px, 10px) scale(1.02); } }
@keyframes uaFloat3{ 0%,100%{ transform: translate(0,0) scale(1); } 50%{ transform: translate(8px, 12px) scale(1.02); } }
.ua-sb-art .b1{ animation: uaFloat1 7s ease-in-out infinite; }
.ua-sb-art .b2{ animation: uaFloat2 8.5s ease-in-out infinite; }
.ua-sb-art .b3{ animation: uaFloat3 9.5s ease-in-out infinite; }

/* Active link glow + indicator */
.ua-sb-link{
  position: relative;
  transition: transform .15s ease, background .15s ease, box-shadow .15s ease;
}
.ua-sb-link.is-active{
  background: rgba(255,255,255,.30);
  box-shadow: 0 14px 34px rgba(0,0,0,.10);
}
.ua-sb-link.is-active::before{
  content:'';
  position:absolute;
  inset-inline-start: 10px;
  top: 50%;
  transform: translateY(-50%);
  width: 6px;
  height: 28px;
  border-radius: 999px;
  background: rgba(255,255,255,.85);
  box-shadow: 0 0 0 6px rgba(255,255,255,.12);
}

/* Mini mode tooltips */
body.ua-authed.ua-sidebar-mini .ua-sb-link,
body.ua-authed.ua-sidebar-mini .ua-sb-sec-btn{
  padding: 12px 10px;
}
body.ua-authed.ua-sidebar-mini .ua-sb-link::after,
body.ua-authed.ua-sidebar-mini .ua-sb-sec-btn::after{
  content: attr(data-ua-tip);
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  inset-inline-end: calc(100% + 10px); /* show inside page (left of sidebar) */
  background: rgba(255,255,255,.92);
  color: #1b1d24;
  border: 1px solid rgba(0,0,0,.08);
  box-shadow: var(--ua-shadow-soft);
  padding: 8px 10px;
  border-radius: 12px;
  font-weight: 900;
  white-space: nowrap;
  opacity: 0;
  pointer-events: none;
  transition: opacity .12s ease, transform .12s ease;
}
body.ua-authed.ua-sidebar-mini .ua-sb-link:hover::after,
body.ua-authed.ua-sidebar-mini .ua-sb-sec-btn:hover::after{
  opacity: 1;
  transform: translateY(-50%) translateX(-4px);
}

/* Mobile: ensure sidebar is truly off-canvas */
@media (max-width: 992px){
  .ua-sidebar{ transform: translateX(115%); }
  body.ua-authed.ua-sidebar-open .ua-sidebar{ transform: translateX(0); }
}


/* === Orange blurred waves (final) === */
.ua-sb-art:before{
  content:'';
  position:absolute;
  inset:-40px;
  background:
    radial-gradient(320px 260px at 15% 20%, rgba(255,210,160,.65), transparent 60%),
    radial-gradient(360px 280px at 85% 35%, rgba(255,140,80,.55), transparent 62%),
    radial-gradient(420px 320px at 45% 92%, rgba(255,90,120,.35), transparent 65%);
  filter: blur(18px);
  opacity:.95;
}
.ua-sidebar{ background-blend-mode: screen; }


/* === Flyout submenus (open to the left of sidebar) === */
.ua-sidebar{ overflow: visible; }

/* Hide inner subs only when flyout is enabled (so if JS fails, accordion still works) */
body.ua-flyout-on .ua-sb-sub{ display:none !important; }

.ua-sb-flyout{
  position: fixed;
  width: 260px;
  max-height: calc(100vh - 20px);
  overflow: auto;
  z-index: 99999;
  border-radius: 18px;
  background: rgba(255, 168, 90, .22);
  border: 1px solid rgba(255,255,255,.35);
  box-shadow: 0 18px 55px rgba(20,20,40,.22);
  backdrop-filter: blur(18px);
}

.ua-sb-flyout-head{
  padding: 12px 14px;
  font-weight: 900;
  color: rgba(20,20,30,.92);
  border-bottom: 1px solid rgba(255,255,255,.35);
}

.ua-sb-flyout-body{
  padding: 10px;
  display: grid;
  gap: 8px;
}

.ua-sb-flylink{
  display:flex;
  align-items:center;
  gap:10px;
  padding: 10px 12px;
  border-radius: 14px;
  text-decoration:none;
  color: rgba(20,20,30,.92);
  background: rgba(255,255,255,.55);
  border: 1px solid rgba(255,255,255,.45);
}

.ua-sb-flylink:hover{
  transform: translateY(-1px);
  background: rgba(255,255,255,.72);
}

/* Mobile: fall back to inside */
@media (max-width: 768px){
  body.ua-flyout-on .ua-sb-flyout{ display:none !important; }
  body.ua-flyout-on .ua-sb-sub{ display:block !important; }
}


/* ==== Flyout Fix ==== */
body.ua-flyout-on .ua-sb-sub{display:none!important;}
.ua-sidebar{overflow:visible;}

.ua-sb-flyout{
 position:fixed;
 width:260px;
 max-height:90vh;
 overflow:auto;
 background:rgba(255,170,80,.25);
 backdrop-filter:blur(16px);
 border-radius:16px;
 border:1px solid rgba(255,255,255,.4);
 box-shadow:0 15px 40px rgba(0,0,0,.25);
 z-index:99999;
}

.ua-sb-flyout-head{
 padding:12px;
 font-weight:800;
 border-bottom:1px solid rgba(255,255,255,.3);
}

.ua-sb-flyout-body{
 padding:10px;
 display:grid;
 gap:8px;
}

.ua-sb-flylink{
 display:flex;
 gap:10px;
 padding:9px 12px;
 background:rgba(255,255,255,.6);
 border-radius:12px;
 color:#222;
 text-decoration:none;
}

.ua-sb-flylink:hover{
 background:rgba(255,255,255,.8);
 transform:translateY(-1px);
}


/* ===== Armoury polish (global) ===== */
.ua-brand-title{ color: var(--ua-text); }
.ua-brand-sub{ color: var(--ua-text-soft); }

/* Topbar animated accent + scan shimmer */
.ua-topbar::before{
  content:"";
  position:absolute;
  left: 14px;
  right: 14px;
  top: 10px;
  height: 2px;
  border-radius: 999px;
  background: linear-gradient(90deg, transparent, rgba(245,176,0,.95), transparent);
  opacity: .75;
  filter: drop-shadow(0 0 10px rgba(245,176,0,.35));
}
.ua-topbar::after{
  content:"";
  position:absolute;
  top: 0;
  bottom: 0;
  left: -40%;
  width: 40%;
  background: linear-gradient(90deg, transparent, rgba(245,176,0,.14), transparent);
  transform: skewX(-18deg);
  animation: uaShimmer 4.5s linear infinite;
  opacity: .65;
  pointer-events:none;
}
@keyframes uaShimmer{
  0%{ left:-45%; }
  100%{ left:105%; }
}

/* Status pills */
.ua-status{
  display:flex;
  align-items:center;
  gap:10px;
  margin-inline-end: 10px;
}
.ua-pill-status{
  display:inline-flex;
  align-items:center;
  gap:8px;
  padding: 8px 10px;
  border-radius: 999px;
  font-weight: 900;
  font-size: 12px;
  background: rgba(255,255,255,.06);
  border: 1px solid var(--ua-border);
  color: var(--ua-text);
  box-shadow: 0 10px 24px rgba(0,0,0,.18);
}
.ua-pill-status .dot{
  width: 8px; height: 8px;
  border-radius: 999px;
  display:inline-block;
  box-shadow: 0 0 0 4px rgba(255,255,255,.04);
}
.ua-pill-status.ok .dot{ background: var(--ua-ok); }
.ua-pill-status.warn .dot{ background: var(--ua-warn); }
.ua-pill-status.bad .dot{ background: var(--ua-bad); }
.ua-pill-status.neutral .dot{ background: var(--ua-accent); }

/* Tables + forms on dark */
.table{
  color: var(--ua-text) !important;
  border-color: var(--ua-border) !important;
}
.table thead th{
  color: var(--ua-text) !important;
  background: rgba(255,255,255,.06) !important;
  border-bottom-color: var(--ua-border-strong) !important;
}
.table td, .table th{
  background: transparent !important;
  border-top-color: var(--ua-border) !important;
}
.table-striped>tbody>tr:nth-of-type(odd)>*{
  background: rgba(255,255,255,.03) !important;
}
.form-control, .form-select{
  background: rgba(255,255,255,.06) !important;
  border: 1px solid rgba(255,255,255,.10) !important;
  color: var(--ua-text) !important;
  border-radius: 14px !important;
}
.form-control::placeholder{ color: rgba(234,240,255,.55) !important; }
.form-control:focus, .form-select:focus{
  box-shadow: 0 0 0 .2rem rgba(245,176,0,.18) !important;
  border-color: rgba(245,176,0,.45) !important;
}

/* Buttons - subtle glow */
.btn-success{ box-shadow: 0 10px 22px rgba(34,197,94,.10); }
.btn-warning{ box-shadow: 0 10px 22px rgba(245,158,11,.10); }
.btn-danger{  box-shadow: 0 10px 22px rgba(239,68,68,.10); }

/* Footer pills on dark */
.ua-foot-pill{
  background: rgba(255,255,255,.06) !important;
  border-color: rgba(255,255,255,.10) !important;
  color: var(--ua-text) !important;
}
.ua-foot-brand{
  background: linear-gradient(135deg, rgba(245,176,0,.26), rgba(255,204,51,.14), rgba(122,167,255,.10)) !important;
  border-color: rgba(245,176,0,.22) !important;
}

/* Kill any leftover light overlays */
.ua-footer::before, .ua-footer::after{ display:none !important; }
/* =========================================================
   FINAL LAYOUT FIX (4px) - Sidebar gap + Content full width
   ========================================================= */

/* 1) Gap variable */
:root{
  --ua-sb-gap: 4px;
}

/* 2) Sidebar position follows gap */
.ua-sidebar{
  right: var(--ua-sb-gap) !important;
  left: auto !important;
}

/* 3) Reserve sidebar space for page + topbar + footer */
body.ua-authed .ua-page{
  padding-right: calc(var(--ua-sidebar-w) + var(--ua-sb-gap)) !important;
  padding-left: 14px !important;
}
body.ua-authed .ua-topbar{
  margin-right: calc(var(--ua-sidebar-w) + var(--ua-sb-gap)) !important;
  margin-left: 14px !important;
}
body.ua-authed .ua-footer{
  margin-right: calc(var(--ua-sidebar-w) + var(--ua-sb-gap)) !important;
  margin-left: 14px !important;
}

/* 4) Mini mode */
body.ua-authed.ua-sidebar-mini .ua-topbar{
  margin-right: calc(var(--ua-sidebar-mini) + var(--ua-sb-gap)) !important;
}
body.ua-authed.ua-sidebar-mini .ua-footer{
  margin-right: calc(var(--ua-sidebar-mini) + var(--ua-sb-gap)) !important;
}

/* 5) IMPORTANT: kill Bootstrap/container max-width that creates the big empty space */
.ua-page .container,
.ua-page .container-fluid,
.ua-page .container-lg,
.ua-page .container-md,
.ua-page .container-sm,
.ua-page .container-xl,
.ua-page .container-xxl{
  max-width: 100% !important;
  width: 100% !important;
}

/* Some pages wrap content inside row/col that may constrain width */
.ua-page .row{
  margin-left: 0 !important;
  margin-right: 0 !important;
}
.ua-page [class*="col-"]{
  padding-left: 0 !important;
  padding-right: 0 !important;
}

/* Make the main workspace stretch */
.ua-page .content-wrapper{
  width: 100% !important;
  max-width: 100% !important;
}

/* 6) Mobile reset */
@media (max-width: 992px){
  body.ua-authed .ua-page{
    padding-right: 14px !important;
  }
  body.ua-authed .ua-topbar,
  body.ua-authed .ua-footer{
    margin-right: 14px !important;
    margin-left: 14px !important;
  }
  .ua-sidebar{
    right: 10px !important;
  }
}

/* إزالة الإطارات البيضوية من الشريط السفلي بالكامل */
.ua-footer .ua-foot-pill{
  background: transparent !important;
  border: none !important;
  box-shadow: none !important;
  padding: 0 !important;
}
 /* مسافات بين إحصائيات الشريط السفلي */
.ua-footer-right{
  display: flex;
  align-items: center;
  gap: 35px; /* المسافة بين كل عنصر */
  flex-wrap: wrap;
}



/* === Global theme bridge: borders / inputs / buttons === */
:root{
  --app-border-color: var(--ua-border-strong);
  --app-border-hover: var(--ua-accent);
  --app-border-size: 1px;
  --app-border-radius: 14px;
  --app-border-style: solid;
  --app-font-family: system-ui, -apple-system, Segoe UI, Tahoma, Arial, sans-serif;
  --app-font-size: 16px;
  --app-font-weight: 700;
  --app-text-color: #111827;
  --app-surface-color: rgba(255,255,255,.92);
  --app-input-bg: rgba(255,255,255,.96);
}

body,
input,
select,
textarea,
button,
.btn,
.form-control{
  font-family: var(--app-font-family);
  font-size: var(--app-font-size);
}

input,
select,
textarea,
button,
.btn,
.form-control,
.input-group-text,
.custom-select,
.card,
.card-header,
.card-footer,
.table,
.table th,
.table td,
.content-wrapper,
.ua-topbar,
.ua-mega,
.ua-search,
.ua-toplink,
.ua-pill,
.ua-menu,
.ua-item,
.ua-sidebar,
.ua-sb-link,
.ua-sb-sec-btn,
.ua-sb-sub,
.ua-sb-sublink,
.ua-sb-btn,
.ua-footer,
.page-link,
.dropdown-menu,
.dropdown-item,
.modal-content,
.list-group-item,
.nav-link,
.pagination .page-item .page-link{
  border-color: var(--app-border-color) !important;
}

input,
select,
textarea,
.form-control{
  border-width: var(--app-border-size) !important;
  border-style: var(--app-border-style) !important;
  border-radius: var(--app-border-radius) !important;
  background: var(--app-input-bg) !important;
  color: var(--app-text-color) !important;
}
input::placeholder,
textarea::placeholder{
  color: color-mix(in srgb, var(--app-text-color) 45%, transparent) !important;
  opacity: 1;
}
input:focus,
select:focus,
textarea:focus,
.form-control:focus{
  border-color: var(--app-border-hover) !important;
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--app-border-color) 20%, transparent) !important;
  outline: none !important;
}

button,
.btn,
a.btn,
input[type="button"],
input[type="submit"],
input[type="reset"]{
  border-width: var(--app-border-size) !important;
  border-style: var(--app-border-style) !important;
  border-color: var(--app-border-color) !important;
  border-radius: var(--app-border-radius) !important;
}

.table,
.table th,
.table td{
  border-width: var(--app-border-size) !important;
  border-style: var(--app-border-style) !important;
}
