/* ClientDesk product illustration system - markup mockups, no screenshots.
   Companion to the vendored Mizzle build: only rules the prebuilt theme CSS
   does not ship. Cards are fixed-light (they read as product screens), so they
   are not affected by the site dark mode; the backdrop uses brand primary. */

/* Composition container: backdrop + floating cards */
.cd-il {
    position: relative;
    width: 100%;
    max-width: 480px;
    margin-inline: auto;
    aspect-ratio: 6 / 5;
}

.cd-il-bg {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
}

/* Cards: fixed light, slate ink */
.cd-il-card {
    position: absolute;
    background: #fff;
    color: #475569;
    border-radius: 0.75rem;
    box-shadow: 0 20px 25px -5px rgb(0 0 0 / 0.15), 0 8px 10px -6px rgb(0 0 0 / 0.1);
}

.cd-il-main {
    inset-inline-start: 0;
    top: 50%;
    transform: translateY(-50%);
    width: 72%;
    padding: 1rem;
}

.cd-il-main-end {
    inset-inline-start: auto;
    inset-inline-end: 0;
}

.cd-il-float {
    display: flex;
    align-items: center;
    gap: 0.625rem;
    padding: 0.625rem 0.75rem;
}

.cd-il-float-ts { top: 2%; inset-inline-start: 0; }
.cd-il-float-te { top: 2%; inset-inline-end: 0; }
.cd-il-float-bs { bottom: 2%; inset-inline-start: 0; }
.cd-il-float-be { bottom: 2%; inset-inline-end: 0; }

/* Mockup typography (tiny sizes the theme build lacks) */
.cd-t8 { font-size: 8px; line-height: 1.35; }
.cd-t9 { font-size: 9px; line-height: 1.35; }
.cd-t10 { font-size: 10px; line-height: 1.35; }
.cd-t11 { font-size: 11px; line-height: 1.4; }
.cd-t12 { font-size: 12px; line-height: 1.4; }

/* Fixed ink colors (do not flip with .dark) */
.cd-ink { color: #0f172a; }
.cd-txt { color: #475569; }
.cd-mut { color: #94a3b8; }

.cd-truncate {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.cd-minw0 { min-width: 0; }

/* Avatar chip with initials */
.cd-av {
    width: 1.75rem;
    height: 1.75rem;
    border-radius: 9999px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #fff;
    font-size: 10px;
    font-weight: 600;
    flex-shrink: 0;
}

.cd-av-violet { background: #8b5cf6; }
.cd-av-sky { background: #0ea5e9; }
.cd-av-amber { background: #f59e0b; }

/* Icon bubble on floating cards */
.cd-bubble {
    width: 1.75rem;
    height: 1.75rem;
    border-radius: 9999px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.cd-wa { background: #25d366; color: #fff; }
.cd-bubble-primary { background: rgb(9 184 80 / 0.12); color: #09b850; }
.cd-bubble-warn { background: #fdf0cd; color: #a16207; }

/* Fixed-light separator (does not flip with .dark) */
.cd-sep { border-top: 1px solid #e2e8f0; padding-top: 0.375rem; }

/* Lucide icon sizing inside mockups */
.cd-ic { width: 13px; height: 13px; flex-shrink: 0; }
.cd-ic-sm { width: 11px; height: 11px; flex-shrink: 0; }

/* Empty slot in calendars */
.cd-dashed {
    border: 1px dashed #cbd5e1;
    color: #94a3b8;
}

/* Light button inside fixed-light cards */
.cd-btn-light { background: #f1f5f9; color: #475569; }

/* WhatsApp-style proposed message bubble */
.cd-wa-bubble {
    background: #e7fbe9;
    border-radius: 0.625rem;
    border-start-start-radius: 0.125rem;
    padding: 0.5rem 0.625rem;
    color: #334155;
}

/* --- Hero composition ---------------------------------------------------- */
/* Workflow reading of the product: a due date triggers an AI-drafted message,
   approval sends it on WhatsApp, the booking lands, the review follows.
   Cards sit on a dot grid + soft glow, linked by thin connectors (in the SVG). */
.cd-il-hero { max-width: 560px; aspect-ratio: 7 / 6; }

.cd-hero-due {
    top: 2%;
    inset-inline-start: 0;
    width: 44%;
    padding: 0.75rem 0.875rem;
    z-index: 2;
}

.cd-hero-ai {
    top: 32%;
    inset-inline-end: 0;
    width: 64%;
    padding: 0.875rem;
    z-index: 3;
}

.cd-hero-chip-sent { bottom: 8%; inset-inline-start: 4%; z-index: 3; }
.cd-hero-chip-appt { bottom: 0; inset-inline-end: 8%; z-index: 3; }
.cd-hero-chip-rev { top: 0; inset-inline-end: 4%; z-index: 2; }

/* Star row on the review chip */
.cd-stars { color: #f59e0b; letter-spacing: 0.09em; }

/* Mini toggle switch (on state), for the auto-send hint */
.cd-toggle {
    width: 22px;
    height: 12px;
    border-radius: 9999px;
    background: #09b850;
    position: relative;
    flex-shrink: 0;
    display: inline-block;
}

.cd-toggle::after {
    content: "";
    position: absolute;
    top: 2px;
    inset-inline-end: 2px;
    width: 8px;
    height: 8px;
    border-radius: 9999px;
    background: #fff;
}

.cd-toggle-off { background: #cbd5e1; }
.cd-toggle-off::after { inset-inline-end: auto; inset-inline-start: 2px; }

/* Step 1 of "Cum funcționează": three intake channels feeding the client list */
.cd-hiw1-main { width: 60%; }
.cd-hiw1-a { top: 4%; inset-inline-start: 0; z-index: 3; }
.cd-hiw1-b { top: 42%; inset-inline-start: 0; z-index: 3; }
.cd-hiw1-c { bottom: 4%; inset-inline-start: 0; z-index: 3; }

/* Narrow screens: side-by-side does not fit, so stagger the source chips on
   top and give the client list the full width below. */
@media (max-width: 560px) {
    .cd-il-hiw1 { aspect-ratio: auto; height: 30rem; }
    .cd-hiw1-a { top: 0; }
    .cd-hiw1-b { top: 10%; inset-inline-start: auto; inset-inline-end: 0; }
    .cd-hiw1-c { top: 20%; bottom: auto; inset-inline-start: 4%; }
    .cd-hiw1-main { top: auto; bottom: 4%; transform: none; width: 88%; }
}

/* Mini week view (step 2 of "Cum funcționează") */
.cd-wk { display: flex; gap: 0.375rem; }
.cd-wk-col { flex: 1 1 0%; display: flex; flex-direction: column; gap: 0.25rem; }
.cd-wk-bar { height: 0.8rem; border-radius: 0.25rem; }
.cd-bar-a { background: rgb(9 184 80 / 0.3); }
.cd-bar-b { background: rgb(23 162 184 / 0.28); }
.cd-bar-c { background: rgb(247 195 46 / 0.35); }
.cd-bar-x { border: 1px dashed #cbd5e1; }

/* Fixed px type doesn't shrink with the box: give the composition room on
   narrow screens instead of letting the cards collide. */
@media (max-width: 560px) {
    .cd-il-hero { aspect-ratio: auto; height: 30rem; }
    .cd-hero-due { width: 58%; }
    .cd-hero-ai { width: 88%; top: 30%; }
    /* The review chip collides with the due card at this width; the
       sent + booking chips already tell the outcome, so drop it. */
    .cd-hero-chip-rev { display: none; }
}

.cd-slot {
    border-radius: 0.375rem;
    padding: 0.3rem 0.4rem;
    min-width: 0;
}

.cd-slot-primary { background: rgb(9 184 80 / 0.12); border-inline-start: 2px solid #09b850; }
.cd-slot-info { background: rgb(23 162 184 / 0.12); border-inline-start: 2px solid #17a2b8; }
.cd-slot-warning { background: rgb(247 195 46 / 0.18); border-inline-start: 2px solid #d99f0b; }

/* Status badges (fixed colors, readable on the light cards) */
.cd-badge {
    font-size: 9px;
    font-weight: 500;
    padding: 2px 7px;
    border-radius: 9999px;
    flex-shrink: 0;
    white-space: nowrap;
}

.cd-badge-ok { background: rgb(9 184 80 / 0.12); color: #067a36; }
.cd-badge-warn { background: #fdf0cd; color: #a16207; }
.cd-badge-info { background: rgb(23 162 184 / 0.12); color: #0e7490; }
.cd-badge-mut { background: #f1f5f9; color: #64748b; }