/* TPS Online - Theme layout: navbar, sidebar dinamis, konten, footer, page loader */

.tps-theme .app,
.tps-theme .main-panel {
  background: var(--tps-bg);
}

/* ================= NAVBAR ================= */
.tps-theme .main-panel > .header,
.tps-theme.layout-fixed-header .main-panel > .header,
.tps-theme .layout-fixed-header .main-panel > .header {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  width: auto;
  height: var(--tps-header-h);
  margin: 0;
  padding: 0 16px 0 12px;
  z-index: 1060;
  display: flex;
  align-items: center;
  gap: 8px;
  background: var(--tps-primary);
  border: 0;
  border-radius: 0;
  box-shadow: 0 1px 0 rgba(6, 42, 62, .08);
}
.tps-theme .main-panel > .header::before {
  display: none;
}
.tps-theme .main-panel > .header .tps-brand {
  display: flex;
  align-items: center;
  gap: 14px;
  flex: 0 0 auto;
  min-width: 0;
  padding-left: 4px;
}
.tps-theme .main-panel > .header .tps-brand img {
  height: 30px;
  width: auto;
  display: block;
}
.tps-theme .main-panel > .header .tps-brand .tps-sep {
  width: 1px;
  height: 26px;
  background: rgba(255, 255, 255, .6);
}
.tps-theme .main-panel > .header .tps-brand .tps-app {
  font-weight: 800;
  font-size: 17px;
  letter-spacing: .04em;
  color: var(--tps-on-primary);
  white-space: nowrap;
}
.tps-theme .main-panel > .header .tps-burger {
  width: 42px;
  height: 42px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: var(--tps-radius-sm);
  color: var(--tps-on-primary);
  flex: 0 0 auto;
  text-decoration: none;
}
.tps-theme .main-panel > .header .tps-burger:hover,
.tps-theme .main-panel > .header .tps-burger:focus {
  background: rgba(255, 255, 255, .28);
  color: var(--tps-on-primary);
  outline: 0;
}
.tps-theme .main-panel > .header .tps-burger.tps-burger-mobile {
  display: none;
}
.tps-theme .main-panel > .header > .navbar-nav.tps-actions {
  margin: 0 0 0 auto;
  float: none;
  display: flex;
  align-items: center;
  gap: 4px;
}
.tps-theme .main-panel > .header > .navbar-nav.tps-actions > li {
  float: none;
  position: relative;
}
.tps-theme .main-panel > .header .nav > li > a.tps-act {
  height: 42px;
  max-height: none;
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 0 12px;
  border-radius: var(--tps-radius-sm);
  color: var(--tps-on-primary);
  font-size: 13.5px;
  font-weight: 700;
  background: transparent;
  white-space: nowrap;
}
.tps-theme .main-panel > .header .nav > li > a.tps-act:hover,
.tps-theme .main-panel > .header .nav > li > a.tps-act:focus,
.tps-theme .main-panel > .header .nav .open > a.tps-act,
.tps-theme .main-panel > .header .nav .open > a.tps-act:hover,
.tps-theme .main-panel > .header .nav .open > a.tps-act:focus {
  background: rgba(255, 255, 255, .28);
  color: var(--tps-on-primary);
}
.tps-theme .main-panel > .header .tps-act svg {
  flex: 0 0 auto;
}
.tps-theme .tps-count {
  display: inline-block;
  min-width: 22px;
  padding: 1px 8px;
  border-radius: 999px;
  font-size: 12px;
  font-weight: 800;
  line-height: 18px;
  text-align: center;
}
.tps-theme .tps-count:empty {
  display: none;
}
.tps-theme .tps-count-yellow {
  background: var(--tps-yellow);
  color: var(--tps-navy);
}
.tps-theme .tps-count-dark {
  background: var(--tps-navy);
  color: #FFFFFF;
}
.tps-theme .main-panel > .header .tps-divider {
  width: 1px;
  height: 30px;
  background: rgba(255, 255, 255, .45);
  margin: 0 6px;
}
.tps-theme .tps-avatar {
  width: 32px;
  height: 32px;
  border-radius: 999px;
  background: #FFFFFF;
  color: var(--tps-primary-strong);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-weight: 800;
  font-size: 13px;
  flex: 0 0 auto;
}
.tps-theme .tps-user-name {
  max-width: 260px;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* Dropdown di navbar */
.tps-theme .main-panel > .header .navbar-nav .dropdown-menu {
  top: calc(100% + 8px);
  margin-top: 0;
  right: 0;
  left: auto;
  padding: 0;
  overflow: hidden;
}
.tps-theme .main-panel > .header .navbar-nav .dropdown-menu.tps-dd {
  width: 380px;
  min-width: 380px;
}
.tps-theme .tps-dd-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 14px 18px;
  border-bottom: 1px solid #E8F0F4;
}
.tps-theme .tps-dd-head b {
  font-size: 15px;
  font-weight: 800;
  color: var(--tps-text);
}
.tps-theme .tps-dd-head span {
  font-size: 12.5px;
  color: var(--tps-muted);
}
.tps-theme .tps-dd .tps-dd-body {
  max-height: 420px;
  overflow-y: auto;
  padding: 0;
}
.tps-theme .tps-dd .tps-dd-body .notifications-list {
  list-style: none;
  margin: 0;
  padding: 0;
}
.tps-theme .tps-dd .tps-dd-body:empty::before {
  display: block;
  padding: 28px 20px;
  text-align: center;
  font-size: 13.5px;
  font-weight: 600;
  color: var(--tps-subtle);
}
.tps-theme #brgBtdData:empty::before {
  content: "Tidak ada barang BTD";
}
.tps-theme #notification-data:empty::before {
  content: "Tidak ada data gagal kirim";
}
/* tampilan kosong yang lengkap (header.php: li.tps-dd-empty setelah body) */
.tps-theme .tps-dd .tps-dd-body:empty:has(+ .tps-dd-empty)::before {
  display: none;
}
.tps-theme .tps-dd .tps-dd-empty {
  display: none;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  padding: 28px 24px 26px;
  text-align: center;
}
.tps-theme .tps-dd .tps-dd-body:empty + .tps-dd-empty {
  display: flex;
}
.tps-theme .tps-dd .tps-dd-empty-ico {
  width: 64px;
  height: 64px;
  margin-bottom: 8px;
  border-radius: 999px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--tps-success-bg);
  color: var(--tps-success);
}
.tps-theme .tps-dd .tps-dd-empty-ico.is-btd {
  background: #FDFBD2;
  color: #6B6500;
}
.tps-theme .tps-dd .tps-dd-empty b {
  font-size: 15px;
  font-weight: 800;
  color: var(--tps-text);
}
.tps-theme .tps-dd .tps-dd-empty span:not(.tps-dd-empty-ico) {
  font-size: 13px;
  color: var(--tps-muted);
  line-height: 1.5;
}
.tps-theme .tps-notif-item {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 11px 18px;
  border-bottom: 1px solid var(--tps-line);
  color: var(--tps-text);
  text-decoration: none;
}
.tps-theme .tps-dd .notifications-list li a.tps-notif-item,
.tps-theme .tps-dd .notifications-list li.tps-notif-item {
  display: flex;
  height: auto;
  padding: 11px 18px;
  line-height: 1.35;
  font-size: 13.5px;
  table-layout: auto;
}
.tps-theme .tps-dd .notifications-list li {
  border-bottom: 0;
}
.tps-theme a.tps-notif-item:hover,
.tps-theme a.tps-notif-item:focus {
  background: var(--tps-primary-softer);
  color: var(--tps-text);
  text-decoration: none;
}
.tps-theme .tps-notif-ico {
  width: 34px;
  height: 34px;
  border-radius: 10px;
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-weight: 800;
}
.tps-theme .tps-notif-ico.is-btd {
  background: #FDFBD2;
  color: #6B6500;
}
.tps-theme .tps-notif-ico.is-gagal {
  background: #FDE8E6;
  color: var(--tps-danger);
}
.tps-theme .tps-notif-text {
  flex: 1 1 auto;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 1px;
  line-height: 1.35;
}
.tps-theme .tps-notif-text b {
  font-size: 14px;
  font-weight: 700;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.tps-theme .tps-notif-text small {
  font-size: 12px;
  color: var(--tps-muted);
}
.tps-theme .tps-days {
  flex: 0 0 auto;
  font-size: 12px;
  font-weight: 800;
  padding: 3px 10px;
  border-radius: 999px;
  background: var(--tps-yellow);
  color: var(--tps-yellow-ink);
}
.tps-theme .tps-days.is-over {
  background: #FDE8E6;
  color: #A3201A;
}
.tps-theme .tps-dd .tps-dd-foot > a {
  display: block;
  padding: 12px;
  text-align: center;
  font-size: 13.5px;
  font-weight: 700;
  color: var(--tps-primary-strong);
  background: var(--tps-surface-2);
  border-top: 1px solid #E8F0F4;
  border-radius: 0;
}
.tps-theme .tps-dd .tps-dd-foot > a:hover {
  background: var(--tps-primary-softer);
}
.tps-theme .tps-dd-user {
  min-width: 240px;
}
.tps-theme .tps-dd-user .tps-dd-head {
  flex-direction: column;
  align-items: flex-start;
  gap: 2px;
}
.tps-theme .tps-dd-user .tps-dd-links {
  list-style: none;
  margin: 0;
  padding: 6px;
}
.tps-theme .tps-dd-user .tps-dd-links a {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 9px 12px;
  border-radius: 8px;
  color: var(--tps-text-2);
  font-weight: 600;
}
.tps-theme .tps-dd-user .tps-dd-links a:hover {
  background: var(--tps-danger-bg);
  color: var(--tps-danger-ink);
  text-decoration: none;
}

/* ================= SIDEBAR ================= */
.tps-theme .sidebar-panel {
  top: var(--tps-header-h);
  height: calc(100% - var(--tps-header-h));
  background: var(--tps-surface);
  border-right: 1px solid var(--tps-border);
  box-shadow: none;
  z-index: 1050;
}
.tps-theme .sidebar-panel > .brand {
  display: none;
}
.tps-theme .tps-customer {
  display: flex;
  align-items: center;
  gap: 12px;
  margin: 16px 14px 6px;
  padding: 12px;
  border: 1px solid var(--tps-border);
  border-radius: 12px;
  background: var(--tps-surface-2);
}
.tps-theme .tps-customer img {
  width: 40px;
  height: auto;
  flex: 0 0 auto;
}
.tps-theme .tps-customer span {
  display: flex;
  flex-direction: column;
  line-height: 1.3;
  min-width: 0;
}
.tps-theme .tps-customer b {
  font-size: 12.5px;
  font-weight: 700;
  color: var(--tps-text);
}
.tps-theme .tps-customer small {
  font-size: 11.5px;
  color: var(--tps-subtle);
}
.tps-theme .sidebar-panel > nav {
  padding: 4px 14px 24px;
}
.tps-theme .sidebar-panel > nav > ul {
  width: auto;
}
.tps-theme .sidebar-panel > nav > ul > li.nav-section {
  padding: 18px 12px 6px;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .12em;
  color: #6A8291;
  cursor: default;
}
.tps-theme .sidebar-panel > nav > ul > li:first-child.nav-section {
  padding-top: 8px;
}
.tps-theme .sidebar-panel > nav a {
  color: var(--tps-text-2);
}
.tps-theme .sidebar-panel > nav a:hover,
.tps-theme .sidebar-panel > nav a:focus,
.tps-theme .sidebar-panel > nav a:active {
  color: var(--tps-primary-ink) !important;
}
.tps-theme .sidebar-panel > nav > ul > li > a {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 10px 12px;
  margin: 1px 0;
  border-radius: var(--tps-radius);
  font-size: 13.5px;
  font-weight: 500;
  line-height: 1.3;
  background: transparent;
}
.tps-theme .sidebar-panel > nav > ul > li > a:hover {
  background: var(--tps-primary-softer);
}
.tps-theme .sidebar-panel > nav > ul > li > a > .nav-ico {
  width: 20px;
  flex: 0 0 20px;
  text-align: center;
  font-size: 15px;
  color: var(--tps-muted);
  padding: 0;
}
.tps-theme .sidebar-panel > nav > ul > li > a > .nav-label {
  flex: 1 1 auto;
  min-width: 0;
}
.tps-theme .sidebar-panel > nav > ul > li.has-sub > a::after {
  content: "";
  width: 8px;
  height: 8px;
  flex: 0 0 8px;
  margin-right: 4px;
  border-right: 2px solid var(--tps-faint);
  border-bottom: 2px solid var(--tps-faint);
  transform: rotate(45deg) translateY(-2px);
  transition: transform 150ms;
}
.tps-theme .sidebar-panel > nav > ul > li.has-sub.open > a::after {
  transform: rotate(-135deg) translateY(-2px);
}
.tps-theme .sidebar-panel > nav li > a[target="_BLANK" i]::after {
  content: "";
  width: 12px;
  height: 12px;
  flex: 0 0 12px;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%238AA0AE' stroke-width='2.4' stroke-linecap='round'%3E%3Cpath d='M14 4h6v6M20 4l-9 9M18 14v6H4V6h6'/%3E%3C/svg%3E") no-repeat center / 12px 12px;
}
/* item aktif & induk yang terbuka */
.tps-theme .sidebar-panel > nav > ul > li.open > a,
.tps-theme .sidebar-panel > nav > ul > li.open > a:focus,
.tps-theme .sidebar-panel > nav > ul > li.open > a:hover {
  background: #F4FAFD;
  color: var(--tps-primary-ink);
  font-weight: 600;
}
.tps-theme .sidebar-panel > nav > ul > li.open > a > .nav-ico,
.tps-theme .sidebar-panel > nav > ul > li.active > a > .nav-ico {
  color: var(--tps-primary-strong);
}
.tps-theme .sidebar-panel > nav li.active > a,
.tps-theme .sidebar-panel > nav li.active > a:hover,
.tps-theme .sidebar-panel > nav li.active > a:focus {
  background: var(--tps-primary-soft);
  color: var(--tps-primary-ink);
  font-weight: 700;
}
/* submenu */
.tps-theme .sidebar-panel > nav > ul > li > ul,
.tps-theme .sidebar-panel > nav > ul > li.open > a + ul {
  background: transparent;
}
.tps-theme .sidebar-panel > nav > ul > li > .sub-menu {
  margin: 0 0 0 22px;
  padding-left: 12px;
  border-left: 2px solid var(--tps-border);
}
.tps-theme .sidebar-panel > nav > ul > li.open > .sub-menu {
  margin-top: 2px;
  margin-bottom: 6px;
}
.tps-theme .sidebar-panel > nav li ul li a {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px 10px;
  margin: 1px 0;
  border-radius: 8px;
  font-size: 13px;
  font-weight: 500;
  line-height: 1.3;
  color: #3D5666;
}
/* app.min.js menambah class menu-accordion + titik ::before; ganti dengan gaya tema */
.tps-theme .sidebar-panel > nav > ul > li.menu-accordion > a::before {
  display: none;
}
.tps-theme .sidebar-panel > nav li ul li a::before,
.tps-theme .sidebar-panel > nav li ul li.menu-accordion > a::before,
.tps-theme .sidebar-panel > nav li ul li.open.menu-accordion > a::before {
  content: "";
  display: block;
  position: static;
  float: none;
  margin: 0;
  width: 6px;
  height: 6px;
  flex: 0 0 6px;
  border-radius: 999px;
  background: #C2D3DC;
  box-shadow: none;
}
.tps-theme .sidebar-panel > nav li ul li.active > a::before {
  background: var(--tps-primary);
}
.tps-theme .sidebar-panel > nav li ul li a:hover {
  background: var(--tps-primary-softer);
}
.tps-theme .sidebar-panel > nav li ul li.has-sub > a::after {
  content: "";
  margin-left: auto;
  width: 7px;
  height: 7px;
  flex: 0 0 7px;
  border-right: 2px solid var(--tps-faint);
  border-bottom: 2px solid var(--tps-faint);
  transform: rotate(45deg) translateY(-2px);
}
.tps-theme .sidebar-panel > nav li ul li.has-sub.open > a::after {
  transform: rotate(-135deg) translateY(-2px);
}
.tps-theme .sidebar-panel > nav > ul > li > .sub-menu .sub-menu {
  padding-left: 14px;
}
.tps-theme .sidebar-panel > nav li ul li ul li a::before {
  width: 8px;
  height: 2px;
  border-radius: 1px;
}

/* ================= KONTEN ================= */
.tps-theme .main-panel > .main-content,
.tps-theme .layout-fixed-header .main-content,
.tps-theme.layout-fixed-header .main-content {
  padding: calc(var(--tps-header-h) + 20px) 24px 24px;
}
/* Baris breadcrumb: tinggi sama di semua halaman (termasuk dashboard) */
.tps-theme .main-panel .page-title {
  background: transparent;
  border: 0;
  padding: 0;
  margin: 0 0 14px;
  min-height: 34px;
  display: flex;
  align-items: center;
}
.tps-theme .main-panel .page-title .sub-title .card-header {
  padding: 0;
  border: 0;
  background: transparent;
}
.tps-theme .main-panel .page-title .card-header::before {
  display: none;
}
.tps-theme .main-panel::after {
  height: 3.5rem;
}

/* ================= FOOTER ================= */
.tps-theme footer.content-footer {
  left: 0;
  padding: 0 24px;
  border-top: 1px solid var(--tps-border);
  background: var(--tps-surface);
}
.tps-theme footer.content-footer .nav > li > a {
  color: var(--tps-subtle);
  font-size: 12px;
  font-weight: 600;
  padding-top: 12px;
  padding-bottom: 12px;
  background: transparent;
}

/* ================= PAGE LOADER ================= */
.tps-theme .pageload {
  background: rgba(255, 255, 255, .96);
}
.tps-theme .tps-loader {
  position: relative;
  width: 88px;
  height: 88px;
  margin: 0 auto;
  display: flex;
  align-items: center;
  justify-content: center;
}
.tps-theme .tps-loader .tps-loader-ring {
  position: absolute;
  inset: 0;
  border-radius: 999px;
  border: 4px solid var(--tps-primary-soft);
  border-top-color: var(--tps-primary);
  border-right-color: var(--tps-yellow);
  animation: tps-spin 1s linear infinite;
}
.tps-theme .tps-loader img {
  width: 46px;
  height: auto;
  animation: tps-bob 1.2s ease-in-out infinite;
}
.tps-theme .tps-loader.is-sm {
  width: 56px;
  height: 56px;
}
.tps-theme .tps-loader.is-sm img {
  width: 30px;
}
.tps-theme .tps-loader.is-sm .tps-loader-ring {
  border-width: 3px;
}
.tps-theme .tps-loader-text {
  margin-top: 14px;
  text-align: center;
  font-size: 14px;
  font-weight: 700;
  color: var(--tps-primary-strong);
}
@keyframes tps-spin {
  to { transform: rotate(360deg); }
}
@keyframes tps-bob {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-7px); }
}
@media (prefers-reduced-motion: reduce) {
  .tps-theme .tps-loader .tps-loader-ring,
  .tps-theme .tps-loader img {
    animation-duration: 3s;
  }
}

/* ================= DESKTOP (> 48em / 768px) =================
 * app.min.css memperlakukan 768px sebagai mobile (max-width:48em, sidebar offscreen),
 * jadi tema juga: desktop mulai dari 769px. */
@media screen and (min-width: 48.01em) {
  .tps-theme .sidebar-panel,
  .tps-theme .sidebar-panel > nav > ul {
    width: var(--tps-sidebar-w);
  }
  .tps-theme .sidebar-panel > nav > ul {
    width: auto;
  }
  .tps-theme .main-panel {
    margin-left: var(--tps-sidebar-w);
  }
  .tps-theme footer.content-footer {
    padding-left: calc(var(--tps-sidebar-w) + 24px);
  }

  /* ---- Mode ringkas (layout-small-menu, dikendalikan app.min.js) ---- */
  .tps-theme .layout-small-menu .sidebar-panel,
  .tps-theme.layout-small-menu .sidebar-panel {
    width: var(--tps-sidebar-mini);
  }
  .tps-theme .layout-small-menu .main-panel {
    margin-left: var(--tps-sidebar-mini);
  }
  .tps-theme .layout-small-menu ~ footer.content-footer,
  .tps-theme .layout-small-menu footer.content-footer {
    padding-left: calc(var(--tps-sidebar-mini) + 24px);
  }
  .tps-theme .layout-small-menu .tps-customer {
    margin: 14px 0 8px;
    padding: 0;
    border: 0;
    background: transparent;
    justify-content: center;
  }
  .tps-theme .layout-small-menu .tps-customer img {
    width: 38px;
  }
  .tps-theme .layout-small-menu .tps-customer span {
    display: none;
  }
  .tps-theme .layout-small-menu .sidebar-panel > nav {
    padding: 0 14px 24px;
  }
  .tps-theme .layout-small-menu .sidebar-panel > nav > ul {
    width: auto;
  }
  .tps-theme .layout-small-menu .sidebar-panel > nav > ul > li.nav-section {
    height: 1px;
    padding: 0;
    margin: 10px 6px;
    background: var(--tps-border);
    font-size: 0;
  }
  .tps-theme .layout-small-menu .sidebar-panel > nav > ul > li > a {
    justify-content: center;
    width: 44px;
    height: 44px;
    padding: 0;
    margin: 2px auto;
  }
  .tps-theme .layout-small-menu .sidebar-panel > nav > ul > li > a > .nav-label,
  .tps-theme .layout-small-menu .sidebar-panel > nav > ul > li.has-sub > a::after,
  .tps-theme .layout-small-menu .sidebar-panel > nav > ul > li > a[target="_BLANK" i]::after {
    display: none;
  }
  .tps-theme .layout-small-menu .sidebar-panel > nav > ul > li > a > .nav-ico {
    display: block;
    width: 20px;
    font-size: 17px;
  }
  /* flyout submenu saat hover */
  .tps-theme .layout-small-menu .sidebar-panel > nav > ul > li > .sub-menu,
  .tps-theme .layout-small-menu .sidebar-panel > nav > ul > li.open > .sub-menu {
    left: calc(100% - 6px);
    min-width: 240px;
    margin: 0;
    padding: 0;
    border: 0;
    border-radius: 12px;
    background: var(--tps-surface);
    box-shadow: none;
    z-index: 1070;
  }
  .tps-theme .layout-small-menu .sidebar-panel > nav > ul > li:hover > .sub-menu {
    max-height: 70vh;
    overflow-y: auto;
    padding: 6px;
    border: 1px solid #DCE7ED;
    box-shadow: var(--tps-shadow);
  }
  .tps-theme .layout-small-menu .sidebar-panel > nav > ul > li > .sub-menu a {
    padding-left: 10px;
    white-space: nowrap;
  }
}

/* ================= MOBILE (<= 48em / 768px) ================= */
@media (max-width: 48em) {
  /* margin sidebar dari app.min.css (min-width:48em) ikut aktif tepat di 768px */
  .tps-theme .main-panel {
    margin-left: 0;
  }
  .tps-theme .main-panel > .header .tps-burger.tps-burger-desktop {
    display: none;
  }
  .tps-theme .main-panel > .header .tps-burger.tps-burger-mobile {
    display: flex;
  }
  .tps-theme .main-panel > .header .tps-brand .tps-sep,
  .tps-theme .main-panel > .header .tps-brand .tps-app,
  .tps-theme .main-panel > .header .tps-act .tps-act-label,
  .tps-theme .main-panel > .header .tps-divider,
  .tps-theme .main-panel > .header .tps-user-name,
  .tps-theme .main-panel > .header .tps-caret {
    display: none;
  }
  .tps-theme .main-panel > .header .tps-brand img {
    height: 24px;
  }
  .tps-theme .main-panel > .header .nav > li > a.tps-act {
    padding: 0 8px;
  }
  .tps-theme .main-panel > .header .navbar-nav .dropdown-menu.tps-dd {
    position: fixed;
    top: calc(var(--tps-header-h) + 6px);
    left: 12px;
    right: 12px;
    width: auto;
    min-width: 0;
  }
  .tps-theme .sidebar-panel {
    width: var(--tps-sidebar-w);
  }
  /* overlay offscreen (z-index 9999 dari app.min.css) tidak boleh menutupi sidebar */
  .tps-theme .app.offscreen .sidebar-panel {
    z-index: 10000;
    box-shadow: var(--tps-shadow);
  }
  .tps-theme .main-panel > .header .navbar-nav .dropdown-menu.tps-dd-user {
    position: fixed;
    top: calc(var(--tps-header-h) + 6px);
    right: 12px;
    left: auto;
    width: auto;
  }
  /* bootstrap mobile membuat dropdown transparan tanpa border: kembalikan gaya kartu */
  .tps-theme .main-panel > .header .navbar-nav .open .dropdown-menu.tps-dd,
  .tps-theme .main-panel > .header .navbar-nav .open .dropdown-menu.tps-dd-user {
    background-color: var(--tps-surface);
    border: 1px solid #DCE7ED;
    border-radius: 12px;
    box-shadow: var(--tps-shadow);
  }
  .tps-theme .main-panel > .main-content {
    padding: calc(var(--tps-header-h) + 14px) 12px 16px;
  }
  .tps-theme footer.content-footer {
    padding-left: 12px;
  }
}