/* Teradix portal — shared app shell (persistent left sidebar).
   Included by every authenticated page. Sidebar is fixed; page content is pushed
   over via body padding. Flips to the right in RTL. */
:root{
  --tx-sb-w: 250px;
  --tx-sb-wc: 68px;
  --tx-ease: cubic-bezier(0.22, 1, 0.36, 1);
  --tx-sb-bg1:#0A1B6B; --tx-sb-bg2:#0F2DC0;
  --tx-sb-ink:#EAefff; --tx-sb-mut:#A9B6E8; --tx-sb-line:rgba(255,255,255,.12);
  --tx-accent:#8FFF99;
}
@font-face { font-family:"Duplet Open"; font-weight:700; src:url("fonts/Duplet Open/DupletOpen-Bold.otf") format("opentype"); }
@font-face { font-family:"Helvetica Neue Arabic"; font-weight:700; src:url("fonts/Helvatica Neue/helvetica-neue-lt-arabic-75-bold.ttf") format("truetype"); }

body.tx-has-shell{ padding-left: var(--tx-sb-w); }
html[dir="rtl"] body.tx-has-shell{ padding-left:0; padding-right: var(--tx-sb-w); }

/* collapsed rail */
body.tx-has-shell.tx-sb-collapsed{ padding-left: var(--tx-sb-wc); }
html[dir="rtl"] body.tx-has-shell.tx-sb-collapsed{ padding-left:0; padding-right: var(--tx-sb-wc); }
/* animate only after first paint (set by app-shell.js) so load is instant */
body.tx-anim-ready.tx-has-shell{ transition: padding .26s var(--tx-ease); }
body.tx-anim-ready .tx-sb{ transition: width .26s var(--tx-ease); }

.tx-sb{ position:fixed; top:0; bottom:0; left:0; width:var(--tx-sb-w); z-index:90;
  background:linear-gradient(180deg,var(--tx-sb-bg1),var(--tx-sb-bg2)); color:var(--tx-sb-ink);
  display:flex; flex-direction:column; font-family:"Duplet Open","Helvetica Neue Arabic",system-ui,sans-serif;
  box-shadow:2px 0 24px rgba(8,16,60,.18)}
html[dir="rtl"] .tx-sb{ left:auto; right:0; box-shadow:-2px 0 24px rgba(8,16,60,.18) }

.tx-sb__brand{ display:flex; align-items:center; gap:10px; padding:14px 16px; border-bottom:1px solid var(--tx-sb-line); }
.tx-sb__brand img{ height:22px; filter:brightness(0) invert(1) }

.tx-sb__nav{ flex:1; overflow-y:auto; padding:6px 12px 12px; }
.tx-sb__grp{ font-size:10px; font-weight:700; letter-spacing:.08em; text-transform:uppercase; color:var(--tx-sb-mut);
  padding:14px 10px 6px; }
.tx-nav{ display:flex; align-items:center; gap:11px; padding:9px 11px; border-radius:10px; cursor:pointer;
  color:var(--tx-sb-ink); text-decoration:none; font-size:13.5px; font-weight:600; transition:background .14s,color .14s;
  position:relative; margin-bottom:2px; }
.tx-nav svg{ width:18px; height:18px; flex:none; opacity:.9 }
.tx-nav:hover{ background:rgba(255,255,255,.08) }
.tx-nav--active{ background:rgba(255,255,255,.15); font-weight:800 }
.tx-nav--active::before{ content:""; position:absolute; left:0; top:8px; bottom:8px; width:3px; border-radius:0 3px 3px 0; background:var(--tx-accent) }
html[dir="rtl"] .tx-nav--active::before{ left:auto; right:0; border-radius:3px 0 0 3px }

.tx-sb__foot{ border-top:1px solid var(--tx-sb-line); padding:12px; }
.tx-sb__user{ display:flex; align-items:center; gap:10px; padding:8px 10px 10px; }
.tx-sb__avatar{ width:32px; height:32px; border-radius:50%; background:rgba(255,255,255,.16); display:grid; place-items:center;
  font-weight:800; font-size:13px; flex:none }
.tx-sb__user .nm{ font-size:13px; font-weight:700; line-height:1.2 }
.tx-sb__user .rl{ font-size:10.5px; color:var(--tx-sb-mut); font-weight:600; text-transform:capitalize }
.tx-sb__foot .row{ display:flex; gap:8px }
.tx-sb__btn{ flex:1; display:flex; align-items:center; justify-content:center; gap:7px; font-family:inherit;
  font-size:12px; font-weight:700; color:var(--tx-sb-ink); background:rgba(255,255,255,.10); border:0; border-radius:9px;
  padding:9px 10px; cursor:pointer; transition:background .14s; text-decoration:none }
.tx-sb__btn:hover{ background:rgba(255,255,255,.18) }
.tx-sb__btn svg{ width:14px; height:14px }

/* ---- collapse toggle (clean header icon button) ---- */
.tx-sb__toggle{ margin-left:auto; flex:none; width:32px; height:32px; border-radius:9px; background:transparent;
  color:var(--tx-sb-mut); border:0; display:flex; align-items:center; justify-content:center; cursor:pointer; padding:0;
  transition:background .15s, color .15s }
html[dir="rtl"] .tx-sb__toggle{ margin-left:0; margin-right:auto }
.tx-sb__toggle:hover{ background:rgba(255,255,255,.14); color:#fff }
.tx-sb__toggle:focus-visible{ outline:2px solid var(--tx-accent); outline-offset:2px }
.tx-sb__toggle svg{ width:18px; height:18px; transition:transform .26s var(--tx-ease) }
body.tx-sb-collapsed .tx-sb__toggle svg{ transform:rotate(180deg) }
html[dir="rtl"] .tx-sb__toggle svg{ transform:rotate(180deg) }
html[dir="rtl"] body.tx-sb-collapsed .tx-sb__toggle svg{ transform:rotate(0deg) }

/* hover tooltip for the collapsed rail (JS-positioned, fixed so it escapes the rail overflow) */
.tx-tip{ position:fixed; transform:translateY(-50%); background:#0A1B6B; color:#fff; padding:7px 11px; border-radius:9px;
  font-family:"Duplet Open","Helvetica Neue Arabic",system-ui,sans-serif; font-size:12.5px; font-weight:600; white-space:nowrap;
  box-shadow:0 10px 26px rgba(8,16,60,.38); opacity:0; pointer-events:none; transition:opacity .12s var(--tx-ease); z-index:130 }
.tx-tip.show{ opacity:1 }

/* ---- collapsed (icon-only rail) ---- */
.tx-sb{ overflow-x:hidden }
body.tx-sb-collapsed .tx-sb{ width: var(--tx-sb-wc) }
body.tx-sb-collapsed .tx-nav span,
body.tx-sb-collapsed .tx-sb__brand .txt,
body.tx-sb-collapsed .tx-sb__user .meta,
body.tx-sb-collapsed .tx-sb__btn span{ display:none }
body.tx-sb-collapsed .tx-nav{ justify-content:center; padding:10px 0 }
body.tx-sb-collapsed .tx-sb__brand{ justify-content:center; padding:14px 0 }
body.tx-sb-collapsed .tx-sb__brand img{ display:none }
body.tx-sb-collapsed .tx-sb__toggle{ margin:0 auto }
body.tx-sb-collapsed .tx-sb__nav{ padding:6px 9px 12px }
body.tx-sb-collapsed .tx-sb__grp{ font-size:0; padding:0; height:1px; margin:12px 14px; background:var(--tx-sb-line) }
body.tx-sb-collapsed .tx-sb__foot{ padding:10px 9px }
body.tx-sb-collapsed .tx-sb__user{ justify-content:center; padding:6px 0 10px }
body.tx-sb-collapsed .tx-sb__foot .row{ flex-direction:column; gap:7px }
body.tx-sb-collapsed .tx-sb__btn{ padding:10px 0 }
@media (prefers-reduced-motion: reduce){
  .tx-anim-ready .tx-sb, .tx-anim-ready.tx-has-shell, .tx-sb__toggle svg, .tx-tip{ transition:none !important }
}

/* mobile */
.tx-burger{ display:none; position:fixed; top:12px; left:12px; z-index:95; width:40px; height:40px; border-radius:10px;
  background:var(--tx-sb-bg1); color:#fff; border:0; cursor:pointer; align-items:center; justify-content:center }
html[dir="rtl"] .tx-burger{ left:auto; right:12px }
.tx-burger svg{ width:20px; height:20px }
.tx-scrim{ display:none; position:fixed; inset:0; background:rgba(10,16,40,.5); z-index:89 }
@media print{
  body.tx-has-shell{ padding-left:0 !important; padding-right:0 !important }
  .tx-sb, .tx-burger, .tx-scrim{ display:none !important }
}
@media (max-width:900px){
  body.tx-has-shell, body.tx-has-shell.tx-sb-collapsed{ padding-left:0; padding-right:0; overflow-x:hidden; }
  /* keep the page header clear of the floating burger */
  html[dir="ltr"] body.tx-has-shell .topbar{ padding-left:64px; }
  html[dir="rtl"] body.tx-has-shell .topbar{ padding-right:64px; }
  .tx-sb{ transform:translateX(-100%); transition:transform .24s var(--tx-ease) }
  html[dir="rtl"] .tx-sb{ transform:translateX(100%) }
  body.tx-sb-open .tx-sb{ transform:translateX(0); box-shadow:0 0 48px rgba(8,16,60,.45) }
  body.tx-sb-open .tx-scrim{ display:block }
  .tx-burger{ display:flex }
  .tx-sb__toggle{ display:none }
}