/* =========================================================
BuildDaily — Discovery (Monolithic)
Load LAST after Bootstrap/Nazox. Purpose: be authoritative.
========================================================= */
/* =========================
TOKENS & THEMES
========================= */
:root{
--bd-border:var(--bd-theme-border-000000, #000);
--bd-text:var(--bd-theme-fg-111111, #111);
--bd-muted:var(--bd-theme-fg-6b7280, #6b7280);
--bd-bg:var(--bd-theme-bg-ffffff, #fff);
--bd-soft:var(--bd-theme-palette-f7f7f9, #f7f7f9);
--bd-shadow:0 4px 12px var(--bd-theme-shadow-000000-14, rgba(0,0,0,.08));
--bd-radius:10px;
--bd-success:var(--bd-theme-palette-1a7f2e, #1a7f2e);
--bd-info:var(--bd-theme-palette-1f6fe5, #1f6fe5);
--bd-warn:var(--bd-theme-palette-c88719, #c88719);
--bd-danger:var(--bd-theme-palette-b3261e, #b3261e);
--bd-focus:var(--bd-theme-palette-fffbe6, #fffbe6);
--bd-line:var(--bd-theme-border-f0f0f0, #f0f0f0);
}
[data-theme="dark"]{
--bd-border:var(--bd-theme-border-ffffff, #fff);
--bd-text:var(--bd-theme-fg-f5f5f7, #f5f5f7);
--bd-muted:var(--bd-theme-fg-9aa0a6, #9aa0a6);
--bd-bg:var(--bd-theme-bg-191a1f, #191a1f);
--bd-soft:var(--bd-theme-palette-20232a, #20232a);
--bd-shadow:0 6px 20px var(--bd-theme-shadow-000000-59, rgba(0,0,0,.35));
--bd-success:var(--bd-theme-palette-25c06d, #25c06d);
--bd-info:var(--bd-theme-palette-5aa3ff, #5aa3ff);
--bd-warn:var(--bd-theme-palette-ffb347, #ffb347);
--bd-danger:var(--bd-theme-palette-ff6b6b, #ff6b6b);
}
/* =========================
BASE & RESET (neutralize Bootstrap/Nazox leaks)
========================= */
html,body{
font-family: Inter, ui-sans-serif, system-ui, -apple-system, "Segoe UI",
Roboto, "Helvetica Neue", Arial, "Apple Color Emoji", "Segoe UI Emoji";
color:var(--bd-text);
background: var(--bd-theme-bg-ffffff, #ffffff);
font-size:15px;
}
h1,h2,h3,h4,h5,h6{ font-weight:600; letter-spacing:.2px; color:var(--bd-text); }
.soft-muted{ color:var(--bd-muted) !important; }
/* keep Bootstrap structure but unify look */
.btn,.badge,.card,.modal,.table,.nav,.dropdown-menu,
.list-group-item,.form-control,.form-select,.toast,.offcanvas{
font-family: inherit !important;
letter-spacing:0 !important;
box-shadow:none !important;
}
/* =========================
CARDS (canonical)
========================= */
.bd-card,.card{
background:var(--bd-bg);
border:1px solid var(--bd-border) !important;
border-radius:.65rem !important;
box-shadow:var(--bd-shadow);
overflow:hidden;
}
.bd-card-header{
display:flex; align-items:center; justify-content:space-between;
gap:1rem; padding:1rem 1.25rem; border-bottom:1px solid var(--bd-theme-border-000000-14, rgba(0,0,0,.08));
}
.bd-card-body{ padding:1.25rem; }
.bd-card-footer{
padding:1rem 1.25rem; border-top:1px solid var(--bd-theme-border-000000-14, rgba(0,0,0,.08));
display:flex; align-items:center; justify-content:space-between; gap:1rem;
}
.bd-card.bd-left-accent{ position:relative; overflow:hidden; }
.bd-card.bd-left-accent::before{
content:""; position:absolute; inset:0 auto 0 0; width:6px;
border-radius:.65rem 0 0 .65rem;
}
.bd-accent-success::before{ background:var(--bd-success) !important; }
.bd-accent-info::before{ background:var(--bd-info) !important; }
.bd-accent-warn::before{ background:var(--bd-warn) !important; }
.bd-accent-danger::before{ background:var(--bd-danger) !important; }
/* discovery list-group inside cards — no double borders */
.bd-card .list-group{ border:0 !important; border-radius:inherit !important; overflow:hidden; }
.bd-card .list-group-item{ border-left:0 !important; border-right:0 !important; }
.bd-card .list-group-item:first-child{ border-top:0 !important; }
.bd-card .list-group-item:last-child{ border-bottom:0 !important; }
/* =========================
BUTTONS
========================= */
.bd-btn{
display:inline-flex; align-items:center; gap:.4rem;
font-weight:600; font-size:.88rem; line-height:1.1;
border-radius:.6rem; border:1.5px solid var(--bd-border);
background:var(--bd-theme-bg-ffffff, #fff); color:var(--bd-text); padding:.42rem .85rem;
transition:background .18s,color .18s,border-color .18s; text-decoration:none;
}
.bd-btn:hover,.bd-btn:focus{ background:var(--bd-theme-bg-f1f3f5, #f1f3f5); color:var(--bd-text); }
.bd-btn-dark{ background:var(--bd-theme-bg-111111, #111); border-color:var(--bd-theme-border-111111, #111); color:var(--bd-theme-fg-ffffff, #fff) !important; }
.bd-btn-dark:hover{ background:var(--bd-theme-bg-000000, #000); border-color:var(--bd-theme-border-000000, #000); }
.bd-btn-outline{ background:var(--bd-theme-bg-ffffff, #fff); border-color:var(--bd-border); }
.bd-btn-ghost{ background:transparent; border-color:transparent; }
.bd-btn-danger{ background:var(--bd-danger); border-color:var(--bd-danger); color:var(--bd-theme-fg-ffffff, #fff) !important; }
.bd-btn-ai{
background:linear-gradient(135deg, var(--bd-theme-bg-3b82f6-1f, rgba(59,130,246,.12)), var(--bd-theme-bg-0e7490-38, rgba(14,116,144,.22)));
border-color:var(--bd-theme-border-2563eb-59, rgba(37,99,235,.35)); color:var(--bd-theme-fg-1d4ed8, #1d4ed8);
}
.bd-btn-sm{ font-size:.78rem; padding:.3rem .6rem; border-radius:.45rem; }
.bd-btn-xs{ font-size:.75rem; padding:.3rem .65rem; border-radius:.6rem; }
/* =========================
BADGES & CHIPS (single source of truth)
========================= */
.bd-chip,.bd-badge{
display:inline-flex; align-items:center; gap:.35rem;
padding:2px 8px; font-size:.75rem; line-height:1.2;
border:1px solid var(--bd-border) !important; border-radius:6px !important;
background:var(--bd-theme-bg-ffffff, #fff) !important; color:var(--bd-text) !important; font-weight:500;
white-space:nowrap; transition:background .15s ease,color .15s ease;
}
.bd-badge.bd-pill{ border-radius:999px !important; padding:.25rem .75rem; }
/* === Disable Global Badge/Chip Hover Inversion =============== */
.bd-chip:hover,
.bd-badge:hover {
background: inherit !important;
color: inherit !important;
border-color: var(--bd-border) !important;
transition: none !important;
cursor: default !important;
}
.bd-chip-good,.bd-badge-success{ background:var(--bd-theme-bg-e8f4ec, #e8f4ec) !important; border-color:var(--bd-success) !important; color:var(--bd-theme-fg-145522, #145522) !important; }
.bd-chip-info,.bd-badge-info{ background:var(--bd-theme-bg-e9f1fd, #e9f1fd) !important; border-color:var(--bd-info) !important; color:var(--bd-theme-fg-123f87, #123f87) !important; }
.bd-chip-warn,.bd-badge-warning{ background:var(--bd-theme-bg-fff5e1, #fff5e1) !important; border-color:var(--bd-warn) !important; color:var(--bd-theme-fg-7a4f00, #7a4f00) !important; }
.bd-chip-muted,.bd-badge-secondary{ background:var(--bd-theme-bg-f0f0f0, #f0f0f0) !important; border-color:var(--bd-theme-border-555555, #555) !important; color:var(--bd-theme-fg-333333, #333) !important; }
.bd-badge-danger{ background:var(--bd-theme-bg-fdebea, #fdebea) !important; border-color:var(--bd-danger) !important; color:var(--bd-theme-fg-7a1a14, #7a1a14) !important; }
/* Canonical project workflow status badge — used by submittals, change orders, and related modules. */
.bd-sub-status{
box-sizing:border-box;
display:inline-flex;
align-items:center;
justify-content:center;
gap:.35rem;
min-height:25px;
padding:.18rem .55rem;
border:1px solid var(--bd-border) !important;
border-radius:.4rem !important;
background:var(--bd-theme-bg-ffffff, #fff) !important;
color:var(--bd-text) !important;
font-size:.72rem;
font-weight:800;
line-height:1.1;
white-space:nowrap;
vertical-align:middle;
}
.bd-sub-status.good{ background:var(--bd-theme-bg-e8f4ec, #e8f4ec) !important; border-color:var(--bd-success) !important; color:var(--bd-theme-fg-145522, #145522) !important; }
.bd-sub-status.info{ background:var(--bd-theme-bg-e9f1fd, #e9f1fd) !important; border-color:var(--bd-info) !important; color:var(--bd-theme-fg-123f87, #123f87) !important; }
.bd-sub-status.warn{ background:var(--bd-theme-bg-fff5e1, #fff5e1) !important; border-color:var(--bd-warn) !important; color:var(--bd-theme-fg-7a4f00, #7a4f00) !important; }
.bd-sub-status.bad{ background:var(--bd-theme-bg-fdebea, #fdebea) !important; border-color:var(--bd-danger) !important; color:var(--bd-theme-fg-7a1a14, #7a1a14) !important; }
.bd-sub-status.muted{ background:var(--bd-theme-bg-f0f0f0, #f0f0f0) !important; border-color:var(--bd-theme-border-555555, #555) !important; color:var(--bd-theme-fg-333333, #333) !important; }
.bd-sub-status i{ line-height:1; }
.bd-quote-badge{ font-size:.8rem; padding:2px 6px; border-radius:4px; border:1px solid var(--bd-border); background:var(--bd-theme-bg-f8f9fa, #f8f9fa); }
/* finance summary */
.bd-badge-revenue{ background:var(--bd-theme-bg-eaf1fb, #eaf1fb) !important; color:var(--bd-theme-fg-084298, #084298) !important; }
.bd-badge-cost{ background:var(--bd-theme-bg-fdecec, #fdecec) !important; color:var(--bd-theme-fg-8c1c13, #8c1c13) !important; }
.bd-badge-gross{ background:var(--bd-theme-bg-e9f8e9, #e9f8e9) !important; color:var(--bd-theme-fg-145a14, #145a14) !important; }
.bd-badge-net{ background:var(--bd-theme-bg-d6f5d6, #d6f5d6) !important; color:var(--bd-theme-fg-083d14, #083d14) !important; }
.bd-badge-cash-pos{ background:var(--bd-theme-bg-e9f8e9, #e9f8e9) !important; color:var(--bd-theme-fg-0b5d0b, #0b5d0b) !important; }
.bd-badge-cash-neg{ background:var(--bd-theme-bg-fdecec, #fdecec) !important; color:var(--bd-theme-fg-a11212, #a11212) !important; }
.bd-badge-markup-suggest{ background:var(--bd-theme-bg-e6f9f9, #e6f9f9) !important; color:var(--bd-theme-fg-0b4f4f, #0b4f4f) !important; }
.bd-badge-markup-current{ background:var(--bd-theme-bg-f2f2f2, #f2f2f2) !important; color:var(--bd-theme-fg-333333, #333) !important; }
/* =========================
GLOBAL MODAL VIEWPORT FIT
=========================
Keeps modal content usable in iPad/PWA shells and smaller viewports.
*/
.modal{
--bd-modal-safe-top: max(10px, env(safe-area-inset-top, 0px));
--bd-modal-safe-bottom: max(10px, env(safe-area-inset-bottom, 0px));
}
.modal .modal-dialog{
margin-top: var(--bd-modal-safe-top) !important;
margin-bottom: var(--bd-modal-safe-bottom) !important;
max-height: calc(100dvh - var(--bd-modal-safe-top) - var(--bd-modal-safe-bottom)) !important;
}
.modal .modal-content{
max-height: calc(100dvh - var(--bd-modal-safe-top) - var(--bd-modal-safe-bottom)) !important;
display:flex !important;
flex-direction:column !important;
overflow:hidden !important;
}
.modal .modal-header,
.modal .modal-footer{
flex:0 0 auto !important;
}
.modal .modal-body{
flex:1 1 auto !important;
min-height:0 !important;
overflow-y:auto !important;
-webkit-overflow-scrolling:touch !important;
}
@supports not (height: 100dvh){
.modal .modal-dialog,
.modal .modal-content{
max-height: calc(100vh - var(--bd-modal-safe-top) - var(--bd-modal-safe-bottom)) !important;
}
}
/* =========================
HORIZONTAL TABLE SCROLL AFFORDANCE
=========================
Applied automatically to existing Bootstrap table-responsive wrappers.
Opt out per wrapper with .bd-scroll-hint-off.
*/
.table-responsive:not(.bd-scroll-hint-off),
.bd-table-scroll:not(.bd-scroll-hint-off),
:is(.bd-scroll-x, [data-bd-scroll-hint-bound="1"]):not(.bd-scroll-hint-off){
position:relative;
-webkit-overflow-scrolling:touch;
scrollbar-gutter:stable;
}
/* Binding scroll hints must not turn an authored mobile card surface back into
a scroller. Only the explicit generic scroll classes supply this default. */
.table-responsive:not(.bd-scroll-hint-off),
.bd-table-scroll:not(.bd-scroll-hint-off),
.bd-scroll-x:not(.bd-scroll-hint-off) { overflow-x:auto; }
.table-responsive:not(.bd-scroll-hint-off)::before,
.table-responsive:not(.bd-scroll-hint-off)::after,
.bd-table-scroll:not(.bd-scroll-hint-off)::before,
.bd-table-scroll:not(.bd-scroll-hint-off)::after,
:is(.bd-scroll-x, [data-bd-scroll-hint-bound="1"]):not(.bd-scroll-hint-off)::before,
:is(.bd-scroll-x, [data-bd-scroll-hint-bound="1"]):not(.bd-scroll-hint-off)::after{
position:absolute;
top:50%;
z-index:5;
width:26px;
height:26px;
display:none;
align-items:center;
justify-content:center;
border:1px solid var(--bd-theme-border-000000-47, rgba(0,0,0,.28));
border-radius:.65rem;
background:var(--bd-theme-bg-ffffff-f0, rgba(255,255,255,.94));
color:var(--bd-theme-fg-111111, #111);
font-size:1rem;
line-height:1;
font-weight:800;
box-shadow:0 2px 8px var(--bd-theme-shadow-000000-1f, rgba(0,0,0,.12));
pointer-events:none;
}
.table-responsive.bd-scroll-can-left:not(.bd-scroll-hint-off)::before,
.bd-table-scroll.bd-scroll-can-left:not(.bd-scroll-hint-off)::before,
:is(.bd-scroll-x, [data-bd-scroll-hint-bound="1"]).bd-scroll-can-left:not(.bd-scroll-hint-off)::before{
content:"←";
left:10px;
display:flex;
animation:bd-scroll-x-hint-left 1.35s ease-in-out infinite;
}
.table-responsive.bd-scroll-can-right:not(.bd-scroll-hint-off)::after,
.bd-table-scroll.bd-scroll-can-right:not(.bd-scroll-hint-off)::after,
:is(.bd-scroll-x, [data-bd-scroll-hint-bound="1"]).bd-scroll-can-right:not(.bd-scroll-hint-off)::after{
content:"→";
right:10px;
display:flex;
animation:bd-scroll-x-hint-right 1.35s ease-in-out infinite;
}
.table-responsive.bd-scroll-can-left:not(.bd-scroll-hint-off),
.bd-table-scroll.bd-scroll-can-left:not(.bd-scroll-hint-off),
:is(.bd-scroll-x, [data-bd-scroll-hint-bound="1"]).bd-scroll-can-left:not(.bd-scroll-hint-off){
box-shadow:inset 26px 0 18px -24px var(--bd-theme-shadow-000000-42, rgba(0,0,0,.26));
}
.table-responsive.bd-scroll-can-right:not(.bd-scroll-hint-off),
.bd-table-scroll.bd-scroll-can-right:not(.bd-scroll-hint-off),
:is(.bd-scroll-x, [data-bd-scroll-hint-bound="1"]).bd-scroll-can-right:not(.bd-scroll-hint-off){
box-shadow:inset -26px 0 18px -24px var(--bd-theme-shadow-000000-42, rgba(0,0,0,.26));
}
.table-responsive.bd-scroll-can-left.bd-scroll-can-right:not(.bd-scroll-hint-off),
.bd-table-scroll.bd-scroll-can-left.bd-scroll-can-right:not(.bd-scroll-hint-off),
:is(.bd-scroll-x, [data-bd-scroll-hint-bound="1"]).bd-scroll-can-left.bd-scroll-can-right:not(.bd-scroll-hint-off){
box-shadow:inset 26px 0 18px -24px var(--bd-theme-shadow-000000-42, rgba(0,0,0,.26)), inset -26px 0 18px -24px var(--bd-theme-shadow-000000-42, rgba(0,0,0,.26));
}
.table-responsive:not(.bd-scroll-hint-off):hover::before,
.table-responsive:not(.bd-scroll-hint-off):hover::after,
.table-responsive:not(.bd-scroll-hint-off):focus-within::before,
.table-responsive:not(.bd-scroll-hint-off):focus-within::after,
.bd-table-scroll:not(.bd-scroll-hint-off):hover::before,
.bd-table-scroll:not(.bd-scroll-hint-off):hover::after,
.bd-table-scroll:not(.bd-scroll-hint-off):focus-within::before,
.bd-table-scroll:not(.bd-scroll-hint-off):focus-within::after,
:is(.bd-scroll-x, [data-bd-scroll-hint-bound="1"]):not(.bd-scroll-hint-off):hover::before,
:is(.bd-scroll-x, [data-bd-scroll-hint-bound="1"]):not(.bd-scroll-hint-off):hover::after,
:is(.bd-scroll-x, [data-bd-scroll-hint-bound="1"]):not(.bd-scroll-hint-off):focus-within::before,
:is(.bd-scroll-x, [data-bd-scroll-hint-bound="1"]):not(.bd-scroll-hint-off):focus-within::after{
opacity:.35;
animation-play-state:paused;
}
@keyframes bd-scroll-x-hint-right{
0%,100%{ transform:translateY(-50%) translateX(0); opacity:.48; }
50%{ transform:translateY(-50%) translateX(5px); opacity:.95; }
}
@keyframes bd-scroll-x-hint-left{
0%,100%{ transform:translateY(-50%) translateX(0); opacity:.48; }
50%{ transform:translateY(-50%) translateX(-5px); opacity:.95; }
}
@media (min-width: 1400px){
.table-responsive:not(.bd-scroll-hint-force)::before,
.table-responsive:not(.bd-scroll-hint-force)::after{
display:none !important;
}
}
@media (prefers-reduced-motion: reduce){
.table-responsive:not(.bd-scroll-hint-off)::before,
.table-responsive:not(.bd-scroll-hint-off)::after,
.bd-table-scroll:not(.bd-scroll-hint-off)::before,
.bd-table-scroll:not(.bd-scroll-hint-off)::after,
:is(.bd-scroll-x, [data-bd-scroll-hint-bound="1"]):not(.bd-scroll-hint-off)::before,
:is(.bd-scroll-x, [data-bd-scroll-hint-bound="1"]):not(.bd-scroll-hint-off)::after{
animation:none;
}
}
/* =========================
FORMS / INPUTS
========================= */
.form-control.bd-input,.form-select.bd-input,.bd-input{
border:1px solid var(--bd-border) !important; border-radius:.35rem !important;
font-size:.9rem; padding:.4rem .55rem; box-shadow:none !important; background:var(--bd-theme-bg-ffffff, #fff);
}
.bd-input:focus{ outline:none; box-shadow:0 0 0 2px var(--bd-theme-shadow-2563eb-59, rgba(37,99,235,.35)) !important; }
.form-control,.form-control-sm,.form-select,.form-select-sm,.ts-control,.ts-control input{
height:25px !important; min-height:25px !important; line-height:1.2 !important; padding:2px 6px !important; font-size:.875rem !important;
}
textarea.form-control{ height:auto !important; min-height:60px !important; line-height:1.3 !important; padding-top:4px !important; padding-bottom:4px !important; }
.bd-input-prefix{ position:relative; display:flex; align-items:center; }
.bd-input-prefix__symbol{ position:absolute; left:.85rem; font-weight:600; color:var(--bd-muted); pointer-events:none; }
.bd-input-prefixed{ padding-left:2.2rem !important; }
/* === FIX: restore visible checkmarks on .bd-checkbox === */
.bd-checkbox {
position: relative !important;
appearance: none !important;
display: inline-flex !important;
align-items: center !important;
justify-content: center !important;
border: 1.5px solid var(--bd-border) !important;
border-radius: .35rem !important;
width: 1.1rem !important;
height: 1.1rem !important;
background: var(--bd-theme-bg-ffffff, #fff) !important;
cursor: pointer !important;
}
.bd-checkbox:checked {
background: var(--bd-info) !important;
border-color: var(--bd-info) !important;
}
.bd-checkbox:checked::after {
content: "✓" !important;
font-size: .75rem !important;
color: var(--bd-theme-fg-ffffff, #fff) !important;
position: absolute !important;
top: 50% !important;
left: 50% !important;
transform: translate(-50%, -50%) !important;
}
[data-theme="dark"] .bd-checkbox:checked::after {
color: var(--bd-theme-fg-000000, #000) !important;
}
[contenteditable="true"]{ outline:none; cursor:text; }
[contenteditable="true"].is-focus{ background:var(--bd-focus); outline:1px solid var(--bd-border); }
/* =========================
TABLES / TAKEOFF / CREW
========================= */
/* === Remove Global Table Striping ==================== */
.table tbody tr:nth-child(even) td { background: transparent !important; }
/* === Optional Scoped Striping (opt-in) =============== */
.bd-striped tbody tr:nth-child(even) td {
background: var(--bd-theme-bg-fcfcfc, #fcfcfc) !important;
}
.table tbody tr:nth-child(even) td{ background:var(--bd-theme-bg-fcfcfc, #fcfcfc); }
.table-secondary td{ background:var(--bd-theme-bg-f8f9fa, #f8f9fa) !important; font-weight:500; }
.bd-table-flat{
width:100%; border-collapse:separate; border-spacing:0; background:var(--bd-theme-bg-ffffff, #fff);
border:1px solid var(--bd-border); border-radius:12px; overflow:hidden;
}
.bd-table-flat thead th{
background:var(--bd-theme-bg-f1f2f4, #f1f2f4); font-size:.75rem; letter-spacing:.08em;
padding:.65rem; border-bottom:1px solid var(--bd-border);
}
.bd-table-flat tbody td{ padding:.65rem; border-bottom:1px solid var(--bd-theme-border-000000-14, rgba(0,0,0,.08)); vertical-align:top; }
.bd-table-flat tbody tr:last-child td{ border-bottom:none; }
.takeoff-row td,.crew-row td{
border-bottom:1px solid var(--bd-border) !important; padding:.25rem .4rem; font-size:.85rem; vertical-align:middle;
}
.num-cell{ text-align:right; font-family:monospace; }
/* === Numeric Cell Layout Fix ========================= */
.num-cell[contenteditable="true"] {
display: block !important; /* keep full cell width */
min-width: 3.5rem !important;
width: 100% !important;
box-sizing: border-box !important;
text-align: right;
}
/* Takeoff crew qty vertical alignment */
.crew-row td { vertical-align: middle !important; }
.crew-row .crew-qty-cell[contenteditable="true"] {
display: inline-block; /* no block-level jumps */
width: 100%;
line-height: 2.5;
padding: .2rem 0; /* visual centering inside td */
text-align: center;
box-sizing: border-box;
}
/* === Global Left-Accent / Card Corner Fix ==================== */
/* keep all bd-left-accent stripes inside rounded borders */
.bd-card.bd-left-accent,
.bd-left-accent {
position: relative;
overflow: hidden;
border-radius: .5rem !important;
}
/* === Universal Left-Accent Stripe Fix ========================= */
/* keep stripes fully inside rounded corners and clip safely */
.bd-left-accent,
.bd-card.bd-left-accent {
position: relative;
overflow: hidden; /* prevents corner bleed */
border-radius: .5rem !important; /* unify rounding */
}
.bd-left-accent::before {
content: "";
position: absolute;
top: 0;
left: 0;
bottom: 0;
width: var(--edge-size, 8px);
border-top-left-radius: .5rem;
border-bottom-left-radius: .5rem;
pointer-events: none;
}
/* Exclude toolbars, bulkbars, navbars, etc. */
.bd-bulkbar.bd-left-accent::before,
#estimate-bulkbar.bd-left-accent::before,
.navbar.bd-left-accent::before,
.topbar.bd-left-accent::before {
content: none !important;
}
/* exclude banners, bulk bars, and navbars */
.bd-bulkbar.bd-left-accent::before,
#estimate-bulkbar.bd-left-accent::before,
.navbar.bd-left-accent::before,
.topbar.bd-left-accent::before {
content: none !important;
}
/* =========================
COLLAPSE / ACCORDION
========================= */
.chevron,.chev{ transition:transform .25s ease !important; }
.chevron.rotate,.chev.rotate{ transform:rotate(180deg) !important; }
.bd-accordion{ display:flex; flex-direction:column; gap:.6rem; }
.bd-accordion details{
border:1px solid var(--bd-border); border-radius:.6rem; background:var(--bd-theme-bg-ffffff, #fff); overflow:hidden; box-shadow:var(--bd-shadow);
}
.bd-accordion summary{
list-style:none; cursor:pointer; padding:.55rem .9rem; font-weight:600;
display:flex; align-items:center; justify-content:space-between; gap:.5rem;
}
.bd-accordion__body{ padding:.6rem .9rem .9rem; font-size:.88rem; color:var(--bd-text); background:var(--bd-theme-bg-f8f9fa, #f8f9fa); }
/* =========================
NAV — Estimate pill bar (used broadly)
========================= */
#estimate-nav{
border-top:1px solid var(--bd-border) !important; margin-top:.5rem !important;
padding:.6rem 0 !important; display:flex !important; justify-content:center !important; background:var(--bd-theme-bg-ffffff, #fff) !important;
}
#estimate-nav nav{
display:flex !important; flex-wrap:wrap !important; justify-content:center !important; gap:.6rem !important; width:100% !important;
}
#estimate-nav .bd-pill-link {
display: inline-flex !important;
align-items: center !important;
gap: .35rem !important;
/* smaller text */
font-weight: 500 !important;
color: var(--bd-theme-fg-2d2d2d, #2d2d2d) !important;
background: var(--bd-theme-bg-f5f6f8, #f5f6f8) !important;
/* tighter padding */
text-decoration: none !important;
transition: background .2s ease, color .2s ease !important;
border: 1px solid var(--bd-border) !important;
cursor: pointer !important; /* 👈 ensures hand cursor */
user-select: none !important; /* prevents text selection on drag */
}
#estimate-nav .bd-pill-link:hover {
background: var(--bd-theme-bg-e8eaed, #e8eaed) !important;
color: var(--bd-theme-fg-000000, #000) !important;
}
#estimate-nav .bd-pill-link.active {
background: var(--bd-theme-bg-1a1f2d, #1a1f2d) !important;
color: var(--bd-theme-fg-ffffff, #fff) !important;
font-weight: 600 !important;
}
#estimate-nav .bd-pill-link .bd-badge {
background: var(--bd-theme-bg-e0a53c, #e0a53c) !important;
color: var(--bd-theme-fg-ffffff, #fff) !important;
line-height: 1 !important;
}
/* =========================
MODALS (Discovery)
========================= */
.bd-modal{
position:fixed; inset:0; z-index:1080; display:flex; align-items:center; justify-content:center;
padding:1.5rem; background:var(--bd-theme-bg-090b11-8c, rgba(9,11,17,.55)); animation:fadeIn .2s ease-out;
}
.bd-modal__dialog{
width:min(720px,100%); max-height:calc(100vh - 3rem);
background:var(--bd-bg); border:1px solid var(--bd-border); border-radius:14px;
box-shadow:var(--bd-shadow); overflow:hidden; display:flex; flex-direction:column; position:relative;
}
.bd-modal__header,.bd-modal__footer{ padding:.75rem 1rem; background:var(--bd-theme-bg-ffffff, #fff); border-color:var(--bd-border); border-style:solid; }
.bd-modal__header{ border-width:0 0 1px 0; display:flex; align-items:center; justify-content:space-between; gap:.75rem; }
.bd-modal__footer{ border-width:1px 0 0 0; display:flex; justify-content:flex-end; gap:.5rem; }
.bd-modal__body{ padding:1rem; overflow-y:auto; background:var(--bd-soft); }
.bd-modal__close{ border:0; background:none; font-size:1.3rem; line-height:1; color:var(--bd-muted); cursor:pointer; }
.bd-modal__close:hover{ color:var(--bd-text); }
@keyframes fadeIn{ from{opacity:0} to{opacity:1} }
/* =========================
TIMELINE (Activity)
========================= */
.bd-timeline{ position:relative; border-left:2px solid var(--bd-theme-border-e0e0e0, #e0e0e0); margin-left:.5rem; padding-left:1.5rem; }
.bd-timeline-item{ position:relative; margin-bottom:1rem; }
.bd-timeline-item::before{
content:""; position:absolute; left:-1.9rem; top:.55rem; width:10px; height:10px; border-radius:50%;
background:var(--bd-theme-bg-6c757d, #6c757d); border:2px solid var(--bd-theme-border-ffffff, #fff); box-shadow:0 0 0 1px var(--bd-theme-shadow-cccccc, #ccc);
}
.bd-timeline-item.quote::before{ background:var(--bd-theme-bg-198754, #198754); }
.bd-timeline-item.followup::before{ background:var(--bd-theme-bg-0d6efd, #0d6efd); }
.bd-timeline-item.decline::before{ background:var(--bd-theme-bg-dc3545, #dc3545); }
/* =========================
QUICK SEARCH (panel + badges)
========================= */
#quick-search-results .list-group{
border:1px solid var(--bd-border); border-radius:.5rem; overflow:hidden;
}
#quick-search-results .list-group-item{
padding:.45rem .75rem; font-size:.875rem; border:none; border-bottom:1px solid var(--bd-theme-border-f0f0f0, #f0f0f0);
display:flex; align-items:center; gap:.5rem;
}
#quick-search-results .list-group-item:last-child{ border-bottom:none; }
#quick-search-results .list-group-item:hover{ background:var(--bd-theme-bg-f8f9fa, #f8f9fa); }
.bd-badge-search{
display:inline-flex; align-items:center; gap:.3rem; padding:2px 6px;
font-size:.78rem; line-height:1.2; border:1px solid var(--bd-border) !important; border-radius:4px; background:var(--bd-theme-bg-f9f9f9, #f9f9f9); color:var(--bd-theme-fg-333333, #333);
}
.bd-badge-search-estimate{ background:var(--bd-theme-bg-e9f1fd, #e9f1fd) !important; color:var(--bd-theme-fg-123f87, #123f87) !important; border-color:var(--bd-info) !important; }
.bd-badge-search-lead{ background:var(--bd-theme-bg-e8f4ec, #e8f4ec) !important; color:var(--bd-theme-fg-145522, #145522) !important; border-color:var(--bd-success) !important; }
.bd-badge-search-contact{ background:var(--bd-theme-bg-f0f0f0, #f0f0f0) !important; color:var(--bd-theme-fg-333333, #333) !important; border-color:var(--bd-theme-border-555555, #555) !important; }
/* =========================
SKELETON / LOADING
========================= */
.skeleton{ position:relative; background:var(--bd-theme-bg-f0f0f0, #f0f0f0); overflow:hidden; }
.skeleton::after{
content:""; position:absolute; top:0; left:-150px; height:100%; width:150px;
background:linear-gradient(90deg, transparent, var(--bd-theme-bg-ffffff-99, rgba(255,255,255,.6)), transparent);
animation:shimmer 1.2s infinite;
}
@keyframes shimmer{ 100%{ transform:translateX(100%);} }
/* =========================
TOASTS (Discovery)
========================= */
.bd-toast-stack{ position:fixed; bottom:16px; right:16px; z-index:1080; display:flex; flex-direction:column; align-items:flex-end; gap:8px; pointer-events:none; }
.bd-toast{
pointer-events:auto; display:flex; align-items:flex-start; gap:10px; min-width:260px; max-width:420px; padding:10px 12px;
background:var(--bd-theme-bg-ffffff, #fff); color:var(--bd-theme-fg-111111, #111); border:1px solid var(--bd-border); border-radius:8px; box-shadow:0 4px 12px var(--bd-theme-shadow-000000-14, rgba(0,0,0,.08));
position:relative; overflow:hidden; animation:bd-toast-in .18s ease-out;
}
.bd-toast .bd-ico{ font-size:18px; line-height:1; margin-top:2px; }
.bd-toast .bd-title{ font-weight:700; margin-bottom:2px; }
.bd-toast::before{ content:""; position:absolute; left:0; top:0; bottom:0; width:5px; }
.bd-toast.is-success::before{ background:var(--bd-success); }
.bd-toast.is-info::before{ background:var(--bd-info); }
.bd-toast.is-warn::before{ background:var(--bd-warn); }
.bd-toast.is-error::before{ background:var(--bd-danger); }
@keyframes bd-toast-in{ from{opacity:0; transform:translateY(6px);} to{opacity:1; transform:translateY(0);} }
/* =========================
TOMSELECT PORTAL / DROPDOWNS IN MODALS (no clipping)
========================= */
/* === TomSelect / Dropdown Visibility ================= */
.bd-card:has(.dropdown-menu.show, .ts-wrapper.open, .ts-dropdown, [aria-expanded='true'], .show > .dropdown-menu, details[open]),
.bd-subcard:has(.dropdown-menu.show, .ts-wrapper.open, .ts-dropdown, [aria-expanded='true'], .show > .dropdown-menu, details[open]),
.card:has(.dropdown-menu.show, .ts-wrapper.open, .ts-dropdown, [aria-expanded='true'], .show > .dropdown-menu, details[open]),
.modal,
.offcanvas:has(.dropdown-menu.show, .ts-wrapper.open, .ts-dropdown, [aria-expanded='true'], .show > .dropdown-menu, details[open]),
.bd-modal__body:has(.dropdown-menu.show, .ts-wrapper.open, .ts-dropdown, [aria-expanded='true'], .show > .dropdown-menu, details[open]),
.bd-modal:has(.dropdown-menu.show, .ts-wrapper.open, .ts-dropdown, [aria-expanded='true'], .show > .dropdown-menu, details[open]),
.bd-section:has(.dropdown-menu.show, .ts-wrapper.open, .ts-dropdown, [aria-expanded='true'], .show > .dropdown-menu, details[open]),
.section-panel:has(.dropdown-menu.show, .ts-wrapper.open, .ts-dropdown, [aria-expanded='true'], .show > .dropdown-menu, details[open]) {
overflow: visible !important;
}
/* Make modals/cards allow overflow while dropdown is open */
.bd-portal-open .modal,.bd-portal-open .modal-panel,.bd-portal-open .bd-card{ overflow:visible !important; }
/* =========================
RIGHTBAR / OFFCANVAS
========================= */
.offcanvas{ z-index:1045 !important; }
.offcanvas-backdrop{ z-index:1040 !important; background-color:var(--bd-theme-bg-000000-40, rgba(0,0,0,.25)) !important; }
/* =========================
GRIDSTER / DASHBOARD widgets (rounded fix + spacing)
========================= */
.gridster{ position:relative !important; overflow:visible !important; background:var(--bd-theme-bg-f8f9fa, #f8f9fa); padding-bottom:20px !important; }
.gridster > ul{ list-style:none; margin:0 !important; padding:0 !important; position:relative !important; }
.gridster > ul > li{ position:absolute !important; overflow:visible !important; z-index:2 !important; }
.gridster .widget{
background:var(--bd-theme-bg-ffffff, #fff); border:1px solid var(--bd-border); border-radius:.5rem !important;
overflow:visible !important; box-shadow:0 4px 10px var(--bd-theme-shadow-000000-14, rgba(0,0,0,.08));
}
/* =========================
SCHEDULE / TABLE PANE (Discovery)
========================= */
.bd-table-flat-wrapper{ max-height:520px; overflow:auto; }
.bd-schedule__legend{ display:flex; flex-wrap:wrap; gap:.75rem; border:1px dashed var(--bd-theme-border-000000-26, rgba(0,0,0,.15)); border-radius:12px; padding:.75rem; background:var(--bd-theme-bg-000000-05, rgba(0,0,0,.02)); }
.bd-schedule__legend-item{ display:flex; flex-direction:column; gap:.25rem; min-width:160px; }
/* =========================
FILE MANAGER (Estimate/Project parity)
========================= */
#project-file-manager table{ border-collapse:separate; border-spacing:0; width:100%; background:var(--bd-theme-bg-ffffff, #fff); border:1px solid var(--bd-border); border-radius:.75rem; overflow:hidden; }
#project-file-manager thead th{
background:var(--bd-theme-bg-f8f9fa, #f8f9fa); font-weight:600; color:var(--bd-theme-fg-212529, #212529); border-bottom:1px solid var(--bd-border); font-size:.8rem; letter-spacing:.02em;
}
#project-file-manager tbody tr{ transition:background-color .1s ease, box-shadow .1s ease; cursor:pointer; }
#project-file-manager tbody tr:hover{ background:var(--bd-theme-bg-f5f7f8, #f5f7f8); }
.bd-file-row.is-folder > td:first-child{ position:relative; }
.bd-file-row.is-folder:hover > td:first-child::before,
.bd-file-row.is-file:hover > td:first-child::before,
.bd-file-row.is-folder.selected > td:first-child::before,
.bd-file-row.is-file.selected > td:first-child::before{
content:""; position:absolute; left:0; top:0; bottom:0; width:4px; background:var(--bd-theme-bg-fcc419, #fcc419); border-radius:.25rem 0 0 .25rem;
}
/* =========================
UTILITIES
========================= */
.bd-progress{ height:6px; border:1px solid var(--bd-border); border-radius:3px; background:var(--bd-theme-bg-f8f9fa, #f8f9fa); overflow:hidden; }
.bd-progress-bar{ height:100%; transition:width .3s ease; }
.bd-highlight{ background:var(--bd-theme-bg-fff9db, #fff9db); border-radius:3px; padding:0 .15em; font-weight:600; }
.bd-text-sm{ font-size:.875rem; }
.bd-scroll-soft{ max-height:420px; overflow:auto; padding-right:.5rem; scrollbar-width:thin; }
.bd-scroll-soft::-webkit-scrollbar{ width:6px; }
.bd-scroll-soft::-webkit-scrollbar-thumb{ background:var(--bd-theme-bg-94a3b8-66, rgba(148,163,184,.4)); border-radius:999px; }
.bd-link{ display:inline-flex; align-items:center; gap:.35rem; color:var(--bd-text); text-decoration:none; }
.bd-link:hover{ color:var(--bd-info); text-decoration:underline; }
.whitespace-prewrap{ white-space:pre-wrap; }
/* workflow squares */
.bd-workflow-square{ display:inline-block; width:12px; height:12px; border-radius:3px; margin-right:4px; border:1px solid var(--bd-border); }
.bd-workflow-good{ background:var(--bd-theme-bg-e8f4ec, #e8f4ec); border-color:var(--bd-success); }
.bd-workflow-warn{ background:var(--bd-theme-bg-fff5e1, #fff5e1); border-color:var(--bd-warn); }
.bd-workflow-bad{ background:var(--bd-theme-bg-fdebea, #fdebea); border-color:var(--bd-danger); }
.bd-workflow-muted{ background:var(--bd-theme-bg-f3f4f6, #f3f4f6); border-color:var(--bd-theme-border-6c757d, #6c757d); }
/* flash helper */
.flash-updated{ animation:bd-flash-success .9s ease; }
@keyframes bd-flash-success{ from{box-shadow:0 0 0 0 var(--bd-theme-shadow-22c55e-73, rgba(34,197,94,.45));} to{box-shadow:0 0 0 10px var(--bd-theme-shadow-22c55e-00, rgba(34,197,94,0));} }
/* === Discovery DataViz Tokens ================================== */
:root {
--bd-chart-bg: var(--bd-theme-bg-ffffff, #ffffff);
--bd-chart-grid: var(--bd-theme-palette-e5e7eb, #e5e7eb);
--bd-chart-text: var(--bd-theme-fg-111827, #111827);
--bd-chart-muted: var(--bd-theme-fg-9ca3af, #9ca3af);
/* Palette (match Discovery accent tones) */
--bd-chart-blue: var(--bd-theme-palette-1f6fe5, #1f6fe5);
--bd-chart-green: var(--bd-theme-palette-1a7f2e, #1a7f2e);
--bd-chart-yellow: var(--bd-theme-palette-c88719, #c88719);
--bd-chart-red: var(--bd-theme-palette-b3261e, #b3261e);
--bd-chart-gray: var(--bd-theme-palette-6b7280, #6b7280);
}
/* === Charts (used for Analytics dashboards) === */
.bd-chart {
background: var(--bd-chart-bg);
color: var(--bd-chart-text);
font-family: Inter, system-ui, sans-serif;
}
.bd-chart-title {
font-size: 0.9rem;
font-weight: 600;
color: var(--bd-text);
margin-bottom: .25rem;
}
.bd-chart-legend {
display: flex;
flex-wrap: wrap;
gap: .5rem;
}
.bd-chart-legend-item {
display: flex;
align-items: center;
gap: .35rem;
font-size: .8rem;
color: var(--bd-muted);
}
.bd-chart-legend-swatch {
width: 10px;
height: 10px;
border-radius: 2px;
}
/* optional: chart.js overrides */
.chart-grid line {
stroke: var(--bd-chart-grid);
}
.chart-axis text {
fill: var(--bd-chart-text);
font-size: .75rem;
}
/* === Discovery Form Validation States =========================== */
/* Success */
.bd-form-success {
background: var(--bd-theme-bg-1a7f2e-14, rgba(26, 127, 46, 0.08));
border: 1px solid var(--bd-theme-border-1a7f2e-59, rgba(26, 127, 46, 0.35));
color: var(--bd-theme-fg-0d4a20, #0d4a20);
border-radius: var(--bd-radius);
padding: .75rem 1rem;
font-weight: 600;
}
/* Warning */
.bd-form-warn {
background: var(--bd-theme-bg-c88719-14, rgba(200, 135, 25, 0.08));
border: 1px solid var(--bd-theme-border-c88719-59, rgba(200, 135, 25, 0.35));
color: var(--bd-theme-fg-7a4f00, #7a4f00);
border-radius: var(--bd-radius);
padding: .75rem 1rem;
font-weight: 600;
}
/* Field-level borders */
.bd-input.is-error { border-color: var(--bd-danger) !important; background: var(--bd-theme-bg-fff5f5, #fff5f5) !important; }
.bd-input.is-warn { border-color: var(--bd-warn) !important; background: var(--bd-theme-bg-fffaf0, #fffaf0) !important; }
.bd-input.is-success { border-color: var(--bd-success) !important; background: var(--bd-theme-bg-f7fef7, #f7fef7) !important; }
/* === Discovery Utility Grid / Layout Layer ====================== */
/* Display */
.d-flex { display: flex !important; }
.d-block { display: block !important; }
.d-none { display: none !important; }
/* Flex */
.flex-wrap { flex-wrap: wrap !important; }
.flex-column { flex-direction: column !important; }
.justify-content-between { justify-content: space-between !important; }
.justify-content-center { justify-content: center !important; }
.align-items-center { align-items: center !important; }
.align-items-start { align-items: flex-start !important; }
.align-items-end { align-items: flex-end !important; }
/* Text */
.text-start { text-align: left !important; }
.text-center { text-align: center !important; }
.text-end { text-align: right !important; }
/* Spacing */
.mt-1 { margin-top: .25rem !important; }
.mt-2 { margin-top: .5rem !important; }
.mt-3 { margin-top: 1rem !important; }
.mb-1 { margin-bottom: .25rem !important; }
.mb-2 { margin-bottom: .5rem !important; }
.mb-3 { margin-bottom: 1rem !important; }
.p-1 { padding: .25rem !important; }
.p-2 { padding: .5rem !important; }
.p-3 { padding: 1rem !important; }
.gap-1 { gap: .25rem !important; }
.gap-2 { gap: .5rem !important; }
.gap-3 { gap: 1rem !important; }
/* Width / Grid */
.container { width: 100%; margin: 0 auto; padding: 0 1rem; }
.row { display: flex; flex-wrap: wrap; margin-right: -0.5rem; margin-left: -0.5rem; }
[class*="col-"] { padding-right: .5rem; padding-left: .5rem; box-sizing: border-box; }
.col-6 { flex: 0 0 50%; max-width: 50%; }
.col-12 { flex: 0 0 100%; max-width: 100%; }
/* Visibility */
.visible { visibility: visible !important; }
.invisible { visibility: hidden !important; }
/* Z-index */
.z-10 { z-index: 10; }
.z-100 { z-index: 100; }
.z-1000 { z-index: 1000; }
/* === Discovery Print Styles ===================================== */
@media print {
body {
background: var(--bd-theme-bg-ffffff, #fff);
color: var(--bd-theme-fg-000000, #000);
font-size: 12px;
}
.bd-card {
box-shadow: none !important;
border: 1px solid var(--bd-theme-border-000000, #000) !important;
break-inside: avoid;
margin-bottom: .75rem;
}
.bd-btn,
.bd-toast-stack,
.offcanvas,
.navbar,
.bd-toast { display: none !important; }
a::after { content: ""; } /* remove URL printing */
table { border-collapse: collapse !important; }
th, td { border: 1px solid var(--bd-theme-border-000000, #000) !important; padding: 4px; }
}
/* === Discovery Dark Mode Polish ================================ */
[data-theme="dark"] {
--bd-bg: var(--bd-theme-bg-1a1b1f, #1a1b1f);
--bd-text: var(--bd-theme-fg-ffffff, #ffffff);
--bd-border: var(--bd-theme-border-2d2f36, #2d2f36);
--bd-muted: var(--bd-theme-fg-9ca3af, #9ca3af);
--bd-soft: var(--bd-theme-palette-23252a, #23252a);
--bd-shadow: 0 6px 16px var(--bd-theme-shadow-000000-99, rgba(0,0,0,.6));
--bd-success: var(--bd-theme-palette-22c55e, #22c55e);
--bd-info: var(--bd-theme-palette-60a5fa, #60a5fa);
--bd-warn: var(--bd-theme-palette-facc15, #facc15);
--bd-danger: var(--bd-theme-palette-ef4444, #ef4444);
}
[data-theme="dark"] .bd-card,
[data-theme="dark"] .bd-modal,
[data-theme="dark"] .bd-table-flat {
background: var(--bd-soft);
border-color: var(--bd-border);
color: var(--bd-text);
}
[data-theme="dark"] .bd-input {
background: var(--bd-theme-bg-111111, #111);
color: var(--bd-text);
border-color: var(--bd-border);
}
[data-theme="dark"] .bd-chip,
[data-theme="dark"] .bd-badge {
background: var(--bd-theme-bg-2b2d31, #2b2d31) !important;
color: var(--bd-text) !important;
border-color: var(--bd-border) !important;
}
/* === Discovery Dark Mode Polish ================================ */
[data-theme="dark"] .bd-table-flat thead th {
background: var(--bd-theme-bg-23252a, #23252a);
color: var(--bd-muted);
}
/* === NAVBAR / LOGO ALIGN FIX ==================== */
.navbar, .topbar {
display:flex !important;
align-items:center !important;
justify-content:space-between !important;
}
.navbar-brand {
display:flex;
align-items:center;
padding-left:0 !important;
margin-left:0 !important;
flex:0 0 auto !important;
}
/* === NAVBAR / LOGO ALIGN FIX ==================== */
.navbar-brand img {
height:32px;
width:auto;
margin-right:.5rem;
}
.topbar .ms-auto { margin-left:0 !important; }
/* === COMPACT LIST-ROW CARDS (Estimates, Leads) =============== */
.estimate-row .bd-card,
.lead-row .bd-card {
padding:.5rem .75rem !important;
border-radius:.5rem !important;
}
.estimate-row .bd-card-body,
.lead-row .bd-card-body {
padding:.5rem .75rem !important;
}
/* === COMPACT LIST-ROW CARDS (Estimates, Leads) =============== */
.estimate-row .bd-card-header,
.lead-row .bd-card-header {
padding:.4rem .75rem !important;
}
/* === COMPACT NAV / PILL BUTTONS =============================== */
.navbar .bd-btn,
#estimate-nav .bd-btn,
.service-dashboard .bd-btn,
.navbar .btn,
#estimate-nav .btn {
font-size:.8rem !important;
padding:.25rem .55rem !important;
border-radius:.4rem !important;
line-height:1.1 !important;
}
.navbar, .topbar { min-height:56px !important; }
.bd-chip, .bd-badge { vertical-align:middle; }
.offcanvas {
z-index: 1045 !important;
}
.offcanvas-backdrop {
z-index: 1040 !important;
}
.offcanvas-backdrop {
background-color: var(--bd-theme-bg-000000-40, rgba(0,0,0,.25)) !important; /* softer than default .5 */
}
/* Rightbar font + sizing */
#rightbar {
font-family: var(--bd-font) !important;
font-size: 0.9rem;
color: var(--bd-text);
}
/* Offcanvas header Discovery style */
#rightbar .offcanvas-header {
padding: 0.5rem 0.75rem; /* tighter than Bootstrap default */
border-bottom: 1px solid var(--bd-border);
}
#rightbar .offcanvas-header h5 {
font-size: 0.95rem; /* smaller heading */
font-weight: 500;
margin: 0;
color: var(--bd-text);
letter-spacing: .1px;
}
/* Replace Bootstrap X */
#rightbar .bd-close {
border: 1px solid var(--bd-border);
border-radius: 6px;
padding: 2px 6px;
font-size: 0.9rem;
background: var(--bd-theme-bg-ffffff, #fff);
color: var(--bd-text);
cursor: pointer;
line-height: 1;
}
#rightbar .bd-close:hover {
background: var(--bd-theme-bg-f9f9f9, #f9f9f9);
}
/* Rightbar links → muted Discovery look, no Bootstrap purple */
#rightbar a {
color: var(--bd-text);
font-size: 0.85rem;
text-decoration: none;
}
#rightbar a:hover {
color: var(--bd-muted);
text-decoration: underline;
}
/* Card header labels inside rightbar */
#rightbar .section-title {
font-size: 0.8rem;
font-weight: 500;
color: var(--bd-muted);
letter-spacing: .04em;
margin-bottom: .35rem;
}
/* Offcanvas close icon anchored top right */
#rightbar .offcanvas-header {
position: relative;
padding: 0.5rem 0.75rem;
border-bottom: 1px solid var(--bd-border);
}
#rightbar .offcanvas-header .bd-close {
position: absolute;
top: 0.5rem;
right: 0.75rem;
border: none;
background: transparent;
font-size: 1rem;
color: var(--bd-muted);
cursor: pointer;
}
#rightbar .offcanvas-header .bd-close:hover {
color: var(--bd-text);
}
/* 🔍 Responsive global search bar */
.search-wrapper {
min-width: 180px; /* never collapse too far */
max-width: 100%; /* default full width */
}
@media (min-width: 576px) { /* sm+ */
.search-wrapper { max-width: 400px; }
}
@media (min-width: 768px) { /* md+ */
.search-wrapper { max-width: 600px; }
}
@media (min-width: 992px) { /* lg+ */
.search-wrapper { max-width: 800px; }
}
@media (min-width: 1200px) { /* xl+ */
.search-wrapper { max-width: 1000px; }
}
@media (min-width: 1400px) { /* xxl */
.search-wrapper { max-width: 1200px; }
}
/* 🔧 Remove white strip on left of logo box */
#page-topbar .navbar-header {
padding-left: 0 !important; /* override px-3 spacing */
}
#page-topbar .navbar-brand-box {
margin-left: 0 !important;
}
.fade-area.htmx-request {
opacity: 0.5;
transition: opacity 0.2s ease-in-out;
}
#search-clear {
background: transparent;
border: none;
line-height: 1;
}
#search-clear:hover {
color: var(--bd-theme-fg-000000, #000);
}
/* 🔄 Skeleton shimmer */
.skeleton {
position: relative;
background: var(--bd-theme-bg-f0f0f0, #f0f0f0);
overflow: hidden;
}
.skeleton::after {
content: "";
position: absolute;
top: 0; left: -150px;
height: 100%; width: 150px;
background: linear-gradient(90deg, transparent, var(--bd-theme-bg-ffffff-99, rgba(255,255,255,.6)), transparent);
animation: shimmer 1.2s infinite;
}
@keyframes shimmer {
100% { transform: translateX(100%); }
}
/* Fade dim when htmx request fires */
#main-content.htmx-request {
opacity: 0.5;
transition: opacity 0.2s ease-in-out;
}
/* === Quick Search Results (Discovery style) === */
.bd-search-loading{display:grid;grid-template-columns:minmax(0,1fr);align-content:center;justify-items:center;gap:.7rem;min-height:112px;padding:1rem;color:var(--bd-theme-fg-475467,#475467);font-size:.75rem;font-weight:800;text-align:center}.bd-search-loading>i{width:30px;height:30px;border:3px solid var(--bd-theme-border-cfd6e4,#cfd6e4);border-color:color-mix(in srgb,var(--bd-theme-accent,#24479b) 24%,transparent);border-top-color:var(--bd-theme-accent,#24479b);border-right-color:var(--bd-theme-accent,#24479b);border-radius:50%;animation:bd-search-spin .72s linear infinite}@keyframes bd-search-spin{to{transform:rotate(360deg)}}@media(prefers-reduced-motion:reduce){.bd-search-loading>i{animation:none}}
#quick-search-results .list-group {
border: 1px solid var(--bd-theme-border-000000, #000); /* thin black border like other Discovery cards */
border-radius: .5rem;
overflow: hidden;
}
#quick-search-results .list-group-item {
padding: .45rem .75rem;
font-size: .875rem;
border: none;
border-bottom: 1px solid var(--bd-theme-border-f0f0f0, #f0f0f0);
display: flex;
align-items: center;
gap: .5rem;
}
#quick-search-results .list-group-item:last-child {
border-bottom: none;
}
#quick-search-results .list-group-item:hover {
background-color: var(--bd-theme-bg-f8f9fa, #f8f9fa);
}
#quick-search-results .bd-badge {
font-size: .7rem;
padding: .2rem .45rem;
border-radius: .35rem;
flex-shrink: 0;
}
#quick-search-results .fw-medium {
font-weight: 500;
}
#quick-search-results .text-truncate {
max-width: 320px; /* keep snippet from pushing too wide */
}
/* === Quick Search Panel Animation === */
#quick-search-results {
opacity: 0;
transform: translateY(4px);
transition: opacity .18s ease, transform .18s ease;
pointer-events: none;
}
#quick-search-results.is-visible {
opacity: 1;
transform: translateY(0);
pointer-events: auto;
}
/* === Quick Search Loading Spinner Animation === */
#quick-search-results .loading-state {
opacity: 0;
transition: opacity .15s ease;
}
#quick-search-results .loading-state.show {
opacity: 1;
}
/* Force all icons in quick search panel to neutral (FA legacy + mdi) */
#quick-search-results i.fa-solid,
#quick-search-results i.fa-regular,
#quick-search-results i.fa-light,
#quick-search-results i.fa-duotone,
#quick-search-results i.mdi {
color: var(--bd-theme-fg-444444, #444) !important; /* soft dark neutral */
}
#quick-search-results .qs-item { position: relative; padding-right: 32px; }
#quick-search-results .qs-chevron {
position: absolute;
right: 12px;
top: 50%;
transform: translateY(-50%);
color: var(--bd-theme-fg-9aa0a6, #9aa0a6);
}
/* === Compact Estimate Row Cards =============================== */
.est-row.bd-card,
.estimate-list.bd-card {
margin-bottom: .35rem !important; /* reduce gap between cards */
border-radius: .45rem !important;
}
.est-row.bd-card > .px-2.py-2,
.estimate-list.bd-card > .px-2.py-2 {
padding-top: .25rem !important; /* tighten vertical padding */
padding-bottom: .25rem !important;
}
.est-row .bd-badge,
.est-row .bd-chip {
margin-top: 0 !important;
margin-bottom: 0 !important;
}
.est-row .col-est-owner,
.est-row .col-est-status,
.est-row .col-est-user {
line-height: 1.1 !important;
}
/* === Estimate Row Left Stripe (Kanban-style) ================== */
.est-row {
position: relative;
overflow: hidden;
}
.est-row.est-row {
box-shadow: inset var(--est-edge-size,6px) 0 0 var(--est-edge-color,var(--bd-theme-bg-6c757d, #6c757d)) !important;
transition: box-shadow .25s ease;
}
/* Hover / selected emphasis */
.est-row:hover { --est-edge-size: 8px; }
.est-row.selected.selected { --est-edge-size: 10px; box-shadow: inset var(--est-edge-size,10px) 0 0 var(--est-edge-color,var(--bd-theme-bg-6c757d, #6c757d)), inset 0 0 0 1px var(--bd-theme-shadow-000000-40, rgba(0,0,0,.25)) !important; }
/* Priority colors (override via inline style or class) */
.est-row.priority-high { --est-edge-color:var(--bd-theme-palette-dc3545, #dc3545); }
.est-row.priority-normal { --est-edge-color:var(--bd-theme-palette-ffc107, #ffc107); }
.est-row.priority-low { --est-edge-color:var(--bd-theme-palette-0d6efd, #0d6efd); }
.est-row.status-complete { --est-edge-color:var(--bd-theme-palette-198754, #198754); }
/* Offset internal content so it doesn’t overlap the stripe */
.est-row > .px-2.py-2,
.est-row > .p-2 {
padding-left: calc(var(--est-edge-size,6px) + .5rem) !important;
}
/* Any container that could clip: allow overflow during dropdown usage */
/* Any container that could clip: allow overflow during dropdown usage
(Exclude Bootstrap .modal so modal scrolling works) */
html, body { overflow: visible !important; }
.bd-card:has(.dropdown-menu.show, .ts-wrapper.open, .ts-dropdown, [aria-expanded='true'], .show > .dropdown-menu, details[open]),
.card:has(.dropdown-menu.show, .ts-wrapper.open, .ts-dropdown, [aria-expanded='true'], .show > .dropdown-menu, details[open]),
.offcanvas:has(.dropdown-menu.show, .ts-wrapper.open, .ts-dropdown, [aria-expanded='true'], .show > .dropdown-menu, details[open]),
.bd-modal:has(.dropdown-menu.show, .ts-wrapper.open, .ts-dropdown, [aria-expanded='true'], .show > .dropdown-menu, details[open]),
.bd-modal__body:has(.dropdown-menu.show, .ts-wrapper.open, .ts-dropdown, [aria-expanded='true'], .show > .dropdown-menu, details[open]),
.table-responsive:has(.dropdown-menu.show, .ts-wrapper.open, .ts-dropdown, [aria-expanded='true'], .show > .dropdown-menu, details[open]) {
overflow: visible !important;
}
.modal-backdrop { z-index: 5000 !important; }
/* Keep left-accent stripes inside rounded corners, exclude bulkbars/nav */
.bd-left-accent,
.bd-card.bd-left-accent { position: relative; overflow: hidden; border-radius: .5rem !important; }
.bd-left-accent::before {
content:""; position:absolute; top:0; left:0; bottom:0;
width: var(--edge-size,6px); background: var(--edge-color,var(--bd-theme-bg-6c757d, #6c757d));
border-top-left-radius:.5rem; border-bottom-left-radius:.5rem; pointer-events:none;
}
.bd-bulkbar.bd-left-accent::before,
#estimate-bulkbar.bd-left-accent::before,
.navbar.bd-left-accent::before,
.topbar.bd-left-accent::before { content:none !important; }
/* Default: anchor dropdown to the control (no portal) */
.ts-dropdown,
.ts-wrapper .ts-dropdown {
position: absolute !important;
z-index: 3000 !important; /* above cards/toolbars */
max-height: 260px !important;
overflow-y: auto !important;
background: var(--bd-theme-bg-ffffff, #fff) !important;
border: 1px solid var(--bd-border);
box-shadow: 0 4px 12px var(--bd-theme-shadow-000000-26, rgba(0,0,0,.15));
}
/* When we portal dropdown into #bd-portal-root, make it fixed & top-most */
#bd-portal-root .ts-dropdown {
position: fixed !important;
z-index: 9999999 !important;
pointer-events: auto;
max-height: 260px !important;
overflow-y: auto !important;
}
/* While a portal dropdown is open, allow overflow and kill transforms */
.bd-portal-open .modal-overlay,
.bd-portal-open .modal-panel {
transform: none !important;
contain: initial !important;
will-change: auto !important;
}
.bd-portal-open .modal-panel,
.bd-portal-open .modal-overlay .card,
.bd-portal-open .modal-overlay .bd-card {
overflow: visible !important;
}
/* =========================================================
TOMSELECT – HARD COMPAT OVERRIDE (final, last-in-wins)
Paste at end of discovery.css
========================================================= */
/* 0) Never let the wrapper clip chips or the dropdown */
html body .ts-wrapper { overflow: visible !important; }
/* 1) Core wrapper */
html body .ts-wrapper.form-select-sm,
html body .ts-wrapper.tag-input,
html body .ts-wrapper.owner-input {
width: 100% !important;
max-width: 100% !important;
border: 1px solid var(--bd-border) !important;
border-radius: 6px !important;
background: var(--bd-theme-bg-ffffff, #fff) !important;
font-size: .875rem !important;
box-sizing: border-box !important;
margin: 0 !important;
display: flex !important;
align-items: center !important;
padding: 0 !important;
}
/* 2) Inner control */
html body .ts-wrapper .ts-control {
border: 0 !important;
background: transparent !important;
box-shadow: none !important;
min-height: 26.55px !important; /* baseline */
height: auto !important;
padding: 0 .5rem !important;
display: flex !important;
align-items: center !important;
flex-wrap: wrap !important; /* allow chips to flow */
}
/* 3) Single-select height */
html body .ts-wrapper.form-select-sm.single {
min-height: 26.55px !important;
height: 26.55px !important;
align-items: center !important;
}
/* 4) Multi/tag selects: allow growth, no chip clipping */
html body .ts-wrapper.multi.form-select-sm,
html body .ts-wrapper.multi.tag-input {
min-height: 26.55px !important;
height: auto !important;
align-items: flex-start !important;
}
html body .ts-wrapper.multi .ts-control {
padding: 2px 4px !important;
gap: 2px !important;
}
/* 5) Chip styling (compact, readable, fits in control) */
html body .ts-wrapper.multi .ts-control .item {
background: var(--bd-theme-bg-e9ecef, #e9ecef) !important;
border: 1px solid var(--bd-border) !important;
border-radius: .3rem !important;
padding: 0 6px !important;
font-size: .75rem !important;
line-height: 1.3 !important;
margin: 1px 2px 1px 0 !important;
color: var(--bd-theme-fg-000000, #000) !important;
display: inline-flex !important;
align-items: center !important;
max-height: 20px !important; /* prevents vertical chop */
}
/* 6) Input element itself */
html body .ts-wrapper .ts-control input {
flex: 1 1 auto !important;
min-width: 120px !important;
height: auto !important;
line-height: 1.2 !important;
font-size: .8rem !important;
margin: 0 !important;
padding: 0 !important;
border: 0 !important;
background: transparent !important;
}
/* 7) Owner-style single (plain text appearance) */
html body .ts-wrapper.owner-input,
html body .ts-wrapper.owner-input.single {
min-height: 26.55px !important;
height: 26.55px !important;
align-items: center !important;
}
html body .ts-wrapper.owner-input .ts-control .item,
html body .ts-wrapper.owner-input .ts-control .ts-item-as-text {
background: transparent !important;
border: 0 !important;
padding: 0 !important;
margin: 0 !important;
line-height: 1.2 !important;
font-size: .875rem !important;
box-shadow: none !important;
color: var(--bd-text) !important;
}
/* 8) Dropdown rows */
html body .ts-dropdown .option {
padding: .25rem .5rem !important;
display: flex !important;
align-items: center !important;
gap: .35rem !important;
font-size: .8rem !important;
line-height: 1.2 !important;
}
/* 9) Dropdown box + stacking (default anchor) */
html body .ts-dropdown,
html body .ts-wrapper .ts-dropdown {
position: absolute !important; /* anchor to control */
z-index: 500000 !important; /* above cards/toolbars */
max-height: 260px !important;
overflow-y: auto !important;
background: var(--bd-theme-bg-ffffff, #fff) !important;
border: 1px solid var(--bd-border) !important;
box-shadow: 0 4px 12px var(--bd-theme-shadow-000000-26, rgba(0,0,0,.15)) !important;
}
/* 10) Open-state guard (in case display is suppressed by other CSS) */
html body .ts-wrapper.open .ts-dropdown {
display: block !important;
opacity: 1 !important;
visibility: visible !important;
}
/* 11) Card/Modal clipping killers while dropdown is open */
html body .bd-card,
html body .bd-subcard,
html body .card,
html body .modal,
html body .modal * {
overflow: visible !important; /* allow the menu to escape */
}
html body .modal { z-index: 1060 !important; } /* over backdrop */
html body .modal-backdrop {
z-index: 1050 !important;
background-color: var(--bd-theme-bg-090b11-8c, rgba(9,11,17,.55)) !important;
}
/* 12) Portal mode (if JS moves dropdown to #bd-portal-root) */
html body #bd-portal-root .ts-dropdown {
position: fixed !important; /* anchor to viewport */
z-index: 9999999 !important; /* top-most */
pointer-events: auto !important;
max-height: 260px !important;
overflow-y: auto !important;
background: var(--bd-theme-bg-ffffff, #fff) !important;
border: 1px solid var(--bd-border) !important;
box-shadow: 0 6px 20px var(--bd-theme-shadow-000000-33, rgba(0,0,0,.2)) !important;
}
/* 13) Touch target bump on small screens */
@media (max-width: 768px) {
html body .ts-wrapper.form-select-sm,
html body .ts-wrapper.tag-input,
html body .ts-wrapper.owner-input {
min-height: 34px !important;
}
}
/* 14) Lead filter bar parity (keeps toolbar aligned) */
html body #lead-search-form .form-select-sm,
html body #lead-search-form .ts-wrapper.form-select-sm,
html body #lead-search-form .ts-wrapper.js-tag-filter {
height: 26.55px !important;
min-height: 26.55px !important;
max-height: 26.55px !important;
font-size: .8rem !important;
line-height: 1.2 !important;
display: flex !important;
align-items: center !important;
}
html body #lead-search-form .ts-wrapper .ts-control {
height: 100% !important;
padding: 0 .5rem !important;
display: flex !important;
align-items: center !important;
}
html body #lead-search-form .ts-wrapper.multi .ts-control .item {
background: var(--bd-theme-bg-e9ecef, #e9ecef) !important;
border: 1px solid var(--bd-theme-border-000000, #000) !important;
border-radius: .25rem !important;
font-size: .7rem !important;
line-height: 1.2 !important;
padding: 0 5px !important;
margin: 1px 2px 1px 0 !important;
max-height: 16px !important;
}
/* 15) Absolute last word on z-index if something else still wins */
html body .ts-dropdown { z-index: 2147483000 !important; }
/* =========================================================
Bootstrap Modal — Scroll Restore (Discovery hard fix)
========================================================= */
/* The dialog sits inside the viewport with a hard cap */
html body .modal .modal-dialog {
max-width: 900px;
max-height: calc(100vh - 3rem);
display: flex;
align-items: center; /* keeps it centered vertically */
}
/* Make content a flex column so only the body scrolls */
html body .modal .modal-content {
display: flex !important;
flex-direction: column !important;
max-height: calc(100vh - 3rem) !important;
overflow: hidden !important; /* prevent double scroll */
}
/* Header/footer pinned; body is the scroll container */
html body .modal .modal-header,
html body .modal .modal-footer {
flex: 0 0 auto !important;
}
html body .modal .modal-body {
flex: 1 1 auto !important;
overflow-y: auto !important;
-webkit-overflow-scrolling: touch;
padding-right: 12px; /* room for scrollbar */
}
/* TomSelect: dropdowns render in so no clipping;
keep them above the modal just in case */
html body .ts-dropdown {
z-index: 2147483000 !important;
}
/* If you ever enable a portal 'open' state, you can allow modal
overflow for that specific case only.
.bd-portal-open .modal { overflow: visible !important; } */
/* === BuildDaily Modal Pointer Fix === */
.modal.show .modal-dialog {
pointer-events: auto !important;
}
.modal.fade.show .modal-dialog {
pointer-events: auto !important;
transform: none !important; /* prevents mis-calc of height in nested stack */
}
/* === BuildDaily Modal Visible Scrollbar === */
body .modal.show .modal-body {
scrollbar-width: thin !important; /* Firefox */
scrollbar-color: var(--bs-dark) var(--bd-theme-palette-f1f1f1, #f1f1f1) !important; /* Firefox track/thumb */
/* Chrome / Edge / Safari */
}
body .modal.show .modal-body::-webkit-scrollbar {
width: 8px !important;
}
body .modal.show .modal-body::-webkit-scrollbar-track {
background: var(--bd-theme-bg-f1f1f1, #f1f1f1) !important;
}
body .modal.show .modal-body::-webkit-scrollbar-thumb {
background: var(--bs-dark) !important;
border-radius: 4px;
}
body .modal.show .modal-body::-webkit-scrollbar-thumb:hover {
background: var(--bd-theme-bg-555555, #555) !important;
}
/* =====================================================================
🔧 GLOBAL FIX — Discovery / Bootstrap modal layout normalization
---------------------------------------------------------------------
Restores proper column layout and compact footer height for all modals.
===================================================================== */
.modal-content {
display: flex !important;
flex-direction: column !important;
height: auto !important;
max-height: 92vh !important;
}
/* Body scrolls, footer pinned */
.modal-body {
flex: 1 1 auto !important;
overflow-y: auto !important;
max-height: calc(92vh - 6rem) !important;
}
/* Compact, non-growing footer */
.modal-footer {
flex: 0 0 auto !important;
padding: 0.5rem 0.75rem !important;
height: auto !important;
min-height: unset !important;
background: var(--bd-theme-bg-ffffff, #fff) !important;
border-top: 1px solid var(--bd-theme-border-000000, #000) !important;
}
/* Defensive reset: prevent forms or inner wrappers from forcing full height */
.modal-content form,
.modal-content > form,
.modal-dialog > form {
display: block !important;
height: auto !important;
max-height: none !important;
}
/* Ensure Bootstrap's default modal dialog sizing applies */
.modal-dialog {
height: auto !important;
max-height: 100% !important;
margin: 1.5rem auto !important;
}
/* === Discovery Compact Input Group Icon Fix === */
.input-group-sm .input-group-text {
height: 25px !important; /* match Discovery input height */
min-height: 25px !important;
line-height: 1.2 !important;
padding: 0 6px !important;
display: flex !important;
align-items: center !important;
justify-content: center !important;
border-radius: 4px !important;
}
.input-group-sm .input-group-text i {
font-size: 0.8rem;
color: var(--bd-muted);
line-height: 1;
margin-top: 0;
}
/* 🔍 Align search icon inline with input */
.bd-input-icon {
position: relative;
display: flex;
align-items: center;
}
.bd-input-icon .bd-icon {
position: absolute;
left: 10px;
top: 50%;
transform: translateY(-50%);
color: var(--bd-theme-fg-6c757d, #6c757d);
font-size: 0.9rem;
pointer-events: none;
}
.bd-has-left-icon {
padding-left: 2rem !important; /* room for icon */
}
/* === Real-time Activity Flash (Discovery style) === */
@keyframes bdActivityFlash {
0% { background-color: var(--bd-theme-bg-fff8c4, #fff8c4); } /* pale yellow */
50% { background-color: var(--bd-theme-bg-fffce8, #fffce8); }
100% { background-color: transparent; }
}
.bd-flash {
animation: bdActivityFlash 2.2s ease-out forwards;
border-radius: 4px;
}
/* === Timesheet Row Flash for Live Updates === */
@keyframes bdRowFlash {
0% { background-color: var(--bd-theme-bg-cde5ff, #cde5ff); } /* soft blue */
50% { background-color: var(--bd-theme-bg-e9f3ff, #e9f3ff); }
100% { background-color: transparent; }
}
.bd-row-flash {
animation: bdRowFlash 2.5s ease-out forwards;
transition: background-color 0.3s ease;
}
/* === PTO Row Flash (Discovery Info Highlight) === */
@keyframes bdPtoFlash {
0% { background-color: var(--bd-theme-bg-fcefc2, #fcefc2); } /* pale gold */
50% { background-color: var(--bd-theme-bg-fff8dc, #fff8dc); }
100% { background-color: transparent; }
}
/* ============================================================
BUILD DAILY — BIDDER PRICE CHIP OVERRIDE (authoritative)
Ensures all bidder pricing chips render in Discovery style
============================================================ */
.bd-price-chip,
.bd-price-chip.good,
.bd-price-chip.warn,
.bd-price-chip.bad,
.bd-price-chip.muted,
.bd-price-chip.info {
display: inline-flex !important;
align-items: center !important;
justify-content: center !important;
gap: .35rem !important;
padding: .2rem .55rem !important;
font-size: .8rem !important;
font-weight: 500 !important;
border: 1px solid var(--bd-theme-border-000000, #000) !important;
border-radius: .5rem !important;
line-height: 1.2 !important;
min-width: 80px !important;
text-align: center !important;
background: var(--bd-theme-bg-ffffff, #fff) !important;
color: var(--bd-theme-fg-212529, #212529) !important;
}
/* === Contextual variants === */
.bd-price-chip.good { background: var(--bd-theme-bg-e8f9e9, #e8f9e9) !important; border-color: var(--bd-theme-border-28a745, #28a745) !important; color: var(--bd-theme-fg-155724, #155724) !important; }
.bd-price-chip.warn { background: var(--bd-theme-bg-fff7e6, #fff7e6) !important; border-color: var(--bd-theme-border-f0ad4e, #f0ad4e) !important; color: var(--bd-theme-fg-a96f05, #a96f05) !important; }
.bd-price-chip.bad { background: var(--bd-theme-bg-ffe5e5, #ffe5e5) !important; border-color: var(--bd-theme-border-dc3545, #dc3545) !important; color: var(--bd-theme-fg-b02a37, #b02a37) !important; }
.bd-price-chip.muted { background: var(--bd-theme-bg-f1f3f5, #f1f3f5) !important; border-color: var(--bd-theme-border-6c757d, #6c757d) !important; color: var(--bd-theme-fg-495057, #495057) !important; }
.bd-price-chip.info { background: var(--bd-theme-bg-e7f1fb, #e7f1fb) !important; border-color: var(--bd-theme-border-0d6efd, #0d6efd) !important; color: var(--bd-theme-fg-0b5ed7, #0b5ed7) !important; }
/* Optional hover polish */
.bd-price-chip:hover {
filter: brightness(0.97);
transition: filter .12s ease-in-out;
}
/* === BIDDER PRICE CHIP STATE ENHANCEMENTS === */
/* Locked prices show green “good” styling */
.bd-price-chip.locked {
background: var(--bd-theme-bg-e8f9e9, #e8f9e9) !important;
border-color: var(--bd-theme-border-28a745, #28a745) !important;
color: var(--bd-theme-fg-155724, #155724) !important;
}
/* Draft / editable pricing stays neutral */
.bd-price-chip.editable {
background: var(--bd-theme-bg-ffffff, #fff) !important;
border-color: var(--bd-theme-border-000000, #000) !important;
color: var(--bd-theme-fg-212529, #212529) !important;
}
/* Hover cue for editable chips only */
.bd-price-chip.editable:hover {
background: var(--bd-theme-bg-fff9db, #fff9db) !important;
cursor: pointer;
}
.bd-pto-flash {
animation: bdPtoFlash 2.5s ease-out forwards;
transition: background-color 0.3s ease;
}
[data-pto-id]:nth-child(odd).bd-pto-flash { animation-delay: 0.1s; }
[data-pto-id]:nth-child(even).bd-pto-flash { animation-delay: 0.25s; }
.bd-focus-row { outline:2px solid var(--bd-theme-border-000000, #000); background:var(--bd-theme-bg-fffbe6, #fffbe6) !important; transition:background .15s; }
.bd-chip-clickable {
border: 1px solid var(--bd-theme-border-000000, #000);
border-radius: 8px;
padding: 2px 8px;
cursor: pointer;
user-select: none;
transition: background-color .2s;
}
.bd-chip-clickable:hover { background-color: var(--bd-theme-bg-f8f9fa, #f8f9fa); }
.bd-chip-clickable.active { background-color: var(--bd-theme-bg-000000, #000); color: var(--bd-theme-fg-ffffff, #fff); }
/* ======================================================
GLOBAL DISCOVERY CARD AESTHETIC — Unified White Panels
====================================================== */
/* Base card surfaces */
.bd-card,
.bd-subcard,
.card {
background-color: var(--bd-theme-bg-ffffff, #fff) !important; /* Pure white surface */
border: 1px solid var(--bd-theme-border-000000-26, rgba(0, 0, 0, 0.15)) !important; /* Subtle border */
border-radius: 0.75rem !important; /* Soft Discovery corners */
box-shadow: 0 2px 6px var(--bd-theme-shadow-000000-0d, rgba(0, 0, 0, 0.05)) !important; /* Gentle lift */
color: var(--bd-theme-fg-1a1a1a, #1a1a1a); /* Crisp dark text */
}
/* Keep nested cards consistent */
.bd-card .card,
.bd-subcard .card {
background-color: var(--bd-theme-bg-ffffff, #fff) !important;
border: 1px solid var(--bd-theme-border-000000-1a, rgba(0, 0, 0, 0.1)) !important;
box-shadow: none !important;
}
/* Table and form elements inside cards stay clean white */
.bd-card table,
.bd-card input,
.bd-card select,
.bd-card textarea {
background-color: var(--bd-theme-bg-ffffff, #fff) !important;
}
/* Page background — faint neutral gray for separation */
body,
.container-fluid,
#module-body,
.section-panel,
.module-content {
background-color: var(--bd-theme-bg-f5f6f7, #f5f6f7) !important;
}
/* Compact headers inside cards */
.bd-card > .card-header,
.bd-subcard > .card-header {
background-color: var(--bd-theme-bg-ffffff, #fff) !important;
border-bottom: 1px solid var(--bd-theme-border-000000-1a, rgba(0, 0, 0, 0.1)) !important;
font-weight: 500;
}
/* Discovery badge, chip, and table polish */
.bd-badge {
border-radius: 0.25rem !important;
font-weight: 500;
}
.table {
background-color: var(--bd-theme-bg-ffffff, #fff) !important;
border-color: var(--bd-theme-border-000000-26, rgba(0, 0, 0, 0.15)) !important;
}
.table thead {
background-color: var(--bd-theme-bg-fafafa, #fafafa) !important;
border-bottom: 1px solid var(--bd-theme-border-000000-1a, rgba(0, 0, 0, 0.1)) !important;
}
/* Slight fade for empty state text */
.text-muted,
small.text-muted {
color: var(--bd-theme-fg-000000-8c, rgba(0, 0, 0, 0.55)) !important;
}
/* Optional: smoother hover lift */
.hover-lift:hover {
box-shadow: 0 4px 10px var(--bd-theme-shadow-000000-14, rgba(0, 0, 0, 0.08)) !important;
transition: box-shadow 0.2s ease-in-out;
}
/* ======================================================
GLOBAL FONT FIX — Override Bootstrap’s default stack
====================================================== */
html, body {
font-family: "Inter", "Roboto", "Helvetica Neue", Arial, sans-serif !important;
font-weight: 400;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
}
/* Ensure all form controls, buttons, modals, tables, chips, etc inherit */
button,
input,
optgroup,
select,
textarea,
label,
.table,
.nav,
.navbar,
.dropdown-menu,
.modal,
.bd-card,
.bd-subcard,
.card {
font-family: inherit !important;
font-weight: 400;
}
/* Slightly heavier headings for Discovery look */
h1, h2, h3, h4, h5, h6,
.bd-card h5, .bd-subcard h6 {
font-family: inherit !important;
font-weight: 500;
letter-spacing: -0.01em;
}
/* Optional: prevent Bootstrap italicization on small tags */
small, .small {
font-style: normal !important;
}
/* Optional – tighter text rendering */
body {
text-rendering: optimizeLegibility;
line-height: 1.45;
}
/* A hardcoded 0.5rem corner override lived here (twice). It pinned every
table to one radius regardless of the container it sat in, and fought
the inherit chain above. The corner cells follow the table now. */
.table thead th {
background-color: var(--bd-theme-bg-f8f9fa, #f8f9fa) !important; /* keep light header tone */
border-bottom: 1px solid var(--bd-theme-border-dee2e6, #dee2e6);
position: relative;
z-index: 1;
}
/* prevent from overlapping the card border */
.table thead {
overflow: hidden;
border-top-left-radius: 0.5rem;
border-top-right-radius: 0.5rem;
}
/* === Discovery Table: perfect rounded corners (top & bottom) === */
/* Make the table wrapper inherit the card's corner radius and clip children */
.bd-card > .table-responsive,
.bd-card .bd-table-wrap {
border-radius: inherit; /* ← matches .rounded-* exactly */
overflow: hidden; /* ← masks header/body backgrounds */
}
/* Remove double borders and keep Discovery look */
.bd-card .table {
margin-bottom: 0;
border: none !important;
background-color: var(--bd-theme-bg-ffffff, #fff); /* body surface */
}
.bd-card .table thead th {
background-color: var(--bd-theme-bg-f8f9fa, #f8f9fa) !important; /* light header */
border-bottom: 1px solid var(--bd-theme-border-dee2e6, #dee2e6) !important;
}
/* TOP corners: inherit from parent so it always matches the card */
.bd-card .table thead tr:first-child th:first-child { border-top-left-radius: inherit; }
.bd-card .table thead tr:first-child th:last-child { border-top-right-radius: inherit; }
/* BOTTOM corners (works with or without ) */
.bd-card .table tfoot tr:last-child th:first-child,
.bd-card .table tbody tr:last-child td:first-child { border-bottom-left-radius: inherit; }
.bd-card .table tfoot tr:last-child th:last-child,
.bd-card .table tbody tr:last-child td:last-child { border-bottom-right-radius: inherit; }
/* === 🔔 BuildDaily Sexy Notifications === */
#notif-wrapper {
position: relative;
}
.notif-btn {
border: none !important;
background: transparent !important;
transition: transform .15s ease;
}
.notif-btn:hover { transform: scale(1.1); }
.notif-badge {
font-size: 0.65rem;
font-weight: 600;
box-shadow: 0 0 0 2px var(--bd-theme-shadow-ffffff, #fff);
animation: notif-bounce 0.3s ease;
}
@keyframes notif-bounce {
0% { transform: scale(0); opacity: 0; }
70% { transform: scale(1.25); opacity: 1; }
100% { transform: scale(1); }
}
.notif-pulse {
position: absolute;
inset: 0;
border-radius: 50%;
border: 2px solid var(--bd-theme-border-1f6fe5, #1f6fe5);
opacity: 0;
transform: scale(0.8);
pointer-events: none;
}
.notif-pulse.active {
animation: notif-pulse 1.4s ease-out forwards;
}
@keyframes notif-pulse {
0% { opacity: 0.8; transform: scale(0.8); }
50% { opacity: 0.5; transform: scale(1.3); }
100% { opacity: 0; transform: scale(1.7); }
}
/* Dropdown animation */
.notif-dropdown {
transform-origin: top right;
animation: notif-fadein .15s ease-out;
}
@keyframes notif-fadein {
from { opacity: 0; transform: scale(0.96) translateY(-4px); }
to { opacity: 1; transform: scale(1) translateY(0); }
}
.notif-badge.flash {
animation: notif-flash 0.8s ease-in-out;
}
@keyframes notif-flash {
0%,100% { background-color:var(--bd-theme-bg-dc3545, #dc3545); }
50% { background-color:var(--bd-theme-bg-1f6fe5, #1f6fe5); }
}
/* Optional: if you use .table-light footer */
.bd-card .table tfoot th,
.bd-card .table tfoot td {
background-color: var(--bd-theme-bg-ffffff, #fff); /* or #f8f9fa if you want a light footer */
border-top: 1px solid var(--bd-theme-border-dee2e6, #dee2e6) !important;
}
/* Safety: keep backgrounds inside the rounded shape */
.bd-card .table thead th,
.bd-card .table tfoot th,
.bd-card .table tfoot td,
.bd-card .table tbody td {
background-clip: padding-box;
}
/* ============================================================
🩹 GLOBAL FIX — Rounded Table Corners + TomSelect Dropdown Safety
Keeps perfect corners but restores overflow for active dropdowns
============================================================ */
/* --- Default: Rounded corners, clean mask --- */
html body .bd-card > .table-responsive,
html body .bd-card .bd-table-wrap,
html body .estimate-list-header,
html body .table-responsive {
position: relative !important;
border-radius: 0.75rem !important;
overflow: hidden !important; /* mask table edges */
background-clip: padding-box !important;
isolation: isolate !important;
z-index: 0 !important;
}
/* --- Table body and header shape --- */
html body .table,
html body .bd-card .table {
border-collapse: separate !important;
border-spacing: 0 !important;
border-radius: inherit !important;
background-color: var(--bd-theme-bg-ffffff, #fff) !important;
}
/* --- Clean top and bottom rounding ---
*
* `border-radius: inherit` on a | inherits from its PARENT, which is the
* | — not the . The has no radius, so this rule, which wins on
* specificity and !important, was resolving every corner cell to 0 and putting
* a square corner on top of every rounded table in the app. That is the clipped
* corner people kept reporting on cards and registers.
*
* A also cannot clip its own cells, so `overflow: hidden` is not a fix
* either. The corner cells have to carry the radius themselves — so make
* `inherit` actually chain down the table's own box tree first.
*/
html body :is(.table, .bd-table) > thead,
html body :is(.table, .bd-table) > tbody,
html body :is(.table, .bd-table) > tfoot { border-radius: inherit; }
html body :is(.table, .bd-table) > thead > tr:first-child {
border-top-left-radius: inherit;
border-top-right-radius: inherit;
}
html body :is(.table, .bd-table) > tbody > tr:last-child,
html body :is(.table, .bd-table) > tfoot > tr:last-child {
border-bottom-left-radius: inherit;
border-bottom-right-radius: inherit;
}
/* Only when there is no does the first body row sit at the top corners.
Giving it a radius unconditionally rounded the row while its own end cell
stayed square, which is the same defect one level down. */
html body :is(.table, .bd-table):not(:has(> thead)) > tbody > tr:first-child {
border-top-left-radius: inherit;
border-top-right-radius: inherit;
}
html body :is(.table, .bd-table) > thead > tr:first-child > th:first-child,
html body :is(.table, .bd-table) > thead > tr:first-child > td:first-child { border-top-left-radius: inherit !important; }
html body :is(.table, .bd-table) > thead > tr:first-child > th:last-child,
html body :is(.table, .bd-table) > thead > tr:first-child > td:last-child { border-top-right-radius: inherit !important; }
html body :is(.table, .bd-table) > tbody > tr:last-child > td:first-child,
html body :is(.table, .bd-table) > tbody > tr:last-child > th:first-child { border-bottom-left-radius: inherit !important; }
html body :is(.table, .bd-table) > tbody > tr:last-child > td:last-child,
html body :is(.table, .bd-table) > tbody > tr:last-child > th:last-child { border-bottom-right-radius: inherit !important; }
/* A table with no starts at the first body row. */
html body :is(.table, .bd-table):not(:has(> thead)) > tbody > tr:first-child > td:first-child,
html body :is(.table, .bd-table):not(:has(> thead)) > tbody > tr:first-child > th:first-child { border-top-left-radius: inherit !important; }
html body :is(.table, .bd-table):not(:has(> thead)) > tbody > tr:first-child > td:last-child,
html body :is(.table, .bd-table):not(:has(> thead)) > tbody > tr:first-child > th:last-child { border-top-right-radius: inherit !important; }
/* --- Visual polish --- */
html body .table thead th {
background-color: var(--bd-theme-bg-f8f9fa, #f8f9fa) !important;
border-bottom: 1px solid var(--bd-theme-border-000000, #000) !important;
position: relative !important;
z-index: 1 !important;
}
/* --- Card wrapper single black border --- */
html body .bd-card,
html body .card {
border: 1px solid var(--bd-theme-border-000000, #000) !important;
border-radius: 0.75rem !important;
background: var(--bd-theme-bg-ffffff, #fff) !important;
box-shadow: none !important;
isolation: isolate !important;
position: relative !important;
z-index: 1 !important;
}
/* ============================================================
🪄 TomSelect Open-State Override
Re-enables overflow so dropdowns never clip
============================================================ */
/* When dropdown is open, allow overflow again */
html body .bd-card:has(.ts-wrapper.open),
html body .card:has(.ts-wrapper.open),
html body .table-responsive:has(.ts-wrapper.open),
html body .bd-table-wrap:has(.ts-wrapper.open) {
overflow: visible !important;
z-index: 5000 !important; /* raise above sibling cards */
}
/* Ensure dropdown floats top-most */
html body .ts-dropdown {
z-index: 2147483000 !important; /* topmost layer */
}
/* ============================================================
🧩 GLOBAL FIX — TomSelect Dropdown Z-Index Escalation
Ensures dropdowns render above sibling cards, sticky headers, etc.
============================================================ */
/* Core dropdown layer — always above cards, tables, sticky bars */
html body .ts-dropdown,
html body .ts-wrapper .ts-dropdown {
position: absolute !important;
z-index: 999999 !important; /* above cards, navs, sticky headers */
pointer-events: auto !important;
background: var(--bd-theme-bg-ffffff, #fff) !important;
border: 1px solid var(--bd-theme-border-000000, #000) !important;
border-radius: 0.4rem !important;
box-shadow: 0 6px 20px var(--bd-theme-shadow-000000-40, rgba(0,0,0,0.25)) !important;
}
/* When rendered in the portal root (used by Discovery for modals) */
html body #bd-portal-root .ts-dropdown {
position: fixed !important;
z-index: 2147483000 !important; /* truly topmost */
pointer-events: auto !important;
}
/* Optional: small overlap safety margin to avoid shadow cutoff */
html body .ts-dropdown::after {
content: "";
position: absolute;
inset: -2px;
pointer-events: none;
}
/* Make sure parent cards don’t override this layer */
html body .bd-card,
html body .card,
html body .estimate-list-header,
html body .bd-table-wrap,
html body .table-responsive {
z-index: 1 !important; /* keep them low enough */
}
.bd-micro-pipeline {
position: relative;
overflow: hidden;
background: var(--bd-theme-bg-f8f9fa, #f8f9fa) !important;
border: 1px solid var(--bd-theme-border-000000, #000) !important;
border-radius: 999px !important;
height: 6px !important;
width: 110px !important;
}
.bd-micro-pipeline .fill {
position: absolute;
top: 0; left: 0;
height: 100%;
width: 0%;
border-radius: 999px;
transition: width 1s ease;
z-index: 2; /* keep above background */
background: var(--bd-theme-bg-dee2e6, #dee2e6); /* safe default */
}
/* === Discovery Nav-Link Toggle Buttons === */
.bd-nav-link {
display:inline-flex;
align-items:center;
gap:0.35rem;
font-size:0.85rem;
font-weight:500;
border:1px solid var(--bd-theme-border-000000, #000);
border-radius:0.4rem;
padding:4px 10px;
cursor:pointer;
background:var(--bd-theme-bg-ffffff, #fff);
color:var(--bd-theme-fg-111111, #111);
user-select:none;
transition:background .15s ease, color .15s ease, box-shadow .15s ease;
}
.bd-nav-link:hover {
background:var(--bd-theme-bg-f3f3f3, #f3f3f3);
}
.bd-nav-link.active {
background:var(--bd-theme-bg-111111, #111);
color:var(--bd-theme-fg-ffffff, #fff);
box-shadow:0 0 0 2px var(--bd-theme-shadow-111111, #111) inset;
}
.bd-nav-link i {
font-size:0.9em;
}
.bd-nav-link input[type="radio"],
.bd-nav-link input[type="checkbox"] {
display:none;
}
/* === Discovery Form Label Readability Fix === */
.bd-card .form-label,
form .form-label {
font-size: 0.85rem !important; /* one step larger than .small */
font-weight: 500 !important;
color: var(--bd-text) !important;
margin-bottom: 0.25rem !important;
}
[data-theme="dark"] .form-label {
color: var(--bd-text) !important;
}
/* === Discovery Button Shape Override (kill Bootstrap pill rounding) === */
html body .bd-btn,
html body button.bd-btn,
html body .bd-btn-sm {
border-radius: 4px !important; /* crisp Discovery corners */
box-shadow: none !important;
font-weight: 600 !important;
text-transform: none !important;
}
html body .bd-btn-dark {
background: var(--bd-theme-bg-000000, #000) !important;
color: var(--bd-theme-fg-ffffff, #fff) !important;
border: 1px solid var(--bd-theme-border-000000, #000) !important;
}
html body .bd-btn-outline {
background: var(--bd-theme-bg-ffffff, #fff) !important;
color: var(--bd-theme-fg-000000, #000) !important;
border: 1px solid var(--bd-theme-border-000000, #000) !important;
}
html body .bd-btn-outline:hover {
background: var(--bd-theme-bg-f1f1f1, #f1f1f1) !important;
}
/* === TOPBAR — Logo responsive + collapse sync === */
#page-topbar .navbar-brand-box .logo-lg { display: none !important; }
#page-topbar .navbar-brand-box .logo-sm { display: inline-block !important; }
@media (min-width: 992px) {
#page-topbar .navbar-brand-box .logo-lg { display: inline-block !important; }
#page-topbar .navbar-brand-box .logo-sm { display: none !important; }
/* Flip to small logo when the menu is collapsed */
body.vertical-collapsed #page-topbar .navbar-brand-box .logo-lg { display: none !important; }
body.vertical-collapsed #page-topbar .navbar-brand-box .logo-sm { display: inline-block !important; }
}
/* Also support the direct .collapsed toggle on the brand box */
#page-topbar .navbar-brand-box.collapsed .logo-lg { display: none !important; }
#page-topbar .navbar-brand-box.collapsed .logo-sm { display: inline-block !important; }
/* === TOPBAR — Desktop search icon exact alignment === */
#page-topbar .bd-input-icon { position: relative !important; }
#page-topbar .bd-input-icon .bd-icon {
position: absolute !important;
left: 12px !important; /* fixed left */
top: 50% !important; /* vertical center */
transform: translateY(-50%) !important;
margin-left: 0 !important; /* kill Bootstrap ms-* margin */
font-size: .9rem !important;
color: var(--bd-muted) !important;
pointer-events: none !important;
}
/* input padding to match icon offset */
#page-topbar #global-search,
#page-topbar input.bd-has-left-icon {
padding-left: 2.1rem !important;
height: 34px !important;
line-height: 34px !important;
}
/* ==========================================================
📱 RFP Scope Row – Mobile Responsiveness Fix
========================================================== */
@media (max-width: 768px) {
/* Stack the header row */
#rfp-section .bd-card > .d-flex,
#rfp-section .bd-card .p-2.d-flex {
flex-wrap: wrap !important;
flex-direction: column !important;
align-items: flex-start !important;
gap: .4rem !important;
}
/* Each sub-block should fill full width */
#rfp-section .bd-card .d-flex > div {
width: 100% !important;
}
/* Move the right-aligned controls to bottom row */
#rfp-section .bd-card .d-flex > .dropdown,
#rfp-section .bd-card .d-flex > .d-flex.ms-2 {
align-self: stretch !important;
display: flex !important;
justify-content: flex-start !important;
}
/* Compact the chips and icons for touch */
#rfp-section .bd-card .bd-chip,
#rfp-section .bd-card .bd-badge {
font-size: 0.78rem !important;
padding: 2px 6px !important;
}
/* Tighten buttons in action row */
#rfp-section .bd-card .btn.btn-sm {
padding: 0.25rem 0.5rem !important;
font-size: 0.8rem !important;
}
/* Collapsed timeline padding fix */
#rfp-section .collapse .p-2 {
padding: 0.75rem !important;
}
/* Make timeline text readable on small screens */
#rfp-section .bd-timeline-item {
font-size: 0.85rem !important;
}
}
/* ==========================================================
📱 Bid Letter Header — Mobile Responsiveness Fix
========================================================== */
@media (max-width: 768px) {
/* Stack header rows */
#estimate-bidletters .border-bottom.d-flex {
flex-direction: column !important;
align-items: flex-start !important;
gap: .5rem !important;
}
/* Header title full width */
#estimate-bidletters h6 {
width: 100% !important;
font-size: 1rem !important;
line-height: 1.3 !important;
}
/* Action buttons block-style on small screens */
#estimate-bidletters .bidletters-header-actions {
flex-wrap: wrap !important;
gap: .4rem !important;
width: 100% !important;
}
#estimate-bidletters .bidletters-header-actions button,
#estimate-bidletters .bidletters-header-actions .form-select {
flex: 1 1 48% !important; /* two-up grid on small screens */
min-width: 140px !important;
white-space: nowrap !important;
}
/* Prevent select from shrinking too small */
#estimate-bidletters select.form-select-sm {
width: 100% !important;
}
/* Buttons tighter for thumb reach */
#estimate-bidletters .btn.btn-sm {
font-size: 0.8rem !important;
padding: 0.35rem 0.6rem !important;
}
}
/* ==========================================================
🌐 Universal Header Flex Responsiveness (Discovery Standard)
Applies to any .bd-card > .d-flex header rows (RFPs, Bidders, Letters, etc.)
========================================================== */
@media (max-width: 768px) {
/* Generic header row fix */
/* Generic header row fix (EXCEPT list-row cards like estimates/projects/leads) */
.bd-card:not(.est-row):not(.estimate-list):not(.project-row):not(.lead-row) > .d-flex,
.bd-card:not(.est-row):not(.estimate-list):not(.project-row):not(.lead-row) .border-bottom.d-flex {
flex-wrap: wrap !important;
flex-direction: column !important;
align-items: flex-start !important;
gap: .5rem !important;
}
/* Any header action cluster (bidletters-header-actions, bidders-header-actions, etc.) */
.bd-card [class*="-header-actions"],
.bd-card .header-actions {
flex-wrap: wrap !important;
width: 100% !important;
gap: .4rem !important;
}
/* Buttons, selects, and inputs inside header clusters */
.bd-card [class*="-header-actions"] .btn,
.bd-card [class*="-header-actions"] .form-select,
.bd-card [class*="-header-actions"] select,
.bd-card [class*="-header-actions"] input {
flex: 1 1 48% !important; /* two-wide grid on phones */
min-width: 140px !important;
white-space: nowrap !important;
}
/* Titles always full width */
.bd-card h5, .bd-card h6 {
width: 100% !important;
font-size: 1rem !important;
line-height: 1.3 !important;
}
/* Compact buttons */
.bd-card .btn.btn-sm {
font-size: .8rem !important;
padding: .35rem .6rem !important;
}
/* Keep selects readable */
.bd-card .form-select-sm {
width: 100% !important;
}
/* Allow cards to horizontally scroll when content needs it */
.bd-card{
overflow-x: auto !important;
-webkit-overflow-scrolling: touch !important;
}
/* Prevent the *page* from sideways scrolling (cards handle overflow) */
html, body{
overflow-x: hidden !important;
}
}
/* ==========================================================
🌐 UNIVERSAL TABLE + CARD RESPONSIVE SCROLL FIX
Applies to all .table-responsive wrappers in Discovery cards
========================================================== */
/* 1️⃣ Enable horizontal scroll when content overflows */
.bd-card .table-responsive,
.table-responsive {
overflow-x: auto !important;
-webkit-overflow-scrolling: touch !important;
scrollbar-width: thin !important; /* Firefox */
}
/* 2️⃣ Subtle scroll bar polish */
.bd-card .table-responsive::-webkit-scrollbar,
.table-responsive::-webkit-scrollbar {
height: 6px !important;
}
.bd-card .table-responsive::-webkit-scrollbar-thumb,
.table-responsive::-webkit-scrollbar-thumb {
background: var(--bd-theme-bg-000000-40, rgba(0, 0, 0, 0.25)) !important;
border-radius: 999px !important;
}
/* Table widths belong to each register. A global !important minimum
overrides wider authored grids and also breaks mobile card layouts. */
:where(.table-responsive) > table {
margin-bottom: 0 !important;
}
/* 4️⃣ Prevent double scroll bars on nested responsive divs */
.bd-card .table-responsive .table-responsive {
overflow: visible !important;
}
/* 5️⃣ Small-screen touch improvements */
@media (max-width: 768px) {
.bd-card .table-responsive,
.table-responsive {
border: 1px solid var(--bd-theme-border-000000, #000) !important;
border-radius: .5rem !important;
background: var(--bd-theme-bg-ffffff, #fff) !important;
margin-bottom: .5rem !important;
padding-bottom: .25rem !important;
}
}
.modal .table-responsive {
overflow-x: auto !important;
max-width: 100vw !important;
}
/* === Header badges: allow wrapping so long summaries don't clip === */
.bd-card > .d-flex .bd-badge,
.bd-card .border-top.d-flex .bd-badge,
.bd-card .border-bottom.d-flex .bd-badge {
white-space: normal !important; /* override global nowrap */
word-break: break-word !important;
overflow: visible !important;
text-overflow: clip !important;
display: inline-block !important;
max-width: 100% !important;
line-height: 1.25 !important;
}
/* If the badge sits with a chevron, keep the row flexible */
.bd-card > .d-flex,
.bd-card .border-top.d-flex,
.bd-card .border-bottom.d-flex {
flex-wrap: wrap !important;
}
/* Nice on phones */
@media (max-width: 768px) {
.bd-card > .d-flex .bd-badge { font-size: .85rem !important; }
}
/* ==========================================================
📂 FILE MANAGER + TABLE RESPONSIVE SCROLL (Authoritative)
========================================================== */
/* 1️⃣ Allow inner tables to scroll horizontally */
.bd-card #file-list.table-responsive,
#file-list.table-responsive {
overflow-x: auto !important;
overflow-y: hidden !important;
-webkit-overflow-scrolling: touch !important;
display: block !important;
width: 100% !important;
max-width: 100% !important;
scrollbar-width: thin !important;
border-top: 1px solid var(--bd-theme-border-000000, #000) !important;
border-bottom: 1px solid var(--bd-theme-border-000000, #000) !important;
}
/* 2️⃣ Give the table a minimum width so columns don't collapse */
#estimate-file-manager .table,
#file-list > table {
min-width: 800px !important; /* adjust if you want more width */
table-layout: auto !important;
}
/* 3️⃣ Scrollbar polish */
#estimate-file-manager .table-responsive::-webkit-scrollbar,
#file-list.table-responsive::-webkit-scrollbar {
height: 6px !important;
}
#estimate-file-manager .table-responsive::-webkit-scrollbar-thumb,
#file-list.table-responsive::-webkit-scrollbar-thumb {
background: var(--bd-theme-bg-000000-40, rgba(0,0,0,0.25)) !important;
border-radius: 999px !important;
}
/* 4️⃣ Prevent .bd-card or parent panels from clipping overflow */
#estimate-file-manager,
.bd-card:has(#file-list) {
overflow: visible !important;
}
/* 5️⃣ Mobile experience: give a visual cue and safe padding */
@media (max-width: 768px) {
#file-list.table-responsive {
margin-bottom: 0.5rem !important;
border: 1px solid var(--bd-theme-border-000000, #000) !important;
border-radius: .5rem !important;
background: var(--bd-theme-bg-ffffff, #fff) !important;
padding-bottom: 0.25rem !important;
}
}
/* ==========================================================
📱 Universal Modal Scroll + Layout Fix (Discovery)
Applies to all modals, esp. Add/Edit Bidder form
========================================================== */
/* 1️⃣ Allow body scroll within modal */
.modal-dialog {
width: auto !important;
max-width: 95vw !important; /* shrink to fit smaller screens */
margin: 1rem auto !important;
}
.modal-content {
display: flex !important;
flex-direction: column !important;
max-height: calc(100vh - 2rem) !important; /* viewport minus margins */
overflow: hidden !important; /* only body scrolls */
border-radius: .75rem !important;
}
/* Header and footer fixed height, body scrollable */
.modal-header,
.modal-footer {
flex: 0 0 auto !important;
}
.modal-body {
flex: 1 1 auto !important;
overflow-y: auto !important;
-webkit-overflow-scrolling: touch !important;
padding: 1rem !important;
background: var(--bd-soft, var(--bd-theme-bg-ffffff, #fff));
}
/* Prevent centered modals from cutting off on small screens */
@media (max-width: 768px) {
.modal-dialog-centered {
align-items: flex-start !important;
}
.modal-content {
max-height: 95vh !important;
}
}
/* Optional: smaller font + padding for mobile */
@media (max-width: 576px) {
.modal-body {
padding: .75rem !important;
}
.modal-header, .modal-footer {
padding: .5rem .75rem !important;
}
}
/* === Discovery Checkbox (authoritative override) === */
input[type="checkbox"].form-check-input:not([role="switch"]):not(.form-switch .form-check-input),
input[type="checkbox"].bd-checkbox {
appearance: none !important;
-webkit-appearance: none !important;
position: relative !important;
display: inline-flex !important;
align-items: center !important;
justify-content: center !important;
width: 1.05rem !important;
height: 1.05rem !important;
border: 1.5px solid var(--bd-border, var(--bd-theme-border-000000, #000)) !important;
border-radius: 4px !important;
background: var(--bd-bg, var(--bd-theme-bg-ffffff, #fff)) !important;
cursor: pointer !important;
transition: all 0.15s ease-in-out !important;
box-shadow: none !important;
}
input[type="checkbox"].form-check-input:not([role="switch"]):not(.form-switch .form-check-input):hover,
input[type="checkbox"].bd-checkbox:hover {
background: var(--bd-soft, var(--bd-theme-bg-f7f7f9, #f7f7f9)) !important;
}
input[type="checkbox"].form-check-input:not([role="switch"]):not(.form-switch .form-check-input):checked,
input[type="checkbox"].bd-checkbox:checked {
background: var(--bd-theme-bg-111111, #111) !important;
border-color: var(--bd-theme-border-111111, #111) !important;
}
input[type="checkbox"].form-check-input:not([role="switch"]):not(.form-switch .form-check-input):checked::after,
input[type="checkbox"].bd-checkbox:checked::after {
content: "";
position: absolute;
width: 6px;
height: 10px;
border: solid var(--bd-theme-border-ffffff, #fff);
border-width: 0 2px 2px 0;
transform: rotate(45deg);
top: 50%;
left: 50%;
translate: -50% -55%;
}
[data-theme="dark"] input[type="checkbox"].form-check-input:not([role="switch"]):not(.form-switch .form-check-input),
[data-theme="dark"] input[type="checkbox"].bd-checkbox {
background: var(--bd-theme-bg-1a1b1f, #1a1b1f) !important;
border-color: var(--bd-border, var(--bd-theme-border-2d2f36, #2d2f36)) !important;
}
[data-theme="dark"] input[type="checkbox"].form-check-input:not([role="switch"]):not(.form-switch .form-check-input):checked,
[data-theme="dark"] input[type="checkbox"].bd-checkbox:checked {
background: var(--bd-theme-bg-ffffff, #fff) !important;
border-color: var(--bd-theme-border-ffffff, #fff) !important;
}
[data-theme="dark"] input[type="checkbox"].form-check-input:not([role="switch"]):not(.form-switch .form-check-input):checked::after,
[data-theme="dark"] input[type="checkbox"].bd-checkbox:checked::after {
border-color: var(--bd-theme-border-000000, #000) !important;
}
/* ==========================================================
🩹 SAFE GLOBAL MODAL CENTERING PATCH — Discovery
Centers modals visually without breaking Bootstrap behavior
========================================================== */
.modal-dialog-centered {
display: flex !important;
align-items: center !important;
justify-content: center !important;
min-height: calc(100vh - 2rem) !important;
}
/* cap size and keep scroll contained */
.modal-content {
border-radius: 0.75rem !important;
max-height: calc(100vh - 3rem) !important;
overflow: hidden !important;
display: flex !important;
flex-direction: column !important;
}
.modal-body {
flex: 1 1 auto !important;
overflow-y: auto !important;
-webkit-overflow-scrolling: touch !important;
}
/* responsive safety */
@media (max-width: 768px) {
.modal-dialog-centered {
align-items: flex-start !important;
margin-top: 1rem !important;
}
}
/* ==========================================================
🩹 Discovery Modal — clean float, fully interactive
========================================================== */
html body .modal {
background: transparent !important; /* no full-screen white/gray */
backdrop-filter: none !important;
border: none !important;
box-shadow: none !important;
z-index: 5000 !important;
}
html body .modal-backdrop,
html body .modal-backdrop.show {
display: none !important; /* remove Bootstrap backdrop */
}
html body .modal-dialog {
margin: 0 auto !important;
display: flex !important;
align-items: center !important;
justify-content: center !important;
max-width: 520px !important;
width: 100% !important;
background: transparent !important;
}
html body .modal-content {
background: var(--bd-theme-bg-ffffff, #fff) !important; /* clean Discovery white card */
border: 1px solid var(--bd-theme-border-000000, #000) !important;
border-radius: 0.75rem !important;
box-shadow: 0 4px 16px var(--bd-theme-shadow-000000-40, rgba(0,0,0,.25)) !important;
overflow: hidden !important;
}
.bd-modal {
background: transparent !important;
animation: none !important;
transition: none !important;
padding: 0 !important;
}
.bd-modal__dialog {
animation: none !important;
transition: none !important;
background: transparent !important;
}
.bd-modal__dialog > .modal-content,
.bd-modal__dialog > .border {
animation: none !important;
transition: none !important;
}
/* ==========================================================
🔔 Discovery Notification Dropdown (responsive + polish)
========================================================== */
.notif-dropdown {
border: 1px solid var(--bd-border, var(--bd-theme-border-000000, #000)) !important;
border-radius: 10px !important;
box-shadow: 0 4px 16px var(--bd-theme-shadow-000000-1f, rgba(0, 0, 0, 0.12)) !important;
background: var(--bd-bg, var(--bd-theme-bg-ffffff, #fff)) !important;
color: var(--bd-text, var(--bd-theme-fg-111111, #111)) !important;
overflow: hidden !important;
padding: 0 !important;
width: 360px !important;
max-height: 420px !important;
}
/* header / footer Discovery tone */
.notif-dropdown .border-bottom,
.notif-dropdown .border-top {
border-color: var(--bd-border, var(--bd-theme-border-000000, #000)) !important;
}
.notif-dropdown .list-group-item {
border: 0 !important;
border-bottom: 1px solid var(--bd-theme-border-000000-0d, rgba(0,0,0,0.05)) !important;
background: var(--bd-theme-bg-ffffff, #fff) !important;
color: var(--bd-text, var(--bd-theme-fg-111111, #111)) !important;
}
.notif-dropdown .list-group-item:hover {
background: var(--bd-theme-bg-f8f9fa, #f8f9fa) !important;
}
/* ===== Mobile ===== */
@media (max-width: 768px) {
.notif-dropdown {
position: fixed !important;
inset: auto 12px 12px 12px !important; /* 12px padding from all sides */
width: auto !important;
max-width: none !important;
border-radius: 12px !important;
z-index: 99999 !important;
}
/* Drop shadow polish */
.notif-dropdown.show {
animation: notifFadeIn .15s ease-out;
}
@keyframes notifFadeIn {
from { opacity: 0; transform: translateY(-6px); }
to { opacity: 1; transform: translateY(0); }
}
/* Make the list scroll cleanly */
.notif-dropdown #notif-list {
max-height: 60vh !important;
overflow-y: auto !important;
-webkit-overflow-scrolling: touch !important;
}
}
.notif-dropdown .p-2.border-bottom {
background: var(--bd-theme-bg-ffffff, #fff) !important;
font-weight: 600 !important;
color: var(--bd-text, var(--bd-theme-fg-111111, #111)) !important;
}
.notif-dropdown .border-top.text-center {
background: var(--bd-theme-bg-fafafa, #fafafa) !important;
}
/* ==========================================================
🔔 Discovery Notification Dropdown – refinements
========================================================== */
/* Slightly larger, balanced icon for the header & chip */
.notif-icon-lg {
font-size: 1.15rem !important;
line-height: 1 !important;
}
/* Muted rectangular Discovery badge for 'Mark All As Read' */
.notif-markall-btn {
border: 1px solid var(--bd-border, var(--bd-theme-border-000000, #000)) !important;
background: var(--bd-soft, var(--bd-theme-bg-f5f5f7, #f5f5f7)) !important;
color: var(--bd-text, var(--bd-theme-fg-111111, #111)) !important;
border-radius: 6px !important; /* soft corners, not pill */
font-size: 0.8rem !important;
font-weight: 500 !important;
padding: 3px 10px !important;
line-height: 1.2 !important;
transition: all 0.15s ease-in-out;
display: inline-flex !important;
align-items: center !important;
gap: 5px !important;
cursor: pointer !important;
}
/* Subtle hover polish, not red */
.notif-markall-btn:hover,
.notif-markall-btn:focus {
background: var(--bd-theme-bg-e9ecef, #e9ecef) !important;
border-color: var(--bd-border, var(--bd-theme-border-000000, #000)) !important;
color: var(--bd-text, var(--bd-theme-fg-111111, #111)) !important;
text-decoration: none !important;
}
/* Optional: make header icon a bit larger too */
.notif-dropdown .fa-inbox,
.notif-dropdown .fa-bell {
font-size: 0.95rem !important;
}
/* ==========================================================
🔔 Notification Icon + Dropdown
========================================================== */
.notif-icon {
font-size: 1.05rem;
color: var(--bd-text,var(--bd-theme-fg-111111, #111));
animation: notifIdle 4s ease-in-out infinite;
}
@keyframes notifIdle {
0%,100%{transform:rotate(0deg);}
50%{transform:rotate(15deg);}
}
.notif-glow {
position:absolute; inset:0;
border-radius:8px;
background:radial-gradient(circle,var(--bd-theme-bg-ff0000-26, rgba(255,0,0,0.15)) 0%,transparent 70%);
opacity:0; transition:opacity .3s;
}
.has-notifs .notif-glow {opacity:.4;}
.notif-badge-count {
background:var(--bd-theme-bg-dc3545, #dc3545)!important;
font-size:.65rem!important;
min-width:16px!important;
line-height:1!important;
padding:2px 4px!important;
color:var(--bd-theme-fg-ffffff, #fff)!important;
font-weight:600;
}
.notif-dropdown {
border:1px solid var(--bd-border,var(--bd-theme-border-000000, #000))!important;
border-radius:10px!important;
box-shadow:0 4px 16px var(--bd-theme-shadow-000000-1f, rgba(0,0,0,0.12))!important;
background:var(--bd-bg,var(--bd-theme-bg-ffffff, #fff))!important;
overflow:hidden!important;
width:360px!important;
max-height:420px!important;
}
.notif-markall-btn{
background:var(--bd-soft,var(--bd-theme-bg-f5f5f7, #f5f5f7))!important;
border:1px solid var(--bd-border,var(--bd-theme-border-000000, #000))!important;
border-radius:6px!important;
font-size:.8rem!important;
font-weight:500!important;
padding:2px 8px!important;
color:var(--bd-text,var(--bd-theme-fg-111111, #111))!important;
transition:background .2s ease;
}
.notif-markall-btn:hover{background:var(--bd-theme-bg-e9ecef, #e9ecef)!important;}
/* ==========================================================
👤 Profile Dropdown
========================================================== */
.profile-dropdown {
border:1px solid var(--bd-border,var(--bd-theme-border-000000, #000))!important;
border-radius:10px!important;
box-shadow:0 4px 12px var(--bd-theme-shadow-000000-1f, rgba(0,0,0,0.12))!important;
background:var(--bd-bg,var(--bd-theme-bg-ffffff, #fff))!important;
min-width:220px!important;
overflow:hidden!important;
}
.profile-item{
display:flex;align-items:center;gap:6px;
padding:.5rem .75rem;
font-size:.875rem;
color:var(--bd-text,var(--bd-theme-fg-111111, #111))!important;
text-decoration:none!important;
transition:background .2s ease;
}
.profile-item:hover{
background:var(--bd-soft,var(--bd-theme-bg-f7f7f9, #f7f7f9))!important;
}
/* ==========================================================
⚙️ Rightbar Toggle
========================================================== */
.rightbar-btn{
position:relative!important;
width:32px;height:32px;
border:none!important;
background:var(--bd-soft,var(--bd-theme-bg-f5f5f7, #f5f5f7))!important;
border-radius:8px!important;
cursor:pointer;
transition:background .2s ease,transform .2s ease;
}
.rightbar-btn:hover{background:var(--bd-theme-bg-e9ecef, #e9ecef)!important;transform:translateY(-1px);}
.rightbar-icon{
font-size:.85rem!important;
color:var(--bd-text,var(--bd-theme-fg-111111, #111))!important;
transition:transform 1.5s linear;
}
@keyframes rbSpin{from{transform:rotate(0);}to{transform:rotate(360deg);}}
.rightbar-btn:hover .rightbar-icon{animation:rbSpin 2.5s linear infinite;}
.rightbar-glow{
position:absolute;inset:0;
border-radius:8px;
background:radial-gradient(circle,var(--bd-theme-bg-1f6fe5-1f, rgba(31,111,229,0.12)) 0%,transparent 70%);
opacity:0;animation:rbPulse 3s ease-in-out infinite;
}
@keyframes rbPulse{
0%,100%{transform:scale(1);opacity:0;}
50%{transform:scale(1.25);opacity:.35;}
}
/* --- When hamburger toggles closed state --- */
#page-topbar .navbar-brand-box.collapsed .logo-lg {
display: none !important;
}
#page-topbar .navbar-brand-box.collapsed .logo-sm {
display: inline-block !important;
}
/* === Responsive Roster Cards (Compact + Expanded) === */
@media (max-width: 992px) {
.roster-row {
flex-direction: column !important;
align-items: stretch !important;
text-align: left !important;
padding: .75rem .75rem !important;
}
.roster-row > div {
width: 100% !important;
max-width: 100% !important;
margin-right: 0 !important;
}
.roster-row .d-flex.align-items-center.justify-content-end {
justify-content: space-between !important;
flex-wrap: wrap !important;
margin-top: .5rem;
}
.roster-row .super-status {
margin-bottom: .5rem;
}
.roster-row .icon-btn {
width: 32px;
height: 30px;
margin: 0 2px;
}
.roster-row .d-flex.flex-column.small.text-muted {
font-size: .85rem;
margin-top: .4rem;
}
.roster-row img.rounded-circle {
width: 40px !important;
height: 40px !important;
}
}
/* === Expanded View (Stacked Columns on Mobile) === */
@media (max-width: 768px) {
.roster-row .row.g-3 {
--bs-gutter-x: .5rem;
--bs-gutter-y: .5rem;
}
.roster-row .col-md-6 {
flex: 0 0 100%;
max-width: 100%;
}
.roster-row .bd-subcard {
padding: .75rem !important;
}
.roster-row .stat-dots .dot {
width: 8px;
height: 8px;
}
.roster-row .icon-btn i {
font-size: .85rem !important;
}
.roster-row .bd-badge {
font-size: .7rem !important;
padding: 2px 6px !important;
}
.roster-row .fw-semibold.text-dark {
font-size: 1rem !important;
}
}
/* === Extra Small (Phones <576px) === */
@media (max-width: 576px) {
.roster-row {
padding: .5rem .6rem !important;
}
.roster-row .fw-semibold.text-dark {
font-size: .95rem !important;
}
.roster-row .icon-btn {
width: 28px;
height: 26px;
}
.roster-row .super-status .bd-badge {
display: inline-flex;
font-size: .68rem;
}
.roster-row .d-flex.flex-column.small.text-muted {
font-size: .8rem;
}
}
/* === DISCOVERY TABLE RESTORE — Manpower Schedule === */
#schedule-grid {
border: 1px solid var(--bd-theme-border-000000, #000) !important;
border-radius: 6px;
overflow: hidden;
background: var(--bd-theme-bg-ffffff, #fff);
box-shadow: none;
}
/* --- Table reset --- */
#schedule-grid table.table {
border: none !important;
border-collapse: collapse !important;
width: 100%;
}
#schedule-grid thead th {
border: 1px solid var(--bd-theme-border-000000, #000) !important;
background: var(--bd-theme-bg-f8f8f8, #f8f8f8) !important;
color: var(--bd-theme-fg-111111, #111);
font-weight: 600;
text-align: center;
padding: 4px 6px;
}
#schedule-grid tbody td {
border: 1px solid var(--bd-theme-border-000000, #000) !important;
background: var(--bd-theme-bg-ffffff, #fff);
padding: 3px 6px;
vertical-align: middle;
}
/* --- Supervisor rows --- */
#schedule-grid tr.bg-light-subtle td {
background: var(--bd-theme-bg-f3f3f3, #f3f3f3) !important;
font-weight: 600;
border-top: 2px solid var(--bd-theme-border-000000, #000) !important;
border-bottom: 1px solid var(--bd-theme-border-000000, #000) !important;
}
/* --- Remove doubled outer borders --- */
#schedule-grid thead th:first-child,
#schedule-grid tbody td:first-child {
border-left-width: 0 !important;
}
#schedule-grid thead th:last-child,
#schedule-grid tbody td:last-child {
border-right-width: 0 !important;
}
#schedule-grid tr:last-child td {
border-bottom-width: 0 !important;
}
/* --- Cell consistency --- */
#schedule-grid .table-sm > :not(caption) > * > * {
border-color: var(--bd-theme-border-000000, #000) !important;
padding: 3px 6px !important;
}
/* --- Optional light visual separation between groups --- */
#schedule-grid tr.bg-light-subtle + tr.bg-light-subtle td {
border-top: 3px double var(--bd-theme-border-000000, #000) !important;
}
/* --- Make office/admin rows look clean --- */
#schedule-grid tr[data-employee-id] td {
border-top: 1px solid var(--bd-theme-border-000000, #000) !important;
border-bottom: 1px solid var(--bd-theme-border-000000, #000) !important;
}
.auto-selected {
border-color: var(--bd-theme-border-198754, #198754) !important;
box-shadow: 0 0 0 2px var(--bd-theme-shadow-198754-40, #19875440);
transition: box-shadow 0.4s ease;
}
.fade-in {
opacity: 0;
animation: fadeInUp 0.8s ease forwards;
}
@keyframes fadeInUp {
from { opacity: 0; transform: translateY(6px); }
to { opacity: 1; transform: translateY(0); }
}
.ts-dropdown-portal {
position: fixed !important;
z-index: 20000 !important; /* above offcanvas */
}
.auto-selected {
border-color: var(--bd-theme-border-198754, #198754) !important;
box-shadow: 0 0 0 2px var(--bd-theme-shadow-198754-40, #19875440);
transition: box-shadow 0.4s ease;
}
.fade-in {
opacity: 0;
animation: fadeInUp 0.6s ease forwards;
}
@keyframes fadeInUp {
from { opacity: 0; transform: translateY(6px); }
to { opacity: 1; transform: translateY(0); }
}
.ts-dropdown-portal { position: fixed !important; z-index: 20000 !important; }
.auto-selected { border-color:var(--bd-theme-border-198754, #198754) !important; box-shadow:0 0 0 2px var(--bd-theme-shadow-198754-40, #19875440); transition: box-shadow .35s; }
.fade-in { opacity:0; animation: fadeInUp .6s ease forwards; }
@keyframes fadeInUp { from {opacity:0; transform:translateY(6px);} to {opacity:1; transform:translateY(0);} }
/* --- Discovery-style TomSelect dropdown portal --- */
.ts-dropdown-portal {
position: fixed !important;
z-index: 20000 !important;
border: 1px solid var(--bd-theme-border-111111, #111) !important;
border-radius: 4px !important;
background: var(--bd-theme-bg-ffffff, #fff) !important;
box-shadow: 2px 2px 6px var(--bd-theme-shadow-000000-26, rgba(0,0,0,0.15));
max-height: 260px !important;
overflow-y: auto !important;
overflow-x: hidden;
}
/* clean list look */
.ts-dropdown-portal .option {
padding: 4px 8px;
font-size: 0.8rem;
line-height: 1.3;
cursor: pointer;
background: var(--bd-theme-bg-ffffff, #fff);
border-bottom: 1px solid var(--bd-theme-border-eeeeee, #eee);
}
.ts-dropdown-portal .option:last-child {
border-bottom: none;
}
.ts-dropdown-portal .option:hover,
.ts-dropdown-portal .option.active {
background: var(--bd-theme-bg-f8f9fa, #f8f9fa) !important;
}
/* group headers */
.ts-dropdown-portal .optgroup-header {
font-weight: 600;
color: var(--bd-theme-fg-222222, #222);
background: var(--bd-theme-bg-f2f2f2, #f2f2f2);
border-bottom: 1px solid var(--bd-theme-border-dddddd, #ddd);
padding: 3px 8px;
font-size: 0.75rem;
}
/* fix internal badge layout */
.ts-dropdown-portal .bd-badge {
border-width: 1px;
font-size: 0.7rem;
padding: 1px 5px;
}
/* active chip inside input */
.ts-wrapper .ts-control {
background-color: var(--bd-theme-bg-ffffff, #fff);
border-color: var(--bd-theme-border-111111, #111);
min-height: 28px;
font-size: 0.8rem;
}
.ts-dropdown-portal {
box-sizing: border-box;
width: auto !important; /* let JS sizing win */
min-width: unset !important;
max-width: none !important;
}
.bd-chip-critical {
background-color: var(--bd-theme-bg-ffebeb, #ffebeb);
color: var(--bd-theme-fg-a10000, #a10000);
border: 1px solid var(--bd-theme-border-000000, #000);
}
.bd-chip-high {
background-color: var(--bd-theme-bg-fff4cc, #fff4cc);
color: var(--bd-theme-fg-7a4c00, #7a4c00);
border: 1px solid var(--bd-theme-border-000000, #000);
}
.bd-chip-normal {
background-color: var(--bd-theme-bg-f7f7f7, #f7f7f7);
color: var(--bd-theme-fg-333333, #333);
border: 1px solid var(--bd-theme-border-000000, #000);
}
.bd-chip-low {
background-color: var(--bd-theme-bg-f2f9f2, #f2f9f2);
color: var(--bd-theme-fg-205520, #205520);
border: 1px solid var(--bd-theme-border-000000, #000);
}
#bd-portal-root .ts-dropdown {
position: fixed !important;
z-index: 2147483647 !important; /* above offcanvas & backdrops */
pointer-events: auto !important;
}
.bd-legal-content h1, .bd-legal-content h2, .bd-legal-content h3 {
font-weight: 600;
margin-top: 1rem;
border-bottom: 1px solid var(--bd-theme-border-000000, #000);
padding-bottom: .2rem;
}
.bd-legal-content p { margin-bottom: .6rem; line-height: 1.5; }
.bd-legal-content ul { margin-left: 1.2rem; }
.bd-chip { display:inline-flex; align-items:center; gap:.25rem;
border:1px solid var(--bd-theme-border-000000, #000); border-radius:.4rem; padding:.1rem .4rem;
background:var(--bd-theme-bg-ffffff, #fff); font-size:.75rem; }
.bd-chip-muted { background:var(--bd-theme-bg-f8f9fa, #f8f9fa); border-color:var(--bd-theme-border-adb5bd, #adb5bd); color:var(--bd-theme-fg-495057, #495057); }
/* === PWA Navigation Toolbar (Final, Un-clippable) === */
/* === BuildDaily – PWA Fixed Stack (toolbar + topbar) === */
#pwa-stack {
position: fixed;
top: 0;
left: 0;
right: 0;
z-index: 9999;
display: flex;
flex-direction: column;
}
#pwa-stack[hidden] { display: none !important; }
/* Dark PWA toolbar */
#pwa-nav-toolbar {
height: 38px;
background: var(--bd-theme-bg-1e1e2f, #1e1e2f);
color: var(--bd-theme-fg-ffffff, #fff);
display: flex;
align-items: center;
gap: .5rem;
padding-left: 60px;
border-bottom: 1px solid var(--bd-theme-border-ffffff-26, rgba(255,255,255,0.15));
box-shadow: 0 2px 4px var(--bd-theme-shadow-000000-40, rgba(0,0,0,0.25));
}
#pwa-nav-toolbar .btn {
color: var(--bd-theme-fg-ffffff, #fff);
border-color: var(--bd-theme-border-ffffff-4c, rgba(255,255,255,0.3));
background: var(--bd-theme-bg-ffffff-0d, rgba(255,255,255,0.05));
font-size: .85rem;
padding: 3px 10px;
border-radius: 6px;
}
#pwa-nav-toolbar .btn:hover {
background: var(--bd-theme-bg-ffffff-26, rgba(255,255,255,0.15));
}
/* Ensure topbar inside stack is relative, not fixed */
#pwa-stack header#page-topbar {
position: relative !important;
top: 0 !important;
z-index: auto !important;
box-shadow: 0 1px 3px var(--bd-theme-shadow-000000-0d, rgba(0,0,0,.05));
}
/* Spacer that offsets total stack height */
#pwa-stack-spacer { height: 0; }
@supports (-webkit-touch-callout: none) {
#pwa-nav-toolbar {
padding-top: env(safe-area-inset-top);
height: calc(38px + env(safe-area-inset-top));
}
}
/* === FIX: Notification Icon Always Visible (Unread + Read) === */
#notif-toggle {
position: relative !important;
display: inline-flex !important;
align-items: center !important;
justify-content: center !important;
width: 40px !important;
height: 36px !important;
}
#notif-icon {
color: var(--bd-theme-fg-111111, #111) !important;
font-size: 1.1rem !important;
line-height: 1 !important;
opacity: 1 !important;
visibility: visible !important;
}
/* ensure badge visible when unread */
#notif-toggle.has-unread #notif-count {
display: inline-block !important;
opacity: 1 !important;
visibility: visible !important;
}
/* hide only when truly zero */
#notif-toggle:not(.has-unread) #notif-count {
display: none !important;
}
/* color change cue */
#notif-toggle.has-unread #notif-icon {
color: var(--bd-theme-fg-dc3545, #dc3545) !important;
}
/* === PWA shell offset is driven by measured vars, not hardcoded body padding === */
/* keep the stack fixed */
#pwa-stack {
position: fixed !important;
top: 0 !important;
left: 0;
right: 0;
z-index: 9999;
display: flex;
flex-direction: column;
}
/* topbar clears the PWA stack only */
body.pwa-mode header#page-topbar {
position: fixed !important;
top: var(--bd-pwa-top, 0px) !important;
left: 0;
right: 0;
z-index: 9998 !important;
margin-top: 0 !important;
}
/* do NOT push the whole body down */
body.pwa-mode {
padding-top: 0 !important;
}
@supports (-webkit-touch-callout: none) {
body.pwa-mode header#page-topbar {
top: var(--bd-pwa-top, 0px) !important;
}
body.pwa-mode {
padding-top: 0 !important;
}
}
/* shell containers should not add their own top offset */
body.pwa-mode .main-content,
body.pwa-mode .page-content,
body.pwa-mode #main-content,
body.pwa-mode #layout-wrapper {
margin-top: 0 !important;
padding-top: 0 !important;
}
/* === iOS Click Fix: Sidebar + Notifications === */
/* 1️⃣ Allow topbar & PWA layers to let taps through dropdowns */
#page-topbar,
#pwa-stack {
pointer-events: auto !important;
z-index: 1051 !important; /* below dropdowns/offcanvas */
}
/* 2️⃣ Elevate offcanvas + dropdowns above all */
.offcanvas,
.dropdown-menu {
z-index: 20000 !important;
}
/* 3️⃣ Ensure sidebar overlay sits above everything when active */
body.sidebar-enable .vertical-menu {
z-index: 19999 !important;
}
/* 4️⃣ Force dropdowns to be fully clickable on iOS */
.dropdown-menu.show:not(.bd-card-context-menu) {
transform: translate3d(0,0,0) !important; /* triggers GPU layer */
will-change: transform;
}
/* 5️⃣ Prevent Safari from eating clicks inside topbar buttons */
#vertical-menu-btn,
#notif-toggle,
#notif-icon {
cursor: pointer !important;
pointer-events: auto !important;
z-index: 20001 !important;
}
/* === Notification dropdown anchor fix (iOS/vertical layout) === */
@media (max-width: 991.98px) {
#notif-dropdown.dropdown-menu {
position: fixed !important; /* escape topbar positioning context */
top: 56px !important; /* just under the topbar */
right: 8px !important; /* align with icon edge */
left: auto !important;
transform: none !important;
width: calc(100vw - 16px) !important;
max-width: 360px !important;
z-index: 30000 !important;
}
}
@media (max-width: 991.98px) {
#notif-dropdown.show {
animation: notifSlideDown .15s ease-out;
}
@keyframes notifSlideDown {
from { opacity: 0; transform: translateY(-6px); }
to { opacity: 1; transform: translateY(0); }
}
}
/* === FORCE FIX: Logo collapse sync with sidebar === */
/* Default — large logo visible on desktop */
@media (min-width: 992px) {
#page-topbar .navbar-brand-box .logo-lg {
display: inline-block !important;
}
#page-topbar .navbar-brand-box .logo-sm {
display: none !important;
}
}
/* When collapsed — small logo only */
body.vertical-collapsed #page-topbar .navbar-brand-box .logo-lg {
display: none !important;
}
body.vertical-collapsed #page-topbar .navbar-brand-box .logo-sm {
display: inline-block !important;
}
/* Safety: also handle the .collapsed helper class set by JS */
#page-topbar .navbar-brand-box.collapsed .logo-lg {
display: none !important;
}
#page-topbar .navbar-brand-box.collapsed .logo-sm {
display: inline-block !important;
}
.pulse-gray .ping-dot { background:var(--bd-theme-bg-adb5bd, #adb5bd); } /* gray for clocked_out */
/* =============================================
BD25 Project List — Shared Styling
============================================= */
/* ---------------------------------------------
Universal project row card base
--------------------------------------------- */
.project-row {
background: var(--bd-theme-bg-ffffff, #fff);
transition: box-shadow .15s ease, background .15s ease;
border-left: none !important; /* left rail comes from accent */
}
.project-row:hover {
box-shadow: 0 3px 12px var(--bd-theme-shadow-000000-1f, rgba(0,0,0,.12));
}
/* Left accent rail - powered system-wide */
.bd-left-accent {
position: relative;
}
.bd-left-accent::before {
content:"";
position:absolute;
left:0; top:0; bottom:0;
width: var(--edge-size, 6px);
background: var(--edge-color, var(--bd-theme-bg-000000, #000));
border-radius: .5rem 0 0 .5rem;
pointer-events:none;
}
/* ---------------------------------------------
Metric tiles
--------------------------------------------- */
.project-row .metric-tile {
border: 1px solid var(--bd-theme-border-000000, #000);
border-radius: .55rem;
padding: .55rem .75rem;
background: var(--bd-theme-bg-ffffff, #fff);
min-height: 56px;
}
.metric-tile .metric-label {
font-size: .72rem;
color: var(--bd-theme-fg-555555, #555);
}
.metric-tile .metric-value {
font-size: 1.2rem;
font-weight: 600;
line-height: 1.1;
}
.metric-tile .metric-value-small {
font-size: .95rem;
font-weight: 600;
}
/* ---------------------------------------------
Expanded card container
--------------------------------------------- */
.bd-card-expand {
background: var(--bd-theme-bg-ffffff, #fff);
transition: box-shadow .25s ease;
}
.bd-card-expand:hover {
box-shadow: 0 4px 14px var(--bd-theme-shadow-000000-26, rgba(0,0,0,.15));
}
/* ---------------------------------------------
Chevron animations (expand / collapse)
--------------------------------------------- */
.expand-chevron {
transition: transform .25s ease;
}
.expand-chevron.rotate {
transform: rotate(180deg);
}
/* ---------------------------------------------
Expanded content slide-down animation
--------------------------------------------- */
.bd-expand-body {
animation: bdSlideDown .25s ease;
}
@keyframes bdSlideDown {
from {
opacity: 0;
transform: translateY(-6px);
}
to {
opacity: 1;
transform: translateY(0);
}
}
/* ---------------------------------------------
Tag styling
--------------------------------------------- */
.bd-tag-chip {
display:inline-flex;
align-items:center;
gap:.25rem;
padding:.15rem .50rem;
border-radius:.35rem;
border:1px solid var(--bd-theme-border-000000, #000);
font-size:.72rem;
background:var(--bd-theme-bg-ffffff, #fff);
}
/* ---------------------------------------------
Responsive tuning
--------------------------------------------- */
@media (max-width: 768px) {
.project-row {
padding-left: .75rem !important;
padding-right: .75rem !important;
}
.metric-tile {
min-height: auto;
}
}
.project-row.is-selected {
box-shadow: inset 0 0 0 2px var(--bd-theme-shadow-198754-d9, rgba(25,135,84,.85)) !important;
}
#proj-scroll-sentinel {
height: 1px;
}
/* ============================================================
DISCOVERY — CHIP (BAD)
Soft red, subtle border, rounded pill, compact height
============================================================ */
.bd-chip {
display: inline-flex;
align-items: center;
gap: 4px;
font-size: 12px;
font-weight: 600;
padding: 2px 8px;
border-radius: 999px;
line-height: 1;
border: 1px solid transparent;
white-space: nowrap;
}
/* BAD (red) */
.bd-chip-bad {
background-color: var(--bd-theme-bg-fbeaea, #fbeaea); /* soft red background */
border-color: var(--bd-theme-border-e5b1b1, #e5b1b1); /* soft red border */
color: var(--bd-theme-fg-b30000, #b30000); /* strong readable red text */
}
.bd-chip-bad i {
color: var(--bd-theme-fg-b30000, #b30000);
}
.bd-highlight {
background: var(--bd-theme-bg-fff3a0, #fff3a0);
padding: 1px 3px;
border-radius: 2px;
}
.bd-faded {
opacity: 0.35;
transition: opacity .25s ease-in-out;
}
.bd-division-toggle {
cursor: pointer;
user-select: none;
}
.bd-nav-active {
font-weight: 600;
text-decoration: underline;
}
.bd-flash {
background-color: var(--bd-theme-bg-ffefbf, #ffefbf);
transition: background-color .6s ease-out;
}
//* ============================================================
BD25 SMARTSHEET-STYLE SCHEDULE GRID — GEN-4 MASTER STYLESHEET
============================================================ */
/* ------------------------------------------------------------
LAYOUT WRAPPERS
------------------------------------------------------------ */
#bd-schedule-grid-wrapper {
border: 1px solid var(--bd-border);
border-radius: .5rem;
background: var(--bd-theme-bg-ffffff, #fff);
overflow: hidden;
position: relative;
}
#schedule-grid-scroll {
flex: 1 1 auto;
min-height: 0;
overflow: auto;
}
/* ------------------------------------------------------------
ROW & HEADER GRID STRUCTURE
------------------------------------------------------------ */
.schedule-header-row,
.schedule-row {
display: grid !important;
grid-template-columns:
32px /* manager */
40px /* rownum */
34px /* drag */
minmax(220px, 1.2fr) /* name */
minmax(110px, .7fr) /* status */
minmax(110px, .7fr) /* start */
minmax(110px, .7fr) /* end */
minmax(80px, .45fr) /* duration */
minmax(150px, .85fr) /* preds */
minmax(80px, .45fr) /* percent */
minmax(160px, .9fr) /* responsible */
minmax(160px, 1fr) /* notes */
minmax(110px, .7fr) /* baseline_start */
minmax(110px, .7fr) /* baseline_end */
60px; /* actions */
align-items: center;
min-height: 34px;
font-size: .85rem;
}
/* Identical padding ensures PERFECT column alignment */
.schedule-header-row .cell,
.schedule-row .cell {
padding: 3px 6px !important;
display: flex;
align-items: center;
gap: 4px;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
box-sizing: border-box !important;
}
.schedule-row .cell {
min-width: 0 !important;
overflow: hidden !important;
text-overflow: ellipsis !important;
}
.schedule-row .cell[contenteditable="true"] {
max-width: 100% !important;
min-width: 0 !important;
}
/* Header styling */
.schedule-header-row {
font-weight: 600;
background: var(--bd-theme-bg-f8f9fa, #f8f9fa);
border-bottom: 1px solid var(--bd-theme-border-d0d7de, #d0d7de);
}
.schedule-header-row .cell {
min-width: 0 !important;
overflow: hidden !important;
text-overflow: ellipsis !important;
white-space: nowrap !important;
cursor: default !important;
user-select: none !important;
}
/* ============================================================
FROZEN LEFT COLUMNS (Smartsheet-style)
First 3 columns: manager, rownum, drag
============================================================ */
.schedule-row > .cell:first-child,
.schedule-header-row > .cell:first-child {
position: sticky !important;
left: 0 !important;
z-index: 5 !important;
background: var(--bd-theme-bg-ffffff, #fff) !important;
}
.schedule-row > .cell:nth-child(2),
.schedule-header-row > .cell:nth-child(2) {
position: sticky !important;
left: 32px !important; /* width of col 1 */
z-index: 5 !important;
background: var(--bd-theme-bg-ffffff, #fff) !important;
}
.schedule-row > .cell:nth-child(3),
.schedule-header-row > .cell:nth-child(3) {
position: sticky !important;
left: 32px + 40px !important; /* col1 + col2 */
left: calc(32px + 40px) !important;
z-index: 5 !important;
background: var(--bd-theme-bg-ffffff, #fff) !important;
}
/* ------------------------------------------------------------
COLUMN WIDTH DEFAULTS (grid, not table)
------------------------------------------------------------ */
.col-name { min-width: 220px !important; }
.col-responsible { min-width: 160px !important; }
.col-status { min-width: 110px !important; }
.col-start { min-width: 110px !important; }
.col-end { min-width: 110px !important; }
.col-actions { min-width: 60px !important; justify-content: flex-end; }
.col-percent { min-width: 80px !important; text-align: right !important; justify-content: flex-end; }
.col-duration {
min-width: 40px !important;
max-width: 70px !important;
text-align: right;
}
.col-status,
.col-start,
.col-end,
.col-actions {
flex: 0 0 auto !important; /* freeze width */
white-space: nowrap !important;
}
.col-predecessors {
min-width: 150px !important;
max-width: 200px !important;
display: flex !important;
align-items: center !important;
/* Prevent children from blowing out the cell */
flex: 0 0 auto !important;
overflow: hidden !important;
text-overflow: ellipsis !important;
}
.col-predecessors .preds-display,
.col-predecessors .preds-edit {
flex: 1 1 auto !important;
min-width: 0 !important;
overflow: hidden !important;
text-overflow: ellipsis !important;
}
.col-baseline-start,
.col-baseline-end {
min-width: 110px !important;
max-width: 140px !important;
text-align: center;
overflow: hidden !important;
text-overflow: ellipsis !important;
}
.col-baseline-start,
.col-baseline-end {
flex: 0 0 auto !important; /* lock size */
white-space: nowrap !important;
}
.col-notes {
min-width: 160px !important;
flex: 0 1 260px !important; /* shrinks sooner, grows slower */
max-width: 1fr !important; /* cap upper bound inside grid */
overflow: hidden !important;
text-overflow: ellipsis !important;
white-space: nowrap !important; /* prevent row blowout */
}
.col-notes[contenteditable="true"],
.col-notes .cell[contenteditable="true"] {
min-width: 0 !important;
max-width: 100% !important; /* force clamp inside column */
overflow: hidden !important;
text-overflow: ellipsis !important;
}
/* Hide any column */
.col-hidden { display: none !important; }
/* ------------------------------------------------------------
ROW STATES
------------------------------------------------------------ */
.schedule-row:hover {
background: var(--bd-theme-bg-f6f8fa, #f6f8fa);
}
.schedule-row.selected {
background: var(--bd-theme-bg-fffbe6, #fffbe6) !important;
outline: 2px solid var(--bd-theme-border-000000, #000);
outline-offset: -2px;
}
/* ------------------------------------------------------------
WBS / INDENTATION
------------------------------------------------------------ */
.name-cell {
padding-left: calc(20px * var(--indent-level)) !important;
}
/* ------------------------------------------------------------
DRAG HANDLE
------------------------------------------------------------ */
.drag-handle {
cursor: grab;
opacity: .6;
}
.drag-handle:active { cursor: grabbing; }
/* ------------------------------------------------------------
CONTENTEDITABLE
------------------------------------------------------------ */
.cell[contenteditable="true"] {
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
.cell[contenteditable="true"]:focus {
background: var(--bd-theme-bg-f0f7ff, #f0f7ff);
outline: 2px solid var(--bd-info);
}
/* ------------------------------------------------------------
NOTES
------------------------------------------------------------ */
.notes-preview {
overflow: hidden;
text-overflow: ellipsis;
}
/* ------------------------------------------------------------
BASELINE CELLS
------------------------------------------------------------ */
.baseline-cell {
font-family: monospace;
font-size: .78rem;
text-align: center;
}
.baseline-locked {
background: var(--bd-theme-bg-f3f3f3, #f3f3f3) !important;
cursor: not-allowed !important;
color: var(--bd-theme-fg-999999, #999) !important;
}
/* ------------------------------------------------------------
PREDECESSORS
------------------------------------------------------------ */
.preds-cell { position: relative; overflow: visible; }
.preds-input {
width: 100%;
border: 1px solid var(--bd-theme-border-000000, #000);
padding: 2px 4px;
font-size: .82rem;
}
.preds-dropdown {
position: absolute;
top: 100%;
left: 0;
width: 260px;
background: var(--bd-theme-bg-ffffff, #fff);
border: 1px solid var(--bd-theme-border-111111, #111);
border-radius: 6px;
box-shadow: 0 4px 10px var(--bd-theme-shadow-000000-26, rgba(0,0,0,.15));
max-height: 260px;
overflow-y: auto;
z-index: 20000;
}
.preds-dropdown.hidden { display: none; }
.pred-opt {
padding: 4px 8px;
cursor: pointer;
white-space: nowrap;
}
.pred-opt:hover {
background: var(--bd-theme-bg-f0f0f0, #f0f0f0);
}
/* ------------------------------------------------------------
ADD ROW
------------------------------------------------------------ */
.add-task-row {
background: var(--bd-theme-bg-f8f9fa, #f8f9fa);
border-top: 1px solid var(--bd-border);
cursor: pointer;
}
.add-task-row:hover { background: var(--bd-theme-bg-eef0f2, #eef0f2); }
.add-task-btn {
font-weight: 600;
color: var(--bd-theme-fg-111111, #111);
}
/* ------------------------------------------------------------
CRITICAL PATH HIGHLIGHTS
------------------------------------------------------------ */
.critical-row {
background: var(--bd-theme-bg-fff4f4, #fff4f4) !important;
border-left: 4px solid var(--bd-theme-border-d7263d, #d7263d) !important;
}
.critical-bar .bar {
stroke: var(--bd-theme-stroke-d7263d, #d7263d) !important;
fill: var(--bd-theme-fill-d7263d, #d7263d) !important;
opacity: .9 !important;
}
/* ------------------------------------------------------------
GANTT BAR SYNC WITH GRID
------------------------------------------------------------ */
.gantt .grid-row,
.gantt .grid-row rect {
height: 34px !important;
}
.gantt .bar-wrapper { height: 34px !important; }
.gantt .bar {
height: 18px !important;
y: 8px !important;
}
.gantt .bar-label {
font-size: 12px !important;
line-height: 34px !important;
}
/* ------------------------------------------------------------
SPLIT PANE
------------------------------------------------------------ */
#schedule-split-container {
display:flex;
width:100%;
height:100%;
}
#schedule-left-pane {
flex:0 0 var(--schedule-left-width, 50%);
min-width:280px;
max-width:80%;
overflow:hidden;
border-right:1px solid var(--bd-border);
}
.bd-splitter {
width:6px;
cursor:col-resize;
background:var(--bd-theme-bg-e5e5e5, #e5e5e5);
}
.bd-splitter:hover { background:var(--bd-theme-bg-bbbbbb, #bbb); }
/* ------------------------------------------------------------
SCROLLBARS
------------------------------------------------------------ */
#schedule-grid-scroll::-webkit-scrollbar {
height:6px;
width:6px;
}
#schedule-grid-scroll::-webkit-scrollbar-thumb {
background:var(--bd-theme-bg-000000-40, rgba(0,0,0,.25));
border-radius:999px;
}
#schedule-context-menu {
position: fixed;
z-index: 99999;
width: 200px;
background: var(--bd-theme-bg-ffffff, #fff);
border: 1px solid var(--bd-theme-border-d0d7de, #d0d7de);
border-radius: 10px;
padding: 6px 0;
box-shadow: 0 6px 20px var(--bd-theme-shadow-000000-2e, rgba(0,0,0,0.18));
opacity: 0;
transform: translateY(-6px);
transition: opacity 90ms ease-out, transform 90ms ease-out;
}
#schedule-context-menu.ctx-anim {
opacity: 1;
transform: translateY(0);
}
#schedule-context-menu.hidden {
display: none !important;
}
#schedule-context-menu .ctx-item {
padding: 8px 14px;
display: flex;
align-items: center;
font-size: 0.85rem;
gap: 10px;
cursor: pointer;
color: var(--bd-theme-fg-1a1a1a, #1a1a1a);
user-select: none;
}
#schedule-context-menu .ctx-item:hover {
background: var(--bd-theme-bg-f5f7fa, #f5f7fa);
}
#schedule-context-menu .ctx-item i {
width: 16px;
text-align: center;
}
#schedule-context-menu .ctx-item.danger {
color: var(--bd-theme-fg-b30000, #b30000);
}
#schedule-context-menu .ctx-item.danger:hover {
background: var(--bd-theme-bg-ffeaea, #ffeaea);
}
#schedule-context-menu .ctx-separator {
height: 1px;
background: var(--bd-theme-bg-e5e5e5, #e5e5e5);
margin: 5px 0;
}
#gantt-context-menu {
position: fixed;
z-index: 99999;
width: 220px;
background: var(--bd-theme-bg-ffffff, #fff);
border: 1px solid var(--bd-theme-border-d0d7de, #d0d7de);
border-radius: 10px;
padding: 6px 0;
box-shadow: 0 6px 20px var(--bd-theme-shadow-000000-2e, rgba(0,0,0,.18));
opacity: 0;
transform: translateY(-6px);
transition: opacity 90ms ease-out, transform 90ms ease-out;
}
#gantt-context-menu.ctx-anim {
opacity: 1;
transform: translateY(0);
}
#gantt-context-menu.hidden {
display: none !important;
}
#gantt-context-menu .ctx-item {
padding: 8px 14px;
display: flex;
align-items: center;
font-size: 0.85rem;
gap: 10px;
cursor: pointer;
color: var(--bd-theme-fg-1a1a1a, #1a1a1a);
user-select: none;
}
#gantt-context-menu .ctx-item:hover {
background: var(--bd-theme-bg-f5f7fa, #f5f7fa);
}
#gantt-context-menu .ctx-item i {
width: 16px;
text-align: center;
}
#gantt-context-menu .ctx-item.danger {
color: var(--bd-theme-fg-b30000, #b30000);
}
#gantt-context-menu .ctx-item.danger:hover {
background: var(--bd-theme-bg-ffeaea, #ffeaea);
}
#gantt-context-menu .ctx-separator {
height: 1px;
background: var(--bd-theme-bg-e5e5e5, #e5e5e5);
margin: 5px 0;
}
/* Base item */
#schedule-context-menu .ctx-item,
#gantt-context-menu .ctx-item {
display: flex;
align-items: center;
gap: 10px;
padding: 8px 12px;
font-size: 0.85rem;
cursor: pointer;
border-left: 3px solid transparent;
transition: background 120ms ease;
}
/* Disabled rows */
.ctx-disabled {
opacity: 0.65;
}
.ctx-disabled:hover {
background: var(--bd-theme-bg-f5f7fa, #f5f7fa);
}
/* Enabled rows (H1 hybrid style) */
.ctx-enabled {
background: var(--bd-theme-bg-eef4ff, #eef4ff);
border-left-color: var(--bd-theme-border-1f6fe5, #1f6fe5);
opacity: 1;
}
.ctx-enabled:hover {
background: var(--bd-theme-bg-eef4ff, #eef4ff); /* no hover change, per Option 3 */
}
/* Separator */
.ctx-separator {
margin: 4px 0;
border-top: 1px solid var(--bd-theme-border-e0e0e0, #e0e0e0);
}
/* Base context-menu item */
.ctx-item {
display: flex;
align-items: center;
gap: 10px;
padding: 8px 12px;
cursor: pointer;
border-left: 3px solid transparent;
transition: background 120ms ease, opacity 120ms ease;
font-size: 0.85rem;
}
/* Enabled rows */
.ctx-enabled {
background: var(--bd-theme-bg-eef4ff, #eef4ff);
border-left-color: var(--bd-theme-border-1f6fe5, #1f6fe5);
}
/* Disabled rows */
.ctx-disabled {
opacity: 0.65;
}
/* Hover affects only disabled */
.ctx-disabled:hover {
background: var(--bd-theme-bg-f5f7fa, #f5f7fa);
}
/* Separator */
.ctx-separator {
border-top: 1px solid var(--bd-theme-border-e1e1e1, #e1e1e1);
margin: 6px 0;
}
/* Fix predecessor dropdown layout */
.preds-dropdown {
position: absolute !important;
top: 100% !important;
left: 0 !important;
width: 260px !important; /* proper width */
max-height: 240px !important;
overflow-y: auto !important;
background: var(--bd-theme-bg-ffffff, #fff) !important;
border: 1px solid var(--bd-theme-border-111111, #111) !important;
border-radius: 6px !important;
box-shadow: 0 6px 16px var(--bd-theme-shadow-000000-2e, rgba(0,0,0,0.18)) !important;
z-index: 20000 !important;
display: none !important;
}
.preds-cell {
position: relative !important;
overflow: visible !important;
}
.schedule-row {
overflow: visible !important;
}
#bd-calendar-popup {
position: fixed !important;
background: var(--bd-theme-bg-ffffff, #fff) !important;
border: 1px solid var(--bd-theme-border-000000, #000) !important;
border-radius: 6px !important;
box-shadow: 0 6px 16px var(--bd-theme-shadow-000000-2e, rgba(0,0,0,.18)) !important;
padding: 8px !important;
z-index: 30000 !important;
width: 220px !important;
}
#bd-calendar-popup .calendar-grid {
display: grid !important;
grid-template-columns: repeat(7, 1fr) !important;
gap: 4px !important;
}
#bd-calendar-popup .cal-day {
text-align: center;
padding: 4px;
cursor: pointer;
border-radius: 4px;
}
#bd-calendar-popup .cal-day:hover {
background: var(--bd-theme-bg-f0f0f0, #f0f0f0);
}
#bd-calendar-popup .cal-day.selected {
background: var(--bd-theme-bg-1f6fe5, #1f6fe5) !important;
color: var(--bd-theme-fg-ffffff, #fff) !important;
}
/* Restore Frappe bar geometry while staying aligned with 34px rows */
.gantt .bar-wrapper {
height: 34px !important;
}
.gantt .bar {
height: 20px !important; /* standard Frappe height */
rx: 3px !important;
ry: 3px !important;
y: 7px !important; /* perfectly centered inside 34px */
}
.gantt .bar-label {
font-size: 12px !important;
line-height: 34px !important;
color: var(--bd-theme-fg-222222, #222) !important;
}
.gantt .arrow {
stroke-width: 1.4px !important;
stroke: var(--bd-theme-stroke-444444, #444) !important;
}
.dep-handle {
transition: r .12s ease;
}
.dep-handle:hover {
r: 7;
}
.dep-drag-line {
pointer-events: none;
}
.milestone-diamond {
fill: var(--bd-theme-fill-111111, #111);
stroke: var(--bd-theme-stroke-000000, #000);
stroke-width: 1;
}
.critical-bar + .milestone-diamond {
fill: var(--bd-theme-fill-b3261e, #b3261e);
}
#schedule-grid-wrap {
min-width: 250px;
}
#schedule-gantt-wrap {
flex: 1 1 auto;
min-width: 400px; /* prevent collapse */
}
/* Summary (rollup) bars */
.gantt .bar.summary,
.bar.summary {
fill: none !important;
stroke: var(--bd-theme-stroke-111111, #111) !important;
stroke-width: 2 !important;
}
#schedule-gantt-wrap {
overflow: hidden !important;
display: block !important;
position: relative !important;
min-height: 300px;
}
#schedule-gantt-wrap .gantt-container {
width: 100% !important; /* container stays fixed */
overflow-x: auto !important; /* content scrolls */
overflow-y: hidden !important;
max-width: 100% !important;
position: relative;
display: block;
}
.gantt {
overflow: visible !important;
}
#schedule-gantt-wrap {
overflow: hidden !important;
}
#schedule-gantt-wrap .gantt-container {
overflow-x: auto !important;
overflow-y: hidden !important;
height: 100%;
position: relative;
}
.schedule-row > .cell:first-child,
.schedule-header-row > .cell:first-child,
.schedule-row > .cell:nth-child(2),
.schedule-header-row > .cell:nth-child(2),
.schedule-row > .cell:nth-child(3),
.schedule-header-row > .cell:nth-child(3) {
box-shadow: 2px 0 0 var(--bd-theme-shadow-000000-14, rgba(0,0,0,0.08)); /* subtle boundary like Smartsheet */
}
.schedule-row,
.schedule-header-row {
position: relative !important;
z-index: 1;
}
.markdown-body ul {
padding-left: 1.25rem;
margin-bottom: 0.75rem;
}
.markdown-body li {
margin-bottom: 0.25rem;
}
.markdown-body strong {
font-weight: 600;
}
.friday-chat-text {
max-width: 100%;
overflow-wrap: break-word;
word-wrap: break-word;
word-break: break-word;
white-space: normal;
}
.friday-chat-text ul,
.friday-chat-text ol {
padding-left: 1.25rem;
margin-bottom: 0.75rem;
}
.friday-chat-text li {
margin-bottom: 0.25rem;
}
.friday-chat-text pre {
max-width: 100%;
overflow-x: auto;
white-space: pre-wrap;
word-break: break-word;
}
/* Icon-in-input (replaces Bootstrap input-group addons) */
.bd-input-wrap {
position: relative;
}
.bd-input-wrap .bd-input-icon {
position: absolute;
top: 50%;
transform: translateY(-50%);
opacity: .55;
pointer-events: none;
display: inline-flex;
align-items: center;
justify-content: center;
width: 1.75rem;
height: 1.75rem;
}
/* right by default */
.bd-input-wrap[data-icon-pos="right"] .bd-input-icon { right: .4rem; }
.bd-input-wrap[data-icon-pos="left"] .bd-input-icon { left: .4rem; }
.bd-input-wrap .bd-input-icon i {
font-size: .95rem; /* consistent, not bolted-on */
line-height: 1;
}
/* Inline error (optional) */
.bd-field-inline-error {
margin-top: .25rem;
font-size: .825rem;
color: var(--bd-theme-fg-b02a37, #b02a37); /* bootstrap-ish danger, but you can map to your theme */
}
/* Invalid state styling hook */
.bd-input-wrap.bd-invalid input,
input.bd-invalid {
border-color: var(--bd-theme-border-dc3545, #dc3545) !important;
box-shadow: 0 0 0 .15rem var(--bd-theme-shadow-dc3545-26, rgba(220,53,69,.15)) !important;
}
.bd-input-wrap { position: relative; width: 100%; }
.bd-input-wrap > input { width: 100%; }
.bd-input-wrap.has-icon .bd-input-icon{
position:absolute; top:50%; transform:translateY(-50%);
pointer-events:none; opacity:.45;
display:inline-flex; align-items:center; justify-content:center;
line-height:1;
}
.bd-input-wrap.has-icon .bd-input-icon i{ font-size:.9rem; }
.bd-input-wrap.icon-right .bd-input-icon{ right:.65rem; }
.bd-input-wrap.icon-left .bd-input-icon{ left:.65rem; }
.bd-input-wrap.icon-right > input{ padding-right:2.1rem; }
.bd-input-wrap.icon-left > input{ padding-left:2.1rem; }
.bd-input-wrap:focus-within .bd-input-icon{ opacity:.7; }
.bd-input-wrap.bd-invalid > input{
border-color:var(--bd-theme-border-dc3545, #dc3545) !important;
box-shadow:0 0 0 .15rem var(--bd-theme-shadow-dc3545-26, rgba(220,53,69,.15)) !important;
}
.bd-field-inline-error{
color:var(--bd-theme-fg-dc3545, #dc3545);
font-size:.85rem;
margin-top:.25rem;
}
.bd-table-scroll {
overflow-y: auto;
overscroll-behavior: contain auto;
}
/* ===== PWA button acknowledge animations ===== */
.pwa-btn.pwa-ack {
animation: pwaBtnAck .18s ease-out;
}
@keyframes pwaBtnAck {
0% { transform: translateY(0) scale(1); }
40% { transform: translateY(0.5px) scale(0.96); }
100% { transform: translateY(0) scale(1); }
}
.pwa-btn.pwa-glow {
box-shadow: 0 0 0 3px var(--bd-theme-shadow-ffffff-1a, rgba(255,255,255,.10)), 0 0 14px var(--bd-theme-shadow-ffffff-1f, rgba(255,255,255,.12));
}
/* ===== Refresh/loading state (spinner circle, no icon rotation) ===== */
/* ===== Navigation/loading state (spinner circle) ===== */
.pwa-btn.is-loading {
opacity: .85;
}
/* default: loader hidden */
.pwa-btn .pwa-loader { display: none; }
/* loading: hide icon, show spinner circle */
.pwa-btn.is-loading i { display: none !important; }
.pwa-btn.is-loading .pwa-loader { display: inline-block; }
.pwa-btn .pwa-loader {
width: 14px;
height: 14px;
border-radius: 999px;
border: 2px solid var(--bd-theme-border-ffffff-59, rgba(255,255,255,.35));
border-top-color: var(--bd-theme-border-ffffff, #fff);
animation: pwaLoaderSpin .75s linear infinite;
/* keep it visually centered like the icon */
vertical-align: middle;
}
@keyframes pwaLoaderSpin {
from { transform: rotate(0deg); }
to { transform: rotate(360deg); }
}
/* PWA nav banner */
#pwa-nav-banner { display:none; }
#pwa-nav-banner.is-show { display:inline-flex; }
.pwa-progress {
position: relative;
width: 90px;
height: 4px;
border-radius: 999px;
background: var(--bd-theme-bg-ffffff-24, rgba(255,255,255,.14));
overflow: hidden;
margin-left: 6px;
}
.pwa-progress > span {
position:absolute; left:0; top:0; bottom:0;
width: 35%;
background: var(--bd-theme-bg-ffffff-b8, rgba(255,255,255,.72));
border-radius: 999px;
animation: pwaIndet 1.0s ease-in-out infinite;
}
@keyframes pwaIndet {
0% { transform: translateX(-110%); }
100% { transform: translateX(300%); }
}
/* =========================================================
BD25 — PWA Desktop Chrome Offset
Nazox topbar is 70px tall; fixed elements must be offset by the
PWA stack height (--bd-pwa-top) because fixed positioning ignores
the spacer in normal flow.
Fix: sidebar/header clipping under PWA window chrome.
Scope: standalone PWA only.
========================================================= */
:root{ --bd-topbar-h: 70px; }
body.pwa-mode #page-topbar{
top: calc(var(--bd-top-offset, 0px) + var(--bd-vv-offset, 0px)) !important;
}
body.pwa-mode .vertical-menu{
top: calc(var(--bd-sidebar-top, calc(var(--bd-pwa-top, 0px) + var(--bd-topbar-h, 70px))) + var(--bd-vv-offset, 0px)) !important;
bottom: 0 !important;
height: auto !important;
}
/* =========================================================
BD25 — PWA DESKTOP CHROME SIDEBAR OFFSET
- In standalone PWA mode we render a fixed "pwa stack" at the top.
- JS sets --bd-pwa-top to the stack height.
- Nazox sidebar (.vertical-menu) must be pushed down, otherwise its logo/top gets clipped.
========================================================= */
body.pwa-mode .vertical-menu{
top: var(--bd-sidebar-top, 0px) !important;
bottom: 0 !important;
height: auto !important;
}
/* Keep inner scroll area consistent with the fixed shell */
body.pwa-mode .vertical-menu .simplebar-content-wrapper,
body.pwa-mode .vertical-menu .simplebar-wrapper,
body.pwa-mode .vertical-menu .simplebar-mask,
body.bd-native-shell .vertical-menu .simplebar-content-wrapper,
body.bd-native-shell .vertical-menu .simplebar-wrapper,
body.bd-native-shell .vertical-menu .simplebar-mask{
max-height: none !important;
height: 100% !important;
}
/* =========================================================
BD25 — PWA DESKTOP CHROME OFFSET
Fix: in standalone desktop, the PWA stack is rendered above the fixed topbar.
The page content is already pushed down via #pwa-stack-spacer, but fixed chrome
(topbar + sidebar) must also be offset or they'll render underneath the PWA bar.
Source of truth: base.html sets --bd-pwa-top to stack.offsetHeight.
Scope: standalone desktop only (body.pwa-mode, not bd-mobile-chrome).
========================================================= */
body.pwa-mode:not(.bd-mobile-chrome) header#page-topbar{
top: calc(var(--bd-top-offset, 0px) + var(--bd-vv-offset, 0px)) !important;
}
body.pwa-mode:not(.bd-mobile-chrome) .vertical-menu{
top: calc(var(--bd-sidebar-top, calc(var(--bd-pwa-top, 0px) + var(--bd-topbar-h, 70px))) + var(--bd-vv-offset, 0px)) !important;
bottom: 0 !important;
height: auto !important;
}
/* =========================================================
BD25 — PWA Desktop Sidebar/Topbar Alignment
Standalone PWA adds a top stack (#pwa-stack). We must offset the
fixed Nazox topbar + sidebar by that stack AND the real rendered
topbar height (logo area can vary).
Vars (set in base.html):
- --bd-pwa-top: height of PWA stack spacer
- --bd-topbar-h: measured #page-topbar.offsetHeight
========================================================= */
body.pwa-mode header#page-topbar{
top: var(--bd-pwa-top, 0px) !important;
}
body.pwa-mode .vertical-menu:not(.bd-sidebar-shell){
top: var(--bd-sidebar-top, calc(var(--bd-pwa-top, 0px) + var(--bd-topbar-h, 70px))) !important;
bottom: 0 !important;
height: auto !important;
}
/* =========================================================
BD25 — MOBILE CHROME OVERRIDES (small screens only)
Gate: body.bd-mobile-chrome is set by base.html controller.
Goal:
- Desktop/iPad unchanged
- Phone: remove desktop chrome (topbar + sidebar), use PWA bar + mobile dock
- Content starts immediately, with only the PWA stack spacer
========================================================= */
:root{
--bd-mobile-dock-h: 64px; /* conservative; dock itself has safe-area padding too */
}
/* 1) Kill desktop chrome on phone */
body.bd-mobile-chrome header#page-topbar{
display: none !important;
}
body.bd-mobile-chrome .vertical-menu{
display: none !important;
}
/* 2) Remove left gutter created by sidebar layout */
body.bd-mobile-chrome #layout-wrapper{
margin-left: 0 !important;
padding-left: 0 !important;
}
body.bd-mobile-chrome .main-content{
margin-left: 0 !important;
}
/* 3) Let the PWA stack spacer be the ONLY top offset */
body.bd-mobile-chrome{
padding-top: 0 !important; /* overrides any body.pwa-mode padding-top hacks */
}
/* If any old PWA rules try to fix topbar under toolbar, neutralize them on mobile */
body.bd-mobile-chrome header#page-topbar{
position: static !important;
top: auto !important;
left: auto !important;
right: auto !important;
}
/* 4) Remove extra “chrome tax” spacing under the stack */
body.bd-mobile-chrome .page-content,
body.bd-mobile-chrome #main-content,
body.bd-mobile-chrome .main-content{
margin-top: 0 !important;
padding-top: 0 !important;
}
/* 5) Reserve room for the bottom dock so tables/lists don’t get covered */
body.bd-mobile-chrome .page-content{
padding-bottom: calc(var(--bd-mobile-dock-h) + env(safe-area-inset-bottom)) !important;
}
/* 6) Container padding: keep it tight and intentional on phone */
body.bd-mobile-chrome .container-fluid{
padding-left: 12px !important;
padding-right: 12px !important;
}
/* 7) Ensure the PWA stack stays the top-most chrome */
body.bd-mobile-chrome #pwa-stack{
z-index: 9999 !important;
}
/* 8) When mobile menu sheet is open, prevent background scroll (matches existing bd-modal-open) */
body.bd-mobile-chrome.bd-modal-open{
overflow: hidden !important;
}
/* 9) Fix any accidental “sidebar-enable” overlays on phone */
body.bd-mobile-chrome.sidebar-enable .vertical-menu{
display: none !important;
}
/* 10) Optional: make mobile dock always win on z-index over cards/toasts */
body.bd-mobile-chrome #bd-mobile-dock{
z-index: 1400 !important;
}
/* 11) Don’t let Bootstrap/Nazox add random background blocks */
body.bd-mobile-chrome .page-content,
body.bd-mobile-chrome .container-fluid{
background: transparent !important;
}
/* ===== Mobile width reclaim (PWA/mobile chrome) ===== */
body.bd-mobile-chrome .page-content{
padding-left: 0 !important;
padding-right: 0 !important;
}
body.bd-mobile-chrome .container-fluid{
padding-left: 8px !important; /* was likely 12–24 */
padding-right: 8px !important;
}/* =========================================================
BuildDaily — Discovery (Monolithic)
Load LAST after Bootstrap/Nazox. Purpose: be authoritative.
========================================================= */
/* =========================
TOKENS & THEMES
========================= */
:root{
--bd-border:var(--bd-theme-border-000000, #000);
--bd-text:var(--bd-theme-fg-111111, #111);
--bd-muted:var(--bd-theme-fg-6b7280, #6b7280);
--bd-bg:var(--bd-theme-bg-ffffff, #fff);
--bd-soft:var(--bd-theme-palette-f7f7f9, #f7f7f9);
--bd-shadow:0 4px 12px var(--bd-theme-shadow-000000-14, rgba(0,0,0,.08));
--bd-radius:10px;
--bd-success:var(--bd-theme-palette-1a7f2e, #1a7f2e);
--bd-info:var(--bd-theme-palette-1f6fe5, #1f6fe5);
--bd-warn:var(--bd-theme-palette-c88719, #c88719);
--bd-danger:var(--bd-theme-palette-b3261e, #b3261e);
--bd-focus:var(--bd-theme-palette-fffbe6, #fffbe6);
--bd-line:var(--bd-theme-border-f0f0f0, #f0f0f0);
}
[data-theme="dark"]{
--bd-border:var(--bd-theme-border-ffffff, #fff);
--bd-text:var(--bd-theme-fg-f5f5f7, #f5f5f7);
--bd-muted:var(--bd-theme-fg-9aa0a6, #9aa0a6);
--bd-bg:var(--bd-theme-bg-191a1f, #191a1f);
--bd-soft:var(--bd-theme-palette-20232a, #20232a);
--bd-shadow:0 6px 20px var(--bd-theme-shadow-000000-59, rgba(0,0,0,.35));
--bd-success:var(--bd-theme-palette-25c06d, #25c06d);
--bd-info:var(--bd-theme-palette-5aa3ff, #5aa3ff);
--bd-warn:var(--bd-theme-palette-ffb347, #ffb347);
--bd-danger:var(--bd-theme-palette-ff6b6b, #ff6b6b);
}
/* =========================
BASE & RESET (neutralize Bootstrap/Nazox leaks)
========================= */
html,body{
font-family: Inter, ui-sans-serif, system-ui, -apple-system, "Segoe UI",
Roboto, "Helvetica Neue", Arial, "Apple Color Emoji", "Segoe UI Emoji";
color:var(--bd-text);
background:var(--bd-theme-bg-f8f9fa, #f8f9fa);
font-size:15px;
}
/* Phone chrome: match the PWA dark shell behind everything */
body.bd-mobile-chrome,
body.bd-mobile-chrome html,
html.bd-mobile-chrome{
background: var(--bd-theme-bg-0f172a, #0f172a) !important;
}
h1,h2,h3,h4,h5,h6{ font-weight:600; letter-spacing:.2px; color:var(--bd-text); }
.soft-muted{ color:var(--bd-muted) !important; }
/* keep Bootstrap structure but unify look */
.btn,.badge,.card,.modal,.table,.nav,.dropdown-menu,
.list-group-item,.form-control,.form-select,.toast,.offcanvas{
font-family: inherit !important;
letter-spacing:0 !important;
box-shadow:none !important;
}
/* =========================
CARDS (canonical)
========================= */
.bd-card,.card{
background:var(--bd-bg);
border:1px solid var(--bd-border) !important;
border-radius:.65rem !important;
box-shadow:var(--bd-shadow);
overflow:hidden;
}
.bd-card-header{
display:flex; align-items:center; justify-content:space-between;
gap:1rem; padding:1rem 1.25rem; border-bottom:1px solid var(--bd-theme-border-000000-14, rgba(0,0,0,.08));
}
.bd-card-body{ padding:1.25rem; }
.bd-card-footer{
padding:1rem 1.25rem; border-top:1px solid var(--bd-theme-border-000000-14, rgba(0,0,0,.08));
display:flex; align-items:center; justify-content:space-between; gap:1rem;
}
.bd-card.bd-left-accent{ position:relative; overflow:hidden; }
.bd-card.bd-left-accent::before{
content:""; position:absolute; inset:0 auto 0 0; width:6px;
border-radius:.65rem 0 0 .65rem;
}
.bd-accent-success::before{ background:var(--bd-success) !important; }
.bd-accent-info::before{ background:var(--bd-info) !important; }
.bd-accent-warn::before{ background:var(--bd-warn) !important; }
.bd-accent-danger::before{ background:var(--bd-danger) !important; }
/* discovery list-group inside cards — no double borders */
.bd-card .list-group{ border:0 !important; border-radius:inherit !important; overflow:hidden; }
.bd-card .list-group-item{ border-left:0 !important; border-right:0 !important; }
.bd-card .list-group-item:first-child{ border-top:0 !important; }
.bd-card .list-group-item:last-child{ border-bottom:0 !important; }
/* =========================
BUTTONS
========================= */
.bd-btn{
display:inline-flex; align-items:center; gap:.4rem;
font-weight:600; font-size:.88rem; line-height:1.1;
border-radius:.6rem; border:1.5px solid var(--bd-border);
background:var(--bd-theme-bg-ffffff, #fff); color:var(--bd-text); padding:.42rem .85rem;
transition:background .18s,color .18s,border-color .18s; text-decoration:none;
}
.bd-btn:hover,.bd-btn:focus{ background:var(--bd-theme-bg-f1f3f5, #f1f3f5); color:var(--bd-text); }
.bd-btn-dark{ background:var(--bd-theme-bg-111111, #111); border-color:var(--bd-theme-border-111111, #111); color:var(--bd-theme-fg-ffffff, #fff) !important; }
.bd-btn-dark:hover{ background:var(--bd-theme-bg-000000, #000); border-color:var(--bd-theme-border-000000, #000); }
.bd-btn-outline{ background:var(--bd-theme-bg-ffffff, #fff); border-color:var(--bd-border); }
.bd-btn-ghost{ background:transparent; border-color:transparent; }
.bd-btn-danger{ background:var(--bd-danger); border-color:var(--bd-danger); color:var(--bd-theme-fg-ffffff, #fff) !important; }
.bd-btn-ai{
background:linear-gradient(135deg, var(--bd-theme-bg-3b82f6-1f, rgba(59,130,246,.12)), var(--bd-theme-bg-0e7490-38, rgba(14,116,144,.22)));
border-color:var(--bd-theme-border-2563eb-59, rgba(37,99,235,.35)); color:var(--bd-theme-fg-1d4ed8, #1d4ed8);
}
.bd-btn-sm{ font-size:.78rem; padding:.3rem .6rem; border-radius:.45rem; }
.bd-btn-xs{ font-size:.75rem; padding:.3rem .65rem; border-radius:.6rem; }
/* =========================
BADGES & CHIPS (single source of truth)
========================= */
.bd-chip,.bd-badge{
display:inline-flex; align-items:center; gap:.35rem;
padding:2px 8px; font-size:.75rem; line-height:1.2;
border:1px solid var(--bd-border) !important; border-radius:6px !important;
background:var(--bd-theme-bg-ffffff, #fff) !important; color:var(--bd-text) !important; font-weight:500;
white-space:nowrap; transition:background .15s ease,color .15s ease;
}
.bd-badge.bd-pill{ border-radius:999px !important; padding:.25rem .75rem; }
/* === Disable Global Badge/Chip Hover Inversion =============== */
.bd-chip:hover,
.bd-badge:hover {
background: inherit !important;
color: inherit !important;
border-color: var(--bd-border) !important;
transition: none !important;
cursor: default !important;
}
.bd-chip-good,.bd-badge-success{ background:var(--bd-theme-bg-e8f4ec, #e8f4ec) !important; border-color:var(--bd-success) !important; color:var(--bd-theme-fg-145522, #145522) !important; }
.bd-chip-info,.bd-badge-info{ background:var(--bd-theme-bg-e9f1fd, #e9f1fd) !important; border-color:var(--bd-info) !important; color:var(--bd-theme-fg-123f87, #123f87) !important; }
.bd-chip-warn,.bd-badge-warning{ background:var(--bd-theme-bg-fff5e1, #fff5e1) !important; border-color:var(--bd-warn) !important; color:var(--bd-theme-fg-7a4f00, #7a4f00) !important; }
.bd-chip-muted,.bd-badge-secondary{ background:var(--bd-theme-bg-f0f0f0, #f0f0f0) !important; border-color:var(--bd-theme-border-555555, #555) !important; color:var(--bd-theme-fg-333333, #333) !important; }
.bd-badge-danger{ background:var(--bd-theme-bg-fdebea, #fdebea) !important; border-color:var(--bd-danger) !important; color:var(--bd-theme-fg-7a1a14, #7a1a14) !important; }
.bd-quote-badge{ font-size:.8rem; padding:2px 6px; border-radius:4px; border:1px solid var(--bd-border); background:var(--bd-theme-bg-f8f9fa, #f8f9fa); }
/* finance summary */
.bd-badge-revenue{ background:var(--bd-theme-bg-eaf1fb, #eaf1fb) !important; color:var(--bd-theme-fg-084298, #084298) !important; }
.bd-badge-cost{ background:var(--bd-theme-bg-fdecec, #fdecec) !important; color:var(--bd-theme-fg-8c1c13, #8c1c13) !important; }
.bd-badge-gross{ background:var(--bd-theme-bg-e9f8e9, #e9f8e9) !important; color:var(--bd-theme-fg-145a14, #145a14) !important; }
.bd-badge-net{ background:var(--bd-theme-bg-d6f5d6, #d6f5d6) !important; color:var(--bd-theme-fg-083d14, #083d14) !important; }
.bd-badge-cash-pos{ background:var(--bd-theme-bg-e9f8e9, #e9f8e9) !important; color:var(--bd-theme-fg-0b5d0b, #0b5d0b) !important; }
.bd-badge-cash-neg{ background:var(--bd-theme-bg-fdecec, #fdecec) !important; color:var(--bd-theme-fg-a11212, #a11212) !important; }
.bd-badge-markup-suggest{ background:var(--bd-theme-bg-e6f9f9, #e6f9f9) !important; color:var(--bd-theme-fg-0b4f4f, #0b4f4f) !important; }
.bd-badge-markup-current{ background:var(--bd-theme-bg-f2f2f2, #f2f2f2) !important; color:var(--bd-theme-fg-333333, #333) !important; }
/* =========================
FORMS / INPUTS
========================= */
.form-control.bd-input,.form-select.bd-input,.bd-input{
border:1px solid var(--bd-border) !important; border-radius:.35rem !important;
font-size:.9rem; padding:.4rem .55rem; box-shadow:none !important; background:var(--bd-theme-bg-ffffff, #fff);
}
.bd-input:focus{ outline:none; box-shadow:0 0 0 2px var(--bd-theme-shadow-2563eb-59, rgba(37,99,235,.35)) !important; }
.form-control,.form-control-sm,.form-select,.form-select-sm,.ts-control,.ts-control input{
height:25px !important; min-height:25px !important; line-height:1.2 !important; padding:2px 6px !important; font-size:.875rem !important;
}
textarea.form-control{ height:auto !important; min-height:60px !important; line-height:1.3 !important; padding-top:4px !important; padding-bottom:4px !important; }
.bd-input-prefix{ position:relative; display:flex; align-items:center; }
.bd-input-prefix__symbol{ position:absolute; left:.85rem; font-weight:600; color:var(--bd-muted); pointer-events:none; }
.bd-input-prefixed{ padding-left:2.2rem !important; }
/* === FIX: restore visible checkmarks on .bd-checkbox === */
.bd-checkbox {
position: relative !important;
appearance: none !important;
display: inline-flex !important;
align-items: center !important;
justify-content: center !important;
border: 1.5px solid var(--bd-border) !important;
border-radius: .35rem !important;
width: 1.1rem !important;
height: 1.1rem !important;
background: var(--bd-theme-bg-ffffff, #fff) !important;
cursor: pointer !important;
}
.bd-checkbox:checked {
background: var(--bd-info) !important;
border-color: var(--bd-info) !important;
}
.bd-checkbox:checked::after {
content: "✓" !important;
font-size: .75rem !important;
color: var(--bd-theme-fg-ffffff, #fff) !important;
position: absolute !important;
top: 50% !important;
left: 50% !important;
transform: translate(-50%, -50%) !important;
}
[data-theme="dark"] .bd-checkbox:checked::after {
color: var(--bd-theme-fg-000000, #000) !important;
}
[contenteditable="true"]{ outline:none; cursor:text; }
[contenteditable="true"].is-focus{ background:var(--bd-focus); outline:1px solid var(--bd-border); }
/* =========================
TABLES / TAKEOFF / CREW
========================= */
/* === Remove Global Table Striping ==================== */
.table tbody tr:nth-child(even) td { background: transparent !important; }
/* === Optional Scoped Striping (opt-in) =============== */
.bd-striped tbody tr:nth-child(even) td {
background: var(--bd-theme-bg-fcfcfc, #fcfcfc) !important;
}
.table tbody tr:nth-child(even) td{ background:var(--bd-theme-bg-fcfcfc, #fcfcfc); }
.table-secondary td{ background:var(--bd-theme-bg-f8f9fa, #f8f9fa) !important; font-weight:500; }
.bd-table-flat{
width:100%; border-collapse:separate; border-spacing:0; background:var(--bd-theme-bg-ffffff, #fff);
border:1px solid var(--bd-border); border-radius:12px; overflow:hidden;
}
.bd-table-flat thead th{
background:var(--bd-theme-bg-f1f2f4, #f1f2f4); font-size:.75rem; letter-spacing:.08em;
padding:.65rem; border-bottom:1px solid var(--bd-border);
}
.bd-table-flat tbody td{ padding:.65rem; border-bottom:1px solid var(--bd-theme-border-000000-14, rgba(0,0,0,.08)); vertical-align:top; }
.bd-table-flat tbody tr:last-child td{ border-bottom:none; }
.takeoff-row td,.crew-row td{
border-bottom:1px solid var(--bd-border) !important; padding:.25rem .4rem; font-size:.85rem; vertical-align:middle;
}
.num-cell{ text-align:right; font-family:monospace; }
/* === Numeric Cell Layout Fix ========================= */
.num-cell[contenteditable="true"] {
display: block !important; /* keep full cell width */
min-width: 3.5rem !important;
width: 100% !important;
box-sizing: border-box !important;
text-align: right;
}
/* Takeoff crew qty vertical alignment */
.crew-row td { vertical-align: middle !important; }
.crew-row .crew-qty-cell[contenteditable="true"] {
display: inline-block; /* no block-level jumps */
width: 100%;
line-height: 2.5;
padding: .2rem 0; /* visual centering inside td */
text-align: center;
box-sizing: border-box;
}
/* === Global Left-Accent / Card Corner Fix ==================== */
/* keep all bd-left-accent stripes inside rounded borders */
.bd-card.bd-left-accent,
.bd-left-accent {
position: relative;
overflow: hidden;
border-radius: .5rem !important;
}
/* === Universal Left-Accent Stripe Fix ========================= */
/* keep stripes fully inside rounded corners and clip safely */
.bd-left-accent,
.bd-card.bd-left-accent {
position: relative;
overflow: hidden; /* prevents corner bleed */
border-radius: .5rem !important; /* unify rounding */
}
.bd-left-accent::before {
content: "";
position: absolute;
top: 0;
left: 0;
bottom: 0;
width: var(--edge-size, 8px);
border-top-left-radius: .5rem;
border-bottom-left-radius: .5rem;
pointer-events: none;
}
/* Exclude toolbars, bulkbars, navbars, etc. */
.bd-bulkbar.bd-left-accent::before,
#estimate-bulkbar.bd-left-accent::before,
.navbar.bd-left-accent::before,
.topbar.bd-left-accent::before {
content: none !important;
}
/* exclude banners, bulk bars, and navbars */
.bd-bulkbar.bd-left-accent::before,
#estimate-bulkbar.bd-left-accent::before,
.navbar.bd-left-accent::before,
.topbar.bd-left-accent::before {
content: none !important;
}
/* =========================
COLLAPSE / ACCORDION
========================= */
.chevron,.chev{ transition:transform .25s ease !important; }
.chevron.rotate,.chev.rotate{ transform:rotate(180deg) !important; }
.bd-accordion{ display:flex; flex-direction:column; gap:.6rem; }
.bd-accordion details{
border:1px solid var(--bd-border); border-radius:.6rem; background:var(--bd-theme-bg-ffffff, #fff); overflow:hidden; box-shadow:var(--bd-shadow);
}
.bd-accordion summary{
list-style:none; cursor:pointer; padding:.55rem .9rem; font-weight:600;
display:flex; align-items:center; justify-content:space-between; gap:.5rem;
}
.bd-accordion__body{ padding:.6rem .9rem .9rem; font-size:.88rem; color:var(--bd-text); background:var(--bd-theme-bg-f8f9fa, #f8f9fa); }
/* =========================
NAV — Estimate pill bar (used broadly)
========================= */
#estimate-nav{
border-top:1px solid var(--bd-border) !important; margin-top:.5rem !important;
padding:.6rem 0 !important; display:flex !important; justify-content:center !important; background:var(--bd-theme-bg-ffffff, #fff) !important;
}
#estimate-nav nav{
display:flex !important; flex-wrap:wrap !important; justify-content:center !important; gap:.6rem !important; width:100% !important;
}
#estimate-nav .bd-pill-link {
display: inline-flex !important;
align-items: center !important;
gap: .35rem !important;
/* smaller text */
font-weight: 500 !important;
color: var(--bd-theme-fg-2d2d2d, #2d2d2d) !important;
background: var(--bd-theme-bg-f5f6f8, #f5f6f8) !important;
/* tighter padding */
text-decoration: none !important;
transition: background .2s ease, color .2s ease !important;
border: 1px solid var(--bd-border) !important;
cursor: pointer !important; /* 👈 ensures hand cursor */
user-select: none !important; /* prevents text selection on drag */
}
#estimate-nav .bd-pill-link:hover {
background: var(--bd-theme-bg-e8eaed, #e8eaed) !important;
color: var(--bd-theme-fg-000000, #000) !important;
}
#estimate-nav .bd-pill-link.active {
background: var(--bd-theme-bg-1a1f2d, #1a1f2d) !important;
color: var(--bd-theme-fg-ffffff, #fff) !important;
font-weight: 600 !important;
}
#estimate-nav .bd-pill-link .bd-badge {
background: var(--bd-theme-bg-e0a53c, #e0a53c) !important;
color: var(--bd-theme-fg-ffffff, #fff) !important;
line-height: 1 !important;
}
/* =========================
MODALS (Discovery)
========================= */
.bd-modal{
position:fixed; inset:0; z-index:1080; display:flex; align-items:center; justify-content:center;
padding:1.5rem; background:var(--bd-theme-bg-090b11-8c, rgba(9,11,17,.55)); animation:fadeIn .2s ease-out;
}
.bd-modal__dialog{
width:min(720px,100%); max-height:calc(100vh - 3rem);
background:var(--bd-bg); border:1px solid var(--bd-border); border-radius:14px;
box-shadow:var(--bd-shadow); overflow:hidden; display:flex; flex-direction:column; position:relative;
}
.bd-modal__header,.bd-modal__footer{ padding:.75rem 1rem; background:var(--bd-theme-bg-ffffff, #fff); border-color:var(--bd-border); border-style:solid; }
.bd-modal__header{ border-width:0 0 1px 0; display:flex; align-items:center; justify-content:space-between; gap:.75rem; }
.bd-modal__footer{ border-width:1px 0 0 0; display:flex; justify-content:flex-end; gap:.5rem; }
.bd-modal__body{ padding:1rem; overflow-y:auto; background:var(--bd-soft); }
.bd-modal__close{ border:0; background:none; font-size:1.3rem; line-height:1; color:var(--bd-muted); cursor:pointer; }
.bd-modal__close:hover{ color:var(--bd-text); }
@keyframes fadeIn{ from{opacity:0} to{opacity:1} }
/* =========================
TIMELINE (Activity)
========================= */
.bd-timeline{ position:relative; border-left:2px solid var(--bd-theme-border-e0e0e0, #e0e0e0); margin-left:.5rem; padding-left:1.5rem; }
.bd-timeline-item{ position:relative; margin-bottom:1rem; }
.bd-timeline-item::before{
content:""; position:absolute; left:-1.9rem; top:.55rem; width:10px; height:10px; border-radius:50%;
background:var(--bd-theme-bg-6c757d, #6c757d); border:2px solid var(--bd-theme-border-ffffff, #fff); box-shadow:0 0 0 1px var(--bd-theme-shadow-cccccc, #ccc);
}
.bd-timeline-item.quote::before{ background:var(--bd-theme-bg-198754, #198754); }
.bd-timeline-item.followup::before{ background:var(--bd-theme-bg-0d6efd, #0d6efd); }
.bd-timeline-item.decline::before{ background:var(--bd-theme-bg-dc3545, #dc3545); }
/* =========================
QUICK SEARCH (panel + badges)
========================= */
#quick-search-results .list-group{
border:1px solid var(--bd-border); border-radius:.5rem; overflow:hidden;
}
#quick-search-results .list-group-item{
padding:.45rem .75rem; font-size:.875rem; border:none; border-bottom:1px solid var(--bd-theme-border-f0f0f0, #f0f0f0);
display:flex; align-items:center; gap:.5rem;
}
#quick-search-results .list-group-item:last-child{ border-bottom:none; }
#quick-search-results .list-group-item:hover{ background:var(--bd-theme-bg-f8f9fa, #f8f9fa); }
.bd-badge-search{
display:inline-flex; align-items:center; gap:.3rem; padding:2px 6px;
font-size:.78rem; line-height:1.2; border:1px solid var(--bd-border) !important; border-radius:4px; background:var(--bd-theme-bg-f9f9f9, #f9f9f9); color:var(--bd-theme-fg-333333, #333);
}
.bd-badge-search-estimate{ background:var(--bd-theme-bg-e9f1fd, #e9f1fd) !important; color:var(--bd-theme-fg-123f87, #123f87) !important; border-color:var(--bd-info) !important; }
.bd-badge-search-lead{ background:var(--bd-theme-bg-e8f4ec, #e8f4ec) !important; color:var(--bd-theme-fg-145522, #145522) !important; border-color:var(--bd-success) !important; }
.bd-badge-search-contact{ background:var(--bd-theme-bg-f0f0f0, #f0f0f0) !important; color:var(--bd-theme-fg-333333, #333) !important; border-color:var(--bd-theme-border-555555, #555) !important; }
/* =========================
SKELETON / LOADING
========================= */
.skeleton{ position:relative; background:var(--bd-theme-bg-f0f0f0, #f0f0f0); overflow:hidden; }
.skeleton::after{
content:""; position:absolute; top:0; left:-150px; height:100%; width:150px;
background:linear-gradient(90deg, transparent, var(--bd-theme-bg-ffffff-99, rgba(255,255,255,.6)), transparent);
animation:shimmer 1.2s infinite;
}
@keyframes shimmer{ 100%{ transform:translateX(100%);} }
/* =========================
TOASTS (Discovery)
========================= */
.bd-toast-stack{ position:fixed; bottom:16px; right:16px; z-index:1080; display:flex; flex-direction:column; align-items:flex-end; gap:8px; pointer-events:none; }
.bd-toast{
pointer-events:auto; display:flex; align-items:flex-start; gap:10px; min-width:260px; max-width:420px; padding:10px 12px;
background:var(--bd-theme-bg-ffffff, #fff); color:var(--bd-theme-fg-111111, #111); border:1px solid var(--bd-border); border-radius:8px; box-shadow:0 4px 12px var(--bd-theme-shadow-000000-14, rgba(0,0,0,.08));
position:relative; overflow:hidden; animation:bd-toast-in .18s ease-out;
}
.bd-toast .bd-ico{ font-size:18px; line-height:1; margin-top:2px; }
.bd-toast .bd-title{ font-weight:700; margin-bottom:2px; }
.bd-toast::before{ content:""; position:absolute; left:0; top:0; bottom:0; width:5px; }
.bd-toast.is-success::before{ background:var(--bd-success); }
.bd-toast.is-info::before{ background:var(--bd-info); }
.bd-toast.is-warn::before{ background:var(--bd-warn); }
.bd-toast.is-error::before{ background:var(--bd-danger); }
@keyframes bd-toast-in{ from{opacity:0; transform:translateY(6px);} to{opacity:1; transform:translateY(0);} }
/* =========================
TOMSELECT PORTAL / DROPDOWNS IN MODALS (no clipping)
========================= */
/* === TomSelect / Dropdown Visibility ================= */
.bd-card:has(.dropdown-menu.show, .ts-wrapper.open, .ts-dropdown, [aria-expanded='true'], .show > .dropdown-menu, details[open]),
.bd-subcard:has(.dropdown-menu.show, .ts-wrapper.open, .ts-dropdown, [aria-expanded='true'], .show > .dropdown-menu, details[open]),
.card:has(.dropdown-menu.show, .ts-wrapper.open, .ts-dropdown, [aria-expanded='true'], .show > .dropdown-menu, details[open]),
.modal,
.offcanvas:has(.dropdown-menu.show, .ts-wrapper.open, .ts-dropdown, [aria-expanded='true'], .show > .dropdown-menu, details[open]),
.bd-modal__body:has(.dropdown-menu.show, .ts-wrapper.open, .ts-dropdown, [aria-expanded='true'], .show > .dropdown-menu, details[open]),
.bd-modal:has(.dropdown-menu.show, .ts-wrapper.open, .ts-dropdown, [aria-expanded='true'], .show > .dropdown-menu, details[open]),
.bd-section:has(.dropdown-menu.show, .ts-wrapper.open, .ts-dropdown, [aria-expanded='true'], .show > .dropdown-menu, details[open]),
.section-panel:has(.dropdown-menu.show, .ts-wrapper.open, .ts-dropdown, [aria-expanded='true'], .show > .dropdown-menu, details[open]) {
overflow: visible !important;
}
/* Make modals/cards allow overflow while dropdown is open */
.bd-portal-open .modal,.bd-portal-open .modal-panel,.bd-portal-open .bd-card{ overflow:visible !important; }
/* =========================
RIGHTBAR / OFFCANVAS
========================= */
.offcanvas{ z-index:1045 !important; }
.offcanvas-backdrop{ z-index:1040 !important; background-color:var(--bd-theme-bg-000000-40, rgba(0,0,0,.25)) !important; }
/* =========================
GRIDSTER / DASHBOARD widgets (rounded fix + spacing)
========================= */
.gridster{ position:relative !important; overflow:visible !important; background:var(--bd-theme-bg-f8f9fa, #f8f9fa); padding-bottom:20px !important; }
.gridster > ul{ list-style:none; margin:0 !important; padding:0 !important; position:relative !important; }
.gridster > ul > li{ position:absolute !important; overflow:visible !important; z-index:2 !important; }
.gridster .widget{
background:var(--bd-theme-bg-ffffff, #fff); border:1px solid var(--bd-border); border-radius:.5rem !important;
overflow:visible !important; box-shadow:0 4px 10px var(--bd-theme-shadow-000000-14, rgba(0,0,0,.08));
}
/* =========================
SCHEDULE / TABLE PANE (Discovery)
========================= */
.bd-table-flat-wrapper{ max-height:520px; overflow:auto; }
.bd-schedule__legend{ display:flex; flex-wrap:wrap; gap:.75rem; border:1px dashed var(--bd-theme-border-000000-26, rgba(0,0,0,.15)); border-radius:12px; padding:.75rem; background:var(--bd-theme-bg-000000-05, rgba(0,0,0,.02)); }
.bd-schedule__legend-item{ display:flex; flex-direction:column; gap:.25rem; min-width:160px; }
/* =========================
FILE MANAGER (Estimate/Project parity)
========================= */
#project-file-manager table{ border-collapse:separate; border-spacing:0; width:100%; background:var(--bd-theme-bg-ffffff, #fff); border:1px solid var(--bd-border); border-radius:.75rem; overflow:hidden; }
#project-file-manager thead th{
background:var(--bd-theme-bg-f8f9fa, #f8f9fa); font-weight:600; color:var(--bd-theme-fg-212529, #212529); border-bottom:1px solid var(--bd-border); font-size:.8rem; letter-spacing:.02em;
}
#project-file-manager tbody tr{ transition:background-color .1s ease, box-shadow .1s ease; cursor:pointer; }
#project-file-manager tbody tr:hover{ background:var(--bd-theme-bg-f5f7f8, #f5f7f8); }
.bd-file-row.is-folder > td:first-child{ position:relative; }
.bd-file-row.is-folder:hover > td:first-child::before,
.bd-file-row.is-file:hover > td:first-child::before,
.bd-file-row.is-folder.selected > td:first-child::before,
.bd-file-row.is-file.selected > td:first-child::before{
content:""; position:absolute; left:0; top:0; bottom:0; width:4px; background:var(--bd-theme-bg-fcc419, #fcc419); border-radius:.25rem 0 0 .25rem;
}
/* =========================
UTILITIES
========================= */
.bd-progress{ height:6px; border:1px solid var(--bd-border); border-radius:3px; background:var(--bd-theme-bg-f8f9fa, #f8f9fa); overflow:hidden; }
.bd-progress-bar{ height:100%; transition:width .3s ease; }
.bd-highlight{ background:var(--bd-theme-bg-fff9db, #fff9db); border-radius:3px; padding:0 .15em; font-weight:600; }
.bd-text-sm{ font-size:.875rem; }
.bd-scroll-soft{ max-height:420px; overflow:auto; padding-right:.5rem; scrollbar-width:thin; }
.bd-scroll-soft::-webkit-scrollbar{ width:6px; }
.bd-scroll-soft::-webkit-scrollbar-thumb{ background:var(--bd-theme-bg-94a3b8-66, rgba(148,163,184,.4)); border-radius:999px; }
.bd-link{ display:inline-flex; align-items:center; gap:.35rem; color:var(--bd-text); text-decoration:none; }
.bd-link:hover{ color:var(--bd-info); text-decoration:underline; }
.whitespace-prewrap{ white-space:pre-wrap; }
/* workflow squares */
.bd-workflow-square{ display:inline-block; width:12px; height:12px; border-radius:3px; margin-right:4px; border:1px solid var(--bd-border); }
.bd-workflow-good{ background:var(--bd-theme-bg-e8f4ec, #e8f4ec); border-color:var(--bd-success); }
.bd-workflow-warn{ background:var(--bd-theme-bg-fff5e1, #fff5e1); border-color:var(--bd-warn); }
.bd-workflow-bad{ background:var(--bd-theme-bg-fdebea, #fdebea); border-color:var(--bd-danger); }
.bd-workflow-muted{ background:var(--bd-theme-bg-f3f4f6, #f3f4f6); border-color:var(--bd-theme-border-6c757d, #6c757d); }
/* flash helper */
.flash-updated{ animation:bd-flash-success .9s ease; }
@keyframes bd-flash-success{ from{box-shadow:0 0 0 0 var(--bd-theme-shadow-22c55e-73, rgba(34,197,94,.45));} to{box-shadow:0 0 0 10px var(--bd-theme-shadow-22c55e-00, rgba(34,197,94,0));} }
/* === Discovery DataViz Tokens ================================== */
:root {
--bd-chart-bg: var(--bd-theme-bg-ffffff, #ffffff);
--bd-chart-grid: var(--bd-theme-palette-e5e7eb, #e5e7eb);
--bd-chart-text: var(--bd-theme-fg-111827, #111827);
--bd-chart-muted: var(--bd-theme-fg-9ca3af, #9ca3af);
/* Palette (match Discovery accent tones) */
--bd-chart-blue: var(--bd-theme-palette-1f6fe5, #1f6fe5);
--bd-chart-green: var(--bd-theme-palette-1a7f2e, #1a7f2e);
--bd-chart-yellow: var(--bd-theme-palette-c88719, #c88719);
--bd-chart-red: var(--bd-theme-palette-b3261e, #b3261e);
--bd-chart-gray: var(--bd-theme-palette-6b7280, #6b7280);
}
/* === Charts (used for Analytics dashboards) === */
.bd-chart {
background: var(--bd-chart-bg);
color: var(--bd-chart-text);
font-family: Inter, system-ui, sans-serif;
}
.bd-chart-title {
font-size: 0.9rem;
font-weight: 600;
color: var(--bd-text);
margin-bottom: .25rem;
}
.bd-chart-legend {
display: flex;
flex-wrap: wrap;
gap: .5rem;
}
.bd-chart-legend-item {
display: flex;
align-items: center;
gap: .35rem;
font-size: .8rem;
color: var(--bd-muted);
}
.bd-chart-legend-swatch {
width: 10px;
height: 10px;
border-radius: 2px;
}
/* optional: chart.js overrides */
.chart-grid line {
stroke: var(--bd-chart-grid);
}
.chart-axis text {
fill: var(--bd-chart-text);
font-size: .75rem;
}
/* === Discovery Form Validation States =========================== */
/* Success */
.bd-form-success {
background: var(--bd-theme-bg-1a7f2e-14, rgba(26, 127, 46, 0.08));
border: 1px solid var(--bd-theme-border-1a7f2e-59, rgba(26, 127, 46, 0.35));
color: var(--bd-theme-fg-0d4a20, #0d4a20);
border-radius: var(--bd-radius);
padding: .75rem 1rem;
font-weight: 600;
}
/* Warning */
.bd-form-warn {
background: var(--bd-theme-bg-c88719-14, rgba(200, 135, 25, 0.08));
border: 1px solid var(--bd-theme-border-c88719-59, rgba(200, 135, 25, 0.35));
color: var(--bd-theme-fg-7a4f00, #7a4f00);
border-radius: var(--bd-radius);
padding: .75rem 1rem;
font-weight: 600;
}
/* Field-level borders */
.bd-input.is-error { border-color: var(--bd-danger) !important; background: var(--bd-theme-bg-fff5f5, #fff5f5) !important; }
.bd-input.is-warn { border-color: var(--bd-warn) !important; background: var(--bd-theme-bg-fffaf0, #fffaf0) !important; }
.bd-input.is-success { border-color: var(--bd-success) !important; background: var(--bd-theme-bg-f7fef7, #f7fef7) !important; }
/* === Discovery Utility Grid / Layout Layer ====================== */
/* Display */
.d-flex { display: flex !important; }
.d-block { display: block !important; }
.d-none { display: none !important; }
/* Flex */
.flex-wrap { flex-wrap: wrap !important; }
.flex-column { flex-direction: column !important; }
.justify-content-between { justify-content: space-between !important; }
.justify-content-center { justify-content: center !important; }
.align-items-center { align-items: center !important; }
.align-items-start { align-items: flex-start !important; }
.align-items-end { align-items: flex-end !important; }
/* Text */
.text-start { text-align: left !important; }
.text-center { text-align: center !important; }
.text-end { text-align: right !important; }
/* Spacing */
.mt-1 { margin-top: .25rem !important; }
.mt-2 { margin-top: .5rem !important; }
.mt-3 { margin-top: 1rem !important; }
.mb-1 { margin-bottom: .25rem !important; }
.mb-2 { margin-bottom: .5rem !important; }
.mb-3 { margin-bottom: 1rem !important; }
.p-1 { padding: .25rem !important; }
.p-2 { padding: .5rem !important; }
.p-3 { padding: 1rem !important; }
.gap-1 { gap: .25rem !important; }
.gap-2 { gap: .5rem !important; }
.gap-3 { gap: 1rem !important; }
/* Width / Grid */
.container { width: 100%; margin: 0 auto; padding: 0 1rem; }
.row { display: flex; flex-wrap: wrap; margin-right: -0.5rem; margin-left: -0.5rem; }
[class*="col-"] { padding-right: .5rem; padding-left: .5rem; box-sizing: border-box; }
.col-6 { flex: 0 0 50%; max-width: 50%; }
.col-12 { flex: 0 0 100%; max-width: 100%; }
/* Visibility */
.visible { visibility: visible !important; }
.invisible { visibility: hidden !important; }
/* Z-index */
.z-10 { z-index: 10; }
.z-100 { z-index: 100; }
.z-1000 { z-index: 1000; }
/* === Discovery Print Styles ===================================== */
@media print {
body {
background: var(--bd-theme-bg-ffffff, #fff);
color: var(--bd-theme-fg-000000, #000);
font-size: 12px;
}
.bd-card {
box-shadow: none !important;
border: 1px solid var(--bd-theme-border-000000, #000) !important;
break-inside: avoid;
margin-bottom: .75rem;
}
.bd-btn,
.bd-toast-stack,
.offcanvas,
.navbar,
.bd-toast { display: none !important; }
a::after { content: ""; } /* remove URL printing */
table { border-collapse: collapse !important; }
th, td { border: 1px solid var(--bd-theme-border-000000, #000) !important; padding: 4px; }
}
/* === Discovery Dark Mode Polish ================================ */
[data-theme="dark"] {
--bd-bg: var(--bd-theme-bg-1a1b1f, #1a1b1f);
--bd-text: var(--bd-theme-fg-e5e7eb, #e5e7eb);
--bd-border: var(--bd-theme-border-2d2f36, #2d2f36);
--bd-muted: var(--bd-theme-fg-9ca3af, #9ca3af);
--bd-soft: var(--bd-theme-palette-23252a, #23252a);
--bd-shadow: 0 6px 16px var(--bd-theme-shadow-000000-99, rgba(0,0,0,.6));
--bd-success: var(--bd-theme-palette-22c55e, #22c55e);
--bd-info: var(--bd-theme-palette-60a5fa, #60a5fa);
--bd-warn: var(--bd-theme-palette-facc15, #facc15);
--bd-danger: var(--bd-theme-palette-ef4444, #ef4444);
}
[data-theme="dark"] .bd-card,
[data-theme="dark"] .bd-modal,
[data-theme="dark"] .bd-table-flat {
background: var(--bd-soft);
border-color: var(--bd-border);
color: var(--bd-text);
}
[data-theme="dark"] .bd-input {
background: var(--bd-theme-bg-111111, #111);
color: var(--bd-text);
border-color: var(--bd-border);
}
[data-theme="dark"] .bd-chip,
[data-theme="dark"] .bd-badge {
background: var(--bd-theme-bg-2b2d31, #2b2d31) !important;
color: var(--bd-text) !important;
border-color: var(--bd-border) !important;
}
/* === Discovery Dark Mode Polish ================================ */
[data-theme="dark"] .bd-table-flat thead th {
background: var(--bd-theme-bg-23252a, #23252a);
color: var(--bd-muted);
}
/* === NAVBAR / LOGO ALIGN FIX ==================== */
.navbar, .topbar {
display:flex !important;
align-items:center !important;
justify-content:space-between !important;
}
.navbar-brand {
display:flex;
align-items:center;
padding-left:0 !important;
margin-left:0 !important;
flex:0 0 auto !important;
}
/* === NAVBAR / LOGO ALIGN FIX ==================== */
.navbar-brand img {
height:32px;
width:auto;
margin-right:.5rem;
}
.topbar .ms-auto { margin-left:0 !important; }
/* === COMPACT LIST-ROW CARDS (Estimates, Leads) =============== */
.estimate-row .bd-card,
.lead-row .bd-card {
padding:.5rem .75rem !important;
border-radius:.5rem !important;
}
.estimate-row .bd-card-body,
.lead-row .bd-card-body {
padding:.5rem .75rem !important;
}
/* === COMPACT LIST-ROW CARDS (Estimates, Leads) =============== */
.estimate-row .bd-card-header,
.lead-row .bd-card-header {
padding:.4rem .75rem !important;
}
/* === COMPACT NAV / PILL BUTTONS =============================== */
.navbar .bd-btn,
#estimate-nav .bd-btn,
.service-dashboard .bd-btn,
.navbar .btn,
#estimate-nav .btn {
font-size:.8rem !important;
padding:.25rem .55rem !important;
border-radius:.4rem !important;
line-height:1.1 !important;
}
.navbar, .topbar { min-height:56px !important; }
.bd-chip, .bd-badge { vertical-align:middle; }
.offcanvas {
z-index: 1045 !important;
}
.offcanvas-backdrop {
z-index: 1040 !important;
}
.offcanvas-backdrop {
background-color: var(--bd-theme-bg-000000-40, rgba(0,0,0,.25)) !important; /* softer than default .5 */
}
/* Rightbar font + sizing */
#rightbar {
font-family: var(--bd-font) !important;
font-size: 0.9rem;
color: var(--bd-text);
}
/* Offcanvas header Discovery style */
#rightbar .offcanvas-header {
padding: 0.5rem 0.75rem; /* tighter than Bootstrap default */
border-bottom: 1px solid var(--bd-border);
}
#rightbar .offcanvas-header h5 {
font-size: 0.95rem; /* smaller heading */
font-weight: 500;
margin: 0;
color: var(--bd-text);
letter-spacing: .1px;
}
/* Replace Bootstrap X */
#rightbar .bd-close {
border: 1px solid var(--bd-border);
border-radius: 6px;
padding: 2px 6px;
font-size: 0.9rem;
background: var(--bd-theme-bg-ffffff, #fff);
color: var(--bd-text);
cursor: pointer;
line-height: 1;
}
#rightbar .bd-close:hover {
background: var(--bd-theme-bg-f9f9f9, #f9f9f9);
}
/* Rightbar links → muted Discovery look, no Bootstrap purple */
#rightbar a {
color: var(--bd-text);
font-size: 0.85rem;
text-decoration: none;
}
#rightbar a:hover {
color: var(--bd-muted);
text-decoration: underline;
}
/* Card header labels inside rightbar */
#rightbar .section-title {
font-size: 0.8rem;
font-weight: 500;
color: var(--bd-muted);
letter-spacing: .04em;
margin-bottom: .35rem;
}
/* Offcanvas close icon anchored top right */
#rightbar .offcanvas-header {
position: relative;
padding: 0.5rem 0.75rem;
border-bottom: 1px solid var(--bd-border);
}
#rightbar .offcanvas-header .bd-close {
position: absolute;
top: 0.5rem;
right: 0.75rem;
border: none;
background: transparent;
font-size: 1rem;
color: var(--bd-muted);
cursor: pointer;
}
#rightbar .offcanvas-header .bd-close:hover {
color: var(--bd-text);
}
/* 🔍 Responsive global search bar */
.search-wrapper {
min-width: 180px; /* never collapse too far */
max-width: 100%; /* default full width */
}
@media (min-width: 576px) { /* sm+ */
.search-wrapper { max-width: 400px; }
}
@media (min-width: 768px) { /* md+ */
.search-wrapper { max-width: 600px; }
}
@media (min-width: 992px) { /* lg+ */
.search-wrapper { max-width: 800px; }
}
@media (min-width: 1200px) { /* xl+ */
.search-wrapper { max-width: 1000px; }
}
@media (min-width: 1400px) { /* xxl */
.search-wrapper { max-width: 1200px; }
}
/* 🔧 Remove white strip on left of logo box */
#page-topbar .navbar-header {
padding-left: 0 !important; /* override px-3 spacing */
}
#page-topbar .navbar-brand-box {
margin-left: 0 !important;
}
.fade-area.htmx-request {
opacity: 0.5;
transition: opacity 0.2s ease-in-out;
}
#search-clear {
background: transparent;
border: none;
line-height: 1;
}
#search-clear:hover {
color: var(--bd-theme-fg-000000, #000);
}
/* 🔄 Skeleton shimmer */
.skeleton {
position: relative;
background: var(--bd-theme-bg-f0f0f0, #f0f0f0);
overflow: hidden;
}
.skeleton::after {
content: "";
position: absolute;
top: 0; left: -150px;
height: 100%; width: 150px;
background: linear-gradient(90deg, transparent, var(--bd-theme-bg-ffffff-99, rgba(255,255,255,.6)), transparent);
animation: shimmer 1.2s infinite;
}
@keyframes shimmer {
100% { transform: translateX(100%); }
}
/* Fade dim when htmx request fires */
#main-content.htmx-request {
opacity: 0.5;
transition: opacity 0.2s ease-in-out;
}
/* === Quick Search Results (Discovery style) === */
#quick-search-results .list-group {
border: 1px solid var(--bd-theme-border-000000, #000); /* thin black border like other Discovery cards */
border-radius: .5rem;
overflow: hidden;
}
#quick-search-results .list-group-item {
padding: .45rem .75rem;
font-size: .875rem;
border: none;
border-bottom: 1px solid var(--bd-theme-border-f0f0f0, #f0f0f0);
display: flex;
align-items: center;
gap: .5rem;
}
#quick-search-results .list-group-item:last-child {
border-bottom: none;
}
#quick-search-results .list-group-item:hover {
background-color: var(--bd-theme-bg-f8f9fa, #f8f9fa);
}
#quick-search-results .bd-badge {
font-size: .7rem;
padding: .2rem .45rem;
border-radius: .35rem;
flex-shrink: 0;
}
#quick-search-results .fw-medium {
font-weight: 500;
}
#quick-search-results .text-truncate {
max-width: 320px; /* keep snippet from pushing too wide */
}
/* === Quick Search Panel Animation === */
#quick-search-results {
opacity: 0;
transform: translateY(4px);
transition: opacity .18s ease, transform .18s ease;
pointer-events: none;
}
#quick-search-results.is-visible {
opacity: 1;
transform: translateY(0);
pointer-events: auto;
}
/* === Quick Search Loading Spinner Animation === */
#quick-search-results .loading-state {
opacity: 0;
transition: opacity .15s ease;
}
#quick-search-results .loading-state.show {
opacity: 1;
}
/* Force all icons in quick search panel to neutral (FA legacy + mdi) */
#quick-search-results i.fa-solid,
#quick-search-results i.fa-regular,
#quick-search-results i.fa-light,
#quick-search-results i.fa-duotone,
#quick-search-results i.mdi {
color: var(--bd-theme-fg-444444, #444) !important; /* soft dark neutral */
}
#quick-search-results .qs-item { position: relative; padding-right: 32px; }
#quick-search-results .qs-chevron {
position: absolute;
right: 12px;
top: 50%;
transform: translateY(-50%);
color: var(--bd-theme-fg-9aa0a6, #9aa0a6);
}
/* === Compact Estimate Row Cards =============================== */
.est-row.bd-card,
.estimate-list.bd-card {
margin-bottom: .35rem !important; /* reduce gap between cards */
border-radius: .45rem !important;
}
.est-row.bd-card > .px-2.py-2,
.estimate-list.bd-card > .px-2.py-2 {
padding-top: .25rem !important; /* tighten vertical padding */
padding-bottom: .25rem !important;
}
.est-row .bd-badge,
.est-row .bd-chip {
margin-top: 0 !important;
margin-bottom: 0 !important;
}
.est-row .col-est-owner,
.est-row .col-est-status,
.est-row .col-est-user {
line-height: 1.1 !important;
}
/* === Estimate Row Left Stripe (Kanban-style) ================== */
.est-row {
position: relative;
overflow: hidden;
}
.est-row.est-row {
box-shadow: inset var(--est-edge-size,6px) 0 0 var(--est-edge-color,var(--bd-theme-bg-6c757d, #6c757d)) !important;
transition: box-shadow .25s ease;
}
/* Hover / selected emphasis */
.est-row:hover { --est-edge-size: 8px; }
.est-row.selected.selected { --est-edge-size: 10px; box-shadow: inset var(--est-edge-size,10px) 0 0 var(--est-edge-color,var(--bd-theme-bg-6c757d, #6c757d)), inset 0 0 0 1px var(--bd-theme-shadow-000000-40, rgba(0,0,0,.25)) !important; }
/* Priority colors (override via inline style or class) */
.est-row.priority-high { --est-edge-color:var(--bd-theme-palette-dc3545, #dc3545); }
.est-row.priority-normal { --est-edge-color:var(--bd-theme-palette-ffc107, #ffc107); }
.est-row.priority-low { --est-edge-color:var(--bd-theme-palette-0d6efd, #0d6efd); }
.est-row.status-complete { --est-edge-color:var(--bd-theme-palette-198754, #198754); }
/* Offset internal content so it doesn’t overlap the stripe */
.est-row > .px-2.py-2,
.est-row > .p-2 {
padding-left: calc(var(--est-edge-size,6px) + .5rem) !important;
}
/* Any container that could clip: allow overflow during dropdown usage */
/* Any container that could clip: allow overflow during dropdown usage
(Exclude Bootstrap .modal so modal scrolling works) */
html, body { overflow: visible !important; }
.bd-card:has(.dropdown-menu.show, .ts-wrapper.open, .ts-dropdown, [aria-expanded='true'], .show > .dropdown-menu, details[open]),
.card:has(.dropdown-menu.show, .ts-wrapper.open, .ts-dropdown, [aria-expanded='true'], .show > .dropdown-menu, details[open]),
.offcanvas:has(.dropdown-menu.show, .ts-wrapper.open, .ts-dropdown, [aria-expanded='true'], .show > .dropdown-menu, details[open]),
.bd-modal:has(.dropdown-menu.show, .ts-wrapper.open, .ts-dropdown, [aria-expanded='true'], .show > .dropdown-menu, details[open]),
.bd-modal__body:has(.dropdown-menu.show, .ts-wrapper.open, .ts-dropdown, [aria-expanded='true'], .show > .dropdown-menu, details[open]),
.table-responsive:has(.dropdown-menu.show, .ts-wrapper.open, .ts-dropdown, [aria-expanded='true'], .show > .dropdown-menu, details[open]) {
overflow: visible !important;
}
.modal-backdrop { z-index: 5000 !important; }
/* Keep left-accent stripes inside rounded corners, exclude bulkbars/nav */
.bd-left-accent,
.bd-card.bd-left-accent { position: relative; overflow: hidden; border-radius: .5rem !important; }
.bd-left-accent::before {
content:""; position:absolute; top:0; left:0; bottom:0;
width: var(--edge-size,6px); background: var(--edge-color,var(--bd-theme-bg-6c757d, #6c757d));
border-top-left-radius:.5rem; border-bottom-left-radius:.5rem; pointer-events:none;
}
.bd-bulkbar.bd-left-accent::before,
#estimate-bulkbar.bd-left-accent::before,
.navbar.bd-left-accent::before,
.topbar.bd-left-accent::before { content:none !important; }
/* Default: anchor dropdown to the control (no portal) */
.ts-dropdown,
.ts-wrapper .ts-dropdown {
position: absolute !important;
z-index: 3000 !important; /* above cards/toolbars */
max-height: 260px !important;
overflow-y: auto !important;
background: var(--bd-theme-bg-ffffff, #fff) !important;
border: 1px solid var(--bd-border);
box-shadow: 0 4px 12px var(--bd-theme-shadow-000000-26, rgba(0,0,0,.15));
}
/* When we portal dropdown into #bd-portal-root, make it fixed & top-most */
#bd-portal-root .ts-dropdown {
position: fixed !important;
z-index: 9999999 !important;
pointer-events: auto;
max-height: 260px !important;
overflow-y: auto !important;
}
/* While a portal dropdown is open, allow overflow and kill transforms */
.bd-portal-open .modal-overlay,
.bd-portal-open .modal-panel {
transform: none !important;
contain: initial !important;
will-change: auto !important;
}
.bd-portal-open .modal-panel,
.bd-portal-open .modal-overlay .card,
.bd-portal-open .modal-overlay .bd-card {
overflow: visible !important;
}
/* =========================================================
TOMSELECT – HARD COMPAT OVERRIDE (final, last-in-wins)
Paste at end of discovery.css
========================================================= */
/* 0) Never let the wrapper clip chips or the dropdown */
html body .ts-wrapper { overflow: visible !important; }
/* 1) Core wrapper */
html body .ts-wrapper.form-select-sm,
html body .ts-wrapper.tag-input,
html body .ts-wrapper.owner-input {
width: 100% !important;
max-width: 100% !important;
border: 1px solid var(--bd-border) !important;
border-radius: 6px !important;
background: var(--bd-theme-bg-ffffff, #fff) !important;
font-size: .875rem !important;
box-sizing: border-box !important;
margin: 0 !important;
display: flex !important;
align-items: center !important;
padding: 0 !important;
}
/* 2) Inner control */
html body .ts-wrapper .ts-control {
border: 0 !important;
background: transparent !important;
box-shadow: none !important;
min-height: 26.55px !important; /* baseline */
height: auto !important;
padding: 0 .5rem !important;
display: flex !important;
align-items: center !important;
flex-wrap: wrap !important; /* allow chips to flow */
}
/* 3) Single-select height */
html body .ts-wrapper.form-select-sm.single {
min-height: 26.55px !important;
height: 26.55px !important;
align-items: center !important;
}
/* 4) Multi/tag selects: allow growth, no chip clipping */
html body .ts-wrapper.multi.form-select-sm,
html body .ts-wrapper.multi.tag-input {
min-height: 26.55px !important;
height: auto !important;
align-items: flex-start !important;
}
html body .ts-wrapper.multi .ts-control {
padding: 2px 4px !important;
gap: 2px !important;
}
/* 5) Chip styling (compact, readable, fits in control) */
html body .ts-wrapper.multi .ts-control .item {
background: var(--bd-theme-bg-e9ecef, #e9ecef) !important;
border: 1px solid var(--bd-border) !important;
border-radius: .3rem !important;
padding: 0 6px !important;
font-size: .75rem !important;
line-height: 1.3 !important;
margin: 1px 2px 1px 0 !important;
color: var(--bd-theme-fg-000000, #000) !important;
display: inline-flex !important;
align-items: center !important;
max-height: 20px !important; /* prevents vertical chop */
}
/* 6) Input element itself */
html body .ts-wrapper .ts-control input {
flex: 1 1 auto !important;
min-width: 120px !important;
height: auto !important;
line-height: 1.2 !important;
font-size: .8rem !important;
margin: 0 !important;
padding: 0 !important;
border: 0 !important;
background: transparent !important;
}
/* 7) Owner-style single (plain text appearance) */
html body .ts-wrapper.owner-input,
html body .ts-wrapper.owner-input.single {
min-height: 26.55px !important;
height: 26.55px !important;
align-items: center !important;
}
html body .ts-wrapper.owner-input .ts-control .item,
html body .ts-wrapper.owner-input .ts-control .ts-item-as-text {
background: transparent !important;
border: 0 !important;
padding: 0 !important;
margin: 0 !important;
line-height: 1.2 !important;
font-size: .875rem !important;
box-shadow: none !important;
color: var(--bd-text) !important;
}
/* 8) Dropdown rows */
html body .ts-dropdown .option {
padding: .25rem .5rem !important;
display: flex !important;
align-items: center !important;
gap: .35rem !important;
font-size: .8rem !important;
line-height: 1.2 !important;
}
/* 9) Dropdown box + stacking (default anchor) */
html body .ts-dropdown,
html body .ts-wrapper .ts-dropdown {
position: absolute !important; /* anchor to control */
z-index: 500000 !important; /* above cards/toolbars */
max-height: 260px !important;
overflow-y: auto !important;
background: var(--bd-theme-bg-ffffff, #fff) !important;
border: 1px solid var(--bd-border) !important;
box-shadow: 0 4px 12px var(--bd-theme-shadow-000000-26, rgba(0,0,0,.15)) !important;
}
/* 10) Open-state guard (in case display is suppressed by other CSS) */
html body .ts-wrapper.open .ts-dropdown {
display: block !important;
opacity: 1 !important;
visibility: visible !important;
}
/* 11) Card/Modal clipping killers while dropdown is open */
html body .bd-card,
html body .bd-subcard,
html body .card,
html body .modal,
html body .modal * {
overflow: visible !important; /* allow the menu to escape */
}
html body .modal { z-index: 1060 !important; } /* over backdrop */
html body .modal-backdrop {
z-index: 1050 !important;
background-color: var(--bd-theme-bg-090b11-8c, rgba(9,11,17,.55)) !important;
}
/* 12) Portal mode (if JS moves dropdown to #bd-portal-root) */
html body #bd-portal-root .ts-dropdown {
position: fixed !important; /* anchor to viewport */
z-index: 9999999 !important; /* top-most */
pointer-events: auto !important;
max-height: 260px !important;
overflow-y: auto !important;
background: var(--bd-theme-bg-ffffff, #fff) !important;
border: 1px solid var(--bd-border) !important;
box-shadow: 0 6px 20px var(--bd-theme-shadow-000000-33, rgba(0,0,0,.2)) !important;
}
/* 13) Touch target bump on small screens */
@media (max-width: 768px) {
html body .ts-wrapper.form-select-sm,
html body .ts-wrapper.tag-input,
html body .ts-wrapper.owner-input {
min-height: 34px !important;
}
}
/* 14) Lead filter bar parity (keeps toolbar aligned) */
html body #lead-search-form .form-select-sm,
html body #lead-search-form .ts-wrapper.form-select-sm,
html body #lead-search-form .ts-wrapper.js-tag-filter {
height: 26.55px !important;
min-height: 26.55px !important;
max-height: 26.55px !important;
font-size: .8rem !important;
line-height: 1.2 !important;
display: flex !important;
align-items: center !important;
}
html body #lead-search-form .ts-wrapper .ts-control {
height: 100% !important;
padding: 0 .5rem !important;
display: flex !important;
align-items: center !important;
}
html body #lead-search-form .ts-wrapper.multi .ts-control .item {
background: var(--bd-theme-bg-e9ecef, #e9ecef) !important;
border: 1px solid var(--bd-theme-border-000000, #000) !important;
border-radius: .25rem !important;
font-size: .7rem !important;
line-height: 1.2 !important;
padding: 0 5px !important;
margin: 1px 2px 1px 0 !important;
max-height: 16px !important;
}
/* 15) Absolute last word on z-index if something else still wins */
html body .ts-dropdown { z-index: 2147483000 !important; }
/* =========================================================
Bootstrap Modal — Scroll Restore (Discovery hard fix)
========================================================= */
/* The dialog sits inside the viewport with a hard cap */
html body .modal .modal-dialog {
max-width: 900px;
max-height: calc(100vh - 3rem);
display: flex;
align-items: center; /* keeps it centered vertically */
}
/* Make content a flex column so only the body scrolls */
html body .modal .modal-content {
display: flex !important;
flex-direction: column !important;
max-height: calc(100vh - 3rem) !important;
overflow: hidden !important; /* prevent double scroll */
}
/* Header/footer pinned; body is the scroll container */
html body .modal .modal-header,
html body .modal .modal-footer {
flex: 0 0 auto !important;
}
html body .modal .modal-body {
flex: 1 1 auto !important;
overflow-y: auto !important;
-webkit-overflow-scrolling: touch;
padding-right: 12px; /* room for scrollbar */
}
/* TomSelect: dropdowns render in so no clipping;
keep them above the modal just in case */
html body .ts-dropdown {
z-index: 2147483000 !important;
}
/* If you ever enable a portal 'open' state, you can allow modal
overflow for that specific case only.
.bd-portal-open .modal { overflow: visible !important; } */
/* === BuildDaily Modal Pointer Fix === */
.modal.show .modal-dialog {
pointer-events: auto !important;
}
.modal.fade.show .modal-dialog {
pointer-events: auto !important;
transform: none !important; /* prevents mis-calc of height in nested stack */
}
/* === BuildDaily Modal Visible Scrollbar === */
body .modal.show .modal-body {
scrollbar-width: thin !important; /* Firefox */
scrollbar-color: var(--bs-dark) var(--bd-theme-palette-f1f1f1, #f1f1f1) !important; /* Firefox track/thumb */
/* Chrome / Edge / Safari */
}
body .modal.show .modal-body::-webkit-scrollbar {
width: 8px !important;
}
body .modal.show .modal-body::-webkit-scrollbar-track {
background: var(--bd-theme-bg-f1f1f1, #f1f1f1) !important;
}
body .modal.show .modal-body::-webkit-scrollbar-thumb {
background: var(--bs-dark) !important;
border-radius: 4px;
}
body .modal.show .modal-body::-webkit-scrollbar-thumb:hover {
background: var(--bd-theme-bg-555555, #555) !important;
}
/* =====================================================================
🔧 GLOBAL FIX — Discovery / Bootstrap modal layout normalization
---------------------------------------------------------------------
Restores proper column layout and compact footer height for all modals.
===================================================================== */
.modal-content {
display: flex !important;
flex-direction: column !important;
height: auto !important;
max-height: 92vh !important;
}
/* Body scrolls, footer pinned */
.modal-body {
flex: 1 1 auto !important;
overflow-y: auto !important;
max-height: calc(92vh - 6rem) !important;
}
/* Compact, non-growing footer */
.modal-footer {
flex: 0 0 auto !important;
padding: 0.5rem 0.75rem !important;
height: auto !important;
min-height: unset !important;
background: var(--bd-theme-bg-ffffff, #fff) !important;
border-top: 1px solid var(--bd-theme-border-000000, #000) !important;
}
/* Defensive reset: prevent forms or inner wrappers from forcing full height */
.modal-content form,
.modal-content > form,
.modal-dialog > form {
display: block !important;
height: auto !important;
max-height: none !important;
}
/* Ensure Bootstrap's default modal dialog sizing applies */
.modal-dialog {
height: auto !important;
max-height: 100% !important;
margin: 1.5rem auto !important;
}
/* === Discovery Compact Input Group Icon Fix === */
.input-group-sm .input-group-text {
height: 25px !important; /* match Discovery input height */
min-height: 25px !important;
line-height: 1.2 !important;
padding: 0 6px !important;
display: flex !important;
align-items: center !important;
justify-content: center !important;
border-radius: 4px !important;
}
.input-group-sm .input-group-text i {
font-size: 0.8rem;
color: var(--bd-muted);
line-height: 1;
margin-top: 0;
}
/* 🔍 Align search icon inline with input */
.bd-input-icon {
position: relative;
display: flex;
align-items: center;
}
.bd-input-icon .bd-icon {
position: absolute;
left: 10px;
top: 50%;
transform: translateY(-50%);
color: var(--bd-theme-fg-6c757d, #6c757d);
font-size: 0.9rem;
pointer-events: none;
}
.bd-has-left-icon {
padding-left: 2rem !important; /* room for icon */
}
/* === Real-time Activity Flash (Discovery style) === */
@keyframes bdActivityFlash {
0% { background-color: var(--bd-theme-bg-fff8c4, #fff8c4); } /* pale yellow */
50% { background-color: var(--bd-theme-bg-fffce8, #fffce8); }
100% { background-color: transparent; }
}
.bd-flash {
animation: bdActivityFlash 2.2s ease-out forwards;
border-radius: 4px;
}
/* === Timesheet Row Flash for Live Updates === */
@keyframes bdRowFlash {
0% { background-color: var(--bd-theme-bg-cde5ff, #cde5ff); } /* soft blue */
50% { background-color: var(--bd-theme-bg-e9f3ff, #e9f3ff); }
100% { background-color: transparent; }
}
.bd-row-flash {
animation: bdRowFlash 2.5s ease-out forwards;
transition: background-color 0.3s ease;
}
/* === PTO Row Flash (Discovery Info Highlight) === */
@keyframes bdPtoFlash {
0% { background-color: var(--bd-theme-bg-fcefc2, #fcefc2); } /* pale gold */
50% { background-color: var(--bd-theme-bg-fff8dc, #fff8dc); }
100% { background-color: transparent; }
}
/* ============================================================
BUILD DAILY — BIDDER PRICE CHIP OVERRIDE (authoritative)
Ensures all bidder pricing chips render in Discovery style
============================================================ */
.bd-price-chip,
.bd-price-chip.good,
.bd-price-chip.warn,
.bd-price-chip.bad,
.bd-price-chip.muted,
.bd-price-chip.info {
display: inline-flex !important;
align-items: center !important;
justify-content: center !important;
gap: .35rem !important;
padding: .2rem .55rem !important;
font-size: .8rem !important;
font-weight: 500 !important;
border: 1px solid var(--bd-theme-border-000000, #000) !important;
border-radius: .5rem !important;
line-height: 1.2 !important;
min-width: 80px !important;
text-align: center !important;
background: var(--bd-theme-bg-ffffff, #fff) !important;
color: var(--bd-theme-fg-212529, #212529) !important;
}
/* === Contextual variants === */
.bd-price-chip.good { background: var(--bd-theme-bg-e8f9e9, #e8f9e9) !important; border-color: var(--bd-theme-border-28a745, #28a745) !important; color: var(--bd-theme-fg-155724, #155724) !important; }
.bd-price-chip.warn { background: var(--bd-theme-bg-fff7e6, #fff7e6) !important; border-color: var(--bd-theme-border-f0ad4e, #f0ad4e) !important; color: var(--bd-theme-fg-a96f05, #a96f05) !important; }
.bd-price-chip.bad { background: var(--bd-theme-bg-ffe5e5, #ffe5e5) !important; border-color: var(--bd-theme-border-dc3545, #dc3545) !important; color: var(--bd-theme-fg-b02a37, #b02a37) !important; }
.bd-price-chip.muted { background: var(--bd-theme-bg-f1f3f5, #f1f3f5) !important; border-color: var(--bd-theme-border-6c757d, #6c757d) !important; color: var(--bd-theme-fg-495057, #495057) !important; }
.bd-price-chip.info { background: var(--bd-theme-bg-e7f1fb, #e7f1fb) !important; border-color: var(--bd-theme-border-0d6efd, #0d6efd) !important; color: var(--bd-theme-fg-0b5ed7, #0b5ed7) !important; }
/* Optional hover polish */
.bd-price-chip:hover {
filter: brightness(0.97);
transition: filter .12s ease-in-out;
}
/* === BIDDER PRICE CHIP STATE ENHANCEMENTS === */
/* Locked prices show green “good” styling */
.bd-price-chip.locked {
background: var(--bd-theme-bg-e8f9e9, #e8f9e9) !important;
border-color: var(--bd-theme-border-28a745, #28a745) !important;
color: var(--bd-theme-fg-155724, #155724) !important;
}
/* Draft / editable pricing stays neutral */
.bd-price-chip.editable {
background: var(--bd-theme-bg-ffffff, #fff) !important;
border-color: var(--bd-theme-border-000000, #000) !important;
color: var(--bd-theme-fg-212529, #212529) !important;
}
/* Hover cue for editable chips only */
.bd-price-chip.editable:hover {
background: var(--bd-theme-bg-fff9db, #fff9db) !important;
cursor: pointer;
}
.bd-pto-flash {
animation: bdPtoFlash 2.5s ease-out forwards;
transition: background-color 0.3s ease;
}
[data-pto-id]:nth-child(odd).bd-pto-flash { animation-delay: 0.1s; }
[data-pto-id]:nth-child(even).bd-pto-flash { animation-delay: 0.25s; }
.bd-focus-row { outline:2px solid var(--bd-theme-border-000000, #000); background:var(--bd-theme-bg-fffbe6, #fffbe6) !important; transition:background .15s; }
.bd-chip-clickable {
border: 1px solid var(--bd-theme-border-000000, #000);
border-radius: 8px;
padding: 2px 8px;
cursor: pointer;
user-select: none;
transition: background-color .2s;
}
.bd-chip-clickable:hover { background-color: var(--bd-theme-bg-f8f9fa, #f8f9fa); }
.bd-chip-clickable.active { background-color: var(--bd-theme-bg-000000, #000); color: var(--bd-theme-fg-ffffff, #fff); }
/* ======================================================
GLOBAL DISCOVERY CARD AESTHETIC — Unified White Panels
====================================================== */
/* Base card surfaces */
.bd-card,
.bd-subcard,
.card {
background-color: var(--bd-theme-bg-ffffff, #fff) !important; /* Pure white surface */
border: 1px solid var(--bd-theme-border-000000-26, rgba(0, 0, 0, 0.15)) !important; /* Subtle border */
border-radius: 0.75rem !important; /* Soft Discovery corners */
box-shadow: 0 2px 6px var(--bd-theme-shadow-000000-0d, rgba(0, 0, 0, 0.05)) !important; /* Gentle lift */
color: var(--bd-theme-fg-1a1a1a, #1a1a1a); /* Crisp dark text */
}
/* Keep nested cards consistent */
.bd-card .card,
.bd-subcard .card {
background-color: var(--bd-theme-bg-ffffff, #fff) !important;
border: 1px solid var(--bd-theme-border-000000-1a, rgba(0, 0, 0, 0.1)) !important;
box-shadow: none !important;
}
/* Table and form elements inside cards stay clean white */
.bd-card table,
.bd-card input,
.bd-card select,
.bd-card textarea {
background-color: var(--bd-theme-bg-ffffff, #fff) !important;
}
/* Page background — faint neutral gray for separation */
body,
.container-fluid,
#module-body,
.section-panel,
.module-content {
background-color: var(--bd-theme-bg-f5f6f7, #f5f6f7) !important;
}
/* Compact headers inside cards */
.bd-card > .card-header,
.bd-subcard > .card-header {
background-color: var(--bd-theme-bg-ffffff, #fff) !important;
border-bottom: 1px solid var(--bd-theme-border-000000-1a, rgba(0, 0, 0, 0.1)) !important;
font-weight: 500;
}
/* Discovery badge, chip, and table polish */
.bd-badge {
border-radius: 0.25rem !important;
font-weight: 500;
}
.table {
background-color: var(--bd-theme-bg-ffffff, #fff) !important;
border-color: var(--bd-theme-border-000000-26, rgba(0, 0, 0, 0.15)) !important;
}
.table thead {
background-color: var(--bd-theme-bg-fafafa, #fafafa) !important;
border-bottom: 1px solid var(--bd-theme-border-000000-1a, rgba(0, 0, 0, 0.1)) !important;
}
/* Slight fade for empty state text */
.text-muted,
small.text-muted {
color: var(--bd-theme-fg-000000-8c, rgba(0, 0, 0, 0.55)) !important;
}
/* Optional: smoother hover lift */
.hover-lift:hover {
box-shadow: 0 4px 10px var(--bd-theme-shadow-000000-14, rgba(0, 0, 0, 0.08)) !important;
transition: box-shadow 0.2s ease-in-out;
}
/* ======================================================
GLOBAL FONT FIX — Override Bootstrap’s default stack
====================================================== */
html, body {
font-family: "Inter", "Roboto", "Helvetica Neue", Arial, sans-serif !important;
font-weight: 400;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
}
/* Ensure all form controls, buttons, modals, tables, chips, etc inherit */
button,
input,
optgroup,
select,
textarea,
label,
.table,
.nav,
.navbar,
.dropdown-menu,
.modal,
.bd-card,
.bd-subcard,
.card {
font-family: inherit !important;
font-weight: 400;
}
/* Slightly heavier headings for Discovery look */
h1, h2, h3, h4, h5, h6,
.bd-card h5, .bd-subcard h6 {
font-family: inherit !important;
font-weight: 500;
letter-spacing: -0.01em;
}
/* Optional: prevent Bootstrap italicization on small tags */
small, .small {
font-style: normal !important;
}
/* Optional – tighter text rendering */
body {
text-rendering: optimizeLegibility;
line-height: 1.45;
}
/* A hardcoded 0.5rem corner override lived here (twice). It pinned every
table to one radius regardless of the container it sat in, and fought
the inherit chain above. The corner cells follow the table now. */
.table thead th {
background-color: var(--bd-theme-bg-f8f9fa, #f8f9fa) !important; /* keep light header tone */
border-bottom: 1px solid var(--bd-theme-border-dee2e6, #dee2e6);
position: relative;
z-index: 1;
}
/* prevent from overlapping the card border */
.table thead {
overflow: hidden;
border-top-left-radius: 0.5rem;
border-top-right-radius: 0.5rem;
}
/* === Discovery Table: perfect rounded corners (top & bottom) === */
/* Make the table wrapper inherit the card's corner radius and clip children */
.bd-card > .table-responsive,
.bd-card .bd-table-wrap {
border-radius: inherit; /* ← matches .rounded-* exactly */
overflow: hidden; /* ← masks header/body backgrounds */
}
/* Remove double borders and keep Discovery look */
.bd-card .table {
margin-bottom: 0;
border: none !important;
background-color: var(--bd-theme-bg-ffffff, #fff); /* body surface */
}
.bd-card .table thead th {
background-color: var(--bd-theme-bg-f8f9fa, #f8f9fa) !important; /* light header */
border-bottom: 1px solid var(--bd-theme-border-dee2e6, #dee2e6) !important;
}
/* TOP corners: inherit from parent so it always matches the card */
.bd-card .table thead tr:first-child th:first-child { border-top-left-radius: inherit; }
.bd-card .table thead tr:first-child th:last-child { border-top-right-radius: inherit; }
/* BOTTOM corners (works with or without ) */
.bd-card .table tfoot tr:last-child th:first-child,
.bd-card .table tbody tr:last-child td:first-child { border-bottom-left-radius: inherit; }
.bd-card .table tfoot tr:last-child th:last-child,
.bd-card .table tbody tr:last-child td:last-child { border-bottom-right-radius: inherit; }
/* === 🔔 BuildDaily Sexy Notifications === */
#notif-wrapper {
position: relative;
}
.notif-btn {
border: none !important;
background: transparent !important;
transition: transform .15s ease;
}
.notif-btn:hover { transform: scale(1.1); }
.notif-badge {
font-size: 0.65rem;
font-weight: 600;
box-shadow: 0 0 0 2px var(--bd-theme-shadow-ffffff, #fff);
animation: notif-bounce 0.3s ease;
}
@keyframes notif-bounce {
0% { transform: scale(0); opacity: 0; }
70% { transform: scale(1.25); opacity: 1; }
100% { transform: scale(1); }
}
.notif-pulse {
position: absolute;
inset: 0;
border-radius: 50%;
border: 2px solid var(--bd-theme-border-1f6fe5, #1f6fe5);
opacity: 0;
transform: scale(0.8);
pointer-events: none;
}
.notif-pulse.active {
animation: notif-pulse 1.4s ease-out forwards;
}
@keyframes notif-pulse {
0% { opacity: 0.8; transform: scale(0.8); }
50% { opacity: 0.5; transform: scale(1.3); }
100% { opacity: 0; transform: scale(1.7); }
}
/* Dropdown animation */
.notif-dropdown {
transform-origin: top right;
animation: notif-fadein .15s ease-out;
}
@keyframes notif-fadein {
from { opacity: 0; transform: scale(0.96) translateY(-4px); }
to { opacity: 1; transform: scale(1) translateY(0); }
}
.notif-badge.flash {
animation: notif-flash 0.8s ease-in-out;
}
@keyframes notif-flash {
0%,100% { background-color:var(--bd-theme-bg-dc3545, #dc3545); }
50% { background-color:var(--bd-theme-bg-1f6fe5, #1f6fe5); }
}
/* Optional: if you use .table-light footer */
.bd-card .table tfoot th,
.bd-card .table tfoot td {
background-color: var(--bd-theme-bg-ffffff, #fff); /* or #f8f9fa if you want a light footer */
border-top: 1px solid var(--bd-theme-border-dee2e6, #dee2e6) !important;
}
/* Safety: keep backgrounds inside the rounded shape */
.bd-card .table thead th,
.bd-card .table tfoot th,
.bd-card .table tfoot td,
.bd-card .table tbody td {
background-clip: padding-box;
}
/* ============================================================
🩹 GLOBAL FIX — Rounded Table Corners + TomSelect Dropdown Safety
Keeps perfect corners but restores overflow for active dropdowns
============================================================ */
/* --- Default: Rounded corners, clean mask --- */
html body .bd-card > .table-responsive,
html body .bd-card .bd-table-wrap,
html body .estimate-list-header,
html body .table-responsive {
position: relative !important;
border-radius: 0.75rem !important;
overflow: hidden !important; /* mask table edges */
background-clip: padding-box !important;
isolation: isolate !important;
z-index: 0 !important;
}
/* --- Table body and header shape --- */
html body .table,
html body .bd-card .table {
border-collapse: separate !important;
border-spacing: 0 !important;
border-radius: inherit !important;
background-color: var(--bd-theme-bg-ffffff, #fff) !important;
}
/* --- Clean top and bottom rounding --- */
html body .table thead tr:first-child th:first-child { border-top-left-radius: inherit !important; }
html body .table thead tr:first-child th:last-child { border-top-right-radius: inherit !important; }
html body .table tbody tr:last-child td:first-child { border-bottom-left-radius: inherit !important; }
html body .table tbody tr:last-child td:last-child { border-bottom-right-radius: inherit !important; }
/* --- Visual polish --- */
html body .table thead th {
background-color: var(--bd-theme-bg-f8f9fa, #f8f9fa) !important;
border-bottom: 1px solid var(--bd-theme-border-000000, #000) !important;
position: relative !important;
z-index: 1 !important;
}
/* --- Card wrapper single black border --- */
html body .bd-card,
html body .card {
border: 1px solid var(--bd-theme-border-000000, #000) !important;
border-radius: 0.75rem !important;
background: var(--bd-theme-bg-ffffff, #fff) !important;
box-shadow: none !important;
isolation: isolate !important;
position: relative !important;
z-index: 1 !important;
}
/* ============================================================
🪄 TomSelect Open-State Override
Re-enables overflow so dropdowns never clip
============================================================ */
/* When dropdown is open, allow overflow again */
html body .bd-card:has(.ts-wrapper.open),
html body .card:has(.ts-wrapper.open),
html body .table-responsive:has(.ts-wrapper.open),
html body .bd-table-wrap:has(.ts-wrapper.open) {
overflow: visible !important;
z-index: 5000 !important; /* raise above sibling cards */
}
/* Ensure dropdown floats top-most */
html body .ts-dropdown {
z-index: 2147483000 !important; /* topmost layer */
}
/* ============================================================
🧩 GLOBAL FIX — TomSelect Dropdown Z-Index Escalation
Ensures dropdowns render above sibling cards, sticky headers, etc.
============================================================ */
/* Core dropdown layer — always above cards, tables, sticky bars */
html body .ts-dropdown,
html body .ts-wrapper .ts-dropdown {
position: absolute !important;
z-index: 999999 !important; /* above cards, navs, sticky headers */
pointer-events: auto !important;
background: var(--bd-theme-bg-ffffff, #fff) !important;
border: 1px solid var(--bd-theme-border-000000, #000) !important;
border-radius: 0.4rem !important;
box-shadow: 0 6px 20px var(--bd-theme-shadow-000000-40, rgba(0,0,0,0.25)) !important;
}
/* When rendered in the portal root (used by Discovery for modals) */
html body #bd-portal-root .ts-dropdown {
position: fixed !important;
z-index: 2147483000 !important; /* truly topmost */
pointer-events: auto !important;
}
/* Optional: small overlap safety margin to avoid shadow cutoff */
html body .ts-dropdown::after {
content: "";
position: absolute;
inset: -2px;
pointer-events: none;
}
/* Make sure parent cards don’t override this layer */
html body .bd-card,
html body .card,
html body .estimate-list-header,
html body .bd-table-wrap,
html body .table-responsive {
z-index: 1 !important; /* keep them low enough */
}
.bd-micro-pipeline {
position: relative;
overflow: hidden;
background: var(--bd-theme-bg-f8f9fa, #f8f9fa) !important;
border: 1px solid var(--bd-theme-border-000000, #000) !important;
border-radius: 999px !important;
height: 6px !important;
width: 110px !important;
}
.bd-micro-pipeline .fill {
position: absolute;
top: 0; left: 0;
height: 100%;
width: 0%;
border-radius: 999px;
transition: width 1s ease;
z-index: 2; /* keep above background */
background: var(--bd-theme-bg-dee2e6, #dee2e6); /* safe default */
}
/* === Discovery Nav-Link Toggle Buttons === */
.bd-nav-link {
display:inline-flex;
align-items:center;
gap:0.35rem;
font-size:0.85rem;
font-weight:500;
border:1px solid var(--bd-theme-border-000000, #000);
border-radius:0.4rem;
padding:4px 10px;
cursor:pointer;
background:var(--bd-theme-bg-ffffff, #fff);
color:var(--bd-theme-fg-111111, #111);
user-select:none;
transition:background .15s ease, color .15s ease, box-shadow .15s ease;
}
.bd-nav-link:hover {
background:var(--bd-theme-bg-f3f3f3, #f3f3f3);
}
.bd-nav-link.active {
background:var(--bd-theme-bg-111111, #111);
color:var(--bd-theme-fg-ffffff, #fff);
box-shadow:0 0 0 2px var(--bd-theme-shadow-111111, #111) inset;
}
.bd-nav-link i {
font-size:0.9em;
}
.bd-nav-link input[type="radio"],
.bd-nav-link input[type="checkbox"] {
display:none;
}
/* === Discovery Form Label Readability Fix === */
.bd-card .form-label,
form .form-label {
font-size: 0.85rem !important; /* one step larger than .small */
font-weight: 500 !important;
color: var(--bd-text) !important;
margin-bottom: 0.25rem !important;
}
[data-theme="dark"] .form-label {
color: var(--bd-text) !important;
}
/* === Discovery Button Shape Override (kill Bootstrap pill rounding) === */
html body .bd-btn,
html body button.bd-btn,
html body .bd-btn-sm {
border-radius: 4px !important; /* crisp Discovery corners */
box-shadow: none !important;
font-weight: 600 !important;
text-transform: none !important;
}
html body .bd-btn-dark {
background: var(--bd-theme-bg-000000, #000) !important;
color: var(--bd-theme-fg-ffffff, #fff) !important;
border: 1px solid var(--bd-theme-border-000000, #000) !important;
}
html body .bd-btn-outline {
background: var(--bd-theme-bg-ffffff, #fff) !important;
color: var(--bd-theme-fg-000000, #000) !important;
border: 1px solid var(--bd-theme-border-000000, #000) !important;
}
html body .bd-btn-outline:hover {
background: var(--bd-theme-bg-f1f1f1, #f1f1f1) !important;
}
/* === TOPBAR — Logo responsive + collapse sync === */
#page-topbar .navbar-brand-box .logo-lg { display: none !important; }
#page-topbar .navbar-brand-box .logo-sm { display: inline-block !important; }
@media (min-width: 992px) {
#page-topbar .navbar-brand-box .logo-lg { display: inline-block !important; }
#page-topbar .navbar-brand-box .logo-sm { display: none !important; }
/* Flip to small logo when the menu is collapsed */
body.vertical-collapsed #page-topbar .navbar-brand-box .logo-lg { display: none !important; }
body.vertical-collapsed #page-topbar .navbar-brand-box .logo-sm { display: inline-block !important; }
}
/* Also support the direct .collapsed toggle on the brand box */
#page-topbar .navbar-brand-box.collapsed .logo-lg { display: none !important; }
#page-topbar .navbar-brand-box.collapsed .logo-sm { display: inline-block !important; }
/* === TOPBAR — Desktop search icon exact alignment === */
#page-topbar .bd-input-icon { position: relative !important; }
#page-topbar .bd-input-icon .bd-icon {
position: absolute !important;
left: 12px !important; /* fixed left */
top: 50% !important; /* vertical center */
transform: translateY(-50%) !important;
margin-left: 0 !important; /* kill Bootstrap ms-* margin */
font-size: .9rem !important;
color: var(--bd-muted) !important;
pointer-events: none !important;
}
/* input padding to match icon offset */
#page-topbar #global-search,
#page-topbar input.bd-has-left-icon {
padding-left: 2.1rem !important;
height: 34px !important;
line-height: 34px !important;
}
/* ==========================================================
📱 RFP Scope Row – Mobile Responsiveness Fix
========================================================== */
@media (max-width: 768px) {
/* Stack the header row */
#rfp-section .bd-card > .d-flex,
#rfp-section .bd-card .p-2.d-flex {
flex-wrap: wrap !important;
flex-direction: column !important;
align-items: flex-start !important;
gap: .4rem !important;
}
/* Each sub-block should fill full width */
#rfp-section .bd-card .d-flex > div {
width: 100% !important;
}
/* Move the right-aligned controls to bottom row */
#rfp-section .bd-card .d-flex > .dropdown,
#rfp-section .bd-card .d-flex > .d-flex.ms-2 {
align-self: stretch !important;
display: flex !important;
justify-content: flex-start !important;
}
/* Compact the chips and icons for touch */
#rfp-section .bd-card .bd-chip,
#rfp-section .bd-card .bd-badge {
font-size: 0.78rem !important;
padding: 2px 6px !important;
}
/* Tighten buttons in action row */
#rfp-section .bd-card .btn.btn-sm {
padding: 0.25rem 0.5rem !important;
font-size: 0.8rem !important;
}
/* Collapsed timeline padding fix */
#rfp-section .collapse .p-2 {
padding: 0.75rem !important;
}
/* Make timeline text readable on small screens */
#rfp-section .bd-timeline-item {
font-size: 0.85rem !important;
}
}
/* ==========================================================
📱 Bid Letter Header — Mobile Responsiveness Fix
========================================================== */
@media (max-width: 768px) {
/* Stack header rows */
#estimate-bidletters .border-bottom.d-flex {
flex-direction: column !important;
align-items: flex-start !important;
gap: .5rem !important;
}
/* Header title full width */
#estimate-bidletters h6 {
width: 100% !important;
font-size: 1rem !important;
line-height: 1.3 !important;
}
/* Action buttons block-style on small screens */
#estimate-bidletters .bidletters-header-actions {
flex-wrap: wrap !important;
gap: .4rem !important;
width: 100% !important;
}
#estimate-bidletters .bidletters-header-actions button,
#estimate-bidletters .bidletters-header-actions .form-select {
flex: 1 1 48% !important; /* two-up grid on small screens */
min-width: 140px !important;
white-space: nowrap !important;
}
/* Prevent select from shrinking too small */
#estimate-bidletters select.form-select-sm {
width: 100% !important;
}
/* Buttons tighter for thumb reach */
#estimate-bidletters .btn.btn-sm {
font-size: 0.8rem !important;
padding: 0.35rem 0.6rem !important;
}
}
/* ==========================================================
🌐 Universal Header Flex Responsiveness (Discovery Standard)
Applies to any .bd-card > .d-flex header rows (RFPs, Bidders, Letters, etc.)
========================================================== */
@media (max-width: 768px) {
/* Generic header row fix */
.bd-card > .d-flex,
.bd-card .border-bottom.d-flex {
flex-wrap: wrap !important;
flex-direction: column !important;
align-items: flex-start !important;
gap: .5rem !important;
}
/* Any header action cluster (bidletters-header-actions, bidders-header-actions, etc.) */
.bd-card [class*="-header-actions"],
.bd-card .header-actions {
flex-wrap: wrap !important;
width: 100% !important;
gap: .4rem !important;
}
/* Buttons, selects, and inputs inside header clusters */
.bd-card [class*="-header-actions"] .btn,
.bd-card [class*="-header-actions"] .form-select,
.bd-card [class*="-header-actions"] select,
.bd-card [class*="-header-actions"] input {
flex: 1 1 48% !important; /* two-wide grid on phones */
min-width: 140px !important;
white-space: nowrap !important;
}
/* Titles always full width */
.bd-card h5, .bd-card h6 {
width: 100% !important;
font-size: 1rem !important;
line-height: 1.3 !important;
}
/* Compact buttons */
.bd-card .btn.btn-sm {
font-size: .8rem !important;
padding: .35rem .6rem !important;
}
/* Keep selects readable */
.bd-card .form-select-sm {
width: 100% !important;
}
/* Ensure no horizontal scrollbars on cards */
.bd-card {
overflow-x: hidden !important;
}
}
/* ==========================================================
🌐 UNIVERSAL TABLE + CARD RESPONSIVE SCROLL FIX
Applies to all .table-responsive wrappers in Discovery cards
========================================================== */
/* 1️⃣ Enable horizontal scroll when content overflows */
.bd-card .table-responsive,
.table-responsive {
overflow-x: auto !important;
-webkit-overflow-scrolling: touch !important;
scrollbar-width: thin !important; /* Firefox */
}
/* 2️⃣ Subtle scroll bar polish */
.bd-card .table-responsive::-webkit-scrollbar,
.table-responsive::-webkit-scrollbar {
height: 6px !important;
}
.bd-card .table-responsive::-webkit-scrollbar-thumb,
.table-responsive::-webkit-scrollbar-thumb {
background: var(--bd-theme-bg-000000-40, rgba(0, 0, 0, 0.25)) !important;
border-radius: 999px !important;
}
/* Table widths belong to each register. A global !important minimum
overrides wider authored grids and also breaks mobile card layouts. */
:where(.table-responsive) > table {
margin-bottom: 0 !important;
}
/* 4️⃣ Prevent double scroll bars on nested responsive divs */
.bd-card .table-responsive .table-responsive {
overflow: visible !important;
}
/* 5️⃣ Small-screen touch improvements */
@media (max-width: 768px) {
.bd-card .table-responsive,
.table-responsive {
border: 1px solid var(--bd-theme-border-000000, #000) !important;
border-radius: .5rem !important;
background: var(--bd-theme-bg-ffffff, #fff) !important;
margin-bottom: .5rem !important;
padding-bottom: .25rem !important;
}
}
.modal .table-responsive {
overflow-x: auto !important;
max-width: 100vw !important;
}
/* === Header badges: allow wrapping so long summaries don't clip === */
.bd-card > .d-flex .bd-badge,
.bd-card .border-top.d-flex .bd-badge,
.bd-card .border-bottom.d-flex .bd-badge {
white-space: normal !important; /* override global nowrap */
word-break: break-word !important;
overflow: visible !important;
text-overflow: clip !important;
display: inline-block !important;
max-width: 100% !important;
line-height: 1.25 !important;
}
/* If the badge sits with a chevron, keep the row flexible */
.bd-card > .d-flex,
.bd-card .border-top.d-flex,
.bd-card .border-bottom.d-flex {
flex-wrap: wrap !important;
}
/* Nice on phones */
@media (max-width: 768px) {
.bd-card > .d-flex .bd-badge { font-size: .85rem !important; }
}
/* ==========================================================
📂 FILE MANAGER + TABLE RESPONSIVE SCROLL (Authoritative)
========================================================== */
/* 1️⃣ Allow inner tables to scroll horizontally */
.bd-card #file-list.table-responsive,
#file-list.table-responsive {
overflow-x: auto !important;
overflow-y: hidden !important;
-webkit-overflow-scrolling: touch !important;
display: block !important;
width: 100% !important;
max-width: 100% !important;
scrollbar-width: thin !important;
border-top: 1px solid var(--bd-theme-border-000000, #000) !important;
border-bottom: 1px solid var(--bd-theme-border-000000, #000) !important;
}
/* 2️⃣ Give the table a minimum width so columns don't collapse */
#estimate-file-manager .table,
#file-list > table {
min-width: 800px !important; /* adjust if you want more width */
table-layout: auto !important;
}
/* 3️⃣ Scrollbar polish */
#estimate-file-manager .table-responsive::-webkit-scrollbar,
#file-list.table-responsive::-webkit-scrollbar {
height: 6px !important;
}
#estimate-file-manager .table-responsive::-webkit-scrollbar-thumb,
#file-list.table-responsive::-webkit-scrollbar-thumb {
background: var(--bd-theme-bg-000000-40, rgba(0,0,0,0.25)) !important;
border-radius: 999px !important;
}
/* 4️⃣ Prevent .bd-card or parent panels from clipping overflow */
#estimate-file-manager,
.bd-card:has(#file-list) {
overflow: visible !important;
}
/* 5️⃣ Mobile experience: give a visual cue and safe padding */
@media (max-width: 768px) {
#file-list.table-responsive {
margin-bottom: 0.5rem !important;
border: 1px solid var(--bd-theme-border-000000, #000) !important;
border-radius: .5rem !important;
background: var(--bd-theme-bg-ffffff, #fff) !important;
padding-bottom: 0.25rem !important;
}
}
/* ==========================================================
📱 Universal Modal Scroll + Layout Fix (Discovery)
Applies to all modals, esp. Add/Edit Bidder form
========================================================== */
/* 1️⃣ Allow body scroll within modal */
.modal-dialog {
width: auto !important;
max-width: 95vw !important; /* shrink to fit smaller screens */
margin: 1rem auto !important;
}
.modal-content {
display: flex !important;
flex-direction: column !important;
max-height: calc(100vh - 2rem) !important; /* viewport minus margins */
overflow: hidden !important; /* only body scrolls */
border-radius: .75rem !important;
}
/* Header and footer fixed height, body scrollable */
.modal-header,
.modal-footer {
flex: 0 0 auto !important;
}
.modal-body {
flex: 1 1 auto !important;
overflow-y: auto !important;
-webkit-overflow-scrolling: touch !important;
padding: 1rem !important;
background: var(--bd-soft, var(--bd-theme-bg-ffffff, #fff));
}
/* Prevent centered modals from cutting off on small screens */
@media (max-width: 768px) {
.modal-dialog-centered {
align-items: flex-start !important;
}
.modal-content {
max-height: 95vh !important;
}
}
/* Optional: smaller font + padding for mobile */
@media (max-width: 576px) {
.modal-body {
padding: .75rem !important;
}
.modal-header, .modal-footer {
padding: .5rem .75rem !important;
}
}
/* === Discovery Checkbox (authoritative override) === */
input[type="checkbox"].form-check-input:not([role="switch"]):not(.form-switch .form-check-input),
input[type="checkbox"].bd-checkbox {
appearance: none !important;
-webkit-appearance: none !important;
position: relative !important;
display: inline-flex !important;
align-items: center !important;
justify-content: center !important;
width: 1.05rem !important;
height: 1.05rem !important;
border: 1.5px solid var(--bd-border, var(--bd-theme-border-000000, #000)) !important;
border-radius: 4px !important;
background: var(--bd-bg, var(--bd-theme-bg-ffffff, #fff)) !important;
cursor: pointer !important;
transition: all 0.15s ease-in-out !important;
box-shadow: none !important;
}
input[type="checkbox"].form-check-input:not([role="switch"]):not(.form-switch .form-check-input):hover,
input[type="checkbox"].bd-checkbox:hover {
background: var(--bd-soft, var(--bd-theme-bg-f7f7f9, #f7f7f9)) !important;
}
input[type="checkbox"].form-check-input:not([role="switch"]):not(.form-switch .form-check-input):checked,
input[type="checkbox"].bd-checkbox:checked {
background: var(--bd-theme-bg-111111, #111) !important;
border-color: var(--bd-theme-border-111111, #111) !important;
}
input[type="checkbox"].form-check-input:not([role="switch"]):not(.form-switch .form-check-input):checked::after,
input[type="checkbox"].bd-checkbox:checked::after {
content: "";
position: absolute;
width: 6px;
height: 10px;
border: solid var(--bd-theme-border-ffffff, #fff);
border-width: 0 2px 2px 0;
transform: rotate(45deg);
top: 50%;
left: 50%;
translate: -50% -55%;
}
[data-theme="dark"] input[type="checkbox"].form-check-input:not([role="switch"]):not(.form-switch .form-check-input),
[data-theme="dark"] input[type="checkbox"].bd-checkbox {
background: var(--bd-theme-bg-1a1b1f, #1a1b1f) !important;
border-color: var(--bd-border, var(--bd-theme-border-2d2f36, #2d2f36)) !important;
}
[data-theme="dark"] input[type="checkbox"].form-check-input:not([role="switch"]):not(.form-switch .form-check-input):checked,
[data-theme="dark"] input[type="checkbox"].bd-checkbox:checked {
background: var(--bd-theme-bg-ffffff, #fff) !important;
border-color: var(--bd-theme-border-ffffff, #fff) !important;
}
[data-theme="dark"] input[type="checkbox"].form-check-input:not([role="switch"]):not(.form-switch .form-check-input):checked::after,
[data-theme="dark"] input[type="checkbox"].bd-checkbox:checked::after {
border-color: var(--bd-theme-border-000000, #000) !important;
}
/* ==========================================================
🩹 SAFE GLOBAL MODAL CENTERING PATCH — Discovery
Centers modals visually without breaking Bootstrap behavior
========================================================== */
.modal-dialog-centered {
display: flex !important;
align-items: center !important;
justify-content: center !important;
min-height: calc(100vh - 2rem) !important;
}
/* cap size and keep scroll contained */
.modal-content {
border-radius: 0.75rem !important;
max-height: calc(100vh - 3rem) !important;
overflow: hidden !important;
display: flex !important;
flex-direction: column !important;
}
.modal-body {
flex: 1 1 auto !important;
overflow-y: auto !important;
-webkit-overflow-scrolling: touch !important;
}
/* responsive safety */
@media (max-width: 768px) {
.modal-dialog-centered {
align-items: flex-start !important;
margin-top: 1rem !important;
}
}
/* ==========================================================
🩹 Discovery Modal — clean float, fully interactive
========================================================== */
html body .modal {
background: transparent !important; /* no full-screen white/gray */
backdrop-filter: none !important;
border: none !important;
box-shadow: none !important;
z-index: 5000 !important;
}
html body .modal-backdrop,
html body .modal-backdrop.show {
display: none !important; /* remove Bootstrap backdrop */
}
html body .modal-dialog {
margin: 0 auto !important;
display: flex !important;
align-items: center !important;
justify-content: center !important;
max-width: 520px !important;
width: 100% !important;
background: transparent !important;
}
html body .modal-content {
background: var(--bd-theme-bg-ffffff, #fff) !important; /* clean Discovery white card */
border: 1px solid var(--bd-theme-border-000000, #000) !important;
border-radius: 0.75rem !important;
box-shadow: 0 4px 16px var(--bd-theme-shadow-000000-40, rgba(0,0,0,.25)) !important;
overflow: hidden !important;
}
.bd-modal {
background: transparent !important;
animation: none !important;
transition: none !important;
padding: 0 !important;
}
.bd-modal__dialog {
animation: none !important;
transition: none !important;
background: transparent !important;
}
.bd-modal__dialog > .modal-content,
.bd-modal__dialog > .border {
animation: none !important;
transition: none !important;
}
/* ==========================================================
🔔 Discovery Notification Dropdown (responsive + polish)
========================================================== */
.notif-dropdown {
border: 1px solid var(--bd-border, var(--bd-theme-border-000000, #000)) !important;
border-radius: 10px !important;
box-shadow: 0 4px 16px var(--bd-theme-shadow-000000-1f, rgba(0, 0, 0, 0.12)) !important;
background: var(--bd-bg, var(--bd-theme-bg-ffffff, #fff)) !important;
color: var(--bd-text, var(--bd-theme-fg-111111, #111)) !important;
overflow: hidden !important;
padding: 0 !important;
width: 360px !important;
max-height: 420px !important;
}
/* header / footer Discovery tone */
.notif-dropdown .border-bottom,
.notif-dropdown .border-top {
border-color: var(--bd-border, var(--bd-theme-border-000000, #000)) !important;
}
.notif-dropdown .list-group-item {
border: 0 !important;
border-bottom: 1px solid var(--bd-theme-border-000000-0d, rgba(0,0,0,0.05)) !important;
background: var(--bd-theme-bg-ffffff, #fff) !important;
color: var(--bd-text, var(--bd-theme-fg-111111, #111)) !important;
}
.notif-dropdown .list-group-item:hover {
background: var(--bd-theme-bg-f8f9fa, #f8f9fa) !important;
}
/* ===== Mobile ===== */
@media (max-width: 768px) {
.notif-dropdown {
position: fixed !important;
inset: auto 12px 12px 12px !important; /* 12px padding from all sides */
width: auto !important;
max-width: none !important;
border-radius: 12px !important;
z-index: 99999 !important;
}
/* Drop shadow polish */
.notif-dropdown.show {
animation: notifFadeIn .15s ease-out;
}
@keyframes notifFadeIn {
from { opacity: 0; transform: translateY(-6px); }
to { opacity: 1; transform: translateY(0); }
}
/* Make the list scroll cleanly */
.notif-dropdown #notif-list {
max-height: 60vh !important;
overflow-y: auto !important;
-webkit-overflow-scrolling: touch !important;
}
}
.notif-dropdown .p-2.border-bottom {
background: var(--bd-theme-bg-ffffff, #fff) !important;
font-weight: 600 !important;
color: var(--bd-text, var(--bd-theme-fg-111111, #111)) !important;
}
.notif-dropdown .border-top.text-center {
background: var(--bd-theme-bg-fafafa, #fafafa) !important;
}
/* ==========================================================
🔔 Discovery Notification Dropdown – refinements
========================================================== */
/* Slightly larger, balanced icon for the header & chip */
.notif-icon-lg {
font-size: 1.15rem !important;
line-height: 1 !important;
}
/* Muted rectangular Discovery badge for 'Mark All As Read' */
.notif-markall-btn {
border: 1px solid var(--bd-border, var(--bd-theme-border-000000, #000)) !important;
background: var(--bd-soft, var(--bd-theme-bg-f5f5f7, #f5f5f7)) !important;
color: var(--bd-text, var(--bd-theme-fg-111111, #111)) !important;
border-radius: 6px !important; /* soft corners, not pill */
font-size: 0.8rem !important;
font-weight: 500 !important;
padding: 3px 10px !important;
line-height: 1.2 !important;
transition: all 0.15s ease-in-out;
display: inline-flex !important;
align-items: center !important;
gap: 5px !important;
cursor: pointer !important;
}
/* Subtle hover polish, not red */
.notif-markall-btn:hover,
.notif-markall-btn:focus {
background: var(--bd-theme-bg-e9ecef, #e9ecef) !important;
border-color: var(--bd-border, var(--bd-theme-border-000000, #000)) !important;
color: var(--bd-text, var(--bd-theme-fg-111111, #111)) !important;
text-decoration: none !important;
}
/* Optional: make header icon a bit larger too */
.notif-dropdown .fa-inbox,
.notif-dropdown .fa-bell {
font-size: 0.95rem !important;
}
/* ==========================================================
🔔 Notification Icon + Dropdown
========================================================== */
.notif-icon {
font-size: 1.05rem;
color: var(--bd-text,var(--bd-theme-fg-111111, #111));
animation: notifIdle 4s ease-in-out infinite;
}
@keyframes notifIdle {
0%,100%{transform:rotate(0deg);}
50%{transform:rotate(15deg);}
}
.notif-glow {
position:absolute; inset:0;
border-radius:8px;
background:radial-gradient(circle,var(--bd-theme-bg-ff0000-26, rgba(255,0,0,0.15)) 0%,transparent 70%);
opacity:0; transition:opacity .3s;
}
.has-notifs .notif-glow {opacity:.4;}
.notif-badge-count {
background:var(--bd-theme-bg-dc3545, #dc3545)!important;
font-size:.65rem!important;
min-width:16px!important;
line-height:1!important;
padding:2px 4px!important;
color:var(--bd-theme-fg-ffffff, #fff)!important;
font-weight:600;
}
.notif-dropdown {
border:1px solid var(--bd-border,var(--bd-theme-border-000000, #000))!important;
border-radius:10px!important;
box-shadow:0 4px 16px var(--bd-theme-shadow-000000-1f, rgba(0,0,0,0.12))!important;
background:var(--bd-bg,var(--bd-theme-bg-ffffff, #fff))!important;
overflow:hidden!important;
width:360px!important;
max-height:420px!important;
}
.notif-markall-btn{
background:var(--bd-soft,var(--bd-theme-bg-f5f5f7, #f5f5f7))!important;
border:1px solid var(--bd-border,var(--bd-theme-border-000000, #000))!important;
border-radius:6px!important;
font-size:.8rem!important;
font-weight:500!important;
padding:2px 8px!important;
color:var(--bd-text,var(--bd-theme-fg-111111, #111))!important;
transition:background .2s ease;
}
.notif-markall-btn:hover{background:var(--bd-theme-bg-e9ecef, #e9ecef)!important;}
/* ==========================================================
👤 Profile Dropdown
========================================================== */
.profile-dropdown {
border:1px solid var(--bd-border,var(--bd-theme-border-000000, #000))!important;
border-radius:10px!important;
box-shadow:0 4px 12px var(--bd-theme-shadow-000000-1f, rgba(0,0,0,0.12))!important;
background:var(--bd-bg,var(--bd-theme-bg-ffffff, #fff))!important;
min-width:220px!important;
overflow:hidden!important;
}
.profile-item{
display:flex;align-items:center;gap:6px;
padding:.5rem .75rem;
font-size:.875rem;
color:var(--bd-text,var(--bd-theme-fg-111111, #111))!important;
text-decoration:none!important;
transition:background .2s ease;
}
.profile-item:hover{
background:var(--bd-soft,var(--bd-theme-bg-f7f7f9, #f7f7f9))!important;
}
/* ==========================================================
⚙️ Rightbar Toggle
========================================================== */
.rightbar-btn{
position:relative!important;
width:32px;height:32px;
border:none!important;
background:var(--bd-soft,var(--bd-theme-bg-f5f5f7, #f5f5f7))!important;
border-radius:8px!important;
cursor:pointer;
transition:background .2s ease,transform .2s ease;
}
.rightbar-btn:hover{background:var(--bd-theme-bg-e9ecef, #e9ecef)!important;transform:translateY(-1px);}
.rightbar-icon{
font-size:.85rem!important;
color:var(--bd-text,var(--bd-theme-fg-111111, #111))!important;
transition:transform 1.5s linear;
}
@keyframes rbSpin{from{transform:rotate(0);}to{transform:rotate(360deg);}}
.rightbar-btn:hover .rightbar-icon{animation:rbSpin 2.5s linear infinite;}
.rightbar-glow{
position:absolute;inset:0;
border-radius:8px;
background:radial-gradient(circle,var(--bd-theme-bg-1f6fe5-1f, rgba(31,111,229,0.12)) 0%,transparent 70%);
opacity:0;animation:rbPulse 3s ease-in-out infinite;
}
@keyframes rbPulse{
0%,100%{transform:scale(1);opacity:0;}
50%{transform:scale(1.25);opacity:.35;}
}
/* --- When hamburger toggles closed state --- */
#page-topbar .navbar-brand-box.collapsed .logo-lg {
display: none !important;
}
#page-topbar .navbar-brand-box.collapsed .logo-sm {
display: inline-block !important;
}
/* === Responsive Roster Cards (Compact + Expanded) === */
@media (max-width: 992px) {
.roster-row {
flex-direction: column !important;
align-items: stretch !important;
text-align: left !important;
padding: .75rem .75rem !important;
}
.roster-row > div {
width: 100% !important;
max-width: 100% !important;
margin-right: 0 !important;
}
.roster-row .d-flex.align-items-center.justify-content-end {
justify-content: space-between !important;
flex-wrap: wrap !important;
margin-top: .5rem;
}
.roster-row .super-status {
margin-bottom: .5rem;
}
.roster-row .icon-btn {
width: 32px;
height: 30px;
margin: 0 2px;
}
.roster-row .d-flex.flex-column.small.text-muted {
font-size: .85rem;
margin-top: .4rem;
}
.roster-row img.rounded-circle {
width: 40px !important;
height: 40px !important;
}
}
/* === Expanded View (Stacked Columns on Mobile) === */
@media (max-width: 768px) {
.roster-row .row.g-3 {
--bs-gutter-x: .5rem;
--bs-gutter-y: .5rem;
}
.roster-row .col-md-6 {
flex: 0 0 100%;
max-width: 100%;
}
.roster-row .bd-subcard {
padding: .75rem !important;
}
.roster-row .stat-dots .dot {
width: 8px;
height: 8px;
}
.roster-row .icon-btn i {
font-size: .85rem !important;
}
.roster-row .bd-badge {
font-size: .7rem !important;
padding: 2px 6px !important;
}
.roster-row .fw-semibold.text-dark {
font-size: 1rem !important;
}
}
/* === Extra Small (Phones <576px) === */
@media (max-width: 576px) {
.roster-row {
padding: .5rem .6rem !important;
}
.roster-row .fw-semibold.text-dark {
font-size: .95rem !important;
}
.roster-row .icon-btn {
width: 28px;
height: 26px;
}
.roster-row .super-status .bd-badge {
display: inline-flex;
font-size: .68rem;
}
.roster-row .d-flex.flex-column.small.text-muted {
font-size: .8rem;
}
}
/* === DISCOVERY TABLE RESTORE — Manpower Schedule === */
#schedule-grid {
border: 1px solid var(--bd-theme-border-000000, #000) !important;
border-radius: 6px;
overflow: hidden;
background: var(--bd-theme-bg-ffffff, #fff);
box-shadow: none;
}
/* --- Table reset --- */
#schedule-grid table.table {
border: none !important;
border-collapse: collapse !important;
width: 100%;
}
#schedule-grid thead th {
border: 1px solid var(--bd-theme-border-000000, #000) !important;
background: var(--bd-theme-bg-f8f8f8, #f8f8f8) !important;
color: var(--bd-theme-fg-111111, #111);
font-weight: 600;
text-align: center;
padding: 4px 6px;
}
#schedule-grid tbody td {
border: 1px solid var(--bd-theme-border-000000, #000) !important;
background: var(--bd-theme-bg-ffffff, #fff);
padding: 3px 6px;
vertical-align: middle;
}
/* --- Supervisor rows --- */
#schedule-grid tr.bg-light-subtle td {
background: var(--bd-theme-bg-f3f3f3, #f3f3f3) !important;
font-weight: 600;
border-top: 2px solid var(--bd-theme-border-000000, #000) !important;
border-bottom: 1px solid var(--bd-theme-border-000000, #000) !important;
}
/* --- Remove doubled outer borders --- */
#schedule-grid thead th:first-child,
#schedule-grid tbody td:first-child {
border-left-width: 0 !important;
}
#schedule-grid thead th:last-child,
#schedule-grid tbody td:last-child {
border-right-width: 0 !important;
}
#schedule-grid tr:last-child td {
border-bottom-width: 0 !important;
}
/* --- Cell consistency --- */
#schedule-grid .table-sm > :not(caption) > * > * {
border-color: var(--bd-theme-border-000000, #000) !important;
padding: 3px 6px !important;
}
/* --- Optional light visual separation between groups --- */
#schedule-grid tr.bg-light-subtle + tr.bg-light-subtle td {
border-top: 3px double var(--bd-theme-border-000000, #000) !important;
}
/* --- Make office/admin rows look clean --- */
#schedule-grid tr[data-employee-id] td {
border-top: 1px solid var(--bd-theme-border-000000, #000) !important;
border-bottom: 1px solid var(--bd-theme-border-000000, #000) !important;
}
.auto-selected {
border-color: var(--bd-theme-border-198754, #198754) !important;
box-shadow: 0 0 0 2px var(--bd-theme-shadow-198754-40, #19875440);
transition: box-shadow 0.4s ease;
}
.fade-in {
opacity: 0;
animation: fadeInUp 0.8s ease forwards;
}
@keyframes fadeInUp {
from { opacity: 0; transform: translateY(6px); }
to { opacity: 1; transform: translateY(0); }
}
.ts-dropdown-portal {
position: fixed !important;
z-index: 20000 !important; /* above offcanvas */
}
.auto-selected {
border-color: var(--bd-theme-border-198754, #198754) !important;
box-shadow: 0 0 0 2px var(--bd-theme-shadow-198754-40, #19875440);
transition: box-shadow 0.4s ease;
}
.fade-in {
opacity: 0;
animation: fadeInUp 0.6s ease forwards;
}
@keyframes fadeInUp {
from { opacity: 0; transform: translateY(6px); }
to { opacity: 1; transform: translateY(0); }
}
.ts-dropdown-portal { position: fixed !important; z-index: 20000 !important; }
.auto-selected { border-color:var(--bd-theme-border-198754, #198754) !important; box-shadow:0 0 0 2px var(--bd-theme-shadow-198754-40, #19875440); transition: box-shadow .35s; }
.fade-in { opacity:0; animation: fadeInUp .6s ease forwards; }
@keyframes fadeInUp { from {opacity:0; transform:translateY(6px);} to {opacity:1; transform:translateY(0);} }
/* --- Discovery-style TomSelect dropdown portal --- */
.ts-dropdown-portal {
position: fixed !important;
z-index: 20000 !important;
border: 1px solid var(--bd-theme-border-111111, #111) !important;
border-radius: 4px !important;
background: var(--bd-theme-bg-ffffff, #fff) !important;
box-shadow: 2px 2px 6px var(--bd-theme-shadow-000000-26, rgba(0,0,0,0.15));
max-height: 260px !important;
overflow-y: auto !important;
overflow-x: hidden;
}
/* clean list look */
.ts-dropdown-portal .option {
padding: 4px 8px;
font-size: 0.8rem;
line-height: 1.3;
cursor: pointer;
background: var(--bd-theme-bg-ffffff, #fff);
border-bottom: 1px solid var(--bd-theme-border-eeeeee, #eee);
}
.ts-dropdown-portal .option:last-child {
border-bottom: none;
}
.ts-dropdown-portal .option:hover,
.ts-dropdown-portal .option.active {
background: var(--bd-theme-bg-f8f9fa, #f8f9fa) !important;
}
/* group headers */
.ts-dropdown-portal .optgroup-header {
font-weight: 600;
color: var(--bd-theme-fg-222222, #222);
background: var(--bd-theme-bg-f2f2f2, #f2f2f2);
border-bottom: 1px solid var(--bd-theme-border-dddddd, #ddd);
padding: 3px 8px;
font-size: 0.75rem;
}
/* fix internal badge layout */
.ts-dropdown-portal .bd-badge {
border-width: 1px;
font-size: 0.7rem;
padding: 1px 5px;
}
/* active chip inside input */
.ts-wrapper .ts-control {
background-color: var(--bd-theme-bg-ffffff, #fff);
border-color: var(--bd-theme-border-111111, #111);
min-height: 28px;
font-size: 0.8rem;
}
.ts-dropdown-portal {
box-sizing: border-box;
width: auto !important; /* let JS sizing win */
min-width: unset !important;
max-width: none !important;
}
.bd-chip-critical {
background-color: var(--bd-theme-bg-ffebeb, #ffebeb);
color: var(--bd-theme-fg-a10000, #a10000);
border: 1px solid var(--bd-theme-border-000000, #000);
}
.bd-chip-high {
background-color: var(--bd-theme-bg-fff4cc, #fff4cc);
color: var(--bd-theme-fg-7a4c00, #7a4c00);
border: 1px solid var(--bd-theme-border-000000, #000);
}
.bd-chip-normal {
background-color: var(--bd-theme-bg-f7f7f7, #f7f7f7);
color: var(--bd-theme-fg-333333, #333);
border: 1px solid var(--bd-theme-border-000000, #000);
}
.bd-chip-low {
background-color: var(--bd-theme-bg-f2f9f2, #f2f9f2);
color: var(--bd-theme-fg-205520, #205520);
border: 1px solid var(--bd-theme-border-000000, #000);
}
#bd-portal-root .ts-dropdown {
position: fixed !important;
z-index: 2147483647 !important; /* above offcanvas & backdrops */
pointer-events: auto !important;
}
.bd-legal-content h1, .bd-legal-content h2, .bd-legal-content h3 {
font-weight: 600;
margin-top: 1rem;
border-bottom: 1px solid var(--bd-theme-border-000000, #000);
padding-bottom: .2rem;
}
.bd-legal-content p { margin-bottom: .6rem; line-height: 1.5; }
.bd-legal-content ul { margin-left: 1.2rem; }
.bd-chip { display:inline-flex; align-items:center; gap:.25rem;
border:1px solid var(--bd-theme-border-000000, #000); border-radius:.4rem; padding:.1rem .4rem;
background:var(--bd-theme-bg-ffffff, #fff); font-size:.75rem; }
.bd-chip-muted { background:var(--bd-theme-bg-f8f9fa, #f8f9fa); border-color:var(--bd-theme-border-adb5bd, #adb5bd); color:var(--bd-theme-fg-495057, #495057); }
/* === PWA Navigation Toolbar (Final, Un-clippable) === */
/* === BuildDaily – PWA Fixed Stack (toolbar + topbar) === */
#pwa-stack {
position: fixed;
top: 0;
left: 0;
right: 0;
z-index: 9999;
display: flex;
flex-direction: column;
}
#pwa-stack[hidden] { display: none !important; }
/* Dark PWA toolbar */
#pwa-nav-toolbar {
height: 38px;
background: var(--bd-theme-bg-1e1e2f, #1e1e2f);
color: var(--bd-theme-fg-ffffff, #fff);
display: flex;
align-items: center;
gap: .5rem;
padding-left: 60px;
border-bottom: 1px solid var(--bd-theme-border-ffffff-26, rgba(255,255,255,0.15));
box-shadow: 0 2px 4px var(--bd-theme-shadow-000000-40, rgba(0,0,0,0.25));
}
#pwa-nav-toolbar .btn {
color: var(--bd-theme-fg-ffffff, #fff);
border-color: var(--bd-theme-border-ffffff-4c, rgba(255,255,255,0.3));
background: var(--bd-theme-bg-ffffff-0d, rgba(255,255,255,0.05));
font-size: .85rem;
padding: 3px 10px;
border-radius: 6px;
}
#pwa-nav-toolbar .btn:hover {
background: var(--bd-theme-bg-ffffff-26, rgba(255,255,255,0.15));
}
/* Ensure topbar inside stack is relative, not fixed */
#pwa-stack header#page-topbar {
position: relative !important;
top: 0 !important;
z-index: auto !important;
box-shadow: 0 1px 3px var(--bd-theme-shadow-000000-0d, rgba(0,0,0,.05));
}
/* Spacer that offsets total stack height */
#pwa-stack-spacer { height: 0; }
@supports (-webkit-touch-callout: none) {
#pwa-nav-toolbar {
padding-top: env(safe-area-inset-top);
height: calc(38px + env(safe-area-inset-top));
}
}
/* === FIX: Notification Icon Always Visible (Unread + Read) === */
#notif-toggle {
position: relative !important;
display: inline-flex !important;
align-items: center !important;
justify-content: center !important;
width: 40px !important;
height: 36px !important;
}
#notif-icon {
color: var(--bd-theme-fg-111111, #111) !important;
font-size: 1.1rem !important;
line-height: 1 !important;
opacity: 1 !important;
visibility: visible !important;
}
/* ensure badge visible when unread */
#notif-toggle.has-unread #notif-count {
display: inline-block !important;
opacity: 1 !important;
visibility: visible !important;
}
/* hide only when truly zero */
#notif-toggle:not(.has-unread) #notif-count {
display: none !important;
}
/* color change cue */
#notif-toggle.has-unread #notif-icon {
color: var(--bd-theme-fg-dc3545, #dc3545) !important;
}
/* === iOS Click Fix: Sidebar + Notifications === */
/* 1️⃣ Allow topbar & PWA layers to let taps through dropdowns */
#page-topbar,
#pwa-stack {
pointer-events: auto !important;
z-index: 1051 !important; /* below dropdowns/offcanvas */
}
/* 2️⃣ Elevate offcanvas + dropdowns above all */
.offcanvas,
.dropdown-menu {
z-index: 20000 !important;
}
/* 3️⃣ Ensure sidebar overlay sits above everything when active */
body.sidebar-enable .vertical-menu {
z-index: 19999 !important;
}
/* 4️⃣ Force dropdowns to be fully clickable on iOS */
.dropdown-menu.show:not(.bd-card-context-menu) {
transform: translate3d(0,0,0) !important; /* triggers GPU layer */
will-change: transform;
}
/* 5️⃣ Prevent Safari from eating clicks inside topbar buttons */
#vertical-menu-btn,
#notif-toggle,
#notif-icon {
cursor: pointer !important;
pointer-events: auto !important;
z-index: 20001 !important;
}
/* === Notification dropdown anchor fix (iOS/vertical layout) === */
@media (max-width: 991.98px) {
#notif-dropdown.dropdown-menu {
position: fixed !important; /* escape topbar positioning context */
top: 56px !important; /* just under the topbar */
right: 8px !important; /* align with icon edge */
left: auto !important;
transform: none !important;
width: calc(100vw - 16px) !important;
max-width: 360px !important;
z-index: 30000 !important;
}
}
@media (max-width: 991.98px) {
#notif-dropdown.show {
animation: notifSlideDown .15s ease-out;
}
@keyframes notifSlideDown {
from { opacity: 0; transform: translateY(-6px); }
to { opacity: 1; transform: translateY(0); }
}
}
/* === FORCE FIX: Logo collapse sync with sidebar === */
/* Default — large logo visible on desktop */
@media (min-width: 992px) {
#page-topbar .navbar-brand-box .logo-lg {
display: inline-block !important;
}
#page-topbar .navbar-brand-box .logo-sm {
display: none !important;
}
}
/* When collapsed — small logo only */
body.vertical-collapsed #page-topbar .navbar-brand-box .logo-lg {
display: none !important;
}
body.vertical-collapsed #page-topbar .navbar-brand-box .logo-sm {
display: inline-block !important;
}
/* Safety: also handle the .collapsed helper class set by JS */
#page-topbar .navbar-brand-box.collapsed .logo-lg {
display: none !important;
}
#page-topbar .navbar-brand-box.collapsed .logo-sm {
display: inline-block !important;
}
.pulse-gray .ping-dot { background:var(--bd-theme-bg-adb5bd, #adb5bd); } /* gray for clocked_out */
/* =============================================
BD25 Project List — Shared Styling
============================================= */
/* ---------------------------------------------
Universal project row card base
--------------------------------------------- */
.project-row {
background: var(--bd-theme-bg-ffffff, #fff);
transition: box-shadow .15s ease, background .15s ease;
border-left: none !important; /* left rail comes from accent */
}
.project-row:hover {
box-shadow: 0 3px 12px var(--bd-theme-shadow-000000-1f, rgba(0,0,0,.12));
}
/* Left accent rail - powered system-wide */
.bd-left-accent {
position: relative;
}
.bd-left-accent::before {
content:"";
position:absolute;
left:0; top:0; bottom:0;
width: var(--edge-size, 6px);
background: var(--edge-color, var(--bd-theme-bg-000000, #000));
border-radius: .5rem 0 0 .5rem;
pointer-events:none;
}
/* ---------------------------------------------
Metric tiles
--------------------------------------------- */
.project-row .metric-tile {
border: 1px solid var(--bd-theme-border-000000, #000);
border-radius: .55rem;
padding: .55rem .75rem;
background: var(--bd-theme-bg-ffffff, #fff);
min-height: 56px;
}
.metric-tile .metric-label {
font-size: .72rem;
color: var(--bd-theme-fg-555555, #555);
}
.metric-tile .metric-value {
font-size: 1.2rem;
font-weight: 600;
line-height: 1.1;
}
.metric-tile .metric-value-small {
font-size: .95rem;
font-weight: 600;
}
/* ---------------------------------------------
Expanded card container
--------------------------------------------- */
.bd-card-expand {
background: var(--bd-theme-bg-ffffff, #fff);
transition: box-shadow .25s ease;
}
.bd-card-expand:hover {
box-shadow: 0 4px 14px var(--bd-theme-shadow-000000-26, rgba(0,0,0,.15));
}
/* ---------------------------------------------
Chevron animations (expand / collapse)
--------------------------------------------- */
.expand-chevron {
transition: transform .25s ease;
}
.expand-chevron.rotate {
transform: rotate(180deg);
}
/* ---------------------------------------------
Expanded content slide-down animation
--------------------------------------------- */
.bd-expand-body {
animation: bdSlideDown .25s ease;
}
@keyframes bdSlideDown {
from {
opacity: 0;
transform: translateY(-6px);
}
to {
opacity: 1;
transform: translateY(0);
}
}
/* ---------------------------------------------
Tag styling
--------------------------------------------- */
.bd-tag-chip {
display:inline-flex;
align-items:center;
gap:.25rem;
padding:.15rem .50rem;
border-radius:.35rem;
border:1px solid var(--bd-theme-border-000000, #000);
font-size:.72rem;
background:var(--bd-theme-bg-ffffff, #fff);
}
/* ---------------------------------------------
Responsive tuning
--------------------------------------------- */
@media (max-width: 768px) {
.project-row {
padding-left: .75rem !important;
padding-right: .75rem !important;
}
.metric-tile {
min-height: auto;
}
}
.project-row.is-selected {
box-shadow: inset 0 0 0 2px var(--bd-theme-shadow-198754-d9, rgba(25,135,84,.85)) !important;
}
#proj-scroll-sentinel {
height: 1px;
}
/* ============================================================
DISCOVERY — CHIP (BAD)
Soft red, subtle border, rounded pill, compact height
============================================================ */
.bd-chip {
display: inline-flex;
align-items: center;
gap: 4px;
font-size: 12px;
font-weight: 600;
padding: 2px 8px;
border-radius: 999px;
line-height: 1;
border: 1px solid transparent;
white-space: nowrap;
}
/* BAD (red) */
.bd-chip-bad {
background-color: var(--bd-theme-bg-fbeaea, #fbeaea); /* soft red background */
border-color: var(--bd-theme-border-e5b1b1, #e5b1b1); /* soft red border */
color: var(--bd-theme-fg-b30000, #b30000); /* strong readable red text */
}
.bd-chip-bad i {
color: var(--bd-theme-fg-b30000, #b30000);
}
.bd-highlight {
background: var(--bd-theme-bg-fff3a0, #fff3a0);
padding: 1px 3px;
border-radius: 2px;
}
.bd-faded {
opacity: 0.35;
transition: opacity .25s ease-in-out;
}
.bd-division-toggle {
cursor: pointer;
user-select: none;
}
.bd-nav-active {
font-weight: 600;
text-decoration: underline;
}
.bd-flash {
background-color: var(--bd-theme-bg-ffefbf, #ffefbf);
transition: background-color .6s ease-out;
}
//* ============================================================
BD25 SMARTSHEET-STYLE SCHEDULE GRID — GEN-4 MASTER STYLESHEET
============================================================ */
/* ------------------------------------------------------------
LAYOUT WRAPPERS
------------------------------------------------------------ */
#bd-schedule-grid-wrapper {
border: 1px solid var(--bd-border);
border-radius: .5rem;
background: var(--bd-theme-bg-ffffff, #fff);
overflow: hidden;
position: relative;
}
#schedule-grid-scroll {
flex: 1 1 auto;
min-height: 0;
overflow: auto;
}
/* ------------------------------------------------------------
ROW & HEADER GRID STRUCTURE
------------------------------------------------------------ */
.schedule-header-row,
.schedule-row {
display: grid !important;
grid-template-columns:
32px /* manager */
40px /* rownum */
34px /* drag */
minmax(220px, 1.2fr) /* name */
minmax(110px, .7fr) /* status */
minmax(110px, .7fr) /* start */
minmax(110px, .7fr) /* end */
minmax(80px, .45fr) /* duration */
minmax(150px, .85fr) /* preds */
minmax(80px, .45fr) /* percent */
minmax(160px, .9fr) /* responsible */
minmax(160px, 1fr) /* notes */
minmax(110px, .7fr) /* baseline_start */
minmax(110px, .7fr) /* baseline_end */
60px; /* actions */
align-items: center;
min-height: 34px;
font-size: .85rem;
}
/* Identical padding ensures PERFECT column alignment */
.schedule-header-row .cell,
.schedule-row .cell {
padding: 3px 6px !important;
display: flex;
align-items: center;
gap: 4px;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
box-sizing: border-box !important;
}
.schedule-row .cell {
min-width: 0 !important;
overflow: hidden !important;
text-overflow: ellipsis !important;
}
.schedule-row .cell[contenteditable="true"] {
max-width: 100% !important;
min-width: 0 !important;
}
/* Header styling */
.schedule-header-row {
font-weight: 600;
background: var(--bd-theme-bg-f8f9fa, #f8f9fa);
border-bottom: 1px solid var(--bd-theme-border-d0d7de, #d0d7de);
}
.schedule-header-row .cell {
min-width: 0 !important;
overflow: hidden !important;
text-overflow: ellipsis !important;
white-space: nowrap !important;
cursor: default !important;
user-select: none !important;
}
/* ============================================================
FROZEN LEFT COLUMNS (Smartsheet-style)
First 3 columns: manager, rownum, drag
============================================================ */
.schedule-row > .cell:first-child,
.schedule-header-row > .cell:first-child {
position: sticky !important;
left: 0 !important;
z-index: 5 !important;
background: var(--bd-theme-bg-ffffff, #fff) !important;
}
.schedule-row > .cell:nth-child(2),
.schedule-header-row > .cell:nth-child(2) {
position: sticky !important;
left: 32px !important; /* width of col 1 */
z-index: 5 !important;
background: var(--bd-theme-bg-ffffff, #fff) !important;
}
.schedule-row > .cell:nth-child(3),
.schedule-header-row > .cell:nth-child(3) {
position: sticky !important;
left: 32px + 40px !important; /* col1 + col2 */
left: calc(32px + 40px) !important;
z-index: 5 !important;
background: var(--bd-theme-bg-ffffff, #fff) !important;
}
/* ------------------------------------------------------------
COLUMN WIDTH DEFAULTS (grid, not table)
------------------------------------------------------------ */
.col-name { min-width: 220px !important; }
.col-responsible { min-width: 160px !important; }
.col-status { min-width: 110px !important; }
.col-start { min-width: 110px !important; }
.col-end { min-width: 110px !important; }
.col-actions { min-width: 60px !important; justify-content: flex-end; }
.col-percent { min-width: 80px !important; text-align: right !important; justify-content: flex-end; }
.col-duration {
min-width: 40px !important;
max-width: 70px !important;
text-align: right;
}
.col-status,
.col-start,
.col-end,
.col-actions {
flex: 0 0 auto !important; /* freeze width */
white-space: nowrap !important;
}
.col-predecessors {
min-width: 150px !important;
max-width: 200px !important;
display: flex !important;
align-items: center !important;
/* Prevent children from blowing out the cell */
flex: 0 0 auto !important;
overflow: hidden !important;
text-overflow: ellipsis !important;
}
.col-predecessors .preds-display,
.col-predecessors .preds-edit {
flex: 1 1 auto !important;
min-width: 0 !important;
overflow: hidden !important;
text-overflow: ellipsis !important;
}
.col-baseline-start,
.col-baseline-end {
min-width: 110px !important;
max-width: 140px !important;
text-align: center;
overflow: hidden !important;
text-overflow: ellipsis !important;
}
.col-baseline-start,
.col-baseline-end {
flex: 0 0 auto !important; /* lock size */
white-space: nowrap !important;
}
.col-notes {
min-width: 160px !important;
flex: 0 1 260px !important; /* shrinks sooner, grows slower */
max-width: 1fr !important; /* cap upper bound inside grid */
overflow: hidden !important;
text-overflow: ellipsis !important;
white-space: nowrap !important; /* prevent row blowout */
}
.col-notes[contenteditable="true"],
.col-notes .cell[contenteditable="true"] {
min-width: 0 !important;
max-width: 100% !important; /* force clamp inside column */
overflow: hidden !important;
text-overflow: ellipsis !important;
}
/* Hide any column */
.col-hidden { display: none !important; }
/* ------------------------------------------------------------
ROW STATES
------------------------------------------------------------ */
.schedule-row:hover {
background: var(--bd-theme-bg-f6f8fa, #f6f8fa);
}
.schedule-row.selected {
background: var(--bd-theme-bg-fffbe6, #fffbe6) !important;
outline: 2px solid var(--bd-theme-border-000000, #000);
outline-offset: -2px;
}
/* ------------------------------------------------------------
WBS / INDENTATION
------------------------------------------------------------ */
.name-cell {
padding-left: calc(20px * var(--indent-level)) !important;
}
/* ------------------------------------------------------------
DRAG HANDLE
------------------------------------------------------------ */
.drag-handle {
cursor: grab;
opacity: .6;
}
.drag-handle:active { cursor: grabbing; }
/* ------------------------------------------------------------
CONTENTEDITABLE
------------------------------------------------------------ */
.cell[contenteditable="true"] {
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
.cell[contenteditable="true"]:focus {
background: var(--bd-theme-bg-f0f7ff, #f0f7ff);
outline: 2px solid var(--bd-info);
}
/* ------------------------------------------------------------
NOTES
------------------------------------------------------------ */
.notes-preview {
overflow: hidden;
text-overflow: ellipsis;
}
/* ------------------------------------------------------------
BASELINE CELLS
------------------------------------------------------------ */
.baseline-cell {
font-family: monospace;
font-size: .78rem;
text-align: center;
}
.baseline-locked {
background: var(--bd-theme-bg-f3f3f3, #f3f3f3) !important;
cursor: not-allowed !important;
color: var(--bd-theme-fg-999999, #999) !important;
}
/* ------------------------------------------------------------
PREDECESSORS
------------------------------------------------------------ */
.preds-cell { position: relative; overflow: visible; }
.preds-input {
width: 100%;
border: 1px solid var(--bd-theme-border-000000, #000);
padding: 2px 4px;
font-size: .82rem;
}
.preds-dropdown {
position: absolute;
top: 100%;
left: 0;
width: 260px;
background: var(--bd-theme-bg-ffffff, #fff);
border: 1px solid var(--bd-theme-border-111111, #111);
border-radius: 6px;
box-shadow: 0 4px 10px var(--bd-theme-shadow-000000-26, rgba(0,0,0,.15));
max-height: 260px;
overflow-y: auto;
z-index: 20000;
}
.preds-dropdown.hidden { display: none; }
.pred-opt {
padding: 4px 8px;
cursor: pointer;
white-space: nowrap;
}
.pred-opt:hover {
background: var(--bd-theme-bg-f0f0f0, #f0f0f0);
}
/* ------------------------------------------------------------
ADD ROW
------------------------------------------------------------ */
.add-task-row {
background: var(--bd-theme-bg-f8f9fa, #f8f9fa);
border-top: 1px solid var(--bd-border);
cursor: pointer;
}
.add-task-row:hover { background: var(--bd-theme-bg-eef0f2, #eef0f2); }
.add-task-btn {
font-weight: 600;
color: var(--bd-theme-fg-111111, #111);
}
/* ------------------------------------------------------------
CRITICAL PATH HIGHLIGHTS
------------------------------------------------------------ */
.critical-row {
background: var(--bd-theme-bg-fff4f4, #fff4f4) !important;
border-left: 4px solid var(--bd-theme-border-d7263d, #d7263d) !important;
}
.critical-bar .bar {
stroke: var(--bd-theme-stroke-d7263d, #d7263d) !important;
fill: var(--bd-theme-fill-d7263d, #d7263d) !important;
opacity: .9 !important;
}
/* ------------------------------------------------------------
GANTT BAR SYNC WITH GRID
------------------------------------------------------------ */
.gantt .grid-row,
.gantt .grid-row rect {
height: 34px !important;
}
.gantt .bar-wrapper { height: 34px !important; }
.gantt .bar {
height: 18px !important;
y: 8px !important;
}
.gantt .bar-label {
font-size: 12px !important;
line-height: 34px !important;
}
/* ------------------------------------------------------------
SPLIT PANE
------------------------------------------------------------ */
#schedule-split-container {
display:flex;
width:100%;
height:100%;
}
#schedule-left-pane {
flex:0 0 var(--schedule-left-width, 50%);
min-width:280px;
max-width:80%;
overflow:hidden;
border-right:1px solid var(--bd-border);
}
.bd-splitter {
width:6px;
cursor:col-resize;
background:var(--bd-theme-bg-e5e5e5, #e5e5e5);
}
.bd-splitter:hover { background:var(--bd-theme-bg-bbbbbb, #bbb); }
/* ------------------------------------------------------------
SCROLLBARS
------------------------------------------------------------ */
#schedule-grid-scroll::-webkit-scrollbar {
height:6px;
width:6px;
}
#schedule-grid-scroll::-webkit-scrollbar-thumb {
background:var(--bd-theme-bg-000000-40, rgba(0,0,0,.25));
border-radius:999px;
}
#schedule-context-menu {
position: fixed;
z-index: 99999;
width: 200px;
background: var(--bd-theme-bg-ffffff, #fff);
border: 1px solid var(--bd-theme-border-d0d7de, #d0d7de);
border-radius: 10px;
padding: 6px 0;
box-shadow: 0 6px 20px var(--bd-theme-shadow-000000-2e, rgba(0,0,0,0.18));
opacity: 0;
transform: translateY(-6px);
transition: opacity 90ms ease-out, transform 90ms ease-out;
}
#schedule-context-menu.ctx-anim {
opacity: 1;
transform: translateY(0);
}
#schedule-context-menu.hidden {
display: none !important;
}
#schedule-context-menu .ctx-item {
padding: 8px 14px;
display: flex;
align-items: center;
font-size: 0.85rem;
gap: 10px;
cursor: pointer;
color: var(--bd-theme-fg-1a1a1a, #1a1a1a);
user-select: none;
}
#schedule-context-menu .ctx-item:hover {
background: var(--bd-theme-bg-f5f7fa, #f5f7fa);
}
#schedule-context-menu .ctx-item i {
width: 16px;
text-align: center;
}
#schedule-context-menu .ctx-item.danger {
color: var(--bd-theme-fg-b30000, #b30000);
}
#schedule-context-menu .ctx-item.danger:hover {
background: var(--bd-theme-bg-ffeaea, #ffeaea);
}
#schedule-context-menu .ctx-separator {
height: 1px;
background: var(--bd-theme-bg-e5e5e5, #e5e5e5);
margin: 5px 0;
}
#gantt-context-menu {
position: fixed;
z-index: 99999;
width: 220px;
background: var(--bd-theme-bg-ffffff, #fff);
border: 1px solid var(--bd-theme-border-d0d7de, #d0d7de);
border-radius: 10px;
padding: 6px 0;
box-shadow: 0 6px 20px var(--bd-theme-shadow-000000-2e, rgba(0,0,0,.18));
opacity: 0;
transform: translateY(-6px);
transition: opacity 90ms ease-out, transform 90ms ease-out;
}
#gantt-context-menu.ctx-anim {
opacity: 1;
transform: translateY(0);
}
#gantt-context-menu.hidden {
display: none !important;
}
#gantt-context-menu .ctx-item {
padding: 8px 14px;
display: flex;
align-items: center;
font-size: 0.85rem;
gap: 10px;
cursor: pointer;
color: var(--bd-theme-fg-1a1a1a, #1a1a1a);
user-select: none;
}
#gantt-context-menu .ctx-item:hover {
background: var(--bd-theme-bg-f5f7fa, #f5f7fa);
}
#gantt-context-menu .ctx-item i {
width: 16px;
text-align: center;
}
#gantt-context-menu .ctx-item.danger {
color: var(--bd-theme-fg-b30000, #b30000);
}
#gantt-context-menu .ctx-item.danger:hover {
background: var(--bd-theme-bg-ffeaea, #ffeaea);
}
#gantt-context-menu .ctx-separator {
height: 1px;
background: var(--bd-theme-bg-e5e5e5, #e5e5e5);
margin: 5px 0;
}
/* Base item */
#schedule-context-menu .ctx-item,
#gantt-context-menu .ctx-item {
display: flex;
align-items: center;
gap: 10px;
padding: 8px 12px;
font-size: 0.85rem;
cursor: pointer;
border-left: 3px solid transparent;
transition: background 120ms ease;
}
/* Disabled rows */
.ctx-disabled {
opacity: 0.65;
}
.ctx-disabled:hover {
background: var(--bd-theme-bg-f5f7fa, #f5f7fa);
}
/* Enabled rows (H1 hybrid style) */
.ctx-enabled {
background: var(--bd-theme-bg-eef4ff, #eef4ff);
border-left-color: var(--bd-theme-border-1f6fe5, #1f6fe5);
opacity: 1;
}
.ctx-enabled:hover {
background: var(--bd-theme-bg-eef4ff, #eef4ff); /* no hover change, per Option 3 */
}
/* Separator */
.ctx-separator {
margin: 4px 0;
border-top: 1px solid var(--bd-theme-border-e0e0e0, #e0e0e0);
}
/* Base context-menu item */
.ctx-item {
display: flex;
align-items: center;
gap: 10px;
padding: 8px 12px;
cursor: pointer;
border-left: 3px solid transparent;
transition: background 120ms ease, opacity 120ms ease;
font-size: 0.85rem;
}
/* Enabled rows */
.ctx-enabled {
background: var(--bd-theme-bg-eef4ff, #eef4ff);
border-left-color: var(--bd-theme-border-1f6fe5, #1f6fe5);
}
/* Disabled rows */
.ctx-disabled {
opacity: 0.65;
}
/* Hover affects only disabled */
.ctx-disabled:hover {
background: var(--bd-theme-bg-f5f7fa, #f5f7fa);
}
/* Separator */
.ctx-separator {
border-top: 1px solid var(--bd-theme-border-e1e1e1, #e1e1e1);
margin: 6px 0;
}
/* Fix predecessor dropdown layout */
.preds-dropdown {
position: absolute !important;
top: 100% !important;
left: 0 !important;
width: 260px !important; /* proper width */
max-height: 240px !important;
overflow-y: auto !important;
background: var(--bd-theme-bg-ffffff, #fff) !important;
border: 1px solid var(--bd-theme-border-111111, #111) !important;
border-radius: 6px !important;
box-shadow: 0 6px 16px var(--bd-theme-shadow-000000-2e, rgba(0,0,0,0.18)) !important;
z-index: 20000 !important;
display: none !important;
}
.preds-cell {
position: relative !important;
overflow: visible !important;
}
.schedule-row {
overflow: visible !important;
}
#bd-calendar-popup {
position: fixed !important;
background: var(--bd-theme-bg-ffffff, #fff) !important;
border: 1px solid var(--bd-theme-border-000000, #000) !important;
border-radius: 6px !important;
box-shadow: 0 6px 16px var(--bd-theme-shadow-000000-2e, rgba(0,0,0,.18)) !important;
padding: 8px !important;
z-index: 30000 !important;
width: 220px !important;
}
#bd-calendar-popup .calendar-grid {
display: grid !important;
grid-template-columns: repeat(7, 1fr) !important;
gap: 4px !important;
}
#bd-calendar-popup .cal-day {
text-align: center;
padding: 4px;
cursor: pointer;
border-radius: 4px;
}
#bd-calendar-popup .cal-day:hover {
background: var(--bd-theme-bg-f0f0f0, #f0f0f0);
}
#bd-calendar-popup .cal-day.selected {
background: var(--bd-theme-bg-1f6fe5, #1f6fe5) !important;
color: var(--bd-theme-fg-ffffff, #fff) !important;
}
/* Restore Frappe bar geometry while staying aligned with 34px rows */
.gantt .bar-wrapper {
height: 34px !important;
}
.gantt .bar {
height: 20px !important; /* standard Frappe height */
rx: 3px !important;
ry: 3px !important;
y: 7px !important; /* perfectly centered inside 34px */
}
.gantt .bar-label {
font-size: 12px !important;
line-height: 34px !important;
color: var(--bd-theme-fg-222222, #222) !important;
}
.gantt .arrow {
stroke-width: 1.4px !important;
stroke: var(--bd-theme-stroke-444444, #444) !important;
}
.dep-handle {
transition: r .12s ease;
}
.dep-handle:hover {
r: 7;
}
.dep-drag-line {
pointer-events: none;
}
.milestone-diamond {
fill: var(--bd-theme-fill-111111, #111);
stroke: var(--bd-theme-stroke-000000, #000);
stroke-width: 1;
}
.critical-bar + .milestone-diamond {
fill: var(--bd-theme-fill-b3261e, #b3261e);
}
#schedule-grid-wrap {
min-width: 250px;
}
#schedule-gantt-wrap {
flex: 1 1 auto;
min-width: 400px; /* prevent collapse */
}
/* Summary (rollup) bars */
.gantt .bar.summary,
.bar.summary {
fill: none !important;
stroke: var(--bd-theme-stroke-111111, #111) !important;
stroke-width: 2 !important;
}
#schedule-gantt-wrap {
overflow: hidden !important;
display: block !important;
position: relative !important;
min-height: 300px;
}
#schedule-gantt-wrap .gantt-container {
width: 100% !important; /* container stays fixed */
overflow-x: auto !important; /* content scrolls */
overflow-y: hidden !important;
max-width: 100% !important;
position: relative;
display: block;
}
.gantt {
overflow: visible !important;
}
#schedule-gantt-wrap {
overflow: hidden !important;
}
#schedule-gantt-wrap .gantt-container {
overflow-x: auto !important;
overflow-y: hidden !important;
height: 100%;
position: relative;
}
.schedule-row > .cell:first-child,
.schedule-header-row > .cell:first-child,
.schedule-row > .cell:nth-child(2),
.schedule-header-row > .cell:nth-child(2),
.schedule-row > .cell:nth-child(3),
.schedule-header-row > .cell:nth-child(3) {
box-shadow: 2px 0 0 var(--bd-theme-shadow-000000-14, rgba(0,0,0,0.08)); /* subtle boundary like Smartsheet */
}
.schedule-row,
.schedule-header-row {
position: relative !important;
z-index: 1;
}
.markdown-body ul {
padding-left: 1.25rem;
margin-bottom: 0.75rem;
}
.markdown-body li {
margin-bottom: 0.25rem;
}
.markdown-body strong {
font-weight: 600;
}
.friday-chat-text {
max-width: 100%;
overflow-wrap: break-word;
word-wrap: break-word;
word-break: break-word;
white-space: normal;
}
.friday-chat-text ul,
.friday-chat-text ol {
padding-left: 1.25rem;
margin-bottom: 0.75rem;
}
.friday-chat-text li {
margin-bottom: 0.25rem;
}
.friday-chat-text pre {
max-width: 100%;
overflow-x: auto;
white-space: pre-wrap;
word-break: break-word;
}
/* Icon-in-input (replaces Bootstrap input-group addons) */
.bd-input-wrap {
position: relative;
}
.bd-input-wrap .bd-input-icon {
position: absolute;
top: 50%;
transform: translateY(-50%);
opacity: .55;
pointer-events: none;
display: inline-flex;
align-items: center;
justify-content: center;
width: 1.75rem;
height: 1.75rem;
}
/* right by default */
.bd-input-wrap[data-icon-pos="right"] .bd-input-icon { right: .4rem; }
.bd-input-wrap[data-icon-pos="left"] .bd-input-icon { left: .4rem; }
.bd-input-wrap .bd-input-icon i {
font-size: .95rem; /* consistent, not bolted-on */
line-height: 1;
}
/* Inline error (optional) */
.bd-field-inline-error {
margin-top: .25rem;
font-size: .825rem;
color: var(--bd-theme-fg-b02a37, #b02a37); /* bootstrap-ish danger, but you can map to your theme */
}
/* Invalid state styling hook */
.bd-input-wrap.bd-invalid input,
input.bd-invalid {
border-color: var(--bd-theme-border-dc3545, #dc3545) !important;
box-shadow: 0 0 0 .15rem var(--bd-theme-shadow-dc3545-26, rgba(220,53,69,.15)) !important;
}
.bd-input-wrap { position: relative; width: 100%; }
.bd-input-wrap > input { width: 100%; }
.bd-input-wrap.has-icon .bd-input-icon{
position:absolute; top:50%; transform:translateY(-50%);
pointer-events:none; opacity:.45;
display:inline-flex; align-items:center; justify-content:center;
line-height:1;
}
.bd-input-wrap.has-icon .bd-input-icon i{ font-size:.9rem; }
.bd-input-wrap.icon-right .bd-input-icon{ right:.65rem; }
.bd-input-wrap.icon-left .bd-input-icon{ left:.65rem; }
.bd-input-wrap.icon-right > input{ padding-right:2.1rem; }
.bd-input-wrap.icon-left > input{ padding-left:2.1rem; }
.bd-input-wrap:focus-within .bd-input-icon{ opacity:.7; }
.bd-input-wrap.bd-invalid > input{
border-color:var(--bd-theme-border-dc3545, #dc3545) !important;
box-shadow:0 0 0 .15rem var(--bd-theme-shadow-dc3545-26, rgba(220,53,69,.15)) !important;
}
.bd-field-inline-error{
color:var(--bd-theme-fg-dc3545, #dc3545);
font-size:.85rem;
margin-top:.25rem;
}
.bd-table-scroll {
overflow-y: auto;
overscroll-behavior: contain auto;
}
/* ===== PWA button acknowledge animations ===== */
.pwa-btn.pwa-ack {
animation: pwaBtnAck .18s ease-out;
}
@keyframes pwaBtnAck {
0% { transform: translateY(0) scale(1); }
40% { transform: translateY(0.5px) scale(0.96); }
100% { transform: translateY(0) scale(1); }
}
.pwa-btn.pwa-glow {
box-shadow: 0 0 0 3px var(--bd-theme-shadow-ffffff-1a, rgba(255,255,255,.10)), 0 0 14px var(--bd-theme-shadow-ffffff-1f, rgba(255,255,255,.12));
}
/* ===== Refresh/loading state (spinner circle, no icon rotation) ===== */
/* ===== Navigation/loading state (spinner circle) ===== */
.pwa-btn.is-loading {
opacity: .85;
}
/* default: loader hidden */
.pwa-btn .pwa-loader { display: none; }
/* loading: hide icon, show spinner circle */
.pwa-btn.is-loading i { display: none !important; }
.pwa-btn.is-loading .pwa-loader { display: inline-block; }
.pwa-btn .pwa-loader {
width: 14px;
height: 14px;
border-radius: 999px;
border: 2px solid var(--bd-theme-border-ffffff-59, rgba(255,255,255,.35));
border-top-color: var(--bd-theme-border-ffffff, #fff);
animation: pwaLoaderSpin .75s linear infinite;
/* keep it visually centered like the icon */
vertical-align: middle;
}
@keyframes pwaLoaderSpin {
from { transform: rotate(0deg); }
to { transform: rotate(360deg); }
}
/* PWA nav banner */
#pwa-nav-banner { display:none; }
#pwa-nav-banner.is-show { display:inline-flex; }
.pwa-progress {
position: relative;
width: 90px;
height: 4px;
border-radius: 999px;
background: var(--bd-theme-bg-ffffff-24, rgba(255,255,255,.14));
overflow: hidden;
margin-left: 6px;
}
.pwa-progress > span {
position:absolute; left:0; top:0; bottom:0;
width: 35%;
background: var(--bd-theme-bg-ffffff-b8, rgba(255,255,255,.72));
border-radius: 999px;
animation: pwaIndet 1.0s ease-in-out infinite;
}
@keyframes pwaIndet {
0% { transform: translateX(-110%); }
100% { transform: translateX(300%); }
}
/* =========================================================
BD25 — Desktop PWA Chrome Alignment
Ensure fixed Nazox topbar + sidebar account for:
- PWA stack height (--bd-pwa-top)
- Rendered topbar/logo height (--bd-topbar-h)
========================================================= */
body.pwa-mode header#page-topbar{
top: var(--bd-pwa-top, 0px) !important;
}
body.pwa-mode .vertical-menu:not(.bd-sidebar-shell),
body.bd-native-shell .vertical-menu:not(.bd-sidebar-shell){
top: var(--bd-sidebar-top, calc(var(--bd-pwa-top, 0px) + var(--bd-topbar-h, 70px))) !important;
bottom: 0 !important;
height: auto !important;
}
/* =========================================================
BD25 — MOBILE CHROME OVERRIDES (small screens only)
Gate: body.bd-mobile-chrome is set by base.html controller.
Goal:
- Desktop/iPad unchanged
- Phone: remove desktop chrome (topbar + sidebar), use PWA bar + mobile dock
- Content starts immediately, with only the PWA stack spacer
========================================================= */
:root{
--bd-mobile-dock-h: 64px; /* conservative; dock itself has safe-area padding too */
}
/* 1) Kill desktop chrome on phone */
body.bd-mobile-chrome header#page-topbar{
display: none !important;
}
body.bd-mobile-chrome .vertical-menu{
display: none !important;
}
/* 2) Remove left gutter created by sidebar layout */
body.bd-mobile-chrome #layout-wrapper{
margin-left: 0 !important;
padding-left: 0 !important;
}
body.bd-mobile-chrome .main-content{
margin-left: 0 !important;
}
/* 3) Let the PWA stack spacer be the ONLY top offset */
body.bd-mobile-chrome{
padding-top: 0 !important; /* overrides any body.pwa-mode padding-top hacks */
}
/* If any old PWA rules try to fix topbar under toolbar, neutralize them on mobile */
body.bd-mobile-chrome header#page-topbar{
position: static !important;
top: auto !important;
left: auto !important;
right: auto !important;
}
/* 4) Remove extra “chrome tax” spacing under the stack */
body.bd-mobile-chrome .page-content,
body.bd-mobile-chrome #main-content,
body.bd-mobile-chrome .main-content{
margin-top: 0 !important;
padding-top: 0 !important;
}
/* 5) Reserve room for the bottom dock so tables/lists don’t get covered */
body.bd-mobile-chrome .page-content{
padding-bottom: calc(var(--bd-mobile-dock-h) + env(safe-area-inset-bottom)) !important;
}
/* 6) Container padding: keep it tight and intentional on phone */
body.bd-mobile-chrome .container-fluid{
padding-left: 12px !important;
padding-right: 12px !important;
}
/* 7) Ensure the PWA stack stays the top-most chrome */
body.bd-mobile-chrome #pwa-stack{
z-index: 9999 !important;
}
/* 8) When mobile menu sheet is open, prevent background scroll (matches existing bd-modal-open) */
body.bd-mobile-chrome.bd-modal-open{
overflow: hidden !important;
}
/* 9) Fix any accidental “sidebar-enable” overlays on phone */
body.bd-mobile-chrome.sidebar-enable .vertical-menu{
display: none !important;
}
/* 10) Optional: make mobile dock always win on z-index over cards/toasts */
body.bd-mobile-chrome #bd-mobile-dock{
z-index: 1400 !important;
}
/* 11) Don’t let Bootstrap/Nazox add random background blocks */
/* Keep content area neutral, but match the outer "island" to the PWA shell */
body.bd-mobile-chrome .page-content,
body.bd-mobile-chrome .container-fluid{
background: transparent !important;
}
body.bd-mobile-chrome #layout-wrapper,
body.bd-mobile-chrome .main-content{
background: transparent !important;
}
/* ===== Mobile width reclaim (PWA/mobile chrome) ===== */
body.bd-mobile-chrome .page-content{
padding-left: 0 !important;
padding-right: 0 !important;
}
body.bd-mobile-chrome .container-fluid{
padding-left: 8px !important; /* was likely 12–24 */
padding-right: 8px !important;
}
/* if you still feel it’s tight, drop to 6px */
@media (max-width: 420px){
body.bd-mobile-chrome .container-fluid{
padding-left: 6px !important;
padding-right: 6px !important;
}
}
/* if you still feel it’s tight, drop to 6px */
@media (max-width: 420px){
body.bd-mobile-chrome .container-fluid{
padding-left: 6px !important;
padding-right: 6px !important;
}
}/* ============================================================
BD25 Estimates List Row — iPhone-friendly responsive stack
(UPDATED: mobile actions stay compact inline + expand kept)
============================================================ */
.bd-est-row .bd-est-grid{
display: grid;
grid-template-columns: auto 1fr auto auto auto; /* rail | owner | status | user | actions */
gap: .5rem .75rem;
align-items: center;
}
/* Keep columns from forcing overflow */
.bd-est-owner,
.bd-est-status,
.bd-est-user{
min-width: 0; /* enables text-truncate to actually truncate */
}
/* Make “small” blocks look consistent */
.bd-est-status,
.bd-est-user{
font-size: .85rem;
line-height: 1.15;
}
/* Action cluster: tight on desktop */
.bd-est-actions{
display: flex;
align-items: center;
justify-content: flex-end;
gap: .35rem;
flex-wrap: wrap;
}
/* Hide any optional action text labels (icons only) */
.bd-est-act-label{ display:none; }
/* Slightly reduce micro pipeline width on dense lists */
.bd-est-row .bd-micro-pipeline{ width:110px; }
/* -------------------------
Mobile: stack (but keep actions compact inline)
------------------------- */
@media (max-width: 768px){
.bd-est-row .bd-est-grid{
grid-template-columns: 1fr; /* single column stack */
align-items: stretch;
gap: .45rem;
}
/* Row 1: rail becomes header-ish */
.bd-est-rail{
display:flex;
align-items:center;
gap:.5rem;
}
/* Owner: allow 2 lines for title on phone */
.bd-est-owner .fw-medium{
white-space: normal !important;
overflow: hidden;
display: -webkit-box;
-webkit-line-clamp: 2;
-webkit-box-orient: vertical;
}
/* Optional: hide description on phone for density */
.bd-est-desc{ display:none; }
/* Status becomes a compact row */
.bd-est-status{
display:flex;
flex-wrap: wrap;
align-items:center;
gap:.35rem .5rem;
}
.bd-est-status .bd-micro-pipeline{ width: 100px; }
.bd-est-stage{ font-size: .75rem !important; }
/* User/Due becomes left-aligned (no tiny right column) */
.bd-est-user{
text-align: left !important;
align-items: flex-start !important;
}
/* Actions: compact inline row (NOT big thumb grid) */
.bd-est-actions{
display:flex;
align-items:center;
justify-content:flex-start;
gap:.35rem;
flex-wrap: wrap; /* wraps naturally on small widths */
}
/* Ensure we don't accidentally promote buttons to full width */
.bd-est-actions .btn{
width: auto !important;
padding: inherit !important; /* let Bootstrap btn-sm sizing win */
font-size: inherit !important;
}
/* Thread badge shouldn't force a full-width row */
.bd-est-thread{
width: auto;
}
/* Keep expand visible on mobile */
.bd-est-chevron{
display: inline-flex !important;
}
}
/* Extra-small: no special action sizing needed anymore */
@media (max-width: 420px){
/* Intentionally blank: keep compact wrap behavior */
}
/* ============================================================
BD25 Projects Row — iPhone-friendly responsive stack
(compact actions row, no giant buttons)
============================================================ */
.project-row .bd-proj-grid{
display: grid;
grid-template-columns: auto 1.6fr auto 1.2fr auto auto; /* rail | main | status | team | updated | actions */
gap: .5rem .75rem;
align-items: center;
}
/* Allow truncation to work inside grid */
.project-row .bd-proj-main,
.project-row .bd-proj-team{
min-width: 0;
}
/* Actions: compact, right-aligned on desktop */
.project-row .bd-proj-actions{
display: flex;
align-items: center;
justify-content: flex-end;
gap: .35rem;
flex-wrap: wrap;
}
/* If you kept the "sticky-right" helper, keep it sane */
.project-row .bd-actions-cell{
min-width: 220px;
padding-right: .35rem;
background: var(--bd-theme-bg-ffffff, #fff);
border-top-right-radius: .5rem;
}
/* -------------------------
Mobile: stack cleanly
------------------------- */
@media (max-width: 768px){
.project-row .bd-proj-grid{
grid-template-columns: 1fr; /* stack */
gap: .45rem;
align-items: stretch;
}
/* Keep rail tidy */
.project-row .bd-proj-rail{
display: flex;
align-items: center;
gap: .5rem;
}
/* Title: allow 2 lines on phone */
.project-row .bd-proj-main .fw-semibold{
white-space: normal !important;
overflow: hidden;
display: -webkit-box;
-webkit-line-clamp: 2;
-webkit-box-orient: vertical;
}
/* Status chips: wrap naturally */
.project-row .bd-proj-status{
flex-wrap: wrap;
gap: .35rem .45rem !important;
}
/* Updated: keep readable and left aligned */
.project-row .bd-proj-updated{
text-align: left;
}
/* Actions: compact inline row, wrap as needed (no full-width) */
.project-row .bd-proj-actions{
justify-content: flex-start;
white-space: normal; /* allow wrap */
}
/* Undo any sticky-right sizing on mobile */
.project-row .bd-actions-cell{
min-width: 0;
padding-right: 0;
background: transparent;
border-top-right-radius: 0;
}
}
/* ============================================================
Projects cockpit: prevent analytics overflow on mobile
============================================================ */
/* Make sure panels clip children */
.bd-proj-cockpit,
.bd-proj-cockpit .bd-proj-panel{
overflow: hidden;
}
/* Let grid children actually shrink (critical in CSS grid/flex) */
.bd-proj-cockpit .bd-proj-stat,
.bd-proj-cockpit .bd-proj-stat .k,
.bd-proj-cockpit .bd-proj-stat .v{
min-width: 0;
}
/* Value side: never exceed panel width, clip gracefully */
.bd-proj-cockpit .bd-proj-stat .v{
max-width: 100%;
overflow: hidden;
}
/* Chips: allow clipping instead of forcing overflow */
.bd-proj-cockpit .bd-mini{
max-width: 100%;
overflow: hidden;
text-overflow: ellipsis;
}
/* Sparkline: responsive shrink + clip */
.bd-proj-cockpit .bd-spark{
width: 140px;
max-width: 100%;
flex: 0 1 140px; /* allow shrink */
overflow: hidden;
}
/* If the value side contains an SVG + chips, let it wrap on phones */
@media (max-width: 768px){
.bd-proj-cockpit .bd-proj-stat{
align-items: flex-start;
}
.bd-proj-cockpit .bd-proj-stat .v{
flex-wrap: wrap;
white-space: normal; /* overrides earlier nowrap */
gap: .35rem .35rem;
}
/* Make the sparkline less greedy on very small widths */
.bd-proj-cockpit .bd-spark{
width: 110px;
flex-basis: 110px;
}
}
/* ============================================================
MOBILE: breathing room BELOW PWA strip (content-owned)
============================================================ */
@media (max-width: 575.98px){
body.bd-mobile-chrome #main-content.page-content{
padding-top: var(--bd-content-top-pad, 8px) !important; /* <-- breathing room (shared knob) */
}
}
/* ============================================================
PWA: prevent collapsed sidebar/logo clipping under PWA bar
============================================================ */
body.bd-mobile-chrome #layout-wrapper,
body.pwa-mode #layout-wrapper{
padding-top: 0 !important;
}
body.bd-mobile-chrome #page-topbar,
body.pwa-mode #page-topbar{
top: var(--bd-pwa-top, 0px) !important;
}
body.bd-mobile-chrome .vertical-menu,
body.pwa-mode .vertical-menu{
top: var(--bd-sidebar-top, 0px) !important;
height: calc(var(--bd-vh, 100vh) - var(--bd-sidebar-top, 0px)) !important;
}
/* ============================================================
Sidebar must not scroll away when collapsed (browser + PWA)
============================================================ */
/* Ensure the left sidebar is fixed and independently scrollable */
.vertical-menu{
position: fixed !important;
left: 0;
bottom: 0;
overflow-y: auto;
-webkit-overflow-scrolling: touch;
}
/* When Nazox collapses, keep it fixed too */
body.vertical-collapsed .vertical-menu{
position: fixed !important;
}
/* Make main content start to the right of sidebar as usual (Nazox handles width),
but ensure it doesn't drag the sidebar */
#layout-wrapper .main-content{
position: relative;
}
/* ============================================================
iOS Safari / iPhone PWA: Prevent focus zoom on inputs
iOS auto-zooms when focused inputs are < 16px.
Scope tightly to BD mobile chrome + chat/friday surfaces.
============================================================ */
@media (max-width: 767px) {
body.bd-mobile-chrome #bd-chat-panel textarea,
body.bd-mobile-chrome #bd-chat-panel input,
body.bd-mobile-chrome #friday-chat-panel textarea,
body.bd-mobile-chrome #friday-chat-panel input,
body.bd-mobile-chrome #bd-mobile-menu-flyout input,
body.bd-mobile-chrome #bd-mobile-menu-flyout textarea {
font-size: 16px !important;
-webkit-text-size-adjust: 100%;
}
/* Explicitly target known offenders */
body.bd-mobile-chrome #bd-chat-people-search,
body.bd-mobile-chrome .bd-input,
body.bd-mobile-chrome .bd-input-sm,
body.bd-mobile-chrome .form-control-sm,
body.bd-mobile-chrome .form-select-sm {
font-size: 16px !important;
-webkit-text-size-adjust: 100%;
}
}
/* ============================================================
iOS Safari / iPhone PWA: Prevent focus zoom on inputs
iOS auto-zooms when focused inputs are < 16px.
Scope tightly to BD mobile chrome + chat/friday surfaces.
============================================================ */
@media (max-width: 767px) {
body.bd-mobile-chrome #bd-chat-panel textarea,
body.bd-mobile-chrome #bd-chat-panel input,
body.bd-mobile-chrome #friday-chat-panel textarea,
body.bd-mobile-chrome #friday-chat-panel input,
body.bd-mobile-chrome #bd-mobile-menu-flyout input,
body.bd-mobile-chrome #bd-mobile-menu-flyout textarea {
font-size: 16px !important;
-webkit-text-size-adjust: 100%;
}
/* Explicitly target known offenders */
body.bd-mobile-chrome #bd-chat-people-search,
body.bd-mobile-chrome .bd-input,
body.bd-mobile-chrome .bd-input-sm,
body.bd-mobile-chrome .form-control-sm,
body.bd-mobile-chrome .form-select-sm {
font-size: 16px !important;
-webkit-text-size-adjust: 100%;
}
}
/* Mobile/PWA: ensure chat panel clears iOS chrome + your context strip */
@media (max-width: 767.98px){
.bd-chat-panel{
top: var(--bd-chat-safe-top, 12px) !important;
height: calc(100dvh - var(--bd-chat-safe-top, 12px) - env(safe-area-inset-bottom, 0px)) !important;
}
}
.bd-chat-start-h{
font-size: 12px;
letter-spacing: .08em;
color: var(--bd-theme-fg-000000-8c, rgba(0,0,0,.55));
margin: 10px 0 6px;
}
.bd-chat-unread-badge{
display: inline-flex;
align-items: center;
justify-content: center;
min-width: 22px;
height: 18px;
padding: 0 6px;
border-radius: 999px;
font-size: 12px;
background: var(--bd-theme-bg-000000-14, rgba(0,0,0,.08));
color: var(--bd-theme-fg-000000-bf, rgba(0,0,0,.75));
font-weight: 600;
}
.bd-kpi-row{display:flex;gap:.6rem;align-items:center}
.bd-kpi-rail{width:4px;align-self:stretch;border-radius:3px;opacity:.9}
.bd-rail-good{background:var(--bd-theme-bg-198754-cc, rgba(25,135,84,.8))}
.bd-rail-info{background:var(--bd-theme-bg-0d6efd-bf, rgba(13,110,253,.75))}
.bd-rail-warn{background:var(--bd-theme-bg-ffc107-d9, rgba(255,193,7,.85))}
.bd-rail-bad{background:var(--bd-theme-bg-dc3545-d9, rgba(220,53,69,.85))}
.bd-track{height:7px;border:1px solid var(--bd-theme-border-000000, #000);border-radius:999px;background:var(--bd-theme-bg-ffffff, #fff);overflow:hidden}
.bd-fill{height:100%}
.bd-fill-good{background:var(--bd-theme-bg-198754-59, rgba(25,135,84,.35))}
.bd-fill-info{background:var(--bd-theme-bg-0d6efd-47, rgba(13,110,253,.28))}
.bd-fill-warn{background:var(--bd-theme-bg-ffc107-73, rgba(255,193,7,.45))}
.bd-fill-bad{background:var(--bd-theme-bg-dc3545-47, rgba(220,53,69,.28))}
.bd-spark{width:100%;height:24px;opacity:.6}
.bd-heat{flex:1;height:18px;border:1px solid var(--bd-theme-border-000000, #000);border-radius:6px;background:var(--bd-theme-bg-0d6efd-99, rgba(13,110,253,.6))}
.bd-dot{width:8px;height:8px;border-radius:50%;display:inline-block;border:1px solid var(--bd-theme-border-000000, #000)}
.bd-dot-good{background:var(--bd-theme-bg-198754-99, rgba(25,135,84,.6))}
.bd-dot-warn{background:var(--bd-theme-bg-ffc107-d9, rgba(255,193,7,.85))}
.bd-dot-bad{background:var(--bd-theme-bg-dc3545-b2, rgba(220,53,69,.7))}
.bd-dot-info{background:var(--bd-theme-bg-0d6efd-99, rgba(13,110,253,.6))}
/* =========================
PWA Search (mobile mount)
- Style ONLY the bar
- Do NOT restyle results
========================= */
#pwa-search-mount{
background: var(--bd-theme-bg-0f172a, #0f172a);
border-bottom: 1px solid var(--bd-theme-border-ffffff-1a, rgba(255,255,255,.10));
padding: 8px 10px;
}
/* The pill shell */
#pwa-search-mount .bd-pwa-search-shell{
position: relative;
display: flex;
align-items: center;
gap: 10px;
background: var(--bd-theme-bg-121b31, #121b31);
border: 1px solid var(--bd-theme-border-1a2542, #1a2542);
border-radius: 14px;
padding: 10px 12px;
}
/* Left icon */
#pwa-search-mount .bd-pwa-search-ico{
color: var(--bd-theme-fg-ffffff-c7, rgba(255,255,255,.78));
font-size: 14px;
flex: 0 0 auto;
}
/* Kill desktop wrapper visuals while mounted */
#pwa-search-mount .bd-pwa-search-mode{
width: 100% !important;
background: transparent !important;
border: 0 !important;
box-shadow: none !important;
padding: 0 !important;
margin: 0 !important;
}
#pwa-search-mount .bd-pwa-search-mode .bd-input-icon,
#pwa-search-mount .bd-pwa-search-mode .search-wrapper{
width: 100% !important;
background: transparent !important;
border: 0 !important;
box-shadow: none !important;
padding: 0 !important;
margin: 0 !important;
}
/* Input: true PWA look */
#pwa-search-mount input#global-search{
width: 100% !important;
background: transparent !important;
border: 0 !important;
outline: none !important;
box-shadow: none !important;
color: var(--bd-theme-fg-ffffff-f2, rgba(255,255,255,.95)) !important;
font-size: 0.95rem !important;
line-height: 1.2 !important;
padding: 0 !important;
margin: 0 !important;
/* IMPORTANT: remove desktop padding classes effect */
padding-left: 0 !important;
padding-right: 0 !important;
}
#pwa-search-mount input#global-search::placeholder{
color: var(--bd-theme-fg-ffffff-8c, rgba(255,255,255,.55)) !important;
}
/* Hide the desktop clear button + indicator + desktop icon */
#pwa-search-mount #search-clear,
#pwa-search-mount #search-loading,
#pwa-search-mount .bd-input-icon .bd-icon{
display: none !important;
}
/* Right-side clear (our button) */
#pwa-search-mount .bd-pwa-search-clear{
width: 30px;
height: 28px;
border-radius: 10px;
border: 1px solid var(--bd-theme-border-ffffff-24, rgba(255,255,255,.14));
background: var(--bd-theme-bg-ffffff-0f, rgba(255,255,255,.06));
color: var(--bd-theme-fg-ffffff-d9, rgba(255,255,255,.85));
display: inline-flex;
align-items: center;
justify-content: center;
}
#pwa-search-mount .bd-pwa-search-clear:hover{
background: var(--bd-theme-bg-ffffff-1a, rgba(255,255,255,.10));
}
/* Results dropdown:
- ONLY position it under the bar
- DO NOT style its contents (leave desktop styling alone)
*/
#pwa-search-mount #quick-search-results{
position: absolute !important;
left: 0 !important;
right: 0 !important;
top: calc(100% + 8px) !important;
z-index: 4000 !important;
background: var(--bd-theme-surface, #fff) !important;
color: var(--bd-theme-text, #344054);
border: 1px solid var(--bd-theme-border, #d0d5dd) !important;
border-radius: 10px !important;
box-shadow: 0 8px 24px var(--bd-theme-shadow-000000-2e, rgba(0,0,0,.18)) !important;
padding: 8px !important;
max-height: min(60dvh, 420px) !important;
overflow-y: auto;
}
#pwa-search-mount #quick-search-results:empty { display:none!important; }
#pwa-search-mount .bd-pwa-search-mode { flex:1 1 auto; min-width:0; }
#pwa-search-mount .bd-pwa-search-clear { flex:0 0 32px; }
#pwa-search-mount input[type="search"]::-webkit-search-cancel-button { display:none; }
#pwa-search-mount .bd-pwa-search-shell {
min-height:44px;
}
/* Phone chrome has one search owner: the PWA toolbar. The topbar panel stays
available as a no-PWA fallback, but must not render a second control when
the shared mobile shell is active. */
body.bd-mobile-chrome [data-bd-mobile-search-trigger],
body.bd-mobile-chrome #mobile-search-panel {
display: none !important;
}
/* Slightly larger folder type badges (Internal / External) */
.bd-folder-badge {
font-size: .55rem !important; /* was ~.65–.7 */
padding: .25rem .4rem !important; /* slightly taller + wider */
border-radius: .45rem !important; /* keep soft, not pill */
line-height: 1.0 !important;
}
.bd-folder-badge i {
font-size: .65rem;
}
/* File icon styling */
.bd-file-icon {
font-size: 1rem; /* slightly larger */
width: 1.2rem; /* consistent alignment */
text-align: center;
vertical-align: middle;
}
/* Optional subtle file-type tinting */
.bd-file-icon.fa-file-pdf { color: var(--bd-theme-fg-dc3545, #dc3545); }
.bd-file-icon.fa-file-excel,
.bd-file-icon.fa-file-csv { color: var(--bd-theme-fg-198754, #198754); }
.bd-file-icon.fa-file-word { color: var(--bd-theme-fg-0d6efd, #0d6efd); }
.bd-file-icon.fa-file-image { color: var(--bd-theme-fg-6f42c1, #6f42c1); }
.bd-file-icon.fa-file-zipper { color: var(--bd-theme-fg-fd7e14, #fd7e14); }
/* ============================================================
BD25 iPad/iOS — Sidebar scroll stability
- Keep sidebar height locked to visual viewport
- Prevent "white gap" under sidebar during keyboard resize
============================================================ */
:root{
--bd-vh: 100vh; /* JS will override with visualViewport height */
--bd-sidebar-top: 0px; /* JS will override with #page-topbar height OR pwa stack height */
}
/* Force deterministic sidebar geometry */
.vertical-menu{
top: var(--bd-sidebar-top, 0px) !important;
height: calc(var(--bd-vh, 100vh) - var(--bd-sidebar-top, 0px)) !important;
/* important: don't also constrain with bottom */
bottom: auto !important;
overflow-y: auto !important;
overscroll-behavior: contain;
-webkit-overflow-scrolling: touch;
}
/* ---------------------------------------------------------
Won → Unconverted: hover reveal Convert CTA
--------------------------------------------------------- */
.bd-est-card{
position: relative !important;
}
.bd-quick-convert-cta{
position:absolute !important;
top:.65rem !important;
right:.65rem !important;
z-index: 5 !important;
opacity: 0 !important;
transform: translateY(-6px) !important;
pointer-events: none !important;
transition: opacity .16s ease, transform .16s ease !important;
}
.bd-est-card:hover .bd-quick-convert-cta{
opacity: 1 !important;
transform: translateY(0) !important;
pointer-events: auto !important;
}
/* Small polish: keep it from jittering in dense cards */
.bd-quick-convert-cta .btn{
box-shadow: 0 1px 0 var(--bd-theme-shadow-000000-0f, rgba(0,0,0,.06)) !important;
}
.bd-est-actions .btn{
font-weight:600;
}
.bd-est-actions .btn-success{
box-shadow:0 1px 0 var(--bd-theme-shadow-000000-0d, rgba(0,0,0,.05));
}
/* ---------------------------------------------------------
Promote animation: subtle but celebratory
--------------------------------------------------------- */
.bd-est-row{
position:relative;
}
.bd-est-row.bd-promote-pending{
opacity:.92;
}
.bd-est-row.bd-promote-done{
animation: bdPromoteFlash .70s ease-out 1;
}
@keyframes bdPromoteFlash{
0%{
box-shadow: 0 0 0 var(--bd-theme-shadow-198754-00, rgba(25,135,84,0));
transform: scale(1);
background: var(--bd-theme-bg-ffffff, #fff);
}
35%{
box-shadow: 0 0 0 3px var(--bd-theme-shadow-198754-40, rgba(25,135,84,.25));
transform: scale(1.01);
background: var(--bd-theme-bg-198754-0a, rgba(25,135,84,.04));
}
100%{
box-shadow: 0 0 0 var(--bd-theme-shadow-198754-00, rgba(25,135,84,0));
transform: scale(1);
background: var(--bd-theme-bg-ffffff, #fff);
}
}
/* button micro-feedback */
.bd-btn-promote .bd-promote-spin{
width: .75rem;
height: .75rem;
border-radius: 999px;
border: 2px solid var(--bd-theme-border-ffffff-8c, rgba(255,255,255,.55));
border-top-color: var(--bd-theme-border-ffffff, rgba(255,255,255,1));
display:none;
}
.bd-btn-promote.is-loading .bd-promote-spin{
display:inline-block;
animation: bdSpin .75s linear infinite;
}
@keyframes bdSpin{ to { transform: rotate(360deg); } }
/* Follow-up success flash */
.bd-est-row.bd-followup-done{
animation: bdFollowupFlash .65s ease-out 1;
}
@keyframes bdFollowupFlash{
0% { box-shadow: 0 0 0 var(--bd-theme-shadow-0d6efd-00, rgba(13,110,253,0)); }
45% { box-shadow: 0 0 0 3px var(--bd-theme-shadow-0d6efd-38, rgba(13,110,253,.22)); }
100% { box-shadow: 0 0 0 var(--bd-theme-shadow-0d6efd-00, rgba(13,110,253,0)); }
}
/* Make disabled follow-up feel intentional */
.bd-btn-followup[disabled]{
opacity: .75;
cursor: not-allowed;
}
/* static/wizard/wizard.css
BD25 Wizard — Discovery style (crisp, compact, consistent)
- clean white cards, 1px borders, soft radius
- readable spacing, mobile friendly
- step rail chips + progress polish
- NO card movement on click/hover
- IMPORTANT: Buttons use GLOBAL BD25 standards:
.bd-btn + (.bd-btn-primary/.bd-btn-secondary/.bd-btn-success/.bd-btn-warning/.bd-btn-danger)
Wizard only adds pulse + busy behavior, it does NOT redefine button colors.
*/
:root{
--bd-bg: var(--bd-theme-bg-f6f7f9, #f6f7f9);
--bd-card: var(--bd-theme-bg-ffffff, #ffffff);
--bd-border: var(--bd-theme-border-000000-2e, rgba(0,0,0,0.18));
--bd-border-strong: var(--bd-theme-border-000000-47, rgba(0,0,0,0.28));
--bd-muted: var(--bd-theme-fg-6c757d, #6c757d);
--bd-text: var(--bd-theme-fg-111111, #111);
--bd-warn: var(--bd-theme-palette-f0ca00, #f0ca00);
--bd-good: var(--bd-theme-palette-1f7a3f, #1f7a3f);
--bd-info: var(--bd-theme-palette-0d6efd, #0d6efd);
}
/* Page baseline */
.bd-wizard-page,
body.bd-wizard-page{
background: var(--bd-bg);
}
.bd-wizard-page .container-fluid{
padding-bottom: 92px;
}
/* Card polish */
.bd-wizard-page .bd-card,
.bd-wizard-page .bd-subcard{
background: var(--bd-card);
border: 1px solid var(--bd-border) !important;
border-radius: 12px !important;
box-shadow: 0 1px 0 var(--bd-theme-shadow-000000-0a, rgba(0,0,0,0.04));
}
.bd-wizard-page .bd-subcard{
border-radius: 10px !important;
box-shadow: none;
}
/* stop any hover/click "jump" */
.bd-wizard-page .bd-card:hover,
.bd-wizard-page .bd-subcard:hover{
transform: none !important;
transition: none !important;
box-shadow: 0 1px 0 var(--bd-theme-shadow-000000-0a, rgba(0,0,0,0.04)) !important;
}
.bd-wizard-page .bd-card:active,
.bd-wizard-page .bd-subcard:active{
transform: none !important;
}
/* Inputs */
.bd-wizard-page .form-control,
.bd-wizard-page .form-select{
border: 1px solid var(--bd-border-strong) !important;
border-radius: 10px !important;
background: var(--bd-theme-bg-ffffff, #fff);
}
.bd-wizard-page .form-control:focus,
.bd-wizard-page .form-select:focus{
outline: none !important;
box-shadow: 0 0 0 3px var(--bd-theme-shadow-0d6efd-2e, rgba(13,110,253,0.18));
}
.bd-wizard-page .bd-invalid{
border-color: var(--bd-theme-border-dc3545, #dc3545) !important;
}
.bd-wizard-page .ts-wrapper.bd-invalid{
border: 1px solid var(--bd-theme-border-dc3545, #dc3545) !important;
border-radius: 10px !important;
}
/* Chips */
.bd-wizard-page .bd-chip{
border-radius: 999px;
padding: 6px 10px;
font-size: 0.78rem;
line-height: 1;
border: 1px solid var(--bd-theme-border-000000-2e, rgba(0,0,0,0.18));
background: var(--bd-theme-bg-ffffff, #fff);
display: inline-flex;
align-items: center;
gap: 6px;
}
.bd-wizard-page .bd-chip-muted{ background:var(--bd-theme-bg-f3f4f6, #f3f4f6); color:var(--bd-theme-fg-2b2f33, #2b2f33); }
.bd-wizard-page .bd-chip-info{ background:var(--bd-theme-bg-0d6efd-1a, rgba(13,110,253,0.10)); border-color:var(--bd-theme-border-0d6efd-40, rgba(13,110,253,0.25)); color:var(--bd-theme-fg-0b3f8a, #0b3f8a); }
.bd-wizard-page .bd-chip-good{ background:var(--bd-theme-bg-1f7a3f-1a, rgba(31,122,63,0.10)); border-color:var(--bd-theme-border-1f7a3f-40, rgba(31,122,63,0.25)); color:var(--bd-theme-fg-1f7a3f, #1f7a3f); }
.bd-wizard-page .bd-chip-warn{ background:var(--bd-theme-bg-f0ca00-2e, rgba(240,202,0,0.18)); border-color:var(--bd-theme-border-f0ca00-80, rgba(240,202,0,0.50)); color:var(--bd-theme-fg-6b5a00, #6b5a00); }
/* Action bar (layout only; colors come from global bd-btn variants) */
.bd-wizard-actionbar{
position: sticky;
bottom: 0;
background: var(--bd-theme-bg-ffffff-eb, rgba(255,255,255,0.92));
backdrop-filter: blur(8px);
-webkit-backdrop-filter: blur(8px);
z-index: 1020;
border: 1px solid var(--bd-border) !important;
border-radius: 12px;
box-shadow: 0 -6px 18px var(--bd-theme-shadow-000000-0f, rgba(0,0,0,0.06));
}
/* Ensure footer buttons match global sizing in wizard footer */
.bd-wizard-actionbar .bd-btn{
min-height: 40px;
}
/* Wizard CTA helpers (behavior only; NO colors) */
.bd-wizard-next{
will-change: box-shadow, transform;
}
.bd-wizard-next:disabled,
.bd-wizard-next[disabled]{
opacity: .6;
cursor: not-allowed;
}
/* Pulse ring ONLY on the Next button (should be bd-btn-primary in markup) */
@keyframes bdPulseRing {
0% { box-shadow: 0 0 0 0 var(--bd-theme-shadow-0d6efd-29, rgba(13,110,253,0.16)); }
60% { box-shadow: 0 0 0 10px var(--bd-theme-shadow-0d6efd-00, rgba(13,110,253,0.00)); }
100% { box-shadow: 0 0 0 0 var(--bd-theme-shadow-0d6efd-00, rgba(13,110,253,0.00)); }
}
.bd-wizard-next{
animation: bdPulseRing 1.9s ease-in-out infinite;
}
/* Busy state */
.bd-wizard-next.is-busy,
.bd-wizard-actionbar .bd-btn.is-busy{
pointer-events: none;
opacity: .75;
}
/* Progress bar */
.bd-wizard-page .progress{
background: var(--bd-theme-bg-eceff3, #eceff3);
border-radius: 999px;
overflow: hidden;
}
.bd-wizard-page .progress-bar{
background: var(--bd-theme-bg-111111, #111);
}
/* Team table polish */
.bd-team-table tbody tr{ border-top: 1px solid var(--bd-theme-border-000000-1a, rgba(0,0,0,0.10)); }
.bd-team-table tbody tr:first-child{ border-top: none; }
.bd-team-table td, .bd-team-table th{ padding: 10px 12px; vertical-align: middle; }
.bd-team-pill{
display: inline-flex;
align-items: center;
gap: 6px;
border: 1px solid var(--bd-theme-border-000000-2e, rgba(0,0,0,0.18));
background: var(--bd-theme-bg-f3f4f6, #f3f4f6);
border-radius: 999px;
padding: 4px 8px;
font-size: 0.78rem;
line-height: 1;
white-space: nowrap;
}
.bd-team-remove-btn{
width: 34px;
height: 34px;
border-radius: 999px !important;
padding: 0 !important;
display: inline-flex;
align-items: center;
justify-content: center;
}
/* Choice cards */
.bd-choice-grid{
display:grid;
grid-template-columns:repeat(auto-fit,minmax(220px,1fr));
gap:10px;
}
.bd-choice-card{
border:1px solid var(--bd-theme-border-000000-2e, rgba(0,0,0,0.18));
border-radius:12px;
background:var(--bd-theme-bg-ffffff, #fff);
padding:12px;
text-align:left;
width:100%;
cursor:pointer;
transition: box-shadow .15s ease, background .15s ease;
}
.bd-choice-card:hover{ box-shadow:0 8px 18px var(--bd-theme-shadow-000000-0f, rgba(0,0,0,0.06)); }
.bd-choice-card.active{
background: var(--bd-theme-bg-f0ca00-1f, rgba(240,202,0,0.12));
}
.bd-choice-top{ display:flex; align-items:center; gap:10px; }
.bd-choice-icon{
width:34px;height:34px;
border-radius:10px;
border:1px solid var(--bd-theme-border-000000-1f, rgba(0,0,0,0.12));
display:flex;align-items:center;justify-content:center;
background:var(--bd-theme-bg-f3f4f6, #f3f4f6);
}
.bd-choice-title{ font-weight:650; font-size:.92rem; color:var(--bd-theme-fg-111111, #111); }
.bd-choice-desc{ margin-top:8px; color:var(--bd-muted); font-size:.82rem; line-height:1.25; }
/* Mobile tweaks */
@media (max-width: 767.98px){
.bd-wizard-page .container-fluid{
padding-left: 12px;
padding-right: 12px;
}
.bd-wizard-page .bd-card,
.bd-wizard-page .bd-subcard{
border-radius: 10px !important;
}
}
/* Accessibility */
@media (prefers-reduced-motion: reduce){
.bd-wizard-next{ animation: none !important; }
}
/* Module tiles */
.bd-module-tile{
cursor: pointer;
user-select: none;
}
.bd-module-tile:focus{
outline: none;
box-shadow: 0 0 0 3px var(--bd-theme-shadow-0d6efd-2e, rgba(13,110,253,0.18));
}
.bd-module-tile-selected{
background: var(--bd-theme-bg-fffbea, #fffbea) !important;
}
/* Progress */
.bd-wizard-page .progress{
background:var(--bd-theme-bg-eceff3, #eceff3);
border-radius:999px;
overflow:hidden;
}
.bd-wizard-page .progress-bar{ background:var(--bd-theme-bg-111111, #111); }
/* Choice cards (restored + consistent with Project wizard: muted yellow + black border) */
.bd-choice-grid{
display:grid;
grid-template-columns:repeat(auto-fit,minmax(220px,1fr));
gap:10px;
}
.bd-choice-card{
cursor: pointer;
user-select: none;
border: 1px solid var(--bd-theme-border-000000-2e, rgba(0,0,0,0.18));
border-radius: 12px;
background: var(--bd-theme-bg-ffffff, #fff);
padding: 12px;
text-align: left;
width: 100%;
transition: box-shadow .15s ease, background-color .15s ease, transform .15s ease, border-color .15s ease;
}
.bd-choice-card:hover{
transform: translateY(-1px);
box-shadow: 0 8px 18px var(--bd-theme-shadow-000000-0f, rgba(0,0,0,0.06));
}
.bd-choice-card.active{
background-color: var(--bd-theme-bg-ffc107-1a, rgba(255, 193, 7, .10)) !important; /* muted yellow infill */
border-color: var(--bd-theme-border-000000, rgba(0, 0, 0, 1.0)) !important; /* match project cards */
box-shadow: none !important; /* project cards don't add inset ring */
}
.bd-choice-top{ display:flex; align-items:center; gap:10px; }
.bd-choice-icon{
width:34px;height:34px;
border-radius:10px;
border:1px solid var(--bd-theme-border-000000-1f, rgba(0,0,0,0.12));
display:flex;align-items:center;justify-content:center;
background:var(--bd-theme-bg-f3f4f6, #f3f4f6);
}
.bd-choice-title{ font-weight:650; font-size:.92rem; color:var(--bd-theme-fg-111111, #111); }
.bd-choice-desc{ margin-top:8px; color:var(--bd-muted); font-size:.82rem; line-height:1.25; }
/* Step-to-step animations */
@keyframes bdSlideInRight{ from{transform:translateX(14px);opacity:0;} to{transform:translateX(0);opacity:1;} }
@keyframes bdSlideInLeft { from{transform:translateX(-14px);opacity:0;} to{transform:translateX(0);opacity:1;} }
@keyframes bdFadeIn { from{opacity:0;} to{opacity:1;} }
.bd-wizard-step-anim[data-dir="next"]{ animation: bdSlideInRight .18s ease-out both; }
.bd-wizard-step-anim[data-dir="prev"]{ animation: bdSlideInLeft .18s ease-out both; }
.bd-wizard-step-anim[data-dir="jump"]{ animation: bdFadeIn .14s ease-out both; }
@media (prefers-reduced-motion: reduce){
.bd-wizard-step-anim{ animation:none!important; }
}
/* Mobile */
@media (max-width: 767.98px){
.bd-wizard-page .container-fluid{ padding-left:12px; padding-right:12px; }
.bd-wizard-page .bd-card, .bd-wizard-page .bd-subcard{ border-radius:10px!important; }
}
/* Tight variant (also match project card active styling) */
.bd-choice-card-tight{
border: 1px solid var(--bd-theme-border-000000-2e, rgba(0,0,0,0.18)) !important;
border-radius: 10px !important;
background: var(--bd-theme-bg-ffffff, #fff) !important;
padding: 10px 10px !important;
box-shadow: none !important;
transition: box-shadow .15s ease, background-color .15s ease, transform .15s ease, border-color .15s ease;
}
.bd-choice-card-tight:hover{
transform: translateY(-1px);
}
.bd-choice-card-tight.active{
background-color: var(--bd-theme-bg-ffc107-1a, rgba(255, 193, 7, .10)) !important; /* muted yellow infill */
border-color: var(--bd-theme-border-000000, rgba(0, 0, 0, 1.0)) !important; /* match project cards */
box-shadow: none !important;
}
.bd-choice-icon{
width: 30px !important;
height: 30px !important;
border-radius: 9px !important;
border: 1px solid var(--bd-theme-border-000000-1a, rgba(0,0,0,0.10)) !important;
background: var(--bd-theme-bg-f3f4f6, #f3f4f6) !important;
}
.bd-choice-title{
font-weight: 650 !important;
font-size: .88rem !important;
}
.bd-choice-badge{
margin-left: auto;
padding: 3px 8px;
border-radius: 8px;
border: 1px solid var(--bd-theme-border-000000-2e, rgba(0,0,0,0.18));
background: var(--bd-theme-bg-000000-0a, rgba(0,0,0,0.04));
font-size: .78rem;
line-height: 1.2;
white-space: nowrap;
}
.bd-choice-badge-tone-good{
border-color: var(--bd-theme-border-1f7a3f-47, rgba(31,122,63,0.28));
background: var(--bd-theme-bg-1f7a3f-1a, rgba(31,122,63,0.10));
color: var(--bd-theme-fg-1f7a3f, #1f7a3f);
}
.bd-choice-badge-tone-info{
border-color: var(--bd-theme-border-0d6efd-47, rgba(13,110,253,0.28));
background: var(--bd-theme-bg-0d6efd-1a, rgba(13,110,253,0.10));
color: var(--bd-theme-fg-0b3f8a, #0b3f8a);
}
.bd-choice-badge-tone-warn{
background: var(--bd-theme-bg-f0ca00-2e, rgba(240,202,0,0.18));
color: var(--bd-theme-fg-6b5a00, #6b5a00);
}
.bd-choice-badge-tone-muted{
border-color: var(--bd-theme-border-000000-2e, rgba(0,0,0,0.18));
background: var(--bd-theme-bg-000000-0a, rgba(0,0,0,0.04));
color: var(--bd-theme-fg-2b2f33, #2b2f33);
}
.bd-choice-badge-tone-bad{
border-color: var(--bd-theme-border-dc3545-4c, rgba(220,53,69,0.30));
background: var(--bd-theme-bg-dc3545-1a, rgba(220,53,69,0.10));
color: var(--bd-theme-fg-842029, #842029);
}
.bd-subcard .form-check-input{ cursor:pointer; }
.bd-scope-list{
border: 1px solid var(--bd-theme-border-000000-2e, rgba(0,0,0,0.18));
border-radius: 10px;
background: var(--bd-theme-bg-ffffff, #fff);
max-height: 280px;
overflow-y: auto;
}
.bd-scope-row{
padding: 8px 10px;
border-top: 1px solid var(--bd-theme-border-000000-14, rgba(0,0,0,0.08));
}
.bd-scope-row:first-child{ border-top: none; }
.bd-scope-row:hover{ background: var(--bd-theme-bg-f8f9fa, #f8f9fa); }
.bd-scope-origin{
padding: 3px 8px;
border-radius: 8px; /* rectangle, not pill */
border: 1px solid var(--bd-theme-border-000000-2e, rgba(0,0,0,0.18));
font-size: .75rem;
line-height: 1.2;
white-space: nowrap;
}
.bd-scope-origin-global{
background: var(--bd-theme-bg-0d6efd-1a, rgba(13,110,253,0.10));
border-color: var(--bd-theme-border-0d6efd-47, rgba(13,110,253,0.28));
color: var(--bd-theme-fg-0b3f8a, #0b3f8a);
}
.bd-scope-origin-dept{
background: var(--bd-theme-bg-f0ca00-2e, rgba(240,202,0,0.18));
border-color: var(--bd-theme-border-f0ca00-99, rgba(240,202,0,0.60));
color: var(--bd-theme-fg-6b5a00, #6b5a00);
}
.bd-scope-origin-custom{
background: var(--bd-theme-bg-000000-0a, rgba(0,0,0,0.04));
border-color: var(--bd-theme-border-000000-2e, rgba(0,0,0,0.18));
color: var(--bd-theme-fg-2b2f33, #2b2f33);
}
#scope-chips .bd-chip{
margin-right: 6px;
margin-bottom: 6px;
}
.bd-chip-x{
margin-left: 6px;
cursor: pointer;
}
.bd-review-edit{
position:absolute;
top:10px;
right:10px;
width:32px;
height:32px;
border-radius:10px;
border:0;
background: transparent;
display:inline-flex;
align-items:center;
justify-content:center;
color:var(--bd-theme-fg-111111, #111);
text-decoration:none;
}
.bd-review-edit:hover{
background:var(--bd-theme-bg-f3f4f6, #f3f4f6);
}
.bd-choice-badge{
padding: 3px 8px;
border-radius: 8px;
border: 1px solid var(--bd-theme-border-000000-2e, rgba(0,0,0,0.18));
background: var(--bd-theme-bg-000000-0a, rgba(0,0,0,0.04));
font-size: .78rem;
line-height: 1.2;
white-space: nowrap;
}
.bd-choice-badge-tone-info{
border-color: var(--bd-theme-border-0d6efd-47, rgba(13,110,253,0.28));
background: var(--bd-theme-bg-0d6efd-1a, rgba(13,110,253,0.10));
color: var(--bd-theme-fg-0b3f8a, #0b3f8a);
}
.bd-team-pill{
display:inline-flex;
align-items:center;
gap:6px;
border:1px solid var(--bd-theme-border-000000-2e, rgba(0,0,0,0.18));
background:var(--bd-theme-bg-f3f4f6, #f3f4f6);
border-radius:999px;
padding:4px 8px;
font-size:0.78rem;
line-height:1;
white-space:nowrap;
}
/* Force wizard footer buttons to standard size */
.bd-wizard-actionbar .bd-btn{
min-height: auto !important;
padding: .34rem .78rem !important;
font-size: .85rem !important;
}
/* =========================================================
BD25 BUTTONS — STANDARD + LOADING + MICRO-ANIMATIONS (AUTHORITATIVE)
- Text always black
- Muted fills
- 1px black border
- Standard size (not mega)
- Built-in loading state (.is-loading or [aria-busy="true"])
- Optional pulse on .bd-btn-pulse
========================================================= */
.bd-btn{
display:inline-flex !important;
align-items:center !important;
justify-content:center !important;
gap:.45rem !important;
padding:.34rem .78rem !important;
font-size:.85rem !important;
font-weight:600 !important;
line-height:1.1 !important;
white-space:nowrap !important;
border-radius:8px !important;
border:1px solid var(--bd-theme-border-111111, #111) !important;
color:var(--bd-theme-fg-111111, #111) !important;
background:var(--bd-theme-bg-f3f4f6, #f3f4f6) !important;
text-decoration:none !important;
user-select:none !important;
cursor:pointer !important;
transition:
background .12s ease,
transform .06s ease,
opacity .12s ease !important;
}
/* Focus/active */
.bd-btn:focus{
outline:none !important;
box-shadow:0 0 0 3px var(--bd-theme-shadow-000000-1a, rgba(0,0,0,0.10)) !important;
}
.bd-btn:active{
transform: translateY(1px) scale(.99) !important;
}
/* Disabled */
.bd-btn[disabled],
.bd-btn.disabled{
opacity:.6 !important;
cursor:not-allowed !important;
box-shadow:none !important;
transform:none !important;
}
/* ---------- BD25 Button Internals (FORCE) ---------- */
.bd-btn .bd-btn-ico,
.bd-btn .bd-btn-spin,
.bd-btn .bd-btn-ico i,
.bd-btn .bd-btn-spin i{
background: transparent !important;
border: 0 !important;
box-shadow: none !important;
padding: 0 !important;
margin: 0 !important;
border-radius: 0 !important;
}
/* ---------- LOADING STATE (FORCE) ---------- */
.bd-btn .bd-btn-spin{
display: none !important;
align-items: center !important;
}
.bd-btn.is-loading,
.bd-btn[aria-busy="true"]{
pointer-events: none !important;
opacity: .78 !important;
}
.bd-btn.is-loading .bd-btn-ico,
.bd-btn[aria-busy="true"] .bd-btn-ico{
display: none !important;
}
.bd-btn.is-loading .bd-btn-spin,
.bd-btn[aria-busy="true"] .bd-btn-spin{
display: inline-flex !important;
}
/* Optional: keep width stable while loading */
.bd-btn .bd-btn-label{
display:inline-flex !important;
}
/* ---------------------------------------------------------
TONES (text stays black)
--------------------------------------------------------- */
.bd-btn-secondary{
background:var(--bd-theme-bg-f3f4f6, #f3f4f6) !important;
}
.bd-btn-secondary:hover{
background:var(--bd-theme-bg-e5e7eb, #e5e7eb) !important;
}
.bd-btn-primary{
background:var(--bd-theme-bg-0d6efd-24, rgba(13,110,253,0.14)) !important;
}
.bd-btn-primary:hover{
background:var(--bd-theme-bg-0d6efd-38, rgba(13,110,253,0.22)) !important;
}
.bd-btn-success{
background:var(--bd-theme-bg-1f7a3f-29, rgba(31,122,63,0.16)) !important;
}
.bd-btn-success:hover{
background:var(--bd-theme-bg-1f7a3f-3d, rgba(31,122,63,0.24)) !important;
}
.bd-btn-warning{
background:var(--bd-theme-bg-f0ca00-38, rgba(240,202,0,0.22)) !important;
}
.bd-btn-warning:hover{
background:var(--bd-theme-bg-f0ca00-52, rgba(240,202,0,0.32)) !important;
}
.bd-btn-danger{
background:var(--bd-theme-bg-dc3545-29, rgba(220,53,69,0.16)) !important;
}
.bd-btn-danger:hover{
background:var(--bd-theme-bg-dc3545-3d, rgba(220,53,69,0.24)) !important;
}
/* Optional size modifiers */
.bd-btn-sm{ padding:.26rem .62rem !important; font-size:.78rem !important; }
.bd-btn-lg{ padding:.46rem .92rem !important; font-size:.90rem !important; }
/* ---------------------------------------------------------
Optional pulse utility (for primary CTA)
Add class: .bd-btn-pulse
--------------------------------------------------------- */
@keyframes bdBtnPulse {
0% { box-shadow:0 0 0 0 var(--bd-theme-shadow-000000-1a, rgba(0,0,0,0.10)); }
70% { box-shadow:0 0 0 10px var(--bd-theme-shadow-000000-00, rgba(0,0,0,0.00)); }
100% { box-shadow:0 0 0 0 var(--bd-theme-shadow-000000-00, rgba(0,0,0,0.00)); }
}
.bd-btn.bd-btn-pulse{
animation: bdBtnPulse 1.9s ease-in-out infinite !important;
}
.bd-btn.bd-btn-pulse.is-loading,
.bd-btn.bd-btn-pulse[aria-busy="true"],
.bd-btn.bd-btn-pulse[disabled]{
animation:none !important;
}
.bd-status{
border:1px solid var(--bd-theme-border-000000, #000);
border-radius:8px;
padding:6px 12px;
font-weight:700;
background:var(--bd-theme-bg-ffffff, #fff);
display:inline-block;
}
.bd-status.muted{ background:var(--bd-theme-bg-f6f6f6, #f6f6f6); }
.bd-status.info{ background:var(--bd-theme-bg-eaf2ff, #eaf2ff); }
.bd-status.good{ background:var(--bd-theme-bg-e9f9ef, #e9f9ef); }
.bd-status.warn{ background:var(--bd-theme-bg-fff4d6, #fff4d6); }
.bd-status.bad{ background:var(--bd-theme-bg-ffe7e7, #ffe7e7); }
.bd-health-bar{
height:8px;
border:1px solid var(--bd-theme-border-000000-40, rgba(0,0,0,.25));
border-radius:999px;
background:var(--bd-theme-bg-eef1f4, #eef1f4);
}
.bd-stepper{
display:flex;
gap:12px;
align-items:center;
}
.bd-step{
display:flex;
flex-direction:column;
align-items:center;
}
.bd-step .dot{
width:10px;
height:10px;
border-radius:50%;
border:2px solid var(--bd-theme-border-000000, #000);
}
.bd-step.done .dot{ background:var(--bd-theme-bg-198754, #198754); }
.bd-step.active .dot{ background:var(--bd-theme-bg-0d6efd, #0d6efd); }
.bd-step .label{
font-size:11px;
font-weight:700;
margin-top:4px;
color:var(--bd-theme-fg-6c757d, #6c757d);
}
/* Daily-report-style sortable header behavior (MDI) */
#submittals-log-table th.sortable{ cursor:pointer; user-select:none; }
#submittals-log-table th.sortable .sortable-inner{ cursor:pointer !important; }
.sort-icon{ margin-left:4px; display:inline-flex; align-items:center; }
.sort-arrow{ opacity:0; transform:translateY(-3px); transition:opacity .18s ease, transform .18s ease; }
.sort-arrow.active{ opacity:1; transform:translateY(0); }
.sort-hint{ opacity:0; transition: opacity .15s ease; }
th.sortable:hover .sort-hint{ opacity:.6; }
th.sortable.sorted{ font-weight:600; }
/* =========================================================
Submittals: Log Status Badge (tight + readable)
========================================================= */
.bd-sub-status{
display:inline-flex;
align-items:center;
gap:6px;
border:1px solid var(--bd-theme-border-111111, #111);
border-radius:8px;
padding:4px 8px;
font-weight:700;
font-size:.78rem;
line-height:1.1;
background:var(--bd-theme-bg-ffffff, #fff);
white-space:nowrap;
}
.bd-sub-status i{
font-size:1rem;
line-height:1;
opacity:.85;
}
/* tones */
.bd-sub-status.muted{ background: var(--bd-theme-bg-000000-0a, rgba(0,0,0,0.04)); }
.bd-sub-status.info { background: var(--bd-theme-bg-0d6efd-1a, rgba(13,110,253,0.10)); }
.bd-sub-status.good { background: var(--bd-theme-bg-1f7a3f-1f, rgba(31,122,63,0.12)); }
.bd-sub-status.warn { background: var(--bd-theme-bg-f0ca00-33, rgba(240,202,0,0.20)); }
.bd-sub-status.bad { background: var(--bd-theme-bg-dc3545-1f, rgba(220,53,69,0.12)); }
.bd-sub-health{
height:8px;
border:1px solid var(--bd-theme-border-000000-40, rgba(0,0,0,.25));
border-radius:999px;
background:var(--bd-theme-bg-eef1f4, #eef1f4);
}
.bd-stepper{ display:flex; align-items:center; gap:10px; flex-wrap:wrap; }
.bd-step{ display:flex; flex-direction:column; align-items:center; }
.bd-step .dot{ width:10px; height:10px; border-radius:50%; border:2px solid var(--bd-theme-border-000000, #000); background:var(--bd-theme-bg-ffffff, #fff); }
.bd-step.done .dot{ background:var(--bd-theme-bg-198754, #198754); }
.bd-step.active .dot{ background:var(--bd-theme-bg-0d6efd, #0d6efd); animation:bdPulse 1.2s ease-in-out infinite; }
.bd-step .label{ margin-top:4px; font-size:11px; font-weight:800; color:var(--bd-theme-fg-6c757d, #6c757d); }
.bd-stepper .line{ width:32px; height:2px; background:var(--bd-theme-bg-000000, #000); opacity:.25; }
@keyframes bdPulse{ 0%{transform:scale(1);opacity:.85}50%{transform:scale(1.12);opacity:1}100%{transform:scale(1);opacity:.85} }
.ghost-field,
.ghost-field * {
opacity: .55;
pointer-events: none;
}
.bd-badge{display:inline-flex;align-items:center;padding:.35rem .6rem;border-radius:999px;font-weight:600;border:1px solid var(--bd-theme-border-000000-26, rgba(0,0,0,.15));gap:.35rem}
.bd-badge-good{background:var(--bd-theme-bg-e9f9ef, #e9f9ef)}
.bd-badge-warn{background:var(--bd-theme-bg-fff7e6, #fff7e6)}
.bd-badge-bad{background:var(--bd-theme-bg-ffecec, #ffecec)}
.bd-badge-info{background:var(--bd-theme-bg-eef4ff, #eef4ff)}
.bd-badge-muted{background:var(--bd-theme-bg-f3f4f6, #f3f4f6)}
/* =========================================================
Standards Contract Normalization (runtime implementation)
Foundational pass: consolidate shared primitives into discovery.css
========================================================= */
:root {
--bd-field-h: 32px;
--bd-field-h-sm: 28px;
--bd-field-radius: 10px;
--bd-field-px: 0.75rem;
--bd-field-px-sm: 0.55rem;
}
/* Forms: normalize around a single compact runtime contract */
.form-control:not(textarea):not([multiple]),
.form-select,
.input-group > .input-group-text,
.ts-wrapper.single .ts-control,
.ts-wrapper.single.input-active .ts-control,
.ts-wrapper.single .ts-control input {
min-height: var(--bd-field-h) !important;
height: var(--bd-field-h) !important;
border-radius: var(--bd-field-radius) !important;
padding: 0 var(--bd-field-px) !important;
font-size: 0.875rem !important;
line-height: 1.25 !important;
}
.form-control-sm,
.form-select-sm,
.input-group.input-group-sm > .form-control,
.input-group.input-group-sm > .form-select,
.input-group.input-group-sm > .input-group-text,
.bd-form-compact .form-control,
.bd-form-compact .form-select,
.bd-form-compact .input-group-text,
.bd-form-compact .ts-wrapper.single .ts-control {
min-height: var(--bd-field-h-sm) !important;
height: var(--bd-field-h-sm) !important;
border-radius: 8px !important;
padding: 0 var(--bd-field-px-sm) !important;
font-size: 0.8125rem !important;
}
textarea.form-control,
textarea.bd-input {
min-height: calc(var(--bd-field-h) * 2.2) !important;
height: auto !important;
padding: 0.5rem var(--bd-field-px) !important;
}
.ts-wrapper.multi .ts-control {
min-height: var(--bd-field-h) !important;
border-radius: var(--bd-field-radius) !important;
padding: 3px 6px !important;
}
/* Buttons: unified primary/secondary/danger/icon/action-strip */
.bd-btn,
.btn.bd-btn {
min-height: var(--bd-field-h);
border-radius: 10px !important;
font-weight: 600;
}
.bd-btn-dark,
.bd-btn-primary {
background: var(--bd-theme-bg-111111, #111) !important;
border-color: var(--bd-theme-border-111111, #111) !important;
color: var(--bd-theme-fg-ffffff, #fff) !important;
}
.bd-btn-outline,
.bd-btn-secondary {
background: var(--bd-theme-bg-ffffff, #fff) !important;
border-color: var(--bd-border) !important;
color: var(--bd-text) !important;
}
.bd-btn-danger {
background: var(--bd-theme-bg-fff1f1, #fff1f1) !important;
color: var(--bd-theme-fg-111111, #111) !important;
border-color: var(--bd-theme-border-000000, #000) !important;
}
.bd-btn-icon,
.bd-action-strip__btn {
min-width: var(--bd-field-h);
min-height: var(--bd-field-h);
padding: 0 0.65rem !important;
border-radius: 9px !important;
}
/* Work shell + nav primitives */
.bd-workflow-bar,
.bd-metric-row,
.bd-work-nav-primary,
.bd-work-subnav {
border: 1px solid var(--bd-border);
border-radius: 12px;
background: var(--bd-theme-bg-ffffff, #fff);
padding: 0.5rem 0.65rem;
}
.bd-work-nav-primary__link,
.bd-work-subnav__link {
border: 1px solid transparent;
border-radius: 8px;
padding: 0.35rem 0.6rem;
}
.bd-work-nav-primary__link.is-active,
.bd-work-subnav__link.is-active {
border-color: var(--bd-border);
background: var(--bd-theme-bg-f5f6f8, #f5f6f8);
font-weight: 600;
}
/* Table/list shells */
.bd-table-shell,
.bd-table-flat,
.table.bd-table-shell {
border: 1px solid var(--bd-border);
border-radius: 14px;
overflow: hidden;
background: var(--bd-theme-bg-ffffff, #fff);
}
.bd-table-context,
.bd-table-toolbar,
.bd-action-strip {
border: 1px solid var(--bd-border);
border-radius: 10px;
background: var(--bd-theme-bg-ffffff, #fff);
}
.bd-table-shell tbody tr:hover,
.bd-table-flat tbody tr:hover,
.table-hover tbody tr:hover {
background: var(--bd-theme-bg-f8fafc, #f8fafc);
}
.bd-table-shell tbody tr.is-selected,
.bd-table-flat tbody tr.selected,
tr.selected {
background: var(--bd-theme-bg-fff8ea, #fff8ea) !important;
}
.bd-table-empty,
.bd-sheet-table__empty td {
color: var(--bd-muted);
text-align: center;
padding: 1rem;
background: var(--bd-theme-bg-fafafa, #fafafa);
}
/* Modal + confirm shells */
.modal-content,
.bd-modal,
.bd-modal-window,
.bd-modal-panel {
border: 1px solid var(--bd-border) !important;
border-radius: 14px !important;
overflow: hidden;
box-shadow: var(--bd-shadow);
}
.modal-header,
.modal-footer,
.bd-modal-window__header,
.bd-modal-window__footer,
.bd-modal-header,
.bd-modal-footer {
background: var(--bd-theme-bg-ffffff, #fff);
border-color: var(--bd-border) !important;
}
.btn-close,
.bd-modal__close {
opacity: 0.8;
}
.bd-confirm-title {
font-weight: 700;
letter-spacing: 0;
}
/* File manager shared shell */
#project-file-manager,
.bd-library-shell,
.bd-file-manager-shell {
border: 1px solid var(--bd-border);
border-radius: 14px;
background: var(--bd-theme-bg-ffffff, #fff);
}
.bd-file-toolbar,
.bd-file-breadcrumb,
.bd-file-bulkbar,
.bd-upload-strip {
border: 1px solid var(--bd-border);
border-radius: 10px;
background: var(--bd-theme-bg-ffffff, #fff);
}
.bd-file-row,
#project-file-manager tbody tr {
border-bottom: 1px solid var(--bd-theme-border-eceff3, #eceff3);
}
.bd-file-row:hover,
#project-file-manager tbody tr:hover {
background: var(--bd-theme-bg-f8fafc, #f8fafc);
}
.bd-file-row.selected,
#project-file-manager tbody tr.selected {
background: var(--bd-theme-bg-fff8ea, #fff8ea) !important;
}
.bd-file-badge,
.bd-folder-badge {
border: 1px solid var(--bd-border);
border-radius: 999px;
padding: 0.1rem 0.45rem;
font-size: 0.72rem;
font-weight: 600;
background: var(--bd-theme-bg-ffffff, #fff);
}
/* Worksheet/grid shells */
.bd-sheet-shell,
.bd-worksheet-shell,
.bd-worksheet-grid,
.bd-sheet-table {
border: 1px solid var(--bd-border);
border-radius: 14px;
background: var(--bd-theme-bg-ffffff, #fff);
}
.bd-worksheet-grid__row,
.bd-sheet-table tbody tr {
min-height: 34px;
}
.bd-worksheet-grid__row .cell,
.bd-sheet-table tbody td {
padding-top: 0.35rem;
padding-bottom: 0.35rem;
}
.bd-sheet-signature,
.bd-signature-surface {
border: 1px dashed var(--bd-border);
border-radius: 10px;
background: var(--bd-theme-bg-ffffff, #fff);
}
.bd-sheet-summary-bar,
.bd-worksheet-summary-strip {
border: 1px solid var(--bd-border);
border-radius: 10px;
background: var(--bd-theme-bg-f9fafb, #f9fafb);
}
/* =========================================================
BD25 Discovery Standards
Living reference styles for /standards/.
========================================================= */
:root {
--bd-std-radius-sm: 10px;
--bd-std-radius-md: 14px;
--bd-std-radius-lg: 18px;
--bd-field-h: 32px;
--bd-field-h-sm: 32px;
--bd-field-radius: 10px;
--bd-field-px: 0.75rem;
--bd-field-px-sm: 0.55rem;
--bd-std-shadow: 0 10px 24px var(--bd-theme-shadow-0f172a-14, rgba(15, 23, 42, 0.08));
--bd-std-shadow-lg: 0 20px 40px var(--bd-theme-shadow-0f172a-29, rgba(15, 23, 42, 0.16));
--bd-std-muted-surface: var(--bd-theme-bg-0f172a-0d, rgba(15, 23, 42, 0.05));
--bd-std-good-surface: var(--bd-theme-bg-1a7f2e-1a, rgba(26, 127, 46, 0.10));
--bd-std-info-surface: var(--bd-theme-bg-1f6fe5-1a, rgba(31, 111, 229, 0.10));
--bd-std-warn-surface: var(--bd-theme-bg-c88719-1f, rgba(200, 135, 25, 0.12));
--bd-std-warn-soft: var(--bd-theme-palette-f6f3db, #f6f3db);
--bd-std-danger-surface: var(--bd-theme-bg-b3261e-1a, rgba(179, 38, 30, 0.10));
--bd-std-good-border: var(--bd-theme-border-1a7f2e-59, rgba(26, 127, 46, 0.35));
--bd-std-info-border: var(--bd-theme-border-1f6fe5-57, rgba(31, 111, 229, 0.34));
--bd-std-warn-border: var(--bd-theme-border-c88719-57, rgba(200, 135, 25, 0.34));
--bd-std-warn-soft-border: var(--bd-theme-border-e4d7a3, #e4d7a3);
--bd-std-danger-border: var(--bd-theme-border-b3261e-57, rgba(179, 38, 30, 0.34));
}
/* =========================================================
App shell primitives (base + shared partials)
========================================================= */
.bd-shell-min-w-0 { min-width: 0; }
.bd-topbar-shell .navbar-header {
min-height: 56px;
overflow: visible;
position: relative;
z-index: 2000;
}
.bd-topbar-search-results {
z-index: 1050;
width: 100%;
max-height: 300px;
overflow-y: auto;
}
.bd-topbar-mobile-search {
display: none;
overflow: visible;
transition: max-height .25s ease, opacity .25s ease;
max-height: 0;
opacity: 0;
}
.bd-topbar-mobile-search-results {
display: none;
position: absolute;
left: 0;
right: 0;
top: 100%;
margin-top: 2px;
max-height: 320px;
overflow-y: auto;
z-index: 1500;
}
.bd-org-logo { height: 40px; width: auto; object-fit: contain; }
.bd-avatar-circle-40 { width: 40px; height: 40px; border-radius: 50%; }
.bd-avatar-32-cover { width: 32px; height: 32px; object-fit: cover; }
.bd-account-switcher-menu { min-width: 340px; }
.bd-topbar-icon-btn,
.bd-notif-toggle,
.bd-rightbar-toggle {
position: relative;
width: 40px;
height: 36px;
border: none;
background: transparent;
color: var(--bd-theme-fg-111111, #111);
border-radius: 6px;
display: inline-flex;
align-items: center;
justify-content: center;
cursor: pointer;
transition: background .2s ease, transform .2s ease;
}
.bd-topbar-icon-btn:hover,
.bd-notif-toggle:hover,
.bd-rightbar-toggle:hover { background: var(--bd-theme-bg-000000-0d, rgba(0,0,0,0.05)); }
.bd-topbar-icon-btn:active,
.bd-notif-toggle:active,
.bd-rightbar-toggle:active { transform: scale(.96); }
.bd-notif-toggle { overflow: visible; }
.bd-notif-count {
position: absolute;
z-index: 5;
top: -6px;
right: -8px;
background: var(--bd-theme-bg-dc3545, #dc3545);
color: var(--bd-theme-fg-ffffff, #fff);
border-radius: 999px;
font-size: 0.65rem;
font-weight: 600;
line-height: 1;
padding: 2px 5px;
min-width: 18px;
text-align: center;
display: none;
}
.bd-notif-toggle.has-unread .bd-notif-count { display: inline-block !important; }
.bd-notif-toggle:not(.has-unread) .bd-notif-count { display: none !important; }
.bd-notif-toggle.has-unread .bd-notif-icon { color: var(--bd-theme-fg-dc3545, #dc3545) !important; }
.bd-notif-dropdown { width: 380px; max-width: 92vw; }
.bd-notif-list { max-height: 360px; overflow-y: auto; }
.bd-attention-dot {
position: absolute;
top: 6px;
right: 6px;
min-width: 12px;
padding: 1px 5px;
border-radius: 999px;
background: var(--bd-theme-bg-111111, #111);
color: var(--bd-theme-fg-ffffff, #fff);
border: 1px solid var(--bd-theme-border-000000, #000);
font-size: 10px;
line-height: 1;
display: inline-flex;
align-items: center;
justify-content: center;
}
.bd-rightbar-toggle i { font-size: 1rem; line-height: 1; }
.bd-sidebar-shell {
position: fixed !important;
top: var(--bd-sidebar-top, calc(var(--bd-pwa-top, 0px) + var(--bd-topbar-h, 70px))) !important;
height: calc(var(--bd-vh, 100vh) - var(--bd-sidebar-top, calc(var(--bd-pwa-top, 0px) + var(--bd-topbar-h, 70px)))) !important;
bottom: 0 !important;
left: 0 !important;
}
.bd-sidebar-shell .simplebar-content-wrapper,
.bd-sidebar-shell .simplebar-wrapper,
.bd-sidebar-shell .simplebar-mask{
max-height: calc(var(--bd-vh, 100vh) - var(--bd-sidebar-top, calc(var(--bd-pwa-top, 0px) + var(--bd-topbar-h, 70px)))) !important;
}
.bd-sidebar-shell .disabled-link > a { pointer-events: none; opacity: 0.7; }
.bd-sidebar-shell .disabled-link > a { pointer-events: none; opacity: 0.7; }
.bd-sidebar-shell #side-menu li a { transition: background-color 0.2s ease, color 0.2s ease; }
.bd-sidebar-shell .mm-active > a {
position: relative;
color: var(--bd-theme-fg-0d6efd, #0d6efd) !important;
font-weight: 600;
background-color: var(--bd-theme-bg-0d6efd-14, rgba(13, 110, 253, 0.08));
border-radius: 0.25rem;
padding-left: 1.5rem;
}
.bd-sidebar-shell .mm-active > a::before {
content: "";
position: absolute;
left: 0;
top: 0;
bottom: 0;
width: 4px;
background-color: var(--bd-theme-bg-0d6efd, #0d6efd);
border-top-left-radius: 0.25rem;
border-bottom-left-radius: 0.25rem;
}
.bd-rightbar-shell { width: 380px; }
.bd-list-group-surface { border-radius: 12px; overflow: hidden; }
.bd-toggle{ position:relative; display:inline-block; width:44px; height:24px; }
.bd-toggle input{ display:none; }
.bd-toggle-slider{
position:absolute; inset:0; border:1px solid var(--bd-theme-border-000000, #000); border-radius:999px; background:var(--bd-theme-bg-f7f7f7, #f7f7f7);
transition:background .2s ease, transform .2s ease;
}
.bd-toggle-slider:before{
content:""; position:absolute; height:18px; width:18px; left:2px; top:2px; border:1px solid var(--bd-theme-border-000000, #000);
border-radius:50%; background:var(--bd-theme-bg-ffffff, #fff); transition:transform .2s ease;
}
.bd-toggle input:checked + .bd-toggle-slider{ background:var(--bd-theme-bg-dddddd, #ddd); }
.bd-toggle input:checked + .bd-toggle-slider:before{ transform:translateX(20px); }
.org-card { overflow: hidden; }
.org-card-overlay {
border-radius: inherit;
position: absolute;
inset: 0;
background-image: var(--org-logo);
background-repeat: no-repeat;
background-position: center;
background-size: 85%;
opacity: 0.08;
pointer-events: none;
filter: grayscale(100%) contrast(90%);
}
.org-card-content { position: relative; z-index: 1; }
body.bd-dark .offcanvas-body{ background:var(--bd-theme-bg-111111, #111) !important; color:var(--bd-theme-fg-f2f2f2, #f2f2f2); }
body.bd-dark .bd-card{ background:var(--bd-theme-bg-181818, #181818) !important; color:var(--bd-theme-fg-e6e6e6, #e6e6e6); }
body.bd-dark .bd-card .text-dark{ color:var(--bd-theme-fg-f2f2f2, #f2f2f2) !important; }
body.bd-dark .text-muted{ color:var(--bd-theme-fg-bdbdbd, #bdbdbd) !important; }
body.bd-dark .list-group-item{ background:transparent; color:var(--bd-theme-fg-e6e6e6, #e6e6e6); }
body.bd-dark .btn-outline-dark{ color:var(--bd-theme-fg-f2f2f2, #f2f2f2); border-color:var(--bd-theme-border-f2f2f2, #f2f2f2); }
body.bd-dark .border-dark{ border-color:var(--bd-theme-border-444444, #444) !important; }
.bd-auth-shell { min-height: 100vh; }
.bd-public-shell { background-color: var(--bd-theme-bg-f8f9fa, #f8f9fa); }
.bd-toast-stack {
position: fixed;
bottom: 1rem;
right: 1rem;
z-index: 1080;
display: flex;
flex-direction: column;
align-items: flex-end;
gap: 8px;
pointer-events: none;
}
.bd-toast {
pointer-events: auto;
display: flex;
align-items: flex-start;
gap: 10px;
min-width: 260px;
max-width: 420px;
padding: 10px 12px;
background: var(--bd-theme-bg-ffffff, #fff);
color: var(--bd-theme-fg-111111, #111);
border: 1px solid var(--bd-theme-border-000000, #000);
border-radius: 8px;
box-shadow: 0 4px 12px var(--bd-theme-shadow-000000-14, rgba(0,0,0,.08));
position: relative;
overflow: hidden;
animation: bd-toast-in .18s ease-out;
}
.bd-toast::before {
content: "";
position: absolute;
left: 0; top: 0; bottom: 0;
width: 5px;
}
.bd-toast.is-success::before { background: var(--bd-theme-bg-198754, #198754); }
.bd-toast.is-info::before { background: var(--bd-theme-bg-1f6fe5, #1f6fe5); }
.bd-toast.is-warn::before { background: var(--bd-theme-bg-ffc107, #ffc107); }
.bd-toast.is-error::before { background: var(--bd-theme-bg-dc3545, #dc3545); }
@keyframes bd-toast-in {
from { opacity:0; transform:translateY(6px); }
to { opacity:1; transform:translateY(0); }
}
@media (max-width: 991.98px) {
.bd-topbar-shell .navbar-brand-box img.logo-lg { display: none !important; }
.bd-topbar-shell .navbar-brand-box img.logo-sm { height: 30px !important; }
.bd-notif-dropdown { width: 100vw !important; max-width: none !important; }
.bd-org-logo { height: 28px !important; }
.bd-topbar-mobile-search input {
border: 1px solid var(--bd-theme-border-000000, #000);
border-radius: 6px;
font-size: 0.95rem;
}
}
.bd-standards {
padding-bottom: 3rem;
}
.bd-standards section {
scroll-margin-top: 96px;
}
.bd-standards-hero,
.bd-preview-frame,
.bd-work-showcase,
.bd-modal-stage,
.bd-chat-demo,
.bd-friday-demo,
.bd-sheet-shell,
.bd-action-dock-demo,
.bd-device-frame,
.bd-token-card,
.bd-standards-nav-card {
border: 1px solid var(--bd-border);
border-radius: var(--bd-std-radius-lg);
background: var(--bd-theme-bg-ffffff, #fff);
box-shadow: var(--bd-std-shadow);
}
.bd-standards-hero {
background: linear-gradient(135deg, var(--bd-theme-bg-1f6fe5-14, rgba(31, 111, 229, 0.08)), var(--bd-theme-bg-f0ca00-1a, rgba(240, 202, 0, 0.10))) !important;
}
.bd-standards-eyebrow,
.bd-class-pill,
.bd-id-badge,
.bd-std-badge,
.bd-std-chip,
.bd-std-status,
.bd-inline-code,
.bd-sheet-tag,
.bd-table-context-chip {
display: inline-flex;
align-items: center;
gap: 0.42rem;
border: 1px solid var(--bd-border);
border-radius: var(--bd-std-radius-sm);
background: var(--bd-theme-bg-ffffff, #fff);
color: var(--bd-text);
line-height: 1.15;
}
.bd-standards-eyebrow {
padding: 0.38rem 0.68rem;
font-size: 0.76rem;
font-weight: 700;
letter-spacing: 0.08em;
}
.bd-standards-title {
margin: 0.95rem 0 0.7rem;
font-size: clamp(1.95rem, 2.4vw, 2.95rem);
line-height: 1.02;
font-weight: 800;
}
.bd-standards-copy {
max-width: 60rem;
margin: 0;
color: var(--bd-muted);
line-height: 1.55;
}
.bd-chip-row,
.bd-class-stack,
.bd-inline-list,
.bd-inline-actions,
.bd-title-row,
.bd-table-toolbar,
.bd-table-context,
.bd-sheet-toolbar,
.bd-sheet-footer,
.bd-chat-demo__footer,
.bd-friday-demo__footer,
.bd-modal-window__footer,
.bd-workflow-bar,
.bd-work-nav-primary,
.bd-work-subnav,
.bd-service-hub-nav,
.bd-metric-row,
.bd-nav-demo-card__body {
display: flex;
align-items: center;
gap: 0.58rem;
flex-wrap: wrap;
}
.bd-class-pill,
.bd-inline-code {
padding: 0.28rem 0.52rem;
font-size: 0.76rem;
font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
background: var(--bd-theme-bg-0f172a-0a, rgba(15, 23, 42, 0.04));
}
.bd-id-badge,
.bd-std-badge,
.bd-std-chip,
.bd-std-status,
.bd-sheet-tag,
.bd-table-context-chip {
padding: 0.34rem 0.66rem;
font-size: 0.78rem;
font-weight: 700;
}
.bd-id-badge {
background: var(--bd-theme-bg-f8f9fa-f0, rgba(248, 249, 250, 0.94));
color: var(--bd-theme-fg-343a40, #343a40);
}
.bd-id-badge.is-overdue {
background: var(--bd-theme-bg-b3261e-1a, rgba(179, 38, 30, 0.10));
border-color: var(--bd-theme-border-b3261e-57, rgba(179, 38, 30, 0.34));
color: var(--bd-theme-fg-8c241a, #8c241a);
}
.bd-std-chip {
font-size: 0.75rem;
background: var(--bd-theme-bg-0f172a-0a, rgba(15, 23, 42, 0.04));
}
.bd-std-badge.is-muted,
.bd-std-chip.is-muted,
.bd-std-status.is-muted,
.bd-sheet-tag.is-muted,
.bd-table-context-chip {
background: var(--bd-std-muted-surface);
}
.bd-std-badge.is-good,
.bd-std-chip.is-good,
.bd-std-status.is-good,
.bd-sheet-tag.is-good {
background: var(--bd-std-good-surface);
border-color: var(--bd-std-good-border);
color: var(--bd-theme-fg-145522, #145522);
}
.bd-std-badge.is-info,
.bd-std-chip.is-info,
.bd-std-status.is-info,
.bd-sheet-tag.is-info {
background: var(--bd-std-info-surface);
border-color: var(--bd-std-info-border);
color: var(--bd-theme-fg-184ea5, #184ea5);
}
.bd-std-badge.is-warn,
.bd-std-chip.is-warn,
.bd-std-status.is-warn,
.bd-sheet-tag.is-warn {
background: var(--bd-std-warn-surface);
border-color: var(--bd-std-warn-border);
color: var(--bd-theme-fg-7a4f00, #7a4f00);
}
.bd-std-badge.is-bad,
.bd-std-chip.is-bad,
.bd-std-status.is-bad,
.bd-sheet-tag.is-bad {
background: var(--bd-std-danger-surface);
border-color: var(--bd-std-danger-border);
color: var(--bd-theme-fg-8c241a, #8c241a);
}
.bd-std-note {
padding: 0.85rem 1rem;
border: 1px solid var(--bd-theme-border-0f172a-1a, rgba(15, 23, 42, 0.10));
border-radius: var(--bd-std-radius-md);
background: var(--bd-theme-bg-0f172a-08, rgba(15, 23, 42, 0.03));
color: var(--bd-muted);
font-size: 0.88rem;
line-height: 1.45;
}
.bd-standards-nav-card {
position: sticky;
top: calc(var(--bd-pwa-top, 0px) + var(--bd-topbar-h, 70px) + 1rem);
}
.bd-standards-nav {
display: grid;
gap: 0.45rem;
}
.bd-standards-nav a {
display: flex;
align-items: center;
justify-content: space-between;
gap: 0.75rem;
padding: 0.6rem 0.72rem;
border-radius: 12px;
border: 1px solid transparent;
color: var(--bd-text);
text-decoration: none;
transition: background-color 0.15s ease, border-color 0.15s ease, transform 0.15s ease;
}
.bd-standards-nav a:hover {
background: var(--bd-theme-bg-0f172a-0d, rgba(15, 23, 42, 0.05));
border-color: var(--bd-theme-border-0f172a-1a, rgba(15, 23, 42, 0.10));
transform: translateX(2px);
}
.bd-principles {
display: grid;
gap: 0.66rem;
padding-left: 1.1rem;
margin: 0;
}
.bd-principles li {
color: var(--bd-muted);
line-height: 1.45;
}
.bd-section-header {
display: flex;
align-items: flex-start;
justify-content: space-between;
gap: 1rem;
flex-wrap: wrap;
margin-bottom: 1rem;
}
.bd-section-title {
margin: 0;
font-size: 1.28rem;
font-weight: 800;
color: var(--bd-text);
}
.bd-section-copy {
margin: 0.36rem 0 0;
color: var(--bd-muted);
max-width: 56rem;
line-height: 1.52;
}
.bd-preview-frame {
padding: 1rem;
}
.bd-grid-3,
.bd-grid-2,
.bd-chat-layout,
.bd-sheet-layout,
.bd-device-grid,
.bd-showcase-grid,
.bd-modal-examples,
.bd-token-grid {
display: grid;
gap: 0.9rem;
}
.bd-grid-3,
.bd-device-grid,
.bd-modal-examples,
.bd-token-grid {
grid-template-columns: repeat(3, minmax(0, 1fr));
}
.bd-grid-2,
.bd-chat-layout,
.bd-sheet-layout,
.bd-showcase-grid {
grid-template-columns: repeat(2, minmax(0, 1fr));
}
.bd-token-card {
padding: 0.95rem;
}
.bd-token-card__chip {
height: 3rem;
border-radius: 12px;
border: 1px solid var(--bd-theme-border-000000-14, rgba(0, 0, 0, 0.08));
margin-bottom: 0.8rem;
}
.bd-token-card__chip.bg-surface { background: var(--bd-bg); }
.bd-token-card__chip.bg-soft { background: var(--bd-soft); }
.bd-token-card__chip.bg-border { background: var(--bd-border); }
.bd-token-card__chip.bg-text { background: var(--bd-text); }
.bd-token-card__chip.bg-muted-text { background: var(--bd-muted); }
.bd-token-card__chip.bg-muted-surface { background: var(--bd-std-muted-surface); }
.bd-token-card__chip.bg-good-surface { background: var(--bd-std-good-surface); }
.bd-token-card__chip.bg-info-surface { background: var(--bd-std-info-surface); }
.bd-token-card__chip.bg-warn-surface { background: var(--bd-std-warn-surface); }
.bd-token-card__chip.bg-danger-surface { background: var(--bd-std-danger-surface); }
.bd-token-card__label {
font-size: 0.88rem;
font-weight: 700;
}
.bd-token-card__value {
margin-top: 0.22rem;
color: var(--bd-muted);
font-size: 0.78rem;
font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
}
.bd-spacing-scale {
display: flex;
align-items: flex-end;
gap: 0.75rem;
flex-wrap: wrap;
}
.bd-space-chip {
display: flex;
flex-direction: column;
align-items: center;
gap: 0.45rem;
min-width: 60px;
}
.bd-space-chip__bar {
width: 22px;
border-radius: 999px;
background: var(--bd-theme-bg-111111, #111);
}
.bd-space-chip__meta {
font-size: 0.76rem;
color: var(--bd-muted);
font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
}
.bd-type-demo {
display: grid;
gap: 0.65rem;
}
.bd-type-line {
display: flex;
align-items: baseline;
gap: 0.75rem;
flex-wrap: wrap;
}
.bd-type-line__tag {
min-width: 72px;
font-size: 0.72rem;
letter-spacing: 0.08em;
color: var(--bd-muted);
font-weight: 700;
}
.bd-type-line__sample {
color: var(--bd-text);
font-weight: 700;
}
.sample-xl { font-size: 2rem; line-height: 1.04; }
.sample-lg { font-size: 1.45rem; line-height: 1.1; }
.sample-md { font-size: 1.08rem; line-height: 1.25; }
.sample-sm { font-size: 0.92rem; line-height: 1.4; }
.bd-theme-preview {
min-height: 100%;
padding: 1rem;
border-radius: var(--bd-std-radius-lg);
border: 1px solid var(--bd-border);
display: grid;
gap: 0.8rem;
}
.bd-theme-preview--light {
background: var(--bd-theme-bg-ffffff, #fff);
color: var(--bd-theme-fg-111827, #111827);
}
.bd-theme-preview--dark {
background: var(--bd-theme-bg-0f172a, #0f172a);
border-color: var(--bd-theme-border-ffffff-1f, rgba(255, 255, 255, 0.12));
color: var(--bd-theme-fg-f8fafc, #f8fafc);
}
.bd-theme-preview--dark .bd-std-badge,
.bd-theme-preview--dark .bd-std-chip,
.bd-theme-preview--dark .bd-std-status,
.bd-theme-preview--dark .bd-id-badge {
background: var(--bd-theme-bg-ffffff-14, rgba(255, 255, 255, 0.08));
color: var(--bd-theme-fg-f8fafc, #f8fafc);
border-color: var(--bd-theme-border-ffffff-2e, rgba(255, 255, 255, 0.18));
}
.bd-work-showcase {
overflow: hidden;
}
.bd-work-showcase__header {
padding: 1.05rem 1.05rem 0.95rem;
border-bottom: 1px solid var(--bd-theme-border-0f172a-14, rgba(15, 23, 42, 0.08));
background: linear-gradient(180deg, var(--bd-theme-bg-ffffff-fa, rgba(255,255,255,0.98)), var(--bd-theme-bg-f8fafc-f5, rgba(248,250,252,0.96)));
}
.bd-work-showcase__title {
display: flex;
align-items: center;
gap: 0.7rem;
flex-wrap: wrap;
}
.bd-work-showcase__body {
padding: 1rem;
display: grid;
gap: 1rem;
}
.bd-work-overview-card,
.bd-map-card,
.bd-workflow-card,
.bd-nav-demo-card,
.bd-metric-card {
border: 1px solid var(--bd-theme-border-0f172a-1a, rgba(15, 23, 42, 0.10));
border-radius: 16px;
background: var(--bd-theme-bg-ffffff, #fff);
overflow: hidden;
}
.bd-work-overview-card__head,
.bd-map-card__head,
.bd-workflow-card__head {
padding: 0.75rem 0.95rem;
border-bottom: 1px solid var(--bd-theme-border-0f172a-1a, rgba(15, 23, 42, 0.10));
font-weight: 700;
display: flex;
align-items: center;
gap: 0.5rem;
}
.bd-work-overview-card__body,
.bd-map-card__body,
.bd-workflow-card__body,
.bd-nav-demo-card__body,
.bd-metric-card {
padding: 0.95rem;
}
.bd-metric-card {
border: 0;
background: transparent;
box-shadow: none;
padding: 0.15rem 0.35rem;
}
.bd-metric__label {
font-size: 0.76rem;
color: var(--bd-muted);
}
.bd-metric__value {
margin-top: 0.22rem;
font-size: 1.1rem;
font-weight: 700;
color: var(--bd-text);
}
.bd-map-card__canvas {
height: 240px;
border: 1px solid var(--bd-theme-border-0f172a-1f, rgba(15, 23, 42, 0.12));
border-radius: 14px;
background:
linear-gradient(0deg, var(--bd-theme-bg-ffffff-94, rgba(255,255,255,0.58)), var(--bd-theme-bg-ffffff-94, rgba(255,255,255,0.58))),
radial-gradient(circle at 70% 32%, var(--bd-theme-bg-e15759-d9, rgba(225, 87, 89, 0.85)) 0 6px, transparent 7px),
radial-gradient(circle at 48% 70%, var(--bd-theme-bg-0f172a-e0, rgba(15, 23, 42, 0.88)) 0 6px, transparent 7px),
linear-gradient(115deg, var(--bd-theme-bg-eae7dd, #eae7dd) 0%, var(--bd-theme-bg-e1ded3, #e1ded3) 22%, var(--bd-theme-bg-ece7de, #ece7de) 24%, var(--bd-theme-bg-ece7de, #ece7de) 54%, var(--bd-theme-bg-ded9cf, #ded9cf) 55%, var(--bd-theme-bg-efe9de, #efe9de) 100%);
position: relative;
overflow: hidden;
}
.bd-map-card__canvas::after {
content: "Map standard";
position: absolute;
left: 0.85rem;
bottom: 0.8rem;
font-size: 0.8rem;
color: var(--bd-theme-fg-0f172a-8c, rgba(15, 23, 42, 0.55));
}
.bd-map-card__address {
margin-top: 0.75rem;
color: var(--bd-muted);
}
.bd-map-card__route {
margin-top: 0.75rem;
}
.bd-workflow-bar {
padding: 0.35rem 0;
border-bottom: 1px solid var(--bd-theme-border-0f172a-14, rgba(15, 23, 42, 0.08));
margin-bottom: 0.9rem;
}
.bd-workflow-item {
display: inline-flex;
align-items: center;
gap: 0.5rem;
font-size: 0.95rem;
color: var(--bd-text);
}
.bd-workflow-square {
width: 16px;
height: 16px;
border-radius: 4px;
border: 1px solid var(--bd-border);
background: var(--bd-theme-bg-ffffff, #fff);
}
.bd-workflow-square.is-good { background: var(--bd-std-good-surface); border-color: var(--bd-std-good-border); }
.bd-workflow-square.is-warn { background: var(--bd-std-warn-surface); border-color: var(--bd-std-warn-border); }
.bd-workflow-square.is-bad { background: var(--bd-std-danger-surface); border-color: var(--bd-std-danger-border); }
.bd-work-nav-primary {
gap: 1.6rem;
padding-bottom: 0.45rem;
border-bottom: 2px solid var(--bd-theme-border-0f172a-1a, rgba(15, 23, 42, 0.10));
}
.bd-work-nav-primary__link {
display: inline-flex;
align-items: center;
gap: 0.45rem;
padding-bottom: 0.5rem;
color: var(--bd-text);
font-size: 0.98rem;
font-weight: 600;
border-bottom: 4px solid transparent;
}
.bd-work-nav-primary__link.is-active {
border-bottom-color: var(--bd-theme-border-e6c44f, #e6c44f);
}
.bd-work-subnav {
padding: 0.7rem;
border: 1px solid var(--bd-theme-border-0f172a-1a, rgba(15, 23, 42, 0.10));
border-radius: 14px;
background: var(--bd-theme-bg-f8fafc-d1, rgba(248, 250, 252, 0.82));
}
.bd-work-subnav__label {
color: var(--bd-theme-fg-8b8b8b, #8b8b8b);
font-weight: 700;
letter-spacing: 0.04em;
margin-right: 0.2rem;
font-size: 0.76rem;
line-height: 1.1;
}
.bd-work-subnav__link {
display: inline-flex;
align-items: center;
gap: 0.45rem;
padding: 0.55rem 0.78rem;
border-radius: 10px;
color: var(--bd-text);
font-weight: 600;
}
.bd-work-subnav__link.is-active {
background: var(--bd-std-warn-soft);
box-shadow: inset 0 -2px 0 var(--bd-theme-shadow-e6c44f, #e6c44f);
}
.bd-service-hub-nav__link {
display: inline-flex;
align-items: center;
gap: 0.45rem;
padding: 0.62rem 0.88rem;
border-radius: 10px;
border: 1px solid var(--bd-theme-border-0f172a-29, rgba(15, 23, 42, 0.16));
background: var(--bd-theme-bg-ffffff, #fff);
color: var(--bd-text);
font-weight: 600;
}
.bd-service-hub-nav__link.is-active {
background: var(--bd-theme-bg-18213d, #18213d);
border-color: var(--bd-theme-border-18213d, #18213d);
color: var(--bd-theme-fg-ffffff, #fff);
}
.bd-choice-card-tight,
.bd-choice-card-std {
position: relative;
border: 1px solid var(--bd-theme-border-0f172a-24, rgba(15, 23, 42, 0.14));
border-radius: 16px;
background: var(--bd-theme-bg-ffffff, #fff);
transition: border-color 0.15s ease, transform 0.15s ease, box-shadow 0.15s ease, background-color 0.15s ease;
}
.bd-choice-card-tight {
padding: 0.95rem;
min-height: 126px;
}
.bd-choice-card-std {
padding: 1rem;
min-height: 190px;
display: grid;
gap: 0.7rem;
}
.bd-choice-card-tight.is-active,
.bd-choice-card-std.is-active {
background: linear-gradient(180deg, var(--bd-theme-bg-f0ca00-38, rgba(240, 202, 0, 0.22)), var(--bd-theme-bg-ffffff-fa, rgba(255,255,255,0.98)));
border-color: var(--bd-std-warn-soft-border);
box-shadow: 0 10px 18px var(--bd-theme-shadow-d6b756-21, rgba(214, 183, 86, 0.13));
}
.bd-choice-card-tight.is-active::after,
.bd-choice-card-std.is-active::after {
content: "";
position: absolute;
left: 14px;
right: 14px;
top: 0;
height: 4px;
border-radius: 0 0 999px 999px;
background: var(--bd-theme-bg-e6c44f, #e6c44f);
}
.bd-choice-card-tight:hover,
.bd-choice-card-std:hover {
transform: translateY(-1px);
}
.bd-choice-card__row,
.bd-choice-card__top {
display: flex;
align-items: flex-start;
gap: 0.68rem;
}
.bd-choice-card__icon {
display: inline-flex;
align-items: center;
justify-content: center;
flex-shrink: 0;
font-size: 1.05rem;
line-height: 1;
color: var(--bd-theme-fg-495057, #495057);
margin-top: 0.05rem;
}
.bd-choice-card__title {
font-weight: 700;
color: var(--bd-text);
}
.bd-choice-card__desc {
color: var(--bd-muted);
font-size: 0.84rem;
line-height: 1.42;
}
.bd-form-grid {
display: grid;
grid-template-columns: repeat(12, minmax(0, 1fr));
gap: 0.85rem;
}
.bd-form-grid > .span-3 { grid-column: span 3; }
.bd-form-grid > .span-4 { grid-column: span 4; }
.bd-form-grid > .span-5 { grid-column: span 5; }
.bd-form-grid > .span-6 { grid-column: span 6; }
.bd-form-grid > .span-7 { grid-column: span 7; }
.bd-form-grid > .span-8 { grid-column: span 8; }
.bd-form-grid > .span-12 { grid-column: span 12; }
.bd-field {
display: grid;
gap: 0.42rem;
}
.bd-field__label {
font-size: 0.82rem;
font-weight: 700;
color: var(--bd-text);
}
.bd-field__help {
font-size: 0.78rem;
color: var(--bd-muted);
line-height: 1.34;
}
.bd-input,
.bd-native-select__field,
.bd-textarea {
width: 100%;
border: 1px solid var(--bd-theme-border-0f172a-2e, rgba(15, 23, 42, 0.18));
border-radius: 14px;
background: var(--bd-theme-bg-ffffff, #fff);
color: var(--bd-text);
font-size: 0.92rem;
line-height: 1.35;
box-shadow: inset 0 1px 0 var(--bd-theme-shadow-ffffff-99, rgba(255, 255, 255, 0.6));
}
.bd-input,
.bd-native-select__field {
min-height: var(--bd-field-h);
height: var(--bd-field-h);
padding: 0 var(--bd-field-px);
border-radius: var(--bd-field-radius);
}
.bd-textarea {
min-height: 96px;
padding: 0.65rem 0.75rem;
border-radius: var(--bd-field-radius);
resize: vertical;
}
.bd-input:focus,
.bd-native-select__field:focus,
.bd-textarea:focus {
outline: none;
border-color: var(--bd-theme-border-0f172a-8c, rgba(15, 23, 42, 0.55));
box-shadow: 0 0 0 3px var(--bd-theme-shadow-0f172a-14, rgba(15, 23, 42, 0.08));
}
.bd-native-select {
position: relative;
}
.bd-native-select__field {
appearance: none;
-webkit-appearance: none;
padding-right: 2.8rem;
}
.bd-native-select__icon {
position: absolute;
right: 0.86rem;
top: 50%;
transform: translateY(-50%);
color: var(--bd-muted);
pointer-events: none;
}
.bd-check {
display: inline-flex;
align-items: center;
gap: 0.62rem;
flex-wrap: wrap;
color: var(--bd-text);
}
.bd-check input {
position: absolute;
opacity: 0;
pointer-events: none;
}
.bd-check__box {
width: 1.15rem;
height: 1.15rem;
border-radius: 6px;
border: 1.5px solid var(--bd-theme-border-111111, #111);
background: var(--bd-theme-bg-ffffff, #fff);
display: inline-flex;
align-items: center;
justify-content: center;
flex-shrink: 0;
}
.bd-check__box::after {
content: "";
width: 0.34rem;
height: 0.62rem;
border: solid var(--bd-theme-border-ffffff, #fff);
border-width: 0 2px 2px 0;
transform: rotate(45deg) scale(0.75);
opacity: 0;
}
.bd-check input:checked + .bd-check__box {
background: var(--bd-theme-bg-111111, #111);
border-color: var(--bd-theme-border-111111, #111);
}
.bd-check input:checked + .bd-check__box::after {
opacity: 1;
}
.bd-check__text {
font-size: 0.9rem;
font-weight: 600;
}
.bd-form-label-eyebrow {
display: inline-block;
font-size: 0.72rem;
letter-spacing: 0.08em;
font-weight: 600;
color: var(--bd-muted);
}
.bd-subtle-callout {
background: var(--bd-theme-bg-0f172a-0a, rgba(15, 23, 42, 0.04));
border: 1px dashed var(--bd-theme-border-0f172a-33, rgba(15, 23, 42, 0.2));
font-size: 0.85rem;
display: flex;
align-items: center;
gap: 0.5rem;
}
.bd-metric-tile {
min-width: 130px;
}
.bd-metric-tile.is-sm {
min-width: 110px;
}
.bd-metric-tile.is-md {
min-width: 120px;
}
.bd-metric-tile.is-lg {
min-width: 150px;
}
.bd-btn-chip {
display: inline-flex;
align-items: center;
justify-content: center;
gap: 0.35rem;
padding: 0.35rem 0.6rem;
font-weight: 600;
font-size: 0.875rem;
border: 1px solid var(--bd-theme-border-000000, #000);
border-radius: 0.5rem;
background: var(--bd-theme-bg-f7f7f7, #f7f7f7);
color: var(--bd-theme-fg-111111, #111);
transition: background 0.15s ease, transform 0.05s ease, box-shadow 0.15s ease;
line-height: 1.1;
cursor: pointer;
}
.bd-btn-chip:hover { background: var(--bd-theme-bg-eeeeee, #eee); }
.bd-btn-chip:active { transform: translateY(1px); }
.bd-btn-chip:focus { outline: none; box-shadow: 0 0 0 2px var(--bd-theme-shadow-000000-26, rgba(0, 0, 0, 0.15)) inset; }
.bd-btn-good { background: var(--bd-theme-bg-f0f8f2, #f0f8f2); color: var(--bd-theme-fg-0d5e24, #0d5e24); }
.bd-btn-good:hover { background: var(--bd-theme-bg-e6f2e9, #e6f2e9); }
.bd-btn-warn { background: var(--bd-theme-bg-fff8ea, #fff8ea); color: var(--bd-theme-fg-8c6410, #8c6410); }
.bd-btn-warn:hover { background: var(--bd-theme-bg-fff2d6, #fff2d6); }
.bd-btn-danger { background: var(--bd-theme-bg-fff1f1, #fff1f1); color: var(--bd-theme-fg-111111, #111) !important; border-color: var(--bd-theme-border-000000, #000); }
.bd-btn-danger:hover { background: var(--bd-theme-bg-ffe4e4, #ffe4e4); color: var(--bd-theme-fg-000000, #000) !important; }
.bd-module-nav {
padding: 1.35rem 1.5rem;
border-radius: 1.25rem;
border: 1px solid var(--bd-theme-border-0f172a-1f, rgba(15, 23, 42, 0.12));
box-shadow: 0 14px 30px var(--bd-theme-shadow-0f172a-1a, rgba(15, 23, 42, 0.1));
background: var(--bd-theme-bg-ffffff, #ffffff);
}
.bd-module-nav__row {
display: flex;
flex-wrap: wrap;
align-items: center;
justify-content: space-between;
gap: 1rem;
}
.bd-module-nav__label {
font-size: 0.72rem;
letter-spacing: 0.08em;
font-weight: 600;
color: var(--bd-theme-fg-94a3b8, #94a3b8);
}
.bd-module-nav__actions {
display: flex;
flex-wrap: wrap;
gap: 0.65rem;
}
.bd-module-nav .bd-btn {
display: inline-flex;
align-items: center;
gap: 0.45rem;
font-weight: 600;
border-width: 1.5px;
}
.bd-module-nav .bd-btn i {
font-size: 0.95rem;
}
.bd-module-nav .bd-btn.is-active {
background: var(--bd-theme-bg-111827, #111827);
border-color: var(--bd-theme-border-111827, #111827);
color: var(--bd-theme-fg-ffffff, #ffffff);
box-shadow: 0 4px 12px var(--bd-theme-shadow-0f172a-2e, rgba(15, 23, 42, 0.18));
}
.bd-module-nav .bd-btn.is-active i {
color: inherit;
}
.bd-metric-hero {
padding: 1.5rem 1.75rem;
border-radius: 1.35rem;
border: 1px solid var(--bd-theme-border-0f172a-1f, rgba(15, 23, 42, 0.12));
box-shadow: 0 18px 36px var(--bd-theme-shadow-0f172a-14, rgba(15, 23, 42, 0.08));
background: var(--bd-theme-bg-ffffff, #ffffff);
}
.bd-metric-hero__grid {
display: flex;
flex-wrap: wrap;
align-items: flex-start;
gap: 1.5rem;
}
.bd-metric-hero__label {
min-width: 120px;
font-size: 0.72rem;
letter-spacing: 0.08em;
font-weight: 600;
color: var(--bd-theme-fg-94a3b8, #94a3b8);
}
.bd-metric-hero__metric {
min-width: 160px;
display: flex;
flex-direction: column;
gap: 0.35rem;
font-size: 0.9rem;
color: var(--bd-theme-fg-0f172a, #0f172a);
}
.bd-metric-hero__metric--range {
background: radial-gradient(circle at top left, var(--bd-theme-bg-1e293b, #1e293b), var(--bd-theme-bg-0f172a, #0f172a));
color: var(--bd-theme-fg-ffffff, #ffffff);
padding: 1rem 1.2rem;
border-radius: 1rem;
box-shadow: 0 16px 32px var(--bd-theme-shadow-0f172a-2e, rgba(15, 23, 42, 0.18));
}
.bd-metric-hero__metric-label {
font-size: 0.72rem;
letter-spacing: 0.08em;
font-weight: 600;
color: inherit;
}
.bd-metric-hero__metric--range .bd-metric-hero__metric-label {
color: var(--bd-theme-fg-ffffff-b8, rgba(255, 255, 255, 0.72));
}
.bd-metric-hero__value {
font-size: 1.6rem;
font-weight: 600;
color: inherit;
}
.bd-metric-hero__meta {
display: inline-flex;
align-items: center;
gap: 0.4rem;
font-size: 0.85rem;
color: var(--bd-theme-fg-0f172a-ad, rgba(15, 23, 42, 0.68));
}
.bd-metric-hero__metric--range .bd-metric-hero__meta {
color: var(--bd-theme-fg-ffffff-bf, rgba(255, 255, 255, 0.75));
}
.bd-metric-hero__meta i {
font-size: 0.9rem;
}
.bd-table-shell {
border: 1px solid var(--bd-border);
border-radius: var(--bd-std-radius-lg);
overflow: hidden;
background: var(--bd-theme-bg-ffffff, #fff);
box-shadow: var(--bd-std-shadow);
}
.bd-table-toolbar {
padding: 0.72rem 0.95rem;
border-bottom: 1px solid var(--bd-theme-border-0f172a-14, rgba(15, 23, 42, 0.08));
background: var(--bd-theme-bg-f8fafc-e0, rgba(248, 250, 252, 0.88));
justify-content: space-between;
}
.bd-table-shell__scroll {
overflow: auto;
}
.bd-demo-table {
width: 100%;
min-width: 860px;
border-collapse: separate;
border-spacing: 0;
}
.bd-demo-table thead th {
padding: 0.78rem 0.95rem;
font-size: 0.8rem;
letter-spacing: 0.04em;
color: var(--bd-muted);
border-bottom: 1px solid var(--bd-theme-border-0f172a-1a, rgba(15, 23, 42, 0.10));
background: var(--bd-theme-bg-ffffff-fa, rgba(255, 255, 255, 0.98));
}
.bd-demo-table tbody td {
padding: 0.85rem 0.95rem;
border-bottom: 1px solid var(--bd-theme-border-0f172a-14, rgba(15, 23, 42, 0.08));
vertical-align: top;
}
.bd-demo-table tbody tr:last-child td {
border-bottom: none;
}
.bd-demo-table__context td {
padding: 0.52rem 0.95rem;
background: var(--bd-theme-bg-1f6fe5-0d, rgba(31, 111, 229, 0.05));
border-bottom: 1px solid var(--bd-theme-border-1f6fe5-24, rgba(31, 111, 229, 0.14));
}
.bd-table-context {
justify-content: space-between;
}
.bd-table-context__copy {
display: flex;
align-items: center;
gap: 0.45rem;
font-weight: 700;
color: var(--bd-theme-fg-1f4f80, #1f4f80);
font-size: 0.84rem;
line-height: 1.2;
}
.bd-clear-x {
border: 0;
background: transparent;
color: var(--bd-theme-fg-111111, #111);
font-size: 1.2rem;
line-height: 1;
padding: 0;
}
.bd-action-strip {
display: inline-flex;
align-items: center;
border: 1px solid var(--bd-theme-border-0f172a-29, rgba(15, 23, 42, 0.16));
border-radius: 12px;
overflow: hidden;
background: var(--bd-theme-bg-ffffff, #fff);
}
.bd-action-strip__btn {
width: 32px;
height: 32px;
border: 0;
border-left: 1px solid var(--bd-theme-border-0f172a-1a, rgba(15, 23, 42, 0.10));
background: transparent;
color: var(--bd-theme-fg-111111, #111);
display: inline-flex;
align-items: center;
justify-content: center;
}
/* A strip button is a 32px square only when it is icon-only. The moment it
carries a text label the fixed width truncates it — the dispatch view
selector rendered "Day 3-Day Week Month" as four clipped 42px cells. */
.bd-action-strip__btn:has(span) {
width: auto;
min-width: 32px;
padding-inline: .65rem;
}
.bd-action-strip__btn:first-child {
border-left: 0;
}
.bd-action-strip__btn.is-danger {
color: var(--bd-theme-fg-cc334f, #cc334f);
}
.bd-action-strip__btn:hover {
background: var(--bd-theme-bg-0f172a-0a, rgba(15, 23, 42, 0.04));
}
.bd-demo-table__expand td {
background: var(--bd-theme-bg-0f172a-08, rgba(15, 23, 42, 0.03));
}
.bd-expand-panel {
display: grid;
gap: 0.8rem;
grid-template-columns: 1.5fr 1fr;
}
.bd-expand-card {
padding: 0.85rem 0.95rem;
border: 1px solid var(--bd-theme-border-0f172a-1f, rgba(15, 23, 42, 0.12));
border-radius: 14px;
background: var(--bd-theme-bg-ffffff, #fff);
}
.bd-modal-stage {
padding: 1rem;
background: radial-gradient(circle at top, var(--bd-theme-bg-1f6fe5-14, rgba(31, 111, 229, 0.08)), transparent 42%), var(--bd-theme-bg-0f172a-0a, rgba(15, 23, 42, 0.04));
}
.bd-modal-window {
width: min(760px, 100%);
margin: 0 auto;
border: 1px solid var(--bd-border);
border-radius: 20px;
background: var(--bd-theme-bg-ffffff, #fff);
box-shadow: var(--bd-std-shadow-lg);
overflow: hidden;
}
.bd-modal-window--confirm {
width: min(520px, 100%);
}
.bd-modal-window__header,
.bd-modal-window__footer {
padding: 0.85rem 1rem;
background: var(--bd-theme-bg-ffffff, #fff);
}
.bd-modal-window__header {
border-bottom: 1px solid var(--bd-theme-border-0f172a-1a, rgba(15, 23, 42, 0.10));
display: flex;
align-items: center;
justify-content: space-between;
gap: 0.85rem;
}
.bd-modal-window__body {
padding: 1rem;
background: var(--bd-theme-bg-f8fafc-d1, rgba(248, 250, 252, 0.82));
display: grid;
gap: 0.9rem;
}
.bd-modal-window__group {
border: 1px solid var(--bd-theme-border-0f172a-1a, rgba(15, 23, 42, 0.10));
border-radius: 14px;
background: var(--bd-theme-bg-ffffff, #fff);
padding: 0.95rem;
display: grid;
gap: 0.7rem;
}
.bd-modal-window__footer {
border-top: 1px solid var(--bd-theme-border-0f172a-1a, rgba(15, 23, 42, 0.10));
justify-content: space-between;
}
/* =========================================================
Reusable bridge primitives (module migration helpers)
========================================================= */
.bd-work-shell {
border: 1px solid var(--bd-border);
border-radius: var(--bd-std-radius-lg);
background: var(--bd-theme-bg-ffffff, #fff);
box-shadow: var(--bd-std-shadow);
}
.bd-work-shell__header {
display: flex;
align-items: flex-start;
justify-content: space-between;
gap: 0.9rem;
flex-wrap: wrap;
}
.bd-metric-strip {
display: flex;
align-items: stretch;
gap: 0.75rem;
flex-wrap: wrap;
}
.bd-metric-strip__item {
min-width: 120px;
text-align: center;
}
.bd-surface-subtle {
border: 1px solid var(--bd-border);
border-radius: var(--bd-std-radius-md);
background: var(--bd-theme-bg-f8fafc-d6, rgba(248, 250, 252, 0.84));
}
.bd-list-row {
transition: background-color .15s ease, box-shadow .15s ease;
}
.bd-list-row:hover {
background-color: var(--bd-theme-bg-fdfdfd, #fdfdfd);
box-shadow: 0 0 0 2px var(--bd-theme-shadow-000000-0a, #0000000a);
}
.bd-avatar {
background: var(--bd-theme-bg-ffffff, #fff);
vertical-align: middle;
}
.bd-action-strip--tight .bd-action-strip__btn {
width: 28px;
height: 26px;
}
.bd-action-strip__btn i {
font-size: 0.8rem;
}
.bd-action-strip__btn.is-danger:hover {
background: var(--bd-theme-bg-d9534f, #d9534f);
color: var(--bd-theme-fg-ffffff, #fff);
}
.bd-loading-dim {
opacity: .85;
}
/* CRM / cross-module bridge primitives */
.bd-modal-overlay {
position: fixed;
inset: 0;
background: var(--bd-theme-bg-000000-59, rgba(0, 0, 0, 0.35));
display: flex;
align-items: center;
justify-content: center;
padding: 16px;
z-index: 2000;
}
.bd-modal-panel {
width: min(760px, 96vw);
max-height: 92vh;
border-radius: var(--bd-std-radius-lg);
box-shadow: var(--bd-std-shadow-lg);
display: flex;
flex-direction: column;
position: relative;
overflow: hidden;
background: var(--bd-theme-bg-fafafa, #fafafa);
}
.bd-modal-header {
padding: 10px 12px;
display: flex;
align-items: center;
justify-content: space-between;
cursor: move;
user-select: none;
}
.bd-modal-body { padding: 12px; overflow: auto; flex: 1 1 auto; }
.bd-modal-footer { padding: 10px 12px; display: flex; align-items: center; gap: 10px; }
.bd-error-panel {
flex: 1 1 auto;
border: 1px solid var(--bd-theme-border-dc3545, #dc3545);
background: var(--bd-theme-bg-fdecea, #fdecea);
color: var(--bd-theme-fg-842029, #842029);
border-radius: 12px;
padding: 8px 10px;
max-width: 520px;
}
.bd-error-title { font-weight: 600; font-size: .85rem; margin-bottom: 4px; }
.bd-error-list { padding-left: 18px; font-size: .82rem; }
.bd-field { position: relative; }
.bd-field.bd-has-error input,
.bd-field.bd-has-error select,
.bd-field.bd-has-error textarea {
border-color: var(--bd-theme-border-dc3545, #dc3545) !important;
box-shadow: 0 0 0 .15rem var(--bd-theme-shadow-dc3545-1f, rgba(220, 53, 69, .12)) !important;
}
.bd-field.bd-has-error::after {
content: "";
position: absolute;
right: 10px;
top: 50%;
transform: translateY(-50%);
width: 8px;
height: 8px;
border-radius: 50%;
background: var(--bd-theme-bg-dc3545, #dc3545);
opacity: .9;
pointer-events: none;
}
.bd-resize-handle {
position: absolute;
right: 6px;
bottom: 6px;
width: 16px;
height: 16px;
cursor: nwse-resize;
opacity: .55;
background:
linear-gradient(135deg, transparent 0 45%, var(--bd-theme-bg-111111, #111) 45% 55%, transparent 55% 100%),
linear-gradient(135deg, transparent 0 65%, var(--bd-theme-bg-111111, #111) 65% 75%, transparent 75% 100%);
}
.bd-primary-wrap { display: flex; align-items: center; gap: 8px; }
.bd-switch { position: relative; width: 42px; height: 24px; display: inline-block; }
.bd-switch input { display: none; }
.bd-slider { position: absolute; inset: 0; background: var(--bd-theme-bg-e9ecef, #e9ecef); border: 1px solid var(--bd-theme-border-111111, #111); border-radius: 999px; transition: .15s ease; }
.bd-slider::before { content: ""; position: absolute; width: 18px; height: 18px; left: 3px; top: 2px; background: var(--bd-theme-bg-111111, #111); border-radius: 50%; transition: .15s ease; }
.bd-switch input:checked + .bd-slider { background: var(--bd-theme-bg-e6f4ea, #e6f4ea); }
.bd-switch input:checked + .bd-slider::before { transform: translateX(18px); background: var(--bd-theme-bg-146c43, #146c43); }
.bd-crm-company-list .bd-table-shell__scroll { overflow-x: auto; }
.bd-crm-company-row { overflow: visible; }
.bd-crm-company-row .card-body,
.bd-crm-company-detail .card-body { overflow: visible; }
.bd-crm-company-detail [id^="detail-row-"] .col-md-6.d-flex,
.bd-crm-company-detail [id^="detail-row-"] .card.flex-fill.d-flex.flex-column,
.bd-crm-company-detail [id^="detail-row-"] .card.flex-fill.d-flex.flex-column > .flex-grow-1 { min-height: 0; }
.bd-crm-company-detail [id^="detail-row-"] .card.flex-fill.d-flex.flex-column > .flex-grow-1 { overflow: auto; max-height: calc(100vh - 380px); }
.modal-panel .flex-grow-1 { overflow-y: auto; overflow-x: visible; }
.bd-portal-open .modal-overlay,
.bd-portal-open .modal-panel {
transform: none !important;
filter: none !important;
contain: initial !important;
will-change: auto !important;
}
.ts-dropdown {
position: fixed !important;
max-height: 260px;
overflow-y: auto;
pointer-events: auto;
}
.bd-address-suggestions-portal { pointer-events: auto; }
.collapse-toggle { cursor: pointer; }
.collapse-toggle i.fa-chevron-down,
.collapse-toggle i.fa-chevron-up { transition: transform .2s ease; }
.bd-company-modal { max-width: 1100px; }
@media (min-width: 1400px) {
.bd-company-modal { max-width: 1250px; }
}
#company-modal .bd-company-modal,
#service-company-modal .bd-company-modal { width: 100%; max-width: 1000px !important; }
@media (min-width: 1600px) {
#company-modal .bd-company-modal,
#service-company-modal .bd-company-modal { max-width: 1200px !important; }
}
.bd-error-summary {
position: sticky;
bottom: 50px;
left: 0;
right: 0;
z-index: 10;
margin: 0;
padding: 10px 14px;
background: var(--bd-theme-bg-f8d7da, #f8d7da);
border-color: var(--bd-theme-border-dc3545, #dc3545) !important;
border-width: 1px 0;
border-style: solid;
border-radius: 0;
}
@media (max-width: 576px) {
.bd-modal-panel { width: 96vw; border-radius: 16px; }
.bd-error-panel { max-width: 100%; }
.bd-modal-footer { flex-wrap: wrap; }
.bd-modal-footer .ms-auto { margin-left: 0 !important; width: 100%; justify-content: flex-end; }
}
@media (max-width: 767.98px) {
.bd-crm-company-list .bd-crm-filter-form select,
.bd-crm-company-list .bd-crm-filter-form input { font-size: .9rem; }
.bd-crm-company-list .bd-crm-filter-form .btn,
.bd-crm-company-list .bd-crm-filter-form .input-group { width: 100%; }
.bd-crm-company-row .row { display: flex; flex-direction: column; gap: .35rem; }
.bd-crm-company-row .row > [class*="col-"] { width: 100%; max-width: 100%; flex: 0 0 100%; }
.bd-crm-company-row .text-end { text-align: left !important; margin-top: .5rem; }
}
.bd-confirm-title {
display: flex;
align-items: center;
gap: 0.7rem;
font-size: 1rem;
font-weight: 700;
}
.bd-confirm-title i {
font-size: 1.3rem;
}
.bd-confirm-title.is-danger i { color: var(--bd-theme-fg-ff4b63, #ff4b63); }
.bd-confirm-title.is-success i { color: var(--bd-theme-fg-18a05f, #18a05f); }
.bd-confirm-title.is-info i { color: var(--bd-theme-fg-1f6fe5, #1f6fe5); }
.bd-chat-demo,
.bd-friday-demo {
overflow: hidden;
min-height: 560px;
display: grid;
grid-template-rows: auto 1fr auto;
}
.bd-chat-demo__header,
.bd-friday-demo__header {
padding: 0.95rem 1rem;
border-bottom: 1px solid var(--bd-theme-border-0f172a-14, rgba(15, 23, 42, 0.08));
display: flex;
align-items: center;
justify-content: space-between;
gap: 0.75rem;
}
.bd-chat-demo__body {
display: grid;
grid-template-columns: 220px 1fr;
min-height: 0;
}
.bd-chat-demo__sidebar {
border-right: 1px solid var(--bd-theme-border-0f172a-14, rgba(15, 23, 42, 0.08));
background: var(--bd-theme-bg-f8fafc-e6, rgba(248, 250, 252, 0.9));
padding: 0.85rem;
display: grid;
gap: 0.75rem;
align-content: start;
}
.bd-chat-demo__thread,
.bd-friday-demo__thread {
padding: 0.95rem;
display: grid;
gap: 0.75rem;
align-content: start;
background: var(--bd-theme-bg-ffffff, #fff);
}
.bd-chat-demo__item,
.bd-chat-demo__message,
.bd-friday-demo__message {
border: 1px solid var(--bd-theme-border-0f172a-1a, rgba(15, 23, 42, 0.10));
border-radius: 18px;
background: var(--bd-theme-bg-ffffff, #fff);
}
.bd-chat-demo__item {
padding: 0.78rem;
}
.bd-chat-demo__item.is-active {
background: var(--bd-theme-bg-f6f3db, #f6f3db);
border-color: var(--bd-theme-border-e4d7a3, #e4d7a3);
}
.bd-chat-demo__message,
.bd-friday-demo__message {
padding: 0.85rem 0.95rem;
max-width: 92%;
}
.bd-chat-demo__message.is-self,
.bd-friday-demo__message.is-self {
margin-left: auto;
background: var(--bd-theme-bg-1f6fe5-14, rgba(31, 111, 229, 0.08));
}
.bd-friday-demo__message.is-friday {
background: var(--bd-theme-bg-0f172a-0a, rgba(15, 23, 42, 0.04));
}
.bd-chat-demo__footer,
.bd-friday-demo__footer {
padding: 0.9rem 1rem;
border-top: 1px solid var(--bd-theme-border-0f172a-14, rgba(15, 23, 42, 0.08));
background: var(--bd-theme-bg-f8fafc-db, rgba(248, 250, 252, 0.86));
}
.bd-chat-demo__composer,
.bd-friday-demo__composer {
display: flex;
align-items: stretch;
gap: 0.75rem;
width: 100%;
}
.bd-chat-demo__composer textarea,
.bd-friday-demo__composer textarea {
flex: 1 1 auto;
min-height: 82px;
}
.bd-friday-demo {
position: relative;
}
.bd-friday-demo__avatar {
width: 2rem;
height: 2rem;
border-radius: 12px;
background: var(--bd-theme-bg-f0ca00-2e, rgba(240, 202, 0, 0.18));
display: inline-flex;
align-items: center;
justify-content: center;
font-weight: 800;
}
.bd-friday-demo__resize {
position: absolute;
right: 0.8rem;
bottom: 0.75rem;
font-size: 0.8rem;
color: var(--bd-muted);
}
.bd-action-dock-demo {
position: relative;
min-height: 280px;
overflow: hidden;
background: linear-gradient(180deg, var(--bd-theme-bg-f8fafc-bf, rgba(248,250,252,0.75)), var(--bd-theme-bg-ffffff, rgba(255,255,255,1)));
}
.bd-action-dock-demo__toast {
position: absolute;
right: 1rem;
bottom: 5rem;
width: 340px;
max-width: calc(100% - 2rem);
}
.bd-action-dock-demo__bar {
position: absolute;
right: 1rem;
bottom: 1rem;
display: flex;
align-items: center;
gap: 0.3rem;
padding: 0.5rem 0.6rem;
border: 1px solid var(--bd-theme-border-000000, #000);
border-radius: 18px;
background: var(--bd-theme-bg-ffffff, #fff);
box-shadow: 0 14px 32px var(--bd-theme-shadow-000000-2e, rgba(0,0,0,.18));
}
.bd-action-dock-demo__btn {
width: 42px;
height: 42px;
border-radius: 10px;
border: 0;
background: transparent;
display: inline-flex;
align-items: center;
justify-content: center;
position: relative;
color: var(--bd-theme-fg-111111, #111);
}
.bd-action-dock-demo__btn.is-active::after {
content: "";
position: absolute;
left: 10px;
right: 10px;
bottom: 6px;
height: 3px;
border-radius: 999px;
background: var(--bd-theme-active-indicator);
box-shadow: 0 0 6px color-mix(in srgb, var(--bd-theme-active-indicator) 45%, transparent);
}
.bd-toast-card-demo {
border: 1px solid var(--bd-theme-border-000000, #000);
border-radius: 16px;
background: var(--bd-theme-bg-efe7d4, #efe7d4);
overflow: hidden;
box-shadow: 0 10px 26px var(--bd-theme-shadow-000000-29, rgba(0,0,0,.16));
}
.bd-toast-card-demo__head {
padding: 0.95rem 1rem 0.25rem;
display: flex;
align-items: flex-start;
justify-content: space-between;
gap: 0.75rem;
}
.bd-toast-card-demo__title {
font-size: 0.9rem;
font-weight: 800;
}
.bd-toast-card-demo__body {
padding: 0 1rem 0.8rem;
font-size: 0.84rem;
}
.bd-toast-card-demo__meter {
height: 6px;
margin: 0 1rem 0.8rem;
border-radius: 999px;
background: var(--bd-theme-bg-000000-14, rgba(0,0,0,.08));
overflow: hidden;
}
.bd-toast-card-demo__meter > span {
display: block;
width: 42%;
height: 100%;
background: var(--bd-theme-bg-000000, #000);
}
.bd-flow-grid {
display: grid;
grid-template-columns: 1fr auto 1fr auto 1fr auto 1fr;
gap: 0.7rem;
align-items: stretch;
}
.bd-flow-card {
position: relative;
padding: 0.95rem;
border: 1px solid var(--bd-theme-border-0f172a-24, rgba(15, 23, 42, 0.14));
border-radius: 18px;
background: var(--bd-theme-bg-ffffff, #fff);
display: grid;
gap: 0.58rem;
box-shadow: var(--bd-std-shadow);
overflow: hidden;
}
.bd-flow-card__eyebrow {
font-size: 0.72rem;
letter-spacing: 0.08em;
color: var(--bd-muted);
font-weight: 700;
}
.bd-flow-card__title {
font-weight: 700;
font-size: 0.96rem;
}
.bd-flow-card__copy {
color: var(--bd-muted);
font-size: 0.84rem;
line-height: 1.4;
}
.bd-flow-card.is-complete { background: var(--bd-std-good-surface); border-color: var(--bd-std-good-border); }
.bd-flow-card.is-alert { background: var(--bd-std-warn-surface); border-color: var(--bd-std-warn-border); }
.bd-flow-card.is-current { background: var(--bd-theme-bg-1f6fe5-14, rgba(31, 111, 229, 0.08)); border-color: var(--bd-theme-border-1f6fe5-61, rgba(31, 111, 229, 0.38)); }
.bd-flow-card.is-current::after {
content: "";
position: absolute;
inset: 0;
border-radius: inherit;
box-shadow: inset 0 0 0 1px var(--bd-theme-shadow-1f6fe5-38, rgba(31,111,229,.22));
animation: bd-current-step-pulse 1.7s ease-in-out infinite;
}
@keyframes bd-current-step-pulse {
0% { box-shadow: inset 0 0 0 1px var(--bd-theme-shadow-1f6fe5-2e, rgba(31,111,229,.18)), 0 0 0 0 var(--bd-theme-shadow-1f6fe5-24, rgba(31,111,229,.14)); }
50% { box-shadow: inset 0 0 0 1px var(--bd-theme-shadow-1f6fe5-47, rgba(31,111,229,.28)), 0 0 0 7px var(--bd-theme-shadow-1f6fe5-0a, rgba(31,111,229,.04)); }
100% { box-shadow: inset 0 0 0 1px var(--bd-theme-shadow-1f6fe5-2e, rgba(31,111,229,.18)), 0 0 0 0 var(--bd-theme-shadow-1f6fe5-24, rgba(31,111,229,.14)); }
}
.bd-flow-arrow {
display: flex;
align-items: center;
justify-content: center;
min-width: 42px;
color: var(--bd-muted);
font-size: 1.2rem;
}
.bd-sheet-shell {
overflow: hidden;
}
.bd-sheet-head,
.bd-sheet-body,
.bd-sheet-footer {
padding: 0.95rem 1rem;
}
.bd-sheet-head {
border-bottom: 1px solid var(--bd-theme-border-0f172a-14, rgba(15, 23, 42, 0.08));
}
.bd-sheet-body {
background: var(--bd-theme-bg-f8fafc-bd, rgba(248, 250, 252, 0.74));
display: grid;
gap: 0.95rem;
}
.bd-sheet-shell__title {
display: flex;
align-items: center;
gap: 0.65rem;
flex-wrap: wrap;
}
.bd-sheet-grid-wrap {
border: 1px solid var(--bd-theme-border-0f172a-1f, rgba(15, 23, 42, 0.12));
border-radius: 18px;
overflow: auto;
background: var(--bd-theme-bg-ffffff, #fff);
}
.bd-sheet-table {
width: 100%;
min-width: 980px;
border-collapse: separate;
border-spacing: 0;
}
.bd-sheet-table thead th,
.bd-sheet-table tbody td {
padding: 0.78rem 0.82rem;
border-bottom: 1px solid var(--bd-theme-border-0f172a-1a, rgba(15, 23, 42, 0.10));
vertical-align: middle;
}
.bd-sheet-table thead th {
font-size: 0.8rem;
color: var(--bd-muted);
letter-spacing: 0.04em;
background: var(--bd-theme-bg-f8fafc-f0, rgba(248, 250, 252, 0.94));
}
.bd-sheet-table__section td {
font-weight: 800;
letter-spacing: 0.05em;
color: var(--bd-theme-fg-364152, #364152);
background: var(--bd-theme-bg-f8fafc-c7, rgba(248, 250, 252, 0.78));
}
.bd-sheet-table__subtotal td {
background: var(--bd-theme-bg-0f172a-05, rgba(15, 23, 42, 0.02));
font-weight: 700;
}
.bd-sheet-table__add td {
background: var(--bd-theme-bg-ffffff-f5, rgba(255,255,255,0.96));
color: var(--bd-theme-fg-2563eb, #2563eb);
font-weight: 600;
}
.bd-sheet-table__empty td {
color: var(--bd-theme-fg-9ca3af, #9ca3af);
font-style: italic;
}
.bd-sheet-oneoff {
display: inline-flex;
align-items: center;
gap: 0.35rem;
padding: 0.2rem 0.45rem;
border: 1px solid var(--bd-theme-border-0f172a-2e, rgba(15, 23, 42, 0.18));
border-radius: 12px;
font-size: 0.72rem;
font-weight: 700;
background: var(--bd-theme-bg-f8f9fa-f2, rgba(248, 249, 250, 0.95));
}
.bd-sheet-popover {
width: 360px;
max-width: 100%;
border: 1px solid var(--bd-theme-border-000000, #000);
border-radius: 14px;
overflow: hidden;
background: var(--bd-theme-bg-ffffff, #fff);
box-shadow: var(--bd-std-shadow-lg);
}
.bd-sheet-popover__head,
.bd-sheet-popover__body {
padding: 0.7rem 0.85rem;
}
.bd-sheet-popover__head {
border-bottom: 1px solid var(--bd-theme-border-0f172a-14, rgba(15, 23, 42, 0.08));
color: var(--bd-muted);
}
.bd-sheet-signature {
border: 1px solid var(--bd-theme-border-0f172a-1a, rgba(15, 23, 42, 0.10));
border-radius: 18px;
background: var(--bd-theme-bg-ffffff, #fff);
padding: 0.95rem;
display: grid;
gap: 0.8rem;
}
.bd-signature-pad {
border: 1px dashed var(--bd-theme-border-0f172a-2e, rgba(15, 23, 42, 0.18));
border-radius: 16px;
background: linear-gradient(180deg, var(--bd-theme-bg-ffffff, rgba(255,255,255,1)), var(--bd-theme-bg-f8fafc-e6, rgba(248,250,252,0.9)));
min-height: 180px;
position: relative;
}
.bd-signature-pad::after {
content: "Customer signature surface";
position: absolute;
left: 1rem;
bottom: 0.8rem;
font-size: 0.78rem;
color: var(--bd-muted);
}
.bd-sheet-summary-bar {
display: flex;
align-items: center;
gap: 0.4rem;
justify-content: flex-end;
flex-wrap: wrap;
}
.bd-sheet-summary-bar > span {
display: inline-flex;
align-items: center;
padding: 0.34rem 0.58rem;
border-radius: 12px;
border: 1px solid var(--bd-theme-border-0f172a-2e, rgba(15, 23, 42, 0.18));
background: var(--bd-theme-bg-f8f9fa-f2, rgba(248,249,250,0.95));
font-weight: 700;
}
.bd-device-frame {
padding: 0.95rem;
}
.bd-device-frame__head {
display: flex;
align-items: center;
justify-content: space-between;
gap: 0.75rem;
flex-wrap: wrap;
}
.bd-device-frame__label {
font-size: 0.94rem;
font-weight: 700;
}
.bd-device-frame__meta {
color: var(--bd-muted);
font-size: 0.8rem;
line-height: 1.35;
}
.bd-device-screen {
margin-top: 0.8rem;
border: 1px solid var(--bd-theme-border-0f172a-1f, rgba(15, 23, 42, 0.12));
border-radius: 16px;
background: var(--bd-theme-bg-0f172a-08, rgba(15, 23, 42, 0.03));
padding: 0.75rem;
min-height: 220px;
display: grid;
gap: 0.65rem;
}
.bd-device-screen__bar {
display: flex;
gap: 0.45rem;
flex-wrap: wrap;
}
.bd-device-pill {
height: 0.55rem;
border-radius: 999px;
background: var(--bd-theme-bg-0f172a-1f, rgba(15, 23, 42, 0.12));
}
.w-20 { width: 20%; }
.w-35 { width: 35%; }
.w-55 { width: 55%; }
.w-70 { width: 70%; }
.w-100 { width: 100%; }
.bd-responsive-demo-grid {
display: grid;
grid-template-columns: repeat(2, minmax(0, 1fr));
gap: 0.65rem;
}
.bd-responsive-demo-tile {
padding: 0.75rem;
border-radius: 12px;
border: 1px solid var(--bd-theme-border-0f172a-14, rgba(15, 23, 42, 0.08));
background: var(--bd-theme-bg-ffffff, #fff);
font-size: 0.84rem;
color: var(--bd-text);
font-weight: 700;
}
[data-theme="dark"] .bd-preview-frame,
[data-theme="dark"] .bd-modal-stage,
[data-theme="dark"] .bd-device-screen,
[data-theme="dark"] .bd-sheet-body {
background-color: var(--bd-theme-bg-ffffff-0a, rgba(255, 255, 255, 0.04));
}
[data-theme="dark"] .bd-work-showcase,
[data-theme="dark"] .bd-chat-demo,
[data-theme="dark"] .bd-friday-demo,
[data-theme="dark"] .bd-sheet-shell,
[data-theme="dark"] .bd-action-dock-demo,
[data-theme="dark"] .bd-device-frame,
[data-theme="dark"] .bd-flow-card,
[data-theme="dark"] .bd-expand-card,
[data-theme="dark"] .bd-modal-window,
[data-theme="dark"] .bd-modal-window__group,
[data-theme="dark"] .bd-sheet-grid-wrap,
[data-theme="dark"] .bd-token-card,
[data-theme="dark"] .bd-work-overview-card,
[data-theme="dark"] .bd-map-card,
[data-theme="dark"] .bd-workflow-card,
[data-theme="dark"] .bd-nav-demo-card,
[data-theme="dark"] .bd-metric-card,
[data-theme="dark"] .bd-responsive-demo-tile {
background: var(--bd-bg);
}
@media (max-width: 1199.98px) {
.bd-standards-nav-card {
position: static;
}
.bd-grid-3,
.bd-device-grid,
.bd-token-grid,
.bd-modal-examples {
grid-template-columns: repeat(2, minmax(0, 1fr));
}
}
@media (max-width: 991.98px) {
.bd-choice-grid,
.bd-chat-layout,
.bd-sheet-layout,
.bd-showcase-grid,
.bd-token-grid,
.bd-modal-examples {
grid-template-columns: 1fr;
}
.bd-chat-demo__body,
.bd-expand-panel,
.bd-flow-grid {
grid-template-columns: 1fr;
}
.bd-flow-arrow {
transform: rotate(90deg);
min-height: 26px;
}
.bd-form-grid > .span-3,
.bd-form-grid > .span-4,
.bd-form-grid > .span-5,
.bd-form-grid > .span-6,
.bd-form-grid > .span-7,
.bd-form-grid > .span-8 {
grid-column: span 6;
}
}
@media (max-width: 767.98px) {
.bd-grid-3,
.bd-grid-2,
.bd-device-grid,
.bd-responsive-demo-grid,
.bd-token-grid,
.bd-modal-examples {
grid-template-columns: 1fr;
}
.bd-form-grid > .span-3,
.bd-form-grid > .span-4,
.bd-form-grid > .span-5,
.bd-form-grid > .span-6,
.bd-form-grid > .span-7,
.bd-form-grid > .span-8,
.bd-form-grid > .span-12 {
grid-column: span 12;
}
.bd-demo-table {
min-width: 740px;
}
.bd-sheet-table {
min-width: 980px;
}
.bd-action-dock-demo__toast {
left: 1rem;
right: 1rem;
width: auto;
}
}
/* =========================================================
Standards refinement overrides
========================================================= */
.bd-standards-hero,
.bd-preview-frame,
.bd-work-showcase,
.bd-modal-stage,
.bd-chat-demo,
.bd-friday-demo,
.bd-sheet-shell,
.bd-action-dock-demo,
.bd-device-frame,
.bd-token-card,
.bd-standards-nav-card {
border: 1px solid var(--bd-theme-border-000000, #000) !important;
}
.bd-standards-title {
font-size: clamp(1.45rem, 1.8vw, 2rem) !important;
font-weight: 600 !important;
line-height: 1.08 !important;
}
.bd-section-title {
font-size: 1.08rem !important;
font-weight: 600 !important;
}
.bd-standards-copy,
.bd-section-copy,
.bd-type-line__sample,
.sample-xl,
.sample-lg,
.sample-md,
.sample-sm,
.bd-surface-card__copy,
.bd-choice-card__desc,
.bd-work-overview-card__body,
.bd-map-card__address,
.bd-modal-window__body,
.bd-chat-demo__message,
.bd-friday-demo__message {
font-weight: 400 !important;
}
.bd-choice-card-tight,
.bd-choice-card-std {
border: 1px solid var(--bd-theme-border-000000, #000) !important;
box-shadow: none !important;
}
.bd-choice-card-tight.is-active,
.bd-choice-card-std.is-active {
background: var(--bd-theme-bg-f0ca00-2e, rgba(240, 202, 0, 0.18)) !important;
border-color: var(--bd-theme-border-000000, #000) !important;
box-shadow: none !important;
}
.bd-choice-card-tight.is-active::after,
.bd-choice-card-std.is-active::after {
left: 0 !important;
right: 0 !important;
height: 6px !important;
border-radius: 0 !important;
background: var(--bd-theme-bg-e6c44f, #e6c44f) !important;
}
.bd-btn-std,
.bd-btn-std--dark,
.bd-btn-std--danger {
display: inline-flex !important;
align-items: center !important;
justify-content: center !important;
gap: 0.4rem !important;
min-height: 40px !important;
padding: 0.48rem 0.82rem !important;
border-radius: 12px !important;
text-decoration: none !important;
font-size: 0.84rem !important;
font-weight: 600 !important;
box-shadow: none !important;
}
.bd-btn-std {
background: var(--bd-theme-bg-ffffff, #fff) !important;
border: 1px solid var(--bd-theme-border-000000, #000) !important;
color: var(--bd-theme-fg-111111, #111) !important;
}
.bd-btn-std--dark {
background: var(--bd-theme-bg-111111, #111) !important;
border: 1px solid var(--bd-theme-border-111111, #111) !important;
color: var(--bd-theme-fg-ffffff, #fff) !important;
}
.bd-btn-std--danger {
background: var(--bd-theme-bg-dc3545, #dc3545) !important;
border: 1px solid var(--bd-theme-border-dc3545, #dc3545) !important;
color: var(--bd-theme-fg-ffffff, #fff) !important;
}
.bd-btn-std:hover,
.bd-btn-std--dark:hover,
.bd-btn-std--danger:hover {
text-decoration: none !important;
opacity: 0.95;
}
.bd-inline-actions .bd-btn-std,
.bd-inline-actions .bd-btn-std--dark,
.bd-inline-actions .bd-btn-std--danger {
min-width: 40px;
}
.bd-inline-actions .bd-btn-std:not(.bd-btn-std--dark):not(.bd-btn-std--danger) {
padding-left: 0.72rem !important;
padding-right: 0.72rem !important;
}
.bd-modal-window {
position: relative;
}
.bd-modal-window__header {
cursor: grab;
}
.bd-modal-window__header:active {
cursor: grabbing;
}
.bd-modal-window::after {
content: "";
position: absolute;
right: 10px;
bottom: 10px;
width: 14px;
height: 14px;
border-right: 2px solid var(--bd-theme-border-0f172a-59, rgba(15, 23, 42, 0.35));
border-bottom: 2px solid var(--bd-theme-border-0f172a-59, rgba(15, 23, 42, 0.35));
opacity: 0.9;
pointer-events: none;
}
.bd-modal-window--confirm::after {
width: 0;
height: 0;
border: 0;
}
.bd-confirm-title {
font-size: 0.98rem !important;
font-weight: 600 !important;
}
.bd-confirm-title i {
font-size: 1.25rem !important;
}
.bd-modal-window__body .fs-4,
.bd-modal-window__body .fs-5,
.bd-modal-window__body .fs-3 {
font-size: 1.05rem !important;
line-height: 1.35 !important;
font-weight: 500 !important;
}
.bd-modal-window__footer .bd-btn-std,
.bd-modal-window__footer .bd-btn-std--dark,
.bd-modal-window__footer .bd-btn-std--danger {
min-width: 92px;
}
.bd-native-select__field,
.bd-input {
height: var(--bd-field-h) !important;
min-height: var(--bd-field-h) !important;
}
/* =========================================================
Standards polish pass
========================================================= */
/* =========================================================
Estimates bridge patterns
========================================================= */
.bd-est-bridge-shell {
border: 1px solid var(--bd-theme-border-000000, #000);
border-radius: 18px;
background: var(--bd-theme-bg-ffffff, #fff);
overflow: hidden;
}
.bd-est-bridge-head {
padding: 1rem 1rem 0.9rem;
border-bottom: 1px solid var(--bd-theme-border-0f172a-1a, rgba(15,23,42,.1));
background: linear-gradient(180deg, var(--bd-theme-bg-ffffff-fa, rgba(255,255,255,.98)), var(--bd-theme-bg-f8fafc-f5, rgba(248,250,252,.96)));
}
.bd-est-bridge-title {
display: flex;
align-items: center;
gap: .7rem;
flex-wrap: wrap;
}
.bd-est-bridge-subtitle {
margin-top: .5rem;
color: var(--bd-muted);
font-size: .86rem;
line-height: 1.3;
}
.bd-est-bridge-body {
padding: 1rem;
display: grid;
gap: 1rem;
}
.bd-est-context-grid {
display: grid;
grid-template-columns: repeat(3, minmax(0, 1fr));
gap: .75rem 1rem;
}
.bd-est-context-item {
border: 1px solid var(--bd-theme-border-000000-24, rgba(0,0,0,.14));
border-radius: 12px;
padding: .55rem .65rem;
background: var(--bd-theme-bg-ffffff, #fff);
}
.bd-est-context-k {
display: flex;
align-items: center;
gap: .42rem;
font-size: .78rem;
color: var(--bd-muted);
margin-bottom: .25rem;
}
.bd-est-context-v {
margin-bottom: .2rem;
}
.bd-est-context-h {
font-size: .78rem;
color: var(--bd-muted);
line-height: 1.15;
}
.bd-est-workflow {
display: flex;
flex-wrap: wrap;
gap: .7rem 1.1rem;
align-items: center;
font-size: .9rem;
}
.bd-est-workflow-item {
display: inline-flex;
align-items: center;
gap: .45rem;
white-space: nowrap;
}
.bd-est-workflow-square {
width: 14px;
height: 14px;
border-radius: 4px;
border: 1px solid var(--bd-theme-border-000000, #000);
background: var(--bd-theme-bg-ffffff, #fff);
}
.bd-est-workflow-square.is-good { background: var(--bd-std-good-surface); border-color: var(--bd-std-good-border); }
.bd-est-workflow-square.is-warn { background: var(--bd-std-warn-surface); border-color: var(--bd-std-warn-border); }
.bd-est-workflow-square.is-bad { background: var(--bd-std-danger-surface); border-color: var(--bd-std-danger-border); }
.bd-est-workflow-square.is-muted { background: var(--bd-std-muted-surface); }
.bd-est-metric-strip {
display: flex;
flex-wrap: wrap;
gap: 1.25rem;
align-items: flex-start;
padding-top: .6rem;
border-top: 1px solid var(--bd-theme-border-000000-1f, rgba(0,0,0,.12));
margin-top: .6rem;
}
.bd-est-metric {
text-align: center;
min-width: 120px;
}
.bd-est-metric .k { font-size: .75rem; color: var(--bd-muted); }
.bd-est-metric .v { font-size: 1.15rem; line-height: 1.05; font-weight: 600; color: var(--bd-theme-fg-111111, #111); }
.bd-est-metric .s { font-size: .8rem; color: var(--bd-muted); margin-top: .2rem; }
.bd-est-rail-card {
border: 1px solid var(--bd-theme-border-0f172a-1a, rgba(15,23,42,.1));
border-radius: 14px;
background: var(--bd-theme-bg-ffffff, #fff);
padding: .7rem .8rem;
}
.bd-est-kv {
display: flex;
align-items: flex-start;
justify-content: space-between;
gap: .7rem;
padding: .16rem 0;
font-size: .84rem;
}
.bd-est-kv .k { color: var(--bd-muted); }
.bd-est-kv .v { font-weight: 600; text-align: right; white-space: nowrap; }
.bd-est-list-card {
border: 1px solid var(--bd-theme-border-000000, #000);
border-radius: 16px;
background: var(--bd-theme-bg-ffffff, #fff);
overflow: hidden;
}
.bd-est-list-card__head {
padding: .75rem .9rem;
border-bottom: 1px solid var(--bd-theme-border-0f172a-14, rgba(15,23,42,.08));
background: var(--bd-theme-bg-f8fafc-d1, rgba(248,250,252,.82));
}
.bd-est-list-card__body {
padding: .9rem;
}
.bd-est-activity-day {
padding: .6rem .75rem;
border-top: 1px solid var(--bd-theme-border-000000-1a, rgba(0,0,0,.1));
border-bottom: 1px solid var(--bd-theme-border-000000-1a, rgba(0,0,0,.1));
background: var(--bd-theme-bg-f8f9fa, #f8f9fa);
font-weight: 600;
font-size: .85rem;
}
.bd-est-activity-item {
display: flex;
gap: .75rem;
padding: .68rem .75rem .68rem 2.2rem;
border-bottom: 1px solid var(--bd-theme-border-000000-0f, rgba(0,0,0,.06));
position: relative;
}
.bd-est-activity-item::before {
content: "";
position: absolute;
left: 1.03rem;
top: 0;
bottom: 0;
width: 2px;
background: var(--bd-theme-bg-000000-1f, rgba(0,0,0,.12));
}
.bd-est-activity-dot {
position: absolute;
left: calc(1.03rem - 6px);
top: .94rem;
width: 12px;
height: 12px;
border-radius: 6px;
border: 2px solid var(--bd-theme-border-000000, #000);
background: var(--bd-theme-bg-ffffff, #fff);
z-index: 2;
box-shadow: 0 0 0 2px var(--bd-theme-shadow-ffffff, #fff);
}
.bd-est-activity-main { flex: 1; min-width: 0; }
.bd-est-activity-action { font-weight: 600; font-size: .9rem; color: var(--bd-theme-fg-111111, #111); }
.bd-est-activity-time { color: var(--bd-muted); font-size: .78rem; }
.bd-est-activity-meta { color: var(--bd-muted); font-size: .82rem; margin-top: .15rem; }
.bd-est-activity-wrap {
position: relative;
padding-bottom: .25rem;
}
.bd-est-activity-tools .input-group-text {
padding: .2rem .5rem;
}
.bd-est-activity-filters {
display: flex;
flex-wrap: wrap;
gap: .5rem;
align-items: center;
}
.bd-est-filter-btn {
display: inline-flex;
align-items: center;
gap: .45rem;
padding: .25rem .55rem;
border: 1px solid var(--bd-theme-border-000000, #000);
border-radius: .5rem;
background: var(--bd-theme-bg-ffffff, #fff);
font-size: .82rem;
line-height: 1;
cursor: pointer;
}
.bd-est-filter-btn .count {
display: inline-flex;
align-items: center;
justify-content: center;
min-width: 1.6rem;
padding: .1rem .35rem;
border-radius: .4rem;
border: 1px solid var(--bd-theme-border-000000-59, rgba(0,0,0,.35));
background: var(--bd-theme-bg-f8f9fa, #f8f9fa);
font-size: .75rem;
}
.bd-est-filter-btn.active { background: var(--bd-theme-bg-111111, #111); color: var(--bd-theme-fg-ffffff, #fff); }
.bd-est-filter-btn.active .count { background: var(--bd-theme-bg-ffffff, #fff); color: var(--bd-theme-fg-111111, #111); border-color: var(--bd-theme-border-ffffff, #fff); }
.bd-u-clamp-3 {
display: -webkit-box;
-webkit-line-clamp: 3;
-webkit-box-orient: vertical;
overflow: hidden;
}
.bd-est-workflow-square.good { background: var(--bd-std-good-surface); border-color: var(--bd-std-good-border); }
.bd-est-workflow-square.warn { background: var(--bd-std-warn-surface); border-color: var(--bd-std-warn-border); }
.bd-est-workflow-square.bad { background: var(--bd-std-danger-surface); border-color: var(--bd-std-danger-border); }
.bd-est-workflow-square.muted { background: var(--bd-std-muted-surface); }
.bd-est-list-filter-banner {
border: 1px solid var(--bd-theme-border-000000, #000);
border-left-width: 4px;
border-left-color: var(--bd-theme-border-1f6fe5, #1f6fe5);
border-radius: 0;
background: var(--bd-theme-bg-1f6fe5-1a, rgba(31, 111, 229, 0.10));
color: var(--bd-theme-fg-0f3b84, #0f3b84);
}
.bd-est-bidders-actions {
white-space: nowrap;
scrollbar-width: thin;
}
.bd-est-bidders-actions > * {
white-space: nowrap;
}
.bd-est-bidders-actions .form-select-sm {
min-width: 260px;
}
.bd-est-action-strip {
display: inline-flex;
align-items: center;
gap: .35rem;
flex-wrap: wrap;
}
.bd-est-takeoff-shell {
border: 1px solid var(--bd-theme-border-000000, #000);
border-radius: 18px;
background: var(--bd-theme-bg-ffffff, #fff);
overflow: hidden;
}
.bd-est-takeoff-head {
padding: .9rem 1rem;
border-bottom: 1px solid var(--bd-theme-border-0f172a-14, rgba(15,23,42,.08));
}
.bd-est-takeoff-body {
padding: 1rem;
background: var(--bd-theme-bg-f8fafc-b8, rgba(248,250,252,.72));
display: grid;
gap: .95rem;
}
.bd-est-takeoff-summary {
display: flex;
align-items: center;
gap: .4rem;
justify-content: flex-end;
flex-wrap: wrap;
}
.bd-est-takeoff-summary > span {
display: inline-flex;
align-items: center;
padding: .34rem .58rem;
border-radius: 12px;
border: 1px solid var(--bd-theme-border-0f172a-2e, rgba(15,23,42,.18));
background: var(--bd-theme-bg-f8f9fa-f2, rgba(248,249,250,.95));
font-weight: 700;
}
.bd-est-takeoff-table {
width: 100%;
min-width: 980px;
border-collapse: separate;
border-spacing: 0;
}
.bd-est-takeoff-table thead th,
.bd-est-takeoff-table tbody td {
padding: .78rem .82rem;
border-bottom: 1px solid var(--bd-theme-border-0f172a-1a, rgba(15,23,42,.10));
vertical-align: middle;
}
.bd-est-takeoff-table thead th {
font-size: .8rem;
color: var(--bd-muted);
letter-spacing: .04em;
background: var(--bd-theme-bg-f8fafc-f0, rgba(248,250,252,.94));
}
.bd-est-takeoff-table__section td {
font-weight: 800;
letter-spacing: .05em;
color: var(--bd-theme-fg-364152, #364152);
background: var(--bd-theme-bg-f8fafc-c7, rgba(248,250,252,.78));
}
.bd-est-takeoff-table__add td {
background: var(--bd-theme-bg-ffffff-f5, rgba(255,255,255,.96));
color: var(--bd-theme-fg-2563eb, #2563eb);
font-weight: 600;
}
@media (max-width: 991.98px) {
.bd-est-context-grid {
grid-template-columns: 1fr;
}
}
.bd-choice-card-tight.is-active,
.bd-choice-card-std.is-active {
background: var(--bd-theme-bg-f6f3db, #f6f3db) !important;
border: 1px solid var(--bd-theme-border-e4d7a3, #e4d7a3) !important;
box-shadow: none !important;
}
.bd-choice-card-tight.is-active::after,
.bd-choice-card-std.is-active::after {
content: none !important;
display: none !important;
}
.bd-standards-title {
font-size: clamp(1.2rem, 1.5vw, 1.55rem) !important;
font-weight: 500 !important;
line-height: 1.14 !important;
}
.bd-section-title {
font-size: 0.98rem !important;
font-weight: 500 !important;
line-height: 1.2 !important;
}
.bd-standards-copy,
.bd-section-copy,
.bd-type-line__sample,
.bd-surface-card__copy,
.bd-choice-card__desc,
.bd-work-overview-card__body,
.bd-map-card__address,
.bd-map-card__route,
.bd-modal-window__body,
.bd-chat-demo__message,
.bd-friday-demo__message,
.bd-device-frame__meta,
.bd-field__help {
font-weight: 400 !important;
}
.sample-xl {
font-size: 1.32rem !important;
line-height: 1.14 !important;
font-weight: 500 !important;
}
.sample-lg {
font-size: 1.02rem !important;
line-height: 1.2 !important;
font-weight: 500 !important;
}
.sample-md {
font-size: 0.94rem !important;
line-height: 1.34 !important;
font-weight: 400 !important;
}
.sample-sm {
font-size: 0.84rem !important;
line-height: 1.38 !important;
font-weight: 400 !important;
}
.bd-work-nav-primary {
gap: 0.9rem !important;
padding-bottom: 0.1rem !important;
}
.bd-work-nav-primary__link {
padding-bottom: 0.2rem !important;
font-size: 0.84rem !important;
font-weight: 600 !important;
line-height: 1.1 !important;
}
.bd-work-subnav {
padding: 0.32rem 0.42rem !important;
}
/* =========================================================
Discovery bridge primitives (boards/cards/modals/files)
========================================================= */
.bd-board-shell {
border: 1px solid var(--bd-theme-border-000000, #000);
border-radius: 14px;
background: var(--bd-theme-bg-ffffff, #fff);
overflow: hidden;
}
.bd-board-shell__header {
border-bottom: 1px solid var(--bd-theme-border-0f172a-1a, rgba(15, 23, 42, 0.1));
background: linear-gradient(180deg, var(--bd-theme-bg-ffffff-fa, rgba(255, 255, 255, 0.98)), var(--bd-theme-bg-f8fafc-f0, rgba(248, 250, 252, 0.94)));
}
.bd-board-shell__body {
padding: 0.75rem;
}
.bd-board-columns {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
gap: 0.6rem;
}
.bd-work-card {
border: 1px solid var(--bd-theme-border-000000, #000);
border-radius: 12px;
background: var(--bd-theme-bg-ffffff, #fff);
}
.bd-work-card__actions {
display: flex;
gap: 0.25rem;
flex-wrap: nowrap;
}
.bd-metric-tile {
border: 1px solid var(--bd-theme-border-000000, #000);
border-radius: 12px;
background: var(--bd-theme-bg-ffffff, #fff);
height: 100%;
}
.bd-search-surface {
border: 1px solid var(--bd-theme-border-000000, #000);
border-radius: 12px;
box-shadow: var(--bd-std-shadow);
background: var(--bd-theme-bg-ffffff, #fff);
}
.bd-status-pulse {
animation: bdStatusPulse 2s infinite;
}
@keyframes bdStatusPulse {
0% { box-shadow: 0 0 0 0 var(--bd-theme-shadow-28a745-99, rgba(40, 167, 69, 0.6)); }
70% { box-shadow: 0 0 0 10px var(--bd-theme-shadow-28a745-00, rgba(40, 167, 69, 0)); }
100% { box-shadow: 0 0 0 0 var(--bd-theme-shadow-28a745-00, rgba(40, 167, 69, 0)); }
}
.bd-file-list .list-group-item {
padding: 0.4rem 0.6rem;
}
.bd-file-list .list-group-item:hover {
background: var(--bd-theme-bg-f8f9fa, #f8f9fa);
}
.bd-file-list .bd-file-name {
font-size: 0.9rem;
}
.bd-file-list .mdi {
vertical-align: -12%;
}
.bd-modal-bridge {
width: 100%;
border: 1px solid var(--bd-theme-border-000000, #000);
border-radius: 14px;
background: var(--bd-theme-bg-ffffff, #fff);
box-shadow: var(--bd-std-shadow-lg);
overflow: hidden;
}
.bd-modal-bridge__header {
padding: 0.6rem 0.9rem;
border-bottom: 1px solid var(--bd-theme-border-0f172a-1f, rgba(15, 23, 42, 0.12));
background: var(--bd-theme-bg-ffffff, #fff);
}
.bd-modal-bridge__body {
padding: 0.9rem;
}
.bd-modal-bridge__footer {
padding: 0.75rem 0.9rem;
border-top: 1px solid var(--bd-theme-border-0f172a-1a, rgba(15, 23, 42, 0.1));
background: var(--bd-theme-bg-ffffff, #fff);
}
.bd-form-compact .form-control,
.bd-form-compact .form-select,
.bd-form-compact .input-group-text {
font-size: 0.875rem;
padding: 0.25rem 0.5rem;
border: 1px solid var(--bd-theme-border-000000, #000);
}
.bd-form-compact .ts-wrapper {
border: 1px solid var(--bd-theme-border-000000, #000);
border-radius: 0.25rem;
background: var(--bd-theme-bg-ffffff, #fff);
min-height: 31px;
height: auto;
}
.bd-form-compact .ts-wrapper .ts-control,
.bd-form-compact .ts-wrapper .ts-control input,
.bd-form-compact .ts-input {
min-height: 28px;
height: auto;
padding: 0 0.375rem;
line-height: 1.4;
}
.bd-form-compact .ts-wrapper.multi .ts-control > div,
.bd-form-compact .ts-wrapper.multi .ts-control .item {
margin: 1px 2px;
padding: 1px 4px;
font-size: 0.75rem;
border: 1px solid var(--bd-theme-border-000000, #000);
border-radius: 0.3rem;
background: var(--bd-theme-bg-e9ecef, #e9ecef);
color: var(--bd-theme-fg-000000, #000);
}
.bd-form-compact .ts-dropdown {
border: 1px solid var(--bd-theme-border-000000, #000);
box-shadow: 0 4px 10px var(--bd-theme-shadow-000000-14, rgba(0, 0, 0, 0.08));
}
.bd-work-subnav__link {
padding: 0.32rem 0.5rem !important;
font-size: 0.82rem !important;
line-height: 1.1 !important;
}
.bd-service-hub-nav__link {
padding: 0.34rem 0.56rem !important;
font-size: 0.82rem !important;
line-height: 1.1 !important;
}
.bd-inline-actions > .bd-btn-std:not(.bd-btn-std--dark):not(.bd-btn-std--danger) {
width: 38px !important;
min-width: 38px !important;
height: 38px !important;
padding: 0 !important;
}
.bd-inline-actions > .bd-btn-std--dark {
margin-left: 0.35rem;
}
.bd-window-close {
display: inline-flex;
align-items: center;
justify-content: center;
border: 0 !important;
background: transparent !important;
box-shadow: none !important;
border-radius: 0 !important;
padding: 0 !important;
width: auto !important;
min-width: auto !important;
height: auto !important;
min-height: auto !important;
color: var(--bd-theme-fg-111111, #111) !important;
line-height: 1;
}
.bd-window-close i {
font-size: 1.2rem !important;
}
.bd-window-close:hover,
.bd-window-close:focus {
opacity: 0.72;
text-decoration: none !important;
outline: none;
}
.bd-device-frame:nth-child(1) .bd-responsive-demo-grid {
grid-template-columns: 1fr;
}
.bd-device-frame:nth-child(2) .bd-responsive-demo-grid {
grid-template-columns: repeat(2, minmax(0, 1fr));
}
.bd-device-frame:nth-child(3) .bd-responsive-demo-grid {
grid-template-columns: repeat(2, minmax(0, 1fr));
}
.bd-device-frame:nth-child(3) .bd-responsive-demo-tile:nth-child(1) {
grid-column: 1 / -1;
}
.bd-device-frame:nth-child(4) .bd-responsive-demo-grid {
grid-template-columns: repeat(3, minmax(0, 1fr));
}
.bd-device-frame:nth-child(4) .bd-responsive-demo-tile:nth-child(3) {
grid-column: span 2;
}
.bd-device-frame:nth-child(5) .bd-responsive-demo-grid {
grid-template-columns: repeat(4, minmax(0, 1fr));
}
.bd-device-frame:nth-child(5) .bd-responsive-demo-tile:nth-child(3) {
grid-column: span 2;
}
/* Estimates migration bridge primitives */
.bd-left-accent { position: relative; }
.bd-left-accent::before {
content: "";
position: absolute;
left: 0;
top: .35rem;
bottom: .35rem;
width: 6px;
background: var(--edge-color, var(--bd-theme-bg-000000, #000));
border-radius: 0 .2rem .2rem 0;
}
.estimate-list-header {
display: grid;
grid-template-columns: 140px minmax(260px,1fr) 180px 200px 150px;
gap: 12px;
align-items: center;
}
.bd-est-grid {
display: grid;
grid-template-columns: 140px minmax(260px,1fr) 180px 200px 150px;
gap: 12px;
align-items: center;
}
.col-est-rail,.col-est-owner,.col-est-status,.col-est-user,.col-est-actions { min-width: 0; }
.col-est-actions { text-align: right; }
.bd-est-row { overflow: hidden; }
.bd-est-row.is-selected { box-shadow: inset 0 0 0 2px var(--bd-theme-shadow-198754-d9, rgba(25,135,84,.85)); }
.bd-status-badge {
display: inline-flex;
align-items: center;
gap: .3rem;
border: 1px solid var(--bd-theme-border-000000, #000);
border-radius: .45rem;
padding: .2rem .5rem;
font-size: .75rem;
font-weight: 600;
}
.bd-status-win{ background:var(--bd-std-good-surface); border-color:var(--bd-std-good-border); }
.bd-status-loss{ background:var(--bd-std-danger-surface); border-color:var(--bd-std-danger-border); }
.bd-status-pending{ background:var(--bd-std-warn-surface); border-color:var(--bd-std-warn-border); }
.bd-status-inprogress{ background:var(--bd-std-info-surface); border-color:var(--bd-std-info-border); }
.bd-status-muted{ background:var(--bd-std-muted-surface); }
.bd-micro-pipeline { position: relative; height: 6px; border: 1px solid var(--bd-theme-border-000000, #000); border-radius: 999px; background: var(--bd-theme-bg-f8f9fa, #f8f9fa); overflow: hidden; }
.bd-micro-pipeline .fill { position: absolute; inset: 0 auto 0 0; height: 100%; border-radius: 999px; }
.bd-est-num { font-size: .84rem; padding: .34rem .57rem; }
.bd-est-num-overdue { background: var(--bd-std-danger-surface) !important; border-color: var(--bd-std-danger-border) !important; }
.bd-est-num-due-today { background: var(--bd-std-warn-surface) !important; border-color: var(--bd-std-warn-border) !important; }
.bd-est-num-complete { background: var(--bd-std-info-surface) !important; border-color: var(--bd-std-info-border) !important; }
.bd-view-chip {
display: inline-flex; align-items: center; gap: .4rem;
padding: .42rem .65rem; border: 1px solid var(--bd-theme-border-000000, #000); border-radius: .55rem;
background: var(--bd-theme-bg-ffffff, #fff); color: var(--bd-theme-fg-111111, #111); text-decoration: none; font-size: .82rem;
}
.bd-view-chip.active { background: var(--bd-theme-bg-111111, #111); color: var(--bd-theme-fg-ffffff, #fff); }
.bd-pi-grid{
display:grid;
grid-template-columns: 60px 1fr 1fr 260px;
grid-template-areas:
"labelTop topLeft topMid topRight"
"labelTop topSignals topSignals topRight"
"labelBot botLeft botLeft botRight";
gap:.6rem 1rem;
align-items:center;
}
.bd-pi-rowlabel-top{ grid-area:labelTop; }
.bd-pi-rowlabel-bot{ grid-area:labelBot; }
.bd-pi-top-left{ grid-area:topLeft; }
.bd-pi-top-mid{ grid-area:topMid; }
.bd-pi-top-right{ grid-area:topRight; }
.bd-pi-top-signals{ grid-area:topSignals; }
.bd-pi-bot-left{ grid-area:botLeft; }
.bd-pi-bot-right{ grid-area:botRight; }
.bd-pi-ar-viz{ display:flex; align-items:flex-end; gap:14px; }
.bd-progress-pipeline{ position:relative; width:100%; max-width:220px; height:8px; background:var(--bd-theme-bg-f1f3f5, #f1f3f5); border:1px solid var(--bd-theme-border-000000, #000); border-radius:999px; overflow:hidden; }
.pipeline-fill{ position:absolute; top:0; left:0; height:100%; border-radius:999px; }
.pipeline-fill.rfps{background:var(--bd-theme-bg-dee2e6, #dee2e6);} .pipeline-fill.takeoff{background:var(--bd-theme-bg-ffe066, #ffe066);} .pipeline-fill.pricing{background:var(--bd-theme-bg-ffd43b, #ffd43b);} .pipeline-fill.ready{background:var(--bd-theme-bg-9ad29a, #9ad29a);}
.aging-bar{ position:relative; width:100%; max-width:110px; height:8px; background:var(--bd-theme-bg-f1f3f5, #f1f3f5); border:1px solid var(--bd-theme-border-000000, #000); border-radius:999px; overflow:hidden; }
.bd-badge-lg { font-size:.9rem; padding:.45rem .8rem; border-radius:.5rem; }
#mapbox-project-map { height:180px; width:100%; border-radius:.5rem; overflow:hidden; border:1px solid var(--bd-theme-border-000000, #000); }
.ts-wrapper.single {
min-height: var(--bd-field-h) !important;
height: var(--bd-field-h) !important;
font-size: 0.9rem !important;
}
.ts-wrapper.single .ts-control {
min-height: var(--bd-field-h) !important;
height: var(--bd-field-h) !important;
padding: 0 var(--bd-field-px) !important;
display: flex;
align-items: center;
gap: .25rem;
}
@media (max-width: 991.98px){
.estimate-list-header,.bd-est-grid { grid-template-columns: 1fr; }
.bd-pi-grid{
grid-template-columns:1fr 260px;
grid-template-areas:"topLeft topRight" "topMid topRight" "topSignals topRight" "botLeft botRight";
}
}
/* Secondary estimates migration bridges */
.bd-has-error input,
.bd-has-error select,
.bd-has-error textarea {
border-color: var(--bd-theme-border-dc3545, #dc3545) !important;
background-color: var(--bd-theme-bg-fff8f8, #fff8f8);
}
.bidletter-items {
background: var(--bd-theme-bg-ffffff, #fff);
border: 1px solid var(--bd-theme-border-000000, #000);
border-radius: .5rem;
padding: 1rem;
margin-bottom: 1.25rem;
}
.bidletter-items .bd-section {
border: 1px solid var(--bd-theme-border-000000, #000);
background: var(--bd-theme-bg-f9f9f9, #f9f9f9);
border-radius: .4rem;
transition: background-color .15s ease;
display: block;
}
.bidletter-items .bd-section:hover {
background: var(--bd-theme-bg-f5f5f5, #f5f5f5);
}
.bidletter-items-form {
max-height: 70vh;
overflow-y: auto;
overflow-x: visible;
padding-right: .5rem;
display: block;
}
.scope-input.is-focus,
.cat-input.is-focus {
background: var(--bd-theme-bg-fffbe6, #fffbe6);
outline: 1px solid var(--bd-theme-border-000000, #000);
}
.drag-handle { cursor: grab; }
.drag-handle:active { cursor: grabbing; }
.category-block {
border: 1px solid var(--bd-theme-border-cccccc, #ccc);
border-radius: .4rem;
background: var(--bd-theme-bg-ffffff, #fff);
transition: box-shadow .1s ease;
}
.category-block:hover { box-shadow: 0 1px 4px var(--bd-theme-shadow-000000-0d, rgba(0,0,0,.05)); }
.scope-line {
border: 1px solid var(--bd-theme-border-e5e5e5, #e5e5e5);
border-radius: .25rem;
padding: .25rem .5rem;
background: var(--bd-theme-bg-ffffff, #fff);
}
.scope-line:hover { background: var(--bd-theme-bg-fdfdfd, #fdfdfd); }
.add-item-row button,
.add-category-row button {
text-decoration: none !important;
font-weight: 500;
padding-left: 0;
}
.save-checkmark { transition: opacity .3s ease; }
.save-checkmark i { font-size: .85rem; }
.soft-muted { color: var(--bd-theme-fg-777777, #777) !important; }
.bd-price-chip.good {
background:var(--bd-theme-bg-e6f4ea, #e6f4ea);
border:1px solid var(--bd-theme-border-198754, #198754);
color:var(--bd-theme-fg-146c43, #146c43);
padding:1px 6px;
border-radius:4px;
font-size:.8rem;
}
.bd-price-chip.bad {
background:var(--bd-theme-bg-fdecea, #fdecea);
border:1px solid var(--bd-theme-border-dc3545, #dc3545);
color:var(--bd-theme-fg-842029, #842029);
padding:1px 6px;
border-radius:4px;
font-size:.8rem;
}
select.is-error,
.ts-control.is-error {
border-color: var(--bd-theme-border-dc3545, #dc3545) !important;
box-shadow: 0 0 0 .15rem var(--bd-theme-shadow-dc3545-26, rgba(220,53,69,.15)) !important;
}
.bd-load.is-loading {
opacity: .75;
pointer-events: none;
}
.bd-load.is-loading .bd-btn-ico {
display: none !important;
}
.bd-load.is-loading .bd-btn-spin {
display: inline-flex !important;
}
/* Estimates supporting partial bridges */
#rfp-form .bd-btn { border-radius: 4px !important; box-shadow: none !important; }
#rfp-form .bd-btn-dark { background:var(--bd-theme-bg-000000, #000) !important; color:var(--bd-theme-fg-ffffff, #fff) !important; border:1px solid var(--bd-theme-border-000000, #000) !important; }
#rfp-form .bd-btn-outline { background:var(--bd-theme-bg-ffffff, #fff) !important; color:var(--bd-theme-fg-000000, #000) !important; border:1px solid var(--bd-theme-border-000000, #000) !important; }
#rfp-form .bd-btn-ghost { background:transparent !important; border:1px solid transparent !important; color:var(--bd-theme-fg-111111, #111) !important; }
#rfp-file-overlay .rfp-tree-pane { flex: 0 0 260px; max-width:260px; min-width:220px; overflow-y:auto; }
#rfp-file-overlay .folder-entry { cursor:pointer; border-radius:.5rem; padding:.25rem .4rem; }
#rfp-file-overlay .folder-entry:hover { background:var(--bd-theme-bg-f8f9fa, #f8f9fa); }
#rfp-files-pane table tbody tr.is-selected { background:var(--bd-theme-bg-fff9db, #fff9db); border-left: 6px solid var(--bd-theme-border-e0c84d, #e0c84d); }
.editable-form { display:inline; margin:0; }
.edit-badge { display:inline-flex; align-items:center; border:1px solid var(--bd-theme-border-000000, #000); border-radius:.35rem; background:var(--bd-theme-bg-fff9db, #fff9db); min-width:100px; }
.editable-input { border:none; outline:none; background:transparent; font-family:"Inter","Segoe UI",sans-serif; font-size:0.85rem; text-align:right; width:100%; padding:0 .25rem; }
#rfp-section .bd-card { position: relative !important; z-index: 1 !important; }
#rfp-section .bd-card:has(.dropdown.show),
#rfp-section .bd-card:has(.dropdown-menu.show),
#rfp-section .bd-card:has(.ts-wrapper.open) { z-index: 5000 !important; overflow: visible !important; }
#rfp-section .dropdown-menu { z-index: 6000 !important; }
#bidder-form .form-control,
#bidder-form .form-select,
#bidder-form .ts-wrapper .ts-control { font-size:.875rem!important; }
#bidder-form .form-control,
#bidder-form .form-select { padding:.25rem .5rem; border:1px solid var(--bd-theme-border-000000, #000); }
#bidder-form .ts-wrapper { border:1px solid var(--bd-theme-border-000000, #000); border-radius:.25rem; background:var(--bd-theme-bg-ffffff, #fff); }
#bidder-form .bd-invalid { border-color:var(--bd-theme-border-dc3545, #dc3545)!important; }
#bidder-form .ts-wrapper .ts-control,
#bidder-form .ts-wrapper .ts-control input {
min-height: var(--bd-field-h-sm) !important;
height: var(--bd-field-h-sm) !important;
padding: 0 var(--bd-field-px-sm) !important;
line-height: 1.2 !important;
}
#bidder-form .ts-dropdown { border:1px solid var(--bd-theme-border-000000, #000); box-shadow:0 4px 10px var(--bd-theme-shadow-000000-14, rgba(0,0,0,.08)); }
.bd-dist { display:inline-flex; align-items:center; gap:.35rem; border:1px solid var(--bd-theme-border-000000, #000); border-radius:.5rem; padding:.2rem .55rem; line-height:1; font-size:.78rem; background:var(--bd-theme-bg-ffffff, #fff); color:var(--bd-theme-fg-212529, #212529); }
.bd-dist:hover { background:var(--bd-theme-bg-f8f9fa, #f8f9fa); }
.bd-dist.dropdown-toggle::after { margin-left:.35rem; }
.bd-dist-info{ background:var(--bd-theme-bg-e7f1fb, #e7f1fb); border-color:var(--bd-theme-border-0d6efd, #0d6efd); color:var(--bd-theme-fg-0b5ed7, #0b5ed7); }
.bd-dist-warn{ background:var(--bd-theme-bg-fff7e6, #fff7e6); border-color:var(--bd-theme-border-f0ad4e, #f0ad4e); color:var(--bd-theme-fg-a96f05, #a96f05); }
.bd-dist-bad{ background:var(--bd-theme-bg-ffe5e5, #ffe5e5); border-color:var(--bd-theme-border-dc3545, #dc3545); color:var(--bd-theme-fg-b02a37, #b02a37); }
.bd-dist-muted{ background:var(--bd-theme-bg-f1f3f5, #f1f3f5); border-color:var(--bd-theme-border-6c757d, #6c757d); color:var(--bd-theme-fg-495057, #495057); }
#estimate-bidders .dropdown-menu{ font-size:.8rem; min-width:220px; }
#estimate-bidders .dropdown-item.active{ font-weight:600; }
#estimate-bidders .bd-clickable{ cursor:pointer; border-radius:.25rem; transition:background .12s ease; }
#estimate-bidders .bd-clickable:hover{ background:var(--bd-theme-bg-fff9db, #fff9db); }
#estimate-bidders .cell-wrapper { display:inline-block; min-width:180px; text-align:right; }
#estimate-bidders .cell-display { display:inline-block; min-width:140px; }
#estimate-bidders .hidden { display:none !important; }
#estimate-bidders .bd-chip.dropdown-toggle::after {
content:""; display:inline-block; margin-left:.35rem; vertical-align:.1em;
border-top:.35em solid currentColor; border-right:.35em solid transparent; border-left:.35em solid transparent; border-bottom:0;
}
.bd-force-dropdown { position: relative; }
.bd-force-dropdown .bd-force-menu { position: absolute !important; top: 100% !important; right: 0 !important; left: auto !important; transform: none !important; margin-top: 4px; z-index: 99999 !important; visibility: hidden; }
.bd-force-dropdown .bd-force-menu.show { visibility: visible; }
.chevron { transition: transform .2s ease; }
.toggle-cat[aria-expanded="true"] .chevron { transform: rotate(90deg); }
#takeoff-table th { text-align: right !important; }
#takeoff-table th:first-child { text-align: left !important; }
#estimate-bidders .bd-timeline-item { border-left: 2px solid var(--bd-theme-border-cccccc, #ccc); padding-left: .75rem; margin-left: .3rem; position: relative; }
#estimate-bidders .bd-timeline-item::before { content: ''; position: absolute; top: .45rem; left: -5px; width: 8px; height: 8px; background: var(--bd-theme-bg-ffffff, #fff); border: 2px solid var(--bd-theme-border-000000, #000); border-radius: 50%; }
#takeoff-select .ts-wrapper.single .ts-control { position: relative; padding-right: 1.8rem; }
#takeoff-select .ts-wrapper.single .ts-control::after {
content: "\f0d7";
font-family: "Font Awesome 6 Free";
font-weight: 900;
position: absolute;
right: 0.6rem;
top: 50%;
transform: translateY(-50%);
pointer-events: none;
font-size: .75rem;
color: var(--bd-theme-fg-555555, #555);
}
#takeoff-select .ts-wrapper.single .ts-control .bd-chip { max-width: calc(100% - 1.5rem); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
body.modal-open{overflow:hidden!important;}
#rfpGroupsModal .modal-content{overflow:hidden;}
#rfp-split{height:calc(760px - 40px - 44px);overflow:hidden;}
#rfp-groups-list{width:360px;height:100%;overflow-y:auto;}
#rfp-group-detail{height:100%;overflow-y:auto;}
.rfp-group-item{ all:unset; display:flex;justify-content:space-between;align-items:center; padding:.4rem .5rem;border-left:4px solid transparent;border-radius:4px; margin-bottom:2px;cursor:pointer;transition:background .15s,border-color .15s; }
.rfp-group-item:hover{background:var(--bd-theme-bg-f9f9f9, #f9f9f9);}
.rfp-group-item.selected{border-left-color:var(--bd-theme-border-e0c84d, #e0c84d);background:var(--bd-theme-bg-ffffff, #fff);font-weight:500;}
.rfp-name{color:var(--bd-theme-fg-000000, #000);}
.bd-badge-count{ display:inline-block;min-width:1.4rem;text-align:center; font-size:.7rem;border:1px solid var(--bd-theme-border-000000, #000);border-radius:.5rem; padding:0 .35rem;background:var(--bd-theme-bg-fdfdfd, #fdfdfd); }
.contact-chip{font-size:.8rem;}
.invalid-hint{margin-top:4px;color:var(--bd-theme-fg-cc0000, #c00);}
#rfp-groups-list,#rfp-group-detail{scrollbar-width:thin;scrollbar-color:var(--bd-theme-palette-bbbbbb, #bbb) transparent;}
#rfp-groups-list::-webkit-scrollbar,#rfp-group-detail::-webkit-scrollbar{width:6px;}
#rfp-groups-list::-webkit-scrollbar-thumb,#rfp-group-detail::-webkit-scrollbar-thumb{background:var(--bd-theme-bg-bbbbbb, #bbb);border-radius:3px;}
@media(max-width:768px){
#rfpGroupsModal .modal-dialog{width:95%!important;max-width:95%!important;}
#rfpGroupsModal .modal-content{height:85vh!important;}
#rfp-split{height:calc(85vh - 40px - 44px)!important;flex-direction:column!important;}
#rfp-groups-list{width:100%!important;border-right:none!important;border-bottom:1px solid var(--bd-theme-border-000000, #000)!important;height:30vh!important;}
#rfp-group-detail{width:100%!important;height:55vh!important;}
}
/* Remaining estimates module bridges */
.bd-modal-show-overlay {
display: block;
background: var(--bd-theme-bg-000000-80, rgba(0,0,0,.5));
}
.bd-modal-show-overlay-soft {
display: block;
background: var(--bd-theme-bg-000000-73, rgba(0,0,0,.45));
}
.bd-modal-shell-std {
width: 100%;
max-height: 90vh;
}
.bd-modal-shell-sm {
width: 100%;
max-width: 450px;
max-height: 90vh;
}
.bd-modal-shell-md {
width: 100%;
max-width: 700px;
max-height: 90vh;
}
.bd-w-4rem { width: 4rem; }
.bd-w-60px { width: 60px; }
.bd-w-70px { width: 70px; }
.bd-maxw-320 { max-width: 320px; }
.bd-minw-260 { min-width: 260px; }
.bd-minh-100 { min-height: 100px; }
.bd-font-ui { font-family:"Inter","Segoe UI",sans-serif; }
.bd-text-right { text-align: right; }
.bd-modal-show-overlay-strong { display:block; background: var(--bd-theme-bg-000000-8c, rgba(0,0,0,.55)); }
/* Estimates final utility bridges */
.bd-fs-105 { font-size: 1.05rem; }
.bd-maxw-160 { max-width: 160px; }
.bd-sticky-subhead { top: 0; background: var(--bd-theme-bg-f8f9fa, #f8f9fa); z-index: 5; }
.bd-left-accent-flat { position: static; top: auto; --edge-color:var(--bd-theme-palette-000000, #000); --edge-size:6px; border-radius:0; border-left:0; border-right:0; }
.bd-minw-280 { min-width: 280px; }
.bd-w-160-truncate { width:160px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.bd-mini-rail { flex:1; height:8px; background:var(--bd-theme-bg-f8f9fa, #f8f9fa); }
.bd-w-36-right { width:36px; text-align:right; }
.bd-mini-bar-shell { width:110px; height:8px; overflow:hidden; }
.bd-mini-bar-fill { width:0%; transition:width .8s ease; background:var(--bd-theme-bg-dddddd, #ddd); }
.bd-modal-center-fixed {
position: fixed; inset: 0; display: flex; align-items: center; justify-content: center;
z-index: 9999; background: transparent !important; padding: 0 !important;
}
.bd-modal-card-520 {
max-width: 520px; width: 100%; background: transparent !important; box-shadow: none !important;
}
.bd-w-100 { width:100%; }
.bd-minh-70vh { min-height:70vh; }
.bd-w-250-scroll { width:250px; overflow-y:auto; }
.bd-overflow-y-auto { overflow-y:auto; }
.bd-h-6-bg { height:6px; background:var(--bd-theme-bg-f8f9fa, #f8f9fa); }
.bd-stage-label { font-size:.65rem; color:var(--bd-theme-fg-000000, #000); }
.bd-mapbox-inline { height:190px; border-radius:.6rem; overflow:hidden; border:1px solid var(--bd-theme-border-000000, #000); }
.bd-icon-black { color:var(--bd-theme-fg-000000, #000000); }
.bd-icon-red { color:var(--bd-theme-fg-dc3545, #dc3545); }
.bd-inbox-empty-ico { font-size:24px; opacity:.5; }
.bd-maxh-65vh-auto { max-height:65vh; overflow-y:auto; }
.bd-minh-60-maxh-80-auto { min-height:60vh; max-height:80vh; overflow-y:auto; }
.bd-maxh-240-auto { max-height:240px; overflow-y:auto; }
.bd-modal-dialog-1200 { width:1200px; max-width:1200px; }
.bd-modal-content-760 { width:100%; height:760px; display:flex; flex-direction:column; }
.bd-rfp-split-flex { overflow:hidden; flex:1 1 auto; }
.bd-rfp-groups-pane { width:360px; height:100%; overflow-y:auto; }
.bd-rfp-groups-detail { height:100%; overflow-y:auto; }
.bd-h-28 { height:28px; }
.bd-track-hidden { display:none; }
.bd-w-120 { width:120px; }
.bd-w-72 { width:72px; }
.bd-soft-border-10 { border-color:var(--bd-theme-border-000000-1a, rgba(0,0,0,0.10))!important; }
.bd-z2000-hide-max200 { z-index:2000; display:none; max-height:200px; overflow-y:auto; }
.bd-z2000-hide-max220 { z-index:2000; display:none; max-height:220px; overflow-y:auto; }
.bd-progress-10 { height:10px; }
.bd-maxw-480 { max-width: 480px; }
.bd-label-xs { font-size: .85rem; }
.bd-hide { display: none; }
.bd-modal-95-960-85 { width:95%; max-width:960px; height:85vh; }
.bd-icon-btn-28 { width:28px; height:28px; }
.bd-minh-0 { min-height: 0; }
.bd-pointer { cursor:pointer; }
.bd-overflow-auto { overflow:auto; }
.bd-minw-120 { min-width:120px; }
.bd-progress-max200 { max-width:200px; }
.bd-dot-6 { font-size:6px; }
.bd-no-pointer-dim { pointer-events:none; opacity:.6; }
.bd-th-30 { width:30px; }
.bd-th-110 { width:110px; }
.bd-minh-32 { min-height:32px; }
.bd-progress-h6 { height:6px; }
.bd-w-0 { width:0%; }
.bd-btn-xs { padding:0 .25rem; font-size:.75rem; }
.bd-modal-shell-500 { max-width:500px; width:100%; max-height:90vh; }
.bd-chip-lg { font-size:.95rem; }
.bd-price-display{display:inline-block;text-align:right;font-family:"Inter","Segoe UI",sans-serif;font-size:.85rem;min-width:100px;}
.bd-w-auto{width:auto;}
.bd-edge-danger{--edge-color:var(--bd-theme-palette-dc3545, #dc3545);}
.bd-edge-info{--edge-color:var(--bd-theme-palette-0d6efd, #0d6efd);}
/* Estimates compatibility map for template classes without local style blocks */
.bd-card-header,.bd-card-body,.bd-card-footer{padding:.75rem;}
.bd-card-header{border-bottom:1px solid var(--bd-theme-border-000000-1a, rgba(0,0,0,.1))}
.bd-card-footer{border-top:1px solid var(--bd-theme-border-000000-1a, rgba(0,0,0,.1))}
.bd-text-sm{font-size:.85rem}
.bd-pill-link{display:inline-flex;align-items:center;gap:.35rem;padding:.35rem .6rem;border:1px solid var(--bd-theme-border-000000, #000);border-radius:.45rem;background:var(--bd-theme-bg-ffffff, #fff);color:var(--bd-theme-fg-111111, #111);text-decoration:none}
.bd-pill-link.active{background:var(--bd-theme-bg-111111, #111);color:var(--bd-theme-fg-ffffff, #fff)}
.bd-nav-link{display:inline-flex;align-items:center;gap:.35rem;padding:.35rem .6rem;border:1px solid var(--bd-theme-border-000000, #000);border-radius:.45rem;background:var(--bd-theme-bg-ffffff, #fff);cursor:pointer}
.bd-nav-link.active{background:var(--bd-theme-bg-111111, #111);color:var(--bd-theme-fg-ffffff, #fff)}
.bd-btn-sm{padding:.2rem .45rem;font-size:.8rem}
.bd-btn-primary,.bd-btn-secondary,.bd-btn-success,.bd-btn-danger{border:1px solid var(--bd-theme-border-000000, #000);border-radius:.45rem;padding:.3rem .6rem;text-decoration:none;display:inline-flex;align-items:center;gap:.35rem}
.bd-btn-primary{background:var(--bd-theme-bg-111111, #111);color:var(--bd-theme-fg-ffffff, #fff)}.bd-btn-secondary{background:var(--bd-theme-bg-ffffff, #fff);color:var(--bd-theme-fg-111111, #111)}
.bd-btn-success{background:var(--bd-std-good-surface);color:var(--bd-theme-fg-145522, #145522)}.bd-btn-danger{background:var(--bd-std-danger-surface);color:var(--bd-theme-fg-8c241a, #8c241a)}
.bd-promote-spin{display:none}
.bd-btn-promote.htmx-request .bd-promote-spin{display:inline-block}
.bd-chip-mode,.bd-chip-flag,.bd-chip-inner,.bd-chip-option,.bd-chip-x{display:inline-flex;align-items:center;gap:.3rem}
.bd-chip-x{cursor:pointer}
.bd-est-owner,.bd-est-status,.bd-est-user,.bd-est-actions,.bd-est-rail{min-width:0}
.bd-est-desc{font-size:.78rem}
.bd-est-stage{font-size:.72rem;color:var(--bd-theme-fg-111111, #111)}
.bd-est-num-ico{font-size:.82rem;margin-left:.3rem}
.bd-est-act-label{white-space:nowrap}
.bd-est-chevron .chev{transition:transform .2s ease}
.bd-est-rail-tight .bd-est-list-card__body{padding:.65rem .75rem}
.bd-est-activity-btn{opacity:1;visibility:visible}
.bd-est-activity-footer{border-top:1px solid var(--bd-theme-border-000000-14, rgba(0,0,0,.08))}
.bd-mini-bar{height:8px;background:var(--bd-theme-bg-f8f9fa, #f8f9fa);border:1px solid var(--bd-theme-border-000000-1f, rgba(0,0,0,.12));border-radius:999px;overflow:hidden}
.bd-mini-fill{height:100%;background:var(--bd-theme-bg-dddddd, #ddd);border-radius:999px}
.bd-progress{height:8px;background:var(--bd-theme-bg-f8f9fa, #f8f9fa);border:1px solid var(--bd-theme-border-000000-1f, rgba(0,0,0,.12));border-radius:999px;overflow:hidden}
.bd-progress-bar{height:100%;background:var(--bd-theme-bg-111111, #111)}
.bd-bulkbar,.bd-bulk-banner{position:sticky;top:8px;z-index:10;background:var(--bd-theme-bg-ffffff, #fff);border:1px solid var(--bd-theme-border-000000, #000);border-radius:.5rem}
.bd-checkbox{cursor:pointer}
.bd-inline-edit .editable-text{cursor:pointer}
.bd-review-edit{position:absolute;top:.5rem;right:.5rem;color:var(--bd-theme-fg-111111, #111)}
.bd-address-lookup,.bd-currency-field{min-height:34px}
.bd-address-suggestions{z-index:2000}
.bd-field-error{min-height:1rem}
.bd-form-warn{background:var(--bd-std-warn-surface);border:1px solid var(--bd-std-warn-border);padding:.4rem .55rem;border-radius:.45rem}
.bd-team-table{width:100%}.bd-team-pill{display:inline-flex;align-items:center;gap:.25rem;padding:.1rem .45rem;border:1px solid var(--bd-theme-border-000000, #000);border-radius:.4rem;background:var(--bd-theme-bg-ffffff, #fff)}
.bd-team-remove-btn{min-width:32px}
.bd-action-strip__btn.bd-team-remove-btn{width:32px;height:32px;border-radius:0!important;padding:0!important}
.bd-bidder-add-grid{display:grid;grid-template-columns:minmax(0,1fr) minmax(150px,220px);gap:.75rem;align-items:end}
.bd-bidder-add-action{display:flex;align-items:flex-end}
.bd-bidder-add-btn{width:100%;justify-content:center;min-height:34px}
@media (max-width:767.98px){.bd-bidder-add-grid{grid-template-columns:1fr}.bd-bidder-add-action{align-items:stretch}.bd-bidder-add-btn{width:100%}}
.bd-scope-list{display:grid;gap:.5rem}.bd-scope-row{display:flex;align-items:center;gap:.5rem}
.bd-scope-check{cursor:pointer}
.bd-scope-origin{font-size:.75rem;padding:.1rem .35rem;border:1px solid var(--bd-theme-border-000000, #000);border-radius:.35rem}
.bd-scope-origin-global{background:var(--bd-theme-bg-f3f4f6, #f3f4f6)}.bd-scope-origin-dept{background:var(--bd-theme-bg-fff7e6, #fff7e6)}.bd-scope-origin-custom{background:var(--bd-theme-bg-e7f1ff, #e7f1ff)}
.bd-ar-panel,.bd-ar-visual{display:grid;gap:.45rem}.bd-ar-vizrow{display:flex;align-items:center;gap:.45rem}
.bd-ar-cell{min-width:0}.bd-pct{font-size:.75rem;color:var(--bd-muted)}
.bd-stage-legend{display:flex;gap:.5rem;flex-wrap:wrap}
.bd-pi-rowlabel{font-size:.75rem;color:var(--bd-muted)}
.bd-pi-viz-stack{display:grid;gap:.35rem}
.bd-choice-card{border:1px solid var(--bd-theme-border-000000-24, rgba(0,0,0,.14));border-radius:.55rem;padding:.55rem;background:var(--bd-theme-bg-ffffff, #fff)}
.bd-choice-top{display:flex;align-items:center;justify-content:space-between;gap:.5rem}
.bd-choice-title{font-weight:600}.bd-choice-desc{font-size:.82rem;color:var(--bd-muted)}
.bd-choice-icon{opacity:.8}.bd-choice-badge{font-size:.72rem;padding:.1rem .35rem;border:1px solid var(--bd-theme-border-000000, #000);border-radius:.35rem}
.bd-choice-badge-tone-info{background:var(--bd-std-info-surface);border-color:var(--bd-std-info-border)}
.bd-choice-grid-2 {
display: grid;
grid-template-columns: repeat(2, minmax(0, 1fr));
gap: 0.75rem;
}
.bd-choice-grid-3 {
display: grid;
grid-template-columns: repeat(3, minmax(0, 1fr));
gap: 0.75rem;
}
.bd-choice-grid-auto {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
gap: 0.75rem;
}
.bd-choice-top {
align-items: flex-start;
justify-content: flex-start;
gap: 0.55rem;
flex-wrap: nowrap;
}
.bd-choice-title {
flex: 1 1 auto;
min-width: 0;
line-height: 1.15;
}
.bd-choice-badge {
flex: 0 0 auto;
white-space: nowrap;
align-self: flex-start;
}
.bd-choice-card-tight {
min-height: 0;
}
@media (max-width: 991.98px) {
.bd-choice-grid-2,
.bd-choice-grid-3,
.bd-choice-grid-auto {
grid-template-columns: 1fr;
}
}
.bd-tagchip{display:inline-flex;align-items:center;gap:.25rem;padding:.1rem .4rem;border:1px solid var(--bd-theme-border-000000, #000);border-radius:.35rem;background:var(--bd-theme-bg-ffffff, #fff)}
.bd-timeline{display:grid;gap:.55rem}
.bd-modal{position:fixed;inset:0;display:flex;align-items:center;justify-content:center;background:var(--bd-theme-bg-000000-73, rgba(0,0,0,.45));z-index:1060}
.bd-modal__dialog{width:min(680px,95vw);background:var(--bd-theme-bg-ffffff, #fff);border:1px solid var(--bd-theme-border-000000, #000);border-radius:.6rem}
.bd-wizard-page{display:grid;gap:1rem}.bd-wizard-step-anim{transition:opacity .2s ease,transform .2s ease}.bd-wizard-actionbar{display:flex;justify-content:space-between;gap:.5rem;flex-wrap:wrap}
.bd-left-accent-blue{position:relative}
.bd-left-accent-blue::before{content:"";position:absolute;left:0;top:0;bottom:0;width:4px;background:var(--bd-theme-bg-1f6fe5, #1f6fe5)}
.bd-badge{display:inline-flex;align-items:center;gap:.25rem;padding:.2rem .5rem;border:1px solid var(--bd-theme-border-000000, #000);border-radius:.4rem;background:var(--bd-theme-bg-ffffff, #fff);font-size:.78rem;font-weight:600}
.bd-badge-good,.bd-badge-success{background:var(--bd-std-good-surface);border-color:var(--bd-std-good-border);color:var(--bd-theme-fg-145522, #145522)}
.bd-badge-info{background:var(--bd-std-info-surface);border-color:var(--bd-std-info-border);color:var(--bd-theme-fg-184ea5, #184ea5)}
.bd-badge-warn,.bd-badge-warning{background:var(--bd-std-warn-surface);border-color:var(--bd-std-warn-border);color:var(--bd-theme-fg-7a4f00, #7a4f00)}
.bd-badge-bad,.bd-badge-danger{background:var(--bd-std-danger-surface);border-color:var(--bd-std-danger-border);color:var(--bd-theme-fg-8c241a, #8c241a)}
.bd-badge-muted,.bd-badge-secondary{background:var(--bd-std-muted-surface)}
.bd-badge-pulse-win{animation:bdWinPulse 1.15s ease-in-out infinite}
.bd-chip-good{background:var(--bd-std-good-surface);border-color:var(--bd-std-good-border)}
.bd-chip-info{background:var(--bd-std-info-surface);border-color:var(--bd-std-info-border)}
.bd-chip-warn{background:var(--bd-std-warn-surface);border-color:var(--bd-std-warn-border)}
.bd-chip-bad{background:var(--bd-std-danger-surface);border-color:var(--bd-std-danger-border)}
.bd-chip-muted{background:var(--bd-std-muted-surface)}
.bd-btn-followup,.bd-btn-label{display:inline-flex;align-items:center;gap:.35rem}
.bd-btn-icon{display:inline-flex;align-items:center;justify-content:center;width:26px;height:26px;border:1px solid var(--bd-theme-border-000000, #000);background:var(--bd-theme-bg-ffffff, #fff);border-radius:.35rem}
.bd-subcard{border:1px solid var(--bd-theme-border-000000, #000);border-radius:.65rem;background:var(--bd-theme-bg-ffffff, #fff)}
.bd-bidder-dropdown{position:relative}.bd-bidder-menu{z-index:50}
.bd-dropdown-fix{position:relative;z-index:5}
.bd-autosave-ind{display:inline-flex;align-items:center;gap:.25rem;font-size:.72rem;color:var(--bd-muted);}
@media (max-width: 576px) {
.bd-module-nav__row {
flex-direction: column;
align-items: flex-start;
}
.bd-module-nav__actions {
width: 100%;
}
.bd-module-nav .bd-btn {
flex: 1 1 calc(50% - 0.65rem);
justify-content: center;
}
.bd-metric-hero__grid {
gap: 1rem;
}
.bd-metric-hero__label,
.bd-metric-hero__metric {
min-width: 100%;
}
.bd-metric-hero__metric {
align-items: flex-start;
}
}
/* Timeclock bridge primitives: crew review + timesheet grids */
.bd-timesheet-grid {
width: 100%;
border-collapse: collapse;
font-size: 13px;
}
.bd-timesheet-grid th {
background: var(--bd-theme-bg-fafafa, #fafafa);
border-bottom: 1px solid var(--bd-theme-border-000000, #000);
padding: 6px;
text-align: center;
font-weight: 600;
}
.bd-timesheet-grid td {
border-bottom: 1px solid var(--bd-theme-border-e5e7eb, #e5e7eb);
padding: 0;
vertical-align: middle;
}
.col-assignment { text-align: left; padding-left: 10px; min-width: 220px; }
.col-day { width: 80px; }
.col-total { width: 80px; }
.col-actions { width: 90px; }
.timesheet-target { width: 100%; height: 28px; font-size: 13px; border: none; background: transparent; }
.cell-hour { position: relative; }
.timesheet-cell { width: 100%; height: 32px; border: none; background: transparent; text-align: center; font-size: 13px; }
.timesheet-cell:focus { outline: none; }
.cell-hour:focus-within { background: var(--bd-theme-bg-eef4ff, #eef4ff); box-shadow: inset 0 0 0 1px var(--bd-theme-shadow-2563eb, #2563eb); }
.cell-ro { height: 32px; padding: 0 6px; }
.cell-status { position: absolute; top: 2px; right: 4px; font-size: 11px; opacity: 0; transition: opacity 0.3s; }
.cell-status.success { color: var(--bd-theme-fg-16a34a, #16a34a); opacity: 1; }
.cell-status.error { color: var(--bd-theme-fg-dc2626, #dc2626); opacity: 1; }
.cell-total, .footer-day, .footer-week { text-align: center; font-weight: 600; }
.daily-ot, .week-ot { margin-top: 2px; font-size: 11px; color: var(--bd-theme-fg-92400e, #92400e); background: var(--bd-theme-bg-fef3c7, #fef3c7); border-radius: 999px; padding: 2px 6px; }
.cell-actions { display: flex; justify-content: center; gap: 6px; padding: 0 6px; }
.ts-action { border: none; background: transparent; color: var(--bd-theme-fg-6b7280, #6b7280); cursor: pointer; }
.ts-action:hover { color: var(--bd-theme-fg-111827, #111827); }
.ts-action.danger:hover { color: var(--bd-theme-fg-dc2626, #dc2626); }
.ts-banner { border-radius: 8px; padding: 8px 12px; font-size: 13px; }
.ts-banner.error { background: var(--bd-theme-bg-fef2f2, #fef2f2); color: var(--bd-theme-fg-991b1b, #991b1b); border: 1px solid var(--bd-theme-border-fecaca, #fecaca); }
.ts-banner.info { background: var(--bd-theme-bg-eff6ff, #eff6ff); color: var(--bd-theme-fg-1e40af, #1e40af); border: 1px solid var(--bd-theme-border-bfdbfe, #bfdbfe); }
.timesheet-row[data-row-type="clock"] .cell-assignment,
.timesheet-row[data-row-type="clock"] td { background: var(--bd-theme-bg-fcfcfc, #fcfcfc); }
.timesheet-row[data-row-type="clock"] .ts-action { opacity: 0.9; }
.ts-schedule-cell { min-width: 110px; cursor: pointer; }
.cell-editor { background: var(--bd-theme-bg-ffffff, #fff); border: 1px solid var(--bd-theme-border-000000, #000); border-radius: 4px; padding: 4px; }
.unscheduled-chip { border: 1px dashed var(--bd-theme-border-999999, #999); border-radius: 4px; padding: 3px 6px; cursor: pointer; font-size: 0.75rem; }
.unscheduled-chip:hover { background: var(--bd-theme-bg-f9fafc, #f9fafc); }
.ts-popover-card { width: 220px; z-index: 10000; }
.hour-input { width: 70px; text-align: center; margin-top: 2px; }
.add-entry-btn { padding: 1px 4px; font-size: 0.7rem; }
.ts-sticky-footer { z-index: 5; box-shadow: 0 -2px 6px var(--bd-theme-shadow-000000-0d, rgba(0, 0, 0, 0.05)); }
.crew-line { min-width: 0; }
.crew-name, .crew-title, .crew-metrics { white-space: nowrap; }
.crew-flags { min-width: 0; }
.crew-metric-strip .crew-metric { min-width: 120px; }
.crew-metric-num { font-weight: 800; font-size: 1.25rem; line-height: 1.1; color: var(--bd-theme-fg-111111, #111); }
.crew-metric-lbl { font-size: 0.8rem; color: var(--bd-theme-fg-6c757d, #6c757d); font-weight: 600; }
.crew-warn { color: var(--bd-theme-fg-b68200, #b68200); }
.crew-bad { color: var(--bd-theme-fg-b02a37, #b02a37); }
.crew-flag { display: inline-flex; align-items: center; gap: 6px; padding: 2px 10px; border-radius: 999px; border: 1px solid var(--bd-theme-border-111111, #111); font-size: 0.75rem; font-weight: 700; line-height: 1.2; }
.crew-flag-warn { background: var(--bd-theme-bg-fff6d9, #fff6d9); border-color: var(--bd-theme-border-b68200, #b68200); color: var(--bd-theme-fg-5c4c00, #5c4c00); }
.crew-flag-bad { background: var(--bd-theme-bg-fbeaea, #fbeaea); border-color: var(--bd-theme-border-b02a37, #b02a37); color: var(--bd-theme-fg-7d1f27, #7d1f27); }
#crew-timesheets-wrap .bd-card .btn-group.btn-group-sm,
#crew-timesheets-wrap .bd-card .btn-outline-secondary,
#crew-timesheets-wrap .bd-card .ts-week-nav { display: none !important; }
.crew-skel .skel { background: linear-gradient(90deg, var(--bd-theme-bg-f3f4f6, #f3f4f6) 25%, var(--bd-theme-bg-e5e7eb, #e5e7eb) 37%, var(--bd-theme-bg-f3f4f6, #f3f4f6) 63%); background-size: 400% 100%; animation: skel 1.2s ease-in-out infinite; border-radius: 10px; border: 1px solid var(--bd-theme-border-000000-0f, rgba(0,0,0,0.06)); }
.skel-icon { width: 22px; height: 22px; border-radius: 6px; }
.skel-line { height: 14px; }
.skel-box { height: 72px; width: 100%; border-radius: 14px; }
@keyframes skel { 0% { background-position: 100% 0; } 100% { background-position: 0 0; } }
.crew-card.is-busy { opacity: 0.85; }
.crew-card .crew-btn[disabled] { opacity: 0.6; cursor: not-allowed; }
.crew-busy-overlay { position: absolute; inset: 0; display: none; align-items: center; justify-content: center; background: var(--bd-theme-bg-ffffff-b8, rgba(255,255,255,0.72)); backdrop-filter: blur(2px); }
.crew-card.is-busy .crew-busy-overlay { display: flex; }
.crew-btn { border: 1px solid var(--bd-theme-border-111111, #111); border-radius: 10px; padding: 6px 10px; background: var(--bd-theme-bg-ffffff, #fff); line-height: 1; }
.crew-btn i { font-size: 0.95rem; }
.crew-btn-approve { border-color: var(--bd-theme-border-198754, #198754); color: var(--bd-theme-fg-198754, #198754); background: var(--bd-theme-bg-e8f7ee, #e8f7ee); }
.crew-btn-approve:hover { background: var(--bd-theme-bg-dff3e7, #dff3e7); }
.crew-btn-reject { border-color: var(--bd-theme-border-b02a37, #b02a37); color: var(--bd-theme-fg-b02a37, #b02a37); background: var(--bd-theme-bg-fbeaea, #fbeaea); }
.crew-btn-reject:hover { background: var(--bd-theme-bg-f6dada, #f6dada); }
@media (max-width: 768px) {
.crew-line { flex-direction: column; align-items: flex-start; gap: 6px !important; }
.crew-name, .crew-title, .crew-metrics { white-space: normal; }
.crew-state { width: 100%; justify-content: flex-start; }
}
/* Cross-module work shell primitives (reports/settings/pto/library) */
.bd-module-shell {
max-width: 1240px;
margin: 0 auto;
padding: 0 1.75rem;
display: flex;
flex-direction: column;
gap: 2rem;
}
#mainContent[data-page^="timeclock-"] {
padding: 2.5rem 0 3rem;
}
.bd-module-section {
display: flex;
flex-direction: column;
gap: 1.25rem;
}
.bd-module-header {
padding: 1.85rem 2rem;
border-radius: 1.5rem;
}
.bd-module-header__meta {
display: flex;
flex-direction: column;
gap: 0.75rem;
color: var(--bd-theme-fg-475569, #475569);
}
.bd-module-header__meta p { margin: 0; }
.bd-module-header__meta nav,
.bd-meta-sm {
display: flex;
gap: 0.35rem;
align-items: center;
flex-wrap: wrap;
font-size: 0.85rem;
color: var(--bd-theme-fg-94a3b8, #94a3b8);
}
.bd-module-header__meta nav a { color: var(--bd-theme-fg-64748b, #64748b); text-decoration: none; font-weight: 600; }
.bd-module-metric-grid {
display: grid;
gap: 1.15rem;
grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
}
.bd-module-card-cluster {
display: grid;
gap: 1.5rem;
grid-template-columns: repeat(auto-fit, minmax(340px, 1fr));
align-items: stretch;
}
.bd-module-card-stack {
display: flex;
flex-direction: column;
gap: 1.5rem;
}
.bd-module-section-footer {
padding: 1.65rem 1.85rem;
border-radius: 1.25rem;
}
.bd-text-sm { font-size: 0.85rem; }
.bd-text-md { font-size: 0.9rem; }
.bd-text-xs { font-size: 0.8rem; }
.bd-tracking-eyebrow { letter-spacing: 0.08em; }
.bd-w-48 { width: 48px; }
.bd-w-160 { width: 160px; }
.bd-col-min-320 { min-width: 320px; }
.bd-col-max-480 { max-width: 480px; }
.bd-col-max-420 { max-width: 420px; }
.bd-vtop { vertical-align: top; }
.bd-inline-flex-wrap { display: flex; flex-wrap: wrap; gap: 0.35rem; }
.pto-calendar-table { border-collapse: separate; border-spacing: 0.5rem; width: 100%; }
.pto-calendar-table th { font-size: 0.75rem; letter-spacing: .05em; color: var(--bd-theme-fg-64748b, #64748b); }
.pto-calendar-table td { background: linear-gradient(180deg,var(--bd-theme-bg-ffffff, #ffffff) 0%,var(--bd-theme-bg-f8fafc, #f8fafc) 100%); border:1px solid var(--bd-theme-border-0f172a-1a, rgba(15,23,42,0.1)); border-radius: 0.75rem; vertical-align: top; padding: 0.75rem; min-height: 120px; transition: box-shadow .2s ease; }
.pto-calendar-table td.outside { background: var(--bd-theme-bg-f1f5f9, #f1f5f9); color: var(--bd-theme-fg-94a3b8, #94a3b8); }
.pto-calendar-table td.today { box-shadow: 0 0 0 2px var(--bd-theme-shadow-0ea5e9-73, rgba(14,165,233,0.45)); }
.pto-calendar-table .day-heading { display:flex; justify-content: space-between; align-items:center; margin-bottom:0.5rem; }
.pto-calendar-table .day-heading span { font-weight: 600; }
.pto-chip { display:flex; flex-direction:column; align-items:flex-start; gap:0.35rem; padding:0.5rem 0.65rem; border-radius:0.85rem; border:1px solid var(--bd-theme-border-0f172a-2e, rgba(15,23,42,0.18)); background:var(--bd-theme-bg-ffffff, #fff); box-shadow:0 6px 14px var(--bd-theme-shadow-0f172a-14, rgba(15,23,42,0.08)); width:100%; transition:border-color .2s ease, box-shadow .2s ease; }
.pto-chip:hover { border-color:var(--bd-theme-border-2563eb-73, rgba(37,99,235,0.45)); cursor:pointer; box-shadow:0 8px 18px var(--bd-theme-shadow-2563eb-1f, rgba(37,99,235,0.12)); }
.pto-chip.is-mine { border-color:var(--bd-theme-border-2563eb-a6, rgba(37,99,235,0.65)); box-shadow:0 0 0 2px var(--bd-theme-shadow-2563eb-2e, rgba(37,99,235,0.18)); }
.pto-chip .name { font-size:0.8rem; font-weight:600; color:var(--bd-theme-fg-0f172a, #0f172a); }
.pto-chip .bd-chip { font-size:0.7rem; letter-spacing:.04em; }
.pto-empty { color:var(--bd-theme-fg-94a3b8, #94a3b8); font-size:0.85rem; }
@media (max-width: 1024px) {
.bd-card-calendar { grid-column: span 1; }
}
@media (max-width: 991.98px) {
.pto-calendar-table { border-spacing: 0.35rem; }
}
@media (max-width: 768px) {
.bd-module-header { padding: 1.5rem; }
.bd-section-header__row { flex-direction: column; align-items: flex-start; }
}
.bd-w-180 { width: 180px; }
.bd-w-220 { width: 220px; }
.bd-min-w-60 { min-width: 60px; }
.bd-progress-track { width: 100%; background: var(--bd-theme-bg-94a3b8-40, rgba(148,163,184,0.25)); border-radius: 0.5rem; overflow: hidden; }
.bd-progress-bar { height: 0.65rem; background: var(--bd-theme-bg-22c55e, #22c55e); }
.bd-left-accent-success { border-left: 4px solid var(--bd-theme-border-16a34a, #16a34a); }
/* Bridge coverage for shared Discovery template classes used across Timeclock */
.bd-surface { width: 100%; }
.bd-row { display: flex; }
.bd-col { flex: 1 1 0; min-width: 0; }
.bd-gap-3 { gap: 1rem; }
.bd-gap-4 { gap: 1.5rem; }
.bd-stack-sm { display: flex; flex-direction: column; gap: 0.5rem; }
.bd-stack-md { display: flex; flex-direction: column; gap: 1rem; }
.bd-stack-lg { display: flex; flex-direction: column; gap: 1.5rem; }
.bd-eyebrow {
font-size: 0.75rem;
letter-spacing: 0.08em;
font-weight: 600;
color: var(--bd-theme-fg-94a3b8, #94a3b8);
}
.bd-section-header__title,
.bd-section-header__meta,
.bd-section-header__actions,
.bd-section-nav,
.bd-row-actions,
.bd-card-title,
.bd-toolbar__bar,
.bd-toolbar__chips,
.bd-toolbar__filters,
.bd-toolbar__title,
.bd-toolbar__icon,
.bd-toolbar__meta,
.bd-hero-metrics,
.bd-hero-metric,
.bd-hero-metric__body,
.bd-card-filters,
.bd-card-cluster,
.bd-card-stack,
.bd-metric-grid {
display: flex;
}
.bd-section-header__title,
.bd-card-title,
.bd-toolbar__title,
.bd-hero-metric,
.bd-row-actions { align-items: center; gap: 0.75rem; }
.bd-section-header__actions,
.bd-toolbar__chips,
.bd-row-actions,
.bd-card-filters { flex-wrap: wrap; gap: 0.6rem; }
.bd-toolbar__bar,
.bd-row-actions { justify-content: space-between; }
.bd-toolbar__filters,
.bd-card-cluster,
.bd-metric-grid { display: grid; gap: 1rem; }
.bd-toolbar__filters { grid-template-columns: repeat(auto-fit, minmax(210px, 1fr)); }
.bd-card-cluster { grid-template-columns: repeat(auto-fit, minmax(340px, 1fr)); }
.bd-metric-grid { grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); }
.bd-card-stack { flex-direction: column; gap: 1rem; }
.bd-metric-icon,
.bd-hero-metric__icon {
width: 2.5rem;
height: 2.5rem;
border-radius: 0.85rem;
display: inline-flex;
align-items: center;
justify-content: center;
background: var(--bd-theme-bg-0f172a-14, rgba(15, 23, 42, 0.08));
}
.bd-metric-label,
.bd-hero-metric__label { font-size: 0.75rem; letter-spacing: 0.08em; color: var(--bd-theme-fg-94a3b8, #94a3b8); font-weight: 600; }
.bd-metric-value,
.bd-hero-metric__value { font-size: 1.85rem; font-weight: 600; color: var(--bd-theme-fg-0f172a, #0f172a); }
.bd-metric-meta { font-size: 0.85rem; color: var(--bd-theme-fg-64748b, #64748b); }
.bd-card-subsection { border-radius: 1rem; border: 1px solid var(--bd-theme-border-0f172a-14, rgba(15,23,42,0.08)); background: var(--bd-theme-bg-f8fafc-e6, rgba(248,250,252,0.9)); padding: 1rem 1.2rem; }
.bd-card-table { overflow: hidden; }
.bd-section-footer { padding: 1.25rem 1.5rem; }
.bd-section-alert { border-left: 4px solid currentColor; }
.bd-table { width: 100%; border-collapse: collapse; }
.bd-table th, .bd-table td { padding: 0.75rem 0.85rem; border-bottom: 1px solid var(--bd-theme-border-0f172a-14, rgba(15,23,42,0.08)); vertical-align: top; }
.bd-toolbar { border-radius: 1.35rem; padding: 1.5rem; border: 1px solid var(--bd-theme-border-0f172a-1f, rgba(15,23,42,0.12)); background: var(--bd-theme-bg-ffffff, #fff); }
.bd-toolbar__icon { width: 2.5rem; height: 2.5rem; border-radius: 0.85rem; justify-content: center; }
.bd-toolbar__meta { color: var(--bd-theme-fg-64748b, #64748b); font-size: 0.85rem; }
.bd-chip-sm { font-size: 0.72rem; padding: 0.2rem 0.5rem; }
.bd-chip-success { background: var(--bd-std-good-surface); border-color: var(--bd-std-good-border); color: var(--bd-theme-fg-145522, #145522); }
.bd-chip-danger { background: var(--bd-std-danger-surface); border-color: var(--bd-std-danger-border); color: var(--bd-theme-fg-8c241a, #8c241a); }
.bd-chip-ticket { background: var(--bd-theme-bg-0f172a-0a, rgba(15,23,42,0.04)); }
.bd-cell-editable { display: inline-flex; min-width: 56px; justify-content: flex-end; }
.bd-cell-editable.is-readonly { color: var(--bd-theme-fg-0f172a, #0f172a); }
.bd-form-error { border: 1px solid var(--bd-theme-border-b3261e-57, rgba(179,38,30,.34)); background: var(--bd-theme-bg-b3261e-14, rgba(179,38,30,.08)); color: var(--bd-theme-fg-8c241a, #8c241a); border-radius: 10px; padding: .6rem .75rem; }
.bd-field-error { color: var(--bd-theme-fg-8c241a, #8c241a); font-size: .82rem; }
.bd-btn-soft { background: var(--bd-theme-bg-0f172a-0d, rgba(15,23,42,0.05)); border: 1px solid var(--bd-theme-border-0f172a-1f, rgba(15,23,42,0.12)); color: var(--bd-theme-fg-111111, #111); }
.bd-btn-soft:hover { background: var(--bd-theme-bg-0f172a-17, rgba(15,23,42,0.09)); }
.bd-modal-overlay { position: fixed; inset: 0; background: var(--bd-theme-bg-0f172a-73, rgba(15,23,42,.45)); display: flex; align-items: center; justify-content: center; z-index: 1060; padding: 1rem; }
.bd-modal--wide { width: min(860px, 100%); }
.bd-modal__title { margin: 0; font-size: 1.1rem; display: inline-flex; align-items: center; gap: .5rem; }
.bd-add-timesheet-row { display: inline-flex; align-items: center; gap: 0.4rem; }
.crew-grid-shell { position: relative; }
.crew-head { border-bottom: 1px solid var(--bd-theme-border-0f172a-14, rgba(15,23,42,.08)); }
.bd-section-header__icon { display: inline-flex; align-items: center; justify-content: center; width: 3rem; height: 3rem; border-radius: 1rem; background: var(--bd-theme-bg-0f172a-14, rgba(15,23,42,0.08)); }
/* =========================================================
Discovery bridge primitives — workspace/table/grid/modal shells
========================================================= */
.bd-workspace-shell,
.bd-toolbar-shell {
background: var(--bd-theme-bg-ffffff, #fff);
}
.bd-list-table th.sortable {
cursor: pointer;
user-select: none;
white-space: nowrap;
}
.bd-list-table th.sortable:hover,
.bd-row-clickable:hover {
background-color: var(--bd-theme-bg-faf8ef, #faf8ef);
}
.bd-row-clickable {
cursor: pointer;
}
.bd-filter-chip {
cursor: pointer;
user-select: none;
transition: all .12s ease;
}
.bd-filter-chip:hover {
transform: translateY(-1px);
box-shadow: 0 1px 4px var(--bd-theme-shadow-000000-1f, rgba(0,0,0,.12));
}
.bd-filter-chip.is-active,
.bd-filter-chip.active {
background: var(--bd-theme-bg-111111, #111) !important;
color: var(--bd-theme-fg-ffffff, #fff) !important;
border-color: var(--bd-theme-border-000000, #000) !important;
}
.bd-list-row {
border: 1px solid var(--bd-theme-border-0f172a-17, rgba(15, 23, 42, 0.09));
border-radius: 8px;
background: var(--bd-theme-bg-ffffff, #fff);
transition: all .15s ease;
}
.bd-list-row:hover,
.bd-list-row.is-active {
background: var(--bd-theme-bg-f9fafb, #f9fafb);
box-shadow: 0 2px 6px var(--bd-theme-shadow-000000-0f, rgba(0,0,0,0.06));
}
:is(.bd-signature-panel, #ticket-signature-panel) { position: relative; }
.signature-surface {
border: 1px dashed var(--bd-theme-border-000000-40, rgba(0, 0, 0, 0.25));
border-radius: 10px;
background: var(--bd-theme-bg-fafafa, #fafafa);
padding: 8px;
height: 180px;
display: flex;
flex-direction: column;
justify-content: stretch;
}
.signature-canvas {
width: 100%;
height: 100%;
background: var(--bd-theme-bg-ffffff, #ffffff);
border-radius: 8px;
cursor: crosshair;
touch-action: none;
}
.signature-hint { text-align: center; margin-top: 4px; }
@media (max-width: 1024px) { .signature-surface { height: 200px; } }
@media (max-width: 768px) {
:is(.bd-signature-panel, #ticket-signature-panel)[data-expanded="0"] .signature-surface { height: 160px; }
}
:is(.bd-signature-panel, #ticket-signature-panel)[data-expanded="1"] {
position: fixed;
inset: 0;
z-index: 1050;
background: var(--bd-theme-bg-ffffff, #ffffff);
border-radius: 0;
padding: 12px;
overflow-y: auto;
padding-bottom: env(safe-area-inset-bottom);
}
:is(.bd-signature-panel, #ticket-signature-panel)[data-expanded="1"] .signature-surface { height: 55vh; }
@media (max-width: 768px) {
:is(.bd-signature-panel, #ticket-signature-panel)[data-expanded="1"] .signature-surface { height: 60vh; }
}
.signature-expand-btn i { transition: transform 0.2s ease; }
:is(.bd-signature-panel, #ticket-signature-panel)[data-expanded="1"] .signature-expand-btn i { transform: rotate(180deg); }
.signature-complete { background: var(--bd-theme-bg-f9fafb, #f9fafb); border-radius: 10px; padding: 12px; }
.signature-preview { max-height: 120px; display: block; background: var(--bd-theme-bg-ffffff, #fff); border-radius: 6px; }
.signature-invalid { border-color: var(--bd-theme-border-dc2626, #dc2626) !important; background: var(--bd-theme-bg-fff5f5, #fff5f5); }
#signature-error-banner { border-left: 4px solid var(--bd-theme-border-dc2626, #dc2626); }
.price-floor-lock,
.price-markup,
.price-volatility,
.bd-price-floor-lock,
.bd-price-markup,
.bd-price-volatility {
display:inline-flex;
align-items:center;
justify-content:center;
font-size:11px;
margin-right:4px;
opacity:.85;
}
.price-floor-lock,
.bd-price-floor-lock { cursor: help; }
.price-volatility,
.bd-price-volatility,
.price-markup,
.bd-price-markup { cursor: help; }
.item-kind-badge,
.bd-item-kind-badge {
display:inline-flex;
align-items:center;
justify-content:center;
font-size:10px;
font-weight:700;
letter-spacing:.06em;
border:1px solid var(--bd-theme-border-111111, #111);
border-radius:6px;
padding:1px 6px;
margin-right:6px;
line-height:1.2;
vertical-align:middle;
}
.item-kind-catalog,.bd-item-kind-catalog{ background:var(--bd-theme-bg-e9f1fd, #e9f1fd); border-color:var(--bd-theme-border-1f6fe5, #1f6fe5); color:var(--bd-theme-fg-123f87, #123f87); }
.item-kind-inventory,.bd-item-kind-inventory{ background:var(--bd-theme-bg-e8f4ec, #e8f4ec); border-color:var(--bd-theme-border-1a7f2e, #1a7f2e); color:var(--bd-theme-fg-145522, #145522); }
.item-kind-adhoc,.bd-item-kind-adhoc{ background:var(--bd-theme-bg-f0f0f0, #f0f0f0); border-color:var(--bd-theme-border-555555, #555); color:var(--bd-theme-fg-333333, #333); }
.bd-worksheet-grid-shell,
.ticket-grid-shell {
border: 1px solid var(--bd-theme-border-e5e7eb, #e5e7eb);
border-radius: 10px;
overflow: visible;
}
.bd-worksheet-grid,
.ticket-grid {
width: 100%;
font-size: 13px;
background: var(--bd-theme-bg-ffffff, #ffffff);
}
.bd-worksheet-grid__row,
.ticket-grid-row {
display: grid;
box-sizing: border-box;
grid-template-columns: minmax(0, 3fr) minmax(4ch, 0.6fr) minmax(3ch, 0.5fr) minmax(6ch, 0.8fr) minmax(7ch, 1fr) max-content max-content;
align-items: flex-start;
column-gap: 12px;
min-height: 35px;
padding: 4px 10px;
position: relative;
overflow: visible;
}
.bd-worksheet-grid__row::after,
.ticket-grid-row::after {
content: "";
position: absolute;
left: 12px;
right: 12px;
bottom: 0;
height: 1px;
background: var(--bd-theme-bg-e5e7eb, #e5e7eb);
}
.ticket-grid-row:not(.subtotal-row):not(.add-row):not(.ticket-grid-header):hover,
.bd-worksheet-grid__row:not(.subtotal-row):not(.add-row):not(.ticket-grid-header):hover { background: var(--bd-theme-bg-f9fafb, #f9fafb); }
.ticket-grid-header,
.bd-worksheet-grid__header { font-size: 11px; font-weight: 600; letter-spacing: 0.02em; color: var(--bd-theme-fg-6b7280, #6b7280); background: var(--bd-theme-bg-f8fafc, #f8fafc); border-bottom: 2px solid var(--bd-theme-border-d1d5db, #d1d5db); }
.ticket-grid-header::after,
.bd-worksheet-grid__header::after { display: none; }
.ticket-grid-section-header,
.bd-worksheet-grid__section-header { font-size: 11px; font-weight: 700; letter-spacing: 0.06em; color: var(--bd-theme-fg-374151, #374151); padding: 10px 12px; background: var(--bd-theme-bg-f9fafb, #f9fafb); border-top: 1px solid var(--bd-theme-border-e5e7eb, #e5e7eb); border-bottom: 1px solid var(--bd-theme-border-e5e7eb, #e5e7eb); }
.ticket-grid-row .cell,
.bd-worksheet-grid__row .cell,
.bd-worksheet-grid__cell { padding: 2px 4px; display: flex; align-items: center; white-space: nowrap; overflow: hidden; }
.ticket-grid-row .cell.actions,
.bd-worksheet-grid__row .cell.actions { overflow: visible; justify-content: center; gap: 6px; flex-shrink: 0; }
.ticket-grid-row .cell.desc,
.bd-worksheet-grid__row .cell.desc { font-size: 12px; font-weight: 400; white-space: normal; word-break: break-word; overflow-wrap: anywhere; line-height: 1.15; display:flex; align-items:center; gap:8px; min-width:0; }
.ticket-grid-row .cell.desc .ticket-item-select,
.bd-worksheet-grid__row .cell.desc .ticket-item-select { width:100%; min-width:0; }
.ticket-grid-row .cell.editable,
.bd-worksheet-grid__row .cell.editable { min-width:0; white-space:nowrap; overflow:visible; }
.ticket-grid-row .cell.editable:focus,
.bd-worksheet-grid__row .cell.editable:focus { background:var(--bd-theme-bg-eef2ff, #eef2ff); border-radius:4px; outline: 2px solid var(--bd-theme-border-111111-40, rgba(17,17,17,.25)); outline-offset:1px; }
.ticket-grid-row .cell.numeric,
.bd-worksheet-grid__row .cell.numeric { justify-content:flex-end; text-align:right; font-variant-numeric:tabular-nums; color:var(--bd-theme-fg-111827, #111827); }
.ticket-grid-row .cell.unit,
.bd-worksheet-grid__row .cell.unit { justify-content:center; color:var(--bd-theme-fg-6b7280, #6b7280); font-weight:500; user-select:none; }
.ticket-grid-row .cell.total,
.bd-worksheet-grid__row .cell.total { font-weight:600; color:var(--bd-theme-fg-111827, #111827); }
.ticket-grid-row .cell.currency::before,
.bd-worksheet-grid__row .cell.currency::before { content:"$"; opacity:.45; margin-right:2px; pointer-events:none; user-select:none; }
.ticket-grid-row.subtotal-row,
.bd-worksheet-grid__row.subtotal-row { background: linear-gradient(to right, var(--bd-theme-bg-f9fafb, #f9fafb), var(--bd-theme-bg-ffffff, #fff)); font-weight:700; border-top:1px solid var(--bd-theme-border-d1d5db, #d1d5db); }
.ticket-grid-row.subtotal-row::after,
.bd-worksheet-grid__row.subtotal-row::after { background:var(--bd-theme-bg-d1d5db, #d1d5db); }
.ticket-grid-row.add-row,
.bd-worksheet-grid__row.add-row { cursor:pointer; color:var(--bd-theme-fg-2563eb, #2563eb); font-weight:500; background:var(--bd-theme-bg-fafcff, #fafcff); }
.ticket-grid-row.add-row:hover,
.bd-worksheet-grid__row.add-row:hover { background:var(--bd-theme-bg-eef2ff, #eef2ff); }
.ticket-grid-row.empty-row,
.bd-worksheet-grid__row.empty-row { font-style:italic; color:var(--bd-theme-fg-9ca3af, #9ca3af); }
.icon-btn,
.bd-icon-btn { width:22px; height:22px; border-radius:6px; border:none; background:transparent; cursor:pointer; font-size:14px; line-height:22px; }
.icon-btn:hover,
.bd-icon-btn:hover { background:var(--bd-theme-bg-fee2e2, #fee2e2); color:var(--bd-theme-fg-dc2626, #dc2626); }
.revert-line{ opacity:.25; pointer-events:none; }
.ticket-grid-row.is-dirty .revert-line, .revert-line.visible{ opacity:1; pointer-events:auto; }
.ticket-grid-row[data-line-id]::before,
.bd-worksheet-grid__row[data-line-id]::before { content:""; position:absolute; left:0; top:0; bottom:0; width:3px; border-radius:2px; }
.ticket-grid-row[data-line-type="material"]::before,
.bd-worksheet-grid__row[data-line-type="material"]::before { background:var(--bd-theme-bg-bfdbfe, #bfdbfe); }
.ticket-grid-row[data-line-type="labor"]::before,
.bd-worksheet-grid__row[data-line-type="labor"]::before { background:var(--bd-theme-bg-fde68a, #fde68a); }
.ticket-grid-row[data-line-type="other"]::before,
.bd-worksheet-grid__row[data-line-type="other"]::before { background:var(--bd-theme-bg-fed7aa, #fed7aa); }
.ticket-grid-header::before,.ticket-grid-section-header::before,.ticket-grid-row.subtotal-row::before,.ticket-grid-row.add-row::before,.ticket-grid-row.empty-row::before { display:none !important; }
.ticket-grid-row.is-dirty::before{ background:var(--bd-theme-bg-facc15, #facc15); }
.ticket-grid-row.is-saving::before{ background:var(--bd-theme-bg-93c5fd, #93c5fd); }
.ticket-grid-row.is-error::before{ background:var(--bd-theme-bg-fca5a5, #fca5a5); }
.ticket-grid-row .cell.actions::after { content:""; width:6px; height:6px; border-radius:50%; background: var(--bd-theme-bg-111111-2e, rgba(17,17,17,.18)); display:inline-block; }
.ticket-grid-row.is-dirty .cell.actions::after{ background:var(--bd-theme-bg-facc15, #facc15); }
.ticket-grid-row.is-saving .cell.actions::after{ background:var(--bd-theme-bg-93c5fd, #93c5fd); }
.ticket-grid-row.is-error .cell.actions::after{ background:var(--bd-theme-bg-fca5a5, #fca5a5); }
.ticket-grid-row.is-saved .cell.actions::after{ background:var(--bd-theme-bg-86efac, #86efac); }
.ticket-grid .ts-wrapper, .ticket-grid .ts-control { width:100%; min-width:0; }
.ticket-grid .ts-control { min-height:28px; padding:2px 6px; border:1px solid var(--bd-theme-border-111111, #111); border-radius:8px; font-size:13px; line-height:1.2; }
.ts-dropdown{ z-index:5000 !important; }
.ts-group-header{ font-size:11px; font-weight:800; letter-spacing:.08em; padding:8px 10px; border-top:1px solid var(--bd-theme-border-e5e7eb, #e5e7eb); background:var(--bd-theme-bg-f9fafb, #f9fafb); color:var(--bd-theme-fg-374151, #374151); }
.ts-opt-row{ display:flex; align-items:flex-start; justify-content:space-between; gap:10px; padding:6px 10px; }
.ts-opt-title{ font-weight:600; font-size:13px; line-height:1.2; }
.ts-opt-sub{ font-size:11px; color:var(--bd-theme-fg-6b7280, #6b7280); margin-top:2px; line-height:1.2; }
.ts-opt-pill{ display:inline-flex; align-items:center; justify-content:center; border:1px solid var(--bd-theme-border-111111, #111); border-radius:999px; padding:1px 6px; font-size:10px; font-weight:700; white-space:nowrap; opacity:.9; }
.ts-opt-pill-adhoc{ background:var(--bd-theme-bg-f0f0f0, #f0f0f0); color:var(--bd-theme-fg-333333, #333); border-color:var(--bd-theme-border-555555, #555); }
.ts-opt-pill-cat{ background:var(--bd-theme-bg-e9f1fd, #e9f1fd); color:var(--bd-theme-fg-123f87, #123f87); border-color:var(--bd-theme-border-1f6fe5, #1f6fe5); }
.ts-opt-pill-inv{ background:var(--bd-theme-bg-e8f4ec, #e8f4ec); color:var(--bd-theme-fg-145522, #145522); border-color:var(--bd-theme-border-1a7f2e, #1a7f2e); }
.ts-no-results{ padding:8px 10px; font-size:12px; color:var(--bd-theme-fg-6b7280, #6b7280); }
/* =========================================================
Service migration bridges — expandable rows, split modals, tomselect option chips
========================================================= */
.rot-180 { transform: rotate(180deg); transition: transform .2s ease; }
.fa-chevron-down { transition: transform 0.25s ease; }
.slide-wrap,
.call-detail-wrap,
.bd-expandable-wrap {
transition: height .35s ease;
}
.slide-inner {
padding: 12px;
}
.bd-pulsate {
animation: bdPulse 1.5s infinite;
}
@keyframes bdPulse {
0% { box-shadow: 0 0 0 0 var(--bd-theme-shadow-dc3545-66, rgba(220,53,69,0.4)); }
70% { box-shadow: 0 0 0 10px var(--bd-theme-shadow-dc3545-00, rgba(220,53,69,0)); }
100% { box-shadow: 0 0 0 0 var(--bd-theme-shadow-dc3545-00, rgba(220,53,69,0)); }
}
.bd-ts-option {
padding: 6px 8px;
}
.bd-ts-call {
border-left: 3px solid var(--bd-theme-border-dc2626, #dc2626);
padding-left: 8px;
}
.bd-ticket-context-modal #ticket-context-drag-handle {
cursor: move;
}
.bd-split-modal .bd-split-modal__content {
display: flex;
flex-direction: column;
height: 90vh;
}
.bd-split-modal .bd-split-modal__body {
flex: 1 1 auto;
overflow: hidden;
padding: 0 !important;
}
.bd-split-modal .bd-split-modal__split {
display: flex;
height: 100%;
overflow: hidden;
}
.bd-split-modal .bd-split-modal__pane-main {
flex: 1 1 auto;
min-width: 0;
overflow-y: auto;
height: 100%;
}
.bd-split-modal .bd-split-modal__pane-side {
width: 420px;
min-width: 320px;
max-width: 60%;
flex: 0 0 auto;
flex-shrink: 0;
overflow-y: auto;
height: 100%;
transition: width 150ms ease;
}
.bd-split-modal .bd-split-modal__dialog {
transition: max-width 150ms ease;
}
.bd-split-modal .bd-split-modal__divider {
width: 6px;
cursor: col-resize;
background: transparent;
position: relative;
}
.bd-split-modal .bd-split-modal__divider::before {
content: "";
position: absolute;
top: 0;
bottom: 0;
left: 2px;
width: 2px;
background: var(--bd-theme-bg-111111, #111);
opacity: 0.2;
}
.bd-split-modal .bd-split-modal__divider:hover::before {
opacity: 0.6;
}
.bd-split-modal .bd-modal-wide,
.bd-split-modal .modal-lg.bd-modal-wide {
max-width: 1250px !important;
}
@media (max-width: 1400px) {
.bd-split-modal .bd-modal-wide {
max-width: 95vw;
}
}
.bd-split-modal .call-type-chip,
.bd-split-modal .priority-chip {
border: 1px solid var(--bd-theme-border-000000, #000);
}
.bd-split-modal .call-type-chip {
background: var(--bd-theme-bg-f8f9fa, #f8f9fa);
color: var(--bd-theme-fg-333333, #333);
}
.bd-split-modal .priority-chip {
background: var(--bd-theme-bg-ffffff, #fff);
color: var(--bd-theme-fg-111111, #111);
padding: 4px 10px;
border-radius: 999px;
font-size: 0.8rem;
display: inline-flex;
align-items: center;
gap: 4px;
}
.bd-split-modal .call-type-chip.active,
.bd-split-modal .priority-chip.active {
background: var(--bd-theme-bg-111111, #111) !important;
color: var(--bd-theme-fg-ffffff, #fff) !important;
border-color: var(--bd-theme-border-111111, #111) !important;
}
.ts-wrapper.bd-invalid .ts-control {
border-color: var(--bd-theme-border-dc3545, #dc3545) !important;
background: var(--bd-theme-bg-f8d7da, #f8d7da) !important;
}
.ts-dropdown .add-new-option {
background: var(--bd-theme-bg-f8f9fa, #f8f9fa);
border-top: 1px solid var(--bd-theme-border-000000, #000);
font-weight: 600;
}
.ts-dropdown .add-new-option:hover {
background: var(--bd-theme-bg-e9ecef, #e9ecef);
}
/* =========================================================
Service migration bridges — remaining module surfaces
========================================================= */
.bd-service-dashboard .bd-folder-link { color:var(--bd-theme-fg-212529, #212529); text-decoration:none; cursor:pointer; }
.bd-service-dashboard .bd-folder-link:hover { color:var(--bd-theme-fg-0d6efd, #0d6efd); text-decoration:underline; }
.bd-service-dashboard .bd-bulk-banner { display:flex; align-items:center; justify-content:space-between; padding:.4rem .75rem; border-bottom:1px solid var(--bd-theme-border-000000, #000); background:var(--bd-theme-bg-fff9db, #fff9db); font-size:.85rem; }
.bd-service-dashboard .bd-widget { background:var(--bd-theme-bg-ffffff, #fff); border:1px solid var(--bd-theme-border-e3e3e3, #e3e3e3); border-radius:10px; box-shadow:0 1px 2px var(--bd-theme-shadow-000000-0d, rgba(0,0,0,.05)); overflow:hidden; }
.bd-service-dashboard .bd-widget-header { display:flex; justify-content:space-between; align-items:center; padding:.55rem .8rem; border-bottom:1px solid var(--bd-theme-border-ececec, #ececec); background:var(--bd-theme-bg-fafafa, #fafafa); }
.bd-service-dashboard .bd-widget-body { padding:.4rem .8rem .6rem; }
.bd-service-dashboard .bd-widget-row { padding:.55rem 0 .55rem .25rem; border-bottom:1px dashed var(--bd-theme-border-eeeeee, #eee); cursor:pointer; }
.bd-service-dashboard .bd-widget-row:last-child{border-bottom:none;}
.bd-service-dashboard .bd-widget-row:hover{background:var(--bd-theme-bg-f9f9f9, #f9f9f9);}
.bd-service-dashboard .bd-widget-detail{display:none;margin-top:.4rem;padding-top:.45rem;border-top:1px dashed var(--bd-theme-border-eeeeee, #eee);}
.bd-service-dashboard .bd-widget-row.open .bd-widget-detail{display:block;animation:fadeIn .15s ease;}
.bd-service-dashboard .bd-detail-grid { display:grid; grid-template-columns:100px 1fr; column-gap:8px; row-gap:2px; }
.bd-service-dashboard .bd-stat-label { color:var(--bd-theme-fg-999999, #999); font-size:.72rem; letter-spacing:.3px; }
.bd-service-dashboard .bd-stat-value { font-size:.82rem; font-weight:500; color:var(--bd-theme-fg-222222, #222); }
.bd-service-dashboard .bd-priority.high{color:var(--bd-theme-fg-d32f2f, #d32f2f);font-weight:600;}
.bd-service-dashboard .bd-priority.medium{color:var(--bd-theme-fg-f57c00, #f57c00);}
.bd-service-dashboard .bd-priority.low{color:var(--bd-theme-fg-388e3c, #388e3c);}
.bd-site-form-surface .bd-card,
.bd-site-modal .bd-card,
.bd-pm-exec-modal .bd-card {
background:var(--bd-theme-bg-ffffff, #fff);
border-radius:10px;
}
.bd-site-form-surface .form-control,
.bd-site-form-surface .form-select,
.bd-site-modal .form-control,
.bd-site-modal .form-select,
.bd-pm-exec-modal .form-control,
.bd-pm-exec-modal .form-select {
font-family: "Inter", "Segoe UI", sans-serif;
font-size: 0.9rem;
}
.bd-site-modal .modal-content,
.bd-pm-exec-modal .modal-content,
.bd-site-form-surface {
background-color:var(--bd-theme-bg-fafafa, #fafafa);
}
.bd-pm-exec-modal .pm-task select { min-width:120px; }
.bd-pm-exec-modal .pm-task input[type="file"] { min-width:180px; }
.bd-library-shell .bd-file-row.selected { background-color:var(--bd-theme-bg-fff9db, #fff9db); border-left:3px solid var(--bd-theme-border-fcc419, #fcc419); }
.bd-library-shell .bd-file-row:hover { background-color:var(--bd-theme-bg-fffbea, #fffbea); }
.bd-library-shell .bd-left-accent::before { content:""; position:absolute; top:0; bottom:0; left:0; width:4px; background:var(--bd-theme-bg-fcc419, #fcc419); border-radius:.25rem 0 0 .25rem; }
.bd-library-file-table table { table-layout: fixed; width: 100%; border-collapse: collapse; }
.bd-library-file-table th,
.bd-library-file-table td { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; vertical-align: middle; padding: 0.45rem 0.55rem; }
.bd-library-file-table th { font-weight: 600; background: var(--bd-theme-bg-f8f9fa, #f8f9fa); color: var(--bd-theme-fg-212529, #212529); border-bottom: 2px solid var(--bd-theme-border-212529, #212529); }
.bd-library-file-table th:first-child,
.bd-library-file-table td:first-child { text-align: center; width: 32px !important; }
.bd-library-file-table td:nth-child(6),
.bd-library-file-table th:nth-child(6) { width: 90px !important; text-align: right; }
.bd-library-file-table td:nth-child(7),
.bd-library-file-table th:nth-child(7) { width: 160px !important; overflow: visible !important; white-space: nowrap !important; text-overflow: unset !important; }
.bd-library-file-table td.actions-cell,
.bd-library-file-table th:last-child { width: 120px !important; text-align: right; overflow: visible !important; white-space: nowrap !important; }
.bd-library-file-table .bd-file-name { display: inline-block; max-width: 260px; overflow: hidden; text-overflow: ellipsis; vertical-align: middle; }
.truncate-models,
.truncate-tags { position: relative; display: inline-block; max-width: 220px; overflow: hidden; text-overflow: ellipsis; vertical-align: middle; white-space: normal; line-height: 1.2em; max-height: 2.4em; cursor: pointer; }
.truncate-models::after,
.truncate-tags::after { content: '…'; position: absolute; bottom: 0; right: 0; background: linear-gradient(to left, var(--bd-theme-bg-ffffff, #fff) 50%, transparent); padding-left: 8px; }
.badge.bg-secondary-subtle { background: var(--bd-theme-bg-f8f9fa, #f8f9fa); color: var(--bd-theme-fg-333333, #333); border-color: var(--bd-theme-border-ced4da, #ced4da); }
.bd-library-file-table tbody tr:nth-child(even) { background-color: var(--bd-theme-bg-fdfdfd, #fdfdfd); }
.bd-library-file-table tbody tr:hover { background-color: var(--bd-theme-bg-fffbea, #fffbea); }
.bd-library-file-table tr { height: 38px; }
.bd-library-file-table td.no-truncate,
.bd-library-file-table td.no-truncate * { overflow: visible !important; text-overflow: unset !important; white-space: normal !important; }
.rename-active { min-width: 200px; max-width: 400px; }
.bd-file-row.is-folder { background-color: var(--bd-theme-bg-fffdf5, #fffdf5); }
.bd-file-row.is-folder:hover { background-color: var(--bd-theme-bg-fffbea, #fffbea); }
.bd-title-row {
display: flex;
align-items: center;
justify-content: space-between;
gap: 16px;
flex-wrap: wrap;
}
.bd-title-row > :first-child {
min-width: 0;
}
.bd-work-showcase__actions {
margin-left: auto;
flex: 0 0 auto;
width: auto;
max-width: none;
display: inline-flex;
align-items: center;
}
.bd-action-strip--project {
display: inline-flex;
align-items: stretch;
flex-wrap: nowrap;
width: auto;
max-width: none;
overflow: hidden;
border: 1px solid var(--bd-theme-border-cfd4dc, #cfd4dc);
border-radius: 12px;
background: var(--bd-theme-bg-ffffff, #fff);
box-shadow: none;
}
.bd-action-strip--project .bd-action-strip__btn {
flex: 0 0 auto;
width: 32px;
min-width: 32px;
height: 32px;
padding: 0;
border: 0;
border-left: 1px solid var(--bd-theme-border-dfe3e8, #dfe3e8);
display: inline-flex;
align-items: center;
justify-content: center;
text-decoration: none;
color: var(--bd-theme-fg-2b313c, #2b313c);
background: var(--bd-theme-bg-ffffff, #fff);
line-height: 1;
}
.bd-action-strip--project .bd-action-strip__btn:first-child {
border-left: 0;
}
.bd-action-strip--project .bd-action-strip__btn--hero {
width: auto;
min-width: 0;
padding: 0 14px;
gap: 8px;
justify-content: center;
background: var(--bd-theme-bg-111827, #111827);
color: var(--bd-theme-fg-ffffff, #fff);
font-weight: 400;
white-space: nowrap;
flex-shrink: 0;
}
.bd-action-strip--project .bd-action-strip__btn--hero .bd-action-strip__label {
white-space: nowrap;
}
.bd-action-strip--project .bd-action-strip__btn--hero i {
font-size: 14px;
}
.bd-action-strip--project .bd-action-strip__btn:not(.bd-action-strip__btn--hero):hover,
.bd-action-strip--project .bd-action-strip__btn:not(.bd-action-strip__btn--hero):focus-visible {
background: var(--bd-theme-bg-f8fafc, #f8fafc);
color: var(--bd-theme-fg-111827, #111827);
}
.bd-action-strip--project .bd-action-strip__btn--hero:hover,
.bd-action-strip--project .bd-action-strip__btn--hero:focus-visible {
background: var(--bd-theme-bg-0f172a, #0f172a);
color: var(--bd-theme-fg-ffffff, #fff);
}
.bd-upload-modal .modal-body,
.bd-equipment-modal .modal-body,
.bd-equipment-site-modal .modal-body {
max-height: 70vh;
overflow-y: auto;
}
.bd-equipment-site-modal .modal-body { max-height: 75vh; }
.upload-zone { cursor: pointer; transition: all .15s ease-in-out; }
.upload-zone.dragover { background-color: var(--bd-theme-bg-fffbea, #fffbea); border-style: dashed; }
.upload-zone .fw-medium { font-size: 0.95rem; }
.bd-upload-modal .form-control,
.bd-upload-modal .form-select,
.bd-equipment-modal .form-control,
.bd-equipment-modal .form-select { font-size: 0.875rem; padding: 0.35rem 0.5rem; height: auto; }
.bd-upload-modal .bd-card,
.bd-equipment-modal .bd-card,
.bd-inline-equipment-form .bd-card,
.bd-equipment-site-modal .bd-card { padding: 0.75rem 1rem; }
.bd-upload-modal label.form-label,
.bd-equipment-modal label.form-label { margin-bottom: 0.25rem; }
.bd-inline-equipment-form .form-control-sm,
.bd-inline-equipment-form .form-select-sm,
.bd-inline-equipment-form .ts-control,
.bd-equipment-site-modal .form-control-sm,
.bd-equipment-site-modal .form-select-sm,
.bd-equipment-site-modal .ts-control {
font-size: 0.84rem !important;
height: var(--bd-field-h-sm) !important;
min-height: var(--bd-field-h-sm) !important;
padding: 0 var(--bd-field-px-sm) !important;
}
.bd-inline-equipment-form { animation: fadeSlideDown 0.25s ease-in-out; }
@keyframes fadeSlideDown { from{opacity:0;transform:translateY(-10px);} to{opacity:1;transform:translateY(0);} }
#inline-equipment-form-wrapper select,
#site-equipment-form-wrap select,
.bd-equipment-modal select.ts-hidden-accessible,
.bd-equipment-modal .ts-wrapper+select {
display: none !important;
visibility: hidden !important;
height: 0 !important;
width: 0 !important;
position: absolute !important;
opacity: 0 !important;
pointer-events: none !important;
}
.bd-equipment-modal .modal-body::-webkit-scrollbar { width: 8px; }
.bd-equipment-modal .modal-body::-webkit-scrollbar-thumb { background-color: var(--bd-theme-bg-000000-40, rgba(0,0,0,0.25)); border-radius: 4px; }
.behind-modal { filter: brightness(0.6); pointer-events: none; }
.animate-slide-down { animation: slideDown 0.3s ease-in-out; }
@keyframes slideDown { from { opacity: 0; transform: translateY(-8px); } to { opacity: 1; transform: translateY(0); } }
.bd-expand-reveal,
.slide-expand {
overflow: hidden;
max-height: 0;
opacity: 0;
transition: max-height .4s ease, opacity .4s ease;
}
.bd-expand-reveal.show,
.slide-expand.show {
max-height: 1000px;
opacity: 1;
}
.bd-rating-dots,
.stat-dots {
display: inline-flex;
gap: 4px;
min-width: 48px;
justify-content: flex-end;
vertical-align: middle;
}
.bd-rating-dots .dot,
.stat-dots .dot {
width: 9px;
height: 9px;
border: 1px solid var(--bd-theme-border-4a4a4a, #4a4a4a);
border-radius: 50%;
background: var(--bd-theme-bg-ffffff, #fff);
}
.bd-rating-dots .dot.filled,
.stat-dots .dot.filled {
background: var(--bd-theme-bg-111111, #111);
border-color: var(--bd-theme-border-111111, #111);
}
textarea.form-control,
.bd-textarea {
min-height: 96px !important;
height: auto !important;
padding: 0.65rem 0.75rem !important;
line-height: 1.35 !important;
}
.form-control-sm,
.form-select-sm,
.bd-form-compact .form-control,
.bd-form-compact .form-select,
.bd-form-compact .input-group-text,
.bd-form-compact .ts-wrapper.single .ts-control {
min-height: var(--bd-field-h-sm) !important;
height: var(--bd-field-h-sm) !important;
padding-top: 0 !important;
padding-bottom: 0 !important;
padding-left: var(--bd-field-px-sm) !important;
padding-right: var(--bd-field-px-sm) !important;
border-radius: 8px !important;
font-size: 0.84rem !important;
}
.input-group > .form-control,
.input-group > .form-select,
.input-group > .input-group-text {
min-height: var(--bd-field-h) !important;
height: var(--bd-field-h) !important;
}
.input-group.input-group-sm > .form-control,
.input-group.input-group-sm > .form-select,
.input-group.input-group-sm > .input-group-text {
min-height: var(--bd-field-h-sm) !important;
height: var(--bd-field-h-sm) !important;
}
.ts-wrapper {
border-radius: var(--bd-field-radius) !important;
}
.ts-wrapper.single .ts-control {
display: flex !important;
align-items: center !important;
}
.ts-wrapper.multi .ts-control {
min-height: var(--bd-field-h) !important;
height: auto !important;
padding-top: 3px !important;
padding-bottom: 3px !important;
}
.ts-wrapper.multi .ts-control > div,
.ts-wrapper.multi .item {
border-radius: 8px !important;
}
.form-control:focus,
.form-select:focus,
.bd-input:focus,
.bd-native-select__field:focus,
.bd-textarea:focus,
.ts-wrapper.focus .ts-control {
box-shadow: 0 0 0 3px var(--bd-theme-shadow-0f172a-14, rgba(15, 23, 42, 0.08)) !important;
}
/* =========================================================
Global form control normalization
========================================================= */
.bd-input,
.bd-native-select__field,
.form-control:not(textarea):not([multiple]),
.form-select,
.input-group-text,
.ts-wrapper.single .ts-control,
.ts-wrapper.single.input-active .ts-control {
min-height: var(--bd-field-h) !important;
height: var(--bd-field-h) !important;
padding-top: 0 !important;
padding-bottom: 0 !important;
padding-left: var(--bd-field-px) !important;
padding-right: var(--bd-field-px) !important;
border-radius: var(--bd-field-radius) !important;
line-height: 1.2 !important;
font-size: 0.9rem !important;
}
textarea.form-control,
.bd-textarea {
min-height: 96px !important;
height: auto !important;
padding: 0.65rem 0.75rem !important;
line-height: 1.35 !important;
}
.form-control-sm,
.form-select-sm,
.bd-form-compact .form-control,
.bd-form-compact .form-select,
.bd-form-compact .input-group-text,
.bd-form-compact .ts-wrapper.single .ts-control {
min-height: var(--bd-field-h-sm) !important;
height: var(--bd-field-h-sm) !important;
padding-top: 0 !important;
padding-bottom: 0 !important;
padding-left: var(--bd-field-px-sm) !important;
padding-right: var(--bd-field-px-sm) !important;
border-radius: 8px !important;
font-size: 0.84rem !important;
}
.input-group > .form-control,
.input-group > .form-select,
.input-group > .input-group-text {
min-height: var(--bd-field-h) !important;
height: var(--bd-field-h) !important;
}
.input-group.input-group-sm > .form-control,
.input-group.input-group-sm > .form-select,
.input-group.input-group-sm > .input-group-text {
min-height: var(--bd-field-h-sm) !important;
height: var(--bd-field-h-sm) !important;
}
.ts-wrapper {
border-radius: var(--bd-field-radius) !important;
}
.ts-wrapper.single .ts-control {
display: flex !important;
align-items: center !important;
}
.ts-wrapper.multi .ts-control {
min-height: var(--bd-field-h) !important;
height: auto !important;
padding-top: 3px !important;
padding-bottom: 3px !important;
}
.ts-wrapper.multi .ts-control > div,
.ts-wrapper.multi .item {
border-radius: 8px !important;
}
.form-control:focus,
.form-select:focus,
.bd-input:focus,
.bd-native-select__field:focus,
.bd-textarea:focus,
.ts-wrapper.focus .ts-control {
box-shadow: 0 0 0 3px var(--bd-theme-shadow-0f172a-14, rgba(15, 23, 42, 0.08)) !important;
}
.ts-wrapper.single {
min-height: var(--bd-field-h) !important;
height: var(--bd-field-h) !important;
font-size: 0.9rem !important;
}
.ts-wrapper.single .ts-control {
min-height: var(--bd-field-h) !important;
height: var(--bd-field-h) !important;
padding: 0 var(--bd-field-px) !important;
display: flex;
align-items: center;
gap: .25rem;
}
/* =========================================================
Estimate expanded bridge card
========================================================= */
.bd-est-expand {
background: var(--bd-soft);
}
.bd-est-expand-shell {
display: grid;
gap: 12px;
padding: 1rem;
}
.bd-est-expand-grid {
display: grid;
grid-template-columns: repeat(2, minmax(0, 1fr));
gap: 12px;
}
.bd-est-expand-card {
background: var(--bd-bg);
border: 1px solid var(--bd-border);
border-radius: 12px;
padding: 12px 14px;
min-width: 0;
}
.bd-est-expand-card--summary,
.bd-est-expand-card--meta,
.bd-est-expand-card--activity {
grid-column: 1 / -1;
}
.bd-est-expand-eyebrow {
font-size: .72rem;
font-weight: 700;
letter-spacing: .08em;
color: var(--bd-muted);
margin-bottom: .55rem;
}
.bd-est-expand-summary {
font-size: .92rem;
line-height: 1.55;
}
.bd-est-expand-chip-row {
display: flex;
flex-wrap: wrap;
gap: 8px;
margin-top: 12px;
}
.bd-est-stat-grid {
display: grid;
grid-template-columns: repeat(2, minmax(0, 1fr));
gap: 10px;
}
.bd-est-stat,
.bd-est-meta-item {
background: var(--bd-soft);
border: 1px solid var(--bd-theme-border-000000-14, rgba(0, 0, 0, .08));
border-radius: 10px;
padding: 10px;
min-width: 0;
}
[data-theme="dark"] .bd-est-stat,
[data-theme="dark"] .bd-est-meta-item {
border-color: var(--bd-theme-border-ffffff-1f, rgba(255, 255, 255, .12));
}
.bd-est-stat__label,
.bd-est-meta-item__label,
.bd-est-activity-time {
font-size: .72rem;
font-weight: 600;
letter-spacing: .04em;
color: var(--bd-muted);
}
.bd-est-stat__value,
.bd-est-meta-item__value {
margin-top: .35rem;
font-weight: 600;
line-height: 1.4;
}
.bd-est-next-list {
margin: 0;
padding-left: 1.1rem;
display: grid;
gap: 8px;
}
.bd-est-next-list li {
line-height: 1.45;
}
.bd-est-meta-grid {
display: grid;
grid-template-columns: repeat(4, minmax(0, 1fr));
gap: 10px;
}
.bd-est-activity-list {
display: grid;
gap: 10px;
}
.bd-est-activity-row {
display: flex;
align-items: flex-start;
gap: 10px;
padding-top: 10px;
border-top: 1px solid var(--bd-theme-border-000000-14, rgba(0, 0, 0, .08));
}
[data-theme="dark"] .bd-est-activity-row {
border-color: var(--bd-theme-border-ffffff-1f, rgba(255, 255, 255, .12));
}
.bd-est-activity-row:first-child {
border-top: 0;
padding-top: 0;
}
.bd-est-activity-icon {
width: 22px;
flex: 0 0 22px;
display: inline-flex;
align-items: center;
justify-content: center;
margin-top: 1px;
}
.bd-est-activity-copy {
min-width: 0;
line-height: 1.45;
}
@media (max-width: 1199.98px) {
.bd-est-meta-grid {
grid-template-columns: repeat(2, minmax(0, 1fr));
}
}
@media (max-width: 991.98px) {
.bd-est-expand-shell {
padding: .85rem;
}
.bd-est-expand-grid,
.bd-est-stat-grid,
.bd-est-meta-grid {
grid-template-columns: 1fr;
}
}
@media (max-width: 767.98px) {
.container,
.container-fluid{
padding-left:0px !important;
padding-right:0px !important;
}
.page-content,
.main-content,
.content-page{
padding-left:0px !important;
padding-right:0px !important;
}
.card,
.bd-card{
margin-left:0 !important;
margin-right:0 !important;
}
}
/* ==========================================================================
BD25 — Compact band (≈768–1199px, e.g. iPad / narrow desktop)
--------------------------------------------------------------------------
Bootstrap's md/lg gap used to fall back to the full PHONE treatment:
the sidebar was hidden behind the hamburger as an overlay and the top-bar
search collapsed to a lone icon — wasting a lot of horizontal room.
Use the same collapsed state as the hamburger (`vertical-collpsed`) before
falling through to phone/off-canvas below 768px.
Wide screens (>=1200px) keep the full desktop shell; phones (<768px) keep
the hidden/off-canvas phone behavior.
========================================================================== */
@media (min-width: 768px) and (max-width: 1199.98px){
/* ---- TOP BAR: restore the inline search, drop the mobile search icon ---- */
#page-topbar .navbar-header > .flex-grow-1.d-none.d-lg-flex{
display: flex !important;
}
#page-topbar .navbar-header .bd-btn-ghost.d-lg-none{
display: none !important;
}
/* no left icon lives in the inline search here, so drop the reserved
ps-5 gap that otherwise looks like clipped padding */
#page-topbar #global-search.bd-has-left-icon{
padding-left: 14px !important;
}
/* Nazox hides the sidebar below 992px. Keep the real hamburger-collapsed
state visible in the compact band instead of inventing a second rail mode. */
body.vertical-collpsed:not(.bd-mobile-chrome) #layout-wrapper .vertical-menu,
body.vertical-collapsed:not(.bd-mobile-chrome) #layout-wrapper .vertical-menu{
display: block !important;
width: 70px !important;
z-index: 1001 !important;
}
body.vertical-collpsed:not(.bd-mobile-chrome) .main-content,
body.vertical-collapsed:not(.bd-mobile-chrome) .main-content{
margin-left: 70px !important;
}
}
/* Rail flyout panel (rendered at by bd-tablet-rail.js, so no clipping).
The rail is always dark in BD (body[data-sidebar="dark"]), so match it. */
.bd-rail-flyout{
position: fixed;
z-index: 3000;
width: 360px;
max-width: calc(100vw - 88px);
max-height: calc(100dvh - 16px);
box-sizing: border-box;
overflow-x: hidden;
overflow-y: auto;
overscroll-behavior: contain;
padding: 8px 0;
background: var(--bs-sidebar-dark-bg, var(--bd-theme-bg-1f2a3a, #1f2a3a));
border: 1px solid var(--bd-theme-border-ffffff-14, rgba(255,255,255,.08));
border-left: 0;
border-radius: 0 12px 12px 0;
transform-origin: left center;
box-shadow: 3px 6px 18px -6px var(--bd-theme-shadow-121315-99, rgba(18,19,21,.6));
font-size: .9rem;
}
html body .bd-rail-flyout .bd-rail-flyout-title{
display: block;
padding: 8px 16px 10px;
font-weight: 700;
color: var(--bd-theme-fg-ffffff, #fff);
white-space: normal;
overflow-wrap: anywhere;
border-bottom: 1px solid var(--bd-theme-border-ffffff-14, rgba(255,255,255,.08));
margin-bottom: 4px;
}
html body .bd-rail-flyout a{
display: flex;
align-items: flex-start;
gap: .65rem;
min-width: 0;
padding: 10px 16px;
color: var(--bd-theme-fg-ffffff-d1, rgba(255,255,255,.82));
text-decoration: none;
white-space: normal;
overflow-wrap: anywhere;
line-height: 1.45;
}
html body .bd-rail-flyout a>span{flex:1;min-width:0;white-space:normal!important;overflow:visible;overflow-wrap:anywhere;line-height:inherit}
html body .bd-rail-flyout a>i{flex:0 0 20px;min-width:20px;line-height:1.45;text-align:center}
html body .bd-rail-flyout a:hover,html body .bd-rail-flyout a:focus-visible{
color: var(--bd-theme-fg-ffffff, #fff);
background: var(--bd-theme-bg-ffffff-1a, rgba(255,255,255,.10));
}
.vertical-menu #sidebar-menu #side-menu>li.bd-rail-owner>a{
background:var(--bs-sidebar-dark-bg, var(--bd-theme-bg-1f2a3a,#1f2a3a))!important;
color:var(--bd-theme-fg-ffffff,#fff)!important;
border-radius:0!important;
}
/* Shared standards primitives promoted from /standards/.
Used by HTMX work partials so tables, filters, and first-load states render consistently. */
.std-filter-bar {
border: 1px solid var(--bd-theme-border-111111, #111);
border-radius: .82rem;
padding: .72rem;
background: var(--bd-theme-bg-ffffff, #fff);
}
.std-filter-grid {
display: grid;
grid-template-columns: minmax(220px, 1.4fr) repeat(3, minmax(150px, .8fr)) auto;
gap: .55rem;
align-items: end;
}
.std-filter-grid .form-label {
font-size: .76rem;
font-weight: 800;
line-height: 1.1;
color: var(--bd-theme-fg-667085, #667085);
}
.std-search-control {
display: flex;
align-items: center;
gap: .45rem;
min-height: 36px;
border: 1px solid var(--bd-theme-border-111111, #111);
border-radius: .55rem;
padding: .34rem .55rem;
background: var(--bd-theme-bg-ffffff, #fff);
}
.std-search-control input {
border: 0;
outline: 0;
width: 100%;
min-width: 0;
font-size: .9rem;
background: transparent;
}
.std-select-shell {
border: 1px solid var(--bd-theme-border-111111, #111);
border-radius: .55rem;
min-height: 36px;
display: flex;
align-items: center;
background: var(--bd-theme-bg-ffffff, #fff);
}
.std-select-shell select,
.std-select-shell input {
width: 100%;
min-width: 0;
border: 0 !important;
box-shadow: none !important;
background: transparent !important;
font-size: .9rem;
}
.std-btn-sample {
min-height: 36px;
border: 1px solid var(--bd-theme-border-111111, #111);
border-radius: .6rem;
display: inline-flex;
align-items: center;
justify-content: center;
gap: .42rem;
padding: .42rem .72rem;
font-weight: 800;
color: var(--bd-theme-fg-111827, #111827);
background: var(--bd-theme-bg-ffffff, #fff);
}
.std-btn-sample.is-primary {
background: var(--bd-theme-bg-111111, #111);
color: var(--bd-theme-fg-ffffff, #fff);
}
.std-btn-sample.is-muted {
background: var(--bd-theme-bg-f8fafc, #f8fafc);
}
.std-table-demo {
overflow: hidden;
}
.std-table-demo .table,
.std-table-demo .bd-table {
margin: 0;
min-width: 860px;
}
.std-table-head th,
.bd-table thead th {
background: var(--bd-theme-bg-f8fafc, #f8fafc);
color: var(--bd-theme-fg-667085, #667085);
font-size: .78rem;
font-weight: 800;
line-height: 1.15;
}
.std-sortable {
cursor: pointer;
user-select: none;
}
html body th.sortable,
html body .table th.sortable,
html body .bd-table th.sortable,
html body .std-sortable {
cursor: pointer !important;
user-select: none;
}
html body th.sortable *,
html body .table th.sortable *,
html body .bd-table th.sortable *,
html body .std-sortable *,
html body .sortable-inner,
html body .sort-icon {
cursor: pointer !important;
}
.std-sortable .sortable-inner {
display: inline-flex;
align-items: center;
gap: .25rem;
border-radius: .45rem;
padding: .12rem .32rem;
}
.std-sortable.sorted .sortable-inner {
border: 1px solid var(--bd-theme-border-111111, #111);
background: var(--bd-theme-bg-fff8e6, #fff8e6);
color: var(--bd-theme-fg-7a4f01, #7a4f01);
font-weight: 800;
}
.table-filter-banner-row {
background: var(--bd-theme-bg-eaf3ff, #eaf3ff);
}
.table-filter-banner-row > * {
background: var(--bd-theme-bg-eaf3ff, #eaf3ff) !important;
color: var(--bd-theme-fg-475467, #475467);
border-bottom: 1px solid var(--bd-theme-border-b8d3f0, #b8d3f0) !important;
}
.bd-table-shell {
overflow: hidden;
}
.bd-table-shell__scroll {
overflow: auto;
}
.bd-table-shell .bd-table th,
.bd-table-shell .bd-table td {
padding: .78rem .95rem;
}
.bd-table-shell .bd-table th:last-child,
.bd-table-shell .bd-table td:last-child,
.std-table-demo .table th:last-child,
.std-table-demo .table td:last-child {
padding-right: 1.15rem;
}
.bd-table-shell .bd-table th:first-child,
.bd-table-shell .bd-table td:first-child,
.std-table-demo .table th:first-child,
.std-table-demo .table td:first-child {
padding-left: 1.15rem;
}
.bd-table-shell .bd-table td:last-child .bd-action-strip,
.std-table-demo .table td:last-child .bd-action-strip {
margin-right: .05rem;
}
/* Standards table exterior spacing.
The table stays full-bleed inside its own shell; the card owns the bottom gap. */
html body .bd-card > .table-responsive,
html body .bd-card > .bd-table-wrap,
html body .bd-card > .bd-table-shell,
html body .bd-card > .bd-subcard:has(> .table-responsive),
html body .bd-card > .bd-subcard:has(> .bd-table-wrap),
html body .bd-card > [id$="-table"] > .bd-subcard:has(> .table-responsive),
html body .bd-card > [id$="-table"] > .bd-table-shell,
html body .bd-card > [id$="-table"] > .bd-htmx-load-panel,
html body .bd-card > [id$="-rows"] > .bd-htmx-load-panel,
html body .bd-card > .bd-htmx-load-panel {
margin-bottom: .85rem !important;
}
html body .bd-table-shell .table,
html body .bd-table-shell .bd-table,
html body .std-table-demo .table,
html body .std-table-demo .bd-table,
html body .bd-card > .table-responsive > .table,
html body .bd-card > .table-responsive > .bd-table,
html body .bd-card > .bd-table-wrap > .table,
html body .bd-card > .bd-table-wrap > .bd-table,
html body .bd-subcard > .table-responsive > .table,
html body .bd-subcard > .table-responsive > .bd-table,
html body .bd-subcard > .bd-table-wrap > .table,
html body .bd-subcard > .bd-table-wrap > .bd-table,
html body .bd-table-shell > .table-responsive > .table,
html body .bd-table-shell > .table-responsive > .bd-table,
html body .bd-table-shell > .bd-table-shell__scroll > .table,
html body .bd-table-shell > .bd-table-shell__scroll > .bd-table {
margin-bottom: 0 !important;
}
html body .bd-card > .table-responsive > .table tbody tr:last-child > *,
html body .bd-card > .table-responsive > .bd-table tbody tr:last-child > *,
html body .bd-card > .bd-table-wrap > .table tbody tr:last-child > *,
html body .bd-card > .bd-table-wrap > .bd-table tbody tr:last-child > *,
html body .bd-subcard > .table-responsive > .table tbody tr:last-child > *,
html body .bd-subcard > .table-responsive > .bd-table tbody tr:last-child > *,
html body .bd-subcard > .bd-table-wrap > .table tbody tr:last-child > *,
html body .bd-subcard > .bd-table-wrap > .bd-table tbody tr:last-child > *,
html body .bd-table-shell > .table-responsive > .table tbody tr:last-child > *,
html body .bd-table-shell > .table-responsive > .bd-table tbody tr:last-child > *,
html body .bd-table-shell > .bd-table-shell__scroll > .table tbody tr:last-child > *,
html body .bd-table-shell > .bd-table-shell__scroll > .bd-table tbody tr:last-child > * {
border-bottom: 0 !important;
}
.bd-htmx-load-panel {
min-height: 96px;
display: flex;
align-items: center;
justify-content: center;
gap: .65rem;
border: 1px solid var(--bd-theme-border-111111, #111);
border-radius: .82rem;
background:
linear-gradient(90deg, var(--bd-theme-bg-f8fafc-b2, rgba(248,250,252,.7)), var(--bd-theme-bg-ffffff-f2, rgba(255,255,255,.95)), var(--bd-theme-bg-f8fafc-b2, rgba(248,250,252,.7)));
color: var(--bd-theme-fg-667085, #667085);
font-size: .84rem;
font-weight: 800;
}
.bd-htmx-load-panel::before {
content: "";
width: 1rem;
height: 1rem;
border: 2px solid var(--bd-theme-border-111111-2e, rgba(17,17,17,.18));
border-top-color: var(--bd-theme-border-111111, #111);
border-radius: 999px;
animation: bdStdSpin .75s linear infinite;
}
.bd-htmx-load-panel.is-table {
min-height: 170px;
}
.docws-tab-loader {
padding: .9rem;
}
.st-shell-loading {
min-height: 96px;
display: flex;
align-items: center;
justify-content: center;
gap: .65rem;
border: 1px solid var(--bd-theme-border-111111, #111);
border-radius: .82rem;
background:
linear-gradient(90deg, var(--bd-theme-bg-f8fafc-b2, rgba(248,250,252,.7)), var(--bd-theme-bg-ffffff-f2, rgba(255,255,255,.95)), var(--bd-theme-bg-f8fafc-b2, rgba(248,250,252,.7)));
color: var(--bd-theme-fg-667085, #667085);
font-size: .84rem;
font-weight: 800;
}
.st-shell-loading::before {
content: "";
width: 1rem;
height: 1rem;
border: 2px solid var(--bd-theme-border-111111-2e, rgba(17,17,17,.18));
border-top-color: var(--bd-theme-border-111111, #111);
border-radius: 999px;
animation: bdStdSpin .75s linear infinite;
}
@keyframes bdStdSpin {
to { transform: rotate(360deg); }
}
@media (max-width: 991.98px) {
.std-filter-grid {
grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
}
}
@media (max-width: 575.98px) {
.std-filter-grid {
grid-template-columns: minmax(0, 1fr);
}
}