/* =====================================================================
   Boss mode, Outlook skin: the game disguised as an Outlook inbox.
   Builds on boss.css (white, plain fonts, grayscale) and swaps the Excel chrome for Outlook's.
   ===================================================================== */
#olTop { display: none; }
body.boss.skin-outlook {
  --ol: #0f6cbd; --ol-light: #ebf3fc;
  font-family: 'Segoe UI', 'Aptos', Arial, sans-serif;
}
body.boss.skin-outlook #bossTop, body.boss.skin-outlook #bossBottom { display: none; }
body.boss.skin-outlook #olTop { display: block; position: fixed; top: 0; left: 0; right: 0; z-index: 60; font-family: 'Segoe UI', Arial, sans-serif; font-size: 13px; color: #242424; }
.olBar { height: 48px; background: var(--ol); color: #fff; display: flex; align-items: center; gap: 16px; padding: 0 14px; }
.olGrid { font-size: 16px; letter-spacing: -3px; }
.olApp { font-weight: 600; font-size: 16px; }
.olSearch { flex: 0 1 520px; margin: 0 auto; background: #fff; color: #616161; border-radius: 4px; padding: 6px 12px; }
.olIcons { letter-spacing: 8px; filter: grayscale(1) brightness(3); }
.olUser { width: 30px; height: 30px; border-radius: 50%; background: #c7e0f4; color: var(--ol); font-weight: 700; display: flex; align-items: center; justify-content: center; font-size: 12px; }
.olTabs { display: flex; gap: 4px; background: #f5f5f5; padding: 4px 12px 0; }
.olTabs span { padding: 5px 10px; }
.olTabs span.on { color: var(--ol); font-weight: 600; border-bottom: 3px solid var(--ol); }
.olRibbon { display: flex; gap: 4px; align-items: center; background: #fff; padding: 6px 12px; border-bottom: 1px solid #e0e0e0; white-space: nowrap; overflow: hidden; }
.olRibbon span { padding: 4px 8px; border-radius: 4px; filter: grayscale(1); }
.olRibbon .olNew { background: var(--ol); color: #fff; filter: none; font-weight: 600; }

body.boss.skin-outlook #game {
  margin-top: 124px; height: calc(100vh - 124px); padding-left: 0;
  background: #fff; background-image: none;
  grid-template-columns: 260px minmax(320px, 1fr) minmax(340px, 38%);
}
/* folder pane */
body.boss.skin-outlook #left { background: #f5f5f5; align-items: stretch; }
body.boss.skin-outlook #middle, body.boss.skin-outlook #right { border-left: 1px solid #e0e0e0; }
body.boss.skin-outlook #bakeryName { background: none; color: #242424; font-weight: 600; font-size: 14px; padding: 12px 14px 4px; }
body.boss.skin-outlook #bakeryName::before { content: '📥 '; filter: grayscale(1); }
body.boss.skin-outlook #cookieCount { border: none; font-size: 13px; padding: 4px 14px; background: var(--ol-light); border-left: 3px solid var(--ol); }
body.boss.skin-outlook #cookieCount > div:first-child { font-weight: 600; }
body.boss.skin-outlook #cps { font-size: 12px; }
body.boss.skin-outlook #cookieWrap { width: 230px; height: 175px; margin: 10px auto; }
body.boss.skin-outlook #bigCookie { border: 1px solid #e0e0e0; border-radius: 6px; }
body.boss.skin-outlook #bigCookie:hover { outline: 2px solid var(--ol); }
body.boss.skin-outlook #bigCookie .chartArt { display: none; }
body.boss.skin-outlook #bigCookie .calArt { display: block; }
body.boss.skin-outlook .floater { color: var(--ol) !important; }
body.boss.skin-outlook #chatBox { border-radius: 6px; }
body.boss.skin-outlook #chatBox::before { content: 'Teams chat'; background: #f0f0f0; }
body.boss.skin-outlook #emoteBar button { background: #fff; border-color: #e0e0e0; filter: grayscale(1); }

/* message list */
body.boss.skin-outlook #ticker { background: #fff; color: #616161; }
body.boss.skin-outlook #ticker::before { content: '📌 '; }
body.boss.skin-outlook #tabs button.active, body.boss.skin-outlook #buyMode button.active { background: var(--ol-light); border-color: var(--ol); color: var(--ol); }
body.boss.skin-outlook .row { height: 54px; display: grid; grid-template-columns: 1fr auto; grid-template-rows: auto auto; padding: 6px 12px; border-bottom: 1px solid #f0f0f0; }
body.boss.skin-outlook .row:hover { background: #f5f5f5 !important; }
body.boss.skin-outlook .row::after { display: none; }
body.boss.skin-outlook .row .label { display: contents; }
body.boss.skin-outlook .olFrom { font-weight: 600; grid-column: 1; }
body.boss.skin-outlook .olTime { grid-column: 2; grid-row: 1; color: #616161; font-size: 12px; }
body.boss.skin-outlook .olSubj { grid-column: 1 / -1; color: var(--ol); font-size: 12px; }
body.boss.skin-outlook .panelBox h3, body.boss.skin-outlook h4.rTier { color: var(--ol); }
body.boss.skin-outlook .storeTitle { background: var(--ol); }
body.boss.skin-outlook .ach.won, body.boss.skin-outlook .heavenUp.owned { background: var(--ol-light); border-color: #b4d6fa; }
body.boss.skin-outlook .upg.afford { background: var(--ol-light) !important; }
body.boss.skin-outlook .bld.afford:hover { background: var(--ol-light); }
body.boss.skin-outlook .qItem.head { background: var(--ol-light); }
body.boss.skin-outlook .qItem .qBar div, body.boss.skin-outlook #kitchen .kTimer div { background: var(--ol); }
body.boss.skin-outlook .notif { border-left-color: var(--ol); }
body.boss.skin-outlook #notifs { top: 130px; }
body.boss.skin-outlook .bigBtn { background: var(--ol); }
body.boss.skin-outlook #ascendOverlay { top: 124px; bottom: 0; }
body.boss.skin-outlook #ascendOverlay h2 { color: var(--ol); }
body.boss.skin-outlook #kitchen.order { border-left-color: var(--ol); }
body.boss.skin-outlook #kitchen .step.now { border-color: var(--ol); }
body.boss.skin-outlook #nameForm h2 { color: var(--ol); }
body.boss.skin-outlook #nameForm button { background: var(--ol); }

/* golden cookie = new mail toast, wrath = bounce, wrinklers = junk, reindeer = meeting reminder */
body.boss.skin-outlook .goldenCookie { background: #fff; border: 1px solid #e0e0e0; border-left: 4px solid var(--ol); width: 170px; height: 26px; box-shadow: 0 2px 8px rgba(0,0,0,.15); }
body.boss.skin-outlook .goldenCookie::after { content: '✉ New message (1)'; }
body.boss.skin-outlook .goldenCookie.wrath { border-left-color: #c42b1c; background: #fff; }
body.boss.skin-outlook .goldenCookie.wrath::after { content: '⚠ Undeliverable: RE: Q3'; }
body.boss.skin-outlook .wrinkler .body { background: #f5f5f5; border-color: #999; }
body.boss.skin-outlook .wrinkler .body::before { content: 'Junk'; color: #616161; }
body.boss .reindeer { font-size: 12px; background: #fff; border: 1px solid #c8c8c8; padding: 3px 8px; filter: none; color: #1f1f1f; }
body.boss .reindeer span { display: none; }
body.boss .reindeer::after { content: '📅 Reminder: Q3 sync'; }
body.boss .reindeer.rtl::after { content: '📅 Reminder: standup'; }
body.boss .goldenCookie .money { display: none; }
body.boss .emoteFloat { font-size: 20px; filter: grayscale(1); }
body.boss .emoteFloat small { display: none; }
body.boss #emoteBar button { filter: grayscale(1); background: #fff; border-color: #d4d4d4; }
body.boss .godCard, body.boss .seasonCard, body.boss .godSlot { background: #fff; border-color: #d4d4d4; color: #1f1f1f; border-radius: 0; }
body.boss .godIcon, body.boss .dragonArt, body.boss .drop, body.boss .godInSlot, body.boss table.market td:first-child { filter: grayscale(1); }
body.boss .dragonArt { font-size: 40px; animation: none; }
body.boss table.market td { border-color: #e2e2e2; }
body.boss .mgTabs .btn.active { background: #e9f5ee; }
body.boss.season-halloween, body.boss.season-christmas, body.boss.season-valentines, body.boss.season-easter, body.boss.season-business { background-color: #fff !important; }