:root{
  --skeleton-bg: #e9ecef;
  --skeleton-highlight: rgba(255,255,255,0.6);
  --skeleton-width: 150px;
  --kanban-column-width: 260px;
  /* centralize status colors sourced from client-workflow-badges.css */
  --status-lead: #4a90e2; /* .status-workflow-lead */
  --status-booked: #F5B7B1; /* fallback / booked */
  --status-quote: #f5a623; /* .status-workflow-quote */
  --substatus-sent-to-customer: #AED6F1; /* .substatus-workflow-sent-to-customer */
}

/* reusable skeleton wrapper */
.skeleton{
  position: relative;
  overflow: hidden;
  background: var(--skeleton-bg);
  border-radius: 6px;
}

.skeleton::after{
  content: "";
  position: absolute;
  top: 0;
  left: -150%;
  height: 100%;
  width: var(--skeleton-width);
  background: linear-gradient(90deg, rgba(255,255,255,0) 0%, var(--skeleton-highlight) 50%, rgba(255,255,255,0) 100%);
  animation: skeleton-loading 1.2s linear infinite;
}

@keyframes skeleton-loading{
  0% { transform: translateX(-150%); }
  100% { transform: translateX(150%); }
}

/* shape helpers */
.skeleton.header{ height:40px; margin-bottom:8px; }
.skeleton.line{ height:12px; margin-bottom:8px; width:100%; }
.skeleton.small{ width:60%; }
.skeleton.medium{ width:80%; }
.skeleton.time{ width:24%; display:inline-block; margin-right:8px; }

@media (prefers-reduced-motion: reduce){
  .skeleton::after{ animation:none; opacity:0.4; }
}

/* Dashboard card component */
.dashboard-card{
  background:#ffffff;
  border-radius:0.75rem;
  box-shadow:0 1px 2px rgba(16,24,40,0.05), 0 1px 3px rgba(16,24,40,0.06);
  padding:0;
  display:flex;
  flex-direction:column;
  height:100%;
}
.dashboard-card-header{
  display:flex; align-items:center; justify-content:space-between;
  padding:0.75rem 1rem; border-bottom:1px solid rgba(0,0,0,0.04);
}
.dashboard-card-title{ margin:0; font-size:1rem; font-weight:700; color:#111827; }
.dashboard-card-subtitle{ margin:0; font-size:0.875rem; font-weight:400; color:#6b7280; }
.dashboard-card-toolbar{ display:flex; gap:0.5rem; align-items:center; }
.dashboard-card-body{ padding:1rem; flex:1 1 auto; overflow:hidden; }
.dashboard-card-body .scrollable{ overflow:auto; max-height:320px; }

/* Pipeline Kanban */
.kanban-board{ display:flex; gap:0.75rem; width:100%; }
.kanban-column{ background:#f8fafc; border-radius:0.5rem; padding:0.5rem; flex:1 1 0; min-width:160px; display:flex; flex-direction:column; max-height:360px; }
.kanban-column{
  background: linear-gradient(180deg, #f8fbfd 0%, #f6f9fb 100%);
  border-radius:0.5rem;
  padding:0.5rem;
  flex:1 1 0;
  min-width:160px;
  display:flex;
  flex-direction:column;
  max-height:360px;
}
.kanban-column-header{ display:flex; align-items:center; justify-content:space-between; gap:8px; padding:0.5rem; border-radius:0.5rem; margin-bottom:6px; background: var(--accent, #111827); color: #fff; box-shadow: none; border: none; }
.kanban-column.today .kanban-column-header { /* no-op globally; week view overrides below */ }
.kanban-column:not(.today) .kanban-column-header { /* no-op globally; week view overrides below */ }
.kanban-column-header .kanban-column-title{ font-weight:700; font-size:0.9rem; display:flex; align-items:center; gap:8px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; max-width:calc(var(--kanban-column-width) - 90px); }
.kanban-column-header .column-count{ background:rgba(255,255,255,0.12); color:#fff; font-weight:700; padding:2px 8px; border-radius:999px; font-size:0.75rem; }
.kanban-column-header .column-controls{ display:flex; gap:6px; align-items:center; }
.kanban-column-header .column-controls button{ background:transparent; border:0; color:rgba(255,255,255,0.9); padding:4px; border-radius:6px; }
.kanban-column-header .column-controls button:hover{ background:rgba(255,255,255,0.06); }
.kanban-column-body{ overflow:auto; padding:0.5rem; display:flex; flex-direction:column; gap:0.5rem; min-height:80px; flex:1 1 auto; max-height:320px; }
.kanban-card{ background:#fff; border-radius:0.5rem; padding:0.6rem; box-shadow:0 1px 2px rgba(0,0,0,0.04); cursor:pointer; }
.kanban-card .fw-semibold{ overflow:hidden; text-overflow:ellipsis; white-space:nowrap; display:block; }
.kanban-card:hover{ transform:translateY(-2px); box-shadow:0 4px 8px rgba(0,0,0,0.06); }
.kanban-card .small-meta{ font-size:0.75rem; color:#6b7280; }

/* clickable week/schedule items */
.week-item { cursor: pointer; }

/* ClickUp-like subtle column header divider */
.kanban-column + .kanban-column{ margin-left:8px; }

@media (max-width:767.98px){
  .kanban-board{ overflow-x:auto; }
  .kanban-column{ min-width:220px; flex:0 0 auto; }
}

/* Pipeline container fixed height so each column scrolls independently */
#pipelineContainer{ height:360px; overflow-x:auto; overflow-y:hidden; padding:0rem; box-sizing:border-box; -webkit-overflow-scrolling:touch; }

/* Week view kanban container should match pipeline behavior */
#weekViewDays { height:480px; overflow-x:auto; overflow-y:hidden; padding:0rem; box-sizing:border-box; -webkit-overflow-scrolling:touch; }
#weekViewDays .kanban-board { display:flex; gap:0.75rem; align-items:stretch; flex-wrap:nowrap; }
#weekViewDays .kanban-column { height:100%; box-sizing:border-box; flex:0 0 var(--kanban-column-width); width:var(--kanban-column-width); max-width:var(--kanban-column-width); }
#weekViewDays .kanban-column-body { overflow:auto; flex:1 1 auto; }

/* thinner scrollbars for week kanban columns */
#weekViewDays .kanban-column-body {
  scrollbar-width: thin;
  /* subtler vertical thumb */
  scrollbar-color: rgba(0,0,0,0.06) transparent;
}
#weekViewDays .kanban-column-body::-webkit-scrollbar { width: 6px; }
#weekViewDays .kanban-column-body::-webkit-scrollbar-track { background: transparent; }
#weekViewDays .kanban-column-body::-webkit-scrollbar-thumb { background: rgba(0,0,0,0.06); border-radius: 6px; }
#weekViewDays .kanban-column-body::-webkit-scrollbar-thumb:hover { background: rgba(0,0,0,0.12); }

/* horizontal scrollbar for the whole week board */
#weekViewDays::-webkit-scrollbar { height: 6px; }
#weekViewDays::-webkit-scrollbar-track { background: transparent; }
#weekViewDays::-webkit-scrollbar-thumb { background: rgba(0,0,0,0.06); border-radius: 6px; }
#weekViewDays::-webkit-scrollbar-thumb:hover { background: rgba(0,0,0,0.12); }

#weekViewDays { scrollbar-width: thin; scrollbar-color: rgba(0,0,0,0.06) transparent; }

/* Week view header color overrides (scoped) */
#weekViewDays .kanban-column-header { padding:0.5rem; border-radius:0.5rem; margin-bottom:6px; box-shadow:none; border:none; }
#weekViewDays .kanban-column.today .kanban-column-header { background: var(--status-lead); color: #fff; }
#weekViewDays .kanban-column:not(.today) .kanban-column-header { background: #6b7280; color: #fff; }
#weekViewDays .kanban-column-header .kanban-column-title { color: inherit; }
#weekViewDays .kanban-column-header .column-count { background: rgba(255,255,255,0.12); color:#fff; font-weight:700; padding:2px 8px; border-radius:999px; font-size:0.75rem; }
#weekViewDays .kanban-column-header .column-controls button{ background:transparent; border:0; color: rgba(255,255,255,0.95); padding:4px; border-radius:6px; }
#weekViewDays .kanban-column-header .column-controls button:hover{ background:rgba(255,255,255,0.06); }


/* Thinner, styled scrollbars for the pipeline (horizontal) and column bodies (vertical) */
/* Firefox */
#pipelineContainer, .kanban-column-body {
  scrollbar-width: thin;
  /* subtler horizontal thumb */
  scrollbar-color: rgba(0,0,0,0.06) transparent;
}

/* Webkit browsers */
#pipelineContainer::-webkit-scrollbar { height: 8px; }
#pipelineContainer::-webkit-scrollbar-track { background: transparent; }
#pipelineContainer::-webkit-scrollbar-thumb { background: rgba(0,0,0,0.06); border-radius: 999px; }
#pipelineContainer::-webkit-scrollbar-thumb:hover { background: rgba(0,0,0,0.12); }

.kanban-column-body::-webkit-scrollbar { width: 8px; }
.kanban-column-body::-webkit-scrollbar-track { background: transparent; }
.kanban-column-body::-webkit-scrollbar-thumb { background: rgba(0,0,0,0.12); border-radius: 8px; }
.kanban-column-body::-webkit-scrollbar-thumb:hover { background: rgba(0,0,0,0.18); }

/* Ensure the columns occupy the full container height and compensate for .row negative margins */
#pipelineColumns.row { height:100%; margin-left:0; margin-right:0; box-sizing:border-box; display:flex; gap:0.5rem; align-items:stretch; flex-wrap:nowrap; }
#pipelineColumns > .col-6, #pipelineColumns > .col-md-2 { height:100%;  box-sizing:border-box; flex:0 0 var(--kanban-column-width); width:var(--kanban-column-width); max-width:var(--kanban-column-width); }

/* Prevent visual overflow from the inner column elements */
.kanban-column{ box-sizing:border-box; overflow:hidden; }

/* Column-specific color coding */

/* set per-column accent via centralized status variables from style-manager.js */
.kanban-column[data-col="lead"] { --accent: var(--status-lead); }
.kanban-column[data-col="scheduled"] { --accent: var(--status-booked); }
.kanban-column[data-col="quote"] { --accent: var(--status-quote); }
.kanban-column[data-col="proposal"] { --accent: var(--substatus-sent-to-customer); }
.kanban-column[data-col="inprocess"] { --accent: #FFF3CD; }
.kanban-column[data-col="balance"] { --accent: #ef4444; }

/* Use accent for a thin top border and subtle glow */
.kanban-column .kanban-column-body { border-top: 3px solid rgba(0,0,0,0.03); }
.kanban-column[data-col="lead"] .kanban-column-body { border-top-color: color-mix(in srgb, var(--accent) 70%, rgba(0,0,0,0.12)); }
.kanban-column[data-col="scheduled"] .kanban-column-body { border-top-color: color-mix(in srgb, var(--accent) 70%, rgba(0,0,0,0.12)); }
.kanban-column[data-col="quote"] .kanban-column-body { border-top-color: color-mix(in srgb, var(--accent) 70%, rgba(0,0,0,0.12)); }
.kanban-column[data-col="proposal"] .kanban-column-body { border-top-color: color-mix(in srgb, var(--accent) 70%, rgba(0,0,0,0.12)); }
.kanban-column[data-col="inprocess"] .kanban-column-body { border-top-color: color-mix(in srgb, var(--accent) 70%, rgba(0,0,0,0.12)); }
.kanban-column[data-col="balance"] .kanban-column-body { border-top-color: color-mix(in srgb, var(--accent) 70%, rgba(0,0,0,0.12)); }

/* Adjust header text contrast for light accents */
.kanban-column[data-col="inprocess"] .kanban-column-header { color: #111827; }

/* adjust count pill and control icon contrast depending on header brightness */
/* default: light text on accent */
.kanban-column-header .column-count{ background: rgba(255,255,255,0.12); color: #fff; }
.kanban-column-header .column-controls button{ color: rgba(255,255,255,0.95); }

/* Lead (blue) - keep light text */
.kanban-column[data-col="lead"] .kanban-column-header { color: #ffffff; }
.kanban-column[data-col="lead"] .kanban-column-header .column-count{ background: rgba(255,255,255,0.14); color: #fff; }
.kanban-column[data-col="lead"] .kanban-column-header .column-controls button{ color: rgba(255,255,255,0.95); }

/* Scheduled / Booked (light pink) - use dark text */
.kanban-column[data-col="scheduled"] .kanban-column-header { color: #111827; }
.kanban-column[data-col="scheduled"] .kanban-column-header .column-count{ background: rgba(0,0,0,0.08); color: #111827; }
.kanban-column[data-col="scheduled"] .kanban-column-header .column-controls button{ color: rgba(0,0,0,0.7); }

/* Quote (orange) - use dark text for contrast */
.kanban-column[data-col="quote"] .kanban-column-header { color: #111827; }
.kanban-column[data-col="quote"] .kanban-column-header .column-count{ background: rgba(0,0,0,0.08); color: #111827; }
.kanban-column[data-col="quote"] .kanban-column-header .column-controls button{ color: rgba(0,0,0,0.75); }

/* Proposal (light blue) - use dark text */
.kanban-column[data-col="proposal"] .kanban-column-header { color: #111827; }
.kanban-column[data-col="proposal"] .kanban-column-header .column-count{ background: rgba(0,0,0,0.06); color: #111827; }
.kanban-column[data-col="proposal"] .kanban-column-header .column-controls button{ color: rgba(0,0,0,0.7); }

/* In-process (yellow) - dark text already set */
.kanban-column[data-col="inprocess"] .kanban-column-header { color: #111827; }
.kanban-column[data-col="inprocess"] .kanban-column-header .column-count{ background: rgba(0,0,0,0.06); color: #111827; }
.kanban-column[data-col="inprocess"] .kanban-column-header .column-controls button{ color: rgba(0,0,0,0.7); }

/* Balance (red) - keep light text for contrast */
.kanban-column[data-col="balance"] .kanban-column-header { color: #ffffff; }
.kanban-column[data-col="balance"] .kanban-column-header .column-count{ background: rgba(255,255,255,0.14); color: #fff; }
.kanban-column[data-col="balance"] .kanban-column-header .column-controls button{ color: rgba(255,255,255,0.95); }

/* KPI strip */
.kpi-row{ display:flex; gap:1rem; align-items:stretch; margin-bottom:1rem; }
.kpi-tile{ flex:1 1 0; background:#ffffff; border-radius:0.5rem; padding:0.75rem 1rem; box-shadow:0 1px 2px rgba(16,24,40,0.04); display:flex; flex-direction:column; justify-content:space-between; }
.kpi-tile{ min-height:72px; }
.kpi-label{ font-size:0.8125rem; color:#6b7280; margin:0 0 0.25rem 0; }
.kpi-value{ font-size:1.25rem; font-weight:700; color:#111827; }
.kpi-meta{ font-size:0.75rem; color:#10b981; display:flex; align-items:center; gap:0.5rem; }
.kpi-sparkline{ width:100%; height:28px !important; max-height:28px !important; margin-top:0.5rem; display:block; }

@media (max-width:767.98px){
  .kpi-row{ flex-direction:column; }
}

/* Status & Substatus badges used by style-manager.js */
.status-badge, .substatus-badge {
  width:12px; height:12px; border-radius:50%; display:inline-block; vertical-align:middle; margin-left:6px;
}
.status-badge { box-shadow:0 0 0 2px rgba(0,0,0,0.03) inset; }

/* Client status */
.status-workflow-lead { background: var(--status-lead); } /* cyan */
.status-workflow-booked { background: var(--status-booked); } /* green */
.status-workflow-quote { background: var(--status-quote); } /* blue */

/* Client substatus */
.substatus-workflow-new { background: #f97316; } /* orange */
.substatus-workflow-sent-to-customer { background: var(--substatus-sent-to-customer); } /* indigo */
.substatus-workflow-revision-requested { background: #f59e0b; } /* amber */
.substatus-workflow-customer-accepted { background: #10b981; } /* green */
.substatus-workflow-internal-order-review { background: #06b6d4; } /* cyan */
.substatus-workflow-internal-order-review-complete { background: #64748b; } /* slate */

/* small helper to separate badges */
.kanban-card .d-flex .status-badge, .kanban-card .d-flex .substatus-badge { margin-left:6px; }