/* EASY_CODE_GUIDE_V1
 * responsive_v54.css — CSS ـی هاوبەش بۆ responsive/design.
 */
/* =========================================================
   Avyar V54 - Universal Responsive Safety Layer
   Screen-only overrides. Printing/barcode/receipt paper stays unchanged.
   ========================================================= */

@media screen {
  :root {
    --v54-gutter: clamp(10px, 2.2vw, 28px);
    --v54-gap: clamp(10px, 1.8vw, 20px);
    --v54-touch: 44px;
  }

  html {
    width: 100%;
    max-width: 100%;
    min-width: 0;
    overflow-x: hidden;
    -webkit-text-size-adjust: 100%;
    text-size-adjust: 100%;
  }

  body {
    width: 100%;
    max-width: 100%;
    min-width: 0;
    overflow-x: hidden;
  }

  body, .main-wrapper, main, section, article, .content-card, .page-header,
  .tab-content, .metrics-grid, .form-grid, .pos-container, .pos-products,
  .sidebar, .mobile-header, .v53-studio-body, .v53-preview-pane {
    min-width: 0;
  }

  img, video, canvas {
    max-width: 100%;
  }

  img {
    height: auto;
  }

  input, select, textarea, button {
    max-width: 100%;
    min-width: 0;
  }

  textarea {
    resize: vertical;
  }

  .form-control,
  input[type="text"], input[type="search"], input[type="number"],
  input[type="email"], input[type="password"], input[type="tel"],
  input[type="date"], input[type="time"], select, textarea {
    min-height: 42px;
  }

  .main-wrapper {
    width: auto !important;
    max-width: 100%;
    overflow-x: hidden;
  }

  .content-card,
  .page-header,
  .metric-card {
    max-width: 100%;
  }

  /* Any ordinary table can scroll on a narrow screen instead of breaking layout. */
  .table-responsive,
  .v54-table-scroll {
    display: block;
    width: 100%;
    max-width: 100%;
    overflow-x: auto !important;
    overflow-y: hidden;
    -webkit-overflow-scrolling: touch;
    overscroll-behavior-inline: contain;
    scrollbar-width: thin;
  }

  .v54-table-scroll > table,
  .table-responsive > table {
    width: 100%;
    min-width: max-content;
  }

  .v54-table-scroll:focus-within,
  .table-responsive:focus-within {
    outline: 2px solid var(--primary-color, #2563eb);
    outline-offset: 2px;
    border-radius: 10px;
  }

  /* Flex toolbars/actions should wrap instead of overflowing. */
  .page-header,
  .header-actions,
  .actions,
  .category-manager-row,
  .catalog-filter-wrap,
  .catalog-server-pager,
  .istore-dialog-actions {
    flex-wrap: wrap;
  }

  /* Dialogs and editors stay inside the visible viewport. */
  .scanner-box,
  .edit-invoice-box,
  .istore-dialog-card,
  .modal-content,
  [role="dialog"] {
    max-width: min(94vw, 900px) !important;
    max-height: calc(100dvh - 24px) !important;
    overflow: auto !important;
    overscroll-behavior: contain;
  }

  #scannerModal,
  #editInvoiceModal,
  [id$="Modal"] {
    padding: max(8px, env(safe-area-inset-top)) max(8px, env(safe-area-inset-right))
             max(8px, env(safe-area-inset-bottom)) max(8px, env(safe-area-inset-left));
  }

  /* Long labels/codes must not force a page wider than the device. */
  .content-card h1, .content-card h2, .content-card h3,
  .page-header h1, .page-header h2,
  .brand-title, .metric-card, .form-group label,
  .istore-notice-body, .istore-dialog-text {
    overflow-wrap: anywhere;
    word-break: normal;
  }

  code, pre {
    max-width: 100%;
    overflow-x: auto;
    white-space: pre-wrap;
    overflow-wrap: anywhere;
  }

  /* Desktop/tablet POS scaling. */
  @media (max-width: 1180px) {
    .pos-container {
      grid-template-columns: minmax(0, 1fr) !important;
    }

    .pos-products {
      grid-template-columns: repeat(auto-fill, minmax(145px, 1fr)) !important;
      max-height: none !important;
    }
  }

  @media (max-width: 900px) {
    .main-wrapper {
      padding-left: var(--v54-gutter) !important;
      padding-right: var(--v54-gutter) !important;
    }

    .metrics-grid,
    .form-grid {
      grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
      gap: var(--v54-gap) !important;
    }

    .content-card {
      padding: clamp(16px, 3vw, 24px) !important;
    }

    .page-header {
      gap: 12px;
    }

    .v53-studio-body {
      grid-template-columns: minmax(0, 1fr) !important;
    }

    .v53-preview-pane {
      position: relative !important;
      top: auto !important;
    }
  }

  @media (max-width: 768px) {
    body {
      min-height: 100dvh;
    }

    .mobile-header {
      padding-top: max(10px, env(safe-area-inset-top)) !important;
      padding-left: max(10px, env(safe-area-inset-left)) !important;
      padding-right: max(10px, env(safe-area-inset-right)) !important;
    }

    .main-wrapper {
      padding-top: calc(76px + env(safe-area-inset-top)) !important;
      padding-bottom: max(18px, env(safe-area-inset-bottom)) !important;
    }

    .page-header {
      flex-direction: column !important;
      align-items: stretch !important;
      padding: 16px !important;
      margin-bottom: 16px !important;
      border-radius: 16px !important;
    }

    .page-header > * {
      max-width: 100%;
    }

    .page-header .header-actions,
    .page-header .actions {
      width: 100%;
      justify-content: flex-start;
    }

    .content-card {
      margin-bottom: 16px !important;
      border-radius: 16px !important;
    }

    .metrics-grid {
      margin-bottom: 16px !important;
    }

    .metric-card {
      padding: 18px !important;
      border-radius: 16px !important;
    }

    .metric-card .value {
      font-size: clamp(1.2rem, 6vw, 1.75rem) !important;
    }

    .btn,
    button,
    .menu-toggle,
    .header-icon-btn {
      min-height: var(--v54-touch);
    }

    .form-control,
    input, select, textarea {
      font-size: 16px !important; /* prevents unwanted iOS zoom */
    }

    .scanner-box,
    .edit-invoice-box,
    .istore-dialog-card,
    .modal-content,
    [role="dialog"] {
      width: calc(100vw - 16px) !important;
      max-width: calc(100vw - 16px) !important;
      max-height: calc(100dvh - 16px) !important;
      padding: 16px !important;
      border-radius: 16px !important;
    }

    #videoContainer {
      height: clamp(220px, 45dvh, 360px) !important;
    }

    .cart-item {
      gap: 10px;
      flex-wrap: wrap;
    }

    .catalog-filter-wrap,
    .category-manager-row {
      width: 100%;
    }
  }

  @media (max-width: 600px) {
    .metrics-grid,
    .form-grid,
    .v53-grid,
    .v53-toggle-grid {
      grid-template-columns: minmax(0, 1fr) !important;
    }

    .main-wrapper {
      padding-left: 10px !important;
      padding-right: 10px !important;
    }

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

    .content-card h2 {
      font-size: 1.08rem !important;
      margin-bottom: 16px !important;
      flex-wrap: wrap;
    }

    .pos-products {
      grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
      gap: 10px !important;
    }

    .product-card {
      padding: 10px !important;
    }

    .product-card img {
      height: 90px !important;
    }

    .header-actions,
    .actions,
    .istore-dialog-actions {
      gap: 7px !important;
    }

    .header-actions .btn,
    .actions .btn,
    .istore-dialog-actions > * {
      flex: 1 1 auto;
    }

    th, td {
      padding: 11px 12px !important;
      font-size: .86rem !important;
    }

    .v53-studio-head,
    .v53-studio-body {
      padding: 12px !important;
    }

    .v53pv-meta {
      grid-template-columns: minmax(0,1fr) !important;
    }
  }

  @media (max-width: 390px) {
    .main-wrapper {
      padding-left: 7px !important;
      padding-right: 7px !important;
    }

    .page-header,
    .content-card,
    .metric-card {
      border-radius: 14px !important;
    }

    .pos-products {
      grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
      gap: 7px !important;
    }

    .product-card {
      padding: 8px !important;
      border-radius: 12px !important;
    }

    .product-card img {
      height: 76px !important;
    }

    .btn {
      padding-left: 11px !important;
      padding-right: 11px !important;
    }
  }

  @media (orientation: landscape) and (max-height: 520px) and (max-width: 1000px) {
    .mobile-header {
      min-height: 54px !important;
      padding-top: 6px !important;
      padding-bottom: 6px !important;
    }

    .main-wrapper {
      padding-top: 64px !important;
    }

    .sidebar {
      max-height: calc(100dvh - 8px) !important;
      top: 4px !important;
      bottom: 4px !important;
    }
  }

  @media (pointer: coarse) {
    a, button, input[type="button"], input[type="submit"],
    .btn, .nav-item a, .qty-btn {
      touch-action: manipulation;
    }
  }
}


/* =========================================================
   V11 Mobile performance layer — screen only, receipt/print untouched
   ========================================================= */
@media screen and (max-width: 768px) {
  html, body { scroll-behavior:auto !important; }

  /* Keep the drawer GPU-cheap. */
  #sidebar.sidebar, .sidebar {
    will-change: transform;
    contain: layout paint style;
    box-shadow: -8px 0 22px rgba(0,0,0,.18) !important;
  }
  .sidebar-overlay {
    backdrop-filter:none !important;
    -webkit-backdrop-filter:none !important;
  }

  /* Remove expensive hover/animation work on touch devices. */
  .v54-touch *, .v54-touch *::before, .v54-touch *::after {
    animation-duration:.001ms !important;
    animation-iteration-count:1 !important;
    transition-duration:.001ms !important;
  }
  .v54-touch .sidebar,
  .v54-touch .sidebar-overlay,
  .v54-touch .menu-toggle {
    transition: transform .14s ease-out, opacity .14s ease-out, visibility .14s linear !important;
  }

  /* Long dashboard/customer pages: skip off-screen painting. */
  .main-wrapper > .content-card,
  .main-wrapper > .metrics-grid,
  .main-wrapper > .page-header,
  main > .content-card,
  main > section:not(#print-section) {
    content-visibility:auto;
    contain-intrinsic-size: 1px 520px;
  }

  /* Never apply paint containment tricks to receipt/editor/print areas. */
  #print-section,
  #v53ReceiptStudioOverlay,
  #v53ReceiptStudio,
  .v53-preview-pane,
  .receipt-card,
  .receipt-copy,
  .receiptCopy {
    content-visibility:visible !important;
    contain:none !important;
  }

  /* Less costly decorative shadows on mobile. */
  .metric-card,
  .content-card,
  .page-header,
  .btn,
  .header-icon-btn {
    box-shadow:none !important;
  }
}

@media screen and (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    scroll-behavior:auto !important;
    animation:none !important;
    transition:none !important;
  }
}