/* TravelGroup Admin — premium visual accents that MudBlazor theming can't express.
   Keep this file tight: glass blur, gradient meshes, shimmer loaders, depth polish. */

/* ---------- Dashboard hero mesh ---------- */

.tg-hero {
    position: relative;
    padding: 14px 16px 14px;
    border-radius: 12px;
    background:
        radial-gradient(1000px 260px at 0% 0%, rgba(11, 95, 255, 0.12), transparent 60%),
        radial-gradient(700px 200px at 100% 0%, rgba(246, 162, 59, 0.12), transparent 55%),
        linear-gradient(180deg, var(--mud-palette-surface) 0%, var(--mud-palette-background) 100%);
    border: 1px solid var(--mud-palette-lines-default);
    overflow: hidden;
    margin-bottom: 12px;
}

.tg-hero::after {
    content: "";
    position: absolute;
    inset: 0;
    pointer-events: none;
    background: radial-gradient(600px 180px at 50% -20%, rgba(11, 95, 255, 0.10), transparent 70%);
}

/* ---------- Glass-morphism surfaces (drawers, palette, dialog) ---------- */

.tg-palette-dialog .mud-dialog {
    background: rgba(255, 255, 255, 0.92) !important;
    border: 1px solid rgba(15, 23, 42, 0.06);
    box-shadow: var(--tg-shadow-e6);
}

.mud-theme-dark .tg-palette-dialog .mud-dialog {
    background: rgba(17, 24, 39, 0.90) !important;
    border-color: rgba(255, 255, 255, 0.08);
}

/* ---------- Shimmer skeleton ---------- */

@keyframes tg-shimmer {
    0%   { background-position: -400px 0; }
    100% { background-position: 400px 0; }
}

.tg-skeleton-row .mud-skeleton {
    background: linear-gradient(90deg,
        rgba(148, 163, 184, 0.08) 0%,
        rgba(148, 163, 184, 0.22) 50%,
        rgba(148, 163, 184, 0.08) 100%);
    background-size: 800px 100%;
    animation: tg-shimmer 1.4s ease-in-out infinite;
}

/* ---------- Data grid polish ---------- */

.mud-table-root.tg-grid .mud-table-row {
    height: 48px;
    transition: background-color .12s var(--tg-ease);
}

.mud-table-root.tg-grid .mud-table-head .mud-table-cell {
    background: var(--mud-palette-background-gray);
    font-size: 11px;
    font-weight: 600;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--mud-palette-text-secondary);
    border-bottom: 1px solid var(--mud-palette-lines-default);
}

.tg-grid .tg-amount,
.tg-grid .tg-pnr,
.tg-grid .tg-invoice-no {
    font-family: 'JetBrains Mono', monospace;
    font-feature-settings: "tnum" 1;
}

.tg-grid .tg-amount { text-align: right; }

/* ---------- Micro-motion on cards ---------- */

.tg-kpi,
.mud-card {
    will-change: transform;
}

/* ---------- Dark mode refinements ---------- */

.mud-theme-dark .tg-wallet-chip {
    background: rgba(246, 162, 59, 0.18);
    color: #FDBA74;
}

.mud-theme-dark .tg-appbar {
    border-bottom-color: var(--mud-palette-lines-default);
    backdrop-filter: saturate(140%) blur(12px);
}

.mud-theme-dark .tg-topbar-search {
    background: rgba(255, 255, 255, 0.04);
    border-color: rgba(255, 255, 255, 0.08);
}

.mud-theme-dark .tg-hero {
    background:
        radial-gradient(1200px 320px at 0% 0%, rgba(59, 130, 246, 0.16), transparent 60%),
        radial-gradient(800px 240px at 100% 0%, rgba(246, 162, 59, 0.10), transparent 55%),
        linear-gradient(180deg, var(--mud-palette-surface) 0%, var(--mud-palette-background) 100%);
}

/* ---------- Top progress bar ---------- */

.tg-route-progress {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    height: 2px;
    z-index: 3000;
}