/* CYC Ride Role UI Theme V1
   Unifies Master / Operations / Execution / Driver visual language with Passenger UI.
   Functional structure, permissions, ids and JS hooks are intentionally unchanged. */
body.role-ui-passenger-theme{
  --role-bg:#fbf8ff;
  --role-bg-2:#f2edff;
  --role-card:#ffffff;
  --role-line:#eadcff;
  --role-line-strong:#dcc8ff;
  --role-text:#3b246f;
  --role-muted:#7b7194;
  --role-purple:#7c3aed;
  --role-purple-dark:#5b21b6;
  --role-pink:#e93c93;
  --role-coral:#ff7a59;
  --role-soft:#f8f3ff;
  --role-shadow:0 14px 34px rgba(93,50,140,.10);
  --role-shadow-soft:0 10px 25px rgba(93,50,140,.07);
  background:
    radial-gradient(circle at 6% -8%,rgba(255,122,89,.14),transparent 33%),
    radial-gradient(circle at 94% 0%,rgba(139,77,255,.14),transparent 35%),
    linear-gradient(180deg,#fffafd 0%,#f8f5ff 52%,#f2eff9 100%)!important;
  color:var(--role-text)!important;
  font-size:16px;
}
body.role-ui-passenger-theme *{box-sizing:border-box}
body.role-ui-passenger-theme .app{padding:14px 16px 30px}
body.role-ui-passenger-theme .container{max-width:1380px;padding:0 8px 30px}
body.role-ui-passenger-theme .topbar{
  top:10px;
  max-width:1380px;
  border:1px solid var(--role-line)!important;
  border-top:6px solid transparent!important;
  border-radius:26px!important;
  background:
    linear-gradient(#fff,#fff) padding-box,
    linear-gradient(90deg,var(--role-coral),var(--role-pink),#8b4dff) border-box!important;
  box-shadow:var(--role-shadow)!important;
  padding:18px 22px!important;
}
body.role-ui-passenger-theme .brand{gap:15px}
body.role-ui-passenger-theme .brand-mark{
  width:54px!important;height:54px!important;border-radius:18px!important;
  background:linear-gradient(135deg,var(--role-coral),var(--role-pink) 52%,#8b4dff)!important;
  box-shadow:0 12px 24px rgba(168,85,247,.22)!important;
  font-size:18px!important;
}
body.role-ui-passenger-theme .brand-title,
body.role-ui-passenger-theme h1,
body.role-ui-passenger-theme h2,
body.role-ui-passenger-theme h3{
  color:var(--role-text)!important;
}
body.role-ui-passenger-theme .brand-title{font-size:25px!important;font-weight:1000!important}
body.role-ui-passenger-theme .brand-sub{font-size:14px!important;color:var(--role-muted)!important;font-weight:850!important}
body.role-ui-passenger-theme .footer-note{color:#9a8ab3!important;font-weight:750}

body.role-ui-passenger-theme .card,
body.role-ui-passenger-theme .ui140-compact-head,
body.role-ui-passenger-theme .ui140-master-entry,
body.role-ui-passenger-theme .fleet-card,
body.role-ui-passenger-theme .rtc-card,
body.role-ui-passenger-theme .operation-alert,
body.role-ui-passenger-theme .summary-tile,
body.role-ui-passenger-theme .diff-card,
body.role-ui-passenger-theme .cert-tile,
body.role-ui-passenger-theme .abnormal-item,
body.role-ui-passenger-theme .fleet-event{
  border-color:var(--role-line)!important;
  border-radius:24px!important;
  background:#fff!important;
  box-shadow:var(--role-shadow-soft)!important;
}
body.role-ui-passenger-theme .card{padding:22px!important}
body.role-ui-passenger-theme .card:hover{transform:none!important;border-color:var(--role-line-strong)!important;box-shadow:var(--role-shadow)!important}
body.role-ui-passenger-theme .card.flat{background:var(--role-soft)!important;box-shadow:none!important}
body.role-ui-passenger-theme .view>.card:first-child,
body.role-ui-passenger-theme .driver-vehicle-hero{
  border-top:6px solid transparent!important;
  background:
    linear-gradient(#fff,#fff) padding-box,
    linear-gradient(90deg,var(--role-coral),var(--role-pink),#8b4dff) border-box!important;
}
body.role-ui-passenger-theme .card h2{font-size:25px!important;font-weight:1000!important}
body.role-ui-passenger-theme .card h3{font-size:20px!important;font-weight:950!important}
body.role-ui-passenger-theme .muted,
body.role-ui-passenger-theme .hint,
body.role-ui-passenger-theme .hero-sub{color:var(--role-muted)!important;font-weight:800!important}

body.role-ui-passenger-theme .btn,
body.role-ui-passenger-theme button.primary{
  min-height:50px!important;
  border:0!important;
  border-radius:17px!important;
  padding:11px 18px!important;
  background:linear-gradient(135deg,var(--role-coral) 0%,var(--role-pink) 50%,#8b4dff 100%)!important;
  color:#fff!important;
  box-shadow:0 12px 24px rgba(168,85,247,.20)!important;
  font-size:16px!important;
  font-weight:1000!important;
}
body.role-ui-passenger-theme .btn:hover{filter:brightness(1.03)!important;transform:translateY(-1px)!important}
body.role-ui-passenger-theme .btn.secondary,
body.role-ui-passenger-theme button.secondary{
  background:var(--role-soft)!important;
  color:#6d28d9!important;
  border:1px solid var(--role-line)!important;
  box-shadow:none!important;
}
body.role-ui-passenger-theme .btn.ghost{
  background:#fff!important;color:#6d28d9!important;border:1px solid var(--role-line)!important;box-shadow:none!important;
}
body.role-ui-passenger-theme .btn.ok{background:linear-gradient(135deg,#22c55e,#16a34a)!important}
body.role-ui-passenger-theme .btn.danger{background:linear-gradient(135deg,#f43f5e,#be123c)!important}
body.role-ui-passenger-theme .mini{min-height:38px!important;border-radius:13px!important;font-size:13px!important;padding:8px 12px!important}

body.role-ui-passenger-theme .pill,
body.role-ui-passenger-theme .badge{
  border:0!important;
  border-radius:999px!important;
  background:linear-gradient(135deg,var(--role-coral),var(--role-pink),#8b4dff)!important;
  color:#fff!important;
  box-shadow:none!important;
  font-weight:950!important;
}
body.role-ui-passenger-theme .pill.ok{background:#ecfdf5!important;color:#166534!important;border:1px solid #bbf7d0!important}
body.role-ui-passenger-theme .pill.warn{background:#fff7ed!important;color:#9a3412!important;border:1px solid #fed7aa!important}
body.role-ui-passenger-theme .pill.danger{background:#fff1f2!important;color:#9f1239!important;border:1px solid #fecdd3!important}

body.role-ui-passenger-theme .tabs,
body.role-ui-passenger-theme .ui140-tabs{
  margin:18px 0 18px!important;
  padding:8px!important;
  gap:9px!important;
  border:1px solid var(--role-line)!important;
  border-radius:22px!important;
  background:rgba(255,255,255,.88)!important;
  box-shadow:var(--role-shadow-soft)!important;
  overflow-x:auto!important;
  flex-wrap:nowrap!important;
  scrollbar-width:thin;
}
body.role-ui-passenger-theme .tab,
body.role-ui-passenger-theme .ui140-tab{
  min-height:46px!important;
  padding:10px 16px!important;
  border-radius:15px!important;
  background:var(--role-soft)!important;
  color:#6d28d9!important;
  border:1px solid transparent!important;
  font-size:15px!important;
  font-weight:950!important;
  white-space:nowrap!important;
}
body.role-ui-passenger-theme .tab:hover,
body.role-ui-passenger-theme .ui140-tab:hover{background:#f0e7ff!important}
body.role-ui-passenger-theme .tab.active,
body.role-ui-passenger-theme .ui140-tab[aria-selected="true"]{
  background:linear-gradient(135deg,var(--role-coral),var(--role-pink),#8b4dff)!important;
  color:#fff!important;
  box-shadow:0 9px 20px rgba(168,85,247,.18)!important;
}

body.role-ui-passenger-theme .kpi,
body.role-ui-passenger-theme .stats-grid{gap:14px!important}
body.role-ui-passenger-theme .stat{
  min-height:98px!important;
  border:1px solid var(--role-line)!important;
  border-radius:22px!important;
  background:#fff!important;
  box-shadow:var(--role-shadow-soft)!important;
  padding:18px!important;
}
body.role-ui-passenger-theme .stat:before{background:rgba(168,85,247,.09)!important}
body.role-ui-passenger-theme .stat span{color:var(--role-muted)!important;font-weight:900!important}
body.role-ui-passenger-theme .stat b{color:#6d28d9!important;font-size:31px!important}

body.role-ui-passenger-theme .input,
body.role-ui-passenger-theme input:not([type="checkbox"]):not([type="radio"]):not([type="hidden"]),
body.role-ui-passenger-theme select,
body.role-ui-passenger-theme textarea{
  min-height:52px!important;
  border:1px solid #e3d5ff!important;
  border-radius:17px!important;
  background:#fff!important;
  color:var(--role-text)!important;
  font-size:16px!important;
  font-weight:750!important;
  padding:11px 13px!important;
}
body.role-ui-passenger-theme .input:focus,
body.role-ui-passenger-theme input:focus,
body.role-ui-passenger-theme select:focus,
body.role-ui-passenger-theme textarea:focus{
  outline:none!important;
  border-color:#a855f7!important;
  box-shadow:0 0 0 4px rgba(168,85,247,.12)!important;
}
body.role-ui-passenger-theme .field label,
body.role-ui-passenger-theme .generated-label{color:#4c2f7c!important;font-size:14px!important;font-weight:950!important}
body.role-ui-passenger-theme .form{gap:15px!important}
body.role-ui-passenger-theme .checkline{color:#4c2f7c!important;font-weight:900!important}

body.role-ui-passenger-theme .notice{
  border:1px solid #d8c8ff!important;
  border-radius:17px!important;
  background:#f8f3ff!important;
  color:#4c1d95!important;
  font-size:15px!important;
  line-height:1.7!important;
  font-weight:800!important;
}
body.role-ui-passenger-theme .notice.warn{background:#fff7ed!important;border-color:#fed7aa!important;color:#9a3412!important}
body.role-ui-passenger-theme .notice.danger{background:#fff1f2!important;border-color:#fecdd3!important;color:#9f1239!important}
body.role-ui-passenger-theme .notice.ok{background:#ecfdf5!important;border-color:#bbf7d0!important;color:#166534!important}

body.role-ui-passenger-theme .table-wrap{
  border:1px solid var(--role-line)!important;
  border-radius:18px!important;
  background:#fff!important;
  box-shadow:none!important;
}
body.role-ui-passenger-theme table{font-size:14px!important}
body.role-ui-passenger-theme th{
  background:#f5efff!important;
  color:#4c2f7c!important;
  border-bottom:1px solid var(--role-line)!important;
  font-weight:1000!important;
}
body.role-ui-passenger-theme td{border-bottom-color:#f1e9ff!important}
body.role-ui-passenger-theme tbody tr:hover{background:#fcf9ff!important}

body.role-ui-passenger-theme .login-box{
  max-width:560px!important;
  margin:50px auto!important;
  padding:28px!important;
  border-top:7px solid transparent!important;
  background:
    linear-gradient(#fff,#fff) padding-box,
    linear-gradient(90deg,var(--role-coral),var(--role-pink),#8b4dff) border-box!important;
}
body.role-ui-passenger-theme .login-box h2{font-size:29px!important;text-align:center!important;margin-bottom:20px!important}
body.role-ui-passenger-theme .login-box .form{grid-template-columns:1fr!important}
body.role-ui-passenger-theme .login-box .btn{width:100%!important;min-height:56px!important;font-size:18px!important}

body.role-ui-passenger-theme .ui-modal,
body.role-ui-passenger-theme .modal-card{
  border:1px solid var(--role-line)!important;
  border-top:7px solid #8b4dff!important;
  border-radius:24px!important;
  box-shadow:0 28px 80px rgba(93,50,140,.24)!important;
}
body.role-ui-passenger-theme .ui-toast{border-color:var(--role-line)!important;border-left-color:#8b4dff!important;border-radius:18px!important}
body.role-ui-passenger-theme .soft-divider{background:#f0e7ff!important}

/* Master-specific overrides for legacy inline UI blocks. */
body.role-ui-passenger-theme.role-master .ui140-compact-head,
body.role-ui-passenger-theme.role-master .ui140-master-entry{
  border-top:6px solid transparent!important;
  background:
    linear-gradient(#fff,#fff) padding-box,
    linear-gradient(90deg,var(--role-coral),var(--role-pink),#8b4dff) border-box!important;
}
body.role-ui-passenger-theme.role-master .ui140-compact-head h1,
body.role-ui-passenger-theme.role-master .ui140-master-entry h2,
body.role-ui-passenger-theme.role-master .ui140-panel-label h2{color:var(--role-text)!important}
body.role-ui-passenger-theme.role-master .ui140-open-btn{
  border-radius:17px!important;
  background:linear-gradient(135deg,var(--role-coral),var(--role-pink),#8b4dff)!important;
  box-shadow:0 12px 24px rgba(168,85,247,.18)!important;
}
body.role-ui-passenger-theme.role-master .cert-tile b,
body.role-ui-passenger-theme.role-master .abnormal-item b,
body.role-ui-passenger-theme.role-master .fleet-event b{color:#6d28d9!important}
body.role-ui-passenger-theme.role-master .fleet-map-placeholder{background:linear-gradient(135deg,#fff7fd,#f5f0ff)!important;border-color:#d9c9fa!important}

/* Driver is used on tablets/phones, keep actions large. */
body.role-ui-passenger-theme.role-driver .container{max-width:1180px}
body.role-ui-passenger-theme.role-driver .driver-vehicle-hero{padding:24px!important}
body.role-ui-passenger-theme.role-driver .driver-vehicle-hero h1{font-size:36px!important}
body.role-ui-passenger-theme.role-driver .latest-event-card{min-height:260px!important}
body.role-ui-passenger-theme.role-driver .latest-event{border-radius:20px!important;background:#fbf7ff!important;border:1px solid var(--role-line)!important}
body.role-ui-passenger-theme.role-driver .trip-chip-list>*{border-color:var(--role-line)!important;background:#f8f3ff!important;color:#4c2f7c!important;border-radius:999px!important}

@media(max-width:1020px){
  body.role-ui-passenger-theme .kpi,
  body.role-ui-passenger-theme .stats-grid{grid-template-columns:repeat(2,minmax(0,1fr))!important}
  body.role-ui-passenger-theme .grid.two,
  body.role-ui-passenger-theme .grid.three,
  body.role-ui-passenger-theme .grid.four{grid-template-columns:1fr!important}
  body.role-ui-passenger-theme .form{grid-template-columns:1fr!important}
}
@media(max-width:760px){
  body.role-ui-passenger-theme .app{padding:8px 8px 22px!important}
  body.role-ui-passenger-theme .topbar{position:relative!important;top:0!important;margin-bottom:14px!important;padding:15px!important;border-radius:22px!important;align-items:flex-start!important;flex-direction:column!important}
  body.role-ui-passenger-theme .topbar .actions{width:100%!important}
  body.role-ui-passenger-theme .topbar .actions .btn{flex:1 1 auto!important}
  body.role-ui-passenger-theme .brand-mark{width:48px!important;height:48px!important;border-radius:16px!important}
  body.role-ui-passenger-theme .brand-title{font-size:23px!important}
  body.role-ui-passenger-theme .brand-sub{font-size:13px!important}
  body.role-ui-passenger-theme .container{padding:0 0 24px!important}
  body.role-ui-passenger-theme .card{padding:17px!important;border-radius:21px!important}
  body.role-ui-passenger-theme .card h2{font-size:23px!important}
  body.role-ui-passenger-theme .tabs,
  body.role-ui-passenger-theme .ui140-tabs{border-radius:18px!important;margin:12px 0 14px!important}
  body.role-ui-passenger-theme .tab,
  body.role-ui-passenger-theme .ui140-tab{min-height:44px!important;font-size:14px!important;padding:9px 13px!important}
  body.role-ui-passenger-theme .kpi,
  body.role-ui-passenger-theme .stats-grid{grid-template-columns:1fr 1fr!important;gap:10px!important}
  body.role-ui-passenger-theme .stat{min-height:88px!important;padding:15px!important}
  body.role-ui-passenger-theme .stat b{font-size:27px!important}
  body.role-ui-passenger-theme .btn{min-height:50px!important}
  body.role-ui-passenger-theme.role-driver .grid.two{grid-template-columns:1fr!important}
  body.role-ui-passenger-theme.role-driver .driver-vehicle-hero{padding:18px!important}
  body.role-ui-passenger-theme.role-driver .driver-vehicle-hero h1{font-size:31px!important}
}
@media(max-width:440px){
  body.role-ui-passenger-theme .kpi,
  body.role-ui-passenger-theme .stats-grid{grid-template-columns:1fr!important}
}