/* polish.css — overlay polish + a11y fixes untuk Folio editorial SaaS pages
 * Fixes:
 *   1. Mobile table overflow: wrap setiap <table> di div .table-scroll yg ada di CSS
 *   2. :focus-visible keyboard navigation ring
 *   3. Skeleton shimmer for loading states
 *   4. Modal full-width di mobile (<480px)
 *   5. Toast safe-area-inset-bottom (notch iPhone)
 *   6. Disabled select arrow color
 *   7. Better scrollbar utk dark theme
 */

/* === 1. TABLE: horizontal scroll wrapper for mobile === */
@media (max-width: 768px) {
  /* For naked <table> directly inside .card or [data-panel], wrap with scroll */
  .panel > table.data,
  [data-panel] > table.data,
  .card > table,
  .stats + .card table,
  #products-table table,
  #stock-table table,
  #orders-table table,
  #invoices-list table,
  #expenses-list table,
  #journals-list table,
  #cashbank-list table,
  #payroll-list table,
  #attendance-list table,
  #leaves-list table,
  #employees-list table,
  #campaigns-list table,
  #customers-table table,
  #suppliers-list table,
  #warehouses-list table,
  #payment-methods-list table,
  #po-table table {
    min-width: 600px;
  }
  /* Auto-wrap table parents so overflow scroll works */
  [data-panel] > div:has(> table) {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
  }
}

/* === 2. :focus-visible keyboard ring (a11y) === */
button:focus-visible,
a:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible,
[role="button"]:focus-visible,
.tool-tab:focus-visible,
.wa-tab:focus-visible,
.source-tab:focus-visible,
.pos-nav__item:focus-visible,
.type-btn:focus-visible,
.platform:focus-visible,
.cat-tab:focus-visible,
.qty-btn:focus-visible,
.pay-method:focus-visible,
.prod-tile:focus-visible,
.product-card:focus-visible {
  outline: 2px solid var(--gold, #D9A23C) !important;
  outline-offset: 2px !important;
  border-radius: 6px;
}
.btn:focus-visible {
  box-shadow: 0 0 0 3px rgba(217,162,60,.4), 0 2px 0 var(--gold-deep, #A87A26), inset 0 1px 0 rgba(255,255,255,.35) !important;
}

/* Reduce focus ring intrusiveness on mouse click */
:focus:not(:focus-visible) { outline: none !important; }

/* === 3. SKELETON shimmer loading === */
.skeleton {
  display: inline-block;
  background: linear-gradient(90deg,
    rgba(241,230,206,.04) 0%,
    rgba(217,162,60,.12) 50%,
    rgba(241,230,206,.04) 100%);
  background-size: 200% 100%;
  border-radius: 6px;
  animation: skeleton-shimmer 1.4s ease-in-out infinite;
  color: transparent !important;
  user-select: none;
}
.skeleton-row {
  height: 14px;
  margin: 6px 0;
  width: 100%;
}
.skeleton-row--sm { height: 11px; width: 60% }
.skeleton-row--lg { height: 22px; width: 40% }
.skeleton-row + .skeleton-row { margin-top: 8px }
@keyframes skeleton-shimmer {
  0% { background-position: 200% 0 }
  100% { background-position: -200% 0 }
}
@media (prefers-reduced-motion: reduce) {
  .skeleton { animation: none; background-position: 0 0 }
}

/* === 4. MODAL full-width on small mobile === */
@media (max-width: 480px) {
  .modal {
    border-radius: 12px 12px 0 0 !important;
    max-height: 92vh !important;
    margin-bottom: 0 !important;
    padding: 22px 20px !important;
  }
  .modal-overlay {
    align-items: flex-end !important;
    padding: 0 !important;
  }
}

/* === 5. TOAST safe-area for iPhone notch === */
.toast {
  bottom: calc(24px + env(safe-area-inset-bottom, 0px)) !important;
}

/* === 6. SELECT consistent arrow on dark theme === */
.form-select option:disabled,
.form-input option:disabled,
select option:disabled {
  color: var(--on-ink-muted, #9FAFB3);
}

/* === 7. SCROLLBAR: dark theme consistent === */
@supports (scrollbar-color: auto) {
  * { scrollbar-color: rgba(217,162,60,.28) transparent; scrollbar-width: thin; }
}

/* === 8. CARD hover lift consistency === */
.stat,
.stat-card,
.feature {
  transition: transform .2s, border-color .2s, box-shadow .2s;
}

/* === 9. Smooth scroll for in-page anchors === */
html { scroll-behavior: smooth; scroll-padding-top: 80px; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto } }

/* === 10. Sidebar nav: better mobile touch target === */
@media (max-width: 768px) {
  .sidebar nav button,
  .pos-nav__item,
  nav button {
    min-height: 44px; /* iOS HIG min touch target */
  }
  .btn.sm, .btn--sm { min-height: 36px }
  .qty-btn { min-width: 32px; min-height: 32px }
}

/* === 11. Mobile bottom safe area pad for sticky bottom elements === */
.cart-bar,
.pos-cart {
  padding-bottom: calc(14px + env(safe-area-inset-bottom, 0px));
}

/* === 12. Print-friendly receipt === */
@media print {
  body { background: white !important; color: black !important; }
  .pos-app, .pos-sidebar, .pos-topbar, .pay-method, .btn,
  .nav, .header, .sidebar, .mobile-menu, .toast,
  .modal-overlay:not(.is-open):not(.show) { display: none !important; }
  .modal-overlay.is-open, .modal-overlay.show {
    position: static !important; display: block !important;
    background: white !important; padding: 0 !important;
  }
  .modal {
    background: white !important; color: black !important;
    border: none !important; box-shadow: none !important;
    max-width: none !important; padding: 0 !important;
  }
  .receipt {
    background: white !important; color: black !important;
    border: 1px dashed #999 !important;
  }
  .receipt strong { color: black !important }
}

/* === 13. Empty state icon gentle animation === */
.empty .icon,
.empty__emoji,
.empty-icon,
.cart-empty__emoji {
  animation: empty-float 3s ease-in-out infinite;
}
@keyframes empty-float {
  0%, 100% { transform: translateY(0) }
  50% { transform: translateY(-4px) }
}
@media (prefers-reduced-motion: reduce) {
  .empty .icon, .empty__emoji, .empty-icon, .cart-empty__emoji { animation: none }
}

/* === 14. Tag transition for status changes === */
.tag {
  transition: background .2s, color .2s, border-color .2s;
}

/* === 15. Disabled state: 0.45 alpha biar konsisten === */
button:disabled,
[disabled],
.btn:disabled {
  cursor: not-allowed !important;
}

/* === 16. POS prod-tile mobile: bigger touch === */
@media (max-width: 480px) {
  .prod-tile,
  .product-card {
    min-height: 80px;
    padding: 12px;
  }
}

/* === 17. Status pill animation on connection state === */
.status-badge.is-connected::before,
.status-pill.online {
  animation: pulse-dot 2s ease-in-out infinite;
}
@keyframes pulse-dot {
  0%, 100% { opacity: 1 }
  50% { opacity: .55 }
}
@media (prefers-reduced-motion: reduce) {
  .status-badge.is-connected::before, .status-pill.online { animation: none }
}