/* SIM-SPPG canonical UI layer — mobile shell, interaction surfaces, and compact components. */

:root {
  --ui-bg: #f6f8fb;
  --ui-surface: #ffffff;
  --ui-border: #e4e9ef;
  --ui-border-strong: #d8e0e8;
  --ui-text: #172033;
  --ui-muted: #667085;
  --ui-primary: #176a9a;
  --ui-primary-hover: #145b83;
  --ui-primary-soft: #eaf3f8;
  --ui-success: #079455;
  --ui-danger: #d92d20;
  --ui-radius-sm: 11px;
  --ui-radius: 14px;
  --ui-radius-lg: 18px;
  --ui-shadow-subtle: 0 1px 2px rgba(15,23,42,.035);
}

/* ============================================================
   MOBILE APPLICATION SHELL
   ============================================================ */
@media (max-width: 767px) {
  body,
  .main-wrapper {
    background: var(--ui-bg) !important;
  }

  .topbar {
    min-height: calc(58px + env(safe-area-inset-top, 0px)) !important;
    height: calc(58px + env(safe-area-inset-top, 0px)) !important;
    padding: env(safe-area-inset-top, 0px) 14px 0 !important;
    background: rgba(255,255,255,.97) !important;
    border-bottom: 1px solid var(--ui-border) !important;
    box-shadow: none !important;
    backdrop-filter: blur(14px) saturate(130%) !important;
    -webkit-backdrop-filter: blur(14px) saturate(130%) !important;
  }

  .topbar-left { gap: 10px !important; }

  .topbar-title {
    color: var(--ui-text) !important;
    font-size: 18px !important;
    font-weight: 750 !important;
    letter-spacing: -.35px !important;
  }

  .mobile-menu-btn,
  .topbar .icon-btn,
  .topbar-right .btn-outline {
    width: 42px !important;
    height: 42px !important;
    min-width: 42px !important;
    min-height: 42px !important;
    padding: 0 !important;
    color: #526071 !important;
    background: #fff !important;
    border: 1px solid var(--ui-border) !important;
    border-radius: 12px !important;
    box-shadow: none !important;
  }

  .mobile-menu-btn:hover,
  .topbar .icon-btn:hover,
  .topbar-right .btn-outline:hover {
    color: var(--ui-primary) !important;
    background: #f8fafc !important;
    border-color: #d7e0e7 !important;
  }

  .mobile-menu-btn:active,
  .topbar .icon-btn:active,
  .topbar-right .btn-outline:active {
    transform: scale(.97) !important;
  }

  .topbar-right { gap: 8px !important; }
  .topbar-profile { gap: 8px !important; }
  .topbar-profile-text .name { color: #273244 !important; }
  .topbar-profile-text .role { color: #7a8796 !important; }

  .topbar-profile img {
    width: 38px !important;
    height: 38px !important;
    border: 1px solid #dbe3ea !important;
    border-radius: 12px !important;
    box-shadow: none !important;
  }

  .topbar-divider { background: #e5eaf0 !important; }
  .notif-bell-badge { border-color: #fff !important; box-shadow: none !important; }

  .content {
    padding: 16px 14px calc(92px + env(safe-area-inset-bottom, 0px)) !important;
  }

  .page-header {
    align-items: flex-start !important;
    gap: 12px !important;
    margin-bottom: 15px !important;
  }

  .page-title {
    color: var(--ui-text) !important;
    font-size: 20px !important;
    font-weight: 750 !important;
    line-height: 1.25 !important;
    letter-spacing: -.35px !important;
  }

  .page-desc {
    margin-top: 4px !important;
    color: var(--ui-muted) !important;
    font-size: 11.5px !important;
    line-height: 1.5 !important;
  }

  .page-header-actions { gap: 8px !important; }

  .stat-card,
  .info-card,
  .settings-card,
  .transaction-kpi-card,
  .table-container,
  .approval-mobile-card,
  .profile-header,
  .profile-menu-list,
  .chart-container {
    border: 1px solid var(--ui-border) !important;
    border-radius: var(--ui-radius) !important;
    box-shadow: var(--ui-shadow-subtle) !important;
  }

  .stat-card:hover,
  .table-container:hover,
  .chart-container:hover {
    transform: none !important;
    box-shadow: var(--ui-shadow-subtle) !important;
  }

  .stats-grid,
  .transaction-kpi-grid {
    gap: 10px !important;
  }

  .stat-card {
    padding: 14px !important;
    gap: 8px !important;
  }

  .stat-icon {
    width: 42px !important;
    height: 42px !important;
    min-width: 42px !important;
    font-size: 17px !important;
    border-radius: 12px !important;
    box-shadow: none !important;
  }

  .stat-card:hover .stat-icon {
    transform: none !important;
  }

  .stat-value {
    font-size: clamp(17px, 5.5vw, 21px) !important;
    font-weight: 750 !important;
  }

  .stat-label {
    color: var(--ui-muted) !important;
    font-size: 10px !important;
    font-weight: 600 !important;
    text-transform: none !important;
    letter-spacing: 0 !important;
  }

  .transaction-kpi-card { padding: 14px 15px !important; }
  .transaction-kpi-value {
    margin-top: 6px !important;
    font-size: clamp(19px, 6vw, 23px) !important;
  }

  .filter-bar {
    margin-bottom: 12px !important;
    background: #fff !important;
    border: 1px solid var(--ui-border) !important;
    border-radius: var(--ui-radius) !important;
    box-shadow: none !important;
  }

  .btn,
  .filter-bar .btn,
  .page-header-actions .btn {
    border-radius: var(--ui-radius-sm) !important;
    box-shadow: none !important;
  }

  .btn-primary {
    background: var(--ui-primary) !important;
    border-color: var(--ui-primary) !important;
  }

  .btn-primary:hover {
    background: var(--ui-primary-hover) !important;
    border-color: var(--ui-primary-hover) !important;
  }

  .form-input,
  input.form-input,
  select.form-input,
  textarea.form-input {
    border-radius: var(--ui-radius-sm) !important;
    box-shadow: none !important;
  }

  .table-header {
    background: #fff !important;
    border-bottom-color: var(--ui-border) !important;
  }

  .table-header h3 {
    color: var(--ui-text) !important;
    letter-spacing: -.15px !important;
  }

  .tabs {
    gap: 6px !important;
    padding: 3px !important;
    margin-bottom: 16px !important;
    background: #eef2f6 !important;
    border: 0 !important;
    border-radius: 12px !important;
    overflow-x: auto !important;
    scrollbar-width: none !important;
  }

  .tabs::-webkit-scrollbar { display: none !important; }

  .tab {
    flex: 0 0 auto !important;
    min-height: 38px !important;
    padding: 8px 12px !important;
    color: #647184 !important;
    background: transparent !important;
    border: 0 !important;
    border-radius: 9px !important;
    white-space: nowrap !important;
  }

  .tab.active {
    color: var(--ui-primary) !important;
    background: #fff !important;
    border: 0 !important;
    box-shadow: 0 1px 2px rgba(15,23,42,.06) !important;
  }

  .profile-header {
    padding: 20px 16px !important;
    gap: 13px !important;
  }

  .profile-avatar {
    width: 76px !important;
    height: 76px !important;
    border-width: 3px !important;
    box-shadow: none !important;
  }

  .profile-avatar:hover { transform: none !important; }

  .profile-info h3 {
    color: var(--ui-text) !important;
    font-size: 18px !important;
  }

  .profile-menu-item {
    min-height: 58px !important;
    padding: 12px 14px !important;
  }

  .profile-menu-item i {
    width: 38px !important;
    height: 38px !important;
    min-width: 38px !important;
    border-radius: 11px !important;
  }

  .toast-container {
    top: calc(10px + env(safe-area-inset-top, 0px)) !important;
    left: 10px !important;
    right: 10px !important;
  }

  .toast {
    padding: 12px 13px !important;
    border: 1px solid var(--ui-border) !important;
    border-left-width: 3px !important;
    border-radius: 14px !important;
    box-shadow: 0 10px 30px rgba(15,23,42,.11) !important;
  }

  .bottom-nav {
    background: rgba(255,255,255,.98) !important;
    border-top: 1px solid var(--ui-border) !important;
    box-shadow: 0 -1px 0 rgba(15,23,42,.02) !important;
    backdrop-filter: blur(16px) saturate(125%) !important;
    -webkit-backdrop-filter: blur(16px) saturate(125%) !important;
    padding-bottom: 0 !important;
  }

  .bottom-nav-inner {
    max-width: 520px !important;
    padding: 7px 7px calc(7px + env(safe-area-inset-bottom, 0px)) !important;
    gap: 2px !important;
  }

  .bnav-item {
    min-height: 58px !important;
    padding: 5px 2px 3px !important;
    gap: 3px !important;
    color: #7b8796 !important;
    border-radius: 13px !important;
    transition: color .16s ease, background-color .16s ease, transform .16s ease !important;
  }

  .bnav-item::after { display: none !important; }

  .bnav-item i {
    width: 40px !important;
    height: 34px !important;
    font-size: 20px !important;
    color: inherit !important;
    background: transparent !important;
    border-radius: 11px !important;
    box-shadow: none !important;
    transform: none !important;
    transition: color .16s ease, background-color .16s ease !important;
  }

  .bnav-item span {
    color: inherit !important;
    font-size: 10px !important;
    font-weight: 600 !important;
    opacity: 1 !important;
  }

  .bnav-item.active,
  .bnav-item[data-page].active,
  .bnav-item.is-more-active {
    color: var(--ui-primary) !important;
  }

  .bnav-item.active i,
  .bnav-item[data-page].active i,
  .bnav-item.is-more-active i {
    color: var(--ui-primary) !important;
    background: var(--ui-primary-soft) !important;
    box-shadow: none !important;
    transform: none !important;
  }

  .bnav-item.active span,
  .bnav-item[data-page].active span,
  .bnav-item.is-more-active span {
    color: var(--ui-primary) !important;
    font-weight: 700 !important;
  }

  .bnav-item:active { transform: scale(.98) !important; }
  .bnav-fab-wrapper { margin-bottom: -3px !important; }

  .bnav-fab {
    width: 54px !important;
    height: 54px !important;
    min-width: 54px !important;
    min-height: 54px !important;
    color: #fff !important;
    background: var(--ui-primary) !important;
    border: 4px solid #fff !important;
    box-shadow: 0 7px 18px rgba(23,106,154,.22) !important;
    transform: none !important;
  }

  .bnav-fab:hover,
  .bnav-fab:active {
    background: var(--ui-primary-hover) !important;
    transform: translateY(1px) !important;
  }

  .bnav-item .bnav-badge,
  .bnav-item .bnav-lainnya-dot {
    box-shadow: none !important;
    border-color: #fff !important;
  }

  .page-section {
    animation: uiSurfaceIn .18s ease both !important;
  }

  @keyframes uiSurfaceIn {
    from { opacity: 0; transform: translateY(4px); }
    to { opacity: 1; transform: translateY(0); }
  }
}

/* ============================================================
   MODALS, FORMS, UPLOADS, AUTOCOMPLETE
   ============================================================ */
.modal-overlay {
  background: rgba(15,23,42,.42) !important;
  backdrop-filter: blur(3px) !important;
  -webkit-backdrop-filter: blur(3px) !important;
}

.modal-header,
.modal-footer,
.modal-top-actions {
  background: var(--ui-surface) !important;
  border-color: var(--ui-border) !important;
}

.modal-header h3 {
  color: var(--ui-text) !important;
  letter-spacing: -.2px !important;
}

.modal-header p { color: var(--ui-muted) !important; }

.modal-close {
  color: #667085 !important;
  background: #f8fafc !important;
  border: 1px solid var(--ui-border) !important;
  box-shadow: none !important;
}

.modal-close:hover {
  color: var(--ui-primary) !important;
  background: var(--ui-primary-soft) !important;
  border-color: #d4e2ea !important;
}

.modal-body { scrollbar-gutter: stable; }
.modal-body .form-group { margin-bottom: 17px !important; }

.modal-body .form-label {
  margin-bottom: 7px !important;
  color: #344054 !important;
  font-size: 12px !important;
  font-weight: 650 !important;
  letter-spacing: 0 !important;
}

.modal-body .form-hint {
  margin-top: 6px !important;
  color: #7a8796 !important;
  font-size: 11px !important;
  line-height: 1.45 !important;
}

.modal-body .form-input,
.modal-body input:not([type="checkbox"]):not([type="radio"]):not([type="file"]),
.modal-body select,
.modal-body textarea {
  min-height: 48px !important;
  color: #182230 !important;
  background: #fff !important;
  border: 1px solid var(--ui-border-strong) !important;
  border-radius: var(--ui-radius-sm) !important;
  box-shadow: none !important;
  transition: border-color .16s ease, box-shadow .16s ease, background-color .16s ease !important;
}

.modal-body textarea,
.modal-body textarea.form-input {
  min-height: 104px !important;
  resize: vertical !important;
}

.modal-body .form-input:focus,
.modal-body input:focus,
.modal-body select:focus,
.modal-body textarea:focus {
  background: #fff !important;
  border-color: #2778a8 !important;
  box-shadow: 0 0 0 3px rgba(39,120,168,.10) !important;
  outline: none !important;
}

.modal-body .file-input-label {
  min-height: 50px !important;
  padding: 12px 14px !important;
  color: #5f6c7b !important;
  background: #fbfcfd !important;
  border: 1px dashed #cbd5df !important;
  border-radius: var(--ui-radius-sm) !important;
  box-shadow: none !important;
}

.modal-body .file-input-label:hover {
  color: var(--ui-primary) !important;
  background: #f6fafc !important;
  border-color: #78a9c2 !important;
}

.modal-body .autocomplete-dropdown,
.modal-body .sppg-suggestions {
  margin-top: 4px !important;
  background: #fff !important;
  border: 1px solid #dce4eb !important;
  border-radius: 12px !important;
  box-shadow: 0 12px 32px rgba(15,35,55,.12) !important;
  overflow: hidden !important;
}

.modal-body .autocomplete-item,
.modal-body .sppg-suggestions li {
  min-height: 44px !important;
  padding: 10px 13px !important;
}

.modal-body .canvas-container {
  background: #fff !important;
  border: 1px dashed #c5d0da !important;
  border-radius: 12px !important;
}

.modal-body .canvas-actions button {
  min-height: 40px !important;
  padding: 8px 12px !important;
  border-color: var(--ui-border-strong) !important;
  border-radius: 10px !important;
  box-shadow: none !important;
}

.modal-footer { box-shadow: 0 -1px 0 rgba(15,23,42,.025) !important; }

.modal-footer .btn,
.modal-top-actions .btn {
  min-height: 44px !important;
  border-radius: var(--ui-radius-sm) !important;
  box-shadow: none !important;
}

@media (max-width: 639px) {
  .modal-overlay {
    align-items: flex-end !important;
    padding: 8px 0 0 !important;
  }

  .modal-box,
  .modal-box.modal-wide,
  .modal-box.modal-xl,
  .modal-center-box {
    position: relative !important;
    width: 100% !important;
    max-width: 100% !important;
    height: auto !important;
    min-height: 0 !important;
    max-height: calc(100dvh - 8px) !important;
    padding-top: 0 !important;
    background: var(--ui-surface) !important;
    border: 1px solid rgba(228,233,239,.9) !important;
    border-bottom: 0 !important;
    border-radius: 20px 20px 0 0 !important;
    box-shadow: 0 -10px 40px rgba(15,23,42,.14) !important;
    overflow: hidden !important;
  }

  .modal-box::before,
  .modal-center-box::before {
    content: '' !important;
    display: block !important;
    position: absolute !important;
    top: 8px !important;
    left: 50% !important;
    width: 36px !important;
    height: 4px !important;
    background: #d4dbe2 !important;
    border-radius: 999px !important;
    transform: translateX(-50%) !important;
    z-index: 2 !important;
    pointer-events: none !important;
  }

  .modal-header,
  .modal-header.modal-header-center {
    min-height: 64px !important;
    padding: 25px 16px 12px !important;
    color: var(--ui-text) !important;
    background: #fff !important;
    border-bottom: 1px solid var(--ui-border) !important;
  }

  .modal-header h3 {
    color: var(--ui-text) !important;
    font-size: 16px !important;
    font-weight: 750 !important;
    line-height: 1.3 !important;
  }

  .modal-header p {
    color: var(--ui-muted) !important;
    font-size: 11px !important;
    line-height: 1.4 !important;
  }

  .modal-close {
    width: 40px !important;
    height: 40px !important;
    min-width: 40px !important;
    min-height: 40px !important;
    border-radius: 12px !important;
  }

  .modal-body {
    padding: 16px 16px 22px !important;
    scroll-padding-bottom: 92px !important;
  }

  .modal-body .form-input,
  .modal-body input:not([type="checkbox"]):not([type="radio"]):not([type="file"]),
  .modal-body select,
  .modal-body textarea {
    min-height: 50px !important;
    padding: 12px 13px !important;
    font-size: 16px !important;
  }

  .modal-body textarea,
  .modal-body textarea.form-input { min-height: 112px !important; }
  .modal-top-actions { padding: 10px 16px !important; gap: 8px !important; }

  .modal-footer {
    padding: 11px 16px calc(11px + env(safe-area-inset-bottom, 0px)) !important;
    gap: 9px !important;
    background: rgba(255,255,255,.98) !important;
    backdrop-filter: blur(14px) saturate(120%) !important;
    -webkit-backdrop-filter: blur(14px) saturate(120%) !important;
  }

  .modal-footer .btn {
    flex: 1 1 0 !important;
    min-width: 0 !important;
    min-height: 48px !important;
    padding-inline: 12px !important;
    font-size: 13px !important;
  }

  .modal-footer-center { padding-top: 11px !important; }
  .modal-center-box { text-align: left !important; }

  .modal-center-box .modal-header {
    align-items: flex-start !important;
    text-align: left !important;
  }

  .pin-lock-icon {
    width: 50px !important;
    height: 50px !important;
    margin-bottom: 10px !important;
    border-radius: 14px !important;
    box-shadow: none !important;
  }

  .detail-section { margin-bottom: 17px !important; }

  .detail-section-title {
    margin-bottom: 9px !important;
    color: #778392 !important;
    font-size: 10px !important;
    letter-spacing: .7px !important;
  }

  .detail-doc-item {
    padding: 11px 12px !important;
    border-radius: 11px !important;
    box-shadow: none !important;
  }
}

@media (min-width: 640px) {
  .modal-box {
    border: 1px solid var(--ui-border) !important;
    border-radius: var(--ui-radius-lg) !important;
    box-shadow: 0 24px 64px rgba(15,23,42,.16) !important;
  }

  .modal-header { padding: 19px 22px !important; }
  .modal-body { padding: 22px !important; }
  .modal-footer { padding: 14px 22px !important; }
}

/* ============================================================
   DARK MODE — SHARED TOKENS, NO DUPLICATE PALETTES
   ============================================================ */
body.dark-mode {
  --ui-bg: #0f172a;
  --ui-surface: #172033;
  --ui-border: #2b394c;
  --ui-border-strong: #334155;
  --ui-text: #f1f5f9;
  --ui-muted: #94a3b8;
  --ui-primary: #38a6d8;
  --ui-primary-hover: #2694c6;
  --ui-primary-soft: rgba(56,166,216,.14);
}

@media (max-width: 767px) {
  body.dark-mode .topbar,
  body.dark-mode .bottom-nav {
    background: rgba(15,23,42,.97) !important;
    border-color: var(--ui-border) !important;
  }

  body.dark-mode .mobile-menu-btn,
  body.dark-mode .topbar .icon-btn,
  body.dark-mode .topbar-right .btn-outline {
    color: #cbd5e1 !important;
    background: #172033 !important;
    border-color: var(--ui-border) !important;
  }

  body.dark-mode .topbar-title,
  body.dark-mode .topbar-profile-text .name { color: var(--ui-text) !important; }
  body.dark-mode .topbar-profile-text .role { color: var(--ui-muted) !important; }
  body.dark-mode .topbar-profile img { border-color: #334155 !important; }

  body.dark-mode .stat-card,
  body.dark-mode .info-card,
  body.dark-mode .settings-card,
  body.dark-mode .transaction-kpi-card,
  body.dark-mode .table-container,
  body.dark-mode .approval-mobile-card,
  body.dark-mode .profile-header,
  body.dark-mode .profile-menu-list,
  body.dark-mode .chart-container,
  body.dark-mode .filter-bar,
  body.dark-mode .table-header,
  body.dark-mode .tab.active {
    background: var(--ui-surface) !important;
    border-color: var(--ui-border) !important;
    box-shadow: none !important;
  }

  body.dark-mode .tabs { background: #111827 !important; }
  body.dark-mode .bnav-fab { border-color: #0f172a !important; }

  body.dark-mode .bnav-item .bnav-badge,
  body.dark-mode .bnav-item .bnav-lainnya-dot { border-color: #0f172a !important; }
}

body.dark-mode .modal-overlay { background: rgba(2,6,23,.68) !important; }

body.dark-mode .modal-box,
body.dark-mode .modal-header,
body.dark-mode .modal-footer,
body.dark-mode .modal-top-actions {
  background: var(--ui-surface) !important;
  border-color: var(--ui-border) !important;
}

body.dark-mode .modal-header h3,
body.dark-mode .modal-body .form-label { color: var(--ui-text) !important; }

body.dark-mode .modal-header p,
body.dark-mode .modal-body .form-hint { color: var(--ui-muted) !important; }

body.dark-mode .modal-close,
body.dark-mode .modal-body .form-input,
body.dark-mode .modal-body input:not([type="checkbox"]):not([type="radio"]):not([type="file"]),
body.dark-mode .modal-body select,
body.dark-mode .modal-body textarea,
body.dark-mode .modal-body .file-input-label,
body.dark-mode .modal-body .canvas-container,
body.dark-mode .modal-body .canvas-actions button {
  color: #e2e8f0 !important;
  background: #111b2d !important;
  border-color: #334155 !important;
}

body.dark-mode .modal-box::before,
body.dark-mode .modal-center-box::before { background: #526176 !important; }

body.dark-mode .modal-body .autocomplete-dropdown,
body.dark-mode .modal-body .sppg-suggestions {
  background: #111b2d !important;
  border-color: #334155 !important;
}

@media (max-width: 480px) {
  .topbar-profile-text,
  .topbar-divider { display: none !important; }
  .content { padding-inline: 12px !important; }
  .topbar { padding-inline: 12px !important; }

  .transaction-kpi-value {
    font-size: clamp(13px, 4.2vw, 17px) !important;
    letter-spacing: -.25px !important;
  }
}

@media (max-width: 360px) {
  .topbar-title { font-size: 17px !important; }

  .mobile-menu-btn,
  .topbar .icon-btn,
  .topbar-right .btn-outline {
    width: 40px !important;
    height: 40px !important;
    min-width: 40px !important;
    min-height: 40px !important;
  }

  .bnav-fab {
    width: 50px !important;
    height: 50px !important;
    min-width: 50px !important;
    min-height: 50px !important;
  }
}

@media (prefers-reduced-motion: reduce) {
  .page-section,
  .bnav-item,
  .bnav-item i,
  .bnav-fab,
  .mobile-menu-btn,
  .topbar .icon-btn,
  .modal-overlay,
  .modal-box,
  .modal-close,
  .modal-body .form-input,
  .modal-footer .btn {
    animation: none !important;
    transition: none !important;
  }
}
/* Dashboard summaries keep their data visible even when navigation is disabled. */
.dashboard-summary-header { display:flex; align-items:center; justify-content:space-between; gap:16px; flex-wrap:wrap; margin-bottom:12px; }
.dashboard-summary-header h2 { margin:0 0 6px; font-size:1.3rem; }
.dashboard-summary-header p, .dashboard-calculation-note, #dashboardLoadStatus { color:var(--text-secondary, #64748b); font-size:.875rem; line-height:1.5; }
#dashboardStats button.stat-card { font:inherit; color:inherit; text-align:left; width:100%; }
#dashboardStats button.stat-card:disabled { opacity:1; cursor:default; }
#dashboardStats button.stat-card:focus-visible { outline:3px solid var(--primary, #2563eb); outline-offset:3px; }
@media (max-width:640px) {
  #dashboardStats { display:grid !important; grid-template-columns:repeat(2,minmax(0,1fr)) !important; overflow:visible !important; }
  #dashboardStats .stat-card { min-width:0 !important; flex-wrap:wrap; }
  #dashboardStats .stat-info { min-width:0; width:100%; }
  #dashboardStats .stat-value { font-size:clamp(1rem,4.5vw,1.4rem); overflow-wrap:anywhere; }
}
.transaction-mobile-list { display:none; }
@media (max-width:767px) {
  #page-transaksi .transaction-desktop-view { display:none; }
  #page-transaksi .transaction-mobile-list { display:grid; gap:12px; }
  .transaction-mobile-card { display:flex; flex-direction:column; gap:9px; width:100%; min-width:0; padding:16px; text-align:left; font:inherit; font-size:13px; color:var(--slate-700); background:var(--card-bg,#fff); border:1px solid var(--slate-200,#e2e8f0); border-radius:16px; overflow-wrap:anywhere; cursor:pointer; }
  .transaction-mobile-card:focus-visible { outline:3px solid var(--primary); outline-offset:2px; }
  .transaction-mobile-top { display:flex; flex-wrap:wrap; justify-content:space-between; gap:8px; font-size:12px; }
  .transaction-mobile-title { font-size:16px; }
  .transaction-mobile-amount { font-size:20px; color:var(--primary); }
  .transaction-mobile-note { line-height:1.5; }
  .transaction-mobile-open { padding-top:10px; border-top:1px solid var(--slate-200,#e2e8f0); color:var(--primary); font-weight:600; }
  #page-approval .approval-card-main { grid-template-columns:minmax(0,1fr); }
  #page-approval .approval-card-amount { text-align:left; white-space:normal; overflow-wrap:anywhere; }
  #page-approval .approval-card-code { overflow-wrap:anywhere; }
  #page-approval .approval-card-select { min-width:44px; min-height:44px; justify-content:center; }
  #txFilterBar .filter-toggle-btn, #apprFilterBar .filter-toggle-btn,
  #txPagination .page-btn, #approvalPagination .page-btn { min-width:44px; min-height:44px; }
  body.dark-mode .transaction-mobile-card { background:#111b2d; color:#e2e8f0; border-color:#334155; }
}
@media print {
  #page-transaksi .transaction-mobile-list { display:none !important; }
  #page-transaksi .transaction-desktop-view { display:block !important; }
}