/* ============================================================
   MRMEDIA-THEME-v1  —  WHMCS "twenty-one" Dark Theme override
   Brand: Coral #FF6B5B on Midnight #111827 · Outfit (only) + JetBrains Mono
   Loaded last via includes/head.tpl {assetExists custom.css} → wins cascade.
   Update-safe: overrides only, no core template edits.
   Fonts self-hosted (extracted 1:1 from the live mrmedia.network landing).
   ============================================================ */

/* ---------- Self-hosted brand fonts ---------- */
/* Outfit-only (Brand-Guide, bestaetigt 2026-07-20): Outfit traegt Display UND
   Fliesstext, die Kontrastachse liefert JetBrains Mono. Inter entfaellt. */
@font-face{
  font-family:'OutfitMR';
  src:url('fonts/outfit.woff2') format('woff2');
  font-weight:300 800; font-style:normal; font-display:swap;
}
@font-face{
  font-family:'JBMonoMR';
  src:url('fonts/jbmono.woff2') format('woff2');
  font-weight:400 500; font-style:normal; font-display:swap;
}

:root{
  /* Kanon: mrmedia-web/DESIGN.md (Frontmatter) ist die einzige Wahrheit fuer
     Hex-Werte. Namen bleiben pro Flaeche wie sie sind; die WERTE muessen mit
     DESIGN.md uebereinstimmen. Geprueft 2026-07-20 (T1): paper->#F3F4F6,
     slate-2->#222B40 (war #28324a = 4,01:1 mit --mist, jetzt 4,52:1). */
  --mr-coral:#FF6B5B;
  --mr-coral-deep:#E8533F;
  --mr-coral-soft:#d79a92;
  --mr-midnight:#111827;
  --mr-ink:#0B0F19;
  --mr-slate:#1E2636;
  --mr-slate-2:#222B40;
  --mr-mist:#8A91A3;
  --mr-paper:#F3F4F6;
  --mr-line:rgba(255,255,255,.08);
  --mr-line-2:rgba(255,255,255,.14);
  /* Status-Ampel aus DESIGN.md. Vorher standen hier Eigenkreationen (#2fae6e, #f0b450,
     #5fd39a) und Coral trug „danger" — Coral ist aber die Markenfarbe, nicht die
     Fehlerfarbe (Ampel-Trennungs-Regel). Status-Bad ist bewusst kuehler als Coral,
     damit destruktiv nie wie primaer aussieht. */
  --mr-on:#34D399;
  --mr-warn:#F5A623;
  --mr-bad:#FF5B6A;
  --mr-bad-ink:#FF7A86;   /* Schriftvariante auf getoenter Flaeche: 6,3:1 statt 3,0:1 bei #fff */
  --mr-sans:'OutfitMR',-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,sans-serif;
  --mr-mono:'JBMonoMR',ui-monospace,SFMono-Regular,Menlo,monospace;

  /* re-point twenty-one / Bootstrap theme variables */
  --primary:#FF6B5B;
  --secondary:#8A91A3;
  --bs-primary:#FF6B5B;
  --bs-body-bg:#0B0F19;
  --bs-body-color:#F3F4F6;
  --font-family-sans-serif:'OutfitMR',-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,sans-serif;
  --font-family-monospace:'JBMonoMR',ui-monospace,monospace;
}

/* ---------- Base ---------- */
html,body,.primary-bg-color,body.primary-bg-color{
  background-color:var(--mr-ink) !important;
  color:var(--mr-paper);
}
body{
  font-family:var(--mr-sans) !important;
  background-image:radial-gradient(90% 85% at 85% -8%, rgba(255,107,91,.10) 0%, rgba(255,107,91,0) 55%);
  background-attachment:fixed;
  -webkit-font-smoothing:antialiased;
}
body, .btn, .form-control, .custom-select, .card, .nav, .navbar,
input, select, textarea, .dropdown-menu, .table, .list-group-item, .modal-content{
  font-family:var(--mr-sans);
}
h1,h2,h3,h4,h5,h6,.h1,.h2,.h3,.h4,.h5,.h6{
  font-family:var(--mr-sans); color:var(--mr-paper); letter-spacing:-.012em; font-weight:700;
}
a{ color:var(--mr-coral); }
a:hover,a:focus{ color:var(--mr-coral-deep); }
.text-muted,.small.text-muted{ color:var(--mr-mist) !important; }
.text-dark{ color:var(--mr-paper) !important; }
hr{ border-color:var(--mr-line); }
code,kbd,pre,samp,.text-monospace{ font-family:var(--mr-mono); color:var(--mr-coral-soft); }
::selection{ background:rgba(255,107,91,.28); }

/* ---------- Header / navbar ---------- */
#header.header,.topbar,.navbar,.navbar-light,.main-navbar-wrapper{
  background-color:var(--mr-midnight) !important; border:0;
}
.topbar{ border-bottom:1px solid var(--mr-line); }
.main-navbar-wrapper{ border-bottom:1px solid var(--mr-line); }
.navbar-brand{ color:var(--mr-paper) !important; font-weight:700; letter-spacing:-.02em; font-size:1.5rem; }
.navbar .logo-img{ max-height:36px; width:auto; }
.navbar-light .navbar-nav .nav-link,.navbar .btn,.cart-btn,.navbar .nav-link{ color:var(--mr-paper); }
/* ⚠️ Die Hauptnavigation traegt KEINE .nav-link-Klasse — twenty-one rendert blanke
   <a class="pr-4"> in ul#nav. Die Regel darueber hat sie deshalb nie erreicht, und
   gerendert wurde #444 auf Midnight = 1,82:1. Also praktisch unsichtbar; am Live-Objekt
   gemessen, nicht geschaetzt. Hier ueber die tatsaechliche Struktur adressiert. */
#nav > li > a,
.navbar-nav > li > a,
.navbar-nav .dropdown-menu .dropdown-item{ color:var(--mr-paper) !important; }   /* 16,1:1 */
#nav > li > a:hover,#nav > li > a:focus,
.navbar-nav > li > a:hover,.navbar-nav > li > a:focus,
.navbar-nav .dropdown-menu .dropdown-item:hover{ color:var(--mr-coral) !important; }  /* 6,9:1 */
#nav > li.active > a,#nav > li.show > a{ color:var(--mr-coral) !important; }
.navbar-light .navbar-nav .nav-link:hover,
.navbar-light .navbar-nav .nav-link:focus,
.navbar-nav .nav-item.active > .nav-link,
.navbar-nav .show > .nav-link{ color:var(--mr-coral); }
.btn-active-client{ background:var(--mr-slate); color:var(--mr-paper); border-color:var(--mr-line-2); }
.badge-info.badge{ background:var(--mr-coral); color:var(--mr-midnight); }

/* ---------- Breadcrumb ---------- */
.master-breadcrumb{ background-color:var(--mr-midnight); border-bottom:1px solid var(--mr-line); }
.master-breadcrumb .breadcrumb,.breadcrumb{ background:transparent; }
.breadcrumb-item,.breadcrumb-item a{ color:var(--mr-mist); }
.breadcrumb-item.active{ color:var(--mr-paper); }
.breadcrumb-item + .breadcrumb-item::before{ color:var(--mr-mist); }

/* ---------- Cards / panels ---------- */
.card{
  background-color:var(--mr-midnight);
  border:1px solid var(--mr-line);
  border-radius:10px;
  color:var(--mr-paper);
}
.card-header,.card-footer{ background-color:transparent; border-color:var(--mr-line); color:var(--mr-paper); }
.card-title,.card h3,.card h4{ color:var(--mr-paper); }
.bg-light,.card.bg-light{ background-color:var(--mr-slate) !important; color:var(--mr-paper); }
.well,.panel,.panel-default,.jumbotron{ background-color:var(--mr-midnight); border-color:var(--mr-line); color:var(--mr-paper); }

/* login / register centered card */
.login-form .card,.card.mw-540{ box-shadow:0 24px 60px rgba(0,0,0,.45); }

/* ---------- Sidebar ---------- */
.sidebar .card,.card-sidebar{ background-color:var(--mr-midnight); }
.list-group,.list-group-flush{ background:transparent; }
.list-group-item{ background-color:transparent; color:var(--mr-paper); border-color:var(--mr-line); }
.list-group-item-action:hover,.list-group-item-action:focus{ background-color:var(--mr-slate); color:var(--mr-paper); }
.list-group-item.active{
  background-color:rgba(255,107,91,.12); border-color:transparent; color:var(--mr-coral);
  box-shadow:inset 3px 0 0 var(--mr-coral);
}
.sidebar-menu-item-icon,.list-group-item.active .sidebar-menu-item-icon{ color:var(--mr-coral); }
.card-minimise{ color:var(--mr-mist); }

/* ---------- Buttons ---------- */
.btn-primary,.btn-primary:focus{
  background-color:var(--mr-coral); border-color:var(--mr-coral);
  color:var(--mr-midnight); font-weight:600;
}
.btn-primary:hover,.btn-primary:active,.btn-primary.active,
.btn-primary:not(:disabled):not(.disabled):active{
  background-color:var(--mr-coral-deep) !important; border-color:var(--mr-coral-deep) !important;
  color:var(--mr-midnight); box-shadow:0 6px 20px rgba(255,107,91,.28);
}
.btn-default,.btn-secondary,.btn-outline-secondary{
  background-color:var(--mr-slate); border-color:var(--mr-line-2); color:var(--mr-paper);
}
.btn-default:hover,.btn-secondary:hover,.btn-outline-secondary:hover{
  background-color:var(--mr-slate-2); border-color:var(--mr-coral); color:var(--mr-paper);
}
.btn-link{ color:var(--mr-coral); }
/* Bootstrap-Blau (#007bff) steckt in .btn-outline-* fest verdrahtet — sichtbar auf der
   Startseite bei „Produkte durchsuchen". Blau gehoert nicht in die Palette. */
.btn-outline-primary,.btn-outline-info{
  color:var(--mr-coral) !important; border-color:rgba(255,107,91,.45) !important;
  background-color:transparent !important;                      /* Coral auf Midnight 6,9:1 */
}
.btn-outline-primary:hover,.btn-outline-info:hover,
.btn-outline-primary:focus,.btn-outline-info:focus{
  background-color:rgba(255,107,91,.10) !important; color:var(--mr-coral) !important;
  border-color:var(--mr-coral) !important;
}
/* WHMCS benutzt .btn-success auch rein dekorativ — „Aendern" in der Kontobox etwa hat
   mit Erfolg nichts zu tun. Eine Vollton-Statusfarbe macht daraus einen zweiten
   Primaer-CTA neben Coral und verstoesst gegen die Ampel-Trennungs-Regel (Statusfarben
   sind kein Gestaltungsmittel). Deshalb getoent statt gefuellt — dieselbe Form wie bei
   .btn-danger, sichtbar aber nicht schreiend. Status-On auf dem Tint: 6,8:1. */
.btn-success{ background:rgba(52,211,153,.10); border:1px solid rgba(52,211,153,.4); color:var(--mr-on); }
.btn-success:hover,.btn-success:focus{ background:rgba(52,211,153,.18); color:#fff; border-color:var(--mr-on); }
/* „Danger" trug Coral-Tief mit weisser Schrift: (a) Coral ist die Markenfarbe, damit sah
   „Kuendigen" aus wie der Primaer-CTA daneben — echte Fehlklick-Gefahr; (b) #fff auf
   Coral-Tief sind 3,66:1, auf Coral sogar 2,79:1. Jetzt getoente Flaeche in Status-Bad
   mit --mr-bad-ink: 6,3:1 und optisch klar als „Vorsicht" lesbar statt als Hauptaktion.
   Gleiche Form, die .product-actions-wrapper unten schon benutzt — jetzt ueberall. */
.btn-danger{ background:rgba(255,91,106,.10); border:1px solid rgba(255,91,106,.4); color:var(--mr-bad-ink); }
.btn-danger:hover,.btn-danger:focus{ background:rgba(255,91,106,.18); color:#fff; border-color:var(--mr-bad); }

/* ---------- Forms ---------- */
.form-control,.custom-select,textarea,select{
  background-color:var(--mr-slate); border:1px solid var(--mr-line-2); color:var(--mr-paper);
}
.form-control:focus,.custom-select:focus{
  background-color:var(--mr-slate); color:var(--mr-paper);
  border-color:var(--mr-coral); box-shadow:0 0 0 3px rgba(255,107,91,.20);
}
.form-control::placeholder{ color:var(--mr-mist); }
.form-control-label,label{ color:var(--mr-paper); }
.input-group-text{ background:var(--mr-slate); color:var(--mr-mist); border-color:var(--mr-line-2); }
.custom-control-label::before{ background-color:var(--mr-slate); border-color:var(--mr-line-2); }
.custom-control-input:checked ~ .custom-control-label::before{ background-color:var(--mr-coral); border-color:var(--mr-coral); }

/* ============================================================
   Supportanfrage (submitticket.php) — war praktisch ungethemt.
   Am Live-Objekt gemessen 2026-07-25:
     · input.form-control.disabled : #E9ECEF-Flaeche mit paper-Schrift  = 1,05:1
       (Name und E-Mail sind vorbelegt — der Kunde konnte nicht lesen, was drinsteht)
     · textarea.markdown-editor   : WEISSE Flaeche mit paper-Schrift    = 1,05:1
       (das Nachrichtenfeld selbst: was man tippt, war unsichtbar)
     · .md-header / .md-footer    : weisse Slabs mit paper-Schrift
     · .custom-file-label         : weisser Kasten mitten im dunklen Formular
   ============================================================ */
/* Vorbelegte, nicht editierbare Felder: lesbar UND erkennbar gesperrt (mist = 4,8:1). */
.form-control.disabled,.form-control:disabled,.form-control[readonly]{
  background-color:var(--mr-slate) !important; color:var(--mr-mist) !important;
  border-color:var(--mr-line) !important; opacity:1 !important;
}
/* Markdown-Editor: Werkzeugleiste, Eingabe, Vorschau, Statuszeile */
.md-header,.md-header.btn-toolbar{
  background-color:var(--mr-slate) !important; border-bottom:1px solid var(--mr-line) !important;
}
.md-header .btn{ color:var(--mr-paper) !important; }
/* ⚠️ Spezifitaet: WHMCS setzt `.md-editor > textarea.markdown-editor{background:#fff!important}`.
   Eine flachere Regel mit !important verliert trotzdem. Deshalb hier dieselbe Form —
   custom.css laedt zuletzt und gewinnt bei Gleichstand. Am Live-Objekt nachgemessen:
   ohne diese Zeile stand das Nachrichtenfeld weiterhin auf 1,10:1, also weiss auf weiss. */
.md-editor > textarea.markdown-editor,.md-editor > textarea.md-input,.md-editor > .md-preview,
textarea.markdown-editor,textarea.md-input,.md-input,.markdown-editor,.md-preview{
  background-color:var(--mr-ink) !important; color:var(--mr-paper) !important;   /* 16,1:1 */
  border-color:var(--mr-line-2) !important;
}
.md-editor{ border:1px solid var(--mr-line-2) !important; border-radius:10px; overflow:hidden; }
.md-footer{ background-color:var(--mr-slate) !important; color:var(--mr-mist) !important;
  border-top:1px solid var(--mr-line) !important; }
/* Datei-Auswahl: Bootstrap faerbt Feld und "Browse" hart weiss/grau. */
.custom-file-label,.custom-file-label.text-truncate{
  background-color:var(--mr-slate) !important; color:var(--mr-paper) !important;
  border-color:var(--mr-line-2) !important;
}
.custom-file-label::after{
  background-color:var(--mr-slate-2) !important; color:var(--mr-paper) !important;
  border-left:1px solid var(--mr-line-2) !important;
}

/* ---------- Tables ---------- */
.table{ color:var(--mr-paper); border-color:var(--mr-line); }
.table thead th{
  color:var(--mr-mist); border-color:var(--mr-line-2); border-top:0;
  font-family:var(--mr-mono); font-size:.72rem; letter-spacing:.08em; text-transform:uppercase; font-weight:500;
}
.table td,.table th{ border-color:var(--mr-line); }
.table-hover tbody tr:hover{ background-color:var(--mr-slate); color:var(--mr-paper); }
.table-striped tbody tr:nth-of-type(odd){ background-color:rgba(255,255,255,.02); }

/* ---------- Badges (mono / terminal) ---------- */
.badge{ font-family:var(--mr-mono); font-weight:500; letter-spacing:.04em; border-radius:4px; }
.badge-primary,.badge-info{ background-color:rgba(255,107,91,.15); color:var(--mr-coral); }
/* Auf die DESIGN.md-Ampel gezogen. Vorher Eigenkreationen (#5fd39a, #f0b450) und
   „danger" in Coral — ein Fehler-Badge, das dieselbe Farbe trug wie Primaeraktion und
   Link. Gerechnet auf Midnight: on 6,8:1 · warn 6,6:1 · bad 5,7:1. */
.badge-success{ background-color:rgba(52,211,153,.16); color:var(--mr-on); }
.badge-danger{ background-color:rgba(255,91,106,.16); color:var(--mr-bad-ink); }
.badge-warning{ background-color:rgba(245,166,35,.16); color:var(--mr-warn); }
.badge-secondary{ background-color:var(--mr-slate-2); color:var(--mr-paper); }

/* ---------- Alerts ---------- */
/* Seitenstreifen raus: ein farbiger border-left > 1px ist in DESIGN.md namentlich
   verboten („Kein border-left: 3px — das ist der Seitenstreifen-Bann"). Ersetzt durch
   die dokumentierte Meldungs-Form: 1px Vollrahmen in der Statusfarbe bei 35 % plus
   Flaechen-Tint bei 8 %. Identisch zu .mrmv-flash im VPS-Panel, das es schon so macht.
   ⚠ Offen bleibt das Mono-Praefix (OK/FEHLER/HINWEIS) — das braucht Template-Zugriff,
   per CSS liesse es sich nur als ::before erzeugen und wuerde im Accessible Name kleben. */
.alert{
  background-color:var(--mr-midnight); border:1px solid var(--mr-line-2);
  color:var(--mr-paper); border-radius:8px;
}
.alert-success{ border-color:rgba(52,211,153,.35);  background-color:rgba(52,211,153,.08); }
.alert-info{    border-color:rgba(255,107,91,.35);  background-color:rgba(255,107,91,.08); }
.alert-warning{ border-color:rgba(245,166,35,.35);  background-color:rgba(245,166,35,.08); }
.alert-danger{  border-color:rgba(255,91,106,.35);  background-color:rgba(255,91,106,.08); }
.alert a{ color:var(--mr-coral); }
/* P10 (DESIGN-BACKLOG): das fehlende Mono-Praefix. Text kommt per JS aus
   includes/hooks/mrmedia_alertfix.php (echter Textknoten, nicht ::before — der
   waere im Accessible Name unerreichbar). Hier nur die Optik. */
.mrm-alert-prefix{ font-family:var(--mr-mono); font-size:.7rem; letter-spacing:.14em;
  font-weight:500; display:inline-block; margin-right:10px; }
.alert-success .mrm-alert-prefix{ color:var(--mr-on); }
.alert-info .mrm-alert-prefix,.alert-warning .mrm-alert-prefix{ color:var(--mr-warn); }
.alert-danger .mrm-alert-prefix{ color:var(--mr-bad-ink); }

/* ---------- Dropdowns ---------- */
.dropdown-menu{ background-color:var(--mr-slate); border:1px solid var(--mr-line-2); border-radius:8px; }
.dropdown-item{ color:var(--mr-paper); }
.dropdown-item:hover,.dropdown-item:focus{ background-color:var(--mr-slate-2); color:var(--mr-coral); }
.dropdown-divider{ border-color:var(--mr-line); }

/* ---------- Modals ---------- */
.modal-content{ background-color:var(--mr-midnight); color:var(--mr-paper); border:1px solid var(--mr-line-2); }
.modal-header,.modal-footer{ border-color:var(--mr-line); }
.close{ color:var(--mr-paper); text-shadow:none; opacity:.7; }
.close:hover{ color:var(--mr-coral); opacity:1; }
.item-selector .item{ background:var(--mr-slate); color:var(--mr-paper); border:1px solid var(--mr-line-2); border-radius:8px; }
.item-selector .item.active{ border-color:var(--mr-coral); color:var(--mr-coral); }

/* ---------- Footer ---------- */
#footer.footer{
  background-color:var(--mr-ink); border-top:1px solid var(--mr-line);
  color:var(--mr-mist); margin-top:3.5rem; padding-top:2rem;
}
#footer .nav-link{ color:var(--mr-mist); }
#footer .nav-link:hover{ color:var(--mr-coral); }
#footer .copyright{ color:var(--mr-mist); }

/* ---------- Utilities / surfaces ---------- */
.bg-white{ background-color:var(--mr-midnight) !important; }
.border{ border-color:var(--mr-line) !important; }
.page-header{ border-color:var(--mr-line); }
.nav-tabs{ border-color:var(--mr-line); }
.nav-tabs .nav-link.active{ background:var(--mr-midnight); color:var(--mr-coral); border-color:var(--mr-line) var(--mr-line) var(--mr-midnight); }
.progress{ background-color:var(--mr-slate); }
.progress-bar{ background-color:var(--mr-coral); }

/* on-brand mono eyebrow helper */
.mr-eyebrow{ font-family:var(--mr-mono); text-transform:uppercase; letter-spacing:.16em; font-size:.64rem; color:var(--mr-coral); }

/* ============================================================
   DataTables (Rechnungen, Tickets, Dienste) — Kopf und Suche waren unlesbar.
   Gemessen 2026-07-25: thead th = #333 auf der dunklen Karte = 1,66:1;
   das Suchfeld hatte weisse Flaeche mit paper-Schrift = 1,10:1, d. h. der
   eingegebene Suchbegriff war unsichtbar.
   ============================================================ */
table.dataTable thead th,table.dataTable thead td,
.table-list thead th,.dataTable thead .sorting,
.dataTable thead .sorting_asc,.dataTable thead .sorting_desc{
  color:var(--mr-mist) !important;            /* 5,6:1 auf Midnight */
  border-color:var(--mr-line-2) !important;
}
.dataTables_filter input,.dataTables_filter input[type=search]{
  background-color:var(--mr-slate) !important; color:var(--mr-paper) !important;   /* 13,8:1 */
  border:1px solid var(--mr-line-2) !important; border-radius:9px;
}
.dataTables_filter input::placeholder{ color:var(--mr-mist) !important; }
.dataTables_info,.dataTables_length,.dataTables_length label{ color:var(--mr-mist) !important; }
.dataTables_paginate .paginate_button{ color:var(--mr-paper) !important; }
.dataTables_paginate .paginate_button.current{ color:var(--mr-coral) !important; }
.dataTables_paginate .paginate_button.disabled{ color:var(--mr-mist) !important; }
.dataTables_empty{ color:var(--mr-mist) !important; }

/* ============================================================
   Kachel-Reihen auf der Startseite ("Wie können wir heute helfen?" / "Ihr Konto").
   twenty-one liefert weisse Karten mit fuenf verschiedenen Farbstreifen oben —
   mitten im dunklen Theme ein Fremdkoerper, und die Farben bedeuten nichts
   (Ampel-Trennungs-Regel: Farbe ist hier kein Gestaltungsmittel).
   ============================================================ */
.action-icon-btns a[class*="card-accent"],.action-icon-btns > div > a{
  background-color:var(--mr-midnight) !important;
  border:1px solid var(--mr-line-2) !important;
  border-top:1px solid var(--mr-line-2) !important;   /* Farbstreifen weg */
  border-radius:12px !important;
  color:var(--mr-paper) !important;
  box-shadow:none !important;
  transition:border-color .15s,background-color .15s,transform .15s;
}
.action-icon-btns > div > a:hover{
  border-color:rgba(255,107,91,.5) !important;
  background-color:rgba(255,107,91,.05) !important;
  transform:translateY(-2px);
}
.action-icon-btns .ico-container,.action-icon-btns i{ color:var(--mr-coral) !important; }
@media (prefers-reduced-motion:reduce){ .action-icon-btns > div > a:hover{ transform:none; } }

/* ---------- Cleanup: keine Wissensdatenbank-Suche, keine Domains ---------- */
/* Wissensdatenbank und Downloads werden nicht angeboten — die Kacheln fuehren sonst
   in leere Bereiche. Die Spalte mit ausblenden, sonst bleibt eine Luecke im Raster. */
.action-icon-btns > div:has(a[href*="knowledgebase"]),
.action-icon-btns > div:has(a[href*="/download"]){ display:none !important; }
.action-icon-btns a[href*="knowledgebase"],
.action-icon-btns a[href*="/download"]{ display:none !important; }
.navbar .input-group.search,form[action*="knowledgebase"]{ display:none !important; }
a[href*="domain=register"],a[href*="domain=transfer"],a[href*="domainchecker"]{ display:none !important; }

/* ---------- MRMEDIA-THEME-v2: Client-Home Dashboard lesbar (2026-07-16) ---------- */
/* Theme setzt .client-home-cards .card-header auf #fff (Spezifitaet schlaegt v1-Override)
   -> weisser Streifen + heller Text = unlesbar. Hier gezielt re-darken. */
.client-home-cards .card-header{
  background-color:transparent;
  border-bottom:1px solid var(--mr-line);
  color:var(--mr-paper);
}
.client-home-cards .card-header .btn{ color:var(--mr-paper); }
.client-home-cards .card-header .btn:hover{ color:var(--mr-coral); }
.client-home-cards .list-group{ border-top:1px solid var(--mr-line)!important; border-bottom:1px solid var(--mr-line)!important; }
.client-home-cards .list-group .list-group-item{ border-bottom-color:var(--mr-line); }

/* Stat-Kacheln oben (Dienste/Angebote/Tickets/Rechnungen): weiss -> Slate */
.tiles .tile{ background-color:var(--mr-slate); }
.tiles .tile:hover{ background-color:var(--mr-midnight); }
.tiles .tile .title{ color:var(--mr-mist); }
.tiles .tile i{ color:var(--mr-mist); opacity:.55; }

/* ---------- MRMEDIA-THEME-v3: DataTables-Listen (Rechnungen/Dienste) lesbar (2026-07-18) ---------- */
/* twenty-one faerbt .table-list-Zellen weiss (theme.css:
   .table-list>tbody>tr>td{background:#fff}, thead th{background:#fff;color:#333})
   -> heller Markentext auf Weiss = unsichtbar (Bug in "Meine Rechnungen").
   Fix: Zellflaeche transparent (Card-Dark scheint durch) + Body-Text auf paper.
   :not() schont utility-gefaerbte Zellen -> .text-danger/.text-success behalten Sinn. */
.table-list thead th,
.table-list > tbody > tr > td,
table.table-list tbody td{
  background-color:transparent !important;
}
.table-list > tbody > tr > td:not([class^="text-"]):not([class*=" text-"]),
table.table-list tbody td:not([class^="text-"]):not([class*=" text-"]),
.table tbody > tr > td:not([class^="text-"]):not([class*=" text-"]),
.table tbody > tr > th:not([class^="text-"]):not([class*=" text-"]){
  color:var(--mr-paper) !important;
}
.table-list > tbody > tr:hover > td{ background-color:var(--mr-slate) !important; }

/* ============================================================
   Produkt-Status-Karte (clientareaproductdetails) — Dark-Theme.
   Stand-Default ist hell -> klatschte weiss aufs dunkle Panel,
   Titel/Untertitel unsichtbar. 2026-07-21.
   ============================================================ */
/* Hintergrund sitzt auf der status-spezifischen Klasse (.product-status-active
   etc.) -> mit gleicher Spezifitaet + spaeterer Kaskade ueberschreiben. */
#main-body .product-status,
.product-status.product-status-active,
.product-status.product-status-pending,
.product-status.product-status-suspended,
.product-status.product-status-terminated,
.product-status.product-status-cancelled,
.product-status.product-status-fraud{
  background:var(--mr-slate) !important; background-image:none !important;
  border:1px solid rgba(255,255,255,.09); border-radius:12px !important; overflow:hidden;
}
.product-status .product-icon{ padding:26px 16px 6px; background:transparent !important; }
.product-status .product-icon .fa-circle{ color:rgba(255,255,255,.045) !important; }
.product-status .product-icon .fa-inverse{ color:var(--mr-coral) !important; }
.product-status .product-icon h3{ color:var(--mr-paper) !important; font-weight:600; margin-top:12px; letter-spacing:-.01em; }
.product-status .product-icon h4{ color:var(--mr-mist) !important; font-weight:400; }
.product-status .product-status-text{
  font-family:var(--mr-mono) !important; letter-spacing:.16em; text-transform:uppercase;
  font-size:.72rem; padding:11px 12px; background:rgba(255,255,255,.03) !important; color:var(--mr-mist) !important;
}
.product-status-active .product-status-text{ background:rgba(52,211,153,.13) !important; color:#34D399 !important; }
.product-status-pending .product-status-text{ background:rgba(245,166,35,.13) !important; color:#F5A623 !important; }
.product-status-suspended .product-status-text,
.product-status-terminated .product-status-text,
.product-status-cancelled .product-status-text,
.product-status-fraud .product-status-text{ background:rgba(255,91,106,.13) !important; color:#FF5B6A !important; }

/* Aktions-Buttons darunter (Kuendigen/Verlaengern/Upgrade) auf Theme-Ton */
.product-actions-wrapper .btn-danger{
  background:rgba(255,91,106,.10) !important; border:1px solid rgba(255,91,106,.4) !important; color:#FF7A86 !important;
}
.product-actions-wrapper .btn-danger:hover{ background:rgba(255,91,106,.18) !important; color:#fff !important; }
.product-actions-wrapper .btn-success{
  background:rgba(52,211,153,.10) !important; border:1px solid rgba(52,211,153,.4) !important; color:#34D399 !important;
}
.product-actions-wrapper .btn-success:hover{ background:rgba(52,211,153,.18) !important; color:#fff !important; }

/* ---------- MRMEDIA-THEME: Ankuendigungs-Exzerpt lesbar (2026-07-27) ---------- */
/* theme.css setzt .announcements .announcement article fest auf #f5f5f5/#ccc (Light-Theme-
   Annahme) -> auf Dark faellt heller Fliesstext auf hellgrauem Block praktisch zusammen. */
.announcements .announcement article{
  background-color:var(--mr-slate);
  border:1px solid var(--mr-line);
  color:var(--mr-paper);
}
.announcements .announcement article p{ color:var(--mr-paper); }