/* WEXRI — the suite bar shown on top of every back-office screen.
   Visual language: Fleet Scheduler Pro (classic window title bar + menu drops).
   Everything is scoped to #suitebar so module stylesheets cannot reach it and
   it cannot reach them. */
#suitebar, #suitebar * { box-sizing: border-box; margin: 0; padding: 0; font-family: Tahoma, Verdana, Arial, sans-serif; font-size: 11px; line-height: normal; letter-spacing: normal; text-transform: none; text-shadow: none; }
#suitebar {
  position: relative; z-index: 99990; display: flex; align-items: stretch; height: 28px; flex: 0 0 auto;
  background: #0A0A0A; color: #fff;
  border: 2px solid; border-color: #5F6368 #000000 #000000 #5F6368; user-select: none; width: 100%;
}
#suitebar .sb-brand { display: flex; align-items: center; gap: 6px; padding: 0 10px 0 2px; font-weight: bold; color: #fff; white-space: nowrap; text-decoration: none; font-size: 12px; }
#suitebar .sb-brand .sb-tenant { background: #F4F4F5; color: #2B59FF; padding: 0 5px; border: 1px solid; border-color: #808080 #fff #fff #808080; font-size: 10px; }
#suitebar .sb-brand .sb-env { background: #c05800; color: #fff; padding: 0 5px; font-size: 10px; }
#suitebar .sb-menu { position: relative; display: flex; align-items: stretch; }
#suitebar .sb-title { display: flex; align-items: center; gap: 4px; padding: 0 9px; cursor: pointer; color: #fff; white-space: nowrap; border: 1px solid transparent; background: none; }
#suitebar .sb-menu:hover > .sb-title, #suitebar .sb-menu:focus-within > .sb-title, #suitebar .sb-menu.sb-open > .sb-title { background: #F4F4F5; color: #000; border-color: #808080 #fff #fff #808080; }
#suitebar .sb-menu.sb-active > .sb-title { font-weight: bold; text-decoration: underline; }
#suitebar .sb-drop {
  display: none; position: absolute; top: 100%; left: 0; min-width: 240px; max-height: calc(100vh - 40px); overflow-y: auto;
  background: #fff; color: #000; border: 1px solid #808080; box-shadow: 2px 2px 5px rgba(0,0,0,.35); z-index: 99991;
}
#suitebar .sb-menu:hover > .sb-drop, #suitebar .sb-menu:focus-within > .sb-drop, #suitebar .sb-menu.sb-open > .sb-drop { display: block; }
#suitebar .sb-drop a { display: block; padding: 5px 12px; color: #000; text-decoration: none; border-bottom: 1px solid #e4e4e4; white-space: nowrap; font-size: 12px; }
#suitebar .sb-drop a:last-child { border-bottom: none; }
#suitebar .sb-drop a:hover, #suitebar .sb-drop a:focus { background: #2B59FF; color: #fff; outline: none; }
#suitebar .sb-drop a.sb-current { font-weight: bold; }
#suitebar .sb-drop .sb-head { padding: 4px 12px 2px; color: #808080; font-size: 10px; font-weight: bold; background: #FAFAFA; border-bottom: 1px solid #e4e4e4; }
#suitebar .sb-drop .sb-sep { height: 0; border-top: 2px solid #E4E4E7; }
/* area menus: one column per module */
#suitebar .sb-menu:hover > .sb-drop.sb-mega, #suitebar .sb-menu:focus-within > .sb-drop.sb-mega, #suitebar .sb-menu.sb-open > .sb-drop.sb-mega { display: grid; }
#suitebar .sb-drop.sb-mega { grid-template-columns: repeat(var(--cols), minmax(200px, max-content)); width: max-content; max-width: calc(100vw - 20px); }
#suitebar .sb-drop.sb-mega .sb-col { border-right: 1px solid #e4e4e4; min-width: 200px; }
#suitebar .sb-drop.sb-mega .sb-col:last-child { border-right: 0; }
#suitebar .sb-drop .sb-col .sb-head { padding: 6px 12px 4px; color: #2B59FF; font-size: 10px; letter-spacing: .3px; background: #F4F6FC; border-bottom: 1px solid #dfe3ee; }
#suitebar .sb-drop .sb-col a { border-bottom: 0; padding: 4px 12px; }
@media (max-width: 1100px) { #suitebar .sb-drop.sb-mega { grid-template-columns: repeat(2, minmax(200px, 1fr)); } }
#suitebar .sb-right { margin-left: auto; display: flex; align-items: stretch; }
#suitebar .sb-user { display: flex; align-items: center; padding: 0 8px; color: #fff; white-space: nowrap; }
#suitebar .sb-btn { display: flex; align-items: center; padding: 0 9px; margin: 1px; color: #000; background: #F4F4F5; text-decoration: none; border: 2px solid; border-color: #ffffff #808080 #808080 #ffffff; font-weight: bold; white-space: nowrap; }
#suitebar .sb-btn:active { border-color: #808080 #ffffff #ffffff #808080; }
#suitebar .sb-support { background: #ffff80; color: #000; padding: 0 6px; margin: 3px 4px; display: flex; align-items: center; font-weight: bold; border: 1px solid #808080; }
@media (max-width: 900px) { #suitebar .sb-title .sb-label { display: none; } #suitebar .sb-user { display: none; } }
@media print { #suitebar { display: none !important; } }
/* program windows: the program's name instead of the platform brand, a Close button instead of Log Off */
#suitebar .sb-progname { font-weight: bold; font-size: 12px; }
#suitebar.sb-program .sb-brand { cursor: default; }
#suitebar .sb-close[hidden] { display: none; }
#suitebar .sb-close { color: #000; }
#suitebar img.sb-logo { display: block; height: 22px; width: auto; min-width: 64px; }

/* suite dialogs (confirm / alert / prompt) — Wexri window style, see suitebar.js */
.wxd-back { position: fixed; inset: 0; z-index: 2147483000; background: rgba(0,0,0,.28); display: flex; align-items: flex-start; justify-content: center; padding: 12vh 16px 16px; }
.wxd { width: min(460px, 100%); background: #c0c0c0; border: 2px solid; border-color: #fff #000 #000 #fff; box-shadow: 6px 6px 18px rgba(0,0,0,.45); padding: 2px;
       font: 13px/1.4 Tahoma, Verdana, "Segoe UI", sans-serif; color: #000; animation: wxdIn .09s ease-out; }
@keyframes wxdIn { from { transform: translateY(-6px); opacity: .4; } to { transform: none; opacity: 1; } }
.wxd-h { background: #1f3fff; background: linear-gradient(90deg, #0a24c8, #2b5cff); color: #fff; font-weight: bold; padding: 4px 4px 4px 8px; display: flex; justify-content: space-between; align-items: center; }
.wxd-x { background: #c0c0c0; color: #000; border: 2px solid; border-color: #fff #000 #000 #fff; width: 20px; height: 18px; line-height: 12px; font-size: 11px; padding: 0; cursor: pointer; }
.wxd-b { display: flex; gap: 12px; padding: 16px 14px 10px; align-items: flex-start; }
.wxd-icon { flex: 0 0 34px; height: 34px; border-radius: 50%; background: #1f3fff; color: #fff; font: bold 20px/34px Tahoma, sans-serif; text-align: center; }
.wxd-t { flex: 1; word-break: break-word; padding-top: 6px; }
.wxd-in { display: block; width: 100%; margin-top: 8px; padding: 3px 5px; font: inherit; border: 2px solid; border-color: #808080 #fff #fff #808080; background: #fff; }
.wxd-f { display: flex; justify-content: flex-end; gap: 8px; padding: 6px 12px 12px; }
.wxd-btn { min-width: 84px; padding: 4px 12px; font: inherit; font-weight: bold; background: #c0c0c0; color: #000; border: 2px solid; border-color: #fff #000 #000 #fff; cursor: pointer; }
.wxd-btn:active { border-color: #000 #fff #fff #000; }
.wxd-btn:focus-visible { outline: 1px dotted #000; outline-offset: -5px; }
.wxd-ok { background: #1f3fff; color: #fff; }
.wxd-ok.danger { background: #c62828; }

/* notification centre (bell) */
#suitebar .sb-jobs .sb-title { position: relative; padding: 0 10px; }
#suitebar .sb-bell { font-size: 13px; }
#suitebar .sb-badge { position: absolute; top: 2px; right: 1px; min-width: 15px; height: 15px; border-radius: 8px; background: #E53935; color: #fff; font-size: 9px; font-weight: bold; display: flex; align-items: center; justify-content: center; padding: 0 3px; }
#suitebar .sb-badge[hidden] { display: none; }
#suitebar .sb-badge.busy { background: #2B59FF; min-width: 9px; width: 9px; height: 9px; top: 4px; right: 3px; animation: sbPulse 1s ease-in-out infinite; }
@keyframes sbPulse { 50% { opacity: .35; } }
#suitebar .sb-jobdrop { left: auto; right: 0; width: 340px; }
#suitebar .sb-jobempty { padding: 12px; color: #555; font-size: 12px; white-space: normal; line-height: 1.4; }
#suitebar .sb-job { padding: 7px 12px; border-bottom: 1px solid #e4e4e4; white-space: normal; }
#suitebar .sb-job.sb-new { background: #F2F6FF; }
#suitebar .sb-job-t { font-weight: bold; font-size: 12px; color: #000; }
#suitebar .sb-job-s { font-size: 11px; color: #444; margin-top: 2px; display: flex; align-items: center; gap: 4px; flex-wrap: wrap; }
#suitebar .sb-job-failed .sb-job-s { color: #a00000; }
#suitebar .sb-job-done .sb-job-s { color: #006000; }
#suitebar .sb-job-when { color: #888; margin-left: auto; }
#suitebar .sb-job-m { font-size: 11px; color: #555; margin-top: 2px; line-height: 1.35; }
#suitebar .sb-job-failed .sb-job-m { color: #a00000; }
#suitebar .sb-drop a.sb-job-dl { display: inline-block; margin-top: 4px; padding: 3px 8px; background: #2B59FF; color: #fff; border: 0; font-weight: bold; font-size: 11px; }
#suitebar .sb-drop a.sb-job-dl span { font-weight: normal; opacity: .85; }
#suitebar .sb-drop a.sb-joball { font-size: 11px; color: #2B59FF; }
#suitebar .sb-prog { display: inline-block; width: 70px; height: 5px; background: #e4e4e7; vertical-align: middle; }
#suitebar .sb-prog i { display: block; height: 100%; background: #2B59FF; transition: width .4s; }
.sb-spin { display: inline-block; width: 11px; height: 11px; border: 2px solid rgba(43,89,255,.25); border-top-color: #2B59FF; border-radius: 50%; animation: sbSpin .7s linear infinite; vertical-align: -2px; }
@keyframes sbSpin { to { transform: rotate(360deg); } }

/* toasts */
#wx-toasts { position: fixed; right: 16px; bottom: 16px; z-index: 2147482000; display: flex; flex-direction: column; gap: 8px; max-width: min(420px, calc(100vw - 32px)); }
.wx-toast { display: flex; gap: 8px; align-items: flex-start; background: #fff; color: #000; border: 2px solid; border-color: #fff #000 #000 #fff; box-shadow: 4px 4px 14px rgba(0,0,0,.35); padding: 8px 8px 8px 12px; font: 12px/1.4 Tahoma, Verdana, sans-serif; border-left: 5px solid #2B59FF; transition: opacity .4s, transform .4s; }
.wx-toast.ok { border-left-color: #2e7d32; }
.wx-toast.err { border-left-color: #c62828; }
.wx-toast.out { opacity: 0; transform: translateY(8px); }
.wx-toast-b { flex: 1; }
.wx-toast-b a { color: #2B59FF; font-weight: bold; }
.wx-toast-x { background: none; border: 0; cursor: pointer; font-size: 12px; color: #555; }

/* page loading */
#wx-loading .wx-loadbar { position: fixed; top: 0; left: 0; right: 0; height: 3px; z-index: 2147483600; overflow: hidden; background: rgba(43,89,255,.15); }
#wx-loading .wx-loadbar i { position: absolute; top: 0; bottom: 0; width: 35%; background: #2B59FF; animation: wxLoad 1.1s ease-in-out infinite; }
@keyframes wxLoad { from { left: -35%; } to { left: 100%; } }
#wx-loading .wx-loadchip { position: fixed; top: 34px; left: 50%; transform: translateX(-50%); z-index: 2147483600; background: #fff; border: 1px solid #808080; box-shadow: 2px 2px 8px rgba(0,0,0,.3); padding: 4px 12px; font: bold 12px Tahoma, Verdana, sans-serif; color: #000; }

/* outline of the next page while it loads */
#wx-loading .wx-skel { position: fixed; left: 0; right: 0; bottom: 0; z-index: 2147483500; background: #E4E4E7; padding: 8px; overflow: hidden; animation: wxsIn .12s ease-out; }
@keyframes wxsIn { from { opacity: 0; } to { opacity: 1; } }
#wx-loading .wxs-win { background: #F4F4F5; border: 2px solid; border-color: #fff #808080 #808080 #fff; box-shadow: 1px 1px 0 #000; }
#wx-loading .wxs-title { background: #2B59FF; color: #fff; font: bold 12px Tahoma, Verdana, sans-serif; padding: 4px 8px; min-height: 20px; }
#wx-loading .wxs-title i { display: block; width: 180px; height: 10px; margin-top: 2px; background: rgba(255,255,255,.35); border-radius: 2px; }
#wx-loading .wxs-kpis { display: flex; gap: 8px; padding: 10px 8px 4px; flex-wrap: wrap; }
#wx-loading .wxs-kpi { flex: 1 1 140px; max-width: 220px; background: #fff; border: 1px solid #c0c0c0; padding: 8px; }
#wx-loading .wxs-kpi i, #wx-loading .wxs-row i { display: block; height: 10px; border-radius: 2px; background: linear-gradient(90deg, #dcdce0 0%, #eeeef1 40%, #dcdce0 80%); background-size: 300% 100%; animation: wxsShine 1.15s ease-in-out infinite; }
#wx-loading .wxs-kpi .a { width: 55%; height: 8px; margin-bottom: 7px; } #wx-loading .wxs-kpi .b { width: 75%; height: 18px; margin-bottom: 7px; } #wx-loading .wxs-kpi .c { width: 90%; height: 7px; }
#wx-loading .wxs-table { margin: 8px; background: #fff; border: 1px solid #c0c0c0; }
#wx-loading .wxs-row { display: flex; gap: 12px; padding: 8px 8px; border-bottom: 1px solid #eee; }
#wx-loading .wxs-row i { flex: 1; }
@keyframes wxsShine { 0% { background-position: 100% 0; } 100% { background-position: -100% 0; } }
@media (prefers-reduced-motion: reduce) { #wx-loading .wxs-kpi i, #wx-loading .wxs-row i { animation: none; } }

/* narrower screens: every menu stays on one line */
@media (max-width: 1500px) { #suitebar .sb-title { padding: 0 6px; } }
@media (max-width: 1440px) { #suitebar .sb-ico { display: none; } }
@media (max-width: 1150px) { #suitebar .sb-title { padding: 0 4px; } #suitebar .sb-label { font-size: 10px; } #suitebar .sb-brand .sb-tenant { display: none; } }

/* the outline in the shape of the page being opened (remembered from the last visit) */
#wx-loading .wxp-page { position: relative; height: 100%; }
#wx-loading .wxp { position: absolute; box-sizing: border-box; overflow: hidden; }
#wx-loading .wxp-f { background: #F4F4F5; border: 2px solid; border-color: #fff #808080 #808080 #fff; }
#wx-loading .wxp-h { background: #2B59FF; color: #fff; font: bold 12px Tahoma, Verdana, sans-serif; padding: 4px 8px; white-space: nowrap; }
#wx-loading .wxp-k { background: #fff; border: 1px solid #c0c0c0; padding: 8px; }
#wx-loading .wxp-c { background: #e9e9ec; border: 1px solid #d0d0d4; border-radius: 2px; }
#wx-loading .wxp-x i, #wx-loading .wxp-k i, #wx-loading .wxp-tr i { display: block; height: 9px; border-radius: 2px; background: linear-gradient(90deg, #dcdce0 0%, #eeeef1 40%, #dcdce0 80%); background-size: 300% 100%; animation: wxsShine 1.15s ease-in-out infinite; }
#wx-loading .wxp-x i { width: 70%; margin-top: 3px; }
#wx-loading .wxp-k i { margin-bottom: 8px; }
#wx-loading .wxp-t { background: #fff; border: 1px solid #c0c0c0; }
#wx-loading .wxp-th { background: #e4e4e7; border-bottom: 1px solid #c0c0c0; }
#wx-loading .wxp-tr { position: absolute; left: 0; right: 0; border-bottom: 1px solid #f0f0f0; }
#wx-loading .wxp-tr i { position: absolute; top: 50%; margin-top: -4px; }
@media (prefers-reduced-motion: reduce) { #wx-loading .wxp i { animation: none; } }
#wx-loading .wx-skel .wxp-page { margin: -8px; }

/* clock */
.sb-clock .sb-title{font-variant-numeric:tabular-nums;white-space:nowrap}
.sb-clock .sb-time{font-weight:700;letter-spacing:.02em}
.sb-clock .sb-zone{font-size:11px;opacity:.85}
.sb-clock .sb-tzmode{font-size:10px;opacity:.65;margin-left:2px}
.sb-clockdrop{min-width:250px;right:0;left:auto}
.sb-clockdrop a small{opacity:.6;margin-left:6px}
.sb-tzform{display:flex;gap:4px;padding:4px 10px}
.sb-tzform input{width:110px;text-transform:uppercase}
.sb-tznote{font-size:11px;opacity:.65;padding:6px 10px 8px;max-width:240px;white-space:normal}

/* flight status (FlightStatus::badge) - shared by every screen that shows flights */
.fstat{display:inline-block;padding:1px 6px;border-radius:2px;font-size:10.5px;font-weight:600;white-space:nowrap;line-height:15px;border:1px solid transparent;font-family:system-ui,-apple-system,"Segoe UI",sans-serif;letter-spacing:.01em}
.fstat-off{background:#eef0f3;color:#4a5361;border-color:#d5d9df}
.fstat-info{background:#e6efff;color:#1d3fa8;border-color:#b9cbf5}
.fstat-ok{background:#e3f6e8;color:#0b6b2b;border-color:#a9dfb8}
.fstat-warn{background:#fff3d6;color:#7a5200;border-color:#efd08a}
.fstat-dark{background:#2b3442;color:#fff;border-color:#2b3442}
.fstat-err{background:#fde4e4;color:#a61b1b;border-color:#f0b4b4}
