/* Zyros Rider OS — shared premium mobile-first visual language. */
:root{--zyros:#D40C4B;--zyros-deep:#9d0736;--ink:#151519;--muted:#777783;--paper:#f6f6f8;--line:#e8e8ee;--card:#fff}
body{background:linear-gradient(180deg,#fafafd 0,#f3f3f7 100%)!important;color:var(--ink)!important;font-family:Inter,ui-sans-serif,system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",Arial,sans-serif!important;letter-spacing:-.1px}
.header{position:relative!important;padding:20px max(18px,calc((100% - 1380px)/2)) 24px!important;background:radial-gradient(circle at 80% 0,#f03a7a 0,transparent 30%),linear-gradient(135deg,#100e13 0,#2b101c 58%,#D40C4B 150%)!important;overflow:hidden}.header:after{content:"";position:absolute;width:280px;height:280px;right:-110px;bottom:-160px;border-radius:50%;border:1px solid rgba(255,255,255,.16);box-shadow:0 0 0 30px rgba(255,255,255,.035),0 0 0 60px rgba(255,255,255,.025)}.header-inner{position:relative;z-index:1}.header-right h1{font-size:clamp(23px,5vw,35px)!important;letter-spacing:-1px!important}.header-right p{color:#ffd7e5!important;font-size:12px!important}.header .logo{filter:drop-shadow(0 8px 16px rgba(0,0,0,.28))}
.icon-nav{display:none!important}.container{max-width:1240px!important;padding:20px max(14px,calc((100% - 1200px)/2)) 34px!important}.footer{padding-bottom:16px!important;color:#92929c!important}
.card,.order,.order-card,.notification,.transaction,.shift-card,.payout-card{border:1px solid rgba(225,225,233,.92)!important;background:rgba(255,255,255,.92)!important;border-radius:20px!important;box-shadow:0 10px 28px rgba(23,23,32,.06)!important}.card:hover,.order:hover,.order-card:hover{transform:translateY(-1px);box-shadow:0 15px 34px rgba(23,23,32,.1)!important}.card h2,.section-title,.order-id{color:var(--zyros)!important}.card h2{font-size:18px!important;letter-spacing:-.4px}.card p,.note,.meta{color:var(--muted)!important}
button,.button,.btn,.quick-card a,.action-btn{background:linear-gradient(135deg,var(--zyros),#ef2c71)!important;border:0!important;border-radius:13px!important;box-shadow:0 7px 16px rgba(212,12,75,.19)!important;font-weight:900!important;transition:transform .18s ease,box-shadow .18s ease!important}button:hover,.button:hover,.btn:hover,.quick-card a:hover,.action-btn:hover{transform:translateY(-1px);box-shadow:0 10px 22px rgba(212,12,75,.29)!important}input,select,textarea{border:1px solid var(--line)!important;background:#fbfbfd!important;border-radius:13px!important;box-shadow:none!important}input:focus,select:focus,textarea:focus{outline:none!important;border-color:var(--zyros)!important;box-shadow:0 0 0 4px rgba(212,12,75,.12)!important}
.orders-grid{gap:12px!important;grid-template-columns:repeat(auto-fit,minmax(285px,1fr))!important}.order,.order-card{overflow:hidden!important}.order-top{padding:12px 13px!important;background:linear-gradient(135deg,#17171c,#2b1720)!important}.order-body{padding:12px!important}.order-id{font-size:16px!important}.order .order-id,.order-card .order-id{color:#fff!important}.order .meta,.order-card .meta{font-size:11px!important;line-height:1.45!important}.order .items,.order-card .items{margin-top:9px!important;padding:9px!important;border-radius:12px!important;font-size:11px!important}.order .actions,.order-card .actions{gap:7px!important;margin-top:10px!important}.order button,.order-card button{min-height:39px!important;padding:8px 10px!important;font-size:11px!important}.order .address,.order-card .address{font-size:11px!important}.dispatch-timer,.delivery-timer{padding:8px!important;border-radius:11px!important}
.stats,.summary-grid,.quick-grid{gap:10px!important}.stat,.quick-card,.summary-card{border-radius:17px!important;background:linear-gradient(145deg,#fff,#f7f7fa)!important;border:1px solid var(--line)!important;box-shadow:0 8px 22px rgba(23,23,32,.05)!important}.stat strong,.big,.card-value{color:var(--zyros)!important}.table{border-collapse:separate!important;border-spacing:0 7px!important}.table th{color:#888!important;font-size:10px!important;text-transform:uppercase}.table td{background:#fff!important;border-top:1px solid var(--line)!important;border-bottom:1px solid var(--line)!important;padding:10px!important;font-size:12px!important}.table td:first-child{border-left:1px solid var(--line)!important;border-radius:11px 0 0 11px}.table td:last-child{border-right:1px solid var(--line)!important;border-radius:0 11px 11px 0}.chat-box,.messages{border-radius:18px!important}.message{border-radius:15px!important}
@media(max-width:700px){.header{padding:16px 14px 20px!important}.header-right{text-align:right!important}.header-right h1{font-size:24px!important}.container{padding:15px 12px 26px!important}.orders-grid{grid-template-columns:1fr!important}.order,.order-card{border-radius:17px!important}.order-top{padding:11px 12px!important}.order-body{padding:11px!important}.card{padding:14px!important;border-radius:17px!important}.stats,.summary-grid,.quick-grid{grid-template-columns:repeat(2,minmax(0,1fr))!important}.table{display:block!important;overflow-x:auto!important;white-space:nowrap!important}.table td{font-size:11px!important}}

/* Client Orders visual framework, adapted for rider tasks. */
.header{padding-bottom:52px!important}.container{margin-top:-22px!important;position:relative;z-index:4}.card,.order,.order-card{transition:transform .18s ease,box-shadow .18s ease!important}.order,.order-card{padding:13px!important;margin-bottom:10px!important}.order-top{background:transparent!important;padding:0 0 10px!important;margin:0 0 10px!important;border-bottom:1px solid var(--line)!important}.order-body{padding:0!important}.order-id,.order h2,.order-card h2{color:var(--ink)!important;font-size:17px!important;letter-spacing:-.35px!important}.order .status,.order-card .status,.order .badge,.order-card .badge{border-radius:999px!important;padding:5px 8px!important;font-size:8.5px!important;font-weight:900!important}.order .items,.order-card .items{background:#f6f6f8!important;border-radius:12px!important;margin-top:9px!important;padding:8px 9px!important}.order .item,.order-card .item{padding:7px 0!important;font-size:11px!important}.order .info,.order-card .info{background:#f6f6f8!important;border-radius:10px!important;padding:8px!important}.order .info span,.order-card .info span{font-size:8px!important;letter-spacing:.35px!important}.order .info strong,.order-card .info strong{font-size:11px!important}.order .actions,.order-card .actions{justify-content:flex-end!important;gap:7px!important}.order .actions a,.order-card .actions a{width:38px!important;height:38px!important;flex:0 0 38px!important;border-radius:11px!important;padding:0!important}.rider-bottom-nav{background:rgba(255,255,255,.96)!important;border-top:1px solid #e8e8ed!important;box-shadow:0 -8px 25px rgba(17,17,20,.08)!important}.rider-bottom-nav-inner{max-width:720px!important}.rider-bottom-nav a{position:relative;color:#777!important;min-height:61px!important;border-radius:0!important}.rider-bottom-nav a svg{width:20px;height:20px;stroke:currentColor;stroke-width:1.9;fill:none;stroke-linecap:round;stroke-linejoin:round}.rider-bottom-nav a small{font-size:8.5px!important}.rider-bottom-nav a.active{color:var(--zyros)!important;background:transparent!important;box-shadow:none!important}.rider-bottom-nav a.active:before{content:"";position:absolute;top:0;width:28px;height:3px;border-radius:0 0 4px 4px;background:var(--zyros)}

/* =========================================================
   ZYROS RIDER OS — GLOBAL DARK MODE
   Activated by rider-navigation.js from rider-users.json.
========================================================= */
html[data-rider-theme="dark"]{
    color-scheme:dark;
    --ink:#f1f1f5;
    --muted:#aaaab3;
    --paper:#111216;
    --line:#303139;
    --card:#1a1b20;
}

html[data-rider-theme="dark"] body{
    background:linear-gradient(180deg,#0d0e11 0,#15161a 100%)!important;
    color:#f1f1f5!important;
}

html[data-rider-theme="dark"] .container,
html[data-rider-theme="dark"] main{
    color:#f1f1f5!important;
}

html[data-rider-theme="dark"] .card,
html[data-rider-theme="dark"] .order,
html[data-rider-theme="dark"] .order-card,
html[data-rider-theme="dark"] .notification,
html[data-rider-theme="dark"] .transaction,
html[data-rider-theme="dark"] .shift-card,
html[data-rider-theme="dark"] .payout-card,
html[data-rider-theme="dark"] .quick-card,
html[data-rider-theme="dark"] .summary-card,
html[data-rider-theme="dark"] .stat,
html[data-rider-theme="dark"] .stat-card,
html[data-rider-theme="dark"] .filters,
html[data-rider-theme="dark"] .form-card,
html[data-rider-theme="dark"] .settings-card,
html[data-rider-theme="dark"] .profile-card,
html[data-rider-theme="dark"] .panel,
html[data-rider-theme="dark"] .section,
html[data-rider-theme="dark"] .empty{
    background:#1a1b20!important;
    border-color:#303139!important;
    color:#f1f1f5!important;
    box-shadow:0 10px 28px rgba(0,0,0,.28)!important;
}

html[data-rider-theme="dark"] .stat,
html[data-rider-theme="dark"] .quick-card,
html[data-rider-theme="dark"] .summary-card{
    background:linear-gradient(145deg,#1d1e23,#17181c)!important;
}

html[data-rider-theme="dark"] .card h2,
html[data-rider-theme="dark"] .section-title,
html[data-rider-theme="dark"] .stat-title,
html[data-rider-theme="dark"] .card-title,
html[data-rider-theme="dark"] label,
html[data-rider-theme="dark"] .label,
html[data-rider-theme="dark"] .title,
html[data-rider-theme="dark"] h1,
html[data-rider-theme="dark"] h2,
html[data-rider-theme="dark"] h3{
    color:#e6e6eb!important;
}

html[data-rider-theme="dark"] .card p,
html[data-rider-theme="dark"] .note,
html[data-rider-theme="dark"] .meta,
html[data-rider-theme="dark"] .subtitle,
html[data-rider-theme="dark"] .info,
html[data-rider-theme="dark"] .card-sub,
html[data-rider-theme="dark"] .transaction-meta,
html[data-rider-theme="dark"] .shift-meta,
html[data-rider-theme="dark"] .footer,
html[data-rider-theme="dark"] small{
    color:#aaaab3!important;
}

html[data-rider-theme="dark"] .info strong,
html[data-rider-theme="dark"] .meta strong,
html[data-rider-theme="dark"] .transaction-meta strong,
html[data-rider-theme="dark"] .shift-meta strong,
html[data-rider-theme="dark"] .order-detail strong{
    color:#f1f1f5!important;
}

html[data-rider-theme="dark"] .order .items,
html[data-rider-theme="dark"] .order-card .items,
html[data-rider-theme="dark"] .order .info,
html[data-rider-theme="dark"] .order-card .info,
html[data-rider-theme="dark"] .order-detail,
html[data-rider-theme="dark"] .status-actions,
html[data-rider-theme="dark"] .sla88-rider{
    background:#24252b!important;
    border-color:#34353e!important;
    color:#dedee4!important;
}

html[data-rider-theme="dark"] .order-top{
    border-bottom-color:#34353e!important;
}

html[data-rider-theme="dark"] input,
html[data-rider-theme="dark"] select,
html[data-rider-theme="dark"] textarea{
    background:#111216!important;
    border-color:#373841!important;
    color:#f2f2f5!important;
}

html[data-rider-theme="dark"] input::placeholder,
html[data-rider-theme="dark"] textarea::placeholder{
    color:#777984!important;
}

html[data-rider-theme="dark"] select option{
    background:#17181c!important;
    color:#f2f2f5!important;
}

html[data-rider-theme="dark"] .table th{
    color:#aaaab3!important;
}

html[data-rider-theme="dark"] .table td{
    background:#1a1b20!important;
    border-color:#303139!important;
    color:#ededf1!important;
}

html[data-rider-theme="dark"] .rider-bottom-nav{
    background:rgba(14,15,18,.97)!important;
    border-top-color:#2f3037!important;
    box-shadow:0 -8px 25px rgba(0,0,0,.45)!important;
}

html[data-rider-theme="dark"] .rider-bottom-nav a{
    color:#9b9da7!important;
}

html[data-rider-theme="dark"] .rider-bottom-nav a.active{
    color:#ff4d88!important;
}

html[data-rider-theme="dark"] .rider-profile-utilities a{
    background:#1a1b20!important;
    border-color:#303139!important;
    color:#ededf1!important;
}

html[data-rider-theme="dark"] a.home,
html[data-rider-theme="dark"] .home{
    background:#25262c!important;
    color:#f1f1f5!important;
}

html[data-rider-theme="dark"] .toggle-row,
html[data-rider-theme="dark"] .setting-row,
html[data-rider-theme="dark"] .profile-row{
    border-color:#303139!important;
    color:#ededf1!important;
}

html[data-rider-theme="dark"] .badge{
    border-color:transparent!important;
}

/* Keep Zyros identity and operational status colours intact. */
html[data-rider-theme="dark"] .stat-value,
html[data-rider-theme="dark"] .big,
html[data-rider-theme="dark"] .card-value{
    color:#ff4d88!important;
}

html[data-rider-theme="dark"] .header{
    background:
      radial-gradient(circle at 80% 0,rgba(240,58,122,.42) 0,transparent 30%),
      linear-gradient(135deg,#09090b 0,#1e0d14 58%,#7f0029 150%)!important;
}

html[data-rider-theme="dark"] .header-right h1,
html[data-rider-theme="dark"] .header-right p{
    color:#fff!important;
}

html[data-rider-theme="dark"] hr{
    border-color:#303139!important;
}

html[data-rider-theme="dark"] ::selection{
    background:#D40C4B;
    color:#fff;
}

