/* OVERVIEW.CSS - Overview page styles */

/* TOP STATS BAR */
.top-stats{
  position:sticky; 
  top:0; 
  z-index:12;
  background:#fff;
  border-bottom:2px solid var(--stroke);
  padding:16px 20px;
  display:none;
  gap:16px; 
  justify-content:center; 
  align-items:center;
  box-shadow:0 2px 12px rgba(0,0,0,0.06);
}
.stat-item{
  display:flex; 
  flex-direction:column;
  align-items:center;
  gap:4px;
  padding:12px 20px;
  background:var(--chip);
  border-radius:12px;
  border:1px solid var(--stroke);
  min-width:140px;
  transition:all 0.2s;
}
.stat-item:hover{
  transform:translateY(-2px);
  box-shadow:0 4px 12px rgba(0,0,0,0.08);
}
.stat-item span:first-child{
  font-size:11px;
  color:var(--muted);
  font-weight:600;
  text-transform:uppercase;
  letter-spacing:0.5px;
}
.stat-value{
  font-size:24px; 
  font-weight:800;
  color:var(--indigo);
}

/* KPI - компактная версия */
.kpi-compact{
  display:flex;
  gap:12px;
  align-items:center;
  margin-bottom:16px;
  justify-content:flex-end;
}
.kpi-item{
  display:flex;
  flex-direction:column;
  align-items:center;
  padding:8px 12px;
  border-radius:10px;
  background:var(--chip);
  border:1px solid var(--stroke);
  transition:all 0.2s;
}
.kpi-item:hover{transform:translateY(-2px); box-shadow:0 4px 8px rgba(0,0,0,0.08);}
.kpi-item .num{font-size:18px; font-weight:700; line-height:1}
.kpi-item .label{font-size:11px; color:var(--muted); margin-top:2px}
.kpi-item.alert{background:#fef2f2; border-color:#fecaca; cursor:pointer;}
.kpi-item.alert:hover{background:#fee2e2; transform:translateY(-3px); box-shadow:0 6px 12px rgba(239,68,68,0.2);}
.kpi-item.alert .num{color:var(--danger);}

/* DAILY STATS */
.daily-stats{
  background:#fff;
  border:1px solid var(--stroke);
  border-radius:12px;
  padding:16px;
  margin-bottom:16px;
  flex-shrink:0;
}
.daily-stats-header{
  font-size:14px;
  font-weight:700;
  margin-bottom:12px;
  color:var(--text);
}
.daily-stats-header .period{
  color:var(--muted);
  font-weight:400;
  font-size:13px;
  margin-left:8px;
}
.daily-stats-grid{
  display:grid;
  grid-template-columns:repeat(2, 1fr);
  gap:12px;
}
.stat-item-daily{
  padding:12px;
  border-radius:8px;
  background:var(--chip);
  border:1px solid var(--stroke);
}
.stat-item-daily.success{background:linear-gradient(135deg, #dcfce7 0%, #f9fafb 100%); border-color:#bbf7d0;}
.stat-item-daily.warning{background:linear-gradient(135deg, #fff7ed 0%, #f9fafb 100%); border-color:#fed7aa;}
.stat-item-daily.alert{background:linear-gradient(135deg, #fef2f2 0%, #f9fafb 100%); border-color:#fecaca; transition:all 0.2s;}
.stat-item-daily.alert:hover{background:linear-gradient(135deg, #fee2e2 0%, #fef2f2 100%); transform:translateY(-2px);}
.stat-item-daily .stat-label{font-size:11px; color:var(--muted); text-transform:uppercase; font-weight:600; margin-bottom:6px;}
.stat-item-daily .stat-number{font-size:28px; font-weight:800; color:var(--text); line-height:1;}
.stat-item-daily.success .stat-number{color:var(--success);}
.stat-item-daily.warning .stat-number{color:var(--warning);}
.stat-item-daily.alert .stat-number{color:var(--danger);}

/* ORDER CARD */
.order,.driver,.issue{
  border:2px solid var(--stroke);
  border-radius:14px;
  padding:12px;
  padding-top:16px;
  padding-bottom:48px;
  background:#fff;
  transition: all 0.2s;
  position:relative;
  display:flex;
  flex-direction:column;
  gap:8px;
}
.order[data-priority="express"]{border-color:#ef4444}
.order.reserved{border-color:#9ca3af; border-width:3px}
.order[data-type="REF"]:not([data-priority="express"]):not(.reserved){border-color:#2563eb}
.order[data-type="DRY"]:not([data-priority="express"]):not(.reserved){border-color:#fb923c}
.order:hover, .driver:hover{
  box-shadow: 0 4px 8px rgba(0,0,0,0.08);
  transform:translateY(-1px);
}
.order-content{
  display:flex;
  justify-content:space-between;
  gap:12px;
}
.order-main{
  flex:1;
  display:flex;
  flex-direction:column;
  gap:6px;
}
.order-side{
  display:flex;
  flex-direction:column;
  gap:6px;
  align-items:flex-end;
}
.order .title{font-weight:700; font-size:13px;}
.order-badges{
  display:flex; 
  flex-direction:row;
  gap:4px; 
  align-items:center;
}
.order-actions{
  display:flex; 
  gap:5px; 
  flex-direction:row;
  align-items:center;
}
.order-actions .btn{
  font-size:11px;
  padding:6px 12px;
  white-space:nowrap;
}

/* DRIVER CARD */
.driver{
  display:grid;
  grid-template-columns:auto 1fr auto;
  align-items:center;
  gap:12px;
  padding:10px 12px;
  transition:all 0.3s;
  position:relative;
}
.driver.online{
  background:linear-gradient(135deg, #dcfce7 0%, #fff 100%);
  border-color:#10b981;
  order:-1;
}
.driver-info{
  display:flex;
  flex-direction:column;
  gap:3px;
}
.driver-info .title{
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
  max-width:200px;
}
.driver-info .meta{
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
}
.driver-metrics{
  display:flex;
  gap:6px;
  flex-wrap:nowrap;
  justify-self:end;
}
.driver-status{
  justify-self:end;
}
.driver-metric{
  display:flex;
  flex-direction:column;
  align-items:center;
  padding:4px 8px;
  background:#f9fafb;
  border:1px solid #e5e7eb;
  border-radius:8px;
  min-width:65px;
}
.driver-metric.online{
  background:#dcfce7;
  border-color:#bbf7d0;
}
.driver-metric-value{
  font-size:13px;
  font-weight:700;
  color:#6b7280;
  line-height:1;
}
.driver-metric.online .driver-metric-value{
  color:var(--success);
}
.driver-metric-label{
  font-size:9px;
  color:#9ca3af;
  text-transform:uppercase;
  margin-top:2px;
  font-weight:600;
  letter-spacing:0.2px;
}
.driver-badge{
  display:inline-flex;
  align-items:center;
  gap:4px;
  padding:3px 8px;
  border-radius:999px;
  font-size:10px;
  font-weight:600;
}
.driver-badge.online{
  background:#dcfce7;
  color:#16a34a;
  border:1px solid #bbf7d0;
}
.driver-badge .pulse{
  width:6px;
  height:6px;
  background:#16a34a;
  border-radius:50%;
  animation:pulse 2s infinite;
}
.driver-time{
  font-size:10px;
  color:var(--muted);
}
.driver-orders{
  font-size:10px;
  color:var(--muted);
}

@media (max-width: 640px){
  .top-stats{flex-wrap:wrap; gap:12px}
  .kpi-compact{justify-content:center}
}

/* Индикатор комментария для Overview */
.comment-indicator-overview {
  position: absolute;
  right: 8px;
  bottom: 8px;
  width: 16px;
  height: 16px;
  border: 2px solid #9ca3af;
  border-radius: 50%;
  background-color: transparent;
  transition: all 0.2s;
}

.comment-indicator-overview.has-comment {
  background-color: #dcfce7;
  border-color: #bbf7d0;
}