/*
 * IntelliSee form + table primitives.
 *
 * Opt-in via class. Composes existing tokens to give forms and tables a
 * single consistent baseline without overriding feature-scoped layouts.
 *
 * Apply .macc-form-field on a form-group wrapper, or .macc-form on a <form>
 * for the cascade. Apply .macc-table on a <table> for the consolidated
 * table treatment.
 */

@layer components {

    /* ----- Form fields ----------------------------------------------- */
    .macc-form-field {
        display: flex;
        flex-direction: column;
        gap: 0.3rem;
        margin-bottom: 0.85rem;
    }

    .macc-form-field > label,
    .macc-form-field .form-label {
        font-size: var(--macc-font-size-label);
        font-weight: 600;
        color: var(--macc-text-soft);
        line-height: var(--macc-line-height-tight);
        margin: 0;
    }

    .macc-form-field .form-text,
    .macc-form-field .macc-form-help {
        font-size: var(--macc-font-size-caption);
        color: var(--macc-text-muted);
        margin: 0.15rem 0 0;
    }

    .macc-form-field .form-control,
    .macc-form-field .form-select,
    .macc-form .form-control,
    .macc-form .form-select {
        background-color: var(--macc-input-bg);
        border-color: var(--macc-input-border);
        color: var(--macc-input-text);
        min-height: var(--macc-control-height);
        border-radius: var(--macc-radius-control);
        font-size: var(--macc-font-size-ui);
        line-height: var(--macc-line-height-ui);
    }

    .macc-form-field .form-control:focus,
    .macc-form-field .form-select:focus,
    .macc-form .form-control:focus,
    .macc-form .form-select:focus {
        border-color: var(--macc-input-focus-border);
        box-shadow: 0 0 0 3px var(--macc-input-focus-ring);
        outline: none;
    }

    .macc-form-field .form-control::placeholder,
    .macc-form .form-control::placeholder {
        color: var(--macc-input-placeholder);
        opacity: 1;
    }

    .macc-form-field .form-control[disabled],
    .macc-form-field .form-select[disabled],
    .macc-form .form-control[disabled],
    .macc-form .form-select[disabled] {
        opacity: 0.65;
        cursor: not-allowed;
    }

    .macc-form-field--required > label::after,
    .macc-form-field--required .form-label::after {
        content: " *";
        color: var(--macc-danger);
        font-weight: 700;
    }

    .macc-form-actions {
        display: flex;
        gap: 0.5rem;
        flex-wrap: wrap;
        margin-top: 1rem;
        padding-top: 0.75rem;
        border-top: 1px solid var(--macc-border-subtle);
    }

    /* ----- Tables ---------------------------------------------------- */
    .macc-table {
        --bs-table-bg: var(--macc-grid-row-bg);
        --bs-table-color: var(--macc-table-body-text);
        --bs-table-border-color: var(--macc-grid-row-border);
        --bs-table-hover-bg: var(--macc-grid-row-hover);
        --bs-table-hover-color: var(--macc-table-row-hover-text);
        width: 100%;
        border-collapse: separate;
        border-spacing: 0;
        font-size: var(--macc-font-size-table);
        color: var(--macc-table-body-text);
        background-color: var(--macc-surface);
        border-radius: var(--macc-table-radius);
        overflow: hidden;
        box-shadow: var(--macc-grid-shadow);
    }

    .macc-table thead {
        background-image: linear-gradient(180deg, var(--macc-grid-header-start), var(--macc-grid-header-end));
    }

    .macc-table thead th {
        --bs-table-bg: transparent;
        text-align: left;
        font-weight: 600;
        font-size: var(--macc-font-size-label);
        text-transform: uppercase;
        letter-spacing: 0.04em;
        color: var(--macc-grid-header-text);
        padding: 0.7rem 0.85rem;
        border-bottom: 1px solid var(--macc-table-head-border);
        white-space: nowrap;
    }

    .macc-table tbody tr {
        --bs-table-bg: var(--macc-grid-row-bg);
        --bs-table-color: var(--macc-table-body-text);
        background-color: var(--macc-grid-row-bg);
        transition: background-color 120ms ease;
    }

    .macc-table tbody tr:nth-child(even) {
        --bs-table-bg: var(--macc-grid-row-alt);
        background-color: var(--macc-grid-row-alt);
    }

    .macc-table tbody tr:hover {
        --bs-table-bg: var(--macc-grid-row-hover);
        --bs-table-color: var(--macc-table-row-hover-text);
        background-color: var(--macc-grid-row-hover);
        color: var(--macc-table-row-hover-text);
    }

    .macc-table tbody tr.is-selected {
        --bs-table-bg: var(--macc-grid-row-selected);
        --bs-table-color: var(--macc-table-row-hover-text);
        background-color: var(--macc-grid-row-selected);
        color: var(--macc-table-row-hover-text);
    }

    .macc-table tbody td {
        background-color: var(--bs-table-bg);
        color: var(--bs-table-color);
        padding: 0.6rem 0.85rem;
        border-bottom: 1px solid var(--macc-grid-row-border);
        vertical-align: middle;
    }

    .macc-table tbody tr:last-child td {
        border-bottom: 0;
    }

    .macc-table--sticky thead th {
        position: sticky;
        top: 0;
        z-index: 1;
        background-color: var(--macc-surface);
    }

    .macc-table--compact thead th,
    .macc-table--compact tbody td {
        padding: 0.4rem 0.65rem;
    }

    /* Empty-row state inside a table body. */
    .macc-table__empty td {
        text-align: center;
        padding: 2rem 1rem;
        color: var(--macc-text-muted);
        font-size: var(--macc-font-size-small);
    }

    /* ----- Card surfaces -------------------------------------------- */
    .macc-card {
        background-color: var(--macc-card-bg);
        border: 1px solid var(--macc-card-border);
        border-radius: var(--macc-radius-panel);
        padding: 1rem 1.1rem;
        box-shadow: var(--macc-card-shadow);
    }

    .macc-card__header {
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: 0.5rem;
        margin-bottom: 0.6rem;
    }

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

    .macc-card__subtitle {
        font-size: var(--macc-font-size-small);
        color: var(--macc-text-muted);
        margin: 0;
    }
}