/* ===== Excel workbook chrome (title bar, ribbon, formula bar, headers, sheet tabs, status bar) ===== */
@media screen {
:root { --top-h: 182px; --bot-h: 50px; --xl-green:#217346; --xl-chrome:#f3f3f3; --xl-line:#d4d4d4; --xl-font: Calibri, Carlito, 'Segoe UI', Arial, sans-serif; --ui: 'Segoe UI', -apple-system, Roboto, Arial, sans-serif; }
html, html body, html body.theme-light { height: 100% !important; margin: 0 !important; padding: 0 !important; overflow: hidden !important;
  background: #fff !important; background-image: none !important; }
html body #sidebar, html body #mobileBar, html body #mobileModules, html body #xlTabCtl, .sb-logo, .az-logo { display: none !important; }

/* ---------- title bar ---------- */
#xlTop { position: fixed; top: 0; left: 0; right: 0; z-index: 120; background: var(--xl-green); font-family: var(--ui); user-select: none; -webkit-user-select: none; }
#xlTitlebar { display: flex; align-items: center; height: 32px; padding: 0 0 0 8px; color: #fff; font: 400 12px var(--ui); }
#xlTitlebar .tb-left, #xlTitlebar .tb-right { display: flex; align-items: center; gap: 2px; flex: 1 1 0; min-width: 0; }
#xlTitlebar .tb-right { justify-content: flex-end; }
#xlTitlebar .tb-title { flex: 0 1 auto; padding: 0 12px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; font-size: 12px; }
#xlTitlebar .tb-ic { width: 28px; height: 28px; display: inline-flex; align-items: center; justify-content: center; color: #fff; background: none; border: 0; border-radius: 0; cursor: default; padding: 0; }
#xlTitlebar .tb-ic:hover { background: rgba(255,255,255,.15); }
#xlTitlebar .tb-ic svg { width: 15px; height: 15px; }
#xlTitlebar .tb-auto { display: inline-flex; align-items: center; gap: 6px; padding: 0 8px 0 2px; font-size: 12px; }
#xlTitlebar .tb-auto i { width: 26px; height: 12px; border: 1px solid #fff; border-radius: 7px; position: relative; display: inline-block; }
#xlTitlebar .tb-auto i::after { content: ''; position: absolute; left: 2px; top: 2px; width: 6px; height: 6px; border-radius: 50%; background: #fff; }
#xlTitlebar .tb-search { display: flex; align-items: center; gap: 6px; width: 240px; height: 22px; margin: 0 10px; padding: 0 8px; background: rgba(255,255,255,.18); color: #e8f2ec; font-size: 12px; }
#xlTitlebar .tb-search svg { width: 13px; height: 13px; }
#xlTitlebar .tb-user { display: inline-flex; align-items: center; gap: 8px; height: 28px; padding: 0 8px; background: none; border: 0; color: #fff; font: 400 12px var(--ui); cursor: pointer; }
#xlTitlebar .tb-user:hover { background: rgba(255,255,255,.15); }
#xlTitlebar .tb-av { width: 22px; height: 22px; border-radius: 50%; background: #fff; color: var(--xl-green); display: inline-flex; align-items: center; justify-content: center; font: 700 11px var(--ui); }
#xlTitlebar .tb-win { display: flex; }
#xlTitlebar .tb-win span { width: 46px; height: 32px; display: inline-flex; align-items: center; justify-content: center; }
#xlTitlebar .tb-win span:hover { background: rgba(255,255,255,.15); }
#xlTitlebar .tb-win span:last-child:hover { background: #e81123; }
#xlTitlebar .tb-win svg { width: 10px; height: 10px; }

/* ---------- ribbon tabs (legacy Excel 2016 colorful) ---------- */
#xlRibbonTabs { display: flex; align-items: flex-end; height: 30px; padding: 0 6px; gap: 2px; overflow-x: auto; scrollbar-width: none; }
#xlRibbonTabs::-webkit-scrollbar { display: none; }
#xlRibbonTabs button { flex: none; height: 26px; margin: 0; padding: 0 12px; background: transparent; border: 0; border-radius: 0; color: #fff; font: 400 13px var(--ui); cursor: pointer; }
#xlRibbonTabs button:hover { background: rgba(255,255,255,.15); }
#xlRibbonTabs button.on { background: var(--xl-chrome); color: var(--xl-green); }
#xlRibbonTabs button.file { background: #185C37; font-weight: 600; margin-right: 4px; }
#xlRibbonTabs button.file:hover { background: #0f4428; }
#xlRibbonTabs .rt-tell { display: inline-flex; align-items: center; gap: 6px; height: 26px; padding: 0 10px; margin-left: 6px; color: #dbeee2; font: 400 13px var(--ui); white-space: nowrap; }
#xlRibbonTabs .rt-tell svg { width: 14px; height: 14px; }
#xlRibbonTabs .rt-share { margin-left: auto; display: inline-flex; align-items: center; gap: 6px; height: 26px; padding: 0 10px; color: #fff; font: 400 13px var(--ui); white-space: nowrap; }
#xlRibbonTabs .rt-share svg { width: 14px; height: 14px; }

/* ---------- ribbon body ---------- */
#xlRibbon { display: flex; align-items: stretch; height: 94px; padding: 2px 4px 0; background: var(--xl-chrome); border-bottom: 1px solid var(--xl-line); overflow-x: auto; overflow-y: hidden; scrollbar-width: thin; color: #262626; }
.rb-group { position: relative; display: flex; flex-direction: column; flex: none; padding: 2px 6px 0; border-right: 1px solid #dadada; }
.rb-items { display: flex; align-items: flex-start; gap: 2px; flex: 1 1 auto; }
.rb-label { height: 18px; line-height: 18px; text-align: center; font: 400 11.5px var(--ui); color: #666; white-space: nowrap; }
.rb-label .rb-launch { position: absolute; right: 2px; bottom: 3px; width: 9px; height: 9px; }
.rb-big { display: flex; flex-direction: column; align-items: center; justify-content: flex-start; gap: 2px; min-width: 44px; max-width: 72px; height: 70px; padding: 2px 3px; border: 1px solid transparent; font: 400 11.5px/1.15 var(--ui); text-align: center; cursor: default; color: #262626; }
.rb-big svg { width: 30px; height: 30px; flex: none; margin-top: 2px; }
.rb-col { display: flex; flex-direction: column; gap: 1px; }
.rb-row { display: flex; align-items: center; gap: 1px; height: 22px; }
.rb-sm { display: inline-flex; align-items: center; gap: 4px; height: 22px; padding: 0 4px; border: 1px solid transparent; font: 400 11.5px var(--ui); white-space: nowrap; cursor: default; color: #262626; }
.rb-sm svg { width: 16px; height: 16px; flex: none; }
.rb-big:hover, .rb-sm:hover { background: #dadada; border-color: #c8c8c8; }
.rb-sm.on, .rb-big.on { background: #c5c5c5; border-color: #ababab; }
.rb-dd { display: inline-flex; align-items: center; justify-content: space-between; height: 20px; padding: 0 2px 0 5px; margin: 1px 2px; background: #fff; border: 1px solid #c6c6c6; font: 400 12px var(--ui); color: #262626; }
.rb-dd::after { content: ''; width: 0; height: 0; margin: 0 2px 0 6px; border-left: 3px solid transparent; border-right: 3px solid transparent; border-top: 4px solid #555; }
.rb-sep { width: 1px; height: 18px; background: #d0d0d0; margin: 0 3px; }
.rb-chk { display: inline-flex; align-items: center; gap: 5px; height: 22px; padding: 0 4px; font: 400 11.5px var(--ui); cursor: pointer; }
.rb-chk input { margin: 0; accent-color: var(--xl-green); }
.rb-fill { width: 16px; height: 3px; display: block; margin-top: -3px; }

/* ---------- formula bar ---------- */
#xlFormula { display: flex; align-items: center; height: 28px; padding: 0 0 0 4px; gap: 0; background: #fff; border-bottom: 1px solid var(--xl-line); position: static; }
#xlRef { box-sizing: border-box; width: 96px; height: 22px; margin: 0; padding: 0 6px; border: 1px solid #c6c6c6; border-radius: 0; background: #fff; color: #000; font: 400 13px var(--xl-font); outline: 0; box-shadow: none; }
#xlRef:focus { border-color: var(--xl-green); }
#xlFxBtns { display: inline-flex; align-items: center; height: 22px; padding: 0 6px; margin: 0 0 0 4px; border-left: 1px dotted #b8b8b8; color: #9a9a9a; font: 400 13px var(--ui); }
#xlFxBtns i { font-style: normal; width: 22px; text-align: center; }
#xlFxBtns i.fx { font: italic 600 14px Cambria, Georgia, serif; color: #555; }
#xlFxInput { flex: 1 1 auto; min-width: 0; box-sizing: border-box; height: 22px; margin: 0 4px 0 0; padding: 0 6px; border: 1px solid #c6c6c6 !important; border-radius: 0; background: #fff !important; color: #000; font: 400 14px var(--xl-font); outline: 0; box-shadow: none !important; }
#xlFxInput:focus { border-color: var(--xl-green) !important; }

/* ---------- the scrolling worksheet with headings ---------- */
html body #xlWrap { position: fixed !important; top: var(--top-h); bottom: var(--bot-h); left: 0; right: 0; z-index: 1;
  display: flex !important; flex-wrap: wrap; align-content: flex-start; align-items: stretch; overflow: auto; background: #fff; overscroll-behavior: contain; }
#xlCorner { position: sticky; top: 0; left: 0; z-index: 30; flex: 0 0 40px; width: 40px; height: 20px; background: var(--xl-chrome); border-right: 1px solid var(--xl-line); border-bottom: 1px solid var(--xl-line); box-sizing: border-box; }
#xlCorner::after { content: ''; position: absolute; right: 3px; bottom: 3px; border-left: 10px solid transparent; border-bottom: 10px solid #c2c2c2; }
html body #xlColbar { position: sticky !important; top: 0 !important; z-index: 25 !important; flex: 0 0 calc(100% - 40px); min-width: 0; display: flex !important; height: 20px !important; overflow: visible !important;
  background: var(--xl-chrome) !important; border-bottom: 1px solid var(--xl-line) !important; white-space: nowrap; }
#xlColbar .xl-cl { box-sizing: border-box; flex: none; display: block; width: var(--cw); height: 19px; line-height: 19px; text-align: center; border-right: 1px solid #dedede; color: #444; font: 400 13px var(--xl-font); }
html body #xlGutter { position: sticky !important; left: 0 !important; top: auto !important; z-index: 24 !important; flex: 0 0 40px; width: 40px !important; height: auto !important; overflow: hidden !important;
  background: var(--xl-chrome) !important; border-right: 1px solid var(--xl-line) !important; }
#xlGutterList { will-change: transform; }
#xlGutter .xl-rn { box-sizing: border-box; height: var(--rh); line-height: var(--rh); padding: 0 6px 0 0; text-align: right; border-bottom: 1px solid #dedede; color: #444; font: 400 12px var(--xl-font); }
#xlColbar .xl-cl.xl-hl, #xlGutter .xl-rn.xl-hl { background: #d2d2d2; color: var(--xl-green); font-weight: 700; border-bottom: 2px solid var(--xl-green); }
#xlGutter .xl-rn.xl-hl { border-bottom: 1px solid #dedede; border-right: 2px solid var(--xl-green); }
html body #xlWrap #xlMain { flex: 0 0 calc(100% - 40px) !important; width: calc(100% - 40px) !important; position: relative !important; box-sizing: border-box !important; min-width: 0 !important; min-height: var(--frame-h, 600px) !important; height: auto !important;
  margin: 0 !important; padding: var(--rh) 0 calc(var(--rh) * 6) var(--x0) !important;
  background-color: #F2F5F3 !important;                          /* v6 canvas: pale grey-green sheet, white cards on top */
  background-image: linear-gradient(to right, #E2E8E4 1px, transparent 1px), linear-gradient(to bottom, #E2E8E4 1px, transparent 1px) !important;
  background-size: var(--cw) var(--rh) !important; background-position: 0 0 !important; }
html body.xl-nogrid #xlWrap #xlMain { background-image: none !important; }
html body.xl-nohead #xlColbar, html body.xl-nohead #xlGutter, html body.xl-nohead #xlCorner { display: none !important; }
html body.xl-nohead #xlWrap #xlMain { flex-basis: 100% !important; width: 100% !important; }
html body.xl-nofx #xlFormula { display: none; }
#xlMain > #appMCS, #xlMain > #appTD, #xlMain > #appTCC, #xlMain > #appOV, #xlMain > #appAdmin, #xlMain > #appNoAccess {
  padding: 0 !important; margin: 0 !important; background: transparent !important; height: auto !important; min-height: 0 !important; max-width: none !important; }
#xlMain > #appCBP { padding: 0 !important; margin: 0 !important; height: auto !important; min-height: 0 !important; overflow: visible !important; }
#xlMain #sheetWrap { margin: var(--rh) 0 0 !important; max-width: var(--w-full); overflow-x: auto; }

/* cell selection (click a cell) */
#xlSel { position: absolute; z-index: 5; pointer-events: none; box-sizing: border-box; border: 2px solid var(--xl-green); display: none; }
#xlSel::after { content: ''; position: absolute; right: -4px; bottom: -4px; width: 5px; height: 5px; background: var(--xl-green); border: 1px solid #fff; }

/* TCC sheets live in a full-height frame that scrolls itself */
html body.xl-tcc #xlWrap { overflow: hidden; }
html body.xl-tcc #xlWrap #xlMain { padding: 0 !important; background-image: none !important; min-height: 0 !important; height: var(--frame-h) !important; }
html body.xl-tcc #xlMain #appTCC, html body.xl-tcc #xlMain .tcc-container { display: block !important; height: var(--frame-h) !important; padding: 0 !important; margin: 0 !important; }
html body.xl-tcc #xlMain #appTCC .view { display: none !important; }
html body.xl-tcc #xlMain #appTCC .view.active { display: block !important; height: var(--frame-h) !important; padding: 0 !important; margin: 0 !important; border: 0 !important; background: none !important; box-shadow: none !important; }
html body.xl-tcc #xlMain #appTCC iframe { display: block !important; width: 100% !important; height: var(--frame-h) !important; border: 0 !important; background: #fff !important; }

/* ---------- sheet tabs ---------- */
#xlSheetbar { position: fixed; left: 0; right: 0; bottom: 22px; height: 28px; z-index: 110; display: flex; align-items: stretch; background: var(--xl-chrome); border-top: 1px solid var(--xl-line); font-family: var(--xl-font); }
#xlTabNav { display: flex; align-items: center; padding: 0 4px; flex: none; }
#xlSheetbar button { background: none; border: 0; border-radius: 0; box-shadow: none; margin: 0; cursor: pointer; }
#xlTabNav button { width: 22px; height: 22px; padding: 0; color: #777; font-size: 9px; }
#xlTabNav button:hover { color: #000; background: #e0e0e0; }
#xlTabs { display: flex; align-items: stretch; flex: 0 1 auto; min-width: 0; overflow-x: auto; scrollbar-width: none; }
#xlTabs::-webkit-scrollbar { display: none; }
#xlTabs .xl-tab { flex: none; position: relative; height: 27px; padding: 0 16px; border-right: 1px solid #d0d0d0; color: #444; font: 400 13.5px var(--xl-font); white-space: nowrap; }
#xlTabs .xl-tab:first-child { border-left: 1px solid #d0d0d0; }
#xlTabs .xl-tab:hover { background: #e5e5e5; color: #000; }
#xlTabs .xl-tab.on { background: #fff; color: var(--xl-green); font-weight: 700; margin-top: -1px; height: 28px; box-shadow: 0 2px 4px rgba(0,0,0,.08); }
#xlTabs .xl-tab.on::after { content: ''; position: absolute; left: 6px; right: 6px; bottom: 3px; height: 2px; background: var(--xl-green); }
#xlNewSheet { flex: none; width: 30px; color: #666; font-size: 16px; }
#xlNewSheet:hover { color: var(--xl-green); background: #e0e0e0; }

/* ---------- status bar ---------- */
#xlStatus { position: fixed; left: 0; right: 0; bottom: 0; height: 22px; z-index: 110; display: flex; align-items: center; gap: 14px; padding: 0 10px;
  background: var(--xl-chrome); border-top: 1px solid #e2e2e2; color: #444; font: 400 12px var(--ui); white-space: nowrap; overflow: hidden; }
#xlStatus .st-right { margin-left: auto; display: flex; align-items: center; gap: 10px; }
#xlStatus .st-view { display: inline-flex; gap: 2px; }
#xlStatus .st-view span { width: 20px; height: 18px; display: inline-flex; align-items: center; justify-content: center; }
#xlStatus .st-view span.on { background: #d6d6d6; }
#xlStatus .st-view svg { width: 13px; height: 13px; }
#xlStatus .st-zoom { display: inline-flex; align-items: center; gap: 6px; }
#xlStatus .st-zoom b { font-weight: 400; width: 12px; text-align: center; }
#xlStatus .st-track { position: relative; width: 100px; height: 1px; background: #888; }
#xlStatus .st-track::after { content: ''; position: absolute; left: 47px; top: -5px; width: 5px; height: 11px; background: #555; }

/* ---------- dialogs / login look like Excel dialogs ---------- */
html body #loginOverlay { background: rgba(240,240,240,.96) !important; background-image: none !important; z-index: 500 !important; }
html body #loginOverlay .login-card { width: 100% !important; max-width: 380px !important; padding: 0 0 20px !important; background: #fff !important; border: 1px solid #8a8886 !important;
  border-radius: 0 !important; box-shadow: 0 8px 24px rgba(0,0,0,.22) !important; overflow: hidden; }
html body #loginOverlay .login-card::before { content: 'Sign in'; display: block; height: 32px; line-height: 32px; padding: 0 12px; margin: 0 0 18px; background: var(--xl-green); color: #fff; font: 400 13px var(--ui); }
html body #loginOverlay .login-form, html body #loginOverlay #loginError { margin: 0 20px !important; }
html body #loginOverlay .login-form { display: grid !important; gap: 12px !important; }
html body #loginOverlay label { display: block !important; margin: 0 0 4px !important; font: 400 13px var(--ui) !important; color: #222 !important; text-transform: none !important; letter-spacing: 0 !important; }
html body #loginOverlay input { box-sizing: border-box; width: 100% !important; height: 30px !important; min-height: 30px !important; padding: 0 8px !important; border: 1px solid #8a8886 !important; border-radius: 0 !important;
  background: #fff !important; font: 400 14px var(--ui) !important; box-shadow: none !important; }
html body #loginOverlay input:focus { border-color: var(--xl-green) !important; outline: 1px solid var(--xl-green) !important; }
html body #loginOverlay .pw-wrap { position: relative; }
html body #loginOverlay .pw-toggle { position: absolute !important; right: 2px; top: 50%; transform: translateY(-50%); width: 28px !important; height: 26px !important; min-height: 0 !important; padding: 0 !important;
  background: none !important; border: 0 !important; color: #666 !important; display: flex !important; align-items: center; justify-content: center; }
html body #loginOverlay .login-btn { justify-self: end; width: auto !important; min-width: 96px; height: 30px !important; min-height: 0 !important; padding: 0 18px !important; margin-top: 6px !important;
  background: var(--xl-green) !important; color: #fff !important; border: 1px solid #185C37 !important; border-radius: 0 !important; font: 400 14px var(--ui) !important; box-shadow: none !important; }
html body #loginOverlay .login-btn:hover { background: #185C37 !important; }

/* ---------- dialogs, toast, save bar: live at <body> level (moved by 14-excel-shell.js) so the
   ribbon / sheet tabs can never cover them. Excel dialog look: white, gray frame, green title bar. ---------- */
html body .modal-overlay { background: rgba(255,255,255,.6) !important; backdrop-filter: none !important; z-index: 600 !important; padding: 12px !important; box-sizing: border-box; }
html body .modal-card { box-sizing: border-box; width: 100% !important; max-width: min(540px, 100%) !important; max-height: calc(100dvh - 24px) !important; overflow: auto !important;
  padding: 0 !important; background: #fff !important; border: 1px solid #8a8886 !important; border-radius: 0 !important; box-shadow: 0 8px 28px rgba(0,0,0,.25) !important;
  font: 400 15px/1.4 var(--xl-font) !important; color: #000 !important; }
html body .modal-head { position: sticky; top: 0; z-index: 2; display: flex !important; align-items: center !important; justify-content: space-between !important; gap: 8px;
  min-height: 40px !important; margin: 0 !important; padding: 0 0 0 14px !important; background: var(--xl-green) !important; border: 0 !important; }
html body .modal-head h2 { margin: 0 !important; height: auto !important; font: 400 15px/40px var(--ui) !important; color: #fff !important; -webkit-text-fill-color: #fff !important; border: 0 !important; background: none !important; }
html body .modal-head > div { display: flex !important; align-items: center !important; gap: 0 !important; }
html body .modal-head .modal-close { width: 48px !important; height: 40px !important; min-height: 0 !important; margin: 0 !important; padding: 0 !important; background: none !important;
  border: 0 !important; border-radius: 0 !important; color: #fff !important; -webkit-text-fill-color: #fff !important; font: 400 22px/1 var(--ui) !important; box-shadow: none !important; }
html body .modal-head .modal-close:hover { background: #e81123 !important; }
html body .modal-head .btn-secondary { height: 30px !important; margin: 0 6px 0 0 !important; padding: 0 12px !important; background: linear-gradient(#fdfdfd,#e6e6e6) !important;
  color: #C00000 !important; -webkit-text-fill-color: #C00000 !important; border: 1px solid #ADADAD !important; border-radius: 2px !important; font: 400 14px var(--xl-font) !important; }
html body .modal-body { padding: 16px !important; }
html body .modal-body h3 { margin: 0 0 10px !important; padding: 0 0 4px !important; height: auto !important; font: 700 15px/1.4 var(--xl-font) !important; color: #000 !important;
  border: 0 !important; border-bottom: 2px solid #A9D08E !important; background: none !important; }
html body .modal-section { margin: 0 0 16px !important; }
html body .pf-card, html body .pf-hero { background: none !important; border: 0 !important; box-shadow: none !important; border-radius: 0 !important; padding: 0 !important; margin: 0 0 16px !important; }
html body .pf-avatar { border-radius: 50% !important; background: var(--xl-green) !important; color: #fff !important; }
html body .modal-body label { display: block !important; margin: 0 0 4px !important; font: 400 14px var(--ui) !important; color: #222 !important; text-transform: none !important; letter-spacing: 0 !important; background: none !important; border: 0 !important; height: auto !important; padding: 0 !important; }
html body .modal-body input[type="text"], html body .modal-body input[type="password"], html body .modal-body input[type="number"], html body .modal-body select, html body .modal-body textarea {
  box-sizing: border-box !important; width: 100% !important; height: 34px !important; min-height: 34px !important; padding: 0 10px !important; margin: 0 !important;
  background: #fff !important; color: #000 !important; -webkit-text-fill-color: #000 !important; border: 1px solid #8a8886 !important; border-radius: 0 !important; box-shadow: none !important; font: 400 15px var(--xl-font) !important; }
html body .modal-body textarea { height: auto !important; min-height: 110px !important; padding: 6px 10px !important; }
html body .modal-body input:focus, html body .modal-body select:focus, html body .modal-body textarea:focus { outline: 2px solid var(--xl-green) !important; outline-offset: -2px !important; border-color: var(--xl-green) !important; }
html body .modal-body .field-grid { display: grid !important; gap: 12px !important; }
html body .modal-body .field-grid.two { grid-template-columns: 1fr 1fr !important; }
html body .modal-body .btn-primary { height: 34px !important; min-height: 0 !important; padding: 0 18px !important; margin: 4px 0 0 !important; background: var(--xl-green) !important; color: #fff !important;
  -webkit-text-fill-color: #fff !important; border: 1px solid #185C37 !important; border-radius: 0 !important; font: 400 15px var(--ui) !important; box-shadow: none !important; }
html body .modal-body .btn-primary:hover { background: #185C37 !important; }
html body .pw-wrap { position: relative !important; }
html body .modal-body .pw-wrap input { padding-right: 40px !important; }
html body .modal-body .pw-toggle { position: absolute !important; right: 1px !important; top: 1px !important; width: 36px !important; height: 32px !important; min-height: 0 !important; margin: 0 !important; padding: 0 !important;
  display: flex !important; align-items: center !important; justify-content: center !important; background: none !important; border: 0 !important; color: #555 !important; box-shadow: none !important; }
html body .pf-quota-track { height: 8px !important; border-radius: 0 !important; background: #E1E1E1 !important; }
html body .pf-quota-fill { border-radius: 0 !important; background: var(--xl-green) !important; }
@media (max-width: 600px) { html body .modal-body .field-grid.two { grid-template-columns: 1fr !important; } }

/* toast = Excel notification, always above the sheet tabs */
html body > #toast, html body > .toast { position: fixed !important; z-index: 650 !important; right: 16px !important; left: auto !important; bottom: calc(var(--bot-h) + 12px) !important;
  max-width: calc(100vw - 32px); border-radius: 0 !important; border: 1px solid #8a8886 !important; background: #fff !important; color: #000 !important; box-shadow: 0 4px 14px rgba(0,0,0,.18) !important;
  font: 400 15px var(--ui) !important; padding: 10px 14px !important; display: flex !important; align-items: center; gap: 12px; }
html body > #toast .toast-undo { height: 30px !important; padding: 0 14px !important; margin: 0 !important; background: linear-gradient(#fdfdfd,#e6e6e6) !important; color: #000 !important;
  border: 1px solid #ADADAD !important; border-radius: 2px !important; font: 700 14px var(--xl-font) !important; cursor: pointer; }
@media (max-width: 760px) { html body > #toast, html body > .toast { left: 12px !important; right: 12px !important; } }

/* User Matrix "unsaved changes" = Excel message bar, sitting just above the sheet tabs */
html body > #adminSaveBar { position: fixed !important; z-index: 640 !important; left: 50% !important; right: auto !important; bottom: calc(var(--bot-h) + 10px) !important;
  display: flex !important; align-items: center !important; gap: 14px !important; max-width: calc(100vw - 24px) !important; box-sizing: border-box;
  padding: 8px 10px 8px 14px !important; background: #FFF4CE !important; backdrop-filter: none !important; border: 1px solid #C9A100 !important; border-radius: 0 !important;
  box-shadow: 0 4px 16px rgba(0,0,0,.22) !important; font: 400 15px var(--ui) !important; color: #000 !important; }
html body > #adminSaveBar .asb-dot { background: #C9A100 !important; }
html body > #adminSaveBar .asb-count { font: 600 15px var(--ui) !important; color: #000 !important; }
html body > #adminSaveBar .asb-actions { display: flex !important; gap: 8px !important; }
html body > #adminSaveBar .asb-discard, html body > #adminSaveBar .asb-save { height: 34px !important; min-height: 0 !important; padding: 0 18px !important; margin: 0 !important;
  border-radius: 2px !important; font: 400 15px var(--ui) !important; box-shadow: none !important; cursor: pointer; }
html body > #adminSaveBar .asb-discard { background: linear-gradient(#fdfdfd,#e6e6e6) !important; color: #000 !important; border: 1px solid #ADADAD !important; }
html body > #adminSaveBar .asb-discard:hover { background: #E5F1FB !important; border-color: #0078D7 !important; }
html body > #adminSaveBar .asb-save { background: var(--xl-green) !important; color: #fff !important; -webkit-text-fill-color: #fff !important; border: 1px solid #185C37 !important; font-weight: 700 !important; }
html body > #adminSaveBar .asb-save:hover { background: #185C37 !important; }
@media (max-width: 600px) { html body > #adminSaveBar { left: 12px !important; right: 12px !important; transform: translateY(130%) !important; flex-wrap: wrap; }
  html body > #adminSaveBar.show { transform: none !important; }
  html body > #adminSaveBar .asb-actions { margin-left: auto; } html body > #adminSaveBar .asb-actions button { height: 40px !important; } }
.uni-menu { z-index: 660 !important; border-radius: 0 !important; border: 1px solid #c6c6c6 !important; box-shadow: 0 4px 12px rgba(0,0,0,.18) !important; padding: 2px !important; background: #fff !important; }
html body .uni-menu button { border-radius: 0 !important; font: 400 15px var(--ui) !important; padding: 10px 14px !important; height: auto !important; min-height: 0 !important; width: 100% !important; margin: 0 !important; background: none !important; border: 0 !important; display: block !important; text-align: left !important; }
html body .uni-menu button:hover { background: #E5F1FB !important; }

/* ---------- phones: compact chrome, collapsed ribbon ---------- */
@media (max-width: 760px) {
  :root { --bot-h: 58px; }
  #xlTitlebar { height: 40px; padding-top: env(safe-area-inset-top, 0px); }
  #xlTitlebar .tb-left > :not(.tb-save), #xlTitlebar .tb-search, #xlTitlebar .tb-win, #xlTitlebar .tb-uname { display: none !important; }
  #xlTitlebar .tb-left, #xlTitlebar .tb-right { flex: 0 0 auto; }
  #xlTitlebar .tb-title { flex: 1 1 auto; text-align: left; font-size: 14px; }
  #xlTitlebar .tb-user { height: 40px; padding: 0 10px; }
  #xlTitlebar .tb-av { width: 30px; height: 30px; font-size: 13px; }
  #xlRibbonTabs { height: 34px; }
  #xlRibbonTabs button { height: 30px; font-size: 14px; }
  #xlRibbonTabs .rt-tell, #xlRibbonTabs .rt-share { display: none; }
  #xlRibbon { display: none; }
  html body.xl-ribbon-open #xlRibbon { display: flex; }
  #xlFormula { height: 34px; }
  #xlRef { width: 64px; height: 28px; font-size: 15px; }
  #xlFxBtns i:not(.fx) { display: none; }
  #xlFxInput { height: 28px; font-size: 16px; }
  #xlSheetbar { height: 36px; bottom: 22px; }
  #xlTabNav { display: none; }
  #xlTabs .xl-tab { height: 35px; padding: 0 14px; font-size: 15px; }
  #xlTabs .xl-tab.on { height: 36px; }
  #xlNewSheet { width: 40px; }
  #xlStatus .st-mid, #xlStatus .st-view, #xlStatus .st-track { display: none; }
}
}

/* short screens (phones in landscape): collapse the ribbon, keep the sheet big */
@media screen and (max-height: 500px) {
  #xlTitlebar { height: 28px; }
  #xlTitlebar .tb-search, #xlTitlebar .tb-win, #xlTitlebar .tb-auto { display: none !important; }
  #xlRibbonTabs { height: 28px; }
  #xlRibbonTabs .rt-tell { display: none; }
  #xlRibbon { display: none; }
  html body.xl-ribbon-open #xlRibbon { display: flex; }
}

@media print {
  /* Screen layers switch panel animations off; in print they would come back and restart from
     their first frame (opacity 0) — which printed a blank page. No animations when printing. */
  *, *::before, *::after { animation: none !important; transition: none !important; }
  .td-panel.active, .workflow-panel.active, #appTD, #appMCS { opacity: 1 !important; transform: none !important; }
  /* Transfer Desk prints only the report: everything in the panel except its table section
     (action rows, tabs, paste boxes, Visa Manifest button) stays on screen. */
  body.mode-td #appTD .td-panel.active > :not(.td-table-section) { display: none !important; }
  body.mode-td #appTD .cs-thr-slider-wrap, body.mode-td #appTD .wf-vm-count { display: none !important; }
  body::before, body::after { display: none !important; content: none !important; }
  /* screen layouts give the module areas a full-screen minimum height; on paper that becomes a
     whole extra (blank) page — content decides the height when printing */
  #xlWrap, #xlMain, #appMCS, #appTD, #appTCC, #appCBP, #appOV, #appAdmin, #mainApp, .app-container, .td-container, .td-panel {
    min-height: 0 !important; height: auto !important; }
  /* TCC sheets printed from the app: just the active frame, sized by 14-excel-shell.js before printing */
  body.xl-tcc #appMCS, body.xl-tcc #appTD, body.xl-tcc #appCBP, body.xl-tcc #appOV, body.xl-tcc #appAdmin { display: none !important; }
  body.xl-tcc #appTCC, body.xl-tcc #appTCC .tcc-container { display: block !important; padding: 0 !important; margin: 0 !important; }
  body.xl-tcc #appTCC .view { display: none !important; }
  body.xl-tcc #appTCC .view.active { display: block !important; height: auto !important; padding: 0 !important; margin: 0 !important; border: 0 !important; box-shadow: none !important; }
  body.xl-tcc #appTCC .view.active iframe { display: block !important; border: 0 !important; }
  /* CBP Allocation form (browser menu print): the form only, no action buttons */
  body.xl-cbp #appMCS, body.xl-cbp #appTD, body.xl-cbp #appTCC, body.xl-cbp #appOV, body.xl-cbp #appAdmin { display: none !important; }
  body.xl-cbp #appCBP .bar, body.xl-cbp #appCBP .tools, body.xl-cbp #appCBP #msg, body.xl-cbp #appCBP #prevCard { display: none !important; }
  #xlTop, #xlSheetbar, #xlStatus, #xlCorner, #xlColbar, #xlGutter, #xlSel, #adminSaveBar, #toast, .uni-menu { display: none !important; }
  html, body { height: auto !important; overflow: visible !important; }
  #xlWrap { position: static !important; display: block !important; overflow: visible !important; }
  #xlMain { padding: 0 !important; background: none !important; }
}

/* ---------- Welfare Plan › Visa Manifest dialog (Excel dialog look) ---------- */
@media screen {
html body .vm-card { max-width: min(680px, 100%) !important; }
html body .vm-card .field { display: block !important; margin: 0 0 12px !important; }
html body .vm-row { display: grid !important; grid-template-columns: 1fr 1fr !important; gap: 12px !important; }
html body .vm-row .field { margin-bottom: 4px !important; }
html body .vm-origin-val { box-sizing: border-box; height: 34px; line-height: 32px; padding: 0 10px; background: #F2F2F2; border: 1px solid #BFBFBF; font: 700 15px var(--xl-font); color: #000; }
html body .vm-preview { min-height: 18px; margin: 0 0 10px; font: italic 400 13px/18px var(--xl-font); color: #595959; }
html body .vm-search { display: flex !important; gap: 8px !important; }
html body .vm-search input { flex: 1 1 auto; text-transform: uppercase; font-size: 16px !important; letter-spacing: .03em; }
html body .vm-search .btn-primary { margin: 0 !important; flex: none; }
html body .vm-msg { min-height: 34px; box-sizing: border-box; margin: 0 0 12px; padding: 7px 10px; font: 400 14px/20px var(--xl-font); border: 1px solid transparent; }
html body .vm-msg:empty { visibility: hidden; }
html body .vm-msg.vm-ok { background: #C6EFCE; color: #006100; border-color: #A9D08E; }
html body .vm-msg.vm-err { background: #FFC7CE; color: #9C0006; border-color: #E0A9AE; }
html body .vm-msg.vm-warn { background: #FFEB9C; color: #9C6500; border-color: #E0C46C; }
html body .vm-list-head { display: flex; justify-content: space-between; align-items: center; height: 30px; padding: 0 10px; background: var(--xl-green); color: #fff; font: 700 15px/30px var(--xl-font); }
html body .vm-list-head span:last-child { font-weight: 400; color: #E2EFDA; }
html body .vm-table-wrap { max-height: min(320px, 40dvh); overflow: auto; border: 1px solid #BFBFBF; border-top: 0; }
html body .vm-table { width: 100%; border-collapse: collapse; font: 400 14px/1.3 var(--xl-font); }
html body .vm-table th { position: sticky; top: 0; z-index: 1; height: 28px; padding: 0 8px; background: #FFC000; color: #000; font-weight: 700; text-align: left; border: 1px solid #000; }
html body .vm-table td { height: 28px; padding: 0 8px; border: 1px solid #BFBFBF; color: #000; background: #fff; }
html body .vm-table td.vm-n, html body .vm-table td.vm-c { text-align: center; white-space: nowrap; }
html body .vm-table td.vm-x { width: 36px; padding: 0; text-align: center; }
html body .vm-table td.vm-empty { height: 44px; text-align: center; color: #595959; font-style: italic; }
html body .vm-del { width: 28px !important; height: 24px !important; min-height: 0 !important; margin: 0 !important; padding: 0 !important; background: linear-gradient(#fdfdfd,#e6e6e6) !important;
  border: 1px solid #ADADAD !important; border-radius: 2px !important; color: #C00000 !important; font: 400 13px var(--ui) !important; cursor: pointer; }
html body .vm-del:hover { background: #FFC7CE !important; border-color: #C00000 !important; }
html body .vm-actions { display: flex !important; justify-content: flex-end !important; gap: 8px !important; margin: 14px 0 0 !important; }
html body .vm-actions .btn-primary, html body .vm-actions .btn-secondary { margin: 0 !important; }
html body .modal-body .btn-secondary { height: 34px !important; min-height: 0 !important; padding: 0 16px !important; background: linear-gradient(#fdfdfd,#e6e6e6) !important; color: #000 !important;
  -webkit-text-fill-color: #000 !important; border: 1px solid #ADADAD !important; border-radius: 2px !important; font: 400 15px var(--ui) !important; box-shadow: none !important; cursor: pointer; }
html body .modal-body .btn-secondary:hover { background: #E5F1FB !important; border-color: #0078D7 !important; }
html body .modal-body button:disabled { opacity: .5 !important; cursor: default !important; }
@media (max-width: 600px) { html body .vm-row { grid-template-columns: 1fr 1fr !important; } html body .vm-actions button { flex: 1 1 0; } }
}
@media screen {
html body .vm-search input { width: auto !important; min-width: 0 !important; }
html body .vm-search .btn-primary { width: auto !important; min-width: 84px; }
html body .vm-search input::placeholder { text-transform: none; letter-spacing: 0; }
html body .vm-table th { white-space: nowrap; }
@media (max-width: 600px) { html body .vm-table td, html body .vm-table th { padding: 0 6px; } }
}
/* Visa Manifest: date / reason boxes match the flight box */
html body #visaModal .vm-row input { box-sizing: border-box !important; height: 34px !important; min-height: 34px !important; padding-top: 0 !important; padding-bottom: 0 !important; }
html body #vmReason { text-transform: uppercase; }
/* Transfer Summary dialog (Welfare Plan) */
html body .ts-card { max-width: min(860px, 100%) !important; }
html body #tsInput { width: 100% !important; box-sizing: border-box !important; min-height: 110px !important; font: 400 12px/1.35 Consolas, 'Courier New', monospace !important; white-space: pre !important; overflow: auto !important; }
html body .ts-top { margin: 0 0 12px !important; }
html body .ts-sub { padding: 6px 10px; background: #E2EFDA; border: 1px solid #A9D08E; border-top: 0; font: 400 13px/18px var(--xl-font); color: #375623; }
html body .ts-wrap { max-height: min(420px, 48dvh) !important; }
html body .ts-table td.ts-c { text-align: center; white-space: nowrap; }
html body .ts-table .ts-b { font-weight: 700; }
html body .ts-table small { color: #595959; font-size: 11px; }
html body .ts-table tr.ts-row { cursor: pointer; }
html body .ts-table tr.ts-row:hover td, html body .ts-table tr.ts-row.open td { background: #F2F8EE; }
html body .ts-table tr.ts-row td:nth-child(2)::before { content: '▸ '; color: #217346; }
html body .ts-table tr.ts-row.open td:nth-child(2)::before { content: '▾ '; }
html body .ts-table tr.ts-names td { background: #FAFCF9; height: auto; padding: 6px 8px; }
html body .ts-table tr.ts-names ol { margin: 0; padding-left: 24px; columns: 2 260px; column-gap: 24px; font-size: 13px; }
html body .ts-table tr.ts-names li { break-inside: avoid; padding: 1px 0; }
html body .ts-table tr.ts-names li span { display: block; color: #7F7F7F; font-size: 11px; line-height: 1.25; }
html body .ts-table tr.ts-names li.ts-flag { color: #9C0006; }
html body .ts-table tfoot td { background: #F2F2F2; height: 30px; border-top: 2px solid #000; }
html body .ts-st { display: inline-block; padding: 0 8px; border-radius: 999px; font: 600 12px/20px var(--xl-font); background: #EDEDED; color: #404040; white-space: nowrap; }
html body .ts-st.ts-dep { background: #C6EFCE; color: #006100; }
html body .ts-st.ts-bad { background: #FFC7CE; color: #9C0006; }
html body .ts-st.ts-live { background: #FFEB9C; color: #9C6500; }
html body .ts-warn { display: inline-block; padding: 0 6px; border-radius: 999px; background: #FFC7CE; color: #9C0006; font-weight: 700; }
html body .ts-hint { margin: 6px 0 0; font: italic 400 12px/16px var(--xl-font); color: #595959; }
@media (max-width: 600px) { html body .ts-table thead th:nth-child(4), html body .ts-table tr.ts-row td:nth-child(4), html body .ts-table thead th:nth-child(5), html body .ts-table tr.ts-row td:nth-child(5) { display: none; } html body .ts-table tfoot td:nth-child(2) { } }
html body #tsOut .vm-list-head { height: auto !important; min-height: 30px; flex-wrap: wrap; gap: 0 12px; line-height: 20px !important; padding: 5px 10px !important; }
html body .ts-table tr.ts-row td:nth-child(2) { white-space: nowrap; }
@media (max-width: 600px) {
  html body .ts-table thead th:nth-child(8), html body .ts-table tr.ts-row td:nth-child(8), html body .ts-table tfoot td:nth-child(4), html body .ts-table small { display: none; }
  html body .ts-table td, html body .ts-table th { padding: 0 4px !important; font-size: 13px; }
  html body .ts-st { padding: 0 5px; font-size: 11px; }
  html body .ts-table tr.ts-names ol { columns: 1; }
}