@import 'Application.Client.bzg5yq9sdv.bundle.scp.css';
@import '_content/Microsoft.FluentUI.AspNetCore.Components/Microsoft.FluentUI.AspNetCore.Components.ewdlgswx1m.bundle.scp.css';

/* _content/Application/Components/Pages/Home.razor.rz.scp.css */
/* ── Home page ─────────────────────────────────────── */
.hp-root[b-ilyibdgs50] {
    max-width: 860px;
    margin: 0 auto;
    padding: 40px 24px 60px;
}

/* Hero */
.hp-hero[b-ilyibdgs50] { margin-bottom: 32px; }

.hp-hero-eyebrow[b-ilyibdgs50] {
    display: inline-flex; align-items: center; gap: 7px;
    font-size: 12px; font-weight: 500;
    color: #6b7280;
    background: #f3f4f6; border: 1px solid #e5e7eb; border-radius: 6px;
    padding: 4px 10px; margin-bottom: 16px;
}
.hp-dot[b-ilyibdgs50] {
    width: 6px; height: 6px; border-radius: 50%;
    background: #22c55e; flex-shrink: 0;
}

.hp-hero-title[b-ilyibdgs50] {
    margin: 0 0 10px;
    font-size: clamp(24px, 3.5vw, 36px);
    font-weight: 700; letter-spacing: -.025em;
    color: #111827; line-height: 1.2;
}

.hp-hero-sub[b-ilyibdgs50] {
    margin: 0 0 24px;
    font-size: 15px; color: #6b7280; line-height: 1.6;
    max-width: 560px;
}

.hp-hero-actions[b-ilyibdgs50] { display: flex; gap: 10px; flex-wrap: wrap; }

.hp-btn-primary[b-ilyibdgs50] {
    display: inline-flex; align-items: center; gap: 7px;
    padding: 9px 16px;
    background: #6366f1; color: white;
    border-radius: 8px; border: none; cursor: pointer;
    font-size: 13.5px; font-weight: 600; text-decoration: none;
    transition: background .15s;
}
.hp-btn-primary:hover[b-ilyibdgs50] { background: #4f46e5; }

.hp-btn-ghost[b-ilyibdgs50] {
    display: inline-flex; align-items: center; gap: 7px;
    padding: 9px 16px;
    background: white; color: #374151;
    border: 1px solid #e5e7eb; border-radius: 8px; cursor: pointer;
    font-size: 13.5px; font-weight: 500; text-decoration: none;
    transition: background .15s, border-color .15s;
}
.hp-btn-ghost:hover[b-ilyibdgs50] { background: #f9fafb; border-color: #d1d5db; }

/* Divider */
.hp-divider[b-ilyibdgs50] { height: 1px; background: #e5e7eb; margin-bottom: 20px; }

.hp-section-label[b-ilyibdgs50] {
    font-size: 11px; font-weight: 600; letter-spacing: .08em;
    text-transform: uppercase; color: #9ca3af;
    margin-bottom: 14px;
}

/* Cards grid */
.hp-cards[b-ilyibdgs50] {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
    gap: 12px;
}

.hp-card[b-ilyibdgs50] {
    display: flex; align-items: flex-start; gap: 14px;
    padding: 16px;
    background: white; border: 1px solid #e5e7eb; border-radius: 10px;
    text-decoration: none; color: inherit;
    transition: border-color .15s, box-shadow .15s;
    cursor: pointer;
}
.hp-card:not(.hp-card-soon):hover[b-ilyibdgs50] {
    border-color: #c7d2fe;
    box-shadow: 0 2px 12px rgba(99,102,241,.07);
}
.hp-card-soon[b-ilyibdgs50] { opacity: .65; cursor: default; }

.hp-card-icon[b-ilyibdgs50] {
    width: 36px; height: 36px; border-radius: 8px; flex-shrink: 0;
    display: flex; align-items: center; justify-content: center;
}
.hp-icon-indigo[b-ilyibdgs50] { background: #eef2ff; color: #6366f1; }
.hp-icon-violet[b-ilyibdgs50] { background: #f5f3ff; color: #7c3aed; }
.hp-icon-emerald[b-ilyibdgs50] { background: #ecfdf5; color: #059669; }
.hp-icon-amber[b-ilyibdgs50] { background: #fffbeb; color: #d97706; }
.hp-icon-sky[b-ilyibdgs50] { background: #e0f2fe; color: #0284c7; }
.hp-icon-gray[b-ilyibdgs50] { background: #f3f4f6; color: #6b7280; }

.hp-card-body[b-ilyibdgs50] { flex: 1; min-width: 0; }
.hp-card-title[b-ilyibdgs50] {
    font-size: 13.5px; font-weight: 600; color: #111827;
    margin-bottom: 3px; display: flex; align-items: center; gap: 7px;
}
.hp-card-desc[b-ilyibdgs50] { font-size: 12.5px; color: #6b7280; line-height: 1.5; }

.hp-card-arrow[b-ilyibdgs50] { color: #d1d5db; flex-shrink: 0; align-self: center; }
.hp-card:hover .hp-card-arrow[b-ilyibdgs50] { color: #6366f1; }

.hp-soon-chip[b-ilyibdgs50] {
    font-size: 10px; font-weight: 500; letter-spacing: .06em;
    text-transform: uppercase; color: #9ca3af;
    background: #f3f4f6; border: 1px solid #e5e7eb;
    padding: 2px 6px; border-radius: 4px;
}

@media (max-width: 600px) {
    .hp-root[b-ilyibdgs50] { padding: 24px 16px 48px; }
    .hp-cards[b-ilyibdgs50] { grid-template-columns: 1fr; }
}

/* ── Dark theme ─────────────────────────────────────── */
/* :global([data-theme="dark"]) prefixes the <html> attribute (set outside this
   component) onto scoped selectors so these win over the light defaults above. */
:global([data-theme="dark"]) .hp-hero-eyebrow[b-ilyibdgs50] { color: #9aa1ac; background: #1e222b; border-color: #2b303b; }
:global([data-theme="dark"]) .hp-hero-title[b-ilyibdgs50] { color: #f3f4f6; }
:global([data-theme="dark"]) .hp-hero-sub[b-ilyibdgs50] { color: #9aa1ac; }
:global([data-theme="dark"]) .hp-btn-ghost[b-ilyibdgs50] { background: #181a20; color: #e6e9ef; border-color: #2b303b; }
:global([data-theme="dark"]) .hp-btn-ghost:hover[b-ilyibdgs50] { background: #20242c; border-color: #3a4150; }
:global([data-theme="dark"]) .hp-divider[b-ilyibdgs50] { background: #262a33; }
:global([data-theme="dark"]) .hp-section-label[b-ilyibdgs50] { color: #8b909c; }
:global([data-theme="dark"]) .hp-card[b-ilyibdgs50] { background: #181a20; border-color: #2b303b; }
:global([data-theme="dark"]) .hp-card:not(.hp-card-soon):hover[b-ilyibdgs50] { border-color: #4f46e5; box-shadow: 0 2px 12px rgba(99,102,241,.18); }
:global([data-theme="dark"]) .hp-card-title[b-ilyibdgs50] { color: #f3f4f6; }
:global([data-theme="dark"]) .hp-card-desc[b-ilyibdgs50] { color: #9aa1ac; }
:global([data-theme="dark"]) .hp-card-arrow[b-ilyibdgs50] { color: #4b515e; }
:global([data-theme="dark"]) .hp-icon-indigo[b-ilyibdgs50] { background: rgba(99,102,241,.16); color: #a5b4fc; }
:global([data-theme="dark"]) .hp-icon-violet[b-ilyibdgs50] { background: rgba(124,58,237,.18); color: #c4b5fd; }
:global([data-theme="dark"]) .hp-icon-emerald[b-ilyibdgs50] { background: rgba(5,150,105,.18); color: #6ee7b7; }
:global([data-theme="dark"]) .hp-icon-amber[b-ilyibdgs50] { background: rgba(217,119,6,.18); color: #fcd34d; }
:global([data-theme="dark"]) .hp-icon-sky[b-ilyibdgs50] { background: rgba(2,132,199,.18); color: #7dd3fc; }
:global([data-theme="dark"]) .hp-icon-gray[b-ilyibdgs50] { background: #1e222b; color: #9aa1ac; }
:global([data-theme="dark"]) .hp-soon-chip[b-ilyibdgs50] { color: #8b909c; background: #1e222b; border-color: #2b303b; }