/* ============================================ BuffetMGR - Premium Design System v2.0 Deep Professional UI ============================================ */ @import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700;800;900&family=JetBrains+Mono:wght@400;600;700&display=swap'); :root { /* Brand Colors */ --primary: #6366F1; --primary-dark: #4F46E5; --primary-darker: #4338CA; --primary-light: #A5B4FC; --primary-50: #EEF2FF; --primary-glow: rgba(99, 102, 241, 0.25); /* Semantic Colors */ --secondary: #0F172A; --success: #10B981; --success-dark: #059669; --success-50: #ECFDF5; --warning: #F59E0B; --warning-dark: #D97706; --warning-50: #FFFBEB; --danger: #EF4444; --danger-dark: #DC2626; --danger-50: #FEF2F2; --info: #3B82F6; --info-dark: #2563EB; --info-50: #EFF6FF; /* Neutrals */ --dark: #1E293B; --light: #F8FAFC; --gray-50: #F8FAFC; --gray-100: #F1F5F9; --gray-200: #E2E8F0; --gray-300: #CBD5E1; --gray-400: #94A3B8; --gray-500: #64748B; --gray-600: #475569; --gray-700: #334155; --gray-800: #1E293B; --gray-900: #0F172A; /* Layout */ --sidebar-width: 264px; --header-height: 68px; --border-radius: 14px; --border-radius-sm: 10px; --border-radius-lg: 20px; --border-radius-xl: 24px; /* Shadows */ --shadow-xs: 0 1px 2px rgba(0, 0, 0, 0.04); --shadow-sm: 0 1px 3px rgba(0, 0, 0, 0.06), 0 1px 2px rgba(0, 0, 0, 0.04); --shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.07), 0 2px 4px -2px rgba(0, 0, 0, 0.05); --shadow-md: 0 8px 16px -4px rgba(0, 0, 0, 0.08), 0 4px 6px -2px rgba(0, 0, 0, 0.04); --shadow-lg: 0 20px 40px -8px rgba(0, 0, 0, 0.1), 0 8px 16px -4px rgba(0, 0, 0, 0.06); --shadow-xl: 0 32px 64px -12px rgba(0, 0, 0, 0.14); --shadow-primary: 0 8px 24px rgba(99, 102, 241, 0.25); --shadow-success: 0 8px 24px rgba(16, 185, 129, 0.25); --shadow-card: 0 1px 3px rgba(0,0,0,0.04), 0 1px 2px rgba(0,0,0,0.06); --shadow-card-hover: 0 12px 24px -4px rgba(0,0,0,0.08), 0 4px 8px rgba(0,0,0,0.04); /* Transitions */ --transition: all 0.1s ease; --transition-slow: all 0.15s ease; --transition-bounce: all 0.15s ease; /* Gradients */ --gradient-primary: linear-gradient(135deg, #6366F1, #8B5CF6); --gradient-dark: linear-gradient(180deg, #0F172A 0%, #1E293B 100%); --gradient-success: linear-gradient(135deg, #10B981, #34D399); --gradient-danger: linear-gradient(135deg, #EF4444, #F87171); --gradient-warm: linear-gradient(135deg, #F59E0B, #FBBF24); --gradient-cool: linear-gradient(135deg, #3B82F6, #60A5FA); --gradient-page: linear-gradient(135deg, #F1F5F9 0%, #E8EDF5 50%, #F1F5F9 100%); } /* ============================================ Reset & Base ============================================ */ *, *::before, *::after { margin: 0; padding: 0; box-sizing: border-box; } html { scroll-behavior: smooth; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; } /* Fullscreen (toggleFullscreen() in app.js) fullscreens ; if page content is shorter than the screen, the browser fills the rest of the fullscreen viewport with its default black backdrop. Match it to the page background instead, and stretch so content reaches the full height. */ :fullscreen { height: 100%; } :fullscreen::backdrop, :-webkit-full-screen::backdrop { background: var(--gradient-page); } body { /* 'Inter' has no Lao glyphs — list 'Noto Sans Lao' so the browser falls back to it per-glyph for Lao text (Latin still renders with Inter). */ font-family: 'Inter', 'Noto Sans Lao', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif; background: var(--gradient-page); background-attachment: fixed; color: var(--gray-800); overflow-x: hidden; font-size: 14px; line-height: 1.6; letter-spacing: -0.01em; } a { text-decoration: none; color: inherit; transition: var(--transition); } a:hover { color: var(--primary); } img { max-width: 100%; } ::selection { background: var(--primary-50); color: var(--primary-dark); } /* ============================================ Scrollbar ============================================ */ ::-webkit-scrollbar { width: 5px; height: 5px; } ::-webkit-scrollbar-track { background: transparent; } ::-webkit-scrollbar-thumb { background: var(--gray-300); border-radius: 10px; } ::-webkit-scrollbar-thumb:hover { background: var(--gray-400); } /* ============================================ LOGIN PAGE ============================================ */ .login-page { min-height: 100vh; display: flex; align-items: center; justify-content: center; background: #0F172A; position: relative; overflow: hidden; padding: 20px; } .login-page::before { content: ''; position: absolute; width: 600px; height: 600px; background: radial-gradient(circle, rgba(99,102,241,0.3) 0%, transparent 70%); top: -200px; right: -100px; border-radius: 50%; animation: floatOrb 8s ease-in-out infinite; } .login-page::after { content: ''; position: absolute; width: 400px; height: 400px; background: radial-gradient(circle, rgba(139,92,246,0.2) 0%, transparent 70%); bottom: -150px; left: -100px; border-radius: 50%; animation: floatOrb 10s ease-in-out infinite reverse; } .login-card { width: 100%; max-width: 440px; background: rgba(255, 255, 255, 0.95); backdrop-filter: blur(20px); border-radius: var(--border-radius-xl); padding: 48px 40px; box-shadow: var(--shadow-xl), 0 0 80px rgba(99, 102, 241, 0.08); position: relative; z-index: 1; animation: cardAppear 0.2s ease; border: 1px solid rgba(255,255,255,0.2); } .login-card .logo { text-align: center; margin-bottom: 36px; } .login-card .logo h1 { font-size: 32px; font-weight: 900; background: var(--gradient-primary); -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text; letter-spacing: -1px; line-height: 1.2; } .login-card .logo p { color: var(--gray-400); font-size: 13px; margin-top: 6px; font-weight: 500; letter-spacing: 0.5px; text-transform: uppercase; } .login-card .form-control { height: 50px; border-radius: var(--border-radius-sm); border: 2px solid var(--gray-200); padding: 0 16px; font-size: 14px; font-weight: 500; transition: var(--transition); background: var(--gray-50); } .login-card .form-control:focus { border-color: var(--primary); box-shadow: 0 0 0 4px var(--primary-glow); background: white; } .login-card .form-control::placeholder { color: var(--gray-400); font-weight: 400; } .login-card .input-group-text { border: 2px solid var(--gray-200); border-right: none; background: var(--gray-50); border-radius: var(--border-radius-sm); color: var(--gray-400); font-size: 14px; width: 48px; justify-content: center; } .login-card .btn-login { height: 52px; border-radius: var(--border-radius-sm); background: var(--gradient-primary); border: none; color: white; font-weight: 700; font-size: 15px; width: 100%; transition: var(--transition); letter-spacing: 0.3px; position: relative; overflow: hidden; } .login-card .btn-login::before { content: ''; position: absolute; top: 0; left: -100%; width: 100%; height: 100%; background: linear-gradient(90deg, transparent, rgba(255,255,255,0.15), transparent); transition: left 0.5s; } .login-card .btn-login:hover { transform: translateY(-2px); box-shadow: var(--shadow-primary); } .login-card .btn-login:hover::before { left: 100%; } .login-card .btn-login:active { transform: translateY(0); } /* ============================================ SIDEBAR ============================================ */ .sidebar { position: fixed; left: 0; top: 0; width: var(--sidebar-width); height: 100vh; background: var(--gradient-dark); z-index: 1000; transition: var(--transition-slow); display: flex; flex-direction: column; overflow: hidden; border-right: 1px solid rgba(255,255,255,0.05); } .sidebar-brand { height: var(--header-height); display: flex; align-items: center; padding: 0 24px; border-bottom: 1px solid rgba(255,255,255,0.06); flex-shrink: 0; gap: 12px; } .sidebar-brand .brand-icon { width: 38px; height: 38px; border-radius: 10px; background: var(--gradient-primary); display: flex; align-items: center; justify-content: center; color: white; font-size: 16px; box-shadow: 0 4px 12px rgba(99,102,241,0.3); flex-shrink: 0; } .sidebar-brand h2 { font-size: 19px; font-weight: 800; color: white; letter-spacing: -0.5px; } .sidebar-brand h2 span { color: var(--primary-light); } .sidebar-nav { flex: 1; overflow-y: auto; padding: 20px 0; overflow-x: hidden; } .sidebar-nav .nav-label { padding: 12px 24px 6px; font-size: 10px; font-weight: 800; text-transform: uppercase; letter-spacing: 1.5px; color: var(--gray-600); margin-top: 4px; } .sidebar-nav .nav-item { padding: 0 12px; margin-bottom: 2px; } .sidebar-nav .nav-link { display: flex; align-items: center; padding: 11px 14px; color: var(--gray-400); border-radius: var(--border-radius-sm); transition: var(--transition); font-weight: 500; font-size: 13.5px; gap: 12px; position: relative; } .sidebar-nav .nav-link i { width: 20px; text-align: center; font-size: 15px; flex-shrink: 0; transition: var(--transition); } .sidebar-nav .nav-link:hover { color: white; background: rgba(255,255,255,0.06); transform: translateX(2px); } .sidebar-nav .nav-link:hover i { color: var(--primary-light); } .sidebar-nav .nav-link.active { color: white; background: var(--gradient-primary); box-shadow: var(--shadow-primary); font-weight: 600; } .sidebar-nav .nav-link.active i { color: white; } .sidebar-nav .nav-link .badge { margin-left: auto; font-size: 10px; padding: 3px 8px; border-radius: 20px; font-weight: 700; letter-spacing: 0.3px; } .sidebar-footer { padding: 16px; border-top: 1px solid rgba(255,255,255,0.06); flex-shrink: 0; } .sidebar-footer .user-info { display: flex; align-items: center; gap: 12px; padding: 10px 12px; border-radius: var(--border-radius-sm); transition: var(--transition); } .sidebar-footer .user-info:hover { background: rgba(255,255,255,0.06); } .sidebar-footer .user-avatar { width: 38px; height: 38px; border-radius: 10px; background: var(--gradient-primary); display: flex; align-items: center; justify-content: center; color: white; font-weight: 800; font-size: 14px; flex-shrink: 0; box-shadow: 0 2px 8px rgba(99,102,241,0.3); } .sidebar-footer .user-name { color: white; font-weight: 600; font-size: 13px; } .sidebar-footer .user-role { color: var(--gray-500); font-size: 11px; text-transform: capitalize; } /* ============================================ MAIN CONTENT AREA ============================================ */ .main-content { margin-left: var(--sidebar-width); min-height: 100vh; transition: var(--transition-slow); } .top-header { height: var(--header-height); background: rgba(255, 255, 255, 0.85); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); border-bottom: 1px solid rgba(226, 232, 240, 0.8); display: flex; align-items: center; justify-content: space-between; padding: 0 28px; position: sticky; top: 0; z-index: 100; } .top-header .page-title { font-size: 20px; font-weight: 800; color: var(--gray-900); letter-spacing: -0.3px; } .top-header .header-actions { display: flex; align-items: center; gap: 10px; } .top-header .btn-icon { width: 40px; height: 40px; border-radius: var(--border-radius-sm); border: 1.5px solid var(--gray-200); background: white; display: flex; align-items: center; justify-content: center; color: var(--gray-500); cursor: pointer; transition: var(--transition); position: relative; font-size: 14px; } .top-header .btn-icon:hover { background: var(--primary-50); color: var(--primary); border-color: var(--primary-light); transform: translateY(-1px); } .top-header .btn-icon .notification-dot { position: absolute; top: 7px; right: 7px; width: 9px; height: 9px; background: var(--danger); border-radius: 50%; border: 2px solid white; animation: pulse 2s infinite; } .menu-toggle { display: none; background: none; border: none; font-size: 20px; color: var(--gray-700); cursor: pointer; padding: 8px; border-radius: 8px; transition: var(--transition); } .menu-toggle:hover { background: var(--gray-100); } .page-content { padding: 28px; animation: pageEnter 0.15s ease; } /* ============================================ CARDS - Premium Design ============================================ */ .card { background: white; border: 1px solid rgba(226, 232, 240, 0.8); border-radius: var(--border-radius); box-shadow: var(--shadow-card); transition: var(--transition); overflow: visible; } .card:hover { box-shadow: var(--shadow-card-hover); } .card-header { padding: 18px 24px; border-bottom: 1px solid var(--gray-100); display: flex; align-items: center; justify-content: space-between; background: linear-gradient(to bottom, rgba(248,250,252,0.8), transparent); } .card-header h5 { font-weight: 800; font-size: 15px; color: var(--gray-800); margin: 0; letter-spacing: -0.2px; display: flex; align-items: center; } .card-body { padding: 24px; } /* ============================================ STAT CARDS - Premium Gradient Design ============================================ */ .stat-card { background: white; border: 1px solid rgba(226, 232, 240, 0.6); border-radius: var(--border-radius); padding: 24px; transition: var(--transition-bounce); position: relative; overflow: hidden; } .stat-card::after { content: ''; position: absolute; top: -50%; right: -30%; width: 140px; height: 140px; border-radius: 50%; opacity: 0.06; transition: var(--transition-slow); } .stat-card:hover { transform: translateY(-4px); box-shadow: var(--shadow-md); } .stat-card:hover::after { opacity: 0.1; transform: scale(1.2); } .stat-card .stat-icon { width: 52px; height: 52px; border-radius: 14px; display: flex; align-items: center; justify-content: center; font-size: 20px; margin-bottom: 18px; position: relative; z-index: 1; } .stat-card .stat-icon.bg-primary { background: var(--primary-50); color: var(--primary); } .stat-card .stat-icon.bg-success { background: var(--success-50); color: var(--success); } .stat-card .stat-icon.bg-warning { background: var(--warning-50); color: var(--warning); } .stat-card .stat-icon.bg-danger { background: var(--danger-50); color: var(--danger); } .stat-card .stat-icon.bg-info { background: var(--info-50); color: var(--info); } .stat-card:has(.bg-primary)::after { background: var(--primary); } .stat-card:has(.bg-success)::after { background: var(--success); } .stat-card:has(.bg-warning)::after { background: var(--warning); } .stat-card:has(.bg-danger)::after { background: var(--danger); } .stat-card:has(.bg-info)::after { background: var(--info); } .stat-card .stat-value { font-size: 30px; font-weight: 900; color: var(--gray-900); line-height: 1; margin-bottom: 6px; letter-spacing: -0.5px; } .stat-card .stat-label { font-size: 13px; color: var(--gray-500); font-weight: 500; } .stat-card .stat-change { display: inline-flex; align-items: center; gap: 4px; font-size: 12px; font-weight: 700; margin-top: 10px; padding: 3px 10px; border-radius: 20px; } .stat-change.positive { background: var(--success-50); color: var(--success-dark); } .stat-change.negative { background: var(--danger-50); color: var(--danger-dark); } /* ============================================ DATA TABLES - Clean Professional ============================================ */ .table-modern { width: 100%; border-collapse: separate; border-spacing: 0; } .table-modern thead th { background: var(--gray-50); padding: 14px 18px; font-size: 11px; font-weight: 800; text-transform: uppercase; letter-spacing: 0.8px; color: var(--gray-400); border-bottom: 2px solid var(--gray-100); white-space: nowrap; position: sticky; top: 0; } .table-modern thead th:first-child { border-radius: 0; } .table-modern thead th:last-child { border-radius: 0; } .table-modern tbody td { padding: 14px 18px; border-bottom: 1px solid var(--gray-100); vertical-align: middle; font-size: 13.5px; color: var(--gray-700); } .table-modern tbody tr { transition: var(--transition); } .table-modern tbody tr:hover { background: linear-gradient(90deg, var(--primary-50), transparent); } .table-modern tbody tr:last-child td { border-bottom: none; } /* ============================================ BUTTONS - Refined System ============================================ */ .btn { font-weight: 600; border-radius: var(--border-radius-sm); padding: 9px 18px; font-size: 13px; transition: var(--transition); display: inline-flex; align-items: center; gap: 7px; border: none; cursor: pointer; letter-spacing: 0.1px; position: relative; overflow: hidden; white-space: nowrap; } .btn::after { content: ''; position: absolute; top: 50%; left: 50%; width: 0; height: 0; border-radius: 50%; background: rgba(255,255,255,0.15); transition: width 0.4s, height 0.4s, top 0.4s, left 0.4s; } .btn:active::after { width: 200px; height: 200px; top: calc(50% - 100px); left: calc(50% - 100px); } .btn-primary { background: var(--gradient-primary); color: white; } .btn-primary:hover { color: white; transform: translateY(-1px); box-shadow: var(--shadow-primary); } .btn-success { background: var(--gradient-success); color: white; } .btn-success:hover { color: white; transform: translateY(-1px); box-shadow: var(--shadow-success); } .btn-warning { background: var(--gradient-warm); color: white; } .btn-warning:hover { color: white; transform: translateY(-1px); } .btn-danger { background: var(--gradient-danger); color: white; } .btn-danger:hover { color: white; transform: translateY(-1px); } .btn-outline-primary { background: transparent; color: var(--primary); border: 2px solid var(--primary); padding: 7px 16px; } .btn-outline-primary:hover { background: var(--primary); color: white; transform: translateY(-1px); box-shadow: var(--shadow-primary); } .btn-light { background: white; color: var(--gray-700); border: 1.5px solid var(--gray-200); padding: 7px 16px; } .btn-light:hover { background: var(--gray-50); color: var(--gray-800); border-color: var(--gray-300); transform: translateY(-1px); } .btn-sm { padding: 6px 14px; font-size: 12px; border-radius: 8px; } .btn-lg { padding: 14px 28px; font-size: 15px; border-radius: var(--border-radius); font-weight: 700; } .btn-icon-sm { width: 34px; height: 34px; border-radius: 9px; display: inline-flex; align-items: center; justify-content: center; border: 1.5px solid var(--gray-200); background: white; cursor: pointer; transition: var(--transition); padding: 0; font-size: 13px; color: var(--gray-500); } .btn-icon-sm:hover { border-color: var(--gray-300); background: var(--gray-50); transform: translateY(-1px); } /* ============================================ BADGES & STATUS ============================================ */ .badge-status { padding: 5px 12px; border-radius: 20px; font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.4px; display: inline-flex; align-items: center; gap: 5px; } .badge-status::before { content: ''; width: 7px; height: 7px; border-radius: 50%; flex-shrink: 0; } .badge-active, .badge-available, .badge-paid { background: var(--success-50); color: var(--success-dark); } .badge-active::before, .badge-available::before, .badge-paid::before { background: var(--success); box-shadow: 0 0 6px var(--success); } .badge-inactive, .badge-cancelled { background: var(--gray-100); color: var(--gray-500); } .badge-inactive::before, .badge-cancelled::before { background: var(--gray-400); } .badge-occupied, .badge-pending { background: var(--warning-50); color: var(--warning-dark); } .badge-occupied::before, .badge-pending::before { background: var(--warning); box-shadow: 0 0 6px var(--warning); } .badge-reserved { background: var(--info-50); color: var(--info-dark); } .badge-reserved::before { background: var(--info); } .badge-maintenance { background: var(--danger-50); color: var(--danger-dark); } .badge-maintenance::before { background: var(--danger); } .badge-completed { background: var(--primary-50); color: var(--primary-dark); } .badge-completed::before { background: var(--primary); } /* ============================================ FORMS - Premium Inputs ============================================ */ .form-label { font-weight: 600; font-size: 12.5px; color: var(--gray-600); margin-bottom: 6px; letter-spacing: 0.2px; text-transform: uppercase; } .form-control, .form-select { height: 44px; border-radius: var(--border-radius-sm); border: 2px solid var(--gray-200); padding: 0 14px; font-size: 13.5px; font-weight: 500; transition: var(--transition); color: var(--gray-800); background: white; } .form-control:focus, .form-select:focus { border-color: var(--primary); box-shadow: 0 0 0 4px var(--primary-glow); outline: none; } .form-control::placeholder { color: var(--gray-400); font-weight: 400; } textarea.form-control { height: auto; padding: 12px 14px; line-height: 1.5; } .form-check-input { width: 18px; height: 18px; border: 2px solid var(--gray-300); border-radius: 5px; cursor: pointer; transition: var(--transition); } .form-check-input:checked { background-color: var(--primary); border-color: var(--primary); box-shadow: 0 2px 4px rgba(99,102,241,0.3); } .form-check-input:focus { box-shadow: 0 0 0 3px var(--primary-glow); } .form-switch .form-check-input { width: 40px; height: 22px; border-radius: 12px; } .input-group-text { border-radius: var(--border-radius-sm); border: 2px solid var(--gray-200); background: var(--gray-50); font-size: 13px; color: var(--gray-400); font-weight: 500; } .form-control-color { padding: 4px; height: 44px; } /* ============================================ MODALS - Polished Popups ============================================ */ /* Speed up Bootstrap modal */ .modal.fade .modal-dialog { transition: transform 0.1s ease !important; } .modal.fade { transition: opacity 0.1s ease !important; } .modal-backdrop { transition: opacity 0.1s ease !important; } .modal-backdrop.show { opacity: 0.4; } /* Speed up Bootstrap collapse */ .collapsing { transition: height 0.1s ease !important; } .modal-content { border: none; border-radius: var(--border-radius-lg); box-shadow: var(--shadow-xl); overflow: hidden; } .modal-header { padding: 24px 28px 20px; border-bottom: 1px solid var(--gray-100); background: linear-gradient(to bottom, var(--gray-50), white); } .modal-header .modal-title { font-weight: 800; font-size: 17px; color: var(--gray-900); letter-spacing: -0.2px; } .modal-header .btn-close { opacity: 0.4; transition: var(--transition); } .modal-header .btn-close:hover { opacity: 1; transform: rotate(90deg); } .modal-body { padding: 28px; } .modal-footer { padding: 18px 28px; border-top: 1px solid var(--gray-100); background: var(--gray-50); } /* ============================================ ALERTS - Modern Notifications ============================================ */ .alert-modern { border: none; border-radius: var(--border-radius-sm); padding: 14px 20px; font-size: 13.5px; font-weight: 500; display: flex; align-items: center; gap: 12px; margin-bottom: 20px; animation: slideDown 0.12s ease; position: relative; overflow: hidden; } .alert-modern::before { content: ''; position: absolute; left: 0; top: 0; bottom: 0; width: 4px; border-radius: 0 4px 4px 0; } .alert-modern i { font-size: 16px; flex-shrink: 0; } .alert-modern.alert-success { background: var(--success-50); color: #065F46; } .alert-modern.alert-success::before { background: var(--success); } .alert-modern.alert-danger { background: var(--danger-50); color: #991B1B; } .alert-modern.alert-danger::before { background: var(--danger); } .alert-modern.alert-warning { background: var(--warning-50); color: #92400E; } .alert-modern.alert-warning::before { background: var(--warning); } .alert-modern.alert-info { background: var(--info-50); color: #1E40AF; } .alert-modern.alert-info::before { background: var(--info); } /* ============================================ TABLE GRID (Floor Plan) ============================================ */ .table-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(170px, 1fr)); gap: 16px; } .table-tile { background: white; border: 2px solid var(--gray-200); border-radius: var(--border-radius); padding: 20px 16px; text-align: center; cursor: pointer; transition: var(--transition-bounce); position: relative; overflow: hidden; } .table-tile::before { content: ''; position: absolute; top: 0; left: 0; right: 0; height: 3px; border-radius: 0 0 4px 4px; transition: var(--transition); } .table-tile:hover { transform: translateY(-4px) scale(1.02); box-shadow: var(--shadow-md); } .table-tile.available { border-color: rgba(16,185,129,0.4); } .table-tile.available::before { background: var(--gradient-success); } .table-tile.occupied { border-color: rgba(245,158,11,0.4); background: var(--warning-50); } .table-tile.occupied::before { background: var(--gradient-warm); } .table-tile.reserved { border-color: rgba(59,130,246,0.4); background: var(--info-50); } .table-tile.reserved::before { background: var(--gradient-cool); } .table-tile.maintenance { border-color: rgba(239,68,68,0.3); background: var(--danger-50); opacity: 0.7; } .table-tile.maintenance::before { background: var(--gradient-danger); } .table-tile .table-number { font-size: 24px; font-weight: 900; color: var(--gray-800); letter-spacing: -0.5px; } .table-tile .table-capacity { font-size: 12px; color: var(--gray-500); margin-top: 4px; font-weight: 500; } .table-tile .table-timer { font-size: 11px; font-weight: 700; margin-top: 10px; padding: 4px 10px; border-radius: 20px; background: var(--warning-50); color: var(--warning-dark); display: inline-block; } .table-tile .table-timer.overtime { background: var(--danger-50); color: var(--danger-dark); animation: pulse 1.5s infinite; } /* ============================================ PACKAGE CARDS - Premium Design ============================================ */ .package-card { background: white; border: 1px solid var(--gray-200); border-radius: var(--border-radius-lg); padding: 28px 24px; text-align: center; transition: var(--transition-bounce); position: relative; overflow: hidden; } .package-card::before { content: ''; position: absolute; top: 0; left: 0; right: 0; height: 5px; } .package-card::after { content: ''; position: absolute; top: -60%; right: -30%; width: 200px; height: 200px; border-radius: 50%; opacity: 0.04; transition: var(--transition-slow); } .package-card:hover { transform: translateY(-6px); box-shadow: var(--shadow-lg); } .package-card:hover::after { opacity: 0.08; transform: scale(1.3); } .package-card .package-name { font-size: 19px; font-weight: 800; margin-bottom: 8px; color: var(--gray-900); letter-spacing: -0.3px; } .package-card .package-price { font-size: 36px; font-weight: 900; background: var(--gradient-primary); -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text; line-height: 1; } .package-card .package-price small { font-size: 14px; font-weight: 500; -webkit-text-fill-color: var(--gray-400); } /* ============================================ PAGINATION ============================================ */ .pagination-modern { display: flex; align-items: center; gap: 4px; } .pagination-modern .page-link { width: 38px; height: 38px; border-radius: var(--border-radius-sm); display: flex; align-items: center; justify-content: center; border: 1.5px solid var(--gray-200); color: var(--gray-600); font-weight: 600; font-size: 13px; transition: var(--transition); background: white; } .pagination-modern .page-link:hover { border-color: var(--primary); color: var(--primary); transform: translateY(-1px); } .pagination-modern .page-item.active .page-link { background: var(--gradient-primary); border-color: transparent; color: white; box-shadow: var(--shadow-primary); } /* ============================================ SEARCH & FILTERS ============================================ */ .search-box { position: relative; } .search-box input { padding-left: 42px; height: 44px; border-radius: var(--border-radius-sm); border: 2px solid var(--gray-200); font-weight: 500; background: white; } .search-box input:focus { border-color: var(--primary); } .search-box .search-icon { position: absolute; left: 15px; top: 50%; transform: translateY(-50%); color: var(--gray-400); font-size: 14px; transition: var(--transition); } .search-box input:focus + .search-icon, .search-box:focus-within .search-icon { color: var(--primary); } .filter-tabs { display: flex; gap: 3px; background: var(--gray-100); padding: 4px; border-radius: var(--border-radius-sm); border: 1px solid var(--gray-200); } .filter-tabs .filter-tab { padding: 8px 18px; border-radius: 8px; font-size: 13px; font-weight: 600; color: var(--gray-500); cursor: pointer; transition: var(--transition); border: none; background: transparent; white-space: nowrap; } .filter-tabs .filter-tab.active { background: white; color: var(--gray-800); box-shadow: var(--shadow-sm); } .filter-tabs .filter-tab:hover:not(.active) { color: var(--gray-700); } /* ============================================ EMPTY STATE ============================================ */ .empty-state { text-align: center; padding: 60px 20px; color: var(--gray-400); } .empty-state i { font-size: 56px; margin-bottom: 20px; opacity: 0.3; } .empty-state h5 { color: var(--gray-600); font-weight: 700; margin-bottom: 8px; font-size: 16px; } .empty-state p { font-size: 14px; max-width: 360px; margin: 0 auto; } /* ============================================ DROPDOWN MENUS ============================================ */ .dropdown-menu { border: 1px solid var(--gray-200); border-radius: var(--border-radius-sm); box-shadow: var(--shadow-lg); padding: 6px; min-width: 160px; animation: dropdownAppear 0.08s ease; } .dropdown-item { padding: 9px 14px; border-radius: 7px; font-size: 13px; font-weight: 500; transition: var(--transition); display: flex; align-items: center; } .dropdown-item:hover { background: var(--gray-50); color: var(--gray-900); } .dropdown-item.text-danger:hover { background: var(--danger-50); } /* ============================================ ANIMATIONS ============================================ */ @keyframes slideDown { from { opacity: 0; transform: translateY(-12px); } to { opacity: 1; transform: translateY(0); } } @keyframes pulse { 0%, 100% { opacity: 1; } 50% { opacity: 0.4; } } @keyframes fadeIn { from { opacity: 0; } to { opacity: 1; } } @keyframes cardAppear { from { opacity: 0; transform: translateY(30px) scale(0.96); } to { opacity: 1; transform: translateY(0) scale(1); } } @keyframes pageEnter { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: translateY(0); } } @keyframes floatOrb { 0%, 100% { transform: translate(0, 0); } 25% { transform: translate(20px, -30px); } 50% { transform: translate(-10px, 20px); } 75% { transform: translate(15px, 10px); } } @keyframes dropdownAppear { from { opacity: 0; transform: translateY(-8px) scale(0.96); } to { opacity: 1; transform: translateY(0) scale(1); } } @keyframes shimmer { 0% { background-position: -200% 0; } 100% { background-position: 200% 0; } } .fade-in { animation: fadeIn 0.1s ease; } /* Stagger children animation */ .stagger-in > * { animation: slideDown 0.1s ease backwards; } .stagger-in > *:nth-child(1) { animation-delay: 0s; } .stagger-in > *:nth-child(2) { animation-delay: 0.05s; } .stagger-in > *:nth-child(3) { animation-delay: 0.1s; } .stagger-in > *:nth-child(4) { animation-delay: 0.15s; } .stagger-in > *:nth-child(5) { animation-delay: 0.2s; } .stagger-in > *:nth-child(6) { animation-delay: 0.25s; } /* ============================================ RECEIPT / PRINT ============================================ */ @media print { .sidebar, .top-header, .no-print { display: none !important; } .main-content { margin: 0 !important; } .page-content { padding: 0 !important; } .card { box-shadow: none !important; border: 1px solid #ddd !important; } body { background: white !important; } } /* ============================================ RESPONSIVE ============================================ */ @media (max-width: 1024px) { .sidebar { transform: translateX(-100%); } .sidebar.show { transform: translateX(0); box-shadow: var(--shadow-xl); } .main-content { margin-left: 0; } .menu-toggle { display: block; } .sidebar-overlay { display: none; position: fixed; inset: 0; background: rgba(0,0,0,0.5); backdrop-filter: blur(4px); z-index: 999; } .sidebar-overlay.show { display: block; animation: fadeIn 0.2s ease; } } @media (max-width: 768px) { .page-content { padding: 16px; } .stat-card .stat-value { font-size: 24px; } .stat-card { padding: 18px; } .table-grid { grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); gap: 12px; } .top-header { padding: 0 16px; } .top-header .page-title { font-size: 16px; } .card-body { padding: 18px; } .card-header { padding: 14px 18px; } .modal-body { padding: 20px; } } @media (max-width: 576px) { .table-grid { grid-template-columns: repeat(2, 1fr); } .d-sm-none { display: none !important; } .btn-lg { padding: 12px 20px; font-size: 14px; } .filter-tabs { overflow-x: auto; flex-wrap: nowrap; } /* A flex wrapper around .filter-tabs (e.g. paired with a "back" button) won't let the tabs shrink/scroll unless it can shrink itself first. */ div:has(> .filter-tabs) { min-width: 0; } } /* ============================================ UTILITY CLASSES ============================================ */ .text-primary { color: var(--primary) !important; } .text-success { color: var(--success) !important; } .text-warning { color: var(--warning) !important; } .text-danger { color: var(--danger) !important; } .text-info { color: var(--info) !important; } .text-muted { color: var(--gray-500) !important; } .fw-800 { font-weight: 800 !important; } .fw-900 { font-weight: 900 !important; } .rounded-xl { border-radius: var(--border-radius) !important; } .gap-2 { gap: 8px; } .gap-3 { gap: 16px; } .timer-display { font-family: 'JetBrains Mono', 'Fira Code', monospace; font-size: 14px; font-weight: 700; letter-spacing: 0.5px; } /* Gradient text utility */ .text-gradient { background: var(--gradient-primary); -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text; } /* Glass card variant */ .card-glass { background: rgba(255,255,255,0.7); backdrop-filter: blur(12px); border: 1px solid rgba(255,255,255,0.3); } /* Divider */ .divider { height: 1px; background: linear-gradient(90deg, transparent, var(--gray-200), transparent); margin: 16px 0; } /* Loading skeleton */ .skeleton { background: linear-gradient(90deg, var(--gray-100) 25%, var(--gray-200) 50%, var(--gray-100) 75%); background-size: 400% 100%; animation: shimmer 1.5s infinite; border-radius: 8px; } /* Hover lift effect */ .hover-lift { transition: var(--transition); } .hover-lift:hover { transform: translateY(-3px); box-shadow: var(--shadow-md); } /* Tooltip style for badges */ code { background: var(--gray-100); padding: 2px 8px; border-radius: 6px; font-family: 'JetBrains Mono', monospace; font-size: 12px; color: var(--primary-dark); font-weight: 600; border: 1px solid var(--gray-200); } /* ============================================ DRAG & DROP UPLOAD ZONE ============================================ */ .drop-zone { border: 2px dashed var(--gray-300); border-radius: var(--border-radius); padding: 28px 20px; text-align: center; cursor: pointer; transition: var(--transition); background: var(--gray-50); position: relative; } .drop-zone:hover { border-color: var(--primary-light); background: var(--primary-50); } .drop-zone.drag-over { border-color: var(--primary); background: var(--primary-50); box-shadow: 0 0 0 4px var(--primary-glow); transform: scale(1.01); } .drop-zone.has-preview { border-color: var(--success); background: var(--success-50); } .drop-zone .drop-icon { font-size: 28px; color: var(--gray-400); margin-bottom: 10px; display: block; transition: var(--transition); } .drop-zone:hover .drop-icon { color: var(--primary); transform: translateY(-2px); } .drop-zone.drag-over .drop-icon { color: var(--primary); transform: scale(1.15); } .drop-zone .drop-label { font-size: 13px; color: var(--gray-500); font-weight: 500; display: block; } .drop-zone .drop-hint { font-size: 11px; color: var(--gray-400); margin-top: 4px; display: block; } .drop-zone .drop-preview { max-width: 120px; max-height: 120px; border-radius: 10px; object-fit: cover; margin-top: 10px; display: none; border: 2px solid white; box-shadow: var(--shadow-sm); } /* ============================================ SETTINGS PAGE - Logo Preview ============================================ */ .logo-preview-container { width: 120px; height: 120px; border-radius: var(--border-radius); border: 2px dashed var(--gray-300); display: flex; align-items: center; justify-content: center; overflow: hidden; background: var(--gray-50); transition: var(--transition); } .logo-preview-container:hover { border-color: var(--primary-light); } .logo-preview-container img { max-width: 100%; max-height: 100%; object-fit: contain; } /* Settings section cards */ .settings-section { background: white; border: 1px solid var(--gray-200); border-radius: var(--border-radius); overflow: hidden; margin-bottom: 20px; } .settings-section-header { padding: 16px 24px; background: linear-gradient(to bottom, var(--gray-50), white); border-bottom: 1px solid var(--gray-100); display: flex; align-items: center; gap: 10px; } .settings-section-header h6 { font-weight: 800; font-size: 14px; margin: 0; color: var(--gray-800); } .settings-section-header i { font-size: 16px; width: 20px; text-align: center; } .settings-section-body { padding: 20px 24px; } /* ============================================ PREMIUM MODAL FORMS ============================================ */ .modal-content { border: none; border-radius: var(--border-radius-lg); box-shadow: var(--shadow-xl); overflow: hidden; animation: cardAppear 0.12s ease; } .modal-header { padding: 24px 28px 18px; border-bottom: 2px solid var(--gray-100); background: linear-gradient(to bottom, var(--gray-50), white); } .modal-header .modal-title { font-weight: 800; font-size: 18px; color: var(--gray-900); letter-spacing: -0.3px; display: flex; align-items: center; gap: 10px; } .modal-header .modal-title i { width: 36px; height: 36px; border-radius: 10px; display: flex; align-items: center; justify-content: center; font-size: 15px; } .modal-header .btn-close { opacity: 0.3; transition: var(--transition); width: 32px; height: 32px; border-radius: 8px; } .modal-header .btn-close:hover { opacity: 1; background: var(--gray-100); } .modal-body { padding: 28px; } .modal-body .form-section { margin-bottom: 20px; padding: 18px; background: var(--gray-50); border-radius: var(--border-radius-sm); border: 1.5px solid var(--gray-100); } .modal-body .form-section:last-child { margin-bottom: 0; } .modal-body .form-section-title { font-size: 11px; font-weight: 800; text-transform: uppercase; letter-spacing: 1.2px; color: var(--gray-400); margin-bottom: 14px; padding-bottom: 10px; border-bottom: 1.5px solid var(--gray-200); display: flex; align-items: center; gap: 8px; } .modal-body .form-section-title i { font-size: 13px; width: 18px; text-align: center; } /* Inputs inside form-section have white bg */ .modal-body .form-section .form-control, .modal-body .form-section .form-select { background: white; } .modal-body .form-section .form-control:focus, .modal-body .form-section .form-select:focus { background: white; } .modal-footer { padding: 18px 28px; border-top: 2px solid var(--gray-100); background: var(--gray-50); gap: 8px; } .modal-footer .btn { min-width: 120px; justify-content: center; } /* Form field groups in modals */ .modal .form-label { font-weight: 700; font-size: 11.5px; color: var(--gray-500); margin-bottom: 6px; text-transform: uppercase; letter-spacing: 0.5px; display: flex; align-items: center; gap: 4px; } .modal .form-control, .modal .form-select { height: 44px; border: 2px solid var(--gray-200); border-radius: var(--border-radius-sm); font-size: 14px; font-weight: 500; transition: var(--transition); background: white; color: var(--gray-800); } .modal .form-control::placeholder { color: var(--gray-400); font-weight: 400; font-size: 13px; } .modal .form-control:hover, .modal .form-select:hover { border-color: var(--gray-300); } .modal .form-control:focus, .modal .form-select:focus { border-color: var(--primary); box-shadow: 0 0 0 4px var(--primary-glow); background: white; } .modal textarea.form-control { height: auto; min-height: 70px; line-height: 1.5; resize: vertical; } .modal .input-group .form-control { border-left: none; } .modal .input-group .input-group-text { border: 2px solid var(--gray-200); border-right: none; background: var(--gray-50); color: var(--gray-500); font-weight: 600; font-size: 13px; min-width: 44px; justify-content: center; } .modal .input-group:focus-within .input-group-text { border-color: var(--primary); } .modal .row.g-3 > [class*="col-"] { margin-bottom: 4px; } /* Toggle switches in modals */ .modal .form-check { padding: 10px 14px; background: var(--gray-50); border-radius: 8px; border: 1.5px solid var(--gray-200); transition: var(--transition); cursor: pointer; } .modal .form-check:hover { background: var(--gray-100); border-color: var(--gray-300); } .modal .form-check:has(.form-check-input:checked) { background: var(--primary-50); border-color: var(--primary-light); } .modal .form-check-label { font-size: 13px; font-weight: 600; color: var(--gray-700); cursor: pointer; } /* Color picker in modals */ .modal .form-control-color { width: 100%; height: 44px; padding: 4px; border: 2px solid var(--gray-200); border-radius: var(--border-radius-sm); cursor: pointer; } /* Inline image preview in modals */ .modal .img-preview-wrapper { width: 80px; height: 80px; border-radius: 12px; overflow: hidden; border: 2px solid var(--gray-200); background: var(--gray-50); display: flex; align-items: center; justify-content: center; } .modal .img-preview-wrapper img { width: 100%; height: 100%; object-fit: cover; } .modal .img-preview-wrapper i { font-size: 24px; color: var(--gray-300); } /* ============================================ INLINE QUICK-ADD (inside modals) ============================================ */ .inline-add-wrapper { position: relative; } .inline-add-wrapper .form-select { padding-right: 70px; } .inline-add-btn { position: absolute; right: 2px; top: 50%; transform: translateY(-50%); background: var(--gradient-primary); color: white; border: none; border-radius: 7px; padding: 4px 10px; font-size: 11px; font-weight: 700; cursor: pointer; transition: var(--transition); z-index: 2; height: 34px; display: flex; align-items: center; gap: 4px; } .inline-add-btn:hover { box-shadow: var(--shadow-primary); transform: translateY(-50%) scale(1.02); } .inline-add-panel { display: none; background: var(--gray-50); border: 2px solid var(--primary-light); border-radius: var(--border-radius-sm); padding: 14px; margin-top: 8px; animation: slideDown 0.25s ease; } .inline-add-panel.show { display: block; } .inline-add-panel .inline-add-header { display: flex; justify-content: space-between; align-items: center; margin-bottom: 10px; } .inline-add-panel .inline-add-header span { font-size: 12px; font-weight: 700; color: var(--primary); text-transform: uppercase; letter-spacing: 0.5px; } .inline-add-panel .inline-add-close { width: 24px; height: 24px; border: none; background: var(--gray-200); border-radius: 6px; cursor: pointer; display: flex; align-items: center; justify-content: center; font-size: 11px; color: var(--gray-500); transition: var(--transition); } .inline-add-panel .inline-add-close:hover { background: var(--danger-50); color: var(--danger); } .inline-add-panel .form-control { height: 38px; font-size: 13px; } .inline-add-panel .btn-save-inline { background: var(--gradient-primary); color: white; border: none; border-radius: 8px; padding: 6px 16px; font-size: 12px; font-weight: 700; cursor: pointer; transition: var(--transition); } .inline-add-panel .btn-save-inline:hover { box-shadow: var(--shadow-primary); } /* ============================================ IMPROVED DATEPICKER ============================================ */ input[type="date"], input[type="datetime-local"], input[type="time"] { position: relative; font-weight: 600; color: var(--gray-800); background: white; cursor: pointer; } input[type="date"]::-webkit-calendar-picker-indicator, input[type="datetime-local"]::-webkit-calendar-picker-indicator, input[type="time"]::-webkit-calendar-picker-indicator { cursor: pointer; border-radius: 4px; padding: 4px; opacity: 0.6; transition: var(--transition); } input[type="date"]::-webkit-calendar-picker-indicator:hover, input[type="datetime-local"]::-webkit-calendar-picker-indicator:hover, input[type="time"]::-webkit-calendar-picker-indicator:hover { opacity: 1; background: var(--primary-50); } input[type="date"]:focus, input[type="datetime-local"]:focus, input[type="time"]:focus { border-color: var(--primary); box-shadow: 0 0 0 4px var(--primary-glow); } /* ============================================ CRUD MODAL OVERLAY ============================================ */ .crud-modal-overlay .modal-content { animation: cardAppear 0.12s ease; } .crud-modal-overlay .table-modern input.form-control-sm { border: 1.5px solid var(--gray-200); border-radius: 6px; transition: var(--transition); } .crud-modal-overlay .table-modern input.form-control-sm:focus { border-color: var(--primary); box-shadow: 0 0 0 2px var(--primary-glow); } .crud-modal-overlay .modal-body, .crud-modal-overlay .modal-body input { font-family: 'Noto Sans Lao', 'Inter', sans-serif; } /* ============================================ EXTRA ORDER MENU CARDS ============================================ */ .extra-menu-card:hover { border-color: var(--primary) !important; background: var(--primary-50) !important; transform: translateY(-2px); box-shadow: 0 4px 12px rgba(99, 102, 241, 0.15); } .extra-menu-card:hover .extra-add-icon { opacity: 1 !important; } .extra-menu-card:active { transform: scale(0.97); }