` the layouts render, so a screen that genuinely wants edge-to-edge (embedded iframes, the packing workspace) just leaves the class off. */ .content-wrapper > .content.ui-page, .content-wrapper > section.content.ui-page { --page-gutter: 20px; /* Small top gutter on purpose: a page tab strip is chrome that belongs to the topbar above it, not a floating element — 20px of air above AND below it read as a dead band between two bars. Chrome that is *attached* to the topbar (page tabs, a full-bleed listing card) cancels it via --page-pad-t. */ --page-pad-t: 8px; padding: var(--page-pad-t) var(--page-gutter) var(--page-gutter); margin: 0; } @media (min-width: 1400px) { .content-wrapper > .content.ui-page, .content-wrapper > section.content.ui-page { --page-gutter: var(--ui-page-pad); } } /* A GRID card runs edge to edge. A data grid is the page on a listing screen — boxing it inside the page gutter wasted ~50px of horizontal room on exactly the screens that need it most, and the side border cut the table short of the viewport. The vertical gutter stays, so the card still breathes. */ /* The selector is DESCENDANT, not child: the listing screens overwhelmingly wrap the grid card in a div with no layout role of its own — a responsive switch (`d-none d-md-block`), a React SPA mount point, a tab pane. In the ShipNow admin alone that is 63 of 76 grid screens, and with a `>` selector every one of them kept the page gutter while the rest ran edge to edge — the "this grid isn't full width" report. What must NOT bleed is a card that sits in a real layout (a column, a split, another card, a dialog), so those are excluded by ancestor instead of by nesting depth. `ui-no-bleed` az EXPLICIT kimaradás: az ősök osztálynevét nem lehet mind felsorolni (az SPA-k saját kártya-osztályt használnak — `.oe-card`, `.pe-card`, `.po-card`), ezért a beágyazott grid-kártya maga mondja meg, hogy ő nem lapszintű listázó. Enélkül a rendelés/beszállítás/termék SPA-k fülében ülő grid-kártya 2×`--page-gutter`-rel szélesebb lett a panelnál, és a panel `overflow: hidden`-je MINDKÉT oldalon levágta (a fejléc-cím első betűjét balról, a sor-akciókat jobbról). A bridge (`JsGridContainer`) ezért mindig ráteszi. Konténerre téve ugyanez a hatás (a szerver-renderelt grid-kártyát befogadó panel is mondhatja, hogy „ez nem a lap"). */ .content-wrapper > .content.ui-page .card:not(.ui-no-bleed):has(.jsgrid):not(:where(.ui-no-bleed, .ui-split, .card, .modal, .ui-modal, .ui-ctx-sheet, [class*='col-sm-'], [class*='col-md-'], [class*='col-lg-'], [class*='col-xl-']) *), .content-wrapper > section.content.ui-page .card:not(.ui-no-bleed):has(.jsgrid):not(:where(.ui-no-bleed, .ui-split, .card, .modal, .ui-modal, .ui-ctx-sheet, [class*='col-sm-'], [class*='col-md-'], [class*='col-lg-'], [class*='col-xl-']) *) { margin-left: calc(-1 * var(--page-gutter)); margin-right: calc(-1 * var(--page-gutter)); border-left: 0; border-right: 0; border-radius: 0; } /* …and it ends AT the viewport bottom. The grid body is measured to fill the space down to the viewport, and its sticky footer is the last thing on the page — so the page's bottom padding could only ever show up as a dead strip UNDER that footer, never as breathing room. (GridRoot subtracts whatever is left here from the body height, so zeroing it hands those pixels to the rows instead of leaving a gap.) The horizontal gutter is unaffected. */ /* NB: `> .card .jsgrid`, NOT `> .card:has(.jsgrid)` — `:has()` may not be nested inside `:has()`, and one invalid selector drops the WHOLE rule, so the first version of this silently did nothing. The descendant combinator expresses the same thing: a `.jsgrid` living inside a `.card` that is a direct child here. */ .content-wrapper > .content.ui-page:has(.card:not(.ui-no-bleed) .jsgrid), .content-wrapper > section.content.ui-page:has(.card:not(.ui-no-bleed) .jsgrid) { padding-bottom: 0; } .content-wrapper > .content.ui-page .card:not(.ui-no-bleed):has(.jsgrid):not(:where(.ui-no-bleed, .ui-split, .card, .modal, .ui-modal, [class*='col-sm-'], [class*='col-md-'], [class*='col-lg-'], [class*='col-xl-']) *), .content-wrapper > section.content.ui-page .card:not(.ui-no-bleed):has(.jsgrid):not(:where(.ui-no-bleed, .ui-split, .card, .modal, .ui-modal, [class*='col-sm-'], [class*='col-md-'], [class*='col-lg-'], [class*='col-xl-']) *) { margin-bottom: 0; } /* The card's own bottom hairline would land on the last pixel row of the viewport, right under the footer's top border — two rules for one edge. */ .content-wrapper > .content.ui-page .card:not(.ui-no-bleed):has(.jsgrid):not(:where(.ui-no-bleed, .ui-split, .card, .modal, .ui-modal, [class*='col-sm-'], [class*='col-md-'], [class*='col-lg-'], [class*='col-xl-']) *), .content-wrapper > section.content.ui-page .card:not(.ui-no-bleed):has(.jsgrid):not(:where(.ui-no-bleed, .ui-split, .card, .modal, .ui-modal, [class*='col-sm-'], [class*='col-md-'], [class*='col-lg-'], [class*='col-xl-']) *) { border-bottom: 0; } /* ---- page tabs are the grid card's TOP BAND, not a floating strip ---- The strip used to hover on the canvas above the card: its own underline, a gap, the card's top border and then the card-header's bottom border — four horizontal rules stacked in ~60px before a single row of data. It now docks to the topbar and runs edge to edge on the card's own white surface, i.e. the same reading as the tabs that live inside a `.card-header` (invoice pool). Scoped to the UNDERLINE variant: `--pills` strips are in-page filters (overdue invoices, marketplace compliance), not page navigation. */ /* Melyik fülsáv „page-sáv"? A page közvetlen gyereke, VAGY egy szerep nélküli burkolóé (`container-fluid`, SPA-mount). Szándékosan NEM tetszőleges mélységben: egy SPA belsejében a szekció-fülsáv nem lapnavigáció, azt nem szabad a viewport széléig húzni. Aminek mégis az a dolga (pl. a teljesítési áttekintő bucket-sávja), az a `ui-tabs--page` osztállyal mondja ki. */ .content-wrapper > .content.ui-page > .ui-tabs--underline, .content-wrapper > section.content.ui-page > .ui-tabs--underline, .content-wrapper > .content.ui-page > .container-fluid > .ui-tabs--underline, .content-wrapper > section.content.ui-page > .container-fluid > .ui-tabs--underline, .content-wrapper > .content.ui-page .ui-tabs--underline.ui-tabs--page, .content-wrapper > section.content.ui-page .ui-tabs--underline.ui-tabs--page, .content-wrapper > .content.ui-page > .d-flex:has(> .ui-tabs--underline), .content-wrapper > section.content.ui-page > .d-flex:has(> .ui-tabs--underline), .content-wrapper > .content.ui-page .d-flex.ui-tabs--page:has(> .ui-tabs--underline), .content-wrapper > section.content.ui-page .d-flex.ui-tabs--page:has(> .ui-tabs--underline) { margin: 0 calc(-1 * var(--page-gutter)) !important; padding: 0 12px 0 4px; background: var(--ui-surface); border-bottom: 1px solid var(--ui-border); } /* Mély mountból (SPA) jövő page-sáv, ami vizuálisan a lap legelső eleme: a :first-child heurisztika nem éri el, ezért a dokkolást a `ui-tabs--dock` mondja ki explicit (pl. FA pool, EPR — a Tabs a mount-div mélyén ül). */ .content-wrapper > .content.ui-page .ui-tabs--underline.ui-tabs--page.ui-tabs--dock, .content-wrapper > section.content.ui-page .ui-tabs--underline.ui-tabs--page.ui-tabs--dock, .content-wrapper > .content.ui-page .d-flex.ui-tabs--page.ui-tabs--dock:has(> .ui-tabs--underline), .content-wrapper > section.content.ui-page .d-flex.ui-tabs--page.ui-tabs--dock:has(> .ui-tabs--underline) { margin-top: calc(-1 * var(--page-pad-t)) !important; } /* first thing on the page → sit ON the topbar, no dead band between two bars */ .content-wrapper > .content.ui-page > .ui-tabs--underline:first-child, .content-wrapper > section.content.ui-page > .ui-tabs--underline:first-child, .content-wrapper > .content.ui-page > .d-flex:has(.ui-tabs--underline):first-child, .content-wrapper > section.content.ui-page > .d-flex:has(.ui-tabs--underline):first-child, .content-wrapper > .content.ui-page > .d-none:first-child + .ui-tabs--underline, .content-wrapper > section.content.ui-page > .d-none:first-child + .ui-tabs--underline, .content-wrapper > .content.ui-page > .container-fluid:first-child > .ui-tabs--underline:first-child, .content-wrapper > section.content.ui-page > .container-fluid:first-child > .ui-tabs--underline:first-child, .content-wrapper > .content.ui-page > .ui-statbar--band:first-child, .content-wrapper > section.content.ui-page > .ui-statbar--band:first-child { margin-top: calc(-1 * var(--page-pad-t)) !important; } /* A `container-fluid` burkoló saját 15px-es oldal-paddingja a sávon BELÜL ülne — a sáv már a viewport széléig ér, a gutter kétszer nem kell. A Bootstrap `.row` viszont ezt a 15px-et NEGATÍV margóval ellensúlyozza, ezért a padding nullázása után a sor 15px-cel kilógna balra: az EGYOSZLOPOS sornál (ami csak burkoló, nem elrendezés) mindkettőt kioltjuk. A többoszlopos rács marad, ott a negatív margó + oszlop-padding a valódi gutter-mechanika. */ .content-wrapper > .content.ui-page > .container-fluid, .content-wrapper > section.content.ui-page > .container-fluid { padding-left: 0; padding-right: 0; } .content-wrapper > .content.ui-page > .container-fluid > .row:has(> [class*='col']:only-child), .content-wrapper > section.content.ui-page > .container-fluid > .row:has(> [class*='col']:only-child) { margin-left: 0; margin-right: 0; } .content-wrapper > .content.ui-page > .container-fluid > .row:has(> [class*='col']:only-child) > [class*='col'], .content-wrapper > section.content.ui-page > .container-fluid > .row:has(> [class*='col']:only-child) > [class*='col'] { padding-left: 0; padding-right: 0; } /* Többoszlopos rács a nullázott container-ben: a sor negatív margóját a page gutterén belül kell tartani, különben a szélső oszlopok kilógnak. */ .content-wrapper > .content.ui-page > .container-fluid > .row:not(:has(> [class*='col']:only-child)), .content-wrapper > section.content.ui-page > .container-fluid > .row:not(:has(> [class*='col']:only-child)) { margin-left: 0; margin-right: 0; } .content-wrapper > .content.ui-page > .container-fluid > .row:not(:has(> [class*='col']:only-child)) > [class*='col']:first-child, .content-wrapper > section.content.ui-page > .container-fluid > .row:not(:has(> [class*='col']:only-child)) > [class*='col']:first-child { padding-left: 0; } .content-wrapper > .content.ui-page > .container-fluid > .row:not(:has(> [class*='col']:only-child)) > [class*='col']:last-child, .content-wrapper > section.content.ui-page > .container-fluid > .row:not(:has(> [class*='col']:only-child)) > [class*='col']:last-child { padding-right: 0; } /* In the wrapper case (tabs + a right-aligned control) the BAND carries the rule and the spacing, so the strip inside must not draw a second underline that stops short — nor keep its `mb-3` utility, which sat INSIDE the band and pushed the band's own rule 16px below the tabs. That gap was the one visible difference between the tabbed listing screens (orders) and the plain ones. */ .content-wrapper > .content.ui-page > .d-flex:has(.ui-tabs--underline) .ui-tabs--underline, .content-wrapper > section.content.ui-page > .d-flex:has(.ui-tabs--underline) .ui-tabs--underline { border-bottom: 0; margin: 0 !important; } /* …and neither may the flex column the strip is usually wrapped in. */ .content-wrapper > .content.ui-page > .d-flex:has(.ui-tabs--underline) > *, .content-wrapper > section.content.ui-page > .d-flex:has(.ui-tabs--underline) > * { margin-top: 0; margin-bottom: 0; } /* whatever the band sits on starts flush and drops its own top border */ .content-wrapper > .content.ui-page > .ui-tabs--underline + .card, .content-wrapper > section.content.ui-page > .ui-tabs--underline + .card, .content-wrapper > .content.ui-page > .d-flex:has(.ui-tabs--underline) + .card, .content-wrapper > section.content.ui-page > .d-flex:has(.ui-tabs--underline) + .card, .content-wrapper > .content.ui-page > .ui-tabs--underline + .tab-content > .tab-pane > .card, .content-wrapper > section.content.ui-page > .ui-tabs--underline + .tab-content > .tab-pane > .card { border-top: 0; } /* ---- „page band": fülsáv + jobb slot (szűrők, fő műveletek) egy sávban ---- Szimpla vagy dupla (egymásra dokkolt) sáv; a React oldala a monolith `PageBand` komponense (ld. EquipmentApp/EqNav). A 2. sáv (`--sub`) halványabb felületű, így a két szint egy pillantásra elválik. */ .ui-band { display: flex; align-items: center; justify-content: space-between; gap: 6px 12px; flex-wrap: wrap; } .ui-band > .ui-tabs { flex: 1 1 auto; min-width: 0; border-bottom: 0; } .ui-band > .ui-band__left { flex: 0 1 auto; display: flex; align-items: center; padding: 6px 10px; white-space: nowrap; } .ui-band__right { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; padding: 6px 0; } .ui-band--sub { background: var(--ui-surface-alt) !important; } .ui-band--sub .ui-tab { font-size: var(--ui-fz-sm); } .ui-band-body { margin-top: 16px; } @media (max-width: 767.98px) { .ui-band__right { width: 100%; } /* csak gombok a jobb slotban (nincs kereső/szűrő): nem kér külön teljes sort — a fülsáv zsugorodik mellette (a shell ikonosra tömöríti a nem aktív füleket) */ .ui-band:has(> .ui-band__right--compact) { flex-wrap: nowrap; } .ui-band:has(> .ui-band__right--compact) > .ui-tabs { flex-basis: 0; } .ui-band__right.ui-band__right--compact { width: auto; flex: none; flex-wrap: nowrap; } } /* ---- a listing card that is the FIRST thing on the page docks to the topbar. 8px of page padding + the card's own top border read as a stray gap under a bar the card is conceptually attached to. */ .content-wrapper > .content.ui-page > .card:has(.jsgrid):first-child, .content-wrapper > section.content.ui-page > .card:has(.jsgrid):first-child { margin-top: calc(-1 * var(--page-pad-t)); border-top: 0; } /* the gutter replaces the container's own padding — no double inset */ .content-wrapper > .content.ui-page > .container-fluid, .content-wrapper > section.content.ui-page > .container-fluid { padding: 0; } /* AdminLTE's default content section (no `.ui-page`) keeps its own spacing */ .content-wrapper > .content-fluid { padding: var(--ui-page-pad); } .main-footer { margin-left: var(--shell-sidebar-w); background: var(--ui-surface); border-top: 1px solid var(--ui-border); color: var(--ui-muted); padding: 12px 20px; font-size: var(--ui-fz-sm); transition: margin-left 0.2s ease; } .content-header { padding: var(--ui-page-pad) var(--ui-page-pad) 0; } .content-header h1, .content-header .h1 { font-size: var(--ui-fz-xl); font-weight: 700; letter-spacing: -0.02em; color: var(--ui-ink); margin: 0; } /* control-sidebar is unused — keep it out of the way */ .control-sidebar { display: none !important; } /* AdminLTE's preloader splash was hidden by adminlte.min.js (now removed), so without this it lingers in-flow above the navbar as a white band. Hide it. */ .preloader { display: none !important; } /* ============================== Collapse (desktop mini) ============================== */ @media (min-width: 992px) { .sidebar-collapse .main-sidebar { width: var(--shell-sidebar-mini-w); } .sidebar-collapse .main-sidebar .nav-sidebar .nav-link > p, .sidebar-collapse .main-sidebar .brand-link .brand-text, .sidebar-collapse .main-sidebar .user-panel .info { opacity: 0; visibility: hidden; } /* icon rail: centre the glyphs instead of leaving them left-aligned against a label that is no longer there. Stated unconditionally and undone by the hover-expand block below — `:not(:hover)` would make a TAP (which sets :hover on touch) reflow the rail underneath the finger. */ .sidebar-collapse .main-sidebar .nav-sidebar .nav-link { justify-content: center; padding: 9px 0; margin: 2px 12px; } .sidebar-collapse .main-sidebar .nav-sidebar .nav-link > .nav-icon, .sidebar-collapse .main-sidebar .nav-sidebar .nav-link > i:first-child { width: auto; font-size: 1rem; } .sidebar-collapse .main-sidebar .nav-sidebar > .nav-item > .nav-link.active::before { display: none; } /* same height as expanded, so the rows don't jump between the rail and the hover-expanded menu; the label stays hidden (one line, no wrap in the narrow rail) and a short hairline marks the section break instead. */ .sidebar-collapse .main-sidebar .nav-header { position: relative; white-space: nowrap; overflow: hidden; text-overflow: clip; color: transparent; } .sidebar-collapse .main-sidebar .nav-header::after { content: ''; position: absolute; left: calc(var(--shell-sidebar-mini-w, 4.6rem) / 2); bottom: 13px; width: 18px; margin-left: -9px; border-top: 1px solid var(--ui-border-strong, #c4c9d2); } .sidebar-collapse .main-sidebar .nav-treeview { display: none !important; } .sidebar-collapse .main-header.navbar { margin-left: var(--shell-sidebar-mini-w); } .sidebar-collapse .content-wrapper, .sidebar-collapse .main-footer { margin-left: var(--shell-sidebar-mini-w); } } /* sidebar-mini: hovering the collapsed sidebar expands it (overlays content, content margin stays at mini width so nothing reflows). Behind `(hover: hover)`: on a touch screen the browser fires :hover ON THE TAP, so the rail would expand between `touchend` and `click` and the click would land on a different row than the finger. */ @media (min-width: 992px) and (hover: hover) { .sidebar-collapse .main-sidebar:hover { width: var(--shell-sidebar-w); box-shadow: var(--ui-shadow-z16); } .sidebar-collapse .main-sidebar:hover .nav-sidebar .nav-link > p, .sidebar-collapse .main-sidebar:hover .brand-link .brand-text, .sidebar-collapse .main-sidebar:hover .user-panel .info { opacity: 1; visibility: visible; } .sidebar-collapse .main-sidebar:hover .nav-header { color: var(--ui-muted); } /* back to the un-collapsed baseline (.nav-sidebar .nav-link / .sidebar .nav-header): with `:not(:hover)` these simply stopped applying, so the undo has to restate the base values verbatim. */ .sidebar-collapse .main-sidebar:hover .nav-sidebar .nav-link { justify-content: flex-start; padding: 9px 12px; margin: 2px 12px; } .sidebar-collapse .main-sidebar:hover .nav-sidebar > .nav-item > .nav-link.active::before { display: block; } .sidebar-collapse .main-sidebar:hover .nav-header::after { display: none; } .sidebar-collapse .main-sidebar:hover .nav-header:first-child { padding-top: 12px; } .sidebar-collapse .main-sidebar:hover .nav-item.menu-open > .nav-treeview { display: block !important; } } /* ============================== Mobile (off-canvas) ============================== */ @media (max-width: 991.98px) { .main-sidebar { transform: translateX(-100%); box-shadow: none; } .main-header.navbar { margin-left: 0; } .content-wrapper, .main-footer { margin-left: 0; } body.sidebar-open .main-sidebar { transform: translateX(0); box-shadow: var(--ui-shadow-z16); } body.sidebar-open .shell-backdrop { display: block; } } .shell-backdrop { display: none; position: fixed; inset: 0; background: var(--ui-backdrop); z-index: 1044; } /* ============================== Login ============================== */ .ui-login { min-height: 100vh; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 18px; padding: 28px 18px; /* alive, scheme-tinted backdrop: a soft primary glow over the surface */ background: radial-gradient( 1100px 520px at 50% -8%, color-mix(in srgb, var(--ui-primary) 16%, var(--ui-surface-alt)) 0%, var(--ui-surface-alt) 62% ); } .ui-login__card { width: 100%; max-width: 420px; background: var(--ui-surface); border: 1px solid var(--ui-border); border-radius: var(--ui-radius-lg); box-shadow: var(--ui-shadow-z16); padding: 30px 30px 34px; animation: ui-login-in 320ms cubic-bezier(0.16, 1, 0.3, 1); } @keyframes ui-login-in { from { opacity: 0; transform: translateY(10px) scale(0.99); } } .ui-login__brand { display: flex; align-items: center; gap: 12px; margin-bottom: 22px; } .ui-login__logo { width: 46px; height: 46px; flex: 0 0 auto; display: inline-flex; align-items: center; justify-content: center; border-radius: var(--ui-radius); background: var(--ui-primary); color: var(--ui-on-primary); font-size: 1.25rem; box-shadow: 0 6px 16px color-mix(in srgb, var(--ui-primary) 38%, transparent); } .ui-login__title { font-size: 1.15rem; font-weight: 700; color: var(--ui-ink); line-height: 1.2; } .ui-login__title b { color: var(--ui-primary); } .ui-login__title span { color: var(--ui-muted); font-weight: 600; } .ui-login__heading { margin: 0 0 4px; font-size: 1.4rem; font-weight: 800; color: var(--ui-ink); } .ui-login__sub { margin: 0 0 20px; color: var(--ui-muted); font-size: var(--ui-fz-sm); } .ui-login__field { display: flex; align-items: center; gap: 10px; background: var(--ui-surface); border: 1px solid var(--ui-border); border-radius: var(--ui-radius); padding: 0 12px; margin-bottom: 14px; transition: border-color 0.15s ease, box-shadow 0.15s ease; } .ui-login__field > i { color: var(--ui-muted); font-size: 0.95rem; flex: 0 0 auto; } /* A `select` is előfordul a mezősávban (Plaza/Hermes bolt-választó a belépő fölött) — ugyanaz a sziluett, csak a natív nyíl marad meg. */ .ui-login__field input, .ui-login__field select { flex: 1 1 auto; border: 0; outline: 0; background: transparent; padding: 12px 0; font-size: var(--ui-fz-md); color: var(--ui-body); font-family: inherit; } .ui-login__field select { min-width: 0; cursor: pointer; } .ui-login__field:focus-within { border-color: var(--ui-primary); box-shadow: 0 0 0 3px color-mix(in srgb, var(--ui-primary) 22%, transparent); } .ui-login__field:focus-within > i { color: var(--ui-primary); } .ui-login__submit { width: 100%; display: inline-flex; align-items: center; justify-content: center; gap: 8px; margin-top: 6px; padding: 12px 16px; border: 0; border-radius: var(--ui-radius); background: var(--ui-primary); color: var(--ui-on-primary); font-size: var(--ui-fz-md); font-weight: 700; cursor: pointer; transition: background-color 0.15s ease, transform 0.08s ease, box-shadow 0.15s ease; box-shadow: 0 6px 16px color-mix(in srgb, var(--ui-primary) 30%, transparent); } .ui-login__submit:hover { background: var(--ui-primary-dark); box-shadow: 0 8px 22px color-mix(in srgb, var(--ui-primary) 38%, transparent); } .ui-login__submit:active { transform: translateY(1px); } .ui-login__footer { color: var(--ui-muted); font-size: var(--ui-fz-xs); letter-spacing: 0.02em; } /* ============================================================ * AdminLTE component compat shim — these widgets are NOT in Bootstrap and were * provided by adminlte.min.css (now dropped). Re-styled here, tokenized, so * pages using small-box / info-box / callout / card-variants / elevation don't * fall apart. Colors of bg-* fills come from Bootstrap. * ============================================================ */ /* ---- small-box (stat tiles) ---- */ .small-box { position: relative; border-radius: var(--ui-radius-lg); box-shadow: var(--ui-shadow-z1); margin-bottom: 16px; overflow: hidden; color: #fff; } .small-box > .inner { padding: 16px 20px; } .small-box > .inner h3 { font-size: 2rem; font-weight: 800; line-height: 1.1; margin: 0 0 4px; color: #fff; } .small-box > .inner p { margin: 0; opacity: 0.92; } .small-box > .icon { position: absolute; top: 12px; right: 16px; font-size: 2.6rem; line-height: 1; opacity: 0.25; color: #fff; } .small-box .small-box-footer { display: block; padding: 7px 0; text-align: center; background: rgba(0, 0, 0, 0.12); color: rgba(255, 255, 255, 0.92); text-decoration: none; font-size: var(--ui-fz-sm); } /* light fills (bg-light / bg-white / bg-secondary) need dark text */ .small-box.bg-light, .small-box.bg-white { color: var(--ui-ink); } .small-box.bg-light > .inner h3, .small-box.bg-white > .inner h3 { color: var(--ui-ink); } /* ---- info-box ---- */ .info-box { display: flex; align-items: center; gap: 14px; background: var(--ui-surface); border: 1px solid var(--ui-border); border-radius: var(--ui-radius-lg); box-shadow: var(--ui-shadow-z1); padding: 12px 14px; margin-bottom: 16px; min-height: 72px; } .info-box .info-box-icon { width: 52px; height: 52px; border-radius: var(--ui-radius); display: flex; align-items: center; justify-content: center; font-size: 1.5rem; color: #fff; flex: 0 0 auto; } .info-box .info-box-content { display: flex; flex-direction: column; min-width: 0; } .info-box .info-box-text { color: var(--ui-muted); font-size: 0.8rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .info-box .info-box-number { font-weight: 800; font-size: 1.3rem; color: var(--ui-ink); } /* ---- callout ---- */ .callout { background: var(--ui-surface); border-radius: var(--ui-radius); padding: 14px 16px; margin-bottom: 16px; border-left: 4px solid var(--ui-border); box-shadow: var(--ui-shadow-z1); } .callout.callout-info { border-left-color: var(--ui-info); } .callout.callout-success { border-left-color: var(--ui-success); } .callout.callout-warning { border-left-color: var(--ui-warning); } .callout.callout-danger { border-left-color: var(--ui-danger); } /* ---- card variants (colored headers / outline accents) ---- */ .card.card-primary > .card-header, .card.card-info > .card-header { background: var(--ui-primary); color: var(--ui-on-primary); border-bottom: 0; } .card.card-success > .card-header { background: var(--ui-success); color: #fff; border-bottom: 0; } .card.card-warning > .card-header { background: var(--ui-warning); color: var(--ui-on-warning); border-bottom: 0; } .card.card-danger > .card-header { background: var(--ui-danger); color: #fff; border-bottom: 0; } .card.card-outline { border-top: 3px solid var(--ui-primary); } .card.card-outline.card-info { border-top-color: var(--ui-info); } .card.card-outline.card-success { border-top-color: var(--ui-success); } .card.card-outline.card-warning { border-top-color: var(--ui-warning); } .card.card-outline.card-danger { border-top-color: var(--ui-danger); } .card.card-outline.card-secondary { border-top-color: var(--ui-border); } /* (`.card > .card-header .card-title` lives in bootstrap-bridge.css — the copy that used to sit here set a competing weight/size and, being in the earlier file, never won.) */ /* ---- elevation ---- */ .elevation-1, .elevation-2 { box-shadow: var(--ui-shadow-z1) !important; } .elevation-3, .elevation-4 { box-shadow: var(--ui-shadow-z8) !important; } /* …except on the rail itself: the sidebar markup carries `.elevation-4`, which would smear a 24px shadow down the whole content edge. It is separated by its hairline border; the shadow is only for when it actually floats (mobile off-canvas / collapsed-and-hovered), re-asserted with the same weight. */ .main-sidebar.elevation-1, .main-sidebar.elevation-2, .main-sidebar.elevation-3, .main-sidebar.elevation-4 { box-shadow: none !important; } @media (min-width: 992px) { .sidebar-collapse .main-sidebar:hover { box-shadow: var(--ui-shadow-z16) !important; } } @media (max-width: 991.98px) { body.sidebar-open .main-sidebar { box-shadow: var(--ui-shadow-z16) !important; } } /* ---- jsgrid header sticks BELOW the sticky topbar while scrolling ---- */ /* The grid's column-header (+ filter) row pins just under the topbar instead of sliding under it. Embedded (iframe, no topbar) → top:0 via --shell-header-h. */ .jsgrid > .jsgrid-grid-header { position: sticky; top: var(--shell-header-h); z-index: 30; background: var(--ui-surface); } html.is-embedded { --shell-header-h: 0px; } /* Oldalsáv olvasatlan-szám: a menüpontból látszik, hol van teendő. Jobbra igazítva, a csoport-nyíl ELŐTT (l. sidebar_item.volt). */ .nav-sidebar .nav-link > p > .nav-badge, .nav-sidebar .nav-link .nav-badge { display: inline-block; min-width: 18px; margin-left: auto; float: right; padding: 1px 6px; border-radius: 9px; font-size: 11px; font-weight: 700; line-height: 16px; text-align: center; background: #dc3545; color: #fff; } /* Csoport-soron a nyíl mellé, ne alá */ .nav-sidebar .nav-link > p > .nav-badge { margin-right: 18px; } /* Második jelvény: NYITOTT darab (szürke) az új üzenet (piros) mellett */ .nav-sidebar .nav-link .nav-badge--muted { background: rgba(255,255,255,.18); color: inherit; font-weight: 600; margin-left: 4px; } .nav-sidebar .nav-link .nav-badge + .nav-badge--muted { margin-right: 4px; } .nav-sidebar .nav-link > p > .nav-badge + .nav-badge--muted { margin-right: 4px; }