/*
 * Compass admin theme — layered on top of Filament's compiled CSS (no build step needed).
 * Uses Filament's palette variables (--primary-500, --gray-200, ...).
 */

:root {
    --cp-radius: 1rem;
    --cp-shadow: 0 1px 2px rgb(15 23 42 / .04), 0 8px 24px -12px rgb(15 23 42 / .12);
    --cp-shadow-hover: 0 2px 4px rgb(15 23 42 / .05), 0 16px 32px -14px rgb(79 70 229 / .28);
    --cp-border: rgb(15 23 42 / .06);
    --cp-gradient: linear-gradient(135deg, var(--primary-500), #a855f7);
    --cp-sidebar-bg: linear-gradient(180deg, #0f172a 0%, #1e1b4b 100%);
}

.dark {
    --cp-border: rgb(255 255 255 / .06);
    --cp-shadow: 0 1px 2px rgb(0 0 0 / .3), 0 12px 32px -16px rgb(0 0 0 / .6);
    --cp-sidebar-bg: linear-gradient(180deg, #020617 0%, #111033 100%);
}

/* ---- Canvas -------------------------------------------------------------- */

.fi-body {
    background:
        radial-gradient(1200px 600px at 100% -10%, rgb(99 102 241 / .08), transparent 60%),
        radial-gradient(900px 500px at -10% 110%, rgb(168 85 247 / .06), transparent 60%),
        var(--gray-50);
    background-attachment: fixed;
}
.dark .fi-body {
    background:
        radial-gradient(1200px 600px at 100% -10%, rgb(99 102 241 / .14), transparent 60%),
        radial-gradient(900px 500px at -10% 110%, rgb(168 85 247 / .10), transparent 60%),
        var(--gray-950);
}

.fi-header-heading {
    letter-spacing: -.025em;
    font-weight: 700;
}

/* ---- Brand --------------------------------------------------------------- */

.cp-brand { display: flex; align-items: center; gap: .6rem; }
.cp-brand-mark {
    display: grid; place-items: center;
    width: 2rem; height: 2rem; border-radius: .65rem;
    background: var(--cp-gradient); color: #fff;
    box-shadow: 0 6px 16px -6px rgb(99 102 241 / .7);
}
.cp-brand-mark svg { width: 1.25rem; height: 1.25rem; }
.cp-brand-text { font-weight: 800; font-size: 1.15rem; letter-spacing: -.03em; color: var(--gray-950); }
.dark .cp-brand-text, .fi-sidebar .cp-brand-text { color: #fff; }

/* ---- Sidebar (dark, gradient) -------------------------------------------- */

.fi-sidebar {
    background: var(--cp-sidebar-bg) !important;
    border-inline-end: 1px solid rgb(255 255 255 / .04);
}
.fi-sidebar-header, .fi-sidebar-header-ctn {
    background: transparent !important;
    box-shadow: none !important;
    border: 0 !important;
}
.fi-sidebar-group-label { color: rgb(199 210 254 / .55) !important; text-transform: uppercase; font-size: .7rem; letter-spacing: .08em; }
.fi-sidebar-group-collapse-btn, .fi-sidebar-close-collapse-sidebar-btn, .fi-sidebar-open-collapse-sidebar-btn { color: rgb(199 210 254 / .6) !important; }
.fi-sidebar-item-btn { border-radius: .75rem !important; transition: background .15s ease, transform .15s ease; }
.fi-sidebar-item-label { color: rgb(226 232 240 / .82) !important; font-weight: 500; }
.fi-sidebar-item-icon { color: rgb(165 180 252 / .7) !important; }
.fi-sidebar-item-btn:hover { background: rgb(255 255 255 / .06) !important; }
.fi-sidebar-item.fi-active > .fi-sidebar-item-btn {
    background: var(--cp-gradient) !important;
    box-shadow: 0 10px 24px -12px rgb(129 140 248 / .9);
}
.fi-sidebar-item.fi-active .fi-sidebar-item-label,
.fi-sidebar-item.fi-active .fi-sidebar-item-icon { color: #fff !important; }
.fi-sidebar-item-grouped-border-part { background: rgb(255 255 255 / .15) !important; }

/* ---- Topbar -------------------------------------------------------------- */

.fi-topbar, .fi-topbar-ctn > nav {
    background: rgb(255 255 255 / .72) !important;
    backdrop-filter: saturate(180%) blur(14px);
    -webkit-backdrop-filter: saturate(180%) blur(14px);
    box-shadow: 0 1px 0 var(--cp-border) !important;
}
.dark .fi-topbar, .dark .fi-topbar-ctn > nav { background: rgb(2 6 23 / .6) !important; }

/* ---- Surfaces ------------------------------------------------------------ */

.fi-section:not(.fi-section-not-contained),
.fi-ta-ctn,
.fi-wi-stats-overview-stat,
.fi-wi-chart,
.fi-modal-window,
.fi-dropdown-panel {
    border-radius: var(--cp-radius) !important;
    box-shadow: var(--cp-shadow) !important;
    --tw-ring-color: var(--cp-border) !important;
}
.fi-section-header-heading { font-weight: 650; letter-spacing: -.01em; }

/* Stat cards: gradient accent + lift on hover */
.fi-wi-stats-overview-stat { position: relative; overflow: hidden; transition: transform .2s ease, box-shadow .2s ease; }
.fi-wi-stats-overview-stat::before {
    content: ""; position: absolute; inset: 0 0 auto 0; height: 3px; background: var(--cp-gradient); opacity: .85;
}
.fi-wi-stats-overview-stat:hover { transform: translateY(-2px); box-shadow: var(--cp-shadow-hover) !important; }
.fi-wi-stats-overview-stat-value { letter-spacing: -.03em; font-weight: 750 !important; }

/* Tables */
.fi-ta-header-cell { text-transform: uppercase; font-size: .7rem !important; letter-spacing: .06em; color: var(--gray-500) !important; }

/* Primary buttons: gradient */
.fi-btn.fi-color-primary:not(.fi-outlined):not(.fi-link) {
    background-image: var(--cp-gradient);
    border: 0;
    box-shadow: 0 8px 20px -10px rgb(99 102 241 / .85);
}
.fi-btn.fi-color-primary:not(.fi-outlined):not(.fi-link):hover { filter: brightness(1.06); }

/* ---- Login / simple pages ------------------------------------------------- */

.fi-simple-layout {
    background:
        radial-gradient(800px 500px at 15% 10%, rgb(99 102 241 / .35), transparent 60%),
        radial-gradient(700px 500px at 90% 90%, rgb(168 85 247 / .30), transparent 60%),
        radial-gradient(600px 400px at 80% 10%, rgb(14 165 233 / .20), transparent 60%),
        #0b1020;
}
.fi-simple-main {
    background: rgb(255 255 255 / .9) !important;
    backdrop-filter: blur(18px);
    -webkit-backdrop-filter: blur(18px);
    border-radius: 1.5rem !important;
    box-shadow: 0 30px 80px -30px rgb(0 0 0 / .6) !important;
    --tw-ring-color: rgb(255 255 255 / .2) !important;
}
.dark .fi-simple-main { background: rgb(15 23 42 / .82) !important; }
.fi-simple-header-heading { letter-spacing: -.03em; font-weight: 750; }

/* ---- Welcome banner ------------------------------------------------------- */

.cp-hero {
    position: relative; overflow: hidden;
    border-radius: 1.25rem; padding: 1.6rem 1.75rem;
    color: #fff;
    background:
        radial-gradient(500px 220px at 90% -20%, rgb(255 255 255 / .22), transparent 60%),
        linear-gradient(120deg, #4f46e5 0%, #7c3aed 55%, #c026d3 100%);
    box-shadow: 0 24px 48px -24px rgb(79 70 229 / .8);
}
.cp-hero h2 { font-size: 1.6rem; font-weight: 800; letter-spacing: -.03em; margin: 0; }
.cp-hero p { opacity: .85; margin-top: .25rem; }
.cp-hero-stats { display: flex; flex-wrap: wrap; gap: .75rem; margin-top: 1.1rem; }
.cp-hero-pill {
    display: inline-flex; align-items: center; gap: .45rem;
    padding: .4rem .8rem; border-radius: 999px; font-size: .85rem; font-weight: 600;
    background: rgb(255 255 255 / .16); backdrop-filter: blur(6px);
}
.cp-hero-pill b { font-size: 1rem; }
.cp-hero-ring {
    position: absolute; right: -40px; bottom: -60px; width: 220px; height: 220px; border-radius: 50%;
    border: 28px solid rgb(255 255 255 / .08);
}

/* ---- Activity feed --------------------------------------------------------- */

.cp-feed { display: flex; flex-direction: column; }
.cp-feed-item { display: flex; gap: .75rem; padding: .7rem 0; border-bottom: 1px dashed var(--cp-border); }
.cp-feed-item:last-child { border-bottom: 0; }
.cp-feed-avatar { width: 2rem; height: 2rem; border-radius: 999px; flex-shrink: 0; }
.cp-feed-text { font-size: .875rem; color: var(--gray-700); line-height: 1.35; }
.dark .cp-feed-text { color: var(--gray-300); }
.cp-feed-text b { color: var(--gray-950); font-weight: 600; }
.dark .cp-feed-text b { color: #fff; }
.cp-feed-meta { font-size: .75rem; color: var(--gray-500); margin-top: .15rem; }
.cp-feed-empty { padding: 1.5rem; text-align: center; color: var(--gray-500); }

/* ---- Kanban board ---------------------------------------------------------- */

.cp-board-toolbar { display: flex; flex-wrap: wrap; align-items: center; gap: .75rem; margin-bottom: 1rem; }
.cp-board-toolbar .cp-chip { font-size: .8rem; }
.cp-board {
    display: grid; grid-auto-flow: column; grid-auto-columns: minmax(255px, 1fr);
    gap: 1rem; overflow-x: auto; padding-bottom: 1rem; align-items: start;
}
.cp-col {
    border-radius: var(--cp-radius);
    background: rgb(255 255 255 / .55);
    border: 1px solid var(--cp-border);
    backdrop-filter: blur(6px);
    display: flex; flex-direction: column; max-height: calc(100vh - 15rem);
}
.dark .cp-col { background: rgb(255 255 255 / .03); }
.cp-col-head { display: flex; align-items: center; gap: .5rem; padding: .85rem 1rem .6rem; }
.cp-col-dot { width: .6rem; height: .6rem; border-radius: 999px; box-shadow: 0 0 0 4px rgb(0 0 0 / .04); }
.cp-col-title { font-weight: 650; font-size: .9rem; flex: 1; color: var(--gray-900); }
.dark .cp-col-title { color: #fff; }
.cp-col-count {
    font-size: .72rem; font-weight: 700; padding: .1rem .5rem; border-radius: 999px;
    background: var(--gray-100); color: var(--gray-600);
}
.dark .cp-col-count { background: rgb(255 255 255 / .08); color: var(--gray-300); }
.cp-col-body { padding: .35rem .65rem .85rem; overflow-y: auto; min-height: 120px; display: flex; flex-direction: column; gap: .6rem; }
.cp-col.cp-over { outline: 2px dashed var(--primary-400); outline-offset: -4px; background: rgb(99 102 241 / .06); }
.cp-col-empty { font-size: .8rem; color: var(--gray-400); text-align: center; padding: 1.5rem .5rem; }

.cp-card {
    position: relative;
    background: #fff; border-radius: .85rem; padding: .8rem .85rem .75rem;
    border: 1px solid var(--cp-border);
    box-shadow: 0 1px 2px rgb(15 23 42 / .05);
    cursor: grab; transition: transform .15s ease, box-shadow .15s ease;
}
.dark .cp-card { background: var(--gray-900); }
.cp-card:hover { transform: translateY(-2px); box-shadow: var(--cp-shadow-hover); }
.cp-card.cp-dragging { opacity: .45; transform: rotate(1.5deg); }
.cp-card.cp-drop-before::before {
    content: ""; position: absolute; left: .5rem; right: .5rem; top: -.42rem; height: 3px; border-radius: 3px; background: var(--primary-500);
}
.cp-card-prio { position: absolute; left: 0; top: .8rem; bottom: .8rem; width: 3px; border-radius: 0 3px 3px 0; }
.cp-card-title { font-weight: 600; font-size: .875rem; color: var(--gray-900); line-height: 1.35; display: block; }
.dark .cp-card-title { color: #fff; }
.cp-card-title:hover { color: var(--primary-600); }
.cp-card-done .cp-card-title { text-decoration: line-through; color: var(--gray-400); }
.cp-card-labels { display: flex; flex-wrap: wrap; gap: .3rem; margin-top: .5rem; }
.cp-card-foot { display: flex; align-items: center; gap: .6rem; margin-top: .65rem; font-size: .75rem; color: var(--gray-500); }
.cp-card-foot .cp-spacer { flex: 1; }
.cp-meta { display: inline-flex; align-items: center; gap: .2rem; }
.cp-meta svg { width: .9rem; height: .9rem; }
.cp-overdue { color: var(--danger-600); font-weight: 600; }

.cp-chip {
    display: inline-flex; align-items: center; gap: .25rem;
    font-size: .7rem; font-weight: 650; padding: .12rem .5rem; border-radius: 999px; line-height: 1.4;
}
.cp-avatars { display: flex; }
.cp-avatars img { width: 1.5rem; height: 1.5rem; border-radius: 999px; border: 2px solid #fff; margin-left: -.4rem; }
.dark .cp-avatars img { border-color: var(--gray-900); }
.cp-avatars img:first-child { margin-left: 0; }

/* Progress bar used in tables & infolists */
.cp-progress { display: flex; align-items: center; gap: .6rem; min-width: 140px; }
.cp-progress-track { flex: 1; height: .45rem; border-radius: 999px; background: var(--gray-200); overflow: hidden; }
.dark .cp-progress-track { background: rgb(255 255 255 / .08); }
.cp-progress-bar { height: 100%; border-radius: 999px; background: var(--cp-gradient); }
.cp-progress-label { font-size: .75rem; font-weight: 700; color: var(--gray-600); min-width: 2.5rem; text-align: right; }
.dark .cp-progress-label { color: var(--gray-300); }