/**
 * Portal SaaS Refactor
 * Clean, modern UI (SmartMoving/Stripe/Linear style)
 * Single primary: blue (var(--bwp-primary))
 * Load after portal.css to cascade overrides.
 * Layout tokens defined in design-system.css
 */

/* ============================================
   BODY BACKGROUND
   ============================================ */

.bwp-portal-body {
  background: var(--bwp-bg);
}

/* ============================================
   SIDEBAR - SmartMoving style (icon-only, 64px)
   ============================================ */

.bwp-sidebar.sidebar.bwp-sidebar-smartmoving {
  width: var(--bwp-sidebar-width) !important;
  min-width: var(--bwp-sidebar-width) !important;
  background: var(--bwp-primary) !important;
  position: fixed !important;
  left: 0;
  top: 0;
  height: 100vh;
  z-index: 1000;
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: var(--bwp-space-3) 0;
  overflow: hidden;
}

.bwp-sidebar-smartmoving .bwp-sidebar-header {
  padding: var(--bwp-space-3) 0 !important;
  min-height: var(--bwp-space-12) !important;
  border-bottom: 1px solid hsla(0 0% 100% / 0.15);
  flex-shrink: 0;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
}

.bwp-sidebar-smartmoving .bwp-sidebar-header .bwp-logo,
.bwp-sidebar-smartmoving .bwp-sidebar-header .bwp-logo-img {
  width: 2.25rem !important;
  height: 2.25rem !important;
  flex-shrink: 0;
  border-radius: var(--bwp-radius-md);
  background: hsla(0 0% 100% / 0.2) !important;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: var(--bwp-text-sm);
  font-weight: var(--bwp-font-bold);
  color: var(--bwp-text-on-primary);
}

.bwp-sidebar-smartmoving .bwp-sidebar-header .bwp-logo-img {
  background: transparent !important;
  object-fit: contain;
}

.bwp-sidebar-smartmoving .bwp-sidebar-nav {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: var(--bwp-space-2) 0;
  overflow-y: auto;
  overflow-x: hidden;
}

.bwp-sidebar-spacer {
  width: var(--bwp-space-8);
  height: 1px;
  background: hsla(0 0% 100% / 0.2);
  margin: var(--bwp-space-2) 0;
  flex-shrink: 0;
}

.bwp-sidebar-smartmoving .bwp-nav-item.sidebar-item {
  width: 40px;
  height: 40px;
  margin: 6px 0;
  padding: 0 !important;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 10px;
  cursor: pointer;
  transition: all 0.2s ease;
  color: rgba(255, 255, 255, 0.9);
  text-decoration: none;
  position: relative;
  flex-shrink: 0;
}

.bwp-sidebar-smartmoving .bwp-nav-item.sidebar-item svg {
  width: 1.25rem;
  height: 1.25rem;
  flex-shrink: 0;
  color: inherit;
  stroke: currentColor;
}

.bwp-sidebar-smartmoving .bwp-nav-item.sidebar-item:hover {
  background: hsla(0 0% 100% / 0.15);
  color: var(--bwp-text-on-primary);
}

.bwp-sidebar-smartmoving .bwp-nav-item.sidebar-item.active {
  background: var(--bwp-surface-elevated);
  color: var(--bwp-primary);
}

/* Tooltip handled by JS (appended to body to bypass overflow:hidden) */

.bwp-sidebar-smartmoving .bwp-sidebar-footer {
  padding: var(--bwp-space-2) 0 !important;
  border-top: 1px solid hsla(0 0% 100% / 0.15);
  margin-top: auto !important;
  flex-shrink: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
}

.bwp-sidebar-smartmoving .bwp-sidebar-footer .bwp-nav-item {
  width: 40px;
  height: 40px;
  margin: 6px 0;
  justify-content: center !important;
}

/* Legacy sidebar (non-SmartMoving) */
.bwp-sidebar.sidebar:not(.bwp-sidebar-smartmoving) {
  width: 220px !important;
  min-width: 220px !important;
  background: var(--bwp-neutral-50) !important;
  position: fixed !important;
  left: 0;
  top: 0;
  height: 100vh;
  z-index: 1000;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  border-right: 1px solid var(--bwp-border);
  padding: 8px 10px;
}

.bwp-sidebar.sidebar:not(.bwp-sidebar-smartmoving).collapsed {
  width: 64px !important;
  min-width: 64px !important;
}

/* ============================================
   CONTENT AREA POSITIONING
   SmartMoving sidebar = always 64px offset
   ============================================ */

.bwp-portal-layout.sidebar-smartmoving .bwp-portal-main,
.bwp-portal-layout.sidebar-smartmoving > .bwp-portal-content {
  margin-left: var(--bwp-sidebar-width, 64px) !important;
}

/* Legacy layout (expandable sidebar) */
.bwp-portal-layout:not(.sidebar-smartmoving) > .bwp-portal-main,
.bwp-portal-layout:not(.sidebar-smartmoving) > .bwp-portal-content {
  margin-left: 220px !important;
  transition: margin-left 0.3s ease;
}

.bwp-portal-layout.sidebar-collapsed .bwp-portal-main,
.bwp-portal-layout.sidebar-collapsed > .bwp-portal-content {
  margin-left: 64px !important;
}

/* Header offset */
.bwp-portal-layout.sidebar-smartmoving .bwp-portal-header {
  left: var(--bwp-sidebar-width, 64px) !important;
  width: calc(100% - var(--bwp-sidebar-width, 64px)) !important;
}

.bwp-portal-layout:not(.sidebar-smartmoving) .bwp-portal-header {
  left: 220px !important;
  width: calc(100% - 220px) !important;
  transition: left 0.3s ease, width 0.3s ease;
}

.bwp-portal-layout.sidebar-collapsed .bwp-portal-header {
  left: 64px !important;
  width: calc(100% - 64px) !important;
}

/* ============================================
   CONTENT & CONTAINER (override any earlier rules)
   ============================================ */

.bwp-portal-main-content,
.bwp-portal-content {
  background: var(--bwp-bg, var(--bwp-bg)) !important;
}

.bwp-portal-main-content {
  max-width: var(--bwp-container-max, 1400px) !important;
  width: 100% !important;
  margin-left: auto !important;
  margin-right: auto !important;
  padding: 0 !important;
  box-sizing: border-box;
}

/* ============================================
   MOBILE
   ============================================ */

@media (max-width: 768px) {
  .bwp-sidebar.sidebar,
  .bwp-sidebar.sidebar.bwp-sidebar-smartmoving {
    width: 64px !important;
    transform: translateX(-100%);
  }

  .bwp-sidebar.sidebar.mobile-open,
  .bwp-sidebar-smartmoving.mobile-open {
    transform: translateX(0);
  }

  .bwp-portal-layout .bwp-portal-main,
  .bwp-portal-layout > .bwp-portal-content,
  .bwp-portal-layout.sidebar-smartmoving .bwp-portal-main,
  .bwp-portal-layout.sidebar-smartmoving > .bwp-portal-content {
    margin-left: 0 !important;
  }

  .bwp-portal-layout.sidebar-collapsed .bwp-portal-main,
  .bwp-portal-layout.sidebar-collapsed > .bwp-portal-content {
    margin-left: 0 !important;
  }

  .bwp-portal-header,
  .bwp-portal-layout.sidebar-smartmoving .bwp-portal-header {
    left: 0 !important;
    width: 100% !important;
  }
}

/* ============================================
   BUTTON SYSTEM
   ============================================ */

.bwp-btn-primary,
button.bwp-btn-primary,
.bwp-modal-btn-primary,
.bwp-opportunity-btn-primary,
.bwp-est-calc-btn-primary,
[class*="bwp-btn-primary"] {
  padding: 10px 20px;
  background: var(--bwp-primary, var(--bwp-primary)) !important;
  color: var(--bwp-text-on-primary) !important;
  border: none !important;
  border-radius: var(--bwp-radius, 10px);
  font-size: 14px;
  font-weight: 600;
  font-family: var(--bwp-font-sans);
  cursor: pointer;
  transition: background 0.2s ease, box-shadow 0.2s ease;
}

.bwp-btn-primary:hover,
button.bwp-btn-primary:hover,
.bwp-modal-btn-primary:hover,
[class*="bwp-btn-primary"]:hover {
  background: var(--bwp-primary-hover, var(--bwp-primary-hover)) !important;
  box-shadow: 0 2px 8px hsla(var(--bwp-h-primary) 83% 53% / 0.25) !important;
}

.bwp-btn-secondary,
.bwp-modal-btn-secondary,
.bwp-opportunity-btn-back,
.bwp-est-calc-btn-secondary {
  padding: 10px 20px;
  background: transparent !important;
  color: var(--bwp-text) !important;
  border: 1px solid var(--bwp-border) !important;
  border-radius: var(--bwp-radius, 10px);
  font-size: 14px;
  font-weight: 500;
  cursor: pointer;
  transition: background 0.2s ease, border-color 0.2s ease;
}

.bwp-btn-secondary:hover,
.bwp-modal-btn-secondary:hover {
  background: var(--bwp-bg-muted) !important;
  border-color: var(--bwp-text-muted) !important;
}

.bwp-btn-ghost {
  padding: 8px 16px;
  background: transparent !important;
  color: var(--bwp-text-secondary) !important;
  border: none !important;
  font-size: 14px;
  font-weight: 500;
  cursor: pointer;
}

.bwp-btn-ghost:hover {
  color: var(--bwp-text) !important;
  background: var(--bwp-bg-muted) !important;
}

/* ============================================
   STAT CARDS
   ============================================ */

.bwp-stat-card,
.bwp-admin-card.bwp-stat-card,
.bwp-top-stats .bwp-stat-card {
  background: var(--bwp-card-bg, var(--bwp-surface-elevated)) !important;
  border: var(--bwp-card-border, 1px solid var(--bwp-border)) !important;
  border-radius: var(--bwp-card-radius, 12px);
  padding: var(--bwp-card-padding, 20px) !important;
  box-shadow: var(--bwp-card-shadow, var(--bwp-shadow-sm)) !important;
  transition: border-color 0.2s ease, box-shadow 0.2s ease;
}

.bwp-stat-card:hover,
.bwp-admin-card:hover {
  box-shadow: var(--bwp-shadow-md) !important;
}

.bwp-stat-card [data-value],
.bwp-stat-card .bwp-stat-value,
.bwp-stat-card .bwp-kpi-value {
  font-size: 24px !important;
  font-weight: 700 !important;
  color: var(--bwp-text) !important;
}

.bwp-stat-card .bwp-stat-label,
.bwp-stat-card .bwp-kpi-label {
  font-size: 12px !important;
  color: var(--bwp-text-secondary) !important;
  margin-top: 4px;
}

/* ============================================
   TABLES
   ============================================ */

.bwp-table,
.bwp-accounting-table,
.bwp-activity-table {
  width: 100%;
  border-collapse: collapse;
  background: var(--bwp-surface-elevated);
  border-radius: var(--bwp-card-radius, 12px);
  overflow: hidden;
  border: 1px solid var(--bwp-border);
}

.bwp-accounting-table-wrap,
.bwp-accounting-table-card {
  background: var(--bwp-surface-elevated) !important;
  border: 1px solid var(--bwp-border) !important;
  border-radius: var(--bwp-card-radius, 12px);
  overflow: hidden;
  box-shadow: var(--bwp-card-shadow);
}

.bwp-table thead,
.bwp-accounting-table thead {
  background: var(--bwp-bg-muted) !important;
  position: sticky;
  top: 0;
  z-index: 1;
}

.bwp-table th,
.bwp-accounting-table th {
  padding: 12px 16px !important;
  text-align: left;
  font-size: 12px !important;
  font-weight: 600 !important;
  color: var(--bwp-text-secondary) !important;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  border-bottom: 1px solid var(--bwp-border) !important;
}

.bwp-table td,
.bwp-accounting-table td {
  padding: 14px 16px !important;
  font-size: 14px;
  color: var(--bwp-text) !important;
  border-bottom: 1px solid var(--bwp-border) !important;
}

.bwp-table tbody tr:hover,
.bwp-accounting-table tbody tr:hover {
  background: var(--bwp-bg-muted) !important;
}

/* Status badges */
.bwp-accounting-badge,
.bwp-status-badge {
  padding: 4px 10px !important;
  border-radius: 8px;
  font-size: 12px !important;
  font-weight: 600 !important;
  border: none !important;
}

/* ============================================
   MODAL DESIGN
   ============================================ */

.bwp-modal-content,
.bwp-modal-container,
.bwp-opportunity-modal,
.bwp-create-stub-modal .bwp-modal-content {
  background: var(--bwp-surface-elevated) !important;
  border-radius: 14px !important;
  border: 1px solid var(--bwp-border) !important;
  box-shadow: 0 20px 60px rgba(0, 0, 0, 0.15) !important;
}

.bwp-modal-header,
.bwp-modal-content .bwp-modal-header,
.bwp-modal-container .bwp-modal-header {
  padding: 16px 20px !important;
  border-bottom: 1px solid var(--bwp-border) !important;
  background: var(--bwp-surface-elevated) !important;
}

.bwp-modal-header h2,
.bwp-modal-header h3,
.bwp-modal-title {
  color: var(--bwp-text) !important;
  font-weight: 600 !important;
}

.bwp-modal-body {
  background: var(--bwp-surface-elevated) !important;
  color: var(--bwp-text) !important;
  padding: 16px 20px !important;
}

.bwp-modal-footer {
  border-top: 1px solid var(--bwp-border) !important;
  padding: 12px 20px !important;
  background: var(--bwp-surface-elevated) !important;
  color: var(--bwp-text-muted) !important;
}

.bwp-modal-btn-primary {
  background: var(--bwp-primary) !important;
  color: var(--bwp-text-on-primary) !important;
  border: none !important;
  box-shadow: 0 1px 3px rgba(37, 99, 235, 0.25) !important;
}

.bwp-modal-btn-primary:hover {
  background: var(--bwp-primary-hover) !important;
}

.bwp-modal-close,
.bwp-modal-export {
  background: var(--bwp-neutral-100) !important;
  color: var(--bwp-text-muted) !important;
}

.bwp-modal-close:hover,
.bwp-modal-export:hover {
  background: var(--bwp-border) !important;
  color: var(--bwp-text) !important;
}

/* ============================================
   OPPORTUNITY MODAL
   ============================================ */

.bwp-opportunity-sidebar {
  background: var(--bwp-primary) !important;
  border-radius: var(--bwp-radius-lg, 16px) 0 0 var(--bwp-radius-lg, 16px);
  padding: 24px;
}

.bwp-opportunity-sidebar-title {
  color: var(--bwp-text-on-primary) !important;
  font-size: 18px;
  font-weight: 600;
  margin: 0 0 24px 0;
}

.bwp-opportunity-step {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px 0;
  color: rgba(255, 255, 255, 0.7);
  font-size: 14px;
}

.bwp-opportunity-step.bwp-step-active {
  color: var(--bwp-text-on-primary) !important;
  font-weight: 600;
}

.bwp-opportunity-step-num {
  width: 28px;
  height: 28px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.2);
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 600;
  font-size: 13px;
}

.bwp-opportunity-step.bwp-step-active .bwp-opportunity-step-num,
.bwp-opportunity-step.bwp-step-done .bwp-opportunity-step-num {
  background: rgba(255, 255, 255, 0.9);
  color: var(--bwp-primary);
}

.bwp-opportunity-body {
  padding: 24px;
}

.bwp-opportunity-field label {
  font-size: 12px;
  font-weight: 600;
  color: var(--bwp-text-secondary);
  margin-bottom: 6px;
  display: block;
}

.bwp-opportunity-field input,
.bwp-opportunity-field select,
.bwp-opportunity-field textarea {
  width: 100%;
  padding: 10px 14px;
  border: 1px solid var(--bwp-border);
  border-radius: 10px;
  font-size: 14px;
  background: var(--bwp-surface-elevated);
}

.bwp-opportunity-field input:focus,
.bwp-opportunity-field select:focus {
  border-color: var(--bwp-primary);
  box-shadow: 0 0 0 3px var(--bwp-primary-glow);
  outline: none;
}

.bwp-opportunity-fields-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
}

/* Form inputs */
.bwp-modal-form-group input,
.bwp-modal-form-group select,
.bwp-modal-form-group textarea,
.bwp-form-input {
  background: var(--bwp-surface-elevated) !important;
  border: 1px solid var(--bwp-border) !important;
  border-radius: 10px !important;
  padding: 10px 14px !important;
  font-size: 14px !important;
  color: var(--bwp-text) !important;
}

.bwp-modal-form-group input:focus,
.bwp-form-input:focus {
  border-color: var(--bwp-primary) !important;
  box-shadow: 0 0 0 3px var(--bwp-primary-glow) !important;
  outline: none !important;
}

.bwp-modal-form-group label {
  display: block;
  font-size: 12px !important;
  font-weight: 600 !important;
  color: var(--bwp-text-secondary) !important;
  margin-bottom: 8px !important;
}

/* ============================================
   KANBAN / DISPATCH
   ============================================ */

.bwp-dispatch-board,
.bwp-kanban-board {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--bwp-grid-gap, 20px);
}

.bwp-dispatch-slot,
.bwp-kanban-column {
  background: var(--bwp-surface-elevated) !important;
  border: 1px solid var(--bwp-border) !important;
  border-radius: var(--bwp-card-radius, 12px);
  padding: 16px;
  min-height: 400px;
}

.bwp-dispatch-slot-title,
.bwp-kanban-column-title {
  font-size: 14px !important;
  font-weight: 600 !important;
  color: var(--bwp-text) !important;
  margin-bottom: 12px;
}

.bwp-dispatch-job-card,
.bwp-task-card,
.bwp-kanban-card {
  background: var(--bwp-surface-elevated) !important;
  border: 1px solid var(--bwp-border) !important;
  border-radius: var(--bwp-radius, 10px);
  padding: 16px !important;
  margin-bottom: 8px;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.04);
}

.bwp-dispatch-job-card:hover,
.bwp-task-card:hover {
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06);
}

/* ============================================
   ESTIMATE / CALCULATOR
   ============================================ */

.bwp-est-calc-card,
.bwp-moving-calculator,
.bwp-estimate-calculator {
  background: var(--bwp-surface-elevated) !important;
  border: 1px solid var(--bwp-border) !important;
  border-radius: var(--bwp-card-radius, 12px);
  padding: 24px !important;
}

.bwp-est-calc-total,
.bwp-calculator-total {
  font-size: 28px !important;
  font-weight: 700 !important;
  color: var(--bwp-primary) !important;
}

/* ============================================
   PAGE LAYOUT
   ============================================ */

.bwp-page-header h1 {
  font-size: 24px !important;
  font-weight: 600 !important;
  color: var(--bwp-text) !important;
  margin: 0 0 4px 0 !important;
}

.bwp-page-subtitle {
  font-size: 14px !important;
  color: var(--bwp-text-secondary) !important;
  margin: 0 !important;
}

/* ============================================
   ACCENT OVERRIDE - Replace #B4F000 with blue
   Single consolidated section
   ============================================ */

.bwp-create-option {
  display: flex !important;
  flex-direction: row !important;
  align-items: center !important;
  background: transparent !important;
}
.bwp-create-option:hover {
  background: rgba(37, 99, 235, 0.08) !important;
}
.bwp-create-option-icon { flex-shrink: 0 !important; }
.bwp-create-option .bwp-create-option-icon { background: rgba(37, 99, 235, 0.1) !important; }
.bwp-create-option[data-action="lead"] .bwp-create-option-icon { background: rgba(34, 197, 94, 0.12) !important; }
.bwp-create-option[data-action="task"] .bwp-create-option-icon { background: rgba(245, 158, 11, 0.12) !important; }
.bwp-create-option[data-action="followup"] .bwp-create-option-icon { background: rgba(139, 92, 246, 0.12) !important; }

/* Quick Action cards */
.bwp-quick-action-card,
a.bwp-quick-action-card {
  display: flex !important;
  flex-direction: row !important;
  align-items: center !important;
  background: var(--bwp-surface-elevated) !important;
  border: 1px solid var(--bwp-border) !important;
}
.bwp-quick-action-card:first-child {
  background: var(--bwp-primary-muted) !important;
  border-color: hsl(var(--bwp-h-primary) 85% 80%) !important;
}
.bwp-quick-action-card:hover > div:first-child,
.bwp-quick-action-card:hover .bwp-action-icon {
  background: var(--bwp-primary-glow) !important;
}

/* Inline yellow → blue (all #B4F000 overrides) */
body.bwp-portal-body [style*="background: #B4F000"],
body.bwp-portal-body [style*="background:#B4F000"],
body.bwp-portal-body [style*="background: #B4F000 !important"],
body.bwp-portal-body [style*="background:#B4F000 !important"] {
  background: var(--bwp-primary) !important;
  color: var(--bwp-text-on-primary) !important;
}
body.bwp-portal-body button[style*="B4F000"],
body.bwp-portal-body .bwp-btn-primary[style*="B4F000"],
body.bwp-portal-body a[style*="B4F000"] {
  background: var(--bwp-primary) !important;
  color: var(--bwp-text-on-primary) !important;
  border-color: var(--bwp-primary) !important;
}
body.bwp-portal-body [style*="border-color: #B4F000"],
body.bwp-portal-body [style*="border-color:#B4F000"],
body.bwp-portal-body [style*="border-left: 4px solid #B4F000"],
body.bwp-portal-body [style*="border-left:4px solid #B4F000"],
body.bwp-portal-body [style*="border-left: 3px solid #B4F000"],
body.bwp-portal-body [style*="border: 1px solid #B4F000"],
body.bwp-portal-body [style*="border: 2px dashed #B4F000"] {
  border-color: var(--bwp-primary) !important;
}
body.bwp-portal-body [style*="color: #B4F000"],
body.bwp-portal-body [style*="color:#B4F000"] {
  color: var(--bwp-primary) !important;
}

/* Labour dashboard KPI first card */
.bwp-labour-dashboard .bwp-kpi-card:first-child {
  background: var(--bwp-primary-muted) !important;
  border: 1px solid hsl(var(--bwp-h-primary) 85% 80%) !important;
}
.bwp-labour-dashboard .bwp-kpi-card:first-child .bwp-kpi-card-title,
.bwp-labour-dashboard .bwp-kpi-card:first-child .bwp-kpi-value,
.bwp-labour-dashboard .bwp-kpi-card:first-child .bwp-kpi-card-link {
  color: hsl(var(--bwp-h-primary) 55% 32%) !important;
}

/* Login page */
.bwp-login-left::before,
.bwp-login-left::after {
  background: var(--bwp-primary) !important;
  opacity: 0.12 !important;
}
.bwp-login-brand .bwp-logo {
  background: var(--bwp-primary) !important;
  color: var(--bwp-text-on-primary) !important;
}