@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;800&display=swap');

:root {
  --navy: #0b1930;
  --navy-2: #10233f;
  --red: #ef2948;
  --red-dark: #d91637;
  --blue: #1462cf;
  --ink: #142238;
  --muted: #667085;
  --line: #e6eaf0;
  --surface: #ffffff;
  --background: #f5f7fa;
  --shadow: 0 14px 40px rgba(18, 38, 63, .09);
}

/* Operations dashboard */
.ops-symbols {
  position: absolute;
  width: 0;
  height: 0;
  overflow: hidden;
}

.ops-dashboard {
  --ops-border: #e8ebf0;
  --ops-heading: #111827;
  --ops-muted: #7d8798;
  width: 100%;
  max-width: 1760px;
  margin: 0 auto;
}

.ops-welcome-card,
.ops-card,
.ops-metric {
  border: 1px solid var(--ops-border);
  background: #fff;
  box-shadow: 0 5px 18px rgba(20, 33, 53, .035);
}

.ops-welcome-card {
  min-height: 174px;
  padding: 20px 24px;
  position: relative;
  display: grid;
  grid-template-columns: minmax(270px, .9fr) minmax(390px, 1.35fr) auto;
  align-items: center;
  overflow: hidden;
  border-radius: 16px;
}

.ops-welcome-copy {
  position: relative;
  z-index: 2;
}

.ops-welcome-copy h1 {
  margin: 0;
  color: var(--ops-heading);
  font-size: clamp(22px, 2vw, 30px);
  font-weight: 700;
  letter-spacing: -.04em;
}

.ops-welcome-copy p {
  margin: 10px 0 0;
  color: #505a6c;
  font-size: 12px;
}

.ops-welcome-copy > span {
  width: 70px;
  height: 3px;
  margin-top: 31px;
  display: block;
  border-radius: 3px;
  background: var(--red);
}

.ops-route-art {
  height: 135px;
  position: relative;
  align-self: end;
}

.ops-skyline {
  position: absolute;
  inset: auto 0 0;
  height: 74px;
  opacity: .7;
  background:
    linear-gradient(90deg, transparent 4%, #edf5fb 4% 12%, transparent 12% 14%, #edf5fb 14% 22%, transparent 22% 25%, #edf5fb 25% 31%, transparent 31% 35%, #edf5fb 35% 44%, transparent 44% 46%, #edf5fb 46% 55%, transparent 55% 60%, #edf5fb 60% 70%, transparent 70% 73%, #edf5fb 73% 80%, transparent 80% 84%, #edf5fb 84% 94%, transparent 94%);
  clip-path: polygon(0 60%,7% 60%,7% 28%,11% 28%,11% 48%,16% 48%,16% 35%,20% 35%,20% 70%,27% 70%,27% 38%,31% 38%,31% 55%,38% 55%,38% 18%,43% 18%,43% 45%,49% 45%,49% 64%,56% 64%,56% 32%,61% 32%,61% 70%,67% 70%,67% 46%,73% 46%,73% 58%,79% 58%,79% 24%,84% 24%,84% 48%,90% 48%,90% 35%,95% 35%,95% 70%,100% 70%,100% 100%,0 100%);
}

.ops-dotted-route {
  position: absolute;
  inset: 0 auto auto 0;
  width: 78%;
  height: 100px;
  overflow: visible;
  color: var(--red);
}

.ops-dotted-route path {
  fill: none;
  stroke: #9ed7f6;
  stroke-width: 2;
  stroke-dasharray: 5 6;
}

.ops-dotted-route use {
  fill: var(--red);
  stroke: #fff;
  stroke-width: 1.5;
}

.ops-hero-truck {
  width: min(370px, 86%);
  height: auto;
  position: absolute;
  right: 1%;
  bottom: -2px;
  display: block;
  mix-blend-mode: multiply;
  filter: drop-shadow(0 5px 5px rgba(16, 24, 40, .10));
}

.hero-truck-body { fill: #f5f6f7; stroke: #51565d; stroke-width: 2; }
.hero-truck-window { fill: #a8bfcc; stroke: #51565d; stroke-width: 2; }
.hero-truck-detail { fill: none; stroke: #51565d; stroke-width: 2; }
.hero-truck-wheel { fill: #22262b; stroke: #fff; stroke-width: 5; }
.ops-hero-truck text { fill: var(--red); font-size: 34px; font-style: italic; font-weight: 900; }
.ops-hero-truck .hero-truck-caption { fill: var(--navy); font-size: 7px; font-style: normal; letter-spacing: .03em; }

.ops-date-card {
  min-width: 228px;
  min-height: 84px;
  padding: 16px 18px;
  position: relative;
  z-index: 2;
  display: flex;
  align-items: center;
  gap: 15px;
  border: 1px solid #eceff3;
  border-radius: 10px;
  background: rgba(255,255,255,.94);
  box-shadow: 0 4px 14px rgba(20, 33, 53, .035);
}

.ops-date-card svg {
  width: 30px;
  height: 30px;
  fill: none;
  stroke: #445166;
  stroke-width: 1.7;
}

.ops-date-card span,
.ops-date-card strong,
.ops-date-card small { display: block; }

.ops-date-card strong {
  color: #303747;
  font-size: 12px;
  font-weight: 600;
  white-space: nowrap;
}

.ops-date-card small {
  margin-top: 8px;
  color: #8c95a5;
  font-size: 11px;
  font-weight: 600;
}

.ops-content-grid {
  margin-top: 16px;
  display: grid;
  grid-template-columns: minmax(0, 1fr) 338px;
  gap: 16px;
  align-items: start;
}

.ops-main-column,
.ops-side-column {
  min-width: 0;
  display: grid;
  gap: 16px;
}

.ops-metrics {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 12px;
}

.ops-metric {
  min-height: 132px;
  padding: 18px 16px;
  position: relative;
  display: grid;
  grid-template-columns: 54px minmax(0, 1fr);
  align-items: start;
  gap: 13px;
  overflow: hidden;
  border-radius: 13px;
}

.ops-metric-icon {
  width: 54px;
  height: 54px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  color: #fff;
  background: #168ed0;
}

.ops-metric-icon svg {
  width: 28px;
  height: 28px;
  fill: none;
  stroke: currentColor;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-width: 1.7;
}

.ops-metric.green .ops-metric-icon { background: linear-gradient(145deg, #0ab052, #258d3d); }
.ops-metric.amber .ops-metric-icon { background: linear-gradient(145deg, #ffb20e, #ff8b00); }
.ops-metric.blue .ops-metric-icon { background: linear-gradient(145deg, #1ea2e6, #0677c9); }
.ops-metric.purple .ops-metric-icon { background: linear-gradient(145deg, #8250df, #6325c7); }
.ops-metric.teal .ops-metric-icon { background: linear-gradient(145deg, #1bb8bd, #07929b); }
.ops-metric.red .ops-metric-icon { background: linear-gradient(145deg, #ff244d, #e80034); }
.ops-metric.orange .ops-metric-icon { background: linear-gradient(145deg, #ff7b00, #f34d00); }
.ops-metric.revenue .ops-metric-icon { background: linear-gradient(145deg, #ff4464, #ed1742); }
.ops-metric-icon.ops-rupee { font-size: 30px; font-weight: 500; }

.ops-metric h2 {
  margin: 1px 0 7px;
  color: #242b38;
  font-size: 11px;
  font-weight: 700;
  white-space: nowrap;
}

.ops-metric strong {
  display: block;
  color: #101623;
  font-size: 25px;
  font-weight: 600;
  letter-spacing: -.035em;
  white-space: nowrap;
}

.ops-metric strong.ops-money { font-size: clamp(17px, 1.35vw, 24px); }

.ops-metric p {
  margin: 7px 0 0;
  color: #8a93a3;
  font-size: 10px;
  white-space: nowrap;
}

.ops-card {
  min-width: 0;
  border-radius: 13px;
  overflow: hidden;
}

.ops-section-heading {
  min-height: 54px;
  padding: 0 18px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  border-bottom: 1px solid #edf0f3;
}

.ops-section-heading h2 {
  margin: 0;
  position: relative;
  color: #242b37;
  font-size: 14px;
  font-weight: 700;
}

.ops-section-heading h2::after {
  content: "";
  width: 33px;
  height: 3px;
  position: absolute;
  left: 0;
  bottom: -15px;
  border-radius: 3px;
  background: var(--red);
}

.ops-section-heading h2 span {
  color: #7d8695;
  font-weight: 500;
}

.ops-section-heading a {
  padding: 8px 14px;
  border-radius: 7px;
  color: #fff;
  background: var(--red);
  box-shadow: 0 5px 12px rgba(239,41,72,.2);
  font-size: 10px;
  font-weight: 700;
}

.ops-section-heading.simple { border-bottom: 0; }

.ops-table-wrap {
  width: 100%;
  overflow: auto;
}

.ops-bookings-table {
  width: 100%;
  min-width: 850px;
  border-collapse: collapse;
  font-size: 10px;
}

.ops-bookings-table th {
  height: 42px;
  padding: 0 14px;
  color: #636d7d;
  background: #fbfcfd;
  font-size: 9px;
  font-weight: 600;
  text-align: left;
  white-space: nowrap;
}

.ops-bookings-table td {
  height: 43px;
  padding: 0 14px;
  border-top: 1px solid #edf0f3;
  color: #4b5565;
  white-space: nowrap;
}

.ops-bookings-table tbody tr:hover { background: #fbfcfe; }
.ops-bookings-table td strong { color: #343c49; font-weight: 600; }
.ops-bookings-table .ops-empty { height: 100px; color: #8a93a3; text-align: center; }

.ops-status {
  padding: 6px 9px;
  display: inline-block;
  border-radius: 6px;
  font-size: 9px;
  font-weight: 600;
}

.ops-status.booked { color: #238d46; background: #eaf8ee; }
.ops-status.in-transit { color: #1875d1; background: #eaf4ff; }
.ops-status.out-for-delivery { color: #f07b26; background: #fff2e6; }
.ops-status.delivered { color: #1e9b50; background: #e8f7ed; }
.ops-status.pod { color: #7e4dd0; background: #f1ebff; }
.ops-status.in-scan { color: #3479cf; background: #e9f3ff; }

.ops-view-booking {
  width: 28px;
  height: 28px;
  display: grid;
  place-items: center;
  border-radius: 6px;
  color: #526174;
}

.ops-view-booking:hover { color: var(--red); background: #fff1f3; }
.ops-view-booking svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 1.8; }

.ops-overview-card { padding-bottom: 16px; }

.ops-overview-grid {
  padding: 2px 16px 0;
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 10px;
}

.ops-overview-grid article {
  min-height: 75px;
  padding: 13px;
  display: flex;
  align-items: center;
  gap: 12px;
  border-radius: 9px;
  background: #edf6ff;
}

.ops-overview-grid article.pieces { background: #edf9f1; }
.ops-overview-grid article.weight { background: #fff4e8; }
.ops-overview-grid article.total { background: #fff0f2; }
.ops-overview-grid article.average { background: #f4edff; }
.ops-overview-grid svg { width: 31px; height: 31px; flex: 0 0 auto; fill: none; stroke: #168ed0; stroke-width: 1.8; }
.ops-overview-grid .pieces svg { stroke: #16a34a; }
.ops-overview-grid .weight svg { stroke: #f97316; }
.ops-overview-grid .average svg { stroke: #7c3aed; }
.ops-overview-grid b { color: var(--red); font-size: 34px; font-weight: 500; }
.ops-overview-grid span { min-width: 0; color: #4f657c; font-size: 9px; font-weight: 600; }
.ops-overview-grid strong { margin-top: 9px; display: block; color: #1d2735; font-size: 17px; font-weight: 600; white-space: nowrap; }

.ops-actions-card { padding-bottom: 16px; }

.ops-actions-grid {
  padding: 1px 16px 0;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 12px;
}

.ops-actions-grid a {
  min-height: 80px;
  padding: 11px 5px;
  display: grid;
  place-items: center;
  align-content: center;
  gap: 8px;
  border: 1px solid #e8ebef;
  border-radius: 9px;
  color: #17223a;
  background: #fff;
  font-size: 9px;
  font-weight: 600;
  text-align: center;
  transition: transform .18s, border-color .18s, box-shadow .18s;
}

.ops-actions-grid a:hover {
  transform: translateY(-2px);
  border-color: #cbd4df;
  box-shadow: 0 7px 15px rgba(16, 35, 63, .07);
}

.ops-actions-grid svg {
  width: 27px;
  height: 27px;
  fill: none;
  stroke: #112342;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-width: 1.7;
}

.ops-actions-grid a:first-child svg {
  padding: 4px;
  border-radius: 50%;
  color: #fff;
  background: #08224b;
  stroke: currentColor;
}

.ops-network-card { padding-bottom: 13px; }

.ops-network-content {
  min-height: 188px;
  padding: 0 14px;
  display: grid;
  grid-template-columns: 52% 1fr;
  align-items: center;
  gap: 6px;
}

.ops-india-map { width: 100%; max-height: 174px; overflow: visible; }
.ops-india-map > path:first-child { fill: #f0f3f6; stroke: #e4e8ed; stroke-width: 1.5; }
.ops-india-map .ops-map-route { fill: none; stroke: #d8dde4; stroke-width: 1.1; }
.ops-india-map circle { fill: var(--red); stroke: #fff; stroke-width: 2; }

.ops-city-list {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 11px 7px;
}

.ops-city-list span {
  display: flex;
  align-items: center;
  gap: 7px;
  color: #323b49;
  font-size: 8px;
  font-weight: 600;
}

.ops-city-list i {
  width: 7px;
  height: 7px;
  flex: 0 0 auto;
  border: 2px solid var(--red);
  border-radius: 50%;
}

.ops-city-list .secondary i { border-color: #5973a0; }
.ops-city-list .ops-no-cities { grid-column: 1 / -1; color: #8b95a5; line-height: 1.5; }

.ops-network-tagline {
  width: calc(100% - 32px);
  min-height: 30px;
  margin: 0 16px;
  display: grid;
  place-items: center;
  border-radius: 8px;
  color: #fff;
  background: #072b5b;
  font-size: 10px;
}

.ops-routes-card { padding-bottom: 18px; }

.ops-routes-content {
  min-height: 180px;
  padding: 0 15px;
  display: grid;
  grid-template-columns: 128px minmax(0, 1fr);
  align-items: center;
  gap: 12px;
}

.ops-donut {
  width: 124px;
  height: 124px;
  padding: 24px;
  display: grid;
  place-items: center;
  border-radius: 50%;
}

.ops-donut::before {
  content: "";
  width: 77px;
  height: 77px;
  grid-area: 1 / 1;
  border-radius: 50%;
  background: #fff;
}

.ops-donut span {
  position: relative;
  grid-area: 1 / 1;
  color: #6d7583;
  font-size: 9px;
  text-align: center;
}

.ops-donut strong { display: block; color: #151b25; font-size: 23px; font-weight: 600; }

.ops-route-list { display: grid; gap: 11px; }
.ops-route-list > span { display: grid; grid-template-columns: 8px minmax(0, 1fr) auto; align-items: center; gap: 6px; }
.ops-route-list i { width: 7px; height: 7px; border-radius: 50%; }
.ops-route-list b { overflow: hidden; color: #3d4654; font-size: 8px; font-weight: 600; text-overflow: ellipsis; white-space: nowrap; }
.ops-route-list em { color: #4c5665; font-size: 8px; font-style: normal; font-weight: 600; white-space: nowrap; }
.ops-route-list p { margin: 0; color: #8a93a3; font-size: 10px; line-height: 1.5; }

@media (max-width: 1500px) {
  .ops-welcome-card { grid-template-columns: minmax(250px, .8fr) minmax(330px, 1.15fr) auto; }
  .ops-date-card { min-width: 205px; }
  .ops-content-grid { grid-template-columns: minmax(0, 1fr) 300px; }
  .ops-metric { padding-inline: 13px; grid-template-columns: 46px minmax(0, 1fr); gap: 10px; }
  .ops-metric-icon { width: 46px; height: 46px; }
  .ops-metric-icon svg { width: 24px; height: 24px; }
  .ops-overview-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .ops-routes-content { grid-template-columns: 105px minmax(0, 1fr); }
  .ops-donut { width: 102px; height: 102px; padding: 18px; }
  .ops-donut::before { width: 64px; height: 64px; }
}

@media (max-width: 1180px) {
  .ops-welcome-card { grid-template-columns: 1fr auto; }
  .ops-route-art { display: none; }
  .ops-content-grid { grid-template-columns: 1fr; }
  .ops-side-column { grid-template-columns: repeat(2, minmax(0, 1fr)); align-items: start; }
  .ops-actions-card { grid-row: span 2; }
  .ops-routes-content { grid-template-columns: 120px minmax(0, 1fr); }
  .ops-donut { width: 116px; height: 116px; }
  .ops-donut::before { width: 72px; height: 72px; }
}

@media (max-width: 820px) {
  .ops-metrics { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .ops-overview-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .ops-side-column { grid-template-columns: 1fr; }
  .ops-actions-card { grid-row: auto; }
}

@media (max-width: 600px) {
  .ops-welcome-card { padding: 20px; display: block; }
  .ops-welcome-copy h1 { font-size: 22px; }
  .ops-welcome-copy > span { margin-top: 22px; }
  .ops-date-card { width: 100%; min-width: 0; margin-top: 20px; }
  .ops-metrics { grid-template-columns: 1fr; }
  .ops-metric { min-height: 116px; }
  .ops-section-heading { padding-inline: 14px; }
  .ops-overview-grid { grid-template-columns: 1fr; padding-inline: 13px; }
  .ops-overview-grid article { min-height: 70px; }
  .ops-actions-grid { grid-template-columns: repeat(2, 1fr); }
  .ops-network-content { grid-template-columns: 48% 1fr; }
  .ops-routes-content { grid-template-columns: 105px minmax(0, 1fr); }
  .ops-donut { width: 100px; height: 100px; }
  .ops-donut::before { width: 62px; height: 62px; }
}

* {
  box-sizing: border-box;
}

html {
  font-family: Inter, "Segoe UI", sans-serif;
  color: var(--ink);
  background: var(--background);
}

body {
  margin: 0;
}

button,
input,
select,
textarea {
  font: inherit;
}

button,
a {
  -webkit-tap-highlight-color: transparent;
}

a {
  color: inherit;
  text-decoration: none;
}

/* Login */
.login-body {
  min-height: 100vh;
  background:
    radial-gradient(circle at 50% -20%, rgba(20, 98, 207, .10), transparent 42%),
    #f7f9fc;
}

.login-page {
  width: min(100% - 32px, 690px);
  min-height: 100vh;
  margin: 0 auto;
  padding: 56px 0;
  display: grid;
  place-content: center;
  gap: 26px;
}

.login-brand {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  color: var(--navy);
  font-size: 11px;
  font-weight: 800;
  letter-spacing: .06em;
}

.login-brand-mark {
  color: var(--red);
  font-size: 30px;
  font-weight: 900;
  font-style: italic;
  letter-spacing: -.16em;
  line-height: 1;
  padding-right: 4px;
}

.login-card {
  width: min(100%, 625px);
  padding: 46px 54px 34px;
  border: 1px solid rgba(16, 35, 63, .05);
  border-radius: 18px;
  background: rgba(255, 255, 255, .96);
  box-shadow: 0 22px 70px rgba(16, 35, 63, .13);
}

.login-card-heading {
  margin-bottom: 33px;
  text-align: center;
}

.login-card-heading p {
  margin: 0 0 7px;
  color: var(--red);
  font-size: 12px;
  font-weight: 800;
  letter-spacing: .13em;
  text-transform: uppercase;
}

.login-card-heading h1 {
  margin: 0;
  color: var(--navy);
  font-size: clamp(30px, 5vw, 38px);
  letter-spacing: -.04em;
}

.login-card-heading span {
  display: block;
  margin-top: 9px;
  color: var(--muted);
  font-size: 14px;
}

.login-form {
  display: grid;
}

.login-form > label {
  margin: 19px 0 9px;
  color: var(--navy);
  font-size: 14px;
  font-weight: 700;
}

.input-shell {
  height: 58px;
  display: flex;
  align-items: center;
  border: 1.5px solid #d7dde6;
  border-radius: 9px;
  background: #fff;
  transition: border-color .2s, box-shadow .2s;
}

.input-shell:focus-within {
  border-color: var(--blue);
  box-shadow: 0 0 0 4px rgba(20, 98, 207, .10);
}

.input-shell > svg {
  width: 22px;
  height: 22px;
  margin-left: 18px;
  fill: none;
  stroke: #8992a3;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-width: 1.8;
}

.input-shell input {
  width: 100%;
  min-width: 0;
  height: 100%;
  padding: 0 15px;
  border: 0;
  outline: 0;
  color: var(--navy);
  background: transparent;
}

.input-shell input::placeholder {
  color: #9299a7;
}

.password-toggle {
  width: 52px;
  height: 100%;
  padding: 0;
  display: grid;
  place-items: center;
  border: 0;
  cursor: pointer;
  background: transparent;
}

.password-toggle svg {
  width: 22px;
  height: 22px;
  fill: none;
  stroke: #778195;
  stroke-width: 1.8;
}

.login-button {
  height: 60px;
  margin-top: 30px;
  padding: 0 23px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 14px;
  border: 0;
  border-radius: 9px;
  color: #fff;
  background: linear-gradient(100deg, #1472de, #0757bd);
  box-shadow: 0 12px 24px rgba(13, 93, 198, .22);
  cursor: pointer;
  font-size: 17px;
  font-weight: 700;
  transition: transform .2s, box-shadow .2s;
}

.login-button:hover {
  transform: translateY(-1px);
  box-shadow: 0 15px 30px rgba(13, 93, 198, .29);
}

.login-help {
  margin: 26px 0 0;
  color: #98a1b0;
  font-size: 11px;
  text-align: center;
}

.validation-summary {
  padding: 0;
  color: #b42318;
  font-size: 13px;
}

.validation-summary:empty,
.validation-summary.validation-summary-valid {
  display: none;
}

.validation-summary ul {
  margin: 0;
  padding: 11px 14px;
  border: 1px solid #fecaca;
  border-radius: 8px;
  background: #fff1f2;
  list-style: none;
}

.field-error {
  min-height: 0;
  margin-top: 2px;
  color: #b42318;
  font-size: 12px;
}

/* App shell */
.app-body {
  min-height: 100vh;
  overflow: hidden;
  background: #08172b;
}

.app-shell {
  min-height: 100vh;
}

.sidebar {
  position: fixed;
  z-index: 30;
  inset: 0 auto 0 0;
  width: 272px;
  padding: 14px 12px;
  display: flex;
  flex-direction: column;
  color: #eef4ff;
  background: var(--navy);
  overflow-y: auto;
  scrollbar-width: thin;
  scrollbar-color: #31445f transparent;
}

.brand-card {
  min-height: 128px;
  margin-bottom: 14px;
  padding: 17px 12px 13px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  border-radius: 12px;
  color: var(--navy);
  background: #fff;
  box-shadow: inset 0 0 0 1px #e5e9ef;
}

.brand-mark {
  color: var(--red);
  font-size: 50px;
  font-weight: 900;
  font-style: italic;
  letter-spacing: -.15em;
  line-height: .9;
  padding-right: 9px;
}

.brand-name {
  margin-top: 10px;
  font-size: 9px;
  font-weight: 900;
  letter-spacing: .04em;
}

.brand-since {
  margin-top: 8px;
  padding: 3px 11px;
  border-radius: 20px;
  color: #fff;
  background: #173963;
  font-size: 8px;
  font-weight: 800;
}

.side-nav {
  display: grid;
  gap: 3px;
}

.nav-link {
  min-height: 44px;
  padding: 0 14px;
  display: flex;
  align-items: center;
  gap: 12px;
  border: 0;
  border-radius: 8px;
  color: #d9e3f2;
  background: transparent;
  cursor: pointer;
  font-size: 13px;
  font-weight: 500;
  text-align: left;
  transition: color .18s, background .18s;
}

.nav-link:hover {
  color: #fff;
  background: rgba(255, 255, 255, .07);
}

.nav-link.active {
  color: #fff;
  background: var(--red);
  box-shadow: 0 8px 18px rgba(239, 41, 72, .22);
}

.nav-icon {
  width: 22px;
  flex: 0 0 22px;
  color: currentColor;
  font-size: 20px;
  line-height: 1;
  text-align: center;
}

.nav-arrow {
  margin-left: auto;
}

.nav-group {
  display: grid;
}

.nav-group summary {
  list-style: none;
}

.nav-group summary::-webkit-details-marker {
  display: none;
}

.nav-group[open] summary .nav-arrow {
  transform: rotate(180deg);
}

.nav-submenu {
  margin: 4px 0 6px 41px;
  padding-left: 12px;
  display: grid;
  border-left: 1px solid #33445e;
}

.nav-submenu a {
  padding: 8px 6px;
  color: #aebbd0;
  font-size: 11px;
}

.nav-submenu a:hover,
.nav-submenu a.active {
  color: #fff;
}

.nav-submenu a.active {
  font-weight: 700;
}

.support-card {
  min-height: 76px;
  margin-top: auto;
  padding: 12px;
  display: flex;
  align-items: center;
  gap: 11px;
  border: 1px solid #334a69;
  border-radius: 12px;
}

.support-icon {
  width: 46px;
  height: 46px;
  display: grid;
  place-items: center;
  flex: 0 0 auto;
  border-radius: 50%;
  background: var(--red);
  font-size: 24px;
}

.support-card small,
.support-card strong {
  display: block;
}

.support-card small {
  color: #f0f4fa;
  font-size: 11px;
}

.support-card strong {
  margin-top: 6px;
  color: var(--red);
  font-size: 13px;
}

.sidebar-backdrop {
  display: none;
}

.page-frame {
  height: 100vh;
  min-height: 100vh;
  margin-left: 272px;
  display: grid;
  grid-template-rows: 76px minmax(0, 1fr) 45px;
  overflow: hidden;
  border-radius: 14px 0 0 14px;
  background: var(--background);
}

.topbar {
  padding: 0 28px;
  display: flex;
  align-items: center;
  gap: 18px;
  border-bottom: 1px solid #eef0f4;
  background: #fff;
}

.icon-button {
  width: 40px;
  height: 40px;
  display: grid;
  place-items: center;
  border: 0;
  border-radius: 9px;
  color: var(--navy);
  background: transparent;
  cursor: pointer;
  font-size: 22px;
}

.icon-button:hover {
  background: #f4f6f9;
}

.menu-button {
  font-size: 25px;
}

.global-search {
  width: min(440px, 45vw);
  height: 46px;
  padding: 0 12px;
  display: flex;
  align-items: center;
  gap: 9px;
  border: 1px solid #e7eaf0;
  border-radius: 9px;
  background: #fbfcfd;
}

.global-search > span {
  color: #69758a;
  font-size: 20px;
}

.global-search input {
  min-width: 0;
  flex: 1;
  border: 0;
  outline: 0;
  color: var(--navy);
  background: transparent;
  font-size: 12px;
}

.global-search kbd {
  padding: 4px 8px;
  border: 1px solid #e4e7ec;
  border-radius: 5px;
  color: #8c95a4;
  background: #fff;
  font-family: inherit;
  font-size: 11px;
  box-shadow: 0 1px 2px rgba(16, 24, 40, .05);
}

.top-actions {
  margin-left: auto;
  display: flex;
  align-items: center;
  gap: 8px;
}

.notification-button {
  position: relative;
}

.notification-count {
  position: absolute;
  top: 2px;
  right: 1px;
  width: 18px;
  height: 18px;
  display: grid;
  place-items: center;
  border: 2px solid #fff;
  border-radius: 50%;
  color: #fff;
  background: var(--red);
  font-size: 9px;
  font-weight: 800;
}

.profile {
  position: relative;
  margin-left: 7px;
  padding-left: 18px;
  border-left: 1px solid #eef0f3;
}

.profile-button {
  padding: 5px 4px;
  display: flex;
  align-items: center;
  gap: 10px;
  border: 0;
  color: var(--navy);
  background: transparent;
  cursor: pointer;
}

.avatar {
  width: 39px;
  height: 39px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  color: #fff;
  background: var(--navy);
  font-weight: 800;
}

.profile-copy {
  min-width: 95px;
  display: grid;
  text-align: left;
}

.profile-copy strong {
  font-size: 12px;
  text-transform: capitalize;
}

.profile-copy small {
  margin-top: 2px;
  color: var(--muted);
  font-size: 10px;
}

.profile-menu {
  position: absolute;
  z-index: 10;
  top: calc(100% + 8px);
  right: 0;
  width: 210px;
  padding: 12px;
  display: none;
  border: 1px solid var(--line);
  border-radius: 10px;
  background: #fff;
  box-shadow: var(--shadow);
}

.profile-menu.open {
  display: block;
}

.profile-menu > span {
  display: block;
  padding: 5px 6px 11px;
  color: var(--muted);
  font-size: 11px;
}

.profile-menu button {
  width: 100%;
  padding: 10px;
  border: 0;
  border-radius: 7px;
  color: #fff;
  background: var(--red);
  cursor: pointer;
  font-weight: 700;
}

.page-content {
  min-height: 0;
  padding: 24px;
  overflow-y: auto;
  overscroll-behavior: contain;
  -webkit-overflow-scrolling: touch;
}

.app-footer {
  padding: 0 28px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  border-top: 1px solid #eef0f4;
  color: #8c94a2;
  background: #fff;
  font-size: 10px;
}

.app-footer b {
  color: var(--red);
}

/* Dashboard */
.welcome-banner {
  min-height: 165px;
  padding: 26px 28px;
  position: relative;
  display: grid;
  grid-template-columns: minmax(260px, 1fr) minmax(350px, 1.5fr) auto;
  align-items: center;
  overflow: hidden;
  border: 1px solid #eef1f5;
  border-radius: 14px;
  background: #fff;
  box-shadow: 0 5px 18px rgba(16, 24, 40, .03);
}

.eyebrow {
  margin: 0 0 6px;
  color: var(--red);
  font-size: 9px;
  font-weight: 800;
  letter-spacing: .13em;
}

.welcome-copy {
  position: relative;
  z-index: 2;
}

    .welcome-copy h1,
    .master-heading h1 {
        margin: 0;
        color: #ef2948;
        font-size: clamp(15px, 2.1vw, 27px);
        letter-spacing: -.035em;
    }

.welcome-copy > span,
.master-heading > div > span {
  display: block;
  margin-top: 7px;
  color: var(--muted);
  font-size: 12px;
}

.welcome-copy i {
  width: 64px;
  height: 3px;
  margin-top: 24px;
  display: block;
  background: var(--red);
}

.route-art {
  height: 135px;
  position: relative;
}

.route-line {
  position: absolute;
  inset: -5px 0 auto 0;
  width: 70%;
  height: 110px;
  fill: var(--red);
  stroke: #b9d9ea;
  stroke-dasharray: 5 5;
  stroke-width: 2;
}

.route-line circle {
  fill: var(--red);
  stroke: #fff;
  stroke-width: 4;
}

.truck {
  width: 330px;
  max-width: 65%;
  position: absolute;
  right: 5%;
  bottom: -2px;
  overflow: visible;
}

.truck-box {
  fill: #eef1f3;
  stroke: #6b7077;
  stroke-width: 2;
}

.truck-cab {
  fill: #f1f3f4;
  stroke: #5d636a;
  stroke-width: 2;
}

.truck-window {
  fill: #a8bdca;
  stroke: #5d636a;
  stroke-width: 2;
}

.truck-line {
  fill: none;
  stroke: #5d636a;
  stroke-width: 2;
}

.truck-wheel {
  fill: #242a30;
  stroke: #fff;
  stroke-width: 5;
}

.truck text {
  fill: var(--red);
  font-size: 34px;
  font-style: italic;
  font-weight: 900;
}

.truck .truck-caption {
  fill: var(--navy);
  font-size: 6px;
  font-style: normal;
  font-weight: 800;
}

.date-card {
  min-width: 190px;
  padding: 17px;
  display: flex;
  align-items: center;
  gap: 12px;
  border: 1px solid #edf0f4;
  border-radius: 10px;
  background: #fff;
  box-shadow: 0 5px 16px rgba(16, 24, 40, .03);
}

.calendar-icon {
  color: #747e8f;
  font-size: 27px;
}

.date-card strong,
.date-card small {
  display: block;
}

.date-card strong {
  font-size: 11px;
}

.date-card small {
  margin-top: 7px;
  color: var(--muted);
  font-size: 10px;
}

.dashboard-grid {
  margin-top: 20px;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 16px;
}

.stat-card {
  min-height: 118px;
  padding: 21px;
  display: flex;
  align-items: center;
  gap: 15px;
  border: 1px solid #edf0f4;
  border-radius: 12px;
  background: #fff;
  box-shadow: 0 5px 16px rgba(16, 24, 40, .035);
}

.stat-icon {
  width: 45px;
  height: 45px;
  display: grid;
  place-items: center;
  flex: 0 0 auto;
  border-radius: 11px;
  font-size: 22px;
}

.stat-icon.blue { color: #1462cf; background: #eaf2ff; }
.stat-icon.amber { color: #ad6800; background: #fff5dd; }
.stat-icon.green { color: #087e58; background: #e8f8f1; }
.stat-icon.red { color: #d92d20; background: #fff0ef; }

.stat-card div {
  display: grid;
}

.stat-card small {
  color: #8c95a4;
  font-size: 8px;
  font-weight: 800;
  letter-spacing: .08em;
}

.stat-card strong {
  margin: 3px 0;
  color: var(--navy);
  font-size: 24px;
}

.stat-card div span {
  color: var(--muted);
  font-size: 9px;
}

.dashboard-panel {
  margin-top: 20px;
  padding: 24px;
  border: 1px solid #edf0f4;
  border-radius: 12px;
  background: #fff;
}

.panel-heading {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 18px;
}

.panel-heading h2 {
  margin: 0;
  color: var(--navy);
  font-size: 19px;
}

.panel-heading > div > span {
  display: block;
  margin-top: 5px;
  color: var(--muted);
  font-size: 11px;
}

.primary-link {
  color: #1462cf;
  font-size: 11px;
  font-weight: 700;
}

.quick-links {
  margin-top: 20px;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 12px;
}

.quick-links a {
  min-height: 108px;
  padding: 17px;
  display: grid;
  grid-template-columns: 38px 1fr;
  column-gap: 11px;
  align-content: center;
  border: 1px solid var(--line);
  border-radius: 10px;
  transition: border-color .2s, transform .2s;
}

.quick-links a:hover {
  transform: translateY(-2px);
  border-color: #b8c9e0;
}

.quick-links a > span {
  width: 38px;
  height: 38px;
  grid-row: span 2;
  display: grid;
  place-items: center;
  border-radius: 9px;
  color: #fff;
  background: var(--navy);
  font-size: 18px;
}

.quick-links strong {
  align-self: end;
  font-size: 12px;
}

.quick-links small {
  margin-top: 4px;
  color: var(--muted);
  font-size: 9px;
}

/* Masters */
.master-heading {
  min-height: 80px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 18px;
}

.back-link {
  padding: 10px 13px;
  border: 1px solid var(--line);
  border-radius: 8px;
  color: #506079;
  background: #fff;
  font-size: 11px;
  font-weight: 600;
}

.toast-message {
  margin: 9px 0 14px;
  padding: 12px 15px;
  border: 1px solid;
  border-radius: 9px;
  font-size: 12px;
  font-weight: 600;
}

.toast-message.success {
  color: #067647;
  border-color: #abefc6;
  background: #ecfdf3;
}

.toast-message.error {
  color: #b42318;
  border-color: #fecdca;
  background: #fef3f2;
}

.master-tabs {
  margin: 14px 0 18px;
  padding: 5px;
  display: flex;
  gap: 3px;
  overflow-x: auto;
  border: 1px solid var(--line);
  border-radius: 10px;
  background: #fff;
  scrollbar-width: thin;
}

.master-tabs a {
  padding: 9px 13px;
  flex: 0 0 auto;
  border-radius: 7px;
  color: #667085;
  font-size: 10px;
  font-weight: 700;
  white-space: nowrap;
}

.master-tabs a:hover {
  color: var(--navy);
  background: #f5f7fa;
}

.master-tabs a.active {
  color: #fff;
  background: var(--navy);
}

.master-workspace {
  display: grid;
  grid-template-columns: minmax(285px, 34%) 1fr;
  gap: 18px;
  align-items: start;
}

.master-workspace.wide-form {
  grid-template-columns: minmax(430px, 45%) 1fr;
}

.form-card,
.list-card {
  border: 1px solid var(--line);
  border-radius: 12px;
  background: #fff;
  box-shadow: 0 4px 15px rgba(16, 24, 40, .025);
}

.form-card {
  padding: 22px;
}

.card-title {
  padding-bottom: 18px;
  display: flex;
  align-items: center;
  gap: 12px;
  border-bottom: 1px solid #eef0f3;
}

.title-icon {
  width: 30px;
  height: 30px;
  display: grid;
  place-items: center;
  flex: 0 0 auto;
  border-radius: 5px;
  color: #fff;
  background: var(--red);
  font-size: 13px;
  font-weight: 800;
}

.card-title h2,
.list-heading h2 {
  margin: 0;
  color: var(--navy);
  font-size: 15px;
}

.card-title p,
.list-heading p {
  margin: 4px 0 0;
  color: var(--muted);
  font-size: 9px;
}

.master-form {
  padding-top: 7px;
  display: grid;
  gap: 0;
}

.master-form.form-grid {
  grid-template-columns: 1fr 1fr;
  column-gap: 13px;
}

.master-form label {
  margin-top: 13px;
  display: grid;
  gap: 7px;
  color: #344054;
  font-size: 10px;
  font-weight: 700;
}

.master-form input,
.master-form select,
.master-form textarea {
  width: 100%;
  min-width: 0;
  height: 42px;
  padding: 0 12px;
  border: 1px solid #d9dee7;
  border-radius: 7px;
  outline: 0;
  color: var(--navy);
  background: #fff;
  font-size: 11px;
  transition: border-color .18s, box-shadow .18s;
}

.master-form textarea {
  height: 72px;
  padding-top: 11px;
  resize: vertical;
}

.master-form input:focus,
.master-form select:focus,
.master-form textarea:focus {
  border-color: #4c83cb;
  box-shadow: 0 0 0 3px rgba(20, 98, 207, .09);
}

.master-form input[readonly] {
  color: #667085;
  background: #f5f7f9;
}

.master-form .span-2 {
  grid-column: span 2;
}

.money-input {
  display: flex;
  align-items: center;
  border: 1px solid #d9dee7;
  border-radius: 7px;
}

.money-input:focus-within {
  border-color: #4c83cb;
  box-shadow: 0 0 0 3px rgba(20, 98, 207, .09);
}

.money-input span {
  padding-left: 12px;
  color: #667085;
}

.money-input input {
  border: 0;
  box-shadow: none !important;
}

.form-actions {
  margin-top: 20px;
  display: flex;
  justify-content: flex-end;
  gap: 8px;
}

.primary-button,
.secondary-button {
  min-height: 40px;
  padding: 0 16px;
  border: 0;
  border-radius: 7px;
  cursor: pointer;
  font-size: 10px;
  font-weight: 800;
}

.primary-button {
  color: #fff;
  background: var(--red);
  box-shadow: 0 7px 14px rgba(239, 41, 72, .16);
}

.secondary-button {
  color: #475467;
  border: 1px solid #d9dee7;
  background: #fff;
}

.list-card {
  min-width: 0;
  overflow: hidden;
}

.list-heading {
  min-height: 74px;
  padding: 15px 18px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  border-bottom: 1px solid var(--line);
}

.table-search {
  width: min(190px, 45%);
  height: 36px;
  padding: 0 10px;
  display: flex;
  align-items: center;
  gap: 6px;
  border: 1px solid #e0e4ea;
  border-radius: 7px;
  color: #8c95a4;
}

.table-search input {
  width: 100%;
  min-width: 0;
  border: 0;
  outline: 0;
  font-size: 9px;
}

.table-wrap {
  overflow-x: auto;
}

table {
  width: 100%;
  border-collapse: collapse;
  font-size: 10px;
}

th {
  padding: 11px 13px;
  color: #667085;
  background: #f8f9fb;
  font-size: 8px;
  font-weight: 800;
  letter-spacing: .04em;
  text-align: left;
  text-transform: uppercase;
  white-space: nowrap;
}

td {
  padding: 7px;
  border-top: 1px solid #eef0f3;
  color: #475467;
  vertical-align: middle;
}

td strong {
  color: var(--navy);
}

td small {
  margin-top: 4px;
  display: block;
  max-width: 210px;
  color: #8a94a4;
  line-height: 1.4;
}

.code-pill {
  padding: 4px 7px;
  border-radius: 5px;
  color: #344054;
  background: #f1f3f6;
  font-size: 9px;
  font-weight: 700;
}

.actions-cell {
  width: 115px;
  text-align: right;
}

.row-actions {
  white-space: nowrap;
  text-align: right;
}

.row-actions form {
  display: inline;
}

.row-actions button {
  padding: 6px 7px;
  border: 0;
  color: #1462cf;
  background: transparent;
  cursor: pointer;
  font-size: 9px;
  font-weight: 700;
}

.row-actions form button {
  color: #d92d20;
}

.empty-state {
  padding: 38px 20px;
  color: #8b95a5;
  font-size: 11px;
  text-align: center;
}

tr.filtered-out {
  display: none;
}

@media (max-width: 1180px) {
  .dashboard-grid,
  .quick-links {
    grid-template-columns: repeat(2, 1fr);
  }

  .welcome-banner {
    grid-template-columns: 1fr auto;
  }

  .route-art {
    display: none;
  }

  .master-workspace,
  .master-workspace.wide-form {
    grid-template-columns: minmax(310px, 40%) 1fr;
  }
}

@media (max-width: 900px) {
  .sidebar {
    transform: translateX(-100%);
    transition: transform .25s ease;
  }

  .sidebar.open {
    transform: translateX(0);
  }

  .sidebar-backdrop.open {
    position: fixed;
    z-index: 25;
    inset: 0;
    display: block;
    background: rgba(4, 12, 24, .55);
  }

  .page-frame {
    margin-left: 0;
    border-radius: 0;
  }

  .master-workspace,
  .master-workspace.wide-form {
    grid-template-columns: 1fr;
  }

  .welcome-banner {
    grid-template-columns: 1fr auto;
  }
}

@media (max-width: 650px) {
  .login-page {
    width: min(100% - 24px, 520px);
    padding: 26px 0;
  }

  .login-card {
    padding: 30px 22px 25px;
  }

  .login-brand {
    font-size: 9px;
  }

  .topbar {
    height: 66px;
    padding: 0 12px;
    gap: 6px;
  }

  .page-frame {
    grid-template-rows: 66px 1fr auto;
  }

  .global-search {
    width: auto;
    min-width: 0;
    flex: 1;
  }

  .global-search kbd,
  .hide-mobile,
  .profile-copy {
    display: none;
  }

  .profile {
    margin-left: 0;
    padding-left: 5px;
  }

  .avatar {
    width: 34px;
    height: 34px;
  }

  .profile-button {
    gap: 4px;
  }

  .page-content {
    padding: 15px;
  }

  .welcome-banner {
    padding: 22px;
    display: block;
  }

  .date-card {
    width: 100%;
    margin-top: 22px;
  }

  .dashboard-grid,
  .quick-links {
    grid-template-columns: 1fr;
  }

  .panel-heading,
  .master-heading {
    align-items: flex-start;
  }

  .master-heading {
    padding-top: 4px;
  }

  .master-heading .back-link {
    display: none;
  }

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

  .master-form .span-2 {
    grid-column: auto;
  }

  .list-heading {
    align-items: flex-start;
  }

  .table-search {
    width: 46%;
  }

  .app-footer {
    min-height: 54px;
    padding: 12px 15px;
    display: grid;
    gap: 6px;
  }
}


/* Delivery boy documents */
.delivery-workspace {
  grid-template-columns: minmax(520px, 52%) 1fr;
}

.form-section-label {
  margin-top: 22px;
  padding: 0 0 7px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  border-bottom: 1px solid #e9edf2;
  color: var(--navy);
  font-size: 10px;
  font-weight: 800;
  letter-spacing: .06em;
  text-transform: uppercase;
}

.form-section-label small {
  color: #8b95a5;
  font-size: 8px;
  font-weight: 500;
  letter-spacing: 0;
  text-transform: none;
}

.photo-upload {
  padding: 11px;
  border: 1px dashed #cdd5df;
  border-radius: 8px;
  background: #fafbfc;
}

.photo-upload > span {
  color: #344054;
  font-size: 10px;
  font-weight: 700;
}

.photo-upload input[type="file"] {
  height: auto;
  padding: 8px;
  border: 0;
  background: #fff;
  font-size: 9px;
}

.photo-upload input[type="file"]::file-selector-button {
  margin-right: 9px;
  padding: 7px 10px;
  border: 0;
  border-radius: 6px;
  color: #fff;
  background: var(--navy);
  cursor: pointer;
  font-size: 9px;
  font-weight: 700;
}

.photo-upload small,
.edit-upload-note {
  color: #8b95a5;
  font-size: 8px;
  font-weight: 400;
  line-height: 1.5;
}

.edit-upload-note {
  margin: 9px 0 0;
}

.pod-current-preview {
  display: grid;
  grid-template-columns: minmax(160px, 280px) minmax(0, 1fr);
  align-items: center;
  gap: 14px;
  margin: 10px 0 12px;
  padding: 10px;
  border: 1px solid #dce5ef;
  border-radius: 9px;
  background: #f8fafc;
}

.pod-current-preview > a {
  display: block;
  overflow: hidden;
  border: 1px solid #d6dee9;
  border-radius: 7px;
  background: #fff;
}

.pod-current-preview img {
  display: block;
  width: 100%;
  height: 210px;
  object-fit: contain;
  background: #fff;
}

.pod-current-preview > div {
  display: grid;
  justify-items: start;
  gap: 5px;
}

.pod-current-preview strong {
  color: #25324b;
  font-size: 12px;
}

.pod-current-preview span,
.pod-current-preview small {
  color: #667085;
  font-size: 9px;
}

@media (max-width: 600px) {
  .pod-current-preview {
    grid-template-columns: minmax(0, 1fr);
  }

  .pod-current-preview img {
    height: 240px;
  }
}

.image-file-preview {
  display: flex;
  align-items: center;
  gap: 9px;
  margin-top: 8px;
  padding: 7px;
  border: 1px solid #e0e5ec;
  border-radius: 7px;
  background: #fff;
}

.image-file-preview[hidden],
.image-file-error[hidden],
.photo-viewer[hidden] {
  display: none;
}

.image-file-preview img {
  width: 58px;
  height: 58px;
  flex: 0 0 58px;
  border-radius: 6px;
  object-fit: cover;
  background: #eef2f6;
  cursor: zoom-in;
}

.image-file-preview-details {
  min-width: 0;
  display: grid;
  gap: 3px;
}

.image-file-preview-details strong {
  overflow: hidden;
  color: #27364d;
  font-size: 9px;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.image-file-preview-details small {
  font-size: 8px;
}

.image-file-error {
  display: block;
  margin-top: 6px;
  color: #d92d20;
  font-size: 9px;
  font-weight: 600;
}

.photo-upload.has-file-error {
  border-color: #f04438;
  background: #fff5f4;
}

body.photo-viewer-open {
  overflow: hidden;
}

.photo-viewer {
  position: fixed;
  z-index: 5000;
  inset: 0;
  display: grid;
  place-items: center;
  padding: 18px;
  background: rgba(5, 15, 31, .92);
}

.photo-viewer-panel {
  width: min(1180px, 100%);
  height: min(850px, calc(100vh - 36px));
  display: grid;
  grid-template-rows: auto 1fr;
  overflow: hidden;
  border: 1px solid rgba(255, 255, 255, .18);
  border-radius: 12px;
  background: #071426;
  box-shadow: 0 24px 70px rgba(0, 0, 0, .45);
}

.photo-viewer-toolbar {
  min-height: 48px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 7px 10px 7px 16px;
  color: #fff;
  background: #0d1d33;
}

.photo-viewer-title {
  min-width: 0;
  overflow: hidden;
  font-size: 12px;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.photo-viewer-actions {
  display: flex;
  align-items: center;
  gap: 6px;
}

.photo-viewer-actions button,
.photo-viewer-actions a {
  min-width: 34px;
  min-height: 34px;
  padding: 4px 9px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 1px solid rgba(255, 255, 255, .2);
  border-radius: 7px;
  color: #fff;
  background: rgba(255, 255, 255, .08);
  cursor: pointer;
  font-size: 16px;
  font-weight: 700;
  text-decoration: none;
}

.photo-viewer-actions button:hover,
.photo-viewer-actions a:hover {
  background: rgba(255, 255, 255, .18);
}

.photo-viewer-actions .photo-viewer-download {
  font-size: 10px;
}

.photo-viewer-actions .photo-viewer-download[hidden] {
  display: none;
}

.photo-viewer-actions .photo-viewer-zoom-value {
  min-width: 58px;
  font-size: 10px;
}

.photo-viewer-actions .photo-viewer-close {
  margin-left: 4px;
  background: #f22b4d;
}

.photo-viewer-stage {
  min-height: 0;
  display: grid;
  place-items: center;
  overflow: hidden;
  touch-action: none;
  user-select: none;
}

.photo-viewer-stage img {
  max-width: 92%;
  max-height: 92%;
  object-fit: contain;
  transform-origin: center;
  transition: transform .12s ease;
  will-change: transform;
}

.photo-viewer-stage.is-zoomed {
  cursor: grab;
}

.photo-viewer-stage.is-dragging {
  cursor: grabbing;
}

.photo-viewer-stage.is-dragging img {
  transition: none;
}

.person-cell img,
.document-links a,
[data-existing-document-view],
[data-existing-document-image],
[data-photo-viewer] {
  cursor: zoom-in;
}

.pod-register-cell {
  min-width: 170px;
}

.pod-register-preview {
  display: flex;
  align-items: center;
  gap: 8px;
}

.pod-register-thumbnail {
  width: 64px;
  height: 64px;
  flex: 0 0 64px;
  display: block;
  overflow: hidden;
  border: 1px solid #d7e0eb;
  border-radius: 7px;
  background: #f6f8fb;
}

.pod-register-thumbnail img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.pod-register-links {
  display: grid;
  justify-items: start;
  gap: 3px;
}

.pod-register-links > a {
  color: #175ea8;
  font-size: 9px;
  font-weight: 700;
  text-decoration: none;
}

.pod-register-links > a:hover {
  text-decoration: underline;
}

@media (max-width: 600px) {
  .photo-viewer {
    padding: 0;
  }

  .photo-viewer-panel {
    height: 100vh;
    border: 0;
    border-radius: 0;
  }

  .photo-viewer-toolbar {
    padding-left: 10px;
  }

  .photo-viewer-title {
    display: none;
  }

  .photo-viewer-actions {
    width: 100%;
    justify-content: center;
  }

  .photo-viewer-actions .photo-viewer-close {
    margin-left: auto;
  }
}
.existing-documents {
  display: grid;
  gap: 7px;
  margin-top: 4px;
  padding: 10px;
  border: 1px solid #dfe6ef;
  border-radius: 8px;
  background: #f8fafc;
}

.existing-documents[hidden],
.existing-document[hidden] {
  display: none;
}

.existing-documents-title {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding-bottom: 6px;
  border-bottom: 1px solid #e5eaf0;
}

.existing-documents-title strong {
  color: #263750;
  font-size: 10px;
}

.existing-documents-title small {
  color: #7c8798;
  font-size: 8px;
}

.existing-document {
  display: grid;
  grid-template-columns: 54px minmax(130px, 1fr) auto;
  align-items: center;
  gap: 5px 10px;
  padding: 8px;
  border: 1px solid #e4e9f0;
  border-radius: 7px;
  background: #fff;
}

.existing-document > img {
  width: 52px;
  height: 52px;
  grid-row: 1 / span 2;
  border: 1px solid #dce4ee;
  border-radius: 6px;
  object-fit: cover;
  background: #eef2f6;
  cursor: zoom-in;
}
.existing-document > span {
  color: #344054;
  font-size: 9px;
  font-weight: 700;
}

.existing-document > small {
  min-height: 12px;
  grid-column: 1 / -1;
  color: #b42318;
  font-size: 8px;
  font-weight: 600;
}

.existing-document-actions {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  gap: 5px;
}

.existing-document-actions a,
.existing-document-actions button {
  min-height: 28px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 4px 8px;
  border: 1px solid #d6deea;
  border-radius: 6px;
  color: #23344c;
  background: #fff;
  cursor: pointer;
  font-size: 8px;
  font-weight: 700;
  text-decoration: none;
}

.existing-document-actions a:hover {
  border-color: #9bb3d0;
  background: #f0f5fb;
}

.existing-document-actions button {
  border-color: #f4b8c2;
  color: #c9183b;
  background: #fff6f8;
}

.existing-document.is-removed {
  border-color: #f6b7c2;
  background: #fff5f7;
}

.existing-document.is-removed > span,
.existing-document.is-removed .existing-document-actions a {
  opacity: .55;
}

@media (max-width: 600px) {
  .existing-documents-title {
    align-items: flex-start;
    flex-direction: column;
  }

  .existing-document {
    grid-template-columns: 48px 1fr;
  }

  .existing-document > img {
    width: 46px;
    height: 46px;
  }

  .existing-document-actions {
    grid-column: 2;
  }

  .existing-document-actions {
    justify-content: flex-start;
  }
}
.person-cell {
  min-width: 170px;
  display: flex;
  align-items: center;
  gap: 10px;
}

.person-cell img,
.person-placeholder {
  width: 42px;
  height: 42px;
  flex: 0 0 auto;
  border-radius: 9px;
  object-fit: cover;
}

.person-placeholder {
  display: grid;
  place-items: center;
  color: #fff;
  background: var(--navy);
  font-weight: 800;
}

.document-links {
  min-width: 112px;
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
}

.document-links a {
  padding: 4px 6px;
  border: 1px solid #dbe4ef;
  border-radius: 5px;
  color: #1462cf;
  background: #f6f9fd;
  font-size: 8px;
  font-weight: 700;
}

@media (max-width: 1180px) {
  .delivery-workspace {
    grid-template-columns: minmax(470px, 50%) 1fr;
  }
}

@media (max-width: 900px) {
  .delivery-workspace {
    grid-template-columns: 1fr;
  }
}

/* Booking */
.booking-heading h1 {
  margin: 3px 0 5px;
  color: var(--navy);
  font-size: 25px;
}

.booking-heading > div > span {
  color: var(--muted);
  font-size: 11px;
}

.booking-form {
  display: grid;
  gap: 16px;
}

.booking-card {
  padding: 0 22px 22px;
  border: 1px solid var(--line);
  border-radius: 12px;
  background: #fff;
  box-shadow: 0 4px 15px rgba(16, 24, 40, .025);
}

.booking-card-heading {
  min-height: 72px;
  display: flex;
  align-items: center;
  gap: 12px;
  border-bottom: 1px solid #eef0f3;
}

.booking-step {
  width: 36px;
  height: 36px;
  display: grid;
  place-items: center;
  flex: 0 0 auto;
  border-radius: 9px;
  color: #fff;
  background: var(--red);
  font-size: 10px;
  font-weight: 800;
}

.booking-step.neutral {
  color: var(--navy);
  background: #e9eef5;
}

.booking-card-heading h2 {
  margin: 0;
  color: var(--navy);
  font-size: 15px;
}

.booking-card-heading p {
  margin: 4px 0 0;
  color: var(--muted);
  font-size: 9px;
}

.booking-fields {
  padding-top: 6px;
  display: grid;
  gap: 0 14px;
}

.booking-fields.cols-4 {
  grid-template-columns: repeat(4, minmax(0, 1fr));
}

.booking-fields label {
  min-width: 0;
  /*margin-top: 14px;*/
  display: grid;
  align-content: start;
  gap: 7px;
  color: #344054;
  font-size: 10px;
  font-weight: 700;
}

.booking-fields [hidden] {
  display: none !important;
}

.booking-fields label > span:first-child b {
  color: var(--red);
}

.booking-fields input,
.booking-fields select,
.booking-fields textarea {
  width: 100%;
  min-width: 0;
  height: 42px;
  padding: 0 11px;
  border: 1px solid #d9dee7;
  border-radius: 7px;
  outline: 0;
  color: var(--navy);
  background: #fff;
  font-size: 11px;
  transition: border-color .18s, box-shadow .18s;
}

.booking-fields textarea {
  height: 72px;
  padding-top: 10px;
  resize: vertical;
}

.booking-fields input:focus,
.booking-fields select:focus,
.booking-fields textarea:focus {
  border-color: #4c83cb;
  box-shadow: 0 0 0 3px rgba(20, 98, 207, .09);
}

.booking-fields input[readonly] {
  color: #667085;
  background: #f5f7f9;
}

.booking-fields label > small {
  min-height: 11px;
  color: #8b95a5;
  font-size: 8px;
  font-weight: 400;
  line-height: 1.45;
}

.booking-fields .span-2 {
  grid-column: span 2;
}

.field-with-action,
.money-field {
  height: 42px;
  display: flex;
  align-items: center;
  border: 1px solid #d9dee7;
  border-radius: 7px;
  background: #fff;
}

.field-with-action:focus-within,
.money-field:focus-within {
  border-color: #4c83cb;
  box-shadow: 0 0 0 3px rgba(20, 98, 207, .09);
}

    .field-with-action input,
    .money-field input, .money-input input {
        height: 40px;
        border: 0;
        box-shadow: none !important;
        border-bottom: 1px solid #d9dee7;
        border-top: 1px solid #d9dee7;
    }

.field-with-action button {
  height: 28px;
  margin-right: 6px;
  padding: 0 8px;
  border: 0;
  border-radius: 5px;
  color: #1462cf;
  background: #eaf2ff;
  cursor: pointer;
  font-size: 8px;
  font-weight: 800;
}

.pincode-lookup-shell input {
    border-left: 0 !important;
    border-right: 0 !important;
    border-top-right-radius: 0 !important;
    border-bottom-right-radius: 0 !important;
}

.pincode-lookup-shell button {
  min-width: 48px;
}

.pincode-lookup-shell button:disabled {
  cursor: wait;
  opacity: .65;
}

.pincode-lookup-status {
  min-height: 14px;
  color: #667085;
  font-size: 9px;
  font-weight: 600;
  line-height: 1.4;
}

.pincode-lookup-status.success {
  color: #16794b;
}

.pincode-lookup-status.error {
  color: #c23737;
}

.pincode-lookup-status.loading {
  color: #1462cf;
}

.pincode-lookup-details {
  display: grid;
  grid-template-columns: 1fr;
  gap: 10px;
}

.pincode-lookup-details[hidden] {
  display: none;
}

.money-field i {
  padding-left: 11px;
  color: #667085;
  font-size: 11px;
  font-style: normal;
}

.money-field.readonly {
  background: #f5f7f9;
}

.total-field .money-field {
  border-color: #a8c5eb;
  background: #edf5ff;
}

.total-field .money-field input {
  color: #0757bd;
  background: transparent;
  font-weight: 800;
}

.booking-received-card {
  border-color: #cfe0f4;
  background: #fbfdff;
}

.booking-received-content {
  padding-top: 16px;
  display: grid;
  grid-template-columns: minmax(180px, .45fr) minmax(390px, 1.4fr);
  gap: 22px;
  align-items: start;
}

.booking-received-summary {
  padding: 14px;
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 9px 12px;
  align-items: center;
  border: 1px solid #dbe7f5;
  border-radius: 10px;
  background: #f1f7ff;
}

.booking-received-summary span {
  color: #667085;
  font-size: 9px;
  font-weight: 800;
}

.booking-received-summary strong {
  color: var(--navy);
  font-size: 13px;
  text-align: right;
}

.booking-received-summary strong.allocation-error {
  color: #c52d42;
}

.booking-received-message {
  margin-top: 11px;
  color: #157347;
  font-size: 9px;
  font-weight: 700;
}

.booking-received-message.error,
.booking-received-validation {
  color: #c52d42;
}

.booking-received-validation {
  margin-top: 5px;
  font-size: 9px;
  font-weight: 700;
}

.booking-actions {
  padding: 3px 0 9px;
  display: flex;
  justify-content: flex-end;
  gap: 9px;
}

.booking-actions .primary-button,
.booking-actions .secondary-button {
  min-width: 120px;
}

.booking-actions button:disabled {
  cursor: not-allowed;
  opacity: .55;
}

.recent-bookings {
  margin-top: 20px;
  padding: 0;
  overflow: hidden;
}

.recent-bookings .booking-card-heading {
  padding: 0 22px;
}

@media (max-width: 1180px) {
  .booking-fields.cols-4 {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

@media (max-width: 800px) {
  .booking-fields.cols-4 {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .booking-received-content {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 520px) {
  .booking-card {
    padding: 0 15px 17px;
  }

  .booking-fields.cols-4 {
    grid-template-columns: 1fr;
  }

  .booking-fields .span-2 {
    grid-column: auto;
  }

  .booking-actions .primary-button,
  .booking-actions .secondary-button {
    min-width: 0;
    flex: 1;
  }
}

/* Manifest */
.booking-fields.cols-3 {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

.manifest-search-row {
  padding-top: 14px;
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 14px;
  align-items: end;
}

.manifest-search-row label {
  display: grid;
  gap: 7px;
  color: #344054;
  font-size: 10px;
  font-weight: 700;
}

.manifest-search-row label > span:first-child b {
  color: var(--red);
}

.manifest-search-row > label > input,
.manifest-search-row .selectize-input {
  width: 100%;
  min-height: 38px;
  padding: 5px 9px;
  border: 1px solid #d9dee7;
  border-radius: 7px;
  outline: 0;
  color: var(--navy);
  font-size: 11px;
}

.manifest-search-row > label > input:focus,
.manifest-search-row .selectize-input.focus {
  border-color: #4c83cb;
  box-shadow: 0 0 0 3px rgba(20, 98, 207, .09);
}

.manifest-search-row .selectize-control {
  width: 100%;
  min-width: 0;
}
.manifest-search-row .selectize-dropdown {
  display: none !important;
}


.manifest-search-row .selectize-input > div {
  padding: 4px 22px 4px 8px;
  border-radius: 5px;
  color: #1459b8;
  background: #eaf2ff;
  font-weight: 800;
}

.manifest-search-row .selectize-input > input {
  min-width: 160px;
}

.manifest-search-button {
  min-width: 116px;
  height: 38px;
  min-height: 38px;
  margin-bottom: 17px;
  padding: 0 14px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
  white-space: nowrap;
}

.manifest-search-actions {
  margin-bottom: 17px;
  display: flex;
  gap: 8px;
}

.manifest-search-actions .manifest-search-button {
  margin-bottom: 0;
}

.manifest-search-button svg {
  width: 18px;
  height: 18px;
  fill: none;
  stroke: currentColor;
  stroke-width: 2;
  stroke-linecap: round;
}

.manifest-search-status {
  min-height: 18px;
  margin-top: 10px;
  color: #667085;
  font-size: 10px;
}

.manifest-search-status.error {
  color: #b42318;
}

.manifest-selection {
  margin-top: 5px;
  overflow: hidden;
  border: 1px solid #dce4ee;
  border-radius: 9px;
}

.manifest-selection[hidden] {
  display: none;
}

.selection-heading {
  min-height: 48px;
  padding: 0 14px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  border-bottom: 1px solid #e7ebf1;
  background: #f8fafc;
  font-size: 10px;
}

.selection-heading strong {
  color: var(--navy);
}

.selection-heading span {
  color: #667085;
}

.manifest-selection input[type="checkbox"] {
  width: 16px;
  height: 16px;
  accent-color: var(--red);
}

.button-link {
  display: inline-grid;
  place-items: center;
}

.pending-heading {
  padding-right: 18px !important;
}

.pending-heading > div {
  margin-right: auto;
}

.manifest-table-search {
  width: min(210px, 26%);
}

.pending-count {
  padding: 6px 9px;
  border-radius: 20px;
  color: #9a6700;
  background: #fff4d6;
  font-size: 8px;
  font-weight: 800;
  white-space: nowrap;
}

.status-pill {
  padding: 5px 8px;
  display: inline-block;
  border-radius: 20px;
  font-size: 8px;
  font-weight: 800;
}

.status-pill.pending {
  color: #9a6700;
  background: #fff4d6;
}

.status-pill.sent {
  color: #067647;
  background: #ecfdf3;
}

.status-pill.partial {
  color: #175cd3;
  background: #eff8ff;
}

.status-pill.missing {
  color: #b42318;
  background: #fef3f2;
}

@media (max-width: 900px) {
  .booking-fields.cols-3 {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .pending-heading {
    flex-wrap: wrap;
  }

  .manifest-table-search {
    width: 190px;
  }
}

@media (max-width: 600px) {
  .booking-fields.cols-3,
  .manifest-search-row {
    grid-template-columns: 1fr;
  }

  .manifest-search-button {
    margin: 0;
  }

  .manifest-table-search {
    width: 100%;
    order: 4;
  }

  .pending-count {
    margin-left: auto;
  }
}

/* In Scan */
.list-validation {
  display: block;
  padding: 10px 0 0;
}

[data-inscan-pending-table] input[type="checkbox"] {
  width: 16px;
  height: 16px;
  accent-color: var(--red);
}

.awb-list-cell {
  min-width: 220px;
  max-width: 360px;
  color: var(--navy);
  line-height: 1.55;
}

.proof-upload {
  width: min(100%, 620px);
  margin-top: 16px;
  padding: 17px;
  display: grid;
  gap: 9px;
  border: 1px dashed #c6d1df;
  border-radius: 9px;
  background: #fafbfd;
  color: #344054;
  font-size: 10px;
  font-weight: 700;
}

.proof-upload > span:first-child b {
  color: var(--red);
}

.proof-upload input[type="file"] {
  padding: 9px;
  border: 1px solid #e1e6ed;
  border-radius: 7px;
  background: #fff;
  font-size: 9px;
}

.proof-upload input[type="file"]::file-selector-button {
  margin-right: 10px;
  padding: 8px 11px;
  border: 0;
  border-radius: 6px;
  color: #fff;
  background: var(--navy);
  cursor: pointer;
  font-size: 9px;
  font-weight: 700;
}

.proof-upload small {
  color: #8b95a5;
  font-size: 8px;
  font-weight: 400;
}

/* Bill */
.bill-date-filter-control {
  min-width: 0;
  margin-top: 14px;
  display: grid;
  gap: 7px;
  align-content: start;
}

.bill-date-filter-control > span {
  color: #344054;
  font-size: 10px;
  font-weight: 700;
}

.bill-date-filter-control .secondary-button {
  width: 100%;
  height: 42px;
  margin: 0;
}

.bill-search-box {
  padding-top: 16px;
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 12px;
  align-items: end;
}

.bill-search-box label {
  display: grid;
  gap: 7px;
  color: #344054;
  font-size: 10px;
  font-weight: 700;
}

.bill-search-box label > span:first-child b {
  color: var(--red);
}

.bill-search-box input {
  width: 100%;
  height: 46px;
  padding: 0 13px;
  border: 1px solid #d9dee7;
  border-radius: 7px;
  outline: 0;
  color: var(--navy);
  font-size: 11px;
}

.bill-search-box input:focus {
  border-color: #4c83cb;
  box-shadow: 0 0 0 3px rgba(20, 98, 207, .09);
}

.bill-search-box .primary-button {
  height: 46px;
  min-width: 165px;
  margin-bottom: 17px;
}

[data-bill-selection] input[type="checkbox"] {
  width: 16px;
  height: 16px;
  accent-color: var(--red);
}

@media (max-width: 600px) {
  .bill-search-box {
    grid-template-columns: 1fr;
  }

  .bill-search-box .primary-button {
    margin: 0;
  }
}

/* Delivery */
[data-delivery-pending-table] input[type="checkbox"] {
  width: 16px;
  height: 16px;
  accent-color: var(--red);
}


/* State master slide-in form */
.state-master-layout {
  width: 100%;
}

.list-heading-actions {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 10px;
}

.list-heading-actions .table-search {
  width: 210px;
}

.list-heading-actions .primary-button {
  white-space: nowrap;
}

.drawer-backdrop {
  position: fixed;
  inset: 0 0 0 272px;
  z-index: 1200;
  visibility: hidden;
  background: rgba(15, 23, 42, .38);
  opacity: 0;
  transition: opacity .24s ease, visibility .24s ease;
}

.drawer-backdrop.open {
  visibility: visible;
  opacity: 1;
}

.form-drawer {
  position: fixed;
  top: 0;
  left: 272px;
  z-index: 1210;
  width: min(460px, calc(100% - 272px));
  height: 100vh;
  height: 100dvh;
  display: grid;
  grid-template-rows: auto minmax(0, 1fr);
  border-right: 1px solid #e1e6ed;
  background: #fff;
  box-shadow: 18px 0 45px rgba(15, 23, 42, .16);
  clip-path: inset(0 100% 0 0);
  visibility: hidden;
  transition: clip-path .28s ease, visibility .28s ease;
}

.form-drawer.open {
  visibility: visible;
  clip-path: inset(0);
}

.drawer-header {
  min-height: 78px;
  padding: 17px 22px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  border-bottom: 1px solid var(--line);
}

.drawer-header h2 {
  margin: 0;
  color: var(--navy);
  font-size: 17px;
}

.drawer-header p {
  margin: 4px 0 0;
  color: var(--muted);
  font-size: 9px;
}

.drawer-close {
  width: 36px;
  height: 36px;
  display: grid;
  place-items: center;
  flex: 0 0 auto;
  border: 1px solid #dce2ea;
  border-radius: 8px;
  color: #475467;
  background: #fff;
  cursor: pointer;
  font-size: 23px;
  line-height: 1;
}

.drawer-close:hover {
  color: var(--red);
  border-color: #f3bbc4;
  background: #fff5f7;
}

.drawer-body {
  min-height: 0;
  padding: 22px;
  overflow-y: auto;
}

.drawer-body .form-card {
  padding: 0;
  border: 0;
  box-shadow: none;
}

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

.drawer-body .master-form .span-2 {
  grid-column: auto;
}

body.drawer-open {
  overflow: hidden;
}

@media (max-width: 640px) {
  .state-master-layout,
  .list-card,
  .list-heading,
  .list-heading-actions {
    width: 100%;
    max-width: 100%;
    min-width: 0;
  }
  .list-heading {
    flex-wrap: wrap;
  }

  .list-heading-actions {
    width: 100%;
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    justify-content: stretch;
  }

  .list-heading-actions .table-search,
  .list-heading-actions .primary-button {
    width: 100%;
    max-width: none;
    min-width: 0;
    overflow: hidden;
  }

  .table-wrap {
    width: 100%;
    max-width: 100%;
    overflow-x: auto;
    overscroll-behavior-x: contain;
    -webkit-overflow-scrolling: touch;
    touch-action: pan-x pan-y;
  }

  .table-wrap table {
    width: 640px;
    min-width: 640px;
  }

  .table-wrap th,
  .table-wrap td {
    white-space: nowrap;
  }

  .table-wrap .actions-cell,
  .table-wrap .row-actions {
    position: sticky;
    right: 0;
    width: 115px;
    min-width: 115px;
    box-shadow: -8px 0 12px rgba(15, 23, 42, .06);
  }

  .table-wrap .actions-cell {
    z-index: 3;
    background: #f8f9fb;
  }

  .table-wrap .row-actions {
    z-index: 2;
    background: #fff;
  }

  .drawer-body {
    padding: 18px;
  }
}

/* User Master */
.user-master-note {
  margin-bottom: 18px;
  padding: 13px 16px;
  display: flex;
  align-items: center;
  gap: 12px;
  border: 1px solid #cfe0f5;
  border-radius: 10px;
  color: #3f526d;
  background: #f5f9ff;
  font-size: 10px;
}

.user-master-note strong {
  flex: 0 0 auto;
  color: #174f96;
}

.user-authority-fieldset {
  margin: 4px 0 0;
  padding: 13px;
  border: 1px solid #e3e8ef;
  border-radius: 9px;
}

.user-authority-fieldset legend {
  padding: 0 6px;
  color: #27364c;
  font-size: 10px;
  font-weight: 800;
}

.user-authority-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px;
}

.user-authority-grid > label {
  min-height: 58px;
  padding: 10px;
  display: flex;
  align-items: flex-start;
  gap: 9px;
  border: 1px solid #e3e8ef;
  border-radius: 8px;
  cursor: pointer;
  background: #fff;
}

.user-authority-grid > label:has(input:checked) {
  border-color: #b8d6fb;
  background: #f4f9ff;
}

.user-authority-grid input[type="checkbox"] {
  width: 15px;
  height: 15px;
  margin: 2px 0 0;
  accent-color: #1462cf;
}

.user-authority-grid span,
.user-authority-grid b,
.user-authority-grid small {
  display: block;
}

.user-authority-grid b {
  color: #26364d;
  font-size: 10px;
}

.user-authority-grid small {
  margin-top: 3px;
  color: #8792a3;
  font-size: 8px;
  line-height: 1.35;
}

.user-authority-list {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
}

.user-authority-list span {
  padding: 4px 6px;
  border-radius: 999px;
  font-size: 7px;
  font-weight: 700;
}

.user-authority-list .enabled { color: #168653; background: #e8f8ef; }
.user-authority-list .disabled { color: #8b95a5; background: #eef1f5; text-decoration: line-through; }

.user-master-workspace {
  grid-template-columns: minmax(520px, 1.18fr) minmax(420px, .82fr);
  align-items: start;
}

.user-form-card,
.user-list-card {
  min-width: 0;
}

.user-branch-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 7px;
}

.user-branch-grid > label {
  min-height: 46px;
  padding: 8px 9px;
  display: flex;
  align-items: flex-start;
  gap: 8px;
  border: 1px solid #e3e8ef;
  border-radius: 8px;
  cursor: pointer;
  background: #fff;
}

.user-branch-grid > label:has(input:checked) {
  border-color: #9ec6f8;
  background: #f1f7ff;
}

.user-branch-grid input,
.matrix-check input[type="checkbox"] {
  width: 15px;
  height: 15px;
  margin: 1px 0 0;
  accent-color: #1462cf;
}

.user-branch-grid span,
.user-branch-grid b,
.user-branch-grid small {
  display: block;
}

.user-branch-grid b { color: #26364d; font-size: 9px; }
.user-branch-grid small { margin-top: 2px; color: #8792a3; font-size: 8px; }

.permission-toolbar {
  margin-bottom: 9px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  color: #6f7d91;
  font-size: 9px;
}

.permission-all-button {
  padding: 6px 10px;
  border: 1px solid #b9d3f5;
  border-radius: 7px;
  color: #1557a5;
  background: #f2f7ff;
  font-size: 8px;
  font-weight: 800;
  cursor: pointer;
}

.permission-table-wrap {
  max-height: 440px;
  overflow: auto;
  border: 1px solid #e5eaf1;
  border-radius: 8px;
}

.permission-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 9px;
}

.permission-table thead th {
  position: sticky;
  top: 0;
  z-index: 2;
  padding: 8px;
  color: #536178;
  background: #f6f8fb;
  border-bottom: 1px solid #e1e7ef;
}

.permission-table th:first-child { width: 42%; text-align: left; }
.permission-table tbody > tr:not(.permission-group) > th,
.permission-table tbody > tr:not(.permission-group) > td {
  padding: 7px 8px;
  border-bottom: 1px solid #edf0f4;
}

.permission-table tbody > tr:not(.permission-group):hover { background: #fafcff; }
.permission-table td { text-align: center; }
.permission-group th {
  padding: 6px 8px;
  color: #165ba9;
  background: #eef5ff;
  font-size: 8px;
  text-transform: uppercase;
  letter-spacing: .05em;
}

.matrix-check {
  display: inline-flex !important;
  justify-content: center;
  align-items: center !important;
  cursor: pointer;
}

.matrix-check span {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
}

.not-applicable { color: #b4bdca; }

.user-branch-list {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
}

.user-branch-list span {
  padding: 4px 6px;
  border-radius: 999px;
  color: #15599f;
  background: #eaf3ff;
  font-size: 7px;
  font-weight: 700;
}

.muted-text { color: #8b95a5; font-size: 8px; }

@media (max-width: 640px) {
  .user-master-note { align-items: flex-start; flex-direction: column; }
  .user-authority-grid { grid-template-columns: 1fr; }
  .user-branch-grid { grid-template-columns: 1fr 1fr; }
  .permission-toolbar { align-items: flex-start; flex-direction: column; }
  .permission-table th:first-child { width: 34%; }
}

@media (max-width: 1100px) {
  .user-master-workspace { grid-template-columns: 1fr; }
}

@media (max-width: 420px) {
  .user-branch-grid { grid-template-columns: 1fr; }
  .permission-table thead th,
  .permission-table tbody > tr:not(.permission-group) > th,
  .permission-table tbody > tr:not(.permission-group) > td { padding: 6px 4px; }
}

/* Compact professional dashboard */
.ops-dashboard {
  max-width: 1500px;
}

.ops-welcome-card {
  min-height: 160px;
  padding: 14px 18px;
  grid-template-columns: minmax(250px, .85fr) minmax(330px, 1.2fr) auto;
  border-radius: 12px;
}

.ops-welcome-copy h1 {
  font-size: clamp(20px, 1.65vw, 25px);
}

.ops-welcome-copy p {
  margin-top: 6px;
  font-size: 10px;
}

.ops-welcome-copy > span {
  width: 52px;
  height: 2px;
  margin-top: 17px;
}

.ops-route-art {
  height: 132px;
}

.ops-skyline {
  height: 58px;
}

.ops-dotted-route {
  height: 76px;
}

.ops-hero-truck {
  width: min(310px, 78%);
}

.ops-date-card {
  min-width: 194px;
  min-height: 64px;
  padding: 10px 13px;
  gap: 11px;
  border-radius: 8px;
}

.ops-date-card svg {
  width: 24px;
  height: 24px;
}

.ops-date-card strong { font-size: 10px; }
.ops-date-card small { margin-top: 5px; font-size: 9px; }

.ops-dashboard-filter {
  margin-top: 10px;
  padding: 9px 12px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  border: 1px solid #e3e8ef;
  border-radius: 10px;
  background: #fff;
  box-shadow: 0 3px 12px rgba(20, 33, 53, .035);
}

.ops-dashboard-filter > div strong,
.ops-dashboard-filter > div span {
  display: block;
}

.ops-dashboard-filter > div strong { color: #253247; font-size: 10px; }
.ops-dashboard-filter > div span { margin-top: 2px; color: #7d8899; font-size: 8px; }
.ops-dashboard-filter form { display: flex; align-items: center; gap: 8px; }
.ops-dashboard-filter label { color: #59677b; font-size: 8px; font-weight: 800; }
.ops-dashboard-filter select {
  min-width: 210px;
  height: 34px;
  padding: 0 30px 0 10px;
  border: 1px solid #d9e1eb;
  border-radius: 7px;
  color: #27364c;
  background: #f9fbfd;
  font: inherit;
  font-size: 9px;
}

.ops-content-grid {
  margin-top: 10px;
  grid-template-columns: minmax(0, 1fr) 292px;
  gap: 10px;
}

.ops-main-column,
.ops-side-column {
  gap: 10px;
}

.ops-metrics {
  gap: 8px;
}

.ops-metric {
  min-height: 90px;
  padding: 12px;
  grid-template-columns: 40px minmax(0, 1fr);
  align-items: center;
  gap: 10px;
  border-radius: 10px;
  color: inherit;
  text-decoration: none;
  transition: transform .16s ease, border-color .16s ease, box-shadow .16s ease;
}

a.ops-metric:hover,
a.ops-metric:focus-visible {
  transform: translateY(-2px);
  border-color: #c8d8ec;
  box-shadow: 0 8px 20px rgba(20, 49, 87, .1);
  outline: none;
}

.ops-metric-icon {
  width: 40px;
  height: 40px;
}

.ops-metric-icon svg {
  width: 21px;
  height: 21px;
}

.ops-metric-icon.ops-rupee { font-size: 22px; }
.ops-metric h2 { margin: 0 0 5px; font-size: 9px; }
.ops-metric strong { font-size: 21px; }
.ops-metric strong.ops-money { font-size: clamp(14px, 1.12vw, 19px); }

.ops-pending-breakdown {
  display: flex;
  align-items: flex-end;
  gap: 14px;
}

.ops-pending-breakdown > span {
  display: flex;
  flex-direction: column;
  color: #718096;
  font-size: 7px;
  font-weight: 800;
  line-height: 1.1;
  text-transform: uppercase;
}

.ops-pending-breakdown b {
  margin-top: 2px;
  color: #101828;
  font-size: 18px;
  line-height: 1;
}

.ops-card,
.ops-metric {
  box-shadow: 0 3px 12px rgba(20, 33, 53, .035);
}

.ops-card {
  border-radius: 10px;
}

.ops-section-heading {
  min-height: 43px;
  padding: 0 13px;
  gap: 10px;
}

.ops-section-heading h2 { font-size: 12px; }
.ops-section-heading h2::after { width: 27px; height: 2px; bottom: -11px; }
.ops-section-heading a { padding: 6px 10px; border-radius: 6px; font-size: 8px; }

.ops-bookings-table {
  min-width: 760px;
  font-size: 9px;
}

.ops-bookings-table th {
  height: 34px;
  padding: 0 10px;
  font-size: 8px;
}

.ops-bookings-table td {
  height: 36px;
  padding: 0 10px;
}

.ops-status {
  padding: 4px 7px;
  border-radius: 5px;
  font-size: 8px;
}

.ops-view-booking { width: 24px; height: 24px; }
.ops-view-booking svg { width: 15px; height: 15px; }

.ops-branch-pending-card {
  padding-bottom: 10px;
}

.ops-branch-pending-grid {
  padding: 0 10px;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px;
}

.ops-branch-card {
  min-width: 0;
  padding: 10px;
  border: 1px solid #e2e8f0;
  border-radius: 9px;
  background: #fff;
  box-shadow: 0 2px 8px rgba(20, 33, 53, .035);
}

.ops-branch-card > header {
  margin-bottom: 8px;
  display: flex;
  align-items: center;
  gap: 8px;
}

.ops-branch-card-icon {
  width: 30px;
  height: 30px;
  display: grid;
  place-items: center;
  flex: 0 0 auto;
  border-radius: 7px;
  color: #1462cf;
  background: #eaf2ff;
}

.ops-branch-card-icon svg {
  width: 16px;
  height: 16px;
}

.ops-branch-card h3,
.ops-branch-card small {
  display: block;
}

.ops-branch-card h3 {
  margin: 0;
  overflow: hidden;
  color: #253247;
  font-size: 10px;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.ops-branch-card small {
  margin-top: 2px;
  color: #8a95a6;
  font-size: 7px;
  font-weight: 700;
}

.ops-branch-card-metrics {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 6px;
}

.ops-branch-card-metrics a {
  min-width: 0;
  min-height: 50px;
  padding: 7px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 5px;
  border: 1px solid #e2e8f0;
  border-radius: 7px;
  color: #344054;
  background: #f8fafc;
  text-decoration: none;
  transition: transform .16s ease, border-color .16s ease, box-shadow .16s ease;
}

.ops-branch-card-metrics a:hover,
.ops-branch-card-metrics a:focus-visible {
  transform: translateY(-1px);
  border-color: #b8cbe2;
  box-shadow: 0 4px 10px rgba(20, 49, 87, .08);
  outline: none;
}

.ops-branch-card-metrics span {
  overflow: hidden;
  font-size: 7px;
  font-weight: 800;
  text-overflow: ellipsis;
}

.ops-branch-card-metrics strong {
  font-size: 16px;
}

.ops-branch-card-metrics .ops-branch-dual-count {
  display: flex;
  align-items: center;
  gap: 7px;
  font-size: inherit;
}

.ops-branch-card-metrics .ops-branch-dual-count > span {
  display: grid;
  overflow: visible;
  text-align: center;
}

.ops-branch-card-metrics .ops-branch-dual-count small {
  color: currentColor;
  font-size: 5px;
  font-weight: 800;
  text-transform: uppercase;
}

.ops-branch-card-metrics .ops-branch-dual-count b {
  margin-top: 1px;
  font-size: 13px;
}

.ops-branch-card-metrics .manifest { color: #9a5b00; background: #fff8e8; }
.ops-branch-card-metrics .in-scan { color: #087dbd; background: #edf8ff; }
.ops-branch-card-metrics .delivery { color: #6c35cc; background: #f5f0ff; }
.ops-branch-card-metrics .pod { color: #07828e; background: #edfafa; }
.ops-branch-card-metrics .bill { color: #d51948; background: #fff0f4; }
.ops-branch-card-metrics .receipt { color: #d75b00; background: #fff4eb; }

.pending-tabs {
  margin-top: 10px;
}

.pending-sections {
  margin-top: 10px;
  display: grid;
  gap: 10px;
}

.pending-list-card {
  min-width: 0;
}

.pending-list-card .list-heading .primary-button {
  flex: 0 0 auto;
  color: #fff;
}

.pending-heading-actions {
  display: flex;
  align-items: center;
  gap: 8px;
}

.pending-heading-actions .secondary-button {
  min-height: 34px;
}

.pending-list-card .table-wrap {
  max-height: 430px;
}

.pending-manifest-row {
  cursor: pointer;
  transition: background-color .16s ease;
}

.pending-manifest-row:hover,
.pending-manifest-row:focus-visible,
.pending-manifest-row[aria-expanded="true"] {
  background: #f3f8ff;
  outline: none;
}

.pending-manifest-row td:first-child {
  white-space: nowrap;
}

.pending-row-arrow {
  margin-left: 7px;
  display: inline-block;
  color: #1462cf;
  font-size: 12px;
  transition: transform .16s ease;
}

.pending-manifest-row[aria-expanded="true"] .pending-row-arrow {
  transform: rotate(180deg);
}

.pending-awb-detail-row > td {
  padding: 0 !important;
  background: #f8fbff;
}

.pending-awb-detail {
  padding: 10px 14px 14px;
  border-top: 1px solid #dce8f5;
  border-bottom: 1px solid #dce8f5;
}

.pending-awb-detail-heading {
  margin-bottom: 8px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
}

.pending-awb-detail-heading strong {
  color: #253247;
  font-size: 9px;
}

.pending-awb-detail-heading span {
  color: #718096;
  font-size: 8px;
  font-weight: 700;
}

.pending-awb-detail .table-wrap {
  max-height: none;
  border: 1px solid #e1e9f2;
  border-radius: 7px;
  background: #fff;
}

.pending-awb-detail table {
  font-size: 8px;
}

.pending-awb-detail th,
.pending-awb-detail td {
  height: 31px;
  padding: 5px 8px;
}

.ops-overview-card,
.ops-actions-card {
  padding-bottom: 10px;
}

.ops-overview-grid {
  padding: 0 10px;
  gap: 7px;
}

.ops-overview-grid article {
  min-height: 58px;
  padding: 9px;
  gap: 8px;
  border-radius: 7px;
}

.ops-overview-grid svg { width: 24px; height: 24px; }
.ops-overview-grid b { font-size: 27px; }
.ops-overview-grid span { font-size: 8px; }
.ops-overview-grid strong { margin-top: 5px; font-size: 14px; }

.ops-actions-grid {
  padding: 0 10px;
  gap: 7px;
}

.ops-actions-grid a {
  min-height: 62px;
  padding: 8px 4px;
  gap: 5px;
  border-radius: 7px;
  font-size: 8px;
}

.ops-actions-grid svg { width: 21px; height: 21px; }

@media (max-width: 1180px) {
  .ops-welcome-card { grid-template-columns: 1fr auto; }
  .ops-content-grid { grid-template-columns: 1fr; }
  .ops-side-column { grid-template-columns: 1fr; }
  .ops-actions-card { grid-row: auto; }
  .ops-actions-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}

@media (max-width: 820px) {
  .ops-welcome-card { min-height: 108px; }
  .ops-metrics { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .ops-branch-pending-grid { grid-template-columns: 1fr; }
  .ops-overview-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 600px) {
  .page-content:has(.ops-dashboard) {
    padding: 6px;
  }

  .ops-dashboard,
  .ops-dashboard section,
  .ops-dashboard article {
    margin: 0;
  }

  .ops-welcome-card {
    min-height: 0;
    padding: 11px;
    display: block;
    border-radius: 9px;
  }

  .ops-welcome-copy h1 { font-size: 17px; }
  .ops-welcome-copy p { margin-top: 4px; font-size: 8px; }
  .ops-welcome-copy > span { width: 38px; margin-top: 9px; }

  .ops-date-card {
    width: 100%;
    min-width: 0;
    min-height: 46px;
    margin-top: 9px;
    padding: 7px 9px;
    gap: 8px;
  }

  .ops-date-card svg { width: 19px; height: 19px; }
  .ops-date-card strong { font-size: 9px; }
  .ops-date-card small { margin-top: 2px; font-size: 8px; }

  .ops-dashboard-filter {
    margin-top: 6px;
    padding: 8px;
    align-items: stretch;
    flex-direction: column;
    gap: 7px;
  }

  .ops-dashboard-filter form { align-items: stretch; flex-direction: column; gap: 4px; }
  .ops-dashboard-filter select { width: 100%; min-width: 0; height: 32px; }

  .ops-content-grid {
    margin-top: 6px;
    gap: 6px;
  }

  .ops-main-column,
  .ops-side-column {
    gap: 6px;
  }

  .ops-metrics {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 5px;
  }

  .ops-metric {
    min-height: 68px;
    padding: 8px;
    grid-template-columns: 31px minmax(0, 1fr);
    gap: 7px;
    border-radius: 8px;
  }

  .ops-metric-icon { width: 31px; height: 31px; }
  .ops-metric-icon svg { width: 17px; height: 17px; }
  .ops-metric-icon.ops-rupee { font-size: 17px; }
  .ops-metric h2 { margin-bottom: 3px; overflow: hidden; font-size: 7px; text-overflow: ellipsis; }
  .ops-metric strong { font-size: 17px; }
  .ops-metric strong.ops-money { font-size: 12px; }

  .ops-branch-pending-card { padding-bottom: 6px; }
  .ops-branch-pending-grid { padding: 0 6px; gap: 5px; }
  .ops-branch-card { padding: 8px; border-radius: 7px; }
  .ops-branch-card-metrics { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 5px; }
  .ops-branch-card-metrics a { min-height: 44px; }

  .ops-card { border-radius: 8px; }
  .ops-section-heading { min-height: 37px; padding: 0 9px; }
  .ops-section-heading h2 { font-size: 10px; }
  .ops-section-heading h2::after { width: 22px; bottom: -9px; }
  .ops-section-heading a { padding: 5px 8px; font-size: 7px; }

  .ops-table-wrap { overflow: visible; }
  .ops-bookings-table { min-width: 0; border-collapse: separate; font-size: 9px; }
  .ops-bookings-table thead { display: none; }
  .ops-bookings-table tbody { padding: 0 6px 6px; display: grid; gap: 5px; }
  .ops-bookings-table tbody tr {
    padding: 7px;
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 7px 10px;
    border: 1px solid #edf0f3;
    border-radius: 7px;
    background: #fff;
  }

  .ops-bookings-table td {
    height: auto;
    min-width: 0;
    padding: 0;
    display: grid;
    gap: 2px;
    border: 0;
    white-space: normal;
  }

  .ops-bookings-table td::before {
    content: attr(data-label);
    color: #929aaa;
    font-size: 6px;
    font-weight: 700;
    letter-spacing: .06em;
    text-transform: uppercase;
  }

  .ops-bookings-table td:first-child,
  .ops-bookings-table .ops-empty {
    grid-column: 1 / -1;
  }

  .ops-bookings-table .ops-empty { height: auto; padding: 18px 5px; }
  .ops-status { width: fit-content; padding: 3px 6px; font-size: 7px; }
  .ops-view-booking { width: 22px; height: 22px; }

  .ops-overview-card,
  .ops-actions-card { padding-bottom: 7px; }
  .ops-overview-grid { padding: 0 6px; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 5px; }
  .ops-overview-grid article { min-height: 51px; padding: 7px; gap: 6px; }
  .ops-overview-grid article.average { grid-column: 1 / -1; }
  .ops-overview-grid svg { width: 20px; height: 20px; }
  .ops-overview-grid b { font-size: 22px; }
  .ops-overview-grid span { font-size: 7px; }
  .ops-overview-grid strong { margin-top: 3px; font-size: 11px; }

  .ops-actions-grid { padding: 0 6px; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 5px; }
  .ops-actions-grid a { min-height: 52px; padding: 6px 2px; gap: 4px; font-size: 7px; }
  .ops-actions-grid svg { width: 18px; height: 18px; }
}
@media (max-width: 900px) {
  .drawer-backdrop {
    inset: 0;
  }

  .form-drawer {
    left: 0;
    width: min(460px, 100%);
  }
}
/* Master drawer validation */
.master-form-error {
  margin: 12px 0 5px;
  padding: 12px 13px;
  display: flex;
  align-items: flex-start;
  gap: 9px;
  border: 1px solid #fda29b;
  border-radius: 8px;
  color: #b42318;
  background: #fef3f2;
  font-size: 10px;
  font-weight: 700;
  line-height: 1.45;
}

.master-form-error > span:first-child {
  width: 18px;
  height: 18px;
  display: grid;
  place-items: center;
  flex: 0 0 auto;
  border-radius: 50%;
  color: #fff;
  background: #d92d20;
  font-size: 11px;
  font-weight: 900;
}

.master-form .field-invalid {
  padding-right: 40px;
  border-color: #f04438 !important;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='20' height='20' viewBox='0 0 20 20'%3E%3Ccircle cx='10' cy='10' r='9' fill='%23d92d20'/%3E%3Cpath d='M10 5.2v6.1M10 14.6v.2' stroke='white' stroke-width='2' stroke-linecap='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 11px center;
  background-size: 18px 18px;
  box-shadow: 0 0 0 3px rgba(240, 68, 56, .1) !important;
}

.inline-field-error {
  margin-top: 0;
  color: #d92d20;
  font-size: 9px;
  font-weight: 600;
  line-height: 1.4;
}
/* Compact form controls */
input:not([type="hidden"]):not([type="checkbox"]):not([type="radio"]):not([type="file"]),
select,
.input-shell,
.field-with-action,
.money-field,
.money-input {
  height: 30px !important;
  min-height: 30px;
}

button,
.primary-button,
.secondary-button,
.button-link {
  min-height: 30px !important;
}
/* Responsive application safeguards */
html,
body,
.app-shell {
  width: 100%;
  max-width: 100%;
}

@media (max-width: 900px) {
  body,
  .app-shell {
    overflow-x: hidden;
  }

  .page-frame,
  .topbar,
  .page-content,
  .app-footer {
    width: 100%;
    max-width: 100vw;
    min-width: 0;
  }

  .page-content {
    overflow-x: hidden;
  }

  .page-content > *,
  .state-master-layout,
  .list-card,
  .booking-card,
  .form-card {
    max-width: 100%;
    min-width: 0;
  }
}

@media (max-width: 640px) {
  .topbar {
    padding-inline: 10px;
    gap: 8px;
  }

  .menu-button {
    flex: 0 0 40px;
  }

  .global-search {
    width: 0;
    max-width: none;
    min-width: 0;
    flex: 1 1 0;
    overflow: hidden;
  }

  .global-search input {
    width: 0;
    min-width: 0;
  }

  .top-actions {
    min-width: 0;
    flex: 0 0 auto;
    gap: 3px;
  }

  .notification-button,
  .profile-button > span:last-child {
    display: none;
  }

  .profile {
    margin-left: 0;
    padding-left: 0;
    border-left: 0;
  }

  .page-content {
    padding: 12px;
  }

  .master-heading,
  .booking-heading {
    width: 100%;
    min-width: 0;
  }

  .state-master-layout,
  .list-card {
    width: 100%;
    max-width: 100%;
    min-width: 0;
    overflow: hidden;
  }

  .list-heading {
    width: 100%;
    max-width: 100%;
    min-width: 0;
    padding: 14px;
  }

  .list-heading-actions,
  .list-heading-actions .table-search,
  .list-heading-actions .primary-button {
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
  }

  .list-heading-actions .primary-button {
    display: block;
  }

  .table-wrap {
    display: block;
    width: 100%;
    max-width: 100%;
    min-width: 0;
    overflow-x: auto !important;
  }

  .booking-fields.cols-4,
  .booking-fields.cols-3,
  .manifest-search-row,
  .bill-search-box {
    grid-template-columns: minmax(0, 1fr);
  }

  .booking-fields .span-2 {
    grid-column: auto;
  }

  .booking-actions,
  .pending-heading {
    flex-wrap: wrap;
  }

  .form-drawer {
    width: 100vw;
    max-width: 100vw;
  }

  .app-footer {
    padding: 10px 12px;
    overflow: hidden;
  }

  .app-footer span {
    max-width: 100%;
    overflow-wrap: anywhere;
  }
}
/* Striped tables and compact icon actions */
.table-wrap table {
  table-layout: auto;
}

.table-wrap th:not(.actions-cell),
.table-wrap td:not(.row-actions) {
  width: auto;
}

.table-wrap tbody tr:nth-child(odd) td {
  background-color: #fff;
}

.table-wrap tbody tr:nth-child(even) td {
  background-color: #f6f8fb;
}

.table-wrap tbody tr:hover td {
  background-color: #eef5ff;
}

.actions-cell,
.row-actions {
  width: 76px;
  min-width: 76px;
  max-width: 76px;
  padding-inline: 6px;
}

.row-actions form {
  display: inline-flex;
  margin-left: 3px;
  vertical-align: middle;
}

.row-actions .icon-action {
  width: 28px;
  height: 28px;
  min-width: 28px;
  min-height: 28px !important;
  padding: 0 !important;
  display: inline-grid;
  place-items: center;
  border: 1px solid #dce5f0;
  border-radius: 6px;
  background-color: #fff;
  background-repeat: no-repeat;
  background-position: center;
  background-size: 14px 14px;
  font-size: 0 !important;
  vertical-align: middle;
}

.row-actions .edit-record {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%231462cf' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 20h9'/%3E%3Cpath d='M16.5 3.5a2.12 2.12 0 0 1 3 3L8 18l-4 1 1-4Z'/%3E%3C/svg%3E");
}

.row-actions .delete-record {
  border-color: #f4c7c3;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23d92d20' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3 6h18'/%3E%3Cpath d='M8 6V4h8v2'/%3E%3Cpath d='m19 6-1 14H6L5 6'/%3E%3Cpath d='M10 11v5M14 11v5'/%3E%3C/svg%3E");
}

.row-actions .edit-record:hover {
  border-color: #9fc2ee;
  background-color: #eef5ff;
}

.row-actions .delete-record:hover {
  border-color: #ef9a93;
  background-color: #fff1f0;
}

@media (max-width: 640px) {
  .table-wrap .actions-cell,
  .table-wrap .row-actions {
    width: 76px;
    min-width: 76px;
    max-width: 76px;
  }

  .table-wrap tbody tr:nth-child(odd) .row-actions {
    background-color: #fff;
  }

  .table-wrap tbody tr:nth-child(even) .row-actions {
    background-color: #f6f8fb;
  }
}
/* Compact mobile Master heading */
@media (max-width: 640px) {
  .list-heading > div:first-child:not(.list-heading-actions) {
    display: none;
  }

  .list-heading-actions {
    display: flex;
    align-items: center;
    gap: 10px;
  }

  .list-heading-actions .table-search {
    width: auto !important;
    min-width: 0 !important;
    flex: 1 1 auto;
  }

    .list-heading-actions .primary-button {
        width: 30px !important;
        height: 30px;
        min-width: 30px !important;
        flex: 0 0 30px;
        padding: 0;
        display: grid;
        place-items: center;
        border-radius: 5px;
        font-size: 0;
    }

  .list-heading-actions .primary-button::before {
    content: "+";
    font-size: 24px;
    font-weight: 800;
    line-height: 1;
  }
}
/* Content-sized table columns */
.table-wrap table {
  width: max-content;
  min-width: 100%;
  table-layout: auto;
}

.table-wrap th:not(.actions-cell),
.table-wrap td:not(.row-actions) {
  width: 1%;
  max-width: none;
  white-space: nowrap;
}
/* Compact Master spacing */
.master-heading {
  min-height: 0;
  margin: 0 0 10px;
  padding: 0;
}

.state-master-layout,
.list-card,
.list-heading-actions,
.table-wrap,
.table-wrap table {
  margin: 0;
}

.list-heading {
  min-height: 0;
  padding: 10px 12px;
}

.table-wrap th,
.table-wrap td {
  padding: 6px 8px;
}

.table-wrap td small {
  margin-top: 2px;
}

.row-actions form {
  margin-left: 2px;
}

@media (max-width: 640px) {
  .page-content {
    padding: 8px;
  }

  .master-heading {
    margin-bottom: 8px;
  }

  .list-heading {
    padding: 8px;
  }

  .table-wrap th,
  .table-wrap td {
    padding: 5px 6px;
  }
}
/* Drawer width limit */
@media (max-width: 900px) {
  .form-drawer {
    width: 80vw;
    max-width: 80vw;
  }
}
/* Grouped Booking volume field */
.booking-fields .volume-field {
  min-width: 0;
  margin-top: 14px;
  display: grid;
  align-content: start;
  gap: 7px;
  color: #344054;
  font-size: 10px;
  font-weight: 700;
}

.volume-input-group {
  height: 30px;
  min-width: 0;
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr) auto minmax(0, 1fr) auto;
  align-items: center;
  overflow: hidden;
  border: 1px solid #d9dee7;
  border-radius: 7px;
  background: #fff;
}

.volume-input-group:focus-within {
  border-color: #4c83cb;
  box-shadow: 0 0 0 3px rgba(20, 98, 207, .09);
}

.booking-fields .volume-input-group input {
  width: 100%;
  height: 28px !important;
  min-width: 0;
  padding: 0 6px;
  border: 0;
  border-radius: 0;
  outline: 0;
  text-align: center;
  box-shadow: none !important;
}

.volume-input-group i,
.volume-input-group em {
  color: #8a94a4;
  font-size: 9px;
  font-style: normal;
  font-weight: 600;
}

.volume-input-group em {
  padding-right: 8px;
}

.volume-errors {
  display: grid;
}

/* Repeatable package dimensions on Booking */
.booking-row-volume {
  display: block;
  margin: 8px 0 4px;
}

.booking-volume-editor {
  min-width: 0;
  padding: 10px;
  border: 1px solid #dfe5ee;
  border-radius: 9px;
  background: #f8fafc;
}

.booking-volume-heading {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 8px;
}

.booking-volume-heading > div {
  display: grid;
  gap: 2px;
}

.booking-volume-heading strong {
  color: #25324b;
  font-size: 11px;
}

.booking-volume-heading small {
  color: #667085;
  font-size: 9px;
}

.booking-volume-add {
  min-height: 28px !important;
  padding: 0 10px;
  border: 1px solid #2563a9;
  border-radius: 6px;
  background: #fff;
  color: #1f5a9d;
  font-size: 10px;
  font-weight: 700;
  white-space: nowrap;
}

.booking-volume-add:hover {
  background: #eef5ff;
}

.booking-volume-table {
  min-width: 760px;
}

.booking-volume-editor:has(.booking-volume-table) {
  overflow-x: auto;
}

.booking-volume-table-head,
.booking-volume-row,
.booking-volume-totals {
  display: grid;
  grid-template-columns: 28px 70px minmax(230px, 1.7fr) minmax(105px, .8fr) minmax(135px, 1fr) 28px;
  align-items: start;
  gap: 8px;
}

.booking-volume-table-head {
  padding: 0 5px 5px;
  color: #667085;
  font-size: 9px;
  font-weight: 700;
}

.booking-volume-row {
  padding: 7px 5px;
  border-top: 1px solid #e4e9f1;
  background: #fff;
}

.booking-volume-row:first-child {
  border-radius: 7px 7px 0 0;
}

.booking-volume-number {
  padding-top: 8px;
  color: #475467;
  font-size: 10px;
  font-weight: 700;
  text-align: center;
}

.booking-volume-row > label,
.booking-volume-totals > label,
.booking-volume-row > .volume-field {
  min-width: 0;
  margin: 0;
}

.booking-fields .booking-volume-row > .volume-field {
  margin-top: 0;
}

.booking-volume-row > label > span:first-child,
.booking-volume-row > .volume-field > span:first-child,
.booking-volume-totals > label > span:first-child {
  display: none;
}

.booking-volume-row > label > input,
.booking-volume-totals > label > input {
  width: 100%;
  height: 30px !important;
  text-align: right;
}

.booking-volume-row > label > small,
.booking-volume-totals > label > small {
  display: block;
  margin-top: 2px;
  color: #7a8494;
  font-size: 8px;
  text-align: right;
}

.booking-volume-remove {
  width: 26px;
  height: 26px;
  min-height: 26px !important;
  margin-top: 2px;
  padding: 0;
  border: 1px solid #f2c8c8;
  border-radius: 6px;
  background: #fff6f6;
  color: #b42318;
  font-size: 17px;
  line-height: 1;
}

.booking-volume-remove:disabled {
  visibility: hidden;
}

.booking-volume-totals {
  padding: 8px 5px 2px;
  border-top: 2px solid #cfd8e6;
  background: #eef4fb;
  border-radius: 0 0 7px 7px;
}

.booking-volume-totals > strong {
  grid-column: 1;
  padding-top: 8px;
  color: #1f4f83;
  font-size: 9px;
  text-transform: uppercase;
}

.booking-volume-totals input {
  border-color: #c4d3e4;
  background: #fff;
  color: #183b63;
  font-weight: 700;
}

.booking-row-weight-summary {
  grid-template-columns: repeat(2, minmax(0, 1fr));
  max-width: 430px;
}

.master-setting-help {
  align-self: end;
  min-height: 30px;
  padding: 7px 9px;
  border: 1px solid #dce5ef;
  border-radius: 7px;
  color: #667085;
  background: #f8fafc;
  font-size: 9px;
  line-height: 1.55;
}

.master-setting-help strong {
  color: #344054;
}

@media (max-width: 600px) {
  .booking-volume-editor {
    padding: 8px;
  }

  .booking-volume-heading {
    align-items: flex-start;
  }

  .booking-row-weight-summary {
    max-width: none;
  }
}
/* Booking details and charges split layout */
.booking-main-grid {
  display: grid;
  grid-template-columns: minmax(0, 2fr) minmax(420px, 1fr);
  align-items: start;
  gap: 16px;
}

.booking-details-card,
.booking-charges-card {
  min-width: 0;
}


.booking-charges-card .charge-rows {
  grid-template-columns: minmax(0, 1fr);
}

.booking-charges-card .charge-rows label {
  grid-template-columns: 105px minmax(0, 1fr);
  align-items: center;
  gap: 4px 10px;
}

.booking-charges-card .charge-rows label > span:first-child {
  grid-column: 1;
  grid-row: 1;
}

.booking-charges-card .charge-rows label > input,
.booking-charges-card .charge-rows label > select,
.booking-charges-card .charge-rows label > .money-field,
.booking-charges-card .charge-rows label > .gst-control-group,
.booking-charges-card .charge-rows label > .rate-control-group {
  grid-column: 2;
  grid-row: 1;
}

.booking-charges-card .charge-rows label > small,
.booking-charges-card .charge-rows label > .field-error {
  grid-column: 2;
}

@media (max-width: 1050px) {
  .booking-main-grid {
    grid-template-columns: minmax(0, 1fr);
  }
}


/* Grouped Booking Rate control */
.rate-control-group {
  height: 30px;
  min-width: 0;
  display: flex;
  align-items: center;
  overflow: hidden;
  border: 1px solid #d9dee7;
  border-radius: 7px;
  background: #fff;
}

.rate-control-group:focus-within {
  border-color: #4c83cb;
  box-shadow: 0 0 0 3px rgba(20, 98, 207, .09);
}

.rate-control-group.has-validation-error,
.rate-control-group:has(.input-validation-error) {
  border-color: #dc2626;
  box-shadow: 0 0 0 3px rgba(220, 38, 38, .1);
}

.booking-fields .rate-control-group > select {
  height: 28px !important;
  min-width: 0;
  flex: 1 1 auto;
  padding: 0 6px;
  border: 0;
  border-radius: 0;
  box-shadow: none !important;
}

.rate-value-box {
  height: 28px;
  min-width: 92px;
  flex: 0 0 92px;
  display: flex;
  align-items: center;
  border-left: 1px solid #e4e7ec;
}

.rate-value-box > i {
  padding-left: 7px;
  color: #667085;
  font-size: 10px;
  font-style: normal;
}

.booking-fields .rate-value-box > input {
  width: 100%;
  height: 28px !important;
  min-width: 0;
  padding: 0 7px 0 4px;
  border: 0;
  border-radius: 0;
  box-shadow: none !important;
}
/* Grouped Booking GST control */
.gst-control-group {
  height: 30px;
  min-width: 0;
  display: flex;
  align-items: center;
  overflow: hidden;
  border: 1px solid #d9dee7;
  border-radius: 7px;
  background: #fff;
}

.gst-control-group:focus-within {
  border-color: #4c83cb;
  box-shadow: 0 0 0 3px rgba(20, 98, 207, .09);
}

.booking-fields .gst-control-group > select {
  height: 28px !important;
  min-width: 0;
  flex: 1 1 0;
  padding: 0 6px;
  border: 0;
  border-radius: 0;
  box-shadow: none !important;
}

.booking-fields .gst-control-group > select + select,
.gst-percent-box {
  border-left: 1px solid #e4e7ec;
}

.gst-percent-box {
  height: 28px;
  min-width: 62px;
  flex: 0 0 62px;
  display: flex;
  align-items: center;
}

.booking-fields .gst-percent-box > input {
  width: 100%;
  height: 28px !important;
  min-width: 0;
  padding: 0 3px 0 6px;
  border: 0;
  border-radius: 0;
  text-align: right;
  box-shadow: none !important;
}

.gst-percent-box > i {
  padding-right: 6px;
  color: #667085;
  font-size: 9px;
  font-style: normal;
}

.booking-charges-card .charge-rows label > span:first-child em {
  color: #667085;
  font-size: 8px;
  font-style: normal;
  font-weight: 600;
}

@media (max-width: 480px) {
  .booking-charges-card .charge-rows .gst-selection-row {
    grid-template-columns: minmax(0, 1fr);
  }

  .booking-charges-card .charge-rows .gst-selection-row > span:first-child,
  .booking-charges-card .charge-rows .gst-selection-row > .gst-control-group,
  .booking-charges-card .charge-rows .gst-selection-row > .field-error {
    grid-column: 1;
    grid-row: auto;
  }
}
/* Booking Details requested row layout */
.booking-detail-rows {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 0;
}

.booking-detail-row {
  min-width: 0;
  display: grid;
  gap: 0 14px;
}

.booking-row-primary {
  grid-template-columns: repeat(4, minmax(0, 1fr));
}

.booking-row-primary-with-serial {
  grid-template-columns: minmax(160px, 1.2fr) minmax(130px, .8fr) repeat(3, minmax(130px, 1fr));
}

.booking-row-1 {
  grid-template-columns: minmax(0, 1fr);
}

.booking-row-2 {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.booking-party-contact {
  min-width: 0;
  display: grid;
  grid-template-columns: minmax(0, 1fr);
}

.booking-party-contact[hidden] {
  display: none;
}

.booking-row-3 {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

.booking-row-weight {
  grid-template-columns: minmax(60px, .55fr) minmax(150px, 1.4fr) repeat(3, minmax(90px, 1fr));
}

@media (max-width: 800px) {
  .booking-row-primary,
  .booking-row-primary-with-serial,
  .booking-row-weight {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 600px) {
  .booking-detail-row {
    column-gap: 8px;
  }

  .booking-row-primary {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .booking-row-primary > label:first-child,
  .booking-row-primary > label:last-child {
    grid-column: 1 / -1;
  }

  .booking-row-2 {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .booking-row-3 {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .booking-row-3 > label:last-child {
    grid-column: 1 / -1;
  }

  .booking-row-weight {
    grid-template-columns: repeat(6, minmax(0, 1fr));
    column-gap: 6px;
  }

  .booking-row-weight > :nth-child(1) {
    grid-column: span 1;
  }

  .booking-row-weight > :nth-child(2) {
    grid-column: span 3;
  }

  .booking-row-weight > :nth-child(3) {
    grid-column: span 2;
  }

  .booking-row-weight > :nth-child(4),
  .booking-row-weight > :nth-child(5) {
    grid-column: span 3;
  }

  .booking-row-weight > label > span:first-child,
  .booking-row-weight > .volume-field > span:first-child {
    line-height: 1.2;
  }
}
/* Booking Selectize and quick add */
.booking-select-with-add {
  min-width: 0;
  position: relative;
}

.booking-select-with-add > label > span:first-child {
  padding-right: 28px;
}

.booking-select-add {
  width: 20px;
  height: 20px;
  min-height: 20px !important;
  padding: 0;
  position: absolute;
  z-index: 2;
  top: 14px;
  right: 0;
  display: grid;
  place-items: center;
  border: 0;
  border-radius: 5px;
  color: #fff;
  background: var(--red);
  cursor: pointer;
  font-size: 14px;
  font-weight: 800;
  line-height: 1;
}

.booking-fields .selectize-control {
  width: 100%;
  height: 30px;
  min-width: 0;
}

.booking-fields .selectize-input {
  width: 100%;
  min-height: 30px !important;
  height: 30px;
  padding: 5px 28px 5px 9px;
  display: flex;
  align-items: center;
  border: 1px solid #d9dee7;
  border-radius: 7px;
  color: var(--navy);
  background: #fff;
  box-shadow: none;
  font-size: 11px;
  line-height: 18px;
}

.booking-fields .selectize-input.focus {
  border-color: #4c83cb;
  box-shadow: 0 0 0 3px rgba(20, 98, 207, .09);
}

.booking-fields .selectize-input > input {
  height: 18px !important;
  padding: 0 !important;
  border: 0 !important;
  box-shadow: none !important;
}

.selectize-dropdown {
  z-index: 12000;
  border-color: #d9dee7;
  border-radius: 7px;
  font-size: 11px;
}

.selectize-dropdown .option {
  padding: 7px 9px;
}

.booking-quick-dialog {
  width: min(430px, calc(100vw - 28px));
  max-width: 430px;
  max-height: calc(100vh - 28px);
  padding: 0;
  overflow: auto;
  border: 0;
  border-radius: 14px;
  background: transparent;
  box-shadow: 0 24px 70px rgba(11, 25, 48, .28);
}

.booking-party-dialog {
  width: min(680px, calc(100vw - 28px));
  max-width: 680px;
}

.booking-quick-dialog::backdrop {
  background: rgba(11, 25, 48, .48);
  backdrop-filter: blur(2px);
}

.booking-quick-dialog-card {
  padding: 18px;
  background: #fff;
}

.booking-quick-dialog-heading {
  padding-bottom: 12px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  border-bottom: 1px solid #e8ebf0;
}

.booking-quick-dialog-heading h2 {
  margin: 0;
  color: var(--navy);
  font-size: 17px;
}

.booking-quick-dialog-heading > button {
  width: 30px;
  height: 30px;
  min-height: 30px;
  padding: 0;
  border: 1px solid #d9dee7;
  border-radius: 7px;
  color: #667085;
  background: #fff;
  cursor: pointer;
  font-size: 20px;
}

.booking-quick-form {
  padding-top: 12px;
  display: grid;
  gap: 10px;
}

.booking-quick-party-form {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.booking-quick-form label {
  min-width: 0;
  display: grid;
  gap: 5px;
  color: #344054;
  font-size: 10px;
  font-weight: 700;
}

.booking-quick-form label b {
  color: var(--red);
}

.booking-quick-form input,
.booking-quick-form select,
.booking-quick-form textarea {
  width: 100%;
  height: 30px;
  min-width: 0;
  padding: 0 9px;
  border: 1px solid #d9dee7;
  border-radius: 7px;
  outline: 0;
  color: var(--navy);
  background: #fff;
  font-size: 11px;
}

.booking-quick-form textarea {
  height: 58px;
  padding-top: 8px;
  resize: vertical;
}

.booking-quick-form input:focus,
.booking-quick-form select:focus,
.booking-quick-form textarea:focus {
  border-color: #4c83cb;
  box-shadow: 0 0 0 3px rgba(20, 98, 207, .09);
}

.quick-span-2 {
  grid-column: 1 / -1;
}

.booking-quick-error {
  padding: 8px 10px;
  border: 1px solid #f6b5bd;
  border-radius: 7px;
  color: #b42336;
  background: #fff2f4;
  font-size: 10px;
}

.booking-quick-actions {
  padding-top: 4px;
  display: flex;
  justify-content: flex-end;
  gap: 8px;
}

@media (max-width: 560px) {
  .booking-quick-party-form {
    grid-template-columns: minmax(0, 1fr);
  }

  .booking-quick-party-form .quick-span-2 {
    grid-column: 1;
  }
}
/* Booking print actions */
.booking-print-actions {
  white-space: nowrap;
}

.actions-cell.recent-booking-actions,
.row-actions.recent-booking-actions {
  width: 142px;
  min-width: 142px;
  max-width: 142px;
}

.actions-cell.recent-record-actions,
.row-actions.recent-record-actions {
  width: 110px;
  min-width: 110px;
  max-width: 110px;
}

.recent-booking-actions form {
  margin-left: 3px;
}

.recent-booking-actions > form + .icon-action {
  margin-left: 3px;
}

.booking-print-actions .icon-action + .icon-action {
  margin-left: 3px;
}

.booking-print-actions .icon-action svg {
  width: 15px;
  height: 15px;
  fill: #1462cf;
}

.booking-print-actions .sticker-record svg {
  fill: #f52246;
}

.booking-print-actions .print-record:hover {
  border-color: #9fc2ee;
  background-color: #eef5ff;
}

.booking-print-actions .sticker-record:hover {
  border-color: #f4a3b2;
  background-color: #fff1f3;
}
/* PS logo asset */
.brand-logo {
  display: block;
  width: 150px;
  max-width: 100%;
  height: 92px;
  object-fit: contain;
}

.login-brand-logo {
  display: block;
  width: 260px;
  max-width: 80vw;
  height: auto;
  object-fit: contain;
}
/* Optional packing placeholder and Freight alignment */
.booking-fields .optional-placeholder-select {
  font-weight: 400;
}

.booking-fields .optional-placeholder-select:has(option[value=""]:checked) {
  color: #98a2b3;
}

.booking-fields .optional-placeholder-select option {
  color: var(--navy);
  font-weight: 400;
}

.booking-charges-card input[data-freight] {
  padding-right: 9px;
  text-align: right;
}

/* Booking Create visual system: mirrors the supplied icon and colour reference. */
.booking-reference-form {
  --booking-navy: #12264a;
  --booking-blue: #4268ba;
  --booking-cyan: #19b8c6;
  --booking-purple: #7357d8;
  --booking-orange: #ff9b22;
  --booking-pink: #ed3e79;
}

/* Keep Booking number fields keyboard-editable without browser spinner arrows. */
.booking-reference-form input[type="number"] {
  appearance: textfield;
  -moz-appearance: textfield;
}

.booking-reference-form input[type="number"]::-webkit-inner-spin-button,
.booking-reference-form input[type="number"]::-webkit-outer-spin-button {
  margin: 0;
  -webkit-appearance: none;
}

.booking-reference-form .booking-icon-sprite {
  width: 0;
  height: 0;
  position: absolute;
  overflow: hidden;
}

.booking-reference-form .booking-card {
  border-color: #e7ebf2;
  border-radius: 13px;
  box-shadow: 0 8px 24px rgba(18, 38, 74, .07);
}

.booking-reference-form .booking-card-heading {
  min-height: 66px;
  position: relative;
  border-bottom: 0;
}

.booking-reference-form .booking-card-heading::after {
  width: 44px;
  height: 3px;
  position: absolute;
  left: 0;
  bottom: 10px;
  border-radius: 99px;
  background: #f21f42;
  content: "";
}

.booking-reference-form .booking-card-heading h2 {
  color: var(--booking-navy);
  font-size: 19px;
  font-weight: 800;
  letter-spacing: -.2px;
}

.booking-reference-form .booking-fields label {
  color: #243652;
  font-size: 10.5px;
}

    .booking-reference-form .booking-fields input,
    .booking-reference-form .booking-fields select,
    .booking-reference-form .booking-fields textarea,
    .booking-reference-form .booking-fields .selectize-input,
    .booking-reference-form .field-with-action,
    .booking-reference-form .money-field {
        border-color: #355c96;
        border-radius: 7px;
        color: #172642;
        box-shadow: 0 1px 3px rgba(18, 38, 74, .035);
    }

.booking-reference-form .booking-fields input::placeholder,
.booking-reference-form .booking-fields textarea::placeholder {
  color: #9aa6b8;
}

.booking-reference-form .booking-icon-field {
  position: relative;
}

.booking-reference-form .booking-ui-icon {
  width: 18px;
  height: 18px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.8;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.booking-reference-form .booking-icon-field > .booking-ui-icon {
  position: absolute;
  z-index: 3;
  left: 11px;
  top: 25px;
  pointer-events: none;
}

.booking-reference-form .booking-icon-blue > .booking-ui-icon { color: var(--booking-blue); }
.booking-reference-form .booking-icon-cyan > .booking-ui-icon { color: var(--booking-cyan); }
.booking-reference-form .booking-icon-purple > .booking-ui-icon { color: var(--booking-purple); }
.booking-reference-form .booking-icon-orange > .booking-ui-icon { color: var(--booking-orange); }

.booking-reference-form .booking-icon-field > input,
.booking-reference-form .booking-icon-field > select,
.booking-reference-form .booking-icon-field > textarea {
  padding-left: 38px;
}

.booking-reference-form .booking-icon-field .selectize-input {
  min-height: 42px !important;
  height: 42px;
  padding-left: 38px;
}

.booking-reference-form .booking-icon-field .selectize-control {
  height: 42px;
}

.booking-reference-form .booking-select-add {
  top: 13px;
  background: #f21f42;
  box-shadow: 0 3px 8px rgba(242, 31, 66, .22);
}

.booking-reference-form .booking-accent-row {
  margin-top: 9px;
  padding: 0 10px 10px;
  border: 1px solid transparent;
  border-radius: 10px;
}

.booking-reference-form .booking-accent-cyan {
  border-color: #d7f0f3;
  background: #f7fcfd;
}

.booking-reference-form .booking-accent-purple {
  border-color: #e8e3fb;
  background: #fbfaff;
}

.booking-reference-form .booking-accent-orange {
  border-color: #f9e3bf;
  background: #fffaf2;
}

.booking-reference-form .booking-contact-row {
  margin-top: -1px;
  border-top-color: transparent;
  border-radius: 0 0 10px 10px;
}

.booking-reference-form .booking-party-choice-row:has(+ .booking-contact-row) {
  border-radius: 10px 10px 0 0;
}

.booking-reference-form .booking-party-choice-row:not(:has(> .booking-select-with-add:not([hidden]))),
.booking-reference-form .booking-contact-row:not(:has(> .booking-party-contact:not([hidden]))) {
  display: none;
}

.booking-reference-form .booking-row-volume {
  padding: 8px;
}

.booking-reference-form .booking-volume-editor {
  padding: 4px 2px 2px;
  border: 0;
  background: transparent;
}

.booking-reference-form .booking-volume-heading strong {
  display: flex;
  align-items: center;
  gap: 7px;
  color: var(--booking-navy);
}

.booking-reference-form .booking-section-icon {
  width: 28px;
  height: 28px;
  display: inline-grid;
  place-items: center;
  border-radius: 7px;
  background: #e5f8fa;
}

.booking-reference-form .booking-section-icon .booking-ui-icon {
  width: 16px;
  height: 16px;
}

.booking-reference-form .booking-volume-add {
  border-color: #9fdee4;
  color: #078d9a;
  background: #fff;
}

.booking-reference-form .booking-volume-add:hover {
  background: #e9fafb;
}

.booking-reference-form .booking-volume-row {
  border-color: #dcebef;
}

.booking-reference-form .booking-volume-totals {
  border-top-color: #9bdbe2;
  background: #eaf8fa;
}

.booking-reference-form .booking-row-weight-summary {
  max-width: none;
}

.booking-reference-form .booking-remark-row {
  margin-top: -1px;
  border-top-color: transparent;
  border-radius: 0 0 10px 10px;
}

.booking-reference-form .booking-remark-row .booking-icon-field > .booking-ui-icon {
  top: 32px;
}

.booking-reference-form .booking-charges-card {
  padding-left: 20px;
  padding-right: 20px;
}

.booking-reference-form .booking-charges-card .charge-rows label {
  grid-template-columns: minmax(155px, .82fr) minmax(190px, 1.3fr);
  gap: 5px 12px;
}

.booking-reference-form .booking-charge-title {
  display: flex;
  align-items: center;
  gap: 10px;
  color: #26364f;
  font-weight: 750;
}

.booking-reference-form .booking-charge-icon {
  width: 36px;
  height: 36px;
  display: inline-grid;
  flex: 0 0 36px;
  place-items: center;
  border: 1px solid currentColor;
  border-radius: 9px;
}

.booking-reference-form .booking-charge-icon .booking-ui-icon {
  width: 19px;
  height: 19px;
  stroke-width: 2;
}

.booking-reference-form .booking-charge-green .booking-charge-icon {
  color: #16a34a;
  border-color: #cdeed8;
  background: #ecf9f0;
}

.booking-reference-form .booking-charge-orange .booking-charge-icon {
  color: #f08a18;
  border-color: #f9dfbd;
  background: #fff5e8;
}

.booking-reference-form .booking-charge-blue .booking-charge-icon {
  color: #2183dc;
  border-color: #cfe7fa;
  background: #edf7ff;
}

.booking-reference-form .booking-charge-purple .booking-charge-icon {
  color: #7650df;
  border-color: #e0d6fb;
  background: #f5f1ff;
}

.booking-reference-form .booking-charge-cyan .booking-charge-icon {
  color: #0da8b7;
  border-color: #c9edf0;
  background: #ecfafa;
}

.booking-reference-form .booking-charge-pink .booking-charge-icon {
  color: #e83c78;
  border-color: #f5cfe0;
  background: #fff0f6;
}

.booking-reference-form .rate-control-group,
.booking-reference-form .gst-control-group {
  height: 42px;
  border-color: #d8e0ec;
}

.booking-reference-form .booking-fields .rate-control-group > select,
.booking-reference-form .booking-fields .gst-control-group > select,
.booking-reference-form .rate-value-box,
.booking-reference-form .booking-fields .rate-value-box > input,
.booking-reference-form .gst-percent-box,
.booking-reference-form .booking-fields .gst-percent-box > input {
  height: 40px !important;
}

.booking-reference-form .total-field {
  min-height: 50px;
  margin-top: 18px !important;
  padding: 6px 9px;
  border-radius: 8px;
  color: Black;
 /* background: linear-gradient(135deg, #f5143d, #ef174f);
  box-shadow: 0 7px 16px rgba(239, 23, 79, .22);*/
}

    .booking-reference-form .total-field .booking-charge-title,
    .booking-reference-form .total-field .booking-charge-icon,
    .booking-reference-form .total-field .money-field,
    .booking-reference-form .total-field .money-field i,
    .booking-reference-form .total-field .money-field input {
        color: Black;
    }

.booking-reference-form .total-field .booking-charge-icon {
  border-color: rgba(255,255,255,.2);
  background: rgba(255,255,255,.12);
}

.booking-reference-form .total-field .money-field {
  border: 0;
  background: transparent;
  box-shadow: none;
}

.booking-reference-form .total-field .money-field input {
  border: 0;
  background: transparent;
  font-size: 14px;
  font-weight: 800;
}

@media (max-width: 620px) {
  .booking-reference-form .booking-accent-row {
    padding-left: 8px;
    padding-right: 8px;
  }

  .booking-reference-form .booking-charges-card .charge-rows label {
    grid-template-columns: minmax(125px, .72fr) minmax(0, 1fr);
  }

  .booking-reference-form .booking-charge-title {
    gap: 7px;
  }

  .booking-reference-form .booking-charge-icon {
    width: 31px;
    height: 31px;
    flex-basis: 31px;
  }
}
/* Tablet and small-desktop shell: keep content inside the viewport. */
@media (max-width: 1330px) {
  body,
  .app-shell {
    overflow-x: hidden;
  }

  .sidebar {
    transform: translateX(-100%);
    transition: transform .25s ease;
  }

  .sidebar.open {
    transform: translateX(0);
  }

  .sidebar-backdrop.open {
    position: fixed;
    z-index: 25;
    inset: 0;
    display: block;
    background: rgba(4, 12, 24, .55);
  }

  .page-frame {
    width: 100%;
    max-width: 100vw;
    min-width: 0;
    margin-left: 0;
    border-radius: 0;
  }

  .topbar,
  .page-content,
  .app-footer {
    width: 100%;
    max-width: 100vw;
    min-width: 0;
  }

  .page-content {
    overflow-x: hidden;
  }

  .page-content > *,
  .booking-form,
  .booking-main-grid,
  .booking-card {
    max-width: 100%;
    min-width: 0;
  }

  .drawer-backdrop {
    inset: 0;
  }

  .form-drawer {
    left: 0;
    width: min(460px, 80vw);
    max-width: 80vw;
  }
}
/* Stack booking cards before their inner field rows become compressed. */
@media (max-width: 1100px) {
  .booking-main-grid {
    grid-template-columns: minmax(0, 1fr);
  }
}
/* Explicit City and Party actions at the bottom of Booking dropdowns. */
.booking-fields .selectize-dropdown {
  overflow: hidden;
}

.selectize-quick-add {
  width: 100%;
  min-height: 36px !important;
  padding: 6px 9px;
  display: flex;
  align-items: center;
  gap: 9px;
  border: 2px solid var(--red);
  color: var(--red);
  background: #fff;
  cursor: pointer;
  text-align: left;
}

.selectize-quick-add:hover,
.selectize-quick-add:focus-visible {
  color: #fff;
  background: var(--red);
  outline: 0;
}

.selectize-quick-add > span {
  width: 22px;
  height: 22px;
  display: grid;
  place-items: center;
  flex: 0 0 22px;
  border-radius: 5px;
  color: #fff;
  background: var(--red);
  font-size: 16px;
  font-weight: 900;
  line-height: 1;
}

.selectize-quick-add:hover > span,
.selectize-quick-add:focus-visible > span {
  color: var(--red);
  background: #fff;
}

.selectize-quick-add > strong {
  font-size: 12px;
  font-weight: 800;
}
/* Quick-add is available inside the dropdown footer. */
.booking-select-add {
  display: none;
}

.booking-select-with-add > label > span:first-child {
  padding-right: 0;
}
/* Keep grouped currency focus on the outer field only. */
.booking-fields .money-field input,
.booking-fields .money-field input:focus,
.money-input input, .money-input input:focus {
    border-left: 0 !important;
    border-bottom-left-radius: 0 !important;
    border-top-left-radius: 0 !important;
    /*  outline: 0;
    box-shadow: none !important;*/
}
/* Booking Selectize visual refresh. */
.booking-fields .selectize-input,
.booking-fields .selectize-input.dropdown-active {
  border: 1px solid #d9dee7;
  border-radius: 7px !important;
  color: var(--navy);
  background: #fff !important;
  background-image: none !important;
  box-shadow: none;
}

.booking-fields .selectize-input.focus,
.booking-fields .selectize-input.input-active {
  border-color: #69a2f8;
  box-shadow: 0 0 0 3px rgba(38, 114, 232, .1);
}

.booking-fields .selectize-input > input::placeholder {
  color: #98a2b3;
  font-weight: 400;
  opacity: 1;
}

.booking-fields .selectize-control.single .selectize-input::after {
  width: 7px;
  height: 7px;
  right: 12px;
  margin-top: -5px;
  border: solid #667085;
  border-width: 0 2px 2px 0;
  transform: rotate(45deg);
}

.booking-fields .selectize-control.single .selectize-input.dropdown-active::after {
  margin-top: -1px;
  border: solid #667085;
  border-width: 0 2px 2px 0;
  transform: rotate(225deg);
}

.booking-fields .selectize-dropdown {
  margin-top: 6px;
  padding: 4px 0 0;
  overflow: hidden;
  border: 1px solid #e4e9f0;
  border-radius: 10px;
  color: var(--navy);
  background: #fff;
  box-shadow: 0 12px 28px rgba(11, 25, 48, .14);
}

.booking-fields .selectize-dropdown-content {
  max-height: 220px;
  padding: 3px 4px 5px;
}

.booking-fields .selectize-dropdown .option {
  min-height: 34px;
  padding: 7px 34px 7px 10px;
  position: relative;
  display: flex;
  align-items: center;
  border-radius: 7px;
  color: var(--navy);
  background: #fff;
  font-weight: 600;
}

.booking-fields .selectize-dropdown .option.active:not(.selected) {
  color: var(--navy);
  background: #f4f7fb;
}

.booking-fields .selectize-dropdown .option.selected,
.booking-fields .selectize-dropdown .option.selected.active {
  color: #2672e8;
  background: #edf4ff;
  font-weight: 800;
}

.booking-fields .selectize-dropdown .option.selected::after {
  content: "✓";
  position: absolute;
  top: 50%;
  right: 11px;
  color: #2672e8;
  font-size: 17px;
  font-weight: 900;
  line-height: 1;
  transform: translateY(-52%);
}

.booking-fields .selectize-quick-add {
  min-height: 44px !important;
  padding: 8px 10px;
  gap: 10px;
  border: 0;
  border-top: 1px solid #e4e9f0;
  color: var(--red);
  background: #fff;
}

.booking-fields .selectize-quick-add:hover,
.booking-fields .selectize-quick-add:focus-visible {
  color: var(--red);
  background: #fff6f7;
}

.booking-fields .selectize-quick-add > span {
  width: 27px;
  height: 27px;
  flex-basis: 27px;
  border-radius: 7px;
  color: #fff;
  background: var(--red);
  box-shadow: 0 5px 12px rgba(242, 39, 73, .2);
}

.booking-fields .selectize-quick-add:hover > span,
.booking-fields .selectize-quick-add:focus-visible > span {
  color: #fff;
  background: #df1839;
}

.booking-fields .selectize-quick-add > strong {
  font-size: 12px;
  font-weight: 800;
}
/* Booking Register filters and tools. */
.register-list-heading {
  min-height: 82px;
}

.register-toolbar {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  flex-wrap: wrap;
  gap: 6px;
}

.register-toolbar .secondary-button {
  padding-inline: 11px;
  white-space: nowrap;
}

.register-toolbar .register-tool-icon {
  width: 30px;
  min-width: 30px;
  height: 30px;
  min-height: 30px;
  padding: 0;
  display: inline-grid;
  place-items: center;
  color: #1462cf;
}

.register-toolbar .register-tool-icon svg {
  width: 16px;
  height: 16px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.8;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.register-toolbar .register-tool-icon.excel {
  color: #16803c;
}

.register-toolbar .register-tool-icon.pdf {
  color: #d92d20;
}

.register-toolbar button:disabled {
  cursor: not-allowed;
  opacity: .5;
}

.register-selected-count {
  margin-right: 3px;
  color: #667085;
  font-size: 9px;
  white-space: nowrap;
}

.register-heading-actions {
  min-width: 0;
  display: flex;
  align-items: center;
  justify-content: flex-end;
  flex-wrap: wrap;
  gap: 7px;
}

.register-date-range {
  width: 270px;
  height: 30px;
  padding: 0 8px;
  display: grid;
  grid-template-columns: 17px minmax(0, 1fr) auto minmax(0, 1fr);
  align-items: center;
  gap: 5px;
  border: 1px solid #d9dee7;
  border-radius: 7px;
  color: #52637d;
  background: #fff;
}

.register-date-picker {
  width: 17px;
  height: 28px;
  min-height: 28px;
  padding: 0;
  display: grid;
  place-items: center;
  border: 0;
  color: inherit;
  background: transparent;
  cursor: pointer;
}

.register-date-picker svg {
  width: 15px;
  height: 15px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.8;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.register-date-range input {
  width: 100%;
  min-width: 0;
  height: 28px;
  min-height: 28px;
  padding: 0;
  border: 0;
  color: var(--navy);
  background: transparent;
  outline: 0;
  font-size: 9px;
  font-weight: 700;
  cursor: pointer;
}

.register-date-range input::-webkit-calendar-picker-indicator {
  display: none;
}

.register-date-range:focus-within {
  border-color: #69a2f8;
  box-shadow: 0 0 0 3px rgba(38, 114, 232, .1);
}

.register-date-range > span {
  color: #98a2b3;
  font-weight: 700;
}

.register-search-button,
.register-filter-toggle {
  width: 34px;
  min-width: 34px;
  height: 30px;
  min-height: 30px;
  padding: 0;
  display: inline-grid;
  place-items: center;
  border: 1px solid #d9dee7;
  border-radius: 7px;
  color: #52637d;
  background: #fff;
  cursor: pointer;
}

.register-search-button svg,
.register-filter-toggle svg {
  width: 17px;
  height: 17px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.8;
  stroke-linecap: round;
}

.register-filter-toggle:hover,
.register-filter-toggle:focus-visible,
.register-filter-toggle[aria-expanded="true"] {
  border-color: var(--red);
  color: var(--red);
  background: #fff5f7;
}

.register-search-button {
  border-color: var(--red);
  color: #fff;
  background: var(--red);
}

.register-search-button:hover,
.register-search-button:focus-visible {
  color: #fff;
  background: #df1839;
}

.register-filters[hidden] {
  display: none;
}
.register-filters {
  padding: 12px 18px;
  display: grid;
  grid-template-columns: repeat(5, minmax(125px, 1fr));
  align-items: end;
  gap: 9px;
  border-bottom: 1px solid var(--line);
  background: #fbfcfe;
}

.register-filters label {
  min-width: 0;
  display: grid;
  gap: 5px;
  color: #475467;
  font-size: 9px;
  font-weight: 700;
}

.register-filters input,
.register-filters select {
  width: 100%;
  min-width: 0;
  padding-inline: 8px;
  border: 1px solid #d9dee7;
  border-radius: 7px;
  color: var(--navy);
  background: #fff;
  outline: 0;
  font-size: 9px;
}

.register-filters input:focus,
.register-filters select:focus {
  border-color: #69a2f8;
  box-shadow: 0 0 0 3px rgba(38, 114, 232, .1);
}

.register-clear-filter {
  width: 100%;
}

.register-select-cell {
  width: 38px !important;
  min-width: 38px;
  max-width: 38px;
  text-align: center;
}

.register-select-cell input {
  width: 15px;
  height: 15px !important;
  min-height: 15px;
  accent-color: var(--red);
}

.booking-register-card .code-pill {
  padding: 4px 9px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 999px;
  font-weight: 800;
  line-height: 1;
}

.booking-register-card .pay-basis-credit {
  color: #2463d4;
  background: #eaf1ff;
}

.booking-register-card .pay-basis-cash {
  color: #159447;
  background: #e9f8ef;
}

.booking-register-card .pay-basis-topay {
  color: #ef6c2c;
  background: #fff0e8;
}
.booking-register-card .table-wrap table {
  width: max-content;
  min-width: max-content;
}
.actions-cell.booking-register-actions,
.row-actions.booking-register-actions {
  width: 1%;
  min-width: 0;
  max-width: none;
  white-space: nowrap;
}

.booking-register-actions .icon-action {
  margin-inline: 1px;
}

.booking-register-actions .email-record {
  color: #157347;
}

.booking-register-actions .email-record svg {
  width: 15px;
  height: 15px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.8;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.booking-register-actions .email-record:hover {
  border-color: #9ad4b5;
  background: #effaf4;
}

.daily-party-date-form {
  display: flex;
  align-items: center;
  gap: 7px;
}

.daily-party-date {
  width: 178px;
  grid-template-columns: 17px minmax(0, 1fr);
}

.daily-party-calendar {
  color: #52637d;
  font-size: 13px;
}

.daily-party-register-link,
.daily-party-email-all,
.daily-report-download {
  min-height: 30px;
  padding: 6px 11px;
  font-size: 9px;
  white-space: nowrap;
}

.daily-party-email-all {
  background: #157347;
}

.daily-party-email-all:hover {
  background: #11623c;
}

.daily-report-download {
  min-width: 55px;
  text-align: center;
}

.daily-report-download.pdf {
  color: #b42318;
  border-color: #f4b5af;
}

.daily-report-download.excel {
  color: #067647;
  border-color: #9ad4b5;
}

.daily-party-report-card .table-wrap table {
  width: 100%;
  min-width: 720px;
}

.booking-register-actions form {
  margin-left: 1px;
}

.register-row-menu {
  display: inline-flex;
  margin-left: 2px;
  vertical-align: middle;
}

.booking-register-actions .register-row-menu-toggle {
  color: #52637d;
}

.booking-register-actions .register-row-menu-toggle svg {
  fill: currentColor;
}

.booking-register-actions .register-row-menu-toggle:hover,
.booking-register-actions .register-row-menu-toggle[aria-expanded="true"] {
  border-color: #aeb9c9;
  color: var(--navy);
  background: #f3f6fa;
}

.register-row-menu-panel {
  position: fixed;
  z-index: 2200;
  width: 132px;
  padding: 4px;
  display: grid;
  gap: 2px;
  border: 1px solid #dce3ec;
  border-radius: 8px;
  background: #fff;
  box-shadow: 0 10px 28px rgba(16, 24, 40, .18);
}

.register-row-menu-panel[hidden] {
  display: none;
}

.booking-register-actions .register-row-menu-panel form {
  width: 100%;
  margin: 0;
  display: block;
}

.register-row-menu-item {
  width: 100%;
  min-height: 30px;
  padding: 5px 9px;
  display: flex;
  align-items: center;
  gap: 8px;
  border: 0;
  border-radius: 6px;
  color: #344054;
  background: transparent;
  font: inherit;
  font-size: 10px;
  font-weight: 700;
  text-align: left;
  text-decoration: none;
  cursor: pointer;
}

.register-row-menu-item span {
  width: 16px;
  color: #1462cf;
  font-size: 16px;
  line-height: 1;
  text-align: center;
}

.register-row-menu-item:hover,
.register-row-menu-item:focus-visible {
  background: #f2f6fb;
}

.register-row-menu-item.delete,
.register-row-menu-item.delete span {
  color: #d92d20;
}

.register-row-menu-item.delete:hover,
.register-row-menu-item.delete:focus-visible {
  background: #fff1f0;
}
.booking-register-card tfoot td {
  border-top: 2px solid #cbd5e1;
  background: #eef2f7;
  color: var(--navy);
  font-weight: 800;
  white-space: nowrap;
}

.booking-register-card .register-total-label {
  text-align: right;
}

.register-print-filter-summary {
  display: none;
}

@media (max-width: 1100px) {
  .register-list-heading {
    align-items: flex-start;
    flex-direction: column;
  }

  .register-heading-actions {
    width: 100%;
    justify-content: flex-start;
  }

  .register-toolbar {
    width: 100%;
    justify-content: flex-start;
  }

  .register-filters {
    grid-template-columns: repeat(3, minmax(130px, 1fr));
  }
}

@media (max-width: 640px) {
  .register-heading-actions {
    width: 100%;
    display: grid;
    grid-template-columns: minmax(0, 1fr) 34px 34px;
  }

  .register-date-range {
    width: 100%;
  }
.register-list-heading {
    padding: 10px;
  }

  .register-toolbar {
    grid-column: 1 / -1;
    width: 100%;
    display: flex;
    justify-content: flex-start;
  }

  .register-toolbar .register-tool-icon {
    width: 30px;
    min-width: 30px;
  }

  .register-filters {
    padding: 10px;
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .register-awb-filter,
  .register-clear-filter {
    grid-column: 1 / -1;
  }
}

@media print {
  .register-heading-actions,
  .register-filters,
  .register-row-menu-panel {
    display: none !important;
  }
  body.print-booking-register .sidebar,
  body.print-booking-register .sidebar-backdrop,
  body.print-booking-register .topbar,
  body.print-booking-register .app-footer,
  body.print-booking-register .page-content > :not(.booking-register-card),
  body.print-booking-register .register-toolbar,
  body.print-booking-register .register-heading-actions,
  body.print-booking-register .register-filters,
  body.print-booking-register .register-select-cell,
  body.print-booking-register .actions-cell,
  body.print-booking-register .row-actions {
    display: none !important;
  }

  body.print-booking-register,
  body.print-booking-register .app-shell,
  body.print-booking-register .page-frame,
  body.print-booking-register .page-content,
  body.print-booking-register .booking-register-card {
    width: 100% !important;
    max-width: none !important;
    height: auto !important;
    min-height: 0 !important;
    margin: 0 !important;
    padding: 0 !important;
    overflow: visible !important;
    border: 0 !important;
    border-radius: 0 !important;
    box-shadow: none !important;
  }

  body.print-booking-register .page-frame {
    display: block !important;
  }

  body.print-booking-register .table-wrap {
    overflow: visible !important;
  }

  body.print-booking-register .register-print-filter-summary {
    margin: 0 0 7px !important;
    padding: 7px 9px !important;
    display: flex !important;
    align-items: flex-start;
    gap: 5px;
    border: 1px solid #cbd5e1 !important;
    border-radius: 4px !important;
    color: #344054;
    background: #f8fafc;
    font-size: 8px;
    line-height: 1.4;
  }

  body.print-booking-register .register-print-filter-summary strong {
    flex: 0 0 auto;
    color: #101828;
  }

  body.print-booking-register table {
    font-size: 8px;
  }

  body.print-booking-register th,
  body.print-booking-register td {
    padding: 5px;
  }

  @page {
    size: A4 landscape;
    margin: 8mm;
  }
}

/* Company profile settings */
.company-profile-form {
  max-width: 1180px;
}

.company-profile-form textarea {
  min-height: 74px;
  resize: vertical;
}

.company-logo-panel {
  margin-top: 18px;
  padding-top: 18px;
  display: flex;
  align-items: center;
  gap: 18px;
  border-top: 1px solid var(--line);
}

.company-logo-panel img {
  width: min(260px, 55vw);
  height: 110px;
  padding: 8px;
  object-fit: contain;
  border: 1px solid var(--line);
  border-radius: 9px;
  background: #fff;
}

.company-logo-remove {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  color: #344054;
  font-size: 11px;
  font-weight: 700;
}

.company-logo-remove input {
  width: 16px;
  height: 16px;
}

@media (max-width: 600px) {
  .company-logo-panel {
    align-items: flex-start;
    flex-direction: column;
  }
}
.manifest-print-action svg {
  width: 14px;
  height: 14px;
  fill: none;
  stroke: #1462cf;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.manifest-register-filters {
  margin: 0 22px 22px;
  padding: 20px;
}

.manifest-register-filter-actions {
  margin-top: 18px;
}

.manifest-register-card table {
  width: max-content;
  min-width: 100%;
}

.manifest-register-card th,
.manifest-register-card td {
  white-space: nowrap;
}

@media (max-width: 720px) {
  .manifest-register-filters {
    margin: 0 12px 16px;
    padding: 14px;
  }

  .manifest-register-card .register-list-heading {
    align-items: center;
  }
}
.inscan-status-received {
  color: #168653;
  background: #e8f8ef;
}

.inscan-status-missing {
  color: #c0362c;
  background: #fff0ed;
}
.manifest-register-card .actions-cell,
.manifest-register-card .row-actions {
  width: 108px;
  min-width: 108px;
  max-width: 108px;
}
.inscan-awb-scan-control {
  width: min(360px, 100%);
  margin-left: auto;
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.inscan-awb-scan-control input,
[data-inscan-manifest-scan] {
  width: 100%;
  min-height: 30px;
  padding: 6px 10px;
  border: 1px solid #d6deea;
  border-radius: 7px;
  color: #14233b;
  background: #fff;
  font: inherit;
}

[data-inscan-manifest-scan] {
  margin-bottom: 6px;
}

.inscan-awb-scan-control input:focus,
[data-inscan-manifest-scan]:focus {
  border-color: #5596ef;
  outline: 3px solid rgba(85, 150, 239, .14);
}

.inscan-scan-status {
  min-height: 14px;
  color: #667085;
  font-size: 10px;
  font-weight: 700;
}

.inscan-scan-status.success {
  color: #168653;
}

.inscan-scan-status.error {
  color: #c0362c;
}

.table-wrap tbody tr.inscan-scan-confirmed td {
  background: #dcfce7 !important;
  transition: background-color .25s ease;
}

.table-wrap table[data-inscan-pending-table] {
  width: max-content !important;
  min-width: max-content !important;
  max-width: none;
  table-layout: auto !important;
}

.table-wrap table[data-inscan-pending-table] th,
.table-wrap table[data-inscan-pending-table] td {
  width: 1%;
  max-width: none;
  white-space: nowrap;
}

@media (max-width: 720px) {
  .inscan-awb-scan-control {
    width: 100%;
    margin-left: 0;
    order: 3;
  }
}
.manifest-register-card [data-manifest-register] {
  margin: 0;
}

.manifest-register-create {
  min-height: 30px;
  padding: 5px 12px;
  gap: 6px;
  white-space: nowrap;
}

.manifest-register-create > span {
  font-size: 16px;
  line-height: 1;
}

.manifest-register-create > b {
  font: inherit;
}

@media (max-width: 640px) {
  .manifest-register-card .register-heading-actions {
    grid-template-columns: minmax(0, 1fr) 34px 34px 34px;
  }

  .manifest-register-create {
    width: 34px;
    min-width: 34px;
    height: 30px;
    padding: 0;
    display: grid;
    place-items: center;
  }

  .manifest-register-create > b {
    display: none;
  }
}
[data-manifest-edit-row] td {
  transition: opacity .18s ease, background-color .18s ease;
}

[data-manifest-edit-row].manifest-edit-removed td {
  opacity: .48;
  background: #fff1f0 !important;
}
.company-profile-assets {
  padding-top: 16px;
  display: flex;
  flex-wrap: wrap;
  gap: 18px;
}
.company-profile-assets > div {
  padding: 12px;
  display: grid;
  gap: 8px;
  border: 1px solid #e4e7ec;
  border-radius: 10px;
  background: #f8fafc;
}
.company-profile-assets img {
  width: 150px;
  height: 90px;
  object-fit: contain;
  background: #fff;
}
.company-profile-assets label { font-size: 11px; font-weight: 700; }

/* Register lifecycle status */
.lifecycle-number {
  color: #27364a;
  font-size: 10px;
  font-weight: 700;
  white-space: nowrap;
}

.lifecycle-pill {
  padding: 5px 8px;
  display: inline-flex;
  align-items: center;
  border-radius: 999px;
  font-size: 8px;
  font-weight: 700;
  line-height: 1;
  white-space: nowrap;
}

.lifecycle-pill.pending { color: #a65b00; background: #fff1d9; }
.lifecycle-pill.complete { color: #168447; background: #e8f7ed; }
.lifecycle-pill.neutral { color: #526174; background: #eef2f6; }

/* AWB tracking */
.tracking-search-card {
  min-height: 152px;
  padding: 25px 28px;
  display: grid;
  grid-template-columns: minmax(250px, .75fr) minmax(420px, 1.25fr);
  align-items: center;
  gap: 38px;
  border: 1px solid #e7ebf0;
  border-radius: 15px;
  background:
    radial-gradient(circle at 92% 0, rgba(20, 98, 207, .08), transparent 35%),
    #fff;
  box-shadow: 0 8px 24px rgba(20, 33, 53, .045);
}

.tracking-search-copy p,
.tracking-section-heading p {
  margin: 0 0 6px;
  color: var(--red);
  font-size: 9px;
  font-weight: 800;
  letter-spacing: .13em;
}

.tracking-search-copy h1 {
  margin: 0;
  color: var(--navy);
  font-size: 27px;
  letter-spacing: -.035em;
}

.tracking-search-copy span {
  margin-top: 8px;
  display: block;
  color: #748094;
  font-size: 11px;
}

.tracking-search-form > label {
  margin-bottom: 8px;
  display: block;
  color: #344054;
  font-size: 10px;
  font-weight: 700;
}

.tracking-search-form > div {
  height: 52px;
  padding-left: 15px;
  display: flex;
  align-items: center;
  gap: 10px;
  border: 1.5px solid #dce2e9;
  border-radius: 10px;
  background: #fff;
  box-shadow: 0 4px 12px rgba(16, 35, 63, .04);
}

.tracking-search-form > div:focus-within {
  border-color: #3178d3;
  box-shadow: 0 0 0 4px rgba(49, 120, 211, .1);
}

.tracking-search-form svg {
  width: 21px;
  height: 21px;
  flex: 0 0 auto;
  fill: none;
  stroke: #68768a;
  stroke-width: 1.8;
}

.tracking-search-form input {
  height: 100% !important;
  min-width: 0;
  flex: 1;
  border: 0;
  outline: 0;
  color: var(--navy);
  background: transparent;
  font-size: 12px;
}

.tracking-search-form button {
  height: 40px;
  min-height: 40px !important;
  margin-right: 5px;
  padding: 0 18px;
  border: 0;
  border-radius: 7px;
  color: #fff;
  background: linear-gradient(105deg, #ef2948, #d91637);
  box-shadow: 0 6px 14px rgba(239, 41, 72, .2);
  cursor: pointer;
  font-size: 10px;
  font-weight: 700;
  white-space: nowrap;
}

.tracking-start-state,
.tracking-not-found {
  min-height: 300px;
  margin-top: 16px;
  padding: 35px;
  display: grid;
  place-items: center;
  align-content: center;
  border: 1px dashed #d6dde6;
  border-radius: 14px;
  color: #7b8798;
  background: rgba(255, 255, 255, .72);
  text-align: center;
}

.tracking-start-state > span {
  width: 54px;
  height: 54px;
  margin-bottom: 14px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  color: #3178d3;
  background: #eaf3ff;
  font-size: 27px;
}

.tracking-start-state h2 { margin: 0; color: #263448; font-size: 16px; }
.tracking-start-state p { max-width: 520px; margin: 9px 0 0; font-size: 10px; line-height: 1.6; }

.tracking-not-found {
  min-height: 150px;
  border-style: solid;
  border-color: #ffd3d9;
  color: #8a4250;
  background: #fff7f8;
}

.tracking-not-found strong { color: #c51635; font-size: 17px; }
.tracking-not-found span { margin-top: 7px; font-size: 11px; }

.tracking-match-card {
  margin-top: 16px;
  padding: 18px 22px;
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(260px, 420px);
  gap: 24px;
  align-items: end;
  border: 1px solid #d9e3ef;
  border-radius: 14px;
  background: #fff;
  box-shadow: 0 8px 24px rgb(16 24 40 / 5%);
}

.tracking-match-card p { margin: 0 0 4px; color: #ef2948; font-size: 8px; font-weight: 900; letter-spacing: .12em; }
.tracking-match-card h2 { margin: 0; color: var(--navy); font-size: 16px; }
.tracking-match-card > div > span { display: block; margin-top: 5px; color: #7c8798; font-size: 9px; }
.tracking-match-card form label { display: block; margin-bottom: 6px; color: #687487; font-size: 9px; font-weight: 800; }
.tracking-match-card select { width: 100%; height: 42px; padding: 0 38px 0 12px; border: 1px solid #cfd8e5; border-radius: 9px; color: #263448; background: #f9fbfd; font-weight: 700; }
.tracking-match-card noscript button { margin-top: 8px; padding: 8px 13px; border: 0; border-radius: 7px; color: #fff; background: #ef2948; font-weight: 800; }

.tracking-summary-card {
  min-height: 105px;
  margin-top: 16px;
  padding: 19px 23px;
  display: grid;
  grid-template-columns: minmax(170px, .65fr) minmax(330px, 1.4fr) auto;
  align-items: center;
  gap: 28px;
  border: 1px solid #e7ebf0;
  border-radius: 13px;
  background: #fff;
}

.tracking-awb-identity > span,
.tracking-current-status small,
.tracking-route-summary small {
  display: block;
  color: #8a94a4;
  font-size: 8px;
  font-weight: 700;
  letter-spacing: .06em;
  text-transform: uppercase;
}

.tracking-awb-identity h2 { margin: 5px 0 0; color: var(--navy); font-size: 19px; }
.tracking-awb-identity small { margin-top: 4px; display: block; color: #7c8798; font-size: 9px; }

.tracking-route-summary {
  display: grid;
  grid-template-columns: 1fr 54px 1fr;
  align-items: center;
  gap: 10px;
}

.tracking-route-summary span:last-child { text-align: right; }
.tracking-route-summary strong { margin-top: 5px; display: block; color: #263448; font-size: 13px; }
.tracking-route-summary i { height: 32px; display: grid; place-items: center; color: #ef2948; }
.tracking-route-summary i::before { content: ""; width: 100%; border-top: 1px dashed #c8d1dc; grid-area: 1 / 1; }
.tracking-route-summary svg { width: 20px; height: 20px; padding: 3px; position: relative; grid-area: 1 / 1; fill: none; stroke: currentColor; stroke-width: 1.7; background: #fff; }

.tracking-current-status {
  min-width: 150px;
  padding-left: 22px;
  border-left: 1px solid #e9edf2;
}

.tracking-current-status strong {
  margin-top: 7px;
  padding: 7px 10px;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  border-radius: 999px;
  font-size: 10px;
}

.tracking-status-branch {
  padding: 3px 7px;
  border: 1px solid #9fc5ee;
  border-radius: 999px;
  color: #1462cf;
  background: #fff;
  box-shadow: 0 1px 3px rgba(20, 98, 207, .12);
  font-size: 9px;
  font-style: normal;
  font-weight: 800;
}

.tracking-step-state-group {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  flex-wrap: wrap;
  gap: 6px;
}

.tracking-current-status strong.complete { color: #148347; background: #e7f8ed; }
.tracking-current-status strong.pending { color: #a35a00; background: #fff0d6; }
.tracking-current-status strong.active { color: #1667bd; background: #e8f3ff; }

.tracking-detail-grid {
  margin-top: 12px;
  display: grid;
  grid-template-columns: repeat(9, minmax(0, 1fr));
  gap: 8px;
}

.tracking-detail-grid article {
  min-height: 66px;
  padding: 12px;
  min-width: 0;
  border: 1px solid #e8ebf0;
  border-radius: 9px;
  background: #fff;
}

.tracking-detail-grid span { display: block; color: #8a94a4; font-size: 8px; }
.tracking-detail-grid strong { margin-top: 7px; display: block; overflow: hidden; color: #313b4a; font-size: 10px; text-overflow: ellipsis; white-space: nowrap; }

.tracking-journey-card {
  margin-top: 16px;
  padding: 22px 24px 28px;
  border: 1px solid #e7ebf0;
  border-radius: 14px;
  background: #fff;
}

.tracking-section-heading {
  padding-bottom: 17px;
  display: flex;
  align-items: end;
  justify-content: space-between;
  gap: 20px;
  border-bottom: 1px solid #edf0f4;
}

.tracking-section-heading h2 { margin: 0; color: var(--navy); font-size: 17px; }
.tracking-section-heading > span { color: #939baa; font-size: 8px; }

.tracking-timeline {
  width: min(100%, 1050px);
  margin: 24px auto 0;
}

.tracking-step {
  position: relative;
  display: grid;
  grid-template-columns: 42px minmax(0, 1fr);
  gap: 16px;
}

.tracking-step:not(:last-child)::before {
  content: "";
  width: 2px;
  position: absolute;
  top: 38px;
  bottom: -10px;
  left: 20px;
  background: #dfe5ec;
}

.tracking-step.complete:not(:last-child)::before { background: #97ddb2; }

.tracking-step-marker {
  position: relative;
  z-index: 1;
}

.tracking-step-marker span {
  width: 42px;
  height: 42px;
  display: grid;
  place-items: center;
  border: 3px solid #fff;
  border-radius: 50%;
  color: #7d8797;
  background: #e9edf2;
  box-shadow: 0 0 0 1px #dce2e9;
  font-size: 11px;
  font-weight: 800;
}

.tracking-step.complete .tracking-step-marker span { color: #fff; background: #21a65a; box-shadow: 0 0 0 1px #21a65a; }
.tracking-step.active .tracking-step-marker span { color: #fff; background: #2677d2; box-shadow: 0 0 0 1px #2677d2; }
.tracking-step.neutral .tracking-step-marker span { color: #7d8797; background: #eef1f5; }

.tracking-step-card {
  margin-bottom: 14px;
  padding: 17px 19px;
  border: 1px solid #e6eaf0;
  border-radius: 11px;
  background: #fcfdfe;
}

.tracking-step.complete .tracking-step-card { border-color: #d7ecdf; background: #fbfefc; }
.tracking-step.active .tracking-step-card { border-color: #d7e6f8; background: #fbfdff; }

.tracking-step-card header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
}

.tracking-step-card header small { color: #a0a8b4; font-size: 7px; font-weight: 800; letter-spacing: .1em; }
.tracking-step-card h3 { margin: 3px 0 0; color: #273348; font-size: 13px; }

.tracking-state {
  padding: 6px 9px;
  border-radius: 999px;
  font-size: 8px;
  font-weight: 700;
}

.tracking-state.complete { color: #168447; background: #e7f7ed; }
.tracking-state.pending { color: #a55c00; background: #fff0d6; }
.tracking-state.active { color: #1668bf; background: #e8f3ff; }
.tracking-state.neutral { color: #687487; background: #edf1f5; }

.tracking-step-card dl {
  margin: 15px 0 0;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 13px 18px;
}

.tracking-step-card dl > div { min-width: 0; }
.tracking-step-card dt { color: #9099a8; font-size: 8px; }
.tracking-step-card dd { margin: 4px 0 0; overflow: hidden; color: #394454; font-size: 10px; font-weight: 600; text-overflow: ellipsis; white-space: nowrap; }
.tracking-step-card dd a { color: #1667bd; }
.tracking-step-card > p { margin: 13px 0 0; color: #7c8798; font-size: 9px; line-height: 1.55; }
.tracking-step-card dd.tracking-amount { color: #c51535; font-size: 13px; }

@media (max-width: 1180px) {
  .tracking-detail-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

@media (max-width: 760px) {
  .tracking-search-card { grid-template-columns: 1fr; gap: 22px; }
  .tracking-match-card { grid-template-columns: 1fr; gap: 14px; }
  .tracking-summary-card { grid-template-columns: 1fr; gap: 18px; }
  .tracking-current-status { padding: 15px 0 0; border-top: 1px solid #e9edf2; border-left: 0; }
  .tracking-detail-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .tracking-step-card dl { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 520px) {
  .tracking-search-card { padding: 20px; }
  .tracking-search-form > div { height: auto; padding: 10px; flex-wrap: wrap; }
  .tracking-search-form input { height: 36px !important; flex-basis: calc(100% - 34px); }
  .tracking-search-form button { width: 100%; margin: 0; }
  .tracking-detail-grid { grid-template-columns: 1fr; }
  .tracking-journey-card { padding: 18px 14px 22px; }
  .tracking-section-heading { align-items: start; flex-direction: column; gap: 7px; }
  .tracking-step { grid-template-columns: 34px minmax(0, 1fr); gap: 10px; }
  .tracking-step-marker span { width: 34px; height: 34px; }
  .tracking-step:not(:last-child)::before { top: 31px; left: 16px; }
  .tracking-step-card { padding: 14px; }
  .tracking-step-card dl { grid-template-columns: 1fr; }
}

/* Booking Register lifecycle filter. */
.accounting-master-grid { display: grid; grid-template-columns: minmax(340px, .8fr) minmax(0, 1.45fr); gap: 18px; align-items: start; }
.accounting-form-card { margin: 0; }
.accounting-list-card { margin: 0; }
.account-branch-access { margin: 18px 0; padding: 14px; border: 1px solid #dbe3ed; border-radius: 10px; }
.account-branch-access legend { padding: 0 6px; color: #344054; font-size: 10px; font-weight: 800; }
.account-branch-access > div { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
.account-branch-access label { padding: 9px; display: flex; gap: 8px; align-items: center; border: 1px solid #edf0f4; border-radius: 8px; background: #fafbfd; font-size: 10px; font-weight: 700; }
.account-branch-access small { color: #8a94a4; }
.account-active-check { margin: 8px 0 0; display: flex; gap: 8px; align-items: center; color: #344054; font-size: 10px; font-weight: 800; }
.table-subtext { margin-top: 4px; display: block; color: #8a94a4; font-size: 8px; }
.accounting-filter-bar { padding: 14px 18px 0; }
.accounting-filter-bar label { max-width: 300px; display: grid; gap: 6px; color: #667085; font-size: 9px; font-weight: 800; }
.accounting-filter-bar select { height: 40px; padding: 0 10px; border: 1px solid #d7dee8; border-radius: 8px; background: #fff; }
.receipt-voucher-header { display: grid; grid-template-columns: repeat(3, minmax(170px, 240px)) auto; gap: 12px; align-items: end; }
.receipt-voucher-header label { max-width: none; }
.receipt-voucher-header input { height: 40px; padding: 0 10px; border: 1px solid #d7dee8; border-radius: 8px; background: #fff; }
.receipt-voucher-header input[readonly] { color: #1f4f8f; background: #f0f6ff; font-weight: 900; }
.receipt-voucher-header .secondary-button { height: 40px; }
.batch-receipt-form table { min-width: 920px; }
.batch-check-column { width: 44px; text-align: center; }
.batch-check-column input { width: 17px; height: 17px; accent-color: var(--primary); }
.batch-receipt-form tr.is-selected { background: #f0f7ff; }
.batch-receipt-amount { width: 130px; min-height: 36px; padding: 0 9px; border: 1px solid #d6dee9; border-radius: 7px; background: #fff; }
.batch-receipt-amount:disabled { color: #98a2b3; background: #f2f4f7; }
.batch-receipt-message { padding: 10px 18px 0; color: #667085; font-size: 9px; font-weight: 700; }
.batch-receipt-message.error { color: #c52d42; }
.batch-receipt-footer { margin-top: 10px; padding: 16px 18px; display: grid; grid-template-columns: minmax(170px, .6fr) minmax(390px, 1.5fr) minmax(170px, .7fr) auto; gap: 12px; align-items: end; border-top: 1px solid #e8edf3; background: #f9fbfd; }
.batch-receipt-footer label { display: grid; gap: 6px; color: #667085; font-size: 9px; font-weight: 800; }
.batch-receipt-footer select,.batch-receipt-footer input { height: 40px; padding: 0 10px; border: 1px solid #d6dee9; border-radius: 8px; background: #fff; }
.batch-receipt-footer .primary-button { height: 40px; padding: 0 16px; white-space: nowrap; }
.batch-receipt-total { display: grid; grid-template-columns: auto 1fr; gap: 5px 10px; align-items: center; }
.batch-receipt-total span { color: #7d899a; font-size: 8px; font-weight: 800; text-transform: uppercase; }
.batch-receipt-total strong { color: var(--navy); font-size: 12px; text-align: right; }
.batch-receipt-total strong.allocation-error { color: #c52d42; }
.batch-account-allocations { display: grid; gap: 7px; }
.batch-account-heading,.batch-account-row { display: grid; grid-template-columns: minmax(190px, 1fr) 125px 32px; gap: 7px; align-items: center; }
.batch-account-heading { padding: 0 1px; color: #667085; font-size: 9px; font-weight: 800; }
.batch-account-heading span:last-child { grid-column: 2; }
.batch-account-row select,.batch-account-row input { width: 100%; height: 40px; padding: 0 10px; border: 1px solid #d6dee9; border-radius: 8px; background: #fff; }
.batch-account-remove { width: 32px; height: 32px; border: 0; border-radius: 8px; color: #b42338; background: #feecef; font-size: 18px; cursor: pointer; }
.batch-account-remove:disabled { opacity: .35; cursor: default; }
.batch-account-add { justify-self: start; height: 34px; padding: 0 12px; }
.on-account-panel { margin-top: 4px; padding: 12px; display: grid; grid-template-columns: minmax(230px, 1fr) minmax(160px, .65fr); gap: 10px; border: 1px solid #dbe5f0; border-radius: 10px; background: #f5f9ff; }
.on-account-panel label { display: grid; gap: 6px; color: #667085; font-size: 9px; font-weight: 800; }
.on-account-panel select { width: 100%; height: 40px; padding: 0 10px; border: 1px solid #cfdbea; border-radius: 8px; background: #fff; }
.on-account-status { padding: 8px 10px; display: grid; grid-template-columns: auto 1fr; gap: 3px 8px; align-items: center; border-radius: 8px; color: #475467; background: #eef2f6; }
.on-account-status span { font-size: 8px; font-weight: 900; text-transform: uppercase; }
.on-account-status strong { text-align: right; color: var(--navy); font-size: 13px; }
.on-account-status small { grid-column: 1 / -1; font-size: 8px; }
.on-account-status.deposit { color: #156f42; background: #e7f7ee; }
.on-account-status.deposit strong { color: #156f42; }
.on-account-status.usage { color: #9a5b00; background: #fff3dc; }
.on-account-status.usage strong { color: #9a5b00; }
.receipt-register-filters { grid-template-columns: repeat(4, minmax(150px, 1fr)) auto; }
.receipt-register-table { min-width: 1350px; }
.receipt-register-summary { margin-top: 16px; }
.voucher-register-filters { grid-template-columns: repeat(4, minmax(150px, 1fr)) auto; }
.voucher-register-table { min-width: 1280px; }
.voucher-register-summary { margin-top: 16px; }
.row-actions.voucher-register-actions { width: 112px; min-width: 112px; max-width: 112px; white-space: nowrap; }
.on-account-register { display: inline-flex; padding: 5px 8px; border-radius: 999px; font-size: 8px; font-weight: 900; white-space: nowrap; }
.on-account-register.deposit { color: #156f42; background: #e7f7ee; }
.on-account-register.usage { color: #9a5b00; background: #fff3dc; }
.receipt-edit-card { max-width: 850px; }
.receipt-edit-form { padding: 18px; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; }
.receipt-edit-form label { display: grid; gap: 7px; color: #667085; font-size: 9px; font-weight: 800; }
.receipt-edit-form input,.receipt-edit-form textarea { width: 100%; padding: 10px 12px; border: 1px solid #d6dee9; border-radius: 8px; background: #fff; font: inherit; }
.receipt-edit-form input { height: 42px; }
.receipt-edit-narration,.receipt-edit-note,.receipt-edit-form .form-actions,.receipt-edit-form > .field-error { grid-column: 1 / -1; }
.receipt-edit-note { padding: 12px 14px; border: 1px solid #f1d79f; border-radius: 9px; color: #805200; background: #fff8e8; font-size: 9px; line-height: 1.5; }
.receipt-edit-form .form-actions { display: flex; justify-content: flex-end; gap: 10px; }
.receipt-edit-header { grid-template-columns: repeat(3, minmax(170px, 240px)); padding-bottom: 14px; }
.receipt-edit-fields { display: grid; gap: 9px; }
.receipt-edit-fields label { display: grid; gap: 6px; color: #667085; font-size: 9px; font-weight: 800; }
.receipt-edit-fields input,.receipt-edit-fields textarea { width: 100%; padding: 9px 10px; border: 1px solid #d6dee9; border-radius: 8px; background: #fff; font: inherit; }
.accounting-recent-card { margin-top: 18px; }
.accounting-report-card { margin-bottom: 16px; }
.accounting-report-filters { padding: 18px; display: grid; grid-template-columns: repeat(5, minmax(130px, 1fr)) auto; gap: 12px; align-items: end; }
.accounting-report-filters.compact { grid-template-columns: repeat(3, minmax(170px, 240px)) auto; }
.accounting-report-filters label { display: grid; gap: 6px; color: #667085; font-size: 9px; font-weight: 800; }
.accounting-report-filters input,.accounting-report-filters select { height: 40px; padding: 0 10px; border: 1px solid #d6dee9; border-radius: 8px; background: #fff; }
.accounting-report-filters .primary-button { height: 40px; padding: 0 16px; }
.ledger-report-filters { grid-template-columns: minmax(310px, 1.25fr) minmax(170px, .7fr) minmax(290px, 1.15fr) auto; }
.ledger-report-filters.single-branch { grid-template-columns: minmax(310px, 1fr) minmax(290px, 1fr) auto; }
.ledger-date-range-fields { height: 40px; display: grid; grid-template-columns: minmax(125px, 1fr) auto minmax(125px, 1fr); align-items: center; overflow: hidden; border: 1px solid #d6dee9; border-radius: 8px; background: #fff; }
.accounting-report-filters .ledger-date-range-fields input { width: 100%; height: 38px; min-width: 0; padding: 0 10px; border: 0; border-radius: 0; }
.ledger-date-range-fields i { color: #8a94a4; font-size: 9px; font-style: normal; font-weight: 800; text-transform: uppercase; }
.ledger-master-filter .selectize-control { min-width: 0; height: 40px; }
.ledger-master-filter .selectize-input,
.ledger-master-filter .selectize-input.dropdown-active { width: 100%; height: 40px !important; min-height: 40px; padding: 8px 32px 8px 10px; display: flex !important; align-items: center; overflow: hidden; border: 1px solid #d9dee7; border-radius: 7px !important; color: var(--navy); background: #fff !important; background-image: none !important; box-shadow: none; white-space: nowrap; }
.ledger-master-filter .selectize-input.focus,
.ledger-master-filter .selectize-input.input-active { border-color: #69a2f8; box-shadow: 0 0 0 3px rgba(38,114,232,.1); }
.ledger-master-filter .selectize-input > input { height: 22px !important; min-width: 2px; padding: 0 !important; border: 0 !important; }
.ledger-master-filter .selectize-input > input::placeholder { color: #98a2b3; font-weight: 400; opacity: 1; }
.ledger-master-filter .selectize-control.single .selectize-input::after { width: 7px; height: 7px; right: 12px; margin-top: -5px; border: solid #667085; border-width: 0 2px 2px 0; transform: rotate(45deg); }
.ledger-master-filter .selectize-control.single .selectize-input.dropdown-active::after { margin-top: -1px; border: solid #667085; border-width: 0 2px 2px 0; transform: rotate(225deg); }
.ledger-master-filter .selectize-input.has-items.input-active > .ledger-selected-item { display: none; }
.ledger-selected-item { max-width: calc(100% - 105px); display: inline-flex; align-items: center; gap: 10px; overflow: hidden; }
.ledger-selected-item span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ledger-master-filter .selectize-input > .item-selectize-infotype { margin: 0 !important; position: absolute; top: 50%; right: 34px; z-index: 2; color: #e84a42; font-size: 9px; font-weight: 800; line-height: 1; transform: translateY(-50%); }
.ledger-master-filter .selectize-input > .item-selectize-infotype.Party { color: #218a2b; }
.ledger-master-filter .selectize-input > .item-selectize-infotype.All { display: none; }
.ledger-selectize-dropdown { z-index: 20000; margin-top: 0; padding: 0; overflow: hidden; border: 1px solid #aeb8c5; border-radius: 0; color: #343b46; background: #fff; box-shadow: 0 8px 18px rgba(16,24,40,.16); font-size: 14px; }
.ledger-selectize-dropdown .selectize-dropdown-content { max-height: 285px; padding: 0; }
.ledger-selectize-option {
    padding: 3px .75rem;
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 14px;
}
.ledger-selectize-option span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ledger-selectize-type { flex: 0 0 auto; margin-left: auto; color: #f04438; font-size: 14px; font-style: normal; font-weight: 500; }
.ledger-selectize-type.party { color: #218a2b; }
.ledger-selectize-dropdown .option { min-height: 44px; padding: 8px 20px; position: relative; display: flex; align-items: center; border-radius: 0; color: #343b46; background: #fff; font-size: 14px; font-weight: 400; line-height: 1.25; }
.ledger-selectize-dropdown .option.active:not(.selected) { color: #17233a; background: #edf2f8; }
.ledger-selectize-dropdown .option.selected,
.ledger-selectize-dropdown .option.selected.active { color: #17233a; background: #5792ed; font-weight: 400; }
.ledger-selectize-dropdown .option.selected::after { content: none; }
.ledger-report-filters.is-loading { opacity: .82; }
.ledger-report-filters button[disabled] { cursor: wait; opacity: .68; }
.ledger-report-actions { display: flex; align-items: center; gap: 8px; }
.ledger-report-actions .primary-button { white-space: nowrap; }
.ledger-export-button { height: 40px; padding: 0 13px; border-radius: 8px; font-size: 9px; font-weight: 900; cursor: pointer; }
.ledger-export-button.excel { color: #16803b; border-color: #b9dfc5; background: #f0fbf3; }
.ledger-export-button.pdf { color: #cf3048; border-color: #f0bbc4; background: #fff2f4; }
.ledger-export-button:disabled { cursor: not-allowed; filter: grayscale(.45); opacity: .45; }
.ledger-results-message { margin: 0 0 16px; padding: 18px 20px; display: flex; align-items: center; gap: 10px; border: 1px solid #dce4ee; border-radius: 12px; color: #475467; background: #fff; font-size: 10px; font-weight: 800; }
.ledger-results-message.error { color: #a33a46; border-color: #f2cbd0; background: #fff5f6; }
.ledger-results-message.loading span { width: 16px; height: 16px; border: 2px solid #cfdaea; border-top-color: #2672e8; border-radius: 50%; animation: ledger-loading-spin .7s linear infinite; }
@keyframes ledger-loading-spin { to { transform: rotate(360deg); } }
.finance-summary-grid { margin: 0 0 16px; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; }
.finance-summary-grid article { padding: 16px 18px; border: 1px solid #e0e6ee; border-radius: 12px; background: #fff; }
.finance-summary-grid span { display: block; color: #8a94a4; font-size: 9px; font-weight: 800; text-transform: uppercase; }
.finance-summary-grid strong { margin-top: 7px; display: block; color: var(--navy); font-size: 16px; }
.statement-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; }
.statement-lines { padding: 5px 20px 20px; }
.statement-lines > div { padding: 11px 0; display: flex; justify-content: space-between; gap: 20px; border-bottom: 1px solid #eef1f5; color: #475467; font-size: 10px; }
.statement-lines > div strong { color: #253247; }
.statement-lines .statement-total { margin-top: 8px; padding: 14px 0 4px; border-top: 2px solid #cdd6e3; border-bottom: 0; color: var(--navy); font-weight: 900; }
.profit-result,.balance-check { margin-top: 16px; padding: 18px 22px; display: flex; justify-content: space-between; border-radius: 12px; font-weight: 900; }
.profit-result.profit,.balance-check.balanced { color: #147b43; background: #e8f8ee; border: 1px solid #c8ecd7; }
.profit-result.loss,.balance-check.unbalanced { color: #ad2b3e; background: #fff0f2; border: 1px solid #ffd0d7; }
.profit-result strong,.balance-check strong { font-size: 18px; }
@media (max-width: 1050px) { .accounting-master-grid { grid-template-columns: 1fr; } .accounting-report-filters,.receipt-register-filters,.voucher-register-filters { grid-template-columns: repeat(3, minmax(0, 1fr)); } .ledger-report-filters,.ledger-report-filters.single-branch { grid-template-columns: repeat(2, minmax(0, 1fr)); } .batch-receipt-footer { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 700px) { .account-branch-access > div,.finance-summary-grid,.statement-grid,.receipt-voucher-header,.batch-receipt-footer,.on-account-panel,.receipt-edit-form { grid-template-columns: 1fr; } .accounting-report-filters,.accounting-report-filters.compact,.receipt-register-filters,.voucher-register-filters { grid-template-columns: 1fr; } .batch-account-heading,.batch-account-row { grid-template-columns: minmax(150px, 1fr) 100px 32px; } .receipt-edit-narration,.receipt-edit-note,.receipt-edit-form .form-actions,.receipt-edit-form > .field-error { grid-column: auto; } }

/* Booking Register lifecycle filter. */
.booking-register-card {
  overflow: visible;
}

.register-lifecycle-filter {
  position: relative;
  z-index: 14;
}

.register-lifecycle-filter > summary {
  min-width: 138px;
  height: 30px;
  padding: 0 9px;
  display: flex;
  align-items: center;
  gap: 7px;
  border: 1px solid #d9dee7;
  border-radius: 7px;
  color: #52637d;
  background: #fff;
  cursor: pointer;
  font-size: 9px;
  font-weight: 700;
  list-style: none;
  white-space: nowrap;
}

.register-lifecycle-filter > summary::-webkit-details-marker {
  display: none;
}

.register-lifecycle-filter > summary svg {
  width: 15px;
  height: 15px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.6;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.register-lifecycle-filter > summary span {
  max-width: 180px;
  overflow: hidden;
  text-overflow: ellipsis;
}

.register-lifecycle-filter > summary b {
  margin-left: auto;
  transition: transform .18s ease;
}

.register-lifecycle-filter[open] > summary {
  border-color: #ef2948;
  color: #d91f3f;
  background: #fff6f8;
}

.register-lifecycle-filter[open] > summary b {
  transform: rotate(180deg);
}

.register-lifecycle-panel {
  position: absolute;
  top: calc(100% + 6px);
  right: 0;
  width: 245px;
  padding: 12px;
  border: 1px solid #e1e6ed;
  border-radius: 10px;
  color: #344054;
  background: #fff;
  box-shadow: 0 14px 35px rgba(16, 24, 40, .16);
}

.lifecycle-panel-heading {
  margin-bottom: 9px;
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 8px;
}

.lifecycle-panel-heading strong {
  font-size: 10px;
}

.lifecycle-panel-heading button {
  padding: 0;
  border: 0;
  color: #d91f3f;
  background: transparent;
  cursor: pointer;
  font-size: 8px;
  font-weight: 700;
}

.lifecycle-panel-help {
  display: block;
  color: #8b95a5;
  font-size: 8px;
  line-height: 1.4;
}

.lifecycle-stage-options {
  margin-top: 10px;
  display: grid;
  gap: 6px;
}

.lifecycle-stage-options label {
  min-height: 34px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  color: #596579;
  font-size: 9px;
  font-weight: 600;
}

.lifecycle-stage-options select {
  width: 116px;
  height: 30px;
  padding: 0 7px;
  border: 1px solid #e4e8ee;
  border-radius: 6px;
  color: #667085;
  background: #fff;
  cursor: pointer;
  font-size: 8px;
  font-weight: 700;
  outline: 0;
}

.lifecycle-stage-options select.active,
.lifecycle-stage-options select:focus {
  border-color: #ffb6c3;
  color: #c81938;
  background: #fff5f7;
}

@media (max-width: 640px) {
  .register-lifecycle-filter {
    width: 100%;
  }

  .register-lifecycle-filter > summary {
    width: 100%;
  }

  .register-lifecycle-panel {
    right: auto;
    left: 0;
    width: min(280px, calc(100vw - 30px));
  }
}

/* Keep all internal form controls consistent with the Booking form. */
.app-shell input:not([type="hidden"]):not([type="checkbox"]):not([type="radio"]):not([type="range"]):not([type="color"]):not([type="button"]):not([type="submit"]):not([type="reset"]),
.app-shell select,
.app-shell textarea,
.app-shell .selectize-input,
.app-shell .field-with-action,
.app-shell .money-field,
.app-shell .money-input,
.app-shell .rate-control-group,
.app-shell .gst-control-group {
  border-color: #355c96;
  border-radius: 7px;
}

.app-shell input:not([type="hidden"]):not([type="checkbox"]):not([type="radio"]):not([type="range"]):not([type="color"]):not([type="button"]):not([type="submit"]):not([type="reset"]):focus,
.app-shell select:focus,
.app-shell textarea:focus,
.app-shell .selectize-input.focus,
.app-shell .selectize-input.input-active,
.app-shell .field-with-action:focus-within,
.app-shell .money-field:focus-within,
.app-shell .money-input:focus-within,
.app-shell .rate-control-group:focus-within,
.app-shell .gst-control-group:focus-within {
  border-color: #4c83cb;
  outline: 0;
  box-shadow: 0 0 0 3px rgba(20, 98, 207, .09);
}

.app-shell .selectize-input > input:focus,
.app-shell .field-with-action > input:focus,
.app-shell .money-field > input:focus,
.app-shell .money-input > input:focus,
.app-shell .rate-control-group input:focus,
.app-shell .gst-control-group input:focus,
.app-shell .global-search input:focus,
.app-shell .ledger-date-range-fields input:focus {
  box-shadow: none;
}