/** * Filament v3-inspired admin theme for POS * Light / dark via [data-theme] on */ @import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&display=swap'); /* ── Design tokens ─────────────────────────────────────────── */ :root, [data-theme="light"] { /* Filament gray scale */ --fi-gray-50: #f9fafb; --fi-gray-100: #f3f4f6; --fi-gray-200: #e5e7eb; --fi-gray-300: #d1d5db; --fi-gray-400: #9ca3af; --fi-gray-500: #6b7280; --fi-gray-600: #4b5563; --fi-gray-700: #374151; --fi-gray-800: #1f2937; --fi-gray-900: #111827; --fi-gray-950: #030712; --fi-bg: var(--fi-gray-50); --fi-surface: #ffffff; --fi-sidebar: #ffffff; --fi-sidebar-hover: var(--fi-gray-100); --fi-sidebar-active: rgba(245, 158, 11, 0.08); --fi-header: #ffffff; --fi-border: var(--fi-gray-200); --fi-border-subtle: var(--fi-gray-100); --fi-text: var(--fi-gray-950); --fi-text-muted: var(--fi-gray-500); --fi-text-sidebar: var(--fi-gray-600); --fi-primary: #f59e0b; --fi-primary-hover: #d97706; --fi-primary-soft: #fffbeb; --fi-primary-text: #b45309; --fi-ring: rgba(245, 158, 11, 0.35); --fi-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.05); --fi-shadow-md: 0 4px 6px -1px rgba(0, 0, 0, 0.07), 0 2px 4px -2px rgba(0, 0, 0, 0.05); --fi-shadow-lg: 0 10px 15px -3px rgba(0, 0, 0, 0.08), 0 4px 6px -4px rgba(0, 0, 0, 0.05); --fi-input-bg: #ffffff; --fi-danger: #ef4444; --fi-success: #10b981; --fi-info: #3b82f6; --fi-warning: #f59e0b; /* Layout — Filament proportions */ --fi-sidebar-w: 24rem; /* 384px */ --fi-sidebar-mini: 4.5rem; /* 72px collapsed */ --fi-header-h: 4.8rem; /* 76.8px */ --fi-radius: 0.5rem; /* rounded-lg */ --fi-radius-lg: 0.75rem; /* rounded-xl */ --fi-radius-xl: 1rem; /* Typography — 24px default body */ --fi-text-xs: 1.25rem; /* 20px — labels, table headers */ --fi-text-sm: 1.5rem; /* 24px — default body */ --fi-text-base: 1.5rem; /* 24px */ --fi-text-lg: 1.75rem; /* 28px */ --fi-text-xl: 2rem; /* 32px */ --fi-text-2xl: 2.375rem; /* 38px — page title */ --fi-leading: 1.6; --fi-leading-tight: 1.35; } [data-theme="dark"] { --fi-bg: var(--fi-gray-950); --fi-surface: var(--fi-gray-900); --fi-sidebar: var(--fi-gray-900); --fi-sidebar-hover: var(--fi-gray-800); --fi-sidebar-active: rgba(251, 191, 36, 0.1); --fi-header: var(--fi-gray-900); --fi-border: var(--fi-gray-700); --fi-border-subtle: var(--fi-gray-800); --fi-text: var(--fi-gray-50); --fi-text-muted: var(--fi-gray-400); --fi-text-sidebar: var(--fi-gray-300); --fi-primary: #fbbf24; --fi-primary-hover: #f59e0b; --fi-primary-soft: rgba(251, 191, 36, 0.1); --fi-primary-text: #fbbf24; --fi-ring: rgba(251, 191, 36, 0.3); --fi-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.4); --fi-shadow-md: 0 4px 6px -1px rgba(0, 0, 0, 0.45); --fi-shadow-lg: 0 10px 15px -3px rgba(0, 0, 0, 0.5); --fi-input-bg: var(--fi-gray-950); --fi-danger: #f87171; --fi-success: #34d399; --fi-info: #60a5fa; --fi-warning: #fbbf24; } /* ── Base typography ───────────────────────────────────────── */ body.fi-app, body.fi-auth { font-family: 'Inter', ui-sans-serif, system-ui, -apple-system, sans-serif !important; line-height: var(--fi-leading) !important; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; color: var(--fi-text); background: var(--fi-bg); } body.fi-app { font-size: 1.5rem !important; /* 24px default body */ } body.fi-app h1, body.fi-app h2, body.fi-app h3, body.fi-app h4, body.fi-app h5, body.fi-app h6 { font-family: inherit !important; font-weight: 600; color: var(--fi-text); letter-spacing: -0.01em; } body.fi-app p, body.fi-app .content, body.fi-app .box-body, body.fi-app .table, body.fi-app .form-group, body.fi-app .modal-body, body.fi-app .panel-body { font-size: 1.5rem; } body.fi-app .wrapper { background: var(--fi-bg); } /* ── Scrollbars ────────────────────────────────────────────── */ html, body.fi-app, body.fi-app .wrapper { scrollbar-color: var(--fi-primary) var(--fi-gray-100); scrollbar-width: thin; } html::-webkit-scrollbar, body.fi-app::-webkit-scrollbar, body.fi-app .wrapper::-webkit-scrollbar, body.fi-app *::-webkit-scrollbar { width: 10px; height: 10px; } html::-webkit-scrollbar-track, body.fi-app::-webkit-scrollbar-track, body.fi-app .wrapper::-webkit-scrollbar-track, body.fi-app *::-webkit-scrollbar-track { background: var(--fi-gray-100); } html::-webkit-scrollbar-thumb, body.fi-app::-webkit-scrollbar-thumb, body.fi-app .wrapper::-webkit-scrollbar-thumb, body.fi-app *::-webkit-scrollbar-thumb { background: var(--fi-primary); border-radius: 999px; border: 2px solid var(--fi-gray-100); } html::-webkit-scrollbar-thumb:hover, body.fi-app::-webkit-scrollbar-thumb:hover, body.fi-app .wrapper::-webkit-scrollbar-thumb:hover, body.fi-app *::-webkit-scrollbar-thumb:hover { background: var(--fi-primary-hover); } [data-theme="dark"] html, [data-theme="dark"] body.fi-app, [data-theme="dark"] body.fi-app .wrapper { scrollbar-color: var(--fi-primary) var(--fi-gray-800); } [data-theme="dark"] html::-webkit-scrollbar-track, [data-theme="dark"] body.fi-app::-webkit-scrollbar-track, [data-theme="dark"] body.fi-app .wrapper::-webkit-scrollbar-track, [data-theme="dark"] body.fi-app *::-webkit-scrollbar-track { background: var(--fi-gray-800); } [data-theme="dark"] html::-webkit-scrollbar-thumb, [data-theme="dark"] body.fi-app::-webkit-scrollbar-thumb, [data-theme="dark"] body.fi-app .wrapper::-webkit-scrollbar-thumb, [data-theme="dark"] body.fi-app *::-webkit-scrollbar-thumb { border-color: var(--fi-gray-800); } /* ── Layout grid ───────────────────────────────────────────── */ body.fi-app .main-sidebar, body.fi-app.skin-blue .main-sidebar, body.fi-app.skin-blue .left-side { width: var(--fi-sidebar-w) !important; background: var(--fi-sidebar) !important; border-right: 1px solid var(--fi-border) !important; padding-top: var(--fi-header-h) !important; box-shadow: none !important; } body.fi-app .content-wrapper, body.fi-app .main-footer { margin-left: var(--fi-sidebar-w) !important; } body.fi-app .main-header .navbar, body.fi-app.skin-blue .main-header .navbar { margin-left: 0 !important; } body.fi-app.sidebar-mini.sidebar-collapse .main-sidebar, body.fi-app.sidebar-collapse .main-sidebar { width: var(--fi-sidebar-mini) !important; } body.fi-app.sidebar-mini.sidebar-collapse .content-wrapper, body.fi-app.sidebar-mini.sidebar-collapse .main-footer { margin-left: var(--fi-sidebar-mini) !important; } body.fi-app.sidebar-mini.sidebar-collapse .main-header .navbar { margin-left: 0 !important; } body.fi-app .content-wrapper { background: var(--fi-bg) !important; min-height: calc(100vh - var(--fi-header-h)); } body.fi-app .content { min-height: auto !important; padding: 1.5rem !important; } @media (min-width: 768px) { body.fi-app .content { padding: 1.5rem 2rem !important; } } /* ── Page header (Filament top bar area) ───────────────────── */ body.fi-app .content-header { padding: 1.25rem 2rem 0.75rem !important; background: transparent !important; border-bottom: none !important; } body.fi-app .content-header > h1 { font-size: var(--fi-text-2xl) !important; font-weight: 700 !important; line-height: var(--fi-leading-tight) !important; color: var(--fi-text) !important; margin: 0 !important; letter-spacing: -0.025em; } body.fi-app .content-header > h1 small { display: block; margin-top: 0.25rem; font-size: var(--fi-text-sm) !important; font-weight: 400 !important; color: var(--fi-text-muted) !important; } body.fi-app .breadcrumb { background: transparent !important; padding: 0.375rem 2rem 0 !important; margin-bottom: 0 !important; font-size: var(--fi-text-xs) !important; } body.fi-app .breadcrumb > li, body.fi-app .breadcrumb > li + li:before { color: var(--fi-text-muted) !important; } body.fi-app .breadcrumb > .active { color: var(--fi-text) !important; font-weight: 500; } body.fi-app .main-footer { background: var(--fi-surface) !important; border-top: 1px solid var(--fi-border) !important; color: var(--fi-text-muted) !important; font-size: var(--fi-text-xs) !important; padding: 0.875rem 2rem !important; margin-left: var(--fi-sidebar-w) !important; } /* ── Top header bar ────────────────────────────────────────── */ body.fi-app .main-header { display: flex; align-items: stretch; max-height: none; height: var(--fi-header-h); } body.fi-app .main-header .logo, body.fi-app.skin-blue .main-header .logo { float: none !important; flex: 0 0 var(--fi-sidebar-w); width: var(--fi-sidebar-w) !important; display: flex !important; align-items: center; background: var(--fi-sidebar) !important; color: var(--fi-text) !important; border-bottom: 1px solid var(--fi-border) !important; border-right: 1px solid var(--fi-border) !important; height: auto !important; min-height: var(--fi-header-h) !important; line-height: 1.25 !important; font-weight: 700 !important; font-size: var(--fi-text-sm) !important; letter-spacing: -0.01em; transition: background 0.15s; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; padding: 0 1rem !important; } body.fi-app.sidebar-mini.sidebar-collapse .main-header .logo { flex-basis: var(--fi-sidebar-mini); width: var(--fi-sidebar-mini) !important; } body.fi-app .main-header .logo:hover, body.fi-app.skin-blue .main-header .logo:hover { background: var(--fi-sidebar-hover) !important; color: var(--fi-text) !important; } body.fi-app .main-header .logo .store-header-logo { display: block; max-height: 36px; max-width: 100%; width: auto; height: auto; object-fit: contain; } body.fi-app .main-header .logo .logo-mini .store-header-logo--mini { max-height: 28px; max-width: 28px; margin: 0 auto; } body.fi-app .main-header .logo .logo-lg { display: flex !important; align-items: center; justify-content: flex-start; overflow: hidden; } body.fi-app.sidebar-mini.sidebar-collapse .main-header .logo .logo-lg { display: none !important; } body.fi-app.sidebar-mini.sidebar-collapse .main-header .logo .logo-mini { display: flex !important; align-items: center; justify-content: center; width: 100%; } body.fi-app .main-header .navbar, body.fi-app.skin-blue .main-header .navbar { float: none !important; flex: 1 1 auto; width: auto !important; margin-left: 0 !important; background: var(--fi-header) !important; border-bottom: 1px solid var(--fi-border) !important; box-shadow: none !important; min-height: var(--fi-header-h) !important; height: var(--fi-header-h) !important; max-height: var(--fi-header-h) !important; display: flex; align-items: center; } body.fi-app .main-header .navbar-custom-menu { float: none !important; margin-left: auto; } body.fi-app .main-header .navbar .navbar-nav, body.fi-app .main-header .navbar-custom-menu > .navbar-nav { display: flex; align-items: center; float: none !important; margin: 0; } body.fi-app .main-header .navbar .nav > li > a, body.fi-app.skin-blue .main-header .navbar .nav > li > a, body.fi-app .main-header .navbar-custom-menu .navbar-nav > li > a, body.fi-app.skin-blue .main-header .navbar-custom-menu .navbar-nav > li > a { color: var(--fi-text-muted) !important; background: transparent !important; border-radius: var(--fi-radius) !important; margin: 0 0.25rem !important; padding: 0.375rem 0.75rem !important; font-size: var(--fi-text-sm) !important; font-weight: 500 !important; line-height: 1.25 !important; transition: background 0.15s, color 0.15s; } body.fi-app .main-header .navbar .nav > li > a:hover, body.fi-app.skin-blue .main-header .navbar .nav > li > a:hover, body.fi-app .main-header .navbar .nav > li > a:active, body.fi-app.skin-blue .main-header .navbar .nav > li > a:active, body.fi-app .main-header .navbar .nav > li > a:focus, body.fi-app.skin-blue .main-header .navbar .nav > li > a:focus, body.fi-app .main-header .navbar .nav .open > a, body.fi-app.skin-blue .main-header .navbar .nav .open > a, body.fi-app .main-header .navbar .nav .open > a:hover, body.fi-app.skin-blue .main-header .navbar .nav .open > a:hover, body.fi-app .main-header .navbar .nav .open > a:focus, body.fi-app.skin-blue .main-header .navbar .nav .open > a:focus, body.fi-app .main-header .navbar .nav > .active > a, body.fi-app.skin-blue .main-header .navbar .nav > .active > a, body.fi-app .main-header .navbar-custom-menu .navbar-nav > li > a:hover, body.fi-app.skin-blue .main-header .navbar-custom-menu .navbar-nav > li > a:hover, body.fi-app .main-header .navbar-custom-menu .navbar-nav > li > a:active, body.fi-app.skin-blue .main-header .navbar-custom-menu .navbar-nav > li > a:active, body.fi-app .main-header .navbar-custom-menu .navbar-nav > li > a:focus, body.fi-app.skin-blue .main-header .navbar-custom-menu .navbar-nav > li > a:focus, body.fi-app .main-header .navbar-custom-menu .navbar-nav > .open > a, body.fi-app.skin-blue .main-header .navbar-custom-menu .navbar-nav > .open > a { background: var(--fi-sidebar-hover) !important; color: var(--fi-text) !important; } body.fi-app .main-header .navbar .nav > li > a i, body.fi-app .main-header .navbar .nav > li > a [class*="flaticon"], body.fi-app .main-header .navbar-custom-menu .navbar-nav > li > a i, body.fi-app .main-header .navbar-custom-menu .navbar-nav > li > a [class*="flaticon"] { color: inherit !important; } body.fi-app .main-header .navbar .sidebar-toggle, body.fi-app.skin-blue .main-header .navbar .sidebar-toggle { color: var(--fi-text-muted) !important; background: transparent !important; border: none !important; position: static !important; left: auto !important; width: auto !important; text-align: inherit !important; display: inline-flex !important; align-items: center; align-self: stretch; height: var(--fi-header-h) !important; padding: 0 1rem !important; font-size: var(--fi-text-base) !important; } body.fi-app .main-header .navbar .sidebar-toggle:hover, body.fi-app .main-header .navbar .sidebar-toggle:focus, body.fi-app .main-header .navbar .sidebar-toggle:active, body.fi-app .main-header .navbar .sidebar-toggle.active, body.fi-app .main-header .navbar .sidebar-toggle.active:hover { background: var(--fi-sidebar-hover) !important; color: var(--fi-primary) !important; } body.fi-app .main-header .navbar .nav .user-image { width: 2rem !important; height: 2rem !important; margin-top: -2px; border: 2px solid var(--fi-border); } body.fi-app .dclock { color: var(--fi-text-muted) !important; font-size: var(--fi-text-sm) !important; font-weight: 500 !important; background: transparent !important; border-radius: 0 !important; line-height: inherit !important; } /* User profile dropdown — Filament panel */ body.fi-app .navbar-nav > .user-menu > .dropdown-menu { background: var(--fi-surface) !important; border-radius: var(--fi-radius-lg) !important; border: 1px solid var(--fi-border) !important; border-top-width: 1px !important; box-shadow: var(--fi-shadow-lg) !important; overflow: hidden; padding: 0 !important; min-width: 20rem; width: 20rem !important; } body.fi-app .navbar-nav > .user-menu > .dropdown-menu > li.user-header, body.fi-app .main-header li.user-header, body.fi-app.skin-blue .main-header li.user-header { background: var(--fi-gray-50) !important; background-color: var(--fi-gray-50) !important; height: auto !important; min-height: 0 !important; padding: 1rem !important; text-align: left !important; border-bottom: 1px solid var(--fi-border); } body.fi-app .navbar-nav > .user-menu > .dropdown-menu > li.user-header > .user-header-icon { float: left; display: flex; align-items: center; justify-content: center; height: 2.75rem !important; width: 2.75rem !important; margin: 0 0.75rem 0 0 !important; border: 2px solid var(--fi-border) !important; border-radius: 50%; background: var(--fi-gray-100); color: var(--fi-text-muted); font-size: 1.25rem; line-height: 1; } body.fi-app .navbar-nav > .user-menu .user-header p { color: var(--fi-text) !important; font-size: var(--fi-text-sm) !important; font-weight: 600 !important; margin: 0 !important; text-align: left !important; overflow: hidden; } body.fi-app .navbar-nav > .user-menu .user-header small { color: var(--fi-text-muted) !important; font-size: var(--fi-text-xs) !important; font-weight: 500 !important; display: block; margin-top: 0.125rem; } body.fi-app .navbar-nav > .user-menu .user-footer { background: var(--fi-surface) !important; background-color: var(--fi-surface) !important; padding: 0.75rem 1rem !important; border-top: none; } body.fi-app .navbar-nav > .user-menu .user-footer .btn-default, body.fi-app .navbar-nav > .user-menu .user-footer .btn-flat { border-radius: var(--fi-radius) !important; font-size: var(--fi-text-xs) !important; font-weight: 600 !important; padding: 0.375rem 0.75rem !important; } [data-theme="dark"] body.fi-app .navbar-nav > .user-menu > .dropdown-menu > li.user-header, [data-theme="dark"] body.fi-app .main-header li.user-header, [data-theme="dark"] body.fi-app.skin-blue .main-header li.user-header { background: var(--fi-gray-800) !important; background-color: var(--fi-gray-800) !important; } [data-theme="dark"] body.fi-app .navbar-nav > .user-menu > .dropdown-menu > li.user-header > .user-header-icon { background: var(--fi-gray-700); color: var(--fi-gray-300); border-color: var(--fi-gray-600) !important; } /* Theme toggle */ body.fi-app .fi-theme-btn, body.fi-auth .fi-theme-btn { display: inline-flex; align-items: center; justify-content: center; width: 2.25rem; height: 2.25rem; margin: 0 0.25rem; padding: 0; border: 1px solid var(--fi-border); border-radius: var(--fi-radius); background: var(--fi-sidebar-hover); color: var(--fi-text-muted); cursor: pointer; transition: all 0.15s; } body.fi-app .fi-theme-btn:hover, body.fi-auth .fi-theme-btn:hover { background: var(--fi-primary-soft); color: var(--fi-primary); border-color: var(--fi-primary); } body.fi-app .fi-theme-btn .fa, body.fi-auth .fi-theme-btn .fa { font-size: 0.875rem; } body.fi-app .fi-theme-toggle-li { display: flex; align-items: center; } /* ── Sidebar navigation (Filament pill style) ──────────────── */ body.fi-app .sidebar-menu { padding: 1rem 0.875rem !important; display: flex; flex-direction: column; gap: 0.4375rem; } body.fi-app .sidebar-menu > li { margin-bottom: 0.3125rem; min-width: 0; } body.fi-app .sidebar-menu > li.header { color: var(--fi-text-muted) !important; background: transparent !important; font-size: var(--fi-text-xs) !important; font-weight: 600 !important; letter-spacing: 0.05em; text-transform: uppercase; padding: 1rem 0.875rem 0.5rem !important; margin-top: 0.5rem; margin-bottom: 0.25rem; } body.fi-app .sidebar-menu > li > a, body.fi-app.skin-blue .sidebar-menu > li > a { color: var(--fi-text-sidebar) !important; border-left: none !important; border-radius: var(--fi-radius) !important; margin: 0.4375rem 0 !important; padding: 0.45rem 1rem !important; font-size: var(--fi-text-sm) !important; font-weight: 500 !important; line-height: 1.4 !important; transition: background 0.15s, color 0.15s; } body.fi-app .sidebar-menu > li > a > .fa, body.fi-app .sidebar-menu > li > a > .glyphicon, body.fi-app .sidebar-menu > li > a > .ion, body.fi-app .sidebar-menu > li > a > [class*="flaticon"] { width: 1.5rem !important; font-size: 1.375rem !important; margin-right: 0.875rem !important; text-align: center; opacity: 0.85; } body.fi-app .sidebar-menu > li:hover > a, body.fi-app.skin-blue .sidebar-menu > li:hover > a { background: var(--fi-sidebar-hover) !important; color: var(--fi-text) !important; } body.fi-app .sidebar-menu > li.active > a, body.fi-app.skin-blue .sidebar-menu > li.active > a, body.fi-app .sidebar-menu > li.menu-open > a { background: var(--fi-sidebar-active) !important; color: var(--fi-primary-text) !important; font-weight: 600 !important; } body.fi-app .sidebar-menu > li > .treeview-menu, body.fi-app.skin-blue .sidebar-menu > li > .treeview-menu { background: transparent !important; margin: 0.3125rem 0 0.5625rem !important; padding: 0.375rem 0 0.5rem 0.625rem !important; display: none; flex-direction: column; gap: 0.3125rem; } body.fi-app .sidebar-menu > li.active > .treeview-menu, body.fi-app .sidebar-menu > li > .treeview-menu.menu-open, body.fi-app.skin-blue .sidebar-menu > li.active > .treeview-menu, body.fi-app.skin-blue .sidebar-menu > li > .treeview-menu.menu-open { display: flex; } body.fi-app .sidebar-menu .treeview-menu > li > a { color: var(--fi-text-muted) !important; padding: 0.625rem 1rem 0.625rem 1.25rem !important; font-size: var(--fi-text-xs) !important; font-weight: 500 !important; border-radius: var(--fi-radius) !important; margin: 0.3125rem 0 !important; line-height: 1.4 !important; } body.fi-app .sidebar-menu .treeview-menu > li > a:hover { background: var(--fi-sidebar-hover) !important; color: var(--fi-text) !important; } body.fi-app .sidebar-menu .treeview-menu > li.active > a { background: var(--fi-sidebar-active) !important; color: var(--fi-primary-text) !important; font-weight: 600 !important; } body.fi-app .sidebar-menu .treeview-menu > li > a > [class*="flaticon"], body.fi-app .sidebar-menu .treeview-menu > li > a > .fa { font-size: 0.8125rem !important; margin-right: 0.5rem !important; } body.fi-app .sidebar-menu .pull-right-container { position: absolute; right: 0.75rem !important; top: 50%; margin-top: 0 !important; transform: translateY(-50%); width: 1.25rem; text-align: center; } body.fi-app .sidebar-menu .pull-right-container > .fa-angle-left { font-size: 0.9375rem !important; transition: transform 0.2s; } body.fi-app .sidebar-menu .menu-open > a > .pull-right-container > .fa-angle-left { transform: rotate(-90deg); } /* Long menu labels: wrap inside sidebar instead of overflowing */ body.fi-app .main-sidebar, body.fi-app .main-sidebar .sidebar { overflow-x: hidden !important; } body.fi-app .sidebar-menu, body.fi-app .sidebar-menu:hover { white-space: normal !important; overflow-x: hidden !important; } body.fi-app .sidebar-menu > li > a, body.fi-app .sidebar-menu .treeview-menu > li > a { position: relative; display: flex !important; align-items: center !important; gap: 0.5rem; white-space: normal !important; word-break: break-word; overflow-wrap: anywhere; max-width: 100%; } body.fi-app .sidebar-menu > li > a { padding-right: 2.25rem !important; } body.fi-app .sidebar-menu > li > a > span:not(.pull-right-container), body.fi-app .sidebar-menu .treeview-menu > li > a > span { flex: 1 1 auto; min-width: 0; line-height: 1.4; } body.fi-app .sidebar-menu > li > a > .fa, body.fi-app .sidebar-menu > li > a > .glyphicon, body.fi-app .sidebar-menu > li > a > .ion, body.fi-app .sidebar-menu > li > a > [class*="flaticon"], body.fi-app .sidebar-menu .treeview-menu > li > a > .fa, body.fi-app .sidebar-menu .treeview-menu > li > a > [class*="flaticon"] { flex-shrink: 0; } body.fi-app .sidebar-menu > li > .treeview-menu, body.fi-app.skin-blue .sidebar-menu > li > .treeview-menu { max-width: 100%; overflow: hidden; } /* ── Cards / sections ──────────────────────────────────────── */ body.fi-app .box { background: var(--fi-surface) !important; border: 1px solid var(--fi-border) !important; border-radius: var(--fi-radius-xl) !important; box-shadow: var(--fi-shadow) !important; border-top: 1px solid var(--fi-border) !important; margin-bottom: 1.5rem !important; } body.fi-app .box-header { padding: 1rem 1.5rem !important; border-bottom: 1px solid var(--fi-border) !important; color: var(--fi-text) !important; background: transparent !important; } body.fi-app .box-title { font-size: var(--fi-text-base) !important; font-weight: 600 !important; color: var(--fi-text) !important; } body.fi-app .box-body { padding: 1.5rem !important; color: var(--fi-text); font-size: var(--fi-text-sm); } body.fi-app .box-footer { padding: 0.875rem 1.5rem !important; background: var(--fi-gray-50) !important; border-top: 1px solid var(--fi-border) !important; } [data-theme="dark"] body.fi-app .box-footer { background: var(--fi-gray-800) !important; } /* ── Nav tabs (Filament fi-tabs contained style) ───────────── */ body.fi-app .nav-tabs-custom { background: var(--fi-surface) !important; border: 1px solid var(--fi-border) !important; border-radius: var(--fi-radius-xl) !important; box-shadow: var(--fi-shadow) !important; margin-bottom: 1.25rem !important; overflow: hidden; } body.fi-app .box .nav-tabs-custom, body.fi-app .box-body .nav-tabs-custom { border: none !important; box-shadow: none !important; margin-bottom: 0 !important; border-radius: 0 !important; } body.fi-app .nav-tabs-custom > .nav-tabs { display: flex !important; flex-wrap: wrap; align-items: center; gap: 0.25rem; float: none !important; margin: 0 !important; padding: 0.625rem 0.75rem !important; border-bottom: 1px solid var(--fi-border) !important; border-top: none !important; background: var(--fi-surface) !important; border-radius: 0 !important; overflow-x: auto; -webkit-overflow-scrolling: touch; } body.fi-app .nav-tabs-custom > .nav-tabs > li { float: none !important; margin: 0 !important; border-top: none !important; margin-bottom: 0 !important; } body.fi-app .nav-tabs-custom > .nav-tabs > li.active { border-top-color: transparent !important; } body.fi-app .nav-tabs-custom > .nav-tabs > li > a { display: inline-flex !important; align-items: center; gap: 0.5rem; color: var(--fi-text-muted) !important; background: transparent !important; border: none !important; border-radius: var(--fi-radius-lg) !important; font-size: var(--fi-text-sm) !important; font-weight: 500 !important; line-height: var(--fi-leading-tight) !important; padding: 0.5rem 0.75rem !important; margin: 0 !important; white-space: nowrap; transition: background-color 0.075s ease, color 0.075s ease; } body.fi-app .nav-tabs-custom > .nav-tabs > li > a:hover, body.fi-app .nav-tabs-custom > .nav-tabs > li > a:focus { color: var(--fi-text) !important; background: var(--fi-gray-50) !important; border: none !important; outline: none; } body.fi-app .nav-tabs-custom > .nav-tabs > li.active > a, body.fi-app .nav-tabs-custom > .nav-tabs > li.active > a:hover, body.fi-app .nav-tabs-custom > .nav-tabs > li.active > a:focus { color: var(--fi-primary-text) !important; background: var(--fi-gray-50) !important; font-weight: 600 !important; border: none !important; box-shadow: none !important; } body.fi-app .nav-tabs-custom > .nav-tabs > li:not(.active) > a:hover, body.fi-app .nav-tabs-custom > .nav-tabs > li:not(.active) > a:focus, body.fi-app .nav-tabs-custom > .nav-tabs > li:not(.active) > a:active { border-color: transparent !important; } body.fi-app .nav-tabs-custom > .nav-tabs > li > a .fa, body.fi-app .nav-tabs-custom > .nav-tabs > li > a .glyphicon, body.fi-app .nav-tabs-custom > .nav-tabs > li > a .ion { color: var(--fi-gray-400) !important; font-size: 0.875em; margin-right: 0 !important; } body.fi-app .nav-tabs-custom > .nav-tabs > li.active > a .fa, body.fi-app .nav-tabs-custom > .nav-tabs > li.active > a .glyphicon, body.fi-app .nav-tabs-custom > .nav-tabs > li.active > a .ion { color: var(--fi-primary) !important; } body.fi-app .nav-tabs-custom > .nav-tabs > li > a .text-red, body.fi-app .nav-tabs-custom > .nav-tabs > li > a .text-blue, body.fi-app .nav-tabs-custom > .nav-tabs > li > a .text-green, body.fi-app .nav-tabs-custom > .nav-tabs > li > a .text-yellow { color: var(--fi-gray-400) !important; } body.fi-app .nav-tabs-custom > .nav-tabs > li.active > a .text-red, body.fi-app .nav-tabs-custom > .nav-tabs > li.active > a .text-blue, body.fi-app .nav-tabs-custom > .nav-tabs > li.active > a .text-green, body.fi-app .nav-tabs-custom > .nav-tabs > li.active > a .text-yellow { color: var(--fi-primary) !important; } body.fi-app .nav-tabs-custom > .nav-tabs > li.header { font-size: var(--fi-text-sm) !important; font-weight: 600 !important; color: var(--fi-text) !important; line-height: var(--fi-leading-tight) !important; padding: 0.5rem 0.75rem !important; text-transform: none !important; } body.fi-app .nav-tabs-custom > .nav-tabs.pull-right { justify-content: flex-end; } body.fi-app .nav-tabs-custom > .nav-tabs.pull-right > li { float: none !important; } body.fi-app .nav-tabs-custom.tab-primary > .nav-tabs > li.active, body.fi-app .nav-tabs-custom.tab-info > .nav-tabs > li.active, body.fi-app .nav-tabs-custom.tab-danger > .nav-tabs > li.active, body.fi-app .nav-tabs-custom.tab-warning > .nav-tabs > li.active, body.fi-app .nav-tabs-custom.tab-success > .nav-tabs > li.active, body.fi-app .nav-tabs-custom.tab-default > .nav-tabs > li.active { border-top-color: transparent !important; } body.fi-app .nav-tabs-custom > .tab-content { background: var(--fi-surface) !important; padding: 1.5rem !important; border-radius: 0 !important; } body.fi-app .nav-tabs-custom .dropdown.open > a:active, body.fi-app .nav-tabs-custom .dropdown.open > a:focus { background: var(--fi-gray-50) !important; color: var(--fi-text) !important; } [data-theme="dark"] body.fi-app .nav-tabs-custom > .nav-tabs > li > a:hover, [data-theme="dark"] body.fi-app .nav-tabs-custom > .nav-tabs > li > a:focus, [data-theme="dark"] body.fi-app .nav-tabs-custom > .nav-tabs > li.active > a, [data-theme="dark"] body.fi-app .nav-tabs-custom > .nav-tabs > li.active > a:hover, [data-theme="dark"] body.fi-app .nav-tabs-custom > .nav-tabs > li.active > a:focus { background: rgba(255, 255, 255, 0.05) !important; } [data-theme="dark"] body.fi-app .nav-tabs-custom > .nav-tabs > li.active > a { color: var(--fi-primary) !important; } @media (max-width: 767px) { body.fi-app .nav-tabs-custom > .nav-tabs { flex-wrap: nowrap; white-space: nowrap; } body.fi-app .nav-tabs-custom > .nav-tabs > li { display: inline-block; } } /* ── Dashboard stat widgets ────────────────────────────────── */ body.fi-app .small-box { border-radius: var(--fi-radius-xl) !important; box-shadow: var(--fi-shadow) !important; border: 1px solid var(--fi-border) !important; overflow: hidden; } body.fi-app .small-box .inner { padding: 1.25rem 1.5rem !important; } body.fi-app .small-box .inner h3, body.fi-app .small-box .inner .h3 { font-size: var(--fi-text-2xl) !important; font-weight: 700 !important; line-height: var(--fi-leading-tight) !important; } body.fi-app .small-box .inner p { font-size: var(--fi-text-sm) !important; font-weight: 500 !important; opacity: 0.9; } body.fi-app .small-box .icon { font-size: 3.5rem !important; opacity: 0.15; top: 0.75rem !important; right: 1rem !important; } body.fi-app .small-box-footer { font-size: var(--fi-text-xs) !important; font-weight: 600 !important; padding: 0.625rem 1rem !important; background: rgba(0, 0, 0, 0.08) !important; } /* Legacy info-box → Filament stat card (fallback for unmigrated markup) */ body.fi-app .info-box { display: flex !important; align-items: flex-start !important; justify-content: space-between !important; gap: 1rem !important; padding: 1.25rem 1.5rem !important; border-radius: var(--fi-radius-xl) !important; box-shadow: var(--fi-shadow) !important; border: 1px solid var(--fi-border) !important; min-height: 7rem !important; background: var(--fi-surface) !important; color: var(--fi-text) !important; margin-bottom: 1.5rem !important; transition: box-shadow 0.2s, border-color 0.2s; } body.fi-app .info-box:hover { box-shadow: var(--fi-shadow-md) !important; border-color: var(--fi-gray-300) !important; } [data-theme="dark"] body.fi-app .info-box:hover { border-color: var(--fi-gray-600) !important; } body.fi-app .info-box.bg-yellow, body.fi-app .info-box.bg-red, body.fi-app .info-box.bg-green, body.fi-app .info-box.bg-aqua, body.fi-app .info-box.bg-blue, body.fi-app .info-box.sectionmenu { background: var(--fi-surface) !important; border-left: 1px solid var(--fi-border) !important; color: var(--fi-text) !important; } body.fi-app .info-box .progress { display: none !important; } body.fi-app .info-box-icon { order: 2 !important; flex-shrink: 0 !important; float: none !important; display: flex !important; align-items: center !important; justify-content: center !important; width: 3rem !important; height: 3rem !important; margin: 0 !important; padding: 0 !important; line-height: 1 !important; border-radius: var(--fi-radius-lg) !important; background: var(--fi-primary-soft) !important; background-image: none !important; color: var(--fi-primary) !important; font-size: 1.375rem !important; } body.fi-app .info-box-content { order: 1 !important; flex: 1 !important; min-width: 0 !important; padding: 0 !important; margin-left: 0 !important; } body.fi-app .info-box-text { display: block !important; font-size: var(--fi-text-sm) !important; font-weight: 500 !important; text-transform: none !important; letter-spacing: normal; color: var(--fi-text-muted) !important; white-space: normal !important; margin-bottom: 0.5rem !important; line-height: 1.4 !important; } body.fi-app .info-box-number { display: block !important; font-size: var(--fi-text-2xl) !important; font-weight: 700 !important; color: var(--fi-text) !important; text-transform: none !important; line-height: var(--fi-leading-tight) !important; letter-spacing: -0.02em; word-break: break-word; } /* Swapped markup: value in .info-box-text, label in .info-box-number */ body.fi-app .info-box:not(.bg-yellow):not(.bg-red):not(.bg-green):not(.bg-aqua):not(.bg-blue) .info-box-text { font-size: var(--fi-text-2xl) !important; font-weight: 700 !important; color: var(--fi-text) !important; margin-bottom: 0.5rem !important; letter-spacing: -0.02em; } body.fi-app .info-box:not(.bg-yellow):not(.bg-red):not(.bg-green):not(.bg-aqua):not(.bg-blue) .info-box-number { font-size: var(--fi-text-sm) !important; font-weight: 500 !important; color: var(--fi-text-muted) !important; } body.fi-app .info-box-icon.bg-5, body.fi-app .info-box-icon.bg-blue { background: var(--fi-primary-soft) !important; color: var(--fi-primary) !important; } body.fi-app .info-box-icon.bg-green { background: rgba(16, 185, 129, 0.12) !important; color: var(--fi-success) !important; } body.fi-app .info-box-icon.bg-yellow { background: rgba(245, 158, 11, 0.12) !important; color: var(--fi-warning) !important; } body.fi-app .info-box-icon.bg-red { background: rgba(239, 68, 68, 0.12) !important; color: var(--fi-danger) !important; } body.fi-app .info-box-icon.bg-aqua { background: rgba(59, 130, 246, 0.12) !important; color: var(--fi-info) !important; } body.fi-app .row > [class*="col-"] > .fi-stat-card { margin-bottom: 1.5rem; } /* Dashboard gradient cards — soften for Filament */ body.fi-app .row-cards-one .mycard { border-radius: var(--fi-radius-xl) !important; box-shadow: var(--fi-shadow-md) !important; padding: 1.5rem !important; margin-bottom: 1.5rem !important; } body.fi-app .row-cards-one .mycard .left .title { font-size: var(--fi-text-sm) !important; font-weight: 600 !important; line-height: var(--fi-leading) !important; } body.fi-app .row-cards-one .mycard .left .number { font-size: var(--fi-text-2xl) !important; line-height: var(--fi-leading-tight) !important; font-weight: 700 !important; margin-bottom: 0.75rem !important; } body.fi-app .row-cards-one .mycard .left .link { font-size: var(--fi-text-xs) !important; height: auto !important; line-height: 1.25 !important; padding: 0.375rem 0.875rem !important; width: auto !important; border-radius: var(--fi-radius) !important; font-weight: 600; } body.fi-app .row-cards-one .mycard .right .icon { font-size: 3rem !important; opacity: 0.35; } body.fi-app .bg-1, body.fi-app .bg-2, body.fi-app .bg-3, body.fi-app .bg-4 { border-radius: var(--fi-radius-xl) !important; box-shadow: var(--fi-shadow) !important; } /* ── Forms (Filament field style) ──────────────────────────── */ body.fi-app .form-group { margin-bottom: 1.25rem !important; } body.fi-app .form-control { background: var(--fi-input-bg) !important; border: 1px solid var(--fi-border) !important; border-radius: var(--fi-radius) !important; color: var(--fi-text) !important; box-shadow: none !important; height: 3.625rem !important; padding: 0.8125rem 1.125rem !important; font-size: 1.5rem !important; line-height: 1.4 !important; transition: border-color 0.15s, box-shadow 0.15s; } body.fi-app textarea.form-control { height: auto !important; min-height: 5rem; line-height: var(--fi-leading) !important; } body.fi-app select.form-control { height: 3.625rem !important; } body.fi-app .form-control:focus { background: var(--fi-surface) !important; border-color: var(--fi-primary) !important; box-shadow: 0 0 0 2px var(--fi-ring) !important; } body.fi-app .control-label, body.fi-app label:not(.btn) { color: var(--fi-text) !important; font-weight: 500 !important; font-size: var(--fi-text-sm) !important; margin-bottom: 0.375rem !important; } body.fi-app .input-group-addon { background: var(--fi-gray-50) !important; border-color: var(--fi-border) !important; color: var(--fi-text-muted) !important; font-size: var(--fi-text-sm) !important; padding: 0.5rem 0.75rem !important; } [data-theme="dark"] body.fi-app .input-group-addon { background: var(--fi-gray-800) !important; } body.fi-app .help-block { color: var(--fi-text-muted) !important; font-size: var(--fi-text-xs) !important; margin-top: 0.375rem !important; } body.fi-app .input-sm.form-control { height: 3rem !important; padding: 5px !important; font-size: var(--fi-text-xs) !important; } body.fi-app .input-lg.form-control { height: 3rem !important; font-size: var(--fi-text-base) !important; } /* ── Buttons ───────────────────────────────────────────────── */ body.fi-app .btn { border-radius: var(--fi-radius) !important; font-weight: 600 !important; font-size: 1.5rem !important; line-height: 1.4 !important; padding: 0.8125rem 1.5rem !important; border: none !important; transition: background 0.15s, color 0.15s, box-shadow 0.15s; height: auto !important; } body.fi-app .btn-sm { font-size: 1.25rem !important; padding: 0.625rem 1rem !important; } body.fi-app .btn-lg { font-size: var(--fi-text-sm) !important; padding: 0.625rem 1.125rem !important; } body.fi-app .btn-xs { font-size: var(--fi-text-xs) !important; padding: 0.25rem 0.5rem !important; } body.fi-app .btn-primary, body.fi-app .bg-primary { background: var(--fi-primary) !important; color: #111827 !important; } body.fi-app .btn-primary:hover, body.fi-app .btn-primary:focus { background: var(--fi-primary-hover) !important; color: #111827 !important; } body.fi-app .btn-success, body.fi-app .bg-green { background: var(--fi-success) !important; color: #fff !important; } body.fi-app .btn-danger, body.fi-app .bg-red { background: var(--fi-danger) !important; color: #fff !important; } body.fi-app .btn-warning { background: var(--fi-warning) !important; color: #111827 !important; } body.fi-app .btn-info, body.fi-app .bg-aqua { background: var(--fi-info) !important; color: #fff !important; } body.fi-app .btn-default, body.fi-app .btn-flat { background: var(--fi-surface) !important; color: var(--fi-text) !important; border: 1px solid var(--fi-border) !important; box-shadow: var(--fi-shadow) !important; } body.fi-app .btn-default:hover, body.fi-app .btn-flat:hover { background: var(--fi-gray-50) !important; } [data-theme="dark"] body.fi-app .btn-default:hover { background: var(--fi-gray-800) !important; } /* ── Tables ────────────────────────────────────────────────── */ body.fi-app .table { color: var(--fi-text); font-size: var(--fi-text-sm); } body.fi-app .table > thead > tr > th, body.fi-app .table > thead > tr > td { background: var(--fi-gray-50) !important; color: var(--fi-text-muted) !important; font-size: var(--fi-text-xs) !important; font-weight: 600 !important; text-transform: uppercase; letter-spacing: 0.05em; border-bottom: 1px solid var(--fi-border) !important; padding: 0.875rem 1.125rem !important; vertical-align: middle; } [data-theme="dark"] body.fi-app .table > thead > tr > th, [data-theme="dark"] body.fi-app .table > thead > tr > td { background: var(--fi-gray-800) !important; color: var(--fi-text) !important; } body.fi-app .table > tbody > tr > td { padding: 0.875rem 1.125rem !important; font-size: var(--fi-text-sm) !important; border-color: var(--fi-border) !important; vertical-align: middle; } body.fi-app .table-hover > tbody > tr:hover, body.fi-app .custom_hover > tbody > tr:hover { background: var(--fi-primary-soft) !important; box-shadow: none !important; border-radius: 0 !important; } body.fi-app .table-bordered { border: 1px solid var(--fi-border) !important; border-radius: var(--fi-radius-lg) !important; overflow: hidden; } body.fi-app .table-striped > tbody > tr:nth-of-type(odd) { background: var(--fi-gray-50) !important; } [data-theme="dark"] body.fi-app .table-striped > tbody > tr:nth-of-type(odd) { background: rgba(255, 255, 255, 0.02) !important; } body.fi-app .custom_table_header { background: var(--fi-gray-100) !important; color: var(--fi-text-muted) !important; font-size: var(--fi-text-xs) !important; font-weight: 600 !important; text-transform: uppercase; } [data-theme="dark"] body.fi-app .custom_table_header { background: var(--fi-gray-800) !important; } /* DataTables */ body.fi-app .dataTables_wrapper { font-size: var(--fi-text-sm); } body.fi-app .dataTables_wrapper .dataTables_filter input, body.fi-app .dataTables_wrapper .dataTables_length select { background: var(--fi-input-bg); border: 1px solid var(--fi-border); border-radius: var(--fi-radius); color: var(--fi-text); font-size: var(--fi-text-sm); height: 2.25rem; padding: 0.375rem 0.625rem; } body.fi-app .dataTables_wrapper .dataTables_info, body.fi-app .dataTables_wrapper .dataTables_length label, body.fi-app .dataTables_wrapper .dataTables_filter label { color: var(--fi-text-muted); font-size: var(--fi-text-sm); } body.fi-app .dataTables_wrapper .dt-buttons .btn { margin-right: 0.25rem; } body.fi-app .pagination > li > a, body.fi-app .pagination > li > span { background: var(--fi-surface); border-color: var(--fi-border); color: var(--fi-text); font-size: var(--fi-text-sm); padding: 0.375rem 0.75rem; border-radius: var(--fi-radius); margin: 0 0.125rem; } body.fi-app .pagination > .active > a { background: var(--fi-primary) !important; border-color: var(--fi-primary) !important; color: #111827 !important; } /* ── Modals ────────────────────────────────────────────────── */ body.fi-app .modal-content { background: var(--fi-surface); border: 1px solid var(--fi-border); border-radius: var(--fi-radius-xl); box-shadow: var(--fi-shadow-lg); } body.fi-app .modal-header, body.fi-app .modal-header.header-custom { border-bottom: 1px solid var(--fi-border); background: var(--fi-surface); background-image: none; color: var(--fi-text); padding: 1.25rem 1.5rem !important; } body.fi-app .modal-title { color: var(--fi-text); font-weight: 600; font-size: var(--fi-text-lg) !important; } body.fi-app .modal .modal-header .close { color: var(--fi-text-muted); opacity: 0.8; text-shadow: none; } body.fi-app .modal .modal-header .close:hover, body.fi-app .modal .modal-header .close:focus { color: var(--fi-text); opacity: 0.85; } body.fi-app .modal-body { color: var(--fi-text); font-size: var(--fi-text-sm); padding: 1.5rem !important; } body.fi-app .modal-footer { background: var(--fi-gray-50); border-top: 1px solid var(--fi-border); padding: 1rem 1.5rem !important; color: var(--fi-text); } [data-theme="dark"] body.fi-app .modal-footer { background: var(--fi-gray-800); } body.fi-app .close { color: var(--fi-text-muted); opacity: 0.8; text-shadow: none; font-size: 1.5rem; } /* ── Filament confirmation modal ───────────────────────────── */ .fi-confirm-modal .modal-dialog.fi-confirm-dialog { width: 100%; max-width: 28rem; margin: 1.75rem auto; } .fi-confirm-modal .modal-content { background: var(--fi-surface); border: 1px solid var(--fi-border); border-radius: var(--fi-radius-xl); box-shadow: var(--fi-shadow-lg); overflow: hidden; } .fi-confirm-modal .fi-confirm-body { padding: 1.75rem 1.5rem 1.25rem !important; text-align: center; } .fi-confirm-modal .fi-confirm-icon { display: inline-flex; align-items: center; justify-content: center; width: 3.5rem; height: 3.5rem; border-radius: 9999px; margin: 0 auto 1rem; font-size: 1.5rem; } .fi-confirm-modal .fi-confirm-icon--warning { background: var(--fi-primary-soft); color: var(--fi-warning); } .fi-confirm-modal .fi-confirm-icon--danger { background: rgba(239, 68, 68, 0.12); color: var(--fi-danger); } .fi-confirm-modal .fi-confirm-icon--info { background: rgba(59, 130, 246, 0.12); color: var(--fi-info); } .fi-confirm-modal .fi-confirm-icon--success { background: rgba(16, 185, 129, 0.12); color: var(--fi-success); } .fi-confirm-modal .fi-confirm-heading { margin: 0 0 0.5rem; font-size: var(--fi-text-lg) !important; font-weight: 600; color: var(--fi-text); line-height: var(--fi-leading-tight); } .fi-confirm-modal .fi-confirm-message { margin: 0; font-size: var(--fi-text-sm); color: var(--fi-text-muted); line-height: var(--fi-leading); white-space: pre-line; } .fi-confirm-modal .fi-confirm-footer { display: flex; justify-content: center; gap: 0.75rem; background: var(--fi-gray-50); border-top: 1px solid var(--fi-border); padding: 1rem 1.5rem !important; } [data-theme="dark"] .fi-confirm-modal .fi-confirm-footer { background: var(--fi-gray-800); } .fi-confirm-modal .fi-confirm-footer .btn { min-width: 6.5rem; font-weight: 600; border-radius: var(--fi-radius); padding: 0.625rem 1.125rem !important; } .fi-confirm-modal .fi-confirm-cancel { background: var(--fi-surface) !important; border: 1px solid var(--fi-border) !important; color: var(--fi-text) !important; box-shadow: var(--fi-shadow) !important; } .fi-confirm-modal .fi-confirm-cancel:hover { background: var(--fi-gray-50) !important; } [data-theme="dark"] .fi-confirm-modal .fi-confirm-cancel:hover { background: var(--fi-gray-700) !important; } .fi-confirm-modal .fi-confirm-ok.btn-danger { background: var(--fi-danger) !important; border-color: var(--fi-danger) !important; color: #fff !important; } .fi-confirm-modal .fi-confirm-ok.btn-primary { background: var(--fi-primary) !important; border-color: var(--fi-primary) !important; color: #111827 !important; } .fi-confirm-modal .fi-confirm-ok.btn-success { background: var(--fi-success) !important; border-color: var(--fi-success) !important; color: #fff !important; } .fi-confirm-modal.in, .fi-confirm-modal.show { z-index: 1060; } .modal-backdrop.fi-confirm-backdrop { z-index: 1055; background: rgba(17, 24, 39, 0.5); } [data-theme="dark"] .modal-backdrop.fi-confirm-backdrop { background: rgba(0, 0, 0, 0.65); } /* ── SweetAlert (legacy alerts) — Filament style ───────────── */ .swal-overlay { background: rgba(17, 24, 39, 0.5); } [data-theme="dark"] .swal-overlay { background: rgba(0, 0, 0, 0.65); } .swal-modal { background: var(--fi-surface); border: 1px solid var(--fi-border); border-radius: var(--fi-radius-xl); box-shadow: var(--fi-shadow-lg); font-family: 'Inter', ui-sans-serif, system-ui, -apple-system, sans-serif; padding: 1.75rem 1.5rem 1.25rem; max-width: 28rem; } .swal-title { color: var(--fi-text); font-size: 1.75rem; font-weight: 600; margin-bottom: 0.5rem; } .swal-text { color: var(--fi-text-muted); font-size: 1.5rem; line-height: 1.6; } .swal-icon { margin: 0 auto 1rem; border-width: 3px; } .swal-icon--warning { border-color: var(--fi-warning); } .swal-icon--warning .swal-icon--warning__body, .swal-icon--warning .swal-icon--warning__dot { background: var(--fi-warning); } .swal-button-container { margin-top: 1.25rem; } .swal-button { font-family: inherit; font-size: 1.25rem; font-weight: 600; border-radius: var(--fi-radius); padding: 0.625rem 1.125rem; min-width: 6.5rem; box-shadow: none !important; } .swal-button:not([disabled]):hover { box-shadow: none !important; } .swal-button--cancel { background: var(--fi-surface); border: 1px solid var(--fi-border); color: var(--fi-text); } .swal-button--cancel:not([disabled]):hover { background: var(--fi-gray-50); } [data-theme="dark"] .swal-button--cancel:not([disabled]):hover { background: var(--fi-gray-700); } .swal-button--confirm, .swal-button--danger { background: var(--fi-danger) !important; color: #fff !important; } .swal-button--confirm:not([disabled]):hover, .swal-button--danger:not([disabled]):hover { background: #dc2626 !important; } /* ── Filament notifications (alerts + toasts) ──────────────── */ :root { --fi-notify-padding: 1.25rem 3.25rem 1.25rem 1.25rem; --fi-notify-gap: 1rem; --fi-notify-margin: 10px; --fi-notify-icon-size: 2.75rem; --fi-notify-icon-font: 1.375rem; --fi-notify-title-size: 1.5rem; --fi-notify-body-size: 1.375rem; --fi-notify-close-size: 1.5rem; --fi-notify-toast-width: 26rem; } .fi-notification, body.fi-app .alert { display: flex !important; align-items: flex-start !important; gap: var(--fi-notify-gap) !important; position: relative !important; margin-bottom: var(--fi-notify-margin) !important; padding: var(--fi-notify-padding) !important; border-radius: var(--fi-radius-xl) !important; border: 1px solid var(--fi-border) !important; background: var(--fi-surface) !important; color: var(--fi-text) !important; box-shadow: var(--fi-shadow-md) !important; font-size: var(--fi-notify-title-size) !important; line-height: var(--fi-leading) !important; } .fi-notification__icon, body.fi-app .alert:not(.fi-notification)::before { display: flex !important; align-items: center !important; justify-content: center !important; flex-shrink: 0 !important; width: var(--fi-notify-icon-size) !important; height: var(--fi-notify-icon-size) !important; border-radius: 9999px !important; font-family: 'FontAwesome' !important; font-size: var(--fi-notify-icon-font) !important; line-height: 1 !important; margin-top: 0 !important; } .fi-notification::before, body.fi-app .fi-notification.alert::before { display: none !important; content: none !important; } .fi-notification--success .fi-notification__icon, body.fi-app .alert-success:not(.fi-notification)::before { content: "\f00c" !important; background: rgba(16, 185, 129, 0.12) !important; color: var(--fi-success) !important; } .fi-notification--danger .fi-notification__icon, body.fi-app .alert-danger:not(.fi-notification)::before, body.fi-app .alert-error:not(.fi-notification)::before { content: "\f00d" !important; background: rgba(239, 68, 68, 0.12) !important; color: var(--fi-danger) !important; } .fi-notification--warning .fi-notification__icon, body.fi-app .alert-warning:not(.fi-notification)::before { content: "\f071" !important; background: rgba(245, 158, 11, 0.12) !important; color: var(--fi-warning) !important; } .fi-notification--info .fi-notification__icon, body.fi-app .alert-info:not(.fi-notification)::before { content: "\f129" !important; background: rgba(59, 130, 246, 0.12) !important; color: var(--fi-info) !important; } .fi-notification--success .fi-notification__icon { background: rgba(16, 185, 129, 0.12); color: var(--fi-success); } .fi-notification--danger .fi-notification__icon { background: rgba(239, 68, 68, 0.12); color: var(--fi-danger); } .fi-notification--warning .fi-notification__icon { background: rgba(245, 158, 11, 0.12); color: var(--fi-warning); } .fi-notification--info .fi-notification__icon { background: rgba(59, 130, 246, 0.12); color: var(--fi-info); } .fi-notification__content { flex: 1; min-width: 0; } .fi-notification__title, body.fi-app .alert strong:first-child { display: block; font-weight: 600; color: var(--fi-text); font-size: var(--fi-notify-title-size); line-height: var(--fi-leading-tight); margin-bottom: 0.25rem; } .fi-notification__body { display: block; font-weight: 500; color: var(--fi-text-muted); font-size: var(--fi-notify-body-size); line-height: var(--fi-leading); } body.fi-app .alert:not(.fi-notification) strong:only-child { display: block; font-weight: 600; color: var(--fi-text); font-size: var(--fi-notify-title-size); line-height: var(--fi-leading); margin-bottom: 0; } .fi-notification__close, body.fi-app .alert .close { position: absolute !important; top: 0.875rem !important; right: 0.875rem !important; float: none !important; font-size: var(--fi-notify-close-size) !important; font-weight: 400 !important; line-height: 1 !important; color: var(--fi-text-muted) !important; opacity: 0.65 !important; text-shadow: none !important; background: transparent !important; border: 0 !important; padding: 0.25rem !important; } .fi-notification__close:hover, .fi-notification__close:focus, body.fi-app .alert .close:hover, body.fi-app .alert .close:focus { color: var(--fi-text) !important; opacity: 1 !important; } .fi-notification--success .fi-notification__icon, body.fi-app .alert-success:not(.fi-notification)::before { content: "\f00c" !important; background: rgba(16, 185, 129, 0.12) !important; color: var(--fi-success) !important; } .fi-notification--danger .fi-notification__icon, body.fi-app .alert-danger:not(.fi-notification)::before, body.fi-app .alert-error:not(.fi-notification)::before { content: "\f00d" !important; background: rgba(239, 68, 68, 0.12) !important; color: var(--fi-danger) !important; } .fi-notification--warning .fi-notification__icon, body.fi-app .alert-warning:not(.fi-notification)::before { content: "\f071" !important; background: rgba(245, 158, 11, 0.12) !important; color: var(--fi-warning) !important; } .fi-notification--info .fi-notification__icon, body.fi-app .alert-info:not(.fi-notification)::before { content: "\f129" !important; background: rgba(59, 130, 246, 0.12) !important; color: var(--fi-info) !important; } .fi-notification--success, body.fi-app .alert-success { border-color: rgba(16, 185, 129, 0.2) !important; } .fi-notification--danger, body.fi-app .alert-danger, body.fi-app .alert-error { border-color: rgba(239, 68, 68, 0.2) !important; } .fi-notification--warning, body.fi-app .alert-warning { border-color: rgba(245, 158, 11, 0.2) !important; } .fi-notification--info, body.fi-app .alert-info { border-color: rgba(59, 130, 246, 0.2) !important; } body.fi-app .alert a { color: var(--fi-primary-text) !important; text-decoration: underline !important; } body.fi-app .alert a:hover { color: var(--fi-primary-hover) !important; } body.fi-app .alert.text-center { justify-content: center !important; text-align: center !important; } body.fi-app .alert.text-left { text-align: left !important; } /* ── Callouts (AdminLTE legacy, Filament restyle) ─────────── */ body.fi-app .callout { position: relative !important; margin: 0 0 1.25rem 0 !important; padding: 1.25rem 1.25rem 1.25rem calc(1.25rem + var(--fi-notify-icon-size) + var(--fi-notify-gap)) !important; border-radius: var(--fi-radius-xl) !important; border: 1px solid var(--fi-border) !important; background: var(--fi-surface) !important; color: var(--fi-text) !important; box-shadow: var(--fi-shadow-md) !important; font-size: var(--fi-text-sm) !important; line-height: var(--fi-leading) !important; } body.fi-app .callout::before { content: "\f129" !important; position: absolute !important; top: 1.25rem !important; left: 1.25rem !important; display: block !important; width: var(--fi-notify-icon-size) !important; height: var(--fi-notify-icon-size) !important; border-radius: 9999px !important; font-family: 'FontAwesome' !important; font-size: var(--fi-notify-icon-font) !important; line-height: var(--fi-notify-icon-size) !important; text-align: center !important; background: rgba(59, 130, 246, 0.12) !important; color: var(--fi-info) !important; } body.fi-app .callout h4 { margin: 0 0 0.5rem 0 !important; font-weight: 600 !important; font-size: var(--fi-notify-title-size) !important; color: var(--fi-text) !important; } body.fi-app .callout p { margin: 0 0 0.75rem 0 !important; color: var(--fi-text-muted) !important; font-size: var(--fi-notify-body-size) !important; line-height: var(--fi-leading) !important; } body.fi-app .callout p:last-child { margin-bottom: 0 !important; } body.fi-app .callout ul, body.fi-app .callout ol { margin: 0 0 0.75rem 0 !important; padding-left: 1.25rem !important; color: var(--fi-text-muted) !important; font-size: var(--fi-notify-body-size) !important; } body.fi-app .callout a { color: var(--fi-primary-text) !important; text-decoration: underline !important; } body.fi-app .callout a:hover { color: var(--fi-primary-hover) !important; } body.fi-app .callout code, body.fi-app .callout .highlight { background-color: var(--fi-sidebar-hover) !important; color: var(--fi-text) !important; border-radius: 0.25rem; padding: 0.1em 0.35em; } body.fi-app .callout.callout-info { border-color: rgba(59, 130, 246, 0.2) !important; background: var(--fi-surface) !important; color: var(--fi-text) !important; } body.fi-app .callout.callout-info::before { content: "\f129" !important; background: rgba(59, 130, 246, 0.12) !important; color: var(--fi-info) !important; } body.fi-app .callout.callout-success { border-color: rgba(16, 185, 129, 0.2) !important; } body.fi-app .callout.callout-success::before { content: "\f00c" !important; background: rgba(16, 185, 129, 0.12) !important; color: var(--fi-success) !important; } body.fi-app .callout.callout-warning { border-color: rgba(245, 158, 11, 0.2) !important; } body.fi-app .callout.callout-warning::before { content: "\f071" !important; background: rgba(245, 158, 11, 0.12) !important; color: var(--fi-warning) !important; } body.fi-app .callout.callout-danger { border-color: rgba(239, 68, 68, 0.2) !important; } body.fi-app .callout.callout-danger::before { content: "\f00d" !important; background: rgba(239, 68, 68, 0.12) !important; color: var(--fi-danger) !important; } body.fi-app .label { font-size: var(--fi-text-xs) !important; font-weight: 600 !important; padding: 0.2em 0.55em !important; border-radius: 0.375rem !important; } /* ── Dropdowns ─────────────────────────────────────────────── */ body.fi-app .dropdown-menu { background: var(--fi-surface); border: 1px solid var(--fi-border); border-radius: var(--fi-radius-lg); box-shadow: var(--fi-shadow-lg); padding: 0.375rem !important; font-size: var(--fi-text-sm); } body.fi-app .dropdown-menu > li > a { color: var(--fi-text); border-radius: calc(var(--fi-radius) - 2px); padding: 0.5rem 0.75rem !important; font-weight: 500; } body.fi-app .dropdown-menu > li > a:hover { background: var(--fi-sidebar-hover); color: var(--fi-text); } body.fi-app .dropdown-menu .menu h3 { font-size: var(--fi-text-sm) !important; font-weight: 500 !important; margin: 0 !important; padding: 0.5rem 0.75rem !important; } /* ── Select2 ───────────────────────────────────────────────── */ body.fi-app .select2-container--default .select2-selection--single, body.fi-app .select2-container--default .select2-selection--multiple { background: var(--fi-input-bg) !important; border: 1px solid var(--fi-border) !important; border-radius: var(--fi-radius) !important; min-height: 3.625rem !important; } body.fi-app .select2-container--default .select2-selection--single { height: 3.625rem !important; } body.fi-app .select2-container--default .select2-selection--single .select2-selection__rendered { color: var(--fi-text) !important; line-height: 3.5rem !important; font-size: 1.5rem !important; padding-left: 1.125rem !important; } body.fi-app .select2-container--default .select2-selection--single .select2-selection__arrow { height: 3.5rem !important; } body.fi-app .select2-dropdown { background: var(--fi-surface); border-color: var(--fi-border); border-radius: var(--fi-radius-lg); box-shadow: var(--fi-shadow-lg); font-size: var(--fi-text-sm); } body.fi-app .select2-container--default .select2-results__option { padding: 0.5rem 0.75rem; } body.fi-app .select2-container--default .select2-results__option--highlighted[aria-selected] { background: var(--fi-primary) !important; color: #111827 !important; } body.fi-app .select2-container--default .select2-results__option[aria-selected=true] { background: var(--fi-primary-soft) !important; color: var(--fi-primary-text) !important; } /* ── POS layout ─────────────────────────────────────────────── */ body.fi-app.pos-page { --pos-bg: var(--fi-bg); --pos-surface: var(--fi-surface); --pos-border: var(--fi-border); --pos-text: var(--fi-text); --pos-text-muted: var(--fi-text-muted); --pos-text-light: var(--fi-text-muted); --pos-primary: var(--fi-primary); --pos-primary-hover: var(--fi-primary-hover); --pos-primary-soft: var(--fi-primary-soft); --pos-header: var(--fi-header); --pos-header-text: var(--fi-text); --pos-input-bg: var(--fi-input-bg); --pos-input-bg-muted: var(--fi-gray-100); --pos-input-bg-subtle: var(--fi-gray-200); --pos-row-hover: var(--fi-sidebar-hover); --pos-section-bg: var(--fi-gray-50); --pos-section-bg-alt: var(--fi-gray-100); --pos-catalog-bg: var(--fi-bg); --pos-danger-soft: rgba(239, 68, 68, 0.12); --pos-success-soft: rgba(16, 185, 129, 0.12); --pos-danger-border: rgba(239, 68, 68, 0.35); --pos-danger-border-hover: rgba(239, 68, 68, 0.5); --pos-remove-bg: rgba(239, 68, 68, 0.08); --pos-ring: var(--fi-ring); --pos-subtotal-border: rgba(245, 158, 11, 0.35); --pos-border-strong: var(--fi-gray-300); --pos-shadow: var(--fi-shadow); --pos-shadow-lg: var(--fi-shadow-lg); font-size: var(--fi-text-sm); } [data-theme="dark"] body.fi-app.pos-page { --pos-input-bg-muted: var(--fi-gray-800); --pos-input-bg-subtle: var(--fi-gray-700); --pos-section-bg: var(--fi-gray-800); --pos-section-bg-alt: var(--fi-gray-800); --pos-danger-soft: rgba(248, 113, 113, 0.15); --pos-success-soft: rgba(52, 211, 153, 0.15); --pos-danger-border: rgba(248, 113, 113, 0.35); --pos-danger-border-hover: rgba(248, 113, 113, 0.55); --pos-remove-bg: rgba(248, 113, 113, 0.1); --pos-subtotal-border: rgba(251, 191, 36, 0.35); --pos-border-strong: var(--fi-gray-600); } /* POS cart inputs — theme-aware (dynamic rows use pos-cart-input, not .form-control) */ body.fi-app.pos-page .pos-cart-input, body.fi-app.pos-page .pos-qty-stepper__input { background: var(--pos-input-bg) !important; color: var(--pos-text) !important; border-color: var(--pos-border) !important; } body.fi-app.pos-page .pos-cart-input:focus, body.fi-app.pos-page .pos-qty-stepper__input:focus { border-color: var(--pos-primary) !important; box-shadow: 0 0 0 2px var(--fi-ring) !important; } body.fi-app.pos-page .pos-cart-input--readonly { background: var(--pos-input-bg-muted) !important; color: var(--pos-text-muted) !important; } body.fi-app.pos-page .pos-cart-input--subtotal { background: var(--pos-primary-soft) !important; color: var(--pos-primary) !important; border-color: var(--pos-subtotal-border) !important; } body.fi-app.pos-page .pos-qty-stepper { background: var(--pos-input-bg) !important; border-color: var(--pos-border) !important; } body.fi-app.pos-page .pos-qty-stepper__btn { background: var(--pos-input-bg-muted) !important; color: var(--pos-text-muted) !important; } body.fi-app.pos-page .pos-qty-stepper__btn--minus { color: var(--fi-danger) !important; } body.fi-app.pos-page .pos-qty-stepper__btn--plus { color: var(--fi-success) !important; } /* POS form controls in invoice panel */ body.fi-app.pos-page .form-control { background: var(--pos-input-bg-muted) !important; color: var(--pos-text) !important; border-color: var(--pos-border) !important; } body.fi-app.pos-page .form-control:focus { background: var(--pos-input-bg) !important; border-color: var(--pos-primary) !important; box-shadow: 0 0 0 2px var(--fi-ring) !important; } body.fi-app.pos-page .input-group-addon { background: var(--pos-input-bg-subtle) !important; border-color: var(--pos-border) !important; color: var(--pos-text-muted) !important; } body.fi-app.pos-page .select2-container--default .select2-selection--single { background: var(--pos-input-bg-muted) !important; border-color: var(--pos-border) !important; } body.fi-app.pos-page .select2-container--default .select2-selection--single .select2-selection__rendered { color: var(--pos-text) !important; } /* POS right panel */ body.fi-app.pos-page .pos-checkout-bar { background: var(--pos-surface) !important; border-color: var(--pos-border) !important; } /* Grand Total — blue accent (not theme yellow) */ body.fi-app.pos-page .pos-total-item--grand { background: #eff6ff !important; border-color: rgba(37, 99, 235, 0.25) !important; } body.fi-app.pos-page .pos-total-item--grand .pos-total-item__label, body.fi-app.pos-page .pos-total-item--grand .tot_grand { color: #2563eb !important; } body.fi-app.pos-page .pos-checkout-bar .pos-total-item--grand { background: #eff6ff !important; border-color: rgba(37, 99, 235, 0.25) !important; color: var(--pos-text) !important; } body.fi-app.pos-page .pos-checkout-bar .pos-total-item--grand .pos-total-item__label { color: #2563eb !important; } body.fi-app.pos-page .pos-checkout-bar .pos-total-item--grand .tot_grand { color: #2563eb !important; } [data-theme="dark"] body.fi-app.pos-page .pos-total-item--grand, [data-theme="dark"] body.fi-app.pos-page .pos-checkout-bar .pos-total-item--grand { background: #1f2838 !important; border-color: var(--pos-border) !important; color: #fff !important; } [data-theme="dark"] body.fi-app.pos-page .pos-total-item--grand .pos-total-item__label, [data-theme="dark"] body.fi-app.pos-page .pos-total-item--grand .tot_grand, [data-theme="dark"] body.fi-app.pos-page .pos-checkout-bar .pos-total-item--grand .pos-total-item__label, [data-theme="dark"] body.fi-app.pos-page .pos-checkout-bar .pos-total-item--grand .tot_grand { color: #fff !important; } body.fi-app.pos-page .pos-catalog-panel .pos-card__body { background: var(--pos-catalog-bg) !important; } body.fi-app.pos-page .pos-catalog-panel .pos-filters .btn-default { background: var(--pos-input-bg-muted) !important; border-color: var(--pos-border) !important; color: var(--pos-text-muted) !important; } body.fi-app.pos-page .pos-catalog-panel .pos-filters .btn-default:hover { background: var(--pos-row-hover) !important; color: var(--pos-text) !important; } body.fi-app.pos-page .pos-catalog-panel .pos-card__header--catalog .pos-card__title { font-size: 14px !important; } body.fi-app.pos-page .pos-catalog-panel .pos-filters .form-control, body.fi-app.pos-page .pos-catalog-panel .pos-filters .select2-container--default .select2-selection--single .select2-selection__rendered, body.fi-app.pos-page .pos-catalog-panel .pos-filters .btn { font-size: 12px !important; } body.fi-app.pos-page .pos-catalog-panel .pos-filters .btn { height: 32px !important; padding: 4px 8px !important; line-height: 1.2 !important; } body.fi-app.pos-page .pos-catalog-panel .pos-filters .form-control { height: 32px !important; padding: 4px 8px !important; } body.fi-app.pos-page .pos-catalog-panel .pos-filters .select2-container--default .select2-selection--single { height: 32px !important; } body.fi-app.pos-page .pos-catalog-panel .pos-filters .select2-container--default .select2-selection--single .select2-selection__rendered { line-height: 30px !important; font-size: 11px !important; } body.fi-app.pos-page .pos-catalog-panel .pos-filters .select2-container--default .select2-selection--single .select2-selection__arrow { height: 30px !important; } body.fi-app.pos-page .pos-cart-table > thead > tr > th { background: var(--pos-input-bg-muted) !important; color: var(--pos-text-muted) !important; } body.fi-app.pos-page .pos-cart-row:hover > td, body.fi-app.pos-page .pos-cart-table > tbody > tr:hover > td { background: var(--pos-row-hover) !important; } body.fi-app.pos-page .pos-hold-table thead th { background: var(--pos-input-bg-muted) !important; color: var(--pos-text-muted) !important; } body.fi-app.pos-page .pos-hold-dropdown { background: var(--fi-surface); border-color: var(--fi-border); box-shadow: var(--fi-shadow-lg); } body.fi-app.pos-page .pos-hold-dropdown__header { background: var(--fi-gray-50); border-bottom-color: var(--fi-border); } body.fi-app.pos-page .pos-hold-dropdown__title { color: var(--fi-text); } body.fi-app.pos-page .pos-hold-dropdown__title i { color: var(--fi-primary-text); } body.fi-app.pos-page .pos-hold-dropdown__subtitle { color: var(--fi-text-muted); } body.fi-app.pos-page .pos-hold-row__ref { color: var(--fi-text); } body.fi-app.pos-page .pos-hold-row__meta { color: var(--fi-text-muted); } body.fi-app.pos-page .pos-hold-row__total { color: var(--fi-text); } body.fi-app.pos-page .pos-hold-action { background: var(--fi-input-bg); border-color: var(--fi-border); color: var(--fi-text-muted); } body.fi-app.pos-page .pos-hold-action--edit:hover { background: rgba(16, 185, 129, 0.12); border-color: rgba(16, 185, 129, 0.35); color: var(--fi-success); } body.fi-app.pos-page .pos-hold-action--delete:hover { background: rgba(239, 68, 68, 0.12); border-color: rgba(239, 68, 68, 0.35); color: var(--fi-danger); } body.fi-app.pos-page .pos-hold-empty__content i { color: var(--fi-gray-400); } body.fi-app.pos-page .pos-hold-empty__content p { color: var(--fi-text); } body.fi-app.pos-page .pos-hold-empty__content span { color: var(--fi-text-muted); } [data-theme="dark"] body.fi-app.pos-page .pos-hold-dropdown__header { background: var(--fi-gray-800); } body.fi-app.pos-page .main-header.pos-header .navbar, body.fi-app.layout-top-nav .main-header .navbar { background: var(--fi-header) !important; border-bottom: 1px solid var(--fi-border) !important; margin-left: 0 !important; box-shadow: none !important; min-height: var(--fi-header-h) !important; } body.fi-app.pos-page .pos-header .navbar .nav > li > a, body.fi-app.pos-page .pos-header .navbar-brand { color: var(--fi-text-muted) !important; background: transparent !important; font-size: var(--fi-text-sm) !important; } body.fi-app.pos-page .pos-header .navbar .nav > li > a:hover, body.fi-app.pos-page .pos-header .navbar .nav > li > a:active, body.fi-app.pos-page .pos-header .navbar .nav > li > a:focus, body.fi-app.pos-page .pos-header .navbar .nav .open > a { color: var(--fi-text) !important; background: var(--fi-sidebar-hover) !important; } body.fi-app.pos-page .navbar-brand { color: var(--fi-text) !important; font-weight: 700 !important; font-size: var(--fi-text-base) !important; } body.fi-app.pos-page .content-wrapper { background: var(--fi-bg) !important; margin-left: 0 !important; } body.fi-app.pos-page .main-footer { margin-left: 0 !important; } body.fi-app.pos-page .main-sidebar, body.fi-app.layout-top-nav .main-sidebar { display: none !important; } body.fi-app.pos-page .main-header .logo, body.fi-app.layout-top-nav .main-header .logo { display: none !important; } body.fi-app.layout-top-nav .content-wrapper, body.fi-app.layout-top-nav .main-footer { margin-left: 0 !important; } body.fi-app.pos-page .pos-header-nav .navbar-nav > li > a { gap: 0; } body.fi-app.pos-page .pos-header-nav .navbar-nav > li > a > .fa, body.fi-app.pos-page .pos-header-nav .navbar-nav > li > a > [class*="flaticon"] { width: 1.5rem !important; font-size: 1.375rem !important; margin-right: 0.875rem !important; text-align: center; opacity: 0.85; color: inherit !important; } body.fi-app.pos-page .pos-header .navbar-toggle.pos-menu-toggle { color: var(--fi-text-muted) !important; background: transparent !important; border: none !important; font-family: FontAwesome !important; font-size: var(--fi-text-base) !important; padding: 1.125rem 1rem !important; margin-top: 0 !important; margin-bottom: 0 !important; } body.fi-app.pos-page .pos-header .navbar-toggle.pos-menu-toggle:before { content: "\f100"; } body.fi-app.pos-page .pos-header .navbar-toggle.pos-menu-toggle:not(.collapsed):before { content: "\f101"; } body.fi-app.pos-page .pos-header .navbar-toggle.pos-menu-toggle:hover, body.fi-app.pos-page .pos-header .navbar-toggle.pos-menu-toggle:focus { background: var(--fi-sidebar-hover) !important; color: var(--fi-primary) !important; } /* POS header — logo | nav | actions layout */ body.fi-app.pos-page .pos-header .navbar .container { display: flex; align-items: center; justify-content: space-between; } body.fi-app.pos-page .pos-header .navbar-collapse, body.fi-app.pos-page .pos-header .navbar-custom-menu { float: none !important; } body.fi-app.pos-page .pos-header .navbar-custom-menu { position: static !important; } body.fi-app.pos-page .pos-header .navbar .nav > li > a, body.fi-app.pos-page .pos-header .navbar-custom-menu .navbar-nav > li > a { display: inline-flex; align-items: center; gap: 0.375rem; line-height: 1.4; padding-top: 0.75rem !important; padding-bottom: 0.75rem !important; } body.fi-app.pos-page .pos-header .navbar-brand { display: inline-flex; align-items: center; padding-top: 0.75rem !important; padding-bottom: 0.75rem !important; height: auto !important; } body.fi-app.pos-page .pos-header .navbar-brand .store-header-logo { display: block; max-height: 36px; max-width: 160px; width: auto; height: auto; object-fit: contain; } body.fi-app.pos-page .pos-header .navbar-nav > .user-menu > .pos-hold-dropdown { right: 0; left: auto; background: var(--fi-surface); border-color: var(--fi-border); } body.fi-app.pos-page .pos-header .navbar .nav > li > a > .label, body.fi-app.pos-page .pos-header .hold_invoice_list_count { position: static !important; top: auto !important; right: auto !important; margin-left: 0; } body.fi-app.pos-page .pos-header .pos-hold-badge { min-width: 1.5rem; height: 1.5rem; padding: 0 0.5rem; font-size: 12px; font-weight: 600; line-height: 1; border-radius: 9999px; background: var(--fi-primary-soft); color: var(--fi-primary-text); border: 1px solid rgba(245, 158, 11, 0.28); box-shadow: none; } [data-theme="dark"] body.fi-app.pos-page .pos-header .pos-hold-badge { background: rgba(251, 191, 36, 0.14); color: var(--fi-primary); border-color: rgba(251, 191, 36, 0.32); } body.fi-app.pos-page .fi-theme-btn { margin: 0; } /* ── Login (Filament simple page) ───────────────────────────── */ body.fi-auth { font-size: 1.5rem !important; min-height: 100vh; margin: 0 !important; padding: 0 !important; overflow-x: hidden; background: var(--fi-bg) !important; font-family: 'Inter', ui-sans-serif, system-ui, -apple-system, sans-serif !important; } body.fi-auth *, body.fi-auth *::before, body.fi-auth *::after { box-sizing: border-box; } body.fi-auth .fi-auth-theme-toggle { position: fixed; top: 1.25rem; right: 1.25rem; z-index: 100; width: 3rem; height: 3rem; } body.fi-auth .fi-auth-theme-toggle .fa { font-size: 1.25rem !important; } body.fi-auth .fi-auth-layout { display: flex; align-items: center; justify-content: center; min-height: 100vh; padding: 3rem 1.5rem; } body.fi-auth .fi-auth-page { width: 100%; max-width: 40rem; } body.fi-auth .fi-auth-header { display: flex; flex-direction: column; align-items: center; text-align: center; margin-bottom: 2rem; } body.fi-auth .fi-auth-logo { display: inline-flex; margin-bottom: 1.75rem; } body.fi-auth .fi-auth-logo img { max-height: 5rem; max-width: 16rem; width: auto; height: auto; } body.fi-auth .fi-auth-heading { font-size: var(--fi-text-2xl) !important; font-weight: 700 !important; letter-spacing: -0.025em; color: var(--fi-text) !important; margin: 0 !important; padding: 0 !important; text-transform: none !important; text-align: center !important; line-height: var(--fi-leading-tight) !important; } body.fi-auth .fi-auth-card { background: var(--fi-surface); border: 1px solid var(--fi-border); border-radius: var(--fi-radius-xl); box-shadow: var(--fi-shadow-lg); padding: 2.5rem 3rem; } body.fi-auth .fi-notification { margin-bottom: var(--fi-notify-margin); } body.fi-auth .fi-auth-alert { display: flex; align-items: flex-start; gap: 0.875rem; border-radius: var(--fi-radius-xl); font-size: 1.375rem; line-height: var(--fi-leading); padding: 1rem 1rem 1rem 1rem; margin-bottom: 1.75rem; border: 1px solid var(--fi-border); background: var(--fi-surface); box-shadow: var(--fi-shadow-md); } body.fi-auth .fi-auth-form { display: flex; flex-direction: column; gap: 1.75rem; margin: 0; } body.fi-auth .fi-auth-field { display: flex; flex-direction: column; gap: 0.625rem; margin: 0; } body.fi-auth .fi-auth-label { display: block; font-size: var(--fi-text-xs); font-weight: 500; color: var(--fi-text) !important; margin: 0 !important; } body.fi-auth .fi-auth-input { display: block; width: 100% !important; height: 3.75rem !important; padding: 0.875rem 1.125rem !important; font-size: var(--fi-text-sm) !important; line-height: var(--fi-leading) !important; font-family: inherit !important; color: var(--fi-text) !important; background: var(--fi-input-bg) !important; border: 1px solid var(--fi-border) !important; border-radius: var(--fi-radius-lg) !important; outline: none !important; box-shadow: var(--fi-shadow) !important; transition: border-color 0.15s, box-shadow 0.15s; -webkit-appearance: none; appearance: none; } body.fi-auth .fi-auth-input::placeholder { color: var(--fi-text-muted); } body.fi-auth .fi-auth-input:focus { border-color: var(--fi-primary) !important; box-shadow: 0 0 0 3px var(--fi-ring) !important; } body.fi-auth .fi-auth-turnstile { display: flex; justify-content: center; margin-top: 0.25rem; } body.fi-auth .fi-auth-btn:disabled { opacity: 0.55; cursor: not-allowed; } body.fi-auth .fi-auth-actions { margin-top: 0.5rem; } body.fi-auth .fi-auth-btn { display: flex !important; align-items: center; justify-content: center; width: 100% !important; height: 3.75rem !important; padding: 0.875rem 1.25rem !important; font-size: var(--fi-text-sm) !important; font-weight: 600 !important; font-family: inherit !important; line-height: var(--fi-leading) !important; color: #111827 !important; background: var(--fi-primary) !important; border: none !important; border-radius: var(--fi-radius-lg) !important; cursor: pointer; transition: background-color 0.15s; box-shadow: none !important; } body.fi-auth .fi-auth-btn:hover, body.fi-auth .fi-auth-btn:focus { background: var(--fi-primary-hover) !important; color: #111827 !important; outline: none !important; } body.fi-auth .fi-auth-footer { display: flex; align-items: center; justify-content: center; flex-wrap: wrap; gap: 0.5rem; margin-top: 2rem; padding-top: 2rem; border-top: 1px solid var(--fi-border-subtle); font-size: var(--fi-text-sm); color: var(--fi-text-muted); } body.fi-auth .fi-auth-footer a { color: var(--fi-primary-text) !important; font-weight: 600; text-decoration: none; } body.fi-auth .fi-auth-footer a:hover { text-decoration: underline; } body.fi-auth .fi-auth-demo { margin-top: 2rem; padding-top: 2rem; border-top: 1px solid var(--fi-border-subtle); } body.fi-auth .fi-auth-demo__title { font-size: var(--fi-text-xs); font-weight: 600; color: var(--fi-text); margin: 0 0 1rem; } body.fi-auth .fi-auth-demo__table { width: 100%; border-collapse: collapse; font-size: var(--fi-text-xs); } body.fi-auth .fi-auth-demo__table td { padding: 0.625rem 0.75rem; color: var(--fi-text-muted); vertical-align: middle; } body.fi-auth .fi-auth-demo__table td:last-child { width: 7rem; } body.fi-auth .fi-auth-demo__btn { display: inline-flex; align-items: center; justify-content: center; width: 100%; height: 2.75rem; padding: 0 1rem; font-size: var(--fi-text-xs); font-weight: 600; font-family: inherit; color: var(--fi-primary-text); background: var(--fi-primary-soft); border: 1px solid transparent; border-radius: var(--fi-radius); cursor: pointer; transition: background-color 0.15s; } body.fi-auth .fi-auth-demo__btn:hover { background: var(--fi-primary); color: #111827; } body.fi-auth .fi-auth-demo__note { display: flex; align-items: flex-start; gap: 0.625rem; margin: 1rem 0 0; font-size: 1.125rem; font-style: italic; color: var(--fi-text-muted); line-height: var(--fi-leading); } body.fi-auth .fi-auth-demo__note .fa { margin-top: 0.25rem; color: var(--fi-warning); } @media (max-width: 767px) { body.fi-auth .fi-auth-page { max-width: 100%; } body.fi-auth .fi-auth-card { padding: 2rem 1.75rem; } body.fi-auth .fi-auth-heading { font-size: var(--fi-text-xl) !important; } } @media (max-width: 480px) { body.fi-auth .fi-auth-layout { padding: 2rem 1rem; } body.fi-auth .fi-auth-card { padding: 1.75rem 1.25rem; } body.fi-auth .fi-auth-logo img { max-height: 4rem; } body.fi-auth .fi-auth-heading { font-size: var(--fi-text-lg) !important; } } /* ── Misc ───────────────────────────────────────────────────── */ body.fi-app .text-blue, body.fi-app .text-primary { color: var(--fi-primary) !important; } body.fi-app .bg-gray { background-color: var(--fi-gray-100) !important; color: var(--fi-text) !important; } [data-theme="dark"] body.fi-app .bg-gray { background-color: var(--fi-gray-800) !important; color: var(--fi-text) !important; } body.fi-app .text-success { color: var(--fi-success) !important; } body.fi-app .text-danger { color: var(--fi-danger) !important; } body.fi-app .text-info { color: var(--fi-info) !important; } /* Purchase & Sales report */ body.fi-app .purchase-sales-report #print-div { background: var(--fi-surface); border: 1px solid var(--fi-border); border-radius: var(--fi-radius-xl); padding: 1.5rem; color: var(--fi-text); } body.fi-app .purchase-sales-report #print-div .table > tbody > tr > td { background: var(--fi-surface); color: var(--fi-text); } body.fi-app .purchase-sales-report #print-div > .table > tbody > tr > td { background: transparent; border: none; padding: 0; vertical-align: top; } body.fi-app .purchase-sales-report #print-div h3, body.fi-app .purchase-sales-report #print-div h4 { color: var(--fi-text); } body.fi-app .purchase-sales-report #print-div .table > thead > tr > td h4 { text-transform: none; letter-spacing: normal; font-size: var(--fi-text-lg) !important; } body.fi-app .pace .pace-progress { background: var(--fi-primary); } body.fi-app .well, body.fi-app .panel { background: var(--fi-surface); border-color: var(--fi-border); color: var(--fi-text); border-radius: var(--fi-radius-lg); box-shadow: var(--fi-shadow); } body.fi-app .panel-heading { background: var(--fi-gray-50); border-color: var(--fi-border); color: var(--fi-text); font-size: var(--fi-text-sm); font-weight: 600; border-radius: var(--fi-radius-lg) var(--fi-radius-lg) 0 0; } [data-theme="dark"] body.fi-app .panel-heading { background: var(--fi-gray-800); } body.fi-app .panel-body { font-size: var(--fi-text-sm); } /* Date pickers — dark mode */ [data-theme="dark"] .daterangepicker, [data-theme="dark"] .datepicker-dropdown { background: var(--fi-surface) !important; border-color: var(--fi-border) !important; color: var(--fi-text) !important; box-shadow: var(--fi-shadow-lg) !important; } [data-theme="dark"] .daterangepicker:before { border-bottom-color: var(--fi-border) !important; } [data-theme="dark"] .daterangepicker:after { border-bottom-color: var(--fi-surface) !important; } [data-theme="dark"] .daterangepicker.dropup:before { border-bottom-color: transparent !important; border-top-color: var(--fi-border) !important; } [data-theme="dark"] .daterangepicker.dropup:after { border-bottom-color: transparent !important; border-top-color: var(--fi-surface) !important; } [data-theme="dark"] .daterangepicker .calendar-table { background: var(--fi-surface) !important; border-color: var(--fi-border) !important; } [data-theme="dark"] .daterangepicker .calendar th, [data-theme="dark"] .daterangepicker .calendar td { color: var(--fi-text) !important; } [data-theme="dark"] .daterangepicker .calendar th.month { color: var(--fi-text) !important; } [data-theme="dark"] .daterangepicker td.week, [data-theme="dark"] .daterangepicker th.week { color: var(--fi-text-muted) !important; } [data-theme="dark"] .daterangepicker td.available:hover, [data-theme="dark"] .daterangepicker th.available:hover { background: var(--fi-gray-800) !important; color: var(--fi-text) !important; } [data-theme="dark"] .daterangepicker td.off, [data-theme="dark"] .daterangepicker td.off.in-range, [data-theme="dark"] .daterangepicker td.off.start-date, [data-theme="dark"] .daterangepicker td.off.end-date { background-color: transparent !important; color: var(--fi-text-muted) !important; } [data-theme="dark"] .daterangepicker td.in-range { background-color: var(--fi-primary-soft) !important; color: var(--fi-text) !important; } [data-theme="dark"] .daterangepicker td.active, [data-theme="dark"] .daterangepicker td.active:hover, [data-theme="dark"] .datepicker table tr td.active, [data-theme="dark"] .datepicker table tr td.active:hover { background: var(--fi-primary) !important; color: #111827 !important; } [data-theme="dark"] .daterangepicker td.disabled, [data-theme="dark"] .daterangepicker option.disabled { color: var(--fi-text-muted) !important; } [data-theme="dark"] .daterangepicker select.monthselect, [data-theme="dark"] .daterangepicker select.yearselect, [data-theme="dark"] .daterangepicker select.hourselect, [data-theme="dark"] .daterangepicker select.minuteselect, [data-theme="dark"] .daterangepicker select.secondselect, [data-theme="dark"] .daterangepicker select.ampmselect { background: var(--fi-gray-800) !important; color: var(--fi-text) !important; border: 1px solid var(--fi-border) !important; } [data-theme="dark"] .daterangepicker .input-mini { background: var(--fi-gray-950) !important; border-color: var(--fi-border) !important; color: var(--fi-text) !important; } [data-theme="dark"] .daterangepicker .input-mini.active { border-color: var(--fi-primary) !important; } [data-theme="dark"] .daterangepicker .ranges li { background: var(--fi-gray-800) !important; border-color: var(--fi-border) !important; color: var(--fi-primary) !important; } [data-theme="dark"] .daterangepicker .ranges li:hover, [data-theme="dark"] .daterangepicker .ranges li.active { background: var(--fi-primary) !important; border-color: var(--fi-primary) !important; color: #111827 !important; } [data-theme="dark"] .daterangepicker .range_inputs { border-top: 1px solid var(--fi-border); padding-top: 0.5rem; margin-top: 0.25rem; } [data-theme="dark"] .datepicker-dropdown { background: var(--fi-surface) !important; } [data-theme="dark"] .datepicker table tr td, [data-theme="dark"] .datepicker table tr th { color: var(--fi-text) !important; } [data-theme="dark"] .datepicker table tr td.day:hover, [data-theme="dark"] .datepicker table tr td.focused { background: var(--fi-gray-800) !important; } [data-theme="dark"] .datepicker table tr td.old, [data-theme="dark"] .datepicker table tr td.new { color: var(--fi-text-muted) !important; } [data-theme="dark"] .datepicker .datepicker-switch, [data-theme="dark"] .datepicker .prev, [data-theme="dark"] .datepicker .next, [data-theme="dark"] .datepicker tfoot tr th { color: var(--fi-text) !important; } [data-theme="dark"] .datepicker .dow { color: var(--fi-text-muted) !important; } /* ── Toastr — Filament notification style ──────────────────── */ #toast-container { z-index: 999999; } #toast-container > div, #toast-container > .fi-toast { position: relative; width: var(--fi-notify-toast-width); max-width: calc(100vw - 2rem); margin: 0 0 var(--fi-notify-margin); padding: 1.125rem 2.875rem 1.125rem 1.125rem; background-image: none !important; background-color: var(--fi-surface); border: 1px solid var(--fi-border); border-radius: var(--fi-radius-xl); box-shadow: var(--fi-shadow-lg); color: var(--fi-text); font-family: 'Inter', ui-sans-serif, system-ui, -apple-system, sans-serif; overflow: hidden; /* Grid layout: icon | title+message (do NOT use display/opacity !important — breaks fadeOut) */ display: grid; grid-template-columns: var(--fi-notify-icon-size) 1fr; grid-template-rows: auto auto; column-gap: 0.75rem; row-gap: 0.125rem; align-items: start; } #toast-container > div:hover, #toast-container > .fi-toast:hover { box-shadow: var(--fi-shadow-lg); cursor: default; } /* Icon badge — on toast itself, spans both rows */ #toast-container > .fi-toast::before { grid-column: 1; grid-row: 1 / span 2; align-self: start; display: flex; align-items: center; justify-content: center; width: var(--fi-notify-icon-size); height: var(--fi-notify-icon-size); border-radius: 9999px; font-family: 'FontAwesome'; font-size: var(--fi-notify-icon-font); line-height: 1; } #toast-container > .fi-toast.toast-success { border-color: rgba(16, 185, 129, 0.2); } #toast-container > .fi-toast.toast-success::before { content: "\f00c"; background: rgba(16, 185, 129, 0.12); color: var(--fi-success); } #toast-container > .fi-toast.toast-error { border-color: rgba(239, 68, 68, 0.2); } #toast-container > .fi-toast.toast-error::before { content: "\f00d"; background: rgba(239, 68, 68, 0.12); color: var(--fi-danger); } #toast-container > .fi-toast.toast-warning { border-color: rgba(245, 158, 11, 0.2); } #toast-container > .fi-toast.toast-warning::before { content: "\f071"; background: rgba(245, 158, 11, 0.12); color: var(--fi-warning); } #toast-container > .fi-toast.toast-info { border-color: rgba(59, 130, 246, 0.2); } #toast-container > .fi-toast.toast-info::before { content: "\f129"; background: rgba(59, 130, 246, 0.12); color: var(--fi-info); } #toast-container .fi-toast .toast-title { grid-column: 2; grid-row: 1; font-weight: 600; color: var(--fi-text); font-size: var(--fi-notify-title-size); line-height: var(--fi-leading-tight); margin: 0; padding: 0; min-height: 0; } #toast-container .fi-toast .toast-title::before { display: none !important; content: none !important; } #toast-container .fi-toast .toast-message { grid-column: 2; grid-row: 2; color: var(--fi-text-muted); font-size: var(--fi-notify-body-size); line-height: var(--fi-leading); word-wrap: break-word; margin: 0; padding: 0; } #toast-container .fi-toast .toast-message a, #toast-container .fi-toast .toast-message label { color: var(--fi-primary-text); } #toast-container .fi-toast .toast-message a:hover { color: var(--fi-primary-hover); } #toast-container .fi-toast .toast-close-button { position: absolute; top: 0.75rem; right: 0.75rem; z-index: 5; float: none; font-size: var(--fi-notify-close-size); font-weight: 400; line-height: 1; color: var(--fi-text-muted); text-shadow: none; opacity: 0.65; background: transparent; border: 0; padding: 0.25rem; cursor: pointer; pointer-events: auto; -webkit-appearance: none; } #toast-container .fi-toast .toast-close-button:hover, #toast-container .fi-toast .toast-close-button:focus { color: var(--fi-text); opacity: 1; } #toast-container .fi-toast .toast-progress { display: none; } /* Override legacy toastr.css solid backgrounds */ #toast-container > .toast-success, #toast-container > .toast-error, #toast-container > .toast-warning, #toast-container > .toast-info { background-color: var(--fi-surface) !important; background-image: none !important; color: var(--fi-text) !important; } .toast-top-right { top: var(--fi-notify-margin) !important; right: var(--fi-notify-margin) !important; } /* Kill legacy custom.css skin overrides when fi-app is active */ body.fi-app.skin-blue .wrapper, body.fi-app.skin-blue .main-sidebar, body.fi-app.skin-blue .left-side { background-color: var(--fi-sidebar) !important; } body.fi-app.skin-blue .sidebar-menu > li:hover > a, body.fi-app.skin-blue .sidebar-menu > li.active > a { color: var(--fi-primary-text) !important; background: var(--fi-sidebar-active) !important; border-left-color: transparent !important; } body.fi-app.skin-blue .sidebar-menu > li > .treeview-menu { background: transparent !important; } body.fi-app.skin-blue .main-header .logo { background-color: var(--fi-sidebar) !important; color: var(--fi-text) !important; } body.fi-app.skin-blue .main-header .logo:hover { background-color: var(--fi-sidebar-hover) !important; color: var(--fi-text) !important; } body.fi-app.skin-blue .main-header .navbar { background-color: var(--fi-header) !important; } body.fi-app.skin-blue .main-header .navbar .nav > li > a, body.fi-app.skin-blue .main-header .navbar-custom-menu .navbar-nav > li > a, body.fi-app.skin-blue .main-header .navbar .sidebar-toggle { background: transparent !important; } /* Responsive sidebar */ @media (max-width: 767px) { body.fi-app .content-wrapper, body.fi-app .main-footer, body.fi-app .main-header .navbar { margin-left: 0 !important; } body.fi-app .main-header { flex-wrap: wrap; height: auto; } body.fi-app .main-header .logo { flex: 1 1 100%; width: 100% !important; } body.fi-app .main-header .navbar { flex: 1 1 100%; height: auto !important; max-height: none !important; } body.fi-app .content-header { padding: 1rem 1rem 0.5rem !important; } body.fi-app .content-header > h1 { font-size: var(--fi-text-xl) !important; } body.fi-app .content { padding: 1rem !important; } body.fi-app.skin-blue .main-header .navbar .dropdown-menu, body.fi-app.skin-blue .main-header .navbar .dropdown-menu > li > a { background: var(--fi-surface) !important; color: var(--fi-text) !important; } body.fi-app.skin-blue .main-header .navbar .dropdown-menu > li > a:hover { background: var(--fi-sidebar-hover) !important; color: var(--fi-text) !important; } } /* ── Dashboard — Filament stat cards & sections ─────────────── */ .fi-dashboard { display: flex; flex-direction: column; gap: 1.5rem; } .fi-stat-grid { display: grid; gap: 1rem; grid-template-columns: 1fr; margin-bottom: 0; } @media (min-width: 576px) { .fi-stat-grid--4 { grid-template-columns: repeat(2, 1fr); } } .fi-stat-grid--4 .fi-stat-card { padding: 1.5rem 1.75rem; min-height: 9rem; } .fi-stat-grid--4 .fi-stat-card__label { font-size: var(--fi-text-lg); margin-bottom: 0.75rem; } .fi-stat-grid--4 .fi-stat-card__value { font-size: 3rem; } .fi-stat-grid--4 .fi-stat-card__icon { width: 4.75rem; height: 4.75rem; font-size: 2.25rem; } .fi-dashboard-hero { display: grid; gap: 1rem; align-items: stretch; } @media (min-width: 992px) { .fi-dashboard-hero { grid-template-columns: 1fr 1fr; } } .fi-dashboard-hero__aside { display: flex; flex-direction: column; gap: 1rem; } .fi-dashboard-hero .fi-dashboard-banner { display: flex; flex-direction: column; height: 100%; } .fi-dashboard-stats-chart { display: flex; flex-wrap: wrap; align-items: stretch; } @media (min-width: 992px) { .fi-dashboard-stats-chart { flex-wrap: nowrap; } .fi-dashboard-stats-chart > .col-md-6 { width: 50%; float: none; } } .fi-dashboard-stats-chart > [class*="col-"] { display: flex; flex-direction: column; margin-bottom: 0; } .fi-dashboard-stats-chart .fi-stat-grid--secondary { flex: 1 1 auto; display: grid; grid-template-columns: repeat(2, 1fr); grid-template-rows: repeat(2, 1fr); gap: 1rem; width: 100%; height: 100%; min-height: 100%; align-content: stretch; } .fi-dashboard-stats-chart .fi-stat-grid--secondary .fi-stat-card { min-height: 0; height: 100%; } .fi-dashboard-stats-chart .box.fi-card { display: flex; flex-direction: column; margin-bottom: 0; width: 100%; flex: 1 1 auto; height: 100%; } .fi-dashboard .row.fi-dashboard-stats-chart > .col-md-6:first-child { margin-bottom: 0 !important; } .fi-dashboard-bar-chart { width: 100%; margin-bottom: 0 !important; } .fi-dashboard .row.fi-dashboard-stats-chart > .fi-dashboard-bar-chart { margin-bottom: 0 !important; } body.fi-app .fi-dashboard-bar-chart .box.fi-card, body.fi-app .fi-dashboard-bar-chart .fi-card { margin-bottom: 0 !important; } .fi-dashboard-bar-chart__body { padding: 0.75rem 1rem 1rem !important; flex: 1 1 auto; display: flex; flex-direction: column; } .fi-dashboard-bar-chart__canvas-wrap { position: relative; height: 20rem; max-height: 20rem; width: 100%; } .fi-dashboard-bar-chart__canvas-wrap canvas { max-height: 100%; } [data-theme="dark"] .fi-dashboard-bar-chart__canvas-wrap { background: transparent; } .fi-dashboard-trending-chart__body { padding: 0.75rem 1rem 1rem !important; flex: 1 1 auto; display: flex; flex-direction: column; min-height: 0; } .fi-dashboard-trending-chart__canvas-wrap { position: relative; flex: 1 1 auto; min-height: 0; width: 100%; height: 100%; } .fi-dashboard-trending-chart__canvas-wrap canvas { max-height: 100%; } .fi-dashboard-items-row { display: flex; flex-wrap: wrap; align-items: stretch; } @media (min-width: 992px) { .fi-dashboard-items-row { flex-wrap: nowrap; } .fi-dashboard-items-row > .col-md-6 { width: 50%; float: none; } } .fi-dashboard .row.fi-dashboard-items-row > [class*="col-"] { display: flex; flex-direction: column; margin-bottom: 0 !important; } .fi-dashboard-items-row .box.fi-card { display: flex; flex-direction: column; flex: 1 1 auto; height: 100%; width: 100%; } body.fi-app .fi-dashboard-items-row .box.fi-card { margin-bottom: 0 !important; } .fi-dashboard-recent-items .box-body { flex: 1 1 auto; } .fi-dashboard-hero .fi-dashboard-banner__image { flex: 1; display: flex; align-items: center; justify-content: center; } .fi-stat-grid--secondary { margin-top: 0; } .fi-stat-card { display: flex; align-items: flex-start; justify-content: space-between; gap: 1rem; padding: 1.25rem 1.5rem; background: var(--fi-surface); border: 1px solid var(--fi-border); border-radius: var(--fi-radius-xl); box-shadow: var(--fi-shadow); transition: box-shadow 0.2s, border-color 0.2s; min-height: 7rem; } .fi-stat-card:hover { box-shadow: var(--fi-shadow-md); border-color: var(--fi-gray-300); } [data-theme="dark"] .fi-stat-card:hover { border-color: var(--fi-gray-600); } .fi-stat-card__content { flex: 1; min-width: 0; } .fi-stat-card__label { margin: 0 0 0.5rem; font-size: var(--fi-text-sm); font-weight: 500; color: var(--fi-text-muted); line-height: 1.4; } .fi-stat-card__value { margin: 0; font-size: var(--fi-text-2xl); font-weight: 700; color: var(--fi-text); line-height: var(--fi-leading-tight); letter-spacing: -0.02em; word-break: break-word; } .fi-stat-card__icon { flex-shrink: 0; display: flex; align-items: center; justify-content: center; width: 3rem; height: 3rem; border-radius: var(--fi-radius-lg); font-size: 1.375rem; } .fi-stat-card--primary .fi-stat-card__icon { background: var(--fi-primary-soft); color: var(--fi-primary); } .fi-stat-card--success .fi-stat-card__icon { background: rgba(16, 185, 129, 0.12); color: var(--fi-success); } .fi-stat-card--warning .fi-stat-card__icon { background: rgba(245, 158, 11, 0.12); color: var(--fi-warning); } .fi-stat-card--danger .fi-stat-card__icon { background: rgba(239, 68, 68, 0.12); color: var(--fi-danger); } .fi-stat-card--info .fi-stat-card__icon { background: rgba(59, 130, 246, 0.12); color: var(--fi-info); } /* Filament section card */ .fi-card { background: var(--fi-surface); border: 1px solid var(--fi-border); border-radius: var(--fi-radius-xl); box-shadow: var(--fi-shadow); overflow: hidden; } body.fi-app .fi-dashboard .box.fi-card, body.fi-app .fi-dashboard .box.box-primary.fi-card, .fi-dashboard .box.fi-card, .fi-dashboard .box.box-primary.fi-card { background: var(--fi-surface) !important; border: 1px solid var(--fi-border) !important; border-radius: var(--fi-radius-xl) !important; box-shadow: var(--fi-shadow) !important; border-top: 1px solid var(--fi-border) !important; margin-bottom: 0 !important; } .fi-card-header { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 1rem; padding: 1rem 1.5rem; border-bottom: 1px solid var(--fi-border); background: var(--fi-surface); } .fi-card-title { margin: 0; font-size: var(--fi-text-lg); font-weight: 600; color: var(--fi-text); } .fi-card-body { padding: 1.5rem; } .fi-dashboard-banner__image { text-align: center; padding: 1.5rem !important; } .fi-dashboard-banner__image img { width: 100%; max-height: 280px; object-fit: contain; border-radius: var(--fi-radius-lg); } /* Filament segmented period filter */ .fi-segmented { display: inline-flex; flex-wrap: wrap; gap: 0.25rem; padding: 0.25rem; background: var(--fi-gray-100); border-radius: var(--fi-radius-lg); border: 1px solid var(--fi-border); } [data-theme="dark"] .fi-segmented { background: var(--fi-gray-800); } .fi-segmented__btn { border: none; background: transparent; color: var(--fi-text-muted); font-size: var(--fi-text-sm); font-weight: 500; padding: 0.5rem 0.875rem; border-radius: var(--fi-radius); cursor: pointer; transition: background 0.15s, color 0.15s, box-shadow 0.15s; line-height: 1.25; } .fi-segmented__btn:hover { color: var(--fi-text); background: var(--fi-surface); } .fi-segmented__btn.active { background: var(--fi-surface); color: var(--fi-primary-text); font-weight: 600; box-shadow: var(--fi-shadow); } [data-theme="dark"] .fi-segmented__btn.active { background: var(--fi-gray-900); } .fi-dashboard .row { margin-left: -0.75rem; margin-right: -0.75rem; } .fi-dashboard .row > [class*="col-"] { padding-left: 0.75rem; padding-right: 0.75rem; margin-bottom: 0; } .fi-dashboard .box-header .box-title { font-size: var(--fi-text-lg) !important; font-weight: 600 !important; text-transform: none !important; letter-spacing: -0.01em; } .fi-dashboard .box-header.with-border, .fi-dashboard .box-header { border-bottom: 1px solid var(--fi-border) !important; } .fi-dashboard .table > thead > tr.bg-warning > th { background: rgba(245, 158, 11, 0.12) !important; color: var(--fi-primary-text) !important; } /* ── Collapsible list filters ─────────────────────────────── */ body.fi-app .fi-list-filter-bar { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 0.75rem; width: 100%; margin-bottom: 0.75rem; } body.fi-app .fi-list-filter-bar__start { display: flex; align-items: center; flex-shrink: 0; } body.fi-app .fi-list-filter-bar__actions { display: flex; align-items: center; flex-wrap: wrap; gap: 0.5rem; margin-left: auto; } body.fi-app .fi-list-filter-bar__actions .box-tools { position: static !important; float: none !important; top: auto !important; right: auto !important; display: flex; align-items: center; flex-wrap: wrap; gap: 0.5rem; margin: 0; } body.fi-app .fi-list-filter-bar__actions .box-tools .btn, body.fi-app .fi-list-filter-bar__actions .box-tools a.btn { width: auto !important; display: inline-flex; align-items: center; margin: 0 !important; white-space: nowrap; } /* Filament-style listing header actions (Add New, etc.) */ body.fi-app .fi-list-action { display: inline-flex !important; align-items: center !important; justify-content: center !important; gap: 0.375rem !important; width: auto !important; min-height: 2.25rem !important; height: auto !important; padding: 0.4375rem 0.875rem !important; font-size: var(--fi-text-sm) !important; font-weight: 600 !important; line-height: 1.25 !important; border-radius: var(--fi-radius) !important; border: 1px solid transparent !important; box-shadow: var(--fi-shadow) !important; transition: background 0.15s, border-color 0.15s, color 0.15s, box-shadow 0.15s, transform 0.1s !important; text-decoration: none !important; white-space: nowrap !important; margin: 0 !important; } body.fi-app .fi-list-action .fa, body.fi-app .fi-list-action .ion { font-size: 0.875em; line-height: 1; } body.fi-app .fi-list-action.btn-info, body.fi-app a.fi-list-action.btn-info { background: var(--fi-primary) !important; border-color: var(--fi-primary) !important; color: #111827 !important; } body.fi-app .fi-list-action.btn-info:hover, body.fi-app .fi-list-action.btn-info:focus, body.fi-app a.fi-list-action.btn-info:hover, body.fi-app a.fi-list-action.btn-info:focus { background: var(--fi-primary-hover) !important; border-color: var(--fi-primary-hover) !important; color: #111827 !important; box-shadow: var(--fi-shadow) !important; } body.fi-app .fi-list-action.btn-success, body.fi-app a.fi-list-action.btn-success { background: var(--fi-success) !important; border-color: var(--fi-success) !important; color: #fff !important; } body.fi-app .fi-list-action.btn-success:hover, body.fi-app .fi-list-action.btn-success:focus, body.fi-app a.fi-list-action.btn-success:hover, body.fi-app a.fi-list-action.btn-success:focus { filter: brightness(0.95); box-shadow: var(--fi-shadow) !important; color: #fff !important; } body.fi-app .fi-list-action.btn-warning, body.fi-app a.fi-list-action.btn-warning { background: var(--fi-warning) !important; border-color: var(--fi-warning) !important; color: #111827 !important; } body.fi-app .fi-list-action.btn-danger, body.fi-app a.fi-list-action.btn-danger { background: var(--fi-danger) !important; border-color: var(--fi-danger) !important; color: #fff !important; } body.fi-app .fi-list-action.btn-default, body.fi-app .fi-list-action.btn-flat, body.fi-app a.fi-list-action.btn-default { background: var(--fi-surface) !important; border-color: var(--fi-border) !important; color: var(--fi-text) !important; box-shadow: var(--fi-shadow) !important; } body.fi-app .fi-list-action.btn-default:hover, body.fi-app .fi-list-action.btn-flat:hover, body.fi-app a.fi-list-action.btn-default:hover { background: var(--fi-gray-50) !important; border-color: var(--fi-gray-300) !important; color: var(--fi-text) !important; } [data-theme="dark"] body.fi-app .fi-list-action.btn-default:hover, [data-theme="dark"] body.fi-app .fi-list-action.btn-flat:hover { background: var(--fi-gray-800) !important; border-color: var(--fi-gray-600) !important; } body.fi-app .fi-list-action.btn-primary, body.fi-app a.fi-list-action.btn-primary { background: var(--fi-primary) !important; border-color: var(--fi-primary) !important; color: #111827 !important; } body.fi-app .box-header > .fi-list-filter-bar + .box-title, body.fi-app .box-header > .box-title:first-child { margin: 0 0 0.75rem; } body.fi-app .fi-filter-toggle { display: inline-flex; align-items: center; gap: 0.375rem; padding: 0.4375rem 0.875rem; font-size: var(--fi-text-sm); font-weight: 500; color: var(--fi-text); background: var(--fi-surface); border: 1px solid var(--fi-border); border-radius: var(--fi-radius); box-shadow: var(--fi-shadow); transition: background 0.15s, border-color 0.15s, color 0.15s; } body.fi-app .fi-filter-toggle:hover, body.fi-app .fi-filter-toggle:focus { background: var(--fi-gray-50); border-color: var(--fi-gray-300); color: var(--fi-text); } body.fi-app .fi-filter-toggle.active { background: var(--fi-primary); border-color: var(--fi-primary); color: #fff; } body.fi-app .fi-filter-toggle.active:hover, body.fi-app .fi-filter-toggle.active:focus { background: var(--fi-primary-hover, var(--fi-primary)); border-color: var(--fi-primary-hover, var(--fi-primary)); color: #fff; } body.fi-app .fi-list-filters { width: 100%; padding-top: 0.25rem; } body.fi-app .fi-list-filters--collapsed { display: none; } body.fi-app .box-header > .fi-list-filters .form-group { margin-bottom: 0.875rem; } @media (max-width: 767px) { .fi-stat-card { min-height: auto; padding: 1rem 1.25rem; } .fi-stat-card__value { font-size: var(--fi-text-xl); } .fi-card-header { flex-direction: column; align-items: stretch; } .fi-segmented { width: 100%; justify-content: stretch; } .fi-segmented__btn { flex: 1; text-align: center; padding: 0.5rem 0.5rem; } }