/* ===================================================================== AE System Online — Design system "حبر" (Ink) RTL-first. Light + dark. Two shells: top menu / side menu. ===================================================================== */ @font-face { font-family: "Cairo Local"; src: url("../fonts/Cairo-Regular.woff2") format("woff2"); font-weight: 400; font-display: swap; } @font-face { font-family: "Cairo Local"; src: url("../fonts/Cairo-SemiBold.woff2") format("woff2"); font-weight: 600; font-display: swap; } @font-face { font-family: "Cairo Local"; src: url("../fonts/Cairo-Bold.woff2") format("woff2"); font-weight: 700 800; font-display: swap; } :root { --font-body: "Almarai", "Cairo Local", system-ui, sans-serif; --font-display: "Noto Kufi Arabic", "Cairo Local", "Almarai", sans-serif; --font-mono: ui-monospace, "SF Mono", Menlo, Consolas, monospace; --bg: #EEEFF3; --surface: #FFFFFF; --surface-2: #F4F5F8; --surface-3: #E8EAF0; --border: #DEE0E7; --border-strong: #C7CAD4; --text: #15171C; --muted: #5A5F6B; --faint: #7D828F; --primary: #D4461C; --primary-hover: #B83A13; --primary-soft: #FCE8E1; --primary-ring: rgba(212, 70, 28, .22); --on-primary: #FFFFFF; --accent: #2350D8; --accent-soft: #E3E9FB; --ok: #17804F; --ok-soft: #E1F3EA; --warn: #A65A06; --warn-soft: #FDF0DC; --bad: #C0231A; --bad-soft: #FBE7E6; --info: #2350D8; --info-soft: #E3E9FB; --nav-bg: #14161B; --nav-2: #1C1F26; --nav-text: #F3F4F6; --nav-muted: #A0A5B1; --nav-hover: #22252D; --nav-active: #2C2F38; --nav-border: #262932; --r-xs: 6px; --r-sm: 8px; --r: 10px; --r-lg: 12px; --r-xl: 16px; --shadow-sm: 0 1px 2px rgba(16, 18, 24, .06); --shadow: 0 4px 16px rgba(16, 18, 24, .08); --shadow-lg: 0 18px 48px rgba(16, 18, 24, .18); --h-control: 40px; --gap: 16px; --topbar-h: 60px; --side-w: 256px; color-scheme: light; } [data-theme="dark"] { --bg: #0D0F13; --surface: #15181E; --surface-2: #1B1F26; --surface-3: #232830; --border: #292E37; --border-strong: #363C47; --text: #E9EBEF; --muted: #9CA2AE; --faint: #7E8491; --primary: #F0643A; --primary-hover: #FF7A52; --primary-soft: #3A1E15; --primary-ring: rgba(240, 100, 58, .28); --accent: #7B97F7; --accent-soft: #1D2644; --ok: #3DC486; --ok-soft: #12301F; --warn: #F0A43A; --warn-soft: #382A12; --bad: #FF6B5E; --bad-soft: #3A1A18; --info: #7B97F7; --info-soft: #1D2644; --nav-bg: #0A0B0E; --nav-2: #111318; --nav-hover: #181B21; --nav-active: #20242C; --nav-border: #1C1F26; --shadow: 0 4px 16px rgba(0, 0, 0, .35); --shadow-lg: 0 18px 48px rgba(0, 0, 0, .5); color-scheme: dark; } [data-density="compact"] { --h-control: 34px; --gap: 12px; } *, *::before, *::after { box-sizing: border-box; } html { font-size: 14px; -webkit-text-size-adjust: 100%; } body { margin: 0; background: var(--bg); color: var(--text); font-family: var(--font-body); line-height: 1.55; -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; } h1, h2, h3, h4 { font-family: var(--font-display); margin: 0; line-height: 1.3; font-weight: 700; } h1 { font-size: 1.6rem; } h2 { font-size: 1.15rem; } h3 { font-size: 1rem; } h4 { font-size: .92rem; } p { margin: 0; } a { color: var(--accent); text-decoration: none; } a:hover { text-decoration: underline; } img { max-width: 100%; } .ic { flex-shrink: 0; vertical-align: middle; } .num, .mono { font-family: var(--font-mono); font-variant-numeric: tabular-nums; direction: ltr; unicode-bidi: isolate; } .tnum { font-variant-numeric: tabular-nums; } .muted { color: var(--muted); } .faint { color: var(--faint); } .ok { color: var(--ok); } .bad { color: var(--bad); } .warn { color: var(--warn); } .primary-text { color: var(--primary); } .small { font-size: .86rem; } .tiny { font-size: .78rem; } .big { font-size: 1.15rem; } .bold { font-weight: 700; } .semi { font-weight: 600; } .nowrap { white-space: nowrap; } .ellipsis { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .hidden, [hidden] { display: none !important; } .sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; } :focus { outline: none; } :focus-visible { outline: 2px solid var(--primary); outline-offset: 2px; border-radius: 4px; } /* ---------------------------------------------------------------- layout helpers */ .row { display: flex; align-items: center; gap: 10px; } .row.wrap { flex-wrap: wrap; } .row.top { align-items: flex-start; } .row.between { justify-content: space-between; } .row.end { justify-content: flex-end; } .col { display: flex; flex-direction: column; gap: 10px; } .grow { flex: 1 1 auto; min-width: 0; } .gap-4 { gap: 4px; } .gap-6 { gap: 6px; } .gap-16 { gap: 16px; } .gap-24 { gap: 24px; } .grid { display: grid; gap: var(--gap); } .g2 { grid-template-columns: repeat(2, minmax(0, 1fr)); } .g3 { grid-template-columns: repeat(3, minmax(0, 1fr)); } .g4 { grid-template-columns: repeat(4, minmax(0, 1fr)); } .g5 { grid-template-columns: repeat(5, minmax(0, 1fr)); } .g-2-1 { grid-template-columns: minmax(0, 2fr) minmax(0, 1fr); } .g-1-2 { grid-template-columns: minmax(0, 1fr) minmax(0, 2fr); } .span2 { grid-column: span 2; } .span3 { grid-column: span 3; } .span-all { grid-column: 1 / -1; } .mt-4 { margin-top: 4px; } .mt-8 { margin-top: 8px; } .mt-12 { margin-top: 12px; } .mt-16 { margin-top: 16px; } .mt-24 { margin-top: 24px; } .mb-8 { margin-bottom: 8px; } .mb-12 { margin-bottom: 12px; } .mb-16 { margin-bottom: 16px; } .p-0 { padding: 0 !important; } .w-100 { width: 100%; } .text-end { text-align: left; } .text-center { text-align: center; } .text-start { text-align: right; } /* ---------------------------------------------------------------- shell: common */ .app { min-height: 100vh; } .content { padding: 24px 28px 48px; max-width: 1560px; margin: 0 auto; width: 100%; } .content.fluid { max-width: none; } .brand { display: flex; align-items: center; gap: 10px; color: var(--nav-text); text-decoration: none !important; } .brand-mark { display: grid; place-items: center; width: 36px; height: 36px; border-radius: var(--r-sm); background: var(--primary); color: var(--on-primary); font-family: var(--font-display); font-weight: 800; font-size: 14px; } .brand-mark.has-logo { background: #fff; overflow: hidden; } .brand-mark.has-logo img { width: 100%; height: 100%; object-fit: contain; } .brand-name { display: flex; flex-direction: column; line-height: 1.15; } .brand-name b { font-family: var(--font-display); font-size: 15px; } .brand-name small { font-size: 11px; color: var(--nav-muted); max-width: 150px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .nav-btn { position: relative; display: inline-flex; align-items: center; justify-content: center; gap: 8px; height: 38px; min-width: 38px; padding: 0 10px; border-radius: var(--r-sm); border: 1px solid var(--nav-border); background: transparent; color: var(--nav-text); cursor: pointer; font: inherit; font-size: 13px; } .nav-btn:hover { background: var(--nav-hover); } .nav-btn .dot { position: absolute; top: 7px; left: 8px; width: 8px; height: 8px; border-radius: 50%; background: var(--primary); box-shadow: 0 0 0 2px var(--nav-bg); } .nav-kbd, kbd { font-family: var(--font-mono); font-size: 11px; line-height: 1; padding: 3px 6px; border-radius: 5px; border: 1px solid var(--border); background: var(--surface-2); color: var(--muted); direction: ltr; white-space: nowrap; } .on-dark kbd, .nav-kbd { border-color: rgba(255,255,255,.18); background: rgba(255,255,255,.08); color: var(--nav-muted); } .avatar { display: grid; place-items: center; width: 34px; height: 34px; border-radius: 50%; flex-shrink: 0; background: var(--primary-soft); color: var(--primary); font-weight: 800; font-family: var(--font-display); font-size: 14px; } .user-chip { display: flex; align-items: center; gap: 10px; padding: 3px 4px 3px 10px; border-radius: 999px; cursor: pointer; border: 1px solid transparent; background: none; color: inherit; font: inherit; } .user-chip:hover { background: var(--nav-hover); } .user-chip .who { display: flex; flex-direction: column; line-height: 1.2; text-align: right; } .user-chip .who b { font-size: 13px; } .user-chip .who small { font-size: 11px; color: var(--nav-muted); } .shift-chip { display: inline-flex; align-items: center; gap: 8px; height: 32px; padding: 0 12px; border-radius: 999px; font-size: 12px; font-weight: 700; text-decoration: none !important; white-space: nowrap; } .shift-chip .pulse { width: 8px; height: 8px; border-radius: 50%; background: currentColor; } .shift-chip.on { background: var(--ok-soft); color: var(--ok); } .shift-chip.on .pulse { animation: pulse 2s infinite; } .shift-chip.off { background: var(--warn-soft); color: var(--warn); } @keyframes pulse { 0% { box-shadow: 0 0 0 0 currentColor; } 70% { box-shadow: 0 0 0 6px transparent; } 100% { box-shadow: 0 0 0 0 transparent; } } .branch-switch { display: inline-flex; align-items: center; gap: 8px; height: 38px; padding: 0 10px 0 12px; border-radius: var(--r-sm); border: 1px solid var(--border); background: var(--surface); color: var(--text); font: inherit; cursor: pointer; } .branch-switch .lbl { display: flex; flex-direction: column; line-height: 1.1; text-align: right; } .branch-switch .lbl small { font-size: 10px; color: var(--muted); } .branch-switch .lbl b { font-size: 13px; } .seg { display: inline-flex; gap: 2px; padding: 3px; border-radius: var(--r-sm); border: 1px solid var(--border); background: var(--surface-2); } .seg button, .seg a { display: inline-flex; align-items: center; gap: 6px; height: 30px; padding: 0 12px; border: 0; border-radius: 7px; background: transparent; color: var(--muted); font: inherit; font-size: 13px; cursor: pointer; text-decoration: none !important; white-space: nowrap; } .seg .on, .seg [aria-pressed="true"], .seg .active { background: var(--surface); color: var(--text); font-weight: 700; box-shadow: var(--shadow-sm); } .on-dark .seg { background: rgba(255,255,255,.05); border-color: var(--nav-border); } .on-dark .seg button { color: var(--nav-muted); padding: 0 9px; } .on-dark .seg .on, .on-dark .seg [aria-pressed="true"] { background: var(--nav-active); color: var(--nav-text); box-shadow: none; } /* ---------------------------------------------------------------- shell: top menu */ .topnav { position: sticky; top: 0; z-index: 40; display: flex; align-items: center; gap: 18px; height: var(--topbar-h); padding: 0 24px; background: var(--nav-bg); color: var(--nav-text); } .topnav .menu { display: flex; align-items: center; gap: 2px; min-width: 0; } .topnav .menu > .item { position: relative; } .topnav .menu > .item > a, .topnav .menu > .item > button { display: flex; align-items: center; gap: 6px; height: 38px; padding: 0 11px; border-radius: var(--r-sm); color: var(--nav-text); font: inherit; font-size: 13.5px; font-weight: 600; background: transparent; border: 0; cursor: pointer; text-decoration: none !important; white-space: nowrap; } .topnav .menu > .item > a:hover, .topnav .menu > .item > button:hover, .topnav .menu > .item.open > button { background: var(--nav-hover); } .topnav .menu > .item.active > a, .topnav .menu > .item.active > button { background: var(--nav-active); } .topnav .menu > .item.active > a::after, .topnav .menu > .item.active > button::after { content: ""; position: absolute; bottom: -11px; right: 12px; left: 12px; height: 3px; border-radius: 3px 3px 0 0; background: var(--primary); } .topnav .menu .chev { color: var(--nav-muted); transition: transform .15s; } .topnav .menu > .item.open .chev { transform: rotate(180deg); } .dropdown { position: absolute; top: calc(100% + 10px); right: 0; min-width: 250px; padding: 6px; z-index: 60; background: var(--surface); color: var(--text); border: 1px solid var(--border); border-radius: var(--r-lg); box-shadow: var(--shadow-lg); display: none; } .item.open > .dropdown, .menu-wrap.open > .dropdown { display: block; animation: drop .12s ease-out; } @keyframes drop { from { opacity: 0; transform: translateY(-4px); } to { opacity: 1; transform: none; } } .dropdown a, .dropdown button.dd-item { display: flex; align-items: center; gap: 10px; width: 100%; padding: 9px 10px; border-radius: var(--r-sm); color: var(--text); text-decoration: none !important; font: inherit; font-size: 13.5px; background: none; border: 0; cursor: pointer; text-align: right; } .dropdown a .ic, .dropdown button.dd-item .ic { color: var(--muted); } .dropdown a:hover, .dropdown a:focus-visible, .dropdown button.dd-item:hover { background: var(--surface-2); outline: none; } .dropdown a.active { background: var(--primary-soft); color: var(--primary); font-weight: 700; } .dropdown a.active .ic { color: var(--primary); } .dropdown a .kbd-end, .side-nav .kbd-end { margin-inline-start: auto; } .dropdown .sep { height: 1px; background: var(--border); margin: 6px 4px; } .dropdown .dd-head { padding: 8px 10px 6px; font-size: 12px; color: var(--muted); } .topnav .spacer { flex: 1; } .topnav .actions { display: flex; align-items: center; gap: 8px; } .cta-pos { display: inline-flex; align-items: center; gap: 8px; height: 38px; padding: 0 14px; border-radius: var(--r-sm); background: var(--primary); color: var(--on-primary) !important; font-weight: 700; font-size: 13.5px; text-decoration: none !important; white-space: nowrap; } .cta-pos:hover { background: var(--primary-hover); } .cta-pos kbd { background: rgba(255,255,255,.18); border-color: rgba(255,255,255,.3); color: #fff; } .subbar { display: flex; align-items: center; gap: 12px; min-height: 54px; padding: 8px 28px; background: var(--surface); border-bottom: 1px solid var(--border); } .crumbs { display: flex; align-items: center; gap: 6px; font-size: 13px; color: var(--muted); min-width: 0; } .crumbs b { color: var(--text); } .crumbs a { color: var(--muted); } /* ---------------------------------------------------------------- shell: side menu */ .shell-side { display: flex; min-height: 100vh; } .sidebar { position: sticky; top: 0; height: 100vh; width: var(--side-w); flex-shrink: 0; display: flex; flex-direction: column; gap: 14px; padding: 18px 12px 14px; background: var(--nav-bg); color: var(--nav-text); overflow: hidden; transition: width .18s ease; } .sidebar .brand { padding: 0 6px; } .side-nav { flex: 1; overflow-y: auto; display: flex; flex-direction: column; gap: 2px; margin: 0 -4px; padding: 0 4px; scrollbar-width: thin; scrollbar-color: var(--nav-active) transparent; } .side-nav a, .side-nav button.grp { display: flex; align-items: center; gap: 11px; width: 100%; height: 40px; padding: 0 11px; border-radius: var(--r-sm); color: var(--nav-text); font: inherit; font-size: 13.5px; font-weight: 600; text-decoration: none !important; border: 0; background: none; cursor: pointer; text-align: right; } .side-nav a .ic, .side-nav button.grp .ic { color: var(--nav-muted); } .side-nav a:hover, .side-nav button.grp:hover { background: var(--nav-hover); } .side-nav a.active { background: var(--nav-active); } .side-nav a.active .ic { color: var(--primary); } .side-nav a.active::before { content: ""; position: absolute; right: 0; width: 3px; height: 22px; border-radius: 3px 0 0 3px; background: var(--primary); } .side-nav a { position: relative; } .side-nav a.cta { background: var(--primary); color: #fff; margin: 4px 0 8px; } .side-nav a.cta .ic { color: #fff; } .side-nav a.cta:hover { background: var(--primary-hover); } .side-nav .grp .chev { margin-inline-start: auto; color: var(--nav-muted); transition: transform .15s; } .side-nav .group.open > .grp .chev { transform: rotate(180deg); } .side-nav .kids { display: none; flex-direction: column; gap: 1px; margin: 2px 22px 6px 0; padding-right: 10px; border-right: 1px solid var(--nav-border); } .side-nav .group.open > .kids { display: flex; } .side-nav .kids a { height: 34px; font-weight: 500; font-size: 13px; color: var(--nav-muted); } .side-nav .kids a:hover { color: var(--nav-text); } .side-nav .kids a.active { color: var(--nav-text); background: var(--nav-active); } .side-nav .kids a.active::before { right: -11px; } .side-foot { display: flex; flex-direction: column; gap: 10px; padding: 12px; border-radius: var(--r-lg); background: var(--nav-2); border: 1px solid var(--nav-border); } .side-foot .row { justify-content: space-between; font-size: 12px; color: var(--nav-muted); } .side-main { flex: 1; min-width: 0; display: flex; flex-direction: column; } .topbar { position: sticky; top: 0; z-index: 30; display: flex; align-items: center; gap: 12px; height: var(--topbar-h); padding: 0 28px; background: var(--surface); border-bottom: 1px solid var(--border); } .topbar .user-chip:hover { background: var(--surface-2); } .topbar .user-chip .who small { color: var(--muted); } .icon-btn { position: relative; display: inline-grid; place-items: center; width: 38px; height: 38px; border-radius: var(--r-sm); border: 1px solid var(--border); background: var(--surface); color: var(--text); cursor: pointer; } .icon-btn:hover { background: var(--surface-2); } .icon-btn .dot { position: absolute; top: 7px; left: 8px; width: 8px; height: 8px; border-radius: 50%; background: var(--primary); box-shadow: 0 0 0 2px var(--surface); } .search-trigger { display: flex; align-items: center; gap: 8px; width: 360px; max-width: 40vw; height: 40px; padding: 0 12px; border-radius: var(--r-sm); border: 1px solid var(--border); background: var(--surface-2); color: var(--muted); cursor: pointer; font: inherit; font-size: 13px; } .search-trigger span { flex: 1; text-align: right; } .search-trigger:hover { border-color: var(--border-strong); } html.side-collapsed .sidebar { width: 72px; } html.side-collapsed .sidebar .brand-name, html.side-collapsed .side-nav .lbl, html.side-collapsed .side-nav .chev, html.side-collapsed .side-nav .nav-kbd, html.side-collapsed .side-nav .kids, html.side-collapsed .side-foot .row span { display: none; } html.side-collapsed .side-nav a, html.side-collapsed .side-nav button.grp { justify-content: center; padding: 0; } html.side-collapsed .side-foot { padding: 8px; align-items: center; } .mobile-toggle { display: none; } .scrim { display: none; } /* ---------------------------------------------------------------- page header */ .page-head { display: flex; align-items: flex-end; justify-content: space-between; gap: 16px; margin-bottom: 20px; flex-wrap: wrap; } .page-head .t { display: flex; flex-direction: column; gap: 4px; min-width: 0; } .page-head h1 { font-size: 1.55rem; } .page-head p { color: var(--muted); font-size: 13.5px; } .page-head .acts { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; } .back-link { display: inline-flex; align-items: center; gap: 4px; color: var(--muted); font-size: 13px; margin-bottom: 2px; } /* ---------------------------------------------------------------- buttons */ .btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; height: var(--h-control); padding: 0 16px; border-radius: var(--r-sm); border: 1px solid var(--border); background: var(--surface); color: var(--text); font: inherit; font-size: 13.5px; font-weight: 600; cursor: pointer; white-space: nowrap; text-decoration: none !important; transition: background .12s, border-color .12s, color .12s, transform .06s; } .btn:hover { background: var(--surface-2); border-color: var(--border-strong); } .btn:active { transform: translateY(1px); } .btn .ic { color: currentColor; opacity: .85; } .btn-primary { background: var(--primary); border-color: var(--primary); color: var(--on-primary); } .btn-primary:hover { background: var(--primary-hover); border-color: var(--primary-hover); } .btn-dark { background: var(--text); border-color: var(--text); color: var(--surface); } .btn-dark:hover { opacity: .9; background: var(--text); } .btn-accent { background: var(--accent); border-color: var(--accent); color: #fff; } .btn-danger { background: var(--bad); border-color: var(--bad); color: #fff; } .btn-danger:hover { filter: brightness(.95); background: var(--bad); } .btn-soft-danger { color: var(--bad); } .btn-soft-danger:hover { background: var(--bad-soft); border-color: var(--bad-soft); } .btn-ok { background: var(--ok); border-color: var(--ok); color: #fff; } .btn-ghost { background: transparent; border-color: transparent; } .btn-ghost:hover { background: var(--surface-2); border-color: transparent; } .btn-sm { height: 32px; padding: 0 11px; font-size: 12.5px; border-radius: var(--r-xs); } .btn-lg { height: 48px; padding: 0 22px; font-size: 15px; border-radius: var(--r); } .btn-icon { width: var(--h-control); padding: 0; } .btn-icon.btn-sm { width: 32px; } .btn[disabled], .btn.disabled { opacity: .5; pointer-events: none; } .btn .kbd-in { font-family: var(--font-mono); font-size: 11px; padding: 2px 6px; border-radius: 5px; background: rgba(0,0,0,.06); color: inherit; opacity: .8; } .btn-primary .kbd-in, .btn-dark .kbd-in, .btn-ok .kbd-in { background: rgba(255,255,255,.2); } .btn.loading { position: relative; color: transparent !important; pointer-events: none; } .btn.loading::after { content: ""; position: absolute; width: 16px; height: 16px; border-radius: 50%; border: 2px solid var(--on-primary); border-right-color: transparent; animation: spin .7s linear infinite; } .btn:not(.btn-primary):not(.btn-danger):not(.btn-ok).loading::after { border-color: var(--text); border-right-color: transparent; } @keyframes spin { to { transform: rotate(360deg); } } /* ---------------------------------------------------------------- cards / stats */ .card { background: var(--surface); border: 1px solid var(--border); border-radius: var(--r-lg); } .card-pad { padding: 18px 20px; } .card-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 16px 20px; border-bottom: 1px solid var(--border); } .card-head.flat { border-bottom: 0; padding-bottom: 6px; } .card-head h2 { font-size: 1rem; } .card-head .sub { font-size: 12px; color: var(--muted); font-weight: 400; margin-top: 2px; } .card-body { padding: 18px 20px; } .card-foot { padding: 12px 20px; border-top: 1px solid var(--border); background: var(--surface-2); border-radius: 0 0 var(--r-lg) var(--r-lg); } .stat { display: flex; flex-direction: column; gap: 6px; padding: 16px 18px; } .stat .top { display: flex; align-items: center; justify-content: space-between; gap: 8px; } .stat .lbl { font-size: 12.5px; color: var(--muted); } .stat .val { font-family: var(--font-display); font-size: 1.65rem; font-weight: 800; letter-spacing: -.3px; line-height: 1.2; } .stat .val small { font-family: var(--font-body); font-size: 12px; font-weight: 400; color: var(--muted); margin-inline-start: 4px; } .stat .note { font-size: 12px; color: var(--muted); font-weight: 600; } .stat .note.up { color: var(--ok); } .stat .note.down { color: var(--bad); } .stat .note.bad { color: var(--bad); } .stat .note.warn { color: var(--warn); } .stat .ico { display: grid; place-items: center; width: 34px; height: 34px; border-radius: var(--r-sm); background: var(--surface-2); color: var(--text); } .stat.hero { background: var(--nav-bg); border-color: var(--nav-bg); color: var(--nav-text); } .stat.hero .lbl, .stat.hero .note, .stat.hero .val small { color: var(--nav-muted); } .stat.hero .ico { background: var(--primary); color: #fff; } .stat.hero .note.up { color: #5FD89C; } /* ---------------------------------------------------------------- badges / pills */ .badge { display: inline-flex; align-items: center; gap: 5px; height: 24px; padding: 0 9px; border-radius: 999px; font-size: 12px; font-weight: 700; white-space: nowrap; background: var(--surface-2); color: var(--muted); } .badge-ok { background: var(--ok-soft); color: var(--ok); } .badge-warn { background: var(--warn-soft); color: var(--warn); } .badge-bad { background: var(--bad-soft); color: var(--bad); } .badge-info { background: var(--info-soft); color: var(--info); } .badge-primary { background: var(--primary-soft); color: var(--primary); } .badge-dark { background: var(--text); color: var(--surface); } .badge-muted { background: var(--surface-3); color: var(--muted); } .badge-outline { background: transparent; border: 1px solid var(--border); color: var(--muted); } .tag { display: inline-flex; align-items: center; gap: 4px; padding: 2px 8px; border-radius: var(--r-xs); background: var(--surface-2); border: 1px solid var(--border); font-size: 12px; color: var(--muted); } .dot-sep::before { content: "•"; margin: 0 6px; color: var(--faint); } /* ---------------------------------------------------------------- forms */ .field { display: flex; flex-direction: column; gap: 6px; min-width: 0; } .field > label, .label { font-size: 12.5px; font-weight: 700; color: var(--muted); } .field .hint { font-size: 12px; color: var(--faint); } .field .err { font-size: 12px; color: var(--bad); font-weight: 600; } .req::after { content: " *"; color: var(--primary); } .input, .select, .textarea, input[type=text].input, input[type=number].input { width: 100%; height: var(--h-control); padding: 0 12px; border-radius: var(--r-sm); border: 1px solid var(--border); background: var(--surface); color: var(--text); font: inherit; font-size: 14px; transition: border-color .12s, box-shadow .12s; } .textarea { height: auto; min-height: 84px; padding: 10px 12px; resize: vertical; line-height: 1.5; } .select { appearance: none; padding-left: 32px; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 24 24' fill='none' stroke='%237D828F' stroke-width='2'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: left 10px center; } .input:hover, .select:hover, .textarea:hover { border-color: var(--border-strong); } .input:focus, .select:focus, .textarea:focus { border-color: var(--primary); box-shadow: 0 0 0 3px var(--primary-ring); outline: none; } .input.is-invalid { border-color: var(--bad); } .input[readonly] { background: var(--surface-2); } .input.num, .input[type=number] { font-family: var(--font-mono); } .input-lg { height: 48px; font-size: 16px; } .input-group { display: flex; align-items: stretch; } .input-group .input { border-radius: 0; } .input-group > :first-child { border-radius: 0 var(--r-sm) var(--r-sm) 0; } .input-group > :last-child { border-radius: var(--r-sm) 0 0 var(--r-sm); } .input-group > * + * { margin-right: -1px; } .addon { display: inline-flex; align-items: center; padding: 0 10px; border: 1px solid var(--border); background: var(--surface-2); color: var(--muted); font-size: 13px; white-space: nowrap; } .input-icon { position: relative; } .input-icon .ic { position: absolute; top: 50%; right: 12px; transform: translateY(-50%); color: var(--faint); pointer-events: none; } .input-icon .input { padding-right: 38px; } input[type=number]::-webkit-inner-spin-button { opacity: .4; } .form-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px 16px; } .form-grid.three { grid-template-columns: repeat(3, minmax(0, 1fr)); } .form-grid .full { grid-column: 1 / -1; } .form-section { padding: 18px 0; border-top: 1px dashed var(--border); } .form-section:first-child { border-top: 0; padding-top: 0; } .form-section > h3 { margin-bottom: 12px; font-size: .95rem; } .switch { position: relative; display: inline-flex; align-items: center; gap: 10px; cursor: pointer; user-select: none; } .switch input { position: absolute; opacity: 0; width: 0; height: 0; } .switch .track { position: relative; width: 38px; height: 22px; border-radius: 999px; background: var(--surface-3); border: 1px solid var(--border-strong); transition: background .15s; flex-shrink: 0; } .switch .track::after { content: ""; position: absolute; top: 2px; right: 2px; width: 16px; height: 16px; border-radius: 50%; background: #fff; box-shadow: var(--shadow-sm); transition: transform .15s; } .switch input:checked + .track { background: var(--primary); border-color: var(--primary); } .switch input:checked + .track::after { transform: translateX(-16px); } .switch input:focus-visible + .track { box-shadow: 0 0 0 3px var(--primary-ring); } .setting-row { display: flex; align-items: flex-start; justify-content: space-between; gap: 16px; padding: 14px 0; border-bottom: 1px solid var(--border); } .setting-row:last-child { border-bottom: 0; } .setting-row .t b { display: block; font-size: 14px; } .setting-row .t span { font-size: 12.5px; color: var(--muted); } .check { display: inline-flex; align-items: center; gap: 8px; cursor: pointer; font-size: 13.5px; } .check input { width: 16px; height: 16px; accent-color: var(--primary); } /* ---------------------------------------------------------------- tables */ /* release note: every table's body text is now bold-weight and full-contrast by default (not just on hover) - the previous 400-weight small text and hover-only action buttons were hard to read on shared/tablet screens (cashiers, warehouse staff) with no reliable hover. Scoped to .table specifically so it doesn't change weight/contrast anywhere else in the app (badges, cards, meta text outside tables are unaffected). */ .table-wrap { overflow-x: auto; } .table { width: 100%; border-collapse: collapse; font-size: 14px; } .table th { position: sticky; top: 0; z-index: 1; text-align: right; font-weight: 800; font-size: 12.5px; color: var(--text); padding: 11px 14px; background: var(--surface-2); border-bottom: 1px solid var(--border); white-space: nowrap; } .table td { padding: 11px 14px; border-bottom: 1px solid var(--border); vertical-align: middle; font-weight: 700; color: var(--text); } .table tbody tr:last-child td { border-bottom: 0; } .table tbody tr:hover td { background: var(--surface-2); } .table tr.clickable { cursor: pointer; } .table th.t-num { font-family: var(--font-body); } .table .t-num { text-align: left; font-family: var(--font-mono); font-variant-numeric: tabular-nums; white-space: nowrap; direction: ltr; } .table .t-act { width: 1%; white-space: nowrap; text-align: left; } .table .t-act .btn { visibility: visible; } .table tfoot td { font-weight: 800; background: var(--surface-2); border-top: 1px solid var(--border); } .table .sub { display: block; font-size: 12.5px; font-weight: 600; color: var(--muted); } .table.compact td, .table.compact th { padding: 8px 12px; } .table .row-muted td { color: var(--faint); } .table .small { font-weight: 700; } .table .muted { font-weight: 600; } .table .faint { font-weight: 600; } .table-card { overflow: hidden; } .table-card .table th:first-child { border-top-right-radius: 0; } .filters { display: flex; align-items: flex-end; gap: 10px; flex-wrap: wrap; padding: 14px 16px; border-bottom: 1px solid var(--border); } .filters .field { min-width: 150px; } .filters .field.wide { min-width: 260px; flex: 1; } .pager { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 12px 16px; border-top: 1px solid var(--border); font-size: 13px; color: var(--muted); } .pager .pages { display: flex; gap: 4px; } .pager a, .pager span.cur { display: inline-grid; place-items: center; min-width: 32px; height: 32px; padding: 0 8px; border-radius: var(--r-xs); border: 1px solid var(--border); color: var(--text); text-decoration: none !important; background: var(--surface); } .pager span.cur { background: var(--text); color: var(--surface); border-color: var(--text); font-weight: 700; } .pager a:hover { background: var(--surface-2); } /* ---------------------------------------------------------------- tabs */ .tabs { display: flex; gap: 4px; border-bottom: 1px solid var(--border); margin-bottom: 18px; overflow-x: auto; } .tabs a, .tabs button { display: inline-flex; align-items: center; gap: 8px; padding: 10px 14px; margin-bottom: -1px; border: 0; border-bottom: 2px solid transparent; background: none; color: var(--muted); font: inherit; font-weight: 700; font-size: 13.5px; cursor: pointer; white-space: nowrap; text-decoration: none !important; } .tabs a:hover, .tabs button:hover { color: var(--text); } .tabs .on, .tabs [aria-selected="true"] { color: var(--text); border-bottom-color: var(--primary); } .tabs .count { font-size: 11px; padding: 1px 7px; border-radius: 999px; background: var(--surface-3); color: var(--muted); } .tab-panel { display: none; } .tab-panel.on { display: block; } /* ---------------------------------------------------------------- empty / skeleton / alerts */ .empty { display: flex; flex-direction: column; align-items: center; gap: 10px; padding: 48px 20px; text-align: center; color: var(--muted); } .empty .art { display: grid; place-items: center; width: 64px; height: 64px; border-radius: 18px; background: var(--surface-2); color: var(--faint); margin-bottom: 4px; } .empty b { color: var(--text); font-size: 15px; font-family: var(--font-display); } .skeleton { background: linear-gradient(90deg, var(--surface-2), var(--surface-3), var(--surface-2)); background-size: 200% 100%; animation: sk 1.2s infinite; border-radius: var(--r-xs); height: 14px; } @keyframes sk { to { background-position: -200% 0; } } .alert { display: flex; align-items: flex-start; gap: 12px; padding: 12px 14px; border-radius: var(--r); border: 1px solid transparent; font-size: 13.5px; } .alert .ic { margin-top: 2px; } .alert-info { background: var(--info-soft); color: var(--info); } .alert-warn { background: var(--warn-soft); color: var(--warn); } .alert-bad { background: var(--bad-soft); color: var(--bad); } .alert-ok { background: var(--ok-soft); color: var(--ok); } .alert b { color: inherit; } .banner { display: flex; align-items: center; justify-content: center; gap: 12px; padding: 8px 16px; font-size: 13px; font-weight: 600; background: var(--warn-soft); color: var(--warn); border-bottom: 1px solid var(--border); } .banner.bad { background: var(--bad-soft); color: var(--bad); } .banner.info { background: var(--info-soft); color: var(--info); } .banner a { color: inherit; text-decoration: underline; font-weight: 800; } /* ---------------------------------------------------------------- modal */ .modal-root { position: fixed; inset: 0; z-index: 100; display: none; align-items: flex-start; justify-content: center; padding: 6vh 16px 16px; background: rgba(12, 14, 18, .5); backdrop-filter: blur(2px); overflow-y: auto; } .modal-root.open { display: flex; animation: fade .12s ease-out; } @keyframes fade { from { opacity: 0; } to { opacity: 1; } } .modal { width: 100%; max-width: 560px; background: var(--surface); border-radius: var(--r-xl); box-shadow: var(--shadow-lg); border: 1px solid var(--border); animation: pop .14s ease-out; } .modal.sm { max-width: 420px; } .modal.lg { max-width: 820px; } .modal.xl { max-width: 1100px; } @keyframes pop { from { transform: translateY(8px) scale(.99); opacity: 0; } to { transform: none; opacity: 1; } } .modal-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 16px 20px; border-bottom: 1px solid var(--border); } .modal-head h2 { font-size: 1.05rem; } .modal-head .sub { font-size: 12.5px; color: var(--muted); margin-top: 2px; } .modal-body { padding: 18px 20px; max-height: calc(88vh - 140px); overflow-y: auto; } .modal-foot { display: flex; align-items: center; justify-content: flex-start; gap: 8px; padding: 14px 20px; border-top: 1px solid var(--border); background: var(--surface-2); border-radius: 0 0 var(--r-xl) var(--r-xl); } .modal-foot .spacer { flex: 1; } /* ---------------------------------------------------------------- toast */ .toasts { position: fixed; bottom: 20px; left: 50%; transform: translateX(-50%); z-index: 200; display: flex; flex-direction: column; align-items: center; gap: 8px; pointer-events: none; } .toast { display: flex; align-items: center; gap: 10px; min-width: 280px; max-width: 520px; padding: 12px 16px; border-radius: var(--r); background: var(--nav-bg); color: var(--nav-text); box-shadow: var(--shadow-lg); font-size: 13.5px; font-weight: 600; pointer-events: auto; animation: toastIn .18s ease-out; } .toast .ic { color: var(--nav-muted); } .toast.ok .ic { color: #5FD89C; } .toast.bad .ic { color: #FF8A7E; } .toast.warn .ic { color: #F5B94D; } .toast.out { animation: toastOut .2s ease-in forwards; } @keyframes toastIn { from { transform: translateY(12px); opacity: 0; } to { transform: none; opacity: 1; } } @keyframes toastOut { to { transform: translateY(12px); opacity: 0; } } /* ---------------------------------------------------------------- command palette */ .palette { max-width: 640px; } .palette .p-search { display: flex; align-items: center; gap: 10px; padding: 14px 18px; border-bottom: 1px solid var(--border); } .palette .p-search input { flex: 1; border: 0; background: none; font: inherit; font-size: 16px; color: var(--text); outline: none; } .palette .p-list { max-height: 420px; overflow-y: auto; padding: 8px; } .palette .p-group { padding: 8px 10px 4px; font-size: 11.5px; color: var(--faint); font-weight: 700; } .palette .p-item { display: flex; align-items: center; gap: 12px; padding: 10px; border-radius: var(--r-sm); cursor: pointer; color: var(--text); } .palette .p-item .ic { color: var(--muted); } .palette .p-item .p-sub { font-size: 12px; color: var(--muted); margin-inline-start: auto; } .palette .p-item.on { background: var(--primary-soft); } .palette .p-item.on .ic { color: var(--primary); } .palette .p-foot { display: flex; gap: 14px; padding: 10px 18px; border-top: 1px solid var(--border); font-size: 12px; color: var(--muted); background: var(--surface-2); border-radius: 0 0 var(--r-xl) var(--r-xl); } .shortcuts-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 6px 24px; } .shortcuts-grid .sc { display: flex; align-items: center; justify-content: space-between; gap: 8px; padding: 8px 0; border-bottom: 1px dashed var(--border); font-size: 13.5px; } /* ---------------------------------------------------------------- misc components */ .list-row { display: flex; align-items: center; gap: 12px; padding: 11px 0; border-bottom: 1px solid var(--border); } .list-row:last-child { border-bottom: 0; } .tile-ic { display: grid; place-items: center; width: 38px; height: 38px; border-radius: var(--r-sm); flex-shrink: 0; background: var(--surface-2); color: var(--muted); } .tile-ic.primary { background: var(--primary-soft); color: var(--primary); } .tile-ic.ok { background: var(--ok-soft); color: var(--ok); } .tile-ic.bad { background: var(--bad-soft); color: var(--bad); } .tile-ic.warn { background: var(--warn-soft); color: var(--warn); } .tile-ic.info { background: var(--info-soft); color: var(--info); } .progress { height: 8px; border-radius: 999px; background: var(--surface-3); overflow: hidden; } .progress > span { display: block; height: 100%; border-radius: 999px; background: var(--primary); } .kv { display: grid; grid-template-columns: auto 1fr; gap: 8px 16px; font-size: 13.5px; } .kv dt { color: var(--muted); } .kv dd { margin: 0; font-weight: 600; } .totals { display: flex; flex-direction: column; gap: 8px; font-size: 14px; } .totals .line { display: flex; justify-content: space-between; gap: 12px; } .totals .line.grand { padding-top: 10px; border-top: 1px dashed var(--border-strong); font-size: 1.2rem; font-weight: 800; font-family: var(--font-display); } .chip-row { display: flex; gap: 6px; flex-wrap: wrap; } .chip { display: inline-flex; align-items: center; gap: 6px; height: 32px; padding: 0 12px; border-radius: 999px; border: 1px solid var(--border); background: var(--surface); color: var(--text); font: inherit; font-size: 13px; cursor: pointer; white-space: nowrap; } .chip:hover { border-color: var(--border-strong); } .chip.on { background: var(--text); color: var(--surface); border-color: var(--text); font-weight: 700; } .divider { height: 1px; background: var(--border); margin: 16px 0; } .chart-box { position: relative; width: 100%; } .help-tip { display: inline-grid; place-items: center; width: 18px; height: 18px; border-radius: 50%; background: var(--surface-3); color: var(--muted); font-size: 11px; font-weight: 800; cursor: help; } .dropzone { display: flex; flex-direction: column; align-items: center; gap: 8px; padding: 28px; border: 2px dashed var(--border-strong); border-radius: var(--r-lg); color: var(--muted); text-align: center; cursor: pointer; } .dropzone:hover, .dropzone.drag { border-color: var(--primary); color: var(--primary); background: var(--primary-soft); } .thumb { width: 44px; height: 44px; border-radius: var(--r-sm); object-fit: cover; background: var(--surface-2); border: 1px solid var(--border); flex-shrink: 0; display: grid; place-items: center; color: var(--faint); } .menu-wrap { position: relative; display: inline-block; } .menu-wrap > .dropdown { top: calc(100% + 6px); } .menu-wrap.left > .dropdown { right: auto; left: 0; } /* reminder popup */ .reminder { position: fixed; bottom: 20px; right: 20px; z-index: 150; width: 360px; background: var(--surface); border: 1px solid var(--border); border-radius: var(--r-xl); box-shadow: var(--shadow-lg); overflow: hidden; animation: pop .2s ease-out; } .reminder .rh { display: flex; align-items: center; gap: 10px; padding: 12px 16px; background: var(--primary); color: #fff; font-weight: 700; } .reminder .rb { padding: 14px 16px; font-size: 13.5px; } .reminder .rf { display: flex; justify-content: space-between; align-items: center; padding: 10px 16px; border-top: 1px solid var(--border); font-size: 12px; color: var(--muted); } /* ---------------------------------------------------------------- auth screens */ .auth { min-height: 100vh; display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.1fr); background: var(--surface); } .auth-side { position: relative; display: flex; flex-direction: column; justify-content: space-between; padding: 40px 48px; background: var(--nav-bg); color: var(--nav-text); overflow: hidden; } .auth-side h2 { font-size: 2.1rem; line-height: 1.35; max-width: 460px; } .auth-side h2 em { font-style: normal; color: var(--primary); } .auth-side .feat { display: flex; flex-direction: column; gap: 14px; max-width: 420px; } .auth-side .feat div { display: flex; gap: 12px; align-items: flex-start; font-size: 14px; color: var(--nav-muted); } .auth-side .feat b { display: block; color: var(--nav-text); font-size: 14.5px; } .auth-side .feat .tile-ic { background: var(--nav-active); color: var(--primary); } .auth-side .grid-art { position: absolute; inset: 0; background-image: linear-gradient(var(--nav-border) 1px, transparent 1px), linear-gradient(90deg, var(--nav-border) 1px, transparent 1px); background-size: 44px 44px; opacity: .5; mask-image: radial-gradient(ellipse at 30% 30%, #000 20%, transparent 70%); pointer-events: none; } .auth-main { display: flex; align-items: center; justify-content: center; padding: 40px 24px; } .auth-card { width: 100%; max-width: 420px; display: flex; flex-direction: column; gap: 18px; } .auth-card h1 { font-size: 1.7rem; } .auth-card .lead { color: var(--muted); } .auth-foot { font-size: 13px; color: var(--muted); text-align: center; } /* a