/*
 * Outlook Relook — Material Flat Theme
 * Clean, subtle elevation, comfortable density.
 */

/* ============================================================
   LIGHT VARIANT
   ============================================================ */
html[data-outlook-relook-scheme="light"] {
  --or-bg-primary: #ffffff;
  --or-bg-secondary: #f5f5f5;
  --or-bg-tertiary: #eeeeee;
  --or-bg-hover: #e0e0e0;
  --or-bg-selected: #e3f2fd;
  --or-text-primary: #212121;
  --or-text-secondary: #424242;
  --or-text-tertiary: #757575;
  --or-text-disabled: #9e9e9e;
  --or-border: #e0e0e0;
  --or-border-light: #eeeeee;
  --or-accent: var(--or-accent-override, #1976d2);
  --or-accent-hover: var(--or-accent-override, #1565c0);
  --or-shadow: 0 1px 3px rgba(0, 0, 0, 0.08);
  --or-shadow-elevated: 0 2px 6px rgba(0, 0, 0, 0.12);
}

/* ============================================================
   DARK VARIANT
   ============================================================ */
html[data-outlook-relook-scheme="dark"] {
  --or-bg-primary: #121212;
  --or-bg-secondary: #1e1e1e;
  --or-bg-tertiary: #252525;
  --or-bg-hover: #333333;
  --or-bg-selected: #1a3a5c;
  --or-text-primary: #e0e0e0;
  --or-text-secondary: #b0b0b0;
  --or-text-tertiary: #808080;
  --or-text-disabled: #5a5a5a;
  --or-border: #333333;
  --or-border-light: #2a2a2a;
  --or-accent: var(--or-accent-override, #64b5f6);
  --or-accent-hover: var(--or-accent-override, #90caf9);
  --or-shadow: 0 1px 3px rgba(0, 0, 0, 0.3);
  --or-shadow-elevated: 0 2px 6px rgba(0, 0, 0, 0.4);
}

/* ============================================================
   TYPOGRAPHY
   ============================================================ */
html[data-outlook-relook-scheme] body,
html[data-outlook-relook-scheme] [role="main"],
html[data-outlook-relook-scheme] [role="navigation"],
html[data-outlook-relook-scheme] [role="complementary"],
html[data-outlook-relook-scheme] [role="banner"],
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: 'Roboto', system-ui, -apple-system, sans-serif !important;
  letter-spacing: 0.01em !important;
}

/* ============================================================
   SURFACES & BACKGROUNDS
   ============================================================ */
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;
  box-shadow: var(--or-shadow) !important;
}

html[data-outlook-relook-scheme] [role="navigation"],
html[data-outlook-relook-scheme] [role="complementary"] {
  background-color: var(--or-bg-secondary) !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: var(--or-bg-primary) !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;
}

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

/* ============================================================
   MATERIAL ROUNDING (4px on interactive elements only)
   ============================================================ */
html[data-outlook-relook-scheme] button,
html[data-outlook-relook-scheme] [role="button"],
html[data-outlook-relook-scheme] input,
html[data-outlook-relook-scheme] select,
html[data-outlook-relook-scheme] [role="tab"],
html[data-outlook-relook-scheme] [role="menuitem"] {
  border-radius: 4px !important;
}

/* Cards / elevated surfaces */
html[data-outlook-relook-scheme] [role="dialog"],
html[data-outlook-relook-scheme] [role="alertdialog"] {
  border-radius: 8px !important;
  box-shadow: var(--or-shadow-elevated) !important;
}

/* ============================================================
   BUTTONS & INTERACTIVE
   ============================================================ */
html[data-outlook-relook-scheme] button,
html[data-outlook-relook-scheme] [role="button"] {
  box-shadow: none !important;
  background-image: none !important;
  transition: background-color 0.15s ease !important;
}

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

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

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

/* ============================================================
   TOOLBAR
   ============================================================ */
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: var(--or-shadow) !important;
}

/* ============================================================
   FOLDER PANE
   ============================================================ */
html[data-outlook-relook-scheme] [role="treeitem"] {
  color: var(--or-text-secondary) !important;
  border-radius: 4px !important;
  margin: 1px 4px !important;
}

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

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

/* ============================================================
   SECONDARY TEXT
   ============================================================ */
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;
}