/* control-plane/public/css/components.css — everything screens compose from. */

/* --- buttons -------------------------------------------------------- */
.cp-btn {
    padding: 8px 16px; border: 0; border-radius: 8px;
    background: var(--color-navy); color: var(--color-offwhite);
    font: inherit; font-size: .85rem; cursor: pointer;
    transition: opacity var(--dur-quick) var(--ease-out-soft);
}
.cp-btn:hover { opacity: .88; }
.cp-btn:disabled { opacity: .45; cursor: default; }
.cp-btn.is-quiet {
    background: var(--color-surface); color: var(--color-navy);
    border: 1px solid var(--color-rule-strong);
}
.cp-btn.is-danger { background: var(--color-error); }
.cp-btn:focus-visible, .cp-chip:focus-visible {
    outline: 2px solid var(--color-gold);
    outline-offset: 2px;
}

/* --- forms ---------------------------------------------------------- */
label { display: block; margin: 0 0 12px; font-size: .85rem; }
input, textarea, select {
    width: 100%; padding: 8px 10px;
    border: 1px solid var(--color-rule-strong); border-radius: 8px;
    font: inherit; font-size: .85rem;
    background: var(--color-surface); color: var(--color-ink);
}
input:focus, textarea:focus, select:focus {
    outline: 2px solid var(--color-gold); outline-offset: 1px;
}
select { width: auto; min-width: 8rem; }

/* --- stat cards ----------------------------------------------------- */
.cp-cards { display: grid; grid-template-columns: repeat(4, 1fr); gap: 14px; margin: 18px 0 0; }
.cp-card {
    background: var(--color-surface);
    border: 1px solid var(--color-rule);
    border-radius: var(--radius-card);
    padding: 15px 17px;
    box-shadow: var(--shadow-soft);
    position: relative;
}
.cp-card .cp-k {
    font-size: .63rem; letter-spacing: .14em; text-transform: uppercase;
    color: var(--color-muted); margin-bottom: 6px;
}
.cp-card .cp-v { font-family: var(--font-serif); font-size: 1.9rem; line-height: 1; color: var(--color-navy); }
.cp-card .cp-note { font-size: .64rem; color: var(--color-muted); margin-top: 5px; }
/* The accent rule marks the figure that carries a caveat, so the
   qualification travels with the number rather than sitting in a paragraph
   somewhere below it. */
.cp-card.is-accent::after {
    content: ''; position: absolute; left: 17px; right: 17px; bottom: 0;
    height: 2px; background: var(--color-gold); border-radius: 2px;
}

/* --- toolbar / chips ------------------------------------------------ */
.cp-toolbar { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; margin: 20px 0 12px; }
.cp-chip {
    border: 1px solid var(--color-rule-strong); background: var(--color-surface);
    border-radius: var(--radius-pill); padding: 5px 14px;
    font: inherit; font-size: .78rem; color: var(--color-ink); cursor: pointer;
    transition: background var(--dur-quick) var(--ease-out-soft);
}
.cp-chip:hover { background: var(--color-surface-alt); }
.cp-chip.is-on { background: var(--color-navy); color: var(--color-offwhite); border-color: var(--color-navy); }

/* --- tables --------------------------------------------------------- */
.cp-tablewrap {
    background: var(--color-surface);
    border: 1px solid var(--color-rule);
    border-radius: var(--radius-card);
    box-shadow: var(--shadow-soft);
    overflow-x: auto;   /* wide tables scroll inside the card, never the page */
}
.cp-table { width: 100%; border-collapse: collapse; font-size: .85rem; }
.cp-table th {
    text-align: left; padding: 11px 15px;
    font-size: .63rem; letter-spacing: .13em; text-transform: uppercase;
    color: var(--color-muted); font-weight: 600;
    background: var(--color-surface-alt);
    border-bottom: 1px solid var(--color-rule);
    white-space: nowrap;
}
.cp-table td { padding: 12px 15px; border-bottom: 1px solid var(--color-rule); }
.cp-table tr:last-child td { border-bottom: 0; }
.cp-table tbody tr:hover td { background: var(--color-surface-alt); }
.cp-num { font-variant-numeric: tabular-nums; }
.cp-muted { color: var(--color-muted); }

.cp-avatar {
    width: 27px; height: 27px; border-radius: 50%;
    background: var(--color-cream); color: var(--color-navy);
    display: inline-flex; align-items: center; justify-content: center;
    font-size: .68rem; margin-right: 9px; vertical-align: middle;
}

/* --- status pills --------------------------------------------------- */
.cp-pill {
    display: inline-block; padding: 3px 11px;
    border-radius: var(--radius-pill); font-size: .7rem; white-space: nowrap;
}
.cp-pill.is-new { background: var(--color-neutral-bg); color: var(--color-navy); }
.cp-pill.is-contacted { background: var(--color-warn-bg); color: var(--color-warn-ink); }
.cp-pill.is-booked { background: var(--color-ok-bg); color: var(--color-ok); }
.cp-pill.is-declined { background: var(--color-rule); color: var(--color-muted); }

/* --- skeleton ------------------------------------------------------- */
.cp-skeleton {
    height: 13px; border-radius: 6px;
    background: linear-gradient(90deg, var(--color-rule) 25%,
                                       var(--color-surface-alt) 50%,
                                       var(--color-rule) 75%);
    background-size: 200% 100%;
    animation: cp-shimmer 1.4s infinite linear;
}
@keyframes cp-shimmer { to { background-position: -200% 0; } }
@media (prefers-reduced-motion: reduce) {
    .cp-skeleton { animation: none; }
}

/* --- empty / banner / toast ----------------------------------------- */
.cp-empty { text-align: center; padding: 52px 20px; color: var(--color-muted); }
.cp-empty .cp-empty-mark { font-size: 1.7rem; color: var(--color-cream); margin-bottom: 10px; }
.cp-empty .cp-empty-msg { font-family: var(--font-serif); font-size: 1.05rem; color: var(--color-navy); }

.cp-banner {
    border-radius: 12px; padding: 13px 16px; font-size: .85rem;
    border: 1px solid var(--color-rule-strong); background: var(--color-surface);
    margin: 18px 0;
}
.cp-banner.is-error {
    border-color: var(--color-error);
    background: rgba(180, 85, 60, .06);
    color: var(--color-error);
}

.cp-toasts {
    position: fixed; right: 24px; bottom: 24px; z-index: 50;
    display: flex; flex-direction: column-reverse; gap: 8px;
    pointer-events: none;
}
.cp-toast {
    background: var(--color-navy); color: var(--color-offwhite);
    padding: 11px 18px; border-radius: 10px; font-size: .85rem;
    box-shadow: var(--shadow-card);
    opacity: 0; transform: translateY(8px);
    transition: opacity var(--dur-quick) var(--ease-out-soft),
                transform var(--dur-quick) var(--ease-out-soft);
    pointer-events: none;
}
.cp-toast.is-on { opacity: 1; transform: translateY(0); }
.cp-toast.is-error { background: var(--color-error); }