/* ============================================================
   RSK ERP – Dedicated Mobile App UI (<992px only)
   Desktop (>=992px) completely unchanged.
   App-like: cards, bottom sheets, sticky actions, safe-area.
   Brand: blue/indigo primary matching existing ERP (#4f46e5).
   ============================================================ */

/* Hidden on desktop – only rendered on mobile */
.m-only-mobile { display: none !important; }

:root {
  --m-primary: #4f46e5;
  --m-primary-dark: #4338ca;
  --m-primary-light: #eef2ff;
  --m-accent: #3b82f6;
  --m-bg: #f1f5f9;
  --m-card: #ffffff;
  --m-text: #0f172a;
  --m-muted: #64748b;
  --m-border: #e2e8f0;
  --m-success: #10b981;
  --m-danger: #ef4444;
  --m-warning: #f59e0b;
  --m-radius: 14px;
  --m-radius-sm: 10px;
  --m-shadow: 0 2px 12px rgba(15,23,42,.07);
  --m-font-bn: "Hind Siliguri","Noto Sans Bengali","SolaimanLipi","Nikosh",-apple-system,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif;
}

@media (max-width: 991.98px) {

  /* ---------- base ---------- */
  html { -webkit-text-size-adjust: 100%; }
  body {
    background: var(--m-bg) !important;
    font-family: var(--m-font-bn), "Inter", -apple-system, "Segoe UI", Roboto, Arial, sans-serif !important;
    font-size: 14px !important;
    color: var(--m-text);
    overflow-x: hidden !important;
    padding-bottom: env(safe-area-inset-bottom) !important;
  }
  .m-only-mobile { display: block !important; }
  .m-only-mobile.m-inline { display: inline !important; }
  .m-only-mobile.m-flex { display: flex !important; }

  .content-wrapper, .content, .content-header, section.content {
    overflow-x: hidden !important;
    max-width: 100vw !important;
  }
  .content-wrapper { background: var(--m-bg) !important; padding-bottom: 150px !important; }
  img { max-width: 100%; height: auto; }

  /* Typography scale */
  .m-app-title { font-size: 18px !important; font-weight: 700 !important; line-height: 1.25 !important; margin: 0 !important; }
  .m-section-title { font-size: 15px !important; font-weight: 700 !important; color: var(--m-text) !important; margin: 0 !important; }
  .m-field label, .m-label { font-size: 12px !important; font-weight: 600 !important; color: #475569 !important; margin-bottom: 5px !important; display: block !important; }
  .m-muted-text { font-size: 12px !important; color: var(--m-muted) !important; }
  .m-value-text { font-size: 15px !important; color: var(--m-text) !important; }

  /* ---------- mobile app header (Add Sale etc.) ---------- */
  .m-app-header {
    position: sticky; top: 0; z-index: 1030;
    display: flex; align-items: center; gap: 10px;
    background: #fff;
    padding: 10px 12px;
    padding-top: calc(10px + env(safe-area-inset-top));
    border-bottom: 1px solid var(--m-border);
    box-shadow: 0 1px 8px rgba(15,23,42,.06);
    margin: -10px -10px 10px -10px;
  }
  .m-app-header .m-back {
    width: 40px; height: 40px; min-width: 40px;
    border-radius: 12px; border: 1px solid var(--m-border);
    background: #f8fafc; color: var(--m-text);
    display: flex; align-items: center; justify-content: center;
    font-size: 18px;
  }
  .m-app-header .m-titles { flex: 1; min-width: 0; }
  .m-app-header .m-titles h2 { font-size: 18px !important; font-weight: 700 !important; margin: 0 !important; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  .m-app-header .m-titles p { font-size: 12px !important; color: var(--m-muted) !important; margin: 1px 0 0 !important; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  .m-app-header .m-save-btn {
    min-height: 44px !important; min-width: 76px !important;
    border-radius: 12px !important; font-size: 14px !important; font-weight: 700 !important;
    background: linear-gradient(135deg, var(--m-primary), var(--m-accent)) !important;
    border: none !important; color: #fff !important; padding: 10px 16px !important;
    box-shadow: 0 4px 12px rgba(79,70,229,.35) !important;
  }

  /* compact invoice strip under header */
  .m-invoice-strip {
    background: #fff; border: 1px solid var(--m-border); border-radius: var(--m-radius);
    box-shadow: var(--m-shadow);
    padding: 12px 14px; margin-bottom: 12px;
    display: flex; flex-direction: column; gap: 4px;
  }
  .m-invoice-strip .m-row { display: flex; justify-content: space-between; gap: 10px; font-size: 13px !important; }
  .m-invoice-strip .m-row .k { color: var(--m-muted); font-weight: 500; }
  .m-invoice-strip .m-row .v { color: var(--m-text); font-weight: 600; text-align: right; word-break: break-word; }
  .m-invoice-strip .m-cust { font-size: 15px !important; font-weight: 700 !important; }

  /* ---------- sections / cards ---------- */
  .m-section, .m-card {
    background: var(--m-card) !important;
    border: 1px solid var(--m-border) !important;
    border-radius: var(--m-radius) !important;
    box-shadow: var(--m-shadow) !important;
    padding: 14px !important;
    margin-bottom: 12px !important;
    overflow: hidden !important;
  }
  .m-section-head { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin-bottom: 10px; }
  .m-section-head .m-count {
    font-size: 12px; font-weight: 700; color: var(--m-primary);
    background: var(--m-primary-light); border-radius: 20px; padding: 2px 10px;
  }
  .m-section-toggle { width: 100%; background: none; border: none; display: flex; align-items: center; justify-content: space-between; padding: 2px 0; min-height: 44px; }
  .m-section-toggle i { color: var(--m-muted); transition: transform .2s; }
  .m-section.collapsed .m-section-body { display: none; }
  .m-section.collapsed .m-section-toggle i { transform: rotate(-90deg); }

  /* Transform desktop .box into mobile card (additive, keeps logic) */
  form#add_sell_form .box, form#add_sell_form .box-solid,
  form#edit_sell_form .box, form#edit_sell_form .box-solid,
  section.content .box {
    border-radius: var(--m-radius) !important;
    border: 1px solid var(--m-border) !important;
    box-shadow: var(--m-shadow) !important;
    margin-bottom: 12px !important;
  }
  form#add_sell_form .box-body, form#edit_sell_form .box-body { padding: 14px !important; }

  /* ---------- fields ---------- */
  .m-field { margin-bottom: 12px !important; }
  .m-field:last-child { margin-bottom: 0 !important; }

  form#add_sell_form .form-group label,
  form#edit_sell_form .form-group label,
  .m-field label {
    font-size: 12px !important; font-weight: 600 !important; color: #475569 !important;
    margin-bottom: 5px !important;
  }
  form#add_sell_form .form-control,
  form#edit_sell_form .form-control,
  .m-input, .m-field .form-control {
    min-height: 46px !important;
    font-size: 15px !important;
    border-radius: 11px !important;
    border: 1.5px solid var(--m-border) !important;
    padding: 10px 13px !important;
    background: #fff !important;
    width: 100% !important;
    box-shadow: none !important;
  }
  form#add_sell_form .form-control:focus,
  form#edit_sell_form .form-control:focus,
  .m-input:focus {
    border-color: var(--m-primary) !important;
    box-shadow: 0 0 0 3px rgba(79,70,229,.14) !important;
    outline: none !important;
  }
  form#add_sell_form .input-group,
  form#edit_sell_form .input-group { display: flex !important; gap: 8px !important; }
  form#add_sell_form .input-group-addon,
  form#edit_sell_form .input-group-addon {
    min-width: 44px !important; min-height: 46px !important;
    display: flex !important; align-items: center !important; justify-content: center !important;
    border-radius: 11px !important; background: #f8fafc !important; border: 1.5px solid var(--m-border) !important;
  }
  form#add_sell_form .input-group .form-control,
  form#edit_sell_form .input-group .form-control { flex: 1 !important; }
  form#add_sell_form .input-group-btn .btn,
  form#edit_sell_form .input-group-btn .btn {
    min-width: 46px !important; min-height: 46px !important; border-radius: 11px !important;
  }
  /* select2 mobile */
  .select2-container--default .select2-selection--single { min-height: 46px !important; border-radius: 11px !important; border: 1.5px solid var(--m-border) !important; }
  .select2-container--default .select2-selection--single .select2-selection__rendered { line-height: 44px !important; font-size: 15px !important; }
  .select2-container--default .select2-selection--single .select2-selection__arrow { height: 44px !important; }

  /* ---------- product search CTA ---------- */
  .m-add-product-btn {
    width: 100% !important; min-height: 50px !important;
    border-radius: 13px !important; font-size: 15px !important; font-weight: 700 !important;
    background: var(--m-primary-light) !important; color: var(--m-primary) !important;
    border: 1.5px dashed var(--m-primary) !important;
    display: flex !important; align-items: center !important; justify-content: center !important; gap: 8px !important;
  }
  .m-add-product-btn:active { transform: scale(.98); }

  /* hide desktop product search row internals on mobile sell form, show mobile CTA */
  form#add_sell_form .pos_product_div .table-responsive table#pos_table,
  form#edit_sell_form .pos_product_div .table-responsive table#pos_table { position: absolute !important; left: -9999px !important; top: 0 !important; width: 1px !important; height: 1px !important; overflow: hidden !important; visibility: hidden !important; }

  /* ---------- product cards ---------- */
  .m-product-list { display: flex; flex-direction: column; gap: 10px; }
  .m-product-card {
    background: #fff; border: 1px solid var(--m-border); border-radius: var(--m-radius);
    box-shadow: var(--m-shadow); padding: 13px 14px;
  }
  .m-product-card .m-p-name { font-size: 15px !important; font-weight: 700 !important; color: var(--m-text); line-height: 1.3; }
  .m-product-card .m-p-code { font-size: 12px !important; color: var(--m-muted); margin-top: 2px; }
  .m-product-card .m-p-grid { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 8px; margin-top: 10px; }
  .m-product-card .m-p-cell { background: #f8fafc; border: 1px solid #f1f5f9; border-radius: 10px; padding: 7px 8px; text-align: center; }
  .m-product-card .m-p-cell .k { font-size: 11px !important; color: var(--m-muted); font-weight: 600; text-transform: uppercase; letter-spacing: .3px; }
  .m-product-card .m-p-cell .v { font-size: 14px !important; font-weight: 700 !important; color: var(--m-text); margin-top: 1px; }
  .m-product-card .m-p-amount { display: flex; justify-content: space-between; align-items: center; margin-top: 10px; padding-top: 10px; border-top: 1px dashed var(--m-border); }
  .m-product-card .m-p-amount .k { font-size: 13px; color: var(--m-muted); font-weight: 600; }
  .m-product-card .m-p-amount .v { font-size: 16px !important; font-weight: 800 !important; color: var(--m-primary-dark); }
  .m-product-card .m-p-actions { display: flex; gap: 8px; margin-top: 10px; }
  .m-product-card .m-p-actions .btn { flex: 1; min-height: 44px !important; border-radius: 10px !important; font-size: 14px !important; font-weight: 600 !important; }
  .m-empty-products { text-align: center; padding: 26px 16px; color: var(--m-muted); background: #fff; border: 1.5px dashed var(--m-border); border-radius: var(--m-radius); }
  .m-empty-products i { font-size: 30px; display: block; margin-bottom: 8px; opacity: .5; }
  .m-empty-products p { font-size: 13px; margin: 0; font-weight: 500; }

  /* ---------- summary card ---------- */
  .m-summary-card { background: #fff; border: 1px solid var(--m-border); border-radius: var(--m-radius); box-shadow: var(--m-shadow); padding: 14px; }
  .m-summary-card h4 { font-size: 15px !important; font-weight: 700 !important; margin: 0 0 10px !important; }
  .m-summary-row { display: flex; justify-content: space-between; align-items: center; font-size: 13px !important; padding: 4px 0; }
  .m-summary-row .k { color: var(--m-muted); font-weight: 500; }
  .m-summary-row .v { font-weight: 600; color: var(--m-text); }
  .m-summary-row.total { border-top: 1px solid var(--m-border); margin-top: 8px; padding-top: 10px; }
  .m-summary-row.total .k { font-size: 14px; font-weight: 700; color: var(--m-text); }
  .m-summary-row.total .v { font-size: 18px !important; font-weight: 800 !important; color: var(--m-primary-dark); }
  .m-summary-row .neg { color: var(--m-success); }

  /* ---------- sticky action bar ---------- */
  .m-sticky-actions {
    position: fixed !important; left: 0 !important; right: 0 !important;
    bottom: 64px !important; z-index: 1035 !important;
    background: rgba(255,255,255,.97) !important;
    backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px);
    border-top: 1px solid var(--m-border) !important;
    box-shadow: 0 -4px 20px rgba(15,23,42,.10) !important;
    padding: 10px 12px calc(10px + env(safe-area-inset-bottom)) !important;
    display: flex !important; gap: 10px !important;
  }
  .m-sticky-actions .btn { flex: 1 !important; min-height: 48px !important; border-radius: 12px !important; font-size: 14px !important; font-weight: 700 !important; }
  .m-sticky-actions .m-mini-total { flex: 1.2; display: flex; flex-direction: column; justify-content: center; }
  .m-sticky-actions .m-mini-total .k { font-size: 11px; color: var(--m-muted); font-weight: 600; }
  .m-sticky-actions .m-mini-total .v { font-size: 16px; font-weight: 800; color: var(--m-primary-dark); }

  /* ---------- bottom sheet system ---------- */
  .m-sheet-overlay {
    position: fixed; inset: 0; z-index: 9600;
    background: rgba(15,23,42,0); visibility: hidden;
    transition: background .28s ease, visibility .28s ease;
  }
  .m-sheet-overlay.active { visibility: visible; background: rgba(15,23,42,.52); }
  .m-sheet {
    position: fixed; left: 0; right: 0; bottom: 0; z-index: 9601;
    background: #fff; border-radius: 22px 22px 0 0;
    transform: translateY(105%); transition: transform .32s cubic-bezier(.32,.72,0,1);
    max-height: 88vh; display: flex; flex-direction: column; overflow: hidden;
    box-shadow: 0 -12px 44px rgba(0,0,0,.18);
    padding-bottom: env(safe-area-inset-bottom);
  }
  .m-sheet-overlay.active .m-sheet { transform: translateY(0); }
  .m-sheet.tall { max-height: 90vh; }
  .m-drag { display: flex; justify-content: center; padding: 10px 0 4px; flex-shrink: 0; touch-action: none; }
  .m-drag::after { content: ""; width: 40px; height: 4px; border-radius: 4px; background: #cbd5e1; }
  .m-sheet-head { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 6px 16px 12px; border-bottom: 1px solid #f1f5f9; flex-shrink: 0; }
  .m-sheet-head h4 { font-size: 16px !important; font-weight: 700 !important; margin: 0 !important; }
  .m-sheet-head p { font-size: 12px !important; color: var(--m-muted) !important; margin: 2px 0 0 !important; }
  .m-sheet-close { width: 36px; height: 36px; min-width: 36px; border-radius: 50%; border: none; background: #f1f5f9; color: #475569; font-size: 18px; display: flex; align-items: center; justify-content: center; }
  .m-sheet-body { flex: 1; overflow-y: auto; -webkit-overflow-scrolling: touch; padding: 14px 16px; overscroll-behavior: contain; }
  .m-sheet-foot { flex-shrink: 0; display: flex; gap: 10px; padding: 12px 16px calc(12px + env(safe-area-inset-bottom)); border-top: 1px solid #f1f5f9; background: #fff; }
  .m-sheet-foot .btn { flex: 1; min-height: 48px !important; border-radius: 12px !important; font-size: 14px !important; font-weight: 700 !important; }

  /* product result cards in sheet */
  .m-search-input { display: flex; align-items: center; gap: 8px; background: #f1f5f9; border-radius: 12px; padding: 0 14px; height: 48px; margin-bottom: 12px; }
  .m-search-input i { color: #94a3b8; font-size: 17px; }
  .m-search-input input { flex: 1; border: none; background: none; outline: none; font-size: 15px !important; color: var(--m-text); height: 100%; }
  .m-result-card { display: flex; gap: 10px; align-items: center; border: 1px solid var(--m-border); border-radius: 12px; padding: 11px 12px; margin-bottom: 8px; background: #fff; }
  .m-result-card .m-r-info { flex: 1; min-width: 0; }
  .m-result-card .m-r-name { font-size: 14px !important; font-weight: 700 !important; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  .m-result-card .m-r-meta { font-size: 12px !important; color: var(--m-muted); margin-top: 2px; }
  .m-result-card .m-r-price { font-size: 14px !important; font-weight: 800 !important; color: var(--m-primary-dark); }
  .m-result-card .m-r-add { min-width: 64px; min-height: 44px; border-radius: 10px; border: none; background: var(--m-primary); color: #fff; font-weight: 700; font-size: 14px; padding: 8px 12px; }
  .m-qty-stepper { display: flex; align-items: center; gap: 12px; justify-content: center; background: #f8fafc; border: 1.5px solid var(--m-border); border-radius: 12px; padding: 6px; }
  .m-qty-stepper button { width: 48px; height: 48px; min-width: 48px; border-radius: 10px; border: none; background: #fff; font-size: 22px; font-weight: 700; color: var(--m-primary); box-shadow: var(--m-shadow); }
  .m-qty-stepper .m-qty-val { font-size: 20px !important; font-weight: 800 !important; min-width: 60px; text-align: center; }

  /* ---------- dialog + fullscreen + action sheet ---------- */
  .m-dialog-overlay { position: fixed; inset: 0; z-index: 9650; background: rgba(15,23,42,.52); display: none; align-items: center; justify-content: center; padding: 20px; }
  .m-dialog-overlay.active { display: flex; }
  .m-dialog { background: #fff; border-radius: 20px; width: 100%; max-width: 380px; padding: 20px 18px calc(18px + env(safe-area-inset-bottom)); box-shadow: 0 20px 60px rgba(0,0,0,.25); }
  .m-dialog h4 { font-size: 16px !important; font-weight: 700 !important; margin: 0 0 8px !important; text-align: center; }
  .m-dialog p { font-size: 14px !important; color: var(--m-muted); text-align: center; margin: 0 0 16px !important; }
  .m-dialog .m-d-actions { display: flex; gap: 10px; }
  .m-dialog .m-d-actions .btn { flex: 1; min-height: 48px !important; border-radius: 12px !important; font-weight: 700 !important; }

  .m-fullmodal { position: fixed; inset: 0; z-index: 9700; background: #fff; transform: translateY(100%); transition: transform .32s cubic-bezier(.32,.72,0,1); display: flex; flex-direction: column; }
  .m-fullmodal.active { transform: translateY(0); }
  .m-fullmodal .m-f-head { display: flex; align-items: center; gap: 10px; padding: 12px 14px; padding-top: calc(12px + env(safe-area-inset-top)); border-bottom: 1px solid var(--m-border); }
  .m-fullmodal .m-f-body { flex: 1; overflow-y: auto; padding: 14px; -webkit-overflow-scrolling: touch; }
  .m-fullmodal .m-f-foot { padding: 12px 14px calc(12px + env(safe-area-inset-bottom)); border-top: 1px solid var(--m-border); display: flex; gap: 10px; }
  .m-fullmodal .m-f-foot .btn { flex: 1; min-height: 50px !important; border-radius: 12px !important; font-weight: 700 !important; }

  .m-action-list { display: flex; flex-direction: column; }
  .m-action-list button, .m-action-list a { display: flex; align-items: center; gap: 12px; width: 100%; text-align: left; background: none; border: none; border-bottom: 1px solid #f1f5f9; padding: 14px 4px; font-size: 15px !important; font-weight: 600 !important; color: var(--m-text); min-height: 52px; text-decoration: none !important; }
  .m-action-list button:last-child, .m-action-list a:last-child { border-bottom: none; }
  .m-action-list .m-a-icon { width: 40px; height: 40px; min-width: 40px; border-radius: 12px; display: flex; align-items: center; justify-content: center; font-size: 18px; }
  .m-action-list .danger { color: var(--m-danger); }

  /* ---------- generic tables -> cards ---------- */
  .m-record-list { display: flex; flex-direction: column; gap: 10px; }
  .m-record-card { background: #fff; border: 1px solid var(--m-border); border-radius: var(--m-radius); box-shadow: var(--m-shadow); padding: 13px 14px; }
  .m-record-card .m-rc-title { font-size: 14px !important; font-weight: 700 !important; padding-bottom: 8px; border-bottom: 1px solid #f1f5f9; margin-bottom: 8px; word-break: break-word; }
  .m-record-card .m-rc-row { display: flex; justify-content: space-between; gap: 10px; font-size: 12px !important; padding: 3px 0; }
  .m-record-card .m-rc-row .k { color: var(--m-muted); font-weight: 500; flex-shrink: 0; }
  .m-record-card .m-rc-row .v { font-weight: 600; text-align: right; word-break: break-word; }
  .m-record-card .m-rc-actions { display: flex; justify-content: flex-end; flex-wrap: wrap; gap: 6px; border-top: 1px solid #f1f5f9; margin-top: 8px; padding-top: 8px; }

  /* generic form polish: any content form becomes app-like */
  section.content form .box-footer, section.content form .modal-footer { border-radius: 0 0 var(--m-radius) var(--m-radius) !important; }
  section.content .btn { min-height: 44px !important; }
  .table-responsive { border-radius: 12px !important; }
  .modal-dialog { margin: 10px !important; max-width: calc(100vw - 20px) !important; }
  .modal-content { border-radius: 18px !important; }

  /* ---------- bottom nav polish (existing IDs kept) ---------- */
  .mobile-bottom-nav-wrapper {
    height: calc(64px + env(safe-area-inset-bottom)) !important;
    padding-bottom: env(safe-area-inset-bottom) !important;
    background: rgba(255,255,255,.97) !important;
  }
  .mobile-bottom-nav { padding: 0 6px !important; }
  .mobile-bottom-nav .nav-item { font-size: 10px !important; font-weight: 700 !important; letter-spacing: .1px; min-height: 56px; border-radius: 12px; }
  .mobile-bottom-nav .nav-item i { font-size: 21px !important; margin-bottom: 2px !important; }
  .mobile-bottom-nav .nav-item.active { color: var(--m-primary) !important; }
  .mobile-bottom-nav .nav-item.active::after {
    content: ""; position: absolute; bottom: 4px; width: 22px; height: 3px; border-radius: 3px; background: var(--m-primary);
  }
  .nav-fab-btn { width: 54px !important; height: 54px !important; font-size: 26px !important; top: -20px !important; }
  .quick-actions-grid { grid-template-columns: repeat(4, 1fr) !important; gap: 14px 8px !important; }
  .action-card { font-size: 11px !important; }
  .action-icon { width: 54px !important; height: 54px !important; border-radius: 17px !important; font-size: 22px !important; }

  /* more menu categories */
  .m-more-cat { margin-bottom: 14px; }
  .m-more-cat h5 { font-size: 12px !important; font-weight: 800 !important; text-transform: uppercase; letter-spacing: .6px; color: var(--m-muted); margin: 0 0 8px 2px !important; }
  .m-more-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; }
  .m-more-item { display: flex; flex-direction: column; align-items: center; gap: 6px; background: #fff; border: 1px solid var(--m-border); border-radius: 13px; padding: 12px 6px; text-decoration: none !important; color: var(--m-text); font-size: 11px !important; font-weight: 600 !important; text-align: center; min-height: 84px; justify-content: center; }
  .m-more-item i { font-size: 22px; }

  /* dashboard: tighten huge padding from legacy */
  .mobile-dashboard-wrapper { padding: 12px 0 60px !important; }

  /* keyboard: keep focused field visible */
  .m-sheet-body, .form-sheet-body { scroll-padding-bottom: 220px; }
  input, select, textarea { scroll-margin-bottom: 160px; }

  /* DataTables mobile: full-width search */
  .dataTables_wrapper .dataTables_filter input { min-height: 46px !important; border-radius: 11px !important; font-size: 15px !important; }

  /* hide desktop-only clutter inside sell form on phones */
  form#add_sell_form .help-block, form#edit_sell_form .help-block { font-size: 11px !important; }
  #toggle_additional_expense { min-height: 44px !important; width: 100% !important; margin-bottom: 8px; }
}