/*
 * Delcon Office theme, on top of Filament's own styles. Plain CSS (no build
 * step): loaded from AdminPanelProvider. Light and dark both use the brand navy
 * and red from the logo; dark mode is Filament's `.dark` class on <html>.
 *
 * Card accents (dc-accent-*) are identity colours for the dashboard cards only;
 * green/amber/red keep their usual meaning (good / attention / problem).
 */

:root {
    --dc-navy: #1d4a6e;
    --dc-navy-deep: #12324c;
    --dc-red: #a3232a;
    --dc-bg: #f3f6fa;
    --dc-surface: #ffffff;
    --dc-border: rgba(15, 35, 60, .08);
    --dc-shadow: 0 1px 2px rgba(15, 35, 60, .05), 0 4px 16px rgba(15, 35, 60, .06);
    --dc-shadow-hover: 0 2px 4px rgba(15, 35, 60, .06), 0 12px 28px rgba(15, 35, 60, .12);
    --dc-head: #f6f8fb;
    --dc-stripe: #fafbfd;
    --dc-hover: #eef3f9;
    --dc-muted: #64748b;

    --dc-blue: #2a78d6;
    --dc-teal: #0f8b8d;
    --dc-violet: #6d4fd1;
    --dc-orange: #d95926;
    --dc-green: #15803d;
    --dc-amber: #b45309;
    --dc-crimson: #b42318;
    --dc-slate: #475569;
}

.dark {
    --dc-bg: #0b1220;
    --dc-surface: #111a2b;
    --dc-border: rgba(148, 170, 200, .12);
    --dc-shadow: 0 1px 2px rgba(0, 0, 0, .3), 0 6px 20px rgba(0, 0, 0, .25);
    --dc-shadow-hover: 0 2px 6px rgba(0, 0, 0, .35), 0 14px 32px rgba(0, 0, 0, .4);
    --dc-head: #152036;
    --dc-stripe: #0f1828;
    --dc-hover: #18253c;
    --dc-muted: #94a3b8;

    --dc-blue: #5b9ef0;
    --dc-teal: #2bb3b1;
    --dc-violet: #9b84f0;
    --dc-orange: #f08155;
    --dc-green: #34c46b;
    --dc-amber: #f0a43a;
    --dc-crimson: #f26b5e;
    --dc-slate: #94a3b8;
}

/* ---------- Page ---------- */

.fi-body {
    background:
        radial-gradient(1200px 400px at 85% -120px, rgba(42, 120, 214, .08), transparent 70%),
        radial-gradient(900px 360px at -10% -80px, rgba(163, 35, 42, .05), transparent 70%),
        var(--dc-bg);
}

.fi-header-heading {
    letter-spacing: -.02em;
}

/* ---------- Top bar and sidebar ---------- */

.fi-topbar > nav,
.fi-topbar {
    background: color-mix(in srgb, var(--dc-surface) 88%, transparent) !important;
    backdrop-filter: saturate(160%) blur(10px);
    border-bottom: 1px solid var(--dc-border);
    box-shadow: none;
}

.fi-sidebar {
    background: var(--dc-surface);
    border-inline-end: 1px solid var(--dc-border);
}

.fi-sidebar-group-label {
    text-transform: uppercase;
    font-size: 11px;
    letter-spacing: .08em;
    color: var(--dc-muted);
}

.fi-sidebar-item-btn {
    border-radius: 10px;
    transition: background-color .15s ease, color .15s ease;
}

.fi-sidebar-item-btn:hover {
    background: var(--dc-hover);
}

.fi-sidebar-item.fi-active > .fi-sidebar-item-btn {
    background: linear-gradient(90deg, color-mix(in srgb, var(--dc-navy) 14%, transparent), color-mix(in srgb, var(--dc-navy) 4%, transparent));
    box-shadow: inset 3px 0 0 var(--dc-red);
}

.fi-sidebar-item.fi-active > .fi-sidebar-item-btn .fi-sidebar-item-label,
.fi-sidebar-item.fi-active > .fi-sidebar-item-btn > .fi-icon {
    color: var(--dc-navy);
    font-weight: 600;
}

.dark .fi-sidebar-item.fi-active > .fi-sidebar-item-btn {
    background: linear-gradient(90deg, rgba(91, 158, 240, .18), rgba(91, 158, 240, .04));
}

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

/* ---------- Sections and cards ---------- */

.fi-section {
    border-radius: 16px !important;
    background: var(--dc-surface);
    box-shadow: var(--dc-shadow) !important;
    border: 1px solid var(--dc-border);
    --tw-ring-shadow: 0 0 #0000 !important;
}

/* ---------- Dashboard number cards ---------- */

.fi-wi-stats-overview-stat {
    --dc-accent: var(--dc-navy);
    position: relative;
    overflow: hidden;
    border-radius: 16px !important;
    background:
        linear-gradient(160deg, color-mix(in srgb, var(--dc-accent) 9%, transparent) 0%, transparent 55%),
        var(--dc-surface) !important;
    border: 1px solid var(--dc-border);
    box-shadow: var(--dc-shadow) !important;
    --tw-ring-shadow: 0 0 #0000 !important;
    transition: transform .18s ease, box-shadow .18s ease;
}

.fi-wi-stats-overview-stat::before {
    content: "";
    position: absolute;
    inset: 0 0 auto 0;
    height: 4px;
    background: linear-gradient(90deg, var(--dc-accent), color-mix(in srgb, var(--dc-accent) 45%, transparent));
}

a.fi-wi-stats-overview-stat:hover {
    transform: translateY(-2px);
    box-shadow: var(--dc-shadow-hover) !important;
}

.fi-wi-stats-overview-stat-label-ctn > .fi-icon {
    width: 2.1rem;
    height: 2.1rem;
    padding: .45rem;
    border-radius: 10px;
    color: var(--dc-accent);
    background: color-mix(in srgb, var(--dc-accent) 14%, transparent);
}

.fi-wi-stats-overview-stat-label {
    font-weight: 600;
    color: var(--dc-muted);
}

.fi-wi-stats-overview-stat-value {
    font-size: 1.7rem !important;
    font-weight: 700 !important;
    letter-spacing: -.02em;
    font-variant-numeric: tabular-nums;
}

.dc-accent-navy { --dc-accent: var(--dc-navy); }
.dark .dc-accent-navy { --dc-accent: #7fb0e6; }
.dc-accent-blue { --dc-accent: var(--dc-blue); }
.dc-accent-teal { --dc-accent: var(--dc-teal); }
.dc-accent-violet { --dc-accent: var(--dc-violet); }
.dc-accent-orange { --dc-accent: var(--dc-orange); }
.dc-accent-green { --dc-accent: var(--dc-green); }
.dc-accent-amber { --dc-accent: var(--dc-amber); }
.dc-accent-red { --dc-accent: var(--dc-crimson); }
.dc-accent-slate { --dc-accent: var(--dc-slate); }

/* ---------- Tables ---------- */

.fi-ta-ctn {
    border-radius: 16px !important;
    overflow: hidden;
    background: var(--dc-surface);
    box-shadow: var(--dc-shadow) !important;
    border: 1px solid var(--dc-border);
    --tw-ring-shadow: 0 0 #0000 !important;
}

.fi-ta-header-cell {
    background: var(--dc-head);
    text-transform: uppercase;
    font-size: 11px !important;
    letter-spacing: .06em;
    color: var(--dc-muted) !important;
}

.fi-ta-row.fi-striped {
    background: var(--dc-stripe) !important;
}

.fi-ta-row {
    transition: background-color .12s ease;
}

.fi-ta-row:hover {
    background: var(--dc-hover) !important;
}

.fi-ta-cell {
    font-variant-numeric: tabular-nums;
}

/* ---------- Badges, tabs, buttons ---------- */

.fi-badge {
    border-radius: 999px !important;
    padding-inline: .6rem;
    font-weight: 600;
}

.fi-tabs {
    border-radius: 14px !important;
    background: var(--dc-surface);
    box-shadow: var(--dc-shadow);
    border: 1px solid var(--dc-border);
}

.fi-tabs-item.fi-active {
    background: color-mix(in srgb, var(--dc-navy) 12%, transparent) !important;
}

.dark .fi-tabs-item.fi-active {
    background: rgba(91, 158, 240, .16) !important;
}

.fi-btn.fi-color-primary:not(.fi-outlined) {
    background-image: linear-gradient(180deg, rgba(255, 255, 255, .10), rgba(255, 255, 255, 0));
    box-shadow: 0 1px 2px rgba(15, 35, 60, .15);
}

/* ---------- Sign-in pages ---------- */

.fi-simple-layout {
    background:
        radial-gradient(800px 500px at 10% 10%, rgba(42, 120, 214, .22), transparent 60%),
        radial-gradient(700px 500px at 90% 90%, rgba(163, 35, 42, .18), transparent 60%),
        linear-gradient(135deg, #0f2a43 0%, #1d4a6e 55%, #12324c 100%);
}

.fi-simple-main {
    border-radius: 20px !important;
    box-shadow: 0 24px 60px rgba(4, 16, 30, .45) !important;
    border: 1px solid rgba(255, 255, 255, .08);
}

/* ---------- Dashboard welcome banner ---------- */

.dc-welcome {
    position: relative;
    overflow: hidden;
    border-radius: 18px;
    padding: 22px 24px;
    color: #fff;
    background:
        radial-gradient(500px 220px at 100% 0%, rgba(163, 35, 42, .55), transparent 70%),
        radial-gradient(420px 220px at 0% 100%, rgba(42, 120, 214, .45), transparent 70%),
        linear-gradient(120deg, #12324c 0%, #1d4a6e 60%, #245b86 100%);
    box-shadow: var(--dc-shadow);
}

.dc-welcome::after {
    content: "";
    position: absolute;
    right: -30px;
    bottom: -40px;
    width: 220px;
    height: 220px;
    background: url('/images/brand/icon-192.png') center / contain no-repeat;
    opacity: .08;
    filter: brightness(10);
}

.dc-welcome h2 {
    font-size: 1.45rem;
    font-weight: 700;
    letter-spacing: -.02em;
    margin: 0;
}

.dc-welcome .dc-sub {
    opacity: .85;
    margin-top: 4px;
    font-size: .95rem;
}

.dc-welcome .dc-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-top: 16px;
    position: relative;
    z-index: 1;
}

.dc-welcome .dc-actions a {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 7px 12px;
    border-radius: 10px;
    font-size: .875rem;
    font-weight: 600;
    color: #fff;
    text-decoration: none;
    background: rgba(255, 255, 255, .12);
    border: 1px solid rgba(255, 255, 255, .18);
    transition: background-color .15s ease;
}

.dc-welcome .dc-actions a:hover {
    background: rgba(255, 255, 255, .22);
}

.dc-welcome .dc-actions svg {
    width: 16px;
    height: 16px;
}

/* ---------- Small screens ---------- */

@media (max-width: 640px) {
    .fi-wi-stats-overview-stat-value { font-size: 1.4rem !important; }
    .dc-welcome { padding: 18px; }
}

/* Sign-in: the logo spans the width of the sign-in box. */
.fi-simple-header .fi-logo {
    height: auto !important;
    width: 100%;
    max-width: 100%;
    margin-bottom: .5rem;
}