/* File: wwwroot/css/theme.webapp.css ========================================================================== BioMaint CMMS – Web App Theme (Bootstrap 5.3.8) - No Tailwind. Pure CSS + Bootstrap variables - Light/Dark via [data-bs-theme] on - Sidebar & topbar tuned for theme.webapp.js layout - Brand-aligned tokens reused across cards, tables, forms, dashboard, etc. ========================================================================== */ @font-face{ font-family:"Inter"; src:url("/fonts/inter/InterVariable.woff2") format("woff2"); font-style:normal; font-weight:100 900; font-display:swap; } @font-face{ font-family:"Inter"; src:url("/fonts/inter/InterVariable-Italic.woff2") format("woff2"); font-style:italic; font-weight:100 900; font-display:swap; } /* ============================ TOKENS (DARK DEFAULT) ====================== */ :root{ /* Brand */ --brand:#10B981; --brand-600:#0e9f6e; --brand-deep:#047857; /* Neutrals (dark default) - tuned away from blue into ChatGPT-like gray */ --surface:#222327; --surface-2:#1d1e22; --surface-3:#292b30; --text:#f3f4f6; --muted:#a7acb4; --card:#222429; --sidebar-bg:#18191c; --sidebar-border:#2b2d33; --border:#3a3d45; --hairline: color-mix(in srgb, var(--border) 72%, transparent); /* Extra surfaces (award-winning polish) */ --float-surface:#27292e; --modal-surface:#23252a; --shadow-sm: 0 1px 2px rgba(0,0,0,.16); --shadow-md: 0 16px 34px rgba(0,0,0,.22); --shadow-lg: 0 24px 58px rgba(0,0,0,.30); --backdrop-blur: 2px; --backdrop-saturate: 100%; --modal-backdrop-bg: rgba(10,11,13,.34); --sidebar-backdrop-bg: rgba(10,11,13,.22); --menu-active-bg: color-mix(in srgb, var(--brand) 16%, var(--sidebar-bg)); --menu-active-text: #d9fff0; /* “Slab” scale (used in sidebar & subtle tints) */ --slab-25:#fafafa; --slab-50:#f4f4f5; --slab-100:#e4e4e7; --slab-200:#d4d4d8; --slab-300:#a1a1aa; --slab-400:#71717a; --slab-500:#52525b; --slab-600:#3f3f46; --slab-700:#27272a; --slab-800:#18181b; --slab-900:#0f0f10; /* Elevation */ --elev: var(--shadow-md); --elev-lg: var(--shadow-lg); /* Inputs (app-wide) */ --field-bg:#2a2c31; --field-chip-bg:#1f2024; --field-border:#484d56; /* Focus */ --focus-ring-color: rgba(16,185,129,.24); --focus-ring: 0 0 0 .15rem var(--focus-ring-color); /* Sidebar paddings from mockup */ --pady:.55rem; --padx:.85rem; /* Sidebar hover shade */ --side-hover: color-mix(in srgb, var(--brand) 12%, var(--sidebar-bg)); /* Scrollbar shades (sidebar only uses these) */ --sb-thumb: rgba(148,163,184,.22); --sb-track: transparent; /* Control sizing */ --ctrl-h: 44px; --ctrl-pad-y: 10px; --ctrl-pad-x: 14px; --ctrl-radius: 12px; /* App chrome sizing */ --app-header-h:56px; --subhdr-h:54px; /* ---- Extra aliases to match Login theme tokens ---- */ --accent: var(--brand); --accent-hover: var(--brand-600); --accent-contrast:#ffffff; --success:#15803d; --success-contrast:#ffffff; --info:#115e59; --info-contrast:#ffffff; --warning:#ea8a11; --warning-contrast:#171717; --danger:#f97373; /* same as login theme */ --danger-contrast:#ffffff; /* shadow alias used in login theme */ --shadow-2: var(--elev); /* Award-level details */ --radius-card: 1rem; --radius-soft: .85rem; --radius-pill: 999px; --app-grad: radial-gradient(760px circle at 12% 0, color-mix(in srgb, var(--brand) 4%, transparent) 0%, transparent 48%), radial-gradient(620px circle at 96% 8%, color-mix(in srgb, var(--warning) 2%, transparent) 0%, transparent 52%); /* Attachment upload ring (default: dark) */ --bm-attach-ring: rgba(255,255,255,.98); --bm-attach-ring-track: rgba(210,210,210,.40); --bm-attach-ring-shadow: rgba(0,0,0,.55); /* Native control accent (calendar, etc.) */ accent-color: var(--brand); } /* ================================ LIGHT ================================== */ html[data-bs-theme="light"]{ color-scheme: light; --surface:#ffffff; --surface-2:#f4f4f5; --surface-3:#fafafa; --text:#171717; --muted:#6b7280; --card:#ffffff; --sidebar-bg:#f5f5f5; --sidebar-border:#e6e7eb; --border:#e5e7eb; --hairline: rgba(23,23,23,.08); --field-bg:#ffffff; --field-chip-bg:#f5f5f6; --field-border:#d5d8df; --side-hover: color-mix(in srgb, var(--brand) 10%, var(--sidebar-bg)); --float-surface:#ffffff; --modal-surface:#ffffff; --shadow-sm: 0 1px 2px rgba(17,24,39,.04); --shadow-md: 0 12px 28px rgba(15,23,42,.08); --shadow-lg: 0 20px 48px rgba(15,23,42,.12); --backdrop-blur: 2px; --backdrop-saturate: 100%; --modal-backdrop-bg: rgba(245,245,246,.58); --sidebar-backdrop-bg: rgba(245,245,246,.42); --menu-active-bg: color-mix(in srgb, var(--brand) 14%, #edf7f3); --menu-active-text: var(--brand-deep); --elev: var(--shadow-md); --elev-lg: var(--shadow-lg); --app-grad: radial-gradient(760px circle at 12% 0, color-mix(in srgb, var(--brand) 3%, transparent) 0%, transparent 48%), radial-gradient(620px circle at 96% 8%, color-mix(in srgb, var(--warning) 2%, transparent) 0%, transparent 52%); /* Attachment upload ring (light) */ --bm-attach-ring: rgba(255,255,255,.98); --bm-attach-ring-track: rgba(210,210,210,.62); --bm-attach-ring-shadow: rgba(2,6,23,.18); } /* ================================= DARK ================================== */ html[data-bs-theme="dark"]{ color-scheme: dark; --surface:#222327; --surface-2:#1d1e22; --surface-3:#292b30; --text:#f3f4f6; --muted:#a7acb4; --card:#222429; --sidebar-bg:#18191c; --sidebar-border:#2b2d33; --border:#3a3d45; --hairline: color-mix(in srgb, var(--border) 72%, transparent); --field-bg:#2a2c31; --field-chip-bg:#1f2024; --field-border:#484d56; --side-hover: color-mix(in srgb, var(--brand) 12%, var(--sidebar-bg)); --float-surface:#27292e; --modal-surface:#23252a; --shadow-sm: 0 1px 2px rgba(0,0,0,.16); --shadow-md: 0 16px 34px rgba(0,0,0,.22); --shadow-lg: 0 24px 58px rgba(0,0,0,.30); --backdrop-blur: 2px; --backdrop-saturate: 100%; --modal-backdrop-bg: rgba(10,11,13,.34); --sidebar-backdrop-bg: rgba(10,11,13,.22); --menu-active-bg: color-mix(in srgb, var(--brand) 16%, var(--sidebar-bg)); --menu-active-text: #d9fff0; } /* ============================ GLOBAL / BASICS ============================ */ html,body{height:100%} html{ background:color-mix(in srgb, var(--surface) 86%, var(--surface-2)); } body{ margin:0; background:var(--surface); color:var(--text); font-family:"Inter","Noto Sans Bengali","Segoe UI",Roboto,"Helvetica Neue",Arial,"Noto Sans",sans-serif; transition: background .25s ease, color .25s ease, border-color .25s ease; overflow-x:hidden; overscroll-behavior-x: none; } /* Subtle premium background glow (safe, no layout impact) */ body::before{ content:""; position:fixed; inset:0; pointer-events:none; background: var(--app-grad); opacity:.025; z-index:-1; } html[data-bs-theme="light"] body::before{ opacity:.015; } html[data-bs-theme="dark"] body::before{ opacity:.02; } a{ color:var(--brand); text-decoration:none; } a:hover{ color:var(--brand-600); } :focus-visible{ outline:none; box-shadow: var(--focus-ring); } /* Make Bootstrap text-muted follow our token */ .text-muted{ color:var(--muted) !important; } /* Headings slightly stronger contrast but still on brand */ h1,h2,h3,h4,h5,h6{ color:var(--text); } /* ======================= BOOTSTRAP VARIABLE OVERRIDES ==================== */ :root, html[data-bs-theme="light"], html[data-bs-theme="dark"]{ --bs-body-bg: var(--surface); --bs-body-color: var(--text); --bs-border-color: var(--border); --bs-primary: var(--brand); --bs-primary-rgb: 16,185,129; /* brand glow on focus/active, no blue */ --bs-secondary: var(--slab-500); --bs-success: var(--success); --bs-info: var(--info); --bs-warning: var(--warning); --bs-danger: var(--danger); /* aligned to login's danger */ --bs-link-color: var(--brand); --bs-link-hover-color: var(--brand-600); --bs-card-bg: var(--card); --bs-card-color: var(--text); --bs-card-border-color: var(--border); --bs-card-cap-bg: var(--surface-2); --bs-table-bg: transparent; --bs-table-color: var(--text); --bs-table-border-color: var(--border); --bs-table-striped-bg: color-mix(in srgb, var(--card) 96%, var(--surface-2)); --bs-table-hover-bg: color-mix(in srgb, var(--brand) 4%, var(--card)); --bs-dropdown-bg: var(--float-surface); --bs-dropdown-color: var(--text); --bs-dropdown-border-color: var(--border); --bs-dropdown-link-color: var(--text); --bs-dropdown-link-hover-bg: color-mix(in srgb, var(--text) 4%, var(--surface-3)); --bs-modal-bg: var(--modal-surface); --bs-modal-color: var(--text); --bs-modal-border-color: var(--border); --bs-modal-header-border-color: var(--border); --bs-modal-footer-border-color: var(--border); --bs-pagination-color: var(--brand); --bs-pagination-hover-color: var(--brand-600); --bs-pagination-bg: var(--surface-2); --bs-pagination-border-color: var(--border); --bs-pagination-hover-bg: var(--surface-2); --bs-pagination-hover-border-color: var(--border); --bs-pagination-active-bg: var(--brand); --bs-pagination-active-border-color: var(--brand); --bs-btn-border-radius: .75rem; /* Toast tuning – shared for light & dark */ --bs-toast-padding-x: .95rem; --bs-toast-padding-y: .70rem; --bs-toast-border-radius: .85rem; --bs-toast-box-shadow: 0 18px 40px rgba(0,0,0,.28); } /* =============================== BUTTONS ================================= */ .btn{ border-radius:.75rem; font-weight:600; } /* Primary – full brand control (no default Bootstrap blue anywhere) */ .btn-primary{ --bs-btn-color:#fff; --bs-btn-bg: var(--brand); --bs-btn-border-color: var(--brand); --bs-btn-hover-bg: var(--brand-600); --bs-btn-hover-border-color: var(--brand-600); --bs-btn-focus-shadow-rgb: 16,185,129; --bs-btn-active-bg: var(--brand-deep); --bs-btn-active-border-color: var(--brand-deep); --bs-btn-disabled-bg: color-mix(in srgb, var(--brand) 40%, var(--surface-2)); --bs-btn-disabled-border-color: color-mix(in srgb, var(--brand) 40%, var(--surface-2)); --bs-btn-disabled-color: rgba(255,255,255,.75); } .btn-primary:focus-visible{ outline:none; box-shadow: var(--focus-ring); } .btn-outline-primary{ --bs-btn-color: var(--brand); --bs-btn-border-color: var(--brand); --bs-btn-hover-bg: var(--brand); --bs-btn-hover-color:#fff; --bs-btn-hover-border-color: var(--brand); } .btn-outline-secondary{ --bs-btn-color: var(--muted); --bs-btn-border-color: var(--border); --bs-btn-hover-bg: var(--surface-2); --bs-btn-hover-color: var(--text); --bs-btn-hover-border-color: var(--border); } /* Brand helpers used in quick actions */ .btn-brand{ background:var(--brand); border-color:var(--brand); color:#fff; } .btn-brand:hover{ background:var(--brand-600); border-color:var(--brand-600); } .btn-slab-dark{ background:#18181b; border-color:#18181b; color:#fff; } html[data-bs-theme="dark"] .btn-slab-dark{ background:#2a2f36; border-color:#2a2f36; } .btn-slab-dark:hover{ filter:brightness(1.08); } /* Button micro-polish */ .btn:active{ transform: translateY(.5px); } .btn .spinner-border{ vertical-align: -2px; } /* Pill badges used across app */ .badge{ border-radius:999px; } /* ============================== BADGE SYSTEM ============================= */ /* Optional “award” look: soft chip + readable in both themes */ .bm-badge{ display:inline-flex; align-items:center; gap:.35rem; padding:.18rem .60rem; border-radius:999px; border:1px solid var(--hairline); background: color-mix(in srgb, var(--surface) 82%, var(--surface-2)); color: var(--text); font-weight:700; font-size:.75rem; line-height:1.25; letter-spacing:.01em; white-space:nowrap; } .bm-badge-dot{ width:.45rem; height:.45rem; border-radius:999px; background:var(--muted); flex:0 0 auto; } /* Status chips (use if you want later without breaking existing badges) */ .bm-badge--requested{ background: color-mix(in srgb, var(--surface) 86%, var(--warning)); border-color: color-mix(in srgb, var(--border) 70%, var(--warning)); } .bm-badge--requested .bm-badge-dot{ background: var(--warning); } .bm-badge--open{ background: color-mix(in srgb, var(--surface) 86%, var(--slab-500)); border-color: color-mix(in srgb, var(--border) 70%, var(--slab-500)); } .bm-badge--open .bm-badge-dot{ background: var(--slab-400); } .bm-badge--approved, .bm-badge--closed{ background: color-mix(in srgb, var(--surface) 86%, var(--success)); border-color: color-mix(in srgb, var(--border) 70%, var(--success)); } .bm-badge--approved .bm-badge-dot, .bm-badge--closed .bm-badge-dot{ background: var(--success); } /* Priority chips */ .bm-badge--high{ background: color-mix(in srgb, var(--surface) 86%, var(--danger)); border-color: color-mix(in srgb, var(--border) 70%, var(--danger)); } .bm-badge--high .bm-badge-dot{ background: var(--danger); } .bm-badge--normal{ background: color-mix(in srgb, var(--surface) 92%, var(--brand)); border-color: color-mix(in srgb, var(--border) 70%, var(--brand)); } .bm-badge--normal .bm-badge-dot{ background: var(--brand); } .bm-badge--low{ background: color-mix(in srgb, var(--surface) 88%, var(--slab-400)); border-color: color-mix(in srgb, var(--border) 70%, var(--slab-400)); } .bm-badge--low .bm-badge-dot{ background: var(--slab-400); } /* ================================ ALERTS ================================ */ .alert-primary { --bs-alert-bg: color-mix(in srgb, var(--brand) 12%, var(--surface)); --bs-alert-border-color: var(--brand); --bs-alert-color: var(--text); } .alert-success { --bs-alert-bg: color-mix(in srgb, var(--success) 12%, var(--surface)); --bs-alert-border-color: var(--success); --bs-alert-color: var(--text); } .alert-info { /* keep calm + readable */ --bs-alert-bg: color-mix(in srgb, var(--info) 12%, var(--surface)); --bs-alert-border-color: var(--info); --bs-alert-color: var(--text); } .alert-warning { --bs-alert-bg: color-mix(in srgb, var(--warning) 18%, var(--surface)); --bs-alert-border-color: var(--warning); --bs-alert-color: #171717; } html[data-bs-theme="dark"] .alert-warning{ --bs-alert-color: var(--text); } .alert-danger { --bs-alert-bg: color-mix(in srgb, var(--danger) 12%, var(--surface)); --bs-alert-border-color: var(--danger); --bs-alert-color: var(--text); } /* ============================= FORMS & INPUTS ============================ */ .form-control, .form-select, .input-group-text, .form-control:disabled, .form-select:disabled{ color:var(--text); background-color:var(--field-bg); border-color:var(--field-border); } .input-group-text{ background:var(--field-chip-bg); } .form-control::placeholder{ color: color-mix(in srgb, var(--text) 55%, transparent); } .form-control:focus, .form-select:focus{ background-color:var(--field-bg); border-color:var(--brand); box-shadow: var(--focus-ring); } .form-check-input:checked{ background-color:var(--brand); border-color:var(--brand); } .form-check-input:focus{ box-shadow: var(--focus-ring); } /* Date/time inputs: ensure icon visible in dark mode */ html[data-bs-theme="dark"] input[type="date"], html[data-bs-theme="dark"] input[type="datetime-local"]{ color-scheme: dark; } html[data-bs-theme="light"] input[type="date"], html[data-bs-theme="light"] input[type="datetime-local"]{ color-scheme: light; } /* Make native date/time pickers follow brand accent where supported */ input[type="date"], input[type="time"], input[type="datetime-local"]{ accent-color: var(--brand); } /* Controls sizing harmony */ .form-control:not(textarea), .input-group > .form-control:not(textarea), .form-select{ min-height:var(--ctrl-h); padding:var(--ctrl-pad-y) var(--ctrl-pad-x); border-radius:var(--ctrl-radius); } .input-group-text, .input-group .btn{ min-height:var(--ctrl-h); padding:0 var(--ctrl-pad-x); border-color:var(--field-border); } /* Validation helpers */ .validation-message{ color:#ef4444; font-size:.85rem; margin-top:.25rem; } .is-invalid{ border-color:#ef4444!important; background-image:none!important; } /* Make disabled checkboxes readable in permissions table */ .form-check-input:disabled{ opacity:.6; cursor:not-allowed; } /* ====================== SELECT2 (ENHANCED SELECT DROPDOWNS) ============== */ /* Base container: follow full-width form controls */ .select2-container{ width:100% !important; font-size:14px; } /* Single select appearance */ .select2-container--default .select2-selection--single{ display:flex; align-items:center; min-height:var(--ctrl-h); padding:var(--ctrl-pad-y) var(--ctrl-pad-x); background-color:var(--field-bg); border:1px solid var(--field-border); border-radius:var(--ctrl-radius); } /* Rendered text inside single select */ .select2-container--default .select2-selection--single .select2-selection__rendered{ color:var(--text); line-height:1.3; padding-left:0; padding-right:26px; } /* Arrow alignment and color */ .select2-container--default .select2-selection--single .select2-selection__arrow{ height:100%; right:10px; } .select2-container--default .select2-selection--single .select2-selection__arrow b{ border-color:var(--muted) transparent transparent transparent; } /* Disabled state */ .select2-container--default.select2-container--disabled .select2-selection--single{ background-color:var(--field-bg); border-color:var(--field-border); opacity:.65; } /* Focus state: mirror .form-select focus */ .select2-container--default.select2-container--focus .select2-selection--single, .select2-container--default.select2-container--focus .select2-selection--multiple{ border-color:var(--brand); box-shadow:var(--focus-ring); } /* Multiple select appearance */ .select2-container--default .select2-selection--multiple{ min-height:var(--ctrl-h); padding:4px 6px; background-color:var(--field-bg); border:1px solid var(--field-border); border-radius:var(--ctrl-radius); display:flex; align-items:center; flex-wrap:wrap; } /* Multiple select chips */ .select2-container--default .select2-selection--multiple .select2-selection__choice{ background-color:var(--field-chip-bg); border:1px solid var(--field-border); color:var(--text); border-radius:999px; padding:2px 8px; margin-top:2px; margin-bottom:2px; font-size:.8rem; } /* Remove icon inside chip */ .select2-container--default .select2-selection--multiple .select2-selection__choice__remove{ margin-right:4px; color:var(--muted); } .select2-container--default .select2-selection--multiple .select2-selection__choice__remove:hover{ color:var(--text); } /* Search field inside Select2 */ .select2-container--default .select2-search--dropdown .select2-search__field{ padding:6px 8px; background-color:var(--field-bg); border:1px solid var(--field-border); border-radius:.5rem; color:var(--text); } .select2-container--default .select2-search--dropdown .select2-search__field:focus{ outline:none; border-color:var(--brand); box-shadow:var(--focus-ring); } /* Dropdown panel */ .select2-dropdown{ background-color:var(--float-surface); border:1px solid var(--border); box-shadow:var(--shadow-lg); border-radius: .85rem; overflow:hidden; } /* Results list */ .select2-results__option{ padding:8px 10px; font-size:.875rem; color:var(--text); } /* Hover / highlight state */ .select2-container--default .select2-results__option--highlighted.select2-results__option--selectable{ background-color:color-mix(in srgb, var(--brand) 16%, var(--surface)); color:var(--text); } /* Selected state */ .select2-container--default .select2-results__option--selected{ background-color:color-mix(in srgb, var(--brand) 10%, var(--surface)); } /* Placeholder text */ .select2-container .select2-selection__placeholder{ color: color-mix(in srgb, var(--text) 55%, transparent); } /* CRITICAL: ensure Select2 dropdown is visible above cards/modals/offcanvas */ .select2-container--open{ z-index: 2060; /* above Bootstrap modal (1055) + dropdowns (1000) */ } /* Compact mode for small controls if needed */ .select2-container--sm .select2-selection--single{ min-height:36px; padding:6px 10px; } /* Country option template helpers (Signup Select2 templates) */ .bm-country-option{ display:flex; align-items:center; gap:8px; min-width:0; } .bm-country-flag{ flex:0 0 auto; width:18px; height:12px; border-radius:2px; overflow:hidden; border:1px solid var(--border); background:var(--surface-2); } .bm-country-name{ flex:1 1 auto; min-width:0; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; } .bm-country-dial{ flex:0 0 auto; color:var(--muted); font-size:.85em; } /* ============================ CARDS & TABLES ============================= */ .card{ background:var(--card); color:var(--text); border-color:var(--border); border-radius:var(--radius-card); box-shadow: var(--shadow-sm); } .card:hover{ box-shadow: var(--elev); transition: box-shadow .18s ease; } /* BioMaint – clip card contents to rounded corners (fix tables in cards) */ .card.bm-card{ overflow:hidden; /* makes header + table follow the curve */ } .card .card-header, .card .card-footer{ background: color-mix(in srgb, var(--surface-3) 82%, var(--surface-2)); border-color:var(--border); } .card-lite{ background:var(--surface-3); border:1px solid var(--border); } /* Tables */ .table{ color:var(--text); } .table> :not(caption)>*>*{ background-color:transparent; border-color:var(--border); } /* Make “table-light” headers look correct in both themes */ .table thead.table-light, .table-light>*>*{ background: color-mix(in srgb, var(--surface-3) 84%, var(--surface-2)) !important; color:var(--text)!important; border-color:var(--border)!important; } /* Subtle hover for rows */ .table-hover>tbody>tr:hover>*{ background-color: var(--bs-table-hover-bg) !important; } /* Premium separators + zebra that works in both modes */ .table tbody tr{ border-bottom:1px solid var(--hairline); } .table tbody tr:last-child{ border-bottom:0; } .table tbody tr:nth-child(2n) > *{ background-color: color-mix(in srgb, var(--card) 97%, var(--surface-2)) !important; } /* Table header typography */ .table thead th{ font-weight:800; letter-spacing:.06em; font-size:.72rem; text-transform:uppercase; } /* Table cell readability */ .table td{ font-size:.92rem; } .table td .small{ font-size:.82rem; } /* ============================== WORK REQUESTS ============================ */ /* Work Request list follows the same premium table rhythm as Work Orders, while keeping request-specific columns and equipment lookup styling. */ .bm-wr-shell{ overflow:hidden; } .bm-wr-table-wrap{ overflow-x:auto; overscroll-behavior-x:contain; } .bm-wr-table{ width:100%; min-width:1360px; margin:0; table-layout:fixed; } .bm-wr-table > :not(caption)>*>*{ vertical-align:top; } .bm-wr-table td, .bm-wr-table th{ padding-top:.75rem; padding-bottom:.75rem; } .bm-wr-table .bm-badge{ white-space:nowrap; } .bm-wr-col-wr{ width:150px; } .bm-wr-col-status{ width:128px; } .bm-wr-col-priority{ width:102px; } .bm-wr-col-requester{ width:168px; } .bm-wr-col-site{ width:240px; } .bm-wr-col-equipment{ width:240px; } .bm-wr-col-problem{ width:220px; } .bm-wr-col-received{ width:168px; } .bm-wr-col-assigned{ width:156px; } .bm-wr-col-wos{ width:116px; } .bm-wr-col-actions{ width:60px; } .bm-wr-col-mfgmodel{ width:200px; } .bm-wr-col-serial{ width:140px; } .bm-wr-col-deptloc{ width:180px; } .bm-wr-col-select{ width:130px; } .bm-wr-col-siteloc{ width:280px; } .bm-wr-col-warranty{ width:180px; } .bm-wr-col-mfgserial{ width:260px; } .bm-wr-table thead th{ font-weight:700; letter-spacing:.05em; font-size:.70rem; text-transform:uppercase; } .bm-wr-table--colorful.table-hover>tbody>tr:hover>*{ background-color: color-mix(in srgb, var(--brand) 3%, var(--bs-table-hover-bg)) !important; } .bm-row-glow.table-hover>tbody>tr:hover>*{ box-shadow:none !important; } .bm-wr-code, .bm-wr-requester-text, .bm-wr-site-sub, .bm-wr-assigned-text, .bm-wr-wo-text, .bm-wr-wo-sub{ overflow-wrap:anywhere; line-height:1.35; } .bm-wr-equip-title, .bm-wr-equip-meta{ overflow-wrap:anywhere; line-height:1.35; display:-webkit-box; -webkit-box-orient:vertical; overflow:hidden; white-space:normal; } .bm-wr-equip-title{ -webkit-line-clamp:2; line-clamp:2; } .bm-wr-equip-meta{ -webkit-line-clamp:1; line-clamp:1; } .bm-wr-problem-text{ display:-webkit-box; -webkit-box-orient:vertical; -webkit-line-clamp:2; line-clamp:2; overflow:hidden; white-space:normal; line-height:1.4; } .bm-wr-due-text{ line-height:1.3; } .bm-wr-action-btn{ width:36px; height:36px; padding:0; display:inline-flex; align-items:center; justify-content:center; border-radius:12px; } /* Equipment lookup results shell (keeps the list premium inside the card) */ .bm-wr-equip-results{ border:1px solid var(--border); border-radius: var(--radius-soft); overflow:hidden; background: var(--surface-2); } /* Equipment selected summary (no inline styles in markup) */ .bm-wr-equip-summary{ position:relative; overflow:hidden; background: color-mix(in srgb, var(--brand) 10%, transparent); border:1px solid color-mix(in srgb, var(--border) 70%, var(--brand)) !important; border-radius: var(--radius-soft); box-shadow: var(--shadow-sm); } .bm-wr-equip-summary::after{ content:""; position:absolute; inset:-20px; pointer-events:none; background: radial-gradient(520px circle at 18% 18%, color-mix(in srgb, var(--brand) 22%, transparent) 0%, transparent 58%), radial-gradient(420px circle at 92% 10%, color-mix(in srgb, var(--warning) 14%, transparent) 0%, transparent 62%); opacity:.75; } .bm-wr-equip-summary > *{ position:relative; } .bm-wr-equip-summary-ico{ width:44px; height:44px; border-radius: 12px; background: color-mix(in srgb, var(--brand) 18%, transparent); border:1px solid color-mix(in srgb, var(--border) 75%, transparent); } @media (max-width: 1399.98px){ .bm-wr-table{ min-width:1240px; } .bm-wr-col-wr{ width:142px; } .bm-wr-col-status{ width:122px; } .bm-wr-col-priority{ width:96px; } .bm-wr-col-requester{ width:156px; } .bm-wr-col-site{ width:224px; } .bm-wr-col-equipment{ width:220px; } .bm-wr-col-problem{ width:190px; } .bm-wr-col-received{ width:160px; } .bm-wr-col-assigned{ width:148px; } .bm-wr-col-wos{ width:108px; } } @media (max-width: 1199.98px){ .bm-wr-table{ min-width:1040px; table-layout:auto; } } /* =============================== WORK ORDERS ============================== */ /* Work Order list uses its own execution-first table tuning. Keep these separate from Work Request styles to avoid collisions. */ .bm-wo-shell{ overflow:hidden; } .bm-wo-table-wrap{ overflow-x:auto; overscroll-behavior-x:contain; } .bm-wo-table{ width:100%; table-layout:fixed; } .bm-wo-table > :not(caption)>*>*{ vertical-align:top; } .bm-wo-table td, .bm-wo-table th{ padding-top:.75rem; padding-bottom:.75rem; } .bm-wo-table .bm-badge{ white-space:nowrap; } .bm-wo-col-wo{ width:150px; } .bm-wo-col-status{ width:128px; } .bm-wo-col-priority{ width:102px; } .bm-wo-col-type{ width:132px; } .bm-wo-col-due{ width:168px; } .bm-wo-col-assigned{ width:156px; } .bm-wo-col-actions{ width:60px; } .bm-wo-code, .bm-wo-site-sub, .bm-wo-equip-title, .bm-wo-equip-meta, .bm-wo-assigned-text, .bm-wo-execution-text, .bm-wo-execution-sub{ overflow-wrap:anywhere; line-height:1.35; } .bm-wo-problem-text{ display:-webkit-box; -webkit-box-orient:vertical; -webkit-line-clamp:2; line-clamp:2; overflow:hidden; white-space:normal; line-height:1.4; } .bm-wo-due-text{ line-height:1.3; } .bm-wo-action-btn{ width:36px; height:36px; padding:0; display:inline-flex; align-items:center; justify-content:center; border-radius:12px; } @media (max-width: 1399.98px){ .bm-wo-col-wo{ width:142px; } .bm-wo-col-status{ width:122px; } .bm-wo-col-priority{ width:96px; } .bm-wo-col-type{ width:124px; } .bm-wo-col-due{ width:160px; } .bm-wo-col-assigned{ width:148px; } } @media (max-width: 1199.98px){ .bm-wo-table{ table-layout:auto; } } .bm-wo-request-card .card-body{ height:100%; } .bm-wo-request-grid .fw-semibold, .bm-wo-request-grid .text-muted.small{ overflow-wrap:anywhere; } .bm-wo-request-notes{ white-space:pre-wrap; line-height:1.45; } /* Utility: avoid inline style="width:auto; min-width:80px" */ .bm-btn-minw-80{ width:auto; min-width:80px; } /* ================= DROPDOWN / MODAL / TOOLTIP / TOAST =================== */ .dropdown-menu{ background:var(--float-surface); color:var(--text); border-color:var(--border); box-shadow:var(--shadow-lg); border-radius: .9rem; padding:.35rem; } .dropdown-item{ border-radius:.7rem; padding:.55rem .65rem; } @supports not (color: color-mix(in srgb, white 50%, black 50%)){ .dropdown-item:hover{ background: color-mix(in srgb, var(--surface-2) 88%, var(--surface)); } } .dropdown-item:hover{ background: color-mix(in srgb, var(--brand) 9%, var(--surface-3)); } .dropdown-item:focus-visible{ outline:none; box-shadow: var(--focus-ring); } .modal-content{ background:var(--modal-surface); color:var(--text); border-color:var(--border); border-radius: 1rem; overflow:hidden; box-shadow: var(--elev-lg); } .modal-header{ background: color-mix(in srgb, var(--surface-3) 80%, var(--modal-surface)); } .modal-footer{ background: color-mix(in srgb, var(--surface-3) 80%, var(--modal-surface)); } .modal-header:first-child{ border-top-left-radius: calc(1rem - 1px); border-top-right-radius: calc(1rem - 1px); } .modal-footer:last-child{ border-bottom-left-radius: calc(1rem - 1px); border-bottom-right-radius: calc(1rem - 1px); } .modal-backdrop, .offcanvas-backdrop{ background: var(--modal-backdrop-bg); opacity: 1 !important; -webkit-backdrop-filter: blur(var(--backdrop-blur)) saturate(var(--backdrop-saturate)); backdrop-filter: blur(var(--backdrop-blur)) saturate(var(--backdrop-saturate)); } .modal-backdrop.show, .offcanvas-backdrop.show{ opacity: 1 !important; } .tooltip .tooltip-inner{ background:#2a2f36; } /* Toast – base Bootstrap toast (if ever used) */ .toast{ background: var(--float-surface); color: var(--text); border-color: var(--border); } .offcanvas{ background:var(--modal-surface); color:var(--text); border-color:var(--border); } .offcanvas-header, .offcanvas-footer{ background: color-mix(in srgb, var(--surface-3) 80%, var(--modal-surface)); border-color: var(--border); } /* ================================ TOAST ================================= */ /* Host matches login positioning: centered at top, above app shell */ [data-bm-toast-container]{ position:fixed; top:16px; left:0; right:0; display:flex; justify-content:center; align-items:flex-start; z-index:1080; pointer-events:none; } [data-bm-toast-container] .bm-toast{ pointer-events:auto; } /* Single toast item – identical to login .bm-toast look */ .bm-toast{ display:flex; align-items:center; gap:10px; min-width:min(92vw, 520px); max-width:92vw; margin:0 auto .5rem auto; padding:12px 14px; border-radius:12px; border:1px solid var(--border); background:var(--float-surface); color:var(--text); box-shadow:var(--shadow-2); animation: bmToastIn .28s ease-out both, bmToastHold 3.4s linear .28s both; } /* Body layout */ .bm-toast-body{ flex: 1 1 auto; font-size: 14px; line-height: 1.35; } /* Icon + close button copied from login */ .bm-toast-icon{ flex: 0 0 auto; display: flex; align-items: center; justify-content: center; width: 22px; height: 22px; } .bm-toast-icon i{ font-size: 18px; display: inline-block; } .bm-toast-close{ flex: 0 0 auto; margin-left: auto; padding: 4px; background: transparent; border: 0; color: var(--muted); box-shadow: none; cursor: pointer; } /* Kind-specific tints – now exactly like login toast */ .bm-toast-danger{ background: color-mix(in srgb, var(--surface) 88%, var(--danger)); border-color: color-mix(in srgb, var(--border) 70%, var(--danger)); } .bm-toast-danger .bm-toast-icon i{ color: var(--danger); } .bm-toast-info{ background: color-mix(in srgb, var(--surface) 88%, var(--accent)); border-color: color-mix(in srgb, var(--border) 70%, var(--accent)); } .bm-toast-info .bm-toast-icon i{ color: var(--accent); } .bm-toast-success{ background: color-mix(in srgb, var(--surface) 88%, var(--success)); border-color: color-mix(in srgb, var(--border) 70%, var(--success)); } .bm-toast-success .bm-toast-icon i{ color: var(--success); } .bm-toast-warning{ background: color-mix(in srgb, var(--surface) 90%, var(--warning)); border-color: color-mix(in srgb, var(--border) 70%, var(--warning)); } .bm-toast-warning .bm-toast-icon i{ color: var(--warning); } /* Entrance animation – copied from login */ @keyframes bmToastIn{ from{ opacity: 0; transform: translateY(-6px); } to{ opacity: 1; transform: translateY(0); } } @keyframes bmToastHold{ from{ opacity:1; } to{ opacity:1; } } /* Code / mark */ code,pre{ background:var(--surface-2); border:1px solid var(--border); border-radius:.375rem; } mark{ background: color-mix(in srgb, var(--brand) 28%, transparent); } /* ============================ APP LAYOUT CHROME ========================== */ .app-header{ position:sticky; top:0; z-index:1045; height:var(--app-header-h); background:var(--surface-2); border-bottom:1px solid var(--border); box-shadow:0 1px 0 rgba(0,0,0,.03); isolation:isolate; } .app-shell{ display:flex; width:100%; min-height:calc(100dvh - var(--app-header-h)); height:calc(100dvh - var(--app-header-h)); align-items:stretch; } .app-main{ flex:1 1 auto; min-width:0; width:0; } .subhdr{ height:var(--subhdr-h); background:var(--surface); border-bottom:1px solid var(--border); } .app-scroll{ height:calc(100% - var(--subhdr-h)); min-height:0; overflow:auto; overflow-x:hidden; } /* ================================ TOPBAR ================================ */ .bm-topbar{ position:relative; z-index:2; min-height:var(--app-header-h); background:transparent; } .bm-topbar__inner{ min-height:var(--app-header-h); flex-wrap:nowrap; } .bm-topbar__brand{ min-width:0; color:var(--brand); } .bm-topbar__brand:hover{ color:var(--brand-600); } .bm-topbar__brand-text{ display:block; max-width:100%; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; font-size:1.125rem; font-weight:700; } .bm-topbar__actions{ min-width:0; flex:0 0 auto; } .bm-topbar__icon, .bm-topbar__account-btn{ width:40px; min-width:40px; height:40px; border-radius:999px; display:inline-flex; align-items:center; justify-content:center; } .bm-topbar__icon{ color:var(--text); text-decoration:none; } .bm-topbar__icon:hover, .bm-topbar__icon:focus-visible, .bm-topbar__account-btn:hover, .bm-topbar__account-btn:focus-visible{ color:var(--text); background:color-mix(in srgb, var(--brand) 5%, var(--surface)); } .bm-topbar__icon--outline{ border-color:var(--border); background:color-mix(in srgb, var(--surface-2) 78%, var(--card)); } .bm-topbar__icon--outline:hover, .bm-topbar__icon--outline:focus-visible{ border-color:color-mix(in srgb, var(--brand) 32%, var(--border)); background:color-mix(in srgb, var(--brand) 5%, var(--surface)); } .bm-topbar__account{ flex:0 0 auto; } .bm-topbar__account-btn{ width:auto; min-width:0; padding:.25rem .25rem .25rem .35rem; text-decoration:none; } .bm-topbar__avatar{ flex:0 0 auto; } .bm-topbar__menu{ min-width:17rem; max-width:min(22rem, calc(100vw - 1rem)); margin-top:.55rem; z-index:1055; } /* ================================ SIDEBAR ================================ */ /* Desktop: dedicated column. Mobile/tablet: slide-over drawer. */ .app-sidebar{ width:18rem; min-width:18rem; flex:0 0 18rem; flex-shrink:0; background:var(--sidebar-bg); border-right:1px solid var(--sidebar-border); height:calc(100dvh - var(--app-header-h)); position:sticky; top:var(--app-header-h); left:0; overflow:auto; transform:none; transition:transform .22s ease, box-shadow .22s ease; will-change:transform; z-index:1040; } .bm-sidebar-backdrop{ position:fixed; inset:var(--app-header-h) 0 0 0; background:var(--sidebar-backdrop-bg); opacity:0; visibility:hidden; pointer-events:none; transition:opacity .22s ease, visibility .22s ease; z-index:1038; -webkit-backdrop-filter: blur(var(--backdrop-blur)) saturate(var(--backdrop-saturate)); backdrop-filter: blur(var(--backdrop-blur)) saturate(var(--backdrop-saturate)); } .bm-sidebar-backdrop.is-visible{ opacity:1; visibility:visible; pointer-events:auto; } /* Scrollbar only for sidebar */ .app-sidebar::-webkit-scrollbar{ width:10px; height:10px; } .app-sidebar::-webkit-scrollbar-thumb{ background:var(--sb-thumb); border-radius:6px; } .app-sidebar::-webkit-scrollbar-track{ background:var(--sb-track); } /* Section label */ .nav-label{ font-size:.8rem; letter-spacing:.06em; text-transform:uppercase; color:var(--muted); } /* Group row (no button chrome) */ .side-row{ width:100%; display:flex; align-items:center; gap:.5rem; padding:var(--pady) var(--padx); border-radius:.6rem; color:var(--text); background:transparent; border:0; text-align:left; cursor:pointer; } .side-row:hover, .side-row:focus-visible{ background:var(--side-hover); color:var(--menu-active-text); } /* Submenu links */ .side-link{ width:100%; text-align:left; border:0; background:transparent; color:var(--text); padding:var(--pady) var(--padx); border-radius:.6rem; } .side-link:hover, .side-link:focus-visible{ background:var(--side-hover); color:var(--menu-active-text); } /* Active submenu highlight – exact mock tint */ .menu-active{ background:var(--menu-active-bg) !important; color:var(--menu-active-text) !important; } /* Caret only when expanded (JS toggles .d-none) */ .caret-open{ margin-left:auto; color:var(--muted); } .caret-open.d-none{ display:none !important; } /* Smoother collapse; keep scroll in sidebar */ .collapse[data-group]{ will-change: height; } .collapse[data-group].show{ overflow:visible; } /* ============================== TOP BAR UTILS ============================ */ .topbtn{ padding:.35rem .6rem; border-radius:.6rem; border:1px solid transparent; background:transparent; color:var(--text); } .topbtn:hover{ background:var(--side-hover); border-color: var(--hairline); } /* ========================== OPTIONAL KPI CARDS =========================== */ .app-stat{ background:var(--card); border:1px solid var(--border); border-radius:14px; padding:14px; box-shadow: var(--shadow-sm); } .app-stat-ico{ width:36px; height:36px; border-radius:10px; display:grid; place-items:center; font-size:18px; background:rgba(16,185,129,.12); color:var(--brand); } /* ===================== DASHBOARD / OVERVIEW BUILDING BLOCKS ============= */ .dash-kpi-grid{ display:grid; grid-template-columns:repeat(auto-fit,minmax(210px,1fr)); gap:1rem; } .dash-kpi-card{ border-radius:14px; background:var(--card); border:1px solid var(--border); padding:14px 14px 12px; box-shadow:var(--shadow-sm); } .dash-kpi-label{ font-size:.8rem; text-transform:uppercase; letter-spacing:.09em; color:var(--muted); margin-bottom:.15rem; } .dash-kpi-value{ font-size:1.75rem; font-weight:800; } .dash-kpi-sub{ font-size:.8rem; color:var(--muted); } .dash-kpi-chip{ font-size:.75rem; padding:.15rem .6rem; border-radius:999px; background:var(--field-chip-bg); color:var(--muted); } .dash-section{ border-radius:14px; background:var(--card); border:1px solid var(--border); padding:14px 16px; box-shadow:var(--shadow-sm); } .dash-section-header{ display:flex; align-items:center; justify-content:space-between; margin-bottom:.35rem; } .dash-section-title{ font-size:.85rem; text-transform:uppercase; letter-spacing:.09em; color:var(--muted); } .dash-section-actions{ font-size:.8rem; } .table-sm-tight> :not(caption)>*>*{ padding-top:.35rem; padding-bottom:.35rem; } .dash-empty{ font-size:.85rem; color:var(--muted); } .dash-pill-priority{ display:inline-flex; align-items:center; gap:.25rem; padding:.1rem .5rem; border-radius:999px; font-size:.75rem; background:rgba(234,138,17,.12); color:#ea8a11; } .dash-pill-priority i{ font-size:.8rem; } .dash-pill-status{ display:inline-flex; align-items:center; padding:.1rem .5rem; border-radius:999px; font-size:.75rem; background:rgba(16,185,129,.12); color:var(--brand); } .dash-dot{ width:.45rem; height:.45rem; border-radius:999px; background:var(--brand); flex-shrink:0; } /* ============================== MISC QUALITY ============================= */ .pagination .page-link{ border-color:var(--border); } /* Pagination “award” look (works for your table-bottom pager too) */ .pagination{ gap:.35rem; } .pagination .page-item .page-link{ border-radius:.85rem; padding:.45rem .75rem; background: var(--surface-2); color: var(--text); border:1px solid var(--border); box-shadow: none; } .pagination .page-item .page-link:hover{ background: var(--surface-2); border-color: color-mix(in srgb, var(--border) 75%, var(--brand)); } .pagination .page-item.active .page-link{ background: var(--brand); border-color: var(--brand); color:#fff; box-shadow: 0 10px 24px color-mix(in srgb, var(--brand) 28%, transparent); } .pagination .page-item.disabled .page-link{ opacity:.6; } .hr-soft{ border-color:var(--border); opacity:.8; } .bm-avatar{ width:28px; height:28px; border-radius:999px; display:inline-flex; align-items:center; justify-content:center; font-size:.75rem; font-weight:700; background:var(--brand); color:#fff; } /* ============================= ATTACHMENTS UX ============================ */ /* WorkRequest attachments dropzone + list (central theme, no inline CSS) */ .bm-attach-drop{ display:block; cursor:pointer; border: 1px dashed color-mix(in srgb, var(--border) 80%, transparent); background: color-mix(in srgb, var(--card) 92%, transparent); border-radius: 14px; padding: 12px; transition: border-color .15s ease, background-color .15s ease, transform .15s ease; } .bm-attach-drop:hover{ border-color: color-mix(in srgb, var(--brand) 55%, var(--border)); background: color-mix(in srgb, var(--brand) 8%, var(--card)); transform: translateY(-1px); } /* JS can toggle this class during dragover */ .bm-attach-drop.is-dragover{ border-color: var(--brand); background: color-mix(in srgb, var(--brand) 10%, var(--card)); box-shadow: 0 0 0 .15rem color-mix(in srgb, var(--brand) 35%, transparent); } .bm-attach-drop__inner{ display:flex; align-items:center; justify-content:space-between; gap:12px; } .bm-attach-drop__icon{ width:44px; height:44px; border-radius:12px; display:flex; align-items:center; justify-content:center; background: color-mix(in srgb, var(--brand) 14%, transparent); flex:0 0 auto; } .bm-attach-drop__icon i{ font-size: 20px; } .bm-attach-drop__text{ min-width:0; display:flex; flex-direction:column; gap:2px; flex:1 1 auto; } .bm-attach-drop__title{ font-weight: 600; line-height: 1.2; color: var(--text); } .bm-attach-drop__sub{ font-size: 12px; line-height: 1.2; color: var(--muted); } .bm-attach-drop__meta{ flex:0 0 auto; display:flex; align-items:center; gap:8px; } /* Attachment item row */ .bm-attach-item{ border: 1px solid var(--border); border-radius: 14px; background: color-mix(in srgb, var(--card) 96%, transparent); padding: 10px; display:flex; align-items:center; gap:12px; transition: border-color .15s ease, background-color .15s ease, transform .15s ease; } .bm-attach-item:hover{ border-color: color-mix(in srgb, var(--brand) 45%, var(--border)); background: color-mix(in srgb, var(--brand) 6%, var(--card)); transform: translateY(-1px); } /* Thumbnail */ .bm-attach-thumb{ width:52px; height:52px; border-radius:12px; border: 1px solid var(--border); background: color-mix(in srgb, var(--surface) 55%, var(--card)); display:flex; align-items:center; justify-content:center; overflow:hidden; position:relative; flex:0 0 auto; } .bm-attach-thumb__img{ width:100%; height:100%; object-fit:cover; display:block; } .bm-attach-thumb__icon{ width:100%; height:100%; display:flex; align-items:center; justify-content:center; background: color-mix(in srgb, var(--surface) 72%, var(--card)); } .bm-attach-ext{ font-weight: 800; letter-spacing: .08em; font-size: 11px; color: color-mix(in srgb, var(--text) 85%, transparent); } /* Attachment thumb progress ring overlay (CSP-safe, no JS-injected CSS) Markup is in WorkRequest.cshtml template: - [data-bm-attach-thumb-overlay="1"] contains with and . JS only toggles d-none + updates stroke-dashoffset and data-bm-attach-thumb-spin. */ .bm-attach-thumb [data-bm-attach-thumb-overlay="1"]{ position:absolute; inset:0; z-index:5; display:flex; align-items:center; justify-content:center; pointer-events:none; } .bm-attach-thumb [data-bm-attach-thumb-overlay="1"] .bm-attach-ring{ width:40px; height:40px; display:block; transform: rotate(-90deg); filter: drop-shadow(0 10px 16px var(--bm-attach-ring-shadow)); } .bm-attach-thumb [data-bm-attach-thumb-overlay="1"][data-bm-attach-thumb-spin="1"] .bm-attach-ring{ animation: bmAttachRingSpin 1.05s linear infinite; } @keyframes bmAttachRingSpin{ from{ transform: rotate(-90deg); } to{ transform: rotate(270deg); } } .bm-attach-ring-track{ fill: transparent; stroke: var(--bm-attach-ring-track); stroke-width: 3.5; } .bm-attach-ring-bar{ fill: transparent; stroke: var(--bm-attach-ring); stroke-width: 3.5; stroke-linecap: round; transition: stroke-dashoffset .12s linear; } /* Status icon beside size (shown only when Uploaded) */ .bm-attach-status-ico{ display:inline-flex; align-items:center; justify-content:center; color: var(--brand); margin-right:.25rem; } /* Body + actions */ .bm-attach-body{ min-width:0; flex:1 1 auto; } .bm-attach-name{ font-weight: 600; max-width: 100%; } .bm-attach-meta{ color: var(--muted); } .bm-attach-actions{ flex:0 0 auto; display:flex; gap:8px; align-items:center; } /* Progress */ .bm-attach-progress{ height: 6px; border-radius: 999px; background: color-mix(in srgb, var(--surface) 70%, var(--card)); overflow:hidden; } .bm-attach-progress .progress-bar{ background-color: var(--brand); } /* Upload hint panel */ .bm-attach-uploadhint{ border: 1px solid color-mix(in srgb, var(--border) 80%, transparent); border-radius: 12px; background: color-mix(in srgb, var(--card) 94%, transparent); padding: 10px 12px; } /* ====================== DIALOG TABS (Roles / Users modals) ================= */ .bm-dialog-tabs{ border-bottom:1px solid var(--border); } .bm-dialog-tabs .nav-link{ border-radius:0; margin-bottom:-1px; padding:.45rem .9rem; background:transparent; border:0; border-bottom:2px solid transparent; color:var(--muted); font-weight:600; display:inline-flex; align-items:center; gap:.35rem; } .bm-dialog-tabs .nav-link:hover{ color:var(--text); border-bottom-color:color-mix(in srgb,var(--brand) 35%,transparent); } .bm-dialog-tabs .nav-link.active{ color:var(--brand); border-bottom-color:var(--brand); } .bm-dialog-tabs .bm-step-circle{ width:22px; height:22px; border-radius:999px; border:1px solid var(--border); display:inline-flex; align-items:center; justify-content:center; font-size:.75rem; } .bm-dialog-tabs .nav-link.active .bm-step-circle{ background:var(--brand); border-color:var(--brand); color:#fff; } .u-no-outline:focus{ outline:none; box-shadow: none; } /* ========================= Auth – activation / reset ========================= */ /* UPDATED: do not force flex-centering on the BODY. Centering is handled by the
bootstrap flex utilities, and this keeps the page scroll-safe when Turnstile (or any extra content) increases the card height. */ .bm-auth-shell{ min-height:100vh; background:var(--surface-2); overflow-y:auto; } [data-bs-theme="light"] .bm-auth-shell{ background:#f3f4f6; } .bm-auth-card{ width:100%; max-width:460px; background:var(--card); border-radius:0.9rem; border:1px solid var(--border); box-shadow:0 22px 55px rgba(0, 0, 0, 0.55); } [data-bs-theme="light"] .bm-auth-card{ box-shadow:0 18px 45px rgba(15, 23, 42, 0.25); } .bm-auth-card-body{ padding:2rem 2rem 1.75rem; } .bm-auth-header{ color:var(--text); } .bm-auth-logo{ display:inline-flex; align-items:center; gap:0.45rem; } .bm-auth-logo-mark{ width:2.1rem; height:2.1rem; border-radius:0.75rem; display:inline-flex; align-items:center; justify-content:center; background: radial-gradient(circle at 20% 0, #6ee7b7 0, var(--brand) 40%, var(--brand-deep) 100%); color:#0f172a; font-weight:700; font-size:0.95rem; letter-spacing:0.03em; } .bm-auth-logo-word{ font-weight:600; letter-spacing:0.06em; text-transform:uppercase; font-size:0.9rem; color:var(--muted); } .bm-auth-alert{ font-size:0.875rem; } .bm-password-input-group .form-control{ border-right:0; } .bm-password-input-group .btn{ border-left:0; } /* ========================= Password strength meter ========================= */ .bm-password-meter{ position:relative; height:0.35rem; border-radius:999px; background: rgba(148, 163, 184, 0.25); overflow:hidden; } .bm-password-meter-fill{ position:absolute; inset:0; width:0; transition: width 0.25s ease, background-color 0.25s ease; } .bm-password-meter[data-strength="0"] .bm-password-meter-fill{ width:0; } .bm-password-meter[data-strength="1"] .bm-password-meter-fill{ width:33%; background:#ef4444; } .bm-password-meter[data-strength="2"] .bm-password-meter-fill, .bm-password-meter[data-strength="3"] .bm-password-meter-fill{ width:66%; background:#f59e0b; } .bm-password-meter[data-strength="4"] .bm-password-meter-fill, .bm-password-meter[data-strength="5"] .bm-password-meter-fill{ width:100%; background:var(--brand); } .bm-password-requirements{ list-style:none; padding-left:0; margin:0; } .bm-password-requirements li{ display:flex; align-items:center; gap:0.4rem; color:var(--muted); margin-bottom:0.15rem; } .bm-password-requirements li::before{ content:"●"; font-size:0.55rem; opacity:0.35; transform: translateY(-1px); } .bm-password-requirements li.is-met{ color:var(--brand); } .bm-password-requirements li.is-met::before{ opacity:1; } /* Prevent content area from shifting when sidebar expands on mobile */ @media (max-width:767.98px){ body{ overflow-y:auto; } } /* Small auth padding improvements */ @media (max-width:420px){ .bm-auth-card-body{ padding:1.6rem 1.25rem 1.25rem; } .bm-auth-brand-text{ font-size:1.15rem; } } /* ======================== PRINT & REDUCED-MOTION ========================= */ @media print{ body{ background:#fff; color:#000; } .app-sidebar{ display:none; } .subhdr{ border-color:#ddd; } } @media (prefers-reduced-motion: reduce){ *{ transition:none !important; animation-duration:.01ms !important; } } /* ============================== AUTH (LOGIN) – MOVED FROM theme.css - Keeps auth pages independent from website theme.css ============================== */ /* Legacy aliases (if any page still uses bm-login-* classes) */ .bm-login-card{ width:100%; max-width:460px; background:var(--card); border-radius:.9rem; border:1px solid var(--border); box-shadow:0 22px 55px rgba(0,0,0,.55); } [data-bs-theme="light"] .bm-login-card{ box-shadow:0 18px 45px rgba(15,23,42,.25); } .bm-login-card-body{ padding:2rem 2rem 1.75rem; } .bm-login-header{ color:var(--text); } .bm-login-logo{ display:inline-flex; align-items:center; gap:.45rem; } .bm-login-logo-mark{ width:2.1rem; height:2.1rem; border-radius:.75rem; display:inline-flex; align-items:center; justify-content:center; background: radial-gradient(circle at 20% 0, #6ee7b7 0, var(--brand) 40%, var(--brand-deep) 100%); color:#0f172a; font-weight:700; font-size:.95rem; letter-spacing:.03em; } .bm-login-logo-word{ font-weight:600; letter-spacing:.06em; text-transform:uppercase; font-size:.9rem; color:var(--muted); } .bm-login-alert{ font-size:.875rem; } /* ============================== AUTH TOAST LAYOUT FIX (Signup/Login) - Reserve space so toast appears ABOVE the card instead of overlapping it. - Applies only to pages that set body class "bm-login-wrap". ============================== */ /* UPDATED: remove hard height:100vh to keep the page scrollable when card gets taller (Turnstile). */ body.bm-login-wrap{ overflow-y:auto; } body.bm-login-wrap main{ height:auto; min-height:100vh; box-sizing:border-box; padding-top:84px; padding-bottom:18px; /* default to top-start so the card can never be cropped off-screen */ align-items:flex-start !important; } /* If viewport is tall enough, we can center the card vertically again */ @media (min-height:820px){ body.bm-login-wrap main{ align-items:center !important; } } @media (max-height: 740px){ body.bm-login-wrap main{ padding-top:72px; } } @media (max-height: 640px){ body.bm-login-wrap main{ padding-top:64px; } } /* Make sure toast is always on top (including Turnstile/iframes) */ [data-bm-toast-container]{ z-index: 2147483647 !important; } /* ============================== Cloudflare Turnstile layering safety (optional but safe) ============================== */ iframe[src*="turnstile"], iframe[id*="turnstile"], .cf-turnstile iframe{ z-index: 1 !important; } /* Turnstile alignment inside auth card */ .bm-turnstile-wrap{ display:flex; justify-content:center; } /* Turnstile responsiveness */ .cf-turnstile{ width:100%; max-width:100%; } .cf-turnstile iframe{ max-width:100% !important; } /* ============================== AUTH HEADER BRAND (MOVED FROM Signup inline