/*
 * Outlook Relook — Brutalist Theme
 *
 * Stark. Monospace. High contrast. Maximum information density.
 * Borders and text, almost no fills. Inverted hover states.
 * Inspired by terminal UIs, Craigslist, and concrete architecture.
 *
 * Scoped to specific elements — never uses `*` selectors.
 */

/* ============================================================
   LIGHT VARIANT
   ============================================================ */
html[data-outlook-relook-scheme="light"] {
  --or-bg-primary: #ffffff;
  --or-bg-secondary: #ffffff;
  --or-bg-tertiary: #ffffff;
  --or-bg-hover: #000000;
  --or-bg-selected: #000000;
  --or-text-primary: #000000;
  --or-text-secondary: #333333;
  --or-text-tertiary: #666666;
  --or-text-disabled: #999999;
  --or-text-inverted: #ffffff;
  --or-border: #000000;
  --or-border-light: #cccccc;
  --or-accent: var(--or-accent-override, #000000);
  --or-accent-hover: var(--or-accent-override, #333333);
  --or-shadow: none;
}

/* ============================================================
   DARK VARIANT
   ============================================================ */
html[data-outlook-relook-scheme="dark"] {
  --or-bg-primary: #000000;
  --or-bg-secondary: #000000;
  --or-bg-tertiary: #0a0a0a;
  --or-bg-hover: #ffffff;
  --or-bg-selected: #ffffff;
  --or-text-primary: #ffffff;
  --or-text-secondary: #cccccc;
  --or-text-tertiary: #888888;
  --or-text-disabled: #555555;
  --or-text-inverted: #000000;
  --or-border: #ffffff;
  --or-border-light: #333333;
  --or-accent: var(--or-accent-override, #ffffff);
  --or-accent-hover: var(--or-accent-override, #cccccc);
  --or-shadow: none;
}

/* ============================================================
   TYPOGRAPHY — Monospace on text elements only (not icons)
   ============================================================ */
html[data-outlook-relook-scheme] body,
html[data-outlook-relook-scheme] div,
html[data-outlook-relook-scheme] span,
html[data-outlook-relook-scheme] p,
html[data-outlook-relook-scheme] h1,
html[data-outlook-relook-scheme] h2,
html[data-outlook-relook-scheme] h3,
html[data-outlook-relook-scheme] h4,
html[data-outlook-relook-scheme] h5,
html[data-outlook-relook-scheme] h6,
html[data-outlook-relook-scheme] a,
html[data-outlook-relook-scheme] li,
html[data-outlook-relook-scheme] td,
html[data-outlook-relook-scheme] th,
html[data-outlook-relook-scheme] label,
html[data-outlook-relook-scheme] input,
html[data-outlook-relook-scheme] button,
html[data-outlook-relook-scheme] select,
html[data-outlook-relook-scheme] textarea {
  font-family: 'SF Mono', 'Menlo', 'Monaco', 'Consolas', 'Liberation Mono', monospace !important;
  -webkit-font-smoothing: antialiased !important;
  -moz-osx-font-smoothing: grayscale !important;
  letter-spacing: 0 !important;
}

html[data-outlook-relook-scheme] body {
  font-size: 13px !important;
  line-height: 1.5 !important;
}

/* ============================================================
   BODY
   ============================================================ */
html[data-outlook-relook-scheme] body {
  background-color: var(--or-bg-primary) !important;
  color: var(--or-text-primary) !important;
}

/* ============================================================
   TOP BAR — Heavy bottom border
   ============================================================ */
html[data-outlook-relook-scheme] [role="banner"],
html[data-outlook-relook-scheme] header {
  background-color: var(--or-bg-primary) !important;
  border-bottom: 2px solid var(--or-border) !important;
  box-shadow: none !important;
}

/* ============================================================
   NAVIGATION / FOLDER PANE — Heavy right border
   ============================================================ */
html[data-outlook-relook-scheme] [role="navigation"] {
  background-color: var(--or-bg-primary) !important;
  border-right: 2px solid var(--or-border) !important;
}

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

/* ============================================================
   FOLDER TREE — Uppercase, dense, no fills
   ============================================================ */
html[data-outlook-relook-scheme] [role="treeitem"] {
  color: var(--or-text-primary) !important;
  background-color: transparent !important;
  text-transform: uppercase !important;
  font-size: 10px !important;
  letter-spacing: 0.04em !important;
  border-radius: 0 !important;
}

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

html[data-outlook-relook-scheme] [role="treeitem"][aria-selected="true"],
html[data-outlook-relook-scheme] [role="treeitem"][aria-current="true"] {
  font-weight: 900 !important;
  background-color: transparent !important;
  border-left: 3px solid var(--or-border) !important;
}

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

/* Message rows — borders, no fills */
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;
  border-radius: 0 !important;
}

/* Hover: INVERT — the brutalist signature move */
html[data-outlook-relook-scheme] [role="option"]:hover,
html[data-outlook-relook-scheme] [role="listitem"]:hover {
  background-color: var(--or-bg-hover) !important;
  color: var(--or-text-inverted) !important;
}

/* Also invert child spans on hover */
html[data-outlook-relook-scheme] [role="option"]:hover span,
html[data-outlook-relook-scheme] [role="listitem"]:hover span,
html[data-outlook-relook-scheme] [role="option"]:hover time,
html[data-outlook-relook-scheme] [role="listitem"]:hover time {
  color: var(--or-text-inverted) !important;
}

/* Selected: inverted */
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;
  color: var(--or-text-inverted) !important;
}

html[data-outlook-relook-scheme] [role="option"][aria-selected="true"] span,
html[data-outlook-relook-scheme] [role="listitem"][aria-selected="true"] span,
html[data-outlook-relook-scheme] [role="option"][aria-selected="true"] time,
html[data-outlook-relook-scheme] [role="listitem"][aria-selected="true"] time {
  color: var(--or-text-inverted) !important;
}

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

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

html[data-outlook-relook-scheme] [role="toolbar"] button,
html[data-outlook-relook-scheme] [role="toolbar"] [role="button"] {
  background-color: transparent !important;
  box-shadow: none !important;
  background-image: none !important;
  border-radius: 0 !important;
  text-transform: uppercase !important;
  font-size: 10px !important;
  letter-spacing: 0.03em !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;
  color: var(--or-text-inverted) !important;
}

/* ============================================================
   BUTTONS — Outlined, never filled
   ============================================================ */
html[data-outlook-relook-scheme] button,
html[data-outlook-relook-scheme] [role="button"] {
  box-shadow: none !important;
  background-image: none !important;
}

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

/* ============================================================
   LINKS — Same as text, underlined
   ============================================================ */
html[data-outlook-relook-scheme] a {
  color: var(--or-text-primary) !important;
  text-decoration: underline !important;
}

html[data-outlook-relook-scheme] a:hover {
  color: var(--or-text-inverted) !important;
  background-color: var(--or-bg-hover) !important;
  text-decoration: none !important;
}

/* ============================================================
   SECONDARY TEXT
   ============================================================ */
html[data-outlook-relook-scheme] [role="option"] span,
html[data-outlook-relook-scheme] [role="listitem"] span {
  color: var(--or-text-tertiary) !important;
  font-size: 11px !important;
}

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

/* ============================================================
   TABS
   ============================================================ */
html[data-outlook-relook-scheme] [role="tab"] {
  border-radius: 0 !important;
  box-shadow: none !important;
  background-image: none !important;
  text-transform: uppercase !important;
  font-size: 10px !important;
  letter-spacing: 0.04em !important;
}

html[data-outlook-relook-scheme] [role="tab"][aria-selected="true"] {
  border-bottom: 2px solid var(--or-border) !important;
  font-weight: 900 !important;
}

/* ============================================================
   DIALOGS — Bordered, no fill, no rounding
   ============================================================ */
html[data-outlook-relook-scheme] [role="dialog"],
html[data-outlook-relook-scheme] [role="alertdialog"] {
  background-color: var(--or-bg-primary) !important;
  border: 2px solid var(--or-border) !important;
  border-radius: 0 !important;
  box-shadow: 8px 8px 0 var(--or-border) !important;
}

html[data-outlook-relook-scheme] [role="menu"] {
  border-radius: 0 !important;
  border: 1px solid var(--or-border) !important;
  box-shadow: 4px 4px 0 var(--or-border) !important;
}

html[data-outlook-relook-scheme] [role="menuitem"] {
  border-radius: 0 !important;
}

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

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

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

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