/* ==============================================================================
   FLUTTER MOTION ENGINE — Ultra-Smooth 120fps Mobile Micro-Interactions
   Theme: Native Dark Navy (100% Preserved)
   Physics: GPU-Accelerated Hardware Transformed Springs & Deceleration Curves
   ============================================================================== */

/* 1. Reset Tap Highlights & Enable Fluid Touch Feedback */
* {
  -webkit-tap-highlight-color: transparent !important;
}

/* 2. Tactile Spring Feedback on Tap (Interactive Elements) */
.chip-btn,
.store-chip,
.btn-date,
.btn-action,
.btn-action-sm,
.tab-btn,
.btn-quick-nav,
.nav-dropdown-trigger,
.modal-close-btn,
.dropdown-item-btn,
.finance-subtab-btn {
  touch-action: manipulation;
  will-change: transform;
  transition: transform 0.12s cubic-bezier(0.2, 0.8, 0.2, 1),
              box-shadow 0.15s ease,
              background 0.15s ease !important;
}

.chip-btn:active,
.store-chip:active,
.btn-date:active,
.btn-action:active,
.btn-action-sm:active,
.tab-btn:active,
.btn-quick-nav:active,
.nav-dropdown-trigger:active,
.modal-close-btn:active,
.dropdown-item-btn:active,
.finance-subtab-btn:active {
  transform: scale(0.95) !important;
}

/* 3. Cards Subtle Spring Elevation on Touch */
.metric-card,
.stat-card,
.card-setup,
.card-group-section {
  touch-action: manipulation;
  will-change: transform;
  transition: transform 0.15s cubic-bezier(0.2, 0.8, 0.2, 1),
              box-shadow 0.18s cubic-bezier(0.16, 1, 0.3, 1) !important;
}

.metric-card:active,
.stat-card:active {
  transform: scale(0.98) translateY(1px) !important;
}

/* 4. Modal Bottom-Sheet & Slide-Up (Flutter Cupertino / Material Physics) */
.modal-overlay {
  transition: opacity 0.24s cubic-bezier(0.16, 1, 0.3, 1),
              visibility 0.24s !important;
}

.modal-overlay .debt-modal-card {
  max-width: 820px !important;
  width: 95% !important;
  max-height: 92vh !important;
  display: flex !important;
  flex-direction: column !important;
  overflow: hidden !important;
}

.debt-modal-card .modal-body {
  overflow-x: hidden !important;
  overflow-y: auto !important;
}

#debtFilterActionBar #debtStatusFilterChips {
  display: flex !important;
  gap: 6px !important;
  flex-wrap: wrap !important;
}

#debtFilterActionBar #debtStatusFilterChips .chip-btn {
  flex-shrink: 0 !important;
  white-space: nowrap !important;
}

.modal-overlay .modal-card,
.modal-overlay .modal-card-large,
.modal-overlay .modal-dialog,
.modal-overlay .modal-content,
.modal-overlay .profit-loss-modal-card,
.modal-overlay .debt-modal-card {
  will-change: transform, opacity;
  transition: transform 0.28s cubic-bezier(0.16, 1, 0.3, 1),
              opacity 0.24s ease !important;
}

/* Saat modal ditutup / tidak aktif (animasi keluar lancar tanpa intervensi) */
.modal-overlay:not(.active) {
  opacity: 0 !important;
  visibility: hidden !important;
  pointer-events: none !important;
}

.modal-overlay:not(.active) .modal-card,
.modal-overlay:not(.active) .modal-card-large,
.modal-overlay:not(.active) .modal-dialog,
.modal-overlay:not(.active) .modal-content,
.modal-overlay:not(.active) .profit-loss-modal-card,
.modal-overlay:not(.active) .debt-modal-card {
  transform: translateY(24px) scale(0.97) !important;
  opacity: 0 !important;
  pointer-events: none !important;
}

/* Saat modal aktif / terbuka */
.modal-overlay.active {
  opacity: 1 !important;
  visibility: visible !important;
  pointer-events: auto !important;
}

.modal-overlay.active .modal-card,
.modal-overlay.active .modal-card-large,
.modal-overlay.active .modal-dialog,
.modal-overlay.active .modal-content,
.modal-overlay.active .profit-loss-modal-card,
.modal-overlay.active .debt-modal-card {
  transform: translateY(0) scale(1) !important;
  opacity: 1 !important;
  visibility: visible !important;
}

@media (max-width: 768px) {
  .modal-overlay:not(.active) .modal-card,
  .modal-overlay:not(.active) .modal-card-large,
  .modal-overlay:not(.active) .modal-dialog,
  .modal-overlay:not(.active) .modal-content,
  .modal-overlay:not(.active) .profit-loss-modal-card,
  .modal-overlay:not(.active) .debt-modal-card {
    transform: translateY(100%) !important;
    opacity: 0 !important;
  }
}

/* 5. Fluid Flutter Shimmer Wave Loading */
@keyframes flutterFluidShimmer {
  0% {
    background-position: -200% 0;
  }
  100% {
    background-position: 200% 0;
  }
}

.flutter-shimmer,
.shimmer-loading {
  position: relative !important;
  overflow: hidden !important;
  background: linear-gradient(
    90deg,
    rgba(255, 255, 255, 0.03) 0%,
    rgba(56, 189, 248, 0.12) 50%,
    rgba(255, 255, 255, 0.03) 100%
  ) !important;
  background-size: 200% 100% !important;
  animation: flutterFluidShimmer 1.5s infinite cubic-bezier(0.4, 0, 0.2, 1) !important;
  border-radius: 6px !important;
  color: transparent !important;
  user-select: none !important;
  pointer-events: none !important;
}

/* 6. Flutter Ripple Effect */
.flutter-ripple-ink {
  position: absolute;
  border-radius: 50%;
  transform: scale(0);
  background: rgba(255, 255, 255, 0.16);
  pointer-events: none;
  animation: flutterRippleAnim 0.45s cubic-bezier(0.16, 1, 0.3, 1) forwards;
}

@keyframes flutterRippleAnim {
  0% {
    transform: scale(0);
    opacity: 0.6;
  }
  100% {
    transform: scale(3.5);
    opacity: 0;
  }
}

/* 7. Smooth Inertial Scrolling */
.smooth-scroll,
.table-responsive,
.winforms-grid-scrollbar,
#deadStockTableBody,
#cashierTableContainer {
  -webkit-overflow-scrolling: touch;
  scroll-behavior: smooth;
}

/* ==============================================================================
   8. RESPONSIVE GUARDS: REPORT MENUS, ACTION BARS & TABLES (ANTI-SQUISH)
   Mencegah teks terhimpit, elemen tumpang tindih, dan kolom tabel mepet di HP
   ============================================================================== */

/* Table scrolling & column width protection in report modals */
#activityLogModal .modal-body,
#invoiceModal .modal-body {
  overflow-x: auto !important;
  -webkit-overflow-scrolling: touch !important;
}

#activityLogModal table,
#invoiceModal table {
  min-width: 680px !important;
  width: 100% !important;
  border-collapse: collapse !important;
}

#activityLogModal th,
#activityLogModal td,
#invoiceModal th,
#invoiceModal td {
  white-space: nowrap !important;
  padding: 8px 12px !important;
  font-size: 0.8rem !important;
}

#activityLogModal td:nth-child(5) {
  /* Kolom Keterangan di Log Aktivitas */
  white-space: normal !important;
  min-width: 180px !important;
  max-width: 320px !important;
  word-break: break-word !important;
}

#invoiceModal td:nth-child(3) {
  /* Kolom Pelanggan di Invoice */
  white-space: normal !important;
  min-width: 120px !important;
  max-width: 200px !important;
  word-break: break-word !important;
}

/* Modal Laba Rugi filter row on mobile */
@media (max-width: 640px) {
  .pl-filter-row {
    display: grid !important;
    grid-template-columns: 1fr 1fr !important;
    gap: 8px !important;
  }
  .pl-field-branch {
    grid-column: 1 / -1 !important;
    min-width: 0 !important;
  }
  .pl-field-date {
    min-width: 0 !important;
  }
  .pl-field-btn {
    grid-column: 1 / -1 !important;
    width: 100% !important;
  }
  .pl-btn-submit {
    width: 100% !important;
    justify-content: center !important;
  }
}

/* Financial action bar & cards on mobile */
@media (max-width: 640px) {
  .finance-actions-bar {
    display: grid !important;
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 8px !important;
  }
  .finance-actions-bar .btn-action-primary {
    min-width: 0 !important;
    padding: 9px 8px !important;
    font-size: 0.76rem !important;
    text-align: center !important;
    justify-content: center !important;
  }
  .finance-actions-bar .btn-action-primary span:last-child {
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    white-space: nowrap !important;
  }

  /* Hutang Piutang card actions */
  .debt-card-actions {
    display: grid !important;
    grid-template-columns: 1fr 1fr !important;
    gap: 8px !important;
    width: 100% !important;
  }
  .debt-card-actions button {
    width: 100% !important;
    justify-content: center !important;
  }

  /* Deposit Pelanggan responsive layout */
  #depSplitLayout {
    flex-direction: column !important;
  }
  #depDetailPanel {
    width: 100% !important;
  }
  #modalDepositPelanggan table {
    min-width: 520px !important;
  }

  /* Action filter bar transaksi kas */
  #finTxActionBar {
    flex-direction: column !important;
    align-items: stretch !important;
    gap: 8px !important;
    padding: 10px 12px !important;
  }
  #finTxActionBar > div {
    width: 100% !important;
    min-width: 0 !important;
    flex-direction: column !important;
    align-items: stretch !important;
  }
  #finTxActionBar #finSearchInput {
    width: 100% !important;
    min-width: 0 !important;
  }
  #btnOpenCreateKas {
    width: 100% !important;
    justify-content: center !important;
  }

  /* Filter bar Log & Invoice */
  #activityLogModal select#logSelectStore,
  #invoiceModal select#invSelectStore {
    min-width: 0 !important;
    max-width: 100% !important;
    width: 100% !important;
  }

  /* =========================================================================
     OPTIMASI MOBILE: LAPORAN KAS, BANK & HUTANG PIUTANG LEBIH PANJANG KE BAWAH
     ========================================================================= */

  /* 1. Modal Laporan Hutang & Piutang (debtCreditModal) */
  #debtCreditModal.modal-overlay .debt-modal-card {
    width: 100% !important;
    max-width: 100% !important;
    height: 96vh !important;
    max-height: 96vh !important;
    border-radius: 18px 18px 0 0 !important;
    display: flex !important;
    flex-direction: column !important;
    overflow: hidden !important;
  }

  #debtCreditModal .modal-header {
    padding: 8px 14px !important;
    flex-shrink: 0 !important;
  }
  #debtCreditModal .modal-title {
    font-size: 0.95rem !important;
  }
  #debtCreditModal .modal-subtitle {
    display: none !important;
  }

  #debtCreditModal .cashier-controls-panel {
    padding: 6px 10px !important;
    gap: 6px !important;
    flex-shrink: 0 !important;
  }
  #debtCreditModal #btnModeHutang,
  #debtCreditModal #btnModePiutang {
    padding: 6px 8px !important;
    font-size: 0.74rem !important;
  }
  #debtCreditModal select#debtStoreSelect {
    padding: 5px 8px !important;
    font-size: 0.75rem !important;
    height: 32px !important;
  }

  /* Ringkasan 4 KPI dibuat 1 baris micro (4 kolom rapi menghemat 120px) */
  #debtCreditModal #debtKpiGrid.cashier-summary-grid {
    grid-template-columns: repeat(4, 1fr) !important;
    gap: 4px !important;
    padding: 4px 8px !important;
    border-bottom: 1px solid var(--border-color) !important;
    flex-shrink: 0 !important;
  }
  #debtCreditModal #debtKpiGrid .cashier-summary-box {
    padding: 4px 4px !important;
    border-radius: 6px !important;
    text-align: center !important;
  }
  #debtCreditModal #debtKpiGrid .cashier-summary-lbl {
    font-size: 0.52rem !important;
    margin-bottom: 1px !important;
    white-space: nowrap !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    letter-spacing: -0.2px !important;
  }
  #debtCreditModal #debtKpiGrid .cashier-summary-val {
    font-size: 0.72rem !important;
    font-weight: 800 !important;
    white-space: nowrap !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
  }

  /* Filter bar: status chips horizontal scroll + search kompak */
  #debtCreditModal #debtFilterActionBar {
    padding: 6px 10px !important;
    gap: 6px !important;
    flex-direction: row !important;
    align-items: center !important;
    flex-shrink: 0 !important;
  }
  #debtCreditModal #debtFilterActionBar #debtStatusFilterChips {
    display: flex !important;
    gap: 4px !important;
    overflow-x: auto !important;
    flex-wrap: nowrap !important;
    scrollbar-width: none !important;
    padding-bottom: 0 !important;
    flex: 1 1 auto !important;
  }
  #debtCreditModal #debtFilterActionBar #debtStatusFilterChips .chip-btn {
    padding: 4px 8px !important;
    font-size: 0.7rem !important;
    white-space: nowrap !important;
    flex-shrink: 0 !important;
  }
  #debtCreditModal #debtFilterActionBar #debtSearchInput {
    flex: 0 0 115px !important;
    width: 115px !important;
    padding: 5px 8px !important;
    font-size: 0.74rem !important;
    border-radius: 6px !important;
  }

  /* List hutang/piutang memanjang penuh ke bawah */
  #debtCreditModal .modal-body {
    flex: 1 1 auto !important;
    min-height: 0 !important;
    overflow-y: auto !important;
    padding: 8px 10px !important;
    -webkit-overflow-scrolling: touch !important;
  }
  #debtCreditModal .debt-card {
    padding: 9px 11px !important;
    gap: 5px !important;
    margin-bottom: 7px !important;
    border-radius: 10px !important;
  }
  #debtCreditModal .debt-contact-name {
    font-size: 0.86rem !important;
  }
  #debtCreditModal .debt-card-grid {
    grid-template-columns: 1fr 1fr !important;
    gap: 4px !important;
    padding: 5px 8px !important;
    font-size: 0.72rem !important;
  }
  #debtCreditModal .modal-footer {
    padding: 8px 12px !important;
    flex-shrink: 0 !important;
  }

  /* 2. Modal Laporan Keuangan, Kas & Bank (financeModal) */
  #financeModal.modal-overlay .finance-modal-card {
    width: 100% !important;
    max-width: 100% !important;
    height: 96vh !important;
    max-height: 96vh !important;
    border-radius: 18px 18px 0 0 !important;
    display: flex !important;
    flex-direction: column !important;
    overflow: hidden !important;
  }

  #financeModal .modal-header {
    padding: 8px 14px !important;
    flex-shrink: 0 !important;
  }
  #financeModal .modal-title {
    font-size: 0.95rem !important;
  }
  #financeModal .modal-subtitle {
    display: none !important;
  }

  #financeModal .cashier-controls-panel {
    padding: 6px 10px !important;
    flex-shrink: 0 !important;
  }
  #financeModal .cashier-controls-panel > div {
    gap: 6px !important;
  }
  #financeModal #finStoreSelect,
  #financeModal #finViewModeSelect {
    padding: 5px 8px !important;
    font-size: 0.75rem !important;
    height: 32px !important;
  }
  #financeModal #btnRefreshFinance {
    padding: 5px 10px !important;
    font-size: 0.75rem !important;
    margin-top: 0 !important;
    height: 32px !important;
  }

  #financeModal #finCompactBar {
    padding: 5px 10px !important;
    flex-shrink: 0 !important;
  }
  #financeModal #finCompactSaldo {
    font-size: 0.95rem !important;
  }
  #financeModal #finBalanceOverviewSection {
    padding: 8px 10px !important;
    flex-shrink: 0 !important;
  }
  #financeModal #finTotalSaldoAll {
    font-size: 1.15rem !important;
  }

  /* Grid akun bank memanjang maksimal ke bawah saat mode balance */
  #financeModal .fin-accounts-grid.full-height {
    max-height: calc(96vh - 150px) !important;
    grid-template-columns: 1fr !important;
    gap: 6px !important;
    padding-bottom: 24px !important;
  }
  #financeModal .fin-accounts-grid:not(.full-height) {
    max-height: 130px !important;
    grid-template-columns: 1fr 1fr !important;
    gap: 6px !important;
  }
  #financeModal .fin-account-card {
    padding: 7px 9px !important;
  }

  /* Subtabs Kas Masuk/Keluar/Transfer */
  #financeModal #finTxTabs {
    display: flex !important;
    overflow-x: auto !important;
    flex-wrap: nowrap !important;
    scrollbar-width: none !important;
    flex-shrink: 0 !important;
  }
  #financeModal #finTxTabs .modal-tab-btn {
    padding: 6px 8px !important;
    font-size: 0.72rem !important;
    white-space: nowrap !important;
    flex: 1 0 auto !important;
  }

  /* Action & filter bar transaksi */
  #financeModal #finTxActionBar {
    padding: 5px 10px !important;
    gap: 5px !important;
    flex-shrink: 0 !important;
  }
  #financeModal #finSearchInput {
    padding: 5px 8px !important;
    font-size: 0.74rem !important;
    min-width: 100px !important;
  }
  #financeModal #finStartDate,
  #financeModal #finEndDate {
    padding: 4px 5px !important;
    font-size: 0.72rem !important;
    max-width: 95px !important;
  }
  #financeModal #btnFilterFinDate,
  #financeModal #btnResetFinDate {
    padding: 4px 7px !important;
    font-size: 0.72rem !important;
  }
  #financeModal #btnOpenCreateKas {
    padding: 5px 9px !important;
    font-size: 0.74rem !important;
  }

  /* List transaksi memanjang ke bawah */
  #financeModal #finTxModalBody {
    flex: 1 1 auto !important;
    min-height: 0 !important;
    overflow-y: auto !important;
    padding: 6px 10px !important;
    -webkit-overflow-scrolling: touch !important;
  }
  #financeModal .fin-kas-card {
    padding: 8px 10px !important;
    margin-bottom: 6px !important;
    border-radius: 8px !important;
  }
  #financeModal .modal-footer {
    padding: 8px 12px !important;
    flex-shrink: 0 !important;
  }

  /* 3. Card Dashboard Saldo Kas & Rekening Bank (Bisa panjang ke bawah) */
  #dashAccountsList {
    max-height: 350px !important;
    -webkit-overflow-scrolling: touch !important;
  }

  #invoiceModal select#invSelectStore {
    min-width: 0 !important;
    max-width: 100% !important;
    width: 100% !important;
  }

  #activityLogModal #logActionChips,
  #invoiceModal #invTypeChips {
    overflow-x: auto !important;
    flex-wrap: nowrap !important;
    max-width: 100% !important;
    padding-bottom: 4px !important;
    scrollbar-width: none !important;
  }

  #activityLogModal #logSummaryInfo,
  #invoiceModal #invSummaryInfo {
    width: 100% !important;
    margin-top: 4px !important;
  }
}