/* No layout jump: the app appears once influenceops-mobile.js has placed labels, chips and the tab bar.
   If the script ever fails, the animation shows the page anyway after 1.2s. */
@keyframes ioReveal{to{opacity:1}}
html:not(.io-ready) #influenceops-app{opacity:0;animation:ioReveal .15s 1.2s forwards}
@keyframes ioIn{from{opacity:0}}
html.io-ready #influenceops-app{animation:ioIn .12s ease-out}
/* InfluenceOps mobile + tablet layout fixes (loaded after influenceops-redesign.css).
   Layout only: no change to data, buttons, forms or permissions. */

/* Sidebar menu: keep items compact at every screen size */
html body #influenceops-app#influenceops-app .io-side nav{align-content:start!important;grid-auto-rows:min-content!important;justify-content:stretch!important}
html body #influenceops-app#influenceops-app .io-side nav a{height:auto!important}

/* Tablet: keep tables readable inside their panels */
@media (min-width:769px) and (max-width:1100px){
  html body #influenceops-app#influenceops-app .io-order-filters>.io-order-filter-grid{grid-template-columns:repeat(2,minmax(0,1fr))!important}
  html body #influenceops-app#influenceops-app .io-content{padding:18px 16px!important}
  html body #influenceops-app#influenceops-app .io-panel{max-width:100%}
}

@media (max-width:768px){
  /* ---------- Side drawer ---------- */
  html body #influenceops-app#influenceops-app .io-side{width:min(280px,84vw)!important;display:flex!important;flex-direction:column!important;padding-bottom:12px!important}
  html body #influenceops-app#influenceops-app .io-side nav{flex:1 1 auto!important;display:flex!important;flex-direction:column!important;justify-content:flex-start!important;align-content:flex-start!important;gap:2px!important;overflow-y:auto!important;min-height:0!important;height:auto!important;padding-bottom:8px!important}
  html body #influenceops-app#influenceops-app .io-side nav a{flex:none!important;height:auto!important;min-height:44px!important;padding:11px 12px!important;align-items:center!important}
  html body #influenceops-app#influenceops-app .io-side .io-user{position:relative!important;left:auto!important;right:auto!important;bottom:auto!important;margin:8px 0 0!important;flex:none!important;width:auto!important}
  /* When the drawer is open the menu button sits beside it and turns into a close (×) button */
  body.io-menu-open #influenceops-app .io-mobile-menu-toggle,body.io-menu-open .io-mobile-menu-toggle{left:calc(min(280px,84vw) + 10px)!important;z-index:2147483000!important;font-size:0!important;background:#fff!important;color:var(--io-ink,#17142b)!important}
  body.io-menu-open .io-mobile-menu-toggle::before{content:"×";font-size:26px;line-height:1}
  body.io-menu-open{overflow:hidden!important}

  /* ---------- Page gutters ---------- */
  html body #influenceops-app#influenceops-app .io-head{padding:14px 14px 6px!important;gap:12px!important}
  html body #influenceops-app#influenceops-app .io-track-head{padding:12px 14px 6px!important}
  html body #influenceops-app#influenceops-app .io-head h1{font-size:22px!important;line-height:1.2!important;overflow-wrap:anywhere}
  html body #influenceops-app#influenceops-app .io-content{padding:10px 12px 28px!important}
  html body #influenceops-app#influenceops-app .io-content>p{padding:0 2px!important;margin:4px 0 12px!important;font-size:13px!important}
  html body #influenceops-app#influenceops-app .io-approved-ad-pagination{padding:4px 4px 0!important}
  html body #influenceops-app#influenceops-app .io-panel>h3{padding:14px 14px 10px!important;margin:0!important}

  html body #influenceops-app#influenceops-app .io-item-summary{display:grid!important;grid-template-columns:repeat(3,minmax(0,1fr))!important;gap:10px!important;padding:14px!important}
  html body #influenceops-app#influenceops-app .io-item-summary>div{display:flex!important;flex-direction:column!important;gap:3px!important;min-width:0!important;overflow-wrap:anywhere}

  /* ---------- Filters: two per row instead of one long column ---------- */
  html body #influenceops-app#influenceops-app .io-order-filters>.io-order-filter-grid{grid-template-columns:repeat(2,minmax(0,1fr))!important;gap:12px 10px!important;padding:14px!important}
  html body #influenceops-app#influenceops-app .io-order-filters .io-order-filter-grid>label{gap:5px!important;font-size:12px!important}
  html body #influenceops-app#influenceops-app .io-order-filters .io-order-filter-grid>label:has(>input[type=search]),
  html body #influenceops-app#influenceops-app .io-order-filters .io-order-filter-grid>label:has(>input[type=text]),
  html body #influenceops-app#influenceops-app .io-order-filters .io-order-filter-grid>.io-order-filter-actions{grid-column:1/-1!important}
  html body #influenceops-app#influenceops-app .io-order-filters .io-order-filter-grid input,
  html body #influenceops-app#influenceops-app .io-order-filters .io-order-filter-grid select,
  html body #influenceops-app#influenceops-app .io-order-filters .io-order-filter-grid .io-search-select-trigger{min-height:42px!important;font-size:14px!important}
  html body #influenceops-app#influenceops-app .io-daily-work-filters{grid-template-columns:repeat(2,minmax(0,1fr))!important;gap:12px 10px!important;padding:14px!important}
  html body #influenceops-app#influenceops-app .io-daily-work-filters>label:first-of-type,
  html body #influenceops-app#influenceops-app .io-daily-work-filters>label:has(>input[type=search]),
  html body #influenceops-app#influenceops-app .io-daily-work-filters>label:has(>input[type=text]),
  html body #influenceops-app#influenceops-app .io-daily-work-filters>a,
  html body #influenceops-app#influenceops-app .io-daily-work-filters>button,
  html body #influenceops-app#influenceops-app .io-daily-work-filters>div{grid-column:1/-1!important}
  html body #influenceops-app#influenceops-app input[type=date]{min-width:0!important;width:100%!important;font-size:14px!important}

  /* ---------- Daily Work matrix ---------- */
  html body #influenceops-app#influenceops-app .io-dw-matrix td{text-align:center!important}
  html body #influenceops-app#influenceops-app .io-dw-matrix th.io-dw-name{min-width:96px!important;font-size:12px!important}

  /* ---------- Order tracking / forms ---------- */
  html body #influenceops-app#influenceops-app .io-step .io-grid2,
  html body #influenceops-app#influenceops-app .io-step .io-grid3,
  html body #influenceops-app#influenceops-app .io-step .io-grid4{grid-template-columns:minmax(0,1fr)!important}
  html body #influenceops-app#influenceops-app .io-step{grid-template-columns:minmax(0,1fr)!important}
  html body #influenceops-app#influenceops-app .io-stepbox{padding:12px!important}
  html body #influenceops-app#influenceops-app .io-step form{padding:12px 0 0!important}
  html body #influenceops-app#influenceops-app .io-step input,html body #influenceops-app#influenceops-app .io-step select,html body #influenceops-app#influenceops-app .io-step textarea{width:100%!important;max-width:100%!important;min-width:0!important}
  html body #influenceops-app#influenceops-app .io-step-title{gap:8px!important;flex-wrap:wrap!important}

  /* ---------- Popups fit the phone ---------- */
  html body #influenceops-app#influenceops-app .io-modal>div{width:calc(100vw - 20px)!important;max-width:calc(100vw - 20px)!important;max-height:calc(100dvh - 24px)!important;overflow-y:auto!important;padding:18px 14px!important;box-sizing:border-box!important}
}

/* Rows shown as cards on phones and tablets */
@media (max-width:1100px){
  html body #influenceops-app#influenceops-app table:not(.io-dw-matrix):has(tbody td[data-label]){display:block!important;width:100%!important;min-width:0!important;border:0!important;background:transparent!important}
  html body #influenceops-app#influenceops-app table:not(.io-dw-matrix):has(tbody td[data-label]) thead{display:none!important}
  html body #influenceops-app#influenceops-app table:not(.io-dw-matrix):has(tbody td[data-label]) tbody{display:block!important;padding:10px!important}
  html body #influenceops-app#influenceops-app table:not(.io-dw-matrix):has(tbody td[data-label]) tbody tr{background:var(--io-surface,#fff)!important;border:1px solid var(--io-line,#e6e3ef)!important;border-radius:14px!important;box-shadow:0 1px 2px rgba(23,20,43,.04)!important}
  html body #influenceops-app#influenceops-app table:not(.io-dw-matrix):has(tbody td[data-label]) tbody tr:last-child{margin-bottom:0!important}
  html body #influenceops-app#influenceops-app .io-panel:has(>table td[data-label]),html body #influenceops-app#influenceops-app div:has(>table td[data-label]){overflow-x:visible!important;min-width:0!important}
  /* ---------- Table rows as compact cards ---------- */
  html body #influenceops-app#influenceops-app table:not(.io-dw-matrix) tbody tr:has(>td[data-label]){display:grid!important;grid-template-columns:repeat(auto-fill,minmax(140px,1fr))!important;gap:12px 14px!important;padding:14px!important;margin:0 0 10px!important;align-items:start!important}
  html body #influenceops-app#influenceops-app table:not(.io-dw-matrix) tbody tr:has(>td[data-label])>td{display:flex!important;flex-direction:column!important;align-items:flex-start!important;justify-content:flex-start!important;gap:4px!important;grid-template-columns:none!important;padding:0!important;margin:0!important;border:0!important;min-width:0!important;width:auto!important;max-width:100%!important;text-align:left!important;overflow-wrap:anywhere;font-size:13px!important;line-height:1.35!important}
  html body #influenceops-app#influenceops-app table:not(.io-dw-matrix) tbody tr:has(>td[data-label])>td[data-label]::before{content:attr(data-label)!important;display:block!important;margin:0!important;width:auto!important;font-size:11px!important;line-height:1.2!important;font-weight:600!important;color:var(--io-muted,#6b6784)!important;text-transform:none!important;letter-spacing:0!important;white-space:nowrap}
  /* first field = card title */
  html body #influenceops-app#influenceops-app table:not(.io-dw-matrix) tbody tr:has(>td[data-label])>td:first-child{grid-column:1/-1!important;padding-bottom:10px!important;border-bottom:1px solid var(--io-line,#e6e3ef)!important;font-size:15px!important;font-weight:700!important}
  /* buttons / actions get the full width, side by side */
  html body #influenceops-app#influenceops-app table:not(.io-dw-matrix) tbody tr:has(>td[data-label])>td:last-child:has(a,button,form),
  html body #influenceops-app#influenceops-app table:not(.io-dw-matrix) tbody tr:has(>td[data-label])>td:has(>form),
  html body #influenceops-app#influenceops-app table:not(.io-dw-matrix) tbody tr:has(>td[data-label])>td[colspan]{grid-column:1/-1!important}
  html body #influenceops-app#influenceops-app table:not(.io-dw-matrix) tbody tr:has(>td[data-label])>td:last-child:has(a,button,form){flex-direction:row!important;flex-wrap:wrap!important;align-items:center!important;gap:8px!important;padding-top:10px!important;border-top:1px solid var(--io-line,#e6e3ef)!important}
  html body #influenceops-app#influenceops-app table:not(.io-dw-matrix) tbody tr:has(>td[data-label])>td:last-child:has(a,button,form)::before{display:none!important}
  html body #influenceops-app#influenceops-app table:not(.io-dw-matrix) tbody td form{display:flex!important;flex-wrap:wrap!important;gap:8px!important;margin:0!important}
  html body #influenceops-app#influenceops-app table:not(.io-dw-matrix) tbody td .io-mini{min-height:36px!important;display:inline-flex!important;align-items:center!important;justify-content:center!important;padding:7px 12px!important;margin:0!important;white-space:nowrap}
  html body #influenceops-app#influenceops-app table:not(.io-dw-matrix) tbody td .io-progress{width:100%!important;min-width:90px}
  /* empty-state rows */
  html body #influenceops-app#influenceops-app table tbody tr>td[colspan]:only-child{display:block!important;text-align:center!important;padding:18px 12px!important;color:var(--io-muted,#6b6784)!important}
  html body #influenceops-app#influenceops-app table tbody tr>td[colspan]:only-child::before{display:none!important}

}

@media (max-width:360px){
  html body #influenceops-app#influenceops-app .io-order-filters>.io-order-filter-grid,
  html body #influenceops-app#influenceops-app .io-daily-work-filters,
  html body #influenceops-app#influenceops-app table:not(.io-dw-matrix) tbody tr:has(>td[data-label]){grid-template-columns:minmax(0,1fr)!important}
}

/* ===== Simple layout (v4.0.33): Today's work, quick filters, New order, phone tab bar, order cards ===== */
/* Rows hidden by search, filters, payment filter or pagination must stay hidden in card layout too */
html body #influenceops-app#influenceops-app#influenceops-app#influenceops-app table tbody tr.io-search-hidden,
html body #influenceops-app#influenceops-app#influenceops-app#influenceops-app table tbody tr.io-filter-hidden,
html body #influenceops-app#influenceops-app#influenceops-app#influenceops-app table tbody tr.io-payment-hidden,
html body #influenceops-app#influenceops-app#influenceops-app#influenceops-app table tbody tr.io-page-hidden,
html body #influenceops-app#influenceops-app#influenceops-app#influenceops-app table tbody tr[hidden]{display:none!important}

/* Today's work boxes (dashboard) */
html body #influenceops-app#influenceops-app .io-today{margin:0 0 18px}
html body #influenceops-app#influenceops-app .io-today h3{margin:0 2px 10px;font:700 15px var(--io-body,inherit);color:var(--io-fg,#1d1a2e)}
html body #influenceops-app#influenceops-app .io-today-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:14px}
html body #influenceops-app#influenceops-app .io-today-box{display:flex;align-items:center;gap:14px;padding:16px;background:var(--io-surface,#fff);border:1px solid var(--io-line,#e6e3ef);border-radius:16px;text-decoration:none!important;color:var(--io-fg,#1d1a2e)!important;transition:transform .15s,box-shadow .15s;min-width:0}
html body #influenceops-app#influenceops-app .io-today-box:hover{transform:translateY(-2px);box-shadow:0 10px 24px rgba(23,20,43,.08)}
html body #influenceops-app#influenceops-app .io-today-box i{font-style:normal;width:42px;height:42px;border-radius:12px;display:grid;place-items:center;font-size:18px;flex:none}
html body #influenceops-app#influenceops-app .io-today-box strong{font:700 28px/1 var(--io-display,inherit);display:block}
html body #influenceops-app#influenceops-app .io-today-box span{font-size:13px;font-weight:700;color:var(--io-muted,#6b6784)}
html body #influenceops-app#influenceops-app .io-today-box>strong+span{display:block}
html body #influenceops-app#influenceops-app .io-today-box{display:grid;grid-template-columns:auto 1fr;grid-template-rows:auto auto;column-gap:14px;row-gap:4px}
html body #influenceops-app#influenceops-app .io-today-box i{grid-row:1/3}
html body #influenceops-app#influenceops-app .io-today-place i{background:#fef3c7;color:#b45309}
html body #influenceops-app#influenceops-app .io-today-pay i{background:#fdeaea;color:#c43b3b}
html body #influenceops-app#influenceops-app .io-today-review i{background:var(--io-accent-soft,#eeebff);color:var(--io-accent,#5b3df5)}
html body #influenceops-app#influenceops-app .io-today-video i{background:#e3f6ee;color:#0f8a5f}

/* Quick filter chips (All Orders) */
html body #influenceops-app#influenceops-app .io-quick{display:flex;gap:8px;flex-wrap:wrap;margin:0 0 14px}
html body #influenceops-app#influenceops-app .io-quick-chip{border:1px solid var(--io-line,#e6e3ef)!important;background:var(--io-surface,#fff)!important;color:var(--io-muted,#6b6784)!important;border-radius:99px!important;padding:7px 14px!important;font:700 13px var(--io-body,inherit)!important;cursor:pointer;box-shadow:none!important;min-height:0!important;height:auto!important;width:auto!important}
html body #influenceops-app#influenceops-app .io-quick-chip b{margin-left:6px;opacity:.7}
html body #influenceops-app#influenceops-app .io-quick-chip.on{background:var(--io-ink,#17142b)!important;border-color:var(--io-ink,#17142b)!important;color:#fff!important}

/* ＋ New order in the menu */
html body #influenceops-app#influenceops-app .io-side .io-side-new{display:flex;align-items:center;justify-content:center;margin:16px 4px 12px;height:44px;border-radius:12px;background:var(--io-accent,#5b3df5);color:#fff!important;font-weight:800;font-size:14px;text-decoration:none!important;box-shadow:0 8px 20px rgba(91,61,245,.35);flex:none}
html body #influenceops-app#influenceops-app .io-side .io-side-new:hover{background:var(--io-accent-dark,#4a2fe0)}

/* Next task (shown in cards on phone/tablet; hidden in the wide desktop table) */
html body #influenceops-app#influenceops-app #io-orders-table td.io-next-cell{display:none}
html body #influenceops-app#influenceops-app #io-orders-table thead th:last-child{}

/* Phone tab bar */
.io-tabbar{display:none}
@media (max-width:768px){
  .io-tabbar{position:fixed;left:0;right:0;bottom:0;z-index:9000;display:grid;grid-template-columns:repeat(5,1fr);background:#fff;border-top:1px solid #e6e3ef;padding:6px 4px calc(8px + env(safe-area-inset-bottom,0px));box-shadow:0 -6px 20px rgba(23,20,43,.06);font-family:"Manrope",system-ui,sans-serif}
  .io-tabbar a,.io-tabbar button{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:2px;border:0;background:none;color:#6b6784;text-decoration:none;font:700 11px "Manrope",system-ui,sans-serif;padding:4px 0;min-height:48px;cursor:pointer;-webkit-tap-highlight-color:transparent}
  .io-tabbar svg{width:22px;height:22px}
  .io-tabbar .on{color:#5b3df5}
  .io-tabbar .io-tab-new{margin-top:-22px}
  .io-tabbar .io-tab-new b{width:52px;height:52px;border-radius:16px;background:#5b3df5;color:#fff;display:grid;place-items:center;font-size:26px;font-weight:500;box-shadow:0 8px 20px rgba(91,61,245,.4)}
  body.io-has-tabbar:not(.io-menu-open) .io-mobile-menu-toggle,body.io-has-tabbar:not(.io-menu-open) #influenceops-app .io-mobile-menu-toggle{display:none!important}
  body.io-has-tabbar #influenceops-app::before{padding-left:18px!important}
  body.io-has-tabbar #influenceops-app .io-main{padding-bottom:84px!important}
  body.io-menu-open .io-tabbar{display:none}

  html body #influenceops-app#influenceops-app .io-today-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}
  html body #influenceops-app#influenceops-app .io-today-box{padding:12px;column-gap:10px}
  html body #influenceops-app#influenceops-app .io-today-box i{width:34px;height:34px;font-size:15px;grid-row:auto}
  html body #influenceops-app#influenceops-app .io-today-box{grid-template-columns:1fr}
  html body #influenceops-app#influenceops-app .io-today-box strong{font-size:24px}
  html body #influenceops-app#influenceops-app .io-today-box span{font-size:12.5px}
  html body #influenceops-app#influenceops-app .io-quick{flex-wrap:nowrap;overflow-x:auto;margin:0 -12px 12px;padding:0 12px 2px;scrollbar-width:none}
  html body #influenceops-app#influenceops-app .io-quick::-webkit-scrollbar{display:none}
  html body #influenceops-app#influenceops-app .io-quick-chip{flex:none}

  /* order tracking: folded steps */
  html body #influenceops-app#influenceops-app .io-step.io-step-closed .io-stepbox>:not(.io-step-title){display:none!important}
  html body #influenceops-app#influenceops-app .io-step .io-step-title[role=button]{cursor:pointer;position:relative;padding-right:22px!important}
  html body #influenceops-app#influenceops-app .io-step .io-step-title[role=button]::after{content:"›";position:absolute;right:2px;top:50%;transform:translateY(-50%) rotate(90deg);font-size:20px;color:var(--io-muted,#6b6784);transition:transform .2s}
  html body #influenceops-app#influenceops-app .io-step.io-step-closed .io-step-title[role=button]::after{transform:translateY(-50%) rotate(0)}
  html body #influenceops-app#influenceops-app .io-step.io-step-closed .io-step-title{border-bottom:0!important;margin-bottom:0!important}
}
@media (min-width:769px) and (max-width:1100px){
  html body #influenceops-app#influenceops-app #io-orders-table tbody tr>td.io-next-cell{display:flex!important;color:#b45309!important;font-weight:700!important}
  html body #influenceops-app#influenceops-app .io-today-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media (max-width:1100px){html body #influenceops-app#influenceops-app #io-orders-table tbody tr>td[data-label="Created"]{white-space:nowrap!important}}

/* ===== Order Tracking steps: one aligned form system (v4.0.35). Layout only. ===== */
html body #influenceops-app#influenceops-app .io-step form label:not(.io-video-rights-choice label){font:600 13px/1.35 var(--io-body,inherit)!important;color:var(--io-fg,#1d1a2e)!important;margin:0 0 14px!important;padding:0!important;border:0!important;background:none!important}
html body #influenceops-app#influenceops-app .io-step form label small{font-weight:500;color:var(--io-muted,#6b6784);font-size:11.5px}
html body #influenceops-app#influenceops-app .io-step form :is(input:not([type=radio]):not([type=checkbox]):not([type=file]):not([type=hidden]),select){width:100%!important;max-width:none!important;height:44px!important;min-height:44px!important;box-sizing:border-box!important;margin:6px 0 0!important;padding:0 12px!important;border:1px solid var(--io-line,#dedfe3)!important;border-radius:10px!important;background-color:#fff!important;font:500 15px/1.2 var(--io-body,inherit)!important;color:var(--io-fg,#1d1a2e)!important;box-shadow:none!important}
html body #influenceops-app#influenceops-app .io-step form select{appearance:none!important;-webkit-appearance:none!important;padding-right:38px!important;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1l5 5 5-5' fill='none' stroke='%236b6784' stroke-width='2' stroke-linecap='round'/%3E%3C/svg%3E")!important;background-repeat:no-repeat!important;background-position:right 14px center!important}
html body #influenceops-app#influenceops-app .io-step form textarea{width:100%!important;box-sizing:border-box!important;min-height:88px!important;margin:6px 0 0!important;padding:10px 12px!important;border:1px solid var(--io-line,#dedfe3)!important;border-radius:10px!important;font:500 14px/1.45 ui-monospace,SFMono-Regular,Menlo,monospace!important;background:#fff!important}
html body #influenceops-app#influenceops-app .io-step form :is(input,select,textarea):focus{outline:none!important;border-color:#633cff!important;box-shadow:0 0 0 3px rgba(99,60,255,.15)!important}
html body #influenceops-app#influenceops-app .io-step form :is(input,textarea)[readonly]{background:#f6f5fa!important}
html body #influenceops-app#influenceops-app .io-step form .io-track-item-combo{margin:0!important}
html body #influenceops-app#influenceops-app .io-step form fieldset:not(.io-video-rights-choice){border:0!important;padding:0!important;margin:0!important;min-width:0!important}
/* two-column field rows line up at the input, even when a label wraps */
html body #influenceops-app#influenceops-app .io-step form :is(.io-grid2,.io-two,.io-video-grid){display:grid!important;grid-template-columns:repeat(2,minmax(0,1fr))!important;gap:0 18px!important;align-items:end!important;margin:0!important}
html body #influenceops-app#influenceops-app .io-step form :is(.io-grid2,.io-two,.io-video-grid)>label{margin-bottom:14px!important}
/* helper text */
html body #influenceops-app#influenceops-app .io-step form>p,html body #influenceops-app#influenceops-app .io-step form fieldset>p,html body #influenceops-app#influenceops-app .io-step .io-auto-save-note,html body #influenceops-app#influenceops-app .io-step .io-step-actions>span{font:400 13px/1.45 var(--io-body,inherit)!important;color:var(--io-muted,#6b6784)!important;margin:0 0 12px!important}
html body #influenceops-app#influenceops-app .io-step .io-upload{margin-top:6px!important}
html body #influenceops-app#influenceops-app .io-step .io-proof-saved{margin:0 0 14px!important}
html body #influenceops-app#influenceops-app .io-step .io-video-approved-lock>a{display:inline-block;margin:0 0 6px!important;font:600 13px var(--io-body,inherit);color:#633cff!important}
/* radio choices: left-aligned pills */
html body #influenceops-app#influenceops-app .io-step .io-video-rights-choice{display:flex!important;flex-wrap:wrap!important;gap:10px!important;align-items:center!important;margin:6px 0 16px!important;padding:14px!important}
html body #influenceops-app#influenceops-app .io-step .io-video-rights-choice>label{display:inline-flex!important;flex-direction:row!important;align-items:center!important;justify-content:flex-start!important;gap:8px!important;width:auto!important;min-height:40px!important;margin:0!important;padding:8px 14px!important;border:1px solid transparent!important;border-radius:10px!important;background:#f7f5ff!important;font:600 14px var(--io-body,inherit)!important;text-align:left!important;cursor:pointer}
html body #influenceops-app#influenceops-app .io-step .io-video-rights-choice>label:has(input:checked){border-color:#633cff!important;background:#efeaff!important}
html body #influenceops-app#influenceops-app .io-step .io-video-rights-choice>label>input[type=radio]{order:-1;flex:0 0 18px!important;width:18px!important;height:18px!important;min-height:0!important;margin:0!important;padding:0!important;accent-color:#633cff}
html body #influenceops-app#influenceops-app .io-step .io-video-rights-choice>label::before{display:none!important}
/* action row: main save on the left, undo on the right */
html body #influenceops-app#influenceops-app .io-step .io-step-actions{display:flex!important;flex-wrap:wrap!important;align-items:center!important;gap:10px 14px!important;margin:16px 0 0!important;padding-top:16px!important;border-top:1px solid var(--io-line,#eceaf3)!important}
html body #influenceops-app#influenceops-app .io-step .io-step-actions>span{margin:0!important;flex:1 1 200px}
html body #influenceops-app#influenceops-app .io-step .io-step-actions>button:not(.io-unmark):not([type=button]),html body #influenceops-app#influenceops-app .io-step .io-right>button{display:inline-flex!important;align-items:center!important;justify-content:center!important;height:44px!important;padding:0 20px!important;border:0!important;border-radius:10px!important;background:#633cff!important;color:#fff!important;font:700 14px var(--io-body,inherit)!important;width:auto!important;cursor:pointer}
html body #influenceops-app#influenceops-app .io-step .io-step-actions>button:not(.io-unmark):not([type=button]):hover,html body #influenceops-app#influenceops-app .io-step .io-right>button:hover{background:#5230e0!important}
html body #influenceops-app#influenceops-app .io-step .io-step-actions>.io-unmark{order:9;margin-left:auto!important;height:44px!important;padding:0 16px!important;border:1px solid #f3c7c7!important;border-radius:10px!important;background:#fff!important;color:#b42318!important;font:600 13px var(--io-body,inherit)!important;width:auto!important}
html body #influenceops-app#influenceops-app .io-step .io-right{display:flex!important;justify-content:flex-end!important;margin:16px 0 0!important;padding-top:16px!important;border-top:1px solid var(--io-line,#eceaf3)!important}
/* metrics: four equal boxes */
html body #influenceops-app#influenceops-app .io-step .io-metrics{display:grid!important;grid-template-columns:repeat(4,minmax(0,1fr))!important;gap:12px!important;border:0!important;padding:0!important}
html body #influenceops-app#influenceops-app .io-step .io-metrics>label{margin:0!important;padding:12px!important;border:1px solid var(--io-line,#dedfe3)!important;border-radius:12px!important;background:#fbfaff!important;font-size:12.5px!important;color:var(--io-muted,#6b6784)!important}
html body #influenceops-app#influenceops-app .io-step .io-metrics>label>input{font:700 20px var(--io-body,inherit)!important;height:46px!important}
/* payment: saved details in one row */
html body #influenceops-app#influenceops-app .io-step .io-payment-summary{display:grid!important;grid-template-columns:repeat(3,minmax(0,1fr))!important;gap:12px!important;align-items:start!important}
html body #influenceops-app#influenceops-app .io-step .io-payment-summary>small{grid-column:1/-1}
html body #influenceops-app#influenceops-app .io-step .io-payment-summary-row{border:0!important;padding:0!important;margin:0!important}
html body #influenceops-app#influenceops-app .io-step .io-payment-summary-row strong{font-size:17px!important}
html body #influenceops-app#influenceops-app .io-step .io-payment-limit{padding:14px 16px!important;margin:0 0 16px!important}
html body #influenceops-app#influenceops-app .io-step .io-payment-limit p{margin:4px 0 0!important;font-size:13px!important}
html body #influenceops-app#influenceops-app .io-step-title{align-items:flex-start!important}
html body #influenceops-app#influenceops-app .io-step-title>em{flex:0 0 auto;white-space:nowrap}
@media (max-width:768px){
  html body #influenceops-app#influenceops-app .io-step form :is(.io-grid2,.io-two,.io-video-grid){grid-template-columns:minmax(0,1fr)!important}
  html body #influenceops-app#influenceops-app .io-step .io-video-rights-choice>label{flex:1 1 calc(50% - 10px)!important}
  html body #influenceops-app#influenceops-app .io-step .io-step-actions{flex-direction:column!important;align-items:stretch!important}
  html body #influenceops-app#influenceops-app .io-step .io-step-actions>button,html body #influenceops-app#influenceops-app .io-step .io-right>button{width:100%!important;margin:0!important}
  html body #influenceops-app#influenceops-app .io-step .io-step-actions>span{flex:none;text-align:center}
  html body #influenceops-app#influenceops-app .io-step .io-metrics{grid-template-columns:repeat(2,minmax(0,1fr))!important}
  html body #influenceops-app#influenceops-app .io-step .io-payment-summary{grid-template-columns:1fr 1fr!important}
  html body #influenceops-app#influenceops-app .io-step .io-proof-saved{max-width:none!important}
}
/* order card: the dashed line above Next task and Track runs the full width */
@media (max-width:1100px){html body #influenceops-app#influenceops-app#influenceops-app #io-orders-table tbody tr>td.io-next-cell{margin-right:-14px!important;padding-right:14px!important;justify-content:flex-start!important}}
/* filters: Reset sits beside To Date instead of its own full row */
@media (min-width:361px) and (max-width:768px){html body #influenceops-app#influenceops-app#influenceops-app .io-order-filters .io-order-filter-grid>.io-order-filter-actions{grid-column:auto!important;align-self:end!important}
html body #influenceops-app#influenceops-app#influenceops-app .io-order-filters .io-order-filter-grid>.io-order-filter-actions>button{width:100%!important;height:44px!important}}
/* phone: number cards are compact (icon left, number + label right), same size everywhere */
@media (max-width:768px){
  html body #influenceops-app#influenceops-app .io-cards{gap:10px!important;margin-bottom:14px!important}
  html body #influenceops-app#influenceops-app .io-cards>div{display:grid!important;grid-template-columns:34px minmax(0,1fr)!important;grid-template-rows:auto auto!important;column-gap:10px!important;row-gap:0!important;align-items:center!important;padding:12px!important;min-height:0!important;height:auto!important}
  html body #influenceops-app#influenceops-app .io-cards>div>i{grid-row:1/3!important;width:34px!important;height:34px!important;margin:0!important;font-size:15px!important}
  html body #influenceops-app#influenceops-app .io-cards>div>strong{font-size:22px!important;line-height:1.1!important;margin:0!important;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
  html body #influenceops-app#influenceops-app .io-cards>div>span{font-size:12px!important;line-height:1.3!important;margin:0!important;color:var(--io-muted,#6b6784)!important}
  html body #influenceops-app#influenceops-app .io-cards>div:last-child:nth-child(odd){grid-column:1/-1!important}
}
/* desktop wide tables: when a table is wider than the screen, the first column stays pinned on the left and the action column on the right while the middle scrolls */
@media (min-width:1101px){
  html body #influenceops-app#influenceops-app .io-x-scroll>table:not(.io-dw-matrix) :is(thead th,tbody td):first-child{position:sticky;left:0;z-index:2;background:#fff;box-shadow:8px 0 10px -8px rgba(30,20,60,.18)}
  html body #influenceops-app#influenceops-app .io-x-scroll>table:not(.io-dw-matrix) :is(thead th,tbody td):last-child{position:sticky;right:0;z-index:2;background:#fff;box-shadow:-8px 0 10px -8px rgba(30,20,60,.18)}
  html body #influenceops-app#influenceops-app .io-x-scroll>table:not(.io-dw-matrix) thead th:is(:first-child,:last-child){background:#f6f5fa}
}
html body #influenceops-app#influenceops-app .io-quick{margin-top:14px!important}
/* Order cards use the same layout on phones and tablets */
@media (max-width:1100px){
  /* Order card: name + amount, details, Placed/Paid/Review/Live/Video icons, next task + Track */
  html body #influenceops-app#influenceops-app #io-orders-table tbody tr:has(>td[data-label]){grid-template-columns:repeat(5,minmax(0,1fr))!important;gap:10px 6px!important;padding:14px 14px 12px!important}
  html body #influenceops-app#influenceops-app #io-orders-table tbody tr>td{grid-column:auto!important;border:0!important;padding:0!important}
  html body #influenceops-app#influenceops-app #io-orders-table tbody tr>td[data-label="Influencer"]{grid-column:1/5!important;grid-row:1;font-size:16px!important;padding:0!important;border:0!important}
  html body #influenceops-app#influenceops-app #io-orders-table tbody tr>td[data-label="Influencer"]::before{display:none!important}
  html body #influenceops-app#influenceops-app #io-orders-table tbody tr>td[data-label="Amount"]{grid-column:5/6!important;grid-row:1;align-items:flex-end!important;text-align:right!important;font-size:15px!important}
  html body #influenceops-app#influenceops-app #io-orders-table tbody tr>td[data-label="Amount"]::before{display:none!important}
  html body #influenceops-app#influenceops-app #io-orders-table tbody tr>td[data-label="Item"]{grid-column:1/4!important;grid-row:2}
  html body #influenceops-app#influenceops-app #io-orders-table tbody tr>td[data-label="Portal"]{grid-column:4/5!important;grid-row:2}
  html body #influenceops-app#influenceops-app #io-orders-table tbody tr>td[data-label="Order Type"]{grid-column:5/6!important;grid-row:2;align-items:flex-end!important}
  html body #influenceops-app#influenceops-app #io-orders-table tbody tr>td[data-label="Brand"]{grid-column:1/3!important;grid-row:3}
  html body #influenceops-app#influenceops-app #io-orders-table tbody tr>td[data-label="Size"]{grid-column:3/4!important;grid-row:3}
  html body #influenceops-app#influenceops-app #io-orders-table tbody tr>td[data-label="Qty"]{grid-column:4/5!important;grid-row:3}
  html body #influenceops-app#influenceops-app #io-orders-table tbody tr>td[data-label="Created"]{grid-column:5/6!important;grid-row:3;align-items:flex-end!important}
  /* icon row */
  html body #influenceops-app#influenceops-app #io-orders-table tbody tr>td:is([data-label="Placed"],[data-label="Paid"],[data-label="Review"],[data-label="Review Live"],[data-label="Video"]){grid-row:4;align-items:center!important;text-align:center!important;background:var(--io-bg,#f6f5fa);padding:10px 0 8px!important;font-size:12px!important}
  html body #influenceops-app#influenceops-app #io-orders-table tbody tr>td[data-label="Placed"]{grid-column:1/2!important;border-radius:12px 0 0 12px!important}
  html body #influenceops-app#influenceops-app #io-orders-table tbody tr>td[data-label="Paid"]{grid-column:2/3!important}
  html body #influenceops-app#influenceops-app #io-orders-table tbody tr>td[data-label="Review"]{grid-column:3/4!important}
  html body #influenceops-app#influenceops-app #io-orders-table tbody tr>td[data-label="Review Live"]{grid-column:4/5!important}
  html body #influenceops-app#influenceops-app #io-orders-table tbody tr>td[data-label="Video"]{grid-column:5/6!important;border-radius:0 12px 12px 0!important}
  html body #influenceops-app#influenceops-app #io-orders-table tbody tr:has(>td[data-label="Placed"]){column-gap:0!important}
  html body #influenceops-app#influenceops-app #io-orders-table tbody tr>td:is([data-label="Placed"],[data-label="Paid"],[data-label="Review"],[data-label="Review Live"],[data-label="Video"])::before{order:2;font-size:10.5px!important;color:var(--io-fg,#1d1a2e)!important;font-weight:700!important;margin-top:2px!important}
  html body #influenceops-app#influenceops-app #io-orders-table tbody tr>td:is([data-label="Placed"],[data-label="Paid"],[data-label="Review"],[data-label="Review Live"],[data-label="Video"]) .io-status-date{display:contents!important}
  html body #influenceops-app#influenceops-app #io-orders-table tbody tr>td:is([data-label="Placed"],[data-label="Paid"],[data-label="Review"],[data-label="Review Live"],[data-label="Video"]) .io-status-date>:first-child{order:1}
  html body #influenceops-app#influenceops-app #io-orders-table tbody tr>td:is([data-label="Placed"],[data-label="Paid"],[data-label="Review"],[data-label="Review Live"],[data-label="Video"]) .io-status-date>:not(:first-child){order:3}
  html body #influenceops-app#influenceops-app #io-orders-table tbody tr>td:is([data-label="Placed"],[data-label="Paid"],[data-label="Review"],[data-label="Review Live"],[data-label="Video"]) small{font-size:9.5px!important;white-space:nowrap}
  html body #influenceops-app#influenceops-app #io-orders-table tbody tr>td:is([data-label="Placed"],[data-label="Paid"],[data-label="Review"],[data-label="Review Live"],[data-label="Video"]) .io-dot{width:32px!important;height:32px!important;min-width:32px!important}
  /* small numbers row */
  html body #influenceops-app#influenceops-app #io-orders-table tbody tr>td[data-label="Created By"]{grid-column:1/3!important;grid-row:5}
  html body #influenceops-app#influenceops-app #io-orders-table tbody tr>td[data-label="Views"]{grid-column:3/4!important;grid-row:5}
  html body #influenceops-app#influenceops-app #io-orders-table tbody tr>td[data-label="Engage"]{grid-column:4/5!important;grid-row:5}
  html body #influenceops-app#influenceops-app #io-orders-table tbody tr>td:is([data-label="Item"],[data-label="Portal"],[data-label="Order Type"],[data-label="Brand"],[data-label="Size"],[data-label="Qty"],[data-label="Created"],[data-label="Created By"],[data-label="Views"],[data-label="Engage"]){font-size:12.5px!important}
  /* next task + Track */
  html body #influenceops-app#influenceops-app #io-orders-table tbody tr>td.io-next-cell{display:flex!important;grid-column:1/4!important;grid-row:6;align-self:center!important;justify-content:center!important;color:#b45309!important;font-weight:700!important;font-size:13px!important;padding-top:10px!important;border-top:1px dashed var(--io-line,#e6e3ef)!important}
  html body #influenceops-app#influenceops-app #io-orders-table tbody tr>td.io-next-cell.io-next-done{color:#0f8a5f!important}
  html body #influenceops-app#influenceops-app #io-orders-table tbody tr>td.io-next-cell::before{display:none!important}
  html body #influenceops-app#influenceops-app #io-orders-table tbody tr>td[data-label="Action"]{grid-column:4/6!important;grid-row:6;justify-content:flex-end!important;padding-top:10px!important;border-top:1px dashed var(--io-line,#e6e3ef)!important}
}
@media (max-width:1100px){
  /* icon row: every status cell fills the full row height so the grey strip has no gaps */
  html body #influenceops-app#influenceops-app#influenceops-app #io-orders-table tbody tr>td:is([data-label="Placed"],[data-label="Paid"],[data-label="Review"],[data-label="Review Live"],[data-label="Video"]){align-self:stretch!important;justify-content:flex-start!important}
  /* next task + Track share one straight dashed line */
  html body #influenceops-app#influenceops-app#influenceops-app #io-orders-table tbody tr>td.io-next-cell,
  html body #influenceops-app#influenceops-app#influenceops-app #io-orders-table tbody tr>td[data-label="Action"]{align-self:stretch!important;align-items:center!important;margin-top:0!important;padding-top:10px!important;border-top:1px dashed var(--io-line,#e6e3ef)!important}
  html body #influenceops-app#influenceops-app#influenceops-app #io-orders-table tbody tr>td.io-next-cell{margin-right:0!important;padding-right:0!important;flex-direction:row!important;justify-content:flex-start!important;text-align:left!important}
  html body #influenceops-app#influenceops-app#influenceops-app #io-orders-table tbody tr:has(>td.io-next-cell){column-gap:0!important}
  html body #influenceops-app#influenceops-app#influenceops-app #io-orders-table tbody tr>td:is([data-label="Item"],[data-label="Brand"],[data-label="Created By"]){padding-right:8px!important}
}