/* ============================================================================ NqdPay Design System — "Institutional Slate" ---------------------------------------------------------------------------- One stylesheet shared by Administration.Web, Merchant.Web and Merchant.Pwa. Keep the three copies identical; edit here and copy across. Principles - Neutral cool greys carry the page. The accent appears only on primary actions, active navigation and focus rings. - Colour otherwise means status: success / warning / critical. Nothing else is coloured for decoration. - Hairline borders instead of shadows for structure. Shadows only for things that genuinely float (dropdowns, modals, popovers). - Data is dense and aligned. Numerals are tabular everywhere they line up. Sections 01 Fonts 02 Tokens (light) 03 Tokens (dark) 04 Bootstrap variable remap 05 Base & typography 06 App shell 07 Buttons 08 Forms 09 Cards & panels 10 Tables & DataTables 11 Status pills & badges 12 Data toolbar / filters / chips 13 Stat tiles 14 Modals, dropdowns, alerts 15 Auth pages 16 Utilities ========================================================================== */ /* ---- 01 Fonts ----------------------------------------------------------- */ /* IBM Plex: institutional character without novelty, and the Arabic cut keeps the ar-SA culture visually consistent with the Latin one. */ @import url('https://fonts.googleapis.com/css2?family=IBM+Plex+Sans:wght@400;450;500;600;700&family=IBM+Plex+Sans+Arabic:wght@400;500;600;700&family=IBM+Plex+Mono:wght@400;500;600&display=swap'); /* ---- 02 Tokens (light) -------------------------------------------------- */ :root { /* Surfaces */ --nq-ground: #F7F8FA; --nq-surface: #FFFFFF; --nq-surface-2: #F1F3F6; --nq-surface-3: #E8ECF1; --nq-sidebar: #FFFFFF; /* Lines */ --nq-line: #E2E6EC; --nq-line-strong: #CBD2DB; /* Ink */ --nq-ink: #0F1720; --nq-ink-2: #4A5563; --nq-ink-3: #6B7684; --nq-ink-inverse: #FFFFFF; /* Accent — deep institutional blue */ --nq-accent: #1F4E79; --nq-accent-hover: #17395A; --nq-accent-active: #102A43; --nq-accent-subtle: #EBF1F7; --nq-accent-line: #C3D6E6; --nq-accent-ink: #1A4468; /* Status */ --nq-success: #14714B; --nq-success-bg: #E7F4EE; --nq-success-line: #B6DCC9; --nq-warning: #8A5A00; --nq-warning-bg: #FBF0DC; --nq-warning-line: #E8D2A5; --nq-danger: #A32020; --nq-danger-bg: #FBEAEA; --nq-danger-line: #EEC2C2; --nq-neutral: #4A5563; --nq-neutral-bg: #EEF1F5; --nq-neutral-line: #D7DDE5; /* Focus */ --nq-focus: 0 0 0 3px rgba(31, 78, 121, .20); /* Elevation — only for floating things */ --nq-shadow-1: 0 1px 2px rgba(15, 23, 32, .05); --nq-shadow-2: 0 4px 12px rgba(15, 23, 32, .08), 0 1px 3px rgba(15, 23, 32, .06); --nq-shadow-3: 0 12px 32px rgba(15, 23, 32, .14), 0 2px 8px rgba(15, 23, 32, .08); /* Type */ --nq-font: 'IBM Plex Sans', 'IBM Plex Sans Arabic', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif; --nq-font-mono: 'IBM Plex Mono', ui-monospace, 'Cascadia Mono', Consolas, monospace; /* Geometry */ --nq-r-sm: 4px; --nq-r: 6px; --nq-r-lg: 8px; --nq-sidebar-w: 244px; --nq-sidebar-w-collapsed: 64px; --nq-navbar-h: 56px; } /* ---- 03 Tokens (dark) --------------------------------------------------- */ /* Redefine tokens only. Components never read a raw colour, so both themes resolve as complete sets. Guarded so an explicit light choice beats a dark OS. */ @media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) { --nq-ground: #0C1015; --nq-surface: #12181F; --nq-surface-2: #182029; --nq-surface-3: #1F2831; --nq-sidebar: #0F151B; --nq-line: #232C36; --nq-line-strong: #33404D; --nq-ink: #E6EBF0; --nq-ink-2: #A7B2BF; --nq-ink-3: #7C8797; --nq-ink-inverse: #0C1015; --nq-accent: #6BA3D6; --nq-accent-hover: #85B5E1; --nq-accent-active: #9CC5E9; --nq-accent-subtle: #14212E; --nq-accent-line: #24405A; --nq-accent-ink: #9CC5E9; --nq-success: #4FBF8B; --nq-success-bg: #10231B; --nq-success-line: #1F4535; --nq-warning: #D9A441; --nq-warning-bg: #241E12; --nq-warning-line: #4A3A1C; --nq-danger: #E8797C; --nq-danger-bg: #2A1618; --nq-danger-line: #4F2A2D; --nq-neutral: #A7B2BF; --nq-neutral-bg: #1A222B; --nq-neutral-line: #2B3641; --nq-focus: 0 0 0 3px rgba(107, 163, 214, .28); --nq-shadow-1: 0 1px 2px rgba(0, 0, 0, .4); --nq-shadow-2: 0 4px 12px rgba(0, 0, 0, .5), 0 1px 3px rgba(0, 0, 0, .4); --nq-shadow-3: 0 12px 32px rgba(0, 0, 0, .6), 0 2px 8px rgba(0, 0, 0, .45); } } :root[data-theme="dark"] { --nq-ground: #0C1015; --nq-surface: #12181F; --nq-surface-2: #182029; --nq-surface-3: #1F2831; --nq-sidebar: #0F151B; --nq-line: #232C36; --nq-line-strong: #33404D; --nq-ink: #E6EBF0; --nq-ink-2: #A7B2BF; --nq-ink-3: #7C8797; --nq-ink-inverse: #0C1015; --nq-accent: #6BA3D6; --nq-accent-hover: #85B5E1; --nq-accent-active: #9CC5E9; --nq-accent-subtle: #14212E; --nq-accent-line: #24405A; --nq-accent-ink: #9CC5E9; --nq-success: #4FBF8B; --nq-success-bg: #10231B; --nq-success-line: #1F4535; --nq-warning: #D9A441; --nq-warning-bg: #241E12; --nq-warning-line: #4A3A1C; --nq-danger: #E8797C; --nq-danger-bg: #2A1618; --nq-danger-line: #4F2A2D; --nq-neutral: #A7B2BF; --nq-neutral-bg: #1A222B; --nq-neutral-line: #2B3641; --nq-focus: 0 0 0 3px rgba(107, 163, 214, .28); --nq-shadow-1: 0 1px 2px rgba(0, 0, 0, .4); --nq-shadow-2: 0 4px 12px rgba(0, 0, 0, .5), 0 1px 3px rgba(0, 0, 0, .4); --nq-shadow-3: 0 12px 32px rgba(0, 0, 0, .6), 0 2px 8px rgba(0, 0, 0, .45); } /* ---- 04 Bootstrap variable remap ---------------------------------------- */ /* Bootstrap 5.3 reads these at component level, so remapping them re-skins every existing .btn / .card / .table / .form-control in place. */ :root, :root[data-theme="dark"] { --bs-body-bg: var(--nq-ground); --bs-body-color: var(--nq-ink); --bs-body-font-family: var(--nq-font); --bs-body-font-size: .875rem; --bs-body-line-height: 1.55; --bs-emphasis-color: var(--nq-ink); --bs-secondary-color: var(--nq-ink-2); --bs-tertiary-color: var(--nq-ink-3); --bs-border-color: var(--nq-line); --bs-border-radius: var(--nq-r); --bs-border-radius-sm: var(--nq-r-sm); --bs-border-radius-lg: var(--nq-r-lg); --bs-border-radius-xl: var(--nq-r-lg); --bs-border-radius-2xl: var(--nq-r-lg); --bs-primary: var(--nq-accent); --bs-primary-rgb: 31, 78, 121; --bs-secondary: var(--nq-ink-2); --bs-success: var(--nq-success); --bs-warning: var(--nq-warning); --bs-danger: var(--nq-danger); --bs-info: var(--nq-accent); --bs-link-color: var(--nq-accent); --bs-link-hover-color: var(--nq-accent-hover); --bs-secondary-bg: var(--nq-surface-2); --bs-tertiary-bg: var(--nq-surface-3); --bs-heading-color: var(--nq-ink); } /* ---- 04b Legacy aliases --------------------------------------------------- */ /* A number of views still reference the previous theme's variable names inline. Aliasing them onto the new tokens keeps those pages correct in both themes without touching every file. Do not use these in new markup. */ :root, :root[data-theme="dark"] { --primary-color: var(--nq-accent); --primary-hover: var(--nq-accent-hover); --secondary-color: var(--nq-ink-3); --success-color: var(--nq-success); --warning-color: var(--nq-warning); --danger-color: var(--nq-danger); --bg-light: var(--nq-ground); --bg-card: var(--nq-surface); --text-primary: var(--nq-ink); --text-secondary: var(--nq-ink-3); --border-color: var(--nq-line); --border-radius: var(--nq-r-lg); --sidebar-width: var(--nq-sidebar-w); --navbar-height: var(--nq-navbar-h); --shadow-sm: var(--nq-shadow-1); --shadow-md: var(--nq-shadow-1); --shadow-lg: var(--nq-shadow-2); --transition-speed: .14s; /* PWA legacy names */ --brand-primary: var(--nq-accent); --brand-secondary: var(--nq-accent-hover); --brand-accent: var(--nq-accent); --gradient-primary: var(--nq-accent); --gradient-secondary: var(--nq-accent-hover); --gradient-success: var(--nq-success); --gradient-gold: var(--nq-warning); --gradient-ocean: var(--nq-accent); --gradient-sunset: var(--nq-warning); --gradient-royal: var(--nq-accent); --gradient-neon: var(--nq-accent); --glass-bg: var(--nq-surface); --glass-border: var(--nq-line); --glass-shadow: var(--nq-shadow-1); --shadow-soft: var(--nq-shadow-1); --shadow-medium: var(--nq-shadow-1); --shadow-large: var(--nq-shadow-2); --shadow-xlarge: var(--nq-shadow-2); --shadow-glow: none; --shadow-glow-accent: none; --font-display: var(--nq-font); --font-body: var(--nq-font); --radius-sm: var(--nq-r); --radius-md: var(--nq-r-lg); --radius-lg: var(--nq-r-lg); --radius-xl: var(--nq-r-lg); --radius-pill: 999px; } /* ---- 05 Base & typography ------------------------------------------------ */ * { box-sizing: border-box; } html { -webkit-text-size-adjust: 100%; } body { margin: 0; background: var(--nq-ground); color: var(--nq-ink); font-family: var(--nq-font); font-size: .875rem; line-height: 1.55; font-feature-settings: 'cv05' 1, 'ss01' 1; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; } h1, h2, h3, h4, h5, h6, .h1, .h2, .h3, .h4, .h5, .h6 { color: var(--nq-ink); font-weight: 600; letter-spacing: -.011em; text-wrap: balance; margin-top: 0; } h1, .h1 { font-size: 1.5rem; line-height: 1.25; } h2, .h2 { font-size: 1.25rem; line-height: 1.3; } h3, .h3 { font-size: 1.0625rem; line-height: 1.35; } h4, .h4 { font-size: .9375rem; } h5, .h5 { font-size: .875rem; } h6, .h6 { font-size: .8125rem; } a { color: var(--nq-accent); text-decoration: none; } a:hover { color: var(--nq-accent-hover); text-decoration: underline; } code, kbd, pre, samp, .nq-mono { font-family: var(--nq-font-mono); font-size: .8125rem; } /* Anywhere digits line up in a column. */ .nq-num, td.nq-num, .table td.text-end, .nq-tabular { font-variant-numeric: tabular-nums; font-feature-settings: 'tnum' 1; } /* Small uppercase section label. */ .nq-eyebrow { font-size: .6875rem; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; color: var(--nq-ink-3); } .text-muted { color: var(--nq-ink-3) !important; } .text-secondary { color: var(--nq-ink-2) !important; } hr { border-color: var(--nq-line); opacity: 1; } ::selection { background: var(--nq-accent-subtle); color: var(--nq-ink); } :focus-visible { outline: 2px solid var(--nq-accent); outline-offset: 2px; } /* Consistent scrollbars so panels don't jump between platforms. */ * { scrollbar-width: thin; scrollbar-color: var(--nq-line-strong) transparent; } *::-webkit-scrollbar { width: 10px; height: 10px; } *::-webkit-scrollbar-track { background: transparent; } *::-webkit-scrollbar-thumb { background: var(--nq-line-strong); border-radius: 6px; border: 3px solid var(--nq-ground); } /* ---- 06 App shell -------------------------------------------------------- */ .sidebar { position: fixed; inset-block: 0; inset-inline-start: 0; width: var(--nq-sidebar-w); background: var(--nq-sidebar); border-inline-end: 1px solid var(--nq-line); display: flex; flex-direction: column; z-index: 1040; transition: transform .18s ease, width .18s ease; } .sidebar-header { height: var(--nq-navbar-h); display: flex; align-items: center; gap: .625rem; padding-inline: 1rem; border-bottom: 1px solid var(--nq-line); font-size: .9375rem; font-weight: 600; letter-spacing: -.01em; color: var(--nq-ink); flex: none; white-space: nowrap; overflow: hidden; } .sidebar-header img { width: 26px !important; height: 26px !important; object-fit: contain; flex: none; margin: 0 !important; } .sidebar-nav { flex: 1; overflow-y: auto; overscroll-behavior: contain; padding: .75rem .625rem 1.5rem; } .sidebar-caption { font-size: .6875rem; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; color: var(--nq-ink-3); padding: .875rem .625rem .375rem; } .sidebar-nav .nav-link { display: flex; align-items: center; gap: .625rem; padding: .4375rem .625rem; margin-bottom: 1px; border-radius: var(--nq-r); color: var(--nq-ink-2); font-size: .8125rem; font-weight: 450; line-height: 1.4; text-decoration: none; position: relative; transition: background-color .12s ease, color .12s ease; } /* Icons come through as .w-25 from the existing markup — neutralise that and give every icon the same optical box so labels align. */ .sidebar-nav .nav-link > i { width: 16px !important; flex: none; font-size: .8125rem; text-align: center; color: var(--nq-ink-3); transition: color .12s ease; } .sidebar-nav .nav-link:hover { background: var(--nq-surface-2); color: var(--nq-ink); text-decoration: none; } .sidebar-nav .nav-link:hover > i { color: var(--nq-ink-2); } .sidebar-nav .nav-link.active { background: var(--nq-accent-subtle); color: var(--nq-accent-ink); font-weight: 600; } .sidebar-nav .nav-link.active > i { color: var(--nq-accent); } .sidebar-nav .nav-link.active::before { content: ''; position: absolute; inset-inline-start: -.625rem; top: 50%; translate: 0 -50%; width: 3px; height: 18px; border-radius: 0 2px 2px 0; background: var(--nq-accent); } .sidebar-nav .collapse .nav-link, .sidebar-nav .collapsing .nav-link { padding-inline-start: 2.25rem !important; font-size: .8125rem; } .sidebar-nav .collapse .nav-link > i, .sidebar-nav .collapsing .nav-link > i { display: none; } .top-navbar { position: fixed; top: 0; inset-inline-end: 0; inset-inline-start: var(--nq-sidebar-w); height: var(--nq-navbar-h); background: var(--nq-surface); border-bottom: 1px solid var(--nq-line); display: flex; align-items: center; justify-content: space-between; padding-inline: 1.25rem; z-index: 1030; transition: inset-inline-start .18s ease; } .top-navbar h5 { font-size: .875rem; font-weight: 500; color: var(--nq-ink-2); margin: 0; } .main-content { margin-inline-start: var(--nq-sidebar-w); padding: 1.5rem; padding-top: calc(var(--nq-navbar-h) + 1.5rem); min-height: 100vh; transition: margin-inline-start .18s ease; } /* Collapsed state (desktop) */ body.sidebar-collapsed .sidebar { width: var(--nq-sidebar-w-collapsed); } body.sidebar-collapsed .sidebar .sidebar-caption, body.sidebar-collapsed .sidebar .nav-link span, body.sidebar-collapsed .sidebar-header span { display: none; } body.sidebar-collapsed .sidebar .nav-link { justify-content: center; } body.sidebar-collapsed .top-navbar { inset-inline-start: var(--nq-sidebar-w-collapsed); } body.sidebar-collapsed .main-content { margin-inline-start: var(--nq-sidebar-w-collapsed); } @media (max-width: 991.98px) { .sidebar { transform: translateX(-100%); } html[dir="rtl"] .sidebar { transform: translateX(100%); } body.sidebar-open .sidebar { transform: none; } .top-navbar { inset-inline-start: 0; } .main-content { margin-inline-start: 0; padding: 1rem; padding-top: calc(var(--nq-navbar-h) + 1rem); } .nq-scrim { position: fixed; inset: 0; z-index: 1035; background: rgba(15, 23, 32, .45); opacity: 0; pointer-events: none; transition: opacity .18s ease; } body.sidebar-open .nq-scrim { opacity: 1; pointer-events: auto; } } /* Page header block */ .nq-page-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 1rem; flex-wrap: wrap; margin-bottom: 1.25rem; } .nq-page-head h1, .nq-page-head .nq-title { font-size: 1.375rem; font-weight: 600; letter-spacing: -.015em; margin: 0; } .nq-page-head .nq-subtitle { font-size: .8125rem; color: var(--nq-ink-3); margin: .1875rem 0 0; } .nq-page-actions { display: flex; gap: .5rem; flex-wrap: wrap; } /* ---- 07 Buttons ---------------------------------------------------------- */ .btn { --bs-btn-padding-y: .4375rem; --bs-btn-padding-x: .875rem; --bs-btn-font-size: .8125rem; --bs-btn-font-weight: 500; --bs-btn-border-radius: var(--nq-r); letter-spacing: -.005em; display: inline-flex; align-items: center; justify-content: center; gap: .4375rem; transition: background-color .12s ease, border-color .12s ease, color .12s ease; } .btn:focus-visible { box-shadow: var(--nq-focus); outline: none; } .btn-sm { --bs-btn-padding-y: .3125rem; --bs-btn-padding-x: .625rem; --bs-btn-font-size: .75rem; } .btn-lg { --bs-btn-padding-y: .5625rem; --bs-btn-padding-x: 1.125rem; --bs-btn-font-size: .875rem; } .btn-primary { --bs-btn-bg: var(--nq-accent); --bs-btn-border-color: var(--nq-accent); --bs-btn-color: #fff; --bs-btn-hover-bg: var(--nq-accent-hover); --bs-btn-hover-border-color: var(--nq-accent-hover); --bs-btn-hover-color: #fff; --bs-btn-active-bg: var(--nq-accent-active); --bs-btn-active-border-color: var(--nq-accent-active); --bs-btn-disabled-bg: var(--nq-line-strong); --bs-btn-disabled-border-color: var(--nq-line-strong); --bs-btn-disabled-color: var(--nq-surface); } :root[data-theme="dark"] .btn-primary { --bs-btn-color: #0C1015; --bs-btn-hover-color: #0C1015; } .btn-secondary, .btn-outline-secondary, .btn-outline-primary, .btn-light { --bs-btn-bg: var(--nq-surface); --bs-btn-border-color: var(--nq-line-strong); --bs-btn-color: var(--nq-ink); --bs-btn-hover-bg: var(--nq-surface-2); --bs-btn-hover-border-color: var(--nq-line-strong); --bs-btn-hover-color: var(--nq-ink); --bs-btn-active-bg: var(--nq-surface-3); --bs-btn-active-border-color: var(--nq-line-strong); --bs-btn-active-color: var(--nq-ink); --bs-btn-disabled-bg: var(--nq-surface-2); --bs-btn-disabled-border-color: var(--nq-line); --bs-btn-disabled-color: var(--nq-ink-3); } .btn-danger { --bs-btn-bg: var(--nq-danger); --bs-btn-border-color: var(--nq-danger); --bs-btn-color: #fff; --bs-btn-hover-bg: #8A1B1B; --bs-btn-hover-border-color: #8A1B1B; --bs-btn-hover-color: #fff; } .btn-outline-danger { --bs-btn-color: var(--nq-danger); --bs-btn-border-color: var(--nq-danger-line); --bs-btn-bg: var(--nq-surface); --bs-btn-hover-bg: var(--nq-danger-bg); --bs-btn-hover-border-color: var(--nq-danger); --bs-btn-hover-color: var(--nq-danger); } .btn-success { --bs-btn-bg: var(--nq-success); --bs-btn-border-color: var(--nq-success); --bs-btn-color: #fff; } /* Quiet icon button used across toolbars and table rows. */ .nq-icon-btn { width: 30px; height: 30px; display: inline-flex; align-items: center; justify-content: center; border: 1px solid transparent; border-radius: var(--nq-r); background: transparent; color: var(--nq-ink-3); font-size: .8125rem; cursor: pointer; transition: background-color .12s ease, color .12s ease, border-color .12s ease; } .nq-icon-btn:hover { background: var(--nq-surface-2); color: var(--nq-ink); border-color: var(--nq-line); } .nq-icon-btn:focus-visible { box-shadow: var(--nq-focus); outline: none; } .nq-icon-btn.is-danger:hover { background: var(--nq-danger-bg); color: var(--nq-danger); border-color: var(--nq-danger-line); } /* ---- 08 Forms ------------------------------------------------------------ */ .form-label { font-size: .75rem; font-weight: 500; color: var(--nq-ink-2); margin-bottom: .3125rem; } /* Use background-COLOR, never the `background` shorthand, on anything that carries a background-image. The shorthand resets background-repeat to `repeat` and background-position to 0 0, which tiles the select caret across the whole control. */ .form-control, .form-select { background-color: var(--nq-surface); border: 1px solid var(--nq-line-strong); border-radius: var(--nq-r); color: var(--nq-ink); font-size: .8125rem; padding: .4375rem .625rem; transition: border-color .12s ease, box-shadow .12s ease; } .form-control::placeholder { color: var(--nq-ink-3); } .form-control:focus, .form-select:focus { background-color: var(--nq-surface); border-color: var(--nq-accent); box-shadow: var(--nq-focus); color: var(--nq-ink); } .form-control:disabled, .form-select:disabled, .form-control[readonly] { background-color: var(--nq-surface-2); color: var(--nq-ink-3); } .form-control-sm, .form-select-sm { font-size: .75rem; padding: .3125rem .5rem; } .form-select { background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3e%3cpath fill='none' stroke='%236B7684' stroke-linecap='round' stroke-linejoin='round' stroke-width='1.5' d='m2 5 6 6 6-6'/%3e%3c/svg%3e"); background-repeat: no-repeat; background-position: right .625rem center; background-size: 12px 9px; /* Room for the caret so long option text never runs under it. */ padding-inline-end: 2rem; -webkit-appearance: none; -moz-appearance: none; appearance: none; } .form-select-sm { background-position: right .5rem center; padding-inline-end: 1.75rem; } html[dir="rtl"] .form-select { background-position: left .625rem center; } html[dir="rtl"] .form-select-sm { background-position: left .5rem center; } /* Multi-selects and sized selects render as a list box, so the caret is wrong. */ .form-select[multiple], .form-select[size]:not([size="1"]) { background-image: none; padding-inline-end: .625rem; } :root[data-theme="dark"] .form-select { background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3e%3cpath fill='none' stroke='%237C8797' stroke-linecap='round' stroke-linejoin='round' stroke-width='1.5' d='m2 5 6 6 6-6'/%3e%3c/svg%3e"); } :root[data-theme="dark"] .form-select[multiple], :root[data-theme="dark"] .form-select[size]:not([size="1"]) { background-image: none; } .form-check-input { border-color: var(--nq-line-strong); background-color: var(--nq-surface); } .form-check-input:checked { background-color: var(--nq-accent); border-color: var(--nq-accent); } .form-check-input:focus { box-shadow: var(--nq-focus); border-color: var(--nq-accent); } .form-check-label { font-size: .8125rem; color: var(--nq-ink-2); } .input-group-text { background: var(--nq-surface-2); border-color: var(--nq-line-strong); color: var(--nq-ink-3); font-size: .8125rem; } .invalid-feedback, .text-danger { color: var(--nq-danger) !important; font-size: .75rem; } .is-invalid, .input-validation-error { border-color: var(--nq-danger) !important; } .is-invalid:focus, .input-validation-error:focus { box-shadow: 0 0 0 3px rgba(163, 32, 32, .16) !important; } .field-validation-error { color: var(--nq-danger); font-size: .75rem; display: inline-block; margin-top: .25rem; } /* ---- 09 Cards & panels --------------------------------------------------- */ .card { background: var(--nq-surface); border: 1px solid var(--nq-line); border-radius: var(--nq-r-lg); box-shadow: none; } .card-header { background: transparent; border-bottom: 1px solid var(--nq-line); padding: .875rem 1.125rem; font-weight: 600; font-size: .875rem; color: var(--nq-ink); } .card-body { padding: 1.125rem; } .card-footer { background: transparent; border-top: 1px solid var(--nq-line); padding: .875rem 1.125rem; } /* A card that holds a grid: the table draws its own edges. */ .nq-panel { background: var(--nq-surface); border: 1px solid var(--nq-line); border-radius: var(--nq-r-lg); overflow: hidden; } .nq-panel-head { display: flex; align-items: center; justify-content: space-between; gap: 1rem; flex-wrap: wrap; padding: .875rem 1rem; border-bottom: 1px solid var(--nq-line); } .nq-panel-title { font-size: .875rem; font-weight: 600; margin: 0; } /* ---- 10 Tables & DataTables ---------------------------------------------- */ .table { --bs-table-bg: transparent; --bs-table-color: var(--nq-ink); --bs-table-border-color: var(--nq-line); --bs-table-striped-bg: var(--nq-surface-2); --bs-table-hover-bg: var(--nq-surface-2); --bs-table-hover-color: var(--nq-ink); margin: 0; font-size: .8125rem; } .table > thead > tr > th { background: var(--nq-surface-2); border-bottom: 1px solid var(--nq-line); color: var(--nq-ink-2); font-size: .6875rem; font-weight: 600; letter-spacing: .05em; text-transform: uppercase; padding: .625rem .75rem; white-space: nowrap; vertical-align: middle; } .table > tbody > tr > td { padding: .625rem .75rem; border-bottom: 1px solid var(--nq-line); vertical-align: middle; color: var(--nq-ink); } .table > tbody > tr:last-child > td { border-bottom: 0; } .table > tbody > tr:hover > td { background: var(--nq-surface-2); } .nq-table-scroll { overflow-x: auto; } /* Sticky header for long grids. */ .nq-table-scroll { max-height: none; } .nq-sticky-head .table > thead > tr > th { position: sticky; top: 0; z-index: 2; } /* Density toggle */ .nq-density-compact .table > tbody > tr > td, .nq-density-compact .table > thead > tr > th { padding-block: .375rem; } /* --- DataTables chrome --- */ .dataTables_wrapper { position: relative; } /* The stock length/filter/info/paginate blocks are replaced by our own toolbar and footer, so hide the defaults rather than fighting their layout. */ .dataTables_wrapper .dataTables_length, .dataTables_wrapper .dataTables_filter { display: none !important; } .dataTables_wrapper .dataTables_info { font-size: .75rem; color: var(--nq-ink-3); padding: 0; } .dataTables_wrapper .dataTables_paginate { padding: 0; } .dataTables_wrapper .dataTables_paginate .paginate_button.page-item .page-link { background: var(--nq-surface); border: 1px solid var(--nq-line); color: var(--nq-ink-2); font-size: .75rem; padding: .3125rem .5625rem; margin-inline-start: -1px; } .dataTables_wrapper .dataTables_paginate .page-item.active .page-link { background: var(--nq-accent); border-color: var(--nq-accent); color: #fff; z-index: 2; } :root[data-theme="dark"] .dataTables_wrapper .dataTables_paginate .page-item.active .page-link { color: #0C1015; } .dataTables_wrapper .dataTables_paginate .page-item.disabled .page-link { color: var(--nq-ink-3); background: var(--nq-surface-2); opacity: .6; } .dataTables_wrapper .dataTables_processing { background: var(--nq-surface); border: 1px solid var(--nq-line); border-radius: var(--nq-r); box-shadow: var(--nq-shadow-2); color: var(--nq-ink-2); font-size: .75rem; padding: .5rem .875rem; width: auto; inset-inline-start: 50%; translate: -50% 0; margin: 0; } /* Sort affordance: a quiet caret that only darkens when the column is active. */ table.dataTable > thead > tr > th.sorting, table.dataTable > thead > tr > th.sorting_asc, table.dataTable > thead > tr > th.sorting_desc { position: relative; cursor: pointer; padding-inline-end: 1.375rem; } table.dataTable > thead > tr > th.sorting::before, table.dataTable > thead > tr > th.sorting::after, table.dataTable > thead > tr > th.sorting_asc::before, table.dataTable > thead > tr > th.sorting_asc::after, table.dataTable > thead > tr > th.sorting_desc::before, table.dataTable > thead > tr > th.sorting_desc::after { position: absolute; inset-inline-end: .5rem; font-family: 'Font Awesome 6 Free'; font-weight: 900; font-size: .5625rem; opacity: .3; line-height: 1; } table.dataTable > thead > tr > th.sorting::before, table.dataTable > thead > tr > th.sorting_asc::before, table.dataTable > thead > tr > th.sorting_desc::before { content: '\f0d8'; top: calc(50% - 7px); } table.dataTable > thead > tr > th.sorting::after, table.dataTable > thead > tr > th.sorting_asc::after, table.dataTable > thead > tr > th.sorting_desc::after { content: '\f0d7'; top: calc(50% - 1px); } table.dataTable > thead > tr > th.sorting_asc::before, table.dataTable > thead > tr > th.sorting_desc::after { opacity: 1; color: var(--nq-accent); } /* ---- 11 Status pills & badges -------------------------------------------- */ .nq-pill, .badge { display: inline-flex; align-items: center; gap: .3125rem; padding: .1875rem .5rem; border-radius: 999px; border: 1px solid transparent; font-size: .6875rem; font-weight: 600; line-height: 1.4; letter-spacing: .01em; white-space: nowrap; } .nq-pill::before { content: ''; width: 5px; height: 5px; border-radius: 50%; background: currentColor; flex: none; } .nq-pill-success, .badge.bg-success, .badge.text-bg-success { background: var(--nq-success-bg) !important; color: var(--nq-success) !important; border-color: var(--nq-success-line); } .nq-pill-warning, .badge.bg-warning, .badge.text-bg-warning { background: var(--nq-warning-bg) !important; color: var(--nq-warning) !important; border-color: var(--nq-warning-line); } .nq-pill-danger, .badge.bg-danger, .badge.text-bg-danger { background: var(--nq-danger-bg) !important; color: var(--nq-danger) !important; border-color: var(--nq-danger-line); } .nq-pill-neutral, .badge.bg-secondary, .badge.text-bg-secondary, .badge.bg-light, .badge.text-bg-light { background: var(--nq-neutral-bg) !important; color: var(--nq-neutral) !important; border-color: var(--nq-neutral-line); } .nq-pill-info, .badge.bg-primary, .badge.text-bg-primary, .badge.bg-info, .badge.text-bg-info { background: var(--nq-accent-subtle) !important; color: var(--nq-accent-ink) !important; border-color: var(--nq-accent-line); } /* ---- 12 Data toolbar / filters / chips ----------------------------------- */ .nq-toolbar { display: flex; align-items: center; gap: .5rem; flex-wrap: wrap; padding: .75rem 1rem; border-bottom: 1px solid var(--nq-line); background: var(--nq-surface); } .nq-search { position: relative; flex: 1 1 260px; min-width: 200px; max-width: 380px; } .nq-search > i.nq-search-icon { position: absolute; inset-inline-start: .625rem; top: 50%; translate: 0 -50%; font-size: .75rem; color: var(--nq-ink-3); pointer-events: none; } .nq-search input { width: 100%; padding: .4375rem .625rem .4375rem 2rem; background: var(--nq-surface); border: 1px solid var(--nq-line-strong); border-radius: var(--nq-r); color: var(--nq-ink); font-size: .8125rem; } html[dir="rtl"] .nq-search input { padding: .4375rem 2rem .4375rem .625rem; } .nq-search input:focus { outline: none; border-color: var(--nq-accent); box-shadow: var(--nq-focus); } .nq-search input::placeholder { color: var(--nq-ink-3); } .nq-search .nq-search-clear { position: absolute; inset-inline-end: .3125rem; top: 50%; translate: 0 -50%; width: 22px; height: 22px; display: none; align-items: center; justify-content: center; border: 0; background: transparent; color: var(--nq-ink-3); border-radius: 50%; cursor: pointer; font-size: .6875rem; } .nq-search .nq-search-clear:hover { background: var(--nq-surface-3); color: var(--nq-ink); } .nq-search.has-value .nq-search-clear { display: inline-flex; } .nq-toolbar-spacer { flex: 1 1 auto; } .nq-toolbar-group { display: flex; align-items: center; gap: .375rem; } /* Shared caret for the plain