/* Foundry Design Language — EmonCMS Module Overrides
   Navigation, sidebar, content pages, footer, legacy variable bridge. */

/* ── Legacy Menu Variable Bridge ──
   menu.css uses these variables defined by .theme-* and .sidebar-* classes
   in emoncms-base.css. We redefine them using Foundry tokens so the menu
   works regardless of which legacy theme class is active.

   Specificity note: emoncms-base.css defines these under .theme-standard (0,1,0)
   and .sidebar-dark (0,1,0). We use html[data-theme] (0,1,1) to guarantee
   our bridge wins over the legacy class selectors. */
html[data-theme="light"] {
  --bg-menu-top: var(--f-surface);
  --bg-menu-top-hover: var(--f-surface-alt);
  --bg-menu-top-active: var(--f-surface-alt);
  --bg-body-login: var(--f-bg);
  --bg-menu-tr: var(--f-surface);
  --bg-menu-tr-hover: var(--f-surface-alt);

  --bg-l2: var(--f-surface-alt);
  --l2-border: var(--f-border);
  --l2-title: var(--f-muted);
  --l2-text: var(--f-body);
  --bg-l2-active: var(--f-surface);
  --bg-l2-hover: var(--f-surface);
  --bg-l3: var(--f-surface);
  --l3-border: var(--f-border);
  --l3-text: var(--f-body);
  --l3-title: var(--f-muted);
  --l3-text-active: var(--f-ember);
  --l3-text-hover: var(--f-ink);
}

html[data-theme="dark"] {
  --bg-menu-top: var(--f-surface);
  --bg-menu-top-hover: var(--f-surface-alt);
  --bg-menu-top-active: var(--f-surface-alt);
  --bg-body-login: var(--f-bg);
  --bg-menu-tr: var(--f-surface);
  --bg-menu-tr-hover: var(--f-surface-alt);

  --bg-l2: var(--f-surface-alt);
  --l2-border: var(--f-border);
  --l2-title: var(--f-muted);
  --l2-text: var(--f-body);
  --bg-l2-active: var(--f-surface);
  --bg-l2-hover: var(--f-surface);
  --bg-l3: var(--f-surface);
  --l3-border: var(--f-border);
  --l3-text: var(--f-body);
  --l3-title: var(--f-muted);
  --l3-text-active: var(--f-ember);
  --l3-text-hover: var(--f-ink);
}

/* ── Top Navigation ── */
.menu-top {
  background-color: var(--f-surface);
  border-bottom: 2px solid var(--f-ink);
  box-shadow: none;
}

.menu-l1 li div {
  font-family: var(--f-font-mono);
  font-size: 11px;
  letter-spacing: var(--f-tracking);
  text-transform: uppercase;
  color: var(--f-muted);
}
.menu-l1 li div:hover {
  background-color: var(--f-surface-alt);
  color: var(--f-ink);
}
.menu-l1 .active {
  background-color: var(--f-surface-alt);
}
.menu-l1 .active div {
  color: var(--f-ember);
}

/* Top-right user area */
.menu-tr li div {
  background-color: var(--f-surface);
  color: var(--f-muted);
}
.menu-tr li div:hover {
  background-color: var(--f-surface-alt);
}

/* ── Sidebar (L2) ── */
.menu-l2 {
  background-color: var(--f-surface-alt);
  box-shadow: none;
  border-right: 1px solid var(--f-border);
}

.menu-title-l2 {
  font-family: var(--f-font-mono);
  font-size: 10px;
  letter-spacing: var(--f-tracking);
  text-transform: uppercase;
  color: var(--f-muted);
}

.menu-l2 li div {
  color: var(--f-body);
}
.menu-l2 li div:hover {
  background-color: var(--f-surface);
  color: var(--f-ink);
}
.menu-l2 .active {
  background-color: var(--f-surface);
  border-left: 3px solid var(--f-ember);
}

.menu-l2 li {
  border-bottom: 1px solid var(--f-border);
}

#menu-l2-controls {
  background-color: var(--f-surface-alt);
  color: var(--f-muted);
}
#menu-l2-controls:hover {
  background-color: var(--f-surface);
}

/* ── Sub-sidebar (L3) ── */
.menu-l3 {
  background-color: var(--f-surface);
  box-shadow: none;
}
.menu-l3 li {
  border-bottom: 1px solid var(--f-border);
}
.menu-l3 li a {
  color: var(--f-body);
}
.menu-l3 li a:hover {
  background-color: var(--f-surface-alt);
  color: var(--f-ink);
}
.menu-l3 .active {
  color: var(--f-ember);
}

/* ── Content Container ── */
.content-container {
  background-color: var(--f-bg);
  color: var(--f-body);
}

/* ── Footer ── */
#footer {
  background-color: var(--f-surface);
  border-top: 2px solid var(--f-ink);
  font-family: var(--f-font-mono);
  font-size: 10px;
  letter-spacing: var(--f-tracking);
  text-transform: uppercase;
  color: var(--f-muted);
}
#footer a {
  color: var(--f-ember);
}
#footer a:hover {
  color: var(--f-rust);
}
#footer span {
  color: var(--f-muted);
}

/* ── Login Page ── */
.body-login {
  background-color: var(--f-bg);
}

/* Login card is a .well wrapping the form; .well override in
   foundry-components.css gives it surface-alt + border. Override
   here for the login-specific Foundry card treatment. */
.body-login .well {
  background-color: var(--f-surface);
  border: 1px solid var(--f-border-hard);
}

/* ── Dashboard & Graph ── */
/* Note: Dashboard list and graph page selectors depend on installed module
   markup which may vary. The rules below target known classes from the
   dashboard widget.css file. Additional selectors may be needed after
   visual smoke testing with the actual running EmonCMS instance. */

/* ── Visualization background ── */
html[data-theme="dark"] {
  --bg-vis-graph-color: var(--f-bg);
}
html[data-theme="light"] {
  --bg-vis-graph-color: var(--f-bg);
}

/* ── Admin Pages ── */
.admin-container {
  background-color: var(--f-bg);
}
.admin-container .content-container {
  background-color: var(--f-bg);
}

/* Admin collapse sections */
.node .accordion-toggle {
  background-color: var(--f-surface-alt);
  color: var(--f-ink);
}
.node .accordion-toggle:hover {
  background-color: var(--f-surface);
}
.node .collapse > * {
  background-color: var(--f-surface);
  border-bottom: 1px solid var(--f-border);
}
.node .collapse > *:hover {
  background-color: var(--f-surface-alt);
}
.node .collapse > *:before {
  background: var(--f-ember);
}

/* ── User Profile ── */
.account-item {
  color: var(--f-body);
}

/* ── Log Windows (admin, emonhub) ── */
.log {
  background-color: var(--f-surface-alt);
  color: var(--f-body);
  border: 1px solid var(--f-border);
}

/* ── Snackbar ── */
#snackbar {
  background-color: var(--f-raised);
  color: var(--f-ink);
  border: 1px solid var(--f-border-hard);
}

/* ── Dropdown SVG Icons ── */
.dropdown-menu svg.icon {
  fill: var(--f-body);
}

/* ── Gravatar Area ── */
a.grav-container img.grav {
  border-color: var(--f-border);
}
.no-gravitar a.grav-container {
  background: var(--f-muted);
  border-color: var(--f-border);
}
.gravitar a.grav-container:hover {
  background: var(--f-surface-alt);
}

/* ── Device/Input View ── */
.device-key,
.device-schedule,
.device-configure,
.device-last-updated {
  border-left: 1px solid var(--f-border);
  color: var(--f-body);
}
.device-key:hover,
.device-configure:hover {
  background-color: var(--f-surface-alt);
}

/* ── Existing Utility Class Overrides ── */
/* Override hardcoded colors in emoncms-base.css utility classes */
.text-light { color: var(--f-muted) !important; }
.text-dark { color: var(--f-ink) !important; }
.bg-dark { background: var(--f-surface-alt) !important; }
.bg-light { background: var(--f-surface) !important; }
.bg-white { background: var(--f-surface) !important; }

/* ── Controls (dashboard designer affix bar) ── */
.controls.affix:before {
  background: var(--f-surface);
}

/* ════════════════════════════════════════════════════════════════
   MODULE CONFLICT OVERRIDES
   These override hardcoded hex colors in module-specific CSS files
   that load after our Foundry files on individual pages.
   ════════════════════════════════════════════════════════════════ */

/* ── Graph Page (graph.css overrides) ── */
#sidebar-wrapper {
  background-color: var(--f-surface-alt);
}
#page-content-wrapper {
  background-color: var(--f-bg);
}
.feed-options {
  background-color: var(--f-surface-alt);
}
.feed-options-header {
  background-color: var(--f-surface);
  color: var(--f-ink);
}
.feed-options-title:link,
.feed-options-title:focus {
  color: var(--f-ink);
}
#group-table .user-name {
  background-color: var(--f-surface);
  color: var(--f-ink);
}
.feed-tag {
  background-color: var(--f-surface-alt);
  color: var(--f-body);
}
.feed {
  background-color: var(--f-surface);
  color: var(--f-body);
}
table#feeds.table thead th {
  border-top-color: var(--f-border);
  color: var(--f-muted);
}
table#feeds.table tbody tr > * {
  border-color: var(--f-border);
}

/* ── Feed List Page (feedlist_view.php inline style overrides) ── */
#deleteFeedModalSelectedItems {
  background-color: var(--f-surface-alt) !important;
}
.node .accordion-toggle {
  border-bottom-color: var(--f-border);
}

/* ── Input View (input_view.css overrides) ── */
#noprocesses .alert {
  border-bottom-color: var(--f-border);
}
.node-feeds .node-feed.selected,
.node-feeds .node-feed.ui-selected {
  background-color: var(--f-surface-alt) !important;
}

/* ── Admin (admin_styles.css overrides) ── */
.admin-container table {
  border-color: var(--f-border);
}
.admin-container .badge-danger,
.admin-container .badge-important {
  background-color: var(--f-ember);
  border-color: var(--f-ember);
  color: var(--f-bg);
}
.admin-container dt {
  border-top-color: var(--f-border);
}
.admin-container dd {
  border-top-color: var(--f-border);
}
.admin-container tr:hover td {
  background-color: var(--f-surface-alt);
}

/* ── Dashboard Widget Containers (widget.css overrides) ── */
.Container-White {
  background: var(--f-surface) !important;
  border-color: var(--f-border) !important;
}
.Container-Grey {
  background: var(--f-surface-alt) !important;
  border-color: var(--f-border) !important;
}
.Container-Black {
  background: var(--f-bg) !important;
  border-color: var(--f-border) !important;
}
.Container-Dark {
  background: var(--f-surface-alt) !important;
  border-color: var(--f-border) !important;
}
.Container-Card {
  background: var(--f-surface) !important;
  border: 1px solid var(--f-border) !important;
}
.Container-Bordered {
  background: var(--f-surface) !important;
  border-color: var(--f-border-hard) !important;
}
.Container-BlueLine {
  border-color: var(--f-ember) !important;
}

/* ── Dashboard Editor (dashboardeditor.css overrides) ── */
.scrollable-menu {
  background-color: var(--f-raised);
}

/* ── Bootstrap Input Addons (white backgrounds in dark mode) ── */
.input-append .add-on,
.input-prepend .add-on {
  background-color: var(--f-surface-alt);
  border-color: var(--f-border);
  color: var(--f-body);
  text-shadow: none;
}
.input-append input,
.input-prepend input,
.input-append select,
.input-prepend select {
  background-color: var(--f-surface);
  border-color: var(--f-border);
  color: var(--f-ink);
}

/* ── Bootstrap Switch (graph page toggle) ── */
.bootstrap-switch {
  border-color: var(--f-border);
}
.bootstrap-switch .bootstrap-switch-handle-off.bootstrap-switch-default {
  background-color: var(--f-surface-alt);
  color: var(--f-body);
}
.bootstrap-switch .bootstrap-switch-label {
  background-color: var(--f-surface);
}

/* ── Flot Graph Plot Area ── */
.flot-base {
  background-color: var(--f-surface) !important;
}

/* ── Bootstrap-Datetimepicker (white backgrounds) ── */
.datetimepicker {
  background-color: var(--f-raised);
  border-color: var(--f-border-hard);
  color: var(--f-ink);
}
.datetimepicker table tr td,
.datetimepicker table tr th {
  color: var(--f-body);
}
.datetimepicker table tr td.active,
.datetimepicker table tr td.active:hover {
  background-color: var(--f-ember);
  color: var(--f-bg);
}
.datetimepicker table tr td span:hover {
  background-color: var(--f-surface-alt);
}
.datetimepicker thead tr:first-child th:hover {
  background-color: var(--f-surface-alt);
}

/* ── Global form element overrides ──
   Bootstrap 2.3.2 sets white backgrounds on inputs/selects via base element
   selectors and .input-* classes. Module CSS loads after Foundry and compounds
   the problem. We use !important here because there is no cascade position
   that reliably wins against all module + Bootstrap combinations. */
input[type="text"],
input[type="password"],
input[type="email"],
input[type="number"],
input[type="search"],
input[type="url"],
input[type="tel"],
textarea {
  background-color: var(--f-surface) !important;
  color: var(--f-ink) !important;
  border-color: var(--f-border) !important;
}

select {
  background-color: var(--f-surface) !important;
  color: var(--f-ink) !important;
  border-color: var(--f-border) !important;
}

/* ── Graph Feed Controls Table ── */
#feed-controls td {
  background-color: transparent;
  color: var(--f-body);
}
#feed-controls select,
#feed-controls input {
  background-color: var(--f-surface) !important;
  color: var(--f-ink) !important;
  border: 1px solid var(--f-border) !important;
}
#feed-controls .btn {
  background-color: var(--f-surface-alt) !important;
  color: var(--f-ink) !important;
  border-color: var(--f-border) !important;
}

/* Feed options header ("Feeds in view" / "Show Statistics") */
.feed-options-header {
  background-color: var(--f-surface) !important;
  color: var(--f-ink) !important;
}
.feed-options-header .btn {
  background-color: var(--f-surface-alt) !important;
  border-color: var(--f-border) !important;
  color: var(--f-ink) !important;
}

/* ── Input addon groups (Start/End/Type/Y-axis controls) ── */
.input-append,
.input-prepend {
  background-color: transparent;
}
.input-append .add-on,
.input-prepend .add-on {
  background-color: var(--f-surface-alt) !important;
  background-image: none !important;
  border-color: var(--f-border) !important;
  color: var(--f-body) !important;
  text-shadow: none !important;
}
.input-append input,
.input-append select,
.input-prepend input,
.input-prepend select {
  background-color: var(--f-surface) !important;
  color: var(--f-ink) !important;
  border-color: var(--f-border) !important;
}

/* ── Color input (graph feed color picker) ── */
input[type="color"] {
  background-color: transparent !important;
  border: 1px solid var(--f-border) !important;
  padding: 2px !important;
}

/* ── Checkbox labels area (Show/missing data/legend/feed tag) ── */
.checkbox, .radio {
  color: var(--f-body);
}

/* ── Table within feed options ── */
.feed-options table,
#feed-options-table {
  background-color: transparent;
}
.feed-options table td,
.feed-options table th,
#feed-options-table td,
#feed-options-table th {
  color: var(--f-body);
  border-color: var(--f-border);
}

/* ── Bootstrap .table striping/hover in dark mode ── */
.table-striped tbody > tr:nth-child(odd) > td,
.table-striped tbody > tr:nth-child(odd) > th {
  background-color: var(--f-surface-alt);
}
.table-hover tbody tr:hover > td,
.table-hover tbody tr:hover > th {
  background-color: var(--f-surface-alt);
}
.table th, .table td {
  border-top-color: var(--f-border);
}
.table-bordered {
  border-color: var(--f-border);
}
.table-bordered th,
.table-bordered td {
  border-color: var(--f-border);
}