.active-company-badge {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  max-width: 220px;
  min-width: 0;
  padding: 6px 10px;
  border: 1px solid #dbe5ef;
  border-radius: 999px;
  background: #f8fafc;
  color: #475569;
  font-size: 0.78rem;
  font-weight: 700;
  line-height: 1;
  white-space: nowrap;
}

.active-company-badge span {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
}

@media (max-width: 768px) {
  :root {
    --mobile-header-height: 62px;
    --mobile-bottom-height: 78px;
    --mobile-blue: #1976d2;
    --mobile-blue-dark: #125ca8;
    --mobile-background: #f4f6f9;
    --mobile-border: #e5e9ef;
    --mobile-text: #182230;
    --mobile-muted: #64748b;
    --mobile-radius: 16px;
  }

  html,
  body,
  #app {
    width: 100%;
    min-height: 100%;
    overflow-x: hidden;
  }

  html {
    background: #ffffff;
    overscroll-behavior-y: auto;
  }

  body {
    margin: 0;
    min-width: 320px;
    background: var(--mobile-background);
    color: var(--mobile-text);
    -webkit-tap-highlight-color: transparent;
    -webkit-text-size-adjust: 100%;
    overscroll-behavior-y: auto;
  }

  body * {
    box-sizing: border-box;
  }

  /* Mobile-first global containment: no page/component may exceed the viewport width. */
  body.mobile-native-app .layout-wrapper,
  body.mobile-native-app .layout-main-container,
  body.mobile-native-app .layout-main,
  body.mobile-native-app main,
  body.mobile-native-app .card,
  body.mobile-native-app .surface-card,
  body.mobile-native-app .p-card,
  body.mobile-native-app .p-card-body,
  body.mobile-native-app .p-card-content,
  body.mobile-native-app .p-panel,
  body.mobile-native-app .p-panel-content,
  body.mobile-native-app .p-datatable,
  body.mobile-native-app .p-datatable-wrapper,
  body.mobile-native-app form,
  body.mobile-native-app .grid,
  body.mobile-native-app .flex {
    max-width: 100% !important;
    min-width: 0 !important;
  }

  body.mobile-native-app img,
  body.mobile-native-app svg,
  body.mobile-native-app canvas,
  body.mobile-native-app video,
  body.mobile-native-app iframe {
    max-width: 100% !important;
  }

  body.mobile-native-app table,
  body.mobile-native-app th,
  body.mobile-native-app td {
    overflow-wrap: anywhere !important;
    word-break: break-word !important;
  }

  button,
  a,
  input,
  select,
  textarea {
    touch-action: manipulation;
  }

  .layout-wrapper {
    min-height: 100dvh !important;
    background: var(--mobile-background) !important;
  }

  .layout-main-container {
    min-height: 100dvh !important;
    margin-left: 0 !important;
    padding: calc(var(--mobile-header-height) + env(safe-area-inset-top) + 12px) 12px calc(var(--mobile-bottom-height) + env(safe-area-inset-bottom) + 22px) !important;
    background: var(--mobile-background) !important;
  }

  .layout-main {
    width: 100%;
    max-width: 100%;
    padding: 0 !important;
  }

  .layout-topbar {
    position: fixed !important;
    top: env(safe-area-inset-top) !important;
    left: 0 !important;
    right: 0 !important;
    width: 100% !important;
    height: var(--mobile-header-height) !important;
    padding: 0 10px !important;
    margin: 0 !important;
    border: 0 !important;
    border-bottom: 1px solid var(--mobile-border) !important;
    border-radius: 0 !important;
    background: linear-gradient(135deg, #f9fcff 0%, #f3fafb 58%, #f8f6fc 100%) !important;
    box-shadow: 0 4px 16px rgba(39, 73, 101, 0.09) !important;
    color: var(--mobile-text) !important;
    z-index: 1100 !important;
  }

  .layout-topbar::before {
    content: "";
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    height: env(safe-area-inset-top);
    background: linear-gradient(135deg, #f9fcff 0%, #f3fafb 58%, #f8f6fc 100%);
  }

  .layout-topbar,
  .layout-topbar a,
  .layout-topbar button,
  .layout-topbar i,
  .layout-topbar span {
    color: var(--mobile-text) !important;
  }

  .layout-topbar .layout-topbar-logo-container {
    display: flex !important;
    align-items: center !important;
    flex: 1;
    min-width: 0;
    width: auto !important;
    gap: 5px;
  }

  .layout-topbar .layout-topbar-logo {
    display: flex !important;
    align-items: center !important;
    min-width: 0;
    max-width: calc(100vw - 180px);
    overflow: hidden;
    font-size: 1rem !important;
    font-weight: 700 !important;
    text-decoration: none;
  }

  .layout-topbar .layout-topbar-logo img {
    height: 38px !important;
    width: auto !important;
    max-width: 128px !important;
    object-fit: contain !important;
    filter: none !important;
    flex-shrink: 0;
  }

  .layout-topbar .layout-topbar-logo span {
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
  }

  .layout-topbar .layout-topbar-actions {
    display: flex !important;
    align-items: center !important;
    gap: 2px !important;
    margin-left: auto;
  }

  .layout-topbar .active-company-badge {
    max-width: 112px !important;
    height: 32px !important;
    margin-right: 3px !important;
    padding: 0 8px !important;
    gap: 4px !important;
    border-color: #dbe5ef !important;
    background: #f8fafc !important;
    color: #475569 !important;
    font-size: 10px !important;
    flex: 0 1 auto !important;
  }

  .layout-topbar .active-company-badge i {
    font-size: 11px !important;
    flex: 0 0 auto !important;
  }

  .layout-topbar .layout-config-menu,
  .layout-topbar .layout-config-button,
  .layout-topbar [class*="theme-button"],
  .layout-topbar [class*="config-button"],
  .mobile-theme-control,
  .config-panel,
  [class*="theme-panel"],
  [class*="config-panel"] {
    display: none !important;
  }

  .layout-topbar .layout-menu-button,
  .layout-topbar .layout-topbar-action,
  .layout-topbar .layout-topbar-menu-button {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: 42px !important;
    min-width: 42px !important;
    height: 42px !important;
    padding: 0 !important;
    border: 0 !important;
    border-radius: 12px !important;
    background: transparent !important;
  }

  .layout-topbar .layout-topbar-action.text-red-500 {
    display: inline-flex !important;
    width: auto !important;
    min-width: 42px !important;
    padding: 0 10px !important;
    color: #dc2626 !important;
    background: #fff1f2 !important;
  }

  .layout-topbar .layout-topbar-action.text-red-500,
  .layout-topbar .layout-topbar-action.text-red-500 i,
  .layout-topbar .layout-topbar-action.text-red-500 span {
    color: #dc2626 !important;
  }

  .layout-topbar .layout-topbar-action.text-red-500 span {
    display: none;
  }

  .layout-topbar .layout-topbar-menu {
    top: calc(var(--mobile-header-height) + env(safe-area-inset-top) - 2px) !important;
    right: 10px !important;
    left: auto !important;
    width: 210px !important;
    min-width: 210px !important;
    max-width: calc(100vw - 20px) !important;
    padding: 8px !important;
    border: 1px solid var(--mobile-border) !important;
    border-radius: 16px !important;
    background: #fff !important;
    box-shadow: 0 18px 45px rgba(15, 23, 42, 0.16) !important;
    overflow: visible !important;
    isolation: isolate;
    z-index: 1300 !important;
  }

  .layout-topbar .layout-topbar-menu > ul,
  .layout-topbar .layout-topbar-menu > div,
  .layout-topbar .layout-topbar-menu .layout-topbar-menu-content {
    width: 100% !important;
    margin: 0 !important;
    padding: 0 !important;
  }

  .layout-topbar .layout-topbar-menu .layout-topbar-action,
  .layout-topbar .layout-topbar-menu button,
  .layout-topbar .layout-topbar-menu a {
    display: flex !important;
    align-items: center !important;
    justify-content: flex-start !important;
    gap: 12px !important;
    width: 100% !important;
    min-width: 0 !important;
    min-height: 48px !important;
    margin: 0 !important;
    padding: 0 13px !important;
    border: 0 !important;
    border-radius: 11px !important;
    background: transparent !important;
    box-shadow: none !important;
    color: #263449 !important;
    font-size: 15px !important;
    font-weight: 500 !important;
    line-height: 1 !important;
    text-align: left !important;
    white-space: nowrap !important;
  }

  .layout-topbar .layout-topbar-menu .layout-topbar-action + .layout-topbar-action,
  .layout-topbar .layout-topbar-menu button + button,
  .layout-topbar .layout-topbar-menu a + a {
    margin-top: 2px !important;
  }

  .layout-topbar .layout-topbar-menu .layout-topbar-action i,
  .layout-topbar .layout-topbar-menu button i,
  .layout-topbar .layout-topbar-menu a i {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    flex: 0 0 22px !important;
    width: 22px !important;
    height: 22px !important;
    margin: 0 !important;
    color: #526174 !important;
    font-size: 18px !important;
  }

  .layout-topbar .layout-topbar-menu .layout-topbar-action span,
  .layout-topbar .layout-topbar-menu button span,
  .layout-topbar .layout-topbar-menu a span,
  .layout-topbar .layout-topbar-menu .mobile-menu-label {
    display: inline !important;
    flex: 1 1 auto !important;
    width: auto !important;
    margin: 0 !important;
    color: inherit !important;
    font-size: inherit !important;
    font-weight: inherit !important;
  }

  .layout-topbar .layout-topbar-menu .mobile-company-item:hover,
  .layout-topbar .layout-topbar-menu .mobile-company-item:active {
    background: #f1f5f9 !important;
  }

  .layout-topbar .layout-topbar-menu .mobile-logout-item,
  .layout-topbar .layout-topbar-menu .mobile-logout-item i,
  .layout-topbar .layout-topbar-menu .mobile-logout-item span,
  .layout-topbar .layout-topbar-menu .mobile-logout-item .mobile-menu-label {
    color: #dc2626 !important;
  }

  .layout-topbar .layout-topbar-menu .mobile-logout-item:hover,
  .layout-topbar .layout-topbar-menu .mobile-logout-item:active {
    background: #fff1f2 !important;
  }

  .layout-sidebar {
    top: 0 !important;
    left: 0 !important;
    width: min(86vw, 340px) !important;
    height: 100dvh !important;
    padding: calc(18px + env(safe-area-inset-top)) 14px calc(20px + env(safe-area-inset-bottom)) !important;
    border: 0 !important;
    border-radius: 0 24px 24px 0 !important;
    background: #fff !important;
    box-shadow: 14px 0 40px rgba(15, 23, 42, 0.18) !important;
    transform: translateX(-105%);
    overflow-y: auto !important;
    -webkit-overflow-scrolling: touch;
    z-index: 1201 !important;
  }

  .layout-mobile-active .layout-sidebar {
    transform: translateX(0) !important;
  }

  .layout-mask {
    z-index: 1200 !important;
    background: rgba(15, 23, 42, 0.42) !important;
    backdrop-filter: blur(2px);
    -webkit-backdrop-filter: blur(2px);
  }

  .layout-menu .layout-root-menuitem > .layout-menuitem-root-text {
    margin: 17px 10px 7px !important;
    color: var(--mobile-muted) !important;
    font-size: 0.72rem !important;
    font-weight: 700 !important;
    letter-spacing: 0.07em;
  }

  .layout-menu ul a {
    min-height: 48px;
    margin: 3px 0;
    padding: 11px 13px !important;
    border-radius: 13px !important;
    font-size: 0.94rem;
    font-weight: 600;
  }

  .layout-menu ul a.active-route {
    background: #eaf3fd !important;
    color: var(--mobile-blue) !important;
  }

  .layout-menu ul a .layout-menuitem-icon {
    margin-right: 11px !important;
    font-size: 1.1rem;
  }

  .card,
  .surface-card,
  .p-card {
    max-width: 100%;
    border: 1px solid var(--mobile-border) !important;
    border-radius: var(--mobile-radius) !important;
    background: #fff;
    box-shadow: 0 3px 14px rgba(15, 23, 42, 0.055) !important;
  }

  .card {
    margin-bottom: 14px !important;
    padding: 14px !important;
  }

  /* Dashboard mobile: struktur khusus berdasarkan komponen dashboard asli. */
  body.mobile-dashboard-page .layout-main-container {
    padding-right: 10px !important;
    padding-left: 10px !important;
  }

  body.mobile-dashboard-page .mobile-dashboard-root {
    width: 100% !important;
    padding: 0 !important;
    gap: 12px !important;
  }

  /* Dashboard title has no private visual source; it uses .laundry-page-heading only. */

  body.mobile-dashboard-page .mobile-dashboard-grid {
    display: grid !important;
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    width: 100% !important;
    margin: 0 !important;
    gap: 9px !important;
  }

  body.mobile-dashboard-page .mobile-dashboard-grid > * {
    width: auto !important;
    min-width: 0 !important;
    max-width: 100% !important;
    padding: 0 !important;
  }

  body.mobile-dashboard-page .mobile-dashboard-metric {
    grid-column: auto !important;
  }

  body.mobile-dashboard-page .mobile-dashboard-section {
    grid-column: 1 / -1 !important;
  }

  body.mobile-dashboard-page .mobile-dashboard-grid .card,
  body.mobile-dashboard-page .mobile-dashboard-grid .surface-card,
  body.mobile-dashboard-page .mobile-dashboard-grid .p-card {
    width: 100% !important;
    margin: 0 !important;
    border: 1px solid #e6ebf1 !important;
    border-radius: 15px !important;
    background: #fff !important;
    box-shadow: 0 3px 12px rgba(15, 23, 42, 0.05) !important;
  }

  body.mobile-dashboard-page .mobile-dashboard-metric .card,
  body.mobile-dashboard-page .mobile-dashboard-metric .surface-card,
  body.mobile-dashboard-page .mobile-dashboard-metric .p-card {
    min-height: 96px !important;
    height: 100% !important;
    padding: 11px !important;
    overflow: hidden !important;
  }

  body.mobile-dashboard-page .mobile-dashboard-metric .flex.justify-between {
    align-items: flex-start !important;
    gap: 7px !important;
    margin-bottom: 0 !important;
  }

  body.mobile-dashboard-page .mobile-dashboard-metric .font-medium.text-xl {
    display: block !important;
    max-width: 100% !important;
    overflow: hidden !important;
    color: #667085 !important;
    font-size: 0.69rem !important;
    font-weight: 700 !important;
    line-height: 1.25 !important;
    white-space: normal !important;
  }

  body.mobile-dashboard-page .mobile-dashboard-metric .text-3xl,
  body.mobile-dashboard-page .mobile-dashboard-metric .text-2xl,
  body.mobile-dashboard-page .mobile-dashboard-metric .text-xl:not(.font-medium) {
    margin-top: 7px !important;
    color: #172033 !important;
    font-size: 1.28rem !important;
    font-weight: 800 !important;
    line-height: 1 !important;
    letter-spacing: -0.035em !important;
  }

  body.mobile-dashboard-page .mobile-dashboard-metric [class*="rounded-border"],
  body.mobile-dashboard-page .mobile-dashboard-metric [class*="rounded-full"],
  body.mobile-dashboard-page .mobile-dashboard-metric [class*="border-circle"] {
    width: 34px !important;
    min-width: 34px !important;
    height: 34px !important;
    border-radius: 10px !important;
  }

  body.mobile-dashboard-page .mobile-dashboard-metric i {
    font-size: 0.98rem !important;
  }

  body.mobile-dashboard-page .mobile-dashboard-section .card,
  body.mobile-dashboard-page .mobile-dashboard-section .surface-card,
  body.mobile-dashboard-page .mobile-dashboard-section .p-card {
    padding: 12px !important;
  }

  body.mobile-dashboard-page .mobile-dashboard-section .font-semibold.text-xl {
    margin: 0 !important;
    font-size: 0.94rem !important;
    line-height: 1.3 !important;
  }

  body.mobile-dashboard-page .mobile-dashboard-section .p-datatable-wrapper {
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    margin-top: 8px !important;
    border: 1px solid #edf0f4 !important;
    border-radius: 12px !important;
    overflow-x: hidden !important;
  }

  body.mobile-dashboard-page .mobile-dashboard-section .p-datatable-table {
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
  }

  body.mobile-dashboard-page .mobile-dashboard-section .p-paginator {
    padding: 8px 2px 0 !important;
  }

  body.mobile-dashboard-page .mobile-dashboard-section .p-button {
    width: 38px !important;
    min-width: 38px !important;
    height: 38px !important;
    min-height: 38px !important;
    padding: 0 !important;
  }

  body.mobile-dashboard-page .mobile-dashboard-notifications ul,
  body.mobile-dashboard-page .mobile-dashboard-notifications .list-none {
    margin: 0 !important;
    padding: 0 !important;
  }

  body.mobile-dashboard-page .mobile-dashboard-notifications li {
    margin-bottom: 9px !important;
    padding-bottom: 9px !important;
  }

  /* Grid kartu ringkas: dua kolom hanya untuk kartu pendek tanpa tabel, grafik, atau form. */
  body.mobile-native-app .mobile-compact-card-grid {
    display: grid !important;
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    align-items: stretch !important;
    gap: 9px !important;
    margin: 0 0 12px !important;
  }

  body.mobile-native-app .mobile-compact-card-grid > [class*="col-"],
  body.mobile-native-app .mobile-compact-card-grid > div {
    width: auto !important;
    min-width: 0 !important;
    padding: 0 !important;
  }

  body.mobile-native-app .mobile-compact-card-grid .card,
  body.mobile-native-app .mobile-compact-card-grid .surface-card,
  body.mobile-native-app .mobile-compact-card-grid .p-card {
    height: 100% !important;
    min-height: 92px !important;
    margin: 0 !important;
    padding: 11px !important;
    border-radius: 15px !important;
  }

  body.mobile-native-app .mobile-compact-card-grid h2,
  body.mobile-native-app .mobile-compact-card-grid h3,
  body.mobile-native-app .mobile-compact-card-grid h4 {
    margin-bottom: 5px !important;
    font-size: 0.86rem !important;
    line-height: 1.25 !important;
  }

  body.mobile-native-app .mobile-compact-card-grid .text-3xl,
  body.mobile-native-app .mobile-compact-card-grid .text-2xl,
  body.mobile-native-app .mobile-compact-card-grid .text-xl {
    font-size: 1.18rem !important;
    line-height: 1.15 !important;
  }

  /* Halaman transaksi/POS disusun vertikal agar nyaman digunakan dengan satu tangan. */
  body.mobile-transaction-page .layout-main-container {
    padding-right: 10px !important;
    padding-left: 10px !important;
  }

  body.mobile-transaction-page .layout-main {
    width: 100% !important;
    max-width: 100% !important;
  }

  body.mobile-transaction-page .layout-main > .grid,
  body.mobile-transaction-page .layout-main .grid {
    display: flex !important;
    flex-direction: column !important;
    width: 100% !important;
    margin: 0 !important;
    gap: 11px !important;
  }

  body.mobile-transaction-page .layout-main .grid > [class*="col-"] {
    flex: 0 0 auto !important;
    width: 100% !important;
    max-width: 100% !important;
    padding: 0 !important;
  }

  body.mobile-transaction-page .card,
  body.mobile-transaction-page .surface-card,
  body.mobile-transaction-page .p-card,
  body.mobile-transaction-page .p-panel,
  body.mobile-transaction-page .p-fieldset {
    width: 100% !important;
    margin: 0 0 11px !important;
    border-radius: 17px !important;
    border-color: #e4eaf1 !important;
    box-shadow: 0 4px 15px rgba(15, 23, 42, 0.055) !important;
  }

  body.mobile-transaction-page .card,
  body.mobile-transaction-page .p-card .p-card-body,
  body.mobile-transaction-page .p-panel .p-panel-content,
  body.mobile-transaction-page .p-fieldset .p-fieldset-content {
    padding: 13px !important;
  }

  body.mobile-transaction-page .p-card .p-card-content {
    padding: 0 !important;
  }

  body.mobile-transaction-page h1,
  body.mobile-transaction-page h2,
  body.mobile-transaction-page h3,
  body.mobile-transaction-page h4,
  body.mobile-transaction-page .p-card-title,
  body.mobile-transaction-page .p-panel-title {
    margin: 0 0 11px !important;
    font-size: 1.02rem !important;
    line-height: 1.3 !important;
  }

  body.mobile-transaction-page label,
  body.mobile-transaction-page .field > label,
  body.mobile-transaction-page .form-label {
    display: block !important;
    margin: 0 0 6px !important;
    color: #334155 !important;
    font-size: 0.82rem !important;
    font-weight: 700 !important;
    line-height: 1.3 !important;
  }

  body.mobile-transaction-page .field,
  body.mobile-transaction-page .form-group,
  body.mobile-transaction-page [class*="field-"] {
    min-width: 0 !important;
    margin-bottom: 11px !important;
  }

  body.mobile-transaction-page .p-inputtext,
  body.mobile-transaction-page .p-dropdown,
  body.mobile-transaction-page .p-select,
  body.mobile-transaction-page .p-multiselect,
  body.mobile-transaction-page .p-inputnumber,
  body.mobile-transaction-page .p-calendar,
  body.mobile-transaction-page textarea,
  body.mobile-transaction-page select,
  body.mobile-transaction-page input {
    width: 100% !important;
    min-width: 0 !important;
  }

  body.mobile-transaction-page .p-dropdown,
  body.mobile-transaction-page .p-select,
  body.mobile-transaction-page .p-multiselect,
  body.mobile-transaction-page .p-inputnumber,
  body.mobile-transaction-page .p-calendar {
    min-height: 48px !important;
    align-items: center !important;
  }

  body.mobile-transaction-page .p-dropdown-label,
  body.mobile-transaction-page .p-select-label,
  body.mobile-transaction-page .p-multiselect-label,
  body.mobile-transaction-page .p-inputtext,
  body.mobile-transaction-page .p-inputnumber-input,
  body.mobile-transaction-page .p-calendar .p-inputtext,
  body.mobile-transaction-page select,
  body.mobile-transaction-page input:not([type="checkbox"]):not([type="radio"]) {
    min-height: 48px !important;
    height: 48px !important;
    padding-top: 0 !important;
    padding-bottom: 0 !important;
    line-height: 48px !important;
    box-sizing: border-box !important;
  }

  body.mobile-transaction-page .p-dropdown-label,
  body.mobile-transaction-page .p-select-label,
  body.mobile-transaction-page .p-multiselect-label {
    display: flex !important;
    align-items: center !important;
    padding-right: 46px !important;
    line-height: 1.2 !important;
  }

  body.mobile-transaction-page .p-dropdown-trigger,
  body.mobile-transaction-page .p-select-dropdown,
  body.mobile-transaction-page .p-multiselect-trigger,
  body.mobile-transaction-page .p-datepicker-trigger {
    width: 46px !important;
    min-width: 46px !important;
    height: 46px !important;
    align-self: center !important;
  }

  body.mobile-transaction-page .p-placeholder,
  body.mobile-transaction-page .p-select-label.p-placeholder,
  body.mobile-transaction-page .p-dropdown-label.p-placeholder,
  body.mobile-transaction-page .p-multiselect-label.p-placeholder {
    color: #64748b !important;
  }

  body.mobile-transaction-page .p-inputgroup {
    display: flex !important;
    width: 100% !important;
    min-width: 0 !important;
  }

  body.mobile-transaction-page .p-inputgroup > * {
    min-width: 0 !important;
  }

  body.mobile-transaction-page .flex,
  body.mobile-transaction-page [class*="flex"] {
    min-width: 0;
  }

  body.mobile-transaction-page .p-toolbar,
  body.mobile-transaction-page .p-datatable-header {
    align-items: stretch !important;
  }

  body.mobile-transaction-page .p-toolbar-group-start,
  body.mobile-transaction-page .p-toolbar-group-left,
  body.mobile-transaction-page .p-toolbar-group-end,
  body.mobile-transaction-page .p-toolbar-group-right {
    align-items: stretch !important;
  }

  body.mobile-transaction-page .p-toolbar .p-button:not(.p-button-icon-only),
  body.mobile-transaction-page .p-datatable-header .p-button:not(.p-button-icon-only) {
    flex: 1 1 140px;
  }

  body.mobile-transaction-page .p-datatable {
    margin-top: 4px;
  }

  body.mobile-transaction-page .p-datatable-wrapper {
    overflow: visible !important;
  }

  body.mobile-transaction-page .p-datatable table,
  body.mobile-transaction-page .p-datatable tbody {
    display: block !important;
    width: 100% !important;
    min-width: 0 !important;
  }

  body.mobile-transaction-page .p-datatable thead {
    display: none !important;
  }

  body.mobile-transaction-page .p-datatable tbody tr {
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) auto !important;
    gap: 7px 12px !important;
    margin: 0 0 10px !important;
    padding: 12px !important;
    border: 1px solid var(--mobile-border) !important;
    border-radius: 13px !important;
    background: #fff !important;
  }

  body.mobile-transaction-page .p-datatable tbody td {
    grid-column: 1 / -1 !important;
    display: grid !important;
    grid-template-columns: 104px minmax(0, 1fr) !important;
    align-items: start !important;
    gap: 10px !important;
    width: 100% !important;
    min-width: 0 !important;
    padding: 3px 0 !important;
    border: 0 !important;
    white-space: normal !important;
    overflow-wrap: anywhere !important;
  }

  body.mobile-transaction-page .p-datatable tbody td::before {
    color: #64748b !important;
    font-size: 0.78rem !important;
    font-weight: 600 !important;
    line-height: 1.35 !important;
  }

  body.mobile-transaction-page .p-datatable tbody td:nth-child(1)::before { content: "No"; }
  body.mobile-transaction-page .p-datatable tbody td:nth-child(2)::before { content: "Pesanan"; }
  body.mobile-transaction-page .p-datatable tbody td:nth-child(3)::before { content: "Qty"; }
  body.mobile-transaction-page .p-datatable tbody td:nth-child(4)::before { content: "Harga"; }
  body.mobile-transaction-page .p-datatable tbody td:nth-child(5)::before { content: "Subtotal"; }
  body.mobile-transaction-page .p-datatable tbody td:nth-child(6)::before { content: "Aksi"; }

  body.mobile-transaction-page .p-datatable tbody td:nth-child(2) {
    grid-column: 1 / -1 !important;
  }

  body.mobile-transaction-page .p-datatable tbody td:nth-child(5) {
    font-weight: 700 !important;
  }

  body.mobile-transaction-page .p-datatable tbody td:nth-child(6) {
    align-items: center !important;
  }

  body.mobile-transaction-page .p-datatable tbody td[colspan] {
    display: block !important;
    grid-column: 1 / -1 !important;
    padding: 12px 4px !important;
    text-align: center !important;
  }

  body.mobile-transaction-page .p-datatable tbody td[colspan]::before {
    display: none !important;
  }

  body.mobile-transaction-page .p-button {
    align-items: center;
    justify-content: center;
    min-height: 44px;
    text-align: center;
  }

  body.mobile-transaction-page .p-button-label {
    line-height: 1.2;
  }

  /* Pelanggan mobile-first: toolbar ringkas, daftar berbentuk kartu, dan aksi mudah disentuh. */
  body.mobile-customer-page .layout-main-container {
    padding-right: 10px !important;
    padding-left: 10px !important;
  }

  body.mobile-customer-page .layout-main,
  body.mobile-customer-page .mobile-customer-root {
    width: 100% !important;
    max-width: 100% !important;
  }

  body.mobile-customer-page .mobile-customer-heading {
    margin-bottom: 10px !important;
  }

  body.mobile-customer-page .mobile-customer-heading h1,
  body.mobile-customer-page .mobile-customer-heading h2,
  body.mobile-customer-page .mobile-customer-heading .text-2xl,
  body.mobile-customer-page .mobile-customer-heading .text-3xl {
    margin: 0 !important;
    font-size: 1.15rem !important;
    line-height: 1.3 !important;
  }

  body.mobile-customer-page .card,
  body.mobile-customer-page .surface-card,
  body.mobile-customer-page .p-card,
  body.mobile-customer-page .p-panel {
    width: 100% !important;
    margin: 0 0 10px !important;
    border: 1px solid var(--mobile-border) !important;
    border-radius: 16px !important;
    box-shadow: 0 3px 12px rgba(15, 23, 42, 0.045) !important;
  }

  body.mobile-customer-page .mobile-customer-toolbar,
  body.mobile-customer-page .p-toolbar,
  body.mobile-customer-page .p-datatable-header {
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) auto !important;
    align-items: center !important;
    gap: 8px !important;
    padding: 10px !important;
    border: 1px solid var(--mobile-border) !important;
    border-radius: 14px !important;
    background: #fff !important;
  }

  body.mobile-customer-page .p-toolbar-group-start,
  body.mobile-customer-page .p-toolbar-group-left,
  body.mobile-customer-page .p-toolbar-group-end,
  body.mobile-customer-page .p-toolbar-group-right {
    display: contents !important;
  }

  body.mobile-customer-page .mobile-customer-search,
  body.mobile-customer-page .p-toolbar input,
  body.mobile-customer-page .p-datatable-header input,
  body.mobile-customer-page .p-iconfield,
  body.mobile-customer-page .p-input-icon-left {
    width: 100% !important;
    min-width: 0 !important;
  }

  body.mobile-customer-page .p-inputtext {
    min-height: 44px !important;
    padding-top: 0 !important;
    padding-bottom: 0 !important;
    line-height: 44px !important;
    border-radius: 12px !important;
  }

  body.mobile-customer-page .mobile-customer-primary-action,
  body.mobile-customer-page .p-toolbar .p-button:not(.p-button-icon-only),
  body.mobile-customer-page .p-datatable-header .p-button:not(.p-button-icon-only) {
    width: auto !important;
    min-width: 44px !important;
    min-height: 44px !important;
    padding: 0 13px !important;
    border-radius: 12px !important;
    white-space: nowrap !important;
  }

  body.mobile-customer-page .p-datatable-wrapper {
    overflow: visible !important;
  }

  body.mobile-customer-page .p-datatable table,
  body.mobile-customer-page .p-datatable tbody {
    display: block !important;
    width: 100% !important;
    min-width: 0 !important;
  }

  body.mobile-customer-page .p-datatable thead {
    display: none !important;
  }

  /* Master Pelanggan mobile — compact card mengikuti hirarki Laporan Transaksi. */
  body.mobile-customer-page .p-datatable tbody tr:not(.p-datatable-empty-message) {
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) max-content !important;
    grid-template-areas:
      "name status"
      "wa company"
      "address balance"
      "actions actions" !important;
    column-gap: 12px !important;
    row-gap: 5px !important;
    width: 100% !important;
    margin: 0 0 9px !important;
    padding: 13px 14px 10px !important;
    border: 1px solid var(--mobile-border) !important;
    border-radius: 13px !important;
    background: #fff !important;
    box-shadow: 0 3px 10px rgba(15, 23, 42, 0.04) !important;
  }

  body.mobile-customer-page .p-datatable tbody tr:not(.p-datatable-empty-message) > td {
    display: block !important;
    width: auto !important;
    max-width: none !important;
    min-width: 0 !important;
    min-height: 0 !important;
    padding: 1px 0 !important;
    border: 0 !important;
    text-align: left !important;
    white-space: normal !important;
    line-height: 1.3 !important;
    overflow-wrap: anywhere !important;
  }

  body.mobile-customer-page .p-datatable tbody tr:not(.p-datatable-empty-message) > td::before {
    display: none !important;
  }

  /* Nama pelanggan: informasi utama card. */
  body.mobile-customer-page .p-datatable tbody tr:not(.p-datatable-empty-message) > td:nth-child(1) {
    grid-area: name !important;
    justify-self: start !important;
    align-self: start !important;
    width: 100% !important;
    margin: 0 !important;
    padding: 1px 0 0 !important;
    text-indent: 0 !important;
    color: #1f2937 !important;
    font-size: .96rem !important;
    font-weight: 850 !important;
  }

  body.mobile-customer-page .p-datatable tbody tr:not(.p-datatable-empty-message) > td:nth-child(1) > *,
  body.mobile-customer-page .p-datatable tbody tr:not(.p-datatable-empty-message) > td:nth-child(1) .font-semibold,
  body.mobile-customer-page .p-datatable tbody tr:not(.p-datatable-empty-message) .customer-name-mobile-source {
    display: block !important;
    width: 100% !important;
    max-width: 100% !important;
    margin: 0 !important;
    padding: 0 !important;
    text-align: left !important;
    text-indent: 0 !important;
    transform: none !important;
    justify-self: start !important;
    font-weight: 800 !important;
    color: #111827 !important;
  }

  /* Cabang: tepat di bawah badge Member/Reguler pada sisi kanan. */
  body.mobile-customer-page .p-datatable tbody tr:not(.p-datatable-empty-message) > td:nth-child(2) {
    grid-area: company !important;
    justify-self: end !important;
    align-self: center !important;
    max-width: 145px !important;
    color: #64748b !important;
    font-size: .7rem !important;
    font-weight: 700 !important;
    text-align: right !important;
    line-height: 1.2 !important;
  }

  /* WhatsApp tanpa label panjang agar card tetap ringkas. */
  body.mobile-customer-page .p-datatable tbody tr:not(.p-datatable-empty-message) > td:nth-child(3) {
    grid-area: wa !important;
    align-self: center !important;
    color: #526273 !important;
    font-size: .79rem !important;
    font-weight: 650 !important;
  }

  /* Alamat sebagai informasi sekunder, maksimal dua baris visual. */
  body.mobile-customer-page .p-datatable tbody tr:not(.p-datatable-empty-message) > td:nth-child(4) {
    grid-area: address !important;
    align-self: start !important;
    color: #7a8796 !important;
    font-size: .74rem !important;
    font-weight: 550 !important;
    line-height: 1.28 !important;
    display: -webkit-box !important;
    -webkit-box-orient: vertical !important;
    -webkit-line-clamp: 2 !important;
    overflow: hidden !important;
  }

  /* Badge Member/Reguler menjadi anchor kanan atas. */
  body.mobile-customer-page .p-datatable tbody tr:not(.p-datatable-empty-message) > td:nth-child(5) {
    grid-area: status !important;
    justify-self: end !important;
    align-self: start !important;
    width: max-content !important;
    text-align: right !important;
  }

  body.mobile-customer-page .p-datatable tbody tr:not(.p-datatable-empty-message) > td:nth-child(5) .p-tag,
  body.mobile-customer-page .p-datatable tbody tr:not(.p-datatable-empty-message) > td:nth-child(5) .p-badge {
    min-height: 22px !important;
    padding: 3px 8px !important;
    border-radius: 7px !important;
    font-size: .69rem !important;
    line-height: 1 !important;
    white-space: nowrap !important;
  }

  /* Saldo ringkas di sisi kanan bawah identitas. */
  body.mobile-customer-page .p-datatable tbody tr:not(.p-datatable-empty-message) > td:nth-child(6) {
    grid-area: balance !important;
    justify-self: end !important;
    align-self: center !important;
    width: max-content !important;
    color: #27834d !important;
    font-size: .79rem !important;
    font-weight: 850 !important;
    text-align: right !important;
    white-space: nowrap !important;
  }

  /* Aksi memakai pola compact Laporan Transaksi. */
  body.mobile-customer-page .p-datatable tbody tr:not(.p-datatable-empty-message) > td:nth-child(7) {
    grid-area: actions !important;
    display: flex !important;
    align-items: center !important;
    justify-content: flex-end !important;
    flex-wrap: nowrap !important;
    gap: 6px !important;
    width: 100% !important;
    margin-top: 5px !important;
    padding-top: 8px !important;
    border-top: 1px solid #eef2f6 !important;
  }

  body.mobile-customer-page .p-datatable tbody tr:not(.p-datatable-empty-message) > td:nth-child(7) .p-button {
    width: 32px !important;
    min-width: 32px !important;
    height: 32px !important;
    min-height: 32px !important;
    margin: 0 !important;
    padding: 0 !important;
    border-radius: 8px !important;
  }

  body.mobile-customer-page .p-datatable tbody tr:not(.p-datatable-empty-message) > td:nth-child(7) .p-button .p-button-icon {
    font-size: .78rem !important;
  }

  /* Empty state tetap normal, tidak ikut layout grid card pelanggan. */
  body.mobile-customer-page .p-datatable tbody tr.p-datatable-empty-message {
    display: block !important;
    width: 100% !important;
    margin: 0 !important;
    padding: 0 !important;
    border: 0 !important;
    border-radius: 0 !important;
    background: transparent !important;
    box-shadow: none !important;
  }

  body.mobile-customer-page .p-datatable tbody tr.p-datatable-empty-message > td {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: 100% !important;
    min-height: 88px !important;
    padding: 16px !important;
    border: 0 !important;
    color: #64748b !important;
    text-align: center !important;
  }

  body.mobile-customer-page .p-datatable tbody tr.p-datatable-empty-message > td::before {
    display: none !important;
  }

  body.mobile-customer-page .p-paginator {
    flex-wrap: wrap !important;
    justify-content: center !important;
    gap: 3px !important;
    padding: 8px 2px !important;
    border: 0 !important;
    background: transparent !important;
  }

  body.mobile-customer-page .p-paginator .p-paginator-page,
  body.mobile-customer-page .p-paginator .p-paginator-first,
  body.mobile-customer-page .p-paginator .p-paginator-prev,
  body.mobile-customer-page .p-paginator .p-paginator-next,
  body.mobile-customer-page .p-paginator .p-paginator-last {
    min-width: 36px !important;
    width: 36px !important;
    height: 36px !important;
  }


  /* Daftar transaksi mobile-first. */
  body.mobile-transaction-list-page .layout-main-container {
    padding-right: 10px !important;
    padding-left: 10px !important;
  }

  body.mobile-transaction-list-page .layout-main,
  body.mobile-transaction-list-page .mobile-transaction-list-root {
    width: 100% !important;
    max-width: 100% !important;
  }

  body.mobile-transaction-list-page .mobile-transaction-list-card,
  body.mobile-transaction-list-page .card,
  body.mobile-transaction-list-page .surface-card,
  body.mobile-transaction-list-page .p-card,
  body.mobile-transaction-list-page .p-panel {
    width: 100% !important;
    margin: 0 0 9px !important;
    padding: 11px !important;
    border: 1px solid var(--mobile-border) !important;
    border-radius: 14px !important;
    box-shadow: 0 2px 10px rgba(15, 23, 42, 0.045) !important;
  }

  body.mobile-transaction-list-page .mobile-transaction-list-heading {
    margin: 0 0 9px !important;
  }

  body.mobile-transaction-list-page .mobile-transaction-list-heading h1,
  body.mobile-transaction-list-page .mobile-transaction-list-heading h2,
  body.mobile-transaction-list-page .mobile-transaction-list-heading h3,
  body.mobile-transaction-list-page .mobile-transaction-list-heading h4,
  body.mobile-transaction-list-page .mobile-transaction-list-heading h5 {
    margin: 0 !important;
    font-size: 1.18rem !important;
    font-weight: 800 !important;
    line-height: 1.25 !important;
  }

  body.mobile-transaction-list-page .mobile-transaction-list-toolbar {
    display: grid !important;
    grid-template-columns: auto minmax(0, 1fr) !important;
    align-items: center !important;
    gap: 8px !important;
    width: 100% !important;
    margin: 0 0 9px !important;
    padding: 0 !important;
    border: 0 !important;
    background: transparent !important;
  }

  body.mobile-transaction-list-page .mobile-transaction-list-toolbar > *,
  body.mobile-transaction-list-page .mobile-transaction-list-toolbar .p-toolbar-group-start,
  body.mobile-transaction-list-page .mobile-transaction-list-toolbar .p-toolbar-group-left,
  body.mobile-transaction-list-page .mobile-transaction-list-toolbar .p-toolbar-group-end,
  body.mobile-transaction-list-page .mobile-transaction-list-toolbar .p-toolbar-group-right {
    min-width: 0 !important;
    margin: 0 !important;
  }

  body.mobile-transaction-list-page .mobile-transaction-list-search,
  body.mobile-transaction-list-page .mobile-transaction-list-search .p-inputtext,
  body.mobile-transaction-list-page .mobile-transaction-list-toolbar input {
    width: 100% !important;
    min-width: 0 !important;
  }

  body.mobile-transaction-list-page .mobile-transaction-list-toolbar .p-inputtext {
    min-height: 44px !important;
    padding-top: 0 !important;
    padding-bottom: 0 !important;
    border-radius: 11px !important;
  }

  body.mobile-transaction-list-page .mobile-transaction-list-toolbar .p-button {
    min-height: 42px !important;
    border-radius: 11px !important;
    white-space: nowrap !important;
  }

  body.mobile-transaction-list-page .mobile-transaction-list-table .p-datatable-wrapper {
    overflow: visible !important;
  }

  body.mobile-transaction-list-page .mobile-transaction-list-table table,
  body.mobile-transaction-list-page .mobile-transaction-list-table tbody {
    display: block !important;
    width: 100% !important;
    min-width: 0 !important;
  }

  body.mobile-transaction-list-page .mobile-transaction-list-table thead {
    display: none !important;
  }

  body.mobile-transaction-list-page .mobile-transaction-list-table tbody tr {
    display: block !important;
    width: 100% !important;
    margin: 0 0 9px !important;
    padding: 4px 10px !important;
    border: 1px solid var(--mobile-border) !important;
    border-radius: 13px !important;
    background: #fff !important;
    box-shadow: 0 2px 8px rgba(15, 23, 42, 0.04) !important;
  }

  body.mobile-transaction-list-page .mobile-transaction-list-table tbody td {
    display: grid !important;
    grid-template-columns: minmax(94px, 38%) minmax(0, 62%) !important;
    align-items: center !important;
    gap: 9px !important;
    width: 100% !important;
    min-height: 37px !important;
    padding: 7px 0 !important;
    border: 0 !important;
    border-bottom: 1px solid #eef2f6 !important;
    text-align: right !important;
    white-space: normal !important;
  }

  body.mobile-transaction-list-page .mobile-transaction-list-table tbody td:last-child {
    border-bottom: 0 !important;
  }

  body.mobile-transaction-list-page .mobile-transaction-list-table tbody td::before {
    content: attr(data-mobile-label);
    color: #64748b !important;
    font-size: 0.71rem !important;
    font-weight: 700 !important;
    line-height: 1.2 !important;
    text-align: left !important;
  }

  body.mobile-transaction-list-page .mobile-transaction-list-table tbody td > * {
    max-width: 100% !important;
    justify-self: end !important;
  }

  body.mobile-transaction-list-page .mobile-transaction-list-table tbody td .flex,
  body.mobile-transaction-list-page .mobile-transaction-list-table tbody td [class*="flex"] {
    justify-content: flex-end !important;
    flex-wrap: wrap !important;
    gap: 6px !important;
  }

  body.mobile-transaction-list-page .mobile-transaction-list-table tbody td .p-button {
    width: 36px !important;
    min-width: 36px !important;
    height: 36px !important;
    min-height: 36px !important;
    padding: 0 !important;
    border-radius: 10px !important;
  }

  body.mobile-transaction-list-page .mobile-transaction-list-table tbody td.mobile-transaction-action-cell {
    display: flex !important;
    align-items: center !important;
    justify-content: flex-end !important;
    flex-wrap: wrap !important;
    gap: 7px !important;
    min-height: 0 !important;
    padding-top: 9px !important;
    padding-bottom: 5px !important;
    border-bottom: 0 !important;
    text-align: right !important;
  }

  body.mobile-transaction-list-page .mobile-transaction-list-table tbody td.mobile-transaction-action-cell::before {
    display: none !important;
  }

  body.mobile-transaction-list-page .mobile-transaction-list-table tbody td.mobile-transaction-action-cell > * {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    flex: 0 0 auto !important;
    max-width: none !important;
    margin: 0 !important;
  }


  body.mobile-transaction-list-page .mobile-transaction-list-table .p-tag,
  body.mobile-transaction-list-page .mobile-transaction-list-table .p-badge {
    max-width: 100% !important;
    white-space: normal !important;
    text-align: center !important;
  }

  body.mobile-transaction-list-page .p-paginator {
    flex-wrap: wrap !important;
    justify-content: center !important;
    gap: 3px !important;
    padding: 7px 2px !important;
    border: 0 !important;
    background: transparent !important;
  }

  body.mobile-transaction-list-page .p-paginator .p-paginator-page,
  body.mobile-transaction-list-page .p-paginator .p-paginator-first,
  body.mobile-transaction-list-page .p-paginator .p-paginator-prev,
  body.mobile-transaction-list-page .p-paginator .p-paginator-next,
  body.mobile-transaction-list-page .p-paginator .p-paginator-last {
    min-width: 36px !important;
    width: 36px !important;
    height: 36px !important;
  }

  /* Laporan Harian mobile-first: compact desktop table, refined totals. */
  body.mobile-daily-report-page .layout-main-container {
    padding-left: 5px !important;
    padding-right: 5px !important;
  }

  :is(body.mobile-daily-report-page, body.mobile-owner-report-page) .layout-main,
  :is(body.mobile-daily-report-page, body.mobile-owner-report-page) .daily-report-view {
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
  }

  /* Satu sumber ritme/layout mobile untuk Laporan Harian + Owner. */
  :is(body.mobile-daily-report-page, body.mobile-owner-report-page) .daily-report-view {
    margin: 0 0 12px !important;
    padding: 14px !important;
    border: 1px solid #e2e8f0 !important;
    border-radius: 14px !important;
    background: #fff !important;
    overflow: hidden !important;
    box-sizing: border-box !important;
  }

  :is(body.mobile-daily-report-page, body.mobile-owner-report-page) .daily-report-view > h5 {
    margin: 0 0 18px !important;
    color: #253247 !important;
    font-size: .88rem !important;
    font-weight: 900 !important;
    line-height: 1.15 !important;
  }

  /* Filter satu baris, tanpa card besar. */
  

  

  

  

  

  

  

  

  

  

  

  /* Laporan Transaksi: pertahankan bentuk tabel desktop pada mobile tanpa header bertumpuk. */


  /* TABEL LAPORAN MOBILE — SATU SUMBER VISUAL
     Laporan Harian dan Laporan Owner memakai struktur/typography/border/header/footer yang sama.
     Hanya pembagian lebar kolom berbeda karena jumlah kolomnya berbeda. */
  :is(body.mobile-daily-report-page, body.mobile-owner-report-page, body.mobile-expense-page) .daily-report-table-source,
  :is(body.mobile-daily-report-page, body.mobile-owner-report-page, body.mobile-expense-page) .daily-report-table-source .p-datatable-wrapper {
    display: block !important;
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    margin: 0 !important;
    overflow: hidden !important;
  }

  :is(body.mobile-daily-report-page, body.mobile-owner-report-page, body.mobile-expense-page) .daily-report-table-source {
    margin-top: 8px !important;
    margin-bottom: 18px !important;
    border: 1px solid #dbe3ec !important;
    border-radius: 9px !important;
    background: #fff !important;
  }

  :is(body.mobile-daily-report-page, body.mobile-owner-report-page, body.mobile-expense-page) .daily-report-table-source table,
  :is(body.mobile-daily-report-page, body.mobile-owner-report-page, body.mobile-expense-page) .daily-report-table-source .p-datatable-table {
    display: table !important;
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    table-layout: fixed !important;
    border-collapse: collapse !important;
  }

  :is(body.mobile-daily-report-page, body.mobile-owner-report-page, body.mobile-expense-page) .daily-report-table-source thead { display: table-header-group !important; }
  :is(body.mobile-daily-report-page, body.mobile-owner-report-page, body.mobile-expense-page) .daily-report-table-source tbody { display: table-row-group !important; }
  :is(body.mobile-daily-report-page, body.mobile-owner-report-page, body.mobile-expense-page) .daily-report-table-source tr { display: table-row !important; }

  :is(body.mobile-daily-report-page, body.mobile-owner-report-page, body.mobile-expense-page) .daily-report-table-source th,
  :is(body.mobile-daily-report-page, body.mobile-owner-report-page, body.mobile-expense-page) .daily-report-table-source tbody td {
    display: table-cell !important;
    min-width: 0 !important;
    max-width: none !important;
    height: auto !important;
    min-height: 0 !important;
    padding: 4px 2px !important;
    border: 1px solid #e5e7eb !important;
    vertical-align: middle !important;
    font-size: 6.8px !important;
    line-height: 1.08 !important;
    white-space: normal !important;
    overflow: hidden !important;
    overflow-wrap: normal !important;
    word-break: normal !important;
  }

  :is(body.mobile-daily-report-page, body.mobile-owner-report-page, body.mobile-expense-page) .daily-report-table-source tr > :first-child { border-left: 0 !important; }
  :is(body.mobile-daily-report-page, body.mobile-owner-report-page, body.mobile-expense-page) .daily-report-table-source tr > :last-child { border-right: 0 !important; }
  :is(body.mobile-daily-report-page, body.mobile-owner-report-page, body.mobile-expense-page) .daily-report-table-source thead tr:first-child > th { border-top: 0 !important; }
  :is(body.mobile-daily-report-page, body.mobile-owner-report-page, body.mobile-expense-page) .daily-report-table-source tfoot tr:last-child > td,
  :is(body.mobile-daily-report-page, body.mobile-owner-report-page, body.mobile-expense-page) .daily-report-table-source tbody tr:last-child > td { border-bottom: 0 !important; }

  :is(body.mobile-daily-report-page, body.mobile-owner-report-page, body.mobile-expense-page) .daily-report-table-source th {
    padding-top: 5px !important;
    padding-bottom: 5px !important;
    background: #f8fafc !important;
    color: #475569 !important;
    font-size: 6.1px !important;
    font-weight: 900 !important;
    text-align: center !important;
  }

  :is(body.mobile-daily-report-page, body.mobile-owner-report-page, body.mobile-expense-page) .daily-report-table-source tbody td {
    color: #334155 !important;
    text-align: right !important;
  }

  /* Lebar kolom Laporan Harian (6 kolom). */
  body.mobile-daily-report-page .daily-report-table-source th:nth-child(1),
  body.mobile-daily-report-page .daily-report-table-source tbody td:nth-child(1) { width: 19% !important; text-align: left !important; }
  body.mobile-daily-report-page .daily-report-table-source th:nth-child(2),
  body.mobile-daily-report-page .daily-report-table-source tbody td:nth-child(2) { width: 15% !important; }
  body.mobile-daily-report-page .daily-report-table-source th:nth-child(3),
  body.mobile-daily-report-page .daily-report-table-source tbody td:nth-child(3) { width: 14% !important; }
  body.mobile-daily-report-page .daily-report-table-source th:nth-child(4),
  body.mobile-daily-report-page .daily-report-table-source tbody td:nth-child(4) { width: 18% !important; }
  body.mobile-daily-report-page .daily-report-table-source th:nth-child(5),
  body.mobile-daily-report-page .daily-report-table-source tbody td:nth-child(5) { width: 16% !important; }
  body.mobile-daily-report-page .daily-report-table-source th:nth-child(6),
  body.mobile-daily-report-page .daily-report-table-source tbody td:nth-child(6) { width: 18% !important; }

  /* Pengeluaran Lain tetap memakai sumber tabel Laporan Harian; hanya pembagian 5 kolom mengikuti isi datanya. */
  body.mobile-expense-page .daily-report-table-source th:nth-child(1),
  body.mobile-expense-page .daily-report-table-source tbody td:nth-child(1) { width: 7% !important; text-align: center !important; }
  body.mobile-expense-page .daily-report-table-source th:nth-child(2),
  body.mobile-expense-page .daily-report-table-source tbody td:nth-child(2) { width: 22% !important; text-align: center !important; }
  body.mobile-expense-page .daily-report-table-source th:nth-child(3),
  body.mobile-expense-page .daily-report-table-source tbody td:nth-child(3) { width: 31% !important; text-align: center !important; }
  body.mobile-expense-page .daily-report-table-source th:nth-child(4),
  body.mobile-expense-page .daily-report-table-source tbody td:nth-child(4) { width: 22% !important; text-align: center !important; }
  body.mobile-expense-page .daily-report-table-source th:nth-child(5),
  body.mobile-expense-page .daily-report-table-source tbody td:nth-child(5) { width: 18% !important; text-align: center !important; }

  /* Lebar kolom Owner (4 kolom); visual lainnya tetap dari sumber bersama di atas. */
  body.mobile-owner-report-page .daily-report-table-source th:nth-child(1),
  body.mobile-owner-report-page .daily-report-table-source tbody td:nth-child(1) { width: 34% !important; text-align: left !important; }
  body.mobile-owner-report-page .daily-report-table-source th:nth-child(2),
  body.mobile-owner-report-page .daily-report-table-source tbody td:nth-child(2) { width: 22% !important; }
  body.mobile-owner-report-page .daily-report-table-source th:nth-child(3),
  body.mobile-owner-report-page .daily-report-table-source tbody td:nth-child(3) { width: 18% !important; }
  body.mobile-owner-report-page .daily-report-table-source th:nth-child(4),
  body.mobile-owner-report-page .daily-report-table-source tbody td:nth-child(4) { width: 26% !important; }

  :is(body.mobile-daily-report-page, body.mobile-owner-report-page) .daily-report-table-source tbody td:nth-child(1) {
    font-weight: 800 !important;
  }
  :is(body.mobile-daily-report-page, body.mobile-owner-report-page) .daily-report-table-source tbody td:nth-child(3) > * {
    display: inline-block !important;
    width: auto !important;
    max-width: 100% !important;
    margin: 0 !important;
    padding: 0 !important;
    font-size: 6.5px !important;
    line-height: 1.1 !important;
    white-space: nowrap !important;
    word-break: keep-all !important;
    overflow-wrap: normal !important;
  }

  /* Warna nilai khusus Harian sesuai fungsi kolom; Owner memakai warna dari markup data. */
  body.mobile-daily-report-page .daily-report-table-source tbody td:nth-child(5) { color: #dc2626 !important; }
  body.mobile-daily-report-page .daily-report-table-source tbody td:nth-child(6) { color: #16a34a !important; font-weight: 900 !important; }

  :is(body.mobile-daily-report-page, body.mobile-owner-report-page) .daily-report-table-source tbody td::before {
    display: none !important;
    content: none !important;
  }

  :is(body.mobile-daily-report-page, body.mobile-owner-report-page) .daily-report-table-source .p-datatable-tfoot,
  :is(body.mobile-daily-report-page, body.mobile-owner-report-page) .daily-report-table-source tfoot {
    display: table-footer-group !important;
    width: 100% !important;
  }
  :is(body.mobile-daily-report-page, body.mobile-owner-report-page) .daily-report-table-source tfoot tr { display: table-row !important; width: 100% !important; }
  :is(body.mobile-daily-report-page, body.mobile-owner-report-page) .daily-report-table-source tfoot td {
    display: table-cell !important;
    min-width: 0 !important;
    height: 30px !important;
    padding: 3px 1px !important;
    border: 1px solid #e5e7eb !important;
    border-top: 0 !important;
    vertical-align: middle !important;
    text-align: center !important;
    white-space: normal !important;
    word-break: normal !important;
    overflow-wrap: normal !important;
    line-height: 1.08 !important;
    font-size: 7.5px !important;
    font-weight: 900 !important;
  }

  /* Canonical footer table laporan — one source for Harian + Owner. */
  :is(body.mobile-daily-report-page, body.mobile-owner-report-page) .daily-report-table-source tfoot td {
    background:#f8fafc!important;
    color:#334155!important;
  }
  :is(body.mobile-daily-report-page, body.mobile-owner-report-page) .daily-report-table-source tfoot td:last-child {
    background:#ecfdf5!important;
    color:#059669!important;
    border-color:#a7f3d0!important;
  }
  body.mobile-daily-report-page .daily-report-table-source tfoot td:nth-child(3) {
    background:#fff7ed!important;
    color:#d97706!important;
    border-color:#fed7aa!important;
  }
  body.mobile-daily-report-page .daily-report-table-source tfoot td:nth-child(4) {
    background:#fff1f2!important;
    color:#dc2626!important;
    border-color:#fecdd3!important;
  }

  body.mobile-dashboard-page .p-datatable-wrapper {
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    overflow-x: hidden !important;
    border-radius: 12px !important;
  }

  .p-card .p-card-body {
    padding: 15px !important;
  }

  .p-card .p-card-content {
    padding: 0 !important;
  }

  h1 { font-size: 1.48rem !important; }
  h2 { font-size: 1.3rem !important; }
  h3 { font-size: 1.14rem !important; }
  h4 { font-size: 1.02rem !important; }

  h1,
  h2,
  h3,
  h4,
  h5,
  h6 {
    margin-top: 0;
    line-height: 1.3;
    letter-spacing: -0.012em;
  }

  .grid {
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    margin: 0 !important;
  }

  .grid > [class*="col-"] {
    max-width: 100% !important;
    min-width: 0 !important;
    padding: 5px !important;
  }

  .grid > [class*="md:col-"],
  .grid > [class*="lg:col-"],
  .grid > [class*="xl:col-"] {
    flex: 0 0 100% !important;
    width: 100% !important;
  }

  .flex.justify-content-between,
  .flex.justify-between,
  .p-datatable-header > .flex {
    flex-wrap: wrap;
    gap: 9px;
  }

  .p-inputtext,
  .p-dropdown,
  .p-select,
  .p-multiselect,
  .p-inputnumber,
  .p-calendar,
  textarea,
  select,
  input[type="text"],
  input[type="email"],
  input[type="password"],
  input[type="number"],
  input[type="date"] {
    min-height: 46px;
    max-width: 100%;
    border-radius: 12px !important;
    font-size: 16px !important;
  }

  .p-inputnumber,
  .p-calendar,
  .p-dropdown,
  .p-select,
  .p-multiselect {
    width: 100%;
  }

  .p-button {
    min-height: 44px;
    border-radius: 12px !important;
    padding: 0.68rem 0.95rem;
    font-weight: 700;
    line-height: 1.2;
    white-space: normal;
  }

  .p-button.p-button-icon-only {
    width: 44px;
    min-width: 44px;
    padding: 0;
  }

  .p-toolbar {
    padding: 11px !important;
    border-radius: 15px !important;
    gap: 9px;
  }

  .p-toolbar-group-start,
  .p-toolbar-group-left,
  .p-toolbar-group-end,
  .p-toolbar-group-right {
    display: flex;
    flex-wrap: wrap;
    width: 100%;
    gap: 8px;
  }

  .p-datatable {
    max-width: 100%;
    border: 1px solid var(--mobile-border);
    border-radius: 15px;
    background: #fff;
    overflow: hidden;
  }

  .p-datatable-header {
    padding: 11px !important;
    border: 0 !important;
    background: #fff !important;
  }

  .p-datatable-wrapper {
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    overflow-x: hidden !important;
    overflow-y: visible !important;
  }

  .p-datatable table {
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
  }

  .p-datatable .p-datatable-thead > tr > th {
    background: #f6f8fa !important;
  }

  .p-datatable .p-datatable-thead > tr > th,
  .p-datatable .p-datatable-tbody > tr > td {
    padding: 11px 10px !important;
    white-space: nowrap;
    font-size: 0.87rem;
  }

  .mobile-table-hint {
    display: flex;
    align-items: center;
    gap: 6px;
    margin: 1px 2px 8px;
    color: var(--mobile-muted);
    font-size: 0.74rem;
  }

  .p-paginator {
    flex-wrap: wrap;
    gap: 3px;
    padding: 9px 4px !important;
  }

  .p-paginator .p-paginator-page,
  .p-paginator .p-paginator-first,
  .p-paginator .p-paginator-prev,
  .p-paginator .p-paginator-next,
  .p-paginator .p-paginator-last {
    min-width: 38px;
    height: 38px;
  }

  .p-dialog-mask {
    align-items: center !important;
    justify-content: center !important;
    padding: max(16px, env(safe-area-inset-top)) 14px max(16px, env(safe-area-inset-bottom)) !important;
    background: rgba(15, 23, 42, 0.46) !important;
    backdrop-filter: blur(2px);
  }

  .p-dialog,
  .mobile-app-dialog {
    display: flex !important;
    flex-direction: column !important;
    width: min(100%, 520px) !important;
    max-height: min(86dvh, 720px) !important;
    margin: 0 auto !important;
    border: 1px solid rgba(148, 163, 184, 0.22) !important;
    border-radius: 20px !important;
    background: #ffffff !important;
    box-shadow: 0 18px 52px rgba(15, 23, 42, 0.24) !important;
    overflow: hidden !important;
  }

  .p-dialog .p-dialog-header {
    flex: 0 0 auto;
    min-height: 58px;
    padding: 16px 18px 13px !important;
    border-bottom: 1px solid var(--mobile-border) !important;
    background: #ffffff !important;
  }

  .p-dialog .p-dialog-title,
  .p-dialog .p-dialog-header .p-dialog-title {
    font-size: 1rem !important;
    font-weight: 700 !important;
    line-height: 1.35 !important;
    color: #172033 !important;
  }

  .p-dialog .p-dialog-header-icons,
  .p-dialog .p-dialog-header-actions {
    display: flex !important;
    align-items: center !important;
    gap: 6px !important;
  }

  .p-dialog .p-dialog-header-icon {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: 38px !important;
    height: 38px !important;
    margin: 0 !important;
    border-radius: 11px !important;
  }

  .p-dialog .p-dialog-content {
    flex: 1 1 auto !important;
    min-height: 0 !important;
    padding: 16px 18px 18px !important;
    overflow-y: auto !important;
    overscroll-behavior: contain;
    -webkit-overflow-scrolling: touch;
    background: #ffffff !important;
  }

  .p-dialog .p-dialog-content > :first-child {
    margin-top: 0 !important;
  }

  /* Modal selesai transaksi POS: seluruh aksi cetak harus langsung terlihat di mobile. */
  body.mobile-transaction-page .pos-success-dialog {
    position: fixed !important;
    top: 50% !important;
    left: 50% !important;
    transform: translate(-50%, -50%) !important;
    width: calc(100vw - 24px) !important;
    max-width: 400px !important;
    max-height: calc(100dvh - 24px) !important;
    margin: 0 !important;
    z-index: 10001 !important;
  }

  body.mobile-transaction-page .pos-success-dialog .p-dialog-header {
    min-height: 0 !important;
    padding: 12px 16px 10px !important;
  }

  body.mobile-transaction-page .pos-success-dialog .p-dialog-content {
    flex: 0 1 auto !important;
    padding: 10px 16px 12px !important;
    overflow: visible !important;
  }

  body.mobile-transaction-page .pos-success-dialog .p-dialog-content .p-button {
    min-height: 46px !important;
  }

  body.mobile-transaction-page .pos-success-dialog .p-dialog-footer {
    padding: 10px 16px 12px !important;
  }

  .p-dialog .p-dialog-content > :last-child {
    margin-bottom: 0 !important;
  }

  .p-dialog .mobile-dialog-field,
  .p-dialog .field,
  .p-dialog .form-group {
    display: flex !important;
    flex-direction: column !important;
    width: 100% !important;
    gap: 7px !important;
    margin: 0 0 13px !important;
  }

  .p-dialog label,
  .p-dialog .form-label,
  .p-dialog .field > label {
    display: block !important;
    margin: 0 !important;
    font-size: 0.79rem !important;
    font-weight: 650 !important;
    line-height: 1.35 !important;
    color: #475569 !important;
  }

  .p-dialog input:not([type="checkbox"]):not([type="radio"]),
  .p-dialog textarea,
  .p-dialog select,
  .p-dialog .p-inputtext,
  .p-dialog .p-dropdown,
  .p-dialog .p-select,
  .p-dialog .p-multiselect,
  .p-dialog .p-calendar,
  .p-dialog .p-inputnumber {
    width: 100% !important;
    min-height: 46px !important;
    border-radius: 12px !important;
  }

  .p-dialog .p-dropdown-label,
  .p-dialog .p-select-label,
  .p-dialog .p-multiselect-label,
  .p-dialog .p-inputtext,
  .p-dialog .p-inputnumber-input,
  .p-dialog input:not([type="checkbox"]):not([type="radio"]) {
    display: flex !important;
    align-items: center !important;
    min-height: 46px !important;
    padding-top: 0 !important;
    padding-bottom: 0 !important;
    line-height: 46px !important;
  }

  .p-dialog .p-dialog-footer,
  .p-dialog > .mobile-dialog-actions {
    position: relative !important;
    z-index: 3;
    display: flex !important;
    flex: 0 0 auto !important;
    align-items: center !important;
    justify-content: flex-end !important;
    width: 100% !important;
    gap: 9px !important;
    margin: 0 !important;
    padding: 12px 18px 14px !important;
    border-top: 1px solid var(--mobile-border) !important;
    background: #ffffff !important;
    box-shadow: 0 -8px 18px rgba(15, 23, 42, 0.05) !important;
  }

  .p-dialog .p-dialog-footer .p-button,
  .p-dialog > .mobile-dialog-actions .p-button,
  .p-dialog > .mobile-dialog-actions button {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    flex: 1 1 0 !important;
    min-width: 0 !important;
    min-height: 44px !important;
    margin: 0 !important;
    border-radius: 12px !important;
  }

  .p-dialog .p-dialog-footer:empty {
    display: none !important;
  }

  .p-sidebar,
  .p-drawer {
    width: min(88vw, 360px) !important;
  }

  .p-toast {
    right: 12px !important;
    left: 12px !important;
    width: calc(100vw - 24px) !important;
  }

  .p-toast.p-toast-top-right,
  .p-toast.p-toast-top-left,
  .p-toast.p-toast-top-center {
    top: calc(var(--mobile-header-height) + env(safe-area-inset-top) + 9px) !important;
  }

  .p-dropdown-panel,
  .p-select-overlay,
  .p-multiselect-panel,
  .p-datepicker,
  .p-menu,
  .p-overlaypanel {
    max-width: calc(100vw - 24px) !important;
    border-radius: 15px !important;
  }

  #overlay_company_menu.p-menu,
  #overlay_company_menu.p-tieredmenu {
    z-index: 1400 !important;
    max-width: calc(100vw - 24px) !important;
  }

  .mobile-app-bottom-nav {
    position: fixed;
    z-index: 1150;
    left: 0;
    right: 0;
    bottom: 0;
    display: grid;
    grid-template-columns: repeat(5, minmax(0, 1fr));
    align-items: center;
    column-gap: 4px;
    min-height: calc(70px + env(safe-area-inset-bottom));
    padding: 5px 8px calc(4px + env(safe-area-inset-bottom));
    border-top: 1px solid var(--mobile-border);
    background: rgba(255, 255, 255, 0.99);
    box-shadow: 0 -4px 17px rgba(15, 23, 42, 0.08);
    backdrop-filter: blur(16px);
    -webkit-backdrop-filter: blur(16px);
  }

  .mobile-app-bottom-nav button {
    appearance: none;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 4px;
    width: 100%;
    min-width: 0;
    height: 52px;
    margin: 0;
    padding: 5px 2px;
    border: 0;
    border-radius: 14px;
    background: transparent;
    color: var(--mobile-muted);
    font-family: inherit;
    font-size: 0.64rem;
    font-weight: 700;
    line-height: 1;
    transform: none;
  }

  .mobile-app-bottom-nav button i {
    font-size: 1.14rem;
    line-height: 1;
  }

  .mobile-app-bottom-nav button span {
    display: block;
    max-width: 100%;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  .mobile-app-bottom-nav button.mobile-long-label span {
    display: -webkit-box;
    overflow: hidden;
    font-size: 0.58rem;
    line-height: 1.05;
    white-space: normal;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
  }

  .mobile-app-bottom-nav button.active:not(.mobile-primary) {
    color: var(--mobile-blue);
    background: #edf5fd;
  }

  .mobile-app-bottom-nav button.mobile-primary {
    width: 100%;
    height: 60px;
    margin: 0;
    padding: 7px 3px 6px;
    border-radius: 18px;
    background: linear-gradient(180deg, #2d8fe5 0%, var(--mobile-blue) 100%);
    color: #fff;
    box-shadow: 0 6px 16px rgba(25, 118, 210, 0.27);
    transform: none;
  }

  .mobile-app-bottom-nav button.mobile-primary:active {
    transform: scale(0.97);
  }

  .mobile-app-bottom-nav button.mobile-primary i {
    font-size: 1.42rem;
  }

  .mobile-app-bottom-nav button.mobile-primary span {
    font-size: 0.7rem;
    color: #fff;
  }

  .mobile-transaction-quick-menu {
    position: fixed;
    z-index: 1250;
    display: grid;
    gap: 6px;
    width: min(270px, calc(100vw - 24px));
    padding: 8px;
    border: 1px solid var(--mobile-border);
    border-radius: 16px;
    background: #fff;
    box-shadow: 0 14px 38px rgba(15, 23, 42, 0.18);
    opacity: 0;
    transform: translateY(6px) scale(0.98);
    transition: opacity .14s ease, transform .14s ease;
  }

  .mobile-transaction-quick-menu.open {
    opacity: 1;
    transform: translateY(0) scale(1);
  }

  .mobile-transaction-quick-menu button {
    appearance: none;
    display: flex;
    align-items: center;
    gap: 10px;
    width: 100%;
    min-height: 46px;
    padding: 10px 12px;
    border: 0;
    border-radius: 12px;
    background: #f8fafc;
    color: #1f2937;
    font: inherit;
    font-weight: 700;
    text-align: left;
  }

  .mobile-transaction-quick-menu button:active {
    background: #edf5fd;
    color: var(--mobile-blue);
  }

  .mobile-transaction-quick-menu button i {
    width: 22px;
    color: var(--mobile-blue);
    font-size: 1rem;
    text-align: center;
  }

  body.mobile-login-page {
    min-height: 100dvh;
    background: var(--mobile-background) !important;
  }

  body.mobile-login-page #app {
    min-height: 0;
    height: auto;
    background: var(--mobile-background) !important;
  }

  body.mobile-login-page #app > div {
    min-width: 0 !important;
    min-height: calc(100dvh - 56px) !important;
    height: auto !important;
    display: flex !important;
    flex-direction: column !important;
    justify-content: center !important;
    padding: calc(10px + env(safe-area-inset-top)) 18px 6px !important;
    overflow: visible !important;
    background: var(--mobile-background) !important;
  }

  body.mobile-login-page #app > div > div {
    width: 100% !important;
    max-width: 420px !important;
    margin: 0 auto !important;
  }

  body.mobile-login-page #app > div > div > div {
    padding: 0 !important;
    border-radius: 24px !important;
    background: transparent !important;
  }

  body.mobile-login-page #app > div > div > div > div {
    padding: 26px 20px 22px !important;
    border: 1px solid rgba(148, 163, 184, 0.22) !important;
    border-radius: 23px !important;
    background: rgba(255, 255, 255, 0.96) !important;
    box-shadow: 0 18px 45px rgba(30, 64, 112, 0.13) !important;
  }

  body.mobile-login-page img[alt="App Logo"] {
    width: auto !important;
    max-width: 190px !important;
    max-height: 92px !important;
    margin-bottom: 20px !important;
  }

  body.mobile-login-page .text-3xl {
    margin-bottom: 7px !important;
    font-size: 1.65rem !important;
    font-weight: 800 !important;
  }

  body.mobile-login-page .text-xl {
    font-size: 0.94rem !important;
  }

  body.mobile-login-page label.text-xl {
    margin-bottom: 7px !important;
    color: #334155 !important;
    font-size: 0.88rem !important;
    font-weight: 700 !important;
  }

  body.mobile-login-page .p-inputtext,
  body.mobile-login-page .p-password,
  body.mobile-login-page .p-password-input {
    width: 100% !important;
  }

  body.mobile-login-page .p-inputtext,
  body.mobile-login-page .p-password-input {
    min-height: 50px !important;
    padding: 0.82rem 0.95rem !important;
    border-radius: 13px !important;
  }

  body.mobile-login-page .mb-5 {
    margin-bottom: 15px !important;
  }

  body.mobile-login-page .mt-2.mb-8 {
    margin-top: 2px !important;
    margin-bottom: 18px !important;
  }

  body.mobile-login-page .p-button.w-full {
    min-height: 50px !important;
    border-radius: 13px !important;
    font-size: 1rem !important;
  }

  body.mobile-login-page .layout-config-menu,
  body.mobile-login-page .layout-config-button,
  body.mobile-login-page [class*="theme-button"],
  body.mobile-login-page [class*="config-button"],
  body.mobile-login-page .config-panel,
  body.mobile-login-page [class*="theme-panel"],
  body.mobile-login-page [class*="config-panel"],
  body.mobile-login-page .fixed.flex.gap-4.top-8.right-8,
  body.mobile-login-page .mobile-theme-control {
    display: none !important;
  }


  /* Sistem mobile-first global untuk seluruh halaman aplikasi. */
  body.mobile-native-app .layout-main > :first-child {
    margin-top: 0 !important;
  }

  body.mobile-native-app .mobile-page-root {
    width: 100% !important;
    min-width: 0 !important;
  }

  body.mobile-native-app .mobile-page-heading {
    display: flex !important;
    align-items: flex-start !important;
    justify-content: space-between !important;
    gap: 10px !important;
    margin: 0 0 12px !important;
  }

  body.mobile-native-app .mobile-page-heading h1,
  body.mobile-native-app .mobile-page-heading h2,
  body.mobile-native-app .mobile-page-heading h3,
  body.mobile-native-app .mobile-page-heading .text-2xl,
  body.mobile-native-app .mobile-page-heading .text-3xl {
    margin: 0 !important;
    font-size: 1.18rem !important;
    line-height: 1.3 !important;
    font-weight: 800 !important;
    letter-spacing: -0.015em !important;
  }

  body.mobile-native-app .mobile-page-heading p,
  body.mobile-native-app .mobile-page-heading .text-muted-color {
    margin: 4px 0 0 !important;
    font-size: 0.8rem !important;
    line-height: 1.45 !important;
  }

  body.mobile-native-app .mobile-global-toolbar,
  body.mobile-native-app .p-toolbar,
  body.mobile-native-app .p-datatable-header {
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) auto !important;
    align-items: center !important;
    gap: 8px !important;
    width: 100% !important;
    min-width: 0 !important;
    padding: 10px !important;
    margin: 0 0 10px !important;
    border: 1px solid var(--mobile-border) !important;
    border-radius: 14px !important;
    background: #fff !important;
  }

  body.mobile-native-app .mobile-global-toolbar > *,
  body.mobile-native-app .p-toolbar-group-start,
  body.mobile-native-app .p-toolbar-group-left,
  body.mobile-native-app .p-toolbar-group-end,
  body.mobile-native-app .p-toolbar-group-right {
    min-width: 0 !important;
    margin: 0 !important;
  }

  body.mobile-native-app .mobile-global-toolbar .mobile-toolbar-search,
  body.mobile-native-app .p-toolbar .p-iconfield,
  body.mobile-native-app .p-toolbar .p-input-icon-left,
  body.mobile-native-app .p-datatable-header .p-iconfield,
  body.mobile-native-app .p-datatable-header .p-input-icon-left {
    width: 100% !important;
    min-width: 0 !important;
  }

  body.mobile-native-app .mobile-global-toolbar input,
  body.mobile-native-app .p-toolbar input,
  body.mobile-native-app .p-datatable-header input {
    width: 100% !important;
  }

  body.mobile-native-app .mobile-global-toolbar .p-button:not(.p-button-icon-only),
  body.mobile-native-app .p-toolbar .p-button:not(.p-button-icon-only),
  body.mobile-native-app .p-datatable-header .p-button:not(.p-button-icon-only) {
    min-height: 44px !important;
    padding: 0 13px !important;
    white-space: nowrap !important;
  }

  body.mobile-native-app .mobile-form-grid,
  body.mobile-native-app form .grid {
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) !important;
    gap: 12px !important;
  }

  body.mobile-native-app .mobile-form-field,
  body.mobile-native-app .field,
  body.mobile-native-app .form-group {
    width: 100% !important;
    min-width: 0 !important;
    margin: 0 0 12px !important;
  }

  body.mobile-native-app .mobile-form-field label,
  body.mobile-native-app .field > label,
  body.mobile-native-app .form-group > label {
    display: block !important;
    margin: 0 0 6px !important;
    color: #334155 !important;
    font-size: 0.8rem !important;
    line-height: 1.35 !important;
    font-weight: 700 !important;
  }

  body.mobile-native-app input:not([type="checkbox"]):not([type="radio"]),
  body.mobile-native-app select,
  body.mobile-native-app textarea,
  body.mobile-native-app .p-inputtext,
  body.mobile-native-app .p-dropdown,
  body.mobile-native-app .p-select,
  body.mobile-native-app .p-multiselect,
  body.mobile-native-app .p-calendar,
  body.mobile-native-app .p-inputnumber,
  body.mobile-native-app .p-password,
  body.mobile-native-app .p-password-input,
  body.mobile-native-app .p-autocomplete,
  body.mobile-native-app .p-treeselect {
    width: 100% !important;
    min-width: 0 !important;
    max-width: 100% !important;
  }

  body.mobile-native-app input:not([type="checkbox"]):not([type="radio"]),
  body.mobile-native-app select,
  body.mobile-native-app .p-inputtext,
  body.mobile-native-app .p-dropdown,
  body.mobile-native-app .p-select,
  body.mobile-native-app .p-multiselect,
  body.mobile-native-app .p-calendar input,
  body.mobile-native-app .p-inputnumber input,
  body.mobile-native-app .p-password-input,
  body.mobile-native-app .p-autocomplete-input,
  body.mobile-native-app .p-treeselect {
    min-height: 48px !important;
    height: 48px !important;
    padding-top: 0 !important;
    padding-bottom: 0 !important;
    border-radius: 12px !important;
    font-size: 0.9rem !important;
    line-height: 48px !important;
  }

  body.mobile-native-app textarea,
  body.mobile-native-app .p-textarea {
    min-height: 96px !important;
    height: auto !important;
    padding: 12px !important;
    line-height: 1.45 !important;
    border-radius: 12px !important;
  }

  body.mobile-native-app .p-dropdown-label,
  body.mobile-native-app .p-select-label,
  body.mobile-native-app .p-multiselect-label,
  body.mobile-native-app .p-treeselect-label {
    display: flex !important;
    align-items: center !important;
    min-height: 46px !important;
    padding-top: 0 !important;
    padding-bottom: 0 !important;
    line-height: 1.2 !important;
  }

  body.mobile-native-app .p-dropdown-trigger,
  body.mobile-native-app .p-select-dropdown,
  body.mobile-native-app .p-multiselect-dropdown,
  body.mobile-native-app .p-datepicker-trigger {
    width: 44px !important;
    min-width: 44px !important;
  }

  body.mobile-native-app .mobile-card-grid {
    display: grid !important;
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 10px !important;
  }

  body.mobile-native-app .mobile-card-grid > * {
    min-width: 0 !important;
    margin: 0 !important;
  }

  body.mobile-native-app .mobile-full-card {
    grid-column: 1 / -1 !important;
  }

  body.mobile-native-app .card,
  body.mobile-native-app .surface-card,
  body.mobile-native-app .p-card,
  body.mobile-native-app .p-panel {
    max-width: 100% !important;
    border-radius: 15px !important;
  }

  body.mobile-native-app .p-card .p-card-body,
  body.mobile-native-app .p-card-body,
  body.mobile-native-app .p-panel .p-panel-content,
  body.mobile-native-app .card,
  body.mobile-native-app .surface-card {
    padding: 13px !important;
  }

  .mobile-responsive-table .p-datatable-wrapper {
    overflow: visible !important;
  }

  .mobile-responsive-table table,
  .mobile-responsive-table tbody {
    display: block !important;
    width: 100% !important;
    min-width: 0 !important;
    max-width: 100% !important;
  }

  .mobile-responsive-table table {
    table-layout: fixed !important;
  }

  .mobile-responsive-table thead {
    display: none !important;
  }

  .mobile-responsive-table tbody tr {
    display: block !important;
    width: 100% !important;
    min-width: 0 !important;
    max-width: 100% !important;
    margin: 0 0 10px !important;
    padding: 8px 12px !important;
    border: 1px solid var(--mobile-border) !important;
    border-radius: 14px !important;
    background: #fff !important;
    box-shadow: 0 3px 12px rgba(15, 23, 42, 0.05) !important;
  }

  .mobile-responsive-table tbody td {
    display: grid !important;
    grid-template-columns: minmax(96px, 38%) minmax(0, 1fr) !important;
    align-items: center !important;
    gap: 10px !important;
    width: 100% !important;
    min-width: 0 !important;
    max-width: 100% !important;
    min-height: 38px !important;
    padding: 8px 0 !important;
    border: 0 !important;
    border-bottom: 1px dashed #e9edf3 !important;
    text-align: right !important;
    white-space: normal !important;
  }

  .mobile-responsive-table tbody td:last-child {
    border-bottom: 0 !important;
  }

  .mobile-responsive-table tbody td::before {
    content: attr(data-mobile-label);
    color: var(--mobile-muted);
    font-size: 0.73rem;
    line-height: 1.25;
    font-weight: 700;
    text-align: left;
    text-transform: uppercase;
    letter-spacing: 0.025em;
  }

  .mobile-responsive-table tbody td > * {
    min-width: 0 !important;
    max-width: 100% !important;
    justify-self: end !important;
  }

  .mobile-responsive-table .mobile-action-cell {
    display: flex !important;
    align-items: center !important;
    justify-content: flex-end !important;
    flex-wrap: wrap !important;
    gap: 7px !important;
  }

  .mobile-responsive-table .mobile-action-cell::before {
    margin-right: auto !important;
  }

  .mobile-responsive-table .mobile-action-cell .p-button,
  .mobile-responsive-table .mobile-action-cell button,
  .mobile-responsive-table .mobile-action-cell a,
  body.mobile-stock-report-page .stock-report-table-source .mobile-action-cell .p-button,
  body.mobile-items-page .items-list-table-source .mobile-action-cell .p-button {
    min-width: 38px !important;
    width: 38px !important;
    max-width: 38px !important;
    height: 38px !important;
    min-height: 38px !important;
    max-height: 38px !important;
    padding: 0 !important;
    margin: 0 !important;
    border-radius: 10px !important;
    flex: 0 0 38px !important;
  }

  body.mobile-native-app .p-paginator {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    flex-wrap: wrap !important;
    gap: 4px !important;
    padding: 9px 4px !important;
    border-radius: 12px !important;
  }

  body.mobile-native-app .p-paginator .p-paginator-page,
  body.mobile-native-app .p-paginator .p-paginator-first,
  body.mobile-native-app .p-paginator .p-paginator-prev,
  body.mobile-native-app .p-paginator .p-paginator-next,
  body.mobile-native-app .p-paginator .p-paginator-last {
    min-width: 36px !important;
    width: 36px !important;
    height: 36px !important;
    margin: 0 !important;
    border-radius: 10px !important;
  }

  body.mobile-native-app .p-dropdown-panel,
  body.mobile-native-app .p-select-overlay,
  body.mobile-native-app .p-multiselect-panel,
  body.mobile-native-app .p-datepicker,
  body.mobile-native-app .p-autocomplete-overlay,
  body.mobile-native-app .p-tieredmenu,
  body.mobile-native-app .p-menu,
  body.mobile-native-app .p-popover {
    max-width: calc(100vw - 24px) !important;
    border-radius: 14px !important;
  }

  body.mobile-native-app .p-dropdown-items,
  body.mobile-native-app .p-select-list,
  body.mobile-native-app .p-multiselect-items {
    padding: 6px !important;
  }

  body.mobile-native-app .p-dropdown-item,
  body.mobile-native-app .p-select-option,
  body.mobile-native-app .p-multiselect-option,
  body.mobile-native-app .p-menuitem-link {
    min-height: 44px !important;
    padding: 10px 12px !important;
    border-radius: 10px !important;
  }

  @media (max-width: 390px) {
    body.mobile-native-app .mobile-card-grid {
      gap: 8px !important;
    }

    body.mobile-native-app .mobile-global-toolbar,
    body.mobile-native-app .p-toolbar,
    body.mobile-native-app .p-datatable-header {
      grid-template-columns: minmax(0, 1fr) !important;
    }

    body.mobile-native-app .mobile-global-toolbar .p-button:not(.p-button-icon-only),
    body.mobile-native-app .p-toolbar .p-button:not(.p-button-icon-only),
    body.mobile-native-app .p-datatable-header .p-button:not(.p-button-icon-only) {
      width: 100% !important;
    }
  }

  @media (hover: none) {
    .layout-menu ul a:hover,
    .layout-topbar .layout-topbar-action:hover {
      background: transparent;
    }

    .p-button:hover {
      transform: translate3d(0, 0, 0) !important;
    }
  }
}

@media (min-width: 769px) {
  .mobile-app-bottom-nav,
  .mobile-table-hint {
    display: none !important;
  }
}


/* POS thermal print source */


/* Laporan Harian + Owner mobile — satu sumber compact header/footer sizing. */
@media (max-width: 767px) {
  :is(body.mobile-daily-report-page, body.mobile-owner-report-page) .daily-report-table-source .p-datatable-thead > tr,
  :is(body.mobile-daily-report-page, body.mobile-owner-report-page) .daily-report-table-source thead > tr {
    height: 22px !important;
    min-height: 22px !important;
    max-height: 22px !important;
  }

  :is(body.mobile-daily-report-page, body.mobile-owner-report-page) .daily-report-table-source .p-datatable-thead > tr > th,
  :is(body.mobile-daily-report-page, body.mobile-owner-report-page) .daily-report-table-source thead > tr > th {
    height: 22px !important;
    min-height: 22px !important;
    max-height: 22px !important;
    padding: 1px 1px !important;
    margin: 0 !important;
    line-height: 1 !important;
    vertical-align: middle !important;
    box-sizing: border-box !important;
  }

  :is(body.mobile-daily-report-page, body.mobile-owner-report-page) .daily-report-table-source .p-datatable-thead > tr > th *,
  :is(body.mobile-daily-report-page, body.mobile-owner-report-page) .daily-report-table-source thead > tr > th * {
    margin: 0 !important;
    padding: 0 !important;
    min-height: 0 !important;
    line-height: 1 !important;
    font-size: 5.9px !important;
    font-weight: 800 !important;
  }

  :is(body.mobile-daily-report-page, body.mobile-owner-report-page) .daily-report-table-source .p-datatable-tfoot > tr,
  :is(body.mobile-daily-report-page, body.mobile-owner-report-page) .daily-report-table-source tfoot > tr {
    height: 28px !important;
    min-height: 28px !important;
  }

  :is(body.mobile-daily-report-page, body.mobile-owner-report-page) .daily-report-table-source .p-datatable-tfoot > tr > td,
  :is(body.mobile-daily-report-page, body.mobile-owner-report-page) .daily-report-table-source tfoot > tr > td {
    height: 28px !important;
    min-height: 28px !important;
    padding: 2px 1px !important;
    margin: 0 !important;
    line-height: 1.02 !important;
    font-weight: 900 !important;
    vertical-align: middle !important;
  }

  :is(body.mobile-daily-report-page, body.mobile-owner-report-page) .daily-report-table-source .p-datatable-tfoot > tr > td *,
  :is(body.mobile-daily-report-page, body.mobile-owner-report-page) .daily-report-table-source tfoot > tr > td * {
    margin: 0 !important;
    padding: 0 !important;
    font-weight: 900 !important;
    line-height: 1.02 !important;
  }

  /* Owner footer summary: Qty and Total are the table's closing highlights. */
  body.mobile-owner-report-page .daily-report-table-source .p-datatable-tfoot > tr,
  body.mobile-owner-report-page .daily-report-table-source tfoot > tr {
    height: 36px !important;
    min-height: 36px !important;
  }
  body.mobile-owner-report-page .daily-report-table-source .p-datatable-tfoot > tr > td,
  body.mobile-owner-report-page .daily-report-table-source tfoot > tr > td {
    height: 36px !important;
    min-height: 36px !important;
    padding: 5px 3px !important;
  }
  body.mobile-owner-report-page .daily-report-table-source .p-datatable-tfoot > tr > td:nth-child(3),
  body.mobile-owner-report-page .daily-report-table-source tfoot > tr > td:nth-child(3) {
    color: #324b5e !important;
    font-size: 9.5px !important;
    font-weight: 900 !important;
  }
  body.mobile-owner-report-page .daily-report-table-source .p-datatable-tfoot > tr > td:nth-child(4),
  body.mobile-owner-report-page .daily-report-table-source tfoot > tr > td:nth-child(4) {
    color: #16804b !important;
    font-size: 11.5px !important;
    font-weight: 900 !important;
  }
  body.mobile-owner-report-page .daily-report-table-source .p-datatable-tfoot > tr > td:nth-child(3) *,
  body.mobile-owner-report-page .daily-report-table-source tfoot > tr > td:nth-child(3) * {
    font-size: 9.5px !important;
  }
  body.mobile-owner-report-page .daily-report-table-source .p-datatable-tfoot > tr > td:nth-child(4) *,
  body.mobile-owner-report-page .daily-report-table-source tfoot > tr > td:nth-child(4) * {
    color: #16804b !important;
    font-size: 11.5px !important;
  }
}


/* Laporan Owner mobile-first
   Filter dan ringkasan Owner saja yang khusus. Tabel memakai sumber visual bersama Laporan Harian. */
@media (max-width: 767px) {
  body.mobile-owner-report-page .layout-main-container {
    padding-left: 5px !important;
    padding-right: 5px !important;
  }

  /* Owner hanya memiliki Tanggal + Print. Tidak memakai grid empat slot milik Laporan Harian. */
  

  

  

  

  

  



  /* Ringkasan Owner memakai sumber canonical .owner-summary-grid-4 di bawah. */

  /* Tabel Owner memakai satu sumber visual .daily-report-table-source bersama Laporan Harian di atas. */

  /* Rekap akhir memenuhi lebar layar seperti Laporan Harian. */
  body.mobile-owner-report-page .daily-report-recap-source,
  body.mobile-owner-report-page .daily-report-recap-inner {
    display: block !important;
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
  }

  body.mobile-owner-report-page .daily-report-recap-inner table,
  body.mobile-owner-report-page .daily-report-recap-inner tbody {
    width: 100% !important;
    max-width: 100% !important;
  }
}


/* Laporan Owner — ringkasan final 4 card, desktop dan mobile. */
.owner-summary-grid.owner-summary-grid-4 {
  display: grid !important;
  grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
  gap: 10px !important;
  width: 100% !important;
  margin: 0 0 16px !important;
}

.owner-summary-grid-4 .owner-summary-card {
  min-width: 0 !important;
  min-height: 0 !important;
  height: auto !important;
  padding: 12px 13px !important;
  border: 1px solid #e2e8f0 !important;
  border-radius: 10px !important;
  background: #fff !important;
  box-shadow: none !important;
}

.owner-summary-grid-4 .owner-summary-card > span {
  display: block !important;
  margin: 0 0 4px !important;
  color: #475569 !important;
  font-size: 12px !important;
  font-weight: 800 !important;
  line-height: 1.1 !important;
}

.owner-summary-grid-4 .owner-summary-card > strong {
  display: block !important;
  margin: 0 0 5px !important;
  color: #111827 !important;
  font-size: 20px !important;
  font-weight: 900 !important;
  line-height: 1.08 !important;
}

.owner-summary-grid-4 .owner-summary-subvalue {
  margin: 0 0 4px !important;
  color: #475569 !important;
  font-size: 11px !important;
  line-height: 1.2 !important;
}

.owner-summary-grid-4 .owner-summary-subvalue b {
  color: #111827 !important;
  font-weight: 900 !important;
}

.owner-summary-grid-4 .owner-summary-card small {
  display: block !important;
  margin: 0 !important;
  color: #64748b !important;
  font-size: 9px !important;
  line-height: 1.25 !important;
}

.owner-summary-grid-4 .owner-summary-paid {
  background: #f0fdf4 !important;
  border-color: #bbf7d0 !important;
}

.owner-summary-grid-4 .owner-summary-paid > strong,
.owner-summary-grid-4 .owner-summary-paid .owner-summary-subvalue b {
  color: #15803d !important;
}

.owner-summary-grid-4 .owner-summary-unpaid {
  background: #fff1f2 !important;
  border-color: #fecdd3 !important;
}

.owner-summary-grid-4 .owner-summary-unpaid > strong,
.owner-summary-grid-4 .owner-summary-unpaid .owner-summary-subvalue b {
  color: #dc2626 !important;
}

.owner-summary-grid-4 .owner-summary-net {
  background: #ecfdf5 !important;
  border-color: #a7f3d0 !important;
}

.owner-summary-grid-4 .owner-summary-net > strong,
.owner-summary-grid-4 .owner-summary-net .owner-summary-subvalue b {
  color: #059669 !important;
}

/* Mobile Owner card sizing memakai satu sumber canonical pada blok OWNER REPORT di bawah. */


/* ============================================================
   FORM CONTROL MOBILE — satu sumber penataan PrimeVue.
   Input + ikon dibuat sebagai satu kontrol utuh seperti desktop.
   ============================================================ */
@media (max-width: 767px) {
  body.mobile-native-app .p-datepicker,
  body.mobile-native-app .p-calendar {
    display: flex !important;
    align-items: stretch !important;
    gap: 0 !important;
    width: 100% !important;
    min-width: 0 !important;
    min-height: 38px !important;
    padding: 0 !important;
    overflow: hidden !important;
    border: 1px solid #cbd5e1 !important;
    border-radius: 9px !important;
    background: #fff !important;
    box-shadow: none !important;
  }

  body.mobile-native-app .p-datepicker > .p-datepicker-input,
  body.mobile-native-app .p-datepicker > .p-inputtext,
  body.mobile-native-app .p-calendar > .p-inputtext {
    flex: 1 1 auto !important;
    width: 1% !important;
    min-width: 0 !important;
    height: 36px !important;
    min-height: 36px !important;
    margin: 0 !important;
    padding: 0 10px !important;
    border: 0 !important;
    border-radius: 0 !important;
    background: transparent !important;
    box-shadow: none !important;
  }

  body.mobile-native-app .p-datepicker > .p-datepicker-dropdown,
  body.mobile-native-app .p-datepicker > .p-datepicker-trigger,
  body.mobile-native-app .p-datepicker > .p-button-icon-only,
  body.mobile-native-app .p-calendar > .p-datepicker-trigger {
    position: static !important;
    inset: auto !important;
    align-self: stretch !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    flex: 0 0 40px !important;
    width: 40px !important;
    min-width: 40px !important;
    height: auto !important;
    min-height: 36px !important;
    margin: 0 !important;
    padding: 0 !important;
    border: 0 !important;
    border-left: 1px solid #cbd5e1 !important;
    border-radius: 0 !important;
    background: #fff !important;
    box-shadow: none !important;
  }

  body.mobile-native-app .p-datepicker > .p-datepicker-dropdown svg,
  body.mobile-native-app .p-datepicker > .p-datepicker-trigger svg,
  body.mobile-native-app .p-datepicker > .p-button-icon-only svg,
  body.mobile-native-app .p-calendar > .p-datepicker-trigger svg,
  body.mobile-native-app .p-datepicker > .p-datepicker-dropdown .pi,
  body.mobile-native-app .p-datepicker > .p-datepicker-trigger .pi,
  body.mobile-native-app .p-calendar > .p-datepicker-trigger .pi {
    margin: 0 !important;
    transform: none !important;
  }

  body.mobile-native-app .p-inputgroup {
    display: flex !important;
    align-items: stretch !important;
    gap: 0 !important;
    width: 100% !important;
    min-width: 0 !important;
    overflow: hidden !important;
    border-radius: 9px !important;
  }

  body.mobile-native-app .p-inputgroup > .p-inputgroupaddon,
  body.mobile-native-app .p-inputgroup > .p-inputgroup-addon,
  body.mobile-native-app .p-inputgroup > button,
  body.mobile-native-app .p-inputgroup > .p-button {
    margin: 0 !important;
    border-radius: 0 !important;
    box-shadow: none !important;
  }

  /* ============================================================
     DAFTAR TRANSAKSI — filter memakai kontrol dan logika yang
     sudah ada; CSS hanya menyusun versi mobile secara compact.
     ============================================================ */
  body.mobile-transaction-list-page .transaction-existing-filterbar {
    display: grid !important;
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    align-items: end !important;
    gap: 7px !important;
    padding: 9px !important;
    margin-bottom: 9px !important;
  }

  body.mobile-transaction-list-page .transaction-existing-filterbar > .field {
    width: 100% !important;
    min-width: 0 !important;
    margin: 0 !important;
  }

  body.mobile-transaction-list-page .transaction-existing-search-field,
  body.mobile-transaction-list-page .transaction-existing-filterbar > .field:has(.p-datepicker),
  body.mobile-transaction-list-page .transaction-existing-filterbar > .field:has(.p-calendar) {
    grid-column: 1 / -1 !important;
  }

  body.mobile-transaction-list-page .transaction-existing-filterbar > .field > label {
    display: block !important;
    margin: 0 0 4px !important;
    font-size: 10px !important;
    line-height: 1.15 !important;
    font-weight: 600 !important;
    white-space: nowrap !important;
  }

  body.mobile-transaction-list-page .transaction-existing-filterbar .p-inputtext,
  body.mobile-transaction-list-page .transaction-existing-filterbar .p-select,
  body.mobile-transaction-list-page .transaction-existing-filterbar .p-datepicker,
  body.mobile-transaction-list-page .transaction-existing-filterbar .p-calendar {
    width: 100% !important;
    min-width: 0 !important;
    font-size: 11px !important;
  }

  body.mobile-transaction-list-page .transaction-existing-filter-actions {
    grid-column: 1 / -1 !important;
    display: flex !important;
    justify-content: flex-end !important;
    align-items: center !important;
    gap: 6px !important;
    width: 100% !important;
    margin: 0 !important;
  }

  body.mobile-transaction-list-page .transaction-existing-filter-actions .p-button {
    flex: 0 0 auto !important;
    width: auto !important;
    min-width: 78px !important;
    min-height: 32px !important;
    padding: 0 9px !important;
    font-size: 10px !important;
  }

  body.mobile-transaction-list-page .transaction-existing-search,
  body.mobile-transaction-list-page .transaction-existing-search .p-inputgroup {
    width: 100% !important;
    min-width: 0 !important;
  }

  /* ============================================================
     SELURUH SUBMENU LAPORAN (kecuali Harian/Owner yang sudah
     punya layout khusus): referensi compact dari Laporan Harian.
     Tidak mengubah fungsi/filter; hanya mobile presentation.
     ============================================================ */
  body.mobile-report-page:not(.mobile-daily-report-page):not(.mobile-owner-report-page) .mobile-report-root {
    padding-left: 0 !important;
    padding-right: 0 !important;
  }

  body.mobile-report-page:not(.mobile-daily-report-page):not(.mobile-owner-report-page) .mobile-report-root > .card,
  body.mobile-report-page:not(.mobile-daily-report-page):not(.mobile-owner-report-page) .mobile-report-root .card {
    padding: 10px !important;
    border-radius: 12px !important;
  }

  body.mobile-report-page:not(.mobile-daily-report-page):not(.mobile-owner-report-page) .mobile-report-root h5 {
    margin-bottom: 8px !important;
    font-size: 16px !important;
    line-height: 1.2 !important;
  }

  body.mobile-report-page:not(.mobile-daily-report-page):not(.mobile-owner-report-page) .mobile-report-filterbar {
    display: grid !important;
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    align-items: end !important;
    gap: 7px !important;
    padding: 9px !important;
    margin-bottom: 10px !important;
    border-radius: 10px !important;
  }

  body.mobile-report-page:not(.mobile-daily-report-page):not(.mobile-owner-report-page) .mobile-report-filter-field {
    width: 100% !important;
    min-width: 0 !important;
    margin: 0 !important;
  }

  body.mobile-report-page:not(.mobile-daily-report-page):not(.mobile-owner-report-page) .mobile-report-filter-field:has(.p-datepicker),
  body.mobile-report-page:not(.mobile-daily-report-page):not(.mobile-owner-report-page) .mobile-report-filter-field:has(.p-calendar) {
    grid-column: 1 / -1 !important;
  }

  body.mobile-report-page:not(.mobile-daily-report-page):not(.mobile-owner-report-page) .mobile-report-filter-field > label {
    display: block !important;
    margin: 0 0 4px !important;
    font-size: 9.5px !important;
    line-height: 1.15 !important;
    white-space: nowrap !important;
  }

  body.mobile-report-page:not(.mobile-daily-report-page):not(.mobile-owner-report-page) .mobile-report-filter-field .p-inputtext,
  body.mobile-report-page:not(.mobile-daily-report-page):not(.mobile-owner-report-page) .mobile-report-filter-field .p-select,
  body.mobile-report-page:not(.mobile-daily-report-page):not(.mobile-owner-report-page) .mobile-report-filter-field .p-datepicker,
  body.mobile-report-page:not(.mobile-daily-report-page):not(.mobile-owner-report-page) .mobile-report-filter-field .p-calendar {
    width: 100% !important;
    min-width: 0 !important;
    font-size: 10.5px !important;
  }

  body.mobile-report-page:not(.mobile-daily-report-page):not(.mobile-owner-report-page) .mobile-report-filter-actions {
    grid-column: 1 / -1 !important;
    display: flex !important;
    justify-content: flex-end !important;
    align-items: center !important;
    gap: 6px !important;
    width: 100% !important;
    margin: 0 !important;
  }

  body.mobile-report-page:not(.mobile-daily-report-page):not(.mobile-owner-report-page) .mobile-report-filter-actions .p-button {
    flex: 0 0 auto !important;
    width: auto !important;
    min-width: 76px !important;
    min-height: 31px !important;
    padding: 0 8px !important;
    font-size: 9.5px !important;
  }

  body.mobile-report-page:not(.mobile-daily-report-page):not(.mobile-owner-report-page) .mobile-report-summary-grid {
    display: grid !important;
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 7px !important;
    margin-bottom: 10px !important;
  }

  body.mobile-report-page:not(.mobile-daily-report-page):not(.mobile-owner-report-page) .mobile-report-summary-card {
    min-width: 0 !important;
    min-height: 66px !important;
    padding: 8px !important;
    gap: 7px !important;
    border-radius: 10px !important;
    box-shadow: none !important;
  }

  body.mobile-report-page:not(.mobile-daily-report-page):not(.mobile-owner-report-page) .mobile-report-summary-card > div:first-child[class*="rounded-full"] {
    flex: 0 0 28px !important;
    width: 28px !important;
    height: 28px !important;
    padding: 0 !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
  }

  body.mobile-report-page:not(.mobile-daily-report-page):not(.mobile-owner-report-page) .mobile-report-summary-card > div:first-child[class*="rounded-full"] i {
    font-size: 13px !important;
  }

  body.mobile-report-page:not(.mobile-daily-report-page):not(.mobile-owner-report-page) .mobile-report-summary-card p {
    min-width: 0 !important;
    margin: 0 !important;
    line-height: 1.15 !important;
  }

  body.mobile-report-page:not(.mobile-daily-report-page):not(.mobile-owner-report-page) .mobile-report-summary-card p.text-sm,
  body.mobile-report-page:not(.mobile-daily-report-page):not(.mobile-owner-report-page) .mobile-report-summary-card .text-sm {
    font-size: 8px !important;
  }

  body.mobile-report-page:not(.mobile-daily-report-page):not(.mobile-owner-report-page) .mobile-report-summary-card p.text-2xl,
  body.mobile-report-page:not(.mobile-daily-report-page):not(.mobile-owner-report-page) .mobile-report-summary-card .text-2xl {
    font-size: 12px !important;
    line-height: 1.15 !important;
    overflow-wrap: anywhere !important;
  }

  body.mobile-report-page:not(.mobile-daily-report-page):not(.mobile-owner-report-page) .mobile-report-table-toolbar {
    display: flex !important;
    flex-wrap: wrap !important;
    align-items: center !important;
    gap: 7px !important;
    padding: 7px !important;
  }

  body.mobile-report-page:not(.mobile-daily-report-page):not(.mobile-owner-report-page) .mobile-report-table-search {
    flex: 1 1 150px !important;
    width: auto !important;
    min-width: 0 !important;
  }

  body.mobile-report-page:not(.mobile-daily-report-page):not(.mobile-owner-report-page) .mobile-report-table-search .p-inputtext,
  body.mobile-report-page:not(.mobile-daily-report-page):not(.mobile-owner-report-page) .mobile-report-table-search input {
    width: 100% !important;
    min-width: 0 !important;
    height: 34px !important;
    min-height: 34px !important;
    font-size: 10px !important;
  }

  body.mobile-report-page:not(.mobile-daily-report-page):not(.mobile-owner-report-page) .mobile-report-table-toolbar .p-button {
    width: auto !important;
    min-height: 32px !important;
    padding: 0 8px !important;
    font-size: 9.5px !important;
  }
}

/* ============================================================
   MOBILE FORM CONTROL FINAL ALIGNMENT
   Satu sumber untuk InputGroup / DatePicker / Select pada mobile.
   Menyatukan prefix/suffix/icon ke satu bidang tanpa mengubah fungsi.
   ============================================================ */
@media (max-width: 767px) {
  /* INPUT GROUP: satu border luar; addon Rp/Kg tidak menjadi kotak terpisah. */
  body.mobile-native-app .p-inputgroup {
    display: flex !important;
    align-items: stretch !important;
    gap: 0 !important;
    width: 100% !important;
    min-width: 0 !important;
    padding: 0 !important;
    overflow: hidden !important;
    border: 1px solid #cbd5e1 !important;
    border-radius: 9px !important;
    background: #fff !important;
    box-shadow: none !important;
  }

  body.mobile-native-app .p-inputgroup > .p-inputtext,
  body.mobile-native-app .p-inputgroup > input,
  body.mobile-native-app .p-inputgroup > .p-inputnumber,
  body.mobile-native-app .p-inputgroup > .p-inputnumber > .p-inputnumber-input {
    flex: 1 1 auto !important;
    min-width: 0 !important;
    margin: 0 !important;
    border: 0 !important;
    border-radius: 0 !important;
    box-shadow: none !important;
    background: transparent !important;
  }

  body.mobile-native-app .p-inputgroup > .p-inputnumber {
    display: flex !important;
    align-items: stretch !important;
    width: 1% !important;
    padding: 0 !important;
  }

  body.mobile-native-app .p-inputgroup > .p-inputgroupaddon,
  body.mobile-native-app .p-inputgroup > .p-inputgroup-addon {
    position: static !important;
    inset: auto !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    flex: 0 0 auto !important;
    min-width: 38px !important;
    height: auto !important;
    margin: 0 !important;
    padding: 0 10px !important;
    border: 0 !important;
    border-radius: 0 !important;
    background: #f8fafc !important;
    box-shadow: none !important;
    line-height: 1 !important;
  }

  body.mobile-native-app .p-inputgroup > .p-inputgroupaddon:first-child,
  body.mobile-native-app .p-inputgroup > .p-inputgroup-addon:first-child {
    border-right: 1px solid #e2e8f0 !important;
  }

  body.mobile-native-app .p-inputgroup > .p-inputgroupaddon:last-child,
  body.mobile-native-app .p-inputgroup > .p-inputgroup-addon:last-child {
    border-left: 1px solid #e2e8f0 !important;
  }

  /* Jika addon berupa button/icon, tetap berada di dalam border grup. */
  body.mobile-native-app .p-inputgroup > button,
  body.mobile-native-app .p-inputgroup > .p-button {
    position: relative !important;
    inset: auto !important;
    z-index: 1 !important;
    align-self: stretch !important;
    flex: 0 0 42px !important;
    width: 42px !important;
    min-width: 42px !important;
    height: auto !important;
    margin: 0 !important;
    padding: 0 !important;
    border: 0 !important;
    border-left: 1px solid #e2e8f0 !important;
    border-radius: 0 !important;
    box-shadow: none !important;
  }

  /* DATE PICKER: visual tetap menyatu, tetapi input dan tombol kalender tetap clickable. */
  body.mobile-native-app .p-datepicker,
  body.mobile-native-app .p-calendar {
    position: relative !important;
    isolation: isolate !important;
  }

  body.mobile-native-app .p-datepicker > .p-datepicker-input,
  body.mobile-native-app .p-datepicker > .p-inputtext,
  body.mobile-native-app .p-calendar > .p-inputtext {
    position: relative !important;
    z-index: 1 !important;
    pointer-events: auto !important;
  }

  body.mobile-native-app .p-datepicker > .p-datepicker-dropdown,
  body.mobile-native-app .p-datepicker > .p-datepicker-trigger,
  body.mobile-native-app .p-datepicker > .p-button-icon-only,
  body.mobile-native-app .p-calendar > .p-datepicker-trigger {
    position: relative !important;
    inset: auto !important;
    z-index: 2 !important;
    pointer-events: auto !important;
    touch-action: manipulation !important;
  }

  /* SELECT/DROPDOWN: label dan chevron selalu center vertikal. */
  body.mobile-native-app .p-select,
  body.mobile-native-app .p-dropdown {
    position: relative !important;
    display: flex !important;
    align-items: stretch !important;
    overflow: hidden !important;
  }

  body.mobile-native-app .p-select > .p-select-label,
  body.mobile-native-app .p-dropdown > .p-dropdown-label {
    display: flex !important;
    align-items: center !important;
    align-self: stretch !important;
    min-height: 100% !important;
    margin: 0 !important;
    padding-top: 0 !important;
    padding-bottom: 0 !important;
    line-height: 1.2 !important;
  }

  body.mobile-native-app .p-select > .p-select-dropdown,
  body.mobile-native-app .p-dropdown > .p-dropdown-trigger {
    position: relative !important;
    inset: auto !important;
    top: auto !important;
    right: auto !important;
    bottom: auto !important;
    align-self: stretch !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    height: auto !important;
    margin: 0 !important;
    padding-top: 0 !important;
    padding-bottom: 0 !important;
    transform: none !important;
  }

  body.mobile-native-app .p-select > .p-select-dropdown > *,
  body.mobile-native-app .p-dropdown > .p-dropdown-trigger > * {
    position: static !important;
    inset: auto !important;
    margin: 0 !important;
    transform: none !important;
    line-height: 1 !important;
  }

  /* POS Select/Dropdown memakai sumber global mobile di atas; tidak ada geometri khusus per status pembayaran. */
  body.mobile-transaction-page .p-inputgroup > .p-inputgroupaddon,
  body.mobile-transaction-page .p-inputgroup > .p-inputgroup-addon,
  body.mobile-transaction-page .p-inputgroup > button,
  body.mobile-transaction-page .p-inputgroup > .p-button {
    min-height: 46px !important;
  }
}nn/* ============================================================
   REPORT MOBILE — single visual source
   Card laporan mobile menggunakan satu ritme/layout yang sama.
   ============================================================ */
@media (max-width: 767px) {
  /* ---------- Deposit & Paket Member ---------- */
  body.mobile-report-page .deposit-report-card {
    padding: 10px !important;
    border-radius: 12px !important;
  }

  /* ---------- Ringkasan mobile: Deposit & Laporan Transaksi ---------- */
  /* Satu pola visual yang sama untuk kedua laporan: ikon kiri, teks kanan,
     tinggi/padding/typography identik. Tidak menyentuh Harian atau Owner. */
  .deposit-report-summary,
  .transaction-report-summary {
    display: grid !important;
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 8px !important;
    margin: 0 0 12px !important;
  }

  .deposit-report-summary-card,
  .transaction-report-summary-card {
    display: grid !important;
    grid-template-columns: 32px minmax(0, 1fr) !important;
    grid-template-rows: 1fr !important;
    align-items: center !important;
    min-width: 0 !important;
    min-height: 72px !important;
    padding: 9px !important;
    column-gap: 8px !important;
    border-radius: 11px !important;
    background: #fff !important;
    box-shadow: none !important;
  }

  .deposit-report-member-card {
    border: 1px solid #dbeafe !important;
  }

  .deposit-report-balance-card {
    border: 1px solid #d1fae5 !important;
  }

  /* Deposit: markup aslinya teks dulu baru ikon. Visualnya dibalik via grid,
     sehingga tidak perlu mengubah fungsi/render JS. */
  .deposit-report-summary-card > div:first-child {
    grid-column: 2 !important;
    grid-row: 1 !important;
    display: flex !important;
    min-width: 0 !important;
    height: 100% !important;
    flex-direction: column !important;
    justify-content: center !important;
    align-items: flex-start !important;
    gap: 4px !important;
    margin: 0 !important;
  }

  .deposit-report-summary-card > div:last-child[class*="rounded-full"] {
    grid-column: 1 !important;
    grid-row: 1 !important;
  }

  /* Transaksi: markup aslinya ikon dulu lalu teks. */
  .transaction-report-summary-card > div:first-child[class*="rounded-full"] {
    grid-column: 1 !important;
    grid-row: 1 !important;
  }

  .transaction-report-summary-card > div:last-child {
    grid-column: 2 !important;
    grid-row: 1 !important;
    display: flex !important;
    min-width: 0 !important;
    height: 100% !important;
    flex-direction: column !important;
    justify-content: center !important;
    align-items: flex-start !important;
    gap: 4px !important;
    margin: 0 !important;
  }

  .deposit-report-summary-card > div:last-child[class*="rounded-full"],
  .transaction-report-summary-card > div:first-child[class*="rounded-full"] {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: 32px !important;
    height: 32px !important;
    min-width: 32px !important;
    max-width: 32px !important;
    padding: 0 !important;
    margin: 0 !important;
    align-self: center !important;
  }

  .deposit-report-summary-card > div:last-child[class*="rounded-full"] i,
  .transaction-report-summary-card > div:first-child[class*="rounded-full"] i {
    font-size: 14px !important;
    line-height: 1 !important;
  }

  .deposit-report-summary-card > div:first-child > span,
  .transaction-report-summary-card p.text-sm,
  .transaction-report-summary-card > div:last-child > p:first-child {
    display: block !important;
    min-width: 0 !important;
    margin: 0 !important;
    font-size: 8.5px !important;
    font-weight: 700 !important;
    line-height: 1.18 !important;
    white-space: normal !important;
    overflow-wrap: anywhere !important;
  }

  .deposit-report-summary-card > div:first-child > span {
    color: #64748b !important;
  }

  .deposit-report-summary-value,
  .transaction-report-summary-card p.text-2xl,
  .transaction-report-summary-card > div:last-child > p:last-child {
    display: block !important;
    min-width: 0 !important;
    margin: 0 !important;
    font-size: 13px !important;
    font-weight: 900 !important;
    line-height: 1.18 !important;
    white-space: normal !important;
    overflow-wrap: anywhere !important;
  }

  .deposit-report-summary-value {
    color: #1f2937 !important;
  }

  /* "4 Nota" diperlakukan sebagai satu nilai, bukan angka besar + satuan kecil. */
  .transaction-report-summary-card p.text-2xl > span.text-sm {
    font-size: 13px !important;
    font-weight: 900 !important;
    line-height: inherit !important;
    color: inherit !important;
  }

  .deposit-report-toolbar {
    display: flex !important;
    align-items: center !important;
    width: 100% !important;
    gap: 7px !important;
    flex-wrap: nowrap !important;
  }

  .deposit-report-toolbar > .p-button {
    flex: 0 0 auto !important;
    width: auto !important;
    min-width: 0 !important;
    min-height: 36px !important;
    padding: 0 10px !important;
    font-size: 10px !important;
  }

  .deposit-report-toolbar .p-iconfield,
  .deposit-report-toolbar .p-inputgroup,
  .deposit-report-toolbar .p-input-icon-left {
    flex: 1 1 auto !important;
    min-width: 0 !important;
  }

  /* ---------- Rekap & Total Netto ---------- */
  /* Spacer tetap ruang kosong murni. */
  body.mobile-daily-report-page .daily-report-recap-inner tbody > tr:nth-last-child(2),
  body.mobile-owner-report-page .daily-report-recap-inner tbody > tr:nth-last-child(2) {
    height: 12px !important;
    background: transparent !important;
  }

  body.mobile-daily-report-page .daily-report-recap-inner tbody > tr:nth-last-child(2) > td,
  body.mobile-owner-report-page .daily-report-recap-inner tbody > tr:nth-last-child(2) > td {
    height: 12px !important;
    min-height: 12px !important;
    padding: 0 !important;
    border: 0 !important;
    background: transparent !important;
    color: transparent !important;
    font-size: 0 !important;
    line-height: 0 !important;
  }

  /* Hasil akhir dibuat satu banner hijau kuat tanpa garis sel di tengah. */
  body.mobile-daily-report-page .daily-report-recap-inner tbody > tr:last-child > td,
  body.mobile-owner-report-page .daily-report-recap-inner tbody > tr:last-child > td {
    padding: 11px 10px !important;
    background: #059669 !important;
    border: 0 !important;
    color: #fff !important;
    font-weight: 900 !important;
    line-height: 1.15 !important;
  }

  body.mobile-daily-report-page .daily-report-recap-inner tbody > tr:last-child > td:first-child,
  body.mobile-owner-report-page .daily-report-recap-inner tbody > tr:last-child > td:first-child {
    border-radius: 10px 0 0 10px !important;
    font-size: 14px !important;
    letter-spacing: .01em !important;
  }

  body.mobile-daily-report-page .daily-report-recap-inner tbody > tr:last-child > td:last-child,
  body.mobile-owner-report-page .daily-report-recap-inner tbody > tr:last-child > td:last-child {
    border-radius: 0 10px 10px 0 !important;
    font-size: 17px !important;
    text-align: right !important;
  }

  /* Owner: komisi berbeda jelas dari Pendapatan Bersih. */
  body.mobile-owner-report-page .owner-summary-grid-4 .owner-summary-net .owner-summary-subvalue {
    color: #64748b !important;
    font-weight: 700 !important;
  }

  body.mobile-owner-report-page .owner-summary-grid-4 .owner-summary-net .owner-summary-subvalue b {
    color: #dc2626 !important;
    font-weight: 900 !important;
  }
}

.owner-summary-grid-4 .owner-summary-net .owner-summary-subvalue {
  color: #64748b !important;
}
.owner-summary-grid-4 .owner-summary-net .owner-summary-subvalue b {
  color: #dc2626 !important;
  font-weight: 900 !important;
}


/* ============================================================
   MOBILE UNIFIED SUMMARY CARDS — Deposit + Laporan Transaksi
   Kelas ini ditempel langsung pada markup bundle kedua laporan.
   Tidak berlaku untuk Laporan Harian / Owner.
   ============================================================ */
/* Deposit summary — compact canonical proportion, desktop + mobile. */
.deposit-summary-compact-source{
  gap:10px !important;
  margin-bottom:14px !important;
}
.deposit-summary-card-source{
  min-height:72px !important;
  padding:11px 13px !important;
}
.deposit-summary-card-source > div[class*="rounded-full"]{
  width:36px !important;
  min-width:36px !important;
  height:36px !important;
  min-height:36px !important;
}

@media (max-width: 767px) {
  .mobile-unified-summary-grid {
    display: grid !important;
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 8px !important;
    margin-bottom: 12px !important;
  }

  .mobile-unified-summary-card {
    box-sizing: border-box !important;
    display: grid !important;
    grid-template-columns: 34px minmax(0, 1fr) !important;
    align-items: center !important;
    gap: 9px !important;
    min-width: 0 !important;
    min-height: 80px !important;
    height: 80px !important;
    padding: 10px !important;
    margin: 0 !important;
    border-radius: 12px !important;
    background: #fff !important;
    box-shadow: none !important;
    overflow: hidden !important;
  }

  /* Semua ikon ringkasan identik */
  .mobile-unified-summary-card > div[class*="rounded-full"] {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: 34px !important;
    min-width: 34px !important;
    max-width: 34px !important;
    height: 34px !important;
    min-height: 34px !important;
    max-height: 34px !important;
    padding: 0 !important;
    margin: 0 !important;
    border-radius: 50% !important;
    grid-column: 1 !important;
    grid-row: 1 !important;
  }

  .mobile-unified-summary-card > div[class*="rounded-full"] i {
    font-size: 14px !important;
    line-height: 1 !important;
  }

  /* Deposit: DOM-nya teks lalu ikon. Paksa teks ke kolom kanan. */
  .deposit-report-summary .mobile-unified-summary-card > div:first-child:not([class*="rounded-full"]) {
    grid-column: 2 !important;
    grid-row: 1 !important;
    min-width: 0 !important;
    display: flex !important;
    flex-direction: column !important;
    justify-content: center !important;
    align-items: flex-start !important;
    gap: 4px !important;
    margin: 0 !important;
  }

  /* Transaksi: DOM-nya ikon lalu teks. */
  .transaction-report-summary .mobile-unified-summary-card > div:last-child:not([class*="rounded-full"]) {
    grid-column: 2 !important;
    grid-row: 1 !important;
    min-width: 0 !important;
    display: flex !important;
    flex-direction: column !important;
    justify-content: center !important;
    align-items: flex-start !important;
    gap: 4px !important;
    margin: 0 !important;
  }

  /* Judul seragam */
  .deposit-report-summary .mobile-unified-summary-card span[class*="font-medium"],
  .transaction-report-summary .mobile-unified-summary-card p.text-sm {
    display: block !important;
    margin: 0 !important;
    padding: 0 !important;
    font-size: 9px !important;
    font-weight: 700 !important;
    line-height: 1.2 !important;
    white-space: normal !important;
    overflow-wrap: anywhere !important;
  }

  /* Nilai seragam */
  .deposit-report-summary .mobile-unified-summary-card .text-2xl,
  .transaction-report-summary .mobile-unified-summary-card p.text-2xl {
    display: block !important;
    margin: 0 !important;
    padding: 0 !important;
    font-size: 14px !important;
    font-weight: 800 !important;
    line-height: 1.2 !important;
    white-space: normal !important;
    overflow-wrap: anywhere !important;
  }

  /* '4 Nota' satu baseline dan satu ukuran */
  .transaction-report-summary .mobile-unified-summary-card p.text-2xl > span.text-sm {
    display: inline !important;
    margin-left: 2px !important;
    font-size: 14px !important;
    font-weight: 800 !important;
    line-height: inherit !important;
    color: inherit !important;
    vertical-align: baseline !important;
  }

  /* Pertahankan aksen warna melalui border, tetapi struktur tetap identik. */
  .deposit-report-member-card { border: 1px solid #dbeafe !important; }
  .deposit-report-balance-card { border: 1px solid #d1fae5 !important; }

  /* Deposit memakai proporsi lebih padat karena hanya memiliki satu label + satu nilai. */
  .deposit-summary-compact-source{
    gap:8px !important;
    margin-bottom:12px !important;
  }
  .deposit-summary-card-source{
    min-height:66px !important;
    height:66px !important;
    padding:8px 9px !important;
    grid-template-columns:32px minmax(0,1fr) !important;
    gap:8px !important;
  }
  .deposit-summary-card-source > div[class*="rounded-full"]{
    width:32px !important;
    min-width:32px !important;
    max-width:32px !important;
    height:32px !important;
    min-height:32px !important;
    max-height:32px !important;
  }
}

/* Laporan Owner — ikon card tanpa mengubah bundle/markup Owner. */
.owner-summary-grid-4 .owner-summary-card {
  position: relative !important;
  padding-left: 58px !important;
}
.owner-summary-grid-4 .owner-summary-card::before {
  position: absolute !important;
  left: 13px !important;
  top: 50% !important;
  transform: translateY(-50%) !important;
  width: 34px !important;
  height: 34px !important;
  border-radius: 50% !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  font-family: "primeicons" !important;
  font-style: normal !important;
  font-weight: normal !important;
  font-size: 15px !important;
  line-height: 1 !important;
}
.owner-summary-grid-4 .owner-summary-orders::before {
  content: "" !important; /* pi-receipt */
  background: #dbeafe !important;
  color: #2563eb !important;
}
.owner-summary-grid-4 .owner-summary-paid::before {
  content: "" !important; /* pi-check-circle */
  background: #dcfce7 !important;
  color: #16a34a !important;
}
.owner-summary-grid-4 .owner-summary-unpaid::before {
  content: "" !important; /* pi-clock */
  background: #ffe4e6 !important;
  color: #e11d48 !important;
}
.owner-summary-grid-4 .owner-summary-net::before {
  content: "" !important; /* pi-wallet */
  background: #d1fae5 !important;
  color: #059669 !important;
}
/* Ikon Owner mobile mengikuti satu sumber canonical OWNER REPORT berikut. */


/* ============================================================
   OWNER REPORT — CANONICAL mobile summary card source
   Hanya visual Owner. Fungsi laporan/rekap/tabel tidak diubah.
   ============================================================ */
@media (max-width: 767px) {
  /* Toolbar: tanggal lebih ringkas, Print + Export tetap terlihat penuh. */
  

  

  

  

  

  

  /* Card Owner: satu pola seperti card laporan lain, tetap 2 kolom. */
  body.mobile-owner-report-page .owner-summary-grid.owner-summary-grid-4 {
    display: grid !important;
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 12px !important;
    margin: 0 0 20px !important;
  }

  body.mobile-owner-report-page .owner-summary-grid-4 .owner-summary-card {
    box-sizing: border-box !important;
    display: flex !important;
    flex-direction: column !important;
    justify-content: center !important;
    min-width: 0 !important;
    min-height: 92px !important;
    padding: 10px 9px 9px 48px !important;
    border-radius: 10px !important;
    overflow: hidden !important;
  }

  body.mobile-owner-report-page .owner-summary-grid-4 .owner-summary-card::before {
    left: 9px !important;
    width: 30px !important;
    height: 30px !important;
    font-size: 13px !important;
  }

  body.mobile-owner-report-page .owner-summary-grid-4 .owner-summary-card > span {
    display: block !important;
    margin: 0 0 3px !important;
    color: #475569 !important;
    font-size: 9px !important;
    font-weight: 800 !important;
    line-height: 1.15 !important;
  }

  body.mobile-owner-report-page .owner-summary-grid-4 .owner-summary-card > strong {
    display: block !important;
    margin: 0 0 3px !important;
    font-size: 15px !important;
    font-weight: 900 !important;
    line-height: 1.05 !important;
    letter-spacing: -.01em !important;
  }

  body.mobile-owner-report-page .owner-summary-grid-4 .owner-summary-subvalue {
    display: block !important;
    margin: 0 0 3px !important;
    font-size: 8px !important;
    font-weight: 700 !important;
    line-height: 1.18 !important;
  }

  body.mobile-owner-report-page .owner-summary-grid-4 .owner-summary-card small {
    display: block !important;
    margin: 0 !important;
    color: #64748b !important;
    font-size: 7px !important;
    line-height: 1.22 !important;
  }

  body.mobile-owner-report-page .owner-summary-grid-4 .owner-summary-net .owner-summary-subvalue,
  body.mobile-owner-report-page .owner-summary-grid-4 .owner-summary-net .owner-summary-subvalue b {
    color: #dc2626 !important;
  }
}

/* =========================================================
   2026-08-14 — Final report stability + global footer
   ========================================================= */

/* Footer global: dipakai dari login sampai seluruh halaman aplikasi. */
.laundry-global-footer {
  display: block;
  width: 100%;
  margin: 18px 0 0;
  padding: 14px 16px 16px;
  text-align: center;
  color: #64748b;
  font-size: 12px;
  font-weight: 600;
  line-height: 1.35;
  letter-spacing: .01em;
  background: transparent;
  background-image: none;
  box-shadow: none;
  border: 0;
}

@media (max-width: 767px) {
  /* Owner: tanggal, Print, Export Excel = tiga kontrol dengan lebar visual setara. */
  

  

  

  /* Deposit Member: paginator footer dibuat bersih dan stabil di mobile. */
  body.mobile-deposit-report-page .p-paginator {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    flex-wrap: nowrap !important;
    gap: 4px !important;
    width: 100% !important;
    min-height: 40px !important;
    margin: 6px 0 0 !important;
    padding: 5px 4px !important;
    border: 0 !important;
    background: transparent !important;
    overflow: visible !important;
  }

  body.mobile-deposit-report-page .p-paginator-current,
  body.mobile-deposit-report-page .p-paginator-rpp-dropdown,
  body.mobile-deposit-report-page .p-paginator-rpp-options,
  body.mobile-deposit-report-page .p-paginator .p-select,
  body.mobile-deposit-report-page .p-paginator [class*="rowsperpage" i] {
    display: none !important;
  }

  body.mobile-deposit-report-page .p-paginator-pages {
    display: inline-flex !important;
    align-items: center !important;
    gap: 3px !important;
    flex: 0 0 auto !important;
  }

  body.mobile-deposit-report-page .p-paginator .p-paginator-page,
  body.mobile-deposit-report-page .p-paginator .p-paginator-first,
  body.mobile-deposit-report-page .p-paginator .p-paginator-prev,
  body.mobile-deposit-report-page .p-paginator .p-paginator-next,
  body.mobile-deposit-report-page .p-paginator .p-paginator-last {
    width: 30px !important;
    min-width: 30px !important;
    height: 30px !important;
    min-height: 30px !important;
    margin: 0 !important;
    padding: 0 !important;
    border-radius: 8px !important;
  }

  /* Cegah scroll anchoring browser menggeser viewport saat tabel/report selesai render. */
  body.mobile-deposit-report-page .layout-main,
  body.mobile-deposit-report-page .p-datatable,
  body.mobile-deposit-report-page .p-datatable-wrapper,
  body.mobile-deposit-report-page .p-paginator,
  body.mobile-summary-report-page .layout-main,
  body.mobile-summary-report-page .p-datatable,
  body.mobile-summary-report-page .p-datatable-wrapper,
  body.mobile-summary-report-page .mobile-report-root {
    overflow-anchor: none !important;
  }

  /* Jangan paksa container Summary menjadi scroller sendiri. Satu-satunya scroll tetap halaman. */
  body.mobile-summary-report-page .layout-main,
  body.mobile-summary-report-page .mobile-report-root,
  body.mobile-summary-report-page .card,
  body.mobile-summary-report-page .surface-card,
  body.mobile-summary-report-page .p-card,
  body.mobile-summary-report-page .p-panel,
  body.mobile-summary-report-page .p-datatable,
  body.mobile-summary-report-page .p-datatable-wrapper {
    max-height: none !important;
  }

  body.mobile-summary-report-page .layout-main,
  body.mobile-summary-report-page .mobile-report-root,
  body.mobile-summary-report-page .p-datatable {
    overflow-y: visible !important;
  }

  /* Footer mobile tetap terlihat tanpa tertutup bottom navigation. */
  body.mobile-native-app .laundry-global-footer {
    margin-top: 10px;
    padding: 12px 12px calc(var(--mobile-bottom-height, 78px) + env(safe-area-inset-bottom) + 10px);
    font-size: 10.5px;
  }

  body.mobile-login-page .laundry-global-footer {
    margin-top: 0 !important;
    padding: 2px 12px calc(4px + env(safe-area-inset-bottom)) !important;
    font-size: 10.5px;
    background: transparent !important;
    background-image: none !important;
    box-shadow: none !important;
    border: 0 !important;
  }
}

/* =========================================================
   Owner toolbar + Deposit paginator — canonical mobile source
   Elemen ditandai langsung oleh mobile-app.js setelah dirender.
   ========================================================= */
@media (max-width: 767px) {
  /* OWNER: pertahankan ukuran tanggal yang compact. Print dan Export
     menggunakan lebar yang sama dengan field tanggal, bukan sebaliknya. */
  

  

  

  

  

  

  /* DEPOSIT: parent dan paginator sama-sama dibuat full width; grup tombol
     dipusatkan dari elemen paginator yang benar-benar dirender. */
  body.mobile-deposit-report-page .mobile-deposit-paginator-wrap {
    display: flex !important;
    justify-content: center !important;
    align-items: center !important;
    width: 100% !important;
    max-width: 100% !important;
    box-sizing: border-box !important;
  }

  body.mobile-deposit-report-page .deposit-filter-source{
    padding:12px !important;
    gap:10px !important;
    margin-bottom:12px !important;
    border-radius:12px !important;
  }
  body.mobile-deposit-report-page .deposit-page-heading-source{
    margin-bottom:12px !important;
  }
  body.mobile-deposit-report-page .mobile-deposit-paginator-source {
    display: flex !important;
    flex-direction: row !important;
    flex-wrap: nowrap !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 4px !important;
    width: 100% !important;
    max-width: 100% !important;
    margin: 8px auto 0 !important;
    padding: 5px 0 !important;
    border: 0 !important;
    background: transparent !important;
    box-sizing: border-box !important;
  }

  body.mobile-deposit-report-page .mobile-deposit-paginator-source .p-paginator-pages {
    display: inline-flex !important;
    flex: 0 0 auto !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 3px !important;
    width: auto !important;
    margin: 0 !important;
  }

  body.mobile-deposit-report-page .mobile-deposit-paginator-source .p-paginator-current,
  body.mobile-deposit-report-page .mobile-deposit-paginator-source .p-paginator-rpp-dropdown,
  body.mobile-deposit-report-page .mobile-deposit-paginator-source .p-paginator-rpp-options,
  body.mobile-deposit-report-page .mobile-deposit-paginator-source .p-select,
  body.mobile-deposit-report-page .mobile-deposit-paginator-source [class*="rowsperpage" i] {
    display: none !important;
  }

  body.mobile-deposit-report-page .mobile-deposit-paginator-source .p-paginator-page,
  body.mobile-deposit-report-page .mobile-deposit-paginator-source .p-paginator-first,
  body.mobile-deposit-report-page .mobile-deposit-paginator-source .p-paginator-prev,
  body.mobile-deposit-report-page .mobile-deposit-paginator-source .p-paginator-next,
  body.mobile-deposit-report-page .mobile-deposit-paginator-source .p-paginator-last {
    flex: 0 0 30px !important;
    width: 30px !important;
    min-width: 30px !important;
    height: 30px !important;
    min-height: 30px !important;
    margin: 0 !important;
    padding: 0 !important;
    border-radius: 8px !important;
  }
}

/* Dashboard Riwayat Login memakai paginator PrimeVue yang sama dengan tabel lain. */
/* Restored Data Transaksi sort uses the existing PrimeVue DataTable sort source. */
.laundry-bluetooth-print-btn{gap:7px}
.laundry-direct-print-toast{position:fixed;z-index:100001;left:50%;bottom:22px;transform:translateX(-50%);max-width:min(92vw,520px);background:#166534;color:#fff;padding:10px 14px;border-radius:10px;font-weight:700;text-align:center;box-shadow:0 8px 30px rgba(0,0,0,.2)}
.laundry-direct-print-toast.is-error{background:#b91c1c}
@media(max-width:767px){.laundry-bluetooth-print-btn{width:100%!important}}

/* ================================================================
   SWP Laundry POS — SATU-SATUNYA SUMBER KONTROL + REKAP LAPORAN
   Dipakai bersama oleh Laporan Harian dan Laporan Owner.
   ================================================================ */
.report-control-label-spacer{visibility:hidden!important;pointer-events:none!important;user-select:none!important}

@media(max-width:767px){
  .daily-report-controls-source{
    display:grid!important;
    grid-template-columns:var(--report-mobile-control-columns,repeat(2,minmax(0,1fr)))!important;
    grid-auto-flow:row!important;
    grid-auto-columns:auto!important;
    gap:10px!important;
    align-items:start!important;
    width:100%!important;max-width:100%!important;min-width:0!important;
    margin:0 0 20px!important;padding:0!important;border:0!important;background:transparent!important;
    box-sizing:border-box!important
  }
  .daily-report-controls-source>.report-control-cell{
    display:grid!important;grid-template-rows:18px 44px!important;row-gap:6px!important;
    width:100%!important;max-width:100%!important;min-width:0!important;
    margin:0!important;padding:0!important;box-sizing:border-box!important
  }
  .daily-report-controls-source>.report-control-cell>label,
  .daily-report-controls-source>.report-control-cell>.report-control-label-spacer{
    display:block!important;width:100%!important;height:18px!important;min-height:18px!important;max-height:18px!important;
    margin:0!important;padding:0!important;color:#475569!important;font-size:.68rem!important;font-weight:650!important;
    line-height:18px!important;white-space:nowrap!important;overflow:hidden!important;text-overflow:ellipsis!important;
    box-sizing:border-box!important
  }
  .daily-report-date-control-source,.daily-report-time-select-source,.daily-report-export-button-source{
    grid-row:2!important;width:100%!important;max-width:100%!important;min-width:0!important;
    height:44px!important;min-height:44px!important;max-height:44px!important;
    margin:0!important;box-sizing:border-box!important;border-radius:10px!important
  }
  .daily-report-date-control-source{
    position:relative!important;display:block!important;padding:0!important;overflow:hidden!important
  }
  .daily-report-date-control-source .p-inputtext,
  .daily-report-date-control-source .p-datepicker-input{
    position:absolute!important;
    top:50%!important;bottom:auto!important;left:0!important;right:34px!important;
    transform:translateY(-50%)!important;
    width:calc(100% - 34px)!important;min-width:0!important;max-width:calc(100% - 34px)!important;
    height:44px!important;min-height:44px!important;max-height:44px!important;
    margin:0!important;padding:0 10px!important;box-sizing:border-box!important;
    border-radius:10px 0 0 10px!important;
    font-size:.78rem!important;line-height:44px!important;
    text-align:left!important;text-indent:0!important;vertical-align:baseline!important;
    appearance:none!important;-webkit-appearance:none!important
  }
  .daily-report-date-control-source .p-datepicker-trigger,
  .daily-report-date-control-source .p-datepicker-dropdown{
    position:absolute!important;top:0!important;right:0!important;z-index:2!important;
    display:flex!important;align-items:center!important;justify-content:center!important;
    width:34px!important;min-width:34px!important;max-width:34px!important;
    height:44px!important;min-height:44px!important;max-height:44px!important;
    margin:0!important;padding:0!important
  }
  /* Canonical mobile report grid. The controls themselves keep ONE shared
     geometry source; only the page grid differs: Daily=4 columns, Owner=3. */
  body.mobile-daily-report-page .daily-report-controls-source{
    grid-template-columns:repeat(4,minmax(0,1fr))!important;
    gap:6px!important;
  }
  body.mobile-owner-report-page .daily-report-controls-source{
    grid-template-columns:repeat(3,minmax(0,1fr))!important;
    gap:7px!important;
  }

  .daily-report-export-button-source{
    display:inline-flex!important;align-items:center!important;justify-content:center!important;padding:0 2px!important;
    white-space:nowrap!important;font-size:7px!important;line-height:1!important
  }
  .daily-report-export-button-source .p-button-label,.daily-report-export-button-source .p-button-icon{
    font-size:7px!important;line-height:1!important
  }

  /* Satu format rekap untuk Harian dan Owner. */
  .daily-report-recap-source,.daily-report-recap-inner,.daily-report-recap-inner table,.daily-report-recap-inner tbody{
    display:block!important;width:100%!important;max-width:100%!important;min-width:0!important;margin:12px 0 0!important
  }
  .daily-report-recap-inner tr{
    display:grid!important;grid-template-columns:minmax(0,1fr) auto!important;align-items:center!important;gap:8px!important;
    width:100%!important;margin:0 0 5px!important;padding:9px 10px!important;border:1px solid #e2e8f0!important;
    border-radius:8px!important;box-sizing:border-box!important
  }
  .daily-report-recap-inner td{
    display:block!important;width:auto!important;min-width:0!important;padding:0!important;border:0!important;
    background:transparent!important;font-size:.78rem!important;font-weight:800!important;line-height:1.15!important
  }
  .daily-report-recap-inner td:last-child{
    margin-left:auto!important;font-size:.9rem!important;font-weight:900!important;text-align:right!important;white-space:nowrap!important
  }
  .daily-report-recap-inner .report-recap-spacer-source{
    display:block!important;height:12px!important;min-height:12px!important;margin:0!important;padding:0!important;
    border:0!important;background:transparent!important
  }
  .daily-report-recap-inner .report-recap-spacer-source td{
    display:block!important;height:12px!important;min-height:12px!important;padding:0!important;border:0!important;
    background:transparent!important;color:transparent!important;font-size:0!important;line-height:0!important
  }
  .daily-report-recap-inner tr:last-child{
    margin-top:7px!important;padding:11px 10px!important;border:2px solid #22c55e!important;background:#ecfdf5!important
  }
  .daily-report-recap-inner tr:last-child td:first-child{color:#166534!important;font-size:.9rem!important}
  .daily-report-recap-inner tr:last-child td:last-child{color:#15803d!important;font-size:1.05rem!important}
}

@media(min-width:768px){
  /* Sumber desktop tunggal untuk Laporan Harian + Laporan Owner. */
  .daily-report-view{
    width:100%!important;max-width:100%!important;min-width:0!important;
    padding:24px 28px!important;border-radius:12px!important;box-sizing:border-box!important
  }
  .report-title-period-source{
    display:flex!important;align-items:center!important;justify-content:space-between!important;gap:18px!important;flex-wrap:nowrap!important;
    width:100%!important;min-width:0!important;margin:0 0 18px!important;font-size:1.12rem!important;line-height:1.35!important;font-weight:800!important;color:#172033!important
  }
  .report-title-period-source .report-title-source{flex:0 0 auto!important;min-width:0!important}
  .report-period-source{flex:1 1 auto!important;min-width:0!important;margin-left:auto!important;text-align:right!important;white-space:nowrap!important;font-size:.92rem!important;font-weight:650!important;color:#64748b!important}
  .daily-report-controls-source{
    display:grid!important;grid-template-columns:var(--report-control-columns,repeat(4,minmax(0,1fr)))!important;gap:14px!important;
    align-items:end!important;width:100%!important;max-width:100%!important;min-width:0!important;margin:0 0 20px!important;padding:0!important;border:0!important;background:transparent!important
  }
  .daily-report-controls-source>.report-control-cell{width:100%!important;min-width:0!important;margin:0!important}
  .daily-report-controls-source>.report-control-cell>label,
  .daily-report-controls-source>.report-control-cell>.report-control-label-spacer{
    display:block!important;margin:0 0 7px!important;min-height:18px!important;font-size:.86rem!important;line-height:18px!important;font-weight:750!important;color:#334155!important
  }
  .daily-report-date-control-source,
  .daily-report-time-select-source,
  .daily-report-export-button-source{
    width:100%!important;max-width:100%!important;min-width:0!important;height:42px!important;min-height:42px!important;box-sizing:border-box!important
  }
  .daily-report-export-button-source{display:flex!important;align-items:center!important;justify-content:center!important}

  .owner-summary-grid.owner-summary-grid-4{
    display:grid!important;grid-template-columns:repeat(4,minmax(0,1fr))!important;gap:12px!important;
    width:100%!important;margin:0 0 18px!important
  }
  .owner-summary-grid-4 .owner-summary-card{
    min-width:0!important;min-height:118px!important;height:100%!important;padding:16px 18px 16px 64px!important;
    display:flex!important;flex-direction:column!important;align-items:flex-start!important;justify-content:center!important;
    overflow:hidden!important;border-radius:12px!important;box-sizing:border-box!important
  }
  .owner-summary-grid-4 .owner-summary-card::before{
    left:16px!important;width:34px!important;height:34px!important
  }
  .owner-summary-grid-4 .owner-summary-card>span,
  .owner-summary-grid-4 .owner-summary-card>strong,
  .owner-summary-grid-4 .owner-summary-subvalue,
  .owner-summary-grid-4 .owner-summary-card>small{
    position:relative!important;z-index:1!important;width:100%!important;max-width:100%!important;min-width:0!important;overflow-wrap:anywhere!important
  }
  .owner-summary-grid-4 .owner-summary-card>strong{font-size:1.35rem!important;line-height:1.1!important;margin:2px 0 4px!important}
  .owner-summary-grid-4 .owner-summary-subvalue{font-size:.78rem!important;line-height:1.2!important;margin:0 0 4px!important}
  .owner-summary-grid-4 .owner-summary-card>small{font-size:.7rem!important;line-height:1.25!important}

  .daily-report-table-source{width:100%!important;max-width:100%!important;margin:0!important}
  .daily-report-table-source table,.daily-report-table-source .p-datatable-table{width:100%!important;table-layout:fixed!important}
  .daily-report-table-source th{font-weight:800!important;text-align:center!important;vertical-align:middle!important}
  .daily-report-table-source th,.daily-report-table-source td{padding:10px 12px!important;line-height:1.25!important}
  .daily-report-table-source tfoot td{font-weight:800!important;vertical-align:middle!important}

  .daily-report-recap-source{display:block!important;width:100%!important;margin-top:18px!important}
  .daily-report-recap-inner{display:block!important;width:100%!important;max-width:100%!important;margin:0!important}
  .daily-report-recap-inner table{width:100%!important;border-collapse:separate!important;border-spacing:0 8px!important}
  .daily-report-recap-inner tr{height:46px!important}
  .daily-report-recap-inner td{padding:10px 14px!important;font-size:.96rem!important}
  .daily-report-recap-inner td:last-child{font-weight:900!important;text-align:right!important;white-space:nowrap!important}
}



@media(max-width:767px){
  .report-title-period-source{display:flex!important;align-items:center!important;justify-content:space-between!important;flex-wrap:nowrap!important;gap:12px!important;width:100%!important;min-width:0!important;min-height:72px!important;margin:0 0 18px!important;padding:0 14px!important;line-height:1.2!important}
  .report-title-period-source .report-title-source{display:flex!important;align-items:center!important;align-self:center!important;flex:0 0 auto!important;min-width:0!important;min-height:0!important;margin:0!important;font-weight:850!important;line-height:1.2!important}
  .report-title-period-source .report-period-source{display:flex!important;align-items:center!important;justify-content:flex-end!important;align-self:center!important;flex:1 1 auto!important;min-width:0!important;min-height:0!important;margin:0 0 0 auto!important;text-align:right!important;font-size:.64em!important;font-weight:700!important;line-height:1.2!important;color:#64748b!important;overflow-wrap:anywhere!important}
}

/* SWP REPORT TABLE TYPOGRAPHY SOURCE */
.daily-report-table-source .report-table-header-source{
  font-weight:800!important;
}
.daily-report-table-source .report-table-item-source{
  font-weight:700!important;
  color:#253247!important;
}
/* END SWP REPORT TABLE TYPOGRAPHY SOURCE */

/* =========================================================
   SWP LAUNDRY — CANONICAL VISUAL POLISH
   2026-08-15 / single source of truth
   DESIGN ONLY — no router, API, report logic, form logic,
   pagination, print, export, or transaction behavior.
   ========================================================= */

:root {
  --laundry-ink: #25364a;
  --laundry-muted: #718096;
  --laundry-canvas: #f4f8fb;
  --laundry-surface: #ffffff;
  --laundry-line: #e2ebf1;
  --laundry-blue: #5d9cc9;
  --laundry-aqua: #58b9bc;
  --laundry-mint: #70c8a8;
  --laundry-lilac: #a796d1;
  --laundry-red-soft: #fff0f2;
  --laundry-cyan-soft: #edf9fc;
  --laundry-amber-soft: #fff7e7;
  --laundry-green-soft: #edf9f2;
  --laundry-shadow-sm: 0 5px 18px rgba(43, 70, 96, .055);
  --laundry-shadow-md: 0 14px 38px rgba(43, 70, 96, .085);
}

/* App canvas */
html,
body,
#app,
.layout-wrapper,
.layout-main-container {
  background-color: var(--laundry-canvas) !important;
}

body:not(.laundry-login-page) .layout-main-container {
  background-image:
    radial-gradient(circle at 94% 6%, rgba(88,185,188,.075) 0 7px, transparent 8px),
    radial-gradient(circle at 90% 10%, rgba(167,150,209,.055) 0 4px, transparent 5px),
    radial-gradient(circle at 86% 14%, rgba(93,156,201,.05) 0 13px, transparent 14px),
    linear-gradient(180deg, rgba(255,255,255,.55), rgba(255,255,255,0) 210px) !important;
  background-repeat: no-repeat !important;
}

/* Header: final color exists from first paint; no blue flash. */
.layout-topbar {
  background: #ffffff !important;
  border-bottom: 1px solid #e5edf2 !important;
  box-shadow: 0 3px 16px rgba(39, 66, 93, .05) !important;
}
.layout-topbar::before {
  background: #ffffff !important;
}
.layout-topbar::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: -1px;
  height: 1px;
  pointer-events: none;
  background: linear-gradient(90deg, transparent, rgba(88,185,188,.28), rgba(93,156,201,.20), transparent);
}
.layout-topbar-logo img { filter: drop-shadow(0 3px 6px rgba(48,92,131,.09)); }

/* Company badge — readable and visually distinct. */
.active-company-badge {
  width: auto !important;
  max-width: none !important;
  min-width: max-content !important;
  background: #e8f7f7 !important;
  border: 1px solid #9fdedb !important;
  color: #12666d !important;
  box-shadow: none !important;
  font-weight: 800 !important;
}
.active-company-badge i { color: #2a9ba2 !important; }
.active-company-badge span {
  display: inline !important;
  max-width: none !important;
  overflow: visible !important;
  text-overflow: clip !important;
  white-space: nowrap !important;
}

/* Sidebar: skin only. Width, positioning and overflow remain original. */
.layout-sidebar,
.layout-sidebar > div,
.layout-sidebar .layout-menu {
  background-color: #fcfdfe !important;
  opacity: 1 !important;
}
.layout-sidebar { border-right-color: #eaf0f4 !important; }
.layout-menuitem-root-text {
  color: #78869a !important;
  letter-spacing: .04em !important;
  font-weight: 800 !important;
}
.layout-menu a,
.layout-menu button {
  color: #34465a !important;
  border-radius: 10px !important;
  transition: background-color .16s ease, color .16s ease !important;
}
.layout-menu a:hover,
.layout-menu button:hover { background: #f0f7f8 !important; }
.layout-menu a.active-route,
.layout-menu a.router-link-exact-active {
  color: #257c86 !important;
  background: linear-gradient(90deg, #eaf8f7, #f2f7fd) !important;
  box-shadow: inset 3px 0 0 #65b7b8 !important;
}

/* Surfaces */
.card,
.p-card,
.surface-card,
.p-panel,
.p-dialog,
.p-popover,
.p-overlaypanel {
  border-color: var(--laundry-line) !important;
}
.card,
.p-card,
.surface-card {
  box-shadow: var(--laundry-shadow-sm) !important;
}
.p-inputtext,
.p-select,
.p-dropdown,
.p-multiselect,
.p-datepicker-input,
.p-inputnumber-input,
textarea {
  border-color: #d7e4eb !important;
  background-color: #fbfdfe !important;
}
.p-inputtext:focus,
.p-select:focus-within,
.p-dropdown:focus-within,
.p-multiselect:focus-within,
.p-datepicker-input:focus,
.p-inputnumber-input:focus,
textarea:focus {
  border-color: #80bdc5 !important;
  box-shadow: 0 0 0 3px rgba(88,185,188,.10) !important;
}
.p-datatable-thead > tr > th,
table thead th {
  background: #f7fafc !important;
  border-color: #e3ebf0 !important;
  color: #516276 !important;
}
.p-datatable-tbody > tr > td,
table tbody td { border-color: #e8eef2 !important; }

/* Theme/dark configurator is intentionally not part of this product UI. */
.layout-config,
.config-panel,
[class*="configurator"],
[class*="theme-panel"],
[class*="theme-button"],
.mobile-theme-control,
.floating-configurator,
button[aria-label*="theme" i],
button[title*="theme" i],
button[aria-label*="dark" i],
button[title*="dark" i] {
  display: none !important;
}

/* Login — one border source only. Removes clipped gradient edge at card corners. */
body.laundry-login-page,
body.mobile-login-page {
  background:
    radial-gradient(circle at 10% 15%, rgba(88,185,188,.10) 0 8px, transparent 9px),
    radial-gradient(circle at 15% 23%, rgba(93,156,201,.065) 0 19px, transparent 20px),
    radial-gradient(circle at 91% 18%, rgba(167,150,209,.08) 0 11px, transparent 12px),
    linear-gradient(145deg, #f5fbfd 0%, #edf6f8 48%, #f7f4fb 100%) !important;
}
body.laundry-login-page #app > div > div > div,
body.mobile-login-page #app > div > div > div {
  padding: 0 !important;
  background: transparent !important;
  border-radius: 25px !important;
  box-shadow: none !important;
}
body.laundry-login-page #app > div > div > div > div,
body.mobile-login-page #app > div > div > div > div {
  position: relative !important;
  overflow: hidden !important;
  border: 1px solid #b9dfe3 !important;
  border-radius: 24px !important;
  background:
    radial-gradient(circle at 94% 6%, rgba(88,185,188,.08) 0 12px, transparent 13px),
    radial-gradient(circle at 88% 12%, rgba(167,150,209,.055) 0 31px, transparent 32px),
    rgba(255,255,255,.988) !important;
  box-shadow: 0 22px 55px rgba(39,73,101,.13) !important;
}
body.laundry-login-page #app > div > div > div > div::after,
body.mobile-login-page #app > div > div > div > div::after {
  content: "";
  position: absolute;
  left: 18px;
  right: 18px;
  bottom: 0;
  height: 4px;
  border-radius: 999px 999px 0 0;
  background: linear-gradient(90deg, #65c1be, #699fce 50%, #9f94ce 76%, #74c6a5);
  opacity: .72;
  pointer-events: none;
}
body.laundry-login-page img[alt="App Logo"],
body.mobile-login-page img[alt="App Logo"] {
  filter: drop-shadow(0 7px 12px rgba(48,91,134,.10));
}
body.laundry-login-page .text-3xl,
body.mobile-login-page .text-3xl {
  color: #263b50 !important;
  font-weight: 800 !important;
  letter-spacing: -.025em !important;
}
body.laundry-login-page .text-muted-color,
body.mobile-login-page .text-muted-color { color: #7a8796 !important; }
body.laundry-login-page .p-inputtext,
body.laundry-login-page .p-password-input,
body.mobile-login-page .p-inputtext,
body.mobile-login-page .p-password-input {
  background: #fafdff !important;
  border-color: #d5e4eb !important;
}
body.laundry-login-page .p-button.w-full,
body.mobile-login-page .p-button.w-full {
  border: 0 !important;
  background: linear-gradient(135deg, #4f92bd, #53b1b4) !important;
  box-shadow: 0 11px 23px rgba(67,143,166,.20) !important;
  font-weight: 800 !important;
}

/* Dashboard — laundry character, without changing layout geometry. */
body.laundry-dashboard-page .layout-main-container,
body.mobile-dashboard-page .layout-main-container {
  background-image:
    radial-gradient(circle at 94% 5%, rgba(88,182,187,.09) 0 8px, transparent 9px),
    radial-gradient(circle at 90% 10%, rgba(117,157,209,.055) 0 15px, transparent 16px),
    linear-gradient(180deg, rgba(237,249,250,.52), rgba(255,255,255,0) 230px) !important;
}
body.laundry-dashboard-page .layout-main .grid.grid-cols-12 > [class*="xl:col-span-3"] .card,
body.mobile-dashboard-page .mobile-dashboard-metric .card {
  position: relative !important;
  overflow: hidden !important;
  background: linear-gradient(145deg, #fff, #fbfdfe) !important;
  border: 1px solid #e0ebf0 !important;
}
body.laundry-dashboard-page .layout-main .grid.grid-cols-12 > [class*="xl:col-span-3"] .card::after,
body.mobile-dashboard-page .mobile-dashboard-metric .card::after {
  content: "";
  position: absolute;
  width: 70px;
  height: 70px;
  right: -24px;
  bottom: -32px;
  border-radius: 50%;
  background: rgba(89,178,185,.055);
  box-shadow: -25px -18px 0 -17px rgba(112,157,208,.08);
  pointer-events: none;
}
body.laundry-dashboard-page .layout-main .grid.grid-cols-12 > [class*="xl:col-span-3"]:nth-child(1) .card { border-top: 3px solid #62a9d7 !important; }
body.laundry-dashboard-page .layout-main .grid.grid-cols-12 > [class*="xl:col-span-3"]:nth-child(2) .card { border-top: 3px solid #e5a45f !important; }
body.laundry-dashboard-page .layout-main .grid.grid-cols-12 > [class*="xl:col-span-3"]:nth-child(3) .card { border-top: 3px solid #50b8bd !important; }
body.laundry-dashboard-page .layout-main .grid.grid-cols-12 > [class*="xl:col-span-3"]:nth-child(4) .card { border-top: 3px solid #a38cd0 !important; }

/* Laporan Harian / Owner: functional colors + emphasized grand total. */
.daily-report-view .daily-report-recap-inner table tr.bg-red-100,
.daily-report-view .daily-report-recap-inner table tr.bg-red-100 > td {
  background: var(--laundry-red-soft) !important;
  border-color: #f4c8cd !important;
}
.daily-report-view .daily-report-recap-inner table tr.bg-gray-100,
.daily-report-view .daily-report-recap-inner table tr.bg-gray-100 > td {
  background: var(--laundry-cyan-soft) !important;
  border-color: #c7e5ed !important;
}
.daily-report-view .daily-report-recap-inner table tr.bg-yellow-100,
.daily-report-view .daily-report-recap-inner table tr.bg-yellow-100 > td {
  background: var(--laundry-amber-soft) !important;
  border-color: #eedba8 !important;
}
.daily-report-view .daily-report-recap-inner table tr.bg-green-100,
.daily-report-view .daily-report-recap-inner table tr.bg-green-100 > td {
  background: linear-gradient(135deg, #e4f8ec, #eefbf5) !important;
  border-color: #83cda4 !important;
}
.daily-report-view .daily-report-recap-inner table tr.bg-green-100 {
  border: 2px solid #72c596 !important;
  box-shadow: 0 8px 18px rgba(58,153,101,.12) !important;
}
.daily-report-view .daily-report-recap-inner table tr.bg-green-100 > td {
  padding-top: 14px !important;
  padding-bottom: 14px !important;
  font-size: 1.17rem !important;
}
.daily-report-view .daily-report-recap-inner table tr.bg-green-100 > td:last-child {
  color: #167346 !important;
  font-size: 1.38rem !important;
  font-weight: 900 !important;
}

/* Owner four summary cards keep semantic differentiation. */
.owner-summary-grid-4 .owner-summary-orders {
  background: linear-gradient(145deg, #eef6ff, #f8fbff) !important;
  border-color: #cfe2f7 !important;
}
.owner-summary-grid-4 .owner-summary-paid {
  background: linear-gradient(145deg, #effaf3, #f9fdfb) !important;
  border-color: #c9e9d4 !important;
}
.owner-summary-grid-4 .owner-summary-unpaid {
  background: linear-gradient(145deg, #fff1f2, #fff9f9) !important;
  border-color: #f4cdd1 !important;
}
.owner-summary-grid-4 .owner-summary-net {
  background: linear-gradient(145deg, #eefafa, #f7fdfc) !important;
  border-color: #c5e8e3 !important;
}
.owner-summary-grid-4 .owner-summary-orders > strong { color: #356f9f !important; }
.owner-summary-grid-4 .owner-summary-paid > strong { color: #2e8251 !important; }
.owner-summary-grid-4 .owner-summary-unpaid > strong { color: #b44955 !important; }
.owner-summary-grid-4 .owner-summary-net > strong { color: #247c78 !important; }

/* Mobile-first refinements. */
@media (max-width: 768px) {
  .layout-topbar {
    background: #ffffff !important;
    border-bottom-color: #e4edf2 !important;
    box-shadow: 0 3px 14px rgba(40,68,96,.055) !important;
  }
  .layout-topbar::before { background: #ffffff !important; }
  .layout-topbar .active-company-badge {
    width: auto !important;
    max-width: none !important;
    min-width: max-content !important;
    flex: 0 0 auto !important;
    height: 32px !important;
    padding: 0 10px !important;
    margin-right: 2px !important;
    font-size: 10px !important;
  }
  .layout-topbar .layout-topbar-logo-container { min-width: 0 !important; }
  .layout-topbar .layout-topbar-logo { max-width: 92px !important; flex: 0 1 92px !important; }
  .layout-topbar .layout-topbar-logo img { max-width: 80px !important; }
  .layout-topbar .layout-topbar-logo > span { display: none !important; }

  body.mobile-login-page #app > div > div { max-width: 100% !important; }
  body.mobile-login-page #app > div > div > div > div {
    padding: 27px 20px 25px !important;
    border-radius: 24px !important;
  }
  body.mobile-login-page img[alt="App Logo"] {
    max-width: 176px !important;
    max-height: 88px !important;
    margin-bottom: 16px !important;
  }

  /* Dashboard heading: no private visual source; use .laundry-page-heading only. */
  body.mobile-dashboard-page .mobile-dashboard-grid { gap: 9px !important; }
  body.mobile-dashboard-page .mobile-dashboard-metric .card {
    border-top-width: 3px !important;
    box-shadow: 0 6px 18px rgba(38,70,99,.055) !important;
  }
  body.mobile-dashboard-page .mobile-dashboard-metric:nth-child(1) .card { border-top-color: #62a9d7 !important; }
  body.mobile-dashboard-page .mobile-dashboard-metric:nth-child(2) .card { border-top-color: #e5a45f !important; }
  body.mobile-dashboard-page .mobile-dashboard-metric:nth-child(3) .card { border-top-color: #50b8bd !important; }
  body.mobile-dashboard-page .mobile-dashboard-metric:nth-child(4) .card { border-top-color: #a38cd0 !important; }

  .daily-report-view .daily-report-recap-inner table tr.bg-green-100 > td {
    padding-top: 15px !important;
    padding-bottom: 15px !important;
    font-size: 1.06rem !important;
  }
  .daily-report-view .daily-report-recap-inner table tr.bg-green-100 > td:last-child {
    font-size: 1.28rem !important;
  }
}

@media (max-width: 390px) {
  .layout-topbar { padding-left: 7px !important; padding-right: 7px !important; }
  .layout-topbar .layout-topbar-logo { max-width: 72px !important; flex-basis: 72px !important; }
  .layout-topbar .layout-topbar-logo img { max-width: 66px !important; }
  .layout-topbar .active-company-badge { padding: 0 7px !important; font-size: 9.5px !important; }
}

@media (min-width: 769px) {
  body.laundry-login-page #app > div > div { max-width: 35rem !important; }
  body.laundry-login-page #app > div > div > div > div { padding: 3.35rem 3.65rem 3.15rem !important; }
  body.laundry-login-page img[alt="App Logo"] { max-width: 225px !important; max-height: 112px !important; }
}

/* Transaction discount badges — one canonical visual source used by history,
   unpaid transactions, and Daily Report detail modal. */
.discount-badge-soft {
  display: inline-flex !important;
  align-items: center !important;
  width: max-content !important;
  max-width: 100% !important;
  margin-top: 5px !important;
  padding: 4px 9px !important;
  border: 1px solid #f3d2ae !important;
  border-radius: 999px !important;
  background: #fff7ed !important;
  color: #b85b17 !important;
  font-size: 10px !important;
  line-height: 1.15 !important;
  font-weight: 800 !important;
  letter-spacing: .01em !important;
  white-space: nowrap !important;
  box-shadow: none !important;
}

/* Daily Report detail total follows the semantic color of the opened detail. */
.daily-detail-total {
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  gap: 16px !important;
  margin-top: 16px !important;
  padding: 13px 14px !important;
  border: 1px solid !important;
  border-radius: 12px !important;
  font-weight: 800 !important;
  box-shadow: none !important;
}
.daily-detail-total > span:last-child {
  font-size: 1.08rem !important;
  font-weight: 900 !important;
}
.daily-detail-total-expense {
  background: #fff1f2 !important;
  border-color: #f3c4ca !important;
  color: #b63e4a !important;
}
.daily-detail-total-qris {
  background: #eef9fc !important;
  border-color: #bfe3ec !important;
  color: #20758a !important;
}
.daily-detail-total-cash {
  background: #fff8e8 !important;
  border-color: #ead59f !important;
  color: #916817 !important;
}

/* POS visual polish — visual only, no geometry or transaction logic changes. */
body.laundry-transaction-page .layout-main-container {
  background-image:
    radial-gradient(circle at 95% 4%, rgba(80,184,189,.08) 0 9px, transparent 10px),
    radial-gradient(circle at 91% 8%, rgba(100,153,205,.055) 0 18px, transparent 19px),
    linear-gradient(180deg, rgba(239,249,250,.56), rgba(255,255,255,0) 260px) !important;
}
body.laundry-transaction-page .card,
body.laundry-transaction-page .p-card,
body.laundry-transaction-page .surface-card {
  border-color: #dce9ee !important;
  background: linear-gradient(145deg, #ffffff, #fbfdfe) !important;
  box-shadow: 0 7px 20px rgba(38,70,99,.055) !important;
}
body.laundry-transaction-page .layout-main h1,
body.laundry-transaction-page .layout-main h2,
body.laundry-transaction-page .layout-main h3 {
  color: #29445a !important;
}
body.laundry-transaction-page .p-inputtext,
body.laundry-transaction-page .p-select,
body.laundry-transaction-page .p-dropdown,
body.laundry-transaction-page .p-inputnumber-input {
  background: #fbfeff !important;
  border-color: #d5e5eb !important;
}
body.laundry-transaction-page .p-button:not(.p-button-danger):not(.p-button-text) {
  border-radius: 10px !important;
}
body.laundry-transaction-page .p-button-success {
  background: linear-gradient(135deg, #429a8e, #51b5ad) !important;
  border-color: #429a8e !important;
  box-shadow: 0 8px 18px rgba(64,154,143,.13) !important;
}
body.laundry-transaction-page .p-datatable,
body.laundry-transaction-page table {
  border-radius: 12px !important;
  overflow: hidden !important;
}
body.laundry-transaction-page .p-datatable-thead > tr > th,
body.laundry-transaction-page table thead th {
  background: #f2f8fa !important;
  color: #496274 !important;
}

@media (max-width: 768px) {
  .discount-badge-soft {
    padding: 3px 8px !important;
    font-size: 9.5px !important;
  }
  .daily-detail-total {
    padding: 12px !important;
    border-radius: 11px !important;
  }
  body.mobile-transaction-page .layout-main-container {
    background-image:
      radial-gradient(circle at 94% 3%, rgba(80,184,189,.075) 0 8px, transparent 9px),
      linear-gradient(180deg, rgba(239,249,250,.62), rgba(255,255,255,0) 190px) !important;
  }
  body.mobile-transaction-page .card,
  body.mobile-transaction-page .p-card,
  body.mobile-transaction-page .surface-card {
    border-radius: 14px !important;
    box-shadow: 0 6px 16px rgba(38,70,99,.05) !important;
  }
}


/* Final UI consistency pass: spacing, hierarchy and interaction surfaces only. */
body.mobile-transaction-list-page .transaction-invoice-cell {
  display: flex !important;
  flex-direction: column !important;
  align-items: flex-start !important;
  justify-content: center !important;
  min-height: 25px !important;
  gap: 4px !important;
  line-height: 1.25 !important;
}
body.mobile-transaction-list-page .transaction-invoice-number {
  display: block !important;
  margin: 0 !important;
  line-height: 1.25 !important;
}
body.mobile-transaction-list-page .transaction-invoice-badges {
  display: flex !important;
  flex-wrap: wrap !important;
  justify-content: flex-start !important;
  gap: 4px !important;
  margin: 0 !important;
}
body.mobile-transaction-list-page .transaction-invoice-badges:empty {
  display: none !important;
}

/* Shared page rhythm */
.layout-main .card > h1:first-child,
.layout-main .card > h2:first-child,
.layout-main .card > h3:first-child,
.layout-main .p-card-title,
.layout-main .p-panel-title {
  color: #29445a !important;
}
.layout-main .p-inputtext:disabled,
.layout-main .p-select.p-disabled,
.layout-main .p-dropdown.p-disabled,
.layout-main .p-button:disabled {
  opacity: .62 !important;
}

/* Dialog consistency */
.p-dialog {
  border: 1px solid #dfe9ee !important;
  border-radius: 16px !important;
  overflow: hidden !important;
  box-shadow: 0 18px 48px rgba(31,55,78,.13) !important;
}
.p-dialog .p-dialog-header {
  padding: 15px 17px !important;
  background: #fbfdfe !important;
  border-bottom: 1px solid #e8eff2 !important;
}
.p-dialog .p-dialog-title {
  color: #29445a !important;
  font-weight: 800 !important;
}
.p-dialog .p-dialog-content {
  padding: 16px 17px !important;
}
.p-dialog .p-dialog-footer {
  padding: 12px 17px 15px !important;
  border-top: 1px solid #edf2f4 !important;
}

/* Dashboard metric hierarchy */
body.laundry-dashboard-page .layout-main .grid.grid-cols-12 > [class*="xl:col-span-3"] .card .text-900,
body.mobile-dashboard-page .mobile-dashboard-metric .card .text-900 {
  font-weight: 800 !important;
}
body.laundry-dashboard-page .layout-main .grid.grid-cols-12 > [class*="xl:col-span-3"] .card .text-xl,
body.mobile-dashboard-page .mobile-dashboard-metric .card .text-xl {
  color: #203b50 !important;
  font-size: 1.32rem !important;
  line-height: 1.15 !important;
  font-weight: 900 !important;
}

/* Tables: calm, consistent information hierarchy */
.layout-main .p-datatable .p-datatable-thead > tr > th {
  color: #526a7b !important;
  font-weight: 750 !important;
}
.layout-main .p-datatable .p-datatable-tbody > tr > td {
  border-color: #edf2f4 !important;
}
.layout-main .p-datatable .p-paginator {
  border-top-color: #e8eff2 !important;
  background: #fff !important;
}

/* Compact semantic badges */
.layout-main .p-tag,
.layout-main [class*="badge"]:not(.active-company-badge):not(.discount-badge-soft) {
  box-shadow: none !important;
}

/* Bottom navigation: retain strong active state, but harmonize it with the system. */
.mobile-bottom-nav {
  border-top: 1px solid #e4edf1 !important;
  box-shadow: 0 -8px 24px rgba(35,61,83,.07) !important;
}
.mobile-bottom-nav .mobile-bottom-nav-item {
  transition: background-color .16s ease, color .16s ease, transform .16s ease !important;
}
.mobile-bottom-nav .mobile-bottom-nav-item:not(.is-active):not(.active) {
  color: #647887 !important;
}

/* Empty states should read as intentional, not broken. */
.layout-main .p-datatable-emptymessage > td {
  padding: 24px 14px !important;
  color: #7b8d99 !important;
  text-align: center !important;
  background: #fbfdfe !important;
}

@media (max-width: 768px) {
  /* Mobile-first vertical rhythm */
  body.mobile-native-app .layout-main h1,
  body.mobile-native-app .layout-main h2 {
    color: #29445a !important;
    letter-spacing: -.015em !important;
  }
  body.mobile-native-app .p-dialog {
    width: calc(100vw - 24px) !important;
    max-width: calc(100vw - 24px) !important;
    border-radius: 15px !important;
  }
  body.mobile-native-app .p-dialog .p-dialog-header {
    padding: 13px 14px !important;
  }
  body.mobile-native-app .p-dialog .p-dialog-content {
    padding: 14px !important;
  }
  body.mobile-native-app .p-dialog .p-dialog-footer {
    padding: 11px 14px 13px !important;
  }
  body.mobile-dashboard-page .mobile-dashboard-metric .card .text-xl {
    font-size: 1.42rem !important;
  }
  body.mobile-transaction-list-page .mobile-transaction-list-table tbody tr {
    box-shadow: 0 4px 13px rgba(35,61,83,.045) !important;
    border-color: #dfe9ee !important;
  }
  body.mobile-transaction-list-page .mobile-transaction-list-table tbody td {
    min-height: 39px !important;
  }
  body.mobile-transaction-list-page .mobile-transaction-list-table tbody td::before {
    color: #667b8c !important;
    letter-spacing: .015em !important;
  }
  body.mobile-transaction-list-page .mobile-transaction-list-table tbody td.mobile-transaction-action-cell {
    padding-top: 11px !important;
  }
}


/* Master CRUD modal pattern — single visual source for the modalized forms. */
.master-data-toolbar {
  min-height: 42px !important;
}
.master-data-toolbar > .p-button {
  flex: 0 0 auto !important;
  border-radius: 10px !important;
  box-shadow: none !important;
}
.master-form-dialog .p-dialog-content {
  padding: 14px 16px 16px !important;
  background: #fff !important;
}
.master-form-dialog .card,
.master-form-dialog .surface-card,
.master-form-dialog .p-card {
  margin: 0 !important;
  padding: 0 !important;
  border: 0 !important;
  border-radius: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
}
.master-form-dialog .card > h5:first-child,
.master-form-dialog .surface-card > h5:first-child {
  display: none !important;
}
.master-form-dialog .p-inputtext,
.master-form-dialog .p-select,
.master-form-dialog .p-dropdown,
.master-form-dialog .p-multiselect,
.master-form-dialog .p-inputnumber,
.master-form-dialog .p-inputnumber-input,
.master-form-dialog textarea {
  width: 100% !important;
}
.master-form-dialog .p-error {
  display: block !important;
  margin-top: 4px !important;
  font-size: .78rem !important;
}
@media (max-width: 768px) {
  .master-data-toolbar {
    align-items: stretch !important;
  }
  .master-data-toolbar > .p-button {
    width: 100% !important;
    justify-content: center !important;
  }
  .master-form-dialog,
  .master-form-dialog-wide {
    width: calc(100vw - 20px) !important;
    max-width: calc(100vw - 20px) !important;
    margin: 10px !important;
  }
  .master-form-dialog .p-dialog-content {
    padding: 13px 13px 15px !important;
  }
}


/* Canonical page-title card — one source for every application page. */
.laundry-page-heading {
  position: relative !important;
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  gap: 12px !important;
  width: 100% !important;
  min-width: 0 !important;
  min-height: 68px !important;
  margin: 0 0 14px !important;
  padding: 12px 18px !important;
  overflow: hidden !important;
  box-sizing: border-box !important;
  border: 1px solid #cfe5e8 !important;
  border-radius: 16px !important;
  background: linear-gradient(135deg, #e9f8f7 0%, #edf5fb 62%, #f5f2fb 100%) !important;
  color: #29445a !important;
  box-shadow: 0 5px 16px rgba(39,73,101,.05) !important;
}
.laundry-page-heading::after {
  content: "" !important;
  position: absolute !important;
  width: 86px !important;
  height: 86px !important;
  right: -26px !important;
  top: -38px !important;
  border-radius: 50% !important;
  border: 1px solid rgba(80,184,189,.16) !important;
  box-shadow: -30px 41px 0 -24px rgba(112,157,208,.11) !important;
  pointer-events: none !important;
}
.laundry-page-heading > *,
.laundry-page-heading {
  z-index: 1;
}
.laundry-page-heading h1,
.laundry-page-heading h2,
.laundry-page-heading h3,
.laundry-page-heading h5,
.laundry-page-heading .text-xl,
.laundry-page-heading .text-2xl,
.laundry-page-heading .text-3xl {
  margin-top: 0 !important;
  margin-bottom: 0 !important;
  color: #29445a !important;
  font-weight: 850 !important;
  letter-spacing: -.018em !important;
}
.laundry-page-heading p,
.laundry-page-heading .text-muted-color {
  margin-top: 0 !important;
  margin-bottom: 0 !important;
  color: #6f7f8e !important;
}
.laundry-page-duplicate-title {
  display: none !important;
}


@media (max-width: 768px) {
  .laundry-page-heading {
    min-height: 64px !important;
    margin-bottom: 12px !important;
    padding: 0 15px !important;
    border-radius: 14px !important;
    align-items: center !important;
  }
  .laundry-page-heading > * {
    align-self: center !important;
  }
  .laundry-page-heading h1,
  .laundry-page-heading h2,
  .laundry-page-heading h3,
  .laundry-page-heading h5,
  .laundry-page-heading .text-xl,
  .laundry-page-heading .text-2xl,
  .laundry-page-heading .text-3xl {
    font-size: 1.08rem !important;
    line-height: 1.22 !important;
  }
  .laundry-page-heading p,
  .laundry-page-heading .text-muted-color {
    font-size: .74rem !important;
    line-height: 1.3 !important;
  }
}


/* POS Total Bayar — balanced and centered. */
.pos-total-pay-card {
  position: relative !important;
  display: grid !important;
  grid-template-columns: minmax(0,1fr) auto !important;
  align-items: center !important;
  gap: 16px !important;
  min-height: 72px !important;
  margin: 8px 0 16px !important;
  padding: 14px 18px !important;
  border: 1px solid #c7e3e5 !important;
  border-radius: 16px !important;
  background: linear-gradient(135deg,#eaf9f7 0%,#edf6fb 64%,#f6f2fb 100%) !important;
  overflow: hidden !important;
  box-sizing: border-box !important;
}
.pos-total-pay-card::after {
  content: "" !important;
  position: absolute !important;
  width: 68px !important;
  height: 68px !important;
  right: -18px !important;
  top: -30px !important;
  border-radius: 50% !important;
  border: 1px solid rgba(80,184,189,.14) !important;
  pointer-events: none !important;
}
.pos-total-pay-label,
.pos-total-pay-value {
  position: relative !important;
  z-index: 1 !important;
  display: flex !important;
  align-items: center !important;
  margin: 0 !important;
  line-height: 1.15 !important;
}
.pos-total-pay-label {
  font-size: 1.15rem !important;
  font-weight: 900 !important;
  color: #29445a !important;
}
.pos-total-pay-value {
  justify-content: flex-end !important;
  font-size: 1.65rem !important;
  font-weight: 900 !important;
  color: #29445a !important;
  white-space: nowrap !important;
}
@media (max-width:768px) {
  .pos-total-pay-card {
    min-height: 66px !important;
    padding: 12px 14px !important;
    gap: 10px !important;
    border-radius: 14px !important;
  }
  .pos-total-pay-label {
    font-size: 1rem !important;
  }
  .pos-total-pay-value {
    font-size: 1.3rem !important;
  }
}




/* Transaction History action buttons — SINGLE SOURCE for every table action button. */
.transaction-history-action-source {
  box-sizing: border-box !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  flex: 0 0 38px !important;
  width: 38px !important;
  min-width: 38px !important;
  max-width: 38px !important;
  height: 38px !important;
  min-height: 38px !important;
  max-height: 38px !important;
  aspect-ratio: 1 / 1 !important;
  margin-top: 0 !important;
  margin-bottom: 0 !important;
  padding: 0 !important;
  border-radius: 11px !important;
  line-height: 1 !important;
  vertical-align: middle !important;
}
.transaction-history-action-source .p-button-label:not(:empty) {
  display: none !important;
}
.transaction-history-action-source .p-button-icon,
.transaction-history-action-source > i {
  margin: 0 !important;
  font-size: .95rem !important;
  line-height: 1 !important;
  color: #fff !important;
}

/* Laporan Summary Export Excel — SINGLE SOURCE for every Export Excel button. */
.summary-export-excel-source {
  box-sizing: border-box !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: .45rem !important;
  min-height: 42px !important;
  padding: .62rem 1rem !important;
  border-radius: 9999px !important;
  font-weight: 700 !important;
  line-height: 1 !important;
  white-space: nowrap !important;
}
.summary-export-excel-source .p-button-label,
.summary-export-excel-source .p-button-icon {
  line-height: 1 !important;
}
@media (max-width: 767px) {
  .summary-export-excel-source {
    height: 36px !important;
    min-height: 36px !important;
    max-height: 36px !important;
    padding: 0 .6rem !important;
    font-size: .72rem !important;
  }
  .summary-export-excel-source .p-button-label,
  .summary-export-excel-source .p-button-icon {
    font-size: .72rem !important;
  }
}

/* END SWP LAUNDRY — CANONICAL VISUAL POLISH */

/* POS mobile pickers: one existing PrimeVue Select/state source, native-like bottom-sheet presentation. */

@keyframes posPickerSheetIn {
  from {
    transform: translate3d(0, 100%, 0);
    opacity: .98;
  }
  to {
    transform: translate3d(0, 0, 0);
    opacity: 1;
  }
}
@keyframes posPickerBackdropIn {
  from { opacity: 0; }
  to { opacity: 1; }
}
.pos-customer-picker-overlay,
.pos-service-picker-overlay {
  position: fixed !important;
  inset: auto 0 0 0 !important;
  left: 0 !important;
  right: 0 !important;
  bottom: 0 !important;
  top: auto !important;
  transform: none !important;
  margin: 0 !important;
  width: 100dvw !important;
  min-width: 100dvw !important;
  max-width: 100dvw !important;
  height: min(72dvh, 720px) !important;
  max-height: min(72dvh, 720px) !important;
  box-sizing: border-box !important;
  overflow: hidden !important;
  border: 1px solid #d9e6ee !important;
  border-bottom: 0 !important;
  border-radius: 22px 22px 0 0 !important;
  background: #fff !important;
  box-shadow: 0 -18px 54px rgba(15, 23, 42, .24) !important;
  z-index: 10050 !important;
  display: flex !important;
  flex-direction: column !important;
}
.pos-customer-picker-overlay::before,
.pos-service-picker-overlay::before {
  content: attr(data-sheet-title);
  display: block;
  flex: 0 0 auto;
  padding: 20px 20px 12px !important;
  color: #0f172a;
  font-size: 1.02rem;
  font-weight: 800;
  line-height: 1.25;
  background: #fff;
}
.pos-customer-picker-overlay::after,
.pos-service-picker-overlay::after {
  content: "";
  position: absolute;
  top: 8px;
  left: 50%;
  width: 42px;
  height: 4px;
  transform: translateX(-50%);
  border-radius: 999px;
  background: #cbd5e1;
}
.pos-customer-picker-overlay .p-select-header,
.pos-service-picker-overlay .p-select-header {
  position: relative !important;
  top: auto !important;
  z-index: 2 !important;
  flex: 0 0 auto !important;
  padding: 8px 18px 14px !important;
  background: #fff !important;
  border-bottom: 1px solid #e7eef3 !important;
}
.pos-customer-picker-overlay .p-select-filter,
.pos-service-picker-overlay .p-select-filter {
  width: 100% !important;
  min-height: 46px !important;
}
.pos-customer-picker-overlay .p-select-list-container,
.pos-service-picker-overlay .p-select-list-container {
  flex: 1 1 auto !important;
  min-height: 0 !important;
  max-height: none !important;
  overflow-y: auto !important;
  overscroll-behavior: contain !important;
  -webkit-overflow-scrolling: touch;
}
.pos-customer-picker-overlay .p-select-list,
.pos-service-picker-overlay .p-select-list {
  padding: 8px 12px max(18px, env(safe-area-inset-bottom)) !important;
}
.pos-customer-picker-overlay .p-select-option,
.pos-service-picker-overlay .p-select-option {
  min-height: 54px !important;
  padding: 10px 12px !important;
  border-radius: 10px !important;
}
.pos-customer-option {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 3px;
  width: 100%;
  min-width: 0;
}
.pos-customer-option-name {
  display: block;
  width: 100%;
  color: #1f2937;
  font-size: .98rem;
  font-weight: 700;
  line-height: 1.25;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.pos-customer-option-phone {
  display: block;
  width: 100%;
  color: #64748b;
  font-size: .8rem;
  font-weight: 500;
  line-height: 1.2;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.pos-picker-backdrop {
  position: fixed !important;
  inset: 0 !important;
  z-index: 10040 !important;
  background: rgba(15, 23, 42, .34) !important;
  animation: posPickerBackdropIn 180ms ease-out both;
  will-change: opacity;
}
.pos-sheet-close {
  position: absolute !important;
  top: 12px !important;
  right: 14px !important;
  z-index: 5 !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  width: 38px !important;
  height: 38px !important;
  padding: 0 !important;
  border: 0 !important;
  border-radius: 50% !important;
  background: #f1f5f9 !important;
  color: #334155 !important;
  font-size: 1.55rem !important;
  font-weight: 400 !important;
  line-height: 1 !important;
  cursor: pointer !important;
}
.pos-customer-picker-overlay::before,
.pos-service-picker-overlay::before {
  padding-left: 62px !important;
  padding-right: 62px !important;
  text-align: center !important;
  font-size: 1.08rem !important;
}
.pos-customer-picker-overlay .p-select-header,
.pos-service-picker-overlay .p-select-header {
  text-align: center !important;
}
.pos-customer-picker-overlay .p-select-filter,
.pos-service-picker-overlay .p-select-filter {
  text-align: center !important;
  font-size: 1rem !important;
}
.pos-customer-picker-overlay .p-select-list,
.pos-service-picker-overlay .p-select-list {
  text-align: center !important;
}
.pos-customer-picker-overlay .p-select-option,
.pos-service-picker-overlay .p-select-option {
  justify-content: center !important;
  text-align: center !important;
  min-height: 58px !important;
  font-size: 1.06rem !important;
  font-weight: 600 !important;
}
.pos-customer-option {
  flex-direction: row !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 0 !important;
  text-align: center !important;
}
.pos-customer-option-name,
.pos-customer-option-phone {
  display: inline !important;
  width: auto !important;
  max-width: none !important;
  overflow: visible !important;
  text-overflow: clip !important;
  white-space: nowrap !important;
  font-size: 1.06rem !important;
  line-height: 1.3 !important;
}
.pos-customer-option-name {
  font-weight: 800 !important;
}
.pos-customer-option-name::after {
  content: " - ";
  white-space: pre;
}
.pos-customer-option-phone {
  color: #475569 !important;
  font-weight: 500 !important;
}

@media (min-width: 768px) {
  .pos-customer-picker-overlay,
  .pos-service-picker-overlay {
    inset: auto !important;
    left: 50% !important;
    right: auto !important;
    bottom: auto !important;
    top: 50% !important;
    width: min(520px, calc(100vw - 40px)) !important;
    min-width: 0 !important;
    max-width: min(520px, calc(100vw - 40px)) !important;
    height: min(620px, calc(100vh - 80px)) !important;
    max-height: min(620px, calc(100vh - 80px)) !important;
    transform: translate(-50%, -50%) !important;
    border: 1px solid #d9e6ee !important;
    border-radius: 18px !important;
  }
}
@media (max-width: 767px) {
  .pos-customer-picker-overlay,
  .pos-service-picker-overlay {
    animation: posPickerSheetIn 210ms cubic-bezier(.22, .78, .24, 1) both !important;
    will-change: transform, opacity;
    backface-visibility: hidden;
  }
  body.mobile-transaction-page .pos-customer-info-source {
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    margin-left: 0 !important;
    box-sizing: border-box !important;
  }
}

/* Report heading typography is one shared source for Harian + Owner. */
@media (max-width: 767px) {
  .report-title-period-source .report-title-source {
    font-size: 1.08rem !important;
    font-weight: 850 !important;
    line-height: 1.22 !important;
  }
  .report-title-period-source .report-period-source {
    font-size: .74rem !important;
    font-weight: 700 !important;
    line-height: 1.3 !important;
  }
}
/* ============================================================
   POS SELECT CONTROLS — canonical interaction source
   Pelanggan, Paket Layanan, dan Metode Pembayaran menggunakan
   satu permukaan interaksi. Tidak ada shadow/hover legacy.
   ============================================================ */
@media (max-width: 767px) {
  body.mobile-transaction-page .pos-select-control-source {
    position: relative !important;
    display: flex !important;
    align-items: stretch !important;
    width: 100% !important;
    min-width: 0 !important;
    min-height: 48px !important;
    border: 1px solid #d5e5eb !important;
    border-radius: 12px !important;
    background: #fbfeff !important;
    box-shadow: none !important;
    outline: none !important;
    transition: border-color .16s ease, background-color .16s ease !important;
  }

  body.mobile-transaction-page .pos-select-control-source:hover,
  body.mobile-transaction-page .pos-select-control-source:active,
  body.mobile-transaction-page .pos-select-control-source:focus,
  body.mobile-transaction-page .pos-select-control-source:focus-visible,
  body.mobile-transaction-page .pos-select-control-source:focus-within,
  body.mobile-transaction-page .pos-select-control-source.p-focus,
  body.mobile-transaction-page .pos-select-control-source.p-select-open,
  body.mobile-transaction-page .pos-select-control-source[aria-expanded="true"] {
    border-color: #7fc5cc !important;
    background: #fbfeff !important;
    box-shadow: none !important;
    outline: none !important;
    transform: none !important;
  }

  body.mobile-transaction-page .pos-select-control-source > .p-select-label {
    display: flex !important;
    align-items: center !important;
    flex: 1 1 auto !important;
    min-width: 0 !important;
    min-height: 46px !important;
    margin: 0 !important;
    padding-top: 0 !important;
    padding-bottom: 0 !important;
    line-height: 1.2 !important;
    background: transparent !important;
    box-shadow: none !important;
  }

  body.mobile-transaction-page .pos-select-control-source > .p-select-dropdown {
    position: relative !important;
    inset: auto !important;
    align-self: stretch !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    flex: 0 0 44px !important;
    width: 44px !important;
    height: auto !important;
    min-height: 46px !important;
    margin: 0 !important;
    padding: 0 !important;
    background: transparent !important;
    border: 0 !important;
    box-shadow: none !important;
    transform: none !important;
  }

  body.mobile-transaction-page .pos-select-control-source > .p-select-dropdown > * {
    margin: 0 !important;
    transform: none !important;
  }

  @media (hover: none) and (pointer: coarse) {
    body.mobile-transaction-page .pos-select-control-source:hover {
      border-color: #d5e5eb !important;
      box-shadow: none !important;
    }
    body.mobile-transaction-page .pos-select-control-source:focus-within,
    body.mobile-transaction-page .pos-select-control-source.p-focus,
    body.mobile-transaction-page .pos-select-control-source.p-select-open,
    body.mobile-transaction-page .pos-select-control-source[aria-expanded="true"] {
      border-color: #7fc5cc !important;
    }
  }
}


/* ============================================================
   OWNER MODE — canonical scope surface (desktop + mobile)
   ============================================================ */
.laundry-owner-scope {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 18px;
  width: 100%;
  margin: 14px 0 18px;
  padding: 14px 16px;
  border: 1px solid #dbe8ee;
  border-radius: 16px;
  background: linear-gradient(135deg, #f8fcff 0%, #f7fbfa 52%, #fbf9ff 100%);
  box-shadow: 0 8px 22px rgba(15, 23, 42, .045);
  box-sizing: border-box;
}
.laundry-owner-scope-copy {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
}
.laundry-owner-scope-eyebrow {
  display: inline-block;
  width: fit-content;
  font-size: .66rem;
  line-height: 1.2;
  font-weight: 900;
  letter-spacing: .09em;
  color: #31808a;
}
.laundry-owner-scope-copy strong {
  font-size: .98rem;
  line-height: 1.25;
  font-weight: 850;
  color: #172033;
}
.laundry-owner-scope-copy small {
  display: block;
  margin-top: 2px;
  max-width: 620px;
  font-size: .75rem;
  line-height: 1.42;
  color: #64748b;
}
.laundry-owner-scope-controls {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 7px;
  flex-wrap: wrap;
}
.laundry-owner-scope-button {
  appearance: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
  min-height: 38px;
  padding: 8px 13px;
  border: 1px solid #d6e4e9;
  border-radius: 11px;
  background: #fff;
  color: #52606d;
  font: inherit;
  font-size: .78rem;
  font-weight: 750;
  line-height: 1.15;
  white-space: nowrap;
  cursor: pointer;
  box-shadow: none;
  transition: border-color .15s ease, background-color .15s ease, color .15s ease, transform .15s ease;
}
.laundry-owner-scope-button:hover:not(:disabled) {
  border-color: #9bcbd0;
  background: #f6fcfd;
  color: #246b73;
}
.laundry-owner-scope-button.active,
.laundry-owner-scope-button[aria-pressed="true"] {
  border-color: #70b9c0;
  background: #eaf8f8;
  color: #1e6d73;
  box-shadow: inset 0 0 0 1px rgba(112, 185, 192, .12);
}
.laundry-owner-scope-button:disabled {
  opacity: 1;
  cursor: default;
}
.laundry-owner-scope-button i {
  font-size: .84rem;
}
.laundry-owner-scope-toast {
  position: fixed;
  left: 50%;
  bottom: 28px;
  z-index: 12050;
  width: min(430px, calc(100vw - 28px));
  padding: 12px 15px;
  border: 1px solid #cfe0e5;
  border-radius: 12px;
  background: #172033;
  color: #fff;
  font-size: .82rem;
  font-weight: 700;
  line-height: 1.4;
  text-align: center;
  box-shadow: 0 12px 34px rgba(15, 23, 42, .22);
  opacity: 0;
  transform: translate(-50%, 10px);
  transition: opacity .18s ease, transform .18s ease;
}
.laundry-owner-scope-toast.show {
  opacity: 1;
  transform: translate(-50%, 0);
}
body:not(.laundry-owner-user) .owner-company-column-source {
  display: none !important;
}

@media (max-width: 767px) {
  .laundry-owner-scope {
    flex-direction: column;
    align-items: stretch;
    gap: 12px;
    margin: 12px 0 16px;
    padding: 13px;
    border-radius: 14px;
  }
  .laundry-owner-scope-copy {
    align-items: center;
    text-align: center;
  }
  .laundry-owner-scope-copy small {
    max-width: 100%;
    font-size: .71rem;
  }
  .laundry-owner-scope-eyebrow {
    margin-inline: auto;
  }
  .laundry-owner-scope-controls {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 7px;
    width: 100%;
  }
  .laundry-owner-scope-controls .laundry-owner-scope-button:only-child {
    grid-column: 1 / -1;
  }
  .laundry-owner-scope-button {
    width: 100%;
    min-height: 42px;
    padding: 8px 9px;
    white-space: normal;
    text-align: center;
    font-size: .74rem;
  }
  body.mobile-report-page .laundry-owner-scope {
    margin-top: 10px;
    margin-bottom: 18px;
  }
}

/* Owner Dashboard mobile mengikuti pola canonical Owner Mode pada Laporan Transaksi:
   judul/copy berada di atas, lalu Semua Cabang + dua outlet berjajar tiga di bawah. */
@media (max-width: 767px) {
  body.mobile-dashboard-page.laundry-owner-user .laundry-owner-scope[data-owner-scope-kind="dashboard"] {
    flex-direction: column;
    align-items: stretch;
    gap: 12px;
    margin: 12px 0 16px !important;
    padding: 13px !important;
    border-radius: 14px;
  }
  body.mobile-dashboard-page.laundry-owner-user .laundry-owner-scope[data-owner-scope-kind="dashboard"] .laundry-owner-scope-copy {
    align-items: center;
    text-align: center;
    gap: 2px;
  }
  body.mobile-dashboard-page.laundry-owner-user .laundry-owner-scope[data-owner-scope-kind="dashboard"] .laundry-owner-scope-eyebrow {
    margin-inline: auto;
    font-size: .66rem;
  }
  body.mobile-dashboard-page.laundry-owner-user .laundry-owner-scope[data-owner-scope-kind="dashboard"] .laundry-owner-scope-copy strong {
    font-size: .98rem;
  }
  body.mobile-dashboard-page.laundry-owner-user .laundry-owner-scope[data-owner-scope-kind="dashboard"] .laundry-owner-scope-copy small {
    display: block;
    max-width: 100%;
    font-size: .71rem;
  }
  body.mobile-dashboard-page.laundry-owner-user .laundry-owner-scope[data-owner-scope-kind="dashboard"] .laundry-owner-scope-controls {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 7px;
    width: 100%;
  }
  body.mobile-dashboard-page.laundry-owner-user .laundry-owner-scope[data-owner-scope-kind="dashboard"] .laundry-owner-scope-button {
    width: 100%;
    min-height: 40px;
    padding: 7px 5px;
    border-radius: 11px;
    font-size: .68rem;
    white-space: normal;
    text-align: center;
  }
}

/* Dashboard Owner: ringkasan transaksi harian menggunakan satu panel yang sama
   untuk desktop/mobile. Hanya mengatur ritme responsif, data tetap dari widget Dashboard. */
.owner-dashboard-daily-summary {
  width: 100%;
}
@media (max-width: 767px) {
  body.mobile-dashboard-page .owner-dashboard-daily-summary {
    margin-top: 16px !important;
    padding-top: 14px !important;
  }
  body.mobile-dashboard-page .owner-dashboard-daily-summary > .grid {
    gap: 8px !important;
  }
  body.mobile-dashboard-page .owner-dashboard-daily-summary .rounded-xl,
  body.mobile-dashboard-page .owner-dashboard-daily-summary .rounded-lg {
    min-width: 0;
  }
  body.mobile-dashboard-page .owner-dashboard-daily-summary .text-base,
  body.mobile-dashboard-page .owner-dashboard-daily-summary .text-lg {
    overflow-wrap: anywhere;
  }
}


/* Owner scope transition + report control polish — canonical source */
.laundry-owner-scope-loading{
  position:fixed;inset:0;z-index:13000;display:flex;align-items:center;justify-content:center;gap:10px;
  background:rgba(248,251,253,.62);backdrop-filter:blur(2px);-webkit-backdrop-filter:blur(2px);
  color:#334155;font-size:.82rem;font-weight:800;opacity:0;pointer-events:none;
  transition:opacity .18s ease
}
.laundry-owner-scope-loading.show{opacity:1;pointer-events:auto}
.laundry-owner-scope-spinner{width:20px;height:20px;border:2px solid #cbdde2;border-top-color:#31808a;border-radius:50%;animation:laundryOwnerScopeSpin .65s linear infinite}
@keyframes laundryOwnerScopeSpin{to{transform:rotate(360deg)}}
.laundry-owner-scope.is-switching{opacity:.72;transition:opacity .15s ease}

@media(max-width:767px){
  /* Semua Cabang + dua outlet tetap satu baris pada scope laporan mobile. */
  .laundry-owner-scope[data-owner-scope-kind="report"] .laundry-owner-scope-controls,
  .laundry-owner-scope[data-owner-scope-kind="transaction"] .laundry-owner-scope-controls{
    grid-template-columns:repeat(3,minmax(0,1fr))!important
  }
  .laundry-owner-scope[data-owner-scope-kind="report"] .laundry-owner-scope-button,
  .laundry-owner-scope[data-owner-scope-kind="transaction"] .laundry-owner-scope-button{
    min-height:40px!important;padding:7px 5px!important;font-size:.68rem!important
  }
}

/* Nota elektronik: footer dirapatkan ke card utama tanpa mengubah footer halaman lain. */
.laundry-global-footer.tracking-footer-compact,
body.mobile-login-page .laundry-global-footer.tracking-footer-compact {
  margin-top: 32px !important;
  padding: 5px 12px 8px !important;
}
@media (max-width: 767px) {
  body.mobile-native-app .laundry-global-footer.tracking-footer-compact,
  body.mobile-login-page .laundry-global-footer.tracking-footer-compact,
  .laundry-global-footer.tracking-footer-compact {
    margin-top: 30px !important;
    padding: 4px 12px 6px !important;
  }
}

/* ==========================================================
   Transaction Detail Dialog — canonical visual polish
   Scope: the only .mobile-responsive-table in Data Transaksi.
   CSS-only: no router, bundle, chunk, or component logic changes.
   ========================================================== */

/* Desktop / shared dialog shell */
.p-dialog:has(.mobile-responsive-table) {
  width: min(760px, calc(100vw - 40px)) !important;
  max-height: min(86vh, 760px) !important;
  border-radius: 18px !important;
  overflow: hidden !important;
  box-shadow: 0 22px 60px rgba(15, 23, 42, 0.20) !important;
}

.p-dialog:has(.mobile-responsive-table) .p-dialog-header {
  padding: 18px 20px !important;
  border-bottom: 1px solid #e8edf3 !important;
}

.p-dialog:has(.mobile-responsive-table) .p-dialog-title {
  font-size: 1.08rem !important;
  font-weight: 700 !important;
  color: #1f2937 !important;
}

.p-dialog:has(.mobile-responsive-table) .p-dialog-header-close {
  width: 40px !important;
  height: 40px !important;
  border-radius: 12px !important;
}

.p-dialog:has(.mobile-responsive-table) .p-dialog-content {
  padding: 18px 20px 14px !important;
  overflow-y: auto !important;
}

.p-dialog:has(.mobile-responsive-table) .p-dialog-footer {
  padding: 14px 20px 18px !important;
  border-top: 1px solid #edf1f5 !important;
}

/* Invoice/customer summary — the first block immediately above the detail table */
.p-dialog:has(.mobile-responsive-table) .p-dialog-content > div > div:first-child:not(.p-datatable) {
  gap: 18px !important;
  padding: 14px 16px !important;
  margin-bottom: 14px !important;
  border: 1px solid #e3e8ef !important;
  border-radius: 12px !important;
  background: #f8fafc !important;
}

.p-dialog:has(.mobile-responsive-table) .p-dialog-content > div > div:first-child:not(.p-datatable) p {
  margin-top: 0 !important;
}

/* Desktop table */
.p-dialog:has(.mobile-responsive-table) .mobile-responsive-table {
  border: 1px solid #e4e9f0 !important;
  border-radius: 12px !important;
  overflow: hidden !important;
}

.p-dialog:has(.mobile-responsive-table) .mobile-responsive-table .p-datatable-wrapper {
  border-radius: 12px !important;
}

.p-dialog:has(.mobile-responsive-table) .mobile-responsive-table table {
  width: 100% !important;
  table-layout: fixed !important;
}

.p-dialog:has(.mobile-responsive-table) .mobile-responsive-table thead th {
  padding: 11px 14px !important;
  background: #f8fafc !important;
  color: #64748b !important;
  font-size: 0.75rem !important;
  font-weight: 700 !important;
  text-transform: uppercase !important;
  letter-spacing: 0.025em !important;
  border-color: #e8edf3 !important;
}

.p-dialog:has(.mobile-responsive-table) .mobile-responsive-table tbody td {
  padding: 13px 14px !important;
  color: #334155 !important;
  vertical-align: middle !important;
  border-color: #edf1f5 !important;
}

.p-dialog:has(.mobile-responsive-table) .mobile-responsive-table thead th:nth-child(1),
.p-dialog:has(.mobile-responsive-table) .mobile-responsive-table tbody td:nth-child(1) {
  width: 55% !important;
  text-align: left !important;
}

.p-dialog:has(.mobile-responsive-table) .mobile-responsive-table thead th:nth-child(2),
.p-dialog:has(.mobile-responsive-table) .mobile-responsive-table tbody td:nth-child(2) {
  width: 15% !important;
  text-align: center !important;
}

.p-dialog:has(.mobile-responsive-table) .mobile-responsive-table thead th:nth-child(3),
.p-dialog:has(.mobile-responsive-table) .mobile-responsive-table tbody td:nth-child(3) {
  width: 30% !important;
  text-align: right !important;
  font-weight: 600 !important;
}

/* Total line: the block immediately following the table */
.p-dialog:has(.mobile-responsive-table) .mobile-responsive-table + div {
  display: flex !important;
  align-items: baseline !important;
  justify-content: flex-end !important;
  gap: 10px !important;
  margin-top: 14px !important;
  padding-top: 14px !important;
  border-top: 1px solid #e8edf3 !important;
}

.p-dialog:has(.mobile-responsive-table) .mobile-responsive-table + div .text-xl {
  font-size: 1.28rem !important;
  line-height: 1.2 !important;
}

@media (max-width: 767px) {
  .p-dialog:has(.mobile-responsive-table) {
    width: calc(100vw - 24px) !important;
    max-width: calc(100vw - 24px) !important;
    max-height: calc(100dvh - 92px) !important;
    margin: 0 !important;
    border-radius: 18px !important;
  }

  .p-dialog:has(.mobile-responsive-table) .p-dialog-header {
    padding: 15px 16px !important;
  }

  .p-dialog:has(.mobile-responsive-table) .p-dialog-title {
    font-size: 1rem !important;
  }

  .p-dialog:has(.mobile-responsive-table) .p-dialog-header-close {
    width: 38px !important;
    height: 38px !important;
    border-radius: 11px !important;
  }

  .p-dialog:has(.mobile-responsive-table) .p-dialog-content {
    padding: 14px 14px 10px !important;
  }

  .p-dialog:has(.mobile-responsive-table) .p-dialog-footer {
    padding: 12px 14px 14px !important;
  }

  .p-dialog:has(.mobile-responsive-table) .p-dialog-footer .p-button {
    width: 100% !important;
    min-height: 46px !important;
    justify-content: center !important;
    border-radius: 12px !important;
  }

  /* Summary stays two balanced columns, with safe wrapping. */
  .p-dialog:has(.mobile-responsive-table) .p-dialog-content > div > div:first-child:not(.p-datatable) {
    display: grid !important;
    grid-template-columns: minmax(0, 1.35fr) minmax(0, .85fr) !important;
    align-items: start !important;
    gap: 10px !important;
    padding: 12px !important;
    margin-bottom: 12px !important;
    border-radius: 11px !important;
  }

  .p-dialog:has(.mobile-responsive-table) .p-dialog-content > div > div:first-child:not(.p-datatable) > div {
    min-width: 0 !important;
  }

  .p-dialog:has(.mobile-responsive-table) .p-dialog-content > div > div:first-child:not(.p-datatable) > div:last-child {
    text-align: right !important;
  }

  .p-dialog:has(.mobile-responsive-table) .p-dialog-content > div > div:first-child:not(.p-datatable) p:first-child {
    font-size: 0.72rem !important;
    line-height: 1.2 !important;
    margin-bottom: 5px !important;
  }

  .p-dialog:has(.mobile-responsive-table) .p-dialog-content > div > div:first-child:not(.p-datatable) p:last-child {
    font-size: 0.91rem !important;
    line-height: 1.3 !important;
    overflow-wrap: anywhere !important;
  }

  /* Replace the generic mobile grid behavior with a purpose-built item card. */
  .p-dialog:has(.mobile-responsive-table) .mobile-responsive-table {
    border: 0 !important;
    border-radius: 0 !important;
    overflow: visible !important;
  }

  .p-dialog:has(.mobile-responsive-table) .mobile-responsive-table .p-datatable-wrapper {
    overflow: visible !important;
  }

  .p-dialog:has(.mobile-responsive-table) .mobile-responsive-table table,
  .p-dialog:has(.mobile-responsive-table) .mobile-responsive-table tbody {
    display: block !important;
    width: 100% !important;
    min-width: 0 !important;
  }

  .p-dialog:has(.mobile-responsive-table) .mobile-responsive-table thead {
    display: none !important;
  }

  .p-dialog:has(.mobile-responsive-table) .mobile-responsive-table tbody tr {
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) minmax(100px, max-content) !important;
    grid-template-areas:
      "item item"
      "qty amount" !important;
    column-gap: 12px !important;
    row-gap: 9px !important;
    width: 100% !important;
    padding: 12px 13px !important;
    margin: 0 0 10px !important;
    border: 1px solid #e3e8ef !important;
    border-radius: 12px !important;
    background: #fff !important;
    box-shadow: 0 2px 8px rgba(15, 23, 42, 0.035) !important;
  }

  .p-dialog:has(.mobile-responsive-table) .mobile-responsive-table tbody td {
    display: block !important;
    width: auto !important;
    min-width: 0 !important;
    min-height: 0 !important;
    padding: 0 !important;
    border: 0 !important;
    text-align: left !important;
    white-space: normal !important;
  }

  .p-dialog:has(.mobile-responsive-table) .mobile-responsive-table tbody td::before {
    display: none !important;
    content: none !important;
  }

  .p-dialog:has(.mobile-responsive-table) .mobile-responsive-table tbody td:nth-child(1) {
    grid-area: item !important;
    padding-bottom: 9px !important;
    border-bottom: 1px dashed #e8edf3 !important;
    color: #1f2937 !important;
    font-size: 0.94rem !important;
    font-weight: 650 !important;
    line-height: 1.35 !important;
  }

  .p-dialog:has(.mobile-responsive-table) .mobile-responsive-table tbody td:nth-child(2) {
    grid-area: qty !important;
    justify-self: start !important;
    color: #64748b !important;
    font-size: 0.82rem !important;
    font-weight: 600 !important;
  }

  .p-dialog:has(.mobile-responsive-table) .mobile-responsive-table tbody td:nth-child(2)::after {
    content: " Qty" !important;
    font-weight: 500 !important;
    color: #94a3b8 !important;
  }

  .p-dialog:has(.mobile-responsive-table) .mobile-responsive-table tbody td:nth-child(3) {
    grid-area: amount !important;
    justify-self: end !important;
    width: max-content !important;
    min-width: 100px !important;
    max-width: none !important;
    text-align: right !important;
    white-space: nowrap !important;
    overflow-wrap: normal !important;
    word-break: keep-all !important;
    color: #334155 !important;
    font-size: 0.88rem !important;
    font-weight: 700 !important;
    line-height: 1.3 !important;
  }

  .p-dialog:has(.mobile-responsive-table) .mobile-responsive-table tbody td:nth-child(3) > * {
    width: max-content !important;
    max-width: none !important;
    white-space: nowrap !important;
    overflow-wrap: normal !important;
    word-break: keep-all !important;
  }

  .p-dialog:has(.mobile-responsive-table) .mobile-responsive-table + div {
    justify-content: space-between !important;
    gap: 12px !important;
    margin-top: 6px !important;
    padding: 13px 2px 2px !important;
  }

  .p-dialog:has(.mobile-responsive-table) .mobile-responsive-table + div > span:first-child {
    margin-right: 0 !important;
    font-size: 0.88rem !important;
    font-weight: 600 !important;
  }

  .p-dialog:has(.mobile-responsive-table) .mobile-responsive-table + div .text-xl {
    font-size: 1.16rem !important;
    white-space: nowrap !important;
  }
}

/* ==============================================================
   LAPORAN TRANSAKSI — canonical compact list + filter controls
   Satu sumber untuk /laundry/pos/data_transaksi.
   ============================================================== */
.transaction-total-count {
  margin: 8px 0 12px;
  color: #64748b;
  font-size: .78rem;
  font-weight: 800;
}
.transaction-payment-badges {
  display:inline-flex;
  align-items:center;
  justify-content:flex-start;
  flex-wrap:nowrap;
  gap:5px;
  white-space:nowrap;
}
.transaction-payment-method-badge {
  display:inline-flex;
  align-items:center;
  justify-content:center;
  min-height:22px;
  padding:3px 7px;
  border:1px solid #dbe5ea;
  border-radius:7px;
  background:#f8fafc;
  color:#526273;
  font-size:.72rem;
  font-weight:750;
  line-height:1;
  white-space:nowrap;
}

@media (max-width: 768px) {
  .transaction-total-count { margin: 6px 0 10px !important; font-size: .74rem !important; }

  /* Laporan Transaksi mobile — canonical compact card, fokus identitas nota. */
  body.mobile-transaction-list-page .mobile-transaction-list-table tbody tr:not(.p-datatable-empty-message) {
    display: grid !important;
    grid-template-columns: 30px minmax(0,1fr) max-content !important;
    grid-template-areas:
      "number invoice total"
      "number date process"
      "number customer payment"
      "actions actions actions" !important;
    column-gap: 12px !important;
    row-gap: 7px !important;
    padding: 15px 15px 12px !important;
    margin-bottom: 10px !important;
    border-radius: 13px !important;
  }
  body.mobile-transaction-list-page .mobile-transaction-list-table tbody tr:not(.p-datatable-empty-message) > td {
    display: block !important;
    width: auto !important;
    max-width: none !important;
    min-width: 0 !important;
    min-height: 0 !important;
    padding: 2px 0 !important;
    border: 0 !important;
    text-align: left !important;
    line-height: 1.3 !important;
    justify-self: stretch !important;
  }
  body.mobile-transaction-list-page .mobile-transaction-list-table tbody tr:not(.p-datatable-empty-message) > td::before { display:none !important; }
  body.mobile-transaction-list-page .mobile-transaction-list-table tbody tr:not(.p-datatable-empty-message) > td:nth-child(1) {
    grid-area:number !important;
    display:flex !important;
    align-items:flex-start !important;
    justify-content:center !important;
    justify-self:start !important;
    width:30px !important;
    height:30px !important;
    padding:0 !important;
    border-radius:999px !important;
    background:#eef6f8 !important;
    color:#2c7680 !important;
    font-size:.75rem !important;
    font-weight:900 !important;
    line-height:30px !important;
  }
  body.mobile-transaction-list-page .mobile-transaction-list-table tbody tr:not(.p-datatable-empty-message) > td:nth-child(2) {
    grid-area:invoice !important;
    justify-self:stretch !important;
    align-self:start !important;
    width:100% !important;
    padding-top:1px !important;
    font-size:1rem !important;
    font-weight:900 !important;
    color:#1f2937 !important;
  }
  body.mobile-transaction-list-page .mobile-transaction-list-table tbody tr:not(.p-datatable-empty-message) > td:nth-child(3),
  body.mobile-transaction-list-page .mobile-transaction-list-table tbody tr:not(.p-datatable-empty-message) > td:nth-child(6) { display:none !important; }
  body.mobile-transaction-list-page .mobile-transaction-list-table tbody tr:not(.p-datatable-empty-message) > td:nth-child(4) {
    grid-area:customer !important;
    align-self:center !important;
    color:#27384a !important;
    font-size:.9rem !important;
    font-weight:850 !important;
  }
  body.mobile-transaction-list-page .mobile-transaction-list-table tbody tr:not(.p-datatable-empty-message) > td:nth-child(5) {
    grid-area:date !important;
    align-self:center !important;
    color:#64748b !important;
    font-size:.8rem !important;
    font-weight:650 !important;
  }
  body.mobile-transaction-list-page .mobile-transaction-list-table tbody tr:not(.p-datatable-empty-message) > td:nth-child(7) {
    grid-area:total !important;
    justify-self:end !important;
    align-self:start !important;
    width:max-content !important;
    color:#27834d !important;
    font-size:.98rem !important;
    font-weight:900 !important;
    white-space:nowrap !important;
  }
  body.mobile-transaction-list-page .mobile-transaction-list-table tbody tr:not(.p-datatable-empty-message) > td:nth-child(8) {
    grid-area:payment !important;
    justify-self:end !important;
    align-self:center !important;
    width:max-content !important;
  }
  body.mobile-transaction-list-page .transaction-payment-badges {
    justify-content:flex-end !important;
    gap:4px !important;
  }
  body.mobile-transaction-list-page .transaction-payment-method-badge {
    min-height:22px !important;
    padding:3px 6px !important;
    border-radius:7px !important;
    font-size:.68rem !important;
  }
  body.mobile-transaction-list-page .mobile-transaction-list-table tbody tr:not(.p-datatable-empty-message) > td:nth-child(9) {
    grid-area:process !important;
    justify-self:end !important;
    align-self:center !important;
    width:max-content !important;
    font-size:.8rem !important;
  }
  body.mobile-transaction-list-page .mobile-transaction-list-table tbody tr:not(.p-datatable-empty-message) > td:nth-child(10) {
    grid-area:actions !important;
    display:flex !important;
    align-items:center !important;
    justify-content:flex-end !important;
    justify-self:stretch !important;
    flex-wrap:nowrap !important;
    gap:6px !important;
    margin-top:6px !important;
    padding-top:9px !important;
    border-top:1px solid #eef2f6 !important;
  }
  body.mobile-transaction-list-page .mobile-transaction-list-table tbody td:nth-child(10) .p-button {
    width:32px !important; min-width:32px !important; height:32px !important; min-height:32px !important;
    margin:0 !important; padding:0 !important; border-radius:8px !important;
  }
  body.mobile-transaction-list-page .mobile-transaction-list-table tbody td:nth-child(10) .p-button .p-button-icon { font-size:.78rem !important; }
  body.mobile-transaction-list-page .transaction-invoice-cell {
    width:100% !important;
    max-width:none !important;
    justify-self:stretch !important;
    align-items:flex-start !important;
    justify-content:flex-start !important;
    min-height:0 !important;
    gap:2px !important;
  }
  body.mobile-transaction-list-page .transaction-invoice-number {
    width:100% !important;
    text-align:left !important;
    font-size:1rem !important;
    line-height:1.2 !important;
    white-space:nowrap !important;
  }
  body.mobile-transaction-list-page .transaction-invoice-badges { justify-content:flex-start !important; }
  body.mobile-transaction-list-page .mobile-transaction-list-table .p-tag,
  body.mobile-transaction-list-page .mobile-transaction-list-table .p-badge {
    white-space:nowrap !important; font-size:.71rem !important; padding:3px 8px !important;
  }

  /* Empty state DataTable: jangan diwarisi layout/card nomor transaksi. */
  body.mobile-transaction-list-page .mobile-transaction-list-table tbody tr.p-datatable-empty-message {
    display:block !important;
    width:100% !important;
    margin:0 !important;
    padding:0 !important;
    border:0 !important;
    border-radius:0 !important;
    background:transparent !important;
    box-shadow:none !important;
  }
  body.mobile-transaction-list-page .mobile-transaction-list-table tbody tr.p-datatable-empty-message > td {
    display:flex !important;
    align-items:center !important;
    justify-content:center !important;
    width:100% !important;
    max-width:100% !important;
    min-height:96px !important;
    padding:24px 16px !important;
    border:0 !important;
    color:#64748b !important;
    font-size:.86rem !important;
    font-weight:700 !important;
    line-height:1.35 !important;
    text-align:center !important;
    white-space:normal !important;
    overflow-wrap:normal !important;
    word-break:normal !important;
    border-radius:0 !important;
    background:transparent !important;
  }
  body.mobile-transaction-list-page .mobile-transaction-list-table tbody tr.p-datatable-empty-message > td::before { display:none !important; }
}

/* Edit Transaksi memakai komponen edit existing di dalam Dialog canonical. */
@media (max-width:767px){
}

/* Canonical popup aksi nota — satu sumber untuk POS dan Laporan Transaksi. */
.laundry-receipt-dialog-backdrop{position:fixed;inset:0;z-index:99999;background:rgba(15,23,42,.46);display:flex;align-items:center;justify-content:center;padding:12px;backdrop-filter:blur(2px)}
.laundry-receipt-dialog{width:min(400px,calc(100vw - 24px));max-height:calc(100dvh - 24px);overflow:auto;background:#fff;border:1px solid #e2e8f0;border-radius:18px;box-shadow:0 22px 60px rgba(15,23,42,.24);padding:20px}
.laundry-receipt-dialog-header{display:flex;flex-direction:column;align-items:center;text-align:center;padding:2px 0 14px}
.laundry-receipt-dialog-icon{width:60px;height:60px;border-radius:999px;display:flex;align-items:center;justify-content:center;background:#dcfce7;color:#16a34a;margin-bottom:10px}.laundry-receipt-dialog-icon i{font-size:2rem;font-weight:700}
.laundry-receipt-dialog-title{font-size:1.25rem;line-height:1.35;font-weight:800;color:#1f2937}.laundry-receipt-dialog-invoice{margin-top:5px;font-size:.875rem;color:#64748b}.laundry-receipt-dialog-invoice strong{color:#4f46e5}
.laundry-receipt-dialog-status{display:flex;align-items:center;justify-content:space-between;gap:12px;border-radius:12px;padding:11px 13px;margin-bottom:14px;border:1px solid}.laundry-receipt-dialog-status span{font-size:.78rem;font-weight:700;text-transform:uppercase;letter-spacing:.035em}.laundry-receipt-dialog-status strong{font-size:.95rem}.laundry-receipt-dialog-status.is-paid{background:#f0fdf4;border-color:#bbf7d0;color:#15803d}.laundry-receipt-dialog-status.is-unpaid{background:#fef2f2;border-color:#fecaca;color:#dc2626}
.laundry-receipt-dialog-actions{display:flex;flex-direction:column;gap:10px}.laundry-receipt-action-btn{width:100%;min-height:44px;border-radius:10px;border:1px solid;display:flex;align-items:center;justify-content:center;gap:10px;padding:10px 46px;font:inherit;font-weight:700;cursor:pointer;background:#fff;transition:background .15s ease,transform .15s ease;position:relative;text-align:center}.laundry-receipt-action-btn i{position:absolute;left:18px}.laundry-receipt-action-btn span{display:block;width:100%;text-align:center}.laundry-receipt-action-btn:active{transform:scale(.99)}.laundry-receipt-action-btn.is-customer{color:#0284c7;border-color:#7dd3fc}.laundry-receipt-action-btn.is-customer:hover{background:#f0f9ff}.laundry-receipt-action-btn.is-outlet{color:#475569;border-color:#cbd5e1}.laundry-receipt-action-btn.is-outlet:hover{background:#f8fafc}.laundry-receipt-action-btn.is-wa{color:#15803d;border-color:#86efac;background:#f0fdf4}.laundry-receipt-action-btn.is-wa:hover{background:#dcfce7}
.laundry-receipt-dialog-footer{border-top:1px solid #e5e7eb;margin-top:16px;padding-top:14px}.laundry-receipt-action-btn.is-finish{justify-content:center;color:#fff;background:#16a34a;border-color:#16a34a}.laundry-receipt-action-btn.is-finish:hover{background:#15803d}.laundry-receipt-action-btn.is-close{justify-content:center;color:#475569;border-color:#cbd5e1;background:#fff}.laundry-receipt-action-btn.is-close:hover{background:#f8fafc}
@media(max-width:575px){.laundry-receipt-dialog{padding:17px;border-radius:16px}.laundry-receipt-dialog-title{font-size:1.15rem}.laundry-receipt-action-btn{min-height:46px}}

/* Edit Transaksi canonical: hanya Paket Layanan + Parfum */
.transaction-edit-compact{width:100%;color:#1f2937}.transaction-edit-body{display:flex;flex-direction:column;gap:16px}.transaction-edit-loading{padding:28px 16px;text-align:center;color:#64748b;font-weight:600}.transaction-edit-summary{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:14px;align-items:start;padding:14px 16px;border:1px solid #e5e7eb;border-radius:12px;background:#f8fafc}.transaction-edit-label{display:block;font-size:.76rem;line-height:1.2;color:#64748b;font-weight:700;margin-bottom:4px}.transaction-edit-invoice{display:block;font-size:1rem;line-height:1.3;overflow-wrap:anywhere}.transaction-edit-total{text-align:right}.transaction-edit-total strong{font-size:1.05rem;color:#15803d}.transaction-edit-section{padding:15px 16px;border:1px solid #e5e7eb;border-radius:12px;background:#fff}.transaction-edit-section h4{margin:0 0 3px;font-size:1rem;font-weight:800;color:#1f2937}.transaction-edit-help{margin:0 0 12px;font-size:.78rem;line-height:1.45;color:#64748b}.transaction-edit-service-row{padding:12px 0;border-top:1px solid #eef2f7}.transaction-edit-service-row:first-of-type{border-top:0;padding-top:2px}.transaction-edit-service-head{display:flex;align-items:flex-start;justify-content:space-between;gap:12px;margin-bottom:9px}.transaction-edit-service-head strong{display:block;font-size:.92rem;line-height:1.35}.transaction-edit-qty{flex:0 0 auto;font-size:.78rem;font-weight:700;color:#64748b;text-align:right}.transaction-edit-select{width:100%}.transaction-edit-new-price{margin-top:6px;font-size:.76rem;color:#475569;text-align:right}.transaction-edit-locked{padding:10px 12px;border-radius:9px;background:#fff7ed;border:1px solid #fed7aa;color:#9a3412;font-size:.78rem;line-height:1.45}.transaction-edit-finance-warning{padding:13px 15px;border-radius:12px;background:#fff7ed;border:1px solid #fdba74;color:#9a3412}.transaction-edit-finance-warning>div{display:flex;justify-content:space-between;align-items:center;gap:12px;font-size:.88rem}.transaction-edit-finance-warning strong{font-size:1rem}.transaction-edit-finance-warning p{margin:8px 0 0;font-size:.78rem;line-height:1.5}.transaction-edit-actions{display:grid;grid-template-columns:1fr 1.4fr;gap:10px;padding-top:2px}.transaction-edit-actions .p-button{justify-content:center;min-height:44px}
@media(max-width:575px){.transaction-edit-body{gap:12px}.transaction-edit-summary{padding:12px 13px;gap:10px}.transaction-edit-invoice{font-size:.93rem}.transaction-edit-total strong{font-size:.96rem}.transaction-edit-section{padding:13px}.transaction-edit-service-head{gap:8px}.transaction-edit-service-head strong{font-size:.88rem}.transaction-edit-qty{font-size:.74rem}.transaction-edit-actions{grid-template-columns:1fr 1.25fr}.transaction-edit-actions .p-button{padding-left:.7rem;padding-right:.7rem;font-size:.82rem}.transaction-edit-finance-warning>div{font-size:.82rem}.transaction-edit-finance-warning strong{font-size:.92rem}}

/* Edit Transaksi: payment selector uses the same POS master source; layout only. */
.transaction-edit-payment-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px;align-items:start}
.transaction-edit-payment-grid>div:only-child{grid-column:1/-1}
.transaction-edit-payment-grid small{display:block;margin-top:6px;color:#64748b;font-size:.75rem;font-weight:600}
.transaction-edit-payment-note{padding:10px 12px;border:1px solid #e2e8f0;border-radius:9px;background:#f8fafc;color:#475569;font-size:.8rem;line-height:1.45}
.transaction-edit-payment-correction{padding:11px 13px;border:1px solid #bfdbfe;border-radius:10px;background:#eff6ff;color:#1e40af;font-size:.79rem;line-height:1.45}
@media(max-width:575px){.transaction-edit-payment-grid{grid-template-columns:1fr}.transaction-edit-payment-grid>div:only-child{grid-column:auto}}

/* =========================================================
   LAPORAN SUMMARY — canonical responsive refinement
   Uses the existing Owner Mode/report/table sources; no duplicate component.
   ========================================================= */
.summary-regular-breakdown {
  width: min(100%, 340px);
  margin-left: auto;
  display: grid;
  gap: 5px;
}
.summary-regular-line {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: 12px;
  padding: 5px 0;
  border-bottom: 1px solid #edf2f4;
  font-variant-numeric: tabular-nums;
}
.summary-regular-line:last-child {
  border-bottom: 0;
}
.summary-regular-line > span {
  color: #64748b;
  font-size: .76rem;
  font-weight: 700;
  line-height: 1.25;
  text-align: left;
}
.summary-regular-line > strong {
  color: #263244;
  font-size: .88rem;
  font-weight: 850;
  line-height: 1.2;
  text-align: right;
  white-space: nowrap;
}
.summary-regular-brutto > strong {
  color: #247c78;
}
.summary-regular-minus > strong {
  color: #b44955;
}
.summary-regular-netto {
  margin-top: 2px;
  padding: 7px 9px;
  border: 1px solid #cfe8e5;
  border-radius: 9px;
  background: #f0faf8;
}
.summary-regular-netto > span,
.summary-regular-netto > strong {
  color: #247c78;
  font-weight: 900;
}

@media (max-width: 767px) {
  /* /laundry/laporan/lap_summary — one canonical mobile flow:
     title -> Owner Mode -> period/export. */
  .summary-header-card-source {
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) !important;
    align-items: stretch !important;
    justify-content: flex-start !important;
    width: 100% !important;
    max-width: 100% !important;
    gap: 12px !important;
    margin: 0 0 14px !important;
    padding: 12px !important;
    border-radius: 15px !important;
    box-sizing: border-box !important;
    overflow: visible !important;
  }

  .summary-header-card-source > .summary-page-heading-source {
    order: 1 !important;
    grid-column: 1 / -1 !important;
    display: flex !important;
    align-items: center !important;
    justify-content: flex-start !important;
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    min-height: 62px !important;
    margin: 0 !important;
    padding: 13px 15px !important;
    box-sizing: border-box !important;
  }
  .summary-header-card-source > .summary-page-heading-source h1 {
    display: block !important;
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    margin: 0 !important;
    font-size: clamp(.76rem, 3.15vw, .96rem) !important;
    line-height: 1.25 !important;
    letter-spacing: -.018em !important;
    white-space: nowrap !important;
    overflow: hidden !important;
    text-overflow: clip !important;
  }

  .summary-header-card-source > .laundry-owner-scope[data-owner-scope-kind="report"] {
    order: 2 !important;
    grid-column: 1 / -1 !important;
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) !important;
    align-items: stretch !important;
    justify-content: flex-start !important;
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    min-height: 0 !important;
    gap: 11px !important;
    margin: 0 !important;
    padding: 12px !important;
    border-radius: 14px !important;
    box-sizing: border-box !important;
  }
  .summary-header-card-source > .laundry-owner-scope[data-owner-scope-kind="report"] .laundry-owner-scope-copy {
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) !important;
    align-items: center !important;
    justify-content: center !important;
    width: 100% !important;
    gap: 2px !important;
    text-align: center !important;
  }
  .summary-header-card-source > .laundry-owner-scope[data-owner-scope-kind="report"] .laundry-owner-scope-eyebrow {
    margin-inline: auto !important;
    font-size: .66rem !important;
  }
  .summary-header-card-source > .laundry-owner-scope[data-owner-scope-kind="report"] .laundry-owner-scope-copy strong {
    font-size: .96rem !important;
    line-height: 1.2 !important;
  }
  .summary-header-card-source > .laundry-owner-scope[data-owner-scope-kind="report"] .laundry-owner-scope-copy small {
    display: block !important;
    width: 100% !important;
    max-width: 100% !important;
    margin-top: 2px !important;
    font-size: .70rem !important;
    line-height: 1.35 !important;
    text-align: center !important;
  }
  .summary-header-card-source > .laundry-owner-scope[data-owner-scope-kind="report"] .laundry-owner-scope-controls {
    display: grid !important;
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
    align-items: stretch !important;
    justify-content: stretch !important;
    width: 100% !important;
    min-width: 0 !important;
    gap: 7px !important;
  }
  .summary-header-card-source > .laundry-owner-scope[data-owner-scope-kind="report"] .laundry-owner-scope-button {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: 100% !important;
    min-width: 0 !important;
    min-height: 42px !important;
    padding: 7px 4px !important;
    gap: 4px !important;
    border-radius: 10px !important;
    font-size: .65rem !important;
    line-height: 1.12 !important;
    white-space: normal !important;
    text-align: center !important;
  }
  .summary-header-card-source > .laundry-owner-scope[data-owner-scope-kind="report"] .laundry-owner-scope-button i {
    flex: 0 0 auto !important;
    font-size: .72rem !important;
  }

  .summary-header-card-source > .summary-filter-row-source {
    order: 3 !important;
    grid-column: 1 / -1 !important;
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) auto !important;
    align-items: end !important;
    width: 100% !important;
    min-width: 0 !important;
    gap: 9px !important;
    margin: 0 !important;
  }
  .summary-header-card-source .summary-period-source {
    display: grid !important;
    grid-template-columns: auto minmax(0, 1fr) !important;
    align-items: center !important;
    width: 100% !important;
    min-width: 0 !important;
    gap: 8px !important;
  }
  .summary-header-card-source .summary-period-source > span {
    margin-right: 0 !important;
    font-size: .76rem !important;
    white-space: nowrap !important;
  }
  .summary-header-card-source .summary-period-source .p-datepicker,
  .summary-header-card-source .summary-period-source .p-calendar {
    width: 100% !important;
    min-width: 0 !important;
  }
  .summary-header-card-source .summary-period-source .p-inputtext {
    min-height: 38px !important;
    padding-top: .58rem !important;
    padding-bottom: .58rem !important;
    font-size: .76rem !important;
  }
  .summary-header-card-source .summary-export-excel-source {
    min-width: 106px !important;
    height: 38px !important;
    min-height: 38px !important;
    max-height: 38px !important;
    margin: 0 !important;
  }

  .summary-data-card-source {
    width: 100% !important;
    border-radius: 15px !important;
    overflow: hidden !important;
  }
  .summary-data-card-source .p-datatable,
  .summary-data-card-source .p-datatable-wrapper,
  .summary-data-card-source table {
    width: 100% !important;
    min-width: 0 !important;
    max-width: 100% !important;
  }
  .summary-data-card-source .p-datatable-tbody > tr {
    margin-bottom: 10px !important;
    border-radius: 14px !important;
  }
  .summary-data-card-source .p-datatable-tbody > tr > td {
    min-width: 0 !important;
    padding-left: 14px !important;
    padding-right: 14px !important;
  }
  .summary-data-card-source .p-datatable-tbody > tr > td:last-child {
    align-items: stretch !important;
  }

  /* Reguler: breakdown is the value area; remove redundant TOTAL PENDAPATAN. */
  .summary-data-card-source .p-datatable-tbody > tr > td:last-child:has(.summary-regular-breakdown)::before,
  .summary-data-card-source .p-datatable-tbody > tr > td:last-child:has(.summary-regular-breakdown) > [data-pc-section="columnTitle"] {
    display: none !important;
    content: none !important;
  }
  .summary-data-card-source .p-datatable-tbody > tr > td:last-child:has(.summary-regular-breakdown) {
    display: block !important;
    width: 100% !important;
    padding-top: 4px !important;
  }
  .summary-data-card-source .summary-regular-breakdown {
    width: 100% !important;
    max-width: none !important;
    margin: 0 !important;
    gap: 3px !important;
  }
  .summary-data-card-source .summary-regular-line {
    grid-template-columns: minmax(0, 1fr) auto !important;
    width: 100% !important;
    gap: 8px !important;
    padding: 7px 0 !important;
  }
  .summary-data-card-source .summary-regular-line > span {
    text-align: left !important;
    font-size: .78rem !important;
  }
  .summary-data-card-source .summary-regular-line > strong {
    min-width: 86px !important;
    text-align: right !important;
    font-size: .88rem !important;
  }
  .summary-data-card-source .summary-regular-netto {
    margin-top: 3px !important;
    padding: 7px 8px !important;
  }

  .summary-data-card-source > .bg-emerald-500 {
    padding: 13px !important;
    gap: 8px !important;
    flex-direction: row !important;
    justify-content: space-between !important;
    align-items: center !important;
  }
  .summary-data-card-source > .bg-emerald-500 .text-xl {
    font-size: .82rem !important;
    letter-spacing: .06em !important;
  }
  .summary-data-card-source > .bg-emerald-500 .text-3xl {
    font-size: 1.15rem !important;
  }
  .summary-data-card-source > .bg-emerald-500 > div:last-child {
    min-width: 0 !important;
    padding: 8px 10px !important;
  }
}

/* Laporan Summary heading — canonical single title */
.summary-page-heading-source .summary-heading-title{
  font-size:clamp(1.15rem, 2vw, 1.5rem);
  line-height:1.2;
  white-space:nowrap;
}
@media (max-width: 767px){
  .summary-page-heading-source .summary-heading-title{font-size:1.15rem;}
}

/* ==============================================================
   PENGELUARAN LAIN — canonical list layout
   Satu sumber untuk /laundry/pos/pengeluaran_lain.
   Mengikuti bahasa desain Laporan Transaksi.
   ============================================================== */
.expense-page-toolbar{
  display:flex;
  align-items:center;
  justify-content:flex-end;
  gap:10px;
  width:100%;
}
.expense-add-button{
  min-height:38px;
}
.expense-company-badge{
  display:inline-block;
  width:max-content;
  padding:1px 5px;
  border-radius:999px;
  font-size:8px;
  line-height:1.25;
  font-weight:600;
  white-space:nowrap;
}




@media (max-width:768px){
  body.mobile-expense-page .daily-report-table-source tbody td{ text-align:center !important; }
  body.mobile-expense-page .daily-report-table-source .transaction-history-action-source{ width:26px !important; min-width:26px !important; max-width:26px !important; height:26px !important; min-height:26px !important; max-height:26px !important; padding:0 !important; border-radius:7px !important; margin:0 !important; }
  body.mobile-expense-page .daily-report-table-source .transaction-history-action-source .p-button-icon{ font-size:.72rem !important; }
  body.mobile-expense-page .layout-main .card{
    gap:12px !important;
  }

  body.mobile-expense-page .laundry-owner-scope[data-owner-scope-kind="transaction"]{
    width:100% !important;
    margin:0 0 2px !important;
  }
  body.mobile-expense-page .laundry-owner-scope[data-owner-scope-kind="transaction"] .laundry-owner-scope-controls{
    grid-template-columns:repeat(3,minmax(0,1fr)) !important;
    width:100% !important;
  }

  body.mobile-expense-page .expense-page-toolbar{
    width:100% !important;
    justify-content:stretch !important;
    margin:0 !important;
  }
  body.mobile-expense-page .expense-add-button{
    width:100% !important;
    min-height:40px !important;
  }

  /* Pengeluaran Lain: dua filter sejajar mengikuti pola filter mobile Laporan Transaksi. */
  body.mobile-expense-page .expense-filter-source{
    display:grid !important;
    grid-template-columns:repeat(2,minmax(0,1fr)) !important;
    align-items:end !important;
    width:100% !important;
    gap:8px !important;
    margin:0 !important;
  }
  body.mobile-expense-page .expense-filter-source .report-control-cell{
    width:100% !important;
    min-width:0 !important;
  }
  body.mobile-expense-page .expense-filter-source .report-control-cell > label{
    min-height:28px !important;
    margin-bottom:5px !important;
    font-size:.72rem !important;
    line-height:1.15 !important;
  }
  body.mobile-expense-page .expense-filter-source .p-calendar,
  body.mobile-expense-page .expense-filter-source .p-datepicker,
  body.mobile-expense-page .expense-filter-source .p-inputtext{
    width:100% !important;
    min-width:0 !important;
  }
  body.mobile-expense-page .expense-filter-source .p-inputtext{
    height:38px !important;
    padding-left:9px !important;
    padding-right:34px !important;
    font-size:.72rem !important;
  }
  body.mobile-expense-page .expense-filter-source .p-datepicker-trigger{
    width:34px !important;
    min-width:34px !important;
    padding:0 !important;
  }
}


.deposit-status-badges{
  display:inline-flex;
  align-items:center;
  justify-content:flex-start;
  flex-wrap:wrap;
  gap:6px;
}
.deposit-company-badge{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  min-height:22px;
  padding:3px 8px;
  border:1px solid #d7e7ea;
  border-radius:999px;
  background:#eef7f8;
  color:#2c7680;
  font-size:.68rem;
  font-weight:850;
  line-height:1;
  white-space:nowrap;
}
@media(max-width:767px){
  body.mobile-deposit-report-page .deposit-status-badges{
    gap:5px !important;
    justify-content:flex-end !important;
  }
  body.mobile-deposit-report-page .deposit-company-badge{
    min-height:20px !important;
    padding:3px 7px !important;
    font-size:.64rem !important;
  }
}

@media(max-width:767px){
  body.mobile-deposit-report-page .deposit-report-table-source .p-paginator{
    display:flex !important;
    align-items:center !important;
    justify-content:center !important;
    flex-wrap:nowrap !important;
    gap:4px !important;
    width:100% !important;
    margin:6px 0 0 !important;
    padding:9px 0 2px !important;
    border:0 !important;
    background:transparent !important;
  }
  body.mobile-deposit-report-page .deposit-report-table-source .p-paginator-page,
  body.mobile-deposit-report-page .deposit-report-table-source .p-paginator-first,
  body.mobile-deposit-report-page .deposit-report-table-source .p-paginator-prev,
  body.mobile-deposit-report-page .deposit-report-table-source .p-paginator-next,
  body.mobile-deposit-report-page .deposit-report-table-source .p-paginator-last{
    flex:0 0 32px !important;
    width:32px !important;
    min-width:32px !important;
    height:32px !important;
    min-height:32px !important;
    margin:0 !important;
    padding:0 !important;
    border-radius:8px !important;
  }
  body.mobile-deposit-report-page .deposit-report-table-source .p-paginator-current,
  body.mobile-deposit-report-page .deposit-report-table-source .p-paginator-rpp-dropdown,
  body.mobile-deposit-report-page .deposit-report-table-source .p-paginator-rpp-options,
  body.mobile-deposit-report-page .deposit-report-table-source [class*="rowsperpage" i]{
    display:none !important;
  }
}

/* ==============================================================
   MASTER BARANG + LAPORAN STOK — CANONICAL MOBILE SOURCE
   Current table structures (Owner):
   Master: No | Nama | Kategori | Satuan | Gudang | LIW | WIY | Aksi
   Laporan: No | Nama | Awal | Masuk | Keluar | Sisa | Riwayat
   ============================================================== */
.stock-owner-summary,
.warehouse-owner-summary{
  display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));
  gap:12px;
  margin:0 0 16px;
}
.stock-summary-card,
.warehouse-stat-card{
  min-width:0;
  border:1px solid #e3e8ee;
  border-radius:14px;
  background:#fff;
  padding:13px 15px;
}
.stock-summary-card small,
.warehouse-stat-card small{
  display:block;
  color:#6d7886;
  font-size:.78rem;
  line-height:1.25;
  margin-bottom:7px;
}
.stock-summary-card strong,
.warehouse-stat-card strong{
  color:#202a36;
  font-size:1.05rem;
  line-height:1.1;
}
.stock-summary-warning strong,.warehouse-stat-warning strong{color:#c47a00}
.stock-summary-danger strong,.warehouse-stat-restock strong{color:#c93636}
.stock-summary-total strong{color:#13738b}

@media(max-width:768px){
  body.mobile-items-page .card,
  body.mobile-stock-report-page .card{
    overflow:visible !important;
  }

  body.mobile-items-page .items-page-heading-source,
  body.mobile-stock-report-page .stock-page-heading-source{
    width:100% !important;
    margin-bottom:10px !important;
  }

  body.mobile-items-page .warehouse-owner-summary,
  body.mobile-stock-report-page .stock-owner-summary{
    grid-template-columns:repeat(2,minmax(0,1fr)) !important;
    gap:10px !important;
    margin-bottom:14px !important;
  }
  body.mobile-items-page .warehouse-stat-card,
  body.mobile-stock-report-page .stock-summary-card{
    min-height:80px !important;
    padding:12px 14px !important;
    border-radius:13px !important;
  }

  body.mobile-items-page .laundry-owner-scope[data-owner-scope-kind="master"],
  body.mobile-stock-report-page .laundry-owner-scope[data-owner-scope-kind="report"]{
    width:100% !important;
    margin:0 0 12px !important;
  }
  body.mobile-items-page .laundry-owner-scope[data-owner-scope-kind="master"] .laundry-owner-scope-controls,
  body.mobile-stock-report-page .laundry-owner-scope[data-owner-scope-kind="report"] .laundry-owner-scope-controls{
    display:grid !important;
    grid-template-columns:repeat(3,minmax(0,1fr)) !important;
    gap:8px !important;
    width:100% !important;
  }

  /* ---------- Master toolbar ---------- */
  body.mobile-items-page .items-list-table-source .p-datatable-header,
  body.mobile-stock-report-page .stock-report-table-source .p-datatable-header{
    padding:0 0 10px !important;
    border:0 !important;
    background:transparent !important;
  }
  body.mobile-items-page .items-list-table-source .p-datatable-header > div,
  body.mobile-stock-report-page .stock-report-table-source .p-datatable-header > div{
    display:grid !important;
    grid-template-columns:1fr !important;
    align-items:stretch !important;
    gap:8px !important;
    width:100% !important;
    min-width:0 !important;
  }
  body.mobile-items-page .items-list-table-source .p-datatable-header .p-button{
    width:100% !important;
    max-width:none !important;
    min-height:46px !important;
    border-radius:12px !important;
  }
  body.mobile-items-page .items-list-table-source .p-datatable-header .p-iconfield,
  body.mobile-stock-report-page .stock-report-table-source .p-datatable-header .p-iconfield,
  body.mobile-items-page .items-list-table-source .p-datatable-header .p-inputtext,
  body.mobile-stock-report-page .stock-report-table-source .p-datatable-header .p-inputtext{
    width:100% !important;
    min-width:0 !important;
    max-width:100% !important;
  }
  body.mobile-items-page .items-list-table-source .p-datatable-header .p-inputtext,
  body.mobile-stock-report-page .stock-report-table-source .p-datatable-header .p-inputtext{
    min-height:46px !important;
    border-radius:12px !important;
  }

  /* ---------- shared table reset ---------- */
  body.mobile-items-page .items-list-table-source .p-datatable-wrapper,
  body.mobile-stock-report-page .stock-report-table-source .p-datatable-wrapper{
    width:100% !important;
    max-width:100% !important;
    overflow:visible !important;
  }
  body.mobile-items-page .items-list-table-source table,
  body.mobile-items-page .items-list-table-source tbody,
  body.mobile-stock-report-page .stock-report-table-source table,
  body.mobile-stock-report-page .stock-report-table-source tbody{
    display:block !important;
    width:100% !important;
    min-width:0 !important;
    table-layout:auto !important;
  }
  body.mobile-items-page .items-list-table-source colgroup,
  body.mobile-stock-report-page .stock-report-table-source colgroup,
  body.mobile-items-page .items-list-table-source thead,
  body.mobile-stock-report-page .stock-report-table-source thead{
    display:none !important;
  }

  /* ============================================================
     LAPORAN STOK CARD — canonical mobile layout
     ============================================================ */
  body.mobile-stock-report-page .stock-filter-source{
    display:grid !important;grid-template-columns:1fr !important;gap:9px !important;padding:12px !important;
    margin:0 0 12px !important;border-radius:13px !important;
  }
  body.mobile-stock-report-page .stock-filter-source .field,
  body.mobile-stock-report-page .stock-filter-source .p-datepicker,
  body.mobile-stock-report-page .stock-filter-source .p-inputtext,
  body.mobile-stock-report-page .stock-filter-source .p-button{width:100% !important;max-width:none !important;}
  body.mobile-stock-report-page .stock-report-table-source .p-datatable-header > div > span{
    display:block !important;width:100% !important;margin:0 !important;color:#4b5868 !important;font-size:.86rem !important;font-weight:800 !important;
  }
  body.mobile-stock-report-page .stock-report-table-source tbody tr:not(.p-datatable-empty-message){
    position:relative !important;
    display:grid !important;
    grid-template-columns:repeat(2,minmax(0,1fr)) !important;
    grid-template-areas:"name name" "opening incoming" "outgoing stock" "actions actions" !important;
    gap:9px !important;
    width:100% !important;
    margin:0 0 13px !important;
    padding:15px !important;
    border:1px solid #e2e8ee !important;
    border-radius:16px !important;
    background:#fff !important;
    box-shadow:0 2px 9px rgba(15,23,42,.04) !important;
    overflow:hidden !important;
  }
  body.mobile-stock-report-page .stock-report-table-source tbody tr:not(.p-datatable-empty-message) > td{
    display:block !important;width:auto !important;min-width:0 !important;max-width:none !important;padding:0 !important;border:0 !important;text-align:left !important;
  }
  body.mobile-stock-report-page .stock-report-table-source tbody tr:not(.p-datatable-empty-message) > td:nth-child(1){
    position:absolute !important;top:15px !important;left:15px !important;display:flex !important;align-items:center !important;justify-content:center !important;
    width:34px !important;height:34px !important;border-radius:50% !important;background:#eef8fa !important;color:#267786 !important;font-size:.79rem !important;font-weight:900 !important;
  }
  body.mobile-stock-report-page .stock-report-table-source tbody tr:not(.p-datatable-empty-message) > td:nth-child(2){
    grid-area:name !important;min-height:42px !important;padding:1px 0 8px 46px !important;border-bottom:1px solid #eef1f4 !important;
    display:flex !important;align-items:flex-start !important;font-size:1rem !important;font-weight:900 !important;color:#202a36 !important;
  }
  body.mobile-stock-report-page .stock-name-wrap{display:flex !important;flex-direction:column !important;gap:3px !important;width:100% !important;}
  body.mobile-stock-report-page .stock-item-name{display:block !important;line-height:1.2 !important;text-align:left !important;}
  body.mobile-stock-report-page .stock-location-inline{color:#748192 !important;font-size:.70rem !important;font-weight:650 !important;line-height:1.2 !important;text-align:left !important;}
  body.mobile-stock-report-page .stock-report-table-source tbody tr:not(.p-datatable-empty-message) > td:nth-child(3),
  body.mobile-stock-report-page .stock-report-table-source tbody tr:not(.p-datatable-empty-message) > td:nth-child(4),
  body.mobile-stock-report-page .stock-report-table-source tbody tr:not(.p-datatable-empty-message) > td:nth-child(5),
  body.mobile-stock-report-page .stock-report-table-source tbody tr:not(.p-datatable-empty-message) > td:nth-child(6){
    display:flex !important;flex-direction:row !important;align-items:center !important;justify-content:space-between !important;
    min-height:52px !important;padding:10px 12px !important;border:1px solid #e6ebef !important;border-radius:11px !important;background:#fafcfd !important;text-align:left !important;font-weight:900 !important;
  }
  body.mobile-stock-report-page .stock-report-table-source tbody tr:not(.p-datatable-empty-message) > td:nth-child(3){grid-area:opening !important;}
  body.mobile-stock-report-page .stock-report-table-source tbody tr:not(.p-datatable-empty-message) > td:nth-child(4){grid-area:incoming !important;}
  body.mobile-stock-report-page .stock-report-table-source tbody tr:not(.p-datatable-empty-message) > td:nth-child(5){grid-area:outgoing !important;}
  body.mobile-stock-report-page .stock-report-table-source tbody tr:not(.p-datatable-empty-message) > td:nth-child(6){grid-area:stock !important;}
  body.mobile-stock-report-page .stock-report-table-source tbody tr:not(.p-datatable-empty-message) > td:nth-child(3)::before,
  body.mobile-stock-report-page .stock-report-table-source tbody tr:not(.p-datatable-empty-message) > td:nth-child(4)::before,
  body.mobile-stock-report-page .stock-report-table-source tbody tr:not(.p-datatable-empty-message) > td:nth-child(5)::before,
  body.mobile-stock-report-page .stock-report-table-source tbody tr:not(.p-datatable-empty-message) > td:nth-child(6)::before{
    display:block !important;margin:0 !important;color:#7d8997 !important;font-size:.64rem !important;font-weight:800 !important;line-height:1 !important;text-transform:uppercase !important;letter-spacing:.025em !important;white-space:nowrap !important;
  }
  body.mobile-stock-report-page .stock-report-table-source tbody tr:not(.p-datatable-empty-message) > td:nth-child(3)::before{content:"Stok Awal" !important;}
  body.mobile-stock-report-page .stock-report-table-source tbody tr:not(.p-datatable-empty-message) > td:nth-child(4)::before{content:"Masuk" !important;}
  body.mobile-stock-report-page .stock-report-table-source tbody tr:not(.p-datatable-empty-message) > td:nth-child(5)::before{content:"Keluar" !important;}
  body.mobile-stock-report-page .stock-report-table-source tbody tr:not(.p-datatable-empty-message) > td:nth-child(6)::before{content:"Sisa" !important;}
  body.mobile-stock-report-page .stock-report-table-source tbody tr:not(.p-datatable-empty-message) > td:nth-child(7){
    grid-area:actions !important;display:block !important;padding-top:2px !important;
  }
  body.mobile-stock-report-page .stock-report-table-source .mobile-action-cell::before{display:none !important;content:none !important;}
  body.mobile-stock-report-page .stock-report-table-source .mobile-action-cell .p-button{
    display:inline-flex !important;width:100% !important;min-width:0 !important;max-width:none !important;height:42px !important;min-height:42px !important;
    padding:0 12px !important;border-radius:10px !important;justify-content:center !important;gap:7px !important;
  }
  body.mobile-stock-report-page .stock-report-table-source .mobile-action-cell .p-button .p-button-label{display:inline-block !important;font-size:.78rem !important;font-weight:800 !important;}

  body.mobile-stock-report-page .stock-report-table-source tbody tr.p-datatable-empty-message,
  body.mobile-items-page .items-list-table-source tbody tr.p-datatable-empty-message{
    display:block !important;
    width:100% !important;
    margin:0 !important;
    padding:0 !important;
    border:0 !important;
    background:transparent !important;
    box-shadow:none !important;
  }
  body.mobile-stock-report-page .stock-report-table-source tbody tr.p-datatable-empty-message > td,
  body.mobile-items-page .items-list-table-source tbody tr.p-datatable-empty-message > td{
    display:flex !important;
    align-items:center !important;
    justify-content:center !important;
    width:100% !important;
    min-height:100px !important;
    padding:22px 14px !important;
    border:0 !important;
    color:#64748b !important;
    text-align:center !important;
    white-space:normal !important;
  }

  body.mobile-items-page .items-list-table-source .p-paginator,
  body.mobile-stock-report-page .stock-report-table-source .p-paginator{
    display:flex !important;
    justify-content:center !important;
    gap:3px !important;
    width:100% !important;
  }

  /* distribution history remains compact and screenshot-friendly */
  body.mobile-stock-report-page .stock-distribution-section{
    margin-top:16px !important;
  }
  body.mobile-stock-report-page .stock-section-heading{
    display:flex !important;
    flex-direction:column !important;
    align-items:flex-start !important;
    gap:8px !important;
  }
  body.mobile-stock-report-page .stock-distribution-list{
    display:grid !important;
    grid-template-columns:1fr !important;
    gap:10px !important;
  }
  body.mobile-stock-report-page .stock-distribution-card{
    padding:13px !important;
    border-radius:14px !important;
  }
  body.mobile-stock-report-page .stock-distribution-meta{
    display:grid !important;
    grid-template-columns:1fr 1fr !important;
    gap:8px !important;
  }
  body.mobile-stock-report-page .stock-distribution-meta > div:first-child{
    grid-column:1/-1 !important;
  }
}


/* ==============================================================
   LAPORAN STOK — MOBILE NATIVE GROUPING
   Satu barang menjadi satu kelompok; Gudang, LIW, dan WIY tampil
   sebagai lokasi di dalam kelompok yang sama. PrimeVue DataTable
   tetap menjadi sumber render canonical agar data tidak hilang.
   ============================================================== */
@media (max-width:768px){
  body.mobile-stock-report-page .stock-report-table-source .p-datatable-wrapper{
    display:block !important;
    width:100% !important;
    overflow:visible !important;
  }
  body.mobile-stock-report-page .stock-report-table-source .p-paginator{
    margin-top:10px !important;
  }
  body.mobile-stock-report-page .stock-report-table-source tbody{
    counter-reset:stockgroup !important;
  }
  body.mobile-stock-report-page .stock-report-table-source tbody tr.p-datatable-row-group-header{
    counter-increment:stockgroup !important;
    display:block !important;
    width:100% !important;
    margin:12px 0 0 !important;
    padding:0 !important;
    border:1px solid #dfe6ec !important;
    border-bottom:0 !important;
    border-radius:16px 16px 0 0 !important;
    background:#fff !important;
    box-shadow:0 2px 9px rgba(15,23,42,.035) !important;
    overflow:hidden !important;
  }
  body.mobile-stock-report-page .stock-report-table-source tbody tr.p-datatable-row-group-header > td{
    display:block !important;
    width:100% !important;
    padding:13px 14px 11px !important;
    border:0 !important;
    background:#fff !important;
  }
  body.mobile-stock-report-page .stock-native-group-head{
    display:flex !important;
    align-items:center !important;
    gap:11px !important;
    min-width:0 !important;
  }
  body.mobile-stock-report-page .stock-native-group-number{
    display:inline-flex !important;
    align-items:center !important;
    justify-content:center !important;
    flex:0 0 34px !important;
    width:34px !important;
    height:34px !important;
    border-radius:50% !important;
    background:#eef8fa !important;
    color:#267786 !important;
    font-size:.78rem !important;
    font-weight:900 !important;
  }
  body.mobile-stock-report-page .stock-native-group-number::before{
    content:counter(stockgroup) !important;
  }
  body.mobile-stock-report-page .stock-native-group-title{
    display:flex !important;
    flex-direction:column !important;
    gap:2px !important;
    min-width:0 !important;
  }
  body.mobile-stock-report-page .stock-native-group-title strong{
    color:#202a36 !important;
    font-size:1rem !important;
    font-weight:900 !important;
    line-height:1.18 !important;
    overflow-wrap:anywhere !important;
  }
  body.mobile-stock-report-page .stock-native-group-title small{
    color:#7a8795 !important;
    font-size:.68rem !important;
    font-weight:650 !important;
    line-height:1.2 !important;
  }

  /* Setiap row setelah group header adalah satu lokasi, bukan card barang baru. */
  body.mobile-stock-report-page .stock-report-table-source tbody tr:not(.p-datatable-row-group-header):not(.p-datatable-empty-message){
    position:relative !important;
    display:grid !important;
    grid-template-columns:repeat(2,minmax(0,1fr)) !important;
    grid-template-areas:
      "location location"
      "opening incoming"
      "outgoing stock"
      "actions actions" !important;
    gap:7px !important;
    width:100% !important;
    margin:0 !important;
    padding:10px 12px 11px !important;
    border-left:1px solid #dfe6ec !important;
    border-right:1px solid #dfe6ec !important;
    border-top:1px solid #edf1f4 !important;
    border-bottom:0 !important;
    border-radius:0 !important;
    background:#fff !important;
    box-shadow:none !important;
    overflow:hidden !important;
  }
  body.mobile-stock-report-page .stock-report-table-source tbody tr:not(.p-datatable-row-group-header):not(.p-datatable-empty-message):has(+ tr.p-datatable-row-group-header),
  body.mobile-stock-report-page .stock-report-table-source tbody tr:not(.p-datatable-row-group-header):not(.p-datatable-empty-message):last-child{
    padding-bottom:13px !important;
    border-bottom:1px solid #dfe6ec !important;
    border-radius:0 0 16px 16px !important;
    margin-bottom:2px !important;
  }
  body.mobile-stock-report-page .stock-report-table-source tbody tr:not(.p-datatable-row-group-header):not(.p-datatable-empty-message) > td{
    display:block !important;
    position:static !important;
    width:auto !important;
    height:auto !important;
    min-width:0 !important;
    max-width:none !important;
    min-height:0 !important;
    padding:0 !important;
    border:0 !important;
    border-radius:0 !important;
    background:transparent !important;
    text-align:left !important;
  }
  body.mobile-stock-report-page .stock-report-table-source tbody tr:not(.p-datatable-row-group-header):not(.p-datatable-empty-message) > td::before{
    display:none !important;
    content:none !important;
  }
  body.mobile-stock-report-page .stock-report-table-source tbody tr:not(.p-datatable-row-group-header):not(.p-datatable-empty-message) > td:nth-child(1){
    display:none !important;
  }
  body.mobile-stock-report-page .stock-report-table-source tbody tr:not(.p-datatable-row-group-header):not(.p-datatable-empty-message) > td:nth-child(2){
    grid-area:location !important;
    display:flex !important;
    align-items:center !important;
    min-height:30px !important;
    padding:0 1px 4px !important;
  }
  body.mobile-stock-report-page .stock-report-table-source .stock-name-wrap{
    display:block !important;
    width:100% !important;
  }
  body.mobile-stock-report-page .stock-report-table-source .stock-item-name{
    display:none !important;
  }
  body.mobile-stock-report-page .stock-report-table-source .stock-location-inline{
    display:block !important;
    color:#526171 !important;
    font-size:.76rem !important;
    font-weight:850 !important;
    line-height:1.2 !important;
  }
  body.mobile-stock-report-page .stock-report-table-source tbody tr:not(.p-datatable-row-group-header):not(.p-datatable-empty-message) > td:nth-child(3),
  body.mobile-stock-report-page .stock-report-table-source tbody tr:not(.p-datatable-row-group-header):not(.p-datatable-empty-message) > td:nth-child(4),
  body.mobile-stock-report-page .stock-report-table-source tbody tr:not(.p-datatable-row-group-header):not(.p-datatable-empty-message) > td:nth-child(5),
  body.mobile-stock-report-page .stock-report-table-source tbody tr:not(.p-datatable-row-group-header):not(.p-datatable-empty-message) > td:nth-child(6){
    display:flex !important;
    align-items:center !important;
    justify-content:space-between !important;
    gap:8px !important;
    min-height:42px !important;
    padding:8px 10px !important;
    border:1px solid #e6ebef !important;
    border-radius:10px !important;
    background:#fafcfd !important;
    font-weight:900 !important;
  }
  body.mobile-stock-report-page .stock-report-table-source tbody tr:not(.p-datatable-row-group-header):not(.p-datatable-empty-message) > td:nth-child(3){grid-area:opening !important;}
  body.mobile-stock-report-page .stock-report-table-source tbody tr:not(.p-datatable-row-group-header):not(.p-datatable-empty-message) > td:nth-child(4){grid-area:incoming !important;}
  body.mobile-stock-report-page .stock-report-table-source tbody tr:not(.p-datatable-row-group-header):not(.p-datatable-empty-message) > td:nth-child(5){grid-area:outgoing !important;}
  body.mobile-stock-report-page .stock-report-table-source tbody tr:not(.p-datatable-row-group-header):not(.p-datatable-empty-message) > td:nth-child(6){grid-area:stock !important;}
  body.mobile-stock-report-page .stock-report-table-source tbody tr:not(.p-datatable-row-group-header):not(.p-datatable-empty-message) > td:nth-child(3)::before,
  body.mobile-stock-report-page .stock-report-table-source tbody tr:not(.p-datatable-row-group-header):not(.p-datatable-empty-message) > td:nth-child(4)::before,
  body.mobile-stock-report-page .stock-report-table-source tbody tr:not(.p-datatable-row-group-header):not(.p-datatable-empty-message) > td:nth-child(5)::before,
  body.mobile-stock-report-page .stock-report-table-source tbody tr:not(.p-datatable-row-group-header):not(.p-datatable-empty-message) > td:nth-child(6)::before{
    display:block !important;
    margin:0 !important;
    color:#8894a1 !important;
    font-size:.61rem !important;
    font-weight:850 !important;
    line-height:1 !important;
    text-transform:uppercase !important;
    letter-spacing:.02em !important;
    white-space:nowrap !important;
  }
  body.mobile-stock-report-page .stock-report-table-source tbody tr:not(.p-datatable-row-group-header):not(.p-datatable-empty-message) > td:nth-child(3)::before{content:"Awal" !important;}
  body.mobile-stock-report-page .stock-report-table-source tbody tr:not(.p-datatable-row-group-header):not(.p-datatable-empty-message) > td:nth-child(4)::before{content:"Masuk" !important;}
  body.mobile-stock-report-page .stock-report-table-source tbody tr:not(.p-datatable-row-group-header):not(.p-datatable-empty-message) > td:nth-child(5)::before{content:"Keluar" !important;}
  body.mobile-stock-report-page .stock-report-table-source tbody tr:not(.p-datatable-row-group-header):not(.p-datatable-empty-message) > td:nth-child(6)::before{content:"Sisa" !important;}
  body.mobile-stock-report-page .stock-report-table-source tbody tr:not(.p-datatable-row-group-header):not(.p-datatable-empty-message) > td:nth-child(7){
    grid-area:actions !important;
    display:block !important;
    padding-top:1px !important;
  }
  body.mobile-stock-report-page .stock-report-table-source .mobile-action-cell .p-button{
    width:100% !important;
    min-width:0 !important;
    max-width:none !important;
    height:36px !important;
    min-height:36px !important;
    padding:0 10px !important;
    border-radius:9px !important;
    justify-content:center !important;
    gap:6px !important;
  }
  body.mobile-stock-report-page .stock-report-table-source .mobile-action-cell .p-button .p-button-label{
    display:inline-block !important;
    font-size:.72rem !important;
    font-weight:850 !important;
  }
  body.mobile-stock-report-page .stock-report-table-source .mobile-action-cell .p-button .p-button-icon{
    font-size:.72rem !important;
  }

  /* History dialog: use almost the full phone width, but never wider. */
  body.mobile-stock-report-page .p-dialog:has(.p-datatable){
    width:calc(100vw - 24px) !important;
    max-width:620px !important;
    margin:12px !important;
    border-radius:16px !important;
    overflow:hidden !important;
  }
  body.mobile-stock-report-page .p-dialog:has(.p-datatable) .p-dialog-header{
    padding:14px 14px 12px !important;
    gap:8px !important;
  }
  body.mobile-stock-report-page .p-dialog:has(.p-datatable) .p-dialog-title,
  body.mobile-stock-report-page .p-dialog:has(.p-datatable) .p-dialog-header span{
    min-width:0 !important;
    font-size:.98rem !important;
    line-height:1.2 !important;
    white-space:normal !important;
  }
  body.mobile-stock-report-page .p-dialog:has(.p-datatable) .p-dialog-header-actions,
  body.mobile-stock-report-page .p-dialog:has(.p-datatable) .p-dialog-header-actions .p-button,
  body.mobile-stock-report-page .p-dialog:has(.p-datatable) .p-dialog-close-button{
    flex:0 0 38px !important;
    width:38px !important;
    height:38px !important;
    min-width:38px !important;
    min-height:38px !important;
  }
  body.mobile-stock-report-page .p-dialog:has(.p-datatable) .p-dialog-content{
    padding:10px 12px 8px !important;
    overflow-x:hidden !important;
  }
  body.mobile-stock-report-page .p-dialog:has(.p-datatable) .p-datatable,
  body.mobile-stock-report-page .p-dialog:has(.p-datatable) .p-datatable-wrapper,
  body.mobile-stock-report-page .p-dialog:has(.p-datatable) .p-datatable-table-container{
    width:100% !important;
    max-width:100% !important;
    overflow-x:hidden !important;
  }
  body.mobile-stock-report-page .p-dialog:has(.p-datatable) .p-datatable-table,
  body.mobile-stock-report-page .p-dialog:has(.p-datatable) table{
    display:table !important;
    width:100% !important;
    min-width:0 !important;
    max-width:100% !important;
    table-layout:fixed !important;
  }
  body.mobile-stock-report-page .p-dialog:has(.p-datatable) .p-datatable-thead{
    display:table-header-group !important;
  }
  body.mobile-stock-report-page .p-dialog:has(.p-datatable) .p-datatable-tbody{
    display:table-row-group !important;
  }
  body.mobile-stock-report-page .p-dialog:has(.p-datatable) .p-datatable-thead > tr,
  body.mobile-stock-report-page .p-dialog:has(.p-datatable) .p-datatable-tbody > tr{
    display:table-row !important;
  }
  body.mobile-stock-report-page .p-dialog:has(.p-datatable) .p-datatable-thead > tr > th,
  body.mobile-stock-report-page .p-dialog:has(.p-datatable) .p-datatable-tbody > tr > td{
    display:table-cell !important;
    min-width:0 !important;
    max-width:none !important;
    height:auto !important;
    padding:8px 6px !important;
    vertical-align:middle !important;
    white-space:normal !important;
    overflow-wrap:anywhere !important;
    word-break:normal !important;
  }
  body.mobile-stock-report-page .p-dialog:has(.p-datatable) .p-datatable-thead > tr > th{
    color:#526171 !important;
    font-size:.62rem !important;
    font-weight:800 !important;
    line-height:1.15 !important;
    text-align:left !important;
  }
  body.mobile-stock-report-page .p-dialog:has(.p-datatable) .p-datatable-tbody > tr > td{
    color:#344150 !important;
    font-size:.68rem !important;
    line-height:1.28 !important;
  }
  body.mobile-stock-report-page .p-dialog:has(.p-datatable) .p-datatable-thead > tr > th:nth-child(1),
  body.mobile-stock-report-page .p-dialog:has(.p-datatable) .p-datatable-tbody > tr > td:nth-child(1){
    width:28% !important;
  }
  body.mobile-stock-report-page .p-dialog:has(.p-datatable) .p-datatable-thead > tr > th:nth-child(2),
  body.mobile-stock-report-page .p-dialog:has(.p-datatable) .p-datatable-tbody > tr > td:nth-child(2){
    width:38% !important;
  }
  body.mobile-stock-report-page .p-dialog:has(.p-datatable) .p-datatable-thead > tr > th:nth-child(3),
  body.mobile-stock-report-page .p-dialog:has(.p-datatable) .p-datatable-tbody > tr > td:nth-child(3){
    width:15% !important;
    text-align:center !important;
  }
  body.mobile-stock-report-page .p-dialog:has(.p-datatable) .p-datatable-thead > tr > th:nth-child(4),
  body.mobile-stock-report-page .p-dialog:has(.p-datatable) .p-datatable-tbody > tr > td:nth-child(4){
    width:19% !important;
    text-align:center !important;
  }
  body.mobile-stock-report-page .p-dialog:has(.p-datatable) .p-datatable-tbody > tr > td:nth-child(3) span,
  body.mobile-stock-report-page .p-dialog:has(.p-datatable) .p-datatable-tbody > tr > td:nth-child(4) span{
    display:inline-flex !important;
    align-items:center !important;
    justify-content:center !important;
    min-width:30px !important;
    padding:4px 5px !important;
    font-size:.72rem !important;
    line-height:1 !important;
  }
  body.mobile-stock-report-page .p-dialog:has(.p-datatable) .p-dialog-footer{
    padding:8px 12px 12px !important;
  }
  body.mobile-stock-report-page .p-dialog:has(.p-datatable) .p-dialog-footer .p-button{
    width:100% !important;
    min-height:42px !important;
    justify-content:center !important;
  }
}

/* ==============================================================
   LAPORAN STOK — GROUP HEADER & CASHIER SCOPE FINAL (r57)
   Header nama barang wajib tampil pada setiap group. Distribusi
   tidak menjadi section terpisah; distribusi tetap tercatat pada
   Riwayat stok Gudang Utama milik Owner.
   ============================================================== */
@media (max-width:768px){
  body.mobile-stock-report-page .stock-report-table-source tr.p-datatable-row-group-header,
  body.mobile-stock-report-page .stock-report-table-source tr.p-rowgroup-header{
    display:block !important;
    visibility:visible !important;
    opacity:1 !important;
  }
  body.mobile-stock-report-page .stock-report-table-source tr.p-datatable-row-group-header > td,
  body.mobile-stock-report-page .stock-report-table-source tr.p-rowgroup-header > td{
    display:block !important;
    visibility:visible !important;
    opacity:1 !important;
    min-height:58px !important;
  }
  body.mobile-stock-report-page .stock-native-group-head,
  body.mobile-stock-report-page .stock-native-group-title,
  body.mobile-stock-report-page .stock-native-group-title strong,
  body.mobile-stock-report-page .stock-native-group-title small{
    visibility:visible !important;
    opacity:1 !important;
  }
  body.mobile-stock-report-page .stock-native-group-title strong{
    display:block !important;
    font-size:1.02rem !important;
    font-weight:900 !important;
    color:#1f2937 !important;
  }
  body.mobile-stock-report-page .stock-distribution-section{
    display:none !important;
  }
}

/* ==============================================================
   LAPORAN STOK MOBILE — ITEM HEADER + HISTORY FINAL (r58)
   Nama/nomor barang dirender dari row pertama setiap group sehingga
   tidak bergantung pada slot row-group PrimeVue. Riwayat menampilkan
   stok akhir di bawah tabel untuk kebutuhan screenshot.
   ============================================================== */
@media (max-width:768px){
  body.mobile-stock-report-page .stock-report-table-source tbody tr.p-datatable-row-group-header,
  body.mobile-stock-report-page .stock-report-table-source tbody tr.p-rowgroup-header{
    display:none !important;
  }

  body.mobile-stock-report-page .stock-report-table-source tbody tr:not(.p-datatable-row-group-header):not(.p-datatable-empty-message):has(.stock-mobile-group-name:not(:empty)){
    margin-top:12px !important;
    padding-top:12px !important;
    border-top:1px solid #dfe6ec !important;
    border-radius:16px 16px 0 0 !important;
    box-shadow:0 2px 9px rgba(15,23,42,.035) !important;
  }

  body.mobile-stock-report-page .stock-report-table-source .stock-mobile-group-head{
    display:flex !important;
    align-items:center !important;
    gap:10px !important;
    width:100% !important;
    margin:0 0 10px !important;
    padding:0 0 10px !important;
    border-bottom:1px solid #edf1f4 !important;
  }
  body.mobile-stock-report-page .stock-report-table-source .stock-mobile-group-head:has(.stock-mobile-group-name:empty){
    display:none !important;
  }
  body.mobile-stock-report-page .stock-report-table-source .stock-mobile-group-number{
    display:inline-flex !important;
    align-items:center !important;
    justify-content:center !important;
    flex:0 0 34px !important;
    width:34px !important;
    height:34px !important;
    border-radius:50% !important;
    background:#eef8fa !important;
    color:#267786 !important;
    font-size:.78rem !important;
    font-weight:900 !important;
    line-height:1 !important;
  }
  body.mobile-stock-report-page .stock-report-table-source .stock-mobile-group-name{
    display:block !important;
    min-width:0 !important;
    color:#202a36 !important;
    font-size:1rem !important;
    font-weight:900 !important;
    line-height:1.2 !important;
    overflow-wrap:anywhere !important;
  }
  body.mobile-stock-report-page .stock-report-table-source .stock-name-wrap{
    display:flex !important;
    flex-direction:column !important;
    width:100% !important;
    min-width:0 !important;
  }
  body.mobile-stock-report-page .stock-report-table-source .stock-location-inline{
    display:block !important;
    width:100% !important;
  }

  body.mobile-stock-report-page .stock-history-final{
    display:flex !important;
    align-items:center !important;
    justify-content:space-between !important;
    gap:12px !important;
    margin-top:10px !important;
    padding:11px 12px !important;
    border:1px solid #dfe6ec !important;
    border-radius:10px !important;
    background:#f8fafc !important;
  }
  body.mobile-stock-report-page .stock-history-final span{
    color:#526171 !important;
    font-size:.75rem !important;
    font-weight:800 !important;
  }
  body.mobile-stock-report-page .stock-history-final strong{
    color:#18222d !important;
    font-size:1rem !important;
    font-weight:900 !important;
  }
}





/* ==============================================================
   CASHIER INVENTORY RENDER — ROBUST MOBILE FIX (r60)
   Do not depend on async body owner class. The actual DataTable
   column count determines cashier layout so outlet data is always
   visible immediately after login / account switch.
   ============================================================== */


/* PENGELUARAN LAIN — gunakan bentuk tabel detail Laporan Harian, bukan responsive stack */
@media (max-width:768px){
  body.mobile-expense-page .expense-detail-table-source .p-datatable-wrapper{
    width:100% !important;
    max-width:100% !important;
    overflow:visible !important;
  }
  body.mobile-expense-page .expense-detail-table-source table,
  body.mobile-expense-page .expense-detail-table-source .p-datatable-table{
    display:table !important;
    width:100% !important;
    min-width:0 !important;
    max-width:100% !important;
    table-layout:fixed !important;
  }
  body.mobile-expense-page .expense-detail-table-source colgroup{display:table-column-group !important;}
  body.mobile-expense-page .expense-detail-table-source thead,
  body.mobile-expense-page .expense-detail-table-source .p-datatable-thead{display:table-header-group !important;}
  body.mobile-expense-page .expense-detail-table-source tbody,
  body.mobile-expense-page .expense-detail-table-source .p-datatable-tbody{display:table-row-group !important;}
  body.mobile-expense-page .expense-detail-table-source thead>tr,
  body.mobile-expense-page .expense-detail-table-source tbody>tr,
  body.mobile-expense-page .expense-detail-table-source .p-datatable-thead>tr,
  body.mobile-expense-page .expense-detail-table-source .p-datatable-tbody>tr{
    display:table-row !important;
    margin:0 !important;
    padding:0 !important;
    border-radius:0 !important;
    box-shadow:none !important;
  }
  body.mobile-expense-page .expense-detail-table-source th,
  body.mobile-expense-page .expense-detail-table-source td{
    display:table-cell !important;
    min-width:0 !important;
    max-width:none !important;
    padding:8px 4px !important;
    vertical-align:middle !important;
    text-align:center !important;
    white-space:normal !important;
    overflow-wrap:anywhere !important;
    word-break:normal !important;
  }
  body.mobile-expense-page .expense-detail-table-source th{
    font-size:.60rem !important;
    line-height:1.15 !important;
    font-weight:800 !important;
  }
  body.mobile-expense-page .expense-detail-table-source td{
    font-size:.66rem !important;
    line-height:1.25 !important;
  }
  body.mobile-expense-page .expense-detail-table-source td>[data-pc-section="columnTitle"],
  body.mobile-expense-page .expense-detail-table-source td>.p-column-title{
    display:none !important;
  }
  body.mobile-expense-page .expense-detail-table-source .expense-company-badge{
    display:block !important;
    width:max-content !important;
    max-width:100% !important;
    margin:3px auto 0 !important;
    padding:1px 4px !important;
    font-size:7px !important;
    line-height:1.15 !important;
  }
  body.mobile-expense-page .expense-detail-table-source .transaction-history-action-source{
    display:inline-flex !important;
    width:28px !important;
    min-width:28px !important;
    max-width:28px !important;
    height:28px !important;
    min-height:28px !important;
    max-height:28px !important;
    padding:0 !important;
    border-radius:7px !important;
    justify-content:center !important;
  }
  body.mobile-expense-page .expense-detail-table-source .transaction-history-action-source .p-button-icon{
    font-size:.72rem !important;
  }
  body.mobile-expense-page .daily-detail-total-expense{
    display:flex !important;
    align-items:center !important;
    justify-content:space-between !important;
    width:100% !important;
    margin-top:14px !important;
  }
}

/* Pengeluaran Lain — final row cleanup on existing canonical table */
@media (max-width:768px){
  body.mobile-expense-page .expense-filter-source{
    margin-bottom:16px !important;
  }
  body.mobile-expense-page .expense-detail-table-source{
    margin-top:0 !important;
  }
  body.mobile-expense-page .expense-detail-table-source td::before,
  body.mobile-expense-page .expense-detail-table-source td::after,
  body.mobile-expense-page .expense-detail-table-source .p-column-title,
  body.mobile-expense-page .expense-detail-table-source [data-pc-section="columnTitle"]{
    display:none !important;
    content:none !important;
  }
  body.mobile-expense-page .expense-detail-table-source td{
    grid-template-columns:none !important;
  }
  body.mobile-expense-page .expense-detail-table-source .expense-company-badge{
    display:block !important;
    margin:3px auto 0 !important;
    padding:1px 4px !important;
    font-size:7px !important;
    line-height:1.1 !important;
    white-space:nowrap !important;
  }
  body.mobile-expense-page .expense-detail-table-source td:last-child{
    text-align:center !important;
  }
  body.mobile-expense-page .expense-detail-table-source td:last-child>div{
    display:flex !important;
    align-items:center !important;
    justify-content:center !important;
    gap:4px !important;
    width:100% !important;
  }
}

/* Laporan Transaksi: badge Diskon berdampingan di kiri Status Cucian */
body.mobile-transaction-list-page .transaction-process-badges{
  display:flex !important;
  align-items:center !important;
  justify-content:flex-end !important;
  gap:4px !important;
  flex-wrap:nowrap !important;
}
body.mobile-transaction-list-page .transaction-discount-status-badge{
  display:inline-flex !important;
  align-items:center !important;
  min-height:22px !important;
  padding:3px 7px !important;
  border-radius:7px !important;
  font-size:.68rem !important;
  line-height:1 !important;
  white-space:nowrap !important;
}

@media (max-width:768px){
  body.mobile-items-page .master-stock-period-source{
    display:flex !important;
    align-items:flex-end !important;
    justify-content:space-between !important;
    gap:10px !important;
    margin:14px 0 16px !important;
    padding:11px 12px !important;
    border:1px solid #e5eaef !important;
    border-radius:12px !important;
    background:#fafcfd !important;
  }
  body.mobile-items-page .master-stock-period-source .field{
    flex:1 1 auto !important;
    min-width:0 !important;
  }
  body.mobile-items-page .master-stock-period-source small{
    flex:0 0 auto !important;
    margin-bottom:7px !important;
    font-size:.68rem !important;
    white-space:nowrap !important;
  }
}

/* MASTER BARANG — inventory global Owner + stok outlet Kasir */
.master-item-add-source{
  width:100% !important;
  min-height:42px !important;
  justify-content:center !important;
  margin-bottom:12px !important;
}
.master-inventory-toolbar-source{
  display:grid !important;
  grid-template-columns:minmax(0,1fr) auto !important;
  align-items:center !important;
  gap:10px !important;
  width:100% !important;
  margin-bottom:14px !important;
}
.master-inventory-toolbar-source .p-iconfield,
.master-inventory-toolbar-source .p-inputtext{
  width:100% !important;
}
.master-history-button-source{
  min-height:40px !important;
  white-space:nowrap !important;
}
.inventory-history-filter-source{
  display:grid !important;
  grid-template-columns:repeat(3,minmax(0,1fr)) !important;
  gap:10px !important;
  margin-bottom:14px !important;
}
.cashier-history-filter-source{
  grid-template-columns:repeat(2,minmax(0,1fr)) !important;
}
.inventory-history-table-source .p-datatable-wrapper{
  width:100% !important;
  max-width:100% !important;
  overflow:visible !important;
}
.inventory-history-table-source table,
.inventory-history-table-source .p-datatable-table{
  display:table !important;
  width:100% !important;
  min-width:0 !important;
  max-width:100% !important;
  table-layout:fixed !important;
}
.inventory-history-table-source thead,
.inventory-history-table-source .p-datatable-thead{display:table-header-group !important;}
.inventory-history-table-source tbody,
.inventory-history-table-source .p-datatable-tbody{display:table-row-group !important;}
.inventory-history-table-source tr{display:table-row !important;}
.inventory-history-table-source th,
.inventory-history-table-source td{
  display:table-cell !important;
  min-width:0 !important;
  max-width:none !important;
  vertical-align:middle !important;
  text-align:center !important;
  white-space:normal !important;
  overflow-wrap:anywhere !important;
  word-break:normal !important;
}
.inventory-history-table-source td::before,
.inventory-history-table-source td::after,
.inventory-history-table-source .p-column-title,
.inventory-history-table-source [data-pc-section="columnTitle"]{
  display:none !important;
  content:none !important;
}
.inventory-history-item-source{font-weight:800 !important;}
.inventory-history-date-source{font-variant-numeric:tabular-nums !important;}
.inventory-history-dialog-source .p-dialog-content{overflow:visible !important;}

@media (max-width:768px){
  body.mobile-items-page .master-item-add-source{
    min-height:42px !important;
    margin-bottom:10px !important;
  }
  body.mobile-items-page .master-inventory-toolbar-source{
    grid-template-columns:minmax(0,1fr) minmax(0,.72fr) !important;
    gap:8px !important;
    margin-bottom:14px !important;
  }
  body.mobile-items-page .master-history-button-source{
    width:100% !important;
    min-width:0 !important;
    padding-left:7px !important;
    padding-right:7px !important;
    font-size:.74rem !important;
  }
  .inventory-history-dialog-source{
    width:calc(100vw - 16px) !important;
    max-width:calc(100vw - 16px) !important;
    margin:8px !important;
  }
  .inventory-history-dialog-source .p-dialog-header{
    padding:12px !important;
  }
  .inventory-history-dialog-source .p-dialog-content{
    padding:12px !important;
  }
  .inventory-history-filter-source{
    grid-template-columns:repeat(2,minmax(0,1fr)) !important;
    gap:8px !important;
  }
  .inventory-history-filter-source > .field:nth-child(3){
    grid-column:1 / -1 !important;
  }
  .cashier-history-filter-source > .field:nth-child(3){
    grid-column:auto !important;
  }
  .inventory-history-filter-source label{
    font-size:.70rem !important;
    margin-bottom:5px !important;
  }
  .inventory-history-filter-source .p-inputtext{
    min-width:0 !important;
    width:100% !important;
    font-size:.72rem !important;
  }
  .inventory-history-table-source th{
    padding:7px 3px !important;
    font-size:.57rem !important;
    line-height:1.12 !important;
    font-weight:850 !important;
  }
  .inventory-history-table-source td{
    padding:8px 3px !important;
    font-size:.64rem !important;
    line-height:1.2 !important;
  }
  .inventory-history-table-source .p-paginator{
    padding:8px 0 0 !important;
    gap:2px !important;
  }
  .inventory-history-table-source .p-paginator .p-paginator-page,
  .inventory-history-table-source .p-paginator .p-paginator-next,
  .inventory-history-table-source .p-paginator .p-paginator-prev{
    min-width:28px !important;
    width:28px !important;
    height:28px !important;
    font-size:.68rem !important;
  }
}

/* Riwayat inventory: proporsi final tabel modal */
.inventory-history-table-source th:first-child,
.inventory-history-table-source td:first-child,
.inventory-history-table-source .inventory-history-no-source{
  white-space:nowrap !important;
  word-break:keep-all !important;
  overflow-wrap:normal !important;
}
.inventory-history-table-source .inventory-history-branch-source{
  display:inline-block !important;
  white-space:nowrap !important;
  word-break:keep-all !important;
  overflow-wrap:normal !important;
}
@media (max-width:768px){
  .inventory-history-table-source th:first-child,
  .inventory-history-table-source td:first-child{
    padding-left:2px !important;
    padding-right:2px !important;
    font-size:.60rem !important;
  }
  .inventory-history-table-source .inventory-history-branch-source{
    font-size:.61rem !important;
  }
}




/* Semua header kolom modal inventory selalu rata tengah */
.inventory-history-table-source .p-datatable-thead > tr > th,
.inventory-history-table-source th{
  text-align:center !important;
  vertical-align:middle !important;
}
.inventory-history-table-source .p-column-header-content,
.inventory-history-table-source th .p-column-header-content{
  display:flex !important;
  align-items:center !important;
  justify-content:center !important;
  width:100% !important;
  text-align:center !important;
}



/* MODAL RIWAYAT INVENTORY — semua judul kolom benar-benar di tengah */
.inventory-history-table-source thead th,
.inventory-history-table-source .p-datatable-thead > tr > th,
.inventory-history-table-source [data-pc-section="headercell"]{
  text-align:center !important;
  vertical-align:middle !important;
}
.inventory-history-table-source thead th > div,
.inventory-history-table-source .p-column-header-content,
.inventory-history-table-source [data-pc-section="columnheadercontent"]{
  display:flex !important;
  align-items:center !important;
  justify-content:center !important;
  width:100% !important;
  text-align:center !important;
}
.inventory-history-table-source .p-datatable-column-title,
.inventory-history-table-source .p-column-title,
.inventory-history-table-source [data-pc-section="headertitle"]{
  display:block !important;
  width:100% !important;
  margin:0 auto !important;
  text-align:center !important;
}



/* MODAL INVENTORY — header benar-benar center dari sumber headerClass */
.inventory-history-table-source th.inventory-history-header-center,
.inventory-history-table-source .inventory-history-header-center{
  text-align:center !important;
  vertical-align:middle !important;
}
.inventory-history-table-source th.inventory-history-header-center .p-column-header-content,
.inventory-history-table-source .inventory-history-header-center .p-column-header-content,
.inventory-history-table-source th.inventory-history-header-center [data-pc-section="columnheadercontent"]{
  display:flex !important;
  align-items:center !important;
  justify-content:center !important;
  width:100% !important;
  text-align:center !important;
}
.inventory-history-table-source th.inventory-history-header-center .p-datatable-column-title,
.inventory-history-table-source th.inventory-history-header-center .p-column-title,
.inventory-history-table-source .inventory-history-header-center [data-pc-section="headertitle"]{
  display:block !important;
  width:100% !important;
  margin:0 auto !important;
  text-align:center !important;
}







/* Modal Riwayat Distribusi — Cabang dan Jumlah tetap satu baris */
.inventory-history-table-source th.inventory-history-header-branch,
.inventory-history-table-source th.inventory-history-header-qty,
.inventory-history-table-source .inventory-history-header-branch,
.inventory-history-table-source .inventory-history-header-qty{
  white-space:nowrap !important;
  word-break:keep-all !important;
  overflow-wrap:normal !important;
}
.inventory-history-table-source th.inventory-history-header-branch .p-column-title,
.inventory-history-table-source th.inventory-history-header-qty .p-column-title,
.inventory-history-table-source th.inventory-history-header-branch .p-datatable-column-title,
.inventory-history-table-source th.inventory-history-header-qty .p-datatable-column-title{
  white-space:nowrap !important;
  word-break:keep-all !important;
  overflow-wrap:normal !important;
}
@media (max-width:768px){
  .inventory-history-table-source th.inventory-history-header-branch,
  .inventory-history-table-source th.inventory-history-header-qty{
    font-size:.56rem !important;
    padding-left:2px !important;
    padding-right:2px !important;
  }
}




/* Transaksi Dihapus — mode baca dari canonical Laporan Transaksi */
.deleted-transaction-heading-source{align-items:flex-start !important;}
.deleted-transaction-subtitle-source{
  display:block !important;
  margin-top:5px !important;
  color:#6b7280 !important;
  font-size:.78rem !important;
  font-weight:500 !important;
}
.deleted-at-column-source{text-align:center !important;}
.deleted-at-column-source .p-column-header-content{
  justify-content:center !important;
  text-align:center !important;
}
.deleted-at-info-source{
  display:flex !important;
  flex-direction:column !important;
  align-items:center !important;
  justify-content:center !important;
  gap:3px !important;
  width:100% !important;
  text-align:center !important;
}
.deleted-at-label-source{
  color:#94a3b8 !important;
  font-size:.64rem !important;
  font-weight:800 !important;
  text-transform:uppercase !important;
}
@media (max-width:768px){
  body.mobile-transaction-list-page .deleted-at-info-source{
    align-items:flex-end !important;
    text-align:right !important;
  }
  body.mobile-transaction-list-page .deleted-at-label-source{
    font-size:.60rem !important;
  }
}

/* Laporan Transaksi — Status Pembayaran, Status Cucian, Diskon sejajar 3 kolom.
   Select geometry comes only from the shared canonical PrimeVue source below. */
@media (max-width:767px){
  body.mobile-transaction-list-page .transaction-status-filters-source:has(.transaction-discount-filter-source){
    grid-template-columns:repeat(3,minmax(0,1fr))!important;
    gap:7px!important;
  }
  body.mobile-transaction-list-page .transaction-status-filters-source:has(.transaction-discount-filter-source)>.report-control-cell{
    min-width:0!important;
  }
  body.mobile-transaction-list-page .transaction-status-filters-source:has(.transaction-discount-filter-source)>.report-control-cell>label{
    font-size:.61rem!important;
    line-height:1.1!important;
    white-space:nowrap!important;
    overflow:hidden!important;
    text-overflow:ellipsis!important;
  }
}

/* ============================================================
   MASTER BARANG MOBILE — CANONICAL FINAL
   Satu sumber layout untuk Super User (Gudang Utama) dan Kasir.
   Struktur mengikuti kolom canonical Vue: Owner 8 kolom, Kasir 6 kolom.
   ============================================================ */
@media (max-width:768px){
  body.mobile-items-page .layout-main>div,
  body.mobile-items-page .layout-main .card{
    min-width:0!important;
    max-width:100%!important;
  }
  body.mobile-items-page .layout-main .card{overflow:visible!important;}

  body.mobile-items-page .items-page-heading-source{
    min-height:64px!important;
    margin:0 0 12px!important;
    padding:0 15px!important;
    border-radius:14px!important;
  }
  body.mobile-items-page .master-item-add-source{
    display:flex!important;
    width:100%!important;
    min-height:46px!important;
    margin:2px 0 10px!important;
    border-radius:12px!important;
    align-items:center!important;
    justify-content:center!important;
    font-weight:800!important;
  }
  body.mobile-items-page .master-inventory-toolbar-source{
    display:grid!important;
    grid-template-columns:minmax(0,1.25fr) minmax(0,.95fr)!important;
    gap:8px!important;
    align-items:stretch!important;
    width:100%!important;
    margin:0 0 12px!important;
  }
  body.mobile-items-page .master-inventory-toolbar-source>*{
    width:100%!important;
    min-width:0!important;
  }
  body.mobile-items-page .master-inventory-toolbar-source .p-iconfield,
  body.mobile-items-page .master-inventory-toolbar-source .p-inputtext,
  body.mobile-items-page .master-history-button-source{
    width:100%!important;
    min-width:0!important;
    height:48px!important;
    min-height:48px!important;
    border-radius:12px!important;
  }
  body.mobile-items-page .master-inventory-toolbar-source .p-inputtext{
    padding-left:2.7rem!important;
    font-size:.88rem!important;
  }
  body.mobile-items-page .master-history-button-source{
    padding:0 8px!important;
    justify-content:center!important;
    gap:6px!important;
    white-space:nowrap!important;
  }
  body.mobile-items-page .master-history-button-source .p-button-label{
    font-size:.72rem!important;
    font-weight:750!important;
  }

  body.mobile-items-page .items-list-table-source .p-datatable-wrapper{
    width:100%!important;
    max-width:100%!important;
    overflow:visible!important;
  }
  body.mobile-items-page .items-list-table-source table,
  body.mobile-items-page .items-list-table-source tbody{
    display:block!important;
    width:100%!important;
    min-width:0!important;
    max-width:100%!important;
    table-layout:auto!important;
  }
  body.mobile-items-page .items-list-table-source colgroup,
  body.mobile-items-page .items-list-table-source thead{display:none!important;}

  body.mobile-items-page .items-list-table-source tbody tr:not(.p-datatable-empty-message){
    position:relative!important;
    display:grid!important;
    grid-template-columns:minmax(0,1fr) minmax(0,1fr)!important;
    column-gap:10px!important;
    row-gap:10px!important;
    width:100%!important;
    min-width:0!important;
    max-width:100%!important;
    margin:0 0 14px!important;
    padding:18px 20px 16px!important;
    box-sizing:border-box!important;
    border:1px solid #e1e7ec!important;
    border-radius:17px!important;
    background:#fff!important;
    box-shadow:0 2px 10px rgba(15,23,42,.035)!important;
    overflow:hidden!important;
  }
  body.mobile-items-page .owner-items-table-source tbody tr:not(.p-datatable-empty-message){
    grid-template-areas:
      "name name"
      "category unit"
      "stock stock"
      "liw wiy"
      "actions actions"!important;
  }
  body.mobile-items-page .cashier-items-table-source tbody tr:not(.p-datatable-empty-message){
    grid-template-areas:
      "name name"
      "category unit"
      "stock stock"
      "actions actions"!important;
  }

  body.mobile-items-page .items-list-table-source tbody tr:not(.p-datatable-empty-message)>td{
    position:static!important;
    display:block!important;
    width:auto!important;
    min-width:0!important;
    max-width:none!important;
    min-height:0!important;
    height:auto!important;
    margin:0!important;
    padding:0!important;
    border:0!important;
    background:transparent!important;
    box-shadow:none!important;
    text-align:left!important;
    overflow:visible!important;
  }
  /* Jangan sembunyikan ::before pada sel item: label Kategori/Satuan/Stok/Cabang
     memang dirender melalui pseudo-element pada layout mobile canonical. */
  body.mobile-items-page .items-list-table-source tbody tr:not(.p-datatable-empty-message)>td::after,
  body.mobile-items-page .items-list-table-source .p-column-title,
  body.mobile-items-page .items-list-table-source [data-pc-section="columnTitle"]{
    display:none!important;
    content:none!important;
  }

  body.mobile-items-page .items-list-table-source tbody tr:not(.p-datatable-empty-message)>td.item-col-no{
    position:absolute!important;
    top:20px!important;
    left:20px!important;
    z-index:2!important;
    display:flex!important;
    align-items:center!important;
    justify-content:center!important;
    width:40px!important;
    min-width:40px!important;
    max-width:40px!important;
    height:40px!important;
    min-height:40px!important;
    max-height:40px!important;
    padding:0!important;
    border-radius:50%!important;
    background:#eef8fa!important;
    color:#267786!important;
    font-size:.82rem!important;
    line-height:1!important;
    font-weight:900!important;
  }
  body.mobile-items-page .items-list-table-source tbody tr:not(.p-datatable-empty-message)>td.item-col-name{
    grid-area:name!important;
    display:flex!important;
    align-items:center!important;
    min-height:40px!important;
    padding:0 0 0 62px!important;
    color:#202a36!important;
    font-size:1.02rem!important;
    line-height:1.22!important;
    font-weight:900!important;
  }
  body.mobile-items-page .item-name-cell{
    display:block!important;
    width:100%!important;
    line-height:1.22!important;
  }

  body.mobile-items-page .items-list-table-source tbody tr:not(.p-datatable-empty-message)>td.item-col-category,
  body.mobile-items-page .items-list-table-source tbody tr:not(.p-datatable-empty-message)>td.item-col-unit{
    display:flex!important;
    flex-direction:column!important;
    align-items:flex-start!important;
    justify-content:center!important;
    min-height:58px!important;
    padding:9px 12px!important;
    border:0!important;
    border-radius:10px!important;
    background:#f8fafc!important;
    color:#596777!important;
    font-size:.76rem!important;
    line-height:1.22!important;
    text-align:left!important;
  }
  body.mobile-items-page .items-list-table-source td.item-col-category{grid-area:category!important;}
  body.mobile-items-page .items-list-table-source td.item-col-unit{grid-area:unit!important;}
  body.mobile-items-page .items-list-table-source tbody tr:not(.p-datatable-empty-message)>td.item-col-category::before,
  body.mobile-items-page .items-list-table-source tbody tr:not(.p-datatable-empty-message)>td.item-col-unit::before{
    display:block!important;
    width:100%!important;
    margin:0 0 6px!important;
    color:#98a2ae!important;
    font-size:.62rem!important;
    line-height:1!important;
    font-weight:850!important;
    text-transform:uppercase!important;
    letter-spacing:.03em!important;
    text-align:left!important;
  }
  body.mobile-items-page .items-list-table-source tbody tr:not(.p-datatable-empty-message)>td.item-col-category::before{content:"Kategori"!important;}
  body.mobile-items-page .items-list-table-source tbody tr:not(.p-datatable-empty-message)>td.item-col-unit::before{content:"Satuan"!important;}
  body.mobile-items-page .items-list-table-source td.item-col-unit span{
    display:block!important;
    width:100%!important;
    text-align:left!important;
  }

  body.mobile-items-page .items-list-table-source tbody tr:not(.p-datatable-empty-message)>td.item-col-stock-main,
  body.mobile-items-page .items-list-table-source tbody tr:not(.p-datatable-empty-message)>td.item-col-branch-liw,
  body.mobile-items-page .items-list-table-source tbody tr:not(.p-datatable-empty-message)>td.item-col-branch-wiy{
    display:flex!important;
    align-items:center!important;
    justify-content:space-between!important;
    gap:10px!important;
    min-height:56px!important;
    padding:10px 14px!important;
    box-sizing:border-box!important;
    border:1px solid #e5eaef!important;
    border-radius:13px!important;
    background:#fafcfd!important;
  }
  body.mobile-items-page .items-list-table-source td.item-col-stock-main{grid-area:stock!important;}
  body.mobile-items-page .items-list-table-source td.item-col-branch-liw{grid-area:liw!important;}
  body.mobile-items-page .items-list-table-source td.item-col-branch-wiy{grid-area:wiy!important;}
  body.mobile-items-page .items-list-table-source tbody tr:not(.p-datatable-empty-message)>td.item-col-stock-main::before,
  body.mobile-items-page .items-list-table-source tbody tr:not(.p-datatable-empty-message)>td.item-col-branch-liw::before,
  body.mobile-items-page .items-list-table-source tbody tr:not(.p-datatable-empty-message)>td.item-col-branch-wiy::before{
    display:block!important;
    margin:0!important;
    color:#5b6878!important;
    font-size:.72rem!important;
    line-height:1.12!important;
    font-weight:850!important;
  }
  body.mobile-items-page .owner-items-table-source tbody tr:not(.p-datatable-empty-message)>td.item-col-stock-main::before{content:"Gudang Utama"!important;text-transform:uppercase!important;}
  body.mobile-items-page .cashier-items-table-source tbody tr:not(.p-datatable-empty-message)>td.item-col-stock-main::before{content:"Stok Outlet"!important;text-transform:uppercase!important;}
  body.mobile-items-page .owner-items-table-source tbody tr:not(.p-datatable-empty-message)>td.item-col-branch-liw::before{content:"LIW · Lidah Wetan"!important;text-transform:uppercase!important;}
  body.mobile-items-page .owner-items-table-source tbody tr:not(.p-datatable-empty-message)>td.item-col-branch-wiy::before{content:"WIY · Wiyung"!important;text-transform:uppercase!important;}
  body.mobile-items-page .items-list-table-source td.item-col-stock-main .p-tag,
  body.mobile-items-page .items-list-table-source td.item-col-branch-liw .p-tag,
  body.mobile-items-page .items-list-table-source td.item-col-branch-wiy .p-tag{
    display:inline-flex!important;
    align-items:center!important;
    justify-content:center!important;
    flex:0 0 auto!important;
    min-width:46px!important;
    height:30px!important;
    padding:0 9px!important;
    border-radius:9px!important;
    font-size:.82rem!important;
    font-weight:900!important;
  }

  body.mobile-items-page .items-list-table-source tbody tr:not(.p-datatable-empty-message)>td.item-col-actions{
    grid-area:actions!important;
    display:block!important;
    width:100%!important;
    margin-top:1px!important;
    padding-top:12px!important;
    border-top:1px solid #edf1f4!important;
  }
  body.mobile-items-page .items-list-table-source td.item-col-actions .warehouse-actions-source{
    display:grid!important;
    width:100%!important;
    gap:10px!important;
  }
  body.mobile-items-page .owner-items-table-source td.item-col-actions .warehouse-actions-source{
    grid-template-columns:repeat(2,minmax(0,1fr))!important;
  }
  body.mobile-items-page .cashier-items-table-source td.item-col-actions .warehouse-actions-source{
    grid-template-columns:minmax(0,1fr)!important;
  }
  /* DOM order: Edit, Barang Masuk, Distribusikan, Koreksi Stok. Reference order is Masuk, Distribusi / Edit, Koreksi. */
  body.mobile-items-page .owner-items-table-source td.item-col-actions .warehouse-action-edit{order:3!important;}
  body.mobile-items-page .owner-items-table-source td.item-col-actions .p-button:nth-child(2){order:1!important;}
  body.mobile-items-page .owner-items-table-source td.item-col-actions .p-button:nth-child(3){order:2!important;}
  body.mobile-items-page .owner-items-table-source td.item-col-actions .p-button:nth-child(4){order:4!important;}
  body.mobile-items-page .items-list-table-source td.item-col-actions .p-button{
    display:inline-flex!important;
    width:100%!important;
    min-width:0!important;
    max-width:none!important;
    height:48px!important;
    min-height:48px!important;
    margin:0!important;
    padding:0 10px!important;
    border-radius:12px!important;
    align-items:center!important;
    justify-content:center!important;
    gap:8px!important;
  }
  body.mobile-items-page .items-list-table-source tbody tr:not(.p-datatable-empty-message)>td.item-col-actions .p-button .p-button-label{
    display:inline-block!important;
    visibility:visible!important;
    opacity:1!important;
    width:auto!important;
    min-width:0!important;
    height:auto!important;
    overflow:visible!important;
    color:inherit!important;
    text-indent:0!important;
    font-size:.74rem!important;
    line-height:1.15!important;
    font-weight:850!important;
    white-space:nowrap!important;
  }

  body.mobile-items-page .items-list-table-source tbody tr.p-datatable-empty-message{
    display:block!important;
    width:100%!important;
    margin:0!important;
    padding:0!important;
    border:0!important;
    background:transparent!important;
    box-shadow:none!important;
  }
  body.mobile-items-page .items-list-table-source tbody tr.p-datatable-empty-message>td{
    display:flex!important;
    align-items:center!important;
    justify-content:center!important;
    width:100%!important;
    min-height:100px!important;
    padding:22px 14px!important;
    border:0!important;
    color:#64748b!important;
    text-align:center!important;
    white-space:normal!important;
  }
  body.mobile-items-page .items-list-table-source .p-paginator{
    display:flex!important;
    align-items:center!important;
    justify-content:center!important;
    gap:4px!important;
    width:100%!important;
    margin:2px 0 0!important;
    padding:10px 0 0!important;
    border:0!important;
    background:transparent!important;
  }
  body.mobile-items-page .items-list-table-source .p-paginator .p-paginator-page,
  body.mobile-items-page .items-list-table-source .p-paginator .p-paginator-next,
  body.mobile-items-page .items-list-table-source .p-paginator .p-paginator-prev,
  body.mobile-items-page .items-list-table-source .p-paginator .p-paginator-first,
  body.mobile-items-page .items-list-table-source .p-paginator .p-paginator-last{
    min-width:36px!important;
    width:36px!important;
    height:36px!important;
    border-radius:10px!important;
  }
}
@media (max-width:430px){
  body.mobile-items-page .master-inventory-toolbar-source{
    grid-template-columns:minmax(0,1.15fr) minmax(0,.95fr)!important;
  }
  body.mobile-items-page .master-history-button-source .p-button-label{font-size:.68rem!important;}
}

/* ============================================================
   MASTER BARANG — FINAL LABEL SANITIZER
   Card mobile hanya menampilkan angka urut + nama item. Header tabel "No",
   "Nama Barang", dan "Aksi" tidak dirender ulang di dalam card.
   ============================================================ */
@media (max-width:768px){
  body.mobile-items-page .items-list-table-source td.item-col-no::before,
  body.mobile-items-page .items-list-table-source td.item-col-name::before,
  body.mobile-items-page .items-list-table-source td.item-col-actions::before{
    content:""!important;
    display:none!important;
    width:0!important;
    height:0!important;
    margin:0!important;
    padding:0!important;
  }
  body.mobile-items-page .items-list-table-source td.item-col-no > .p-column-title,
  body.mobile-items-page .items-list-table-source td.item-col-name > .p-column-title,
  body.mobile-items-page .items-list-table-source td.item-col-actions > .p-column-title,
  body.mobile-items-page .items-list-table-source td.item-col-no > [data-pc-section="columnTitle"],
  body.mobile-items-page .items-list-table-source td.item-col-name > [data-pc-section="columnTitle"],
  body.mobile-items-page .items-list-table-source td.item-col-actions > [data-pc-section="columnTitle"]{
    display:none!important;
  }
}

/* r96: blocking full-screen route loader removed. Cached API responses keep navigation immediate. */
/* Browser Android dapat menampilkan tap highlight di antara dua route. */
a, button { -webkit-tap-highlight-color: transparent; }


/* ============================================================
   r100 — SOFT ROUTE HANDOFF (Pelanggan + Laporan Transaksi)
   Menutup frame lama hanya selama shell route baru dimount. Bukan network loader:
   veil dilepas segera setelah toolbar/datatable route baru tersedia.
   ============================================================ */
@media (max-width:768px){
  .laundry-soft-route-veil{
    position:fixed;
    z-index:998;
    top:88px;
    right:0;
    bottom:78px;
    left:0;
    padding:18px 16px;
    background:#f4f8fb;
    opacity:0;
    pointer-events:none;
    transition:opacity .12s ease;
    overflow:hidden;
  }
  .laundry-soft-route-veil.is-visible{opacity:1}
  .laundry-soft-route-veil.is-leaving{opacity:0}
  .laundry-soft-route-card{
    width:100%;
    max-width:680px;
    margin:0 auto;
    padding:18px;
    border:1px solid #e2ebf1;
    border-radius:18px;
    background:#fff;
    box-shadow:0 5px 18px rgba(43,70,96,.045);
  }
  .laundry-soft-route-title,
  .laundry-soft-route-toolbar,
  .laundry-soft-route-row{
    position:relative;
    overflow:hidden;
    background:#eef4f7;
  }
  .laundry-soft-route-title::after,
  .laundry-soft-route-toolbar::after,
  .laundry-soft-route-row::after{
    content:\"\";
    position:absolute;
    inset:0;
    transform:translateX(-100%);
    background:linear-gradient(90deg,transparent,rgba(255,255,255,.78),transparent);
    animation:laundry-soft-shimmer 1.05s ease-in-out infinite;
  }
  .laundry-soft-route-title{width:46%;height:24px;border-radius:8px;margin-bottom:18px}
  .laundry-soft-route-toolbar{width:100%;height:52px;border-radius:14px;margin-bottom:18px}
  .laundry-soft-route-row{width:100%;height:92px;border-radius:15px;margin-top:10px}
  .laundry-soft-route-row.is-short{height:76px}
  .laundry-soft-route-veil[data-kind=\"transactions\"] .laundry-soft-route-title{width:58%}
  .laundry-soft-route-veil[data-kind=\"transactions\"] .laundry-soft-route-row{height:128px}
  @keyframes laundry-soft-shimmer{100%{transform:translateX(100%)}}

  /* PrimeVue loading terasa menyatu dengan halaman, bukan overlay kasar. */
  body.mobile-customer-page .p-datatable-loading-overlay,
  body.mobile-transaction-list-page .p-datatable-loading-overlay{
    background:rgba(244,248,251,.72)!important;
    backdrop-filter:blur(1.5px);
    -webkit-backdrop-filter:blur(1.5px);
  }
  body.mobile-customer-page .p-datatable-loading-icon,
  body.mobile-transaction-list-page .p-datatable-loading-icon{
    width:30px!important;
    height:30px!important;
  }

  /* Hindari animasi layout yang membuat mount tabel terasa 'meloncat'. */
  body.mobile-customer-page .layout-main,
  body.mobile-transaction-list-page .layout-main{
    animation:laundry-route-enter .16s ease-out both;
  }
  @keyframes laundry-route-enter{from{opacity:.72;transform:translateY(3px)}to{opacity:1;transform:none}}
}

/* ============================================================
   r101 — FINAL MOBILE ROUTE HANDOFF
   Satu perilaku navigasi untuk seluruh halaman aplikasi mobile:
   frame lama ditutup hanya sampai shell Vue route baru terpasang, bukan sampai
   request database selesai. Tidak memakai fullscreen/network blocking loader.
   ============================================================ */
@media (max-width:768px){
  .laundry-soft-route-veil{
    top:88px;
    bottom:78px;
    padding:16px;
    background:#f4f8fb;
    transition:opacity .1s ease!important;
  }
  .laundry-soft-route-card{
    padding:17px;
    border-radius:18px;
    box-shadow:0 4px 14px rgba(43,70,96,.035);
  }
  .laundry-soft-route-title::after,
  .laundry-soft-route-toolbar::after,
  .laundry-soft-route-row::after{
    animation-duration:1.15s;
  }
  .laundry-soft-route-veil[data-kind="dashboard"] .laundry-soft-route-title{width:40%}
  .laundry-soft-route-veil[data-kind="dashboard"] .laundry-soft-route-toolbar{height:86px}
  .laundry-soft-route-veil[data-kind="dashboard"] .laundry-soft-route-row{height:112px}
  .laundry-soft-route-veil[data-kind="pos"] .laundry-soft-route-title{width:48%}
  .laundry-soft-route-veil[data-kind="pos"] .laundry-soft-route-toolbar{height:64px}
  .laundry-soft-route-veil[data-kind="pos"] .laundry-soft-route-row{height:108px}
  .laundry-soft-route-veil[data-kind="items"] .laundry-soft-route-title{width:44%}
  .laundry-soft-route-veil[data-kind="items"] .laundry-soft-route-row{height:150px}
  .laundry-soft-route-veil[data-kind="report"] .laundry-soft-route-title{width:55%}
  .laundry-soft-route-veil[data-kind="report"] .laundry-soft-route-toolbar{height:58px}
  .laundry-soft-route-veil[data-kind="report"] .laundry-soft-route-row{height:118px}
  .laundry-soft-route-veil[data-kind="generic"] .laundry-soft-route-title{width:48%}

  /* Final reveal is intentionally tiny: enough to remove a hard cut without
     making navigation feel animated/slow. */
  body.laundry-mobile-route-reveal .layout-main{
    animation:laundry-final-mobile-reveal .16s ease-out both!important;
  }
  @keyframes laundry-final-mobile-reveal{
    from{opacity:.82;transform:translateY(2px)}
    to{opacity:1;transform:none}
  }

  /* Keep route content stable while PrimeVue swaps table/card states. */
  body.mobile-native-app .layout-main{
    backface-visibility:hidden;
    -webkit-backface-visibility:hidden;
  }
}

/* ============================================================
   r102 — OWNER SCOPE STABLE-FIRST MOBILE
   Scope owner selalu memakai layout final sejak frame pertama.
   Tiga pilihan (Semua Cabang + 2 outlet) berjajar satu baris.
   ============================================================ */
@media (max-width: 767px) {
  body.mobile-native-app.laundry-owner-user .laundry-owner-scope[data-owner-scope-kind="master"] .laundry-owner-scope-controls,
  body.mobile-native-app.laundry-owner-user .laundry-owner-scope[data-owner-scope-kind="dashboard"] .laundry-owner-scope-controls,
  body.mobile-native-app.laundry-owner-user .laundry-owner-scope[data-owner-scope-kind="report"] .laundry-owner-scope-controls,
  body.mobile-native-app.laundry-owner-user .laundry-owner-scope[data-owner-scope-kind="transaction"] .laundry-owner-scope-controls {
    display: grid !important;
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
    gap: 7px !important;
    width: 100% !important;
  }
  body.mobile-native-app.laundry-owner-user .laundry-owner-scope[data-owner-scope-kind="master"] .laundry-owner-scope-button,
  body.mobile-native-app.laundry-owner-user .laundry-owner-scope[data-owner-scope-kind="dashboard"] .laundry-owner-scope-button,
  body.mobile-native-app.laundry-owner-user .laundry-owner-scope[data-owner-scope-kind="report"] .laundry-owner-scope-button,
  body.mobile-native-app.laundry-owner-user .laundry-owner-scope[data-owner-scope-kind="transaction"] .laundry-owner-scope-button {
    grid-column: auto !important;
    width: 100% !important;
    min-width: 0 !important;
    min-height: 48px !important;
    padding: 7px 4px !important;
    font-size: .66rem !important;
    line-height: 1.16 !important;
    white-space: normal !important;
    text-align: center !important;
  }
  /* Dashboard memakai tombol lebih ringkas agar tinggi Owner Mode proporsional,
     tanpa mengubah scope pada halaman master/report/transaksi. */
  body.mobile-dashboard-page.mobile-native-app.laundry-owner-user .laundry-owner-scope[data-owner-scope-kind="dashboard"] .laundry-owner-scope-button {
    min-height:40px!important;
    padding:6px 4px!important;
    font-size:.66rem!important;
    line-height:1.14!important;
  }
  body.mobile-native-app.laundry-owner-user .laundry-owner-scope[data-owner-scope-kind="master"] .laundry-owner-scope-button:only-child,
  body.mobile-native-app.laundry-owner-user .laundry-owner-scope[data-owner-scope-kind="dashboard"] .laundry-owner-scope-button:only-child,
  body.mobile-native-app.laundry-owner-user .laundry-owner-scope[data-owner-scope-kind="report"] .laundry-owner-scope-button:only-child,
  body.mobile-native-app.laundry-owner-user .laundry-owner-scope[data-owner-scope-kind="transaction"] .laundry-owner-scope-button:only-child {
    grid-column: auto !important;
  }
  body.mobile-customer-page.laundry-owner-user .laundry-owner-scope[data-owner-scope-kind="master"] {
    margin-top: 12px !important;
    margin-bottom: 18px !important;
  }
}


/* ============================================================
   r103 — MOBILE FIRST-PAINT / ROUTE AUDIT FINAL
   Route-specific body classes are now primed synchronously before Vue mount.
   Keep the shell deterministic; never animate legacy/default layout into view.
   ============================================================ */
@media (max-width:768px){
  body.mobile-native-app.mobile-generic-laundry-page .layout-main{
    transition:none!important;
  }
  body.mobile-native-app .layout-main-container,
  body.mobile-native-app .layout-main{
    will-change:auto!important;
  }
  .laundry-soft-route-veil{
    contain:layout paint style;
  }
}


/* ============================================================
   r105 — SWP FINAL UI CANONICALIZATION
   Presentation only. One final visual contract for desktop/mobile.
   Functional components, routes, API, permissions and data flow untouched.
   ============================================================ */
:root{
  --swp-font:"Segoe UI",Roboto,Helvetica,Arial,sans-serif;
  --swp-text:#26384d;
  --swp-muted:#718096;
  --swp-line:#dbe7ec;
  --swp-radius:14px;
  --swp-page-gap:14px;
  --swp-control-h:44px;
}
html,body,.layout-wrapper,.layout-main,.layout-sidebar,.layout-topbar,
.p-component,.p-inputtext,.p-select,.p-button,.p-datatable,.p-dialog{
  font-family:var(--swp-font)!important;
}
body{font-size:15px!important;line-height:1.45!important;color:var(--swp-text)!important;-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility}
.layout-main h1,.layout-main h2,.layout-main h3,.layout-main h4,.layout-main h5,.layout-main h6,
.layout-topbar,.layout-sidebar{letter-spacing:0!important}
.layout-main h5,.laundry-page-heading h5{font-weight:700!important}
.layout-sidebar .layout-menuitem-text{font-weight:400!important}
.layout-sidebar .active-menuitem>.layout-menuitem-root-text,.layout-sidebar a.router-link-active .layout-menuitem-text{font-weight:650!important}

/* Desktop hierarchy: title -> scope -> filters/content. */
@media(min-width:769px){
  .layout-main{font-size:15px!important}
  .laundry-page-heading{margin-bottom:12px!important;padding:18px 20px!important;min-height:72px!important;border-radius:14px!important}
  .laundry-page-heading h5{font-size:1.28rem!important;line-height:1.25!important}
  .laundry-owner-scope{margin-bottom:16px!important;padding:12px 16px!important;border-radius:14px!important}
  .laundry-owner-scope-copy strong{font-size:.94rem!important;line-height:1.25!important}
  .laundry-owner-scope-copy small{font-size:.78rem!important;line-height:1.35!important;color:var(--swp-muted)!important}
  .laundry-owner-scope-eyebrow{font-size:.68rem!important;letter-spacing:.08em!important}
  .laundry-owner-scope-button{font-family:var(--swp-font)!important;font-size:.82rem!important;font-weight:650!important}
  .layout-main label{font-size:.84rem!important;font-weight:650!important;color:#2e4056!important}
  .p-inputtext,.p-select,.p-datepicker-input,.p-inputnumber-input{font-size:.9rem!important}
  .p-datatable{font-size:.88rem!important}
  .p-datatable thead th{font-size:.84rem!important;font-weight:650!important}
}

@media(max-width:768px){
  :root{--swp-mobile-x:16px;--swp-control-h:44px}
  body.mobile-native-app{font-size:14px!important;line-height:1.42!important;color:var(--swp-text)!important;-webkit-text-size-adjust:100%!important}
  body.mobile-native-app .layout-main-container{padding-left:0!important;padding-right:0!important}
  body.mobile-native-app .layout-main{padding:16px var(--swp-mobile-x) 92px!important;margin:0!important;width:100%!important;max-width:100%!important}

  /* Header and page content share the same horizontal visual grid. */
  body.mobile-native-app .layout-topbar{min-height:72px!important;padding-left:var(--swp-mobile-x)!important;padding-right:var(--swp-mobile-x)!important}
  body.mobile-native-app .layout-topbar .layout-topbar-logo-container{margin-left:0!important}

  body.mobile-native-app .layout-main>.card:first-child,
  body.mobile-native-app .layout-main>.surface-card:first-child{margin-top:0!important}
  body.mobile-native-app .layout-main .laundry-page-heading{
    min-height:64px!important;margin:0 0 12px!important;padding:14px 16px!important;border-radius:14px!important;
    display:flex!important;align-items:center!important
  }
  body.mobile-native-app .layout-main .laundry-page-heading h1,
  body.mobile-native-app .layout-main .laundry-page-heading h2,
  body.mobile-native-app .layout-main .laundry-page-heading h3,
  body.mobile-native-app .layout-main .laundry-page-heading h4,
  body.mobile-native-app .layout-main .laundry-page-heading h5{
    font-size:1.05rem!important;line-height:1.25!important;font-weight:700!important;letter-spacing:0!important
  }

  body.mobile-native-app.laundry-owner-user .laundry-owner-scope{
    margin:0 0 16px!important;padding:13px!important;gap:10px!important;border-radius:14px!important
  }
  body.mobile-native-app.laundry-owner-user .laundry-owner-scope-copy{gap:2px!important;text-align:center!important}
  body.mobile-native-app.laundry-owner-user .laundry-owner-scope-eyebrow{font-size:.64rem!important;line-height:1.2!important;letter-spacing:.08em!important}
  body.mobile-native-app.laundry-owner-user .laundry-owner-scope-copy strong{font-size:.88rem!important;line-height:1.25!important;font-weight:700!important}
  body.mobile-native-app.laundry-owner-user .laundry-owner-scope-copy small{font-size:.72rem!important;line-height:1.35!important;color:var(--swp-muted)!important}
  body.mobile-native-app.laundry-owner-user .laundry-owner-scope-controls{gap:7px!important;width:100%!important}
  body.mobile-native-app.laundry-owner-user .laundry-owner-scope-button{
    min-height:44px!important;padding:7px 4px!important;border-radius:10px!important;font-size:.68rem!important;line-height:1.2!important;font-weight:650!important
  }

  body.mobile-native-app .layout-main label{font-size:.72rem!important;line-height:1.25!important;font-weight:650!important;color:#34465a!important;margin-bottom:6px!important}
  body.mobile-native-app .layout-main .p-inputtext,
  body.mobile-native-app .layout-main .p-select,
  body.mobile-native-app .layout-main .p-datepicker-input,
  body.mobile-native-app .layout-main .p-inputnumber-input{font-size:.82rem!important}



  body.mobile-native-app .layout-main .card,
  body.mobile-native-app .layout-main .surface-card,
  body.mobile-native-app .layout-main .p-card{border-radius:14px!important}
  body.mobile-native-app .layout-main .p-card-body{padding:14px!important}
  body.mobile-native-app .layout-main .p-datatable-header{padding:10px!important}
  body.mobile-native-app .layout-main .p-paginator{min-height:46px!important;padding:6px!important}
  body.mobile-native-app .layout-main .p-button{min-height:40px;font-size:.78rem}
  body.mobile-native-app .layout-main .p-tag{font-size:.68rem!important;line-height:1.2!important}

  /* Dashboard mobile: heading + Owner Mode dibuat lebih padat dan memakai ritme
     vertikal yang sama dengan card statistik di bawahnya. */
  body.mobile-dashboard-page .laundry-page-heading,
  body.mobile-dashboard-page .owner-dashboard-heading-source{
    width:100%!important;
    min-height:54px!important;
    margin:0 0 10px!important;
    padding:10px 14px!important;
    border-radius:14px!important;
    margin-left:0!important;
    margin-right:0!important;
  }
  body.mobile-dashboard-page.laundry-owner-user .laundry-owner-scope[data-owner-scope-kind="dashboard"]{
    margin:0 0 12px!important;
    padding:10px 12px!important;
    gap:8px!important;
    border-radius:14px!important;
  }
  body.mobile-dashboard-page.laundry-owner-user .laundry-owner-scope[data-owner-scope-kind="dashboard"] .laundry-owner-scope-copy{
    gap:1px!important;
  }
  body.mobile-dashboard-page.laundry-owner-user .laundry-owner-scope[data-owner-scope-kind="dashboard"] .laundry-owner-scope-copy small{
    margin-top:1px!important;
    line-height:1.28!important;
  }
}

/* ============================================================
   r106 — FINAL TYPOGRAPHY / MOBILE FLOW / SHARED SELECT SOURCE
   PRESENTATION ONLY. No route, API, state, permission or report logic.
   Jam Mulai/Jam Selesai intentionally inherit the SAME PrimeVue Select
   geometry as transaction Status/Diskon filters; no miniature time-select.
   ============================================================ */
:root{
  --swp-font:"Segoe UI Variable Text","Segoe UI Variable","Segoe UI",Roboto,Helvetica,Arial,sans-serif;
  --swp-control-h:44px;
}

html,body,.layout-wrapper,.layout-main-container,.layout-main,.layout-topbar,.layout-sidebar,
.p-component,.p-inputtext,.p-select,.p-dropdown,.p-button,.p-datatable,.p-dialog{
  font-family:var(--swp-font)!important;
}
body:not(.laundry-login-page){
  font-weight:400!important;
  letter-spacing:-.005em!important;
}

/* Desktop typography: softer hierarchy, less rigid/bold than legacy build. */
@media(min-width:769px){
  body:not(.laundry-login-page){font-size:15px!important;line-height:1.48!important}
  .layout-topbar{font-weight:500!important}
  .layout-topbar .layout-topbar-logo span,
  .layout-topbar [class*="title"]{font-weight:650!important;letter-spacing:-.015em!important}
  .layout-sidebar .layout-menuitem-text{font-weight:450!important;letter-spacing:-.005em!important}
  .layout-sidebar a.router-link-active .layout-menuitem-text,
  .layout-sidebar .active-menuitem>.layout-menuitem-root-text{font-weight:650!important}
  .laundry-page-heading h1,.laundry-page-heading h2,.laundry-page-heading h3,
  .laundry-page-heading h4,.laundry-page-heading h5,.laundry-page-heading h6{
    font-weight:650!important;letter-spacing:-.018em!important
  }
  .laundry-owner-scope-copy strong{font-weight:650!important;letter-spacing:-.01em!important}
  .laundry-owner-scope-copy small{font-weight:400!important}
  .laundry-owner-scope-eyebrow{font-weight:700!important;letter-spacing:.075em!important}
  .laundry-owner-scope-button{font-weight:600!important;letter-spacing:-.005em!important}
  .layout-main label{font-weight:600!important;letter-spacing:-.005em!important}
  .p-inputtext,.p-select-label,.p-dropdown-label,.p-datepicker-input,.p-inputnumber-input{font-weight:400!important}
  .p-datatable{font-weight:400!important}
  .p-datatable thead th{font-weight:600!important;letter-spacing:-.005em!important}
  .p-button{font-weight:600!important}
}

@media(max-width:768px){
  /* Content ends naturally. Footer follows the last card instead of being pushed
     to the viewport floor by the desktop flex/min-height contract. */
  body.mobile-native-app .layout-main-container{
    min-height:0!important;
    height:auto!important;
    justify-content:flex-start!important;
    padding-bottom:0!important;
  }
  body.mobile-native-app .layout-main{
    flex:0 0 auto!important;
    min-height:0!important;
    height:auto!important;
    padding-bottom:10px!important;
  }
  body.mobile-native-app .laundry-global-footer{
    flex:0 0 auto!important;
    margin:2px 0 0!important;
    padding:8px 12px calc(var(--mobile-bottom-height,78px) + env(safe-area-inset-bottom) + 8px)!important;
    font-size:10px!important;
    line-height:1.25!important;
    font-weight:500!important;
  }

  /* SINGLE CANONICAL PRIMEVUE SELECT SOURCE.
     Transaction Status/Diskon and Daily Report Jam Mulai/Jam Selesai deliberately
     share these exact container/label/chevron rules. Do not add a separate time-select geometry. */
  body.mobile-native-app .transaction-status-filters-source .p-select,
  body.mobile-native-app .transaction-status-filters-source .p-dropdown,
  body.mobile-native-app .daily-report-time-select-source,
  body.mobile-native-app .daily-report-time-select-source.p-select{
    position:relative!important;
    display:flex!important;
    align-items:stretch!important;
    width:100%!important;
    min-width:0!important;
    height:44px!important;
    min-height:44px!important;
    max-height:44px!important;
    margin:0!important;
    padding:0!important;
    overflow:hidden!important;
    box-sizing:border-box!important;
    border-radius:10px!important;
  }
  body.mobile-native-app .transaction-status-filters-source .p-select>.p-select-label,
  body.mobile-native-app .transaction-status-filters-source .p-dropdown>.p-dropdown-label,
  body.mobile-native-app .daily-report-time-select-source>.p-select-label{
    flex:1 1 auto!important;
    display:flex!important;
    align-items:center!important;
    justify-content:flex-start!important;
    align-self:stretch!important;
    width:auto!important;
    min-width:0!important;
    height:auto!important;
    min-height:44px!important;
    max-height:44px!important;
    margin:0!important;
    padding:0 10px 0 12px!important;
    box-sizing:border-box!important;
    font-size:.78rem!important;
    font-weight:400!important;
    line-height:1.2!important;
    text-align:left!important;
    white-space:nowrap!important;
    overflow:hidden!important;
    text-overflow:ellipsis!important;
  }
  body.mobile-native-app .transaction-status-filters-source .p-select>.p-select-dropdown,
  body.mobile-native-app .transaction-status-filters-source .p-dropdown>.p-dropdown-trigger,
  body.mobile-native-app .daily-report-time-select-source>.p-select-dropdown{
    position:relative!important;
    inset:auto!important;
    flex:0 0 34px!important;
    display:flex!important;
    align-items:center!important;
    justify-content:center!important;
    align-self:stretch!important;
    width:34px!important;
    min-width:34px!important;
    max-width:34px!important;
    height:auto!important;
    min-height:44px!important;
    max-height:44px!important;
    margin:0!important;
    padding:0!important;
    transform:none!important;
  }
  body.mobile-native-app .transaction-status-filters-source .p-select>.p-select-dropdown>*,
  body.mobile-native-app .transaction-status-filters-source .p-dropdown>.p-dropdown-trigger>*,
  body.mobile-native-app .daily-report-time-select-source>.p-select-dropdown>*{
    position:static!important;
    width:12px!important;
    height:12px!important;
    margin:0!important;
    line-height:1!important;
    transform:none!important;
  }

  /* Daily report control grid keeps its existing behavior; only spacing and
     control proportions are normalized to the transaction filter system. */
  body.mobile-native-app .daily-report-controls-source{
    gap:10px!important;
    margin:0 0 16px!important;
    align-items:start!important;
  }
  body.mobile-native-app .daily-report-controls-source>.report-control-cell{
    grid-template-rows:18px 44px!important;
    row-gap:6px!important;
  }
  body.mobile-native-app .daily-report-controls-source>.report-control-cell>label,
  body.mobile-native-app .daily-report-controls-source>.report-control-cell>.report-control-label-spacer{
    height:18px!important;min-height:18px!important;max-height:18px!important;
    margin:0!important;padding:0!important;
    font-size:.70rem!important;font-weight:600!important;line-height:18px!important;
  }

  /* Mobile typography aligns topbar + content without changing component logic. */
  body.mobile-native-app{font-weight:400!important;letter-spacing:-.004em!important}
  body.mobile-native-app .laundry-page-heading h1,
  body.mobile-native-app .laundry-page-heading h2,
  body.mobile-native-app .laundry-page-heading h3,
  body.mobile-native-app .laundry-page-heading h4,
  body.mobile-native-app .laundry-page-heading h5{font-weight:650!important;letter-spacing:-.014em!important}
  body.mobile-native-app .laundry-owner-scope-copy strong{font-weight:650!important}
  body.mobile-native-app .laundry-owner-scope-button{font-weight:600!important}
}

/* ============================================================
   2026-08-21 — OWNER MODE HIERARCHY + MOBILE FOOTER
   Report input/select geometry is intentionally NOT redefined here.
   Laporan Transaksi, Laporan Harian and Laporan Owner now consume the
   shared canonical report-control source above instead of page-specific copies.
   ============================================================ */
.laundry-owner-scope-copy strong{
  font-weight:900!important;
  letter-spacing:-.014em!important;
}
.laundry-owner-scope-button,
.laundry-owner-scope-button>span{
  font-weight:800!important;
}

@media(max-width:767px){
  .laundry-owner-scope{gap:11px!important}
  .laundry-owner-scope-copy{align-items:center!important;text-align:center!important}
  .laundry-owner-scope-eyebrow{margin-inline:auto!important}
  .laundry-owner-scope-copy strong{
    font-size:.98rem!important;
    line-height:1.18!important;
    font-weight:900!important;
  }
  .laundry-owner-scope-copy small{
    margin-top:3px!important;
    text-align:center!important;
  }
  .laundry-owner-scope-controls{
    display:grid!important;
    grid-template-columns:repeat(3,minmax(0,1fr))!important;
    gap:7px!important;
    width:100%!important;
  }
  .laundry-owner-scope-button{
    min-width:0!important;
    min-height:40px!important;
    padding:7px 4px!important;
    font-size:.68rem!important;
    line-height:1.12!important;
    font-weight:800!important;
    white-space:normal!important;
    text-align:center!important;
  }
  .laundry-owner-scope-button>span{font-weight:800!important}

  /* Labels are centered over their own column only. Input/select internals are
     inherited from the canonical source shared with Laporan Transaksi. */
  body.mobile-daily-report-page .daily-report-controls-source>.report-control-cell>label,
  body.mobile-owner-report-page .daily-report-controls-source>.report-control-cell>label,
  body.mobile-owner-report-page .daily-report-controls-source>.report-control-cell>.report-control-label-spacer{
    text-align:center!important;
  }

  /* Owner export occupies the same canonical control row as both date filters. */
  body.mobile-owner-report-page .daily-report-export-button-source{
    display:flex!important;
    align-items:center!important;
    justify-content:center!important;
    width:100%!important;
    height:44px!important;
    min-height:44px!important;
    max-height:44px!important;
    margin:0!important;
  }

  /* Footer stays in normal flow so late report rendering cannot make it jump. */
  body.mobile-native-app .layout-main-container>.laundry-global-footer{
    position:static!important;
    width:100%!important;
    flex:0 0 auto!important;
    margin:6px 0 0!important;
    padding:8px 12px calc(var(--mobile-bottom-height,78px) + env(safe-area-inset-bottom) + 8px)!important;
    box-sizing:border-box!important;
    transform:none!important;
    overflow-anchor:none!important;
  }
  body.mobile-daily-report-page .layout-main-container,
  body.mobile-daily-report-page .layout-main,
  body.mobile-daily-report-page .daily-report-view,
  body.mobile-daily-report-page .laundry-global-footer,
  body.mobile-owner-report-page .layout-main-container,
  body.mobile-owner-report-page .layout-main,
  body.mobile-owner-report-page .daily-report-view,
  body.mobile-owner-report-page .laundry-global-footer{
    overflow-anchor:none!important;
  }
}

/* Dynamic branch support for Master Barang owner.
   Branch rows are sourced from companies; no fixed LIW/WIY layout is assumed. */
@media(max-width:767px){
  body.mobile-items-page .owner-items-table-source tbody tr:not(.p-datatable-empty-message){
    grid-template-areas:none!important;
  }
  body.mobile-items-page .owner-items-table-source td.item-col-name{grid-column:1/-1!important;grid-row:auto!important;order:10!important;}
  body.mobile-items-page .owner-items-table-source td.item-col-category{grid-column:1!important;grid-row:auto!important;order:20!important;}
  body.mobile-items-page .owner-items-table-source td.item-col-unit{grid-column:2!important;grid-row:auto!important;order:20!important;}
  body.mobile-items-page .owner-items-table-source td.item-col-stock-main{grid-column:1/-1!important;grid-row:auto!important;order:30!important;}
  body.mobile-items-page .owner-items-table-source td.item-col-branch-dynamic{
    grid-column:1/-1!important;
    grid-row:auto!important;
    order:40!important;
    display:flex!important;
    align-items:center!important;
    justify-content:space-between!important;
    gap:10px!important;
    min-height:56px!important;
    padding:10px 14px!important;
    box-sizing:border-box!important;
    border:1px solid #e5eaef!important;
    border-radius:13px!important;
    background:#fafcfd!important;
  }
  body.mobile-items-page .owner-items-table-source td.item-col-branch-dynamic::before{
    content:attr(data-branch-label)!important;
    display:block!important;
    margin:0!important;
    color:#5b6878!important;
    font-size:.72rem!important;
    line-height:1.12!important;
    font-weight:850!important;
    text-transform:uppercase!important;
  }
  body.mobile-items-page .owner-items-table-source td.item-col-branch-dynamic .p-tag{
    display:inline-flex!important;
    align-items:center!important;
    justify-content:center!important;
    flex:0 0 auto!important;
    min-width:46px!important;
    height:30px!important;
    padding:0 9px!important;
    border-radius:9px!important;
    font-size:.82rem!important;
    font-weight:900!important;
  }
  body.mobile-items-page .owner-items-table-source td.item-col-actions{grid-column:1/-1!important;grid-row:auto!important;order:90!important;}
}

/* Master Customer mobile — align identity and actions to Laporan Transaksi canonical card. */
@media (max-width: 768px) {
  body.mobile-customer-page .p-datatable tbody tr:not(.p-datatable-empty-message) > td:nth-child(1) {
    justify-self: start !important;
    width: 100% !important;
    margin: 0 !important;
    padding-left: 0 !important;
    text-align: left !important;
  }
  body.mobile-customer-page .p-datatable tbody tr:not(.p-datatable-empty-message) > td:nth-child(1) > * {
    margin-left: 0 !important;
    padding-left: 0 !important;
    text-align: left !important;
  }
  body.mobile-customer-page .p-datatable tbody tr:not(.p-datatable-empty-message) > td:nth-child(7) {
    justify-content: flex-end !important;
    justify-self: stretch !important;
    gap: 6px !important;
    margin-top: 6px !important;
    padding-top: 9px !important;
  }
  body.mobile-customer-page .p-datatable tbody tr:not(.p-datatable-empty-message) > td:nth-child(7) .p-button {
    box-sizing: border-box !important;
    flex: 0 0 32px !important;
    width: 32px !important;
    min-width: 32px !important;
    max-width: 32px !important;
    height: 32px !important;
    min-height: 32px !important;
    max-height: 32px !important;
    aspect-ratio: 1 / 1 !important;
    margin: 0 !important;
    padding: 0 !important;
    border-radius: 8px !important;
    align-items: center !important;
    justify-content: center !important;
  }
  body.mobile-customer-page .p-datatable tbody tr:not(.p-datatable-empty-message) > td:nth-child(7) .p-button .p-button-icon {
    margin: 0 !important;
    font-size: .78rem !important;
    line-height: 1 !important;
  }
}