/* ═══════════════════════════════════════════════════════════
   ML Smart Dispatch — Rider Dashboard
   Theme: MadeInNigeria.app — Warm Nigerian Green + Gold
═══════════════════════════════════════════════════════════ */

@import url('https://fonts.googleapis.com/css2?family=Plus+Jakarta+Sans:wght@400;500;600;700;800&family=Syne:wght@700;800&display=swap');

:root {
    --rd-green:       #008751;
    --rd-green-dark:  #005c38;
    --rd-green-deep:  #0a2218;
    --rd-green-light: #e8f5ee;
    --rd-green-mid:   #b8ddc8;
    --rd-gold:        #f5a623;
    --rd-gold-light:  #fff4de;
    --rd-gold-dark:   #c4820e;
    --rd-red:         #c0392b;
    --rd-cream:       #f4f8f5;
    --rd-white:       #ffffff;
    --rd-gray:        #5a7a6a;
    --rd-border:      #c8e0d4;
    --rd-shadow:      0 4px 18px rgba(0,135,81,.12);
    --rd-font:        'Plus Jakarta Sans', sans-serif;
    --rd-display:     'Syne', sans-serif;
    --rd-radius:      14px;
}

.mlsd-rider-wrap {
    max-width: 480px; margin: 0 auto;
    font-family: var(--rd-font); background: var(--rd-cream);
    color: var(--rd-green-deep); padding: 12px; border-radius: 16px;
}

/* Header */
.mlsd-rider-header {
    display: flex; align-items: center; gap: 12px;
    background: linear-gradient(135deg, var(--rd-green-deep) 0%, var(--rd-green-dark) 100%);
    color: #fff; padding: 16px 18px; border-radius: var(--rd-radius);
    margin-bottom: 14px; box-shadow: var(--rd-shadow);
    border-bottom: 3px solid var(--rd-gold);
}
.mlsd-rider-avatar { font-size: 32px; }
.mlsd-rider-info { flex: 1; }
.mlsd-rider-info strong { font-size: 16px; display: block; font-family: var(--rd-display); }
.mlsd-rider-meta { font-size: 12px; opacity: .75; margin-top: 2px; color: var(--rd-green-mid); }

/* Toggle switch */
.mlsd-switch { position: relative; display: inline-block; width: 46px; height: 26px; }
.mlsd-switch input { opacity: 0; width: 0; height: 0; }
.mlsd-slider { position: absolute; cursor: pointer; inset: 0; background: #2d5c40; border-radius: 26px; transition: .3s; }
.mlsd-slider:before { position: absolute; content: ''; height: 20px; width: 20px; left: 3px; bottom: 3px; background: white; border-radius: 50%; transition: .3s; }
input:checked + .mlsd-slider { background: var(--rd-gold); }
input:checked + .mlsd-slider:before { transform: translateX(20px); }
#mlsd-status-label { font-size: 12px; font-weight: 700; text-transform: uppercase; letter-spacing: .5px; margin-left: 8px; }
.mlsd-status-online  { color: var(--rd-gold); }
.mlsd-status-offline { color: #94a3b8; }
.mlsd-status-busy    { color: #fbbf24; }

/* Guidance banner */
.mlsd-guidance-banner {
    display: flex; align-items: center; gap: 10px;
    padding: 12px 16px;
    background: linear-gradient(135deg, var(--rd-gold-dark), var(--rd-gold));
    color: var(--rd-green-deep); border-radius: var(--rd-radius);
    font-size: 13px; font-weight: 700; margin-bottom: 14px;
    box-shadow: 0 4px 16px rgba(245,166,35,.35);
    animation: mlsd-pulse-banner 2.5s infinite;
}
@keyframes mlsd-pulse-banner { 0%,100%{opacity:1} 50%{opacity:.85} }

/* Cards */
.mlsd-card {
    background: var(--rd-white); border-radius: var(--rd-radius);
    padding: 16px 18px; margin-bottom: 14px;
    box-shadow: var(--rd-shadow); border: 1px solid var(--rd-border);
}
.mlsd-card h3 { margin: 0 0 12px; font-size: 11px; color: var(--rd-gray); text-transform: uppercase; letter-spacing: .6px; font-weight: 700; }

/* Order cards */
.mlsd-order-card { border-radius: var(--rd-radius); padding: 18px; margin-bottom: 14px; box-shadow: var(--rd-shadow); }
.mlsd-card-active   { background: var(--rd-green-light); border: 2px solid var(--rd-green); }
.mlsd-card-incoming { background: var(--rd-gold-light);  border: 2px solid var(--rd-gold); position: relative; overflow: hidden; }
.mlsd-card-incoming h3 { color: var(--rd-gold-dark); margin-bottom: 10px; }

/* Incoming pulse ring */
.mlsd-incoming-pulse {
    position: absolute; top: -40px; right: -40px; width: 120px; height: 120px;
    border-radius: 50%; background: rgba(245,166,35,.15); animation: mlsd-ring 1.5s infinite;
}
@keyframes mlsd-ring { 0%{transform:scale(.8);opacity:.8} 100%{transform:scale(1.6);opacity:0} }

/* Timer bar */
.mlsd-timer-bar { background: var(--rd-border); height: 6px; border-radius: 3px; margin: 12px 0; overflow: hidden; }
#mlsd-timer-fill { height: 100%; background: var(--rd-gold); border-radius: 3px; width: 100%; transition: width 1s linear; }

/* Action buttons */
.mlsd-order-actions { display: flex; gap: 10px; margin-top: 12px; }
.mlsd-btn { flex: 1; padding: 11px; border: none; border-radius: 10px; font-size: 14px; font-weight: 700; cursor: pointer; transition: transform .1s, opacity .1s; font-family: var(--rd-font); }
.mlsd-btn:active { transform: scale(.97); opacity: .9; }
.mlsd-btn-green  { background: var(--rd-green); color: #fff; }
.mlsd-btn-green:hover { background: var(--rd-green-dark); }
.mlsd-btn-red    { background: var(--rd-red); color: #fff; }
.mlsd-btn-blue   { background: var(--rd-green-dark); color: #fff; }

/* Stats row */
.mlsd-rider-stats { display: flex; gap: 10px; margin-bottom: 14px; }
.mlsd-stat-pill {
    flex: 1; background: var(--rd-white); border-radius: var(--rd-radius);
    padding: 12px 8px; text-align: center; box-shadow: var(--rd-shadow);
    border: 1px solid var(--rd-border);
}
.mlsd-sp-val { display: block; font-size: 20px; font-weight: 800; color: var(--rd-green-deep); }
.mlsd-sp-lbl { font-size: 11px; color: var(--rd-gray); margin-top: 3px; text-transform: uppercase; letter-spacing: .4px; }

/* Order details */
.mlsd-order-dets { font-size: 13px; line-height: 1.9; }
.mlsd-order-dets strong { display: inline-block; min-width: 80px; color: var(--rd-gray); }

/* History table */
.mlsd-history-table { width: 100%; font-size: 12px; border-collapse: collapse; }
.mlsd-history-table th { background: var(--rd-green-deep); color: var(--rd-green-mid); padding: 8px 10px; text-align: left; font-size: 11px; text-transform: uppercase; letter-spacing: .4px; }
.mlsd-history-table td { padding: 8px 10px; border-bottom: 1px solid var(--rd-border); }
.mlsd-history-table tr:hover td { background: var(--rd-green-light); }

/* WhatsApp Action Buttons */
.mlsd-wa-actions { display: flex; gap: 10px; margin-top: 12px; flex-wrap: wrap; }
.mlsd-wa-btn {
    display: inline-flex; align-items: center; gap: 6px;
    padding: 10px 16px; border-radius: 10px; font-size: 13px; font-weight: 700;
    text-decoration: none; cursor: pointer; border: none; font-family: var(--rd-font);
    transition: transform .1s, opacity .1s;
}
.mlsd-wa-btn:active { transform: scale(.97); }
.mlsd-wa-btn-chat     { background: #25d366; color: #fff; }
.mlsd-wa-btn-location { background: #128c7e; color: #fff; }
.mlsd-wa-btn-chat:hover, .mlsd-wa-btn-location:hover { opacity: .9; color: #fff; }

/* Delivery request card */
.mlsd-card-delivery {
    background: linear-gradient(135deg, rgba(0,135,81,.08), rgba(245,166,35,.05));
    border: 2px solid rgba(0,135,81,.3) !important;
}