/* [project]/app/globals.css [app-client] (css) */
:root {
  --ink: #334342;
  --ink-2: #586967;
  --pink: #efacbb;
  --pink-strong: #db8095;
  --pink-soft: #fdf0f3;
  --canvas: #f7f8f7;
  --line: #e6ebea;
  --white: #fff;
  --mint: #cce9df;
  --lilac: #e7defa;
  --amber: #f9e4b9;
  --shadow: 0 12px 35px #283b390f;
  --page-gutter: 24px;
}

* {
  box-sizing: border-box;
}

html {
  background: var(--canvas);
}

body {
  color: var(--ink);
  background: #faf8fa;
  margin: 0;
  font-family: Plus Jakarta Sans, Segoe UI, Arial, Helvetica, sans-serif;
  font-size: 14px;
}

button, input {
  font: inherit;
}

button {
  cursor: pointer;
}

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

.sr-only {
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  position: absolute;
  overflow: hidden;
}

.admin-shell {
  min-height: 100vh;
  display: flex;
}

.sidebar {
  color: #eff4f3;
  z-index: 5;
  background: radial-gradient(circle at 110% 51%, #f84c9a 0 2%, #0000 19%), radial-gradient(at 69% 94%, #741645 0, #2d1934 34%, #0000 59%), linear-gradient(153deg, #101833 0%, #151c32 47%, #321530 100%);
  flex-direction: column;
  width: 252px;
  min-height: 100vh;
  display: flex;
  position: fixed;
  top: 0;
  left: 0;
  overflow: hidden;
}

.sidebar:before, .sidebar:after {
  content: "";
  pointer-events: none;
  border: 1px solid #ff489f99;
  border-radius: 50%;
  width: 430px;
  height: 280px;
  position: absolute;
  bottom: 13px;
  left: -204px;
  transform: rotate(-23deg);
  box-shadow: 0 -25px 42px #ff1d883d, 0 -62px 0 -30px #ee418d40, 0 -99px 0 -60px #ee418d29;
}

.sidebar:after {
  opacity: .76;
  width: 360px;
  height: 230px;
  bottom: -27px;
  left: -168px;
}

.brand, .sidebar-nav, .sidebar-footer {
  z-index: 1;
  position: relative;
}

.brand {
  letter-spacing: -.2px;
  border-bottom: 1px solid #ffffff1c;
  align-items: center;
  gap: 14px;
  height: 120px;
  padding: 23px 27px;
  font-size: 17px;
  font-weight: 700;
  display: flex;
}

.hopin-mark {
  color: #fff;
  letter-spacing: -1px;
  background: linear-gradient(145deg, #ff78aa, #ec0871);
  border-radius: 17px;
  justify-content: center;
  align-items: center;
  min-width: 64px;
  height: 64px;
  padding: 0 8px;
  font-size: 15px;
  font-weight: 800;
  display: inline-flex;
  box-shadow: 0 10px 20px #ec087140;
}

.brand-copy {
  flex-direction: column;
  gap: 5px;
  line-height: 1.05;
  display: flex;
}

.brand-copy strong {
  color: #fff;
  letter-spacing: -.8px;
  font-size: 23px;
}

.brand-copy small {
  color: #b7bed0;
  font-size: 15px;
  font-weight: 500;
}

.sidebar-nav {
  padding: 19px 15px;
}

.nav-caption {
  color: #9da7bd;
  text-transform: uppercase;
  letter-spacing: 1.2px;
  margin: 0 12px 11px;
  font-size: 10px;
  font-weight: 800;
}

.nav-caption-spaced {
  margin-top: 31px;
}

.nav-link {
  color: #f4f6fb;
  border-radius: 12px;
  align-items: center;
  gap: 14px;
  height: 48px;
  margin: 3px 0;
  padding: 0 14px;
  font-weight: 700;
  transition: all .2s;
  display: flex;
}

.nav-link:hover {
  color: #fff;
  background: #ffffff14;
}

.nav-link.active {
  color: #15152b;
  background: linear-gradient(100deg, #ff9ac4, #f58ab8);
  box-shadow: 0 8px 20px #f35b9f47, inset 0 0 0 1px #ffffff73;
}

.sidebar-footer {
  border-top: 1px solid #ffffff1a;
  margin-top: auto;
  padding: 18px 15px;
}

.admin-mini-card {
  background: #0b0c2352;
  border: 1px solid #ffffff1c;
  border-radius: 13px;
  align-items: center;
  gap: 10px;
  padding: 13px 10px;
  display: flex;
}

.admin-mini-card > div:nth-child(2) {
  flex-direction: column;
  flex: 1;
  gap: 3px;
  min-width: 0;
  display: flex;
}

.admin-mini-card strong {
  color: #fff;
  white-space: nowrap;
  font-size: 12px;
}

.admin-mini-card span {
  color: #a5b4b1;
  font-size: 11px;
}

.admin-mini-card > svg {
  color: #a5b4b1;
}

.avatar {
  border-radius: 50%;
  flex: 0 0 38px;
  justify-content: center;
  align-items: center;
  width: 38px;
  height: 38px;
  font-size: 12px;
  font-weight: 800;
  display: inline-flex;
}

.avatar-pink {
  color: #704753;
  background: #f9ced7;
}

.avatar-mint {
  color: #3c7265;
  background: var(--mint);
}

.avatar-lilac {
  color: #6c5c8d;
  background: var(--lilac);
}

.page-area {
  width: calc(100% - 252px);
  min-width: 0;
  margin-left: 252px;
  position: relative;
}

.topbar {
  z-index: 3;
  -webkit-backdrop-filter: blur(12px);
  backdrop-filter: blur(12px);
  background: #ffffffe6;
  border-bottom: 1px solid #eff0f5;
  justify-content: space-between;
  align-items: center;
  height: 76px;
  padding: 0 33px;
  display: flex;
  position: sticky;
  top: 0;
}

.mobile-brand {
  display: none;
}

.search-box {
  color: #64708a;
  background: #ffffffdb;
  border: 1px solid #f0edf3;
  border-radius: 15px;
  align-items: center;
  gap: 12px;
  width: min(590px, 48vw);
  min-height: 48px;
  padding: 10px 15px;
  font-size: 14px;
  font-weight: 600;
  display: flex;
  box-shadow: 0 5px 14px #2b28470d;
}

.search-box > svg {
  color: #081b40;
}

.search-shortcut {
  align-items: center;
  gap: 3px;
  margin-left: auto;
  display: flex;
}

.search-shortcut kbd {
  color: #4c5870;
  text-align: center;
  background: #f3f1f5;
  border-radius: 5px;
  min-width: 20px;
  padding: 3px 4px;
  font: 700 10px / 1 Segoe UI, sans-serif;
}

.topbar-actions {
  align-items: center;
  gap: 19px;
  display: flex;
}

.profile-menu {
  background: #ffffffeb;
  border: 1px solid #eeeef2;
  border-radius: 17px;
  align-items: center;
  gap: 10px;
  min-height: 50px;
  padding: 5px 12px 5px 6px;
  display: inline-flex;
  box-shadow: 0 4px 12px #2527420a;
}

.profile-menu strong {
  color: #081b40;
  font-size: 14px;
}

.profile-menu-arrow {
  color: #071a3b;
  font-size: 18px;
  line-height: 1;
}

.icon-button {
  color: var(--ink-2);
  background: none;
  border: 0;
  border-radius: 8px;
  justify-content: center;
  align-items: center;
  width: 34px;
  height: 34px;
  display: inline-flex;
}

.icon-button:hover {
  background: var(--pink-soft);
  color: var(--pink-strong);
}

.notification-button {
  position: relative;
}

.notification-button i {
  background: var(--pink-strong);
  border: 1.5px solid #fff;
  border-radius: 50%;
  width: 6px;
  height: 6px;
  position: absolute;
  top: 6px;
  right: 6px;
}

.topbar-avatar {
  box-shadow: 0 0 0 3px #f6eded;
}

.main-content {
  width: 100%;
  max-width: none;
  padding: 0 var(--page-gutter) 52px;
  margin: 0;
}

.page-heading {
  justify-content: space-between;
  align-items: flex-end;
  gap: 20px;
  margin-bottom: 28px;
  padding-top: 28px;
  display: flex;
}

.page-heading h1 {
  letter-spacing: -.8px;
  margin: 3px 0 7px;
  font-size: 29px;
  line-height: 1.15;
}

.eyebrow, .panel-kicker {
  color: var(--pink-strong);
  text-transform: uppercase;
  letter-spacing: 1.1px;
  margin: 0;
  font-size: 10px;
  font-weight: 800;
}

.page-subtitle {
  color: #7b8986;
  margin: 0;
  font-size: 13px;
}

.primary-button, .outline-button, .date-button, .small-button, .chart-select {
  border-radius: 9px;
  justify-content: center;
  align-items: center;
  gap: 8px;
  min-height: 38px;
  padding: 0 14px;
  font-size: 12px;
  font-weight: 700;
  display: inline-flex;
}

.primary-button {
  border: 1px solid var(--pink);
  background: var(--pink);
  color: var(--ink);
  box-shadow: 0 8px 16px #db809533;
}

.primary-button:hover {
  background: #f4bbc7;
  transform: translateY(-1px);
}

.outline-button {
  color: var(--ink);
  background: #fff;
  border: 1px solid #dce4e2;
}

.outline-button:hover {
  border-color: var(--pink);
  background: var(--pink-soft);
}

.full-width {
  width: 100%;
}

.compact-outline {
  min-height: 35px;
}

.text-link {
  color: var(--pink-strong);
  align-items: center;
  gap: 5px;
  font-size: 12px;
  font-weight: 700;
  display: inline-flex;
}

.text-link:hover {
  color: #bf5f78;
}

.plain-button {
  background: none;
  border: 0;
  padding: 0;
}

.home-page .topbar {
  box-shadow: none;
  -webkit-backdrop-filter: none;
  backdrop-filter: none;
  background: none;
  border-bottom: 0;
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
}

.home-page .main-content {
  position: relative;
}

.home-page .search-box {
  background: #ffffffed;
}

.home-hero {
  isolation: isolate;
  min-height: 176px;
  margin: 0 calc(-1 * var(--page-gutter)) 28px;
  background: radial-gradient(at 7% 83%, #ffdeea 0, #0000 39%), linear-gradient(103deg, #fff7fa 3%, #fde4ed 52%, #fffafc 100%);
  border-bottom: 1px solid #f9dfe7;
  align-items: flex-end;
  padding: 21px 37px 23px;
  display: flex;
  position: relative;
  overflow: hidden;
}

.hero-copy {
  z-index: 2;
  padding-left: 0;
  position: relative;
}

.hero-copy h1 {
  color: #081b40;
  letter-spacing: -1.9px;
  margin: 4px 0 6px;
  font-size: clamp(31px, 2.65vw, 41px);
  font-weight: 800;
  line-height: 1.05;
}

.hero-copy h1 span {
  letter-spacing: 0;
  font-size: .72em;
}

.hero-copy > p:last-child {
  color: #66738c;
  margin: 0;
  font-size: 15px;
  font-weight: 600;
}

.city-illustration {
  pointer-events: none;
  z-index: -1;
  width: min(60%, 750px);
  height: 214px;
  position: absolute;
  bottom: -15px;
  right: 10.5%;
}

.hero-car {
  pointer-events: none;
  z-index: 1;
  filter: drop-shadow(0 11px 10px #aa255926);
  width: min(31vw, 420px);
  height: auto;
  position: absolute;
  bottom: 4px;
  right: 16.5%;
}

.hero-button {
  z-index: 2;
  color: #fff;
  background: linear-gradient(135deg, #ff2b8a, #e60066);
  border-color: #ec0871;
  border-radius: 12px;
  min-width: 205px;
  min-height: 48px;
  font-size: 13px;
  position: absolute;
  top: 113px;
  right: 27px;
  transform: none;
  box-shadow: 0 11px 20px #e11b6e3d;
}

.hero-button:hover {
  background: linear-gradient(135deg, #ff4b9b, #ec0871);
}

.eyebrow {
  color: #ec0871;
}

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

.stat-card, .panel {
  background: var(--white);
  border: 1px solid #edf0f3;
  border-radius: 15px;
  box-shadow: 0 9px 25px #221d4712;
}

.stat-card {
  min-height: 137px;
  padding: 16px 18px;
  position: relative;
  overflow: hidden;
}

.stat-card:before {
  content: "";
  background: radial-gradient(at 15% 80%, #fce4ec 0, #0000 68%);
  width: 135px;
  height: 90px;
  position: absolute;
  bottom: -49px;
  left: -20px;
}

.stat-card:after {
  content: "";
  background: radial-gradient(at 20% 80%, #fce4ec 0, #0000 65%);
  border-radius: 50%;
  width: 90px;
  height: 80px;
  position: absolute;
  bottom: -47px;
  right: -43px;
}

.stat-icon {
  z-index: 1;
  color: #121b37;
  border-radius: 14px;
  justify-content: center;
  align-items: center;
  width: 51px;
  height: 51px;
  display: inline-flex;
  position: absolute;
  top: 15px;
  left: 18px;
}

.tone-pink {
  background: #fde0e7;
}

.tone-mint {
  background: #dff3ed;
}

.tone-lilac {
  background: #ede6fa;
}

.tone-amber {
  background: #fdf0cf;
}

.stat-label {
  z-index: 1;
  color: #14203d;
  margin: 3px 0 3px 65px;
  font-size: 14px;
  font-weight: 800;
  position: relative;
}

.stat-value-row {
  z-index: 1;
  align-items: center;
  gap: 9px;
  margin-left: 65px;
  display: flex;
  position: relative;
}

.stat-value-row strong {
  color: #061538;
  letter-spacing: -1.35px;
  font-size: 36px;
  line-height: 1;
}

.stat-detail {
  z-index: 1;
  color: #7d88a0;
  margin: 7px 0 0 65px;
  font-size: 11px;
  position: relative;
}

.trend {
  color: #0bb281;
  background: #e4f9f0;
  border-radius: 8px;
  align-items: center;
  gap: 3px;
  padding: 5px 7px;
  font-size: 11px;
  font-weight: 800;
  display: inline-flex;
}

.trend.down {
  color: #e72b71;
  background: #fee6ef;
  transform: none;
}

.trend.down svg {
  transform: rotate(90deg);
}

.stat-sparkline {
  z-index: 1;
  width: 88px;
  height: 46px;
  position: absolute;
  bottom: 10px;
  right: 10px;
}

.stat-sparkline svg {
  width: 100%;
  height: 100%;
  display: block;
}

.stat-sparkline path {
  fill: none;
  stroke: currentColor;
  stroke-width: 3px;
  stroke-linecap: round;
}

.spark-pink {
  color: #f51c75;
}

.spark-mint {
  color: #00b985;
}

.spark-lilac {
  color: #a648ff;
}

.spark-amber {
  color: #fe9a00;
}

.home-main-grid {
  grid-template-columns: minmax(0, 1.78fr) minmax(390px, 1fr);
  gap: 16px;
  margin-top: 16px;
  display: grid;
}

.lower-grid {
  grid-template-columns: minmax(0, 1.78fr) minmax(390px, 1fr);
}

.panel {
  padding: 24px;
}

.panel-heading {
  justify-content: space-between;
  align-items: flex-start;
  gap: 15px;
  margin-bottom: 20px;
  display: flex;
}

.panel-heading h2 {
  color: #081b40;
  letter-spacing: -.65px;
  margin: 4px 0 0;
  font-size: 20px;
}

.panel-kicker {
  color: #5e6b87;
  letter-spacing: 1px;
  font-size: 10px;
}

.map-panel {
  min-height: 346px;
}

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

.map-link {
  color: #ed1770;
  background: #ffe6ef;
  border-radius: 8px;
  align-items: center;
  gap: 5px;
  padding: 8px 11px;
  font-size: 10px;
  font-weight: 800;
  display: inline-flex;
}

.map-placeholder {
  isolation: isolate;
  background: linear-gradient(115deg, #ecf2ee, #e1eef0 68%, #cce7ef);
  border-radius: 11px;
  min-height: 260px;
  position: relative;
  overflow: hidden;
}

.map-placeholder:after {
  content: "";
  opacity: .45;
  pointer-events: none;
  background-image: radial-gradient(circle at 12% 21%, #45a9672e 0 1px, #0000 1.7px), radial-gradient(circle at 28% 68%, #45a96724 0 1px, #0000 1.6px), radial-gradient(circle at 72% 31%, #45a96726 0 1px, #0000 1.6px);
  background-size: 9px 9px, 8px 8px, 10px 10px;
  position: absolute;
  inset: 0;
}

.map-grid-lines {
  opacity: .75;
  background-image: linear-gradient(30deg, #0000 47%, #c8d7d3 48% 51%, #0000 52%), linear-gradient(125deg, #0000 47%, #c6d8d7 48% 52%, #0000 53%), linear-gradient(90deg, #0000 49%, #d6e1de 50%, #0000 51%);
  background-size: 79px 63px, 106px 73px, 60px 60px;
  position: absolute;
  inset: 0;
}

.map-road {
  z-index: -1;
  background: #fffefd;
  border: 1px solid #dce8e4;
  border-radius: 30px;
  position: absolute;
  box-shadow: 0 0 0 2px #ffffff80;
}

.road-one {
  width: 115%;
  height: 16px;
  top: 53%;
  left: -6%;
  transform: rotate(-11deg);
}

.road-two {
  width: 95%;
  height: 13px;
  top: 31%;
  left: 9%;
  transform: rotate(26deg);
}

.road-three {
  width: 14px;
  height: 120%;
  top: -15%;
  left: 54%;
  transform: rotate(13deg);
}

.map-label {
  z-index: 2;
  color: #7e8b98;
  font-size: 11px;
  font-weight: 700;
  position: absolute;
}

.label-amsterdam {
  color: #1d2943;
  font-size: 16px;
  top: 62%;
  left: 47%;
}

.label-de-pijp {
  top: 78%;
  left: 42%;
}

.label-noord {
  top: 14%;
  right: 30%;
}

.map-pin {
  z-index: 3;
  color: #111d39;
  border-radius: 50% 50% 50% 4px;
  justify-content: center;
  align-items: center;
  width: 31px;
  height: 31px;
  display: flex;
  position: absolute;
  transform: rotate(-45deg);
  box-shadow: 0 5px 11px #2e413f26;
}

.map-pin:before {
  content: "";
  z-index: -1;
  background: inherit;
  opacity: .18;
  border-radius: 50%;
  position: absolute;
  inset: -10px;
}

.map-pin svg {
  transform: rotate(45deg);
}

.pin-pink {
  background: #ff5c9d;
  top: 44%;
  left: 31%;
}

.pin-mint {
  background: #57d7af;
  top: 62%;
  right: 22%;
}

.pin-dark {
  color: #fff;
  background: #11284d;
  top: 22%;
  right: 35%;
}

.map-location {
  z-index: 3;
  color: #1c2946;
  background: #fff;
  border-radius: 20px;
  padding: 8px 12px;
  font-size: 11px;
  font-weight: 700;
  position: absolute;
  top: 37%;
  left: 44%;
  box-shadow: 0 5px 15px #2d3d5021;
}

.map-location i {
  border: 2px solid #1a2a48;
  border-radius: 50%;
  width: 8px;
  height: 8px;
  margin: 0 6px 0 0;
  display: inline-block;
}

.map-controls {
  z-index: 4;
  flex-direction: column;
  gap: 5px;
  display: flex;
  position: absolute;
  top: 15px;
  right: 15px;
}

.map-controls button {
  color: #1b2946;
  background: #fff;
  border: 1px solid #edf0f2;
  border-radius: 8px;
  place-items: center;
  width: 34px;
  height: 34px;
  font-size: 21px;
  line-height: 1;
  display: grid;
  box-shadow: 0 3px 9px #2c3c4b1f;
}

.map-controls button:last-child {
  margin-top: 6px;
  font-size: 16px;
}

.map-summary {
  z-index: 3;
  background: #fff;
  border-radius: 8px;
  flex-direction: column;
  padding: 9px 13px 9px 39px;
  display: flex;
  position: absolute;
  top: 17px;
  left: 17px;
  box-shadow: 0 4px 13px #253f3a17;
}

.map-summary:before {
  content: "▰";
  color: #0e1833;
  background: #ffe0ed;
  border-radius: 7px;
  place-items: center;
  width: 24px;
  height: 24px;
  font-size: 13px;
  display: grid;
  position: absolute;
  top: 11px;
  left: 8px;
}

.map-summary strong {
  color: #0b1734;
  font-size: 20px;
}

.map-summary span {
  color: #71809a;
  font-size: 10px;
}

.map-legend {
  z-index: 3;
  color: #46546e;
  background: #fffffff2;
  border-radius: 6px;
  gap: 10px;
  padding: 8px 10px;
  font-size: 10px;
  display: flex;
  position: absolute;
  bottom: 12px;
  right: 13px;
}

.legend-dot {
  border-radius: 50%;
  width: 8px;
  height: 8px;
  margin-right: 4px;
  display: inline-block;
}

.legend-dot.pink {
  background: #ff5c9d;
}

.legend-dot.mint {
  background: #00bd8b;
}

.schedule-list {
  margin: 0 0 16px;
}

.schedule-item {
  grid-template-columns: 41px 13px minmax(0, 1fr);
  gap: 9px;
  min-height: 84px;
  display: grid;
}

.schedule-item time {
  color: #6e7f7c;
  padding-top: 3px;
  font-size: 11px;
}

.schedule-line {
  border-left: 1px dashed #d7dfdd;
  position: relative;
}

.schedule-line i {
  background: var(--pink);
  width: 9px;
  height: 9px;
  box-shadow: 0 0 0 1px var(--pink);
  border: 2px solid #fff;
  border-radius: 50%;
  position: absolute;
  top: 4px;
  left: -5px;
}

.schedule-line i.urgent-dot {
  background: #ed7777;
  box-shadow: 0 0 0 1px #ed7777;
}

.schedule-title {
  flex-wrap: wrap;
  align-items: center;
  gap: 6px;
  display: flex;
}

.schedule-title strong {
  font-size: 12px;
}

.schedule-info p {
  color: #6f807d;
  white-space: nowrap;
  text-overflow: ellipsis;
  margin: 4px 0;
  font-size: 11px;
  overflow: hidden;
}

.ride-kind {
  color: #7c5b69;
  background: #fde8ed;
  border-radius: 5px;
  padding: 0 6px;
  font-size: 9px;
  font-weight: 700;
  line-height: 18px;
}

.ride-kind.scheduled {
  color: #6b6388;
  background: #eeeafa;
}

.unassigned, .assigned {
  font-size: 10px;
  font-weight: 700;
}

.unassigned {
  color: #d16b72;
}

.assigned {
  color: #699087;
}

.activity-list {
  flex-direction: column;
  display: flex;
}

.activity-item {
  border-bottom: 1px solid #edf1ef;
  grid-template-columns: 37px 1fr auto;
  align-items: center;
  gap: 11px;
  padding: 13px 0;
  display: grid;
}

.activity-item:last-child {
  border-bottom: 0;
}

.activity-icon {
  border-radius: 10px;
  flex: 0 0 35px;
  justify-content: center;
  align-items: center;
  width: 35px;
  height: 35px;
  display: inline-flex;
}

.activity-item strong {
  font-size: 12px;
}

.activity-item p {
  color: #7c8b88;
  margin: 4px 0 0;
  font-size: 11px;
}

.activity-item time {
  color: #99a6a3;
  white-space: nowrap;
  align-self: start;
  font-size: 10px;
}

.verification-people {
  flex-direction: column;
  gap: 16px;
  margin: 3px 0 20px;
  display: flex;
}

.verification-people > div {
  grid-template-columns: 36px 1fr auto;
  align-items: center;
  gap: 9px;
  display: grid;
}

.verification-people span {
  flex-direction: column;
  gap: 4px;
  min-width: 0;
  display: flex;
}

.verification-people strong {
  font-size: 12px;
}

.verification-people small {
  color: #85938f;
  font-size: 10px;
}

.small-button {
  min-height: 30px;
  color: var(--pink-strong);
  background: var(--pink-soft);
  border: 1px solid #f9d7df;
  padding: 0 10px;
  font-size: 11px;
}

.small-button:hover {
  background: #f9d6df;
}

.recent-rides-panel {
  margin-top: 19px;
}

.simple-table table {
  border-collapse: collapse;
  width: 100%;
}

.simple-table th {
  color: #96a39f;
  text-align: left;
  text-transform: uppercase;
  letter-spacing: .5px;
  padding: 0 11px 12px;
  font-size: 10px;
  font-weight: 700;
}

.simple-table td {
  border-top: 1px solid #edf0ef;
  padding: 15px 11px;
  font-size: 12px;
}

.simple-table th:first-child, .simple-table td:first-child {
  padding-left: 0;
}

.simple-table th:last-child, .simple-table td:last-child {
  padding-right: 0;
}

.ride-id {
  color: #566663;
  font-weight: 800;
}

.route-cell {
  color: #6d7c79;
  white-space: nowrap;
  text-overflow: ellipsis;
  max-width: 200px;
  overflow: hidden;
}

.fare-cell {
  font-weight: 700;
}

.muted-cell {
  color: #8b9996;
}

.status-badge {
  white-space: nowrap;
  text-transform: capitalize;
  border-radius: 6px;
  align-items: center;
  padding: 4px 7px;
  font-size: 10px;
  font-weight: 700;
  display: inline-flex;
}

.status-completed {
  color: #3c8b76;
  background: #e9f6f0;
}

.status-in-progress {
  color: #657eb8;
  background: #e9effe;
}

.status-requested {
  color: #a98145;
  background: #fff2d9;
}

.status-cancelled {
  color: #bf6879;
  background: #fde9ed;
}

.mobile-ride-cards {
  display: none;
}

.date-button {
  color: var(--ink);
  background: #fff;
  border: 1px solid #dfe6e4;
  min-width: 200px;
}

.date-button span, .chart-select span {
  color: #94a19e;
  margin-left: 6px;
}

.dashboard-tabs {
  background: #ecefed;
  border-radius: 9px;
  gap: 5px;
  width: fit-content;
  margin: -7px 0 20px;
  padding: 4px;
  display: flex;
}

.filter-tab {
  color: #72817e;
  background: none;
  border: 0;
  border-radius: 6px;
  padding: 8px 13px;
  font-size: 11px;
  font-weight: 700;
}

.filter-tab.active {
  color: var(--ink);
  background: #fff;
  box-shadow: 0 2px 5px #2b413d14;
}

.dashboard-card-grid .stat-card {
  min-height: 158px;
}

.charts-grid {
  grid-template-columns: minmax(0, 1.48fr) minmax(320px, .9fr);
  gap: 19px;
  margin-top: 19px;
  display: grid;
}

.chart-panel {
  min-height: 350px;
}

.chart-select {
  color: #6f7f7c;
  background: #fff;
  border: 1px solid #e2e8e6;
  min-height: 32px;
  padding: 0 9px;
  font-size: 10px;
}

.chart-summary {
  align-items: center;
  gap: 8px;
  margin: 4px 0 9px;
  display: flex;
}

.chart-summary strong {
  letter-spacing: -.5px;
  font-size: 24px;
}

.chart-summary small {
  color: #9ba7a5;
  font-size: 10px;
}

.line-chart {
  height: 205px;
  position: relative;
}

.line-chart svg {
  z-index: 1;
  width: 100%;
  height: 178px;
  position: absolute;
  bottom: 18px;
  left: 0;
}

.chart-guide {
  border-top: 1px dashed #e6ecea;
  position: absolute;
  left: 0;
  right: 0;
}

.guide-one {
  top: 31px;
}

.guide-two {
  top: 88px;
}

.guide-three {
  top: 145px;
}

.chart-axis {
  color: #9aa6a4;
  justify-content: space-between;
  font-size: 10px;
  display: flex;
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
}

.donut-wrap {
  align-items: center;
  gap: 27px;
  min-height: 202px;
  padding: 5px 6px 0;
  display: flex;
}

.donut-chart {
  background: conic-gradient(#df8197 0 85.5%, #99b7ae 85.5% 92.2%, #f3d18a 92.2% 97.2%, #bfc9e6 97.2% 100%);
  border-radius: 50%;
  flex: 0 0 154px;
  place-items: center;
  width: 154px;
  height: 154px;
  display: grid;
  position: relative;
}

.donut-chart:before {
  content: "";
  background: #fff;
  border-radius: 50%;
  position: absolute;
  inset: 18px;
}

.donut-chart > div {
  z-index: 1;
  text-align: center;
  flex-direction: column;
  display: flex;
}

.donut-chart strong {
  font-size: 21px;
}

.donut-chart span {
  color: #8b9895;
  margin-top: 2px;
  font-size: 10px;
}

.status-key {
  flex: 1;
}

.status-key p {
  color: #71817e;
  grid-template-columns: 12px 1fr auto;
  gap: 5px;
  margin: 10px 0;
  font-size: 11px;
  display: grid;
}

.status-key strong {
  color: var(--ink);
}

.key-dot {
  border-radius: 50%;
  width: 7px;
  height: 7px;
  margin-top: 4px;
  display: inline-block;
}

.key-dot.complete {
  background: #df8197;
}

.key-dot.active {
  background: #99b7ae;
}

.key-dot.cancel {
  background: #f3d18a;
}

.key-dot.requested {
  background: #bfc9e6;
}

.status-footnote {
  color: #758480;
  border-top: 1px solid #edf1ef;
  align-items: center;
  gap: 6px;
  padding-top: 15px;
  font-size: 11px;
  display: flex;
}

.status-footnote svg {
  color: #4d9984;
}

.status-footnote strong {
  color: var(--ink);
}

.second-charts-grid {
  grid-template-columns: minmax(0, 1.1fr) minmax(320px, 1fr);
}

.bar-panel, .operational-panel {
  min-height: 266px;
}

.bar-chart {
  justify-content: space-around;
  gap: 12px;
  height: 166px;
  padding: 7px 5px 0;
  display: flex;
}

.bar-item {
  flex-direction: column;
  flex: 1;
  justify-content: flex-end;
  align-items: center;
  gap: 7px;
  height: 100%;
  display: flex;
}

.bar-rail {
  background: #f7e9ed;
  border-radius: 6px 6px 2px 2px;
  align-items: flex-end;
  width: 100%;
  max-width: 31px;
  height: 130px;
  display: flex;
}

.bar-rail i {
  background: var(--pink);
  border-radius: 6px 6px 2px 2px;
  width: 100%;
  display: block;
}

.bar-item:nth-child(6) .bar-rail i {
  background: var(--pink-strong);
}

.bar-item span {
  color: #96a39f;
  font-size: 9px;
}

.operational-panel {
  flex-direction: column;
  display: flex;
}

.live-indicator {
  color: #438a76;
  align-items: center;
  gap: 5px;
  font-size: 10px;
  font-weight: 700;
  display: inline-flex;
}

.live-indicator i {
  background: #63b69d;
  border-radius: 50%;
  width: 6px;
  height: 6px;
  box-shadow: 0 0 0 4px #eff9f5;
}

.live-metrics {
  grid-template-columns: repeat(3, 1fr);
  gap: 0;
  margin: 15px 0 0;
  display: grid;
}

.live-metrics > div {
  border-right: 1px solid #edf0ef;
  flex-direction: column;
  gap: 5px;
  padding: 0 14px;
  display: flex;
}

.live-metrics > div:first-child {
  padding-left: 0;
}

.live-metrics > div:last-child {
  border: 0;
}

.live-metrics span {
  color: #7d8b88;
  font-size: 10px;
}

.live-metrics strong {
  letter-spacing: -.4px;
  font-size: 21px;
}

.live-metrics small {
  color: #9ca8a5;
  font-size: 9px;
}

.live-metrics small.positive {
  color: #47937d;
}

.all-rides-panel {
  margin-top: 19px;
}

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

.rides-table {
  border-collapse: collapse;
  width: 100%;
  min-width: 820px;
}

.rides-table th {
  color: #95a29f;
  text-align: left;
  text-transform: uppercase;
  letter-spacing: .55px;
  padding: 0 10px 11px;
  font-size: 10px;
}

.rides-table td {
  border-top: 1px solid #edf0ef;
  padding: 14px 10px;
  font-size: 12px;
}

.rides-table th:first-child, .rides-table td:first-child {
  padding-left: 0;
}

.rides-table th:last-child, .rides-table td:last-child {
  padding-right: 0;
}

.table-action {
  color: #889794;
  background: none;
  border: 0;
  border-radius: 6px;
  width: 27px;
  height: 27px;
}

.table-action:hover {
  background: var(--pink-soft);
}

.profile-hero {
  padding: 0;
  overflow: hidden;
}

.profile-cover {
  background: linear-gradient(120deg, #f5bac6, #efacbb 55%, #e69cb0);
  height: 118px;
  position: relative;
  overflow: hidden;
}

.cover-orb {
  border: 1px solid #ffffff3b;
  border-radius: 50%;
  width: 185px;
  height: 185px;
  position: absolute;
}

.cover-one {
  top: -110px;
  right: 11%;
}

.cover-two {
  width: 220px;
  height: 220px;
  top: 38px;
  left: 49%;
}

.profile-summary {
  align-items: center;
  gap: 18px;
  min-height: 150px;
  padding: 0 28px 23px;
  display: flex;
  position: relative;
}

.profile-avatar-wrap {
  margin-top: -52px;
  position: relative;
}

.profile-avatar {
  color: #734955;
  letter-spacing: -1px;
  background: #f9cdd7;
  border: 5px solid #fff;
  border-radius: 50%;
  place-items: center;
  width: 105px;
  height: 105px;
  font-size: 31px;
  font-weight: 800;
  display: grid;
  box-shadow: 0 5px 15px #4a32371f;
}

.camera-button {
  background: var(--ink);
  color: #fff;
  border: 3px solid #fff;
  border-radius: 50%;
  place-items: center;
  width: 32px;
  height: 32px;
  display: grid;
  position: absolute;
  bottom: 0;
  right: 0;
}

.profile-identity {
  flex: 1;
  padding-top: 17px;
}

.profile-identity > div {
  align-items: center;
  gap: 9px;
  display: flex;
}

.profile-identity h2 {
  letter-spacing: -.45px;
  margin: 0;
  font-size: 21px;
}

.verified-dot {
  vertical-align: 2px;
  color: #fff;
  background: #69ab9a;
  border-radius: 50%;
  place-items: center;
  width: 15px;
  height: 15px;
  font-size: 9px;
  display: inline-grid;
}

.role-badge {
  background: var(--pink-soft);
  color: #bd687c;
  border-radius: 5px;
  padding: 4px 7px;
  font-size: 10px;
  font-weight: 800;
}

.profile-identity p {
  color: #657673;
  margin: 8px 0 5px;
  font-size: 12px;
}

.profile-identity > span {
  color: #9aa6a3;
  font-size: 11px;
}

.profile-edit-mobile {
  display: none;
}

.profile-layout {
  grid-template-columns: minmax(0, 1.2fr) minmax(330px, .8fr);
  gap: 19px;
  margin-top: 19px;
  display: grid;
}

.profile-left-column, .profile-right-column {
  flex-direction: column;
  gap: 19px;
  display: flex;
}

.detail-panel, .security-panel, .role-panel, .activity-history {
  padding: 24px;
}

.profile-fields {
  border-top: 1px solid #edf1ef;
  grid-template-columns: 1fr 1fr;
  display: grid;
}

.profile-fields div {
  border-bottom: 1px solid #edf1ef;
  flex-direction: column;
  gap: 5px;
  padding: 17px 10px 14px 0;
  display: flex;
}

.profile-fields div:nth-child(2n) {
  padding-left: 20px;
}

.profile-fields div:nth-last-child(-n+2) {
  border-bottom: 0;
}

.profile-fields span {
  color: #899693;
  font-size: 10px;
}

.profile-fields strong {
  font-size: 12px;
}

.security-score {
  color: #3d8c76;
  background: #eff8f4;
  border-radius: 6px;
  padding: 5px 8px;
  font-size: 10px;
  font-weight: 800;
}

.security-score i {
  background: #55ad92;
  border-radius: 50%;
  width: 6px;
  height: 6px;
  margin-right: 4px;
  display: inline-block;
}

.security-row {
  border-top: 1px solid #edf1ef;
  grid-template-columns: 40px 1fr auto;
  align-items: center;
  gap: 10px;
  padding: 15px 0;
  display: grid;
}

.security-icon {
  color: #6c7c78;
  background: #f4f7f6;
  border-radius: 10px;
  place-items: center;
  width: 36px;
  height: 36px;
  display: grid;
}

.security-row strong {
  font-size: 12px;
}

.security-row p {
  color: #8c9996;
  margin: 4px 0 0;
  font-size: 10px;
}

.enabled-badge {
  color: #438a76;
  background: #eaf6f0;
  border-radius: 5px;
  padding: 4px 7px;
  font-size: 10px;
  font-weight: 800;
}

.role-callout {
  background: var(--pink-soft);
  border: 1px solid #fbe0e6;
  border-radius: 10px;
  gap: 11px;
  padding: 15px;
  display: flex;
}

.role-icon {
  color: #af6578;
  background: #fbd6df;
  border-radius: 9px;
  flex: 0 0 34px;
  place-items: center;
  height: 34px;
  display: grid;
}

.role-callout strong {
  font-size: 13px;
}

.role-callout p {
  color: #8b7479;
  margin: 4px 0 0;
  font-size: 11px;
  line-height: 1.5;
}

.permission-list {
  grid-template-columns: 1fr 1fr;
  gap: 10px;
  margin: 16px 0;
  display: grid;
}

.permission-list p {
  color: #6b7b78;
  margin: 0;
  font-size: 11px;
}

.permission-list i {
  color: #47937d;
  background: #e4f3ed;
  border-radius: 50%;
  place-items: center;
  width: 14px;
  height: 14px;
  margin-right: 5px;
  font-size: 9px;
  font-style: normal;
  font-weight: 800;
  display: inline-grid;
}

.profile-activity-list {
  padding-top: 2px;
}

.profile-activity {
  border-top: 1px solid #edf1ef;
  grid-template-columns: 36px 1fr;
  gap: 10px;
  padding: 12px 0;
  display: grid;
}

.profile-activity strong {
  font-size: 12px;
}

.profile-activity p {
  color: #7f8e8b;
  margin: 4px 0;
  font-size: 10px;
  line-height: 1.4;
}

.profile-activity time {
  color: #a0aaa8;
  font-size: 10px;
}

@media (max-width: 1180px) {
  :root {
    --page-gutter: 22px;
  }

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

  .home-main-grid, .charts-grid, .profile-layout {
    grid-template-columns: 1fr;
  }

  .schedule-panel {
    min-height: 300px;
  }

  .charts-grid .chart-panel {
    min-height: 315px;
  }

  .second-charts-grid {
    grid-template-columns: 1fr;
  }

  .profile-right-column {
    grid-template-columns: 1fr 1fr;
    align-items: start;
    display: grid;
  }

  .sidebar {
    width: 225px;
  }

  .page-area {
    width: calc(100% - 225px);
    margin-left: 225px;
  }

  .topbar {
    padding-left: 24px;
    padding-right: 24px;
  }
}

@media (max-width: 760px) {
  :root {
    --page-gutter: 16px;
  }

  .sidebar {
    display: none;
  }

  .page-area {
    width: 100%;
    margin-left: 0;
  }

  .topbar {
    height: 64px;
    padding: 0 18px;
  }

  .mobile-brand {
    display: block;
  }

  .mobile-brand .hopin-mark {
    min-width: 34px;
    height: 34px;
  }

  .search-box {
    display: none;
  }

  .home-hero {
    min-height: 190px;
    margin-bottom: 20px;
    padding: 23px 18px;
  }

  .hero-car {
    opacity: .55;
    width: 235px;
    bottom: 6px;
    right: -28px;
  }

  .hero-button {
    min-width: 152px;
    min-height: 38px;
    top: auto;
    bottom: 15px;
    right: 18px;
  }

  .hero-copy h1 {
    max-width: 280px;
    font-size: 28px;
  }

  .hero-copy > p:last-child {
    max-width: 260px;
    font-size: 12px;
  }

  .profile-menu {
    min-height: auto;
    box-shadow: none;
    background: none;
    border: 0;
    padding: 3px;
  }

  .profile-menu strong, .profile-menu-arrow {
    display: none;
  }

  .main-content {
    padding-bottom: 36px;
  }

  .page-heading {
    flex-direction: column;
    align-items: flex-start;
    margin-bottom: 21px;
    padding-top: 26px;
  }

  .page-heading h1 {
    font-size: 26px;
  }

  .page-action, .page-action .primary-button, .date-button {
    width: 100%;
  }

  .quick-grid {
    gap: 11px;
  }

  .stat-card {
    min-height: 145px;
    padding: 15px;
  }

  .stat-icon {
    top: 15px;
    left: 15px;
  }

  .stat-label {
    margin-left: 61px;
    font-size: 12px;
  }

  .stat-value-row {
    margin-left: 61px;
  }

  .stat-value-row strong {
    font-size: 29px;
  }

  .stat-detail {
    margin-left: 61px;
    line-height: 1.35;
  }

  .home-main-grid, .charts-grid {
    gap: 12px;
    margin-top: 12px;
  }

  .panel {
    border-radius: 12px;
    padding: 17px;
  }

  .map-panel {
    min-height: 298px;
  }

  .map-placeholder {
    min-height: 214px;
  }

  .activity-item {
    grid-template-columns: 35px 1fr;
  }

  .activity-item time {
    grid-column: 2;
    margin-top: -6px;
  }

  .simple-table {
    display: none;
  }

  .mobile-ride-cards {
    display: block;
  }

  .mobile-ride-card {
    border-top: 1px solid #edf0ef;
    padding: 12px 0;
    position: relative;
  }

  .mobile-ride-card:first-child {
    border-top: 0;
  }

  .mobile-ride-card > div {
    flex-direction: column;
    gap: 4px;
    display: flex;
  }

  .mobile-ride-card strong {
    font-size: 12px;
  }

  .mobile-ride-card span {
    color: #71807d;
    font-size: 11px;
  }

  .mobile-ride-card > .status-badge {
    position: absolute;
    top: 13px;
    right: 0;
  }

  .mobile-ride-card p {
    color: #7b8986;
    margin: 11px 0 0;
    font-size: 10px;
  }

  .mobile-ride-card b {
    font-size: 12px;
    position: absolute;
    bottom: 0;
    right: 0;
  }

  .dashboard-tabs {
    max-width: 100%;
    margin-bottom: 14px;
    overflow-x: auto;
  }

  .filter-tab {
    white-space: nowrap;
  }

  .donut-wrap {
    gap: 16px;
  }

  .donut-chart {
    flex-basis: 125px;
    width: 125px;
    height: 125px;
  }

  .donut-chart:before {
    inset: 15px;
  }

  .status-key p {
    font-size: 10px;
  }

  .live-metrics {
    gap: 12px;
  }

  .live-metrics > div {
    padding: 0 7px;
  }

  .live-metrics strong {
    font-size: 18px;
  }

  .live-metrics small {
    line-height: 1.35;
  }

  .profile-summary {
    align-items: flex-end;
    padding: 0 17px 17px;
  }

  .profile-avatar {
    width: 82px;
    height: 82px;
    font-size: 24px;
  }

  .profile-avatar-wrap {
    margin-top: -40px;
  }

  .profile-identity {
    padding-top: 8px;
  }

  .profile-identity h2 {
    font-size: 17px;
  }

  .profile-identity > span {
    line-height: 1.4;
  }

  .profile-edit-mobile {
    min-height: 32px;
    margin-bottom: 2px;
    padding: 0 9px;
    display: inline-flex;
  }

  .profile-layout {
    gap: 12px;
    margin-top: 12px;
  }

  .profile-right-column {
    gap: 12px;
    display: flex;
  }

  .profile-fields {
    grid-template-columns: 1fr;
  }

  .profile-fields div, .profile-fields div:nth-child(2n) {
    border-bottom: 1px solid #edf1ef;
    padding: 13px 0;
  }

  .profile-fields div:last-child {
    border-bottom: 0;
  }

  .permission-list {
    grid-template-columns: 1fr;
  }

  .role-panel, .detail-panel, .security-panel, .activity-history {
    padding: 18px;
  }

  .topbar-avatar {
    width: 32px;
    height: 32px;
  }

  .recent-rides-panel, .all-rides-panel {
    margin-top: 12px;
  }

  .chart-summary {
    flex-wrap: wrap;
  }

  .chart-summary small {
    width: 100%;
  }

  .bar-chart {
    gap: 7px;
  }

  .bar-rail {
    max-width: 28px;
  }
}

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

  .profile-summary {
    gap: 10px;
  }

  .profile-identity p {
    font-size: 10px;
  }

  .profile-identity > span {
    font-size: 9px;
  }

  .profile-edit-mobile {
    gap: 0;
    font-size: 0;
  }

  .donut-wrap {
    flex-direction: column;
    align-items: center;
  }

  .chart-panel.ride-status-panel {
    min-height: 420px;
  }

  .status-key {
    grid-template-columns: 1fr 1fr;
    width: 100%;
    display: grid;
  }

  .status-key p {
    margin: 6px 0;
  }

  .map-legend {
    gap: 4px;
    font-size: 9px;
  }

  .verification-people > div {
    grid-template-columns: 34px 1fr;
  }

  .verification-people .small-button {
    grid-column: 2;
    justify-self: start;
  }
}

.login-page {
  background: #fff;
  grid-template-columns: minmax(500px, 1.12fr) minmax(440px, .88fr);
  min-height: 100vh;
  display: grid;
  overflow: hidden;
}

.login-showcase {
  color: #fff;
  background: radial-gradient(circle at 76% 23%, #fb5ba28f, #0000 25%), radial-gradient(circle at 33% 110%, #9e174e 0, #0000 42%), linear-gradient(139deg, #07152f, #14162f 47%, #4a1434);
  padding: 38px 48px;
  position: relative;
  overflow: hidden;
}

.login-showcase:before {
  content: "";
  border: 1px solid #ff9cc733;
  border-radius: 50%;
  width: 680px;
  height: 680px;
  position: absolute;
  top: -270px;
  right: -290px;
  box-shadow: 0 0 0 64px #ff83b909, 0 0 0 128px #ff83b906;
}

.login-brand {
  z-index: 2;
  align-items: center;
  gap: 12px;
  display: inline-flex;
  position: relative;
}

.login-brand-mark {
  color: #fff;
  letter-spacing: -.8px;
  background: linear-gradient(145deg, #f8b, #ed0871);
  border-radius: 17px;
  place-items: center;
  width: 57px;
  height: 57px;
  font-size: 13px;
  font-weight: 800;
  display: grid;
  box-shadow: 0 10px 21px #ec08714d;
}

.login-brand > span:last-child {
  flex-direction: column;
  gap: 4px;
  display: flex;
}

.login-brand strong {
  letter-spacing: -.75px;
  font-size: 22px;
}

.login-brand small {
  color: #bec4d5;
  font-size: 12px;
}

.login-showcase-copy {
  z-index: 2;
  margin: 19vh 0 0;
  position: relative;
}

.login-showcase-copy p, .login-eyebrow {
  color: #ff8cbd;
  letter-spacing: 1.7px;
  margin: 0;
  font-size: 11px;
  font-weight: 800;
}

.login-showcase-copy h1 {
  color: #fff;
  letter-spacing: -2.8px;
  margin: 12px 0;
  font-size: clamp(38px, 4.3vw, 64px);
  line-height: 1.04;
}

.login-showcase-copy > span {
  color: #cbd1df;
  font-size: 15px;
  line-height: 1.6;
}

.login-city {
  z-index: 1;
  opacity: .5;
  height: 230px;
  position: absolute;
  bottom: 122px;
  left: 0;
  right: 0;
}

.login-city:after {
  content: "";
  clip-path: polygon(0 65%, 12% 47%, 27% 58%, 45% 30%, 60% 55%, 77% 20%, 100% 56%, 100% 100%, 0 100%);
  background: linear-gradient(172deg, #0000 0 25%, #f15a98 26% 29%, #0000 30%), linear-gradient(8deg, #fd90bc61, #d82f7233);
  height: 78px;
  position: absolute;
  bottom: 0;
  left: -5%;
  right: -5%;
}

.building {
  background: linear-gradient(90deg, #e35b99, #fb9fc4);
  width: 44px;
  position: absolute;
  bottom: 63px;
  box-shadow: inset 8px 0 #ffffff21;
}

.building:after {
  content: "";
  opacity: .46;
  background: repeating-linear-gradient(#ffffffb3 0 5px, #0000 5px 13px);
  position: absolute;
  inset: 12px 9px;
}

.building-one {
  height: 113px;
  left: 48%;
}

.building-two {
  width: 57px;
  height: 157px;
  left: 57%;
}

.building-three {
  width: 37px;
  height: 94px;
  left: 69%;
}

.building-four {
  width: 49px;
  height: 135px;
  left: 78%;
}

.tree {
  z-index: 2;
  background: linear-gradient(#ff8fbd, #d62c79);
  border-radius: 60% 60% 35% 35%;
  width: 20px;
  height: 72px;
  position: absolute;
  bottom: 51px;
}

.tree:after {
  content: "";
  background: #8f2958;
  width: 4px;
  height: 53px;
  position: absolute;
  top: 58px;
  left: 8px;
}

.tree-one {
  height: 92px;
  left: 41%;
}

.tree-two {
  left: 74%;
}

.tree-three {
  height: 105px;
  left: 88%;
}

.login-car-stage {
  z-index: 3;
  height: 290px;
  position: absolute;
  bottom: 49px;
  left: 0;
  right: -2%;
  overflow: hidden;
}

.login-car {
  filter: drop-shadow(0 18px 15px #070a1e80);
  width: min(77%, 700px);
  height: auto;
  animation: 1.7s cubic-bezier(.16, .84, .31, 1) both car-arrive;
  position: absolute;
  bottom: 5px;
  left: 13%;
}

.car-light {
  z-index: -1;
  opacity: .25;
  filter: blur(34px);
  background: #ff4594;
  border-radius: 50%;
  width: 260px;
  height: 130px;
  position: absolute;
}

.car-light-one {
  bottom: 19px;
  right: 7%;
}

.car-light-two {
  background: #a253e7;
  bottom: -54px;
  left: 18%;
}

.login-showcase-footer {
  z-index: 3;
  color: #b9c0d2;
  font-size: 11px;
  position: absolute;
  bottom: 31px;
  left: 48px;
}

.login-showcase-footer i {
  background: #fb78ad;
  border-radius: 50%;
  width: 4px;
  height: 4px;
  margin: 0 9px 2px;
  display: inline-block;
}

.login-panel {
  background: radial-gradient(circle at 94% 7%, #fff0f6, #0000 22%), #fff;
  align-items: center;
  display: grid;
}

.login-panel-inner {
  width: min(100% - 80px, 410px);
  margin: 0 auto;
}

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

.login-panel h2 {
  color: #081b40;
  letter-spacing: -1.5px;
  margin: 10px 0 7px;
  font-size: 37px;
}

.login-intro {
  color: #7d899f;
  margin: 0 0 31px;
  font-size: 14px;
}

.login-form {
  flex-direction: column;
  gap: 19px;
  display: flex;
}

.login-form > label > span {
  color: #293650;
  margin-bottom: 8px;
  font-size: 12px;
  font-weight: 800;
  display: block;
}

.login-input-wrap {
  color: #8994aa;
  background: #fff;
  border: 1px solid #e8eaf0;
  border-radius: 13px;
  align-items: center;
  gap: 11px;
  height: 52px;
  padding: 0 15px;
  transition: border-color .2s, box-shadow .2s;
  display: flex;
}

.login-input-wrap:focus-within {
  border-color: #ff7eaf;
  box-shadow: 0 0 0 4px #fff0f6;
}

.login-input-wrap input {
  color: #14203b;
  background: none;
  border: 0;
  outline: 0;
  width: 100%;
  font-size: 14px;
}

.login-input-wrap input::placeholder {
  color: #a7afbf;
}

.login-options {
  justify-content: space-between;
  align-items: center;
  margin-top: -2px;
  display: flex;
}

.remember-me {
  color: #65728a;
  align-items: center;
  gap: 7px;
  font-size: 12px;
  font-weight: 600;
  display: inline-flex;
}

.remember-me input {
  accent-color: #ec0871;
}

.forgot-password, .login-help button {
  color: #ec0871;
  background: none;
  border: 0;
  padding: 0;
  font-size: 12px;
  font-weight: 800;
}

.login-submit {
  color: #fff;
  background: linear-gradient(135deg, #ff2b8a, #e60066);
  border: 1px solid #ec0871;
  border-radius: 13px;
  justify-content: center;
  align-items: center;
  gap: 9px;
  min-height: 53px;
  font-size: 14px;
  font-weight: 800;
  transition: transform .2s, box-shadow .2s;
  display: inline-flex;
  box-shadow: 0 13px 24px #ec087140;
}

.login-submit:hover {
  transform: translateY(-2px);
  box-shadow: 0 16px 28px #ec087152;
}

.login-message {
  color: #387b6b;
  background: #ebf7f2;
  border-radius: 9px;
  margin: -5px 0 0;
  padding: 10px 12px;
  font-size: 11px;
  line-height: 1.45;
}

.login-help {
  color: #8590a3;
  text-align: center;
  margin: 28px 0 0;
  font-size: 12px;
}

@keyframes car-arrive {
  from {
    opacity: 0;
    transform: translateX(-115vw) scale(.86);
  }

  72% {
    opacity: 1;
    transform: translateX(22px) scale(1.02);
  }

  to {
    opacity: 1;
    transform: translateX(0) scale(1);
  }
}

@media (prefers-reduced-motion: reduce) {
  .login-car {
    animation: none;
  }
}

@media (max-width: 840px) {
  .login-page {
    grid-template-columns: 1fr;
  }

  .login-showcase {
    min-height: 390px;
    padding: 27px 25px;
  }

  .login-showcase-copy {
    margin-top: 70px;
  }

  .login-showcase-copy h1 {
    font-size: 39px;
  }

  .login-car-stage {
    height: 190px;
    bottom: 14px;
  }

  .login-car {
    width: 580px;
    max-width: 80%;
    left: 22%;
  }

  .login-city {
    bottom: 55px;
  }

  .login-showcase-footer {
    bottom: 17px;
    left: 25px;
  }

  .login-panel {
    min-height: 610px;
    padding: 48px 0;
  }

  .login-panel-inner {
    width: min(100% - 38px, 430px);
  }

  .login-mobile-brand {
    color: #081b40;
    align-items: center;
    gap: 8px;
    margin-bottom: 35px;
    display: flex;
  }

  .login-mobile-brand span {
    color: #fff;
    background: #ec0871;
    border-radius: 13px;
    place-items: center;
    width: 43px;
    height: 43px;
    font-size: 10px;
    font-weight: 800;
    display: inline-grid;
  }

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

  .login-showcase .login-brand {
    display: none;
  }
}

.sidebar-nav {
  scrollbar-width: none;
  overflow-y: auto;
}

.sidebar-nav::-webkit-scrollbar {
  display: none;
}

.phase-card {
  margin-top: 16px;
}

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

.phase-metric {
  background: #fff;
  border: 1px solid #eef0f5;
  border-radius: 15px;
  min-height: 128px;
  padding: 19px 19px 16px;
  position: relative;
  overflow: hidden;
  box-shadow: 0 8px 22px #1b1e3e0e;
}

.phase-metric:after {
  content: "";
  background: #fff1f6;
  border-radius: 50%;
  width: 92px;
  height: 92px;
  position: absolute;
  bottom: -42px;
  right: -42px;
}

.phase-metric-dot {
  background: #ec0871;
  border-radius: 50%;
  width: 9px;
  height: 9px;
  margin-right: 6px;
  display: inline-block;
}

.phase-metric-dot.mint {
  background: #00b987;
}

.phase-metric-dot.lilac {
  background: #9366e9;
}

.phase-metric-dot.amber {
  background: #ed9c30;
}

.phase-metric p {
  color: #72809a;
  font-size: 11px;
  font-weight: 800;
  display: inline;
}

.phase-metric strong {
  color: #081b40;
  letter-spacing: -1px;
  margin: 13px 0 5px;
  font-size: 29px;
  display: block;
}

.phase-metric small {
  color: #8490a5;
  font-size: 11px;
}

.filter-bar {
  align-items: center;
  gap: 10px;
  margin: 0 0 19px;
  display: flex;
}

.table-search {
  color: #97a1b2;
  background: #fbfcfd;
  border: 1px solid #eaedf2;
  border-radius: 10px;
  flex: 1;
  align-items: center;
  gap: 9px;
  max-width: 360px;
  height: 43px;
  padding: 0 13px;
  font-size: 12px;
  display: flex;
}

.filter-button, .mini-button {
  color: #56647d;
  background: #fff;
  border: 1px solid #e3e7ee;
  border-radius: 9px;
  justify-content: center;
  align-items: center;
  gap: 6px;
  min-height: 38px;
  padding: 0 11px;
  font-size: 11px;
  font-weight: 800;
  display: inline-flex;
}

.filter-button:hover, .mini-button:hover {
  color: #d80462;
  background: #fff3f7;
  border-color: #f6a1c2;
}

.mini-button {
  min-height: 31px;
  padding: 0 10px;
}

.mini-button-pink {
  color: #dc0766;
  background: #fff0f6;
  border-color: #ffd5e5;
}

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

.phase-table {
  border-collapse: collapse;
  width: 100%;
  min-width: 760px;
}

.phase-table th {
  color: #8d99ab;
  text-align: left;
  letter-spacing: .65px;
  text-transform: uppercase;
  padding: 0 11px 12px;
  font-size: 10px;
  font-weight: 800;
}

.phase-table td {
  color: #53617a;
  border-top: 1px solid #eef0f4;
  padding: 14px 11px;
  font-size: 12px;
}

.phase-table th:first-child, .phase-table td:first-child {
  padding-left: 0;
}

.phase-table th:last-child, .phase-table td:last-child {
  text-align: right;
  padding-right: 0;
}

.person-cell {
  color: #172440;
  align-items: center;
  gap: 9px;
  font-weight: 800;
  display: flex;
}

.person-cell small {
  color: #8995a9;
  margin-top: 3px;
  font-size: 10px;
  font-weight: 600;
  display: block;
}

.phase-avatar {
  color: #7a3b57;
  background: #ffdbe8;
  border-radius: 50%;
  flex: 0 0 35px;
  place-items: center;
  width: 35px;
  height: 35px;
  font-size: 11px;
  font-weight: 800;
  display: inline-grid;
}

.phase-avatar.mint {
  color: #227562;
  background: #d9f2e9;
}

.phase-avatar.lilac {
  color: #69529f;
  background: #ece4ff;
}

.phase-avatar.amber {
  color: #95621f;
  background: #fff0cf;
}

.phase-status {
  color: #63718a;
  background: #f1f3f6;
  border-radius: 7px;
  padding: 5px 8px;
  font-size: 10px;
  font-weight: 800;
  display: inline-flex;
}

.phase-status.success {
  color: #168365;
  background: #e5f7ef;
}

.phase-status.warning {
  color: #a26c18;
  background: #fff3da;
}

.phase-status.danger {
  color: #c94d6d;
  background: #ffeaef;
}

.phase-status.pink {
  color: #d60868;
  background: #ffe8f1;
}

.phase-split {
  grid-template-columns: minmax(0, 1.5fr) minmax(320px, .9fr);
  gap: 16px;
  margin-top: 16px;
  display: grid;
}

.info-list {
  flex-direction: column;
  display: flex;
}

.info-row {
  border-top: 1px solid #eef0f4;
  grid-template-columns: 1fr auto;
  gap: 12px;
  padding: 14px 0;
  display: grid;
}

.info-row:first-child {
  border-top: 0;
  padding-top: 0;
}

.info-row span {
  color: #8490a3;
  font-size: 11px;
}

.info-row strong {
  color: #162440;
  text-align: right;
  font-size: 12px;
}

.document-row, .verification-row {
  border-top: 1px solid #eef0f4;
  align-items: center;
  gap: 11px;
  padding: 12px 0;
  display: flex;
}

.document-row:first-child, .verification-row:first-child {
  border-top: 0;
  padding-top: 0;
}

.document-icon {
  color: #d70867;
  background: #fff0f6;
  border-radius: 11px;
  place-items: center;
  width: 38px;
  height: 38px;
  display: grid;
}

.document-row > div:nth-child(2), .verification-row > div:nth-child(2) {
  flex: 1;
}

.document-row strong, .verification-row strong {
  color: #14223e;
  font-size: 12px;
  display: block;
}

.document-row small, .verification-row small {
  color: #8a95a8;
  margin-top: 4px;
  font-size: 10px;
  display: block;
}

.settings-grid, .pricing-grid {
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 16px;
  display: grid;
}

.pricing-card {
  background: linear-gradient(155deg, #fff, #fff8fb);
  border: 1px solid #eef0f4;
  border-radius: 16px;
  min-height: 245px;
  padding: 21px;
  position: relative;
  overflow: hidden;
  box-shadow: 0 8px 22px #1b1e3e0d;
}

.pricing-card:after {
  content: "";
  background: #ffe1ed;
  border-radius: 50%;
  width: 120px;
  height: 120px;
  position: absolute;
  bottom: -50px;
  right: -45px;
}

.pricing-card > * {
  z-index: 1;
  position: relative;
}

.pricing-card h3 {
  color: #081b40;
  margin: 14px 0 5px;
  font-size: 19px;
}

.pricing-card p {
  color: #718099;
  margin: 0;
  font-size: 11px;
}

.price-value {
  align-items: end;
  gap: 5px;
  margin: 22px 0 14px;
  display: flex;
}

.price-value strong {
  color: #081b40;
  letter-spacing: -1px;
  font-size: 30px;
}

.price-value span {
  color: #8994a5;
  padding-bottom: 4px;
  font-size: 11px;
}

.price-lines {
  grid-template-columns: 1fr 1fr;
  gap: 9px;
  display: grid;
}

.price-lines span {
  color: #718099;
  font-size: 10px;
}

.price-lines b {
  color: #182640;
  margin-top: 3px;
  font-size: 12px;
  display: block;
}

.setting-group {
  background: #fff;
  border: 1px solid #eef0f4;
  border-radius: 14px;
  padding: 18px;
}

.setting-group h3 {
  color: #10203e;
  margin: 0;
  font-size: 14px;
}

.setting-group p {
  color: #8290a5;
  margin: 6px 0 16px;
  font-size: 11px;
  line-height: 1.5;
}

.setting-toggle {
  color: #34425e;
  border-top: 1px solid #f0f1f4;
  justify-content: space-between;
  align-items: center;
  padding-top: 13px;
  font-size: 12px;
  font-weight: 700;
  display: flex;
}

.toggle-ui {
  background: #ec0871;
  border-radius: 20px;
  width: 38px;
  height: 22px;
  position: relative;
}

.toggle-ui:after {
  content: "";
  background: #fff;
  border-radius: 50%;
  width: 16px;
  height: 16px;
  position: absolute;
  top: 3px;
  right: 3px;
}

.map-operations {
  background: linear-gradient(122deg, #eef4f3, #dceff3 72%, #c2e4ed);
  border-radius: 14px;
  min-height: 420px;
  position: relative;
  overflow: hidden;
}

.map-operations:before {
  content: "";
  background: repeating-linear-gradient(42deg, #0000 0 40px, #72938f33 41px 43px, #0000 44px 83px), repeating-linear-gradient(-41deg, #0000 0 60px, #72938f29 61px 63px, #0000 64px 120px);
  position: absolute;
  inset: 0;
}

.live-map-card {
  z-index: 1;
  background: #fff;
  border-radius: 12px;
  padding: 12px;
  position: absolute;
  box-shadow: 0 8px 20px #1c30411f;
}

.live-map-card strong {
  color: #081b40;
  font-size: 20px;
}

.live-map-card span {
  color: #748199;
  margin-top: 3px;
  font-size: 10px;
  display: block;
}

.map-car-dot {
  z-index: 2;
  background: #ff5c9b;
  border: 7px solid #ff55942e;
  border-radius: 50%;
  place-items: center;
  width: 38px;
  height: 38px;
  display: grid;
  position: absolute;
  box-shadow: 0 4px 10px #c31e5e40;
}

.map-car-dot.mint {
  background: #00b987;
  border-color: #00b9872e;
}

.map-car-dot.navy {
  background: #172a4e;
  border-color: #172a4e26;
}

.map-car-dot i {
  background: #fff;
  border-radius: 4px 4px 2px 2px;
  width: 12px;
  height: 7px;
  display: block;
}

.audit-type {
  color: #d60868;
  font-weight: 800;
}

.empty-note {
  color: #8a95a8;
  text-align: center;
  padding: 30px;
  font-size: 12px;
}

@media (max-width: 1050px) {
  .phase-metrics {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .phase-split {
    grid-template-columns: 1fr;
  }

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

@media (max-width: 760px) {
  .phase-metrics, .settings-grid, .pricing-grid {
    grid-template-columns: 1fr;
  }

  .filter-bar {
    flex-wrap: wrap;
  }

  .table-search {
    min-width: 100%;
    max-width: 100%;
  }

  .phase-card {
    margin-top: 12px;
  }

  .map-operations {
    min-height: 330px;
  }
}

.driver-form {
  flex-direction: column;
  gap: 26px;
  display: flex;
}

.form-section {
  border-top: 1px solid #edf0f4;
  padding-top: 22px;
}

.form-section:first-child {
  border-top: 0;
  padding-top: 0;
}

.form-section-heading {
  align-items: flex-start;
  gap: 12px;
  margin-bottom: 18px;
  display: flex;
}

.form-step {
  color: #d60766;
  background: #ffe8f1;
  border-radius: 10px;
  flex: 0 0 31px;
  place-items: center;
  width: 31px;
  height: 31px;
  font-size: 11px;
  font-weight: 800;
  display: grid;
}

.form-section-heading h3 {
  color: #10203e;
  margin: 1px 0 4px;
  font-size: 14px;
}

.form-section-heading p {
  color: #8793a6;
  margin: 0;
  font-size: 11px;
}

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

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

.form-field {
  flex-direction: column;
  gap: 7px;
  display: flex;
}

.form-field > span {
  color: #3d4b65;
  font-size: 11px;
  font-weight: 800;
}

.form-field input, .form-field select, .form-field textarea {
  color: #172440;
  width: 100%;
  height: 43px;
  font: inherit;
  background: #fcfcfe;
  border: 1px solid #e7eaf0;
  border-radius: 10px;
  outline: 0;
  padding: 0 12px;
  font-size: 12px;
  transition: border-color .2s, box-shadow .2s;
}

.form-field input:focus, .form-field select:focus, .form-field textarea:focus {
  border-color: #ff8ab8;
  box-shadow: 0 0 0 4px #fff0f6;
}

.form-field textarea {
  resize: vertical;
  min-height: 96px;
  padding-top: 11px;
}

.form-actions {
  justify-content: flex-end;
  gap: 10px;
  padding-top: 4px;
  display: flex;
}

.review-state {
  background: #fff4f8;
  border-radius: 12px;
  align-items: flex-start;
  gap: 11px;
  padding: 15px;
  display: flex;
}

.review-state-icon {
  color: #d60766;
  background: #ffd6e6;
  border-radius: 50%;
  flex: 0 0 32px;
  place-items: center;
  width: 32px;
  height: 32px;
  font-weight: 800;
  display: grid;
}

.review-state strong {
  color: #172440;
  font-size: 12px;
  display: block;
}

.review-state p {
  color: #7f8c9f;
  margin: 4px 0 0;
  font-size: 11px;
  line-height: 1.45;
}

.review-actions {
  gap: 8px;
  margin-top: 15px;
  display: flex;
}

.review-document-grid {
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 14px;
  display: grid;
}

.review-document {
  background: #fff;
  border: 1px solid #eceef3;
  border-radius: 14px;
  overflow: hidden;
}

.review-document-preview {
  color: #b07c90;
  background: repeating-linear-gradient(-45deg, #fff5f8, #fff5f8 8px, #fdebf2 8px 16px);
  place-items: center;
  height: 112px;
  font-size: 11px;
  font-weight: 800;
  display: grid;
}

.review-document-info {
  padding: 14px;
}

.review-document-info h3 {
  color: #14223f;
  margin: 0 0 5px;
  font-size: 13px;
}

.review-document-info p {
  color: #7f8c9e;
  min-height: 31px;
  margin: 0 0 10px;
  font-size: 10px;
  line-height: 1.45;
}

.review-document-buttons {
  flex-wrap: wrap;
  gap: 7px;
  margin-top: 12px;
  display: flex;
}

.final-review {
  justify-content: space-between;
  align-items: center;
  gap: 20px;
  display: flex;
}

.final-review strong {
  color: #10203e;
  font-size: 13px;
}

.final-review p {
  color: #7d899d;
  max-width: 600px;
  margin: 6px 0 0;
  font-size: 11px;
  line-height: 1.5;
}

.final-review > div:last-child {
  white-space: nowrap;
  gap: 8px;
  display: flex;
}

@media (max-width: 900px) {
  .form-grid-three, .review-document-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 600px) {
  .form-grid, .form-grid-three, .review-document-grid {
    grid-template-columns: 1fr;
  }

  .form-actions, .final-review {
    flex-direction: column;
    align-items: stretch;
  }

  .form-actions > *, .final-review > div:last-child > * {
    flex: 1;
  }

  .final-review > div:last-child {
    width: 100%;
  }

  .review-document-preview {
    height: 96px;
  }
}

.ticket-thread {
  flex-direction: column;
  gap: 16px;
  display: flex;
}

.ticket-message {
  gap: 10px;
  max-width: 89%;
  display: flex;
}

.ticket-message > span {
  color: #7a3b57;
  background: #ffdce8;
  border-radius: 50%;
  flex: 0 0 31px;
  place-items: center;
  width: 31px;
  height: 31px;
  font-size: 10px;
  font-weight: 800;
  display: grid;
}

.ticket-message > div {
  background: #f6f8fb;
  border-radius: 4px 12px 12px;
  padding: 12px;
}

.ticket-message strong {
  color: #182640;
  font-size: 11px;
}

.ticket-message p {
  color: #5e6b80;
  margin: 5px 0 6px;
  font-size: 12px;
  line-height: 1.5;
}

.ticket-message small {
  color: #929cad;
  font-size: 10px;
}

.ticket-message.agent {
  flex-direction: row-reverse;
  align-self: flex-end;
}

.ticket-message.agent > span {
  color: #fff;
  background: #ec0871;
}

.ticket-message.agent > div {
  background: #fff0f6;
  border-radius: 12px 4px 12px 12px;
}

.ticket-reply {
  color: #a0a8b5;
  background: #fcfcfe;
  border: 1px solid #e8ebf0;
  border-radius: 11px;
  justify-content: space-between;
  align-items: center;
  gap: 12px;
  margin-top: 20px;
  padding: 13px;
  font-size: 12px;
  display: flex;
}

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

.report-card {
  background: linear-gradient(145deg, #fff, #fff5f9);
  border: 1px solid #eef0f4;
  border-radius: 14px;
  min-height: 188px;
  padding: 18px;
  position: relative;
  overflow: hidden;
}

.report-card:after {
  content: "";
  background: #ffe0ed;
  border-radius: 50%;
  width: 80px;
  height: 80px;
  position: absolute;
  bottom: -34px;
  right: -30px;
}

.report-card > * {
  z-index: 1;
  position: relative;
}

.report-card > span {
  color: #d80767;
  background: #ffe1ec;
  border-radius: 10px;
  place-items: center;
  width: 34px;
  height: 34px;
  font-size: 17px;
  font-weight: 800;
  display: grid;
}

.report-card h3 {
  color: #10203e;
  margin: 14px 0 5px;
  font-size: 14px;
}

.report-card p {
  color: #7c8799;
  min-height: 34px;
  margin: 0 0 12px;
  font-size: 10px;
  line-height: 1.5;
}

.service-map {
  min-height: 350px;
}

.service-zone {
  z-index: 1;
  clip-path: polygon(10% 18%, 35% 4%, 72% 16%, 90% 44%, 76% 83%, 42% 94%, 12% 72%, 3% 38%);
  background: #ff77b136;
  border: 3px solid #ec0871b8;
  position: absolute;
}

.zone-one {
  width: 58%;
  height: 68%;
  top: 15%;
  left: 18%;
}

.zone-two {
  background: #00b9872b;
  border-color: #00b987bf;
  width: 29%;
  height: 36%;
  bottom: 9%;
  right: 11%;
}

.service-map .live-map-card {
  z-index: 3;
}

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

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

  .ticket-message {
    max-width: 100%;
  }

  .ticket-reply {
    flex-direction: column;
    align-items: stretch;
  }
}

/*# sourceMappingURL=app_globals_0yg4wg8plh8sv.css.map*/