.dft-takeoff-root {
  position: relative;
  border: 1px solid #e5e7eb;
  border-radius: 10px;
  overflow: hidden;
  background: #fff;
  font-family: ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial, "Apple Color Emoji", "Segoe UI Emoji";
}

/* When the take-off UI is active, lock host page scrolling so we don't get two vertical scrollbars
   (page scrollbar + side panel scrollbar). The JS adds the class to <html> and <body>. */
html.dft-no-page-scroll,
body.dft-no-page-scroll {
  overflow: hidden !important;
  height: 100% !important;
}

/* In no-page-scroll mode, use the full viewport for the app */
body.dft-no-page-scroll .dft-takeoff-root {
  position: relative;
  height: 100vh;
}

body.dft-no-page-scroll .dft-main {
  height: calc(100vh - 44px);
  max-height: none;
  min-height: 0;
}

/* Make the always-visible Groups section feel like a fixed header within the sidebar */
.dft-side-static {
  padding: 10px 10px 0 10px;
  border-bottom: 1px solid #e5e7eb;
  background: #fff;
}

.dft-toolbar {
  display: flex;
  justify-content: flex-start;
  gap: 4px;
  padding: 1px 6px;
  min-height: 30px;
  background: #f8fafc;
  border-bottom: 1px solid #e5e7eb;
  align-items: center;
}

.dft-toolbar-left {
  display: flex;
  align-items: center;
  gap: 4px;
  flex-wrap: nowrap;
  flex: 0 1 auto;
}

/* Load PDFs button: overlay a transparent file input over the button.
   This avoids browser restrictions around programmatically clicking hidden file inputs. */
.dft-load-pdfs-wrap{
  position: relative;
  display: inline-block;
}
.dft-load-pdfs-wrap .dft-btn{
  position: relative;
  z-index: 1;
}
.dft-file-input-overlay{
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  opacity: 0;
  cursor: pointer;
  z-index: 2;
}

.dft-top-shortcuts{
  display:flex;
  align-items:center;
  gap:4px;
  flex-wrap:nowrap;
}
.dft-top-shortcuts .dft-icon-btn{
  font-size:14px !important;
  font-weight:700;
  line-height:1;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  padding:0 !important;
}

.dft-top-actions{
  display:inline-flex;
  align-items:center;
  gap:4px;
  flex-wrap:nowrap;
}
.dft-top-actions .dft-icon-btn{
  font-size:14px !important;
  font-weight:700;
  line-height:1;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  padding:0 !important;
}
.dft-group-select-swatch{
  width:12px;
  height:12px;
  border-radius:999px;
  border:1px solid #94a3b8;
  background:#0b78e0;
  box-shadow: inset 0 0 0 1px rgba(255,255,255,0.35);
  flex:0 0 auto;
}
.dft-side-takeoff-summary-panel{
  padding:10px 12px;
}
.dft-side-takeoff-summary-panel .dft-takeoff-summary{
  margin:0;
}


.dft-toolbar-right {
  display: flex;
  align-items: center;
  gap: 4px;
  margin-left: auto;
  flex-wrap: nowrap;
  justify-content: flex-end;
  min-width: 0;
}

.dft-toolbar-links{
  display:inline-flex;
  align-items:center;
  gap:4px;
}
.dft-toolbar-link-btn{
  color:#2563eb !important;
  text-decoration:none !important;
  display:inline-flex !important;
  align-items:center;
  justify-content:center;
  padding:0 !important;
}
.dft-toolbar-link-btn svg{
  width:14px;
  height:14px;
  stroke:currentColor;
  fill:none;
  stroke-width:2;
  stroke-linecap:round;
  stroke-linejoin:round;
}


.dft-session-banner{
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 2px 5px;
  border-radius: 999px;
  border: 1px solid #d1d5db;
  background: #fff;
  color: #334155;
  font-size: 10px;
  line-height: 1.05;
  max-width: 150px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.dft-session-banner strong{ color:#0f172a; }
.dft-session-banner.is-guest{
  background: #fff7ed;
  border-color: #fed7aa;
  color: #9a3412;
}
.dft-session-banner.is-logged-in{
  background: #ecfeff;
  border-color: #a5f3fc;
  color: #155e75;
}
.dft-session-banner a{
  color: inherit;
  text-decoration: underline;
  font-weight: 600;
}
@media (max-width: 1400px){
  .dft-session-banner{
    max-width: 150px;
  }
}
@media (max-width: 1100px){
  .dft-session-banner{
    max-width: 100%;
    white-space: normal;
  }
}

.dft-toolbar-mid {
  flex: 1 1 auto;
  display: flex;
  align-items: center;
  justify-content: flex-start;
  gap: 4px;
  flex-wrap: wrap; /* allow group controls + job fields to fit on smaller widths */
  min-width: 240px;
}

/* Top-bar group controls (moved from right panel) */
.dft-toolbar-group{
  display:inline-flex;
  align-items:center;
  gap:3px;
  max-width: none;
  min-width: 0;
}
.dft-toolbar-group-label{
  font-size:12px;
  color:#334155;
  white-space:nowrap;
}
.dft-toolbar-group select{
  width: 112px;
  max-width: 124px;
  padding: 3px 7px;
  border-radius: 8px;
  border: 1px solid #cbd5e1;
  font-size: 12.5px;
}

/* Compact selects for Spec / Insulation in the top bar */
.dft-toolbar-group select.dft-toolbar-select-compact{
  width: 120px;
  max-width: 160px;
}

.dft-toolbar-group select.dft-toolbar-select-compact:disabled{
  opacity: 0.6;
}
.dft-toolbar-group .dft-group-color-wrap{ margin-left: 1px; }
.dft-toolbar-group .dft-toolbar-group-actions{ display:inline-flex; align-items:center; gap:3px; margin-left: 1px; }
.dft-toolbar-group .dft-toolbar-group-actions .dft-icon-btn{ width:26px; height:26px; min-width:26px; min-height:26px; }
.dft-toolbar-group .dft-color-btn{
  width: 26px !important;
  height: 26px !important;
  min-width: 26px !important;
  min-height: 26px !important;
  padding: 2px !important;
  border-radius: 8px !important;
  box-sizing: border-box;
  box-shadow: none !important;
  margin: 0 !important;
}
.dft-toolbar-group .dft-color-btn:focus,
.dft-toolbar-group .dft-color-btn:focus-visible{
  box-shadow: none !important;
}
.dft-toolbar-group .dft-group-color-wrap{
  margin-left: 0 !important;
  margin-right: 2px;
  flex: 0 0 auto;
}
.dft-toolbar-group .dft-color-swatch{
  width: 14px;
  height: 14px;
  border-radius: 4px;
}
.dft-toolbar-group .dft-group-color{
  width: 18px;
  height: 18px;
  border-radius: 6px;
  border: 1px solid #cbd5e1;
  background:#0ea5e9;
  cursor:pointer;
}
.dft-toolbar-group .dft-group-add,
.dft-toolbar-group .dft-group-rename{
  /* Override Astra/Elementor button styling */
  border: 1px solid #d1d5db !important;
  background: #fff !important;
  padding: 6px 10px !important;
  border-radius: 8px !important;
  cursor: pointer;
  font-size: 13px !important;
  line-height: 1 !important;
  color: #2563eb !important;
  box-shadow: none !important;
  text-transform: none !important;
}

/* Optional generic small-button reset (used in top-bar) */
.dft-takeoff-root .dft-small-btn{
  border: 1px solid #d1d5db !important;
  background: #fff !important;
  padding: 6px 10px !important;
  border-radius: 8px !important;
  cursor: pointer;
  font-size: 13px !important;
  line-height: 1 !important;
  color: #2563eb !important;
  box-shadow: none !important;
  text-transform: none !important;
}

.dft-toolbar-field {
  display: inline-flex;
  align-items: center;
  gap: 6px;
}

.dft-toolbar-label,
.dft-toolbar-group-label {
  display: none;
}

.dft-toolbar-mid input[type="text"] {
  width: 190px;
  max-width: 240px;
  padding: 2px 7px;
  border-radius: 8px;
  border: 1px solid #cbd5e1;
  font-size: 12.5px;
}

#dft-job-name { width: 185px; max-width: 210px; }
#dft-drawing-no { width: 170px; max-width: 200px; }

.dft-hidden { display: none; }

/* Top toolbar compaction (drawing-first layout) */
.dft-toolbar .dft-btn,
.dft-toolbar .dft-small-btn{
  padding: 2px 6px !important;
  min-height: 26px;
  font-size: 12px !important;
}
.dft-toolbar .dft-icon-btn{
  width: 26px;
  height: 26px;
  min-width: 26px;
  min-height: 26px;
}
.dft-toolbar-mid input[type="text"],
.dft-toolbar-group select{
  min-height: 26px;
}


.dft-sep {
  width: 1px;
  height: 20px;
  background: #e5e7eb;
  margin: 0 4px;
}

.dft-btn {
  /* Override theme button defaults (Astra/Elementor) */
  border: 1px solid #d1d5db !important;
  background: #fff !important;
  padding: 6px 10px;
  border-radius: 8px;
  cursor: pointer;
  font-size: 13px;
  line-height: 1;
  color: #2563eb !important;
}


.dft-btn:hover { background: #f3f4f6 !important; }

.dft-btn-icon-only{
  min-width: 38px;
  width: 38px;
  padding-left: 0 !important;
  padding-right: 0 !important;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 18px;
  line-height: 1;
}
.dft-btn-measure-icon img{
  width: 18px;
  height: 18px;
  display: block;
}
.dft-btn:active { transform: translateY(1px); }

.dft-btn:disabled {
  opacity: 0.55;
  cursor: not-allowed;
}

.dft-btn-primary {
  border-color: #2563eb !important;
  background: #2563eb !important;
  color: #fff !important;
}
.dft-btn-primary:hover { filter: brightness(0.95); background: #2563eb !important; }

.dft-btn-danger {
  border-color: #ef4444 !important;
  color: #ef4444 !important;
}
.dft-btn-danger:hover { background: #fef2f2 !important; }

.dft-file-btn input { display: none; }
.dft-file-btn span {
  display: inline-block;
  border: 1px solid #d1d5db;
  padding: 6px 10px;
  border-radius: 8px;
  cursor: pointer;
  font-size: 13px;
  background: #fff;
  color: #2563eb;
}

.dft-file-btn span:hover { background: #f3f4f6; }

/* v0.3.35: compact top-bar controls to match Tools button height */
.dft-toolbar .dft-file-btn span{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  height:26px;
  min-height:26px;
  padding:0 10px !important;
  line-height:1 !important;
  box-sizing:border-box;
  font-size:12px !important;
  border-radius:8px !important;
}
.dft-toolbar .dft-toolbar-group select,
.dft-toolbar .dft-toolbar-mid input[type="text"]{
  height:26px !important;
  min-height:26px !important;
  box-sizing:border-box;
  padding-top:0 !important;
  padding-bottom:0 !important;
  line-height:24px !important;
  border-radius:8px !important;
  margin:0 !important;
}
.dft-toolbar .dft-toolbar-mid input[type="text"]{
  padding-left:8px !important;
  padding-right:8px !important;
}
.dft-toolbar .dft-toolbar-group select{
  padding-left:8px !important;
  padding-right:22px !important;
}

.dft-page-nav {
  display: flex;
  align-items: center;
  gap: 6px;
}
.dft-page-label { font-size: 13px; color: #111827; }

.dft-toggle {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 13px;
  user-select: none;
}
.dft-toggle input { transform: translateY(1px); }

.dft-hint {
  font-size: 12px;
  color: #475569;
}
.dft-hint kbd {
  border: 1px solid #cbd5e1;
  border-bottom-width: 2px;
  padding: 1px 6px;
  border-radius: 6px;
  background: #fff;
  font-size: 12px;
}

.dft-main {
    width: 100%;
  max-width: 100%;
  overflow-x: hidden;
  display: grid;
  /*
    Elementor/theme wrappers sometimes add padding which can cause the side panel to
    appear clipped. Use minmax(0,1fr) on the canvas column to prevent horizontal overflow,
    and keep the side panel wide enough that controls don't collapse into a skinny column.
  */
  grid-template-columns: minmax(0, 1fr) var(--dft-side-shell-width, 240px);
  min-height: 620px;
  height: 78vh;
  max-height: 900px;
}
/* IMPORTANT: prevent the left canvas column from forcing the whole grid wider than the container.
   This keeps the right-hand controls visible and puts overflow into the scroll area instead. */
.dft-main > * { min-width: 0; min-height: 0; }
.dft-canvas-wrap { min-width: 0; }
.dft-canvas-scroll { width: 100%; max-width: 100%; overflow: auto; }

.dft-takeoff-root{
  --dft-side-expanded-width: 240px;
  --dft-side-tab-width: 28px;
  --dft-side-collapsed-width: 0px;
  --dft-side-shell-width: var(--dft-side-expanded-width);
}

.dft-side-shell{
  position: relative;
  width: var(--dft-side-shell-width);
  min-width: var(--dft-side-shell-width);
  max-width: var(--dft-side-shell-width);
  overflow: visible;
  background: transparent;
  z-index: 6;
}

.dft-side-toggle{
  position: absolute;
  top: 14px;
  left: calc(-1 * var(--dft-side-tab-width));
  width: var(--dft-side-tab-width);
  min-width: var(--dft-side-tab-width);
  height: 92px;
  border: 1px solid #cbd5e1;
  border-right: none;
  border-radius: 12px 0 0 12px;
  background: #0f172a;
  color: #fff;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 6px;
  padding: 8px 4px;
  box-shadow: -3px 6px 16px rgba(15, 23, 42, 0.18);
  cursor: pointer;
  z-index: 8;
}

.dft-side-toggle:hover{ filter: brightness(1.05); }

.dft-side-toggle__icon{
  font-size: 14px;
  line-height: 1;
  transform: rotate(180deg);
  transition: transform .22s ease;
}

.dft-side-toggle__label{
  writing-mode: vertical-rl;
  transform: rotate(180deg);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .08em;
  text-transform: uppercase;
  line-height: 1;
}

.dft-side{
  position: relative;
  margin-left: 0;
  width: var(--dft-side-expanded-width);
  transition: transform .24s ease, box-shadow .24s ease;
  will-change: transform;
}

.dft-takeoff-root.dft-side-collapsed{
  --dft-side-shell-width: var(--dft-side-collapsed-width);
}

.dft-takeoff-root.dft-side-collapsed .dft-side{
  transform: translateX(var(--dft-side-expanded-width));
  box-shadow: none;
}

.dft-takeoff-root.dft-side-collapsed .dft-side-toggle{
  left: calc(-1 * var(--dft-side-tab-width));
  box-shadow: -3px 6px 16px rgba(15, 23, 42, 0.22);
}

.dft-takeoff-root.dft-side-collapsed .dft-side-toggle__icon{
  transform: rotate(0deg);
}

@media (max-width: 1100px) {
  .dft-takeoff-root{
    --dft-side-shell-width: 100%;
  }
  .dft-side-shell,
  .dft-takeoff-root.dft-side-collapsed .dft-side-shell{
    width: 100%;
    min-width: 100%;
    max-width: 100%;
  }
  .dft-side-toggle{
    display:none;
  }
  .dft-side{
    transform:none !important;
  }
}

@media (max-width: 1100px) {
  .dft-main { grid-template-columns: 1fr; }
  .dft-side { border-left: none !important; border-top: 1px solid #e5e7eb; }
}

.dft-canvas-wrap {
  position: relative;
  background: #0b1220;
}

.dft-canvas-scroll {
  height: 100%;
  overflow: auto;
  position: relative;
}

.dft-canvas-stack {
  position: relative;
  display: inline-block;
  margin: 16px;
  max-width: 100%;
  border-radius: 8px;
  /* Default (no PDF loaded): blend into the dark workspace so the empty viewport doesn't look like a random box */
  background: transparent;
  box-shadow: none;
}

/* Once a PDF is loaded, restore the "page viewport" styling */
.dft-canvas-stack.dft-has-pdf {
  background: #111827;
  box-shadow: 0 20px 50px rgba(0,0,0,0.35);
}
#dft-pdf-canvas, #dft-overlay-canvas {
  display: block;
}

#dft-overlay-canvas {
  position: absolute;
  left: 0; top: 0;
  pointer-events: auto;
}


/* -------------------------------
   Mini-map / Navigator (top-right)
   Option A: real PDF render + clickable pan
   ------------------------------- */
.dft-minimap {
  position: absolute;
  top: 12px;
  right: 12px;
  z-index: 40;
  width: 240px;
  max-width: 45%;
  padding: 8px;
  border-radius: 10px;
  background: rgba(15, 23, 42, 0.92);
  border: 1px solid rgba(148, 163, 184, 0.35);
  box-shadow: 0 16px 38px rgba(0,0,0,0.45);
  user-select: none;
  touch-action: none;
}

.dft-minimap canvas {
  display: block;
  width: 100%;
  height: auto;
  border-radius: 6px;
  background: #0b1220;
}

.dft-minimap-viewport {
  position: absolute;
  box-sizing: border-box;
  border: 2px solid rgba(34, 211, 238, 0.95);
  background: rgba(34, 211, 238, 0.10);
  border-radius: 4px;
  cursor: grab;
}

.dft-minimap-viewport:active {
  cursor: grabbing;
}

\.dft-statusbar {
  position: static;
  left: 0;
  right: 0;
  bottom: 0;
  display: flex;
  justify-content: flex-start;
  gap: 8px;
  padding: 8px 10px;
  background: rgba(15, 23, 42, 0.85);
  color: #e2e8f0;
  font-size: 12px;
}

.dft-side {
  border-left: 1px solid #e5e7eb;
  background: #fff;
  /* Prevent the sidebar collapsing into a very narrow column */
  width: 240px;
  min-width: 240px;
  max-width: 240px;
  box-sizing: border-box;
  overflow: auto;
  overflow-x: hidden;
}

.dft-panel {
  border-bottom: 1px solid #e5e7eb;
  padding: 12px 12px 14px;
}

.dft-panel h3 {
  margin: 0 0 10px 0;
  font-size: 14px;
  color: #0f172a;
}

.dft-row {
  margin-bottom: 10px;
  display: grid;
  /* More resilient sizing in tight sidebars */
  grid-template-columns: 110px minmax(0, 1fr);
  align-items: center;
  gap: 8px;
}

/* Stack label above control for specific rows (e.g., Category / Item) */
.dft-row--stack{
  grid-template-columns: 1fr;
  column-gap: 0;
}
.dft-row--stack > label{
  padding-top: 0;
}

.dft-row label {
  display: block;
  font-size: 12px;
  color: #334155;
  margin: 0;
}
.dft-row input[type="text"], .dft-row input[type="number"], .dft-row select {
  width: 100%;
  min-width: 90px;
  padding: 8px 10px;
  border-radius: 8px;
  border: 1px solid #cbd5e1;
  font-size: 12.5px;
}

.dft-inline {
  display: flex;
  gap: 8px;
  align-items: center;
}
.dft-inline select { flex: 1; }
.dft-inline .dft-btn { white-space: nowrap; }

/* -------------------------------
   Item selector: Tabs + grid buttons (desktop-first)
-------------------------------- */
.dft-item-tabs {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}
.dft-item-tabs .dft-btn {
  /* 2 buttons per row; with 3+ categories this places the 3rd under the 1st (as requested) */
  flex: 1 1 calc(50% - 8px);
  text-align: center;
  padding: 7px 10px;
}


/* Make Grilles & Louvres occupy the full third row */
.dft-item-tabs .dft-item-tab--grilles-louvres {
  flex: 1 1 100%;
}
.dft-item-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
  gap: 6px;
}
.dft-item-grid .dft-btn {
  padding: 6px 8px;
  font-size: 12px;
  line-height: 1.1;
  white-space: normal;
}

/* -------------------------------
   Item selector: Icon grid (used for Rectangular items)
-------------------------------- */
.dft-item-grid.dft-item-grid-icons {
  /* Fixed columns prevent the grid from collapsing into thin slivers */
  /* 4-column layout to cluster stamp icons tighter in the right panel */
  grid-template-columns: repeat(4, 44px);
  gap: 8px;
  width: 100%;
  justify-content: start;
}
.dft-item-grid.dft-item-grid-icons .dft-btn {
  padding: 0;
  height: 44px;
  min-height: 44px;
  width: 44px;
  min-width: 44px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 10px;
}

/* Selected icon tile surround (matches the bold blue style the UI uses) */
.dft-item-grid.dft-item-grid-icons .dft-btn-primary{
  background: #fff !important;
  color: #2563eb !important;
  border-color: transparent !important;
  outline: 3px solid #2563eb;
  outline-offset: 2px;
}

/* Fire Rated mode: bold red surround (same thickness as blue) */
body.dft-mode-fire .dft-item-grid.dft-item-grid-icons .dft-btn-primary{
  outline-color: #dc2626;
}

/* Smoke Vent mode: bold black surround (same thickness as blue) */
body.dft-mode-smoke .dft-item-grid.dft-item-grid-icons .dft-btn-primary{
  outline-color: #111827;
}

.dft-item-icon {
  width: 28px;
  height: 28px;
  min-width: 28px;
  min-height: 28px;
  object-fit: contain;
  pointer-events: none;
}

/* Tooltip (desktop hover). We rely on data-label, with a safe fallback to title. */
.dft-has-tooltip {
  position: relative;
}
.dft-has-tooltip:hover::after {
  content: attr(data-label);
  position: absolute;
  left: 50%;
  top: -8px;
  transform: translate(-50%, -100%);
  background: rgba(15, 23, 42, 0.92);
  color: #fff;
  font-size: 12px;
  padding: 6px 8px;
  border-radius: 8px;
  white-space: nowrap;
  z-index: 99999;
  pointer-events: none;
  box-shadow: 0 8px 20px rgba(0,0,0,0.18);
}
.dft-has-tooltip:hover::before {
  content: "";
  position: absolute;
  left: 50%;
  top: -8px;
  transform: translateX(-50%);
  border: 6px solid transparent;
  border-top-color: rgba(15, 23, 42, 0.92);
  z-index: 99999;
  pointer-events: none;
}

/* Mobile tap-to-label bubble (Option A) */
.dft-tap-tooltip {
  position: fixed;
  background: rgba(15, 23, 42, 0.92);
  color: #fff;
  font-size: 12px;
  padding: 8px 10px;
  border-radius: 10px;
  z-index: 999999;
  pointer-events: none;
  box-shadow: 0 10px 26px rgba(0,0,0,0.22);
}


.dft-small { font-size: 12px; }
.dft-muted { color: #64748b; }

.dft-actions {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
  margin-bottom: 10px;
}

.dft-takeoff-list {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.dft-card {
  border: 1px solid #e5e7eb;
  border-radius: 10px;
  padding: 10px;
  background: #fff;
}

.dft-card-title {
  display: flex;
  justify-content: flex-start;
  gap: 8px;
  font-weight: 600;
  font-size: 13px;
  color: #0f172a;
  margin-bottom: 8px;
}

.dft-card-sub {
  font-size: 12px;
  color: #475569;
  margin-bottom: 8px;
}

.dft-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 12px;
}
.dft-table th, .dft-table td {
  border-top: 1px solid #e5e7eb;
  padding: 6px 0;
  text-align: left;
  vertical-align: top;
}
.dft-table th {
  color: #475569;
  font-weight: 600;
}

.dft-pill {
  display: inline-block;
  padding: 2px 8px;
  border-radius: 999px;
  border: 1px solid #cbd5e1;
  font-size: 11px;
  color: #0f172a;
  background: #f8fafc;
}

.dft-help {
  margin: 0;
  padding-left: 18px;
  color: #334155;
  font-size: 12px;
}


/* Derived line items (e.g. Straight 1500 / Cut length) */
.dft-item-row td:first-child { padding-left: 18px; }
.dft-item-row { background: #fbfbfc; }


/* Group legend (layer style) */
.dft-legend{
  position:absolute;
  right:10px;
  bottom:44px; /* above statusbar */
  z-index:20;
  background:rgba(255,255,255,0.92);
  border:1px solid rgba(0,0,0,0.14);
  border-radius:10px;
  padding:6px 8px;
  font-size:12px;
  line-height:1.2;
  max-width:240px;
  box-shadow:0 2px 10px rgba(0,0,0,0.14);
  backdrop-filter: blur(2px);
}
.dft-legend-row{
  display:flex;
  align-items:center;
  gap:8px;
  padding:4px 6px;
  border-radius:8px;
  cursor:pointer;
  user-select:none;
}
.dft-legend-row:hover{
  background:rgba(2, 132, 199, 0.10);
}
.dft-legend-row.active{
  background:rgba(2, 132, 199, 0.18);
}
.dft-legend-swatch{
  width:12px;
  height:12px;
  border-radius:3px;
  border:1px solid rgba(0,0,0,0.18);
  flex:0 0 auto;
}
.dft-legend-name{
  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap;
}

/* -------------------------------
   Group colour palette (simple swatches)
--------------------------------- */
.dft-color-wrap,
.dft-group-color-wrap{
  position: relative;
  display: inline-flex;
  align-items: center;
}

/* NOTE:
   The Group colour controls in the top toolbar use .dft-group-color-wrap.
   If the wrapper isn't positioned, the palette popover can appear at 0,0 (top-left).
   Keeping the wrapper positioned ensures the popover is anchored beside the button.
*/

/* Hidden native colour input used by the Group colour button */
.dft-group-color-input{ display:none !important; 
  position: absolute;
  opacity: 0;
  width: 1px;
  height: 1px;
  pointer-events: none;
}
.dft-color-btn{
  width:38px;
  height:34px;
  padding:0;
  border:1px solid #cbd5e1;
  border-radius:8px;
  background:#fff;
  cursor:pointer;
  display:flex;
  align-items:center;
  justify-content:center;
}
.dft-color-btn:hover{
  background: rgba(2, 132, 199, 0.08);
}
.dft-color-swatch{
  width:22px;
  height:22px;
  border-radius:6px;
  border:1px solid rgba(0,0,0,0.18);
  display:block;
}
.dft-color-palette{
  position:absolute;
  top:38px;
  left:0;
  z-index:60;
  background:#ffffff;
  border:1px solid #cbd5e1;
  border-radius:10px;
  padding:8px;
  box-shadow:0 10px 25px rgba(0,0,0,0.12);
  display:grid;
  grid-template-columns:repeat(5, 18px);
  gap:8px;
}
.dft-color-palette[hidden]{
  display:none !important;
}
.dft-color-swatch-btn{
  width:18px;
  height:18px;
  border-radius:5px;
  border:1px solid rgba(0,0,0,0.18);
  padding:0;
  cursor:pointer;
}
.dft-color-swatch-btn:hover{
  transform: translateY(-1px);
}
.dft-color-swatch-btn.active{
  outline:2px solid #2563eb;
  outline-offset:2px;
}


/* Collapsible Takeoff List groups */
.dft-collapsible-title{
  cursor: pointer;
  user-select: none;
}
.dft-card-title-left{
  display:flex;
  align-items:center;
  gap:8px;
}
.dft-chevron{
  display:inline-block;
  width:16px;
  text-align:center;
  color:#2563eb;
  font-weight:700;
}
.dft-card-content{
  padding-top:8px;
}


/* Small icon buttons inside tables */
.dft-actions-cell{
  width: 34px;
  text-align: right;
}
.dft-icon-btn{
  width: 28px;
  height: 28px;
  border-radius: 8px;
  border: 1px solid #cbd5e1;
  background: #ffffff;
  color: #2563eb;
  cursor: pointer;
  line-height: 1;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
.dft-icon-btn:hover{
  background: rgba(2, 132, 199, 0.08);
}
.dft-icon-btn:active{
  transform: translateY(1px);
}
.dft-del-btn{
  color: #dc2626;
}
.dft-del-btn:hover{
  background: rgba(220, 38, 38, 0.08);
}


/* -------------------------------
   Riser popup
--------------------------------- */
.dft-riser-popup {
  position: absolute;
  z-index: 50;
  background: #ffffff;
  border: 1px solid #d1d5db;
  border-radius: 10px;
  padding: 10px;
  box-sizing: border-box;
  /* Keep item modals a consistent, compact size (match Special Item feel) */
  width: 300px;
  max-width: calc(100vw - 40px);
  max-height: calc(100vh - 40px);
  min-width: 240px;
  box-shadow: 0 10px 25px rgba(0,0,0,0.12);
}

.dft-riser-popup h4 {
  margin: 0 0 8px 0;
  font-size: 14px;
}

.dft-riser-popup .dft-row {
  margin: 6px 0;
}

.dft-riser-popup input[type="number"],
.dft-riser-popup input[type="text"] {
  width: 100%;
}

.dft-riser-actions {
  display: flex;
  gap: 8px;
  margin-top: 10px;
}

.dft-btn.dft-btn-armed {
  outline: 2px solid rgba(59, 130, 246, 0.45);
  outline-offset: 2px;
}

/* -------------------------------
   Settings popover
--------------------------------- */
.dft-toolbar-right { position: relative; }

.dft-btn.dft-btn-small {
  padding: 4px 8px;
  font-size: 12px;
  line-height: 1;
}

.dft-settings {
  position: absolute;
  top: 44px;
  right: 0;
  width: 320px;
  z-index: 60;
  background: #ffffff;
  border: 1px solid #d1d5db;
  border-radius: 12px;
  padding: 12px;
  box-shadow: 0 14px 35px rgba(0,0,0,0.14);
}

.dft-settings-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 10px;
}

.dft-settings-row { margin: 10px 0; }

.dft-settings-row label {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  width: 100%;
}

.dft-settings-row input[type="range"] { width: 160px; }

.dft-toggle {
  display: flex !important;
  align-items: center;
  justify-content: flex-start !important;
  gap: 10px;
}

.dft-settings-help {
  font-size: 12px;
  color: #6b7280;
  margin-top: 6px;
}


/* ------------------------------
   Collapsible Tools menu (top toolbar)
   ------------------------------ */

.dft-toolbar-left{position:relative;}
.dft-btn-tools{white-space:nowrap;}
.dft-tools-panel{
  position:absolute;
  top:calc(100% + 8px);
  left:0;
  display:flex;
  flex-wrap:wrap;
  align-items:center;
  gap:8px;
  padding:10px;
  background:#fff;
  border:1px solid rgba(0,0,0,.12);
  border-radius:10px;
  box-shadow:0 10px 28px rgba(0,0,0,.16);
  z-index:9999;
  max-width:min(820px, calc(100vw - 24px));
}

.dft-tools-rot{
  display:flex;
  align-items:center;
  gap:6px;
  padding-right:8px;
  margin-right:4px;
  border-right:1px solid rgba(0,0,0,.12);
}

.dft-tools-rot-label{
  min-width:34px;
  text-align:center;
  font-size:12px;
  color:#374151;
}

/* Safety: always respect the HTML hidden attribute even if theme CSS interferes */
.dft-tools-panel[hidden]{
  display:none !important;
}
.dft-tools-panel .dft-sep{
  width:1px;
  height:28px;
  background:rgba(0,0,0,.12);
  margin:0 4px;
}


/* -------------------------------
   Side panel tabs (Groups / Items / Takeoff)
-------------------------------- */
.dft-side-tabs {
  position: sticky;
  top: 0;
  z-index: 5;
  display: flex;
  gap: 6px;
  padding: 10px 10px 8px;
  background: #fff;
  border-bottom: 1px solid #e5e7eb;
}
.dft-side-tab {
  flex: 1;
  border: 1px solid #cbd5e1;
  background: #fff;
  border-radius: 10px;
  padding: 8px 10px;
  font-size: 12px;
  color: #0f172a;
  cursor: pointer;
}
.dft-side-tab.active {
  background: #2563eb;
  border-color: #2563eb;
  color: #fff;
}
.dft-side-tabpanel { display: none; }
.dft-side-tabpanel.active { display: block; }


/* --- Takeoff Modal --- */


.dft-takeoff-summary{
  display:flex;
  flex-direction:column;
  gap:10px;
}

.dft-takeoff-tally{
  font-size: 13px;
  opacity: 0.9;
}

.dft-modal{
  position: fixed;
  inset: 0;
  z-index: 99999;
  display: none;
}
.dft-modal.is-open{ display:block; }
.dft-modal-backdrop{
  position:absolute; inset:0;
  background: rgba(0,0,0,0.55);
}
.dft-modal-dialog{
  position:absolute;
  left:50%;
  top:50%;
  transform: translate(-50%,-50%);
  width: min(980px, calc(100vw - 30px));
  max-height: min(80vh, 900px);
  background:#fff;
  border-radius: 12px;
  overflow:hidden;
  display:flex;
  flex-direction:column;
  box-shadow: 0 20px 60px rgba(0,0,0,0.35);
}
.dft-modal-header{
  display:flex;
  align-items:center;
  justify-content:space-between;
  padding: 12px 14px;
  border-bottom: 1px solid rgba(0,0,0,0.08);
}
.dft-modal-header h3{ margin:0; font-size: 16px; }
.dft-icon-btn{
  border: 1px solid rgba(0,0,0,0.15);
  background: #fff;
  border-radius: 10px;
  width: 34px;
  height: 34px;
  cursor:pointer;
}
.dft-modal-toolbar{
  display:flex;
  align-items:center;
  justify-content:space-between;
  padding: 10px 14px;
  border-bottom: 1px solid rgba(0,0,0,0.08);
  gap: 10px;
}
.dft-modal-tabs{ display:flex; gap:8px; flex-wrap:wrap; }
.dft-modal-tab.is-active{
  background: #1d4ed8;
  color: #fff;
  border-color: #1d4ed8;
}
.dft-modal-body{
  padding: 12px 14px;
  overflow:auto;
}
.dft-modal-footer{
  padding: 10px 14px;
  border-top: 1px solid rgba(0,0,0,0.08);
  background: rgba(0,0,0,0.02);
}

/* -------------------------------
   Combine PDFs (Local)
-------------------------------- */
.dft-combine-row{ display:flex; gap:12px; align-items:center; flex-wrap:wrap; margin-bottom:10px; }
.dft-combine-help{ font-size:12px; opacity:0.85; }
.dft-combine-list{ display:flex; flex-direction:column; gap:8px; margin-top:10px; }
.dft-combine-item{
  display:flex; align-items:center; justify-content:space-between; gap:10px;
  padding:10px 10px; border:1px solid rgba(0,0,0,0.12);
  border-radius:10px; background:rgba(0,0,0,0.03);
}
.dft-combine-item-name{ font-size:13px; line-height:1.2; word-break:break-word; }
.dft-combine-item-actions{ display:flex; gap:6px; align-items:center; }
.dft-combine-mini{ padding:6px 8px; font-size:12px; }

#dft-combine-modal .dft-modal-footer{ display:flex; gap:10px; justify-content:flex-end; align-items:center; }
.dft-modal-table{
  width:100%;
  border-collapse: collapse;
  font-size: 12.5px;
}
.dft-modal-table th,
.dft-modal-table td{
  padding: 8px 8px;
  border-bottom: 1px solid rgba(0,0,0,0.08);
  vertical-align: middle;
}
.dft-modal-table th{ text-align:left; font-weight: 700; }

.dft-modal-table--aligned{
  table-layout: fixed;
}
.dft-modal-table--aligned th:nth-child(3),
.dft-modal-table--aligned td:nth-child(3),
.dft-modal-table--aligned th:nth-child(4),
.dft-modal-table--aligned td:nth-child(4){
  text-align: center;
  white-space: nowrap;
}
.dft-modal-table--aligned th:last-child,
.dft-modal-table--aligned td:last-child{
  text-align: right;
  white-space: nowrap;
}

.dft-qty-controls{
  display:flex;
  align-items:center;
  gap:6px;
}
.dft-qty-btn{
  width: 28px;
  height: 28px;
  border-radius: 8px;
  border: 1px solid rgba(0,0,0,0.18);
  background:#fff;
  cursor:pointer;
}
.dft-trash-btn{
  width: 32px;
  height: 32px;
  border-radius: 999px;
  border: 1px solid rgba(220,38,38,0.65);
  background: rgba(220,38,38,0.95);
  color: #fff;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 16px;
  font-weight: 800;
  line-height: 1;
  cursor:pointer;
  box-shadow: 0 2px 10px rgba(220,38,38,0.25);
}
.dft-trash-btn:hover{
  background: rgba(220,38,38,1);
}
.dft-trash-btn:active{
  transform: translateY(1px);
  box-shadow: 0 1px 6px rgba(220,38,38,0.20);
}
.dft-trash-btn:focus-visible{
  outline: 2px solid rgba(29,78,216,0.65);
  outline-offset: 2px;
}
.dft-trash-btn[disabled]{
  background: rgba(220,38,38,0.20);
  border-color: rgba(220,38,38,0.20);
  box-shadow: none;
}


/* Helper text under inputs */
.dft-helper{color:#444;}


/* -------------------------------
   Sidebar layout refinement (v0.3.23)
   - Inputs label removed
   - Items always visible
   - Bottom collapsible Takeoff section
-------------------------------- */
.dft-panel-inputs {
  padding-top: 8px;
  padding-bottom: 10px;
}

.dft-panel-inputs h3 {
  display: none;
}

.dft-panel-items {
  border-bottom: 1px solid #e5e7eb;
}

.dft-side-takeoff-panel {
  border-top: 1px solid #e5e7eb;
  border-bottom: 0;
  padding-top: 10px;
  background: #fff;
}

.dft-side-takeoff-panel .dft-actions {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
}

.dft-side-takeoff-panel .dft-takeoff-summary {
  margin-top: 10px;
}


/* -------------------------------
   Sidebar item panel compact labels/layout (v0.3.24)
   - Hide redundant "Item" and "Category" labels
   - Place Circular + Rect on top row, Grilles full-width below
-------------------------------- */
.dft-panel-items > h3 {
  display: none;
}

.dft-panel-items .dft-row--stack > label {
  display: none;
}

.dft-panel-items .dft-row--stack {
  gap: 0;
}

.dft-panel-items .dft-row--stack + .dft-row--stack {
  margin-top: 8px;
}

.dft-panel-items {
  padding-top: 10px;
}

/* Category buttons: Circular + Rect small on first row, Grilles large on second row */
.dft-item-tabs .dft-item-tab {
  flex: 1 1 calc(50% - 8px);
}

.dft-item-tabs .dft-item-tab--grilles,
.dft-item-tabs .dft-item-tab[data-cat-id*="grill"] {
  flex-basis: 100%;
}


/* --- Inline size inputs (Rect: Width+Height, Circular: Diameter) --- */
.dft-size-row{
  display:flex;
  gap:10px;
  margin-bottom:10px;
}
.dft-size-cell{
  flex:1 1 0;
  min-width:0;
}
.dft-size-cell input,
.dft-size-cell select{
  width:100%;
  box-sizing:border-box;
}
.dft-size-cell-empty input{
  visibility:hidden;
}

/* v0.3.26: make inline size inputs match rounded UI buttons and avoid native spinner look */
.dft-size-cell input,
.dft-size-cell select{
  min-height: 40px;
  padding: 8px 12px;
  border-radius: 12px;
  border: 1px solid #cbd5e1;
  background: #fff;
  font-size: 12.5px;
}

/* Hide number steppers for the compact sidebar size inputs */
.dft-size-cell input[type=number]{
  -moz-appearance: textfield;
  appearance: textfield;
}
.dft-size-cell input[type=number]::-webkit-outer-spin-button,
.dft-size-cell input[type=number]::-webkit-inner-spin-button{
  -webkit-appearance: none;
  margin: 0;
}

/* Use a cleaner custom chevron for diameter selects (prevents the "second slider" look) */
.dft-size-cell select{
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
  padding-right: 32px;
  background-image:
    linear-gradient(45deg, transparent 50%, #64748b 50%),
    linear-gradient(135deg, #64748b 50%, transparent 50%);
  background-position:
    calc(100% - 16px) calc(50% - 2px),
    calc(100% - 11px) calc(50% - 2px);
  background-size: 5px 5px, 5px 5px;
  background-repeat: no-repeat;
}

/* If a hidden placeholder cell is ever used again, keep it fully invisible */
.dft-size-cell-empty{ display:none; }

/* v0.3.29: add top-bar quick tool icon shortcuts (undo/redo/zoom/save/load) */
.dft-side .dft-size-row .dft-size-cell input,
.dft-side .dft-size-row .dft-size-cell select{
  border-radius: 12px !important;
  min-height: 44px;
  background-clip: padding-box;
}

/* Keep sidebar scroll functionality but hide the inner scrollbar so mobile doesn't show a second vertical slider */
.dft-side{
  -ms-overflow-style: none;
  scrollbar-width: none;
}
.dft-side::-webkit-scrollbar{
  width: 0 !important;
  height: 0 !important;
}



/* v0.3.39: customer-facing tools cleanup (hide advanced/internal buttons from Tools panel only) */
#dft-tools-panel #dft-btn-select,
#dft-tools-panel #dft-recover-draft,
#dft-tools-panel #dft-clear-draft,
#dft-tools-panel #dft-save-account-job,
#dft-tools-panel #dft-save-job,
#dft-tools-panel #dft-load-job {
  display: none !important;
}


/* Secondary size row (e.g. Rectangular Tee branch size) */
.dft-size-row-branch{
  margin-top:2px;
}

/* Off-screen file input (must NOT be display:none/hidden or programmatic click may be blocked) */
.dft-file-input-offscreen{position:fixed;left:-10000px;top:0;width:1px;height:1px;opacity:0;}


/* -------------------------------
   Idle Screensaver (DuctFix Logo)
   Shows only when no PDF is loaded
   ------------------------------- */
.dft-screensaver{
  position:absolute;
  inset:0;
  z-index:3;
  pointer-events:none;
  overflow:hidden;
  perspective: 900px;
}

.dft-screensaver.is-hidden{ display:none; }
.dft-screensaver img{
  position:absolute;
  left:0;
  top:0;
  transform-origin: center center;
  backface-visibility: hidden;
  width:320px;
  height:auto;
  transform-style: preserve-3d;
  will-change: transform;
  filter: drop-shadow(0 14px 22px rgba(0,0,0,0.35));
}


/* Discreet version label (bottom-left) */
.dft-version-badge {
  position: absolute;
  left: 10px;
  bottom: 10px;
  font-size: 11px;
  line-height: 1;
  color: rgba(255, 255, 255, 0.35);
  background: rgba(0, 0, 0, 0.12);
  padding: 4px 6px;
  border-radius: 6px;
  pointer-events: none;
  user-select: none;
  z-index: 40;
}


/* -------------------------------
   Insulation strip (Option A)
-------------------------------- */
.dft-insulation-strip {
  margin-top: 8px;
}

.dft-insulation-inner {
  border: 1px solid rgba(0,0,0,0.12);
  border-radius: 12px;
  padding: 8px;
  background: rgba(255,255,255,0.7);
}

.dft-insulation-title {
  /* Legacy element (older builds). Hidden by design: insulation strip uses compact pills only. */
  display: none !important;
}


.dft-insulation-inner--placeholder{
  /* Reserve space using a non-interactive dummy pill so layout stays stable */
}

.dft-insulation-pills {
  display: flex;
  flex-wrap: nowrap;
  gap: 4px;
  align-items: center;
  width: 100%;
}


.dft-insulation-pill {
  padding: 2px 3px;
  border-radius: 9px;
  font-size: 9px;
  line-height: 1;
  min-width: 0;
  white-space: nowrap;
  flex: 1 1 0;
  text-align: center;
  letter-spacing: -0.2px;
}

.dft-insulation-pill.is-placeholder {
  background: rgba(0,0,0,0.03);
  border: 1px solid rgba(0,0,0,0.12);
  color: transparent;
  outline: none !important;
  cursor: default;
  pointer-events: none;
}


.dft-insulation-pill.is-active {
  outline: 2px solid #2563eb;
}

.dft-insulation-pill.is-locked {
  opacity: 0.7;
  cursor: not-allowed;
}

.dft-insulation-hint { display: none; }



/* -------------------------------------------------
   Popup/Modal UX polish (v0.4.68)
   - Add header with X close (in JS)
   - Ensure popups never render off-screen
   - Keep footer buttons visible
-------------------------------------------------- */

/* All lightweight popups (riser/reducer/angle/etc) */
.dft-riser-popup{
  /* many popups are positioned fixed inline; this ensures sizing stays on-screen */
  max-height: calc(100vh - 24px);
  max-width: calc(100vw - 24px);
  overflow: hidden;
  display: flex;
  flex-direction: column;
  box-sizing: border-box;
}

.dft-riser-popup .dft-popup-header{
  position: sticky;
  top: 0;
  z-index: 2;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding: 10px 10px 8px 10px;
  margin: -10px -10px 8px -10px; /* counter popup padding */
  background: #fff;
  border-bottom: 1px solid rgba(0,0,0,0.08);
  cursor: move; /* indicates draggable header */
}

.dft-riser-popup .dft-popup-header h4{
  margin: 0;
  font-size: 14px;
  line-height: 1.2;
}

.dft-riser-popup .dft-popup-close{
  appearance: none;
  border: 1px solid rgba(0,0,0,0.15);
  background: #fff;
  width: 30px;
  height: 30px;
  border-radius: 8px;
  font-size: 18px;
  line-height: 1;
  padding: 0;
  font-weight: 700;
  /* Theme styles can make button text invisible; force it */
  color: #111827 !important;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
}

.dft-riser-popup .dft-popup-close:hover{
  background: rgba(0,0,0,0.04);
}

.dft-riser-popup .dft-popup-body{
  overflow: auto;
  padding-right: 4px; /* small gutter for scrollbar */
}

.dft-riser-popup .dft-riser-actions{
  position: sticky;
  bottom: 0;
  z-index: 2;
  background: #fff;
  margin-top: auto;
  padding-top: 10px;
  border-top: 1px solid rgba(0,0,0,0.08);
}

/* Make sure buttons never go off-screen even if popup is near bottom */
.dft-riser-popup .dft-riser-actions button{
  max-width: 100%;
}


/* -------------------------------
   Drawings Reference (Toolbar + Modal)
   ------------------------------- */
#dft-drawings-btn {
  width: 170px;
  max-width: 220px;
  justify-content: space-between;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.dft-toolbar-drawings-btn .dft-pill{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  min-width: 26px;
  padding: 2px 8px;
  border-radius: 999px;
  font-size: 12px;
  line-height: 1;
  background: rgba(255,255,255,0.14);
  border: 1px solid rgba(255,255,255,0.18);
}

.dft-drawings-list{
  border: 1px solid rgba(255,255,255,0.12);
  border-radius: 10px;
  padding: 10px;
  max-height: 260px;
  overflow: auto;
}

.dft-drawings-row{
  display:flex;
  align-items:center;
  gap:10px;
  padding: 8px 6px;
  border-bottom: 1px solid rgba(255,255,255,0.08);
}

.dft-drawings-row:last-child{ border-bottom: none; }

.dft-drawings-name{
  flex:1;
  min-width:0;
  overflow:hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-size: 13px;
}

.dft-drawings-remove{
  width: 32px;
  height: 32px;
}


/* -------------------------------
   Quote Options modal (Premium gating)
   ------------------------------- */
.dft-qopt-grid{
  display:grid;
  grid-template-columns: 1fr 1fr;
  gap:12px;
}
@media (max-width: 760px){
  .dft-qopt-grid{ grid-template-columns: 1fr; }
}
.dft-qopt-card{
  border:1px solid #e5e7eb;
  border-radius:12px;
  padding:12px;
  background:#fff;
}
.dft-qopt-card-title{
  font-weight:700;
  font-size:14px;
  margin-bottom:10px;
  color:#111827;
}
.dft-qopt-row{
  display:flex;
  align-items:center;
  gap:10px;
  padding:8px 8px;
  border-radius:10px;
  cursor:pointer;
  user-select:none;
}
.dft-qopt-row:hover{ background:#f8fafc; }
.dft-qopt-row input[type="checkbox"]{
  width:16px; height:16px;
}
.dft-qopt-lock{
  margin-left:auto;
  font-size:12px;
  color:#6b7280;
}
.dft-qopt-row.is-locked{
  opacity:.85;
}
.dft-qopt-hint{
  margin-top:10px;
  font-size:13px;
  padding:10px 12px;
  border-radius:12px;
  background:#f1f5f9;
  border:1px solid #e5e7eb;
  color:#0f172a;
}

.dft-side-takeoff-panel .dft-actions--primary {
  grid-template-columns: 1fr;
}

.dft-side-takeoff-panel .dft-actions--secondary {
  margin-top: 8px;
}

.dft-side-takeoff-panel #dft-print-marked-drawing,
.dft-side-takeoff-panel #dft-load-account-job-footer,
.dft-side-takeoff-panel #dft-new-job {
  background: #f8fafc;
}


/* v0.5.19 toolbar tidy: page nav beside drawings; section colour integrated into the dropdown text */
.dft-toolbar-group select{
  border-color:#cbd5e1 !important;
  box-shadow:none !important;
}
.dft-top-shortcuts,
.dft-top-actions,
.dft-toolbar-links{
  display:inline-flex;
  align-items:center;
  gap:4px;
}
.dft-toolbar-right{
  gap:6px;
}


/* v0.5.20 section dropdown + compact colour picker */
#dft-group-select {
  min-width: 150px;
  font-weight: 600;
}
#dft-group-select option {
  font-weight: 600;
}
#dft-group-select-swatch {
  display: none !important;
}
.dft-toolbar-group {
  display: inline-flex;
  align-items: center;
  gap: 6px;
}
.dft-group-color-wrap {
  position: relative;
  display: inline-flex;
  align-items: center;
}
.dft-group-color-input {
  position: absolute;
  left: -9999px;
  width: 1px;
  height: 1px;
  opacity: 0;
  pointer-events: none;
}
.dft-color-btn-compact {
  min-width: 28px;
  width: 28px;
  height: 28px;
  padding: 0 !important;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
.dft-color-btn-compact .dft-color-swatch {
  width: 14px;
  height: 14px;
  border-radius: 999px;
}
.dft-group-color-wrap .dft-color-palette {
  top: calc(100% + 6px);
  right: 0;
  left: auto;
}


/* v0.5.23 custom section picker sizing */
.dft-group-picker {
  position: relative;
  display: inline-flex;
  align-items: center;
}
.dft-group-picker-trigger {
  min-width: 180px;
  height: 26px;
  min-height: 26px;
  border: 1px solid #cbd5e1;
  border-radius: 8px;
  background: #fff;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 0 10px;
  cursor: pointer;
  color: #1f2937;
  font-size: 12px;
  line-height: 1;
  box-sizing: border-box;
}
.dft-group-picker-trigger-swatch,
.dft-group-picker-option-swatch {
  width: 10px;
  height: 10px;
  border-radius: 2px;
  border: 1px solid rgba(0,0,0,0.18);
  flex: 0 0 auto;
}
.dft-group-picker-trigger-label {
  flex: 1 1 auto;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  text-align: left;
}
.dft-group-picker-trigger-caret {
  flex: 0 0 auto;
  color: #475569;
  font-size: 10px;
}
.dft-group-picker-menu {
  position: absolute;
  top: calc(100% + 6px);
  left: 0;
  min-width: 180px;
  background: #fff;
  border: 1px solid #cbd5e1;
  border-radius: 8px;
  box-shadow: 0 10px 25px rgba(0,0,0,0.12);
  z-index: 80;
  padding: 4px;
}
.dft-group-picker-option {
  display: flex;
  align-items: center;
  gap: 8px;
  min-height: 26px;
  padding: 4px 8px;
  border-radius: 6px;
}
.dft-group-picker-option:hover {
  background: rgba(37,99,235,0.08);
}
.dft-group-picker-option.active {
  background: rgba(37,99,235,0.12);
}
.dft-group-picker-option-label {
  flex: 1 1 auto;
  min-width: 0;
  cursor: pointer;
}
.dft-group-picker-option-color {
  padding: 0;
  background: transparent;
  border: none;
  display: inline-flex;
  align-items: center;
  cursor: pointer;
}
#dft-group-color {
  position: absolute;
  opacity: 0;
  width: 1px;
  height: 1px;
  pointer-events: none;
}
#dft-group-color-palette {
  top: calc(100% + 6px);
  left: 0;
  right: auto;
  z-index: 90;
}

/* v0.5.25 toolbar + Items tab polish */
.dft-toolbar .dft-btn,
.dft-toolbar .dft-small-btn,
.dft-toolbar .dft-icon-btn,
.dft-group-picker-trigger,
.dft-toolbar-mid input[type="text"]{
  margin-top: 0 !important;
  margin-bottom: 0 !important;
}
.dft-group-picker-trigger{
  height: 26px;
  min-height: 26px;
  padding-top: 0;
  padding-bottom: 0;
}
.dft-toolbar-left,
.dft-toolbar-mid,
.dft-toolbar-right{
  min-height: 28px;
}
.dft-takeoff-root.dft-side-collapsed .dft-side-shell{
  pointer-events: none;
}
.dft-takeoff-root.dft-side-collapsed .dft-side-toggle{
  pointer-events: auto;
}


/* v0.5.25 UI tidy: shallower top strip and no white lane behind expanded Items tab */
.dft-toolbar{
  padding-top: 0;
  padding-bottom: 2px;
  min-height: 28px;
}
.dft-toolbar .dft-btn,
.dft-toolbar .dft-small-btn,
.dft-toolbar .dft-icon-btn,
.dft-group-picker-trigger,
.dft-toolbar-mid input[type="text"],
.dft-toolbar-group select{
  height: 26px;
  min-height: 26px;
}
.dft-toolbar-left,
.dft-toolbar-mid,
.dft-toolbar-right{
  min-height: 26px;
}
.dft-side-shell{
  background: transparent !important;
}
.dft-side-toggle{
  z-index: 9;
}