:root {
    --mcl-surface: #f5f3f0;
    --mcl-surface-muted: #ede9e3;
    --mcl-text: #1a1a1a;
    --mcl-muted: #8b8578;
    --mcl-divider: #d6d2c4;
    --mcl-grid: #e0ddd6;
    --mcl-gold: #a08530;
    --mcl-p1: #a85c2f;
    --mcl-p2: #506a80;
}

.dark {
    --mcl-surface: #1a1a1a;
    --mcl-surface-muted: #171717;
    --mcl-text: #f2efea;
    --mcl-muted: #9b9588;
    --mcl-divider: #333330;
    --mcl-grid: #2a2a28;
    --mcl-gold: #c9a84c;
    --mcl-p1: #c4723d;
    --mcl-p2: #7b8ea8;
}

.fi-body,
.fi-layout,
.fi-main-ctn {
    color: var(--mcl-text);
}

.fi-section,
.fi-ta-ctn,
.fi-wi-widget,
.fi-modal-window {
    background: var(--mcl-surface);
    border-color: var(--mcl-grid);
}

.fi-section-header,
.fi-ta-header,
.fi-in-header,
.fi-wi-header {
    border-color: var(--mcl-divider);
}

.fi-header-heading,
.fi-section-header-heading,
.fi-ta-header-heading,
.fi-in-header-heading,
.fi-wi-header-heading,
.fi-modal-heading {
    color: var(--mcl-text);
}

.fi-section-description,
.fi-header-subheading,
.fi-ta-header-description,
.fi-in-description,
.fi-wi-stats-overview-stat-description {
    color: var(--mcl-muted);
}

.fi-btn.fi-btn-color-primary {
    background: var(--mcl-p1);
    border-color: var(--mcl-p1);
    color: #fff;
}

.fi-btn.fi-btn-color-primary:hover {
    filter: brightness(0.95);
}

.fi-tabs-item,
.fi-tabs-item-btn {
    color: var(--mcl-muted);
}

.fi-tabs-item.fi-active .fi-tabs-item-btn,
.fi-tabs-item-btn[aria-selected='true'] {
    color: var(--mcl-p1);
}

.fi-badge.fi-color-primary {
    background: color-mix(in srgb, var(--mcl-p1) 15%, transparent);
    color: var(--mcl-p1);
    border-color: color-mix(in srgb, var(--mcl-p1) 35%, transparent);
}

.fi-badge.fi-color-success {
    background: color-mix(in srgb, var(--mcl-p2) 15%, transparent);
    color: var(--mcl-p2);
    border-color: color-mix(in srgb, var(--mcl-p2) 35%, transparent);
}

.fi-link,
a.fi-link {
    color: var(--mcl-p1);
}

.fi-link:hover,
a.fi-link:hover {
    filter: brightness(0.92);
}

.mcl-shell {
    background: var(--mcl-surface);
    color: var(--mcl-text);
    border: 1px solid var(--mcl-grid);
    border-radius: 4px;
    box-shadow: 0 2px 12px rgba(0, 0, 0, 0.08);
}

.mcl-title-kicker {
    font-size: 0.72rem;
    font-weight: 900;
    color: var(--mcl-muted);
    letter-spacing: 0.2em;
    text-transform: uppercase;
}

.mcl-accent-bar {
    height: 4px;
    background: linear-gradient(90deg, var(--mcl-surface) 0%, var(--mcl-accent, var(--mcl-p1)) 50%, var(--mcl-surface) 100%);
}

.mcl-accent-bar-thin {
    height: 2px;
    background: linear-gradient(90deg, var(--mcl-surface) 0%, var(--mcl-accent, var(--mcl-p1)) 50%, var(--mcl-surface) 100%);
}

.mcl-btn-outline {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.4rem;
    padding: 0.75rem 2rem;
    border-radius: 0;
    background: transparent;
    color: var(--mcl-accent, var(--mcl-p1));
    border: 2px solid var(--mcl-accent, var(--mcl-p1));
    font-size: 0.72rem;
    font-weight: 900;
    letter-spacing: 0.2em;
    text-transform: uppercase;
    cursor: pointer;
    transition: all 0.2s ease;
}

.mcl-btn-outline:hover {
    background: var(--mcl-accent, var(--mcl-p1));
    color: var(--mcl-surface);
}

/**
 * Google OAuth on Filament auth (register / invite activate).
 * Layout uses plain CSS so it works even when Filament’s compiled Tailwind bundle
 * does not include every utility from custom Blade views (run `php artisan filament:assets` after UI changes).
 */
.mcl-google-oauth-wrap {
    width: 100%;
    max-width: 100%;
    margin-bottom: 1.5rem;
}

.mcl-google-oauth-inner {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    gap: 0.75rem;
    width: 100%;
}

a.mcl-google-oauth-btn {
    box-sizing: border-box;
    display: flex;
    flex-direction: row;
    flex-wrap: nowrap;
    align-items: center;
    justify-content: center;
    width: 100%;
    max-width: 100%;
    gap: 0.75rem;
    padding: 0.75rem 1rem;
    border-radius: 0.75rem;
    border: 1px solid #d1d5db;
    background: #fff;
    color: #111827;
    font-size: 0.875rem;
    font-weight: 600;
    line-height: 1.25rem;
    text-decoration: none;
    box-shadow: 0 1px 2px 0 rgb(0 0 0 / 0.05);
    transition: background-color 75ms ease;
}

a.mcl-google-oauth-btn:hover {
    background: #f9fafb;
}

.dark a.mcl-google-oauth-btn {
    border-color: rgb(255 255 255 / 0.2);
    background: #030712;
    color: #fff;
}

.dark a.mcl-google-oauth-btn:hover {
    background: rgb(255 255 255 / 0.1);
}

a.mcl-google-oauth-btn svg {
    flex-shrink: 0;
    width: 24px;
    height: 24px;
    display: block;
}

.mcl-google-oauth-divider {
    position: relative;
    width: 100%;
}

.mcl-google-oauth-divider-line {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    pointer-events: none;
}

.mcl-google-oauth-divider-line > div {
    width: 100%;
    border-top: 1px solid #e5e7eb;
}

.dark .mcl-google-oauth-divider-line > div {
    border-top-color: rgb(255 255 255 / 0.1);
}

.mcl-google-oauth-divider-label {
    position: relative;
    display: flex;
    justify-content: center;
    align-items: center;
}

.mcl-google-oauth-divider-label span {
    background: #fff;
    padding: 0 0.75rem;
    font-size: 0.75rem;
    font-weight: 500;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: #6b7280;
}

.dark .mcl-google-oauth-divider-label span {
    background: #030712;
    color: #9ca3af;
}

/**
 * Scheduling page “week at a glance” tables (below combat calendar).
 * Uses plain CSS + MCL variables — Filament’s panel bundle does not include
 * arbitrary Tailwind utilities from custom Blade partials.
 */
.mcl-scheduling-agenda-stack {
    margin-top: 2.5rem;
    display: flex;
    flex-direction: column;
    gap: 1.5rem;
}

.mcl-scheduling-agenda {
    border-radius: 0.75rem;
    border: 1px solid var(--mcl-grid);
    background: var(--mcl-surface);
    color: var(--mcl-text);
    box-shadow: 0 1px 3px rgb(0 0 0 / 0.08);
    overflow: hidden;
}

.mcl-scheduling-agenda__header {
    border-bottom: 1px solid var(--mcl-grid);
    padding: 0.75rem 1rem;
}

.mcl-scheduling-agenda__title {
    margin: 0;
    font-size: 0.875rem;
    font-weight: 600;
    color: var(--mcl-text);
}

.mcl-scheduling-agenda__scroll {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
}

.mcl-scheduling-agenda__table {
    width: 100%;
    border-collapse: collapse;
    text-align: left;
    font-size: 0.875rem;
    line-height: 1.45;
}

.mcl-scheduling-agenda__thead tr {
    border-bottom: 1px solid var(--mcl-grid);
    background: var(--mcl-surface-muted);
}

.mcl-scheduling-agenda__th {
    padding: 0.625rem 1rem;
    font-weight: 600;
    color: var(--mcl-text);
}

.mcl-scheduling-agenda__th--actions {
    width: 1%;
    white-space: nowrap;
    text-align: right;
}

.mcl-scheduling-agenda__tbody tr {
    border-bottom: 1px solid var(--mcl-grid);
}

.mcl-scheduling-agenda__tbody tr:last-child {
    border-bottom: none;
}

.mcl-scheduling-agenda__td {
    padding: 0.625rem 1rem;
    vertical-align: top;
    color: var(--mcl-text);
}

.mcl-scheduling-agenda__td--muted {
    color: var(--mcl-muted);
}

.mcl-scheduling-agenda__td--actions {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 0.5rem;
    text-align: right;
    vertical-align: middle;
    white-space: nowrap;
}

.mcl-scheduling-agenda__delete {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 2.25rem;
    min-height: 2.25rem;
    padding: 0.4rem;
    box-sizing: border-box;
    border-radius: 0.375rem;
    border: 1px solid color-mix(in srgb, #b91c1c 35%, var(--mcl-grid));
    background: color-mix(in srgb, #fef2f2 80%, var(--mcl-surface));
    color: #b91c1c;
    line-height: 1;
    cursor: pointer;
    flex-shrink: 0;
    vertical-align: middle;
}

.mcl-scheduling-agenda__delete-icon {
    display: block;
    width: 1.25rem;
    height: 1.25rem;
    flex-shrink: 0;
}

.mcl-scheduling-agenda__delete:hover {
    background: color-mix(in srgb, #fee2e2 90%, var(--mcl-surface));
    border-color: color-mix(in srgb, #b91c1c 55%, var(--mcl-grid));
}

.dark .mcl-scheduling-agenda__delete {
    border-color: color-mix(in srgb, #f87171 40%, var(--mcl-grid));
    background: color-mix(in srgb, #450a0a 35%, var(--mcl-surface));
    color: #fca5a5;
}

.dark .mcl-scheduling-agenda__delete:hover {
    background: color-mix(in srgb, #7f1d1d 45%, var(--mcl-surface));
}

.mcl-scheduling-agenda__edit-time {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 2.25rem;
    min-height: 2.25rem;
    padding: 0.4rem;
    box-sizing: border-box;
    border-radius: 0.375rem;
    border: 1px solid color-mix(in srgb, var(--mcl-p1) 40%, var(--mcl-grid));
    background: color-mix(in srgb, var(--mcl-p1) 8%, var(--mcl-surface));
    color: var(--mcl-p1);
    line-height: 1;
    cursor: pointer;
    flex-shrink: 0;
    vertical-align: middle;
}

.mcl-scheduling-agenda__edit-time-icon {
    display: block;
    width: 1.25rem;
    height: 1.25rem;
    flex-shrink: 0;
}

.mcl-scheduling-agenda__edit-time:hover {
    background: color-mix(in srgb, var(--mcl-p1) 14%, var(--mcl-surface));
    border-color: color-mix(in srgb, var(--mcl-p1) 55%, var(--mcl-grid));
}

.dark .mcl-scheduling-agenda__edit-time {
    border-color: color-mix(in srgb, var(--mcl-p1) 45%, var(--mcl-grid));
    background: color-mix(in srgb, var(--mcl-p1) 18%, var(--mcl-surface));
    color: color-mix(in srgb, var(--mcl-p1) 95%, #fff);
}

.dark .mcl-scheduling-agenda__edit-time:hover {
    background: color-mix(in srgb, var(--mcl-p1) 26%, var(--mcl-surface));
}

.mcl-scheduling-agenda__vs {
    color: var(--mcl-muted);
    font-weight: 500;
}

a.mcl-scheduling-agenda__user-link {
    color: var(--mcl-p1);
    font-weight: 600;
    text-decoration: underline;
    text-underline-offset: 2px;
}

a.mcl-scheduling-agenda__user-link:hover {
    filter: brightness(0.92);
}

button.mcl-scheduling-agenda__user-link--button {
    border: none;
    margin: 0;
    padding: 0;
    background: none;
    font: inherit;
    color: var(--mcl-p1);
    font-weight: 600;
    text-decoration: underline;
    text-underline-offset: 2px;
    cursor: pointer;
    text-align: inherit;
}

button.mcl-scheduling-agenda__user-link--button:hover {
    filter: brightness(0.92);
}

.mcl-scheduling-agenda__empty {
    padding: 1.5rem 1rem;
    text-align: center;
    font-size: 0.875rem;
    color: var(--mcl-muted);
}

/**
 * Email / SMS log tables: highlight entire row when submission or (SMS) carrier delivery failed.
 */
tr.fi-ta-row.mcl-log-row--failure {
    background-color: rgb(254 242 242);
    box-shadow: inset 3px 0 0 0 rgb(220 38 38);
}

tr.fi-ta-row.mcl-log-row--failure > td {
    background-color: transparent;
}

.dark tr.fi-ta-row.mcl-log-row--failure {
    background-color: rgba(127, 29, 29, 0.38);
    box-shadow: inset 3px 0 0 0 rgb(248 113 113);
}

/**
 * System admin “View User” page: ensure <main> uses full width next to the sidebar.
 * Filament’s layout sometimes omits merged maxContentWidth; fi-width-7xl then caps the column.
 */
.fi-body.fi-panel-admin .fi-main:has(.fi-page.fi-resource-view-record-page.fi-resource-admin-users) {
    max-width: none !important;
    width: 100%;
    flex: 1 1 0%;
    min-width: 0;
}