:root{font-family:Inter,system-ui,sans-serif;color-scheme:dark;--bg:#050b13;--panel:#0b1a29;--border:rgba(105,190,255,.18);--text:#f3f8fc;--muted:#7891a6;--blue:#28a7ff;--cyan:#31e8ff;--green:#1dd6a2;--orange:#ff9f43;--red:#ff6678}*{box-sizing:border-box}body{margin:0;min-height:100vh;color:var(--text);background:radial-gradient(circle at top left,rgba(27,122,190,.15),transparent 35%),var(--bg)}a{color:inherit}.app-background{position:fixed;inset:0;z-index:-1}.topbar{position:sticky;top:0;z-index:100;background:rgba(5,11,19,.88);backdrop-filter:blur(20px);border-bottom:1px solid var(--border)}.topbar-inner{max-width:1540px;margin:auto;min-height:76px;padding:0 28px;display:flex;align-items:center;justify-content:space-between}.brand{display:flex;align-items:center;gap:14px;text-decoration:none}.brand-logo-wrap{width:52px;height:52px;display:grid;place-items:center}.brand-logo{max-width:52px;max-height:48px;object-fit:contain}.brand-fallback{display:none}.brand-mark{width:43px;height:43px;border-radius:13px;place-items:center;background:rgba(40,167,255,.14);border:1px solid rgba(83,189,255,.4)}.brand-text{display:flex;flex-direction:column}.brand-text strong{font-size:20px}.brand-text span{font-size:11px;color:var(--muted);text-transform:uppercase}.main-nav{display:flex;align-items:center;gap:5px}.main-nav>a{padding:10px 13px;border-radius:10px;text-decoration:none;color:#a8bdd0;font-weight:600}.main-nav>a:hover,.main-nav>a.active{background:rgba(40,167,255,.14);color:#fff}.nav-user{display:flex;align-items:center;gap:9px;margin-left:8px;padding-left:13px;border-left:1px solid var(--border)}.user-avatar{width:34px;height:34px;display:grid;place-items:center;border-radius:50%;background:linear-gradient(135deg,var(--cyan),var(--blue));color:#021019;font-weight:800}.user-meta{display:flex;flex-direction:column;font-size:12px}.user-meta span{color:var(--muted)}.logout-link{color:#ff9caa!important}.nav-toggle{display:none}.page-shell{max-width:1500px;margin:auto;padding:34px 28px 55px}.app-footer{max-width:1500px;margin:auto;padding:22px 28px;color:var(--muted);display:flex;justify-content:space-between;border-top:1px solid var(--border)}h1{margin:0 0 7px;font-size:clamp(28px,4vw,42px)}h2{margin:0 0 17px}.heading{display:flex;justify-content:space-between;align-items:center;gap:20px;margin-bottom:25px}.heading p{margin:4px 0;color:var(--muted)}section,.card,.job-card,.rollup-panel{border:1px solid var(--border);border-radius:16px;background:linear-gradient(145deg,rgba(12,30,46,.94),rgba(8,20,32,.96));box-shadow:0 12px 30px rgba(0,0,0,.22)}section{padding:23px;margin-bottom:20px}.cards{display:grid;grid-template-columns:repeat(4,1fr);gap:17px;margin-bottom:20px}.card{padding:21px}.card b{display:block;font-size:33px}.card span{color:#a8bdd0}.job-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(290px,1fr));gap:17px}.job-card{display:block;padding:21px;text-decoration:none}.job-card:hover{transform:translateY(-3px);border-color:rgba(105,190,255,.4)}.job-card span{color:var(--cyan)}.job-card-topline{display:flex;justify-content:space-between}.job-card-topline small{color:var(--muted)}.pill,.status{display:inline-flex;padding:8px 13px;border-radius:999px;background:rgba(29,214,162,.1);color:#9cf5d8;border:1px solid rgba(29,214,162,.25);font-size:12px;font-weight:700}.search-bar{display:grid;grid-template-columns:1fr auto auto;gap:10px;margin-bottom:20px}input,select,textarea,button,.button{width:100%;padding:12px 13px;border-radius:10px;font:inherit}input,select,textarea{border:1px solid rgba(139,180,209,.2);background:rgba(3,12,21,.66);color:#fff}button,.button{border:0;background:linear-gradient(135deg,var(--blue),#0b63a4);color:#fff;font-weight:700;text-decoration:none;text-align:center;cursor:pointer}.secondary{background:rgba(102,138,166,.12)!important;border:1px solid var(--border)!important}.scroll{overflow:auto;border:1px solid var(--border);border-radius:14px}table{width:100%;border-collapse:collapse;background:rgba(8,20,32,.88)}th,td{padding:13px 14px;text-align:left;border-bottom:1px solid rgba(139,180,209,.1)}th{background:#0b1b2a;font-size:12px;text-transform:uppercase;color:#bcd2e3}.empty{text-align:center;padding:24px;color:var(--muted)}.section-title{display:flex;justify-content:space-between;align-items:center}.section-title>span,.rollup-count{min-width:38px;height:38px;display:grid;place-items:center;border-radius:50%;background:rgba(40,167,255,.12);color:var(--cyan);font-weight:800}.rollup-panel{margin-bottom:20px;overflow:hidden}.rollup-panel summary{list-style:none;cursor:pointer;padding:20px 22px;display:flex;align-items:center;justify-content:space-between}.rollup-panel summary::-webkit-details-marker{display:none}.rollup-panel summary div{display:flex;flex-direction:column}.rollup-panel summary span{color:var(--muted)}.rollup-content{padding:18px;border-top:1px solid var(--border)}.flash{display:flex;gap:10px;padding:13px;border-radius:10px;margin-bottom:10px;background:#10283d}.flash span{flex:1}.flash-close{width:auto;background:transparent}.success{background:rgba(15,72,57,.55)}.warning{background:rgba(93,59,15,.55)}.danger{background:rgba(87,28,38,.55)}@media(max-width:1100px){.nav-toggle{display:block;width:44px}.main-nav{display:none;position:absolute;left:16px;right:16px;top:76px;flex-direction:column;align-items:stretch;background:#06101a;padding:13px;border:1px solid var(--border);border-radius:16px}.main-nav.open{display:flex}.nav-user{border-left:0;border-top:1px solid var(--border);padding-top:10px}}@media(max-width:800px){.cards{grid-template-columns:1fr 1fr}.search-bar{grid-template-columns:1fr}.heading{align-items:flex-start;flex-direction:column}}@media(max-width:600px){.page-shell{padding:20px 12px}.cards,.job-grid{grid-template-columns:1fr}.brand-text span{display:none}}

.brand img{width:48px;height:48px;object-fit:contain;border-radius:12px}.brand>div{display:flex;flex-direction:column}.brand strong{font-size:22px}.brand span{font-size:11px;color:#53bdff;letter-spacing:1.5px;text-transform:uppercase}.fit{width:auto}.login-wrap{min-height:70vh;display:grid;place-items:center}.login-card{max-width:520px;text-align:center}.login-logo{width:min(420px,90%);height:auto;margin-bottom:18px}.login-card form{display:grid;gap:12px;text-align:left}.login-card small{display:block;margin-top:18px;color:var(--text-muted)}footer{text-align:center;padding:25px;color:var(--text-muted)}


/* Khula secure authentication */
.auth-card { max-width: 920px; }
.auth-tabs { display:grid; grid-template-columns:1fr auto 1fr; gap:24px; align-items:stretch; margin:24px 0; }
.auth-panel { padding:20px; border:1px solid var(--panel-border); border-radius:var(--radius-medium); background:rgba(3,12,21,.38); }
.auth-panel h2 { margin-bottom:8px; }
.stack-form { display:grid; gap:10px; }
.auth-divider { display:grid; place-items:center; color:var(--text-muted); }
.auth-divider span { width:34px; height:34px; display:grid; place-items:center; border:1px solid var(--panel-border); border-radius:50%; background:#071321; }
.microsoft-button { background:linear-gradient(135deg,#2f75e8,#174ea6); }
.narrow-auth { max-width:560px; }
.settings-divider { margin-top:10px; padding-top:18px; border-top:1px solid var(--panel-border); }
.settings-divider h3 { margin-bottom:6px; }
.settings-divider p { margin:0; color:var(--text-muted); }
.field small { color:var(--text-muted); line-height:1.4; }
.button.fit { width:auto; }
@media(max-width:760px){ .auth-tabs{grid-template-columns:1fr}.auth-divider{height:18px}.inline{display:grid;grid-template-columns:1fr}.inline button{width:100%} }


/* Khula control-centre navigation and sign-out fix */
.heading-actions {
  display: flex;
  align-items: center;
  gap: 10px;
}

.heading-actions .button {
  width: auto;
  min-width: 120px;
}

.logout-link {
  display: inline-flex !important;
  align-items: center;
  justify-content: center;
  color: #ffffff !important;
  background: linear-gradient(135deg, #d9485f, #8f2438) !important;
  border: 1px solid rgba(255, 126, 145, 0.32);
}

.logout-link:hover {
  filter: brightness(1.1);
}

.control-session-card {
  display: flex;
  align-items: center;
  gap: 12px;
  margin: -5px 0 22px;
  padding: 14px 16px;
  border: 1px solid var(--border);
  border-radius: 14px;
  background: rgba(8, 24, 38, 0.78);
}

.control-session-card > div:nth-child(2) {
  display: flex;
  flex: 1;
  flex-direction: column;
  gap: 3px;
}

.control-session-card span {
  color: var(--muted);
  font-size: 12px;
}

.control-session-card > a {
  color: #ff9cad;
  font-weight: 700;
  text-decoration: none;
}

.table-actions {
  display: flex;
  gap: 12px;
}

.table-actions a {
  color: var(--cyan);
  font-weight: 700;
  text-decoration: none;
}

.nav-toggle span {
  display: block;
  width: 100%;
  height: 2px;
  margin: 4px 0;
  border-radius: 5px;
  background: #ffffff;
}

.nav-toggle.open span:nth-child(1) {
  transform: translateY(6px) rotate(45deg);
}

.nav-toggle.open span:nth-child(2) {
  opacity: 0;
}

.nav-toggle.open span:nth-child(3) {
  transform: translateY(-6px) rotate(-45deg);
}

@media (max-width: 800px) {
  .heading-actions {
    width: 100%;
  }

  .heading-actions .button {
    flex: 1;
  }

  .control-session-card {
    align-items: flex-start;
    flex-wrap: wrap;
  }

  .control-session-card > a {
    width: 100%;
    padding-top: 8px;
  }
}


/* Khula v2 dashboard foundation */
.card-link {
  color: inherit;
  text-decoration: none;
  transition: transform .18s ease, border-color .18s ease, box-shadow .18s ease;
}
.card-link:hover {
  transform: translateY(-3px);
  border-color: rgba(83, 189, 255, .55);
  box-shadow: 0 16px 38px rgba(0, 0, 0, .24);
}

.dashboard-heading {
  align-items: flex-start;
}
.sync-panel {
  display: flex;
  align-items: center;
  gap: 18px;
  padding: 13px 15px;
  border: 1px solid var(--border);
  border-radius: 16px;
  background: rgba(7, 22, 35, .92);
}
.sync-clock, .sync-last {
  display: flex;
  align-items: center;
  gap: 10px;
}
.sync-clock > div, .sync-last {
  flex-direction: column;
  align-items: flex-start;
  gap: 2px;
}
.sync-clock strong {
  color: var(--cyan);
  font-size: 20px;
  font-variant-numeric: tabular-nums;
}
.sync-panel small, .sync-last span {
  color: var(--muted);
  font-size: 11px;
}
.sync-last strong {
  font-size: 12px;
}
.sync-pulse {
  width: 11px;
  height: 11px;
  border-radius: 50%;
  background: #31d5a4;
  box-shadow: 0 0 0 5px rgba(49, 213, 164, .12);
}
.sync-pulse.running {
  animation: khulaPulse 1s infinite;
}
@keyframes khulaPulse {
  50% { transform: scale(1.45); opacity: .55; }
}

.dashboard-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.6fr) minmax(280px, .8fr);
  gap: 20px;
  margin: 20px 0;
}
.status-chart-card, .ageing-card {
  min-width: 0;
}
.eyebrow {
  display: block;
  color: var(--cyan);
  font-size: 11px;
  font-weight: 800;
  letter-spacing: .14em;
  margin-bottom: 5px;
}
.section-title p {
  margin: 5px 0 0;
  color: var(--muted);
}

.vertical-chart {
  display: flex;
  align-items: flex-end;
  justify-content: space-around;
  gap: 18px;
  min-height: 320px;
  padding: 30px 18px 5px;
  border-radius: 16px;
  background:
    repeating-linear-gradient(
      to top,
      rgba(91, 153, 198, .09) 0,
      rgba(91, 153, 198, .09) 1px,
      transparent 1px,
      transparent 64px
    );
}
.status-bar-column {
  display: flex;
  flex: 1;
  max-width: 150px;
  min-width: 74px;
  height: 270px;
  flex-direction: column;
  align-items: center;
  justify-content: flex-end;
  gap: 8px;
  color: inherit;
  text-decoration: none;
}
.status-bar-track {
  position: relative;
  display: flex;
  width: min(74px, 80%);
  height: 210px;
  align-items: flex-end;
  overflow: hidden;
  border: 1px solid rgba(83, 189, 255, .18);
  border-radius: 13px 13px 7px 7px;
  background: rgba(4, 15, 25, .72);
}
.status-bar-fill {
  display: block;
  width: 100%;
  min-height: 8px;
  border-radius: 12px 12px 5px 5px;
  background: linear-gradient(180deg, #43ddff, #087bc1);
  box-shadow: 0 0 26px rgba(29, 185, 255, .26);
  transition: filter .15s ease, transform .15s ease;
  transform-origin: bottom;
}
.status-bar-column:hover .status-bar-fill {
  filter: brightness(1.2);
  transform: scaleX(1.05);
}
.status-bar-count {
  color: #fff;
  font-size: 20px;
  font-weight: 800;
}
.status-bar-column strong {
  text-align: center;
  font-size: 12px;
}
.chart-empty {
  width: 100%;
  align-self: center;
  color: var(--muted);
  text-align: center;
}

.ageing-boxes {
  display: grid;
  gap: 12px;
}
.ageing-box {
  display: grid;
  grid-template-columns: 1fr auto;
  align-items: center;
  padding: 18px;
  border: 1px solid rgba(83, 189, 255, .24);
  border-radius: 15px;
  background: rgba(8, 30, 47, .65);
  color: inherit;
  text-decoration: none;
}
.ageing-box span, .ageing-box strong {
  color: var(--muted);
}
.ageing-box b {
  grid-row: span 2;
  font-size: 38px;
  color: #57d7ff;
}
.ageing-box.warning b { color: #ffc65b; }
.ageing-box.danger b { color: #ff758f; }
.ageing-box:hover {
  border-color: rgba(83, 189, 255, .55);
}

.workspace-links {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 14px;
}
.workspace-links a {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 5px 15px;
  padding: 18px;
  border: 1px solid var(--border);
  border-radius: 15px;
  color: inherit;
  text-decoration: none;
  background: rgba(7, 23, 36, .72);
}
.workspace-links a strong { color: var(--cyan); }
.workspace-links a span { color: var(--muted); font-size: 12px; }
.workspace-links a b {
  grid-row: span 2;
  align-self: center;
  font-size: 28px;
}

.assign-dropdown {
  min-width: 180px;
  position: relative;
}
.assign-dropdown summary {
  color: var(--cyan);
  cursor: pointer;
  font-weight: 700;
}
.assign-dropdown form {
  position: absolute;
  z-index: 80;
  top: calc(100% + 8px);
  left: 0;
  width: 270px;
  display: grid;
  gap: 9px;
  padding: 14px;
  border: 1px solid rgba(105,190,255,.3);
  border-radius: 14px;
  background: #091725;
  box-shadow: 0 18px 45px rgba(0,0,0,.45);
}
.active-filters {
  display: flex;
  gap: 9px;
  margin-bottom: 15px;
}
.active-filters span {
  padding: 7px 11px;
  border: 1px solid rgba(83, 189, 255, .25);
  border-radius: 999px;
  color: var(--cyan);
  background: rgba(8, 123, 193, .1);
  font-size: 12px;
}
.smtp-test-form input {
  min-width: min(420px, 100%);
}

@media (max-width: 1050px) {
  .dashboard-grid { grid-template-columns: 1fr; }
  .sync-panel { width: 100%; justify-content: space-between; }
}
@media (max-width: 800px) {
  .workspace-links { grid-template-columns: 1fr; }
  .sync-panel { align-items: stretch; flex-direction: column; }
  .vertical-chart { overflow-x: auto; justify-content: flex-start; }
  .status-bar-column { flex: 0 0 100px; }
}


/* Khula reporting */
.report-filters {
  display: grid;
  grid-template-columns: repeat(3, minmax(170px, 1fr)) auto;
  gap: 14px;
  align-items: end;
  margin: 0 0 20px;
  padding: 16px;
  border: 1px solid var(--border);
  border-radius: 16px;
  background: rgba(7, 23, 36, .72);
}

.report-filter-actions {
  display: flex;
  gap: 8px;
  align-items: center;
}

.report-summary-cards {
  grid-template-columns: repeat(5, minmax(135px, 1fr));
}

.report-table-scroll {
  max-height: 70vh;
}

.report-table th {
  position: sticky;
  top: 0;
  z-index: 2;
  background: #0b1a29;
}

.report-comments {
  min-width: 300px;
  max-width: 520px;
  white-space: normal;
}

@media (max-width: 980px) {
  .report-filters {
    grid-template-columns: 1fr 1fr;
  }

  .report-summary-cards {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (max-width: 620px) {
  .report-filters,
  .report-summary-cards {
    grid-template-columns: 1fr;
  }
}


/* Client logo and clearer signature capture */
.current-logo-row {
  display: flex;
  align-items: center;
  gap: 18px;
  margin: 8px 0 14px;
}

.current-client-logo {
  display: block;
  max-width: 240px;
  max-height: 90px;
  padding: 10px;
  border: 1px solid rgba(105, 190, 255, .24);
  border-radius: 12px;
  background: #ffffff;
  object-fit: contain;
}

.signature-canvas-box {
  position: relative;
  overflow: hidden;
  width: 100%;
  min-height: 180px;
  margin: 8px 0 10px;
  border: 2px dashed #8aa2b5;
  border-radius: 12px;
  background: #ffffff;
  box-shadow: inset 0 0 0 1px rgba(10, 44, 70, .06);
}

.signature-canvas-box canvas {
  position: relative;
  z-index: 2;
  display: block;
  width: 100%;
  height: 180px;
  background: transparent !important;
  cursor: crosshair;
  touch-action: none;
}

.signature-prompt {
  position: absolute;
  z-index: 1;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  color: #70879a;
  font-size: 16px;
  font-weight: 700;
  pointer-events: none;
}

.signature-canvas-box.has-signature .signature-prompt {
  opacity: 0;
}

.calculated-total {
  display: flex;
  min-height: 112px;
  flex-direction: column;
  justify-content: center;
  padding: 14px;
  border: 1px solid rgba(83, 189, 255, .24);
  border-radius: 12px;
  background: rgba(8, 123, 193, .08);
}

.calculated-total strong {
  color: var(--cyan);
  font-size: 24px;
}

.resolution-grid-single { grid-template-columns: 1fr; }


/* Automatic workflow timing */
.live-timing-panel {
  display: grid;
  grid-template-columns: repeat(4, minmax(130px, 1fr));
  gap: 10px;
  margin: 16px 0 20px;
}

.live-timing-panel > div {
  display: flex;
  min-height: 88px;
  flex-direction: column;
  justify-content: center;
  gap: 6px;
  padding: 14px;
  border: 1px solid rgba(83, 189, 255, .22);
  border-radius: 14px;
  background: rgba(7, 27, 43, .76);
}

.live-timing-panel span {
  color: var(--muted);
  font-size: 12px;
}

.live-timing-panel strong {
  color: #ffffff;
  font-size: 25px;
  font-variant-numeric: tabular-nums;
}

.live-timing-panel .timing-total {
  border-color: rgba(48, 211, 164, .32);
  background: rgba(48, 211, 164, .08);
}

.live-timing-panel .timing-total strong {
  color: #4be4b3;
}

.timing-explainer {
  display: grid;
  gap: 5px;
  margin: 18px 0;
  padding: 15px;
  border: 1px solid rgba(83, 189, 255, .2);
  border-radius: 14px;
  background: rgba(8, 123, 193, .07);
}

.timing-explainer strong {
  color: var(--cyan);
}

.timing-explainer span,
.timing-explainer small {
  color: var(--muted);
}

@media (max-width: 780px) {
  .live-timing-panel {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (max-width: 470px) {
  .live-timing-panel {
    grid-template-columns: 1fr;
  }
}

.km-summary-panel{display:grid;grid-template-columns:repeat(4,minmax(130px,1fr));gap:10px;margin:-8px 0 20px}
.km-summary-panel>div{display:flex;min-height:82px;flex-direction:column;justify-content:center;gap:6px;padding:14px;border:1px solid rgba(255,198,91,.22);border-radius:14px;background:rgba(255,198,91,.06)}
.km-summary-panel span{color:var(--muted);font-size:12px}.km-summary-panel strong{color:#ffc65b;font-size:24px}
.km-summary-panel .km-total{border-color:rgba(48,211,164,.32);background:rgba(48,211,164,.08)}.km-summary-panel .km-total strong{color:#4be4b3}
.active-travel-banner{display:flex;justify-content:space-between;gap:16px;margin:0 0 18px;padding:13px 15px;border:1px solid rgba(255,198,91,.32);border-radius:13px;background:rgba(255,198,91,.09)}
.active-travel-banner strong{color:#ffc65b}.active-travel-banner span{color:var(--muted)}
.travel-stop-fields,.return-odometer-box{display:grid;gap:8px;padding:13px;border:1px solid rgba(255,198,91,.22);border-radius:12px;background:rgba(255,198,91,.06)}
.diversion-card{border-color:rgba(255,198,91,.42)!important}.return-odometer-box{margin:18px 0 12px}
@media(max-width:780px){.km-summary-panel{grid-template-columns:repeat(2,1fr)}.active-travel-banner{flex-direction:column}}
@media(max-width:470px){.km-summary-panel{grid-template-columns:1fr}}


/* Manual calls and reusable customer directory */
.manual-call-form {
  display: grid;
  gap: 20px;
}
.manual-create-bar {
  position: sticky;
  bottom: 14px;
  z-index: 40;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 18px;
  padding: 16px;
  border: 1px solid rgba(48, 211, 164, .34);
  border-radius: 16px;
  background: rgba(6, 24, 37, .96);
}
.manual-create-bar > div {
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.manual-create-bar span {
  color: var(--muted);
  font-size: 12px;
}
.manual-create-bar button {
  width: auto;
  min-width: 180px;
}
.source-badge {
  display: inline-block;
  padding: 4px 8px;
  border-radius: 999px;
  font-size: 10px;
  font-weight: 800;
  letter-spacing: .06em;
  text-transform: uppercase;
}
.source-freshdesk {
  color: #71d5ff;
  background: rgba(8, 123, 193, .18);
}
.source-manual {
  color: #55e6b7;
  background: rgba(48, 211, 164, .15);
}
.directory-customer {
  display: grid;
  gap: 12px;
}
.directory-site {
  display: grid;
  grid-template-columns: minmax(220px, .7fr) 1.3fr;
  gap: 14px;
  padding: 14px;
  border: 1px solid var(--border);
  border-radius: 14px;
  background: rgba(7, 23, 36, .65);
}
.directory-site > div:first-child,
.directory-contacts > div {
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.directory-site span,
.directory-contacts span {
  color: var(--muted);
  font-size: 12px;
}
.directory-contacts {
  display: grid;
  gap: 9px;
}
@media (max-width: 760px) {
  .manual-create-bar {
    position: static;
    align-items: stretch;
    flex-direction: column;
  }
  .manual-create-bar button {
    width: 100%;
  }
  .directory-site {
    grid-template-columns: 1fr;
  }
}


/* Multi-visit field workflow */
.repeat-visit-panel {
  border-color: rgba(255, 198, 91, .34);
  background:
    linear-gradient(135deg, rgba(255, 198, 91, .08), rgba(7, 23, 36, .72));
}

.repeat-visit-panel h2 {
  margin: 4px 0 8px;
}

.repeat-visit-panel p {
  margin: 0;
  color: var(--muted);
  line-height: 1.6;
}

.repeat-visit-form {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
  align-items: end;
  margin-top: 18px;
}

.repeat-visit-form textarea {
  min-height: 84px;
}

.repeat-visit-form button {
  grid-column: 1 / -1;
  width: 100%;
  min-height: 48px;
}

@media (max-width: 900px) {
  .repeat-visit-form {
    grid-template-columns: 1fr;
  }

  .repeat-visit-form button {
    width: 100%;
  }
}


/* ================================================================
   KHULA PREMIUM AUTHENTICATION
   ================================================================ */
.auth-page .topbar {
  position: absolute;
  width: 100%;
  background: transparent;
  border: 0;
  backdrop-filter: none;
}

.auth-page .topbar-inner {
  min-height: 76px;
}

.auth-page .page-shell {
  max-width: none;
  min-height: 100vh;
  padding: 0;
}

.auth-page .app-footer {
  display: none;
}

.auth-shell {
  min-height: 100vh;
  padding: 92px 24px 28px;
  display: grid;
  place-items: center;
  background:
    radial-gradient(circle at 12% 20%, rgba(24, 131, 215, .18), transparent 30%),
    radial-gradient(circle at 90% 85%, rgba(36, 232, 255, .08), transparent 28%),
    linear-gradient(145deg, #040a11, #071421 58%, #050b13);
}

.auth-experience {
  width: min(1240px, 100%);
  min-height: 720px;
  display: grid;
  grid-template-columns: 1.05fr .95fr;
  overflow: hidden;
  border: 1px solid rgba(105, 190, 255, .2);
  border-radius: 28px;
  background: rgba(5, 15, 25, .88);
  box-shadow:
    0 40px 100px rgba(0, 0, 0, .48),
    0 0 0 1px rgba(255, 255, 255, .02) inset;
}

.auth-hero {
  position: relative;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  padding: 54px;
  background:
    linear-gradient(160deg, rgba(8, 39, 65, .97), rgba(4, 18, 31, .98));
}

.auth-hero::before,
.auth-hero::after {
  content: "";
  position: absolute;
  pointer-events: none;
}

.auth-hero::before {
  inset: 0;
  opacity: .18;
  background-image:
    linear-gradient(rgba(93, 190, 255, .2) 1px, transparent 1px),
    linear-gradient(90deg, rgba(93, 190, 255, .2) 1px, transparent 1px);
  background-size: 42px 42px;
  mask-image: linear-gradient(to bottom right, black, transparent 76%);
}

.auth-hero::after {
  width: 360px;
  height: 360px;
  right: -160px;
  bottom: -140px;
  border: 1px solid rgba(49, 232, 255, .28);
  border-radius: 50%;
  box-shadow:
    0 0 0 44px rgba(49, 232, 255, .025),
    0 0 0 88px rgba(49, 232, 255, .015);
}

.auth-hero-glow {
  position: absolute;
  width: 340px;
  height: 340px;
  top: -170px;
  left: -110px;
  border-radius: 50%;
  background: rgba(40, 167, 255, .22);
  filter: blur(85px);
}

.auth-brand-lockup,
.auth-mobile-brand {
  position: relative;
  z-index: 2;
  display: flex;
  align-items: center;
  gap: 14px;
}

.auth-brand-icon {
  width: 64px;
  height: 64px;
  object-fit: contain;
  border-radius: 16px;
  box-shadow: 0 14px 30px rgba(0, 0, 0, .28);
}

.auth-brand-lockup > div,
.auth-mobile-brand > div {
  display: flex;
  flex-direction: column;
}

.auth-brand-lockup strong,
.auth-mobile-brand strong {
  font-size: 26px;
  letter-spacing: .04em;
}

.auth-brand-lockup span,
.auth-mobile-brand span {
  color: #52c6ff;
  font-size: 11px;
  letter-spacing: .18em;
  text-transform: uppercase;
}

.auth-hero-copy {
  position: relative;
  z-index: 2;
  max-width: 560px;
  margin: auto 0 38px;
}

.eyebrow {
  color: var(--cyan);
  font-size: 11px;
  font-weight: 800;
  letter-spacing: .17em;
  text-transform: uppercase;
}

.auth-hero-copy h1 {
  max-width: 540px;
  margin: 14px 0 18px;
  font-size: clamp(42px, 5vw, 68px);
  line-height: .98;
  letter-spacing: -.045em;
}

.auth-hero-copy p {
  max-width: 520px;
  margin: 0;
  color: #a9bfd0;
  font-size: 17px;
  line-height: 1.7;
}

.auth-feature-grid {
  position: relative;
  z-index: 2;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
}

.auth-feature-grid > div {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 2px 12px;
  padding: 15px;
  border: 1px solid rgba(105, 190, 255, .14);
  border-radius: 14px;
  background: rgba(3, 14, 24, .4);
}

.auth-feature-number {
  grid-row: span 2;
  color: #47c9ff;
  font-size: 11px;
  font-weight: 800;
}

.auth-feature-grid strong {
  font-size: 14px;
}

.auth-feature-grid small {
  color: #7891a6;
  line-height: 1.45;
}

.auth-hero-footer {
  position: relative;
  z-index: 2;
  display: flex;
  align-items: center;
  gap: 9px;
  margin-top: 28px;
  color: #7891a6;
  font-size: 12px;
}

.auth-live-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: #31e8b0;
  box-shadow: 0 0 16px #31e8b0;
}

.auth-form-side {
  display: grid;
  place-items: center;
  padding: 46px;
  background:
    linear-gradient(150deg, rgba(7, 20, 32, .98), rgba(4, 11, 19, .98));
}

.auth-form-card {
  width: min(450px, 100%);
}

.auth-mobile-brand {
  display: none;
}

.auth-mobile-brand img {
  width: 46px;
  height: 46px;
}

.auth-form-heading {
  margin-bottom: 28px;
}

.auth-form-heading h2 {
  margin: 8px 0 9px;
  font-size: 38px;
  letter-spacing: -.03em;
}

.auth-form-heading p {
  margin: 0;
  color: var(--muted);
  line-height: 1.55;
}

.auth-main-form {
  display: grid;
  gap: 18px;
}

.auth-main-form .field,
.auth-microsoft-form {
  display: grid;
  gap: 8px;
}

.auth-main-form label,
.auth-microsoft-form label {
  color: #d6e7f4;
  font-size: 13px;
  font-weight: 700;
}

.auth-main-form input,
.auth-microsoft-form input {
  min-height: 54px;
  padding: 14px 15px;
  border: 1px solid rgba(139, 180, 209, .25);
  border-radius: 13px;
  background: rgba(2, 10, 18, .72);
  box-shadow: none;
  transition: border-color .18s, box-shadow .18s, background .18s;
}

.auth-main-form input:focus,
.auth-microsoft-form input:focus {
  outline: none;
  border-color: rgba(49, 232, 255, .7);
  background: rgba(4, 18, 29, .92);
  box-shadow: 0 0 0 4px rgba(49, 232, 255, .08);
}

.auth-main-form input:-webkit-autofill,
.auth-main-form input:-webkit-autofill:hover,
.auth-main-form input:-webkit-autofill:focus,
.auth-microsoft-form input:-webkit-autofill {
  -webkit-text-fill-color: #fff;
  -webkit-box-shadow: 0 0 0 1000px #06131f inset;
  transition: background-color 9999s ease-in-out 0s;
}

.password-label-row {
  display: flex;
  justify-content: space-between;
  gap: 12px;
}

.password-label-row a {
  color: #52c6ff;
  font-size: 12px;
  text-decoration: none;
}

.password-input-wrap {
  position: relative;
}

.password-input-wrap input {
  padding-right: 68px;
}

.password-toggle {
  position: absolute;
  right: 7px;
  top: 7px;
  width: auto;
  min-width: 52px;
  height: 40px;
  padding: 0 10px;
  color: #9ab4c8;
  background: transparent;
  font-size: 12px;
}

.auth-remember {
  width: fit-content;
  color: #9ab4c8;
  font-size: 13px;
}

.auth-primary-button {
  min-height: 54px;
  border-radius: 13px;
  background: linear-gradient(135deg, #21b2ff, #0874cf);
  box-shadow: 0 14px 28px rgba(13, 126, 205, .24);
}

.auth-or {
  display: flex;
  align-items: center;
  gap: 14px;
  margin: 24px 0;
  color: #61798d;
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: .12em;
}

.auth-or::before,
.auth-or::after {
  content: "";
  height: 1px;
  flex: 1;
  background: rgba(139, 180, 209, .14);
}

.auth-microsoft-form small {
  color: #698397;
  line-height: 1.45;
}

.microsoft-login-row {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 9px;
}

.microsoft-button {
  width: auto;
  min-width: 142px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 9px;
  border: 1px solid rgba(139, 180, 209, .2);
  background: rgba(14, 35, 53, .88);
}

.microsoft-mark {
  width: 16px;
  height: 16px;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 2px;
}

.microsoft-mark i:nth-child(1) { background: #f35325; }
.microsoft-mark i:nth-child(2) { background: #81bc06; }
.microsoft-mark i:nth-child(3) { background: #05a6f0; }
.microsoft-mark i:nth-child(4) { background: #ffba08; }

.auth-security-note {
  display: flex;
  justify-content: space-between;
  gap: 14px;
  margin-top: 28px;
  padding-top: 18px;
  border-top: 1px solid rgba(139, 180, 209, .12);
  color: #6f899d;
  font-size: 11px;
}

.auth-security-note span {
  color: #9bb3c6;
  font-weight: 700;
}

/* ================================================================
   PWA + MOBILE-FIRST FIELD OPERATIONS
   ================================================================ */
.pwa-install-button {
  width: auto;
  margin-left: auto;
  margin-right: 8px;
  padding: 9px 12px;
  border: 1px solid rgba(49, 232, 255, .22);
  background: rgba(49, 232, 255, .08);
  color: #78eaff;
  font-size: 12px;
}

@media (pointer: coarse) {
  button,
  .button,
  input,
  select {
    min-height: 48px;
  }

  textarea {
    min-height: 104px;
  }

  .main-nav > a {
    min-height: 46px;
    display: flex;
    align-items: center;
  }

  .action-card button,
  .completion-buttons button {
    min-height: 54px;
    font-size: 16px;
  }
}

@media (max-width: 1100px) {
  .topbar-inner {
    padding: 0 18px;
  }

  .main-nav {
    max-height: calc(100vh - 96px);
    overflow-y: auto;
    padding-bottom: max(14px, env(safe-area-inset-bottom));
    box-shadow: 0 24px 55px rgba(0, 0, 0, .48);
  }

  .main-nav > a {
    padding: 13px 14px;
  }

  .nav-user {
    margin-left: 0;
  }
}

@media (max-width: 900px) {
  .auth-shell {
    padding: 88px 16px 18px;
  }

  .auth-experience {
    min-height: 0;
    grid-template-columns: 1fr;
    border-radius: 22px;
  }

  .auth-hero {
    min-height: 340px;
    padding: 34px;
  }

  .auth-hero-copy {
    margin: 52px 0 28px;
  }

  .auth-hero-copy h1 {
    font-size: clamp(38px, 8vw, 56px);
  }

  .auth-feature-grid {
    grid-template-columns: repeat(2, 1fr);
  }

  .auth-form-side {
    padding: 40px 30px 46px;
  }

  .cards {
    gap: 11px;
  }

  section {
    padding: 18px;
  }

  .workflow-actions {
    grid-template-columns: 1fr 1fr;
  }

  .form-grid {
    grid-template-columns: 1fr 1fr;
  }

  .completion-buttons {
    position: sticky;
    bottom: 10px;
    z-index: 30;
    padding: 10px;
    border: 1px solid var(--border);
    border-radius: 14px;
    background: rgba(5, 16, 27, .94);
    backdrop-filter: blur(14px);
  }
}

@media (max-width: 680px) {
  .auth-page .topbar {
    display: none;
  }

  .auth-shell {
    padding: 0;
    align-items: stretch;
  }

  .auth-experience {
    width: 100%;
    min-height: 100svh;
    border: 0;
    border-radius: 0;
  }

  .auth-hero {
    display: none;
  }

  .auth-form-side {
    min-height: 100svh;
    padding:
      max(28px, env(safe-area-inset-top))
      20px
      max(28px, env(safe-area-inset-bottom));
    align-items: center;
  }

  .auth-mobile-brand {
    display: flex;
    margin-bottom: 44px;
  }

  .auth-form-heading h2 {
    font-size: 34px;
  }

  .microsoft-login-row {
    grid-template-columns: 1fr;
  }

  .microsoft-button {
    width: 100%;
    min-height: 52px;
  }

  .auth-security-note {
    flex-direction: column;
  }

  .topbar-inner {
    min-height: 66px;
    padding:
      0 max(12px, env(safe-area-inset-right))
      0 max(12px, env(safe-area-inset-left));
  }

  .brand img {
    width: 40px;
    height: 40px;
  }

  .brand strong {
    font-size: 18px;
  }

  .nav-toggle {
    min-width: 44px;
    min-height: 44px;
    padding: 10px;
  }

  .main-nav {
    top: 66px;
    left: 8px;
    right: 8px;
    border-radius: 14px;
  }

  .page-shell {
    padding:
      18px max(10px, env(safe-area-inset-right))
      calc(72px + env(safe-area-inset-bottom))
      max(10px, env(safe-area-inset-left));
  }

  h1 {
    font-size: 30px;
    line-height: 1.08;
  }

  h2 {
    font-size: 22px;
  }

  .heading {
    gap: 12px;
  }

  .heading-actions {
    width: 100%;
    display: grid;
    grid-template-columns: 1fr 1fr;
  }

  .heading-actions .button,
  .fit,
  .button.fit {
    width: 100%;
  }

  .cards,
  .form-grid,
  .workflow-actions,
  .live-timing-panel,
  .km-summary-panel {
    grid-template-columns: 1fr;
  }

  .card {
    padding: 16px;
  }

  .card b {
    font-size: 29px;
  }

  .job-grid {
    gap: 12px;
  }

  .job-card {
    padding: 17px;
  }

  .job-card:hover {
    transform: none;
  }

  .search-bar {
    position: sticky;
    top: 74px;
    z-index: 20;
    padding: 8px;
    border: 1px solid var(--border);
    border-radius: 13px;
    background: rgba(5, 16, 27, .94);
    backdrop-filter: blur(12px);
  }

  .scroll {
    border: 0;
    overflow: visible;
  }

  .scroll table {
    min-width: 760px;
  }

  .action-card {
    padding: 14px;
  }

  .action-card button {
    order: 0;
  }

  .signature-canvas-box,
  .signature-canvas-box canvas {
    min-height: 210px;
    height: 210px;
  }

  .completion-buttons {
    grid-template-columns: 1fr;
    bottom: max(8px, env(safe-area-inset-bottom));
  }

  .app-footer {
    display: none;
  }
}

@media (max-width: 420px) {
  .auth-form-side {
    padding-left: 16px;
    padding-right: 16px;
  }

  .auth-mobile-brand {
    margin-bottom: 34px;
  }

  .auth-form-heading {
    margin-bottom: 22px;
  }

  .auth-form-heading h2 {
    font-size: 31px;
  }

  .heading-actions {
    grid-template-columns: 1fr;
  }

  section {
    padding: 15px;
    border-radius: 14px;
  }
}

@media (display-mode: standalone) {
  .pwa-install-button {
    display: none !important;
  }

  .topbar {
    padding-top: env(safe-area-inset-top);
  }
}

.password-label-row a[aria-disabled="true"] {
  opacity: .55;
  cursor: not-allowed;
  pointer-events: none;
}


/* Password recovery and operational notifications */
.password-reset-card {
  width: min(520px, calc(100% - 24px));
  padding: 34px;
  border: 1px solid rgba(105, 190, 255, .2);
  border-radius: 24px;
  background: rgba(5, 16, 27, .94);
  box-shadow: 0 30px 80px rgba(0, 0, 0, .45);
}
.password-reset-card h1 {
  margin: 12px 0 10px;
}
.password-reset-card > p {
  color: var(--muted);
  line-height: 1.6;
}
.reset-brand {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 34px;
  color: white;
  text-decoration: none;
}
.reset-brand img {
  width: 50px;
  height: 50px;
}
.reset-brand > div {
  display: flex;
  flex-direction: column;
}
.reset-brand span {
  color: var(--cyan);
  font-size: 10px;
  letter-spacing: .16em;
  text-transform: uppercase;
}
.reset-back-link {
  display: inline-block;
  margin-top: 22px;
  color: var(--cyan);
  text-decoration: none;
}
.engineer-refresh-status {
  position: fixed;
  right: 16px;
  bottom: max(16px, env(safe-area-inset-bottom));
  z-index: 90;
  display: flex;
  align-items: center;
  gap: 9px;
  padding: 10px 13px;
  border: 1px solid rgba(49, 232, 176, .24);
  border-radius: 999px;
  background: rgba(5, 20, 31, .94);
  color: #9eb8ca;
  font-size: 11px;
  box-shadow: 0 12px 30px rgba(0, 0, 0, .32);
}
.khula-notification-toast {
  position: fixed;
  right: 16px;
  top: 88px;
  z-index: 200;
  width: min(390px, calc(100% - 32px));
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding: 16px;
  border: 1px solid rgba(49, 232, 255, .32);
  border-radius: 14px;
  background: rgba(5, 20, 32, .98);
  color: white;
  text-decoration: none;
  box-shadow: 0 24px 60px rgba(0, 0, 0, .5);
}
.khula-notification-toast span {
  color: #a5bdcf;
  line-height: 1.45;
}
@media (max-width: 680px) {
  .password-reset-card {
    width: 100%;
    min-height: 100svh;
    padding:
      max(28px, env(safe-area-inset-top))
      18px
      max(28px, env(safe-area-inset-bottom));
    border: 0;
    border-radius: 0;
  }
  .engineer-refresh-status {
    left: 10px;
    right: 10px;
    justify-content: center;
  }
}


/* Dashboard quick call lookup */
.dashboard-heading {
  grid-template-columns: minmax(310px, .9fr) minmax(360px, .9fr) minmax(520px, 1.05fr);
  align-items: stretch;
}

.dashboard-quick-lookup {
  display: grid;
  gap: 10px;
  align-self: stretch;
}

.quick-lookup-form,
.quick-result-card {
  padding: 15px;
  border: 1px solid rgba(49, 232, 255, .19);
  border-radius: 16px;
  background: rgba(6, 22, 34, .78);
}

.quick-lookup-form {
  display: grid;
  gap: 8px;
}

.quick-lookup-row {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 8px;
}

.quick-lookup-row input {
  min-width: 0;
}

.quick-lookup-row button {
  width: auto;
  min-width: 100px;
}

.quick-lookup-form small {
  color: var(--muted);
}

.quick-result-card {
  display: grid;
  gap: 8px;
  border-color: rgba(48, 211, 164, .28);
  background: rgba(48, 211, 164, .055);
}

.quick-result-top,
.quick-result-footer {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 12px;
}

.quick-result-top > div {
  display: flex;
  align-items: center;
  gap: 9px;
}

.quick-result-card h3,
.quick-result-card p {
  margin: 0;
}

.quick-result-card p,
.quick-result-footer span {
  color: var(--muted);
  font-size: 12px;
}

.quick-result-empty {
  border-color: rgba(255, 104, 120, .24);
  background: rgba(255, 104, 120, .055);
}

/* Clear visual groups in the field job-card form */
#completion-form {
  display: grid;
  gap: 18px;
}

#completion-form .form-section {
  position: relative;
  overflow: hidden;
  margin: 0;
  padding: 19px;
  border: 1px solid rgba(48, 211, 164, .27);
  border-left: 4px solid #30d3a4;
  border-radius: 16px;
  background:
    linear-gradient(135deg, rgba(48, 211, 164, .055), rgba(4, 17, 28, .58));
}

#completion-form .form-section::before {
  content: "";
  position: absolute;
  inset: 0 auto 0 0;
  width: 3px;
  background: linear-gradient(#4be4b3, transparent);
  pointer-events: none;
}

#completion-form .form-section-equipment {
  border-color: rgba(83, 189, 255, .25);
  border-left-color: #53bdff;
  background:
    linear-gradient(135deg, rgba(83, 189, 255, .055), rgba(4, 17, 28, .58));
}

#completion-form .form-section-work {
  border-color: rgba(255, 198, 91, .27);
  border-left-color: #ffc65b;
  background:
    linear-gradient(135deg, rgba(255, 198, 91, .055), rgba(4, 17, 28, .58));
}

#completion-form .form-section-customer {
  border-color: rgba(48, 211, 164, .3);
  border-left-color: #30d3a4;
}

.form-section-heading {
  margin-bottom: 16px;
}

/* Signature expansion */
.signature-toolbar {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 10px;
  margin-top: 8px;
}

.signature-toolbar small {
  color: var(--muted);
}

.signature-expand {
  width: auto;
  min-width: 170px;
  padding: 9px 12px;
}

.signature-close {
  display: none;
  position: absolute;
  top: max(14px, env(safe-area-inset-top));
  right: 14px;
  z-index: 5;
  width: auto;
  padding: 10px 16px;
  background: #087bc1;
}

.signature-fullscreen {
  position: fixed !important;
  inset: 0 !important;
  z-index: 1000 !important;
  width: 100vw !important;
  height: 100dvh !important;
  min-height: 100dvh !important;
  margin: 0 !important;
  border: 0 !important;
  border-radius: 0 !important;
  background: #fff !important;
}

.signature-fullscreen canvas {
  width: 100% !important;
  height: 100% !important;
}

.signature-fullscreen .signature-close {
  display: block;
}

body.signature-mode {
  overflow: hidden;
}

@media (max-width: 1250px) {
  .dashboard-heading {
    grid-template-columns: 1fr 1fr;
  }

  .sync-panel {
    grid-column: 1 / -1;
  }
}

@media (max-width: 820px) {
  .dashboard-heading {
    grid-template-columns: 1fr;
  }

  .sync-panel {
    grid-column: auto;
  }

  .quick-result-footer {
    align-items: stretch;
    flex-direction: column;
  }

  .quick-result-footer .button {
    width: 100%;
  }
}

@media (max-width: 680px) {
  #completion-form {
    gap: 14px;
  }

  #completion-form .form-section {
    padding: 15px 13px;
    border-left-width: 3px;
    border-radius: 14px;
  }

  #completion-form .form-grid {
    grid-template-columns: 1fr;
  }

  #completion-form .field-wide,
  #completion-form .sig {
    grid-column: 1;
  }

  .completion-buttons {
    position: static !important;
    bottom: auto !important;
    z-index: auto !important;
    display: grid;
    grid-template-columns: 1fr !important;
    gap: 10px;
    margin-top: 4px;
    padding: 0 !important;
    border: 0 !important;
    background: transparent !important;
    backdrop-filter: none !important;
  }

  .completion-buttons button {
    position: static !important;
    width: 100%;
    min-height: 60px;
    white-space: normal;
    line-height: 1.25;
  }

  .signature-toolbar {
    align-items: stretch;
    flex-direction: column;
  }

  .signature-expand {
    width: 100%;
  }

  .signature-canvas-box {
    min-height: 42dvh !important;
    height: 42dvh;
    max-height: 420px;
  }

  .signature-canvas-box canvas {
    height: 100% !important;
  }

  .quick-lookup-row {
    grid-template-columns: 1fr;
  }

  .quick-lookup-row button {
    width: 100%;
  }
}


/* Compact automatic quick-call lookup */
.quick-result-compact {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto auto;
  gap: 12px;
  align-items: center;
  padding: 13px 14px;
  border: 1px solid rgba(48, 211, 164, .28);
  border-radius: 14px;
  background: rgba(48, 211, 164, .055);
}

.quick-result-identity {
  min-width: 0;
  display: flex;
  align-items: center;
  gap: 10px;
}

.quick-result-identity strong {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-size: 18px;
}

.quick-result-status {
  white-space: nowrap;
}

.quick-view-button {
  width: auto;
  min-width: 108px;
  padding-left: 16px;
  padding-right: 16px;
}

.quick-search-button {
  transition: opacity .18s;
}

@media (max-width: 680px) {
  .quick-lookup-form {
    padding: 14px;
  }

  .quick-lookup-row {
    grid-template-columns: 1fr;
  }

  .quick-search-button {
    display: none;
  }

  .quick-result-compact {
    grid-template-columns: 1fr auto;
    gap: 10px;
  }

  .quick-result-identity {
    grid-column: 1 / -1;
  }

  .quick-result-identity strong {
    font-size: 20px;
  }

  .quick-result-status {
    justify-self: start;
  }

  .quick-view-button {
    justify-self: end;
    min-width: 118px;
  }

  .quick-result-empty {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 420px) {
  .quick-result-compact {
    grid-template-columns: 1fr;
  }

  .quick-result-identity {
    grid-column: auto;
    flex-wrap: wrap;
  }

  .quick-result-status,
  .quick-view-button {
    width: 100%;
    justify-self: stretch;
  }

  .quick-view-button {
    text-align: center;
  }
}


/* Final compact quick-call layout override */
.quick-result-compact {
  display: grid !important;
  grid-template-columns: minmax(0, 1fr) auto auto !important;
  align-items: center !important;
  column-gap: 18px !important;
  row-gap: 12px !important;
  padding: 14px 15px !important;
}

.quick-result-identity {
  min-width: 0;
  display: flex !important;
  align-items: center !important;
  gap: 12px !important;
}

.quick-result-identity strong {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.quick-result-status {
  width: auto !important;
  min-width: 0;
  justify-self: end !important;
  white-space: nowrap;
}

.quick-view-button {
  width: auto !important;
  min-width: 92px !important;
  min-height: 42px !important;
  padding: 9px 13px !important;
  justify-self: end !important;
  font-size: 14px !important;
  line-height: 1.1 !important;
  text-align: center;
}

@media (max-width: 680px) {
  .quick-result-compact {
    grid-template-columns: minmax(0, 1fr) auto !important;
    column-gap: 12px !important;
    row-gap: 13px !important;
  }

  .quick-result-identity {
    grid-column: 1 / -1 !important;
  }

  .quick-result-status {
    grid-column: 1 !important;
    justify-self: start !important;
    margin-right: 8px;
  }

  .quick-view-button {
    grid-column: 2 !important;
    justify-self: end !important;
    width: auto !important;
    min-width: 102px !important;
    padding: 10px 14px !important;
  }
}

@media (max-width: 390px) {
  .quick-result-identity {
    gap: 8px !important;
  }

  .quick-result-identity strong {
    font-size: 18px !important;
  }

  .quick-view-button {
    min-width: 94px !important;
    padding-left: 11px !important;
    padding-right: 11px !important;
  }
}


/* Guided engineer mobile workflow */
.guided-info-card,
.call-summary-card,
.ticket-info-card,
.latest-update-card {
  border: 1px solid rgba(49, 232, 255, .34) !important;
  border-left: 4px solid #31e8ff !important;
  border-radius: 16px !important;
  background:
    linear-gradient(135deg, rgba(49, 232, 255, .055), rgba(5, 18, 29, .8)) !important;
  box-shadow: 0 14px 36px rgba(0, 0, 0, .16);
}

.guided-ticket-card {
  border-color: rgba(48, 211, 164, .32) !important;
  border-left-color: #30d3a4 !important;
  background:
    linear-gradient(135deg, rgba(48, 211, 164, .055), rgba(5, 18, 29, .8)) !important;
}

.guided-update-card {
  border-color: rgba(255, 198, 91, .3) !important;
  border-left-color: #ffc65b !important;
  background:
    linear-gradient(135deg, rgba(255, 198, 91, .05), rgba(5, 18, 29, .8)) !important;
}

.guided-next-action {
  margin-top: 18px;
  padding: 20px;
  border: 1px solid rgba(48, 211, 164, .34);
  border-radius: 18px;
  background:
    radial-gradient(circle at 95% 0%, rgba(48, 211, 164, .1), transparent 28%),
    rgba(5, 20, 31, .9);
}

.guided-next-action-heading {
  margin-bottom: 16px;
}

.guided-next-action-heading h2 {
  margin: 7px 0 6px;
  font-size: 26px;
}

.guided-next-action-heading p {
  margin: 0;
  color: var(--muted);
}

.guided-next-action .workflow-actions {
  display: grid;
  grid-template-columns: 1fr;
  gap: 12px;
}

.guided-next-action .workflow-actions:has(.dispatch-card) {
  grid-template-columns: repeat(2, minmax(0, 1fr));
  align-items: stretch;
}

.guided-next-action .action-card {
  border: 1px solid rgba(105, 190, 255, .2);
  border-radius: 14px;
  background: rgba(3, 14, 24, .54);
}

.guided-next-action .choice-card {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.guided-next-action .choice-card h3 {
  margin: 0 0 2px;
  font-size: 20px;
}

.guided-next-action .action-choice-hint {
  min-height: 40px;
  margin: 0 0 6px;
  color: var(--muted);
}

.guided-next-action .choice-card button {
  margin-top: auto;
}

.guided-next-action .dispatch-card {
  border-color: rgba(83, 189, 255, .38);
}

.guided-next-action .pending-card {
  border-color: rgba(255, 198, 91, .38);
}

.customer-contact-correction {
  margin-bottom: 18px;
  padding: 16px;
  border: 1px solid rgba(83, 189, 255, .28);
  border-radius: 12px;
  background: rgba(83, 189, 255, .05);
}

.engineer-call-status {
  display: inline-flex;
  width: fit-content;
  padding: 7px 11px;
  border: 1px solid rgba(29, 214, 162, .4);
  border-radius: 999px;
  background: rgba(29, 214, 162, .13);
  color: #72efc8;
  font-size: 14px;
  line-height: 1.2;
}

.operational-adjustment-panel {
  border-color: rgba(255, 198, 91, .3);
}

.adjustment-table td:first-child small {
  display: block;
  margin-top: 3px;
  color: var(--muted);
}

.adjustment-table input {
  min-width: 110px;
}

.adjustment-table .raw-value {
  color: #9cf5d8;
  font-weight: 800;
}

.adjustment-reason {
  margin-top: 16px;
}

.adjustment-warning {
  padding: 11px 13px;
  border-left: 3px solid var(--orange);
  background: rgba(255, 159, 67, .08);
  color: #ffd3a6;
}

.adjustment-history {
  margin-top: 18px;
}

.adjustment-history summary {
  cursor: pointer;
  color: var(--cyan);
  font-weight: 700;
  margin-bottom: 12px;
}

.designer-settings,
.designer-palette,
.designer-preview-panel,
.designer-publish-bar {
  padding: 20px;
  border: 1px solid var(--line);
  border-radius: 18px;
  background: rgba(7, 22, 35, .88);
}

.jobcard-designer {
  display: grid;
  grid-template-columns: minmax(320px, .8fr) minmax(540px, 1.4fr);
  gap: 18px;
  margin: 18px 0;
  align-items: start;
}

.designer-panel-heading,
.designer-publish-bar,
.page-controls {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}

.designer-panel-heading h2,
.designer-publish-bar p {
  margin: 4px 0 0;
}

.designer-field-list {
  display: grid;
  gap: 10px;
  max-height: 72vh;
  overflow-y: auto;
  padding-right: 5px;
}

.khula-field-builder {
  margin: 18px 0;
  padding: 20px;
  border: 1px solid var(--line);
  border-radius: 18px;
  background: rgba(7, 22, 35, .88);
}

.jobcard-field-grid {
  display: grid;
  gap: 14px;
}

.field-group { border: 1px solid var(--line); border-radius: 14px; overflow: hidden; background: rgba(2, 13, 23, .55); }
.field-group > summary { display: flex; justify-content: space-between; gap: 15px; padding: 16px 18px; cursor: pointer; color: var(--cyan); font-weight: 900; background: rgba(36, 194, 255, .07); }
.field-group > summary small { color: var(--muted); font-weight: 600; }
.group-field-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(310px, 1fr)); gap: 12px; padding: 14px; }
.field-card-header { display: flex; justify-content: space-between; align-items: flex-start; gap: 12px; }
.field-card-header .field-type { float: none; flex: 0 0 auto; padding: 3px 7px; border-radius: 999px; background: rgba(255,255,255,.05); }
.automatic-badge { float: right; color: var(--muted); font-size: 11px; }
.custom-field-card .designer-field-options { grid-template-columns: minmax(190px, 1fr) minmax(120px, .45fr) 78px; }

.custom-jobcard-heading {
  margin-top: 10px;
  padding: 10px 0 4px;
  border-bottom: 2px solid var(--cyan);
}

#serial-scanner {
  width: min(92vw, 560px);
  padding: 18px;
  border: 1px solid var(--cyan);
  border-radius: 16px;
  background: #061522;
  color: var(--text);
}

#serial-scanner::backdrop { background: rgba(0, 0, 0, .82); }
#serial-scanner video { width: 100%; min-height: 280px; background: #000; }

.customer-handoff-fields {
  display: grid;
  gap: 12px;
  margin-bottom: 18px;
  padding: 14px;
  border: 1px solid rgba(36, 194, 255, .35);
  border-radius: 12px;
  background: rgba(36, 194, 255, .06);
}

.connector-grid { display: grid; gap: 12px; margin-bottom: 16px; }
.connector-card { display: flex; justify-content: space-between; align-items: center; gap: 18px; padding: 16px; border: 1px solid var(--line); border-radius: 14px; background: rgba(36, 194, 255, .05); }
.connector-card h3, .connector-card p { margin: 4px 0; }
.connector-card > div:last-child { display: grid; gap: 7px; justify-items: end; }

.designer-field {
  padding: 12px;
  border: 1px solid var(--line);
  border-radius: 12px;
  opacity: .65;
  background: rgba(2, 13, 23, .75);
}

.designer-field.enabled {
  opacity: 1;
  border-color: rgba(36, 194, 255, .6);
  box-shadow: inset 3px 0 0 var(--cyan);
}

.field-enable {
  display: inline-flex;
  gap: 8px;
  align-items: center;
}

.field-type {
  float: right;
  color: var(--muted);
  font-size: 12px;
}

.designer-field-options {
  display: grid;
  grid-template-columns: minmax(190px, 1fr) 78px;
  gap: 8px;
  margin-top: 10px;
}

.required-toggle {
  float: right;
  display: inline-flex;
  align-items: center;
  gap: 4px;
  color: var(--cyan);
  font-weight: 800;
}

.required-toggle input { width: auto; margin: 0; }

.designer-field-options label {
  font-size: 12px;
}

.designer-field-options input {
  margin-top: 4px;
}

.pdf-stage-wrap {
  padding: 12px;
  overflow: auto;
  border-radius: 12px;
  background: #1a2530;
}

.pdf-stage {
  position: relative;
  width: 100%;
  aspect-ratio: var(--page-ratio);
  margin: auto;
  overflow: hidden;
  background: #fff;
  box-shadow: 0 8px 30px rgba(0, 0, 0, .35);
}

.pdf-stage iframe,
.pdf-placeholder,
.mapping-layer {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  border: 0;
}

.pdf-placeholder {
  display: grid;
  place-items: center;
  color: #526273;
  font-weight: 800;
}

.mapping-layer {
  z-index: 2;
  pointer-events: none;
}

.mapping-box {
  position: absolute;
  min-width: 24px;
  min-height: 18px;
  overflow: hidden;
  border: 2px solid #087dce;
  border-radius: 4px;
  background: rgba(36, 194, 255, .2);
  color: #03233b;
  cursor: move;
  pointer-events: auto;
  touch-action: none;
  font-size: 11px;
  font-weight: 800;
}

.mapping-box span {
  display: block;
  padding: 3px 5px;
  white-space: nowrap;
}

.mapping-box i {
  position: absolute;
  right: 0;
  bottom: 0;
  width: 13px;
  height: 13px;
  border: 2px solid #fff;
  background: #087dce;
  cursor: nwse-resize;
}

.designer-publish-bar {
  position: sticky;
  bottom: 12px;
  z-index: 5;
  box-shadow: 0 10px 35px rgba(0, 0, 0, .35);
}

@media (max-width: 1100px) {
  .jobcard-designer {
    grid-template-columns: 1fr;
  }

  .designer-field-list {
    max-height: none;
  }
}

.guided-next-action .action-card button {
  min-height: 54px;
  font-size: 16px;
  font-weight: 800;
}

.guided-decision-card {
  margin: 18px 0;
  padding: 20px;
  border: 1px solid rgba(255, 198, 91, .34);
  border-radius: 18px;
  background:
    linear-gradient(135deg, rgba(255, 198, 91, .07), rgba(5, 18, 29, .84));
}

.guided-decision-card h2 {
  margin: 7px 0 8px;
}

.guided-decision-card p {
  color: var(--muted);
  line-height: 1.55;
}

.guided-decision-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 12px;
  margin-top: 16px;
}

@media (max-width: 680px) {
  .guided-info-card,
  .call-summary-card,
  .ticket-info-card,
  .latest-update-card {
    padding: 16px !important;
    border-left-width: 3px !important;
  }

  .guided-next-action {
    padding: 16px;
    border-radius: 15px;
  }

  .guided-next-action-heading h2 {
    font-size: 22px;
  }

  .guided-next-action .workflow-actions {
    grid-template-columns: 1fr !important;
  }

  .guided-next-action .action-card {
    padding: 14px !important;
  }

  .guided-decision-grid {
    grid-template-columns: 1fr;
  }

  #completion-section {
    display: block;
  }

  .signature-canvas-box {
    min-height: 50dvh !important;
    height: 50dvh !important;
    max-height: none !important;
  }
}
.environment-banner {
  position: sticky;
  top: 0;
  z-index: 10000;
  padding: 9px 16px;
  background: #ffb020;
  color: #251600;
  text-align: center;
  font-weight: 950;
  letter-spacing: .08em;
  box-shadow: 0 2px 12px rgba(0, 0, 0, .35);
}