@tailwind base;
@tailwind components;
@tailwind utilities;

@layer base {
    :root {
        --theme-bg: #f4f7fe;
        --theme-surface: #ffffff;
        --theme-text: #1b2559;
        --theme-muted: #8f9bba;
        --theme-border: #e6ebf5;
        --theme-primary: #4318ff;
        --theme-primary-soft: #6a53ff;
        --theme-primary-strong: #11047a;
        --theme-accent: #39b8ff;
        --theme-danger: #7551ff;
        --theme-overlay: rgba(27, 37, 89, 0.45);
        --theme-shadow: 0 18px 40px -28px rgba(17, 4, 122, 0.35);
    }

    .dark {
        --theme-bg: #0b1437;
        --theme-surface: #111c44;
        --theme-text: #ffffff;
        --theme-muted: #a3aed0;
        --theme-border: #2b3674;
        --theme-primary: #7551ff;
        --theme-primary-soft: #9a7aff;
        --theme-primary-strong: #4318ff;
        --theme-accent: #4cc9ff;
        --theme-danger: #9a7aff;
        --theme-overlay: rgba(2, 8, 28, 0.62);
        --theme-shadow: 0 24px 56px -34px rgba(2, 8, 28, 0.85);
    }

    html {
        scroll-behavior: smooth;
    }

    body {
        background:
            radial-gradient(1100px 560px at -8% 18%, rgba(57, 184, 255, 0.42), transparent 62%),
            radial-gradient(1200px 640px at 54% -16%, rgba(67, 24, 255, 0.34), transparent 66%),
            radial-gradient(980px 520px at 102% 6%, rgba(248, 162, 255, 0.33), transparent 64%),
            radial-gradient(920px 500px at 96% 92%, rgba(115, 137, 255, 0.25), transparent 66%),
            var(--theme-bg);
        color: var(--theme-text);
    }
}

@layer components {
    .theme-glass {
        background: color-mix(in srgb, var(--theme-surface) 88%, #ffffff 12%);
        border: 1px solid var(--theme-border);
        box-shadow: var(--theme-shadow);
        backdrop-filter: blur(12px);
    }

    .theme-card {
        border: 1px solid var(--theme-border);
        background: var(--theme-surface);
        border-radius: 1rem;
        box-shadow: var(--theme-shadow);
    }

    .theme-surface-panel {
        border: 1px solid var(--theme-border);
        background: color-mix(in srgb, var(--theme-surface) 96%, #f8fbff 4%);
        border-radius: 1rem;
        box-shadow: var(--theme-shadow);
    }

    .dark .theme-surface-panel {
        background: color-mix(in srgb, var(--theme-surface) 94%, #0b1437 6%);
    }

    .theme-table-head {
        background: color-mix(in srgb, var(--theme-primary) 10%, #ffffff 90%);
        color: var(--theme-text);
    }

    .dark .theme-table-head {
        background: color-mix(in srgb, var(--theme-primary) 22%, var(--theme-surface) 78%);
    }

    .theme-inline-muted {
        color: var(--theme-muted);
    }

    .theme-alert-brand {
        border: 1px solid color-mix(in srgb, var(--theme-primary) 28%, var(--theme-border) 72%);
        background: color-mix(in srgb, var(--theme-primary) 9%, #ffffff 91%);
        color: color-mix(in srgb, var(--theme-primary-strong) 76%, #0f172a 24%);
        border-radius: 0.95rem;
    }

    body.theme-modal-open {
        overflow: hidden;
    }

    .theme-confirm-modal {
        position: fixed;
        inset: 0;
        z-index: 140;
        display: flex;
        align-items: center;
        justify-content: center;
        padding: 1rem;
    }

    .theme-confirm-modal.hidden {
        display: none;
    }

    .theme-confirm-backdrop {
        position: absolute;
        inset: 0;
        background: color-mix(in srgb, var(--theme-overlay) 92%, #000000 8%);
        backdrop-filter: blur(1.5px);
    }

    .theme-confirm-panel {
        position: relative;
        width: min(92vw, 32rem);
        border-radius: 1.5rem;
        border: 1px solid var(--theme-border);
        background: var(--theme-surface);
        color: var(--theme-text);
        box-shadow:
            0 30px 64px -34px rgba(15, 23, 42, 0.55),
            var(--theme-shadow);
        padding: 1.55rem 1.35rem 1.25rem;
        text-align: center;
    }

    .theme-confirm-close {
        position: absolute;
        top: 0.95rem;
        right: 0.95rem;
        display: inline-flex;
        align-items: center;
        justify-content: center;
        width: 2rem;
        height: 2rem;
        border-radius: 999px;
        border: 1px solid var(--theme-border);
        color: var(--theme-muted);
        background: color-mix(in srgb, var(--theme-surface) 90%, var(--theme-border) 10%);
        transition: all 160ms ease;
    }

    html[dir='rtl'] .theme-confirm-close {
        right: auto;
        left: 0.95rem;
    }

    .theme-confirm-close:hover {
        border-color: color-mix(in srgb, var(--theme-primary) 42%, var(--theme-border) 58%);
        color: var(--theme-primary);
    }

    .theme-confirm-icon {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        width: 5.1rem;
        height: 5.1rem;
        border-radius: 999px;
        border: 4px solid #f59e0b;
        color: #f59e0b;
        font-size: 2.35rem;
        font-weight: 700;
        line-height: 1;
    }

    .theme-confirm-title {
        margin-top: 1rem;
        font-size: 1.75rem;
        font-weight: 700;
        line-height: 1.25;
    }

    .theme-confirm-message {
        margin-top: 0.8rem;
        font-size: 1rem;
        line-height: 1.6;
        color: var(--theme-muted);
    }

    .theme-confirm-extra {
        margin-top: 0.95rem;
        text-align: start;
    }

    .theme-confirm-extra-label {
        display: block;
        margin-bottom: 0.4rem;
        font-size: 0.82rem;
        font-weight: 600;
        color: var(--theme-muted);
    }

    .theme-confirm-extra-help {
        margin-top: 0.4rem;
        font-size: 0.75rem;
        color: var(--theme-muted);
    }

    .theme-confirm-extra-error {
        margin-top: 0.45rem;
        font-size: 0.75rem;
        color: #ef4444;
        font-weight: 600;
    }

    .theme-confirm-actions {
        margin-top: 1.35rem;
        display: flex;
        justify-content: center;
        gap: 0.6rem;
        flex-wrap: wrap;
    }

    .dark .theme-alert-brand {
        border-color: color-mix(in srgb, var(--theme-primary-soft) 38%, var(--theme-border) 62%);
        background: color-mix(in srgb, var(--theme-primary) 22%, var(--theme-surface) 78%);
        color: #edf3ff;
    }

    .dark .theme-confirm-panel {
        border-color: color-mix(in srgb, var(--theme-primary-soft) 38%, var(--theme-border) 62%);
        background: color-mix(in srgb, var(--theme-surface) 92%, #0f1740 8%);
    }

    .dark .theme-confirm-close {
        border-color: color-mix(in srgb, var(--theme-primary-soft) 22%, var(--theme-border) 78%);
        color: #c8d3f5;
        background: color-mix(in srgb, var(--theme-surface) 86%, #1a2b68 14%);
    }

    .dark .theme-confirm-close:hover {
        border-color: color-mix(in srgb, var(--theme-primary-soft) 58%, var(--theme-border) 42%);
        color: #ffffff;
    }

    .dark .theme-confirm-message {
        color: #c9d4f2;
    }

    .theme-match-banner {
        @apply rounded-2xl border p-4 sm:p-5;
    }

    .theme-match-banner.exact {
        border-color: color-mix(in srgb, #22c55e 48%, var(--theme-border) 52%);
        background: color-mix(in srgb, #22c55e 14%, var(--theme-surface) 86%);
        color: #14532d;
    }

    .theme-match-banner.partial {
        border-color: color-mix(in srgb, #f59e0b 48%, var(--theme-border) 52%);
        background: color-mix(in srgb, #f59e0b 16%, var(--theme-surface) 84%);
        color: #78350f;
    }

    .theme-match-banner.none {
        border-color: color-mix(in srgb, #ef4444 50%, var(--theme-border) 50%);
        background: color-mix(in srgb, #ef4444 14%, var(--theme-surface) 86%);
        color: #7f1d1d;
    }

    .theme-match-badge {
        @apply inline-flex items-center gap-1 rounded-lg px-2.5 py-1 text-xs font-semibold border;
    }

    .theme-match-badge.exact {
        border-color: color-mix(in srgb, #16a34a 50%, transparent 50%);
        background: color-mix(in srgb, #16a34a 12%, transparent 88%);
        color: #166534;
    }

    .theme-match-badge.partial {
        border-color: color-mix(in srgb, #d97706 50%, transparent 50%);
        background: color-mix(in srgb, #f59e0b 13%, transparent 87%);
        color: #92400e;
    }

    .theme-match-badge.none {
        border-color: color-mix(in srgb, #dc2626 52%, transparent 48%);
        background: color-mix(in srgb, #ef4444 12%, transparent 88%);
        color: #991b1b;
    }

    .dark .theme-match-banner.exact {
        border-color: color-mix(in srgb, #34d399 50%, var(--theme-border) 50%);
        background: color-mix(in srgb, #16a34a 28%, var(--theme-surface) 72%);
        color: #dcfce7;
    }

    .dark .theme-match-banner.partial {
        border-color: color-mix(in srgb, #fbbf24 50%, var(--theme-border) 50%);
        background: color-mix(in srgb, #f59e0b 30%, var(--theme-surface) 70%);
        color: #fef3c7;
    }

    .dark .theme-match-banner.none {
        border-color: color-mix(in srgb, #f87171 54%, var(--theme-border) 46%);
        background: color-mix(in srgb, #dc2626 30%, var(--theme-surface) 70%);
        color: #fee2e2;
    }

    .dark .theme-match-badge.exact {
        border-color: color-mix(in srgb, #34d399 52%, transparent 48%);
        background: color-mix(in srgb, #16a34a 36%, transparent 64%);
        color: #dcfce7;
    }

    .dark .theme-match-badge.partial {
        border-color: color-mix(in srgb, #fbbf24 52%, transparent 48%);
        background: color-mix(in srgb, #f59e0b 36%, transparent 64%);
        color: #fef3c7;
    }

    .dark .theme-match-badge.none {
        border-color: color-mix(in srgb, #f87171 54%, transparent 46%);
        background: color-mix(in srgb, #dc2626 36%, transparent 64%);
        color: #fee2e2;
    }

    .theme-ring-brand {
        border-color: var(--theme-border);
        background: var(--theme-surface);
        color: var(--theme-text);
    }

    .theme-ring-brand:focus,
    .theme-ring-brand:focus-visible {
        outline: none;
        border-color: color-mix(in srgb, var(--theme-primary) 58%, #ffffff 42%);
        box-shadow: 0 0 0 3px color-mix(in srgb, var(--theme-primary) 22%, transparent 78%);
    }

    .dark .theme-ring-brand {
        border-color: color-mix(in srgb, var(--theme-primary-soft) 24%, var(--theme-border) 76%);
        background: color-mix(in srgb, var(--theme-surface) 92%, #0f1740 8%);
        color: #eff4ff;
    }

    .theme-ring-brand::placeholder {
        color: color-mix(in srgb, var(--theme-muted) 88%, #ffffff 12%);
        opacity: 0.95;
    }

    .theme-dot-brand {
        background: color-mix(in srgb, var(--theme-primary) 78%, var(--theme-accent) 22%);
    }

    .theme-status-pill {
        border: 1px solid color-mix(in srgb, var(--theme-primary) 34%, var(--theme-border) 66%);
        background: color-mix(in srgb, var(--theme-primary) 14%, transparent 86%);
        color: var(--theme-primary-strong);
    }

    .theme-featured-badge {
        display: inline-flex;
        align-items: center;
        gap: 0.25rem;
        border-radius: 9999px;
        border: 1px solid color-mix(in srgb, #f59e0b 50%, var(--theme-border) 50%);
        background: color-mix(in srgb, #f59e0b 16%, transparent 84%);
        color: color-mix(in srgb, #92400e 82%, var(--theme-text) 18%);
        font-size: 0.7rem;
        font-weight: 700;
        line-height: 1;
        padding: 0.3rem 0.55rem;
        white-space: nowrap;
    }

    .theme-featured-row {
        background: linear-gradient(90deg, color-mix(in srgb, #f59e0b 12%, transparent 88%), transparent 68%);
    }

    .theme-featured-card {
        border-color: color-mix(in srgb, #f59e0b 46%, var(--theme-border) 54%);
        box-shadow:
            0 0 0 1px color-mix(in srgb, #f59e0b 22%, transparent 78%),
            0 14px 28px -18px color-mix(in srgb, #f59e0b 55%, transparent 45%),
            var(--theme-shadow);
    }

    .theme-featured-spotlight {
        border: 1px solid color-mix(in srgb, #f59e0b 44%, var(--theme-border) 56%);
        border-radius: 1rem;
        background: color-mix(in srgb, var(--theme-surface) 95%, #fff 5%);
        box-shadow:
            0 0 0 1px color-mix(in srgb, #f59e0b 18%, transparent 82%),
            0 18px 36px -24px color-mix(in srgb, #f59e0b 56%, transparent 44%),
            var(--theme-shadow);
        transition: transform 170ms ease, box-shadow 170ms ease;
    }

    .theme-featured-spotlight:hover {
        transform: translateY(-2px);
        box-shadow:
            0 0 0 1px color-mix(in srgb, #f59e0b 24%, transparent 76%),
            0 22px 40px -24px color-mix(in srgb, #f59e0b 62%, transparent 38%),
            var(--theme-shadow);
    }

    .dark .theme-status-pill {
        border-color: color-mix(in srgb, var(--theme-primary-soft) 46%, var(--theme-border) 54%);
        background: color-mix(in srgb, var(--theme-primary) 28%, var(--theme-surface) 72%);
        color: #eef3ff;
    }

    .dark .theme-featured-badge {
        border-color: color-mix(in srgb, #fbbf24 52%, var(--theme-border) 48%);
        background: color-mix(in srgb, #f59e0b 28%, transparent 72%);
        color: #fde68a;
    }

    .dark .theme-featured-row {
        background: linear-gradient(90deg, color-mix(in srgb, #f59e0b 18%, transparent 82%), transparent 72%);
    }

    .dark .theme-featured-card {
        border-color: color-mix(in srgb, #fbbf24 48%, var(--theme-border) 52%);
        box-shadow:
            0 0 0 1px color-mix(in srgb, #f59e0b 30%, transparent 70%),
            0 16px 30px -18px color-mix(in srgb, #f59e0b 45%, transparent 55%),
            var(--theme-shadow);
    }

    .dark .theme-featured-spotlight {
        border-color: color-mix(in srgb, #fbbf24 44%, var(--theme-border) 56%);
        background: color-mix(in srgb, var(--theme-surface) 92%, #0f1740 8%);
        box-shadow:
            0 0 0 1px color-mix(in srgb, #f59e0b 30%, transparent 70%),
            0 20px 36px -24px color-mix(in srgb, #f59e0b 48%, transparent 52%),
            var(--theme-shadow);
    }

    .theme-suggestion-row {
        @apply w-full text-start px-3 py-2 text-sm transition;
    }

    .theme-suggestion-row:hover {
        background: var(--theme-border);
    }

    .theme-suggestion-meta {
        @apply text-xs ms-2;
        color: var(--theme-muted);
    }

    .theme-btn-hero {
        @apply rounded-xl px-4 py-2 text-sm font-semibold transition;
        border: 1px solid rgba(255, 255, 255, 0.7);
        background: rgba(255, 255, 255, 0.95);
        color: var(--theme-primary-strong);
    }

    .theme-btn-hero:hover {
        background: rgba(255, 255, 255, 1);
        color: var(--theme-primary);
    }

    .theme-gradient {
        background-image: linear-gradient(130deg, var(--theme-primary), var(--theme-primary-soft) 58%, var(--theme-primary-strong));
        color: #fff;
    }

    .theme-sidebar-link {
        @apply flex items-center justify-between gap-3 rounded-xl px-3 py-2.5 text-sm font-medium transition;
        color: var(--theme-text);
    }

    .theme-sidebar-link:hover {
        background: color-mix(in srgb, var(--theme-primary) 11%, transparent 89%);
    }

    .theme-sidebar-link.active {
        @apply shadow-lg;
        background-image: linear-gradient(120deg, var(--theme-primary), var(--theme-primary-soft));
        color: #fff;
    }

    .theme-sidebar-group {
        border: 1px solid color-mix(in srgb, var(--theme-border) 78%, var(--theme-primary) 22%);
        border-radius: 1rem;
        background: color-mix(in srgb, var(--theme-surface) 98%, var(--theme-primary) 2%);
    }

    .theme-sidebar-sublink {
        @apply flex items-center rounded-lg px-3 py-2 text-sm transition;
        color: var(--theme-muted);
    }

    .theme-sidebar-sublink:hover {
        background: color-mix(in srgb, var(--theme-primary) 10%, transparent 90%);
        color: var(--theme-text);
    }

    .theme-sidebar-sublink.active {
        background: color-mix(in srgb, var(--theme-primary) 18%, transparent 82%);
        color: var(--theme-primary-strong);
        font-weight: 600;
    }

    .public-sidebar-desktop-toggle {
        box-shadow: var(--theme-shadow);
        transition:
            left 280ms ease,
            right 280ms ease,
            transform 220ms ease;
    }

    .public-sidebar-header-main {
        min-width: 0;
    }

    .public-sidebar-icon,
    .public-sidebar-subicon {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        flex-shrink: 0;
        border: 1px solid color-mix(in srgb, var(--theme-primary) 24%, var(--theme-border) 76%);
        background: color-mix(in srgb, var(--theme-primary) 8%, var(--theme-surface) 92%);
        color: var(--theme-primary);
    }

    .public-sidebar-icon {
        width: 1.9rem;
        height: 1.9rem;
        border-radius: 0.7rem;
    }

    .public-sidebar-subicon {
        width: 1.55rem;
        height: 1.55rem;
        border-radius: 0.55rem;
    }

    .public-sidebar-whatsapp {
        min-height: 2.55rem;
    }

    .theme-notification-item {
        width: 100%;
        display: flex;
        align-items: flex-start;
        gap: 0.6rem;
        padding: 0.65rem 0.75rem;
        text-align: start;
        border-bottom: 1px solid color-mix(in srgb, var(--theme-border) 86%, transparent 14%);
        transition: background-color 180ms ease;
    }

    .theme-notification-item:last-child {
        border-bottom: 0;
    }

    .theme-notification-item:hover {
        background: color-mix(in srgb, var(--theme-primary) 8%, transparent 92%);
    }

    .theme-notification-item.is-unread {
        background: color-mix(in srgb, var(--theme-primary) 14%, transparent 86%);
    }

    .theme-notification-dot {
        width: 0.5rem;
        height: 0.5rem;
        border-radius: 999px;
        margin-top: 0.4rem;
        flex-shrink: 0;
        background: color-mix(in srgb, var(--theme-primary) 70%, #ffffff 30%);
    }

    .theme-notification-dot.is-info {
        background: color-mix(in srgb, var(--theme-accent) 62%, var(--theme-primary) 38%);
    }

    .theme-notification-dot.is-success {
        background: #22c55e;
    }

    .theme-notification-dot.is-warning {
        background: #f59e0b;
    }

    .theme-notification-dot.is-danger {
        background: #ef4444;
    }

    .theme-notification-detail-panel {
        width: min(92vw, 32rem);
        max-height: 88vh;
        overflow-y: auto;
        text-align: center;
        border-radius: 1.6rem;
    }

    .theme-notification-detail-icon {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        width: 5rem;
        height: 5rem;
        border-radius: 999px;
        border: 4px solid #f59e0b;
        color: #f59e0b;
        font-size: 2.25rem;
        font-weight: 700;
        line-height: 1;
    }

    .theme-notification-detail-icon.is-info {
        border-color: color-mix(in srgb, var(--theme-primary) 78%, #ffffff 22%);
        color: var(--theme-primary);
    }

    .theme-notification-detail-icon.is-success {
        border-color: #22c55e;
        color: #22c55e;
    }

    .theme-notification-detail-icon.is-warning {
        border-color: #f59e0b;
        color: #f59e0b;
    }

    .theme-notification-detail-icon.is-danger {
        border-color: #ef4444;
        color: #ef4444;
    }

    .theme-notification-detail-meta {
        margin-top: 1rem;
        border: 1px solid color-mix(in srgb, var(--theme-primary) 28%, var(--theme-border) 72%);
        background: color-mix(in srgb, var(--theme-primary) 8%, var(--theme-surface) 92%);
        border-radius: 1rem;
        padding: 0.85rem;
        text-align: start;
        max-height: 11rem;
        overflow-y: auto;
    }

    .theme-notification-detail-actions .theme-btn-primary,
    .theme-notification-detail-actions .theme-btn-outline {
        min-width: 8.75rem;
        justify-content: center;
    }

    .theme-chip {
        @apply inline-flex items-center gap-1 rounded-lg px-2.5 py-1 text-xs font-semibold;
        border: 1px solid color-mix(in srgb, var(--theme-primary) 22%, transparent 78%);
        color: var(--theme-primary);
        background: color-mix(in srgb, var(--theme-primary) 10%, transparent 90%);
    }

    .theme-btn-primary {
        @apply inline-flex items-center justify-center gap-1 rounded-xl px-4 py-2 text-sm font-semibold text-white shadow-sm transition whitespace-nowrap;
        background-image: linear-gradient(130deg, var(--theme-primary), var(--theme-primary-soft));
        line-height: 1.15;
        text-align: center;
    }

    .theme-btn-primary:hover {
        filter: brightness(1.05);
    }

    .theme-btn-outline {
        @apply inline-flex items-center justify-center gap-1 rounded-xl px-3 py-2 text-sm font-medium transition whitespace-nowrap;
        border: 1px solid var(--theme-border);
        background: var(--theme-surface);
        color: var(--theme-text);
        line-height: 1.15;
        text-align: center;
    }

    .theme-btn-outline:hover {
        border-color: color-mix(in srgb, var(--theme-primary) 45%, transparent 55%);
        color: var(--theme-primary);
        background: color-mix(in srgb, var(--theme-primary) 6%, var(--theme-surface) 94%);
    }

    .dark .theme-btn-outline {
        background: color-mix(in srgb, var(--theme-surface) 90%, #1d2b67 10%);
        color: #edf3ff;
        border-color: color-mix(in srgb, var(--theme-primary-soft) 24%, var(--theme-border) 76%);
    }

    .dark .theme-btn-outline:hover {
        color: #ffffff;
        border-color: color-mix(in srgb, var(--theme-primary-soft) 56%, var(--theme-border) 44%);
        background: color-mix(in srgb, var(--theme-primary) 24%, var(--theme-surface) 76%);
    }

    .dark .theme-sidebar-link {
        color: #e4eeff;
    }

    .dark .theme-sidebar-link:hover {
        background: color-mix(in srgb, var(--theme-primary) 22%, transparent 78%);
    }

    .dark .theme-sidebar-group {
        border-color: color-mix(in srgb, var(--theme-primary-soft) 34%, var(--theme-border) 66%);
        background: color-mix(in srgb, var(--theme-surface) 92%, #0f1740 8%);
    }

    .dark .theme-sidebar-sublink {
        color: #bdc9ee;
    }

    .dark .theme-sidebar-sublink:hover {
        color: #f1f5ff;
        background: color-mix(in srgb, var(--theme-primary) 24%, transparent 76%);
    }

    .dark .theme-sidebar-sublink.active {
        color: #ffffff;
        background: color-mix(in srgb, var(--theme-primary) 34%, transparent 66%);
    }

    .dark .public-sidebar-icon,
    .dark .public-sidebar-subicon {
        border-color: color-mix(in srgb, var(--theme-primary-soft) 32%, var(--theme-border) 68%);
        background: color-mix(in srgb, var(--theme-primary) 22%, var(--theme-surface) 78%);
        color: #eef3ff;
    }

    .dark .theme-notification-item {
        border-bottom-color: color-mix(in srgb, var(--theme-primary-soft) 14%, var(--theme-border) 86%);
    }

    .dark .theme-notification-item:hover {
        background: color-mix(in srgb, var(--theme-primary) 26%, transparent 74%);
    }

    .dark .theme-notification-item.is-unread {
        background: color-mix(in srgb, var(--theme-primary) 30%, transparent 70%);
    }

    .dark .theme-notification-detail-meta {
        border-color: color-mix(in srgb, var(--theme-primary-soft) 40%, var(--theme-border) 60%);
        background: color-mix(in srgb, var(--theme-primary) 20%, var(--theme-surface) 80%);
    }

    .dark .theme-chip {
        color: #dce8ff;
        border-color: color-mix(in srgb, var(--theme-primary) 45%, transparent 55%);
        background: color-mix(in srgb, var(--theme-primary) 24%, transparent 76%);
    }

    .theme-system-footer {
        border-top: 1px solid var(--theme-border);
        background: color-mix(in srgb, var(--theme-surface) 92%, #f5f8ff 8%);
        backdrop-filter: blur(12px);
        box-shadow: 0 -14px 30px -24px rgba(17, 4, 122, 0.35);
    }

    .theme-system-footer-inner {
        @apply h-full flex items-center;
    }

    .theme-system-footer-link {
        @apply rounded-md px-2 py-0.5 text-[11px] font-semibold transition;
        color: var(--theme-primary);
        border: 1px solid color-mix(in srgb, var(--theme-primary) 35%, transparent 65%);
        background: color-mix(in srgb, var(--theme-primary) 11%, transparent 89%);
        white-space: nowrap;
    }

    .theme-system-footer-link:hover {
        border-color: color-mix(in srgb, var(--theme-primary) 55%, transparent 45%);
        background: color-mix(in srgb, var(--theme-primary) 17%, transparent 83%);
    }

    .theme-system-footer-pill {
        @apply inline-flex items-center rounded-md px-2 py-0.5 text-[11px] font-semibold;
        color: #f8fafc;
        background-image: linear-gradient(130deg, var(--theme-primary), var(--theme-primary-soft));
    }

    .theme-system-footer-divider {
        width: 1px;
        height: 14px;
        background: color-mix(in srgb, var(--theme-border) 72%, var(--theme-muted) 28%);
    }

    .dark .theme-system-footer {
        border-top-color: color-mix(in srgb, var(--theme-primary-soft) 24%, var(--theme-border) 76%);
        background: color-mix(in srgb, #101a41 86%, var(--theme-surface) 14%);
        box-shadow: 0 -12px 28px -22px rgba(2, 8, 23, 0.92);
    }

    .dark .theme-system-footer-link {
        color: #e5edff;
        border-color: color-mix(in srgb, var(--theme-primary-soft) 40%, var(--theme-border) 60%);
        background: color-mix(in srgb, var(--theme-primary) 28%, var(--theme-surface) 72%);
    }

    .dark .theme-system-footer-link:hover {
        color: #ffffff;
        border-color: color-mix(in srgb, var(--theme-primary-soft) 58%, var(--theme-border) 42%);
        background: color-mix(in srgb, var(--theme-primary) 42%, var(--theme-surface) 58%);
    }

    .permissions-groups-scroll {
        scrollbar-gutter: stable;
        scrollbar-width: auto;
        scrollbar-color:
            color-mix(in srgb, var(--theme-primary) 58%, transparent 42%)
            color-mix(in srgb, var(--theme-border) 78%, transparent 22%);
    }

    .permissions-groups-scroll::-webkit-scrollbar {
        width: 10px;
    }

    .permissions-groups-scroll::-webkit-scrollbar-track {
        border-radius: 999px;
        background: color-mix(in srgb, var(--theme-border) 74%, transparent 26%);
    }

    .permissions-groups-scroll::-webkit-scrollbar-thumb {
        border-radius: 999px;
        border: 2px solid color-mix(in srgb, var(--theme-surface) 82%, transparent 18%);
        background-clip: padding-box;
        background: color-mix(in srgb, var(--theme-primary) 62%, transparent 38%);
    }

    .permissions-groups-scroll::-webkit-scrollbar-thumb:hover {
        background: color-mix(in srgb, var(--theme-primary-soft) 72%, var(--theme-primary) 28%);
    }

    .admin-sidebar {
        transition: transform 280ms ease;
    }

    .sidebar-hidden-ltr {
        transform: translateX(-100%);
    }

    .sidebar-hidden-rtl {
        transform: translateX(100%);
    }

    .sidebar-open {
        transform: translateX(0);
    }

    .admin-content-shell {
        min-height: 100vh;
    }

    .admin-sidebar-desktop-hidden {
        transform: translateX(-110%) !important;
    }

    html[dir='rtl'] .admin-sidebar-desktop-hidden {
        transform: translateX(110%) !important;
    }

    .public-sidebar {
        width: 18rem;
        overflow: visible;
        transition:
            transform 280ms ease,
            width 280ms ease;
    }

    .public-content-shell {
        min-height: 100vh;
    }

    .public-sidebar-desktop-hidden {
        /* Desktop compact mode handled inside the lg media query. */
    }

    @media (max-width: 640px) {
        .theme-system-footer-inner {
            font-size: 11px;
        }

        .theme-confirm-panel {
            border-radius: 1.2rem;
            padding: 1.45rem 1rem 1.1rem;
        }

        .theme-confirm-title {
            font-size: 1.35rem;
        }

        .theme-confirm-message {
            font-size: 0.92rem;
        }

        .theme-confirm-icon {
            width: 4.4rem;
            height: 4.4rem;
            font-size: 2rem;
            border-width: 3px;
        }

        .theme-confirm-actions {
            margin-top: 1.05rem;
            gap: 0.5rem;
        }

        .theme-notification-detail-panel {
            width: min(94vw, 28rem);
            border-radius: 1.35rem;
        }

        .theme-notification-detail-icon {
            width: 4.4rem;
            height: 4.4rem;
            font-size: 2rem;
            border-width: 3px;
        }
    }

    @media (min-width: 1024px) {
        .admin-sidebar {
            transform: translateX(0) !important;
        }

        .admin-sidebar.admin-sidebar-desktop-hidden {
            transform: translateX(-110%) !important;
        }

        html[dir='rtl'] .admin-sidebar.admin-sidebar-desktop-hidden {
            transform: translateX(110%) !important;
        }

        .admin-content-shell {
            padding-left: 18rem;
        }

        html[dir='rtl'] .admin-content-shell {
            padding-left: 0;
            padding-right: 18rem;
        }

        .admin-content-shell.admin-content-shell-collapsed {
            padding-left: 0;
            padding-right: 0;
        }

        .public-sidebar {
            transform: translateX(0) !important;
        }

        .public-sidebar.public-sidebar-desktop-hidden {
            transform: translateX(0) !important;
            width: 5.5rem;
        }

        html[dir='rtl'] .public-sidebar.public-sidebar-desktop-hidden {
            transform: translateX(0) !important;
        }

        .public-content-shell {
            padding-left: 18rem;
        }

        html[dir='rtl'] .public-content-shell {
            padding-left: 0;
            padding-right: 18rem;
        }

        .public-content-shell.public-content-shell-collapsed {
            padding-left: 5.5rem;
            padding-right: 0;
        }

        html[dir='rtl'] .public-content-shell.public-content-shell-collapsed {
            padding-left: 0;
            padding-right: 5.5rem;
        }

        .public-sidebar.public-sidebar-desktop-hidden .public-sidebar-header {
            padding-left: 0.65rem;
            padding-right: 0.65rem;
        }

        .public-sidebar.public-sidebar-desktop-hidden .public-sidebar-header-main {
            display: flex;
            justify-content: center;
            align-items: center;
        }

        .public-sidebar.public-sidebar-desktop-hidden .public-sidebar-title-wrap,
        .public-sidebar.public-sidebar-desktop-hidden .public-sidebar-subtitle,
        .public-sidebar.public-sidebar-desktop-hidden .public-sidebar-label,
        .public-sidebar.public-sidebar-desktop-hidden .public-sidebar-tail,
        .public-sidebar.public-sidebar-desktop-hidden .public-sidebar-chevron,
        .public-sidebar.public-sidebar-desktop-hidden .public-locale-country {
            display: none !important;
        }

        .public-sidebar.public-sidebar-desktop-hidden .public-sidebar-mini-brand {
            display: inline-flex !important;
            align-items: center;
            justify-content: center;
            width: 2.35rem;
            height: 2.35rem;
            border-radius: 0.85rem;
            font-size: 0.78rem;
            font-weight: 700;
            color: #fff;
            background-image: linear-gradient(140deg, var(--theme-primary), var(--theme-primary-soft));
        }

        .public-sidebar.public-sidebar-desktop-hidden .theme-sidebar-link,
        .public-sidebar.public-sidebar-desktop-hidden .theme-sidebar-sublink {
            justify-content: center;
            padding-left: 0.55rem;
            padding-right: 0.55rem;
        }

        .public-sidebar.public-sidebar-desktop-hidden .theme-sidebar-group {
            padding-top: 0.3rem;
            padding-bottom: 0.3rem;
        }

        .public-sidebar.public-sidebar-desktop-hidden .public-sidebar-submenu {
            display: block !important;
        }

        .public-sidebar.public-sidebar-desktop-hidden .public-sidebar-footer {
            padding-left: 0.5rem;
            padding-right: 0.5rem;
        }

        .public-sidebar.public-sidebar-desktop-hidden .public-sidebar-footer .theme-btn-outline {
            padding-left: 0.4rem !important;
            padding-right: 0.4rem !important;
        }

        .public-sidebar.public-sidebar-desktop-hidden .public-locale-code {
            font-size: 0.65rem;
            letter-spacing: 0;
        }

        .public-sidebar.public-sidebar-desktop-hidden .public-sidebar-whatsapp {
            position: relative;
            font-size: 0;
            min-height: 2.4rem;
            padding-left: 0 !important;
            padding-right: 0 !important;
        }

        .public-sidebar.public-sidebar-desktop-hidden .public-sidebar-whatsapp::before {
            content: 'WA';
            font-size: 0.72rem;
            font-weight: 700;
            letter-spacing: 0.03em;
        }
    }

    [x-cloak] {
        display: none !important;
    }
}