#main .container {
    width: 100%;
    max-width: none !important;
    margin-left: 0;
    margin-right: 0;
}

#main > .px-4 {
    padding-left: 0;
    padding-right: 0;
}

/* One page gutter for both stock admin pages and custom workspaces. */
#main > [class~="@container"] {
    padding-inline: 16px;
    min-width: 0;
}

#content > :is(#content-main, .mt-navigator, .mt-dashboard, .document-card.doc-nav) {
    padding-inline: 0;
    min-width: 0;
}

#main > div:has(#header-inner) {
    position: sticky;
    top: 0;
    z-index: 40;
}

#header-inner {
    box-sizing: border-box;
    padding-inline: 16px;
    min-width: 0;
}

#header-inner .mt-data-updated { margin-right: 0; }

body.mt-list-header-active [data-mt-header-shell] {
    height: auto;
    min-height: 4rem;
}

body.mt-list-header-active #header-inner > [data-mt-header-row] {
    gap: 12px;
    flex-wrap: nowrap;
}

body.mt-list-header-active #header-inner [data-mt-page-title] {
    flex: 0 1 auto;
    max-width: 210px;
    margin-right: 0;
}

body.mt-list-header-active #header-inner > [data-mt-header-row] > .flex.flex-row.gap-4.items-center.ml-auto {
    margin-left: 0;
}

body.mt-list-header-active #header-inner .mt-list-header-search:not([hidden]) {
    display: flex;
    align-items: center;
    flex: 1 1 725px;
    min-width: 180px;
    max-width: 785px;
    gap: 8px;
}

body.mt-list-header-active .mt-list-header-search > #toolbar,
body.mt-list-header-active .mt-list-header-search > #toolbar form {
    width: 100%;
    max-width: none;
    min-width: 0;
}

body.mt-list-header-active .mt-list-header-search > .mt-searchbar {
    width: auto;
    max-width: none;
    min-width: 0;
    flex: 1 1 320px;
}

body.mt-list-header-active .mt-list-header-search > .mt-searchbar > .mt-search {
    width: auto;
    max-width: none;
    min-width: 0;
    flex: 1 1 auto;
}

body.mt-list-header-active .mt-list-header-search > .flex.flex-col.flex-wrap {
    display: flex;
    flex: 1 1 auto;
    flex-direction: row;
    flex-wrap: nowrap;
    align-items: center;
    min-width: 0;
    margin: 0;
    padding: 0;
    border: 0;
}

body.mt-list-header-active .mt-list-header-search > .flex.flex-col.flex-wrap #toolbar,
body.mt-list-header-active .mt-list-header-search > .flex.flex-col.flex-wrap #toolbar form {
    width: 100%;
    min-width: 0;
}

body.mt-list-header-active .mt-list-header-search .mt-searchbar {
    display: flex;
    flex: 1 1 280px;
    gap: 8px;
}

body.mt-list-header-active .mt-list-header-search .mt-searchbar > .mt-search {
    flex: 1 1 auto;
}

body.mt-list-header-active .mt-list-header-search .order-date-toolbar,
body.mt-list-header-active .mt-list-header-search .doc-date-toolbar {
    flex: 0 0 auto;
}

body.mt-list-header-active .mt-list-header-actions:not([hidden]) {
    display: flex;
    align-items: center;
    flex: 0 0 auto;
    margin-left: auto;
}

body.mt-list-header-active .mt-list-header-actions.is-pinned-right {
    position: absolute;
    top: 50%;
    right: 16px;
    z-index: 2;
    width: max-content;
    margin: 0;
    transform: translateY(-50%);
}

@media (max-width: 640px) {
    body.mt-list-header-active .mt-list-header-actions.is-pinned-right { right: 8px; }
}

body.mt-list-header-active .mt-list-header-actions .mt-pagehead-actions {
    display: flex;
    align-items: center;
    flex-wrap: nowrap;
    gap: 8px;
    margin: 0;
}

body.mt-list-header-active .mt-list-table-heading-container {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
}
body.mt-list-header-active .mt-list-table-heading-container > .mt-data-updated { margin-left: auto; }
body.mt-list-header-active .mt-list-table-heading-info {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 12px;
    min-width: 0;
}
.doc-list header > .mt-data-updated { margin-left: auto; }
.mt-list-table-heading { display: flex; justify-content: flex-end; padding: 8px 12px; }
.mt-list-table-heading > .mt-data-updated { margin: 0; }

.mt-data-updated-refresh {
    display: inline-grid;
    place-items: center;
    width: 28px;
    height: 28px;
    padding: 0;
    border: 1px solid transparent;
    border-radius: 6px;
    background: transparent;
    color: inherit;
    cursor: pointer;
}

.mt-data-updated-refresh:hover,
.mt-data-updated-refresh:focus-visible {
    border-color: var(--color-base-300, #cbd5e1);
    background: rgba(148, 163, 184, 0.12);
    outline: none;
}

.mt-data-updated-refresh:disabled { cursor: wait; opacity: .65; }

@media (max-width: 900px) {
    body.mt-list-header-active [data-mt-header-shell] { padding-block: 8px; }
    body.mt-list-header-active #header-inner > [data-mt-header-row] { flex-wrap: wrap; }
    body.mt-list-header-active #header-inner [data-mt-page-title] { flex: 1 1 140px; max-width: 100%; order: 1; }
    body.mt-list-header-active #header-inner .mt-list-header-search:not([hidden]) { flex: 1 1 100%; min-width: 0; max-width: 100%; order: 3; }
    body.mt-list-header-active #header-inner > [data-mt-header-row] > .flex.flex-row.gap-4.items-center.ml-auto { margin-left: 0; order: 4; }
    body.mt-list-header-active .mt-list-header-actions:not([hidden]) { margin-left: auto; margin-right: 16px; order: 5; }
}

@media (max-width: 640px) {
    #header-inner { padding-inline: 8px; }
    #main > [class~="@container"] { padding-inline: 8px; }
}

.mt-filters {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-end;
    gap: 16px 20px;
}

.mt-filters > .mt-field {
    flex: 0 1 220px;
    min-width: 0;
}

.mt-filters > .mt-field-wide,
.mt-filters > .mt-field-grow {
    flex: 1 1 360px;
    min-width: 0;
}

.mt-filters > .mt-field-narrow {
    flex: 0 0 110px;
}

.mt-filters > .mt-field-auto {
    flex: 0 1 auto;
    min-width: 0;
}

.mt-segmented {
    display: inline-flex;
    flex-wrap: wrap;
    gap: 2px;
    padding: 3px;
    border: 1px solid var(--color-base-200, #e2e8f0);
    border-radius: var(--border-radius, 8px);
    background: var(--color-base-100, #f1f5f9);
}

.dark .mt-segmented {
    border-color: var(--color-base-700, #334155);
    background: var(--color-base-950, #020617);
}

.mt-segment {
    height: 30px;
    padding: 0 12px;
    border-radius: calc(var(--border-radius, 8px) - 2px);
    color: var(--color-base-600, #475569);
    font-size: 0.875rem;
    font-weight: 500;
    white-space: nowrap;
    cursor: pointer;
    transition: background-color 0.15s ease, color 0.15s ease;
}

.mt-segment:hover {
    color: var(--color-base-900, #0f172a);
}

.mt-segment.is-active {
    background: var(--color-white, #fff);
    color: var(--color-primary-600, #2563eb);
    font-weight: 600;
    box-shadow: 0 1px 2px rgb(15 23 42 / 0.12);
}

.dark .mt-segment {
    color: var(--color-base-300, #cbd5e1);
}

.dark .mt-segment:hover {
    color: var(--color-white, #fff);
}

.dark .mt-segment.is-active {
    background: var(--color-base-800, #1e293b);
    color: var(--color-primary-400, #60a5fa);
    box-shadow: none;
}

.mt-segment:focus-visible {
    outline: 2px solid var(--color-primary-500, #3b82f6);
    outline-offset: 1px;
}

.mt-datepicker {
    position: relative;
}

.mt-datepicker-trigger {
    display: flex;
    align-items: center;
    gap: 8px;
    width: 100%;
    min-width: 260px;
    height: 38px;
    padding: 0 10px 0 12px;
    border: 1px solid var(--color-base-300, #cbd5e1);
    border-radius: var(--border-radius, 8px);
    background: var(--color-white, #fff);
    color: var(--color-base-900, #0f172a);
    font-size: 0.875rem;
    text-align: left;
    cursor: pointer;
    transition: border-color 0.15s ease, box-shadow 0.15s ease;
}

.dark .mt-datepicker-trigger {
    border-color: var(--color-base-700, #334155);
    background: var(--color-base-950, #020617);
    color: var(--color-base-100, #f1f5f9);
}

.mt-datepicker-trigger:hover {
    border-color: var(--color-base-400, #94a3b8);
}

.mt-datepicker.is-active .mt-datepicker-trigger,
.mt-datepicker.is-open .mt-datepicker-trigger,
.mt-datepicker-trigger:focus-visible {
    border-color: var(--color-primary-500, #3b82f6);
    box-shadow: 0 0 0 3px color-mix(in oklab, var(--color-primary-500, #3b82f6) 18%, transparent);
    outline: none;
}

.mt-datepicker-icon {
    color: var(--color-base-400, #94a3b8);
    font-size: 20px;
}

.mt-datepicker.is-active .mt-datepicker-icon,
.mt-datepicker.is-open .mt-datepicker-icon {
    color: var(--color-primary-600, #2563eb);
}

.mt-datepicker-value {
    flex: 1;
    min-width: 0;
    overflow: hidden;
    font-weight: 500;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.mt-datepicker-value.is-empty {
    color: var(--color-base-500, #64748b);
    font-weight: 400;
}

.mt-datepicker-chevron {
    color: var(--color-base-500, #64748b);
    font-size: 20px;
    transition: transform 0.15s ease;
}

.mt-datepicker.is-open .mt-datepicker-chevron {
    transform: rotate(180deg);
}

.mt-datepicker-panel {
    position: absolute;
    top: calc(100% + 8px);
    left: 0;
    z-index: 60;
    width: min(320px, calc(100vw - 32px));
    padding: 18px 16px 16px;
    border: 1px solid var(--color-base-200, #e2e8f0);
    border-radius: 16px;
    background: var(--color-white, #fff);
    box-shadow: 0 18px 40px rgb(15 23 42 / 0.14), 0 2px 6px rgb(15 23 42 / 0.06);
}

.mt-datepicker-panel.is-right {
    right: 0;
    left: auto;
}

.dark .mt-datepicker-panel {
    border-color: var(--color-base-700, #334155);
    background: var(--color-base-900, #0f172a);
    box-shadow: 0 18px 40px rgb(0 0 0 / 0.45);
}

.mt-cal-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin: 0 4px 12px;
}

.mt-cal-title {
    color: var(--color-base-900, #0f172a);
    font-size: 1.05rem;
    font-weight: 600;
}

.dark .mt-cal-title {
    color: var(--color-base-50, #f8fafc);
}

.mt-cal-nav {
    display: flex;
    gap: 4px;
}

.mt-cal-nav button {
    display: inline-grid;
    place-content: center;
    width: 32px;
    height: 32px;
    border-radius: 999px;
    color: var(--color-base-700, #334155);
    cursor: pointer;
}

.dark .mt-cal-nav button {
    color: var(--color-base-200, #e2e8f0);
}

.mt-cal-nav button:hover {
    background: var(--color-base-100, #f1f5f9);
}

.dark .mt-cal-nav button:hover {
    background: var(--color-base-800, #1e293b);
}

.mt-cal-weekdays,
.mt-cal-grid {
    display: grid;
    grid-template-columns: repeat(7, minmax(0, 1fr));
}

.mt-cal-weekdays span {
    padding-bottom: 6px;
    color: var(--color-base-400, #94a3b8);
    font-size: 0.75rem;
    font-weight: 600;
    text-align: center;
}

.mt-cal-grid {
    row-gap: 4px;
}

.mt-cal-day {
    position: relative;
    z-index: 0;
    display: grid;
    place-items: center;
    height: 38px;
    color: var(--color-base-800, #1e293b);
    font-size: 0.875rem;
    font-weight: 500;
    cursor: pointer;
}

.dark .mt-cal-day {
    color: var(--color-base-100, #f1f5f9);
}

.mt-cal-day > span {
    display: grid;
    place-items: center;
    width: 36px;
    height: 36px;
    border-radius: 999px;
    transition: background-color 0.12s ease, color 0.12s ease;
}

.mt-cal-day:hover > span {
    background: var(--color-base-100, #f1f5f9);
}

.dark .mt-cal-day:hover > span {
    background: var(--color-base-800, #1e293b);
}

.mt-cal-day.is-today > span {
    box-shadow: inset 0 0 0 1px var(--color-primary-400, #60a5fa);
    color: var(--color-primary-600, #2563eb);
    font-weight: 700;
}

.mt-cal-day.is-in-range::before,
.mt-cal-day.is-start.has-range::before,
.mt-cal-day.is-end.has-range::before {
    position: absolute;
    inset: 1px 0;
    z-index: -1;
    background: color-mix(in oklab, var(--color-primary-500, #3b82f6) 12%, transparent);
    content: "";
}

.mt-cal-day.is-start.has-range::before {
    left: 50%;
}

.mt-cal-day.is-end.has-range::before {
    right: 50%;
}

.mt-cal-day.is-in-range:nth-child(7n + 1)::before,
.mt-cal-day.is-in-range[data-date$="-01"]::before {
    left: 3px;
    border-radius: 999px 0 0 999px;
}

.mt-cal-day.is-in-range:nth-child(7n)::before,
.mt-cal-day.is-in-range:last-child::before {
    right: 3px;
    border-radius: 0 999px 999px 0;
}

.mt-cal-day.is-in-range[data-date$="-01"]:nth-child(7n)::before,
.mt-cal-day.is-in-range:nth-child(7n + 1):last-child::before {
    border-radius: 999px;
}

.mt-cal-day.is-in-range > span {
    color: var(--color-primary-700, #1d4ed8);
}

.dark .mt-cal-day.is-in-range > span {
    color: var(--color-primary-300, #93c5fd);
}

.mt-cal-day.is-start > span,
.mt-cal-day.is-end > span {
    background: var(--color-primary-600, #2563eb);
    box-shadow: 0 4px 10px color-mix(in oklab, var(--color-primary-600, #2563eb) 35%, transparent);
    color: #fff;
    font-weight: 700;
}

.mt-cal-day.is-preview > span {
    background: color-mix(in oklab, var(--color-primary-500, #3b82f6) 22%, transparent);
    box-shadow: none;
    color: var(--color-primary-700, #1d4ed8);
}

.dark .mt-cal-day.is-preview > span {
    color: var(--color-primary-200, #bfdbfe);
}

.mt-cal-day:focus-visible {
    outline: none;
}

.mt-cal-day:focus-visible > span {
    outline: 2px solid var(--color-primary-500, #3b82f6);
    outline-offset: 1px;
}

.mt-cal-selection {
    margin: 12px 4px 0;
    color: var(--color-base-500, #64748b);
    font-size: 0.8rem;
    text-align: center;
}

.mt-cal-actions {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 10px;
    margin-top: 14px;
}

.mt-cal-actions button {
    height: 40px;
    border-radius: 999px;
    font-size: 0.875rem;
    font-weight: 600;
    cursor: pointer;
    transition: background-color 0.15s ease, box-shadow 0.15s ease;
}

.mt-cal-clear {
    background: var(--color-base-100, #f1f5f9);
    color: var(--color-base-700, #334155);
}

.mt-cal-clear:hover {
    background: var(--color-base-200, #e2e8f0);
}

.dark .mt-cal-clear {
    background: var(--color-base-800, #1e293b);
    color: var(--color-base-100, #f1f5f9);
}

.dark .mt-cal-clear:hover {
    background: var(--color-base-700, #334155);
}

.mt-cal-done {
    background: var(--color-primary-600, #2563eb);
    box-shadow: 0 8px 18px color-mix(in oklab, var(--color-primary-600, #2563eb) 30%, transparent);
    color: #fff;
}

.mt-cal-done:hover {
    background: var(--color-primary-700, #1d4ed8);
}

.mt-cal-actions button:focus-visible,
.mt-cal-nav button:focus-visible {
    outline: 2px solid var(--color-primary-500, #3b82f6);
    outline-offset: 2px;
}

@media (max-width: 639px) {
    .mt-datepicker-trigger {
        min-width: 0;
    }

    .mt-filters > .mt-field-auto:has(.mt-datepicker) {
        flex-basis: 100%;
    }
}

.mt-filters > .mt-actions {
    display: flex;
    gap: 8px;
}

.mt-filters > .mt-checks {
    display: flex;
    flex-wrap: wrap;
    gap: 8px 20px;
    padding-bottom: 8px;
}

.mt-pagehead {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 12px 20px;
}

.mt-pagehead > .mt-pagehead-title {
    flex: 0 0 auto;
}

.mt-pagehead > .mt-search {
    flex: 1 1 280px;
    max-width: 520px;
    min-height: 42px;
}

.mt-pagehead > .mt-pagehead-actions {
    align-items: center;
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-left: auto;
}

.mt-search-leading-icon {
    position: absolute;
    left: 12px;
    top: 50%;
    transform: translateY(-50%);
    font-size: 20px;
    color: #94a3b8;
    pointer-events: none;
}
.mt-data-updated {
    display: inline-flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 4px;
    font-size: 12px;
    color: #64748b;
    margin-right: 8px;
}
.mt-data-updated .material-symbols-outlined { font-size: 16px; }
.mt-data-updated time { white-space: nowrap; }
.dark .mt-data-updated { color: #94a3b8; }

.mt-navigator { padding-inline: 16px; min-width: 0; gap: 16px; }
.mt-navigator .mt-navigator-stats { gap: 8px; }
.mt-navigator .mt-navigator-stats > div {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 10px 14px;
    min-width: 0;
}
.mt-navigator .mt-navigator-stats > div > :first-child { font-size: 12px; }
.mt-navigator .mt-navigator-stats > div > :last-child {
    margin-top: 0;
    font-size: 20px;
    line-height: 1.25;
}
@media (max-width: 640px) {
    .mt-navigator { padding-inline: 8px; }
}

.mt-search-submit {
    display: inline-grid;
    flex: none;
    place-content: center;
    width: 34px;
    height: 34px;
    margin-right: -9px;
    border-radius: calc(var(--border-radius, 8px) - 2px);
    background: var(--color-primary-600, #2563eb);
    color: #fff;
    cursor: pointer;
    transition: background-color 0.15s ease;
}

.mt-search-submit:hover {
    background: var(--color-primary-700, #1d4ed8);
}

.mt-search-submit .material-symbols-outlined {
    font-size: 20px;
}

.mt-pagehead > .mt-searchbar {
    display: flex;
    flex: 1 1 340px;
    gap: 8px;
    max-width: 640px;
}

.mt-searchbar > .mt-search {
    flex: 1;
    min-width: 0;
    min-height: 42px;
}

.mt-pagehead .mt-search {
    height: 42px;
    min-height: 42px;
}

.mt-pagehead .mt-search input {
    height: 100%;
    padding: 0;
}

.mt-filter-menu > .mt-menu-button {
    padding: 0 14px;
}

.mt-filter-menu[open] > .mt-menu-button {
    border-color: var(--color-primary-500, #3b82f6);
    color: var(--color-primary-600, #2563eb);
}

.mt-menu-panel.mt-filter-panel {
    width: min(340px, calc(100vw - 32px));
    padding: 16px;
}

.mt-filter-panel-form {
    display: flex;
    flex-direction: column;
    gap: 14px;
}

.mt-menu-panel.mt-filter-panel--wide {
    width: min(560px, calc(100vw - 32px));
}

.mt-filter-panel-columns {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: 14px 16px;
}

.mt-filter-stack {
    display: flex;
    flex-direction: column;
    gap: 10px;
    min-width: 0;
}

.mt-filter-group {
    display: flex;
    flex-direction: column;
    gap: 10px;
    min-width: 0;
    margin: 0;
    padding: 12px;
    border: 1px solid var(--color-base-200, #e2e8f0);
    border-radius: var(--border-radius, 8px);
}

.dark .mt-filter-group {
    border-color: var(--color-base-800, #1e293b);
}

.mt-filter-group > legend {
    padding: 0 4px;
    color: var(--color-base-700, #334155);
    font-size: 13px;
    font-weight: 600;
}

.dark .mt-filter-group > legend {
    color: var(--color-base-200, #e2e8f0);
}

.mt-check {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    color: var(--color-base-700, #334155);
    font-size: 14px;
    cursor: pointer;
}

.dark .mt-check {
    color: var(--color-base-200, #e2e8f0);
}

.mt-filter-panel-actions {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 8px;
    padding-top: 14px;
    border-top: 1px solid var(--color-base-200, #e2e8f0);
}

.dark .mt-filter-panel-actions {
    border-color: var(--color-base-800, #1e293b);
}

.mt-filter-reset,
.mt-filter-apply {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    height: 38px;
    border-radius: var(--border-radius, 8px);
    font-size: 14px;
    font-weight: 600;
    cursor: pointer;
}

.mt-filter-reset {
    border: 1px solid var(--color-base-200, #e2e8f0);
    color: var(--color-base-700, #334155);
}

.mt-filter-reset:hover {
    background: var(--color-base-50, #f8fafc);
}

.dark .mt-filter-reset {
    border-color: var(--color-base-700, #334155);
    color: var(--color-base-100, #f1f5f9);
}

.dark .mt-filter-reset:hover {
    background: var(--color-base-800, #1e293b);
}

.mt-filter-apply {
    background: var(--color-primary-600, #2563eb);
    color: #fff;
}

.mt-filter-apply:hover {
    background: var(--color-primary-700, #1d4ed8);
}

.mt-filter-reset:focus-visible,
.mt-filter-apply:focus-visible {
    outline: 2px solid var(--color-primary-500, #3b82f6);
    outline-offset: 2px;
}

.mt-iconbtn {
    display: inline-grid;
    place-content: center;
    width: 42px;
    height: 42px;
    border: 1px solid var(--color-base-200, #e2e8f0);
    border-radius: var(--border-radius, 8px);
    background: var(--color-white, #fff);
    color: var(--color-base-700, #334155);
    transition: background-color 0.15s ease, color 0.15s ease;
}

.dark .mt-iconbtn {
    border-color: var(--color-base-700, #334155);
    background: var(--color-base-900, #0f172a);
    color: var(--color-base-100, #f1f5f9);
}

.mt-iconbtn:hover {
    color: var(--color-primary-600, #2563eb);
    background: var(--color-base-50, #f8fafc);
}

.dark .mt-iconbtn:hover {
    background: var(--color-base-800, #1e293b);
}

.mt-iconbtn:focus-visible,
.mt-search-submit:focus-visible {
    outline: 2px solid var(--color-primary-500, #3b82f6);
    outline-offset: 2px;
}

@media (max-width: 639px) {
    .mt-pagehead > .mt-searchbar {
        flex-basis: 100%;
        max-width: none;
        order: 3;
    }

    .mt-pagehead > .mt-search {
        flex-basis: 100%;
        max-width: none;
        order: 3;
    }
}

.mt-menu {
    position: relative;
}

.mt-menu > summary {
    list-style: none;
}

.mt-menu > summary::-webkit-details-marker {
    display: none;
}

.mt-menu-button {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    height: 42px;
    padding: 0 12px 0 16px;
    border: 1px solid var(--color-base-200, #e2e8f0);
    border-radius: var(--border-radius, 8px);
    background: var(--color-white, #fff);
    color: var(--color-base-700, #334155);
    font-size: 14px;
    font-weight: 500;
    cursor: pointer;
}

.dark .mt-menu-button {
    border-color: var(--color-base-700, #334155);
    background: var(--color-base-900, #0f172a);
    color: var(--color-base-100, #f1f5f9);
}

.mt-menu-button:focus-visible {
    outline: 2px solid var(--color-primary-500, #3b82f6);
    outline-offset: 2px;
}

.mt-menu[open] .mt-menu-button .material-symbols-outlined {
    transform: rotate(180deg);
}

.mt-menu-panel {
    position: absolute;
    top: calc(100% + 6px);
    right: 0;
    z-index: 1100;
    min-width: 230px;
    padding: 6px;
    border: 1px solid var(--color-base-200, #e2e8f0);
    border-radius: var(--border-radius, 8px);
    background: var(--color-white, #fff);
    box-shadow: 0 12px 28px -8px rgba(15, 23, 42, 0.35);
}

.dark .mt-menu-panel {
    border-color: var(--color-base-700, #334155);
    background: var(--color-base-900, #0f172a);
}

.mt-menu-item {
    display: flex;
    align-items: center;
    gap: 10px;
    width: 100%;
    padding: 9px 10px;
    border-radius: calc(var(--border-radius, 8px) - 2px);
    color: var(--color-base-700, #334155);
    font-size: 14px;
    text-align: left;
    cursor: pointer;
}

.dark .mt-menu-item {
    color: var(--color-base-100, #f1f5f9);
}

.mt-menu-item:hover,
.mt-menu-item:focus-visible {
    background: var(--color-base-100, #f1f5f9);
    color: var(--color-primary-600, #2563eb);
    outline: none;
}

.dark .mt-menu-item:hover,
.dark .mt-menu-item:focus-visible {
    background: var(--color-base-800, #1e293b);
    color: var(--color-primary-400, #60a5fa);
}

.mt-row-link {
    cursor: pointer;
}

.mt-row-link:hover {
    background: color-mix(in oklab, var(--color-primary-500, #3b82f6) 6%, transparent);
}

/* Keep the same row rhythm in navigators, detail tables and Django inlines. */
#content {
    --mt-table-row-surface: #fff;
    --mt-table-row-stripe: #f1f5f9;
}

.dark #content {
    --mt-table-row-surface: transparent;
    --mt-table-row-stripe: rgb(255 255 255 / 0.05);
}

#content table > tbody > tr {
    --mt-row-surface: var(--mt-table-row-surface);
}

/* History panels and empty states do not consume a stripe. */
#content table:not(.result-list, .tabular-table) > tbody > tr:nth-child(even of tr:not([hidden], .hidden, .empty-form):not(:has(> :is(td, th)[colspan]:only-child))) {
    --mt-row-surface: var(--mt-table-row-stripe);
}

/* Unfold renders each record (and each inline form) in its own tbody. */
#content :is(table.result-list, table.tabular-table) > tbody:where(:not([class*="bg-"]:not([class*="bg-white"], [class*="bg-base-"], [class*="bg-transparent"]))) {
    background-color: transparent;
}

#content table.result-list > tbody:nth-child(even of tbody:has(> .data-row:not([hidden], .hidden))) > .data-row,
#content table.tabular-table > tbody:nth-child(even of tbody:has(> .form-row:not([hidden], .hidden, .empty-form))) > .form-row {
    --mt-row-surface: var(--mt-table-row-stripe);
}

/* Preserve hover/focus, selection, validation and explicitly coloured rows. */
#content table > tbody > tr:where(
    :not(:hover, :focus-within, :focus-visible, [hidden], .hidden, .empty-form,
        .selected, .error, .errors, .row-form-errors, [aria-selected="true"],
        [style*="background"],
        [class*="bg-"]:not([class*="bg-white"], [class*="bg-base-"], [class*="bg-transparent"]),
        [class*="bg-primary-"], [class*="bg-red-"], [class*="bg-green-"],
        [class*="bg-amber-"], [class*="bg-yellow-"], [class*="bg-orange-"],
        [class*="bg-emerald-"], [class*="bg-rose-"],
        :has(> :is(td, th)[colspan]:only-child),
        :has(> .error, > .errors, .errorlist, input.action-select:checked))
) {
    background-color: var(--mt-row-surface);
}

.mt-search {
    position: relative;
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 0 14px;
    min-height: 48px;
    border: 1px solid var(--color-base-300, #cbd5e1);
    border-radius: var(--border-radius, 8px);
    background: var(--color-white, #fff);
    transition: border-color 0.15s ease, box-shadow 0.15s ease;
}

.dark .mt-search {
    border-color: var(--color-base-700, #334155);
    background: var(--color-base-950, #020617);
}

.mt-search:focus-within {
    border-color: var(--color-primary-500, #3b82f6);
    box-shadow: 0 0 0 3px color-mix(in oklab, var(--color-primary-500, #3b82f6) 20%, transparent);
}

.mt-search input {
    flex: 1;
    width: 100%;
    min-width: 0;
    border: 0;
    padding: 12px 0;
    background: transparent;
    font-size: 15px;
    outline: none;
}

.mt-search.mt-search-with-icon input { padding-left: 28px; }

.mt-more > summary {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 8px 12px;
    border-radius: var(--border-radius, 8px);
    font-size: 14px;
    font-weight: 500;
    color: var(--color-primary-600, #2563eb);
    cursor: pointer;
    list-style: none;
    user-select: none;
}

.dark .mt-more > summary {
    color: var(--color-primary-400, #60a5fa);
}

.mt-more > summary::-webkit-details-marker {
    display: none;
}

.mt-more > summary:hover {
    background: color-mix(in oklab, var(--color-primary-500, #3b82f6) 10%, transparent);
}

.mt-more > summary:focus-visible {
    outline: 2px solid var(--color-primary-500, #3b82f6);
    outline-offset: 2px;
}

.mt-more-chevron {
    font-size: 20px;
    transition: transform 0.15s ease;
}

.mt-more[open] .mt-more-chevron {
    transform: rotate(180deg);
}

.mt-more-count {
    min-width: 20px;
    padding: 0 6px;
    border-radius: 999px;
    background: var(--color-primary-600, #2563eb);
    color: #fff;
    font-size: 12px;
    line-height: 20px;
    text-align: center;
}

.mt-more-body {
    margin-top: 12px;
    padding: 20px;
    border: 1px solid var(--color-base-200, #e2e8f0);
    border-radius: var(--border-radius, 8px);
    background: color-mix(in oklab, var(--color-base-50, #f8fafc) 70%, transparent);
}

.mt-more-body .mt-filters > .mt-field {
    flex: 1 1 180px;
}

.dark .mt-more-body {
    border-color: var(--color-base-800, #1e293b);
    background: color-mix(in oklab, var(--color-base-950, #020617) 40%, transparent);
}

.mt-form input[type="checkbox"] {
    appearance: none;
    -webkit-appearance: none;
    flex: 0 0 auto;
    display: inline-grid;
    place-content: center;
    width: 18px;
    height: 18px;
    margin: 0;
    border: 1.5px solid var(--color-base-400, #94a3b8);
    border-radius: 5px;
    background: var(--color-white, #fff);
    cursor: pointer;
    transition: background-color 0.15s ease, border-color 0.15s ease;
}

.dark .mt-form input[type="checkbox"] {
    border-color: var(--color-base-500, #64748b);
    background: var(--color-base-950, #020617);
}

.mt-form input[type="checkbox"]::after {
    content: "";
    width: 10px;
    height: 10px;
    background: #fff;
    clip-path: polygon(14% 44%, 0 65%, 50% 100%, 100% 16%, 80% 0, 43% 62%);
    transform: scale(0);
    transition: transform 0.12s ease;
}

.mt-form input[type="checkbox"]:hover {
    border-color: var(--color-primary-500, #3b82f6);
}

.mt-form input[type="checkbox"]:checked {
    border-color: var(--color-primary-600, #2563eb);
    background: var(--color-primary-600, #2563eb);
}

.mt-form input[type="checkbox"]:checked::after {
    transform: scale(1);
}

.mt-form input[type="checkbox"]:focus-visible {
    outline: 2px solid var(--color-primary-500, #3b82f6);
    outline-offset: 2px;
}

.mt-pair {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 220px));
    gap: 12px;
}

.mt-cards {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(var(--mt-card-min, 180px), 100%), 1fr));
    gap: 12px;
}

.mt-split {
    display: grid;
    gap: 24px;
}

@media (min-width: 1280px) {
    .mt-split {
        grid-template-columns: minmax(0, 1.3fr) minmax(0, 1fr);
    }
}

@media (max-width: 639px) {
    .mt-filters > .mt-field,
    .mt-filters > .mt-field-wide,
    .mt-filters > .mt-field-grow {
        flex-basis: 100%;
        max-width: none;
    }

    .mt-filters > .mt-actions {
        flex-basis: 100%;
    }

    .mt-filters > .mt-actions > * {
        flex: 1 1 auto;
        justify-content: center;
    }

    .mt-pair {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

#nav-sidebar,
#nav-sidebar * {
    scrollbar-width: thin;
    scrollbar-color: var(--color-base-300, #cbd5e1) transparent;
}

.dark #nav-sidebar,
.dark #nav-sidebar * {
    scrollbar-color: var(--color-base-700, #334155) transparent;
}

#nav-sidebar::-webkit-scrollbar,
#nav-sidebar *::-webkit-scrollbar {
    width: 6px;
    height: 6px;
}

#nav-sidebar::-webkit-scrollbar-track,
#nav-sidebar *::-webkit-scrollbar-track {
    background: transparent;
}

#nav-sidebar::-webkit-scrollbar-thumb,
#nav-sidebar *::-webkit-scrollbar-thumb {
    background: var(--color-base-300, #cbd5e1);
    border-radius: 999px;
}

#nav-sidebar::-webkit-scrollbar-thumb:hover,
#nav-sidebar *::-webkit-scrollbar-thumb:hover {
    background: var(--color-primary-500, #3b82f6);
}

.dark #nav-sidebar::-webkit-scrollbar-thumb,
.dark #nav-sidebar *::-webkit-scrollbar-thumb {
    background: var(--color-base-700, #334155);
}

#nav-sidebar::-webkit-scrollbar-button,
#nav-sidebar *::-webkit-scrollbar-button {
    display: none;
}

@media (max-width: 1279px) {
    #nav-sidebar { max-width: min(88vw, 360px); }
    .mt-nav-enter,
    .mt-nav-leave { transition: transform .2s ease, opacity .2s ease; }
    .mt-nav-enter-start,
    .mt-nav-leave-end { transform: translateX(-100%); opacity: .92; }
    .mt-nav-enter-end,
    .mt-nav-leave-start { transform: translateX(0); opacity: 1; }
}

@media (min-width: 1280px) {
    .mt-nav-enter,
    .mt-nav-leave { transition: none; }
    .mt-nav-enter-start,
    .mt-nav-enter-end,
    .mt-nav-leave-start,
    .mt-nav-leave-end { transform: none; opacity: 1; }
}