.mobileHeader,
.mobileProfileBackdrop,
.mobileProfileMenu,
.mobileBottomNav,
.brPackageMore,
.brPrepareIcon,
.cpSubtitleMobile,
.compMobileList,
.lcMobileMeta{
  display:none;
}

@media (max-width: 768px){
  html,
  body,
  #root{
    width:100%;
    max-width:100%;
    min-height:100%;
    overflow-x:hidden;
  }

  .app{
    display:block;
    width:100%;
    min-height:100vh;
    min-height:100dvh;
  }

  .mobileHeader{
    position:sticky;
    top:0;
    z-index:950;
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:16px;
    min-height:72px;
    padding:8px 18px;
    border-bottom:1px solid #e2e7e4;
    background:#fff;
    box-shadow:0 4px 14px rgba(15,23,42,.07);
  }

  .mobileHeaderLogo{
    display:block;
    width:148px;
    max-width:48vw;
    height:auto;
    margin:-14px 0;
    object-fit:contain;
    object-position:left center;
  }

  .mobileProfileWrap{
    position:relative;
    flex:0 0 auto;
  }

  .mobileProfileButton{
    display:flex;
    align-items:center;
    gap:8px;
    min-width:0;
    padding:0;
    border:0;
    background:transparent;
    color:#10213d;
    cursor:pointer;
  }

  .mobileUserAvatar{
    width:48px;
    height:48px;
    display:flex;
    align-items:center;
    justify-content:center;
    border-radius:999px;
    background:linear-gradient(145deg,#54acd1,#85c4df);
    color:#fff;
    font-size:13px;
    font-weight:900;
    box-shadow:inset 0 0 0 1px rgba(16,33,61,.04);
  }

  .mobileProfileChevron{
    width:20px;
    height:20px;
    transition:transform .18s ease;
  }

  .mobileProfileChevron.isOpen{
    transform:rotate(180deg);
  }

  .mobileProfileBackdrop{
    position:fixed;
    inset:0;
    z-index:920;
    display:block;
    width:100%;
    height:100%;
    padding:0;
    border:0;
    background:rgba(15,23,42,.18);
    cursor:pointer;
  }

  .mobileProfileMenu{
    position:fixed;
    top:66px;
    right:12px;
    z-index:980;
    display:block;
    width:min(310px,calc(100vw - 24px));
    max-height:calc(100dvh - 92px);
    overflow:auto;
    padding:14px;
    border:1px solid #dfe5e1;
    border-radius:16px;
    background:#fff;
    box-shadow:0 18px 46px rgba(15,23,42,.20);
  }

  .mobileProfileIdentity{
    padding:2px 3px 12px;
    border-bottom:1px solid #edf1ee;
  }

  .mobileProfileRole{
    color:#10213d;
    font-size:15px;
    font-weight:900;
  }

  .mobileProfileEmail{
    margin-top:3px;
    color:#667085;
    font-size:12px;
    overflow-wrap:anywhere;
  }

  .mobileProfileLinks{
    display:grid;
    gap:4px;
    padding:10px 0;
    border-bottom:1px solid #edf1ee;
  }

  .mobileProfileLinks button{
    display:flex;
    align-items:center;
    gap:10px;
    min-height:42px;
    padding:9px 10px;
    border:0;
    border-radius:10px;
    background:transparent;
    color:#344054;
    font-size:13px;
    font-weight:800;
    text-align:left;
    cursor:pointer;
  }

  .mobileProfileLinks button.active{
    background:rgba(56,184,3,.09);
    color:var(--primary-dark);
  }

  .mobileProfileUtilities{
    display:grid;
    gap:10px;
    padding-top:12px;
  }

  .mobileProfileUtilities .btn{
    width:100%;
    justify-content:center;
  }

  .mobileLanguageField{
    display:grid;
    gap:6px;
    color:#667085;
    font-size:11px;
    font-weight:800;
  }

  .mobileLanguageField .input{
    min-height:44px;
    padding:8px 10px;
    font-size:14px;
  }

  .mobileSignOut{
    color:#b42318;
  }

  .sidebar{
    display:none;
  }

  .main{
    width:100%;
    min-width:0;
    padding:24px 16px calc(98px + env(safe-area-inset-bottom));
    overflow:visible;
  }

  .mobileBottomNav{
    position:fixed;
    right:0;
    bottom:0;
    left:0;
    z-index:900;
    display:grid;
    grid-template-columns:repeat(4,minmax(0,1fr));
    gap:2px;
    min-height:74px;
    padding:6px 6px calc(6px + env(safe-area-inset-bottom));
    border-top:1px solid #dfe5e1;
    background:rgba(255,255,255,.98);
    box-shadow:0 -5px 18px rgba(15,23,42,.08);
    backdrop-filter:blur(12px);
  }

  .mobileBottomNav button{
    position:relative;
    display:flex;
    flex-direction:column;
    align-items:center;
    justify-content:center;
    gap:4px;
    min-width:0;
    min-height:60px;
    padding:6px 4px;
    border:0;
    border-radius:16px;
    background:transparent;
    color:#667085;
    cursor:pointer;
  }

  .mobileBottomNav button::before{
    content:"";
    position:absolute;
    top:-6px;
    left:50%;
    width:0;
    height:2px;
    border-radius:999px;
    background:var(--primary);
    transform:translateX(-50%);
  }

  .mobileBottomNav button.active{
    background:linear-gradient(135deg,rgba(56,184,3,.06),rgba(56,184,3,.12));
    color:#24953a;
  }

  .mobileBottomNav button.active::before{
    width:44px;
  }

  .mobileBottomNavIcon{
    display:flex;
    align-items:center;
    justify-content:center;
    line-height:1;
  }

  .mobileBottomNavLabel{
    overflow:hidden;
    max-width:100%;
    font-size:12px;
    line-height:1.1;
    font-weight:850;
    text-overflow:ellipsis;
    white-space:nowrap;
  }

  .card{
    max-width:100%;
    padding:16px;
    border-radius:14px;
  }

  .header{
    flex-direction:column;
    align-items:stretch;
    gap:14px;
    margin-bottom:18px;
  }

  .header .row{
    width:100%;
  }

  .title,
  .cpTitle,
  .brTitle,
  .lcTitle,
  .compTitle{
    font-size:28px;
    line-height:1.12;
  }

  .cpSubtitle,
  .brSubtitle,
  .lcSubtitle,
  .compSubtitle{
    margin-top:7px;
    font-size:14px;
    line-height:1.48;
  }

  .btn,
  .btnSm{
    min-height:44px;
    padding:10px 14px;
    border-radius:11px;
  }

  .input,
  .cpCustomerSearchInput,
  .compInput,
  .compSelect,
  .compFilterSelect{
    min-height:46px;
    font-size:16px;
  }

  .chip,
  .brPackageChip,
  .lcPackageChip,
  .prepRequestChip{
    max-width:100%;
    min-width:0;
    overflow-wrap:anywhere;
    white-space:normal;
  }

  /* Login */
  .loginBg{
    align-items:flex-start;
    min-height:100vh;
    min-height:100dvh;
    padding:12px;
  }

  .loginCard{
    width:100%;
    margin:auto 0;
    gap:0;
    border-radius:16px;
  }

  .loginLeft,
  .loginRight{
    padding:20px;
  }

  .logoImg{
    width:min(200px,100%);
  }

  /* Customers & Packages */
  .cpPage{
    gap:18px;
  }

  .cpHeader{
    gap:16px;
  }

  .cpSubtitleDesktop{
    display:none;
  }

  .cpSubtitleMobile{
    display:inline;
  }

  .cpHeaderActions{
    display:grid;
    grid-template-columns:minmax(0,1fr) auto;
    gap:10px;
    width:100%;
  }

  .cpPrimaryAction,
  .cpSecondaryAction{
    min-height:50px;
    padding:0 14px;
    border-radius:12px;
    font-size:14px;
    justify-content:center;
  }

  .cpPrimaryAction{
    width:100%;
    background:#2faa43;
    box-shadow:0 8px 18px rgba(47,170,67,.18);
  }

  .cpKpiGrid{
    grid-template-columns:repeat(3,minmax(0,1fr));
    gap:8px;
  }

  .cpKpiCard{
    min-width:0;
    min-height:132px;
    flex-direction:column;
    justify-content:center;
    gap:8px;
    padding:12px 6px;
    border-radius:14px;
    box-shadow:0 5px 16px rgba(15,23,42,.05);
    text-align:center;
  }

  .cpKpiIcon{
    width:48px;
    height:48px;
    flex-basis:48px;
  }

  .cpKpiIcon svg{
    width:25px;
    height:25px;
  }

  .cpKpiLabel{
    min-height:30px;
    display:flex;
    align-items:center;
    justify-content:center;
    font-size:11px;
    line-height:1.3;
  }

  .cpKpiValue{
    margin-top:2px;
    font-size:22px;
  }

  .cpOverviewCard{
    padding:14px 12px;
    border-radius:16px;
    box-shadow:0 6px 20px rgba(15,23,42,.05);
  }

  .cpSectionHeader{
    gap:14px;
    margin-bottom:14px;
  }

  .cpSectionTitle{
    font-size:19px;
  }

  .cpSectionSubtitle{
    display:none;
  }

  .cpCustomerSearch{
    width:100%;
  }

  .cpTableWrap{
    overflow:visible;
  }

  .cpTable,
  .cpTable tbody{
    display:block;
    width:100%;
  }

  .cpTable thead{
    display:none;
  }

  .cpTable tbody{
    display:grid;
    gap:10px;
  }

  .cpTable tbody tr{
    display:grid;
    grid-template-columns:minmax(0,1fr) 62px 62px;
    align-items:start;
    gap:0;
    overflow:hidden;
    padding:13px 12px 11px 16px;
    border:1px solid #dfe5e1;
    border-left-width:4px;
    border-radius:14px;
    background:#fff;
    box-shadow:0 3px 12px rgba(15,23,42,.04);
  }

  .cpTable tbody tr.cpTableRowPackages{
    border-left-color:#2faa43;
  }

  .cpTable tbody tr.cpTableRowRequests{
    border-left-color:#f97316;
  }

  .cpTable tbody tr.cpTableRowQuiet{
    border-left-color:#aab4be;
  }

  .cpTable tbody tr:hover td{
    background:transparent;
  }

  .cpTable tbody td{
    min-width:0;
    width:auto;
    padding:0;
    border:0;
  }

  .cpTable tbody td::before{
    content:attr(data-label);
    color:#6b7280;
    font-size:12px;
    font-weight:800;
  }

  .cpTable tbody td:first-child{
    display:block;
    grid-column:1;
    grid-row:1;
    padding-right:10px;
  }

  .cpTable tbody td:first-child::before{
    display:none;
  }

  .cpTable tbody td:nth-child(2),
  .cpTable tbody td:nth-child(3){
    display:flex;
    flex-direction:column;
    align-items:center;
    gap:5px;
    min-height:58px;
    padding:3px 5px;
    border-left:1px solid #dfe5ea;
  }

  .cpTable tbody td:last-child{
    display:block;
    grid-column:1 / -1;
    grid-row:2;
    margin-top:10px;
    padding:9px 0 0;
    border-top:1px solid #edf1ee;
  }

  .cpTable tbody td:last-child::before{
    display:none;
  }

  .cpCustomerName{
    color:#10213d;
    font-size:16px;
    line-height:1.2;
  }

  .cpTableRowQuiet .cpCustomerName{
    color:#10213d;
  }

  .cpCustomerContact{
    margin-top:6px;
    gap:4px;
    font-size:12px;
  }

  .cpCount{
    font-size:18px;
  }

  .cpRowAction{
    width:100%;
    min-height:38px;
    padding:7px 10px;
    justify-content:center;
    color:#23314a;
  }

  .cpEmptyRow{
    display:block !important;
    padding:0 !important;
    border-left-width:1px !important;
  }

  .cpEmptyRow .cpTableMessage{
    display:block !important;
    padding:16px !important;
    border:0;
  }

  .cpEmptyRow .cpTableMessage::before{
    display:none;
  }

  /* Box Requests */
  .brPage{
    gap:14px;
  }

  .brHeader{
    display:grid;
    grid-template-columns:minmax(0,1fr) 72px;
    align-items:start;
    gap:12px;
    padding-bottom:14px;
    border-bottom-width:2px;
  }

  .brReload{
    width:72px;
    min-height:76px;
    flex-direction:column;
    gap:4px;
    padding:7px 6px;
    justify-content:center;
    font-size:12px;
  }

  .brRequestList{
    gap:12px;
  }

  .brRequestCard{
    display:flex;
    flex-direction:column;
    padding:16px 14px 14px;
    border-radius:16px;
    box-shadow:0 6px 20px rgba(15,23,42,.06);
  }

  .brRequestTop{
    display:contents;
  }

  .brCustomerBlock{
    order:1;
    width:100%;
    gap:12px;
  }

  .brCustomerAvatar{
    width:56px;
    height:56px;
    flex-basis:56px;
  }

  .brCustomerAvatar svg{
    width:26px;
    height:26px;
  }

  .brCustomerTitleRow{
    align-items:flex-start;
    gap:8px;
  }

  .brCustomerName{
    width:100%;
    font-size:20px;
    overflow-wrap:anywhere;
  }

  .brStatusPill{
    max-width:100%;
    padding:7px 10px;
    font-size:12px;
    white-space:normal;
  }

  .brRequestId{
    max-width:100%;
    margin-top:8px;
    font-size:13px;
    overflow-wrap:anywhere;
  }

  .brPrepareAction{
    order:3;
    width:100%;
    min-height:50px;
    gap:10px;
    justify-content:center;
    background:#2faa43;
    box-shadow:0 8px 18px rgba(47,170,67,.18);
  }

  .brPrepareIcon{
    display:flex;
    align-items:center;
    justify-content:center;
  }

  .brPackagePanel{
    order:2;
    margin:16px 0 14px;
    padding:14px 0 0;
    border:0;
    border-top:1px solid #e4e9ed;
    border-radius:0;
    background:transparent;
  }

  .brPackageLabel{
    margin-bottom:10px;
  }

  .brPackageChips{
    width:auto;
    flex:0 1 auto;
  }

  .brPackageChip{
    min-height:38px;
    padding:8px 12px;
    font-size:12px;
  }

  .brPackageChip:nth-of-type(n+5){
    display:none;
  }

  .brPackageMore{
    display:inline-flex;
    align-items:center;
    min-height:38px;
    padding:8px 12px;
    border:1px solid #dce3e8;
    border-radius:12px;
    background:#fff;
    color:#4b5563;
    font-size:12px;
    font-weight:900;
  }

  .brPackageCount{
    width:auto;
    min-height:0;
    padding:0;
    border-top:0;
    border-left:0;
    font-size:13px;
  }

  /* Labels & Customs */
  .lcPage{
    gap:20px;
  }

  .lcHeader{
    gap:14px;
  }

  .lcReload{
    width:100%;
    min-height:46px;
    justify-content:center;
  }

  .lcQueue{
    gap:14px;
  }

  .lcCard{
    padding:16px;
    border-color:#dce4df;
    border-radius:16px;
    box-shadow:0 6px 18px rgba(15,23,42,.06);
  }

  .lcCardHeader{
    gap:16px;
  }

  .lcCardLead{
    width:100%;
    gap:12px;
  }

  .lcIdentityTop{
    gap:8px;
  }

  .lcCustomerName{
    width:100%;
    font-size:20px;
    overflow-wrap:anywhere;
  }

  .lcBoxId,
  .lcMetaValue{
    overflow-wrap:anywhere;
  }

  .lcActions{
    display:grid;
    grid-template-columns:1fr;
    gap:9px;
    width:100%;
  }

  .lcActionPrimary,
  .lcActionSecondary{
    width:100%;
    min-height:46px;
    justify-content:center;
  }

  .lcMetaRow{
    grid-template-columns:1fr;
    gap:12px;
    margin-top:16px;
    padding-top:14px;
  }

  .lcMobileMeta{
    display:flex;
  }

  .lcPackageChips{
    gap:8px;
  }

  .lcPackageChip,
  .lcMoreChip{
    min-height:34px;
    padding:7px 10px;
    font-size:12px;
  }

  .lcDocRow{
    flex-direction:column;
    align-items:flex-start;
    gap:10px;
  }

  .lcHistoryHeader{
    align-items:stretch !important;
  }

  .lcHistoryActions{
    display:grid;
    grid-template-columns:1fr;
    width:100%;
  }

  .lcHistoryActions .btn{
    width:100%;
    justify-content:center;
    text-align:center;
  }

  .lcHistoryMeta{
    align-items:stretch;
  }

  .lcHistoryMeta .pill{
    max-width:100%;
    overflow-wrap:anywhere;
  }

  .lcAdminUtility .row,
  .lcAdminUtility .row > *{
    width:100%;
    min-width:0 !important;
  }

  /* Collections */
  .collectionsHeader .row{
    display:grid;
    grid-template-columns:1fr 1fr;
    gap:10px;
  }

  .collectionsHeader .btn{
    width:100%;
    justify-content:center;
  }

  .collectionsWarning{
    padding:14px;
  }

  .collectionsWarning .row{
    align-items:stretch;
  }

  .collectionsWarning .row > span[style]{
    display:none;
  }

  .collectionsWarning .btn{
    width:100%;
  }

  .collectionsCard{
    padding:12px;
  }

  .collectionsTable,
  .collectionsTable tbody{
    display:block;
    width:100%;
  }

  .collectionsTable thead{
    display:none;
  }

  .collectionsTable tbody{
    display:grid;
    gap:12px;
  }

  .collectionsTable tbody tr{
    display:block;
    padding:14px;
    border:1px solid #dce5df;
    border-radius:14px;
    background:#fff;
    box-shadow:0 3px 12px rgba(15,23,42,.04);
  }

  .collectionsTable tbody tr:hover td{
    background:transparent;
  }

  .collectionsTable tbody td{
    display:grid;
    grid-template-columns:minmax(0,1fr) minmax(0,1.2fr);
    align-items:start;
    gap:12px;
    width:100%;
    padding:10px 0;
    border:0;
    border-bottom:1px solid #edf1ee;
    text-align:right;
    overflow-wrap:anywhere;
  }

  .collectionsTable tbody td::before{
    content:attr(data-label);
    color:#6b7280;
    font-size:12px;
    font-weight:800;
    text-align:left;
  }

  .collectionsTable tbody td:last-child{
    padding-bottom:0;
    border-bottom:0;
  }

  .collectionsTable tbody td .badge{
    justify-self:end;
    max-width:100%;
    text-align:left;
    white-space:normal;
  }

  .collectionsTable tbody td .btn{
    width:100%;
  }

  /* Compensation */
  .compPage{
    gap:16px;
  }

  .compHero{
    gap:18px;
    padding:18px;
  }

  .compHeroLeft{
    gap:14px;
  }

  .compIconCircle{
    width:58px;
    height:58px;
    flex-basis:58px;
  }

  .compIconCircle svg{
    width:29px;
    height:29px;
  }

  .compHeroLabel{
    margin-bottom:5px;
    font-size:14px;
  }

  .compHeroAmount{
    font-size:32px;
  }

  .compHeroActions{
    gap:10px;
    padding-top:16px;
  }

  .compPrimaryBtn,
  .compSecondaryBtn{
    width:100%;
    min-height:48px;
  }

  .compCard{
    overflow:visible;
    border-radius:14px;
  }

  .compCardHead{
    gap:12px;
    padding:16px;
  }

  .compCardTitle{
    font-size:17px;
  }

  .compSearchBox,
  .compFilterSelect{
    width:100%;
    min-width:0;
    max-width:none;
  }

  .compTableWrap{
    overflow:visible;
  }

  .compTable,
  .compTable tbody{
    display:block;
    width:100%;
  }

  .compTable thead{
    display:none;
  }

  .compTable tbody{
    display:grid;
    gap:12px;
    padding:12px;
  }

  .compTable tbody tr{
    display:block;
    padding:13px 14px;
    border:1px solid #dfe6e1;
    border-radius:13px;
    background:#fff;
    box-shadow:0 3px 10px rgba(15,23,42,.04);
  }

  .compTable tbody tr:hover td{
    background:transparent;
  }

  .compTable tbody td{
    display:grid;
    grid-template-columns:minmax(0,1fr) minmax(0,1.25fr);
    align-items:start;
    gap:12px;
    width:100%;
    padding:9px 0;
    border:0;
    border-bottom:1px solid #edf1ee;
    text-align:right;
    overflow-wrap:anywhere;
  }

  .compTable tbody td::before{
    content:attr(data-label);
    color:#6b7280;
    font-size:12px;
    font-weight:800;
    text-align:left;
  }

  .compTable tbody td:last-child{
    border-bottom:0;
  }

  .compTable .compDateCell,
  .compTable .compStatus{
    justify-self:end;
    max-width:100%;
    text-align:left;
  }

  .compEmptyRow{
    padding:0 !important;
  }

  .compEmptyRow td{
    display:block !important;
    padding:15px !important;
    border:0 !important;
    text-align:left !important;
  }

  .compEmptyRow td::before{
    display:none;
  }

  .compTableFoot{
    flex-direction:column;
    align-items:flex-start;
    padding:12px 16px 16px;
  }

  .compPage .compHero{
    gap:16px;
    padding:16px;
    border-radius:16px;
  }

  .compPage .compHeroLeft{
    gap:16px;
  }

  .compPage .compIconCircle{
    width:60px;
    height:60px;
    flex-basis:60px;
  }

  .compPage .compHeroLabel{
    margin-bottom:6px;
    font-size:15px;
  }

  .compPage .compHeroAmount{
    font-size:38px;
  }

  .compPage .compHeroActions{
    gap:9px;
    padding-top:0;
    border-top:0;
  }

  .compPage .compPrimaryBtn,
  .compPage .compSecondaryBtn{
    min-height:50px;
    justify-content:center;
  }

  .compPage .compPrimaryBtn{
    background:#2faa43;
    box-shadow:0 8px 18px rgba(47,170,67,.17);
  }

  .compPage .compCard{
    overflow:hidden;
    padding:0;
    border-radius:16px;
  }

  .compPage .compCardHead{
    gap:12px;
    padding:16px 14px 12px;
    border-bottom:0;
  }

  .compPage .compCardTitle{
    font-size:17px;
    line-height:1.25;
  }

  .compPage .compCardSub{
    margin-top:5px;
    font-size:12px;
  }

  .compPage .compSearchBox{
    min-height:48px;
    padding:10px 12px;
    border-radius:12px;
  }

  .compPage .compSearchBox input{
    font-size:16px;
  }

  .compPage .compHistoryCard .compCardHead{
    display:grid;
    grid-template-columns:minmax(0,1fr) 108px;
    align-items:start;
  }

  .compPage .compFilterSelect{
    width:108px;
    min-height:44px;
    padding:8px 9px;
    border-radius:10px;
    font-size:13px;
  }

  .compPage .compTableWrap,
  .compPage .compTableFoot{
    display:none;
  }

  .compPage .compMobileList{
    display:grid;
    gap:9px;
    padding:0 12px 14px;
  }

  .compMobileRow{
    min-width:0;
    border:1px solid #dfe5e1;
    border-radius:13px;
    background:#fff;
    box-shadow:0 2px 8px rgba(15,23,42,.025);
  }

  .compMobileEarningRow{
    display:grid;
    grid-template-columns:42px minmax(0,1fr) auto;
    align-items:center;
    gap:10px;
    padding:11px 10px;
  }

  .compMobileEarningIcon{
    width:42px;
    height:42px;
    display:flex;
    align-items:center;
    justify-content:center;
    border-radius:999px;
    background:rgba(56,184,3,.10);
    color:#15943b;
  }

  .compMobileRowBody{
    min-width:0;
  }

  .compMobileRowTitle{
    color:#10213d;
    font-size:14px;
    line-height:1.25;
    font-weight:900;
    overflow-wrap:anywhere;
  }

  .compMobileMetaLine{
    display:flex;
    align-items:center;
    gap:6px;
    min-width:0;
    margin-top:5px;
    color:#667085;
    font-size:11px;
    line-height:1.25;
    flex-wrap:wrap;
  }

  .compMobileMetaLine span{
    display:inline-flex;
    align-items:center;
    gap:5px;
    min-width:0;
    overflow-wrap:anywhere;
  }

  .compMobileMetaLine svg{
    flex:0 0 auto;
  }

  .compMobileMetaDot{
    color:#98a2b3;
  }

  .compMobileRowEnd{
    display:flex;
    align-items:center;
    gap:5px;
    color:#344054;
  }

  .compMobileAmount{
    color:#0f963b;
    font-size:15px;
    font-weight:900;
    white-space:nowrap;
  }

  .compMobilePaymentRow{
    display:grid;
    grid-template-columns:minmax(0,1fr) auto 18px;
    align-items:center;
    gap:9px;
    padding:11px 10px;
    color:#344054;
  }

  .compMobilePaymentBody{
    min-width:0;
  }

  .compMobilePaymentDate{
    display:flex;
    align-items:center;
    gap:6px;
    color:#667085;
    font-size:11px;
  }

  .compMobilePaymentType{
    margin-top:5px;
    color:#10213d;
    font-size:13px;
    font-weight:900;
    overflow-wrap:anywhere;
  }

  .compMobilePaymentMethod{
    margin-top:3px;
    color:#667085;
    font-size:11px;
    overflow-wrap:anywhere;
  }

  .compMobilePaymentEnd{
    display:flex;
    flex-direction:column;
    align-items:flex-start;
    gap:6px;
  }

  .compMobilePaymentAmount{
    color:#10213d;
    font-size:14px;
    font-weight:900;
    white-space:nowrap;
  }

  .compMobilePaymentEnd .compStatus{
    padding:4px 8px;
    font-size:11px;
    white-space:nowrap;
  }

  .compMobileEmpty{
    padding:14px;
    border:1px dashed #dfe5e1;
    border-radius:12px;
    background:#fbfcfb;
  }

  /* Modals */
  .overlay{
    align-items:center;
    padding:8px;
  }

  .modal,
  .modal.prepRequestModal,
  .modal.registerPackagesModal,
  .modal.compModal{
    width:calc(100vw - 16px);
    max-width:calc(100vw - 16px);
    max-height:calc(100vh - 16px);
    max-height:calc(100dvh - 16px);
    border-radius:15px;
  }

  .modalHead{
    position:sticky;
    top:0;
    z-index:4;
    align-items:flex-start;
    padding:16px;
    background:#fff;
  }

  .modalTitle{
    font-size:19px;
  }

  .modalBody{
    padding:16px;
  }

  .x{
    width:44px;
    height:44px;
    display:flex;
    align-items:center;
    justify-content:center;
    flex:0 0 44px;
    padding:0;
  }

  .registerPackagesModal .modalHead{
    padding:16px 16px 13px;
  }

  .registerPackagesModal .modalTitle{
    font-size:20px;
  }

  .registerPackagesScroll{
    padding:0 16px 16px;
  }

  .registerSearchInputWrap .input{
    min-height:50px;
    font-size:16px;
  }

  .registerSearchList{
    max-height:220px;
  }

  .registerSelectionCard,
  .registerUnlinkedSelected{
    gap:10px;
    padding:13px;
  }

  .registerSelectionAvatar{
    width:44px;
    height:44px;
    flex-basis:44px;
  }

  .registerSelectionCheck,
  .registerUnlinkedCheck{
    flex-basis:25px;
  }

  .registerSelectionName,
  .registerSelectionEmail,
  .registerUnlinkedSelectedCopy,
  .registerSummaryCopy,
  .registerSummarySecondary{
    overflow-wrap:anywhere;
  }

  .registerRecipientNameInput{
    width:100%;
    flex-basis:100%;
  }

  .registerQuantityRow{
    align-items:stretch;
  }

  .registerQuantityStepper{
    grid-template-columns:1fr 1.2fr 1fr;
    width:100%;
  }

  .registerQuantityButton{
    min-height:52px;
  }

  .registerQuantityHint{
    width:100%;
  }

  .registerSummaryPanel{
    padding:13px;
  }

  .registerPackagesFooter{
    position:sticky;
    bottom:0;
    z-index:3;
    display:grid;
    grid-template-columns:minmax(0,.8fr) minmax(0,1.35fr);
    gap:9px;
    padding:12px 16px 14px;
    box-shadow:0 -8px 20px rgba(15,23,42,.05);
  }

  .registerPackagesFooter .btn{
    width:100%;
    min-width:0;
    min-height:48px;
    padding:8px 10px;
    white-space:normal;
  }

  .prepRequestModal .modalHead{
    padding:16px;
  }

  .prepRequestHeaderTitle{
    font-size:20px;
  }

  .prepRequestCustomerName{
    font-size:20px;
    overflow-wrap:anywhere;
  }

  .prepRequestMeta{
    overflow-wrap:anywhere;
  }

  .prepRequestScroll{
    padding:14px;
  }

  .prepRequestSection,
  .prepRequestBoxCard{
    padding:14px;
    border-radius:14px;
  }

  .prepRequestSectionTop{
    flex-direction:column;
    gap:10px;
  }

  .prepRequestStepper{
    width:100%;
  }

  .prepRequestStepButton,
  .prepRequestStepValue{
    height:44px;
  }

  .prepRequestStepButton{
    width:44px;
  }

  .prepRequestMeasurementGrid{
    grid-template-columns:1fr;
  }

  .prepRequestFooter{
    position:sticky;
    bottom:0;
    z-index:3;
    display:grid;
    grid-template-columns:minmax(0,.8fr) minmax(0,1.35fr);
    padding:12px 14px;
    box-shadow:0 -8px 20px rgba(15,23,42,.05);
  }

  .prepRequestFooter .btn{
    width:100%;
    min-width:0;
    padding:8px 10px;
    white-space:normal;
  }

  .collectionModalBody{
    overflow:auto;
  }

  .collectionFormRow{
    display:grid;
    grid-template-columns:1fr;
    width:100%;
  }

  .collectionFormField{
    width:100%;
    min-width:0 !important;
  }

  .collectionModalActions{
    display:grid;
    grid-template-columns:1fr 1fr;
    gap:9px;
    width:100%;
  }

  .collectionModalActions .btn{
    width:100%;
    white-space:normal;
  }

  .modal.compModal{
    display:flex;
    flex-direction:column;
  }

  .compModal .modalHead{
    padding:18px 16px 12px;
  }

  .modalBody.compModalBody{
    min-height:0;
    overflow:auto;
  }

  .compModalContent{
    padding:0 16px 16px;
  }

  .compAvailableCard{
    gap:12px;
    padding:14px;
    margin:8px 0 18px;
  }

  .compAvailableIcon{
    width:50px;
    height:50px;
    flex-basis:50px;
  }

  .compAvailableAmount{
    font-size:24px;
  }

  .compModalFooter{
    position:sticky;
    bottom:0;
    z-index:3;
    display:grid;
    grid-template-columns:1fr 1.35fr;
    gap:9px;
    padding:12px 16px;
    box-shadow:0 -8px 20px rgba(15,23,42,.05);
  }

  .compModalFooter .btn{
    width:100%;
    min-width:0;
    white-space:normal;
  }

  .toast{
    right:12px;
    bottom:calc(88px + env(safe-area-inset-bottom));
    left:12px;
    max-width:none;
  }

  .pdfPreview{
    height:60vh;
    height:60dvh;
  }
}

@media (max-width: 380px){
  .mobileHeader{
    padding-right:12px;
    padding-left:12px;
  }

  .mobileHeaderLogo{
    width:132px;
  }

  .mobileUserAvatar{
    width:44px;
    height:44px;
    font-size:12px;
  }

  .main{
    padding:22px 14px calc(96px + env(safe-area-inset-bottom));
  }

  .collectionsHeader .row{
    grid-template-columns:1fr;
  }

  .registerSelectionAvatar,
  .registerSummaryIcon,
  .registerUnlinkedSelectedIcon{
    display:none;
  }

  .collectionsTable tbody td,
  .compTable tbody td{
    grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr);
  }
}

@media (max-width: 768px) and (prefers-reduced-motion: reduce){
  .mobileProfileChevron{
    transition:none;
  }
}