@import url('https://fonts.googleapis.com/css2?family=Outfit:wght@100..900&display=swap');

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

@media print {
    [data-content-protection="true"] {
        display: none !important;
    }

    body::before {
        content: "Protected CEPI content cannot be printed.";
        display: block;
        padding: 2rem;
        font: 700 18px/1.5 sans-serif;
        color: #040D1E;
    }
}

html.cepi-content-protected,
html.cepi-content-protected body {
    -webkit-touch-callout: none;
    -webkit-user-select: none;
    user-select: none;
}

html.cepi-content-hidden [data-content-protection="true"] {
    filter: blur(18px);
    opacity: 0.08;
    pointer-events: none;
}

.cepi-content-protection-warning {
    position: fixed;
    inset: 0;
    z-index: 2147483647;
    display: none;
    align-items: center;
    justify-content: center;
    padding: 1.5rem;
    background: rgba(4, 13, 30, 0.92);
    color: #FAF6EE;
}

.cepi-content-protection-warning.is-visible {
    display: flex;
}

.cepi-content-protection-card {
    max-width: 28rem;
    border: 1px solid rgba(201, 168, 76, 0.35);
    border-radius: 12px;
    background: rgba(12, 31, 79, 0.96);
    padding: 1.5rem;
    text-align: center;
    box-shadow: 0 24px 80px rgba(0, 0, 0, 0.35);
}

.cepi-content-protection-title {
    font-size: 1.125rem;
    font-weight: 700;
    color: #D9BA6F;
}

.cepi-content-protection-copy {
    margin-top: 0.5rem;
    font-size: 0.875rem;
    line-height: 1.6;
    color: rgba(250, 246, 238, 0.8);
}

@layer components {
    .cepi-auth-shell {
        @apply relative overflow-x-hidden bg-slate-50;
    }

    .cepi-auth-shell::before {
        content: '';
        @apply absolute inset-y-0 left-0 hidden w-1/2 bg-[radial-gradient(circle_at_top_left,_rgba(70,95,255,0.18),_transparent_42%),linear-gradient(160deg,#161950_0%,#1e293b_55%,#0f172a_100%)] lg:block;
    }

    .cepi-panel {
        @apply rounded-3xl border border-slate-200/70 bg-white shadow-theme-lg;
    }

    .cepi-stat-card {
        @apply rounded-3xl border border-slate-200 bg-white p-5 shadow-theme-xs transition duration-200 hover:-translate-y-0.5 hover:shadow-theme-sm;
    }

    .cepi-sidebar-link {
        @apply flex items-center gap-3 rounded-2xl px-4 py-3 text-sm font-medium text-slate-600 transition hover:bg-slate-100 hover:text-slate-900;
    }

    .cepi-sidebar-link-active {
        @apply bg-brand-50 text-brand-700 ring-1 ring-brand-100;
    }

    .cepi-dot-pattern {
        background-image: radial-gradient(rgba(255, 255, 255, 0.18) 1px, transparent 1px);
        background-size: 18px 18px;
    }
}