/*
 * GoPro IT Consultants theme — carries the look of the original GoPro IMS into the platform:
 * dark navy sidebar, soft blue-grey page, brand purple, coloured dashboard tiles, dark login with a light card.
 * Loaded on every panel (staff, engineer, vendor, client). Plain CSS on top of Filament, no build step.
 */
:root {
    --gp-navy: #11101d;
    --gp-navy-2: #1d1b31;
    --gp-navy-3: #2a2647;
    --gp-page: #e4e9f7;
    --gp-purple: #523297;
    --gp-violet: #8054a4;
    --gp-blue: #2f6fb5;
    --gp-tile-1: #523297;
    --gp-tile-2: #f89c14;
    --gp-tile-3: #e04c3c;
    --gp-tile-4: #08bcec;
    --gp-tile-5: #08a45c;
    --gp-tile-6: #2f6fb5;
    --gp-tile-7: #c2185b;
    --gp-tile-8: #455a64;
    --gp-radius: 14px;
}

/* ---------- Page ---------- */
.fi-body { background-color: var(--gp-page); }
.dark .fi-body { background-color: #0d0c17; }
.fi-header-heading { letter-spacing: -0.01em; }

/* ---------- Sidebar (dark navy, white text, like the old IMS) ---------- */
.fi-sidebar {
    background: linear-gradient(180deg, var(--gp-navy) 0%, #15132a 100%) !important;
    box-shadow: 4px 0 18px rgba(17, 16, 29, 0.18);
}
.fi-sidebar-header {
    background: var(--gp-navy) !important;
    box-shadow: none !important;
    border-bottom: 1px solid rgba(255, 255, 255, 0.06);
}
.fi-sidebar .fi-logo { filter: brightness(0) invert(1); }
.fi-sidebar-group-label, .fi-sidebar-group-btn .fi-icon { color: rgba(255, 255, 255, 0.45) !important; letter-spacing: 0.06em; text-transform: uppercase; font-size: 0.7rem; }
.fi-sidebar-item-btn { border-radius: 10px; transition: background-color .15s ease, transform .15s ease; }
.fi-sidebar-item-label { color: rgba(255, 255, 255, 0.86) !important; }
.fi-sidebar-item-icon { color: rgba(255, 255, 255, 0.6) !important; }
.fi-sidebar-item-btn:hover { background-color: var(--gp-navy-3) !important; }
.fi-sidebar-item-btn:hover .fi-sidebar-item-label, .fi-sidebar-item-btn:hover .fi-sidebar-item-icon { color: #fff !important; }
.fi-sidebar-item.fi-active .fi-sidebar-item-btn,
.fi-sidebar-item-active .fi-sidebar-item-btn {
    background: linear-gradient(90deg, var(--gp-purple), var(--gp-violet)) !important;
    box-shadow: 0 6px 16px rgba(82, 50, 151, 0.35);
}
.fi-sidebar-item.fi-active .fi-sidebar-item-label, .fi-sidebar-item.fi-active .fi-sidebar-item-icon,
.fi-sidebar-item-active .fi-sidebar-item-label, .fi-sidebar-item-active .fi-sidebar-item-icon { color: #fff !important; }
.fi-sidebar .fi-badge { background: rgba(255, 255, 255, 0.12) !important; color: #fff !important; }
.fi-sidebar-nav::-webkit-scrollbar { width: 6px; }
.fi-sidebar-nav::-webkit-scrollbar-thumb { background: var(--gp-navy-3); border-radius: 6px; }

/* ---------- Top bar ---------- */
.fi-topbar { box-shadow: 0 1px 0 rgba(17, 16, 29, 0.06), 0 6px 20px rgba(17, 16, 29, 0.04); }

/* ---------- Cards, sections and tables ---------- */
.fi-section, .fi-ta-ctn, .fi-wi-widget > .fi-section {
    border-radius: var(--gp-radius) !important;
    box-shadow: 0 1px 2px rgba(17, 16, 29, 0.05), 0 8px 24px rgba(17, 16, 29, 0.06) !important;
}
.fi-ta-header-cell { text-transform: uppercase; font-size: 0.72rem; letter-spacing: 0.04em; }
.fi-ta-row:hover { background-color: rgba(128, 84, 164, 0.05); }

/* ---------- Dashboard number tiles (the old IMS coloured cards) ---------- */
.fi-wi-stats-overview-stat {
    position: relative;
    overflow: hidden;
    border: 0 !important;
    border-radius: var(--gp-radius) !important;
    color: #fff;
    background: var(--gp-tile-1) !important;
    box-shadow: 0 10px 24px rgba(17, 16, 29, 0.14) !important;
    transition: transform .15s ease, box-shadow .15s ease;
}
.fi-wi-stats-overview-stat:hover { transform: translateY(-2px); box-shadow: 0 14px 30px rgba(17, 16, 29, 0.2) !important; }
.fi-wi-stats-overview-stat::after {
    content: "";
    position: absolute;
    right: -28px; top: -28px;
    width: 120px; height: 120px;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.12);
    pointer-events: none;
}
.fi-wi-stats-overview-stat:nth-child(8n+1), .fi-grid-col:nth-child(8n+1) > .fi-sc-component > .fi-wi-stats-overview-stat { background: linear-gradient(135deg, #523297, #7b4fc4) !important; }
.fi-wi-stats-overview-stat:nth-child(8n+2), .fi-grid-col:nth-child(8n+2) > .fi-sc-component > .fi-wi-stats-overview-stat { background: linear-gradient(135deg, #f08a00, #f8b04a) !important; }
.fi-wi-stats-overview-stat:nth-child(8n+3), .fi-grid-col:nth-child(8n+3) > .fi-sc-component > .fi-wi-stats-overview-stat { background: linear-gradient(135deg, #d13a2a, #ef6a5a) !important; }
.fi-wi-stats-overview-stat:nth-child(8n+4), .fi-grid-col:nth-child(8n+4) > .fi-sc-component > .fi-wi-stats-overview-stat { background: linear-gradient(135deg, #0698c2, #2fcdf5) !important; }
.fi-wi-stats-overview-stat:nth-child(8n+5), .fi-grid-col:nth-child(8n+5) > .fi-sc-component > .fi-wi-stats-overview-stat { background: linear-gradient(135deg, #068a4d, #22c27a) !important; }
.fi-wi-stats-overview-stat:nth-child(8n+6), .fi-grid-col:nth-child(8n+6) > .fi-sc-component > .fi-wi-stats-overview-stat { background: linear-gradient(135deg, #24568f, #3f86d6) !important; }
.fi-wi-stats-overview-stat:nth-child(8n+7), .fi-grid-col:nth-child(8n+7) > .fi-sc-component > .fi-wi-stats-overview-stat { background: linear-gradient(135deg, #a3134a, #e04a86) !important; }
.fi-wi-stats-overview-stat:nth-child(8n+8), .fi-grid-col:nth-child(8n+8) > .fi-sc-component > .fi-wi-stats-overview-stat { background: linear-gradient(135deg, #37474f, #607d8b) !important; }
.fi-wi-stats-overview-stat-label, .fi-wi-stats-overview-stat-label-ctn, .fi-wi-stats-overview-stat-label-ctn .fi-icon { color: rgba(255, 255, 255, 0.9) !important; }
.fi-wi-stats-overview-stat-label { font-weight: 600; text-transform: uppercase; font-size: 0.72rem; letter-spacing: 0.05em; }
.fi-wi-stats-overview-stat-value { color: #fff !important; font-size: 2.1rem !important; font-weight: 800 !important; letter-spacing: -0.02em; }
.fi-wi-stats-overview-stat-description, .fi-wi-stats-overview-stat-description * { color: rgba(255, 255, 255, 0.88) !important; }
.fi-wi-stats-overview-stat-label-ctn .fi-icon { width: 1.6rem; height: 1.6rem; }
.fi-wi-stats-overview-stat .fi-wi-stats-overview-stat-chart path { stroke: rgba(255, 255, 255, 0.85) !important; }

/* ---------- Login and other simple pages (dark page, light card, logo on top) ---------- */
.fi-simple-layout {
    background:
        radial-gradient(1200px 600px at 10% -10%, rgba(128, 84, 164, 0.35), transparent 60%),
        radial-gradient(900px 500px at 110% 110%, rgba(47, 111, 181, 0.30), transparent 60%),
        #1c1f23 !important;
}
.fi-simple-main {
    background: #f0f8ff !important;
    border-radius: 18px !important;
    box-shadow: 0 24px 60px rgba(0, 0, 0, 0.45) !important;
    border-top: 4px solid var(--gp-violet);
    animation: gp-card-in .7s cubic-bezier(.5, -0.3, .3, 1.6) both;
    transform-origin: top center;
}
@keyframes gp-card-in { from { transform: perspective(600px) rotateX(70deg); opacity: 0; } to { transform: perspective(600px) rotateX(0); opacity: 1; } }
.fi-simple-header .fi-logo { height: 4rem !important; }
.fi-simple-header-heading { color: #1f1b31; }
.fi-simple-main .fi-input-wrp { background: transparent; border-radius: 0; box-shadow: none; border-bottom: 2px solid #aaa; }
.fi-simple-main .fi-input-wrp:focus-within { border-bottom-color: var(--gp-violet); }
.dark .fi-simple-main { background: #1d1b31 !important; }
.dark .fi-simple-header-heading { color: #fff; }

/* ---------- Primary buttons get the brand gradient ---------- */
.fi-btn.fi-color-primary:not(.fi-outlined),
.fi-btn-color-primary:not(.fi-outlined) {
    background-image: linear-gradient(90deg, var(--gp-purple), var(--gp-violet));
    box-shadow: 0 6px 14px rgba(82, 50, 151, 0.25);
    color: #fff !important;
}
.fi-btn.fi-color-primary:not(.fi-outlined) .fi-btn-label,
.fi-btn.fi-color-primary:not(.fi-outlined) .fi-icon,
.fi-btn.fi-color-primary:not(.fi-outlined) span { color: #fff !important; }

/* ---------- Small screens ---------- */
@media (max-width: 640px) {
    .fi-wi-stats-overview-stat-value { font-size: 1.7rem !important; }
}