*{box-sizing:border-box}
:root{--navy:#0b2341;--navy2:#173a64;--navy3:#e8eef6;--bg:#f4f6f9;--text:#172033;--muted:#64748b;--border:#d9e1ea;--green:#198754;--red:#c0392b}
html,body{margin:0;min-height:100%;font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Arial,sans-serif;background:var(--bg);color:var(--text)}
body{padding-bottom:40px}
button,input,textarea,select{font:inherit}
button{cursor:pointer}

.topbar{width:100%;background:var(--navy);color:#fff;padding:14px 16px;display:flex;align-items:center;justify-content:space-between;gap:12px;position:sticky;top:0;z-index:20;box-shadow:0 2px 10px rgba(15,23,42,.16)}
.topbar>div{display:flex;flex-direction:column;min-width:0}
.topbar strong{font-size:21px;line-height:1.15}
.topbar span{font-size:12px;opacity:.82;margin-top:2px}
.topbar button{border:0;border-radius:9px;background:#fff;color:var(--navy);padding:9px 11px;font-weight:800;white-space:nowrap;font-size:13px}

main{width:100%;max-width:960px;margin:0 auto;padding:14px 14px 30px}
.areas-wrap{width:100%;display:flex;align-items:center;gap:8px;margin-bottom:12px}
.area-tabs{min-width:0;flex:1;display:flex;gap:7px;overflow-x:auto;padding:2px 1px 7px;scrollbar-width:none;-webkit-overflow-scrolling:touch}
.area-tabs::-webkit-scrollbar{display:none}
.area-tabs button{flex:0 0 auto;border:1px solid var(--border);background:#fff;color:var(--navy);border-radius:10px;padding:9px 12px;font-weight:750;white-space:nowrap}
.area-tabs button.active{background:var(--navy);border-color:var(--navy);color:#fff}
.add-area{flex:0 0 auto;border:1px solid var(--navy);background:#fff;color:var(--navy);border-radius:10px;padding:9px 11px;font-weight:800;white-space:nowrap}

.area-header{width:100%;display:flex;align-items:flex-end;justify-content:space-between;gap:12px;padding:14px 0 14px;border-bottom:1px solid var(--border);margin-bottom:14px}
.area-heading-group{display:flex;align-items:flex-end;gap:14px;min-width:0}
.area-heading-group>div:last-child{min-width:0}
.filter-control{display:flex;flex-direction:column;gap:5px;flex:0 0 auto}
.filter-control span{font-size:12px;font-weight:800;color:var(--muted)}
.filter-control select{border:1px solid var(--border);background:#fff;border-radius:9px;padding:9px 30px 9px 10px;color:var(--text)}
#areaTitle{margin:0;font-size:25px;line-height:1.1;color:var(--navy);word-break:break-word}
#areaDescription{margin:5px 0 0;color:var(--muted);font-size:13px}
.primary{border:0;background:var(--navy);color:#fff;border-radius:10px;padding:10px 14px;font-weight:800;white-space:nowrap}

#ridersContainer{width:100%}
.rider-card{width:100%;background:#fff;border:1px solid var(--border);border-radius:14px;padding:14px;margin:0 0 10px;box-shadow:0 1px 3px rgba(15,23,42,.05)}
.rider-head{display:flex;align-items:flex-start;justify-content:space-between;gap:10px;margin-bottom:10px}
.rider-head>div{min-width:0}
.area-badge{display:inline-block;max-width:100%;font-size:11px;font-weight:800;color:var(--navy);background:var(--navy3);border-radius:999px;padding:4px 8px;margin-bottom:5px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.rider-head h3{margin:0;font-size:18px;line-height:1.2;word-break:break-word}
.edit-btn{flex:0 0 auto;border:1px solid var(--border);background:#fff;color:var(--navy);border-radius:9px;padding:7px 10px;font-weight:750}
.field{display:flex;gap:8px;padding:6px 0;border-top:1px solid #edf0f4;font-size:14px;line-height:1.35}
.field strong{flex:0 0 78px;color:var(--muted);font-size:12px;text-transform:uppercase;letter-spacing:.03em}
.field span{min-width:0;overflow-wrap:anywhere}
.status-title{font-size:12px;font-weight:850;color:var(--muted);margin:12px 0 7px;text-transform:uppercase;letter-spacing:.04em}
.status-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:7px}
.check-option{display:flex;align-items:center;justify-content:center;gap:6px;border:1px solid var(--border);background:#fff;border-radius:9px;padding:9px 6px;font-size:13px;font-weight:750;min-width:0}
.check-option input{width:16px;height:16px;margin:0;accent-color:var(--navy)}
.empty{text-align:center;padding:42px 15px;color:var(--muted);margin:0}

.history-section{margin-top:24px;background:#fff;border:1px solid var(--border);border-radius:14px;padding:15px}
.history-section h2{margin:0 0 10px;color:var(--navy);font-size:18px}
.history-item{padding:9px 0;border-top:1px solid #edf0f4;font-size:14px}

.hidden{display:none!important}
.modal{position:fixed;inset:0;z-index:50;background:rgba(15,23,42,.48);display:flex;align-items:flex-end;justify-content:center;padding:0}
.modal-card{position:relative;width:100%;max-width:600px;max-height:92vh;overflow-y:auto;background:#fff;border-radius:18px 18px 0 0;padding:20px}
.modal-card h2{margin:0 36px 16px 0;color:var(--navy);font-size:21px}
.close{position:absolute;right:12px;top:10px;border:0;background:transparent;color:var(--muted);font-size:30px;line-height:1;padding:3px 8px}
.modal-card form>label{display:block;font-size:13px;font-weight:800;margin-bottom:12px}
.modal-card input,.modal-card textarea,.modal-card select{display:block;width:100%;margin-top:5px;border:1px solid var(--border);border-radius:10px;padding:11px;background:#fff;color:var(--text)}
.modal-card textarea{min-height:85px;resize:vertical}
.modal-card .primary{width:100%;margin-top:4px}

@media(max-width:650px){
  main{padding:10px 10px 25px}
  .topbar{padding:12px 11px}
  .topbar strong{font-size:19px}
  .topbar button{padding:8px 9px;font-size:12px}
  .areas-wrap{align-items:flex-start}
  .add-area{font-size:12px;padding:8px 9px}
  .area-header{align-items:stretch;flex-direction:column}
  .area-heading-group{align-items:flex-end;gap:9px}
  #areaTitle{font-size:22px}
  .area-header>.primary{width:100%}
}

@media(min-width:651px){
  .modal{align-items:center;padding:20px}
  .modal-card{border-radius:18px}
}