/* =============================================================
   NetLock Members Portal — shared admin stylesheet

   Holds the rules that used to be copied verbatim into the
   <style> block of every admin page: the dialog scrim blur and
   the three ambient animations used by the loading states.

   Loaded globally from Components/App.razor, so a page only
   needs its own <style> block for rules that are genuinely
   specific to it (row tints, Monaco/Quill editor sizing, ...).

   Touch devices drop the scrim blur through the
   "(hover: none) and (pointer: coarse)" block of auth-pages.css,
   which uses !important and therefore wins over this file
   regardless of load order.
   ============================================================= */

/* ----- Dialog scrim -----
   Passed as DialogOptions.BackgroundClass on the admin dialogs. */
.dialog-blurring {
    backdrop-filter: blur(10px);
}

/* ----- Ambient animations of the loading and empty states ----- */

/* Fade for the container of a loading state; referenced inline as
   "animation: fadeIn 0.5s ease-in-out". */
@keyframes fadeIn {
    from { opacity: 0; }
    to   { opacity: 1; }
}

/* Slow breathing of the "loading ..." caption. */
@keyframes pulse {
    0%, 100% { opacity: 1; }
    50%      { opacity: 0.6; }
}

.animated-text {
    animation: pulse 2s infinite ease-in-out;
}

/* Waving hand of the empty states. */
@keyframes wave {
    0%   { transform: rotate(0deg); }
    15%  { transform: rotate(15deg); }
    30%  { transform: rotate(-10deg); }
    45%  { transform: rotate(15deg); }
    60%  { transform: rotate(-10deg); }
    75%  { transform: rotate(15deg); }
    100% { transform: rotate(0deg); }
}

.wave-emoji {
    display: inline-block;
    animation: wave 2s infinite;
    transform-origin: 70% 70%;
}

/* ---------------------------------------------------------------------------------------------
   Row actions of the admin list pages (Components/Shared/Row_Actions). The icon buttons of the
   "actions" column sit in one non-wrapping inline row and the cell shrinks to its content, so the
   data columns keep the width. Below MudBlazor's Xs breakpoint (600 px) MudTable stacks every cell
   into "label | content"; the icons then sit right-aligned on one line and the tap target grows
   from the 30 px Size.Small button to 36 px. Ported from the web console.
   --------------------------------------------------------------------------------------------- */
.nlui-row-actions {
    display: inline-flex;
    align-items: center;
    gap: 2px;
    white-space: nowrap;
    vertical-align: middle;
}

.nlui-row-actions-cell {
    width: 1%;
    white-space: nowrap;
}

/* Long free-text cells (description): one line with an ellipsis at the end, the full value in the
   title attribute of the cell. Below 600 px MudTable stacks the cells, so the text wraps instead. */
.nlui-cell-truncate {
    max-width: 28rem;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

@media (max-width: 600px) {
    .nlui-row-actions {
        justify-content: flex-end;
    }

    .nlui-cell-truncate {
        max-width: none;
        white-space: normal;
    }

    .nlui-row-actions .mud-icon-button {
        padding: 8px;
    }
}

/* Touch devices get larger tap targets everywhere; the row-actions cells keep the tighter 36 px. */
@media (hover: none) and (pointer: coarse) {
    .nlui-row-actions .mud-icon-button {
        padding: 8px;
    }
}

/* ---------------------------------------------------------------------------------------------
   Rows and cells of the cloud report tables (Components/Shared/Cloud_Report_Table). The row
   classes come from Report_Table_View.Row_Class and carry the level of a report row with the
   same intent as the HTML export: amber for warning, red for critical, secondary text for a
   row without a reading. The tints are translucent so the hover colour of the row stays
   visible through them. Numeric cells are right-aligned with tabular digits.
   --------------------------------------------------------------------------------------------- */
.mud-table-row.nlui-row-warning .mud-table-cell {
    background-color: rgba(255, 193, 7, 0.16);
}

.mud-table-row.nlui-row-critical .mud-table-cell {
    background-color: rgba(244, 67, 54, 0.16);
}

.mud-table-row.nlui-row-muted .mud-table-cell {
    color: var(--mud-palette-text-secondary);
}

.mud-table-cell.nlui-cell-num {
    text-align: right;
    font-variant-numeric: tabular-nums;
}