@import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&display=swap');

/* ======================================================
   MammothShift Design System — CSS Custom Properties
   ====================================================== */

:root {
    --mammoth-font-family: 'Inter', 'Roboto', 'Helvetica', 'Arial', sans-serif;
    /* Core palette — consuming apps override via their theme CSS */
    --mammoth-primary: #18B9D9;
    --mammoth-primary-dark: #1396B0;
    --mammoth-primary-light: #4DD0E1;
    --mammoth-secondary: #12263f;
    --mammoth-electric: rgb(139,92,246);
    /* Backgrounds */
    --mammoth-bg-surface: #FFFFFF;
    /* Text */
    --mammoth-text-primary: #12263f; /*#12263f*/
    --mammoth-text-secondary: #4a5568;
    --mammoth-text-tertiary: #64748B;
    --mammoth-text-on-dark: #FFFFFF;
    --mammoth-text-on-dark-muted: #A0AEC0;
    /* Borders */
    --mammoth-border: #E3EBF6;
    /* Primary opacity scale */
    --mammoth-primary-6: rgba(24, 185, 217, 0.06);
    --mammoth-primary-10: rgba(24, 185, 217, 0.1);
    --mammoth-primary-20: rgba(24, 185, 217, 0.2);
    --mammoth-primary-30: rgba(24, 185, 217, 0.3);
    /* Table headers */
    --mammoth-table-header-color: var(--mammoth-primary);
    --mammoth-table-header-font-size: 12px;
    --mammoth-table-header-letter-spacing: 0.08em;
    /* Breadcrumbs */
    --mammoth-breadcrumb-font-size: 11px;
    --mammoth-breadcrumb-letter-spacing: 0.05em;
    /* Card styling */
    --mammoth-card-shadow: 0 1px 3px rgba(0, 0, 0, 0.08);
    --mammoth-card-radius: 8px;
    /* Spacing */
    --mammoth-spacing-card: 24px;
    --mammoth-spacing-form-gap: 16px;
    --mammoth-spacing-page: 2.25rem;
    /* Selected row */
    --mammoth-selected-row-bg: rgba(24, 185, 217, 0.08);
    --mammoth-selected-row-border: 2px dashed var(--mammoth-primary);
    /* N3 Palette — Navy Warm Accent Pop */
    --mammoth-n3-cyan:  #18B9D9;
    --mammoth-n3-navy:  #12263F;
    --mammoth-n3-steel: #5D82A8;
    --mammoth-n3-amber: #F59E0B;
    --mammoth-n3-light: #A3BAD0;
    --mammoth-n3-gray:  #94A3B8;
    /* Status dot colors — mapped to N3 */
    --mammoth-status-success: var(--mammoth-n3-cyan);
    --mammoth-status-warning: var(--mammoth-n3-amber);
    --mammoth-status-danger: #DC2626;
    --mammoth-status-muted: var(--mammoth-n3-gray);
    /* Dialog header */
    --mammoth-dialog-header-bg: var(--mammoth-secondary);
    /* Dark nav — same as sidebar background */
    --mammoth-dark-nav: var(--mammoth-secondary);

    /*  Overwrite Header Column Font Weight */
    --mud-typography-subtitle2-weight: 700;
}


.gradient-text {
    background: linear-gradient( 45deg, #18B9D9, #8B5CF6, #D946EF );
    background-size: 100%;
    background-repeat: no-repeat;
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    /* Optional for Firefox */
    background-clip: text;
    color: transparent;
}

/* ======================================================
   Layout
   ====================================================== */

.mammoth-main-content {
    padding: calc(var(--mud-appbar-height, 64px) + var(--mammoth-spacing-page)) var(--mammoth-spacing-page) var(--mammoth-spacing-page) var(--mammoth-spacing-page);
}

/* ======================================================
   Cards & Paper
   ====================================================== */

.mud-paper {
    box-shadow: var(--mammoth-card-shadow) !important;
}

/* Nested card — more pronounced shadow when card is inside another card/paper */
.mud-paper .mud-card,
.mud-paper .mud-paper {
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.12) !important;
}

/* Card header — bottom border separator */
.mud-card-header {
    border-bottom: 1px solid var(--mammoth-border);
}

/* Card header actions — muted icon color */
.mammoth-card-actions .mud-icon-button {
    color: var(--mammoth-table-header-color) !important;
}

/* ======================================================
   Entity header card — profile-card header on detail views
   N3 Variation 1: Navy accent, cyan links, steel section bars
   ====================================================== */

.mammoth-entity-header-card {
    position: relative;
    background-color: var(--mammoth-bg-surface);
    border: 1px solid var(--mammoth-border);
    border-top: 3px solid var(--mammoth-n3-navy, var(--mammoth-secondary));
    border-radius: 0 0 var(--mammoth-card-radius) var(--mammoth-card-radius);
    box-shadow: 0 1px 2px rgba(16, 24, 40, 0.04), 0 1px 3px rgba(16, 24, 40, 0.06);
    padding: 24px 28px;
    margin-bottom: 1rem;
}

/* Header row: avatar inline with eyebrow + name. Tags right-aligned.
   The edit FAB is absolutely positioned, reserve space on the right. */
.mammoth-entity-header-card-header {
    display: flex;
    align-items: center;
    gap: 14px;
    padding-right: 56px;
    min-height: 48px;
}

/* Circle avatar — navy background with white initials, or image fill */
.mammoth-entity-header-card-avatar {
    width: 48px;
    height: 48px;
    border-radius: 50%;
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 17px;
    font-weight: 700;
    background: var(--mammoth-n3-navy, var(--mammoth-secondary));
    color: #fff;
    overflow: hidden;
}
.mammoth-entity-header-card-avatar-img {
    width: 80%;
    height: 80%;
    object-fit: cover;
    border-radius: 50%;
}

/* Text column next to the avatar */
.mammoth-entity-header-card-text {
    display: flex;
    flex-direction: column;
    gap: 1px;
    min-width: 0;
}

.mammoth-entity-header-card-eyebrow {
    color: var(--mammoth-n3-steel, var(--mammoth-text-tertiary));
    font-size: 11px;
    font-weight: 600;
    letter-spacing: 0.08em;
    text-transform: uppercase;
}

.mammoth-entity-header-card-name {
    color: var(--mammoth-n3-navy, var(--mammoth-text-primary));
    font-size: 1.3rem;
    font-weight: 700;
    letter-spacing: -0.01em;
    line-height: 1.2;
    margin: 0;
    word-break: break-word;
}

/* Tags — right-aligned alongside the name row */
.mammoth-entity-header-card-tags {
    display: flex;
    align-items: center;
    gap: 4px;
    margin-left: auto;
    padding-right: 36px;
    flex-shrink: 0;
}

/* Chip / tag base */
.mammoth-chip {
    font-size: 10px;
    font-weight: 600;
    padding: 2px 8px;
    border-radius: 3px;
    border: 1px solid;
    white-space: nowrap;
}
.mammoth-chip--navy {
    background: rgba(18, 38, 63, 0.06);
    color: var(--mammoth-n3-navy, var(--mammoth-secondary));
    border-color: rgba(18, 38, 63, 0.12);
}
.mammoth-chip--amber {
    background: rgba(245, 158, 11, 0.1);
    color: #B45309;
    border-color: rgba(245, 158, 11, 0.25);
}
.mammoth-chip--cyan {
    background: rgba(24, 185, 217, 0.08);
    color: var(--mammoth-primary-dark, #1396B0);
    border-color: rgba(24, 185, 217, 0.2);
}
.mammoth-chip--steel {
    background: rgba(93, 130, 168, 0.08);
    color: var(--mammoth-n3-steel, #5D82A8);
    border-color: rgba(93, 130, 168, 0.15);
}

/* Optional image-alongside-header layout. When an ImageUrl is provided,
   the image sits left of the eyebrow + title in a flex row. */
.mammoth-entity-header-card-with-image {
    display: flex;
    gap: 24px;
    align-items: flex-start;
}
.mammoth-entity-header-card-with-image > :last-child {
    flex: 1;
    min-width: 0;
}

/* Thin divider and spacing between the profile header and the detail body. */
.mammoth-entity-header-card-body {
    margin-top: 16px;
    padding-top: 16px;
    border-top: 1px solid var(--mammoth-border);
}

/*  Invisible wrapper around the datatable entity toolbar   */
.mammoth-entity-toolbar-section {
    padding: 16px 20px;
}
/* ── Header card columns ─────────────────────────────────────────
   Multi-column grid for the header card body content area.
   Column 1 (image) is handled by mammoth-entity-header-card-with-image.
   These classes lay out the remaining content columns (2–4). */
.mammoth-header-card-columns {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 0 24px;
}

.mammoth-header-card-columns--3 {
    grid-template-columns: repeat(3, 1fr);
}

.mammoth-header-card-columns--4 {
    grid-template-columns: repeat(4, 1fr);
}
/* 4-up cards collapse gracefully on narrower viewports */
@media (max-width: 1100px) {
    .mammoth-header-card-columns--4 {
        grid-template-columns: repeat(2, 1fr);
    }
}
@media (max-width: 750px) {
    .mammoth-header-card-columns--4 {
        grid-template-columns: 1fr;
    }
}

/* ── Header card field grid ──────────────────────────────────────
   N3 Variation 1: stacked label-above-value in a 4-column grid.
   No dividers between fields. Labels in gray, values in navy. */
.mammoth-header-field {
    display: flex;
    flex-direction: column;
    padding: 10px 12px;
}

.mammoth-header-field-label {
    display: block;
    font-size: 10px;
    color: var(--mammoth-n3-gray, var(--mammoth-text-tertiary));
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    margin-bottom: 4px;
    white-space: nowrap;
}

.mammoth-header-field-value {
    display: block;
    font-size: 13px;
    font-weight: 500;
    color: var(--mammoth-text-primary);
    word-break: break-word;
    font-variant-numeric: tabular-nums;
}

/* Emphasized value — navy weight for key identifiers (account #, scores) */
.mammoth-header-field-value--key {
    color: var(--mammoth-n3-navy, var(--mammoth-secondary));
    font-weight: 700;
}

.mammoth-header-field-link {
    font-size: 13px;
    color: var(--mammoth-n3-cyan, var(--mammoth-primary));
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    gap: 3px;
    font-weight: 700;
}

/* ── Field grid container ───────────────────────────────────────
   4-column grid with no borders. Wraps to 2 columns on narrow viewports. */
.mammoth-field-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 0;
}
.mammoth-field-grid--3 {
    grid-template-columns: repeat(3, 1fr);
}
/* Vertical fill: fields stack down a column up to a row limit
   (--mammoth-field-col-limit, default 3), then wrap into a new column.
   Columns expand automatically as more fields are added, so a section with
   many fields never becomes one long thin strip. Override the limit inline,
   e.g. style="--mammoth-field-col-limit:4;" */
.mammoth-field-grid--vertical {
    grid-template-columns: none;
    grid-template-rows: repeat(var(--mammoth-field-col-limit, 3), auto);
    grid-auto-flow: column;
    grid-auto-columns: minmax(0, 1fr);
    column-gap: 16px;
}
@media (max-width: 800px) {
    .mammoth-field-grid,
    .mammoth-field-grid--3 {
        grid-template-columns: repeat(2, 1fr);
    }
}
/* Stepped collapse for the vertical fill: 3 cols → 2 cols → 1 col.
   Column count is derived from the per-column row limit, so raising the
   limit at each breakpoint pushes the trailing column(s) down into the
   remaining ones instead of jumping straight to a single column.
   Tuned for the ~8-field header grid: limit 5 keeps it at 2 columns. */
@media (max-width: 1100px) {
    .mammoth-field-grid--vertical {
        --mammoth-field-col-limit: 5;
    }
}
@media (max-width: 750px) {
    .mammoth-field-grid--vertical {
        grid-auto-flow: row;
        grid-template-rows: none;
        grid-template-columns: 1fr;
    }
}

/* ── Section bars ───────────────────────────────────────────────
   Left-accent bar grouping fields into subsections (Contact, Consent, etc.).
   Default is steel; variants available for navy, light, cyan. */
.mammoth-section-bar {
    padding-left: 12px;
    margin: 12px 0 0;
}
.mammoth-section-bar:first-child {
    margin-top: 0;
}
.mammoth-section-bar__title {
    font-size: 10px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    padding-top: 4px;
    margin-bottom: 2px;
}
.mammoth-section-bar--steel {
    border-left: 3px solid var(--mammoth-n3-steel, #5D82A8);
    border-top: 2px solid var(--mammoth-border-light, #5D82A8);
}
.mammoth-section-bar--steel .mammoth-section-bar__title {
    color: var(--mammoth-n3-steel, #5D82A8);
}
.mammoth-section-bar--navy {
    border-left: 3px solid var(--mammoth-n3-navy, var(--mammoth-secondary));
}
.mammoth-section-bar--navy .mammoth-section-bar__title {
    color: var(--mammoth-n3-navy, var(--mammoth-secondary));
}
.mammoth-section-bar--light {
    border-left: 3px solid var(--mammoth-n3-light, #A3BAD0);
}
.mammoth-section-bar--light .mammoth-section-bar__title {
    color: var(--mammoth-n3-steel, #5D82A8);
}
.mammoth-section-bar--cyan {
    border-left: 3px solid var(--mammoth-n3-cyan, var(--mammoth-primary));
}
.mammoth-section-bar--cyan .mammoth-section-bar__title {
    color: var(--mammoth-n3-cyan, var(--mammoth-primary));
}

/* ── MammothHeaderCard — collapsible outlined card ────────────── */
.mammoth-header-card {
    border: 1px solid var(--mammoth-border);
    border-radius: var(--mammoth-card-radius, 8px);
    background: var(--mammoth-bg-surface, #fff);
    margin-top: 12px;
}
.mammoth-header-card__header {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 10px 12px;
    cursor: pointer;
    user-select: none;
}
.mammoth-header-card__header:hover {
    background: var(--mammoth-primary-6, rgba(24, 185, 217, 0.06));
    border-radius: var(--mammoth-card-radius, 8px);
}
.mammoth-header-card__title {
    font-size: 13px;
    font-weight: 600;
    color: var(--mammoth-text-primary);
}
.mammoth-header-card__caret {
    display: flex;
    align-items: center;
    color: var(--mammoth-text-secondary);
}
.mammoth-header-card__actions {
    display: flex;
    align-items: center;
    margin-left: 4px;
}
.mammoth-header-card__actions-row {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 8px 12px;
}
.mammoth-header-card__body {
    padding: 0 12px 12px;
}
.mammoth-header-card--collapsed .mammoth-header-card__body {
    display: none;
}

/* Horizontal description list used for label/value pairs inside header
   card bodies and detail sections. dt is the label column (sized to longest
   label), dd is the value column that fills the remaining width. */
.mammoth-detail-dl {
    display: grid;
    grid-template-columns: max-content 1fr;
    row-gap: 10px;
    column-gap: 20px;
    margin: 0;
}

.mammoth-detail-dl dt {
    color: var(--mammoth-text-tertiary);
    font-size: 12px;
    font-weight: 600;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    align-self: center;
    margin: 0;
}

.mammoth-detail-dl dd {
    color: var(--mammoth-text-primary);
    font-size: 14px;
    align-self: center;
    margin: 0;
    word-break: break-word;
}

/* ======================================================
   Sub-navigation — light surface background, cyan active
   ====================================================== */

/* Container panel */
#mammoth-detail-nav-panel {
    background-color: var(--mammoth-bg-surface) !important;
    display: flex !important;
}

/* The nav element itself (MudNavMenu renders as <nav>) */
#mammoth-detail-nav-panel nav.mammoth-subnav,
nav.mud-navmenu.mammoth-subnav,
.mammoth-subnav {
    background-color: var(--mammoth-bg-surface) !important;
    color: var(--mammoth-text-primary) !important;
    flex: 1;
    overflow: hidden;
}

/* Nav links */

#mammoth-detail-nav-panel .mud-nav-link,
nav.mammoth-subnav .mud-nav-link,
div.mammoth-subnav .mud-nav-link {
    color: var(--mammoth-text-secondary) !important;
    background-color: transparent !important;
}

#mammoth-detail-nav-panel .mud-nav-link .mud-icon-root,
nav.mammoth-subnav .mud-nav-link .mud-icon-root,
div.mammoth-subnav .mud-nav-link .mud-icon-root {
    color: rgba(224, 224, 224, 1) !important;
}

/* Dot turns primary only on hover (active is handled by the .mammoth-subnav-active rule below) */
#mammoth-detail-nav-panel .mud-nav-link:hover .mud-icon-root,
nav.mammoth-subnav .mud-nav-link:hover .mud-icon-root,
div.mammoth-subnav .mud-nav-link:hover .mud-icon-root {
    color: var(--mammoth-primary) !important;
}

/* Tighten the left gap: halve the nav-link left padding, and match nested (group) links so the
   submenu header lines up with its children's text */
#mammoth-detail-nav-panel .mud-nav-link,
nav.mammoth-subnav .mud-nav-link,
div.mammoth-subnav .mud-nav-link,
#mammoth-detail-nav-panel .mud-nav-group .mud-nav-link,
nav.mammoth-subnav .mud-nav-group .mud-nav-link,
div.mammoth-subnav .mud-nav-group .mud-nav-link {
    padding-left: 4px !important;
}

#mammoth-detail-nav-panel .mud-nav-link .mud-icon-root,
nav.mammoth-subnav .mud-nav-link .mud-icon-root,
div.mammoth-subnav .mud-nav-link .mud-icon-root {
    margin-right: 4px !important;
}

/* Default dot: soft halo glow when its nav item is hovered (drop-shadow follows the circle) */
#mammoth-detail-nav-panel .mammoth-subnav-defaulticon .mud-icon-root,
nav.mammoth-subnav .mammoth-subnav-defaulticon .mud-icon-root,
div.mammoth-subnav .mammoth-subnav-defaulticon .mud-icon-root {
    transition: filter 0.15s ease;
}

#mammoth-detail-nav-panel .mammoth-subnav-defaulticon:hover .mud-icon-root,
nav.mammoth-subnav .mammoth-subnav-defaulticon:hover .mud-icon-root,
div.mammoth-subnav .mammoth-subnav-defaulticon:hover .mud-icon-root {
    filter: drop-shadow(0 0 3px var(--mammoth-primary)) drop-shadow(0 0 1px var(--mammoth-primary));
}


#mammoth-detail-nav-panel .mud-nav-link:hover,
nav.mammoth-subnav .mud-nav-link:hover,
div.mammoth-subnav .mud-nav-link:hover {
    background-color: var(--mammoth-primary-6) !important;
    color: var(--mammoth-text-primary) !important;
}

/* Active — inset box-shadow for left border (no layout shift) */
#mammoth-detail-nav-panel .mammoth-subnav-active,
nav.mammoth-subnav .mammoth-subnav-active,
div.mammoth-subnav .mammoth-subnav-active {
    background-color: var(--mammoth-dark-nav) !important;
    color: var(--mammoth-primary) !important;
    box-shadow: inset 3px 0 0 0 var(--mammoth-primary) !important;
    border-radius: 0 !important;
}

#mammoth-detail-nav-panel .mammoth-subnav-active .mud-icon-root,
nav.mammoth-subnav .mammoth-subnav-active .mud-icon-root,
div.mammoth-subnav .mammoth-subnav-active .mud-icon-root {
    color: var(--mammoth-primary) !important;
}

    #mammoth-detail-nav-panel .mammoth-subnav-active .mud-nav-link .mud-nav-link-text,
    nav.mammoth-subnav .mammoth-subnav-active .mud-nav-link .mud-nav-link-text,
    div.mammoth-subnav .mammoth-subnav-active .mud-nav-link .mud-nav-link-text {
        color: #fff !important;
    }

/* Style guide standalone subnav wrapper */
div.mammoth-subnav {
    background-color: var(--mammoth-bg-surface) !important;
    color: var(--mammoth-text-primary) !important;
    border-radius: 8px;
    overflow: hidden;
}

/* ======================================================
   Sidebar — layout: bottom-pinned section
   ====================================================== */

.mammoth-sidebar .mud-drawer-content {
    display: flex;
    flex-direction: column;
    height: 100%;
    overflow: hidden;
}

.mammoth-sidebar-content {
    display: flex;
    flex-direction: column;
    flex: 1 1 0;
    min-height: 0;
}

.mammoth-sidebar-brand {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 10px;
    width: 100%;
    padding: 8px 0;
    text-decoration: none;
    color: inherit;
}

.mammoth-sidebar-brand-icon {
    height: 40px;
    width: auto;
}

.mammoth-sidebar .mud-drawer-header {
    margin-bottom: 0;
}

.mammoth-sidebar-section-label {
    font-size: 11px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.15em;
    color: rgba(255, 255, 255, 0.4);
    padding: 16px 16px 8px 24px;
}

.mammoth-sidebar-user-footer {
    margin-top: auto;
    padding: 16px 20px;
    border-top: 1px solid rgba(255, 255, 255, 0.08);
    display: flex;
    align-items: center;
    gap: 8px;
}

.mammoth-sidebar-user-footer .mammoth-sidebar-user-img {
    width: 36px;
    height: 36px;
    border-radius: 50%;
    object-fit: cover;
    flex-shrink: 0;
}

.mammoth-sidebar-user-link {
    display: flex;
    align-items: center;
    gap: 10px;
    text-decoration: none;
    color: inherit;
    flex: 1;
    min-width: 0;
}

.mammoth-sidebar-user-info {
    flex: 1;
    min-width: 0;
    overflow: hidden;
}

.mammoth-sidebar-user-info .mammoth-sidebar-user-name {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.mammoth-sidebar-user-link:hover {
    text-decoration: none;
}

.mammoth-sidebar-user-footer .mammoth-sidebar-user-name {
    font-size: 14px;
    font-weight: 600;
    color: rgba(255, 255, 255, 0.9);
}

.mammoth-sidebar-user-footer .mammoth-sidebar-user-role {
    font-size: 12px;
    color: rgba(255, 255, 255, 0.4);
}

.mammoth-sidebar-brand-name {
    color: #18B9D9;
    font-size: 0.8rem;
    font-weight: 600;
    letter-spacing: 0.08em;
    text-transform: uppercase;
}

.mammoth-sidebar-brand-sub-name {
    color: var(--mammoth-electric);
    font-size: 0.6rem;
    font-weight: 600;
    letter-spacing: 0.08em;
    text-transform: uppercase;
}

.mammoth-sidebar-top-content {
    padding: 8px 16px;
    border-top: 1px solid rgba(255, 255, 255, 0.08);
    border-bottom: 1px solid rgba(255, 255, 255, 0.08);
}

.mammoth-sidebar-nav {
    flex: 1 1 auto;
    overflow-y: auto;
}

.mammoth-sidebar-bottom {
    flex: 0 0 auto;
}

/* ======================================================
   Sidebar — cyan active nav item
   ====================================================== */

.mammoth-sidebar .mud-nav-link {
    border-left: 3px solid transparent !important;
}

.mammoth-sidebar .mud-nav-link.active,
.mammoth-sidebar .mud-navmenu .mud-nav-link.active {
    background-color: var(--mammoth-primary-20) !important;
    color: var(--mammoth-text-on-dark) !important;
    border-left-color: var(--mammoth-primary) !important;
    border-radius: 0 !important;
}

.mammoth-sidebar .mud-nav-link.active .mud-icon-root,
.mammoth-sidebar .mud-navmenu .mud-nav-link.active .mud-icon-root {
    color: var(--mammoth-primary) !important;
}

/* ======================================================
   Dialog
   ====================================================== */

.mud-dialog {
    border-radius: 12px !important;
    overflow: hidden;
}

.mud-dialog .mud-dialog-title {
    background-color: var(--mammoth-dialog-header-bg);
    color: var(--mammoth-text-on-dark) !important;
}

.mud-dialog .mud-dialog-title .mud-typography {
    color: var(--mammoth-text-on-dark) !important;
}

.mud-dialog .mud-dialog-title .mud-icon-button,
.mud-dialog .mud-dialog-title .mammoth-dialog-close-btn {
    color: var(--mammoth-text-on-dark) !important;
    padding: 6px !important;
}

/* Enlarge the close button icon for easier clicking */
.mud-dialog .mud-dialog-title .mud-icon-button .mud-icon-root {
    font-size: 24px !important;
}

/* Title row — flex layout with title text and close button */
.mammoth-dialog-title-row {
    display: flex;
    align-items: center;
    width: 100%;
}

.mammoth-dialog-title-text {
    flex: 1;
}

/* Simple message content — generous padding for text-only dialogs */
.mammoth-dialog-message {
    padding: 20px 0;
}

/* ======================================================
   Entity list — card wrapper for data grids
   ====================================================== */

/* Form section card — one card per Header() group in an entity form (see MammothEntityForm.RenderSectionContent). */
.mammoth-form-section {
    background: var(--mammoth-bg-surface);
    border: 1px solid var(--mammoth-border, #E3EBF6);
    border-radius: var(--mammoth-card-radius, 8px);
    margin-bottom: 16px;
}
.mammoth-form-section__header {
    padding: 10px 16px;
    border-bottom: 1px solid var(--mammoth-border, #E3EBF6);
    background: var(--mammoth-bg-subtle, rgba(16, 24, 40, 0.02));
    font-weight: 600;
    font-size: 0.9rem;
    color: var(--mammoth-n3-navy, var(--mammoth-secondary));
}
.mammoth-form-section__body {
    padding: 16px;
}

.mammoth-entity-list {
    background: var(--mammoth-bg-surface);
    border-radius: var(--mammoth-card-radius, 8px);
    border: 1px solid var(--mammoth-border, #E3EBF6);
    overflow: hidden;
}

    .mammoth-entity-list .mud-table-dense * .mud-table-row .mud-table-cell {
        padding: 6px 24px 6px 16px !important;
    }

    .mammoth-table--condensed .mud-table-dense * .mud-table-row .mud-table-cell {
        padding: 6px 24px 6px 16px !important;
    }

    /* Leading row dot — mirrors the subnav dot: muted at rest, primary + halo on row hover.
       Suppressed when the first cell holds an image column (:not(:has(img))), and turned off
       per-grid via BehaviorBuilder.HideRowIndicatorDot() -> .mammoth-entity-list--no-rowdots. */
    .mammoth-entity-list:not(.mammoth-entity-list--no-rowdots) .mud-table-body .mud-table-row .mud-table-cell:first-child:not(:has(img))::before {
        content: "";
        display: inline-block;
        width: 6px;
        height: 6px;
        margin-right: 12px;
        border-radius: 50%;
        background-color: rgba(224, 224, 224, 1);
        vertical-align: middle;
        transition: background-color 0.15s ease, box-shadow 0.15s ease;
    }

    .mammoth-entity-list:not(.mammoth-entity-list--no-rowdots) .mud-table-body .mud-table-row:hover .mud-table-cell:first-child:not(:has(img))::before {
        background-color: var(--mammoth-primary);
        box-shadow: 0 0 3px var(--mammoth-primary), 0 0 1px var(--mammoth-primary);
    }
    /* ======================================================
   Filter toolbar — shown above grid inside entity list
   ====================================================== */
    .mammoth-filter-toolbar {
        padding: 16px 20px;
        border-bottom: 1px solid var(--mammoth-border, #E3EBF6);
    }

.mammoth-filter-toolbar__header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 12px;
}

.mammoth-filter-toolbar__title {
    font-size: 14px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: var(--mammoth-text-secondary, #4a5568);
}

.mammoth-filter-toolbar__controls {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    align-items: center;
    gap: 16px;
}

/* ======================================================
   DataGrid / Table
   ====================================================== */


/* Table header — uppercase, accent-colored, letterspaced (matches LegalSlash style guide) */
.mud-table-head .mud-table-cell {
    color: var(--mammoth-table-header-color) !important;
    font-size: var(--mammoth-table-header-font-size) !important;
    text-transform: uppercase;
    letter-spacing: var(--mammoth-table-header-letter-spacing);
    font-weight: 600;
    background: rgb(249, 251, 255); /* var(--mammoth-dark-nav)*/ /* rgba(24, 185, 217, 0.06);*/
    border-top: 2px solid rgb(237, 242, 249);
    border-bottom: 2px solid rgb(237, 242, 249);
}

/* Row padding — responsive, matches LegalSlash style guide */
.mud-table-cell {
    padding: clamp(12px, 1.4vw, 18px) clamp(16px, 2vw, 28px) !important;
}
.mud-table-dense * .mud-table-row .mud-table-cell
/* Condensed density modifier — wrap a table in this class to halve cell padding */
.mammoth-table--condensed .mud-table-cell {
    padding: 10px;
}

/* Row hover — subtle cyan background tint */
.mud-table-body .mud-table-row:hover {
    background: rgba(24, 185, 217, 0.04) !important;
}

/* Selected row — dashed cyan border + tinted bg */
.mud-table-body .mud-table-row.mud-selected-item {
    background-color: var(--mammoth-selected-row-bg) !important;
    border-left: var(--mammoth-selected-row-border);
}

/* ======================================================
   Buttons
   ====================================================== */

.mud-button-root {
    border-radius: 6px !important;
}

.wizard-primary-button {
    background-color: var(--mammoth-primary) !important;
    color: var(--mammoth-text-on-dark) !important;
}

/* ======================================================
   Breadcrumbs — uppercase, teal, letterspaced
   ====================================================== */

/* All breadcrumb links and text — teal, uppercase, small, letterspaced */
.mud-breadcrumbs a,
.mud-breadcrumbs span,
.mud-breadcrumbs li a,
.mud-breadcrumbs li span,
.mud-breadcrumbs .mud-breadcrumb-item,
.mud-breadcrumbs li .mud-breadcrumb-item {
    color: var(--mammoth-primary) !important;
    font-size: var(--mammoth-breadcrumb-font-size) !important;
    text-transform: uppercase !important;
    letter-spacing: var(--mammoth-breadcrumb-letter-spacing) !important;
    font-weight: 600 !important;
    text-decoration: none !important;
}

/* Separator between breadcrumb items */
.mud-breadcrumbs .mud-breadcrumb-separator,
.mud-breadcrumbs li .mud-breadcrumb-separator {
    color: var(--mammoth-text-tertiary) !important;
    font-size: var(--mammoth-breadcrumb-font-size) !important;
}

/* Disabled (current page) breadcrumb — same typography but muted color */
.mud-breadcrumbs a[disabled],
.mud-breadcrumbs .mud-disabled,
.mud-breadcrumbs .mud-breadcrumb-item.mud-disabled,
.mud-breadcrumbs li .mud-breadcrumb-item[disabled] {
    color: var(--mammoth-text-secondary) !important;
    opacity: 1 !important;
}

/* ======================================================
   Tabs — underline style defaults
   ====================================================== */

.mud-tabs .mud-tab.mud-tab-active {
    font-weight: 600;
}

/* ======================================================
   Status Dots
   ====================================================== */

.mammoth-status-dot {
    display: inline-block;
    width: 10px;
    height: 10px;
    border-radius: 50%;
    margin-right: 8px;
    flex-shrink: 0;
}

.mammoth-status-dot--success {
    background-color: var(--mammoth-status-success);
}

.mammoth-status-dot--warning {
    background-color: var(--mammoth-status-warning);
}

.mammoth-status-dot--danger {
    background-color: var(--mammoth-status-danger);
}

.mammoth-status-dot--pending {
    background-color: var(--mammoth-status-pending);
}

.mammoth-status-dot--muted {
    background-color: var(--mud-palette-text-disabled);
}

/* Status indicator — dot + text.
   Default: dot on left.  Add --right for dot on right instead.
   Usage: <span class="mammoth-status-indicator mammoth-status-indicator--success">Active</span>
          <span class="mammoth-status-indicator mammoth-status-indicator--danger mammoth-status-indicator--right">Inactive</span> */
.mammoth-status-indicator {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-size: 0.875rem;
    line-height: 1.5;
}

.mammoth-status-indicator::before {
    content: "";
    display: inline-block;
    width: 10px;
    height: 10px;
    border-radius: 50%;
    flex-shrink: 0;
}

.mammoth-status-indicator--right::before {
    order: 1;
}

.mammoth-status-indicator--success::before { background-color: var(--mammoth-status-success); }
.mammoth-status-indicator--warning::before { background-color: var(--mammoth-status-warning); }
.mammoth-status-indicator--pending::before { background-color: var(--mammoth-status-pending); }
.mammoth-status-indicator--danger::before  { background-color: var(--mammoth-status-danger); }
.mammoth-status-indicator--info::before    { background-color: var(--mammoth-status-info); }
.mammoth-status-indicator--muted::before   { background-color: var(--mammoth-status-muted, var(--mammoth-n3-gray, #94A3B8)); }

/* ======================================================
   Column Group Headers
   Used by MammothEntityList to visually segment columns.
   ====================================================== */
.mammoth-col-group-start    { border-left: 2px solid var(--mammoth-border, rgba(255,255,255,0.12)); }
.mammoth-col-group-header   { display: flex; flex-direction: column; gap: 2px; }
.mammoth-col-group-label    { font-size: 0.65rem; text-transform: uppercase; letter-spacing: 0.06em; opacity: 0.5; line-height: 1; min-height: 0.65rem; }

/* ======================================================
   Image Display
   Usage: <img class="mammoth-img mammoth-img--md mammoth-img--rounded" src="..." />
   Sizes:  --sm (48px), --md (120px), --lg (200px)
   Shapes: --square (default), --rounded (8px radius), --circle
   ====================================================== */
.mammoth-img {
    object-fit: contain;
    display: block;
    background: var(--mammoth-dark-nav, #f5f5f5);
    border: 1px solid var(--mammoth-border, #e0e0e0);
}

.mammoth-img--sm { width: 48px;  height: 48px; }
.mammoth-img--md { width: 80px; height: 80px; }
.mammoth-img--lg { width: 120px; height: 120px; }

.mammoth-img--square  { border-radius: 0; }
.mammoth-img--rounded {
    border-radius: 8px;
    border: 1px solid;
}
.mammoth-img--circle {
    border-radius: 50%;
    border: 1px solid;
}

/* ======================================================
   Blade / Flyout Panel
   ====================================================== */

/* Backdrop — always in DOM, fades in/out; covers the full viewport */
.mammoth-blade-backdrop {
    position: fixed;
    inset: 0;
    opacity: 0;
    pointer-events: none;
    transition: opacity 300ms ease-in-out;
}

.mammoth-blade-backdrop--open {
    opacity: 1;
    pointer-events: auto;
}

/* Blade panel — slides in from the right; stays flush-right, width shrinks per stack level */
.mammoth-blade {
    position: fixed;
    top: 0;
    right: 0;
    width: calc(90vw - var(--mammoth-blade-offset, 0px));
    height: 100vh;
    background: var(--mammoth-bg-surface);
    box-shadow: -4px 0 24px rgba(0, 0, 0, 0.20);
    display: flex;
    flex-direction: column;
    overflow: hidden;
    transform: translateX(100%);
    transition: transform 300ms ease-in-out;
}

/* Narrow variant — one-third of viewport, for settings and lightweight panels */
.mammoth-blade--narrow {
    width: calc(33vw - var(--mammoth-blade-offset, 0px));
}

/* When open: slide into its natural right-anchored position */
.mammoth-blade--open {
    transform: translateX(0);
}

/* Header — sits above the body with a subtle border separator */
.mammoth-blade-header {
    color: var(--mammoth-text-on-dark);
    padding: 10px 30px;
    display: flex;
    align-items: center;
    flex-shrink: 0;
    gap: 8px;
    border-bottom: 1px solid var(--mammoth-dark-nav);
    background-color: var(--mammoth-dark-nav);
}

.mammoth-blade-header-title {
    flex: 1;
    font-size: 1rem;
    font-weight: 600;
    color: var(--mammoth-text-on-dark);
}

.mammoth-blade-header-actions {
    display: flex;
    align-items: center;
    gap: 4px;
}

/* Close button in blade header (MudIconButton) */
.mammoth-blade-close-btn,
.mammoth-blade-header .mud-icon-button {
    color: var(--mammoth-text-on-dark) !important;
}

.mammoth-blade-header .mud-icon-button:hover {
    background-color: var(--mammoth-primary-10) !important;
}

/* Scrollable body */
.mammoth-blade-body {
    flex: 1;
    overflow-y: auto;
    padding: 24px;
    background: var(--mammoth-bg-surface);
}

/* Drag handle — left edge resize grip (rendered when Resizable=true) */
.mammoth-blade-drag-handle {
    position: absolute;
    top: 0;
    left: 0;
    width: 5px;
    height: 100%;
    cursor: ew-resize;
    background: transparent;
    z-index: 1;
    transition: background 150ms ease;
}

.mammoth-blade-drag-handle:hover {
    background: var(--mammoth-primary-20, rgba(var(--mammoth-primary-rgb, 0,120,212), 0.20));
}

/* ======================================================
   Entity form — blade/page mode footer
   ====================================================== */
.mammoth-entity-form {
    display: flex;
    flex-direction: column;
    min-height: 100%;
}
.mammoth-entity-form > .mud-form { flex: 1; }
.mammoth-entity-form__actions {
    display: flex;
    justify-content: flex-end;
    gap: 8px;
    padding: 16px 24px;
    border-top: 1px solid var(--mammoth-border);
    background: var(--mammoth-bg-surface);
}
.mammoth-blade-body:has(.mammoth-entity-form) {
    display: flex;
    flex-direction: column;
    padding-bottom: 0;
    overflow-y: hidden;
}
.mammoth-blade-body > .mammoth-entity-form {
    flex: 1;
    display: flex;
    flex-direction: column;
    overflow: hidden;
}
.mammoth-blade-body > .mammoth-entity-form > .mud-form {
    flex: 1;
    overflow-y: auto;
    padding-bottom: 24px;
}
.mammoth-blade-body > .mammoth-entity-form > .mammoth-entity-form__actions {
    flex-shrink: 0;
}
.mammoth-blade-body .mammoth-entity-form .mud-tabs {
    height: 100%;
}

/* ======================================================
   Settings edge tab — fixed vertical button on the right edge
   ====================================================== */

.mammoth-settings-tab {
    position: fixed;
    right: 0;
    top: 40%;
    z-index: 10000;
    background-color: var(--mammoth-secondary, #12263f); /*#12263f*/
    border: none;
    border-top-left-radius: 5px;
    border-bottom-left-radius: 5px;
    writing-mode: vertical-rl;
    text-orientation: mixed;
    font-weight: bold;
    font-size: 14px;
    letter-spacing: 0.05em;
    color: var(--mammoth-primary, #18B9D9);
    padding: 8px 4px 8px 2px;
    cursor: pointer;
    transition: background-color 200ms ease;
}
.mammoth-settings-tab:hover {
    background-color: var(--mammoth-primary-dark, #1396B0);
    color: #fff;
}

/* ======================================================
   Actions panel — persistent no-backdrop right-side panel
   ====================================================== */

.mammoth-actions-tab {
    position: fixed;
    right: 0;
    top: 28%;
    z-index: 10000;
    background-color: var(--mammoth-secondary, #12263f);
    border: none;
    border-top-left-radius: 5px;
    border-bottom-left-radius: 5px;
    writing-mode: vertical-rl;
    text-orientation: mixed;
    font-weight: bold;
    font-size: 14px;
    letter-spacing: 0.05em;
    color: var(--mammoth-primary, #18B9D9);
    padding: 8px 4px 8px 2px;
    cursor: pointer;
    transition: background-color 200ms ease;
}
    .mammoth-actions-tab:hover {
        background-color: var(--mammoth-primary-dark, #1396B0);
        color: #fff;
    }

.mammoth-actions-panel {
    position: fixed;
    top: 0;
    right: 0;
    bottom: 0;
    width: 33vw;
    z-index: 10001;
    background: var(--mud-palette-surface);
    box-shadow: -4px 0 24px rgba(0,0,0,0.18);
    transform: translateX(100%);
    transition: transform 300ms cubic-bezier(0.4, 0, 0.2, 1);
    display: flex;
    flex-direction: column;
}
.mammoth-actions-panel--open {
    transform: translateX(0);
}

/* ======================================================
   Toggle cards — large clickable cards for session options
   ====================================================== */

.mammoth-toggle-card-group {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.mammoth-toggle-card {
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: 16px;
    padding: 16px 20px;
    border-radius: var(--mammoth-card-radius, 8px);
    border: 2px solid var(--mammoth-border, #E3EBF6);
    background: var(--mammoth-bg-surface, #fff);
    cursor: pointer;
    transition: border-color 200ms ease, background-color 200ms ease, box-shadow 200ms ease;
}
.mammoth-toggle-card:hover {
    border-color: var(--mammoth-primary, #18B9D9);
    box-shadow: 0 2px 8px rgba(24, 185, 217, 0.15);
}
.mammoth-toggle-card--active {
    border-color: var(--mammoth-primary, #18B9D9);
    background: var(--mammoth-primary-6, rgba(24, 185, 217, 0.06));
}
.mammoth-toggle-card-icon {
    font-size: 32px;
    color: var(--mammoth-text-secondary, #4a5568);
}
.mammoth-toggle-card--active .mammoth-toggle-card-icon {
    color: var(--mammoth-primary, #18B9D9);
}
.mammoth-toggle-card-text {
    display: flex;
    flex-direction: column;
    gap: 2px;
}
.mammoth-toggle-card-label {
    font-size: 14px;
    font-weight: 600;
    color: var(--mammoth-text-primary, #12263f);/*    #12263f*/
}
.mammoth-toggle-card-desc {
    font-size: 12px;
    color: var(--mammoth-text-secondary, #4a5568);
}
.mammoth-toggle-card--disabled {
    opacity: 0.45;
    pointer-events: none;
    cursor: default;
}
.mammoth-toggle-card--compact {
    padding: 10px 14px;
    gap: 10px;
    flex: 1;
}
.mammoth-toggle-card--compact .mammoth-toggle-card-icon { width: 24px; height: 24px; }
.mammoth-toggle-card--compact .mammoth-toggle-card-label { font-size: 13px; }
.mammoth-toggle-card--compact .mammoth-toggle-card-desc { font-size: 11px; }

/* ======================================================
   Metric cards — stat/KPI cards with optional icon
   ====================================================== */

.mammoth-metric-card {
    display: flex;
    align-items: flex-start;
    gap: 16px;
    padding: 20px 24px;
}
.mammoth-metric-card__icon {
    width: 44px;
    height: 44px;
    border-radius: 8px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    background: rgba(0, 0, 0, 0.04);
    color: var(--mammoth-text-tertiary, #64748B);
}
.mammoth-metric-card__icon .mud-icon-root {
    font-size: 22px;
}
.mammoth-metric-card__label {
    font-size: 13px;
    color: var(--mammoth-text-tertiary, #64748B);
    margin-bottom: 4px;
}
.mammoth-metric-card__value {
    font-size: 28px;
    font-weight: 700;
    letter-spacing: -0.02em;
    color: var(--mammoth-text-primary, #12263f);
}
.mammoth-metric-card__change {
    font-size: 12px;
    font-weight: 600;
    margin-top: 2px;
}
.mammoth-metric-card__change--up    { color: var(--mammoth-status-success, #22c55e); }
.mammoth-metric-card__change--down  { color: var(--mammoth-status-danger, #ef4444); }
.mammoth-metric-card__change--neutral { color: var(--mammoth-text-tertiary, #64748B); }

/* ======================================================
   Quick-action tiles — icon + label + description
   ====================================================== */

.mammoth-action-tile-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 12px;
}
@media (max-width: 768px) {
    .mammoth-action-tile-grid { grid-template-columns: repeat(2, 1fr); }
}
.mammoth-action-tile {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 10px;
    padding: 20px;
    text-align: center;
    cursor: pointer;
    text-decoration: none;
    color: var(--mammoth-text-primary, #12263f);
    border: 1px solid var(--mammoth-border, #E3EBF6);
    border-radius: 8px;
    background: var(--mammoth-bg-surface, #fff);
    transition: transform 200ms ease, box-shadow 200ms ease, border-color 200ms ease;
}
.mammoth-action-tile:hover {
    transform: translateY(-3px);
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.08);
    border-color: var(--mammoth-primary, #18B9D9);
    text-decoration: none;
}
.mammoth-action-tile__icon {
    width: 40px;
    height: 40px;
    border-radius: 8px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(0, 0, 0, 0.04);
    color: var(--mammoth-text-tertiary, #64748B);
}
.mammoth-action-tile__icon .mud-icon-root {
    font-size: 22px;
}
.mammoth-action-tile__label {
    font-size: 13px;
    font-weight: 600;
    color: var(--mammoth-text-primary, #12263f);
}
.mammoth-action-tile__desc {
    font-size: 12px;
    color: var(--mammoth-text-tertiary, #64748B);
    line-height: 1.4;
}

/* ======================================================
   Lists
   ====================================================== */

/* -- Simple List ---------------------------------------------------- */
.mammoth-list {
    list-style: none;
    padding: 0;
    margin: 0;
}

.mammoth-list__item {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 12px 16px;
    font-size: 13px;
    color: var(--mammoth-text-primary, #12263f);
    border-bottom: 1px solid var(--mammoth-border-light, #F0F4F8);
}

.mammoth-list__item:last-child { border-bottom: none; }

.mammoth-list__item-icon {
    flex-shrink: 0;
    color: var(--mammoth-text-tertiary, #64748B);
}

.mammoth-list__item-content { flex: 1; min-width: 0; }

.mammoth-list__item-primary {
    font-weight: 500;
    color: var(--mammoth-text-primary, #12263f);
    line-height: 1.4;
}

.mammoth-list__item-secondary {
    font-size: 12px;
    color: var(--mammoth-text-tertiary, #64748B);
    line-height: 1.4;
    margin-top: 1px;
}

.mammoth-list__item-action {
    flex-shrink: 0;
    color: var(--mammoth-text-tertiary, #64748B);
}

/* -- List with dividers ---------------------------------------------- */
.mammoth-list--divided .mammoth-list__item {
    border-bottom: 1px solid var(--mammoth-border, #E3EBF6);
}

/* -- Compact variant ------------------------------------------------- */
.mammoth-list--compact .mammoth-list__item {
    padding: 8px 16px;
    gap: 10px;
}

/* -- Interactive (hover) --------------------------------------------- */
.mammoth-list--interactive .mammoth-list__item {
    cursor: pointer;
    transition: background-color 150ms ease;
}

.mammoth-list--interactive .mammoth-list__item:hover {
    background-color: var(--mammoth-hover-bg, rgba(0, 0, 0, 0.02));
}

/* -- Activity List (timeline) ---------------------------------------- */
.mammoth-list--activity .mammoth-list__item {
    align-items: flex-start;
    gap: 12px;
    border-bottom: none;
    padding: 0 0 16px 0;
}

.mammoth-list--activity .mammoth-list__item:last-child { padding-bottom: 0; }

.mammoth-list__item-dot-col {
    display: flex;
    flex-direction: column;
    align-items: center;
    flex-shrink: 0;
    width: 12px;
    padding-top: 4px;
}

.mammoth-list__item-dot {
    width: 10px;
    height: 10px;
    border-radius: 50%;
    flex-shrink: 0;
}

.mammoth-list__item-dot--success { background: var(--mammoth-status-success, #48bb78); }
.mammoth-list__item-dot--warning { background: var(--mammoth-status-warning, #ed8936); }
.mammoth-list__item-dot--pending { background: var(--mammoth-status-pending, rgb(255, 212, 59)); }
.mammoth-list__item-dot--danger  { background: var(--mammoth-status-danger, #e53e3e); }
.mammoth-list__item-dot--info    { background: var(--mammoth-primary, #18B9D9); }

.mammoth-list__item-line {
    flex: 1;
    width: 2px;
    background: var(--mammoth-border-light, #F0F4F8);
    margin-top: 4px;
    min-height: 16px;
}

.mammoth-list--activity .mammoth-list__item-primary {
    font-size: 13px;
}

.mammoth-list--activity .mammoth-list__item-secondary {
    font-size: 11px;
    margin-top: 2px;
}

/* ======================================================
   Tag Toggles — Outlook-style colored squares for inline
   tag assignment in entity list rows
   ====================================================== */

.mammoth-tag-toggle {
    display: flex;
    align-items: center;
    gap: 4px;
}

.mammoth-tag-toggle__square {
    width: 14px;
    height: 14px;
    border-radius: 2px;
    border: 1.5px solid transparent;
    padding: 0;
    cursor: pointer;
    display: inline-block;
    flex-shrink: 0;
    background: transparent;
    transition: background-color 100ms ease, border-color 100ms ease;
}

.mammoth-tag-toggle__square:hover {
    filter: brightness(0.92);
}

.mammoth-tag-toggle__square--active {
    background-color: var(--mammoth-tag-bg);
    border-color: var(--mammoth-tag-border);
}

.mammoth-tag-toggle__label {
    font-size: 11px;
    font-weight: 500;
    color: var(--mammoth-text-secondary);
    margin-left: 4px;
}

/* ======================================================
   Reorder Controls — up/down arrow buttons for entity
   list row reordering
   ====================================================== */

.mammoth-reorder-controls {
    display: flex;
    gap: 2px;
    align-items: center;
}

/* ======================================================
   Toggle Buttons
   ====================================================== */

.mammoth-toggle-buttons {
    display: inline-flex;
    flex-direction: column;
}

.mammoth-toggle-buttons-label {
    display: block;
    font-size: 12px;
    color: rgba(0, 0, 0, 0.6);
    margin-bottom: 4px;
    font-family: var(--mammoth-font-family);
}

.mammoth-toggle-buttons-group {
    display: inline-flex;
}

.mammoth-toggle-btn {
    position: relative;
}

.mammoth-toggle-buttons-group .mammoth-toggle-btn--yes {
    border-radius: 6px 0 0 6px !important;
}

.mammoth-toggle-buttons-group .mammoth-toggle-btn--no {
    border-radius: 0 6px 6px 0 !important;
    margin-left: -1px;
}

/* Active (filled) button sits above outlined neighbor */
.mammoth-toggle-buttons-group .mammoth-toggle-btn--active {
    z-index: 1;
}

/* ======================================================
   Multi-select Column Filter (MammothColumnFilter)
   ====================================================== */

/* Container rendered inside MudBlazor's filter popover */
.mammoth-column-filter {
    min-width: 220px;
    max-width: 320px;
    padding: 12px;
    display: flex;
    flex-direction: column;
    gap: 8px;
}

/* Search box row */
.mammoth-column-filter__search {
    /* MudTextField handles its own spacing — wrapper keeps it contained */
}

/* Select All / Clear row */
.mammoth-column-filter__header-actions {
    display: flex;
    align-items: center;
    gap: 4px;
    padding: 0 2px;
}

.mammoth-column-filter__sep {
    color: var(--mammoth-table-header-color);
    font-size: 12px;
    line-height: 1;
}

/* Scrollable checkbox list — capped at ~10 items */
.mammoth-column-filter__list {
    max-height: 220px;
    overflow-y: auto;
    overflow-x: hidden;
    border: 1px solid var(--mud-palette-lines-default, #D2DDEC);
    border-radius: 6px;
    padding: 4px 0;
}

/* Each checkbox row */
.mammoth-column-filter__list-item {
    padding: 0 8px;
}

/* Tighten MudCheckBox label spacing inside the list */
.mammoth-column-filter__list-item .mud-checkbox {
    margin-bottom: 2px;
}

/* Active filter indicator — the filter icon turns Primary when a filter is applied */
.mud-table-head .mud-filter-icon-active {
    color: var(--mud-palette-primary) !important;
}

/* ======================================================
   Autocomplete / Search
   ====================================================== */

.mammoth-autocomplete {
    display: inline-block;
}

.mammoth-autocomplete__input-wrapper {
    position: relative;
    display: flex;
    align-items: center;
    width: 100%;
}

.mammoth-autocomplete__search-icon {
    position: absolute;
    left: 10px;
    color: currentColor;
    opacity: 0.55;
    display: flex;
    align-items: center;
    pointer-events: none;
    z-index: 1;
}

.mammoth-autocomplete__input {
    width: 100%;
    height: 36px;
    padding: 0 36px 0 34px;
    background: color-mix(in srgb, currentColor 8%, transparent);
    border: none; /* 1px solid color-mix(in srgb, currentColor 25%, transparent);*/
    border-radius: 6px;
    color: inherit;
    font-size: 14px;
    font-family: var(--mammoth-font-family);
    outline: none;
    transition: background 0.15s ease, border-color 0.15s ease;
    box-sizing: border-box;
}

.mammoth-autocomplete__input::placeholder {
    color: color-mix(in srgb, currentColor 50%, transparent);
}

.mammoth-autocomplete__input:focus {
    background: color-mix(in srgb, currentColor 12%, transparent);
    border-color: color-mix(in srgb, currentColor 40%, transparent);
}

.mammoth-autocomplete__spinner {
    position: absolute;
    right: 8px;
    display: flex;
    align-items: center;
    color: currentColor;
    opacity: 0.6;
}

/* Dropdown panel — position:fixed set via inline style so it escapes sidebar overflow */
.mammoth-autocomplete__dropdown {
    background: var(--mammoth-secondary);
    border: 1px solid rgba(255, 255, 255, 0.12);
    border-radius: 8px;
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.45);
    z-index: 99999;
    max-height: 360px;
    overflow-y: auto;
}

/* Section header */
.mammoth-autocomplete__section-header {
    padding: 10px 14px 4px;
    font-size: 10px;
    font-weight: 700;
    letter-spacing: 0.09em;
    text-transform: uppercase;
    color: var(--mammoth-text-tertiary);
    font-family: var(--mammoth-font-family);
}

/* Section divider */
.mammoth-autocomplete__divider {
    height: 1px;
    background: rgba(255, 255, 255, 0.1);
    margin: 4px 0;
}

/* Result item */
.mammoth-autocomplete__item {
    padding: 8px 14px;
    cursor: pointer;
    transition: background 0.1s ease;
}

.mammoth-autocomplete__item:hover,
.mammoth-autocomplete__item--active {
    background: rgba(255, 255, 255, 0.08);
}

.mammoth-autocomplete__item-primary {
    font-size: 14px;
    font-weight: 600;
    color: var(--mammoth-text-on-dark);
    line-height: 1.4;
}

.mammoth-autocomplete__item-secondary-row {
    display: flex;
    align-items: center;
    gap: 6px;
    margin-top: 2px;
    flex-wrap: wrap;
}

.mammoth-autocomplete__item-secondary {
    font-size: 12px;
    color: var(--mammoth-text-on-dark-muted);
    line-height: 1.3;
}

.mammoth-autocomplete__item-secondary-row .mammoth-autocomplete__badge {
    margin-left: auto;
}

.mammoth-autocomplete__search-all {
    display: flex;
    align-items: center;
    font-size: 13px;
    color: var(--mammoth-text);
    background-color:var(--mammoth-primary);
}
    .mammoth-autocomplete__search-all:hover{
        border:1px solid var(--mammoth-primary);
    }

    .mammoth-autocomplete__search-all strong {
        color: var(--mammoth-text);
        border-top-left-radius: 8px;
        border-top-right-radius: 8px;
    }

/* ======================================================
   Chart Card
   ====================================================== */

/* MudPaper wrapper — consistent padding and relative positioning for toolbar overlays */
.mammoth-chart-card {
    position: relative;
    padding: var(--mammoth-spacing-card);
    border-radius: var(--mammoth-card-radius);
    box-shadow: var(--mammoth-card-shadow);
    background: var(--mammoth-bg-surface);
}

/* Header — flex row with title left and toolbar icons right */
.mammoth-chart-card__header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 8px;
}

/* Toolbar icon group — filter, download, fullscreen, settings */
.mammoth-chart-card__toolbar {
    display: flex;
    align-items: center;
    gap: 4px;
}

.mammoth-chart-card__toolbar .mud-icon-button {
    color: var(--mammoth-table-header-color) !important;
}

/* Chart content area */
.mammoth-chart-card__body {
    width: 100%;
    min-height: 0;
}

/* ======================================================
   Widget — Fullscreen Overlay (shared by charts and grids)
   ====================================================== */

.mammoth-widget--fullscreen {
    position: fixed;
    inset: 0;
    z-index: 9999;
    background: var(--mammoth-bg-surface);
    padding: var(--mammoth-spacing-card);
    overflow: auto;
}

body:has(.mammoth-widget--fullscreen) .mud-drawer,
body:has(.mammoth-widget--fullscreen) .mud-appbar,
body:has(.mammoth-widget--fullscreen) .mammoth-settings-tab,
body:has(.mammoth-widget--fullscreen) .mammoth-actions-tab,
body:has(.mammoth-widget--fullscreen) .mammoth-actions-panel {
    z-index: 0 !important;
}

.mammoth-widget--fullscreen .mammoth-chart-card {
    height: 100%;
    border-radius: 0;
    display: flex;
    flex-direction: column;
}

.mammoth-widget--fullscreen .mammoth-chart-card .mammoth-chart-card__body {
    flex: 1;
    min-height: 0;
}

/* ======================================================
   Dashboard Grid
   ====================================================== */

/* Dashboard wrapper — consistent spacing between rows */
.mammoth-dashboard {
    display: flex;
    flex-direction: column;
    gap: var(--mammoth-spacing-form-gap);
}

/* MudGrid row margin */
.mammoth-dashboard__row {
    margin-bottom: var(--mammoth-spacing-form-gap);
}

.mammoth-dashboard__row:last-child {
    margin-bottom: 0;
}

.mammoth-html-editor-wrapper {
    display: block;
    margin-bottom: 1rem;
}

.mammoth-html-editor-label {
    display: block;
    font-size: 0.75rem;
    color: var(--mud-palette-text-secondary);
    margin-bottom: 0.25rem;
}

.mammoth-html-editor-readonly {
    border: 1px solid var(--mud-palette-lines-inputs);
    border-radius: var(--mud-default-borderradius);
    padding: 1rem;
    min-height: 4rem;
    background-color: var(--mud-palette-background);
}

/* ======================================================
   Google Places Autocomplete Dropdown
   The .pac-container is appended to <body> with default z-index 1000.
   MudBlazor and Core.UI elements render above 1000, hiding the dropdown.
   ====================================================== */
.pac-container {
    z-index: 100000 !important;
}