/* De gedeelde kaart. Staat hier en niet in global-styles.css, want dat bestand gaat door de
   ABP-stijlbundel en die wordt gegenereerd en gecachet: nieuwe klassen komen er niet
   betrouwbaar doorheen. De schil-CSS van de dialogen en de pagina's staat om dezelfde reden
   in dialogs.css en pages.css, die App.razor rechtstreeks linkt. */

/* De kaart heeft twee vormen, en meer zijn het er niet. Een SECTIE is een blok op een pagina, */
/* met een kop en inhoud. Een LIJSTITEM is een regel in een kaartenlijst: iets kleiner, iets   */
/* donkerder, en meestal aanklikbaar. Wie een derde vorm nodig denkt te hebben, heeft bijna    */
/* altijd een van deze twee met andere inhoud.                                                 */
/*                                                                                             */
/* Gebruik ze via <CurrentlyCard>, niet door de klasse zelf te typen: dan blijven de kop, de   */
/* aanklikbaarheid en de geselecteerde staat op een plek geregeld.                             */
.cc-card--section,
.bom-section-card {
    background: rgba(255, 255, 255, 0.04);
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 12px;
    padding: 20px;
    transition: border-color 0.3s ease, background 0.15s ease;
}

.cc-card--section:hover,
.bom-section-card:hover {
    border-color: rgba(255, 255, 255, 0.22);
}

.cc-card--list {
    background: rgba(255, 255, 255, 0.03);
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 10px;
    padding: 14px 16px;
    transition: border-color 0.3s ease, background 0.15s ease;
}

/* Alleen een kaart die iets doet als je erop klikt gedraagt zich als een knop. Een kaart die  */
/* enkel iets toont hoort niet mee te bewegen met de muis.                                     */
.cc-card--clickable {
    cursor: pointer;
}

.cc-card--clickable:hover {
    border-color: rgba(255, 255, 255, 0.22);
    background: rgba(255, 255, 255, 0.05);
}

.cc-card--selected {
    border-color: var(--mud-palette-primary);
    background: rgba(var(--mud-palette-primary-rgb), 0.08);
}

/* Staat de kop als laatste in de kaart, dan volgt er niets meer en hoort de scheidingslijn
   er ook niet te staan. Dat is de kaart die alleen een titel, een schakelaar en een regel
   uitleg draagt: die is af na de kop. */
.cc-card--section .cc-card-head:last-child {
    border-bottom: none;
    padding-bottom: 0;
    margin-bottom: 0;
}

/* De kop van een kaart: een icoon in de merkkleur, de titel ernaast, en daaronder een         */
/* optionele ondertitel. Zonder scheidingslijn; die staat in bom-card-header voor de plekken   */
/* die 'm wel willen.                                                                          */
.cc-card-head {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    margin-bottom: 16px;
}

/* Een lijstitem draagt vaak een icoontegel van 32 pixels naast een titel van een regel. Die
   twee horen dan op hun midden uitgelijnd; bovenaan uitlijnen laat de titel tegen de bovenkant
   van de tegel plakken. Een sectiekaart houdt flex-start, want die heeft een ondertitel die
   onder de titel doorloopt. */
.cc-card--list .cc-card-head {
    align-items: center;
    margin-bottom: 12px;
}

/* Alleen een sectiekaart krijgt de streep onder z'n kop. Een lijstitem is daar te klein voor:
   daar zou een lijn de kaart in tweeen hakken terwijl er maar twee regels in staan. */
.cc-card--section .cc-card-head {
    border-bottom: 1px solid rgba(255, 255, 255, 0.08);
    padding-bottom: 14px;
}

/* De voet spiegelt die van een dialog en van de paginaschil: de knoppen rechts, de hoofdactie
   het meest rechts, en een streep erboven die 'm van de inhoud scheidt. */
.cc-card-foot {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 8px;
    margin-top: 18px;
    padding-top: 14px;
    border-top: 1px solid rgba(255, 255, 255, 0.08);
}

/* Het meldingsblok in een kaart. Zelfde blok als in een dialog; hier alleen de ruimte
   eronder, zodat het los staat van de inhoud die erop volgt. */
.cc-card-notice {
    margin-bottom: 16px;
}

/* Volgt de voet direct op de kop, dan staat er niets tussen die twee en levert de kop de
   scheiding al. De voet laat de zijne dan weg, anders staan er twee strepen vlak onder
   elkaar met een leeg vak ertussen.

   Dit kijkt naar wat er werkelijk getekend is en niet naar wat de aanroeper meegaf. Een
   kaart kan best een inhoud-vak hebben dat niets tekent, en dan klopt een vlag op het
   component niet terwijl deze regel wel klopt. */
.cc-card-head + .cc-card-foot {
    border-top: none;
    margin-top: 0;
    padding-top: 0;
}

.cc-card-foot-info {
    margin-right: auto;
    display: flex;
    align-items: center;
    gap: 8px;
    min-width: 0;
}

.cc-card-head-text {
    flex: 1;
    min-width: 0;
}

.cc-card-title {
    font-size: 1rem;
    font-weight: 600;
    color: rgba(255, 255, 255, 0.9);
    line-height: 1.3;
}

.cc-card--list .cc-card-title {
    font-size: 0.9rem;
}

.cc-card-subtitle {
    font-size: 0.875rem;
    color: rgba(255, 255, 255, 0.55);
    line-height: 1.5;
    margin-top: 6px;
}

.cc-card-head-extra {
    flex-shrink: 0;
    display: flex;
    align-items: center;
    gap: 6px;
}

/* Een keuze binnen de kaart, in een eigen vak zodat 'ie niet verwart met de schakelaar in de
   kop. Die zet de functie zelf aan of uit; deze gaat over een keuze daarbinnen. */
.cc-card-togglerow {
    display: flex;
    align-items: center;
    gap: 10px;
    background: rgba(255, 255, 255, 0.03);
    border: 1px solid rgba(255, 255, 255, 0.07);
    border-radius: 10px;
    padding: 10px 14px;
}
.cc-card-togglerow-label {
    flex: 1;
    font-size: 0.8rem;
    color: rgba(255, 255, 255, 0.65);
}

/* Een deelbaar adres in de kaart: het adres neemt de ruimte die overblijft en kapt af, de twee
   knoppen rechts houden hun maat. */
.cc-card-linkrow {
    display: flex;
    align-items: center;
    gap: 10px;
    background: rgba(255, 255, 255, 0.04);
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 8px;
    padding: 10px 14px;
}
.cc-card-linkrow + .cc-card-linkrow {
    margin-top: 8px;
}
.cc-card-linkrow-url {
    flex: 1;
    min-width: 0;
    font-size: 0.8rem;
    color: rgba(255, 255, 255, 0.6);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* Een tweede onderwerp binnen dezelfde kaart, met een streep ertussen. Voor een kaart die twee
   dingen regelt die bij elkaar horen maar los van elkaar staan. */
.cc-card-divided {
    margin-top: 16px;
    padding-top: 14px;
    border-top: 1px solid rgba(255, 255, 255, 0.07);
}

/* Een codeblok in de kaart. De ruimte rechts is voor de kopieerknop die er overheen staat;
   zonder die ruimte loopt de code eronderdoor. */
.cc-card-code {
    position: relative;
    background: #0d0e10;
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 10px;
    padding: 12px 64px 12px 14px;
    font-family: Consolas, monospace;
    font-size: 0.74rem;
    color: #9ECBFF;
    line-height: 1.6;
    white-space: pre-wrap;
    word-break: break-all;
}
.cc-card-code-copy {
    position: absolute;
    top: 8px;
    right: 8px;
}

/* ── Vergrendeld blok (FeatureLockedPanel) ──────────────────────────────────────────────────
   Het slot en het diamantje wisselen elkaar af in dezelfde tegel. Het slot zegt dat de functie
   dicht zit, het diamantje bij welk abonnement 'ie hoort; naast elkaar zouden ze om de aandacht
   vechten, dus ze liggen op elkaar en nemen om de beurt het woord. */
.cd-locked-tile { position: relative; }

.cd-locked-tile .mud-icon-root {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
}

.cd-locked-tile .cd-locked-lock    { animation: cd-locked-lock 5s ease-in-out infinite; }
.cd-locked-tile .cd-locked-tier { animation: cd-locked-tier 5s ease-in-out infinite; }

@keyframes cd-locked-lock    { 0%, 38% { opacity: 1; } 50%, 88% { opacity: 0; } 100% { opacity: 1; } }
@keyframes cd-locked-tier { 0%, 38% { opacity: 0; } 50%, 88% { opacity: 1; } 100% { opacity: 0; } }

/* Wie beweging heeft uitgezet, houdt het slot: dat is de boodschap die ertoe doet. */
@media (prefers-reduced-motion: reduce) {
    .cd-locked-tile .cd-locked-lock    { animation: none; opacity: 1; }
    .cd-locked-tile .cd-locked-tier { animation: none; opacity: 0; }
}