/* Production CRM extensions: workflow surfaces, mobile access, and compact 100% zoom layout. */

.sidebar{
  overflow-y:auto;
  scrollbar-width:thin;
}

.sidebar .nav-item{
  min-height:38px;
  padding-top:8px;
  padding-bottom:8px;
}

.topbar .actions{
  flex-wrap:wrap;
  justify-content:flex-end;
}

.topbar-utility{
  display:flex;
  align-items:center;
  gap:8px;
}

.utility-icon{
  position:relative;
}

.utility-icon .count-dot{
  position:absolute;
  top:-5px;
  right:-5px;
  min-width:18px;
  height:18px;
  padding:0 5px;
  display:grid;
  place-items:center;
  border:2px solid var(--surface);
  border-radius:999px;
  background:var(--lost);
  color:#fff;
  font:700 9px/1 'JetBrains Mono',monospace;
}

.mobile-account-btn{
  display:none;
}

.crm-section-tabs,
.queue-tabs{
  display:flex;
  align-items:center;
  gap:7px;
  overflow-x:auto;
  padding-bottom:2px;
  scrollbar-width:thin;
}

.crm-section-tab,
.queue-tab{
  flex:0 0 auto;
  border:1px solid var(--line);
  border-radius:999px;
  background:var(--surface);
  color:var(--ink-soft);
  padding:8px 12px;
  font:600 12px/1 'Inter',sans-serif;
  cursor:pointer;
}

.crm-section-tab.active,
.queue-tab.active{
  border-color:color-mix(in srgb,var(--blue) 55%,var(--line));
  background:color-mix(in srgb,var(--blue) 12%,var(--surface));
  color:var(--blue-deep);
}

.operations-grid{
  display:grid;
  grid-template-columns:repeat(4,minmax(0,1fr));
  gap:12px;
  margin:16px 0;
}

.queue-card{
  appearance:none;
  width:100%;
  min-width:0;
  border:1px solid var(--line);
  border-radius:var(--radius);
  background:var(--surface);
  color:var(--ink);
  padding:15px;
  text-align:left;
  cursor:pointer;
  box-shadow:var(--shadow-sm);
  transition:transform .16s ease,border-color .16s ease,box-shadow .16s ease;
}

.queue-card:hover,
.queue-card:focus-visible{
  transform:translateY(-1px);
  border-color:color-mix(in srgb,var(--blue) 45%,var(--line));
  box-shadow:var(--shadow-md);
  outline:none;
}

.queue-card .queue-value{
  display:block;
  margin-top:8px;
  font:700 25px/1 'JetBrains Mono',monospace;
}

.queue-card .queue-label{
  color:var(--ink-soft);
  font-size:12px;
}

.lead-name-button{
  display:inline;
  appearance:none;
  padding:0;
  border:0;
  background:none;
  color:inherit;
  font:inherit;
  text-align:left;
  cursor:pointer;
}

.lead-name-button:hover,
.lead-name-button:focus-visible{
  color:var(--blue);
  text-decoration:underline;
  outline:none;
}

.lead-workspace{
  display:grid;
  gap:16px;
}

.lead-workspace-hero{
  display:grid;
  grid-template-columns:minmax(0,1fr) auto;
  gap:16px;
  align-items:start;
  padding:16px;
  border:1px solid var(--line);
  border-radius:var(--radius);
  background:
    radial-gradient(circle at 85% 0,color-mix(in srgb,var(--blue) 16%,transparent),transparent 45%),
    var(--surface2);
}

.lead-workspace-hero h4{
  margin:0 0 5px;
  color:var(--ink);
  font-size:20px;
}

.lead-meta-line{
  display:flex;
  flex-wrap:wrap;
  gap:7px 14px;
  color:var(--ink-soft);
  font-size:12px;
}

.workspace-kpis{
  display:grid;
  grid-template-columns:repeat(3,minmax(78px,1fr));
  gap:8px;
}

.workspace-kpi{
  padding:10px;
  border:1px solid var(--line);
  border-radius:6px;
  background:var(--surface);
  text-align:center;
}

.workspace-kpi strong{
  display:block;
  font:700 16px/1.2 'JetBrains Mono',monospace;
}

.workspace-kpi span{
  color:var(--ink-soft);
  font-size:10px;
}

.detail-grid{
  display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));
  gap:1px;
  overflow:hidden;
  border:1px solid var(--line);
  border-radius:var(--radius);
  background:var(--line);
}

.detail-item{
  min-width:0;
  padding:12px;
  background:var(--surface);
}

.detail-item label{
  display:block;
  margin-bottom:5px;
  color:var(--ink-soft);
  font:600 9px/1.2 'JetBrains Mono',monospace;
  letter-spacing:.07em;
  text-transform:uppercase;
}

.detail-item div{
  overflow-wrap:anywhere;
  font-size:13px;
}

.timeline{
  position:relative;
  display:grid;
  gap:12px;
}

.timeline-item{
  position:relative;
  margin-left:10px;
  padding:12px 12px 12px 18px;
  border-left:2px solid var(--line);
  border-radius:0 6px 6px 0;
  background:var(--surface2);
}

.timeline-item::before{
  content:"";
  position:absolute;
  left:-6px;
  top:16px;
  width:10px;
  height:10px;
  border:2px solid var(--surface);
  border-radius:50%;
  background:var(--blue);
}

.timeline-item.system::before{
  background:#d7a928;
}

.pipeline-board{
  display:grid;
  grid-template-columns:repeat(5,minmax(245px,1fr));
  gap:12px;
  min-width:1285px;
}

.pipeline-column{
  min-height:440px;
  padding:10px;
  border:1px solid var(--line);
  border-radius:var(--radius);
  background:color-mix(in srgb,var(--surface2) 88%,var(--surface));
}

.pipeline-column.drag-over{
  border-color:var(--blue);
  box-shadow:inset 0 0 0 1px var(--blue);
}

.pipeline-column-head{
  display:flex;
  justify-content:space-between;
  align-items:center;
  margin-bottom:10px;
  padding:3px 2px 9px;
  border-bottom:1px solid var(--line);
  font-size:12px;
  font-weight:700;
}

.pipeline-card{
  margin-bottom:9px;
  padding:12px;
  border:1px solid var(--line);
  border-radius:6px;
  background:var(--surface);
  box-shadow:var(--shadow-sm);
  cursor:grab;
}

.pipeline-card:active{
  cursor:grabbing;
}

.pipeline-card h4{
  margin:0 0 5px;
  font-size:13px;
}

.pipeline-card p{
  margin:3px 0 0;
  color:var(--ink-soft);
  font-size:11px;
}

.task-list{
  display:grid;
  gap:9px;
}

.task-row{
  display:grid;
  grid-template-columns:auto minmax(0,1fr) auto auto;
  gap:12px;
  align-items:center;
  padding:12px;
  border:1px solid var(--line);
  border-radius:var(--radius);
  background:var(--surface);
}

.task-row.overdue{
  border-color:color-mix(in srgb,var(--lost) 45%,var(--line));
}

.task-row.completed{
  opacity:.62;
}

.task-row.completed .task-title{
  text-decoration:line-through;
}

.task-title{
  font-weight:650;
  font-size:13px;
}

.task-meta{
  margin-top:3px;
  color:var(--ink-soft);
  font-size:11px;
}

.customer-grid,
.booking-grid{
  display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));
  gap:12px;
}

.crm-card{
  min-width:0;
  padding:15px;
  border:1px solid var(--line);
  border-radius:var(--radius);
  background:var(--surface);
  box-shadow:var(--shadow-sm);
}

.crm-card h3,
.crm-card h4{
  margin:0 0 7px;
}

.crm-card .card-sub{
  color:var(--ink-soft);
  font-size:11.5px;
  overflow-wrap:anywhere;
}

.money{
  font:700 17px/1.2 'JetBrains Mono',monospace;
}

.margin-positive{color:var(--booked)}
.margin-warning{color:var(--followup)}

.saved-view-bar{
  display:flex;
  align-items:center;
  gap:8px;
  margin:-2px 0 12px;
  padding:9px;
  border:1px solid var(--line);
  border-radius:var(--radius);
  background:var(--surface2);
  overflow-x:auto;
}

.saved-view-bar .spacer{
  flex:1;
}

.bulk-extended{
  display:flex;
  align-items:center;
  gap:7px;
  flex-wrap:wrap;
}

.bulk-extended select{
  min-width:132px;
  height:34px;
  padding:5px 9px;
  border:1px solid var(--line);
  border-radius:6px;
  background:var(--surface);
  color:var(--ink);
}

.notification-list{
  display:grid;
  gap:8px;
}

.notification-item{
  padding:12px;
  border:1px solid var(--line);
  border-radius:6px;
  background:var(--surface);
}

.notification-item.unread{
  border-left:3px solid var(--blue);
  background:color-mix(in srgb,var(--blue) 6%,var(--surface));
}

.audit-entry{
  display:grid;
  grid-template-columns:155px 150px minmax(220px,1fr) 160px;
  gap:12px;
  align-items:start;
  padding:11px 13px;
  border-bottom:1px solid var(--line);
  font-size:12px;
}

.audit-entry:last-child{border-bottom:0}

.travel-fields{
  margin:2px 0 14px;
  padding:14px;
  border:1px solid var(--line);
  border-radius:var(--radius);
  background:var(--surface2);
}

.travel-fields legend{
  padding:0 6px;
  color:var(--ink-soft);
  font:700 10px/1 'JetBrains Mono',monospace;
  letter-spacing:.06em;
  text-transform:uppercase;
}

.tag-list{
  display:flex;
  flex-wrap:wrap;
  gap:6px;
}

.tag-chip{
  padding:4px 7px;
  border-radius:999px;
  background:color-mix(in srgb,var(--blue) 11%,var(--surface2));
  color:var(--blue-deep);
  font-size:10px;
  font-weight:650;
}

.merge-candidate{
  display:grid;
  grid-template-columns:auto minmax(0,1fr) auto;
  gap:10px;
  align-items:center;
  padding:10px;
  border:1px solid var(--line);
  border-radius:6px;
}

.dropzone-compact{
  padding:18px;
  border:1.5px dashed var(--line);
  border-radius:var(--radius);
  background:var(--surface2);
  text-align:center;
}

.force-reset-card{
  max-width:480px;
}

@media(max-width:1180px){
  .operations-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
  .customer-grid,.booking-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
  .detail-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
  .audit-entry{grid-template-columns:130px 130px minmax(180px,1fr)}
  .audit-entry > :last-child{display:none}
}

@media(max-width:880px){
  .mobile-account-btn{display:inline-flex}
  .sidebar-user{display:none!important}
  .sidebar{
    overflow-x:auto;
    overflow-y:hidden;
    scrollbar-width:none;
  }
  .sidebar::-webkit-scrollbar{display:none}
  .topbar{gap:9px}
  .topbar .actions{order:3;width:100%;justify-content:flex-start;overflow-x:auto;flex-wrap:nowrap}
  .lead-workspace-hero{grid-template-columns:1fr}
  .customer-grid,.booking-grid{grid-template-columns:1fr}
  .task-row{grid-template-columns:auto minmax(0,1fr) auto}
  .task-row > :last-child{grid-column:2 / -1}
}

@media(max-width:600px){
  .operations-grid{grid-template-columns:1fr 1fr;gap:8px}
  .queue-card{padding:12px}
  .detail-grid{grid-template-columns:1fr}
  .workspace-kpis{grid-template-columns:repeat(3,1fr)}
  .audit-entry{grid-template-columns:1fr;gap:4px}
  .audit-entry > :last-child{display:block}
  .crm-section-tabs{margin-right:-8px}
}

@media(prefers-reduced-motion:reduce){
  .pipeline-card,.queue-card{transition:none}
}