/* ═══════════════════════════════════════════════════════════════════════════════════════════════
   NEXTWO-TIME — the parts of the look MudBlazor's theme has no slot for.

   Every colour here comes from the --mud-palette-* variables MudBlazor emits for the ACTIVE mode, so
   each rule works in dark and light alike. The previous sheet hard-coded the dark portal colours with
   !important (gradient "3D" buttons, cards that lifted on hover, gold upper-case table headers), which
   made a light theme impossible; those are gone rather than recoloured — the product is a calm working
   tool, and effects were competing with the data.
   ═══════════════════════════════════════════════════════════════════════════════════════════════ */

:root {
    --nt-radius-card: 14px;
    --nt-radius-ctl: 10px;
    --nt-mono: "IBM Plex Mono", Consolas, "Courier New", monospace;
    --nt-accent: #F9A71A;
}

body { -webkit-font-smoothing: antialiased; }

/* Headings share the body family; weight and tracking carry the hierarchy. */
h1, h2, h3, h4, h5, h6,
.mud-typography-h1, .mud-typography-h2, .mud-typography-h3,
.mud-typography-h4, .mud-typography-h5, .mud-typography-h6 {
    font-family: "IBM Plex Sans", "IBM Plex Sans Arabic", "Segoe UI", Tahoma, Arial, sans-serif;
    font-weight: 600;
    letter-spacing: -.01em;
    text-wrap: balance;
}

/* ── Surfaces: a hairline border separates, a shadow is kept for things that float ─────────────── */
.mud-paper { border-radius: var(--nt-radius-card); }
.mud-paper.mud-elevation-1,
.mud-paper.mud-elevation-2,
.mud-paper.mud-elevation-3 {
    box-shadow: none;
    border: 1px solid var(--mud-palette-lines-default);
}
.mud-dialog { border-radius: var(--nt-radius-card); }

/* ── Buttons ─────────────────────────────────────────────────────────────────────────────────── */
.mud-button-root { border-radius: var(--nt-radius-ctl); }

/* A refused action must not still look pressable, but its LABEL stays readable: the Users & Roles
   guards explain themselves on hover, so the operator has to be able to see which action is blocked. */
.mud-button-root:disabled,
.mud-button-root.mud-disabled {
    background: var(--mud-palette-action-disabled-background) !important;
    color: var(--mud-palette-text-secondary) !important;
    box-shadow: none !important;
    cursor: not-allowed !important;
    pointer-events: auto;
}

/* ── Inputs ──────────────────────────────────────────────────────────────────────────────────────
   The app builds fields with MudBlazor's default UNDERLINE variant; they are drawn here as quiet boxes.
   A translucent fill works on both grounds. Logical properties keep the inset right in Arabic. */
.mud-input.mud-input-underline,
.mud-input.mud-input-outlined,
.mud-input.mud-input-filled {
    background-color: rgba(127, 131, 150, 0.08);
    border: 1px solid var(--mud-palette-lines-inputs);
    border-radius: var(--nt-radius-ctl);
    padding-inline: 12px;
    transition: border-color .15s ease, box-shadow .15s ease;
}
.mud-input.mud-input-underline::before,
.mud-input.mud-input-underline::after { display: none !important; }
.mud-input.mud-input-underline:focus-within,
.mud-input.mud-input-outlined:focus-within {
    border-color: var(--mud-palette-primary);
    box-shadow: 0 0 0 3px var(--mud-palette-primary-hover);
}
.mud-input-control .mud-input-label-inputcontrol { margin-inline-start: 12px; }
.mud-input-outlined .mud-input-outlined-border { border-radius: var(--nt-radius-ctl); }

/* ── Tables: quiet headers, the data carries the colour ──────────────────────────────────────── */
.mud-table-container .mud-table-head .mud-table-cell {
    color: var(--mud-palette-text-secondary);
    font-weight: 500;
    font-size: .75rem;
    border-bottom: 1px solid var(--mud-palette-table-lines);
}
.mud-table-cell { font-variant-numeric: tabular-nums; }

.mud-chip { font-weight: 500; border-radius: 9999px; }
.mud-alert { border-radius: var(--nt-radius-ctl); }

/* ── Navigation ──────────────────────────────────────────────────────────────────────────────── */
.mud-navmenu .mud-nav-link { border-radius: var(--nt-radius-ctl); margin: 2px 8px; }
.mud-navmenu .mud-nav-link:hover { background-color: var(--mud-palette-table-hover); }
.mud-navmenu .mud-nav-link.active {
    background-color: var(--mud-palette-primary-hover);
    color: var(--mud-palette-text-primary);
    border-inline-start: 3px solid var(--mud-palette-primary);
}

/* ── App bar: same ground as the page, separated by a hairline rather than a coloured slab ─────── */
.nt-appbar.mud-appbar { border-bottom: 1px solid var(--mud-palette-lines-default); }
.nt-brand { display: flex; align-items: center; gap: 10px; text-decoration: none; color: inherit; }
.nt-brand img { width: 28px; height: 28px; display: block; }
.nt-word { font-weight: 700; letter-spacing: .06em; font-size: 15px; white-space: nowrap; direction: ltr; }
.nt-word span { color: var(--nt-accent); }

/* ── Top bar: search, company, bell, account ────────────────────────────────────────────────── */
.nt-search-box { flex: 1 1 320px; max-width: 460px; margin-inline: 16px; }
.nt-search-box .mud-input-control { margin: 0; }
.nt-company { max-width: 230px; margin-inline-end: 8px; }
.nt-company .mud-input-control { margin: 0; }
.nt-me { display: inline-flex; align-items: center; gap: 8px; padding: 3px 6px 3px 3px; margin-inline-start: 6px;
         border: 1px solid var(--mud-palette-lines-default); border-radius: 999px; background: transparent;
         color: inherit; cursor: pointer; font: inherit; }
.nt-me:hover { background: var(--mud-palette-table-hover); }
.nt-avatar { width: 30px; height: 30px; border-radius: 50%; display: grid; place-items: center; font-size: 12px;
             font-weight: 600; background: var(--mud-palette-primary); color: var(--mud-palette-primary-text); }
.nt-me-name { font-size: .8125rem; max-width: 160px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.nt-menu-head { padding: 10px 16px 8px; font-weight: 600; font-size: .8125rem; border-bottom: 1px solid var(--mud-palette-lines-default); }
.nt-menu-button { display: flex; align-items: center; gap: 12px; width: 100%; padding: 8px 16px; border: 0;
                  background: transparent; color: inherit; font: inherit; cursor: pointer; text-align: start; }
.nt-menu-button:hover { background: var(--mud-palette-table-hover); }

/* Counts in the side menu: amber means "waiting on someone". */
.nt-count { margin-inline-start: auto; padding: 0 8px; border-radius: 999px; font-size: .72rem; font-weight: 600;
            font-variant-numeric: tabular-nums; background: rgba(249, 167, 26, .16); color: var(--nt-accent); }
.nt-drawer .mud-nav-link-text { display: flex; align-items: center; gap: 8px; width: 100%; }

@media (max-width: 900px) {
    .nt-me-name, .nt-word { display: none; }
    .nt-search-box { margin-inline: 8px; }
    .nt-company { max-width: 150px; }
}

/* ── Page anatomy (Components/Shared/PageHeader.razor) ──────────────────────────────────────── */
.nt-page-head { display: flex; flex-direction: column; gap: 10px; margin-bottom: 18px; }
.nt-crumbs { display: flex; flex-wrap: wrap; gap: 6px; font-size: 12.5px; color: var(--mud-palette-text-secondary); }
.nt-crumbs a { color: inherit; text-decoration: none; }
.nt-crumbs a:hover { color: var(--mud-palette-primary); text-decoration: underline; }
.nt-head-row { display: flex; flex-wrap: wrap; align-items: flex-end; gap: 12px 20px; }
.nt-head-text { min-width: 0; }
.nt-title { margin: 0; font-size: 1.5rem; line-height: 1.25; }
.nt-subtitle { margin: 4px 0 0; color: var(--mud-palette-text-secondary); max-width: 68ch; }
.nt-actions { margin-inline-start: auto; display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.nt-filters { display: flex; flex-wrap: wrap; gap: 10px 12px; align-items: flex-end; }

/* ── Empty / loading states (Components/Shared) ─────────────────────────────────────────────── */
.nt-empty { display: grid; justify-items: center; gap: 8px; padding: 48px 20px; text-align: center; color: var(--mud-palette-text-secondary); }
.nt-empty-icon { width: 54px; height: 54px; border-radius: 16px; display: grid; place-items: center; background: var(--mud-palette-table-hover); }
.nt-empty h3 { margin: 6px 0 0; font-size: 1rem; color: var(--mud-palette-text-primary); }
.nt-empty p { margin: 0; max-width: 48ch; }
.nt-loading { display: grid; gap: 6px; padding: 12px 16px; }

/* IDs, times, PINs — digits that are read in columns. */
.nt-mono { font-family: var(--nt-mono); font-size: .8125rem; font-variant-numeric: tabular-nums; }

/* ── Scrollbar ───────────────────────────────────────────────────────────────────────────────── */
::-webkit-scrollbar { width: 8px; height: 8px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: var(--mud-palette-lines-inputs); border-radius: 9999px; }
::-webkit-scrollbar-thumb:hover { background: var(--mud-palette-text-disabled); }

@media (prefers-reduced-motion: reduce) {
    * { transition: none !important; animation: none !important; }
}