/*
 * Outlook Relook — Swiss / Helvetica Theme
 * Ruthlessly minimal. Black, white, grey, accent. Nothing else.
 * Helvetica Neue everywhere. Zero decoration. Grid discipline.
 * If an element doesn't serve the content, it should be invisible.
 */

/* ============================================================
   LIGHT VARIANT
   ============================================================ */
html[data-outlook-relook-scheme="light"] {
  --or-bg-primary: #ffffff;
  --or-bg-secondary: #ffffff;
  --or-bg-tertiary: #f7f7f7;
  --or-bg-hover: #f0f0f0;
  --or-bg-selected: #f0f0f0;
  --or-text-primary: #000000;
  --or-text-secondary: #555555;
  --or-text-tertiary: #888888;
  --or-text-disabled: #bbbbbb;
  --or-border: #000000;
  --or-border-light: #e0e0e0;
  --or-accent: var(--or-accent-override, #ff0000);
  --or-accent-hover: var(--or-accent-override, #cc0000);
  --or-shadow: none;
}

/* ============================================================
   DARK VARIANT
   ============================================================ */
html[data-outlook-relook-scheme="dark"] {
  --or-bg-primary: #0a0a0a;
  --or-bg-secondary: #0a0a0a;
  --or-bg-tertiary: #141414;
  --or-bg-hover: #1a1a1a;
  --or-bg-selected: #1a1a1a;
  --or-text-primary: #ffffff;
  --or-text-secondary: #aaaaaa;
  --or-text-tertiary: #666666;
  --or-text-disabled: #444444;
  --or-border: #ffffff;
  --or-border-light: #222222;
  --or-accent: var(--or-accent-override, #ff3333);
  --or-accent-hover: var(--or-accent-override, #ff6666);
  --or-shadow: none;
}

/* ============================================================
   TYPOGRAPHY — Helvetica Neue, aggressively applied
   ============================================================ */
html[data-outlook-relook-scheme] *,
html[data-outlook-relook-scheme] *::before,
html[data-outlook-relook-scheme] *::after {
  font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif !important;
  letter-spacing: -0.02em !important;
  -webkit-font-smoothing: antialiased !important;
  -moz-osx-font-smoothing: grayscale !important;
}

/* ============================================================
   STRIP ALL DECORATION — the core Swiss principle
   ============================================================ */
html[data-outlook-relook-scheme] * {
  border-radius: 0 !important;
  text-shadow: none !important;
  box-shadow: none !important;
  background-image: none !important;
  text-decoration-color: var(--or-text-primary) !important;
  outline-color: var(--or-accent) !important;
}

/* Remove ALL gradients, transitions, and transforms from non-essential elements */
html[data-outlook-relook-scheme] button,
html[data-outlook-relook-scheme] [role="button"],
html[data-outlook-relook-scheme] [role="tab"],
html[data-outlook-relook-scheme] [role="menuitem"],
html[data-outlook-relook-scheme] [role="option"],
html[data-outlook-relook-scheme] [role="listitem"],
html[data-outlook-relook-scheme] [role="treeitem"] {
  transition: none !important;
  animation: none !important;
}

/* ============================================================
   SURFACES — flatten everything to white (or black in dark)
   ============================================================ */
html[data-outlook-relook-scheme] body {
  background-color: var(--or-bg-primary) !important;
  color: var(--or-text-primary) !important;
}

html[data-outlook-relook-scheme] [role="banner"],
html[data-outlook-relook-scheme] header {
  background-color: var(--or-bg-primary) !important;
  border-bottom: 1px solid var(--or-border) !important;
}

html[data-outlook-relook-scheme] [role="navigation"],
html[data-outlook-relook-scheme] [role="complementary"] {
  background-color: var(--or-bg-primary) !important;
  border-right: 1px solid var(--or-border-light) !important;
}

html[data-outlook-relook-scheme] [role="listbox"],
html[data-outlook-relook-scheme] [role="list"] {
  background-color: var(--or-bg-primary) !important;
}

html[data-outlook-relook-scheme] [role="option"],
html[data-outlook-relook-scheme] [role="listitem"] {
  background-color: transparent !important;
  border-bottom: 1px solid var(--or-border-light) !important;
  color: var(--or-text-primary) !important;
}

html[data-outlook-relook-scheme] [role="option"]:hover,
html[data-outlook-relook-scheme] [role="listitem"]:hover {
  background-color: var(--or-bg-hover) !important;
}

html[data-outlook-relook-scheme] [role="option"][aria-selected="true"],
html[data-outlook-relook-scheme] [role="listitem"][aria-selected="true"] {
  background-color: var(--or-bg-selected) !important;
  border-left: 3px solid var(--or-accent) !important;
}

html[data-outlook-relook-scheme] [role="main"] {
  background-color: var(--or-bg-primary) !important;
}

/* ============================================================
   TOOLBAR — minimal, no background distinction
   ============================================================ */
html[data-outlook-relook-scheme] [role="toolbar"] {
  background-color: var(--or-bg-primary) !important;
  border-bottom: 1px solid var(--or-border-light) !important;
}

/* Toolbar buttons: text only, no background */
html[data-outlook-relook-scheme] [role="toolbar"] button,
html[data-outlook-relook-scheme] [role="toolbar"] [role="button"] {
  background-color: transparent !important;
  border: none !important;
  color: var(--or-text-primary) !important;
}

html[data-outlook-relook-scheme] [role="toolbar"] button:hover,
html[data-outlook-relook-scheme] [role="toolbar"] [role="button"]:hover {
  background-color: var(--or-bg-hover) !important;
}

/* ============================================================
   BUTTONS — understate everything
   ============================================================ */
html[data-outlook-relook-scheme] button,
html[data-outlook-relook-scheme] [role="button"] {
  background-color: transparent !important;
  color: var(--or-text-primary) !important;
}

html[data-outlook-relook-scheme] button:hover,
html[data-outlook-relook-scheme] [role="button"]:hover {
  background-color: var(--or-bg-hover) !important;
}

/* Links: accent color, no underline by default */
html[data-outlook-relook-scheme] a {
  color: var(--or-accent) !important;
  text-decoration: none !important;
}

html[data-outlook-relook-scheme] a:hover {
  text-decoration: underline !important;
  color: var(--or-accent-hover) !important;
}

/* ============================================================
   FOLDER PANE — text hierarchy only, no visual chrome
   ============================================================ */
html[data-outlook-relook-scheme] [role="treeitem"] {
  color: var(--or-text-secondary) !important;
  background-color: transparent !important;
}

html[data-outlook-relook-scheme] [role="treeitem"]:hover {
  color: var(--or-text-primary) !important;
  background-color: transparent !important;
  text-decoration: underline !important;
}

html[data-outlook-relook-scheme] [role="treeitem"][aria-selected="true"] {
  color: var(--or-text-primary) !important;
  font-weight: 700 !important;
  background-color: transparent !important;
}

/* ============================================================
   SECONDARY TEXT — clear hierarchy
   ============================================================ */
html[data-outlook-relook-scheme] [role="option"] span,
html[data-outlook-relook-scheme] [role="listitem"] span {
  color: var(--or-text-secondary) !important;
}

html[data-outlook-relook-scheme] time {
  color: var(--or-text-tertiary) !important;
  font-size: 11px !important;
  text-transform: uppercase !important;
  letter-spacing: 0.03em !important;
}

/* ============================================================
   DIALOGS & OVERLAYS
   ============================================================ */
html[data-outlook-relook-scheme] [role="dialog"],
html[data-outlook-relook-scheme] [role="alertdialog"] {
  background-color: var(--or-bg-primary) !important;
  border: 1px solid var(--or-border) !important;
}

/* ============================================================
   SCROLLBARS — thin, monochrome
   ============================================================ */
html[data-outlook-relook-scheme] ::-webkit-scrollbar {
  width: 4px !important;
  height: 4px !important;
}

html[data-outlook-relook-scheme] ::-webkit-scrollbar-track {
  background: transparent !important;
}

html[data-outlook-relook-scheme] ::-webkit-scrollbar-thumb {
  background: var(--or-text-tertiary) !important;
}