/* ==========================================================================
   Mobella - herontwerp van de gedeelde "MobellaList" lijst-items
   -------------------------------------------------------------------------
   Deze CSS hoort bij:
     - Views/Shared/MobellaList/ClientListViewListItemTemplate.cshtml (Klanten)
     - Views/Shared/MobellaList/AppointmentFinanceListViewListItemTemplate.cshtml (Mijn financiën)

   Beide templates renderen een <li class="list-group-item"> binnen dezelfde
   gedeelde "MobellaList" component (wwwroot/js/MobellaList.js). Deze CSS
   overschrijft dus automatisch OVERAL waar list-group-item met de class
   "mob-list-item" gebruikt wordt.

   Plaats dit bestand in wwwroot/css/ en laad het NA bootstrap.css.
   ========================================================================== */

:root{
  --mob-purple:#4c176e;
  --mob-accent:#805bc1;
  --mob-border:#e6e2ea;
  --mob-text-primary:#212529;
  --mob-text-secondary:#5f5e5a;
  --mob-text-muted:#8a8880;
  --mob-surface-1:#f8f7fa;
  --mob-surface-2:#ffffff;
  --mob-radius:10px;
}

.mob-list-item.list-group-item{
  border:1px solid var(--mob-border);
  border-radius:var(--mob-radius);
  margin-bottom:10px;
  padding:14px 16px;
}
.mob-list-item.list-group-item.bg-light{
  background-color:var(--mob-surface-1) !important;
}

.mob-list-item .btn{
  border-radius:50%;
  width:38px;
  height:38px;
  padding:0;
  display:inline-flex;
  align-items:center;
  justify-content:center;
}
.mob-list-item .btn .material-icons{ font-size:1.125rem; }

.mob-list-item .btn-success{ background-color:rgba(76,23,110,.1); border-color:transparent; color:var(--mob-purple); }
.mob-list-item .btn-primary{ background-color:var(--mob-accent); border-color:var(--mob-accent); }
.mob-list-item .btn-danger{ background-color:transparent; border-color:transparent; color:#a32d2d; }
.mob-list-item .btn-secondary{ background-color:var(--mob-surface-1); border-color:var(--mob-border); color:var(--mob-text-secondary); }

.mob-list-item .form-control{ border-radius:var(--mob-radius); border-color:var(--mob-border); font-size:0.8125rem; }

/* "Wilt u dit eerder?" op de klantportaal-afsprakenlijst (zie briefing/taak #123) - de korte uitleg
   staat bewust altijd onder de knop/badge, zowel voor als na het aanvragen. */
.mob-wants-earlier-block{ max-width:220px; text-align:right; }
.mob-wants-earlier-explanation{ font-size:0.6875rem; color:var(--mob-text-muted); margin-top:2px; }
.mob-wants-earlier-badge{ display:inline-flex; align-items:center; gap:4px; padding:6px 10px; font-size:0.75rem; font-weight:500; }
.mob-wants-earlier-badge .material-icons{ font-size:0.9375rem; }
.mob-list-item label{ font-size:0.6875rem; color:var(--mob-text-muted); text-transform:uppercase; letter-spacing:.02em; }