/* Relaxis premium command-centre theme */
:root{
  --ink:#f8fafc;
  --ink-soft:#cbd5e1;
  --paper:#05080d;
  --card:#0d131c;
  --line:rgba(255,174,0,.18);
  --route:#ffb000;
  --route-deep:#ff5a1f;
  --paid:#22c55e;
  --paid-bg:rgba(34,197,94,.12);
  --unpaid:#ff4b36;
  --unpaid-bg:rgba(255,75,54,.14);
  --cod:#ff9800;
  --cod-bg:rgba(255,152,0,.14);
  --credit:#208cff;
  --credit-bg:rgba(32,140,255,.14);
  --radius:16px;
  --relaxis-gold:#ffbf00;
  --relaxis-orange:#ff6b18;
  --relaxis-red:#e83b20;
  --relaxis-blue:#087bff;
  --relaxis-deep-blue:#063a8c;
  --relaxis-panel:linear-gradient(180deg,rgba(18,24,35,.97),rgba(8,13,21,.97));
  --relaxis-glow:0 0 0 1px rgba(255,180,0,.05),0 18px 45px rgba(0,0,0,.35);
}

@media screen{
  html{background:#03060a;color-scheme:dark}
  body{
    min-height:100%;
    background:
      radial-gradient(circle at 76% 2%,rgba(8,123,255,.13),transparent 31rem),
      radial-gradient(circle at 35% 0%,rgba(255,84,23,.13),transparent 29rem),
      linear-gradient(180deg,#05080d 0%,#060a10 42%,#03060a 100%);
    color:#f8fafc;
  }
  body::before{
    content:"";
    position:fixed;inset:0;pointer-events:none;z-index:-1;
    background-image:linear-gradient(rgba(255,255,255,.018) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.018) 1px,transparent 1px);
    background-size:38px 38px;
    mask-image:linear-gradient(to bottom,rgba(0,0,0,.72),transparent 84%);
  }
  .app{background:transparent}

  /* Sidebar */
  .sidebar{
    width:238px;flex-basis:238px;padding:20px 15px 16px;
    background:linear-gradient(180deg,#020406 0%,#05080d 58%,#020406 100%)!important;
    border-right:1px solid rgba(255,164,0,.16);
    box-shadow:24px 0 70px rgba(0,0,0,.35);
    color:#fff;
  }
  .brand{
    width:100%;display:flex;justify-content:center;padding:0 5px 3px;
  }
  .brand img{
    width:180px;height:126px;object-fit:cover;object-position:center;
    border-radius:14px;filter:drop-shadow(0 0 18px rgba(255,119,0,.2));
  }
  .brand .brand-text{display:none}
  .workspace{
    margin:-3px 0 20px;text-align:center;color:#a6b0c2!important;font-size:11px;letter-spacing:.12em;text-transform:uppercase
  }
  .nav-label{padding:0 9px;margin-bottom:8px;color:#59657a!important;font-size:10px;letter-spacing:.16em}
  .nav button{
    min-height:46px;margin-bottom:6px;padding:8px 11px;border:1px solid transparent;border-radius:12px;
    color:#d7dde7!important;font-weight:600;transition:transform .18s ease,background .18s ease,border-color .18s ease,box-shadow .18s ease
  }
  .nav button:hover:not(.active){
    background:rgba(255,255,255,.045)!important;border-color:rgba(255,255,255,.07);transform:translateX(2px)
  }
  .nav button.active{
    color:#fff!important;
    background:linear-gradient(90deg,rgba(255,173,0,.95),rgba(232,50,25,.92))!important;
    border-color:rgba(255,214,112,.58);
    box-shadow:0 8px 25px rgba(244,78,20,.25),inset 0 1px rgba(255,255,255,.18)
  }
  .nav button .glyph{
    width:30px;height:30px;border-radius:9px;display:grid;place-items:center;flex:0 0 30px;
    background:rgba(255,255,255,.055);color:#ffb000!important;border:1px solid rgba(255,180,0,.11)
  }
  .nav button.active .glyph{background:rgba(0,0,0,.18);color:#fff!important;border-color:rgba(255,255,255,.2)}
  .nav button .glyph svg{width:17px;height:17px;display:block}
  .nav button .badge{background:rgba(255,255,255,.1)!important;color:#fff!important}
  .progress-card{
    padding:15px;background:linear-gradient(145deg,rgba(255,177,0,.13),rgba(225,48,25,.08))!important;
    border:1px solid rgba(255,174,0,.2);box-shadow:inset 0 1px rgba(255,255,255,.04)
  }
  .progress-top strong{color:#ffc526!important}.track{background:rgba(255,255,255,.1)!important}.track span{background:linear-gradient(90deg,#ffc400,#ff6a00,#e62e20)!important}
  .user{border:1px solid rgba(255,255,255,.07);background:rgba(255,255,255,.035)!important;margin-bottom:8px}
  .avatar{background:linear-gradient(135deg,#ffba00,#f0441e)!important;box-shadow:0 0 20px rgba(255,120,0,.25)}
  .sidebar>.div,.sidebar .ghost-btn{color:#fff}
  .sidebar #authBtn{background:rgba(255,255,255,.04)!important;border-color:rgba(255,255,255,.1)!important}
  .sb-themes{display:none!important}

  /* Header */
  .main{background:transparent}
  .topbar{
    min-height:72px;padding:13px 24px;
    background:rgba(4,8,13,.88)!important;border-bottom:1px solid rgba(255,174,0,.13)!important;
    backdrop-filter:blur(18px);box-shadow:0 12px 36px rgba(0,0,0,.2)
  }
  .saved{color:#aeb8c7}.saved .dot{box-shadow:0 0 16px currentColor}
  .topbar-actions{gap:8px}
  .ghost-btn,.mini-btn,.vt-btn,.date-nav{
    background:rgba(255,255,255,.035)!important;color:#d8dee8!important;border-color:rgba(255,255,255,.11)!important;
    box-shadow:inset 0 1px rgba(255,255,255,.025)
  }
  .ghost-btn:hover,.mini-btn:hover,.vt-btn:hover,.date-nav:hover{background:rgba(255,179,0,.1)!important;border-color:rgba(255,179,0,.36)!important;color:#fff!important}
  .primary-btn{
    color:#fff!important;background:linear-gradient(100deg,#ffb400 0%,#ff6b00 45%,#e93620 100%)!important;
    border:1px solid rgba(255,217,117,.55);box-shadow:0 10px 26px rgba(233,59,32,.2),inset 0 1px rgba(255,255,255,.2)
  }
  .primary-btn:hover{filter:brightness(1.08);transform:translateY(-1px)}
  .today-chip{color:#ffcc54;background:rgba(255,174,0,.1);border:1px solid rgba(255,174,0,.2)}

  /* Main content */
  .wrap{padding:24px 25px 42px;max-width:1680px}
  .heading{
    position:relative;overflow:hidden;min-height:184px;padding:28px 310px 28px 28px;margin-bottom:18px;
    align-items:center;border:1px solid rgba(255,156,0,.25);border-radius:20px;
    background:
      linear-gradient(90deg,rgba(16,18,25,.98) 0%,rgba(22,14,13,.95) 38%,rgba(8,20,34,.93) 100%),
      radial-gradient(circle at 70% 30%,rgba(255,174,0,.4),transparent 18rem);
    box-shadow:var(--relaxis-glow)
  }
  .heading::before{
    content:"";position:absolute;inset:-30% 30% -50% -10%;pointer-events:none;
    background:radial-gradient(circle,rgba(235,55,25,.2),transparent 58%);filter:blur(18px)
  }
  .heading>div,.heading>button{position:relative;z-index:1}
  .heading .eyebrow{color:#ffb325;margin-bottom:8px}
  .heading h1{font-size:34px;line-height:1.08;color:#fff;max-width:650px;text-shadow:0 2px 20px rgba(0,0,0,.3)}
  .heading p.sub{color:#c5ccd7;max-width:720px;margin-top:10px;font-size:15px}
  .eyebrow{color:#ffad19}

  /* Tabs/date */
  .sheet-tabs{
    background:rgba(255,255,255,.035)!important;border:1px solid rgba(255,174,0,.15);padding:5px;border-radius:13px
  }
  .sheet-tabs button{color:#aab4c3}
  .sheet-tabs button.active{color:#fff;background:linear-gradient(100deg,rgba(255,176,0,.92),rgba(239,62,25,.92))!important;box-shadow:0 8px 18px rgba(232,54,27,.16)}
  .sheet-tabs button .count{color:inherit!important;opacity:.8}
  .date-bar{
    padding:13px 15px;background:rgba(12,17,25,.88)!important;border-color:rgba(255,174,0,.16)!important;box-shadow:var(--relaxis-glow)
  }
  .cal{background:linear-gradient(135deg,#ffbd00,#f0441e)!important;color:#fff!important;box-shadow:0 6px 18px rgba(242,68,28,.18)}
  .date-picker small,.date-count{color:#8e9aae}.date-picker strong,.date-count strong{color:#f8fafc}.today-btn{color:#ffb51b!important}

  /* Metrics */
  .metrics{grid-template-columns:repeat(4,minmax(0,1fr));gap:12px;margin-bottom:18px}
  .metric{
    position:relative;overflow:hidden;min-height:126px;padding:16px 17px;
    background:var(--relaxis-panel)!important;border-color:rgba(255,174,0,.18)!important;box-shadow:var(--relaxis-glow)
  }
  .metric::before{content:"";position:absolute;left:0;top:0;bottom:0;width:3px;background:linear-gradient(#ffc400,#ff6a00,#e73221)}
  .metric::after{content:"";position:absolute;right:-28px;top:-34px;width:100px;height:100px;border-radius:50%;background:radial-gradient(circle,rgba(255,174,0,.13),transparent 68%)}
  .metric .label{color:#9ca7b7;letter-spacing:.08em}
  .metric strong{font-size:27px;color:#fff}
  .metric small{color:#8894a5}
  .metric:nth-child(2)::before{background:linear-gradient(#1ba1ff,#0670ff)}
  .metric:nth-child(3)::before{background:linear-gradient(#ffce26,#ff8a00)}
  .metric.outstanding{background:linear-gradient(180deg,rgba(33,17,18,.97),rgba(12,12,18,.97))!important;border-color:rgba(255,68,43,.25)!important}
  .metric.outstanding strong{color:#ff7059}

  /* Panels and controls */
  .panel{
    background:var(--relaxis-panel)!important;border-color:rgba(255,174,0,.17)!important;
    box-shadow:var(--relaxis-glow);border-radius:17px
  }
  .panel+.panel{margin-top:18px}
  .toolbar{padding:18px 19px 13px;border-bottom:1px solid rgba(255,255,255,.035)}
  .toolbar h2{color:#fff}.toolbar .eyebrow{margin-bottom:2px}
  .search{background:rgba(0,0,0,.23)!important;border-color:rgba(255,255,255,.1)!important;color:#e8edf5}
  .search input{color:#f8fafc}.search input::placeholder{color:#6f7b8d}
  .filters{border-bottom:1px solid rgba(255,255,255,.04)}
  .filters>span,.filters small{color:#8e99a9}
  .pills button,.status-chips .sf-chip{
    background:rgba(255,255,255,.035)!important;color:#aeb8c7!important;border-color:rgba(255,255,255,.09)!important
  }
  .pills button:hover,.status-chips .sf-chip:hover{border-color:rgba(255,174,0,.28)!important;color:#fff!important}
  .pills button.active,.status-chips .sf-chip.active{background:linear-gradient(100deg,#ffae00,#ed4420)!important;border-color:transparent!important;color:#fff!important}
  .view-toolbar{background:rgba(3,7,12,.45)!important;border-color:rgba(255,255,255,.04)!important}
  .vt-toggle{background:rgba(255,255,255,.035)!important;border-color:rgba(255,255,255,.09)!important;color:#aeb8c7!important}
  .vt-toggle:has(input:checked){background:rgba(255,174,0,.1)!important;border-color:rgba(255,174,0,.26)!important;color:#fff!important}
  .vt-toggle input{background:#394150}.vt-toggle input:checked{background:linear-gradient(90deg,#ffb700,#f04a20)}
  .vt-menu{background:#101720!important;border-color:rgba(255,174,0,.2)!important;color:#eef2f7;box-shadow:0 20px 60px rgba(0,0,0,.55)}
  .vt-menu label:hover,.vt-col-row:hover{background:rgba(255,174,0,.07)!important}
  .vt-col-row{background:transparent!important}.vt-col-row .vt-col-name{color:#eef2f7!important}
  .vt-menu .vt-cc-row input[type=text]{background:#080d14!important;color:#fff;border-color:rgba(255,255,255,.1)!important}

  /* Tables */
  .table-scroll{scrollbar-color:#875100 #0b1018;scrollbar-width:thin}
  table{color:#dbe2ec;background:transparent}
  thead th{
    position:sticky;top:0;z-index:1;background:#0a0f17!important;color:#99a6b8!important;
    border-bottom:1px solid rgba(255,174,0,.2)!important;text-transform:uppercase;letter-spacing:.075em;font-size:10.5px
  }
  tbody td{border-bottom-color:rgba(255,255,255,.055)!important;color:#d7dee8}
  tbody tr{transition:background .14s ease,box-shadow .14s ease}
  tbody tr:nth-child(even){background:rgba(255,255,255,.012)}
  tbody tr:hover{background:linear-gradient(90deg,rgba(255,173,0,.075),rgba(255,255,255,.018))!important;box-shadow:inset 3px 0 #ff9d00}
  tbody tr.selected{background:rgba(255,153,0,.11)!important;box-shadow:inset 3px 0 #ffb000}
  tfoot td{background:#080d14!important;color:#fff!important;border-top-color:rgba(255,174,0,.22)!important}
  table a{color:#4ca5ff}
  select,input,textarea{accent-color:#ffac00}
  td select,table input,table textarea{
    background:rgba(255,255,255,.035)!important;color:#f7fafc!important;border-color:rgba(255,255,255,.09)!important
  }
  option{background:#0c121b;color:#fff}
  .pay,.status,.tag,.badge{border:1px solid transparent}
  .pay.paid,.status.completed{background:rgba(34,197,94,.14)!important;color:#5de38c!important;border-color:rgba(34,197,94,.24)!important}
  .pay.unpaid,.status.exception{background:rgba(239,68,68,.14)!important;color:#ff7868!important;border-color:rgba(239,68,68,.26)!important}
  .pay.cod,.status.pending{background:rgba(255,158,0,.14)!important;color:#ffc247!important;border-color:rgba(255,158,0,.25)!important}
  .pay.credit,.status.progress{background:rgba(21,124,255,.15)!important;color:#5da8ff!important;border-color:rgba(21,124,255,.24)!important}
  .note{background:rgba(255,172,0,.055)!important;border-top-color:rgba(255,174,0,.12)!important;color:#9ba6b5}
  .note strong{color:#fff}.tip{background:linear-gradient(135deg,#ffb500,#f04420)!important;color:#fff!important}

  /* Forms and overlays */
  .overlay{background:rgba(0,0,0,.73)!important;backdrop-filter:blur(8px)}
  .modal{
    background:linear-gradient(180deg,#121923,#090e16)!important;color:#f8fafc;border:1px solid rgba(255,174,0,.2);
    box-shadow:0 30px 90px rgba(0,0,0,.66),0 0 40px rgba(255,80,20,.07)
  }
  .modal-head{background:rgba(3,7,12,.5)!important;border-bottom-color:rgba(255,255,255,.06)!important}
  .modal-foot{background:rgba(3,7,12,.4)!important;border-top-color:rgba(255,255,255,.06)!important}
  .field label{color:#c6ced9!important}
  .field input,.field select,.field textarea,.rd-field input,.rd-field select{
    background:#070c13!important;color:#f8fafc!important;border-color:rgba(255,255,255,.11)!important
  }
  .field input:focus,.field select:focus,.field textarea:focus{outline-color:#ff9d00!important;border-color:#ff9d00!important;box-shadow:0 0 0 3px rgba(255,157,0,.1)}
  .field input[type=file]{background:#080d14!important}
  .close-btn{color:#c5ceda!important;background:rgba(255,255,255,.04)!important;border-color:rgba(255,255,255,.09)!important}
  .danger-btn{background:rgba(239,68,68,.12)!important;color:#ff7768!important;border-color:rgba(239,68,68,.24)!important}
  .toast,.relay-toast{background:#101821!important;color:#fff!important;border:1px solid rgba(255,174,0,.2);box-shadow:0 18px 55px rgba(0,0,0,.5)}

  /* Secondary views */
  #view-customers .heading,#view-orders .heading,#view-reports .heading{min-height:154px}
  #view-customers .heading::after,#view-orders .heading::after,#view-reports .heading::after{width:205px;height:145px;opacity:.72}
  .rep td,.rep th{border-color:rgba(255,255,255,.055)!important}
  .foot{color:#6f7b8b}

  /* Branding helpers */
  .mobile-brand img{width:38px;height:38px;object-fit:cover;border-radius:10px}
  .mobile-brand .brand-rel,.mobile-brand .brand-ay{color:#fff!important}
  .mobile-brand .brand-x{background:linear-gradient(135deg,#087bff 0 50%,#ffb000 50% 100%);-webkit-background-clip:text;background-clip:text;color:transparent}

  /* Responsive */
  @media (max-width:1150px){
    .sidebar{width:214px;flex-basis:214px}.brand img{width:165px;height:116px}.heading{padding-right:240px}.heading::after{width:205px}
    .metrics{grid-template-columns:repeat(2,minmax(0,1fr))}
  }
  @media (max-width:800px){
    body{background:#05080d}
    .sidebar{background:#020406!important;border-right:0;border-bottom:1px solid rgba(255,174,0,.13)}
    .topbar{min-height:60px;padding:10px 12px}
    .mobile-brand{display:flex;color:#fff}.mobile-brand .brand-text{font-size:18px}
    .wrap{padding:14px 12px 98px}
    .heading{min-height:164px;padding:21px 145px 21px 18px;border-radius:16px}
    .heading h1{font-size:25px}.heading p.sub{font-size:13px}.heading::after{right:8px;width:138px;height:110px}
    .heading>div:last-child{width:100%;margin-top:6px}
    .metrics{grid-template-columns:repeat(2,minmax(0,1fr));gap:9px}.metric{min-height:108px;padding:13px}.metric strong{font-size:23px}
    .panel{border-radius:15px}.toolbar{padding:15px 14px 12px}.view-toolbar{padding:9px 12px}.filters{padding:0 14px 12px}
    .date-bar{padding:10px}.date-count{width:100%;padding-top:7px;border-top:1px solid rgba(255,255,255,.06)}
    .sheet-tabs{width:100%;overflow-x:auto;display:flex}.sheet-tabs button{flex:0 0 auto;padding:8px 15px}
  }
  @media (max-width:480px){
    .heading{padding:18px 18px 118px;align-items:flex-start}.heading::after{left:50%;right:auto;top:auto;bottom:6px;transform:translateX(-50%);width:145px;height:104px}
    .heading h1{font-size:22px}.metrics{grid-template-columns:1fr 1fr}.metric{min-height:104px}.metric .label{font-size:10px}.metric strong{font-size:22px}
    .topbar-actions .ghost-btn{padding:7px 9px;font-size:12px}.saved{display:none}
  }
}

@media print{
  body{background:#fff!important;color:#111!important}
}

/* Relaxis mobile completion pass v2 - overrides legacy runtime mobile CSS */
@media screen and (max-width:640px){
  body{
    background:
      radial-gradient(circle at 12% 0%,rgba(232,59,32,.16),transparent 18rem),
      radial-gradient(circle at 92% 5%,rgba(8,123,255,.15),transparent 20rem),
      #05080d!important;
  }

  .topbar{
    min-height:72px!important;
    padding:10px 14px!important;
    gap:10px!important;
    background:rgba(3,7,12,.96)!important;
    border-bottom:1px solid rgba(255,174,0,.18)!important;
    box-shadow:0 12px 34px rgba(0,0,0,.42)!important;
  }
  .topbar .mobile-brand{gap:9px!important;min-width:0}
  .topbar .mobile-brand img{
    width:44px!important;height:44px!important;object-fit:contain!important;
    border-radius:11px!important;background:#07101c!important;
    border:1px solid rgba(255,174,0,.18)!important;
    box-shadow:0 0 18px rgba(255,104,20,.16)!important;
  }
  .topbar .mobile-brand .brand-text{font-size:22px!important;color:#fff!important;letter-spacing:-.02em}
  .topbar-actions{gap:7px!important}
  .topbar-actions .ghost-btn{
    min-height:44px!important;padding:8px 13px!important;border-radius:12px!important;
    background:linear-gradient(180deg,rgba(22,28,39,.95),rgba(10,15,23,.95))!important;
    border:1px solid rgba(255,174,0,.15)!important;color:#dce3ed!important;
    box-shadow:inset 0 1px rgba(255,255,255,.04),0 8px 20px rgba(0,0,0,.18)!important;
  }
  .topbar-actions .ghost-btn:active{border-color:rgba(255,174,0,.42)!important;background:rgba(255,174,0,.09)!important}

  #view-schedule .sheet-tabs{
    border-color:rgba(255,174,0,.2)!important;
    background:rgba(9,14,22,.92)!important;
    box-shadow:0 12px 28px rgba(0,0,0,.22)!important;
  }

  #view-schedule .date-bar{
    display:grid!important;grid-template-columns:auto minmax(0,1fr) auto!important;
    padding:11px!important;border-radius:15px!important;
    background:linear-gradient(145deg,rgba(17,23,33,.98),rgba(7,12,19,.98))!important;
    border:1px solid rgba(255,174,0,.2)!important;
  }
  #view-schedule .date-picker{min-width:0!important}
  #view-schedule .date-picker>span:last-of-type{min-width:0!important}
  #view-schedule .date-picker strong{display:block;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;color:#fff!important}
  #view-schedule .today-btn{
    margin-left:0!important;min-height:40px!important;padding:0 12px!important;border-radius:10px!important;
    text-decoration:none!important;background:rgba(255,174,0,.08)!important;border:1px solid rgba(255,174,0,.18)!important;
  }
  #view-schedule .date-count{
    grid-column:1/-1!important;width:100%!important;margin-top:2px!important;padding:9px 4px 0!important;
    border-top:1px solid rgba(255,255,255,.06)!important;color:#8793a5!important;
  }

  #view-schedule .panel{
    overflow:visible!important;background:linear-gradient(180deg,rgba(13,19,28,.98),rgba(5,10,17,.98))!important;
    border-color:rgba(255,174,0,.2)!important;
  }
  #view-schedule .view-toolbar{
    display:block!important;padding:12px!important;
    background:linear-gradient(180deg,rgba(8,13,21,.98),rgba(5,9,15,.98))!important;
    border-top:1px solid rgba(255,174,0,.12)!important;
    border-bottom:1px solid rgba(255,174,0,.14)!important;
  }
  #view-schedule .view-toolbar>.vt-group:first-child{
    display:grid!important;grid-template-columns:repeat(2,minmax(0,1fr))!important;
    gap:9px!important;width:100%!important;
  }
  #view-schedule #categoryTabs,
  #view-schedule #statusFilterChips,
  #view-schedule #syncStatusWrap{
    grid-column:1/-1!important;width:100%!important;margin-left:0!important;
  }
  #view-schedule #categoryTabs{margin-right:0!important}
  #view-schedule .vt-toggle{
    width:100%!important;min-height:44px!important;padding:8px 11px!important;justify-content:flex-start!important;
    border-radius:13px!important;background:rgba(255,255,255,.035)!important;
    border:1px solid rgba(255,255,255,.09)!important;color:#aeb8c7!important;
  }
  #view-schedule .vt-toggle input{width:32px!important;height:18px!important;flex:0 0 32px!important;background:#343d4d!important}
  #view-schedule .vt-toggle input::before{width:14px!important;height:14px!important}
  #view-schedule .vt-toggle input:checked{background:linear-gradient(90deg,#ffbd00,#ef4420)!important}
  #view-schedule .vt-toggle input:checked::before{transform:translateX(14px)!important}
  #view-schedule .vt-toggle:has(input:checked){
    color:#fff!important;background:linear-gradient(135deg,rgba(255,179,0,.13),rgba(232,59,32,.08))!important;
    border-color:rgba(255,174,0,.28)!important;
  }
  #view-schedule .status-chips{
    display:flex!important;overflow-x:auto!important;flex-wrap:nowrap!important;gap:7px!important;padding:2px 0 3px!important;
    scroll-snap-type:x proximity!important;
  }
  #view-schedule .status-chips .sf-chip{
    flex:0 0 auto!important;min-height:40px!important;padding:8px 13px!important;border-radius:999px!important;
    background:rgba(255,255,255,.035)!important;border:1px solid rgba(255,255,255,.09)!important;
    color:#aeb8c7!important;scroll-snap-align:start!important;
  }
  #view-schedule .status-chips .sf-chip.active{
    background:linear-gradient(105deg,#ffb900,#ff7117 50%,#e83b20)!important;
    border-color:rgba(255,214,115,.45)!important;color:#fff!important;
    box-shadow:0 8px 18px rgba(232,59,32,.18)!important;
  }
  #view-schedule .status-chips .sf-count{
    background:rgba(0,0,0,.2)!important;color:inherit!important;min-width:22px!important;padding:1px 6px!important;
  }
  #view-schedule .sync-pill{
    width:100%!important;min-height:42px!important;background:rgba(8,123,255,.07)!important;
    border-color:rgba(8,123,255,.2)!important;color:#b9c8dc!important;
  }
  #view-schedule .vt-right{
    display:grid!important;grid-template-columns:repeat(3,minmax(0,1fr))!important;
    gap:8px!important;width:100%!important;margin:11px 0 0!important;
  }
  #view-schedule .vt-right .vt-pop{min-width:0!important}
  #view-schedule .vt-right .vt-btn{
    width:100%!important;min-height:44px!important;padding:8px 7px!important;border-radius:12px!important;
    background:linear-gradient(180deg,rgba(24,31,42,.96),rgba(10,15,23,.96))!important;
    border:1px solid rgba(255,255,255,.1)!important;color:#dce3ed!important;
  }
  #view-schedule .vt-right .vt-reset{color:#ff9a82!important;border-color:rgba(232,59,32,.22)!important}

  #deliveryTableScroll{padding:11px 10px 14px!important;background:transparent!important}
  #deliveryTable tbody tr{
    background:linear-gradient(160deg,rgba(18,25,36,.98),rgba(7,12,19,.98))!important;
    border:1px solid rgba(255,174,0,.16)!important;border-radius:15px!important;
    box-shadow:0 12px 28px rgba(0,0,0,.26),inset 0 1px rgba(255,255,255,.025)!important;
  }
  #deliveryTable tbody tr:hover{background:linear-gradient(160deg,rgba(21,29,41,.98),rgba(8,13,21,.98))!important}
  #deliveryTable td{
    color:#d8e0eb!important;border-bottom:1px dashed rgba(255,255,255,.075)!important;
  }
  #deliveryTable td.row-no,#deliveryTable td:first-child{
    background:rgba(255,174,0,.09)!important;color:#ffc653!important;border:1px solid rgba(255,174,0,.16)!important;
  }
  #deliveryTable .area{background:rgba(8,123,255,.09)!important;color:#9ec8ff!important}
  #deliveryTable .remarks{color:#a9b3c2!important}
  .row-header{border-bottom-color:rgba(255,174,0,.13)!important}
  .row-header .rh-cust{color:#fff!important}
  .row-header .rh-amt{color:#ffc454!important}
  .row-header .rh-more{
    background:rgba(255,255,255,.04)!important;border-color:rgba(255,255,255,.11)!important;color:#fff!important;
  }
  .row-header .rh-more:active{background:rgba(255,174,0,.1)!important}

  #deliveryTable tbody tr.empty-row{
    padding:0!important;overflow:hidden!important;
    background:
      radial-gradient(circle at 50% 15%,rgba(255,178,0,.14),transparent 12rem),
      linear-gradient(160deg,rgba(19,25,35,.99),rgba(7,12,19,.99))!important;
    border:1px solid rgba(255,174,0,.22)!important;
  }
  #deliveryTable tbody tr.empty-row td{
    display:block!important;padding:0!important;border:0!important;background:transparent!important;
  }
  #deliveryTable .empty{
    position:relative!important;padding:42px 22px 38px!important;color:#8f9bac!important;
    font-size:14px!important;line-height:1.55!important;
  }
  #deliveryTable .empty::before{
    content:"+";display:grid;place-items:center;width:54px;height:54px;margin:0 auto 16px;
    border-radius:17px;background:linear-gradient(135deg,#ffbd00,#ff6b18 55%,#e83b20);
    color:#fff;font-size:28px;font-weight:300;box-shadow:0 12px 28px rgba(232,59,32,.22);
  }
  #deliveryTable .empty strong{color:#fff!important;font-size:18px!important;line-height:1.25!important;margin-bottom:8px!important}

  #deliveryTable tfoot{
    display:block!important;margin:4px 10px 14px!important;padding:0!important;
    border-radius:16px!important;overflow:hidden!important;
    background:linear-gradient(150deg,rgba(20,27,38,.99),rgba(7,12,19,.99))!important;
    border:1px solid rgba(255,174,0,.2)!important;
    box-shadow:0 14px 32px rgba(0,0,0,.28)!important;
  }
  #deliveryTable tfoot tr{
    display:grid!important;grid-template-columns:repeat(2,minmax(0,1fr))!important;
    gap:0!important;width:100%!important;padding:14px!important;
  }
  #deliveryTable tfoot td{
    display:flex!important;flex-direction:column!important;align-items:flex-start!important;justify-content:center!important;
    min-height:64px!important;padding:10px 12px!important;border:0!important;background:transparent!important;
    color:#d9e0ea!important;
  }
  #deliveryTable tfoot td:first-child{
    grid-column:1/-1!important;min-height:auto!important;padding:2px 4px 13px!important;
    border-bottom:1px solid rgba(255,255,255,.07)!important;
  }
  #deliveryTable tfoot td:nth-child(3){display:none!important}
  #deliveryTable tfoot td:nth-child(4),#deliveryTable tfoot td:nth-child(5){border-left:1px solid rgba(255,255,255,.06)!important}
  #deliveryTable tfoot strong{font-size:19px!important;color:#fff!important}
  #deliveryTable tfoot span{margin:3px 0 0!important;color:#8491a3!important;font-size:11.5px!important}
  #deliveryTable tfoot td:first-child strong{font-size:16px!important;color:#ffc34a!important}

  .note{
    margin:0!important;padding:14px!important;background:rgba(255,174,0,.045)!important;
    border-top:1px solid rgba(255,174,0,.12)!important;color:#8f9aaa!important;
  }

  .mnav{
    background:rgba(3,7,12,.985)!important;
    border-top:1px solid rgba(255,174,0,.2)!important;
    box-shadow:0 -18px 45px rgba(0,0,0,.5),0 -1px 0 rgba(255,174,0,.05)!important;
    backdrop-filter:blur(20px) saturate(1.2)!important;
  }
  .mnav .mnav-dates{
    padding:9px 12px!important;gap:9px!important;
    background:linear-gradient(90deg,rgba(232,59,32,.055),rgba(255,174,0,.045),rgba(8,123,255,.055))!important;
    border-bottom:1px solid rgba(255,255,255,.06)!important;
  }
  .mnav .mnav-dates button{
    min-height:46px!important;border-radius:13px!important;
    background:linear-gradient(180deg,rgba(22,29,40,.98),rgba(8,13,21,.98))!important;
    border:1px solid rgba(255,255,255,.1)!important;color:#dce4ef!important;
    box-shadow:inset 0 1px rgba(255,255,255,.035)!important;
  }
  .mnav .mnav-dates button:first-child,.mnav .mnav-dates button:last-child{
    color:#ffc247!important;border-color:rgba(255,174,0,.17)!important;font-size:22px!important;
  }
  .mnav .mnav-dates .mnav-today{
    color:#fff!important;border-color:rgba(255,174,0,.22)!important;
    background:linear-gradient(135deg,rgba(255,174,0,.12),rgba(232,59,32,.07),rgba(8,123,255,.07))!important;
  }
  .mnav .mnav-tabs{padding:5px 5px 6px!important;gap:2px!important}
  .mnav .mnav-tabs button{
    min-width:68px!important;min-height:61px!important;padding:7px 8px!important;border-radius:13px!important;
    color:#778397!important;font-size:10.5px!important;transition:background .16s ease,color .16s ease,transform .16s ease!important;
  }
  .mnav .mnav-tabs button .mnav-ico{
    width:27px!important;height:27px!important;display:grid!important;place-items:center!important;
    color:#8793a7!important;line-height:1!important;
  }
  .mnav .mnav-tabs button .mnav-ico svg{width:22px!important;height:22px!important;display:block!important}
  .mnav .mnav-tabs button.active{
    color:#fff!important;background:linear-gradient(145deg,rgba(255,180,0,.15),rgba(232,59,32,.09))!important;
    box-shadow:inset 0 0 0 1px rgba(255,174,0,.15)!important;
  }
  .mnav .mnav-tabs button.active::after{
    left:20%!important;right:20%!important;top:0!important;height:3px!important;
    background:linear-gradient(90deg,#ffbd00,#ff6b18,#e83b20)!important;
    box-shadow:0 0 12px rgba(255,122,20,.5)!important;
  }
  .mnav .mnav-tabs button.active .mnav-ico{color:#ffc13a!important;transform:translateY(-1px) scale(1.04)!important}

  .row-menu{
    background:#0d141e!important;border-color:rgba(255,174,0,.2)!important;
    box-shadow:0 20px 55px rgba(0,0,0,.55)!important;
  }
  .row-menu button{color:#dce4ee!important}
  .row-menu button:hover,.row-menu button:focus-visible{background:rgba(255,174,0,.08)!important}
  .row-menu .row-menu-sep{background:rgba(255,255,255,.07)!important}
}


/* ============================================================
   RELAXIS V3 — complete remaining legacy mobile surfaces
   History is themed in collab-sync.js; dynamic Users CSS is themed
   in app.html because those styles are injected after this file.
   ============================================================ */

/* Admin/settings modal and dynamically inserted permission controls */
#adminOverlay .modal{
  width:min(760px,calc(100vw - 24px))!important;
  max-width:760px!important;
  max-height:min(92dvh,920px)!important;
  overflow:hidden!important;
}
#adminOverlay .modal-head{
  flex:0 0 auto!important;
  background:rgba(3,7,12,.94)!important;
  backdrop-filter:blur(16px)!important;
}
#adminOverlay .modal-head h3{color:#fff!important;font-size:20px!important}
#adminOverlay .modal-head .x{
  color:#9ba7b7!important;background:rgba(255,255,255,.035)!important;
  border:1px solid rgba(255,255,255,.09)!important;border-radius:10px!important;
}
#adminOverlay .modal-body{
  min-width:0!important;width:100%!important;overflow-y:auto!important;overflow-x:hidden!important;
  overscroll-behavior:contain!important;padding:18px!important;
}
#adminOverlay .modal-body>*{max-width:100%!important;min-width:0!important}
#adminOverlay .modal-foot{
  flex:0 0 auto!important;box-shadow:0 -14px 34px rgba(0,0,0,.32)!important;
}
#adminOverlay .eyebrow{
  color:#ffb832!important;font-size:11px!important;letter-spacing:.13em!important;
}
#adminOverlay .wa-help{color:#8995a5!important;line-height:1.55!important}
#adminOverlay .wa-help strong{color:#dbe3ed!important}
#adminOverlay .save-cust-row{
  min-width:0!important;width:100%!important;background:rgba(255,255,255,.026)!important;
  border-color:rgba(255,255,255,.075)!important;color:#dce4ee!important;
}
#adminOverlay .save-cust-row:hover{border-color:rgba(255,174,0,.2)!important;background:rgba(255,174,0,.045)!important}
#adminOverlay .save-cust-row span{color:#d6dee8!important;min-width:0!important;overflow-wrap:anywhere!important}
#adminOverlay .save-cust-row small{color:#778496!important}
#adminOverlay input,#adminOverlay select,#adminOverlay textarea{
  min-width:0!important;max-width:100%!important;background:#070c13!important;color:#f8fafc!important;
  border-color:rgba(255,255,255,.1)!important;
}
#adminOverlay input::placeholder,#adminOverlay textarea::placeholder{color:#657183!important}
#adminOverlay option{background:#0a1018!important;color:#fff!important}
#adminOverlay .sig-calibrator{
  padding:16px!important;border-radius:15px!important;background:linear-gradient(145deg,rgba(255,174,0,.055),rgba(8,123,255,.035))!important;
  border:1px solid rgba(255,174,0,.13)!important;
}
#adminOverlay .sig-page{max-width:min(270px,75vw)!important;width:270px!important;border-color:rgba(255,174,0,.28)!important;box-shadow:0 18px 36px rgba(0,0,0,.34)!important}
#adminOverlay .sig-box{border-color:#ffae00!important;background:rgba(255,174,0,.13)!important;color:#ef6e28!important}
#adminExtraSections{min-width:0!important;width:100%!important}
#adminExtraSections .users-list,#adminExtraSections .user-add-row,#adminExtraSections .role-perm-tabs,#adminExtraSections .mask-grid{min-width:0!important;width:100%!important}
#adminExtraSections .user-add-row>*{min-width:0!important;max-width:100%!important}
#adminExtraSections .mini-btn,#payStatusList .mini-btn,#payStatusAddBtn{
  color:#dce4ee!important;background:rgba(255,255,255,.035)!important;border-color:rgba(255,255,255,.1)!important;
}
#adminExtraSections .mini-btn:hover,#payStatusList .mini-btn:hover,#payStatusAddBtn:hover{
  color:#fff!important;background:rgba(255,174,0,.08)!important;border-color:rgba(255,174,0,.25)!important;
}
#payStatusList{min-width:0!important;width:100%!important}
#payStatusList .pay-status-row{
  display:grid!important;grid-template-columns:minmax(140px,1.1fr) minmax(112px,.75fr) minmax(180px,1fr) auto auto!important;
  align-items:center!important;gap:8px!important;padding:11px!important;margin-bottom:9px!important;
  border:1px solid rgba(255,174,0,.12)!important;border-radius:12px!important;
  background:linear-gradient(145deg,rgba(18,25,35,.9),rgba(7,12,19,.9))!important;
}
#payStatusList .pay-status-row>*{min-width:0!important;max-width:100%!important}
#payStatusList .pay-status-row input[type=text],#payStatusList .pay-status-row select{
  width:100%!important;min-height:42px!important;background:#070c13!important;color:#f8fafc!important;
  border:1px solid rgba(255,255,255,.1)!important;border-radius:9px!important;
}
#payStatusList .pay-default-radio{
  color:#aab5c4!important;padding:8px 9px!important;border-radius:9px!important;
  background:rgba(255,255,255,.025)!important;border:1px solid rgba(255,255,255,.07)!important;
}
#payStatusList .pay-default-radio input{accent-color:#ffae00!important}

/* Customer and order list cards — remove the legacy white mobile cards */
@media(max-width:640px){
  #view-customers,#view-orders,#view-admin{color:#f8fafc!important}
  #custTable tbody tr,#ordersTable tbody tr{
    position:relative!important;margin:0 10px 12px!important;padding:14px!important;
    background:linear-gradient(155deg,rgba(18,25,35,.99),rgba(7,12,19,.99))!important;
    border:1px solid rgba(255,174,0,.16)!important;border-radius:16px!important;
    box-shadow:0 15px 34px rgba(0,0,0,.3)!important;overflow:hidden!important;
  }
  #custTable tbody tr::before,#ordersTable tbody tr::before{
    content:"";position:absolute;left:0;top:0;right:0;height:2px;
    background:linear-gradient(90deg,#ffbd00,#ff6b18,#e83b20,#087bff);opacity:.72;
  }
  #custTable tbody tr:hover,#ordersTable tbody tr:hover{
    background:linear-gradient(155deg,rgba(24,31,42,.99),rgba(8,13,20,.99))!important;
    box-shadow:0 16px 38px rgba(0,0,0,.34),inset 3px 0 rgba(255,174,0,.55)!important;
  }
  #custTable td,#ordersTable td{
    color:#cbd4df!important;border-bottom:1px dashed rgba(255,255,255,.075)!important;
    padding:8px 0!important;min-width:0!important;background:transparent!important;
  }
  #custTable td:last-child,#ordersTable td:last-child{border-bottom:0!important}
  #custTable td strong,#ordersTable td strong,#custTable .cust strong,#ordersTable .cust strong{color:#fff!important;font-size:16px!important}
  #custTable td small,#ordersTable td small,#custTable .cust small,#ordersTable .cust small{color:#7f8b9b!important}
  #custTable .area,#ordersTable .area{color:#9aa7b7!important;background:rgba(8,123,255,.075)!important;border-radius:999px!important;padding:4px 9px!important}
  #custTable a,#ordersTable a{color:#55adff!important}
  #custTable .tel.wa,#ordersTable .tel.wa{color:#62df91!important}
  #ordersTable .do-file{color:#55adff!important;overflow-wrap:anywhere!important}
  #ordersTable .sig-badge{background:rgba(34,197,94,.13)!important;color:#64df90!important;border:1px solid rgba(34,197,94,.2)!important}
  #custTable .remarks,#ordersTable .remarks{color:#93a0b1!important}

  /* Admin settings: true one-column mobile flow, no horizontal clipping */
  #adminOverlay{align-items:flex-end!important;padding:0!important}
  #adminOverlay .modal{
    width:100%!important;max-width:none!important;max-height:94dvh!important;margin:0!important;
    border-radius:20px 20px 0 0!important;border-left:0!important;border-right:0!important;border-bottom:0!important;
  }
  #adminOverlay .modal-body{padding:15px 14px 24px!important}
  #adminOverlay .modal-head{padding:15px 16px!important}
  #adminOverlay .modal-head h3{font-size:19px!important}
  #adminOverlay .modal-foot{padding:12px 14px calc(12px + env(safe-area-inset-bottom))!important}
  #adminOverlay .modal-foot .right{width:100%!important;display:grid!important;grid-template-columns:minmax(0,1fr) minmax(0,1.25fr)!important;gap:9px!important}
  #adminOverlay .modal-foot .right button{width:100%!important;min-width:0!important}
  #adminExtraSections .user-add-row{grid-template-columns:minmax(0,1fr)!important}
  #adminExtraSections .mask-grid{grid-template-columns:minmax(0,1fr)!important}
  #adminExtraSections .role-perm-tabs{grid-template-columns:repeat(3,minmax(0,1fr))!important}
  #adminExtraSections .role-perm-tabs .rpt{font-size:11.5px!important;padding:8px 3px!important;overflow:hidden!important;text-overflow:ellipsis!important}
  #payStatusList .pay-status-row{
    grid-template-columns:minmax(0,1fr) minmax(0,1fr)!important;
    padding:11px!important;gap:8px!important;
  }
  #payStatusList .pay-name-input,#payStatusList .pay-bucket-select{grid-column:1/-1!important}
  #payStatusList .pay-color-select{grid-column:1!important}
  #payStatusList .pay-default-radio{grid-column:2!important;justify-self:stretch!important;justify-content:center!important;min-height:42px!important}
  #payStatusList .mini-btn{grid-column:1/-1!important;width:100%!important;min-height:42px!important}
  #adminOverlay .sig-page{width:min(250px,76vw)!important}
}

/* ============================================================
   RELAXIS V6 — official brand migration + legacy date-row cleanup
   Fixes stale synced logos and custom/status cells that retained the
   original white editable-cell styling on older schedule dates.
   ============================================================ */
@media screen and (max-width:640px){
  /* Approved Relaxis app mark: never crop it or render a stale replacement. */
  .topbar .mobile-brand img{
    width:48px!important;
    height:48px!important;
    flex:0 0 48px!important;
    padding:3px!important;
    object-fit:contain!important;
    object-position:center!important;
    background:#050b14!important;
    border:1px solid rgba(255,174,0,.25)!important;
    border-radius:13px!important;
    box-shadow:0 0 0 1px rgba(8,123,255,.08),0 8px 22px rgba(0,0,0,.34),0 0 18px rgba(255,112,20,.1)!important;
  }
  .topbar .mobile-brand .brand-text{
    color:#fff!important;
    font-size:22px!important;
    font-weight:800!important;
    line-height:1!important;
    white-space:nowrap!important;
  }

  /* Turn every historical/current schedule row into the same dark card. */
  #deliveryTable tbody tr:not(.empty-row){
    display:flex!important;
    flex-direction:column!important;
    width:100%!important;
    isolation:isolate!important;
    overflow:hidden!important;
    padding:14px 14px 12px!important;
    background:
      radial-gradient(circle at 100% 0%,rgba(8,123,255,.075),transparent 12rem),
      linear-gradient(158deg,rgba(18,25,36,.995),rgba(6,11,18,.995))!important;
    border:1px solid rgba(255,174,0,.18)!important;
    border-radius:17px!important;
    box-shadow:0 16px 36px rgba(0,0,0,.32),inset 0 1px rgba(255,255,255,.025)!important;
  }
  #deliveryTable tbody tr:not(.empty-row)::before{
    content:"";
    position:absolute;
    z-index:0;
    left:0;right:0;top:0;height:2px;
    background:linear-gradient(90deg,#ffbd00,#ff6a18 48%,#e83b20 70%,#087bff);
    opacity:.72;
  }
  #deliveryTable tbody tr:not(.empty-row)>*{position:relative;z-index:1}

  /* Eliminate legacy light backgrounds from all built-in and custom cells. */
  #deliveryTable tbody tr:not(.empty-row)>td,
  #deliveryTable tbody tr:not(.empty-row)>td[style],
  #deliveryTable tbody tr:not(.empty-row)>td.cc-cell,
  #deliveryTable tbody tr:not(.empty-row)>td.cc-cell[contenteditable="true"],
  #deliveryTable tbody tr:not(.empty-row)>td.cc-cell[contenteditable="false"]{
    width:100%!important;
    max-width:100%!important;
    min-width:0!important;
    box-sizing:border-box!important;
    background:transparent!important;
    background-image:none!important;
    color:#d8e0eb!important;
    border-left:0!important;
    border-right:0!important;
    border-top:0!important;
    border-bottom:1px dashed rgba(255,255,255,.075)!important;
    box-shadow:none!important;
  }
  #deliveryTable tbody tr:not(.empty-row)>td:last-child{border-bottom:0!important}
  #deliveryTable tbody tr:not(.empty-row)>td.cc-cell[contenteditable="true"]:focus{
    background:rgba(255,174,0,.055)!important;
    border-radius:9px!important;
    box-shadow:inset 0 0 0 1px rgba(255,174,0,.28)!important;
    outline:0!important;
  }

  /* The synced Delivery Status custom column is a system badge, not an edit box. */
  #deliveryTable tbody tr:not(.empty-row)>td.cc-cell[data-cc-kind="delivery-status"],
  #deliveryTable tbody tr:not(.empty-row)>td.cc-cell[data-rp-sig]{
    order:-2!important;
    display:flex!important;
    align-items:center!important;
    justify-content:flex-start!important;
    gap:8px!important;
    min-height:44px!important;
    margin:2px 0 8px!important;
    padding:9px 12px!important;
    border:1px solid rgba(255,174,0,.14)!important;
    border-radius:12px!important;
    background:linear-gradient(135deg,rgba(255,174,0,.08),rgba(8,123,255,.045))!important;
    color:#cfd8e5!important;
    font-weight:650!important;
  }
  #deliveryTable tbody tr[data-status-bucket="pending"]>td.cc-cell[data-rp-sig],
  #deliveryTable tbody tr[data-status-bucket="picked_up"]>td.cc-cell[data-rp-sig]{
    border-color:rgba(255,174,0,.23)!important;
    background:linear-gradient(135deg,rgba(255,174,0,.13),rgba(255,106,24,.055))!important;
    color:#ffd36b!important;
  }
  #deliveryTable tbody tr[data-status-bucket="in_progress"]>td.cc-cell[data-rp-sig]{
    border-color:rgba(8,123,255,.27)!important;
    background:linear-gradient(135deg,rgba(8,123,255,.14),rgba(8,123,255,.045))!important;
    color:#7dbaff!important;
  }
  #deliveryTable tbody tr[data-status-bucket="delivered"]>td.cc-cell[data-rp-sig]{
    border-color:rgba(34,197,94,.24)!important;
    background:linear-gradient(135deg,rgba(34,197,94,.13),rgba(34,197,94,.035))!important;
    color:#68df91!important;
  }
  #deliveryTable tbody tr[data-status-bucket="issue"]>td.cc-cell[data-rp-sig]{
    border-color:rgba(232,59,32,.27)!important;
    background:linear-gradient(135deg,rgba(232,59,32,.14),rgba(232,59,32,.04))!important;
    color:#ff8d78!important;
  }
  #deliveryTable td.cc-cell[data-cc-kind="delivery-status"]::before{
    content:"Delivery status";
    margin-right:auto;
    color:#7f8b9c;
    font-size:10.5px;
    font-weight:700;
    letter-spacing:.08em;
    text-transform:uppercase;
  }
  #deliveryTable td.cc-cell[data-cc-kind="delivery-status"] .rp-dot{margin-left:8px!important;margin-right:0!important}

  /* Keep the generated card header and row number in a stable order. */
  #deliveryTable tbody tr:not(.empty-row)>.row-header{
    order:-4!important;
    width:100%!important;
    display:flex!important;
    padding:0 0 11px!important;
    margin:0 0 7px!important;
    background:transparent!important;
    border:0!important;
    border-bottom:1px solid rgba(255,174,0,.13)!important;
  }
  #deliveryTable tbody tr:not(.empty-row)>td.row-no,
  #deliveryTable tbody tr:not(.empty-row)>td:first-of-type{
    order:-3!important;
    align-self:flex-start!important;
    width:auto!important;
    max-width:max-content!important;
    padding:3px 9px!important;
    margin:0 0 7px!important;
    border:1px solid rgba(255,174,0,.16)!important;
    border-radius:999px!important;
    background:rgba(255,174,0,.085)!important;
    color:#ffc653!important;
  }

  /* Older rows can contain values without explicit classes; keep them legible. */
  #deliveryTable tbody tr:not(.empty-row) a{color:#57adff!important}
  #deliveryTable tbody tr:not(.empty-row) .cust strong{color:#fff!important}
  #deliveryTable tbody tr:not(.empty-row) .cust small{color:#8793a4!important}
  #deliveryTable tbody tr:not(.empty-row) .amount,
  #deliveryTable tbody tr:not(.empty-row) .ctn{color:#f5f7fa!important}
  #deliveryTable tbody tr:not(.empty-row) .pay{max-width:max-content!important}
}

/* ============================================================
   RELAXIS V8 — desktop table completion
   Completes the dark theme for dynamically generated sync and
   custom-column elements that previously retained legacy light CSS.
   ============================================================ */

/* RoutePOD sync control — desktop and tablet */
#view-schedule #syncStatusWrap{
  min-width:0;
}
#view-schedule .sync-pill,
#view-schedule button.sync-pill{
  appearance:none!important;
  display:inline-flex!important;
  align-items:center!important;
  gap:8px!important;
  min-height:36px!important;
  max-width:100%!important;
  padding:7px 12px!important;
  border:1px solid rgba(34,197,94,.19)!important;
  border-radius:999px!important;
  background:
    linear-gradient(135deg,rgba(34,197,94,.09),rgba(8,123,255,.055)),
    #090f17!important;
  color:#c9d5e3!important;
  box-shadow:inset 0 1px rgba(255,255,255,.025),0 7px 20px rgba(0,0,0,.18)!important;
  white-space:nowrap!important;
}
#view-schedule .sync-pill:hover{
  border-color:rgba(255,174,0,.28)!important;
  background:
    linear-gradient(135deg,rgba(255,174,0,.09),rgba(8,123,255,.06)),
    #0b111a!important;
}
#view-schedule .sync-pill:focus-visible{
  outline:2px solid rgba(255,190,0,.78)!important;
  outline-offset:2px!important;
}
#view-schedule .sync-pill .sync-label{
  color:#e8eef6!important;
  font-weight:700!important;
}
#view-schedule .sync-pill .sync-time{
  color:#8390a2!important;
  font-family:var(--mono)!important;
  font-size:11px!important;
}
#view-schedule .sync-pill .sync-dot{
  width:9px!important;
  height:9px!important;
  flex:0 0 9px!important;
  border-radius:50%!important;
  background:#64748b!important;
  box-shadow:0 0 0 4px rgba(100,116,139,.08)!important;
}
#view-schedule .sync-pill .sync-dot[data-state="ok"]{
  background:#22c55e!important;
  box-shadow:0 0 0 4px rgba(34,197,94,.1),0 0 13px rgba(34,197,94,.38)!important;
}
#view-schedule .sync-pill .sync-dot[data-state="syncing"]{
  background:#087bff!important;
  box-shadow:0 0 0 4px rgba(8,123,255,.1),0 0 13px rgba(8,123,255,.35)!important;
}
#view-schedule .sync-pill .sync-dot[data-state="error"],
#view-schedule .sync-pill .sync-dot[data-state="stale"]{
  background:#ef4420!important;
  box-shadow:0 0 0 4px rgba(239,68,32,.1),0 0 13px rgba(239,68,32,.33)!important;
}
#view-schedule .sync-menu{
  background:linear-gradient(155deg,#121923,#070c13)!important;
  color:#d9e1ec!important;
  border:1px solid rgba(255,174,0,.18)!important;
  box-shadow:0 22px 50px rgba(0,0,0,.45)!important;
}
#view-schedule .sync-menu .sync-k{color:#7f8b9c!important}
#view-schedule .sync-menu .sync-v{color:#eef3f9!important}
#view-schedule .sync-menu .sync-sep{background:rgba(255,255,255,.075)!important}

/* Custom-column headers, cells and generated total fillers */
#deliveryTable th.cc-head,
#deliveryTable thead th.cc-head{
  background:#09101a!important;
  background-image:none!important;
  color:#9eabc0!important;
  border-color:rgba(255,174,0,.14)!important;
  box-shadow:none!important;
}
#deliveryTable tbody td.cc-cell,
#deliveryTable tbody td.cc-cell[style],
#deliveryTable tbody td.cc-cell[contenteditable="true"],
#deliveryTable tbody td.cc-cell[contenteditable="false"]{
  min-width:140px!important;
  background:rgba(255,255,255,.018)!important;
  background-image:none!important;
  color:#cbd5e1!important;
  border-top:0!important;
  border-bottom-color:rgba(255,255,255,.065)!important;
  border-left:1px solid rgba(255,174,0,.085)!important;
  box-shadow:none!important;
  text-shadow:none!important;
}
#deliveryTable tbody td.cc-cell:hover{
  background:rgba(255,174,0,.035)!important;
}
#deliveryTable tbody td.cc-cell[contenteditable="true"]{
  cursor:text!important;
}
#deliveryTable tbody td.cc-cell[contenteditable="true"]:focus{
  outline:none!important;
  background:linear-gradient(135deg,rgba(255,174,0,.095),rgba(8,123,255,.035))!important;
  color:#fff!important;
  box-shadow:inset 0 0 0 1px rgba(255,174,0,.45)!important;
}
#deliveryTable tbody td.cc-cell.cc-empty::before{
  content:"—"!important;
  color:#566274!important;
}
#deliveryTable tbody td.cc-cell.cc-empty{
  color:transparent!important;
}
#deliveryTable tbody td.cc-cell[data-cc-kind="delivery-status"],
#deliveryTable tbody td.cc-cell[data-rp-sig]{
  color:#ffd36b!important;
  background:linear-gradient(135deg,rgba(255,174,0,.09),rgba(255,106,24,.035))!important;
}
#deliveryTable tfoot td.cc-filler,
#deliveryTable tfoot td.cc-filler[style]{
  background:#070d15!important;
  background-image:none!important;
  border-color:rgba(255,174,0,.09)!important;
  box-shadow:none!important;
}

/* Finish the legacy footer/help areas under the table */
#deliveryTable tfoot td{
  background:#070d15!important;
  color:#cfd8e4!important;
  border-top:1px solid rgba(255,174,0,.19)!important;
}
#deliveryTable tfoot strong{color:#f8fafc!important}
#deliveryTable tfoot span{color:#8d98a8!important}
#view-schedule .table-note,
#view-schedule .quick-edit,
#view-schedule [class*="quick-edit"]{
  background:linear-gradient(135deg,rgba(255,174,0,.045),rgba(8,123,255,.025))!important;
  color:#9aa6b6!important;
  border-color:rgba(255,174,0,.12)!important;
}

/* Keep horizontally scrollable tables visually integrated. */
#deliveryTableScroll{
  scrollbar-color:#a96a00 #070c13!important;
}
#deliveryTableScroll::-webkit-scrollbar{height:10px!important;width:10px!important}
#deliveryTableScroll::-webkit-scrollbar-track{background:#070c13!important}
#deliveryTableScroll::-webkit-scrollbar-thumb{
  background:linear-gradient(90deg,#a96a00,#e76516)!important;
  border:2px solid #070c13!important;
  border-radius:999px!important;
}

/* ============================================================
   RELAXIS V9 FINAL — delivery modal and attachment completion
   Removes the last light legacy surfaces from AI detection and
   PDF attachment controls while preserving existing behaviour.
   ============================================================ */

/* Delivery modal shell */
#overlay .modal{
  width:min(680px,calc(100vw - 32px))!important;
  max-width:680px!important;
  max-height:min(94dvh,980px)!important;
  overflow:hidden!important;
  display:flex!important;
  flex-direction:column!important;
  border:1px solid rgba(255,174,0,.24)!important;
  border-radius:18px!important;
  background:
    radial-gradient(circle at 95% 0,rgba(8,123,255,.065),transparent 21rem),
    linear-gradient(180deg,#121a25 0%,#0a1018 100%)!important;
  box-shadow:0 34px 110px rgba(0,0,0,.72),0 0 0 1px rgba(255,174,0,.035),0 0 48px rgba(255,80,20,.06)!important;
}
#overlay .modal-body{flex:1 1 auto!important;min-height:0!important}
#overlay .modal-head{
  flex:0 0 auto!important;
  min-height:72px!important;
  padding:20px 26px!important;
  background:rgba(4,8,13,.74)!important;
  border-bottom:1px solid rgba(255,255,255,.065)!important;
  backdrop-filter:blur(16px)!important;
}
#overlay .modal-head h3{
  color:#fff!important;
  font-size:20px!important;
  letter-spacing:-.015em!important;
}
#overlay .modal-head .x{
  width:38px!important;height:38px!important;
  display:grid!important;place-items:center!important;
  border:1px solid rgba(255,255,255,.08)!important;
  border-radius:11px!important;
  background:rgba(255,255,255,.025)!important;
  color:#8e9aaa!important;
  transition:background .16s ease,border-color .16s ease,color .16s ease!important;
}
#overlay .modal-head .x:hover{
  color:#fff!important;background:rgba(232,59,32,.09)!important;border-color:rgba(232,59,32,.22)!important;
}
#overlay .modal-body{
  overflow-y:auto!important;
  overscroll-behavior:contain!important;
  padding:22px 26px 26px!important;
  gap:17px!important;
  scrollbar-color:#8f5e08 #080d14!important;
}
#overlay .modal-body::-webkit-scrollbar{width:10px!important}
#overlay .modal-body::-webkit-scrollbar-track{background:#080d14!important}
#overlay .modal-body::-webkit-scrollbar-thumb{background:linear-gradient(#b87908,#e76617)!important;border:2px solid #080d14!important;border-radius:999px!important}
#overlay .modal-foot{
  flex:0 0 auto!important;
  padding:17px 26px calc(17px + env(safe-area-inset-bottom))!important;
  background:rgba(4,8,13,.9)!important;
  border-top:1px solid rgba(255,255,255,.065)!important;
  backdrop-filter:blur(16px)!important;
}

/* Inputs and helper text */
#overlay .field label{color:#cbd4df!important;font-size:12.5px!important;letter-spacing:.01em!important}
#overlay .field input,
#overlay .field select,
#overlay .field textarea{
  min-height:48px!important;
  border:1px solid rgba(255,255,255,.11)!important;
  border-radius:11px!important;
  background:#070c13!important;
  background-image:none!important;
  color:#f8fafc!important;
  box-shadow:inset 0 1px rgba(255,255,255,.018)!important;
}
#overlay .field input::placeholder,#overlay .field textarea::placeholder{color:#667386!important}
#overlay .field input:focus,#overlay .field select:focus,#overlay .field textarea:focus{
  outline:0!important;border-color:#ff9f00!important;
  box-shadow:0 0 0 3px rgba(255,159,0,.1),inset 0 1px rgba(255,255,255,.025)!important;
}
#overlay #fAreaMapLink{color:#57adff!important;text-underline-offset:3px!important}
#overlay .autofill-hint{color:#58d787!important}
#overlay .autofill-hint.warn{color:#ffc34d!important}

/* AI / OCR amount result: replaces legacy white preview card. */
#overlay .amount-preview{
  gap:7px!important;
  margin-top:8px!important;
}
#overlay .amount-preview .ap-row{
  display:grid!important;
  grid-template-columns:minmax(0,1fr) auto auto auto!important;
  align-items:center!important;
  gap:7px!important;
  min-width:0!important;
  min-height:48px!important;
  padding:9px 11px!important;
  border:1px solid rgba(8,123,255,.18)!important;
  border-radius:11px!important;
  background:
    linear-gradient(135deg,rgba(8,123,255,.095),rgba(130,66,255,.045)),
    #080e17!important;
  color:#dce5f0!important;
  box-shadow:inset 0 1px rgba(255,255,255,.025)!important;
}
#overlay .amount-preview .ap-file{
  min-width:0!important;max-width:none!important;
  overflow:hidden!important;text-overflow:ellipsis!important;white-space:nowrap!important;
  color:#9eacc0!important;font-family:var(--mono)!important;font-size:11px!important;
}
#overlay .amount-preview .ap-label{
  color:#a9ccff!important;background:rgba(8,123,255,.14)!important;
  border:1px solid rgba(8,123,255,.16)!important;border-radius:6px!important;
  padding:3px 7px!important;font-size:10px!important;font-weight:800!important;
}
#overlay .amount-preview .ap-cur{color:#8392a5!important;font-size:10.5px!important}
#overlay .amount-preview .ap-value{color:#fff!important;font-weight:800!important;font-variant-numeric:tabular-nums!important}
#overlay .amount-preview .ap-none{grid-column:2/-1!important;color:#778497!important;font-style:normal!important;font-size:11px!important}
#overlay .amount-preview .ap-src{
  display:inline-flex!important;align-items:center!important;min-height:23px!important;
  padding:3px 8px!important;border-radius:7px!important;
  font-size:10px!important;font-weight:800!important;white-space:nowrap!important;
  color:#c5a8ff!important;background:rgba(141,83,255,.13)!important;border:1px solid rgba(141,83,255,.18)!important;
}
#overlay .amount-preview .ap-src.text{color:#8dbdff!important;background:rgba(8,123,255,.12)!important;border-color:rgba(8,123,255,.18)!important}
#overlay .amount-preview .ap-src.ocr{color:#ffc85d!important;background:rgba(255,174,0,.11)!important;border-color:rgba(255,174,0,.18)!important}
#overlay .amount-preview .ap-src.tpl{color:#66e597!important;background:rgba(34,197,94,.11)!important;border-color:rgba(34,197,94,.18)!important}

/* PDF chooser and attachment cards */
#overlay #fFileWrap{
  padding:14px!important;
  border:1px solid rgba(255,174,0,.14)!important;
  border-radius:14px!important;
  background:linear-gradient(145deg,rgba(255,174,0,.035),rgba(8,123,255,.025))!important;
}
#overlay #fFileWrap>label{margin-bottom:9px!important;color:#e3e9f1!important}
#overlay #fFile{
  min-height:54px!important;
  padding:9px!important;
  border:1px dashed rgba(255,174,0,.3)!important;
  border-radius:11px!important;
  background:#070c13!important;color:#9eabbd!important;
}
#overlay #fFile::file-selector-button{
  min-height:34px!important;margin-right:10px!important;padding:7px 11px!important;
  border:1px solid rgba(255,174,0,.22)!important;border-radius:8px!important;
  background:linear-gradient(100deg,rgba(255,180,0,.15),rgba(232,59,32,.09))!important;
  color:#ffd16a!important;font:inherit!important;font-weight:750!important;cursor:pointer!important;
}
#overlay .file-list{gap:9px!important}
#overlay .file-row{
  display:grid!important;
  grid-template-columns:minmax(0,1fr) auto auto!important;
  align-items:center!important;
  gap:8px!important;
  min-width:0!important;
  padding:11px!important;
  border:1px solid rgba(255,174,0,.15)!important;
  border-radius:12px!important;
  background:linear-gradient(145deg,rgba(18,26,37,.98),rgba(6,11,18,.98))!important;
  box-shadow:0 10px 24px rgba(0,0,0,.17),inset 0 1px rgba(255,255,255,.02)!important;
}
#overlay .file-row:last-child{border-bottom:1px solid rgba(255,174,0,.15)!important}
#overlay .file-chip{
  display:block!important;
  min-width:0!important;max-width:100%!important;
  overflow:hidden!important;text-overflow:ellipsis!important;white-space:nowrap!important;
  padding:0!important;
  border:0!important;border-radius:0!important;
  background:transparent!important;background-image:none!important;
  color:#e4eaf2!important;
  font-family:var(--mono)!important;font-size:11.5px!important;
}
#overlay .file-row .src-tag{
  grid-column:1/2!important;
  justify-self:start!important;
  max-width:100%!important;overflow:hidden!important;text-overflow:ellipsis!important;
  border:1px solid transparent!important;
}
#overlay .file-row .src-tag.arklife{background:rgba(8,123,255,.12)!important;color:#67aeff!important;border-color:rgba(8,123,255,.18)!important}
#overlay .file-row .src-tag.barakah-foods{background:rgba(34,197,94,.11)!important;color:#57de8a!important;border-color:rgba(34,197,94,.17)!important}
#overlay .file-row .src-tag.barakah-holdings{background:rgba(255,174,0,.11)!important;color:#ffc34f!important;border-color:rgba(255,174,0,.18)!important}
#overlay .file-row .src-tag.unrec,#overlay .file-row .src-tag.scanning{background:rgba(255,255,255,.045)!important;color:#93a0b2!important;border-color:rgba(255,255,255,.075)!important}
#overlay .file-row .mini-btn{
  min-height:38px!important;padding:7px 12px!important;border-radius:9px!important;
  background:rgba(255,255,255,.035)!important;color:#dbe3ed!important;border:1px solid rgba(255,255,255,.1)!important;
}
#overlay .file-row .mini-btn:hover{background:rgba(255,174,0,.08)!important;border-color:rgba(255,174,0,.25)!important;color:#fff!important}
#overlay #fFileAddMore{
  width:max-content!important;min-height:40px!important;margin-top:10px!important;
  padding:8px 12px!important;border-radius:10px!important;
  background:rgba(8,123,255,.07)!important;color:#9bc9ff!important;border:1px solid rgba(8,123,255,.2)!important;
}
#overlay #fFileAddMore:hover{background:rgba(255,174,0,.08)!important;color:#ffd16d!important;border-color:rgba(255,174,0,.25)!important}

/* Customer reuse helper and footer buttons */
#overlay .save-cust-row{
  align-items:flex-start!important;
  padding:14px!important;
  border:1px solid rgba(255,174,0,.18)!important;
  border-radius:13px!important;
  background:linear-gradient(135deg,rgba(255,174,0,.04),rgba(8,123,255,.025))!important;
}
#overlay .save-cust-row span{color:#dce3ec!important}
#overlay .save-cust-row small{display:block!important;margin-top:4px!important;color:#8490a0!important;line-height:1.55!important}
#overlay .save-cust-row input{accent-color:#ffb400!important}
#overlay .danger-btn{min-height:46px!important;border-radius:11px!important}
#overlay .modal-foot .ghost-btn,#overlay .modal-foot .primary-btn{min-height:46px!important;border-radius:11px!important;padding:10px 17px!important}

@media(max-width:640px){
  #overlay{padding:8px!important;align-items:flex-end!important}
  #overlay .modal{
    width:100%!important;max-width:none!important;max-height:calc(100dvh - 10px)!important;
    border-radius:18px 18px 0 0!important;
    display:flex!important;flex-direction:column!important;
  }
  #overlay .modal-head{min-height:62px!important;padding:15px 16px!important}
  #overlay .modal-body{padding:16px 14px 22px!important;gap:14px!important}
  #overlay .grid2{grid-template-columns:1fr!important;gap:14px!important}
  #overlay .amount-preview .ap-row{grid-template-columns:minmax(0,1fr) auto!important}
  #overlay .amount-preview .ap-label,#overlay .amount-preview .ap-cur,#overlay .amount-preview .ap-value,#overlay .amount-preview .ap-src{grid-row:2!important}
  #overlay .amount-preview .ap-label{grid-column:1!important;justify-self:start!important}
  #overlay .amount-preview .ap-cur{display:none!important}
  #overlay .amount-preview .ap-value{grid-column:2!important;justify-self:end!important}
  #overlay .amount-preview .ap-src{grid-column:1!important;grid-row:3!important;justify-self:start!important}
  #overlay .amount-preview .ap-file{grid-column:1/-1!important}
  #overlay .amount-preview .ap-none{grid-column:1/-1!important}
  #overlay .file-row{grid-template-columns:minmax(0,1fr) auto!important}
  #overlay .file-row .file-chip{grid-column:1/-1!important}
  #overlay .file-row .src-tag{grid-column:1!important}
  #overlay .modal-foot{padding:12px 14px calc(12px + env(safe-area-inset-bottom))!important}
  #overlay .modal-foot .right{display:grid!important;grid-template-columns:minmax(0,1fr) minmax(0,1.25fr)!important;gap:9px!important;flex:1!important}
  #overlay .modal-foot .right button{width:100%!important;min-width:0!important}
}


/* Relaxis V11 final list + WhatsApp polish */
.area,#custTable .area,#ordersTable .area,#deliveryTable .area{
  background:linear-gradient(135deg,rgba(8,123,255,.14),rgba(8,123,255,.065))!important;
  background-color:#0a1828!important;color:#b9d8ff!important;
  border:1px solid rgba(8,123,255,.26)!important;box-shadow:inset 0 1px rgba(255,255,255,.025)!important;
}
#waOverlay .wa-help code{background:#0a121c!important;color:#dce5f0!important;border:1px solid rgba(255,174,0,.18)!important}
#waOverlay .wa-preview{background:linear-gradient(145deg,rgba(34,197,94,.075),rgba(8,123,255,.045)),#071018!important;color:#c6ecd5!important;border-color:rgba(34,197,94,.23)!important}
#waOverlay .wa-preview small{color:#64df91!important}


/* Relaxis V12 final Columns / Presets completion. */
#colPickerMenu .vt-col-name input,#colPickerMenu .vt-cc-row input,#colPickerMenu textarea,#presetMenu .vt-cc-row input{background:#070d14!important;background-color:#070d14!important;color:#edf3fa!important;border-color:rgba(148,163,184,.20)!important;-webkit-text-fill-color:#edf3fa!important}
#colPickerMenu button,#presetMenu button{background-color:#111a25!important;color:#dbe4ee!important;border-color:rgba(148,163,184,.20)!important}
#colPickerMenu .vt-menu-primary:not(:disabled),#presetMenu .vt-menu-primary:not(:disabled){background:linear-gradient(135deg,#ffb000,#ff4b24)!important;color:#fff!important;border-color:rgba(255,174,0,.55)!important}
#presetMenu .vt-menu-primary:disabled{background:#121a24!important;color:#657284!important;border-color:rgba(148,163,184,.15)!important}
#colPickerMenu .vt-cc-del,#presetMenu .vt-cc-del{background:rgba(239,68,68,.08)!important;color:#ff8078!important;border-color:rgba(239,68,68,.34)!important}
#syncStatusMenu select{background:#070d14!important;color:#edf3fa!important;border-color:rgba(148,163,184,.20)!important}

/* ============================================================
   Relaxis V13 final header/navigation completion
   - removes the remaining white active page tab
   - restores the official icon at tablet widths
   - prevents restored scroll positions from hiding the hero
   ============================================================ */
.view-tabs{
  display:none;
  align-items:center;
  gap:6px!important;
  padding:5px!important;
  border:1px solid rgba(255,174,0,.15)!important;
  border-radius:14px!important;
  background:linear-gradient(180deg,rgba(15,21,31,.96),rgba(7,12,19,.96))!important;
  box-shadow:inset 0 1px rgba(255,255,255,.035),0 10px 28px rgba(0,0,0,.18)!important;
}
.view-tabs button{
  min-height:42px!important;
  padding:9px 17px!important;
  border:1px solid transparent!important;
  border-radius:10px!important;
  background:transparent!important;
  color:#b8c2d1!important;
  font-weight:700!important;
  line-height:1!important;
  box-shadow:none!important;
  transition:background .16s ease,border-color .16s ease,color .16s ease,transform .16s ease!important;
}
.view-tabs button:hover:not(.active){
  background:rgba(255,174,0,.075)!important;
  border-color:rgba(255,174,0,.16)!important;
  color:#fff!important;
}
.view-tabs button.active{
  background:linear-gradient(105deg,#ffb400 0%,#ff7300 48%,#ed3c20 100%)!important;
  border-color:rgba(255,216,112,.48)!important;
  color:#fff!important;
  -webkit-text-fill-color:#fff!important;
  box-shadow:0 9px 22px rgba(235,61,31,.20),inset 0 1px rgba(255,255,255,.24)!important;
  text-shadow:0 1px 2px rgba(0,0,0,.22)!important;
}
.view-tabs button:focus-visible{
  outline:3px solid rgba(255,190,35,.26)!important;
  outline-offset:2px!important;
}

/* The tablet header uses mobile-brand markup but previously had no icon styling
   between 801px and 960px. Keep the official Relaxis mark visible throughout. */
@media screen and (max-width:960px){
  .view-tabs{display:inline-flex!important}
  .topbar .mobile-brand{
    display:flex!important;
    align-items:center!important;
    gap:10px!important;
    min-width:max-content!important;
  }
  .topbar .mobile-brand .mobile-brand-mark{
    display:block!important;
    width:46px!important;
    height:46px!important;
    flex:0 0 46px!important;
    border-radius:12px!important;
    background-color:#050b14!important;
    background-image:url('/icon-192.png?build=relaxis-v14-logo-fix')!important;
    background-repeat:no-repeat!important;
    background-position:center!important;
    background-size:cover!important;
    border:1px solid rgba(255,174,0,.27)!important;
    box-shadow:0 8px 22px rgba(0,0,0,.32),0 0 18px rgba(255,103,20,.11)!important;
    overflow:hidden!important;
  }
  .topbar .mobile-brand .brand-text{
    color:#fff!important;
    font-family:var(--display)!important;
    font-size:23px!important;
    letter-spacing:-.025em!important;
    white-space:nowrap!important;
  }
  .topbar .mobile-brand .brand-x{
    background:linear-gradient(135deg,#087bff 0 48%,#ffbd00 52% 100%)!important;
    -webkit-background-clip:text!important;
    background-clip:text!important;
    color:transparent!important;
    -webkit-text-fill-color:transparent!important;
  }
}

/* Medium preview widths: maintain a single polished header row without
   falling back to the old light tab treatment. */
@media screen and (min-width:721px) and (max-width:960px){
  .topbar{
    min-height:82px!important;
    padding:12px 24px!important;
    gap:18px!important;
    flex-wrap:nowrap!important;
    overflow:visible!important;
  }
  .topbar .saved{display:none!important}
  .topbar .view-tabs{
    flex:0 1 auto!important;
    width:auto!important;
    max-width:min(46vw,520px)!important;
    overflow-x:auto!important;
    scrollbar-width:none!important;
  }
  .topbar .view-tabs::-webkit-scrollbar{display:none!important}
  .topbar .view-tabs button{min-width:max-content!important}
  .topbar-actions{margin-left:auto!important;flex:0 0 auto!important}
  .wrap{padding-top:26px!important}
  #view-schedule>.heading,
  #view-customers>.heading,
  #view-orders>.heading,
  #view-reports>.heading{scroll-margin-top:104px!important}
}

html{
  scroll-padding-top:104px!important;
  scrollbar-color:#8d5905 #05090e!important;
}
body::-webkit-scrollbar{width:11px!important}
body::-webkit-scrollbar-track{background:#05090e!important}
body::-webkit-scrollbar-thumb{
  background:linear-gradient(#bc7808,#eb5520)!important;
  border:3px solid #05090e!important;
  border-radius:999px!important;
}

/* WhatsApp contact links that carry the row's D/O PDFs */
a.tel.wa .wa-clip{
  display:inline-block;
  margin-left:4px;
  font-size:.72em;
  opacity:.8;
  vertical-align:baseline;
}

/* WhatsApp send preview: attachment list */
.wa-attach-list{ display:flex; flex-direction:column; gap:6px; }
.wa-attach-list:empty::after{
  content:"No PDFs attached to this row";
  font-size:.85rem; opacity:.7;
}
.wa-attach{
  display:flex; align-items:center; gap:8px;
  padding:8px 10px;
  border:1px solid var(--line); border-radius:8px;
  background:var(--panel, transparent);
  font-size:.88rem;
}
.wa-attach-name{ flex:1; min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.wa-attach-size{ opacity:.65; font-variant-numeric:tabular-nums; }
.wa-attach-signed{ font-size:.75em; opacity:.85; }


/* Inline salesman assignment in the customers table */
#custTable .salesman-input{
  width:100%;
  min-width:120px;
  font:inherit;
  font-size:13px;
  padding:6px 8px;
  color:var(--ink);
  background:rgba(255,255,255,.03);
  border:1px solid var(--line);
  border-radius:8px;
}
#custTable .salesman-input:focus{
  outline:none;
  border-color:var(--brand, #d33);
  background:rgba(255,255,255,.06);
}
#custTable .salesman-input::placeholder{ color:var(--ink-soft); opacity:.7 }

/* Multiple contacts in one cell → each number is its own tap target */
.wa-multi{display:inline-flex;flex-wrap:wrap;align-items:center;gap:2px 6px}
.wa-multi .wa-sep{opacity:.45;user-select:none}
a.tel.wa .wa-who{opacity:.75;font-weight:500}
@media (max-width:768px){
  .wa-multi{gap:4px 8px}
  a.tel.wa{padding:2px 0;display:inline-block}
}

/* Per-customer WhatsApp draft controls */
.wa-draft-bar{display:flex;flex-wrap:wrap;align-items:center;gap:6px 10px;margin-top:6px}
.wa-draft-note{font-size:12px;opacity:.75}
.wa-draft-acts{display:flex;flex-wrap:wrap;gap:6px;margin-left:auto}
.ghost-btn.tiny{padding:3px 8px;font-size:12px;line-height:1.3}
@media (max-width:768px){ .wa-draft-acts{margin-left:0} }

/* WhatsApp send confirmation summary */
.wa-confirm{display:flex;flex-direction:column;gap:8px;border:1px solid var(--line);border-radius:10px;padding:12px}
.wa-confirm-row{display:flex;gap:10px;align-items:flex-start}
.wa-confirm-k{flex:0 0 96px;font-size:12px;opacity:.7;text-transform:uppercase;letter-spacing:.03em}
.wa-confirm-v{flex:1;font-weight:600;word-break:break-word}
.wa-confirm-msg{font-weight:400;white-space:pre-wrap;max-height:180px;overflow:auto;opacity:.9}
@media (max-width:640px){ .wa-confirm-row{flex-direction:column;gap:2px} .wa-confirm-k{flex:none} }

/* WhatsApp final message preview (placeholders resolved) */
.wa-final{
  white-space:pre-wrap;
  font-size:13px;
  line-height:1.45;
  padding:10px 12px;
  border-radius:12px;
  border:1px dashed var(--line, rgba(148,163,184,.35));
  background:var(--surface-2, rgba(148,163,184,.08));
  color:var(--text, inherit);
  max-height:180px;
  overflow:auto;
}
.wa-final.is-same{opacity:.7}

/* Bulk WhatsApp preview */
.wa-bulk-bar{display:flex;align-items:center;gap:8px;flex-wrap:wrap;margin-bottom:10px}
.wa-bulk-note{font-size:12px;opacity:.75}
.wa-bulk-list{display:grid;gap:10px;max-height:60vh;overflow:auto}
.wa-bulk-card{border:1px solid var(--line, rgba(148,163,184,.35));border-radius:12px;padding:10px 12px;opacity:.6}
.wa-bulk-card.is-on{opacity:1;border-color:rgba(255,173,10,.55);background:rgba(255,173,10,.05)}
.wa-bulk-head{display:flex;align-items:center;gap:10px;cursor:pointer}
.wa-bulk-head input{accent-color:#ffad0a;width:16px;height:16px;flex:0 0 auto}
.wa-bulk-who{display:flex;flex-direction:column;min-width:0;flex:1 1 auto}
.wa-bulk-who small{font-size:11px;opacity:.7}
.wa-bulk-count{font-size:12px;opacity:.8;white-space:nowrap}
.wa-bulk-msg{width:100%;margin-top:8px;font:inherit;font-size:13px;padding:8px 10px;border:1px solid var(--line, rgba(148,163,184,.35));border-radius:10px;resize:vertical}
.wa-bulk-files{display:flex;flex-wrap:wrap;gap:6px;margin-top:6px}
.wa-bulk-file{font-size:11px;padding:2px 8px;border-radius:999px;background:rgba(148,163,184,.15)}
.wa-bulk-none{font-size:11px;opacity:.6}
@media (max-width:640px){ .wa-bulk-list{max-height:none} }

/* WhatsApp template routing rules */
.wa-rules{margin-top:14px;padding-top:12px;border-top:1px solid var(--line, rgba(148,163,184,.35))}
.wa-rules-head{display:flex;align-items:center;justify-content:space-between;gap:10px}
.wa-rule{display:flex;align-items:center;gap:8px;flex-wrap:wrap;margin:8px 0}
.wa-rule select,.wa-rule input{font:inherit;font-size:13px;padding:6px 8px;border:1px solid var(--line, rgba(148,163,184,.35));border-radius:8px;min-width:0}
.wa-rule .wa-rule-match{flex:1 1 150px}
.wa-rule-arrow{opacity:.6}
@media (max-width:640px){ .wa-rule{display:grid;grid-template-columns:1fr 1fr auto} .wa-rule .wa-rule-arrow{display:none} .wa-rule .wa-rule-tpl{grid-column:1/3} }