/* ============================================================
   Botler Admin — Bubble POS inspired theme
   Primary: #F97316 (orange)  Secondary: #A78BFA (purple)
   Font: Plus Jakarta Sans
   ============================================================ */

@import url('https://fonts.googleapis.com/css2?family=Plus+Jakarta+Sans:ital,wght@0,400;0,500;0,600;0,700;0,800;1,400&display=swap');

/* ---- Base font ------------------------------------------- */
.fi-body,
.fi-body * {
    font-family: 'Plus Jakarta Sans', system-ui, -apple-system, sans-serif !important;
}

/* ---- Outer background ------------------------------------ */
.fi-body {
    background-color: #F5F5F7 !important;
}

.fi-main {
    background-color: #F5F5F7 !important;
}

/* ---- Sidebar --------------------------------------------- */
.fi-sidebar {
    background-color: #FFFFFF !important;
    border-right: 1px solid #EBEBEB !important;
    box-shadow: none !important;
}

/* Sidebar brand/logo area */
.fi-sidebar-header {
    border-bottom: 1px solid #F0F0F0 !important;
    padding-bottom: 16px !important;
}

/* Active nav item — orange pill */
.fi-sidebar-item-button.fi-active,
.fi-sidebar-item > a.fi-active,
[data-active="true"] .fi-sidebar-item-button {
    background-color: #F97316 !important;
    color: #FFFFFF !important;
    border-radius: 12px !important;
    font-weight: 600 !important;
}

.fi-sidebar-item-button.fi-active *,
.fi-sidebar-item > a.fi-active * {
    color: #FFFFFF !important;
}

/* Inactive nav items */
.fi-sidebar-item-button:not(.fi-active),
.fi-sidebar-item > a:not(.fi-active) {
    color: #4B5563 !important;
    border-radius: 12px !important;
    transition: background-color 0.15s ease, color 0.15s ease !important;
}

.fi-sidebar-item-button:not(.fi-active):hover,
.fi-sidebar-item > a:not(.fi-active):hover {
    background-color: #FFF7ED !important;
    color: #F97316 !important;
}

.fi-sidebar-item-button:not(.fi-active):hover *,
.fi-sidebar-item > a:not(.fi-active):hover * {
    color: #F97316 !important;
}

/* Nav group labels */
.fi-sidebar-group-label {
    color: #9CA3AF !important;
    font-size: 0.7rem !important;
    font-weight: 700 !important;
    letter-spacing: 0.08em !important;
    text-transform: uppercase !important;
}

/* ---- Top bar --------------------------------------------- */
.fi-topbar {
    background-color: #FFFFFF !important;
    border-bottom: 1px solid #EBEBEB !important;
    box-shadow: none !important;
}

/* Global search pill */
.fi-global-search-field input,
.fi-global-search input {
    border-radius: 24px !important;
    background-color: #F9FAFB !important;
    border-color: #E5E7EB !important;
}

/* ---- Cards / Sections / Widgets -------------------------- */
.fi-section,
.fi-wi,
.fi-wi-chart,
.fi-wi-stats-overview,
.fi-ta {
    background-color: #FFFFFF !important;
    border-radius: 16px !important;
    border: 1px solid #F0F0F0 !important;
    box-shadow: 0 1px 4px rgba(0, 0, 0, 0.05), 0 0 1px rgba(0, 0, 0, 0.03) !important;
}

/* Individual stat cards */
.fi-wi-stats-overview-stat {
    background-color: #FFFFFF !important;
    border-radius: 16px !important;
    border: 1px solid #F0F0F0 !important;
    box-shadow: 0 1px 4px rgba(0, 0, 0, 0.05) !important;
    padding: 20px !important;
}

/* Stat card value — bold and large */
.fi-wi-stats-overview-stat-value {
    font-size: 1.875rem !important;
    font-weight: 800 !important;
    color: #111827 !important;
    line-height: 1.2 !important;
}

/* Stat card label */
.fi-wi-stats-overview-stat-label {
    font-size: 0.8rem !important;
    font-weight: 500 !important;
    color: #6B7280 !important;
    text-transform: uppercase !important;
    letter-spacing: 0.04em !important;
}

/* Stat trend description */
.fi-wi-stats-overview-stat-description {
    font-size: 0.8rem !important;
    font-weight: 500 !important;
}

/* Chart widget padding */
.fi-wi-chart {
    padding: 24px !important;
}

/* ---- Tables ---------------------------------------------- */
.fi-ta {
    overflow: hidden !important;
    border-radius: 16px !important;
}

/* Table header — light peach */
.fi-ta-header-cell,
th.fi-ta-header-cell {
    background-color: #FFF5EE !important;
    color: #6B7280 !important;
    font-size: 0.72rem !important;
    font-weight: 700 !important;
    text-transform: uppercase !important;
    letter-spacing: 0.06em !important;
}

/* Table rows */
.fi-ta-row:hover td {
    background-color: #FFFBF7 !important;
}

/* Table search bar */
.fi-ta-search-field input {
    border-radius: 12px !important;
    background-color: #F9FAFB !important;
}

/* ---- Form inputs ----------------------------------------- */
.fi-input,
input.fi-input,
.fi-select-input,
select.fi-select-input,
textarea.fi-textarea {
    border-radius: 12px !important;
    background-color: #FAFAFA !important;
}

.fi-input-wrapper,
.fi-select-wrapper {
    border-radius: 12px !important;
}

/* ---- Buttons --------------------------------------------- */
.fi-btn {
    border-radius: 12px !important;
    font-weight: 600 !important;
}

/* Primary button — orange */
.fi-btn-color-primary {
    background-color: #F97316 !important;
    border-color: #F97316 !important;
}

.fi-btn-color-primary:hover {
    background-color: #EA6C0A !important;
    border-color: #EA6C0A !important;
}

/* ---- Badges ---------------------------------------------- */
.fi-badge {
    border-radius: 20px !important;
    font-weight: 600 !important;
    font-size: 0.72rem !important;
}

/* ---- Page header ----------------------------------------- */
.fi-header-heading {
    font-size: 1.5rem !important;
    font-weight: 800 !important;
    color: #111827 !important;
}

.fi-header-subheading {
    color: #6B7280 !important;
    font-weight: 400 !important;
}

/* ---- Modals ---------------------------------------------- */
.fi-modal-window {
    border-radius: 20px !important;
    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.12) !important;
}

/* ---- Tabs ------------------------------------------------ */
.fi-tabs-tab {
    border-radius: 10px !important;
    font-weight: 600 !important;
}

/* ---- Dropdowns ------------------------------------------- */
.fi-dropdown-panel {
    border-radius: 16px !important;
    border: 1px solid #F0F0F0 !important;
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.08) !important;
}

/* ---- Notifications --------------------------------------- */
.fi-notification {
    border-radius: 16px !important;
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.08) !important;
}

/* ---- Section headers ------------------------------------- */
.fi-section-header {
    border-bottom: 1px solid #F5F5F7 !important;
    padding-bottom: 12px !important;
}

.fi-section-header-heading {
    font-weight: 700 !important;
    color: #1F2937 !important;
}

/* ---- Breadcrumbs ----------------------------------------- */
.fi-breadcrumbs-item {
    color: #9CA3AF !important;
    font-size: 0.85rem !important;
}

.fi-breadcrumbs-item-separator {
    color: #D1D5DB !important;
}

/* ---- Action groups --------------------------------------- */
.fi-ac-btn-action {
    border-radius: 10px !important;
}

/* ---- Color overrides for orange primary ------------------ */
/* Links and interactive text */
.fi-link,
a.fi-link {
    color: #F97316 !important;
}

.fi-link:hover,
a.fi-link:hover {
    color: #EA6C0A !important;
}

/* Focus rings */
*:focus-visible {
    outline-color: #F97316 !important;
}

/* Checkbox / radio active */
input[type="checkbox"]:checked,
input[type="radio"]:checked {
    accent-color: #F97316 !important;
}

/* ---- Dashboard page padding ------------------------------ */
.fi-page-dashboard .fi-page-content {
    padding-top: 1.5rem !important;
}

/* ---- Full-width content ---------------------------------- */
.fi-main-ctn {
    max-width: 100% !important;
    padding-left: 2rem !important;
    padding-right: 2rem !important;
}

.fi-page {
    max-width: 100% !important;
}

/* ---- Dashboard page title -------------------------------- */
.fi-page-heading {
    font-size: 1.5rem !important;
    font-weight: 800 !important;
}

/* ---- Widget spacing on dashboard ------------------------- */
.fi-widgets {
    gap: 1.5rem !important;
}

/* ---- Settings page spacing ------------------------------- */
.fi-page .fi-section + .fi-section {
    margin-top: 1.5rem;
}

/* ---- Form sections spacing ------------------------------- */
.fi-fo-component-ctn > * + * {
    margin-top: 1rem;
}