:root {
    --page-accent: #0f766e;
    --page-accent-strong: #115e59;
    --page-soft: #e6f6f3;
    --page-bg: #f6f8fb;
    --page-card: #ffffff;
    --page-header: #f1f7f6;
    --page-border: #cbd5e1;
    --page-row: #f1f7f6;
    --page-ring: rgba(15, 118, 110, 0.18);
    --page-shadow: rgba(15, 23, 42, 0.08);
}

body[data-page-accent="emerald"] {
    --page-accent: #0f766e;
    --page-accent-strong: #115e59;
    --page-soft: #e6f6f3;
    --page-bg: #f6f8fb;
    --page-card: #ffffff;
    --page-header: #f1f7f6;
    --page-border: #bfdad5;
    --page-row: #f1f7f6;
    --page-ring: rgba(15, 118, 110, 0.18);
}

body[data-page-accent="sky"] {
    --page-accent: #2563eb;
    --page-accent-strong: #1d4ed8;
    --page-soft: #eaf1ff;
    --page-bg: #f6f8fb;
    --page-card: #ffffff;
    --page-header: #f2f6ff;
    --page-border: #bfd0f6;
    --page-row: #f2f6ff;
    --page-ring: rgba(37, 99, 235, 0.18);
}

body[data-page-accent="amber"] {
    --page-accent: #b7791f;
    --page-accent-strong: #975a16;
    --page-soft: #fff4db;
    --page-bg: #f8f8f4;
    --page-card: #ffffff;
    --page-header: #fff8e8;
    --page-border: #f0d7a5;
    --page-row: #fff8e8;
    --page-ring: rgba(183, 121, 31, 0.18);
}

body[data-page-accent="teal"] {
    --page-accent: #047b82;
    --page-accent-strong: #075e63;
    --page-soft: #e6f7f8;
    --page-bg: #f6f8fb;
    --page-card: #ffffff;
    --page-header: #eefafa;
    --page-border: #b9e1e3;
    --page-row: #eefafa;
    --page-ring: rgba(4, 123, 130, 0.18);
}

body[data-page-accent="slate"] {
    --page-accent: #334155;
    --page-accent-strong: #1e293b;
    --page-soft: #eef2f7;
    --page-bg: #f6f8fb;
    --page-card: #ffffff;
    --page-header: #f1f5f9;
    --page-border: #cbd5e1;
    --page-row: #f1f5f9;
    --page-ring: rgba(51, 65, 85, 0.16);
}

body[data-page-accent] main {
    background-color: var(--page-bg) !important;
}

body[data-page-accent] main .app-page-header {
    background-color: var(--page-header) !important;
    border-bottom-color: var(--page-border) !important;
    box-shadow: inset 0 -1px 0 var(--page-border);
}

body[data-page-accent] main .app-page-title {
    color: #0f172a !important;
}

body[data-page-accent] main .app-page-title::after {
    content: "";
    display: block;
    width: 5.25rem;
    height: 0.24rem;
    margin-top: 0.55rem;
    border-radius: 999px;
    background-color: var(--page-accent);
}

body[data-page-accent] main :is(.card-motion, .motion-card, [class*="border-l-4"]):not(aside *):not(.bg-primary) {
    background-color: var(--page-card) !important;
    background-image: none !important;
    border-color: var(--page-border) !important;
    border-left-color: var(--page-accent) !important;
    box-shadow: 0 18px 34px -30px var(--page-shadow) !important;
}

body[data-page-accent] main :is(section, [class*="rounded-[2rem]"]):is(.bg-white, .bg-surface-container-low, .bg-surface-container-lowest, [class*="bg-white"]):not(aside *):not(.bg-primary) {
    background-color: var(--page-card) !important;
    background-image: none !important;
    border-color: var(--page-border) !important;
    box-shadow: 0 18px 34px -32px var(--page-shadow) !important;
}

body[data-page-accent] main :is([class*="bg-gradient-to-br"], [class*="bg-gradient-to-r"]):not([class*="from-primary"]):not([class*="from-black"]):not([class*="to-transparent"]) {
    background-image: none !important;
    background-color: var(--page-card) !important;
}

body[data-page-accent] main [class*="bg-gradient-to-r"][class*="from-primary"] {
    background-image: none !important;
    background-color: var(--page-accent) !important;
}

body[data-page-accent] main :is(.card-icon, .motion-icon) {
    background-color: var(--page-soft) !important;
    color: var(--page-accent) !important;
    --tw-ring-color: var(--page-border) !important;
}

body[data-page-accent] main .bg-primary {
    background-color: var(--page-accent) !important;
}

body[data-page-accent] main :is(.bg-primary, [class*="from-primary"]) {
    color: #ffffff !important;
}

body[data-page-accent] main :is(.bg-primary, [class*="from-primary"]) :is(.text-on-primary, .text-emerald-100, .text-emerald-200, [class*="text-emerald-100"], [class*="text-emerald-200"], [class*="text-white/"], span, p, h1, h2, h3, h4, small) {
    color: #ffffff !important;
}

body[data-page-accent] main .hover\:bg-emerald-700:hover,
body[data-page-accent] main [class~="hover:bg-[#123b13]"]:hover {
    background-color: var(--page-accent-strong) !important;
}

body[data-page-accent] main .text-primary {
    color: var(--page-accent) !important;
}

body[data-page-accent] main .border-primary {
    border-color: var(--page-accent) !important;
}

body[data-page-accent] main .ring-primary,
body[data-page-accent] main [class*="focus:ring-primary"]:focus {
    --tw-ring-color: var(--page-ring) !important;
}

body[data-page-accent] main [class*="focus:border-primary"]:focus {
    border-color: var(--page-accent) !important;
}

body[data-page-accent] main :is(input, select, textarea):not([type="checkbox"]):not([type="radio"]):focus {
    border-color: var(--page-accent) !important;
    box-shadow: 0 0 0 4px var(--page-ring) !important;
}

body[data-page-accent] main .border-l-emerald-400 {
    border-left-color: var(--page-accent) !important;
}

body[data-page-accent] main thead,
body[data-page-accent] main thead.bg-emerald-100 {
    background-color: var(--page-soft) !important;
    border-color: var(--page-border) !important;
}

body[data-page-accent] main tbody tr:hover {
    background-color: var(--page-row) !important;
}

body[data-page-accent] main .border-emerald-100,
body[data-page-accent] main .border-emerald-200 {
    border-color: var(--page-border) !important;
}

body[data-page-accent] main .ring-emerald-100,
body[data-page-accent] main .ring-emerald-200 {
    --tw-ring-color: var(--page-border) !important;
}

body[data-page-accent] main .bg-emerald-50,
body[data-page-accent] main .bg-emerald-100 {
    background-color: var(--page-soft) !important;
}

body[data-page-accent] main .text-emerald-700,
body[data-page-accent] main .text-emerald-600 {
    color: var(--page-accent) !important;
}

body[data-page-accent] main :is(.text-emerald-100, .text-emerald-200, .text-on-primary, [class*="text-emerald-100"], [class*="text-emerald-200"]):not(.bg-primary):not([class*="from-primary"]):not(.bg-primary *):not([class*="from-primary"] *) {
    color: #334155 !important;
}

.mobile-shell-bar,
.mobile-shell-overlay,
.mobile-shell-close {
    display: none;
}

@media (max-width: 767px) {
    body[data-page-accent] {
        overflow-x: hidden;
    }

    body[data-page-accent] main {
        max-width: 100vw;
        min-width: 0;
        overflow-x: hidden;
    }

    body[data-page-accent] main :is(header, nav, section, article, div, form, ul, li, table) {
        min-width: 0;
    }

    body[data-page-accent] main :is(.px-8) {
        padding-right: 1rem !important;
        padding-left: 1rem !important;
    }

    body[data-page-accent] main :is(.p-8) {
        padding: 1.25rem !important;
    }

    body[data-page-accent] main :is(.rounded-\[2rem\], .rounded-\[1\.75rem\]) {
        max-width: 100%;
    }

    body[data-page-accent] main .activity-item {
        max-width: 100%;
        min-width: 0;
        overflow: hidden;
    }

    body[data-page-accent] main .activity-item p {
        overflow-wrap: anywhere;
    }

    body.mobile-shell-auto {
        overflow-x: hidden;
    }

    body.mobile-shell-manual {
        overflow-x: hidden;
    }

    body.mobile-shell-manual aside#sidebar {
        max-height: 100vh;
        overflow-y: auto;
        overscroll-behavior: contain;
    }

    body.mobile-shell-auto .mobile-shell-bar {
        position: fixed;
        top: 0;
        left: 0;
        right: 0;
        z-index: 60;
        display: flex;
        height: 3.5rem;
        align-items: center;
        justify-content: space-between;
        border-bottom: 1px solid #e2e8f0;
        background-color: #ffffff;
        padding: 0 1rem;
        box-shadow: 0 10px 24px -22px rgba(15, 23, 42, 0.55);
    }

    body.mobile-shell-auto .mobile-shell-button,
    body.mobile-shell-auto .mobile-shell-close {
        display: flex;
        height: 2.25rem;
        width: 2.25rem;
        align-items: center;
        justify-content: center;
        border-radius: 0.75rem;
        color: #475569;
        transition: background-color 160ms ease, color 160ms ease;
    }

    body.mobile-shell-auto .mobile-shell-button:hover,
    body.mobile-shell-auto .mobile-shell-close:hover {
        background-color: #f1f5f9;
        color: #0f172a;
    }

    body.mobile-shell-auto .mobile-shell-brand {
        display: flex;
        min-width: 0;
        align-items: center;
        gap: 0.5rem;
        font-size: 0.875rem;
        font-weight: 800;
        color: #064e3b;
    }

    body.mobile-shell-auto .mobile-shell-logo {
        display: flex;
        height: 1.75rem;
        width: 1.75rem;
        flex-shrink: 0;
        align-items: center;
        justify-content: center;
        border-radius: 0.5rem;
        background-color: #006d4b;
        color: #ffffff;
    }

    body.mobile-shell-auto .mobile-shell-logo .material-symbols-outlined {
        font-size: 1rem;
    }

    body.mobile-shell-auto .mobile-shell-spacer {
        width: 2.25rem;
        flex-shrink: 0;
    }

    body.mobile-shell-auto .mobile-shell-overlay {
        position: fixed;
        inset: 0;
        z-index: 40;
        display: block;
        background-color: rgba(15, 23, 42, 0.5);
    }

    body.mobile-shell-auto .mobile-shell-overlay.hidden {
        display: none;
    }

    body.mobile-shell-auto > aside#sidebar {
        z-index: 70 !important;
        max-height: 100vh;
        overflow-y: auto;
        transform: translateX(-100%);
        transition: transform 220ms ease;
    }

    body.mobile-shell-auto > aside#sidebar.mobile-shell-open {
        transform: translateX(0) !important;
    }

    body.mobile-shell-auto > main {
        margin-left: 0 !important;
        width: 100% !important;
        min-width: 0 !important;
        max-width: 100% !important;
        padding-top: 4.5rem !important;
        padding-right: 1rem !important;
        padding-left: 1rem !important;
    }

    body.mobile-shell-auto > main > header:first-child,
    body.mobile-shell-auto > main > section,
    body.mobile-shell-auto > main > div {
        margin-right: -1rem;
        margin-left: -1rem;
        padding-right: 1rem !important;
        padding-left: 1rem !important;
    }

    body.mobile-shell-auto > main > header:first-child {
        top: auto !important;
        position: relative !important;
    }

    body.mobile-shell-auto > main .ml-64 {
        margin-left: 0 !important;
    }

    body.mobile-shell-auto > main :is(form, section, div, article) {
        min-width: 0;
    }
}