/* Oasis theme on Frappe Desk AND on website pages (the service-request form, login) -- Ray, 2026-09-03: "themes in desk to match what we have
   in oasis" and "the completely white background and black text and subdued text box
   colors is hard on the eyes and hard to see."

   Frappe Desk paints from CSS custom properties declared on :root / [data-theme="light"]
   (frappe/public/scss/common/css_variables.scss). This file, loaded AFTER the desk
   bundle via app_include_css, re-points those tokens at the same --oasis-* variables
   the SPA uses, so Desk follows the user's active Grid Theme. The defaults below are the
   "Felix" built-in (oasis/themes/builtins.py); oasis_theme.js then overwrites them from
   oasis.api.themes.get_active for the signed-in user. Dark mode is left to Frappe.

   The eye-strain fix is structural, not a single colour: the PAGE is a warm off-white,
   CARDS and INPUTS are white with a visible warm border, TEXT is the Felix near-black
   rather than #000. Inputs stop disappearing into the page because page != input. */

:root,
[data-theme="light"] {
  /* the Blue built-in, derived the way rules.py derives page colours -- overwritten per
     user by oasis_theme.js (Ray, 2026-09-03: "for regular users, base it on the blue one") */
  --oasis-grid-font: "Segoe UI", system-ui, sans-serif;
  --oasis-grid-header-bg: #1976d2;
  --oasis-grid-header-fg: #ffffff;
  --oasis-grid-row-bg: #ffffff;
  --oasis-grid-row-fg: #000000;
  --oasis-grid-alt-bg: #e3f2fd;
  --oasis-grid-sel-bg: #1565c0;
  --oasis-grid-sel-fg: #ffffff;
  --oasis-grid-line: #bbdefb;
  --oasis-page-bg: #e3f2fd;
  --oasis-box-bg: #ffffff;
  --oasis-box-border: #bbdefb;
  --oasis-heading-fg: #000000;
  --oasis-text-fg: #000000;
  --oasis-muted-fg: #737373;
  --oasis-link-fg: #1f3d61;
  --oasis-input-border: #5e6f7e;

  /* Frappe's tokens, pointed at the theme */
  --bg-color: var(--oasis-page-bg);
  --fg-color: var(--oasis-box-bg);
  --card-bg: var(--oasis-box-bg);
  --navbar-bg: var(--oasis-grid-header-bg);
  --subtle-accent: var(--oasis-grid-alt-bg);
  --subtle-fg: color-mix(in srgb, var(--oasis-box-bg) 94%, var(--oasis-text-fg));
  --fg-hover-color: color-mix(in srgb, var(--oasis-box-bg) 92%, var(--oasis-text-fg));
  --highlight-color: var(--oasis-grid-sel-bg);
  --awesomebar-focus-bg: var(--oasis-box-bg);
  --modal-bg: var(--oasis-box-bg);
  --popover-bg: var(--oasis-box-bg);
  --toast-bg: var(--oasis-box-bg);

  /* inputs: they sit ON a card, so they take the PAGE tone, not the card's -- with the
     card's tone they vanish (seen on the service-request form, 2026-09-03). Controls
     that sit on a page-toned area take the card tone instead, for the same reason. */
  --control-bg: var(--oasis-page-bg);
  --control-bg-on-gray: var(--oasis-box-bg);
  --disabled-control-bg: var(--oasis-grid-alt-bg);
  --disabled-text-color: var(--oasis-muted-fg);
  /* Ted, 2026-09-10: input edges vanished on Blue -- the outline token, darker than the box border */
  --border-color: var(--oasis-input-border);
  --dark-border-color: color-mix(in srgb, var(--oasis-box-border) 70%, var(--oasis-text-fg));
  --table-border-color: var(--oasis-box-border);
  --border-primary: var(--oasis-heading-fg);

  /* text */
  --text-color: var(--oasis-text-fg);
  --heading-color: var(--oasis-heading-fg);
  --text-neutral: var(--oasis-text-fg);
  --text-muted: var(--oasis-muted-fg);
  --text-light: color-mix(in srgb, var(--oasis-muted-fg) 80%, var(--oasis-box-bg));
  --icon-stroke: var(--oasis-text-fg);
  --icon-fill-bg: var(--oasis-box-bg);

  /* the primary action stays Felix gold; buttons and links take the theme's header colour --
     DARKENED. Ray, 2026-09-09: on GreenWithEnvy (#87B771) and the built-in Felix (#FDF9F3)
     a primary button was the header colour with white text on it, near invisible on a
     Bulk Edit dialog. Frappe's own primary is gray-900; mixing the header colour into the
     Felix near-black keeps the theme's hue and guarantees white text reads on it. Links
     and focus rings take a lighter mix of the same. */
  --primary: #f7941f;
  --brand-color: #f7941f;
  --oasis-accent-dark: color-mix(in srgb, var(--oasis-grid-header-bg) 40%, #231f20);
  --primary-color: var(--oasis-link-fg);
  --btn-primary: var(--oasis-accent-dark);
  /* default buttons: the card tone with an edge, so they show on the page AND on a card */
  --btn-default-bg: var(--oasis-box-bg);
  --btn-default-hover-bg: color-mix(in srgb, var(--oasis-box-bg) 88%, var(--oasis-text-fg));
  --btn-ghost-hover-bg: var(--oasis-grid-alt-bg);
  --scrollbar-thumb-color: color-mix(in srgb, var(--oasis-box-border) 60%, var(--oasis-text-fg));
  --scrollbar-track-color: var(--oasis-grid-alt-bg);
}

/* the list/grid header rows take the theme's header colours */
[data-theme="light"] .list-row-head,
[data-theme="light"] .datatable .dt-header,
[data-theme="light"] .form-grid .grid-heading-row {
  background-color: var(--oasis-grid-header-bg);
  color: var(--oasis-grid-header-fg);
}
[data-theme="light"] .list-row:nth-child(even) {
  background-color: var(--oasis-grid-alt-bg);
}

/* An input is a box you type into: it always gets a visible edge, whatever the theme.
   Both Desk and the website bundle style inputs as .form-control. */
[data-theme="light"] .form-control,
:root:not([data-theme]) .form-control,
[data-theme="light"] .frappe-control .control-input .form-control {
  background-color: var(--control-bg);
  border: 1px solid var(--oasis-input-border);
}
/* Ted, 2026-09-10: Project (an Autocomplete inside .awesomplete) and Requested Start (a Date
   control) drew with no edge at all -- Frappe strips the border on those two wrappers. Every
   control on a form gets the outline, whatever wrapper it sits in. */
[data-theme="light"] .frappe-control input.form-control,
[data-theme="light"] .frappe-control textarea.form-control,
[data-theme="light"] .frappe-control select.form-control,
[data-theme="light"] .awesomplete > input.form-control,
:root:not([data-theme]) .frappe-control input.form-control,
:root:not([data-theme]) .frappe-control textarea.form-control,
:root:not([data-theme]) .frappe-control select.form-control,
:root:not([data-theme]) .awesomplete > input.form-control {
  border: 1px solid var(--oasis-input-border) !important;
}
[data-theme="light"] .form-control:focus,
:root:not([data-theme]) .form-control:focus {
  border-color: var(--oasis-heading-fg);
  box-shadow: 0 0 0 2px color-mix(in srgb, var(--oasis-heading-fg) 20%, transparent);
}

/* Ray, 2026-09-08: no hearts on the list rows -- Frappe's "like" has no switch of its own.
   The comment count beside it stays: it is the number of notes on the record's timeline. */
.list-row .list-row-like,
.list-row-head .list-liked-by-me,
.list-row .list-row-like + .mx-2 {
  display: none !important;
}

/* Ray, 2026-09-09: a default button always has an edge -- without one it vanished into a
   page of the same tone */
.btn.btn-default,
.btn.btn-secondary {
  background-color: var(--btn-default-bg) !important;
  border: 1px solid var(--dark-border-color) !important;
}
.btn.btn-primary {
  color: #ffffff !important;
}

/* The Wiki app (Ray, 2026-09-09: "is it also themed?" -- it was not). Wiki paints from its
   own variables, set on `body` in wiki/public/scss/variables.scss, so the Frappe tokens
   above never reached it. Its pages alone carry `frappe-session-status` on <body>; that
   selector outranks the app's plain `body`, so the theme wins there and nowhere else. Dark
   mode is the Wiki's own choice and is left alone. */
body[frappe-session-status]:not([data-theme="dark"]):not(.dark) {
  --background-color: var(--oasis-box-bg);
  --text-color: var(--oasis-text-fg);
  --content-text-color: var(--oasis-text-fg);
  --sidebar-bg-color: var(--oasis-page-bg);
  --sidebar-text-color: var(--oasis-text-fg);
  --sidebar-hover-color: var(--oasis-grid-alt-bg);
  --sidebar-active-item-color: var(--oasis-box-bg);
  --active-item-color: var(--oasis-grid-alt-bg);
  --active-item-text-color: var(--oasis-heading-fg);
  --searchbar-color: var(--oasis-page-bg);
  --search-modal-bg-color: var(--oasis-box-bg);
  --navbar-dropdown-bg-color: var(--oasis-box-bg);
  --navbar-dropdown-hover-color: var(--oasis-grid-alt-bg);
  /* Ted, 2026-09-10: input edges vanished on Blue -- the outline token, darker than the box border */
  --border-color: var(--oasis-input-border);
  --table-border-color: var(--oasis-box-border);
  --table-header-color: var(--oasis-grid-alt-bg);
  --bqoute-bg-color: var(--oasis-grid-alt-bg);
  --bqoute-border-color: var(--oasis-box-border);
  --code-bg-color: var(--oasis-grid-alt-bg);
  --editor-background-color: var(--oasis-page-bg);
  --editor-line-no-bg-color: var(--oasis-grid-alt-bg);
  --admin-banner-bg: var(--oasis-grid-alt-bg);
  --admin-banner-text: var(--oasis-text-fg);
  --btn-primary-color: #ffffff;
  --btn-primary-bg-color: var(--oasis-accent-dark);
  --btn-primary-hover-bg-color: color-mix(in srgb, var(--oasis-accent-dark) 85%, #ffffff);
  --btn-primary-active-bg-color: var(--oasis-accent-dark);
  --btn-secondary-color: var(--oasis-text-fg);
  --btn-secondary-bg-color: var(--oasis-grid-alt-bg);
  --btn-secondary-hover-bg-color: color-mix(in srgb, var(--oasis-grid-alt-bg) 85%, var(--oasis-text-fg));
  --toc-hover-text-color: var(--oasis-heading-fg);
  --icon-stroke: var(--oasis-text-fg);
}

/* The Wiki's DARK mode (its sun / moon switch, kept in the browser). The Frappe tokens
   above are light-theme values on :root and reached the Wiki's inputs even in the dark --
   Ray, 2026-09-09: a pale Title box with pale text. In the dark the Frappe tokens follow the
   Wiki's own dark variables instead, so nothing from the light theme shows through. */
body.dark[frappe-session-status] {
  --bg-color: var(--background-color);
  --fg-color: var(--background-color);
  --card-bg: var(--background-color);
  --control-bg: var(--editor-background-color);
  --control-bg-on-gray: var(--editor-background-color);
  --disabled-control-bg: var(--editor-background-color);
  --subtle-fg: var(--editor-background-color);
  --subtle-accent: var(--editor-background-color);
  --modal-bg: var(--background-color);
  --popover-bg: var(--background-color);
  --heading-color: var(--text-color);
  --text-muted: var(--gray-400);
  --text-light: var(--gray-400);
  --dark-border-color: var(--border-color);
  --table-border-color: var(--border-color);
  --btn-primary: var(--btn-primary-bg-color);
  --btn-default-bg: var(--btn-secondary-bg-color);
  --btn-default-hover-bg: var(--btn-secondary-hover-bg-color);
  --icon-stroke: var(--text-color);
}
body.dark[frappe-session-status] .btn.btn-primary {
  color: var(--btn-primary-color) !important;
}

/* ── Wiki pages ──────────────────────────────────────────────────────────────
   Ray, 2026-09-15: a wiki page "looks very boring and nont organized. please format it better
   with headings that are different color and indention for some of the data in it."

   The headings are styled HERE rather than with inline colour in each page, for two reasons:
   every wiki page gets it (the SOPs too, not just the one he was looking at), and a page's
   markdown stays plain markdown that anybody can edit without knowing a hex code.

   The Felix standards' own heading colours: H1 gold, H2 the body near-black, H3 orange. Gold
   and orange both read on a light and a dark surface, and H2 takes the theme's heading token so
   it follows the rest.

   SELECTOR NOTE, measured rather than assumed: wiki.bundle.css loads AFTER this file and
   colours `.wiki-content h1..h6` itself. Hanging these rules off `.from-markdown` (two classes
   deep, so higher specificity) was tried first and measured: the headings stayed rgb(0,0,0),
   so the bundle is winning with something stronger than specificity. `!important` is therefore
   the honest tool here rather than the lazy one -- the same reason index.css uses it on
   `.oasis-link` -- and the specific selectors are kept so the intent still reads.
*/
.from-markdown .wiki-content h1,
.wiki-page-content .wiki-content h1 {
  color: #f7941f !important;
  font-weight: 700;
  border-bottom: 2px solid #f7941f !important;
  padding-bottom: 0.2em;
}
/* H2 takes the BRAND ink, not the theme's heading colour: measured on GreenWithEnvy, whose
   heading colour is #000000, that came out identical to the body text and Ray's whole point was
   "headings that are different color". Brown on a light theme, the Felix gold on a dark one. */
.from-markdown .wiki-content h2,
.wiki-page-content .wiki-content h2 {
  color: var(--oasis-brand-fg, #502e18) !important;
  font-weight: 700;
  margin-top: 1.6em;
  border-bottom: 1px solid var(--oasis-box-border, #e8e1d6) !important;
  padding-bottom: 0.15em;
}
.from-markdown .wiki-content h3,
.wiki-page-content .wiki-content h3 {
  color: #f15829 !important;
  font-weight: 700;
  margin-top: 1.2em;
}
.from-markdown .wiki-content h4,
.wiki-page-content .wiki-content h4 {
  color: var(--oasis-link-fg, #4a3a2a) !important;
  font-weight: 700;
}
/* indented blocks: a nested list keeps its step-in, and a blockquote reads as an aside rather
   than as a quotation -- which is what a "the masters live in Box" note actually is */
.from-markdown .wiki-content ul ul,
.from-markdown .wiki-content ol ul,
.from-markdown .wiki-content ul ol {
  margin-left: 1.25rem;
  margin-top: 0.25rem;
}
.from-markdown .wiki-content blockquote {
  border-left: 3px solid #f7941f;
  background: var(--oasis-grid-alt-bg, #faf6f0);
  margin: 0.75rem 0;
  padding: 0.5rem 0.9rem;
  color: var(--oasis-text-fg, #231f20) !important;
}
/* a phone number in an instruction is a thing to press on a phone */
.from-markdown .wiki-content a[href^="tel:"] {
  font-weight: 600;
  white-space: nowrap;
}