/*
 * Astreative.io - Système de mockups
 * Aperçus d'applications en pur HTML/CSS (aucune image).
 * Primitives réutilisables : fenêtre navigateur, barres, KPI, tableaux,
 * badges, kanban, calendrier, jauges, extension, émargement.
 * Les variables --ast-* sont définies dans site.css.
 */

.mk {
    border-radius: 12px;
    background-color: #fff;
    box-shadow: 0 18px 50px -24px rgba(20, 24, 31, 0.45);
    overflow: hidden;
    font-family: "Hanken Grotesk", sans-serif;
    font-size: 11px;
    color: var(--ast-navy);
    height: 234px;
    display: flex;
    flex-direction: column;
}

/* Barre de fenêtre */
.mk-bar {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 9px 12px;
    background-color: #f5f7fb;
    border-bottom: 1px solid var(--ast-line);
}

.mk-dots {
    display: flex;
    gap: 5px;
}

.mk-dots i {
    width: 9px;
    height: 9px;
    border-radius: 50%;
    background-color: #d4d9e6;
}

.mk-dots i:nth-child(1) { background-color: #ff6058; }
.mk-dots i:nth-child(2) { background-color: #ffbe2e; }
.mk-dots i:nth-child(3) { background-color: #2bca44; }

.mk-url {
    flex: 1;
    margin-left: 6px;
    padding: 4px 10px;
    border-radius: 6px;
    background-color: #fff;
    border: 1px solid var(--ast-line);
    color: #9aa6bd;
    font-size: 10px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.mk-screen {
    flex: 1;
    display: flex;
    overflow: hidden;
}

/* Barre latérale d'application */
.mk-side {
    width: 60px;
    flex-shrink: 0;
    padding: 12px 10px;
    background: linear-gradient(180deg, var(--ast-navy), #243a73);
    display: flex;
    flex-direction: column;
    gap: 9px;
}

.mk-side b {
    height: 7px;
    border-radius: 4px;
    background-color: rgba(255, 255, 255, 0.85);
    width: 70%;
    margin-bottom: 4px;
}

.mk-side span {
    height: 6px;
    border-radius: 4px;
    background-color: rgba(255, 255, 255, 0.28);
}

.mk-side span.on { background-color: #8c8fff; }

.mk-main {
    flex: 1;
    padding: 13px;
    background-color: #fbfcfe;
    overflow: hidden;
}

.mk-h {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 11px;
}

.mk-h b {
    font-size: 12px;
    font-weight: 700;
}

.mk-h em {
    padding: 3px 10px;
    border-radius: 50px;
    background-color: var(--ast-blue);
    color: #fff;
    font-style: normal;
    font-weight: 600;
    font-size: 10px;
}

/* Tuiles KPI */
.mk-kpis {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 8px;
    margin-bottom: 11px;
}

.mk-kpi {
    padding: 9px 10px;
    border-radius: 8px;
    background-color: #fff;
    border: 1px solid var(--ast-line);
}

.mk-kpi i {
    display: block;
    font-style: normal;
    font-size: 14px;
    font-weight: 700;
    color: var(--ast-navy);
}

.mk-kpi i.up { color: var(--ast-green); }
.mk-kpi i.down { color: var(--ast-red); }

.mk-kpi span {
    color: #9aa6bd;
    font-size: 9px;
}

/* Graphe en barres */
.mk-chart {
    display: flex;
    align-items: flex-end;
    gap: 8px;
    height: 70px;
    padding: 10px;
    border-radius: 8px;
    background-color: #fff;
    border: 1px solid var(--ast-line);
}

.mk-chart i {
    flex: 1;
    border-radius: 4px 4px 0 0;
    background: linear-gradient(180deg, var(--ast-blue), #8c8fff);
}

/* Lignes / tableaux */
.mk-row {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 7px 4px;
    border-bottom: 1px solid var(--ast-line);
}

.mk-row > b {
    width: 22px;
    height: 22px;
    flex-shrink: 0;
    border-radius: 6px;
    background-color: var(--ast-light);
}

.mk-row .ln {
    height: 7px;
    border-radius: 4px;
    background-color: #dde3ef;
}

.mk-row .ln.w1 { width: 40%; }
.mk-row .ln.w2 { width: 24%; }
.mk-row .grow { flex: 1; }

.mk-badge {
    margin-left: auto;
    padding: 3px 9px;
    border-radius: 50px;
    font-size: 9px;
    font-weight: 700;
}

.mk-badge.ok { background-color: rgba(24, 165, 103, 0.14); color: var(--ast-green); }
.mk-badge.wait { background-color: rgba(255, 122, 46, 0.16); color: var(--ast-orange); }
.mk-badge.new { background-color: rgba(72, 77, 255, 0.14); color: var(--ast-blue); }

/* Kanban (CRM / pipeline) */
.mk-kanban {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 8px;
    height: 100%;
}

.mk-col {
    padding: 8px;
    border-radius: 8px;
    background-color: #fff;
    border: 1px solid var(--ast-line);
}

.mk-col > em {
    display: block;
    margin-bottom: 8px;
    font-style: normal;
    font-weight: 700;
    font-size: 10px;
    color: var(--ast-slate);
}

.mk-tile {
    padding: 7px;
    margin-bottom: 6px;
    border-radius: 6px;
    background-color: var(--ast-light);
}

.mk-tile span {
    display: block;
    height: 6px;
    border-radius: 3px;
    background-color: #c7d0e4;
    margin-bottom: 4px;
}

.mk-tile span:last-child { width: 60%; margin-bottom: 0; }
.mk-tile.b { border-left: 3px solid var(--ast-blue); }
.mk-tile.g { border-left: 3px solid var(--ast-green); }
.mk-tile.o { border-left: 3px solid var(--ast-orange); }

/* Créneaux / calendrier (réservations) */
.mk-cal {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 6px;
}

.mk-slot {
    padding: 7px 4px;
    border-radius: 6px;
    text-align: center;
    font-size: 9px;
    font-weight: 600;
    background-color: #fff;
    border: 1px solid var(--ast-line);
    color: var(--ast-slate);
}

.mk-slot.free { background-color: rgba(24, 165, 103, 0.12); color: var(--ast-green); border-color: transparent; }
.mk-slot.full { background-color: #f1f3f8; color: #b3bccf; text-decoration: line-through; }
.mk-slot.sel { background-color: var(--ast-blue); color: #fff; border-color: transparent; }

/* Jauges / ratios (finance) */
.mk-gauge {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 8px;
}

.mk-gauge em {
    width: 76px;
    flex-shrink: 0;
    font-style: normal;
    font-size: 10px;
    color: var(--ast-slate);
}

.mk-track {
    flex: 1;
    height: 8px;
    border-radius: 50px;
    background-color: #edf0f7;
    overflow: hidden;
}

.mk-track i {
    display: block;
    height: 100%;
    border-radius: 50px;
    background: linear-gradient(90deg, var(--ast-blue), var(--ast-purple));
}

/* Extension Chrome (popup superposé) */
.mk-webpage {
    flex: 1;
    padding: 14px;
    position: relative;
    background-color: #fbfcfe;
}

.mk-webpage .ln {
    height: 8px;
    border-radius: 4px;
    background-color: #e7ebf3;
    margin-bottom: 9px;
}

.mk-webpage .ln.w1 { width: 55%; }
.mk-webpage .ln.w2 { width: 80%; }
.mk-webpage .ln.w3 { width: 35%; }

.mk-ext {
    position: absolute;
    top: 12px;
    right: 14px;
    width: 132px;
    padding: 12px;
    border-radius: 10px;
    background-color: #fff;
    box-shadow: 0 12px 30px rgba(20, 24, 31, 0.22);
    border: 1px solid var(--ast-line);
}

.mk-ext b {
    display: flex;
    align-items: center;
    gap: 6px;
    margin-bottom: 10px;
    font-size: 11px;
    font-weight: 700;
    color: var(--ast-navy);
}

.mk-ext b::before {
    content: "";
    width: 16px;
    height: 16px;
    border-radius: 5px;
    background: linear-gradient(135deg, var(--ast-blue), var(--ast-purple));
}

.mk-ext span {
    display: block;
    height: 7px;
    border-radius: 4px;
    background-color: #e2e7f1;
    margin-bottom: 6px;
}

.mk-ext span.cta { background-color: var(--ast-green); width: 70%; }

/* Émargement (cases + signatures) */
.mk-att {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 7px 4px;
    border-bottom: 1px solid var(--ast-line);
}

.mk-att .chk {
    width: 16px;
    height: 16px;
    flex-shrink: 0;
    border-radius: 5px;
    border: 1.5px solid #cdd5e6;
}

.mk-att .chk.on {
    background-color: var(--ast-green);
    border-color: var(--ast-green);
    position: relative;
}

.mk-att .chk.on::after {
    content: "";
    position: absolute;
    left: 5px;
    top: 2px;
    width: 4px;
    height: 8px;
    border: solid #fff;
    border-width: 0 2px 2px 0;
    transform: rotate(45deg);
}

.mk-att .name {
    width: 34%;
    height: 7px;
    border-radius: 4px;
    background-color: #dde3ef;
}

.mk-att .sig {
    flex: 1;
    height: 16px;
    border-radius: 4px;
    background-image: linear-gradient(90deg, transparent 0 6px, var(--ast-blue) 6px 9px, transparent 9px 14px, var(--ast-blue) 14px 18px, transparent 18px 30px, var(--ast-blue) 30px 34px, transparent 34px);
    background-repeat: no-repeat;
    background-position: left center;
    background-size: 55% 60%;
    opacity: 0.5;
}

.mk-att .sig.empty {
    background-image: none;
    border-bottom: 1.5px dashed #cdd5e6;
    height: 1px;
    align-self: center;
    opacity: 1;
}