/* =========================================================
   Mobile-only overrides — desktop layout stays unchanged
   Breakpoints match theme: 991.98 / 767.98 / 575.98
   ========================================================= */

/* ----- Tablet & phone: shell / sidebar / content width ----- */
@media only screen and (max-width: 991.98px) {
  .page-wrapper.compact-wrapper .page-header .header-wrapper .header-logo-wrapper {
    display: -webkit-box !important;
    display: -ms-flexbox !important;
    display: flex !important;
    -webkit-box-align: center;
        -ms-flex-align: center;
            align-items: center;
    gap: 8px;
  }

  .page-wrapper.compact-wrapper .page-header .header-wrapper .header-logo-wrapper .logo-wrapper {
    display: block;
  }

  .page-wrapper.compact-wrapper .page-header .header-wrapper .header-logo-wrapper .toggle-sidebar {
    display: block;
    cursor: pointer;
    margin-right: 10px;
    padding-right: 10px;
    border-right: 1px solid #ddd;
  }

  .page-wrapper.compact-wrapper .page-body-wrapper .page-body {
    margin-left: 0 !important;
    margin-top: 70px !important;
    padding: 0 12px !important;
    width: 100% !important;
    max-width: 100%;
  }

  .page-wrapper.compact-wrapper .page-body-wrapper footer {
    margin-left: 0 !important;
    width: 100% !important;
  }

  .page-wrapper .page-body-wrapper .page-title {
    padding: 8px 12px !important;
    margin: 0 0 8px !important;
  }

  .page-wrapper .page-header .header-wrapper {
    padding: 8px 12px !important;
  }

  .page-wrapper .page-header .header-wrapper .nav-right .profile-dropdown {
    left: auto !important;
    right: 0 !important;
    width: min(280px, calc(100vw - 24px)) !important;
  }

  /* ----- Mobile sidebar: default fully hidden; open only on hamburger ----- */
  .page-wrapper.compact-wrapper .page-header,
  .page-wrapper.compact-wrapper .page-header.close_icon {
    margin-left: 0 !important;
    width: 100% !important;
  }

  .page-wrapper.compact-wrapper .page-body-wrapper div.sidebar-wrapper,
  .page-wrapper.compact-wrapper .page-body-wrapper .sidebar-wrapper {
    position: fixed !important;
    top: 0 !important;
    bottom: 0 !important;
    height: 100% !important;
    width: 265px !important;
    min-width: 265px !important;
    max-width: 85vw !important;
    z-index: 1002 !important;
    -webkit-transition: left 0.25s ease, visibility 0.25s ease;
    transition: left 0.25s ease, visibility 0.25s ease;
    -webkit-transform: none !important;
            transform: none !important;
  }

  /* CLOSED (default / close_icon): completely off-screen — no icon-rail peek */
  .page-wrapper.compact-wrapper .page-body-wrapper div.sidebar-wrapper.close_icon,
  .page-wrapper.compact-wrapper .page-body-wrapper .sidebar-wrapper.close_icon,
  .page-wrapper.compact-wrapper .page-body-wrapper div.sidebar-wrapper.close_icon:hover,
  .page-wrapper.compact-wrapper .page-body-wrapper .sidebar-wrapper.close_icon:hover,
  .page-wrapper.compact-wrapper .page-body-wrapper div.sidebar-wrapper.close_icon:focus,
  .page-wrapper.compact-wrapper .page-body-wrapper div.sidebar-wrapper.close_icon:active {
    left: -300px !important;
    right: auto !important;
    width: 265px !important;
    min-width: 265px !important;
    max-width: 265px !important;
    -webkit-transform: none !important;
            transform: none !important;
    visibility: hidden !important;
    opacity: 0 !important;
    pointer-events: none !important;
    box-shadow: none !important;
    overflow: hidden !important;
  }

  .page-wrapper.compact-wrapper .page-body-wrapper div.sidebar-wrapper.close_icon .logo-icon-wrapper,
  .page-wrapper.compact-wrapper .page-body-wrapper div.sidebar-wrapper.close_icon:hover .logo-icon-wrapper {
    display: none !important;
  }

  .page-wrapper.compact-wrapper .page-body-wrapper div.sidebar-wrapper.close_icon .logo-wrapper,
  .page-wrapper.compact-wrapper .page-body-wrapper div.sidebar-wrapper.close_icon:hover .logo-wrapper {
    display: block !important;
  }

  /* OPEN (no close_icon): full drawer */
  .page-wrapper.compact-wrapper .page-body-wrapper div.sidebar-wrapper:not(.close_icon),
  .page-wrapper.compact-wrapper .page-body-wrapper .sidebar-wrapper:not(.close_icon) {
    left: 0 !important;
    visibility: visible !important;
    opacity: 1 !important;
    pointer-events: auto !important;
    -webkit-transform: none !important;
            transform: none !important;
  }

  body.mobile-sidebar-open {
    overflow: hidden;
  }

  /* Sidebar dimmer */
  .bg-overlay {
    position: fixed;
    inset: 0;
    z-index: 1001;
    background: rgba(0, 0, 0, 0.45);
  }

  .container-fluid {
    padding-left: 8px !important;
    padding-right: 8px !important;
  }

  .card {
    margin-bottom: 16px;
  }

  .card .card-body {
    padding: 12px !important;
  }

  /* Breadcrumb: avoid cramped half-columns */
  .page-title .row > [class*="col-"] {
    width: 100%;
    max-width: 100%;
    -webkit-box-flex: 0;
        -ms-flex: 0 0 100%;
            flex: 0 0 100%;
  }

  .page-title .breadcrumb {
    -webkit-box-pack: start !important;
        -ms-flex-pack: start !important;
            justify-content: flex-start !important;
    -ms-flex-wrap: wrap;
        flex-wrap: wrap;
    font-size: 12px;
  }
}

/* ----- Phone: forms, filters, tables, modals ----- */
@media only screen and (max-width: 767.98px) {
  /* Stack Bootstrap md columns used across masters & reports */
  .card-body .row > [class*="col-md-"],
  .card-body .row > [class*="col-lg-"],
  .modal-body .row > [class*="col-md-"],
  .modal-body .row > [class*="col-lg-"],
  form .row > [class*="col-md-"],
  form .row > [class*="col-lg-"] {
    -webkit-box-flex: 0;
        -ms-flex: 0 0 100%;
            flex: 0 0 100%;
    max-width: 100%;
    width: 100%;
    margin-bottom: 10px;
  }

  .card-body .row > [class*="col-md-"][style*="text-align:right"],
  .card-body .row > [class*="col-md-"][style*="text-align: right"],
  form .row > [class*="col-"][style*="text-align:right"],
  form .row > [class*="col-"][style*="text-align: right"] {
    text-align: left !important;
  }

  /* Action buttons full-width and touch-friendly */
  .card-body .btn,
  .modal-body .btn,
  form .btn {
    margin-bottom: 6px;
  }

  .card-body .btn:not(.btn-sm):not(.dropdown-toggle),
  form > .card .btn:not(.btn-sm) {
    min-height: 40px;
  }

  .card-body .btn-group,
  form .btn-group {
    display: -webkit-inline-box;
    display: -ms-inline-flexbox;
    display: inline-flex;
    width: auto;
    max-width: 100%;
  }

  .form-control,
  .form-select {
    max-width: 100%;
    font-size: 16px; /* prevents iOS zoom on focus */
  }

  /* Tables: master/grid — no horizontal scroll on phone.
     JS keeps only: Sr.No + Name + Action; details via Edit */
  .card .table-responsive,
  .card-body .table-responsive,
  .card .dataTables_wrapper {
    width: 100%;
    overflow-x: hidden !important;
  }

  /* Export / print report blocks may still scroll */
  #divExportBill,
  [id^="divExport"],
  #DixMstExport.force-scroll {
    overflow-x: auto !important;
    -webkit-overflow-scrolling: touch;
  }

  table.dataTable,
  .table.tblBackMan,
  .tblBackMan,
  .card table.display {
    min-width: 0 !important;
    width: 100% !important;
  }

  .tblBackMan th.mobile-grid-hide,
  .tblBackMan td.mobile-grid-hide,
  table.dataTable th.mobile-grid-hide,
  table.dataTable td.mobile-grid-hide,
  .card table.display th.mobile-grid-hide,
  .card table.display td.mobile-grid-hide {
    display: none !important;
  }

  .tblBackMan th,
  .tblBackMan td,
  table.dataTable th,
  table.dataTable td {
    white-space: normal !important;
    word-break: break-word;
  }

  .tblBackMan td .action,
  table.dataTable td .action {
    display: -webkit-inline-box;
    display: -ms-inline-flexbox;
    display: inline-flex;
    gap: 8px;
    -webkit-box-pack: center;
        -ms-flex-pack: center;
            justify-content: center;
    padding: 0;
    margin: 0;
  }

  .tblBackMan th.nodisp.mobile-grid-keep,
  .tblBackMan td.nodisp.mobile-grid-keep {
    display: table-cell !important;
  }

  .dataTables_wrapper .dataTables_length,
  .dataTables_wrapper .dataTables_filter,
  .dataTables_wrapper .dataTables_info {
    float: none !important;
    text-align: left !important;
    margin-left: 0 !important;
    width: 100%;
  }

  .dataTables_wrapper .dataTables_paginate {
    float: none !important;
    clear: both !important;
    display: block !important;
    width: 100% !important;
    margin: 12px 0 4px !important;
    padding-top: 8px !important;
    text-align: center !important;
  }

  .dataTables_wrapper .dataTables_paginate .pagination,
  .dataTables_wrapper .dataTables_paginate > span,
  .dataTables_wrapper .dataTables_paginate > ul {
    display: -webkit-inline-box !important;
    display: -ms-inline-flexbox !important;
    display: inline-flex !important;
    -webkit-box-pack: center;
        -ms-flex-pack: center;
            justify-content: center;
    -ms-flex-wrap: wrap;
        flex-wrap: wrap;
    float: none !important;
    margin: 0 auto !important;
  }

  .dataTables_wrapper .dataTables_filter input {
    width: calc(100% - 70px) !important;
    max-width: 100%;
    margin-left: 0 !important;
  }

  .dataTables_wrapper .dataTables_paginate .paginate_button {
    padding: 0.3em 0.6em !important;
    float: none !important;
  }

  /* Modals fill phone width (overrides inline 70%/80% widths) */
  .modal-dialog,
  .modal-dialog.modal-lg,
  .modal-dialog.modal-xl {
    max-width: calc(100% - 1rem) !important;
    width: calc(100% - 1rem) !important;
    margin: 0.5rem auto !important;
    --bs-modal-width: calc(100% - 1rem) !important;
  }

  .modal-content {
    max-height: calc(100vh - 1rem);
  }

  .modal-body {
    overflow-y: auto;
    max-height: calc(100vh - 140px);
  }

  .modal-header {
    -ms-flex-wrap: wrap;
        flex-wrap: wrap;
    gap: 8px;
  }

  .modal-header .btn {
    margin-left: 0 !important;
  }

  .modal-header .modal-title {
    -webkit-box-flex: 1;
        -ms-flex: 1 1 auto;
            flex: 1 1 auto;
    width: 100%;
  }

  /* Commission / report export blocks */
  #divExportBill,
  [id^="divExport"] {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    width: 100%;
  }

  #divExportBill img,
  [id^="divExport"] img.nodisp {
    height: auto !important;
    max-width: 100% !important;
  }

  table.table-responsive {
    display: table;
    width: 100%;
  }

  /* Report / print blocks on screen */
  .card-body overflow-y-scroll,
  .card-body.overflow-y-scroll {
    overflow-x: auto !important;
    max-height: none;
  }

  /* Nested filter rows inside col-md-* */
  .card-body .row .row > [class*="col-"] {
    -webkit-box-flex: 0;
        -ms-flex: 0 0 100%;
            flex: 0 0 100%;
    max-width: 100%;
    width: 100%;
  }

  /* Profile dropdown safe area */
  .page-wrapper .page-header .header-wrapper .nav-right .profile-dropdown {
    max-height: 70vh;
    overflow-y: auto;
  }

  /* Footer */
  footer.footer {
    padding: 12px 8px;
  }

  footer.footer p {
    font-size: 12px;
  }
}

/* ----- Small phones ----- */
@media only screen and (max-width: 575.98px) {
  .page-wrapper.compact-wrapper .page-header .header-wrapper .header-logo-wrapper .logo-wrapper span {
    font-size: 15px !important;
  }

  .page-wrapper.compact-wrapper .page-body-wrapper .page-body {
    padding: 0 8px !important;
  }

  .card .card-header,
  .card .card-body {
    padding: 10px !important;
  }

  .btn {
    padding: 0.4rem 0.75rem;
  }

  h4, .h4 {
    font-size: 1.1rem;
  }

  /* Commission / multi-table report wrappers */
  .card-body table {
    font-size: 12px;
  }

  .card-body table th,
  .card-body table td {
    padding: 6px 8px !important;
  }
}

/* ----- Login page (uses _Layout) ----- */
@media only screen and (max-width: 767.98px) {
  .login-card {
    padding: 20px 12px !important;
    min-height: 100vh;
  }

  .login-card .logo img {
    height: 90px !important;
    max-width: 100%;
  }

  .login-card .login-main {
    width: 100% !important;
    max-width: 100% !important;
    padding: 16px !important;
  }

  .login-card .btn-showcase {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -ms-flex-wrap: wrap;
        flex-wrap: wrap;
    gap: 8px;
  }

  .login-card .btn-showcase .btn {
    -webkit-box-flex: 1;
        -ms-flex: 1 1 auto;
            flex: 1 1 auto;
    margin: 0 !important;
  }

  .login-card .login-main .theme-form .or::before {
    width: 40% !important;
  }

  .modal-dialog {
    margin: 0.75rem;
  }
}