/**
* LineOne Theme for foodiebro_admin
*
* A Bootstrap-compatible theme inspired by LineOne template design.
* Uses CSS variables for easy customization and progressive enhancement.
*
* @copyright Copyright (C) 2024 FoodieBro. All rights reserved.
*/
/* ========================================================================
1. CSS Variables - Color System
======================================================================== */
:root {
/* Primary colors - Brand Blue matching Logo */
--lo-primary: #2563eb;
--lo-primary-rgb: 37, 99, 235;
--lo-primary-light: #3b82f6;
--lo-primary-dark: #1d4ed8;
--lo-primary-gradient: linear-gradient(135deg, #2563eb, #3b82f6);
--lo-primary-gradient-hover: linear-gradient(135deg, #1d4ed8, #2563eb);
/* Secondary colors */
--lo-secondary: #64748b;
--lo-secondary-light: #94a3b8;
--lo-secondary-dark: #475569;
/* Neutral colors - Slate palette */
--lo-slate-50: #f8fafc;
--lo-slate-100: #f1f5f9;
--lo-slate-150: #e9eef5;
--lo-slate-200: #e2e8f0;
--lo-slate-300: #cbd5e1;
--lo-slate-400: #94a3b8;
--lo-slate-500: #64748b;
--lo-slate-600: #475569;
--lo-slate-700: #334155;
--lo-slate-800: #1e293b;
--lo-slate-900: #0f172a;
/* Status colors */
--lo-success: #10b981;
--lo-success-light: #34d399;
--lo-warning: #f59e0b;
--lo-warning-light: #fbbf24;
--lo-danger: #ef4444;
--lo-danger-light: #f87171;
--lo-info: #0ea5e9;
--lo-info-light: #38bdf8;
/* Common settings */
--lo-border-radius: 0.625rem;
--lo-border-radius-sm: 0.375rem;
--lo-border-radius-lg: 0.875rem;
--lo-border-radius-xl: 1rem;
--lo-transition: all 0.2s ease-in-out;
--lo-shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.05);
--lo-shadow: 0 1px 3px rgba(0, 0, 0, 0.1), 0 1px 2px rgba(0, 0, 0, 0.06);
--lo-shadow-md: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);
--lo-shadow-lg: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05);
--lo-shadow-xl: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04);
/* Light mode specific */
--lo-body-bg: #f8fafc;
--lo-body-color: #334155;
--lo-card-bg: #ffffff;
--lo-card-border: #e2e8f0;
--lo-input-bg: #ffffff;
--lo-input-border: #cbd5e1;
--lo-navbar-bg: #ffffff;
--lo-sidenav-bg: #ffffff;
--lo-sidenav-text: #64748b;
--lo-sidenav-text-hover: #1e293b;
--lo-sidenav-active-bg: rgba(37, 99, 235, 0.08);
--lo-sidenav-active-text: #2563eb;
--lo-sidenav-link-text: #5b6b82;
--lo-sidenav-link-text: color-mix(in srgb, var(--lo-primary) 30%, var(--lo-secondary) 70%);
--lo-sidenav-link-hover-text: var(--lo-primary-dark);
--lo-sidenav-link-hover-bg: rgba(var(--lo-primary-rgb), 0.08);
--lo-sidenav-link-hover-border: rgba(var(--lo-primary-rgb), 0.2);
--lo-sidenav-link-hover-accent: rgba(var(--lo-primary-rgb), 0.62);
--lo-sidenav-link-active-text: var(--lo-primary-dark);
--lo-sidenav-link-active-bg: linear-gradient(180deg, rgba(var(--lo-primary-rgb), 0.16) 0%, rgba(var(--lo-primary-rgb), 0.1) 100%);
--lo-sidenav-link-active-border: rgba(var(--lo-primary-rgb), 0.28);
--lo-sidenav-link-active-accent: var(--lo-primary);
--lo-sidenav-divider: #f1f5f9;
--lo-sidenav-tree-line: #e2e8f0;
--lo-sidenav-liquid-border: rgba(148, 163, 184, 0.22);
--lo-sidenav-liquid-hover-bg: linear-gradient(134deg, rgba(255, 255, 255, 0.48) 0%, rgba(236, 243, 252, 0.29) 46%, rgba(211, 224, 242, 0.17) 100%);
--lo-sidenav-liquid-active-bg: linear-gradient(134deg, rgba(220, 234, 255, 0.53) 0%, rgba(186, 214, 248, 0.31) 56%, rgba(144, 183, 236, 0.2) 100%);
--lo-sidenav-liquid-glow: rgba(59, 130, 246, 0.19);
--lo-sidenav-report-text: #1746a2;
--lo-sidenav-report-bg: linear-gradient(138deg, rgba(203, 223, 255, 0.62) 0%, rgba(174, 204, 245, 0.36) 52%, rgba(148, 182, 235, 0.24) 100%);
--lo-sidenav-report-hover-bg: linear-gradient(138deg, rgba(211, 229, 255, 0.7) 0%, rgba(188, 214, 248, 0.45) 52%, rgba(158, 189, 238, 0.3) 100%);
--lo-sidenav-report-active-bg: linear-gradient(138deg, rgba(158, 193, 243, 0.8) 0%, rgba(122, 166, 231, 0.56) 54%, rgba(90, 138, 214, 0.38) 100%);
--lo-sidenav-admin-text: #0a8ba8;
--lo-sidenav-admin-bg: linear-gradient(138deg, rgba(188, 243, 250, 0.72) 0%, rgba(155, 232, 242, 0.46) 56%, rgba(125, 210, 225, 0.32) 100%);
--lo-sidenav-admin-hover-bg: linear-gradient(138deg, rgba(198, 247, 252, 0.8) 0%, rgba(173, 237, 245, 0.56) 56%, rgba(141, 220, 233, 0.38) 100%);
--lo-sidenav-admin-active-bg: linear-gradient(138deg, rgba(132, 213, 229, 0.84) 0%, rgba(96, 194, 214, 0.64) 56%, rgba(70, 170, 196, 0.45) 100%);
--lo-sidenav-todo-text: #8f5b00;
--lo-sidenav-todo-bg: linear-gradient(138deg, rgba(255, 233, 188, 0.7) 0%, rgba(251, 212, 132, 0.44) 54%, rgba(243, 188, 96, 0.32) 100%);
--lo-sidenav-todo-hover-bg: linear-gradient(138deg, rgba(255, 238, 201, 0.8) 0%, rgba(252, 219, 150, 0.56) 54%, rgba(245, 198, 114, 0.4) 100%);
--lo-sidenav-todo-active-bg: linear-gradient(138deg, rgba(242, 189, 93, 0.86) 0%, rgba(228, 164, 60, 0.64) 54%, rgba(197, 131, 34, 0.48) 100%);
/* Shared form control metrics (for reusable UI components) */
--lo-control-size: 1.125rem;
--lo-control-size-half: 0.5625rem;
--lo-control-inline-label-gap: 1.5rem;
--lo-control-inline-gap-x: 1.25rem;
--lo-control-inline-gap-y: 0.5rem;
}
/* ========================================================================
1.0.0 Global Typography - Inter + Noto Sans TC
======================================================================== */
body,
.sidenav,
.sidenav-link,
.navbar,
.card,
.btn,
.form-control,
.table,
.modal,
.dropdown-menu,
.breadcrumb,
.page-link,
.badge,
.alert,
.list-group-item,
h1,
h2,
h3,
h4,
h5,
h6,
.h1,
.h2,
.h3,
.h4,
.h5,
.h6 {
font-family: 'Inter', 'Noto Sans TC', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif !important;
}
/* ========================================================================
1.0.1 Color Scheme Variables - Store Type Themes
======================================================================== */
/* Coffee - 咖啡店 (Warm Brown) */
html[data-color-scheme="coffee"] {
--lo-primary: #92400e;
--lo-primary-rgb: 146, 64, 14;
--lo-primary-light: #b45309;
--lo-primary-dark: #78350f;
--lo-primary-gradient: linear-gradient(135deg, #92400e, #b45309);
--lo-primary-gradient-hover: linear-gradient(135deg, #78350f, #92400e);
--lo-sidenav-active-bg: rgba(146, 64, 14, 0.08);
--lo-sidenav-active-text: #92400e;
}
/* Breakfast - 早餐店 (Warm Burnt Orange) */
html[data-color-scheme="breakfast"] {
--lo-primary: #c2410c;
--lo-primary-rgb: 194, 65, 12;
--lo-primary-light: #ea580c;
--lo-primary-dark: #9a3412;
--lo-primary-gradient: linear-gradient(135deg, #c2410c, #ea580c);
--lo-primary-gradient-hover: linear-gradient(135deg, #9a3412, #c2410c);
--lo-sidenav-active-bg: rgba(194, 65, 12, 0.08);
--lo-sidenav-active-text: #c2410c;
}
/* Lunch - 午餐/健康 (Warm Forest Green) */
html[data-color-scheme="lunch"] {
--lo-primary: #15803d;
--lo-primary-rgb: 21, 128, 61;
--lo-primary-light: #16a34a;
--lo-primary-dark: #14532d;
--lo-primary-gradient: linear-gradient(135deg, #15803d, #16a34a);
--lo-primary-gradient-hover: linear-gradient(135deg, #14532d, #15803d);
--lo-sidenav-active-bg: rgba(21, 128, 61, 0.08);
--lo-sidenav-active-text: #15803d;
}
/* Spicy - 麻辣/鍋物 (Warm Brick Red) */
html[data-color-scheme="spicy"] {
--lo-primary: #b91c1c;
--lo-primary-rgb: 185, 28, 28;
--lo-primary-light: #dc2626;
--lo-primary-dark: #991b1b;
--lo-primary-gradient: linear-gradient(135deg, #b91c1c, #dc2626);
--lo-primary-gradient-hover: linear-gradient(135deg, #991b1b, #b91c1c);
--lo-sidenav-active-bg: rgba(185, 28, 28, 0.08);
--lo-sidenav-active-text: #b91c1c;
}
/* Brunch - 早午餐/甜點 (Warm Berry Pink) */
html[data-color-scheme="brunch"] {
--lo-primary: #be185d;
--lo-primary-rgb: 190, 24, 93;
--lo-primary-light: #db2777;
--lo-primary-dark: #9d174d;
--lo-primary-gradient: linear-gradient(135deg, #be185d, #db2777);
--lo-primary-gradient-hover: linear-gradient(135deg, #9d174d, #be185d);
--lo-sidenav-active-bg: rgba(190, 24, 93, 0.08);
--lo-sidenav-active-text: #be185d;
}
/* Dark - 質感黑 */
html[data-color-scheme="dark"] {
--lo-primary: #334155;
--lo-primary-rgb: 51, 65, 85;
--lo-primary-light: #475569;
--lo-primary-dark: #1e293b;
--lo-primary-gradient: linear-gradient(135deg, #334155, #475569);
--lo-primary-gradient-hover: linear-gradient(135deg, #1e293b, #334155);
--lo-sidenav-active-bg: rgba(51, 65, 85, 0.1);
--lo-sidenav-active-text: #1e293b;
}
/* ========================================================================
1.1 Dark Mode Variables
======================================================================== */
html.dark-mode {
--lo-body-bg: #0f172a;
--lo-body-color: #e2e8f0;
--lo-card-bg: #1e293b;
--lo-card-border: #334155;
--lo-input-bg: #1e293b;
--lo-input-border: #475569;
--lo-navbar-bg: #1e293b;
--lo-navbar-gradient: linear-gradient(135deg, #0f172a 0%, #1e293b 100%);
/* Sidenav Variables - Dark */
--lo-sidenav-bg: #1e293b;
--lo-sidenav-text: #94a3b8;
--lo-sidenav-text-hover: #ffffff;
--lo-sidenav-active-bg: rgba(37, 99, 235, 0.15);
--lo-sidenav-active-text: #60a5fa;
--lo-sidenav-link-text: #9cb5d7;
--lo-sidenav-link-text: color-mix(in srgb, var(--lo-primary-light) 56%, #cbd5e1 44%);
--lo-sidenav-link-hover-text: #ffffff;
--lo-sidenav-link-hover-bg: rgba(var(--lo-primary-rgb), 0.18);
--lo-sidenav-link-hover-border: rgba(var(--lo-primary-rgb), 0.3);
--lo-sidenav-link-hover-accent: rgba(var(--lo-primary-rgb), 0.82);
--lo-sidenav-link-active-text: var(--lo-primary-light);
--lo-sidenav-link-active-bg: linear-gradient(180deg, rgba(var(--lo-primary-rgb), 0.28) 0%, rgba(var(--lo-primary-rgb), 0.18) 100%);
--lo-sidenav-link-active-border: rgba(var(--lo-primary-rgb), 0.38);
--lo-sidenav-link-active-accent: var(--lo-primary-light);
--lo-sidenav-divider: rgba(255, 255, 255, 0.05);
--lo-sidenav-tree-line: #334155;
--lo-sidenav-liquid-border: rgba(148, 163, 184, 0.24);
--lo-sidenav-liquid-hover-bg: linear-gradient(134deg, rgba(176, 190, 208, 0.17) 0%, rgba(94, 110, 131, 0.17) 52%, rgba(63, 79, 101, 0.14) 100%);
--lo-sidenav-liquid-active-bg: linear-gradient(134deg, rgba(119, 178, 250, 0.2) 0%, rgba(78, 145, 245, 0.19) 56%, rgba(55, 109, 210, 0.15) 100%);
--lo-sidenav-liquid-glow: rgba(96, 165, 250, 0.22);
--lo-sidenav-report-text: #c7ddff;
--lo-sidenav-report-bg: linear-gradient(138deg, rgba(70, 104, 156, 0.42) 0%, rgba(53, 83, 126, 0.34) 52%, rgba(40, 63, 96, 0.3) 100%);
--lo-sidenav-report-hover-bg: linear-gradient(138deg, rgba(84, 122, 178, 0.5) 0%, rgba(60, 97, 150, 0.4) 52%, rgba(46, 77, 119, 0.34) 100%);
--lo-sidenav-report-active-bg: linear-gradient(138deg, rgba(95, 149, 228, 0.56) 0%, rgba(76, 129, 214, 0.47) 54%, rgba(57, 104, 184, 0.4) 100%);
--lo-sidenav-admin-text: #91f0ff;
--lo-sidenav-admin-bg: linear-gradient(138deg, rgba(34, 95, 110, 0.56) 0%, rgba(30, 77, 91, 0.46) 56%, rgba(24, 60, 73, 0.38) 100%);
--lo-sidenav-admin-hover-bg: linear-gradient(138deg, rgba(40, 113, 130, 0.62) 0%, rgba(34, 93, 109, 0.53) 56%, rgba(27, 72, 86, 0.44) 100%);
--lo-sidenav-admin-active-bg: linear-gradient(138deg, rgba(58, 150, 173, 0.72) 0%, rgba(42, 121, 142, 0.6) 56%, rgba(31, 91, 109, 0.5) 100%);
--lo-sidenav-todo-text: #ffd58f;
--lo-sidenav-todo-bg: linear-gradient(138deg, rgba(116, 84, 31, 0.56) 0%, rgba(95, 69, 27, 0.46) 54%, rgba(75, 53, 20, 0.38) 100%);
--lo-sidenav-todo-hover-bg: linear-gradient(138deg, rgba(139, 99, 36, 0.62) 0%, rgba(111, 79, 31, 0.52) 54%, rgba(88, 63, 23, 0.44) 100%);
--lo-sidenav-todo-active-bg: linear-gradient(138deg, rgba(168, 120, 43, 0.76) 0%, rgba(135, 94, 33, 0.62) 54%, rgba(107, 75, 25, 0.52) 100%);
}
/* ========================================================================
1.1.1 Dark Mode + Color Scheme Combinations
======================================================================== */
/* Coffee - Dark Mode */
html.dark-mode[data-color-scheme="coffee"] {
--lo-primary: #b45309;
--lo-primary-rgb: 180, 83, 9;
--lo-primary-light: #d97706;
--lo-primary-dark: #92400e;
--lo-primary-gradient: linear-gradient(135deg, #b45309, #d97706);
--lo-primary-gradient-hover: linear-gradient(135deg, #92400e, #b45309);
--lo-sidenav-active-bg: rgba(180, 83, 9, 0.15);
--lo-sidenav-active-text: #f59e0b;
}
html.dark-mode[data-color-scheme="coffee"] a:not(.btn):not(.sidenav-link):not(.nav-link):not(.dropdown-item) {
color: #fcd34d !important;
}
html.dark-mode[data-color-scheme="coffee"] .btn-primary {
box-shadow: 0 0 20px -5px rgba(217, 119, 6, 0.4);
}
html.dark-mode[data-color-scheme="coffee"] .form-control:focus {
border-color: #d97706 !important;
box-shadow: 0 0 0 3px rgba(217, 119, 6, 0.25), 0 0 20px -5px rgba(217, 119, 6, 0.3) !important;
}
/* Breakfast - Dark Mode */
html.dark-mode[data-color-scheme="breakfast"] {
--lo-primary: #ea580c;
--lo-primary-rgb: 234, 88, 12;
--lo-primary-light: #f97316;
--lo-primary-dark: #c2410c;
--lo-primary-gradient: linear-gradient(135deg, #ea580c, #f97316);
--lo-primary-gradient-hover: linear-gradient(135deg, #c2410c, #ea580c);
--lo-sidenav-active-bg: rgba(234, 88, 12, 0.15);
--lo-sidenav-active-text: #fdba74;
}
html.dark-mode[data-color-scheme="breakfast"] a:not(.btn):not(.sidenav-link):not(.nav-link):not(.dropdown-item) {
color: #fdba74 !important;
}
html.dark-mode[data-color-scheme="breakfast"] .btn-primary {
box-shadow: 0 0 20px -5px rgba(249, 115, 22, 0.4);
}
html.dark-mode[data-color-scheme="breakfast"] .form-control:focus {
border-color: #f97316 !important;
box-shadow: 0 0 0 3px rgba(249, 115, 22, 0.25), 0 0 20px -5px rgba(249, 115, 22, 0.3) !important;
}
/* Lunch - Dark Mode */
html.dark-mode[data-color-scheme="lunch"] {
--lo-primary: #16a34a;
--lo-primary-rgb: 22, 163, 74;
--lo-primary-light: #22c55e;
--lo-primary-dark: #15803d;
--lo-primary-gradient: linear-gradient(135deg, #16a34a, #22c55e);
--lo-primary-gradient-hover: linear-gradient(135deg, #15803d, #16a34a);
--lo-sidenav-active-bg: rgba(22, 163, 74, 0.15);
--lo-sidenav-active-text: #86efac;
}
html.dark-mode[data-color-scheme="lunch"] a:not(.btn):not(.sidenav-link):not(.nav-link):not(.dropdown-item) {
color: #86efac !important;
}
html.dark-mode[data-color-scheme="lunch"] .btn-primary {
box-shadow: 0 0 20px -5px rgba(34, 197, 94, 0.4);
}
html.dark-mode[data-color-scheme="lunch"] .form-control:focus {
border-color: #22c55e !important;
box-shadow: 0 0 0 3px rgba(34, 197, 94, 0.25), 0 0 20px -5px rgba(34, 197, 94, 0.3) !important;
}
/* Spicy - Dark Mode */
html.dark-mode[data-color-scheme="spicy"] {
--lo-primary: #dc2626;
--lo-primary-rgb: 220, 38, 38;
--lo-primary-light: #ef4444;
--lo-primary-dark: #b91c1c;
--lo-primary-gradient: linear-gradient(135deg, #dc2626, #ef4444);
--lo-primary-gradient-hover: linear-gradient(135deg, #b91c1c, #dc2626);
--lo-sidenav-active-bg: rgba(220, 38, 38, 0.15);
--lo-sidenav-active-text: #fca5a5;
}
html.dark-mode[data-color-scheme="spicy"] a:not(.btn):not(.sidenav-link):not(.nav-link):not(.dropdown-item) {
color: #fca5a5 !important;
}
html.dark-mode[data-color-scheme="spicy"] .btn-primary {
box-shadow: 0 0 20px -5px rgba(239, 68, 68, 0.4);
}
html.dark-mode[data-color-scheme="spicy"] .form-control:focus {
border-color: #ef4444 !important;
box-shadow: 0 0 0 3px rgba(239, 68, 68, 0.25), 0 0 20px -5px rgba(239, 68, 68, 0.3) !important;
}
/* Brunch - Dark Mode */
html.dark-mode[data-color-scheme="brunch"] {
--lo-primary: #db2777;
--lo-primary-rgb: 219, 39, 119;
--lo-primary-light: #ec4899;
--lo-primary-dark: #be185d;
--lo-primary-gradient: linear-gradient(135deg, #db2777, #ec4899);
--lo-primary-gradient-hover: linear-gradient(135deg, #be185d, #db2777);
--lo-sidenav-active-bg: rgba(219, 39, 119, 0.15);
--lo-sidenav-active-text: #f9a8d4;
}
html.dark-mode[data-color-scheme="brunch"] a:not(.btn):not(.sidenav-link):not(.nav-link):not(.dropdown-item) {
color: #f9a8d4 !important;
}
html.dark-mode[data-color-scheme="brunch"] .btn-primary {
box-shadow: 0 0 20px -5px rgba(236, 72, 153, 0.4);
}
html.dark-mode[data-color-scheme="brunch"] .form-control:focus {
border-color: #ec4899 !important;
box-shadow: 0 0 0 3px rgba(236, 72, 153, 0.25), 0 0 20px -5px rgba(236, 72, 153, 0.3) !important;
}
/* Dark scheme - dark mode variant */
html.dark-mode[data-color-scheme="dark"] {
--lo-primary: #94a3b8;
--lo-primary-rgb: 148, 163, 184;
--lo-primary-light: #cbd5e1;
--lo-primary-dark: #64748b;
--lo-sidenav-active-bg: rgba(148, 163, 184, 0.15);
--lo-sidenav-active-text: #e2e8f0;
}
html.dark-mode[data-color-scheme="dark"] a:not(.btn):not(.sidenav-link):not(.nav-link):not(.dropdown-item) {
color: #cbd5e1 !important;
}
html.dark-mode[data-color-scheme="dark"] .btn-primary {
box-shadow: 0 0 20px -5px rgba(148, 163, 184, 0.3);
}
html.dark-mode[data-color-scheme="dark"] .form-control:focus {
border-color: #94a3b8 !important;
box-shadow: 0 0 0 3px rgba(148, 163, 184, 0.2), 0 0 20px -5px rgba(148, 163, 184, 0.2) !important;
}
/* ========================================================================
1.1.2 Color Scheme - Store Action Card Header (transparent, text follows palette)
======================================================================== */
html[data-color-scheme] .store-action-card .card-header {
background: transparent !important;
}
html[data-color-scheme] .store-action-card .card-header h3 {
color: var(--lo-primary, #2563eb) !important;
}
/* ========================================================================
1.1.3 Color Scheme - Navbar Gradient
======================================================================== */
html.dark-mode[data-color-scheme="coffee"] .layout-navbar.bg-primary,
html.dark-mode[data-color-scheme="breakfast"] .layout-navbar.bg-primary,
html.dark-mode[data-color-scheme="lunch"] .layout-navbar.bg-primary,
html.dark-mode[data-color-scheme="spicy"] .layout-navbar.bg-primary,
html.dark-mode[data-color-scheme="brunch"] .layout-navbar.bg-primary,
html.dark-mode .layout-navbar.bg-primary {
background: linear-gradient(135deg, #0f172a 0%, #1e293b 100%) !important;
}
/* ========================================================================
1.1.4 Color Scheme - Dark Mode Visual Effects (glow colors)
======================================================================== */
html.dark-mode[data-color-scheme="coffee"] .layout-content {
background: radial-gradient(ellipse at top right, rgba(217, 119, 6, 0.08) 0%, transparent 50%), radial-gradient(ellipse at bottom left, rgba(245, 158, 11, 0.06) 0%, transparent 50%), #0f172a !important;
}
html.dark-mode[data-color-scheme="breakfast"] .layout-content {
background: radial-gradient(ellipse at top right, rgba(249, 115, 22, 0.08) 0%, transparent 50%), radial-gradient(ellipse at bottom left, rgba(251, 146, 60, 0.06) 0%, transparent 50%), #0f172a !important;
}
html.dark-mode[data-color-scheme="lunch"] .layout-content {
background: radial-gradient(ellipse at top right, rgba(34, 197, 94, 0.08) 0%, transparent 50%), radial-gradient(ellipse at bottom left, rgba(74, 222, 128, 0.06) 0%, transparent 50%), #0f172a !important;
}
html.dark-mode[data-color-scheme="spicy"] .layout-content {
background: radial-gradient(ellipse at top right, rgba(239, 68, 68, 0.08) 0%, transparent 50%), radial-gradient(ellipse at bottom left, rgba(248, 113, 113, 0.06) 0%, transparent 50%), #0f172a !important;
}
html.dark-mode[data-color-scheme="brunch"] .layout-content {
background: radial-gradient(ellipse at top right, rgba(236, 72, 153, 0.08) 0%, transparent 50%), radial-gradient(ellipse at bottom left, rgba(244, 114, 182, 0.06) 0%, transparent 50%), #0f172a !important;
}
html.dark-mode[data-color-scheme="dark"] .layout-content {
background: radial-gradient(ellipse at top right, rgba(148, 163, 184, 0.06) 0%, transparent 50%), radial-gradient(ellipse at bottom left, rgba(203, 213, 225, 0.04) 0%, transparent 50%), #0f172a !important;
}
/* Dark mode card glow per scheme */
html.dark-mode[data-color-scheme="coffee"] .card {
box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.3), 0 0 40px -10px rgba(217, 119, 6, 0.15) !important;
}
html.dark-mode[data-color-scheme="breakfast"] .card {
box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.3), 0 0 40px -10px rgba(249, 115, 22, 0.15) !important;
}
html.dark-mode[data-color-scheme="lunch"] .card {
box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.3), 0 0 40px -10px rgba(34, 197, 94, 0.15) !important;
}
html.dark-mode[data-color-scheme="spicy"] .card {
box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.3), 0 0 40px -10px rgba(239, 68, 68, 0.15) !important;
}
html.dark-mode[data-color-scheme="brunch"] .card {
box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.3), 0 0 40px -10px rgba(236, 72, 153, 0.15) !important;
}
html.dark-mode[data-color-scheme="dark"] .card {
box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.3), 0 0 40px -10px rgba(148, 163, 184, 0.1) !important;
}
/* Dark mode navbar glow per scheme */
html.dark-mode[data-color-scheme="coffee"] .layout-navbar {
border-bottom: 1px solid rgba(217, 119, 6, 0.2) !important;
box-shadow: 0 4px 20px -5px rgba(217, 119, 6, 0.1);
}
html.dark-mode[data-color-scheme="breakfast"] .layout-navbar {
border-bottom: 1px solid rgba(249, 115, 22, 0.2) !important;
box-shadow: 0 4px 20px -5px rgba(249, 115, 22, 0.1);
}
html.dark-mode[data-color-scheme="lunch"] .layout-navbar {
border-bottom: 1px solid rgba(34, 197, 94, 0.2) !important;
box-shadow: 0 4px 20px -5px rgba(34, 197, 94, 0.1);
}
html.dark-mode[data-color-scheme="spicy"] .layout-navbar {
border-bottom: 1px solid rgba(239, 68, 68, 0.2) !important;
box-shadow: 0 4px 20px -5px rgba(239, 68, 68, 0.1);
}
html.dark-mode[data-color-scheme="brunch"] .layout-navbar {
border-bottom: 1px solid rgba(236, 72, 153, 0.2) !important;
box-shadow: 0 4px 20px -5px rgba(236, 72, 153, 0.1);
}
/* Shared navbar surface and utility buttons must live in global CSS.
Do not rely on Blade @section('styles') inside the navbar partial,
because page-level sections can replace it entirely. */
body #layout-navbar {
background: rgba(248, 250, 252, 0.94) !important;
border-bottom: 1px solid rgba(148, 163, 184, 0.2) !important;
box-shadow: 0 10px 24px rgba(15, 23, 42, 0.06) !important;
-webkit-backdrop-filter: blur(14px);
backdrop-filter: blur(14px);
}
html.dark-mode body #layout-navbar {
background: rgba(15, 23, 42, 0.88) !important;
border-bottom-color: rgba(148, 163, 184, 0.18) !important;
box-shadow: 0 14px 32px rgba(2, 6, 23, 0.34) !important;
}
body #layout-navbar .lo-scheme-btn {
width: 40px !important;
height: 40px !important;
min-width: 40px !important;
min-height: 40px !important;
padding: 0 !important;
border-radius: 999px !important;
overflow: hidden;
background-color: rgba(255, 255, 255, 0.92) !important;
border-color: rgba(var(--lo-primary-rgb, 37, 99, 235), 0.16) !important;
color: var(--lo-primary, #2563eb) !important;
box-shadow: 0 6px 14px rgba(15, 23, 42, 0.08) !important;
}
body #layout-navbar .lo-scheme-btn:hover {
background-color: #ffffff !important;
border-color: rgba(var(--lo-primary-rgb, 37, 99, 235), 0.24) !important;
}
body #layout-navbar .lo-scheme-btn i {
color: var(--lo-primary, #2563eb) !important;
}
html.dark-mode body #layout-navbar .lo-scheme-btn {
background-color: rgba(15, 23, 42, 0.82) !important;
border-color: rgba(148, 163, 184, 0.26) !important;
color: rgba(241, 245, 249, 0.94) !important;
box-shadow: 0 8px 18px rgba(2, 6, 23, 0.3) !important;
}
html.dark-mode body #layout-navbar .lo-scheme-btn:hover {
background-color: rgba(15, 23, 42, 0.94) !important;
border-color: rgba(148, 163, 184, 0.36) !important;
}
html.dark-mode body #layout-navbar .lo-scheme-btn i {
color: rgba(241, 245, 249, 0.94) !important;
}
body #layout-navbar img {
filter: none !important;
}
html.dark-mode body #layout-navbar img {
filter: brightness(0) invert(1) !important;
}
/* ========================================================================
1.1.4 Navbar Store Name
======================================================================== */
.lo-navbar-store-name {
font-size: 0.82rem;
font-weight: 700;
color: var(--lo-primary-dark, #1d4ed8);
max-width: min(420px, 52vw);
line-height: 1.2;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
display: block;
}
/* Navbar needs relative for dropdown panel positioning */
#layout-navbar {
position: relative;
}
.lo-navbar-center {
flex: 1;
min-width: 0;
display: flex;
justify-content: center;
align-items: center;
padding: 0 0.5rem;
}
.lo-navbar-center .lo-navbar-store-name {
max-width: 100%;
}
.lo-navbar-right-icons {
width: 32px;
min-width: 32px;
flex-shrink: 0;
display: flex;
align-items: center;
justify-content: center;
}
html.dark-mode .lo-navbar-store-name {
color: rgba(241, 245, 249, 0.92);
}
/* Hide duplicate store name in page body when navbar already shows it */
.report-store-name {
display: none !important;
}
/* Store dropdown toggle (admin roles) */
button.lo-navbar-store-name {
cursor: pointer;
background: none !important;
border: none !important;
box-shadow: none !important;
outline: none !important;
}
/* Searchable store dropdown panel */
.lo-store-dropdown-panel {
display: none;
position: absolute;
top: 100%;
left: 50%;
transform: translateX(-50%);
width: min(340px, 92vw);
background: var(--lo-card-bg, #fff);
border: 1px solid var(--lo-slate-200, #e2e8f0);
border-radius: 10px;
box-shadow: 0 8px 24px rgba(0,0,0,0.12);
z-index: 99999;
overflow: hidden;
}
.lo-store-dropdown-panel.show {
display: block;
}
@media (min-width: 992px) {
.lo-store-dropdown-panel {
left: 50%;
right: auto;
transform: translateX(-50%);
}
}
.lo-store-search-wrap {
padding: 8px 10px;
border-bottom: 1px solid var(--lo-slate-150, #e2e8f0);
}
.lo-store-search-input {
width: 100%;
border: 1px solid var(--lo-slate-200, #e2e8f0);
border-radius: 6px;
padding: 6px 10px;
font-size: 0.82rem;
outline: none;
background: var(--lo-slate-50, #f8fafc);
}
.lo-store-search-input:focus {
border-color: var(--lo-primary, #2563eb);
box-shadow: 0 0 0 2px rgba(var(--lo-primary-rgb, 37,99,235), 0.15);
}
.lo-store-list {
max-height: 260px;
overflow-y: auto;
}
.lo-store-item {
display: block;
padding: 8px 12px;
font-size: 0.82rem;
color: var(--lo-slate-700, #334155);
text-decoration: none;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
.lo-store-item:hover {
background: var(--lo-slate-50, #f8fafc);
color: var(--lo-primary, #2563eb);
text-decoration: none;
}
.lo-store-item.active {
color: var(--lo-primary, #2563eb);
font-weight: 700;
background: rgba(var(--lo-primary-rgb, 37,99,235), 0.06);
}
.lo-store-hash {
color: var(--lo-slate-400, #94a3b8);
font-size: 0.75rem;
margin-right: 2px;
}
.lo-store-item.lo-hidden {
display: none;
}
/* Dark mode */
html.dark-mode .lo-store-dropdown-panel {
background: #1e293b;
border-color: #334155;
}
html.dark-mode .lo-store-search-input {
background: #0f172a;
border-color: #334155;
color: #e2e8f0;
}
html.dark-mode .lo-store-item {
color: #cbd5e1;
}
html.dark-mode .lo-store-item:hover {
background: rgba(255,255,255,0.05);
}
html.dark-mode .lo-store-hash {
color: #64748b;
}
/* Header only keeps burger + store name */
#layout-navbar .lo-scheme-picker,
#layout-navbar .lo-navbar-user-switch,
#layout-navbar .lo-navbar-icon-btn {
display: none !important;
}
/* Flat icon buttons in navbar (no circle border) */
.lo-navbar-icon-btn,
body #layout-navbar .lo-navbar-icon-btn {
width: 32px !important;
height: 32px !important;
min-width: 32px !important;
display: inline-flex !important;
align-items: center !important;
justify-content: center !important;
border: none !important;
border-radius: 8px !important;
background: transparent !important;
box-shadow: none !important;
color: var(--lo-primary, #2563eb) !important;
font-size: 0.92rem;
transition: background 0.15s;
}
.lo-navbar-icon-btn:hover,
body #layout-navbar .lo-navbar-icon-btn:hover {
background: rgba(var(--lo-primary-rgb, 37, 99, 235), 0.08) !important;
}
html.dark-mode .lo-navbar-icon-btn,
html.dark-mode body #layout-navbar .lo-navbar-icon-btn {
color: rgba(241, 245, 249, 0.9) !important;
}
html.dark-mode .lo-navbar-icon-btn:hover,
html.dark-mode body #layout-navbar .lo-navbar-icon-btn:hover {
background: rgba(241, 245, 249, 0.08) !important;
}
/* Remove circle border from scheme btn in navbar */
body #layout-navbar .lo-scheme-btn {
border: none !important;
box-shadow: none !important;
background: transparent !important;
}
body #layout-navbar .lo-scheme-btn:hover {
background: rgba(var(--lo-primary-rgb, 37, 99, 235), 0.08) !important;
border: none !important;
}
html.dark-mode body #layout-navbar .lo-scheme-btn {
border: none !important;
box-shadow: none !important;
background: transparent !important;
}
html.dark-mode body #layout-navbar .lo-scheme-btn:hover {
background: rgba(241, 245, 249, 0.08) !important;
border: none !important;
}
/* ========================================================================
1.1.5 Unified Theme Panel Styling
======================================================================== */
.lo-scheme-picker {
position: relative;
display: inline-flex;
align-items: center;
}
.lo-scheme-btn {
width: 34px;
height: 34px;
min-width: 34px;
border-radius: 50%;
background: rgba(255, 255, 255, 0.2);
border: 1px solid rgba(255, 255, 255, 0.3);
cursor: pointer;
display: flex;
align-items: center;
justify-content: center;
transition: all 0.2s;
padding: 0;
color: rgba(255, 255, 255, 0.9);
font-size: 0.85rem;
}
.lo-scheme-btn:hover {
transform: scale(1.1);
border-color: rgba(255, 255, 255, 0.6);
}
.lo-scheme-btn:focus {
outline: none;
box-shadow: 0 0 0 3px rgba(255, 255, 255, 0.3);
}
/* --- Theme Panel (replaces old dropdown) --- */
.lo-theme-panel {
position: absolute;
top: calc(100% + 10px);
right: 0;
background: #ffffff;
border: 1px solid #e2e8f0;
border-radius: 16px;
padding: 14px 16px;
display: none;
z-index: 1100;
box-shadow: 0 12px 32px rgba(0, 0, 0, 0.12), 0 2px 6px rgba(0, 0, 0, 0.06);
min-width: 200px;
width: 220px;
}
.lo-theme-panel.show {
display: block;
animation: lo-panel-in 0.18s ease-out;
}
@keyframes lo-panel-in {
from { opacity: 0; transform: translateY(-6px) scale(0.97); }
to { opacity: 1; transform: translateY(0) scale(1); }
}
.lo-panel-section {
margin-bottom: 12px;
}
.lo-panel-section:last-child {
margin-bottom: 0;
}
.lo-panel-label {
font-size: 0.7rem;
font-weight: 700;
text-transform: uppercase;
letter-spacing: 0.06em;
color: #94a3b8;
margin-bottom: 8px;
padding-left: 2px;
}
/* --- Mode Switch (Day/Dark) --- */
.lo-mode-switch {
display: flex;
gap: 0;
background: #f1f5f9;
border-radius: 10px;
padding: 3px;
position: relative;
}
.lo-mode-btn {
flex: 1;
display: flex;
align-items: center;
justify-content: center;
gap: 5px;
padding: 6px 0;
border: none;
border-radius: 8px;
background: transparent;
color: #64748b;
font-size: 0.78rem;
font-weight: 600;
cursor: pointer;
transition: all 0.2s;
}
.lo-mode-btn i {
font-size: 0.72rem;
}
.lo-mode-btn:hover {
color: #334155;
}
.lo-mode-btn.active {
background: #ffffff;
color: var(--lo-primary, #2563eb);
box-shadow: 0 1px 4px rgba(0, 0, 0, 0.08);
}
.lo-mode-switch.lo-mode-locked {
opacity: 0.45;
pointer-events: none;
}
/* --- Color Scheme Grid --- */
.lo-scheme-grid {
display: flex;
flex-wrap: wrap;
gap: 6px;
}
.lo-scheme-option {
display: flex;
align-items: center;
justify-content: center;
padding: 3px;
border-radius: 10px;
cursor: pointer;
transition: all 0.18s;
border: 2px solid transparent;
background: transparent;
font-size: 0;
}
.lo-scheme-option:hover {
background: rgba(0, 0, 0, 0.04);
transform: scale(1.12);
}
.lo-scheme-option.active {
border-color: var(--lo-primary, #2563eb);
background: rgba(var(--lo-primary-rgb, 37, 99, 235), 0.06);
}
.lo-scheme-dot {
width: 22px;
height: 22px;
border-radius: 50%;
flex-shrink: 0;
box-shadow: 0 1px 3px rgba(0, 0, 0, 0.12);
}
/* --- Dark mode panel overrides --- */
html.dark-mode .lo-theme-panel {
background: #1e293b;
border-color: #334155;
box-shadow: 0 12px 32px rgba(0, 0, 0, 0.4), 0 2px 6px rgba(0, 0, 0, 0.2);
}
html.dark-mode .lo-panel-label {
color: #64748b;
}
html.dark-mode .lo-mode-switch {
background: #0f172a;
}
html.dark-mode .lo-mode-btn {
color: #94a3b8;
}
html.dark-mode .lo-mode-btn:hover {
color: #e2e8f0;
}
html.dark-mode .lo-mode-btn.active {
background: #334155;
color: #f1f5f9;
box-shadow: 0 1px 4px rgba(0, 0, 0, 0.2);
}
html.dark-mode .lo-scheme-option:hover {
background: rgba(255, 255, 255, 0.06);
}
html.dark-mode .lo-scheme-option.active {
border-color: rgba(241, 245, 249, 0.5);
background: rgba(255, 255, 255, 0.08);
}
/* ========================================================================
1.2 Sidenav System - Modern Tree Style
======================================================================== */
.layout-sidenav,
.sidenav {
background:
radial-gradient(circle at 8% 0%, rgba(255, 255, 255, 0.18) 0%, rgba(255, 255, 255, 0) 36%),
linear-gradient(180deg, rgba(255, 255, 255, 0.06) 0%, rgba(255, 255, 255, 0) 24%),
var(--lo-sidenav-bg) !important;
transition: var(--lo-transition);
border-right: 1px solid var(--lo-sidenav-divider) !important;
display: flex !important;
flex-direction: column !important;
position: relative;
overflow: hidden;
}
.sidenav-inner {
flex: 1 !important;
}
.layout-sidenav::before {
content: "";
position: absolute;
inset: 0 0 auto 0;
height: 160px;
pointer-events: none;
background:
radial-gradient(88% 64% at 16% -4%, rgba(255, 255, 255, 0.22) 0%, rgba(255, 255, 255, 0) 74%),
linear-gradient(180deg, rgba(255, 255, 255, 0.14) 0%, rgba(255, 255, 255, 0) 100%);
opacity: 0.47;
}
.sidenav-link {
color: var(--lo-sidenav-text) !important;
transition: color 0.3s ease, background 0.32s ease, transform 0.28s cubic-bezier(0.22, 1, 0.36, 1), border-color 0.3s ease, box-shadow 0.32s ease;
border-radius: 0.75rem;
margin: 0.125rem 0.75rem;
padding: 0.625rem 1rem !important;
font-weight: 600 !important;
letter-spacing: 0.01em;
font-size: 0.9rem !important;
border: 1px solid transparent;
position: relative;
overflow: hidden;
background: linear-gradient(180deg, rgba(255, 255, 255, 0.03) 0%, rgba(255, 255, 255, 0.01) 54%, rgba(255, 255, 255, 0) 100%);
}
.sidenav-link::before {
content: "";
position: absolute;
inset: 0;
background:
linear-gradient(118deg, rgba(255, 255, 255, 0.46) 0%, rgba(255, 255, 255, 0.17) 44%, rgba(255, 255, 255, 0.02) 70%, rgba(255, 255, 255, 0) 84%),
radial-gradient(84% 96% at 18% 8%, rgba(255, 255, 255, 0.31) 0%, rgba(255, 255, 255, 0) 64%);
opacity: 0;
transform: translateX(-12%) scale(1.02);
transition: opacity 0.3s ease, transform 0.38s cubic-bezier(0.16, 1, 0.3, 1);
pointer-events: none;
}
.sidenav-link::after {
content: "";
position: absolute;
top: -54%;
left: -18%;
width: 52%;
height: 210%;
background:
radial-gradient(circle at 64% 34%, rgba(255, 255, 255, 0.44) 0%, rgba(255, 255, 255, 0.15) 34%, rgba(255, 255, 255, 0) 68%),
radial-gradient(circle at 30% 62%, rgba(255, 255, 255, 0.2) 0%, rgba(255, 255, 255, 0) 60%);
opacity: 0;
transform: translateX(-8%) scale(0.98);
transition: opacity 0.3s ease, transform 0.42s cubic-bezier(0.16, 1, 0.3, 1);
pointer-events: none;
}
.sidenav-link:hover {
color: var(--lo-sidenav-text-hover) !important;
background: var(--lo-sidenav-liquid-hover-bg) !important;
border-color: var(--lo-sidenav-liquid-border) !important;
box-shadow:
inset 0 1px 0 rgba(255, 255, 255, 0.39),
inset 0 -8px 16px rgba(255, 255, 255, 0.07),
0 12px 24px -20px var(--lo-sidenav-liquid-glow);
transform: translateY(-1px) scale(1.002);
}
.sidenav-link:hover::before,
.sidenav-link:focus-visible::before {
opacity: 0.7;
transform: translateX(0) scale(1);
}
.sidenav-link:hover::after,
.sidenav-link:focus-visible::after {
opacity: 0.58;
transform: translateX(11%) scale(1);
}
.sidenav-link:active {
transform: translateY(0) scale(0.997);
}
/* Active state - Pill style with left accent bar */
.sidenav-item.active>.sidenav-link,
.sidenav-item.active>.sidenav-link:hover {
background: var(--lo-sidenav-liquid-active-bg) !important;
color: var(--lo-sidenav-active-text) !important;
font-weight: 700 !important;
border-color: var(--lo-sidenav-liquid-border) !important;
box-shadow:
inset 0 1px 0 rgba(255, 255, 255, 0.43),
inset 0 -8px 18px rgba(255, 255, 255, 0.08),
0 14px 26px -20px var(--lo-sidenav-liquid-glow);
transform: translateY(-0.5px);
}
.sidenav-item.active>.sidenav-link::before,
.sidenav-item.active>.sidenav-link::after,
.sidenav-link[aria-expanded="true"]::before,
.sidenav-link[aria-expanded="true"]::after {
opacity: 0.68;
transform: translateX(0) scale(1);
}
/* Submenu structure */
.sidenav-collapse {
list-style: none;
position: relative;
padding-left: 1.5rem !important;
margin-left: 1.5rem !important;
}
/* Level Line (Tree Style) */
.sidenav-collapse::before {
content: "";
position: absolute;
left: 0;
top: 0;
bottom: 0;
width: 1px;
background-color: var(--lo-sidenav-tree-line);
}
/* Submenu links */
.sidenav-collapse .sidenav-link {
margin-left: 0.25rem;
font-size: 0.8125rem !important;
font-weight: 500 !important;
}
html.layout-collapsed .sidenav-link::before,
html.layout-collapsed .sidenav-link::after {
display: none;
}
@media (prefers-reduced-motion: reduce) {
.sidenav-link,
.sidenav-link::before,
.sidenav-link::after {
transition: none !important;
}
.sidenav-link:hover,
.sidenav-link:active,
.sidenav-item.active>.sidenav-link {
transform: none !important;
}
}
/* Navigation Icons */
.sidenav-icon {
font-size: 1.375rem !important;
margin-right: 0.75rem !important;
width: 1.25rem;
text-align: center;
}
/* Sidenav Header/Label */
.sidenav-header {
font-size: 0.75rem !important;
text-transform: uppercase;
font-weight: 700 !important;
letter-spacing: 0.05em;
color: var(--lo-sidenav-text) !important;
opacity: 0.7;
padding: 1rem 1.75rem 0.5rem !important;
display: block;
}
/* Chevron Rotation */
.sidenav-link .fa-angle-down {
transition: transform 0.3s ease;
}
.sidenav-link[aria-expanded="true"] .fa-angle-down {
transform: rotate(180deg);
}
.sidenav-folder-group {
margin: 0.35rem 0.62rem 0.28rem;
}
.sidenav-folder-group>.sidenav-link.sidenav-folder-toggle {
color: var(--lo-sidenav-text) !important;
transition: color 0.3s ease, background 0.32s ease, transform 0.28s cubic-bezier(0.22, 1, 0.36, 1), border-color 0.3s ease, box-shadow 0.32s ease;
border-radius: 0.75rem;
margin: 0 !important;
padding: 0.625rem 1rem !important;
font-weight: 700 !important;
letter-spacing: 0.01em;
font-size: 0.9rem !important;
border: 1px solid transparent;
position: relative;
overflow: hidden;
background: linear-gradient(180deg, rgba(255, 255, 255, 0.03) 0%, rgba(255, 255, 255, 0.01) 54%, rgba(255, 255, 255, 0) 100%);
}
.sidenav-folder-group>.sidenav-link.sidenav-folder-toggle::before {
content: "";
position: absolute;
inset: 0;
background:
linear-gradient(118deg, rgba(255, 255, 255, 0.46) 0%, rgba(255, 255, 255, 0.17) 44%, rgba(255, 255, 255, 0.02) 70%, rgba(255, 255, 255, 0) 84%),
radial-gradient(84% 96% at 18% 8%, rgba(255, 255, 255, 0.31) 0%, rgba(255, 255, 255, 0) 64%);
opacity: 0;
transform: translateX(-12%) scale(1.02);
transition: opacity 0.3s ease, transform 0.38s cubic-bezier(0.16, 1, 0.3, 1);
pointer-events: none;
}
.sidenav-folder-group>.sidenav-link.sidenav-folder-toggle::after {
content: "";
position: absolute;
top: -54%;
left: -18%;
width: 52%;
height: 210%;
background:
radial-gradient(circle at 64% 34%, rgba(255, 255, 255, 0.44) 0%, rgba(255, 255, 255, 0.15) 34%, rgba(255, 255, 255, 0) 68%),
radial-gradient(circle at 30% 62%, rgba(255, 255, 255, 0.2) 0%, rgba(255, 255, 255, 0) 60%);
opacity: 0;
transform: translateX(-8%) scale(0.98);
transition: opacity 0.3s ease, transform 0.42s cubic-bezier(0.16, 1, 0.3, 1);
pointer-events: none;
}
.sidenav-folder-group>.sidenav-link.sidenav-folder-toggle .sidenav-icon {
color: inherit !important;
font-size: 1.375rem !important;
}
.sidenav-folder-group>.sidenav-link.sidenav-folder-toggle .fa-angle-down {
color: inherit !important;
}
.sidenav-folder-group>.sidenav-link.sidenav-folder-toggle:hover {
color: var(--lo-sidenav-text-hover) !important;
background: var(--lo-sidenav-liquid-hover-bg) !important;
border-color: var(--lo-sidenav-liquid-border) !important;
box-shadow:
inset 0 1px 0 rgba(255, 255, 255, 0.39),
inset 0 -8px 16px rgba(255, 255, 255, 0.07),
0 12px 24px -20px var(--lo-sidenav-liquid-glow);
transform: translateY(-1px);
}
.sidenav-folder-group.active>.sidenav-link.sidenav-folder-toggle,
.sidenav-folder-group>.sidenav-link.sidenav-folder-toggle[aria-expanded="true"] {
background: var(--lo-sidenav-liquid-active-bg) !important;
color: var(--lo-sidenav-active-text) !important;
border-color: var(--lo-sidenav-liquid-border) !important;
box-shadow:
inset 0 1px 0 rgba(255, 255, 255, 0.43),
inset 0 -8px 18px rgba(255, 255, 255, 0.08),
0 14px 26px -20px var(--lo-sidenav-liquid-glow);
}
.sidenav-folder-group>.sidenav-link.sidenav-folder-toggle:hover::before,
.sidenav-folder-group>.sidenav-link.sidenav-folder-toggle:focus-visible::before {
opacity: 0.7;
transform: translateX(0) scale(1);
}
.sidenav-folder-group>.sidenav-link.sidenav-folder-toggle:hover::after,
.sidenav-folder-group>.sidenav-link.sidenav-folder-toggle:focus-visible::after {
opacity: 0.58;
transform: translateX(11%) scale(1);
}
.sidenav-folder-group.active>.sidenav-link.sidenav-folder-toggle::before,
.sidenav-folder-group.active>.sidenav-link.sidenav-folder-toggle::after,
.sidenav-folder-group>.sidenav-link.sidenav-folder-toggle[aria-expanded="true"]::before,
.sidenav-folder-group>.sidenav-link.sidenav-folder-toggle[aria-expanded="true"]::after {
opacity: 0.68;
transform: translateX(0) scale(1);
}
.sidenav-folder-admin {
--lo-folder-text: var(--lo-sidenav-admin-text);
--lo-folder-bg: var(--lo-sidenav-admin-bg);
--lo-folder-hover-bg: var(--lo-sidenav-admin-hover-bg);
--lo-folder-active-bg: var(--lo-sidenav-admin-active-bg);
}
.sidenav-folder-todo {
--lo-folder-text: var(--lo-sidenav-todo-text);
--lo-folder-bg: var(--lo-sidenav-todo-bg);
--lo-folder-hover-bg: var(--lo-sidenav-todo-hover-bg);
--lo-folder-active-bg: var(--lo-sidenav-todo-active-bg);
}
.sidenav-folder-report {
--lo-folder-text: var(--lo-sidenav-report-text);
--lo-folder-bg: var(--lo-sidenav-report-bg);
--lo-folder-hover-bg: var(--lo-sidenav-report-hover-bg);
--lo-folder-active-bg: var(--lo-sidenav-report-active-bg);
}
.sidenav-folder-subtoggle {
color: var(--lo-sidenav-text) !important;
margin: 0.22rem 0.35rem 0.22rem 0.2rem !important;
padding: 0.46rem 0.7rem !important;
border-radius: 0.72rem;
border: 1px solid transparent !important;
background: linear-gradient(180deg, rgba(255, 255, 255, 0.03) 0%, rgba(255, 255, 255, 0.01) 54%, rgba(255, 255, 255, 0) 100%) !important;
font-size: 0.82rem !important;
font-weight: 700 !important;
}
.sidenav-folder-subtoggle:hover {
color: var(--lo-sidenav-text-hover) !important;
background: var(--lo-sidenav-liquid-hover-bg) !important;
border-color: var(--lo-sidenav-liquid-border) !important;
box-shadow:
inset 0 1px 0 rgba(255, 255, 255, 0.39),
inset 0 -8px 16px rgba(255, 255, 255, 0.07);
}
/* Admin folder sub links: align visual weight with outer function links */
.sidenav-folder-admin .sidenav-collapse>.sidenav-item>.sidenav-link {
margin-left: 0 !important;
font-size: 0.9rem !important;
font-weight: 600 !important;
padding: 0.66rem 0.96rem !important;
}
/* Non-folder links: revert to classic card style */
.sidenav-item:not(.sidenav-folder-group)>.sidenav-link {
color: var(--lo-sidenav-link-text) !important;
background: transparent !important;
border: 1px solid transparent !important;
border-left: 4px solid transparent !important;
border-radius: 0.9rem;
margin: 0.14rem 0.56rem;
padding: 0.66rem 0.96rem !important;
transform: none !important;
box-shadow: none !important;
overflow: visible;
}
.sidenav-item:not(.sidenav-folder-group)>.sidenav-link::before,
.sidenav-item:not(.sidenav-folder-group)>.sidenav-link::after {
display: none;
}
.sidenav-item:not(.sidenav-folder-group)>.sidenav-link:hover {
color: var(--lo-sidenav-link-hover-text) !important;
background: var(--lo-sidenav-link-hover-bg) !important;
border-color: var(--lo-sidenav-link-hover-border) !important;
border-left-color: var(--lo-sidenav-link-hover-accent) !important;
transform: none !important;
}
.sidenav-item:not(.sidenav-folder-group).active>.sidenav-link,
.sidenav-item:not(.sidenav-folder-group).active>.sidenav-link:hover {
background: var(--lo-sidenav-link-active-bg) !important;
color: var(--lo-sidenav-link-active-text) !important;
border-color: var(--lo-sidenav-link-active-border) !important;
border-left-color: var(--lo-sidenav-link-active-accent) !important;
box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.62) !important;
}
html.dark-mode .sidenav-item:not(.sidenav-folder-group)>.sidenav-link:hover {
color: var(--lo-sidenav-link-hover-text) !important;
background: var(--lo-sidenav-link-hover-bg) !important;
border-color: var(--lo-sidenav-link-hover-border) !important;
border-left-color: var(--lo-sidenav-link-hover-accent) !important;
}
html.dark-mode .sidenav-item:not(.sidenav-folder-group).active>.sidenav-link,
html.dark-mode .sidenav-item:not(.sidenav-folder-group).active>.sidenav-link:hover {
background: var(--lo-sidenav-link-active-bg) !important;
color: var(--lo-sidenav-link-active-text) !important;
border-color: var(--lo-sidenav-link-active-border) !important;
border-left-color: var(--lo-sidenav-link-active-accent) !important;
}
/* Sidebar Branding - Consolidated */
.app-brand {
background: var(--lo-sidenav-bg) !important;
height: 64px !important;
display: flex !important;
align-items: center !important;
padding: 0 1rem !important;
border-bottom: 1px solid var(--lo-sidenav-divider) !important;
}
.app-brand.demo .app-brand-text img.app-brand-logo-round {
width: 42px !important;
height: 42px !important;
border-radius: 50% !important;
object-fit: cover !important;
border: 2px solid var(--lo-primary-light) !important;
box-shadow: var(--lo-shadow-sm) !important;
filter: none !important;
/* New logo is colorful */
}
.app-brand .layout-sidenav-toggle i {
color: var(--lo-sidenav-text) !important;
}
.app-brand .layout-sidenav-toggle:hover i {
color: var(--lo-sidenav-text-hover) !important;
}
/* Sidebar mobile icon buttons */
.lo-sidenav-icon-btn {
width: 32px !important;
height: 32px !important;
display: inline-flex !important;
align-items: center !important;
justify-content: center !important;
border: none !important;
border-radius: 8px !important;
background: transparent !important;
color: var(--lo-sidenav-text, #94a3b8) !important;
font-size: 1rem !important;
padding: 0 !important;
cursor: pointer !important;
box-shadow: none !important;
outline: none !important;
}
.lo-sidenav-icon-btn:hover {
background: rgba(255,255,255,0.08) !important;
color: var(--lo-sidenav-text-hover, #e2e8f0) !important;
}
.lo-sidenav-icon-btn.is-disabled,
.lo-sidenav-icon-btn:disabled {
opacity: 0.45 !important;
cursor: not-allowed !important;
pointer-events: none !important;
}
html.dark-mode .lo-sidenav-icon-btn {
color: rgba(241, 245, 249, 0.8) !important;
}
html.dark-mode .lo-sidenav-icon-btn:hover {
background: rgba(241, 245, 249, 0.08) !important;
}
/* Sidebar actions area z-index — above sidebar content */
.lo-sidenav-actions {
position: relative;
z-index: 10;
}
@media (min-width: 992px) {
.layout-sidenav {
overflow: visible !important;
z-index: 1040 !important;
}
.layout-sidenav .app-brand.demo {
position: relative;
overflow: visible !important;
z-index: 1045 !important;
}
.lo-sidenav-actions {
z-index: 1050 !important;
}
.lo-sidenav-actions .lo-theme-panel,
.lo-sidenav-actions .dropdown-menu {
pointer-events: auto !important;
}
.lo-sidenav-actions .dropdown-menu {
z-index: 99999 !important;
position: absolute !important;
top: calc(100% + 8px) !important;
left: auto !important;
right: 0 !important;
transform: none !important;
}
.lo-sidenav-actions .lo-scheme-picker {
position: relative;
}
.lo-sidenav-actions .lo-theme-panel {
position: absolute !important;
top: calc(100% + 10px) !important;
left: 0 !important;
right: auto !important;
width: 260px !important;
max-width: min(260px, calc(100vw - 16px)) !important;
transform: none !important;
z-index: 99999 !important;
border-radius: 16px !important;
}
}
@media (max-width: 991.98px) {
.lo-sidenav-actions {
z-index: 10 !important;
}
.lo-sidenav-actions .dropdown-menu {
z-index: 99999 !important;
position: fixed !important;
top: 52px !important;
left: auto !important;
right: 48px !important;
transform: none !important;
}
.lo-sidenav-actions .lo-scheme-picker {
position: relative;
}
.lo-sidenav-actions .lo-theme-panel {
position: fixed !important;
top: 64px !important;
left: 0 !important;
right: auto !important;
width: 260px !important;
z-index: 99999 !important;
border-radius: 0 0 12px 0 !important;
}
}
/* Dark mode body - FORCE with !important */
html.dark-mode,
html.dark-mode body {
background-color: #0f172a !important;
color: #e2e8f0 !important;
}
/* Dark mode layout wrapper */
html.dark-mode .layout-wrapper,
html.dark-mode .layout-inner,
html.dark-mode .layout-content {
background-color: #0f172a !important;
}
/* Dark mode container */
html.dark-mode .container-fluid,
html.dark-mode .container-p-y {
background-color: transparent !important;
}
/* Dark mode cards - FORCE */
html.dark-mode .card {
background-color: #1e293b !important;
border-color: #334155 !important;
color: #e2e8f0 !important;
}
html.dark-mode .card-body {
background-color: #1e293b !important;
}
html.dark-mode .card-header,
html.dark-mode .card-footer {
background-color: #15202e !important;
border-color: #334155 !important;
color: #e2e8f0 !important;
}
/* Dark mode navbar - FORCE */
html.dark-mode .layout-navbar,
html.dark-mode .navbar,
html.dark-mode #layout-navbar {
background-color: #1e293b !important;
border-color: #334155 !important;
}
html.dark-mode .navbar-nav .nav-link,
html.dark-mode .layout-navbar .nav-link {
color: #e2e8f0 !important;
}
/* Sidenav theme logic handled by variables above */
/* Dark mode forms - FORCE */
html.dark-mode .form-control {
background-color: #1e293b !important;
border-color: #475569 !important;
color: #e2e8f0 !important;
}
html.dark-mode .form-control:focus {
background-color: #1e293b !important;
border-color: #6366f1 !important;
color: #e2e8f0 !important;
box-shadow: 0 0 0 3px rgba(99, 102, 241, 0.25) !important;
}
html.dark-mode .input-group-text {
background-color: #334155 !important;
border-color: #475569 !important;
color: #e2e8f0 !important;
}
html.dark-mode label,
html.dark-mode .form-label,
html.dark-mode .control-label {
color: #cbd5e1 !important;
}
/* Dark mode tables - FORCE */
html.dark-mode .table {
color: #e2e8f0 !important;
}
html.dark-mode .table th,
html.dark-mode .table td {
border-color: #334155 !important;
background-color: transparent !important;
}
html.dark-mode .table thead th {
background-color: #1e293b !important;
color: #cbd5e1 !important;
font-weight: 700;
font-size: 0.875rem;
}
html.dark-mode .table-striped tbody tr:nth-of-type(odd) {
background-color: rgba(255, 255, 255, 0.02) !important;
}
html.dark-mode .table-hover tbody tr:hover {
background-color: rgba(99, 102, 241, 0.1) !important;
color: #e2e8f0 !important;
}
html.dark-mode .table-hover tbody tr:hover td,
html.dark-mode .table-hover tbody tr:hover td a,
html.dark-mode .table-hover tbody tr:hover td span {
color: inherit !important;
}
/* Dark mode dropdowns */
html.dark-mode .dropdown-menu {
background-color: #1e293b !important;
border-color: #334155 !important;
}
html.dark-mode .dropdown-item {
color: #e2e8f0 !important;
}
html.dark-mode .dropdown-item:hover {
background-color: rgba(99, 102, 241, 0.1) !important;
color: #e2e8f0 !important;
}
/* Dark mode buttons */
html.dark-mode .btn-secondary,
html.dark-mode .btn-default {
background: linear-gradient(180deg, #475569, #334155) !important;
border-color: #475569 !important;
color: #e2e8f0 !important;
}
html.dark-mode .btn-secondary:hover,
html.dark-mode .btn-default:hover {
background: linear-gradient(180deg, #334155, #1e293b) !important;
border-color: #334155 !important;
}
/* Dark mode modals */
html.dark-mode .modal-content {
background-color: #1e293b !important;
border-color: #334155 !important;
color: #e2e8f0 !important;
}
html.dark-mode .modal-header,
html.dark-mode .modal-footer {
border-color: #334155 !important;
}
/* Dark mode text utilities */
html.dark-mode h1,
html.dark-mode h2,
html.dark-mode h3,
html.dark-mode h4,
html.dark-mode h5,
html.dark-mode h6 {
color: #f8fafc !important;
}
html.dark-mode .text-muted {
color: #94a3b8 !important;
}
html.dark-mode a:not(.btn) {
color: #a5b4fc !important;
}
/* Remove hover color change in dark mode - keep text readable */
html.dark-mode a:not(.btn):hover {
color: #a5b4fc !important;
}
/* Dark mode borders - make .border visible */
html.dark-mode .border {
border-color: #475569 !important;
}
html.dark-mode .border-dark {
border-color: #64748b !important;
}
html.dark-mode .rounded,
html.dark-mode .rounded-lg,
html.dark-mode .rounded-sm {
border-color: #475569 !important;
}
/* Elements with flex-column.border.rounded */
html.dark-mode .flex-column.border,
html.dark-mode .d-flex.flex-column.border {
border-color: #475569 !important;
}
/* ========================================================================
1.1.4.1 Light Mode Input Text Background
======================================================================== */
/* Light mode form control background - light blue instead of transparent */
.form-control {
background-color: #f0f9ff !important;
}
.form-control:focus {
background-color: #ffffff !important;
}
/* Light mode dropdown background - match input-text color */
.dropdown-menu {
background-color: #f0f9ff !important;
}
.dropdown-item:hover,
.dropdown-item:focus {
background-color: #e0f2fe !important;
}
/* Select2 light mode background */
.select2-dropdown {
background-color: #f0f9ff !important;
}
.select2-container--default .select2-results__option {
background-color: #f0f9ff !important;
}
.select2-container--default .select2-results__option:hover {
background-color: #e0f2fe !important;
}
/* ========================================================================
1.1.5 Dark Mode Lightweight Static Visual Effects
======================================================================== */
/* Subtle gradient background with corner glow */
html.dark-mode .layout-content {
background:
radial-gradient(ellipse at top right, rgba(99, 102, 241, 0.08) 0%, transparent 50%),
radial-gradient(ellipse at bottom left, rgba(139, 92, 246, 0.06) 0%, transparent 50%),
#0f172a !important;
}
/* Subtle glow effect on cards */
html.dark-mode .card {
box-shadow:
0 4px 6px -1px rgba(0, 0, 0, 0.3),
0 0 40px -10px rgba(99, 102, 241, 0.15) !important;
transition: box-shadow 0.3s ease;
}
html.dark-mode .card:hover {
box-shadow:
0 10px 15px -3px rgba(0, 0, 0, 0.3),
0 0 50px -5px rgba(99, 102, 241, 0.2) !important;
}
/* Enhanced primary button with subtle glow */
html.dark-mode .btn-primary {
box-shadow: 0 0 20px -5px rgba(99, 102, 241, 0.4);
transition: all 0.3s ease;
}
html.dark-mode .btn-primary:hover {
box-shadow: 0 0 30px -3px rgba(99, 102, 241, 0.6);
transform: translateY(-1px);
}
/* Subtle border glow on focused inputs */
html.dark-mode .form-control:focus {
box-shadow:
0 0 0 3px rgba(99, 102, 241, 0.15),
0 0 20px -5px rgba(99, 102, 241, 0.3) !important;
}
/* Navbar subtle bottom glow line — Liquid Glass */
html.dark-mode .layout-navbar {
border-bottom: 1px solid rgba(99, 102, 241, 0.25) !important;
box-shadow:
0 4px 20px -5px rgba(99, 102, 241, 0.15),
inset 0 1px 0 rgba(255, 255, 255, 0.08),
inset 0 -1px 0 rgba(255, 255, 255, 0.04);
}
/* Sidenav subtle right glow line */
html.dark-mode .layout-sidenav {
box-shadow: 4px 0 20px -5px rgba(99, 102, 241, 0.1);
}
/* Subtle text highlight for headings */
html.dark-mode .card-header h1,
html.dark-mode .card-header h2,
html.dark-mode .card-header h3,
html.dark-mode .card-header h4,
html.dark-mode .card-header h5,
html.dark-mode .card-header h6 {
text-shadow: 0 0 30px rgba(99, 102, 241, 0.2);
}
/* ========================================================================
1.1.6 Grid9 (Store Actions Page)
======================================================================== */
.grid9 {
display: flex !important;
flex-direction: column !important;
align-items: center !important;
justify-content: flex-start !important;
width: auto !important;
min-width: 100px !important;
max-width: 140px !important;
height: auto !important;
margin: 6px !important;
padding: 12px 8px 10px !important;
border-radius: 12px !important;
background: transparent !important;
border: none !important;
box-shadow: none !important;
transition: all 0.2s ease !important;
text-decoration: none !important;
font-family: inherit !important;
font-weight: 600 !important;
position: relative;
overflow: visible !important;
gap: 8px !important;
}
/* Colored rounded-square icon container */
.grid9 i {
display: flex !important;
align-items: center;
justify-content: center;
width: 56px !important;
height: 56px !important;
border-radius: 16px !important;
font-size: 1.4rem !important;
color: #ffffff !important;
background: var(--lo-primary-gradient, linear-gradient(135deg, #2563eb, #3b82f6)) !important;
box-shadow: 0 4px 12px rgba(var(--lo-primary-rgb, 37, 99, 235), 0.25);
text-align: center;
flex-shrink: 0;
}
/* Content wrapper within grid9 */
.grid9 span.title-group {
display: flex;
flex-direction: column;
align-items: center;
text-align: center;
}
.grid9 .title {
font-size: 1.05rem !important;
font-weight: 700 !important;
line-height: 1.25 !important;
color: var(--lo-slate-700, #334155) !important;
margin: 0 !important;
width: 100% !important;
text-align: center !important;
word-break: keep-all !important;
}
button.grid9 {
cursor: pointer;
outline: none;
border: none !important;
}
.grid9:hover {
transform: translateY(-2px) !important;
background: rgba(var(--lo-primary-rgb, 37, 99, 235), 0.04) !important;
box-shadow: none !important;
text-decoration: none !important;
}
.grid9:hover i {
box-shadow: 0 6px 16px rgba(var(--lo-primary-rgb, 37, 99, 235), 0.35);
}
.grid9 .title-group span.grid9-info,
.grid9 .title_info {
font-size: 0.75rem !important;
color: var(--lo-slate-500) !important;
font-weight: 400 !important;
line-height: 1.2 !important;
margin-top: 4px !important;
width: 100% !important;
display: block !important;
white-space: normal !important;
word-break: normal !important;
word-wrap: break-word !important;
}
/* Premium Emerald Green style for POS quota badge */
.grid9 .title-group .badge-success.grid9-info {
background-color: #ecfdf5 !important;
color: #065f46 !important;
border: 1px solid #d1fae5 !important;
font-weight: 700 !important;
display: inline-block !important;
margin: 4px auto 0 !important;
white-space: normal !important;
text-align: center !important;
line-height: 1.2 !important;
font-size: 0.75rem !important;
padding: 0.25rem 0.5rem !important;
width: fit-content !important;
max-width: 100% !important;
border-radius: 6px !important;
}
/* Base style for standard badge (e.g. badge-danger remains as is but with refined padding) */
.grid9 .title-group .badge-danger.grid9-info {
display: inline-block !important;
margin: 4px auto 0 !important;
white-space: normal !important;
text-align: center !important;
line-height: 1.2 !important;
font-size: 0.7rem !important;
padding: 0.2rem 0.4rem !important;
width: fit-content !important;
max-width: 100% !important;
}
/* Beautified Angle/Chevron Styles */
.btn-toggle-angle {
background: transparent !important;
border: none !important;
padding: 2px !important;
color: var(--lo-slate-500) !important;
transition: all 0.3s ease !important;
cursor: pointer !important;
display: inline-flex !important;
align-items: center !important;
justify-content: center !important;
}
.btn-toggle-angle:hover {
color: var(--lo-primary) !important;
}
.btn-toggle-angle i,
.btn-toggle-angle span.fas {
transition: transform 0.3s ease !important;
}
.btn-toggle-angle[aria-expanded="true"] i,
.btn-toggle-angle[aria-expanded="true"] span.fas {
transform: rotate(180deg) !important;
}
/* Larger hit area for menu collapse arrows to reduce accidental checkbox clicks */
.menu-collapse-all-trigger {
width: 36px;
height: 36px;
margin-right: 6px;
border: 1px solid var(--lo-slate-200);
border-radius: 999px;
display: inline-flex;
align-items: center;
justify-content: center;
background: #fff;
color: var(--lo-slate-700);
font-size: 1.15rem;
cursor: pointer;
transition: color 0.18s ease, background-color 0.18s ease, border-color 0.18s ease;
}
.menu-collapse-all-trigger:hover {
color: var(--lo-primary-dark);
background: rgba(var(--lo-primary-rgb), 0.1);
border-color: rgba(var(--lo-primary-rgb), 0.35);
}
.menu-collapse-trigger {
min-width: 56px;
user-select: none;
}
.menu-collapse-trigger .fa-angle-down,
.menu-collapse-trigger .fa-angle-up {
width: 28px;
height: 28px;
border-radius: 999px;
display: inline-flex;
align-items: center;
justify-content: center;
font-size: 1.05rem;
color: var(--lo-slate-700);
background: rgba(var(--lo-primary-rgb), 0.1);
transition: color 0.18s ease, background-color 0.18s ease;
}
.menu-collapse-trigger:hover .fa-angle-down,
.menu-collapse-trigger:hover .fa-angle-up {
color: var(--lo-primary-dark);
background: rgba(var(--lo-primary-rgb), 0.2);
}
/* Also apply to dropdown-toggle within grid9 */
.grid9.dropdown-toggle::after {
display: none !important;
/* Hide default bootstrap arrow */
}
/* Hidden when empty */
.grid9 .title-group .badge:empty,
.grid9 .title-group span.grid9-info:empty,
.grid9 .title_info:empty {
display: none !important;
}
/* (grid9 i styles defined in section 1.1.6 above) */
/* Mobile Optimization - 3 Columns Grid */
@media (max-width: 767px) {
.card-body .d-flex.flex-wrap {
justify-content: flex-start !important;
gap: 0 !important;
padding: 0 !important;
}
.grid9 {
width: calc(25% - 12px) !important;
min-width: 0 !important;
max-width: none !important;
height: auto !important;
margin: 6px !important;
padding: 10px 4px 8px !important;
}
.grid9 i {
width: 52px !important;
height: 52px !important;
border-radius: 14px !important;
font-size: 1.3rem !important;
}
.grid9 .title {
font-size: 0.95rem !important;
word-break: keep-all !important;
}
.dropdown {
position: relative !important;
z-index: 2 !important;
width: calc(25% - 12px) !important;
margin: 6px !important;
display: flex !important;
flex-direction: column !important;
}
.dropdown .grid9 {
width: 100% !important;
min-width: 0 !important;
margin: 0 !important;
}
.dropdown-menu {
z-index: 1060 !important;
}
.grid9-info {
display: block !important;
font-size: 0.65rem !important;
font-weight: 400 !important;
line-height: 1.15 !important;
margin-top: 2px !important;
color: var(--lo-slate-500) !important;
}
}
/* Global Visibility & Stacking Fixes */
.store-action-card {
overflow: visible !important;
position: relative !important;
}
.store-action-card .card-body {
overflow: visible !important;
}
/* Dark Mode Grid9 Overrides */
html.dark-mode .grid9 {
background: transparent !important;
border: none !important;
box-shadow: none !important;
}
html.dark-mode .grid9:hover {
background: rgba(255, 255, 255, 0.04) !important;
box-shadow: none !important;
}
html.dark-mode .grid9 .title {
color: rgba(241, 245, 249, 0.88) !important;
}
html.dark-mode .grid9 i {
color: #ffffff !important;
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3);
}
html.dark-mode .grid9 .title_info,
html.dark-mode .grid9 .text-dark {
color: #94a3b8 !important;
}
html.dark-mode .grid9 .badge {
background-color: rgba(99, 102, 241, 0.2) !important;
color: #a5b4fc !important;
}
/* ── View Mode Toggle (card/list) ── */
.lo-view-toggle {
display: inline-flex;
align-items: center;
gap: 4px;
background: none;
border: 1px solid rgba(var(--lo-primary-rgb, 37,99,235), 0.25);
border-radius: 6px;
padding: 3px 10px;
font-size: 0.75rem;
color: var(--lo-primary, #2563eb);
cursor: pointer;
white-space: nowrap;
transition: background 0.15s ease;
flex-shrink: 0;
}
.lo-view-toggle:hover {
background: rgba(var(--lo-primary-rgb, 37,99,235), 0.08);
}
.lo-view-toggle i {
font-size: 0.7rem;
}
.lo-view-label {
font-weight: 600;
}
/* ── List mode ── */
.store-action-card .card-body.lo-list-mode .d-flex.flex-wrap {
flex-direction: column !important;
gap: 0 !important;
}
.store-action-card .card-body.lo-list-mode .grid9,
.store-action-card .card-body.lo-list-mode .dropdown {
width: 100% !important;
max-width: none !important;
min-width: 0 !important;
flex-direction: row !important;
align-items: center !important;
justify-content: flex-start !important;
padding: 8px 12px !important;
margin: 0 !important;
gap: 12px !important;
border-bottom: 1px solid rgba(0,0,0,0.05);
border-radius: 0 !important;
}
.store-action-card .card-body.lo-list-mode .grid9:last-child,
.store-action-card .card-body.lo-list-mode .dropdown:last-child {
border-bottom: none;
}
.store-action-card .card-body.lo-list-mode .grid9:hover {
background: rgba(var(--lo-primary-rgb, 37,99,235), 0.04) !important;
transform: none !important;
}
.store-action-card .card-body.lo-list-mode .grid9 i {
width: 36px !important;
height: 36px !important;
border-radius: 10px !important;
font-size: 1rem !important;
flex-shrink: 0;
}
.store-action-card .card-body.lo-list-mode .grid9 span.title-group,
.store-action-card .card-body.lo-list-mode .grid9 .title-group {
flex-direction: row !important;
align-items: center !important;
text-align: left !important;
gap: 6px;
}
.store-action-card .card-body.lo-list-mode .grid9 .title {
font-size: 0.9rem !important;
text-align: left !important;
width: auto !important;
}
.store-action-card .card-body.lo-list-mode .grid9 .title_info,
.store-action-card .card-body.lo-list-mode .grid9 .grid9-info {
font-size: 0.75rem !important;
margin-top: 0 !important;
color: var(--lo-slate-500, #64748b) !important;
}
/* List mode dropdown child grid9 */
.store-action-card .card-body.lo-list-mode .dropdown .grid9 {
padding: 0 !important;
border-bottom: none !important;
}
/* Dark mode list borders */
html.dark-mode .store-action-card .card-body.lo-list-mode .grid9,
html.dark-mode .store-action-card .card-body.lo-list-mode .dropdown {
border-bottom-color: rgba(255,255,255,0.06);
}
html.dark-mode .lo-view-toggle {
color: var(--lo-primary-light, #60a5fa);
border-color: rgba(var(--lo-primary-rgb, 37,99,235), 0.3);
}
/* ========================================================================
1.1.7 Store Action Card Enhancements — Card Section Style
========================================================================*/
/* Ensure the store actions area is transparent so body grey bg shows between cards */
.store-actions-page,
.store-actions-page .card:not(.store-action-card) {
background: transparent !important;
border: none !important;
box-shadow: none !important;
}
/* Make the content container transparent on the store actions page */
.layout-content:has(.store-actions-page) > .container-fluid {
background: transparent !important;
}
.store-action-card {
border: 1px solid var(--lo-slate-200, #e2e8f0) !important;
box-shadow: var(--lo-shadow-sm) !important;
border-radius: 16px !important;
margin-bottom: 12px !important;
overflow: visible;
width: 100% !important;
background: var(--lo-card-bg, #ffffff) !important;
}
/* Section header — transparent bg, text color follows palette, left-aligned */
.store-action-card .card-header {
background: transparent !important;
padding: 0.75rem 1rem 0.25rem !important;
border: none !important;
border-bottom: none !important;
cursor: pointer;
user-select: none;
box-shadow: none !important;
}
.store-action-card .card-header:hover {
background: transparent !important;
filter: none;
}
.store-action-card .card-header:active {
box-shadow: none !important;
transform: none;
}
.store-action-card .card-header h3 {
font-size: 1.15rem !important;
font-weight: 800 !important;
letter-spacing: 0.03em;
color: var(--lo-primary, #2563eb) !important;
margin-bottom: 0 !important;
text-shadow: none !important;
animation: none !important;
}
.store-action-card .card-header small {
color: var(--lo-primary-light, #60a5fa) !important;
}
.store-action-card .card-body {
padding: 0.5rem 0.75rem 0.75rem !important;
background-color: transparent !important;
}
@media (max-width: 767px) {
.container-p-y {
padding-left: 0.5rem !important;
padding-right: 0.5rem !important;
padding-top: 0 !important;
}
.store-action-card {
border-radius: 14px !important;
margin-bottom: 10px !important;
}
.store-action-card .card-body {
padding: 0.25rem 0.5rem 0.5rem !important;
}
}
/* ========================================================================
1.1.7 Dark Mode Footer — Liquid Glass
======================================================================== */
html.dark-mode .layout-footer,
html.dark-mode .footer,
html.dark-mode .bg-footer-theme {
background: linear-gradient(180deg, rgba(30, 41, 59, 0.82) 0%, rgba(15, 23, 42, 0.95) 100%) !important;
-webkit-backdrop-filter: blur(16px) saturate(1.4);
backdrop-filter: blur(16px) saturate(1.4);
border-top: 1px solid rgba(148, 163, 184, 0.18) !important;
color: #e2e8f0 !important;
position: relative;
overflow: hidden;
}
/* Top-edge refraction highlight */
html.dark-mode .layout-footer::before,
html.dark-mode .bg-footer-theme::before {
content: "";
position: absolute;
top: 0;
left: 0;
right: 0;
height: 1px;
background: linear-gradient(90deg,
transparent 0%,
rgba(255, 255, 255, 0.12) 20%,
rgba(255, 255, 255, 0.25) 50%,
rgba(255, 255, 255, 0.12) 80%,
transparent 100%);
pointer-events: none;
z-index: 1;
}
/* Ambient glow above footer */
html.dark-mode .layout-footer::after,
html.dark-mode .bg-footer-theme::after {
content: "";
position: absolute;
top: -8px;
left: 10%;
right: 10%;
height: 8px;
background: radial-gradient(ellipse at center, rgba(var(--lo-primary-rgb), 0.1) 0%, transparent 70%);
pointer-events: none;
}
html.dark-mode .layout-footer a,
html.dark-mode .footer a {
color: #a5b4fc !important;
}
html.dark-mode .layout-footer a:hover,
html.dark-mode .footer a:hover {
color: #c7d2fe !important;
text-shadow: 0 0 12px rgba(165, 180, 252, 0.3);
}
html.dark-mode .footer-text {
color: #94a3b8 !important;
}
/* Mobile footer bordered divs — dark mode glass */
html.dark-mode .bordered-div {
border-top-color: rgba(148, 163, 184, 0.15) !important;
border-right-color: rgba(148, 163, 184, 0.1) !important;
}
/* ========================================================================
1.1.8 Light Mode Footer — Liquid Glass
======================================================================== */
html:not(.dark-mode) .layout-footer,
html:not(.dark-mode) .footer,
html:not(.dark-mode) .bg-footer-theme {
background: linear-gradient(180deg,
rgba(248, 250, 252, 0.78) 0%,
rgba(241, 245, 249, 0.92) 100%) !important;
-webkit-backdrop-filter: blur(16px) saturate(1.5);
backdrop-filter: blur(16px) saturate(1.5);
border-top: 1px solid rgba(var(--lo-primary-rgb), 0.12) !important;
position: relative;
overflow: hidden;
box-shadow:
inset 0 1px 0 rgba(255, 255, 255, 0.7),
0 -4px 20px -8px rgba(0, 0, 0, 0.06);
}
/* Top-edge refraction highlight — light mode */
html:not(.dark-mode) .layout-footer::before,
html:not(.dark-mode) .bg-footer-theme::before {
content: "";
position: absolute;
top: 0;
left: 0;
right: 0;
height: 1px;
background: linear-gradient(90deg,
transparent 0%,
rgba(var(--lo-primary-rgb), 0.08) 20%,
rgba(var(--lo-primary-rgb), 0.18) 50%,
rgba(var(--lo-primary-rgb), 0.08) 80%,
transparent 100%);
pointer-events: none;
z-index: 1;
}
/* Footer link hover glow — light mode */
html:not(.dark-mode) .layout-footer a:hover,
html:not(.dark-mode) .footer a:hover {
text-shadow: 0 0 8px rgba(var(--lo-primary-rgb), 0.2);
}
/* Mobile footer liquid glass */
@media (max-width: 1180px) {
html:not(.dark-mode) nav#mobile_footer {
background: linear-gradient(180deg,
rgba(248, 250, 252, 0.82) 0%,
rgba(241, 245, 249, 0.95) 100%) !important;
-webkit-backdrop-filter: blur(16px) saturate(1.5);
backdrop-filter: blur(16px) saturate(1.5);
box-shadow:
inset 0 1px 0 rgba(255, 255, 255, 0.6),
0 -4px 16px -6px rgba(0, 0, 0, 0.08);
}
html:not(.dark-mode) nav#mobile_footer .bordered-div {
border-top-color: rgba(var(--lo-primary-rgb), 0.1) !important;
border-right-color: rgba(var(--lo-primary-rgb), 0.06) !important;
}
html.dark-mode nav#mobile_footer {
background: linear-gradient(180deg,
rgba(30, 41, 59, 0.82) 0%,
rgba(15, 23, 42, 0.95) 100%) !important;
-webkit-backdrop-filter: blur(16px) saturate(1.4);
backdrop-filter: blur(16px) saturate(1.4);
border-top: 1px solid rgba(148, 163, 184, 0.15) !important;
box-shadow:
inset 0 1px 0 rgba(255, 255, 255, 0.06),
0 -4px 16px -6px rgba(0, 0, 0, 0.2);
}
}
/* Dropdown card in footer */
html.dark-mode .dropdown-card {
background-color: #4f46e5 !important;
color: #ffffff !important;
}
html.dark-mode .dropdown-card:hover {
background-color: #6366f1 !important;
}
/* ========================================================================
1.1.8 Store Action Cards
======================================================================== */
/* Dark mode enhancements for store action */
html.dark-mode .store-action-card {
border-color: #334155 !important;
background: rgba(30, 41, 59, 0.6) !important;
}
html.dark-mode .store-action-card .card-header {
background: transparent !important;
box-shadow: none !important;
}
html.dark-mode .store-action-card .card-header h3 {
color: var(--lo-primary-light, #60a5fa) !important;
}
html.dark-mode .store-action-card .card-header:hover,
html.dark-mode .store-action-card .card-header:active {
background: transparent !important;
box-shadow: none !important;
transform: none;
}
/* Shared header action buttons: flat surface, consistent 32px size. */
.entry-liquid-shell .entry-liquid-actions {
margin-left: auto;
display: inline-flex !important;
align-items: center !important;
justify-content: flex-end;
flex-wrap: nowrap;
gap: 0.75rem !important;
}
.report-fancy .report-page-head .btn-circle,
.entry-liquid-shell .entry-liquid-actions .btn-sm,
.entry-liquid-shell .entry-liquid-add,
.entry-liquid-shell .entry-liquid-avatar-btn {
width: 32px !important;
height: 32px !important;
min-width: 32px !important;
min-height: 32px !important;
padding: 0 !important;
border-radius: 50% !important;
display: inline-flex !important;
align-items: center !important;
justify-content: center !important;
box-shadow: none !important;
text-shadow: none !important;
backdrop-filter: none !important;
-webkit-backdrop-filter: none !important;
transform: none !important;
}
.report-fancy .report-page-head .btn-circle:hover,
.entry-liquid-shell .entry-liquid-actions .btn-sm:hover,
.entry-liquid-shell .entry-liquid-add:hover,
.entry-liquid-shell .entry-liquid-avatar-btn:hover {
box-shadow: none !important;
transform: none !important;
filter: brightness(0.98);
}
.report-fancy .report-page-head .btn-circle.btn-primary,
.entry-liquid-shell .entry-liquid-add,
.entry-liquid-shell .entry-liquid-avatar-btn {
background: rgba(var(--lo-primary-rgb, 37, 99, 235), 0.92) !important;
border: 1px solid rgba(var(--lo-primary-rgb, 37, 99, 235), 0.18) !important;
color: #ffffff !important;
}
.report-fancy .report-page-head .btn-circle.btn-warning,
.entry-liquid-shell .entry-liquid-actions .btn-warning {
color: #ffffff !important;
background: color-mix(in srgb, var(--lo-primary, #2563eb) 72%, #f3efe2 28%) !important;
border: 1px solid color-mix(in srgb, var(--lo-primary, #2563eb) 34%, #ffffff 66%) !important;
}
.entry-liquid-shell .entry-liquid-actions .btn-danger,
.entry-liquid-shell .entry-liquid-danger {
color: #ffffff !important;
background: #e56a67 !important;
border: 1px solid rgba(200, 78, 83, 0.28) !important;
}
html.dark-mode .report-fancy .report-page-head .btn-circle.btn-primary,
html.dark-mode .entry-liquid-shell .entry-liquid-add,
html.dark-mode .entry-liquid-shell .entry-liquid-avatar-btn {
background: rgba(59, 130, 246, 0.72) !important;
border-color: rgba(147, 197, 253, 0.22) !important;
}
html.dark-mode .report-fancy .report-page-head .btn-circle.btn-warning,
html.dark-mode .entry-liquid-shell .entry-liquid-actions .btn-warning {
background: color-mix(in srgb, var(--lo-primary-light, #3b82f6) 62%, #3a3221 38%) !important;
border-color: color-mix(in srgb, var(--lo-primary-light, #3b82f6) 36%, #d4c4a1 64%) !important;
}
html.dark-mode .entry-liquid-shell .entry-liquid-actions .btn-danger,
html.dark-mode .entry-liquid-shell .entry-liquid-danger {
background: #c75d61 !important;
border-color: rgba(231, 138, 144, 0.24) !important;
}
/* ========================================================================
1.2 Theme Toggle Button Styling (legacy - kept for backwards compat)
======================================================================== */
.lo-theme-toggle {
display: none !important;
}
.lo-theme-toggle-legacy {
width: 34px !important;
height: 34px !important;
min-width: 34px !important;
min-height: 34px !important;
border-radius: 50% !important;
background-color: rgba(255, 255, 255, 0.2) !important;
border: 1px solid rgba(255, 255, 255, 0.3) !important;
position: relative;
cursor: pointer !important;
transition: all 0.2s ease-in-out;
display: flex !important;
align-items: center !important;
justify-content: center !important;
padding: 0 !important;
margin-left: 0;
}
.lo-theme-toggle:hover {
background-color: rgba(255, 255, 255, 0.3) !important;
transform: scale(1.05);
}
.lo-theme-toggle:focus {
outline: none !important;
box-shadow: 0 0 0 3px rgba(79, 70, 229, 0.25) !important;
}
/* Icon states - Light mode shows sun */
.lo-theme-icon-light {
color: rgba(255, 255, 255, 0.9) !important;
font-size: 1rem !important;
display: block !important;
}
.lo-theme-icon-dark {
color: rgba(255, 255, 255, 0.9) !important;
font-size: 0.9rem !important;
display: none !important;
}
/* Dark mode toggle state - shows moon */
html.dark-mode .lo-theme-toggle {
background-color: rgba(15, 23, 42, 0.65) !important;
border-color: rgba(148, 163, 184, 0.25) !important;
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.25) !important;
}
html.dark-mode .lo-theme-toggle:hover {
background-color: rgba(15, 23, 42, 0.85) !important;
border-color: rgba(148, 163, 184, 0.35) !important;
}
html.dark-mode .lo-theme-icon-light {
display: none !important;
}
html.dark-mode .lo-theme-icon-dark {
display: block !important;
}
/* ========================================================================
2. Form Controls
======================================================================== */
/* Base form control enhancement */
.form-control,
.lo-form-control {
border-radius: var(--lo-border-radius-sm);
border-color: var(--lo-slate-300);
background-color: transparent;
padding: 0.625rem 0.875rem;
font-size: 0.9375rem;
line-height: 1.5;
transition: var(--lo-transition);
}
.form-control:hover,
.lo-form-control:hover {
border-color: var(--lo-slate-400);
}
.form-control:focus,
.lo-form-control:focus {
border-color: var(--lo-primary);
box-shadow: 0 0 0 3px rgba(79, 70, 229, 0.1);
outline: none;
}
.form-control::placeholder,
.lo-form-control::placeholder {
color: var(--lo-slate-400);
opacity: 0.7;
}
/* Form label enhancement */
.form-label,
.control-label {
font-weight: 500;
color: var(--lo-slate-700);
margin-bottom: 0.5rem;
font-size: 0.875rem;
}
/* Required field indicator */
.xrequired::after {
content: " *";
color: var(--lo-danger);
}
/* ========================================================================
3. Input Groups - LineOne Style
======================================================================== */
.input-group {
border-radius: var(--lo-border-radius);
}
.input-group .form-control {
border-radius: 0;
}
.input-group .form-control:first-child,
.input-group> :first-child:not(.dropdown-toggle):not(.dropdown-menu) {
border-top-left-radius: var(--lo-border-radius);
border-bottom-left-radius: var(--lo-border-radius);
}
.input-group .form-control:last-child,
.input-group> :last-child:not(.dropdown-toggle):not(.dropdown-menu) {
border-top-right-radius: var(--lo-border-radius);
border-bottom-right-radius: var(--lo-border-radius);
}
.input-group-text {
background-color: var(--lo-slate-100);
border-color: var(--lo-slate-300);
color: var(--lo-slate-600);
font-size: 0.9375rem;
padding: 0.625rem 0.875rem;
transition: var(--lo-transition);
}
.input-group-prepend .input-group-text {
border-top-left-radius: var(--lo-border-radius);
border-bottom-left-radius: var(--lo-border-radius);
border-right: 0;
}
.input-group-append .input-group-text {
border-top-right-radius: var(--lo-border-radius);
border-bottom-right-radius: var(--lo-border-radius);
border-left: 0;
}
/* Filled addon style */
.input-group-filled .input-group-text {
background-color: var(--lo-slate-200);
color: var(--lo-slate-800);
}
/* Merged addon style - no visible border between addon and input */
.input-group-merged .input-group-text {
background-color: transparent;
}
.input-group-merged .form-control:focus~.input-group-append .input-group-text,
.input-group-merged .input-group-prepend .input-group-text:has(~ .form-control:focus) {
border-color: var(--lo-primary);
}
/* ========================================================================
4. Form Controls - Checkbox & Radio Foundation
======================================================================== */
/* Custom control base */
.custom-control {
padding-left: 1.75rem;
min-height: 1.5rem;
}
.custom-control-label {
cursor: pointer;
font-weight: 400;
color: var(--lo-slate-700);
line-height: 1.5;
}
.custom-control-label::before {
border-color: var(--lo-slate-300);
border-radius: var(--lo-border-radius-sm);
background-color: transparent;
transition: var(--lo-transition);
width: var(--lo-control-size);
height: var(--lo-control-size);
top: 0.1875rem;
left: -1.75rem;
}
.custom-control-label::after {
width: var(--lo-control-size);
height: var(--lo-control-size);
top: 0.1875rem;
left: -1.75rem;
}
/* Hover state */
.custom-control-input:not(:disabled):not(:checked)~.custom-control-label:hover::before {
border-color: var(--lo-slate-400);
}
/* Checked state */
.custom-control-input:checked~.custom-control-label::before {
background-color: var(--lo-primary);
border-color: var(--lo-primary);
}
/* Focus state */
.custom-control-input:focus~.custom-control-label::before {
box-shadow: 0 0 0 3px rgba(79, 70, 229, 0.15);
}
/* Radio specific - circular */
.custom-radio .custom-control-label::before {
border-radius: 50%;
}
.custom-radio .custom-control-input:checked~.custom-control-label::after {
background-image: none;
background-color: #fff;
border-radius: 50%;
transform: scale(0.4);
}
/* Checkbox specific */
.custom-checkbox .custom-control-input:checked~.custom-control-label::after {
background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' width='8' height='8' viewBox='0 0 8 8'%3e%3cpath fill='%23fff' d='M6.564.75l-3.59 3.612-1.538-1.55L0 4.26l2.974 2.99L8 2.193z'/%3e%3c/svg%3e");
}
/* Radio group container */
.lo-radio-group {
display: flex;
flex-wrap: wrap;
gap: 0.75rem;
}
.lo-radio-group .custom-control {
margin-right: 0;
}
/* Shared inline checkbox/radio layout for filter bars */
.lo-control-inline-group,
.lo-checkbox-inline-group {
display: flex;
flex-wrap: wrap;
align-items: center;
gap: var(--lo-control-inline-gap-y) var(--lo-control-inline-gap-x);
}
.lo-control-inline-group .custom-control.custom-control-inline,
.lo-checkbox-inline-group .custom-control.custom-control-inline {
margin-right: 0;
margin-bottom: 0;
}
/* Prevent overlap in inline checkbox/radio groups across report/form pages */
.custom-control.custom-checkbox.custom-control-inline,
.custom-control.custom-radio.custom-control-inline {
display: inline-flex;
align-items: center;
padding-left: 0;
margin-right: var(--lo-control-inline-gap-x);
margin-bottom: var(--lo-control-inline-gap-y);
vertical-align: top;
}
.custom-control.custom-checkbox.custom-control-inline .custom-control-label,
.custom-control.custom-radio.custom-control-inline .custom-control-label {
display: inline-block;
margin-bottom: 0;
min-height: var(--lo-control-size);
line-height: 1.35;
white-space: nowrap;
padding-left: var(--lo-control-inline-label-gap);
}
.custom-control.custom-radio.custom-control-inline .custom-control-label::before {
border-radius: 50%;
}
.custom-control.custom-checkbox.custom-control-inline .custom-control-label::before,
.custom-control.custom-checkbox.custom-control-inline .custom-control-label::after,
.custom-control.custom-radio.custom-control-inline .custom-control-label::before,
.custom-control.custom-radio.custom-control-inline .custom-control-label::after {
left: 0;
top: calc(50% - var(--lo-control-size-half));
}
.form-check.form-check-inline {
display: inline-flex;
align-items: center;
gap: 0.35rem;
margin-right: 1rem;
margin-bottom: 0.5rem;
}
/* ========================================================================
4.1 Native Radio & Checkbox — Theme-Aware
======================================================================== */
/* Style native and */
input[type="radio"],
input[type="checkbox"] {
accent-color: var(--lo-primary);
width: 0.875rem;
height: 0.875rem;
cursor: pointer;
vertical-align: middle;
margin-right: 0.25rem;
position: relative;
top: -1px;
}
/* Radio — custom circle appearance */
input[type="radio"] {
-webkit-appearance: none;
-moz-appearance: none;
appearance: none;
border-radius: 50%;
border: 2px solid var(--lo-slate-300);
background-color: transparent;
transition: border-color 0.15s ease, background-color 0.15s ease, box-shadow 0.15s ease;
outline: none;
}
input[type="radio"]:hover {
border-color: var(--lo-primary-light);
}
input[type="radio"]:checked {
border-color: var(--lo-primary);
background-color: var(--lo-primary);
box-shadow: inset 0 0 0 2.5px #fff;
}
input[type="radio"]:focus {
box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.15);
}
input[type="radio"]:checked:focus {
box-shadow: inset 0 0 0 3px #fff, 0 0 0 3px rgba(37, 99, 235, 0.15);
}
/* Checkbox — custom square appearance */
input[type="checkbox"]:not(.switcher-input):not(.custom-control-input) {
-webkit-appearance: none;
-moz-appearance: none;
appearance: none;
border-radius: var(--lo-border-radius-sm);
border: 2px solid var(--lo-slate-300);
background-color: transparent;
transition: border-color 0.15s ease, background-color 0.15s ease, box-shadow 0.15s ease;
outline: none;
position: relative;
}
input[type="checkbox"]:not(.switcher-input):not(.custom-control-input):hover {
border-color: var(--lo-primary-light);
}
input[type="checkbox"]:not(.switcher-input):not(.custom-control-input):checked {
border-color: var(--lo-primary);
background-color: var(--lo-primary);
background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' width='10' height='10' viewBox='0 0 8 8'%3e%3cpath fill='%23fff' d='M6.564.75l-3.59 3.612-1.538-1.55L0 4.26l2.974 2.99L8 2.193z'/%3e%3c/svg%3e");
background-size: 0.65rem;
background-position: center;
background-repeat: no-repeat;
}
input[type="checkbox"]:not(.switcher-input):not(.custom-control-input):focus {
box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.15);
}
/* Dark mode native radio/checkbox */
html.dark-mode input[type="radio"] {
border-color: #475569;
}
html.dark-mode input[type="radio"]:checked {
box-shadow: inset 0 0 0 2.5px #1e293b;
}
html.dark-mode input[type="radio"]:checked:focus {
box-shadow: inset 0 0 0 2.5px #1e293b, 0 0 0 3px rgba(96, 165, 250, 0.2);
}
html.dark-mode input[type="checkbox"]:not(.switcher-input):not(.custom-control-input) {
border-color: #475569;
}
/* Adjacent label styling */
input[type="radio"]+label,
input[type="checkbox"]+label {
cursor: pointer;
vertical-align: middle;
}
/* ========================================================================
5. Switch/Toggle - LineOne Style
======================================================================== */
.switcher {
position: relative;
display: inline-block;
}
.switcher-input:checked~.switcher-indicator {
background-color: var(--lo-primary);
}
.switcher-success .switcher-input:checked~.switcher-indicator {
background-color: var(--lo-success);
}
/* Dark mode switch/toggle styling */
html.dark-mode .switcher-indicator {
background-color: #475569 !important;
border: 2px solid #64748b !important;
}
html.dark-mode .switcher-input:checked~.switcher-indicator {
background-color: #4f46e5 !important;
border-color: #6366f1 !important;
}
html.dark-mode .switcher-success .switcher-input:checked~.switcher-indicator {
background-color: #22c55e !important;
border-color: #4ade80 !important;
}
/* Custom switch (Bootstrap style) */
html.dark-mode .custom-switch .custom-control-label::before {
background-color: #475569 !important;
border-color: #64748b !important;
}
html.dark-mode .custom-switch .custom-control-input:checked~.custom-control-label::before {
background-color: #4f46e5 !important;
border-color: #6366f1 !important;
}
html.dark-mode .custom-switch .custom-control-label::after {
background-color: #e2e8f0 !important;
}
/* Form check toggle (newer Bootstrap) */
html.dark-mode .form-check-input {
background-color: #475569 !important;
border-color: #64748b !important;
}
html.dark-mode .form-check-input:checked {
background-color: #4f46e5 !important;
border-color: #6366f1 !important;
}
html.dark-mode .form-switch .form-check-input {
background-color: #475569 !important;
border: 2px solid #64748b !important;
}
html.dark-mode .form-switch .form-check-input:checked {
background-color: #4f46e5 !important;
border-color: #6366f1 !important;
}
/* ========================================================================
6. Cards - Modern Design
======================================================================== */
.card {
border-radius: 0.75rem;
border: 1px solid var(--lo-slate-200);
box-shadow: 0 1px 3px rgba(0, 0, 0, 0.04), 0 1px 2px rgba(0, 0, 0, 0.02);
transition: box-shadow 0.2s ease, border-color 0.2s ease;
overflow: hidden;
}
.card:hover {
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.06), 0 1px 3px rgba(0, 0, 0, 0.04);
border-color: var(--lo-slate-300);
}
.card-header {
background-color: transparent;
border-bottom: 1px solid var(--lo-slate-150);
padding: 1rem 1.25rem;
font-weight: 600;
}
.card-body {
padding: 1.25rem;
}
.card-footer {
background-color: var(--lo-slate-50);
border-top: 1px solid var(--lo-slate-150);
padding: 0.875rem 1.25rem;
}
/* Card header with bg-primary — gradient style matching store-action-card */
.card-header.bg-primary {
background: var(--lo-primary-gradient) !important;
border-bottom: none !important;
box-shadow:
inset 0 1px 0 rgba(255, 255, 255, 0.25),
inset 0 -1px 0 rgba(0, 0, 0, 0.15),
0 1px 3px rgba(0, 0, 0, 0.12) !important;
}
.card-header.bg-primary .card-header-title,
.card-header.bg-primary .h4,
.card-header.bg-primary h4,
.card-header.bg-primary h5,
.card-header.bg-primary h6 {
color: #fff !important;
text-shadow: 0 1px 2px rgba(0, 0, 0, 0.2);
}
/* ========================================================================
6.2 Segmented Tab Bar — Premium Tab Switcher
======================================================================== */
#setting-btn-container {
background: var(--lo-slate-100);
border-radius: 0.75rem;
padding: 0.25rem;
gap: 0.25rem;
display: flex !important;
width: 100% !important;
justify-content: center;
}
.lo-tab-btn {
position: relative;
border: none;
background: transparent;
color: var(--lo-slate-500);
font-weight: 600;
font-size: 0.9375rem;
padding: 0.625rem 1rem;
border-radius: 0.625rem;
flex: 1 1 0;
text-align: center;
cursor: pointer;
transition: color 0.2s ease, background-color 0.2s ease, box-shadow 0.2s ease;
white-space: nowrap;
outline: none !important;
box-shadow: none;
}
.lo-tab-btn:focus,
.lo-tab-btn:active {
outline: none !important;
box-shadow: none !important;
}
.lo-tab-btn:hover {
color: var(--lo-slate-700);
background-color: var(--lo-slate-200);
}
.lo-tab-btn.active,
.lo-tab-btn.active:focus,
.lo-tab-btn.active:active {
background: var(--lo-primary-gradient);
color: #fff;
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.12) !important;
outline: none !important;
}
.lo-tab-btn.active:hover {
filter: brightness(1.05);
}
/* Dark mode tab bar */
html.dark-mode #setting-btn-container {
background: #1e293b;
}
html.dark-mode .lo-tab-btn {
color: #94a3b8;
}
html.dark-mode .lo-tab-btn:hover {
color: #e2e8f0;
background-color: #334155;
}
html.dark-mode .lo-tab-btn.active {
color: #fff;
}
/* ========================================================================
7. Buttons - Enhanced
======================================================================== */
.btn {
border-radius: 0.5rem;
font-weight: 500;
padding: 0.5rem 1rem;
font-size: 0.9375rem;
transition: transform 0.15s ease, box-shadow 0.15s ease, background-color 0.15s ease, border-color 0.15s ease;
white-space: nowrap;
}
.btn:hover {
transform: translateY(-1px);
}
.btn:active {
transform: translateY(0);
}
.btn:focus {
outline: none;
box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.2);
}
/* Primary button - subtle gradient */
.btn-primary {
background: linear-gradient(180deg, var(--lo-primary-light), var(--lo-primary));
border-color: var(--lo-primary);
box-shadow: 0 1px 2px rgba(0, 0, 0, 0.08);
}
.btn-primary:hover,
.btn-primary:focus {
background: linear-gradient(180deg, var(--lo-primary), var(--lo-primary-dark));
border-color: var(--lo-primary-dark);
box-shadow: 0 2px 6px rgba(0, 0, 0, 0.12);
}
/* Gradient primary button */
.btn-primary-gradient,
.lo-btn-primary {
background: var(--lo-primary-gradient);
border: none;
color: #fff;
box-shadow: 0 1px 2px rgba(0, 0, 0, 0.08);
}
.btn-primary-gradient:hover,
.lo-btn-primary:hover {
background: var(--lo-primary-gradient-hover);
color: #fff;
box-shadow: 0 2px 6px rgba(0, 0, 0, 0.12);
}
/* Success button */
.btn-success {
background: linear-gradient(180deg, var(--lo-success-light), var(--lo-success));
border-color: var(--lo-success);
box-shadow: 0 1px 2px rgba(0, 0, 0, 0.08);
}
.btn-success:hover {
background: linear-gradient(180deg, var(--lo-success), #059669);
border-color: #059669;
box-shadow: 0 2px 6px rgba(0, 0, 0, 0.12);
}
/* Danger button */
.btn-danger {
background: linear-gradient(180deg, var(--lo-danger-light), var(--lo-danger));
border-color: var(--lo-danger);
box-shadow: 0 1px 2px rgba(0, 0, 0, 0.08);
}
.btn-danger:hover {
background: linear-gradient(180deg, var(--lo-danger), #dc2626);
border-color: #dc2626;
box-shadow: 0 2px 6px rgba(0, 0, 0, 0.12);
}
/* Warning button */
.btn-warning {
background: linear-gradient(180deg, var(--lo-warning-light), var(--lo-warning));
border-color: var(--lo-warning);
box-shadow: 0 1px 2px rgba(0, 0, 0, 0.08);
}
.btn-warning:hover {
background: linear-gradient(180deg, var(--lo-warning), #d97706);
border-color: #d97706;
box-shadow: 0 2px 6px rgba(0, 0, 0, 0.12);
}
/* Info button */
.btn-info {
background: linear-gradient(180deg, var(--lo-info-light), var(--lo-info));
border-color: var(--lo-info);
box-shadow: 0 1px 2px rgba(0, 0, 0, 0.08);
}
.btn-info:hover {
background: linear-gradient(180deg, var(--lo-info), #0284c7);
border-color: #0284c7;
box-shadow: 0 2px 6px rgba(0, 0, 0, 0.12);
}
/* Outline buttons - no gradient, clean hover */
.btn-outline-primary:hover,
.btn-outline-success:hover,
.btn-outline-danger:hover,
.btn-outline-warning:hover,
.btn-outline-info:hover {
box-shadow: 0 1px 3px rgba(0, 0, 0, 0.08);
}
/* Secondary / default button - subtle appearance */
.btn-secondary,
.btn-default {
background: linear-gradient(180deg, #ffffff, var(--lo-slate-50));
border-color: var(--lo-slate-300);
color: var(--lo-slate-700);
box-shadow: 0 1px 2px rgba(0, 0, 0, 0.04);
}
.btn-secondary:hover,
.btn-default:hover {
background: linear-gradient(180deg, var(--lo-slate-50), var(--lo-slate-100));
border-color: var(--lo-slate-400);
color: var(--lo-slate-800);
box-shadow: 0 2px 4px rgba(0, 0, 0, 0.06);
}
/* ========================================================================
8. Select2 Enhancement
======================================================================== */
.select2-container--default .select2-selection--single {
border-radius: var(--lo-border-radius);
border-color: var(--lo-slate-300);
height: calc(2.25rem + 2px);
padding: 0.375rem 0.75rem;
transition: var(--lo-transition);
}
.select2-container--default .select2-selection--single:hover {
border-color: var(--lo-slate-400);
}
.select2-container--default.select2-container--focus .select2-selection--single {
border-color: var(--lo-primary);
box-shadow: 0 0 0 3px rgba(79, 70, 229, 0.1);
}
.select2-container--default .select2-selection--single .select2-selection__rendered {
line-height: 1.5;
padding-left: 0;
}
.select2-dropdown {
border-radius: var(--lo-border-radius);
border-color: var(--lo-slate-300);
box-shadow: var(--lo-shadow-lg);
}
.select2-container--default .select2-results__option--highlighted[aria-selected] {
background-color: var(--lo-primary);
}
/* Dark mode Select2 styling */
html.dark-mode .select2-dropdown {
background-color: #1e293b !important;
border-color: #334155 !important;
}
html.dark-mode .select2-container--default .select2-selection--single {
background-color: #1e293b !important;
border-color: #334155 !important;
}
html.dark-mode .select2-container--default .select2-selection--single .select2-selection__rendered {
color: #e2e8f0 !important;
}
html.dark-mode .select2-container--default .select2-selection--single .select2-selection__placeholder {
color: #94a3b8 !important;
}
html.dark-mode .select2-container--default .select2-selection--single .select2-selection__arrow b {
border-color: #94a3b8 transparent transparent transparent !important;
}
html.dark-mode .select2-search--dropdown .select2-search__field {
background-color: #0f172a !important;
border-color: #334155 !important;
color: #e2e8f0 !important;
}
html.dark-mode .select2-container--default .select2-results__option {
color: #e2e8f0 !important;
background-color: #1e293b !important;
}
html.dark-mode .select2-container--default .select2-results__option--highlighted[aria-selected] {
background-color: #4f46e5 !important;
color: #ffffff !important;
}
html.dark-mode .select2-container--default .select2-results__option[aria-selected="true"] {
background-color: #334155 !important;
color: #a5b4fc !important;
}
html.dark-mode .select2-container--default .select2-results__option:hover {
background-color: rgba(99, 102, 241, 0.2) !important;
}
/* ========================================================================
1.1.5 Navbar & Sidenav Toggles
======================================================================== */
.layout-navbar.bg-primary {
background: var(--lo-primary-gradient) !important;
border-bottom: none !important;
box-shadow:
inset 0 1px 0 rgba(255, 255, 255, 0.38),
inset 0 -10px 24px rgba(255, 255, 255, 0.12),
0 10px 40px -10px rgba(0, 0, 0, 0.25),
0 2px 8px rgba(0, 0, 0, 0.1) !important;
-webkit-backdrop-filter: blur(24px) saturate(1.8);
backdrop-filter: blur(24px) saturate(1.8);
position: relative;
z-index: 1030;
}
/* Liquid Glass — specular highlight (water droplet refraction) */
.layout-navbar.bg-primary::before {
content: "";
position: absolute;
inset: 0;
background:
radial-gradient(ellipse 70% 140% at 10% -30%, rgba(255, 255, 255, 0.52) 0%, rgba(255, 255, 255, 0.18) 35%, transparent 65%),
radial-gradient(ellipse 50% 100% at 50% -40%, rgba(255, 255, 255, 0.25) 0%, transparent 70%),
radial-gradient(ellipse 45% 90% at 88% 130%, rgba(255, 255, 255, 0.14) 0%, transparent 55%),
linear-gradient(180deg, rgba(255, 255, 255, 0.2) 0%, rgba(255, 255, 255, 0.05) 40%, transparent 100%);
pointer-events: none;
z-index: 1;
}
/* Liquid Glass — bottom caustic edge line */
.layout-navbar.bg-primary::after {
content: "";
position: absolute;
bottom: 0;
left: 0;
right: 0;
height: 2px;
background: linear-gradient(90deg,
transparent 0%,
rgba(255, 255, 255, 0.2) 10%,
rgba(255, 255, 255, 0.55) 50%,
rgba(255, 255, 255, 0.2) 90%,
transparent 100%);
pointer-events: none;
z-index: 1;
}
.layout-navbar.bg-primary .navbar-nav .nav-link,
.layout-navbar.bg-primary .navbar-nav .nav-item,
.layout-navbar.bg-primary .navbar-nav .navbar-text,
.layout-navbar.bg-primary .layout-sidenav-toggle i,
.layout-navbar.bg-primary .navbar-brand {
color: rgba(255, 255, 255, 0.9) !important;
}
.layout-navbar.bg-primary .navbar-nav .nav-link:hover,
.layout-navbar.bg-primary .layout-sidenav-toggle:hover i {
color: #ffffff !important;
}
/* Sidenav Mini (Collapsed) Support */
@media (min-width: 992px) {
html.layout-collapsed:not(.layout-offcanvas):not(.layout-fixed-offcanvas) .layout-sidenav {
width: 70px !important;
}
html.layout-collapsed:not(.layout-offcanvas):not(.layout-fixed-offcanvas) .layout-sidenav .sidenav-inner>.sidenav-item>.sidenav-link>div,
html.layout-collapsed:not(.layout-offcanvas):not(.layout-fixed-offcanvas) .layout-sidenav .sidenav-inner>.sidenav-item>.sidenav-link>.ml-auto,
html.layout-collapsed:not(.layout-offcanvas):not(.layout-fixed-offcanvas) .layout-sidenav .sidenav-inner>.sidenav-header {
display: none !important;
}
html.layout-collapsed:not(.layout-offcanvas):not(.layout-fixed-offcanvas) .layout-sidenav .sidenav-inner>.sidenav-item>.sidenav-link {
justify-content: center !important;
padding-left: 0 !important;
padding-right: 0 !important;
}
html.layout-collapsed:not(.layout-offcanvas):not(.layout-fixed-offcanvas) .layout-sidenav .sidenav-icon {
margin-right: 0 !important;
font-size: 1.25rem !important;
}
html.layout-collapsed:not(.layout-offcanvas):not(.layout-fixed-offcanvas) .layout-container {
padding-left: 70px !important;
}
}
html:not(.layout-collapsed) .layout-sidenav,
html:not(.layout-collapsed) .layout-container {
transition: all 0.3s ease-in-out;
}
/* ========================================================================
9. Tables Enhancement
======================================================================== */
.table {
border-radius: 0.5rem;
border-collapse: separate;
border-spacing: 0;
overflow: hidden;
width: 100%;
}
.table thead th {
background-color: var(--lo-slate-50);
border-bottom: 2px solid var(--lo-slate-200);
border-top: none;
color: var(--lo-slate-700);
font-weight: 700;
font-size: 0.875rem;
letter-spacing: 0.01em;
padding: 0.375rem 0.375rem;
}
.table tbody tr {
transition: background-color 0.15s ease;
}
.table tbody tr:nth-of-type(even) {
background-color: var(--lo-slate-50);
}
.table tbody tr:hover {
background-color: rgba(37, 99, 235, 0.04);
}
.table td,
.table th {
vertical-align: middle;
border-color: var(--lo-slate-150);
border-top: 1px solid var(--lo-slate-150);
padding: 0.375rem 0.375rem;
}
/* Color-scheme-aware table hover */
html[data-color-scheme="coffee"] .table tbody tr:hover {
background-color: rgba(146, 64, 14, 0.05);
}
html[data-color-scheme="breakfast"] .table tbody tr:hover {
background-color: rgba(234, 88, 12, 0.05);
}
html[data-color-scheme="lunch"] .table tbody tr:hover {
background-color: rgba(22, 163, 74, 0.05);
}
html[data-color-scheme="spicy"] .table tbody tr:hover {
background-color: rgba(220, 38, 38, 0.05);
}
html[data-color-scheme="brunch"] .table tbody tr:hover {
background-color: rgba(219, 39, 119, 0.05);
}
html[data-color-scheme="dark"] .table tbody tr:hover {
background-color: rgba(51, 65, 85, 0.06);
}
/* Color-scheme-aware thead-dark: use primary color as header bg */
/* Only apply to simple list-page tables, skip complex Vue component tables */
.thead-dark th {
background-color: var(--lo-primary-dark) !important;
border-color: var(--lo-primary-dark) !important;
color: #fff !important;
}
/* Restore original Bootstrap thead-dark inside business-hours / Vue components */
.open_times_list .thead-dark th,
.open_times_list .thead-dark th .form-control,
.open_times_list .thead-dark th .btn,
.open_times_list .thead-dark th label,
.open_times_list .thead-dark th select {
background-color: #343a40 !important;
border-color: #454d55 !important;
color: #fff !important;
}
.open_times_list .thead-dark th .form-control,
.open_times_list .thead-dark th select {
background-color: #495057 !important;
border-color: #6c757d !important;
}
.open_times_list .thead-dark th .btn-primary {
background-color: var(--lo-primary) !important;
border-color: var(--lo-primary) !important;
}
/* Prevent wrapping in business hours weekday + toggle cell */
.open_times_list .form-group {
white-space: nowrap;
margin-bottom: 0 !important;
}
/* Non-thead-dark table header: subtle primary tint */
.table:not(.table-dark) thead:not(.thead-dark) th {
background-color: var(--lo-slate-50);
}
/* Color-scheme-aware zebra stripes */
html[data-color-scheme="coffee"] .table tbody tr:nth-of-type(even) {
background-color: rgba(146, 64, 14, 0.02);
}
html[data-color-scheme="breakfast"] .table tbody tr:nth-of-type(even) {
background-color: rgba(234, 88, 12, 0.02);
}
html[data-color-scheme="lunch"] .table tbody tr:nth-of-type(even) {
background-color: rgba(22, 163, 74, 0.02);
}
html[data-color-scheme="spicy"] .table tbody tr:nth-of-type(even) {
background-color: rgba(220, 38, 38, 0.02);
}
html[data-color-scheme="brunch"] .table tbody tr:nth-of-type(even) {
background-color: rgba(219, 39, 119, 0.02);
}
html[data-color-scheme="dark"] .table tbody tr:nth-of-type(even) {
background-color: rgba(51, 65, 85, 0.03);
}
/* Dark mode table enhancements */
html.dark-mode .table tbody tr:nth-of-type(even) {
background-color: rgba(255, 255, 255, 0.02);
}
html.dark-mode .table tbody tr:hover {
background-color: rgba(99, 102, 241, 0.06);
}
/* Dark mode + color-scheme table hover */
html.dark-mode[data-color-scheme="coffee"] .table tbody tr:hover {
background-color: rgba(217, 119, 6, 0.08);
}
html.dark-mode[data-color-scheme="breakfast"] .table tbody tr:hover {
background-color: rgba(249, 115, 22, 0.08);
}
html.dark-mode[data-color-scheme="lunch"] .table tbody tr:hover {
background-color: rgba(34, 197, 94, 0.08);
}
html.dark-mode[data-color-scheme="spicy"] .table tbody tr:hover {
background-color: rgba(239, 68, 68, 0.08);
}
html.dark-mode[data-color-scheme="brunch"] .table tbody tr:hover {
background-color: rgba(236, 72, 153, 0.08);
}
html.dark-mode[data-color-scheme="dark"] .table tbody tr:hover {
background-color: rgba(148, 163, 184, 0.08);
}
/* Dark mode + color-scheme zebra stripes */
html.dark-mode[data-color-scheme="coffee"] .table tbody tr:nth-of-type(even) {
background-color: rgba(217, 119, 6, 0.03);
}
html.dark-mode[data-color-scheme="breakfast"] .table tbody tr:nth-of-type(even) {
background-color: rgba(249, 115, 22, 0.03);
}
html.dark-mode[data-color-scheme="lunch"] .table tbody tr:nth-of-type(even) {
background-color: rgba(34, 197, 94, 0.03);
}
html.dark-mode[data-color-scheme="spicy"] .table tbody tr:nth-of-type(even) {
background-color: rgba(239, 68, 68, 0.03);
}
html.dark-mode[data-color-scheme="brunch"] .table tbody tr:nth-of-type(even) {
background-color: rgba(236, 72, 153, 0.03);
}
html.dark-mode[data-color-scheme="dark"] .table tbody tr:nth-of-type(even) {
background-color: rgba(148, 163, 184, 0.03);
}
/* ========================================================================
10. Alerts & Badges
======================================================================== */
.alert {
border-radius: var(--lo-border-radius);
border: none;
}
.badge {
border-radius: var(--lo-border-radius-sm);
font-weight: 500;
padding: 0.25rem 0.625rem;
}
/* ========================================================================
11. Login Page Specific Styles - Tech-Inspired Background
======================================================================== */
/* Animated gradient background */
.lo-login-bg {
min-height: 100vh;
background: linear-gradient(-45deg, #0f172a, #1e293b, #312e81, #1e1b4b);
background-size: 400% 400%;
animation: lo-gradient-shift 15s ease infinite;
position: relative;
overflow: hidden;
}
@keyframes lo-gradient-shift {
0% {
background-position: 0% 50%;
}
50% {
background-position: 100% 50%;
}
100% {
background-position: 0% 50%;
}
}
/* Grid pattern overlay */
.lo-login-bg::before {
content: '';
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
background-image:
linear-gradient(rgba(99, 102, 241, 0.03) 1px, transparent 1px),
linear-gradient(90deg, rgba(99, 102, 241, 0.03) 1px, transparent 1px);
background-size: 50px 50px;
pointer-events: none;
}
/* Floating particles container */
.lo-particles {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
pointer-events: none;
overflow: hidden;
}
.lo-particle {
position: absolute;
width: 4px;
height: 4px;
background: rgba(99, 102, 241, 0.6);
border-radius: 50%;
animation: lo-float 20s infinite linear;
opacity: 0;
}
.lo-particle:nth-child(1) {
left: 10%;
animation-delay: 0s;
animation-duration: 25s;
}
.lo-particle:nth-child(2) {
left: 20%;
animation-delay: 2s;
animation-duration: 20s;
}
.lo-particle:nth-child(3) {
left: 30%;
animation-delay: 4s;
animation-duration: 28s;
}
.lo-particle:nth-child(4) {
left: 40%;
animation-delay: 1s;
animation-duration: 22s;
}
.lo-particle:nth-child(5) {
left: 50%;
animation-delay: 3s;
animation-duration: 26s;
}
.lo-particle:nth-child(6) {
left: 60%;
animation-delay: 5s;
animation-duration: 24s;
}
.lo-particle:nth-child(7) {
left: 70%;
animation-delay: 2s;
animation-duration: 21s;
}
.lo-particle:nth-child(8) {
left: 80%;
animation-delay: 0s;
animation-duration: 27s;
}
.lo-particle:nth-child(9) {
left: 90%;
animation-delay: 4s;
animation-duration: 23s;
}
.lo-particle:nth-child(10) {
left: 15%;
animation-delay: 1s;
animation-duration: 29s;
}
.lo-particle:nth-child(11) {
left: 35%;
animation-delay: 3s;
animation-duration: 19s;
}
.lo-particle:nth-child(12) {
left: 55%;
animation-delay: 5s;
animation-duration: 30s;
}
.lo-particle:nth-child(13) {
left: 75%;
animation-delay: 2s;
animation-duration: 18s;
}
.lo-particle:nth-child(14) {
left: 95%;
animation-delay: 4s;
animation-duration: 25s;
}
.lo-particle:nth-child(15) {
left: 5%;
animation-delay: 0s;
animation-duration: 22s;
}
@keyframes lo-float {
0% {
transform: translateY(100vh) scale(0);
opacity: 0;
}
10% {
opacity: 1;
}
90% {
opacity: 1;
}
100% {
transform: translateY(-100vh) scale(1);
opacity: 0;
}
}
/* Glowing orbs */
.lo-orb {
position: absolute;
border-radius: 50%;
filter: blur(60px);
opacity: 0.4;
animation: lo-orb-pulse 8s ease-in-out infinite alternate;
}
.lo-orb-1 {
width: 300px;
height: 300px;
background: radial-gradient(circle, rgba(99, 102, 241, 0.5), transparent 70%);
top: -100px;
right: -100px;
animation-delay: 0s;
}
.lo-orb-2 {
width: 400px;
height: 400px;
background: radial-gradient(circle, rgba(139, 92, 246, 0.4), transparent 70%);
bottom: -150px;
left: -150px;
animation-delay: 4s;
}
.lo-orb-3 {
width: 250px;
height: 250px;
background: radial-gradient(circle, rgba(59, 130, 246, 0.3), transparent 70%);
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
animation-delay: 2s;
}
@keyframes lo-orb-pulse {
0% {
opacity: 0.3;
transform: scale(1);
}
100% {
opacity: 0.5;
transform: scale(1.1);
}
}
/* Login wrapper - centered content */
.lo-login-wrapper {
min-height: 100vh;
display: flex;
align-items: center;
justify-content: center;
padding: 2rem 1rem;
position: relative;
z-index: 10;
}
/* Glass-effect login card */
.lo-login-card {
border-radius: var(--lo-border-radius-xl);
box-shadow:
0 25px 50px -12px rgba(0, 0, 0, 0.5),
0 0 0 1px rgba(255, 255, 255, 0.1);
max-width: 420px;
width: 100%;
background: rgba(255, 255, 255, 0.95);
backdrop-filter: blur(20px);
-webkit-backdrop-filter: blur(20px);
overflow: hidden;
animation: lo-card-appear 0.6s ease-out;
}
@keyframes lo-card-appear {
from {
opacity: 0;
transform: translateY(20px) scale(0.98);
}
to {
opacity: 1;
transform: translateY(0) scale(1);
}
}
.lo-login-card .card-body {
padding: 2rem;
}
.lo-login-header {
text-align: center;
margin-bottom: 1.5rem;
}
.lo-login-header h4 {
color: var(--lo-slate-800);
font-weight: 700;
margin-bottom: 0.5rem;
}
.lo-login-header p {
color: var(--lo-slate-500);
font-size: 0.9375rem;
}
.lo-login-form .form-group {
margin-bottom: 1.25rem;
}
.lo-login-form .form-control {
padding: 0.75rem 1rem;
font-size: 0.9375rem;
}
.lo-login-form .form-label {
display: flex;
justify-content: space-between;
align-items: center;
}
.lo-login-form .form-label a {
font-size: 0.8125rem;
color: var(--lo-primary);
text-decoration: none;
}
.lo-login-form .form-label a:hover {
text-decoration: underline;
}
/* Login checkbox */
.lo-checkbox {
display: flex;
align-items: center;
gap: 0.5rem;
margin-bottom: 1rem;
}
.lo-checkbox input[type="checkbox"] {
width: 1.125rem;
height: 1.125rem;
accent-color: var(--lo-primary);
cursor: pointer;
}
.lo-checkbox label {
margin: 0;
font-size: 0.9375rem;
color: var(--lo-slate-600);
cursor: pointer;
}
.lo-checkbox .text-warning {
color: var(--lo-danger) !important;
font-size: 0.875rem;
}
/* Login button */
.lo-login-btn {
width: 100%;
padding: 0.875rem 1.5rem;
font-size: 1rem;
font-weight: 600;
border-radius: var(--lo-border-radius);
background: var(--lo-primary-gradient);
border: none;
color: #fff;
cursor: pointer;
transition: var(--lo-transition);
}
.lo-login-btn:hover {
background: var(--lo-primary-gradient-hover);
transform: translateY(-1px);
box-shadow: var(--lo-shadow-md);
}
/* LINE Login button */
.lo-line-login {
display: inline-flex;
align-items: center;
gap: 0.5rem;
padding: 0.625rem 1rem;
background-color: #00C300;
color: #fff;
border-radius: var(--lo-border-radius);
text-decoration: none;
font-weight: 500;
transition: var(--lo-transition);
}
.lo-line-login:hover {
background-color: #00B300;
color: #fff;
text-decoration: none;
}
/* ========================================================================
12. Utility Classes
======================================================================== */
/* Text colors */
.text-lo-primary {
color: var(--lo-primary) !important;
}
.text-lo-success {
color: var(--lo-success) !important;
}
.text-lo-warning {
color: var(--lo-warning) !important;
}
.text-lo-danger {
color: var(--lo-danger) !important;
}
.text-lo-info {
color: var(--lo-info) !important;
}
.text-lo-slate-500 {
color: var(--lo-slate-500) !important;
}
.text-lo-slate-600 {
color: var(--lo-slate-600) !important;
}
.text-lo-slate-700 {
color: var(--lo-slate-700) !important;
}
/* Background colors */
.bg-lo-primary {
background-color: var(--lo-primary) !important;
}
.bg-lo-slate-50 {
background-color: var(--lo-slate-50) !important;
}
.bg-lo-slate-100 {
background-color: var(--lo-slate-100) !important;
}
/* Border radius */
.rounded-lo {
border-radius: var(--lo-border-radius) !important;
}
.rounded-lo-lg {
border-radius: var(--lo-border-radius-lg) !important;
}
.rounded-lo-xl {
border-radius: var(--lo-border-radius-xl) !important;
}
/* Shadows */
.shadow-lo {
box-shadow: var(--lo-shadow) !important;
}
.shadow-lo-md {
box-shadow: var(--lo-shadow-md) !important;
}
.shadow-lo-lg {
box-shadow: var(--lo-shadow-lg) !important;
}
/* Transitions */
.transition-lo {
transition: var(--lo-transition) !important;
}
/* ========================================================================
13. Small Buttons by Default
======================================================================== */
/* Make all buttons small by default for a more compact UI */
.btn {
padding: 0.375rem 0.75rem;
font-size: 0.8125rem;
white-space: nowrap;
}
/* Preserve btn-lg for cases where larger buttons are explicitly needed */
.btn-lg {
padding: 0.75rem 1.5rem;
font-size: 1rem;
}
/* Ensure btn-sm is even smaller */
.btn-sm {
padding: 0.25rem 0.5rem;
font-size: 0.75rem;
}
/* Icon-only buttons */
.btn-icon {
width: 2rem;
height: 2rem;
padding: 0;
display: inline-flex;
align-items: center;
justify-content: center;
}
.btn-icon.btn-sm {
width: 1.5rem;
height: 1.5rem;
}
/* ========================================================================
14. View Toggle - Table/Card Mode Switch
======================================================================== */
/* View toggle button group */
.lo-view-toggle {
display: inline-flex;
background-color: var(--lo-slate-100);
border-radius: var(--lo-border-radius);
padding: 0.25rem;
gap: 0.25rem;
}
.lo-view-toggle .btn {
border-radius: var(--lo-border-radius-sm);
padding: 0.375rem 0.75rem;
background: transparent;
border: none;
color: var(--lo-slate-500);
transition: var(--lo-transition);
}
.lo-view-toggle .btn:hover {
color: var(--lo-slate-700);
background-color: var(--lo-slate-200);
}
.lo-view-toggle .btn.active {
background-color: #fff;
color: var(--lo-primary);
box-shadow: var(--lo-shadow-sm);
}
.lo-view-toggle .btn i {
font-size: 1rem;
}
/* Card grid layout for card view mode */
.lo-card-grid {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
gap: 1rem;
padding: 1rem 0;
}
/* Individual item card in grid view */
.lo-item-card {
background: #fff;
border-radius: var(--lo-border-radius-lg);
border: 1px solid var(--lo-slate-200);
padding: 1rem;
transition: var(--lo-transition);
display: flex;
flex-direction: column;
}
.lo-item-card:hover {
box-shadow: var(--lo-shadow-md);
border-color: var(--lo-slate-300);
}
.lo-item-card .card-title {
font-size: 0.9375rem;
font-weight: 600;
color: var(--lo-slate-800);
margin-bottom: 0.5rem;
display: flex;
align-items: center;
justify-content: space-between;
}
.lo-item-card .card-title a {
color: var(--lo-slate-800);
text-decoration: none;
}
.lo-item-card .card-title a:hover {
color: var(--lo-primary);
}
.lo-item-card .card-meta {
font-size: 0.8125rem;
color: var(--lo-slate-500);
margin-bottom: 0.75rem;
}
.lo-item-card .card-content {
flex: 1;
font-size: 0.875rem;
color: var(--lo-slate-600);
line-height: 1.5;
}
.lo-item-card .card-footer {
display: flex;
justify-content: space-between;
align-items: center;
padding-top: 0.75rem;
margin-top: 0.75rem;
border-top: 1px solid var(--lo-slate-100);
background: transparent;
}
.lo-item-card .card-actions {
display: flex;
gap: 0.375rem;
}
/* Status badge in card */
.lo-item-card .badge {
font-size: 0.6875rem;
}
/* Hide/show based on view mode */
.lo-view-table {
display: block;
}
.lo-view-card {
display: none;
}
.view-mode-card .lo-view-table {
display: none;
}
.view-mode-card .lo-view-card {
display: block;
}
/* Responsive adjustments for card grid */
@media (max-width: 576px) {
.lo-card-grid {
grid-template-columns: 1fr;
}
}
@media (min-width: 768px) and (max-width: 991px) {
.lo-card-grid {
grid-template-columns: repeat(2, 1fr);
}
}
@media (min-width: 992px) and (max-width: 1199px) {
.lo-card-grid {
grid-template-columns: repeat(3, 1fr);
}
}
@media (min-width: 1200px) {
.lo-card-grid {
grid-template-columns: repeat(4, 1fr);
}
}
/* ========================================================================
15. List Header with View Toggle
======================================================================== */
.lo-list-header {
display: flex;
justify-content: space-between;
align-items: center;
margin-bottom: 1rem;
}
.lo-list-header .lo-list-title {
font-size: 1.125rem;
font-weight: 600;
color: var(--lo-slate-800);
margin: 0;
}
.lo-list-header .lo-list-actions {
display: flex;
align-items: center;
gap: 0.75rem;
}
/* Compact table enhancements for list pages */
.table-compact th,
.table-compact td {
padding: 0.5rem 0.625rem;
font-size: 0.8125rem;
}
.table-compact .btn {
padding: 0.1875rem 0.375rem;
font-size: 0.6875rem;
}
/* ========================================================================
16. Vue Component Exceptions - Restore Original Styles
======================================================================== */
/*
* OpentimesComponent (營業時間區塊) - Restore original Bootstrap styles
* This component uses many compact select dropdowns that need original sizing
*/
/* Reset form-control padding for table dropdowns */
.table .form-control-sm,
.table-sm .form-control-sm,
.table-responsive .form-control-sm {
padding: 0.25rem 0.5rem;
font-size: 0.765625rem;
line-height: 1.5;
border-radius: 0.2rem;
}
/* Ensure select dropdowns in tables have proper sizing */
.table select.form-control,
.table-sm select.form-control,
.table-responsive select.form-control {
padding: 0.25rem 0.5rem;
font-size: 0.875rem;
height: auto;
}
/* Reset padding for px-0 class that is used in the component */
.table .form-control.px-0,
.table-sm .form-control.px-0,
.table-responsive .form-control.px-0 {
padding-left: 0.25rem !important;
padding-right: 0.25rem !important;
}
/* Ensure table cells don't have z-index issues */
.table td,
.table th {
position: relative;
z-index: auto;
}
/* Reset button sizes in table cells to Bootstrap defaults */
.table .btn-sm,
.table-sm .btn-sm,
.table-responsive .btn-sm {
padding: 0.25rem 0.5rem;
font-size: 0.765625rem;
line-height: 1.5;
border-radius: 0.2rem;
}
.table .btn-xs,
.table-sm .btn-xs,
.table-responsive .btn-xs {
padding: 0.125rem 0.25rem;
font-size: 0.6875rem;
}
/* Ensure d-inline-block dropdowns have proper display */
.table .d-inline-block select.form-control {
display: inline-block;
width: auto;
}
/* Preserve original switcher styles in tables */
.table .switcher,
.table-sm .switcher,
.table-responsive .switcher {
position: relative;
display: inline-block;
}
/* Fix: layout-fixed-offcanvas sets overflow:hidden on .layout-wrapper,
which prevents horizontal scroll inside table-responsive.
Override to allow inner scroll containers to work. */
.layout-fixed-offcanvas .layout-wrapper {
overflow: visible !important;
overflow-y: auto !important;
}
/* Ensure proper overflow for table-responsive */
.table-responsive {
overflow-x: auto !important;
-webkit-overflow-scrolling: touch;
display: block;
width: 100%;
}
.table-responsive>.table {
overflow: visible;
}
/* Avoid sticky column z-index conflicts */
.table td:first-child,
.table th:first-child {
z-index: 1;
}
.table thead th {
z-index: 2;
}
/* ========================================================================
17. Page Header — Transparent Title Bar
======================================================================== */
/* Shared page titles stay text-only. Do not add filled backgrounds here. */
.container-fluid>h4.font-weight-bold:not(.report-page-head),
.container-fluid>div.font-weight-bold.py-3:not(.report-page-head) {
font-size: 1.25rem;
font-weight: 700 !important;
letter-spacing: 0.01em;
padding: 0.75rem 1rem !important;
margin-bottom: 1rem !important;
border-radius: 14px;
color: var(--lo-slate-900, #0f172a) !important;
position: relative;
overflow: visible;
background: transparent !important;
box-shadow: none !important;
border: none !important;
}
.container-fluid>h4.font-weight-bold:not(.report-page-head)::after,
.container-fluid>div.font-weight-bold.py-3:not(.report-page-head)::after {
display: none !important;
}
.container-fluid>h4.font-weight-bold:not(.report-page-head)>*,
.container-fluid>div.font-weight-bold.py-3:not(.report-page-head)>* {
position: relative;
z-index: 1;
}
.container-fluid>h4.font-weight-bold:not(.report-page-head) a:not(.btn),
.container-fluid>div.font-weight-bold.py-3:not(.report-page-head) a:not(.btn),
.container-fluid>h4.font-weight-bold:not(.report-page-head) div,
.container-fluid>div.font-weight-bold.py-3:not(.report-page-head) div,
.container-fluid>h4.font-weight-bold:not(.report-page-head) span,
.container-fluid>div.font-weight-bold.py-3:not(.report-page-head) span {
color: inherit !important;
}
/* Return/undo button - keep warning color but add subtle shadow */
.container-fluid>h4.font-weight-bold:not(.report-page-head) .btn-warning {
box-shadow: 0 2px 6px rgba(0, 0, 0, 0.2);
}
/* Shared back/undo action - keep one consistent warning tone across page shells */
.report-fancy .report-page-head > .btn-circle[title="回上頁"],
.report-fancy .report-page-head > .btn-round[title="回上頁"] {
margin-left: auto;
}
.btn-circle[title="回上頁"],
.btn-round[title="回上頁"] {
color: #ffffff !important;
background: color-mix(in srgb, var(--lo-primary, #2563eb) 72%, #f3efe2 28%) !important;
border-color: color-mix(in srgb, var(--lo-primary, #2563eb) 34%, #ffffff 66%) !important;
box-shadow: none !important;
}
.btn-circle[title="回上頁"]:hover,
.btn-circle[title="回上頁"]:focus,
.btn-round[title="回上頁"]:hover,
.btn-round[title="回上頁"]:focus {
color: #ffffff !important;
background: color-mix(in srgb, var(--lo-primary-dark, #1d4ed8) 78%, #ebe2c8 22%) !important;
border-color: color-mix(in srgb, var(--lo-primary-dark, #1d4ed8) 46%, #fff7e3 54%) !important;
}
html.dark-mode .btn-circle[title="回上頁"],
html.dark-mode .btn-round[title="回上頁"] {
color: #ffffff !important;
background: color-mix(in srgb, var(--lo-primary-light, #3b82f6) 62%, #3a3221 38%) !important;
border-color: color-mix(in srgb, var(--lo-primary-light, #3b82f6) 36%, #d4c4a1 64%) !important;
box-shadow: none !important;
}
html.dark-mode .container-fluid>h4.font-weight-bold:not(.report-page-head),
html.dark-mode .container-fluid>div.font-weight-bold.py-3:not(.report-page-head) {
color: #e2e8f0 !important;
background: transparent !important;
box-shadow: none !important;
border: none !important;
}
html.dark-mode .container-fluid>h4.font-weight-bold:not(.report-page-head)::after,
html.dark-mode .container-fluid>div.font-weight-bold.py-3:not(.report-page-head)::after {
display: none !important;
}
/* Responsive - smaller padding on mobile */
@media (max-width: 991px) {
.container-fluid>h4.font-weight-bold:not(.report-page-head),
.container-fluid>div.font-weight-bold.py-3:not(.report-page-head) {
padding: 0.65rem 0.8rem !important;
font-size: 1.1rem;
}
}
/* Color schemes must not reintroduce filled title bars. */
html[data-color-scheme="coffee"] .container-fluid>h4.font-weight-bold:not(.report-page-head),
html[data-color-scheme="coffee"] .container-fluid>div.font-weight-bold.py-3:not(.report-page-head) {
background: transparent !important;
box-shadow: none !important;
}
html[data-color-scheme="breakfast"] .container-fluid>h4.font-weight-bold:not(.report-page-head),
html[data-color-scheme="breakfast"] .container-fluid>div.font-weight-bold.py-3:not(.report-page-head) {
background: transparent !important;
box-shadow: none !important;
}
html[data-color-scheme="lunch"] .container-fluid>h4.font-weight-bold:not(.report-page-head),
html[data-color-scheme="lunch"] .container-fluid>div.font-weight-bold.py-3:not(.report-page-head) {
background: transparent !important;
box-shadow: none !important;
}
html[data-color-scheme="spicy"] .container-fluid>h4.font-weight-bold:not(.report-page-head),
html[data-color-scheme="spicy"] .container-fluid>div.font-weight-bold.py-3:not(.report-page-head) {
background: transparent !important;
box-shadow: none !important;
}
html[data-color-scheme="brunch"] .container-fluid>h4.font-weight-bold:not(.report-page-head),
html[data-color-scheme="brunch"] .container-fluid>div.font-weight-bold.py-3:not(.report-page-head) {
background: transparent !important;
box-shadow: none !important;
}
html[data-color-scheme="dark"] .container-fluid>h4.font-weight-bold:not(.report-page-head),
html[data-color-scheme="dark"] .container-fluid>div.font-weight-bold.py-3:not(.report-page-head) {
background: transparent !important;
box-shadow: none !important;
}
/* ========================================================================
18. Empty State & Skeleton Screen
======================================================================== */
/* Empty state for tables / lists */
.lo-empty-state {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
padding: 3rem 1.5rem;
color: var(--lo-slate-400);
}
.lo-empty-state i {
font-size: 2.5rem;
margin-bottom: 0.75rem;
opacity: 0.5;
}
.lo-empty-state p {
font-size: 0.9375rem;
margin: 0;
}
/* Skeleton loading shimmer */
.lo-skeleton {
position: relative;
overflow: hidden;
background-color: var(--lo-slate-100);
border-radius: var(--lo-border-radius-sm);
}
.lo-skeleton::after {
content: "";
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.5), transparent);
animation: lo-skeleton-shimmer 1.5s infinite;
}
@keyframes lo-skeleton-shimmer {
0% {
transform: translateX(-100%);
}
100% {
transform: translateX(100%);
}
}
.lo-skeleton-text {
height: 0.875rem;
margin-bottom: 0.5rem;
width: 100%;
}
.lo-skeleton-text:last-child {
width: 60%;
}
.lo-skeleton-title {
height: 1.25rem;
width: 40%;
margin-bottom: 0.75rem;
}
.lo-skeleton-avatar {
width: 2.5rem;
height: 2.5rem;
border-radius: 50%;
}
.lo-skeleton-btn {
height: 2rem;
width: 5rem;
border-radius: var(--lo-border-radius-sm);
}
.lo-skeleton-row {
display: flex;
align-items: center;
gap: 0.75rem;
padding: 0.75rem 0;
}
/* Dark mode skeleton */
html.dark-mode .lo-skeleton {
background-color: #334155;
}
html.dark-mode .lo-skeleton::after {
background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.08), transparent);
}
/* ========================================================================
19. Form Controls — Enhanced Focus & Labels
======================================================================== */
/* Enhanced focus ring using primary color */
.form-control:focus,
.lo-form-control:focus {
border-color: var(--lo-primary) !important;
box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.12) !important;
outline: none;
}
/* Label enhancement */
.form-label,
label.control-label,
label[for] {
font-weight: 600;
color: var(--lo-slate-700);
font-size: 0.8125rem;
letter-spacing: 0.01em;
margin-bottom: 0.375rem;
}
/* Form group spacing */
.form-group {
margin-bottom: 1.25rem;
}
/* Dark mode form labels */
html.dark-mode .form-label,
html.dark-mode label.control-label,
html.dark-mode label[for] {
color: #cbd5e1;
}
/* Dark mode focus ring */
html.dark-mode .form-control:focus,
html.dark-mode .lo-form-control:focus {
border-color: var(--lo-primary) !important;
box-shadow: 0 0 0 3px rgba(96, 165, 250, 0.15) !important;
}
/* Color-scheme-aware focus rings */
html[data-color-scheme="coffee"] .form-control:focus {
box-shadow: 0 0 0 3px rgba(146, 64, 14, 0.12) !important;
}
html[data-color-scheme="breakfast"] .form-control:focus {
box-shadow: 0 0 0 3px rgba(234, 88, 12, 0.12) !important;
}
html[data-color-scheme="lunch"] .form-control:focus {
box-shadow: 0 0 0 3px rgba(22, 163, 74, 0.12) !important;
}
html[data-color-scheme="spicy"] .form-control:focus {
box-shadow: 0 0 0 3px rgba(220, 38, 38, 0.12) !important;
}
html[data-color-scheme="brunch"] .form-control:focus {
box-shadow: 0 0 0 3px rgba(219, 39, 119, 0.12) !important;
}
html[data-color-scheme="dark"] .form-control:focus {
box-shadow: 0 0 0 3px rgba(51, 65, 85, 0.15) !important;
}
/* ========================================================================
20. Growl Toast Notifications — Premium Style
======================================================================== */
/* Override growl base styles */
.growl {
border-radius: 0.625rem !important;
padding: 1rem 1.25rem 1rem 3rem !important;
box-shadow: 0 10px 25px -5px rgba(0, 0, 0, 0.15), 0 4px 6px -2px rgba(0, 0, 0, 0.05) !important;
opacity: 1;
backdrop-filter: blur(8px);
-webkit-backdrop-filter: blur(8px);
min-width: 280px;
max-width: 380px;
border: none !important;
position: relative;
overflow: hidden;
white-space: nowrap;
}
/* Keep growl's built-in enter/leave animation functional */
.growl.growl-incoming,
.growl.growl-outgoing {
opacity: 0 !important;
}
/* Left color accent bar */
.growl::before {
content: "";
position: absolute;
left: 0;
top: 0;
bottom: 0;
width: 4px;
}
/* Icon pseudo-element */
.growl::after {
position: absolute;
left: 1rem;
top: 50%;
transform: translateY(-50%);
font-family: "Font Awesome 5 Free";
font-weight: 900;
font-size: 1rem;
}
/* Success toast */
.growl.growl-notice {
background: rgba(236, 253, 245, 0.97) !important;
color: #065f46 !important;
}
.growl.growl-notice::before {
background: #10b981;
}
.growl.growl-notice::after {
content: "\f058";
color: #10b981;
}
.growl.growl-notice .growl-title {
color: #065f46 !important;
}
.growl.growl-notice .growl-message {
color: #047857 !important;
}
/* Warning toast */
.growl.growl-warning {
background: rgba(255, 251, 235, 0.97) !important;
color: #92400e !important;
}
.growl.growl-warning::before {
background: #f59e0b;
}
.growl.growl-warning::after {
content: "\f071";
color: #f59e0b;
}
.growl.growl-warning .growl-title {
color: #92400e !important;
}
.growl.growl-warning .growl-message {
color: #b45309 !important;
}
/* Error toast */
.growl.growl-error {
background: rgba(254, 242, 242, 0.97) !important;
color: #991b1b !important;
}
.growl.growl-error::before {
background: #ef4444;
}
.growl.growl-error::after {
content: "\f057";
color: #ef4444;
}
.growl.growl-error .growl-title {
color: #991b1b !important;
}
.growl.growl-error .growl-message {
color: #b91c1c !important;
}
/* Default / info toast */
.growl.growl-default {
background: rgba(239, 246, 255, 0.97) !important;
color: #1e40af !important;
}
.growl.growl-default::before {
background: #3b82f6;
}
.growl.growl-default::after {
content: "\f05a";
color: #3b82f6;
}
.growl.growl-default .growl-title {
color: #1e40af !important;
}
.growl.growl-default .growl-message {
color: #1d4ed8 !important;
}
/* Shared growl text styles */
.growl .growl-title {
font-weight: 700 !important;
font-size: 0.875rem !important;
margin-bottom: 0.125rem;
white-space: nowrap;
}
.growl .growl-message {
font-size: 0.8125rem !important;
line-height: 1.4;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
.growl .growl-close {
color: inherit !important;
opacity: 0.5;
font-size: 1rem !important;
top: 0.625rem;
right: 0.625rem;
position: absolute;
}
.growl .growl-close:hover {
opacity: 1;
}
/* Dark mode toast overrides */
html.dark-mode .growl.growl-notice {
background: rgba(6, 78, 59, 0.95) !important;
color: #a7f3d0 !important;
}
html.dark-mode .growl.growl-notice .growl-title {
color: #a7f3d0 !important;
}
html.dark-mode .growl.growl-notice .growl-message {
color: #6ee7b7 !important;
}
html.dark-mode .growl.growl-warning {
background: rgba(120, 53, 15, 0.95) !important;
color: #fde68a !important;
}
html.dark-mode .growl.growl-warning .growl-title {
color: #fde68a !important;
}
html.dark-mode .growl.growl-warning .growl-message {
color: #fcd34d !important;
}
html.dark-mode .growl.growl-error {
background: rgba(127, 29, 29, 0.95) !important;
color: #fecaca !important;
}
html.dark-mode .growl.growl-error .growl-title {
color: #fecaca !important;
}
html.dark-mode .growl.growl-error .growl-message {
color: #fca5a5 !important;
}
html.dark-mode .growl.growl-default {
background: rgba(30, 58, 138, 0.95) !important;
color: #bfdbfe !important;
}
html.dark-mode .growl.growl-default .growl-title {
color: #bfdbfe !important;
}
html.dark-mode .growl.growl-default .growl-message {
color: #93c5fd !important;
}
/* ── Contract compact bar ── */
.lo-contract-bar {
display: flex;
align-items: center;
justify-content: space-between;
background: rgba(var(--lo-primary-rgb, 37,99,235), 0.08);
border: 1px solid rgba(var(--lo-primary-rgb, 37,99,235), 0.18);
border-radius: 10px;
padding: 0.45rem 0.85rem;
margin-bottom: 0.75rem;
gap: 0.5rem;
}
.lo-contract-bar-left {
display: inline-flex;
align-items: center;
gap: 0.4rem;
background: none;
border: none;
padding: 0;
color: var(--lo-primary, #2563eb);
font-size: 0.92rem;
font-weight: 600;
cursor: pointer;
white-space: nowrap;
}
.lo-contract-bar-left:hover {
opacity: 0.8;
}
.lo-contract-bar-right {
font-size: 0.82rem;
color: var(--lo-primary, #2563eb);
text-decoration: none;
white-space: nowrap;
}
.lo-contract-bar-right:hover {
text-decoration: underline;
color: var(--lo-primary, #2563eb);
}
.lo-contract-row {
padding: 0.4rem 0;
border-bottom: 1px solid rgba(0,0,0,0.06);
font-size: 0.88rem;
}
.lo-contract-row:last-child {
border-bottom: none;
}
/* Dark mode */
html.dark-mode .lo-contract-bar {
background: rgba(var(--lo-primary-rgb, 37,99,235), 0.15);
border-color: rgba(var(--lo-primary-rgb, 37,99,235), 0.25);
}
html.dark-mode .lo-contract-row {
border-bottom-color: rgba(255,255,255,0.08);
}