/* BM168 layout tune — balanced full dashboard */

/* Shell: full viewport, original proportion */
.shell {
  min-height: 100vh !important;
  height: auto !important;
  grid-template-columns: 240px 1fr !important;
  gap: 10px !important;
  padding: 10px !important;
  width: 100% !important;
  max-width: 100% !important;
  box-sizing: border-box !important;
}
.side {
  height: calc(100vh - 20px) !important;
  position: sticky !important;
  top: 10px !important;
  width: auto !important;
  min-width: 0 !important;
  padding: 14px 12px !important;
}
nav {
  gap: 6px !important;
  margin-top: 14px !important;
}
nav button {
  padding: 10px 12px !important;
  font-size: 13px !important;
  gap: 10px !important;
}
nav button:first-letter {
  font-size: 18px !important;
}
nav button.active {
  color: #4bcaff !important;
  border-color: #0786ff !important;
  background: linear-gradient(90deg, #0786ff33, #0b192a) !important;
  box-shadow: 0 0 14px #0786ff44 !important;
}

.content {
  min-width: 0 !important;
  display: grid !important;
  gap: 10px !important;
  align-content: start !important;
}
.top {
  min-height: 64px !important;
  padding: 12px 16px !important;
}
.top h1 {
  font-size: 26px !important;
}
.actions > * {
  height: 38px !important;
  padding: 0 12px !important;
  font-size: 13px !important;
}

#dbBanner {
  margin: 0 !important;
  padding: 8px 12px !important;
  font-size: 12px !important;
}

/* KPI — 4 equal, compact, full width of content */
.kpis {
  display: grid !important;
  grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
  gap: 10px !important;
}
.kpi {
  padding: 12px 14px !important;
  min-height: 0 !important;
  display: flex !important;
  align-items: center !important;
  gap: 12px !important;
}
.kpi i {
  width: 42px !important;
  height: 42px !important;
  flex: 0 0 42px !important;
}
.kpi strong {
  font-size: 28px !important;
  margin: 2px 0 !important;
  letter-spacing: -1px !important;
}
.kpi em {
  font-size: 10px !important;
  letter-spacing: .04em !important;
}
.kpi small {
  font-size: 11px !important;
}

/* Mid chart + quality */
.mid {
  display: grid !important;
  grid-template-columns: 1fr !important;
  gap: 10px !important;
}
.chart-card,
.quality {
  height: 260px !important;
  padding: 12px 14px !important;
}
.chart {
  height: 190px !important;
  margin-top: 8px !important;
}
.chart svg {
  height: 165px !important;
}
.gauge {
  width: 160px !important;
  height: 160px !important;
  margin: 8px auto 0 !important;
}
.gauge:before {
  width: 124px !important;
  height: 124px !important;
}
.gauge strong {
  font-size: 30px !important;
}

/* Bottom */
.bottom {
  display: grid !important;
  grid-template-columns: 1.5fr 0.7fr 0.85fr !important;
  gap: 10px !important;
  min-height: 240px !important;
}
.table-card,
.events,
.status {
  padding: 12px 14px !important;
  min-height: 240px !important;
}
.scroll {
  overflow: auto !important;
  margin-top: 10px !important;
  max-height: 180px !important;
}
.table-card table {
  width: 100% !important;
  min-width: 0 !important;
  white-space: normal !important;
}
.table-card th,
.table-card td {
  padding: 8px 6px !important;
  font-size: 11px !important;
  white-space: nowrap !important;
}
.events {
  overflow: auto !important;
}
.status .shield {
  margin: 10px auto !important;
}

/* Subpages */
.wrap {
  max-width: 1280px !important;
  width: 100% !important;
  margin: 0 auto !important;
  padding: 0 8px !important;
}
body {
  padding: 10px !important;
}
.card {
  margin-bottom: 10px !important;
  padding: 14px !important;
}
.stats {
  gap: 8px !important;
}
.stat .num {
  font-size: 22px !important;
}
.empty {
  padding: 24px 12px !important;
}
.modal {
  width: min(700px, 96vw) !important;
  max-height: 90vh !important;
}

/* Mobile */
@media (max-width: 1000px) {
  .shell {
    grid-template-columns: 1fr !important;
    height: auto !important;
  }
  .side {
    height: auto !important;
    position: relative !important;
    top: 0 !important;
  }
  nav {
    display: flex !important;
    flex-wrap: wrap !important;
    gap: 6px !important;
  }
  nav button {
    flex: 1 1 calc(50% - 6px) !important;
  }
  .kpis {
    grid-template-columns: 1fr 1fr !important;
  }
  .mid,
  .bottom {
    grid-template-columns: 1fr !important;
  }
  .chart-card,
  .quality,
  .table-card,
  .events,
  .status {
    height: auto !important;
    min-height: 180px !important;
  }
}
@media (max-width: 480px) {
  .kpis {
    grid-template-columns: 1fr !important;
  }
  nav button {
    flex: 1 1 100% !important;
  }
}

/* ===== HAMBURGER MOBILE MENU ===== */
.menu-toggle {
  display: none;
  position: fixed;
  top: 12px;
  left: 12px;
  z-index: 10001;
  width: 44px;
  height: 44px;
  border-radius: 10px;
  border: 1px solid #1d74bb;
  background: rgba(5, 14, 28, 0.92);
  backdrop-filter: blur(10px);
  color: #4bcaff;
  font-size: 22px;
  cursor: pointer;
  box-shadow: 0 0 16px #0786ff44;
  align-items: center;
  justify-content: center;
  line-height: 1;
  padding: 0;
}
.menu-overlay {
  display: none;
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,0.55);
  z-index: 9998;
}
body.menu-open .menu-overlay {
  display: block;
}

@media (max-width: 900px) {
  .menu-toggle {
    display: flex !important;
  }
  .shell {
    grid-template-columns: 1fr !important;
    padding: 8px !important;
    gap: 8px !important;
  }
  .side {
    position: fixed !important;
    top: 0 !important;
    left: 0 !important;
    bottom: 0 !important;
    width: min(280px, 82vw) !important;
    height: 100vh !important;
    max-height: 100vh !important;
    z-index: 9999 !important;
    transform: translateX(-105%) !important;
    transition: transform 0.25s ease !important;
    border-radius: 0 16px 16px 0 !important;
    overflow-y: auto !important;
    padding: 56px 12px 20px !important;
    box-shadow: 8px 0 30px #000a !important;
  }
  body.menu-open .side {
    transform: translateX(0) !important;
  }
  .side nav {
    display: grid !important;
    gap: 6px !important;
  }
  .side nav button {
    flex: none !important;
    width: 100% !important;
  }
  .content {
    width: 100% !important;
    padding-top: 52px !important;
  }
  .top {
    flex-wrap: wrap !important;
    gap: 8px !important;
  }
  .top h1 {
    font-size: 20px !important;
  }
  .actions {
    flex-wrap: wrap !important;
    width: 100% !important;
  }
  .actions > * {
    flex: 1 1 auto !important;
    min-width: 0 !important;
  }
}
/* Mobile top bar + hamburger fix */
.mobile-bar {
  display: none;
}
.menu-toggle {
  display: none;
}
.menu-overlay {
  display: none;
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.55);
  z-index: 10040;
  pointer-events: auto;
}

@media (max-width: 900px) {
  .mobile-bar {
    display: flex !important;
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    height: 52px;
    z-index: 10050;
    align-items: center;
    gap: 10px;
    padding: 0 10px;
    background: rgba(3, 10, 19, 0.96);
    border-bottom: 1px solid #1d74bb;
    backdrop-filter: blur(12px);
  }
  .mobile-logo {
    height: 32px;
    width: auto;
    filter: drop-shadow(0 0 8px #0786ff);
  }
  .mobile-title {
    font-weight: 800;
    font-size: 16px;
    color: #eef8ff;
    letter-spacing: 0.04em;
    text-shadow: 0 0 10px #148cff;
  }
  .menu-toggle {
    display: flex !important;
    position: relative !important;
    top: auto !important;
    left: auto !important;
    width: 40px;
    height: 40px;
    border-radius: 10px;
    border: 1px solid #1d74bb;
    background: rgba(5, 14, 28, 0.95);
    color: #4bcaff;
    font-size: 20px;
    cursor: pointer;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    z-index: 10051;
    pointer-events: auto !important;
  }

  .shell {
    grid-template-columns: 1fr !important;
    padding: 8px !important;
    gap: 8px !important;
    padding-top: 60px !important;
  }

  /* Sidebar drawer ABOVE overlay */
  .side {
    position: fixed !important;
    top: 0 !important;
    left: 0 !important;
    bottom: 0 !important;
    width: min(280px, 85vw) !important;
    height: 100vh !important;
    max-height: 100vh !important;
    z-index: 10060 !important;
    transform: translateX(-105%) !important;
    transition: transform 0.25s ease !important;
    border-radius: 0 16px 16px 0 !important;
    overflow-y: auto !important;
    overflow-x: hidden !important;
    padding: 16px 12px 24px !important;
    box-shadow: 8px 0 30px #000a !important;
    pointer-events: auto !important;
  }
  body.menu-open .side {
    transform: translateX(0) !important;
  }
  body.menu-open .menu-overlay {
    display: block !important;
  }

  /* Ensure clicks work on nav */
  .side,
  .side nav,
  .side nav button {
    pointer-events: auto !important;
    position: relative;
    z-index: 2;
  }
  .side:after,
  .side .frame:after,
  .panel:after {
    pointer-events: none !important;
  }
  .side nav {
    display: grid !important;
    gap: 6px !important;
    margin-top: 12px !important;
  }
  .side nav button {
    width: 100% !important;
    flex: none !important;
    cursor: pointer !important;
  }
  .side > img {
    max-width: 160px;
    margin: 0 auto 8px;
    display: block;
  }

  .content {
    width: 100% !important;
    padding-top: 0 !important;
  }
}

@media (min-width: 901px) {
  .mobile-bar,
  .menu-toggle,
  .menu-overlay {
    display: none !important;
  }
  body.menu-open .side {
    transform: none !important;
  }
}

.side *, .side nav button { pointer-events: auto !important; }
.side:after, .frame:after, .panel:after { pointer-events: none !important; }

/* Dedicated mobile drawer - highest priority */
.mobile-bar { display: none; }
.mobile-drawer { display: none; }
.menu-overlay { display: none; }

@media (max-width: 900px) {
  .mobile-bar {
    display: flex !important;
    position: fixed;
    top: 0; left: 0; right: 0;
    height: 52px;
    z-index: 20000;
    align-items: center;
    gap: 10px;
    padding: 0 12px;
    background: #030a13;
    border-bottom: 1px solid #1d74bb;
  }
  .mobile-bar .menu-toggle {
    display: flex !important;
    width: 40px; height: 40px;
    border-radius: 10px;
    border: 1px solid #1d74bb;
    background: #0b192a;
    color: #4bcaff;
    font-size: 20px;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    position: relative !important;
    top: auto !important;
    left: auto !important;
    z-index: 20001;
  }
  .mobile-logo { height: 30px; width: auto; }
  .mobile-title { font-weight: 800; color: #eef8ff; font-size: 15px; }

  .menu-overlay {
    position: fixed;
    inset: 0;
    background: rgba(0,0,0,0.55);
    z-index: 20010;
  }
  body.menu-open .menu-overlay { display: block !important; }

  .mobile-drawer {
    display: block !important;
    position: fixed;
    top: 0; left: 0; bottom: 0;
    width: min(300px, 88vw);
    z-index: 20020;
    background: linear-gradient(180deg, #0b192a, #02080f);
    border-right: 1px solid #1d74bb;
    box-shadow: 8px 0 28px #000c;
    transform: translateX(-105%);
    transition: transform .22s ease;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    padding: 12px;
  }
  body.menu-open .mobile-drawer {
    transform: translateX(0);
  }
  .drawer-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 12px;
    padding-bottom: 10px;
    border-bottom: 1px solid #1d74bb66;
  }
  .drawer-head img { height: 36px; }
  .drawer-close {
    width: 36px; height: 36px;
    border-radius: 8px;
    border: 1px solid #1d74bb;
    background: #0b192a;
    color: #4bcaff;
    font-size: 18px;
    cursor: pointer;
  }
  .drawer-nav {
    display: grid !important;
    gap: 6px !important;
  }
  .drawer-nav button {
    width: 100% !important;
    text-align: left !important;
    padding: 12px 14px !important;
    border: 1px solid #176fc0 !important;
    border-radius: 10px !important;
    background: linear-gradient(#08182a,#030912) !important;
    color: #edf7ff !important;
    font-weight: 700 !important;
    cursor: pointer !important;
    pointer-events: auto !important;
    position: relative !important;
    z-index: 5 !important;
  }
  .drawer-nav button.active {
    border-color: #0786ff !important;
    box-shadow: 0 0 14px #0786ff55 !important;
    color: #4bcaff !important;
  }

  /* Hide desktop sidebar on mobile to avoid double menus */
  .shell > .side {
    display: none !important;
  }
  .shell {
    grid-template-columns: 1fr !important;
    padding-top: 60px !important;
  }
}
@media (min-width: 901px) {
  .mobile-bar, .mobile-drawer, .menu-overlay { display: none !important; }
}

@media (max-width: 900px) {
  .mobile-title { display: none !important; }
  .mobile-logo {
    height: 42px !important;
    width: auto !important;
    filter: drop-shadow(0 0 12px #0786ff) !important;
  }
  .mobile-bar { height: 56px !important; gap: 12px !important; }
  .drawer-head img {
    height: 52px !important;
    filter: drop-shadow(0 0 12px #0786ff);
  }
}

@media (max-width: 900px) {
  .mobile-logo {
    height: 48px !important;
    max-height: 52px !important;
  }
  .drawer-head {
    padding: 8px 4px 14px !important;
    margin-bottom: 14px !important;
  }
  .drawer-head img {
    height: 72px !important;
    max-width: 210px !important;
    width: auto !important;
    object-fit: contain !important;
    filter: drop-shadow(0 0 14px #0786ff) !important;
  }
}

/* Force large BM168 logos on mobile */
@media (max-width: 900px) {
  .mobile-bar {
    height: 64px !important;
    padding: 0 10px !important;
  }
  .mobile-bar .menu-toggle {
    width: 44px !important;
    height: 44px !important;
  }
  .mobile-bar .mobile-logo,
  .mobile-bar img {
    height: 56px !important;
    max-height: 56px !important;
    width: auto !important;
  }
  .mobile-drawer .drawer-head {
    min-height: 90px !important;
    align-items: center !important;
  }
  .mobile-drawer .drawer-head img,
  .drawer-head img {
    height: 96px !important;
    max-height: 96px !important;
    max-width: 240px !important;
    width: auto !important;
  }
}

/* Running text banner */
.run-banner {
  overflow: hidden !important;
  position: relative;
}
.run-track {
  display: flex;
  width: max-content;
  animation: bm168-marquee 22s linear infinite;
  white-space: nowrap;
}
.run-item {
  padding: 0 48px;
  font-weight: 600;
  letter-spacing: 0.02em;
}
@keyframes bm168-marquee {
  0% { transform: translateX(0); }
  100% { transform: translateX(-50%); }
}
.run-banner:hover .run-track {
  animation-play-state: paused;
}

/* LIVE badges — neon green */
.quality .title span,
.events .title span,
.title span {
  color: #3deb75 !important;
  border-color: #2ecc71 !important;
  text-shadow: 0 0 8px #3deb7588 !important;
  box-shadow: 0 0 10px #3deb7533 !important;
}
.events .title span,
.quality .title span {
  background: rgba(14, 60, 40, 0.75) !important;
  border: 1px solid #2ecc71 !important;
  border-radius: 6px !important;
  padding: 3px 8px !important;
  font-weight: 700 !important;
  letter-spacing: 0.04em !important;
}

/* Period dropdown readable */
.actions select,
.top select,
select#period,
select {
  background: #071321 !important;
  color: #e8f4ff !important;
  border: 1px solid #1d74bb !important;
  border-radius: 8px !important;
  padding: 8px 12px !important;
}
.actions select option,
.top select option,
select option {
  background: #0b192a !important;
  color: #e8f4ff !important;
}
select:focus {
  outline: none !important;
  border-color: #4bcaff !important;
  box-shadow: 0 0 0 2px #0786ff44 !important;
}
select option:checked {
  background: #0d3a6e !important;
  color: #fff !important;
}

/* Date range picker */
.date-range {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
}
.date-range label {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 11px;
  color: #8eb6d6;
  font-weight: 600;
}
.date-range input[type="date"] {
  background: #071321 !important;
  color: #e8f4ff !important;
  border: 1px solid #1d74bb !important;
  border-radius: 8px !important;
  padding: 7px 10px !important;
  font-size: 12px !important;
  color-scheme: dark;
}
.date-range input[type="date"]::-webkit-calendar-picker-indicator {
  filter: invert(0.8);
  cursor: pointer;
}
.btn-range {
  height: 36px !important;
  padding: 0 12px !important;
  border-radius: 8px !important;
  border: 1px solid #1d74bb !important;
  background: linear-gradient(#0a2a4a, #061525) !important;
  color: #4bcaff !important;
  font-weight: 700 !important;
  cursor: pointer;
}
.btn-range:hover {
  border-color: #4bcaff !important;
  box-shadow: 0 0 12px #0786ff44;
}
@media (max-width: 900px) {
  .date-range { width: 100%; }
  .date-range input[type="date"] { flex: 1; min-width: 0; }
}

/* ===== Mobile header clean ===== */
@media (max-width: 900px) {
  .top {
    display: flex !important;
    flex-direction: column !important;
    align-items: stretch !important;
    gap: 10px !important;
    padding: 12px !important;
    min-height: auto !important;
  }
  .top > div:first-child {
    text-align: left !important;
  }
  .top h1 {
    font-size: 22px !important;
    margin: 2px 0 0 !important;
  }
  .top small {
    font-size: 10px !important;
  }
  .actions {
    display: flex !important;
    flex-direction: column !important;
    gap: 8px !important;
    width: 100% !important;
  }
  .date-range {
    display: grid !important;
    grid-template-columns: 1fr 1fr !important;
    gap: 8px !important;
    width: 100% !important;
  }
  .date-range label {
    display: flex !important;
    flex-direction: column !important;
    align-items: stretch !important;
    gap: 4px !important;
    font-size: 11px !important;
    width: 100% !important;
  }
  .date-range input[type="date"] {
    width: 100% !important;
    min-width: 0 !important;
    box-sizing: border-box !important;
    font-size: 13px !important;
    padding: 10px 8px !important;
  }
  .btn-range {
    grid-column: 1 / -1 !important;
    width: 100% !important;
    height: 40px !important;
  }
  .actions > button,
  .actions #refresh,
  .actions #export,
  .actions #logout {
    width: 100% !important;
    height: 40px !important;
    margin: 0 !important;
  }
  /* row for refresh/export/logout */
  .actions {
    display: grid !important;
    grid-template-columns: 1fr !important;
  }
  .date-range {
    grid-column: 1 / -1;
  }
  .kpis {
    grid-template-columns: 1fr !important;
    gap: 8px !important;
  }
  .kpi {
    min-height: auto !important;
    padding: 12px !important;
  }
  .mid, .bottom {
    grid-template-columns: 1fr !important;
  }
  .chart-card, .quality, .table-card, .events, .status {
    height: auto !important;
    min-height: 160px !important;
  }
}

@media (max-width: 900px) {
  .actions {
    display: flex !important;
    flex-direction: column !important;
    gap: 8px !important;
  }
  .actions .date-range {
    order: 1;
  }
  .actions #refresh,
  .actions #export,
  .actions #logout {
    order: 2;
  }
  .action-btns-row {
    display: grid !important;
    grid-template-columns: 1fr 1fr 1fr !important;
    gap: 6px !important;
    width: 100% !important;
  }
}

@media (max-width: 900px) {
  .top { flex-direction: column !important; gap: 10px !important; padding: 12px !important; }
  .actions { display: flex !important; flex-direction: column !important; gap: 8px !important; width: 100% !important; }
  .actions select#period, .actions select {
    width: 100% !important; height: 42px !important; font-size: 14px !important;
    color: #e8f4ff !important; background: #071321 !important;
    border: 1px solid #1d74bb !important; border-radius: 10px !important; padding: 0 12px !important;
  }
  .action-btns-row { display: grid !important; grid-template-columns: 1fr 1fr 1fr !important; gap: 6px !important; width: 100% !important; }
  .action-btns-row button {
    width: 100% !important; height: 42px !important; font-size: 12px !important;
    padding: 0 4px !important; color: #e8f4ff !important;
    border: 1px solid #1d74bb !important; border-radius: 10px !important;
    background: linear-gradient(#0a2a4a, #061525) !important;
    white-space: nowrap !important;
  }
  .action-btns-row #export {
    background: linear-gradient(#0786ff, #055bb0) !important; color: #fff !important; border-color: #4bcaff !important;
  }
}

/* DMY date range dropdowns */
.dmy-range {
  display: flex;
  flex-direction: column;
  gap: 8px;
  width: 100%;
}
.dmy-row {
  display: grid;
  grid-template-columns: 52px 1fr 1fr 1fr;
  gap: 6px;
  align-items: center;
}
.dmy-label {
  font-size: 11px;
  font-weight: 700;
  color: #8eb6d6;
}
.dmy-row select {
  width: 100% !important;
  height: 36px !important;
  background: #071321 !important;
  color: #e8f4ff !important;
  border: 1px solid #1d74bb !important;
  border-radius: 8px !important;
  padding: 0 6px !important;
  font-size: 12px !important;
}
.btn-range {
  height: 38px !important;
  width: 100%;
  border-radius: 8px !important;
  border: 1px solid #1d74bb !important;
  background: linear-gradient(#0a2a4a, #061525) !important;
  color: #4bcaff !important;
  font-weight: 700 !important;
  cursor: pointer;
}
@media (min-width: 901px) {
  .actions {
    display: flex !important;
    flex-wrap: wrap !important;
    align-items: center !important;
    gap: 10px !important;
  }
  .dmy-range {
    flex-direction: row !important;
    align-items: center !important;
    width: auto !important;
    flex-wrap: wrap;
  }
  .dmy-row {
    grid-template-columns: auto 64px 72px 72px;
  }
  .btn-range {
    width: auto !important;
    padding: 0 14px !important;
  }
  .action-btns-row {
    display: flex !important;
    gap: 8px !important;
  }
  .action-btns-row button {
    height: 38px !important;
    padding: 0 12px !important;
  }
}
@media (max-width: 900px) {
  .dmy-row {
    grid-template-columns: 54px 1fr 1.1fr 1.1fr;
  }
  .dmy-row select {
    height: 40px !important;
    font-size: 13px !important;
  }
  .btn-range { height: 42px !important; }
}

/* Clean header actions */
.actions {
  display: flex !important;
  flex-wrap: wrap !important;
  align-items: center !important;
  gap: 8px !important;
  justify-content: flex-end !important;
}
.period-select {
  height: 38px !important;
  min-width: 110px;
  background: #071321 !important;
  color: #e8f4ff !important;
  border: 1px solid #1d74bb !important;
  border-radius: 10px !important;
  padding: 0 12px !important;
  font-size: 13px !important;
  font-weight: 600 !important;
}
.btn-act {
  height: 38px !important;
  padding: 0 14px !important;
  border-radius: 10px !important;
  border: 1px solid #1d74bb !important;
  background: linear-gradient(#0a2a4a, #061525) !important;
  color: #d6ecff !important;
  font-weight: 700 !important;
  font-size: 13px !important;
  cursor: pointer;
}
.btn-act.btn-primary {
  background: linear-gradient(#0786ff, #055bb0) !important;
  border-color: #4bcaff !important;
  color: #fff !important;
}
.dmy-range {
  display: flex;
  align-items: center;
  gap: 4px;
  flex-wrap: wrap;
}
.dmy-range[hidden] { display: none !important; }
.dmy-range select {
  height: 34px !important;
  background: #071321 !important;
  color: #e8f4ff !important;
  border: 1px solid #1d74bb !important;
  border-radius: 8px !important;
  padding: 0 6px !important;
  font-size: 12px !important;
}
.dmy-sep { color: #4bcaff; font-weight: 700; padding: 0 4px; }
.btn-range {
  height: 34px !important;
  padding: 0 12px !important;
  border-radius: 8px !important;
  border: 1px solid #2ecc71 !important;
  background: rgba(14,60,40,0.8) !important;
  color: #3deb75 !important;
  font-weight: 700 !important;
  cursor: pointer;
}
@media (max-width: 900px) {
  .actions {
    width: 100% !important;
    flex-direction: column !important;
    align-items: stretch !important;
  }
  .period-select, .btn-act {
    width: 100% !important;
    height: 42px !important;
  }
  .dmy-range {
    display: grid !important;
    grid-template-columns: 1fr 1fr 1fr;
    gap: 6px;
  }
  .dmy-range[hidden] { display: none !important; }
  .dmy-sep { display: none; }
  .btn-range { grid-column: 1 / -1; height: 40px !important; }
  .actions > .btn-act#refresh,
  .actions > .btn-act#export,
  .actions > .btn-act#logout {
    /* keep stacked full width on mobile for readability */
  }
}

.btn-toggle { min-width: 90px; }
.action-panel { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; }
.action-panel[hidden] { display: none !important; }
@media (max-width: 900px) {
  .action-panel { flex-direction: column; width: 100%; gap: 6px; }
  .action-panel .btn-act { width: 100% !important; }
  .btn-toggle { width: 100% !important; height: 42px !important; }
}

/* Aksi dropdown menu (drops downward) */
.aksi-wrap {
  position: relative;
  display: inline-block;
  z-index: 50;
}
.aksi-menu {
  position: absolute;
  top: calc(100% + 6px);
  right: 0;
  min-width: 160px;
  background: #071321;
  border: 1px solid #1d74bb;
  border-radius: 12px;
  box-shadow: 0 12px 28px #000c, 0 0 18px #0786ff33;
  padding: 6px;
  display: flex;
  flex-direction: column;
  gap: 4px;
  z-index: 100;
}
.aksi-menu[hidden] { display: none !important; }
.aksi-item {
  width: 100%;
  text-align: left;
  padding: 10px 12px !important;
  border-radius: 8px !important;
  border: 1px solid transparent !important;
  background: transparent !important;
  color: #e8f4ff !important;
  font-weight: 700 !important;
  font-size: 13px !important;
  cursor: pointer;
}
.aksi-item:hover {
  background: #0d2a4a !important;
  border-color: #1d74bb !important;
}
.aksi-item.aksi-primary {
  color: #4bcaff !important;
}
@media (max-width: 900px) {
  .aksi-wrap { width: 100%; }
  .aksi-wrap .btn-toggle { width: 100% !important; height: 42px !important; }
  .aksi-menu {
    left: 0;
    right: 0;
    min-width: 0;
    width: 100%;
  }
}

/* Aksi expands INSIDE the header frame — border grows with it */
.aksi-wrap {
  position: relative !important;
  width: 100%;
  display: block !important;
}
.aksi-menu {
  position: static !important;
  top: auto !important;
  right: auto !important;
  left: auto !important;
  width: 100% !important;
  min-width: 0 !important;
  margin-top: 8px !important;
  box-shadow: none !important;
  background: rgba(5, 16, 30, 0.9) !important;
  border: 1px solid #1d74bb !important;
  border-radius: 10px !important;
  padding: 6px !important;
}
.aksi-menu[hidden] {
  display: none !important;
}
.aksi-item {
  width: 100% !important;
}
@media (max-width: 900px) {
  .aksi-wrap {
    width: 100% !important;
  }
  .aksi-menu {
    width: 100% !important;
  }
}
@media (min-width: 901px) {
  .aksi-wrap {
    width: auto;
    min-width: 120px;
  }
  .aksi-menu {
    position: absolute !important;
    top: calc(100% + 6px) !important;
    right: 0 !important;
    width: 180px !important;
    box-shadow: 0 12px 28px #000c !important;
  }
}
.top.frame, .top {
  overflow: visible !important;
}
.actions {
  overflow: visible !important;
}

/* FIX: action panel expand inside header border */
.actions > * {
  height: auto !important;
}
.actions {
  align-items: stretch !important;
  overflow: visible !important;
}
.top.frame,
.top {
  overflow: visible !important;
  height: auto !important;
  min-height: auto !important;
  align-items: flex-start !important;
}
.aksi-wrap {
  position: relative !important;
  height: auto !important;
  width: 100% !important;
  display: block !important;
  z-index: 20;
}
.aksi-wrap .btn-toggle {
  width: 100% !important;
  height: 42px !important;
}
.aksi-menu {
  position: static !important;
  display: flex !important;
  flex-direction: column !important;
  gap: 4px !important;
  width: 100% !important;
  margin-top: 8px !important;
  padding: 6px !important;
  background: #06101d !important;
  border: 1px solid #1d74bb !important;
  border-radius: 10px !important;
  box-shadow: none !important;
  z-index: 21;
}
.aksi-menu[hidden] {
  display: none !important;
}
.aksi-item {
  display: block !important;
  width: 100% !important;
  height: 40px !important;
  text-align: left !important;
  padding: 0 12px !important;
  border-radius: 8px !important;
  border: 1px solid #163d66 !important;
  background: #0a1a2e !important;
  color: #e8f4ff !important;
  font-weight: 700 !important;
}
.aksi-item.aksi-primary {
  border-color: #0786ff !important;
  color: #4bcaff !important;
}

.top .run-banner, .run-banner {
  width: 100% !important;
  max-width: 100% !important;
  margin: 8px 0 0 !important;
  height: 28px !important;
  border-radius: 8px !important;
  border: 1px solid #1d74bb !important;
  background: rgba(10,60,40,0.55) !important;
  color: #3deb75 !important;
  overflow: hidden !important;
  display: flex !important;
  align-items: center !important;
  grid-column: auto !important;
}
.top > div:first-child { flex: 1; min-width: 0; width: 100%; }
@media (max-width: 900px) {
  .top > div:first-child { width: 100% !important; }
}

/* ===== CLEAN HEADER LAYOUT ===== */
.top.frame {
  display: flex !important;
  flex-wrap: wrap !important;
  align-items: center !important;
  justify-content: space-between !important;
  gap: 12px !important;
  padding: 14px 16px !important;
  min-height: auto !important;
  height: auto !important;
  overflow: visible !important;
}
.top-left {
  flex: 1 1 auto;
  min-width: 140px;
}
.top-left small {
  display: block;
  color: #2d9fff;
  font: 700 10px Consolas, monospace;
  letter-spacing: .16em;
}
.top-left h1 {
  margin: 4px 0 0 !important;
  font-size: 26px !important;
  line-height: 1.15 !important;
}
.actions {
  display: flex !important;
  flex-wrap: wrap !important;
  align-items: center !important;
  gap: 8px !important;
  height: auto !important;
}
.actions > * {
  height: auto !important;
}
.period-select {
  height: 40px !important;
  min-width: 120px;
  background: #071321 !important;
  color: #e8f4ff !important;
  border: 1px solid #1d74bb !important;
  border-radius: 10px !important;
  padding: 0 12px !important;
  font-weight: 600 !important;
}
.btn-act, .btn-toggle {
  height: 40px !important;
  padding: 0 14px !important;
  border-radius: 10px !important;
  border: 1px solid #1d74bb !important;
  background: linear-gradient(#0a2a4a, #061525) !important;
  color: #e8f4ff !important;
  font-weight: 700 !important;
  cursor: pointer;
}
.aksi-wrap {
  position: relative;
  z-index: 30;
}
.aksi-menu {
  position: absolute;
  top: calc(100% + 6px);
  right: 0;
  min-width: 168px;
  background: #071321;
  border: 1px solid #1d74bb;
  border-radius: 12px;
  padding: 6px;
  box-shadow: 0 14px 30px #000c;
  display: flex;
  flex-direction: column;
  gap: 4px;
  z-index: 40;
}
.aksi-menu[hidden] { display: none !important; }
.aksi-item {
  text-align: left !important;
  padding: 10px 12px !important;
  border-radius: 8px !important;
  border: 1px solid transparent !important;
  background: transparent !important;
  color: #e8f4ff !important;
  font-weight: 700 !important;
  cursor: pointer;
  width: 100%;
}
.aksi-item:hover { background: #0d2a4a !important; }
.aksi-item.aksi-primary { color: #4bcaff !important; }

/* Status bar — clean, not marquee mess */
.status-bar {
  display: flex !important;
  align-items: center !important;
  gap: 10px !important;
  padding: 10px 14px !important;
  border-radius: 12px !important;
  border: 1px solid #1f6b4a !important;
  background: rgba(10, 50, 35, 0.55) !important;
  color: #3deb75 !important;
  font-size: 12px !important;
  font-weight: 600 !important;
  margin: 0 !important;
  overflow: hidden !important;
}
.status-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: #3deb75;
  box-shadow: 0 0 8px #3deb75;
  flex-shrink: 0;
}
.status-text {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  min-width: 0;
}

@media (max-width: 900px) {
  .top.frame {
    flex-direction: column !important;
    align-items: stretch !important;
  }
  .actions {
    width: 100% !important;
    display: grid !important;
    grid-template-columns: 1fr 1fr !important;
    gap: 8px !important;
  }
  .period-select {
    width: 100% !important;
    grid-column: 1 / 2;
  }
  .aksi-wrap {
    width: 100%;
    grid-column: 2 / 3;
  }
  .btn-toggle {
    width: 100% !important;
  }
  .aksi-menu {
    left: 0;
    right: 0;
    width: 100%;
    min-width: 0;
  }
  .dmy-range {
    grid-column: 1 / -1;
  }
  .top-left h1 {
    font-size: 22px !important;
  }
  .status-bar {
    font-size: 11px !important;
    padding: 8px 12px !important;
  }
}

/* Running status text — green safe / red error */
.status-bar {
  display: flex !important;
  align-items: center !important;
  height: 34px !important;
  padding: 0 !important;
  overflow: hidden !important;
  border-radius: 12px !important;
  border: 1px solid #1f6b4a !important;
  background: rgba(10, 50, 35, 0.55) !important;
  position: relative;
}
.status-bar .run-track {
  display: flex;
  width: max-content;
  animation: bm168-marquee 22s linear infinite;
  white-space: nowrap;
}
.status-bar .run-item {
  padding: 0 48px;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.02em;
  line-height: 34px;
  color: #3deb75;
  text-shadow: 0 0 8px #3deb7588;
}
.status-bar.is-online {
  border-color: #1f6b4a !important;
  background: rgba(10, 50, 35, 0.55) !important;
}
.status-bar.is-online .run-item {
  color: #3deb75 !important;
  text-shadow: 0 0 10px #3deb75aa !important;
}
.status-bar.is-error {
  border-color: #a33 !important;
  background: rgba(60, 12, 12, 0.65) !important;
}
.status-bar.is-error .run-item {
  color: #ff6b6b !important;
  text-shadow: 0 0 10px #ff4d4daa !important;
}
.status-bar:hover .run-track {
  animation-play-state: paused;
}
@keyframes bm168-marquee {
  0% { transform: translateX(0); }
  100% { transform: translateX(-50%); }
}

/* Desktop header actions — one horizontal row */
@media (min-width: 901px) {
  .top.frame {
    flex-direction: row !important;
    flex-wrap: nowrap !important;
    align-items: center !important;
    justify-content: space-between !important;
  }
  .top-left {
    flex: 1 1 auto !important;
  }
  .actions {
    display: flex !important;
    flex-direction: row !important;
    flex-wrap: nowrap !important;
    align-items: center !important;
    gap: 10px !important;
    width: auto !important;
  }
  .period-select {
    width: auto !important;
    min-width: 120px !important;
    height: 40px !important;
  }
  .aksi-wrap {
    width: auto !important;
    display: inline-block !important;
  }
  .aksi-wrap .btn-toggle {
    width: auto !important;
    min-width: 110px !important;
    height: 40px !important;
  }
  .aksi-menu {
    position: absolute !important;
    top: calc(100% + 6px) !important;
    right: 0 !important;
    left: auto !important;
    width: 180px !important;
  }
}

/* FINAL header actions */
.actions {
  display: flex !important;
  flex-direction: row !important;
  flex-wrap: nowrap !important;
  align-items: center !important;
  gap: 8px !important;
  width: auto !important;
}
.period-select {
  height: 40px !important;
  min-width: 118px !important;
}
.aksi-menu {
  display: flex !important;
  flex-direction: row !important;
  gap: 8px !important;
  position: static !important;
  background: transparent !important;
  border: none !important;
  box-shadow: none !important;
  padding: 0 !important;
  min-width: 0 !important;
  width: auto !important;
}
.aksi-menu[hidden] {
  display: none !important;
}
.aksi-menu .btn-act,
.aksi-menu .aksi-item {
  height: 40px !important;
  padding: 0 14px !important;
  width: auto !important;
  border-radius: 10px !important;
  border: 1px solid #1d74bb !important;
  background: linear-gradient(#0a2a4a, #061525) !important;
  color: #e8f4ff !important;
  font-weight: 700 !important;
  white-space: nowrap !important;
}
.aksi-menu .btn-primary,
.aksi-menu .aksi-primary {
  background: linear-gradient(#0786ff, #055bb0) !important;
  border-color: #4bcaff !important;
  color: #fff !important;
}
.mobile-only { display: none !important; }

@media (max-width: 900px) {
  .mobile-only { display: block !important; width: 100% !important; }
  .actions {
    width: 100% !important;
    display: grid !important;
    grid-template-columns: 1fr 1fr !important;
    gap: 8px !important;
  }
  .period-select { width: 100% !important; grid-column: 1; }
  #actionsToggle { grid-column: 2; height: 40px !important; }
  .aksi-menu {
    grid-column: 1 / -1;
    flex-direction: column !important;
    background: #071321 !important;
    border: 1px solid #1d74bb !important;
    border-radius: 12px !important;
    padding: 6px !important;
  }
  .aksi-menu .btn-act {
    width: 100% !important;
  }
}

/* Clean custom date range */
.dmy-range {
  display: flex !important;
  flex-wrap: wrap !important;
  align-items: center !important;
  gap: 8px !important;
  padding: 8px 10px !important;
  background: #06101d !important;
  border: 1px solid #1d74bb !important;
  border-radius: 10px !important;
}
.dmy-range[hidden] { display: none !important; }
.dmy-field {
  display: flex !important;
  align-items: center !important;
  gap: 6px !important;
  font-size: 11px !important;
  font-weight: 700 !important;
  color: #8eb6d6 !important;
}
.dmy-field input[type="date"] {
  height: 36px !important;
  background: #071321 !important;
  color: #e8f4ff !important;
  border: 1px solid #1d74bb !important;
  border-radius: 8px !important;
  padding: 0 8px !important;
  font-size: 13px !important;
  color-scheme: dark;
}
.btn-range {
  height: 36px !important;
  padding: 0 14px !important;
  border-radius: 8px !important;
  border: 1px solid #2ecc71 !important;
  background: rgba(14,60,40,0.85) !important;
  color: #3deb75 !important;
  font-weight: 700 !important;
  cursor: pointer;
}
@media (min-width: 901px) {
  .dmy-range {
    flex-wrap: nowrap !important;
  }
}
@media (max-width: 900px) {
  .dmy-range {
    grid-column: 1 / -1 !important;
    width: 100% !important;
    flex-direction: column !important;
    align-items: stretch !important;
  }
  .dmy-field {
    width: 100% !important;
    justify-content: space-between !important;
  }
  .dmy-field input[type="date"] {
    flex: 1 !important;
    min-width: 0 !important;
  }
  .btn-range { width: 100% !important; height: 40px !important; }
}

/* Compact custom range */
.dmy-range {
  padding: 4px 6px !important;
  gap: 6px !important;
  border-radius: 8px !important;
}
.dmy-field {
  font-size: 10px !important;
  gap: 4px !important;
}
.dmy-field input[type="date"] {
  height: 30px !important;
  font-size: 12px !important;
  padding: 0 6px !important;
  border-radius: 6px !important;
  max-width: 138px !important;
}
.btn-range {
  height: 30px !important;
  padding: 0 10px !important;
  font-size: 12px !important;
  border-radius: 6px !important;
}
@media (max-width: 900px) {
  .dmy-field input[type="date"] {
    max-width: none !important;
    height: 36px !important;
  }
  .btn-range { height: 36px !important; }
}

/* Force header controls same height + vertical align */
@media (min-width: 901px) {
  .top.frame {
    align-items: center !important;
  }
  .actions {
    display: flex !important;
    flex-direction: row !important;
    align-items: center !important;
    gap: 8px !important;
    height: 40px !important;
  }
  .actions .period-select,
  .actions select#period,
  .actions .btn-act,
  .actions .aksi-menu .btn-act,
  .actions .aksi-menu .aksi-item,
  .aksi-menu #refresh,
  .aksi-menu #export,
  .aksi-menu #logout {
    height: 40px !important;
    min-height: 40px !important;
    max-height: 40px !important;
    line-height: 40px !important;
    padding-top: 0 !important;
    padding-bottom: 0 !important;
    box-sizing: border-box !important;
    margin: 0 !important;
    vertical-align: middle !important;
  }
  .aksi-menu {
    display: flex !important;
    flex-direction: row !important;
    align-items: center !important;
    height: 40px !important;
    gap: 8px !important;
  }
  .period-select {
    display: flex !important;
    align-items: center !important;
  }
}

/* Header two-row layout when custom open */
.top.frame {
  display: flex !important;
  flex-wrap: wrap !important;
  align-items: center !important;
  justify-content: space-between !important;
  gap: 10px 12px !important;
  padding: 12px 16px !important;
}
.top-left {
  flex: 0 1 auto !important;
}
.actions {
  display: flex !important;
  flex-direction: row !important;
  flex-wrap: nowrap !important;
  align-items: center !important;
  gap: 8px !important;
  margin-left: auto !important;
  height: 38px !important;
}
.actions .period-select,
.actions select,
.actions .btn-act,
.aksi-menu .btn-act,
.aksi-menu #refresh,
.aksi-menu #export,
.aksi-menu #logout {
  height: 38px !important;
  min-height: 38px !important;
  max-height: 38px !important;
  line-height: 36px !important;
  padding: 0 12px !important;
  margin: 0 !important;
  box-sizing: border-box !important;
  border-radius: 9px !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
}
.aksi-menu {
  display: inline-flex !important;
  flex-direction: row !important;
  align-items: center !important;
  gap: 8px !important;
  height: 38px !important;
  position: static !important;
  background: none !important;
  border: none !important;
  padding: 0 !important;
  box-shadow: none !important;
}
.period-select {
  min-width: 110px !important;
}

/* Custom row — full width under title+actions */
.top.frame > .dmy-range {
  flex: 1 1 100% !important;
  width: 100% !important;
  order: 3;
  display: flex !important;
  flex-direction: row !important;
  flex-wrap: nowrap !important;
  align-items: center !important;
  gap: 10px !important;
  padding: 8px 10px !important;
  margin: 0 !important;
  background: rgba(6, 16, 29, 0.9) !important;
  border: 1px solid #1d74bb !important;
  border-radius: 10px !important;
  box-sizing: border-box !important;
}
.top.frame > .dmy-range[hidden] {
  display: none !important;
}
.dmy-field {
  display: inline-flex !important;
  align-items: center !important;
  gap: 6px !important;
  font-size: 11px !important;
  color: #8eb6d6 !important;
  font-weight: 700 !important;
  height: 32px !important;
}
.dmy-field input[type="date"] {
  height: 32px !important;
  line-height: 30px !important;
  padding: 0 8px !important;
  font-size: 12px !important;
  max-width: 150px !important;
  border-radius: 7px !important;
  background: #071321 !important;
  color: #e8f4ff !important;
  border: 1px solid #1d74bb !important;
  color-scheme: dark;
  box-sizing: border-box !important;
}
.btn-range {
  height: 32px !important;
  line-height: 30px !important;
  padding: 0 12px !important;
  font-size: 12px !important;
  border-radius: 7px !important;
  display: inline-flex !important;
  align-items: center !important;
}

@media (max-width: 900px) {
  .actions {
    width: 100% !important;
    margin-left: 0 !important;
    height: auto !important;
    display: grid !important;
    grid-template-columns: 1fr 1fr !important;
  }
  .top.frame > .dmy-range {
    flex-direction: column !important;
    align-items: stretch !important;
  }
  .dmy-field {
    width: 100% !important;
    justify-content: space-between !important;
  }
  .dmy-field input[type="date"] {
    max-width: none !important;
    flex: 1 !important;
  }
  .btn-range { width: 100% !important; justify-content: center !important; }
}

/* ONE ROW header controls — never stack on desktop */
@media (min-width: 901px) {
  .top.frame {
    flex-wrap: nowrap !important;
    align-items: center !important;
  }
  .actions {
    display: flex !important;
    flex-direction: row !important;
    flex-wrap: nowrap !important;
    align-items: center !important;
    gap: 8px !important;
    height: 38px !important;
    margin-left: auto !important;
  }
  #actionsToggle,
  .mobile-only {
    display: none !important;
  }
  .aksi-menu {
    display: flex !important;
    flex-direction: row !important;
    position: static !important;
    gap: 8px !important;
    height: 38px !important;
    border: none !important;
    background: transparent !important;
    padding: 0 !important;
    box-shadow: none !important;
  }
  .aksi-menu[hidden] {
    display: flex !important; /* always show buttons on desktop */
  }
  .period-select,
  .actions select,
  .aksi-menu .btn-act,
  .aksi-menu button,
  #refresh, #export, #logout {
    height: 38px !important;
    min-height: 38px !important;
    max-height: 38px !important;
    padding: 0 12px !important;
    margin: 0 !important;
    line-height: 36px !important;
    box-sizing: border-box !important;
    border-radius: 9px !important;
  }
  /* custom inline, same row, compact */
  .dmy-range {
    display: flex !important;
    flex-direction: row !important;
    flex-wrap: nowrap !important;
    align-items: center !important;
    gap: 6px !important;
    padding: 0 !important;
    margin: 0 !important;
    background: transparent !important;
    border: none !important;
    height: 38px !important;
  }
  .dmy-range[hidden] {
    display: none !important;
  }
  .dmy-field {
    display: inline-flex !important;
    align-items: center !important;
    gap: 4px !important;
    font-size: 10px !important;
    height: 38px !important;
    color: #8eb6d6 !important;
  }
  .dmy-field input[type="date"] {
    height: 32px !important;
    max-width: 128px !important;
    font-size: 11px !important;
    padding: 0 6px !important;
  }
  .btn-range {
    height: 32px !important;
    padding: 0 10px !important;
    font-size: 11px !important;
  }
}

/* Mobile: status bar above dashboard card */
@media (max-width: 900px) {
  .content {
    display: flex !important;
    flex-direction: column !important;
  }
  #dbBanner.status-bar {
    order: -1 !important;
    margin: 0 0 10px 0 !important;
    width: 100% !important;
  }
  .top.frame {
    order: 0 !important;
  }
}
@media (min-width: 901px) {
  #dbBanner.status-bar {
    order: unset !important;
    margin: 0 !important;
  }
}

@media (max-width: 900px) {
  .content {
    gap: 8px !important;
    padding-top: 0 !important;
    margin-top: 0 !important;
  }
  #dbBanner.status-bar {
    order: -1 !important;
    margin: 0 0 6px 0 !important;
    height: 28px !important;
  }
  .top.frame {
    margin-top: 0 !important;
    padding: 10px 12px !important;
  }
  .shell {
    padding: 6px !important;
    gap: 6px !important;
  }
  /* mobile top bar logo row tighter */
  .mobile-bar, .mob-bar, .topbar {
    margin-bottom: 4px !important;
  }
}

@media (max-width: 900px) {
  .mobile-bar {
    margin: 0 0 4px 0 !important;
    padding: 6px 10px !important;
    min-height: 44px !important;
  }
  .shell {
    padding: 4px 6px 8px !important;
    gap: 6px !important;
  }
  .content {
    gap: 6px !important;
  }
  #dbBanner.status-bar {
    margin: 0 0 4px 0 !important;
  }
  .top.frame {
    margin: 0 !important;
  }
}

/* Mobile header: period + Aksi always same row; custom dates below */
@media (max-width: 900px) {
  .top.frame {
    display: flex !important;
    flex-direction: column !important;
    align-items: stretch !important;
    gap: 8px !important;
    padding: 12px !important;
  }
  .top-left { width: 100% !important; }
  .actions {
    display: grid !important;
    grid-template-columns: 1fr 1fr !important;
    grid-template-areas:
      "period aksi"
      "custom custom"
      "btns btns" !important;
    gap: 8px !important;
    width: 100% !important;
    height: auto !important;
    margin: 0 !important;
  }
  .actions .period-select,
  .actions #period {
    grid-area: period !important;
    width: 100% !important;
    height: 40px !important;
  }
  .actions #actionsToggle,
  .actions .mobile-only {
    grid-area: aksi !important;
    display: block !important;
    width: 100% !important;
    height: 40px !important;
  }
  .actions .dmy-range {
    grid-area: custom !important;
    display: flex !important;
    flex-direction: column !important;
    width: 100% !important;
    gap: 6px !important;
    padding: 8px !important;
    background: rgba(6,16,29,0.9) !important;
    border: 1px solid #1d74bb !important;
    border-radius: 10px !important;
    height: auto !important;
  }
  .actions .dmy-range[hidden] {
    display: none !important;
  }
  .actions .aksi-menu {
    grid-area: btns !important;
    width: 100% !important;
    flex-direction: column !important;
  }
  .dmy-field {
    width: 100% !important;
    justify-content: space-between !important;
  }
  .dmy-field input[type="date"] {
    max-width: none !important;
    flex: 1 !important;
    height: 36px !important;
  }
  .btn-range {
    width: 100% !important;
    height: 36px !important;
  }
  /* status above dashboard, tight */
  .content { display: flex !important; flex-direction: column !important; gap: 6px !important; }
  #dbBanner.status-bar {
    order: -1 !important;
    margin: 0 !important;
  }
}

@media (max-width: 900px) {
  .content {
    display: flex !important;
    flex-direction: column !important;
    gap: 8px !important;
  }
  #dbBanner.status-bar {
    display: flex !important;
    order: -1 !important;
    visibility: visible !important;
    opacity: 1 !important;
    height: 32px !important;
    min-height: 32px !important;
    margin: 0 !important;
    width: 100% !important;
    overflow: hidden !important;
    z-index: 5 !important;
  }
  #dbBanner .run-track {
    display: flex !important;
    animation: bm168-marquee 22s linear infinite !important;
  }
  #dbBanner .run-item {
    color: #3deb75 !important;
    font-size: 11px !important;
    line-height: 32px !important;
    white-space: nowrap !important;
  }
}

/* Desktop: header first, then status, then rest */
@media (min-width: 901px) {
  .content {
    display: grid !important;
  }
  .content > .top.frame { order: 1 !important; }
  .content > #dbBanner { order: 2 !important; }
  .content > *:not(.top):not(#dbBanner) { order: 3 !important; }
}

/* RESTORE desktop — jangan ganggu layout desktop */
@media (min-width: 901px) {
  .content {
    display: grid !important;
    gap: 14px !important;
  }
  .content > .top.frame {
    order: 0 !important;
  }
  .content > #dbBanner {
    order: 0 !important;
  }
  .content > *:not(.top):not(#dbBanner) {
    order: 0 !important;
  }
  /* Status bar tetap SETELAH header di desktop via DOM position —
     pindah banner kembali setelah header di HTML handled below */
}

/* Mobile ONLY changes for status */
@media (max-width: 900px) {
  .content {
    display: flex !important;
    flex-direction: column !important;
  }
  #dbBanner.status-bar {
    order: -1 !important;
    display: flex !important;
  }
  .top.frame {
    order: 0 !important;
  }
}

/* Desktop restored — natural DOM order only */
@media (min-width: 901px) {
  .content > * {
    order: initial !important;
  }
  #dbBanner.status-bar {
    display: flex !important;
    order: initial !important;
  }
}
@media (max-width: 900px) {
  .content {
    display: flex !important;
    flex-direction: column !important;
  }
  #dbBanner.status-bar {
    order: -1 !important;
    display: flex !important;
  }
}

/* Mobile status strip under fixed logo bar — HP only */
.mobile-status {
  display: none;
}
@media (max-width: 900px) {
  .mobile-status {
    display: flex !important;
    position: fixed !important;
    top: 52px !important;
    left: 0 !important;
    right: 0 !important;
    height: 30px !important;
    z-index: 19999 !important;
    align-items: center !important;
    overflow: hidden !important;
    border-bottom: 1px solid #1f6b4a !important;
    background: rgba(10, 50, 35, 0.95) !important;
  }
  .mobile-status.is-online {
    border-bottom-color: #1f6b4a !important;
    background: rgba(10, 50, 35, 0.95) !important;
  }
  .mobile-status.is-error {
    border-bottom-color: #a33 !important;
    background: rgba(60, 12, 12, 0.95) !important;
  }
  .mobile-status .run-track {
    display: flex !important;
    width: max-content !important;
    animation: bm168-marquee 22s linear infinite !important;
    white-space: nowrap !important;
  }
  .mobile-status .run-item {
    padding: 0 40px !important;
    font-size: 11px !important;
    font-weight: 700 !important;
    line-height: 30px !important;
    color: #3deb75 !important;
    text-shadow: 0 0 8px #3deb7588 !important;
  }
  .mobile-status.is-error .run-item {
    color: #ff6b6b !important;
    text-shadow: 0 0 8px #ff4d4d88 !important;
  }
  /* push shell below logo(52) + status(30) */
  .shell {
    padding-top: 88px !important;
  }
  /* hide the desktop status bar on mobile to avoid duplicate */
  #dbBanner.status-bar {
    display: flex !important;
  }
}
@media (min-width: 901px) {
  .mobile-status {
    display: none !important;
  }
  #dbBanner.status-bar {
    display: flex !important;
  }
}

/* ===== CLEAN MOBILE ACTIONS + STATUS (final) ===== */
.desk-actions { display: none; }
.mobile-aksi { display: none; }

@media (min-width: 901px) {
  .mobile-aksi { display: none !important; }
  .desk-actions {
    display: flex !important;
    flex-direction: row !important;
    align-items: center !important;
    gap: 8px !important;
  }
  .desk-actions .btn-act {
    height: 38px !important;
    padding: 0 12px !important;
    border-radius: 9px !important;
    border: 1px solid #1d74bb !important;
    background: linear-gradient(#0a2a4a, #061525) !important;
    color: #e8f4ff !important;
    font-weight: 700 !important;
  }
  .desk-actions .btn-primary {
    background: linear-gradient(#0786ff, #055bb0) !important;
    border-color: #4bcaff !important;
    color: #fff !important;
  }
  .mobile-status { display: none !important; }
  #dbBanner.status-bar { display: flex !important; }
}

@media (max-width: 900px) {
  .desk-actions { display: none !important; }
  .mobile-aksi {
    display: block !important;
    position: relative !important;
    width: 100% !important;
    z-index: 50 !important;
  }
  .mobile-aksi .btn-toggle {
    width: 100% !important;
    height: 40px !important;
    border-radius: 10px !important;
    border: 1px solid #1d74bb !important;
    background: linear-gradient(#0a2a4a, #061525) !important;
    color: #e8f4ff !important;
    font-weight: 700 !important;
  }
  .mobile-aksi .aksi-menu {
    position: absolute !important;
    top: calc(100% + 6px) !important;
    left: 0 !important;
    right: 0 !important;
    width: 100% !important;
    background: #071321 !important;
    border: 1px solid #1d74bb !important;
    border-radius: 12px !important;
    padding: 6px !important;
    box-shadow: 0 12px 28px #000c !important;
    display: flex !important;
    flex-direction: column !important;
    gap: 4px !important;
    z-index: 60 !important;
  }
  .mobile-aksi .aksi-menu[hidden] {
    display: none !important;
  }
  .mobile-aksi .aksi-menu button {
    width: 100% !important;
    height: 42px !important;
    text-align: left !important;
    padding: 0 12px !important;
    border-radius: 8px !important;
    border: 1px solid #163d66 !important;
    background: #0a1a2e !important;
    color: #e8f4ff !important;
    font-weight: 700 !important;
  }
  .mobile-aksi .aksi-menu #export {
    border-color: #0786ff !important;
    color: #4bcaff !important;
  }

  /* period + aksi side by side */
  .actions {
    display: grid !important;
    grid-template-columns: 1fr 1fr !important;
    gap: 8px !important;
    width: 100% !important;
    height: auto !important;
    overflow: visible !important;
  }
  .actions #period {
    width: 100% !important;
    height: 40px !important;
  }
  .actions .dmy-range {
    grid-column: 1 / -1 !important;
  }
  .actions .mobile-aksi {
    grid-column: 2 !important;
  }
  .actions #period {
    grid-column: 1 !important;
  }

  /* status under logo */
  .mobile-status {
    display: flex !important;
    position: fixed !important;
    top: 52px !important;
    left: 0; right: 0;
    height: 30px !important;
    z-index: 19999 !important;
    overflow: hidden !important;
    background: rgba(10,50,35,0.96) !important;
    border-bottom: 1px solid #1f6b4a !important;
  }
  .mobile-status .run-track {
    display: flex !important;
    animation: bm168-marquee 22s linear infinite !important;
  }
  .mobile-status .run-item {
    color: #3deb75 !important;
    font-size: 11px !important;
    font-weight: 700 !important;
    line-height: 30px !important;
    padding: 0 36px !important;
    white-space: nowrap !important;
  }
  .shell {
    padding-top: 0 !important;
  }
  #dbBanner.status-bar {
    display: flex !important;
  }
  .top.frame {
    overflow: visible !important;
  }
}
/* Desktop action order: period | custom dates | buttons — one row */
@media (min-width: 901px) {
  .actions {
    display: flex !important;
    flex-direction: row !important;
    flex-wrap: nowrap !important;
    align-items: center !important;
    gap: 8px !important;
  }
  .mobile-aksi { display: none !important; }
  .desk-actions {
    display: flex !important;
    flex-direction: row !important;
    gap: 8px !important;
    align-items: center !important;
  }
  .dmy-range {
    order: 2;
  }
  .desk-actions { order: 3; }
  #period, .period-select { order: 1; }
  .dmy-range[hidden] { display: none !important; }
  .dmy-range:not([hidden]) {
    display: flex !important;
    flex-direction: row !important;
    align-items: center !important;
    gap: 6px !important;
    padding: 0 !important;
    border: none !important;
    background: transparent !important;
    height: 38px !important;
  }
}

/* Mobile polish: status + Aksi only */
@media (max-width: 900px) {
  .mobile-status {
    display: flex !important;
    position: fixed !important;
    top: 52px !important;
    left: 0 !important;
    right: 0 !important;
    height: 32px !important;
    z-index: 19999 !important;
    overflow: hidden !important;
    align-items: center !important;
    background: rgba(8, 40, 28, 0.98) !important;
    border-bottom: 1px solid #2ecc71 !important;
    box-shadow: none !important;
  }
  .mobile-status::before,
  .mobile-status::after {
    display: none !important;
    content: none !important;
  }
  .mobile-status .run-track {
    display: inline-flex !important;
    width: max-content !important;
    animation: bm168-marquee 28s linear infinite !important;
  }
  .mobile-status .run-item {
    padding: 0 48px 0 16px !important;
    font-size: 11px !important;
    font-weight: 700 !important;
    line-height: 32px !important;
    color: #3deb75 !important;
    text-shadow: 0 0 6px #3deb7566 !important;
    white-space: nowrap !important;
  }
  .shell {
    padding-top: 92px !important;
  }
  /* Aksi button equal height with period */
  .actions {
    display: grid !important;
    grid-template-columns: 1fr 1fr !important;
    gap: 8px !important;
    overflow: visible !important;
  }
  .actions #period {
    height: 42px !important;
    font-size: 13px !important;
  }
  .mobile-aksi {
    position: relative !important;
    z-index: 80 !important;
  }
  .mobile-aksi .btn-toggle {
    height: 42px !important;
    width: 100% !important;
    font-size: 13px !important;
  }
  .mobile-aksi .aksi-menu {
    position: absolute !important;
    top: calc(100% + 4px) !important;
    left: 0 !important;
    right: 0 !important;
    z-index: 90 !important;
    background: #071321 !important;
    border: 1px solid #1d74bb !important;
    border-radius: 12px !important;
    padding: 6px !important;
    box-shadow: 0 16px 32px #000d !important;
  }
  .mobile-aksi .aksi-menu[hidden] {
    display: none !important;
  }
  .mobile-aksi .aksi-menu button {
    display: block !important;
    width: 100% !important;
    height: 44px !important;
    margin: 0 0 4px 0 !important;
    text-align: left !important;
    padding: 0 14px !important;
    border-radius: 8px !important;
    border: 1px solid #1a3a5c !important;
    background: #0b192a !important;
    color: #e8f4ff !important;
    font-weight: 700 !important;
    font-size: 13px !important;
  }
  .mobile-aksi .aksi-menu button:last-child {
    margin-bottom: 0 !important;
  }
  #dbBanner.status-bar {
    display: flex !important;
  }
}

@media (max-width: 900px) {
  /* Running text lower (below logo with clearer gap) */
  .mobile-status {
    top: 56px !important;
    height: 34px !important;
  }
  .shell {
    padding-top: 0 !important;
  }
  /* Aksi menu forced visible when open */
  .mobile-aksi {
    z-index: 200 !important;
  }
  .mobile-aksi .aksi-menu {
    display: none;
  }
  .mobile-aksi .aksi-menu:not([hidden]) {
    display: flex !important;
    flex-direction: column !important;
    position: absolute !important;
    top: calc(100% + 6px) !important;
    left: 0 !important;
    right: 0 !important;
    z-index: 300 !important;
    background: #071321 !important;
    border: 1px solid #1d74bb !important;
    border-radius: 12px !important;
    padding: 6px !important;
  }
  .top.frame {
    overflow: visible !important;
    z-index: 100 !important;
  }
  .actions {
    overflow: visible !important;
    z-index: 100 !important;
  }
}

@media (max-width: 900px) {
  /* Status more down */
  .mobile-status {
    top: 52px !important;
    height: 36px !important;
  }
  .shell {
    padding-top: 108px !important;
  }
  .content {
    gap: 10px !important;
  }

  /* Actions grid: period | aksi on row1, menu full width row2 */
  .actions {
    display: grid !important;
    grid-template-columns: 1fr 1fr !important;
    grid-template-rows: auto auto auto !important;
    gap: 8px !important;
    overflow: visible !important;
    align-items: start !important;
  }
  .actions #period {
    grid-column: 1 !important;
    grid-row: 1 !important;
  }
  .actions .mobile-aksi {
    grid-column: 2 !important;
    grid-row: 1 !important;
    position: relative !important;
  }
  .actions .dmy-range {
    grid-column: 1 / -1 !important;
    grid-row: 2 !important;
  }
  /* Aksi menu: full width under both buttons, inside frame */
  .mobile-aksi .aksi-menu,
  .mobile-aksi .aksi-menu:not([hidden]) {
    position: static !important;
    top: auto !important;
    left: auto !important;
    right: auto !important;
    width: 100% !important;
    margin-top: 8px !important;
    display: none !important;
  }
  .mobile-aksi .aksi-menu:not([hidden]) {
    display: flex !important;
    flex-direction: column !important;
  }
  /* When open, menu should span full actions width */
  .actions:has(.aksi-menu:not([hidden])) .mobile-aksi {
    grid-column: 1 / -1 !important;
    grid-row: 1 / span 2 !important;
    display: grid !important;
    grid-template-columns: 1fr 1fr !important;
    gap: 8px !important;
  }
  .actions:has(.aksi-menu:not([hidden])) .mobile-aksi .btn-toggle {
    grid-column: 2 !important;
  }
  .actions:has(.aksi-menu:not([hidden])) .mobile-aksi .aksi-menu:not([hidden]) {
    grid-column: 1 / -1 !important;
  }
  /* Fallback without :has — menu full width of aksi column is weak; force static expand */
  .mobile-aksi .aksi-menu:not([hidden]) {
    position: static !important;
    width: 100% !important;
    box-shadow: none !important;
  }
}

@media (max-width: 900px) {
  .actions.aksi-open {
    grid-template-columns: 1fr 1fr !important;
  }
  .actions.aksi-open .mobile-aksi {
    grid-column: 1 / -1 !important;
    display: flex !important;
    flex-direction: column !important;
    gap: 8px !important;
  }
  .actions.aksi-open #period {
    grid-column: 1 !important;
  }
  /* Keep toggle on right: use subgrid-like flex row for toggle only */
  .actions.aksi-open .mobile-aksi .btn-toggle {
    align-self: flex-end !important;
    width: calc(50% - 4px) !important;
    margin-left: auto !important;
  }
  .actions.aksi-open .mobile-aksi .aksi-menu:not([hidden]) {
    display: flex !important;
    flex-direction: column !important;
    width: 100% !important;
    position: static !important;
  }
  .mobile-status { top: 52px !important; }
  .shell { padding-top: 0 !important; }
}

/* Fix: running text must sit fully ABOVE dashboard, not under frame */
@media (max-width: 900px) {
  .mobile-bar {
    height: 52px !important;
  }
  .mobile-status {
    display: flex !important;
    position: fixed !important;
    top: 52px !important;
    left: 0 !important;
    right: 0 !important;
    height: 34px !important;
    z-index: 19999 !important;
    background: #0a281c !important;
    border-bottom: 1px solid #2ecc71 !important;
  }
  /* logo 52 + status 34 + gap 10 = 96 minimum clear space */
  .shell {
    padding-top: 96px !important;
  }
  .content {
    padding-top: 0 !important;
    margin-top: 0 !important;
  }
  .top.frame {
    margin-top: 0 !important;
    position: relative !important;
    z-index: 1 !important;
  }
  /* status always above dashboard stacking */
  .mobile-status {
    z-index: 19999 !important;
  }
}

/* FINAL mobile spacing: status fully visible above dashboard */
@media (max-width: 900px) {
  body {
    padding-top: 0 !important;
  }
  .mobile-bar {
    position: fixed !important;
    top: 0 !important;
    height: 52px !important;
    z-index: 20000 !important;
  }
  .mobile-status {
    position: fixed !important;
    top: 52px !important;
    height: 36px !important;
    z-index: 19999 !important;
    display: flex !important;
  }
  .shell {
    padding-top: 120px !important; /* 52 + 36 + 32 gap */
    margin-top: 0 !important;
  }
  main.shell {
    padding-top: 120px !important;
  }
}

/* Aksi expands like Custom: full-width block under the top row, inside frame */
@media (max-width: 900px) {
  .actions {
    display: grid !important;
    grid-template-columns: 1fr 1fr !important;
    gap: 8px !important;
    overflow: visible !important;
  }
  .actions #period {
    grid-column: 1 !important;
    grid-row: 1 !important;
    width: 100% !important;
  }
  .actions .mobile-aksi {
    grid-column: 2 !important;
    grid-row: 1 !important;
    width: 100% !important;
    position: relative !important;
  }
  .actions .dmy-range {
    grid-column: 1 / -1 !important;
    grid-row: 2 !important;
  }
  /* When aksi open: menu takes full row below period+toggle */
  .actions.aksi-open {
    grid-template-columns: 1fr 1fr !important;
  }
  .actions.aksi-open #period {
    grid-column: 1 !important;
    grid-row: 1 !important;
  }
  .actions.aksi-open .mobile-aksi {
    grid-column: 1 / -1 !important;
    grid-row: 1 / span 2 !important;
    display: grid !important;
    grid-template-columns: 1fr 1fr !important;
    grid-template-rows: auto auto !important;
    gap: 8px !important;
  }
  .actions.aksi-open .mobile-aksi .btn-toggle {
    grid-column: 2 !important;
    grid-row: 1 !important;
    width: 100% !important;
    margin: 0 !important;
  }
  /* invisible spacer so toggle stays right - period is outside mobile-aksi */
  .actions.aksi-open .mobile-aksi .aksi-menu:not([hidden]) {
    grid-column: 1 / -1 !important;
    grid-row: 2 !important;
    display: flex !important;
    flex-direction: column !important;
    gap: 6px !important;
    width: 100% !important;
    position: static !important;
    margin: 0 !important;
    padding: 8px !important;
    background: rgba(6, 16, 29, 0.95) !important;
    border: 1px solid #1d74bb !important;
    border-radius: 10px !important;
    box-shadow: none !important;
  }
  .actions.aksi-open .mobile-aksi .aksi-menu button {
    width: 100% !important;
    height: 42px !important;
    border-radius: 8px !important;
  }
  /* Simpler approach without complex grid spanning */
  .actions.aksi-open .mobile-aksi {
    display: contents !important;
  }
  .actions.aksi-open .btn-toggle {
    grid-column: 2 !important;
    grid-row: 1 !important;
  }
  .actions.aksi-open .aksi-menu:not([hidden]) {
    grid-column: 1 / -1 !important;
    grid-row: 3 !important;
    display: flex !important;
    flex-direction: column !important;
    gap: 6px !important;
    position: static !important;
    width: 100% !important;
    padding: 8px !important;
    background: rgba(6, 16, 29, 0.95) !important;
    border: 1px solid #1d74bb !important;
    border-radius: 10px !important;
  }
  .actions.aksi-open .dmy-range {
    grid-row: 2 !important;
  }
}
@media (max-width: 900px) {
  .actions > .aksi-menu {
    grid-column: 1 / -1 !important;
  }
  .actions > .aksi-menu[hidden] {
    display: none !important;
  }
  .actions > .aksi-menu:not([hidden]) {
    display: flex !important;
    flex-direction: column !important;
    gap: 6px !important;
    width: 100% !important;
    position: static !important;
    padding: 8px !important;
    margin: 0 !important;
    background: rgba(6, 16, 29, 0.95) !important;
    border: 1px solid #1d74bb !important;
    border-radius: 10px !important;
    box-shadow: none !important;
  }
  .actions > .aksi-menu button {
    width: 100% !important;
    height: 42px !important;
    text-align: center !important;
    border-radius: 8px !important;
    border: 1px solid #1a3a5c !important;
    background: #0b192a !important;
    color: #e8f4ff !important;
    font-weight: 700 !important;
  }
  .actions > .aksi-menu #export {
    background: linear-gradient(#0786ff, #055bb0) !important;
    border-color: #4bcaff !important;
    color: #fff !important;
  }
}

@media (max-width: 900px) {
  .top.frame {
    overflow: visible !important;
    height: auto !important;
    min-height: auto !important;
  }
  .top.frame:after {
    /* keep decorative border following expanded height */
    inset: 5px !important;
  }
  .actions {
    display: grid !important;
    grid-template-columns: 1fr 1fr !important;
    gap: 8px !important;
    width: 100% !important;
    overflow: visible !important;
  }
  .actions #period {
    grid-column: 1 !important;
    grid-row: 1 !important;
    display: block !important;
    visibility: visible !important;
    opacity: 1 !important;
    width: 100% !important;
    height: 42px !important;
  }
  .actions .mobile-aksi {
    grid-column: 2 !important;
    grid-row: 1 !important;
    display: block !important;
    width: 100% !important;
  }
  .actions .mobile-aksi .btn-toggle {
    width: 100% !important;
    height: 42px !important;
  }
  .actions .dmy-range {
    grid-column: 1 / -1 !important;
  }
  /* THE KEY: menu is grid item full width under row 1 — inside actions, inside frame */
  .actions > #actionPanel.aksi-menu,
  .actions > .aksi-menu {
    grid-column: 1 / -1 !important;
    grid-row: auto !important;
  }
  .actions > .aksi-menu[hidden] {
    display: none !important;
  }
  .actions.aksi-open > .aksi-menu,
  .actions > .aksi-menu:not([hidden]) {
    display: flex !important;
    flex-direction: column !important;
    gap: 6px !important;
    position: static !important;
    width: 100% !important;
    max-width: 100% !important;
    margin: 0 !important;
    padding: 8px !important;
    box-sizing: border-box !important;
    background: rgba(6, 16, 29, 0.98) !important;
    border: 1px solid #1d74bb !important;
    border-radius: 10px !important;
    box-shadow: none !important;
    z-index: 1 !important;
  }
  .actions > .aksi-menu button {
    display: block !important;
    width: 100% !important;
    height: 42px !important;
    margin: 0 !important;
    box-sizing: border-box !important;
    border-radius: 8px !important;
    border: 1px solid #1a3a5c !important;
    background: #0b192a !important;
    color: #e8f4ff !important;
    font-weight: 700 !important;
    text-align: center !important;
  }
  .actions > .aksi-menu #export {
    background: linear-gradient(#0786ff, #055bb0) !important;
    border-color: #4bcaff !important;
    color: #fff !important;
  }
  /* kill absolute positioning leftovers */
  .mobile-aksi .aksi-menu {
    position: static !important;
  }
  .actions.aksi-open .mobile-aksi {
    display: block !important;
    grid-column: 2 !important;
    grid-row: 1 !important;
  }
}

/* ===== FINAL mobile Aksi = same pattern as Custom ===== */
@media (max-width: 900px) {
  .desk-actions { display: none !important; }

  .top.frame {
    overflow: visible !important;
    height: auto !important;
  }

  .actions {
    display: flex !important;
    flex-direction: row !important;
    flex-wrap: wrap !important;
    align-items: center !important;
    gap: 8px !important;
    width: 100% !important;
  }

  .actions #period {
    flex: 1 1 calc(50% - 4px) !important;
    min-width: 0 !important;
    height: 42px !important;
    display: block !important;
    visibility: visible !important;
  }

  .actions #actionsToggle,
  .actions .mobile-only-btn {
    flex: 1 1 calc(50% - 4px) !important;
    min-width: 0 !important;
    height: 42px !important;
    display: block !important;
  }

  /* Custom block & Aksi menu: full width, like each other */
  .actions .dmy-range,
  .actions #actionPanel.aksi-menu,
  .actions .aksi-menu {
    flex: 1 1 100% !important;
    width: 100% !important;
    order: 10 !important;
  }

  .actions .dmy-range[hidden],
  .actions .aksi-menu[hidden] {
    display: none !important;
  }

  .actions .dmy-range:not([hidden]),
  .actions .aksi-menu:not([hidden]) {
    display: flex !important;
    flex-direction: column !important;
    gap: 6px !important;
    position: static !important;
    padding: 8px !important;
    box-sizing: border-box !important;
    background: rgba(6, 16, 29, 0.95) !important;
    border: 1px solid #1d74bb !important;
    border-radius: 10px !important;
    box-shadow: none !important;
  }

  .actions .aksi-menu button {
    width: 100% !important;
    height: 42px !important;
    border-radius: 8px !important;
    border: 1px solid #1a3a5c !important;
    background: #0b192a !important;
    color: #e8f4ff !important;
    font-weight: 700 !important;
  }
  .actions .aksi-menu #export {
    background: linear-gradient(#0786ff, #055bb0) !important;
    border-color: #4bcaff !important;
    color: #fff !important;
  }
}

@media (min-width: 901px) {
  .mobile-only-btn { display: none !important; }
  .actions .aksi-menu { display: none !important; }
  .desk-actions { display: flex !important; }
}

/* CRITICAL: frame must grow with Aksi/Custom content; KPIs stay below */
@media (max-width: 900px) {
  header.top.frame,
  .top.frame {
    display: flex !important;
    flex-direction: column !important;
    height: auto !important;
    min-height: 0 !important;
    max-height: none !important;
    overflow: visible !important;
    position: relative !important;
    z-index: 5 !important;
    padding-bottom: 14px !important;
  }
  /* decorative inner border follows expanded box */
  .top.frame:after {
    position: absolute !important;
    inset: 5px !important;
    height: auto !important;
    bottom: 5px !important;
    top: 5px !important;
    pointer-events: none !important;
  }
  .actions {
    position: relative !important;
    z-index: 6 !important;
    width: 100% !important;
  }
  .actions .aksi-menu:not([hidden]),
  .actions .dmy-range:not([hidden]) {
    position: relative !important;
    z-index: 6 !important;
    margin-top: 0 !important;
  }
  /* KPI cards must stay under header in normal flow */
  .kpis, .kpi, .content > .kpis {
    position: relative !important;
    z-index: 1 !important;
    margin-top: 0 !important;
  }
  .content {
    display: flex !important;
    flex-direction: column !important;
    gap: 10px !important;
  }
}
@media (max-width: 900px) {
  .actions {
    overflow: visible !important;
    height: auto !important;
  }
  .actions > * {
    height: auto !important;
    min-height: 0 !important;
  }
  .actions #period,
  .actions #actionsToggle,
  .actions .mobile-only-btn {
    height: 42px !important;
  }
  .actions .aksi-menu:not([hidden]) {
    height: auto !important;
    min-height: auto !important;
    max-height: none !important;
  }
  .actions .aksi-menu button {
    height: 42px !important;
  }
  .actions .dmy-range:not([hidden]) {
    height: auto !important;
  }
}

/* Larger mobile logo (user request) */
@media (max-width: 900px) {
  .mobile-bar {
    height: 76px !important;
    min-height: 76px !important;
    padding: 6px 12px !important;
    align-items: center !important;
  }
  .mobile-bar .mobile-logo,
  .mobile-bar img.mobile-logo,
  .mobile-bar img {
    height: 72px !important;
    max-height: 72px !important;
    width: auto !important;
    max-width: 220px !important;
    object-fit: contain !important;
    filter: drop-shadow(0 0 14px #0786ff) !important;
  }
  .mobile-bar .menu-toggle {
    width: 48px !important;
    height: 48px !important;
  }
}

/* Align running text under enlarged mobile logo */
@media (max-width: 900px) {
  .mobile-bar {
    height: 76px !important;
    min-height: 76px !important;
    position: fixed !important;
    top: 0 !important;
    left: 0 !important;
    right: 0 !important;
    z-index: 20000 !important;
  }
  .mobile-status {
    display: flex !important;
    position: fixed !important;
    top: 76px !important;
    left: 0 !important;
    right: 0 !important;
    height: 36px !important;
    min-height: 36px !important;
    z-index: 19999 !important;
    align-items: center !important;
    overflow: hidden !important;
    border-bottom: 1px solid #1f6b4a !important;
    background: rgba(8, 40, 28, 0.96) !important;
  }
  .mobile-status .run-track {
    display: flex !important;
    width: max-content !important;
    animation: bm168-marquee 18s linear infinite !important;
    white-space: nowrap !important;
  }
  .mobile-status .run-item {
    padding: 0 36px !important;
    font-size: 12px !important;
    font-weight: 700 !important;
    line-height: 36px !important;
    color: #3deb75 !important;
    text-shadow: 0 0 8px #3deb7588 !important;
  }
  .mobile-status.is-error {
    border-bottom-color: #a33 !important;
    background: rgba(60, 12, 12, 0.96) !important;
  }
  .mobile-status.is-error .run-item {
    color: #ff6b6b !important;
  }
  .shell {
    padding-top: 120px !important;
  }
}