/* ==========================================================================
   Builders24 Business Suite — Shared components
   Buttons, cards, tabs, form basics used across every page in business/.
   Load after biz-shell.css, before any page-specific stylesheet.
   ========================================================================== */

/* ---- Page header ---- */
.b24-page-head{
  display:flex;
  align-items:flex-start;
  justify-content:space-between;
  gap:20px;
  margin-bottom:22px;
  flex-wrap:wrap;
}
.b24-page-head h1{ font-size:26px; font-weight:600; margin-bottom:6px; }
.b24-page-head p{ font-size:14px; font-weight:400; }
.b24-head-actions{ display:flex; gap:12px; }

/* ---- Buttons ---- */
.b24-btn{
  display:flex; align-items:center; gap:8px;
  font-size:13px; font-weight:600;
  padding: 11px 18px;
  border-radius: var(--b24-radius-sm);
  border:1px solid var(--b24-border);
  background: var(--b24-card);
  color: var(--b24-navy);
  white-space:nowrap;
}
.b24-btn.primary{ background: var(--b24-navy); border-color: var(--b24-navy); color: var(--b24-white); }
.b24-btn [data-feather]{ width:15px; height:15px; }

/* ---- Tabs ---- */
.b24-tabs{
  display:flex; gap:6px;
  background: var(--b24-card);
  border:1px solid var(--b24-border);
  border-radius: var(--b24-radius-pill);
  padding:5px;
  width:fit-content;
  margin-bottom:24px;
  flex-wrap:wrap;
}
.b24-tab{
  font-size:13px; font-weight:600;
  padding: 9px 18px;
  border-radius: var(--b24-radius-pill);
  color: var(--b24-navy);
  background:none;
  border:none;
}
.b24-tab.active{ background: var(--b24-gold); color: var(--b24-navy); }

/* ---- Card base ---- */
.b24-card{
  background: var(--b24-card);
  border:1px solid var(--b24-border);
  border-radius: var(--b24-radius-lg);
  padding:22px;
}
.b24-card-head{
  display:flex; align-items:center; justify-content:space-between;
  margin-bottom:16px; gap:12px;
}
.b24-card-title{ font-size:14px; font-weight:600; }
.b24-select{
  font-size:12px; font-weight:500;
  padding:6px 10px;
  border-radius: var(--b24-radius-sm);
  border:1px solid var(--b24-border);
  background: var(--b24-card-alt);
  color: var(--b24-navy);
  display:flex; align-items:center; gap:6px;
}
.b24-link{ font-size:12px; font-weight:600; color: var(--b24-gold); }

/* ---- Form basics ---- */
.b24-form-grid{ display:grid; grid-template-columns:repeat(2, 1fr); gap:16px; }
.b24-field{ display:flex; flex-direction:column; gap:6px; font-size:12.5px; font-weight:500; color:var(--b24-navy); }
.b24-field-wide{ grid-column: 1 / -1; }
.b24-field-hint{ font-size:11.5px; font-weight:400; color:var(--b24-navy); margin-top:6px; }
.b24-input{
  font-family:inherit; font-size:13.5px; font-weight:500;
  padding:10px 12px;
  border-radius: var(--b24-radius-sm);
  border:1px solid var(--b24-border);
  background: var(--b24-card-alt);
  color: var(--b24-navy);
}
.b24-input:focus{ outline:2px solid var(--b24-gold); outline-offset:-1px; }

@media (max-width: 768px){
  .b24-form-grid{ grid-template-columns:1fr; }
}

/* ---- Table ---- */
.b24-table{ width:100%; border-collapse:collapse; }
.b24-table th{
  text-align:left; font-size:11px; font-weight:600; letter-spacing:0.04em;
  padding: 0 10px 12px 0;
  border-bottom:1px solid var(--b24-border);
}
.b24-table td{
  font-size:13px; font-weight:500;
  padding: 13px 10px 13px 0;
  border-bottom:1px solid var(--b24-border-soft);
}
.b24-table tr:last-child td{ border-bottom:none; }
.b24-status-pill{
  display:inline-block;
  font-size:11px; font-weight:600;
  padding:4px 10px;
  border-radius: var(--b24-radius-pill);
}
.b24-status-pill.completed{ background: rgba(34,197,94,0.18); color: var(--b24-green); }
.b24-status-pill.progress{ background: rgba(59,130,246,0.18); color: var(--b24-blue); }
.b24-status-pill.pending{ background: rgba(240,165,0,0.18); color: var(--b24-gold); }
.b24-status-pill.cancelled{ background: rgba(239,68,68,0.18); color: var(--b24-red); }

.b24-loading-row{ font-size:13px; font-weight:500; padding:10px 0; }

.b24-btn-block{
  width:100%; text-align:center;
  margin-top:14px;
  padding:11px;
  border-radius: var(--b24-radius-sm);
  background: var(--b24-card-alt);
  border:1px solid var(--b24-border);
  color: var(--b24-navy);
  font-size:12.5px; font-weight:600;
}

/* ---- Shared modal (real forms, not browser prompt() popups) ---- */
.b24-modal-backdrop{
  display:none;
  position:fixed; inset:0; z-index:100;
  background: rgba(13,27,62,0.4);
  align-items:center; justify-content:center;
  padding:20px;
}
.b24-modal-backdrop.open{ display:flex; }
.b24-modal{
  background: var(--b24-card);
  border-radius: var(--b24-radius-lg);
  max-width:440px; width:100%;
  max-height:90vh; overflow-y:auto;
  box-shadow: 0 20px 60px rgba(13,27,62,0.3);
}
.b24-modal-head{
  display:flex; align-items:center; justify-content:space-between;
  padding:18px 20px; border-bottom:1px solid var(--b24-border);
}
.b24-modal-head h3{ font-size:15px; font-weight:600; }
.b24-modal-close{ background:none; border:none; padding:4px; display:flex; cursor:pointer; }
.b24-modal-close [data-feather]{ width:18px; height:18px; stroke: var(--b24-navy); }
.b24-modal-body{ padding:20px; display:flex; flex-direction:column; gap:14px; }
.b24-modal-error{ font-size:12px; font-weight:600; color:#D64535; display:none; }
.b24-modal-error.show{ display:block; }
.b24-modal-footer{ display:flex; justify-content:flex-end; gap:10px; padding:16px 20px; border-top:1px solid var(--b24-border); }

/* ---- Period dropdown (real, interactive — replaces the static "This Month" pill) ---- */
.b24-period-select{ position:relative; }
.b24-period-trigger{ cursor:pointer; }
.b24-period-menu{
  display:none;
  position:absolute;
  top:calc(100% + 6px);
  right:0;
  min-width:160px;
  max-width:calc(100vw - 32px);
  background: var(--b24-card);
  border:1px solid var(--b24-border);
  border-radius: var(--b24-radius-md);
  box-shadow: 0 12px 32px rgba(13,27,62,0.14);
  padding:6px;
  z-index:15;
}
.b24-period-menu.open{ display:block; }
.b24-period-menu button{
  display:block; width:100%; text-align:left;
  padding:9px 10px;
  border-radius: var(--b24-radius-sm);
  background:none; border:none;
  font-size:12.5px; font-weight:500; color: var(--b24-navy);
}
.b24-period-menu button:hover{ background: var(--b24-card-alt); }
.b24-period-menu button.active{ background: var(--b24-gold); color: var(--b24-navy); font-weight:600; }

/* ---- Collapsible card ---- */
.b24-card-collapse-toggle{
  background:none; border:none; padding:4px; cursor:pointer;
  display:flex; align-items:center; justify-content:center;
  flex-shrink:0;
}
.b24-card-collapse-toggle [data-feather]{ width:16px; height:16px; stroke: var(--b24-navy); transition: transform .2s ease; }
.b24-card.collapsed .b24-card-collapse-toggle [data-feather]{ transform: rotate(180deg); }
.b24-card.collapsed > *:not(.b24-card-head){ display:none; }
.b24-card-head-actions{ display:flex; align-items:center; gap:8px; flex-shrink:0; }

@media (max-width: 480px){
  .b24-period-menu{ right:auto; left:0; }
}

/* ---- Stat cards (universal — grid column count set by .b24-stat-grid-N modifier) ---- */
.b24-stat-grid{ display:grid; gap:18px; margin-bottom:20px; }
.b24-stat-grid-4{ grid-template-columns: repeat(4, 1fr); }
.b24-stat-grid-3{ grid-template-columns: repeat(3, 1fr); }
.b24-stat-card{ display:flex; flex-direction:column; gap:14px; }
.b24-stat-top{ display:flex; align-items:center; gap:10px; }
.b24-stat-icon{
  width:38px; height:38px;
  border-radius:10px;
  display:flex; align-items:center; justify-content:center;
  color:#fff;
}
.b24-stat-icon [data-feather]{ width:18px; height:18px; stroke:#fff; }
.b24-stat-label{ font-size:13px; font-weight:500; }
.b24-stat-value{ font-size:26px; font-weight:600; letter-spacing:-0.01em; }
.b24-stat-delta{ font-size:12px; font-weight:600; display:flex; align-items:center; gap:4px; }
.b24-stat-delta.up{ color: var(--b24-green); }
.b24-stat-delta span.muted{ color: var(--b24-navy); font-weight:400; }
.b24-sparkline{ height:36px; width:100%; }

/* ---- Overview chart card (universal — Sales Overview / Orders Overview / etc.) ---- */
.b24-big-figure{ font-size:26px; font-weight:600; margin-bottom:4px; }
.b24-chart-wrap{ position:relative; height:220px; margin: 10px 0 14px; }
.b24-substat-row{ display:flex; justify-content:space-between; border-top:1px solid var(--b24-border-soft); padding-top:14px; }
.b24-substat{ display:flex; flex-direction:column; gap:4px; }
.b24-substat-label{ font-size:11px; font-weight:500; }
.b24-substat-value{ font-size:15px; font-weight:600; }
.b24-substat-delta{ font-size:11px; font-weight:600; color: var(--b24-green); }

/* ---- Donut cards (universal — Revenue/Orders by Location, etc.) ---- */
.b24-donut-wrap{ position:relative; width:180px; height:180px; margin: 4px auto 18px; }
.b24-donut-center{
  position:absolute; inset:0;
  display:flex; flex-direction:column; align-items:center; justify-content:center;
  text-align:center;
}
.b24-donut-center strong{ font-size:16px; font-weight:600; }
.b24-donut-center span{ font-size:11px; font-weight:400; margin-top:2px; }
.b24-legend{ display:flex; flex-direction:column; gap:10px; }
.b24-legend-row{ display:flex; align-items:center; font-size:12px; font-weight:500; gap:8px; }
.b24-legend-dot{ width:9px; height:9px; border-radius:50%; flex-shrink:0; }
.b24-legend-name{ flex:1; }
.b24-legend-pct{ font-weight:600; width:34px; text-align:right; }
.b24-legend-amt{ width:80px; text-align:right; }

/* ---- Profit tracker (universal) ---- */
.b24-profit-total-label{ font-size:12px; font-weight:500; }
.b24-profit-total-value{ font-size:22px; font-weight:600; margin: 4px 0 4px; }
.b24-profit-delta{ font-size:12px; font-weight:600; color: var(--b24-green); margin-bottom:14px; display:block; }
.b24-breakdown-row{
  display:flex; justify-content:space-between;
  font-size:12px; font-weight:500;
  padding:7px 0;
  border-top:1px solid var(--b24-border-soft);
}
.b24-breakdown-row.total{ font-weight:600; font-size:13px; }
.b24-breakdown-row .neg{ color: var(--b24-red); }
.b24-breakdown-row .pos{ color: var(--b24-green); }
.b24-margin-row{ display:flex; justify-content:space-between; align-items:center; margin-top:10px; padding-top:10px; border-top:1px solid var(--b24-border-soft); font-size:12px; font-weight:500; }
.b24-margin-row strong{ font-size:14px; font-weight:600; }

@media (max-width: 1180px){
  .b24-stat-grid-4{ grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 768px){
  .b24-stat-grid{
    display:flex;
    grid-template-columns:none;
    gap:12px;
    overflow-x:auto;
    padding-bottom:4px;
    margin: 0 -16px 20px;
    padding-left:16px; padding-right:16px;
  }
  .b24-stat-card{ flex:0 0 152px !important; width:152px !important; }
  .b24-stat-value{ font-size:20px; }
  .b24-card{ padding:16px; }
}

/* ---- Customer search-as-you-type (Quote/Invoice editors) ---- */
.b24-contact-search-wrap{ position:relative; }
.b24-contact-dropdown{
  display:none;
  position:absolute; top:calc(100% + 4px); left:0; right:0;
  background: var(--b24-card); border:1px solid var(--b24-border);
  border-radius: var(--b24-radius-md);
  box-shadow: 0 12px 32px rgba(13,27,62,0.14);
  max-height:240px; overflow-y:auto; z-index:30;
}
.b24-contact-dropdown.show{ display:block; }
.b24-contact-opt{ padding:10px 14px; font-size:13px; cursor:pointer; border-bottom:1px solid var(--b24-border-soft); }
.b24-contact-opt:last-child{ border-bottom:none; }
.b24-contact-opt:hover{ background: var(--b24-card-alt); }
.b24-contact-opt-name{ font-weight:600; }
.b24-contact-opt-meta{ font-size:11px; font-weight:400; margin-top:1px; }
.b24-contact-new-opt{ padding:10px 14px; font-size:12.5px; color: var(--b24-gold); font-weight:700; cursor:pointer; }
.b24-contact-new-opt:hover{ background: var(--b24-card-alt); }

/* ---- Status banner (Quote/Invoice editors) ---- */
.b24-status-banner{
  display:flex; align-items:center; gap:10px;
  padding:12px 16px; border-radius: var(--b24-radius-md);
  font-size:12.5px; font-weight:600; margin-bottom:18px;
}
.b24-status-banner.accepted{ background:rgba(34,197,94,0.12); color:#1D8A32; }
.b24-status-banner.rejected{ background:rgba(214,69,53,0.1); color:#D64535; }
.b24-status-banner.converted{ background:rgba(139,92,246,0.12); color:#7C3AED; }
.b24-status-banner.expired{ background: var(--b24-card-alt); color: var(--b24-navy); }
.b24-status-banner.void{ background: var(--b24-card-alt); color: var(--b24-navy); }

/* ---- Filter chips (Quotes/Invoices lists) ---- */
.b24-filter-chips{ display:flex; gap:8px; flex-wrap:wrap; }
.b24-filter-chip{
  padding:8px 14px; border-radius: var(--b24-radius-sm);
  border:1px solid var(--b24-border); background: var(--b24-card);
  font-size:12.5px; font-weight:600; color: var(--b24-navy);
}
.b24-filter-chip.active{ background: var(--b24-navy); border-color: var(--b24-navy); color:#fff; }