/* Byggbetalning theme tokens + visual refresh + dark mode. Dark mode rides on Bootstrap 5.3's native data-bs-theme attribute, set on before any stylesheet loads (inline script in _Layout.cshtml) and toggled by js/theme.js. Bootstrap components (cards, tables, forms, modals, dropdowns, alerts, badges, pagination) flip automatically. This file loads last of all stylesheets, so rules here win ties against connect.min.css, app.css and bootstrap.min.css — but NOT against the per-page @section Styles links (DataTables), which render after it; overrides against those need higher specificity (see the table rules). */ :root { --bb-accent: #29432d; --bb-accent-hover: #1d3120; --bb-accent-contrast: #ffffff; --bb-focus-ring: rgba(41, 67, 45, .15); --bb-radius: .5rem; --bb-radius-lg: .75rem; --bb-card-shadow: 0 1px 2px rgba(16, 24, 40, .06), 0 2px 8px rgba(16, 24, 40, .06); --bb-row-hover: rgba(41, 67, 45, .045); } [data-bs-theme="dark"] { --bb-body-bg: #1f2128; --bb-surface: #272b33; --bb-surface-raised: #323742; --bb-border: #404652; --bb-text: #ced2d9; --bb-text-muted: #8c8e9c; --bb-accent: #6fcf97; --bb-accent-hover: #57c286; --bb-accent-contrast: #16171c; --bb-focus-ring: rgba(111, 207, 151, .25); --bb-card-shadow: 0 1px 2px rgba(0, 0, 0, .4); --bb-row-hover: rgba(255, 255, 255, .035); color-scheme: dark; } /* ---- Theme toggle icon (moon outline in light, filled in dark) ---- */ #theme-toggle i.material-icons { display: none; } [data-bs-theme="dark"] #theme-toggle i.material-icons { display: inline-block; } [data-bs-theme="dark"] #theme-toggle i.material-icons-outlined { display: none; } /* ---- Auth pages (replaces the old inline style on ) ---- */ body.unauthenticated { background-color: #f0ede6; } /* ==================== Visual refresh (#109 steg 5) ==================== Typography, spacing, cards, tables, forms — token-driven so both themes follow automatically. Kept within Bootstrap 5 components. */ /* Links: brand accent instead of legacy blue/black */ a { color: var(--bb-accent); } /* Headings: clearer hierarchy (connect.css leaves h4-h6 at weight 500) */ h4, h5, h6 { font-weight: 600; } .page-content .page-title h3 { font-weight: 700; } /* Cards: softer shadow, larger radius, no hard border */ .card { border: 0; border-radius: var(--bb-radius-lg); box-shadow: var(--bb-card-shadow); /* Views sprinkle .shadow/.shadow-sm utilities on cards; those utilities read these vars, so redefining them here funnels every card to the same soft token shadow without touching 20 view files. */ --bs-box-shadow: var(--bb-card-shadow); --bs-box-shadow-sm: var(--bb-card-shadow); } .card .card-header { background-color: transparent; font-weight: 600; } /* Buttons: focus ring in brand accent (connect.css hardcodes its teal) */ .btn.btn-primary.active, .btn.btn-primary:active, .btn.btn-primary:focus { box-shadow: 0 0 0 .2rem var(--bb-focus-ring); } /* A disabled primary button rendered Bootstrap blue instead of the brand accent. app.css:616 styles ".btn.btn-primary" (0,2,0), but bootstrap.min.css loads after it and its ".btn.disabled" rule is also (0,2,0) — the tie goes to the later sheet, and only for the disabled state. Re-assert the accent from here (theme.css is last) at (0,3,0). Bootstrap's --bs-btn-disabled-opacity still greys it out. */ .btn.btn-primary.disabled, .btn.btn-primary:disabled { color: var(--bb-accent-contrast); background: var(--bb-accent); border-color: var(--bb-accent); } /* Forms: smaller/medium-weight labels, accent focus ring, consistent radius */ label { font-size: .875rem; font-weight: 500; margin-bottom: .25rem; } .form-control, .form-select { border-radius: var(--bb-radius); } .form-control:focus, .form-select:focus { border-color: var(--bb-accent); box-shadow: 0 0 0 .2rem var(--bb-focus-ring); } /* Tables: muted small-caps headers, hover affordance on the clickable list rows. Cell padding stays with connect.min.css (15px 25px !important), but its hardcoded #e8e8e8 border must be re-declared with !important so it follows the theme in dark mode. No .page-content prefix: Users/Profile renders its table outside it. */ table.dataTable thead th, .table thead th { font-size: .72rem; font-weight: 600; text-transform: uppercase; letter-spacing: .06em; color: var(--bs-secondary-color); } table.dataTable td { font-size: .9rem; border-bottom: 1px solid var(--bs-border-color-translucent) !important; } table.dataTable tbody tr:hover { background-color: var(--bb-row-hover); } #zero-conf tbody tr.contractRow { cursor: pointer; } /* DataTables chrome: search box picks up form styling, active page in accent */ .dataTables_wrapper .dataTables_filter input { border: 1px solid var(--bs-border-color); border-radius: var(--bb-radius); padding: .3rem .6rem; font-size: .9rem; background-color: var(--bs-body-bg); color: var(--bs-body-color); } .dataTables_wrapper .dataTables_length select { border: 1px solid var(--bs-border-color); border-radius: var(--bb-radius); padding: .25rem .4rem; font-size: .9rem; background-color: var(--bs-body-bg); color: var(--bs-body-color); } .dataTables_wrapper .dataTables_length, .dataTables_wrapper .dataTables_filter, .dataTables_wrapper .dataTables_info { font-size: .85rem; color: var(--bs-secondary-color); } .pagination { --bs-pagination-color: var(--bb-accent); --bs-pagination-hover-color: var(--bb-accent-hover); --bs-pagination-focus-color: var(--bb-accent-hover); --bs-pagination-active-bg: var(--bb-accent); --bs-pagination-active-border-color: var(--bb-accent); --bs-pagination-active-color: var(--bb-accent-contrast); --bs-pagination-focus-box-shadow: 0 0 0 .2rem var(--bb-focus-ring); } /* Sidebar: rounded menu items (active item color comes from app.css tokens) */ .accordion-menu li > a { border-radius: var(--bb-radius); } /* Dialogs and footer */ .jconfirm .jconfirm-box { border-radius: var(--bb-radius-lg) !important; } .page-footer .footer-text { font-size: .8rem; color: var(--bs-secondary-color); } /* Tooltips. Native title="..." tooltips are drawn by the browser/OS outside the DOM and cannot be styled at all — js/tooltips.js promotes anything marked data-bs-toggle="tooltip" to a Bootstrap tooltip so it can use these tokens and follow data-bs-theme. The --bs-tooltip-* variables must be declared on .tooltip, NOT on :root: Bootstrap 5.3 declares them inside its own .tooltip rule, and a local declaration beats an inherited one. Same specificity here, so theme.css wins on load order (see the file header). */ .tooltip { /* Dark plate on the light beige surfaces, same family as the dark body bg. */ --bs-tooltip-bg: #1f2128; --bs-tooltip-color: #f4f5f7; /* Default is .9, which greys the text out on a small font size. */ --bs-tooltip-opacity: 1; --bs-tooltip-border-radius: var(--bb-radius); --bs-tooltip-font-size: .8125rem; /* The Swedish explanations run long; the 200px default breaks them into four cramped lines. */ --bs-tooltip-max-width: 260px; } /* Contract/Invoice detail modal header+body — was inline style="background:#F0EDE6" on the two partials that render #infoModal/#invoiceInfoModal; moved to a class so dark mode (below) can override it. Users/Profile's #inviteDialog is plain Bootstrap markup and deliberately does not use this class. */ /* The tinted band ends in a rule rather than bleeding out into a gap. This used to be split into a .detail-modal-header-flush modifier so the invoice modal — which still rendered an

icon and a 25px gap — stayed untouched; that modal has since had the same round (#180), so both callers are identical and the modifier folded in. / .detail-modal-header { padding: 18px 18px 1rem; background: #F0EDE6; border-bottom: 1px solid var(--bs-border-color); color: #000; } .detail-modal-body { color: #000; } .detail-modal-title { font-size: 1.25rem; font-weight: 600; } / Opacity rather than a colour token: the header sets an explicit colour per theme (#000 / --bb-text), so a fixed muted colour would fight one of them. / .detail-modal-subtitle { font-size: .85rem; opacity: .65; } / Field grid in the contract modal. The label is metadata and the value is the information, so the label takes the quiet uppercase treatment borrowed from .table thead th above — it used to be an

, which outweighed its own value. auto-fit means no empty filler columns are needed to keep the rows even. 13rem, not 14: three columns inside modal-lg come out at ~224px each, which 14rem misses by a hair — the contact cell then wrapped onto a lonely second row. / .detail-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(13rem, 1fr)); gap: 1.25rem 2rem; } .detail-field-label { margin-bottom: .35rem; font-size: .72rem; font-weight: 600; text-transform: uppercase; letter-spacing: .06em; color: var(--bs-secondary-color); } .detail-field-value { font-size: 1rem; } .detail-field-note { margin-top: .35rem; font-size: .85rem; color: var(--bs-secondary-color); } / Buyer contact details inside the field grid. Deliberately quiet: the modal keeps exactly one visually heavy action (Skapa faktura), so these read as text you can act on rather than as buttons. The icon and the hover underline carry the affordance, not the colour. / .detail-contact + .detail-contact { margin-top: .75rem; } .detail-contact-name { margin-bottom: .15rem; font-size: .85rem; font-weight: 600; } / anywhere, not break-word: the grid column bottoms out at 14rem and a long address must break rather than widen the column and push the layout into a scrollbar. / .detail-contact-line { font-size: .9rem; overflow-wrap: anywhere; } .detail-contact-line .bi { margin-right: .4rem; color: var(--bs-secondary-color); } / !important because connect.min.css colours every in the modal body; without it these come out in the theme's link blue and shout louder than the primary button. / .detail-contact-link { color: inherit !important; text-decoration: none; } .detail-contact-link:hover, .detail-contact-link:focus-visible { text-decoration: underline; } .detail-section { margin-top: 2rem; } .detail-section-title { margin-bottom: .9rem; font-size: .95rem; font-weight: 600; } .detail-section-title .bi { margin-right: .45rem; color: var(--bb-accent); } / Economy panel — the one raised surface in the modal, so the eye has a single anchor. A modal is already a card; one card per section would just be boxes in a box. --bb-surface-raised only exists in dark mode, hence the light fallback (same family as the header's #F0EDE6). / .detail-economy { padding: 1rem 1.25rem; border-radius: var(--bb-radius); background: var(--bb-surface-raised, #F7F5F0); } / Measured with 10 ÄTA at a 620px-tall viewport: the table pushes the panel entirely out of view, so the number the user acts on disappears exactly when they look at the details. The opaque band is the modal's own background, so rows scroll away behind it cleanly instead of peeking past the panel's rounded corners. Never engages when the content fits. / .detail-economy-sticky { position: sticky; top: 0; z-index: 2; / Padding, not the .detail-section margin: a sticky element parks its margin box at top:0, so a margin here would leave a transparent strip above the band for rows to show through. / padding-top: 2rem; padding-bottom: .75rem; background: var(--bs-modal-bg); } .detail-economy-figures { display: grid; grid-template-columns: repeat(auto-fit, minmax(11rem, 1fr)); gap: .75rem 1.5rem; align-items: end; } .detail-economy .detail-field-value { font-variant-numeric: tabular-nums; } / The number the user acts on carries the most weight; the two it is derived from stay a step down. / .detail-economy-primary .detail-field-value { font-size: 1.5rem; font-weight: 600; line-height: 1.2; } .detail-economy-primary.is-over .detail-field-value { color: var(--bs-danger-text-emphasis, #b02a37); } .detail-economy .progress { height: 6px; margin-top: 1rem; / Neutral grey reads on both the light and the dark panel. / background-color: rgba(128, 128, 128, .25); } .detail-economy .progress-bar { background-color: var(--bb-accent); } / ÄTA list in the contract modal. Column layout so amounts can be compared down the column; the header styling comes from the shared .table thead th rule further up. Kept a step quieter than the contract list behind the modal — this is supporting detail, not the main table. / .ata-table { font-size: .9rem; } .ata-table > :not(caption) > > * { padding: .4rem .5rem; } /* The name column absorbs the slack; without this the browser splits the width evenly and leaves a gap between a short name and the next column. / .ata-table th:first-child { width: 100%; } .ata-table th:not(:first-child), .ata-table td:not(:first-child) { white-space: nowrap; } .ata-table td.text-end, .ata-table tfoot td { font-variant-numeric: tabular-nums; } .ata-table tfoot td { font-weight: 600; } / A column of zeroes should not shout. / .ata-table .is-zero { color: var(--bs-secondary-color); } .ata-table .badge { font-size: .7rem; } / connect.min.css gives every descendant of .table a hardcoded "border-color: #e8e8e8 !important", which beats Bootstrap's --bs-table-border-color and leaves light rules on a dark modal. Same pitfall as the DataTables rules above, and the same remedy: re-declare with !important. / .ata-table.table { border-color: var(--bb-border, #dee2e6) !important; } /* ==================== Dark mode ==================== / [data-bs-theme="dark"] body { background-color: var(--bb-body-bg); color: var(--bb-text); } [data-bs-theme="dark"] body.unauthenticated { background-color: var(--bb-body-bg); } / Sidebar (connect.css/style.css hardcode #F0EDE6/#fff) / [data-bs-theme="dark"] .page-sidebar { background-color: var(--bb-surface); box-shadow: 0 0 .5rem rgba(0, 0, 0, .1); } [data-bs-theme="dark"] .accordion-menu > li > a { color: var(--bb-text-muted); } [data-bs-theme="dark"] .accordion-menu li.active-page > a, [data-bs-theme="dark"] .accordion-menu li > a:hover { background: rgba(255, 255, 255, .04); color: var(--bb-accent); } / Solid accent pill for the active page, same as light mode (app.css) / [data-bs-theme="dark"] .accordion-menu li.active-page > a:only-child { background: var(--bb-accent); color: var(--bb-accent-contrast); } [data-bs-theme="dark"] .card { background-color: var(--bb-surface); } [data-bs-theme="dark"] .accordion-menu li.sidebar-title { color: var(--bb-text-muted); opacity: .6; } [data-bs-theme="dark"] .logo-box a.logo-text { color: var(--bb-text); } / Page header / [data-bs-theme="dark"] .page-header .navbar ul.navbar-nav > li > a { color: var(--bb-text-muted); } [data-bs-theme="dark"] .page-header .navbar ul.navbar-nav > li > a:hover { color: var(--bb-text); } [data-bs-theme="dark"] .footer-text { color: var(--bb-text-muted); } / Page content areas (style.css hardcodes #f0ede6/#eee) / [data-bs-theme="dark"] .page-content, [data-bs-theme="dark"] .home-page .page-content { background-color: var(--bb-body-bg); } [data-bs-theme="dark"] .home-page .accordion { background-color: var(--bb-surface); color: var(--bb-text); } / Links and primary buttons come from the --bb-accent tokens in app.css/this file; only outline-dark needs a dark-specific remap (Bootstrap does not flip .btn-outline-dark with the theme). / [data-bs-theme="dark"] .btn-outline-dark { / Direct properties as well as --bs-btn-* vars: connect.min.css colors this button directly, bypassing Bootstrap's button variables. / color: var(--bb-text) !important; border-color: var(--bb-border) !important; --bs-btn-color: var(--bb-text); --bs-btn-border-color: var(--bb-border); --bs-btn-hover-color: var(--bb-text); --bs-btn-hover-bg: var(--bb-surface-raised); --bs-btn-hover-border-color: var(--bb-border); --bs-btn-active-bg: var(--bb-surface-raised); --bs-btn-active-color: var(--bb-text); } [data-bs-theme="dark"] .btn-outline-dark:hover { background-color: var(--bb-surface-raised) !important; } / Forms (style.css/site.css hardcode light backgrounds with !important) / [data-bs-theme="dark"] input.invalid, [data-bs-theme="dark"] select.invalid, [data-bs-theme="dark"] .form-control.invalid, [data-bs-theme="dark"] .form-select.invalid, [data-bs-theme="dark"] textarea.form-control.invalid, [data-bs-theme="dark"] .form-control.input-validation-error, [data-bs-theme="dark"] .form-select.input-validation-error, [data-bs-theme="dark"] textarea.form-control.input-validation-error { background-color: #3a2326 !important; border-color: #dc3545 !important; } [data-bs-theme="dark"] input[readonly], [data-bs-theme="dark"] .form-control[readonly] { background-color: var(--bb-surface) !important; color: var(--bb-text-muted) !important; -webkit-text-fill-color: var(--bb-text-muted) !important; } [data-bs-theme="dark"] input:-webkit-autofill, [data-bs-theme="dark"] input:-webkit-autofill:hover, [data-bs-theme="dark"] input:-webkit-autofill:focus { background-color: var(--bb-body-bg) !important; color: var(--bb-text) !important; border-color: var(--bb-border) !important; -webkit-text-fill-color: var(--bb-text) !important; -webkit-box-shadow: 0 0 0 1000px var(--bb-body-bg) inset !important; } / jquery-confirm dialogs (used by invoice/payment flows) / [data-bs-theme="dark"] .jconfirm .jconfirm-box { background-color: var(--bb-surface); color: var(--bb-text); } [data-bs-theme="dark"] .jconfirm .jconfirm-box .jconfirm-title-c { color: var(--bb-text); } [data-bs-theme="dark"] .jconfirm .jconfirm-box .jconfirm-content { color: var(--bb-text-muted); } [data-bs-theme="dark"] .jconfirm.jconfirm-white .jconfirm-bg, [data-bs-theme="dark"] .jconfirm.jconfirm-light .jconfirm-bg { background-color: rgba(0, 0, 0, .6); } / Contract/Invoice detail modal (see .detail-modal-header/-body above) / [data-bs-theme="dark"] .detail-modal-header { background: var(--bb-surface-raised); color: var(--bb-text); } [data-bs-theme="dark"] .detail-modal-body { color: var(--bb-text); } / connect.min.css hardcodes .modal-title to a fixed gray with no dark variant (also affects Users/Profile's #inviteDialog, which is a welcome side effect) / [data-bs-theme="dark"] .modal-title { color: var(--bb-text); } / Tooltips (see .tooltip above). A near-black plate on a dark surface reads as a hole; the raised-surface token keeps it floating above the modal instead. / [data-bs-theme="dark"] .tooltip { --bs-tooltip-bg: var(--bb-surface-raised); --bs-tooltip-color: var(--bb-text); } / Bootstrap-4-style badge/alert classes (connect.min.css hardcodes their pastel colors with no dark variant); scoped to the variants actually used in the app / [data-bs-theme="dark"] .badge.badge-success, [data-bs-theme="dark"] .alert.alert-success { background-color: rgba(111, 207, 151, .16); color: #6fcf97; } [data-bs-theme="dark"] .badge.badge-warning, [data-bs-theme="dark"] .alert.alert-warning { background-color: rgba(244, 158, 49, .16); color: #f4b35f; } [data-bs-theme="dark"] .badge.badge-danger, [data-bs-theme="dark"] .alert.alert-danger { background-color: rgba(240, 81, 84, .16); color: #f37a7d; } [data-bs-theme="dark"] .badge.badge-info, [data-bs-theme="dark"] .alert.alert-info { background-color: rgba(54, 161, 234, .16); color: #6cb8ef; } / DataTables chrome not covered by Bootstrap / [data-bs-theme="dark"] .dataTables_wrapper .dataTables_length, [data-bs-theme="dark"] .dataTables_wrapper .dataTables_filter, [data-bs-theme="dark"] .dataTables_wrapper .dataTables_info, [data-bs-theme="dark"] .dataTables_wrapper .dataTables_paginate { color: var(--bb-text-muted); } [data-bs-theme="dark"] tr.group { background-color: var(--bb-surface-raised) !important; } / File-upload trigger: the native input is visually hidden and this label is the click target. connect.min.css forces `.btn { border:none !important }`, which erases the btn-outline-secondary border, so restore a theme-aware neutral border here. Uses --bs-* tokens (not --bb-) so it works in light mode too. / .bb-file-btn.btn { background-color: var(--bs-tertiary-bg); color: var(--bs-body-color); border: 1px solid var(--bs-border-color) !important; cursor: pointer; } .bb-file-btn.btn:hover, .bb-file-btn.btn:focus { background-color: var(--bs-secondary-bg); color: var(--bs-body-color); } /* Selected-file list rendered next to the "Välj filer" button (theme-aware). / .bb-file-list { display: flex; flex-wrap: wrap; gap: .5rem; align-items: center; } .bb-file-list .bb-file-empty { color: var(--bs-secondary-color); } .bb-file-chip { display: inline-flex; align-items: center; gap: .4rem; padding: .15rem .5rem; border: 1px solid var(--bs-border-color); border-radius: var(--bb-radius); background-color: var(--bs-tertiary-bg); color: var(--bs-body-color); font-size: .85rem; } .bb-file-chip button { border: none; background: none; color: var(--bs-secondary-color); line-height: 1; padding: 0; cursor: pointer; font-size: 1rem; } .bb-file-chip button:hover { color: var(--bs-danger, #dc3545); } / Restore a visible boxed border around the file-upload card. The global `.card { border: 0 }` leaves only a soft shadow; the old upload "box" was really the native file input's border, which the hidden-input approach removed. Two-class selector beats `.card` so no !important is needed. / .card.bb-upload-card { border: 1px solid var(--bs-border-color); } / Toastr notifications must stay pinned to the viewport, not scroll away with the document. The bundled toastr CSS leaves #toast-container at position:absolute, so toasts anchored top-right vanish above the fold on long pages (e.g. Skapa avtal, where the upload rejection toast fires far down the form). Fixed keeps every toast in view regardless of scroll. */ #toast-container { position: fixed !important; }