/* Gmail-style workspace, including older dark utility surfaces. */
body.app-theme { background: #f8fafd; color: #202124; font-family: Arial, Helvetica, sans-serif; }
.site-shell { display: flex; min-height: 100dvh; }
.site-sidebar { flex: 0 0 240px; width: 240px; padding: 20px 12px; background: #f3f6fa; border-right: 1px solid #e0e4e9; transition: flex-basis 180ms ease, width 180ms ease, padding 180ms ease; }
.site-brand-row { display: flex; align-items: center; gap: 4px; min-width: 0; padding: 4px 4px 28px 16px; }
.site-brand { display: flex; align-items: center; gap: 12px; min-width: 0; flex: 1; font-size: 23px; color: #202124; }
.site-brand-name { overflow: hidden; }
.site-admin-link { margin-bottom: 12px; color: #174ea6; }
.site-admin-link:hover { color: #123d86; }
.sidebar-toggle { display: inline-grid; place-items: center; flex: 0 0 32px; width: 32px; height: 32px; padding: 0; border: 0; border-radius: 50%; color: #515761; background: transparent; }
.sidebar-toggle:hover { background: #e1e5eb; color: #202124; }
.sidebar-toggle-icon { width: 20px; height: 20px; transition: transform 180ms ease; }
.site-menu > summary { display: none; }
.site-menu::details-content { content-visibility: visible; }
.site-link { display: flex; align-items: center; gap: 15px; padding: 12px 18px; margin-bottom: 4px; border-radius: 0 24px 24px 0; font-size: 14px; color: #30343b; }
.site-link:hover { background: #e1e5eb; }
.site-link.is-active { background: #d3e3fd; color: #174ea6; font-weight: 600; }
.site-icon { width: 20px; text-align: center; font-size: 21px; }
.site-count { margin-left: auto; font-size: 12px; }
.site-account { border-top: 1px solid #dfe3e8; margin-top: 28px; padding: 20px 12px; display: grid; gap: 16px; color: #515761; font-size: 12px; overflow-wrap: anywhere; }
.site-account button { padding: 8px 12px; border-radius: 6px; }
.site-account button:hover { background: #e1e5eb; }
.site-sidebar.is-collapsed { flex-basis: 72px; width: 72px; padding-left: 8px; padding-right: 8px; }
.site-sidebar.is-collapsed .site-brand-row { padding-left: 0; padding-right: 0; }
.site-sidebar.is-collapsed .site-brand { justify-content: center; }
.site-sidebar.is-collapsed .site-brand-name,
.site-sidebar.is-collapsed .site-link-label,
.site-sidebar.is-collapsed .site-count,
.site-sidebar.is-collapsed .site-account > span { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; }
.site-sidebar.is-collapsed .site-link { justify-content: center; gap: 0; padding-left: 12px; padding-right: 12px; }
.site-sidebar.is-collapsed .site-icon { width: auto; }
.site-sidebar.is-collapsed .site-account { justify-items: center; padding-left: 0; padding-right: 0; }
.site-sidebar.is-collapsed .site-account button { width: 40px; height: 36px; padding: 0; overflow: hidden; font-size: 0; }
.site-sidebar.is-collapsed .site-account button::before { content: "↪"; font-size: 18px; }
.site-sidebar.is-collapsed .sidebar-toggle-icon { transform: rotate(180deg); }
.site-content { flex: 1; min-width: 0; background: #fdfdfd; }
.site-admin { width: 100%; position: relative; z-index: 50; border-bottom: 1px solid #dfe3e8; }
.site-admin nav details { display: contents; }
.site-admin nav details::details-content { content-visibility: visible; }
.site-admin nav summary { display: none; }
.site-admin nav details > div { display: flex; flex-direction: row; flex: 1; flex-wrap: wrap; position: static; margin: 0; min-width: 0; overflow: visible; box-shadow: none; border: 0; }
.site-admin nav a { white-space: nowrap; }
.team-mailboxes { padding-bottom: 16px; margin-bottom: 16px; border-bottom: 1px solid #dfe3e8; }
.site-subnav { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 24px; min-height: 56px; padding: 8px 24px; background: #fff; border-bottom: 1px solid #dfe3e8; color: #202124; }
.site-section { font-size: 15px; font-weight: 600; }
.site-page-controls { display: flex; flex: 1; flex-wrap: wrap; align-items: center; gap: 8px; min-width: 0; }
.mail-view-link { display: inline-flex; align-items: center; min-height: 36px; padding: 6px 12px; color: #3c4043; border-bottom: 2px solid transparent; font-size: 14px; }
.mail-view-link:hover { background: #e4e8ee; }
.mail-view-link.is-active { color: #1967d2; border-bottom-color: #1a73e8; }
.site-admin nav, .site-admin nav details > div { background: #fff; border-color: #dfe3e8; }
.site-admin nav { min-height: 52px; }
.site-admin nav a, .site-admin nav span, .site-admin nav summary { color: #30343b; }
.site-admin nav a:hover { background: #e8eaed; }
.app-theme :is(a, button, input, select, textarea, summary):focus-visible { outline: 2px solid #1a73e8; outline-offset: 3px; }
.app-theme :is([class*="bg-[#1"], [class*="bg-[#2"], .bg-gray-900, .bg-gray-800, .bg-slate-900, .bg-slate-800) { background-color: #f8fafd; color: #202124; }
.app-theme :is([class~="bg-white/5"], [class~="bg-white/10"], [class~="bg-black/10"]) { background-color: #f0f3f7; }
.app-theme :is([class*="text-white/"], .text-gray-300, .text-gray-400, .text-slate-300, .text-slate-400) { color: #535963; }
.app-theme .text-white:not([class*="bg-blue-"]):not([class*="bg-emerald-"]):not([class*="bg-rose-"]):not([class*="bg-red-"]):not([class*="bg-green-"]):not([class*="bg-indigo-"]):not([class*="bg-violet-"]):not([class*="bg-purple-"]):not([class*="bg-gray-6"]) { color: #202124; }
.app-theme :is(.text-blue-300, .text-blue-400) { color: #1967d2; }
.app-theme :is([class*="border-white/"], [class*="divide-white/"] > :not(:last-child)) { border-color: #dfe3e8; }
.app-theme [class*="placeholder-white/"]::placeholder { color: #68717d; }
.app-theme :is([class*="hover:bg-white/"], [class*="hover:bg-[#"]):hover { background-color: #e4e8ee; }
.app-theme tbody tr:hover { background-color: #e4e8ee; }
.app-theme :is(.trello-markdown, .play-markdown) { color: #202124; }
.app-theme :is(.trello-markdown, .play-markdown) :is(h1,h2,h3,h4) { color: #202124; }
.app-theme :is(.trello-markdown, .play-markdown) :is(blockquote, del, s) { color: #5f6368; border-color: #dadce0; }
.app-theme :is(.trello-markdown, .play-markdown) :is(pre, code, th) { background: #eef1f5; }
.app-theme :is(.trello-markdown, .play-markdown) :is(td, th, hr) { border-color: #dadce0; }
.app-theme :is(.trello-markdown, .play-markdown) a { color: #1967d2; }
.mail-page { padding: 24px 28px; }
.mail-back { display: inline-block; margin-bottom: 20px; color: #1967d2; font-size: 14px; }
.mail-page article { background: #fff; border-color: #dadce0; }
.mail-page article pre { margin-top: 20px; line-height: 1.6; overflow-wrap: anywhere; }
.app-theme :is(.bg-gray-950, .bg-slate-950, .bg-zinc-900, .bg-neutral-900, .bg-gray-700, .bg-slate-700) { background-color: #edf1f5; color: #202124; }
.app-theme :is(.text-emerald-300, .text-emerald-400, .text-green-300, .text-green-400) { color: #137333; }
.app-theme :is(.text-amber-300, .text-amber-400, .text-yellow-300, .text-yellow-400) { color: #8a4b08; }
.app-theme :is(.text-red-300, .text-red-400, .text-rose-300, .text-rose-400) { color: #b3261e; }
.mail-heading { display: flex; justify-content: space-between; align-items: center; gap: 16px; margin-bottom: 20px; }
.mail-heading h1 { font-size: 22px; }
.mail-heading p, .mail-muted { color: #5f6368; font-size: 13px; }
.mail-search { display: flex; flex-wrap: wrap; align-items: center; gap: 12px; background: #edf2fa; border-radius: 10px; padding: 10px 16px; margin-bottom: 20px; }
.mail-search input[type="search"] { flex: 1; min-width: 150px; background: transparent; padding: 8px; }
.mail-search button, .mail-search input[type="submit"], .mail-page button { padding: 8px 12px; border-radius: 6px; }
.mail-search input[type="submit"] { background: #d3e3fd; color: #174ea6; }
.mail-toolbar { display: flex; justify-content: space-between; align-items: center; padding: 16px 8px; border-bottom: 1px solid #dadce0; font-size: 13px; }
.mail-row { display: grid; grid-template-columns: minmax(120px, 22%) minmax(0, 1fr) 90px; gap: 18px; align-items: center; min-height: 54px; padding: 12px 10px; border-bottom: 1px solid #e3e7ed; color: #202124; font-size: 14px; }
.mail-row:hover { background: #e4e8ee; box-shadow: inset 0 1px #dadce0, inset 0 -1px #dadce0; }
.mail-page > .border-b:hover { background: #e4e8ee; }
.mail-row > span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.mail-row time { text-align: right; font-size: 12px; color: #5f6368; }
.mail-empty { padding: 64px 20px; text-align: center; color: #5f6368; }
.mail-empty p + p { margin-top: 8px; font-size: 13px; }
.mail-row:focus-visible { background: #e4e8ee; }
.mail-pagination { display: flex; justify-content: flex-end; gap: 24px; padding: 20px 8px; color: #1967d2; font-size: 14px; }
@media (max-width: 767px) {
  .site-shell { display: block; }
  .site-sidebar, .site-sidebar.is-collapsed { width: auto; padding: 12px; border-right: 0; border-bottom: 1px solid #dfe3e8; }
  .site-brand-row { padding: 4px 12px 12px; }
  .site-sidebar.is-collapsed .site-brand-row { justify-content: flex-start; }
  .site-sidebar.is-collapsed .site-brand { flex: 0 0 auto; justify-content: initial; }
  .site-sidebar.is-collapsed .site-menu { display: none; }
  .site-menu > summary { display: block; padding: 8px 12px; }
  .site-menu:not([open])::details-content { content-visibility: hidden; }
  .site-menu nav { display: grid; grid-template-columns: 1fr 1fr; }
  .site-link { padding: 10px; }
  .site-account { margin-top: 12px; padding: 12px; }
  .mail-page { padding: 16px 12px; }
  .mail-heading { align-items: start; flex-direction: column; }
  .mail-row { grid-template-columns: minmax(0, 1fr) 72px; gap: 5px 10px; }
  .mail-row > span:first-child { font-weight: 600; }
  .mail-row > span:nth-child(2) { grid-column: 1; grid-row: 2; }
  .mail-row time { grid-column: 2; grid-row: 1; }
}
@media (prefers-reduced-motion: reduce) {
  .site-sidebar, .sidebar-toggle-icon { transition: none; }
}