/* ===================================================== Pharmacy System — Design Tokens (v2, minimal redesign) Light neutral surfaces + a single accent color that the 10-color picker changes. Sidebar is always light — the picker recolors buttons, links, and the active nav pill, not the whole sidebar. Dark mode is a separate axis. ===================================================== */ @import url('https://fonts.googleapis.com/css2?family=JetBrains+Mono:wght@500;700&family=Manrope:wght@400;500;600;700;800&family=Noto+Sans+Arabic:wght@300;400;500;600;700&display=swap'); :root { --color-bg: #F4F7FB; --color-surface: #FFFFFF; --color-text: #172033; --color-text-muted: #738098; --color-border: #E5EAF2; --color-danger: #DC2626; --color-danger-bg: #FDEAEA; --color-success: #16A34A; --color-success-bg: #E7F7EC; --radius: 16px; --shadow: 0 10px 32px rgba(30, 41, 59, 0.07); --sidebar-w: 272px; --font-ui: 'Manrope', system-ui, -apple-system, 'Segoe UI', sans-serif; --font-ui-ar: 'Noto Sans Arabic', Tahoma, Arial, sans-serif; --font-ui-ku: 'Noto Sans Arabic', Tahoma, Arial, sans-serif; } * { box-sizing: border-box; } body { margin: 0; font-family: var(--font-ui); background: var(--color-bg); color: var(--color-text); line-height: 1.55; -webkit-font-smoothing: antialiased; } html[lang="ar"] body { font-family: var(--font-ui-ar); letter-spacing: 0; } html[lang="ku"] body { font-family: var(--font-ui-ku); letter-spacing: 0; } [dir="rtl"] body { text-align: right; } h1, h2, h3 { font-weight: 700; letter-spacing: -0.01em; margin: 0 0 4px; } html[lang="ar"] h1, html[lang="ar"] h2, html[lang="ar"] h3, html[lang="ku"] h1, html[lang="ku"] h2, html[lang="ku"] h3 { letter-spacing: 0; line-height: 1.65; } p { margin: 0 0 8px; } .muted { color: var(--color-text-muted); font-size: 14px; } a { color: inherit; } .mono { font-family: 'JetBrains Mono', monospace; direction: ltr; text-align: left; unicode-bidi: plaintext; } /* ---------- Barcode-stripe signature mark (follows accent color) ---------- */ .barcode-mark { display: inline-flex; align-items: flex-end; gap: 2px; height: 20px; color: var(--accent); } .barcode-mark span { display: block; width: 3px; background: currentColor; } .barcode-mark span:nth-child(1){height:100%;} .barcode-mark span:nth-child(2){height:60%;width:2px;} .barcode-mark span:nth-child(3){height:85%;} .barcode-mark span:nth-child(4){height:40%;width:2px;} .barcode-mark span:nth-child(5){height:100%;width:4px;} .barcode-mark span:nth-child(6){height:55%;width:2px;} .barcode-mark span:nth-child(7){height:75%;} /* ===================================================== Accent colors (10 swatches) — set via [data-theme] on Recolors buttons, links, focus rings, active nav pill. ===================================================== */ :root, [data-theme="teal"] { --accent:#0D9488; --accent-tint:#E6F6F4; --accent-contrast:#FFFFFF; } [data-theme="blue"] { --accent:#2563EB; --accent-tint:#EAF1FE; --accent-contrast:#FFFFFF; } [data-theme="purple"] { --accent:#7C3AED; --accent-tint:#F2EBFE; --accent-contrast:#FFFFFF; } [data-theme="pink"] { --accent:#DB2777; --accent-tint:#FCE9F1; --accent-contrast:#FFFFFF; } [data-theme="red"] { --accent:#DC2626; --accent-tint:#FDEAEA; --accent-contrast:#FFFFFF; } [data-theme="orange"] { --accent:#EA580C; --accent-tint:#FEEEE4; --accent-contrast:#FFFFFF; } [data-theme="amber"] { --accent:#D97706; --accent-tint:#FDF1DE; --accent-contrast:#FFFFFF; } [data-theme="green"] { --accent:#16A34A; --accent-tint:#E7F7EC; --accent-contrast:#FFFFFF; } [data-theme="black"] { --accent:#111111; --accent-tint:#EFEFEF; --accent-contrast:#FFFFFF; } [data-theme="slate"], [data-theme="white"] { --accent:#475569; --accent-tint:#F1F5F9; --accent-contrast:#FFFFFF; } /* ===================================================== Dark mode — set via [data-mode="dark"] on Sidebar uses --color-surface too, so it goes dark with everything else. ===================================================== */ [data-mode="dark"] { --color-bg: #0B1220; --color-surface: #141D2C; --color-text: #F4F7FB; --color-text-muted: #9AA8BC; --color-border: #263247; --color-danger-bg: #351E1E; --color-success-bg: #16281C; } [data-mode="dark"] input[type=text], [data-mode="dark"] input[type=password], [data-mode="dark"] input[type=number], [data-mode="dark"] input[type=date], [data-mode="dark"] input[type=email], [data-mode="dark"] select, [data-mode="dark"] textarea { background: var(--color-surface); color: var(--color-text); border-color: var(--color-border); } [data-mode="dark"] tbody tr:hover { background: rgba(255,255,255,0.03); } [data-mode="dark"] .receipt-box, [data-mode="dark"] .qty-controls button { background: var(--color-surface); color: var(--color-text); } /* ---------- App shell ---------- */ .app-shell { display: flex; min-height: 100vh; } .sidebar { width: var(--sidebar-w); background: var(--color-surface); border-inline-end: 1px solid var(--color-border); color: var(--color-text); flex-shrink: 0; display: flex; flex-direction: column; padding: 22px 14px; } .sidebar .brand { display: flex; align-items: center; gap: 10px; padding: 0 8px 20px; margin-bottom: 12px; border-bottom: 1px solid var(--color-border); } .sidebar .brand-text { color: var(--color-text); font-size: 15px; font-weight: 800; line-height: 1.1; } .sidebar .brand-text small { display:block; font-weight:500; font-size:11px; color:var(--color-text-muted); letter-spacing:.03em; } .sidebar nav { display: flex; flex-direction: column; gap: 2px; flex: 1; } .sidebar nav a { display: flex; align-items: center; gap: 10px; padding: 9px 12px; border-radius: 8px; text-decoration: none; color: var(--color-text-muted); font-size: 14px; font-weight: 600; transition: background .12s ease, color .12s ease; } .sidebar nav a:hover { background: var(--color-bg); color: var(--color-text); } .sidebar nav a.active { background: var(--accent-tint); color: var(--accent); } .sidebar nav a .ico { width: 16px; text-align:center; font-size:13px; opacity:.85; } .sidebar .user-box { margin-top: 14px; padding: 12px 10px 0; border-top: 1px solid var(--color-border); font-size: 13px; } .sidebar .user-box .name { font-weight: 700; color: var(--color-text); } .sidebar .user-box .role { color: var(--color-text-muted); text-transform: capitalize; font-size: 12px; } .sidebar .user-box a { display:inline-block; margin-top:8px; color: var(--accent); font-weight:700; text-decoration:none; font-size:13px; } .main { flex: 1; min-width: 0; padding: 32px 40px; max-width: 1180px; } .page-header { display:flex; align-items:baseline; justify-content:space-between; margin-bottom: 26px; flex-wrap: wrap; gap: 10px;} /* ---------- Cards / surfaces ---------- */ .card { background: var(--color-surface); border: 1px solid var(--color-border); border-radius: var(--radius); padding: 22px; box-shadow: var(--shadow); } .stat-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px,1fr)); gap: 14px; margin-bottom: 24px; } .stat-card { background: var(--color-surface); border: 1px solid var(--color-border); border-radius: var(--radius); padding: 18px 20px; } .stat-card .label { font-size: 12px; color: var(--color-text-muted); font-weight:600; } .stat-card .value { font-size: 26px; font-weight: 800; margin-top: 6px; letter-spacing:-0.02em; } .stat-card.warn .value { color: var(--color-danger); } .stat-card .sub { font-size: 12px; color: var(--color-text-muted); margin-top:2px; } /* ---------- Forms ---------- */ label { display:block; font-size: 13px; font-weight: 600; margin: 14px 0 6px; color: var(--color-text); } label:first-of-type { margin-top: 0; } input[type=text], input[type=password], input[type=number], input[type=date], input[type=email], select, textarea { width: 100%; padding: 9px 12px; border: 1px solid var(--color-border); border-radius: 8px; font-size: 14px; font-family: inherit; text-align: start; background: var(--color-surface); color: var(--color-text); } input:focus, select:focus, textarea:focus { outline: none; border-color: var(--accent); box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent) 16%, transparent); } .checkbox-row { display:flex; align-items:center; gap:8px; margin-top:14px; } .checkbox-row input { width:auto; } .checkbox-row label { margin:0; } .form-grid { display:grid; grid-template-columns: 1fr 1fr; gap: 0 18px; } .form-grid .full { grid-column: 1 / -1; } .field-hint { margin: 5px 0 14px; color: var(--color-text-muted); font-size: 12px; } .btn { display: inline-flex; align-items:center; justify-content:center; gap:6px; padding: 9px 18px; border-radius: 8px; border: 1px solid transparent; font-weight: 600; font-size: 14px; cursor: pointer; text-decoration: none; transition: background .12s ease, color .12s ease, filter .12s ease; } .btn:active { transform: translateY(1px); } .btn-primary { background: var(--accent); color: var(--accent-contrast); } .btn-primary:hover { filter: brightness(1.08); } .btn-accent { background: var(--accent-tint); color: var(--accent); } .btn-accent:hover { background: var(--accent); color: var(--accent-contrast); } .btn-danger { background: var(--color-danger-bg); color: var(--color-danger); } .btn-danger:hover { filter: brightness(0.97); } .btn-ghost { background: transparent; color: var(--color-text); border-color: var(--color-border); } .btn-block { width: 100%; } .btn[disabled] { opacity: .5; cursor: not-allowed; } /* ---------- Tables ---------- */ table { width: 100%; border-collapse: collapse; font-size: 14px; } th, td { text-align: start; padding: 11px 12px; border-bottom: 1px solid var(--color-border); } th { font-size: 11px; text-transform: uppercase; letter-spacing: .04em; color: var(--color-text-muted); font-weight: 600; } tbody tr:hover { background: var(--color-bg); } .badge { display:inline-block; padding: 3px 9px; border-radius: 20px; font-size: 11px; font-weight: 700; } .badge-low { background: var(--color-danger-bg); color: var(--color-danger); } .badge-ok { background: var(--color-success-bg); color: var(--color-success); } .badge-rx { background: var(--accent-tint); color: var(--accent); } /* ---------- Alerts ---------- */ .alert { padding: 11px 14px; border-radius: 8px; font-size: 14px; margin-bottom: 14px; font-weight: 600; } .alert-error { background: var(--color-danger-bg); color: var(--color-danger); } .alert-success { background: var(--color-success-bg); color: var(--color-success); } /* ---------- Auth page ---------- */ .auth-page { display:flex; align-items:center; justify-content:center; min-height:100vh; background: var(--color-bg); } .auth-card { background: var(--color-surface); border: 1px solid var(--color-border); padding: 36px 34px; border-radius: 14px; width: min(360px, calc(100vw - 32px)); } .auth-card h1 { font-size: 21px; } .auth-card .barcode-mark { margin-bottom: 14px; } /* ---------- Sell / POS page ---------- */ .pos-layout { display: grid; grid-template-columns: 1.3fr 1fr; gap: 18px; align-items: start; } .scan-box { display:flex; gap:10px; align-items:center; } .scan-box input { font-family:'JetBrains Mono', monospace; font-size:15px; direction:ltr; text-align:left; } .scan-hint { font-size:12px; color: var(--color-text-muted); margin-top:6px; } .manual-search { margin-top: 18px; padding-top: 16px; border-top: 1px solid var(--color-border); } .manual-results { display: grid; gap: 7px; margin-top: 8px; } .manual-result { width: 100%; display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 10px 12px; border: 1px solid var(--color-border); border-radius: 8px; background: var(--color-surface); color: var(--color-text); font: inherit; text-align: start; cursor: pointer; } .manual-result:hover { border-color: var(--accent); background: var(--accent-tint); } .manual-result small { color: var(--color-text-muted); white-space: nowrap; } .cart-empty { text-align:center; color: var(--color-text-muted); padding: 30px 10px; font-size: 14px; } .cart-total-row { display:flex; justify-content:space-between; align-items:center; padding-top:14px; margin-top:10px; border-top: 1px solid var(--color-border); } .cart-total-row .amount { font-size: 24px; font-weight: 800; color: var(--accent); } .payment-panel { margin-top: 16px; padding: 14px; border-radius: 8px; background: var(--accent-tint); border: 1px solid color-mix(in srgb, var(--accent) 24%, var(--color-border)); } .payment-panel label { margin-top: 0; } .payment-panel input { background: var(--color-surface); } .payment-status { min-height: 20px; margin-top: 8px; font-size: 13px; font-weight: 700; color: var(--color-text-muted); } .payment-status.error { color: var(--color-danger); } .payment-status.ready { color: var(--color-success); } .qty-controls { display:flex; align-items:center; gap:6px; } .qty-controls button { width:24px; height:24px; border-radius:6px; border:1px solid var(--color-border); background:var(--color-surface); cursor:pointer; font-weight:700; } .receipt-box { margin-top: 16px; } .thermal-receipt { width: min(100%, 360px); margin-inline: auto; padding: 16px; border: 1px dashed #111; border-radius: 4px; background: #fff; color: #000; font-family: 'Noto Sans Arabic', Tahoma, Arial, sans-serif; font-size: 13px; line-height: 1.7; text-align: start; } .thermal-receipt[lang="ar"] { font-family: 'Noto Sans Arabic', Tahoma, Arial, sans-serif; } .thermal-receipt-header { text-align: center; padding-bottom: 10px; border-bottom: 1px dashed #000; } .thermal-receipt-header strong { display: block; font-size: 15px; } .thermal-receipt-meta { display: grid; gap: 3px; padding: 10px 0; border-bottom: 1px dashed #000; } .thermal-receipt-meta div { display: flex; justify-content: space-between; gap: 10px; } .thermal-receipt-meta span:last-child { text-align: end; } .receipt-items { padding: 8px 0; border-bottom: 1px dashed #000; } .receipt-item { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 10px; align-items: start; padding: 6px 0; } .receipt-item-name { overflow-wrap: anywhere; } .receipt-item-name small { display: block; margin-top: 2px; color: #333; } .receipt-line-total, .receipt-amount { direction: ltr; text-align: right; white-space: nowrap; font-family: 'JetBrains Mono', Consolas, monospace; } .receipt-total { display: flex; justify-content: space-between; align-items: baseline; gap: 10px; padding: 10px 0; font-size: 14px; font-weight: 800; } .receipt-payment { display: grid; gap: 4px; padding: 0 0 10px; border-bottom: 1px dashed #000; } .receipt-payment div { display: flex; justify-content: space-between; gap: 10px; } .receipt-thanks { text-align: center; padding-top: 2px; font-size: 11px; } .receipt-language-switch { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin-top: 12px; padding-top: 10px; border-top: 1px dashed #000; font-size: 11px; } .receipt-language-switch > div { display: flex; gap: 5px; direction: rtl; } .receipt-language-switch button { padding: 4px 7px; border: 1px solid #000; border-radius: 3px; background: #fff; color: #000; font: inherit; cursor: pointer; } .receipt-language-switch button.active { background: #000; color: #fff; } .receipt-actions { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin-top: 14px; } .receipt-actions .btn { padding: 8px 6px; font-size: 12px; } /* ---------- Search ---------- */ .search-bar { display:flex; gap:10px; margin-bottom:18px; } .search-bar input { flex:1; } /* ---------- Administrator daily sales report ---------- */ .staff-sales-report { margin: 24px 0; } .staff-sales-report-header { display: flex; align-items: end; justify-content: space-between; gap: 16px; margin-bottom: 16px; flex-wrap: wrap; } .staff-sales-report-header h3 { font-size: 17px; } .staff-sales-filter { display: flex; align-items: end; gap: 8px; flex-wrap: wrap; } .staff-sales-filter label { margin: 0; } .staff-sales-filter input { width: auto; min-width: 154px; } .table-scroll { overflow-x: auto; border: 1px solid var(--color-border); border-radius: 8px; } .staff-sales-table { min-width: 760px; } .staff-sales-detail-table .detail-price-col, .staff-sales-detail-table .detail-date-col, .staff-sales-detail-table .detail-time-col { text-align: center; vertical-align: middle; white-space: nowrap; } .staff-sales-detail-table .detail-price-col { width: 130px; } .staff-sales-detail-table .detail-date-col { width: 145px; } .staff-sales-detail-table .detail-time-col { width: 110px; } .staff-sales-detail-table td .mono { display: inline-block; min-width: 100%; text-align: center; } .sale-item-list { display: grid; gap: 3px; min-width: 210px; } .sale-item-list small { color: var(--color-text-muted); white-space: nowrap; } .staff-sales-summary { margin-bottom: 20px; } .staff-sales-section-title { margin: 0 0 10px; font-size: 14px; } .user-profit strong, .user-profit small { display: block; } .user-profit small { color: var(--color-success); font-size: 11px; font-weight: 700; } .user-profit.loss small { color: var(--color-danger); } .user-profit.unknown small { color: var(--color-text-muted); } .user-sales-total strong { display: block; direction: ltr; text-align: start; unicode-bidi: plaintext; } /* ---------- Staff permissions ---------- */ .permissions-layout { display: grid; grid-template-columns: minmax(260px, 340px) minmax(0, 1fr); gap: 18px; align-items: start; } .staff-add-card h2, .permissions-card h2 { font-size: 17px; } .staff-add-card .btn { margin-top: 6px; } .permissions-card .muted { margin-bottom: 16px; } .permission-table-wrap { overflow-x: auto; border: 1px solid var(--color-border); border-radius: 8px; } .permission-table { min-width: 820px; } .permission-table th, .permission-table td { vertical-align: middle; } .permission-table th:not(:first-child), .permission-check { width: 90px; text-align: center; } .permission-check label { display: inline-flex; margin: 0; cursor: pointer; } .permission-check input { width: 18px; height: 18px; margin: 0; accent-color: var(--accent); cursor: pointer; } .permission-staff strong, .permission-staff small { display: block; } .permission-staff small { margin-top: 2px; color: var(--color-text-muted); font-size: 12px; } .permissions-save-button { margin-top: 16px; } .permissions-empty { margin: 24px 0 0; padding: 14px; border-radius: 8px; background: var(--color-bg); color: var(--color-text-muted); } /* ===================================================== Settings panel — language, dark mode, theme circles ===================================================== */ .settings-toggle { position: fixed; inset-block-start: 20px; inset-inline-end: 24px; width: 40px; height: 40px; background: var(--color-surface); border: 1px solid var(--color-border); border-radius: 50%; display: flex; align-items: center; justify-content: center; font-size: 17px; cursor: pointer; z-index: 100; color: var(--color-text-muted); box-shadow: 0 2px 10px rgba(16,18,20,0.08); font-family: inherit; transition: transform .16s ease, color .16s ease, border-color .16s ease, box-shadow .16s ease; } .settings-toggle:hover, .settings-toggle[aria-expanded="true"] { color: var(--accent); border-color: var(--accent); box-shadow: 0 4px 14px color-mix(in srgb, var(--accent) 24%, transparent); } .settings-toggle[aria-expanded="true"] { transform: rotate(30deg); } .settings-panel { position: fixed; inset-block-start: 66px; inset-inline-end: 24px; width: min(280px, calc(100vw - 32px)); background: var(--color-surface); border: 1px solid var(--color-border); border-radius: 14px; box-shadow: 0 12px 28px rgba(16,18,20,0.14); padding: 18px; z-index: 100; display: none; } .settings-panel.open { display: block; animation: settings-pop .16s ease-out; } @keyframes settings-pop { from { opacity: 0; transform: translateY(-6px) scale(.98); } to { opacity: 1; transform: translateY(0) scale(1); } } .settings-section { margin-bottom: 16px; padding-bottom: 16px; border-bottom: 1px solid var(--color-border); } .settings-section:last-child { margin-bottom: 0; padding-bottom: 0; border-bottom: 0; } .settings-label { font-size: 11px; text-transform: uppercase; letter-spacing: .05em; font-weight: 800; color: var(--color-text-muted); margin-bottom: 9px; } .lang-switch { display: grid; grid-template-columns: repeat(3, 1fr); gap: 7px; direction: ltr; } .lang-switch a { text-align: center; padding: 8px 4px; border: 1px solid var(--color-border); border-radius: 8px; font-size: 12px; font-weight: 800; text-decoration: none; color: var(--color-text); transition: background .16s ease, color .16s ease, border-color .16s ease; } .lang-switch a:hover { border-color: var(--accent); color: var(--accent); } .lang-switch a.active { background: var(--accent); color: var(--accent-contrast); border-color: var(--accent); box-shadow: 0 2px 8px color-mix(in srgb, var(--accent) 28%, transparent); } .dark-toggle { width: 100%; padding: 8px 12px; border: 1px solid var(--color-border); border-radius: 6px; background: var(--color-bg); color: var(--color-text); font-weight: 600; font-size: 13px; cursor: pointer; display: flex; align-items: center; justify-content: space-between; } .dark-toggle::after { content: "☀"; } .dark-toggle.is-dark::after { content: "☾"; } .theme-circles { display: grid; grid-template-columns: repeat(5, 1fr); gap: 10px; } .theme-circle { appearance: none; width: 100%; aspect-ratio: 1; min-height: 30px; border-radius: 50%; cursor: pointer; border: 2px solid var(--color-surface); background: var(--swatch); position: relative; box-shadow: 0 0 0 1px var(--color-border); transition: transform .16s ease, box-shadow .16s ease; } .theme-circle:hover { transform: translateY(-2px) scale(1.05); } .theme-circle.active { box-shadow: 0 0 0 2px var(--color-surface), 0 0 0 4px var(--accent); } .theme-circle.active::after { content: "✓"; position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; font-size: 11px; font-weight: 900; color: #fff; text-shadow: 0 0 2px rgba(0,0,0,0.6); } .settings-toggle:focus-visible, .lang-switch a:focus-visible, .theme-circle:focus-visible, .dark-toggle:focus-visible { outline: 3px solid color-mix(in srgb, var(--accent) 36%, transparent); outline-offset: 2px; } /* ===================================================== Premium interface refresh — spacious cards, deep navigation rail, softer surfaces and a clearer visual hierarchy. ===================================================== */ body { min-height: 100vh; background: radial-gradient(circle at 8% 5%, color-mix(in srgb, var(--accent) 11%, transparent), transparent 28rem), radial-gradient(circle at 88% 95%, rgba(129, 140, 248, .10), transparent 30rem), var(--color-bg); line-height: 1.7; transition: background-color .22s ease, color .22s ease; } body::selection { background: color-mix(in srgb, var(--accent) 25%, transparent); } .app-shell { position: relative; isolation: isolate; } .sidebar { position: sticky; inset-block-start: 0; height: 100vh; padding: 24px 14px 18px; border: 0; color: #D8E2F1; background: radial-gradient(circle at 10% 0%, color-mix(in srgb, var(--accent) 43%, transparent), transparent 19rem), linear-gradient(160deg, #182338 0%, #101827 48%, #0B1220 100%); box-shadow: 0 0 42px rgba(15, 23, 42, .15); z-index: 3; } [data-mode="dark"] .sidebar { background: radial-gradient(circle at 10% 0%, color-mix(in srgb, var(--accent) 37%, transparent), transparent 19rem), linear-gradient(160deg, #111B2B 0%, #0A1020 100%); } .sidebar .brand { gap: 12px; padding: 2px 10px 22px; margin-bottom: 18px; border-bottom-color: rgba(202, 219, 240, .13); } .sidebar .barcode-mark { height: 25px; color: #FFFFFF; filter: drop-shadow(0 3px 6px color-mix(in srgb, var(--accent) 55%, transparent)); } .sidebar .brand-text { color: #F8FAFC; font-size: 17px; letter-spacing: -.02em; } .sidebar .brand-text small { color: #9EACC1; font-size: 10px; margin-top: 5px; letter-spacing: .08em; } .sidebar nav { gap: 7px; } .sidebar nav a { min-height: 48px; gap: 11px; padding: 8px 10px; color: #B7C3D6; border: 1px solid transparent; border-radius: 13px; font-size: 13px; font-weight: 650; transition: transform .18s ease, background .18s ease, border-color .18s ease, color .18s ease, box-shadow .18s ease; } .sidebar nav a:hover { color: #FFFFFF; background: rgba(255, 255, 255, .075); border-color: rgba(255, 255, 255, .07); transform: translateX(-2px); } [dir="ltr"] .sidebar nav a:hover { transform: translateX(2px); } .sidebar nav a.active { color: #FFFFFF; background: linear-gradient(135deg, var(--accent), color-mix(in srgb, var(--accent) 67%, #8B5CF6)); border-color: color-mix(in srgb, var(--accent) 72%, white); box-shadow: 0 10px 22px color-mix(in srgb, var(--accent) 27%, transparent); } .nav-icon { width: 29px; height: 29px; display: inline-grid; place-items: center; flex: 0 0 29px; color: #C7D3E5; border: 1px solid rgba(255, 255, 255, .10); border-radius: 9px; background: rgba(255, 255, 255, .055); transition: color .18s ease, background .18s ease, border-color .18s ease; } .nav-icon svg { width: 16px; height: 16px; } .sidebar nav a:hover .nav-icon { color: #FFFFFF; background: rgba(255,255,255,.10); } .sidebar nav a.active .nav-icon { color: var(--accent); background: #FFFFFF; border-color: rgba(255,255,255,.7); } .sidebar .user-box { margin-top: 18px; padding: 15px 11px 2px; border-top-color: rgba(202, 219, 240, .13); color: #C4D0E1; } .sidebar .user-box .name { color: #F8FAFC; font-size: 13px; } .sidebar .user-box .role { color: #8FA0B9; margin-top: 2px; } .sidebar .user-box a { margin-top: 10px; color: #E7EFFA; font-size: 12px; } .sidebar .user-box a:hover { color: #FFFFFF; } .main { width: min(100%, 1420px); max-width: none; padding: 42px clamp(22px, 4vw, 58px); margin-inline: auto; } .page-header { margin-bottom: 30px; align-items: end; } .page-header h1 { font-size: clamp(24px, 2.2vw, 32px); font-weight: 800; letter-spacing: -.035em; } .page-header .muted { margin-top: 5px; } html[lang="ar"] h1, html[lang="ar"] h2, html[lang="ar"] h3, html[lang="ku"] h1, html[lang="ku"] h2, html[lang="ku"] h3 { font-family: 'Noto Sans Arabic', Tahoma, sans-serif; font-weight: 500; } html[lang="ar"] body, html[lang="ku"] body { font-weight: 400; line-height: 1.95; } html[lang="ar"] .page-header h1, html[lang="ku"] .page-header h1 { font-weight: 600; } html[lang="ar"] .sidebar nav a, html[lang="ku"] .sidebar nav a { font-weight: 500; } html[lang="ar"] .sidebar .brand-text, html[lang="ku"] .sidebar .brand-text { font-weight: 700; } html[lang="ar"] label, html[lang="ku"] label, html[lang="ar"] .btn, html[lang="ku"] .btn, html[lang="ar"] th, html[lang="ku"] th { font-weight: 500; } html[lang="ar"] .stat-card .value, html[lang="ku"] .stat-card .value, html[lang="ar"] .cart-total-row .amount, html[lang="ku"] .cart-total-row .amount { font-weight: 700; } .card, .stat-card { border-color: color-mix(in srgb, var(--color-border) 90%, white); box-shadow: var(--shadow); } .card { padding: clamp(18px, 2.1vw, 26px); border-radius: var(--radius); } .stat-grid { gap: 17px; margin-bottom: 28px; } .stat-card { position: relative; overflow: hidden; min-height: 142px; padding: 21px 22px; border-radius: var(--radius); transition: transform .2s ease, box-shadow .2s ease, border-color .2s ease; } .stat-card::after { content: ""; position: absolute; inline-end: -36px; inset-block-end: -45px; width: 116px; height: 116px; border-radius: 50%; background: color-mix(in srgb, var(--accent) 8%, transparent); } .stat-card:hover { transform: translateY(-4px); border-color: color-mix(in srgb, var(--accent) 32%, var(--color-border)); box-shadow: 0 18px 34px rgba(30,41,59,.10); } .stat-card .label { font-size: 12px; letter-spacing: .02em; } .stat-card .value { font-size: clamp(26px, 2.2vw, 34px); margin-top: 9px; } .stat-card .sub { margin-top: 5px; } label { font-size: 12px; letter-spacing: .015em; color: color-mix(in srgb, var(--color-text) 85%, var(--color-text-muted)); } input[type=text], input[type=password], input[type=number], input[type=date], input[type=email], select, textarea { min-height: 43px; padding: 10px 13px; border-radius: 11px; border-color: color-mix(in srgb, var(--color-border) 88%, #CBD5E1); box-shadow: 0 1px 1px rgba(15,23,42,.015); transition: border-color .16s ease, box-shadow .16s ease, background .16s ease; } input:hover, select:hover, textarea:hover { border-color: color-mix(in srgb, var(--accent) 30%, var(--color-border)); } input:focus, select:focus, textarea:focus { box-shadow: 0 0 0 4px color-mix(in srgb, var(--accent) 13%, transparent); } .form-grid { gap: 2px 22px; } .field-hint, .scan-hint { font-size: 11px; } .btn { min-height: 40px; padding: 9px 17px; border-radius: 11px; font-size: 13px; font-weight: 750; box-shadow: 0 2px 5px rgba(15,23,42,.06); transition: transform .16s ease, box-shadow .16s ease, filter .16s ease, background .16s ease; } .btn:hover:not([disabled]) { transform: translateY(-2px); box-shadow: 0 8px 16px color-mix(in srgb, var(--accent) 18%, transparent); } .btn-danger:hover:not([disabled]) { box-shadow: 0 8px 16px rgba(220,38,38,.12); } .btn:active { transform: translateY(0); } table { overflow: hidden; border-radius: 12px; } th, td { padding: 13px 14px; border-bottom-color: color-mix(in srgb, var(--color-border) 88%, transparent); } th { background: color-mix(in srgb, var(--color-bg) 65%, var(--color-surface)); font-size: 10px; font-weight: 800; } tbody tr { transition: background .14s ease; } tbody tr:hover { background: color-mix(in srgb, var(--accent) 4%, var(--color-surface)); } .badge { padding: 4px 10px; border-radius: 999px; font-size: 10px; letter-spacing: .01em; } .alert { border: 1px solid color-mix(in srgb, currentColor 15%, transparent); border-radius: 12px; } .pos-layout, .permissions-layout { gap: 22px; } .scan-box input { min-height: 48px; border-radius: 12px; } .manual-result { border-radius: 12px; padding: 12px 14px; transition: transform .16s ease, border-color .16s ease, background .16s ease; } .manual-result:hover { transform: translateY(-1px); } .payment-panel { border-radius: 13px; padding: 16px; } .cart-total-row { padding-top: 18px; } .cart-total-row .amount { font-size: 28px; } .settings-toggle { width: 46px; height: 46px; border-radius: 14px; backdrop-filter: blur(12px); background: color-mix(in srgb, var(--color-surface) 88%, transparent); } .settings-panel { border-radius: 18px; padding: 20px; backdrop-filter: blur(16px); } .settings-label { font-size: 10px; } .lang-switch a, .dark-toggle { border-radius: 10px; } .theme-circle { min-height: 32px; } [dir="rtl"] th { letter-spacing: 0; } [dir="rtl"] .sidebar nav a:hover { transform: translateX(-2px); } [dir="rtl"] .sidebar nav a { letter-spacing: 0; } /* ===================================================== RTL support — Arabic & Kurdish (Sorani) Flexbox already follows the page direction. Reversing these rows a second time puts controls on the wrong side, so only text alignment is specified. ===================================================== */ [dir="rtl"] .sidebar nav a, [dir="rtl"] .auth-card { text-align: right; } [dir="rtl"] .settings-label { letter-spacing: 0; } [dir="rtl"] input:not(.mono), [dir="rtl"] select, [dir="rtl"] textarea { text-align: right; } [dir="rtl"] .checkbox-row input { margin: 0; } @media (max-width: 900px) { .app-shell { flex-direction: column; } .sidebar { width: 100%; position: static; height: auto; padding: 11px 12px; flex-direction: row; align-items: center; overflow-x:auto; border-inline-end:none; border-bottom:0; box-shadow: 0 8px 24px rgba(15,23,42,.16); } .sidebar .brand, .sidebar .user-box { display:none; } .sidebar nav { flex-direction: row; gap: 6px; } .sidebar nav a { min-height: 42px; padding: 6px 9px; white-space: nowrap; } .sidebar .nav-icon { width: 26px; height: 26px; flex-basis: 26px; } .sidebar .nav-icon svg { width: 14px; height: 14px; } .pos-layout { grid-template-columns: 1fr; } .form-grid { grid-template-columns: 1fr; } .permissions-layout { grid-template-columns: 1fr; } .staff-sales-filter { width: 100%; } .main { padding: 24px 18px; } } @media (max-width: 700px) { .card { max-width: 100%; overflow-x: auto; -webkit-overflow-scrolling: touch; } .card > table { min-width: 620px; } .table-scroll, .permission-table-wrap { -webkit-overflow-scrolling: touch; } .staff-sales-report-header { align-items: stretch; } } @media (max-width: 480px) { .main { padding: 20px 14px 88px; } .page-header { margin-bottom: 20px; } .page-header h1 { font-size: 24px; } .card { padding: 16px; border-radius: 14px; max-width: 100%; overflow-x: auto; -webkit-overflow-scrolling: touch; } .card > table { min-width: 640px; } .stat-grid { grid-template-columns: 1fr; gap: 12px; margin-bottom: 18px; } .stat-card { min-height: 118px; padding: 17px 18px; } .stat-card .value { font-size: 27px; } .sidebar nav a { font-size: 12px; } .sidebar nav a > span:last-child { white-space: nowrap; } .settings-toggle { inset-block-start: auto; inset-block-end: 14px; inset-inline-end: 14px; width: 44px; height: 44px; border-radius: 13px; } .settings-panel { inset-block-start: auto; inset-block-end: 68px; inset-inline-end: 12px; max-height: calc(100vh - 88px); overflow-y: auto; } .auth-card { padding: 28px 22px; border-radius: 18px; } .receipt-actions { grid-template-columns: 1fr; } .staff-sales-filter input { width: 100%; min-width: 0; } .staff-sales-filter .btn { width: 100%; } } @media print { @page { size: 80mm auto; margin: 2mm; } body * { visibility: hidden !important; } #receiptBox, #receiptBox * { visibility: visible !important; } #receiptBox { position: absolute; inset: 0; width: 80mm; margin: 0; } .thermal-receipt { width: 76mm; max-width: none; margin: 0; padding: 2mm; border: 0; border-radius: 0; box-shadow: none; } .receipt-actions, .receipt-language-switch { display: none !important; } }