/* TravelGroup Admin — base layout styles */

:root {
    --tg-radius-sm: 5px;
    --tg-radius-md: 8px;
    --tg-radius-lg: 12px;
    --tg-radius-pill: 999px;
    --tg-gutter: 14px;
    --tg-gutter-sm: 10px;
    --tg-shadow-e1: 0 1px 2px rgba(15, 23, 42, .05), 0 1px 1px rgba(15, 23, 42, .03);
    --tg-shadow-e3: 0 4px 16px rgba(15, 23, 42, .06), 0 1px 4px rgba(15, 23, 42, .04);
    --tg-shadow-e6: 0 16px 40px rgba(15, 23, 42, .12), 0 3px 10px rgba(15, 23, 42, .05);
    --tg-ease: cubic-bezier(.2, .8, .2, 1);
}

html, body {
    height: 100%;
    font-family: 'Inter', 'Segoe UI', system-ui, sans-serif;
    font-feature-settings: "cv02", "cv03", "cv04", "cv11";
    -webkit-font-smoothing: antialiased;
    text-rendering: optimizeLegibility;
}

.tg-mono,
kbd {
    font-family: 'JetBrains Mono', 'SFMono-Regular', Consolas, 'Liberation Mono', monospace;
    font-feature-settings: "tnum" 1;
}

.tg-muted {
    color: var(--mud-palette-text-secondary);
}

/* ---------- Layout shell ---------- */

.tg-layout {
    min-height: 100vh;
    background: var(--mud-palette-background);
}

.tg-appbar {
    background: linear-gradient(180deg,
        color-mix(in srgb, var(--mud-palette-appbar-background) 100%, transparent) 0%,
        color-mix(in srgb, var(--mud-palette-appbar-background) 94%, transparent) 100%) !important;
    color: var(--mud-palette-appbar-text) !important;
    border-bottom: 1px solid var(--mud-palette-lines-default);
    backdrop-filter: saturate(180%) blur(14px);
    -webkit-backdrop-filter: saturate(180%) blur(14px);
    min-height: 56px !important;
}

.tg-appbar .mud-toolbar { min-height: 56px !important; padding: 0 16px !important; gap: 8px; }

.tg-appbar-actions {
    display: inline-flex;
    align-items: center;
    gap: 4px;
}

.tg-appbar-btn {
    border-radius: 10px !important;
    padding: 8px !important;
    transition: background-color .12s var(--tg-ease);
}

.tg-appbar-btn:hover {
    background: color-mix(in srgb, var(--mud-palette-text-primary) 8%, transparent) !important;
}

.tg-appbar .mud-icon-button .mud-icon-root { font-size: 20px !important; }

/* Brand block */

.tg-brand-block {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    margin-left: 4px;
    padding: 4px 8px;
    border-radius: 10px;
    text-decoration: none !important;
    color: inherit !important;
    transition: background-color .12s var(--tg-ease);
}

.tg-brand-block:hover {
    background: color-mix(in srgb, var(--mud-palette-text-primary) 6%, transparent);
}

.tg-brand-mark {
    width: 32px;
    height: 32px;
    border-radius: 10px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: #fff;
    background: linear-gradient(135deg, #0B5FFF 0%, #0847C2 60%, #0A1F5C 100%);
    box-shadow: 0 6px 16px -4px rgba(11, 95, 255, 0.55),
                inset 0 0 0 1px rgba(255, 255, 255, 0.18);
    flex: 0 0 32px;
}

.tg-brand-mark .mud-icon-root {
    font-size: 18px !important;
    transform: rotate(-20deg);
}

.tg-brand-text {
    display: inline-flex;
    align-items: baseline;
    gap: 6px;
    line-height: 1;
}

.tg-brand-name {
    font-weight: 700;
    font-size: 15px;
    letter-spacing: -0.01em;
}

.tg-brand-accent {
    font-weight: 600;
    font-size: 12px;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--mud-palette-primary);
    padding: 2px 6px;
    border-radius: 6px;
    background: color-mix(in srgb, var(--mud-palette-primary) 12%, transparent);
}

/* Profile trigger pill */

.tg-profile-trigger {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    margin-left: 6px;
    padding: 4px 10px 4px 4px;
    border-radius: 999px;
    border: 1px solid var(--mud-palette-lines-default);
    background: color-mix(in srgb, var(--mud-palette-surface) 90%, transparent);
    color: inherit;
    cursor: pointer;
    transition: border-color .12s var(--tg-ease), background-color .12s var(--tg-ease), transform .12s var(--tg-ease);
    font: inherit;
}

.tg-profile-trigger:hover {
    border-color: var(--mud-palette-primary);
    background: color-mix(in srgb, var(--mud-palette-primary) 6%, var(--mud-palette-surface));
}

.tg-profile-trigger:active { transform: translateY(1px); }

.tg-profile-meta {
    display: inline-flex;
    flex-direction: column;
    align-items: flex-start;
    line-height: 1.15;
    max-width: 160px;
}

.tg-profile-name {
    font-size: 13px;
    font-weight: 600;
    letter-spacing: -0.005em;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 160px;
}

.tg-profile-role {
    font-size: 11px;
    color: var(--mud-palette-text-secondary);
    text-transform: uppercase;
    letter-spacing: 0.04em;
    margin-top: 1px;
}

@media (max-width: 760px) {
    .tg-profile-meta { display: none; }
    .tg-profile-trigger { padding: 4px; }
}

/* Avatar */

.tg-avatar {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    color: #fff;
    font-weight: 600;
    letter-spacing: 0.02em;
    text-transform: uppercase;
    box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.25),
                0 2px 6px -2px rgba(0, 0, 0, 0.25);
    flex-shrink: 0;
}

.tg-avatar-sm { width: 30px; height: 30px; font-size: 12px; }
.tg-avatar-md { width: 36px; height: 36px; font-size: 13px; letter-spacing: 0.02em; }
.tg-avatar-lg { width: 48px; height: 48px; font-size: 16px; }

/* Profile menu popover */

.tg-profile-pop {
    min-width: 280px !important;
    border-radius: 14px !important;
    overflow: hidden;
    border: 1px solid var(--mud-palette-lines-default) !important;
    box-shadow: 0 20px 50px -20px rgba(15, 23, 42, 0.35),
                0 4px 12px -4px rgba(15, 23, 42, 0.12) !important;
}

.tg-profile-pop .mud-list-item {
    padding: 10px 16px !important;
    font-size: 13px !important;
}

.tg-profile-head {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    padding: 16px;
    background: linear-gradient(135deg,
        color-mix(in srgb, var(--mud-palette-primary) 8%, transparent) 0%,
        color-mix(in srgb, var(--mud-palette-secondary) 6%, transparent) 100%);
}

.tg-profile-head-text {
    display: flex;
    flex-direction: column;
    gap: 4px;
    min-width: 0;
}

.tg-profile-head-name {
    font-weight: 600;
    font-size: 14px;
    letter-spacing: -0.005em;
}

.tg-profile-head-email {
    font-size: 12px;
    color: var(--mud-palette-text-secondary);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 200px;
}

.tg-menu-danger .mud-icon-root,
.tg-menu-danger .mud-list-item-text {
    color: var(--mud-palette-error) !important;
}

/* Row action cluster (table) */
.tg-row-actions {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    justify-content: flex-end;
}

.tg-row-act {
    width: 32px !important;
    height: 32px !important;
    border-radius: 10px !important;
    border: 1px solid var(--mud-palette-lines-default) !important;
    background: var(--mud-palette-surface) !important;
    color: var(--mud-palette-text-secondary) !important;
    transition: border-color 120ms ease, background-color 120ms ease, color 120ms ease, transform 120ms ease;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    padding: 0 !important;
}

.tg-row-act:hover {
    border-color: color-mix(in srgb, var(--mud-palette-primary) 38%, var(--mud-palette-lines-default)) !important;
    background: color-mix(in srgb, var(--mud-palette-primary) 6%, var(--mud-palette-surface)) !important;
    color: var(--mud-palette-primary) !important;
    transform: translateY(-1px);
}

.tg-row-act .mud-icon-root { font-size: 18px !important; }

.tg-row-act-primary {
    border-color: color-mix(in srgb, var(--mud-palette-primary) 32%, var(--mud-palette-lines-default)) !important;
    color: var(--mud-palette-primary) !important;
    background: color-mix(in srgb, var(--mud-palette-primary) 5%, var(--mud-palette-surface)) !important;
}

.tg-row-act-primary:hover {
    background: color-mix(in srgb, var(--mud-palette-primary) 12%, var(--mud-palette-surface)) !important;
}

.tg-row-act-ghost:focus-visible {
    outline: 2px solid color-mix(in srgb, var(--mud-palette-primary) 50%, transparent);
    outline-offset: 1px;
}

/* Polished action-menu popover (used on Agents list) */
.tg-action-menu {
    min-width: 280px !important;
    max-width: 320px !important;
    border-radius: 14px !important;
    overflow: hidden !important;
    border: 1px solid var(--mud-palette-lines-default) !important;
    box-shadow:
        0 20px 50px -20px rgba(15, 23, 42, 0.35),
        0 4px 12px -4px rgba(15, 23, 42, 0.12) !important;
    padding: 0 !important;
}

.tg-action-menu .mud-list {
    padding: 4px 0 6px !important;
}

.tg-action-menu .mud-list-item {
    padding: 10px 14px !important;
    gap: 12px !important;
    align-items: flex-start !important;
    border-radius: 8px !important;
    margin: 2px 6px !important;
    transition: background-color 120ms ease;
}

.tg-action-menu .mud-list-item:hover {
    background: color-mix(in srgb, var(--mud-palette-primary) 7%, transparent) !important;
}

.tg-action-menu .mud-list-item .mud-list-item-icon {
    width: 32px;
    height: 32px;
    min-width: 32px;
    border-radius: 10px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: color-mix(in srgb, var(--mud-palette-primary) 10%, transparent);
    color: var(--mud-palette-primary);
    margin: 0 !important;
    padding: 0 !important;
    flex: 0 0 32px;
}

.tg-action-menu .mud-list-item .mud-list-item-icon .mud-icon-root {
    font-size: 18px !important;
    color: inherit !important;
}

.tg-action-menu .mud-list-item-text {
    display: flex !important;
    flex-direction: column !important;
    gap: 2px !important;
    padding: 1px 0 0 !important;
    margin: 0 !important;
}

.tg-action-menu-label {
    font-size: 13px;
    font-weight: 500;
    color: var(--mud-palette-text-primary);
    line-height: 1.3;
}

.tg-action-menu-hint {
    font-size: 11.5px;
    color: var(--mud-palette-text-secondary);
    line-height: 1.3;
}

.tg-action-menu-head {
    display: flex;
    gap: 10px;
    align-items: center;
    padding: 12px 14px;
    background: linear-gradient(135deg,
        color-mix(in srgb, var(--mud-palette-primary) 9%, transparent) 0%,
        color-mix(in srgb, var(--mud-palette-secondary) 7%, transparent) 100%);
    border-bottom: 1px solid var(--mud-palette-lines-default);
}

.tg-action-menu-head-text { min-width: 0; }

.tg-action-menu-head-name {
    font-weight: 600;
    font-size: 13px;
    color: var(--mud-palette-text-primary);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 220px;
}

.tg-action-menu-head-sub {
    font-size: 11.5px;
    color: var(--mud-palette-text-secondary);
    display: inline-flex;
    align-items: center;
    gap: 6px;
    margin-top: 2px;
}

.tg-action-menu-head-flag {
    font-size: 10.5px;
    font-weight: 600;
    padding: 1px 7px;
    border-radius: 999px;
    letter-spacing: 0.02em;
}

.tg-action-menu-head-flag-error {
    background: color-mix(in srgb, var(--mud-palette-error) 14%, transparent);
    color: var(--mud-palette-error);
}

.tg-action-menu-head-flag-warning {
    background: color-mix(in srgb, var(--mud-palette-warning) 18%, transparent);
    color: var(--mud-palette-warning-darken);
}

.tg-action-menu-section {
    font-size: 10.5px;
    font-weight: 600;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--mud-palette-text-secondary);
    padding: 8px 14px 4px;
}

.tg-action-menu-divider {
    margin: 4px 8px !important;
}

.tg-action-menu .tg-action-menu-item-success .mud-list-item-icon {
    background: color-mix(in srgb, #10B981 14%, transparent);
    color: #059669;
}

.tg-action-menu .tg-action-menu-item-danger .mud-list-item-icon {
    background: color-mix(in srgb, var(--mud-palette-error) 14%, transparent);
    color: var(--mud-palette-error);
}

.tg-action-menu .tg-action-menu-item-danger:hover {
    background: color-mix(in srgb, var(--mud-palette-error) 8%, transparent) !important;
}

.tg-action-menu .tg-action-menu-item-danger .tg-action-menu-label {
    color: var(--mud-palette-error);
}

/* Make MudBlazor's appbar/drawer math honor our 56px bar */
:root,
.mud-layout,
.tg-layout {
    --mud-appbar-height: 56px;
}

.tg-layout .mud-drawer {
    top: 56px !important;
    height: calc(100vh - 56px) !important;
}

.tg-layout .mud-drawer.mud-drawer-clipped-always,
.tg-layout .mud-drawer--clipped-always {
    top: 56px !important;
    height: calc(100vh - 56px) !important;
}

.tg-drawer {
    background-color: var(--mud-palette-drawer-background) !important;
    border-right: 1px solid var(--mud-palette-lines-default);
}

.tg-main {
    background: var(--mud-palette-background);
}

.tg-content-wrap {
    padding: var(--tg-gutter);
    max-width: 1680px;
    margin: 0 auto;
}

.mud-main-content { padding-top: 56px !important; }

/* ---------- Top-bar search ---------- */

.tg-topbar-search {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    min-width: 320px;
    max-width: 480px;
    padding: 0 8px 0 10px;
    border-radius: var(--tg-radius-md);
    background: color-mix(in srgb, var(--mud-palette-background-gray) 70%, var(--mud-palette-surface));
    border: 1px solid var(--mud-palette-lines-default);
    color: var(--mud-palette-text-secondary);
    cursor: text;
    transition: border-color .15s var(--tg-ease),
                background-color .15s var(--tg-ease),
                box-shadow .15s var(--tg-ease);
    height: 36px;
    font: inherit;
    text-align: left;
}

.tg-topbar-search:hover {
    border-color: color-mix(in srgb, var(--mud-palette-primary) 50%, var(--mud-palette-lines-default));
    background: var(--mud-palette-surface);
}

.tg-topbar-search:focus-visible {
    outline: none;
    border-color: var(--mud-palette-primary);
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--mud-palette-primary) 20%, transparent);
}

.tg-topbar-search-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: var(--mud-palette-text-secondary);
}

.tg-topbar-search-icon .mud-icon-root { font-size: 16px !important; }

.tg-topbar-search-placeholder {
    flex: 1;
    font-size: 12.5px;
    color: var(--mud-palette-text-secondary);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.tg-kbd {
    display: inline-flex;
    gap: 3px;
    align-items: center;
    color: var(--mud-palette-text-secondary);
    font-size: 11px;
}

.tg-kbd kbd {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 20px;
    height: 20px;
    padding: 0 5px;
    border: 1px solid var(--mud-palette-lines-default);
    border-bottom-width: 2px;
    border-radius: 5px;
    background: var(--mud-palette-surface);
    font-family: 'Inter', sans-serif;
    font-size: 10px;
    font-weight: 600;
    line-height: 1;
    color: var(--mud-palette-text-primary);
}

/* ---------- Wallet chip ---------- */

.tg-wallet-chip {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 3px 12px 3px 3px;
    margin: 0 4px;
    border-radius: var(--tg-radius-pill);
    background: color-mix(in srgb, #F6A23B 10%, var(--mud-palette-surface));
    border: 1px solid color-mix(in srgb, #F6A23B 25%, transparent);
    height: 32px;
    transition: background-color .15s var(--tg-ease), border-color .15s var(--tg-ease);
}

.tg-wallet-chip:hover {
    background: color-mix(in srgb, #F6A23B 14%, var(--mud-palette-surface));
    border-color: color-mix(in srgb, #F6A23B 40%, transparent);
}

.tg-wallet-icon {
    width: 26px;
    height: 26px;
    border-radius: 999px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: linear-gradient(135deg, #F6A23B, #D97706);
    color: #fff;
    flex-shrink: 0;
    box-shadow: 0 2px 6px -2px rgba(217, 119, 6, 0.55);
}

.tg-wallet-icon .mud-icon-root { font-size: 15px !important; color: #fff; }

.tg-wallet-meta {
    display: inline-flex;
    flex-direction: column;
    line-height: 1.1;
    min-width: 0;
}

.tg-wallet-label {
    font-size: 9px;
    font-weight: 700;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: #92400E;
    opacity: 0.85;
}

.tg-wallet-amount {
    font-family: 'JetBrains Mono', monospace;
    font-feature-settings: "tnum" 1;
    font-size: 12.5px;
    font-weight: 700;
    color: #92400E;
}

/* Dark mode wallet chip */
.mud-theme-dark .tg-wallet-label,
.mud-theme-dark .tg-wallet-amount {
    color: #FBBF24;
}

/* ---------- Nav menu ---------- */

.tg-nav {
    padding: 14px 6px 12px;
    display: flex;
    flex-direction: column;
    height: 100%;
    overflow-y: auto;
    scrollbar-width: thin;
}

.tg-nav::-webkit-scrollbar { width: 6px; }
.tg-nav::-webkit-scrollbar-thumb {
    background: color-mix(in srgb, var(--mud-palette-text-primary) 12%, transparent);
    border-radius: 3px;
}

.tg-navmenu {
    background: transparent !important;
}

.tg-nav-section {
    margin-bottom: 16px;
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.tg-nav-section--bottom {
    margin-top: auto;
    padding-top: 10px;
    border-top: 1px solid var(--mud-palette-lines-default);
}

.tg-nav-section-head {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 4px 12px 8px;
}

.tg-nav-section-icon {
    width: 20px;
    height: 20px;
    border-radius: 6px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.tg-nav-section-icon .mud-icon-root { font-size: 13px !important; }

.tg-nav-section-label {
    display: inline-block;
    font-size: 10px;
    font-weight: 700;
    letter-spacing: 0.10em;
    text-transform: uppercase;
    color: var(--mud-palette-text-secondary);
    opacity: 0.9;
}

.mud-nav-link {
    position: relative;
    border-radius: 10px !important;
    margin: 0 8px;
    min-height: 36px !important;
    padding: 8px 12px !important;
    font-size: 13px !important;
    font-weight: 500 !important;
    color: var(--mud-palette-text-primary) !important;
    transition: background-color .15s var(--tg-ease),
                color .15s var(--tg-ease),
                transform .12s var(--tg-ease);
}

.mud-nav-link::before {
    content: "";
    position: absolute;
    left: -4px;
    top: 8px;
    bottom: 8px;
    width: 3px;
    border-radius: 0 3px 3px 0;
    background: transparent;
    transition: background-color .15s var(--tg-ease);
}

.mud-nav-link .mud-nav-link-icon {
    margin-right: 12px !important;
    color: var(--mud-palette-text-secondary) !important;
    transition: color .15s var(--tg-ease);
}
.mud-nav-link .mud-icon-root { font-size: 18px !important; }

.mud-nav-link:hover {
    background: color-mix(in srgb, var(--mud-palette-text-primary) 5%, transparent) !important;
}

.mud-nav-link:hover .mud-nav-link-icon {
    color: var(--mud-palette-text-primary) !important;
}

.mud-nav-link.active {
    background: linear-gradient(90deg,
        color-mix(in srgb, var(--mud-palette-primary) 14%, transparent) 0%,
        color-mix(in srgb, var(--mud-palette-primary) 6%, transparent) 100%) !important;
    color: var(--mud-palette-primary) !important;
    font-weight: 600 !important;
}

.mud-nav-link.active::before {
    background: var(--mud-palette-primary);
    box-shadow: 0 0 8px color-mix(in srgb, var(--mud-palette-primary) 60%, transparent);
}

.mud-nav-link.active .mud-nav-link-icon {
    color: var(--mud-palette-primary) !important;
}

/* Mini-drawer: hide section labels, center icons */
.mud-drawer--mini:not(:hover) .tg-nav-section-head { justify-content: center; padding: 4px 0 8px; }
.mud-drawer--mini:not(:hover) .tg-nav-section-label { display: none; }
.mud-drawer--mini:not(:hover) .mud-nav-link { justify-content: center; padding: 8px !important; }
.mud-drawer--mini:not(:hover) .mud-nav-link .mud-nav-link-icon { margin-right: 0 !important; }
.mud-drawer--mini:not(:hover) .mud-nav-link .mud-nav-link-text { display: none; }

/* ---------- Page header ---------- */

.tg-page-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 16px;
    margin: 4px 0 18px;
    padding: 14px 18px 14px 20px;
    position: relative;
    background:
        linear-gradient(
            135deg,
            color-mix(in srgb, var(--mud-palette-primary) 6%, var(--mud-palette-surface)) 0%,
            var(--mud-palette-surface) 55%,
            color-mix(in srgb, var(--mud-palette-secondary) 4%, var(--mud-palette-surface)) 100%
        );
    border: 1px solid var(--mud-palette-lines-default);
    border-radius: 14px;
    box-shadow: var(--tg-shadow-e1);
    overflow: hidden;
}

.tg-page-header::before {
    content: "";
    position: absolute;
    left: 0;
    top: 12px;
    bottom: 12px;
    width: 3px;
    border-radius: 0 4px 4px 0;
    background: linear-gradient(180deg, var(--mud-palette-primary) 0%, #8B5CF6 100%);
    box-shadow: 0 0 10px color-mix(in srgb, var(--mud-palette-primary) 45%, transparent);
}

.tg-page-header::after {
    content: "";
    position: absolute;
    right: -40px;
    top: -60px;
    width: 220px;
    height: 220px;
    border-radius: 50%;
    background: radial-gradient(circle, color-mix(in srgb, var(--mud-palette-primary) 10%, transparent) 0%, transparent 65%);
    pointer-events: none;
}

.tg-page-header-text {
    display: flex;
    flex-direction: column;
    gap: 2px;
    min-width: 0;
    position: relative;
    z-index: 1;
}

.tg-breadcrumbs {
    padding: 0 !important;
    margin-bottom: 4px;
    font-size: 11px;
    opacity: 0.8;
}

.tg-breadcrumbs .mud-breadcrumb-item,
.tg-breadcrumbs .mud-breadcrumbs-separator {
    font-size: 11px !important;
    color: var(--mud-palette-text-secondary) !important;
}

.tg-page-title-row {
    display: flex;
    align-items: center;
    gap: 10px;
    flex-wrap: wrap;
}

.tg-page-eyebrow {
    font-size: 10px;
    font-weight: 700;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--mud-palette-primary);
    background: color-mix(in srgb, var(--mud-palette-primary) 12%, transparent);
    padding: 3px 8px;
    border-radius: 999px;
    line-height: 1;
}

.tg-page-title {
    font-size: 22px;
    font-weight: 700;
    letter-spacing: -0.022em;
    line-height: 1.15;
    color: var(--mud-palette-text-primary);
    margin: 0;
    font-family: "Inter", "Segoe UI", sans-serif;
}

.tg-page-subtitle {
    color: var(--mud-palette-text-secondary);
    font-size: 13px;
    line-height: 1.45;
    margin: 4px 0 0;
    max-width: 720px;
}

.tg-page-header-actions {
    display: inline-flex;
    gap: 8px;
    flex-shrink: 0;
    position: relative;
    z-index: 1;
}

.tg-page-header-actions .mud-button-root {
    min-height: 34px;
    padding: 6px 14px;
    font-size: 12.5px;
    font-weight: 600;
    border-radius: 8px;
}

@media (max-width: 680px) {
    .tg-page-header {
        flex-direction: column;
        align-items: stretch;
        gap: 10px;
    }
    .tg-page-header-actions {
        justify-content: flex-end;
    }
    .tg-page-title { font-size: 19px; }
}

/* ---------- KPI cards ---------- */

.tg-kpi {
    position: relative;
    padding: 16px 18px 14px;
    border: 1px solid var(--mud-palette-lines-default);
    border-radius: var(--tg-radius-md);
    background: var(--mud-palette-surface);
    transition: transform .16s var(--tg-ease), box-shadow .16s var(--tg-ease), border-color .16s var(--tg-ease);
    overflow: hidden;
}

.tg-kpi::after {
    content: "";
    position: absolute;
    inset: 0 0 auto 0;
    height: 2px;
    background: transparent;
    transition: background .16s var(--tg-ease);
}

.tg-kpi:hover {
    transform: translateY(-2px);
    box-shadow: var(--tg-shadow-e3);
    border-color: rgba(11, 95, 255, 0.22);
}

.tg-kpi--primary {
    background: linear-gradient(135deg, var(--mud-palette-primary-lighten) 0%, var(--mud-palette-surface) 62%);
    border-color: rgba(11, 95, 255, 0.18);
    box-shadow: 0 0 0 4px rgba(11, 95, 255, 0.04);
}

.tg-kpi--primary::after {
    background: linear-gradient(90deg, var(--mud-palette-primary) 0%, #8B5CF6 100%);
}

.tg-kpi--tone-success::after   { background: color-mix(in srgb, #10B981 70%, transparent); }
.tg-kpi--tone-warning::after   { background: color-mix(in srgb, #F59E0B 70%, transparent); }
.tg-kpi--tone-error::after     { background: color-mix(in srgb, #EF4444 70%, transparent); }
.tg-kpi--tone-info::after      { background: color-mix(in srgb, #0EA5E9 70%, transparent); }
.tg-kpi--tone-violet::after    { background: color-mix(in srgb, #8B5CF6 70%, transparent); }

.tg-kpi-head {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 10px;
}

.tg-kpi-icon-tile {
    width: 32px;
    height: 32px;
    border-radius: 8px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    background: color-mix(in srgb, var(--mud-palette-primary) 14%, transparent);
    color: var(--mud-palette-primary);
}

.tg-kpi-icon-tile .mud-icon-root { font-size: 18px !important; }

.tg-kpi-label {
    font-size: 10.5px;
    font-weight: 600;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--mud-palette-text-secondary);
}

.tg-kpi-value {
    font-family: 'JetBrains Mono', monospace;
    font-size: 24px;
    font-weight: 600;
    letter-spacing: -0.02em;
    color: var(--mud-palette-text-primary);
    font-feature-settings: "tnum" 1;
    line-height: 1.1;
}

.tg-kpi-caption {
    margin-top: 6px;
    font-size: 11.5px;
    color: var(--mud-palette-text-secondary);
}

.tg-kpi-delta {
    margin-top: 6px;
    display: inline-flex;
    align-items: center;
    gap: 3px;
    font-size: 11px;
    font-weight: 500;
}

.tg-kpi-delta .mud-icon-root { font-size: 14px !important; }

.tg-kpi-delta.is-up { color: var(--mud-palette-success); }
.tg-kpi-delta.is-down { color: var(--mud-palette-error); }

/* ---------- Section card ---------- */

.tg-card {
    border: 1px solid var(--mud-palette-lines-default);
    border-radius: var(--tg-radius-md);
    background: var(--mud-palette-surface);
    padding: 12px 14px;
    height: 100%;
}

.tg-card-head {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 10px;
    margin-bottom: 8px;
    padding-bottom: 6px;
    border-bottom: 1px solid var(--mud-palette-lines-default);
}

.tg-card-head .mud-typography-subtitle1 {
    font-size: 13px !important;
    font-weight: 600;
}

/* Tighten the grid gutters globally */
.mud-grid.mud-grid-spacing-xs-2 { margin: -4px !important; }
.mud-grid.mud-grid-spacing-xs-2 > .mud-grid-item { padding: 4px !important; }

/* ---------- Pills ---------- */

.tg-pill {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 3px 10px 3px 8px;
    border-radius: var(--tg-radius-pill);
    font-size: 11px;
    font-weight: 600;
    letter-spacing: 0.015em;
    line-height: 1.5;
    white-space: nowrap;
    border: 1px solid transparent;
    transition: background 120ms ease, border-color 120ms ease;
}

.tg-pill .mud-icon-root { font-size: 13px !important; }

.tg-pill--success {
    background: rgba(16, 185, 129, .10);
    color: #047857;
    border-color: rgba(16, 185, 129, .20);
}

.tg-pill--warning {
    background: rgba(245, 158, 11, .12);
    color: #B45309;
    border-color: rgba(245, 158, 11, .22);
}

.tg-pill--error {
    background: rgba(239, 68, 68, .10);
    color: #B91C1C;
    border-color: rgba(239, 68, 68, .22);
}

.tg-pill--info {
    background: rgba(14, 165, 233, .10);
    color: #0369A1;
    border-color: rgba(14, 165, 233, .22);
}

.tg-pill--neutral {
    background: rgba(100, 116, 139, .10);
    color: #475569;
    border-color: rgba(100, 116, 139, .20);
}

/* Dark theme tuning — richer bg so pill reads on near-black surfaces */
[data-theme="dark"] .tg-pill--success { background: rgba(16, 185, 129, .18); color: #34D399; border-color: rgba(16, 185, 129, .28); }
[data-theme="dark"] .tg-pill--warning { background: rgba(245, 158, 11, .18); color: #FBBF24; border-color: rgba(245, 158, 11, .28); }
[data-theme="dark"] .tg-pill--error   { background: rgba(239, 68, 68, .18);  color: #F87171; border-color: rgba(239, 68, 68, .28); }
[data-theme="dark"] .tg-pill--info    { background: rgba(14, 165, 233, .18); color: #38BDF8; border-color: rgba(14, 165, 233, .28); }
[data-theme="dark"] .tg-pill--neutral { background: rgba(148, 163, 184, .14); color: #CBD5E1; border-color: rgba(148, 163, 184, .22); }

/* ---------- Empty state ---------- */

.tg-empty {
    text-align: center;
    padding: 28px 16px;
    color: var(--mud-palette-text-secondary);
}

.tg-empty-icon {
    font-size: 32px !important;
    color: var(--mud-palette-text-disabled);
    margin-bottom: 6px;
}

.tg-empty-title {
    margin-bottom: 2px;
    color: var(--mud-palette-text-primary);
    font-size: 13px !important;
}

.tg-empty-action {
    margin-top: 10px;
}

/* ---------- Skeleton table ---------- */

.tg-skeleton-table { padding: 4px 0; }
.tg-skeleton-row {
    display: flex;
    gap: 10px;
    padding: 6px 2px;
    border-bottom: 1px solid var(--mud-palette-lines-default);
}
.tg-skeleton-row:last-child { border-bottom: 0; }
.tg-skeleton-row .mud-skeleton { height: 12px; border-radius: 3px; }

/* ---------- Dense MudTable / MudDataGrid defaults ---------- */

.mud-table-root .mud-table-row { height: 40px; }
.mud-table-root .mud-table-cell { padding: 6px 10px !important; font-size: 12.5px; }
.mud-table-root .mud-table-head .mud-table-cell {
    font-size: 10.5px;
    font-weight: 600;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--mud-palette-text-secondary);
    background: var(--mud-palette-background-gray);
}

/* ---------- Notifications drawer ---------- */

.tg-notif-drawer .mud-drawer-content {
    display: flex;
    flex-direction: column;
    background: var(--mud-palette-surface);
}

.tg-notif-shell {
    display: flex;
    flex-direction: column;
    height: 100%;
    min-height: 0;
}

.tg-notif-head {
    padding: 16px 18px 14px;
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 12px;
    border-bottom: 1px solid var(--mud-palette-divider);
    background:
        radial-gradient(140% 120% at 0% 0%, color-mix(in srgb, var(--mud-palette-primary) 10%, transparent), transparent 55%),
        var(--mud-palette-surface);
}

.tg-notif-head-main {
    display: flex;
    align-items: center;
    gap: 12px;
    min-width: 0;
}

.tg-notif-head-icon {
    width: 40px;
    height: 40px;
    border-radius: 12px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: color-mix(in srgb, var(--mud-palette-primary) 14%, transparent);
    color: var(--mud-palette-primary);
    flex: 0 0 auto;
}

.tg-notif-head-icon .mud-icon-root { font-size: 20px; }

.tg-notif-head-text { min-width: 0; }

.tg-notif-head-title {
    font-size: 15px;
    font-weight: 600;
    color: var(--mud-palette-text-primary);
    display: inline-flex;
    align-items: center;
    gap: 8px;
    line-height: 1.2;
}

.tg-notif-count {
    font-size: 10.5px !important;
    padding: 2px 8px !important;
    height: 18px !important;
    line-height: 14px !important;
}

.tg-notif-head-sub {
    font-size: 12px;
    color: var(--mud-palette-text-secondary);
    margin-top: 2px;
}

.tg-notif-head-actions {
    display: inline-flex;
    align-items: center;
    gap: 2px;
    flex: 0 0 auto;
}

.tg-notif-body {
    flex: 1 1 auto;
    min-height: 0;
    overflow-y: auto;
    padding: 8px 0 12px;
}

.tg-notif-group + .tg-notif-group { margin-top: 6px; }

.tg-notif-group-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 10px 18px 6px;
    position: sticky;
    top: 0;
    background: color-mix(in srgb, var(--mud-palette-surface) 94%, transparent);
    backdrop-filter: blur(6px);
    z-index: 1;
}

.tg-notif-group-label {
    font-size: 10.5px;
    font-weight: 600;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--mud-palette-text-secondary);
}

.tg-notif-group-count {
    font-size: 11px;
    color: var(--mud-palette-text-disabled);
    font-weight: 600;
}

.tg-notif-list {
    display: flex;
    flex-direction: column;
}

.tg-notif-item {
    position: relative;
    display: grid;
    grid-template-columns: 40px 1fr auto;
    gap: 12px;
    padding: 12px 18px;
    cursor: pointer;
    transition: background-color 120ms ease;
    border-left: 3px solid transparent;
}

.tg-notif-item:hover {
    background: color-mix(in srgb, var(--mud-palette-text-primary) 4%, transparent);
}

.tg-notif-item.is-unread {
    background: color-mix(in srgb, var(--mud-palette-primary) 5%, transparent);
    border-left-color: var(--mud-palette-primary);
}

.tg-notif-item.is-unread:hover {
    background: color-mix(in srgb, var(--mud-palette-primary) 9%, transparent);
}

.tg-notif-icon {
    width: 40px;
    height: 40px;
    border-radius: 12px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 40px;
}

.tg-notif-icon .mud-icon-root { font-size: 20px; }

.tg-notif-item-body { min-width: 0; }

.tg-notif-item-title {
    font-size: 13.5px;
    font-weight: 500;
    color: var(--mud-palette-text-primary);
    line-height: 1.35;
    overflow: hidden;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
}

.tg-notif-item.is-unread .tg-notif-item-title { font-weight: 600; }

.tg-notif-item-message {
    margin-top: 2px;
    font-size: 12.5px;
    color: var(--mud-palette-text-secondary);
    line-height: 1.4;
    overflow: hidden;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
}

.tg-notif-item-meta {
    margin-top: 6px;
    display: inline-flex;
    align-items: center;
    gap: 4px;
    font-size: 11.5px;
    color: var(--mud-palette-text-disabled);
    line-height: 1;
}

.tg-notif-item-meta .mud-icon-root {
    font-size: 13px !important;
    color: var(--mud-palette-text-disabled);
}

.tg-notif-dot {
    width: 8px;
    height: 8px;
    border-radius: 999px;
    background: var(--mud-palette-primary);
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--mud-palette-primary) 22%, transparent);
    align-self: flex-start;
    margin-top: 14px;
}

.tg-notif-foot {
    padding: 10px 14px;
    border-top: 1px solid var(--mud-palette-divider);
    display: flex;
    align-items: center;
    justify-content: space-between;
    background: var(--mud-palette-surface);
}

.tg-notif-empty {
    padding: 60px 28px;
    text-align: center;
    display: flex;
    flex-direction: column;
    gap: 10px;
    align-items: center;
    color: var(--mud-palette-text-secondary);
}

.tg-notif-empty-orb {
    width: 72px;
    height: 72px;
    border-radius: 50%;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background:
        radial-gradient(circle at 30% 30%, color-mix(in srgb, var(--mud-palette-primary) 22%, transparent), transparent 60%),
        color-mix(in srgb, var(--mud-palette-primary) 10%, transparent);
    color: var(--mud-palette-primary);
    margin-bottom: 4px;
}

.tg-notif-empty-orb .mud-icon-root { font-size: 32px; }

.tg-notif-empty-title {
    font-size: 14.5px;
    font-weight: 600;
    color: var(--mud-palette-text-primary);
}

.tg-notif-empty-sub {
    font-size: 12.5px;
    color: var(--mud-palette-text-secondary);
    max-width: 260px;
    line-height: 1.45;
}

.tg-notif-skeletons {
    padding: 8px 0;
    display: flex;
    flex-direction: column;
}

.tg-notif-skel {
    display: grid;
    grid-template-columns: 40px 1fr;
    gap: 12px;
    padding: 12px 18px;
}

.tg-notif-skel-icon {
    width: 40px;
    height: 40px;
    border-radius: 12px;
    background: linear-gradient(90deg,
        var(--mud-palette-background-gray) 0%,
        color-mix(in srgb, var(--mud-palette-background-gray) 60%, transparent) 50%,
        var(--mud-palette-background-gray) 100%);
    background-size: 200% 100%;
    animation: tg-notif-shimmer 1.4s ease-in-out infinite;
}

.tg-notif-skel-lines {
    display: flex;
    flex-direction: column;
    gap: 8px;
    padding-top: 6px;
}

.tg-notif-skel-line {
    height: 10px;
    border-radius: 6px;
    background: linear-gradient(90deg,
        var(--mud-palette-background-gray) 0%,
        color-mix(in srgb, var(--mud-palette-background-gray) 60%, transparent) 50%,
        var(--mud-palette-background-gray) 100%);
    background-size: 200% 100%;
    animation: tg-notif-shimmer 1.4s ease-in-out infinite;
}

.tg-notif-skel-line-lg { width: 80%; }
.tg-notif-skel-line-md { width: 55%; }

@keyframes tg-notif-shimmer {
    0% { background-position: 200% 0; }
    100% { background-position: -200% 0; }
}

/* ---------- Command palette ---------- */

.tg-palette-backdrop {
    position: fixed;
    inset: 0;
    z-index: 2000;
    background: rgba(15, 23, 42, 0.45);
    backdrop-filter: blur(4px);
    display: flex;
    align-items: flex-start;
    justify-content: center;
    padding-top: 10vh;
    animation: tg-fade-in .12s var(--tg-ease);
}

@keyframes tg-fade-in { from { opacity: 0; } to { opacity: 1; } }

.tg-palette-shell {
    width: min(620px, 92vw);
    max-height: 70vh;
    border-radius: var(--tg-radius-lg);
    background: var(--mud-palette-surface);
    border: 1px solid var(--mud-palette-lines-default);
    box-shadow: var(--tg-shadow-e6);
    display: flex;
    flex-direction: column;
    overflow: hidden;
}

.tg-palette {
    display: flex;
    flex-direction: column;
    min-height: 320px;
    max-height: 70vh;
}

.tg-palette-input {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 16px 20px;
    border-bottom: 1px solid var(--mud-palette-lines-default);
}

.tg-palette-search {
    flex: 1;
    border: 0;
    outline: 0;
    background: transparent;
    font-size: 15px;
    color: var(--mud-palette-text-primary);
}

.tg-palette-search::placeholder { color: var(--mud-palette-text-disabled); }

.tg-palette-results {
    flex: 1;
    overflow-y: auto;
    padding: 8px 0;
}

.tg-palette-group-label {
    padding: 10px 20px 6px;
    font-size: 11px;
    font-weight: 600;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--mud-palette-text-secondary);
}

.tg-palette-item {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 10px 20px;
    cursor: pointer;
    transition: background-color .08s var(--tg-ease);
}

.tg-palette-item.is-active,
.tg-palette-item:hover {
    background: var(--mud-palette-primary-lighten);
}

.tg-palette-item-body { flex: 1; }
.tg-palette-item-title { font-size: 14px; font-weight: 500; color: var(--mud-palette-text-primary); }
.tg-palette-item-subtitle { font-size: 12px; color: var(--mud-palette-text-secondary); }
.tg-palette-item-go { opacity: 0; transition: opacity .12s var(--tg-ease); }
.tg-palette-item.is-active .tg-palette-item-go { opacity: 1; }

.tg-palette-empty {
    padding: 36px 20px;
    text-align: center;
    color: var(--mud-palette-text-secondary);
    font-size: 13px;
}

.tg-palette-footer {
    display: flex;
    gap: 16px;
    padding: 10px 20px;
    border-top: 1px solid var(--mud-palette-lines-default);
    background: var(--mud-palette-background-gray);
    font-size: 11px;
    color: var(--mud-palette-text-secondary);
}

.tg-palette-footer kbd {
    margin-right: 4px;
    padding: 1px 5px;
    border: 1px solid var(--mud-palette-lines-default);
    border-radius: 3px;
    background: var(--mud-palette-surface);
    font-size: 10px;
}

/* ---------- Login / empty layout ---------- */

.tg-empty-layout {
    min-height: 100vh;
    background:
        radial-gradient(900px 500px at 10% 20%, rgba(11, 95, 255, 0.10), transparent 60%),
        radial-gradient(700px 400px at 90% 80%, rgba(246, 162, 59, 0.08), transparent 60%),
        var(--mud-palette-background);
}

.tg-empty-layout-center {
    min-height: 100vh;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
}

.tg-login {
    min-height: 100vh;
    display: grid;
    grid-template-columns: 1.1fr 1fr;
    gap: 0;
    padding: 0;
    background: var(--mud-palette-background);
}

@media (max-width: 1024px) {
    .tg-login { grid-template-columns: 1fr; }
    .tg-login-hero { display: none; }
}

/* ---- Hero side ---- */

.tg-login-hero {
    position: relative;
    overflow: hidden;
    display: flex;
    align-items: stretch;
}

.tg-login-hero-bg {
    position: absolute;
    inset: 0;
    background:
        radial-gradient(900px 600px at 15% 15%, color-mix(in srgb, var(--mud-palette-primary) 28%, transparent), transparent 60%),
        radial-gradient(700px 500px at 85% 85%, color-mix(in srgb, #F6A23B 22%, transparent), transparent 60%),
        radial-gradient(500px 400px at 75% 15%, color-mix(in srgb, #8B5CF6 20%, transparent), transparent 60%),
        linear-gradient(180deg, color-mix(in srgb, var(--mud-palette-primary) 6%, var(--mud-palette-background)) 0%, var(--mud-palette-background) 100%);
    animation: tg-login-shimmer 18s ease-in-out infinite alternate;
}

@keyframes tg-login-shimmer {
    0% { transform: translate3d(0, 0, 0) scale(1); }
    100% { transform: translate3d(-2%, 1%, 0) scale(1.05); }
}

.tg-login-hero-inner {
    position: relative;
    z-index: 1;
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: 36px;
    padding: 64px 72px;
    width: 100%;
    max-width: 640px;
}

.tg-login-brand {
    display: flex;
    align-items: center;
    gap: 12px;
    font-size: 18px;
    font-weight: 700;
    letter-spacing: -0.01em;
}

.tg-login-brand-mark {
    width: 40px;
    height: 40px;
    border-radius: 12px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: linear-gradient(135deg, var(--mud-palette-primary), color-mix(in srgb, var(--mud-palette-primary) 60%, #8B5CF6));
    color: #fff;
    box-shadow: 0 8px 24px -8px color-mix(in srgb, var(--mud-palette-primary) 70%, transparent);
}

.tg-login-brand-mark .mud-icon-root { font-size: 22px !important; color: #fff; }

.tg-login-brand-text { color: var(--mud-palette-text-primary); }
.tg-login-brand-text .tg-brand-accent { color: var(--mud-palette-primary); }

.tg-login-hero-copy { display: flex; flex-direction: column; gap: 14px; }

.tg-login-tagline {
    font-size: 44px;
    font-weight: 700;
    letter-spacing: -0.025em;
    line-height: 1.05;
    margin: 0;
    color: var(--mud-palette-text-primary);
}

.tg-login-sub {
    font-size: 15px;
    line-height: 1.55;
    color: var(--mud-palette-text-secondary);
    max-width: 460px;
    margin: 0;
}

.tg-login-features {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 14px;
}

.tg-login-features li {
    display: flex;
    align-items: flex-start;
    gap: 14px;
    padding: 14px 16px;
    border-radius: 14px;
    background: color-mix(in srgb, var(--mud-palette-surface) 60%, transparent);
    border: 1px solid color-mix(in srgb, var(--mud-palette-lines-default) 60%, transparent);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
}

.tg-login-feat-icon {
    width: 36px;
    height: 36px;
    border-radius: 10px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.tg-login-feat-icon .mud-icon-root { font-size: 18px !important; }

.tg-login-feat-title {
    font-size: 13.5px;
    font-weight: 600;
    color: var(--mud-palette-text-primary);
    line-height: 1.2;
}

.tg-login-feat-sub {
    font-size: 12.5px;
    color: var(--mud-palette-text-secondary);
    margin-top: 2px;
}

.tg-login-hero-foot {
    display: flex;
    align-items: center;
    gap: 10px;
    font-size: 12px;
    color: var(--mud-palette-text-secondary);
    flex-wrap: wrap;
}

.tg-login-hero-foot span {
    display: inline-flex;
    align-items: center;
    gap: 4px;
}

.tg-login-hero-foot .mud-icon-root { font-size: 14px !important; color: var(--mud-palette-text-secondary); }

.tg-dot-sep { opacity: 0.5; }

/* ---- Form side ---- */

.tg-login-card {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 48px 32px;
}

.tg-login-panel {
    width: 100%;
    max-width: 440px;
    display: flex;
    flex-direction: column;
    gap: 20px;
}

.tg-login-panel-head { display: flex; flex-direction: column; gap: 6px; }

.tg-login-eyebrow {
    font-size: 11px;
    font-weight: 600;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--mud-palette-primary);
}

.tg-login-title {
    font-size: 28px;
    font-weight: 700;
    letter-spacing: -0.02em;
    margin: 0;
    color: var(--mud-palette-text-primary);
}

.tg-login-sub2 {
    font-size: 13.5px;
    color: var(--mud-palette-text-secondary);
    margin: 0;
}

.tg-login-alert {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 10px 12px;
    border-radius: 10px;
    font-size: 13px;
    background: color-mix(in srgb, var(--mud-palette-error) 10%, transparent);
    border: 1px solid color-mix(in srgb, var(--mud-palette-error) 30%, transparent);
    color: var(--mud-palette-error);
}

.tg-login-alert .mud-icon-root { color: var(--mud-palette-error); }

.tg-login-form {
    display: flex;
    flex-direction: column;
    gap: 14px;
}

.tg-field-icon .tg-field-wrap {
    position: relative;
    display: flex;
    align-items: center;
}

.tg-field-icon .tg-field-lead {
    position: absolute;
    left: 14px;
    color: var(--mud-palette-text-secondary);
    pointer-events: none;
}

.tg-field-icon input {
    padding-left: 42px;
    width: 100%;
    height: 46px;
    border: 1px solid var(--mud-palette-lines-default);
    border-radius: 10px;
    background: var(--mud-palette-surface);
    color: var(--mud-palette-text-primary);
    font: inherit;
    font-size: 14px;
    transition: border-color 120ms ease, box-shadow 120ms ease;
}

.tg-field-icon input:focus {
    outline: none;
    border-color: var(--mud-palette-primary);
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--mud-palette-primary) 20%, transparent);
}

.tg-field-icon input:focus + .tg-field-lead,
.tg-field-icon .tg-field-wrap:focus-within .tg-field-lead {
    color: var(--mud-palette-primary);
}

.tg-field-label-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.tg-login-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 2px 2px 6px;
}

.tg-login-submit {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    height: 46px;
    font-size: 14px;
    margin-top: 4px;
}

.tg-login-submit .mud-icon-root { font-size: 16px !important; color: inherit; }

.tg-login-foot {
    font-size: 12px;
    color: var(--mud-palette-text-secondary);
    text-align: center;
    padding-top: 4px;
}

.tg-field {
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.tg-field-label {
    font-size: 12px;
    font-weight: 500;
    color: var(--mud-palette-text-secondary);
}

.tg-field input {
    width: 100%;
    height: 44px;
    padding: 0 14px;
    border: 1px solid var(--mud-palette-lines-default);
    border-radius: 10px;
    background: var(--mud-palette-surface);
    color: var(--mud-palette-text-primary);
    font: inherit;
    font-size: 14px;
    transition: border-color 120ms ease, box-shadow 120ms ease;
}

.tg-field input:focus {
    outline: none;
    border-color: var(--mud-palette-primary);
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--mud-palette-primary) 20%, transparent);
}

.tg-check {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-size: 13px;
    color: var(--mud-palette-text-primary);
    cursor: pointer;
    user-select: none;
}

.tg-check input[type="checkbox"] {
    width: 16px;
    height: 16px;
    accent-color: var(--mud-palette-primary);
}

.tg-primary-btn {
    height: 44px;
    border: none;
    border-radius: 10px;
    background: var(--mud-palette-primary);
    color: var(--mud-palette-primary-contrast-text, #fff);
    font: inherit;
    font-size: 14px;
    font-weight: 600;
    letter-spacing: 0.01em;
    cursor: pointer;
    transition: background 120ms ease, transform 120ms ease, box-shadow 120ms ease;
}

.tg-primary-btn:hover {
    background: var(--mud-palette-primary-darken);
    box-shadow: 0 4px 14px -4px color-mix(in srgb, var(--mud-palette-primary) 60%, transparent);
}

.tg-primary-btn:active {
    transform: translateY(1px);
}

/* ---------- Clickable table rows ---------- */

.tg-clickable-rows tbody tr {
    cursor: pointer;
    transition: background 120ms ease;
}

/* ---------- Amendment dialog ---------- */

.tg-amend-title {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    width: 100%;
}

.tg-amend-title-left {
    display: flex;
    align-items: center;
    gap: 12px;
    min-width: 0;
    flex: 1;
}

.tg-amend-opicon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    border-radius: 12px;
    background: color-mix(in srgb, var(--mud-palette-primary) 10%, transparent);
    color: var(--mud-palette-primary);
    flex-shrink: 0;
}

.tg-amend-opicon .mud-icon-root { font-size: 22px !important; }

.tg-amend-title-text { min-width: 0; }

.tg-amend-meta {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 8px;
}

@media (max-width: 640px) {
    .tg-amend-meta { grid-template-columns: repeat(2, 1fr); }
}

.tg-amend-meta-cell {
    display: flex;
    flex-direction: column;
    gap: 2px;
    padding: 10px 12px;
    border-radius: var(--tg-radius-md);
    background: var(--mud-palette-background-grey, rgba(15, 23, 42, 0.03));
    border: 1px solid var(--mud-palette-lines-default);
}

.tg-amend-meta-label {
    font-size: 10.5px;
    font-weight: 600;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--mud-palette-text-secondary);
}

.tg-amend-meta-value {
    font-size: 13px;
    color: var(--mud-palette-text-primary);
    font-weight: 500;
}

.tg-amend-remark-block {
    padding: 12px 14px;
    border-radius: var(--tg-radius-md);
    border: 1px solid var(--mud-palette-lines-default);
    background: var(--mud-palette-surface);
}

.tg-amend-remark-block.is-admin {
    background: color-mix(in srgb, var(--mud-palette-primary) 5%, var(--mud-palette-surface));
    border-color: color-mix(in srgb, var(--mud-palette-primary) 22%, transparent);
}

.tg-amend-remark-label {
    display: block;
    font-size: 10.5px;
    font-weight: 700;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--mud-palette-text-secondary);
    margin-bottom: 4px;
}

.tg-amend-section-label {
    display: block;
    font-size: 10.5px;
    font-weight: 700;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--mud-palette-text-secondary);
    margin-bottom: 8px;
}

.tg-amend-actions {
    display: flex;
    align-items: center;
    gap: 8px;
    width: 100%;
    justify-content: flex-end;
}

.tg-admin-action {
    margin-top: 8px;
    background: color-mix(in srgb, var(--mud-palette-warning) 5%, var(--mud-palette-surface));
    border-color: color-mix(in srgb, var(--mud-palette-warning) 24%, var(--mud-palette-lines-default));
}

.tg-admin-remark-label {
    display: block;
    font-size: 12px;
    font-weight: 500;
    color: var(--mud-palette-text-secondary);
    margin: 4px 0 6px;
}

.tg-admin-remark-field {
    margin: 0 !important;
}

.tg-admin-remark-field .mud-input-outlined {
    background: var(--mud-palette-surface);
    border-radius: var(--tg-radius-md);
}

.tg-btn-ghost {
    color: var(--mud-palette-text-primary) !important;
    background: var(--mud-palette-surface) !important;
    border: 1px solid var(--mud-palette-lines-default) !important;
    box-shadow: 0 1px 0 rgba(15, 23, 42, 0.04) !important;
}

.tg-btn-ghost:hover {
    background: color-mix(in srgb, var(--mud-palette-text-primary) 6%, var(--mud-palette-surface)) !important;
    border-color: color-mix(in srgb, var(--mud-palette-text-primary) 24%, var(--mud-palette-lines-default)) !important;
}

.tg-btn-ghost:active {
    background: color-mix(in srgb, var(--mud-palette-text-primary) 10%, var(--mud-palette-surface)) !important;
}

.tg-amend-filters {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 12px 16px 4px 16px;
    flex-wrap: wrap;
    border-bottom: 1px solid var(--mud-palette-lines-default);
}

.tg-amend-search {
    min-width: 280px;
    max-width: 420px;
    flex: 1;
}

.tg-amend-filters-right {
    display: flex;
    align-items: center;
    gap: 10px;
    flex: 1 1 auto;
    justify-content: flex-end;
    flex-wrap: wrap;
}

.tg-amend-daterange {
    min-width: 240px;
    max-width: 280px;
}

.tg-amend-clear {
    white-space: nowrap;
}

/* ---------- Tickets page filter panel ---------- */

.tg-ticket-topbar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 14px;
    padding: 14px 16px;
    flex-wrap: wrap;
    border-bottom: 1px solid var(--mud-palette-lines-default);
}

.tg-ticket-search {
    min-width: 300px;
    max-width: 440px;
    flex: 1 1 320px;
}

.tg-ticket-refine {
    padding: 14px 16px 16px 16px;
    background: color-mix(in srgb, var(--mud-palette-primary) 3%, transparent);
    border-bottom: 1px solid var(--mud-palette-lines-default);
    transition: background .2s ease;
}

    .tg-ticket-refine.is-active {
        background: color-mix(in srgb, var(--mud-palette-primary) 6%, transparent);
    }

.tg-ticket-refine-head {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 10px;
    min-height: 24px;
}

.tg-ticket-refine-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 24px;
    height: 24px;
    border-radius: 6px;
    background: color-mix(in srgb, var(--mud-palette-primary) 14%, transparent);
    color: var(--mud-palette-primary);
}

    .tg-ticket-refine-icon .mud-icon-root {
        font-size: 15px;
    }

.tg-ticket-refine-label {
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--mud-palette-text-secondary);
}

.tg-ticket-refine-hint {
    font-size: 12px;
    color: var(--mud-palette-text-disabled);
}

.tg-ticket-refine-count {
    height: 22px;
    padding: 0 10px;
    font-size: 11px;
    font-weight: 600;
}

.tg-ticket-refine-fields {
    display: grid;
    grid-template-columns: minmax(200px, 1.2fr) minmax(220px, 1.3fr) minmax(220px, 1.3fr) auto;
    gap: 12px;
    align-items: end;
}

@media (max-width: 1100px) {
    .tg-ticket-refine-fields {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

        .tg-ticket-refine-fields .tg-ticket-field-actions {
            grid-column: 1 / -1;
            justify-self: start;
        }
}

@media (max-width: 600px) {
    .tg-ticket-refine-fields {
        grid-template-columns: 1fr;
    }
}

.tg-ticket-field {
    display: flex;
    flex-direction: column;
    gap: 4px;
    min-width: 0;
}

.tg-ticket-field-label {
    font-size: 10.5px;
    font-weight: 600;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--mud-palette-text-secondary);
    padding-left: 2px;
}

.tg-ticket-field-actions {
    align-items: flex-start;
    padding-bottom: 2px;
}

/* ---------- Segmented filter chips ---------- */

.tg-seg {
    display: inline-flex;
    align-items: center;
    padding: 3px;
    gap: 2px;
    background: var(--mud-palette-background-grey, rgba(0,0,0,0.03));
    border: 1px solid var(--mud-palette-lines-default);
    border-radius: 999px;
}

.tg-seg-btn {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 5px 12px;
    border-radius: 999px;
    border: 0;
    background: transparent;
    color: var(--mud-palette-text-secondary);
    font-size: 12px;
    font-weight: 600;
    letter-spacing: 0.01em;
    cursor: pointer;
    transition: background 120ms ease, color 120ms ease;
}

.tg-seg-btn:hover {
    color: var(--mud-palette-text-primary);
    background: color-mix(in srgb, var(--mud-palette-primary) 8%, transparent);
}

.tg-seg-btn.is-active {
    background: var(--mud-palette-surface);
    color: var(--mud-palette-text-primary);
    box-shadow: 0 1px 2px rgba(15, 23, 42, 0.08), 0 0 0 1px var(--mud-palette-lines-default);
}

.tg-seg-btn .tg-seg-count {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 18px;
    padding: 0 6px;
    height: 18px;
    border-radius: 999px;
    background: var(--mud-palette-background-grey, rgba(0,0,0,0.06));
    color: var(--mud-palette-text-secondary);
    font-size: 10.5px;
    font-weight: 700;
}

.tg-seg-btn.is-active .tg-seg-count {
    background: color-mix(in srgb, var(--mud-palette-primary) 14%, transparent);
    color: var(--mud-palette-primary);
}

/* ---------- Amendment KPI strip ---------- */

.tg-amend-kpis {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 12px;
    padding: 16px;
    border-bottom: 1px solid var(--mud-palette-lines-default);
}

@media (max-width: 900px) {
    .tg-amend-kpis { grid-template-columns: repeat(2, 1fr); }
}

.tg-amend-kpi {
    position: relative;
    display: flex;
    flex-direction: column;
    gap: 2px;
    padding: 12px 14px;
    border-radius: var(--tg-radius-md);
    background: var(--mud-palette-surface);
    border: 1px solid var(--mud-palette-lines-default);
    overflow: hidden;
}

.tg-amend-kpi::before {
    content: "";
    position: absolute;
    left: 0;
    top: 0;
    bottom: 0;
    width: 3px;
    background: var(--mud-palette-primary);
}

.tg-amend-kpi--open::before    { background: #F59E0B; }
.tg-amend-kpi--progress::before{ background: #0EA5E9; }
.tg-amend-kpi--approved::before{ background: #10B981; }
.tg-amend-kpi--rejected::before{ background: #EF4444; }

.tg-amend-kpi-label {
    font-size: 11px;
    font-weight: 600;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--mud-palette-text-secondary);
}

.tg-amend-kpi-value {
    font-size: 22px;
    font-weight: 700;
    letter-spacing: -0.01em;
    color: var(--mud-palette-text-primary);
    line-height: 1.2;
}

/* ---------- Kanban board ---------- */

.tg-kanban {
    display: grid;
    grid-template-columns: repeat(3, minmax(280px, 1fr));
    gap: 16px;
    padding: 16px;
}

@media (max-width: 1100px) {
    .tg-kanban { grid-template-columns: 1fr; }
}

.tg-kcol {
    display: flex;
    flex-direction: column;
    min-height: 240px;
    background: var(--mud-palette-background-grey, rgba(15, 23, 42, 0.03));
    border: 1px solid var(--mud-palette-lines-default);
    border-radius: var(--tg-radius-md);
    overflow: hidden;
}

.tg-kcol-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 12px 14px;
    background: var(--mud-palette-surface);
    border-bottom: 1px solid var(--mud-palette-lines-default);
}

.tg-kcol-title {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: var(--mud-palette-text-primary);
}

.tg-kcol-dot {
    width: 8px;
    height: 8px;
    border-radius: 999px;
    background: var(--mud-palette-primary);
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--mud-palette-primary) 20%, transparent);
}

.tg-kcol--pending  .tg-kcol-dot { background: #F59E0B; box-shadow: 0 0 0 3px rgba(245, 158, 11, 0.22); }
.tg-kcol--approved .tg-kcol-dot { background: #10B981; box-shadow: 0 0 0 3px rgba(16, 185, 129, 0.22); }
.tg-kcol--declined .tg-kcol-dot { background: #EF4444; box-shadow: 0 0 0 3px rgba(239, 68, 68, 0.22); }

.tg-kcol-count {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 22px;
    height: 22px;
    padding: 0 8px;
    border-radius: 999px;
    background: var(--mud-palette-background-grey, rgba(0,0,0,0.06));
    color: var(--mud-palette-text-secondary);
    font-size: 11px;
    font-weight: 700;
}

.tg-kcol-body {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 10px;
    padding: 12px;
    max-height: calc(100vh - 320px);
    overflow-y: auto;
}

.tg-kcard {
    display: flex;
    flex-direction: column;
    gap: 8px;
    padding: 12px 14px;
    border-radius: var(--tg-radius-md);
    background: var(--mud-palette-surface);
    border: 1px solid var(--mud-palette-lines-default);
    transition: box-shadow 120ms ease, transform 120ms ease, border-color 120ms ease;
    position: relative;
}

.tg-kcard::before {
    content: "";
    position: absolute;
    left: 0;
    top: 10px;
    bottom: 10px;
    width: 3px;
    border-radius: 2px;
    background: var(--mud-palette-primary);
}

.tg-kcard--pending::before  { background: #F59E0B; }
.tg-kcard--approved::before { background: #10B981; }
.tg-kcard--declined::before { background: #EF4444; }

.tg-kcard:hover {
    box-shadow: 0 4px 12px rgba(15, 23, 42, 0.08);
    transform: translateY(-1px);
    border-color: color-mix(in srgb, var(--mud-palette-primary) 30%, var(--mud-palette-lines-default));
}

.tg-kcard-head {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 8px;
}

.tg-kcard-agent {
    font-size: 13px;
    font-weight: 600;
    color: var(--mud-palette-text-primary);
    line-height: 1.3;
    overflow: hidden;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
}

.tg-kcard-amount {
    font-size: 18px;
    font-weight: 700;
    letter-spacing: -0.01em;
    color: var(--mud-palette-text-primary);
    font-family: 'JetBrains Mono', ui-monospace, monospace;
}

.tg-kcard-meta {
    display: flex;
    flex-wrap: wrap;
    gap: 6px 10px;
    font-size: 11px;
    color: var(--mud-palette-text-secondary);
}

.tg-kcard-meta .tg-mono { font-size: 11px; }

.tg-kcard-remark {
    font-size: 12px;
    padding: 6px 8px;
    border-radius: 6px;
    background: var(--mud-palette-background-grey, rgba(0,0,0,0.04));
    color: var(--mud-palette-text-secondary);
    line-height: 1.4;
}

.tg-kcard-actions {
    display: flex;
    gap: 6px;
    margin-top: 2px;
}

.tg-kcard-actions .mud-button-root { flex: 1; }

/* ---------- Row status accent ---------- */

.tg-compact-table tbody tr.tg-row > td:first-child,
.tg-page-table tbody tr.tg-row > td:first-child {
    position: relative;
}

.tg-compact-table tbody tr.tg-row > td:first-child::before,
.tg-page-table tbody tr.tg-row > td:first-child::before {
    content: "";
    position: absolute;
    left: 0;
    top: 10px;
    bottom: 10px;
    width: 3px;
    border-radius: 2px;
    background: transparent;
}

.tg-compact-table tbody tr.tg-row-success > td:first-child::before,
.tg-page-table    tbody tr.tg-row-success > td:first-child::before { background: #10B981; }
.tg-compact-table tbody tr.tg-row-warning > td:first-child::before,
.tg-page-table    tbody tr.tg-row-warning > td:first-child::before { background: #F59E0B; }
.tg-compact-table tbody tr.tg-row-error   > td:first-child::before,
.tg-page-table    tbody tr.tg-row-error   > td:first-child::before { background: #EF4444; }
.tg-compact-table tbody tr.tg-row-info    > td:first-child::before,
.tg-page-table    tbody tr.tg-row-info    > td:first-child::before { background: #0EA5E9; }
.tg-compact-table tbody tr.tg-row-neutral > td:first-child::before,
.tg-page-table    tbody tr.tg-row-neutral > td:first-child::before { background: #94A3B8; }

/* ---------- Chat ---------- */

.tg-chat-wrap {
    display: flex;
    flex-direction: column;
    gap: 12px;
    min-height: 300px;
}

.tg-chat-list {
    display: flex;
    flex-direction: column;
    gap: 8px;
    max-height: 360px;
    overflow-y: auto;
    padding: 4px;
}

.tg-chat-msg {
    display: flex;
    width: 100%;
}

.tg-chat-mine {
    justify-content: flex-end;
}

.tg-chat-theirs {
    justify-content: flex-start;
}

.tg-chat-bubble {
    max-width: 72%;
    padding: 8px 12px;
    border-radius: 14px;
    background: var(--mud-palette-surface);
    border: 1px solid var(--mud-palette-lines-default);
    box-shadow: 0 1px 2px rgba(15, 23, 42, 0.05);
}

.tg-chat-theirs .tg-chat-bubble {
    border-bottom-left-radius: 4px;
}

.tg-chat-mine .tg-chat-bubble {
    background: color-mix(in srgb, var(--mud-palette-primary) 12%, var(--mud-palette-surface));
    border-color: color-mix(in srgb, var(--mud-palette-primary) 28%, transparent);
    border-bottom-right-radius: 4px;
}

.tg-chat-author {
    display: block;
    font-size: 10.5px;
    margin-bottom: 2px;
}

.tg-chat-when {
    display: block;
    font-size: 10.5px;
    margin-top: 4px;
    opacity: 0.8;
}

.tg-chat-compose {
    display: flex;
    align-items: flex-end;
    gap: 8px;
}

.tg-chat-compose .mud-input-control {
    flex: 1;
}

/* ---------- Chart wrapper ---------- */

.tg-chart-wrap {
    padding: 8px 4px 4px 4px;
}

.tg-chart-wrap svg path[stroke] {
    stroke-linecap: round;
    stroke-linejoin: round;
}

/* ---------- Focus ring ---------- */

:focus-visible {
    outline: 2px solid var(--mud-palette-primary);
    outline-offset: 2px;
    border-radius: var(--tg-radius-sm);
}

/* ---------- Card header extras ---------- */

.tg-card-head-right {
    display: inline-flex;
    align-items: center;
    gap: 8px;
}

.tg-ellipsis {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    max-width: 100%;
}

/* ---------- Inline chips ---------- */

.tg-chip {
    display: inline-flex;
    align-items: center;
    padding: 1px 8px;
    border-radius: var(--tg-radius-pill);
    font-size: 10.5px;
    font-weight: 500;
    line-height: 1.6;
    background: rgba(11, 95, 255, 0.08);
    color: var(--mud-palette-primary);
    border: 1px solid rgba(11, 95, 255, 0.18);
}

.tg-chip.tg-chip-muted {
    background: var(--mud-palette-background);
    color: var(--mud-palette-text-secondary);
    border-color: var(--mud-palette-lines-default);
}

/* ---------- Pending approvals rail ---------- */

.tg-approval-rail {
    display: flex;
    flex-direction: column;
    gap: 10px;
    max-height: 360px;
    overflow-y: auto;
    padding: 2px 6px 2px 2px;
    scrollbar-width: thin;
    scroll-snap-type: y proximity;
}

.tg-approval-rail::-webkit-scrollbar {
    width: 6px;
}
.tg-approval-rail::-webkit-scrollbar-thumb {
    background: var(--mud-palette-lines-default);
    border-radius: 3px;
}

.tg-approval-card {
    display: flex;
    flex-direction: column;
    gap: 4px;
    padding: 10px 12px;
    border: 1px solid var(--mud-palette-lines-default);
    border-radius: var(--tg-radius-md);
    background: var(--mud-palette-surface);
    transition: transform 140ms var(--tg-ease), box-shadow 140ms var(--tg-ease);
    scroll-snap-align: start;
}

.tg-approval-card:hover {
    transform: translateY(-2px);
    box-shadow: var(--tg-shadow-e3);
    border-color: rgba(11, 95, 255, 0.25);
}

.tg-approval-card-head {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 8px;
}

.tg-approval-amount {
    font-size: 18px !important;
    font-weight: 600 !important;
    margin: 2px 0 4px !important;
    color: var(--mud-palette-text-primary);
    line-height: 1.1;
}

.tg-approval-meta {
    display: inline-flex;
    gap: 4px;
    flex-wrap: wrap;
    margin-bottom: 2px;
}

.tg-approval-actions {
    display: flex;
    gap: 6px;
    margin-top: auto;
    padding-top: 8px;
    border-top: 1px solid var(--mud-palette-lines-default);
}

.tg-approval-actions .mud-button {
    flex: 1;
    min-width: 0;
    font-size: 11px !important;
    padding: 3px 8px !important;
    height: 28px !important;
}

/* ---------- Compact tables used on dashboard panels ---------- */

.tg-compact-table .mud-table-container {
    max-height: 280px;
    overflow-y: auto;
}

.tg-compact-table .mud-table-cell {
    padding: 4px 10px !important;
    font-size: 11.5px !important;
}

.tg-compact-table .mud-table-head .mud-table-cell {
    font-size: 10.5px !important;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.02em;
    color: var(--mud-palette-text-secondary);
}

.tg-compact-table .mud-table-row {
    height: 36px !important;
}

/* ---------- Activity panel ---------- */

.tg-activity-list {
    display: flex;
    flex-direction: column;
    gap: 2px;
    max-height: 280px;
    overflow-y: auto;
    padding-right: 4px;
}

.tg-activity-item {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    padding: 6px 2px;
    border-bottom: 1px solid var(--mud-palette-lines-default);
}

.tg-activity-item:last-child { border-bottom: 0; }

.tg-activity-icon {
    margin-top: 2px;
    font-size: 16px !important;
    color: var(--mud-palette-primary);
    flex: 0 0 auto;
}

.tg-activity-body {
    flex: 1 1 auto;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 1px;
}

.tg-conn-dot {
    display: inline-block;
    width: 8px;
    height: 8px;
    border-radius: 50%;
    margin-right: 2px;
}

.tg-conn-ok {
    background: var(--mud-palette-success);
    box-shadow: 0 0 0 3px rgba(16, 185, 129, 0.18);
}

.tg-conn-off {
    background: var(--mud-palette-text-disabled);
}

/* ---------- Deposit dialog summary ---------- */

.tg-deposit-summary {
    padding: 10px 12px;
    border: 1px solid var(--mud-palette-lines-default);
    border-radius: var(--tg-radius-md);
    background: var(--mud-palette-background);
}

.tg-deposit-summary .mud-typography-h5 {
    font-size: 20px !important;
    font-weight: 600;
    margin: 2px 0;
}

/* ---------- Small stacks & wallet line (Agents index) ---------- */

.tg-stack-xs {
    display: flex;
    flex-direction: column;
    gap: 4px;
    min-width: 0;
}

.tg-wallet-line {
    display: flex;
    align-items: baseline;
    gap: 6px;
    font-size: 13px;
}

.tg-wallet-line .tg-muted {
    font-size: 12px;
}

.tg-contact-email {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    min-width: 0;
    max-width: 260px;
    line-height: 1.2;
}

.tg-contact-email .tg-contact-tick {
    flex: 0 0 auto;
    width: 16px;
    height: 16px;
    font-size: 16px;
}

.tg-contact-email .tg-ellipsis {
    min-width: 0;
    flex: 1 1 auto;
}

/* ---------- Rich agent cell (Agents index) ---------- */

.tg-agent-cell {
    display: flex;
    align-items: center;
    gap: 12px;
    min-width: 0;
}

.tg-agent-cell-text {
    display: flex;
    flex-direction: column;
    gap: 2px;
    min-width: 0;
}

.tg-agent-cell-name {
    font-weight: 600;
    font-size: 14px;
    letter-spacing: -0.005em;
    color: var(--mud-palette-text-primary);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 240px;
}

.tg-agent-cell-sub {
    font-size: 12px;
    color: var(--mud-palette-text-secondary);
    display: flex;
    align-items: center;
    gap: 6px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 240px;
}

.tg-agent-cell-sub .tg-mono {
    color: var(--mud-palette-primary);
    font-weight: 600;
    letter-spacing: 0.02em;
}

.tg-dot-sep {
    color: var(--mud-palette-text-disabled);
    font-weight: 700;
}

/* ---------- Rich ticket / route / airline cells ---------- */

.tg-ticket-code {
    font-family: "JetBrains Mono", "Consolas", monospace;
    font-weight: 700;
    font-size: 13px;
    letter-spacing: 0.02em;
    color: var(--mud-palette-primary);
    background: color-mix(in srgb, var(--mud-palette-primary) 10%, transparent);
    padding: 2px 8px;
    border-radius: 6px;
    display: inline-block;
    line-height: 1.35;
    max-width: fit-content;
}

.tg-route-cell {
    display: flex;
    align-items: center;
    gap: 10px;
    min-width: 0;
}

.tg-airline-badge {
    width: 30px;
    height: 30px;
    border-radius: 8px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: #fff;
    font-weight: 700;
    font-size: 10px;
    letter-spacing: 0.04em;
    flex-shrink: 0;
    box-shadow: inset 0 -1px 0 rgba(0, 0, 0, 0.18);
}

.tg-route-text {
    display: flex;
    flex-direction: column;
    gap: 1px;
    min-width: 0;
}

.tg-route-path {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-family: "JetBrains Mono", "Consolas", monospace;
    font-weight: 600;
    font-size: 13px;
    color: var(--mud-palette-text-primary);
    white-space: nowrap;
}

.tg-route-seg {
    letter-spacing: 0.04em;
}

.tg-route-arrow {
    color: var(--mud-palette-primary);
    font-size: 12px;
    opacity: 0.75;
}

.tg-route-sub {
    font-size: 11px;
    color: var(--mud-palette-text-secondary);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 200px;
}

.tg-pnr {
    font-size: 12.5px;
    letter-spacing: 0.04em;
    font-weight: 600;
    color: var(--mud-palette-text-secondary);
}

.tg-amount {
    font-weight: 700;
    font-size: 13px;
    color: var(--mud-palette-text-primary);
    letter-spacing: -0.005em;
}

/* ---------- Invoices page ---------- */

.tg-inv-filters {
    display: grid;
    grid-template-columns: minmax(260px, 1.3fr) minmax(240px, 1fr) auto;
    gap: 12px;
    align-items: center;
    padding: 12px 14px;
    border-bottom: 1px solid var(--mud-palette-lines-default);
}

.tg-inv-summary {
    display: flex;
    gap: 14px;
    align-items: center;
    padding-left: 14px;
    border-left: 1px solid var(--mud-palette-lines-default);
}

.tg-inv-summary-item {
    display: flex;
    flex-direction: column;
    line-height: 1.2;
}

.tg-inv-summary-label {
    font-size: 10px;
    font-weight: 600;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--mud-palette-text-secondary);
}

.tg-inv-summary-value {
    font-size: 15px;
    font-weight: 700;
    color: var(--mud-palette-text-primary);
    letter-spacing: -0.01em;
}

.tg-inv-tabs .mud-tabs-tabbar {
    background: transparent;
    border-bottom: 1px solid var(--mud-palette-lines-default);
}

.tg-inv-tabs .mud-tab {
    text-transform: none !important;
    font-size: 13px !important;
    font-weight: 600;
    letter-spacing: 0;
    min-width: auto;
    padding: 10px 16px !important;
}

.tg-inv-tab-panel {
    padding: 0 !important;
}

@media (max-width: 900px) {
    .tg-inv-filters {
        grid-template-columns: 1fr;
    }
    .tg-inv-summary {
        border-left: none;
        padding-left: 0;
        border-top: 1px solid var(--mud-palette-lines-default);
        padding-top: 10px;
    }
}

/* ---------- Manual Wallet page ---------- */

.tg-mw-grid {
    display: grid;
    grid-template-columns: minmax(0, 1.3fr) minmax(0, 1fr);
    gap: 16px;
}

.tg-mw-form { padding: 0; }

.tg-mw-form-head {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 14px 18px;
    border-bottom: 1px solid var(--mud-palette-lines-default);
}

.tg-mw-body {
    padding: 18px;
    display: flex;
    flex-direction: column;
    gap: 14px;
}

.tg-mw-agent {
    display: grid;
    grid-template-columns: auto 1fr auto;
    gap: 14px;
    align-items: center;
    padding: 14px;
    border-radius: 12px;
    background: color-mix(in srgb, var(--mud-palette-primary) 6%, var(--mud-palette-surface));
    border: 1px solid color-mix(in srgb, var(--mud-palette-primary) 18%, transparent);
}

.tg-mw-agent-text { min-width: 0; }

.tg-mw-agent-name {
    font-weight: 600;
    font-size: 14px;
    letter-spacing: -0.005em;
    color: var(--mud-palette-text-primary);
}

.tg-mw-agent-sub {
    font-size: 12px;
    color: var(--mud-palette-text-secondary);
    display: flex;
    gap: 6px;
    align-items: center;
}

.tg-mw-wallet {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    line-height: 1.2;
    gap: 2px;
}

.tg-mw-wallet-label {
    font-size: 10px;
    font-weight: 600;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--mud-palette-text-secondary);
}

.tg-mw-wallet-value {
    font-size: 20px;
    font-weight: 700;
    letter-spacing: -0.01em;
    color: var(--mud-palette-primary);
}

.tg-mw-wallet-limit {
    font-size: 11px;
}

.tg-mw-toggle {
    align-self: flex-start;
}

.tg-mw-chips {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
}

.tg-mw-chip {
    appearance: none;
    border: 1px solid var(--mud-palette-lines-default);
    background: var(--mud-palette-surface);
    color: var(--mud-palette-text-primary);
    font-size: 12px;
    font-weight: 600;
    padding: 4px 10px;
    border-radius: 999px;
    cursor: pointer;
    transition: all .12s var(--tg-ease);
}

.tg-mw-chip:hover {
    border-color: var(--mud-palette-primary);
    color: var(--mud-palette-primary);
    background: color-mix(in srgb, var(--mud-palette-primary) 8%, var(--mud-palette-surface));
}

.tg-mw-actions {
    display: flex;
    justify-content: flex-end;
    gap: 8px;
    margin-top: 4px;
}

.tg-mw-empty {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
    padding: 32px 16px;
    text-align: center;
}

.tg-mw-side { padding: 0; }

.tg-mw-side-head {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 12px 16px;
    border-bottom: 1px solid var(--mud-palette-lines-default);
}

.tg-mw-tx {
    display: flex;
    flex-direction: column;
}

.tg-mw-tx-row {
    display: grid;
    grid-template-columns: auto 1fr auto;
    gap: 10px;
    align-items: center;
    padding: 10px 16px;
    border-bottom: 1px solid var(--mud-palette-lines-default);
    font-size: 12.5px;
}

.tg-mw-tx-row:last-child { border-bottom: 0; }

.tg-mw-tx-meta {
    display: flex;
    flex-direction: column;
    gap: 2px;
    min-width: 70px;
}

.tg-mw-tx-type {
    display: inline-block;
    font-size: 10px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    padding: 2px 6px;
    border-radius: 4px;
    width: fit-content;
}

.tg-mw-tx-credit { background: color-mix(in srgb, #10B981 15%, transparent); color: #059669; }
.tg-mw-tx-debit  { background: color-mix(in srgb, #EF4444 15%, transparent); color: #DC2626; }
.tg-mw-tx-other  { background: color-mix(in srgb, var(--mud-palette-text-secondary) 15%, transparent); color: var(--mud-palette-text-secondary); }

.tg-mw-tx-desc {
    color: var(--mud-palette-text-primary);
}

.tg-mw-tx-amount {
    font-weight: 700;
    white-space: nowrap;
}

@media (max-width: 980px) {
    .tg-mw-grid { grid-template-columns: 1fr; }
    .tg-mw-agent { grid-template-columns: auto 1fr; }
    .tg-mw-wallet { grid-column: 1 / -1; align-items: flex-start; }
}

/* ---------- Bank Accounts ---------- */

.tg-bank-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
    gap: 14px;
    padding: 16px;
}

.tg-bank-card {
    border: 1px solid var(--mud-palette-lines-default);
    border-radius: 14px;
    padding: 16px;
    background: var(--mud-palette-surface);
    display: flex;
    flex-direction: column;
    gap: 14px;
    transition: transform .12s var(--tg-ease), box-shadow .12s var(--tg-ease), border-color .12s var(--tg-ease);
    position: relative;
    overflow: hidden;
}

.tg-bank-card::before {
    content: "";
    position: absolute;
    top: 0;
    right: 0;
    width: 120px;
    height: 120px;
    background: radial-gradient(circle at top right, color-mix(in srgb, var(--mud-palette-primary) 14%, transparent) 0%, transparent 70%);
    pointer-events: none;
}

.tg-bank-card:hover {
    transform: translateY(-2px);
    box-shadow: var(--tg-shadow-e3);
    border-color: color-mix(in srgb, var(--mud-palette-primary) 25%, transparent);
}

.tg-bank-card.is-inactive {
    opacity: 0.65;
}

.tg-bank-card-top {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 10px;
    position: relative;
    z-index: 1;
}

.tg-bank-card-title {
    display: flex;
    gap: 10px;
    align-items: center;
    min-width: 0;
}

.tg-bank-card-name {
    font-weight: 700;
    font-size: 15px;
    color: var(--mud-palette-text-primary);
    letter-spacing: -0.01em;
}

.tg-bank-card-holder {
    font-size: 12px;
    color: var(--mud-palette-text-secondary);
}

.tg-bank-card-rows {
    display: flex;
    flex-direction: column;
    gap: 6px;
    position: relative;
    z-index: 1;
}

.tg-bank-row {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    font-size: 12.5px;
    gap: 10px;
}

.tg-bank-row-label {
    color: var(--mud-palette-text-secondary);
    font-size: 11px;
    font-weight: 600;
    letter-spacing: 0.04em;
    text-transform: uppercase;
}

.tg-bank-row-value {
    color: var(--mud-palette-text-primary);
    font-weight: 500;
}

.tg-bank-card-foot {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding-top: 12px;
    border-top: 1px solid var(--mud-palette-lines-default);
    position: relative;
    z-index: 1;
}

.tg-bank-balance {
    font-size: 15px;
    font-weight: 700;
    color: var(--mud-palette-primary);
    letter-spacing: -0.005em;
}

.tg-bank-card-actions {
    display: inline-flex;
    gap: 2px;
}

/* ---------- Grouped form (Agents edit) ---------- */

.tg-form-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 16px;
}

@media (max-width: 1100px) {
    .tg-form-grid {
        grid-template-columns: 1fr;
    }
}

.tg-form-section {
    padding: 0 !important;
    overflow: hidden;
}

.tg-form-section-head {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 14px 16px;
    font-size: 13px;
    font-weight: 600;
    letter-spacing: 0.02em;
    text-transform: uppercase;
    color: var(--mud-palette-text-secondary);
    border-bottom: 1px solid var(--mud-palette-divider);
    background: color-mix(in srgb, var(--mud-palette-background-grey) 40%, transparent);
}

.tg-form-body {
    display: flex;
    flex-direction: column;
    gap: 12px;
    padding: 16px;
}

.tg-form-row {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 12px;
}

.tg-form-actions {
    display: flex;
    justify-content: flex-end;
    gap: 8px;
    margin-top: 16px;
    padding: 12px 0;
    border-top: 1px solid var(--mud-palette-divider);
}

/* ---------- Add-agent hero ---------- */

.tg-hero-grid {
    display: grid;
    grid-template-columns: minmax(280px, 380px) 1fr;
    gap: 24px;
    align-items: start;
}

@media (max-width: 980px) {
    .tg-hero-grid {
        grid-template-columns: 1fr;
    }
}

.tg-hero-panel {
    position: relative;
    overflow: hidden;
    border-radius: 18px;
    padding: 28px;
    color: #fff;
    background: linear-gradient(135deg,
        #0B5FFF 0%,
        #0847C2 45%,
        #0A1F5C 100%);
    min-height: 420px;
    box-shadow: 0 12px 40px -12px rgba(11, 95, 255, 0.45);
}

.tg-hero-glow {
    position: absolute;
    inset: -30% -10% auto auto;
    width: 320px;
    height: 320px;
    background: radial-gradient(closest-side,
        rgba(246, 162, 59, 0.45) 0%,
        rgba(246, 162, 59, 0) 70%);
    filter: blur(8px);
    pointer-events: none;
}

.tg-hero-content {
    position: relative;
    display: flex;
    flex-direction: column;
    gap: 18px;
}

.tg-hero-eyebrow {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 6px 12px;
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.14);
    font-size: 12px;
    font-weight: 600;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    align-self: flex-start;
    backdrop-filter: blur(6px);
}

.tg-hero-title {
    font-size: 28px;
    font-weight: 700;
    line-height: 1.15;
    letter-spacing: -0.01em;
    margin: 0;
}

.tg-hero-sub {
    font-size: 14px;
    line-height: 1.55;
    color: rgba(255, 255, 255, 0.82);
    margin: 0;
}

.tg-hero-steps {
    list-style: none;
    padding: 0;
    margin: 4px 0 0;
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.tg-hero-steps li {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 12px 14px;
    border-radius: 12px;
    background: rgba(255, 255, 255, 0.06);
    border: 1px solid rgba(255, 255, 255, 0.08);
}

.tg-hero-steps li.is-active {
    background: rgba(255, 255, 255, 0.14);
    border-color: rgba(255, 255, 255, 0.18);
}

.tg-step-num {
    flex: 0 0 28px;
    width: 28px;
    height: 28px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.16);
    color: #fff;
    font-weight: 700;
    font-size: 13px;
}

.is-active .tg-step-num {
    background: #F6A23B;
    color: #0A1F5C;
}

.tg-step-title {
    font-size: 13px;
    font-weight: 600;
    color: #fff;
}

.tg-step-sub {
    font-size: 12px;
    color: rgba(255, 255, 255, 0.68);
    margin-top: 2px;
}

.tg-hero-form-wrap {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.tg-hero-form {
    padding: 0 !important;
    overflow: hidden;
}

.tg-hero-form-head {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 12px;
    padding: 20px 24px 14px;
    border-bottom: 1px solid var(--mud-palette-divider);
}

.tg-hero-form-body {
    display: flex;
    flex-direction: column;
    gap: 14px;
    padding: 20px 24px 22px;
}

.tg-hero-form-actions {
    display: flex;
    justify-content: flex-end;
    gap: 8px;
    padding-top: 6px;
}

.tg-hero-hint {
    padding: 0 6px;
    display: block;
}

/* ---------- Full-page data tables (Tickets, Agents, Amendments) ---------- */

.tg-page-table .mud-table-container {
    max-height: none !important;
    overflow-x: auto;
}

.tg-page-table .mud-table-root {
    border-collapse: separate;
    border-spacing: 0;
}

.tg-page-table .mud-table-row {
    height: 40px !important;
}

.tg-page-table .mud-table-cell {
    padding: 6px 14px !important;
    font-size: 13px !important;
    line-height: 1.3;
    border-bottom: 1px solid var(--mud-palette-lines-default) !important;
    vertical-align: middle;
}

.tg-page-table tbody tr.mud-table-row {
    transition: background-color .12s var(--tg-ease);
}

.tg-page-table tbody tr.mud-table-row:hover {
    background: color-mix(in srgb, var(--mud-palette-primary) 4%, transparent) !important;
}

.tg-page-table .mud-table-head .mud-table-cell {
    background: color-mix(in srgb, var(--mud-palette-background-grey) 60%, transparent);
    font-size: 11px !important;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: var(--mud-palette-text-secondary);
    padding: 10px 14px !important;
    height: 40px !important;
    border-bottom: 1px solid var(--mud-palette-lines-default) !important;
}

.tg-page-table .mud-table-head .mud-table-cell:first-child { border-top-left-radius: 10px; }
.tg-page-table .mud-table-head .mud-table-cell:last-child  { border-top-right-radius: 10px; }

.tg-page-table .mud-table-foot,
.tg-page-table .mud-table-pagination {
    border-top: 1px solid var(--mud-palette-lines-default);
    background: color-mix(in srgb, var(--mud-palette-background-grey) 40%, transparent);
}

.tg-page-table.tg-clickable-rows tbody tr { cursor: pointer; }

/* ---------- Shared tone tiles (icon badges) ---------- */

.tg-tone-primary   { background: color-mix(in srgb, var(--mud-palette-primary) 14%, transparent); color: var(--mud-palette-primary); }
.tg-tone-success   { background: color-mix(in srgb, #10B981 14%, transparent); color: #059669; }
.tg-tone-warning   { background: color-mix(in srgb, #F59E0B 14%, transparent); color: #D97706; }
.tg-tone-error     { background: color-mix(in srgb, #EF4444 14%, transparent); color: #DC2626; }
.tg-tone-info      { background: color-mix(in srgb, #0EA5E9 14%, transparent); color: #0284C7; }
.tg-tone-violet    { background: color-mix(in srgb, #8B5CF6 14%, transparent); color: #7C3AED; }
.tg-tone-muted     { background: color-mix(in srgb, var(--mud-palette-text-secondary) 10%, transparent); color: var(--mud-palette-text-secondary); }

/* ---------- Ticket row actions ---------- */

.tg-ticket-row-actions {
    display: inline-flex;
    align-items: center;
    gap: 2px;
}

/* ---------- Extend-hold dialog ---------- */

.tg-extend-current {
    display: flex;
    flex-direction: column;
    gap: 2px;
    padding: 10px 14px;
    border-radius: 8px;
    background: color-mix(in srgb, var(--mud-palette-warning) 10%, transparent);
    border: 1px solid color-mix(in srgb, var(--mud-palette-warning) 30%, transparent);
}

.tg-extend-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 12px;
}

@media (max-width: 520px) {
    .tg-extend-grid { grid-template-columns: 1fr; }
}

/* ---------- Ticket detail dialog ---------- */

.tg-ticket-dialog .mud-dialog { max-width: 880px; width: 92vw; }

.tg-td-header {
    width: 100%;
    display: flex;
    flex-direction: column;
    gap: 14px;
    padding: 2px 0 0;
}

.tg-td-header-top {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    flex-wrap: wrap;
    padding-right: 44px;
}

.tg-td-header-left {
    display: flex;
    align-items: center;
    gap: 14px;
    min-width: 0;
    flex: 1;
}

.tg-airline-badge.tg-airline-badge-lg {
    width: 44px;
    height: 44px;
    border-radius: 12px;
    font-size: 14px;
    font-weight: 700;
    letter-spacing: 0.02em;
}

.tg-td-op-icon {
    width: 44px;
    height: 44px;
    border-radius: 12px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.tg-td-op-icon .mud-icon-root {
    font-size: 22px !important;
}

.tg-td-header-text {
    display: flex;
    flex-direction: column;
    gap: 4px;
    min-width: 0;
}

.tg-td-header-route {
    font-size: 19px;
    font-weight: 600;
    letter-spacing: -0.01em;
    color: var(--mud-palette-text-primary);
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
}

.tg-td-header-route .tg-route-seg {
    font-size: 19px;
    font-weight: 700;
    letter-spacing: 0.04em;
}

.tg-td-header-route .tg-route-arrow {
    font-size: 16px;
    color: var(--mud-palette-primary);
    font-weight: 500;
}

.tg-td-header-sub {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
    font-size: 12.5px;
    color: var(--mud-palette-text-secondary);
}

.tg-td-header-right {
    display: flex;
    align-items: center;
    gap: 14px;
    flex-shrink: 0;
}

.tg-td-amount {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 1px;
}

.tg-td-amount-label {
    font-size: 10.5px;
    font-weight: 600;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--mud-palette-text-secondary);
}

.tg-td-amount-value {
    font-size: 20px;
    font-weight: 700;
    letter-spacing: -0.015em;
    color: var(--mud-palette-text-primary);
}

.tg-td-kpis {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 8px;
}

@media (max-width: 720px) {
    .tg-td-kpis { grid-template-columns: repeat(2, 1fr); }
}

.tg-td-kpi {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 10px 12px;
    border-radius: var(--tg-radius-md);
    background: color-mix(in srgb, var(--mud-palette-primary) 4%, var(--mud-palette-surface));
    border: 1px solid color-mix(in srgb, var(--mud-palette-primary) 12%, transparent);
    min-width: 0;
}

.tg-td-kpi > div {
    display: flex;
    flex-direction: column;
    gap: 1px;
    min-width: 0;
}

.tg-td-kpi-icon {
    width: 28px;
    height: 28px;
    border-radius: 8px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    background: color-mix(in srgb, var(--mud-palette-primary) 14%, transparent);
    color: var(--mud-palette-primary);
}

.tg-td-kpi-icon .mud-icon-root { font-size: 15px !important; }

.tg-td-kpi-label {
    font-size: 10px;
    font-weight: 600;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--mud-palette-text-secondary);
}

.tg-td-kpi-value {
    font-size: 13px;
    color: var(--mud-palette-text-primary);
    font-weight: 600;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.tg-td-section {
    border: 1px solid var(--mud-palette-lines-default);
    border-radius: var(--tg-radius-md);
    background: var(--mud-palette-surface);
    padding: 12px 14px;
}

.tg-td-section-head {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 10px;
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 0.05em;
    text-transform: uppercase;
    color: var(--mud-palette-text-primary);
}

.tg-td-section-icon {
    width: 26px;
    height: 26px;
    border-radius: 7px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.tg-td-section-icon .mud-icon-root { font-size: 15px !important; }

.tg-td-tabs .mud-tabs-toolbar { border-bottom: 1px solid var(--mud-palette-lines-default); }

.tg-pax-table .mud-table-row { height: 44px; }

.tg-pax-summary {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
    margin-bottom: 10px;
    padding: 2px 2px 10px;
    border-bottom: 1px dashed var(--mud-palette-lines-default);
}

.tg-pax-summary-total {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: 12.5px;
    font-weight: 600;
    color: var(--mud-palette-text-primary);
    margin-right: 4px;
    line-height: 1;
}

.tg-pax-summary-total .mud-icon-root {
    font-size: 16px !important;
    line-height: 1;
    color: var(--mud-palette-text-secondary);
}

.tg-fare-grid {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.tg-fare-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 8px 10px;
    border-radius: 8px;
    font-size: 13px;
}

.tg-fare-row:nth-child(odd) {
    background: color-mix(in srgb, var(--mud-palette-primary) 3%, transparent);
}

.tg-fare-label {
    color: var(--mud-palette-text-secondary);
    font-weight: 500;
}

.tg-fare-value {
    color: var(--mud-palette-text-primary);
    font-weight: 600;
}

.tg-fare-neg { color: var(--mud-palette-error); }

.tg-fare-total {
    margin-top: 4px;
    padding: 10px 12px;
    border-radius: 10px;
    background: color-mix(in srgb, var(--mud-palette-success) 10%, var(--mud-palette-surface));
    border: 1px solid color-mix(in srgb, var(--mud-palette-success) 22%, transparent);
    font-size: 14px;
}

.tg-fare-total .tg-fare-label {
    color: var(--mud-palette-text-primary);
    font-weight: 700;
    letter-spacing: 0.02em;
    text-transform: uppercase;
    font-size: 11px;
}

.tg-fare-total .tg-fare-value {
    font-size: 16px;
    font-weight: 700;
    letter-spacing: -0.01em;
}

/* ---------- Agent edit hero ---------- */

.tg-agent-hero {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 20px;
    padding: 18px 22px;
    margin-bottom: 16px;
    border: 1px solid var(--mud-palette-lines-default);
    border-radius: var(--tg-radius-md);
    background: linear-gradient(135deg,
        color-mix(in srgb, var(--mud-palette-primary) 6%, var(--mud-palette-surface)) 0%,
        var(--mud-palette-surface) 70%);
    overflow: hidden;
    flex-wrap: wrap;
}

.tg-agent-hero-glow {
    position: absolute;
    top: -80px;
    right: -80px;
    width: 280px;
    height: 280px;
    background: radial-gradient(circle, color-mix(in srgb, #8B5CF6 22%, transparent) 0%, transparent 70%);
    pointer-events: none;
    z-index: 0;
}

.tg-agent-hero-left {
    display: flex;
    align-items: center;
    gap: 16px;
    min-width: 0;
    flex: 1;
    position: relative;
    z-index: 1;
}

.tg-avatar.tg-avatar-xl {
    width: 64px;
    height: 64px;
    font-size: 22px;
    letter-spacing: 0.02em;
    box-shadow: 0 8px 20px -8px rgba(0,0,0,0.25);
}

.tg-agent-hero-info {
    display: flex;
    flex-direction: column;
    gap: 4px;
    min-width: 0;
}

.tg-agent-hero-name-row {
    display: flex;
    align-items: center;
    gap: 10px;
    flex-wrap: wrap;
}

.tg-agent-hero-name {
    font-size: 22px;
    font-weight: 700;
    letter-spacing: -0.02em;
    margin: 0;
    color: var(--mud-palette-text-primary);
    line-height: 1.15;
}

.tg-agent-hero-meta {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
    font-size: 12.5px;
    color: var(--mud-palette-text-secondary);
}

.tg-agent-hero-right {
    position: relative;
    z-index: 1;
    min-width: 220px;
}

.tg-agent-hero-wallet {
    display: grid;
    grid-template-columns: auto 1fr;
    column-gap: 10px;
    row-gap: 2px;
    align-items: baseline;
    padding: 10px 14px;
    background: var(--mud-palette-surface);
    border: 1px solid var(--mud-palette-lines-default);
    border-radius: var(--tg-radius-md);
}

.tg-agent-hero-wallet-label {
    grid-column: 1 / -1;
    font-size: 10.5px;
    font-weight: 600;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--mud-palette-text-secondary);
}

.tg-agent-hero-wallet-value {
    font-size: 20px;
    font-weight: 700;
    letter-spacing: -0.015em;
    color: var(--mud-palette-text-primary);
}

.tg-agent-hero-wallet-limit {
    font-size: 11px;
    color: var(--mud-palette-text-secondary);
    justify-self: end;
}

.tg-agent-hero-wallet-bar {
    grid-column: 1 / -1;
    height: 5px;
    margin-top: 6px;
    background: color-mix(in srgb, var(--mud-palette-text-secondary) 12%, transparent);
    border-radius: 999px;
    overflow: hidden;
}

.tg-agent-hero-wallet-fill {
    height: 100%;
    border-radius: inherit;
    transition: width .25s var(--tg-ease), background .25s var(--tg-ease);
}

/* ---------- Form section icon tiles ---------- */

.tg-form-section-icon {
    width: 28px;
    height: 28px;
    border-radius: 8px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.tg-form-section-icon .mud-icon-root { font-size: 16px !important; }

/* ---------- KPI strip (page-level row of KpiCards) ---------- */

.tg-kpi-strip {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 14px;
    margin-bottom: 16px;
}

@media (max-width: 1100px) { .tg-kpi-strip { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 640px)  { .tg-kpi-strip { grid-template-columns: 1fr; } }

/* ---------- Chip tone variants ---------- */

.tg-chip.tg-chip-success {
    background: color-mix(in srgb, #10B981 12%, transparent);
    color: #059669;
    border-color: color-mix(in srgb, #10B981 28%, transparent);
}

.tg-chip.tg-chip-warning {
    background: color-mix(in srgb, #F59E0B 12%, transparent);
    color: #B45309;
    border-color: color-mix(in srgb, #F59E0B 30%, transparent);
}

.tg-chip.tg-chip-error {
    background: color-mix(in srgb, #EF4444 12%, transparent);
    color: #DC2626;
    border-color: color-mix(in srgb, #EF4444 28%, transparent);
}

.tg-chip.tg-chip-info {
    background: color-mix(in srgb, #0EA5E9 12%, transparent);
    color: #0369A1;
    border-color: color-mix(in srgb, #0EA5E9 28%, transparent);
}

.tg-chip .mud-icon-root { font-size: 12px !important; margin-right: 3px; }

/* ---------- Deposit kanban polish ---------- */

.tg-kcol-title .tg-kcol-count {
    margin-left: 6px;
}

.tg-kcol-total {
    font-size: 12.5px;
    font-weight: 700;
    color: var(--mud-palette-text-primary);
    letter-spacing: -0.01em;
}

.tg-kcard-top {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 10px;
}

.tg-kcard-agent-wrap {
    display: flex;
    align-items: center;
    gap: 10px;
    min-width: 0;
    flex: 1;
}

.tg-kcard-agent-text {
    display: flex;
    flex-direction: column;
    gap: 1px;
    min-width: 0;
}

.tg-kcard-when {
    font-size: 11px;
    color: var(--mud-palette-text-secondary);
}

.tg-kcard-chips {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    align-items: center;
}

.tg-utr {
    display: inline-flex;
    align-items: center;
    padding: 2px 8px;
    border-radius: var(--tg-radius-pill);
    font-size: 10.5px;
    background: color-mix(in srgb, var(--mud-palette-primary) 10%, transparent);
    color: var(--mud-palette-primary);
    border: 1px solid color-mix(in srgb, var(--mud-palette-primary) 22%, transparent);
}

.tg-kcard-foot {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 8px;
}

.tg-kcard.is-warm {
    border-color: color-mix(in srgb, #F59E0B 30%, var(--mud-palette-lines-default));
    background: color-mix(in srgb, #F59E0B 3%, var(--mud-palette-surface));
}

.tg-kcard.is-stale {
    border-color: color-mix(in srgb, #EF4444 35%, var(--mud-palette-lines-default));
    background: color-mix(in srgb, #EF4444 4%, var(--mud-palette-surface));
}

/* ---------- Dashboard card head (rich) ---------- */

.tg-card-head-rich {
    align-items: center;
    padding-bottom: 10px;
    margin-bottom: 12px;
}

.tg-card-head-left {
    display: flex;
    align-items: center;
    gap: 10px;
    min-width: 0;
}

.tg-card-head-icon {
    width: 32px;
    height: 32px;
    border-radius: 10px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.tg-card-head-icon .mud-icon-root {
    font-size: 18px !important;
}

.tg-card-head-text {
    display: flex;
    flex-direction: column;
    gap: 0;
    min-width: 0;
}

.tg-card-head-eyebrow {
    font-size: 9.5px;
    font-weight: 700;
    letter-spacing: 0.10em;
    text-transform: uppercase;
    color: var(--mud-palette-text-secondary);
    line-height: 1.3;
}

.tg-card-head-title {
    font-size: 14px;
    font-weight: 600;
    color: var(--mud-palette-text-primary);
    letter-spacing: -0.01em;
    line-height: 1.2;
}

.tg-card-head-count {
    font-size: 11px;
    font-weight: 600;
    padding: 2px 8px;
    border-radius: var(--tg-radius-pill);
    background: color-mix(in srgb, var(--mud-palette-text-secondary) 10%, transparent);
    color: var(--mud-palette-text-secondary);
}

.tg-card-head-total {
    font-size: 12.5px;
    font-weight: 700;
    color: var(--mud-palette-text-primary);
}

/* ---------- Pending approvals (new card) ---------- */

.tg-approval-card-top {
    display: flex;
    align-items: center;
    gap: 10px;
    min-width: 0;
}

.tg-approval-card-agent {
    display: flex;
    flex-direction: column;
    min-width: 0;
    flex: 1;
}

.tg-approval-card-agent-name {
    font-size: 13px;
    font-weight: 600;
    color: var(--mud-palette-text-primary);
    line-height: 1.2;
}

.tg-approval-card-agent-when {
    font-size: 11px;
    color: var(--mud-palette-text-secondary);
    display: flex;
    align-items: center;
    gap: 4px;
    flex-wrap: wrap;
}

.tg-approval-chips {
    display: flex;
    gap: 6px;
    flex-wrap: wrap;
    align-items: center;
    margin: 2px 0;
}

.tg-approval-utr {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 11px;
    padding-top: 2px;
}

.tg-approval-utr-label {
    font-size: 9.5px;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--mud-palette-text-secondary);
}

.tg-approval-utr-value {
    color: var(--mud-palette-text-primary);
    font-weight: 500;
}

.tg-approval-card.is-warm {
    border-color: color-mix(in srgb, #F59E0B 28%, var(--mud-palette-lines-default));
    background: color-mix(in srgb, #F59E0B 3%, var(--mud-palette-surface));
}

.tg-approval-card.is-stale {
    border-color: color-mix(in srgb, #EF4444 30%, var(--mud-palette-lines-default));
    background: color-mix(in srgb, #EF4444 4%, var(--mud-palette-surface));
}

/* ---------- Activity panel ---------- */

.tg-conn-chip {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 3px 10px;
    border-radius: var(--tg-radius-pill);
    font-size: 11px;
    font-weight: 600;
}

.tg-conn-chip.is-on {
    background: color-mix(in srgb, var(--mud-palette-success) 10%, transparent);
    color: var(--mud-palette-success);
}

.tg-conn-chip.is-off {
    background: color-mix(in srgb, var(--mud-palette-text-disabled) 16%, transparent);
    color: var(--mud-palette-text-secondary);
}

.tg-activity-icon-wrap {
    width: 28px;
    height: 28px;
    border-radius: 8px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    margin-top: 1px;
}

.tg-activity-icon-wrap .mud-icon-root {
    font-size: 15px !important;
}

.tg-activity-text {
    font-size: 12.5px;
    color: var(--mud-palette-text-primary);
    line-height: 1.35;
}

.tg-activity-when {
    font-size: 10.5px;
    color: var(--mud-palette-text-secondary);
    margin-top: 1px;
}

.tg-ellipsis-2 {
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

/* ---------- Recent amendments polish ---------- */

.tg-when-caption {
    font-size: 11px;
    color: var(--mud-palette-text-secondary);
}

/* ---------- Bookings trend KPI strip ---------- */

.tg-trend-kpis {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 10px;
    margin-bottom: 10px;
}

.tg-trend-kpi {
    display: flex;
    flex-direction: column;
    gap: 1px;
    padding: 8px 12px;
    border-radius: var(--tg-radius-md);
    background: color-mix(in srgb, var(--mud-palette-primary) 4%, var(--mud-palette-surface));
    border: 1px solid color-mix(in srgb, var(--mud-palette-primary) 10%, var(--mud-palette-lines-default));
}

.tg-trend-kpi-label {
    font-size: 10px;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--mud-palette-text-secondary);
}

.tg-trend-kpi-value {
    font-size: 20px;
    font-weight: 700;
    color: var(--mud-palette-text-primary);
    letter-spacing: -0.02em;
    line-height: 1.1;
}

.tg-trend-kpi-sub {
    font-size: 10.5px;
    color: var(--mud-palette-text-secondary);
}

/* Change password page */
.tg-change-password {
    display: flex;
    justify-content: flex-start;
    margin-top: 8px;
}

.tg-change-password-card {
    max-width: 560px;
    width: 100%;
    padding: 0 0 20px;
    overflow: hidden;
}

.tg-change-password-form {
    padding: 18px 24px 4px;
}

.tg-change-password-actions {
    display: flex;
    justify-content: flex-end;
    gap: 8px;
    padding: 8px 24px 16px;
    border-top: 1px solid var(--mud-palette-lines-default);
    margin-top: 8px;
}

/* ---------- Profile page ---------- */

.tg-profile-page { padding-top: 4px; }

.tg-profile-hero {
    display: flex;
    align-items: center;
    gap: 20px;
    padding: 20px 22px;
    background: linear-gradient(135deg,
        color-mix(in srgb, var(--mud-palette-primary) 6%, var(--mud-palette-surface)) 0%,
        var(--mud-palette-surface) 60%);
    border: 1px solid color-mix(in srgb, var(--mud-palette-primary) 14%, transparent);
    position: relative;
    overflow: hidden;
}

.tg-profile-hero::before {
    content: "";
    position: absolute;
    inset: 0;
    background: radial-gradient(circle at top right,
        color-mix(in srgb, var(--mud-palette-primary) 14%, transparent) 0%,
        transparent 45%);
    pointer-events: none;
}

.tg-profile-hero > * { position: relative; z-index: 1; }

.tg-profile-hero-text {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.tg-profile-hero-name {
    font-size: 22px;
    font-weight: 700;
    letter-spacing: -0.015em;
    color: var(--mud-palette-text-primary);
    line-height: 1.15;
}

.tg-profile-hero-email {
    font-size: 13px;
    color: var(--mud-palette-text-secondary);
}

.tg-profile-hero-chips {
    display: flex;
    gap: 6px;
    flex-wrap: wrap;
    margin-top: 2px;
}

.tg-profile-hero-actions {
    display: flex;
    flex-direction: column;
    gap: 8px;
    flex-shrink: 0;
}

@media (max-width: 720px) {
    .tg-profile-hero { flex-direction: column; align-items: flex-start; }
    .tg-profile-hero-actions { width: 100%; flex-direction: row; }
    .tg-profile-hero-actions .mud-button { flex: 1; }
}

.tg-profile-security {
    display: flex;
    flex-direction: column;
    padding: 6px 16px 12px;
}

.tg-profile-security-row {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 12px 2px;
    border-bottom: 1px solid var(--mud-palette-lines-default);
}

.tg-profile-security-row:last-child { border-bottom: 0; }

.tg-profile-security-icon {
    width: 34px;
    height: 34px;
    border-radius: 10px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.tg-profile-security-icon .mud-icon-root { font-size: 18px !important; }

.tg-profile-security-text {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.tg-profile-security-label {
    font-size: 13px;
    font-weight: 600;
    color: var(--mud-palette-text-primary);
}

.tg-profile-security-desc {
    font-size: 12px;
    color: var(--mud-palette-text-secondary);
    line-height: 1.4;
}

.tg-profile-shortcuts {
    display: flex;
    flex-direction: column;
    padding: 6px 16px 12px;
}

.tg-profile-shortcut {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 12px 10px;
    border-radius: var(--tg-radius-md);
    text-decoration: none;
    color: inherit;
    border-bottom: 1px solid var(--mud-palette-lines-default);
    transition: background 120ms var(--tg-ease), transform 120ms var(--tg-ease);
}

.tg-profile-shortcut:last-child { border-bottom: 0; }

.tg-profile-shortcut:hover {
    background: color-mix(in srgb, var(--mud-palette-primary) 5%, transparent);
    transform: translateX(2px);
}

.tg-profile-shortcut-icon {
    width: 34px;
    height: 34px;
    border-radius: 10px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.tg-profile-shortcut-icon .mud-icon-root { font-size: 18px !important; }

.tg-profile-shortcut-text {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.tg-profile-shortcut-label {
    font-size: 13px;
    font-weight: 600;
    color: var(--mud-palette-text-primary);
}

.tg-profile-shortcut-desc {
    font-size: 12px;
    color: var(--mud-palette-text-secondary);
    line-height: 1.3;
}

.tg-profile-shortcut .mud-icon-root {
    color: var(--mud-palette-text-secondary);
    transition: color 120ms var(--tg-ease), transform 120ms var(--tg-ease);
}

.tg-profile-shortcut:hover .mud-icon-root {
    color: var(--mud-palette-primary);
    transform: translateX(2px);
}

/* Group Booking detail — itinerary segments */
.tg-gb-seg {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    padding: 10px 12px;
    border: 1px solid var(--mud-palette-lines-default);
    border-radius: 10px;
    background: color-mix(in srgb, var(--mud-palette-primary) 3%, var(--mud-palette-surface));
}

.tg-gb-seg-main {
    display: flex;
    flex-direction: column;
    gap: 4px;
    flex: 1 1 auto;
    min-width: 0;
}

.tg-gb-seg-row {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
    font-size: 14px;
    font-weight: 600;
    color: var(--mud-palette-text-primary);
}

.tg-gb-seg-sub {
    display: flex;
    align-items: center;
    gap: 6px;
    flex-wrap: wrap;
    font-size: 12.5px;
    color: var(--mud-palette-text-secondary);
}

/* Unhold volume bar */
.tg-unhold-bar {
    display: flex;
    align-items: center;
    gap: 10px;
    min-width: 180px;
}

.tg-unhold-bar-track {
    flex: 1 1 auto;
    height: 8px;
    border-radius: 999px;
    background: color-mix(in srgb, var(--mud-palette-error) 12%, var(--mud-palette-surface));
    overflow: hidden;
    min-width: 100px;
}

.tg-unhold-bar-fill {
    height: 100%;
    border-radius: 999px;
    background: linear-gradient(90deg,
        color-mix(in srgb, var(--mud-palette-warning) 80%, transparent),
        color-mix(in srgb, var(--mud-palette-error) 85%, transparent));
    transition: width 240ms var(--tg-ease);
}

.tg-unhold-bar-count {
    font-weight: 700;
    font-size: 14px;
    color: var(--mud-palette-error);
    min-width: 32px;
    text-align: right;
}