/* =========================================================================
   Watermark (Material Symbols glyph)
   -------------------------------------------------------------------------
   Renders a subtle brand watermark in the bottom-right corner of a Telerik
   Grid / TreeList or any plain container (card, tab content, panel, …).

   The visual style (size, color, opacity, position) is IDENTICAL everywhere.
   The ONLY thing you choose per use is the glyph, via a
   ".brz-watermark-<name>" modifier class. No per-component .razor.css needed.

   TWO WRAPPER CLASSES
   -------------------
   • brz-watermark-grid  → Telerik Grid AND TreeList (they share the same
                           internal DOM: .k-grid-content / .k-table). The glyph
                           is anchored to the component ROOT, so it stays pinned
                           bottom-right even while the rows scroll.
   • brz-watermark-box   → any other container. The wrapper fills its parent
                           (height:100%) so the glyph sits at the real
                           bottom-right of the content.

   USAGE
   -----
   Grid / TreeList — put both classes directly on the component (no wrapper):
     <TelerikGrid Class="... brz-watermark-grid brz-watermark-person"> ... </TelerikGrid>
     <TelerikTreeList Class="... brz-watermark-grid brz-watermark-account_balance"> ... </TelerikTreeList>

   Any container (tab content, card, panel, …) — put both classes on the wrapper.
   The wrapper should be the single/main child so height:100% resolves correctly:
     <div class="brz-watermark-box brz-watermark-account_box"> ... </div>

   ADDING A NEW GLYPH
   ------------------
   Add one line to the "glyph choices" list at the bottom. Keep the class
   suffix identical to the Material Symbols ligature name, e.g.:
     .brz-watermark-schedule { --brz-watermark-glyph: "schedule"; }
   (Browse ligature names at https://fonts.google.com/icons)

   Requires the 'Material Symbols Outlined' font (loaded via CDN in App.razor).
   ========================================================================= */

/* ---- positioning contexts ---- */
.brz-watermark-grid,
.brz-watermark-box {
    position: relative;
}

/* ---- the watermark glyph: one shared style for every watermark ----
   Anchored to the component root (not the scrolling content) so it always
   stays pinned to the bottom-right, even while the grid/treelist scrolls. */
    .brz-watermark-grid::after,
    .brz-watermark-box::after {
        content: var(--brz-watermark-glyph, "dashboard");
        position: absolute;
        right: 10px;
        bottom: 0px;
        font-family: 'Material Symbols Outlined';
        font-size: 100px;
        line-height: 1;
        /*        color: var(--kendo-color-primary, #6f42c1);*/
        color: #DEAEC6;
        /*    color: var(--kendo-color-on-surface, #64748b);*/
        font-variation-settings: 'FILL' 0, 'wght' 300, 'GRAD' -25, 'opsz' 48;
        opacity: 0.3;
        pointer-events: none;
        z-index: 0;
    }

/* let the glyph show through: keep the scrolling area and rows transparent
   (applies to both Grid and TreeList — same .k-grid-content / .k-table DOM) */
.brz-watermark-grid .k-grid-content,
.brz-watermark-grid .k-virtual-content,
.brz-watermark-grid .k-grid-content .k-table,
.brz-watermark-grid .k-virtual-content .k-table,
.brz-watermark-grid .k-grid-content .k-table-row,
.brz-watermark-grid .k-virtual-content .k-table-row,
.brz-watermark-grid .k-grid-content td,
.brz-watermark-grid .k-virtual-content td {
    background: transparent;
}

/* keep grid rows above the watermark */
.brz-watermark-grid .k-grid-content .k-table,
.brz-watermark-grid .k-virtual-content .k-table {
    position: relative;
    z-index: 1;
}

/* the box wrapper must fill its parent so the glyph sits at the real
   bottom-right of the content (Grid/TreeList use Telerik's own layout) */
.brz-watermark-box {
    height: 100%;
}

/* ---- glyph choices: the ONLY thing that differs per use ----
   (Material Symbols ligature names) */
.brz-watermark-person { --brz-watermark-glyph: "person"; }
.brz-watermark-account_box { --brz-watermark-glyph: "account_box"; }
.brz-watermark-group { --brz-watermark-glyph: "group"; }
.brz-watermark-settings { --brz-watermark-glyph: "settings"; }
.brz-watermark-dashboard { --brz-watermark-glyph: "dashboard"; }
.brz-watermark-badge { --brz-watermark-glyph: "badge"; }
.brz-watermark-account_balance { --brz-watermark-glyph: "account_balance"; }
.brz-watermark-bar_chart { --brz-watermark-glyph: "bar_chart"; }
.brz-watermark-theater_comedy { --brz-watermark-glyph: "theater_comedy"; }
.brz-watermark-table_rows { --brz-watermark-glyph: "table_rows"; }
.brz-watermark-apartment { --brz-watermark-glyph: "apartment"; }
.brz-watermark-engineering { --brz-watermark-glyph: "engineering"; }
.brz-watermark-playlist_add_circle { --brz-watermark-glyph: "playlist_add_circle"; }
.brz-watermark-analytics { --brz-watermark-glyph: "analytics"; }