/* ============================================================
   TuniBill — Modern Sidebar (sidebar-only override)
   Dark navy theme. Scoped to #sidebar.tb-modern so header,
   content, tables, modals are untouched.
   Geometry (235px / fixed / collapse) is preserved from
   seipkon.css — only visuals change.
   ============================================================ */

#sidebar.tb-modern {
  background: linear-gradient(180deg, #0c1d3a 0%, #10294f 48%, #0d2140 100%) !important;
  border-right: 1px solid rgba(255,255,255,.08) !important;
  box-shadow: 8px 0 28px rgba(9, 22, 45, .35) !important;
  padding-top: 10px !important; /* breathing room so the emblem can never touch the viewport edge */
  padding-bottom: 2px !important;
  width: 248px !important;
  display: flex !important;
  flex-direction: column !important;
  overflow: hidden !important;
  z-index: 1001 !important; /* sit above header so the single logo owns the corner */
}

/* safety: header logo removed from blade — hide any leftover/cached copy */
.main-header .seipkon-logo { display: none !important; }

/* kill old light-theme overrides for sidebar only */
#sidebar.tb-modern::before { content: none !important; }

/* thin accent line on the right edge */
.seipkon-main-sidebar.tb-modern-wrap #sidebar.tb-modern::after {
  content: "";
  position: absolute;
  top: 70px; bottom: 0; right: 0;
  width: 1px;
  background: linear-gradient(180deg, rgba(56,189,248,.45), rgba(56,189,248,0));
  pointer-events: none;
}

/* kill legacy glyphicons collapse arrows inside sidebar */
#sidebar.tb-modern a[aria-expanded="true"]::before,
#sidebar.tb-modern a[aria-expanded="false"]::before {
  content: none !important;
  display: none !important;
}

.tb-side-inner {
  display: flex;
  flex-direction: column;
  height: 100%;
  min-height: 0;
  padding: 0 10px 10px;
}

/* ---------- Brand — login logo lockup on a light card (dark artwork) ---------- */
.tb-brand {
  position: relative !important;
  display: flex !important;
  align-items: center;
  justify-content: center;
  background: linear-gradient(180deg, #ffffff 0%, #eef3f8 100%) !important;
  border: 1px solid rgba(255,255,255,.85) !important;
  border-radius: 16px !important;
  box-shadow: 0 10px 24px rgba(3, 10, 26, .40) !important;
  padding: 10px 12px !important;
  margin: 2px 2px 12px !important;
  text-decoration: none !important;
  overflow: hidden !important;
  transition: transform .16s ease, box-shadow .16s ease !important;
}
.tb-brand:hover {
  transform: translateY(-1px);
  box-shadow: 0 14px 30px rgba(3, 10, 26, .50) !important;
}
.tb-brand .tb-login-logo {
  position: relative;
  z-index: 2;
  height: 42px !important;
  width: auto !important;
  max-width: 100% !important;
  display: block !important;
}

/* ---------- Profile card — glass + glow ---------- */
.tb-profile {
  position: relative;
  display: flex !important;
  align-items: center;
  gap: 12px;
  padding: 14px 12px !important;
  margin: 0 4px 12px !important;
  border-radius: 14px !important;
  background: linear-gradient(135deg, rgba(255,255,255,.13), rgba(255,255,255,.045) 60%) !important;
  border: 1px solid rgba(255,255,255,.14) !important;
  box-shadow: 0 10px 24px rgba(3, 10, 26, .35), inset 0 1px 0 rgba(255,255,255,.14) !important;
  backdrop-filter: blur(8px);
  overflow: hidden;
  text-decoration: none !important;
  cursor: pointer;
  transition: transform .16s ease, border-color .16s ease, box-shadow .16s ease !important;
}
.tb-profile:hover {
  transform: translateY(-1px);
  border-color: rgba(56,189,248,.45) !important;
  box-shadow: 0 14px 30px rgba(3, 10, 26, .45), 0 0 0 3px rgba(56,189,248,.14) !important;
}
/* ambient animated aurora */
.tb-profile-glow {
  position: absolute;
  inset: 0;
  pointer-events: none;
  overflow: hidden;
  border-radius: inherit;
  background: linear-gradient(115deg, transparent 30%, rgba(255,255,255,.10) 47%, rgba(255,255,255,.02) 53%, transparent 70%);
  background-size: 250% 100%;
  animation: tb-sheen 9s ease-in-out infinite;
}
.tb-profile-glow::before,
.tb-profile-glow::after {
  content: "";
  position: absolute;
  top: 50%;
  aspect-ratio: 1 / 1;
  height: auto;
  border-radius: 50%;
  filter: blur(20px);
  will-change: transform;
}
/* halo behind the avatar — scales with the card, not fixed px */
.tb-profile-glow::before {
  width: 46%;
  left: -14%;
  background: radial-gradient(circle at 35% 35%, rgba(56,189,248,.55), rgba(56,189,248,0) 70%);
  animation: tb-aurora-a 7s ease-in-out infinite alternate;
}
/* wash behind the name — scales with the card, not fixed px */
.tb-profile-glow::after {
  width: 58%;
  right: -20%;
  background: radial-gradient(circle at 60% 60%, rgba(197,155,63,.50), rgba(197,155,63,0) 70%);
  animation: tb-aurora-b 8.5s ease-in-out infinite alternate;
}
@keyframes tb-aurora-a {
  from { transform: translateY(-50%) translate(0, 0) scale(1); }
  to { transform: translateY(-50%) translate(12%, 10%) scale(1.12); }
}
@keyframes tb-aurora-b {
  from { transform: translateY(-50%) translate(0, 0) scale(1.08); }
  to { transform: translateY(-50%) translate(-10%, -12%) scale(.94); }
}
@keyframes tb-sheen {
  0%, 100% { background-position: 120% 0; }
  50% { background-position: -20% 0; }
}
.tb-avatar {
  position: relative;
  width: 52px; height: 52px;
  flex: 0 0 52px;
  border-radius: 50%;
  padding: 2px;
  background: conic-gradient(from 210deg, #C59B3F, #38bdf8, #818cf8, #C59B3F);
  box-shadow: 0 0 14px rgba(56,189,248,.45);
  overflow: visible;
  isolation: isolate;
}
/* fallback icon shown only if the photo fails to load (img removes itself) */
.tb-avatar-fallback {
  position: absolute;
  inset: 2px;
  display: flex !important;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  background: #16294a !important;
  color: #8ea6c4 !important;
  font-size: 22px;
  z-index: 0;
}
.tb-avatar img {
  position: relative;
  z-index: 1;
  width: 100%; height: 100%;
  border-radius: 50% !important;
  object-fit: cover;
  display: block;
  border: 2px solid #0e2242 !important;
  background: #0e2242;
}
.tb-status {
  position: absolute;
  z-index: 2;
  right: 0; bottom: 1px;
  width: 12px; height: 12px;
  border-radius: 50%;
  background: #22c55e;
  border: 2px solid #0e2242;
  box-shadow: 0 0 0 0 rgba(34,197,94,.6);
  animation: tb-ping 2.2s ease-out infinite;
}
@keyframes tb-ping {
  0% { box-shadow: 0 0 0 0 rgba(34,197,94,.55); }
  70% { box-shadow: 0 0 0 7px rgba(34,197,94,0); }
  100% { box-shadow: 0 0 0 0 rgba(34,197,94,0); }
}
.tb-profile-info {
  min-width: 0;
  flex: 1 1 auto;
  position: relative;
  display: flex !important;
  flex-direction: column;
  align-items: flex-start;
  gap: 3px;
}
.tb-profile-info .tb-name {
  display: -webkit-box !important;
  width: 100%;
  max-width: 100%;
  color: #fff !important;
  font-size: 14.5px !important;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  overflow-wrap: anywhere;
  font-weight: 700 !important;
  line-height: 1.3 !important;
  margin: 0 !important;
  padding: 0 !important;
  letter-spacing: .1px;
}
.tb-online {
  display: inline-flex !important;
  align-items: center;
  gap: 6px;
  margin: 0 !important;
  font-size: 10.5px !important;
  font-weight: 600 !important;
  line-height: 1.5 !important;
  letter-spacing: .3px;
  color: #a7f3d0 !important;
  background: rgba(34,197,94,.14) !important;
  border: 1px solid rgba(34,197,94,.30) !important;
  padding: 1px 8px 1px 7px !important;
  border-radius: 999px !important;
  white-space: nowrap;
}
.tb-online-dot { display: none !important; } /* retired: use .tb-presence-dot (topbar owns .tb-online-dot) */
.tb-presence-dot {
  flex: 0 0 auto;
  width: 6px; height: 6px;
  border-radius: 50%;
  background: #22c55e;
  box-shadow: 0 0 6px rgba(34,197,94,.9);
}
.tb-profile-go {
  position: static !important;
  align-self: center;
  flex: 0 0 auto;
  display: inline-flex !important;
  align-items: center;
  justify-content: center;
  width: 24px; height: 24px;
  border-radius: 8px !important;
  color: #7d96b8 !important;
  font-size: 12px !important;
  text-decoration: none !important;
  transition: background .16s ease, color .16s ease !important;
}
/* stretched-link: whole card clickable, valid HTML */
.tb-profile-go::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
}
.tb-profile:hover .tb-profile-go { background: rgba(255,255,255,.10) !important; color: #fff !important; }

@media (prefers-reduced-motion: reduce) {
  .tb-status { animation: none !important; }
  .tb-profile-glow,
  .tb-profile-glow::before,
  .tb-profile-glow::after { animation: none !important; }
}

/* ---------- Scroll area ---------- */
.tb-menu-scroll {
  flex: 1 1 auto;
  min-height: 0;
  overflow-y: auto;
  overflow-x: hidden;
  padding: 2px 2px 8px;
  margin-right: -4px;
  padding-right: 6px;
}
.tb-menu-scroll::-webkit-scrollbar { width: 6px; }
.tb-menu-scroll::-webkit-scrollbar-track { background: transparent; }
.tb-menu-scroll::-webkit-scrollbar-thumb {
  background: rgba(255,255,255,.16);
  border-radius: 4px;
}
.tb-menu-scroll::-webkit-scrollbar-thumb:hover { background: rgba(255,255,255,.28); }

/* ---------- Section labels ---------- */
#sidebar.tb-modern .tb-section-label {
  color: #7d96b8 !important;
  font-size: 10.5px !important;
  font-weight: 800 !important;
  letter-spacing: 1.4px !important;
  text-transform: uppercase !important;
  padding: 16px 12px 8px !important;
  margin: 0 !important;
  display: flex;
  align-items: center;
  gap: 8px;
}
#sidebar.tb-modern .tb-section-label::after {
  content: "";
  flex: 1;
  height: 1px;
  background: rgba(255,255,255,.09);
}
#sidebar.tb-modern .tb-section-label:first-child { padding-top: 6px !important; }

/* ---------- Nav items ---------- */
#sidebar.tb-modern ul.tb-nav {
  margin: 0 !important;
  padding: 0 !important;
  list-style: none !important;
}
#sidebar.tb-modern ul.tb-nav > li.tb-item {
  margin: 1px 0 !important;
  padding: 0 !important;
  list-style: none !important;
}
#sidebar.tb-modern .tb-link {
  display: flex !important;
  align-items: center !important;
  gap: 11px !important;
  padding: 10px 12px !important;
  margin: 1px 0 !important;
  border-radius: 10px !important;
  border: 1px solid transparent !important;
  border-left: 3px solid transparent !important;
  color: #c3d2e6 !important;
  font-size: 13.5px !important;
  font-weight: 500 !important;
  line-height: 1.35 !important;
  text-decoration: none !important;
  transition: background .16s ease, color .16s ease, border-color .16s ease, transform .16s ease !important;
  position: relative;
}
#sidebar.tb-modern .tb-link:hover {
  background: rgba(255,255,255,.08) !important;
  color: #fff !important;
  border-left-color: transparent !important;
}
#sidebar.tb-modern .tb-link:hover .tb-ico { background: rgba(56,189,248,.22) !important; }
#sidebar.tb-modern .tb-link:hover .tb-ico i { color: #fff !important; }

/* icon badge */
#sidebar.tb-modern .tb-ico {
  flex: 0 0 32px;
  width: 32px; height: 32px;
  display: inline-flex !important;
  align-items: center;
  justify-content: center;
  border-radius: 9px !important;
  background: rgba(255,255,255,.08) !important;
  border: 1px solid rgba(255,255,255,.07) !important;
  transition: background .16s ease !important;
}
#sidebar.tb-modern .tb-ico i {
  color: #9db4d0 !important;
  font-size: 14px !important;
  margin: 0 !important;
  padding: 0 !important;
  width: auto !important;
}
#sidebar.tb-modern .tb-label { flex: 1 1 auto; min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; line-height: 1.4 !important; }

/* active pill */
#sidebar.tb-modern li.tb-item.tb-active > .tb-link,
#sidebar.tb-modern li.tb-active > .tb-link {
  background: linear-gradient(135deg, #2f80ed 0%, #1f9bf0 60%, #22b8e6 100%) !important;
  color: #fff !important;
  border-color: rgba(255,255,255,.16) !important;
  box-shadow: 0 6px 16px rgba(47,128,237,.42) !important;
  font-weight: 600 !important;
}
#sidebar.tb-modern li.tb-active > .tb-link .tb-ico {
  background: rgba(255,255,255,.20) !important;
  border-color: rgba(255,255,255,.25) !important;
}
#sidebar.tb-modern li.tb-active > .tb-link .tb-ico i { color: #fff !important; }

/* caret for submenu */
#sidebar.tb-modern .tb-caret {
  margin-left: auto;
  color: #7d96b8 !important;
  font-size: 11px !important;
  transition: transform .2s ease !important;
}
#sidebar.tb-modern .tb-link[aria-expanded="true"] .tb-caret { transform: rotate(180deg); color: #fff !important; }
#sidebar.tb-modern li.tb-active > .tb-link .tb-caret { color: #fff !important; }

/* ---------- Submenu ---------- */
#sidebar.tb-modern ul.tb-sub {
  margin: 2px 0 4px !important;
  padding: 4px 0 4px 0 !important;
  list-style: none !important;
  position: relative;
}
#sidebar.tb-modern ul.tb-sub::before {
  content: "";
  position: absolute;
  left: 27px; top: 8px; bottom: 8px;
  width: 1px;
  background: rgba(255,255,255,.12);
}
#sidebar.tb-modern ul.tb-sub > li { margin: 1px 0 !important; padding: 0 !important; }
#sidebar.tb-modern ul.tb-sub a.tb-sub-link {
  display: flex !important;
  align-items: center !important;
  gap: 9px !important;
  margin: 1px 0 1px 14px !important;
  padding: 7px 12px 7px 26px !important;
  border-radius: 8px !important;
  color: #a9bfd8 !important;
  font-size: 13px !important;
  text-decoration: none !important;
  border: 1px solid transparent !important;
  transition: background .15s ease, color .15s ease !important;
  position: relative;
}
#sidebar.tb-modern ul.tb-sub a.tb-sub-link::before {
  content: "";
  position: absolute;
  left: 12px; top: 50%;
  width: 6px; height: 6px;
  border-radius: 50%;
  transform: translateY(-50%);
  background: rgba(255,255,255,.28);
}
#sidebar.tb-modern ul.tb-sub a.tb-sub-link i { font-size: 12.5px !important; color: #8ea6c4 !important; margin: 0 !important; }
#sidebar.tb-modern ul.tb-sub a.tb-sub-link:hover {
  background: rgba(255,255,255,.08) !important;
  color: #fff !important;
}
#sidebar.tb-modern ul.tb-sub a.tb-sub-link:hover::before { background: #38bdf8; }
#sidebar.tb-modern ul.tb-sub a.tb-sub-link:hover i { color: #fff !important; }
#sidebar.tb-modern ul.tb-sub li.tb-active > a.tb-sub-link {
  background: rgba(56,189,248,.16) !important;
  border-color: rgba(56,189,248,.30) !important;
  color: #fff !important;
  font-weight: 600 !important;
}
#sidebar.tb-modern ul.tb-sub li.tb-active > a.tb-sub-link::before { background: #38bdf8; box-shadow: 0 0 0 3px rgba(56,189,248,.22); }
#sidebar.tb-modern ul.tb-sub li.tb-active > a.tb-sub-link i { color: #fff !important; }

/* Bootstrap3 collapse animation inside dark sidebar */
#sidebar.tb-modern .collapse { display: none; }
#sidebar.tb-modern .collapse.in { display: block; }
#sidebar.tb-modern .collapsing {
  position: relative;
  height: 0;
  overflow: hidden;
  transition: height .25s ease;
}

/* ---------- Sign out ---------- */
.tb-signout {
  display: flex !important;
  align-items: center;
  gap: 11px !important;
  padding: 9px 12px !important;
  margin: 4px 4px 8px !important;
  border-radius: 10px !important;
  border: 1px solid rgba(248,113,113,.28) !important;
  background: rgba(239,68,68,.12) !important;
  color: #fca5a5 !important;
  font-size: 13.5px !important;
  font-weight: 600 !important;
  text-decoration: none !important;
  transition: background .16s ease, color .16s ease, border-color .16s ease !important;
}
.tb-signout .tb-ico {
  flex: 0 0 32px;
  width: 32px; height: 32px;
  display: inline-flex !important;
  align-items: center;
  justify-content: center;
  border-radius: 9px !important;
  background: rgba(239,68,68,.16) !important;
  border: 1px solid rgba(248,113,113,.22) !important;
}
.tb-signout .tb-ico i { color: #fca5a5 !important; font-size: 14px !important; margin: 0 !important; }
.tb-signout .tb-label { flex: 1 1 auto; }
.tb-signout:hover {
  background: linear-gradient(135deg, #ef4444, #dc2626) !important;
  border-color: rgba(255,255,255,.20) !important;
  color: #fff !important;
  box-shadow: 0 6px 16px rgba(239,68,68,.40) !important;
}
.tb-signout:hover .tb-ico { background: rgba(255,255,255,.20) !important; border-color: rgba(255,255,255,.25) !important; }
.tb-signout:hover .tb-ico i { color: #fff !important; }

/* ---------- Footer ---------- */
.tb-side-foot {
  border-top: 1px solid rgba(255,255,255,.09);
  margin-top: 4px;
  padding: 8px 6px 4px;
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.tb-side-foot span {
  color: #6e88a8 !important;
  font-size: 11px !important;
  letter-spacing: .4px;
}
.tb-dot {
  width: 8px; height: 8px; border-radius: 50%;
  background: #22c55e;
  box-shadow: 0 0 8px rgba(34,197,94,.8);
  display: inline-block;
  margin-right: 6px;
  vertical-align: 1px;
}

/* ---------- Keep collapse behaviour identical ---------- */
#sidebar.tb-modern.active { margin-left: -248px !important; }

/* ---------- Responsive: same breakpoints, slide-over ---------- */
@media only screen and (max-width: 991px) {
  #sidebar.tb-modern { width: 262px !important; }
}
@media only screen and (max-width: 768px) {
  #sidebar.tb-modern {
    margin-left: -262px !important;
    padding-top: 0 !important;
    box-shadow: 12px 0 40px rgba(9,22,45,.5) !important;
  }
  #sidebar.tb-modern.active { margin-left: 0 !important; }
}
@media only screen and (min-width: 992px) and (max-width: 1200px) {
  #sidebar.tb-modern { margin-left: 0 !important; }
  #sidebar.tb-modern.active { margin-left: -248px !important; }
}

/* ---------- AJAX page-enter: same recipe as the login card ----------
   (fade + rise + settle; scoped to content only — sidebar never moves) */
#content .page-content.tb-swap-in {
  animation: tb-card-in 0.45s cubic-bezier(0.16, 1, 0.3, 1) both;
  transform-origin: center top;
}
@keyframes tb-card-in {
  from { opacity: 0; transform: translateY(20px) scale(0.97); }
  to { opacity: 1; transform: translateY(0) scale(1); }
}
@media (prefers-reduced-motion: reduce) {
  #content .page-content.tb-swap-in { animation: none !important; }
}

/* ---------- AJAX navigation progress (3px theme bar, content top) ---------- */#tb-ajax-bar {
  position: absolute;
  top: 0; left: 0;
  height: 3px; width: 0;
  opacity: 0;
  z-index: 1200;
  border-radius: 0 3px 3px 0;
  background: linear-gradient(90deg, #2f80ed, #22b8e6) !important;
  box-shadow: 0 0 10px rgba(47,128,237,.55);
  pointer-events: none;
}
#tb-ajax-bar.tb-go { opacity: 1; width: 85%; transition: width 8s ease, opacity .2s ease; }
#tb-ajax-bar.tb-done { width: 100%; opacity: 0; transition: width .25s ease, opacity .45s ease .1s; }
@media (prefers-reduced-motion: reduce) {
  #tb-ajax-bar.tb-go, #tb-ajax-bar.tb-done { transition: none !important; }
}

/* perfectScrollbar rails on dark bg */
#sidebar.tb-modern .ps-scrollbar-y-rail { background: transparent !important; }
#sidebar.tb-modern .ps-scrollbar-y { background: rgba(255,255,255,.22) !important; }