/* =====================================================================
   AME RESPONSIVE FIX — গ্লোবাল রেসপন্সিভ সেফটি-নেট
   =====================================================================
   এই ফাইলটা সব পেজের সব CSS-এর পরে লোড হয় এবং !important দিয়ে
   প্রয়োগ করা হয়, তাই কোনো পেজের নিজস্ব <style> ব্লক এটাকে
   ওভাররাইড করতে পারে না। উদ্দেশ্য: যেকোনো ডিভাইস/স্ক্রিন সাইজে
   পেজ নিজে থেকেই মানিয়ে নেবে, কোনো এলিমেন্ট স্ক্রিনের বাইরে
   গিয়ে কাটা পড়বে না।
   ===================================================================== */

/* ১. ইউনিভার্সাল বক্স-মডেল — padding/border width-এর হিসাবের মধ্যেই থাকবে */
*, *::before, *::after {
    box-sizing: border-box !important;
}

/* ২. পুরো পেজ কখনো স্ক্রিনের চেয়ে চওড়া হতে পারবে না */
html {
    max-width: 100% !important;
    overflow-x: hidden !important;
    -webkit-text-size-adjust: 100%;
}

body {
    max-width: 100vw !important;
    overflow-x: hidden !important;
    width: 100% !important;
    margin: 0 !important;
}

/* নচ/কার্ভড-স্ক্রিন ডিভাইসে কনটেন্ট কাটা পড়া থেকে বাঁচাবে */
body {
    padding-left: env(safe-area-inset-left, 0) !important;
    padding-right: env(safe-area-inset-right, 0) !important;
}

/* ৩. মিডিয়া/মিডিয়া-জাতীয় এলিমেন্ট কখনো প্যারেন্টের চেয়ে চওড়া হবে না */
img, video, iframe, embed, object, svg {
    max-width: 100% !important;
    height: auto;
}

/* ৪. ফর্ম এলিমেন্ট — বক্সের বাইরে যাবে না, লম্বা placeholder "..." দিয়ে কাটবে,
      এবং iOS-এ ফোকাস করলে যেন নিজে থেকে জুম না করে তার জন্য ফন্ট ন্যূনতম ১৬px */
input, textarea, select, button {
    max-width: 100% !important;
    box-sizing: border-box !important;
    text-overflow: ellipsis;
}
@media (max-width: 768px) {
    input, textarea, select {
        font-size: max(16px, 1em);
    }
}

/* ৫. flex/grid কন্টেইনার — জায়গা না হলে wrap করবে, স্ক্রিনের বাইরে ঠেলে দেবে না */
[style*="display:flex"], [style*="display: flex"],
[style*="display:inline-flex"], [style*="display: inline-flex"] {
    flex-wrap: wrap !important;
}
/* ক্লাস/স্টাইলশিটে ডিফাইন করা flex কন্টেইনারের জন্য সাধারণ কভারেজ
   (!important থাকায় পরে লোড হওয়া কোনো পেজ-স্টাইলও এটাকে হারাতে পারবে না) */
body * {
    flex-wrap: wrap !important;
}
.hm-banner-slider,
.hm-banner-track,
#hmBannerSlider,
#hmBannerTrack,
.hdr-btn-group,
.master-header-fixed {
    flex-wrap: nowrap !important;
    flex-direction: row !important;
}
.master-header-fixed *,
.ame-tbar,
.ame-tbar * {
    flex-wrap: nowrap !important;
}
.hdr-clock {
    flex-wrap: nowrap !important;
    flex-direction: column !important;
    display: flex !important;
}
.hdr-icon-btn svg {
    width: 17px !important;
    height: 17px !important;
    max-width: none !important;
}

/* বিক্রয় পেজ: গ্লোবাল wrap ডক ও মডাল ভেঙে দেয়।
   সার্চ সারি এখানে নেই — সেটা নিচে আলাদা গ্রিড। আগের nowrap ফ্লেক্স
   নাম আর দাম এক লাইনে চেপে ধরত। */
.ame-pos-page .ame-pos-custom-item-toggle,
.ame-pos-page .pos-customer-dialog-header,
.ame-pos-page .pos-customer-select-row,
.pos-customer-modal.open,
.smt-dock,
.smt-sheet-actions {
    flex-wrap: nowrap !important;
}

/* সার্চ তালিকা ব্লক, ফ্লেক্স কলাম নয়।
   ফ্লেক্স কলাম + বাটনের min-height:0 সারিগুলোকে চ্যাপ্টা করে
   এক সারির লেখা পরের সারির উপর উঠে যেত। */
.ame-pos-page #search-res:not(:empty) {
    display: block !important;
    width: 100% !important;
    max-width: 100% !important;
    box-sizing: border-box !important;
    max-height: min(46vh, 360px) !important;
    overflow-x: hidden !important;
    overflow-y: auto !important;
    -webkit-overflow-scrolling: touch;
}

.ame-pos-page #search-res:empty {
    display: none !important;
    border: 0 !important;
    box-shadow: none !important;
    height: 0 !important;
    min-height: 0 !important;
    padding: 0 !important;
    margin: 0 !important;
}

.ame-pos-page #search-res .res-item {
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) auto !important;
    align-items: start !important;
    justify-content: stretch !important;
    gap: 4px 12px !important;
    flex-shrink: 0 !important;
    width: 100% !important;
    max-width: 100% !important;
    min-height: 52px !important;
    height: auto !important;
    margin: 0 !important;
    padding: 10px 12px !important;
    border: 0 !important;
    border-bottom: 1px solid #d5dbe3 !important;
    border-left: 4px solid #0b1e4d !important;
    border-radius: 0 !important;
    background: #ffffff !important;
    color: #111111 !important;
    text-align: left !important;
    line-height: 1.45 !important;
    white-space: normal !important;
    box-sizing: border-box !important;
    overflow: hidden !important;
    cursor: pointer;
    font-family: "Noto Sans Bengali", "Noto Sans", "Kalpurush", "Segoe UI", sans-serif !important;
    font-synthesis: none !important;
    font-weight: 500 !important;
    letter-spacing: 0 !important;
}

.ame-pos-page #search-res .res-item.is-exchange {
    border-left-color: #f59e0b !important;
}

.ame-pos-page #search-res .res-item.is-active,
.ame-pos-page #search-res .res-item:hover,
.ame-pos-page #search-res .res-item:focus-visible {
    background: #e8f1fb !important;
}

.ame-pos-page #search-res .res-copy {
    display: block !important;
    min-width: 0 !important;
    max-width: 100% !important;
}

.ame-pos-page #search-res .res-name,
.ame-pos-page #search-res .res-meta,
.ame-pos-page #search-res .res-price {
    font-family: "Noto Sans Bengali", "Noto Sans", "Kalpurush", "Segoe UI", sans-serif !important;
    font-synthesis: none !important;
    letter-spacing: 0 !important;
    text-align: left !important;
}

.ame-pos-page #search-res .res-name {
    display: block !important;
    font-size: 15px !important;
    font-weight: 600 !important;
    line-height: 1.45 !important;
    white-space: normal !important;
    overflow-wrap: break-word !important;
    word-break: normal !important;
}

.ame-pos-page #search-res .res-meta {
    display: block !important;
    margin-top: 3px !important;
    font-size: 12px !important;
    font-weight: 500 !important;
    line-height: 1.35 !important;
    white-space: normal !important;
    overflow-wrap: break-word !important;
}

.ame-pos-page #search-res .res-meta.is-in {
    color: #087f3d !important;
}

.ame-pos-page #search-res .res-meta.is-out {
    color: #c62828 !important;
}

.ame-pos-page #search-res .res-price {
    display: block !important;
    justify-self: end !important;
    align-self: start !important;
    margin-top: 1px !important;
    font-size: 15px !important;
    font-weight: 700 !important;
    line-height: 1.45 !important;
    color: #087f3d !important;
    white-space: nowrap !important;
    font-variant-numeric: tabular-nums;
}

.smt-dock,
.smt-voice-sheet,
.smt-cam-sheet {
    display: none !important;
    visibility: hidden !important;
    pointer-events: none !important;
}

.smt-dock button,
.ame-pos-page .ame-pos-status {
    flex-wrap: nowrap !important;
    white-space: nowrap;
}

body.ame-pos-terminal-page .ame-pos-term-bar,
body.ame-pos-terminal-page .ame-pos-term-radios,
body.ame-pos-terminal-page .ame-pos-term-actions,
body.ame-pos-terminal-page .ame-pos-heading,
body.ame-pos-terminal-page .ame-pos-term-price-radios,
body.ame-pos-terminal-page .ame-pos-radios,
body.ame-pos-terminal-page .ame-pos-term-action-row,
body.ame-pos-terminal-page .ame-pos-mode-extra {
    flex-wrap: nowrap !important;
}

body.ame-pos-terminal-page .ame-pos-term-top,
body.ame-pos-terminal-page .ame-pos-term-bar,
body.ame-pos-terminal-page .ame-pos-term-actions,
body.ame-pos-terminal-page .ame-pos-recent-wrap {
    overflow: visible !important;
}

/* POS terminal must span the full display — last stylesheet wins over device-fit. */
body.ame-pos-terminal-page #main-content,
body.ame-pos-terminal-page #main-content > .ame-pos-page,
body.ame-pos-terminal-page #main-content > .pc-wrap,
body.ame-pos-terminal-page #main-content > div[class*="-wrap"],
body.ame-pos-terminal-page #main-content > div[class$="-wrap"] {
    width: 100% !important;
    max-width: 100% !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
}
body.ame-pos-terminal-page #main-content {
    padding-left: 6px !important;
    padding-right: 6px !important;
}
body.ame-pos-terminal-page .ame-pos-grid,
body.ame-pos-terminal-page .pos-wrapper {
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) !important;
    width: 100% !important;
    max-width: 100% !important;
}

/* ৬. মিডিয়া কুয়েরিতে অতিরিক্ত কড়াকড়ি না করে, বাকি কাজ
      responsive-fix.js-কে দেওয়া হয়েছে — এটি রানটাইমে প্রতিটি
      পেজের DOM দেখে ঠিক কোন এলিমেন্ট স্ক্রিনের চেয়ে চওড়া তা
      নির্ভুলভাবে খুঁজে বের করে সংশোধন করে (CSS দিয়ে অনুমান না করে) */

/* ৭. যেসব কনটেইনারে আমাদের JS স্বয়ংক্রিয়ভাবে স্ক্রল-র‍্যাপার বসায়
      (দেখুন responsive-fix.js), সেগুলোর জন্য প্রয়োজনীয় স্টাইল */
.ame-auto-scroll-wrap {
    width: 100% !important;
    max-width: 100% !important;
    overflow-x: auto !important;
    -webkit-overflow-scrolling: touch !important;
}

.ame-date-apply,
.ame-auto-pager button {
    min-height: 38px !important;
    padding: 7px 14px !important;
    border: 1px solid #003f8f !important;
    border-radius: 8px !important;
    background: #ffffff !important;
    color: #003f8f !important;
    font-weight: 800 !important;
    cursor: pointer;
}
.ame-date-apply {
    margin: 6px !important;
}
.ame-auto-pager {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 10px !important;
    width: 100% !important;
    margin: 10px 0 14px !important;
    padding: 8px !important;
    border: 1px solid #e2e8f0 !important;
    border-radius: 9px !important;
    background: #ffffff !important;
}
.ame-auto-pager span {
    color: #334155 !important;
    font-size: 12px !important;
    font-weight: 800 !important;
    text-align: center !important;
}
.ame-auto-pager button:disabled {
    opacity: .42 !important;
    cursor: default !important;
}

.card,
.table,
body > div {
    max-width: 100% !important;
    box-sizing: border-box !important;
}

@media (max-width: 760px) {
    body {
        padding-left: 10px !important;
        padding-right: 10px !important;
    }

    table.ame-stack-table,
    table.ame-stack-table > thead,
    table.ame-stack-table > tbody,
    table.ame-stack-table > tfoot {
        display: block !important;
        width: 100% !important;
    }
    table.ame-stack-table > thead {
        display: none !important;
    }
    table.ame-stack-table > tbody > tr,
    table.ame-stack-table > tfoot > tr {
        display: block !important;
        width: 100% !important;
        margin: 0 0 12px !important;
        padding: 10px !important;
        border: 1px solid #e2e8f0 !important;
        border-radius: 12px !important;
        background: #fff !important;
        box-sizing: border-box !important;
    }
    table.ame-stack-table > tbody > tr > td,
    table.ame-stack-table > tfoot > tr > td {
        display: flex !important;
        align-items: flex-start !important;
        justify-content: space-between !important;
        gap: 10px !important;
        width: 100% !important;
        padding: 8px 2px !important;
        border: 0 !important;
        border-bottom: 1px solid #f1f5f9 !important;
        white-space: normal !important;
        box-sizing: border-box !important;
    }
    table.ame-stack-table > tbody > tr > td:last-child,
    table.ame-stack-table > tfoot > tr > td:last-child {
        border-bottom: 0 !important;
    }
    table.ame-stack-table > tbody > tr > td::before,
    table.ame-stack-table > tfoot > tr > td::before {
        content: attr(data-label);
        font-weight: 800;
        color: #0B1E4D;
        flex: 0 0 38%;
        max-width: 42%;
    }
    table.ame-stack-table.ame-stack-table {
        overflow: visible !important;
    }
    .ame-auto-scroll-wrap:has(table.ame-stack-table) {
        overflow: visible !important;
    }
}

body.ame-pos-terminal-page,
body.ame-pos-terminal-page *:not(svg):not(path),
body.ame-purchase-terminal-page,
body.ame-purchase-terminal-page *:not(svg):not(path) {
    font-family: "Segoe UI", "Noto Sans Bengali", "Kalpurush", sans-serif !important;
    font-weight: 600 !important;
}

body.ame-pos-terminal-page .ame-pos-term-hist,
body.ame-pos-terminal-page .ame-pos-recent-select,
body.ame-pos-terminal-page .ame-pos-term-radios,
body.ame-pos-terminal-page .ame-pos-term-bar {
    flex-wrap: nowrap !important;
}

body.ame-pos-terminal-page .ame-pos-table-wrap,
body.ame-purchase-terminal-page .ame-pos-table-wrap {
    overflow-x: auto !important;
    max-width: 100% !important;
}
/* কার্টের খালি জায়গা। আগে ১০৫০px জোর করা ছিল, তাই পেমেন্ট ও বিক্রয় বাটন
   অনেক নিচে চলে যেত। এখন একই উচ্চতায় থাকে — পণ্য বাড়লে ভিতরে স্ক্রল। */
body.ame-pos-terminal-page .ame-pos-term-cart .ame-pos-table-wrap {
    min-height: 280px !important;
    max-height: min(46vh, 480px) !important;
}
@media (max-width: 760px) {
    body.ame-pos-terminal-page .ame-pos-term-cart .ame-pos-table-wrap {
        min-height: 180px !important;
        max-height: min(34vh, 280px) !important;
    }
}
body.ame-purchase-terminal-page .ame-pos-table-wrap table {
    max-width: none !important;
}
body.ame-pos-terminal-page .ame-pos-table-wrap table.table-pos {
    max-width: 100% !important;
}

body.ame-pos-terminal-page .ame-pos-title-line {
    display: block !important;
    width: 100% !important;
    max-width: 100% !important;
    white-space: normal !important;
    overflow: hidden !important;
    overflow-wrap: break-word !important;
    word-break: break-word !important;
}
body.ame-pos-terminal-page .ame-sale-desk .ame-pos-title-line,
body.ame-pos-terminal-page .ame-sale-desk .ame-pos-heading,
body.ame-pos-terminal-page .ame-sale-desk .ame-pos-colorbar {
    display: none !important;
    height: 0 !important;
    max-height: 0 !important;
    margin: 0 !important;
    padding: 0 !important;
    border: 0 !important;
    overflow: hidden !important;
}

body.ame-pos-terminal-page .ame-pos-title-live {
    display: inline-block !important;
    max-width: 100% !important;
}

/* ৮. Dynamic viewport ও সব ধরনের content wrapper-এর shared auto-fit layer */
body,
#main-content {
    min-height: calc(var(--ame-vh, 1vh) * 100);
}

#main-content > *:not(script):not(style),
[class*="-wrap"],
[class*="-shell"],
[class*="-container"],
[class*="-grid"] > *,
[class*=" grid"] > *,
fieldset,
form {
    min-width: 0 !important;
}

#main-content > div[class*="-wrap"],
#main-content > div[class$="-wrap"],
#main-content > section[class*="-wrap"],
#main-content > main,
#main-content > .card {
    width: calc(100% - 28px) !important;
    max-width: 1900px !important;
    margin-right: auto !important;
    margin-left: auto !important;
}

pre,
code,
.code,
[class*="json"],
[class*="log-view"] {
    max-width: 100% !important;
    overflow-x: auto !important;
    overflow-wrap: normal;
    white-space: pre-wrap;
}

dialog {
    width: min(var(--ame-dialog-width, 720px), calc(100vw - 24px)) !important;
    max-width: calc(100vw - 24px) !important;
    max-height: calc(var(--ame-vh, 1vh) * 92) !important;
    overflow: auto !important;
    background-color: #ffffff !important;
}

/* সব পেজের full-screen popup overlay: viewport-এর ঠিক মাঝখানে, content-এর ভিতরে scroll। */
.ame-centered-overlay {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    padding: max(8px, env(safe-area-inset-top, 0px))
             max(8px, env(safe-area-inset-right, 0px))
             max(8px, env(safe-area-inset-bottom, 0px))
             max(8px, env(safe-area-inset-left, 0px)) !important;
    overflow: auto !important;
}
.ame-centered-overlay > .ame-centered-dialog,
.ame-centered-dialog {
    position: relative !important;
    inset: auto !important;
    margin: auto !important;
    transform: none !important;
    width: min(var(--ame-dialog-width, 720px), calc(100vw - 24px)) !important;
    max-width: calc(100vw - 24px) !important;
    max-height: calc(var(--ame-vh, 1vh) * 92) !important;
    overflow: auto !important;
    background-color: #ffffff !important;
}
dialog.ame-centered-native-dialog[open] {
    position: fixed !important;
    inset: 50% auto auto 50% !important;
    margin: 0 !important;
    transform: translate(-50%, -50%) !important;
    max-height: calc(var(--ame-vh, 1vh) * 92) !important;
    overflow: auto !important;
}

canvas {
    max-width: 100% !important;
}

iframe,
video {
    width: 100%;
}

h1, h2, h3, h4,
p, a, span, td, th, label {
    overflow-wrap: break-word;
}

/* Dashboard/card grids scale smoothly instead of jumping between fixed widths. */
.ame-home-kpis,
.pd-summary-grid,
.pd-kpi-grid,
.rd-kpi-grid,
.fd-kpi-grid,
.pf-kpi-grid,
.hd-grid,
.rnt-grid,
.fam-kpis,
.ws-grid {
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 150px), 1fr)) !important;
}

.pd-module-grid,
.pd-nav-grid,
.rd-nav-grid,
.ame-quick-actions {
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 180px), 1fr)) !important;
}

@media (min-width: 1800px) {
    #main-content > div[class*="-wrap"],
    #main-content > div[class$="-wrap"],
    #main-content > section[class*="-wrap"],
    #main-content > main,
    #main-content > .card {
        width: calc(100% - 40px) !important;
        max-width: 2100px !important;
    }
}

@media (max-width: 1099px) {
    #main-content > div[class*="-wrap"],
    #main-content > div[class$="-wrap"],
    #main-content > section[class*="-wrap"],
    #main-content > main,
    #main-content > .card {
        width: calc(100% - 16px) !important;
    }
}

@media (max-width: 760px) {
    #main-content > div[class*="-wrap"],
    #main-content > div[class$="-wrap"],
    #main-content > section[class*="-wrap"],
    #main-content > main,
    #main-content > .card {
        width: 100% !important;
        max-width: 100% !important;
    }

    h1 { font-size: clamp(21px, 7vw, 30px) !important; }
    h2 { font-size: clamp(18px, 5.8vw, 25px) !important; }
    h3 { font-size: clamp(16px, 5vw, 21px) !important; }

    .ame-page-nav,
    .ame-home-dashboard,
    body.ame-if-dash .if-dash-welcome {
        width: 100% !important;
    }
}

/* POS/purchase terminals and print documents keep their purpose-built sizing. */
body.ame-pos-terminal-page #main-content > *,
body.ame-purchase-terminal-page #main-content > * {
    width: 100% !important;
    max-width: 100% !important;
}

body.ame-pos-terminal-page .ame-pos-term-cart .ame-pos-table-wrap {
    overflow-x: auto !important;
}
body.ame-pos-terminal-page .ame-pos-table-wrap table.table-pos {
    min-width: 0 !important;
    width: 100% !important;
    max-width: 100% !important;
    table-layout: fixed !important;
}

@media print {
    .ame-auto-pager,
    .ame-date-apply {
        display: none !important;
    }
    body,
    #main-content,
    #main-content > * {
        width: 100% !important;
        max-width: none !important;
        min-height: 0 !important;
        margin: 0 !important;
        padding: 0 !important;
        overflow: visible !important;
    }
}
/* Sales invoice PDF / print: keep logo and text large on A4. */
body:has(#memo-container),
body:has(.invoice-box) {
    font-size: 16px !important;
}
#memo-container,
.memo-wrapper,
.invoice-box {
    max-width: 794px !important;
    width: 100% !important;
    box-sizing: border-box !important;
}
img.ame-print-logo,
.memo-logo {
    height: 96px !important;
    max-width: 280px !important;
    width: auto !important;
}
.memo-shop-name,
.invoice-box .title {
    font-size: 28px !important;
    line-height: 1.25 !important;
}
.memo-shop-desc,
.memo-shop-phone {
    font-size: 14px !important;
}
.memo-meta-grid,
.memo-table,
.main-table,
.memo-sum-row {
    font-size: 15px !important;
}
.memo-meta-item .lbl {
    font-size: 12px !important;
}
.memo-table th,
.memo-table td,
.main-table th,
.main-table td {
    font-size: 15px !important;
}
@media print {
    #memo-container,
    .memo-wrapper,
    .invoice-box {
        max-width: 100% !important;
        width: 100% !important;
        box-shadow: none !important;
        border: none !important;
    }
    img.ame-print-logo {
        height: 96px !important;
    }
}
/* end invoice-print-fix */