/*
 * IntelliSee primitives layer.
 *
 * Adds opt-in utility classes that compose the existing token system into
 * consistent button, form, table, empty-state, and skeleton patterns. Views
 * adopt these incrementally — they are additive and do not override existing
 * Bootstrap, Halfmoon, or feature-scoped styles unless explicitly applied.
 */

@layer components {

    /* ----- Buttons ----------------------------------------------------- */
    /* Bridges Bootstrap .btn-* surfaces to the macc-btn-* token palette so
       every variant respects radius, height, and brand color in both themes. */
    .btn {
        border-radius: var(--macc-btn-radius);
    }

    .btn:focus-visible {
        outline: 2px solid var(--macc-focus-border);
        outline-offset: 2px;
        box-shadow: 0 0 0 4px var(--macc-focus-ring);
    }

    .btn-primary,
    .btn.btn-primary {
        background-color: var(--macc-btn-primary-bg);
        border-color: var(--macc-btn-primary-border);
        color: var(--macc-btn-primary-text);
    }

    .btn-primary:hover,
    .btn-primary:focus-visible,
    .btn.btn-primary:hover,
    .btn.btn-primary:focus-visible {
        background-color: var(--macc-btn-primary-bg-hover);
        border-color: var(--macc-btn-primary-border-hover);
        color: var(--macc-btn-primary-text-hover);
    }

    .btn-secondary,
    .btn.btn-secondary {
        background-color: var(--macc-btn-secondary-bg);
        border-color: var(--macc-btn-secondary-border);
        color: var(--macc-btn-secondary-text);
    }

    .btn-secondary:hover,
    .btn-secondary:focus-visible,
    .btn.btn-secondary:hover,
    .btn.btn-secondary:focus-visible {
        background-color: var(--macc-btn-secondary-bg-hover);
        border-color: var(--macc-btn-secondary-border-hover);
        color: var(--macc-btn-secondary-text-hover);
    }

    .btn-success,
    .btn.btn-success {
        background-color: var(--macc-btn-success-bg);
        border-color: var(--macc-btn-success-border);
        color: var(--macc-btn-success-text);
    }

    .btn-success:hover,
    .btn-success:focus-visible {
        background-color: var(--macc-btn-success-bg-hover);
        border-color: var(--macc-btn-success-border-hover);
        color: var(--macc-btn-success-text-hover);
    }

    .btn-danger,
    .btn.btn-danger {
        background-color: var(--macc-btn-danger-bg);
        border-color: var(--macc-btn-danger-border);
        color: var(--macc-btn-danger-text);
    }

    .btn-danger:hover,
    .btn-danger:focus-visible {
        background-color: var(--macc-btn-danger-bg-hover);
        border-color: var(--macc-btn-danger-border-hover);
        color: var(--macc-btn-danger-text-hover);
    }

    /* Ghost button — borderless, theme-aware. Opt-in via .btn.btn-ghost. */
    .btn.btn-ghost {
        background-color: transparent;
        border-color: transparent;
        color: var(--macc-text-soft);
    }

    .btn.btn-ghost:hover,
    .btn.btn-ghost:focus-visible {
        background-color: var(--macc-hover);
        color: var(--macc-text);
    }

    /* ----- Form controls ---------------------------------------------- */
    /* Validation messages get a consistent red treatment in both themes
       without overriding feature-specific layouts. */
    .field-validation-error,
    .text-danger.field-validation-error {
        color: var(--macc-error-text-strong);
        font-size: var(--macc-font-size-caption);
        line-height: var(--macc-line-height-tight);
        display: inline-block;
        margin-top: 0.25rem;
    }

    .input-validation-error,
    .form-control.input-validation-error,
    .form-select.input-validation-error {
        border-color: var(--macc-error-border-strong);
        box-shadow: 0 0 0 2px var(--macc-error-ring);
    }

    .validation-summary-errors {
        background-color: var(--macc-error-bg);
        border: 1px solid var(--macc-error-border);
        color: var(--macc-error-text-max);
        border-radius: var(--macc-radius-md);
        padding: 0.75rem 1rem;
        margin-bottom: 1rem;
    }

    .validation-summary-errors ul {
        margin: 0;
        padding-left: 1.25rem;
    }

    /* ----- Empty state ------------------------------------------------ */
    .macc-empty-state {
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        text-align: center;
        padding: 2.5rem 1.5rem;
        color: var(--macc-text-muted);
        gap: 0.5rem;
    }

    .macc-empty-state__icon {
        font-size: 2.25rem;
        color: var(--macc-text-faint);
        line-height: 1;
        margin-bottom: 0.25rem;
    }

    .macc-empty-state__title {
        font-size: 1rem;
        font-weight: 600;
        color: var(--macc-text);
        margin: 0;
    }

    .macc-empty-state__description {
        font-size: var(--macc-font-size-small);
        color: var(--macc-text-muted);
        max-width: 32rem;
        margin: 0 auto;
    }

    .macc-empty-state__actions {
        margin-top: 0.75rem;
        display: flex;
        gap: 0.5rem;
        justify-content: center;
        flex-wrap: wrap;
    }

    /* Existing empty/no-result classes get the same quiet baseline. This
       keeps older pages visually aligned without forcing markup rewrites. */
    :where(
        .customer-dashboard-empty-state,
        .camera-hub-empty,
        .macc-library-empty,
        .macc-library-empty-inline,
        .macc-location-empty,
        .mask-list-empty,
        .mask-properties-empty
    ) {
        background: var(--macc-surface-2);
        border: 1px dashed var(--macc-border-soft);
        border-radius: var(--macc-radius-panel);
        color: var(--macc-text-muted);
        padding: 1.35rem;
    }

    :where(
        .alerts-table-empty,
        .camera-table-empty,
        .logs-empty,
        .ip-scan-empty,
        .macc-file-empty
    ) {
        color: var(--macc-text-muted) !important;
        font-size: var(--macc-font-size-small);
        line-height: var(--macc-line-height-ui);
        text-align: center;
    }

    /* ----- Skeleton (loading shimmer) -------------------------------- */
    .macc-skeleton {
        position: relative;
        overflow: hidden;
        background-color: var(--macc-hover);
        border-radius: var(--macc-radius-sm);
        color: transparent;
        user-select: none;
        min-height: 0.85rem;
    }

    .macc-skeleton::after {
        content: "";
        position: absolute;
        inset: 0;
        background-image: linear-gradient(
            90deg,
            transparent,
            var(--macc-hover-strong),
            transparent
        );
        transform: translateX(-100%);
        animation: macc-skeleton-shimmer 1.4s ease-in-out infinite;
    }

    .macc-skeleton--text { height: 0.85rem; }
    .macc-skeleton--title { height: 1.25rem; }
    .macc-skeleton--block { height: 6rem; border-radius: var(--macc-radius-md); }
    .macc-skeleton--circle { border-radius: var(--macc-radius-pill); aspect-ratio: 1 / 1; }

    @keyframes macc-skeleton-shimmer {
        0% { transform: translateX(-100%); }
        100% { transform: translateX(100%); }
    }

    /* ----- Status pills (consistent badge primitives) --------------- */
    /* Token-driven so the primitive renders identically inside and outside
       the .macc-shell normalization (login/legal layouts use only this file).
       Falls back to literal values if the macc-visual-system layer is absent. */
    .macc-status-pill {
        display: inline-flex;
        align-items: center;
        gap: 0.35rem;
        font-size: var(--macc-font-size-caption);
        font-weight: var(--macc-font-weight-strong, 600);
        line-height: 1;
        min-height: 1.35rem;
        padding: var(--macc-status-pad-y, 0.24rem) var(--macc-status-pad-x, 0.52rem);
        border-radius: var(--macc-radius-pill);
        border: 1px solid transparent;
        white-space: nowrap;
    }

    .macc-status-pill--success {
        background-color: var(--macc-token-success-bg);
        border-color: var(--macc-token-success-border);
        color: var(--macc-token-success-text);
    }

    .macc-status-pill--info {
        background-color: var(--macc-token-info-bg);
        border-color: var(--macc-token-info-border);
        color: var(--macc-token-info-text);
    }

    .macc-status-pill--warning {
        background-color: var(--macc-token-warning-bg);
        border-color: var(--macc-token-warning-border);
        color: var(--macc-token-warning-text);
    }

    .macc-status-pill--danger {
        background-color: var(--macc-token-danger-bg);
        border-color: var(--macc-token-danger-border);
        color: var(--macc-token-danger-text);
    }

    .macc-status-pill--neutral {
        background-color: var(--macc-badge-soft-bg);
        border-color: var(--macc-badge-soft-border);
        color: var(--macc-badge-soft-text);
    }

    .macc-status-pill__dot {
        width: 0.45rem;
        height: 0.45rem;
        border-radius: var(--macc-radius-pill);
        background-color: currentColor;
        opacity: 0.85;
    }

    /* ----- Tabular numerals (data-dense surfaces) -------------------- */
    /* Stops digits from "jiggling" as values update and aligns columns
       in tables, KPIs, timestamps, and counts. Free typographic upgrade. */
    .table,
    .macc-tabular,
    .macc-stat-value,
    .macc-kpi-value {
        font-variant-numeric: tabular-nums;
    }

    /* ----- Text selection (branded, theme-aware) -------------------- */
    /* Teal in both themes — uses --macc-accent-rgb so it tracks the
       palette automatically. Subtle but signals the brand on every page. */
    ::selection {
        background-color: rgba(var(--macc-accent-rgb), 0.32);
        color: var(--macc-text-emphasis);
    }

    /* ----- Live status LED (heartbeat) ------------------------------- */
    /* Composes the existing --macc-led-* tokens. Add .macc-led--live
       only on truly active states (online, recording, in-progress).
       Reduced-motion is handled by the global guard in 03-a11y.css. */
    .macc-led {
        --macc-led-color: var(--macc-led-neutral-bg);
        --macc-led-glow-soft: var(--macc-led-neutral-glow);
        --macc-led-glow-strong: var(--macc-led-neutral-glow);
        display: inline-block;
        width: 0.5rem;
        height: 0.5rem;
        border-radius: var(--macc-radius-pill);
        background-color: var(--macc-led-color);
        box-shadow: 0 0 0 2px var(--macc-led-glow-soft);
        flex-shrink: 0;
        vertical-align: middle;
    }

    .macc-led--success {
        --macc-led-color: var(--macc-led-success-bg);
        --macc-led-glow-soft: var(--macc-led-success-glow-soft);
        --macc-led-glow-strong: var(--macc-led-success-glow);
    }

    .macc-led--danger {
        --macc-led-color: var(--macc-led-danger-bg);
        --macc-led-glow-soft: var(--macc-led-danger-glow-soft);
        --macc-led-glow-strong: var(--macc-led-danger-glow-strong);
    }

    .macc-led--live {
        animation: macc-led-heartbeat 2.4s cubic-bezier(0.4, 0, 0.6, 1) infinite;
    }

    @keyframes macc-led-heartbeat {
        0%, 100% {
            box-shadow: 0 0 0 2px var(--macc-led-glow-soft);
            opacity: 0.92;
        }
        50% {
            box-shadow: 0 0 0 5px var(--macc-led-glow-strong);
            opacity: 1;
        }
    }

    /* ----- Skeleton row (table loading shimmer) --------------------- */
    /* Drop-in placeholder for grid rows during fetch:
       <tr><td colspan="N"><div class="macc-skeleton macc-skeleton-row"></div></td></tr> */
    .macc-skeleton-row {
        height: 2.25rem;
        border-radius: var(--macc-radius-sm);
    }
}