/* ==========================================================================
   Mail2Folder pro - panel appearance
   --------------------------------------------------------------------------
   Layered on top of Filament's compiled theme. Colours come from the active
   palette (--primary-*) so the PJCI, classic and custom themes all keep
   working; the navy chrome uses the darker end of that palette.
   ========================================================================== */

:root {
    --m2f-line: rgba(36, 61, 84, 0.10);
    --m2f-card-shadow:
        0 1px 2px rgba(16, 37, 58, 0.05),
        0 24px 48px -38px rgba(16, 37, 58, 0.45);
    --m2f-card-shadow-hover:
        0 2px 4px rgba(16, 37, 58, 0.06),
        0 30px 60px -38px rgba(16, 37, 58, 0.55);
}

/* --- canvas -------------------------------------------------------------- */

body.fi-body {
    background-color: var(--m2f-surface, #f3f7fb);
    background-image:
        radial-gradient(1100px 540px at 6% -8%, color-mix(in oklab, var(--primary-400, #5a99d2) 18%, transparent), transparent 62%),
        radial-gradient(900px 480px at 101% 0%, color-mix(in oklab, var(--primary-700, #285c8b) 12%, transparent), transparent 58%);
}

.dark body.fi-body {
    background-color: var(--m2f-surface-dark, #0a141f);
    background-image:
        radial-gradient(1100px 540px at 6% -8%, color-mix(in oklab, var(--primary-400, #5a99d2) 14%, transparent), transparent 62%),
        radial-gradient(900px 480px at 101% 0%, color-mix(in oklab, var(--primary-700, #285c8b) 16%, transparent), transparent 58%);
}

/* --- top bar ------------------------------------------------------------- */

.fi-topbar {
    background-color: var(--m2f-chrome-950, var(--primary-950, #1a2c3d));
    background-image: linear-gradient(
        112deg,
        var(--m2f-chrome-950, var(--primary-950, #1a2c3d)) 0%,
        var(--m2f-chrome-900, var(--primary-900, #28435c)) 58%,
        var(--m2f-chrome-800, var(--primary-800, #26496b)) 100%
    );
    border-bottom: 1px solid rgba(255, 255, 255, 0.08);
    box-shadow: 0 18px 44px -36px rgba(5, 15, 26, 0.9);
}

.fi-topbar .fi-icon-btn {
    color: rgba(255, 255, 255, 0.78);
}

.fi-topbar .fi-icon-btn:hover {
    background-color: rgba(255, 255, 255, 0.12);
    color: #fff;
}

.fi-topbar .fi-input-wrp {
    background-color: rgba(255, 255, 255, 0.10);
    box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.14);
}

.fi-topbar .fi-input-wrp:focus-within {
    background-color: rgba(255, 255, 255, 0.15);
    box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.30);
}

.fi-topbar .fi-input {
    color: #f8fafc;
}

.fi-topbar .fi-input::placeholder {
    color: rgba(248, 250, 252, 0.55);
}

.fi-topbar .fi-input-wrp .fi-icon {
    color: rgba(248, 250, 252, 0.62);
}

.fi-topbar .fi-user-avatar {
    box-shadow: 0 0 0 2px rgba(255, 255, 255, 0.22);
}

/* --- sidebar ------------------------------------------------------------- */

.fi-sidebar {
    background-color: var(--m2f-chrome-950, var(--primary-950, #1a2c3d));
    background-image: linear-gradient(
        180deg,
        var(--m2f-chrome-800, var(--primary-800, #26496b)) 0%,
        var(--m2f-chrome-900, var(--primary-900, #28435c)) 46%,
        var(--m2f-chrome-950, var(--primary-950, #1a2c3d)) 100%
    );
    border-inline-end: 1px solid rgba(255, 255, 255, 0.06);
}

.fi-sidebar .fi-sidebar-header,
.fi-body-has-topbar .fi-sidebar .fi-sidebar-header {
    background-color: transparent;
    box-shadow: none;
}

.fi-sidebar .fi-sidebar-group-label {
    color: rgba(255, 255, 255, 0.46);
    font-size: 0.68rem;
    font-weight: 600;
    letter-spacing: 0.12em;
    text-transform: uppercase;
}

.fi-sidebar .fi-sidebar-item-label {
    color: rgba(255, 255, 255, 0.78);
}

.fi-sidebar .fi-sidebar-item-icon {
    color: rgba(255, 255, 255, 0.64);
}

.fi-sidebar .fi-sidebar-item-btn:hover,
.fi-sidebar .fi-sidebar-item-btn:focus-visible {
    background-color: rgba(255, 255, 255, 0.08);
}

.fi-sidebar .fi-sidebar-item.fi-active > .fi-sidebar-item-btn {
    background-color: transparent;
    background-image: linear-gradient(90deg, color-mix(in oklab, var(--primary-400, #5a99d2) 34%, transparent), color-mix(in oklab, var(--primary-400, #5a99d2) 6%, transparent));
    box-shadow: inset 3px 0 0 var(--primary-400, #5a99d2);
}

.fi-sidebar .fi-sidebar-item.fi-active > .fi-sidebar-item-btn .fi-sidebar-item-label,
.fi-sidebar .fi-sidebar-item.fi-active > .fi-sidebar-item-btn .fi-sidebar-item-icon {
    color: #fff;
}

.fi-sidebar .fi-icon-btn {
    color: rgba(255, 255, 255, 0.68);
}

.fi-sidebar .fi-icon-btn:hover {
    background-color: rgba(255, 255, 255, 0.10);
    color: #fff;
}

/* --- page headings ------------------------------------------------------- */

.fi-header-heading {
    font-weight: 700;
    letter-spacing: -0.02em;
}

.fi-header-heading::after {
    display: block;
    width: 44px;
    height: 3px;
    margin-top: 0.55rem;
    border-radius: 999px;
    background-image: linear-gradient(90deg, var(--primary-400, #5a99d2), var(--primary-700, #285c8b));
    content: "";
}

/* --- sections ------------------------------------------------------------ */

.fi-section:not(.fi-section-not-contained) {
    border: 1px solid var(--m2f-line);
    border-radius: 1rem;
    background-color: #fff;
    box-shadow: var(--m2f-card-shadow);
}

.dark .fi-section:not(.fi-section-not-contained) {
    border-color: rgba(255, 255, 255, 0.08);
    background-color: #0f1c2b;
}

/* --- dashboard statistics ------------------------------------------------ */

.fi-wi-stats-overview-stat {
    position: relative;
    overflow: hidden;
    border: 1px solid var(--m2f-line);
    border-radius: 1rem;
    background-color: #fff;
    background-image: linear-gradient(180deg, #fff, #fbfdff);
    box-shadow: var(--m2f-card-shadow);
    transition: transform 160ms ease, box-shadow 160ms ease;
}

.fi-wi-stats-overview-stat::before {
    position: absolute;
    inset: 0 0 auto;
    height: 3px;
    background-image: linear-gradient(90deg, var(--primary-300, #8eabd9), var(--primary-600, #2f6fa8));
    content: "";
}

.fi-wi-stats-overview-stat:hover {
    transform: translateY(-2px);
    box-shadow: var(--m2f-card-shadow-hover);
}

.dark .fi-wi-stats-overview-stat {
    border-color: rgba(255, 255, 255, 0.08);
    background-color: #0f1c2b;
    background-image: linear-gradient(180deg, #101d2c, #0c1724);
}

/* --- tables -------------------------------------------------------------- */

.fi-ta {
    border: 1px solid var(--m2f-line);
    border-radius: 1rem;
    background-color: #fff;
    box-shadow: var(--m2f-card-shadow);
}

.dark .fi-ta {
    border-color: rgba(255, 255, 255, 0.08);
    background-color: #0f1c2b;
}

.fi-ta-header-cell {
    background-color: color-mix(in oklab, var(--primary-500, #3f86c4) 7%, #fff);
}

.fi-ta .fi-ta-header-cell:first-child {
    border-start-start-radius: 1rem;
}

.fi-ta .fi-ta-header-cell:last-child {
    border-start-end-radius: 1rem;
}

.dark .fi-ta-header-cell {
    background-color: color-mix(in oklab, var(--primary-400, #5a99d2) 10%, transparent);
}

.fi-ta-row:hover {
    background-color: color-mix(in oklab, var(--primary-500, #3f86c4) 5%, transparent);
}

/* --- buttons, badges, inputs -------------------------------------------- */

.fi-btn {
    border-radius: 0.7rem;
}

.fi-btn.fi-color-primary.fi-bg-color-600 {
    background-image: linear-gradient(135deg, var(--primary-500, #3f86c4), var(--primary-700, #285c8b));
    box-shadow: 0 12px 26px -18px var(--primary-700, #285c8b);
}

.fi-btn.fi-color-primary.fi-bg-color-600:hover {
    filter: brightness(1.05) saturate(1.05);
}

.fi-badge {
    border-radius: 999px;
    font-weight: 600;
}

.fi-dropdown-panel {
    border-radius: 0.9rem;
    box-shadow:
        0 1px 2px rgba(16, 37, 58, 0.05),
        0 26px 60px -30px rgba(16, 37, 58, 0.45);
}

/* --- modals -------------------------------------------------------------- */

/* Keep tall modals (MFA setup, long forms) inside short viewports so the
   submit buttons stay reachable instead of overflowing below the fold. */
.fi-modal-window {
    max-height: calc(100vh - 2rem);
    max-height: calc(100dvh - 2rem);
    overflow-y: auto;
}

/* --- simple pages (panel sign-in, password reset) ------------------------ */

.fi-simple-layout {
    background-color: var(--m2f-chrome-950, var(--primary-950, #1a2c3d));
    background-image:
        radial-gradient(900px 520px at 12% -5%, color-mix(in oklab, var(--primary-400, #5a99d2) 30%, transparent), transparent 62%),
        radial-gradient(760px 460px at 90% 105%, color-mix(in oklab, var(--primary-700, #285c8b) 28%, transparent), transparent 58%),
        linear-gradient(160deg, var(--m2f-chrome-900, var(--primary-900, #28435c)), var(--m2f-chrome-950, #0a1622));
}

.fi-simple-main {
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 1.35rem;
    background-color: transparent;
    background-image: linear-gradient(168deg, var(--m2f-chrome-800, var(--primary-800, #26496b)), var(--m2f-chrome-950, var(--primary-950, #1a2c3d)));
    box-shadow: 0 40px 90px -55px rgba(0, 0, 0, 0.85);
    color: rgb(226, 232, 240);
}

.fi-simple-header-heading {
    color: #fff;
}

.fi-simple-main label {
    color: rgba(255, 255, 255, 0.78);
}

.fi-simple-main .fi-fo-field-label-content {
    color: rgba(255, 255, 255, 0.82);
}

.fi-simple-main .fi-icon-btn:hover,
.fi-simple-main .fi-icon-btn:focus-visible {
    background-color: rgba(255, 255, 255, 0.12);
    color: #fff;
}

.fi-simple-main .fi-input-wrp {
    background-color: rgba(255, 255, 255, 0.08);
    box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.16);
}

.fi-simple-main .fi-input {
    color: #f8fafc;
}

.fi-simple-main .fi-input::placeholder {
    color: rgba(248, 250, 252, 0.42);
}

.fi-simple-main .fi-icon-btn {
    color: rgba(255, 255, 255, 0.72);
}

.fi-simple-main a {
    color: var(--primary-300, #8eabd9);
}

.fi-simple-layout footer {
    color: rgba(255, 255, 255, 0.58);
}

.fi-simple-layout footer a {
    color: rgba(255, 255, 255, 0.80);
}

/* --- application page helpers -------------------------------------------- */
/* Filament's compiled theme does not ship the Tailwind utilities used by app
   Blade views, so these helpers carry their own layout. */

.m2f-actions {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.75rem;
    margin-top: 1.5rem;
}

.m2f-stack > * + * {
    margin-top: 1rem;
}

.m2f-hint {
    font-size: 0.875rem;
    line-height: 1.55;
    color: #5b7186;
}

.dark .m2f-hint {
    color: #94a3b8;
}

.m2f-note {
    margin-top: 1.25rem;
    font-size: 0.875rem;
    line-height: 1.6;
    color: #5b7186;
}

.dark .m2f-note {
    color: #94a3b8;
}

.m2f-note p + p {
    margin-top: 0.6rem;
}

.m2f-note code {
    padding: 0.1rem 0.3rem;
    border-radius: 0.35rem;
    background-color: color-mix(in oklab, var(--primary-500, #3f86c4) 10%, transparent);
    color: var(--primary-700, #285c8b);
    font-size: 0.92em;
}

.dark .m2f-note code {
    color: var(--primary-300, #8eabd9);
}

.m2f-label {
    display: block;
    margin-bottom: 0.4rem;
    font-size: 0.875rem;
    font-weight: 600;
    color: #0f172a;
}

.dark .m2f-label {
    color: #f8fafc;
}

.m2f-check-list {
    display: grid;
    gap: 0.55rem;
}

.m2f-check {
    display: flex;
    align-items: center;
    gap: 0.55rem;
    font-size: 0.875rem;
    color: #0f172a;
}

.dark .m2f-check {
    color: #f8fafc;
}

.m2f-file-list {
    border-top: 1px solid var(--m2f-line);
}

.dark .m2f-file-list {
    border-color: rgba(255, 255, 255, 0.08);
}

.m2f-file-row {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 0.5rem;
    padding: 0.85rem 0;
    border-bottom: 1px solid var(--m2f-line);
    font-size: 0.875rem;
}

.dark .m2f-file-row {
    border-color: rgba(255, 255, 255, 0.08);
}

.m2f-file-name {
    font-weight: 600;
    color: #0f172a;
}

.dark .m2f-file-name {
    color: #fff;
}

.m2f-file-meta {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 1rem;
    color: #5b7186;
}

.dark .m2f-file-meta {
    color: #94a3b8;
}

.m2f-footer {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    gap: 0.15rem 0.75rem;
    width: 100%;
    max-width: 80rem;
    margin: 0 auto;
    padding: 1.5rem 1rem;
    font-size: 0.75rem;
    color: #64748b;
}

.dark .m2f-footer {
    color: #94a3b8;
}

.m2f-footer a {
    color: inherit;
    text-decoration: none;
}

.m2f-footer a:hover {
    color: var(--primary-600, #2f6fa8);
    text-decoration: underline;
}

.dark .m2f-footer a:hover {
    color: var(--primary-400, #5a99d2);
}

.m2f-footer .m2f-dot {
    opacity: 0.45;
}

/* --- small screens ------------------------------------------------------- */

@media (max-width: 1023px) {
    body.fi-body {
        background-image:
            radial-gradient(800px 420px at 10% -10%, color-mix(in oklab, var(--primary-400, #5a99d2) 16%, transparent), transparent 62%);
    }

    .fi-header-heading::after {
        margin-top: 0.4rem;
    }
}