/* ============================================================
   CORMS — matched to GrayCore/WorkDo ERP (shadcn slate + orange)
   Tokens sourced from the ERP: Figtree font, #f97316 primary,
   radius 0.5rem, #e4e4e7 borders, #fafafa sidebar, pill badges.
   ============================================================ */

:root {
    --gc-page: #ffffff;                 /* background */
    --gc-canvas: #ffffff;
    --gc-card: #ffffff;                 /* card */
    --gc-border: #e4e4e7;               /* border / input  (240 5.9% 90%) */
    --gc-ink: #09090b;                  /* foreground (240 10% 3.9%) */
    --gc-muted: #71717a;                /* muted-foreground (240 3.8% 46.1%) */
    --gc-faint: #a1a1aa;
    --gc-subtle: #f4f4f5;               /* muted / secondary / accent */
    --gc-sidebar: #fafafa;              /* sidebar-background (0 0% 98%) */
    --gc-sidebar-ink: #3f3f46;          /* sidebar-foreground (240 5.3% 26.1%) */
    --gc-sidebar-border: #e5e7eb;       /* 220 13% 91% */
    --gc-orange: #f97316;
    --gc-orange-dark: #ea580c;
    --gc-radius: 8px;                   /* cards / sections / stat cards (ERP rounded-lg) */
    --gc-radius-sm: 8px;                /* buttons / icon buttons */
    --gc-radius-input: 6px;             /* inputs (ERP rounded-md) */
    --gc-shadow: 0 1px 2px rgba(0, 0, 0, .05);      /* shadow-sm */
    --gc-shadow-md: 0 1px 3px rgba(0,0,0,.08), 0 1px 2px rgba(0,0,0,.04);
    --gc-shadow-lg: 0 12px 34px rgba(16, 24, 40, .12);
}

/* ---- Base ---- */
.fi-body,
.fi-main-ctn,
.fi-layout {
    background-color: var(--gc-page) !important;
}

.fi-body {
    color: var(--gc-ink);
    font-family: 'Figtree', 'Segoe UI', ui-sans-serif, system-ui, sans-serif;
    -webkit-font-smoothing: antialiased;
}

.fi-main {
    padding-top: 1.75rem !important;
    padding-bottom: 2.5rem !important;
}

/* ---- Sidebar (off-white #fafafa) ---- */
.fi-sidebar,
.fi-sidebar .fi-sidebar-header {
    background-color: var(--gc-sidebar) !important;
    border-right-color: var(--gc-sidebar-border) !important;
    box-shadow: none !important;
}

.fi-sidebar .fi-sidebar-header {
    height: 4.5rem;
    border-bottom: 1px solid transparent !important;
}

.fi-sidebar .fi-logo {
    font-weight: 700;
    font-size: 1.2rem;
    letter-spacing: -.02em;
    color: var(--gc-ink);
}

.fi-sidebar-nav { padding: .75rem .6rem !important; gap: .1rem; }

.fi-sidebar-group-label {
    text-transform: none !important;
    font-size: .76rem !important;
    font-weight: 600 !important;
    color: var(--gc-faint) !important;
}

.fi-sidebar-item-button {
    border-radius: var(--gc-radius-sm) !important;
    padding: .55rem .7rem !important;
    font-weight: 500 !important;
    color: var(--gc-sidebar-ink) !important;
    transition: background-color .15s ease, color .15s ease;
}

.fi-sidebar-item-button .fi-icon,
.fi-sidebar-item-button svg { color: #71717a !important; }

.fi-sidebar-item-button:hover { background-color: var(--gc-subtle) !important; color: var(--gc-ink) !important; }

/* Active nav = neutral gray (accent), dark text/icon */
.fi-sidebar-item-active > .fi-sidebar-item-button {
    background-color: var(--gc-subtle) !important;
    color: var(--gc-ink) !important;
    font-weight: 600 !important;
    box-shadow: none !important;
}

.fi-sidebar-item-active > .fi-sidebar-item-button .fi-icon,
.fi-sidebar-item-active > .fi-sidebar-item-button svg { color: var(--gc-ink) !important; }

.fi-sidebar-item .fi-badge {
    background-color: #ececee !important;
    color: var(--gc-muted) !important;
    box-shadow: none !important;
}

/* ---- Topbar ---- */
.fi-topbar {
    background-color: #ffffff !important;
    box-shadow: none !important;
    border-bottom: 1px solid var(--gc-border) !important;
}

.fi-topbar > nav { height: 4.5rem; }

/* ---- Headings ---- */
.fi-header-heading,
.fi-page-header-heading {
    font-weight: 700 !important;
    letter-spacing: -.02em;
    color: var(--gc-ink) !important;
    font-size: 1.55rem !important;
}

.fi-header { margin-bottom: 1.5rem !important; }

/* ---- Cards / sections ---- */
.fi-section,
.fi-wi-chart,
.fi-ta-ctn {
    border-radius: var(--gc-radius) !important;
    border: 1px solid var(--gc-border) !important;
    box-shadow: var(--gc-shadow) !important;
    background-color: var(--gc-card) !important;
}

.fi-section-content { padding: 1.35rem !important; }
.fi-section-header { padding: 1.35rem 1.35rem .25rem !important; }
.fi-section-header-heading { font-weight: 600 !important; color: var(--gc-ink) !important; }
.fi-section-header-description { color: var(--gc-muted) !important; font-size: .82rem !important; }

/* Stats overview: transparent grid */
.fi-wi-stats-overview,
.fi-wi-stats-overview > .fi-grid,
.fi-wi-stats-overview .fi-sc {
    background-color: transparent !important;
    border: 0 !important;
    box-shadow: none !important;
}

.fi-wi-stats-overview-stat {
    border-radius: var(--gc-radius) !important;
    border: 1px solid var(--gc-border) !important;
    box-shadow: var(--gc-shadow) !important;
    background: #fff !important;
    padding: 1.25rem 1.35rem !important;
}

.fi-wi-stats-overview-stat-value { font-size: 1.9rem !important; font-weight: 700 !important; color: var(--gc-ink) !important; }
.fi-wi-stats-overview-stat-label { color: var(--gc-muted) !important; font-weight: 500 !important; }

/* ---- Form labels + inputs (ERP: white bg, light border, orange focus) ---- */
.fi-fo-field-wrp-label,
.fi-fo-field-wrp label {
    font-weight: 600 !important;
    color: #3f3f46 !important;
}

.fi-input-wrp {
    background-color: #ffffff !important;
    border: 1px solid var(--gc-border) !important;
    border-radius: var(--gc-radius-input) !important;
    box-shadow: none !important;
    transition: border-color .15s ease, box-shadow .15s ease;
}

.fi-input-wrp:focus-within {
    border-color: var(--gc-orange) !important;
    box-shadow: 0 0 0 2px rgba(249, 115, 22, .18) !important;
}

.fi-input, .fi-select-input, .fi-textarea { background-color: transparent !important; }
.fi-input-wrp input, .fi-input-wrp textarea { padding-top: .55rem !important; padding-bottom: .55rem !important; }

/* ---- Buttons (ERP: 8px radius, semibold, roomy, no shadow) ---- */
.fi-btn {
    border-radius: var(--gc-radius-sm) !important;
    font-weight: 600 !important;
    box-shadow: none !important;
    padding-left: 1.15rem !important;
    padding-right: 1.15rem !important;
}

/* Primary (orange solid) */
.fi-btn.fi-color-primary {
    background-color: var(--gc-orange) !important;
    color: #fff !important;
    border-color: transparent !important;
}

.fi-btn.fi-color-primary:hover {
    background-color: var(--gc-orange-dark) !important;
}

/* Secondary / Cancel (soft gray solid, dark text) */
.fi-btn.fi-color-gray,
.fi-sc-actions .fi-btn:not(.fi-color-primary):not(.fi-color-danger),
.fi-modal-window .fi-modal-footer .fi-btn:not(.fi-color-primary):not(.fi-color-danger) {
    background-color: var(--gc-subtle) !important;
    color: #3f3f46 !important;
    border-color: transparent !important;
}

.fi-btn.fi-color-gray:hover,
.fi-sc-actions .fi-btn:not(.fi-color-primary):not(.fi-color-danger):hover,
.fi-modal-window .fi-modal-footer .fi-btn:not(.fi-color-primary):not(.fi-color-danger):hover {
    background-color: #e7e7ea !important;
    color: var(--gc-ink) !important;
}

/* ---- Tables ---- */
.fi-ta-header-cell {
    background-color: #fafafa !important;
    text-transform: none !important;
    font-weight: 600 !important;
    color: var(--gc-faint) !important;
    font-size: .8rem !important;
}

.fi-ta-cell, .fi-ta-header-cell { padding-top: .95rem !important; padding-bottom: .95rem !important; }
.fi-ta-row:hover { background-color: #fafafa !important; }
.fi-ta-header, .fi-ta-header-toolbar { padding: 1.1rem 1.35rem !important; }
.fi-ta-header-toolbar .fi-icon-btn { border: 1px solid var(--gc-border) !important; background: #fff !important; }

/* ---- Badges (pill, ERP style) ---- */
.fi-badge {
    border-radius: 9999px !important;
    font-weight: 600 !important;
    font-size: .72rem !important;
    padding: .18rem .6rem !important;
}

/* ---- Pagination (orange active) ---- */
.fi-pagination-item .fi-btn.fi-color-primary,
.fi-pagination-item .fi-btn[aria-current="page"] {
    background-color: var(--gc-orange) !important;
    color: #fff !important;
}

/* ---- Topbar controls ---- */
.fi-avatar, .fi-user-avatar { border-radius: 9999px !important; box-shadow: 0 0 0 3px #fff, 0 0 0 4px var(--gc-border) !important; }
.fi-icon-btn { border-radius: 8px !important; color: var(--gc-muted) !important; }
.fi-icon-btn:hover { background-color: var(--gc-subtle) !important; color: var(--gc-ink) !important; }

/* Primary icon button = orange square (e.g. the "+" create action) */
.fi-icon-btn.fi-color-primary {
    background-color: var(--gc-orange) !important;
    color: #fff !important;
}

.fi-icon-btn.fi-color-primary:hover {
    background-color: var(--gc-orange-dark) !important;
    color: #fff !important;
}

/* ---- Dropdowns / modals ---- */
.fi-dropdown-panel { border-radius: 12px !important; box-shadow: var(--gc-shadow-lg) !important; border: 1px solid var(--gc-border) !important; }
.fi-modal-window { border-radius: 16px !important; box-shadow: var(--gc-shadow-lg) !important; }

/* ---- Tabs ---- */
.fi-tabs { border-radius: 10px !important; background: var(--gc-subtle) !important; padding: .25rem !important; }
.fi-tabs-item { border-radius: 7px !important; font-weight: 500 !important; }
.fi-tabs-item-active { background: #fff !important; box-shadow: var(--gc-shadow) !important; color: var(--gc-orange) !important; }

/* ============================================================
   LOGIN (simple layout) — ERP: slate gradient + slate dot grid
   + blurred orange blobs + rounded-2xl white card
   ============================================================ */
.fi-simple-layout {
    position: relative;
    overflow: hidden;
    background: linear-gradient(to bottom right, #f8fafc, #f1f5f9) !important;
    background-image:
        linear-gradient(to bottom right, #f8fafc, #f1f5f9),
        radial-gradient(circle, rgba(148, 163, 184, .35) 2px, transparent 2px) !important;
    background-size: auto, 30px 30px !important;
    background-position: center, 0 0 !important;
}

/* Blurred orange decorative blobs */
.fi-simple-layout::before,
.fi-simple-layout::after {
    content: "";
    position: absolute;
    border-radius: 9999px;
    filter: blur(60px);
    pointer-events: none;
}

.fi-simple-layout::before {
    top: 3rem; left: 3rem;
    width: 12rem; height: 12rem;
    background: rgba(249, 115, 22, .12);
}

.fi-simple-layout::after {
    bottom: 3rem; right: 3rem;
    width: 16rem; height: 16rem;
    background: rgba(249, 115, 22, .08);
}

.fi-simple-main {
    position: relative;
    z-index: 10;
    border-radius: 16px !important;
    border: 1px solid rgba(255, 255, 255, .6) !important;
    background: rgba(255, 255, 255, .92) !important;
    backdrop-filter: blur(8px);
    box-shadow: 0 25px 50px -12px rgba(16, 24, 40, .18) !important;
    padding: 2.25rem !important;
}

.fi-simple-header-heading {
    font-weight: 600 !important;
    color: var(--gc-ink) !important;
    font-size: 1.25rem !important;
}

/* ============================================================
   Custom KPI cards (ERP stat style: icon tile top-right)
   ============================================================ */
.gc-kpis {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 1.25rem;
}

@media (max-width: 1024px) { .gc-kpis { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 640px) { .gc-kpis { grid-template-columns: 1fr; } }

.gc-stat {
    background: #fff;
    border: 1px solid var(--gc-border);
    border-radius: var(--gc-radius);
    box-shadow: var(--gc-shadow);
    padding: 1.35rem;
    transition: box-shadow .18s ease, transform .18s ease;
}

.gc-stat:hover { box-shadow: var(--gc-shadow-md); transform: translateY(-2px); }

.gc-stat__top { display: flex; align-items: flex-start; justify-content: space-between; margin-bottom: .85rem; }
.gc-stat__label { color: var(--gc-muted); font-weight: 500; font-size: .9rem; }

.gc-stat__icon {
    width: 2.4rem; height: 2.4rem;
    border-radius: 10px;
    display: flex; align-items: center; justify-content: center;
    flex-shrink: 0;
}

.gc-stat__icon svg { width: 1.2rem; height: 1.2rem; }
.gc-stat__icon--blue { background: #eff6ff; color: #2563eb; }
.gc-stat__icon--orange { background: #fff3e9; color: var(--gc-orange); }
.gc-stat__icon--green { background: #ecfdf3; color: #16a34a; }
.gc-stat__icon--red { background: #fef2f2; color: #dc2626; }

.gc-stat__value { font-size: 1.9rem; font-weight: 700; letter-spacing: -.02em; color: var(--gc-ink); line-height: 1.1; }
.gc-stat__sub { margin-top: .45rem; font-size: .82rem; font-weight: 500; }
.gc-stat__sub--up { color: #16a34a; }
.gc-stat__sub--muted { color: var(--gc-muted); }
.gc-stat__sub--warn { color: #d97706; }
.gc-stat__sub--danger { color: #dc2626; }