| 1 | :root {
|
|---|
| 2 | --bg: #131110;
|
|---|
| 3 | --bg-elevated: #1b1815;
|
|---|
| 4 | --bg-panel: #201c18;
|
|---|
| 5 | --bg-panel-hover: #26221d;
|
|---|
| 6 | --bg-inset: #0f0d0c;
|
|---|
| 7 | --border: #35302a;
|
|---|
| 8 | --border-soft: #2a2621;
|
|---|
| 9 |
|
|---|
| 10 | --text: #f2ece0;
|
|---|
| 11 | --text-dim: #ab9f8d;
|
|---|
| 12 | --text-faint: #7a6f60;
|
|---|
| 13 |
|
|---|
| 14 | --accent: #c68a3e;
|
|---|
| 15 | --accent-strong: #dda257;
|
|---|
| 16 | --accent-soft: rgba(198, 138, 62, 0.14);
|
|---|
| 17 | --accent-border: rgba(198, 138, 62, 0.4);
|
|---|
| 18 |
|
|---|
| 19 | --sage: #7c9a6c;
|
|---|
| 20 | --sage-soft: rgba(124, 154, 108, 0.15);
|
|---|
| 21 | --ember: #bd4b2e;
|
|---|
| 22 | --ember-soft: rgba(189, 75, 46, 0.15);
|
|---|
| 23 | --plum: #8079b8;
|
|---|
| 24 | --plum-soft: rgba(128, 121, 184, 0.15);
|
|---|
| 25 |
|
|---|
| 26 | --radius-sm: 6px;
|
|---|
| 27 | --radius-md: 10px;
|
|---|
| 28 | --radius-lg: 16px;
|
|---|
| 29 |
|
|---|
| 30 | --font-display: "Fraunces", Georgia, serif;
|
|---|
| 31 | --font-body: "Public Sans", -apple-system, BlinkMacSystemFont, sans-serif;
|
|---|
| 32 | --font-mono: "JetBrains Mono", ui-monospace, monospace;
|
|---|
| 33 |
|
|---|
| 34 | --shadow-card: 0 1px 2px rgba(0,0,0,0.3), 0 8px 24px -8px rgba(0,0,0,0.5);
|
|---|
| 35 | --shadow-modal: 0 20px 60px -10px rgba(0,0,0,0.6);
|
|---|
| 36 |
|
|---|
| 37 | --titlebar-h: 40px;
|
|---|
| 38 | }
|
|---|
| 39 |
|
|---|
| 40 | * { box-sizing: border-box; }
|
|---|
| 41 |
|
|---|
| 42 | html, body {
|
|---|
| 43 | height: 100%;
|
|---|
| 44 | margin: 0;
|
|---|
| 45 | background: var(--bg);
|
|---|
| 46 | color: var(--text);
|
|---|
| 47 | font-family: var(--font-body);
|
|---|
| 48 | -webkit-font-smoothing: antialiased;
|
|---|
| 49 | overflow: hidden;
|
|---|
| 50 | user-select: none;
|
|---|
| 51 | }
|
|---|
| 52 |
|
|---|
| 53 | button, input { font-family: inherit; }
|
|---|
| 54 |
|
|---|
| 55 | ::selection { background: var(--accent-soft); color: var(--text); }
|
|---|
| 56 |
|
|---|
| 57 | * { scrollbar-width: thin; scrollbar-color: var(--border) transparent; }
|
|---|
| 58 | *::-webkit-scrollbar { width: 8px; height: 8px; }
|
|---|
| 59 | *::-webkit-scrollbar-thumb { background: var(--border); border-radius: 8px; }
|
|---|
| 60 | *::-webkit-scrollbar-track { background: transparent; }
|
|---|
| 61 |
|
|---|
| 62 | .titlebar {
|
|---|
| 63 | height: var(--titlebar-h);
|
|---|
| 64 | display: flex;
|
|---|
| 65 | align-items: center;
|
|---|
| 66 | justify-content: space-between;
|
|---|
| 67 | padding: 0 6px 0 14px;
|
|---|
| 68 | background: var(--bg-inset);
|
|---|
| 69 | border-bottom: 1px solid var(--border-soft);
|
|---|
| 70 | position: relative;
|
|---|
| 71 | z-index: 100;
|
|---|
| 72 | }
|
|---|
| 73 |
|
|---|
| 74 | .titlebar__brand { display: flex; align-items: baseline; gap: 8px; }
|
|---|
| 75 | .titlebar__mark {
|
|---|
| 76 | font-family: var(--font-display);
|
|---|
| 77 | font-weight: 700;
|
|---|
| 78 | font-size: 13px;
|
|---|
| 79 | letter-spacing: 0.08em;
|
|---|
| 80 | color: var(--accent-strong);
|
|---|
| 81 | }
|
|---|
| 82 | .titlebar__name {
|
|---|
| 83 | font-size: 12.5px;
|
|---|
| 84 | color: var(--text-dim);
|
|---|
| 85 | letter-spacing: 0.02em;
|
|---|
| 86 | }
|
|---|
| 87 |
|
|---|
| 88 | .titlebar__session {
|
|---|
| 89 | display: flex;
|
|---|
| 90 | align-items: center;
|
|---|
| 91 | gap: 10px;
|
|---|
| 92 | font-size: 12px;
|
|---|
| 93 | }
|
|---|
| 94 | .titlebar__session[hidden] { display: none; }
|
|---|
| 95 | .titlebar__user { color: var(--text); font-weight: 600; }
|
|---|
| 96 | .titlebar__role {
|
|---|
| 97 | color: var(--accent-strong);
|
|---|
| 98 | background: var(--accent-soft);
|
|---|
| 99 | border: 1px solid var(--accent-border);
|
|---|
| 100 | padding: 2px 8px;
|
|---|
| 101 | border-radius: 999px;
|
|---|
| 102 | font-size: 10.5px;
|
|---|
| 103 | text-transform: uppercase;
|
|---|
| 104 | letter-spacing: 0.06em;
|
|---|
| 105 | }
|
|---|
| 106 |
|
|---|
| 107 | .titlebar__controls { display: flex; gap: 2px; }
|
|---|
| 108 | .win-btn {
|
|---|
| 109 | width: 34px; height: 30px;
|
|---|
| 110 | display: flex; align-items: center; justify-content: center;
|
|---|
| 111 | background: transparent; border: none; color: var(--text-dim);
|
|---|
| 112 | border-radius: var(--radius-sm);
|
|---|
| 113 | cursor: pointer;
|
|---|
| 114 | }
|
|---|
| 115 | .win-btn svg { width: 10px; height: 10px; fill: currentColor; }
|
|---|
| 116 | .win-btn:hover { background: var(--bg-panel-hover); color: var(--text); }
|
|---|
| 117 | .win-btn--danger:hover { background: var(--ember); color: #fff; }
|
|---|
| 118 |
|
|---|
| 119 | .btn {
|
|---|
| 120 | appearance: none; border: 1px solid transparent; cursor: pointer;
|
|---|
| 121 | font-family: var(--font-body); font-weight: 600; font-size: 13.5px;
|
|---|
| 122 | padding: 10px 18px; border-radius: var(--radius-sm);
|
|---|
| 123 | transition: background .12s ease, border-color .12s ease, transform .06s ease;
|
|---|
| 124 | display: inline-flex; align-items: center; justify-content: center; gap: 8px;
|
|---|
| 125 | }
|
|---|
| 126 | .btn:active { transform: scale(0.98); }
|
|---|
| 127 | .btn--primary { background: var(--accent); color: #1b1108; border-color: var(--accent); }
|
|---|
| 128 | .btn--primary:hover { background: var(--accent-strong); }
|
|---|
| 129 | .btn--secondary { background: var(--bg-panel-hover); color: var(--text); border-color: var(--border); }
|
|---|
| 130 | .btn--secondary:hover { border-color: var(--accent-border); }
|
|---|
| 131 | .btn--ghost { background: transparent; color: var(--text-dim); border-color: transparent; padding: 6px 10px; }
|
|---|
| 132 | .btn--ghost:hover { color: var(--text); background: var(--bg-panel-hover); }
|
|---|
| 133 | .btn--danger { background: var(--ember); color: #fff; border-color: var(--ember); }
|
|---|
| 134 | .btn--danger:hover { filter: brightness(1.1); }
|
|---|
| 135 | .btn--sm { padding: 7px 12px; font-size: 12.5px; }
|
|---|
| 136 | .btn--block { width: 100%; }
|
|---|
| 137 | .btn:disabled { opacity: 0.45; cursor: not-allowed; }
|
|---|
| 138 |
|
|---|
| 139 | .field {
|
|---|
| 140 | display: flex; flex-direction: column; gap: 6px;
|
|---|
| 141 | font-size: 12.5px; color: var(--text-dim);
|
|---|
| 142 | }
|
|---|
| 143 | .field--wide { grid-column: 1 / -1; }
|
|---|
| 144 | .field input, .field select, .field textarea,
|
|---|
| 145 | input[type="text"], input[type="number"], input[type="date"], input[type="password"], select, textarea {
|
|---|
| 146 | background: var(--bg-inset);
|
|---|
| 147 | border: 1px solid var(--border);
|
|---|
| 148 | color: var(--text);
|
|---|
| 149 | padding: 10px 12px;
|
|---|
| 150 | border-radius: var(--radius-sm);
|
|---|
| 151 | font-size: 14px;
|
|---|
| 152 | outline: none;
|
|---|
| 153 | }
|
|---|
| 154 | .field input:focus, input:focus, select:focus, textarea:focus {
|
|---|
| 155 | border-color: var(--accent-border);
|
|---|
| 156 | box-shadow: 0 0 0 3px var(--accent-soft);
|
|---|
| 157 | }
|
|---|
| 158 |
|
|---|
| 159 | .switch { display: flex; align-items: center; gap: 8px; font-size: 12.5px; color: var(--text-dim); cursor: pointer; }
|
|---|
| 160 | .switch input { accent-color: var(--accent); width: 15px; height: 15px; }
|
|---|
| 161 |
|
|---|
| 162 | .toast-stack {
|
|---|
| 163 | position: fixed; top: calc(var(--titlebar-h) + 14px); right: 16px; z-index: 900;
|
|---|
| 164 | display: flex; flex-direction: column; gap: 8px; align-items: flex-end;
|
|---|
| 165 | }
|
|---|
| 166 | .toast {
|
|---|
| 167 | background: var(--bg-elevated); border: 1px solid var(--border);
|
|---|
| 168 | color: var(--text); padding: 12px 16px; border-radius: var(--radius-sm);
|
|---|
| 169 | font-size: 13px; box-shadow: var(--shadow-card);
|
|---|
| 170 | max-width: 340px; animation: toast-in .18s ease;
|
|---|
| 171 | border-left: 3px solid var(--accent);
|
|---|
| 172 | }
|
|---|
| 173 | .toast--error { border-left-color: var(--ember); }
|
|---|
| 174 | .toast--success { border-left-color: var(--sage); }
|
|---|
| 175 | @keyframes toast-in { from { opacity: 0; transform: translateY(-6px); } to { opacity: 1; transform: translateY(0); } }
|
|---|
| 176 |
|
|---|
| 177 | .view {
|
|---|
| 178 | height: calc(100vh - var(--titlebar-h));
|
|---|
| 179 | display: none;
|
|---|
| 180 | }
|
|---|
| 181 | .view--login {
|
|---|
| 182 | align-items: center; justify-content: center;
|
|---|
| 183 | background:
|
|---|
| 184 | radial-gradient(1200px 600px at 15% -10%, rgba(198,138,62,0.08), transparent 60%),
|
|---|
| 185 | radial-gradient(900px 500px at 100% 110%, rgba(124,154,108,0.06), transparent 60%),
|
|---|
| 186 | var(--bg);
|
|---|
| 187 | }
|
|---|
| 188 | .view--login.is-active { display: flex; }
|
|---|
| 189 |
|
|---|
| 190 | .login-card {
|
|---|
| 191 | width: 340px;
|
|---|
| 192 | background: var(--bg-panel);
|
|---|
| 193 | border: 1px solid var(--border-soft);
|
|---|
| 194 | border-radius: var(--radius-lg);
|
|---|
| 195 | padding: 36px 32px 30px;
|
|---|
| 196 | text-align: center;
|
|---|
| 197 | box-shadow: var(--shadow-card);
|
|---|
| 198 | }
|
|---|
| 199 | .login-card__mark { color: var(--accent); font-size: 20px; margin-bottom: 10px; }
|
|---|
| 200 | .login-card__title { font-family: var(--font-display); font-size: 22px; font-weight: 600; margin: 0 0 4px; }
|
|---|
| 201 | .login-card__subtitle { color: var(--text-dim); font-size: 12.5px; margin: 0 0 22px; }
|
|---|
| 202 |
|
|---|
| 203 | .pin-display { display: flex; justify-content: center; gap: 10px; margin-bottom: 6px; }
|
|---|
| 204 | .pin-dot {
|
|---|
| 205 | width: 13px; height: 13px; border-radius: 50%;
|
|---|
| 206 | border: 1.5px solid var(--border); background: transparent;
|
|---|
| 207 | transition: all .1s ease;
|
|---|
| 208 | }
|
|---|
| 209 | .pin-dot.is-filled { background: var(--accent); border-color: var(--accent); }
|
|---|
| 210 |
|
|---|
| 211 | .login-error {
|
|---|
| 212 | color: var(--ember); font-size: 12px; height: 16px; margin: 6px 0 14px;
|
|---|
| 213 | }
|
|---|
| 214 |
|
|---|
| 215 | .keypad {
|
|---|
| 216 | display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px;
|
|---|
| 217 | margin-bottom: 18px;
|
|---|
| 218 | }
|
|---|
| 219 | .keypad__key {
|
|---|
| 220 | background: var(--bg-inset); border: 1px solid var(--border-soft); color: var(--text);
|
|---|
| 221 | font-size: 17px; font-weight: 600; padding: 14px 0; border-radius: var(--radius-sm);
|
|---|
| 222 | cursor: pointer; font-family: var(--font-mono);
|
|---|
| 223 | }
|
|---|
| 224 | .keypad__key:hover { border-color: var(--accent-border); background: var(--bg-panel-hover); }
|
|---|
| 225 | .keypad__key:active { transform: scale(0.96); }
|
|---|
| 226 | .keypad__key--fn { font-family: var(--font-body); font-size: 12px; color: var(--text-dim); }
|
|---|
| 227 |
|
|---|
| 228 | .shell {
|
|---|
| 229 | height: calc(100vh - var(--titlebar-h));
|
|---|
| 230 | display: grid;
|
|---|
| 231 | grid-template-columns: 92px 1fr;
|
|---|
| 232 | }
|
|---|
| 233 | .shell[hidden] { display: none; }
|
|---|
| 234 |
|
|---|
| 235 | .sidebar {
|
|---|
| 236 | background: var(--bg-inset);
|
|---|
| 237 | border-right: 1px solid var(--border-soft);
|
|---|
| 238 | display: flex; flex-direction: column;
|
|---|
| 239 | padding: 16px 10px;
|
|---|
| 240 | overflow-y: auto;
|
|---|
| 241 | }
|
|---|
| 242 | .sidebar__group { display: flex; flex-direction: column; gap: 4px; }
|
|---|
| 243 | .sidebar__group--admin { margin-top: 20px; padding-top: 16px; border-top: 1px solid var(--border-soft); }
|
|---|
| 244 | .sidebar__label {
|
|---|
| 245 | font-size: 9.5px; text-transform: uppercase; letter-spacing: 0.08em;
|
|---|
| 246 | color: var(--text-faint); padding: 0 6px 8px;
|
|---|
| 247 | }
|
|---|
| 248 |
|
|---|
| 249 | .nav-item {
|
|---|
| 250 | display: flex; flex-direction: column; align-items: center; gap: 5px;
|
|---|
| 251 | background: transparent; border: none; color: var(--text-dim);
|
|---|
| 252 | padding: 10px 4px; border-radius: var(--radius-md); cursor: pointer;
|
|---|
| 253 | font-size: 10.5px; font-weight: 600;
|
|---|
| 254 | }
|
|---|
| 255 | .nav-item__icon { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }
|
|---|
| 256 | .nav-item:hover { background: var(--bg-panel-hover); color: var(--text); }
|
|---|
| 257 | .nav-item.is-active { background: var(--accent-soft); color: var(--accent-strong); }
|
|---|
| 258 | .nav-item.is-active .nav-item__icon { stroke: var(--accent-strong); }
|
|---|
| 259 |
|
|---|
| 260 | .sidebar__footer { margin-top: auto; padding-top: 14px; text-align: center; }
|
|---|
| 261 | .sidebar__clock { font-family: var(--font-mono); font-size: 11px; color: var(--text-faint); }
|
|---|
| 262 |
|
|---|
| 263 | .content { overflow-y: auto; padding: 26px 32px 40px; }
|
|---|
| 264 |
|
|---|
| 265 | .view-panel { display: none; animation: panel-in .15s ease; }
|
|---|
| 266 | .view-panel.is-active { display: block; }
|
|---|
| 267 | @keyframes panel-in { from { opacity: 0; transform: translateY(4px); } to { opacity: 1; transform: translateY(0); } }
|
|---|
| 268 |
|
|---|
| 269 | .panel-head {
|
|---|
| 270 | display: flex; align-items: flex-end; justify-content: space-between;
|
|---|
| 271 | margin-bottom: 22px; gap: 16px; flex-wrap: wrap;
|
|---|
| 272 | }
|
|---|
| 273 | .panel-head--tight { margin-bottom: 14px; align-items: flex-start; }
|
|---|
| 274 | .panel-title { font-family: var(--font-display); font-size: 26px; font-weight: 600; margin: 0 0 4px; }
|
|---|
| 275 | .panel-subtitle { color: var(--text-dim); font-size: 13px; margin: 0; }
|
|---|
| 276 |
|
|---|
| 277 | .legend { display: flex; gap: 16px; font-size: 12px; color: var(--text-dim); }
|
|---|
| 278 | .legend__item { display: flex; align-items: center; gap: 6px; }
|
|---|
| 279 | .dot { width: 8px; height: 8px; border-radius: 50%; display: inline-block; }
|
|---|
| 280 | .dot--free { background: var(--sage); }
|
|---|
| 281 | .dot--occupied { background: var(--accent); }
|
|---|
| 282 | .dot--reserved { background: var(--plum); }
|
|---|
| 283 |
|
|---|
| 284 | .panel-head__tools { display: flex; align-items: center; gap: 16px; }
|
|---|
| 285 | .search-input {
|
|---|
| 286 | background: var(--bg-inset); border: 1px solid var(--border); color: var(--text);
|
|---|
| 287 | padding: 9px 14px; border-radius: 999px; font-size: 13px; width: 220px; outline: none;
|
|---|
| 288 | }
|
|---|
| 289 | .search-input:focus { border-color: var(--accent-border); box-shadow: 0 0 0 3px var(--accent-soft); }
|
|---|
| 290 | .search-input::placeholder { color: var(--text-faint); }
|
|---|
| 291 |
|
|---|
| 292 | .tables-grid {
|
|---|
| 293 | display: grid;
|
|---|
| 294 | grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
|
|---|
| 295 | gap: 14px;
|
|---|
| 296 | }
|
|---|
| 297 | .table-card {
|
|---|
| 298 | background: var(--bg-panel); border: 1px solid var(--border-soft);
|
|---|
| 299 | border-radius: var(--radius-md); padding: 18px 16px;
|
|---|
| 300 | cursor: pointer; text-align: left; position: relative;
|
|---|
| 301 | transition: border-color .12s ease, transform .08s ease;
|
|---|
| 302 | }
|
|---|
| 303 | .table-card:hover { border-color: var(--accent-border); transform: translateY(-2px); }
|
|---|
| 304 | .table-card:focus-visible { outline: 2px solid var(--accent-border); outline-offset: 2px; }
|
|---|
| 305 | .table-card [data-action="reserve"] { margin-top: 12px; padding: 5px 10px; font-size: 11px; }
|
|---|
| 306 | .table-card__number { font-family: var(--font-display); font-size: 22px; font-weight: 600; }
|
|---|
| 307 | .table-card__capacity { font-size: 11.5px; color: var(--text-dim); margin-top: 2px; }
|
|---|
| 308 | .table-card__status {
|
|---|
| 309 | position: absolute; top: 14px; right: 14px;
|
|---|
| 310 | width: 9px; height: 9px; border-radius: 50%;
|
|---|
| 311 | }
|
|---|
| 312 | .table-card--free { border-left: 3px solid var(--sage); }
|
|---|
| 313 | .table-card--free .table-card__status { background: var(--sage); }
|
|---|
| 314 | .table-card--occupied { border-left: 3px solid var(--accent); }
|
|---|
| 315 | .table-card--occupied .table-card__status { background: var(--accent); }
|
|---|
| 316 | .table-card--reserved { border-left: 3px solid var(--plum); }
|
|---|
| 317 | .table-card--reserved .table-card__status { background: var(--plum); }
|
|---|
| 318 |
|
|---|
| 319 | .order-layout { display: grid; grid-template-columns: 1fr 340px; gap: 24px; height: calc(100vh - var(--titlebar-h) - 52px); }
|
|---|
| 320 | .order-menu { display: flex; flex-direction: column; min-height: 0; }
|
|---|
| 321 | #order-table-title { display: inline-block; margin-top: 8px; }
|
|---|
| 322 |
|
|---|
| 323 | .category-tabs { display: flex; gap: 8px; flex-wrap: wrap; margin: 14px 0 18px; }
|
|---|
| 324 | .category-tab {
|
|---|
| 325 | background: var(--bg-panel); border: 1px solid var(--border-soft); color: var(--text-dim);
|
|---|
| 326 | padding: 8px 16px; border-radius: 999px; font-size: 12.5px; font-weight: 600; cursor: pointer;
|
|---|
| 327 | }
|
|---|
| 328 | .category-tab.is-active { background: var(--accent-soft); border-color: var(--accent-border); color: var(--accent-strong); }
|
|---|
| 329 |
|
|---|
| 330 | .product-grid {
|
|---|
| 331 | display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
|
|---|
| 332 | gap: 12px; overflow-y: auto; padding-bottom: 20px; align-content: start;
|
|---|
| 333 | }
|
|---|
| 334 | .product-card {
|
|---|
| 335 | background: var(--bg-panel); border: 1px solid var(--border-soft); border-radius: var(--radius-md);
|
|---|
| 336 | padding: 14px; cursor: pointer; text-align: left; display: flex; flex-direction: column; gap: 6px;
|
|---|
| 337 | }
|
|---|
| 338 | .product-card:hover { border-color: var(--accent-border); }
|
|---|
| 339 | .product-card__name { font-size: 13.5px; font-weight: 700; line-height: 1.3; color: beige}
|
|---|
| 340 | .product-card__desc { font-size: 11px; color: var(--text-faint); line-height: 1.4; min-height: 14px; }
|
|---|
| 341 | .product-card__price { font-family: var(--font-mono); font-size: 14px; color: var(--accent-strong); margin-top: auto; }
|
|---|
| 342 |
|
|---|
| 343 | .order-cart {
|
|---|
| 344 | background: var(--bg-panel); border: 1px solid var(--border-soft); border-radius: var(--radius-lg);
|
|---|
| 345 | display: flex; flex-direction: column; overflow: hidden;
|
|---|
| 346 | }
|
|---|
| 347 | .order-cart__head { display: flex; align-items: center; justify-content: space-between; padding: 18px 18px 12px; }
|
|---|
| 348 | .order-cart__head h3 { font-family: var(--font-display); font-size: 17px; margin: 0; }
|
|---|
| 349 | .chip { font-size: 10.5px; text-transform: uppercase; letter-spacing: 0.04em; padding: 3px 9px; border-radius: 999px; background: var(--bg-inset); color: var(--text-dim); }
|
|---|
| 350 |
|
|---|
| 351 | .order-cart__items { flex: 1; overflow-y: auto; padding: 0 18px; }
|
|---|
| 352 | .empty-hint { color: var(--text-faint); font-size: 12.5px; text-align: center; padding: 30px 0; }
|
|---|
| 353 |
|
|---|
| 354 | .cart-item { display: flex; align-items: center; gap: 10px; padding: 12px 0; border-bottom: 1px solid var(--border-soft); }
|
|---|
| 355 | .cart-item__info { flex: 1; min-width: 0; }
|
|---|
| 356 | .cart-item__name { font-size: 13px; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
|
|---|
| 357 | .cart-item__price { font-size: 11px; color: var(--text-faint); font-family: var(--font-mono); }
|
|---|
| 358 | .cart-item__qty { display: flex; align-items: center; gap: 6px; }
|
|---|
| 359 | .qty-btn {
|
|---|
| 360 | width: 22px; height: 22px; border-radius: 5px; border: 1px solid var(--border);
|
|---|
| 361 | background: var(--bg-inset); color: var(--text); cursor: pointer; font-size: 13px; line-height: 1;
|
|---|
| 362 | display: flex; align-items: center; justify-content: center;
|
|---|
| 363 | }
|
|---|
| 364 | .qty-btn:hover { border-color: var(--accent-border); }
|
|---|
| 365 | .cart-item__qty-val { font-family: var(--font-mono); font-size: 12.5px; width: 18px; text-align: center; }
|
|---|
| 366 | .cart-item__remove { color: var(--text-faint); background: transparent; border: none; cursor: pointer; font-size: 15px; padding: 4px; }
|
|---|
| 367 | .cart-item__remove:hover { color: var(--ember); }
|
|---|
| 368 |
|
|---|
| 369 | .order-cart__summary { padding: 14px 18px; border-top: 1px solid var(--border-soft); }
|
|---|
| 370 | .summary-row { display: flex; justify-content: space-between; font-size: 13px; color: var(--text-dim); padding: 3px 0; }
|
|---|
| 371 | .summary-row--total { font-size: 18px; font-weight: 700; color: var(--text); font-family: var(--font-mono); padding-top: 8px; }
|
|---|
| 372 | .order-cart__actions { display: flex; flex-direction: column; gap: 8px; padding: 14px 18px 18px; }
|
|---|
| 373 |
|
|---|
| 374 | .kitchen-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: 16px; }
|
|---|
| 375 | .ticket {
|
|---|
| 376 | background: var(--bg-panel); border: 1px solid var(--border-soft); border-top: 3px solid var(--accent);
|
|---|
| 377 | border-radius: var(--radius-md); padding: 16px; display: flex; flex-direction: column; gap: 10px;
|
|---|
| 378 | }
|
|---|
| 379 | .ticket__head { display: flex; justify-content: space-between; align-items: baseline; }
|
|---|
| 380 | .ticket__table { font-family: var(--font-display); font-size: 18px; font-weight: 600; }
|
|---|
| 381 | .ticket__time { font-family: var(--font-mono); font-size: 11px; color: var(--text-faint); }
|
|---|
| 382 | .ticket__items { display: flex; flex-direction: column; gap: 6px; }
|
|---|
| 383 | .ticket__item { display: flex; justify-content: space-between; font-size: 13px; border-bottom: 1px dashed var(--border-soft); padding-bottom: 6px; }
|
|---|
| 384 | .ticket__item-qty { font-family: var(--font-mono); color: var(--accent-strong); font-weight: 700; }
|
|---|
| 385 | .ticket__footer { margin-top: auto; padding-top: 6px; }
|
|---|
| 386 |
|
|---|
| 387 | .table-wrap { overflow-x: auto; border: 1px solid var(--border-soft); border-radius: var(--radius-md); }
|
|---|
| 388 | .data-table { width: 100%; border-collapse: collapse; font-size: 13px; }
|
|---|
| 389 | .data-table th {
|
|---|
| 390 | text-align: left; font-size: 10.5px; text-transform: uppercase; letter-spacing: 0.05em;
|
|---|
| 391 | color: var(--text-faint); background: var(--bg-inset); padding: 11px 14px; font-weight: 600;
|
|---|
| 392 | }
|
|---|
| 393 | .data-table td { padding: 11px 14px; border-top: 1px solid var(--border-soft); color: var(--text); }
|
|---|
| 394 | .data-table tbody tr:hover { background: var(--bg-panel-hover); }
|
|---|
| 395 | .data-table .num { font-family: var(--font-mono); }
|
|---|
| 396 | .row-actions { display: flex; gap: 6px; justify-content: flex-end; flex-wrap: wrap; }
|
|---|
| 397 |
|
|---|
| 398 | .badge { padding: 3px 9px; border-radius: 999px; font-size: 10.5px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.03em; }
|
|---|
| 399 | .badge--ok { background: var(--sage-soft); color: var(--sage); }
|
|---|
| 400 | .badge--warn { background: var(--ember-soft); color: var(--ember); }
|
|---|
| 401 | .badge--muted { background: var(--bg-inset); color: var(--text-faint); }
|
|---|
| 402 |
|
|---|
| 403 | .stat-cards { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 14px; margin-bottom: 26px; }
|
|---|
| 404 | .stat-card { background: var(--bg-panel); border: 1px solid var(--border-soft); border-radius: var(--radius-md); padding: 18px 20px; }
|
|---|
| 405 | .stat-card__label { display: block; font-size: 11.5px; color: var(--text-dim); margin-bottom: 8px; }
|
|---|
| 406 | .stat-card__value { display: block; font-family: var(--font-mono); font-size: 26px; font-weight: 700; color: var(--accent-strong); }
|
|---|
| 407 | .stat-card__value--sm { font-family: var(--font-display); font-size: 18px; color: var(--text); }
|
|---|
| 408 |
|
|---|
| 409 | .report-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 22px; align-items: start; }
|
|---|
| 410 | .report-block h3 { font-family: var(--font-display); font-size: 16px; margin: 0 0 12px; }
|
|---|
| 411 | .inline-form { display: flex; gap: 8px; margin-bottom: 12px; flex-wrap: wrap; }
|
|---|
| 412 | .inline-form input { flex: 1; min-width: 110px; }
|
|---|
| 413 |
|
|---|
| 414 | .admin-grid { display: grid; grid-template-columns: 1fr 1.4fr; gap: 22px; align-items: start; }
|
|---|
| 415 | .admin-block__head { display: flex; justify-content: space-between; align-items: center; margin-bottom: 12px; }
|
|---|
| 416 | .admin-block__head h3 { font-family: var(--font-display); font-size: 16px; margin: 0; }
|
|---|
| 417 | .admin-block__head-tools { display: flex; align-items: center; gap: 12px; }
|
|---|
| 418 | .admin-block__head-tools .search-input { width: 200px; }
|
|---|
| 419 |
|
|---|
| 420 | .settings-form { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; max-width: 640px; }
|
|---|
| 421 | .settings-form button { grid-column: 1 / -1; justify-self: start; margin-top: 6px; }
|
|---|
| 422 |
|
|---|
| 423 | .modal-overlay {
|
|---|
| 424 | position: fixed; inset: 0; background: rgba(10,9,8,0.6); backdrop-filter: blur(2px);
|
|---|
| 425 | display: flex; align-items: center; justify-content: center; z-index: 500;
|
|---|
| 426 | }
|
|---|
| 427 | .modal-overlay[hidden] { display: none; }
|
|---|
| 428 | .modal {
|
|---|
| 429 | background: var(--bg-panel); border: 1px solid var(--border-soft); border-radius: var(--radius-lg);
|
|---|
| 430 | padding: 26px 26px 22px; width: 420px; max-width: 92vw; max-height: 86vh; overflow-y: auto;
|
|---|
| 431 | box-shadow: var(--shadow-modal); animation: modal-in .14s ease;
|
|---|
| 432 | }
|
|---|
| 433 | @keyframes modal-in { from { opacity: 0; transform: scale(.97) translateY(6px); } to { opacity: 1; transform: scale(1) translateY(0); } }
|
|---|
| 434 | .modal h2 { font-family: var(--font-display); font-size: 19px; margin: 0 0 4px; }
|
|---|
| 435 | .modal p.modal-sub { color: var(--text-dim); font-size: 12.5px; margin: 0 0 18px; }
|
|---|
| 436 | .modal-form { display: flex; flex-direction: column; gap: 14px; }
|
|---|
| 437 | .modal-form .field-row { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
|
|---|
| 438 | .modal-actions { display: flex; justify-content: flex-end; gap: 10px; margin-top: 6px; }
|
|---|
| 439 | .modal-close { position: absolute; top: 18px; right: 18px; background: none; border: none; color: var(--text-faint); font-size: 16px; cursor: pointer; }
|
|---|
| 440 |
|
|---|
| 441 | .pay-methods { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin: 16px 0 20px; }
|
|---|
| 442 | .pay-method {
|
|---|
| 443 | padding: 18px 10px; text-align: center; border-radius: var(--radius-md);
|
|---|
| 444 | border: 1px solid var(--border); background: var(--bg-inset); cursor: pointer; color: var(--text-dim);
|
|---|
| 445 | font-weight: 600; font-size: 13px;
|
|---|
| 446 | }
|
|---|
| 447 | .pay-method.is-selected { border-color: var(--accent); color: var(--accent-strong); background: var(--accent-soft); }
|
|---|
| 448 |
|
|---|
| 449 | .receipt { font-family: var(--font-mono); font-size: 12.5px; background: var(--bg-inset); border: 1px dashed var(--border); border-radius: var(--radius-sm); padding: 18px; }
|
|---|
| 450 | .receipt__title { font-family: var(--font-display); font-size: 16px; text-align: center; margin: 0 0 2px; }
|
|---|
| 451 | .receipt__meta { text-align: center; color: var(--text-faint); font-size: 11px; margin-bottom: 12px; }
|
|---|
| 452 | .receipt__line { display: flex; justify-content: space-between; padding: 3px 0; }
|
|---|
| 453 | .receipt__rule { border-top: 1px dashed var(--border); margin: 10px 0; }
|
|---|
| 454 | .receipt__total { display: flex; justify-content: space-between; font-weight: 700; font-size: 14px; }
|
|---|
| 455 |
|
|---|
| 456 | @media print {
|
|---|
| 457 | @page { margin: 0; }
|
|---|
| 458 | .titlebar, .shell, .toast-stack { display: none !important; }
|
|---|
| 459 | body * { visibility: hidden; }
|
|---|
| 460 | .receipt, .receipt * { visibility: visible; }
|
|---|
| 461 | .receipt {
|
|---|
| 462 | position: absolute; top: 0; left: 0; width: 100%;
|
|---|
| 463 | background: #fff; color: #000; border: none; padding: 20px 16px;
|
|---|
| 464 | }
|
|---|
| 465 | .receipt__rule { border-top: 1px dashed #999; }
|
|---|
| 466 | .receipt__meta { color: #444; }
|
|---|
| 467 | }
|
|---|
| 468 |
|
|---|
| 469 | @media (max-width: 980px) {
|
|---|
| 470 | .order-layout { grid-template-columns: 1fr; height: auto; }
|
|---|
| 471 | .admin-grid, .report-grid { grid-template-columns: 1fr; }
|
|---|
| 472 | .shell { grid-template-columns: 76px 1fr; }
|
|---|
| 473 | }
|
|---|
| 474 |
|
|---|
| 475 | .kiosk-mode .sidebar,
|
|---|
| 476 | .kiosk-mode .titlebar__brand .titlebar__mark,
|
|---|
| 477 | .kiosk-mode #btn-logout {
|
|---|
| 478 | display: none !important;
|
|---|
| 479 | }
|
|---|
| 480 |
|
|---|
| 481 | .kiosk-mode .shell {
|
|---|
| 482 | grid-template-columns: 1fr;
|
|---|
| 483 | }
|
|---|
| 484 |
|
|---|
| 485 | .kiosk-mode .content {
|
|---|
| 486 | padding: 22px 36px 40px;
|
|---|
| 487 | }
|
|---|
| 488 |
|
|---|
| 489 | .kiosk-mode .panel-head {
|
|---|
| 490 | margin-bottom: 28px;
|
|---|
| 491 | }
|
|---|
| 492 |
|
|---|
| 493 | .kiosk-mode .panel-title {
|
|---|
| 494 | font-size: 26px;
|
|---|
| 495 | }
|
|---|
| 496 |
|
|---|
| 497 | .kiosk-mode #btn-refresh-kitchen {
|
|---|
| 498 | display: none;
|
|---|
| 499 | }
|
|---|
| 500 |
|
|---|
| 501 | .kiosk-mode .kitchen-grid {
|
|---|
| 502 | grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
|
|---|
| 503 | gap: 20px;
|
|---|
| 504 | }
|
|---|
| 505 |
|
|---|
| 506 | .kiosk-mode .ticket {
|
|---|
| 507 | font-size: 15px;
|
|---|
| 508 | }
|
|---|
| 509 |
|
|---|
| 510 | .kiosk-mode .ticket__table {
|
|---|
| 511 | font-size: 17px;
|
|---|
| 512 | } |
|---|
