/* Local brand fonts — Rabar is also preloaded + declared in with absolute URL */ @font-face { font-family: "Rabar"; src: url("../fonts/Rabar_038.ttf") format("truetype"); font-weight: normal; font-style: normal; font-display: swap; unicode-range: U+0600-06FF, U+0750-077F, U+08A0-08FF, U+FB50-FDFF, U+FE70-FEFF, U+200C-200D; } :root { --ink: #1f1916; --ink-soft: #5c5149; --muted: #8f8278; --line: #eadfd3; --line-strong: #d9c8b6; --surface: #ffffff; --surface-2: #faf6f1; --bg: #f5efe8; --ember: #e85d04; --ember-deep: #c2410c; --ember-soft: #fff4eb; --ember-glow: rgba(232, 93, 4, 0.16); --ok: #2a7a45; --ok-soft: #e9f7ee; --danger: #c0352d; --danger-soft: #fdeceb; --info: #2b5f9e; --info-soft: #eaf2fb; --warn: #9a6b12; --warn-soft: #fff7e5; --shadow: 0 8px 24px rgba(31, 25, 22, 0.06); --radius: 16px; --radius-sm: 12px; /* No Google Fonts — InfinityFree often delays/blocks them */ --font: "Segoe UI", Tahoma, "Noto Naskh Arabic", "Noto Sans Arabic", sans-serif; --font-ckb: "Rabar", Tahoma, "Segoe UI", sans-serif; --ease: cubic-bezier(0.22, 1, 0.36, 1); } * { box-sizing: border-box; } body { margin: 0; font-family: var(--font); color: var(--ink); background: radial-gradient(900px 380px at 10% -5%, rgba(232, 93, 4, 0.1), transparent 55%), radial-gradient(700px 320px at 100% 0%, rgba(194, 65, 12, 0.06), transparent 50%), var(--bg); min-height: 100vh; } html[lang="ckb"] body, html[lang="ckb"] button, html[lang="ckb"] input, html[lang="ckb"] select, html[lang="ckb"] textarea { font-family: var(--font-ckb); } /* Reduce layout jump while Rabar is still downloading */ html.font-ckb-pending body { font-family: Tahoma, "Segoe UI", sans-serif; } html[dir="rtl"] body { font-size: 1.04rem; } a { color: var(--ember-deep); text-decoration: none; } a:hover { color: var(--ember); } /* —— Topbar —— */ .topbar { display: flex; align-items: center; gap: 1rem; padding: 0.7rem 1.25rem; background: rgba(255, 255, 255, 0.88); border-bottom: 1px solid var(--line); position: sticky; top: 0; z-index: 30; backdrop-filter: blur(12px); } .brand { display: inline-flex; align-items: center; text-decoration: none; flex-shrink: 0; } .brand:hover { text-decoration: none; } .brand-logo { height: 48px; width: auto; display: block; object-fit: contain; } .nav { display: flex; gap: 0.3rem; flex: 1; flex-wrap: wrap; align-items: center; } .nav a, .nav-link { display: inline-flex; align-items: center; gap: 0.4rem; padding: 0.5rem 0.85rem; color: var(--muted); text-decoration: none; font-weight: 650; font-size: 0.9rem; border-radius: 999px; transition: color 0.15s var(--ease), background 0.15s var(--ease); } .nav a:hover, .nav-link:hover { color: var(--ink); background: var(--surface-2); text-decoration: none; } .nav a.active, .nav-link.active { color: var(--ember-deep); background: var(--ember-soft); } .nav-icon { font-size: 1.05rem; flex-shrink: 0; } .ui-icon { display: inline-block; width: 1.15em; height: 1.15em; vertical-align: -0.18em; flex-shrink: 0; } .with-icon { display: inline-flex; align-items: center; gap: 0.4rem; } .heading-icon { display: inline-flex; align-items: center; gap: 0.5rem; } .heading-icon .ui-icon, .heading-icon-lg { font-size: 1.15em; color: var(--ember); } .user-chip { display: inline-flex; align-items: center; gap: 0.35rem; } .stat .label .with-icon, .stat .label.with-icon { display: inline-flex; align-items: center; gap: 0.35rem; } .badge .with-icon { gap: 0.3rem; } .user-meta { display: flex; align-items: center; gap: 0.7rem; color: var(--muted); font-size: 0.85rem; } .lang-switch { display: inline-flex; gap: 0.2rem; background: var(--surface-2); border: 1px solid var(--line); border-radius: 999px; padding: 0.2rem; } .lang-switch a { padding: 0.35rem 0.7rem; border-radius: 999px; color: var(--muted); text-decoration: none; font-weight: 700; font-size: 0.8rem; transition: background 0.15s var(--ease), color 0.15s var(--ease); } .lang-switch a.active, .lang-switch a:hover { background: var(--ember); color: #fff; text-decoration: none; } .main { padding: 1.15rem 1.25rem 2.25rem; max-width: 1440px; margin: 0 auto; } /* —— Panels —— */ .panel { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); box-shadow: var(--shadow); padding: 1.05rem; } .panel-head { display: flex; align-items: center; justify-content: space-between; gap: 0.75rem; margin-bottom: 0.95rem; flex-wrap: wrap; } .panel-head h1, .panel-head h2, .panel h2 { margin: 0; font-size: 1.05rem; font-weight: 750; letter-spacing: -0.02em; color: var(--ink); } .muted { color: var(--muted); } /* —— Buttons —— */ .btn { appearance: none; display: inline-flex; align-items: center; justify-content: center; gap: 0.4rem; min-height: 42px; padding: 0.6rem 1.05rem; border: 1px solid transparent; border-radius: 12px; background: var(--surface-2); color: var(--ink); font: inherit; font-weight: 700; font-size: 0.9rem; cursor: pointer; transition: transform 0.14s var(--ease), background 0.14s var(--ease), border-color 0.14s var(--ease), box-shadow 0.14s var(--ease); } .btn:hover:not(:disabled) { transform: translateY(-1px); } .btn:active:not(:disabled) { transform: translateY(1px) scale(0.98); } .btn:disabled { opacity: 0.45; cursor: not-allowed; } .btn-primary { background: var(--ember); color: #fff; box-shadow: 0 6px 16px var(--ember-glow); } .btn-primary:hover:not(:disabled) { background: #f06a14; } .btn-secondary { background: #fff; border-color: var(--line-strong); } .btn-secondary:hover:not(:disabled) { border-color: var(--ember); background: var(--ember-soft); } .btn-danger { background: var(--danger-soft); color: var(--danger); border-color: #f3c4c0; } .btn-ghost { background: transparent; border-color: var(--line); min-height: 36px; padding: 0.4rem 0.8rem; } .btn-ghost:hover:not(:disabled) { background: var(--surface-2); transform: none; } .btn-block { width: 100%; min-height: 48px; font-size: 0.95rem; } /* —— Fields —— */ .field, .login-card label, .stack-form label, .inline-form label { display: grid; gap: 0.4rem; font-weight: 650; font-size: 0.86rem; color: var(--ink-soft); } .field > span { font-weight: 650; font-size: 0.86rem; color: var(--ink-soft); } input, select, textarea { appearance: none; width: 100%; font: inherit; font-weight: 550; font-size: 0.98rem; color: var(--ink); padding: 0.75rem 0.9rem; min-height: 46px; border: 1px solid var(--line-strong); border-radius: 12px; background: #fff; transition: border-color 0.15s var(--ease), box-shadow 0.15s var(--ease); } input[type="checkbox"], input[type="radio"] { appearance: auto; width: 1.1rem; height: 1.1rem; min-height: 0; padding: 0; border: none; border-radius: 0; background: transparent; box-shadow: none; flex-shrink: 0; } input[type="checkbox"]:hover, input[type="radio"]:hover, input[type="checkbox"]:focus, input[type="radio"]:focus { border-color: transparent; box-shadow: none; } .stack-form label.check, .inline-form label.check { display: inline-flex; align-items: center; gap: 0.4rem; } input:hover, select:hover, textarea:hover { border-color: #c9b5a1; } input:focus, select:focus, textarea:focus { outline: none; border-color: var(--ember); box-shadow: 0 0 0 4px var(--ember-glow); } select { background-image: linear-gradient(45deg, transparent 50%, var(--muted) 50%), linear-gradient(135deg, var(--muted) 50%, transparent 50%); background-position: calc(100% - 16px) calc(50% - 2px), calc(100% - 11px) calc(50% - 2px); background-size: 5px 5px, 5px 5px; background-repeat: no-repeat; padding-inline-end: 2rem; } html[dir="rtl"] select { background-position: 11px calc(50% - 2px), 16px calc(50% - 2px); } .check { display: inline-flex; align-items: center; gap: 0.4rem; font-size: 0.88rem; font-weight: 600; min-height: 42px; } .check input[type="checkbox"] { width: 18px; height: 18px; min-height: 18px; padding: 0; accent-color: var(--ember); } /* —— Badges / alerts —— */ .badge { display: inline-flex; align-items: center; padding: 0.25rem 0.6rem; border-radius: 999px; font-size: 0.72rem; font-weight: 750; text-transform: uppercase; letter-spacing: 0.03em; background: var(--surface-2); color: var(--ink-soft); } .badge-open { background: var(--warn-soft); color: var(--warn); } .badge-sent { background: var(--info-soft); color: var(--info); } .badge-accepted { background: var(--ok-soft); color: var(--ok); } .badge-paid { background: #eee8e1; color: #6b6158; } .badge-available { background: var(--ok-soft); color: var(--ok); } .badge-occupied { background: var(--ember-soft); color: var(--ember-deep); } .alert { padding: 0.8rem 1rem; border-radius: 12px; margin-bottom: 0.75rem; font-weight: 600; font-size: 0.9rem; } .alert-error { background: var(--danger-soft); color: var(--danger); border: 1px solid #f3c4c0; } .alert-ok { background: var(--ok-soft); color: var(--ok); border: 1px solid #bde5cb; } .empty-state { color: var(--muted); text-align: center; padding: 2.25rem 1rem; font-weight: 550; } /* —— Login —— */ .login-page { min-height: 100vh; display: grid; place-items: center; padding: 1.25rem; position: relative; overflow: hidden; } .login-atmosphere { position: absolute; inset: 0; pointer-events: none; background: radial-gradient(ellipse 60% 45% at 50% 15%, rgba(232, 93, 4, 0.18), transparent 60%), radial-gradient(ellipse 40% 35% at 85% 85%, rgba(194, 65, 12, 0.08), transparent 55%); } .login-shell { position: relative; z-index: 1; width: min(100%, 420px); } .login-card { width: 100%; background: rgba(255, 255, 255, 0.94); border: 1px solid var(--line); border-radius: 22px; padding: 1.75rem 1.5rem; display: grid; gap: 0.95rem; box-shadow: var(--shadow); backdrop-filter: blur(10px); } .login-brand { text-align: center; display: grid; justify-items: center; margin: 0.1rem 0 0.2rem; } .login-logo { height: 120px; width: auto; max-width: 100%; object-fit: contain; } .login-lead { text-align: center; margin: 0; } .login-lang { justify-content: center; margin-inline: auto; } /* —— POS —— */ .pos-layout { display: grid; grid-template-columns: 230px minmax(0, 1fr) 340px; gap: 1rem; align-items: start; } .pos-side { display: grid; gap: 1rem; } .table-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 0.55rem; } .table-btn { appearance: none; border: 1px solid var(--line); background: var(--surface-2); border-radius: 14px; padding: 0.9rem 0.45rem; cursor: pointer; display: grid; gap: 0.2rem; font: inherit; transition: transform 0.14s var(--ease), border-color 0.14s var(--ease), background 0.14s var(--ease), box-shadow 0.14s var(--ease); } .table-btn:hover { transform: translateY(-2px); border-color: #dfc9b2; background: #fff; } .table-btn .num { font-size: 1.4rem; font-weight: 800; letter-spacing: -0.03em; } .table-btn .st { font-size: 0.7rem; font-weight: 700; color: var(--muted); text-transform: uppercase; letter-spacing: 0.04em; } .table-btn.occupied { background: var(--ember-soft); border-color: #f0bf95; } .table-btn.occupied .st { color: var(--ember-deep); } .table-btn.active { border-color: var(--ember); background: #fff; box-shadow: 0 0 0 3px var(--ember-glow); } .cat-tabs { display: flex; flex-wrap: wrap; gap: 0.4rem; justify-content: flex-start; } html[dir="rtl"] .cat-tabs { justify-content: flex-end; } html[dir="rtl"] .panel-head { flex-direction: row; } html[dir="rtl"] .pos-menu .panel-head { justify-content: space-between; } .chip { appearance: none; border: 1px solid var(--line); background: #fff; color: var(--ink-soft); border-radius: 999px; padding: 0.4rem 0.85rem; font: inherit; font-weight: 650; font-size: 0.84rem; cursor: pointer; transition: background 0.14s var(--ease), border-color 0.14s var(--ease), color 0.14s var(--ease); } .chip:hover { border-color: #dfc9b2; } .chip.active { background: var(--ember); border-color: var(--ember); color: #fff; } .menu-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 0.75rem; max-height: calc(100vh - 180px); overflow: auto; } .menu-item { appearance: none; border: 1px solid var(--line); background: #fff; border-radius: 14px; padding: 0; text-align: start; cursor: pointer; font: inherit; display: grid; grid-template-rows: 120px auto; overflow: hidden; min-height: 0; transition: transform 0.14s var(--ease), border-color 0.14s var(--ease), box-shadow 0.14s var(--ease); } .menu-item:hover:not(:disabled) { transform: translateY(-2px); border-color: #f0bf95; box-shadow: var(--shadow); } .menu-item:active:not(:disabled) { transform: scale(0.98); } .menu-item:disabled { opacity: 0.4; cursor: not-allowed; } .menu-photo { display: block; width: 100%; height: 120px; background: var(--surface-2); overflow: hidden; } .menu-photo img { width: 100%; height: 100%; object-fit: cover; display: block; } .menu-photo-empty { background: linear-gradient(135deg, #f7eee4, #efe2d4); position: relative; } .menu-photo-empty::after { content: ""; position: absolute; inset: 0; margin: auto; width: 36px; height: 36px; border-radius: 50%; background: rgba(232, 93, 4, 0.18); } .menu-meta { display: grid; gap: 0.3rem; padding: 0.75rem 0.85rem 0.9rem; } .menu-item .name { font-weight: 700; line-height: 1.3; } .menu-item .price { color: var(--ember-deep); font-weight: 800; font-size: 1rem; } .food-admin-list { display: grid; gap: 0.65rem; margin: 1rem 1.1rem 1.15rem; } .food-admin-card.is-editing { border-color: #f0bf95; box-shadow: 0 0 0 3px var(--ember-glow); } .food-admin-card.is-editing .food-admin-summary { border-bottom: 1px solid var(--line); } .food-admin-summary { display: grid; grid-template-columns: 72px 1fr auto; gap: 0.85rem; align-items: center; padding: 0.75rem; } .food-admin-thumb { width: 72px; height: 72px; border-radius: 12px; overflow: hidden; background: var(--surface-2); border: 1px solid var(--line); flex-shrink: 0; } .food-admin-thumb img { width: 100%; height: 100%; object-fit: cover; display: block; } .food-admin-placeholder { width: 100%; height: 100%; background: linear-gradient(135deg, #f7eee4, #efe2d4); } .food-admin-info { display: grid; gap: 0.15rem; min-width: 0; } .food-admin-info strong { font-size: 1rem; line-height: 1.3; } .food-admin-price { font-weight: 800; color: var(--ember-deep); } .food-admin-summary-actions { display: flex; flex-wrap: wrap; gap: 0.4rem; align-items: center; } .food-admin-editor { padding: 0 0.85rem 0.95rem; border-top: 1px solid var(--line); background: var(--surface-2); } .food-admin-form { display: grid; gap: 0.55rem; padding-top: 0.85rem; min-width: 0; } .food-admin-actions { display: flex; gap: 0.45rem; flex-wrap: wrap; } @media (max-width: 720px) { .food-admin-summary { grid-template-columns: 64px 1fr; } .food-admin-summary-actions { grid-column: 1 / -1; } .food-admin-thumb { width: 64px; height: 64px; } } .cart-list { list-style: none; margin: 0; padding: 0; max-height: calc(100vh - 300px); overflow: auto; } .cart-line { display: flex; justify-content: space-between; gap: 0.65rem; padding: 0.75rem 0; border-bottom: 1px solid var(--line); align-items: center; } .cart-line .info { display: grid; gap: 0.15rem; min-width: 0; } .cart-line small { color: var(--muted); } .cart-line .line-price { font-size: 0.82rem; color: var(--muted); font-weight: 650; } .cart-line .qty { display: inline-flex; align-items: center; gap: 0.25rem; background: var(--surface-2); border-radius: 10px; padding: 0.15rem; } .cart-line .qty span { min-width: 1.4rem; text-align: center; font-weight: 750; } .cart-line .qty button { width: 30px; height: 30px; border-radius: 8px; border: none; background: #fff; cursor: pointer; font-weight: 700; box-shadow: 0 1px 2px rgba(31, 25, 22, 0.06); transition: background 0.12s var(--ease); } .cart-line .qty button:hover { background: var(--ember-soft); } .cart-footer { margin-top: 0.85rem; padding-top: 0.85rem; border-top: 1px solid var(--line); } .cart-total { display: flex; justify-content: space-between; align-items: baseline; margin-bottom: 0.85rem; padding: 0.85rem 1rem; background: var(--ember-soft); border: 1px solid #f0d0b4; border-radius: 14px; } .cart-total span { font-weight: 650; color: var(--ink-soft); } .cart-total strong { font-size: 1.45rem; color: var(--ember-deep); letter-spacing: -0.02em; } .cart-actions { display: grid; gap: 0.55rem; } .active-orders { display: grid; gap: 0.45rem; } .active-order-row { display: flex; align-items: stretch; gap: 0.4rem; } .active-order { appearance: none; display: flex; justify-content: space-between; align-items: center; gap: 0.5rem; flex: 1; min-width: 0; border: 1px solid var(--line); background: #fff; border-radius: 12px; padding: 0.65rem 0.75rem; cursor: pointer; font: inherit; font-weight: 650; text-align: start; transition: border-color 0.14s var(--ease), background 0.14s var(--ease); } .active-order:hover { border-color: #f0bf95; background: var(--ember-soft); } .btn-icon-only { min-width: 42px; width: 42px; padding: 0.45rem; flex-shrink: 0; } /* —— Kitchen —— */ .kitchen-page { max-width: 1400px; } .kitchen-head { margin-bottom: 1.15rem; } .kitchen-head h1 { margin: 0 0 0.3rem; font-size: 1.45rem; letter-spacing: -0.03em; } .kitchen-head .muted { margin: 0; } .kitchen-queue { display: grid; grid-template-columns: repeat(auto-fill, minmax(290px, 1fr)); gap: 1rem; } .kitchen-card { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); box-shadow: var(--shadow); padding: 1.05rem; display: grid; gap: 0.85rem; border-top: 3px solid var(--ember); } .kitchen-card header { display: flex; justify-content: space-between; gap: 0.5rem; align-items: baseline; } .kitchen-card h2 { margin: 0; font-size: 1.2rem; letter-spacing: -0.02em; } .kitchen-card .ord { color: var(--muted); font-weight: 650; font-size: 0.92rem; } .kitchen-card time { color: var(--muted); font-size: 0.86rem; font-weight: 600; } .k-items { list-style: none; margin: 0; padding: 0; } .k-items li { padding: 0.5rem 0; border-bottom: 1px dashed var(--line); font-size: 1.05rem; font-weight: 600; } .k-items em { display: block; color: var(--muted); font-size: 0.88rem; font-weight: 550; } .k-actions { display: grid; grid-template-columns: 1fr 1.4fr; gap: 0.55rem; } .kitchen-queue.has-orders { animation: queue-glow 2.8s ease-in-out infinite; } @keyframes queue-glow { 0%, 100% { filter: none; } 50% { filter: drop-shadow(0 0 10px var(--ember-glow)); } } /* —— Admin —— */ .admin-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; } .inline-form, .stack-form, .row-form { display: flex; flex-wrap: wrap; gap: 0.55rem; align-items: end; } .stack-form { flex-direction: column; align-items: stretch; } .admin-list { list-style: none; margin: 0.85rem 0 0; padding: 0; } .admin-list li { display: flex; justify-content: space-between; align-items: center; padding: 0.7rem 0; border-bottom: 1px solid var(--line); font-weight: 600; gap: 0.65rem; flex-wrap: wrap; } .category-row { align-items: stretch !important; } .category-edit-form { display: flex; flex-wrap: wrap; gap: 0.45rem; align-items: center; flex: 1; min-width: 200px; } .category-edit-form input[type="text"] { flex: 1; min-width: 120px; min-height: 40px; padding: 0.5rem 0.7rem; } .category-edit-form input[type="number"] { min-height: 40px; padding: 0.5rem 0.55rem; } .category-actions { display: flex; flex-wrap: wrap; gap: 0.4rem; align-items: center; } .table-wrap { overflow: auto; } .data-table { width: 100%; border-collapse: collapse; } .data-table th, .data-table td { text-align: left; padding: 0.75rem 0.5rem; border-bottom: 1px solid var(--line); vertical-align: middle; } .data-table th { font-size: 0.75rem; text-transform: uppercase; letter-spacing: 0.05em; color: var(--muted); font-weight: 750; } .row-form { display: grid; grid-template-columns: 1.4fr 1fr 0.7fr auto auto; gap: 0.45rem; width: calc(100% - 100px); float: left; align-items: center; } .row-form input, .row-form select { min-height: 42px; padding: 0.55rem 0.7rem; } .inline-delete { float: right; } .stat-row { display: flex; gap: 0.85rem; flex-wrap: wrap; } .stat { background: var(--ember-soft); border: 1px solid #f0d0b4; border-radius: 14px; padding: 1rem 1.2rem; min-width: 150px; } .stat .label { display: block; color: var(--muted); font-size: 0.78rem; margin-bottom: 0.25rem; font-weight: 650; } .invoice-actions { display: flex; flex-wrap: wrap; gap: 0.4rem; justify-content: flex-end; } .sales-date-form { margin: 0; } .sales-date-form .field { margin: 0; } .sales-date-form input[type="date"] { min-height: 40px; padding: 0.45rem 0.65rem; } .expense-form { margin: 1rem 1.1rem 1.15rem; max-width: 480px; } .expense-filters { margin: 0 1.1rem 1rem; display: grid; gap: 0.85rem; } .filter-presets { display: flex; flex-wrap: wrap; gap: 0.45rem; } .filter-presets .btn.active { background: var(--ember-soft); border-color: var(--ember); color: var(--ember-deep, #9a4a12); } .filter-grid { display: grid; width: 100%; grid-template-columns: repeat(auto-fill, minmax(160px, 1fr)); gap: 0.75rem 0.85rem; align-items: end; } .filter-grid .field { margin: 0; } .filter-actions { display: flex; flex-wrap: wrap; gap: 0.45rem; align-items: center; } .safe-balance-hero { margin: 0 1.1rem 1rem; padding: 1.25rem 1.35rem; border-radius: 16px; background: linear-gradient(145deg, #fff7f0 0%, #ffe8d4 55%, #ffdcc0 100%); border: 1px solid #f0d0b4; } .safe-balance-hero .label { display: block; color: var(--muted); font-size: 0.85rem; font-weight: 650; margin-bottom: 0.35rem; } .safe-balance-value { display: block; font-size: clamp(1.6rem, 4vw, 2.35rem); font-weight: 800; letter-spacing: -0.02em; color: #7a3a10; } .safe-balance-hint { margin: 0.45rem 0 0; font-size: 0.82rem; } .safe-breakdown { margin: 0 1.1rem 1.1rem; } .safe-actions { display: grid; width: 100%; grid-template-columns: 1fr; gap: 1rem; } @media (min-width: 720px) { .safe-actions { grid-template-columns: repeat(2, minmax(0, 1fr)); } } .safe-actions .panel { margin: 0; } .money-in { color: #1f7a3a; } .money-out { color: #b42318; } .users-hint { margin: 0 1.1rem 1rem; } .user-form, .user-edit-form { margin: 0 1.1rem 1.15rem; display: flex; flex-direction: column; gap: 0.85rem; align-items: stretch; width: auto; max-width: 100%; } .user-form-grid { display: grid; width: 100%; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0.75rem 0.85rem; align-items: end; } @media (min-width: 900px) { .user-form-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); } } .user-active-check { min-height: 46px; align-self: end; margin: 0; padding: 0 0.2rem 0.55rem; width: 100%; } .perm-fieldset { border: 1px solid var(--line); border-radius: 14px; padding: 0.85rem 1rem 1rem; margin: 0 0 1rem; background: var(--surface-2); width: 100%; } .perm-fieldset legend { padding: 0 0.35rem; font-weight: 750; font-size: 0.9rem; } .perm-grid { display: grid; width: 100%; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 0.55rem 0.75rem; } .perm-check { margin: 0; padding: 0.55rem 0.65rem; border-radius: 12px; background: #fff; border: 1px solid var(--line); } .perm-label { display: inline-flex; align-items: center; gap: 0.4rem; } .perm-note { margin: 0.75rem 0 0; font-size: 0.82rem; } .user-cards { display: grid; gap: 1rem; margin: 0 1.1rem 1.15rem; } .user-card { border: 1px solid var(--line); border-radius: 16px; padding: 1rem; background: #fff; } .user-card.is-inactive { opacity: 0.72; } .user-card-head { display: flex; flex-wrap: wrap; align-items: center; gap: 0.45rem; margin-bottom: 0.85rem; } .user-card-actions { display: flex; flex-wrap: wrap; gap: 0.45rem; } .user-delete-form { margin-top: 0.65rem; padding-top: 0.65rem; border-top: 1px dashed var(--line); } .invoice-reset-hint { margin: 0 1.1rem 1rem; } .invoice-reset-grid { display: grid; width: calc(100% - 2.2rem); max-width: 100%; grid-template-columns: 1fr; gap: 1rem; margin: 0 1.1rem 1.15rem; box-sizing: border-box; } @media (min-width: 720px) { .invoice-reset-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } } .invoice-reset-card { border: 1px solid var(--line); border-radius: 16px; padding: 1rem 1.1rem; background: #fff; display: flex; flex-direction: column; gap: 0.75rem; width: 100%; min-width: 0; box-sizing: border-box; } .invoice-reset-card h3 { margin: 0; font-size: 1rem; } .invoice-reset-card .muted { margin: 0; font-size: 0.85rem; } .invoice-reset-danger { border-color: #f3c4c0; background: #fff8f7; } html[dir="rtl"] .data-table th, html[dir="rtl"] .data-table td { text-align: right; } html[dir="rtl"] .menu-item, html[dir="rtl"] .cart-line .info, html[dir="rtl"] .active-order, html[dir="rtl"] .table-btn { text-align: right; } @media (max-width: 980px) { .pos-layout { grid-template-columns: 1fr; } .menu-grid { max-height: none; } .cart-list { max-height: none; } .admin-grid { grid-template-columns: 1fr; } .row-form { grid-template-columns: 1fr; width: 100%; float: none; } .inline-delete { float: none; margin-top: 0.35rem; } .topbar { flex-wrap: wrap; } .brand-logo { height: 44px; } }