/* Maskinpunkten theme for Postiz 2.25.1. Existing layout and behavior are retained. */
:root {
  --mp-yellow: #ffd200;
  --mp-graphite: #252624;
  --mp-paper: #f5f3ee;
  --mp-muted: #62655f;
  --mp-line: #d5d6ce;
  --mp-focus: #215fa6;
}
:root body.dark, :root body.light {
  --new-btn-primary: var(--mp-yellow);
  --new-ai-btn: var(--mp-yellow);
  --new-textItemFocused: var(--mp-graphite);
  --new-boxFocused: var(--mp-yellow);
  --new-table-text-focused: var(--mp-yellow);
  --color-forth: var(--mp-yellow);
  --color-seventh: var(--mp-yellow);
  --color-custom4: var(--mp-yellow);
  --color-custom7: var(--mp-yellow);
  --color-custom28: #fff4b8;
  --color-custom29: var(--mp-graphite);
  --color-custom41: #fff4b8;
  --color-custom45: var(--mp-yellow);
  --color-custom50: var(--mp-graphite);
  --color-custom51: var(--mp-focus);
  --popup-color: rgba(37, 38, 36, 0.22);
  --menu-shadow: 0 8px 24px rgba(37, 38, 36, 0.14);
}
:root body.light {
  color-scheme: light;
  --new-back-drop: var(--mp-graphite);
  --new-settings: #eeece5;
  --new-border: var(--mp-line);
  --new-bgColor: var(--mp-paper);
  --new-bgColorInner: #fff;
  --new-bgLineColor: var(--mp-line);
  --new-sep: var(--mp-line);
  --new-textItemBlur: var(--mp-muted);
  --new-textColor: 37 38 36;
  --new-blockSeparator: #eeece5;
  --new-btn-simple: #eeece5;
  --new-btn-text: var(--mp-graphite);
  --new-box-hover: #f5f3ee;
  --new-table-border: var(--mp-line);
  --new-table-header: #f5f3ee;
  --new-table-text: var(--mp-muted);
  --new-table-text-focused: var(--mp-graphite);
  --new-big-strips: #f5f3ee;
  --new-col-color: #eeece5;
  --new-menu-dots: var(--mp-muted);
  --color-primary: var(--mp-paper);
  --color-secondary: #fff;
  --color-text: var(--mp-graphite);
  --color-third: #fff;
  --color-gray: var(--mp-muted);
  --color-input: #f5f3ee;
  --color-input-text: var(--mp-muted);
  --color-table-border: var(--mp-line);
  --color-custom17: var(--mp-graphite);
  --color-custom18: var(--mp-muted);
  --color-custom30: #eeece5;
  --color-custom53: var(--mp-muted);
  --color-custom54: #8b8e85;
}
:root body.dark {
  color-scheme: dark;
  --new-bgColor: #1c1d1b;
  --new-bgColorInner: var(--mp-graphite);
  --new-bgLineColor: #41433e;
  --new-border: #55584f;
  --new-sep: #55584f;
  --new-textItemBlur: #c3c5bc;
  --new-textColor: 245 243 238;
  --new-btn-text: #f5f3ee;
  --new-settings: #30322d;
  --new-table-border: #55584f;
  --new-table-header: #30322d;
  --new-table-text: #c3c5bc;
  --new-btn-simple: #41433e;
  --new-box-hover: #30322d;
  --new-col-color: #41433e;
  --new-blockSeparator: #41433e;
  --new-menu-dots: #c3c5bc;
  --color-primary: #1c1d1b;
  --color-secondary: var(--mp-graphite);
  --color-third: var(--mp-graphite);
  --color-gray: #c3c5bc;
  --color-input-text: #c3c5bc;
  --color-custom53: #c3c5bc;
  --color-custom54: #8b8e85;
}
/* The existing navigation rail keeps its dimensions and mobile drawer. */
body :has(> #left-menu) {
  background-color: var(--mp-graphite);
  --new-textColor: 245 243 238;
  --new-textItemBlur: #c3c5bc;
  --new-textItemFocused: var(--mp-graphite);
  --new-boxFocused: var(--mp-yellow);
}
#left-menu svg[viewBox="0 0 60 60"] {
  background: url("/mp-branding/logo.png") left center / auto 60px no-repeat;
}
#left-menu svg[viewBox="0 0 60 60"] > * { visibility: hidden; }
/* Use the original full wordmark on the existing login logo slot. */
svg[viewBox="0 0 101 33"] {
  width: 242px;
  height: 60px;
  max-width: 100%;
  background: url("/mp-branding/logo.png") left center / contain no-repeat;
}
svg[viewBox="0 0 101 33"] > * { visibility: hidden; }
body :is(.bg-btnPrimary, .bg-ai, .bg-forth, .bg-seventh, .bg-customColor7) {
  color: var(--mp-graphite) !important;
}
body :is(.bg-btnPrimary, .bg-ai, .bg-forth, .bg-seventh, .bg-customColor7):hover {
  background-color: #efc600;
}
body :is(.bg-btnPrimary, .bg-ai, .bg-forth, .bg-seventh, .bg-customColor7) :is(.text-white, .text-btnText) {
  color: var(--mp-graphite);
}
/* Destructive controls keep their red background and contrasting text. */
body [class*="!bg-red"] { color: #fff !important; }
body :is(.text-btnPrimary, .text-forth, .text-seventh, .text-customColor4) {
  color: var(--mp-graphite);
}
body.dark :is(.text-btnPrimary, .text-forth, .text-seventh, .text-customColor4) {
  color: var(--mp-yellow);
}
body.light .bg-newTableTextFocused.text-black { color: #fff; }
img[src="/no-channels-colors.svg"] { filter: grayscale(1); }
body :is(button, a, input, select, textarea, [role="button"], [tabindex], [contenteditable="true"]):focus-visible {
  outline: 2px solid var(--mp-focus) !important;
  outline-offset: 3px;
}
body.dark :is(button, a, input, select, textarea, [role="button"], [tabindex], [contenteditable="true"]):focus-visible {
  outline-color: var(--mp-yellow) !important;
}
body #left-menu :is(button, a, [role="button"], [tabindex]):focus-visible {
  outline-color: var(--mp-yellow) !important;
}
::selection { background: var(--mp-yellow); color: var(--mp-graphite); }
input::placeholder, textarea::placeholder { color: var(--new-textItemBlur); opacity: 1; }
body :is(input, textarea, [contenteditable="true"]) { caret-color: var(--mp-focus); }
body.dark :is(input, textarea, [contenteditable="true"]) { caret-color: var(--mp-yellow); }
/* Login uses hardcoded upstream backgrounds; recolor them without moving anything. */
body .bg-\[\#0E0E0E\] { background-color: #1c1d1b; }
body .bg-\[\#1A1919\] { background-color: var(--mp-graphite); }
body .text-\[\#FC69FF\] { color: var(--mp-yellow); }
@media (prefers-reduced-motion: reduce) {
  body :is(.bg-btnPrimary, .bg-ai, .bg-forth) { transition: none; }
}