/* =========================================================
   MALERPLUS • SETTINGS REFACTOR (FIX + MINI PREVIEW)
   - Desktop: komfortabel
   - Mobile: 1 Spalte, keine Überläufe
   - Scope: nur Settings-View
   ========================================================= */

#view-settings .view-container{
  max-width: 980px;
  margin: 0 auto;
}

#view-settings .settings-grid{
  display:flex;
  flex-direction:column;
  gap:16px;
  align-items:stretch;
}

/* Form Layout inside cards */
#view-settings .mp-settings-form .form-grid{
  display:grid;
  grid-template-columns: 1fr 1fr;
  gap: 14px 14px;
}

#view-settings .mp-settings-form .form-group{
  display:flex;
  flex-direction:column;
  gap:6px;
}

#view-settings .mp-settings-form .form-group-full{
  grid-column: 1 / -1;
}

/* Backup list spacing */
#view-settings .settings-backup{ margin-top: 4px; }
#view-settings .settings-backup .backup-list{ margin-top: 10px; }

/* Make details summary feel like a card header */
#view-settings #mpBillingDetails summary{
  padding: 14px 16px;
  border-radius: 14px;
}

/* =========================================================
   SUBSCRIPTION STATUS BADGE (Premium)
   ========================================================= */
#view-settings .mp-sub-badge{
  display:inline-flex;
  align-items:center;
  gap:7px;
  padding:6px 14px;
  border-radius:999px;
  font-weight:600;
  font-size:13px;
  line-height:1.2;
  letter-spacing:-0.01em;
  border:1px solid rgba(15,23,42,0.08);
  box-shadow: 0 1px 2px rgba(15,23,42,0.03);
  user-select:none;
}
#view-settings .mp-sub-badge::before{
  content:"";
  width:7px;
  height:7px;
  border-radius:50%;
  flex-shrink:0;
}

#view-settings .mp-sub-active{
  background: rgba(16,185,129,0.10);
  border-color: rgba(16,185,129,0.24);
  color: #065f46;
}
#view-settings .mp-sub-active::before{
  background: #10b981;
  box-shadow: 0 0 6px rgba(16,185,129,0.45);
}

#view-settings .mp-sub-trial{
  background: rgba(43,176,255,0.10);
  border-color: rgba(43,176,255,0.24);
  color: #0369a1;
}
#view-settings .mp-sub-trial::before{
  background: #2bb0ff;
  box-shadow: 0 0 6px rgba(43,176,255,0.45);
}

#view-settings .mp-sub-warning{
  background: rgba(245,158,11,0.10);
  border-color: rgba(245,158,11,0.24);
  color: #92400e;
}
#view-settings .mp-sub-warning::before{
  background: #f59e0b;
  box-shadow: 0 0 6px rgba(245,158,11,0.45);
}

#view-settings .mp-sub-danger{
  background: rgba(239,68,68,0.10);
  border-color: rgba(239,68,68,0.24);
  color: #991b1b;
}
#view-settings .mp-sub-danger::before{
  background: #ef4444;
  box-shadow: 0 0 6px rgba(239,68,68,0.45);
}

#view-settings .mp-sub-neutral{
  background: rgba(100,116,139,0.08);
  border-color: rgba(100,116,139,0.20);
  color: #334155;
}
#view-settings .mp-sub-neutral::before{
  background: #94a3b8;
}

/* =========================================================
   MINI PDF LIVE PREVIEW (Settings)
   ========================================================= */
#view-settings .mp-pdf-mini-grid{
  display:grid;
  grid-template-columns: 320px 1fr;
  gap: 14px;
  align-items:start;
  width:100%;
  max-width:100%;
}

#view-settings .mp-pdf-mini-wrap{
  width:100%;
  max-width: 360px;
}

#view-settings .mp-pdf-mini-page{
  position:relative;
  width:100%;
  aspect-ratio: 210 / 297;
  border-radius: 14px;
  overflow:hidden;
  background: rgba(255,255,255,.70);
  border: 1px solid rgba(17,24,39,0.10);
  box-shadow: 0 10px 26px rgba(0,0,0,0.08);
  /* JS setzt diese Variablen */
  --mp-content-top-pct: 12%;
  --mp-footer-top-pct: 80%;
  --mp-footer-bottom-pct: 92%;
}

/* True A4 downscale stage */
#view-settings .mp-mini-scale{
  position:absolute;
  top:0;
  left:0;
  transform-origin: top left;
}

/* Remove extra padding/shadows inside the mini stage */
#view-settings .mp-mini-a4-wrapper{
  padding:0;
  justify-content:flex-start;
}
#view-settings .mp-mini-a4-wrapper .a4-doc{
  box-shadow:none;
  border-radius:0;
}

/* Overlay is in A4 coordinate system and is downscaled with the stage */
#view-settings .mp-mini-scale .mp-pdf-mini-overlay{
  position:absolute;
  left:0;
  top:0;
  width:210mm;
  height:297mm;
  pointer-events:none;
}

#view-settings .mp-pdf-mini-line{
  position:absolute;
  left:0;
  right:0;
  height:0;
  border-top: 2px dashed rgba(30,41,59,.45);
}

#view-settings .mp-pdf-mini-line span{
  position:absolute;
  right:8px;
  top:-12px;
  font-size:11px;
  font-weight:700;
  padding:2px 6px;
  border-radius: 999px;
  background: rgba(255,255,255,.78);
  border: 1px solid rgba(15,23,42,.12);
  color: rgba(15,23,42,.86);
  backdrop-filter: blur(6px);
}

#view-settings #mpPdfMiniLineContent{
  top: var(--mp-content-top-pct);
}

#view-settings #mpPdfMiniLineFooterTop{
  top: var(--mp-footer-top-pct);
}

#view-settings #mpPdfMiniLineFooterBottom{
  top: var(--mp-footer-bottom-pct);
}

#view-settings .mp-zone-footer{
  position:absolute;
  left:0;
  right:0;
  top: var(--mp-footer-top-pct);
  height: calc(var(--mp-footer-bottom-pct) - var(--mp-footer-top-pct));
  background: rgba(255, 87, 34, 0.10);
  border-top: 1px solid rgba(239,68,68,0.22);
  border-bottom: 1px solid rgba(239,68,68,0.22);
}

#view-settings .mp-pdf-mini-zone-label{
  position:absolute;
  left:10px;
  top:8px;
  font-size:11px;
  font-weight:800;
  color: rgba(100,116,139,.95);
  background: rgba(255,255,255,.70);
  padding:3px 8px;
  border-radius: 999px;
  border: 1px solid rgba(15,23,42,.10);
}

#view-settings .mp-pdf-mini-legend{
  min-width: 0;
  padding: 10px 12px;
  border-radius: 14px;
  background: rgba(255,255,255,.55);
  border: 1px solid rgba(17,24,39,0.08);
}

#view-settings .mp-pdf-mini-kpi{
  font-size: 13px;
  line-height: 1.35;
  margin: 6px 0;
  color: rgba(15,23,42,.90);
}

/* =========================================================
   SETTINGS • MINI PREVIEW (MOBILE)
   Fake A4 layout view (Header/Content/Footer zones only)
   - no real PDF content
   - uses the same mm→% CSS vars set on #mpPdfMiniPage
   ========================================================= */

#view-settings .mpFakeA4Preview{
  display:none;
  position:absolute;
  inset:0;
}

#view-settings .mpFakeA4Paper{
  position: relative;
  width: 100%;
  height: 100%;
  background: var(--mp-card, rgb(var(--mp-flaeche-rgb)));
  border-radius: 14px;
  overflow: hidden;
}

#view-settings .mpFakeHeaderZone{
  position: absolute;
  left: 0; right: 0; top: 0;
  height: var(--mp-content-top-pct, 12%);
  background: repeating-linear-gradient(
    45deg,
    rgba(var(--mp-f3-e2e8f0), 0.95),
    rgba(var(--mp-f3-e2e8f0), 0.95) 10px,
    rgba(var(--mp-flaeche-3-rgb), .95) 10px,
    rgba(var(--mp-flaeche-3-rgb), .95) 20px
  );
}

#view-settings .mpFakeContentZone{
  position: absolute;
  left: 0; right: 0;
  top: var(--mp-content-top-pct, 12%);
  bottom: calc(100% - var(--mp-footer-top-pct, 86%));
  background: var(--mp-card, rgb(var(--mp-flaeche-rgb)));
}

#view-settings .mpFakeFooterZone{
  position: absolute;
  left: 0; right: 0;
  top: var(--mp-footer-top-pct, 86%);
  height: calc(var(--mp-footer-bottom-pct, 94%) - var(--mp-footer-top-pct, 86%));
  background: rgba(255, 80, 80, 0.10);
  border-top: 2px dashed rgba(255, 80, 80, 0.55);
}

#view-settings .mpFakeZoneLabel,
#view-settings .mpFakeZoneHint{
  position: absolute;
  left: 10px;
  top: 10px;
  font-size: 12px;
  font-weight: 800;
  letter-spacing: .2px;
  color: rgba(var(--mp-t1-0f172a), 0.78);
  background: rgba(var(--mp-flaeche-rgb), .72);
  border: 1px solid rgba(15,23,42,.10);
  padding: 4px 10px;
  border-radius: 999px;
}

#view-settings .mpFakeZoneHint{
  top: auto;
  left: 50%;
  transform: translateX(-50%);
  bottom: 14px;
  opacity: .6;
  font-weight: 700;
}

#view-settings .mpFakeFooterZone .mpFakeZoneLabel{
  top: 10px;
}

#view-settings .mpFakeLine{
  position: absolute;
  left: 0; right: 0;
  height: 0;
  border-top: 2px dashed rgba(15,23,42,.35);
}

#view-settings .mpFakeLine span{
  position: absolute;
  right: 10px;
  top: -18px;
  font-size: 12px;
  font-weight: 800;
  background: rgba(15,23,42,.70);
  color: rgba(255,255,255,.96);
  padding: 3px 8px;
  border-radius: 999px;
  box-shadow: 0 4px 12px rgba(0,0,0,.18);
  backdrop-filter: blur(6px);
}

#view-settings .mpFakeLineContent{ top: var(--mp-content-top-pct, 12%); }
#view-settings .mpFakeLineFooterTop{ top: var(--mp-footer-top-pct, 86%); }
#view-settings .mpFakeLineFooterBottom{ top: var(--mp-footer-bottom-pct, 94%); }

/* Footer OFF state for fake preview */
#view-settings .mp-pdf-mini-page.mp-footer-off .mpFakeFooterZone,
#view-settings .mp-pdf-mini-page.mp-footer-off .mpFakeLineFooterTop,
#view-settings .mp-pdf-mini-page.mp-footer-off .mpFakeLineFooterBottom{
  display: none;
}

/* Footer OFF state (still shows content line) */
#view-settings .mp-pdf-mini-page.mp-footer-off .mp-zone-footer,
#view-settings .mp-pdf-mini-page.mp-footer-off #mpPdfMiniLineFooterTop,
#view-settings .mp-pdf-mini-page.mp-footer-off #mpPdfMiniLineFooterBottom{
  display:none;
}

/* =========================================================
   Responsive Layout – Mobile / Tablet / Desktop
   ========================================================= */

@media (max-width: 767px){
  #view-settings .mp-settings-form .form-grid{ grid-template-columns: 1fr; }
  #view-settings .mp-settings-form .form-group-full{ grid-column: 1 / -1; }

  #view-settings .mp-pdf-mini-grid{
    grid-template-columns: 1fr;
  }
  #view-settings .mp-pdf-mini-wrap{
    /* Mobile must stay "mini": don't let the A4 preview take full card width */
    max-width: min(340px, 100%);
    margin: 0 auto;
  }
  #view-settings .mp-pdf-mini-legend{
    padding: 12px;
  }
  /* Mobile UX: hide logo inside Settings mini preview (prevents "floating" logo while downscaled) */
  #view-settings #mpPdfMiniA4Wrapper .mp-pdf-logo{ display:none !important; }

  /* Mobile: switch to Fake A4 view (zones only) */
  #view-settings #mpPdfMiniScale{ display:none !important; }
  #view-settings .mp-pdf-mini-overlay{ display:none !important; }
  #view-settings .mpFakeA4Preview{ display:block !important; }

}

@media (min-width: 768px){
  #view-settings .mp-pdf-mini-grid{
    grid-template-columns: 320px 1fr;
  }
}

/* =========================================================
   SETTINGS • MINI PREVIEW OVERLAYS (DESKTOP)
   Make overlay labels/lines readable after downscale.
   Only affects the Settings mini-preview overlay UI.
   ========================================================= */
@media (min-width: 901px){
  #view-settings .mp-pdf-mini-line{ border-top-width: 3px; }

  #view-settings .mp-pdf-mini-line span{
    top: -24px;
    font-size: 22px;
    padding: 6px 14px;
    right: 12px;
    border-radius: 999px;
    background: rgba(15,23,42,.72);
    border: 1px solid rgba(255,255,255,.18);
    color: rgba(255,255,255,.96);
    box-shadow: 0 6px 16px rgba(0,0,0,.22);
    backdrop-filter: blur(8px);
  }

  #view-settings .mp-pdf-mini-zone-label{
    top: 12px;
    left: 12px;
    font-size: 20px;
    padding: 6px 14px;
    background: rgba(15,23,42,.62);
    border: 1px solid rgba(255,255,255,.18);
    color: rgba(255,255,255,.95);
    box-shadow: 0 6px 16px rgba(0,0,0,.18);
    backdrop-filter: blur(8px);
  }
}

/* =========================================================
   MP-20261004-010: TELEFONASSISTENT (Card & Content Harmonisierung)
   ========================================================= */
#view-settings #mpPhoneAssistantCard {
  display: block;
  width: 100%;
  max-width: 100%;
  box-sizing: border-box;
}

#view-settings #mpPhoneAssistantBody {
  display: block !important;
  width: 100% !important;
  max-width: 100% !important;
  box-sizing: border-box !important;
}

#view-settings #mpPhoneAssistantBody .mp-pa-head {
  display: flex;
  align-items: flex-start;
  gap: 14px;
  margin-bottom: 18px;
  padding-bottom: 14px;
  border-bottom: 1px solid rgba(15, 23, 42, 0.08);
}

#view-settings #mpPhoneAssistantBody .mp-pa-icon {
  width: 42px;
  height: 42px;
  border-radius: 12px;
  background: rgba(34, 197, 94, 0.12);
  color: #16a34a;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

#view-settings #mpPhoneAssistantBody .mp-pa-icon svg {
  width: 22px;
  height: 22px;
}

#view-settings #mpPhoneAssistantBody .mp-pa-title-wrap {
  flex: 1 1 auto;
  min-width: 0;
}

#view-settings #mpPhoneAssistantBody .mp-pa-title {
  margin: 0 0 4px;
  font-size: 18px;
  font-weight: 750;
  letter-spacing: -0.015em;
  color: rgb(var(--mp-t1-1e2430, #1e2430));
  line-height: 1.25;
  white-space: normal;
  word-break: normal;
}

#view-settings #mpPhoneAssistantBody .mp-pa-desc {
  margin: 0;
  font-size: 13.5px;
  color: #64748b;
  line-height: 1.45;
  white-space: normal;
}

#view-settings #mpPhoneAssistantBody .mp-pa-features {
  list-style: none;
  margin: 0 0 16px 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 10px;
}

#view-settings #mpPhoneAssistantBody .mp-pa-feature-item {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  font-size: 13.5px;
  line-height: 1.45;
  color: #334155;
}

#view-settings #mpPhoneAssistantBody .mp-pa-feature-check {
  width: 18px;
  height: 18px;
  color: #16a34a;
  flex-shrink: 0;
  margin-top: 1px;
}

#view-settings #mpPhoneAssistantBody .mp-pa-banner {
  background: rgba(254, 243, 199, 0.45);
  border: 1px solid rgba(245, 158, 11, 0.28);
  border-radius: 14px;
  padding: 14px 16px;
  margin-top: 14px;
  display: flex;
  align-items: flex-start;
  gap: 12px;
}

#view-settings #mpPhoneAssistantBody .mp-pa-banner-badge {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: #b45309;
  background: rgba(245, 158, 11, 0.15);
  padding: 3px 8px;
  border-radius: 999px;
  margin-bottom: 4px;
}

#view-settings #mpPhoneAssistantBody .mp-pa-banner-text {
  font-size: 13.5px;
  line-height: 1.45;
  color: #92400e;
  margin: 0;
}

html.dark #view-settings #mpPhoneAssistantBody .mp-pa-head {
  border-bottom-color: rgba(255, 255, 255, 0.08);
}
html.dark #view-settings #mpPhoneAssistantBody .mp-pa-title {
  color: #f1f5f9;
}
html.dark #view-settings #mpPhoneAssistantBody .mp-pa-desc {
  color: #94a3b8;
}
html.dark #view-settings #mpPhoneAssistantBody .mp-pa-feature-item {
  color: #cbd5e1;
}
html.dark #view-settings #mpPhoneAssistantBody .mp-pa-banner {
  background: rgba(245, 158, 11, 0.12);
  border-color: rgba(245, 158, 11, 0.22);
}
html.dark #view-settings #mpPhoneAssistantBody .mp-pa-banner-text {
  color: #fde68a;
}