/* Money-model rate card — bewerk-dialog + Tarieven-tab (#2382).
   The dialog rules are global on purpose: the dialog body is projected through MudDialog's provider
   portal, so component-scoped CSS does not reach it (same constraint as model-cost-policy.css / ck-dialog.*). */

.rad-label { font-size:var(--ck-text-xs); color:var(--ck-text); font-weight:600; margin-bottom:7px; }

/* soort — segmented control (Verkoop / Kostprijs) */
.rad-seg {
    display:flex; gap:4px; max-width:300px;
    background:color-mix(in srgb, var(--ck-border) 55%, transparent);
    border-radius:10px; padding:3px;
}
.rad-seg-opt {
    flex:1; text-align:center; font-size:var(--ck-text-sm); font-weight:500; cursor:pointer;
    color:var(--ck-text-muted); background:transparent; border:none; border-radius:8px; padding:7px 10px;
    font-family:inherit; transition:background-color .15s ease, color .15s ease, box-shadow .15s ease;
}
.rad-seg-opt.is-active {
    color:var(--ck-accent-ink); background:var(--ck-surface); font-weight:600;
    box-shadow:0 1px 2px rgba(var(--ck-shadow-rgb), .08);
}

.rad-hint { font-size:var(--ck-text-xs); color:var(--ck-text-muted); line-height:1.4; margin-top:-6px; }

.rad-note {
    display:flex; align-items:flex-start; gap:9px; padding:11px 13px; border-radius:10px;
    background:color-mix(in srgb, var(--ck-text-muted) 12%, transparent);
    border:1px solid var(--ck-border); font-size:var(--ck-text-xs); color:var(--ck-text); line-height:1.5;
}
.rad-note .mud-icon-root { font-size:var(--ck-text-base); color:var(--ck-text-muted); flex:none; margin-top:1px; }

/* ── Tarieven-tab (VerbruikFacturatie) ─────────────────────────────────────────────────────── */

/* Coverage-gap attentie — kalme amber tik, geen alarm (zoals de budget-attentie). */
.ra-gap {
    display:flex; align-items:flex-start; gap:11px; padding:13px 15px; border-radius:12px;
    background:color-mix(in srgb, var(--ck-warning) 12%, transparent);
    border:1px solid color-mix(in srgb, var(--ck-warning) 40%, transparent);
    margin-bottom:16px;
}
.ra-gap .mud-icon-root { color:var(--ck-warning); flex:none; margin-top:1px; }
.ra-gap-body { flex:1; font-size:var(--ck-text-sm); color:var(--ck-text); line-height:1.5; }
.ra-gap-title { font-weight:600; color:var(--ck-text); margin-bottom:3px; }
.ra-gap-list { display:flex; flex-wrap:wrap; gap:6px; margin-top:8px; }
.ra-gap-chip {
    font-size:var(--ck-text-xs); font-family:var(--ck-font-mono);
    background:var(--ck-surface); border:1px solid color-mix(in srgb, var(--ck-warning) 35%, transparent);
    border-radius:999px; padding:2px 9px; color:var(--ck-text);
}
/* Billed, just not at a Sell rate of its own: informational rather than a warning. */
.ra-gap--info {
    background:color-mix(in srgb, var(--ck-info) 10%, transparent);
    border-color:color-mix(in srgb, var(--ck-info) 35%, transparent);
}
.ra-gap--info .mud-icon-root { color:var(--ck-info); }
.ra-gap--info .ra-gap-chip { border-color:color-mix(in srgb, var(--ck-info) 30%, transparent); }
.ra-default { color:var(--ck-text-muted); font-style:italic; }

/* Kind / kostbron pills */
.ra-kind { display:inline-flex; align-items:center; gap:6px; font-size:var(--ck-text-xs); font-weight:600; }
.ra-kind--sell { color:var(--ck-accent-ink); }
.ra-kind--cost { color:var(--ck-warning); }
.ra-dot { width:7px; height:7px; border-radius:50%; background:currentColor; display:inline-block; }

.ra-chip {
    display:inline-flex; align-items:center; font-size:var(--ck-text-xs); font-weight:600; border-radius:999px; padding:2px 9px;
    background:var(--ck-accent-tint); color:var(--ck-accent-ink);
}
.ra-chip--muted { background:color-mix(in srgb, var(--ck-text-muted) 16%, transparent); color:var(--ck-text-muted); }

.ra-mono { font-family:var(--ck-font-mono); font-size:var(--ck-text-sm); }
.ra-dash { color:var(--ck-text-muted); }

/* Row actions (mirror mp-edit / mp-del so the tables read alike) */
.ra-row-actions { display:inline-flex; gap:4px; }
.ra-edit, .ra-del {
    display:inline-flex; align-items:center; justify-content:center; width:30px; height:30px; border-radius:8px;
    border:1px solid transparent; background:transparent; cursor:pointer; color:var(--ck-text-muted);
    transition:background-color .15s ease, color .15s ease;
}
.ra-edit:hover { background:var(--ck-accent-tint); color:var(--ck-accent-ink); }
.ra-del:hover { background:color-mix(in srgb, var(--ck-error) 12%, transparent); color:var(--ck-error); }

.ra-inactive { opacity:.55; }