/* FrameCraft mobile layout */
@media screen and (max-width:760px){
html,body{max-width:100%;overflow-x:clip}*{box-sizing:border-box}
.app,.main,.content,.view,.card,.grid2,.billing-grid,.form-grid>*,.guide-grid,.supplier-grid{min-width:0}
.sidebar{width:100%;height:calc(72px + env(safe-area-inset-bottom));padding:4px 0 env(safe-area-inset-bottom);overflow:hidden}
.nav{overflow-x:auto;overflow-y:hidden;justify-content:flex-start;scrollbar-width:none;gap:3px;padding:0 8px;-webkit-overflow-scrolling:touch}
.nav::-webkit-scrollbar{display:none}.nav button{flex:0 0 auto;min-width:78px;min-height:60px;font-size:11px;line-height:1.2}.nav button .icon{font-size:20px}
.main{padding-bottom:calc(90px + env(safe-area-inset-bottom))}
.topbar{position:relative;padding:10px 12px;gap:8px}.top-actions{gap:8px}.top-actions .switch{min-width:0;flex:1 1 100%;width:100%;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:3px}.top-actions .switch button{font-size:12px;white-space:normal;min-height:42px;padding:7px 3px}.top-actions #languageSelect{width:100%!important;min-width:0!important;flex:1 1 100%;min-height:42px}
.content{padding:16px 12px 24px}.heading{gap:12px;margin-bottom:16px}.heading h2{font-size:24px;line-height:1.25}.heading p,.card-head p{font-size:13px;line-height:1.6}
.card{padding:16px;border-radius:14px;margin-bottom:12px}.card-head{flex-wrap:wrap;gap:10px;align-items:flex-start}.card-head>div{min-width:0;flex:1 1 170px}.card-head h3{font-size:16px}
.btn,.billing-tab,.subpage-btn{min-height:44px;font-size:13px;padding:10px 14px;white-space:normal}.btn.small{min-height:40px;font-size:12px;padding:8px 12px}
.form-grid,.supplier-grid,.machine-grid,.guide-grid,.grid2,.billing-grid{grid-template-columns:minmax(0,1fr)!important;gap:14px}.field.full{grid-column:1}
.field label{font-size:13px;line-height:1.45;margin-bottom:7px}.field input,.field select,.field textarea,input.inline,select.inline,.search,.og-form input,.og-form select,.og-form textarea{font-size:16px!important;min-height:46px;padding:11px 12px;width:100%;min-width:0;max-width:100%}input[type=checkbox]{width:20px!important;min-height:20px!important;height:20px!important;vertical-align:middle}
.toolbar,.billing-tabs{display:flex;flex-wrap:wrap;gap:8px}.toolbar .btn,.billing-tabs .billing-tab{flex:1 1 140px}.toolbar .search{flex:1 1 100%;width:100%}
.stats{grid-template-columns:repeat(2,minmax(0,1fr))!important;gap:10px}.stat{padding:14px}.stat-top{font-size:12px;line-height:1.45}.stat-value{font-size:22px;overflow-wrap:anywhere}.stat-foot{font-size:11px}
.bill-summary{order:0!important;position:static!important;padding:18px}.bill-summary h3{font-size:18px}.bill-summary .line{font-size:14px}.bill-summary .total{font-size:20px}.bill-summary .btn{min-height:46px}.billing-grid>aside,.billing-grid>.bill-summary{margin-top:0}
.door-quote-card{padding:16px}.door-quote-card h4{font-size:16px}.door-quote-card .form-grid{grid-template-columns:1fr!important}.door-quote-summary{padding-top:0;font-size:15px}
.table-wrap{max-width:100%;overflow-x:auto;-webkit-overflow-scrolling:touch}.table th{font-size:11px}.table td{font-size:13px}.table-wrap input.inline{min-width:80px}
#view-billing #billRows tr{grid-template-columns:1fr!important;padding:14px!important;gap:12px!important}#view-billing #billRows td{grid-column:1!important;font-size:14px}#view-billing #billRows td:before{font-size:12px}#view-billing #billRows .money{padding-top:0}
#view-preview .heading>div:last-child{width:100%;display:grid!important;grid-template-columns:repeat(2,minmax(0,1fr))}#view-preview .bill-preview{padding:14px;width:100%;max-width:100%;overflow-wrap:anywhere}#view-preview .bill-top{flex-wrap:wrap;gap:14px}#view-preview .bill-table{table-layout:fixed}#view-preview .bill-table td,#view-preview .bill-table th{font-size:11px;padding:8px 4px;overflow-wrap:anywhere}
.visit-record{flex-wrap:wrap;gap:10px;padding:14px}.visit-record>div:first-child{flex:1 1 100%;min-width:0}.visit-record b{font-size:14px}.visit-record span{font-size:13px;line-height:1.5}.visit-record .btn{flex:1 1 90px}
.guide-tabs{display:flex;overflow-x:auto;gap:4px}.guide-tabs button{flex:none;min-height:42px;font-size:13px}.guide-content{padding:16px}.guide-content li,.guide-content .lede{font-size:14px}.guide-note{font-size:12px}
.modal-backdrop{padding:10px}.modal{width:100%;max-height:calc(100dvh - 20px);border-radius:14px}.modal-head,.modal-body,.modal-foot{padding:16px}.modal-foot{position:sticky;bottom:0;background:white}.modal-foot .btn{flex:1}
#onlineGate{padding:12px;min-height:100dvh}.og-card{width:100%;max-height:none;overflow:visible;padding:18px}.og-card h1{font-size:24px}.og-job,.og-bill{padding:14px}.og-meta{font-size:14px}.og-toolbar button{min-height:44px;flex:1}.og-form button,.og-button{min-height:46px}.og-photo{max-width:100%;max-height:280px}
.manufacturing-actions{display:grid;grid-template-columns:1fr;gap:10px}.manufacturing-actions .btn{min-height:54px;text-align:left}.payment-total{font-size:24px;font-weight:700}
}
@media screen and (min-width:761px){.manufacturing-actions{display:grid;grid-template-columns:repeat(3,1fr);gap:12px}}

/* Four portal buttons */
@media(max-width:760px){.top-actions .switch{grid-template-columns:repeat(2,minmax(0,1fr))}.top-actions .switch button{font-size:13px}}
/* Compact mobile navigation: all workshop sections remain visible without horizontal sliding. */
@media screen and (max-width:760px){
  .sidebar{height:calc(116px + env(safe-area-inset-bottom));padding:3px 4px env(safe-area-inset-bottom)}
  .nav{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));grid-template-rows:repeat(2,52px);gap:2px;overflow:hidden;padding:0;align-content:start}
  .nav button{min-width:0;min-height:52px;height:52px;padding:3px 1px;font-size:9px;line-height:1.08;overflow:hidden;text-overflow:ellipsis;white-space:normal}
  .nav button .icon{font-size:15px;margin-bottom:1px}
  .main{padding-bottom:calc(132px + env(safe-area-inset-bottom))}
  .top-actions .switch{grid-template-columns:repeat(4,minmax(0,1fr));gap:2px}
  .top-actions .switch button{min-height:36px;padding:4px 2px;font-size:10px;line-height:1.1}
  .top-actions{gap:5px}
  .top-actions #languageSelect{min-height:36px!important;font-size:13px!important}
  #portalDesignCards .customer-directory-list{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:7px}
  #portalDesignCards .customer-directory-list .btn{min-height:40px;padding:7px;font-size:12px;text-align:left}
}
/* Keep the language chooser only as wide as its label. */
.top-actions #languageSelect{width:86px!important;min-width:86px!important;max-width:86px!important;flex:0 0 86px!important;padding:7px 6px!important}
@media screen and (max-width:760px){.top-actions #languageSelect{width:82px!important;min-width:82px!important;max-width:82px!important;flex:0 0 82px!important}}
/* Refined app header and navigation footer. */
.topbar{background:linear-gradient(100deg,#fff 0%,#f6faf6 100%);border-bottom:1px solid #d9e4da;box-shadow:0 5px 18px rgba(28,56,44,.05)}
.crumb{display:inline-flex;align-items:center;gap:4px;padding:7px 10px;border:1px solid #e1e9e2;border-radius:9px;background:#fff;box-shadow:0 2px 6px rgba(27,48,39,.03)}
.crumb:hover{border-color:#a7c0aa}.top-actions{padding:4px 5px;border:1px solid #e0e8e1;background:#f8fbf8;border-radius:14px}.chip{background:#fff;border-color:#e0e8e1}.side-bottom{background:#112019;border:1px solid #30453a;border-radius:12px;padding:13px 12px;box-shadow:inset 0 1px 0 rgba(255,255,255,.04)}
@media screen and (max-width:760px){
  .topbar{padding:8px 10px;border-radius:0 0 15px 15px;box-shadow:0 5px 16px rgba(26,49,38,.08)}
  .crumb{padding:5px 7px;font-size:10px;max-width:118px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
  .chip{display:none}
  .top-actions{padding:3px;border-radius:11px;gap:3px}
  .sidebar{height:calc(72px + env(safe-area-inset-bottom));padding:4px 5px env(safe-area-inset-bottom);background:#14271f;border-top:1px solid #486154;box-shadow:0 -8px 22px rgba(17,37,28,.20)}
  .nav{grid-template-columns:repeat(5,minmax(0,1fr));grid-template-rows:60px;gap:3px;align-items:stretch}
  .nav button{height:60px;min-height:60px;border-radius:10px;padding:4px 2px;font-size:9px;color:#d9e6dc}
  .nav button.active{background:#2b5d49;box-shadow:inset 0 2px 0 #c8db9e}
  .nav button .icon{font-size:15px;color:#c8db9e}
  .main{padding-bottom:calc(88px + env(safe-area-inset-bottom))}
  .side-bottom,.brand,.nav-label{display:none}
}
/* Inline workspace panels keep related work on one screen. */
.manufacturing-inline-list,.billing-inline-work{margin-top:16px}
.manufacturing-inline-list .view,.billing-inline-work .view{display:none;padding:0;background:transparent}
.manufacturing-inline-list .view.active,.billing-inline-work .view.active{display:block}
.manufacturing-inline-list .heading,.billing-inline-work .heading{margin-top:8px}
@media(max-width:760px){.manufacturing-inline-list,.billing-inline-work{margin-top:12px}.manufacturing-inline-list .view,.billing-inline-work .view{padding:0}.manufacturing-inline-list .heading,.billing-inline-work .heading{padding:0}}
/* Billing sequence */
#view-billing .billing-flow{display:flex;align-items:center;gap:5px;flex-wrap:wrap;padding:6px 8px;background:#f3f7f4;border:1px solid #dce8df;border-radius:10px;margin:0 0 12px}
#view-billing .billing-flow-step{min-height:32px;padding:6px 9px;font-size:11px;white-space:nowrap}
#view-billing .billing-flow-arrow{color:#789083;font-size:14px;font-weight:700;line-height:1}
@media(max-width:640px){#view-billing .billing-flow{display:flex;flex-direction:row;align-items:center;justify-content:flex-start;gap:4px;padding:6px 7px}#view-billing .billing-flow-step{width:auto;min-width:0;min-height:30px;padding:5px 7px;font-size:10px;text-align:center}#view-billing .billing-flow-arrow{align-self:center;transform:none;font-size:13px;line-height:1}}

/* Vendor first cards: keep product rows inside the expanded vendor */
.vendor-materials-collapsed{display:none!important}.vendor-card-actions{display:flex;align-items:center;gap:6px;flex-wrap:wrap}.supplier-top{align-items:flex-start}.supplier-meta{cursor:pointer}.vendor-card-expanded{border-color:#b8cebd;box-shadow:0 6px 22px #183a2512}@media(max-width:640px){.vendor-card-actions{gap:4px}.vendor-card-actions .btn{padding:7px 8px;font-size:10px}.supplier-top{gap:8px;padding:12px}.supplier-detail{flex-direction:column;gap:6px}.supplier-grid{grid-template-columns:1fr}}

/* Medium-size work photo thumbnails */
.photo-grid img,.visit-record img{width:150px;height:112px;object-fit:cover;border-radius:10px}
@media(max-width:640px){.photo-grid img,.visit-record img{width:128px;height:96px}}
.fc-icon{display:inline-block;margin-right:.4em;line-height:1;vertical-align:-.08em;font-size:1.05em}

/* Premium mobile workspace refinements */
:root{--premium-ink:#172820;--premium-muted:#66776c;--premium-line:#dce6df;--premium-surface:#ffffff;--premium-soft:#f4f8f5;--premium-green:#1d5a43;--premium-lime:#c7d99c}
body{color:var(--premium-ink);background:#f3f6f3;font-family:Inter,ui-sans-serif,system-ui,-apple-system,"Segoe UI",sans-serif}
.card,.panel,.modal,.og-card{border:1px solid var(--premium-line);box-shadow:0 8px 24px rgba(22,48,34,.055)}
.heading h2{letter-spacing:-.025em}.heading p,.card-head p{color:var(--premium-muted)}
.btn,.billing-tab,.subpage-btn{transition:transform .16s ease,box-shadow .16s ease,border-color .16s ease}.btn:active,.billing-tab:active,.subpage-btn:active{transform:scale(.98)}
.btn:focus-visible,button:focus-visible,a:focus-visible,input:focus-visible,select:focus-visible,textarea:focus-visible{outline:3px solid #a77e55;outline-offset:2px}
.fc-icon{width:1.2em;text-align:center}
@media(max-width:760px){
  body{font-size:15px}.content{padding:14px 12px calc(26px + env(safe-area-inset-bottom))}.heading{align-items:flex-start;margin-bottom:12px}.heading h2{font-size:22px}.card{padding:14px;border-radius:16px;margin-bottom:12px;background:var(--premium-surface)}
  .grid2,.billing-grid,.form-grid,.guide-grid,.supplier-grid{grid-template-columns:minmax(0,1fr)!important;gap:10px}.form-row,.grid{min-width:0}.card-head{align-items:center}.card-head h3{letter-spacing:-.01em}
  input,select,textarea{font-size:16px!important;min-height:44px;max-width:100%}textarea{min-height:96px}.btn,.billing-tab,.subpage-btn{min-height:44px;border-radius:12px}
  .topbar{position:sticky;top:0;z-index:30;backdrop-filter:blur(14px);background:rgba(250,252,250,.94);padding:8px 10px}.topbar>div:first-child{min-width:0}.top-actions{margin-left:auto;max-width:100%}
  .sidebar{position:fixed;left:0;right:0;bottom:0;z-index:50;padding:5px 6px calc(5px + env(safe-area-inset-bottom));height:calc(68px + env(safe-area-inset-bottom));border-radius:16px 16px 0 0}.nav{grid-template-columns:repeat(5,minmax(0,1fr));grid-template-rows:58px;gap:2px;align-items:stretch}.nav button{min-width:0;width:100%;height:58px;min-height:58px;padding:4px 1px;font-size:10px;border-radius:12px;white-space:normal}.nav button .icon{font-size:17px}.main{padding-bottom:calc(78px + env(safe-area-inset-bottom))}
  .photo-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}.photo-grid img,.visit-record img{width:100%;height:auto;aspect-ratio:4/3;max-height:190px;object-fit:cover;border-radius:13px}
  #view-billing .billing-flow{overflow-x:auto;flex-wrap:nowrap;scrollbar-width:none}#view-billing .billing-flow::-webkit-scrollbar{display:none}#view-billing .billing-flow-step{flex:0 0 auto;min-height:36px;font-size:11px}
}
@media(prefers-reduced-motion:reduce){*,*::before,*::after{scroll-behavior:auto!important;transition:none!important;animation:none!important}}

.graphic-mark{display:inline-flex;width:34px;height:34px;flex:0 0 34px;align-items:center;justify-content:center;margin-right:10px;border-radius:12px;color:#286247;background:linear-gradient(145deg,#eef5ee,#dceadd);box-shadow:inset 0 0 0 1px rgba(54,101,70,.08);vertical-align:middle}.graphic-mark svg{width:19px;height:19px}.heading h2,.card-head h3,.hero h2{display:flex;align-items:center;gap:0}.hero h2 .graphic-mark{width:42px;height:42px;flex-basis:42px;border-radius:14px;background:linear-gradient(145deg,#dce9c6,#eef4df);color:#244f3c}.hero h2 .graphic-mark svg{width:22px;height:22px}.dashboard-shortcut{position:relative;overflow:hidden}.shortcut-glow{position:absolute;width:94px;height:94px;right:-31px;top:-31px;border:1px solid rgba(75,122,89,.10);border-radius:50%;background:radial-gradient(circle,rgba(197,218,177,.25),rgba(197,218,177,0) 68%);pointer-events:none}.dashboard-shortcut>*:not(.shortcut-glow){position:relative;z-index:1}.stats .stat{position:relative;overflow:hidden}.stats .stat:after{content:"";position:absolute;right:-20px;bottom:-25px;width:72px;height:72px;border-radius:50%;background:radial-gradient(circle,rgba(199,217,156,.28),rgba(199,217,156,0) 70%);pointer-events:none}
@media(max-width:760px){.graphic-mark{width:32px;height:32px;flex-basis:32px;margin-right:9px;border-radius:11px}.heading h2{gap:0}.card-head h3{align-items:center}.hero h2{align-items:flex-start}.hero h2 .graphic-mark{width:36px;height:36px;flex-basis:36px}}
/* Billing workflow: equal three-column steps on phone */
@media(max-width:760px){#view-billing .billing-flow{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));grid-template-rows:repeat(2,minmax(54px,auto));gap:8px;padding:10px;background:linear-gradient(145deg,#f5f8f5,#edf3ee);border-radius:16px}#view-billing .billing-flow-arrow{display:none}#view-billing .billing-flow-step{width:100%;min-width:0;min-height:54px;height:100%;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:4px;padding:7px 4px;border:1px solid #dbe6dc;border-radius:13px;background:#fff;color:#263b30;box-shadow:0 3px 9px rgba(24,57,38,.05);font-size:11px;line-height:1.15;text-align:center;white-space:normal}#view-billing .billing-flow-step.active,#view-billing .billing-flow-step.on{background:#1d5a43;color:#fff;border-color:#1d5a43}.billing-flow-step .fc-icon{font-size:18px;margin:0;width:auto;height:auto;background:transparent;box-shadow:none}#view-billing .billing-flow-step:first-of-type .fc-icon{font-size:18px}}
/* Warm cream and walnut luxury palette */
:root{--ink:#342920;--muted:#786b5d;--paper:#f6f1e8;--green:#73503a;--green2:#f0e5d4;--lime:#d3b77e;--line:#e5d9c8;--shadow:0 12px 32px rgba(61,43,29,.07);--premium-ink:#342920;--premium-muted:#786b5d;--premium-line:#e5d9c8;--premium-surface:#fffdf9;--premium-soft:#f5eee3;--premium-green:#73503a;--premium-lime:#d3b77e}
body{background:linear-gradient(180deg,#f7f3eb 0%,#f3ede2 100%);color:#342920}.sidebar{background:#33271f;color:#f7f0e5}.nav button:hover,.nav button.active{background:#ffffff12;color:#fff}.nav button.active{box-shadow:inset 3px 0 #d3b77e}.nav .icon{color:#e0c99f}.topbar{background:rgba(255,253,249,.95);border-color:#e7ddce}.crumb,.top-actions,.chip{background:#fffdf9;border-color:#e7ddce}.card,.stat,.og-card{background:#fffdf9;border-color:#e8ddce;box-shadow:0 8px 24px rgba(61,43,29,.055)}.hero{background:linear-gradient(120deg,#4c382b 0%,#72523b 70%,#8a6849 100%);box-shadow:0 14px 32px rgba(63,43,29,.16)}.hero .eyebrow{color:#dec79e}.hero-art{opacity:.88}.hero .btn,.btn.primary{background:#d7bd8c;color:#342920;border-color:#d7bd8c}.btn.light{background:#fffdf9;border-color:#e4d7c4;color:#4b392c}.subpage-btn.active,.billing-tab.active{background:#73503a;color:#fff;border-color:#73503a}.graphic-mark,.shortcut-icon{color:#73503a;background:linear-gradient(145deg,#f3e9d8,#e9dac2);box-shadow:inset 0 0 0 1px rgba(107,74,49,.10)}.shortcut-glow{background:radial-gradient(circle,rgba(211,183,126,.23),rgba(211,183,126,0) 70%);border-color:rgba(150,117,74,.13)}.stats .stat:after{background:radial-gradient(circle,rgba(211,183,126,.24),rgba(211,183,126,0) 70%)}.fc-icon{color:inherit}
@media(max-width:760px){.sidebar{background:#33271f;border-top-color:#735c47;box-shadow:0 -8px 22px rgba(46,31,21,.22)}.nav button{color:#f1e7d7}.nav button .icon{color:#e0c99f}.nav button.active{background:#574131;box-shadow:inset 0 2px 0 #d3b77e}.billing-flow-step{border-color:#e4d7c4!important;background:#fffdf9!important;color:#342920!important}.billing-flow-step.active,.billing-flow-step.on{background:#73503a!important;color:#fff!important;border-color:#73503a!important}}
/* Magic Brown reference refinement: espresso, leather brown, parchment and brass */
:root{--ink:#30231d;--muted:#76685e;--paper:#f7f1e8;--green:#68432f;--green2:#f1e5d6;--lime:#c9a574;--line:#e5d8c8;--shadow:0 12px 32px rgba(55,35,24,.08);--premium-ink:#30231d;--premium-muted:#76685e;--premium-line:#e5d8c8;--premium-surface:#fffdf9;--premium-soft:#f5ecdf;--premium-green:#68432f;--premium-lime:#c9a574}
body{background:linear-gradient(180deg,#f8f4ed 0%,#f3eadf 100%);color:#30231d}.sidebar{background:#30231d;color:#f8efe3}.nav button:hover,.nav button.active{background:#ffffff13;color:#fff}.nav button.active{box-shadow:inset 3px 0 #c9a574}.nav .icon{color:#d8b98e}.topbar{background:rgba(255,253,249,.96);border-color:#e7dac8}.crumb,.top-actions,.chip{background:#fffdf9;border-color:#e7dac8}.card,.stat,.og-card{background:#fffdf9;border-color:#e5d8c8;box-shadow:0 8px 24px rgba(55,35,24,.055)}.hero{background:linear-gradient(122deg,#402b21 0%,#68432f 66%,#805840 100%);box-shadow:0 14px 32px rgba(55,35,24,.18)}.hero .eyebrow{color:#dfc29a}.hero-art{opacity:.9}.hero .btn,.btn.primary{background:#c9a574;color:#30231d;border-color:#c9a574}.btn.light{background:#fffdf9;border-color:#e5d8c8;color:#473326}.subpage-btn.active,.billing-tab.active{background:#68432f;color:#fff;border-color:#68432f}.graphic-mark,.shortcut-icon{color:#68432f;background:linear-gradient(145deg,#f4eadb,#ead9c3);box-shadow:inset 0 0 0 1px rgba(104,67,47,.10)}.shortcut-glow{background:radial-gradient(circle,rgba(201,165,116,.23),rgba(201,165,116,0) 70%);border-color:rgba(150,108,70,.14)}.stats .stat:after{background:radial-gradient(circle,rgba(201,165,116,.25),rgba(201,165,116,0) 70%)}
@media(max-width:760px){.sidebar{background:#30231d;border-top-color:#76543e;box-shadow:0 -8px 22px rgba(46,29,20,.23)}.nav button{color:#f2e8dc}.nav button .icon{color:#d8b98e}.nav button.active{background:#513827;box-shadow:inset 0 2px 0 #c9a574}.billing-flow-step{border-color:#e5d8c8!important;background:#fffdf9!important;color:#30231d!important}.billing-flow-step.active,.billing-flow-step.on{background:#68432f!important;color:#fff!important;border-color:#68432f!important}}
/* Keep the Billing route readable while retaining equal 3x2 tiles */
@media(max-width:760px){#view-billing .billing-flow-arrow{display:none!important}#view-billing .billing-flow-step{position:relative;overflow:visible}#view-billing .billing-flow-step:nth-of-type(1)::after,#view-billing .billing-flow-step:nth-of-type(2)::after,#view-billing .billing-flow-step:nth-of-type(4)::after{content:"→";position:absolute;right:-10px;top:50%;z-index:3;transform:translate(50%,-50%);color:#9b7854;font-size:15px;font-weight:800;text-shadow:0 1px 3px #fffdf9}#view-billing .billing-flow-step:nth-of-type(3)::after{content:"↓";position:absolute;left:50%;bottom:-13px;z-index:3;transform:translate(-50%,50%);color:#9b7854;font-size:14px;font-weight:800;text-shadow:0 1px 3px #fffdf9}#view-billing .billing-flow-step .fc-icon{display:inline-block;margin:0;width:auto;height:auto;background:transparent;box-shadow:none;font-size:18px}}
/* Estimate: simple rupee mark to match the restrained premium icon set */
#view-billing .billing-flow-step#billingModeEstimate .fc-icon{display:inline-flex;align-items:center;justify-content:center;width:25px;height:25px;margin:0;border-radius:50%;background:#f0e4d3!important;color:#68432f!important;box-shadow:inset 0 0 0 1px #deccb4!important;font-family:Georgia,serif;font-size:16px!important;font-weight:700;line-height:1}
@media(max-width:760px){#view-billing .billing-flow-step#billingModeEstimate .fc-icon{width:24px;height:24px;font-size:16px!important}}
/* Eliminate leftover green surfaces across the Admin UI */
#view-billing .bill-summary{background:linear-gradient(145deg,#402b21 0%,#68432f 100%)!important;color:#fffaf2}.side-bottom{background:#3b2a20!important;border-color:#74533d!important;color:#ddc9ae}.offline{color:#e4c99d!important}.dot{background:#c9a574!important}.tag{background:#f1e5d6!important;color:#68432f!important}.tag.amber{background:#f3e9d9!important;color:#8a6136!important}.tag.gray{background:#efe9e1!important;color:#76685e!important}.timeline{border-left-color:#d3bd9d!important}.step:before{background:#9a7151!important;border-color:#f3e9d9!important}.customer-note{border-color:#e5d8c8!important;background:#f7f1e8!important;color:#66574b!important}.top-actions .switch button.on{color:#68432f!important}.btn:focus-visible,button:focus-visible,a:focus-visible,input:focus-visible,select:focus-visible,textarea:focus-visible{outline-color:#a77e55!important}#view-billing .billing-flow{background:linear-gradient(145deg,#f6efe4,#efe4d5)!important;border-color:#e5d8c8!important}
.top-actions .chip{color:#76685e!important}.top-actions .chip:first-letter{color:#9b7854}
/* Header hierarchy and role switch, based on adaptive app-bar patterns */
.topbar{background:rgba(255,253,249,.97);border-bottom:1px solid #e4d4c1;box-shadow:0 4px 16px rgba(63,43,29,.07)}.crumb{border-color:#eadbc9;background:#fffdf9;color:#76685e}.crumb strong{color:#30231d;font-size:13px}.top-actions .chip{background:#f3eadf;border:1px solid #e5d8c8;border-radius:999px;padding:7px 10px;color:#76685e!important;font-weight:650}.top-actions .switch{padding:4px;border-radius:14px;background:#f1e7da;border:1px solid #e3d4c1;gap:4px}.top-actions .switch button{border:1px solid transparent;border-radius:10px;background:transparent;color:#68432f;min-height:38px;padding:8px 11px;font-weight:700;transition:background .16s,color .16s,box-shadow .16s}.top-actions .switch button.on{background:linear-gradient(140deg,#68432f,#855a3e);color:#fffaf2;box-shadow:0 3px 9px rgba(64,40,26,.18)}.top-actions .switch button[data-portal]::before{display:inline-flex;align-items:center;justify-content:center;margin-right:6px;width:18px;height:18px;border-radius:6px;background:#eadbc8;color:#68432f;font-size:13px;line-height:1}.top-actions .switch button[data-portal="index.html"]::before{content:"⌂"}.top-actions .switch button[data-portal="customer.html"]::before{content:"♙"}.top-actions .switch button[data-portal="fitter.html"]::before{content:"⚒"}.top-actions .switch button[data-portal="supervisor.html"]::before{content:"◉"}.top-actions .switch button.on::before{background:#d9bf96;color:#3d281d}
@media(max-width:760px){.topbar{display:grid;grid-template-columns:minmax(0,1fr) auto;grid-template-areas:"crumb language" "roles roles";align-items:center;gap:8px;padding:8px 10px 10px;border-radius:0 0 16px 16px}.topbar>.crumb{grid-area:crumb;width:100%;max-width:none;min-height:38px;padding:7px 10px;font-size:12px;border-radius:12px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.top-actions{display:contents}.top-actions #languageSelect{grid-area:language;width:84px!important;min-width:84px!important;max-width:84px!important;min-height:38px!important;flex:0 0 84px!important;border:1px solid #dfcdb7!important;border-radius:12px!important;background:#fffaf2!important;color:#503829!important;font-weight:700}.top-actions .switch{grid-area:roles;display:grid;width:100%;grid-template-columns:repeat(4,minmax(0,1fr));gap:4px;padding:4px;border-radius:14px;background:#eee2d2}.top-actions .switch button{display:flex;flex-direction:column;justify-content:center;gap:2px;min-width:0;min-height:48px;padding:5px 2px;border-radius:11px;font-size:10px;line-height:1.1;white-space:normal}.top-actions .switch button[data-portal]::before{margin:0;width:19px;height:19px;font-size:13px}.top-actions .switch button.on{background:linear-gradient(140deg,#68432f,#855a3e);color:#fffaf2}.top-actions .chip{display:none}.main{padding-top:0}}

/* Airy header with a compact Admin role menu and direct Home action */
.topbar{display:flex;align-items:center;gap:14px;min-height:68px;padding:12px 18px;background:rgba(255,253,249,.97);border-bottom:1px solid #e4d4c1;box-shadow:0 4px 16px rgba(63,43,29,.055)}
.header-home{display:inline-flex;align-items:center;justify-content:center;gap:7px;min-height:42px;padding:0 13px;border:1px solid #e3d2be;border-radius:13px;background:linear-gradient(145deg,#f6eddf,#efe1ce);color:#68432f;font-family:inherit;font-size:13px;font-weight:700;line-height:1;white-space:nowrap;cursor:pointer;transition:transform .15s,background .15s}.header-home:hover{background:#ead7bc;transform:translateY(-1px)}.home-icon{font-size:20px;line-height:1}
.topbar>.crumb{flex:1;min-width:120px;max-width:max-content;background:transparent;border:0;box-shadow:none;padding:8px 2px;color:#76685e}.top-actions{display:flex;align-items:center;gap:10px;margin-left:auto}.top-actions .switch{position:relative;display:flex;align-items:center;width:auto;min-width:0;padding:3px;border:1px solid #e3d4c1;border-radius:14px;background:#f3eadf}.top-actions .switch .admin-menu-trigger{display:flex;align-items:center;gap:7px;min-height:40px;padding:8px 13px;border:0;border-radius:11px;background:linear-gradient(140deg,#68432f,#855a3e);color:#fffaf2;font-size:13px;font-weight:750;white-space:nowrap;cursor:pointer;box-shadow:0 3px 9px rgba(64,40,26,.14)}.admin-mark{font-size:14px}.menu-chevron{font-size:17px;transition:transform .16s}.admin-menu-trigger[aria-expanded=true] .menu-chevron{transform:rotate(180deg)}.portal-role-menu{position:absolute;z-index:80;top:calc(100% + 8px);right:0;width:218px;padding:7px;border:1px solid #e5d5c2;border-radius:15px;background:#fffdf9;box-shadow:0 16px 34px rgba(55,35,24,.17)}.portal-role-menu[hidden]{display:none}.portal-role-menu button{display:flex;align-items:center;gap:10px;width:100%;min-height:46px;padding:9px 11px;border:0;border-radius:10px;background:transparent;color:#473326;text-align:left;font-family:inherit;font-size:13px;font-weight:650;line-height:1.2;cursor:pointer}.portal-role-menu button:hover,.portal-role-menu button:focus-visible{background:#f3eadf;color:#68432f}.portal-role-menu button span{display:grid;place-items:center;width:28px;height:28px;border-radius:9px;background:#eee0ce;color:#68432f;font-size:15px}
@media(max-width:760px){.topbar{display:grid;grid-template-columns:auto minmax(0,1fr) auto;grid-template-areas:"home crumb language" "roles roles roles";align-items:center;gap:7px 9px;padding:9px 12px 11px;border-radius:0 0 16px 16px}.header-home{grid-area:home;min-height:38px;padding:0 10px;border-radius:11px;font-size:12px}.home-icon{font-size:18px}.topbar>.crumb{grid-area:crumb;width:100%;max-width:none;min-width:0;min-height:36px;padding:5px 2px;font-size:12px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.top-actions{display:contents}.top-actions #languageSelect{grid-area:language;width:78px!important;min-width:78px!important;max-width:78px!important;min-height:38px!important;padding:6px 7px!important;border:1px solid #dfcdb7!important;border-radius:11px!important;background:#fffaf2!important;color:#503829!important;font-weight:700}.top-actions .chip{display:none}.top-actions .switch{grid-area:roles;justify-self:start;width:auto;max-width:100%;padding:3px;border-radius:12px}.top-actions .switch .admin-menu-trigger{min-height:38px;padding:7px 12px;font-size:12px}.portal-role-menu{left:0;right:auto;top:calc(100% + 7px);width:min(260px,calc(100vw - 24px))}.main{padding-top:2px}}

.top-actions .switch .admin-menu-trigger,.top-actions .switch .admin-menu-trigger.on{color:#fffaf2!important}.top-actions .switch .portal-role-menu button::before{content:none!important;display:none!important}

/* Stronger contrast for the active Admin control and a unified top header */
.topbar{background:linear-gradient(100deg,#fffdf9 0%,#f7efe4 100%);border-bottom:1px solid #dfcdb7;box-shadow:0 4px 15px rgba(55,35,24,.075)}.header-home{background:#f3e8d8;border-color:#ddc7ad;color:#4b3022}.top-actions .switch .admin-menu-trigger,.top-actions .switch .admin-menu-trigger:hover,.top-actions .switch .admin-menu-trigger:focus-visible,.top-actions .switch .admin-menu-trigger:active,.top-actions .switch .admin-menu-trigger.on,.top-actions .switch .admin-menu-trigger[aria-expanded=true]{background:linear-gradient(135deg,#38251c 0%,#563727 100%)!important;color:#fff!important;-webkit-text-fill-color:#fff!important;text-shadow:0 1px 1px rgba(0,0,0,.24);font-size:14px;font-weight:800;min-width:112px;min-height:42px;border:1px solid #68432f;box-shadow:0 3px 10px rgba(56,37,28,.22)}.top-actions .switch .admin-menu-trigger .admin-mark,.top-actions .switch .admin-menu-trigger .menu-chevron{color:#fff!important;-webkit-text-fill-color:#fff!important}.portal-role-menu{background:#fffdf9;border-color:#dfcdb7}.portal-role-menu button{color:#3c2a20;font-weight:700}
@media(max-width:760px){.topbar{background:linear-gradient(100deg,#fffdf9 0%,#f7efe4 100%)}.top-actions .switch .admin-menu-trigger{min-width:108px;min-height:40px;font-size:13px}}

/* Keep language and Admin together at the upper-right corner on phones */
@media(max-width:760px){.topbar{grid-template-columns:auto minmax(24px,1fr) auto;grid-template-areas:"home crumb actions";gap:7px}.top-actions{grid-area:actions;display:flex;align-items:center;justify-content:flex-end;gap:6px;margin:0}.top-actions #languageSelect{grid-area:auto;flex:0 0 76px!important;width:76px!important;min-width:76px!important;max-width:76px!important}.top-actions .switch{grid-area:auto;flex:0 0 auto;margin:0}.top-actions .switch .admin-menu-trigger{min-width:100px;min-height:38px;padding:6px 9px;font-size:12px}.portal-role-menu{left:auto;right:0;top:calc(100% + 7px)}}

/* Compact one-line mobile app bar: Home, current page, language, Admin */
@media(max-width:760px){.topbar{display:grid!important;grid-template-columns:auto minmax(48px,1fr) auto auto!important;grid-template-areas:"home crumb language admin"!important;align-items:center;gap:6px;padding:8px 10px!important;min-height:56px}.header-home{grid-area:home;min-height:36px;padding:0 9px!important;gap:5px;font-size:11px!important;border-radius:10px}.home-icon{font-size:16px}.topbar>.crumb{grid-area:crumb;display:block;min-width:0!important;max-width:none!important;width:auto!important;margin:0;padding:4px 0!important;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-size:0!important;line-height:1.2}.topbar>.crumb span{font-size:0!important}.topbar>.crumb strong{display:inline-block;max-width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-size:12px!important}.top-actions{display:contents!important}.top-actions .chip{display:none!important}.top-actions #languageSelect{grid-area:language;align-self:center;flex:none!important;width:88px!important;min-width:88px!important;max-width:88px!important;height:36px!important;min-height:36px!important;padding:5px 6px!important;border-radius:10px!important;font-size:12px!important}.top-actions .switch{grid-area:admin;position:relative;display:flex!important;justify-self:end;width:auto!important;max-width:none!important;padding:2px!important;border-radius:11px!important}.top-actions .switch .admin-menu-trigger{display:flex!important;flex-direction:row!important;align-items:center;justify-content:center;gap:5px;min-width:94px!important;width:auto!important;min-height:36px!important;padding:5px 8px!important;border-radius:9px!important;font-size:12px!important;line-height:1.15!important;white-space:nowrap}.admin-mark{font-size:12px}.menu-chevron{font-size:15px}.portal-role-menu{left:auto!important;right:0!important;top:calc(100% + 6px)!important;width:190px!important}.main{padding-top:4px}}
@media(max-width:390px){.topbar{grid-template-columns:auto minmax(30px,1fr) auto!important;grid-template-areas:"home crumb actions"!important;gap:4px;padding:7px 8px!important}.top-actions{grid-area:actions!important;display:flex!important;align-items:center;gap:4px}.top-actions #languageSelect{width:76px!important;min-width:76px!important;max-width:76px!important;font-size:11px!important}.top-actions .switch{grid-area:auto}.top-actions .switch .admin-menu-trigger{min-width:82px!important;padding:4px 6px!important;font-size:11px!important}}

@media(max-width:760px){.top-actions .switch .portal-role-menu button{display:flex!important;flex-direction:row!important;align-items:center;justify-content:flex-start!important;gap:9px;min-height:42px;padding:7px 9px;font-size:12px;text-align:left;white-space:nowrap}.portal-role-menu button span{flex:0 0 28px}}

/* Keep the company name visible beside the current page on mobile */
@media(max-width:760px){.topbar>.crumb{font-size:11px!important}.topbar>.crumb span{font-size:11px!important}.topbar>.crumb strong{font-size:12px!important}}

@media(max-width:760px){#view-billing .billing-flow-step:nth-of-type(3)::after{content:none!important;display:none!important}}

/* Keep dialogs inside the content space between the mobile app bar and bottom navigation. */
@media screen and (max-width:760px){.modal-backdrop{box-sizing:border-box;padding:calc(70px + env(safe-area-inset-top)) 8px calc(82px + env(safe-area-inset-bottom))!important;align-items:start!important}.modal-backdrop.show{align-items:start!important}.modal{box-sizing:border-box;width:100%;max-height:calc(100dvh - 152px)!important;margin:0 auto;min-height:0}.modal-body{min-height:0;overflow-y:auto;overscroll-behavior:contain;-webkit-overflow-scrolling:touch}.modal-head,.modal-foot{flex-shrink:0}}