/* ==========================================================================
   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; }

/* leesbaarheid klantenlijst 26-08 v2: passend, gelijk, donkere tegels + witte iconen */
.mob-list-item.list-group-item{ border:1px solid #d8d3de; border-radius:14px; margin-bottom:16px; padding:18px 14px; background-color:#ffffff; box-shadow:0 1px 5px rgba(33,20,45,.12); }
.mob-list-item .btn{ border-radius:11px; width:42px; height:42px; min-width:42px; padding:0; margin:0 2px !important; border:none; flex:0 0 auto; }
.mob-list-item .btn .material-icons, .mob-list-item .btn .material-symbols-outlined{ font-size:1.375rem; line-height:1; }
.mob-list-item .btn-secondary{ background-color:#616875; border-color:transparent; color:#ffffff; }
.mob-list-item .btn-success{ background-color:#6a4fb0; border-color:transparent; color:#ffffff; }
.mob-list-item .btn-primary{ background-color:#2f2352; border-color:transparent; color:#ffffff; }
.mob-list-item .btn-danger{ background-color:#cf4a4a; border-color:transparent; color:#ffffff; }

/* v3: gelijke tussenruimte + prullenbak binnen de kaart */
.mob-list-item .row{ margin-right:0 !important; }
.mob-list-item .col-lg-6.justify-content-between{ justify-content:flex-end !important; gap:6px !important; padding-right:6px !important; }
.mob-list-item .btn{ margin:0 !important; }

/* v4: wrapper-spans mee laten doen in de uitlijning */
.mob-list-item .col-lg-6.justify-content-between > span{ display:contents; }

/* v5: alle knoppen op een lijn, gelijke 6px tussenruimte */
.mob-list-item .col-xl-auto .row{ display:flex !important; flex-wrap:nowrap !important; justify-content:flex-end !important; gap:6px !important; margin:0 !important; }
.mob-list-item .col-xl-auto .col-lg-6{ width:auto !important; max-width:none !important; flex:0 0 auto !important; padding:0 !important; }

/* v6: win ook op paginas met eigen overrides (bv .mob-appointment-page) */
.mob-list-item .btn{ border-radius:11px !important; width:42px !important; height:42px !important; }
.mob-list-item .btn-secondary{ background-color:#616875 !important; color:#ffffff !important; }
.mob-list-item .btn-success{ background-color:#6a4fb0 !important; color:#ffffff !important; }
.mob-list-item .btn-primary{ background-color:#2f2352 !important; color:#ffffff !important; }
.mob-list-item .btn-danger{ background-color:#cf4a4a !important; color:#ffffff !important; }