/* =========================================================
   AR DEBANG BUSINESS MANAGER — RESPONSIVE POS COMPACT LAYER
   Manager screens only.  Online Store / Product Frontend /
   Install pages are intentionally excluded.
========================================================= */
body.sbp-manager-page #sbp-app{
    overflow-x:hidden!important;
}

/* Common manager typography: compact on desktop and still readable on mobile. */
body.sbp-manager-page #sbp-app .screen:not(#dashboard){
    font-size:10px!important;
}
body.sbp-manager-page #sbp-app .screen:not(#dashboard) h1{font-size:17px!important;line-height:1.2!important;}
body.sbp-manager-page #sbp-app .screen:not(#dashboard) h2{font-size:14px!important;line-height:1.25!important;}
body.sbp-manager-page #sbp-app .screen:not(#dashboard) h3{font-size:12px!important;line-height:1.25!important;}
body.sbp-manager-page #sbp-app .screen:not(#dashboard) h4{font-size:11px!important;line-height:1.25!important;}
body.sbp-manager-page #sbp-app .screen:not(#dashboard) p{font-size:9px!important;line-height:1.35!important;}
body.sbp-manager-page #sbp-app .screen:not(#dashboard) label{font-size:9px!important;line-height:1.3!important;}
body.sbp-manager-page #sbp-app .screen:not(#dashboard) small{font-size:8px!important;line-height:1.3!important;}
body.sbp-manager-page #sbp-app .screen:not(#dashboard) input,
body.sbp-manager-page #sbp-app .screen:not(#dashboard) select,
body.sbp-manager-page #sbp-app .screen:not(#dashboard) textarea{
    font-size:10px!important;
    line-height:1.25!important;
    min-height:32px!important;
    padding:7px 9px!important;
    max-width:100%!important;
}
body.sbp-manager-page #sbp-app .screen:not(#dashboard) button{
    font-size:9px!important;
    line-height:1.2!important;
}
body.sbp-manager-page #sbp-app .screen:not(#dashboard) .material-icons{
    font-size:16px!important;
}

/* Compact tab/search areas used by Customers, Products, Categories, Payments etc. */
body.sbp-manager-page #sbp-app .customer-tabs,
body.sbp-manager-page #sbp-app .product-tabs,
body.sbp-manager-page #sbp-app .category-tabs,
body.sbp-manager-page #sbp-app .stock-management-tabs,
body.sbp-manager-page #sbp-app .msoTabsWrap{
    gap:6px!important;
    margin-bottom:9px!important;
    padding:7px!important;
    border-radius:9px!important;
}
body.sbp-manager-page #sbp-app .customer-tabs .tab-btn,
body.sbp-manager-page #sbp-app .product-tabs .tab-btn,
body.sbp-manager-page #sbp-app .category-tabs .tab-btn,
body.sbp-manager-page #sbp-app .stock-management-tabs .stock-tab-btn,
body.sbp-manager-page #sbp-app .msoTabsWrap .msoTab{
    min-width:82px!important;
    padding:7px 8px!important;
    gap:4px!important;
    border-radius:8px!important;
    font-size:9px!important;
}
body.sbp-manager-page #sbp-app .customer-tabs .tab-btn .material-icons,
body.sbp-manager-page #sbp-app .product-tabs .tab-btn .material-icons{
    font-size:17px!important;
}
body.sbp-manager-page #sbp-app .customer-tabs .tab-btn small{font-size:8px!important;}

body.sbp-manager-page #sbp-app .customer-search,
body.sbp-manager-page #sbp-app .stock-search,
body.sbp-manager-page #sbp-app .pq-search-box,
body.sbp-manager-page #sbp-app .bill-product-search-wrap{
    min-height:34px!important;
    border-radius:8px!important;
}
body.sbp-manager-page #sbp-app .customer-search input,
body.sbp-manager-page #sbp-app .stock-search input,
body.sbp-manager-page #sbp-app .pq-search-box input,
body.sbp-manager-page #sbp-app .bill-product-search-wrap input{
    font-size:10px!important;
}

/* Customers / Products cards. */
body.sbp-manager-page #sbp-app .customer-grid,
body.sbp-manager-page #sbp-app .stock-list,
body.sbp-manager-page #sbp-app .category-grid{
    gap:7px!important;
}
body.sbp-manager-page #sbp-app .customer-card,
body.sbp-manager-page #sbp-app .product-card,
body.sbp-manager-page #sbp-app .stock-card,
body.sbp-manager-page #sbp-app .category-card{
    border-radius:9px!important;
}
body.sbp-manager-page #sbp-app .customer-name,
body.sbp-manager-page #sbp-app .product-name,
body.sbp-manager-page #sbp-app .stock-product-name{
    font-size:11px!important;
    line-height:1.25!important;
}
body.sbp-manager-page #sbp-app .customer-email,
body.sbp-manager-page #sbp-app .customer-balance,
body.sbp-manager-page #sbp-app .product-meta,
body.sbp-manager-page #sbp-app .stock-meta{
    font-size:8px!important;
    line-height:1.3!important;
}

/* Bills: keep cards and controls compact instead of inheriting large mobile-first sizes. */
body.sbp-manager-page #sbp-app .bill-customer-panel,
body.sbp-manager-page #sbp-app .bill-customer-card,
body.sbp-manager-page #sbp-app .customer-inline-list,
body.sbp-manager-page #sbp-app .bill-product-tools,
body.sbp-manager-page #sbp-app .payment-form,
body.sbp-manager-page #sbp-app .payment-summary-box{
    border-radius:9px!important;
}
body.sbp-manager-page #sbp-app .bill-customer-card{padding:9px!important;gap:8px!important;}
body.sbp-manager-page #sbp-app .bill-customer-avatar{width:36px!important;height:36px!important;flex-basis:36px!important;font-size:14px!important;}
body.sbp-manager-page #sbp-app .bill-customer-label{font-size:7px!important;}
body.sbp-manager-page #sbp-app .bill-customer-name{font-size:12px!important;}
body.sbp-manager-page #sbp-app .bill-customer-receivable{font-size:8px!important;}
body.sbp-manager-page #sbp-app .customer-action-btn,
body.sbp-manager-page #sbp-app .bill-tool-add,
body.sbp-manager-page #sbp-app .bill-tool-filter,
body.sbp-manager-page #sbp-app .bill-filter-menu button{
    min-height:30px!important;
    padding:6px 8px!important;
    font-size:9px!important;
    border-radius:7px!important;
}
body.sbp-manager-page #sbp-app .step-actions button,
body.sbp-manager-page #sbp-app .payment-actions button{
    min-height:32px!important;
    padding:6px 9px!important;
    font-size:9px!important;
}

/* Sales Orders / All Orders Products summary cards. */
body.sbp-manager-page #sbp-app .msoSummaryWrap{
    gap:6px!important;
}
body.sbp-manager-page #sbp-app .msoCard{
    min-height:58px!important;
    padding:7px!important;
    border-radius:8px!important;
}
body.sbp-manager-page #sbp-app .msoCard strong{font-size:13px!important;}
body.sbp-manager-page #sbp-app .msoCard span,
body.sbp-manager-page #sbp-app .msoCard small{font-size:7px!important;}

/* Purchase Quotation: compact the large mobile-first cards while retaining controls. */
body.sbp-manager-page #sbp-app .pq-shell{padding:7px 7px 22px!important;}
body.sbp-manager-page #sbp-app .pq-main-header{padding:10px 11px!important;border-radius:10px!important;margin-bottom:8px!important;}
body.sbp-manager-page #sbp-app .pq-main-header h2{font-size:14px!important;}
body.sbp-manager-page #sbp-app .pq-main-header p{font-size:8px!important;}
body.sbp-manager-page #sbp-app .pq-card-grid{gap:7px!important;}
body.sbp-manager-page #sbp-app .pq-menu-card{min-height:100px!important;padding:9px!important;border-radius:9px!important;}
body.sbp-manager-page #sbp-app .pq-menu-icon{width:32px!important;height:32px!important;border-radius:8px!important;margin-bottom:6px!important;}
body.sbp-manager-page #sbp-app .pq-menu-icon .material-icons{font-size:17px!important;}
body.sbp-manager-page #sbp-app .pq-menu-title{font-size:10px!important;}
body.sbp-manager-page #sbp-app .pq-menu-sub{font-size:7.5px!important;}
body.sbp-manager-page #sbp-app .pq-subview{padding:8px!important;border-radius:9px!important;}
body.sbp-manager-page #sbp-app .pq-product-card,
body.sbp-manager-page #sbp-app .pq-cart-row,
body.sbp-manager-page #sbp-app .pq-quote-card{border-radius:8px!important;}
body.sbp-manager-page #sbp-app .pq-product-name,
body.sbp-manager-page #sbp-app .pq-cart-name{font-size:10px!important;}
body.sbp-manager-page #sbp-app .pq-meta-tag,
body.sbp-manager-page #sbp-app .pq-cart-price-label,
body.sbp-manager-page #sbp-app .pq-cart-total-line{font-size:7px!important;}
body.sbp-manager-page #sbp-app .pq-add,
body.sbp-manager-page #sbp-app .pq-go-cart,
body.sbp-manager-page #sbp-app .pq-btn{font-size:8px!important;padding:6px 7px!important;}

/* Generic form cards and action rows. */
body.sbp-manager-page #sbp-app .form-screen,
body.sbp-manager-page #sbp-app .form-card{
    padding:10px!important;
    border-radius:9px!important;
}
body.sbp-manager-page #sbp-app .form-group{margin-bottom:7px!important;}
body.sbp-manager-page #sbp-app .form-btn-row{gap:6px!important;}
body.sbp-manager-page #sbp-app .form-btn-row .btn-save,
body.sbp-manager-page #sbp-app .form-btn-row .btn-close,
body.sbp-manager-page #sbp-app .btnPrimary{
    min-height:32px!important;
    padding:7px 10px!important;
    font-size:9px!important;
    border-radius:7px!important;
}

/* Dashboard mobile: stack summary cards and graph panels instead of squeezing desktop columns. */
@media (max-width:700px){
    body.sbp-manager-page #sbp-app .screen{padding:10px 7px 20px!important;}
    body.sbp-manager-page #sbp-app .das-page-head{
        align-items:flex-start!important;
        flex-direction:column!important;
        gap:7px!important;
    }
    body.sbp-manager-page #sbp-app .das-page-head h1{font-size:15px!important;}
    body.sbp-manager-page #sbp-app .das-page-head p{font-size:7px!important;}
    body.sbp-manager-page #sbp-app .das-head-actions{
        width:100%!important;
        justify-content:flex-start!important;
        flex-wrap:wrap!important;
    }
    body.sbp-manager-page #sbp-app .das-summary-grid{
        grid-template-columns:repeat(2,minmax(0,1fr))!important;
        gap:5px!important;
    }
    body.sbp-manager-page #sbp-app .das-summary-card{
        min-height:66px!important;
        padding:7px!important;
    }
    body.sbp-manager-page #sbp-app .das-summary-card strong{font-size:11px!important;}
    body.sbp-manager-page #sbp-app .das-card-label{font-size:6.5px!important;}
    body.sbp-manager-page #sbp-app .das-main-grid,
    body.sbp-manager-page #sbp-app .das-lower-grid{
        grid-template-columns:1fr!important;
        gap:6px!important;
    }
    body.sbp-manager-page #sbp-app .das-chart-wrap{height:150px!important;}
    body.sbp-manager-page #sbp-app .das-chart-wrap.mini{height:120px!important;}
    body.sbp-manager-page #sbp-app .das-panel-head{padding:7px 8px 5px!important;}
    body.sbp-manager-page #sbp-app .das-panel-head h2{font-size:9px!important;}
    body.sbp-manager-page #sbp-app .das-panel-head p{font-size:5.5px!important;}
    body.sbp-manager-page #sbp-app .das-product-table th{font-size:5px!important;}
    body.sbp-manager-page #sbp-app .das-product-table td{font-size:6px!important;}

    /* Modules use the same compact scale as the sidebar on narrow screens. */
    body.sbp-manager-page #sbp-app .screen:not(#dashboard) h1{font-size:15px!important;}
    body.sbp-manager-page #sbp-app .screen:not(#dashboard) h2{font-size:13px!important;}
    body.sbp-manager-page #sbp-app .screen:not(#dashboard) h3{font-size:11px!important;}
    body.sbp-manager-page #sbp-app .screen:not(#dashboard) p{font-size:8px!important;}
    body.sbp-manager-page #sbp-app .screen:not(#dashboard) label{font-size:8px!important;}
    body.sbp-manager-page #sbp-app .screen:not(#dashboard) small{font-size:7px!important;}
    body.sbp-manager-page #sbp-app .screen:not(#dashboard) input,
    body.sbp-manager-page #sbp-app .screen:not(#dashboard) select,
    body.sbp-manager-page #sbp-app .screen:not(#dashboard) textarea{font-size:9px!important;min-height:30px!important;padding:6px 8px!important;}
    body.sbp-manager-page #sbp-app .screen:not(#dashboard) button{font-size:8px!important;}

    body.sbp-manager-page #sbp-app .customer-grid{grid-template-columns:repeat(2,minmax(0,1fr))!important;}
    body.sbp-manager-page #sbp-app .customer-card{padding:8px!important;}
    body.sbp-manager-page #sbp-app .customer-name{font-size:10px!important;}
    body.sbp-manager-page #sbp-app .customer-email,
    body.sbp-manager-page #sbp-app .customer-balance{font-size:7px!important;}
    body.sbp-manager-page #sbp-app .msoSummaryWrap{grid-template-columns:repeat(2,minmax(0,1fr))!important;}
    body.sbp-manager-page #sbp-app .msoCard strong{font-size:11px!important;}
    body.sbp-manager-page #sbp-app .msoCard span,
    body.sbp-manager-page #sbp-app .msoCard small{font-size:6px!important;}
    body.sbp-manager-page #sbp-app .pq-card-grid{grid-template-columns:repeat(2,minmax(0,1fr))!important;}
}

@media (max-width:430px){
    body.sbp-manager-page #sbp-app .das-summary-grid{grid-template-columns:repeat(2,minmax(0,1fr))!important;}
    body.sbp-manager-page #sbp-app .customer-grid{grid-template-columns:1fr!important;}
    body.sbp-manager-page #sbp-app .pq-card-grid{grid-template-columns:1fr!important;}
}

/* Step 15 — user-adjustable mobile navigation drawer width. */
@media(max-width:700px){
    body.sbp-manager-page.sbp-manager-mobile-sidebar-open #side-nav.manager-sidebar,
    body.sbp-manager-mobile-sidebar-open #side-nav.manager-sidebar{
        width:min(var(--ard-manager-mobile-sidebar,175px),88vw)!important;
        max-width:min(var(--ard-manager-mobile-sidebar,175px),88vw)!important;
    }
}