/*
  Master Login/Regi. (Konto) – Mobile-First
  Palette: Grau / Orange / Schwarz
*/

.mlr-wrap{
  --mlr-accent: var(--mlr-brand, #ff7a00);
  --mlr-brand: var(--mlr-accent);
  --mlr-bg: #f5f6f8;
  --mlr-surface: #ffffff;
  --mlr-ink: #111827;
  --mlr-muted: rgba(17,24,39,.64);
  --mlr-border: rgba(17,24,39,.10);
  --mlr-accent: #ff7a00;
  --mlr-brand: var(--mlr-accent);
  --mlr-dark: #0b0f14;
  --mlr-dark-2: #121823;
  --mlr-shadow: 0 10px 26px rgba(0,0,0,.08);

  font-family: system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
  font-size: 15px;
  line-height: 1.4;
  color: var(--mlr-ink);
}

/* Width controls */
.mlr-width-full{ width:100%; max-width:none; margin:0; }
.mlr-width-wide{ width:100%; max-width:1260px; margin:0 auto; }
.mlr-width-auto{ width:100%; margin:0 auto; }
@media(min-width: 1024px){ .mlr-width-auto{ max-width:1260px; } }

/* Reduce motion */
.mlr-anim-off .mlr-btn,
.mlr-anim-off .mlr-tab,
.mlr-anim-off .mlr-side__item,
.mlr-anim-off .mlr-input,
.mlr-anim-off .mlr-card{ transition:none !important; }
.mlr-anim-off .mlr-pane{ animation:none !important; }

.mlr-toast{
  border-radius: 16px;
  padding: 12px 14px;
  margin: 12px 0;
  border: 1px solid var(--mlr-border);
  background: var(--mlr-surface);
  box-shadow: 0 8px 18px rgba(0,0,0,.06);
}
.mlr-toast--error{ background:#fff5f5; border-color: rgba(239,68,68,.25); }
.mlr-toast--success{ background:#f0fdf4; border-color: rgba(34,197,94,.25); }

/* Auth */
.mlr-auth{ display:grid;
    gap:16px; grid-template-columns: 1fr; align-items:stretch; }
@media(min-width: 900px){ .mlr-auth{ grid-template-columns: 420px 1fr; } }

.mlr-auth__card{
  background: linear-gradient(135deg, var(--mlr-dark), var(--mlr-dark-2));
  color:#fff;
  border-radius: 24px;
  padding: 16px;
  box-shadow: 0 18px 40px rgba(0,0,0,.20);
  border: 1px solid rgba(255,255,255,.08);
}
.mlr-auth__side{
  background: var(--mlr-surface);
  border-radius: 24px;
  padding: 18px;
  border: 1px solid var(--mlr-border);
  box-shadow: var(--mlr-shadow);
}
.mlr-auth__side h2{ margin:0 0 8px; font-size:22px; }
.mlr-bullets{ padding-left:18px; margin:12px 0 0; }
.mlr-bullets li{ margin:6px 0; }

/* Tabs (Login/Register) */
.mlr-auth__tabs{ display:flex; gap:8px; margin-bottom:14px; }
.mlr-tab{
  border:0;
  background: rgba(255,255,255,.08);
  color:#fff;
  padding: 10px 12px;
  border-radius: 16px;
  cursor:pointer;
  transition: transform .12s ease, background .12s ease, opacity .12s ease;
}
.mlr-tab:hover{ opacity:.95; transform: translateY(-1px); }
.mlr-tab.is-active{ background: rgba(255,255,255,.16); }

.mlr-pane{ display:none; animation: mlrFade .16s ease; }
.mlr-pane.is-active{ display:block; }
@keyframes mlrFade{ from{opacity:0; transform: translateY(4px);} to{opacity:1; transform:none;} }

/* Forms */
.mlr-form{ display:grid;
    gap:10px; }
.mlr-form-grid{ display:grid;
    gap:10px; }
.mlr-label span{ display:block; font-size:13px; opacity:.9; margin-bottom:6px; }
.mlr-input{
  width:100%;
  box-sizing:border-box;
  max-width: 420px;
  min-width: 0;
  border-radius: 16px;
  border: 1px solid var(--mlr-border);
  padding: 12px 12px;
  font-size: 15px;
  outline: none;
  background: var(--mlr-surface);
  color: var(--mlr-ink);
  transition: box-shadow .12s ease, border-color .12s ease;
}
.mlr-auth__card .mlr-input{ border-color: rgba(255,255,255,.22); background: rgba(255,255,255,.07); color:#fff; }
.mlr-auth__card .mlr-label span{ opacity: .85; }
.mlr-input:focus{ border-color: var(--mlr-accent); box-shadow: 0 0 0 4px rgba(255,122,0,.16); }
.mlr-check{ display:flex; gap:10px; align-items:center; font-size:14px; opacity:.95; }
.mlr-check input{ width:16px; height:16px; }

/* Buttons */
.mlr-btn{
  border:0;
  border-radius: 18px;
  padding: 12px 14px;
  background: var(--mlr-accent);
  color:#fff;
  font-weight: 700;
  cursor:pointer;
  transition: transform .12s ease, filter .12s ease;
}
.mlr-btn:hover{ filter: brightness(1.04); transform: translateY(-1px); }
.mlr-btn:active{ transform:none; }
.mlr-btn--ghost{ background: var(--mlr-surface); color: var(--mlr-ink); border:1px solid var(--mlr-border); }
.mlr-btn--subtle{
  background: rgba(17,24,39,.03);
  color: var(--mlr-accent);
  border: 1px solid rgba(17,24,39,.10);
  padding: 9px 11px;
  border-radius: 14px;
  font-weight: 900;
}
.mlr-btn--subtle:hover{ background: rgba(255,122,0,.06); }
.mlr-btn-link{ background:none; border:0; padding:0; cursor:pointer; }

/* Danger button (e.g. Entfernen) */
.mlr-btn--danger{
  background: rgba(239, 68, 68, .10);
  color: #b91c1c;
  border: 1px solid rgba(239, 68, 68, .28);
  font-weight: 900;
}
.mlr-btn--danger:hover{ background: rgba(239, 68, 68, .14); }

.mlr-help{ margin-top:6px; }
.mlr-help a{ color: rgba(255,255,255,.92); text-decoration: underline; }

/* Dashboard */
.mlr-dash{ margin-top: 10px; }
.mlr-dash__top{ display:flex; gap:14px; justify-content:space-between; align-items:center; flex-wrap:wrap; }
.mlr-h1{ margin:0; font-size:26px; }
.mlr-sub{ margin:6px 0 0; color: var(--mlr-muted); }
.mlr-actions{ display:flex; gap:10px; }

.mlr-kicker{ font-size:12px; letter-spacing:.02em; text-transform: uppercase; color: rgba(17,24,39,.55); font-weight: 800; }

/* Main content container (80%) */
.mlr-main__card{
  background: var(--mlr-surface);
  border: 1px solid var(--mlr-border);
  border-radius: 24px;
  box-shadow: var(--mlr-shadow);
  padding: 14px;
}
.mlr-main__top{
  display:flex;
  gap:12px;
  justify-content:space-between;
  align-items:center;
  flex-wrap:wrap;
  padding: 2px 2px 10px;
  border-bottom: 1px solid rgba(17,24,39,.06);
  margin-bottom: 10px;
}

/* Summary cards */
.mlr-grid{ display:grid;
    gap:14px; }
.mlr-grid--3{ grid-template-columns: 1fr; }
@media(min-width: 900px){ .mlr-grid--3{ grid-template-columns: 2fr 1fr 1fr; } }

/* Top cards (Welcome + Next Delivery + Open Orders + Favorites/Support) */
.mlr-grid--4{ grid-template-columns: 1fr; }
/* Mobile: show top tiles & meta tiles in 2 columns (requested) */
@media(max-width: 899px){
  /* Mobile: full device width (break out of theme containers) */
  .mlr-wrap.alignwide,
  .mlr-wrap.alignfull{
    width: 100vw;
    max-width: 100vw;
    margin-left: calc(50% - 50vw);
    margin-right: calc(50% - 50vw);
    padding-left: 12px;
    padding-right: 12px;
  }

  /* Mobile typography & sizing (prevent oversized rendering in TT5) */
  .mlr-wrap{ font-size: 13px; line-height: 1.28; }
  .mlr-wrap .dashicons{ font-size: 16px; width: 16px; height: 16px; }

  /* 2-column tiles */
  .mlr-grid--4{ grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .mlr-grid{ gap: 10px; }
  .mlr-grid > *{ min-width: 0; }

  /* Compact tiles */
  .mlr-card{ padding: 9px; border-radius: 18px; }
  .mlr-card__icon{ width: 32px; height: 32px; border-radius: 12px; }
  .mlr-card__kicker{ font-size: 10px; }
  .mlr-card__title{ font-size: 14px; font-weight: 800; margin-top: 6px; }
  .mlr-card--welcome .mlr-card__title{ font-size: 15px; }
  .mlr-card__big{ font-size: 20px; margin-top: 4px; }
  .mlr-muted{ font-size: 12px; }
  .mlr-pill{ font-size: 10px; padding: 4px 7px; }

  .mlr-card__cta{ gap: 8px; margin-top: 8px; }
  .mlr-card__row{ gap: 10px; margin-top: 8px; }
  .mlr-btn-link, .mlr-link{ font-size: 12px; }

  /* Fix: top-right links ("Zu Bestellungen" / "Ansehen") stay inside cards */
  .mlr-card__head{ flex-wrap: wrap; align-items: flex-start; }
  .mlr-card__head-left{ flex: 1 1 auto; min-width: 0; }
  .mlr-card__head .mlr-btn-link.mlr-link{
    margin-left: auto;
    white-space: nowrap;
    padding: 4px 8px;
    border-radius: 999px;
    border: 1px solid rgba(17,24,39,.12);
    background: rgba(17,24,39,.03);
    font-weight: 900;
  }

  /* Keep tiles visually consistent within each row */
  .mlr-grid--4 > .mlr-card{ height: 100%; }
  .mlr-grid--4 > .mlr-meta-card{ height: 100%; }

  /* Meta tiles under the top cards */
  .mlr-meta-card{ padding: 8px 10px; border-radius: 16px; }
  .mlr-meta-card__k{ font-size: 10px; }
  .mlr-meta-card__v{ font-size: 12px; }
}
@media(min-width: 900px){ .mlr-grid--4{ grid-template-columns: repeat(4, 1fr); } }
.mlr-grid--2{ grid-template-columns: 1fr; }
@media(min-width: 900px){ .mlr-grid--2{ grid-template-columns: 1fr 1fr; } }
.mlr-grid--cards{ grid-template-columns: 1fr; }
@media(min-width: 700px){ .mlr-grid--cards{ grid-template-columns: repeat(2, 1fr); } }
@media(min-width: 1050px){ .mlr-grid--cards{ grid-template-columns: repeat(3, 1fr); } }

.mlr-card{
  background: var(--mlr-surface);
  border: 1px solid var(--mlr-border);
  border-radius: 24px;
  padding: 14px;
  box-shadow: var(--mlr-shadow);
  transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease;
}
.mlr-card:hover{ transform: translateY(-2px); box-shadow: 0 16px 36px rgba(0,0,0,.10); border-color: rgba(17,24,39,.14); }
.mlr-anim-off .mlr-card{ transition:none !important; }
.mlr-card--hero{ background: linear-gradient(135deg, rgba(255,122,0,.16), rgba(17,24,39,.03)); }
.mlr-card--soft{ background: #f8fafc; }

/* Welcome card – same "hero" surface (requested) */
.mlr-card--welcome{
  background: linear-gradient(135deg, rgba(255,122,0,.16), rgba(17,24,39,.03));
}
.mlr-card--welcome .mlr-card__title{ font-size: 22px; letter-spacing: -.01em; }
.mlr-welcome__company{
  margin-top: 12px;
  padding: 10px 12px;
  border-radius: 16px;
  background: rgba(255,255,255,.72);
  border: 1px solid rgba(17,24,39,.08);
  box-shadow: 0 10px 22px rgba(0,0,0,.06);
  display:flex;
  gap:8px;
  align-items:baseline;
}
.mlr-welcome__company-label{ font-size: 11px; letter-spacing: .02em; text-transform: uppercase; color: rgba(17,24,39,.56); }
.mlr-welcome__company-value{ font-size: 14px; font-weight: 900; color: var(--mlr-ink); }
.mlr-welcome__meta{ margin-top: 12px; display:grid;
    gap:10px; }
.mlr-welcome__item{
  display:grid;
      grid-template-columns: 34px 1fr;
  gap:10px;
  align-items:center;
  padding: 10px 10px;
  border-radius: 16px;
  background: rgba(255,255,255,.72);
  border: 1px solid rgba(17,24,39,.08);
  box-shadow: 0 10px 22px rgba(0,0,0,.06);
}
.mlr-welcome__ico{
  width: 34px;
  height: 34px;
  border-radius: 14px;
  display:flex;
  align-items:center;
  justify-content:center;
  background: rgba(17,24,39,.06);
  border: 1px solid rgba(17,24,39,.08);
}
.mlr-welcome__label{ font-size: 11px; letter-spacing: .02em; text-transform: uppercase; color: rgba(17,24,39,.56); }
.mlr-welcome__value{ font-size: 14px; font-weight: 800; color: var(--mlr-ink); }
/* Dashboard meta row under the top cards */
.mlr-grid--meta{ margin-top: 10px; }
.mlr-meta-card{
  background: linear-gradient(135deg, rgba(255,122,0,.16), rgba(17,24,39,.03));
  border: 1px solid var(--mlr-border);
  border-radius: 18px;
  padding: 10px 12px;
  box-shadow: var(--mlr-shadow);
  display:flex;
  gap:8px;
  align-items:baseline;
  justify-content:center;
  transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease;
}
.mlr-meta-card:hover{ transform: translateY(-1px); box-shadow: 0 14px 30px rgba(0,0,0,.10); border-color: rgba(17,24,39,.14); }
.mlr-anim-off .mlr-meta-card{ transition:none !important; }
.mlr-meta-card__k{
  color: rgba(17,24,39,.56);
  font-size: 11px;
  letter-spacing: .02em;
  text-transform: uppercase;
  font-weight: 800;
}
.mlr-meta-card__v{
  color: var(--mlr-ink);
  font-weight: 900;
  font-size: 13px;
  max-width: 100%;
  overflow:hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.mlr-meta{
  background: var(--mlr-surface);
  border: 1px solid rgba(17,24,39,.10);
  border-radius: 18px;
  padding: 10px 12px;
  box-shadow: 0 10px 22px rgba(0,0,0,.06);
  display:flex;
  align-items:baseline;
  justify-content:space-between;
  gap:10px;
}
.mlr-meta__label{ font-size: 11px; letter-spacing: .02em; text-transform: uppercase; color: rgba(17,24,39,.56); }
.mlr-meta__value{ font-size: 14px; font-weight: 900; color: var(--mlr-ink); text-align:right; }
.mlr-card__kicker{ font-size:12px; letter-spacing:.02em; color: rgba(17,24,39,.56); text-transform: uppercase; }
.mlr-card__title{ font-size:20px; font-weight:800; margin-top:8px; }
.mlr-card__big{ font-size:34px; font-weight:900; margin-top:6px; }
.mlr-card__meta{ display:flex; gap:8px; flex-wrap:wrap; margin-top:8px; }
.mlr-card__row{ display:flex; gap:14px; justify-content:space-between; margin-top:10px; }

/* Card icon chip */
.mlr-card__icon{
  width: 38px;
  height: 38px;
  border-radius: 14px;
  display:flex;
  align-items:center;
  justify-content:center;
  background: rgba(17,24,39,.06);
  border: 1px solid rgba(17,24,39,.08);
}
.mlr-card__icon .dashicons{ font-size:18px; width:18px; height:18px; }

/* Profile image (shown only in welcome card) */
.mlr-avatar-img{ width:28px; height:28px; border-radius:50%; object-fit:cover; display:block; }
.mlr-avatar-preview{ display:flex; align-items:center; gap:10px; margin:8px 0; }
.mlr-avatar-preview img{ width:32px; height:32px; border-radius:50%; object-fit:cover; display:block; border:1px solid rgba(17,24,39,.10); }
.mlr-card__head{ display:flex; gap:10px; align-items:center; justify-content:space-between; }
.mlr-card__head-left{ display:flex; gap:10px; align-items:center; }
.mlr-card__cta{ margin-top: 10px; display:flex; gap:10px; flex-wrap:wrap; }

/* Key/Value line (used in dashboard cards) */
.mlr-kv{ display:flex; gap:6px; align-items:baseline; flex-wrap:wrap; }
.mlr-kv__k{ color: rgba(17,24,39,.56); font-size: 12px; text-transform: uppercase; letter-spacing: .02em; font-weight: 800; }
.mlr-kv__v{ color: var(--mlr-ink); font-weight: 900; font-size: 14px; }

.mlr-pill{ display:inline-flex; padding:6px 10px; border-radius:999px; border:1px solid var(--mlr-border); background: var(--mlr-surface); font-size:12px; }
.mlr-muted{ color: var(--mlr-muted); font-size:14px; }
.mlr-link{ color: var(--mlr-accent); font-weight: 700; text-decoration:none; }
.mlr-link:hover{ text-decoration:underline; }
.mlr-actions-inline{ display:flex; gap:10px; flex-wrap:wrap; }

/* New layout: left nav (20%) + content (80%) */
.mlr-layout{ display:grid;
    gap:14px; grid-template-columns: 1fr; margin-top: 14px; }
@media(min-width: 900px){
  .mlr-layout{ grid-template-columns: minmax(220px, 20%) 1fr; align-items:start; }
}

.mlr-side{
  background: linear-gradient(180deg, var(--mlr-dark), var(--mlr-dark-2));
  border: 1px solid rgba(255,255,255,.08);
  border-radius: 24px;
  padding: 10px;
  box-shadow: 0 18px 42px rgba(0,0,0,.20);
}

/* Mobile: horizontal nav */
@media(max-width: 899px){
  .mlr-side{ display:flex; gap:10px; overflow:auto; -webkit-overflow-scrolling: touch; }
  .mlr-side__item{ flex: 0 0 auto; white-space: nowrap; }
}

.mlr-side__item{
  width:100%;
  display:flex;
  align-items:center;
  gap:10px;
  padding: 10px 12px;
  border:0;
  border-radius: 18px;
  background: transparent;
  color: rgba(255,255,255,.86);
  cursor:pointer;
  text-align:left;
  transition: transform .12s ease, background .12s ease, opacity .12s ease;
}
.mlr-side__item .dashicons{ font-size:18px; width:18px; height:18px; }
.mlr-side__item:hover{ opacity:.95; transform: translateY(-1px); }
.mlr-side__item.is-active{ background: rgba(255,255,255,.12); color:#fff; }

.mlr-main{ min-width: 0; }

/* Order details drawer */
.mlr-order-details{
  padding: 12px 12px;
  border-top: 1px solid rgba(17,24,39,.06);
  background: #f8fafc;
}
.mlr-order-details[hidden]{ display:none; }
.mlr-order-items{ display:grid;
    gap:8px; margin-top: 10px; }
.mlr-order-item{ display:flex; gap:10px; justify-content:space-between; align-items:flex-start; border:1px solid rgba(17,24,39,.08); background:#fff; border-radius: 16px; padding: 10px; }
.mlr-order-item strong{ font-weight: 800; }
.mlr-order-item small{ color: var(--mlr-muted); }
.mlr-order-cols{ display:grid;
    gap:12px; grid-template-columns: 1fr; margin-top: 10px; }
@media(min-width: 900px){ .mlr-order-cols{ grid-template-columns: 1fr 1fr; } }


/* Order items table (details) */
.mlr-table-wrap{ overflow-x:auto; -webkit-overflow-scrolling: touch; }
table.mlr-table{ border-collapse: collapse; }
.mlr-table--items th, .mlr-table--items td{
  padding: 10px 10px;
  border-top: 1px solid rgba(17,24,39,.08);
  vertical-align: top;
}

/* Orders table header (Cost centers) */
.mlr-wrap table.mlr-table--orders thead th{
  font-size: 12px !important;
  text-transform: uppercase;
  letter-spacing: .04em;
  color: rgba(17,24,39,.70);
  background: rgba(17,24,39,.03);
  border-top: 0;
  padding: 10px 10px;
}

/* Hard guard against theme header overrides inside plugin tables */
.mlr-wrap table.mlr-table thead th{
  font-size: 12px !important;
  line-height: 1.2;
}
.mlr-td-img{ width: 56px; }
.mlr-td-img img{ width:42px; height:42px; border-radius: 12px; object-fit: cover; }
.mlr-td-qty{ width: 92px; font-weight: 400; }
.mlr-td-sku{ width: 140px; color: rgba(17,24,39,.75); }
.mlr-td-price, .mlr-td-total{ width: 150px; text-align: right; font-weight: 400; white-space: nowrap; }
.mlr-td-name{ min-width: 220px; }
.mlr-item-name{ font-weight: 400; }
.mlr-item-meta{ margin-top: 4px; font-size: 13px; color: rgba(17,24,39,.66); }

/* Wishlist: quantity + remove button stack */
.mlr-qty-stack{ display:flex; flex-direction: column; gap: 8px; align-items: flex-start; }
.mlr-td-qty .mlr-input{ max-width: 86px; padding: 10px 10px; border-radius: 14px; }
.mlr-wl-remove{ display:inline-flex; align-items:center; justify-content:center; gap:8px; white-space: nowrap; }
.mlr-wl-remove .mlr-remove-icon{ display:none; }

@media(max-width: 720px){
  .mlr-wl-remove .mlr-remove-text{ display:none; }
  .mlr-wl-remove .mlr-remove-icon{ display:inline-block; width: 18px; height: 18px; font-size: 18px; }
}

/* Totals block */
.mlr-order-totals{
  margin-top: 12px;
  border: 1px solid rgba(17,24,39,.08);
  border-radius: 20px;
  padding: 12px;
  background: var(--mlr-surface);
}
.mlr-total-row{
  display:flex;
  justify-content: space-between;
  gap: 12px;
  padding: 8px 0;
  border-top: 1px solid rgba(17,24,39,.06);
  align-items: center;
}
.mlr-total-row:first-child{ border-top:0; padding-top: 2px; }
.mlr-total-row span{ color: rgba(17,24,39,.70); }
.mlr-total-row strong{ white-space: nowrap; }
.mlr-total-row--grand strong{ font-size: 16px; }
.mlr-total-row--note{ align-items:flex-start; }
.mlr-total-row--note span:last-child{ color: rgba(17,24,39,.90); max-width: 62%; text-align: right; }

/* Tables */
.mlr-table{ width:100%; border:1px solid var(--mlr-border); border-radius: 20px; overflow:hidden; background: var(--mlr-surface); }
.mlr-tr{ display:grid;
    grid-template-columns: 1.1fr 1fr 1fr 1fr 1.3fr; gap:10px; padding:12px 12px; border-top:1px solid rgba(17,24,39,.06); align-items:center; }
.mlr-th{ background:#f8fafc; font-weight:800; border-top:0; }
@media(max-width: 850px){
  .mlr-tr{ grid-template-columns: 1fr; gap:6px; }
  .mlr-th{ display:none; }
}

.mlr-section{ padding: 6px 0; }
.mlr-h2{ margin: 10px 0 6px; font-size: 18px; }
.mlr-h3{ margin: 0 0 10px; font-size: 16px; }
.mlr-empty{ padding:14px; border:1px dashed rgba(17,24,39,.22); border-radius: 20px; color: var(--mlr-muted); background: var(--mlr-surface); }

.mlr-prose p{ margin:0 0 10px; }
.mlr-comment{ padding:10px 0; border-top:1px solid rgba(17,24,39,.06); }
.mlr-ticket-thread{ padding:10px 0; }

/* Order details (inline, no Woo endpoint required) */
.mlr-order-details{
  padding: 12px;
  border-top: 1px solid rgba(17,24,39,.06);
  background: #fbfcfe;
}
.mlr-order-details__grid{ display:grid;
    gap:12px; grid-template-columns: 1fr; }
.mlr-order-details__bottom{ display:grid;
    gap:12px; grid-template-columns: 1fr; align-items:start; }
@media(min-width: 900px){ .mlr-order-details__bottom{ grid-template-columns: 1fr 1fr; } }
.mlr-order-items{ border:1px solid rgba(17,24,39,.08); border-radius: 18px; background: var(--mlr-surface); overflow:hidden; }
.mlr-order-item{ display:grid;
    grid-template-columns: 1fr auto; gap:10px; padding: 10px 12px; border-top:1px solid rgba(17,24,39,.06); }
.mlr-order-item:first-child{ border-top:0; }
.mlr-order-item__name{ font-weight: 800; }
.mlr-order-item__meta{ color: var(--mlr-muted); font-size: 13px; margin-top:4px; }
.mlr-order-item__qty{ font-weight: 800; }
.mlr-order-toggle .dashicons{ transition: transform .12s ease; }
.mlr-order-block.is-open .mlr-order-toggle .dashicons{ transform: rotate(180deg); }

/* Profile helpers */
.mlr-divider{ height:1px; background: rgba(17,24,39,.08); margin: 14px 0; border:0; }
.mlr-addr__head{ font-weight: 800; margin: 2px 0 10px; }

/* Returns item selection */
.mlr-return-items{ border:1px solid rgba(17,24,39,.08); border-radius: 20px; padding: 10px; background: var(--mlr-surface); }
.mlr-return-list{ display:grid;
    gap:8px; }
.mlr-return-item{
  display:grid;
      grid-template-columns: 22px 1fr auto 86px;
  gap:10px;
  align-items:center;
  padding: 10px 10px;
  border: 1px solid rgba(17,24,39,.08);
  border-radius: 18px;
  background: #fafbfc;
}
.mlr-return-item input[type="checkbox"]{ width: 16px; height: 16px; }
.mlr-return-name{ font-weight: 700; }
.mlr-return-meta{ color: var(--mlr-muted); font-size: 13px; }
@media(max-width: 520px){
  .mlr-return-item{ grid-template-columns: 22px 1fr; grid-auto-rows: auto; }
  .mlr-return-meta{ grid-column: 2; }
  .mlr-return-qty{ grid-column: 2; }
}

/* Toast spacing inside wrapper */
.mlr-wrap .mlr-toast:first-child{ margin-top:0; }

/* ------------------------------
 * Cost Centers (Kostenstellen)
 * ------------------------------ */
body.mlr-modal-open{ overflow:hidden; }

.mlr-cc-head{ display:flex; gap:12px; align-items:flex-end; justify-content:space-between; flex-wrap:wrap; }
.mlr-cc-head__actions{ display:flex; gap:10px; flex-wrap:wrap; justify-content:flex-end; }

.mlr-cc-controls{ display:flex; justify-content:flex-end; margin: 0 0 10px; }
.mlr-cc-toggle{ display:inline-flex; border:1px solid rgba(17,24,39,.10); border-radius: 14px; overflow:hidden; background: #fbfcfe; }
.mlr-cc-mode{ border:0; background:transparent; padding: 6px 10px; cursor:pointer; font-weight: 900; font-size: 12px; color: var(--mlr-muted); }
.mlr-cc-mode.is-active{ background: rgba(17,24,39,.08); color: var(--mlr-text); }

.mlr-cc-orders-controls{ display:flex; gap:10px; align-items:center; justify-content:space-between; flex-wrap:wrap; margin-bottom: 10px; }
.mlr-cc-orders-controls__left{ display:flex; gap:10px; align-items:center; flex-wrap:wrap; }
.mlr-cc-orders-month{ max-width: 180px; }
.mlr-cc-orders-search{ max-width: 240px; }
.mlr-table--orders td{ vertical-align: middle; }

.mlr-cc-mode-net .mlr-table--orders .mlr-col-net,
.mlr-cc-mode-gross .mlr-table--orders .mlr-col-gross{ font-weight: 900; }

@media(max-width: 560px){
  .mlr-table--orders .mlr-col-status,
  .mlr-table--orders .mlr-col-net,
  .mlr-table--orders .mlr-col-gross{ display:none; }
}

.mlr-cc-layout{ display:grid;
    gap:14px; grid-template-columns: 1fr; }

.mlr-cc-table .mlr-cc-tr{ grid-template-columns: 1.35fr 1fr 1fr auto auto; }
.mlr-cc-open{ background:none; border:0; padding:0; font:inherit; font-weight:800; color:inherit; cursor:pointer; text-align:left; }
.mlr-cc-row.is-selected{ background: rgba(17,24,39,.02); box-shadow: inset 3px 0 0 var(--mlr-brand); }

.mlr-cc-detail{ min-height: 280px; }
.mlr-cc-detail__loading{ padding: 14px; color: var(--mlr-muted); display:flex; align-items:center; }
.mlr-cc-detail__head{ display:flex; justify-content:space-between; align-items:flex-start; gap:12px; margin-bottom: 10px; }

.mlr-cc-card{ border:1px solid rgba(17,24,39,.08); border-radius: 20px; background: #fbfcfe; padding: 12px; margin-top: 12px; }
.mlr-cc-card__title{ font-weight:800; margin-bottom: 10px; }

.mlr-cc-chart{ height: 160px; display:flex; gap:6px; align-items:stretch; padding: 8px 6px 6px; border:1px solid rgba(17,24,39,.08); border-radius: 18px; background: var(--mlr-surface); }
.mlr-cc-bar{ flex:1; height: 100%; min-width: 0; display:flex; flex-direction:column; align-items:center; justify-content:flex-end; gap:6px; }
.mlr-cc-bar__fill{ width:100%; min-height: 2px; border-radius: 10px; background: var(--mlr-brand); opacity: .65; }
.mlr-cc-bar__label{ font-size: 11px; color: var(--mlr-muted); }

.mlr-cc-thumb{ width: 42px; height: 42px; border-radius: 12px; object-fit: cover; display:block; }
.mlr-cc-thumb--empty{ width: 42px; height: 42px; border-radius: 12px; background: rgba(17,24,39,.06); }

.mlr-cc-totals{ margin-top: 12px; }

/* ------------------------------
 * Modal
 * ------------------------------ */
.mlr-modal{
  position:fixed;
  inset:0;
  z-index: 99999;
  display:flex;
  align-items:center;
  justify-content:center;
  padding: 16px;

  /*
    The modal can be moved to <body> so it opens correctly from other tabs.
    In that case it may no longer be a descendant of .mlr-wrap (where the CSS
    variables are defined). Define the essential vars here so the panel doesn't
    end up transparent.
  */
  --mlr-bg: #f5f6f8;
  --mlr-surface: #ffffff;
  --mlr-ink: #111827;
  --mlr-muted: rgba(17,24,39,.64);
  --mlr-border: rgba(17,24,39,.10);
  --mlr-accent: #ff7a00;
  --mlr-brand: var(--mlr-accent);
  color: var(--mlr-ink);
}
.mlr-modal[hidden]{ display:none; }
.mlr-modal__backdrop{ position:absolute; inset:0; background: rgba(15,23,42,.45); backdrop-filter: blur(4px); }
.mlr-modal__panel{
  position:relative;
  width: min(560px, 100%);
  border-radius: 22px;
  border: 1px solid var(--mlr-border);
  background: #ffffff; /* force solid white */
  box-shadow: 0 20px 60px rgba(0,0,0,.18);
  padding: 14px;
}
.mlr-modal__head{ display:flex; align-items:center; justify-content:space-between; gap:12px; margin-bottom: 10px; }
.mlr-modal__title{ font-weight: 900; font-size: 16px; }
.mlr-modal__close{ width: 34px; height: 34px; border-radius: 12px; border: 1px solid rgba(17,24,39,.10); background: #fbfcfe; cursor:pointer; font-size: 20px; line-height: 30px; }



/* Prevent form elements from overflowing */
.mlr-input, .mlr-input[type="text"], .mlr-input[type="email"], .mlr-input[type="password"], .mlr-input[type="url"], .mlr-input[type="number"], .mlr-input[type="tel"], .mlr-input[type="search"], .mlr-input[type="date"], .mlr-input[type="time"], .mlr-input[type="month"], .mlr-input[type="week"]{
  max-width: 420px;
  width: 100%;
}
.mlr-input.mlr-input--wide{ max-width: 100%; }

/* Smaller numeric fields inside tables (avoid overflow) */
.mlr-td-qty .mlr-input,
.mlr-td-qty input,
.mlr-wl-qty,
.mlr-return-qty{
  width: 78px;
  max-width: 78px;
}


/* Wishlists (Favoriten) */
.mlr-wl-list{ display:grid;
    gap: 12px; }
.mlr-wl{
  border: 1px solid rgba(17,24,39,.08);
  border-radius: 22px;
  overflow: hidden;
  background: var(--mlr-surface);
  box-shadow: 0 10px 24px rgba(0,0,0,.06);
}
.mlr-wl-head{
  width:100%;
  display:grid;
      grid-template-columns: 1fr auto 1fr;
  align-items: center;
  gap: 12px;
  padding: 12px 14px;
  border:0;
  background: linear-gradient(180deg, rgba(17,24,39,.03), rgba(17,24,39,.00));
  cursor: pointer;
  text-align:left;
}
.mlr-wl-head .dashicons{ color: rgba(17,24,39,.70); }
.mlr-wl-head__left{ display:flex; gap:10px; align-items:center; font-weight: 900; }
.mlr-wl-head__mid{ display:flex; justify-content:center; }
.mlr-wl-head__right{ display:flex; gap:8px; align-items:center; }
.mlr-wl-head__right{ justify-self: end; }

.mlr-wl-link{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  padding: 6px 10px;
  border-radius: 999px;
  border: 1px solid rgba(17,24,39,.14);
  background: rgba(17,24,39,.03);
  color: rgba(17,24,39,.75);
  font-size: 12px;
  font-weight: 600;
  line-height: 1;
}
.mlr-wl-link:hover{ background: rgba(17,24,39,.06); }
.mlr-wl-link:focus{ outline: 2px solid rgba(37,99,235,.35); outline-offset: 2px; }
.mlr-wl.is-open .mlr-wl-head .dashicons-arrow-down-alt2{ transform: rotate(180deg); }
.mlr-wl-head .dashicons-arrow-down-alt2{ transition: transform .12s ease; }

.mlr-wl-body{ padding: 12px 14px 14px; }
.mlr-wl-actions{ display:flex; justify-content:flex-end; margin: 0 0 10px; }
.mlr-wl-footer{
  display:flex;
  justify-content: space-between;
  align-items: center;
  gap: 10px;
  margin-top: 10px;
  padding-top: 10px;
  border-top: 1px solid rgba(17,24,39,.08);
}
.mlr-wl-qty{
  padding: 10px 10px;
}

/* Order free-field placeholder */
.mlr-total-row--free{ border-top: 0; padding-top: 10px; }
.mlr-order-free-input{ max-width: 100% !important; width: 100%; }

/* Recommendations list (image + title + price)
   Goal:
   - Avoid distorted cards on small/medium screens (e.g. 1366px) where fixed button widths
     can force wrapping and huge heights.
   - Let the grid decide 1 vs 2 columns based on available width.
*/
.mlr-rec-list{
  display:grid;
  gap: 12px;
  /* 2 columns when there is room; 1 column when it gets tight */
  grid-template-columns: repeat(auto-fit, minmax(560px, 1fr));
  /* Prevent grid items from stretching to the tallest neighbor */
  align-items: start;
}
@media(max-width: 620px){
  .mlr-rec-list{ grid-template-columns: 1fr; }
}
.mlr-rec-item{
  display:flex;
  gap: 12px;
  align-items:center;
  background: var(--mlr-surface);
  border: 1px solid rgba(17,24,39,.08);
  border-radius: 18px;
  padding: 10px 12px;
  box-shadow: 0 8px 18px rgba(0,0,0,.05);
}
.mlr-rec-thumb img{ width:52px; height:52px; border-radius: 14px; object-fit: cover; }
.mlr-rec-body{ min-width:0; flex: 1 1 auto; }
.mlr-rec-title{ font-weight: 900; font-size: 14px; line-height: 1.2; margin: 0; }
.mlr-rec-price{ font-size: 13px; color: var(--mlr-muted); margin-top: 4px; }
.mlr-rec-actions{ margin-left:auto; display:flex; gap:8px; align-items:center; }

/* File input */
.mlr-file{
  max-width: 420px;
}


/* Logout button emphasis */
.mlr-actions .mlr-btn--ghost{
  border-color: rgba(255,122,0,.28);
}
.mlr-actions .mlr-btn--ghost:hover{
  background: rgba(255,122,0,.08);
  border-color: rgba(255,122,0,.40);
}


/* Orders – Infos blocks */
.mlr-order-info-grid{ display:grid;
    gap:12px; }
.mlr-order-info-card{ padding:12px; }
.mlr-order-info-card__title{ font-size:12px; text-transform:uppercase; letter-spacing:.04em; color: rgba(17,24,39,.70); margin-bottom:8px; }

/* Small buttons */
.mlr-btn--sm{ padding: 9px 12px; border-radius: 14px; font-size: 13px; font-weight: 800; }
.mlr-btn--equal{ min-width: 140px; display:inline-flex; align-items:center; justify-content:center; text-decoration:none; }

.mlr-rec-actions--buttons{ display:flex; gap:10px; flex-wrap: nowrap; }
/* Keep action buttons in one row on laptops while still allowing them to shrink */
.mlr-rec-actions--buttons .mlr-btn{ min-width: 0; }
.mlr-rec-actions--buttons .mlr-btn--equal{ min-width: clamp(108px, 12vw, 140px); }

/* Cost centers – month bars hover */
.mlr-cc-bar{ cursor:pointer; border-radius: 14px; padding: 2px; }
.mlr-cc-bar:hover{ background: rgba(17,24,39,.06); transform: translateY(-1px); }
.mlr-cc-bar:active{ transform:none; }

/* ------------------------------
 * Tabellen: Texte zentrieren
 * ------------------------------ */
.mlr-table th,
.mlr-table td{
  text-align: center;
  vertical-align: middle;
}

/* Override: previously right-aligned price/total cells */
.mlr-td-price,
.mlr-td-total{
  text-align: center;
}

/* -------------------------------------------------
 * Mobile polish (Better spacing + readable stacked rows)
 * ------------------------------------------------- */

/* Make plugin content breathe inside block themes */
.mlr-wrap{
  padding: clamp(10px, 3vw, 18px);
}
.mlr-wrap,
.mlr-wrap *,
.mlr-wrap *::before,
.mlr-wrap *::after{
  box-sizing: border-box;
}
.mlr-wrap img{ max-width: 100%; height: auto; }

/* Buttons/links should never overflow on small screens */
.mlr-btn,
.mlr-link,
.mlr-btn-link{ max-width: 100%; }

/* Horizontal nav on mobile: compact pill buttons + nicer scrolling */
@media(max-width: 899px){
  .mlr-side{
    padding: 8px;
    border-radius: 18px;
    scroll-snap-type: x mandatory;
    gap: 8px;
    position: sticky;
    top: calc(var(--wp-admin--admin-bar--height, 0px) + 8px);
    z-index: 20;
  }
  .mlr-side__item{
    width: auto;
    border-radius: 999px;
    background: rgba(255,255,255,.08);
    padding: 9px 11px;
    scroll-snap-align: start;
  }
  .mlr-side__item.is-active{ background: rgba(255,255,255,.16); }
}

/* Stacked rows with labels (Orders / Cost centers tables) */
@media(max-width: 850px){
  .mlr-tr{ padding: 12px; }
  .mlr-tr .mlr-cell{
    display:flex;
    justify-content: space-between;
    align-items: baseline;
    gap: 12px;
    min-width: 0;
    overflow-wrap: anywhere;
  }
  .mlr-tr .mlr-cell::before{
    content: attr(data-label);
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: .04em;
    color: rgba(17,24,39,.60);
    font-weight: 800;
    flex: 0 0 auto;
  }
  /* Actions cell: label on top + full-width buttons */
  .mlr-tr .mlr-cell.mlr-actions-inline{
    flex-direction: column;
    align-items: stretch;
  }
  .mlr-tr .mlr-cell.mlr-actions-inline::before{
    margin-bottom: 6px;
  }
  .mlr-tr .mlr-cell.mlr-actions-inline > *{
    width: 100%;
    text-align: center;
  }
}

/* Wishlist header: stack cleanly */
@media(max-width: 560px){
  .mlr-wl-head{ grid-template-columns: 1fr; gap: 10px; }
  .mlr-wl-head__mid{ justify-content: flex-start; }
  .mlr-wl-head__right{ justify-self: start; flex-wrap: wrap; }
}

/* Very small screens: avoid min-width buttons */
@media(max-width: 520px){
  .mlr-btn--equal{ min-width: 0; width: 100%; }
}

/* -------------------------------------------------
 * Mobile: collapsible navigation (single active item + hamburger)
 * ------------------------------------------------- */
@media(max-width: 899px){
  /* Replace the horizontal scroller with a compact dropdown */
  .mlr-side{
    background: transparent;
    border: 0;
    box-shadow: none;
    padding: 0;
  }

  .mlr-mnav{
    position: sticky;
    top: calc(var(--wp-admin--admin-bar--height, 0px) + 8px);
    z-index: 30;
  }

  .mlr-mnav__bar{
    width: 100%;
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap: 10px;
    padding: 10px 12px;
    border-radius: 999px;
    border: 1px solid rgba(255,255,255,.10);
    background: linear-gradient(180deg, var(--mlr-dark), var(--mlr-dark-2));
    color: #fff;
    box-shadow: 0 18px 42px rgba(0,0,0,.20);
    cursor: pointer;
  }
  .mlr-mnav__current{ display:flex; align-items:center; gap:10px; min-width:0; }
  .mlr-mnav__label{
    font-weight: 900;
    font-size: 13px;
    letter-spacing: .01em;
    overflow:hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }
  .mlr-mnav__current-ico{ font-size: 18px; width: 18px; height: 18px; }
  .mlr-mnav__hamburger{ font-size: 20px; width: 20px; height: 20px; opacity: .95; }

  .mlr-mnav__panel{
    margin-top: 10px;
    padding: 8px;
    border-radius: 18px;
    border: 1px solid rgba(255,255,255,.10);
    background: linear-gradient(180deg, var(--mlr-dark), var(--mlr-dark-2));
    box-shadow: 0 18px 42px rgba(0,0,0,.22);
    display:grid;
        gap: 6px;
  }

  /* Ensure the panel can be hidden via [hidden] */
  .mlr-mnav__panel[hidden]{ display:none !important; }

  .mlr-side__item{
    width: 100%;
    border-radius: 14px;
    background: rgba(255,255,255,.08);
    padding: 10px 12px;
    white-space: normal;
  }
  .mlr-side__item.is-active{ background: rgba(255,255,255,.16); }
  .mlr-side__item span:last-child{ font-size: 13px; font-weight: 800; }
}

/* Desktop: keep classic sidebar */
@media(min-width: 900px){
  .mlr-mnav__bar{ display:none; }
  .mlr-mnav__panel{ display:flex !important; flex-direction: column; gap: 6px; }
}

/* -------------------------------------------------
 * Mobile: Order/Wishlist tables as readable cards (no cut-off)
 * ------------------------------------------------- */
@media(max-width: 720px){
  /* Keep horizontal scrolling available if any table still needs it */
  .mlr-table-wrap{ overflow-x:auto; -webkit-overflow-scrolling: touch; }

  table.mlr-table--items,
  table.mlr-table--items thead,
  table.mlr-table--items tbody,
  table.mlr-table--items tr,
  table.mlr-table--items th,
  table.mlr-table--items td{ display:block; width:100%; }

  table.mlr-table--items thead{ display:none; }

  table.mlr-table--items tr{
    border-top: 1px solid rgba(17,24,39,.08);
    padding: 10px 10px;
  }
  table.mlr-table--items tr:first-child{ border-top: 0; }

  table.mlr-table--items td{
    border-top: 0;
    padding: 6px 0;
    display:flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 10px;
    text-align: left;
    font-size: 12px;
    overflow-wrap: anywhere;
  }

  table.mlr-table--items td::before{
    content: attr(data-label);
    font-size: 10px;
    text-transform: uppercase;
    letter-spacing: .04em;
    color: rgba(17,24,39,.60);
    font-weight: 900;
    flex: 0 0 auto;
    padding-right: 10px;
  }

  .mlr-td-img img,
  .mlr-td-img .mlr-thumb{
    width: 36px;
    height: 36px;
    border-radius: 12px;
    object-fit: cover;
  }

  .mlr-item-meta,
  .mlr-order-info-card .mlr-muted{
    font-size: 12px;
    line-height: 1.25;
  }

  .mlr-order-info-card__title{ font-size: 10px; }
}

/* -------------------------------------------------
 * Mobile: Cost centers – remove redundant headings above action buttons
 * + style cost center name as blue pill button
 * + keep details view within viewport
 * ------------------------------------------------- */
@media(max-width: 850px){
  /* Hide the generated label for action columns (Bearbeiten/Entfernen) */
  .mlr-cc-table .mlr-cell.mlr-actions-inline::before{
    content: none !important;
    display: none !important;
    margin: 0 !important;
  }

  /* IMPORTANT: collapse cc table rows to a single column on mobile.
     Otherwise the cc-specific grid columns (1.35fr 1fr 1fr auto auto)
     can force horizontal overflow and cause "letter-by-letter" buttons. */
  .mlr-cc-table .mlr-cc-tr{
    grid-template-columns: 1fr !important;
  }

  /* Ensure action buttons never break letter-by-letter */
  .mlr-cc-table .mlr-btn{
    word-break: normal;
    overflow-wrap: normal;
    white-space: nowrap;
  }

  /* Cost center name (Bezeichnung) as a small blue pill button */
  .mlr-cc-open{
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 6px 10px;
    border-radius: 999px;
    border: 1px solid rgba(37,99,235,.28);
    background: rgba(37,99,235,.10);
    color: #2563eb;
    font-weight: 900;
    font-size: 12px;
    line-height: 1.1;
    max-width: 100%;
    text-align: left;
  }
}

@media(max-width: 720px){
  /* Cost center detail header: stack + full width */
  .mlr-cc-detail__head{ flex-direction: column; align-items: stretch; }
  .mlr-cc-detail__actions{ align-items: stretch !important; width: 100%; }
  .mlr-cc-detail__actions .mlr-btn{ width: 100%; }

  /* Prevent any inner blocks (charts/tables/buttons) from exceeding the viewport */
  #mlr-cc-detail,
  .mlr-cc-detail,
  .mlr-cc-detail__content,
  .mlr-cc-card,
  .mlr-cc-orders-controls,
  .mlr-cc-chart,
  .mlr-table-wrap{
    width: 100%;
    max-width: 100%;
    min-width: 0;
    box-sizing: border-box;
  }
  .mlr-cc-detail__content *{ max-width: 100%; min-width: 0; }
  .mlr-cc-chart{ overflow: hidden; }
  .mlr-cc-bar__label{ font-size: 10px; }

  /* Orders controls: stack fields to prevent overflow */
  .mlr-cc-orders-controls__left{ width: 100%; flex-direction: column; align-items: stretch; }
  .mlr-cc-orders-month,
  .mlr-cc-orders-search{ max-width: none; width: 100%; }

  /* Orders table in cost center detail: render as readable cards */
  table.mlr-table--orders,
  table.mlr-table--orders thead,
  table.mlr-table--orders tbody,
  table.mlr-table--orders tr,
  table.mlr-table--orders th,
  table.mlr-table--orders td{ display:block; width:100%; }
  table.mlr-table--orders thead{ display:none; }
  table.mlr-table--orders tr{
    border-top: 1px solid rgba(17,24,39,.08);
    padding: 10px 10px;
  }
  table.mlr-table--orders tr:first-child{ border-top: 0; }
  table.mlr-table--orders td{
    border-top: 0;
    padding: 6px 0;
    display:flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 10px;
    text-align: left;
    font-size: 12px;
    overflow-wrap: anywhere;
  }
  table.mlr-table--orders td::before{
    content: attr(data-label);
    font-size: 10px;
    text-transform: uppercase;
    letter-spacing: .04em;
    color: rgba(17,24,39,.60);
    font-weight: 900;
    flex: 0 0 auto;
    padding-right: 10px;
  }
  table.mlr-table--orders td.mlr-td-actions{ flex-direction: column; align-items: stretch; }
  table.mlr-table--orders td.mlr-td-actions::before{ padding-right: 0; margin-bottom: 6px; }
  table.mlr-table--orders td.mlr-td-actions a.mlr-btn,
  table.mlr-table--orders td.mlr-td-actions .mlr-muted{ width: 100%; text-align: center; }
}

/* -------------------------------------------------
 * Mobile: Recommendations – equal button widths
 * ------------------------------------------------- */
@media(max-width: 520px){
  .mlr-rec-actions--buttons{ flex-wrap: nowrap; width: 100%; }
  .mlr-rec-actions--buttons .mlr-btn{ flex: 1 1 0; min-width: 0; }
  .mlr-rec-actions--buttons .mlr-btn--equal{ min-width: 0; }
}

/* -------------------------------------------------
 * Mobile: Cost centers – cleaner controls & smaller buttons
 * ------------------------------------------------- */
@media(max-width: 899px){
  .mlr-cc-head{ align-items: flex-start; }
  .mlr-cc-head__actions{ width: 100%; justify-content: stretch; }
  .mlr-cc-head__actions .mlr-btn{ width: 100%; font-size: 12px; padding: 10px 12px; }
  .mlr-cc-controls{ justify-content:flex-start; }
  .mlr-cc-chart{ height: 120px; }
  .mlr-cc-card{ padding: 10px; border-radius: 18px; }
  .mlr-cc-table .mlr-btn{ width: 100%; font-size: 12px; padding: 9px 10px; }
}

/* -------------------------------------------------
 * Mobile compact overrides (fix oversized text + cramped tiles)
 * ------------------------------------------------- */
@media(max-width: 899px){
  /* Overall typography: smaller + tighter to avoid "gequetscht" */
  .mlr-wrap{ font-size: 12px; line-height: 1.22; }
  .mlr-h1{ font-size: 20px; }
  .mlr-h2{ font-size: 16px; }
  .mlr-h3{ font-size: 14px; }

  /* Top 4 tiles: visually smaller (about half height) */
  .mlr-grid{ gap: 8px; }
  .mlr-grid--4 > .mlr-card{ padding: 8px; border-radius: 18px; }
  .mlr-grid--4 > .mlr-card .mlr-card__icon{ width: 28px; height: 28px; border-radius: 11px; }
  .mlr-grid--4 > .mlr-card .mlr-card__kicker{ font-size: 9px; }
  .mlr-grid--4 > .mlr-card .mlr-card__title{ font-size: 12px; margin-top: 4px; font-weight: 800; }
  .mlr-grid--4 > .mlr-card--welcome .mlr-card__title{ font-size: 13px; }
  .mlr-grid--4 > .mlr-card .mlr-card__big{ font-size: 18px; margin-top: 2px; }
  .mlr-grid--4 > .mlr-card .mlr-muted{ font-size: 11px; line-height: 1.18; }
  .mlr-grid--4 > .mlr-card .mlr-pill{ font-size: 9px; padding: 3px 6px; }
  .mlr-grid--4 > .mlr-card .mlr-btn-link,
  .mlr-grid--4 > .mlr-card .mlr-link{ font-size: 11px; }
  .mlr-grid--4 > .mlr-card .mlr-card__cta{ margin-top: 6px; gap: 6px; }
  .mlr-grid--4 > .mlr-card .mlr-card__row{ gap: 8px; margin-top: 6px; }

  /* Prevent very long texts from stretching tiles */
  .mlr-grid--4 > .mlr-card .mlr-card__title{
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
    overflow: hidden;
  }
  .mlr-grid--4 > .mlr-card .mlr-muted{
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 3;
    overflow: hidden;
  }

  /* Meta tiles: smaller text */
  .mlr-meta-card{ padding: 8px 10px; border-radius: 16px; }
  .mlr-meta-card__k{ font-size: 9px; }
  .mlr-meta-card__v{ font-size: 11px; }

  /* Firma + Kundennummer: 2 lines (no ellipsis) */
  .mlr-meta-card--wrap{ flex-direction: column; align-items: flex-start; justify-content: flex-start; gap: 2px; }
  .mlr-meta-card--wrap .mlr-meta-card__v{
    white-space: normal;
    overflow: hidden;
    text-overflow: clip;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
  }
}

/* Mobile nav: ensure full width bar (fix narrow pill) */
@media(max-width: 899px){
  .mlr-side{ display:block; }
  .mlr-mnav{ width: 100%; }
  .mlr-mnav__bar{ width: 100%; }
}

/* Cost centers table: stack cleanly on mobile (fix overlapping/vertical text) */
@media(max-width: 850px){
  .mlr-cc-table .mlr-cc-tr{ grid-template-columns: 1fr !important; }
  .mlr-cc-table .mlr-th{ display:none; }

  .mlr-cc-table .mlr-cell{
    flex-direction: column;
    align-items: flex-start;
    justify-content: flex-start;
    gap: 4px;
  }
  .mlr-cc-table .mlr-cell::before{ padding-right: 0; }

  /* Action cells: keep full-width buttons/forms */
  .mlr-cc-table .mlr-actions-inline{ width: 100%; }
  .mlr-cc-table .mlr-actions-inline > *{ width: 100%; }
  .mlr-cc-table form{ width: 100%; }
  .mlr-cc-table .mlr-btn{ width: 100%; }
}

/* -------------------------------------------------
 * Mobile compact overrides (Fix: text still too large)
 * + smaller top tiles + full width nav + clean cost centers
 * ------------------------------------------------- */

@media(max-width: 899px){
  /* Global typography (TT5 tends to upscale) */
  .mlr-wrap{ font-size: 12px; line-height: 1.22; }
  .mlr-h1{ font-size: 20px; }
  .mlr-h2{ font-size: 16px; }
  .mlr-h3{ font-size: 14px; }

  /* Top cards: visually "half size" by making content compact */
  .mlr-grid{ gap: 8px; }
  .mlr-card{ padding: 8px; border-radius: 18px; }
  .mlr-card__icon{ width: 28px; height: 28px; border-radius: 11px; }
  .mlr-card__kicker{ font-size: 9px; }
  .mlr-card__title{ font-size: 12px; margin-top: 4px; line-height: 1.15; }
  .mlr-card__big{ font-size: 18px; margin-top: 4px; }
  .mlr-muted{ font-size: 11px; line-height: 1.2; }
  .mlr-pill{ font-size: 9px; padding: 3px 6px; }
  .mlr-btn-link, .mlr-link{ font-size: 11px; }
  .mlr-card__cta{ margin-top: 6px; gap: 6px; }
  .mlr-card__row{ gap: 8px; margin-top: 6px; }

  /* Clamp text so cards don't get tall on mobile */
  .mlr-grid--4 .mlr-card__title,
  .mlr-grid--4 .mlr-muted{
    display: -webkit-box;
    -webkit-box-orient: vertical;
    overflow: hidden;
  }
  .mlr-grid--4 .mlr-card__title{ -webkit-line-clamp: 2; }
  .mlr-grid--4 .mlr-muted{ -webkit-line-clamp: 3; }

  /* Welcome title slightly larger but still compact */
  .mlr-card--welcome .mlr-card__title{ font-size: 13px; }

  /* Meta tiles: allow wrapping for long company / customer number */
  .mlr-meta-card{ padding: 8px 10px; border-radius: 16px; }
  .mlr-meta-card__k{ font-size: 9px; }
  .mlr-meta-card__v{ font-size: 11px; }
  .mlr-meta-card--wrap{ flex-direction: column; align-items: flex-start; justify-content: flex-start; gap: 2px; }
  .mlr-meta-card--wrap .mlr-meta-card__v{
    white-space: normal;
    overflow: hidden;
    text-overflow: clip;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
    line-height: 1.15;
  }

  /* Mobile nav: ensure full width (fix: was too narrow due to flex) */
  .mlr-side{ display:block; width: 100%; }
  .mlr-mnav{ width: 100%; }
  .mlr-mnav__bar{ width: 100%; }
}

/* Cost centers: force stacked rows on mobile (fix: squished 5-col grid) */
@media(max-width: 850px){
  .mlr-cc-table .mlr-cc-tr{ grid-template-columns: 1fr !important; }
  .mlr-cc-table .mlr-th{ display:none; }
  .mlr-cc-table .mlr-cell{ justify-content: flex-start; }
  .mlr-cc-table .mlr-cell::before{ margin-bottom: 2px; }
  .mlr-cc-table .mlr-actions-inline{ align-items: stretch; }
  .mlr-cc-table .mlr-actions-inline > *{ width: 100%; }
  .mlr-cc-table form{ width: 100%; }
}

/* -------------------------------------------------
 * Mobile overrides (v1.3.11): smaller typography + tighter tiles
 * ------------------------------------------------- */
@media(max-width: 899px){
  /* Overall sizing: TT5 sometimes renders large; force compact baseline */
  .mlr-wrap{ font-size: 12px; line-height: 1.22; }

  /* Make the collapsible navigation bar full-width */
  .mlr-side{ display:block; }
  .mlr-mnav{ width:100%; }
  .mlr-mnav__bar{ width:100%; }

  /* Top tiles: smaller paddings + smaller text ("halbsogroß" feel) */
  .mlr-grid{ gap: 8px; }
  .mlr-card{ padding: 8px; border-radius: 18px; }
  .mlr-card__icon{ width: 28px; height: 28px; border-radius: 11px; }
  .mlr-card__kicker{ font-size: 9px; }
  .mlr-card__title{ font-size: 12px; font-weight: 900; margin-top: 4px; line-height: 1.12; }
  .mlr-card--welcome .mlr-card__title{ font-size: 13px; }
  .mlr-card__big{ font-size: 18px; margin-top: 4px; }
  .mlr-muted{ font-size: 11px; line-height: 1.18; }
  .mlr-pill{ font-size: 9px; padding: 3px 6px; }
  .mlr-btn-link, .mlr-link{ font-size: 11px; }
  .mlr-card__cta{ margin-top: 6px; gap: 6px; }
  .mlr-card__row{ gap: 8px; margin-top: 6px; }

  /* Clamp long text so cards don't become too tall */
  .mlr-grid--4 .mlr-card__title,
  .mlr-grid--4 .mlr-muted{
    display: -webkit-box;
    -webkit-box-orient: vertical;
    overflow: hidden;
  }
  .mlr-grid--4 .mlr-card__title{ -webkit-line-clamp: 2; }
  .mlr-grid--4 .mlr-muted{ -webkit-line-clamp: 3; }

  /* Meta cards (Firma/Kundennummer): allow 2 lines */
  .mlr-meta-card{ padding: 8px 10px; border-radius: 16px; }
  .mlr-meta-card__k{ font-size: 10px; }
  .mlr-meta-card__v{ font-size: 11px; }
  .mlr-meta-card--wrap{ flex-direction: column; align-items:flex-start; justify-content:flex-start; gap: 2px; }
  .mlr-meta-card--wrap .mlr-meta-card__v{ white-space: normal; text-overflow: clip; }
}



/* FAQs */
.mlr-faq{
  display: flex;
  flex-direction: column;
  gap: 10px;
  margin: 10px 0 0;
}
.mlr-faq__item{
  border: 1px solid var(--mlr-border);
  background: var(--mlr-surface);
  border-radius: 18px;
  overflow: hidden;
}
.mlr-faq__q{
  list-style: none;
  cursor: pointer;
  padding: 12px 14px;
  font-weight: 800;
  color: var(--mlr-ink);
  position: relative;
  outline: none;
}
.mlr-faq__q::-webkit-details-marker{ display:none; }
.mlr-faq__q::after{
  content:'';
  position:absolute;
  right:14px;
  top:50%;
  width:10px;
  height:10px;
  border-right:2px solid rgba(17,24,39,.55);
  border-bottom:2px solid rgba(17,24,39,.55);
  transform: translateY(-60%) rotate(45deg);
  transition: transform .18s ease, opacity .18s ease;
  opacity: .9;
}
.mlr-faq__item[open] .mlr-faq__q{
  background: rgba(17,24,39,.03);
}
.mlr-faq__item[open] .mlr-faq__q::after{
  transform: translateY(-40%) rotate(-135deg);
}
.mlr-faq__q:focus-visible{
  box-shadow: 0 0 0 3px rgba(17,24,39,.14);
}
.mlr-faq__a{
  padding: 12px 14px;
  border-top: 1px solid var(--mlr-border);
  color: var(--mlr-muted);
  line-height: 1.55;
  background: rgba(17,24,39,.01);
}

/* -------------------------------------------------
 * Small desktops & Tablets (<= 1399px)
 * Goal: remove left sidebar, use dropdown navigation, avoid cramped layouts at 1366px.
 * ------------------------------------------------- */
@media(max-width: 1399px){
  /* Stack navigation above content (no sidebar column) */
  .mlr-layout{ grid-template-columns: 1fr !important; }

  /* Make the navigation look like a top dropdown (not a card sidebar) */
  .mlr-side{
    background: transparent !important;
    border: 0 !important;
    box-shadow: none !important;
    padding: 0 !important;
    overflow: visible !important;
  }

  /* Enable the dropdown bar + keep the panel collapsible */
  .mlr-mnav{ width: 100%; position: sticky; top: calc(var(--wp-admin--admin-bar--height, 0px) + 8px); z-index: 30; }
  .mlr-mnav__bar{ display:flex !important; }
  .mlr-mnav__panel{
    margin-top: 10px;
    padding: 8px;
    border-radius: 18px;
    border: 1px solid rgba(255,255,255,.10);
    background: linear-gradient(180deg, var(--mlr-dark), var(--mlr-dark-2));
    box-shadow: 0 18px 42px rgba(0,0,0,.22);
    display:grid !important;
        gap: 6px;
  }
  .mlr-mnav__panel[hidden]{ display:none !important; }

  /* Recommendations: single column + actions below title for clean look */
  .mlr-rec-list{ grid-template-columns: 1fr !important; }
  .mlr-rec-item{ flex-wrap: wrap; align-items: flex-start; }
  .mlr-rec-actions{ margin-left: 0; width: 100%; }
  .mlr-rec-actions--buttons{ width: 100%; }
  .mlr-rec-actions--buttons .mlr-btn{ flex: 1 1 0; min-width: 0; }
  .mlr-rec-actions--buttons .mlr-btn--equal{ min-width: 0; }

  /* Wishlist header: reduce unnecessary spacing */
  .mlr-wl-head{ grid-template-columns: 1fr auto; }
  .mlr-wl-head__mid{ display:none; }

  /* Cost center orders: prevent squeezed buttons; allow scroll instead */
  table.mlr-table--orders{ min-width: 880px; }
  table.mlr-table--orders .mlr-btn{ white-space: nowrap; }
}

/* Wide desktop: keep classic sidebar */
@media(min-width: 1400px){
  .mlr-layout{ grid-template-columns: minmax(220px, 20%) 1fr; align-items:start; }
  .mlr-mnav__bar{ display:none !important; }
  /* Show the panel even if [hidden] attribute is present (override UA rule). */
  .mlr-mnav__panel{ display:flex !important; flex-direction: column; gap: 6px; }
}


/* Orders actions (Cost center detail): compact invoice buttons */
.mlr-orders-actions{
  display:flex;
  gap:8px;
  justify-content:flex-end;
  align-items:center;
  flex-wrap:wrap;
}

table.mlr-table--orders .mlr-orders-actions .mlr-btn{ white-space: nowrap; }

/* Cost center orders: smaller action buttons + a bit more inset from the card edge */
table.mlr-table--orders td.mlr-td-actions{ padding-right: 14px !important; }
table.mlr-table--orders td.mlr-td-actions .mlr-btn--sm{
  padding: 7px 10px;
  border-radius: 12px;
  font-size: 12px;
  line-height: 1.1;
}

.mlr-btn--pdf{
  display:inline-flex;
  align-items:center;
  gap:6px;
  text-decoration:none;
}
.mlr-btn--pdf .mlr-icon{ width:16px; height:16px; }
.mlr-btn--pdf .mlr-pdf-text{ font-weight: 900; }

@media(max-width: 520px){
  .mlr-btn--pdf .mlr-pdf-text{ display:none; }
}

/* Mobile stacked rows: keep "Ansehen" + PDF inline instead of full-width stacking */
@media(max-width: 899px){
  table.mlr-table--orders td.mlr-td-actions .mlr-orders-actions{
    width: 100%;
    justify-content: flex-start;
  }
  table.mlr-table--orders td.mlr-td-actions .mlr-orders-actions a.mlr-btn{
    width: auto !important;
  }
}