/* JOB MONEY — Mobile operating cockpit / 7 Nov 2026
 * Intent: one-row navigation; actionable command centre; reveal the 300-desk
 * simulation and detailed country/finance data only when requested.
 * All data/contract controls stay in the existing server-backed components.
 */
@media (max-width:760px){
  /* Never allow the fourth navigation destination to wrap to a second row. */
  .v2-layout .bottom-nav,
  .bottom-nav{
    display:block!important;
    position:fixed!important;
    left:0!important;right:0!important;bottom:0!important;
    width:100%!important;
    padding:5px max(7px,env(safe-area-inset-left)) calc(5px + env(safe-area-inset-bottom)) max(7px,env(safe-area-inset-right))!important;
    background:#fff!important;
    border-top:1px solid #e0e7ee!important;
    box-shadow:0 -5px 18px #182f4214!important;
    z-index:45!important;
  }
  .v2-layout .bottom-inner,.bottom-nav .bottom-inner{
    display:grid!important;
    grid-template-columns:repeat(4,minmax(0,1fr))!important;
    grid-template-rows:minmax(57px,auto)!important;
    max-width:580px!important;width:100%!important;
    margin:0 auto!important;gap:0!important;
  }
  .v2-layout .bottom-button,.bottom-nav .bottom-button{
    min-width:0!important;width:100%!important;max-width:100%!important;
    min-height:57px!important;height:57px!important;
    display:flex!important;flex-direction:column!important;
    justify-content:center!important;align-items:center!important;
    gap:2px!important;padding:3px 1px!important;
    color:#81909e!important;font-size:10px!important;font-weight:650!important;
    white-space:nowrap!important;text-align:center!important;line-height:1.15!important;
    overflow:hidden!important;
  }
  .v2-layout .bottom-button.active,.bottom-nav .bottom-button.active{color:#142b44!important;font-weight:850!important}
  .v2-layout .bottom-button svg,.bottom-nav .bottom-button svg{
    width:21px!important;height:21px!important;flex:0 0 21px!important;
  }
  .v2-layout .bottom-button span:not(.underline),.bottom-nav .bottom-button span:not(.underline){
    display:block!important;width:100%!important;white-space:nowrap!important;
    overflow:hidden!important;text-overflow:ellipsis!important;overflow-wrap:normal!important;
    text-align:center!important;
  }
  .v2-layout .bottom-button .underline,.bottom-nav .bottom-button .underline{
    width:25px!important;height:3px!important;flex:0 0 3px!important;border-radius:5px!important;
  }
  .v2-layout .main{padding-bottom:calc(91px + env(safe-area-inset-bottom))!important}
  .v2-layout:has(.of-mobile-view) .main{max-width:640px!important;padding:13px 12px calc(90px + env(safe-area-inset-bottom))!important}
  .v2-layout:has(.of-mobile-view) .topbar{
    margin:2px 1px 14px!important;display:flex;align-items:center!important;gap:8px!important;
    justify-content:space-between;min-width:0;
  }
  .v2-layout:has(.of-mobile-view) .topbar>div:first-child{flex:1 1 auto;min-width:0}
  .v2-layout:has(.of-mobile-view) .topbar .eyebrow{display:none!important}
  .v2-layout:has(.of-mobile-view) .topbar h1{
    font-size:21px!important;line-height:1.18!important;font-weight:900!important;
    letter-spacing:-.035em!important;text-transform:none!important;
  }
  .v2-layout:has(.of-mobile-view) .topbar p{display:none!important}
  .v2-layout:has(.of-mobile-view) .topbar .top-actions{flex:0 0 auto!important;gap:7px!important}
  .v2-layout:has(.of-mobile-view) .v2-month-control{width:100px!important}
  .v2-layout:has(.of-mobile-view) .v2-footer{margin:18px 5px 0!important;font-size:10px!important}
  .of-mobile-view{display:flex;flex-direction:column;gap:13px;color:#18314b;padding:0!important;width:100%;min-width:0}
  .of-mobile-view *{box-sizing:border-box}
  .of-mob-hero{
    background:#152b43;color:#fff;border-radius:19px;padding:19px 16px 14px;
    border:1px solid #23445e;box-shadow:0 10px 24px #122b3f17;
  }
  .of-mob-hero-top{display:flex;align-items:center;justify-content:space-between;gap:8px;flex-wrap:wrap}
  .of-mob-kicker{font-size:9px;letter-spacing:.13em;color:#efb688;font-weight:900}
  .of-mob-online{display:flex;align-items:center;gap:6px;color:#b7d9c7;font-size:9px;white-space:nowrap}
  .of-mob-online i{width:7px;height:7px;background:#32bf8e;border-radius:50%;box-shadow:0 0 0 3px #32bf8e21}
  .of-mob-hero h2{font-size:23px!important;color:#fff!important;letter-spacing:-.04em;line-height:1.16;margin:13px 0 6px!important;font-weight:900}
  .of-mob-hero>p{color:#c8d7e4;font-size:11px;line-height:1.55;margin:0 0 16px}
  .of-mob-metrics{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px}
  .of-mob-metric{border-radius:12px;display:flex;flex-direction:column;justify-content:center;gap:5px;
    min-height:78px;background:#fff;color:#19364d;padding:13px 14px;min-width:0}
  .of-mob-metric-accent{background:#ffead8}
  .of-mob-metric strong{font-size:26px;letter-spacing:-.04em;line-height:1;font-weight:900;font-variant-numeric:tabular-nums}
  .of-mob-metric-accent strong{color:#b86428}
  .of-mob-metric span{font-size:10px;color:#60758a;font-weight:750;line-height:1.3}
  .of-mob-hero-foot{display:flex;justify-content:space-between;align-items:center;gap:8px;padding:12px 0 0;color:#9bb5c8;font-size:10px}
  .of-mob-hero-foot button{display:inline-flex;align-items:center;gap:5px;min-height:30px;flex-shrink:0;color:#f2c7a9;background:transparent;border:0;font-size:10px;font-weight:800}
  .of-mob-action-board{
    border:1px solid #e1e8ef;border-radius:16px;padding:14px 14px 4px;background:#fff;
    box-shadow:0 5px 17px #19334b07;
  }
  .of-mob-heading{display:flex;justify-content:space-between;align-items:center;gap:12px;padding:1px 1px 8px}
  .of-mob-heading h2{font-size:16px!important;letter-spacing:-.025em;font-weight:900;margin:0!important}
  .of-mob-heading>span{font-size:10px;color:#8494a5}
  .of-mob-task{display:grid;grid-template-columns:31px minmax(0,1fr) auto auto;gap:8px;align-items:center;
    min-height:68px;border-top:1px solid #ecf0f4;padding:12px 0;color:#284760}
  .of-mob-task-icon{width:29px;height:29px;display:grid;place-items:center;border-radius:9px;
    background:#edf3f7;color:#476985;font-size:12px;font-weight:900}
  .of-mob-task.important .of-mob-task-icon{background:#ffeadb;color:#c26627}
  .of-mob-task-text{display:flex;flex-direction:column;gap:4px;min-width:0}
  .of-mob-task-text strong{font-size:11px;line-height:1.3;overflow-wrap:anywhere}
  .of-mob-task-text small{font-size:10px;color:#7d8c9c;line-height:1.35}
  .of-mob-task-number{font-size:16px;font-weight:900;color:#163b56;font-variant-numeric:tabular-nums}
  .of-mob-row-btn{display:inline-flex;align-items:center;justify-content:center;gap:2px;border:1px solid #dce6ed;
    background:#fff;border-radius:9px;font-size:10px;color:#31526b;font-weight:850;min-height:34px;padding:7px 8px;text-decoration:none;white-space:nowrap}
  .of-mob-row-btn svg{width:13px;height:13px}
  .of-mob-alert{padding:10px;background:#fff2e9;border-radius:9px;color:#a64a23;font-size:11px;margin:3px 0 10px}
  .of-mob-shortcuts{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:9px}
  .of-mob-shortcut{display:flex;justify-content:center;align-items:center;gap:7px;min-height:44px;
    border:1px solid #dce6ee;border-radius:11px;background:#fff;color:#284b64;
    font-weight:800;font-size:11px;text-align:center;padding:10px 8px;min-width:0}
  .of-mob-shortcut.primary{background:#edf6f8;border-color:#b9dce0;color:#23617a}
  .of-mob-section{background:#fff;border:1px solid #dfe7ef;border-radius:16px;overflow:hidden;
    box-shadow:0 4px 18px #12314a06;scroll-margin-top:14px}
  .of-mob-section>summary{display:flex;justify-content:space-between;align-items:center;gap:10px;
    list-style:none;cursor:pointer;min-height:68px;padding:14px 15px}
  .of-mob-section>summary::-webkit-details-marker{display:none}
  .of-mob-section>summary>span:first-child{display:flex;flex-direction:column;gap:5px;min-width:0}
  .of-mob-section>summary strong{font-size:14px;color:#183752;line-height:1.2;font-weight:900;letter-spacing:-.02em}
  .of-mob-section>summary small{font-size:10px;color:#778da0;line-height:1.35}
  .of-mob-caret{width:30px;height:30px;flex-shrink:0;border-radius:9px;display:grid;place-items:center;background:#f0f5f8;color:#4f6b7f;transition:transform .15s}
  .of-mob-section[open] .of-mob-caret{transform:rotate(180deg)}
  .of-mob-section-body{border-top:1px solid #e8eef2;padding:12px 13px 14px}
  .of-mob-queue-head p{font-size:11px;line-height:1.6;color:#647a8d;margin:0 0 11px}
  .of-mob-queue-actions{display:flex;align-items:center;justify-content:space-between;flex-wrap:wrap;gap:8px;margin-bottom:13px}
  .of-mob-action{border:0;background:#193650;color:#fff;display:inline-flex;align-items:center;gap:8px;
    min-height:39px;border-radius:10px;padding:9px 12px;font-size:11px;font-weight:850;text-decoration:none}
  .of-mob-quiet{display:inline-flex;align-items:center;gap:5px;border:0;color:#4e6c84;
    background:transparent;font-size:10px;font-weight:800;min-height:34px}
  .of-mob-candidate{border:1px solid #e3eaf0;background:#fff;border-radius:12px;padding:13px;margin:9px 0}
  .of-mob-candidate>div{display:flex;align-items:center;justify-content:space-between;gap:8px}
  .of-mob-status{font-size:9px;color:#af642d;font-weight:900;background:#fff0e3;border-radius:5px;padding:3px 7px}
  .of-mob-source{font-size:10px;color:#8192a2;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
  .of-mob-candidate h3{font-size:13px;line-height:1.4;color:#254660;overflow-wrap:anywhere;margin:8px 0 4px;font-weight:850}
  .of-mob-candidate p{font-size:10px;color:#708498;line-height:1.4;margin:0 0 9px}
  .of-mob-candidate-action{display:flex;align-items:center;gap:7px;background:transparent;
    border:0;border-top:1px solid #edf1f4;padding:9px 0 0;width:100%;
    color:#a35b2a;font-size:11px;font-weight:850;text-align:left}
  .of-mob-empty,.of-mob-help{font-size:11px;color:#6f8698;line-height:1.65}
  #ofMobileFullQueue{margin-top:17px;padding-top:14px;border-top:1px solid #e6eef2;scroll-margin-top:14px}
  .of-mobile-view #ofMobileFullQueue .of-pipeline{padding:0;border:0;box-shadow:none;background:transparent}
  .of-mobile-view #ofMobileFullQueue .of-section-head h2{font-size:16px}
  .of-mobile-view #ofMobileFullQueue .of-section-head p{font-size:11px}
  .of-mobile-view .of-tabs{display:flex!important;flex-wrap:nowrap!important;overflow-x:auto!important;
    width:100%!important;max-width:100%!important;gap:6px!important;scroll-snap-type:x proximity;
    padding-bottom:10px;margin-bottom:10px}
  .of-mobile-view .of-tabs>button{flex:0 0 auto!important;min-width:max-content!important;
    white-space:nowrap!important;font-size:10px!important;padding:9px 11px!important;scroll-snap-align:start}
  .of-mobile-view .of-tabs b{margin-left:4px}
  .of-mobile-view .of-list-tools{display:flex;flex-wrap:wrap;gap:8px}
  .of-mobile-view .of-list-tools label{font-size:11px}
  .of-mobile-view .of-list-tools select{max-width:100%;width:100%;min-height:42px}
  .of-mobile-view .of-jobs{display:grid;grid-template-columns:1fr;gap:10px}
  .of-mobile-view .of-job{min-width:0;width:100%;padding:12px}
  .of-mobile-view .of-head-actions{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));width:100%;gap:7px}
  .of-mobile-view .of-head-actions>a{grid-column:1/-1}
  .of-mobile-view .of-head-actions>*{width:100%;min-width:0}
  .of-mobile-view .of-pages{display:flex;flex-direction:column;align-items:flex-start;gap:9px}
  .of-mobile-view #ofMobileTeam .of-office{border:0;box-shadow:none;padding:0;margin:0}
  .of-mobile-view #ofMobileTeam .of-office-top{display:grid;grid-template-columns:1fr auto;gap:10px}
  .of-mobile-view #ofMobileTeam .of-office-top h2{font-size:15px}
  .of-mobile-view #ofMobileTeam .of-office-top p{font-size:11px}
  .of-mobile-view #ofMobileTeam .of-capacity{max-width:105px;padding:9px;white-space:normal}
  .of-mobile-view #ofMobileTeam .of-capacity b{font-size:18px}
  .of-mobile-view #ofMobileTeam .of-capacity span,.of-mobile-view #ofMobileTeam .of-capacity small{font-size:9px}
  .of-mobile-view #ofMobileTeam .of-leader{min-height:60px!important;padding:7px!important}
  .of-mobile-view #ofMobileTeam .of-staff-person{transform:scale(.8);transform-origin:left center;margin-right:-8px}
  .of-mobile-view #ofMobileTeam .of-leader strong{font-size:11px}
  .of-mobile-view #ofMobileTeam .of-leader-copy span{font-size:10px}
  .of-mobile-view #ofMobileTeam .of-accordion-master{padding:10px}
  .of-mobile-view #ofMobileTeam .of-accordion-heading strong{font-size:14px}
  .of-mobile-view #ofMobileTeam .of-team-section{margin-bottom:9px}
  .of-mob-money-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px;margin-bottom:9px}
  .of-mob-money-grid>div{padding:12px 10px;background:#f0f7f5;border-radius:11px;display:flex;flex-direction:column;gap:6px;min-width:0}
  .of-mob-money-grid small{font-size:10px;color:#627e75}
  .of-mob-money-grid strong{font-size:15px;color:#11785b;overflow-wrap:anywhere}
  .of-mobile-view #ofMobileFinance .of-fin-rail{position:static;box-shadow:none;border:1px solid #e6edf2;border-radius:12px;margin:12px 0;padding:12px}
  .of-mobile-view #ofMobileFinance .of-fin-jobs{border:1px solid #e6edf2;margin-top:10px;padding:12px;border-radius:12px}
  .of-mobile-view #ofMobileFinance .of-fin-jobs h2{font-size:16px}
  .of-mobile-view #ofMobileFinance .of-fin-jobs .of-empty{padding:16px 8px}
  .of-mobile-view #ofMobileFinance .of-fin-table-wrap{max-width:100%;overflow-x:auto}
  .of-mobile-view #ofMobileFinance .of-fin-table{min-width:650px}
  .of-mob-proposal p{font-size:11px;color:#60798d;line-height:1.65;margin-bottom:12px}
  .of-mob-footer{padding:9px 10px 6px;color:#70869a;font-size:11px;display:flex;gap:8px;justify-content:space-between;align-items:center;flex-wrap:wrap}
  .of-mob-footer>button{display:flex;gap:5px;align-items:center;border:0;background:transparent;color:#2b6484;font-size:11px;font-weight:800}
  .of-mob-footer>p{flex-basis:100%;font-size:10px;line-height:1.5;margin:0;color:#8e9caa}
  .of-mobile-view .of-work-grid{display:block}
  .of-mobile-view .of-country-select{max-width:100%}
}
@media (max-width:359px){
  .v2-layout .bottom-button,.bottom-nav .bottom-button{font-size:9px!important}
  .of-mob-task{grid-template-columns:25px minmax(0,1fr) auto auto;gap:6px}
  .of-mob-task-icon{width:25px;height:25px}
  .of-mob-row-btn{font-size:9px;padding:5px}
  .of-mob-section-body{padding:10px}
  .of-mob-hero{padding:16px 13px}
}

/* Chevron SVG points down by default; expanded panels point up. */
@media(max-width:760px){.of-mob-section[open] .of-mob-caret{transform:none}.of-mob-section[open] .of-mob-caret svg{transform:rotate(180deg)}}

/* Mobile finance uses semantic card rows; no sideways-scrolling earnings table. */
@media(max-width:760px){
 .of-mob-subsection{border:1px solid #e1e9ef;border-radius:11px;margin-top:9px;overflow:hidden;background:#fff}
 .of-mob-subsection>summary{display:flex;align-items:center;justify-content:space-between;gap:9px;
   padding:12px;font-size:11px;font-weight:850;list-style:none;cursor:pointer;color:#335773;min-height:43px}
 .of-mob-subsection>summary::-webkit-details-marker{display:none}
 .of-mob-subsection>summary svg{flex-shrink:0;transition:transform .2s}
 .of-mob-subsection[open]>summary svg{transform:rotate(180deg)}
 .of-mob-subsection-content{padding:12px 10px;border-top:1px solid #e8eef3;display:grid;gap:10px}
 .of-mob-subsection-content .of-currency{margin:0;border-radius:10px}
 .of-mob-subsection-content .of-rail-footer{margin:0}
 .of-mob-subsection-content .of-fin-jobs{margin:0!important;padding:0!important;border:0!important}
 .of-mobile-view .of-fin-table-wrap{max-height:none!important;overflow:visible!important;border:0!important;background:transparent!important}
 .of-mobile-view .of-fin-table{display:block!important;width:100%!important;min-width:0!important;border:0!important}
 .of-mobile-view .of-fin-table thead{display:none!important}
 .of-mobile-view .of-fin-table tbody{display:grid!important;gap:10px!important}
 .of-mobile-view .of-fin-table tbody tr{display:grid!important;grid-template-columns:repeat(2,minmax(0,1fr))!important;
   gap:0!important;border:1px solid #e0e8ee!important;border-radius:12px!important;padding:12px!important;background:#fff!important;
   width:100%!important;min-width:0!important}
 .of-mobile-view .of-fin-table td{padding:7px 5px!important;border-top:0!important;font-size:11px!important;
   min-width:0!important;max-width:100%!important;display:flex!important;flex-direction:column!important;gap:4px!important;
   white-space:normal!important;overflow-wrap:anywhere!important}
 .of-mobile-view .of-fin-table td:first-child{grid-column:1/-1;border-bottom:1px solid #eaf0f3!important;
   margin-bottom:6px;max-width:100%!important}
 .of-mobile-view .of-fin-table td strong{font-size:12px!important}
 .of-mobile-view .of-fin-table td:last-child{grid-column:1/-1;margin-top:5px}
 .of-mobile-view .of-fin-table td:last-child button{width:100%!important;min-height:38px!important}
 .of-mobile-view .of-fin-table td:nth-child(2):before{content:"Hợp đồng"}
 .of-mobile-view .of-fin-table td:nth-child(3):before{content:"Đã nhận"}
 .of-mobile-view .of-fin-table td:nth-child(4):before{content:"Chi phí"}
 .of-mobile-view .of-fin-table td:nth-child(5):before{content:"Còn phải thu"}
 .of-mobile-view .of-fin-table td:nth-child(n+2):nth-child(-n+5):before{
   display:block;color:#8396a5;font-size:10px;font-weight:750}
}

/* Five long filter pills are not a useful iPhone control: use one select. */
.of-mobile-status-filter{display:none}
@media(max-width:760px){
 .of-mobile-view #ofMobileFullQueue .of-tabs{display:none!important}
 .of-mobile-view .of-mobile-status-filter{display:flex!important;flex-direction:column;gap:7px;
  font-size:12px;font-weight:850;color:#355873;width:100%;min-width:0;margin:8px 0 13px}
 .of-mobile-view .of-mobile-status-filter select{width:100%;min-width:0;min-height:48px;
  padding:11px 36px 11px 13px;border:1px solid #d8e3ec;border-radius:11px;
  background-color:#fff;color:#244760;font-size:16px;line-height:1.35}
 .of-mobile-view #ofMobileFullQueue .of-list-tools{display:grid;grid-template-columns:1fr;gap:7px}
 .of-mobile-view #ofMobileFullQueue .of-list-tools select{font-size:16px;min-height:48px;max-width:100%}
 .of-mobile-view #ofMobileFullQueue .of-head-actions{grid-template-columns:repeat(2,minmax(0,1fr));gap:8px}
 .of-mobile-view #ofMobileFullQueue .of-head-actions>a{grid-column:1/-1}
 .of-mobile-view .of-job-actions{gap:7px;min-width:0}
 .of-mobile-view .of-job-actions>*{max-width:100%;min-width:0;white-space:normal}
}