/* ======================================================================
   MEETMATE – Basis-Styles (Organizer, Start, Auth, Misc)
   Hinweis:
   - Das Tabellen-/Kalender-Grid ist in style-grid.css.
   - Ergebnis-Styles sind in style-results.css.
   Ziel dieses Stylesheets:
   - Flat Cards (keine Rahmen/Schatten)
   - Theme-Typografie/-Farben erben
   - Buttons im Theme-Look (Option A)
   - Inputs im Theme-Look (keine harte MeetMate-Farben)
   - Keine fixen Breiten/Höhen – Container linksbündig, volle Breite
   ====================================================================== */

/* -----------------------------
   (A) Design-Variablen (minimal)
   Nur dort verwendet, wo absolut nötig.
   ----------------------------- */
:root {
  --mm-border: #e5e7eb;            /* sanfte Hilfslinie/Fallback für Formen */
}

/* -----------------------------
   (A.1) MeetMate CSS-Tokens (Frontend)
   ----------------------------- */
.meetmate-scope {
  /* Neutrale Oberfläche */
  --mm-c-bg: #ffffff;
  --mm-c-text: currentColor;
  --mm-c-border: #e5e7eb;

  /* Primär/Brand – Integration mit Theme (kann serverseitig injiziert werden) */
  --mm-c-primary: var(--e-global-color-primary, #007cba);
  --mm-c-primary-contrast: var(--e-global-color-primary-contrast, #ffffff);

  /* Grid/Bänderung */
  --mm-grid-border: #d8dde2;
  --mm-grid-line: #b8c2ca;
  --mm-halfhour-line: #8a9ba8;
  --mm-head-bg: #fafafa;
  --mm-band-a: #f8fafc;
  --mm-band-b: #edf2f7;
  --mm-time-a: #f3f6f9;
  --mm-time-b: #e5ebf1;

  /* Ergebnis-/Matrixfarben */
  --mmr-head:  #a4b6c6;
  --mmr-best:  #485867;
  --mmr-white: #ffffff;

  /* Vote-Antworten */
  --mmv-yes-bg:   #e8f6ed;
  --mmv-yes-text: #0a5b2a;
  --mmv-maybe-bg: #fff6cc;
  --mmv-maybe-text:#6f5200;
  --mmv-no-bg:    #fde7e7;
  --mmv-no-text:  #6b0f0f;

  /* Favorit/Fokus */
  --mm-pick:       #47abdb;
  --mm-pick-dark:  #2c5aa0;

  /* Readonly-Slots */
  --mm-radius-slot: 10px;
  --mm-slot-readonly-bg: rgba(90, 110, 130, 0.18);
  --mm-slot-readonly-border: rgba(90, 110, 130, 0.28);
  --mm-slot-readonly-shadow: none;
  --mm-z-slot-readonly: 1;

  /* Button-Farben */
  --mm-btn-primary: #47abdb;
  --mm-btn-primary-hover: #3a8bc7;
  --mm-btn-secondary: #6b7280;
  --mm-btn-secondary-hover: #4b5563;
  --mm-btn-warning: #f59e0b;
  --mm-btn-warning-hover: #d97706;
  --mm-btn-danger: #c62828;
  --mm-btn-danger-hover: #a01e1e;
  --mm-btn-success: #10b981;
  --mm-btn-success-hover: #059669;

  /* Text-Farben */
  --mm-text-primary: #1f2937;
  --mm-text-secondary: #6b7280;
  --mm-text-muted: #9ca3af;
  --mm-text-inverse: #ffffff;

  /* Hintergrund-Farben */
  --mm-bg-primary: #ffffff;
  --mm-bg-secondary: #f9fafb;
  --mm-bg-tertiary: #f3f4f6;
  --mm-bg-hover: #f8fafc;

  /* Border-Farben */
  --mm-border-light: #e5e7eb;
  --mm-border-medium: #d1d5db;
  --mm-border-dark: #9ca3af;

  /* Status-Farben */
  --mm-status-success: #10b981;
  --mm-status-warning: #f59e0b;
  --mm-status-error: #ef4444;
  --mm-status-info: #3b82f6;

  /* Schatten */
  --mm-shadow-sm: 0 1px 2px 0 rgba(0, 0, 0, 0.05);
  --mm-shadow-md: 0 4px 6px -1px rgba(0, 0, 0, 0.1);
  --mm-shadow-lg: 0 10px 15px -3px rgba(0, 0, 0, 0.1);
}

/* -----------------------------
   (B) Grund-Layout-Container
   - Alles erbt Typografie/Farbe vom Theme
   - Keine eigenen Ränder/Schatten
   ----------------------------- */
.meetmate-scope,
.meetmate-scope * {
  font-family: inherit !important;
  color: inherit !important;
}

/* "Card" neutral/flat, volle Breite, linksbündig */
.meetmate-scope .mm-card {
  background: transparent !important;
  border: 0 !important;
  box-shadow: none !important;
  border-radius: 0 !important;
  padding: 0 !important;
  margin: 0 0 16px 0 !important;  /* dezentes vertikales Spacing */
  max-width: none !important;
  width: 100% !important;
  text-align: left !important;
}

/* Flexible Reihenabstände (Formular-/Zeilen-Layout) */
.meetmate-scope .mm-row { 
  display: flex; 
  gap: 16px !important; 
  flex-wrap: wrap; 
  margin-bottom: 20px !important;
}

/* Entfernt alte Inline-Flex-Breiten (z.B. 220px Basis) */
.meetmate-scope .mm-row > [style*="flex:0 0"] {
  flex: 1 1 auto !important;
}

/* Links – Theme regelt Farbe; ohne Unterstreichung */
.meetmate-scope a { 
  text-decoration: none !important;
}

/* Logout-Link im primären Blau */
.meetmate-scope .mm-link {
  color: var(--e-global-color-primary, #007cba) !important;
  text-decoration: none !important;
}

/* "Jetzt" nach Punkt groß schreiben */
.meetmate-scope .mm-help::first-letter {
  text-transform: uppercase;
}

/* === MeetMate Button Look (Frontend) – ohne Größen === */
.meetmate-scope :is(
  button,
  input[type="button"],
  input[type="submit"],
  input[type="reset"],
  a.mm-btn,
  a.mm-button,
  [role="button"],
  .mm-btn,
  .mm-button,
  .mm-navbtn,
  .mm-duration-btn,
  .mm-calendar-nav,
  .mm-slot-delete
) {
  display: inline-flex; 
  align-items: center; 
  justify-content: center; 
  gap: 0.5rem;
  background: #47abdb;
  color: #ffffff !important;          /* <-- Schrift WEISS, !important gegen inherit */
  border: 1px solid #ffffff;
  border-radius: 6px;
  text-decoration: none;
  transition: background 0.2s ease, color 0.2s ease, border-color 0.2s ease, box-shadow 0.15s ease;
}

/* :hover */
.meetmate-scope :is(
  button,
  input[type="button"],
  input[type="submit"],
  input[type="reset"],
  a.mm-btn,
  a.mm-button,
  [role="button"],
  .mm-btn,
  .mm-button,
  .mm-navbtn,
  .mm-duration-btn,
  .mm-calendar-nav,
  .mm-slot-delete
):hover {
  background: #ed726a !important;     /* Hover-Farbe */
  color: #ffffff !important;
  border-color: #ffffff;
}

/* :active (gleich wie normal) */
.meetmate-scope :is(
  button,
  input[type="button"],
  input[type="submit"],
  input[type="reset"],
  a.mm-btn,
  a.mm-button,
  [role="button"],
  .mm-btn,
  .mm-button,
  .mm-navbtn,
  .mm-duration-btn,
  .mm-calendar-nav,
  .mm-slot-delete
):active {
  background: #47abdb !important;
  color: #ffffff !important;
  border-color: #ffffff;
}

/* :focus-visible */
.meetmate-scope :is(
  button,
  input[type="button"],
  input[type="submit"],
  input[type="reset"],
  a.mm-btn,
  a.mm-button,
  [role="button"],
  .mm-btn,
  .mm-button,
  .mm-navbtn,
  .mm-duration-btn,
  .mm-calendar-nav,
  .mm-slot-delete
):focus-visible {
  outline: 2px solid #485867;
  outline-offset: 2px;
}

/* :visited für Links als Buttons – Schrift bleibt weiss */
.meetmate-scope a.mm-btn:visited,
.meetmate-scope a.mm-button:visited {
  color: #ffffff !important;
}

/* Disabled */
.meetmate-scope :is(button, .mm-btn, .mm-button)[disabled],
.meetmate-scope :is([role="button"])[aria-disabled="true"] {
  opacity: 0.6;
  cursor: not-allowed;
}

/* Inline-Button für Organizer-Actions (Größe bleibt) */
.meetmate-scope .mm-btn.inline {
  padding: 6px 10px;
  line-height: 1.2;
}

/* -----------------------------
   (D) Formulare – Theme-Look
   - Keine harten MeetMate-Outline/Box-Shadows
   - Theme entscheidet Fokusfarbe (per outline unten dezent)
   ----------------------------- */
.meetmate-scope .mm-input,
.meetmate-scope .mm-textarea,
.meetmate-scope input[type="text"],
.meetmate-scope input[type="email"],
.meetmate-scope input[type="date"],
.meetmate-scope input[type="password"],
.meetmate-scope select,
.meetmate-scope textarea {
  width: 100% !important;
  max-width: 100% !important;
  background: transparent !important;
  border: 1px solid color-mix(in srgb, currentColor 20%, transparent) !important;
  border-radius: 0 !important;
  padding: .6em .75em !important;
  box-shadow: none !important;
  outline: none !important;
  box-sizing: border-box;
}

/* Desktop: Eingabefelder 49% der Bildschirmbreite für optimale Anordnung */
@media (min-width: 1024px) {
  .meetmate-scope .mm-input,
  .meetmate-scope .mm-textarea,
  .meetmate-scope input[type="text"],
  .meetmate-scope input[type="email"],
  .meetmate-scope input[type="date"],
  .meetmate-scope input[type="password"],
  .meetmate-scope select,
  .meetmate-scope textarea {
    width: 49vw !important;
    max-width: 49vw !important;
  }
  
  /* Ausnahme: Auth-E-Mail-Feld auf Vote-Seite soll 300px breit sein */
  .meetmate-scope #mmv-auth-email {
    width: 300px !important;
    max-width: 300px !important;
  }
}

/* Fokus dezent – Theme-kompatibel, ohne harte Farbe */
.meetmate-scope .mm-input:focus,
.meetmate-scope .mm-textarea:focus,
.meetmate-scope input[type="text"]:focus,
.meetmate-scope input[type="email"]:focus,
.meetmate-scope input[type="date"]:focus,
.meetmate-scope input[type="password"]:focus,
.meetmate-scope select:focus,
.meetmate-scope textarea:focus {
  outline: 2px solid color-mix(in srgb, currentColor 25%, transparent) !important;
  outline-offset: 1px !important;
  box-shadow: none !important;
}

/* -----------------------------
   (E) Week-Navigation (Organizer/Vote)
   – Nur Layout, Farben/Familie vom Theme
   ----------------------------- */
.mm-weeknav {
  display: flex; 
  align-items: center; 
  justify-content: space-between;
  gap: 12px; 
  margin: 8px 0 12px;
}
.mm-weeknav .mm-navbtn {
  background: none;
  border: none;
  padding: 4px 8px;
  font-weight: 600;
  cursor: pointer;
  font-size: 1.2em;
  font-weight: bold;
}
.mm-weeklabel { font-weight: 600; }

/* -----------------------------
   (G) Actions-Bereich
   – Buttons + Counter in einer Zeile
   ----------------------------- */
.mm-actions {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-top: 16px;
  padding-top: 16px;
  border-top: 1px solid var(--mm-grid-border);
}

.mm-actions .mm-btn {
  margin: 0;
}

.mm-counter {
  font-size: 14px;
  color: var(--mm-text-secondary);
}

.mm-counter strong {
  color: var(--mm-text-primary);
  font-weight: 600;
}

/* -----------------------------
   (F) Start-/Auth-Container
   – Flat, Theme-gesteuert; nur spacing
   ----------------------------- */
.mm-start    { margin: 10px 0; }
.mm-start-grid { display: grid; gap: 18px; grid-template-columns: 1fr; }
@media (min-width: 860px) { .mm-start-grid{ grid-template-columns: 1fr 1fr; } }

.mm-auth { margin: 12px 0; }
.mm-auth .field { margin: 8px 0; }

/* Neutrale Hinweise (werden selten eingesetzt – Theme-like) */
.mm-auth .mm-notice {
  padding: 12px; 
  border-radius: 0; 
  border: 1px solid color-mix(in srgb, currentColor 20%, transparent);
  background: color-mix(in srgb, currentColor 8%, transparent);
  margin-bottom: 20px;
}
.mm-auth .mm-notice.ok {
  border-color: color-mix(in srgb, currentColor 25%, transparent);
  background: color-mix(in srgb, currentColor 12%, transparent);
  font-weight: 600;
}
.mm-auth .mm-notice.err {
  border-color: color-mix(in srgb, currentColor 25%, transparent);
  background: color-mix(in srgb, currentColor 12%, transparent);
  font-weight: 600;
}

/* -----------------------------
   (G) Überschriften
   – Keine harte Farbe/Größe; Theme führt
   – Nur minimaler vertikaler Rhythmus
   ----------------------------- */
.meetmate-scope h1,
.meetmate-scope h2,
.meetmate-scope h3,
.meetmate-scope h4 {
  margin: 0 0 .6em;
}
.meetmate-scope label {
  font-weight: 600;
  width: 100% !important;
  max-width: 100% !important;
  display: block;
}

/* Abstand zwischen Label-Text und Eingabefeld */
.meetmate-scope label .mm-input,
.meetmate-scope label .mm-textarea,
.meetmate-scope label input[type="text"],
.meetmate-scope label input[type="email"],
.meetmate-scope label input[type="date"],
.meetmate-scope label input[type="password"],
.meetmate-scope label select,
.meetmate-scope label textarea {
  margin-top: 5px !important;
}

/* Formulare responsive */
.meetmate-scope .mm-card form,
.meetmate-scope form {
  width: 100% !important;
  max-width: 100% !important;
}

/* Options-Auswahl */
.mm-options{
  list-style: none;
  padding: 0;
  margin: 8px 0 0 0;
  display: flex;
  flex-direction: column;
  gap: 10px;
}

/* Dashboard-Tabelle responsive - Nur die Tabelle kompakt machen */
@media only screen and (max-width: 768px) {
  .meetmate-scope .mmr-table,
  .meetmate-scope .mm-my-table {
    font-size: 0.7em !important;
    min-width: 100% !important;
    width: 100% !important;
    max-width: 100% !important;
  }
  
  .meetmate-scope .mmr-table th,
  .meetmate-scope .mmr-table td,
  .meetmate-scope .mm-my-table th,
  .meetmate-scope .mm-my-table td {
    padding: 3px 1px !important;
    white-space: nowrap !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    max-width: 70px !important;
    font-size: 0.7em !important;
    line-height: 1.2 !important;
  }
  
  .meetmate-scope .mmr-table th:first-child,
  .meetmate-scope .mmr-table td:first-child,
  .meetmate-scope .mm-my-table th:first-child,
  .meetmate-scope .mm-my-table td:first-child {
    max-width: 90px !important;
  }
  
  .meetmate-scope .mmr-wrap {
    overflow-x: auto !important;
  }
}

/* -----------------------------
   ICS Download Bereich
   ----------------------------- */
.meetmate-scope .mm-ics-download {
  margin-top: 24px !important;
  padding: 16px !important;
  background: var(--mm-bg-secondary) !important;
  border: 1px solid var(--mm-border-light) !important;
  border-radius: 6px !important;
}

.meetmate-scope .mm-ics-download h3 {
  margin: 0 0 8px 0 !important;
  font-size: 1.1em !important;
  color: var(--mm-text-primary) !important;
}

.meetmate-scope .mm-ics-download .mm-help {
  margin: 0 0 12px 0 !important;
  font-size: 0.9em !important;
  color: var(--mm-text-secondary) !important;
}

/* .mm-button Alias - Look kommt von .mm-btn, Größen bleiben */
.meetmate-scope .mm-ics-download .mm-button {
  /* Größen-Eigenschaften bleiben erhalten */
  gap: 8px !important;
  padding: 8px 16px !important;
  font-size: 0.9em !important;
}

/* -----------------------------
   Organisator-Kommentar Bereich
   ----------------------------- */
.meetmate-scope .mm-organizer-comment {
  margin-top: 24px !important;
  padding: 16px !important;
  background: var(--mm-bg-secondary) !important;
  border: 1px solid var(--mm-border-light) !important;
  border-radius: 6px !important;
}

.meetmate-scope .mm-organizer-comment h3 {
  margin: 0 0 8px 0 !important;
  font-size: 1.1em !important;
  color: var(--mm-text-primary) !important;
}

.meetmate-scope .mm-organizer-comment .mm-help {
  margin: 0 0 12px 0 !important;
  font-size: 0.9em !important;
  color: var(--mm-text-secondary) !important;
}

.meetmate-scope .mm-organizer-comment .mm-textarea {
  width: 100% !important;
  padding: 8px 12px !important;
  border: 1px solid var(--mm-border-medium) !important;
  border-radius: 4px !important;
  font-family: inherit !important;
  font-size: 0.9em !important;
  resize: vertical !important;
  min-height: 80px !important;
}

.meetmate-scope .mm-organizer-comment .mm-textarea:focus {
  outline: none !important;
  border-color: var(--mm-c-primary) !important;
  box-shadow: 0 0 0 2px rgba(71, 171, 219, 0.2) !important;
}

.meetmate-scope .mm-organizer-comment-actions {
  margin-top: 12px !important;
  display: flex !important;
  align-items: center !important;
  gap: 12px !important;
}

/* .mm-button Alias - Look kommt von .mm-btn, Größen bleiben */
.meetmate-scope .mm-organizer-comment .mm-button {
  /* Größen-Eigenschaften bleiben erhalten */
  gap: 8px !important;
  padding: 8px 16px !important;
  font-size: 0.9em !important;
}

.meetmate-scope .mm-comment-status {
  font-size: 0.85em !important;
  font-weight: 500 !important;
}

.meetmate-scope .mm-comment-status.success {
  color: var(--mm-status-success) !important;
}

.meetmate-scope .mm-comment-status.error {
  color: var(--mm-status-error) !important;
}

/* Organisator-Kommentar in der Kommentar-Übersicht */
.meetmate-scope .mmr-organizer-comment {
  background: #f8f9fa !important;
  margin-bottom: 12px !important;
}

.meetmate-scope .mmr-organizer-comment .mmr-comment-author {
  font-weight: 600 !important;
  color: var(--mm-c-primary) !important;
}

.meetmate-scope .mmr-comment-date {
  font-weight: 400 !important;
  color: var(--mm-text-secondary) !important;
  font-size: 0.85em !important;
}

/* === Erweiterungs-Feature: Gesperrte Slots === */
.meetmate-scope .mm-slot--locked {
  opacity: 0.55;
  cursor: not-allowed;
  pointer-events: none;
  background: var(--mm-c-muted, #b3b3b3) !important;
  color: var(--mm-c-on-muted, #ffffff) !important;
  border: 1px solid var(--mm-c-muted, #b3b3b3) !important;
  border-radius: 6px;
}

/* Erweiterungs-Button Styles */
.meetmate-scope .mm-extend-disabled {
  opacity: 0.5;
  cursor: not-allowed;
  background: #e5e7eb !important;
  color: #6b7280 !important;
}

.meetmate-scope .mm-extend-disabled:hover {
  background: #e5e7eb !important;
  color: #6b7280 !important;
}

/* Gemeinsame Slot-Styles für neue und gesperrte Slots */
.meetmate-scope .mm-slot {
  position: absolute;
  border-radius: 6px;
  border: 1px solid var(--mm-c-primary);
  background: var(--mm-c-primary);
  color: white;
  z-index: 10;
  pointer-events: none;
  font-size: 12px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 500;
}

.meetmate-scope .mm-slot--new {
  background: var(--mm-c-primary);
  border-color: var(--mm-c-primary);
  pointer-events: auto;
  cursor: pointer;
}

.meetmate-scope .mm-slot--locked {
  background: var(--mm-c-muted-200, #e5e7eb);
  border: 1px solid var(--mm-c-muted-400, #9ca3af);
  border-radius: var(--mm-radius-slot, 6px);
  pointer-events: none;
  box-sizing: border-box;
  opacity: 0.8;
  cursor: not-allowed;
}

.meetmate-scope .mm-locked-layer {
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
}


/* === Erweiterungs-Modal === */
.mm-extend-modal {
  position: fixed !important;
  top: 0 !important;
  left: 0 !important;
  width: 100% !important;
  height: 100% !important;
  z-index: 99999 !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  margin: 0 !important;
  padding: 0 !important;
}

.mm-extend-overlay {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0.5);
}

.mm-extend-content {
  position: relative;
  background: white;
  border-radius: 8px;
  box-shadow: 0 10px 25px rgba(0, 0, 0, 0.2);
  max-width: 90vw;
  max-height: 90vh;
  overflow: hidden;
  display: flex;
  flex-direction: column;
}

.mm-extend-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 20px;
  border-bottom: 1px solid #e5e7eb;
  background: #f9fafb;
}

.mm-extend-header h2 {
  margin: 0;
  font-size: 1.5rem;
  color: #1f2937;
}

.mm-extend-close {
  background: none;
  border: none;
  font-size: 1.5rem;
  cursor: pointer;
  color: #6b7280;
  padding: 0;
  width: 30px;
  height: 30px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.mm-extend-close:hover {
  color: #374151;
}

.mm-extend-body {
  padding: 20px;
  overflow-y: auto;
  flex: 1;
}

.mm-extend-intro {
  margin-bottom: 20px;
  color: #6b7280;
  font-size: 0.9rem;
}

.mm-extend-hint {
  margin-top: 15px;
  padding: 10px;
  background: #f3f4f6;
  border-radius: 6px;
  font-size: 0.85rem;
  color: #6b7280;
}

.mm-extend-actions {
  display: flex;
  gap: 10px;
  margin-top: 20px;
  justify-content: flex-end;
}

.mm-extend-actions .mm-btn {
  min-width: 120px;
}

/* Readonly slots - CSS-Klassen auf bestehende Grid-Zellen (wie neue Slots) */
.meetmate-scope .mm-grid .cell.readonly {
  /* Visual styling - muted variant of normal slots */
  background: var(--mm-slot-readonly-bg, rgba(90, 110, 130, 0.18)) !important;
  border: 1px solid var(--mm-slot-readonly-border, rgba(90, 110, 130, 0.28)) !important;
  border-radius: var(--mm-radius-slot, 10px) !important;
  
  /* Readonly behavior */
  pointer-events: none !important;
  user-select: none !important;
  
  /* Layering - same as new slots */
  z-index: var(--mm-z-slot-readonly, 1) !important;
  
  /* Smooth edges */
  -webkit-backface-visibility: hidden;
  backface-visibility: hidden;
}

/* Readonly slot blocks - EXAKT wie Vote-Ansicht (vb-left, vb-right, vb-top, vb-bottom) */
.meetmate-scope .mm-grid .cell.readonly {
  /* Horizontale Viertelstundenlinien KOMPLETT verstecken */
  border-bottom: none !important;
  border-top: none !important;
  
  /* Keine abgerundeten Ecken standardmäßig */
  border-radius: 0 !important;
}

/* Einzelne Zellen: Kein Rahmen, keine Abrundung */
.meetmate-scope .mm-grid .cell.readonly {
  border-radius: 0 !important;
}

/* Block-Markierung: Nur Abrundung, keine Border-Änderung */
.meetmate-scope .mm-grid .cell.readonly-left.readonly,
.meetmate-scope .mm-grid .cell.readonly-right.readonly,
.meetmate-scope .mm-grid .cell.readonly-top.readonly,
.meetmate-scope .mm-grid .cell.readonly-bottom.readonly {
  border-radius: 0 !important;
}

/* Spezifische Abrundung für Ecken der Blöcke */
.meetmate-scope .mm-grid .cell.readonly-left.readonly-top.readonly { border-top-left-radius: 8px !important; }
.meetmate-scope .mm-grid .cell.readonly-right.readonly-top.readonly { border-top-right-radius: 8px !important; }
.meetmate-scope .mm-grid .cell.readonly-left.readonly-bottom.readonly { border-bottom-left-radius: 8px !important; }
.meetmate-scope .mm-grid .cell.readonly-right.readonly-bottom.readonly { border-bottom-right-radius: 8px !important; }

/* Readonly-spezifische Border-Farben für Auswahlrahmen */
.meetmate-scope .mm-grid .cell.readonly-left.readonly {   border-left:   1px solid var(--mm-slot-readonly-border, rgba(90, 110, 130, 0.5)) !important; }
.meetmate-scope .mm-grid .cell.readonly-right.readonly {  border-right:  1px solid var(--mm-slot-readonly-border, rgba(90, 110, 130, 0.5)) !important; }
.meetmate-scope .mm-grid .cell.readonly-top.readonly {    border-top:    1px solid var(--mm-slot-readonly-border, rgba(90, 110, 130, 0.5)) !important; }
.meetmate-scope .mm-grid .cell.readonly-bottom.readonly { border-bottom: 1px solid var(--mm-slot-readonly-border, rgba(90, 110, 130, 0.5)) !important; }

/* No hover/active/focus styles for readonly slots */
.meetmate-scope .mm-slot--readonly:hover,
.meetmate-scope .mm-slot--readonly:active,
.meetmate-scope .mm-slot--readonly:focus {
  background: var(--mm-slot-readonly-bg, rgba(90, 110, 130, 0.18));
  border-color: var(--mm-slot-readonly-border, rgba(90, 110, 130, 0.28));
  outline: none;
  box-shadow: none;
}

.mm-vote-instructions-hidden {
  display: none !important;
}

@media (max-width: 768px) {
  .mm-vote-instructions,
  .mm-vote-instruction-title,
  .mm-vote-instruction-text,
  .mm-vote-instruction-legend {
    display: none !important;
  }
}