/*==========================================
    OBM DESIGN TOKENS:
    
    Palette sourced from brand gradient:
   #ff002a (primary red)   #f56727 (orange/secondary)
   #e9dacd (sand/accent)   #96c200 (lime/success)
   #0d9c71 (emerald/info)  #32b8b9 (cyan/highlight)

   OBM BREAKPOINTS REFERENCE:

   --xs:   max-width  380px   (tiny phones)
   --sm:   max-width  576px   (small phones)
   --md:   max-width  768px   (tablets portrait)
   --lg:   max-width  868px   (tablets landscape / small laptops)
   --xl:   max-width 1024px   (desktops)
   --xxl:  max-width 1280px   (wide desktops)
==========================================*/

:root {

  /* --- App Backgrounds --- */
  --obm-app-bg:        #F5F6F8;   /* page / outer canvas */
  --obm-component-bg:  #FFFFFF;   /* cards, panels, inputs */
  --obm-surface-alt:   #F8FAFC;   /* subtle tinted surfaces (hints, highlights) */

  /* --- Typography --- */
  --obm-text:          #020817;   /* primary body text */
  --obm-text-muted:    #64748B;   /* secondary / helper text */

  /* --- Borders --- */
  --obm-border:        #E2E8F0;   /* default border */
  --obm-border-strong: #D1D5DB;   /* emphasized border */

  /* --- Primary (brand red #ff002a) --- */
  --obm-primary:        #FF002A;
  --obm-primary-hover:  #D4001F;
  --obm-primary-light:  rgba(255, 0, 42, 0.10);
  --obm-primary-ring:   0 0 0 2px rgba(255, 0, 42, 0.15);

  /* --- Secondary (brand orange #f56727) --- */
  --obm-secondary:       #F56727;
  --obm-secondary-hover: #D4521A;
  --obm-secondary-light: rgba(245, 103, 39, 0.10);

  /* --- Accent (sand/beige #e9dacd) --- */
  --obm-accent:        #E9DACD;
  --obm-accent-hover:  #D6C4B2;
  --obm-accent-light:  rgba(233, 218, 205, 0.40);

  /* --- Success (lime green #96c200) --- */
  --obm-success:       #96C200;
  --obm-success-hover: #7AA300;
  --obm-success-light: rgba(150, 194, 0, 0.12);
  --obm-success-text:  #4A6100;

  /* --- Info / Emerald (#0d9c71) --- */
  --obm-info:       #0D9C71;
  --obm-info-hover: #0A7D5A;
  --obm-info-light: rgba(13, 156, 113, 0.12);

  /* --- Highlight / Cyan (#32b8b9) --- */
  --obm-highlight:       #32B8B9;
  --obm-highlight-hover: #27969rA;
  --obm-highlight-light: rgba(50, 184, 185, 0.12);

  /* --- Warning (amber) --- */
  --obm-warning:       #F59E0B;
  --obm-warning-hover: #D48609;
  --obm-warning-light: rgba(245, 158, 11, 0.12);

  /* --- Danger (deep red – destructive actions) --- */
  --obm-danger:       #DC2626;
  --obm-danger-hover: #B91C1C;
  --obm-danger-light: rgba(220, 38, 38, 0.10);

  /* --- Radii --- */
  --obm-radius-sm: 6px;
  --obm-radius-md: 8px;
  --obm-radius-lg: 12px;

  /* --- Shadows --- */
  --obm-shadow-sm: 0 1px 2px rgba(0,0,0,0.04);
  --obm-shadow-md: 0 6px 18px rgba(0,0,0,0.08);
}

/*------------------------------
   Globale Styles & Resets
-------------------------------*/

html, body, #app {
    height: 100%;
}

body {
    margin: 0;
    padding: 0;
    font-family: "Source Sans 3", system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
    background: var(--obm-app-bg);
    color: var(--obm-text);
}

h1 { font-size: 30px; font-weight: 700; margin: 0 0 24px 0; }
h2 { font-size: 24px; font-weight: 700; margin: 0 0 16px 0; }
h3 { font-size: 20px; font-weight: 600; margin: 0 0 12px 0; }
.small, small { font-size: 14px; color: var(--obm-text-muted); }

/*------------------------------
   GLOBAL Radzen Component Styling
-------------------------------*/

/* CARDS */
.rz-card {
  background: var(--obm-component-bg) !important;
  border: 1px solid var(--obm-border) !important;
  border-radius: var(--obm-radius-lg) !important;
  box-shadow: var(--obm-shadow-sm) !important;
}

.card--interactive:hover {
  border-color: var(--obm-primary);
  box-shadow: var(--obm-shadow-md);
  transition: box-shadow .15s ease, border-color .15s ease;
}

/* INPUTS */
.rz-textbox,
.rz-textarea,
.rz-dropdown,
.rz-spinner,
.rz-datepicker,
.rz-numeric,
.rz-password {
  min-height: 40px !important;
  border-radius: var(--obm-radius-md) !important;
  border: 1px solid var(--obm-border-strong) !important;
  background: #FFFFFF !important;
}

.rz-textbox:focus,
.rz-textarea:focus,
.rz-dropdown:focus-within,
.rz-datepicker:focus-within,
.rz-numeric:focus-within,
.rz-password:focus-within,
.rz-textbox:focus-visible {
  border-color: var(--obm-primary) !important;
  box-shadow: var(--obm-primary-ring) !important;
  outline: none !important;
}

/* LABELS */
.rz-label { font-weight: 600; color: var(--obm-text); }
.rz-formfield-content .rz-text-muted { color: var(--obm-text-muted); }

/* BUTTONS */
.rz-button {
  border-radius: 10px !important;
  min-height: 42px;
  font-weight: 600;
}

.rz-button.rz-primary,
.rz-button.rz-button-md.rz-primary {
  background: var(--obm-primary) !important;
  border-color: var(--obm-primary) !important;
  color: #FFFFFF !important;
}

.rz-button.rz-primary:hover {
  background: var(--obm-primary-hover) !important;
  border-color: var(--obm-primary-hover) !important;
}

.rz-button.rz-light,
.rz-button.rz-secondary {
  background: #FFFFFF !important;
  border: 1px solid var(--obm-border) !important;
  color: var(--obm-text) !important;
}

.rz-button.rz-danger {
  background: var(--obm-danger) !important;
  border-color: var(--obm-danger) !important;
  color: #FFFFFF !important;
}

/*
    Header
*/
.rz-header {
    background: var(--obm-component-bg) !important;
    border-bottom: 1px solid var(--obm-border) !important;
    box-shadow: var(--obm-shadow-sm) !important;
}


/* Logo link */
.obm-header__logo-link {
    display: inline-flex;
    align-items: center;
    text-decoration: none;
    flex-shrink: 0;
}

/* Logo image – constrained height, intrinsic width */
.obm-header__logo {
    height: 44px !important;
    width: auto !important;
    display: block;
}

/* Logout button */
.obm-header__logout.rz-button {
    background: transparent !important;
    border: 1px solid var(--obm-border) !important;
    color: var(--obm-text-muted) !important;
    min-height: 36px !important;
    padding: 0 14px !important;
    border-radius: 999px !important;
    font-size: 13px !important;
    font-weight: 600 !important;
    gap: 6px;
    transition: background .15s, border-color .15s, color .15s;
}

.obm-header__logout.rz-button:hover {
    background: var(--obm-primary-light) !important;
    border-color: var(--obm-primary) !important;
    color: var(--obm-primary) !important;
}

.obm-header__logout.rz-button .rz-icon {
    font-size: 18px;
    color: inherit;
}

/*
    Sidebar
*/
.rz-sidebar {
    background: var(--obm-component-bg) !important;
    border-right: 1px solid var(--obm-border) !important;
    box-shadow: var(--obm-shadow-sm) !important;
    border-radius: var(--obm-radius-md) !important;
    overflow: hidden !important;
}
.rz-sidebar .rz-panel-menu {
    background-color: transparent !important;
}
.rz-sidebar .rz-panel-menu .rz-navigation-item {
    border-block-end: unset !important;
}

.rz-sidebar .rz-panel-menu .rz-navigation-item-wrapper {
    border-radius: var(--obm-radius-md) !important;
    margin: 2px 8px !important;
}

.rz-body {
    background: var(--obm-app-bg) !important;
    border-radius: var(--obm-radius-md) !important;
}

/*------------------------------
   Reusable Layout Utility
-------------------------------*/
.page-center {
    min-height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 40px 16px;
}

.panel {
  width: 100%;
  max-width: 420px;
}

.stack-10 {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

/*------------------------------
   Globale Styles & Resets (aus MainLayout & ApplicationLoginChat)
-------------------------------*/

html, body, #app {
    height: 100%;
    margin: 0;
    padding: 0;
}

/* Verhindert, dass der Body scrollt - ggf. nur fuer MainLayout relevant */
html, body {
    overflow: hidden; 
}


/*------------------------------
   Globale Box-Sizing-Regel (aus Mitteilungen.razor)
-------------------------------*/
*,
*::before,
*::after {
    box-sizing: border-box; /* Padding und Border in Breite/Höhe einberechnen */
}

/*------------------------------
   Grid-Container für Chat-Auswahl (Mitteilungen.razor)
-------------------------------*/
.conversation-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
    gap: 16px; /* Abstand zwischen Cards */
    width: 100%; /* Grid füllt die Parent-Breite */
    margin: 0;
    padding: 0;
}

/*------------------------------
   Einzelne Cards (Mitteilungen.razor)
-------------------------------*/
.conversation-card {
    width: 100%; /* Card füllt ihre Grid-Zelle */
    padding: 12px;
    box-sizing: border-box;
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
}

/*------------------------------
   Innerer Stack in der Card
-------------------------------*/
.conversation-card > .rz-stack {
    width: 100%;
}

/*------------------------------
   Buttons in der Card
-------------------------------*/
.conversation-card button {
    width: 100%; /* Buttons füllen die Card-Breite */
}

/*------------------------------
   Responsive Breakpoints
-------------------------------*/

/* Mobile-first: default 1 Spalte */
@media (min-width: 600px) {
    /* optional kleinere Tablets → 2 Spalten */
    .conversation-grid {
        grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
    }
}

/* Desktop / größere Bildschirme */
@media (min-width: 992px) {
    .conversation-grid {
        grid-template-columns: repeat(auto-fill, minmax(350px, 1fr));
    }
}

/* Extra große Bildschirme → optional 3 Spalten */
@media (min-width: 1200px) {
    .conversation-grid {
        grid-template-columns: repeat(auto-fill, minmax(400px, 1fr));
    }
}

/*------------------------------
   LoadingPanel Overlay
-------------------------------*/
.loading-panel-overlay {
    position: absolute; /* absolut relativ zum Wrapper */
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(128, 128, 128, 0.2); /* halbtransparent */
    z-index: 9999;
    display: flex;
    align-items: center;
    justify-content: center;
}

/*------------------------------
   CustomUpload Styles
-------------------------------*/

/* ── Outer zone ── */
.obm-upload-wrapper {
    position: relative;
    width: 100%;
    border: 2px dashed var(--obm-border-strong);
    border-radius: var(--obm-radius-md);
    background: var(--obm-surface-alt);
    transition: border-color 0.2s ease, background 0.2s ease;
    cursor: pointer;
    /* min-height keeps the zone tall even before visual content renders */
    min-height: 140px;
}

.obm-upload-wrapper:hover {
    border-color: var(--obm-primary);
    background: rgba(255, 0, 42, 0.03);
}

.obm-upload-wrapper--loading {
    border-color: var(--obm-primary);
    background: rgba(255, 0, 42, 0.03);
    pointer-events: none;
}

/* ── Visual layer – drawn first, pointer-events off ── */
.obm-dropzone-visual {
    position: relative;
    z-index: 1;
    pointer-events: none;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 28px 20px;
    text-align: center;
}

.obm-dropzone-icon {
    width: 52px;
    height: 52px;
    border-radius: var(--obm-radius-md);
    background: var(--obm-primary-light);
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 4px;
}
.obm-dropzone-icon .rz-icon {
    font-size: 26px;
    color: var(--obm-primary);
}

/* ── Radzen upload layer – sits ABOVE the visual, fully transparent ── */
/* The inner upload-wrapper div must be absolute so it covers the whole zone */
.obm-upload-wrapper > .upload-wrapper {
    position: absolute !important;
    inset: 0;
    z-index: 2;
    width: 100% !important;
    height: 100% !important;
    overflow: hidden;
}

/* Hide the file list Radzen renders */
.custom-upload-hidden-files .rz-fileupload-files {
    display: none !important;
}

/* Remove all button-bar chrome */
.custom-upload-transparent-bar .rz-fileupload-buttonbar {
    background-color: transparent !important;
    border: none !important;
    padding: 0 !important;
    margin: 0 !important;
}

/* The RadzenUpload component itself fills the whole absolute layer */
.obm-upload-radzen {
    display: block;
    width: 100% !important;
    height: 100% !important;
    opacity: 0 !important;        /* invisible but fully clickable */
    cursor: pointer !important;
}

/* Force every generated child to fill 100% height so the click area is the full zone */
.obm-upload-radzen .rz-fileupload,
.obm-upload-radzen .rz-fileupload-buttonbar,
.obm-upload-radzen .rz-fileupload-choose {
    width: 100% !important;
    height: 100% !important;
    min-height: 140px;
    display: block !important;
    cursor: pointer !important;
    padding: 0 !important;
    margin: 0 !important;
    background: transparent !important;
    border: none !important;
    box-shadow: none !important;
}

/* Progress bar */
.obm-upload-progress {
    width: 100%;
    max-width: 260px;
    height: 6px;
    border-radius: 999px;
    background: var(--obm-border);
    overflow: hidden;
    margin-top: 6px;
}
.obm-upload-progress-bar {
    height: 100%;
    background: var(--obm-primary);
    border-radius: 999px;
    transition: width 0.3s ease;
}

/* ── Remove button inside file row ── */
.obm-file-remove-btn.rz-button {
    border-radius: var(--obm-radius-sm) !important;
    min-height: 32px !important;
    width: 32px !important;
    padding: 0 !important;
    color: var(--obm-danger) !important;
    border-color: transparent !important;
    background: transparent !important;
}
.obm-file-remove-btn.rz-button:hover {
    background: var(--obm-danger-light) !important;
    border-color: var(--obm-danger) !important;
}

/* ── Root container ── */
.obm-upload-root {
    width: 100%;
}

/* ── Responsive: mobile (≤ 480px) ── */
@media (max-width: 480px) {
    .obm-upload-wrapper {
        min-height: 110px;
        border-radius: var(--obm-radius-sm);
    }

    .obm-dropzone-visual {
        padding: 18px 12px;
        gap: 6px;
    }

    .obm-dropzone-icon {
        width: 40px;
        height: 40px;
    }
    .obm-dropzone-icon .rz-icon {
        font-size: 20px;
    }

    .obm-upload-radzen .rz-fileupload,
    .obm-upload-radzen .rz-fileupload-buttonbar,
    .obm-upload-radzen .rz-fileupload-choose {
        min-height: 110px;
    }

    .obm-upload-progress {
        max-width: 100%;
    }

    /* Stack file row on very small screens */
    .obm-file-row {
        flex-direction: column;
        align-items: flex-start;
        gap: 10px;
    }

    .obm-file-action {
        align-self: flex-end;
        margin-top: -8px;
    }
}

/* ── Responsive: small tablet (481px – 768px) ── */
@media (min-width: 481px) and (max-width: 768px) {
    .obm-upload-wrapper {
        min-height: 124px;
    }

    .obm-dropzone-visual {
        padding: 22px 16px;
    }

    .obm-dropzone-icon {
        width: 46px;
        height: 46px;
    }
    .obm-dropzone-icon .rz-icon {
        font-size: 22px;
    }

    .obm-upload-radzen .rz-fileupload,
    .obm-upload-radzen .rz-fileupload-buttonbar,
    .obm-upload-radzen .rz-fileupload-choose {
        min-height: 124px;
    }

    .obm-upload-progress {
        max-width: 100%;
    }

    .obm-file-meta {
        /* allow filename to wrap properly */
        word-break: break-all;
    }
}

.upload-overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(255, 255, 255, 0.7);
    display: flex;
    justify-content: center;
    align-items: center;
    z-index: 10;
}

.upload-wrapper {
    position: relative;
    width: 100%;
    height: 100%;
}

.component-upload {
    width: 100%;
}

.disabled-upload {
    opacity: 0.5;
    pointer-events: none; /* Upload deaktiviert während Upload */
}

/*------------------------------
   Section: Auth Layout Components
-------------------------------*/

.obm-accent-line {
  height: 4px;
  background:
  linear-gradient(
          90deg,
          #ff002a 0 calc(100% / 6),
          #f56727 0 calc((100% / 6) * 2),
          #e9dacd 0 calc((100% / 6) * 3),
          #96c200 0 calc((100% / 6) * 4),
          #0d9c71 0 calc((100% / 6) * 5),
          #32b8b9 0 calc((100% / 6) * 6)
  );
  border-radius: var(--obm-radius-lg) var(--obm-radius-lg) 0 0;
  margin: 0;
  width: 100%;
}

.obm-icon-badge {
  width: 44px;
  height: 44px;
  border-radius: 999px;
  background: var(--obm-primary-light);
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 6px auto 10px auto;
}

.obm-icon-badge .rz-icon {
  color: var(--obm-primary);
  font-size: 20px;
}

.obm-oder {
  display: flex;
  align-items: center;
  gap: 12px;
  color: var(--obm-text-muted);
  font-size: 12px;
  margin: 10px 0;
  justify-content: center;
  width: 100%;
}
.obm-oder::before,
.obm-oder::after {
  content: "";
  height: 1px;
  background: var(--obm-border);
  flex: 1;
}

/* Green accent line at top of card (success variant) */
.obm-accent-line--success {
  height: 4px;
  background: var(--obm-success);
  border-radius: var(--obm-radius-lg) var(--obm-radius-lg) 0 0;
  margin: 0;
  width: 100%;
}

/* Large success icon badge (light green circle) */
.obm-success-badge {
  width: 64px;
  height: 64px;
  border-radius: 999px;
  background: var(--obm-success-light);
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 6px auto 10px auto;
}
.obm-success-badge .rz-icon {
  color: var(--obm-success);
  font-size: 28px;
}

/* Info callout box with icon on left */
.obm-callout {
  border: 1px solid var(--obm-border);
  border-radius: var(--obm-radius-md);
  background: var(--obm-component-bg);
  padding: 14px;
  display: flex;
  gap: 12px;
  align-items: flex-start;
}
.obm-callout-icon {
  width: 36px;
  height: 36px;
  border-radius: 999px;
  background: var(--obm-primary-light);
  display: flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 auto;
}
.obm-callout-icon .rz-icon {
  color: var(--obm-primary);
  font-size: 18px;
}

/* Section label */
.obm-section-label {
  margin-top: 14px;
  font-size: 12px;
  letter-spacing: .06em;
  color: var(--obm-text-muted);
  font-weight: 700;
}

/* Numbered steps list */
.obm-steps {
  display: flex;
  flex-direction: column;
  gap: 10px;
  margin: 10px 0 0 0;
  padding: 0;
  list-style: none;
}
.obm-step {
  display: flex;
  gap: 10px;
  align-items: flex-start;
}
.obm-step-num {
  width: 22px;
  height: 22px;
  border-radius: 999px;
  background: var(--obm-primary);
  color: #FFFFFF;
  font-size: 12px;
  font-weight: 700;
  display: flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 auto;
  margin-top: 1px;
}

/* Primary CTA button full width */
.obm-btn-wide .rz-button{
  width: 100%;
}

/* Link-like button */
.rz-button.obm-link {
  background: transparent !important;
  border: none !important;
  color: var(--obm-primary) !important;
  min-height: auto !important;
  padding: 0 !important;
  border-radius: 0 !important;
  font-weight: 600;
    box-shadow: none !important;
}
.rz-button.obm-link:hover .rz-button-text {
  text-decoration: underline;
}

/* Method Selection (KI vs Classic) */
.obm-method .rz-card { cursor: pointer; }

.obm-method-card {
  position: relative;
  padding: 18px;
  height: 100%;
    background: var(--obm-component-bg) !important;
  transition: all 0.2s ease;
}
.obm-method-card:hover {
  border-color: var(--obm-primary);
  transform: translateY(-2px);
  box-shadow: var(--obm-shadow-md);
}

.obm-method-card--selected {
  border-color: var(--obm-primary) !important;
  box-shadow: var(--obm-shadow-md);
  background-color: #FFF0F0 !important;
}

.obm-method-icon {
  width: 44px;
  height: 44px;
  border-radius: var(--obm-radius-md);
  background: var(--obm-primary-light);
  display: flex;
  align-items: center;
  justify-content: center;
}
.obm-method-icon .rz-icon {
  color: var(--obm-primary);
  font-size: 20px;
}

.obm-method-selected {
  position: absolute;
  top: 12px;
  right: 12px;
  width: 22px;
  height: 22px;
  border-radius: 999px;
  background: var(--obm-primary);
  display: flex;
  align-items: center;
  justify-content: center;
  color: #fff;
}
.obm-method-selected .rz-icon { font-size: 14px; }

.obm-method-badge {
  margin-left: auto;
  margin-right: 12px;
  background: var(--obm-primary-light) !important;
  color: var(--obm-primary) !important;
  border: 1px solid rgba(255, 0, 42, 0.25) !important;
  font-weight: 700;
  text-transform: uppercase;
  font-size: 10px !important;
  letter-spacing: 0.05em;
  padding: 2px 8px !important;
}

.obm-method-bullet {
  display: flex;
  gap: 10px;
  align-items: center;
  color: var(--obm-text);
  font-size: 14px;
}
.obm-method-bullet .rz-icon {
  color: var(--obm-text-muted);
  font-size: 18px;
}

.obm-method-hint {
  cursor: default !important;
  background: var(--obm-surface-alt) !important;
  border: 1px solid var(--obm-border);
}

/* ------------------------------ */
/*       Login Chat Styles        */
/* ------------------------------ */
.login-chat-container {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 16px;
    padding: 16px 16px 40px;
    background-color: var(--obm-app-bg);
    width: 100%;
}

/* The first child stack (holding the back button) sticks to the top of .rz-body scroll */
.login-chat-container > .rz-stack:first-child {
    position: sticky;
    top: 0;
    z-index: 50;
    align-self: flex-start;
    padding: 8px 0;
}

.login-chat-container .go-back-button {
    box-shadow: var(--obm-shadow-md) !important;
}

.login-chat-container .chat-input-area {
    position: sticky;
    bottom: 0;
    z-index: 50;
    margin-top: 8px;
    border: 1px solid var(--obm-border);
    border-radius: var(--obm-radius-lg);
    box-shadow: var(--obm-shadow-md);
    padding: 12px 14px;
    background: var(--obm-component-bg);
}

/* File chips bar */
.chat-files-bar {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-bottom: 10px;
    padding-bottom: 10px;
    border-bottom: 1px solid var(--obm-border);
}

.chat-file-chip {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 5px 10px;
    border-radius: 20px;
    background: var(--obm-surface-alt);
    border: 1px solid var(--obm-border);
    font-size: 13px;
    color: var(--obm-text);
    max-width: 220px;
}
.chat-file-chip > span {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    flex: 1;
    min-width: 0;
}
.chat-file-chip .rz-icon {
    font-size: 16px;
    color: var(--obm-text-muted);
    flex-shrink: 0;
}
.chat-file-chip__remove {
    cursor: pointer;
    color: var(--obm-danger) !important;
    font-size: 15px !important;
    border-radius: 999px;
    transition: background 0.15s;
}
.chat-file-chip__remove:hover {
    background: var(--obm-danger-light);
}

/* Compose row */
.chat-compose {
    display: flex;
    align-items: flex-end;
    gap: 10px;
}

/* Textarea */
.chat-textarea,
.chat-textarea.rz-textarea {
    flex: 1;
    min-width: 0;
    resize: none !important;
    overflow-y: auto;
    border: 1px solid var(--obm-border) !important;
    border-radius: var(--obm-radius-md) !important;
    padding: 10px 12px !important;
    font-size: 14px;
    line-height: 1.5;
    background: var(--obm-surface-alt) !important;
    transition: border-color 0.15s, box-shadow 0.15s;
}
.chat-textarea:focus,
.chat-textarea.rz-textarea:focus {
    border-color: var(--obm-primary) !important;
    box-shadow: var(--obm-primary-ring) !important;
    background: var(--obm-component-bg) !important;
    outline: none !important;
}

/* Action buttons container */
.chat-actions {
    display: flex;
    flex-direction: column;
    gap: 6px;
    flex-shrink: 0;
}

/* Circular action buttons */
.chat-action-btn.rz-button {
    width: 42px !important;
    height: 42px !important;
    min-width: 42px !important;
    min-height: 42px !important;
    padding: 0 !important;
    border-radius: 999px !important;
    display: flex;
    align-items: center;
    justify-content: center;
}
.chat-action-btn .rz-icon {
    font-size: 20px;
}

/* Send button brand color */
.chat-send-btn.rz-button {
    background: var(--obm-primary) !important;
    border-color: var(--obm-primary) !important;
    color: #fff !important;
    box-shadow: var(--obm-shadow-sm);
    transition: background 0.15s, transform 0.1s;
}
.chat-send-btn.rz-button:hover {
    background: var(--obm-primary-hover) !important;
    border-color: var(--obm-primary-hover) !important;
    transform: scale(1.05);
}

/* Attach button subtle style */
.chat-action-btn.rz-button:not(.chat-send-btn) {
    background: var(--obm-surface-alt) !important;
    border: 1px solid var(--obm-border) !important;
    color: var(--obm-text-muted) !important;
}
.chat-action-btn.rz-button:not(.chat-send-btn):hover {
    border-color: var(--obm-primary) !important;
    color: var(--obm-primary) !important;
    background: var(--obm-primary-light) !important;
}

/* Responsive */
@media (max-width: 576px) {
    .login-chat-container .chat-input-area {
        padding: 10px;
        border-radius: var(--obm-radius-md);
    }
    .chat-action-btn.rz-button {
        width: 38px !important;
        height: 38px !important;
        min-width: 38px !important;
        min-height: 38px !important;
    }
    .chat-file-chip {
        max-width: 160px;
        font-size: 12px;
    }
}

/* ------------------------------ */
/* Bewerbungsformular Stepper */
/* ------------------------------ */
.obm-paper-wrap {
    display: flex;
    justify-content: center;
    padding: 24px 16px;
}
@media (max-width: 576px) {
    .obm-paper-wrap {
        padding: 12px 0;
    }
}

.obm-paper {
    width: 100%;
    max-width: 900px;
    background: var(--obm-component-bg);
    border: 1px solid var(--obm-border);
    border-radius: var(--obm-radius-lg);
    box-shadow: var(--obm-shadow-sm);
    overflow: hidden;
    padding: 0 !important;
}

.obm-form-header {
    text-align: center;
    padding: 24px 20px 8px 20px;
}

.obm-form-title {
    font-size: 24px !important;
    font-weight: 700 !important;
    color: var(--obm-text) !important;
}

.obm-form-subtitle {
    color: var(--obm-text) !important;
    font-size: 14px !important;
}
.obm-form-subtitle--muted {
    color: var(--obm-text-muted) !important;
    font-size: 14px !important;
}

/* Stepper container */
.obm-stepper {
    padding: 24px 20px;
    border-top: 1px solid var(--obm-border);
    border-bottom: 1px solid var(--obm-border);
    display: flex;
    align-items: center;
    justify-content: space-between;
    overflow-x: auto;
}

/* Individual Step */
.obm-step {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
    min-width: 80px;
    cursor: pointer;
    flex: 0 0 auto;
    position: relative;
    z-index: 1;
}

.obm-step--disabled {
    cursor: not-allowed;
    opacity: 0.55;
    pointer-events: none;
}

.obm-step-circle {
    width: 42px;
    height: 42px;
    border-radius: 999px;
    border: 2px solid var(--obm-border);
    background: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.2s ease;
}

.obm-step-circle .rz-icon {
    font-size: 20px;
    color: var(--obm-text-muted);
}

.obm-step-label {
    font-size: 12px;
    color: var(--obm-text-muted);
    font-weight: 600;
    text-align: center;
    white-space: nowrap;
}

/* Active State */
.obm-step--active .obm-step-circle {
    border-color: var(--obm-primary);
    background: #fff;
}
.obm-step--active .obm-step-circle .rz-icon {
    color: var(--obm-primary);
}
.obm-step--active .obm-step-label {
    color: var(--obm-primary);
}

/* Connector Line */
.obm-step-connector {
    flex: 1;
    height: 2px;
    background: var(--obm-border);
    margin: 0 10px;
    align-self: flex-start;
    margin-top: 21px;
    min-width: 20px;
}

.obm-step-content {
    padding: 32px 24px;
    min-height: 300px;
}

/* ── Step header: title row + expandable info panel ── */
.obm-step-header {
    margin-bottom: 20px;
}

.obm-step-header__title-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
}

/* Info toggle button – pill style, floats right */
.obm-info-toggle {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    flex-shrink: 0;
    padding: 6px 14px;
    border-radius: 999px;
    border: 1px solid var(--obm-border);
    background: #fff;
    color: var(--obm-text-muted);
    font-size: 13px;
    font-weight: 600;
    cursor: pointer;
    transition: background .15s, border-color .15s, color .15s;
    line-height: 1;
}

/* RadzenIcon inside the toggle inherits button color */
.obm-info-toggle .rz-icon {
    font-size: 18px;
    color: inherit;
}

.obm-info-toggle:hover {
    border-color: var(--obm-primary);
    color: var(--obm-primary);
    background: rgba(227,6,19,.05);
}

.obm-info-toggle--active {
    background: #1f1f1f;
    border-color: #1f1f1f;
    color: #fff;
}

.obm-info-toggle--active:hover {
    background: #2a2a2a;
    border-color: #2a2a2a;
    color: #fff;
}

/* Expandable info panel – appears below the title row, full width */
.obm-info-panel {
    margin-top: 10px;
    position: relative;
}

/* Small arrow pointing up-right toward the toggle button */
.obm-info-panel__arrow {
    position: absolute;
    top: -8px;
    right: 52px;
    width: 0;
    height: 0;
    border-left: 8px solid transparent;
    border-right: 8px solid transparent;
    border-bottom: 8px solid #1f1f1f;
}

.obm-info-panel__body {
    background: #1f1f1f;
    border: 1px solid #2e2e2e;
    border-radius: var(--obm-radius-md);
    padding: 16px 18px;
    animation: obm-slide-down .18s ease;
}

@keyframes obm-slide-down {
    from { opacity: 0; transform: translateY(-6px); }
    to   { opacity: 1; transform: translateY(0); }
}

/* Remove old side-by-side layout classes (kept for safety, overridden) */
.obm-step-header-row { display: block; }
.obm-step-info-area  { display: none; }

/* Subtitle spacing */
.obm-step-header .obm-step-subtitle,
.obm-step-header p.obm-step-subtitle {
    margin-bottom: 0;
}

@media (max-width: 768px) {
    .obm-info-panel__arrow {
        right: 16px;
    }
}

.obm-step-title {
    font-size: 20px;
    font-weight: 700;
    margin: 0 0 6px 0;
    color: var(--obm-text);
}

.obm-step-subtitle {
    color: var(--obm-text-muted);
    font-size: 14px;
    margin: 0 0 24px 0;
}

/* Action Bar */
.obm-actionbar {
    display: flex;
    flex-wrap: wrap;
    border-top: 1px solid var(--obm-border);
    padding: 16px 24px;
    background: var(--obm-component-bg);
    align-items: center;
    justify-content: space-between;
    gap: 10px;
}
.obm-actionbar:has(> .rz-button:only-child) {
    justify-content: flex-end;
}

.obm-step-count {
    color: var(--obm-text-muted);
    font-size: 12px;
    text-align: center;
    font-weight: 600;
    flex: 0 0 auto;
}

/* --md (768px): shrink padding, let buttons wrap naturally */
@media (max-width: 768px) {
    .obm-actionbar {
        padding: 14px 16px;
    }
    .obm-actionbar .rz-button {
        font-size: 13px;
        min-height: 38px;
        padding: 0 12px;
    }
}

/* --sm (576px): stack vertically, center step-count, buttons full-width */
@media (max-width: 576px) {
    .obm-actionbar {
        flex-direction: column;
        gap: 10px;
        align-items: stretch;
        padding: 14px 16px;
    }
    .obm-actionbar .rz-button {
        width: 100%;
        justify-content: center;
    }
    .obm-step-count {
        order: -1;
        text-align: center;
        padding-bottom: 4px;
        border-bottom: 1px solid var(--obm-border);
        margin-bottom: 2px;
    }
}


/* ------------------------------ */
/* Datenschutzhinweise Card Style */
/* ------------------------------ */

.obm-ds-card {
  border: 1px solid var(--obm-border);
  border-radius: var(--obm-radius-md);
  box-shadow: none !important;
  padding: 24px;
}

.obm-ds-highlight {
  border: 1px solid var(--obm-border);
  border-radius: var(--obm-radius-md);
  background: var(--obm-surface-alt);
  box-shadow: none !important;
  padding: 20px;
}

.obm-ds-muted {
  color: var(--obm-text-muted);
  font-size: 14px;
  line-height: 1.5;
}

.obm-ds-email {
  color: var(--obm-primary);
  font-weight: 600;
}

.obm-ds-divider {
  height: 1px;
  background: var(--obm-border);
  margin: 12px 0;
}

.obm-ds-link {
  color: var(--obm-primary) !important;
  font-weight: 700;
  text-decoration: none;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 14px;
}
.obm-ds-link:hover {
  text-decoration: underline;
}
.obm-ds-link .rz-icon {
  color: var(--obm-primary);
  font-size: 18px;
}


/* ------------------------------ */
/* Persönliche Daten Form Styling */
/* ------------------------------ */

.obm-inner-form-card {
  border: 1px solid var(--obm-border);
  border-radius: var(--obm-radius-md);
  box-shadow: none !important;
  padding: 18px;
  min-height: 600px;
  background-color: var(--obm-component-bg);
}

.obm-form-section-header {
  padding-bottom: 10px;
  border-bottom: 1px solid var(--obm-border);
  margin-bottom: 14px;
}

.obm-form-heading-title {
  font-size: 18px;
  font-weight: 700;
  margin: 0;
  color: var(--obm-text);
}

.obm-form-heading-subtitle {
  color: var(--obm-text-muted);
  font-size: 13px;
  margin: 4px 0 0 0;
}

.obm-form-body {
    padding-top: 10px;
}

.obm-section-divider {
  display: flex;
  align-items: center;
  gap: 12px;
  margin: 24px 0 16px 0;
  color: var(--obm-text-muted);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}
.obm-section-divider:before,
.obm-section-divider:after {
  content: "";
  flex: 1;
  height: 1px;
  background: var(--obm-border);
}

/* Info Alert Styling (Dark) */
.obm-info-alert {
  background-color: #1f1f1f !important;
  border: 1px solid #2a2a2a !important;
  color: #E5E7EB !important;
  margin: 12px 0 18px 0;
  border-radius: var(--obm-radius-md) !important;
}

.obm-info-alert .rz-alert-title,
.obm-info-alert span,
.obm-info-alert .rz-alert-message {
    color: #E5E7EB !important;
}

.obm-info-alert .rz-button {
  background: transparent !important;
  border: none !important;
  color: #D1D5DB !important;
}

.obm-info-alert .rz-button:hover {
    background-color: rgba(255,255,255,0.1) !important;
}

/* Info Icon Button (when alert is closed) */
.obm-info-icon-btn.rz-button {
  border-radius: 999px !important;
  width: 36px;
  height: 36px;
  min-width: 36px;
  padding: 0 !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
}


/* ------------------------------ */
/* Qualifikation Step Restyling   */
/* ------------------------------ */

.obm-qual-root {
    padding-bottom: 24px;
}

.obm-step-header {
    margin-bottom: 24px;
}

.obm-step-title {
    font-size: 24px;
    font-weight: 700;
    color: var(--obm-text);
    margin: 0;
}

.obm-step-subtitle {
    color: var(--obm-text-muted);
    font-size: 14px;
    margin-top: 6px;
}

.obm-section-card {
    border: 1px solid var(--obm-border);
    border-radius: var(--obm-radius-md) !important;
    box-shadow: none !important;
    padding: 24px;
    background: var(--obm-component-bg);
    margin-bottom: 0;
}

.obm-section-card-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 20px;
    border-bottom: 1px solid var(--obm-border-strong);
    padding-bottom: 12px;
}

.obm-section-card-title {
    font-size: 18px;
    font-weight: 700;
    color: var(--obm-text);
    margin: 0;
}

.obm-section-card-title .rz-text-h5 {
    margin: 0;
    font-size: inherit;
    font-weight: inherit;
}

.obm-link-red {
    color: var(--obm-primary) !important;
    background: transparent !important;
    border: none !important;
    padding: 0 !important;
    font-weight: 600 !important;
    font-size: 14px !important;
    text-transform: none !important;
    display: inline-flex !important;
    align-items: center !important;
    gap: 6px;
    box-shadow: none !important;
}

.obm-link-red:hover {
    text-decoration: underline;
    background: transparent !important;
}

.obm-link-red .rz-icon {
    font-size: 18px !important;
}

/* File Row Styling */
.obm-file-row {
    display: flex;
    align-items: center;
    gap: 16px;
    border: 1px solid var(--obm-border);
    border-radius: var(--obm-radius-md);
    padding: 16px;
    background: var(--obm-component-bg);
    transition: border-color 0.2s;
}

.obm-file-row:hover {
    border-color: var(--obm-primary);
}

.obm-file-ic {
    width: 48px;
    height: 48px;
    min-width: 48px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 8px;
    background: var(--obm-surface-alt);
    color: var(--obm-text-muted);
}

.obm-file-ic .rz-icon {
    font-size: 24px;
}

.obm-file-meta {
    flex: 1;
    min-width: 0;
    flex-wrap: wrap;
}

.obm-file-title {
    font-weight: 600;
    color: var(--obm-text);
    font-size: 14px;
    margin-bottom: 2px;
}

.obm-file-sub {
    color: var(--obm-text-muted);
    font-size: 12px;
}

.obm-file-action {
    display: flex;
    align-items: center;
}

@media (max-width: 576px) {
    .obm-file-row {
        flex-direction: column;
        align-items: center;
        gap: 16px;
    }
    
    .obm-file-meta {
        text-align: center;
    }

    .obm-file-action {
        align-self: stretch;
        margin-top: -8px;
    }
}

/* Sub-card styling for repeatable items */
.obm-subcard {
    border: 1px solid var(--obm-border);
    border-radius: var(--obm-radius-md);
    padding: 16px;
    background: var(--obm-component-bg);
    position: relative;
    margin-bottom: 12px;
}

.obm-subcard:last-child {
    margin-bottom: 0;
}

/* ------------------------------ */
/* Zusammenfassung Step Styles    */
/* ------------------------------ */

.obm-summary-header {
    margin-bottom: 24px;
}

.obm-summary-title {
    font-size: 24px;
    font-weight: 700;
    color: var(--obm-text);
    margin: 0;
}

.obm-summary-subtitle {
    color: var(--obm-text-muted);
    font-size: 14px;
    margin-top: 6px;
}

.obm-section-card {
    border: 1px solid var(--obm-border);
    border-radius: var(--obm-radius-md);
    padding: 24px;
    background: var(--obm-component-bg);
    margin-bottom: 20px;
    box-shadow: none !important;
}

.obm-section-head {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 16px;
    padding-bottom: 12px;
    border-bottom: 1px solid var(--obm-border);
}

.obm-section-title {
    font-size: 18px;
    font-weight: 700;
    color: var(--obm-text);
    margin: 0;
}

.obm-muted-label {
    font-size: 12px;
    color: var(--obm-text-muted);
    text-transform: uppercase;
    letter-spacing: 0.05em;
    font-weight: 600;
    margin-bottom: 4px;
    display: block;
}

.obm-value-text {
    font-size: 14px;
    font-weight: 600;
    color: var(--obm-text);
}

.obm-section-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 16px;
}

@media (min-width: 768px) {
    .obm-section-grid {
        grid-template-columns: 1fr 1fr;
    }
}

.obm-field-group {
    margin-bottom: 12px;
}

/* File Pills */
.obm-file-pill-container {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-top: 8px;
}

.obm-file-pill {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 6px 12px;
    border-radius: 20px;
    background: var(--obm-surface-alt);
    font-size: 13px;
    color: var(--obm-text);
    border: 1px solid var(--obm-border);
}

.obm-file-pill .rz-icon {
    font-size: 16px;
    color: var(--obm-success);
}

/* Mitteilungen List Redesign */
.mitteilungen-shell {
    max-width: 1000px;
    width: 100%;
    padding: 16px;
    margin: 10px auto;
}

.mitteilungen-header-row {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    align-items: flex-end;
    gap: 8px;
    margin-bottom: 24px;
}

.mitteilungen-stats {
    color: var(--obm-text-muted);
    font-size: 14px;
    margin-top: 4px;
}

.mitteilungen-list {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.mitteilungen-group-label {
    font-size: 12px;
    font-weight: 700;
    color: var(--obm-text-muted);
    text-transform: uppercase;
    letter-spacing: 0.05em;
    margin: 16px 0 8px 4px;
}

.obm-conv-row {
    cursor: pointer;
    background: var(--obm-component-bg);
    border: 1px solid var(--obm-border);
    border-radius: var(--obm-radius-md);
    padding: 16px;
    position: relative;
    transition: box-shadow 0.15s ease, border-color 0.15s ease;
    display: flex;
    align-items: center;
    gap: 16px;
}

.obm-conv-row:hover {
    box-shadow: var(--obm-shadow-md);
    border-color: var(--obm-border-strong);
}

.obm-conv-row--unread {
    border-left: 4px solid var(--obm-primary);
}

.obm-conv-icon {
    width: 48px;
    height: 48px;
    border-radius: var(--obm-radius-md);
    background: var(--obm-surface-alt);
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}
.obm-conv-icon .rz-icon {
    color: var(--obm-text-muted);
    font-size: 24px;
}
.obm-conv-row--unread .obm-conv-icon {
    background: var(--obm-primary-light);
}
.obm-conv-row--unread .obm-conv-icon .rz-icon {
    color: var(--obm-primary);
}

.obm-conv-content {
    flex: 1;
    min-width: 0;
}

.obm-conv-sender {
    font-size: 13px;
    color: var(--obm-text-muted);
    margin-bottom: 2px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.obm-conv-subject {
    font-size: 16px;
    font-weight: 700;
    color: var(--obm-text);
    margin-bottom: 2px;
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
}

.obm-conv-snippet {
    font-size: 14px;
    color: var(--obm-text-muted);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.obm-conv-meta {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 4px;
    min-width: 80px;
    flex-shrink: 0;
}

.obm-conv-time {
    font-size: 12px;
    color: var(--obm-text-muted);
}

.obm-conv-arrow {
    color: var(--obm-border-strong);
}
.obm-conv-row:hover .obm-conv-arrow {
    color: var(--obm-primary);
}

/* --md (768px): tighter padding, smaller title */
@media (max-width: 768px) {
    .mitteilungen-shell {
        padding: 12px;
    }
    .mitteilungen-header-row {
        margin-bottom: 18px;
    }
    .obm-conv-row {
        padding: 12px;
        gap: 12px;
    }
    .obm-conv-subject {
        font-size: 15px;
    }
    .obm-conv-meta {
        min-width: 60px;
    }
}

/* --sm (576px): stack header, reduce conv-row to compact layout */
@media (max-width: 576px) {
    .mitteilungen-header-row {
        flex-direction: column;
        align-items: flex-start;
        gap: 4px;
        margin-bottom: 14px;
    }
    .mitteilungen-stats {
        font-size: 13px;
    }
    .obm-conv-row {
        flex-wrap: wrap;
        padding: 12px;
        gap: 10px;
    }
    .obm-conv-icon {
        width: 40px;
        height: 40px;
    }
    .obm-conv-icon .rz-icon {
        font-size: 20px;
    }
    .obm-conv-subject {
        font-size: 14px;
    }
    .obm-conv-snippet {
        font-size: 13px;
    }
}

/* --xs (380px): even more compact */
@media (max-width: 380px) {
    .mitteilungen-shell {
        padding: 8px;
    }
    .obm-conv-row {
        padding: 10px;
        gap: 8px;
    }
    .obm-conv-subject {
        font-size: 13px;
    }
    .mitteilungen-group-label {
        font-size: 11px;
        margin: 12px 0 6px 2px;
    }

    .obm-conv-meta {
        flex-direction: row;
        align-items: center;
        width: 100%;
        min-width: 0;
        gap: 8px;
        border-top: 1px solid var(--obm-border);
        padding-top: 8px;
        margin-top: 2px;
    }
    .obm-conv-time {
        flex: 1;
    }
    .obm-conv-arrow {
        margin-left: auto;
    }
}


/* Bewerbungen – Responsive Table/Card layout */

.bew-shell {
    max-width: 1100px;
    width: 100%;
    margin: 0 auto;
    padding: 16px;
}

.bew-header {
    display: flex;
    justify-content: space-between;
    align-items: flex-end;
    margin-bottom: 20px;
}

/* Desktop: show table, hide cards */
.bew-desktop-only { display: block; }
.bew-mobile-only  { display: none; }

@media (max-width: 868px) {
    .bew-desktop-only { display: none !important; }
    .bew-mobile-only  { display: block !important; }
}

/* Mobile Card list */
.bew-card-list {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.bew-card.rz-card {
    border: 1px solid var(--obm-border);
    border-radius: var(--obm-radius-md);
    padding: 16px;
    background: var(--obm-component-bg);
    box-shadow: var(--obm-shadow-sm);
    transition: box-shadow 0.15s ease, border-color 0.15s ease;
    cursor: default;
}

.bew-card.rz-card:hover {
    box-shadow: var(--obm-shadow-md);
    border-color: var(--obm-border-strong);
}

.bew-card__top {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    margin-bottom: 10px;
}

.bew-card__besoldung {
    background: var(--obm-surface-alt) !important;
    color: var(--obm-text-muted) !important;
    border: 1px solid var(--obm-border) !important;
    font-size: 11px !important;
    font-weight: 600;
}

.bew-card__title {
    font-size: 16px;
    font-weight: 700;
    color: var(--obm-text);
    margin-bottom: 8px;
    line-height: 1.35;
}

.bew-card__dienststelle,
.bew-card__meta-row {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 13px;
    color: var(--obm-text-muted);
    margin-bottom: 6px;
}

.bew-card__dates {
    display: flex;
    gap: 16px;
    margin: 12px 0;
    padding: 10px 12px;
    background: var(--obm-surface-alt);
    border-radius: var(--obm-radius-sm);
    border: 1px solid var(--obm-border);
}

.bew-card__date-item {
    display: flex;
    flex-direction: column;
    gap: 2px;
    flex: 1;
}

.bew-card__label {
    font-size: 11px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: var(--obm-text-muted);
}

.bew-card__value {
    font-size: 14px;
    font-weight: 600;
    color: var(--obm-text);
}

.bew-card__actions {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-top: 4px;
    flex-wrap: wrap;
}

.bew-card__actions .rz-button {
    flex: 1;
    min-width: 0;
    justify-content: center;
}

/* Small screen tweaks for card dates */
@media (max-width: 380px) {
    .bew-card__dates {
        flex-direction: column;
        gap: 8px;
    }
    .bew-card__actions {
        flex-direction: column;
    }
    .bew-card__actions .rz-button {
        width: 100%;
    }
}


/* ── Footer ── */

/* Override Radzen's own footer background */
.rz-footer {
    background: #ededed !important;
    border-top: none !important;
    padding: 0 !important;
    margin-top: auto !important;
}

/*.rz-layout {*/
/*    display: flex !important;*/
/*    flex-direction: column !important;*/
/*    min-height: 100vh !important;*/
/*    height: auto !important;*/
/*}*/

/*.rz-body {*/
/*    flex: 1 1 auto !important;*/
/*    overflow-y: auto;*/
/*}*/

.obm-footer {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 8px;
    width: 100%;
    background: #ededed;
    padding: 14px 24px;
    font-size: 14px;
    color: var(--obm-text-muted);
    position: relative;
}

/* Accent gradient line at the very bottom of the footer */
.obm-footer::after {
    content: "";
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 10px;
    border-radius: 0;
    background: linear-gradient(
        90deg,
        #ff002a 0 calc(100% / 6),
        #f56727 0 calc((100% / 6) * 2),
        #e9dacd 0 calc((100% / 6) * 3),
        #96c200 0 calc((100% / 6) * 4),
        #0d9c71 0 calc((100% / 6) * 5),
        #32b8b9 0 calc((100% / 6) * 6)
    );
}

/* Add bottom padding so text sits above the accent line */
.obm-footer {
    padding-bottom: calc(14px + 10px);
}

.obm-footer__copy,
.obm-footer__copy.rz-text {
    flex: 1;
    min-width: 0;
    font-size: 14px;
    color: var(--obm-text-muted) !important;
    margin: 0;
}

.obm-footer__links {
    display: flex;
    align-items: center;
    gap: 20px;
    flex-shrink: 0;
}

.obm-footer__link,
.obm-footer__link.rz-link,
a.obm-footer__link {
    color: var(--obm-text-muted) !important;
    text-decoration: none !important;
    font-size: 14px;
    font-weight: 600;
    transition: color .15s;
}

.obm-footer__link:hover,
.obm-footer__link.rz-link:hover,
a.obm-footer__link:hover {
    color: var(--obm-primary) !important;
    text-decoration: underline !important;
}

@media (max-width: 600px) {
    .obm-footer {
        flex-direction: column;
        align-items: flex-start;
        gap: 6px;
    }
}