:root {
  color-scheme: light;


  /* Typography tokens */
  --font-sans: 'Inter', system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Ubuntu, Cantarell, "Noto Sans", Arial, sans-serif;
  --font-mono: "Space Mono", ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
  --font-display: 'Inter', system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  --font-handwriting: "Mynerve", cursive, sans-serif;
  --text-base: 14px;

  --line-base: 1.55;
  --letter-ui: 0.1px;
  --letter-title: -0.2px;




  --shadow: 0 8px 20px rgba(var(--text_main_rgb), 0.08);
  --shadow-soft: 8px 8px 20px 2px rgba(var(--text_main_rgb), 0.06);
  --shadow-hard: 8px 8px 20px 2px rgba(var(--text_main_rgb), 0.20);
  --shadow-hard-blue: 8px 8px 20px 2px rgba(var(--main_blue_rgb), 0.30);

  --focus: 0 0 0 3px rgba(var(--main_blue_rgb), 0.20);

  /* Brand / Actions - Neue Jobportal Palette */
  --main_blue: #2B4C7E;
  /* Sky Blue - Primary / CTA */
  --main_blue_hover: #3965A7;
  /* Darker Sky Blue */
  --main_blue_active: #2B4C7E;
  /* Even darker for active state */
  --main_blue_rgb: 43, 76, 126;
  --main_blue_hover_rgb: 57, 101, 167;
  --main_blue_active_rgb: 43, 76, 126;
  --white: #FFFFFF;


  /* Status */
  --success_green: #2ECC71;

  /* Accent (sparsam!) */
  --accent: #FF7453;
  /* Warm Orange für Highlights */
  --accent_hover: #FF9D85;
  --accent_rgb: 255, 116, 83;
  --accent_hover_rgb: 255, 157, 133;

  /* Warning / Error */
  --warning_red: #cf2525;
  /* Rotes Warnsignal */
  --warning_red_hover: #820000;
  --warning_red_rgb: 207, 37, 37;

  /* Backgrounds - Clean & Luftig */
  --bg_main: #E8F1F5;
  /* Cool White - Haupthintergrund */
  --bg_panel: #F8FBFD;
  /* Pure Light - Cards/Panels */
  --bg_muted: #E8F1F5;
  /* Cool White - Muted areas */
  --bg_surface_panel: #F8FBFD;
  /* Surface Panel */

  /* Text - Deep Navy Basis */
  --text_main: #11161f;
  /* Deep Navy - Haupttext */
  --text_secondary: #5A7FA6;
  /* Muted Steel - Sekundärtext */
  --text_placeholder: #5A7FA6;
  /* Muted Steel - Placeholder */
  --text_inverse: #FFFFFF;
  --text_main_rgb: 17, 22, 31;
  --text_secondary_rgb: 90, 127, 166;
  --text_inverse_rgb: 255, 255, 255;
  --radius: 0.5rem;

  /* Borders / UI */
  --border_main: rgba(var(--text_secondary_rgb), 0.3);
  /* Muted Steel mit Transparenz */
  --border_strong: #2D4263;
  /* Slate Blue für stärkere Borders */
  --border_strong_rgb: 45, 66, 99;

  /* Pixel system */
  --pixel_border: 2px;
  --pixel_gap: 12px;
}

/* Color utility classes */
.primary {
  color: var(--main_blue);
}

.success {
  color: var(--success_green);
}

.accent {
  color: var(--accent);
}

.bg-surface-panel {
  background: var(--bg_surface_panel);
}

/* Pixel UI: keep corners square on pixel components (avoid global * to not break 3rd party widgets) */
:where(.pixel-section, .pixel-card, .pixel-frame, .pixel-outline, .pixel-button, .pixel-input, .pixel-chip, button, input, select, textarea) {
  border-radius: var(--radius);
}

/* Allow explicitly round elements even with global pixel square rule */
.avatar-round {
  border-radius: 9999px !important;
}

/* Font definitions */
@font-face {
  font-family: 'Mynerve';
  src: url('/fonts/Mynerve/Mynerve-Regular.ttf') format('truetype');
}


@font-face {
  font-family: 'Space Mono';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('/fonts/space-mono/space-mono-latin-400-normal.woff2') format('woff2');
}

@font-face {
  font-family: 'Space Mono';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url('/fonts/space-mono/space-mono-latin-700-normal.woff2') format('woff2');
}

@font-face {
  font-family: 'Space Mono';
  font-style: italic;
  font-weight: 400;
  font-display: swap;
  src: url('/fonts/space-mono/space-mono-latin-400-italic.woff2') format('woff2');
}

@font-face {
  font-family: 'Space Mono';
  font-style: italic;
  font-weight: 700;
  font-display: swap;
  src: url('/fonts/space-mono/space-mono-latin-700-italic.woff2') format('woff2');
}


@tailwind base;
@tailwind components;
@tailwind utilities;

@layer components {

  input[type="text"],
  input[type="email"],
  input[type="password"],
  input[type="number"],
  input[type="file"],
  input[type="tel"],
  textarea,
  select {
    @apply pixel-input px-3 py-2;
  }
}

/* Mynerve */
body {
  font-family: var(--font-sans);
  font-size: var(--text-base);
  line-height: var(--line-base);
  letter-spacing: var(--letter-ui);
  background: var(--bg_main);
  color: var(--text_main);
}

/* Fallback rich text styling for saved WYSIWYG/AI content */
.prose {
  color: var(--text_main);
  line-height: 1.75;
}

.prose.prose-sm {
  font-size: 0.95rem;
}

.prose.prose-lg {
  font-size: 1.125rem;
}

.prose> :first-child {
  margin-top: 0;
}

.prose> :last-child {
  margin-bottom: 0;
}

.prose h1,
.prose h2,
.prose h3,
.prose h4,
.prose h5,
.prose h6 {
  font-family: var(--font-display);
  color: var(--text_main);
  font-weight: 700;
  letter-spacing: var(--letter-title);
  line-height: 1.15;
}

.prose h1 {
  font-size: clamp(2.1rem, 4vw, 2.8rem);
  margin: 0 0 1.5rem;
}

.prose h2 {
  font-size: clamp(1.6rem, 3vw, 2.1rem);
  margin: 2.5rem 0 1rem;
}

.prose h3 {
  font-size: clamp(1.25rem, 2.4vw, 1.6rem);
  margin: 2rem 0 0.85rem;
}

.prose h4,
.prose h5,
.prose h6 {
  font-size: 1.05rem;
  margin: 1.5rem 0 0.75rem;
}

.prose p,
.prose ul,
.prose ol,
.prose blockquote,
.prose pre,
.prose table,
.prose hr {
  margin: 1rem 0;
}

.prose ul,
.prose ol {
  padding-left: 1.5rem;
}

.prose ul {
  list-style: disc;
}

.prose ol {
  list-style: decimal;
}

.prose li+li {
  margin-top: 0.45rem;
}

.prose a {
  color: var(--main_blue);
  text-decoration: underline;
  text-decoration-thickness: 1.5px;
  text-underline-offset: 0.18em;
}

.prose a:hover {
  color: var(--main_blue_hover);
}

.prose strong,
.prose b {
  font-weight: 700;
  color: var(--text_main);
}

.prose em,
.prose i {
  font-style: italic;
}

.prose blockquote {
  padding-left: 1rem;
  border-left: 4px solid rgba(var(--main_blue_rgb), 0.28);
  color: var(--text_secondary);
  font-style: italic;
}

.prose code,
.prose pre {
  font-family: var(--font-mono);
}

.prose code {
  background: rgba(var(--text_main_rgb), 0.07);
  border-radius: 0.35rem;
  padding: 0.12rem 0.35rem;
  font-size: 0.92em;
}

.prose pre {
  background: #0f172a;
  color: #f8fafc;
  border-radius: 1rem;
  padding: 1rem 1.25rem;
  overflow-x: auto;
}

.prose pre code {
  background: transparent;
  color: inherit;
  padding: 0;
}

.prose table {
  width: 100%;
  border-collapse: collapse;
}

.prose th,
.prose td {
  border: 1px solid rgba(var(--text_secondary_rgb), 0.28);
  padding: 0.75rem;
  text-align: left;
}

.prose th {
  background: rgba(var(--main_blue_rgb), 0.06);
  font-weight: 700;
}

.prose img,
.prose iframe,
.prose video {
  max-width: 100%;
  height: auto;
  border-radius: 1rem;
}

.prose hr {
  border: 0;
  border-top: 1px solid rgba(var(--text_secondary_rgb), 0.25);
}

div#choices--skills-fw-item-choice-3:hover {
  background: var(--main_blue) !important;
  color: var(--text_inverse) !important;
}

/* Typography roles */
h1,
h2,
h3,
h4,
h5,
h6,
.pixel-hero__title {
  font-family: var(--font-display);
  letter-spacing: var(--letter-title);
}

.pixel-badge {
  font-family: var(--font-mono);
}

code,
pre,
kbd,
samp {
  font-family: var(--font-mono);
}

.pixel-grid {
  background-color: var(--bg_main);

}

/* stronger content separation */
.pixel-section,
.pixel-card,
.pixel-frame,
.pixel-outline {
  background: var(--bg_panel);
}

.border_main {
  border: 1px solid var(--border_main);
}

h1.pixel-hero-z.pixel-hero__title {
  z-index: 10;
}

#pixel-mask {
  width: 100%;
  height: 100%;
}

.pixel-hero {
  position: relative;
  overflow: hidden;
}



.pixel-frame {
  position: relative;
}

.pixel-outline:hover {
  filter: brightness(1.02);
}

/* global pixel defaults inside pixel layout */
.pixel-grid input,
.pixel-grid select {
  /* box-shadow: 0 6px 14px rgba(var(--text_main_rgb), 0.30); */
  background: var(--text_inverse);
  border: 1px solid rgba(var(--text_main_rgb), 0.12);
  outline: none;
}

.pixel-grid input:focus,
.pixel-grid select:focus {
  box-shadow: 0 0 0 3px rgba(var(--main_blue_rgb), 0.18), 0 6px 16px rgba(var(--text_main_rgb), 0.12);
}

.pixel-chip {
  background: var(--bg_muted);
  color: var(--text_main);
}

.accent {
  color: var(--accent);
}

div#autocomplete-dropdown {
  color: var(--text_main);
}

.pixel-input {
  background: var(--bg_panel);
  border: 1px solid var(--border_main);
}

.pixel-input:focus {
  outline: none;
  box-shadow: 0 0 0 3px rgba(var(--main_blue_rgb), 0.12), var(--shadow-soft);
}

.pixel-button {
  box-shadow: var(--shadow-soft);
  background: var(--main_blue);
  color: var(--text_inverse);
  text-transform: uppercase;
  letter-spacing: .10em;
  transition: transform .12s ease, box-shadow .12s ease, filter .12s ease;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 1px solid rgba(var(--text_inverse_rgb), 0.3);

}

.j365_button {
  background: var(--main_blue);
  color: var(--text_inverse);
  justify-content: center;
  border: 1px solid var(--main_blue);
  text-transform: uppercase;
  letter-spacing: .10em;
  transition: cubic-bezier(0.215, 0.610, 0.355, 1) .12s;
  display: inline-flex;
  align-items: center;
  font-size: 0.75rem;
  padding: 0.5rem 0.75rem;

}

.j365_button:hover {
  background: var(--main_blue_hover);
  transform: translateY(-2px);
  box-shadow: var(--shadow-hard-blue);
}

.j365_button_secondary {
  background: transparent;
  color: var(--main_blue);
  border: 1px solid var(--main_blue);
  justify-content: center;
  text-transform: uppercase;
  letter-spacing: .10em;
  transition: cubic-bezier(0.215, 0.610, 0.355, 1) .12s;
  display: inline-flex;
  align-items: center;
  font-size: 0.75rem;
  padding: 0.5rem 0.75rem;
}

.j365_button_secondary:hover {
  background: rgba(var(--main_blue_rgb), 0.08);
  border-color: var(--main_blue_hover);
  color: var(--main_blue_hover);
  transform: translateY(-1px);
}

.j365_button_accent {
  background: var(--accent);
  color: var(--text_inverse);
  justify-content: center;
  text-transform: uppercase;
  letter-spacing: .10em;
  transition: cubic-bezier(0.215, 0.610, 0.355, 1) .12s;
  display: inline-flex;
  align-items: center;
  font-size: 0.75rem;
  padding: 0.5rem 0.75rem;
}

.j365_button_accent:hover {
  background: var(--accent_hover);
  transform: translateY(-2px);
  box-shadow: var(--shadow-hard-accent);
}

.j365_button_light {
  /*background: #fff;*/
  color: var(--text_inverse);
  border: 1px solid var(--white);
  justify-content: center;
  text-transform: uppercase;
  letter-spacing: .10em;
  transition: cubic-bezier(0.215, 0.610, 0.355, 1) .12s;
  display: inline-flex;
  align-items: center;
}

.j365_button_light:hover {
  background: rgba(var(--bg_main), 0.06);
  color: var(--accent_hover);
  transform: translateY(-2px);
  box-shadow: var(--shadow-hard-blue);
}

.j365_button_warning {
  background: var(--warning_red);
  color: var(--text_inverse);
  justify-content: center;
  text-transform: uppercase;
  letter-spacing: .10em;
  transition: cubic-bezier(0.215, 0.610, 0.355, 1) .12s;
  display: inline-flex;
  align-items: center;
  font-size: 0.75rem;
  padding: 0.5rem 0.75rem;
}

.j365_button_warning:hover {
  background: var(--warning_red_hover);
  transform: translateY(-2px);
  box-shadow: 0 8px 20px 2px rgba(var(--warning_red_rgb), 0.30);
}

a {
  color: inherit;
}

a:hover {
  /*color: var(--main_blue); */
  text-decoration: none !important;

}

a.px-3.py-2.text-xs.uppercase.tracking-\[0\.2em\].pixel-button {
  color: var(--text_inverse);
}


h1,
h2,
h3 {
  letter-spacing: -0.02em;
}

/* improve default text contrast */
.pixel-hero__lead {
  color: var(--text_secondary);
}

/* badges & pills */
.pixel-badge {
  display: inline-flex;
  align-items: center;
  gap: .4rem;
  padding: .2rem .5rem;
  box-shadow: var(--shadow-soft);
  background: rgba(var(--main_blue_rgb), 0.08);
  text-transform: uppercase;
  letter-spacing: .12em;
  font-size: .65rem;
}

/* cards / panels */
.pixel-card {
  background: var(--bg_panel);
  box-shadow: var(--shadow-soft);
  position: relative;
}

/* modern layout helpers */
.pixel-container {
  max-width: 1350px;
  margin: 0 auto;
  padding: 40px 0;
}

@media (max-width: 768px) {
  .pixel-container {
    max-width: 100%;
    padding: 10px;
  }
}

@media (max-width: 480px) {
  .pixel-container {
    padding: 15px;
  }
}

.pixel-page {
  display: grid;
  gap: 2rem;
}

.pixel-section {
  background: var(--bg_panel);
  box-shadow: var(--shadow-hard);
  padding: 2rem;
}

.pixel-card {
  background: var(--bg_panel);
  /*  box-shadow: var(--shadow-soft); */
}

.pixel-card {
  padding: 1.25rem;
  /* box-shadow: var(--shadow-hard); */
}

a.flex.items-center.justify-center.px-3.py-2.text-xs.uppercase.tracking-\[0\.2em\].pixel-outline.hover\:underline:hover {
  background-color: var(--main_blue_hover) !important;
  color: var(--text_inverse);
}

.pixel-hero {
  display: grid;
  gap: 1.5rem;
}

.pixel-hero__title {
  font-size: clamp(1.6rem, 2vw + 1rem, 2.6rem);
  font-weight: 700;
  letter-spacing: .08em;
  text-transform: none;
}

.pixel-hero__lead {
  color: var(--text_secondary);
  max-width: 56ch;
}


header {
  position: relative;
  z-index: 10;
  background: var(--main_blue);
  /*  padding-bottom: 25px; */
  /* Extra space for shadow */
}

body.is-home header {
  background: var(--header-home-bg, unset);
  border-bottom-color: var(--header-home-border, transparent);
  backdrop-filter: var(--header-home-blur, none);
  -webkit-backdrop-filter: var(--header-home-blur, none);
  /* Schneller, hochwertiger Glassmorphism-Übergang.
     Die JS-gesetzten --header-home-* Variablen ändern die computed values
     von background-color / border-color / backdrop-filter, daher greifen
     diese Transitions auch bei Custom-Property-Updates. */
  transition:
    background-color 400ms cubic-bezier(0.4, 0, 0.2, 1),
    border-color 400ms cubic-bezier(0.4, 0, 0.2, 1),
    box-shadow 400ms cubic-bezier(0.4, 0, 0.2, 1),
    backdrop-filter 400ms cubic-bezier(0.4, 0, 0.2, 1),
    -webkit-backdrop-filter 400ms cubic-bezier(0.4, 0, 0.2, 1);
}

body.is-home header.is-scrolled {
  background: var(--header-home-bg, rgba(var(--main_blue_rgb), 0.6));
  border-bottom-color: var(--header-home-border, rgba(255, 255, 255, 0.1));
  backdrop-filter: var(--header-home-blur, blur(12px));
  -webkit-backdrop-filter: var(--header-home-blur, blur(12px));
  /* Mehrschichtige, subtile Tiefe (Sonderfall Header, konsistent mit Palette) */
  box-shadow: var(--header-home-shadow, 0 10px 15px -3px rgba(0, 0, 0, 0.05), 0 4px 6px -2px rgba(0, 0, 0, 0.025));
}

.pixel-hero-background {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 850px;
  z-index: -1;
  /* Farba pozadia zjednotená s ľavou stranou gradientu */
  background-color: var(--text_main);

  background-image:
    linear-gradient(to right, rgba(var(--text_main_rgb), 1) 33%, rgba(var(--text_main_rgb), 0.8) 45%, rgba(var(--text_main_rgb), 0.5) 60%, rgba(var(--text_main_rgb), 0.4) 75%, rgba(var(--text_main_rgb), 0.1) 100%),
    var(--hero-bg-image, url(/backgrounds/bratislava.jpg));

  background-repeat: no-repeat;
  background-position: center, right center;

  /* TRIK: cover pre gradient, 75% šírka a 100% výška pre obrázok */
  background-size: cover, 75% 100%;
}

/* Header on accent background */
header .pixel-outline {
  background: transparent;
  border-color: rgba(var(--text_inverse_rgb), 0.3);
  color: var(--text_inverse);
}

header .pixel-button {
  background: rgba(var(--text_inverse_rgb), 0.1);
  color: var(--text_inverse);
  border: 1px solid rgba(var(--text_inverse_rgb), 0.3);
}

header .pixel-button:hover {
  background: rgba(var(--text_inverse_rgb), 0.2);
}

header .header-page-link {
  position: relative;
  display: inline-flex;
  align-items: center;
  color: rgba(var(--text_inverse_rgb), 0.78);
  text-decoration: none;
  transition: color .18s ease;
}

header .header-page-link::after {
  content: "";
  position: absolute;
  left: 50%;
  bottom: -2px;
  width: 100%;
  height: 3px;
  background: var(--accent);
  border-radius: 999px;
  transform: translateX(-50%) scaleX(0);
  transform-origin: center;
  transition: transform .22s ease;
}

header .header-page-link:hover,
header .header-page-link:focus-visible {
  color: var(--text_inverse);
}

header .header-page-link:hover::after,
header .header-page-link:focus-visible::after {
  transform: translateX(-50%) scaleX(1);
}

header .pixel-outline:hover {
  background: rgba(var(--text_inverse_rgb), 0.1);
}

/* TipTap editor styling (replaces former Quill styles) */
[data-tiptap-wrapper] .ProseMirror {
  min-height: 220px;
  font-family: 'Space Mono', ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, 'Liberation Mono', 'Courier New', monospace;
  color: var(--text_main);
  padding: 14px 16px;
  outline: none;
}

[data-tiptap-wrapper] .ProseMirror p.is-editor-empty:first-child::before {
  content: attr(data-placeholder);
  float: left;
  color: var(--text_secondary);
  pointer-events: none;
  height: 0;
}

a.pixel-button.px-4.py-2.text-xs:hover {
  color: var(--text_inverse);
}

/* brand */
.brand365 {
  display: inline-flex;
  align-items: center;
  gap: .75rem;
  text-decoration: none;
  color: inherit;
  position: relative;
}

/* Education select category headings */
select option.edu-category {
  font-weight: 700;
  background-color: var(--main_blue);
  color: var(--text_inverse);
}




/* === MOBILE OVERFLOW FIX === */
@media (max-width: 1024px) {

  html,
  body {
    width: 100%;
    max-width: 100%;
    overflow-x: hidden;
  }
}

img,
svg,
video,
canvas {
  max-width: 100%;
  height: auto;
}

* {
  box-sizing: border-box;
}

/* === HEADER LOGO: mobile size + reserve width to prevent shifting (typing logo) === */
/* Passe die Selector-Namen an, falls deine Klassen anders heissen */
.z-99 {
  z-index: 99 !important;
}

.pixel-logo,
.site-logo {
  display: inline-block;
  white-space: nowrap;
  flex: 0 0 auto;
}

/* wichtig: Platz reservieren, damit "Schreib"-Animation Buttons nicht verschiebt */
.pixel-logo,
.site-logo {
  width: 11.5ch;
  /* ca. "365jobs.sk" + etwas Reserve */
  max-width: 60vw;
  overflow: hidden;
}

/* Mobile: Logo kleiner */
@media (max-width: 480px) {

  .pixel-logo,
  .site-logo {
    font-size: clamp(18px, 6vw, 30px);
    line-height: 1;
  }

  /* rechte Nav (Login/Register) darf nicht umbrechen */
  .pixel-nav,
  .site-nav {
    display: flex;
    align-items: center;
    gap: 10px;
    flex: 0 0 auto;
    white-space: nowrap;
  }
}

/* Logo image variants: show white logo on dark header, dark logo on light/transparent header */
.brand365-logo {
  height: clamp(28px, 4vw, 35px);
  width: auto;
  display: inline-block;
  vertical-align: middle;
}

/* Default: header has colored background -> use white logo */
header .logo-on-dark {
  display: inline-block;
}

header .logo-on-white {
  display: none;
}

/* When header is on a light/transparent background (e.g. body.is-home) show white logo */
body.is-home header .logo-on-dark {
  display: inline-block;
}

body.is-home header .logo-on-white {
  display: none;
}

/* rechte Buttons dürfen nicht umbrechen und nicht weggedrückt werden */
header .pixel-outline {
  flex: 0 0 auto;
  white-space: nowrap;
}

/* Mobile: Logo kleiner */
@media (max-width: 480px) {
  header .brand365 {
    font-size: clamp(18px, 6vw, 30px);
    line-height: 1;
  }
}

/* === MOBILE: remove hero SVG, keep blue background === */
@media (max-width: 480px) {
  .pixel-hero-background {
    background-image: linear-gradient(135deg,
        rgba(var(--text_main_rgb), 0.85) 0%,
        rgba(var(--border_strong_rgb), 0.70) 50%,
        rgba(var(--text_secondary_rgb), 0.40) 100%) !important;
  }
}



/* === MOBILE RESPONSIVE FIXES === */
@media (max-width: 768px) {
  .pixel-hero-background {
    height: 500px;
    background-size: cover, cover !important;
    background-position: center, center !important;
  }

  .pixel-hero__title {
    font-size: 1.75rem !important;
    line-height: 1.2;
  }

  .pixel-hero__lead {
    font-size: 0.95rem;
  }

  .pixel-container {
    padding: 20px 0;
  }
}

@media (max-width: 480px) {
  .pixel-hero__title {
    font-size: 1.5rem !important;
  }

  header .pixel-outline,
  header .pixel-button {
    font-size: 0.7rem;
    padding: 0.5rem 0.75rem;
    height: auto;
  }

}

/* Mobile helper: remove the effect of `px-6 pb-20` on small screens */
@media (max-width: 768px) {
  .pixel-mobile {
    padding-left: 2px !important;
    padding-right: 2px !important;
    padding-bottom: 10px !important;
  }
}

/* Shake animation for notification bell */
@keyframes shake-bell {

  0%,
  100% {
    transform: rotate(0deg);
  }

  15% {
    transform: rotate(-15deg);
  }

  30% {
    transform: rotate(15deg);
  }

  45% {
    transform: rotate(-15deg);
  }

  60% {
    transform: rotate(15deg);
  }

  75% {
    transform: rotate(-8deg);
  }

  85% {
    transform: rotate(8deg);
  }
}

#dropdownNotificationsButton:hover svg {
  animation: shake-bell 1s ease-in-out 1;
  transform-origin: top center;
}


/* LIQUID GLASS DESIGN SYSTEM */
.pixel-glass-panel,
.pixel-glass-card,
.pixel-glass-outline {
  background: rgba(var(--text_inverse_rgb), 0.4);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  border: 1px solid rgba(var(--text_inverse_rgb), 0.5);
  border-radius: 0.5rem;
  box-shadow: 0 4px 30px rgba(var(--text_main_rgb), 0.05);
  transition: all 0.3s ease;
}

.pixel-glass-panel:hover,
.pixel-glass-card:hover {
  background: rgba(var(--text_inverse_rgb), 0.5);
  border: 1px solid rgba(var(--text_inverse_rgb), 0.7);
  box-shadow: 0 8px 32px rgba(var(--text_main_rgb), 0.08);
}

.pixel-glass-input {
  background: rgba(var(--text_inverse_rgb), 0.5);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  border: 1px solid rgba(var(--text_inverse_rgb), 0.6);
  border-radius: 1rem;
  padding: 0.75rem 1rem;
  transition: all 0.2s ease;
  color: var(--text_main);
}

.pixel-glass-input:focus {
  background: rgba(var(--text_inverse_rgb), 0.8);
  border-color: var(--accent);
  outline: none;
  box-shadow: 0 0 0 3px rgba(var(--accent_rgb), 0.2);
}

.pixel-glass-button {
  background: rgba(var(--text_inverse_rgb), 0.6);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  border: 1px solid rgba(var(--text_inverse_rgb), 0.8);
  border-radius: 1rem;
  padding: 0.75rem 1.5rem;
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  transition: all 0.2s ease;
  cursor: pointer;
  box-shadow: 0 4px 15px rgba(var(--text_main_rgb), 0.05);
}

.pixel-glass-button:hover {
  background: rgba(var(--text_inverse_rgb), 0.8);
  transform: translateY(-2px);
  box-shadow: 0 6px 20px rgba(var(--text_main_rgb), 0.08);
}

.pixel-glass-button:active {
  transform: translateY(0);
}

.liquid-glass {
  background-color: rgba(var(--text_inverse_rgb), 0.05);
  backdrop-filter: blur(8px) saturate(140%);
  -webkit-backdrop-filter: blur(8px) saturate(140%);
  min-height: 35rem;
  border: 1px solid rgba(var(--text_inverse_rgb), 0.15);
  box-shadow: 0 8px 32px 0 rgba(var(--text_main_rgb), 0.37);
}

.liquid-glass-short {
  background-color: rgba(var(--text_inverse_rgb), 0.05);
  backdrop-filter: blur(8px) saturate(140%);
  -webkit-backdrop-filter: blur(8px) saturate(140%);
  border: 1px solid rgba(var(--text_inverse_rgb), 0.15);
  box-shadow: 0 8px 32px 0 rgba(var(--text_main_rgb), 0.37);
}


/* Compact liquid glass style for buttons */
.liquid-glass-btn {
  background: linear-gradient(135deg, rgba(var(--text_inverse_rgb), 0.15), rgba(var(--text_inverse_rgb), 0.30));
  backdrop-filter: blur(6px) saturate(120%);
  -webkit-backdrop-filter: blur(6px) saturate(120%);
  border: 1px solid rgba(255, 255, 255, 0.20);
  box-shadow: 0 6px 18px rgba(var(--main_blue_rgb), 0.04);
  border-radius: 0.6rem;
  color: inherit;
  padding: 0.5rem 0.9rem;
  transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
  cursor: pointer;
}

.liquid-glass-btn:hover {
  background: linear-gradient(135deg, rgba(var(--text_inverse_rgb), 0.25), rgba(var(--text_inverse_rgb), 0.45));
  border: 1px solid rgba(255, 255, 255, 0.40);
  box-shadow: 0 8px 24px rgba(var(--main_blue_rgb), 0.12), inset 0 0 0 1px rgba(255, 255, 255, 0.1);
  transform: translateY(-2px);
}

.liquid-glass-btn:active {
  transform: translateY(0);
  background: linear-gradient(135deg, rgba(var(--text_inverse_rgb), 0.20), rgba(var(--text_inverse_rgb), 0.35));
}


/* Generischer "Pill" Hover-Effekt für alle Menü-Einträge */
.pixel-frame .hover\:bg-neutral-tertiary-medium:hover {
  background-color: var(--text_inverse) !important;
  color: var(--main_blue) !important;
}

.pixel-frame .hover\:bg-neutral-tertiary-medium:hover * {
  color: var(--main_blue) !important;
}

/* Roter Hover für Logout/Danger Buttons */
.pixel-frame .text-fg-danger.hover\:bg-neutral-tertiary-medium:hover {
  background-color: var(--accent) !important;
  color: var(--text_inverse) !important;
}

.pixel-frame .text-fg-danger.hover\:bg-neutral-tertiary-medium:hover * {
  color: var(--text_inverse) !important;
}

a.inline-flex.items-center.w-full.p-2.hover\:bg-neutral-tertiary-medium.hover\:text-heading.rnded-m:hover {
  color: var(--main_blue);
  background: var(--text_inverse);
}

/* Shake animation for notification bell */
@keyframes shake-bell {

  0%,
  100% {
    transform: rotate(0deg);
  }

  15% {
    transform: rotate(-15deg);
  }

  30% {
    transform: rotate(15deg);
  }

  45% {
    transform: rotate(-15deg);
  }

  60% {
    transform: rotate(15deg);
  }

  75% {
    transform: rotate(-8deg);
  }

  85% {
    transform: rotate(8deg);
  }
}

#dropdownNotificationsButton:hover svg {
  animation: shake-bell 1s ease-in-out 1;
  transform-origin: top center;
}

.dashboard-heading-sx {
  font-size: 14px;
  font-weight: 500;
  letter-spacing: -0.02em;
}

.dashboard-text-sx {
  font-size: 12px;
  font-weight: normal;
  margin-top: 5px;
  color: rgba(var(--text_secondary_rgb), 0.90)
}

.ts-control {
  border-radius: 0.75rem;
}


/* TipTap editor styling */
[data-tiptap-editor] .ProseMirror {
  min-height: 220px;
  outline: none;
}

[data-tiptap-editor] .ProseMirror p.is-editor-empty:first-child::before {
  content: attr(data-placeholder);
  float: left;
  color: #94a3b8;
  pointer-events: none;
  height: 0;
}

[data-tiptap-editor] .ProseMirror mark {
  background-color: inherit;
}

[data-tiptap-editor] .ProseMirror sub {
  vertical-align: sub;
  font-size: 0.75em;
}

[data-tiptap-editor] .ProseMirror sup {
  vertical-align: super;
  font-size: 0.75em;
}

[data-tiptap-editor] .ProseMirror h1 {
  font-size: 2em;
  font-weight: bold;
  margin: 0.67em 0;
}

[data-tiptap-editor] .ProseMirror h2 {
  font-size: 1.5em;
  font-weight: bold;
  margin: 0.75em 0;
}

[data-tiptap-editor] .ProseMirror h3 {
  font-size: 1.17em;
  font-weight: bold;
  margin: 0.83em 0;
}

[data-tiptap-editor] .ProseMirror img {
  max-width: 100%;
  height: auto;
  margin: 1em 0;
}

[data-tiptap-editor] .ProseMirror table {
  border-collapse: collapse;
  width: 100%;
  margin: 1em 0;
}

[data-tiptap-editor] .ProseMirror table td,
[data-tiptap-editor] .ProseMirror table th {
  border: 1px solid #cbd5e1;
  padding: 0.5em;
}

[data-tiptap-editor] .ProseMirror table th {
  background-color: #f1f5f9;
  font-weight: bold;
}

[data-tiptap-editor] .ProseMirror iframe {
  max-width: 100%;
  margin: 1em 0;
}

/* TomSelect styles matching */
.ts-wrapper .ts-control {
  font-family: 'Inter', -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif !important;
  font-size: 14px !important;
  font-weight: 500 !important;
  border-radius: 0.75rem !important;
  border-color: rgb(203 213 225) !important;
  background: #fff !important;
  min-height: 42px;
  padding: .5rem .75rem !important;
  box-shadow: none !important;
  transition: all 0.2s ease !important;
}

.ts-wrapper.focus .ts-control {
  border-color: var(--accent) !important;
  box-shadow: 0 0 0 3px rgba(var(--accent_rgb), 0.2) !important;
}

.ts-control input {
  font-family: 'Inter', -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif !important;
  font-size: 14px !important;
  font-weight: 500 !important;
  color: #1e293b !important;
}

.ts-dropdown {
  font-family: 'Inter', -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif !important;
  border-color: #cbd5e1 !important;
  border-radius: 0.75rem !important;
  box-shadow: 0 10px 25px -5px rgba(0, 0, 0, 0.1), 0 8px 10px -6px rgba(0, 0, 0, 0.1) !important;
  padding: 6px;
  font-size: 14px !important;
  z-index: 50 !important;
  background-color: #ffffff !important;
}

.ts-dropdown .option {
  font-family: 'Inter', -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif !important;
  border-radius: 0.5rem;
  padding: .5rem .75rem !important;
  font-size: 14px !important;
  font-weight: 500 !important;
  margin-bottom: 2px;
  transition: all 0.15s ease;
}

.ts-dropdown .optgroup-header {
  font-family: 'Inter', -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif !important;
  font-size: 11px !important;
  font-weight: 700 !important;
  text-transform: uppercase !important;
  letter-spacing: 0.05em !important;
  color: #64748b !important;
  padding: 6px 10px !important;
  background-color: #f8fafc !important;
  border-radius: 0.375rem !important;
  margin: 4px 0 2px 0 !important;
}

.ts-dropdown .option:hover,
.ts-dropdown .option.active {
  background-color: rgba(var(--accent_rgb), 0.08) !important;
  color: var(--accent) !important;
}

/* TomSelect multi-select pills & badges */
.ts-wrapper.multi .ts-control > div {
  background: #f1f5f9 !important;
  color: #1e293b !important;
  border: 1px solid #cbd5e1 !important;
  border-radius: 0.5rem !important;
  padding: 3px 8px !important;
  font-size: 13px !important;
  font-weight: 500 !important;
  display: inline-flex !important;
  align-items: center !important;
  gap: 6px !important;
  margin: 2px 4px 2px 0 !important;
}

.ts-wrapper.multi .ts-control > div.active {
  background: #e2e8f0 !important;
  border-color: #94a3b8 !important;
}

.ts-wrapper.multi .ts-control > div .remove {
  color: #64748b !important;
  font-size: 14px !important;
  line-height: 1 !important;
  border-left: 1px solid #cbd5e1 !important;
  padding-left: 6px !important;
  text-decoration: none !important;
  transition: color 0.15s ease !important;
}

.ts-wrapper.multi .ts-control > div .remove:hover {
  color: #ef4444 !important;
}

/* TomSelect single-select styling & clear button */
.ts-wrapper.single .ts-control {
  background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 20 20'%3e%3cpath stroke='%2364748b' stroke-linecap='round' stroke-linejoin='round' stroke-width='1.5' d='M6 8l4 4 4-4'/%3e%3c/svg%3e") !important;
  background-position: right 0.75rem center !important;
  background-repeat: no-repeat !important;
  background-size: 1.25em 1.25em !important;
  padding-right: 2.25rem !important;
}

.ts-wrapper.single .ts-control > .item {
  color: #0f172a !important;
  font-size: 14px !important;
  font-weight: 500 !important;
}

.ts-wrapper.single .clear-button {
  right: 2rem !important;
  color: #94a3b8 !important;
  font-size: 1.1rem !important;
  line-height: 1 !important;
  top: 50% !important;
  transform: translateY(-50%) !important;
  transition: color 0.15s ease !important;
}

.ts-wrapper.single .clear-button:hover {
  color: #ef4444 !important;
}

/* Zamedzenie nechceného auto-zoomu na mobilných zariadeniach (iOS Safari / Android) pre všetky formulárové polia na celom webe */
@media screen and (max-width: 768px) {
  input:not([type="checkbox"]):not([type="radio"]):not([type="range"]):not([type="color"]):not([type="hidden"]),
  select,
  textarea,
  .ts-control input {
    font-size: 16px !important;
  }
}