/* ============================================================================ bi-v2.css - WafiLife BI progressive modernization ---------------------------------------------------------------------------- Loaded AFTER AdminLTE.min.css in index.html. Every rule is scoped under the `bi-v2` class on , so removing that one word from index.html reverts the entire application to the original AdminLTE look with no other change. 1 Tokens 2 Typography 3 Widgets (phase 1 - restyles what every existing screen already uses) 4 Content surface 5 Shell (phase 2 - the light sidebar + thin topbar) 6 v2 pages (phase 3 - the `biv2-*` chrome the rebuilt templates use) 7 Legacy screens (maps the untouched AdminLTE templates onto the v2 idiom) 8 Scrollbars Sections 1-4 touch no markup at all. Section 5 goes with the rewritten navmenu/siteheader templates; delete it and the old dark shell comes back. AdminLTE declares its label/background utilities with `!important`, so the overrides that replace them have to carry `!important` too. That is not decoration - without it the saturated originals win. ========================================================================= */ /* -- 1. Tokens ----------------------------------------------------------- */ .bi-v2 { --bi-bg: #f6f5f3; /* content surface (was #ecf0f5) */ --bi-surface: #ffffff; --bi-surface-alt: #faf9f7; /* table heads, footers, inputs */ --bi-border: #e6e3de; /* card + table rules (was #d2d6de)*/ --bi-border-input: #e0dcd5; --bi-row-rule: #f6f4f0; /* between table rows */ --bi-accent: #b8650f; /* was #f29434 / #3c8dbc */ --bi-accent-hover: #8a4a08; --bi-accent-tint: #f4ece2; --bi-accent-ink: #8f4a12; --bi-text: #1f1d1a; /* was #333333 */ --bi-text-soft: #4a463f; --bi-muted: #8a8478; /* was #777777 */ --bi-faint: #a39c90; --bi-fainter: #b8b0a2; --bi-ok-tint: #e8f2ea; --bi-ok-ink: #2f6b46; --bi-info-tint: #e6eef5; --bi-info-ink: #2c5d86; --bi-warn-tint: #f7ecea; --bi-warn-ink: #8f2c20; --bi-neutral-tint: #f0eee9; --bi-neutral-ink: #6f6a63; --bi-alt-tint: #efeaf3; --bi-alt-ink: #5a4573; --bi-mono: ui-monospace, Menlo, Consolas, monospace; /* Type scale - the single place to retune the whole UI's text size. Raised ~12% over the original v2 values (body text was 12.5px) after users reported the interface read too small. Old value in each comment. */ --bi-fs-head: 10.5px; /* mono uppercase table heads (was 9.5) */ --bi-fs-micro: 11px; /* counters, tiny badges (was 10) */ --bi-fs-mini: 12px; /* dense chrome (was 10.5)*/ --bi-fs-xs: 12.5px; /* labels, status pills (was 11) */ --bi-fs-sm: 13px; /* meta / secondary text (was 11.5)*/ --bi-fs-md: 13.5px; /* small buttons, input-sm (was 12) */ --bi-fs-base: 14px; /* body, table cells, buttons (was 12.5)*/ --bi-fs-lg: 14.5px; /* form controls (was 13) */ --bi-fs-xl: 15px; /* emphasis (was 13.5)*/ --bi-fs-2xl: 15.5px; /* section leads (was 14) */ } /* -- 2. Typography ------------------------------------------------------- */ /* Noto Sans Bengali sits IN the stack rather than on a `.bn` class, so every Bengali product / publisher / author name in the catalogue picks it up with no template change anywhere. */ .bi-v2, .bi-v2 .btn, .bi-v2 input, .bi-v2 select, .bi-v2 textarea, .bi-v2 .form-control { font-family: 'Source Sans 3', 'Source Sans Pro', 'Noto Sans Bengali', 'Helvetica Neue', Helvetica, Arial, sans-serif; } .bi-v2 { color: var(--bi-text); font-size: var(--bi-fs-base); -webkit-font-smoothing: antialiased; } .bi-v2 .text-muted, .bi-v2 small, .bi-v2 .small { color: var(--bi-muted); } .bi-v2 a { color: var(--bi-accent); } .bi-v2 a:hover, .bi-v2 a:focus { color: var(--bi-accent-hover); } .bi-v2 h1, .bi-v2 h2, .bi-v2 h3, .bi-v2 h4, .bi-v2 h5 { letter-spacing: -.015em; font-weight: 600; } /* -- 3. Widgets ---------------------------------------------------------- */ /* .box - the container every screen builds out of */ .bi-v2 .box { border-radius: 9px; border: 1px solid var(--bi-border); border-top: 2px solid var(--bi-border); box-shadow: none; background: var(--bi-surface); } .bi-v2 .box.box-primary { border-top-color: var(--bi-accent); } .bi-v2 .box.box-info { border-top-color: var(--bi-info-ink); } .bi-v2 .box.box-success { border-top-color: var(--bi-ok-ink); } .bi-v2 .box.box-warning { border-top-color: var(--bi-accent-ink); } .bi-v2 .box.box-danger { border-top-color: var(--bi-warn-ink); } .bi-v2 .box-header { padding: 13px 16px; color: var(--bi-text); } .bi-v2 .box-header.with-border { border-bottom: 1px solid var(--bi-row-rule); } .bi-v2 .box-title { font-size: 17px; font-weight: 600; letter-spacing: -.01em; } .bi-v2 .box-body { padding: 14px 16px; } .bi-v2 .box-footer { background: var(--bi-surface-alt); border-top: 1px solid var(--bi-border); border-radius: 0 0 8px 8px; padding: 10px 16px; color: var(--bi-muted); } .bi-v2 .box-footer.text-center a { font-weight: 600; text-transform: none; } /* .info-box - the dashboard stat card. The 90px saturated icon block becomes a small tinted square; the card itself takes the v2 accent rail. */ .bi-v2 .info-box { background: var(--bi-surface); border: 1px solid var(--bi-border); border-left: 3px solid var(--bi-accent); border-radius: 9px; box-shadow: none; min-height: 78px; padding: 12px 14px; display: flex; align-items: center; gap: 12px; } .bi-v2 .info-box-icon { float: none; flex: none; width: 40px; height: 40px; line-height: 40px; font-size: 19px; border-radius: 9px; background: var(--bi-neutral-tint) !important; color: var(--bi-neutral-ink) !important; } .bi-v2 .info-box-icon.bg-green, .bi-v2 .info-box-icon.bg-green-active { background: var(--bi-ok-tint) !important; color: var(--bi-ok-ink) !important; } .bi-v2 .info-box-icon.bg-aqua, .bi-v2 .info-box-icon.bg-blue, .bi-v2 .info-box-icon.bg-light-blue { background: var(--bi-info-tint) !important; color: var(--bi-info-ink) !important; } .bi-v2 .info-box-icon.bg-yellow, .bi-v2 .info-box-icon.bg-orange { background: var(--bi-accent-tint) !important; color: var(--bi-accent-ink) !important; } .bi-v2 .info-box-icon.bg-red, .bi-v2 .info-box-icon.bg-maroon { background: var(--bi-warn-tint) !important; color: var(--bi-warn-ink) !important; } .bi-v2 .info-box-content { margin-left: 0; padding: 0; flex: 1; min-width: 0; } .bi-v2 .info-box-text { font-size: var(--bi-fs-sm); font-weight: 600; text-transform: none; color: var(--bi-muted); letter-spacing: 0; } .bi-v2 .info-box-number { font-size: 21px; font-weight: 600; letter-spacing: -.02em; font-variant-numeric: tabular-nums; color: var(--bi-text); } .bi-v2 .info-box-number + .info-box-number { font-size: var(--bi-fs-base); font-weight: 400; color: var(--bi-muted); } /* Tables - quiet horizontal rules, mono uppercase heads */ .bi-v2 .table > thead > tr > th { background: var(--bi-surface-alt); border-bottom: 1px solid var(--bi-border); border-top: none; font-family: var(--bi-mono); font-size: var(--bi-fs-head); font-weight: 600; letter-spacing: .08em; text-transform: uppercase; color: var(--bi-faint); padding: 8px 12px; vertical-align: middle; } .bi-v2 .table > tbody > tr > td { border-top: 1px solid var(--bi-row-rule); padding: 9px 12px; vertical-align: top; } .bi-v2 .table > tbody > tr:hover > td { background: var(--bi-surface-alt); } .bi-v2 .table-striped > tbody > tr:nth-of-type(odd) { background: #fdfcfa; } /* .table-bordered draws a full cell grid; horizontal rules alone read better in the dense order/product grids. */ .bi-v2 .table-bordered, .bi-v2 .table-bordered > thead > tr > th, .bi-v2 .table-bordered > tbody > tr > td, .bi-v2 .table-bordered > tbody > tr > th { border: none; } .bi-v2 .table-bordered > thead > tr > th { border-bottom: 1px solid var(--bi-border); } .bi-v2 .table-bordered > tbody > tr > td, .bi-v2 .table-bordered > tbody > tr > th { border-top: 1px solid var(--bi-row-rule); } .bi-v2 td.number, .bi-v2 th.number { font-variant-numeric: tabular-nums; } /* Buttons */ .bi-v2 .btn { border-radius: 8px; font-size: var(--bi-fs-base); font-weight: 600; box-shadow: none; padding: 7px 13px; border: 1px solid transparent; } .bi-v2 .btn-sm, .bi-v2 .btn-xs { border-radius: 7px; font-size: var(--bi-fs-md); padding: 5px 10px; } .bi-v2 .btn:focus, .bi-v2 .btn:active:focus { outline: none; box-shadow: 0 0 0 3px var(--bi-accent-tint); } .bi-v2 .btn-default { background: var(--bi-surface); border-color: var(--bi-border-input); color: var(--bi-text-soft); } .bi-v2 .btn-default:hover, .bi-v2 .btn-default:focus { background: var(--bi-surface-alt); border-color: var(--bi-faint); color: var(--bi-text); } .bi-v2 .btn-primary, .bi-v2 .btn-primary:focus { background: var(--bi-accent); border-color: var(--bi-accent); color: #fff; } .bi-v2 .btn-primary:hover, .bi-v2 .btn-primary:active { background: var(--bi-accent-hover); border-color: var(--bi-accent-hover); } .bi-v2 .btn-success { background: var(--bi-ok-ink); border-color: var(--bi-ok-ink); color: #fff; } .bi-v2 .btn-danger { background: var(--bi-warn-ink); border-color: var(--bi-warn-ink); color: #fff; } .bi-v2 .btn-warning { background: var(--bi-accent-ink); border-color: var(--bi-accent-ink); color: #fff; } .bi-v2 .btn-info { background: var(--bi-info-ink); border-color: var(--bi-info-ink); color: #fff; } .bi-v2 .btn-link { color: var(--bi-accent); font-weight: 600; } /* The dashboard/report date search button is hard-coded blue in styles.css. */ .bi-v2 .date .btn, .bi-v2 .date-search, .bi-v2 .date-search:hover { background-color: var(--bi-accent); border-color: var(--bi-accent); color: #fff; } /* Form controls */ .bi-v2 .form-control, .bi-v2 .input-group-addon { border-radius: 7px; border-color: var(--bi-border-input); background: var(--bi-surface-alt); color: var(--bi-text); box-shadow: none; font-size: var(--bi-fs-lg); } .bi-v2 .form-control:focus { border-color: var(--bi-accent); box-shadow: 0 0 0 3px var(--bi-accent-tint); background: var(--bi-surface); } .bi-v2 .form-control::placeholder { color: var(--bi-fainter); } .bi-v2 .input-group-addon { background: var(--bi-neutral-tint); } .bi-v2 label { font-weight: 600; font-size: var(--bi-fs-base); color: var(--bi-text-soft); } /* ng-select is used across the filter bars; keep it in the same family. */ .bi-v2 .ng-select .ng-select-container { border-radius: 7px; border-color: var(--bi-border-input); background: var(--bi-surface-alt); min-height: 34px; } .bi-v2 .ng-select.ng-select-focused > .ng-select-container { border-color: var(--bi-accent); box-shadow: 0 0 0 3px var(--bi-accent-tint); } /* ── bi-datepicker ───────────────────────────────────────────────────────── The shared picker (used on ~78 templates) still draws itself as a of three separately bordered cells - icon / field / clear - which is a pre-bi-v2 shape: 36px tall against 32px inputs, square corners against 7px ones, and #d2d6de against the warm border token. Its field is readonly, so it also picked up the greyed-out [readonly] fill and read as disabled next to live controls, and the focus ring landed on that invisible inner input rather than on the box you can see. Restyled from here rather than from the component so every page moves at once and no template has to change: the host element takes the one border, the cells give theirs up. */ .bi-v2 bi-datepicker { display: block; border: 1px solid var(--bi-border-input); border-radius: 7px; background: var(--bi-surface-alt); } .bi-v2 bi-datepicker:focus-within { border-color: var(--bi-accent); box-shadow: 0 0 0 3px var(--bi-accent-tint); } /* the cells carry their borders and padding inline, hence the !important */ /* Every rule below excludes `.md-drppicker` descendants, because the calendar is rendered INSIDE the field row's middle cell: a plain `bi-datepicker td` / `bi-datepicker .btn` reaches the day cells and the Apply/Cancel buttons too, and the field's own chrome (no border, no padding, quiet ghost button) is the wrong look for either. The exclusion is written against the calendar rather than as a `> table > tr > td` child chain because the field's table is built by Angular and so has no - a chain would have to guess. */ .bi-v2 bi-datepicker table:not(.md-drppicker table) { width: 100%; margin: 0; } .bi-v2 bi-datepicker td:not(.md-drppicker td) { border: none !important; padding: 0 !important; } .bi-v2 bi-datepicker td:not(.md-drppicker td):first-child { padding: 0 0 0 9px !important; } .bi-v2 bi-datepicker td:not(.md-drppicker td):first-child .fa { font-size: var(--bi-fs-md); color: var(--bi-faint); } /* readonly is how the control is meant to work - the calendar is the only way to edit it - so it must not take the disabled-looking [readonly] fill. */ .bi-v2 bi-datepicker .form-control, .bi-v2 bi-datepicker .form-control[readonly] { height: 30px; padding: 3px 9px; border: none; border-radius: 0; background: none; box-shadow: none; color: var(--bi-text); cursor: pointer; } /* the clear (×) button in the field's last cell - NOT the calendar's Apply and Cancel, which sit further down the same cell tree */ .bi-v2 bi-datepicker .btn:not(.md-drppicker .btn) { padding: 0 9px 0 3px; height: 28px; line-height: 1; font-size: var(--bi-fs-md); border: none; background: none; box-shadow: none; color: var(--bi-faint); } .bi-v2 bi-datepicker .btn:not(.md-drppicker .btn):hover, .bi-v2 bi-datepicker .btn:not(.md-drppicker .btn):focus { background: none; color: var(--bi-text); } /* The calendar itself is ViewEncapsulation.None Material - indigo #3f51b5 for the selected day, the range and the buttons, Roboto, uppercase 2px-radius buttons under a heavy shadow. Its rules are plain (no /deep/ attributes), so prefixing with .bi-v2 is enough to win on specificity. */ .bi-v2 .md-drppicker { font-family: inherit; font-size: var(--bi-fs-lg); border: 1px solid var(--bi-border); border-radius: 9px; box-shadow: 0 12px 40px rgba(0,0,0,.16); color: var(--bi-text); /* The library pulls the panel up by 10px, so it lands ON the field it drops from and hides its bottom edge. Sit it clear instead. */ margin-top: 4px; } /* A picker set to drop upwards gets an explicit `top`, so the same gap has to be taken off that edge rather than added to it. */ .bi-v2 .md-drppicker[class*="drops-up"] { margin-top: -4px; } .bi-v2 .md-drppicker .calendar-table { background: none; border: none; } .bi-v2 .md-drppicker th { color: var(--bi-muted); font-weight: 600; } .bi-v2 .md-drppicker td.available:hover, .bi-v2 .md-drppicker th.available:hover { background-color: var(--bi-neutral-tint); } .bi-v2 .md-drppicker td.in-range { background-color: var(--bi-accent-tint); color: var(--bi-accent-ink); } .bi-v2 .md-drppicker td.active, .bi-v2 .md-drppicker td.active:hover { background-color: var(--bi-accent); color: #fff; } .bi-v2 .md-drppicker td.off, .bi-v2 .md-drppicker td.off.in-range, .bi-v2 .md-drppicker td.off.start-date, .bi-v2 .md-drppicker td.off.end-date { background: none; color: var(--bi-fainter); } .bi-v2 .md-drppicker td.week, .bi-v2 .md-drppicker th.week { color: var(--bi-fainter); } .bi-v2 .md-drppicker .show-ranges .drp-calendar.left { border-left-color: var(--bi-border); } /* the named ranges down the side read like the .biv2-pill row, not like a solid indigo block */ .bi-v2 .md-drppicker .ranges ul li button { font-size: var(--bi-fs-base); border-radius: 6px; } .bi-v2 .md-drppicker .ranges ul li:hover { background-color: transparent; } .bi-v2 .md-drppicker .ranges ul li button:hover { background-color: var(--bi-neutral-tint); } .bi-v2 .md-drppicker .ranges ul li button.active { background-color: var(--bi-accent-tint); color: var(--bi-accent-ink); font-weight: 600; } .bi-v2 .md-drppicker .dropdowns select { border-color: var(--bi-border-input); border-radius: 6px; } .bi-v2 .md-drppicker .label-input { border-color: var(--bi-border-input); border-radius: 7px; color: var(--bi-text); } .bi-v2 .md-drppicker .label-input.active { border-color: var(--bi-accent); border-radius: 7px; } .bi-v2 .md-drppicker .btn { border-radius: 7px; padding: 0 13px; line-height: 30px; font-size: var(--bi-fs-base); font-weight: 600; text-transform: none; box-shadow: none; background-color: var(--bi-accent); color: #fff; } .bi-v2 .md-drppicker .btn:hover, .bi-v2 .md-drppicker .btn:focus { background-color: var(--bi-accent-hover); } /* Cancel / Clear are the quiet pair beside Apply */ .bi-v2 .md-drppicker .btn.btn-default { background-color: var(--bi-surface); border: 1px solid var(--bi-border-input); color: var(--bi-text-soft); } .bi-v2 .md-drppicker .btn.btn-default:hover, .bi-v2 .md-drppicker .btn.btn-default:focus { background-color: var(--bi-surface-alt); border-color: var(--bi-faint); color: var(--bi-text); } .bi-v2 .md-drppicker .btn.btn-default svg { fill: currentColor; } /* The calendar is `position:absolute` and the library positions it with a left offset measured from the field's offsetParent - so it lands under the field only when the field's own wrapper is the nearest positioned ancestor. The pre-bi-v2 pages got that for free: the picker sat in an AdminLTE `.box`, which is `position:relative`. The v2 filter bar and panel head are not, so the calendar fell through to the Bootstrap column and opened at the content's left edge, on top of the bar it belongs to. Anchoring the wrapper puts it back under the field. Only wrappers that actually hold a picker are anchored: making the calendar's containing block a descendant of a scrolling or clipping box would let that box cut the calendar off, which is why the panel that holds one also has to stop clipping (same reason as `.is-unclipped`). */ .bi-v2 .biv2-filter-date, .bi-v2 .biv2-panel-date { position: relative; } /* The form-field wrapper is generic, so only the ones holding a picker are anchored - and, as elsewhere in this file, the `:has()` selectors keep their own rules so a browser without support drops only those. */ .bi-v2 .biv2-field:has(> bi-datepicker) { position: relative; } .bi-v2 .biv2-panel:has(bi-datepicker) { overflow: visible; } /* Labels - pills. AdminLTE sets both the background and the colour with !important, on .label-* AND on the .bg-* utilities the order/product grids use, so every replacement below has to match that weight. */ .bi-v2 .label { border-radius: 20px; padding: 3px 9px; font-size: var(--bi-fs-xs); font-weight: 600; letter-spacing: 0; line-height: 1.5; display: inline-block; } /* The order grid tags rows with the whole AdminLTE colour set, `-active` variants included. Every one of them needs a home here or the saturated original survives next to the new pills. */ .bi-v2 .label-default, .bi-v2 .label.bg-gray, .bi-v2 .label.bg-gray-active, .bi-v2 .label.bg-black, .bi-v2 .label.bg-black-active, .bi-v2 .label.bg-navy, .bi-v2 .label.bg-navy-active { background-color: var(--bi-neutral-tint) !important; color: var(--bi-neutral-ink) !important; } .bi-v2 .label-success, .bi-v2 .label.bg-green, .bi-v2 .label.bg-green-active, .bi-v2 .label.bg-olive, .bi-v2 .label.bg-olive-active, .bi-v2 .label.bg-teal, .bi-v2 .label.bg-teal-active, .bi-v2 .label.bg-lime, .bi-v2 .label.bg-lime-active { background-color: var(--bi-ok-tint) !important; color: var(--bi-ok-ink) !important; } .bi-v2 .label-info, .bi-v2 .label-primary, .bi-v2 .label.bg-aqua, .bi-v2 .label.bg-aqua-active, .bi-v2 .label.bg-blue, .bi-v2 .label.bg-blue-active, .bi-v2 .label.bg-light-blue, .bi-v2 .label.bg-light-blue-active { background-color: var(--bi-info-tint) !important; color: var(--bi-info-ink) !important; } .bi-v2 .label-warning, .bi-v2 .label.bg-yellow, .bi-v2 .label.bg-yellow-active, .bi-v2 .label.bg-orange, .bi-v2 .label.bg-orange-active { background-color: var(--bi-accent-tint) !important; color: var(--bi-accent-ink) !important; } .bi-v2 .label-danger, .bi-v2 .label.bg-red, .bi-v2 .label.bg-red-active, .bi-v2 .label.bg-maroon, .bi-v2 .label.bg-maroon-active { background-color: var(--bi-warn-tint) !important; color: var(--bi-warn-ink) !important; } /* Purple/fuchsia carry their own meaning in the order grid (tracking requests), so they keep a distinct hue rather than collapsing into the red bucket. */ .bi-v2 .label.bg-purple, .bi-v2 .label.bg-purple-active, .bi-v2 .label.bg-fuchsia, .bi-v2 .label.bg-fuchsia-active { background-color: var(--bi-alt-tint) !important; color: var(--bi-alt-ink) !important; } /* Order/product grids also colour labels with inline style="background:#00c0ef"; nothing can be done about those without touching markup, so they stay. */ .bi-v2 .badge { background: var(--bi-neutral-tint); color: var(--bi-neutral-ink); font-weight: 600; border-radius: 20px; } /* Tabs, alerts, modals, pagination */ .bi-v2 .nav-tabs { border-bottom: 1px solid var(--bi-border); } .bi-v2 .nav-tabs > li > a { border: none; color: var(--bi-muted); font-weight: 600; font-size: var(--bi-fs-lg); border-radius: 0; } .bi-v2 .nav-tabs > li.active > a, .bi-v2 .nav-tabs > li.active > a:hover, .bi-v2 .nav-tabs > li.active > a:focus { border: none; border-bottom: 2px solid var(--bi-accent); color: var(--bi-accent); background: transparent; } .bi-v2 .nav-tabs-custom { border-radius: 9px; box-shadow: none; border: 1px solid var(--bi-border); } .bi-v2 .alert { border-radius: 9px; border: 1px solid transparent; } .bi-v2 .alert-warning { background-color: var(--bi-accent-tint) !important; color: var(--bi-accent-ink) !important; border-color: #ead9c4; } .bi-v2 .alert-danger, .bi-v2 .alert-error { background-color: var(--bi-warn-tint) !important; color: var(--bi-warn-ink) !important; border-color: #eed4cf; } .bi-v2 .alert-success { background-color: var(--bi-ok-tint) !important; color: var(--bi-ok-ink) !important; border-color: #d3e6d8; } .bi-v2 .alert-info { background-color: var(--bi-info-tint) !important; color: var(--bi-info-ink) !important; border-color: #d3e0ec; } .bi-v2 .modal-content { border-radius: 11px; border: 1px solid var(--bi-border); box-shadow: 0 12px 40px rgba(0,0,0,.16); } .bi-v2 .modal-header { border-bottom: 1px solid var(--bi-row-rule); padding: 14px 18px; } .bi-v2 .modal-title { font-size: 18px; font-weight: 600; } .bi-v2 .modal-footer { border-top: 1px solid var(--bi-row-rule); background: var(--bi-surface-alt); border-radius: 0 0 10px 10px; } .bi-v2 .pagination > li > a, .bi-v2 .pagination > li > span { border-color: var(--bi-border); color: var(--bi-text-soft); } .bi-v2 .pagination > .active > a, .bi-v2 .pagination > .active > a:hover, .bi-v2 .pagination > .active > span { background: var(--bi-accent); border-color: var(--bi-accent); color: #fff; } .bi-v2 .progress-bar { background-color: var(--bi-accent); } /* Shared helpers already in styles.css */ .bi-v2 .filter-drawer { border-left: 1px solid var(--bi-border); } .bi-v2 .filter-drawer-footer { background: var(--bi-surface-alt); border-top: 1px solid var(--bi-border); } /* -- 4. Content surface -------------------------------------------------- */ .bi-v2 .content-wrapper { background: var(--bi-bg); } .bi-v2 .content-header { padding: 15px 15px 0; } /* -- 5. Shell ------------------------------------------------------------ */ /* Replaces AdminLTE's 230px dark sidebar + 50px orange navbar with the design's 236px full-height light sidebar and a 52px white topbar. Goes with the rewritten navmenu.component / siteheader.component templates. */ .bi-v2 .main-sidebar { position: fixed; top: 0; left: 0; bottom: 0; width: 236px; padding-top: 0; min-height: 100%; background-color: var(--bi-surface); border-right: 1px solid var(--bi-border); z-index: 1035; display: flex; flex-direction: column; } .bi-v2 .content-wrapper, .bi-v2 .main-footer { margin-left: 236px; } .bi-v2 .main-header { z-index: 1030; } .bi-v2 .main-header .logo { display: none; } .bi-v2 .main-header .navbar { margin-left: 236px; min-height: 52px; height: 52px; background-color: var(--bi-surface) !important; border-bottom: 1px solid var(--bi-border); display: flex; align-items: center; padding: 0 8px 0 4px; } .bi-v2 .main-footer { background: var(--bi-surface); border-top: 1px solid var(--bi-border); color: var(--bi-muted); font-size: var(--bi-fs-base); padding: 12px 20px; } /* Topbar bits */ .bi-v2 .biv2-toggle { width: 34px; height: 34px; border-radius: 8px; display: inline-flex !important; align-items: center; justify-content: center; color: var(--bi-faint) !important; background: transparent !important; font-size: var(--bi-fs-2xl); padding: 0 !important; } .bi-v2 .biv2-toggle:hover { background: var(--bi-neutral-tint) !important; color: var(--bi-text) !important; } .bi-v2 .biv2-crumb { font-size: var(--bi-fs-xl); font-weight: 600; color: var(--bi-text); padding-left: 6px; letter-spacing: -.01em; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } /* Sidebar: brand */ .bi-v2 .biv2-brand { flex: none; height: 52px; display: flex; align-items: center; gap: 9px; padding: 0 14px; border-bottom: 1px solid var(--bi-border); } .bi-v2 .biv2-mark { flex: none; width: 26px; height: 26px; border-radius: 7px; background: var(--bi-accent); color: #fff; display: grid; place-items: center; font-weight: 700; font-size: var(--bi-fs-lg); } .bi-v2 .biv2-brand-text { line-height: 1.1; min-width: 0; } .bi-v2 .biv2-brand-text b { display: block; font-weight: 600; font-size: var(--bi-fs-xl); letter-spacing: -.01em; white-space: nowrap; } .bi-v2 .biv2-brand-text span { display: block; font-size: var(--bi-fs-mini); color: var(--bi-faint); } /* Sidebar: search */ .bi-v2 .biv2-search { flex: none; padding: 10px 10px 4px; position: relative; } .bi-v2 .biv2-search > .fa { position: absolute; left: 19px; top: 19px; font-size: var(--bi-fs-xs); color: var(--bi-faint); pointer-events: none; } .bi-v2 .biv2-search input { width: 100%; height: 30px; border: 1px solid var(--bi-border-input); border-radius: 7px; background: var(--bi-surface-alt); padding: 0 42px 0 27px; font-size: var(--bi-fs-base); color: var(--bi-text); outline: none; } .bi-v2 .biv2-search input:focus { border-color: var(--bi-accent); background: var(--bi-surface); } .bi-v2 .biv2-search input::placeholder { color: var(--bi-faint); } .bi-v2 .biv2-kbd { position: absolute; right: 17px; top: 17px; font: 11px var(--bi-mono); color: var(--bi-fainter); border: 1px solid var(--bi-border); border-radius: 4px; padding: 1px 4px; pointer-events: none; } /* Sidebar: scroll body */ .bi-v2 .biv2-scroll { flex: 1; min-height: 0; overflow-y: auto; overflow-x: hidden; padding: 6px 8px 10px; } .bi-v2 .biv2-sec { font: 600 10.5px var(--bi-mono); letter-spacing: .1em; text-transform: uppercase; color: var(--bi-fainter); padding: 13px 9px 4px; } .bi-v2 .biv2-scroll > div:first-child > .biv2-sec { padding-top: 6px; } .bi-v2 .biv2-item { display: flex; align-items: center; gap: 9px; padding: 6px 9px; border-radius: 7px; font-size: var(--bi-fs-lg); color: var(--bi-text-soft); cursor: pointer; text-decoration: none; } .bi-v2 .biv2-item:hover { background: var(--bi-surface-alt); color: var(--bi-text); text-decoration: none; } .bi-v2 .biv2-item > .fa:first-child { flex: none; width: 14px; font-size: var(--bi-fs-md); color: var(--bi-faint); text-align: center; } .bi-v2 .biv2-item > span { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .bi-v2 .biv2-item.is-active, .bi-v2 .biv2-item.is-active:hover { background: var(--bi-accent-tint); color: var(--bi-accent-ink); font-weight: 600; } .bi-v2 .biv2-item.is-active > .fa:first-child { color: var(--bi-accent); } .bi-v2 .biv2-caret { flex: none; font-size: var(--bi-fs-micro); color: var(--bi-fainter); transition: transform .15s ease; } .bi-v2 .biv2-item.is-open .biv2-caret { transform: rotate(90deg); } /* The badge and the search-result group tag are s too, so they have to out-specify `.biv2-item > span { flex: 1 }` above or they share the label's width and truncate it. */ .bi-v2 .biv2-item > span.biv2-badge { flex: none; font: 12px var(--bi-mono); background: var(--bi-neutral-tint); color: var(--bi-neutral-ink); padding: 1px 6px; border-radius: 8px; } .bi-v2 .biv2-item.is-active > span.biv2-badge { background: var(--bi-accent); color: #fff; } .bi-v2 .biv2-pin { flex: none; width: 16px; font-size: var(--bi-fs-xs); color: var(--bi-fainter); opacity: 0; text-align: center; } .bi-v2 .biv2-item:hover .biv2-pin { opacity: 1; } .bi-v2 .biv2-pin.is-pinned { opacity: 1; color: var(--bi-accent); } .bi-v2 .biv2-pin:hover { color: var(--bi-accent); } .bi-v2 .biv2-children { padding-left: 10px; margin-left: 13px; border-left: 1px solid var(--bi-border); } .bi-v2 .biv2-children .biv2-item { font-size: var(--bi-fs-base); padding: 5px 9px; } .bi-v2 .biv2-item > span.biv2-hit-group { flex: none; font: 11px var(--bi-mono); color: var(--bi-fainter); text-transform: uppercase; letter-spacing: .06em; } .bi-v2 .biv2-empty { padding: 14px 10px; font-size: var(--bi-fs-base); color: var(--bi-faint); } /* Topbar: account block, hard right. It sat in the sidebar footer until it was moved up here; `margin-left: auto` inside the navbar's flex row is what puts it against the right edge. */ .bi-v2 .biv2-user { flex: none; position: relative; margin-left: auto; padding-left: 10px; display: flex; align-items: center; gap: 9px; } .bi-v2 .biv2-avatar { flex: none; width: 26px; height: 26px; border-radius: 50%; background: var(--bi-neutral-tint); color: var(--bi-neutral-ink); display: grid; place-items: center; font-weight: 600; font-size: var(--bi-fs-mini); } .bi-v2 .biv2-user-text { flex: none; min-width: 0; max-width: 160px; line-height: 1.15; } .bi-v2 .biv2-user-text b { display: block; font-weight: 600; font-size: var(--bi-fs-base); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .bi-v2 .biv2-user-text span { display: block; font-size: var(--bi-fs-mini); color: var(--bi-faint); } .bi-v2 .biv2-gear { flex: none; width: 26px; height: 26px; border: none; background: transparent; border-radius: 7px; color: var(--bi-faint); font-size: var(--bi-fs-md); cursor: pointer; } .bi-v2 .biv2-gear:hover { background: var(--bi-neutral-tint); color: var(--bi-text); } /* Drops DOWN from the topbar, and wide enough for "Change Password" on one line - in the sidebar it opened upwards into the footer's own width. */ .bi-v2 .biv2-usermenu { position: absolute; top: calc(100% + 4px); right: 0; min-width: 168px; background: var(--bi-surface); border: 1px solid var(--bi-border); border-radius: 9px; box-shadow: 0 8px 24px rgba(0,0,0,.12); padding: 5px; z-index: 5; } .bi-v2 .biv2-usermenu a { display: block; padding: 7px 10px; border-radius: 6px; font-size: var(--bi-fs-base); color: var(--bi-text-soft); cursor: pointer; } .bi-v2 .biv2-usermenu a:hover { background: var(--bi-surface-alt); color: var(--bi-text); text-decoration: none; } /* On a phone the topbar has room for the page title OR the name, not both; the avatar and the gear still identify the account. */ @media (max-width: 640px) { .bi-v2 .biv2-user-text { display: none; } } /* Collapsed rail. AdminLTE forces `width:50px` AND `margin-left:50px` with !important on the collapsed state, so both sides of the override need the same weight - otherwise the rail is 60px while the content still starts at 50px and the two overlap. */ .bi-v2.sidebar-collapse .main-sidebar { width: 60px !important; } .bi-v2.sidebar-collapse .content-wrapper, .bi-v2.sidebar-collapse .main-footer, .bi-v2.sidebar-collapse .main-header .navbar { margin-left: 60px !important; } .bi-v2.sidebar-collapse .biv2-search, .bi-v2.sidebar-collapse .biv2-sec, .bi-v2.sidebar-collapse .biv2-brand-text, .bi-v2.sidebar-collapse .biv2-children, .bi-v2.sidebar-collapse .biv2-badge, .bi-v2.sidebar-collapse .biv2-pin, .bi-v2.sidebar-collapse .biv2-caret, .bi-v2.sidebar-collapse .biv2-item > span { display: none; } .bi-v2.sidebar-collapse .biv2-brand { justify-content: center; padding: 0; } .bi-v2.sidebar-collapse .biv2-item { justify-content: center; padding: 8px 0; } /* Off-canvas below AdminLTE's own breakpoint */ @media (max-width: 767px) { .bi-v2 .main-sidebar { transform: translate(-236px, 0); } .bi-v2.sidebar-open .main-sidebar { transform: translate(0, 0); } .bi-v2 .content-wrapper, .bi-v2 .main-footer, .bi-v2 .main-header .navbar { margin-left: 0; } .bi-v2.sidebar-collapse .main-sidebar { width: 236px !important; } .bi-v2.sidebar-collapse .content-wrapper, .bi-v2.sidebar-collapse .main-footer, .bi-v2.sidebar-collapse .main-header .navbar { margin-left: 0 !important; } } @media print { .bi-v2 .main-sidebar { display: none !important; } .bi-v2 .content-wrapper, .bi-v2 .main-footer { margin-left: 0 !important; } } /* -- 6. v2 pages --------------------------------------------------------- */ /* Chrome for the screens converted in phase 3 (dashboard, order, product). It lives here rather than in the components' own .css files because the production build caps any single component stylesheet at 6kb. */ /* ── page header: title, count, right-hand actions ───────────────────────── */ .bi-v2 .biv2-pagehead { display: flex; align-items: flex-end; gap: 14px; flex-wrap: wrap; margin-bottom: 12px; } .bi-v2 .biv2-pagehead h2 { margin: 0; font-size: 24px; font-weight: 600; letter-spacing: -.015em; line-height: 1.2; } .bi-v2 .biv2-pagehead .biv2-sub { font-size: var(--bi-fs-base); color: var(--bi-muted); margin-top: 2px; } .bi-v2 .biv2-pagehead-actions { margin-left: auto; display: flex; gap: 8px; align-items: center; flex-wrap: wrap; } /* ── filter bar ──────────────────────────────────────────────────────────── */ .bi-v2 .biv2-filterbar { background: var(--bi-surface); border: 1px solid var(--bi-border); border-radius: 9px; padding: 10px 12px; display: flex; align-items: center; gap: 9px; flex-wrap: wrap; margin-bottom: 10px; } .bi-v2 .biv2-filterbar .form-control, .bi-v2 .biv2-filterbar select { height: 32px; padding: 4px 9px; font-size: var(--bi-fs-base); } .bi-v2 .biv2-filter-right { margin-left: auto; display: flex; align-items: center; gap: 8px; flex-wrap: wrap; } .bi-v2 .biv2-filter-date { width: 260px; } .bi-v2 .biv2-filter-date .form-control { width: 100%; } /* search field with a leading glyph */ .bi-v2 .biv2-search-field { position: relative; flex: 0 1 280px; min-width: 190px; } .bi-v2 .biv2-search-field > .fa { position: absolute; left: 10px; top: 9px; font-size: var(--bi-fs-sm); color: var(--bi-faint); pointer-events: none; } .bi-v2 .biv2-search-field input { width: 100%; padding-left: 29px !important; } /* ── filter chips ────────────────────────────────────────────────────────── */ .bi-v2 .biv2-chips { display: flex; align-items: center; gap: 7px; flex-wrap: wrap; } .bi-v2 .biv2-chip { display: inline-flex; align-items: center; gap: 6px; height: 28px; padding: 0 11px; border-radius: 20px; border: 1px solid var(--bi-border-input); background: var(--bi-surface); color: var(--bi-text-soft); font-size: var(--bi-fs-md); font-weight: 600; cursor: pointer; white-space: nowrap; } .bi-v2 .biv2-chip:hover { background: var(--bi-surface-alt); } .bi-v2 .biv2-chip.is-on { background: var(--bi-accent); border-color: var(--bi-accent); color: #fff; } /* ── converted list grids (order, product) ───────────────────────────────── */ .bi-v2 .biv2-grid { background: var(--bi-surface); border: 1px solid var(--bi-border); border-radius: 9px; overflow: hidden; margin-bottom: 18px; } /* A grid's table is either a direct child of .biv2-grid or wrapped in the Bootstrap .table-responsive scroller (the orders grid does the latter). Both forms are spelled out here so the layout below reaches either; a bare descendant selector would also catch the line-item table nested inside a row and restyle that too. */ .bi-v2 .biv2-grid > .table, .bi-v2 .biv2-grid > .table-responsive > .table { margin-bottom: 0; } /* Order rows are six lines tall and carry their own tinted note blocks and chips; a hover wash over all of that reads as a selection, so this grid opts out of it. */ .bi-v2 .biv2-grid.biv2-grid-flat > .table > tbody > tr:hover > td, .bi-v2 .biv2-grid.biv2-grid-flat .table > tbody > tr:hover > td { background: transparent; } .bi-v2 .biv2-grid > .table > tbody > tr > td, .bi-v2 .biv2-grid > .table-responsive > .table > tbody > tr > td { padding: 11px 14px; font-size: var(--bi-fs-base); line-height: 1.55; } .bi-v2 .biv2-grid > .table > thead > tr > th, .bi-v2 .biv2-grid > .table-responsive > .table > thead > tr > th { padding: 8px 14px; } /* Unscoped on purpose: this is a utility, and it is used in modal tables and report panels that have no `.biv2-grid` ancestor. It was written as `.biv2-grid .biv2-num` when only the two big grids used it, which silently left every number in a `biv2-modal-table` ranged left. */ .bi-v2 .biv2-num { text-align: right; font-variant-numeric: tabular-nums; } .bi-v2 .biv2-grid .biv2-strong { font-size: var(--bi-fs-2xl); font-weight: 600; font-variant-numeric: tabular-nums; } .bi-v2 .biv2-grid .biv2-meta { font-size: var(--bi-fs-sm); color: var(--bi-muted); } .bi-v2 .biv2-grid .biv2-meta a { color: var(--bi-accent); } /* "Track order" was an 11.5px link wedged between two other meta lines - a target only a few pixels tall. Give it its own padded row so it is comfortable to hit. */ .bi-v2 .biv2-grid .biv2-tracklink { display: inline-block; margin: 3px 0; padding: 3px 8px; font-size: var(--bi-fs-sm); font-weight: 600; line-height: 1.4; border: 1px solid var(--bi-border); border-radius: 4px; background: var(--bi-surface-alt); } .bi-v2 .biv2-grid .biv2-tracklink:hover, .bi-v2 .biv2-grid .biv2-tracklink:focus { background: var(--bi-accent-tint); border-color: #e7d6c1; text-decoration: none; } .bi-v2 .biv2-grid .biv2-title { font-weight: 600; font-size: var(--bi-fs-xl); } .bi-v2 .biv2-grid .biv2-tags { display: flex; gap: 5px; flex-wrap: wrap; margin-top: 6px; } .bi-v2 .biv2-grid .biv2-tags .label { margin-right: 0; } .bi-v2 .biv2-grid .biv2-stack { display: flex; flex-direction: column; align-items: flex-start; gap: 5px; } .bi-v2 .biv2-grid .biv2-mono { font-family: var(--bi-mono); font-size: var(--bi-fs-xs); } /* status pill with the design's leading dot */ .bi-v2 .biv2-grid .biv2-statuspill { display: inline-flex; align-items: center; gap: 5px; padding: 3px 9px; border-radius: 20px; } .bi-v2 .biv2-grid .biv2-statuspill:before { content: ""; width: 5px; height: 5px; border-radius: 50%; background: currentColor; } /* expanded line items: the design insets the panel and floats a white card on a tinted strip, so it reads as belonging to the row above it */ .bi-v2 .biv2-grid .biv2-lineitems-cell { background: #fbfaf8; padding: 13px 14px 14px 44px !important; } .bi-v2 .biv2-grid .biv2-lineitems-card { background: var(--bi-surface); border: 1px solid var(--bi-border); border-radius: 8px; overflow: hidden; } .bi-v2 .biv2-grid .biv2-lineitems-card > .table { margin-bottom: 0; } /* Action bar at the head of the panel, so it is reachable no matter how many lines the order has. */ .bi-v2 .biv2-grid .biv2-lineitems-head { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; padding: 9px 14px; background: var(--bi-surface-alt); border-bottom: 1px solid var(--bi-border); } .bi-v2 .biv2-grid .biv2-lineitems-head .btn { display: inline-flex; align-items: center; gap: 5px; font-size: var(--bi-fs-sm); font-weight: 500; } .bi-v2 .biv2-grid .biv2-lineitems-head .btn-default .fa { color: var(--bi-faint); } /* Products grid: a requested MRP / purchase-percentage change sits under the figure it would replace - the tinted new value, then the verdict pair. They used to be two bare link glyphs a few pixels tall; the design gives each its own tinted tile. */ .bi-v2 .biv2-grid .biv2-newval { display: inline-block; padding: 3px 6px; border-radius: 6px; background: var(--bi-accent-tint); color: var(--bi-accent-ink); font-size: var(--bi-fs-xs); font-weight: 600; line-height: 1.5; font-variant-numeric: tabular-nums; } .bi-v2 .biv2-grid .biv2-verdict { display: flex; gap: 5px; justify-content: flex-end; margin-top: 5px; } .bi-v2 .biv2-grid .biv2-verdict > a { width: 22px; height: 22px; display: inline-flex; align-items: center; justify-content: center; border-radius: 6px; font-size: var(--bi-fs-micro); cursor: pointer; } .bi-v2 .biv2-grid .biv2-verdict > a.is-yes { background: var(--bi-ok-tint); color: var(--bi-ok-ink); } .bi-v2 .biv2-grid .biv2-verdict > a.is-no { background: var(--bi-warn-tint); color: var(--bi-warn-ink); } .bi-v2 .biv2-grid .biv2-verdict > a:hover { text-decoration: none; filter: brightness(.96); } /* Stock reads at a glance: nothing on hand is a warning, a thin cushion a caution. */ .bi-v2 .biv2-grid .biv2-stock-out, .bi-v2 .biv2-grid .biv2-stock-out a { color: var(--bi-warn-ink); } .bi-v2 .biv2-grid .biv2-stock-low, .bi-v2 .biv2-grid .biv2-stock-low a { color: var(--bi-accent-ink); } .bi-v2 .biv2-gridfoot { padding: 10px 14px; background: var(--bi-surface-alt); border-top: 1px solid var(--bi-border); font-size: var(--bi-fs-md); color: var(--bi-muted); display: flex; align-items: center; gap: 10px; flex-wrap: wrap; } .bi-v2 .biv2-gridfoot .biv2-filter-right { margin-left: auto; } .bi-v2 .biv2-empty-row { padding: 34px 14px; text-align: center; color: var(--bi-faint); font-size: var(--bi-fs-lg); } /* bulk action bar shown once rows are selected */ .bi-v2 .biv2-bulkbar { background: var(--bi-accent-tint); border: 1px solid #e8d9c4; border-radius: 9px; padding: 8px 12px; margin-bottom: 10px; display: flex; align-items: center; gap: 8px; flex-wrap: wrap; } .bi-v2 .biv2-bulkbar .biv2-bulkcount { font-weight: 600; font-size: var(--bi-fs-base); color: var(--bi-accent-ink); margin-right: 4px; } /* Inside a grid card the bar is the card's own top band, not a floating box. */ .bi-v2 .biv2-grid > .biv2-bulkbar { margin-bottom: 0; border: 0; border-bottom: 1px solid #e7d6c1; border-radius: 9px 9px 0 0; } /* The grid's table sits inside a .table-responsive wrapper, so a direct-child selector never reaches it and ticking a row showed no tint at all. */ .bi-v2 .biv2-grid > .table > tbody.biv2-rowsel > tr > td, .bi-v2 .biv2-grid > .table-responsive > .table > tbody.biv2-rowsel > tr > td { background: #fdf7f0; } .bi-v2 .biv2-danger-btn { color: var(--bi-warn-ink); border-color: #eddcd8; } .bi-v2 .biv2-accent-btn { color: var(--bi-accent-ink); border-color: #e0cdb2; background: #fdf7f0; } .bi-v2 .biv2-accent-btn:hover, .bi-v2 .biv2-accent-btn:focus { color: var(--bi-accent-ink); background: #fbefe0; border-color: #d6bd9d; } .bi-v2 .biv2-rowactions .biv2-accent-btn .fa { color: var(--bi-accent); } .bi-v2 .biv2-danger-btn:hover { color: var(--bi-warn-ink); background: var(--bi-warn-tint); border-color: #e3c6c0; } /* ── filter-bar popovers (courier multi-select, grouped "Filter by") ──────── */ .bi-v2 .biv2-menu-anchor { position: relative; } .bi-v2 .biv2-toolbar .biv2-menu-btn { font-weight: 400; white-space: nowrap; } .bi-v2 .biv2-toolbar .biv2-menu-btn.is-on { background: #fdf7f0; border-color: #e7d6c1; font-weight: 600; } .bi-v2 .biv2-menu-btn .fa { font-size: var(--bi-fs-xs); color: var(--bi-faint); } .bi-v2 .biv2-menu { position: absolute; left: 0; top: 34px; z-index: 1035; background: var(--bi-surface); border: 1px solid var(--bi-border-input); border-radius: 9px; box-shadow: 0 12px 30px rgba(31, 29, 26, .16); padding: 5px; text-align: left; } .bi-v2 .biv2-menu-scroll { max-height: 400px; overflow-y: auto; } .bi-v2 .biv2-menu-group { font: 600 10px var(--bi-mono); letter-spacing: .1em; text-transform: uppercase; color: var(--bi-fainter); padding: 9px 9px 4px; } .bi-v2 .biv2-menu-item { display: flex; align-items: center; gap: 9px; padding: 6px 9px; border-radius: 6px; font-size: var(--bi-fs-base); color: var(--bi-text); cursor: pointer; } .bi-v2 .biv2-menu-item:hover { background: var(--bi-surface-alt); } .bi-v2 .biv2-menu-item.is-on { background: var(--bi-accent-tint); color: var(--bi-accent-ink); font-weight: 600; } .bi-v2 .biv2-menu-text { flex: 1; min-width: 0; } .bi-v2 .biv2-menu-mark { width: 11px; flex: none; font-size: 10px; color: var(--bi-accent); } /* ── row notes ───────────────────────────────────────────────────────────── */ .bi-v2 .biv2-note { border-left: 2px solid #c9c2b6; background: #f8f7f4; border-radius: 0 6px 6px 0; padding: 6px 9px; margin-top: 7px; } .bi-v2 .biv2-note.is-admin { border-left-color: var(--bi-accent); background: #fdf7f0; } .bi-v2 .biv2-note-head { font: 600 10px var(--bi-mono); letter-spacing: .08em; text-transform: uppercase; color: var(--bi-neutral-ink); margin-bottom: 2px; } .bi-v2 .biv2-note.is-admin .biv2-note-head { color: var(--bi-accent-ink); } .bi-v2 .biv2-note-body { font-size: var(--bi-fs-md); line-height: 1.6; color: var(--bi-text-soft); } /* ── per-row action strip ────────────────────────────────────────────────── */ /* The action buttons sit in their own inside the order's tbody, so Bootstrap's cell border drew a rule straight across the middle of every order. The rule between orders (the first row of each tbody) is the one that matters; this one is noise. */ .bi-v2 .biv2-grid .table > tbody > tr > td.biv2-rowactions-cell { border-top: 0 none; padding-top: 0; } .bi-v2 .biv2-rowactions { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; padding-left: 30px; } .bi-v2 .biv2-rowactions .btn { display: inline-flex; align-items: center; gap: 5px; } .bi-v2 .biv2-rowactions .btn .fa { color: var(--bi-faint); } .bi-v2 .biv2-rowactions .btn-primary .fa, .bi-v2 .biv2-rowactions .biv2-danger-btn .fa { color: inherit; } .bi-v2 .biv2-leadtime { margin-left: auto; font-size: var(--bi-fs-md); color: var(--bi-text-soft); } /* ── empty state ─────────────────────────────────────────────────────────── */ .bi-v2 .biv2-empty { padding: 44px 20px; text-align: center; } .bi-v2 .biv2-empty > .fa { font-size: 25px; color: #d5cfc4; margin-bottom: 9px; } .bi-v2 .biv2-empty-title { font-size: var(--bi-fs-2xl); font-weight: 600; margin-bottom: 4px; } .bi-v2 .biv2-empty-hint { font-size: var(--bi-fs-base); color: var(--bi-muted); margin-bottom: 14px; } /* ── modal shell ───────────────────────────────────────────────────────────── The design's modal: a tinted icon tile and a subtitle in the header, an optional callout / stat strip / two-column field grid in the body, and a footer that states what will happen next to the confirm button. Every piece is optional - a modal uses only the parts it needs. */ .bi-v2 .modal-header.biv2-modal-head { display: flex; align-items: flex-start; gap: 12px; padding: 15px 20px; border-bottom: 1px solid var(--bi-border); } .bi-v2 .biv2-modal-head .close { float: none; order: 3; margin: 2px 0 0; opacity: .5; font-weight: 400; } .bi-v2 .biv2-modal-head .close:hover { opacity: 1; } .bi-v2 .biv2-modal-icon { width: 28px; height: 28px; flex: none; border-radius: 8px; display: inline-flex; align-items: center; justify-content: center; font-size: var(--bi-fs-md); background: var(--bi-accent-tint); color: var(--bi-accent); } .bi-v2 .biv2-modal-icon.is-ok { background: var(--bi-ok-tint); color: var(--bi-ok-ink); } .bi-v2 .biv2-modal-icon.is-danger { background: var(--bi-warn-tint); color: var(--bi-warn-ink); } .bi-v2 .biv2-modal-icon.is-info { background: var(--bi-info-tint); color: var(--bi-info-ink); } .bi-v2 .biv2-modal-icon.is-muted { background: var(--bi-neutral-tint); color: var(--bi-neutral-ink); } .bi-v2 .biv2-modal-heading { flex: 1; min-width: 0; } .bi-v2 .biv2-modal-heading .modal-title { display: flex; align-items: center; gap: 9px; flex-wrap: wrap; } .bi-v2 .biv2-modal-sub { font-size: var(--bi-fs-md); color: var(--bi-muted); margin-top: 2px; } .bi-v2 .biv2-modal-tag { font: 12.5px var(--bi-mono); background: var(--bi-neutral-tint); color: var(--bi-neutral-ink); padding: 2px 7px; border-radius: 8px; } .bi-v2 .modal-body.biv2-modal-body { padding: 16px 20px; } .bi-v2 .biv2-modal-body > * + * { margin-top: 15px; } /* callout: the sentence explaining what the action will do */ .bi-v2 .biv2-callout { display: flex; gap: 10px; border-left: 2px solid var(--bi-accent); background: #fdf7f0; border-radius: 0 7px 7px 0; padding: 9px 12px; font-size: var(--bi-fs-base); line-height: 1.6; color: var(--bi-text-soft); } .bi-v2 .biv2-callout > .fa { color: var(--bi-accent); padding-top: 3px; font-size: var(--bi-fs-xs); } .bi-v2 .biv2-callout.is-danger { border-left-color: var(--bi-warn-ink); background: #fdf6f5; } .bi-v2 .biv2-callout.is-danger > .fa { color: var(--bi-warn-ink); } .bi-v2 .biv2-callout.is-info { border-left-color: var(--bi-info-ink); background: #f4f8fb; } .bi-v2 .biv2-callout.is-info > .fa { color: var(--bi-info-ink); } /* stat strip: the numbers a confirmation is about */ .bi-v2 .biv2-statstrip { /* A grid rather than a flex row: accounting builds strips of six and seven readings, which have to wrap onto a second line instead of squeezing every value unreadable - and a wrapped flex row has no rule between its rows. The 1px gap over the container background draws the dividers in both directions, so no cell needs its own border. */ display: grid; grid-template-columns: repeat(auto-fit, minmax(145px, 1fr)); gap: 1px; background: var(--bi-row-rule); border: 1px solid var(--bi-border); border-radius: 8px; overflow: hidden; } .bi-v2 .biv2-statstrip > div { min-width: 0; padding: 11px 14px; background: var(--bi-surface); } .bi-v2 .biv2-stat-label { font: 600 10px var(--bi-mono); letter-spacing: .1em; text-transform: uppercase; color: var(--bi-faint); margin-bottom: 5px; } .bi-v2 .biv2-stat-value { font-size: 21px; font-weight: 600; letter-spacing: -.02em; font-variant-numeric: tabular-nums; } /* two-column field grid */ .bi-v2 .biv2-fieldgrid { display: grid; grid-template-columns: 1fr 1fr; gap: 13px 14px; } .bi-v2 .biv2-fieldgrid > .biv2-field { display: flex; flex-direction: column; gap: 5px; min-width: 0; } .bi-v2 .biv2-fieldgrid > .biv2-field.is-wide { grid-column: span 2; } .bi-v2 .biv2-field > label { font-size: var(--bi-fs-md); font-weight: 600; color: var(--bi-text-soft); margin: 0; display: flex; align-items: center; gap: 5px; } .bi-v2 .biv2-field > label .biv2-req { color: var(--bi-accent); } .bi-v2 .biv2-field > label .biv2-hint { font-size: var(--bi-fs-xs); font-weight: 400; color: var(--bi-faint); } .bi-v2 .biv2-field .form-control { width: 100%; } .bi-v2 .biv2-field .biv2-check { display: flex; align-items: center; gap: 8px; font-size: var(--bi-fs-base); color: var(--bi-text-soft); font-weight: 400; margin: 0; } /* read-only blocks */ .bi-v2 .biv2-modal-text { border: 1px solid var(--bi-border); border-radius: 8px; background: var(--bi-surface-alt); padding: 12px 14px; font: 13.5px/1.7 var(--bi-mono); color: var(--bi-text-soft); white-space: pre-wrap; } .bi-v2 .biv2-modal-table { border: 1px solid var(--bi-border); border-radius: 8px; overflow: hidden; } .bi-v2 .biv2-modal-table > .table, .bi-v2 .biv2-modal-table > .table-responsive > .table { margin-bottom: 0; } .bi-v2 .biv2-modal-table .table > tbody > tr > td { font-size: var(--bi-fs-base); } .bi-v2 .biv2-footnote { font-size: var(--bi-fs-sm); color: var(--bi-faint); } /* footer: state on the left, actions on the right */ .bi-v2 .modal-footer.biv2-modal-foot { display: flex; align-items: center; gap: 10px; padding: 12px 20px; text-align: left; } .bi-v2 .biv2-modal-foot .biv2-modal-state { font-size: var(--bi-fs-md); color: var(--bi-muted); display: flex; align-items: center; gap: 6px; } .bi-v2 .biv2-modal-foot .biv2-modal-state:before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: #d5cfc4; } .bi-v2 .biv2-modal-foot .biv2-modal-state.is-ready:before { background: var(--bi-accent); } .bi-v2 .biv2-modal-foot .biv2-modal-actions { margin-left: auto; display: flex; gap: 8px; } .bi-v2 .biv2-modal-foot .btn { margin: 0; } /* ── edit-line-items modal ─────────────────────────────────────────────────── A tabbed modal: the header keeps the design's icon/title/subtitle shape and the tabs get their own row underneath, so a long buyer name never collides with them. */ /* `.modal-header.biv2-modal-head` above is a three-class selector, so this variant has to carry `.modal-header` too. Written as `.bi-v2 .biv2-modal-head-tabs` it lost on specificity no matter where it sat in the file, and the header kept both its own bottom rule and its full 15px bottom padding - the tab strip then read as a separate band between two horizontal rules instead of hanging off the header. */ .bi-v2 .modal-header.biv2-modal-head-tabs { border-bottom: 0; padding-bottom: 11px; } .bi-v2 .biv2-modal-tabsrow { padding: 0 20px; border-bottom: 1px solid var(--bi-border); } .bi-v2 .biv2-modal-tabsrow .nav-tabs { border-bottom: 0; } .bi-v2 .biv2-modal-tabsrow .nav-tabs > li > a { padding: 0 1px 9px; margin-right: 20px; background: transparent; cursor: pointer; } .bi-v2 .biv2-modal-tabsrow .nav-tabs > li.active > a { border-bottom-width: 2px; } .bi-v2 .biv2-modal-head .modal-title .label { font-size: var(--bi-fs-mini); vertical-align: middle; } /* the five order-level selects above the items */ .bi-v2 .biv2-metagrid { display: grid; grid-template-columns: repeat(5, 1fr); gap: 11px; margin-bottom: 14px; } .bi-v2 .biv2-metagrid .biv2-field > label { font-size: var(--bi-fs-sm); } .bi-v2 .biv2-lock { font-size: 10px; color: var(--bi-fainter); } .bi-v2 .biv2-metagrid select[disabled] { background: var(--bi-surface-alt); color: var(--bi-muted); } @media (max-width: 1100px) { .bi-v2 .biv2-metagrid { grid-template-columns: repeat(3, 1fr); } } /* the items table and its totals block */ .bi-v2 .biv2-litable > tbody > tr:hover > td { background: transparent; } .bi-v2 .biv2-litable > tbody > tr > td { vertical-align: middle; word-wrap: break-word; } .bi-v2 .biv2-litable > tfoot { background: var(--bi-surface-alt); } .bi-v2 .biv2-litable > tfoot > tr > td { border-top: 0; padding: 5px 8px; font-size: var(--bi-fs-base); } .bi-v2 .biv2-litable > tfoot .form-control { height: 30px; padding: 3px 9px; font-size: var(--bi-fs-base); } .bi-v2 .biv2-litable > tfoot > tr:first-child > td { padding-top: 10px; } .bi-v2 .biv2-litable > tfoot > tr:last-child > td { padding-bottom: 10px; color: var(--bi-accent-ink); } /* Bootstrap 3 gives .modal-header a clearfix; on a flex header those pseudo-elements become stray flex items and the tabs row below it gets pulled into the title block. Kill them, and drop the .nav-tabs negative margin that pulls the tab strip up over the header's bottom rule. */ .bi-v2 .modal-header.biv2-modal-head:before, .bi-v2 .modal-header.biv2-modal-head:after { display: none; } .bi-v2 .biv2-modal-tabsrow .nav-tabs > li { margin-bottom: 0; } .bi-v2 .biv2-modal-tabsrow { padding-top: 4px; } /* Only the selected tab is bold in the design; bi-v2 bolds them all by default. */ .bi-v2 .biv2-modal-tabsrow .nav-tabs > li > a { font-weight: 400; } .bi-v2 .biv2-modal-tabsrow .nav-tabs > li.active > a { font-weight: 600; } /* Type scale, measured off the design export rather than guessed. */ .bi-v2 .biv2-grid .biv2-buyer { font-size: var(--bi-fs-xl); font-weight: 500; margin-top: 3px; } .bi-v2 .biv2-grid .biv2-addr { font-size: var(--bi-fs-base); line-height: 1.55; color: var(--bi-text-soft); } .bi-v2 .biv2-grid .biv2-mono { font-size: var(--bi-fs-mini); } .bi-v2 .biv2-grid .biv2-title { font-size: var(--bi-fs-lg); } .bi-v2 .biv2-rowactions .btn-xs { font-size: var(--bi-fs-sm); font-weight: 500; } /* The line-item table sits outside .biv2-grid, so it was inheriting Bootstrap's 14px instead of the design's 13/13.5. */ .bi-v2 .biv2-litable > tbody > tr > td { font-size: var(--bi-fs-lg); } .bi-v2 .biv2-litable .biv2-li-name { font-size: var(--bi-fs-xl); font-weight: 500; } .bi-v2 .biv2-litable .biv2-li-pub { font-size: var(--bi-fs-sm); color: var(--bi-muted); margin-top: 1px; } .bi-v2 .biv2-metagrid select { font-size: var(--bi-fs-base); } /* Delete / overflow on a line item are 26px icon buttons, not full-height controls. */ .bi-v2 .biv2-litable .biv2-li-icon { width: 26px; height: 26px; padding: 0; display: inline-flex; align-items: center; justify-content: center; border-radius: 6px; font-size: var(--bi-fs-xs); color: var(--bi-muted); } .bi-v2 .biv2-litable a.biv2-li-icon { color: var(--bi-warn-ink); } .bi-v2 .biv2-litable a.biv2-li-icon:hover { background: var(--bi-warn-tint); } .bi-v2 .biv2-litable a.biv2-li-icon.disabled { color: var(--bi-fainter); background: none; } /* ── pill groups inside the filter drawer ────────────────────────────────── */ .bi-v2 .biv2-pills { display: flex; gap: 6px; flex-wrap: wrap; } .bi-v2 .biv2-pills .biv2-chip { height: 27px; padding: 0 10px; font-size: var(--bi-fs-md); } /* ── filter drawer ─────────────────────────────────────────────────────────── Base geometry lives here rather than in a per-page