/* ChopDesk design system. Every colour is a token below; re-theming is a one-file change. Themes are chosen by the restaurant (Settings) via . */ :root { --font: 'Inter', system-ui, -apple-system, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif; --bg: #F4F5F7; --surface: #FFFFFF; --surface-alt: #F9FAFB; --text: #1F2430; --muted: #6B7280; --border: #E4E7EC; --success: #15803D; --warning: #B45309; --danger: #B91C1C; --info: #0369A1; --radius: 14px; --radius-sm: 10px; --shadow-sm: 0 1px 2px rgba(16, 24, 40, .05); --shadow: 0 4px 14px rgba(16, 24, 40, .07); --shadow-lg: 0 18px 40px rgba(16, 24, 40, .18); --sidebar-w: 264px; --topbar-h: 64px; --tap: 44px; } :root[data-theme="red"] { --primary: #C62828; --primary-rgb: 198, 40, 40; --primary-dark: #8E1B1B; --primary-soft: #FDECEC; --accent: #F59E0B; --sidebar-bg: #241214; --sidebar-text: #E8D6D7; --sidebar-muted: #A98B8D; } :root[data-theme="green"] { --primary: #15803D; --primary-rgb: 21, 128, 61; --primary-dark: #0F5A2B; --primary-soft: #E8F5EC; --accent: #F59E0B; --sidebar-bg: #0F2419; --sidebar-text: #D6E8DC; --sidebar-muted: #86A593; } :root[data-theme="amber"] { --primary: #B45309; --primary-rgb: 180, 83, 9; --primary-dark: #78350F; --primary-soft: #FEF3E2; --accent: #0F766E; --sidebar-bg: #2A1D0B; --sidebar-text: #EFE1CB; --sidebar-muted: #AD9772; } /* Bootstrap bridge: map its primary to ours */ :root { --bs-primary: var(--primary); --bs-primary-rgb: var(--primary-rgb); --bs-link-color: var(--primary); --bs-link-hover-color: var(--primary-dark); --bs-body-font-family: var(--font); --bs-body-color: var(--text); --bs-body-bg: var(--bg); --bs-border-color: var(--border); --bs-border-radius: var(--radius-sm); } * { -webkit-tap-highlight-color: transparent; } html { font-size: 15px; } body { font-family: var(--font); background: var(--bg); color: var(--text); -webkit-font-smoothing: antialiased; } h1, h2, h3, h4, h5, h6 { font-weight: 650; letter-spacing: -.01em; } a { color: var(--primary); } .text-muted, .text-secondary { color: var(--muted) !important; } .text-primary { color: var(--primary) !important; } .bg-primary { background-color: var(--primary) !important; } .bg-primary-soft { background: var(--primary-soft); } /* ---------- Buttons & forms ---------- */ .btn { border-radius: var(--radius-sm); font-weight: 550; min-height: 38px; display: inline-flex; align-items: center; justify-content: center; gap: .4rem; } .btn-primary { --bs-btn-bg: var(--primary); --bs-btn-border-color: var(--primary); --bs-btn-color: #fff; --bs-btn-hover-bg: var(--primary-dark); --bs-btn-hover-border-color: var(--primary-dark); --bs-btn-hover-color: #fff; --bs-btn-active-bg: var(--primary-dark); --bs-btn-active-border-color: var(--primary-dark); --bs-btn-disabled-bg: var(--primary); --bs-btn-disabled-border-color: var(--primary); --bs-btn-focus-shadow-rgb: var(--primary-rgb); } .btn-outline-primary { --bs-btn-color: var(--primary); --bs-btn-border-color: var(--primary); --bs-btn-hover-bg: var(--primary); --bs-btn-hover-border-color: var(--primary); --bs-btn-hover-color: #fff; --bs-btn-active-bg: var(--primary-dark); --bs-btn-active-border-color: var(--primary-dark); --bs-btn-focus-shadow-rgb: var(--primary-rgb); } .btn-light { --bs-btn-bg: var(--surface); --bs-btn-border-color: var(--border); } .btn-sm { min-height: 32px; } .btn-icon { width: 32px; padding: 0; } .form-control, .form-select { border-radius: var(--radius-sm); border-color: var(--border); min-height: 40px; } .form-control:focus, .form-select:focus, .form-check-input:focus { border-color: var(--primary); box-shadow: 0 0 0 .2rem rgba(var(--primary-rgb), .18); } .form-check-input:checked { background-color: var(--primary); border-color: var(--primary); } .form-label { font-weight: 550; font-size: .86rem; margin-bottom: .3rem; } .form-text { color: var(--muted); } .input-group .btn { border-color: var(--border); } .pw-toggle { background: var(--surface); color: var(--muted); min-width: 44px; } .pw-toggle:hover { color: var(--primary); background: var(--surface-alt); } .is-invalid-msg { color: var(--danger); font-size: .82rem; } /* ---------- Cards ---------- */ .card { border: 1px solid var(--border); border-radius: var(--radius); box-shadow: var(--shadow-sm); background: var(--surface); } .card-header { background: transparent; border-bottom: 1px solid var(--border); font-weight: 600; padding: .9rem 1.1rem; } .card-body { padding: 1.1rem; } .stat-card { display: flex; flex-direction: row; gap: .9rem; align-items: center; padding: 1rem 1.1rem; height: 100%; } .min-w-0 { min-width: 0; } .stat-icon { width: 46px; height: 46px; border-radius: 12px; display: grid; place-items: center; font-size: 1.3rem; flex: none; background: var(--primary-soft); color: var(--primary); } .stat-icon.tone-success { background: #E6F4EA; color: var(--success); } .stat-icon.tone-warning { background: #FEF3E2; color: var(--warning); } .stat-icon.tone-danger { background: #FDECEC; color: var(--danger); } .stat-icon.tone-info { background: #E0F2FE; color: var(--info); } .stat-label { color: var(--muted); font-size: .8rem; font-weight: 550; text-transform: uppercase; letter-spacing: .04em; } .stat-value { font-size: 1.45rem; font-weight: 700; line-height: 1.2; } .stat-sub { font-size: .8rem; color: var(--muted); } /* ---------- App shell ---------- */ .app-shell { min-height: 100vh; } .sidebar { position: fixed; inset: 0 auto 0 0; width: var(--sidebar-w); background: var(--sidebar-bg); color: var(--sidebar-text); display: flex; flex-direction: column; z-index: 1040; transition: transform .25s ease; } .sidebar-brand { display: flex; align-items: center; gap: .75rem; padding: 1.1rem 1.2rem; border-bottom: 1px solid rgba(255, 255, 255, .08); text-decoration: none; color: #fff; } .brand-logo { width: 40px; height: 40px; border-radius: 11px; background: var(--primary); display: grid; place-items: center; overflow: hidden; flex: none; font-size: 1.3rem; color: #fff; } .brand-logo img { width: 100%; height: 100%; object-fit: cover; } .brand-name { font-weight: 700; line-height: 1.15; font-size: 1rem; } .brand-sub { font-size: .72rem; color: var(--sidebar-muted); } .sidebar-nav { flex: 1; overflow-y: auto; padding: .6rem .7rem 1rem; scrollbar-width: thin; } .nav-group-title { font-size: .68rem; text-transform: uppercase; letter-spacing: .08em; color: var(--sidebar-muted); padding: .9rem .7rem .3rem; } .nav-link-item { display: flex; align-items: center; gap: .75rem; padding: .6rem .75rem; margin: 2px 0; border-radius: var(--radius-sm); color: var(--sidebar-text); text-decoration: none; font-weight: 500; font-size: .93rem; min-height: var(--tap); } .nav-link-item i { font-size: 1.1rem; width: 1.25rem; text-align: center; opacity: .85; } .nav-link-item:hover { background: rgba(255, 255, 255, .07); color: #fff; } .nav-link-item.active { background: var(--primary); color: #fff; box-shadow: 0 4px 12px rgba(0, 0, 0, .25); } .nav-link-item.active i { opacity: 1; } .sidebar-user { border-top: 1px solid rgba(255, 255, 255, .08); padding: .9rem 1rem; display: flex; align-items: center; gap: .7rem; } .avatar { width: 38px; height: 38px; border-radius: 50%; background: var(--primary); color: #fff; display: grid; place-items: center; font-weight: 650; flex: none; font-size: .9rem; } .sidebar-user .who { min-width: 0; flex: 1; } .sidebar-user .who strong { display: block; color: #fff; font-size: .88rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .sidebar-user .who span { font-size: .72rem; color: var(--sidebar-muted); } .sidebar-user .btn { color: var(--sidebar-text); border: 0; background: rgba(255, 255, 255, .07); width: 38px; } .sidebar-user .btn:hover { background: var(--primary); color: #fff; } .sidebar-backdrop { display: none; position: fixed; inset: 0; background: rgba(15, 18, 25, .55); z-index: 1035; } .app-main { margin-left: var(--sidebar-w); min-height: 100vh; display: flex; flex-direction: column; min-width: 0; } .topbar { position: sticky; top: 0; z-index: 1020; height: var(--topbar-h); background: rgba(255, 255, 255, .92); backdrop-filter: blur(8px); border-bottom: 1px solid var(--border); display: flex; align-items: center; gap: .8rem; padding: 0 1.5rem; } .topbar-title { font-size: 1.15rem; font-weight: 650; margin: 0; flex: 1; min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .topbar-clock { color: var(--muted); font-size: .85rem; font-variant-numeric: tabular-nums; white-space: nowrap; } .net-status { font-size: .75rem; padding: .25rem .55rem; border-radius: 99px; background: #E6F4EA; color: var(--success); font-weight: 600; white-space: nowrap; } .net-status.offline { background: #FDECEC; color: var(--danger); } .app-content { padding: 1.5rem; flex: 1; } .menu-toggle { display: none; } .page-head { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: .75rem; margin-bottom: 1.1rem; } .page-head h2 { margin: 0; font-size: 1.3rem; } .page-head p { margin: .15rem 0 0; color: var(--muted); font-size: .9rem; } /* ---------- Tables & toolbars ---------- */ .toolbar { display: flex; flex-wrap: wrap; gap: .6rem; align-items: center; margin-bottom: .9rem; } .toolbar .search { position: relative; flex: 1 1 240px; max-width: 360px; } .toolbar .search i { position: absolute; left: .8rem; top: 50%; transform: translateY(-50%); color: var(--muted); } .toolbar .search input { padding-left: 2.2rem; } .toolbar .spacer { flex: 1; } .data-card { padding: 0; overflow: hidden; } .table { --bs-table-bg: transparent; margin: 0; } .table > :not(caption) > * > * { padding: .75rem 1rem; vertical-align: middle; } .table thead th { background: var(--surface-alt); color: var(--muted); font-size: .74rem; text-transform: uppercase; letter-spacing: .05em; font-weight: 650; border-bottom: 1px solid var(--border); white-space: nowrap; } .table tbody tr:hover { background: rgba(var(--primary-rgb), .035); } .table td.actions { white-space: nowrap; text-align: right; width: 1%; } .badge-soft { font-weight: 600; padding: .38em .7em; border-radius: 99px; font-size: .74rem; } .empty-state { text-align: center; padding: 3rem 1rem; color: var(--muted); } .empty-state i { font-size: 2.4rem; color: var(--primary); opacity: .55; display: block; margin-bottom: .6rem; } .pager { display: flex; flex-wrap: wrap; gap: .6rem; justify-content: space-between; align-items: center; padding: .8rem 1rem; border-top: 1px solid var(--border); font-size: .85rem; color: var(--muted); } .page-link { color: var(--primary); border-radius: 8px !important; margin: 0 2px; border-color: var(--border); min-width: 36px; text-align: center; } .page-item.active .page-link { background: var(--primary); border-color: var(--primary); color: #fff; } .nav-tabs { border-bottom: 1px solid var(--border); } .nav-tabs .nav-link { color: var(--muted); font-weight: 550; border: 0; border-bottom: 2px solid transparent; padding: .7rem 1rem; } .nav-tabs .nav-link.active { color: var(--primary); background: transparent; border-bottom-color: var(--primary); } .nav-pills .nav-link { color: var(--text); border-radius: 99px; } .nav-pills .nav-link.active { background: var(--primary); color: #fff; } .modal-content { border-radius: var(--radius); border: 0; box-shadow: var(--shadow-lg); } .modal-header, .modal-footer { border-color: var(--border); } .toast-stack { position: fixed; top: 1rem; right: 1rem; z-index: 2000; display: flex; flex-direction: column; gap: .5rem; } .app-toast { min-width: 260px; max-width: 360px; padding: .8rem 1rem; border-radius: var(--radius-sm); background: #1F2430; color: #fff; box-shadow: var(--shadow-lg); animation: toast-in .2s ease; } .app-toast.success { background: var(--success); } .app-toast.error { background: var(--danger); } @keyframes toast-in { from { transform: translateY(-8px); opacity: 0; } } .alert { border-radius: var(--radius-sm); border: 0; box-shadow: var(--shadow-sm); } /* ---------- Login / public ---------- */ .auth-wrap { min-height: 100vh; display: grid; grid-template-columns: 1.05fr 1fr; } .auth-hero { background: linear-gradient(155deg, var(--primary-dark), var(--primary) 70%, var(--accent) 160%); color: #fff; padding: 3rem; display: flex; flex-direction: column; justify-content: space-between; } .auth-hero h1 { font-size: 2.2rem; line-height: 1.15; max-width: 16ch; } .auth-hero ul { list-style: none; padding: 0; margin: 1.5rem 0 0; display: grid; gap: .7rem; opacity: .95; } .auth-panel { display: grid; place-items: center; padding: 2rem 1.25rem; background: var(--surface); } .auth-card { width: 100%; max-width: 400px; } .public-shell { max-width: 880px; margin: 0 auto; padding: 1.25rem 1rem 3rem; } .public-top { display: flex; align-items: center; gap: .8rem; padding: 1rem 0; } .menu-cat { margin-top: 1.6rem; } .menu-cat h3 { border-bottom: 2px solid var(--primary); display: inline-block; padding-bottom: .25rem; } .public-item { display: flex; gap: .9rem; padding: .85rem 0; border-bottom: 1px dashed var(--border); align-items: center; } .public-item img { width: 64px; height: 64px; object-fit: cover; border-radius: 12px; } .public-item .price { font-weight: 700; color: var(--primary); white-space: nowrap; } /* ---------- Theme picker ---------- */ .theme-choice { position: relative; display: block; cursor: pointer; } .theme-choice input { position: absolute; opacity: 0; } .theme-card { border: 2px solid var(--border); border-radius: var(--radius); padding: .9rem; text-align: center; background: var(--surface); transition: border-color .15s, box-shadow .15s; } .theme-choice input:checked + .theme-card { border-color: var(--primary); box-shadow: 0 0 0 4px rgba(var(--primary-rgb), .15); } .theme-swatch { height: 46px; border-radius: 10px; margin-bottom: .55rem; } /* ---------- Dashboard ---------- */ .bar-chart { display: flex; align-items: flex-end; gap: .6rem; height: 170px; padding-top: 1rem; } .bar-col { flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: flex-end; height: 100%; min-width: 0; } .bar { width: 100%; max-width: 46px; background: linear-gradient(180deg, var(--primary), var(--primary-dark)); border-radius: 8px 8px 3px 3px; min-height: 3px; } .bar.today { background: var(--primary); box-shadow: 0 0 0 3px rgba(var(--primary-rgb), .22); } .bar-val { font-size: .68rem; color: var(--muted); margin-bottom: 3px; white-space: nowrap; } .bar-lbl { font-size: .75rem; color: var(--muted); margin-top: 5px; } .list-clean { list-style: none; margin: 0; padding: 0; } .list-clean li { display: flex; justify-content: space-between; gap: .8rem; padding: .55rem 0; border-bottom: 1px solid var(--border); align-items: center; } .list-clean li:last-child { border-bottom: 0; } /* ---------- Tables (floor map) ---------- */ .floor { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: .9rem; } .table-tile { border-radius: var(--radius); border: 2px solid var(--border); background: var(--surface); padding: .9rem; text-align: left; width: 100%; min-height: 110px; transition: transform .1s, box-shadow .15s; display: block; text-decoration: none; color: inherit; } .table-tile:hover { transform: translateY(-2px); box-shadow: var(--shadow); color: inherit; } .table-tile.free { border-color: #BFE3CB; background: #F3FBF6; } .table-tile.busy { border-color: var(--primary); background: var(--primary-soft); } .table-tile .tname { font-weight: 700; font-size: 1.1rem; } /* ---------- POS ---------- */ .pos { display: grid; grid-template-columns: minmax(0, 1.55fr) minmax(340px, 1fr); gap: 1rem; align-items: start; } .pos-menu { position: sticky; top: calc(var(--topbar-h) + 1rem); } .cat-scroller { display: flex; gap: .45rem; overflow-x: auto; padding-bottom: .5rem; scrollbar-width: thin; } .cat-pill { border: 1px solid var(--border); background: var(--surface); border-radius: 99px; padding: .45rem .95rem; white-space: nowrap; font-weight: 550; font-size: .88rem; min-height: 38px; } .cat-pill.active { background: var(--primary); border-color: var(--primary); color: #fff; } .menu-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: .7rem; max-height: calc(100vh - 250px); overflow-y: auto; padding: 2px; } .menu-tile { border: 1px solid var(--border); border-radius: var(--radius-sm); background: var(--surface); text-align: left; padding: 0; overflow: hidden; display: flex; flex-direction: column; min-height: 96px; transition: box-shadow .15s, transform .08s; } .menu-tile:hover { box-shadow: var(--shadow); border-color: var(--primary); } .menu-tile:active { transform: scale(.98); } .menu-tile img { width: 100%; height: 84px; object-fit: cover; } .menu-tile .ph { height: 84px; background: var(--primary-soft); color: var(--primary); display: grid; place-items: center; font-size: 1.8rem; } .menu-tile .info { padding: .55rem .65rem; } .menu-tile .nm { font-weight: 600; font-size: .88rem; line-height: 1.2; } .menu-tile .pr { color: var(--primary); font-weight: 700; font-size: .85rem; } .menu-tile.off { opacity: .45; } .cart { position: sticky; top: calc(var(--topbar-h) + 1rem); display: flex; flex-direction: column; max-height: calc(100vh - var(--topbar-h) - 2rem); } .cart-lines { overflow-y: auto; flex: 1; min-height: 120px; } .cart-line { display: grid; grid-template-columns: 1fr auto; gap: .2rem .6rem; padding: .7rem 1rem; border-bottom: 1px solid var(--border); } .cart-line .nm { font-weight: 600; font-size: .92rem; } .cart-line .meta { font-size: .78rem; color: var(--muted); } .qty-ctl { display: inline-flex; align-items: center; gap: .3rem; } .qty-ctl button { width: 32px; height: 32px; border-radius: 8px; border: 1px solid var(--border); background: var(--surface); font-weight: 700; } .qty-ctl button:hover { border-color: var(--primary); color: var(--primary); } .qty-ctl span { min-width: 24px; text-align: center; font-weight: 650; } .cart-totals { padding: .8rem 1rem; border-top: 1px solid var(--border); background: var(--surface-alt); font-size: .9rem; } .cart-totals .row-line { display: flex; justify-content: space-between; padding: 2px 0; } .cart-totals .grand { font-size: 1.25rem; font-weight: 750; border-top: 1px dashed var(--border); margin-top: .35rem; padding-top: .45rem; } .cart-actions { padding: .8rem 1rem; display: grid; gap: .5rem; grid-template-columns: 1fr 1fr; } .cart-actions .wide { grid-column: 1 / -1; } .cart-fab { display: none; position: fixed; left: 1rem; right: 1rem; bottom: 1rem; z-index: 1030; min-height: 52px; font-weight: 650; box-shadow: var(--shadow-lg); } .k-badge { font-size: .68rem; padding: .18em .5em; border-radius: 6px; font-weight: 650; } /* ---------- Kitchen display ---------- */ .kds { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1rem; align-items: start; } .kds-col h5 { display: flex; align-items: center; justify-content: space-between; font-size: .95rem; text-transform: uppercase; letter-spacing: .05em; color: var(--muted); } .ticket { background: var(--surface); border: 1px solid var(--border); border-left: 6px solid var(--warning); border-radius: var(--radius-sm); padding: .85rem 1rem; margin-bottom: .8rem; box-shadow: var(--shadow-sm); } .ticket.preparing { border-left-color: var(--info); } .ticket.ready { border-left-color: var(--success); } .ticket.late { animation: pulse-late 1.4s infinite; } @keyframes pulse-late { 50% { box-shadow: 0 0 0 4px rgba(185, 28, 28, .25); } } .ticket ul { list-style: none; padding: 0; margin: .5rem 0; } .ticket li { padding: .25rem 0; border-bottom: 1px dotted var(--border); font-size: 1.02rem; } .ticket .note { font-size: .82rem; color: var(--danger); font-weight: 550; } /* ---------- Print ---------- */ .receipt-page { background: #fff; } .receipt { width: 80mm; max-width: 100%; margin: 0 auto; padding: 4mm; font-family: 'Courier New', ui-monospace, monospace; font-size: 12px; color: #000; } .receipt h1 { font-size: 16px; text-align: center; margin: 0 0 2px; font-family: inherit; } .receipt .c { text-align: center; } .receipt hr { border: 0; border-top: 1px dashed #000; margin: 6px 0; } .receipt table { width: 100%; } .receipt td { vertical-align: top; padding: 1px 0; } .receipt td.r { text-align: right; white-space: nowrap; } .receipt .big { font-size: 14px; font-weight: 700; } .no-print-bar { text-align: center; padding: 1rem; background: #f4f5f7; } @media print { .sidebar, .topbar, .no-print, .no-print-bar, .toolbar, .pager, .btn, .sidebar-backdrop, .toast-stack, .alert { display: none !important; } .app-main { margin: 0 !important; } .app-content { padding: 0 !important; } body, .receipt-page { background: #fff !important; } .card { box-shadow: none !important; border: 1px solid #ccc; } .receipt { width: 100%; } } /* ---------- Responsive ---------- */ @media (max-width: 1199.98px) { .pos { grid-template-columns: minmax(0, 1.2fr) minmax(320px, 1fr); } .kds { grid-template-columns: repeat(2, minmax(0, 1fr)); } } @media (max-width: 991.98px) { .sidebar { transform: translateX(-100%); box-shadow: var(--shadow-lg); } .sidebar.open { transform: none; } .sidebar-backdrop.show { display: block; } .app-main { margin-left: 0; } .menu-toggle { display: inline-flex; } .app-content { padding: 1rem; } .topbar { padding: 0 1rem; } .topbar-clock { display: none; } .pos { grid-template-columns: 1fr; } .pos-menu, .cart { position: static; max-height: none; } .cart-fab { display: inline-flex; } .pos ~ .cart-fab { margin-bottom: env(safe-area-inset-bottom, 0); } .pos { padding-bottom: 4.5rem; } .menu-grid { max-height: 52vh; } .auth-wrap { grid-template-columns: 1fr; } .auth-hero { display: none; } } @media (max-width: 767.98px) { html { font-size: 14.5px; } .btn, .form-control, .form-select { min-height: var(--tap); } .btn-sm { min-height: 38px; } .btn-icon { width: 38px; } .qty-ctl button { width: 40px; height: 40px; } .app-content { padding: .85rem; } .page-head h2 { font-size: 1.15rem; } .kds { grid-template-columns: 1fr; } .floor { grid-template-columns: repeat(2, 1fr); } .menu-grid { grid-template-columns: repeat(2, 1fr); } .toolbar .search { max-width: none; flex-basis: 100%; } .table > :not(caption) > * > * { padding: .65rem .75rem; } .cart-actions { grid-template-columns: 1fr 1fr; } .stat-value { font-size: 1.2rem; } .modal-dialog { margin: .5rem; } .net-status span { display: none; } } @media (prefers-reduced-motion: reduce) { * { transition: none !important; animation: none !important; } }