/* MindCity look for Planka Community, injected by nginx (sites-available/planka.conf, sub_filter).
   Colours = the website's mc-* tokens (MindCity-WEB). Planka's CSS module classes carry a per-version hash
   (_wrapper_jdrq3_89): only Semantic UI classes, page structure and [class*="_name_"] prefixes are used.
   Check the login page, the top bar and a dialog after every Planka upgrade (README).
   Licence notices and the "Powered by PLANKA" line are left untouched (PLANKA Community License). */

:root {
  --mc-body-bg: #110c1a;
  --mc-surface-shell: #161023;
  --mc-surface: #211833;
  --mc-surface-input: #181020;
  --mc-border: rgba(228, 171, 255, 0.15);
  --mc-accent: #5eb3ff;
  --mc-accent-light: #add5ff;
  --mc-on-accent: #0e1018;
  --mc-text: rgba(255, 255, 255, 0.87);
  --mc-text-muted: rgba(255, 255, 255, 0.5);
}

/* Page background (home, settings); a project background image still covers it on boards */
body {
  background: var(--mc-body-bg) !important;
}

/* Top bar */
div:has(> .ui.large.inverted.menu) {
  background: var(--mc-surface-shell) !important;
  border-bottom: 1px solid var(--mc-border);
}

/* Primary actions */
.ui.primary.button,
.ui.positive.button,
.ui.primary.buttons .button,
.ui.positive.buttons .button {
  background-color: var(--mc-accent) !important;
  color: var(--mc-on-accent) !important;
}

.ui.primary.button:hover,
.ui.primary.button:focus,
.ui.positive.button:hover,
.ui.positive.button:focus {
  background-color: var(--mc-accent-light) !important;
  color: var(--mc-on-accent) !important;
}

.ui.primary.labeled.icon.button > .icon,
.ui.positive.labeled.icon.button > .icon {
  background-color: rgba(0, 0, 0, 0.08) !important;
}

/* Login page */
div:has(> .ui.middle.aligned.grid > .column [class*="_login_"]) {
  background: var(--mc-body-bg) !important;
}

.ui.middle.aligned.grid > .column[class*="_cover_"] {
  background-image: url("/mindcity/fond.jpg") !important;
  background-position: right bottom !important;
  background-size: cover !important;
}

.ui.middle.aligned.grid > .column[class*="_cover_"] > [class*="_coverOverlay_"] {
  background: transparent !important;
}

[class*="_login_"] .header,
[class*="_login_"] h1,
[class*="_login_"] h2,
[class*="_login_"] label,
[class*="_login_"] [class*="_inputLabel_"] {
  color: var(--mc-text) !important;
}

[class*="_login_"] .ui.form input {
  background: var(--mc-surface-input) !important;
  border-color: var(--mc-border) !important;
  color: var(--mc-text) !important;
}

[class*="_login_"] .ui.form input:focus {
  border-color: var(--mc-accent) !important;
}

[class*="_poweredBy_"],
[class*="_poweredBy_"] a {
  color: var(--mc-text-muted) !important;
}