/* ========================================================================== QrDal Pro — "Linear-Style" Sharp & Professional Design System Overrides Bootstrap 5 defaults for a high-end SaaS aesthetic. ========================================================================== */ /* ── Google Fonts are loaded in layout ── */ /* ── 1. Design Tokens ─────────────────────────────────────────────────────── */ :root { /* Geometry */ --qr-radius: 6px; --qr-radius-sm: 4px; /* Surfaces */ --qr-bg: #F9FAFB; --qr-surface: #FFFFFF; --qr-sidebar: #111827; --qr-sidebar-hover: #1F2937; --qr-sidebar-text: #9CA3AF; --qr-sidebar-text-active: #FFFFFF; /* Borders */ --qr-border: #E5E7EB; --qr-border-strong: #D1D5DB; /* Text */ --qr-text: #1F2937; --qr-text-secondary: #6B7280; --qr-text-tertiary: #9CA3AF; /* Accents */ --qr-accent: #2563EB; --qr-accent-hover: #1D4ED8; --qr-accent-light: #EFF6FF; --qr-accent-orange: #F97316; --qr-accent-orange-light: #FFF7ED; /* Semantic */ --qr-success: #059669; --qr-success-light: #ECFDF5; --qr-danger: #DC2626; --qr-danger-light: #FEF2F2; --qr-warning: #D97706; --qr-warning-light: #FFFBEB; --qr-info: #0891B2; --qr-info-light: #ECFEFF; /* Spacing */ --qr-sidebar-width: 260px; --qr-header-height: 56px; /* Shadows (very subtle) */ --qr-shadow-xs: 0 1px 2px rgba(0, 0, 0, 0.04); --qr-shadow-sm: 0 1px 3px rgba(0, 0, 0, 0.06); /* Transitions */ --qr-transition: 150ms cubic-bezier(0.4, 0, 0.2, 1); } /* ── 2. Base / Typography ─────────────────────────────────────────────────── */ body { font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif; background-color: var(--qr-bg) !important; color: var(--qr-text); -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; font-size: 0.875rem; line-height: 1.5; letter-spacing: -0.011em; } h1, h2, h3, h4, h5, h6, .h1, .h2, .h3, .h4, .h5, .h6 { font-weight: 600; letter-spacing: -0.025em; color: var(--qr-text); } .text-muted { color: var(--qr-text-secondary) !important; } small, .small { font-size: 0.8125rem; } code { font-family: 'JetBrains Mono', 'Fira Code', monospace; font-size: 0.8125rem; background: var(--qr-bg); padding: 2px 6px; border-radius: var(--qr-radius-sm); color: var(--qr-text); } /* Monospace utility for stats / prices */ .mono, .stat-value { font-family: 'JetBrains Mono', 'Fira Code', monospace; font-variant-numeric: tabular-nums; letter-spacing: -0.02em; } /* ── 3. Sidebar ───────────────────────────────────────────────────────────── */ .sidebar { width: var(--qr-sidebar-width) !important; background-color: var(--qr-sidebar) !important; border-right: 1px solid rgba(255, 255, 255, 0.06); display: flex; flex-direction: column; } .sidebar-header { height: var(--qr-header-height) !important; background: transparent !important; border-bottom: 1px solid rgba(255, 255, 255, 0.06); padding: 0 20px !important; font-size: 0.95rem !important; font-weight: 700; letter-spacing: -0.025em; color: #fff; } .sidebar-header.admin-panel { background: transparent !important; } .sidebar-header i { color: var(--qr-accent-orange) !important; font-size: 1.1rem; } .sidebar-brand-version { font-size: 0.625rem; font-weight: 500; background: rgba(255, 255, 255, 0.08); color: var(--qr-sidebar-text); padding: 2px 6px; border-radius: var(--qr-radius-sm); margin-left: 8px; letter-spacing: 0.03em; text-transform: uppercase; } .sidebar-menu { padding: 8px 0 !important; margin: 0 !important; flex: 1; } .sidebar-menu li a { padding: 9px 20px !important; color: var(--qr-sidebar-text) !important; font-size: 0.8125rem; font-weight: 500; border-left: 2px solid transparent !important; border-radius: 0; transition: all var(--qr-transition); gap: 10px; } .sidebar-menu li a i { width: 18px !important; font-size: 0.85rem; opacity: 0.7; } .sidebar-menu li a:hover { background-color: var(--qr-sidebar-hover) !important; color: var(--qr-sidebar-text-active) !important; border-left-color: transparent !important; } .sidebar-menu li a:hover i { opacity: 1; } .sidebar-menu li a.active { background-color: rgba(37, 99, 235, 0.12) !important; color: var(--qr-sidebar-text-active) !important; border-left-color: var(--qr-accent) !important; } .sidebar-menu li a.active i { color: var(--qr-accent) !important; opacity: 1; } .sidebar-divider { border-color: rgba(255, 255, 255, 0.06) !important; margin: 4px 20px !important; } .sidebar-footer { padding: 12px 20px; border-top: 1px solid rgba(255, 255, 255, 0.06); font-size: 0.6875rem; color: rgba(255, 255, 255, 0.25); } /* ── 4. Main Content Area ─────────────────────────────────────────────────── */ .main-content { margin-left: var(--qr-sidebar-width) !important; } .content-wrapper { padding: 24px 28px !important; max-width: 1280px; } /* ── 5. Top Navbar ────────────────────────────────────────────────────────── */ .top-navbar { height: var(--qr-header-height) !important; background: var(--qr-surface) !important; box-shadow: none !important; border-bottom: 1px solid var(--qr-border); padding: 0 28px !important; position: relative; z-index: 1040; } .top-navbar .text-muted { font-size: 0.8125rem; font-weight: 500; } .user-dropdown .dropdown-toggle { font-size: 0.8125rem; font-weight: 500; color: var(--qr-text) !important; gap: 8px; } .user-dropdown img { width: 28px !important; height: 28px !important; border-radius: var(--qr-radius) !important; } .dropdown-menu { border: 1px solid var(--qr-border) !important; border-radius: var(--qr-radius) !important; box-shadow: var(--qr-shadow-sm), 0 4px 12px rgba(0, 0, 0, 0.08) !important; padding: 4px !important; font-size: 0.8125rem; } .dropdown-item { border-radius: var(--qr-radius-sm); padding: 6px 12px; font-weight: 500; transition: background var(--qr-transition); } .dropdown-item:hover { background-color: var(--qr-bg); } /* ── 6. Cards ─────────────────────────────────────────────────────────────── */ .card { border: 1px solid var(--qr-border) !important; border-radius: var(--qr-radius) !important; box-shadow: none !important; background: var(--qr-surface); transition: border-color var(--qr-transition); } .card:hover { border-color: var(--qr-border-strong) !important; } .card-header { background: var(--qr-surface) !important; border-bottom: 1px solid var(--qr-border) !important; padding: 14px 20px !important; font-weight: 600; font-size: 0.8125rem; } .card-body { padding: 20px !important; } /* ── 7. Buttons ───────────────────────────────────────────────────────────── */ .btn { border-radius: var(--qr-radius) !important; font-weight: 500; font-size: 0.8125rem; padding: 7px 14px; transition: all var(--qr-transition); letter-spacing: -0.006em; border: 1px solid transparent; } .btn:focus-visible { box-shadow: 0 0 0 2px var(--qr-surface), 0 0 0 4px var(--qr-accent) !important; } /* Primary */ .btn-primary { background-color: var(--qr-accent) !important; border-color: var(--qr-accent) !important; color: #fff !important; } .btn-primary:hover { background-color: var(--qr-accent-hover) !important; border-color: var(--qr-accent-hover) !important; } /* Secondary / Outline */ .btn-outline-primary { color: var(--qr-accent) !important; border-color: var(--qr-border) !important; background: var(--qr-surface) !important; } .btn-outline-primary:hover { background: var(--qr-accent-light) !important; border-color: var(--qr-accent) !important; color: var(--qr-accent) !important; } .btn-outline-secondary, .btn-outline-dark { color: var(--qr-text) !important; border-color: var(--qr-border) !important; background: var(--qr-surface) !important; } .btn-outline-secondary:hover, .btn-outline-dark:hover { background: var(--qr-bg) !important; border-color: var(--qr-border-strong) !important; color: var(--qr-text) !important; } .btn-success { background-color: var(--qr-success) !important; border-color: var(--qr-success) !important; } .btn-danger { background-color: var(--qr-danger) !important; border-color: var(--qr-danger) !important; } .btn-sm { padding: 5px 10px; font-size: 0.75rem; } .btn-link { color: var(--qr-text-secondary) !important; text-decoration: none !important; } .btn-link:hover { color: var(--qr-text) !important; } /* ── 8. Form Controls ─────────────────────────────────────────────────────── */ .form-control, .form-select { border: 1px solid var(--qr-border) !important; border-radius: var(--qr-radius-sm) !important; font-size: 0.8125rem; padding: 8px 12px; color: var(--qr-text); background-color: var(--qr-surface); transition: border-color var(--qr-transition), box-shadow var(--qr-transition); } .form-control:focus, .form-select:focus { border-color: var(--qr-accent) !important; box-shadow: 0 0 0 2px rgba(37, 99, 235, 0.15) !important; outline: none; } .form-control::placeholder { color: var(--qr-text-tertiary); } .form-label { font-size: 0.75rem; font-weight: 600; color: var(--qr-text-secondary); text-transform: uppercase; letter-spacing: 0.04em; margin-bottom: 4px; } .input-group-text { border: 1px solid var(--qr-border) !important; border-radius: var(--qr-radius-sm) !important; background: var(--qr-bg) !important; font-size: 0.8125rem; color: var(--qr-text-secondary); } .form-check-input { border-radius: var(--qr-radius-sm) !important; border: 1px solid var(--qr-border-strong); } .form-check-input:checked { background-color: var(--qr-accent); border-color: var(--qr-accent); } .form-check-input:focus { box-shadow: 0 0 0 2px rgba(37, 99, 235, 0.15) !important; } /* ── 9. Tables ────────────────────────────────────────────────────────────── */ .table { font-size: 0.8125rem; color: var(--qr-text); margin-bottom: 0; --bs-table-bg: transparent; } .table>thead { position: sticky; top: 0; z-index: 1; } .table>thead th { background-color: var(--qr-bg) !important; font-weight: 600; font-size: 0.6875rem; text-transform: uppercase; letter-spacing: 0.05em; color: var(--qr-text-secondary) !important; padding: 10px 16px !important; border-bottom: 1px solid var(--qr-border) !important; border-top: none !important; white-space: nowrap; } .table>tbody>tr { border-bottom: 1px solid var(--qr-border); transition: background var(--qr-transition); } .table>tbody>tr:last-child { border-bottom: none; } .table>tbody td { padding: 12px 16px !important; vertical-align: middle; border: none !important; } .table-hover>tbody>tr:hover { --bs-table-hover-bg: #F3F4F6; background-color: #F3F4F6 !important; } /* Remove Bootstrap's table-light background override */ .table-light { --bs-table-bg: var(--qr-bg) !important; --bs-table-border-color: var(--qr-border); } /* ── 10. Badges ───────────────────────────────────────────────────────────── */ .badge { font-weight: 500; font-size: 0.6875rem; padding: 3px 8px; border-radius: var(--qr-radius-sm); letter-spacing: 0.02em; } .badge.bg-success { background-color: var(--qr-success-light) !important; color: var(--qr-success) !important; } .badge.bg-secondary { background-color: var(--qr-bg) !important; color: var(--qr-text-secondary) !important; border: 1px solid var(--qr-border); } .badge.bg-primary { background-color: var(--qr-accent-light) !important; color: var(--qr-accent) !important; } .badge.bg-danger { background-color: var(--qr-danger-light) !important; color: var(--qr-danger) !important; } .badge.bg-warning { background-color: var(--qr-warning-light) !important; color: var(--qr-warning) !important; } .badge.bg-info { background-color: var(--qr-info-light) !important; color: var(--qr-info) !important; } .badge-soft { background-color: var(--qr-bg) !important; color: var(--qr-text-secondary) !important; border: 1px solid var(--qr-border); font-weight: 500; font-size: 0.6875rem; padding: 3px 8px; border-radius: var(--qr-radius-sm); } /* ── 11. Alerts ───────────────────────────────────────────────────────────── */ .alert { border-radius: var(--qr-radius) !important; font-size: 0.8125rem; border: 1px solid; padding: 12px 16px; } .alert-success { background-color: var(--qr-success-light) !important; border-color: #A7F3D0 !important; color: #065F46 !important; } .alert-danger { background-color: var(--qr-danger-light) !important; border-color: #FECACA !important; color: #991B1B !important; } .alert-warning { background-color: var(--qr-warning-light) !important; border-color: #FDE68A !important; color: #92400E !important; } /* ── 12. Bento Grid / Dashboard Widgets ───────────────────────────────────── */ .bento-grid { display: grid; gap: 16px; grid-template-columns: repeat(4, 1fr); } @media (max-width: 1200px) { .bento-grid { grid-template-columns: repeat(2, 1fr); } } @media (max-width: 576px) { .bento-grid { grid-template-columns: 1fr; } } .stat-card { background: var(--qr-surface); border: 1px solid var(--qr-border); border-radius: var(--qr-radius); padding: 20px; display: flex; align-items: flex-start; justify-content: space-between; transition: border-color var(--qr-transition); position: relative; overflow: hidden; } .stat-card:hover { border-color: var(--qr-border-strong); } .stat-card .stat-icon { width: 40px; height: 40px; border-radius: var(--qr-radius); display: flex; align-items: center; justify-content: center; font-size: 0.95rem; flex-shrink: 0; } .stat-card .stat-icon.blue { background: var(--qr-accent-light); color: var(--qr-accent); } .stat-card .stat-icon.green { background: var(--qr-success-light); color: var(--qr-success); } .stat-card .stat-icon.orange { background: var(--qr-accent-orange-light); color: var(--qr-accent-orange); } .stat-card .stat-icon.cyan { background: var(--qr-info-light); color: var(--qr-info); } .stat-card .stat-label { font-size: 0.75rem; font-weight: 500; color: var(--qr-text-secondary); margin-bottom: 4px; text-transform: uppercase; letter-spacing: 0.04em; } .stat-card .stat-value { font-size: 1.75rem; font-weight: 700; line-height: 1.1; color: var(--qr-text); margin-bottom: 4px; } .stat-card .stat-sub { font-size: 0.6875rem; color: var(--qr-success); font-weight: 500; } .stat-card .stat-sub.neutral { color: var(--qr-text-tertiary); } /* ── 13. Page Header ──────────────────────────────────────────────────────── */ .page-header { margin-bottom: 24px; } .page-header h2 { font-size: 1.25rem; font-weight: 700; letter-spacing: -0.025em; margin: 0; color: var(--qr-text); } .page-header p { font-size: 0.8125rem; color: var(--qr-text-secondary); margin: 4px 0 0; } /* ── 14. Action Buttons Override ──────────────────────────────────────────── */ .action-btn { border-radius: var(--qr-radius) !important; width: 32px !important; height: 32px !important; } .action-btn:hover { transform: none !important; box-shadow: var(--qr-shadow-sm) !important; } /* ── 15. Search Box Override ──────────────────────────────────────────────── */ .search-box .form-control { border-radius: var(--qr-radius-sm) !important; height: 36px !important; } .menu-management-table-container { border-radius: var(--qr-radius) !important; box-shadow: none !important; border: 1px solid var(--qr-border); } /* ── 16. Status Toggle ────────────────────────────────────────────────────── */ .form-check-input.status-toggle:checked { background-color: var(--qr-success) !important; border-color: var(--qr-success) !important; } /* ── 17. Scrollbar (Webkit) ───────────────────────────────────────────────── */ ::-webkit-scrollbar { width: 6px; height: 6px; } ::-webkit-scrollbar-track { background: transparent; } ::-webkit-scrollbar-thumb { background: var(--qr-border-strong); border-radius: 3px; } ::-webkit-scrollbar-thumb:hover { background: var(--qr-text-tertiary); } /* ── 18. Login Page ───────────────────────────────────────────────────────── */ .login-page { background-color: var(--qr-bg); display: flex; align-items: center; justify-content: center; min-height: 100vh; font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif; } .login-card { width: 100%; max-width: 380px; border: 1px solid var(--qr-border) !important; border-radius: var(--qr-radius) !important; box-shadow: var(--qr-shadow-sm) !important; overflow: hidden; } .login-header { padding: 28px 28px 12px !important; border-radius: 0 !important; } .login-body { padding: 24px 28px 28px !important; border-radius: 0 !important; } .brand-logo { font-family: 'Inter', sans-serif; font-size: 1.25rem !important; font-weight: 700; color: var(--qr-text) !important; letter-spacing: -0.025em; } .brand-logo i { color: var(--qr-accent-orange) !important; } /* ── 19. Responsive Overrides ─────────────────────────────────────────────── */ /* Sidebar overlay backdrop */ .sidebar-overlay { display: none; position: fixed; inset: 0; background: rgba(0, 0, 0, 0.45); z-index: 999; opacity: 0; transition: opacity 0.3s ease; } .sidebar-overlay.active { display: block; opacity: 1; } @media (max-width: 768px) { /* Sidebar: slide from left with overlay */ .sidebar { position: fixed !important; left: 0; top: 0; transform: translateX(-100%); margin-left: 0 !important; transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1); z-index: 1050; box-shadow: none; } .sidebar.active { transform: translateX(0); box-shadow: 4px 0 24px rgba(0, 0, 0, 0.25); } .main-content { margin-left: 0 !important; } /* Top navbar compact */ .top-navbar { padding: 0 16px !important; } .top-navbar .text-muted { display: none; } /* Content wrapper smaller padding */ .content-wrapper { padding: 16px 12px !important; } /* Bento grid: 2-col on tablet */ .bento-grid { grid-template-columns: repeat(2, 1fr); gap: 10px; } /* Stat cards smaller */ .stat-card { padding: 14px; } .stat-card .stat-value { font-size: 1.4rem; } .stat-card .stat-icon { width: 34px; height: 34px; font-size: 0.85rem; } /* Page header responsive */ .page-header { margin-bottom: 16px; } .page-header h2 { font-size: 1.1rem; } /* Cards */ .card-header { padding: 12px 14px !important; } .card-body { padding: 14px !important; } /* Tables — horizontal scroll */ .table-responsive { -webkit-overflow-scrolling: touch; } .table>thead th { padding: 8px 10px !important; font-size: 0.625rem; } .table>tbody td { padding: 10px !important; font-size: 0.8rem; } /* Stack tables as cards on mobile for better usability */ .table-mobile-cards { display: block; } .table-mobile-cards thead { display: none; } .table-mobile-cards tbody { display: block; } .table-mobile-cards tbody tr { display: block; background-color: var(--qr-surface) !important; border: 1px solid var(--qr-border); border-radius: var(--qr-radius); margin-bottom: 12px; padding: 6px 0; box-shadow: var(--qr-shadow-xs); position: relative; z-index: 1; } .table-mobile-cards tbody td { display: flex; justify-content: space-between; align-items: center; padding: 8px 14px !important; text-align: right; border-bottom: 1px solid rgba(0, 0, 0, 0.03) !important; position: relative; z-index: 2; } .table-mobile-cards tbody td:last-child { border-bottom: none !important; } .table-mobile-cards tbody td::before { content: attr(data-label); font-weight: 600; font-size: 0.75rem; color: var(--qr-text-secondary); text-align: left; margin-right: 12px; text-transform: uppercase; flex-shrink: 0; } /* Action / full width cells */ .table-mobile-cards tbody td.actions-cell { justify-content: flex-end; background: rgba(0, 0, 0, 0.01); } .table-mobile-cards tbody td.full-width-cell { flex-direction: column; align-items: flex-start; text-align: left; } .table-mobile-cards tbody td.full-width-cell::before { margin-bottom: 6px; } /* Fix Safari tap issues for interactive items within mobile tables */ .table-mobile-cards a, .table-mobile-cards button, .table-mobile-cards .btn { position: relative; z-index: 10; cursor: pointer; touch-action: manipulation; } /* Buttons — touch–friendly min targets */ .btn { min-height: 38px; padding: 8px 14px; } .btn-sm { min-height: 34px; padding: 6px 10px; } /* Action buttons bigger for touch */ .action-btn { width: 36px !important; height: 36px !important; } /* Forms */ .form-control, .form-select { font-size: 16px !important; /* prevents iOS zoom */ padding: 10px 12px; } .form-label { font-size: 0.7rem; } /* Row gaps for form */ .row>[class*="col-"] { padding-left: 8px; padding-right: 8px; } /* Detail page header stack */ .d-flex.flex-wrap.align-items-center.justify-content-between { flex-direction: column; align-items: flex-start !important; } /* Quick access buttons vertical */ .d-flex.flex-wrap.gap-2 { flex-direction: column; } .d-flex.flex-wrap.gap-2 .btn { width: 100%; text-align: left; } /* Sidebar toggle visibility */ #sidebarToggle { display: inline-flex !important; align-items: center; justify-content: center; font-size: 1.2rem; width: 40px; height: 40px; padding: 0; color: var(--qr-text); position: relative; z-index: 1060; cursor: pointer; touch-action: manipulation; } /* Restaurant detail: button group stacks */ .d-flex.gap-1, .d-flex.gap-2 { flex-wrap: wrap; } /* Login page mobile padding */ .login-card { max-width: 100%; margin: 0 12px; } } @media (max-width: 480px) { .bento-grid { grid-template-columns: 1fr; } .stat-card .stat-value { font-size: 1.25rem; } .page-header h2 { font-size: 1rem; } .content-wrapper { padding: 12px 8px !important; } /* Subscription tables stack on very small screens */ .col-lg-6 { width: 100% !important; } } /* Hide sidebar toggle on desktop */ @media (min-width: 769px) { #sidebarToggle { display: none !important; } .sidebar-overlay { display: none !important; } } /* ── 20. Misc Utilities ───────────────────────────────────────────────────── */ .border-subtle { border-color: var(--qr-border) !important; } .bg-canvas { background-color: var(--qr-bg) !important; } .text-primary-qr { color: var(--qr-accent) !important; } .text-orange-qr { color: var(--qr-accent-orange) !important; } /* Stretched link reset for stat cards */ .stat-card a.stretched-link { position: static; } .stat-card a.stretched-link::after { position: absolute; inset: 0; content: ""; }