:root{
    --navy:#334A98; --navy-dark:#243A80; --navy-light:#EEF3FF;
    --orange:#F1A25F; --orange-dark:#D8843E;
    --bg:#F8F7F3; --card:#FFFFFF; --line:#E6E2D8;
    --text:#25221F; --text-muted:#746F68;
    --green:#2E8B57; --green-bg:#EAF7F0;
    --amber:#B8860B; --amber-bg:#FBF2DD;
    --red:#C0392B; --red-bg:#FCEDEC;
    --radius:14px;
  }
  *{box-sizing:border-box;}
  html,body{margin:0;height:100%;font-family:'Tahoma','Segoe UI',Arial,sans-serif;background:var(--bg);color:var(--text);}
  .hidden{display:none !important;}

  /* ---------- Splash ---------- */
  #splash{position:fixed;inset:0;z-index:200;background:linear-gradient(160deg,var(--navy-dark) 0%,var(--navy) 70%);display:flex;flex-direction:column;align-items:center;justify-content:center;transition:opacity .6s ease, visibility .6s ease;}
  #splash.fade-out{opacity:0;visibility:hidden;pointer-events:none;}
  #splash .ring{position:absolute;width:300px;height:300px;border-radius:50%;border:2px solid rgba(240,180,41,.28);animation:ringPulse 2.4s ease-out infinite;}
  #splash .ring.r2{width:380px;height:380px;animation-delay:.4s;}
  @keyframes ringPulse{0%{transform:scale(.6);opacity:0;}40%{opacity:.6;}100%{transform:scale(1.15);opacity:0;}}
  #splash .logo-badge{background:#fff;border-radius:20px;padding:16px 22px;box-shadow:0 20px 45px rgba(0,0,0,.25);opacity:0;transform:translateY(18px) scale(.92);animation:logoIn .8s cubic-bezier(.2,.8,.2,1) .15s forwards;}
  #splash .logo-badge img{height:50px;display:block;}
  @keyframes logoIn{to{opacity:1;transform:translateY(0) scale(1);}}
  #splash .splash-title{color:#fff;font-size:19px;font-weight:700;margin-top:20px;opacity:0;transform:translateY(10px);animation:fadeUp .7s ease .55s forwards;}
  @keyframes fadeUp{to{opacity:1;transform:translateY(0);}}
  #splash .dots{display:flex;gap:6px;margin-top:24px;opacity:0;animation:fadeUp .5s ease .95s forwards;}
  #splash .dots span{width:7px;height:7px;border-radius:50%;background:var(--orange);animation:dotBounce 1.1s ease-in-out infinite;}
  #splash .dots span:nth-child(2){animation-delay:.15s;}
  #splash .dots span:nth-child(3){animation-delay:.3s;}
  @keyframes dotBounce{0%,80%,100%{transform:translateY(0);opacity:.5;}40%{transform:translateY(-7px);opacity:1;}}

  #config-banner{background:var(--red-bg);color:var(--red);padding:10px 20px;font-size:13px;text-align:center;}

  /* ---------- Login screen ---------- */
  #login-screen{position:fixed;inset:0;z-index:150;background:var(--bg);display:flex;flex-direction:column;align-items:center;justify-content:center;padding:20px;}
  #login-screen .login-card{background:var(--card);border-radius:20px;padding:32px 28px;max-width:360px;width:100%;box-shadow:0 10px 40px rgba(20,22,42,.1);text-align:center;}
  #login-screen img.login-logo{height:44px;margin-bottom:18px;}
  #login-screen h2{font-size:17px;margin:0 0 22px;}
  .role-pick{display:flex;gap:12px;margin-bottom:6px;}
  .role-pick button{flex:1;padding:18px 10px;border-radius:14px;border:1px solid var(--line);background:#FCFBF8;cursor:pointer;font-family:inherit;font-size:14px;font-weight:600;color:var(--text);}
  .role-pick button .emoji{display:block;font-size:26px;margin-bottom:8px;}
  .role-pick button:hover{border-color:var(--navy);background:var(--navy-light);}
  .pin-dots{display:flex;justify-content:center;gap:14px;margin:20px 0;}
  .pin-dots span{width:16px;height:16px;border-radius:50%;border:2px solid var(--navy);}
  .pin-dots span.filled{background:var(--navy);}
  .pin-pad{display:grid;grid-template-columns:repeat(3,1fr);gap:10px;}
  .pin-pad button{padding:16px 0;border-radius:12px;border:1px solid var(--line);background:#FCFBF8;font-size:18px;cursor:pointer;font-family:inherit;color:var(--text);}
  .pin-pad button:active{background:var(--navy-light);}
  .pin-pad button.wide{grid-column:span 1;font-size:13px;color:var(--text-muted);}
  .login-back{margin-top:16px;background:none;border:none;color:var(--text-muted);font-size:12.5px;cursor:pointer;font-family:inherit;}
  .login-error{color:var(--red);font-size:12.5px;margin-top:10px;min-height:16px;}
  .bio-btn{margin-top:16px;width:100%;padding:11px;border-radius:10px;border:1px solid var(--navy);background:var(--navy-light);color:var(--navy);font-weight:600;font-size:13px;cursor:pointer;font-family:inherit;}
  .lock-screen .emoji-big{font-size:44px;margin-bottom:10px;}

  /* ---------- App shell ---------- */
  #app{opacity:0;transition:opacity .5s ease;}
  #app.visible{opacity:1;}
  header{background:var(--navy-dark);color:#fff;padding:14px 24px;display:flex;align-items:center;justify-content:space-between;box-shadow:0 2px 8px rgba(0,0,0,.15);position:sticky;top:0;z-index:10;flex-wrap:wrap;gap:10px;}
  .brand{display:flex;align-items:center;gap:12px;}
  .brand img{height:34px;background:#fff;border-radius:6px;padding:3px 6px;}
  .brand .titles h1{font-size:15px;margin:0;font-weight:600;}
  .brand .titles p{font-size:12px;margin:0;color:#D7E9DD;}
  .switcher{display:flex;background:rgba(255,255,255,.1);border-radius:10px;padding:3px;}
  .switcher button{border:none;background:transparent;color:#E3EFE7;padding:8px 16px;border-radius:8px;font-size:13px;cursor:pointer;font-family:inherit;white-space:nowrap;}
  .switcher button.active{background:var(--orange);color:var(--navy-dark);font-weight:600;}
  .logout-btn{background:rgba(255,255,255,.1);color:#fff;border:none;border-radius:8px;padding:8px 14px;font-size:12.5px;cursor:pointer;font-family:inherit;}

  main{max-width:1200px;margin:0 auto;padding:24px;}

  .stats{display:grid;grid-template-columns:repeat(4,1fr);gap:14px;margin-bottom:20px;}
  .stat-card{background:var(--card);border:1px solid var(--line);border-radius:var(--radius);padding:16px 18px;}
  .stat-card .num{font-size:26px;font-weight:700;color:var(--navy);}
  .stat-card .label{font-size:13px;color:var(--text-muted);margin-top:4px;}

  .panel{background:var(--card);border:1px solid var(--line);border-radius:var(--radius);padding:20px;margin-bottom:20px;}
  .panel h2{font-size:16px;margin:0 0 14px;font-weight:600;display:flex;align-items:center;justify-content:space-between;flex-wrap:wrap;gap:8px;}
  .panel h2 .count{color:var(--text-muted);font-weight:400;font-size:13px;}

  .add-order-form{display:grid;grid-template-columns:repeat(4,1fr);gap:10px;}
  .add-order-form .full{grid-column:1/-1;}
  .add-order-form label{display:block;font-size:12px;color:var(--text-muted);margin-bottom:4px;}
  .add-order-form input, .add-order-form select{width:100%;padding:9px 10px;border:1px solid var(--line);border-radius:8px;font-family:inherit;font-size:13px;background:#FCFBF8;}
  .btn{background:var(--navy);color:#fff;border:none;border-radius:8px;padding:10px 18px;font-size:13px;cursor:pointer;font-family:inherit;font-weight:600;}
  .btn:hover{background:var(--navy-dark);}
  .btn-ghost{background:transparent;color:var(--navy);border:1px solid var(--navy);}
  .btn-ghost.active{background:var(--navy);color:#fff;}

  .board{display:grid;grid-template-columns:repeat(3,1fr);gap:16px;}
  .col{background:#F0EEE8;border-radius:var(--radius);padding:14px;min-height:120px;}
  .col-head{display:flex;justify-content:space-between;align-items:center;margin-bottom:10px;}
  .col-head span.title{font-size:13px;font-weight:600;}
  .col-head span.badge{background:var(--card);border-radius:20px;padding:2px 9px;font-size:12px;color:var(--text-muted);}
  .order-card{background:var(--card);border:1px solid var(--line);border-radius:10px;padding:12px;margin-bottom:10px;}
  .order-card .top{display:flex;justify-content:space-between;align-items:flex-start;}
  .order-card .name{font-weight:600;font-size:13.5px;}
  .order-card .ref{font-size:11px;color:var(--text-muted);}
  .order-card .addr{font-size:12.5px;color:var(--text-muted);margin:6px 0;}
  .order-card .meta{display:flex;gap:8px;font-size:12px;color:var(--text-muted);margin-bottom:8px;flex-wrap:wrap;}
  .order-card .actions{display:flex;gap:6px;}
  .order-card .actions button{flex:1;font-size:11.5px;padding:6px 4px;border-radius:6px;border:1px solid var(--line);background:#fff;cursor:pointer;font-family:inherit;}
  .pill{font-size:11px;padding:2px 8px;border-radius:20px;font-weight:600;white-space:nowrap;}
  .pill.new{background:var(--red-bg);color:var(--red);}
  .pill.accepted{background:var(--amber-bg);color:var(--amber);}
  .pill.delivered{background:var(--green-bg);color:var(--green);}
  .note{font-size:11.5px;background:var(--navy-light);color:var(--navy);padding:4px 8px;border-radius:6px;margin-top:6px;}
  .empty-msg{text-align:center;color:var(--text-muted);font-size:13px;padding:30px 10px;}

  .report-filters{display:flex;gap:8px;margin-bottom:18px;flex-wrap:wrap;}
  .kpi-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:14px;margin-bottom:20px;}
  .charts-grid{display:grid;grid-template-columns:1.6fr 1fr;gap:16px;}
  .chart-box{background:var(--card);border:1px solid var(--line);border-radius:var(--radius);padding:18px;}
  .chart-box h3{font-size:14px;margin:0 0 12px;font-weight:600;}
  table.report-table{width:100%;border-collapse:collapse;font-size:13px;margin-top:8px;}
  table.report-table th{text-align:right;color:var(--text-muted);font-weight:600;padding:8px 6px;border-bottom:1px solid var(--line);font-size:12px;}
  table.report-table td{padding:9px 6px;border-bottom:1px solid var(--line);}

  .timeline{border-right:2px solid var(--line);margin-right:8px;padding-right:18px;}
  .timeline-item{position:relative;padding-bottom:18px;}
  .timeline-item::before{content:'';position:absolute;right:-24px;top:4px;width:10px;height:10px;border-radius:50%;background:var(--navy);}
  .timeline-item.delivered::before{background:var(--green);}
  .timeline-item .t-ref{font-weight:600;font-size:13px;}
  .timeline-item .t-meta{font-size:12px;color:var(--text-muted);margin-top:2px;}
  .timeline-item .t-times{display:flex;gap:14px;font-size:11.5px;color:var(--text-muted);margin-top:4px;}

  /* ---------- Driver-only mobile view ---------- */
  #driver-app{max-width:480px;margin:0 auto;}
  .status-header{background:var(--navy-dark);color:#fff;padding:18px 18px 16px;border-radius:0 0 20px 20px;}
  .status-header .greet{font-size:13px;color:#D7E9DD;}
  .status-header .driver-title{font-size:18px;font-weight:700;margin-top:2px;}
  .today-stats{display:flex;gap:10px;margin-top:14px;}
  .today-stats div{background:rgba(255,255,255,.08);border-radius:10px;padding:8px 10px;flex:1;text-align:center;}
  .today-stats .n{font-size:17px;font-weight:700;}
  .today-stats .l{font-size:10.5px;color:#D7E9DD;}
  .progress-bar{height:6px;background:rgba(255,255,255,.15);border-radius:6px;margin-top:12px;overflow:hidden;}
  .progress-bar .fill{height:100%;background:var(--orange);border-radius:6px;transition:width .4s ease;}
  .list-body{padding:16px;}
  .drv-card{background:var(--card);border:1px solid var(--line);border-radius:16px;padding:16px;margin-bottom:14px;}
  .drv-card .row1{display:flex;justify-content:space-between;align-items:flex-start;}
  .drv-card .cname{font-weight:700;font-size:16px;}
  .drv-card .caddr{font-size:13.5px;color:var(--text-muted);margin-top:5px;line-height:1.6;}
  .drv-card .cinfo{display:flex;gap:8px;margin-top:10px;font-size:12.5px;color:var(--text-muted);flex-wrap:wrap;}
  .drv-card .cta-row{display:flex;gap:8px;margin-top:14px;}
  .drv-card .cta-row a, .drv-card .cta-row button{flex:1;text-align:center;padding:11px 6px;border-radius:10px;font-size:13.5px;text-decoration:none;border:none;cursor:pointer;font-family:inherit;font-weight:600;}
  .cta-map{background:var(--navy-light);color:var(--navy);}
  .cta-call{background:var(--green-bg);color:var(--green);}
  .cta-status{background:var(--orange);color:#fff;}
  .cta-status.done{background:var(--green);}

  /* ---------- Accept-order time modal ---------- */
  #time-modal-overlay{position:fixed;inset:0;background:rgba(20,22,42,.45);z-index:300;display:flex;align-items:flex-end;justify-content:center;}
  #time-modal-overlay.hidden{display:none;}
  .time-modal{background:var(--card);width:100%;max-width:480px;border-radius:22px 22px 0 0;padding:22px 20px 26px;box-shadow:0 -10px 40px rgba(0,0,0,.2);animation:slideUp .25s ease;}
  @keyframes slideUp{from{transform:translateY(30px);opacity:0;}to{transform:translateY(0);opacity:1;}}
  .time-modal h3{margin:0 0 4px;font-size:16px;}
  .time-modal .modal-sub{font-size:12.5px;color:var(--text-muted);margin-bottom:16px;}
  .time-modal .customer-note{background:var(--navy-light);color:var(--navy);font-size:12.5px;padding:8px 12px;border-radius:10px;margin-bottom:16px;}
  .quick-times{display:grid;grid-template-columns:repeat(2,1fr);gap:8px;margin-bottom:16px;}
  .quick-times button{padding:12px 6px;border-radius:10px;border:1px solid var(--line);background:#FCFBF8;font-size:13px;font-family:inherit;cursor:pointer;color:var(--text);}
  .quick-times button.selected{background:var(--navy);color:#fff;border-color:var(--navy);}
  .exact-time-row{display:flex;align-items:center;gap:10px;margin-bottom:20px;}
  .exact-time-row label{font-size:12.5px;color:var(--text-muted);white-space:nowrap;}
  .exact-time-row input[type=time]{flex:1;padding:10px;border-radius:10px;border:1px solid var(--line);font-family:inherit;font-size:15px;background:#FCFBF8;}
  .time-modal-actions{display:flex;gap:10px;}
  .time-modal-actions button{flex:1;padding:12px;border-radius:10px;border:none;font-family:inherit;font-size:14px;font-weight:600;cursor:pointer;}
  .time-modal-actions .btn-cancel{background:#F0EEE8;color:var(--text-muted);}
  .time-modal-actions .btn-confirm{background:var(--orange);color:#fff;}

  /* ---------- Toast notifications ---------- */
  #toast-container{position:fixed;top:18px;left:50%;transform:translateX(-50%);z-index:400;display:flex;flex-direction:column;gap:8px;align-items:center;width:100%;max-width:420px;padding:0 16px;}
  .toast{width:100%;background:var(--navy-dark);color:#fff;padding:13px 16px;border-radius:12px;font-size:13.5px;box-shadow:0 8px 24px rgba(0,0,0,.2);display:flex;align-items:center;gap:10px;animation:toastIn .25s ease;}
  .toast.error{background:var(--red);}
  .toast.success{background:var(--green);}
  .toast .toast-icon{font-size:16px;flex-shrink:0;}
  @keyframes toastIn{from{opacity:0;transform:translateY(-14px);}to{opacity:1;transform:translateY(0);}}
  .toast.fade-out{animation:toastOut .25s ease forwards;}
  @keyframes toastOut{to{opacity:0;transform:translateY(-10px);}}

  /* ---------- Reusable confirm modal ---------- */
  #confirm-modal-overlay{position:fixed;inset:0;background:rgba(20,22,42,.45);z-index:350;display:flex;align-items:center;justify-content:center;padding:20px;}
  #confirm-modal-overlay.hidden{display:none;}
  .confirm-modal{background:var(--card);border-radius:18px;padding:26px 24px;max-width:380px;width:100%;text-align:center;box-shadow:0 20px 50px rgba(0,0,0,.2);animation:slideUp .2s ease;}
  .confirm-modal .confirm-icon{font-size:34px;margin-bottom:10px;}
  .confirm-modal h3{margin:0 0 8px;font-size:16px;}
  .confirm-modal p{margin:0 0 20px;font-size:13.5px;color:var(--text-muted);line-height:1.6;}
  .confirm-modal-actions{display:flex;gap:10px;}
  .confirm-modal-actions button{flex:1;padding:12px;border-radius:10px;border:none;font-family:inherit;font-size:14px;font-weight:600;cursor:pointer;}
  .confirm-modal-actions .btn-cancel{background:#F0EEE8;color:var(--text-muted);}
  .confirm-modal-actions .btn-ok{background:var(--navy);color:#fff;}
  .confirm-modal-actions .btn-ok.danger{background:var(--red);}

  footer{text-align:center;color:var(--text-muted);font-size:12px;padding:20px;}


  /* ---------- تطوير v21: البحث والتحديث الحي ---------- */
  .live-toolbar{
    display:flex;align-items:center;justify-content:space-between;gap:10px;
    flex-wrap:wrap;margin-bottom:14px;padding:10px 12px;
    border:1px solid var(--line);border-radius:12px;background:#FCFBF8;
  }
  .live-toolbar .filters{display:flex;gap:8px;flex-wrap:wrap;align-items:center;flex:1;}
  .live-toolbar input,.live-toolbar select{
    min-height:38px;padding:8px 10px;border:1px solid var(--line);border-radius:9px;
    background:#fff;font-family:inherit;font-size:12.5px;color:var(--text);
  }
  .live-toolbar input{min-width:220px;flex:1;}
  .refresh-area{display:flex;align-items:center;gap:8px;white-space:nowrap;}
  .refresh-btn{
    border:1px solid var(--navy);background:#fff;color:var(--navy);border-radius:9px;
    padding:8px 12px;cursor:pointer;font-family:inherit;font-size:12.5px;font-weight:600;
  }
  .refresh-btn:disabled{opacity:.55;cursor:not-allowed;}
  .live-dot{width:8px;height:8px;border-radius:50%;background:var(--green);display:inline-block;box-shadow:0 0 0 4px rgba(46,139,87,.12);}
  .last-update{font-size:11.5px;color:var(--text-muted);}
  .order-time{font-size:11px;color:var(--text-muted);margin-top:5px;}
  .source-badge{
    display:inline-flex;align-items:center;gap:4px;font-size:10.5px;padding:2px 7px;
    border-radius:999px;background:#F0EEE8;color:var(--text-muted);margin-inline-start:5px;
  }
  .empty-search{padding:24px 8px;text-align:center;color:var(--text-muted);font-size:12.5px;}
  .saving{opacity:.7;pointer-events:none;}

  @media (max-width:900px){
    .stats{grid-template-columns:repeat(2,1fr);}
    .kpi-grid{grid-template-columns:repeat(1,1fr);}
    .board{grid-template-columns:1fr;}
    .add-order-form{grid-template-columns:1fr 1fr;}
    .charts-grid{grid-template-columns:1fr;}
    .live-toolbar{align-items:stretch;}
    .live-toolbar .filters{width:100%;}
    .live-toolbar input{min-width:100%;width:100%;}
    .live-toolbar select{flex:1;}
    .refresh-area{width:100%;justify-content:space-between;}
  }

/* ===== Al Masayel premium visual system — 2026 final ===== */
:root{--navy:#1558a6;--navy-dark:#0e4285;--navy-light:#eaf3ff;--orange:#f39a43;--orange-soft:#fff2e6;--bg:#f4f7fb;--card:#fff;--border:#e4eaf2;--text:#10264b;--text-muted:#6c7890;--green:#18a66a;--red:#e34b55;--shadow:0 8px 28px rgba(18,62,116,.08)}
body{background:linear-gradient(180deg,#f8fbff 0,#f4f7fb 42%,#f7f9fc 100%);color:var(--text)}
#splash{background:linear-gradient(145deg,#fff 0%,#f7fbff 60%,#edf5ff 100%)}
#splash:after{content:"";position:absolute;left:0;right:0;bottom:0;height:130px;background:url('skyline.svg') bottom/100% 100% no-repeat}
#splash .ring{border-color:rgba(243,154,67,.28)} #splash .ring.r2{border-color:rgba(21,88,166,.12)}
#splash .logo-badge{padding:8px 14px;border:1px solid #e9eef6;box-shadow:0 18px 60px rgba(21,88,166,.13)}
#splash .logo-badge img{height:72px}.splash-title,#splash .splash-title{color:#154f9f!important;font-weight:800!important;font-size:22px!important}
#login-screen{background:linear-gradient(135deg,#fff 0%,#f6faff 58%,#edf5ff 100%);overflow:hidden}
#login-screen:after{content:"";position:absolute;bottom:0;left:0;right:0;height:125px;background:url('skyline.svg') bottom/100% 100% no-repeat;pointer-events:none}
#login-screen .login-card{position:relative;z-index:2;max-width:390px;border:1px solid #e5edf7;border-radius:26px;padding:30px 30px 34px;box-shadow:0 24px 70px rgba(15,67,133,.13)}
#login-screen img.login-logo{height:auto;width:290px;max-width:100%;margin-bottom:10px}
.role-pick button,.bio-btn,.btn{background:linear-gradient(135deg,#1764b4,#0e4c96)!important;color:#fff!important;border:0!important;box-shadow:0 8px 20px rgba(21,88,166,.18)}
.role-pick button:hover,.btn:hover{transform:translateY(-1px)}
.pin-pad button{border:1px solid #dce6f3!important;background:#f8fbff!important;color:#174e94!important}.pin-pad button:active{background:#edf5ff!important}
/* desktop app becomes the same left-navigation visual language as the approved mockup */
#admin-app{min-height:100vh}
#admin-app header{position:fixed;left:0;top:0;bottom:0;width:218px;height:100vh;padding:18px 14px;background:linear-gradient(180deg,#0d4b96 0%,#123d7a 100%);display:flex;flex-direction:column;align-items:stretch;justify-content:flex-start;gap:18px;z-index:20;box-shadow:6px 0 28px rgba(13,61,122,.12);border-radius:0}
#admin-app header .brand{display:block;background:#fff;border-radius:16px;padding:8px;text-align:center;box-shadow:0 8px 20px rgba(0,0,0,.12)}
#admin-app header .brand img{width:100%;height:auto;max-height:none}
#admin-app header .titles{display:none}
#admin-app header .switcher{display:flex;flex-direction:column;gap:8px;width:100%}
#admin-app header .switcher button{width:100%;text-align:right;border:0;background:transparent;color:#eaf3ff;border-radius:10px;padding:12px 14px;font-weight:700;font-family:inherit;transition:.2s}
#admin-app header .switcher button:before{display:inline-block;width:25px;margin-left:8px;text-align:center}
#btn-dispatcher:before{content:'▦'}#btn-driveract:before{content:'◉'}#btn-reports:before{content:'▥'}
#admin-app header .switcher button.active,#admin-app header .switcher button:hover{background:linear-gradient(135deg,#f6a24f,#f29135);color:#fff;box-shadow:0 8px 18px rgba(243,154,67,.25)}
#admin-app header .logout-btn{margin-top:auto;background:rgba(255,255,255,.1);border:1px solid rgba(255,255,255,.16);padding:11px}
#admin-app main{margin-left:218px;max-width:none;padding:28px 30px 40px}
#admin-app main:before{content:'الرئيسية';display:block;font-size:26px;font-weight:800;color:#123f7e;margin-bottom:4px}
#admin-app main:after{content:'نظرة عامة على نشاط خدمة غاز المسايل';display:block;position:absolute;top:66px;color:#78859b;font-size:12px}
.stats,.kpi-grid{gap:14px}.stat-card{border:1px solid #e6edf6;border-radius:15px;box-shadow:var(--shadow);padding:18px;background:#fff;position:relative;overflow:hidden}
.stat-card:after{content:'';position:absolute;left:0;top:0;width:4px;height:100%;background:#1764b4;opacity:.75}.stat-card:nth-child(2):after{background:#3b82f6}.stat-card:nth-child(3):after{background:#f39a43}.stat-card:nth-child(4):after{background:#e34b55}
.stat-card .num{color:#102f64!important;font-size:27px!important}.stat-card .label{color:#6f7c92!important}
.panel,.chart-box{border:1px solid #e4ebf5;border-radius:16px;box-shadow:var(--shadow);background:#fff}.panel h2,.chart-box h3{color:#103e7b}
.add-order-form input,.add-order-form select,.live-toolbar input,.live-toolbar select{border:1px solid #dce5f0!important;background:#fbfdff!important;border-radius:9px!important;min-height:42px}.add-order-form input:focus,.add-order-form select:focus,.live-toolbar input:focus{border-color:#4c8fd2!important;box-shadow:0 0 0 3px rgba(23,100,180,.09)!important}
.live-toolbar{background:#f8fbff;border:1px solid #e5edf7;border-radius:12px;padding:10px}.refresh-btn{background:#fff!important;color:#1558a6!important;border:1px solid #d7e3f1!important}
.board{gap:14px}.col{background:#f8faff!important;border:1px solid #e7edf6!important;border-radius:14px!important}.col-head{border-bottom:1px solid #e8edf5!important}
.order-card{border:1px solid #e5ebf3!important;border-radius:13px!important;box-shadow:0 5px 16px rgba(20,64,116,.06)!important}
footer{margin-left:218px;background:transparent!important;color:#8a95a8!important;border-top:1px solid #e5eaf1;padding:18px}
/* Driver: premium mobile card treatment */
#driver-app{background:#f4f7fb;min-height:100vh;padding-bottom:30px}.status-header{background:linear-gradient(145deg,#0e4a91,#1764b4);border-radius:0 0 28px 28px;padding:22px 20px 24px;box-shadow:0 12px 30px rgba(21,88,166,.18);position:relative;overflow:hidden}.status-header:after{content:'';position:absolute;left:-25px;bottom:-25px;width:120px;height:120px;background:url('brand-mark.svg') center/contain no-repeat;opacity:.08}.today-stats>div{background:rgba(255,255,255,.1);border:1px solid rgba(255,255,255,.12);border-radius:12px;padding:10px}.list-body{padding:14px}.driver-card{border:1px solid #e3eaf4!important;border-radius:16px!important;box-shadow:var(--shadow)!important;background:#fff!important}
.time-modal,.confirm-modal{border-radius:20px!important;border:1px solid #e4ebf5!important;box-shadow:0 25px 80px rgba(10,44,90,.2)!important}
@media(max-width:800px){#admin-app header{position:sticky;width:auto;height:auto;left:auto;bottom:auto;padding:10px 12px;flex-direction:row;align-items:center;gap:8px;border-radius:0}#admin-app header .brand{width:118px;flex:0 0 118px;padding:3px}#admin-app header .switcher{flex-direction:row;overflow:auto;gap:5px}#admin-app header .switcher button{white-space:nowrap;text-align:center;padding:9px 10px;font-size:11px}#admin-app header .logout-btn{margin-top:0;padding:8px;font-size:0}#admin-app header .logout-btn:after{content:'↪';font-size:18px}#admin-app main{margin-left:0;padding:18px 12px 28px}#admin-app main:before{font-size:21px}#admin-app main:after{display:none}footer{margin-left:0}.stats{grid-template-columns:repeat(2,1fr)!important}.board{grid-template-columns:1fr!important}}


/* ===== v23 — Al Masayel visual identity + refined driver experience ===== */
:root{
  --brand-blue:#174EA6;
  --brand-blue-deep:#123E83;
  --brand-orange:#F5A052;
  --brand-orange-soft:#FFF2E5;
  --surface:#FFFFFF;
  --page:#F4F7FC;
  --line:#E3EAF4;
}
.coop-signature{
  display:flex;align-items:center;justify-content:center;gap:8px;
  margin-top:8px;padding:7px 10px;border:1px solid var(--line);
  border-radius:10px;background:#fff;color:#174EA6;font-size:10px;font-weight:700
}
.coop-signature img{width:82px;height:34px;object-fit:contain;background:#fff}
#admin-app header .coop-signature{margin:7px 0 2px;padding:5px;background:rgba(255,255,255,.97)}
#admin-app header .coop-signature img{width:100%;height:34px}
.driver-brandline{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-bottom:13px}
.driver-brandline .driver-service-logo{width:150px;max-width:48%;filter:drop-shadow(0 5px 12px rgba(0,0,0,.08))}
.driver-brandline .driver-coop-logo{width:116px;max-width:40%;height:42px;object-fit:contain;background:#fff;border-radius:9px;padding:4px}
.driver-day-section{margin:14px 0 22px}
.driver-day-title{display:flex;align-items:center;justify-content:space-between;margin:0 2px 10px}
.driver-day-title h3{margin:0;color:#123E83;font-size:17px}
.driver-day-title .day-count{font-size:12px;font-weight:700;color:#174EA6;background:#EAF2FF;padding:5px 9px;border-radius:999px}
.driver-day-section.tomorrow .driver-day-title .day-count{background:var(--brand-orange-soft);color:#B96617}
.driver-empty{background:#fff;border:1px dashed #CCD8EA;border-radius:16px;padding:26px 18px;text-align:center;color:#7B8AA3}
.drv-card{position:relative;overflow:hidden;margin-bottom:11px!important}
.drv-card:before{content:"";position:absolute;right:0;top:0;bottom:0;width:4px;background:var(--brand-blue)}
.drv-card[data-day="tomorrow"]:before{background:var(--brand-orange)}
.drv-card .order-priority{font-size:11px;color:#7B8AA3;margin-top:3px}
.driver-section-divider{height:1px;background:#E7EDF6;margin:5px 0 18px}
#driver-app .list-body{padding:14px 14px 30px}
#driver-app .status-header{background:linear-gradient(145deg,#123E83,#1E63B8)}
#driver-app .status-header .greet{opacity:.9}
#driver-app .driver-title{font-size:21px}
#driver-app .today-stats{gap:8px}
#driver-app .today-stats>div{backdrop-filter:blur(5px)}
@media(max-width:520px){
  .driver-brandline .driver-service-logo{width:142px}
  .driver-brandline .driver-coop-logo{width:102px;height:38px}
  .driver-day-title h3{font-size:16px}
}


/* ===== v24 — Custom date reports ===== */
.report-date-card{
  background:#fff;border:1px solid #E3EAF4;border-radius:16px;padding:16px 18px;
  box-shadow:0 8px 28px rgba(18,62,116,.06);margin-bottom:16px
}
.report-date-head{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-bottom:12px}
.report-date-head h3{margin:0;color:#123E83;font-size:15px}
.report-period-label{font-size:12px;color:#66758E;background:#F4F7FC;border-radius:999px;padding:6px 10px}
.report-date-controls{display:grid;grid-template-columns:minmax(150px,1fr) minmax(150px,1fr) auto;gap:10px;align-items:end}
.report-date-field label{display:block;font-size:11px;font-weight:700;color:#66758E;margin-bottom:6px}
.report-date-field input{
  width:100%;box-sizing:border-box;border:1px solid #D8E2EF;border-radius:10px;padding:10px 11px;
  background:#FBFDFF;color:#123E83;font-family:inherit;outline:none
}
.report-date-field input:focus{border-color:#174EA6;box-shadow:0 0 0 3px rgba(23,78,166,.08)}
.report-apply{
  border:0;border-radius:10px;padding:11px 18px;background:linear-gradient(135deg,#174EA6,#123E83);
  color:#fff;font-family:inherit;font-weight:800;cursor:pointer;white-space:nowrap
}
.report-apply:disabled{opacity:.55;cursor:not-allowed}
.report-quick{display:flex;gap:7px;flex-wrap:wrap;margin-top:12px}
.report-quick button{
  border:1px solid #DDE6F2;background:#fff;color:#174EA6;border-radius:999px;padding:6px 11px;
  font-family:inherit;font-size:11px;font-weight:700;cursor:pointer
}
.report-quick button.active{background:#FFF2E5;border-color:#F5C18D;color:#B96617}
.report-error{display:none;color:#C0392B;background:#FFF0F0;border:1px solid #F3CACA;border-radius:9px;padding:8px 10px;margin-top:10px;font-size:11px}
@media(max-width:720px){
  .report-date-head{align-items:flex-start;flex-direction:column}
  .report-date-controls{grid-template-columns:1fr 1fr}
  .report-apply{grid-column:1/-1}
}
@media(max-width:480px){.report-date-controls{grid-template-columns:1fr}.report-apply{grid-column:auto}}


/* ===== v25 — Driver daily workspace ===== */
.driver-tabs{display:grid;grid-template-columns:repeat(3,1fr);gap:8px;padding:12px 14px 2px;position:sticky;top:0;z-index:20;background:rgba(244,247,251,.96);backdrop-filter:blur(10px)}
.driver-tab{border:1px solid #dbe5f2;background:#fff;color:#52657f;border-radius:13px;padding:10px 5px;font-weight:800;cursor:pointer;box-shadow:0 3px 10px rgba(20,62,131,.04)}
.driver-tab.active{background:#123E83;color:#fff;border-color:#123E83;box-shadow:0 7px 18px rgba(18,62,131,.18)}
.driver-tab .tab-count{display:inline-flex;min-width:22px;height:22px;align-items:center;justify-content:center;border-radius:999px;background:#edf3fb;color:#123E83;margin-inline-start:4px;font-size:11px}
.driver-tab.active .tab-count{background:rgba(255,255,255,.18);color:#fff}
.driver-tab.tomorrow.active{background:#F39A4A;border-color:#F39A4A}.driver-tab.done.active{background:#15945d;border-color:#15945d}
.driver-view-heading{display:flex;justify-content:space-between;align-items:end;padding:8px 2px 11px}.driver-view-heading h3{margin:0;color:#123E83;font-size:18px}.driver-view-heading small{color:#7b8aa3}
.driver-section-hidden{display:none!important}.drv-card{position:relative;overflow:hidden}.drv-card[data-status="accepted"]{border-inline-start:4px solid #F39A4A!important}.drv-card[data-status="new"]{border-inline-start:4px solid #2b67ba!important}.drv-card[data-status="delivered"]{border-inline-start:4px solid #15945d!important;opacity:.92}
.order-priority{font-weight:800!important;color:#123E83!important;margin:3px 0 5px}.drv-card[data-status="accepted"] .order-priority{color:#b96617!important}
@media(max-width:430px){.driver-tabs{gap:6px;padding-inline:10px}.driver-tab{font-size:12px;padding:9px 3px}}

/* ===== v26 engineering hardening ===== */
#network-status{
  position:fixed;left:50%;top:10px;transform:translateX(-50%);
  z-index:9999;padding:8px 14px;border-radius:999px;font-size:12px;font-weight:800;
  box-shadow:0 8px 24px rgba(0,0,0,.12);display:none
}
#network-status.offline{display:block;background:#8B1E1E;color:#fff}
#network-status.online{display:block;background:#176B45;color:#fff}
button:focus-visible,a:focus-visible,input:focus-visible,select:focus-visible{
  outline:3px solid rgba(241,162,95,.48);outline-offset:2px
}
[aria-busy="true"]{cursor:progress}
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important;scroll-behavior:auto!important}
}


/* ===== Driver UX v27 — task-first Arabic delivery experience ===== */
#driver-app{font-family:'Tahoma','Segoe UI',Arial,sans-serif;color:#17233b}
#driver-app .status-header{padding:20px 18px 22px;border-radius:0 0 26px 26px;background:linear-gradient(145deg,#103b78,#1b5ca9);box-shadow:0 12px 30px rgba(17,61,122,.18)}
#driver-app .driver-title{font-size:22px!important;font-weight:800;letter-spacing:-.35px}
#driver-app .greet{font-size:12.5px!important}
#driver-app .today-stats .n{font-size:19px;font-weight:900}
#driver-app .today-stats .l{font-size:11px}
.driver-tabs{padding-top:14px}
.driver-tab{min-height:44px;font-size:13px;transition:transform .15s ease,box-shadow .15s ease}
.driver-tab:active{transform:scale(.98)}
.driver-view-heading{padding:13px 2px 12px;align-items:center}
.driver-view-heading h3{font-size:19px;font-weight:900;letter-spacing:-.25px}
.driver-view-heading small{display:block;margin-top:3px;font-size:11.5px}
.driver-view-heading .day-count{font-size:11px;font-weight:800;color:#174EA6;background:#eaf2ff;border-radius:999px;padding:6px 9px}

.drv-card{padding:15px!important;margin-bottom:12px!important;border-radius:17px!important;box-shadow:0 5px 18px rgba(18,62,131,.065)!important}
.drv-card .cname{font-size:16px;font-weight:900;color:#132b50}
.drv-card .order-priority{font-size:11.5px;font-weight:700;color:#c56b1d;margin-top:3px}
.drv-card[data-status="in_transit"]{border:2px solid #2b67ba!important;border-inline-start:5px solid #2b67ba!important}
.pill.in_transit{background:#e6f0ff;color:#1456a0}
.address-focus{display:flex;gap:6px;align-items:flex-start;background:#f7f9fc;border:1px solid #e8eef6;border-radius:11px;padding:10px 11px;margin-top:10px;font-size:13.5px;font-weight:700;line-height:1.7;color:#334866}
.drv-card .cinfo{margin-top:9px}
.drv-card .cinfo span{background:#f6f8fb;border-radius:8px;padding:5px 7px;color:#52657f}
.driver-meta{font-size:10.5px;color:#8996a9;margin-top:7px}
.customer-note-driver{margin-top:9px!important;padding:9px 10px!important;line-height:1.55!important}
.customer-note-driver b{font-size:10.5px;opacity:.75}
.quick-actions{display:grid;grid-template-columns:1fr 1fr;gap:8px;margin-top:13px}
.quick-actions a{display:flex;align-items:center;justify-content:center;min-height:43px;border-radius:11px;text-decoration:none;font-size:13px;font-weight:800}
.primary-row{margin-top:8px}
.primary-row button{width:100%;min-height:48px;border:0;border-radius:12px;font-family:inherit;font-size:14px;font-weight:900;cursor:pointer}
.start-delivery{background:#174EA6!important;color:#fff!important;box-shadow:0 7px 16px rgba(23,78,166,.2)}
.primary-action.done{background:#0c9b62!important}
.delivery-failed{display:block;width:100%;margin-top:8px;background:transparent;border:0;color:#9d3440;font-family:inherit;font-size:11.5px;font-weight:700;padding:8px;cursor:pointer}

.next-task-card{position:relative;border:2px solid #174EA6!important;padding-top:17px!important;box-shadow:0 12px 30px rgba(23,78,166,.14)!important}
.next-task-card:before{content:'';position:absolute;inset-inline-start:0;top:0;bottom:0;width:5px;background:#f5a052;border-radius:18px 0 0 18px}
.next-task-label{display:flex;align-items:center;justify-content:space-between;margin:-5px 0 12px;padding-bottom:10px;border-bottom:1px solid #edf1f7}
.next-task-label span{font-size:12px;font-weight:900;color:#174EA6}
.next-task-label b{font-size:10px;color:#b5631c;background:#fff1e4;padding:5px 8px;border-radius:999px}
.remaining-heading{display:flex;align-items:center;justify-content:space-between;margin:20px 2px 9px}
.remaining-heading b{font-size:14px;color:#123e83}
.remaining-heading span{font-size:11px;color:#7b8aa3;background:#eef3f9;padding:5px 8px;border-radius:999px}
.driver-empty{display:flex;flex-direction:column;gap:7px}
.driver-empty b{font-size:15px;color:#24456f}.driver-empty span{font-size:12px}
@media(max-width:390px){
  #driver-app .status-header{padding-inline:14px}
  #driver-app .list-body{padding-inline:10px}
  .drv-card{padding:13px!important}
  .driver-view-heading h3{font-size:17px}
}


/* ===== Driver sort controls v28 ===== */
.driver-sortbar{
  display:flex;align-items:center;justify-content:space-between;gap:10px;
  margin:0 0 13px;padding:7px 8px 7px 11px;background:#fff;
  border:1px solid #e3eaf4;border-radius:13px;box-shadow:0 3px 12px rgba(18,62,131,.045)
}
.driver-sortbar .sort-label{font-size:11px;font-weight:800;color:#6c7e97;white-space:nowrap}
.sort-options{display:grid;grid-template-columns:repeat(3,1fr);gap:4px;flex:1;max-width:290px;background:#f1f5fa;border-radius:9px;padding:3px}
.sort-options button{
  border:0;background:transparent;border-radius:7px;padding:7px 5px;font-family:inherit;
  font-size:11.5px;font-weight:800;color:#64758d;cursor:pointer;transition:.15s ease
}
.sort-options button.active{background:#174EA6;color:#fff;box-shadow:0 3px 8px rgba(23,78,166,.18)}
.sort-options button:active{transform:scale(.97)}
.block-group-heading{
  display:flex;align-items:center;justify-content:space-between;margin:18px 2px 9px;
  padding:9px 11px;background:linear-gradient(90deg,#eef5ff,#f8fbff);
  border-inline-start:4px solid #174EA6;border-radius:10px
}
.block-group-heading div{display:flex;align-items:baseline;gap:7px}
.block-group-heading span{font-size:11px;color:#71839c;font-weight:700}
.block-group-heading b{font-size:18px;color:#123e83;font-weight:900}
.block-group-heading em{font-style:normal;font-size:10.5px;font-weight:800;color:#b25f18;background:#fff0e2;padding:4px 7px;border-radius:999px}
@media(max-width:390px){
  .driver-sortbar{gap:6px;padding-inline:7px}
  .driver-sortbar .sort-label{font-size:10px}
  .sort-options button{font-size:10.5px;padding-inline:3px}
}

/* ===== Gas Almasayel brand assets v29 ===== */
.new-driver-brand{
  width:58px;height:58px;object-fit:contain;background:#fff;border-radius:15px;
  padding:5px;box-shadow:0 7px 18px rgba(0,0,0,.14);float:right;margin:0 0 8px 10px
}
.new-gas-wordmark{
  display:block;width:calc(100% - 18px);max-height:82px;object-fit:contain;
  margin:8px auto 12px;background:#fff;border-radius:12px;padding:6px;box-sizing:border-box
}
@media(max-width:480px){.new-driver-brand{width:52px;height:52px;border-radius:13px}}


/* ===== v30 unified Gas Al-Masayel identity ===== */
#splash .logo-badge{padding:18px 24px;border-radius:22px}
#splash .logo-badge img{height:auto;width:min(310px,72vw);max-height:92px;object-fit:contain}
#login-screen img.login-logo{width:300px;max-width:92%;height:auto;max-height:100px;object-fit:contain;margin-bottom:12px}
.role-pick button{display:flex;flex-direction:column;align-items:center;justify-content:center;min-height:112px}
.role-pick .role-icon-img{display:block;width:56px;height:56px;object-fit:contain;margin-bottom:8px}
.role-pick .admin-role-icon{display:flex;width:52px;height:52px;border-radius:15px;align-items:center;justify-content:center;margin-bottom:8px;background:var(--navy-light);color:var(--navy);font-size:23px;font-weight:800}
#admin-app header .brand>img{width:176px;height:50px;object-fit:contain;padding:4px 8px}
.driver-brandline{display:grid;grid-template-columns:1fr 54px 108px;align-items:center;gap:10px}
.driver-brandline .driver-service-logo{width:100%;max-width:170px;height:54px;object-fit:contain;background:#fff;border-radius:10px;padding:5px 7px;filter:none}
.driver-brandline .driver-brand-icon{width:50px;height:50px;object-fit:contain;background:#fff;border-radius:12px;padding:4px}
.driver-brandline .driver-coop-logo{width:108px;max-width:none;height:46px;object-fit:contain}
@media(max-width:520px){.driver-brandline{grid-template-columns:1fr 48px 96px}.driver-brandline .driver-service-logo{height:50px}.driver-brandline .driver-brand-icon{width:46px;height:46px}.driver-brandline .driver-coop-logo{width:96px;height:42px}}

/* ===== Final identity cleanup v32 ===== */
.role-pick .admin-role-img{width:56px!important;height:56px!important;object-fit:contain!important;margin-bottom:8px!important;border-radius:15px!important;padding:0!important;background:transparent!important}
.driver-brandline{display:grid!important;grid-template-columns:minmax(0,1fr) 112px!important;align-items:center!important;gap:12px!important;margin-bottom:13px!important}
.driver-brandline .driver-service-logo{width:100%!important;max-width:220px!important;height:58px!important;object-fit:contain!important;background:#fff!important;border-radius:11px!important;padding:5px 8px!important;filter:none!important}
.driver-brandline .driver-coop-logo{width:112px!important;max-width:none!important;height:48px!important;object-fit:contain!important;background:#fff!important;border-radius:10px!important;padding:4px!important}
.driver-brandline .driver-brand-icon,.new-driver-brand,.new-gas-wordmark{display:none!important}
@media(max-width:520px){.driver-brandline{grid-template-columns:minmax(0,1fr) 96px!important;gap:8px!important}.driver-brandline .driver-service-logo{height:52px!important}.driver-brandline .driver-coop-logo{width:96px!important;height:42px!important}}


/* ===== Driver card professional polish v33 ===== */
.role-pick .role-icon-img{background:#fff!important;border-radius:14px!important;padding:7px!important;box-shadow:0 4px 14px rgba(10,48,105,.14)!important;width:60px!important;height:60px!important}
.drv-ui-icon{width:19px;height:19px;display:inline-block;flex:0 0 auto}
.professional-address{display:flex!important;align-items:center!important;gap:9px!important;background:#f7faff!important;border:1px solid #e2eaf6!important;border-radius:11px!important;padding:11px 12px!important;margin-top:11px!important;color:#173a70!important;font-weight:700!important}
.professional-address .drv-ui-icon{color:#e94d57;width:18px;height:18px}
.driver-order-facts{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:7px;margin-top:10px}
.driver-fact{min-width:0;display:flex;align-items:center;justify-content:center;gap:7px;background:#fff;border:1px solid #e5ebf3;border-radius:11px;padding:9px 7px;color:#174f9d}
.driver-fact>div{display:flex;flex-direction:column;min-width:0}.driver-fact small{font-size:10px;color:#7a8799;line-height:1.3;white-space:nowrap}.driver-fact strong{font-size:13px;color:#18365f;margin-top:2px;white-space:nowrap}
.driver-fact.quantity-fact .drv-ui-icon{color:#1764b4}.driver-fact.quantity-fact strong{font-size:17px;color:#123e83}
.professional-meta{display:flex!important;align-items:center!important;gap:6px!important;margin-top:8px!important;color:#8490a1!important;font-size:10.5px!important}.professional-meta .drv-ui-icon{width:14px;height:14px}
.professional-note{display:flex!important;align-items:flex-start!important;gap:9px!important;padding:10px 11px!important;margin-top:9px!important;border-radius:10px!important;background:#eef5ff!important;color:#234b84!important}.professional-note .drv-ui-icon{margin-top:1px;width:17px;height:17px}.professional-note div{display:flex;flex-direction:column;gap:2px}.professional-note b{font-size:10.5px}.professional-note span{font-size:12px;color:#405b7d}
.professional-actions a{display:flex!important;align-items:center!important;justify-content:center!important;gap:7px!important}.professional-actions .drv-ui-icon{width:18px;height:18px}
.next-task-card{box-shadow:0 8px 24px rgba(18,62,131,.09)!important}.next-task-card .row1{padding-bottom:3px}
@media(max-width:380px){.driver-order-facts{grid-template-columns:repeat(2,minmax(0,1fr))}.driver-fact:last-child:nth-child(3){grid-column:1/-1}}