/* Pinaka Infra shared operations theme.
   This file intentionally overrides only visual styling, not app behavior. */
:root {
  --pinaka-green-900: #0f3d2a;
  --pinaka-green-800: #14532d;
  --pinaka-green-700: #166534;
  --pinaka-green-600: #15803d;
  --pinaka-green-100: #dcfce7;
  --pinaka-green-50: #f0fdf4;
  --pinaka-ink: #17211b;
  --pinaka-muted: #66736b;
  --pinaka-line: #dce5df;
  --pinaka-panel: #ffffff;
  --pinaka-page: #f5f8f6;
  --pinaka-blue: #2563eb;
  --pinaka-amber: #b7791f;
  --pinaka-red: #dc2626;
  --pinaka-shadow: 0 10px 26px rgba(16, 42, 28, .08);
  --pinaka-radius: 8px;

  --primary: var(--pinaka-green-700) !important;
  --primary-pale: var(--pinaka-green-50) !important;
  --primary-border: #a7d7b5 !important;
  --bg: var(--pinaka-page) !important;
  --surface: var(--pinaka-panel) !important;
  --surface2: #eef4f0 !important;
  --border: var(--pinaka-line) !important;
  --border2: #cbd8d0 !important;
  --text: var(--pinaka-ink) !important;
  --text2: #33463b !important;
  --text3: var(--pinaka-muted) !important;
  --shadow2: var(--pinaka-shadow) !important;

  --gd: var(--pinaka-green-700) !important;
  --gb: var(--pinaka-page) !important;
  --gbr: var(--pinaka-line) !important;
  --td: var(--pinaka-ink) !important;
  --tm: #33463b !important;
  --tmu: var(--pinaka-muted) !important;
  --r: var(--pinaka-radius) !important;
  --sh: var(--pinaka-shadow) !important;

  --p: var(--pinaka-green-700) !important;
  --pp: var(--pinaka-green-50) !important;
  --pb: #a7d7b5 !important;
  --s: var(--pinaka-panel) !important;
  --s2: #eef4f0 !important;
  --t: var(--pinaka-ink) !important;
  --t2: #33463b !important;
  --t3: var(--pinaka-muted) !important;
  --b: var(--pinaka-line) !important;
  --rd: var(--pinaka-red) !important;
}

* {
  letter-spacing: 0 !important;
}

html,
body {
  background: var(--pinaka-page) !important;
  color: var(--pinaka-ink) !important;
  font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Arial, sans-serif !important;
}

body {
  max-width: 860px !important;
  margin: 0 auto !important;
}

.app {
  max-width: 860px !important;
}

.screen,
.scr,
.sc {
  background: var(--pinaka-page) !important;
}

.hdr,
.tbar,
.fhdr,
.login-header,
.home-hdr,
.prev-head {
  background: linear-gradient(180deg, var(--pinaka-green-800), var(--pinaka-green-700)) !important;
  box-shadow: 0 1px 0 rgba(255,255,255,.08) inset, 0 8px 20px rgba(15,61,42,.16) !important;
}

.hdr,
.tbar,
.fhdr {
  position: sticky !important;
  top: 0 !important;
  z-index: 100 !important;
  min-height: 64px !important;
  padding: 12px 16px !important;
}

.hdr-title,
.hdr-t,
.tbar-t,
.fht,
.login-title,
.home-title,
.home-t,
.brand-title {
  font-weight: 800 !important;
}

.hdr-sub,
.hdr-s,
.tbar-s,
.login-sub,
.login-tag,
.home-sub,
.home-s {
  color: rgba(255,255,255,.72) !important;
  text-transform: none !important;
}

.home-s {
  color: var(--pinaka-muted) !important;
}

.login-header,
.home-hdr {
  border-radius: 0 0 18px 18px !important;
}

.pin-section,
.hbody,
.home-acts,
.auth-opts,
.form-w,
.fw {
  padding-left: 16px !important;
  padding-right: 16px !important;
}

button,
input,
select,
textarea {
  font-family: inherit !important;
}

button {
  cursor: pointer;
}

/* Fuel app visual alignment with the Maintenance app. */
.fuel-maintenance-ui .login-logos,
.fuel-maintenance-ui .hdr-logos {
  display: none !important;
}

.fuel-maintenance-ui .login-tag {
  display: none !important;
}

.fuel-maintenance-ui .login-header {
  padding: 36px 20px 30px !important;
}

.fuel-maintenance-ui .login-title {
  font-size: 24px !important;
  line-height: 1.18 !important;
  margin-top: 0 !important;
}

.fuel-maintenance-ui .login-sub {
  color: rgba(255,255,255,.72) !important;
  font-size: 12px !important;
  letter-spacing: 0 !important;
  margin-top: 8px !important;
  text-transform: none !important;
}

.fuel-maintenance-ui .hdr {
  gap: 12px !important;
}

.fuel-maintenance-ui .logo {
  font-size: 18px !important;
  line-height: 1.15 !important;
}

.fuel-maintenance-ui .logo-sub {
  color: rgba(255,255,255,.72) !important;
  font-size: 11px !important;
  letter-spacing: 0 !important;
  margin-top: 3px !important;
}

/* Staff Joining visual alignment with the Maintenance app. */
.joining-maintenance-ui .logos,
.joining-maintenance-ui .logo,
.joining-maintenance-ui .logo-sep {
  display: none !important;
}

.joining-maintenance-ui #scHome .home-txt {
  background: linear-gradient(180deg, var(--pinaka-green-800), var(--pinaka-green-700)) !important;
  border-radius: 0 0 18px 18px !important;
  box-shadow: 0 1px 0 rgba(255,255,255,.08) inset, 0 8px 20px rgba(15,61,42,.16) !important;
  margin: 0 0 24px !important;
  padding: 36px 20px 30px !important;
  text-align: center !important;
}

.joining-maintenance-ui #scHome .home-t {
  color: #fff !important;
  font-size: 24px !important;
  font-weight: 800 !important;
  line-height: 1.18 !important;
}

.joining-maintenance-ui #scHome .home-s {
  color: rgba(255,255,255,.72) !important;
  font-size: 12px !important;
  margin-top: 8px !important;
}

.joining-maintenance-ui .hdr {
  gap: 12px !important;
}

.btn,
.btn-p,
.btn-o,
.btn-wa,
.btn-csv,
.btn-print,
.btn-exp,
.btn-md,
.btn-sub,
.btn-sm,
.modal-btn-save,
.modal-btn-cancel,
.admin-action-btn,
.admin-del-btn,
.hdr-back,
.btn-back,
.bb,
.fpill,
.tab,
.modal-tog,
.tog,
.cat,
.auth-btn,
.user-select-btn {
  border-radius: var(--pinaka-radius) !important;
  min-height: 44px !important;
  transition: transform .12s ease, box-shadow .12s ease, background .12s ease, border-color .12s ease !important;
}

.btn-p,
.btn-sub,
.btn.bp,
.bp.btn,
.modal-btn-save,
.btn-sm.green {
  background: var(--pinaka-green-700) !important;
  border-color: var(--pinaka-green-700) !important;
  color: #fff !important;
  box-shadow: 0 8px 18px rgba(22,101,52,.18) !important;
}

.btn-o,
.btn.bo,
.bo.btn,
.btn-print,
.btn-exp,
.btn-csv,
.modal-btn-cancel,
.btn-sm,
.auth-btn,
.user-select-btn {
  background: var(--pinaka-panel) !important;
  border: 1px solid var(--pinaka-line) !important;
  color: var(--pinaka-green-800) !important;
  box-shadow: 0 4px 12px rgba(16,42,28,.05) !important;
}

.btn-wa,
.bg {
  background: #1f9d55 !important;
  color: #fff !important;
  border: 1px solid #1f9d55 !important;
}

.btn-csv {
  color: var(--pinaka-blue) !important;
}

.btn-md,
.btn-amber {
  background: #fff8e1 !important;
  color: #805400 !important;
  border: 1px solid #f2d27c !important;
}

.btn:active,
.btn-p:active,
.btn-o:active,
.btn-wa:active,
.btn-csv:active,
.btn-print:active,
.btn-exp:active,
.btn-md:active,
.btn-sub:active,
.btn-sm:active,
.auth-btn:active,
.user-select-btn:active,
.cat:active,
.tab:active {
  transform: scale(.99) !important;
}

.tab,
.tab-row .tab,
.tab-bar .tab,
.tabs .tab,
.fpill,
.range-tab {
  background: var(--pinaka-panel) !important;
  border: 1px solid var(--pinaka-line) !important;
  color: var(--pinaka-muted) !important;
  box-shadow: none !important;
}

.tab.active,
.tab.on,
.fpill.on,
.range-tab.active,
.modal-tog.active {
  background: var(--pinaka-green-700) !important;
  border-color: var(--pinaka-green-700) !important;
  color: #fff !important;
}

.stat-box,
.tkamt {
  background: linear-gradient(180deg, var(--pinaka-green-800), var(--pinaka-green-700)) !important;
  border-radius: var(--pinaka-radius) !important;
  box-shadow: var(--pinaka-shadow) !important;
}

.stat-mini,
.stat-info {
  border-radius: var(--pinaka-radius) !important;
  background: rgba(255,255,255,.14) !important;
}

.card,
.vcard,
.lcard,
.log-card,
.trip-card,
.tk,
.prev-card,
.scard,
.cat,
.admin-row,
.receipt-box,
.vehicle-info,
.running-box,
.card-list > *,
.summary-card,
.info-card,
.user-select-btn,
.auth-btn {
  background: var(--pinaka-panel) !important;
  border: 1px solid var(--pinaka-line) !important;
  border-radius: var(--pinaka-radius) !important;
  box-shadow: var(--pinaka-shadow) !important;
}

.user-select-list,
.auth-opts {
  gap: 10px !important;
}

.user-select-btn,
.auth-btn {
  width: 100% !important;
  padding: 14px !important;
  align-items: center !important;
}

.user-select-avatar,
.auth-av,
.sav,
.hdr-logo-img,
.login-logo,
.login-logo-wrap {
  border-radius: var(--pinaka-radius) !important;
}

.user-select-avatar,
.auth-av,
.sav,
.suc-icon {
  background: var(--pinaka-green-700) !important;
  color: #fff !important;
}

.fld,
.field,
.form-field {
  margin-bottom: 14px !important;
}

.flbl,
.fl,
.modal-flbl,
.field label,
.sec,
.slbl {
  color: var(--pinaka-muted) !important;
  font-weight: 700 !important;
  text-transform: none !important;
}

input,
select,
textarea,
.finp,
.fsel,
.ftxt,
.fi,
.fsel,
.fta,
.vbtn,
.vsi,
.search-inp,
.modal-inp,
.veh-trigger,
.veh-search {
  background: var(--pinaka-panel) !important;
  border: 1px solid var(--pinaka-line) !important;
  border-radius: var(--pinaka-radius) !important;
  color: var(--pinaka-ink) !important;
  min-height: 44px !important;
  box-shadow: none !important;
}

input:focus,
select:focus,
textarea:focus,
.finp:focus,
.fsel:focus,
.ftxt:focus,
.fi:focus,
.fta:focus,
.vbtn:focus,
.search-inp:focus,
.modal-inp:focus,
.veh-search:focus {
  border-color: var(--pinaka-green-600) !important;
  outline: 3px solid rgba(22,128,60,.14) !important;
}

.search-box {
  border-radius: var(--pinaka-radius) !important;
}

.modal {
  border-radius: 14px 14px 0 0 !important;
  background: var(--pinaka-panel) !important;
}

.modal-overlay {
  background: rgba(10, 20, 14, .46) !important;
}

.syncbar,
.sync-bar,
.who,
.wbar,
.fbar,
.pend-box,
.dup-warn {
  border-radius: var(--pinaka-radius) !important;
  border: 1px solid var(--pinaka-line) !important;
}

.syncok,
.sync-ok,
.age-ok,
.ba,
.st-paid,
.vs-ok,
.sd-ok,
.eff-ok {
  color: #166534 !important;
}

.st-pend,
.vs-pend,
.sync-pending {
  color: var(--pinaka-amber) !important;
}

.pin-error,
.error,
.age-no,
.br,
.lc-flag,
.eff-danger {
  color: var(--pinaka-red) !important;
}

.empty {
  color: var(--pinaka-muted) !important;
  text-transform: none !important;
}

.mrf-connect-card {
  margin-top: 18px;
  padding: 14px;
  background: var(--pinaka-panel);
  border: 1px solid var(--pinaka-line);
  border-radius: var(--pinaka-radius);
  box-shadow: var(--pinaka-shadow);
}

.mrf-connect-title {
  color: var(--pinaka-ink);
  font-size: 14px;
  font-weight: 800;
}

.mrf-connect-sub {
  margin-top: 4px;
  color: var(--pinaka-muted);
  font-size: 12px;
  line-height: 1.45;
}

.mrf-url-input {
  margin-top: 12px;
  width: 100%;
}

.mrf-connect-actions {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  gap: 8px;
  margin-top: 10px;
}

.mrf-connect-btn {
  min-height: 40px;
  border: 1px solid var(--pinaka-line);
  border-radius: var(--pinaka-radius);
  background: var(--pinaka-panel);
  color: var(--pinaka-green-800);
  font-weight: 800;
}

.mrf-connect-btn.primary {
  background: var(--pinaka-green-700);
  border-color: var(--pinaka-green-700);
  color: #fff;
}

.mrf-connect-btn.danger {
  color: var(--pinaka-red);
}

.mrf-debug-result {
  display: none;
  margin-top: 10px;
  padding: 10px 12px;
  border-radius: var(--pinaka-radius);
  background: var(--pinaka-green-50);
  border: 1px solid #a7d7b5;
  color: var(--pinaka-green-800);
  font-size: 12px;
  line-height: 1.55;
  white-space: pre-wrap;
  word-break: break-word;
}

.mrf-debug-result.error {
  background: #fff1f2;
  border-color: #fecdd3;
  color: var(--pinaka-red) !important;
}

.fbot,
.flash {
  max-width: 860px !important;
}

.fbot {
  background: rgba(245,248,246,.96) !important;
  border-top: 1px solid var(--pinaka-line) !important;
}

@media (min-width: 720px) {
  .cat-grid,
  .stat-grid,
  .f2 {
    gap: 14px !important;
  }

  .hbody,
  .home-acts,
  .auth-opts,
  .form-w,
  .fw,
  .pin-section {
    padding-left: 20px !important;
    padding-right: 20px !important;
  }
}

/* Command-center visual pass for every embedded app.
   Presentation only: no form, sheet, auth, or payment behavior is changed. */
html,
body {
  background-color: #f6f8fa !important;
  background-image:
    linear-gradient(135deg, rgba(15, 61, 42, 0.08), rgba(15, 61, 42, 0) 44%),
    linear-gradient(0deg, rgba(220, 229, 223, 0.8) 1px, transparent 1px),
    linear-gradient(90deg, rgba(220, 229, 223, 0.65) 1px, transparent 1px) !important;
  background-size: auto, 42px 42px, 42px 42px !important;
}

body::before {
  content: "";
  position: fixed;
  inset: 0;
  pointer-events: none;
  background: linear-gradient(180deg, rgba(255,255,255,.46), rgba(255,255,255,0) 280px);
  z-index: -1;
}

.screen.active,
.scr.on,
.sc.on {
  animation: pinaka-screen-enter 300ms ease both;
}

.hdr,
.tbar,
.fhdr,
.home-hdr,
.login-header,
.prev-head {
  background: rgba(255, 255, 255, 0.82) !important;
  color: #0a1628 !important;
  border: 1px solid rgba(15, 61, 42, 0.1) !important;
  border-left: 0 !important;
  border-right: 0 !important;
  box-shadow: 0 12px 30px rgba(16,42,28,.08) !important;
  backdrop-filter: blur(14px) !important;
  -webkit-backdrop-filter: blur(14px) !important;
}

.hdr,
.tbar,
.fhdr {
  margin: 0 0 14px !important;
}

.login-header,
.home-hdr,
.joining-maintenance-ui #scHome .home-txt {
  margin: 14px 14px 18px !important;
  border: 1px solid rgba(15, 61, 42, 0.1) !important;
  border-radius: 8px !important;
  background: rgba(255,255,255,.88) !important;
  box-shadow: 0 18px 38px rgba(16,42,28,.1) !important;
}

.hdr-title,
.hdr-t,
.tbar-t,
.fht,
.fhdr-title,
.logo,
.home-title,
.home-t,
.login-title,
.prev-name {
  color: #0a1628 !important;
  font-weight: 950 !important;
  letter-spacing: 0 !important;
  text-transform: uppercase !important;
}

.hdr-sub,
.hdr-s,
.tbar-s,
.logo-sub,
.home-sub,
.home-s,
.login-tag,
.login-sub,
.prev-tag,
.prev-sub {
  color: #69766f !important;
  letter-spacing: 0 !important;
  text-transform: none !important;
}

.joining-maintenance-ui #scHome .home-t {
  color: #0a1628 !important;
}

.joining-maintenance-ui #scHome .home-s {
  color: #69766f !important;
}

.login-title,
.home-title,
.joining-maintenance-ui #scHome .home-t {
  font-size: clamp(1.65rem, 5vw, 2.35rem) !important;
  line-height: 1.06 !important;
}

.login-tag {
  display: inline-flex !important;
  align-items: center !important;
  width: max-content !important;
  margin: 0 auto 10px !important;
  padding: 6px 10px !important;
  border: 1px solid rgba(37, 99, 235, 0.16) !important;
  border-radius: 6px !important;
  background: rgba(255,255,255,.78) !important;
  color: #1d4ed8 !important;
  font-size: .7rem !important;
  font-weight: 950 !important;
  text-transform: uppercase !important;
}

.btn-back,
.bb,
.hdr-back {
  color: #0f3d2a !important;
  background: rgba(240,253,244,.86) !important;
  border: 1px solid rgba(15,61,42,.12) !important;
  border-radius: 8px !important;
  min-width: 42px !important;
  min-height: 38px !important;
  padding: 7px 10px !important;
}

.av {
  width: 38px !important;
  height: 38px !important;
  border-radius: 8px !important;
  background: #f0fdf4 !important;
  color: #0f3d2a !important;
  border: 1px solid rgba(15,61,42,.14) !important;
  box-shadow: 0 8px 18px rgba(16,42,28,.06) !important;
}

.stat-box,
.tkamt,
.net-box,
.running-box {
  position: relative !important;
  overflow: hidden !important;
  background:
    linear-gradient(160deg, rgba(255,255,255,1), rgba(240,253,244,.94)),
    #fff !important;
  border: 1px solid rgba(15,61,42,.11) !important;
  border-radius: 8px !important;
  box-shadow: 0 14px 34px rgba(16,42,28,.08) !important;
  animation: pinaka-card-enter 420ms ease both !important;
}

.stat-box::after,
.tkamt::after,
.net-box::after,
.running-box::after {
  content: "";
  position: absolute;
  inset: auto 0 0;
  height: 5px;
  background: linear-gradient(90deg, #14532d, #006a4e, #b7791f);
  opacity: .94;
}

.stat-lbl,
.tkamt-l,
.net-lbl,
.running-lbl {
  color: #69766f !important;
  font-weight: 900 !important;
}

.stat-big,
.stat-mini-val,
.mini-val,
.tkamt-v,
.net-kg,
.net-mt,
.running-val {
  color: #0a1628 !important;
}

.stat-cnt,
.stat-mini-lbl,
.stat-mini-sub,
.mini-lbl,
.net-lbl,
.running-lbl {
  color: #69766f !important;
}

.stat-mini,
.stat-info,
.mini-row,
.auto-chip,
.chip,
.summary-card,
.s-card,
.target-bar,
.zone-bd,
.ward-cov,
.info-box,
.info-strip,
.who,
.rst-box,
.fixed-amt-box,
.green-panel,
.log-sum,
.refresh-row {
  background: rgba(240,253,244,.62) !important;
  border: 1px solid rgba(15,61,42,.08) !important;
  border-radius: 8px !important;
  box-shadow: none !important;
}

.card,
.vcard,
.lcard,
.log-card,
.trip-card,
.tk,
.prev-card,
.scard,
.cat,
.mcard,
.rbox,
.admin-section,
.summary-card,
.s-card,
.target-bar,
.zone-bd,
.ward-cov,
.auth-btn,
.user-select-btn,
.receipt-box,
.vehicle-details {
  position: relative !important;
  overflow: hidden !important;
  border-radius: 8px !important;
  box-shadow: 0 14px 34px rgba(16,42,28,.08) !important;
  animation: pinaka-card-enter 420ms ease both !important;
  transition: transform 180ms ease, box-shadow 180ms ease, border-color 180ms ease, background 180ms ease !important;
}

.card::after,
.vcard::after,
.lcard::after,
.log-card::after,
.trip-card::after,
.tk::after,
.prev-card::after,
.scard::after,
.cat::after,
.mcard::after,
.rbox::after,
.admin-section::after,
.auth-btn::after,
.user-select-btn::after {
  content: "";
  position: absolute;
  inset: auto 0 0;
  height: 3px;
  background: linear-gradient(90deg, #14532d, #006a4e, #b7791f);
  opacity: .72;
  pointer-events: none;
}

.card:active,
.vcard:active,
.lcard:active,
.log-card:active,
.trip-card:active,
.cat:active,
.mcard:active,
.auth-btn:active,
.user-select-btn:active {
  transform: translateY(-2px) scale(.995) !important;
}

@media (hover:hover) and (pointer:fine) {
  .card:hover,
  .vcard:hover,
  .lcard:hover,
  .log-card:hover,
  .trip-card:hover,
  .cat:hover,
  .mcard:hover,
  .auth-btn:hover,
  .user-select-btn:hover {
    transform: translateY(-4px) !important;
    border-color: rgba(20,83,45,.25) !important;
    box-shadow: 0 24px 42px rgba(16,42,28,.14) !important;
  }
}

.btn-p,
.btn-sub,
.btn.bp,
.bp.btn,
.submit-btn,
.modal-btn-save,
.btn-sm.green,
.admin-add-btn,
.modal-btn-save,
.modal-btn-save,
.mrf-connect-btn.primary {
  background: #0f3d2a !important;
  border: 1px solid #0f3d2a !important;
  box-shadow: 0 12px 24px rgba(16,42,28,.15) !important;
}

.btn-p.user-select-btn,
.btn-p.auth-btn {
  background: rgba(255,255,255,.92) !important;
  border: 1px solid rgba(15,61,42,.12) !important;
  color: #0a1628 !important;
  box-shadow: 0 14px 34px rgba(16,42,28,.08) !important;
}

.btn-p.user-select-btn span,
.btn-p.auth-btn span {
  color: #69766f !important;
}

.btn-o,
.btn.bo,
.bo.btn,
.btn-print,
.btn-exp,
.btn-csv,
.btn-sm,
.modal-btn-cancel,
.admin-action-btn,
.admin-del-btn,
.refresh-btn,
.now-btn,
.btn-amber {
  background: rgba(255,255,255,.88) !important;
  border: 1px solid rgba(15,61,42,.12) !important;
  box-shadow: 0 8px 18px rgba(16,42,28,.06) !important;
}

@media (hover:hover) and (pointer:fine) {
  .btn-p:hover,
  .btn-o:hover,
  .btn-wa:hover,
  .btn-csv:hover,
  .btn-print:hover,
  .btn-exp:hover,
  .btn-md:hover,
  .btn-sub:hover,
  .btn-sm:hover,
  .submit-btn:hover,
  .modal-btn-save:hover,
  .modal-btn-cancel:hover,
  .mrf-connect-btn:hover {
    transform: translateY(-2px) !important;
    box-shadow: 0 18px 30px rgba(16,42,28,.12) !important;
  }
}

.syncbar,
.sync-bar,
.wbar,
.warn-bar,
.fbar,
.dup-warn,
.fbar,
.f-raiser-flag,
.pin-error,
.target-bar,
.refresh-row {
  background: rgba(255,255,255,.74) !important;
  backdrop-filter: blur(10px) !important;
  -webkit-backdrop-filter: blur(10px) !important;
}

.sync-ok,
.syncok,
.ssr-ok {
  background: rgba(16,185,129,.11) !important;
  border-color: rgba(16,185,129,.28) !important;
  color: #047857 !important;
}

.sync-pending,
.syncbar.canretry,
.wbar,
.warn-bar,
.ssr-pend,
.dup-warn,
.fbar {
  background: rgba(255,248,225,.88) !important;
  border-color: rgba(183,121,31,.25) !important;
  color: #8a5a10 !important;
}

.pin-key,
.tab,
.range-tab,
.rt,
.fpill,
.tog,
.modal-tog,
.veh-trigger,
.vbtn {
  border-radius: 8px !important;
}

.pin-key.filled,
.pin-dot.filled,
.tab.active,
.tab.on,
.range-tab.active,
.rt.active,
.fpill.on,
.tog.active,
.modal-tog.active {
  background: #0f3d2a !important;
  border-color: #0f3d2a !important;
  color: #fff !important;
}

.fbot,
.fixed-bottom {
  background: rgba(246,248,250,.86) !important;
  backdrop-filter: blur(16px) !important;
  -webkit-backdrop-filter: blur(16px) !important;
  border-top: 1px solid rgba(15,61,42,.1) !important;
  box-shadow: 0 -12px 30px rgba(16,42,28,.08) !important;
}

.flash,
.toast.show {
  background: #0f3d2a !important;
  box-shadow: 0 14px 34px rgba(16,42,28,.18) !important;
}

.fab {
  border-radius: 8px !important;
  background: #0f3d2a !important;
  box-shadow: 0 18px 34px rgba(16,42,28,.18) !important;
}

@keyframes pinaka-screen-enter {
  from {
    opacity: .84;
    transform: translateY(6px);
  }

  to {
    opacity: 1;
    transform: translateY(0);
  }
}

@keyframes pinaka-card-enter {
  from {
    opacity: 0;
    transform: translateY(14px);
  }

  to {
    opacity: 1;
    transform: translateY(0);
  }
}

@media (min-width: 760px) {
  body,
  .app,
  .fbot,
  .fixed-bottom,
  .flash {
    max-width: 920px !important;
  }

  .screen,
  .scr,
  .sc {
    padding-bottom: 24px !important;
  }

  .stat-box,
  .summary-grid,
  .target-bar,
  .zone-bd,
  .ward-cov,
  .sync-bar,
  .syncbar,
  .warn-bar,
  .wbar,
  .refresh-row,
  .btn-p,
  .btn-o,
  .btn-wa,
  .btn-csv,
  .btn-print,
  .btn-exp,
  .btn-md,
  .btn-amber,
  .btn-sub,
  .vehicle-summary-line,
  .tab-row,
  .range-tabs,
  .tabs,
  .fbar,
  .search-box,
  .lwrap,
  .admin-wrap,
  .swrap,
  .rbox,
  .receipt-btns,
  .prev-acts,
  .home-acts,
  .hbody,
  .auth-opts,
  .pin-section,
  .fw,
  .fwrap,
  .form-w {
    max-width: 820px !important;
    margin-left: auto !important;
    margin-right: auto !important;
  }

  .summary-grid,
  .stat-grid,
  .cat-grid,
  .f2 {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  }

  .lwrap,
  .slist,
  #vlist,
  #trip-list,
  #dash-modules {
    display: grid !important;
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 12px !important;
  }

  .lwrap > *,
  .slist > *,
  #vlist > *,
  #trip-list > *,
  #dash-modules > * {
    margin-left: 0 !important;
    margin-right: 0 !important;
  }
}

@media (max-width: 520px) {
  body,
  .app {
    max-width: 100% !important;
  }

  .login-header,
  .home-hdr,
  .joining-maintenance-ui #scHome .home-txt {
    margin: 10px 10px 14px !important;
    padding: 28px 16px 24px !important;
  }

  .hdr,
  .tbar,
  .fhdr {
    min-height: 56px !important;
    padding: 10px 12px !important;
  }

  .stat-box {
    margin-left: 12px !important;
    margin-right: 12px !important;
  }
}

/* iPadOS-style app pass. Visual only. */
html,
body {
  background-color: #edf4f7 !important;
  background-image:
    linear-gradient(135deg, rgba(255,255,255,.84), rgba(255,255,255,0) 38%),
    linear-gradient(0deg, rgba(255,255,255,.55) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,.5) 1px, transparent 1px) !important;
  background-size: auto, 44px 44px, 44px 44px !important;
}

.hdr,
.tbar,
.fhdr,
.home-hdr,
.login-header,
.prev-head,
.stat-box,
.tkamt,
.net-box,
.running-box,
.card,
.vcard,
.lcard,
.log-card,
.trip-card,
.tk,
.prev-card,
.scard,
.cat,
.mcard,
.rbox,
.admin-section,
.summary-card,
.s-card,
.target-bar,
.zone-bd,
.ward-cov,
.auth-btn,
.user-select-btn,
.receipt-box,
.vehicle-details,
.btn,
.btn-p,
.btn-o,
.btn-wa,
.btn-csv,
.btn-print,
.btn-exp,
.btn-md,
.btn-sub,
.btn-sm,
.submit-btn,
.syncbar,
.sync-bar,
.wbar,
.warn-bar,
.fbar,
.refresh-row,
.fixed-bottom,
.fbot,
.modal {
  backdrop-filter: blur(22px) !important;
  -webkit-backdrop-filter: blur(22px) !important;
}

.hdr,
.tbar,
.fhdr {
  margin: 10px 12px 14px !important;
  border: 1px solid rgba(255,255,255,.72) !important;
  border-radius: 18px !important;
  background: rgba(255,255,255,.58) !important;
  box-shadow: 0 16px 42px rgba(31,41,55,.1), inset 0 1px 0 rgba(255,255,255,.82) !important;
}

.home-hdr,
.login-header,
.joining-maintenance-ui #scHome .home-txt {
  border-color: rgba(255,255,255,.72) !important;
  border-radius: 24px !important;
  background: rgba(255,255,255,.6) !important;
  box-shadow: 0 22px 54px rgba(31,41,55,.12), inset 0 1px 0 rgba(255,255,255,.82) !important;
}

.hdr-title,
.hdr-t,
.tbar-t,
.fht,
.fhdr-title,
.logo,
.home-title,
.home-t,
.login-title,
.prev-name {
  color: #102033 !important;
  text-transform: none !important;
  font-weight: 850 !important;
}

.hdr-sub,
.hdr-s,
.tbar-s,
.logo-sub,
.home-sub,
.home-s,
.login-sub,
.prev-sub {
  color: #5e6b78 !important;
}

.login-tag {
  border-color: rgba(255,255,255,.78) !important;
  border-radius: 14px !important;
  background: rgba(255,255,255,.62) !important;
  color: #0f766e !important;
  box-shadow: 0 10px 24px rgba(31,41,55,.08), inset 0 1px 0 rgba(255,255,255,.78) !important;
}

.btn-back,
.bb,
.hdr-back,
.av,
.pin-key,
.tab,
.range-tab,
.rt,
.fpill,
.tog,
.modal-tog,
.veh-trigger,
.vbtn,
input,
select,
textarea,
.finp,
.fsel,
.ftxt,
.fi,
.fta,
.search-inp,
.modal-inp {
  border-radius: 15px !important;
  border-color: rgba(255,255,255,.78) !important;
  background: rgba(255,255,255,.62) !important;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.72), 0 8px 20px rgba(31,41,55,.06) !important;
}

.av,
.user-select-avatar,
.auth-av,
.sav,
.suc-icon {
  border-radius: 15px !important;
  background:
    linear-gradient(145deg, rgba(0,106,78,.95), rgba(20,83,45,.92)),
    #006a4e !important;
  color: #fff !important;
}

.stat-box,
.tkamt,
.net-box,
.running-box,
.card,
.vcard,
.lcard,
.log-card,
.trip-card,
.tk,
.prev-card,
.scard,
.cat,
.mcard,
.rbox,
.admin-section,
.summary-card,
.s-card,
.target-bar,
.zone-bd,
.ward-cov,
.auth-btn,
.user-select-btn,
.receipt-box,
.vehicle-details {
  border: 1px solid rgba(255,255,255,.74) !important;
  border-radius: 24px !important;
  background:
    linear-gradient(145deg, rgba(255,255,255,.78), rgba(255,255,255,.48)),
    rgba(255,255,255,.58) !important;
  box-shadow: 0 22px 54px rgba(31,41,55,.12), inset 0 1px 0 rgba(255,255,255,.82) !important;
}

.stat-box::after,
.tkamt::after,
.net-box::after,
.running-box::after,
.card::after,
.vcard::after,
.lcard::after,
.log-card::after,
.trip-card::after,
.tk::after,
.prev-card::after,
.scard::after,
.cat::after,
.mcard::after,
.rbox::after,
.admin-section::after,
.auth-btn::after,
.user-select-btn::after {
  background: linear-gradient(90deg, #006a4e, #3b82f6, #b7791f) !important;
  opacity: .72 !important;
}

.stat-mini,
.stat-info,
.mini-row,
.auto-chip,
.chip,
.info-box,
.info-strip,
.who,
.rst-box,
.fixed-amt-box,
.green-panel,
.log-sum,
.refresh-row,
.summary-card,
.s-card {
  border-color: rgba(255,255,255,.74) !important;
  border-radius: 18px !important;
  background: rgba(255,255,255,.46) !important;
}

.stat-big,
.stat-mini-val,
.mini-val,
.tkamt-v,
.net-kg,
.running-val,
.s-card-val,
.summary-card-val,
.fixed-amt-num,
.rst-num,
.camt,
.lc-ltr,
.trip-net-kg,
.rhi {
  color: #102033 !important;
}

.stat-lbl,
.stat-cnt,
.stat-mini-lbl,
.stat-mini-sub,
.mini-lbl,
.flbl,
.fl,
.modal-flbl,
.sec,
.slbl,
.tile-subcopy,
.csub,
.lc-meta,
.trip-meta,
.rlbl,
.empty {
  color: #687784 !important;
  text-transform: none !important;
}

.btn-p,
.btn-sub,
.btn.bp,
.bp.btn,
.submit-btn,
.modal-btn-save,
.btn-sm.green,
.admin-add-btn,
.mrf-connect-btn.primary {
  border-radius: 16px !important;
  background:
    linear-gradient(145deg, rgba(0,106,78,.98), rgba(20,83,45,.94)),
    #006a4e !important;
  box-shadow: 0 14px 30px rgba(0,106,78,.18), inset 0 1px 0 rgba(255,255,255,.22) !important;
}

.btn-p.user-select-btn,
.btn-p.auth-btn,
.btn-o,
.btn.bo,
.bo.btn,
.btn-print,
.btn-exp,
.btn-csv,
.btn-sm,
.modal-btn-cancel,
.admin-action-btn,
.admin-del-btn,
.refresh-btn,
.now-btn,
.btn-amber {
  border-radius: 16px !important;
  background: rgba(255,255,255,.62) !important;
  border: 1px solid rgba(255,255,255,.78) !important;
  box-shadow: 0 10px 24px rgba(31,41,55,.08), inset 0 1px 0 rgba(255,255,255,.72) !important;
}

@media (hover:hover) and (pointer:fine) {
  .card:hover,
  .vcard:hover,
  .lcard:hover,
  .log-card:hover,
  .trip-card:hover,
  .cat:hover,
  .mcard:hover,
  .auth-btn:hover,
  .user-select-btn:hover {
    transform: translateY(-6px) scale(1.01) !important;
    box-shadow: 0 30px 66px rgba(31,41,55,.16), inset 0 1px 0 rgba(255,255,255,.86) !important;
  }
}

.sync-ok,
.syncok,
.ssr-ok {
  background: rgba(16,185,129,.14) !important;
  border-color: rgba(16,185,129,.24) !important;
}

.sync-pending,
.syncbar.canretry,
.wbar,
.warn-bar,
.ssr-pend,
.dup-warn,
.fbar {
  background: rgba(255,248,225,.66) !important;
  border-color: rgba(183,121,31,.22) !important;
}

.fixed-bottom,
.fbot {
  border-radius: 24px 24px 0 0 !important;
  background: rgba(246,248,250,.64) !important;
}

.modal {
  border-radius: 24px 24px 0 0 !important;
}

@media (max-width: 520px) {
  .hdr,
  .tbar,
  .fhdr {
    border-radius: 16px !important;
    margin: 8px 10px 12px !important;
  }

  .home-hdr,
  .login-header,
  .joining-maintenance-ui #scHome .home-txt,
  .stat-box,
  .card,
  .vcard,
  .lcard,
  .log-card,
  .trip-card,
  .tk,
  .prev-card,
  .scard,
  .cat,
  .mcard,
  .rbox,
  .admin-section,
  .auth-btn,
  .user-select-btn {
    border-radius: 20px !important;
  }
}

/* macOS-style local preview for all apps. Visual only. */
html,
body {
  background-color: #eef3f6 !important;
  background-image:
    linear-gradient(145deg, rgba(255,255,255,.9), rgba(255,255,255,0) 42%),
    linear-gradient(0deg, rgba(203,213,225,.45) 1px, transparent 1px),
    linear-gradient(90deg, rgba(203,213,225,.38) 1px, transparent 1px) !important;
  background-size: auto, 48px 48px, 48px 48px !important;
}

body,
.app {
  max-width: 980px !important;
}

.hdr,
.tbar,
.fhdr {
  min-height: 52px !important;
  margin: 14px 16px 14px !important;
  padding: 10px 14px !important;
  border: 1px solid rgba(255,255,255,.78) !important;
  border-radius: 14px !important;
  background: rgba(248,250,252,.7) !important;
  box-shadow: 0 16px 42px rgba(15,23,42,.1), inset 0 1px 0 rgba(255,255,255,.86) !important;
}

.hdr::before,
.tbar::before,
.fhdr::before {
  content: "";
  display: inline-flex;
  width: 44px;
  height: 12px;
  margin-right: 10px;
  flex: 0 0 44px;
  background:
    radial-gradient(circle at 6px 6px, #ff5f57 0 5px, transparent 5.5px),
    radial-gradient(circle at 22px 6px, #febc2e 0 5px, transparent 5.5px),
    radial-gradient(circle at 38px 6px, #28c840 0 5px, transparent 5.5px);
}

.login-header,
.home-hdr,
.joining-maintenance-ui #scHome .home-txt {
  max-width: 860px !important;
  margin: 16px auto 18px !important;
  border: 1px solid rgba(255,255,255,.78) !important;
  border-radius: 18px !important;
  background: rgba(255,255,255,.68) !important;
  box-shadow: 0 24px 60px rgba(15,23,42,.12), inset 0 1px 0 rgba(255,255,255,.9) !important;
}

.hdr-title,
.hdr-t,
.tbar-t,
.fht,
.fhdr-title,
.logo,
.home-title,
.home-t,
.login-title,
.prev-name {
  color: #0f172a !important;
  font-weight: 820 !important;
}

.hdr-sub,
.hdr-s,
.tbar-s,
.logo-sub,
.home-sub,
.home-s,
.login-sub,
.prev-sub,
.stat-cnt,
.stat-mini-lbl,
.stat-mini-sub,
.mini-lbl,
.flbl,
.fl,
.modal-flbl,
.sec,
.slbl,
.csub,
.lc-meta,
.trip-meta,
.rlbl,
.empty {
  color: #64748b !important;
}

.login-tag {
  border-radius: 10px !important;
  border-color: rgba(15,23,42,.08) !important;
  background: rgba(255,255,255,.68) !important;
  color: #0f766e !important;
  box-shadow: 0 10px 24px rgba(15,23,42,.08), inset 0 1px 0 rgba(255,255,255,.8) !important;
}

.stat-box,
.tkamt,
.net-box,
.running-box,
.card,
.vcard,
.lcard,
.log-card,
.trip-card,
.tk,
.prev-card,
.scard,
.cat,
.mcard,
.rbox,
.admin-section,
.summary-card,
.s-card,
.target-bar,
.zone-bd,
.ward-cov,
.auth-btn,
.user-select-btn,
.receipt-box,
.vehicle-details {
  border: 1px solid rgba(255,255,255,.78) !important;
  border-radius: 14px !important;
  background: rgba(255,255,255,.68) !important;
  box-shadow: 0 18px 42px rgba(15,23,42,.1), inset 0 1px 0 rgba(255,255,255,.86) !important;
}

.stat-box,
.tkamt,
.net-box,
.running-box {
  margin-top: 14px !important;
}

.stat-box::after,
.tkamt::after,
.net-box::after,
.running-box::after,
.card::after,
.vcard::after,
.lcard::after,
.log-card::after,
.trip-card::after,
.tk::after,
.prev-card::after,
.scard::after,
.cat::after,
.mcard::after,
.rbox::after,
.admin-section::after,
.auth-btn::after,
.user-select-btn::after {
  height: 3px !important;
  background: linear-gradient(90deg, #006a4e, #3b82f6, #b7791f) !important;
  opacity: .64 !important;
}

.stat-mini,
.stat-info,
.mini-row,
.auto-chip,
.chip,
.info-box,
.info-strip,
.who,
.rst-box,
.fixed-amt-box,
.green-panel,
.log-sum,
.refresh-row,
.summary-card,
.s-card {
  border-radius: 10px !important;
  background: rgba(248,250,252,.58) !important;
  border-color: rgba(15,23,42,.08) !important;
}

.av,
.user-select-avatar,
.auth-av,
.sav,
.suc-icon {
  border-radius: 10px !important;
  background: linear-gradient(145deg, #0f5138, #006a4e) !important;
  color: #fff !important;
  box-shadow: 0 8px 18px rgba(0,106,78,.18), inset 0 1px 0 rgba(255,255,255,.26) !important;
}

.btn-back,
.bb,
.hdr-back,
.pin-key,
.tab,
.range-tab,
.rt,
.fpill,
.tog,
.modal-tog,
.veh-trigger,
.vbtn,
input,
select,
textarea,
.finp,
.fsel,
.ftxt,
.fi,
.fta,
.search-inp,
.modal-inp {
  border-radius: 10px !important;
  border-color: rgba(15,23,42,.1) !important;
  background: rgba(255,255,255,.7) !important;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.8), 0 8px 18px rgba(15,23,42,.05) !important;
}

.btn-p,
.btn-sub,
.btn.bp,
.bp.btn,
.submit-btn,
.modal-btn-save,
.btn-sm.green,
.admin-add-btn,
.mrf-connect-btn.primary {
  border-radius: 10px !important;
  background: linear-gradient(145deg, #0f5138, #006a4e) !important;
  border: 1px solid rgba(15,23,42,.08) !important;
  box-shadow: 0 12px 26px rgba(0,106,78,.18), inset 0 1px 0 rgba(255,255,255,.2) !important;
}

.btn-p.user-select-btn,
.btn-p.auth-btn,
.btn-o,
.btn.bo,
.bo.btn,
.btn-print,
.btn-exp,
.btn-csv,
.btn-sm,
.modal-btn-cancel,
.admin-action-btn,
.admin-del-btn,
.refresh-btn,
.now-btn,
.btn-amber {
  border-radius: 10px !important;
  background: rgba(255,255,255,.72) !important;
  border: 1px solid rgba(15,23,42,.09) !important;
  box-shadow: 0 10px 24px rgba(15,23,42,.08), inset 0 1px 0 rgba(255,255,255,.78) !important;
}

.fixed-bottom,
.fbot {
  max-width: 980px !important;
  border-radius: 16px 16px 0 0 !important;
  background: rgba(248,250,252,.74) !important;
}

.modal {
  border-radius: 16px 16px 0 0 !important;
}

@media (min-width: 760px) {
  .stat-box,
  .summary-grid,
  .target-bar,
  .zone-bd,
  .ward-cov,
  .sync-bar,
  .syncbar,
  .warn-bar,
  .wbar,
  .refresh-row,
  .btn-p,
  .btn-o,
  .btn-wa,
  .btn-csv,
  .btn-print,
  .btn-exp,
  .btn-md,
  .btn-amber,
  .btn-sub,
  .vehicle-summary-line,
  .tab-row,
  .range-tabs,
  .tabs,
  .fbar,
  .search-box,
  .lwrap,
  .admin-wrap,
  .swrap,
  .rbox,
  .receipt-btns,
  .prev-acts,
  .home-acts,
  .hbody,
  .auth-opts,
  .pin-section,
  .fw,
  .fwrap,
  .form-w {
    max-width: 860px !important;
  }
}

@media (max-width: 560px) {
  body,
  .app {
    max-width: 100% !important;
  }

  .hdr,
  .tbar,
  .fhdr {
    margin: 8px 10px 12px !important;
    border-radius: 12px !important;
  }

  .hdr::before,
  .tbar::before,
  .fhdr::before {
    display: none !important;
  }

  .login-header,
  .home-hdr,
  .joining-maintenance-ui #scHome .home-txt,
  .stat-box,
  .card,
  .vcard,
  .lcard,
  .log-card,
  .trip-card,
  .tk,
  .prev-card,
  .scard,
  .cat,
  .mcard,
  .rbox,
  .admin-section,
  .auth-btn,
  .user-select-btn {
    border-radius: 14px !important;
  }
}

/* Samsung One UI local preview for all apps. Visual only, no extra tabs/buttons. */
html,
body {
  background: #f5f6fa !important;
  background-image: none !important;
}

body::before {
  display: none !important;
  content: none !important;
}

.screen,
.scr,
.sc,
.screen.active,
.scr.on,
.sc.on,
.app {
  background: #f5f6fa !important;
  background-image: none !important;
}

body,
.app {
  max-width: 980px !important;
}

.hdr::before,
.tbar::before,
.fhdr::before {
  display: none !important;
}

.hdr,
.tbar,
.fhdr {
  min-height: 58px !important;
  margin: 0 0 14px !important;
  padding: 12px 16px !important;
  border: 0 !important;
  border-radius: 0 0 22px 22px !important;
  background: #f3f5f9 !important;
  box-shadow: none !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
}

.login-header,
.home-hdr,
.joining-maintenance-ui #scHome .home-txt {
  max-width: 860px !important;
  margin: 0 auto 18px !important;
  padding: 38px 20px 30px !important;
  border: 0 !important;
  border-radius: 0 0 28px 28px !important;
  background: #f3f5f9 !important;
  box-shadow: none !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
}

.hdr-title,
.hdr-t,
.tbar-t,
.fht,
.fhdr-title,
.logo,
.home-title,
.home-t,
.login-title,
.prev-name {
  color: #171b20 !important;
  font-weight: 850 !important;
  text-transform: none !important;
}

.login-title,
.home-title,
.joining-maintenance-ui #scHome .home-t {
  font-size: clamp(2rem, 7vw, 3.2rem) !important;
  line-height: .98 !important;
}

.hdr-sub,
.hdr-s,
.tbar-s,
.logo-sub,
.home-sub,
.home-s,
.login-sub,
.prev-sub,
.stat-cnt,
.stat-mini-lbl,
.stat-mini-sub,
.mini-lbl,
.flbl,
.fl,
.modal-flbl,
.sec,
.slbl,
.csub,
.lc-meta,
.trip-meta,
.rlbl,
.empty {
  color: #737d89 !important;
  text-transform: none !important;
}

.login-tag {
  display: inline-flex !important;
  min-height: 28px !important;
  margin-bottom: 12px !important;
  padding: 6px 11px !important;
  border: 0 !important;
  border-radius: 999px !important;
  background: #e8f3ee !important;
  color: #006a4e !important;
  box-shadow: none !important;
  text-transform: none !important;
}

.stat-box,
.tkamt,
.net-box,
.running-box,
.card,
.vcard,
.lcard,
.log-card,
.trip-card,
.tk,
.prev-card,
.scard,
.cat,
.mcard,
.rbox,
.admin-section,
.summary-card,
.s-card,
.target-bar,
.zone-bd,
.ward-cov,
.auth-btn,
.user-select-btn,
.receipt-box,
.vehicle-details {
  border: 0 !important;
  border-radius: 22px !important;
  background: #fff !important;
  box-shadow: 0 10px 28px rgba(20,31,45,.07) !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
}

.stat-box::after,
.tkamt::after,
.net-box::after,
.running-box::after,
.card::after,
.vcard::after,
.lcard::after,
.log-card::after,
.trip-card::after,
.tk::after,
.prev-card::after,
.scard::after,
.cat::after,
.mcard::after,
.rbox::after,
.admin-section::after,
.auth-btn::after,
.user-select-btn::after {
  display: none !important;
}

.stat-mini,
.stat-info,
.mini-row,
.auto-chip,
.chip,
.info-box,
.info-strip,
.who,
.rst-box,
.fixed-amt-box,
.green-panel,
.log-sum,
.refresh-row,
.summary-card,
.s-card {
  border: 0 !important;
  border-radius: 18px !important;
  background: #f6f8fb !important;
  box-shadow: none !important;
}

.stat-big,
.stat-mini-val,
.mini-val,
.tkamt-v,
.net-kg,
.running-val,
.s-card-val,
.summary-card-val,
.fixed-amt-num,
.rst-num,
.camt,
.lc-ltr,
.trip-net-kg,
.rhi {
  color: #171b20 !important;
}

.av,
.user-select-avatar,
.auth-av,
.sav,
.suc-icon {
  border: 0 !important;
  border-radius: 16px !important;
  background: #006a4e !important;
  color: #fff !important;
  box-shadow: 0 10px 20px rgba(0,106,78,.2) !important;
}

.btn-back,
.bb,
.hdr-back,
.pin-key,
.tab,
.range-tab,
.rt,
.fpill,
.tog,
.modal-tog,
.veh-trigger,
.vbtn,
input,
select,
textarea,
.finp,
.fsel,
.ftxt,
.fi,
.fta,
.search-inp,
.modal-inp {
  border: 0 !important;
  border-radius: 16px !important;
  background: #fff !important;
  box-shadow: none !important;
}

input,
select,
textarea,
.finp,
.fsel,
.ftxt,
.fi,
.fta,
.search-inp,
.modal-inp {
  border: 1px solid #e3e7ee !important;
}

.btn-p,
.btn-sub,
.btn.bp,
.bp.btn,
.submit-btn,
.modal-btn-save,
.btn-sm.green,
.admin-add-btn,
.mrf-connect-btn.primary {
  border: 0 !important;
  border-radius: 16px !important;
  background: #006a4e !important;
  color: #fff !important;
  box-shadow: 0 10px 22px rgba(0,106,78,.17) !important;
}

.btn-p.user-select-btn,
.btn-p.auth-btn,
.btn-o,
.btn.bo,
.bo.btn,
.btn-print,
.btn-exp,
.btn-csv,
.btn-sm,
.modal-btn-cancel,
.admin-action-btn,
.admin-del-btn,
.refresh-btn,
.now-btn,
.btn-amber {
  border: 0 !important;
  border-radius: 16px !important;
  background: #fff !important;
  color: #006a4e !important;
  box-shadow: 0 8px 20px rgba(20,31,45,.06) !important;
}

.sync-ok,
.syncok,
.ssr-ok {
  border: 0 !important;
  border-radius: 16px !important;
  background: #dff4ed !important;
  color: #006a4e !important;
}

.sync-pending,
.syncbar.canretry,
.wbar,
.warn-bar,
.ssr-pend,
.dup-warn,
.fbar {
  border: 0 !important;
  border-radius: 16px !important;
  background: #fff4df !important;
  color: #8a5a10 !important;
}

.fixed-bottom,
.fbot {
  max-width: 980px !important;
  border: 0 !important;
  border-radius: 24px 24px 0 0 !important;
  background: rgba(243,245,249,.96) !important;
  box-shadow: 0 -10px 28px rgba(20,31,45,.08) !important;
  backdrop-filter: blur(14px) !important;
  -webkit-backdrop-filter: blur(14px) !important;
}

.modal {
  border-radius: 24px 24px 0 0 !important;
  background: #fff !important;
}

@media (hover:hover) and (pointer:fine) {
  .card:hover,
  .vcard:hover,
  .lcard:hover,
  .log-card:hover,
  .trip-card:hover,
  .cat:hover,
  .mcard:hover,
  .auth-btn:hover,
  .user-select-btn:hover {
    transform: translateY(-3px) !important;
    box-shadow: 0 14px 34px rgba(20,31,45,.1) !important;
  }
}

@media (min-width: 760px) {
  .stat-box,
  .summary-grid,
  .target-bar,
  .zone-bd,
  .ward-cov,
  .sync-bar,
  .syncbar,
  .warn-bar,
  .wbar,
  .refresh-row,
  .btn-p,
  .btn-o,
  .btn-wa,
  .btn-csv,
  .btn-print,
  .btn-exp,
  .btn-md,
  .btn-amber,
  .btn-sub,
  .vehicle-summary-line,
  .tab-row,
  .range-tabs,
  .tabs,
  .fbar,
  .search-box,
  .lwrap,
  .admin-wrap,
  .swrap,
  .rbox,
  .receipt-btns,
  .prev-acts,
  .home-acts,
  .hbody,
  .auth-opts,
  .pin-section,
  .fw,
  .fwrap,
  .form-w {
    max-width: 860px !important;
  }
}

@media (max-width: 560px) {
  body,
  .app {
    max-width: 100% !important;
  }

  .hdr,
  .tbar,
  .fhdr {
    margin-bottom: 10px !important;
    border-radius: 0 0 20px 20px !important;
  }

  .login-header,
  .home-hdr,
  .joining-maintenance-ui #scHome .home-txt {
    padding: 34px 16px 26px !important;
    border-radius: 0 0 26px 26px !important;
  }

  .stat-box,
  .card,
  .vcard,
  .lcard,
  .log-card,
  .trip-card,
  .tk,
  .prev-card,
  .scard,
  .cat,
  .mcard,
  .rbox,
  .admin-section,
  .auth-btn,
  .user-select-btn {
    border-radius: 20px !important;
  }
}

/* One UI action/status controls inside every app. */
.btn-p,
.btn-o,
.btn-wa,
.btn-csv,
.btn-print,
.btn-exp,
.btn-md,
.btn-amber,
.btn-sub,
.btn-sm,
.btn,
.submit-btn,
.admin-add-btn,
.modal-btn-save,
.modal-btn-cancel,
.mrf-connect-btn {
  min-height: 56px !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 8px !important;
  padding: 0 18px !important;
  border-radius: 18px !important;
  font-size: 14px !important;
  font-weight: 850 !important;
  letter-spacing: 0 !important;
  text-align: center !important;
  text-transform: none !important;
}

.btn-p,
.btn-sub,
.btn.bp,
.bp.btn,
.submit-btn,
.modal-btn-save,
.admin-add-btn,
.mrf-connect-btn.primary {
  background: #006a4e !important;
  color: #fff !important;
  box-shadow: 0 10px 22px rgba(0,106,78,.16) !important;
}

.btn-o,
.btn.bo,
.bo.btn,
.btn-print,
.btn-exp,
.btn-csv,
.btn-sm,
.btn-amber,
.modal-btn-cancel,
.mrf-connect-btn,
.vehicle-summary-line,
.sync-bar,
.syncbar,
.refresh-row,
.target-bar,
.zone-bd,
.ward-cov,
.dash-date,
.who,
.warn-bar,
.wbar {
  min-height: 50px !important;
  border: 0 !important;
  border-radius: 18px !important;
  background: #fff !important;
  color: #006a4e !important;
  box-shadow: 0 8px 20px rgba(20,31,45,.055) !important;
}

.vehicle-summary-line,
.sync-bar,
.syncbar,
.refresh-row,
.target-bar,
.zone-bd,
.ward-cov,
.dash-date,
.who {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  padding: 14px 16px !important;
  font-size: 14px !important;
  font-weight: 760 !important;
  letter-spacing: 0 !important;
  text-align: center !important;
}

.dash-date {
  min-height: auto !important;
  justify-content: flex-start !important;
  background: transparent !important;
  box-shadow: none !important;
  color: #737d89 !important;
  padding-top: 6px !important;
  padding-bottom: 8px !important;
}

.sync-ok,
.syncok,
.ssr-ok {
  background: #dff4ed !important;
  color: #006a4e !important;
  box-shadow: none !important;
}

.sync-pending,
.syncbar.canretry,
.wbar,
.warn-bar,
.ssr-pend,
.dup-warn,
.fbar {
  background: #fff4df !important;
  color: #8a5a10 !important;
  box-shadow: none !important;
}

.tab-row,
.tabs,
.range-tabs,
.tab-bar,
.fbar {
  padding-top: 8px !important;
  padding-bottom: 8px !important;
}

.tab,
.range-tab,
.rt,
.fpill,
.tog,
.modal-tog {
  min-height: 40px !important;
  border: 0 !important;
  border-radius: 999px !important;
  background: #fff !important;
  color: #5f6b78 !important;
  box-shadow: none !important;
  font-size: 13px !important;
  font-weight: 780 !important;
}

.tab.active,
.tab.on,
.range-tab.active,
.rt.active,
.fpill.on,
.tog.active,
.modal-tog.active {
  background: #006a4e !important;
  color: #fff !important;
}

@media (min-width: 760px) {
  .btn-p,
  .btn-o,
  .btn-wa,
  .btn-csv,
  .btn-print,
  .btn-exp,
  .btn-md,
  .btn-amber,
  .btn-sub,
  .vehicle-summary-line,
  .sync-bar,
  .syncbar,
  .refresh-row,
  .target-bar,
  .zone-bd,
  .ward-cov,
  .dash-date,
  .who,
  .warn-bar,
  .wbar {
    width: min(100% - 32px, 860px) !important;
  }
}

@media (max-width: 560px) {
  .btn-p,
  .btn-o,
  .btn-wa,
  .btn-csv,
  .btn-print,
  .btn-exp,
  .btn-md,
  .btn-amber,
  .btn-sub,
  .vehicle-summary-line,
  .sync-bar,
  .syncbar,
  .refresh-row,
  .target-bar,
  .zone-bd,
  .ward-cov,
  .who,
  .warn-bar,
  .wbar {
    width: calc(100% - 28px) !important;
    margin-left: 14px !important;
    margin-right: 14px !important;
  }
}

/* Preserve app logic: CSS must not reveal controls hidden by each app. */
[style*="display:none"],
[style*="display: none"] {
  display: none !important;
}

/* Replace bulky "Updated" success bars with a compact animated live signal. */
.sync-ok,
.syncbar.syncok,
.ssr-ok,
.sync-status-receipt.ssr-ok {
  display: none !important;
}

.hdr,
.tbar {
  position: sticky !important;
}

.hdr::after,
.tbar::after {
  content: "";
  position: absolute;
  top: 19px;
  right: 64px;
  width: 10px;
  height: 10px;
  border-radius: 999px;
  background: #00a86b;
  box-shadow: 0 0 0 0 rgba(0,168,107,.34);
  animation: oneui-live-pulse 1.8s ease-out infinite;
}

.hdr::before,
.tbar::before {
  content: none !important;
  display: none !important;
}

@keyframes oneui-live-pulse {
  0% {
    box-shadow: 0 0 0 0 rgba(0,168,107,.34);
  }

  70% {
    box-shadow: 0 0 0 9px rgba(0,168,107,0);
  }

  100% {
    box-shadow: 0 0 0 0 rgba(0,168,107,0);
  }
}

@media (max-width: 560px) {
  .hdr::after,
  .tbar::after {
    right: 58px;
  }

  .hdr::before,
  .tbar::before {
    content: none !important;
    display: none !important;
  }
}

/* Responsive One UI layout: phone, tablet, desktop without fake controls. */
html,
body {
  width: 100% !important;
  min-height: 100vh !important;
  overflow-x: hidden !important;
}

body,
.app,
.fbot,
.fixed-bottom,
.flash {
  max-width: 520px !important;
  margin-left: auto !important;
  margin-right: auto !important;
}

.hdr::after,
.tbar::after,
.fhdr::after,
.hdr::before,
.tbar::before,
.fhdr::before {
  content: none !important;
  display: none !important;
}

.lwrap,
.slist,
#vlist,
#trip-list,
#dash-modules,
.home-acts,
.hbody,
.auth-opts,
.pin-section,
.fw,
.fwrap,
.form-w,
.admin-wrap,
.receipt-btns,
.prev-acts {
  display: block !important;
  max-width: 520px !important;
  margin-left: auto !important;
  margin-right: auto !important;
}

.lwrap > *,
.slist > *,
#vlist > *,
#trip-list > *,
#dash-modules > * {
  margin-left: 16px !important;
  margin-right: 16px !important;
}

.stat-box,
.summary-grid,
.target-bar,
.zone-bd,
.ward-cov,
.sync-bar,
.syncbar,
.warn-bar,
.wbar,
.refresh-row,
.btn-p,
.btn-o,
.btn-wa,
.btn-csv,
.btn-print,
.btn-exp,
.btn-md,
.btn-amber,
.btn-sub,
.vehicle-summary-line,
.dash-date,
.who,
.search-box,
.range-tabs,
.tabs,
.tab-row,
.fbar,
.rbox,
.swrap {
  width: calc(100% - 32px) !important;
  max-width: 488px !important;
  margin-left: 16px !important;
  margin-right: 16px !important;
}

.summary-grid,
.stat-grid,
.cat-grid,
.f2,
.out-grid {
  display: grid !important;
  grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  gap: 10px !important;
}

#dash-modules .mcard,
.mcard,
.card,
.vcard,
.lcard,
.log-card,
.trip-card,
.tk,
.prev-card,
.scard,
.cat,
.rbox,
.admin-section {
  margin-bottom: 10px !important;
}

.mcard,
.card,
.vcard,
.lcard,
.log-card,
.trip-card,
.tk,
.prev-card,
.scard,
.cat,
.rbox,
.admin-section,
.stat-box {
  border-radius: 20px !important;
}

.mcard-title,
.lc-name,
.trip-veh,
.home-title,
.login-title,
.stat-big {
  word-break: normal !important;
  overflow-wrap: anywhere !important;
}

.user-select-btn,
.auth-btn,
.btn-p.user-select-btn,
.btn-p.auth-btn {
  color: #171b20 !important;
  background: #fff !important;
  opacity: 1 !important;
}

.user-select-btn strong,
.user-select-btn em,
.auth-btn .auth-n,
.auth-btn .auth-r,
.btn-p.user-select-btn span,
.btn-p.auth-btn span,
#user-list .user-select-btn,
#user-list .user-select-btn * {
  color: inherit !important;
  opacity: 1 !important;
}

.user-select-btn em,
.auth-btn .auth-r,
.btn-p.user-select-btn span,
#user-list .user-select-btn span {
  color: #737d89 !important;
}

#user-list .user-select-btn {
  color: #171b20 !important;
}

@media (min-width: 700px) {
  body,
  .app,
  .fbot,
  .fixed-bottom,
  .flash {
    max-width: 760px !important;
  }

  .lwrap,
  .slist,
  #vlist,
  #trip-list,
  #dash-modules {
    display: grid !important;
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 12px !important;
    max-width: 728px !important;
    padding-left: 16px !important;
    padding-right: 16px !important;
  }

  .lwrap > *,
  .slist > *,
  #vlist > *,
  #trip-list > *,
  #dash-modules > * {
    margin-left: 0 !important;
    margin-right: 0 !important;
    min-width: 0 !important;
  }

  .stat-box,
  .summary-grid,
  .target-bar,
  .zone-bd,
  .ward-cov,
  .sync-bar,
  .syncbar,
  .warn-bar,
  .wbar,
  .refresh-row,
  .btn-p,
  .btn-o,
  .btn-wa,
  .btn-csv,
  .btn-print,
  .btn-exp,
  .btn-md,
  .btn-amber,
  .btn-sub,
  .vehicle-summary-line,
  .dash-date,
  .who,
  .search-box,
  .range-tabs,
  .tabs,
  .tab-row,
  .fbar,
  .rbox,
  .swrap {
    width: calc(100% - 32px) !important;
    max-width: 728px !important;
    margin-left: 16px !important;
    margin-right: 16px !important;
  }

  .home-acts,
  .hbody,
  .auth-opts,
  .pin-section,
  .fw,
  .fwrap,
  .form-w,
  .admin-wrap,
  .receipt-btns,
  .prev-acts {
    max-width: 728px !important;
  }

  .login-title,
  .home-title,
  .joining-maintenance-ui #scHome .home-t {
    font-size: 42px !important;
  }

  .stat-big {
    font-size: 46px !important;
  }

  .mcard-title,
  .lc-name,
  .trip-veh,
  .cname {
    font-size: 16px !important;
  }

  .btn-p,
  .btn-o,
  .btn-wa,
  .btn-csv,
  .btn-print,
  .btn-exp,
  .btn-md,
  .btn-amber,
  .btn-sub,
  .btn-sm,
  .btn,
  .submit-btn {
    font-size: 15px !important;
  }

  .range-tabs,
  .tabs,
  .tab-row,
  .fbar,
  .tab-bar {
    overflow-x: visible !important;
    flex-wrap: wrap !important;
    gap: 8px !important;
  }

  .tab,
  .range-tab,
  .rt,
  .fpill {
    flex: 0 1 auto !important;
    min-width: 96px !important;
    padding-left: 14px !important;
    padding-right: 14px !important;
  }
}

@media (min-width: 1024px) {
  body,
  .app,
  .fbot,
  .fixed-bottom,
  .flash {
    max-width: 980px !important;
  }

  .lwrap,
  .slist,
  #vlist,
  #trip-list,
  #dash-modules {
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
    max-width: 948px !important;
  }

  .mrf-supervisor-ui #dash-modules,
  body:has(#dash-modules) #dash-modules {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  }

  .stat-box,
  .summary-grid,
  .target-bar,
  .zone-bd,
  .ward-cov,
  .sync-bar,
  .syncbar,
  .warn-bar,
  .wbar,
  .refresh-row,
  .btn-p,
  .btn-o,
  .btn-wa,
  .btn-csv,
  .btn-print,
  .btn-exp,
  .btn-md,
  .btn-amber,
  .btn-sub,
  .vehicle-summary-line,
  .dash-date,
  .who,
  .search-box,
  .range-tabs,
  .tabs,
  .tab-row,
  .fbar,
  .rbox,
  .swrap,
  .home-acts,
  .hbody,
  .auth-opts,
  .pin-section,
  .fw,
  .fwrap,
  .form-w,
  .admin-wrap,
  .receipt-btns,
  .prev-acts {
    max-width: 948px !important;
  }

  .login-header,
  .home-hdr,
  .joining-maintenance-ui #scHome .home-txt {
    max-width: 948px !important;
  }
}

@media (max-width: 699px) {
  body,
  .app,
  .fbot,
  .fixed-bottom,
  .flash {
    max-width: 100% !important;
  }

  .range-tabs,
  .tabs,
  .tab-row,
  .fbar,
  .tab-bar {
    overflow-x: auto !important;
    flex-wrap: nowrap !important;
    -webkit-overflow-scrolling: touch !important;
  }

  .tab,
  .range-tab,
  .rt,
  .fpill {
    flex: 0 0 auto !important;
    white-space: nowrap !important;
  }
}

@media (max-width: 560px) {
  .login-title,
  .home-title,
  .joining-maintenance-ui #scHome .home-t {
    font-size: 32px !important;
  }

  .stat-big {
    font-size: 36px !important;
  }

  .mcard-title,
  .lc-name,
  .trip-veh,
  .cname {
    font-size: 14px !important;
  }

  .btn-p,
  .btn-o,
  .btn-wa,
  .btn-csv,
  .btn-print,
  .btn-exp,
  .btn-md,
  .btn-amber,
  .btn-sub,
  .btn-sm,
  .btn,
  .submit-btn {
    font-size: 14px !important;
  }
}

@media (max-width: 390px) {
  .login-title,
  .home-title,
  .joining-maintenance-ui #scHome .home-t {
    font-size: 28px !important;
  }

  .summary-grid,
  .stat-grid,
  .cat-grid,
  .f2,
  .out-grid {
    grid-template-columns: 1fr !important;
  }

  .stat-box,
  .summary-grid,
  .target-bar,
  .zone-bd,
  .ward-cov,
  .sync-bar,
  .syncbar,
  .warn-bar,
  .wbar,
  .refresh-row,
  .btn-p,
  .btn-o,
  .btn-wa,
  .btn-csv,
  .btn-print,
  .btn-exp,
  .btn-md,
  .btn-amber,
  .btn-sub,
  .vehicle-summary-line,
  .dash-date,
  .who,
  .search-box,
  .range-tabs,
  .tabs,
  .tab-row,
  .fbar,
  .rbox,
  .swrap {
    width: calc(100% - 24px) !important;
    margin-left: 12px !important;
    margin-right: 12px !important;
  }
}

/* Fuel log One UI cleanup */
.fuel-maintenance-ui #screen-log {
  background: #f5f6fa !important;
  padding: 18px 0 28px !important;
}

.fuel-maintenance-ui #screen-log .log-hdr {
  width: calc(100% - 32px) !important;
  max-width: 488px !important;
  margin: 0 16px 14px !important;
  padding: 18px !important;
  display: grid !important;
  grid-template-columns: auto 1fr !important;
  align-items: center !important;
  gap: 12px !important;
  background: #fff !important;
  border: 1px solid rgba(17, 24, 39, .06) !important;
  border-radius: 24px !important;
  box-shadow: 0 18px 48px rgba(17, 24, 39, .08) !important;
}

.fuel-maintenance-ui #screen-log .log-hdr .btn-back {
  width: 42px !important;
  height: 42px !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  padding: 0 !important;
  border: 0 !important;
  border-radius: 999px !important;
  background: #eef2f7 !important;
  color: #171b20 !important;
  font-size: 0 !important;
  box-shadow: none !important;
}

.fuel-maintenance-ui #screen-log .log-hdr .btn-back::before {
  content: "<" !important;
  font-size: 20px !important;
  font-weight: 900 !important;
  line-height: 1 !important;
}

.fuel-maintenance-ui #screen-log .log-title {
  color: #171b20 !important;
  font-size: 28px !important;
  font-weight: 900 !important;
  letter-spacing: 0 !important;
  text-align: left !important;
}

.fuel-maintenance-ui #screen-log .range-tabs {
  width: calc(100% - 32px) !important;
  max-width: 488px !important;
  margin: 0 16px 10px !important;
  padding: 4px !important;
  display: flex !important;
  gap: 4px !important;
  background: #e9edf3 !important;
  border: 0 !important;
  border-radius: 18px !important;
  box-shadow: inset 0 1px 2px rgba(17, 24, 39, .04) !important;
}

.fuel-maintenance-ui #screen-log .rt {
  flex: 1 1 auto !important;
  min-width: 0 !important;
  height: 42px !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  padding: 0 16px !important;
  border: 0 !important;
  border-radius: 14px !important;
  background: transparent !important;
  color: #6b7582 !important;
  font-size: 14px !important;
  font-weight: 850 !important;
  letter-spacing: 0 !important;
  text-transform: none !important;
}

.fuel-maintenance-ui #screen-log .rt.active {
  background: #fff !important;
  color: #00785f !important;
  box-shadow: 0 8px 18px rgba(17, 24, 39, .08) !important;
}

.fuel-maintenance-ui #screen-log .date-range-box {
  width: calc(100% - 32px) !important;
  max-width: 488px !important;
  margin: 0 16px 10px !important;
  padding: 12px !important;
  background: #fff !important;
  border: 1px solid rgba(17, 24, 39, .06) !important;
  border-radius: 20px !important;
}

.fuel-maintenance-ui #screen-log .date-inp {
  height: 44px !important;
  border: 0 !important;
  border-radius: 14px !important;
  background: #f3f5f8 !important;
  color: #171b20 !important;
  font-weight: 750 !important;
}

.fuel-maintenance-ui #screen-log .search-box {
  height: 54px !important;
  padding: 0 16px !important;
  background: #fff !important;
  border: 1px solid rgba(17, 24, 39, .06) !important;
  border-radius: 20px !important;
  box-shadow: 0 12px 34px rgba(17, 24, 39, .06) !important;
}

.fuel-maintenance-ui #screen-log .search-box span::before {
  content: "Search" !important;
  color: #8a95a3 !important;
  font-size: 13px !important;
  font-weight: 800 !important;
  margin-right: 10px !important;
}

.fuel-maintenance-ui #screen-log .search-inp {
  font-size: 15px !important;
  font-weight: 700 !important;
  color: #171b20 !important;
}

.fuel-maintenance-ui #screen-log #log-list {
  width: 100% !important;
}

.fuel-maintenance-ui #screen-log #log-list > div[style*="background:var(--primary)"] {
  width: calc(100% - 32px) !important;
  max-width: 488px !important;
  margin: 0 16px 12px !important;
  padding: 16px !important;
  background: #e7f7f2 !important;
  color: #00785f !important;
  border: 1px solid rgba(0, 120, 95, .12) !important;
  border-radius: 20px !important;
  font-size: 14px !important;
  box-shadow: none !important;
}

.fuel-maintenance-ui #screen-log .log-card {
  width: calc(100% - 32px) !important;
  max-width: 488px !important;
  margin: 0 16px 12px !important;
  padding: 16px !important;
  background: #fff !important;
  border: 1px solid rgba(17, 24, 39, .06) !important;
  border-radius: 24px !important;
  box-shadow: 0 16px 42px rgba(17, 24, 39, .07) !important;
}

.fuel-maintenance-ui #screen-log .lc-top {
  align-items: flex-start !important;
  gap: 12px !important;
}

.fuel-maintenance-ui #screen-log .lc-top div[style*="font-size:14px"] {
  color: #171b20 !important;
  font-size: 16px !important;
  font-weight: 900 !important;
  letter-spacing: 0 !important;
}

.fuel-maintenance-ui #screen-log .lc-meta {
  margin-top: 5px !important;
  color: #6b7582 !important;
  font-size: 13px !important;
  font-weight: 700 !important;
}

.fuel-maintenance-ui #screen-log .lc-ltr {
  min-width: 88px !important;
  color: #00785f !important;
  font-size: 20px !important;
  font-weight: 950 !important;
}

.fuel-maintenance-ui #screen-log .lc-ltr br {
  display: none !important;
}

.fuel-maintenance-ui #screen-log .lc-footer {
  display: flex !important;
  flex-wrap: wrap !important;
  gap: 8px !important;
  margin-top: 14px !important;
  padding-top: 12px !important;
  border-top: 1px solid rgba(17, 24, 39, .06) !important;
}

.fuel-maintenance-ui #screen-log .lc-chip,
.fuel-maintenance-ui #screen-log .lc-eff,
.fuel-maintenance-ui #screen-log .lc-flag {
  height: 30px !important;
  display: inline-flex !important;
  align-items: center !important;
  border: 0 !important;
  border-radius: 999px !important;
  padding: 0 11px !important;
  background: #f1f4f8 !important;
  color: #46515f !important;
  font-size: 12px !important;
  font-weight: 850 !important;
}

.fuel-maintenance-ui #screen-log .lc-eff,
.fuel-maintenance-ui #screen-log .lc-flag {
  background: #fff3e8 !important;
  color: #d75a00 !important;
}

.fuel-maintenance-ui #screen-log .lc-chip:empty {
  display: none !important;
}

.fuel-maintenance-ui #screen-log .log-card > div[style*="font-style:italic"] {
  display: inline-flex !important;
  align-items: center !important;
  min-height: 30px !important;
  margin-top: 12px !important;
  padding: 0 11px !important;
  border-radius: 999px !important;
  background: #eef7f4 !important;
  color: #00785f !important;
  font-size: 12px !important;
  font-style: normal !important;
  font-weight: 850 !important;
}

.fuel-maintenance-ui #screen-log .btn-csv,
.fuel-maintenance-ui #screen-log .btn-wa {
  height: 56px !important;
  border-radius: 20px !important;
  letter-spacing: 0 !important;
  text-transform: none !important;
  font-size: 15px !important;
  box-shadow: 0 12px 30px rgba(0, 120, 95, .14) !important;
}

@media (min-width: 700px) {
  .fuel-maintenance-ui #screen-log .log-hdr,
  .fuel-maintenance-ui #screen-log .range-tabs,
  .fuel-maintenance-ui #screen-log .date-range-box,
  .fuel-maintenance-ui #screen-log #log-list > div[style*="background:var(--primary)"],
  .fuel-maintenance-ui #screen-log .log-card {
    max-width: 728px !important;
  }

  .fuel-maintenance-ui #screen-log .log-title {
    font-size: 34px !important;
  }
}

@media (min-width: 1024px) {
  .fuel-maintenance-ui #screen-log .log-hdr,
  .fuel-maintenance-ui #screen-log .range-tabs,
  .fuel-maintenance-ui #screen-log .date-range-box,
  .fuel-maintenance-ui #screen-log #log-list > div[style*="background:var(--primary)"],
  .fuel-maintenance-ui #screen-log .log-card {
    max-width: 948px !important;
  }
}

@media (max-width: 390px) {
  .fuel-maintenance-ui #screen-log {
    padding-top: 12px !important;
  }

  .fuel-maintenance-ui #screen-log .log-hdr,
  .fuel-maintenance-ui #screen-log .range-tabs,
  .fuel-maintenance-ui #screen-log .date-range-box,
  .fuel-maintenance-ui #screen-log #log-list > div[style*="background:var(--primary)"],
  .fuel-maintenance-ui #screen-log .log-card {
    width: calc(100% - 24px) !important;
    margin-left: 12px !important;
    margin-right: 12px !important;
  }

  .fuel-maintenance-ui #screen-log .log-title {
    font-size: 24px !important;
  }
}

/* User Charge daily target must remain a real progress card. */
body:has(#target-bar) #target-bar.target-bar {
  display: block !important;
  min-height: 118px !important;
  padding: 18px 18px 16px !important;
  background: #fff !important;
  border: 1px solid rgba(0, 106, 78, .12) !important;
  border-radius: 22px !important;
  box-shadow: 0 12px 30px rgba(20, 31, 45, .06) !important;
  color: #20343a !important;
  text-align: left !important;
}

body:has(#target-bar) #target-bar .target-row {
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  gap: 12px !important;
  width: 100% !important;
  margin: 0 0 12px !important;
}

body:has(#target-bar) #target-bar .target-row:last-child {
  margin: 14px 0 0 !important;
}

body:has(#target-bar) #target-bar .target-lbl {
  color: #5c6a70 !important;
  font-size: 14px !important;
  font-weight: 900 !important;
  letter-spacing: .02em !important;
  text-transform: uppercase !important;
}

body:has(#target-bar) #target-bar .target-pct {
  color: #00785f !important;
  font-size: 20px !important;
  font-weight: 950 !important;
  letter-spacing: 0 !important;
}

body:has(#target-bar) #target-bar .target-bar-bg {
  width: 100% !important;
  height: 14px !important;
  display: block !important;
  overflow: hidden !important;
  background: #e8efeb !important;
  border-radius: 999px !important;
  box-shadow: inset 0 1px 2px rgba(20, 31, 45, .05) !important;
}

body:has(#target-bar) #target-bar .target-bar-fill {
  height: 100% !important;
  min-width: 0 !important;
  display: block !important;
  border-radius: 999px !important;
  background: linear-gradient(90deg, #00785f, #18b892) !important;
  box-shadow: 0 0 18px rgba(0, 120, 95, .28) !important;
  transition: width 420ms ease !important;
}

body:has(#target-bar) #target-bar .target-bar-fill.over {
  background: linear-gradient(90deg, #00785f, #62d36f) !important;
}

body:has(#target-bar) #target-bar .target-val {
  color: #20343a !important;
  font-size: 17px !important;
  font-weight: 900 !important;
  letter-spacing: 0 !important;
}

body:has(#target-bar) #target-bar #target-rem {
  color: #20343a !important;
  text-align: right !important;
}

@media (max-width: 430px) {
  body:has(#target-bar) #target-bar.target-bar {
    min-height: 108px !important;
    padding: 16px !important;
    border-radius: 20px !important;
  }

  body:has(#target-bar) #target-bar .target-pct {
    font-size: 18px !important;
  }

  body:has(#target-bar) #target-bar .target-val {
    font-size: 15px !important;
  }
}

/* Staff Joining directory filters: status tabs equal, department chips secondary. */
.joining-maintenance-ui #scStaff .fbar {
  width: calc(100% - 32px) !important;
  max-width: 488px !important;
  margin: 12px 16px 8px !important;
  padding: 0 !important;
  display: flex !important;
  flex-direction: column !important;
  flex-wrap: nowrap !important;
  gap: 10px !important;
  overflow-x: visible !important;
  background: transparent !important;
  box-shadow: none !important;
}

.joining-maintenance-ui #scStaff .staff-status-tabs {
  width: 100% !important;
  display: grid !important;
  grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
  gap: 8px !important;
  padding: 4px !important;
  border-radius: 20px !important;
  background: #e9edf3 !important;
}

.joining-maintenance-ui #scStaff .staff-dept-tabs {
  width: 100% !important;
  display: flex !important;
  gap: 8px !important;
  overflow-x: auto !important;
  padding: 2px 0 6px !important;
  -webkit-overflow-scrolling: touch !important;
  scrollbar-width: none !important;
}

.joining-maintenance-ui #scStaff .staff-dept-tabs::-webkit-scrollbar {
  display: none !important;
}

.joining-maintenance-ui #scStaff .fpill.status-pill {
  width: 100% !important;
  min-width: 0 !important;
  height: 44px !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  padding: 0 8px !important;
  border: 0 !important;
  border-radius: 16px !important;
  background: transparent !important;
  color: #5f6b78 !important;
  font-size: 13px !important;
  font-weight: 900 !important;
  letter-spacing: 0 !important;
  text-align: center !important;
  white-space: nowrap !important;
  box-shadow: none !important;
}

.joining-maintenance-ui #scStaff .fpill.status-pill.on {
  background: #fff !important;
  color: #00785f !important;
  box-shadow: 0 8px 18px rgba(20,31,45,.08) !important;
}

.joining-maintenance-ui #scStaff .fpill.dept-pill {
  flex: 0 0 auto !important;
  min-width: auto !important;
  height: 36px !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  padding: 0 13px !important;
  border: 0 !important;
  border-radius: 999px !important;
  background: #fff !important;
  color: #52606d !important;
  font-size: 12px !important;
  font-weight: 850 !important;
  box-shadow: 0 8px 18px rgba(20,31,45,.055) !important;
}

.joining-maintenance-ui #scStaff .fpill.dept-pill.on {
  background: #e7f7f2 !important;
  color: #00785f !important;
  box-shadow: inset 0 0 0 1px rgba(0, 120, 95, .12) !important;
}

.joining-maintenance-ui #scStaff .scount {
  width: calc(100% - 32px) !important;
  max-width: 488px !important;
  margin: 0 16px 8px !important;
  padding: 0 4px !important;
  color: #737d89 !important;
  font-size: 13px !important;
  font-weight: 750 !important;
}

@media (min-width: 700px) {
  .joining-maintenance-ui #scStaff .fbar,
  .joining-maintenance-ui #scStaff .scount {
    max-width: 728px !important;
  }
}

@media (min-width: 1024px) {
  .joining-maintenance-ui #scStaff .fbar,
  .joining-maintenance-ui #scStaff .scount {
    max-width: 948px !important;
  }
}

@media (max-width: 380px) {
  .joining-maintenance-ui #scStaff .staff-status-tabs {
    gap: 5px !important;
  }

  .joining-maintenance-ui #scStaff .fpill.status-pill {
    height: 40px !important;
    font-size: 11px !important;
    padding: 0 4px !important;
  }
}

/* Staff Joining spacing cleanup: keep stacked actions/cards closer and intentional. */
.joining-maintenance-ui .home-acts,
.joining-maintenance-ui .auth-opts,
.joining-maintenance-ui .prev-acts,
.joining-maintenance-ui .suc-acts {
  display: flex !important;
  flex-direction: column !important;
  gap: 18px !important;
}

.joining-maintenance-ui .home-acts .btn,
.joining-maintenance-ui .auth-opts .auth-btn,
.joining-maintenance-ui .prev-acts .btn,
.joining-maintenance-ui .suc-acts .btn {
  margin-top: 0 !important;
  margin-bottom: 0 !important;
}

.joining-maintenance-ui .auth-opts {
  padding-top: 8px !important;
}

.joining-maintenance-ui .auth-btn {
  min-height: 72px !important;
  padding-top: 12px !important;
  padding-bottom: 12px !important;
}

.joining-maintenance-ui #scHome .home-acts .btn {
  min-height: 58px !important;
}

.app-logout-btn {
  height: 34px !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  padding: 0 12px !important;
  border: 1px solid rgba(17, 24, 39, .08) !important;
  border-radius: 999px !important;
  background: rgba(255, 255, 255, .86) !important;
  color: #00785f !important;
  font-family: inherit !important;
  font-size: 12px !important;
  font-weight: 900 !important;
  letter-spacing: 0 !important;
  box-shadow: 0 8px 18px rgba(20, 31, 45, .08) !important;
  cursor: pointer !important;
}

.app-logout-btn:active {
  transform: scale(.98) !important;
}

#screen-login .pin-error:empty,
#screen-login .session-exp-msg:empty {
  display: none !important;
  min-height: 0 !important;
  margin: 0 !important;
  padding: 0 !important;
  background: transparent !important;
  border: 0 !important;
  box-shadow: none !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
}

#screen-dash #refresh-row:not(.show) {
  display: none !important;
}