.audit-chart { display: none; }
.topbar #bell { min-width: 44px; min-height: 44px; cursor: pointer; }
.bell-wrap #bell-pop[hidden] { display: none; }
.bell-wrap #bell-pop:not([hidden]) {
  display: block;
  position: absolute;
  top: 100%;
  right: 0;
  width: min(300px, calc(100vw - 24px));
  z-index: 75;
  visibility: visible;
  opacity: 1;
  transform: none;
}
.bell-card .bp-f { display: flex; align-items: center; min-height: 44px; }
.mobile-profile-logout { margin: 20px 16px; min-height: 44px; }
#payment-help.needs-input { color: var(--red); }
#desktop-submit-slot #pay { width: 100%; min-height: 44px; }
.login-password-toggle { min-height: 44px; margin: 0 0 12px; }
label[hidden] { display: none !important; }
.audit-product-stock .badge.green { color: #065f46 !important; background: #dff6ec !important; }
.audit-product-stock .badge.amber { color: #784700 !important; background: #fff0d1 !important; }
.audit-product-stock .badge.red { color: #991b1b !important; background: #ffe3e0 !important; }

@media screen and (max-width:1100px) {
  body[data-checkout-step=bayar] .mobile-checkout-bar { display: none; }
  body[data-checkout-step=bayar] .cart {
    max-height: none;
    overflow: visible;
  }
  body[data-page=kasir] #content {
    padding-bottom: calc(var(--checkout-reserve, 0px) + var(--mobile-nav-space, 0px) + 20px) !important;
  }
}
@media screen and (max-width:860px) {
  body:not([data-page=kasir]) #content { padding-bottom: calc(var(--mobile-nav-space) + 20px) !important; }
  .topbar #logout-btn { display: none; }
  body[data-page=index] .task-grid { display: none; }
  #chart > .chart { display: none; }
  #chart > .audit-chart { display: grid; gap: 8px; padding: 0; margin: 0; list-style: none; font-size: 13px; }
  .audit-chart li { display: grid; grid-template-columns: minmax(52px, auto) minmax(24px, 1fr) auto; align-items: center; gap: 8px; }
  .audit-chart meter { width: 100%; height: 14px; }
  .audit-chart b { white-space: nowrap; }
  body[data-page=laporan] #sumrow { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; }
  body[data-page=laporan] #sumrow b { white-space: nowrap; font-size: clamp(13px, 3.8vw, 18px) !important; }
  .audit-report-table, .audit-report-table tbody { display: block; min-width: 0; width: 100%; }
  .audit-report-table thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); }
  .audit-report-table tr { display: block; border-bottom: 1px solid var(--line); padding: 8px 12px; }
  .audit-report-table td { display: block; border: 0; font-size: 13px; }
  .audit-report-table td[data-label] { display: flex; justify-content: space-between; align-items: baseline; gap: 8px; white-space: nowrap; }
  .audit-report-table td[data-label]::before { content: attr(data-label); color: var(--mut); white-space: normal; text-align: left; }
  .audit-history > summary, .audit-stock-record > summary { min-height: 52px; cursor: pointer; }
  .record-card.audit-history > summary { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 2px 8px; align-items: center; }
  .audit-history > summary .badge { grid-column: 2; grid-row: 2; }
  .audit-history > summary > strong { grid-column: 2; grid-row: 1; white-space: nowrap; }
  .audit-history > summary > div { grid-row: 1 / span 2; }
  .audit-stock-record > summary { padding-block: 10px; }
  body :is(.record-actions .btn, .pager .btn, .card-h .btn, .flow-steps button, .chip, .pay-m button, .photo-card .btn) { min-height: 44px; }
  .record-card small, .record-card .record-kv { font-size: 13px; }
  .shift-state { padding: 6px 10px; font-size: 13px; }
  body[data-page=kasir] .pcard { min-height: 76px; }
  body[data-page=kasir] .pcard img { max-height: 56px; }
  body[data-page=kasir] .checkout-summary { margin-bottom: 4px; }
  body[data-page=login] .lg-hero { min-height: 0; padding: 16px; }
  body[data-page=login] .lg-hero h2, body[data-page=login] .lg-hero p,
  body[data-page=login] .lg-hero .lg-feats, body[data-page=login] .lg-eyebrow { display: none; }
}
@media screen and (max-width:600px) {
  #attention-list { display: grid; grid-template-columns: 1fr; gap: 0; padding: 0 12px 8px; }
  body[data-page=index] #attention-list .attention-item {
    grid-template-columns: 30px minmax(0,1fr) auto;
    min-height: 44px; padding: 6px 2px;
    border: 0; border-bottom: 1px solid var(--line); border-radius: 0;
  }
  #attention-list .attention-item > b { grid-row: auto; min-width: 0; font-size: 13px; padding: 3px; }
  #attention-list .attention-item > span { display: none; }
  #attention-list .attention-item::after { content: '›'; font-size: 18px; color: var(--mut); }
  .simple-product-list { padding: 8px 0; gap: 0; }
  .audit-product-row {
    display: grid; grid-template-columns: 40px minmax(0, 1fr) auto;
    align-items: center; gap: 8px;
    width: 100%; min-height: 66px; padding: 6px 10px;
    border: 0; border-bottom: 1px solid var(--line);
    background: var(--card); color: var(--ink); text-align: left; font: inherit;
  }
  button.audit-product-row { cursor: pointer; }
  .audit-product-row img { width: 40px; height: 40px; object-fit: contain; }
  .audit-product-title, .audit-product-stock { display: grid; min-width: 0; gap: 3px; font-size: 12px; }
  .audit-product-title strong { font-size: 14px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .audit-product-title > span { color: var(--mut); }
  .audit-product-stock { text-align: right; justify-items: end; }
  body[data-page=produk] .toolbar > select { flex: 1 1 100%; width: 100%; min-height: 44px; }
}
@media screen and (max-width:600px) {
  .audit-settings-panel {
    background: var(--card);
    border: 1px solid var(--line);
    border-radius: 12px;
    margin-bottom: 8px;
  }
  .audit-settings-panel > summary { padding: 14px; min-height: 48px; font-weight: 700; cursor: pointer; }
  .audit-settings-panel > .card { border: 0; box-shadow: none; margin: 0 !important; }
  .audit-settings-panel > .card > .card-h { display: none; }
  body[data-page=pengaturan] .grid.g2 { gap: 0; }
}

.payment-back { display: none; }
.stock-menu { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; }
.stock-menu .btn, .stock-back, .shift-indicator { min-height: 44px; }
.stock-back { margin-bottom: 14px; }
#stock-menu[hidden], #stock-content[hidden], #stock-in[hidden], #stock-history[hidden] { display: none !important; }
html[data-theme] .shift-state a.shift-indicator[data-active="false"] {
  background: #ffe3e0 !important;
  color: #991b1b !important;
  border-color: #d98b85;
}
html[data-theme] .shift-state a.shift-indicator[data-active="true"] {
  background: #dff6ec !important;
  color: #065f46 !important;
  border-color: #78bb9e;
}
@media screen and (max-width:1100px) {
  body[data-checkout-step=bayar] .payment-back { display: inline-flex; min-height: 44px; }
}
@media screen and (max-width:600px) {
  .stock-menu { grid-template-columns: 1fr; }
}

@media screen and (min-width:861px) {
  body[data-page=stok] #stock-menu,
  body[data-page=stok] #stock-back { display: none; }
  body[data-page=stok] #stock-content[hidden],
  body[data-page=stok] #stock-history[hidden] { display: block !important; }
  body[data-page=stok] #stock-in[hidden] { display: grid !important; }
}

body[data-page=kasir] .mobile-flow-head { display: block; }
body[data-page=kasir] .flow-heading {
  display: flex;
  align-items: center;
  justify-content: flex-start;
  flex-wrap: wrap;
  gap: 8px 12px;
  margin-bottom: 8px;
}
body[data-page=kasir] .flow-heading .shift-state { margin: 0; padding: 0; }
.shift-indicator::before {
  content: "";
  width: 28px;
  height: 16px;
  flex: none;
  border-radius: 12px;
  background: radial-gradient(circle at 8px center, #fff 5px, transparent 5.5px), currentColor;
}
.shift-indicator[data-active="true"]::before {
  background: radial-gradient(circle at 20px center, #fff 5px, transparent 5.5px), currentColor;
}