/* ============================================================
   Syncfusion button — host-agnostic brand override.

   Why this file exists:
   Plain <button class="e-btn e-primary"> markup emitted by the
   <app-form-buttons> tag helper has been migrated to c-button,
   but any direct <ejs-button> usage anywhere in the platform
   still inherits .e-btn / .e-primary / .e-normal styling from
   Syncfusion's fluent.css. These rules pin those buttons to
   whatever the host has bound to --color-accent / --color-line
   / --color-ink / --color-on-dark / --color-surface-alt — so
   the visual matches the c-button system regardless of which
   element type is rendered, and regardless of the host's brand
   palette.

   Layer:
   Rules live in @layer brand. The cascade order declared in
   tokens/app-layers.css (legacy, reset, tokens, base, layouts,
   components, vendor, utilities, brand, syncfusion) puts brand
   AFTER vendor, so these reliably override fluent.css without
   needing !important.

   Host-agnostic:
   Every value is a semantic token. Hosts rebind the semantic
   tokens in their own brand layer; this file inherits whatever
   --color-accent etc resolve to and never has to know.
   ============================================================ */
@layer brand {

    /* Primary — matches c-button--solid */
    .e-btn.e-primary,
    .e-css.e-btn.e-primary {
        background-color: var(--color-accent);
        border-color: var(--color-accent);
        color: var(--color-on-dark);
    }

    .e-btn.e-primary:hover,
    .e-btn.e-primary:focus,
    .e-css.e-btn.e-primary:hover,
    .e-css.e-btn.e-primary:focus {
        background-color: var(--color-accent-deep);
        border-color: var(--color-accent-deep);
        color: var(--color-on-dark);
    }

    .e-btn.e-primary:active,
    .e-css.e-btn.e-primary:active {
        background-color: var(--color-accent-deep);
        border-color: var(--color-accent-deep);
    }

    .e-btn.e-primary:disabled,
    .e-css.e-btn.e-primary:disabled {
        opacity: 0.5;
    }

    /* Neutral / secondary — matches c-button--ghost (outlined ink) */
    .e-btn.e-normal,
    .e-css.e-btn.e-normal {
        background-color: transparent;
        border-color: var(--color-line);
        color: var(--color-ink);
    }

    .e-btn.e-normal:hover,
    .e-css.e-btn.e-normal:hover {
        background-color: var(--color-surface-alt);
        border-color: var(--color-ink);
        color: var(--color-ink);
    }

    /* Float labels — bring every <ejs-*> floatLabelType="Always" label (textbox,
       dropdown, datepicker, …) onto the muted label token already used by
       .app-textbox__label and the readout labels (.c-readout__label /
       .c-wizard__readout-label). Brand sits after vendor, so this overrides
       fluent.css in every state — including focus — matching app-textbox, whose
       label has no focus colour change. */
    .e-float-input .e-float-text,
    .e-float-input.e-control-wrapper .e-float-text {
        color: var(--color-ink-mute);
    }

    /* Open-on-double-click affordance — grids that open a row on row
       double-click (and via the View command icon) opt in with
       cssClass="app-grid-openable" so the rows get a pointer cursor,
       signalling the row is clickable. Lives in @layer brand so it wins
       over fluent.css's default row cursor on the Syncfusion .e-row. */
    .app-grid-openable .e-row {
        cursor: pointer;
    }

    /* Message-center list snippet — clamp the notification body to a 2-line
       preview (full text lives on the View page) so a long message can't
       grow the grid row to many screens tall on a narrow (phone) viewport.
       In @layer brand so it reliably caps the cell over fluent.css. */
    .e-grid .e-rowcell .app-message-snippet {
        display: -webkit-box;
        -webkit-box-orient: vertical;
        -webkit-line-clamp: 2;
        line-clamp: 2;
        overflow: hidden;
        white-space: normal;
        overflow-wrap: anywhere;
    }

    /* Message-center per-row status icon (NotificationStatusKey 0/1/2). One
       small circle-family glyph in a narrow icon-only column — least footprint.
       The check shape also carries the "done" meaning, so status never relies
       on colour alone. */
    .e-grid .e-rowcell .app-msg-status {
        font-size: var(--fs-ui-sm);
    }
    .app-msg-status--unread {
        color: var(--color-accent);
    }
    .app-msg-status--read {
        color: var(--color-ink-mute);
    }
    .app-msg-status--completed {
        color: var(--color-success);
    }

    /* ── Grid → stacked cards on phones/tablets (opt-in: app-grid-cards-sm) ──
       A multi-column data table can't fit a ~375px phone, so below the
       mobile/tablet boundary (--bp-sm, 48rem) each grid row reflows into a
       self-describing card — the mail-app list pattern. Same DOM, pure CSS,
       reflows live with the viewport (no JS, no grid mode switch). Scoped to
       .app-grid-cards-sm so no other grid is affected. The column header row
       is hidden (cards read on their own); cells are tagged via the column
       customAttributes (app-msg-*) for hierarchy.

       The single !important is the legitimate exception the no-!important rule
       isn't aimed at: Syncfusion injects an inline width:NNNpx on the content
       <table> at runtime (to drive horizontal scroll), and an inline style
       can't be beaten from any @layer without it. Mirrors how app-syncfusion.css
       already overrides Syncfusion. Scoped tight so blast radius is nil. */
    @media (max-width: 48rem) {
        .app-grid-cards-sm .e-gridheader {
            display: none;
        }

        .app-grid-cards-sm .e-gridcontent .e-content {
            overflow-x: hidden;
        }

        .app-grid-cards-sm .e-gridcontent .e-table {
            width: 100% !important; /* defeat Syncfusion's inline content-table width */
        }

        .app-grid-cards-sm .e-gridcontent .e-table > colgroup {
            display: none;
        }

        .app-grid-cards-sm .e-gridcontent .e-table,
        .app-grid-cards-sm .e-gridcontent .e-table > tbody,
        .app-grid-cards-sm .e-gridcontent .e-row {
            display: block;
            width: 100%;
        }

        .app-grid-cards-sm .e-gridcontent .e-row {
            position: relative; /* anchor for the absolutely-placed status icon */
            margin-bottom: var(--space-4);
            padding: var(--space-4);
            border: 1px solid var(--color-line);
            border-radius: var(--radius-md);
            background-color: var(--color-surface-alt);
            box-shadow: var(--shadow-md);
        }

        .app-grid-cards-sm .e-gridcontent .e-rowcell {
            display: block;
            width: auto;
            height: auto;
            border: 0;
            padding: var(--space-1) 0;
            line-height: 1.4;
            white-space: normal;
            overflow: visible;
            text-overflow: clip;
        }

        /* Empty spacer cell some grids carry adds dead height as a block */
        .app-grid-cards-sm .e-gridcontent .e-rowcell:empty {
            display: none;
        }

        /* Keep hidden columns (visible="false", e.g. the internal id) hidden —
           the display:block above would otherwise resurrect Syncfusion's
           .e-hide cells in the card. */
        .app-grid-cards-sm .e-gridcontent .e-rowcell.e-hide {
            display: none;
        }

        /* Card hierarchy — cells tagged via column customAttributes */
        .app-grid-cards-sm .app-msg-date {
            font-size: var(--fs-caption);
            color: var(--color-ink-mute);
        }

        .app-grid-cards-sm .app-msg-title {
            font-size: var(--fs-body);
            font-weight: 600;
            color: var(--color-ink);
        }

        .app-grid-cards-sm .app-msg-actions {
            padding-top: var(--space-2);
        }

        /* Status icon floats into the card's top-right corner — zero vertical
           real estate (out of the block flow, so it doesn't claim its own line). */
        .app-grid-cards-sm .e-gridcontent .app-msg-status-cell {
            position: absolute;
            top: var(--space-4);
            right: var(--space-4);
            padding: 0;
        }
    }
}