/*
    Va'a Coaching back-office styles on top of Metronic (styles.css).
    Metronic ships a precompiled Tailwind build that only contains the utilities its demos use,
    so layout helpers we need live here as small kv-* classes instead of utilities that may not exist.
*/

:root {
    /* ARE Tahiti palette (aretahiti.com): charcoal + lagoon turquoise */
    --kv-charcoal: #17191b;
    --kv-lagoon: #2bbede;
    --kv-lagoon-ink: #13869f;   /* darker turquoise for icons/text on light backgrounds (AA contrast) */
    --kv-lagoon-soft: rgb(43 190 222 / 0.14);
}

.dark {
    --kv-lagoon-ink: #5fd3ec;
    --kv-lagoon-soft: rgb(43 190 222 / 0.16);
}

/* Brand mark (placeholder until the designer's vector logo, PLAN.md §6.2) */
.kv-logo-mark {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 36px;
    border-radius: 10px;
    background: var(--kv-charcoal);
    color: var(--kv-lagoon);
    font-size: 17px;
    box-shadow: inset 0 0 0 1px rgb(255 255 255 / 0.08);
    flex-shrink: 0;
}
.kv-logo-mark img { width: 30px; height: 30px; object-fit: contain; }

/* Layout */
.kv-grid {
    display: grid;
    gap: 1.25rem;
    grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
}

.kv-grid-2 {
    display: grid;
    gap: 1rem;
    grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
}

.kv-narrow {
    max-width: 860px;
}

.kv-auth {
    width: 100%;
    max-width: 440px;
}

/* Sign-in split: form on the left, lagoon photo on the right (wide screens only). */
.kv-auth-split {
    display: grid;
    min-height: 100vh;
    grid-template-columns: 1fr;
}

.kv-auth-photo {
    display: none;
}

@media (min-width: 64rem) {
    .kv-auth-split {
        grid-template-columns: minmax(480px, 1fr) 1fr;
    }

    .kv-auth-photo {
        display: flex;
        align-items: flex-end;
        padding: 2.5rem;
        background: linear-gradient(0deg, rgb(23 25 27 / .7), rgb(23 25 27 / 0) 45%), var(--kv-signin-photo) center / cover no-repeat;
        color: #fff;
    }

    .kv-auth-photo p {
        max-width: 28rem;
        font-size: 1.1rem;
        line-height: 1.5;
        margin: 0;
    }
}

/* Cards */
.kv-stat-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 44px;
    height: 44px;
    border-radius: 12px;
    background: var(--kv-lagoon-soft);
    color: var(--kv-lagoon-ink);
    font-size: 20px;
    flex-shrink: 0;
}

.kv-card-link {
    transition: border-color .15s ease, box-shadow .15s ease;
}

.kv-card-link:hover {
    border-color: var(--kv-lagoon);
    box-shadow: 0 2px 10px rgb(43 190 222 / 0.15);
}

.kv-theme-group {
    background: rgb(127 127 127 / 0.12);
}

/* Forms */
.kv-errors ul {
    margin: 0;
    padding: 0;
    list-style: none;
}

.kv-errors li,
.kv-field-error {
    color: var(--color-destructive, #dc2626);
    font-size: .8125rem;
}

.kv-code {
    font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
    letter-spacing: .3em;
    text-align: center;
    font-size: 1.125rem;
}

.kv-code-sm {
    font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
    letter-spacing: .2em;
    width: 11rem;
}

.kv-mono {
    font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
    word-break: break-all;
}

/* Two-factor enrolment */
.kv-steps {
    margin: 0;
    padding-inline-start: 1.25rem;
    list-style: decimal;
    color: var(--color-secondary-foreground, inherit);
}

.kv-qr {
    display: flex;
    justify-content: center;
}

.kv-qr svg {
    width: 200px;
    height: 200px;
    background: #fff;
    padding: 8px;
    border-radius: 8px;
}

.kv-key {
    font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
    font-size: .95rem;
    word-break: break-all;
}

.kv-recovery {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: .5rem;
    text-align: center;
    font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
}

.kv-recovery code {
    padding: .35rem;
    border-radius: 6px;
    background: rgb(127 127 127 / 0.1);
}

/* Tables */
.kv-table-wrap {
    overflow-x: auto;
}

.kv-muted-row td {
    opacity: .55;
}

/* Calls */
.kv-call-grid {
    display: grid;
    gap: 1rem;
    grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
}

.kv-call-tile {
    position: relative;
    aspect-ratio: 16 / 9;
    border-radius: 12px;
    overflow: hidden;
    background: var(--kv-charcoal);
}

.kv-call-tile video {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.kv-call-name {
    position: absolute;
    left: .6rem;
    bottom: .6rem;
    z-index: 1;
    padding: .15rem .5rem;
    border-radius: 6px;
    background: rgb(0 0 0 / .55);
    color: #fff;
    font-size: .8rem;
}

/* Sign-in divider, user card, simple list rows */
.kv-divider {
    display: flex;
    align-items: center;
    gap: .75rem;
    color: var(--color-muted-foreground, #888);
    font-size: .8rem;
}

.kv-divider::before,
.kv-divider::after {
    content: "";
    flex: 1;
    height: 1px;
    background: rgb(127 127 127 / .25);
}

.kv-user-card {
    border-radius: 8px;
    padding: .25rem;
}

.kv-user-card:hover {
    background: rgb(127 127 127 / .12);
}

.kv-list-row {
    padding: .6rem .75rem;
    border: 1px solid rgb(127 127 127 / .2);
    border-radius: 8px;
}

/* Two wide columns that stack on narrow screens (AI trial: ask | knowledge). */
.kv-grid-wide {
    display: grid;
    gap: 1.25rem;
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 420px), 1fr));
    align-items: start;
}

.kv-select-auto {
    width: auto;
}

/* Notification bell badge and unread rows. */
.kv-bell-count {
    position: absolute;
    top: 2px;
    inset-inline-end: 2px;
    min-width: 1.1rem;
    height: 1.1rem;
    padding: 0 0.25rem;
    border-radius: 999px;
    background: var(--color-destructive, #dc2626);
    color: #fff;
    font-size: 0.65rem;
    font-weight: 600;
    line-height: 1.1rem;
    text-align: center;
}

.kv-unread {
    background: var(--kv-lagoon-soft);
}

/* Media Gallery cards. */
.kv-media-grid {
    display: grid;
    gap: 1rem;
    grid-template-columns: repeat(auto-fill, minmax(min(100%, 200px), 1fr));
}

.kv-media-thumb {
    position: relative;
    aspect-ratio: 16 / 9;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--kv-lagoon-soft);
    color: var(--kv-lagoon-ink);
    font-size: 2rem;
}

.kv-media-thumb img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.kv-media-duration {
    position: absolute;
    inset-inline-end: 0.4rem;
    bottom: 0.4rem;
    padding: 0 0.35rem;
    border-radius: 0.25rem;
    background: rgb(0 0 0 / 0.7);
    color: #fff;
    font-size: 0.7rem;
}

/* ---- Courses (M3) ---------------------------------------------------------------------------- */

.kv-span-2 {
    grid-column: 1 / -1;
}

/* Two columns on wide screens (lesson form | preview), one on phones and tablets. */
.kv-split {
    display: grid;
    gap: 1.25rem;
    align-items: start;
}

@media (min-width: 1024px) {
    .kv-split {
        grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    }
}

.kv-course-cover {
    width: 7.5rem;
    aspect-ratio: 16 / 9;
    object-fit: cover;
    border-radius: 0.5rem;
    flex-shrink: 0;
}

.kv-module {
    border: 1px solid var(--border);
    border-radius: 0.625rem;
    padding: 0.75rem;
    background: var(--background);
}

.kv-module-head {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.5rem;
    margin-bottom: 0.5rem;
}

.kv-drip {
    width: 4.5rem;
}

.kv-lessons {
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
    min-height: 2.25rem;   /* an empty module is still a drop target */
    padding: 0.25rem;
    border-radius: 0.5rem;
    background: var(--muted);
}

.kv-lesson {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.4rem 0.5rem;
    border-radius: 0.375rem;
    background: var(--background);
    font-size: 0.875rem;
}

.kv-module-handle,
.kv-lesson-handle {
    cursor: grab;
    color: var(--muted-foreground);
    padding: 0 0.25rem;
    touch-action: none;
}

.kv-drag-hint {
    opacity: 0.9;
    box-shadow: 0 6px 18px rgb(0 0 0 / 0.18);
    list-style: none;
}

.kv-drag-placeholder {
    opacity: 0.35;
    outline: 2px dashed var(--primary);
}

/* Rendered Markdown (lesson notes, course descriptions). */
.kv-prose {
    font-size: 0.925rem;
    line-height: 1.6;
}

.kv-prose > * + * {
    margin-top: 0.75em;
}

.kv-prose h1, .kv-prose h2, .kv-prose h3 {
    font-weight: 600;
    color: var(--mono, inherit);
}

.kv-prose h1 { font-size: 1.25rem; }
.kv-prose h2 { font-size: 1.1rem; }
.kv-prose h3 { font-size: 1rem; }

.kv-prose ul { list-style: disc; padding-inline-start: 1.25rem; }
.kv-prose ol { list-style: decimal; padding-inline-start: 1.25rem; }
.kv-prose a { color: var(--primary); text-decoration: underline; }

.kv-prose table {
    border-collapse: collapse;
}

.kv-prose th, .kv-prose td {
    border: 1px solid var(--border);
    padding: 0.25rem 0.5rem;
}

/* Dashboard: two columns on wide screens, cards of any height. */
.kv-dash {
    display: grid;
    gap: 1.25rem;
    grid-template-columns: repeat(auto-fit, minmax(420px, 1fr));
    align-items: start;
}

@media (max-width: 480px) {
    .kv-dash {
        grid-template-columns: minmax(0, 1fr);
    }
}

/* Simple bar chart (no chart library needed for 8 bars). */
.kv-bars {
    display: grid;
    grid-template-columns: repeat(8, 1fr);
    gap: .5rem;
    height: 200px;
    align-items: end;
}

.kv-bar {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: flex-end;
    height: 100%;
    gap: .25rem;
}

.kv-bar-fill {
    width: 100%;
    max-width: 42px;
    border-radius: 6px 6px 2px 2px;
    background: linear-gradient(180deg, #2bbede, #1f8fa8);
}

.kv-bar-value, .kv-bar-label {
    font-size: 11px;
    color: var(--color-secondary-foreground, #6b7280);
    white-space: nowrap;
}

/* Crew lineup: one box per seat, bow (1) to stern. */
.kv-lineup {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(170px, 1fr));
    gap: .5rem;
}

.kv-seat {
    display: flex;
    flex-direction: column;
    gap: .25rem;
    padding: .5rem .6rem;
    border: 1px solid var(--color-border, #e5e7eb);
    border-radius: 10px;
}

/* Inbox messages keep their line breaks. */
.kv-message { white-space: pre-wrap; overflow-wrap: anywhere; }

/* Back-office assistant (M18/M32): a button in the corner and a small panel above it. */
.kv-assistant { position: fixed; right: 1.25rem; bottom: 1.25rem; z-index: 40; display: flex; flex-direction: column; align-items: flex-end; gap: .5rem; }
.kv-assistant-panel { width: min(24rem, calc(100vw - 2.5rem)); max-height: min(34rem, calc(100vh - 6rem)); overflow: auto; order: -1; box-shadow: 0 10px 30px rgb(0 0 0 / .18); }
.kv-assistant-toggle { box-shadow: 0 6px 18px rgb(0 0 0 / .18); }
.kv-prose ul { list-style: disc; margin-left: 1.25rem; display: grid; gap: .35rem; }
.kv-prose p + p, .kv-prose p + ul { margin-top: .5rem; }
.kv-assistant-table { margin-top: .5rem; max-height: 18rem; overflow: auto; border: 1px solid var(--border, #e5e7eb); border-radius: .5rem; }
.kv-assistant-table table { width: 100%; border-collapse: collapse; font-size: .75rem; }
.kv-assistant-table th, .kv-assistant-table td { text-align: left; padding: .35rem .5rem; border-bottom: 1px solid var(--border, #e5e7eb); vertical-align: top; }
.kv-assistant-table th { position: sticky; top: 0; background: var(--muted, #f4f4f5); font-weight: 600; }
/* A task the assistant proposes: a form to check, change and confirm. */
.kv-assistant-action { margin-top: .5rem; padding: .75rem; border: 1px solid var(--border, #e5e7eb); border-radius: .5rem; display: flex; flex-direction: column; gap: .5rem; }
.kv-assistant-action label { display: flex; flex-direction: column; gap: .25rem; font-size: .75rem; font-weight: 500; }
.kv-assistant-action label.kv-check { flex-direction: row; align-items: center; gap: .5rem; font-weight: 400; }
.kv-assistant-action .kv-assistant-notes { list-style: disc; margin-left: 1.1rem; font-size: .75rem; display: grid; gap: .25rem; }
.kv-assistant-action .kv-assistant-message:empty { display: none; }

/* Creative Studio: this month's images against the limit. */
.kv-meter { height: 8px; border-radius: 999px; background: var(--muted, #f4f4f5); overflow: hidden; }
.kv-meter > span { display: block; height: 100%; border-radius: 999px; background: linear-gradient(90deg, #2bbede, #1f8fa8); }

/* Marketing → Automations (M10): the step list, with a condition's yes/no lanes indented under it. */
.kv-auto-lane { display: flex; flex-direction: column; gap: .5rem; }
.kv-auto-step { border: 1px solid var(--border, #e5e7eb); border-radius: 10px; padding: .5rem .75rem; background: var(--background, #fff); }
.kv-auto-step:target { box-shadow: 0 0 0 2px var(--kv-lagoon); }
.kv-auto-head { display: flex; flex-wrap: wrap; align-items: center; gap: .5rem; }
.kv-auto-icon { width: 1.75rem; height: 1.75rem; border-radius: 8px; display: inline-flex; align-items: center; justify-content: center; background: var(--kv-lagoon-soft); color: var(--kv-lagoon-ink); flex-shrink: 0; }
.kv-auto-branch { margin: .5rem 0 .25rem 1rem; padding-left: .9rem; border-left: 3px solid var(--border, #e5e7eb); }
.kv-auto-branch-yes { border-left-color: #22c55e; }
.kv-auto-branch-no { border-left-color: #ef4444; }
.kv-auto-branch-label { font-size: .75rem; font-weight: 600; margin-bottom: .35rem; }
.kv-auto-add > summary { cursor: pointer; font-size: .8rem; color: var(--kv-lagoon-ink); list-style: none; }
.kv-auto-add[open] { border: 1px dashed var(--border, #e5e7eb); border-radius: 10px; padding: .6rem .75rem; }
.kv-auto-days { display: flex; flex-wrap: wrap; gap: .5rem; }
.kv-auto-test li { list-style: none; }