/* =========================================================
BuildDaily — Discovery (Monolithic)
Load LAST after Bootstrap/Nazox. Purpose: be authoritative.
========================================================= */
/* =========================
TOKENS & THEMES
========================= */
:root{
--bd-border:#000;
--bd-text:#111;
--bd-muted:#6b7280;
--bd-bg:#fff;
--bd-soft:#f7f7f9;
--bd-shadow:0 4px 12px rgba(0,0,0,.08);
--bd-radius:10px;
--bd-success:#1a7f2e;
--bd-info:#1f6fe5;
--bd-warn:#c88719;
--bd-danger:#b3261e;
--bd-focus:#fffbe6;
--bd-line:#f0f0f0;
}
[data-theme="dark"]{
--bd-border:#fff;
--bd-text:#f5f5f7;
--bd-muted:#9aa0a6;
--bd-bg:#191a1f;
--bd-soft:#20232a;
--bd-shadow:0 6px 20px rgba(0,0,0,.35);
--bd-success:#25c06d;
--bd-info:#5aa3ff;
--bd-warn:#ffb347;
--bd-danger:#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: #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 rgba(0,0,0,.08);
}
.bd-card-body{ padding:1.25rem; }
.bd-card-footer{
padding:1rem 1.25rem; border-top:1px solid 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:#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:#f1f3f5; color:var(--bd-text); }
.bd-btn-dark{ background:#111; border-color:#111; color:#fff !important; }
.bd-btn-dark:hover{ background:#000; border-color:#000; }
.bd-btn-outline{ background:#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:#fff !important; }
.bd-btn-ai{
background:linear-gradient(135deg, rgba(59,130,246,.12), rgba(14,116,144,.22));
border-color:rgba(37,99,235,.35); color:#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:#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:#e8f4ec !important; border-color:var(--bd-success) !important; color:#145522 !important; }
.bd-chip-info,.bd-badge-info{ background:#e9f1fd !important; border-color:var(--bd-info) !important; color:#123f87 !important; }
.bd-chip-warn,.bd-badge-warning{ background:#fff5e1 !important; border-color:var(--bd-warn) !important; color:#7a4f00 !important; }
.bd-chip-muted,.bd-badge-secondary{ background:#f0f0f0 !important; border-color:#555 !important; color:#333 !important; }
.bd-badge-danger{ background:#fdebea !important; border-color:var(--bd-danger) !important; color:#7a1a14 !important; }
.bd-quote-badge{ font-size:.8rem; padding:2px 6px; border-radius:4px; border:1px solid var(--bd-border); background:#f8f9fa; }
/* finance summary */
.bd-badge-revenue{ background:#eaf1fb !important; color:#084298 !important; }
.bd-badge-cost{ background:#fdecec !important; color:#8c1c13 !important; }
.bd-badge-gross{ background:#e9f8e9 !important; color:#145a14 !important; }
.bd-badge-net{ background:#d6f5d6 !important; color:#083d14 !important; }
.bd-badge-cash-pos{ background:#e9f8e9 !important; color:#0b5d0b !important; }
.bd-badge-cash-neg{ background:#fdecec !important; color:#a11212 !important; }
.bd-badge-markup-suggest{ background:#e6f9f9 !important; color:#0b4f4f !important; }
.bd-badge-markup-current{ background:#f2f2f2 !important; color:#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),
.bd-scroll-x:not(.bd-scroll-hint-off){
position:relative;
overflow-x:auto;
-webkit-overflow-scrolling:touch;
scrollbar-gutter:stable;
}
.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,
.bd-scroll-x:not(.bd-scroll-hint-off)::before,
.bd-scroll-x: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 rgba(0,0,0,.28);
border-radius:.65rem;
background:rgba(255,255,255,.94);
color:#111;
font-size:1rem;
line-height:1;
font-weight:800;
box-shadow:0 2px 8px 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,
.bd-scroll-x.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,
.bd-scroll-x.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),
.bd-scroll-x.bd-scroll-can-left:not(.bd-scroll-hint-off){
box-shadow:inset 26px 0 18px -24px 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),
.bd-scroll-x.bd-scroll-can-right:not(.bd-scroll-hint-off){
box-shadow:inset -26px 0 18px -24px 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),
.bd-scroll-x.bd-scroll-can-left.bd-scroll-can-right:not(.bd-scroll-hint-off){
box-shadow:inset 26px 0 18px -24px rgba(0,0,0,.26), inset -26px 0 18px -24px 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,
.bd-scroll-x:not(.bd-scroll-hint-off):hover::before,
.bd-scroll-x:not(.bd-scroll-hint-off):hover::after,
.bd-scroll-x:not(.bd-scroll-hint-off):focus-within::before,
.bd-scroll-x: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,
.bd-scroll-x:not(.bd-scroll-hint-off)::before,
.bd-scroll-x: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:#fff;
}
.bd-input:focus{ outline:none; box-shadow:0 0 0 2px 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: #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: #fff !important;
position: absolute !important;
top: 50% !important;
left: 50% !important;
transform: translate(-50%, -50%) !important;
}
[data-theme="dark"] .bd-checkbox:checked::after {
color: #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: #fcfcfc !important;
}
.table tbody tr:nth-child(even) td{ background:#fcfcfc; }
.table-secondary td{ background:#f8f9fa !important; font-weight:500; }
.bd-table-flat{
width:100%; border-collapse:separate; border-spacing:0; background:#fff;
border:1px solid var(--bd-border); border-radius:12px; overflow:hidden;
}
.bd-table-flat thead th{
background:#f1f2f4; font-size:.75rem; text-transform:uppercase; letter-spacing:.08em;
padding:.65rem; border-bottom:1px solid var(--bd-border);
}
.bd-table-flat tbody td{ padding:.65rem; border-bottom:1px solid 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:#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:#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:#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;
font-size: .75rem !important; /* smaller text */
font-weight: 500 !important;
color: #2d2d2d !important;
background: #f5f6f8 !important;
border-radius: .3rem !important;
padding: .3rem .6rem !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: #e8eaed !important;
color: #000 !important;
}
#estimate-nav .bd-pill-link.active {
background: #1a1f2d !important;
color: #fff !important;
font-weight: 600 !important;
}
#estimate-nav .bd-pill-link .bd-badge {
font-size: .65rem !important;
background: #e0a53c !important;
color: #fff !important;
border-radius: .4rem !important;
padding: .08rem .35rem !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: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:#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 #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:#6c757d; border:2px solid #fff; box-shadow:0 0 0 1px #ccc;
}
.bd-timeline-item.quote::before{ background:#198754; }
.bd-timeline-item.followup::before{ background:#0d6efd; }
.bd-timeline-item.decline::before{ background:#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 #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:#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:#f9f9f9; color:#333;
}
.bd-badge-search-estimate{ background:#e9f1fd !important; color:#123f87 !important; border-color:var(--bd-info) !important; }
.bd-badge-search-lead{ background:#e8f4ec !important; color:#145522 !important; border-color:var(--bd-success) !important; }
.bd-badge-search-contact{ background:#f0f0f0 !important; color:#333 !important; border-color:#555 !important; }
/* =========================
SKELETON / LOADING
========================= */
.skeleton{ position:relative; background:#f0f0f0; overflow:hidden; }
.skeleton::after{
content:""; position:absolute; top:0; left:-150px; height:100%; width:150px;
background:linear-gradient(90deg, transparent, rgba(255,255,255,.6), transparent);
animation:shimmer 1.2s infinite;
}
@keyframes shimmer{ 100%{ transform:translateX(100%);} }
.skeleton-row{ height:20px; margin-bottom:10px; border-radius:4px; }
/* =========================
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:#fff; color:#111; border:1px solid var(--bd-border); border-radius:8px; box-shadow:0 4px 12px 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,
.bd-subcard,
.card,
.modal,
.offcanvas,
.bd-modal__body,
.bd-modal,
.bd-section,
.section-panel {
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:rgba(0,0,0,.25) !important; }
/* =========================
GRIDSTER / DASHBOARD widgets (rounded fix + spacing)
========================= */
.gridster{ position:relative !important; overflow:visible !important; background:#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:#fff; border:1px solid var(--bd-border); border-radius:.5rem !important;
overflow:visible !important; box-shadow:0 4px 10px 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 rgba(0,0,0,.15); border-radius:12px; padding:.75rem; background: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:#fff; border:1px solid var(--bd-border); border-radius:.75rem; overflow:hidden; }
#project-file-manager thead th{
background:#f8f9fa; font-weight:600; color:#212529; border-bottom:1px solid var(--bd-border);
text-transform:uppercase; 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:#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:#fcc419; border-radius:.25rem 0 0 .25rem;
}
/* =========================
UTILITIES
========================= */
.bd-progress{ height:6px; border:1px solid var(--bd-border); border-radius:3px; background:#f8f9fa; overflow:hidden; }
.bd-progress-bar{ height:100%; transition:width .3s ease; }
.bd-highlight{ background:#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: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:#e8f4ec; border-color:var(--bd-success); }
.bd-workflow-warn{ background:#fff5e1; border-color:var(--bd-warn); }
.bd-workflow-bad{ background:#fdebea; border-color:var(--bd-danger); }
.bd-workflow-muted{ background:#f3f4f6; border-color:#6c757d; }
/* flash helper */
.flash-updated{ animation:bd-flash-success .9s ease; }
@keyframes bd-flash-success{ from{box-shadow:0 0 0 0 rgba(34,197,94,.45);} to{box-shadow:0 0 0 10px rgba(34,197,94,0);} }
/* === Discovery DataViz Tokens ================================== */
:root {
--bd-chart-bg: #ffffff;
--bd-chart-grid: #e5e7eb;
--bd-chart-text: #111827;
--bd-chart-muted: #9ca3af;
/* Palette (match Discovery accent tones) */
--bd-chart-blue: #1f6fe5;
--bd-chart-green: #1a7f2e;
--bd-chart-yellow: #c88719;
--bd-chart-red: #b3261e;
--bd-chart-gray: #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: rgba(26, 127, 46, 0.08);
border: 1px solid rgba(26, 127, 46, 0.35);
color: #0d4a20;
border-radius: var(--bd-radius);
padding: .75rem 1rem;
font-weight: 600;
}
/* Warning */
.bd-form-warn {
background: rgba(200, 135, 25, 0.08);
border: 1px solid rgba(200, 135, 25, 0.35);
color: #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: #fff5f5 !important; }
.bd-input.is-warn { border-color: var(--bd-warn) !important; background: #fffaf0 !important; }
.bd-input.is-success { border-color: var(--bd-success) !important; background: #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: #fff;
color: #000;
font-size: 12px;
}
.bd-card {
box-shadow: none !important;
border: 1px solid #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 #000 !important; padding: 4px; }
}
/* === Discovery Dark Mode Polish ================================ */
[data-theme="dark"] {
--bd-bg: #1a1b1f;
--bd-text: #ffffff;
--bd-border: #2d2f36;
--bd-muted: #9ca3af;
--bd-soft: #23252a;
--bd-shadow: 0 6px 16px rgba(0,0,0,.6);
--bd-success: #22c55e;
--bd-info: #60a5fa;
--bd-warn: #facc15;
--bd-danger: #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: #111;
color: var(--bd-text);
border-color: var(--bd-border);
}
[data-theme="dark"] .bd-chip,
[data-theme="dark"] .bd-badge {
background: #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: #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: 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: #fff;
color: var(--bd-text);
cursor: pointer;
line-height: 1;
}
#rightbar .bd-close:hover {
background: #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);
text-transform: uppercase;
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: #000;
}
/* 🔄 Skeleton shimmer */
.skeleton {
position: relative;
background: #f0f0f0;
overflow: hidden;
}
.skeleton::after {
content: "";
position: absolute;
top: 0; left: -150px;
height: 100%; width: 150px;
background: linear-gradient(90deg, transparent, rgba(255,255,255,.6), transparent);
animation: shimmer 1.2s infinite;
}
@keyframes shimmer {
100% { transform: translateX(100%); }
}
/* Skeleton table rows */
.skeleton-row {
height: 20px;
margin-bottom: 10px;
border-radius: 4px;
}
/* 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 #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 #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: #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 FA icons in quick search panel to neutral */
#quick-search-results i.fa-solid,
#quick-search-results i.fa-regular,
#quick-search-results i.fa-light,
#quick-search-results i.fa-duotone {
color: #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: #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::before {
content: "";
position: absolute;
top: 0;
left: 0;
bottom: 0;
width: var(--est-edge-size,6px);
background: var(--est-edge-color,#6c757d);
border-radius: .45rem 0 0 .45rem;
pointer-events: none;
transition: background .25s ease, width .25s ease;
}
/* Hover / selected emphasis */
.est-row:hover::before { width: 8px; }
.est-row.selected::before { width: 10px; box-shadow: 0 0 0 1px rgba(0,0,0,.25) inset; }
/* Priority colors (override via inline style or class) */
.est-row.priority-high::before { --est-edge-color:#dc3545; } /* red */
.est-row.priority-normal::before { --est-edge-color:#ffc107; } /* yellow */
.est-row.priority-low::before { --est-edge-color:#0d6efd; } /* blue */
.est-row.status-complete::before { --est-edge-color:#198754; } /* green */
/* 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;
}
.est-row:not(.bd-bulkbar)::before {
content:"";
position:absolute;
top:0; left:0; bottom:0;
width:var(--est-edge-size,6px);
background:var(--est-edge-color,#6c757d);
border-radius:.45rem 0 0 .45rem;
}
/* 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,
.bd-card, .card, .offcanvas,
.bd-modal, .bd-modal__body, .table-responsive {
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,#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: #fff !important;
border: 1px solid var(--bd-border);
box-shadow: 0 4px 12px 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: #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: #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: #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: #fff !important;
border: 1px solid var(--bd-border) !important;
box-shadow: 0 4px 12px 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: 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: #fff !important;
border: 1px solid var(--bd-border) !important;
box-shadow: 0 6px 20px 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: #e9ecef !important;
border: 1px solid #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) #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: #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: #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: #fff !important;
border-top: 1px solid #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: #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: #fff8c4; } /* pale yellow */
50% { background-color: #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: #cde5ff; } /* soft blue */
50% { background-color: #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: #fcefc2; } /* pale gold */
50% { background-color: #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 #000 !important;
border-radius: .5rem !important;
line-height: 1.2 !important;
min-width: 80px !important;
text-align: center !important;
background: #fff !important;
color: #212529 !important;
}
/* === Contextual variants === */
.bd-price-chip.good { background: #e8f9e9 !important; border-color: #28a745 !important; color: #155724 !important; }
.bd-price-chip.warn { background: #fff7e6 !important; border-color: #f0ad4e !important; color: #a96f05 !important; }
.bd-price-chip.bad { background: #ffe5e5 !important; border-color: #dc3545 !important; color: #b02a37 !important; }
.bd-price-chip.muted { background: #f1f3f5 !important; border-color: #6c757d !important; color: #495057 !important; }
.bd-price-chip.info { background: #e7f1fb !important; border-color: #0d6efd !important; color: #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: #e8f9e9 !important;
border-color: #28a745 !important;
color: #155724 !important;
}
/* Draft / editable pricing stays neutral */
.bd-price-chip.editable {
background: #fff !important;
border-color: #000 !important;
color: #212529 !important;
}
/* Hover cue for editable chips only */
.bd-price-chip.editable:hover {
background: #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 #000; background:#fffbe6 !important; transition:background .15s; }
.bd-chip-clickable {
border: 1px solid #000;
border-radius: 8px;
padding: 2px 8px;
cursor: pointer;
user-select: none;
transition: background-color .2s;
}
.bd-chip-clickable:hover { background-color: #f8f9fa; }
.bd-chip-clickable.active { background-color: #000; color: #fff; }
/* ======================================================
GLOBAL DISCOVERY CARD AESTHETIC — Unified White Panels
====================================================== */
/* Base card surfaces */
.bd-card,
.bd-subcard,
.card {
background-color: #fff !important; /* Pure white surface */
border: 1px solid rgba(0, 0, 0, 0.15) !important; /* Subtle border */
border-radius: 0.75rem !important; /* Soft Discovery corners */
box-shadow: 0 2px 6px rgba(0, 0, 0, 0.05) !important; /* Gentle lift */
color: #1a1a1a; /* Crisp dark text */
}
/* Keep nested cards consistent */
.bd-card .card,
.bd-subcard .card {
background-color: #fff !important;
border: 1px solid 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: #fff !important;
}
/* Page background — faint neutral gray for separation */
body,
.container-fluid,
#module-body,
.section-panel,
.module-content {
background-color: #f5f6f7 !important;
}
/* Compact headers inside cards */
.bd-card > .card-header,
.bd-subcard > .card-header {
background-color: #fff !important;
border-bottom: 1px solid 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: #fff !important;
border-color: rgba(0, 0, 0, 0.15) !important;
}
.table thead {
background-color: #fafafa !important;
border-bottom: 1px solid rgba(0, 0, 0, 0.1) !important;
}
/* Slight fade for empty state text */
.text-muted,
small.text-muted {
color: rgba(0, 0, 0, 0.55) !important;
}
/* Optional: smoother hover lift */
.hover-lift:hover {
box-shadow: 0 4px 10px 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;
}
/* === Fix table header clipping inside rounded containers === */
.table,
.table thead tr:first-child th:first-child {
border-top-left-radius: 0.5rem !important; /* match card radius */
}
.table,
.table thead tr:first-child th:last-child {
border-top-right-radius: 0.5rem !important;
}
.table thead th {
background-color: #f8f9fa !important; /* keep light header tone */
border-bottom: 1px solid #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: #fff; /* body surface */
}
.bd-card .table thead th {
background-color: #f8f9fa !important; /* light header */
border-bottom: 1px solid #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 #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 #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:#dc3545; }
50% { background-color:#1f6fe5; }
}
/* Optional: if you use .table-light footer */
.bd-card .table tfoot th,
.bd-card .table tfoot td {
background-color: #fff; /* or #f8f9fa if you want a light footer */
border-top: 1px solid #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: #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: #f8f9fa !important;
border-bottom: 1px solid #000 !important;
position: relative !important;
z-index: 1 !important;
}
/* --- Card wrapper single black border --- */
html body .bd-card,
html body .card {
border: 1px solid #000 !important;
border-radius: 0.75rem !important;
background: #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: #fff !important;
border: 1px solid #000 !important;
border-radius: 0.4rem !important;
box-shadow: 0 6px 20px 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: #f8f9fa !important;
border: 1px solid #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: #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 #000;
border-radius:0.4rem;
padding:4px 10px;
cursor:pointer;
background:#fff;
color:#111;
user-select:none;
transition:background .15s ease, color .15s ease, box-shadow .15s ease;
}
.bd-nav-link:hover {
background:#f3f3f3;
}
.bd-nav-link.active {
background:#111;
color:#fff;
box-shadow:0 0 0 2px #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: #000 !important;
color: #fff !important;
border: 1px solid #000 !important;
}
html body .bd-btn-outline {
background: #fff !important;
color: #000 !important;
border: 1px solid #000 !important;
}
html body .bd-btn-outline:hover {
background: #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: rgba(0, 0, 0, 0.25) !important;
border-radius: 999px !important;
}
/* 3️⃣ Slight inner padding to avoid clipping first/last columns */
.bd-card .table-responsive > table,
.table-responsive > table {
min-width: 640px !important; /* enough width for takeoff / file tables */
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 #000 !important;
border-radius: .5rem !important;
background: #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 */
#estimate-file-manager .table-responsive,
.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 #000 !important;
border-bottom: 1px solid #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: 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) {
#estimate-file-manager .table-responsive,
#file-list.table-responsive {
margin-bottom: 0.5rem !important;
border: 1px solid #000 !important;
border-radius: .5rem !important;
background: #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, #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,
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, #000) !important;
border-radius: 4px !important;
background: var(--bd-bg, #fff) !important;
cursor: pointer !important;
transition: all 0.15s ease-in-out !important;
box-shadow: none !important;
}
input[type="checkbox"].form-check-input:hover,
input[type="checkbox"].bd-checkbox:hover {
background: var(--bd-soft, #f7f7f9) !important;
}
input[type="checkbox"].form-check-input:checked,
input[type="checkbox"].bd-checkbox:checked {
background: #111 !important;
border-color: #111 !important;
}
input[type="checkbox"].form-check-input:checked::after,
input[type="checkbox"].bd-checkbox:checked::after {
content: "";
position: absolute;
width: 6px;
height: 10px;
border: solid #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,
[data-theme="dark"] input[type="checkbox"].bd-checkbox {
background: #1a1b1f !important;
border-color: var(--bd-border, #2d2f36) !important;
}
[data-theme="dark"] input[type="checkbox"].form-check-input:checked,
[data-theme="dark"] input[type="checkbox"].bd-checkbox:checked {
background: #fff !important;
border-color: #fff !important;
}
[data-theme="dark"] input[type="checkbox"].form-check-input:checked::after,
[data-theme="dark"] input[type="checkbox"].bd-checkbox:checked::after {
border-color: #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: #fff !important; /* clean Discovery white card */
border: 1px solid #000 !important;
border-radius: 0.75rem !important;
box-shadow: 0 4px 16px 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, #000) !important;
border-radius: 10px !important;
box-shadow: 0 4px 16px rgba(0, 0, 0, 0.12) !important;
background: var(--bd-bg, #fff) !important;
color: var(--bd-text, #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, #000) !important;
}
.notif-dropdown .list-group-item {
border: 0 !important;
border-bottom: 1px solid rgba(0,0,0,0.05) !important;
background: #fff !important;
color: var(--bd-text, #111) !important;
}
.notif-dropdown .list-group-item:hover {
background: #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: #fff !important;
font-weight: 600 !important;
color: var(--bd-text, #111) !important;
}
.notif-dropdown .border-top.text-center {
background: #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, #000) !important;
background: var(--bd-soft, #f5f5f7) !important;
color: var(--bd-text, #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: #e9ecef !important;
border-color: var(--bd-border, #000) !important;
color: var(--bd-text, #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,#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,rgba(255,0,0,0.15) 0%,transparent 70%);
opacity:0; transition:opacity .3s;
}
.has-notifs .notif-glow {opacity:.4;}
.notif-badge-count {
background:#dc3545!important;
font-size:.65rem!important;
min-width:16px!important;
line-height:1!important;
padding:2px 4px!important;
color:#fff!important;
font-weight:600;
}
.notif-dropdown {
border:1px solid var(--bd-border,#000)!important;
border-radius:10px!important;
box-shadow:0 4px 16px rgba(0,0,0,0.12)!important;
background:var(--bd-bg,#fff)!important;
overflow:hidden!important;
width:360px!important;
max-height:420px!important;
}
.notif-markall-btn{
background:var(--bd-soft,#f5f5f7)!important;
border:1px solid var(--bd-border,#000)!important;
border-radius:6px!important;
font-size:.8rem!important;
font-weight:500!important;
padding:2px 8px!important;
color:var(--bd-text,#111)!important;
transition:background .2s ease;
}
.notif-markall-btn:hover{background:#e9ecef!important;}
/* ==========================================================
👤 Profile Dropdown
========================================================== */
.profile-dropdown {
border:1px solid var(--bd-border,#000)!important;
border-radius:10px!important;
box-shadow:0 4px 12px rgba(0,0,0,0.12)!important;
background:var(--bd-bg,#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,#111)!important;
text-decoration:none!important;
transition:background .2s ease;
}
.profile-item:hover{
background:var(--bd-soft,#f7f7f9)!important;
}
/* ==========================================================
⚙️ Rightbar Toggle
========================================================== */
.rightbar-btn{
position:relative!important;
width:32px;height:32px;
border:none!important;
background:var(--bd-soft,#f5f5f7)!important;
border-radius:8px!important;
cursor:pointer;
transition:background .2s ease,transform .2s ease;
}
.rightbar-btn:hover{background:#e9ecef!important;transform:translateY(-1px);}
.rightbar-icon{
font-size:.85rem!important;
color:var(--bd-text,#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,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 #000 !important;
border-radius: 6px;
overflow: hidden;
background: #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 #000 !important;
background: #f8f8f8 !important;
color: #111;
font-weight: 600;
text-align: center;
padding: 4px 6px;
}
#schedule-grid tbody td {
border: 1px solid #000 !important;
background: #fff;
padding: 3px 6px;
vertical-align: middle;
}
/* --- Supervisor rows --- */
#schedule-grid tr.bg-light-subtle td {
background: #f3f3f3 !important;
font-weight: 600;
border-top: 2px solid #000 !important;
border-bottom: 1px solid #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: #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 #000 !important;
}
/* --- Make office/admin rows look clean --- */
#schedule-grid tr[data-employee-id] td {
border-top: 1px solid #000 !important;
border-bottom: 1px solid #000 !important;
}
.auto-selected {
border-color: #198754 !important;
box-shadow: 0 0 0 2px #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: #198754 !important;
box-shadow: 0 0 0 2px #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:#198754 !important; box-shadow:0 0 0 2px #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 #111 !important;
border-radius: 4px !important;
background: #fff !important;
box-shadow: 2px 2px 6px 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: #fff;
border-bottom: 1px solid #eee;
}
.ts-dropdown-portal .option:last-child {
border-bottom: none;
}
.ts-dropdown-portal .option:hover,
.ts-dropdown-portal .option.active {
background: #f8f9fa !important;
}
/* group headers */
.ts-dropdown-portal .optgroup-header {
font-weight: 600;
color: #222;
background: #f2f2f2;
border-bottom: 1px solid #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: #fff;
border-color: #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: #ffebeb;
color: #a10000;
border: 1px solid #000;
}
.bd-chip-high {
background-color: #fff4cc;
color: #7a4c00;
border: 1px solid #000;
}
.bd-chip-normal {
background-color: #f7f7f7;
color: #333;
border: 1px solid #000;
}
.bd-chip-low {
background-color: #f2f9f2;
color: #205520;
border: 1px solid #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 #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 #000; border-radius:.4rem; padding:.1rem .4rem;
background:#fff; font-size:.75rem; }
.bd-chip-muted { background:#f8f9fa; border-color:#adb5bd; color:#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: #1e1e2f;
color: #fff;
display: flex;
align-items: center;
gap: .5rem;
padding-left: 60px;
border-bottom: 1px solid rgba(255,255,255,0.15);
box-shadow: 0 2px 4px rgba(0,0,0,0.25);
}
#pwa-nav-toolbar .btn {
color: #fff;
border-color: rgba(255,255,255,0.3);
background: rgba(255,255,255,0.05);
font-size: .85rem;
padding: 3px 10px;
border-radius: 6px;
}
#pwa-nav-toolbar .btn:hover {
background: 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 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: #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: #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 {
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:#adb5bd; } /* gray for clocked_out */
/* =============================================
BD25 Project List — Shared Styling
============================================= */
/* ---------------------------------------------
Universal project row card base
--------------------------------------------- */
.project-row {
background: #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 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, #000);
border-radius: .5rem 0 0 .5rem;
pointer-events:none;
}
/* ---------------------------------------------
Metric tiles
--------------------------------------------- */
.project-row .metric-tile {
border: 1px solid #000;
border-radius: .55rem;
padding: .55rem .75rem;
background: #fff;
min-height: 56px;
}
.metric-tile .metric-label {
font-size: .72rem;
color: #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: #fff;
transition: box-shadow .25s ease;
}
.bd-card-expand:hover {
box-shadow: 0 4px 14px 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 #000;
font-size:.72rem;
background:#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 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: #fbeaea; /* soft red background */
border-color: #e5b1b1; /* soft red border */
color: #b30000; /* strong readable red text */
}
.bd-chip-bad i {
color: #b30000;
}
.bd-highlight {
background: #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: #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: #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: #f8f9fa;
border-bottom: 1px solid #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: #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: #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: #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: #f6f8fa;
}
.schedule-row.selected {
background: #fffbe6 !important;
outline: 2px solid #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: #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: #f3f3f3 !important;
cursor: not-allowed !important;
color: #999 !important;
}
/* ------------------------------------------------------------
PREDECESSORS
------------------------------------------------------------ */
.preds-cell { position: relative; overflow: visible; }
.preds-input {
width: 100%;
border: 1px solid #000;
padding: 2px 4px;
font-size: .82rem;
}
.preds-dropdown {
position: absolute;
top: 100%;
left: 0;
width: 260px;
background: #fff;
border: 1px solid #111;
border-radius: 6px;
box-shadow: 0 4px 10px 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: #f0f0f0;
}
/* ------------------------------------------------------------
ADD ROW
------------------------------------------------------------ */
.add-task-row {
background: #f8f9fa;
border-top: 1px solid var(--bd-border);
cursor: pointer;
}
.add-task-row:hover { background: #eef0f2; }
.add-task-btn {
font-weight: 600;
color: #111;
}
/* ------------------------------------------------------------
CRITICAL PATH HIGHLIGHTS
------------------------------------------------------------ */
.critical-row {
background: #fff4f4 !important;
border-left: 4px solid #d7263d !important;
}
.critical-bar .bar {
stroke: #d7263d !important;
fill: #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:#e5e5e5;
}
.bd-splitter:hover { background:#bbb; }
/* ------------------------------------------------------------
SCROLLBARS
------------------------------------------------------------ */
#schedule-grid-scroll::-webkit-scrollbar {
height:6px;
width:6px;
}
#schedule-grid-scroll::-webkit-scrollbar-thumb {
background:rgba(0,0,0,.25);
border-radius:999px;
}
#schedule-context-menu {
position: fixed;
z-index: 99999;
width: 200px;
background: #fff;
border: 1px solid #d0d7de;
border-radius: 10px;
padding: 6px 0;
box-shadow: 0 6px 20px 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: #1a1a1a;
user-select: none;
}
#schedule-context-menu .ctx-item:hover {
background: #f5f7fa;
}
#schedule-context-menu .ctx-item i {
width: 16px;
text-align: center;
}
#schedule-context-menu .ctx-item.danger {
color: #b30000;
}
#schedule-context-menu .ctx-item.danger:hover {
background: #ffeaea;
}
#schedule-context-menu .ctx-separator {
height: 1px;
background: #e5e5e5;
margin: 5px 0;
}
#gantt-context-menu {
position: fixed;
z-index: 99999;
width: 220px;
background: #fff;
border: 1px solid #d0d7de;
border-radius: 10px;
padding: 6px 0;
box-shadow: 0 6px 20px 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: #1a1a1a;
user-select: none;
}
#gantt-context-menu .ctx-item:hover {
background: #f5f7fa;
}
#gantt-context-menu .ctx-item i {
width: 16px;
text-align: center;
}
#gantt-context-menu .ctx-item.danger {
color: #b30000;
}
#gantt-context-menu .ctx-item.danger:hover {
background: #ffeaea;
}
#gantt-context-menu .ctx-separator {
height: 1px;
background: #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: #f5f7fa;
}
/* Enabled rows (H1 hybrid style) */
.ctx-enabled {
background: #eef4ff;
border-left-color: #1f6fe5;
opacity: 1;
}
.ctx-enabled:hover {
background: #eef4ff; /* no hover change, per Option 3 */
}
/* Separator */
.ctx-separator {
margin: 4px 0;
border-top: 1px solid #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: #eef4ff;
border-left-color: #1f6fe5;
}
/* Disabled rows */
.ctx-disabled {
opacity: 0.65;
}
/* Hover affects only disabled */
.ctx-disabled:hover {
background: #f5f7fa;
}
/* Separator */
.ctx-separator {
border-top: 1px solid #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: #fff !important;
border: 1px solid #111 !important;
border-radius: 6px !important;
box-shadow: 0 6px 16px 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: #fff !important;
border: 1px solid #000 !important;
border-radius: 6px !important;
box-shadow: 0 6px 16px 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: #f0f0f0;
}
#bd-calendar-popup .cal-day.selected {
background: #1f6fe5 !important;
color: #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: #222 !important;
}
.gantt .arrow {
stroke-width: 1.4px !important;
stroke: #444 !important;
}
.dep-handle {
transition: r .12s ease;
}
.dep-handle:hover {
r: 7;
}
.dep-drag-line {
pointer-events: none;
}
.milestone-diamond {
fill: #111;
stroke: #000;
stroke-width: 1;
}
.critical-bar + .milestone-diamond {
fill: #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: #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 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: #b02a37; /* bootstrap-ish danger, but you can map to your theme */
}
/* Invalid state styling hook */
.bd-input-wrap.is-invalid input,
input.is-invalid {
border-color: #dc3545 !important;
box-shadow: 0 0 0 .15rem 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.is-invalid > input{
border-color:#dc3545 !important;
box-shadow:0 0 0 .15rem rgba(220,53,69,.15) !important;
}
.bd-field-inline-error{
color:#dc3545;
font-size:.85rem;
margin-top:.25rem;
}
.bd-table-scroll {
overflow-y: auto;
overscroll-behavior: contain;
}
/* ===== 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 rgba(255,255,255,.10), 0 0 14px 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 rgba(255,255,255,.35);
border-top-color: #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: rgba(255,255,255,.14);
overflow: hidden;
margin-left: 6px;
}
.pwa-progress > span {
position:absolute; left:0; top:0; bottom:0;
width: 35%;
background: 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:#000;
--bd-text:#111;
--bd-muted:#6b7280;
--bd-bg:#fff;
--bd-soft:#f7f7f9;
--bd-shadow:0 4px 12px rgba(0,0,0,.08);
--bd-radius:10px;
--bd-success:#1a7f2e;
--bd-info:#1f6fe5;
--bd-warn:#c88719;
--bd-danger:#b3261e;
--bd-focus:#fffbe6;
--bd-line:#f0f0f0;
}
[data-theme="dark"]{
--bd-border:#fff;
--bd-text:#f5f5f7;
--bd-muted:#9aa0a6;
--bd-bg:#191a1f;
--bd-soft:#20232a;
--bd-shadow:0 6px 20px rgba(0,0,0,.35);
--bd-success:#25c06d;
--bd-info:#5aa3ff;
--bd-warn:#ffb347;
--bd-danger:#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:#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: #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 rgba(0,0,0,.08);
}
.bd-card-body{ padding:1.25rem; }
.bd-card-footer{
padding:1rem 1.25rem; border-top:1px solid 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:#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:#f1f3f5; color:var(--bd-text); }
.bd-btn-dark{ background:#111; border-color:#111; color:#fff !important; }
.bd-btn-dark:hover{ background:#000; border-color:#000; }
.bd-btn-outline{ background:#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:#fff !important; }
.bd-btn-ai{
background:linear-gradient(135deg, rgba(59,130,246,.12), rgba(14,116,144,.22));
border-color:rgba(37,99,235,.35); color:#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:#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:#e8f4ec !important; border-color:var(--bd-success) !important; color:#145522 !important; }
.bd-chip-info,.bd-badge-info{ background:#e9f1fd !important; border-color:var(--bd-info) !important; color:#123f87 !important; }
.bd-chip-warn,.bd-badge-warning{ background:#fff5e1 !important; border-color:var(--bd-warn) !important; color:#7a4f00 !important; }
.bd-chip-muted,.bd-badge-secondary{ background:#f0f0f0 !important; border-color:#555 !important; color:#333 !important; }
.bd-badge-danger{ background:#fdebea !important; border-color:var(--bd-danger) !important; color:#7a1a14 !important; }
.bd-quote-badge{ font-size:.8rem; padding:2px 6px; border-radius:4px; border:1px solid var(--bd-border); background:#f8f9fa; }
/* finance summary */
.bd-badge-revenue{ background:#eaf1fb !important; color:#084298 !important; }
.bd-badge-cost{ background:#fdecec !important; color:#8c1c13 !important; }
.bd-badge-gross{ background:#e9f8e9 !important; color:#145a14 !important; }
.bd-badge-net{ background:#d6f5d6 !important; color:#083d14 !important; }
.bd-badge-cash-pos{ background:#e9f8e9 !important; color:#0b5d0b !important; }
.bd-badge-cash-neg{ background:#fdecec !important; color:#a11212 !important; }
.bd-badge-markup-suggest{ background:#e6f9f9 !important; color:#0b4f4f !important; }
.bd-badge-markup-current{ background:#f2f2f2 !important; color:#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:#fff;
}
.bd-input:focus{ outline:none; box-shadow:0 0 0 2px 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: #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: #fff !important;
position: absolute !important;
top: 50% !important;
left: 50% !important;
transform: translate(-50%, -50%) !important;
}
[data-theme="dark"] .bd-checkbox:checked::after {
color: #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: #fcfcfc !important;
}
.table tbody tr:nth-child(even) td{ background:#fcfcfc; }
.table-secondary td{ background:#f8f9fa !important; font-weight:500; }
.bd-table-flat{
width:100%; border-collapse:separate; border-spacing:0; background:#fff;
border:1px solid var(--bd-border); border-radius:12px; overflow:hidden;
}
.bd-table-flat thead th{
background:#f1f2f4; font-size:.75rem; text-transform:uppercase; letter-spacing:.08em;
padding:.65rem; border-bottom:1px solid var(--bd-border);
}
.bd-table-flat tbody td{ padding:.65rem; border-bottom:1px solid 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:#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:#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:#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;
font-size: .75rem !important; /* smaller text */
font-weight: 500 !important;
color: #2d2d2d !important;
background: #f5f6f8 !important;
border-radius: .3rem !important;
padding: .3rem .6rem !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: #e8eaed !important;
color: #000 !important;
}
#estimate-nav .bd-pill-link.active {
background: #1a1f2d !important;
color: #fff !important;
font-weight: 600 !important;
}
#estimate-nav .bd-pill-link .bd-badge {
font-size: .65rem !important;
background: #e0a53c !important;
color: #fff !important;
border-radius: .4rem !important;
padding: .08rem .35rem !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: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:#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 #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:#6c757d; border:2px solid #fff; box-shadow:0 0 0 1px #ccc;
}
.bd-timeline-item.quote::before{ background:#198754; }
.bd-timeline-item.followup::before{ background:#0d6efd; }
.bd-timeline-item.decline::before{ background:#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 #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:#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:#f9f9f9; color:#333;
}
.bd-badge-search-estimate{ background:#e9f1fd !important; color:#123f87 !important; border-color:var(--bd-info) !important; }
.bd-badge-search-lead{ background:#e8f4ec !important; color:#145522 !important; border-color:var(--bd-success) !important; }
.bd-badge-search-contact{ background:#f0f0f0 !important; color:#333 !important; border-color:#555 !important; }
/* =========================
SKELETON / LOADING
========================= */
.skeleton{ position:relative; background:#f0f0f0; overflow:hidden; }
.skeleton::after{
content:""; position:absolute; top:0; left:-150px; height:100%; width:150px;
background:linear-gradient(90deg, transparent, rgba(255,255,255,.6), transparent);
animation:shimmer 1.2s infinite;
}
@keyframes shimmer{ 100%{ transform:translateX(100%);} }
.skeleton-row{ height:20px; margin-bottom:10px; border-radius:4px; }
/* =========================
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:#fff; color:#111; border:1px solid var(--bd-border); border-radius:8px; box-shadow:0 4px 12px 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,
.bd-subcard,
.card,
.modal,
.offcanvas,
.bd-modal__body,
.bd-modal,
.bd-section,
.section-panel {
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:rgba(0,0,0,.25) !important; }
/* =========================
GRIDSTER / DASHBOARD widgets (rounded fix + spacing)
========================= */
.gridster{ position:relative !important; overflow:visible !important; background:#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:#fff; border:1px solid var(--bd-border); border-radius:.5rem !important;
overflow:visible !important; box-shadow:0 4px 10px 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 rgba(0,0,0,.15); border-radius:12px; padding:.75rem; background: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:#fff; border:1px solid var(--bd-border); border-radius:.75rem; overflow:hidden; }
#project-file-manager thead th{
background:#f8f9fa; font-weight:600; color:#212529; border-bottom:1px solid var(--bd-border);
text-transform:uppercase; 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:#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:#fcc419; border-radius:.25rem 0 0 .25rem;
}
/* =========================
UTILITIES
========================= */
.bd-progress{ height:6px; border:1px solid var(--bd-border); border-radius:3px; background:#f8f9fa; overflow:hidden; }
.bd-progress-bar{ height:100%; transition:width .3s ease; }
.bd-highlight{ background:#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: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:#e8f4ec; border-color:var(--bd-success); }
.bd-workflow-warn{ background:#fff5e1; border-color:var(--bd-warn); }
.bd-workflow-bad{ background:#fdebea; border-color:var(--bd-danger); }
.bd-workflow-muted{ background:#f3f4f6; border-color:#6c757d; }
/* flash helper */
.flash-updated{ animation:bd-flash-success .9s ease; }
@keyframes bd-flash-success{ from{box-shadow:0 0 0 0 rgba(34,197,94,.45);} to{box-shadow:0 0 0 10px rgba(34,197,94,0);} }
/* === Discovery DataViz Tokens ================================== */
:root {
--bd-chart-bg: #ffffff;
--bd-chart-grid: #e5e7eb;
--bd-chart-text: #111827;
--bd-chart-muted: #9ca3af;
/* Palette (match Discovery accent tones) */
--bd-chart-blue: #1f6fe5;
--bd-chart-green: #1a7f2e;
--bd-chart-yellow: #c88719;
--bd-chart-red: #b3261e;
--bd-chart-gray: #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: rgba(26, 127, 46, 0.08);
border: 1px solid rgba(26, 127, 46, 0.35);
color: #0d4a20;
border-radius: var(--bd-radius);
padding: .75rem 1rem;
font-weight: 600;
}
/* Warning */
.bd-form-warn {
background: rgba(200, 135, 25, 0.08);
border: 1px solid rgba(200, 135, 25, 0.35);
color: #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: #fff5f5 !important; }
.bd-input.is-warn { border-color: var(--bd-warn) !important; background: #fffaf0 !important; }
.bd-input.is-success { border-color: var(--bd-success) !important; background: #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: #fff;
color: #000;
font-size: 12px;
}
.bd-card {
box-shadow: none !important;
border: 1px solid #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 #000 !important; padding: 4px; }
}
/* === Discovery Dark Mode Polish ================================ */
[data-theme="dark"] {
--bd-bg: #1a1b1f;
--bd-text: #e5e7eb;
--bd-border: #2d2f36;
--bd-muted: #9ca3af;
--bd-soft: #23252a;
--bd-shadow: 0 6px 16px rgba(0,0,0,.6);
--bd-success: #22c55e;
--bd-info: #60a5fa;
--bd-warn: #facc15;
--bd-danger: #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: #111;
color: var(--bd-text);
border-color: var(--bd-border);
}
[data-theme="dark"] .bd-chip,
[data-theme="dark"] .bd-badge {
background: #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: #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: 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: #fff;
color: var(--bd-text);
cursor: pointer;
line-height: 1;
}
#rightbar .bd-close:hover {
background: #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);
text-transform: uppercase;
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: #000;
}
/* 🔄 Skeleton shimmer */
.skeleton {
position: relative;
background: #f0f0f0;
overflow: hidden;
}
.skeleton::after {
content: "";
position: absolute;
top: 0; left: -150px;
height: 100%; width: 150px;
background: linear-gradient(90deg, transparent, rgba(255,255,255,.6), transparent);
animation: shimmer 1.2s infinite;
}
@keyframes shimmer {
100% { transform: translateX(100%); }
}
/* Skeleton table rows */
.skeleton-row {
height: 20px;
margin-bottom: 10px;
border-radius: 4px;
}
/* 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 #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 #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: #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 FA icons in quick search panel to neutral */
#quick-search-results i.fa-solid,
#quick-search-results i.fa-regular,
#quick-search-results i.fa-light,
#quick-search-results i.fa-duotone {
color: #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: #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::before {
content: "";
position: absolute;
top: 0;
left: 0;
bottom: 0;
width: var(--est-edge-size,6px);
background: var(--est-edge-color,#6c757d);
border-radius: .45rem 0 0 .45rem;
pointer-events: none;
transition: background .25s ease, width .25s ease;
}
/* Hover / selected emphasis */
.est-row:hover::before { width: 8px; }
.est-row.selected::before { width: 10px; box-shadow: 0 0 0 1px rgba(0,0,0,.25) inset; }
/* Priority colors (override via inline style or class) */
.est-row.priority-high::before { --est-edge-color:#dc3545; } /* red */
.est-row.priority-normal::before { --est-edge-color:#ffc107; } /* yellow */
.est-row.priority-low::before { --est-edge-color:#0d6efd; } /* blue */
.est-row.status-complete::before { --est-edge-color:#198754; } /* green */
/* 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;
}
.est-row:not(.bd-bulkbar)::before {
content:"";
position:absolute;
top:0; left:0; bottom:0;
width:var(--est-edge-size,6px);
background:var(--est-edge-color,#6c757d);
border-radius:.45rem 0 0 .45rem;
}
/* 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,
.bd-card, .card, .offcanvas,
.bd-modal, .bd-modal__body, .table-responsive {
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,#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: #fff !important;
border: 1px solid var(--bd-border);
box-shadow: 0 4px 12px 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: #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: #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: #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: #fff !important;
border: 1px solid var(--bd-border) !important;
box-shadow: 0 4px 12px 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: 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: #fff !important;
border: 1px solid var(--bd-border) !important;
box-shadow: 0 6px 20px 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: #e9ecef !important;
border: 1px solid #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) #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: #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: #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: #fff !important;
border-top: 1px solid #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: #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: #fff8c4; } /* pale yellow */
50% { background-color: #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: #cde5ff; } /* soft blue */
50% { background-color: #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: #fcefc2; } /* pale gold */
50% { background-color: #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 #000 !important;
border-radius: .5rem !important;
line-height: 1.2 !important;
min-width: 80px !important;
text-align: center !important;
background: #fff !important;
color: #212529 !important;
}
/* === Contextual variants === */
.bd-price-chip.good { background: #e8f9e9 !important; border-color: #28a745 !important; color: #155724 !important; }
.bd-price-chip.warn { background: #fff7e6 !important; border-color: #f0ad4e !important; color: #a96f05 !important; }
.bd-price-chip.bad { background: #ffe5e5 !important; border-color: #dc3545 !important; color: #b02a37 !important; }
.bd-price-chip.muted { background: #f1f3f5 !important; border-color: #6c757d !important; color: #495057 !important; }
.bd-price-chip.info { background: #e7f1fb !important; border-color: #0d6efd !important; color: #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: #e8f9e9 !important;
border-color: #28a745 !important;
color: #155724 !important;
}
/* Draft / editable pricing stays neutral */
.bd-price-chip.editable {
background: #fff !important;
border-color: #000 !important;
color: #212529 !important;
}
/* Hover cue for editable chips only */
.bd-price-chip.editable:hover {
background: #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 #000; background:#fffbe6 !important; transition:background .15s; }
.bd-chip-clickable {
border: 1px solid #000;
border-radius: 8px;
padding: 2px 8px;
cursor: pointer;
user-select: none;
transition: background-color .2s;
}
.bd-chip-clickable:hover { background-color: #f8f9fa; }
.bd-chip-clickable.active { background-color: #000; color: #fff; }
/* ======================================================
GLOBAL DISCOVERY CARD AESTHETIC — Unified White Panels
====================================================== */
/* Base card surfaces */
.bd-card,
.bd-subcard,
.card {
background-color: #fff !important; /* Pure white surface */
border: 1px solid rgba(0, 0, 0, 0.15) !important; /* Subtle border */
border-radius: 0.75rem !important; /* Soft Discovery corners */
box-shadow: 0 2px 6px rgba(0, 0, 0, 0.05) !important; /* Gentle lift */
color: #1a1a1a; /* Crisp dark text */
}
/* Keep nested cards consistent */
.bd-card .card,
.bd-subcard .card {
background-color: #fff !important;
border: 1px solid 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: #fff !important;
}
/* Page background — faint neutral gray for separation */
body,
.container-fluid,
#module-body,
.section-panel,
.module-content {
background-color: #f5f6f7 !important;
}
/* Compact headers inside cards */
.bd-card > .card-header,
.bd-subcard > .card-header {
background-color: #fff !important;
border-bottom: 1px solid 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: #fff !important;
border-color: rgba(0, 0, 0, 0.15) !important;
}
.table thead {
background-color: #fafafa !important;
border-bottom: 1px solid rgba(0, 0, 0, 0.1) !important;
}
/* Slight fade for empty state text */
.text-muted,
small.text-muted {
color: rgba(0, 0, 0, 0.55) !important;
}
/* Optional: smoother hover lift */
.hover-lift:hover {
box-shadow: 0 4px 10px 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;
}
/* === Fix table header clipping inside rounded containers === */
.table,
.table thead tr:first-child th:first-child {
border-top-left-radius: 0.5rem !important; /* match card radius */
}
.table,
.table thead tr:first-child th:last-child {
border-top-right-radius: 0.5rem !important;
}
.table thead th {
background-color: #f8f9fa !important; /* keep light header tone */
border-bottom: 1px solid #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: #fff; /* body surface */
}
.bd-card .table thead th {
background-color: #f8f9fa !important; /* light header */
border-bottom: 1px solid #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 #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 #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:#dc3545; }
50% { background-color:#1f6fe5; }
}
/* Optional: if you use .table-light footer */
.bd-card .table tfoot th,
.bd-card .table tfoot td {
background-color: #fff; /* or #f8f9fa if you want a light footer */
border-top: 1px solid #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: #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: #f8f9fa !important;
border-bottom: 1px solid #000 !important;
position: relative !important;
z-index: 1 !important;
}
/* --- Card wrapper single black border --- */
html body .bd-card,
html body .card {
border: 1px solid #000 !important;
border-radius: 0.75rem !important;
background: #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: #fff !important;
border: 1px solid #000 !important;
border-radius: 0.4rem !important;
box-shadow: 0 6px 20px 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: #f8f9fa !important;
border: 1px solid #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: #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 #000;
border-radius:0.4rem;
padding:4px 10px;
cursor:pointer;
background:#fff;
color:#111;
user-select:none;
transition:background .15s ease, color .15s ease, box-shadow .15s ease;
}
.bd-nav-link:hover {
background:#f3f3f3;
}
.bd-nav-link.active {
background:#111;
color:#fff;
box-shadow:0 0 0 2px #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: #000 !important;
color: #fff !important;
border: 1px solid #000 !important;
}
html body .bd-btn-outline {
background: #fff !important;
color: #000 !important;
border: 1px solid #000 !important;
}
html body .bd-btn-outline:hover {
background: #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: rgba(0, 0, 0, 0.25) !important;
border-radius: 999px !important;
}
/* 3️⃣ Slight inner padding to avoid clipping first/last columns */
.bd-card .table-responsive > table,
.table-responsive > table {
min-width: 640px !important; /* enough width for takeoff / file tables */
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 #000 !important;
border-radius: .5rem !important;
background: #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 */
#estimate-file-manager .table-responsive,
.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 #000 !important;
border-bottom: 1px solid #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: 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) {
#estimate-file-manager .table-responsive,
#file-list.table-responsive {
margin-bottom: 0.5rem !important;
border: 1px solid #000 !important;
border-radius: .5rem !important;
background: #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, #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,
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, #000) !important;
border-radius: 4px !important;
background: var(--bd-bg, #fff) !important;
cursor: pointer !important;
transition: all 0.15s ease-in-out !important;
box-shadow: none !important;
}
input[type="checkbox"].form-check-input:hover,
input[type="checkbox"].bd-checkbox:hover {
background: var(--bd-soft, #f7f7f9) !important;
}
input[type="checkbox"].form-check-input:checked,
input[type="checkbox"].bd-checkbox:checked {
background: #111 !important;
border-color: #111 !important;
}
input[type="checkbox"].form-check-input:checked::after,
input[type="checkbox"].bd-checkbox:checked::after {
content: "";
position: absolute;
width: 6px;
height: 10px;
border: solid #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,
[data-theme="dark"] input[type="checkbox"].bd-checkbox {
background: #1a1b1f !important;
border-color: var(--bd-border, #2d2f36) !important;
}
[data-theme="dark"] input[type="checkbox"].form-check-input:checked,
[data-theme="dark"] input[type="checkbox"].bd-checkbox:checked {
background: #fff !important;
border-color: #fff !important;
}
[data-theme="dark"] input[type="checkbox"].form-check-input:checked::after,
[data-theme="dark"] input[type="checkbox"].bd-checkbox:checked::after {
border-color: #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: #fff !important; /* clean Discovery white card */
border: 1px solid #000 !important;
border-radius: 0.75rem !important;
box-shadow: 0 4px 16px 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, #000) !important;
border-radius: 10px !important;
box-shadow: 0 4px 16px rgba(0, 0, 0, 0.12) !important;
background: var(--bd-bg, #fff) !important;
color: var(--bd-text, #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, #000) !important;
}
.notif-dropdown .list-group-item {
border: 0 !important;
border-bottom: 1px solid rgba(0,0,0,0.05) !important;
background: #fff !important;
color: var(--bd-text, #111) !important;
}
.notif-dropdown .list-group-item:hover {
background: #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: #fff !important;
font-weight: 600 !important;
color: var(--bd-text, #111) !important;
}
.notif-dropdown .border-top.text-center {
background: #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, #000) !important;
background: var(--bd-soft, #f5f5f7) !important;
color: var(--bd-text, #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: #e9ecef !important;
border-color: var(--bd-border, #000) !important;
color: var(--bd-text, #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,#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,rgba(255,0,0,0.15) 0%,transparent 70%);
opacity:0; transition:opacity .3s;
}
.has-notifs .notif-glow {opacity:.4;}
.notif-badge-count {
background:#dc3545!important;
font-size:.65rem!important;
min-width:16px!important;
line-height:1!important;
padding:2px 4px!important;
color:#fff!important;
font-weight:600;
}
.notif-dropdown {
border:1px solid var(--bd-border,#000)!important;
border-radius:10px!important;
box-shadow:0 4px 16px rgba(0,0,0,0.12)!important;
background:var(--bd-bg,#fff)!important;
overflow:hidden!important;
width:360px!important;
max-height:420px!important;
}
.notif-markall-btn{
background:var(--bd-soft,#f5f5f7)!important;
border:1px solid var(--bd-border,#000)!important;
border-radius:6px!important;
font-size:.8rem!important;
font-weight:500!important;
padding:2px 8px!important;
color:var(--bd-text,#111)!important;
transition:background .2s ease;
}
.notif-markall-btn:hover{background:#e9ecef!important;}
/* ==========================================================
👤 Profile Dropdown
========================================================== */
.profile-dropdown {
border:1px solid var(--bd-border,#000)!important;
border-radius:10px!important;
box-shadow:0 4px 12px rgba(0,0,0,0.12)!important;
background:var(--bd-bg,#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,#111)!important;
text-decoration:none!important;
transition:background .2s ease;
}
.profile-item:hover{
background:var(--bd-soft,#f7f7f9)!important;
}
/* ==========================================================
⚙️ Rightbar Toggle
========================================================== */
.rightbar-btn{
position:relative!important;
width:32px;height:32px;
border:none!important;
background:var(--bd-soft,#f5f5f7)!important;
border-radius:8px!important;
cursor:pointer;
transition:background .2s ease,transform .2s ease;
}
.rightbar-btn:hover{background:#e9ecef!important;transform:translateY(-1px);}
.rightbar-icon{
font-size:.85rem!important;
color:var(--bd-text,#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,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 #000 !important;
border-radius: 6px;
overflow: hidden;
background: #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 #000 !important;
background: #f8f8f8 !important;
color: #111;
font-weight: 600;
text-align: center;
padding: 4px 6px;
}
#schedule-grid tbody td {
border: 1px solid #000 !important;
background: #fff;
padding: 3px 6px;
vertical-align: middle;
}
/* --- Supervisor rows --- */
#schedule-grid tr.bg-light-subtle td {
background: #f3f3f3 !important;
font-weight: 600;
border-top: 2px solid #000 !important;
border-bottom: 1px solid #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: #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 #000 !important;
}
/* --- Make office/admin rows look clean --- */
#schedule-grid tr[data-employee-id] td {
border-top: 1px solid #000 !important;
border-bottom: 1px solid #000 !important;
}
.auto-selected {
border-color: #198754 !important;
box-shadow: 0 0 0 2px #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: #198754 !important;
box-shadow: 0 0 0 2px #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:#198754 !important; box-shadow:0 0 0 2px #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 #111 !important;
border-radius: 4px !important;
background: #fff !important;
box-shadow: 2px 2px 6px 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: #fff;
border-bottom: 1px solid #eee;
}
.ts-dropdown-portal .option:last-child {
border-bottom: none;
}
.ts-dropdown-portal .option:hover,
.ts-dropdown-portal .option.active {
background: #f8f9fa !important;
}
/* group headers */
.ts-dropdown-portal .optgroup-header {
font-weight: 600;
color: #222;
background: #f2f2f2;
border-bottom: 1px solid #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: #fff;
border-color: #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: #ffebeb;
color: #a10000;
border: 1px solid #000;
}
.bd-chip-high {
background-color: #fff4cc;
color: #7a4c00;
border: 1px solid #000;
}
.bd-chip-normal {
background-color: #f7f7f7;
color: #333;
border: 1px solid #000;
}
.bd-chip-low {
background-color: #f2f9f2;
color: #205520;
border: 1px solid #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 #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 #000; border-radius:.4rem; padding:.1rem .4rem;
background:#fff; font-size:.75rem; }
.bd-chip-muted { background:#f8f9fa; border-color:#adb5bd; color:#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: #1e1e2f;
color: #fff;
display: flex;
align-items: center;
gap: .5rem;
padding-left: 60px;
border-bottom: 1px solid rgba(255,255,255,0.15);
box-shadow: 0 2px 4px rgba(0,0,0,0.25);
}
#pwa-nav-toolbar .btn {
color: #fff;
border-color: rgba(255,255,255,0.3);
background: rgba(255,255,255,0.05);
font-size: .85rem;
padding: 3px 10px;
border-radius: 6px;
}
#pwa-nav-toolbar .btn:hover {
background: 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 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: #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: #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 {
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:#adb5bd; } /* gray for clocked_out */
/* =============================================
BD25 Project List — Shared Styling
============================================= */
/* ---------------------------------------------
Universal project row card base
--------------------------------------------- */
.project-row {
background: #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 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, #000);
border-radius: .5rem 0 0 .5rem;
pointer-events:none;
}
/* ---------------------------------------------
Metric tiles
--------------------------------------------- */
.project-row .metric-tile {
border: 1px solid #000;
border-radius: .55rem;
padding: .55rem .75rem;
background: #fff;
min-height: 56px;
}
.metric-tile .metric-label {
font-size: .72rem;
color: #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: #fff;
transition: box-shadow .25s ease;
}
.bd-card-expand:hover {
box-shadow: 0 4px 14px 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 #000;
font-size:.72rem;
background:#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 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: #fbeaea; /* soft red background */
border-color: #e5b1b1; /* soft red border */
color: #b30000; /* strong readable red text */
}
.bd-chip-bad i {
color: #b30000;
}
.bd-highlight {
background: #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: #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: #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: #f8f9fa;
border-bottom: 1px solid #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: #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: #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: #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: #f6f8fa;
}
.schedule-row.selected {
background: #fffbe6 !important;
outline: 2px solid #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: #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: #f3f3f3 !important;
cursor: not-allowed !important;
color: #999 !important;
}
/* ------------------------------------------------------------
PREDECESSORS
------------------------------------------------------------ */
.preds-cell { position: relative; overflow: visible; }
.preds-input {
width: 100%;
border: 1px solid #000;
padding: 2px 4px;
font-size: .82rem;
}
.preds-dropdown {
position: absolute;
top: 100%;
left: 0;
width: 260px;
background: #fff;
border: 1px solid #111;
border-radius: 6px;
box-shadow: 0 4px 10px 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: #f0f0f0;
}
/* ------------------------------------------------------------
ADD ROW
------------------------------------------------------------ */
.add-task-row {
background: #f8f9fa;
border-top: 1px solid var(--bd-border);
cursor: pointer;
}
.add-task-row:hover { background: #eef0f2; }
.add-task-btn {
font-weight: 600;
color: #111;
}
/* ------------------------------------------------------------
CRITICAL PATH HIGHLIGHTS
------------------------------------------------------------ */
.critical-row {
background: #fff4f4 !important;
border-left: 4px solid #d7263d !important;
}
.critical-bar .bar {
stroke: #d7263d !important;
fill: #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:#e5e5e5;
}
.bd-splitter:hover { background:#bbb; }
/* ------------------------------------------------------------
SCROLLBARS
------------------------------------------------------------ */
#schedule-grid-scroll::-webkit-scrollbar {
height:6px;
width:6px;
}
#schedule-grid-scroll::-webkit-scrollbar-thumb {
background:rgba(0,0,0,.25);
border-radius:999px;
}
#schedule-context-menu {
position: fixed;
z-index: 99999;
width: 200px;
background: #fff;
border: 1px solid #d0d7de;
border-radius: 10px;
padding: 6px 0;
box-shadow: 0 6px 20px 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: #1a1a1a;
user-select: none;
}
#schedule-context-menu .ctx-item:hover {
background: #f5f7fa;
}
#schedule-context-menu .ctx-item i {
width: 16px;
text-align: center;
}
#schedule-context-menu .ctx-item.danger {
color: #b30000;
}
#schedule-context-menu .ctx-item.danger:hover {
background: #ffeaea;
}
#schedule-context-menu .ctx-separator {
height: 1px;
background: #e5e5e5;
margin: 5px 0;
}
#gantt-context-menu {
position: fixed;
z-index: 99999;
width: 220px;
background: #fff;
border: 1px solid #d0d7de;
border-radius: 10px;
padding: 6px 0;
box-shadow: 0 6px 20px 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: #1a1a1a;
user-select: none;
}
#gantt-context-menu .ctx-item:hover {
background: #f5f7fa;
}
#gantt-context-menu .ctx-item i {
width: 16px;
text-align: center;
}
#gantt-context-menu .ctx-item.danger {
color: #b30000;
}
#gantt-context-menu .ctx-item.danger:hover {
background: #ffeaea;
}
#gantt-context-menu .ctx-separator {
height: 1px;
background: #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: #f5f7fa;
}
/* Enabled rows (H1 hybrid style) */
.ctx-enabled {
background: #eef4ff;
border-left-color: #1f6fe5;
opacity: 1;
}
.ctx-enabled:hover {
background: #eef4ff; /* no hover change, per Option 3 */
}
/* Separator */
.ctx-separator {
margin: 4px 0;
border-top: 1px solid #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: #eef4ff;
border-left-color: #1f6fe5;
}
/* Disabled rows */
.ctx-disabled {
opacity: 0.65;
}
/* Hover affects only disabled */
.ctx-disabled:hover {
background: #f5f7fa;
}
/* Separator */
.ctx-separator {
border-top: 1px solid #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: #fff !important;
border: 1px solid #111 !important;
border-radius: 6px !important;
box-shadow: 0 6px 16px 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: #fff !important;
border: 1px solid #000 !important;
border-radius: 6px !important;
box-shadow: 0 6px 16px 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: #f0f0f0;
}
#bd-calendar-popup .cal-day.selected {
background: #1f6fe5 !important;
color: #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: #222 !important;
}
.gantt .arrow {
stroke-width: 1.4px !important;
stroke: #444 !important;
}
.dep-handle {
transition: r .12s ease;
}
.dep-handle:hover {
r: 7;
}
.dep-drag-line {
pointer-events: none;
}
.milestone-diamond {
fill: #111;
stroke: #000;
stroke-width: 1;
}
.critical-bar + .milestone-diamond {
fill: #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: #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 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: #b02a37; /* bootstrap-ish danger, but you can map to your theme */
}
/* Invalid state styling hook */
.bd-input-wrap.is-invalid input,
input.is-invalid {
border-color: #dc3545 !important;
box-shadow: 0 0 0 .15rem 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.is-invalid > input{
border-color:#dc3545 !important;
box-shadow:0 0 0 .15rem rgba(220,53,69,.15) !important;
}
.bd-field-inline-error{
color:#dc3545;
font-size:.85rem;
margin-top:.25rem;
}
.bd-table-scroll {
overflow-y: auto;
overscroll-behavior: contain;
}
/* ===== 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 rgba(255,255,255,.10), 0 0 14px 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 rgba(255,255,255,.35);
border-top-color: #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: rgba(255,255,255,.14);
overflow: hidden;
margin-left: 6px;
}
.pwa-progress > span {
position:absolute; left:0; top:0; bottom:0;
width: 35%;
background: 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: #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: 16px !important; /* <-- breathing room */
}
}
/* ============================================================
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: 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: rgba(0,0,0,.08);
color: 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:rgba(25,135,84,.8)}
.bd-rail-info{background:rgba(13,110,253,.75)}
.bd-rail-warn{background:rgba(255,193,7,.85)}
.bd-rail-bad{background:rgba(220,53,69,.85)}
.bd-track{height:7px;border:1px solid #000;border-radius:999px;background:#fff;overflow:hidden}
.bd-fill{height:100%}
.bd-fill-good{background:rgba(25,135,84,.35)}
.bd-fill-info{background:rgba(13,110,253,.28)}
.bd-fill-warn{background:rgba(255,193,7,.45)}
.bd-fill-bad{background:rgba(220,53,69,.28)}
.bd-spark{width:100%;height:24px;opacity:.6}
.bd-heat{flex:1;height:18px;border:1px solid #000;border-radius:6px;background:rgba(13,110,253,.6)}
.bd-dot{width:8px;height:8px;border-radius:50%;display:inline-block;border:1px solid #000}
.bd-dot-good{background:rgba(25,135,84,.6)}
.bd-dot-warn{background:rgba(255,193,7,.85)}
.bd-dot-bad{background:rgba(220,53,69,.7)}
.bd-dot-info{background:rgba(13,110,253,.6)}
/* =========================
PWA Search (mobile mount)
- Style ONLY the bar
- Do NOT restyle results
========================= */
#pwa-search-mount{
background: #0f172a;
border-bottom: 1px solid 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: #121b31;
border: 1px solid #1a2542;
border-radius: 14px;
padding: 10px 12px;
}
/* Left icon */
#pwa-search-mount .bd-pwa-search-ico{
color: 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: 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: 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 rgba(255,255,255,.14);
background: rgba(255,255,255,.06);
color: rgba(255,255,255,.85);
display: inline-flex;
align-items: center;
justify-content: center;
}
#pwa-search-mount .bd-pwa-search-clear:hover{
background: 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;
/* Do not override background/border/padding/box-shadow */
background: unset !important;
border: unset !important;
border-radius: unset !important;
box-shadow: unset !important;
padding: unset !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: #dc3545; }
.bd-file-icon.fa-file-excel,
.bd-file-icon.fa-file-csv { color: #198754; }
.bd-file-icon.fa-file-word { color: #0d6efd; }
.bd-file-icon.fa-file-image { color: #6f42c1; }
.bd-file-icon.fa-file-zipper { color: #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 rgba(0,0,0,.06) !important;
}
.bd-est-actions .btn{
font-weight:600;
}
.bd-est-actions .btn-success{
box-shadow:0 1px 0 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 rgba(25,135,84,0);
transform: scale(1);
background: #fff;
}
35%{
box-shadow: 0 0 0 3px rgba(25,135,84,.25);
transform: scale(1.01);
background: rgba(25,135,84,.04);
}
100%{
box-shadow: 0 0 0 rgba(25,135,84,0);
transform: scale(1);
background: #fff;
}
}
/* button micro-feedback */
.bd-btn-promote .bd-promote-spin{
width: .75rem;
height: .75rem;
border-radius: 999px;
border: 2px solid rgba(255,255,255,.55);
border-top-color: 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 rgba(13,110,253,0); }
45% { box-shadow: 0 0 0 3px rgba(13,110,253,.22); }
100% { box-shadow: 0 0 0 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: #f6f7f9;
--bd-card: #ffffff;
--bd-border: rgba(0,0,0,0.18);
--bd-border-strong: rgba(0,0,0,0.28);
--bd-muted: #6c757d;
--bd-text: #111;
--bd-warn: #f0ca00;
--bd-good: #1f7a3f;
--bd-info: #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 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 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: #fff;
}
.bd-wizard-page .form-control:focus,
.bd-wizard-page .form-select:focus{
outline: none !important;
box-shadow: 0 0 0 3px rgba(13,110,253,0.18);
}
.bd-wizard-page .is-invalid{
border-color: #dc3545 !important;
}
.bd-wizard-page .ts-wrapper.is-invalid{
border: 1px solid #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 rgba(0,0,0,0.18);
background: #fff;
display: inline-flex;
align-items: center;
gap: 6px;
}
.bd-wizard-page .bd-chip-muted{ background:#f3f4f6; color:#2b2f33; }
.bd-wizard-page .bd-chip-info{ background:rgba(13,110,253,0.10); border-color:rgba(13,110,253,0.25); color:#0b3f8a; }
.bd-wizard-page .bd-chip-good{ background:rgba(31,122,63,0.10); border-color:rgba(31,122,63,0.25); color:#1f7a3f; }
.bd-wizard-page .bd-chip-warn{ background:rgba(240,202,0,0.18); border-color:rgba(240,202,0,0.50); color:#6b5a00; }
/* Action bar (layout only; colors come from global bd-btn variants) */
.bd-wizard-actionbar{
position: sticky;
bottom: 0;
background: 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 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 rgba(13,110,253,0.16); }
60% { box-shadow: 0 0 0 10px rgba(13,110,253,0.00); }
100% { box-shadow: 0 0 0 0 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: #eceff3;
border-radius: 999px;
overflow: hidden;
}
.bd-wizard-page .progress-bar{
background: #111;
}
/* Team table polish */
.bd-team-table tbody tr{ border-top: 1px solid 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 rgba(0,0,0,0.18);
background: #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 rgba(0,0,0,0.18);
border-radius:12px;
background:#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 rgba(0,0,0,0.06); }
.bd-choice-card.active{
background: 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 rgba(0,0,0,0.12);
display:flex;align-items:center;justify-content:center;
background:#f3f4f6;
}
.bd-choice-title{ font-weight:650; font-size:.92rem; color:#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 rgba(13,110,253,0.18);
}
.bd-module-tile-selected{
background: #fffbea !important;
}
/* Progress */
.bd-wizard-page .progress{
background:#eceff3;
border-radius:999px;
overflow:hidden;
}
.bd-wizard-page .progress-bar{ background:#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 rgba(0,0,0,0.18);
border-radius: 12px;
background: #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 rgba(0,0,0,0.06);
}
.bd-choice-card.active{
background-color: rgba(255, 193, 7, .10) !important; /* muted yellow infill */
border-color: 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 rgba(0,0,0,0.12);
display:flex;align-items:center;justify-content:center;
background:#f3f4f6;
}
.bd-choice-title{ font-weight:650; font-size:.92rem; color:#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 rgba(0,0,0,0.18) !important;
border-radius: 10px !important;
background: #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: rgba(255, 193, 7, .10) !important; /* muted yellow infill */
border-color: 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 rgba(0,0,0,0.10) !important;
background: #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 rgba(0,0,0,0.18);
background: rgba(0,0,0,0.04);
font-size: .78rem;
line-height: 1.2;
white-space: nowrap;
}
.bd-choice-badge-tone-good{
border-color: rgba(31,122,63,0.28);
background: rgba(31,122,63,0.10);
color: #1f7a3f;
}
.bd-choice-badge-tone-info{
border-color: rgba(13,110,253,0.28);
background: rgba(13,110,253,0.10);
color: #0b3f8a;
}
.bd-choice-badge-tone-warn{
background: rgba(240,202,0,0.18);
color: #6b5a00;
}
.bd-choice-badge-tone-muted{
border-color: rgba(0,0,0,0.18);
background: rgba(0,0,0,0.04);
color: #2b2f33;
}
.bd-choice-badge-tone-bad{
border-color: rgba(220,53,69,0.30);
background: rgba(220,53,69,0.10);
color: #842029;
}
.bd-subcard .form-check-input{ cursor:pointer; }
.bd-scope-list{
border: 1px solid rgba(0,0,0,0.18);
border-radius: 10px;
background: #fff;
max-height: 280px;
overflow-y: auto;
}
.bd-scope-row{
padding: 8px 10px;
border-top: 1px solid rgba(0,0,0,0.08);
}
.bd-scope-row:first-child{ border-top: none; }
.bd-scope-row:hover{ background: #f8f9fa; }
.bd-scope-origin{
padding: 3px 8px;
border-radius: 8px; /* rectangle, not pill */
border: 1px solid rgba(0,0,0,0.18);
font-size: .75rem;
line-height: 1.2;
white-space: nowrap;
}
.bd-scope-origin-global{
background: rgba(13,110,253,0.10);
border-color: rgba(13,110,253,0.28);
color: #0b3f8a;
}
.bd-scope-origin-dept{
background: rgba(240,202,0,0.18);
border-color: rgba(240,202,0,0.60);
color: #6b5a00;
}
.bd-scope-origin-custom{
background: rgba(0,0,0,0.04);
border-color: rgba(0,0,0,0.18);
color: #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:#111;
text-decoration:none;
}
.bd-review-edit:hover{
background:#f3f4f6;
}
.bd-choice-badge{
padding: 3px 8px;
border-radius: 8px;
border: 1px solid rgba(0,0,0,0.18);
background: rgba(0,0,0,0.04);
font-size: .78rem;
line-height: 1.2;
white-space: nowrap;
}
.bd-choice-badge-tone-info{
border-color: rgba(13,110,253,0.28);
background: rgba(13,110,253,0.10);
color: #0b3f8a;
}
.bd-team-pill{
display:inline-flex;
align-items:center;
gap:6px;
border:1px solid rgba(0,0,0,0.18);
background:#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 #111 !important;
color:#111 !important;
background:#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 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:#f3f4f6 !important;
}
.bd-btn-secondary:hover{
background:#e5e7eb !important;
}
.bd-btn-primary{
background:rgba(13,110,253,0.14) !important;
}
.bd-btn-primary:hover{
background:rgba(13,110,253,0.22) !important;
}
.bd-btn-success{
background:rgba(31,122,63,0.16) !important;
}
.bd-btn-success:hover{
background:rgba(31,122,63,0.24) !important;
}
.bd-btn-warning{
background:rgba(240,202,0,0.22) !important;
}
.bd-btn-warning:hover{
background:rgba(240,202,0,0.32) !important;
}
.bd-btn-danger{
background:rgba(220,53,69,0.16) !important;
}
.bd-btn-danger:hover{
background: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 rgba(0,0,0,0.10); }
70% { box-shadow:0 0 0 10px rgba(0,0,0,0.00); }
100% { box-shadow:0 0 0 0 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 #000;
border-radius:8px;
padding:6px 12px;
font-weight:700;
background:#fff;
display:inline-block;
}
.bd-status.muted{ background:#f6f6f6; }
.bd-status.info{ background:#eaf2ff; }
.bd-status.good{ background:#e9f9ef; }
.bd-status.warn{ background:#fff4d6; }
.bd-status.bad{ background:#ffe7e7; }
.bd-health-bar{
height:8px;
border:1px solid rgba(0,0,0,.25);
border-radius:999px;
background:#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 #000;
}
.bd-step.done .dot{ background:#198754; }
.bd-step.active .dot{ background:#0d6efd; }
.bd-step .label{
font-size:11px;
font-weight:700;
margin-top:4px;
color:#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 #111;
border-radius:8px;
padding:4px 8px;
font-weight:700;
font-size:.78rem;
line-height:1.1;
background:#fff;
white-space:nowrap;
}
.bd-sub-status i{
font-size:1rem;
line-height:1;
opacity:.85;
}
/* tones */
.bd-sub-status.muted{ background: rgba(0,0,0,0.04); }
.bd-sub-status.info { background: rgba(13,110,253,0.10); }
.bd-sub-status.good { background: rgba(31,122,63,0.12); }
.bd-sub-status.warn { background: rgba(240,202,0,0.20); }
.bd-sub-status.bad { background: rgba(220,53,69,0.12); }
.bd-sub-health{
height:8px;
border:1px solid rgba(0,0,0,.25);
border-radius:999px;
background:#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 #000; background:#fff; }
.bd-step.done .dot{ background:#198754; }
.bd-step.active .dot{ background:#0d6efd; animation:bdPulse 1.2s ease-in-out infinite; }
.bd-step .label{ margin-top:4px; font-size:11px; font-weight:800; color:#6c757d; }
.bd-stepper .line{ width:32px; height:2px; background:#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 rgba(0,0,0,.15);gap:.35rem}
.bd-badge-good{background:#e9f9ef}
.bd-badge-warn{background:#fff7e6}
.bd-badge-bad{background:#ffecec}
.bd-badge-info{background:#eef4ff}
.bd-badge-muted{background:#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: #111 !important;
border-color: #111 !important;
color: #fff !important;
}
.bd-btn-outline,
.bd-btn-secondary {
background: #fff !important;
border-color: var(--bd-border) !important;
color: var(--bd-text) !important;
}
.bd-btn-danger {
background: #fff1f1 !important;
color: #111 !important;
border-color: #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: #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: #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: #fff;
}
.bd-table-context,
.bd-table-toolbar,
.bd-action-strip {
border: 1px solid var(--bd-border);
border-radius: 10px;
background: #fff;
}
.bd-table-shell tbody tr:hover,
.bd-table-flat tbody tr:hover,
.table-hover tbody tr:hover {
background: #f8fafc;
}
.bd-table-shell tbody tr.is-selected,
.bd-table-flat tbody tr.selected,
tr.selected {
background: #fff8ea !important;
}
.bd-table-empty,
.bd-sheet-table__empty td {
color: var(--bd-muted);
text-align: center;
padding: 1rem;
background: #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: #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: #fff;
}
.bd-file-toolbar,
.bd-file-breadcrumb,
.bd-file-bulkbar,
.bd-upload-strip {
border: 1px solid var(--bd-border);
border-radius: 10px;
background: #fff;
}
.bd-file-row,
#project-file-manager tbody tr {
border-bottom: 1px solid #eceff3;
}
.bd-file-row:hover,
#project-file-manager tbody tr:hover {
background: #f8fafc;
}
.bd-file-row.selected,
#project-file-manager tbody tr.selected {
background: #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: #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: #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: #fff;
}
.bd-sheet-summary-bar,
.bd-worksheet-summary-strip {
border: 1px solid var(--bd-border);
border-radius: 10px;
background: #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 rgba(15, 23, 42, 0.08);
--bd-std-shadow-lg: 0 20px 40px rgba(15, 23, 42, 0.16);
--bd-std-muted-surface: rgba(15, 23, 42, 0.05);
--bd-std-good-surface: rgba(26, 127, 46, 0.10);
--bd-std-info-surface: rgba(31, 111, 229, 0.10);
--bd-std-warn-surface: rgba(200, 135, 25, 0.12);
--bd-std-warn-soft: #f6f3db;
--bd-std-danger-surface: rgba(179, 38, 30, 0.10);
--bd-std-good-border: rgba(26, 127, 46, 0.35);
--bd-std-info-border: rgba(31, 111, 229, 0.34);
--bd-std-warn-border: rgba(200, 135, 25, 0.34);
--bd-std-warn-soft-border: #e4d7a3;
--bd-std-danger-border: 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: #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: 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: #dc3545;
color: #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: #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: #111;
color: #fff;
border: 1px solid #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: #0d6efd !important;
font-weight: 600;
background-color: 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: #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 #000; border-radius:999px; background:#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 #000;
border-radius:50%; background:#fff; transition:transform .2s ease;
}
.bd-toggle input:checked + .bd-toggle-slider{ background:#ddd; }
.bd-toggle input:checked + .bd-toggle-slider:before{ transform:translateX(20px); }
.org-card { overflow: hidden; }
.org-card-overlay {
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:#111 !important; color:#f2f2f2; }
body.bd-dark .bd-card{ background:#181818 !important; color:#e6e6e6; }
body.bd-dark .bd-card .text-dark{ color:#f2f2f2 !important; }
body.bd-dark .text-muted{ color:#bdbdbd !important; }
body.bd-dark .list-group-item{ background:transparent; color:#e6e6e6; }
body.bd-dark .btn-outline-dark{ color:#f2f2f2; border-color:#f2f2f2; }
body.bd-dark .border-dark{ border-color:#444 !important; }
.bd-auth-shell { min-height: 100vh; }
.bd-public-shell { background-color: #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: #fff;
color: #111;
border: 1px solid #000;
border-radius: 8px;
box-shadow: 0 4px 12px 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: #198754; }
.bd-toast.is-info::before { background: #1f6fe5; }
.bd-toast.is-warn::before { background: #ffc107; }
.bd-toast.is-error::before { background: #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 #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: #fff;
box-shadow: var(--bd-std-shadow);
}
.bd-standards-hero {
background: linear-gradient(135deg, rgba(31, 111, 229, 0.08), 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: #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;
text-transform: uppercase;
}
.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: 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: rgba(248, 249, 250, 0.94);
color: #343a40;
}
.bd-id-badge.is-overdue {
background: rgba(179, 38, 30, 0.10);
border-color: rgba(179, 38, 30, 0.34);
color: #8c241a;
}
.bd-std-chip {
font-size: 0.75rem;
background: 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: #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: #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: #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: #8c241a;
}
.bd-std-note {
padding: 0.85rem 1rem;
border: 1px solid rgba(15, 23, 42, 0.10);
border-radius: var(--bd-std-radius-md);
background: 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: rgba(15, 23, 42, 0.05);
border-color: 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 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: #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;
text-transform: uppercase;
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: #fff;
color: #111827;
}
.bd-theme-preview--dark {
background: #0f172a;
border-color: rgba(255, 255, 255, 0.12);
color: #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: rgba(255, 255, 255, 0.08);
color: #f8fafc;
border-color: 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 rgba(15, 23, 42, 0.08);
background: linear-gradient(180deg, rgba(255,255,255,0.98), 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 rgba(15, 23, 42, 0.10);
border-radius: 16px;
background: #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 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 rgba(15, 23, 42, 0.12);
border-radius: 14px;
background:
linear-gradient(0deg, rgba(255,255,255,0.58), rgba(255,255,255,0.58)),
radial-gradient(circle at 70% 32%, rgba(225, 87, 89, 0.85) 0 6px, transparent 7px),
radial-gradient(circle at 48% 70%, rgba(15, 23, 42, 0.88) 0 6px, transparent 7px),
linear-gradient(115deg, #eae7dd 0%, #e1ded3 22%, #ece7de 24%, #ece7de 54%, #ded9cf 55%, #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: 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 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: #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 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: #e6c44f;
}
.bd-work-subnav {
padding: 0.7rem;
border: 1px solid rgba(15, 23, 42, 0.10);
border-radius: 14px;
background: rgba(248, 250, 252, 0.82);
}
.bd-work-subnav__label {
color: #8b8b8b;
font-weight: 700;
letter-spacing: 0.04em;
text-transform: uppercase;
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 #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 rgba(15, 23, 42, 0.16);
background: #fff;
color: var(--bd-text);
font-weight: 600;
}
.bd-service-hub-nav__link.is-active {
background: #18213d;
border-color: #18213d;
color: #fff;
}
.bd-choice-card-tight,
.bd-choice-card-std {
position: relative;
border: 1px solid rgba(15, 23, 42, 0.14);
border-radius: 16px;
background: #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, rgba(240, 202, 0, 0.22), rgba(255,255,255,0.98));
border-color: var(--bd-std-warn-soft-border);
box-shadow: 0 10px 18px 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: #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: #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 rgba(15, 23, 42, 0.18);
border-radius: 14px;
background: #fff;
color: var(--bd-text);
font-size: 0.92rem;
line-height: 1.35;
box-shadow: inset 0 1px 0 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: rgba(15, 23, 42, 0.55);
box-shadow: 0 0 0 3px 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 #111;
background: #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 #fff;
border-width: 0 2px 2px 0;
transform: rotate(45deg) scale(0.75);
opacity: 0;
}
.bd-check input:checked + .bd-check__box {
background: #111;
border-color: #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;
text-transform: uppercase;
font-weight: 600;
color: var(--bd-muted);
}
.bd-subtle-callout {
background: rgba(15, 23, 42, 0.04);
border: 1px dashed 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 #000;
border-radius: 0.5rem;
background: #f7f7f7;
color: #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: #eee; }
.bd-btn-chip:active { transform: translateY(1px); }
.bd-btn-chip:focus { outline: none; box-shadow: 0 0 0 2px rgba(0, 0, 0, 0.15) inset; }
.bd-btn-good { background: #f0f8f2; color: #0d5e24; }
.bd-btn-good:hover { background: #e6f2e9; }
.bd-btn-warn { background: #fff8ea; color: #8c6410; }
.bd-btn-warn:hover { background: #fff2d6; }
.bd-btn-danger { background: #fff1f1; color: #111 !important; border-color: #000; }
.bd-btn-danger:hover { background: #ffe4e4; color: #000 !important; }
.bd-module-nav {
padding: 1.35rem 1.5rem;
border-radius: 1.25rem;
border: 1px solid rgba(15, 23, 42, 0.12);
box-shadow: 0 14px 30px rgba(15, 23, 42, 0.1);
background: #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;
text-transform: uppercase;
font-weight: 600;
color: #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: #111827;
border-color: #111827;
color: #ffffff;
box-shadow: 0 4px 12px 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 rgba(15, 23, 42, 0.12);
box-shadow: 0 18px 36px rgba(15, 23, 42, 0.08);
background: #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;
text-transform: uppercase;
font-weight: 600;
color: #94a3b8;
}
.bd-metric-hero__metric {
min-width: 160px;
display: flex;
flex-direction: column;
gap: 0.35rem;
font-size: 0.9rem;
color: #0f172a;
}
.bd-metric-hero__metric--range {
background: radial-gradient(circle at top left, #1e293b, #0f172a);
color: #ffffff;
padding: 1rem 1.2rem;
border-radius: 1rem;
box-shadow: 0 16px 32px rgba(15, 23, 42, 0.18);
}
.bd-metric-hero__metric-label {
font-size: 0.72rem;
letter-spacing: 0.08em;
text-transform: uppercase;
font-weight: 600;
color: inherit;
}
.bd-metric-hero__metric--range .bd-metric-hero__metric-label {
color: 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: rgba(15, 23, 42, 0.68);
}
.bd-metric-hero__metric--range .bd-metric-hero__meta {
color: 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: #fff;
box-shadow: var(--bd-std-shadow);
}
.bd-table-toolbar {
padding: 0.72rem 0.95rem;
border-bottom: 1px solid rgba(15, 23, 42, 0.08);
background: 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;
text-transform: uppercase;
letter-spacing: 0.04em;
color: var(--bd-muted);
border-bottom: 1px solid rgba(15, 23, 42, 0.10);
background: rgba(255, 255, 255, 0.98);
}
.bd-demo-table tbody td {
padding: 0.85rem 0.95rem;
border-bottom: 1px solid 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: rgba(31, 111, 229, 0.05);
border-bottom: 1px solid 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: #1f4f80;
font-size: 0.84rem;
line-height: 1.2;
}
.bd-clear-x {
border: 0;
background: transparent;
color: #111;
font-size: 1.2rem;
line-height: 1;
padding: 0;
}
.bd-action-strip {
display: inline-flex;
align-items: center;
border: 1px solid rgba(15, 23, 42, 0.16);
border-radius: 12px;
overflow: hidden;
background: #fff;
}
.bd-action-strip__btn {
width: 32px;
height: 32px;
border: 0;
border-left: 1px solid rgba(15, 23, 42, 0.10);
background: transparent;
color: #111;
display: inline-flex;
align-items: center;
justify-content: center;
}
.bd-action-strip__btn:first-child {
border-left: 0;
}
.bd-action-strip__btn.is-danger {
color: #cc334f;
}
.bd-action-strip__btn:hover {
background: rgba(15, 23, 42, 0.04);
}
.bd-demo-table__expand td {
background: 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 rgba(15, 23, 42, 0.12);
border-radius: 14px;
background: #fff;
}
.bd-modal-stage {
padding: 1rem;
background: radial-gradient(circle at top, rgba(31, 111, 229, 0.08), transparent 42%), 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: #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: #fff;
}
.bd-modal-window__header {
border-bottom: 1px solid 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: rgba(248, 250, 252, 0.82);
display: grid;
gap: 0.9rem;
}
.bd-modal-window__group {
border: 1px solid rgba(15, 23, 42, 0.10);
border-radius: 14px;
background: #fff;
padding: 0.95rem;
display: grid;
gap: 0.7rem;
}
.bd-modal-window__footer {
border-top: 1px solid 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: #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: rgba(248, 250, 252, 0.84);
}
.bd-list-row {
transition: background-color .15s ease, box-shadow .15s ease;
}
.bd-list-row:hover {
background-color: #fdfdfd;
box-shadow: 0 0 0 2px #0000000a;
}
.bd-avatar {
background: #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: #d9534f;
color: #fff;
}
.bd-loading-dim {
opacity: .85;
}
/* CRM / cross-module bridge primitives */
.bd-modal-overlay {
position: fixed;
inset: 0;
background: 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: #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 #dc3545;
background: #fdecea;
color: #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: #dc3545 !important;
box-shadow: 0 0 0 .15rem 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: #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%, #111 45% 55%, transparent 55% 100%),
linear-gradient(135deg, transparent 0 65%, #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: #e9ecef; border: 1px solid #111; border-radius: 999px; transition: .15s ease; }
.bd-slider::before { content: ""; position: absolute; width: 18px; height: 18px; left: 3px; top: 2px; background: #111; border-radius: 50%; transition: .15s ease; }
.bd-switch input:checked + .bd-slider { background: #e6f4ea; }
.bd-switch input:checked + .bd-slider::before { transform: translateX(18px); background: #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: #f8d7da;
border-color: #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: #ff4b63; }
.bd-confirm-title.is-success i { color: #18a05f; }
.bd-confirm-title.is-info i { color: #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 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 rgba(15, 23, 42, 0.08);
background: 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: #fff;
}
.bd-chat-demo__item,
.bd-chat-demo__message,
.bd-friday-demo__message {
border: 1px solid rgba(15, 23, 42, 0.10);
border-radius: 18px;
background: #fff;
}
.bd-chat-demo__item {
padding: 0.78rem;
}
.bd-chat-demo__item.is-active {
background: #f6f3db;
border-color: #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: rgba(31, 111, 229, 0.08);
}
.bd-friday-demo__message.is-friday {
background: rgba(15, 23, 42, 0.04);
}
.bd-chat-demo__footer,
.bd-friday-demo__footer {
padding: 0.9rem 1rem;
border-top: 1px solid rgba(15, 23, 42, 0.08);
background: 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: 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, rgba(248,250,252,0.75), 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 #000;
border-radius: 18px;
background: #fff;
box-shadow: 0 14px 32px 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: #111;
}
.bd-action-dock-demo__btn.is-active::after {
content: "";
position: absolute;
left: 10px;
right: 10px;
bottom: 6px;
height: 3px;
border-radius: 999px;
background: #f6c343;
box-shadow: 0 0 6px rgba(241,196,15,.45);
}
.bd-toast-card-demo {
border: 1px solid #000;
border-radius: 16px;
background: #efe7d4;
overflow: hidden;
box-shadow: 0 10px 26px 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: rgba(0,0,0,.08);
overflow: hidden;
}
.bd-toast-card-demo__meter > span {
display: block;
width: 42%;
height: 100%;
background: #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 rgba(15, 23, 42, 0.14);
border-radius: 18px;
background: #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;
text-transform: uppercase;
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: rgba(31, 111, 229, 0.08); border-color: 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 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 rgba(31,111,229,.18), 0 0 0 0 rgba(31,111,229,.14); }
50% { box-shadow: inset 0 0 0 1px rgba(31,111,229,.28), 0 0 0 7px rgba(31,111,229,.04); }
100% { box-shadow: inset 0 0 0 1px rgba(31,111,229,.18), 0 0 0 0 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 rgba(15, 23, 42, 0.08);
}
.bd-sheet-body {
background: 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 rgba(15, 23, 42, 0.12);
border-radius: 18px;
overflow: auto;
background: #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 rgba(15, 23, 42, 0.10);
vertical-align: middle;
}
.bd-sheet-table thead th {
font-size: 0.8rem;
color: var(--bd-muted);
text-transform: uppercase;
letter-spacing: 0.04em;
background: rgba(248, 250, 252, 0.94);
}
.bd-sheet-table__section td {
font-weight: 800;
letter-spacing: 0.05em;
color: #364152;
background: rgba(248, 250, 252, 0.78);
text-transform: uppercase;
}
.bd-sheet-table__subtotal td {
background: rgba(15, 23, 42, 0.02);
font-weight: 700;
}
.bd-sheet-table__add td {
background: rgba(255,255,255,0.96);
color: #2563eb;
font-weight: 600;
}
.bd-sheet-table__empty td {
color: #9ca3af;
font-style: italic;
}
.bd-sheet-oneoff {
display: inline-flex;
align-items: center;
gap: 0.35rem;
padding: 0.2rem 0.45rem;
border: 1px solid rgba(15, 23, 42, 0.18);
border-radius: 12px;
font-size: 0.72rem;
font-weight: 700;
background: rgba(248, 249, 250, 0.95);
}
.bd-sheet-popover {
width: 360px;
max-width: 100%;
border: 1px solid #000;
border-radius: 14px;
overflow: hidden;
background: #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 rgba(15, 23, 42, 0.08);
color: var(--bd-muted);
}
.bd-sheet-signature {
border: 1px solid rgba(15, 23, 42, 0.10);
border-radius: 18px;
background: #fff;
padding: 0.95rem;
display: grid;
gap: 0.8rem;
}
.bd-signature-pad {
border: 1px dashed rgba(15, 23, 42, 0.18);
border-radius: 16px;
background: linear-gradient(180deg, rgba(255,255,255,1), 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 rgba(15, 23, 42, 0.18);
background: 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 rgba(15, 23, 42, 0.12);
border-radius: 16px;
background: 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: 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 rgba(15, 23, 42, 0.08);
background: #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: 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 #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 #000 !important;
box-shadow: none !important;
}
.bd-choice-card-tight.is-active,
.bd-choice-card-std.is-active {
background: rgba(240, 202, 0, 0.18) !important;
border-color: #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: #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: #fff !important;
border: 1px solid #000 !important;
color: #111 !important;
}
.bd-btn-std--dark {
background: #111 !important;
border: 1px solid #111 !important;
color: #fff !important;
}
.bd-btn-std--danger {
background: #dc3545 !important;
border: 1px solid #dc3545 !important;
color: #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 rgba(15, 23, 42, 0.35);
border-bottom: 2px solid 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 #000;
border-radius: 18px;
background: #fff;
overflow: hidden;
}
.bd-est-bridge-head {
padding: 1rem 1rem 0.9rem;
border-bottom: 1px solid rgba(15,23,42,.1);
background: linear-gradient(180deg, rgba(255,255,255,.98), 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 rgba(0,0,0,.14);
border-radius: 12px;
padding: .55rem .65rem;
background: #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 #000;
background: #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 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: #111; }
.bd-est-metric .s { font-size: .8rem; color: var(--bd-muted); margin-top: .2rem; }
.bd-est-rail-card {
border: 1px solid rgba(15,23,42,.1);
border-radius: 14px;
background: #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 #000;
border-radius: 16px;
background: #fff;
overflow: hidden;
}
.bd-est-list-card__head {
padding: .75rem .9rem;
border-bottom: 1px solid rgba(15,23,42,.08);
background: rgba(248,250,252,.82);
}
.bd-est-list-card__body {
padding: .9rem;
}
.bd-est-activity-day {
padding: .6rem .75rem;
border-top: 1px solid rgba(0,0,0,.1);
border-bottom: 1px solid rgba(0,0,0,.1);
background: #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 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: 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 #000;
background: #fff;
z-index: 2;
box-shadow: 0 0 0 2px #fff;
}
.bd-est-activity-main { flex: 1; min-width: 0; }
.bd-est-activity-action { font-weight: 600; font-size: .9rem; color: #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 #000;
border-radius: .5rem;
background: #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 rgba(0,0,0,.35);
background: #f8f9fa;
font-size: .75rem;
}
.bd-est-filter-btn.active { background: #111; color: #fff; }
.bd-est-filter-btn.active .count { background: #fff; color: #111; border-color: #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 #000;
border-left-width: 4px;
border-left-color: #1f6fe5;
border-radius: 0;
background: rgba(31, 111, 229, 0.10);
color: #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 #000;
border-radius: 18px;
background: #fff;
overflow: hidden;
}
.bd-est-takeoff-head {
padding: .9rem 1rem;
border-bottom: 1px solid rgba(15,23,42,.08);
}
.bd-est-takeoff-body {
padding: 1rem;
background: 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 rgba(15,23,42,.18);
background: 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 rgba(15,23,42,.10);
vertical-align: middle;
}
.bd-est-takeoff-table thead th {
font-size: .8rem;
color: var(--bd-muted);
text-transform: uppercase;
letter-spacing: .04em;
background: rgba(248,250,252,.94);
}
.bd-est-takeoff-table__section td {
font-weight: 800;
letter-spacing: .05em;
color: #364152;
background: rgba(248,250,252,.78);
text-transform: uppercase;
}
.bd-est-takeoff-table__add td {
background: rgba(255,255,255,.96);
color: #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: #f6f3db !important;
border: 1px solid #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 #000;
border-radius: 14px;
background: #fff;
overflow: hidden;
}
.bd-board-shell__header {
border-bottom: 1px solid rgba(15, 23, 42, 0.1);
background: linear-gradient(180deg, rgba(255, 255, 255, 0.98), 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 #000;
border-radius: 12px;
background: #fff;
}
.bd-work-card__actions {
display: flex;
gap: 0.25rem;
flex-wrap: nowrap;
}
.bd-metric-tile {
border: 1px solid #000;
border-radius: 12px;
background: #fff;
height: 100%;
}
.bd-search-surface {
border: 1px solid #000;
border-radius: 12px;
box-shadow: var(--bd-std-shadow);
background: #fff;
}
.bd-status-pulse {
animation: bdStatusPulse 2s infinite;
}
@keyframes bdStatusPulse {
0% { box-shadow: 0 0 0 0 rgba(40, 167, 69, 0.6); }
70% { box-shadow: 0 0 0 10px rgba(40, 167, 69, 0); }
100% { box-shadow: 0 0 0 0 rgba(40, 167, 69, 0); }
}
.bd-file-list .list-group-item {
padding: 0.4rem 0.6rem;
}
.bd-file-list .list-group-item:hover {
background: #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 #000;
border-radius: 14px;
background: #fff;
box-shadow: var(--bd-std-shadow-lg);
overflow: hidden;
}
.bd-modal-bridge__header {
padding: 0.6rem 0.9rem;
border-bottom: 1px solid rgba(15, 23, 42, 0.12);
background: #fff;
}
.bd-modal-bridge__body {
padding: 0.9rem;
}
.bd-modal-bridge__footer {
padding: 0.75rem 0.9rem;
border-top: 1px solid rgba(15, 23, 42, 0.1);
background: #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 #000;
}
.bd-form-compact .ts-wrapper {
border: 1px solid #000;
border-radius: 0.25rem;
background: #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 #000;
border-radius: 0.3rem;
background: #e9ecef;
color: #000;
}
.bd-form-compact .ts-dropdown {
border: 1px solid #000;
box-shadow: 0 4px 10px 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: #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, #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 rgba(25,135,84,.85); }
.bd-status-badge {
display: inline-flex;
align-items: center;
gap: .3rem;
border: 1px solid #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 #000; border-radius: 999px; background: #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 #000; border-radius: .55rem;
background: #fff; color: #111; text-decoration: none; font-size: .82rem;
}
.bd-view-chip.active { background: #111; color: #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:#f1f3f5; border:1px solid #000; border-radius:999px; overflow:hidden; }
.pipeline-fill{ position:absolute; top:0; left:0; height:100%; border-radius:999px; }
.pipeline-fill.rfps{background:#dee2e6;} .pipeline-fill.takeoff{background:#ffe066;} .pipeline-fill.pricing{background:#ffd43b;} .pipeline-fill.ready{background:#9ad29a;}
.aging-bar{ position:relative; width:100%; max-width:110px; height:8px; background:#f1f3f5; border:1px solid #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 #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 */
.has-error input,
.has-error select,
.has-error textarea {
border-color: #dc3545 !important;
background-color: #fff8f8;
}
.bidletter-items {
background: #fff;
border: 1px solid #000;
border-radius: .5rem;
padding: 1rem;
margin-bottom: 1.25rem;
}
.bidletter-items .bd-section {
border: 1px solid #000;
background: #f9f9f9;
border-radius: .4rem;
transition: background-color .15s ease;
display: block;
}
.bidletter-items .bd-section:hover {
background: #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: #fffbe6;
outline: 1px solid #000;
}
.drag-handle { cursor: grab; }
.drag-handle:active { cursor: grabbing; }
.category-block {
border: 1px solid #ccc;
border-radius: .4rem;
background: #fff;
transition: box-shadow .1s ease;
}
.category-block:hover { box-shadow: 0 1px 4px rgba(0,0,0,.05); }
.scope-line {
border: 1px solid #e5e5e5;
border-radius: .25rem;
padding: .25rem .5rem;
background: #fff;
}
.scope-line:hover { background: #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: #777 !important; }
.bd-price-chip.good {
background:#e6f4ea;
border:1px solid #198754;
color:#146c43;
padding:1px 6px;
border-radius:4px;
font-size:.8rem;
}
.bd-price-chip.bad {
background:#fdecea;
border:1px solid #dc3545;
color:#842029;
padding:1px 6px;
border-radius:4px;
font-size:.8rem;
}
select.is-error,
.ts-control.is-error {
border-color: #dc3545 !important;
box-shadow: 0 0 0 .15rem 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:#000 !important; color:#fff !important; border:1px solid #000 !important; }
#rfp-form .bd-btn-outline { background:#fff !important; color:#000 !important; border:1px solid #000 !important; }
#rfp-form .bd-btn-ghost { background:transparent !important; border:1px solid transparent !important; color:#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:#f8f9fa; }
#rfp-files-pane table tbody tr.is-selected { background:#fff9db; border-left: 6px solid #e0c84d; }
.editable-form { display:inline; margin:0; }
.edit-badge { display:inline-flex; align-items:center; border:1px solid #000; border-radius:.35rem; background:#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 #000; }
#bidder-form .ts-wrapper { border:1px solid #000; border-radius:.25rem; background:#fff; }
#bidder-form .is-invalid { border-color:#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 #000; box-shadow:0 4px 10px rgba(0,0,0,.08); }
.bd-dist { display:inline-flex; align-items:center; gap:.35rem; border:1px solid #000; border-radius:.5rem; padding:.2rem .55rem; line-height:1; font-size:.78rem; background:#fff; color:#212529; }
.bd-dist:hover { background:#f8f9fa; }
.bd-dist.dropdown-toggle::after { margin-left:.35rem; }
.bd-dist-info{ background:#e7f1fb; border-color:#0d6efd; color:#0b5ed7; }
.bd-dist-warn{ background:#fff7e6; border-color:#f0ad4e; color:#a96f05; }
.bd-dist-bad{ background:#ffe5e5; border-color:#dc3545; color:#b02a37; }
.bd-dist-muted{ background:#f1f3f5; border-color:#6c757d; color:#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:#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 #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: #fff; border: 2px solid #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: #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:#f9f9f9;}
.rfp-group-item.selected{border-left-color:#e0c84d;background:#fff;font-weight:500;}
.rfp-name{color:#000;}
.bd-badge-count{ display:inline-block;min-width:1.4rem;text-align:center; font-size:.7rem;border:1px solid #000;border-radius:.5rem; padding:0 .35rem;background:#fdfdfd; }
.contact-chip{font-size:.8rem;}
.invalid-hint{margin-top:4px;color:#c00;}
#rfp-groups-list,#rfp-group-detail{scrollbar-width:thin;scrollbar-color:#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:#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 #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: rgba(0,0,0,.5);
}
.bd-modal-show-overlay-soft {
display: block;
background: 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: 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: #f8f9fa; z-index: 5; }
.bd-left-accent-flat { position: static; top: auto; --edge-color:#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:#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:#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:#f8f9fa; }
.bd-stage-label { font-size:.65rem; color:#000; }
.bd-mapbox-inline { height:190px; border-radius:.6rem; overflow:hidden; border:1px solid #000; }
.bd-icon-black { color:#000000; }
.bd-icon-red { color:#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: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:#dc3545;}
.bd-edge-info{--edge-color:#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 rgba(0,0,0,.1)}
.bd-card-footer{border-top:1px solid 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 #000;border-radius:.45rem;background:#fff;color:#111;text-decoration:none}
.bd-pill-link.active{background:#111;color:#fff}
.bd-nav-link{display:inline-flex;align-items:center;gap:.35rem;padding:.35rem .6rem;border:1px solid #000;border-radius:.45rem;background:#fff;cursor:pointer}
.bd-nav-link.active{background:#111;color:#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 #000;border-radius:.45rem;padding:.3rem .6rem;text-decoration:none;display:inline-flex;align-items:center;gap:.35rem}
.bd-btn-primary{background:#111;color:#fff}.bd-btn-secondary{background:#fff;color:#111}
.bd-btn-success{background:var(--bd-std-good-surface);color:#145522}.bd-btn-danger{background:var(--bd-std-danger-surface);color:#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:#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 rgba(0,0,0,.08)}
.bd-mini-bar{height:8px;background:#f8f9fa;border:1px solid rgba(0,0,0,.12);border-radius:999px;overflow:hidden}
.bd-mini-fill{height:100%;background:#ddd;border-radius:999px}
.bd-progress{height:8px;background:#f8f9fa;border:1px solid rgba(0,0,0,.12);border-radius:999px;overflow:hidden}
.bd-progress-bar{height:100%;background:#111}
.bd-bulkbar,.bd-bulk-banner{position:sticky;top:8px;z-index:10;background:#fff;border:1px solid #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:#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 #000;border-radius:.4rem;background:#fff}
.bd-team-remove-btn{min-width:26px}
.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 #000;border-radius:.35rem}
.bd-scope-origin-global{background:#f3f4f6}.bd-scope-origin-dept{background:#fff7e6}.bd-scope-origin-custom{background:#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 rgba(0,0,0,.14);border-radius:.55rem;padding:.55rem;background:#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 #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 #000;border-radius:.35rem;background:#fff}
.bd-timeline{display:grid;gap:.55rem}
.bd-modal{position:fixed;inset:0;display:flex;align-items:center;justify-content:center;background:rgba(0,0,0,.45);z-index:1060}
.bd-modal__dialog{width:min(680px,95vw);background:#fff;border:1px solid #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:#1f6fe5}
.bd-badge{display:inline-flex;align-items:center;gap:.25rem;padding:.2rem .5rem;border:1px solid #000;border-radius:.4rem;background:#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:#145522}
.bd-badge-info{background:var(--bd-std-info-surface);border-color:var(--bd-std-info-border);color:#184ea5}
.bd-badge-warn,.bd-badge-warning{background:var(--bd-std-warn-surface);border-color:var(--bd-std-warn-border);color:#7a4f00}
.bd-badge-bad,.bd-badge-danger{background:var(--bd-std-danger-surface);border-color:var(--bd-std-danger-border);color:#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 #000;background:#fff;border-radius:.35rem}
.bd-subcard{border:1px solid #000;border-radius:.65rem;background:#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: #fafafa;
border-bottom: 1px solid #000;
padding: 6px;
text-align: center;
font-weight: 600;
}
.bd-timesheet-grid td {
border-bottom: 1px solid #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: #eef4ff; box-shadow: inset 0 0 0 1px #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: #16a34a; opacity: 1; }
.cell-status.error { color: #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: #92400e; background: #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: #6b7280; cursor: pointer; }
.ts-action:hover { color: #111827; }
.ts-action.danger:hover { color: #dc2626; }
.ts-banner { border-radius: 8px; padding: 8px 12px; font-size: 13px; }
.ts-banner.error { background: #fef2f2; color: #991b1b; border: 1px solid #fecaca; }
.ts-banner.info { background: #eff6ff; color: #1e40af; border: 1px solid #bfdbfe; }
.timesheet-row[data-row-type="clock"] .cell-assignment,
.timesheet-row[data-row-type="clock"] td { background: #fcfcfc; }
.timesheet-row[data-row-type="clock"] .ts-action { opacity: 0.9; }
.ts-schedule-cell { min-width: 110px; cursor: pointer; }
.cell-editor { background: #fff; border: 1px solid #000; border-radius: 4px; padding: 4px; }
.unscheduled-chip { border: 1px dashed #999; border-radius: 4px; padding: 3px 6px; cursor: pointer; font-size: 0.75rem; }
.unscheduled-chip:hover { background: #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 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: #111; }
.crew-metric-lbl { font-size: 0.8rem; color: #6c757d; font-weight: 600; }
.crew-warn { color: #b68200; }
.crew-bad { color: #b02a37; }
.crew-flag { display: inline-flex; align-items: center; gap: 6px; padding: 2px 10px; border-radius: 999px; border: 1px solid #111; font-size: 0.75rem; font-weight: 700; line-height: 1.2; }
.crew-flag-warn { background: #fff6d9; border-color: #b68200; color: #5c4c00; }
.crew-flag-bad { background: #fbeaea; border-color: #b02a37; color: #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, #f3f4f6 25%, #e5e7eb 37%, #f3f4f6 63%); background-size: 400% 100%; animation: skel 1.2s ease-in-out infinite; border-radius: 10px; border: 1px solid 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: rgba(255,255,255,0.72); backdrop-filter: blur(2px); }
.crew-card.is-busy .crew-busy-overlay { display: flex; }
.crew-btn { border: 1px solid #111; border-radius: 10px; padding: 6px 10px; background: #fff; line-height: 1; }
.crew-btn i { font-size: 0.95rem; }
.crew-btn-approve { border-color: #198754; color: #198754; background: #e8f7ee; }
.crew-btn-approve:hover { background: #dff3e7; }
.crew-btn-reject { border-color: #b02a37; color: #b02a37; background: #fbeaea; }
.crew-btn-reject:hover { background: #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: #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: #94a3b8;
}
.bd-module-header__meta nav a { color: #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 { text-transform: uppercase; 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 { text-transform: uppercase; font-size: 0.75rem; letter-spacing: .05em; color: #64748b; }
.pto-calendar-table td { background: linear-gradient(180deg,#ffffff 0%,#f8fafc 100%); border:1px solid 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: #f1f5f9; color: #94a3b8; }
.pto-calendar-table td.today { box-shadow: 0 0 0 2px 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 rgba(15,23,42,0.18); background:#fff; box-shadow:0 6px 14px rgba(15,23,42,0.08); width:100%; transition:border-color .2s ease, box-shadow .2s ease; }
.pto-chip:hover { border-color:rgba(37,99,235,0.45); cursor:pointer; box-shadow:0 8px 18px rgba(37,99,235,0.12); }
.pto-chip.is-mine { border-color:rgba(37,99,235,0.65); box-shadow:0 0 0 2px rgba(37,99,235,0.18); }
.pto-chip .name { font-size:0.8rem; font-weight:600; color:#0f172a; }
.pto-chip .bd-chip { font-size:0.7rem; text-transform:uppercase; letter-spacing:.04em; }
.pto-empty { color:#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: rgba(148,163,184,0.25); border-radius: 0.5rem; overflow: hidden; }
.bd-progress-bar { height: 0.65rem; background: #22c55e; }
.bd-left-accent-success { border-left: 4px solid #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;
text-transform: uppercase;
font-weight: 600;
color: #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: rgba(15, 23, 42, 0.08);
}
.bd-metric-label,
.bd-hero-metric__label { font-size: 0.75rem; text-transform: uppercase; letter-spacing: 0.08em; color: #94a3b8; font-weight: 600; }
.bd-metric-value,
.bd-hero-metric__value { font-size: 1.85rem; font-weight: 600; color: #0f172a; }
.bd-metric-meta { font-size: 0.85rem; color: #64748b; }
.bd-card-subsection { border-radius: 1rem; border: 1px solid rgba(15,23,42,0.08); background: 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 rgba(15,23,42,0.08); vertical-align: top; }
.bd-toolbar { border-radius: 1.35rem; padding: 1.5rem; border: 1px solid rgba(15,23,42,0.12); background: #fff; }
.bd-toolbar__icon { width: 2.5rem; height: 2.5rem; border-radius: 0.85rem; justify-content: center; }
.bd-toolbar__meta { color: #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: #145522; }
.bd-chip-danger { background: var(--bd-std-danger-surface); border-color: var(--bd-std-danger-border); color: #8c241a; }
.bd-chip-ticket { background: 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: #0f172a; }
.bd-form-error { border: 1px solid rgba(179,38,30,.34); background: rgba(179,38,30,.08); color: #8c241a; border-radius: 10px; padding: .6rem .75rem; }
.bd-field-error { color: #8c241a; font-size: .82rem; }
.bd-btn-soft { background: rgba(15,23,42,0.05); border: 1px solid rgba(15,23,42,0.12); color: #111; }
.bd-btn-soft:hover { background: rgba(15,23,42,0.09); }
.bd-modal-overlay { position: fixed; inset: 0; background: 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 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: rgba(15,23,42,0.08); }
/* =========================================================
Discovery bridge primitives — workspace/table/grid/modal shells
========================================================= */
.bd-workspace-shell,
.bd-toolbar-shell {
background: #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: #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 rgba(0,0,0,.12);
}
.bd-filter-chip.is-active,
.bd-filter-chip.active {
background: #111 !important;
color: #fff !important;
border-color: #000 !important;
}
.bd-list-row {
border: 1px solid rgba(15, 23, 42, 0.09);
border-radius: 8px;
background: #fff;
transition: all .15s ease;
}
.bd-list-row:hover,
.bd-list-row.is-active {
background: #f9fafb;
box-shadow: 0 2px 6px rgba(0,0,0,0.06);
}
:is(.bd-signature-panel, #ticket-signature-panel) { position: relative; }
.signature-surface {
border: 1px dashed rgba(0, 0, 0, 0.25);
border-radius: 10px;
background: #fafafa;
padding: 8px;
height: 180px;
display: flex;
flex-direction: column;
justify-content: stretch;
}
.signature-canvas {
width: 100%;
height: 100%;
background: #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: #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: #f9fafb; border-radius: 10px; padding: 12px; }
.signature-preview { max-height: 120px; display: block; background: #fff; border-radius: 6px; }
.signature-invalid { border-color: #dc2626 !important; background: #fff5f5; }
#signature-error-banner { border-left: 4px solid #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 #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:#e9f1fd; border-color:#1f6fe5; color:#123f87; }
.item-kind-inventory,.bd-item-kind-inventory{ background:#e8f4ec; border-color:#1a7f2e; color:#145522; }
.item-kind-adhoc,.bd-item-kind-adhoc{ background:#f0f0f0; border-color:#555; color:#333; }
.bd-worksheet-grid-shell,
.ticket-grid-shell {
border: 1px solid #e5e7eb;
border-radius: 10px;
overflow: visible;
}
.bd-worksheet-grid,
.ticket-grid {
width: 100%;
font-size: 13px;
background: #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: #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: #f9fafb; }
.ticket-grid-header,
.bd-worksheet-grid__header { font-size: 11px; font-weight: 600; letter-spacing: 0.02em; color: #6b7280; background: #f8fafc; border-bottom: 2px solid #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; text-transform: uppercase; color: #374151; padding: 10px 12px; background: #f9fafb; border-top: 1px solid #e5e7eb; border-bottom: 1px solid #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:#eef2ff; border-radius:4px; outline: 2px solid 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:#111827; }
.ticket-grid-row .cell.unit,
.bd-worksheet-grid__row .cell.unit { justify-content:center; color:#6b7280; font-weight:500; user-select:none; }
.ticket-grid-row .cell.total,
.bd-worksheet-grid__row .cell.total { font-weight:600; color:#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, #f9fafb, #fff); font-weight:700; border-top:1px solid #d1d5db; }
.ticket-grid-row.subtotal-row::after,
.bd-worksheet-grid__row.subtotal-row::after { background:#d1d5db; }
.ticket-grid-row.add-row,
.bd-worksheet-grid__row.add-row { cursor:pointer; color:#2563eb; font-weight:500; background:#fafcff; }
.ticket-grid-row.add-row:hover,
.bd-worksheet-grid__row.add-row:hover { background:#eef2ff; }
.ticket-grid-row.empty-row,
.bd-worksheet-grid__row.empty-row { font-style:italic; color:#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:#fee2e2; color:#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:#bfdbfe; }
.ticket-grid-row[data-line-type="labor"]::before,
.bd-worksheet-grid__row[data-line-type="labor"]::before { background:#fde68a; }
.ticket-grid-row[data-line-type="other"]::before,
.bd-worksheet-grid__row[data-line-type="other"]::before { background:#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:#facc15; }
.ticket-grid-row.is-saving::before{ background:#93c5fd; }
.ticket-grid-row.is-error::before{ background:#fca5a5; }
.ticket-grid-row .cell.actions::after { content:""; width:6px; height:6px; border-radius:50%; background: rgba(17,17,17,.18); display:inline-block; }
.ticket-grid-row.is-dirty .cell.actions::after{ background:#facc15; }
.ticket-grid-row.is-saving .cell.actions::after{ background:#93c5fd; }
.ticket-grid-row.is-error .cell.actions::after{ background:#fca5a5; }
.ticket-grid-row.is-saved .cell.actions::after{ background:#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 #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; text-transform:uppercase; padding:8px 10px; border-top:1px solid #e5e7eb; background:#f9fafb; color:#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:#6b7280; margin-top:2px; line-height:1.2; }
.ts-opt-pill{ display:inline-flex; align-items:center; justify-content:center; border:1px solid #111; border-radius:999px; padding:1px 6px; font-size:10px; font-weight:700; white-space:nowrap; opacity:.9; }
.ts-opt-pill-adhoc{ background:#f0f0f0; color:#333; border-color:#555; }
.ts-opt-pill-cat{ background:#e9f1fd; color:#123f87; border-color:#1f6fe5; }
.ts-opt-pill-inv{ background:#e8f4ec; color:#145522; border-color:#1a7f2e; }
.ts-no-results{ padding:8px 10px; font-size:12px; color:#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 rgba(220,53,69,0.4); }
70% { box-shadow: 0 0 0 10px rgba(220,53,69,0); }
100% { box-shadow: 0 0 0 0 rgba(220,53,69,0); }
}
.bd-ts-option {
padding: 6px 8px;
}
.bd-ts-call {
border-left: 3px solid #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: #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 #000;
}
.bd-split-modal .call-type-chip {
background: #f8f9fa;
color: #333;
}
.bd-split-modal .priority-chip {
background: #fff;
color: #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: #111 !important;
color: #fff !important;
border-color: #111 !important;
}
.ts-wrapper.is-invalid .ts-control {
border-color: #dc3545 !important;
background: #f8d7da !important;
}
.ts-dropdown .add-new-option {
background: #f8f9fa;
border-top: 1px solid #000;
font-weight: 600;
}
.ts-dropdown .add-new-option:hover {
background: #e9ecef;
}
/* =========================================================
Service migration bridges — remaining module surfaces
========================================================= */
.bd-service-dashboard .bd-folder-link { color:#212529; text-decoration:none; cursor:pointer; }
.bd-service-dashboard .bd-folder-link:hover { color:#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 #000; background:#fff9db; font-size:.85rem; }
.bd-service-dashboard .bd-widget { background:#fff; border:1px solid #e3e3e3; border-radius:10px; box-shadow:0 1px 2px 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 #ececec; background:#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 #eee; cursor:pointer; }
.bd-service-dashboard .bd-widget-row:last-child{border-bottom:none;}
.bd-service-dashboard .bd-widget-row:hover{background:#f9f9f9;}
.bd-service-dashboard .bd-widget-detail{display:none;margin-top:.4rem;padding-top:.45rem;border-top:1px dashed #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:#999; font-size:.72rem; text-transform:uppercase; letter-spacing:.3px; }
.bd-service-dashboard .bd-stat-value { font-size:.82rem; font-weight:500; color:#222; }
.bd-service-dashboard .bd-priority.high{color:#d32f2f;font-weight:600;}
.bd-service-dashboard .bd-priority.medium{color:#f57c00;}
.bd-service-dashboard .bd-priority.low{color:#388e3c;}
.bd-site-form-surface .bd-card,
.bd-site-modal .bd-card,
.bd-pm-exec-modal .bd-card {
background:#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:#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:#fff9db; border-left:3px solid #fcc419; }
.bd-library-shell .bd-file-row:hover { background-color:#fffbea; }
.bd-library-shell .bd-left-accent::before { content:""; position:absolute; top:0; bottom:0; left:0; width:4px; background:#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: #f8f9fa; color: #212529; border-bottom: 2px solid #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, #fff 50%, transparent); padding-left: 8px; }
.badge.bg-secondary-subtle { background: #f8f9fa; color: #333; border-color: #ced4da; }
.bd-library-file-table tbody tr:nth-child(even) { background-color: #fdfdfd; }
.bd-library-file-table tbody tr:hover { background-color: #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: #fffdf5; }
.bd-file-row.is-folder:hover { background-color: #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 #cfd4dc;
border-radius: 12px;
background: #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 #dfe3e8;
display: inline-flex;
align-items: center;
justify-content: center;
text-decoration: none;
color: #2b313c;
background: #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: #111827;
color: #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: #f8fafc;
color: #111827;
}
.bd-action-strip--project .bd-action-strip__btn--hero:hover,
.bd-action-strip--project .bd-action-strip__btn--hero:focus-visible {
background: #0f172a;
color: #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: #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: 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 #4a4a4a;
border-radius: 50%;
background: #fff;
}
.bd-rating-dots .dot.filled,
.stat-dots .dot.filled {
background: #111;
border-color: #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 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 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;
text-transform: uppercase;
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 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: 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;
text-transform: uppercase;
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 rgba(0, 0, 0, .08);
}
[data-theme="dark"] .bd-est-activity-row {
border-color: 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;
}
}