/* Driver dashboard styles */
.driver-main { padding: 40px 0 60px; min-height: 60vh; }
.driver-card { max-width: 440px; margin: 0 auto; background: #fff; border-radius: 16px; padding: 32px; box-shadow: 0 4px 24px rgba(0,0,0,.08); }
.driver-head { display: flex; justify-content: space-between; align-items: center; margin-bottom: 24px; flex-wrap: wrap; gap: 12px; }
.driver-head h1 { margin: 0; }
.stat-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); gap: 16px; margin-bottom: 28px; }
.stat-card { background: #fff; border-radius: 12px; padding: 20px; box-shadow: 0 2px 12px rgba(0,0,0,.06); }
.stat-label { font-size: .85rem; color: var(--muted, #666); margin-bottom: 8px; }
.stat-val { font-size: 1.5rem; font-weight: 700; color: var(--blue-dark, #1a1a2e); }
.tabs { display: flex; gap: 8px; margin-bottom: 20px; border-bottom: 2px solid #eee; }
.tab { background: none; border: none; padding: 12px 20px; font-size: 1rem; cursor: pointer; color: var(--muted, #666); border-bottom: 3px solid transparent; margin-bottom: -2px; }
.tab.active { color: var(--orange, #ff6b35); border-bottom-color: var(--orange, #ff6b35); font-weight: 600; }
.tabpane { background: #fff; border-radius: 12px; padding: 8px 20px; box-shadow: 0 2px 12px rgba(0,0,0,.06); }
.tx-row { display: flex; justify-content: space-between; align-items: center; padding: 14px 0; border-bottom: 1px solid #f0f0f0; gap: 12px; }
.tx-row:last-child { border-bottom: none; }
.tx-in { color: #22a06b; }
.tx-out { color: #d33; }
.muted { color: var(--muted, #666); }
.small { font-size: .85rem; }
.field { margin-bottom: 16px; }
.field label { display: block; margin-bottom: 6px; font-weight: 600; }
.field input { width: 100%; padding: 12px; border: 1px solid #ddd; border-radius: 8px; font-size: 1rem; }
.form-err { color: #d33; margin-bottom: 12px; min-height: 20px; }
@media (max-width: 600px) {
  .driver-card { padding: 24px 20px; }
  .stat-val { font-size: 1.25rem; }
}

.insights { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; margin-top: 16px; }
.insight-card { background: #fff; border-radius: 12px; padding: 20px; box-shadow: 0 2px 8px rgba(0,0,0,0.08); }
.insight-card h3 { margin: 0 0 12px 0; font-size: 1.1em; color: #333; }
.chart-wrap { position: relative; height: 220px; }
.bar { flex: 1; background: linear-gradient(to top, #4CAF50, #8BC34A); border-radius: 3px 3px 0 0; min-height: 4px; position: relative; cursor: pointer; }
.bar.peak { background: linear-gradient(to top, #FF5722, #FF9800); }
.bar.low { background: linear-gradient(to top, #9E9E9E, #BDBDBD); }
.bar-label { font-size: 9px; text-align: center; color: #666; margin-top: 4px; }
.bar-group { flex: 1; display: flex; flex-direction: column; align-items: center; }
.best-hours { display: flex; gap: 10px; flex-wrap: wrap; }
.hour-badge { background: #4CAF50; color: white; padding: 8px 16px; border-radius: 20px; font-weight: bold; font-size: 1.1em; }
.hour-badge.peak { background: #FF5722; }
.day-row { display: flex; justify-content: space-between; padding: 8px 0; border-bottom: 1px solid #eee; }
.day-row:last-child { border: none; }
.trend-up { color: #4CAF50; font-weight: bold; }
.trend-down { color: #f44336; font-weight: bold; }
.trend-same { color: #999; }
@media (max-width: 768px) { .insights { grid-template-columns: 1fr; } }

.live-indicator { display: flex; align-items: center; gap: 8px; font-size: 0.85em; color: #666; margin-bottom: 12px; font-weight: 600; }
.live-dot { width: 10px; height: 10px; background: #4CAF50; border-radius: 50%; animation: pulse 2s infinite; }
@keyframes pulse { 0% { opacity: 1; } 50% { opacity: 0.4; } 100% { opacity: 1; } }

.demand-alert { background: linear-gradient(135deg, #FF5722, #FF9800); color: white; padding: 14px 20px; border-radius: 12px; font-weight: bold; font-size: 1.1em; margin-bottom: 16px; text-align: center; animation: pulse 2s infinite; box-shadow: 0 4px 12px rgba(255,87,34,0.3); }
.goal-bar-wrap { background: #e0e0e0; border-radius: 10px; height: 24px; overflow: hidden; margin: 12px 0; }
.goal-bar { background: linear-gradient(90deg, #4CAF50, #8BC34A); height: 100%; border-radius: 10px; transition: width 0.5s ease; }
.goal-set { display: flex; gap: 8px; margin-top: 12px; }
.goal-set input { flex: 1; padding: 10px; border: 1px solid #ddd; border-radius: 8px; font-size: 1em; }
.goal-set .btn-primary { padding: 10px 20px; background: #4CAF50; color: white; border: none; border-radius: 8px; cursor: pointer; font-weight: bold; }
.goal-set .btn-primary:hover { background: #45a049; }

.export-controls { display: flex; flex-direction: column; gap: 10px; }
.export-controls label { display: flex; align-items: center; gap: 8px; font-size: 0.9em; }
.export-controls input[type="date"] { padding: 8px; border: 1px solid #ddd; border-radius: 8px; flex: 1; }
.compare-row { display: flex; justify-content: space-between; padding: 10px 0; border-bottom: 1px solid #eee; font-size: 1.05em; }
.compare-row.total { border-bottom: none; border-top: 2px solid #333; font-size: 1.15em; margin-top: 4px; padding-top: 12px; }
#forecast-box { font-size: 1.3em; font-weight: bold; color: #4CAF50; text-align: center; padding: 16px 0; }

/* Dark mode */
.dark-toggle { position: fixed; bottom: 20px; right: 20px; width: 50px; height: 50px; border-radius: 50%; background: #333; color: white; border: none; font-size: 1.5em; cursor: pointer; z-index: 1000; box-shadow: 0 4px 12px rgba(0,0,0,0.3); }
body.dark-mode { background: #1a1a1a; color: #e0e0e0; }
body.dark-mode .insight-card, body.dark-mode .stat-card { background: #2d2d2d; color: #e0e0e0; box-shadow: 0 2px 8px rgba(0,0,0,0.3); }
body.dark-mode .insight-card h3 { color: #fff; }
body.dark-mode .tx-row { border-color: #444; }
body.dark-mode .muted { color: #999; }
body.dark-mode .goal-bar-wrap { background: #444; }
body.dark-mode input { background: #333; color: #fff; border-color: #555; }
body.dark-mode .tab { background: #2d2d2d; color: #ccc; }
body.dark-mode .tab.active { background: #4CAF50; color: white; }
body.dark-mode .compare-row { border-color: #444; }

/* Bonus cards */
.bonus-item { background: linear-gradient(135deg, #FFF3E0, #FFE0B2); border-radius: 10px; padding: 14px; margin-bottom: 10px; border-left: 4px solid #FF9800; }
body.dark-mode .bonus-item { background: #3d3225; }
.bonus-item h4 { margin: 0 0 8px 0; color: #E65100; }
.bonus-progress { background: #e0e0e0; border-radius: 8px; height: 16px; overflow: hidden; margin: 8px 0; }
.bonus-progress-fill { background: linear-gradient(90deg, #FF9800, #FFB74D); height: 100%; transition: width 0.5s; }
.bonus-meta { font-size: 0.85em; color: #666; }

.btn-secondary { padding: 10px 20px; background: #f5f5f5; color: #666; border: 1px solid #ddd; border-radius: 8px; cursor: pointer; font-weight: bold; width: 100%; }
.btn-secondary:hover { background: #e0e0e0; }
body.dark-mode .btn-secondary { background: #3d3d3d; color: #ccc; border-color: #555; }

/* Live selling promo */
.live-promo {
  display: flex; gap: 16px; align-items: center;
  background: linear-gradient(135deg, #FF5722, #E91E63);
  color: white; padding: 20px; border-radius: 16px; margin-bottom: 20px;
  box-shadow: 0 4px 16px rgba(255,87,34,0.3);
}
.live-promo h3 { color: white; }

.modal-overlay { position: fixed; top: 0; left: 0; right: 0; bottom: 0; background: rgba(0,0,0,0.5); z-index: 1000; overflow-y: auto; padding: 20px; }
.modal-overlay textarea { width: 100%; padding: 10px; border: 1px solid #ddd; border-radius: 8px; font-family: inherit; }

/* Floating Add Product button */
.fab-add {
  position: fixed; bottom: 24px; right: 24px; z-index: 999;
  width: 60px; height: 60px; border-radius: 50%;
  background: linear-gradient(135deg, #FF6B35, #F7931E);
  color: white; font-size: 28px; border: none; cursor: pointer;
  box-shadow: 0 4px 16px rgba(255,107,53,0.4);
  display: none; align-items: center; justify-content: center;
}
.fab-add:hover { transform: scale(1.1); }
.fab-add.show { display: flex; }

/* Sidebar layout - same as admin panel */
.dash-layout{display:flex;gap:20px;align-items:flex-start}
.dash-sidebar{position:sticky;top:80px;min-width:200px;max-width:220px;background:#fff;border:1px solid #eee;border-radius:12px;padding:10px;display:flex;flex-direction:column;gap:4px;max-height:calc(100vh - 100px);overflow-y:auto;box-shadow:0 2px 8px rgba(0,0,0,.05)}
.dash-sidebar .tab{display:flex;align-items:center;gap:10px;width:100%;text-align:left;padding:10px 12px;border:none;background:transparent;border-radius:8px;cursor:pointer;font-size:.95rem;color:#333;transition:background .15s}
.dash-sidebar .tab:hover{background:#f5f5f5}
.dash-sidebar .tab.active{background:#FF6B35;color:#fff;font-weight:bold}
.dash-sidebar .tab-ico{font-size:1.2rem;min-width:28px;text-align:center}
.dash-content{flex:1;min-width:0}
@media(max-width:768px){
.dash-layout{flex-direction:column}
.dash-sidebar{position:static;max-width:none;min-width:0;width:100%;flex-direction:row;flex-wrap:wrap;max-height:none}
.dash-sidebar .tab{width:auto;flex:1 1 auto;min-width:60px;justify-content:center;padding:10px 6px}
.dash-sidebar .tab-lbl{display:none}
.dash-content{width:100%}
}