body {
  font-size: 14px;
}

.auth-dialog {
  max-width: 520px;
}

.auth-card {
  display: grid;
  gap: 16px;
  min-width: min(92vw, 480px);
  padding: 20px;
  border: 1px solid rgba(142, 180, 213, 0.22);
  border-radius: 14px;
  background:
    linear-gradient(135deg, rgba(86, 217, 255, 0.10), transparent 42%),
    rgba(13, 22, 35, 0.96);
  color: var(--text);
  box-shadow: 0 30px 90px rgba(0, 0, 0, 0.46);
}

body.light .auth-card {
  background:
    linear-gradient(135deg, rgba(86, 217, 255, 0.18), transparent 42%),
    rgba(255, 255, 255, 0.96);
  color: #102033;
}

.auth-card label,
.superadmin-form label {
  display: grid;
  gap: 8px;
  color: var(--muted);
  font-size: 13px;
  font-weight: 800;
}

.auth-card input,
.superadmin-form input,
.superadmin-form select {
  min-height: 42px;
  border: 1px solid rgba(142, 180, 213, 0.28);
  border-radius: 8px;
  padding: 0 12px;
  background: rgba(9, 17, 28, 0.82);
  color: var(--text);
  font: inherit;
}

body.light .auth-card input,
body.light .superadmin-form input,
body.light .superadmin-form select {
  background: rgba(255, 255, 255, 0.82);
  color: #102033;
}

.auth-error {
  min-height: 18px;
  margin: 0;
  color: #ff8a8a;
  font-weight: 800;
}

body.auth-shell .sidebar,
body.auth-shell .topbar {
  display: none !important;
}

body.auth-shell .shell {
  grid-template-columns: minmax(0, 1fr) !important;
}

body.auth-shell .main {
  min-height: 100vh;
  padding: 0 !important;
}

body.auth-shell .content {
  min-height: 100vh;
  display: block;
}

.login-page-shell {
  position: relative;
  min-height: 100vh;
  display: grid;
  place-items: center;
  overflow: hidden;
  padding: 32px;
  background:
    linear-gradient(90deg, rgba(86, 217, 255, 0.055) 1px, transparent 1px),
    linear-gradient(0deg, rgba(86, 217, 255, 0.045) 1px, transparent 1px),
    radial-gradient(circle at 18% 16%, rgba(86, 217, 255, 0.24), transparent 25rem),
    radial-gradient(circle at 82% 8%, rgba(84, 240, 166, 0.18), transparent 28rem),
    radial-gradient(circle at 54% 90%, rgba(59, 130, 246, 0.18), transparent 28rem),
    linear-gradient(145deg, #050a12 0%, #081421 58%, #061017 100%);
  background-size: 54px 54px, 54px 54px, auto, auto, auto, auto;
}

body.light .login-page-shell {
  background:
    linear-gradient(90deg, rgba(14, 165, 233, 0.10) 1px, transparent 1px),
    linear-gradient(0deg, rgba(14, 165, 233, 0.08) 1px, transparent 1px),
    radial-gradient(circle at 18% 16%, rgba(14, 165, 233, 0.22), transparent 25rem),
    radial-gradient(circle at 82% 8%, rgba(16, 185, 129, 0.18), transparent 28rem),
    radial-gradient(circle at 54% 90%, rgba(59, 130, 246, 0.12), transparent 28rem),
    linear-gradient(145deg, #f7fbff 0%, #eaf5fb 100%);
  background-size: 54px 54px, 54px 54px, auto, auto, auto, auto;
}

.login-tech-scene {
  position: absolute;
  inset: 0;
  pointer-events: none;
  opacity: 0.95;
}

.login-map-grid {
  position: absolute;
  inset: 8% 6%;
  border: 1px solid rgba(86, 217, 255, 0.10);
  background:
    linear-gradient(115deg, transparent 0 43%, rgba(86, 217, 255, 0.08) 43.2% 43.8%, transparent 44% 100%),
    linear-gradient(28deg, transparent 0 52%, rgba(84, 240, 166, 0.07) 52.2% 52.8%, transparent 53% 100%);
  clip-path: polygon(5% 8%, 92% 0, 98% 72%, 68% 96%, 12% 86%);
  filter: drop-shadow(0 30px 70px rgba(0, 0, 0, 0.25));
}

.login-route {
  position: absolute;
  height: 2px;
  transform-origin: left center;
  background: linear-gradient(90deg, transparent, rgba(86, 217, 255, 0.82), rgba(84, 240, 166, 0.52), transparent);
  box-shadow: 0 0 20px rgba(86, 217, 255, 0.28);
}

.login-route span {
  position: absolute;
  top: -4px;
  left: 0;
  width: 10px;
  height: 10px;
  border-radius: 3px;
  background: #54f0a6;
  box-shadow: 0 0 18px rgba(84, 240, 166, 0.85);
  animation: login-packet 5.8s linear infinite;
}

.route-a {
  left: 12%;
  top: 28%;
  width: 46%;
  transform: rotate(9deg);
}

.route-b {
  right: 10%;
  top: 63%;
  width: 38%;
  transform: rotate(-18deg);
}

.route-c {
  left: 18%;
  bottom: 20%;
  width: 54%;
  transform: rotate(-4deg);
}

.route-b span {
  animation-delay: -1.8s;
}

.route-c span {
  animation-delay: -3.1s;
}

@keyframes login-packet {
  0% { transform: translateX(0) scale(0.7); opacity: 0; }
  10% { opacity: 1; }
  90% { opacity: 1; }
  100% { transform: translateX(42vw) scale(1); opacity: 0; }
}

.login-node {
  position: absolute;
  width: 56px;
  height: 56px;
  border: 1px solid rgba(86, 217, 255, 0.38);
  border-radius: 14px;
  background:
    linear-gradient(135deg, rgba(86, 217, 255, 0.16), rgba(84, 240, 166, 0.08)),
    rgba(8, 17, 29, 0.72);
  box-shadow: 0 18px 58px rgba(0, 0, 0, 0.30), inset 0 0 30px rgba(86, 217, 255, 0.10);
}

.login-node::before,
.login-node::after {
  content: "";
  position: absolute;
  inset: 13px;
  border: 1px solid rgba(84, 240, 166, 0.42);
  border-radius: 8px;
}

.login-node::after {
  inset: 24px;
  background: #56d9ff;
  box-shadow: 0 0 16px rgba(86, 217, 255, 0.85);
}

.node-a { left: 13%; top: 23%; }
.node-b { right: 20%; top: 55%; }
.node-c { left: 24%; bottom: 16%; }

.login-system-card {
  position: absolute;
  min-width: 178px;
  display: grid;
  gap: 4px;
  border: 1px solid rgba(142, 180, 213, 0.20);
  border-radius: 10px;
  padding: 12px 14px;
  background:
    linear-gradient(135deg, rgba(86, 217, 255, 0.10), transparent),
    rgba(9, 17, 28, 0.58);
  color: var(--text);
  backdrop-filter: blur(12px);
  box-shadow: 0 22px 80px rgba(0, 0, 0, 0.28);
  animation: login-card-float 7s ease-in-out infinite;
}

.login-system-card strong {
  font-size: 12px;
  letter-spacing: 0.08em;
}

.login-system-card span {
  color: #56d9ff;
  font-family: ui-monospace, SFMono-Regular, Consolas, monospace;
  font-size: 12px;
}

.login-system-card small {
  color: var(--muted);
  font-weight: 800;
}

.card-a { left: 8%; top: 12%; }
.card-b { right: 8%; top: 20%; animation-delay: -2s; }
.card-c { right: 12%; bottom: 14%; animation-delay: -4s; }

@keyframes login-card-float {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-10px); }
}

.login-page-card {
  position: relative;
  z-index: 2;
  width: min(94vw, 460px);
  display: grid;
  gap: 16px;
  border: 1px solid rgba(142, 180, 213, 0.22);
  border-radius: 16px;
  padding: 24px;
  background:
    linear-gradient(135deg, rgba(86, 217, 255, 0.12), transparent 42%),
    rgba(13, 22, 35, 0.78);
  color: var(--text);
  box-shadow: 0 32px 110px rgba(0, 0, 0, 0.48);
  backdrop-filter: blur(22px);
}

body.light .login-page-card {
  background:
    linear-gradient(135deg, rgba(86, 217, 255, 0.18), transparent 42%),
    rgba(255, 255, 255, 0.78);
  color: #102033;
}

.login-page-brand {
  display: flex;
  align-items: center;
  gap: 14px;
}

.login-page-brand .brand-mark {
  width: 58px;
  height: 58px;
}

.login-page-brand h1 {
  margin: 0;
}

.login-page-card label {
  display: grid;
  gap: 8px;
  color: var(--muted);
  font-weight: 900;
}

.login-page-card input {
  min-height: 46px;
  border: 1px solid rgba(142, 180, 213, 0.28);
  border-radius: 8px;
  padding: 0 13px;
  background: rgba(9, 17, 28, 0.78);
  color: var(--text);
  font: inherit;
}

body.light .login-page-card input {
  background: rgba(255, 255, 255, 0.84);
  color: #102033;
}

.login-page-submit {
  min-height: 46px;
}

.auth-required-panel {
  max-width: 620px;
}

.superadmin-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.45fr) minmax(300px, 0.75fr);
  gap: 16px;
}

.superadmin-subnav {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  margin-bottom: 16px;
}

.superadmin-tabs,
.superadmin-actions {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 8px;
}

.superadmin-tabs button {
  display: grid;
  gap: 2px;
  min-height: 48px;
  text-align: left;
}

.superadmin-tabs button span {
  color: var(--muted);
  font-size: 11px;
  font-weight: 800;
}

.superadmin-tabs button.active {
  border-color: rgba(86, 217, 255, 0.62);
  background: linear-gradient(135deg, rgba(86, 217, 255, 0.24), rgba(84, 240, 166, 0.10));
  box-shadow: 0 12px 30px rgba(86, 217, 255, 0.12);
}

.superadmin-tenant-list,
.session-list,
.superadmin-form {
  display: grid;
  gap: 10px;
}

.superadmin-tenant,
.session-pill {
  display: grid;
  gap: 10px;
  padding: 14px;
  border: 1px solid rgba(142, 180, 213, 0.20);
  border-radius: 8px;
  background: rgba(9, 17, 28, 0.38);
}

.soft-pill {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 34px;
  padding: 7px 12px;
  border: 1px solid rgba(86, 217, 255, 0.24);
  border-radius: 999px;
  background: rgba(86, 217, 255, 0.10);
  color: var(--text);
  font-size: 12px;
  font-weight: 950;
  white-space: nowrap;
}

.soft-pill.ok {
  border-color: rgba(84, 240, 166, 0.34);
  background: rgba(84, 240, 166, 0.12);
}

.soft-pill.warning {
  border-color: rgba(255, 209, 102, 0.42);
  background: rgba(255, 209, 102, 0.14);
}

.soft-pill.danger {
  border-color: rgba(239, 68, 68, 0.42);
  background: rgba(239, 68, 68, 0.14);
}

.superadmin-row-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
}

.superadmin-tenant.is-selected,
tr.is-selected td {
  background: rgba(86, 217, 255, 0.12) !important;
  border-color: rgba(86, 217, 255, 0.38) !important;
}

body.light .superadmin-tenant,
body.light .session-pill {
  background: rgba(255, 255, 255, 0.52);
}

.superadmin-tenant strong,
.session-pill strong {
  display: block;
  font-size: 16px;
}

.superadmin-tenant span,
.session-pill span {
  color: var(--muted);
}

.superadmin-audit {
  margin: 16px 0;
}

.superadmin-backups {
  margin-bottom: 16px;
}

.backup-summary-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 10px;
  margin: 12px 0;
}

.backup-summary-grid article {
  display: grid;
  gap: 5px;
  padding: 13px;
  border: 1px solid rgba(84, 240, 166, 0.18);
  border-radius: 8px;
  background:
    linear-gradient(135deg, rgba(84, 240, 166, 0.10), transparent 58%),
    rgba(9, 17, 28, 0.30);
}

.backup-summary-grid span,
.backup-list small {
  color: var(--muted);
  font-weight: 800;
}

.backup-summary-grid strong {
  font-size: 18px;
}

.backup-list {
  display: grid;
  gap: 8px;
}

.backup-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 12px 14px;
  border: 1px solid rgba(142, 180, 213, 0.18);
  border-radius: 8px;
  background: rgba(9, 17, 28, 0.24);
}

.backup-item strong,
.backup-item small {
  display: block;
}

.superadmin-health {
  margin-bottom: 16px;
}

.superadmin-data-quality {
  margin-bottom: 16px;
}

.tenant-data-quality {
  margin-bottom: 16px;
}

.health-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(145px, 1fr));
  gap: 10px;
}

.health-grid article {
  display: grid;
  gap: 4px;
  padding: 13px;
  border: 1px solid rgba(86, 217, 255, 0.18);
  border-radius: 8px;
  background:
    linear-gradient(135deg, rgba(86, 217, 255, 0.10), transparent 58%),
    rgba(9, 17, 28, 0.28);
}

.health-grid span,
.health-grid small {
  color: var(--muted);
  font-weight: 800;
}

.health-grid strong {
  font-size: 19px;
}

.health-actions {
  display: flex;
  justify-content: flex-end;
  margin-top: 12px;
}

.production-checks {
  margin-top: 14px;
  padding: 14px;
  border: 1px solid rgba(86, 217, 255, 0.16);
  border-radius: 10px;
  background: rgba(5, 13, 22, 0.24);
}

.production-check-list {
  display: grid;
  gap: 8px;
}

.production-check {
  display: grid;
  grid-template-columns: 86px 1fr;
  gap: 10px;
  align-items: start;
  padding: 10px;
  border: 1px solid rgba(255, 255, 255, 0.10);
  border-radius: 8px;
  background: rgba(8, 18, 32, 0.38);
}

.production-check > span {
  display: inline-flex;
  justify-content: center;
  padding: 5px 8px;
  border-radius: 999px;
  font-size: 11px;
  font-weight: 900;
  text-transform: uppercase;
  color: #03111b;
  background: #61f0c7;
}

.production-check.warning > span {
  background: #ffd166;
}

.production-check.critical > span {
  background: #ff6b6b;
  color: #fff;
}

.production-check strong,
.production-check small {
  display: block;
}

.production-check small {
  color: var(--muted);
  margin-top: 3px;
}

.data-quality-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 10px;
  margin: 12px 0;
}

.data-quality-grid article,
.data-quality-tenant,
.data-quality-issue {
  border: 1px solid rgba(86, 217, 255, 0.18);
  border-radius: 8px;
  background:
    linear-gradient(135deg, rgba(86, 217, 255, 0.10), transparent 58%),
    rgba(9, 17, 28, 0.28);
}

.data-quality-grid article {
  display: grid;
  gap: 5px;
  padding: 13px;
}

.data-quality-grid span,
.data-quality-grid small,
.data-quality-tenant small,
.data-quality-issue small {
  color: var(--muted);
  font-weight: 800;
}

.data-quality-grid strong {
  font-size: 20px;
}

.data-quality-tenants,
.data-quality-list {
  display: grid;
  gap: 10px;
}

.data-quality-tenant {
  display: grid;
  gap: 10px;
  padding: 12px;
}

.data-quality-tenant.critical {
  border-color: rgba(239, 68, 68, 0.42);
}

.data-quality-tenant.warning {
  border-color: rgba(255, 209, 102, 0.42);
}

.data-quality-tenant-head,
.data-quality-issue {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 12px;
  align-items: start;
}

.data-quality-tenant-head strong,
.data-quality-tenant-head small,
.data-quality-issue strong,
.data-quality-issue small {
  display: block;
}

.data-quality-tenant-head > span {
  border-radius: 999px;
  padding: 5px 9px;
  color: #06111f;
  background: linear-gradient(135deg, var(--cyan), var(--green));
  font-size: 12px;
  font-weight: 950;
}

.quality-actions {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  gap: 8px;
}

body.planner-shell .schedule-body {
  background-image:
    linear-gradient(to right, rgba(255, 255, 255, 0.18) 1px, transparent 1px),
    linear-gradient(to right, rgba(102, 217, 255, 0.16) 1px, transparent 1px) !important;
  background-size:
    var(--planner-hour-width, 84px) 100%,
    var(--planner-quarter-width, 21px) 100% !important;
}

body.light.planner-shell .schedule-body {
  background-image:
    linear-gradient(to right, rgba(13, 28, 48, 0.20) 1px, transparent 1px),
    linear-gradient(to right, rgba(34, 124, 168, 0.18) 1px, transparent 1px) !important;
}

.schedule-task .task-headline {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
}

.schedule-task .task-tools {
  display: inline-flex;
  align-items: center;
  gap: 5px;
}

.schedule-task .task-edit-button {
  width: 24px;
  height: 24px;
  border-radius: 8px;
  border: 1px solid rgba(148, 163, 184, 0.42);
  color: #eaf6ff;
  background: rgba(15, 23, 42, 0.58);
  font-weight: 900;
  cursor: pointer;
}

.schedule-task .task-edit-button:hover {
  border-color: rgba(102, 217, 255, 0.72);
  background: rgba(14, 165, 233, 0.28);
}

.schedule-task .card-price {
  display: inline-flex;
  align-items: center;
  align-self: flex-start;
  max-width: 100%;
  margin-top: 2px;
  padding: 2px 7px;
  border-radius: 8px;
  color: #06111f;
  background: linear-gradient(135deg, #ffd166, #5eead4);
  font-size: 12px;
  font-weight: 950;
  line-height: 1.25;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

body.light .schedule-task .task-edit-button {
  color: #0b1625;
  background: rgba(255, 255, 255, 0.76);
}

.data-quality-issue {
  grid-template-columns: 98px minmax(0, 1fr);
  padding: 10px 12px;
  background: rgba(9, 17, 28, 0.20);
}

.data-quality-issue > span {
  display: inline-flex;
  justify-content: center;
  border-radius: 999px;
  padding: 5px 8px;
  font-size: 11px;
  font-weight: 950;
  text-transform: uppercase;
}

.data-quality-issue.critical > span {
  color: #fff5f5;
  background: #ef4444;
}

.data-quality-issue.warning > span {
  color: #271701;
  background: #ffd166;
}

.data-quality-issue.info > span {
  color: #06111f;
  background: #56d9ff;
}

.quality-sample-list {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 8px;
}

.quality-action {
  margin: -2px 0 0;
  color: var(--muted);
  font-size: 13px;
  font-weight: 800;
  line-height: 1.45;
}

.quality-sample-list span,
.quality-sample-button {
  display: grid;
  gap: 3px;
  min-width: 0;
  padding: 9px 10px;
  border: 1px solid rgba(142, 180, 213, 0.14);
  border-radius: 8px;
  background: rgba(9, 17, 28, 0.22);
}

.quality-sample-button {
  width: 100%;
  color: inherit;
  font: inherit;
  text-align: left;
  cursor: pointer;
}

.quality-sample-button:hover {
  border-color: rgba(86, 217, 255, 0.48);
  background:
    linear-gradient(135deg, rgba(86, 217, 255, 0.12), transparent 62%),
    rgba(9, 17, 28, 0.30);
}

.quality-sample-list strong,
.quality-sample-list small,
.quality-sample-button strong,
.quality-sample-button small {
  display: block;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.superadmin-database-plan {
  margin-bottom: 16px;
}

.database-plan-actions {
  display: flex;
  justify-content: flex-end;
  gap: 8px;
  flex-wrap: wrap;
}

.database-stage-actions {
  margin-top: 10px;
}

.database-plan-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 10px;
  margin: 12px 0;
}

.database-plan-grid article {
  display: grid;
  gap: 5px;
  padding: 13px;
  border: 1px solid rgba(86, 217, 255, 0.18);
  border-radius: 8px;
  background:
    linear-gradient(135deg, rgba(86, 217, 255, 0.10), transparent 58%),
    rgba(9, 17, 28, 0.28);
}

.database-plan-grid span,
.database-steps span {
  color: var(--muted);
  font-weight: 800;
}

.database-plan-grid strong {
  font-size: 18px;
}

.database-steps {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 8px;
  margin-top: 12px;
}

.database-steps span {
  display: grid;
  gap: 6px;
  padding: 10px;
  border: 1px solid rgba(142, 180, 213, 0.18);
  border-radius: 8px;
  background: rgba(9, 17, 28, 0.22);
}

.database-steps b {
  display: inline-flex;
  width: 24px;
  height: 24px;
  align-items: center;
  justify-content: center;
  border-radius: 999px;
  background: rgba(86, 217, 255, 0.18);
  color: var(--text);
}

.migration-preview {
  display: grid;
  gap: 12px;
  margin-top: 16px;
  padding: 14px;
  border: 1px solid rgba(86, 217, 255, 0.18);
  border-radius: 8px;
  background: rgba(9, 17, 28, 0.20);
}

.section-head.compact {
  margin-bottom: 0;
}

.migration-summary-grid,
.migration-table-grid {
  display: grid;
  grid-template-columns: repeat(6, minmax(0, 1fr));
  gap: 8px;
}

.migration-summary-grid article,
.migration-table-grid span {
  display: grid;
  gap: 4px;
  min-width: 0;
  padding: 10px;
  border: 1px solid rgba(142, 180, 213, 0.16);
  border-radius: 8px;
  background: rgba(9, 17, 28, 0.24);
}

.migration-table-grid span.warning {
  border-color: rgba(255, 209, 102, 0.42);
  background: rgba(255, 209, 102, 0.10);
}

.migration-summary-grid span,
.migration-table-grid small {
  color: var(--muted);
  font-size: 11px;
  font-weight: 850;
}

.migration-summary-grid strong,
.migration-table-grid strong {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.mono-value {
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: 13px !important;
}

.migration-issues {
  display: grid;
  gap: 8px;
}

.superadmin-automation {
  margin-bottom: 16px;
}

.automation-grid {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 10px;
  margin: 12px 0;
}

.automation-grid article {
  display: grid;
  gap: 5px;
  padding: 13px;
  border: 1px solid rgba(84, 240, 166, 0.18);
  border-radius: 8px;
  background:
    linear-gradient(135deg, rgba(84, 240, 166, 0.10), transparent 58%),
    rgba(9, 17, 28, 0.28);
}

.automation-grid span {
  color: var(--muted);
  font-weight: 800;
}

.automation-grid strong {
  font-size: 20px;
}

body.light .backup-summary-grid article,
body.light .backup-item,
body.light .health-grid article,
body.light .production-checks,
body.light .production-check,
body.light .data-quality-grid article,
body.light .data-quality-tenant,
body.light .data-quality-issue,
body.light .quality-sample-list span,
body.light .quality-sample-button,
body.light .database-plan-grid article,
body.light .database-steps span,
body.light .automation-grid article {
  background: rgba(255, 255, 255, 0.54);
}

.superadmin-audit-list {
  display: grid;
  gap: 8px;
}

.superadmin-audit-item {
  display: grid;
  grid-template-columns: minmax(220px, 1fr) minmax(110px, 0.5fr) minmax(90px, 0.35fr) minmax(150px, 0.5fr);
  gap: 12px;
  align-items: center;
  padding: 12px 14px;
  border: 1px solid rgba(142, 180, 213, 0.18);
  border-radius: 8px;
  background:
    linear-gradient(90deg, rgba(86, 217, 255, 0.10), transparent 42%),
    rgba(9, 17, 28, 0.30);
}

.superadmin-audit-item strong,
.superadmin-audit-item small {
  display: block;
}

.superadmin-audit-item small,
.superadmin-audit-item span {
  color: var(--muted);
  font-weight: 800;
}

body.light .soft-pill {
  background: rgba(9, 131, 149, 0.10);
}

body.light .superadmin-audit-item {
  background:
    linear-gradient(90deg, rgba(9, 131, 149, 0.12), transparent 42%),
    rgba(255, 255, 255, 0.52);
}

.superadmin-mini-stats {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 8px;
}

.superadmin-mini-stats span {
  display: grid;
  gap: 4px;
  padding: 10px;
  border-radius: 8px;
  background: rgba(86, 217, 255, 0.09);
  color: var(--text);
  font-weight: 900;
}

.superadmin-mini-stats small {
  color: var(--muted);
  font-size: 11px;
  font-weight: 800;
  text-transform: uppercase;
}

.superadmin-access-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

.superadmin-access-tags span {
  border: 1px solid rgba(86, 217, 255, 0.22);
  border-radius: 999px;
  padding: 5px 8px;
  background: rgba(86, 217, 255, 0.08);
  color: var(--muted);
  font-size: 11px;
  font-weight: 900;
  text-transform: uppercase;
}

.superadmin-module-picker {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px;
  border: 1px solid rgba(142, 180, 213, 0.20);
  border-radius: 8px;
  padding: 12px;
  background: rgba(9, 17, 28, 0.22);
}

.superadmin-module-picker strong {
  grid-column: 1 / -1;
}

.superadmin-module-picker label {
  display: flex;
  align-items: center;
  gap: 8px;
  min-height: 30px;
  font-size: 12px;
}

.superadmin-module-picker input[type="checkbox"] {
  width: 16px;
  min-width: 16px;
  height: 16px;
  min-height: 16px;
  padding: 0;
  accent-color: #56d9ff;
}

.superadmin-user-permissions {
  margin-top: 4px;
}

.company-user-panel {
  margin-bottom: 16px;
}

.company-user-form {
  display: grid;
  grid-template-columns: 150px repeat(3, minmax(150px, 1fr)) minmax(160px, 1fr) auto;
  gap: 10px;
  align-items: end;
}

.form-message {
  grid-column: 1 / -1;
  margin: 0;
  padding: 10px 12px;
  border: 1px solid rgba(255, 209, 102, 0.38);
  border-radius: 8px;
  background: rgba(255, 209, 102, 0.12);
  color: var(--text);
  font-size: 13px;
  font-weight: 850;
}

.form-message.error {
  border-color: rgba(239, 68, 68, 0.40);
  background: rgba(239, 68, 68, 0.12);
}

.company-user-form label {
  display: grid;
  gap: 5px;
  color: var(--muted);
  font-size: 12px;
  font-weight: 850;
}

.company-user-form input,
.company-user-form select {
  min-height: 40px;
  border: 1px solid rgba(142, 180, 213, 0.24);
  border-radius: 8px;
  padding: 0 11px;
  background: rgba(9, 17, 28, 0.52);
  color: var(--text);
  font: inherit;
}

body.light .company-user-form input,
body.light .company-user-form select {
  background: rgba(255, 255, 255, 0.78);
  color: #102033;
}

.company-user-list {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 12px;
}

.superadmin-form-actions {
  display: flex;
  justify-content: flex-end;
  gap: 8px;
  flex-wrap: wrap;
}

.superadmin-readiness {
  margin-bottom: 16px;
}

.readiness-score-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
  margin: 14px 0;
}

.readiness-score-grid article {
  display: grid;
  gap: 4px;
  padding: 16px;
  border: 1px solid rgba(86, 217, 255, 0.20);
  border-radius: 8px;
  background:
    linear-gradient(135deg, rgba(86, 217, 255, 0.12), transparent 56%),
    rgba(9, 17, 28, 0.34);
}

.readiness-score-grid span,
.readiness-score-grid small {
  color: var(--muted);
  font-weight: 800;
}

.readiness-score-grid strong {
  font-size: clamp(30px, 5vw, 52px);
  line-height: 0.95;
  letter-spacing: 0;
}

.readiness-list {
  display: grid;
  gap: 8px;
  margin-top: 14px;
}

.readiness-list.compact {
  margin-top: 0;
}

.readiness-item {
  display: grid;
  grid-template-columns: 118px minmax(0, 1fr);
  gap: 10px;
  align-items: start;
  padding: 12px;
  border: 1px solid rgba(142, 180, 213, 0.18);
  border-radius: 8px;
  background: rgba(9, 17, 28, 0.24);
}

.readiness-item > span {
  display: inline-flex;
  justify-content: center;
  border-radius: 999px;
  padding: 5px 8px;
  font-size: 11px;
  font-weight: 950;
  text-transform: uppercase;
  letter-spacing: 0;
}

.readiness-item.done > span {
  color: #052316;
  background: #54f0a6;
}

.readiness-item.partial > span {
  color: #271701;
  background: #ffd166;
}

.readiness-item.todo > span {
  color: #fff5f5;
  background: #ef4444;
}

.readiness-item strong,
.readiness-item small {
  display: block;
}

.readiness-item small {
  margin-top: 3px;
  color: var(--muted);
}

body.light .readiness-score-grid article,
body.light .readiness-item {
  background:
    linear-gradient(135deg, rgba(86, 217, 255, 0.14), transparent 56%),
    rgba(255, 255, 255, 0.68);
}

.status-readiness {
  margin-bottom: 16px;
}

.status-lanes {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 12px;
  margin-top: 14px;
}

.status-lane {
  display: grid;
  align-content: start;
  gap: 10px;
  padding: 12px;
  border: 1px solid rgba(86, 217, 255, 0.16);
  border-radius: 8px;
  background:
    linear-gradient(135deg, rgba(86, 217, 255, 0.08), transparent 62%),
    rgba(9, 17, 28, 0.24);
}

.status-lane.done {
  border-color: rgba(84, 240, 166, 0.24);
}

.status-lane.partial {
  border-color: rgba(255, 209, 102, 0.24);
}

.status-lane.todo {
  border-color: rgba(239, 68, 68, 0.24);
}

.status-lane-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
}

.status-lane-head span {
  color: var(--muted);
  font-size: 12px;
  font-weight: 900;
}

.status-next-steps {
  display: grid;
  gap: 8px;
  margin-top: 14px;
}

.status-step {
  display: grid;
  gap: 4px;
  width: 100%;
  padding: 12px 14px;
  border: 1px solid rgba(86, 217, 255, 0.18);
  border-radius: 8px;
  background:
    linear-gradient(90deg, rgba(86, 217, 255, 0.10), transparent 48%),
    rgba(9, 17, 28, 0.24);
  color: var(--text);
  text-align: left;
  cursor: pointer;
}

.status-step:hover {
  border-color: rgba(86, 217, 255, 0.42);
  transform: translateY(-1px);
}

.status-step strong,
.status-step small {
  display: block;
}

.status-step small {
  color: var(--muted);
  font-weight: 800;
}

body.light .status-lane,
body.light .status-step {
  background: rgba(255, 255, 255, 0.54);
}

.telematics-connectors {
  margin-bottom: 16px;
}

.telematics-import-panel {
  margin-bottom: 16px;
}

.telematics-import-hints {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
  margin-top: 12px;
}

.telematics-import-hints span {
  display: block;
  border: 1px solid rgba(86, 217, 255, 0.16);
  border-radius: 8px;
  padding: 11px 13px;
  background:
    linear-gradient(135deg, rgba(20, 184, 166, 0.10), transparent 58%),
    rgba(9, 17, 28, 0.24);
  color: var(--muted);
  font-weight: 850;
}

.telematics-connect-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 10px;
}

.telematics-connect-grid article {
  display: grid;
  gap: 5px;
  padding: 12px 14px;
  border: 1px solid rgba(86, 217, 255, 0.18);
  border-radius: 8px;
  background:
    linear-gradient(135deg, rgba(86, 217, 255, 0.10), transparent 58%),
    rgba(9, 17, 28, 0.26);
}

.telematics-connect-grid span {
  color: var(--muted);
  font-weight: 800;
}

.telematics-card {
  position: relative;
  overflow: hidden;
}

.telematics-card::before {
  content: "";
  position: absolute;
  inset: 0 auto 0 0;
  width: 4px;
  background: rgba(142, 180, 213, 0.32);
}

.telematics-card.telemetry-online::before,
.status.online {
  background: linear-gradient(180deg, #54f0a6, #19c37d);
}

.telematics-card.telemetry-idle::before,
.status.idle {
  background: linear-gradient(180deg, #ffd166, #f59e0b);
}

.telematics-card.telemetry-offline::before,
.telematics-card.telemetry-warning::before,
.status.offline,
.status.warning {
  background: linear-gradient(180deg, #ef4444, #fb7185);
}

.status.online,
.status.idle,
.status.offline,
.status.warning {
  color: #07111f;
}

body.light .telematics-connect-grid article {
  background: rgba(255, 255, 255, 0.56);
}

body.light .telematics-import-hints span {
  background: rgba(255, 255, 255, 0.56);
}

@media (max-width: 760px) {
  .telematics-import-hints,
  .telematics-connect-grid {
    grid-template-columns: 1fr;
  }
}

.notice.success {
  border: 1px solid rgba(84, 240, 166, 0.38);
  border-radius: 8px;
  padding: 12px 14px;
  background: rgba(84, 240, 166, 0.10);
  color: #9affc9;
  font-weight: 900;
}

body.light .notice.success {
  color: #047857;
  background: rgba(16, 185, 129, 0.12);
}

.finance-hero {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
}

.finance-hero label {
  display: grid;
  gap: 7px;
  color: var(--muted);
  font-weight: 900;
}

.finance-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(360px, 0.86fr);
  gap: 16px;
}

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

.finance-import-actions {
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
  justify-content: flex-end;
}

.file-button {
  min-height: 38px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 8px;
  padding: 0 14px;
  color: #061016;
  background: linear-gradient(135deg, #56d9ff, #54f0a6);
  font-weight: 950;
  cursor: pointer;
}

.finance-list,
.finance-tabs {
  display: grid;
  gap: 10px;
}

.finance-tabs > strong {
  margin-top: 4px;
  color: var(--muted);
  text-transform: uppercase;
  font-size: 12px;
}

.finance-payment-row,
.finance-doc-row,
.finance-match-row,
.finance-automation-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto auto;
  gap: 12px;
  align-items: center;
  border: 1px solid rgba(142, 180, 213, 0.18);
  border-radius: 8px;
  padding: 12px;
  background: rgba(9, 17, 28, 0.34);
}

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

.finance-payment-row.incoming,
.finance-doc-row.status-sent,
.finance-doc-row.status-overdue {
  border-left: 4px solid rgba(86, 217, 255, 0.82);
}

.finance-payment-row.outgoing,
.finance-doc-row.cost-order,
.finance-doc-row.cost-expense {
  border-left: 4px solid rgba(255, 209, 102, 0.88);
}

.finance-payment-row.status-unmatched {
  border-left-color: rgba(255, 91, 128, 0.92);
}

.finance-payment-row.status-matched,
.finance-payment-row.status-paid,
.finance-doc-row.status-paid {
  border-left-color: rgba(84, 240, 166, 0.90);
}

.finance-doc-row.cost-expense {
  border-left-color: rgba(167, 139, 250, 0.90);
}

.finance-payment-row .action-edit,
.finance-doc-row .action-edit,
.finance-match-row .action-edit {
  justify-self: end;
}

.finance-automation-panel {
  margin-bottom: 16px;
}

.automation-summary-row {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 10px;
  margin-bottom: 12px;
}

.automation-summary-row span {
  border: 1px solid rgba(142, 180, 213, 0.18);
  border-radius: 8px;
  padding: 10px 12px;
  background: rgba(9, 17, 28, 0.28);
  color: var(--muted);
  font-size: 12px;
  font-weight: 800;
}

.automation-summary-row strong {
  display: block;
  color: var(--text);
  font-size: 18px;
}

.finance-automation-row {
  grid-template-columns: minmax(0, 1fr) auto auto;
  border-left: 4px solid rgba(255, 209, 102, 0.75);
}

.finance-automation-row.status-approved {
  border-left-color: rgba(84, 240, 166, 0.85);
}

.finance-automation-row.status-sent {
  border-left-color: rgba(63, 224, 208, 0.9);
  opacity: 0.9;
}

.finance-automation-row.status-rejected,
.finance-automation-row.status-failed {
  border-left-color: rgba(239, 68, 68, 0.85);
}

.finance-automation-actions {
  display: flex;
  justify-content: flex-end;
  gap: 8px;
  flex-wrap: wrap;
}

body.light .finance-payment-row,
body.light .finance-doc-row,
body.light .finance-match-row,
body.light .finance-automation-row {
  background: rgba(255, 255, 255, 0.56);
}

body.light .automation-summary-row span {
  background: rgba(255, 255, 255, 0.52);
}

.finance-payment-row strong,
.finance-doc-row strong,
.finance-match-row strong,
.finance-automation-row strong {
  display: block;
}

.finance-automation-row small {
  display: block;
  margin-top: 4px;
  color: var(--muted);
  font-size: 12px;
  font-weight: 800;
}

.finance-payment-row span,
.finance-doc-row span,
.finance-match-row span,
.finance-automation-row span {
  color: var(--muted);
  font-size: 12px;
}

.finance-agent-note {
  display: grid;
  gap: 4px;
  border: 1px solid rgba(84, 240, 166, 0.22);
  border-radius: 8px;
  padding: 12px;
  background: rgba(84, 240, 166, 0.08);
}

@media (max-width: 980px) {
  .finance-grid,
  .finance-payment-row,
  .finance-doc-row,
  .finance-match-row,
  .finance-automation-row,
  .finance-payment-row,
  .automation-summary-row {
    grid-template-columns: 1fr;
  }

  .finance-hero,
  .finance-import-panel {
    align-items: stretch;
    flex-direction: column;
  }
}

@media (max-width: 980px) {
  .superadmin-grid,
  .superadmin-mini-stats,
  .superadmin-module-picker,
  .status-lanes,
  .telematics-connect-grid,
  .readiness-score-grid,
  .backup-summary-grid,
  .data-quality-grid,
  .quality-sample-list,
  .database-plan-grid,
  .database-steps,
  .migration-summary-grid,
  .migration-table-grid,
  .automation-grid,
  .health-grid,
  .company-user-form,
  .data-quality-tenant-head,
  .data-quality-issue,
  .readiness-item,
  .superadmin-audit-item {
    grid-template-columns: 1fr;
  }

  .superadmin-subnav {
    align-items: stretch;
    flex-direction: column;
  }

  .superadmin-tabs,
  .superadmin-actions {
    width: 100%;
  }

  .superadmin-tabs button,
  .superadmin-actions button {
    flex: 1 1 180px;
  }

  .backup-item {
    align-items: stretch;
    flex-direction: column;
  }
}

.main {
  padding: 16px 18px !important;
  background:
    radial-gradient(circle at 16% 4%, rgba(86, 217, 255, 0.11), transparent 34rem),
    radial-gradient(circle at 86% 0%, rgba(84, 240, 166, 0.09), transparent 30rem) !important;
}

body.light .main {
  background:
    radial-gradient(circle at 16% 4%, rgba(14, 165, 233, 0.13), transparent 34rem),
    radial-gradient(circle at 86% 0%, rgba(16, 185, 129, 0.10), transparent 30rem),
    linear-gradient(145deg, #f7fbff 0%, #edf5fb 100%) !important;
}

.topbar {
  gap: 14px !important;
  margin-bottom: 14px !important;
}

h1 {
  font-size: clamp(23px, 2.4vw, 34px) !important;
}

h2 {
  font-size: 20px !important;
}

.top-actions .primary,
.top-actions .ghost,
.search,
.top-module-filters label {
  min-height: 38px !important;
  height: 38px !important;
}

.top-actions .primary,
.top-actions .ghost {
  padding: 0 12px;
}

.top-module-filters input,
.top-module-filters select {
  height: 28px !important;
}

.theme-icon-button {
  width: 42px;
  min-width: 42px;
  padding: 0 !important;
  border-radius: 999px;
  font-size: 18px;
  line-height: 1;
}

.side-login-button {
  width: 100%;
  margin-top: 12px;
  justify-content: center;
}

.side-panel,
.hero-strip,
.stat,
.table-wrap,
.module-panel,
.ops-card,
.person-card,
.vehicle-card,
.filter-panel,
.order-editor-panel,
.order-editor-shipping {
  border-color: rgba(142, 180, 213, 0.20) !important;
  background:
    linear-gradient(135deg, rgba(86, 217, 255, 0.075), transparent 46%),
    rgba(14, 21, 32, 0.66) !important;
  backdrop-filter: blur(18px);
  box-shadow: var(--shadow);
}

body.light .side-panel,
body.light .hero-strip,
body.light .stat,
body.light .table-wrap,
body.light .module-panel,
body.light .ops-card,
body.light .person-card,
body.light .vehicle-card,
body.light .filter-panel,
body.light .order-editor-panel,
body.light .order-editor-shipping {
  border-color: rgba(15, 23, 42, 0.13) !important;
  background:
    linear-gradient(135deg, rgba(86, 217, 255, 0.18), transparent 42%),
    rgba(255, 255, 255, 0.66) !important;
  box-shadow: 0 18px 60px rgba(36, 56, 76, 0.16);
}

/* Payments and brand polish */
.brand-mark,
.brand-menu-button.brand-mark {
  width: 58px;
  height: 58px;
  min-width: 58px;
  padding: 0 !important;
  border: 1px solid rgba(123, 232, 255, 0.44) !important;
  border-radius: 16px !important;
  color: #dffbff !important;
  background:
    radial-gradient(circle at 35% 28%, rgba(255, 255, 255, 0.26), transparent 28%),
    linear-gradient(145deg, rgba(86, 217, 255, 0.96), rgba(84, 240, 166, 0.86)) !important;
  box-shadow:
    0 18px 42px rgba(0, 0, 0, 0.30),
    0 0 34px rgba(86, 217, 255, 0.28),
    inset 0 1px 0 rgba(255, 255, 255, 0.44) !important;
  display: grid !important;
  place-items: center !important;
  font-size: 21px !important;
  line-height: 1 !important;
}

.brand-mark::before,
.brand-menu-button.brand-mark::before {
  content: "";
  position: absolute;
  inset: 7px;
  border-radius: 13px;
  border: 1px solid rgba(6, 16, 22, 0.24);
  background:
    linear-gradient(135deg, rgba(5, 13, 22, 0.72), rgba(9, 30, 42, 0.56)),
    radial-gradient(circle at 50% 50%, rgba(86, 217, 255, 0.18), transparent 54%);
  z-index: 1;
}

.brand-mark::after,
.brand-menu-button.brand-mark::after {
  content: "";
  position: absolute;
  inset: -38%;
  background: conic-gradient(from 120deg, transparent, rgba(255, 255, 255, 0.35), transparent 34%);
  opacity: 0.34;
  animation: login-packet 8s linear infinite;
  z-index: 0;
}

.logo-letter {
  z-index: 2;
  display: grid;
  place-items: center;
  width: 34px;
  height: 34px;
  border-radius: 50%;
  color: #dffbff;
  background: rgba(5, 12, 20, 0.86);
  box-shadow:
    0 0 0 1px rgba(123, 232, 255, 0.34),
    0 0 18px rgba(86, 217, 255, 0.24);
}

body.sidebar-collapsed .brand-mark,
body.sidebar-collapsed .brand-menu-button.brand-mark {
  width: 58px;
  height: 58px;
}

body.sidebar-collapsed .logo-letter {
  width: 34px;
  height: 34px;
}

.superadmin-ares-tools {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 8px 10px;
  align-items: end;
  padding: 12px;
  border: 1px solid rgba(86, 217, 255, 0.24);
  border-radius: 8px;
  background:
    linear-gradient(135deg, rgba(86, 217, 255, 0.12), transparent 58%),
    rgba(9, 17, 28, 0.22);
}

.superadmin-ares-tools .muted {
  grid-column: 1 / -1;
  font-size: 12px;
}

body.light .superadmin-ares-tools {
  background:
    linear-gradient(135deg, rgba(86, 217, 255, 0.18), transparent 58%),
    rgba(255, 255, 255, 0.62);
}

@keyframes dion-logo-orbit {
  to {
    transform: rotate(360deg);
  }
}

@keyframes dion-logo-pulse {
  0%,
  100% {
    box-shadow:
      inset 0 0 0 1px rgba(123, 232, 255, 0.28),
      0 0 18px rgba(86, 217, 255, 0.24);
  }
  50% {
    box-shadow:
      inset 0 0 0 1px rgba(84, 240, 166, 0.46),
      0 0 28px rgba(84, 240, 166, 0.34);
  }
}

@keyframes dion-letter-breathe {
  0%,
  100% {
    transform: scale(1);
  }
  50% {
    transform: scale(1.05);
  }
}

.brand-mark,
.brand-menu-button.brand-mark,
.login-page-brand .brand-mark,
.app-loader .brand-mark {
  position: relative !important;
  overflow: hidden !important;
  isolation: isolate !important;
  width: 58px !important;
  height: 58px !important;
  min-width: 58px !important;
  border-radius: 18px !important;
  border: 1px solid rgba(123, 232, 255, 0.48) !important;
  background:
    radial-gradient(circle at 28% 22%, rgba(255, 255, 255, 0.34), transparent 27%),
    radial-gradient(circle at 76% 78%, rgba(84, 240, 166, 0.26), transparent 34%),
    linear-gradient(145deg, #56d9ff 0%, #23b8df 46%, #54f0a6 100%) !important;
  box-shadow:
    0 18px 42px rgba(0, 0, 0, 0.32),
    0 0 38px rgba(86, 217, 255, 0.30),
    inset 0 1px 0 rgba(255, 255, 255, 0.46) !important;
}

.animated-logo.brand-mark::before,
.animated-logo.brand-menu-button.brand-mark::before {
  inset: 7px !important;
  border-radius: 14px !important;
  border: 1px solid rgba(6, 16, 22, 0.30) !important;
  background:
    linear-gradient(135deg, rgba(5, 13, 22, 0.82), rgba(8, 30, 44, 0.60)),
    radial-gradient(circle at 50% 50%, rgba(86, 217, 255, 0.24), transparent 58%) !important;
  animation: dion-logo-pulse 3.6s ease-in-out infinite !important;
}

.animated-logo.brand-mark::after,
.animated-logo.brand-menu-button.brand-mark::after {
  inset: -45% !important;
  background:
    conic-gradient(from 90deg, transparent 0deg, rgba(255, 255, 255, 0.54) 32deg, transparent 72deg, rgba(84, 240, 166, 0.34) 118deg, transparent 176deg, rgba(86, 217, 255, 0.30) 250deg, transparent 320deg) !important;
  opacity: 0.54 !important;
  animation: dion-logo-orbit 5.6s linear infinite !important;
}

.brand-mark .logo-letter,
.brand-menu-button.brand-mark .logo-letter,
.login-page-brand .logo-letter,
.app-loader .logo-letter {
  width: 34px !important;
  height: 34px !important;
  border-radius: 50% !important;
  color: #e9fdff !important;
  background:
    radial-gradient(circle at 35% 25%, rgba(255, 255, 255, 0.16), transparent 34%),
    rgba(5, 12, 20, 0.90) !important;
  text-shadow: 0 0 16px rgba(86, 217, 255, 0.76);
  animation: dion-letter-breathe 4.2s ease-in-out infinite;
}

dialog[data-editor-collection="payments"] {
  width: min(1120px, calc(100vw - 32px)) !important;
}

dialog[data-editor-collection="payments"] .form-grid {
  grid-template-columns: minmax(0, 1fr) !important;
  align-items: stretch;
}

.payment-editor-layout {
  grid-column: 1 / -1;
  display: grid;
  grid-template-columns: minmax(0, 0.95fr) minmax(0, 1.05fr);
  gap: 12px;
  width: 100%;
}

.payment-editor-note {
  grid-column: 1 / -1;
}

.payment-editor-pair {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
}

.payment-editor-layout .field.wide {
  grid-column: 1 / -1;
}

.payment-editor-layout .order-editor-panel,
.payment-editor-layout .order-editor-shipping {
  gap: 10px;
  min-width: 0;
}

@media (max-width: 860px) {
  .payment-editor-layout,
  .payment-editor-pair {
    grid-template-columns: 1fr;
  }
}

body[data-module="orders"] .stat,
body[data-module="orders"] .order-card {
  background:
    linear-gradient(135deg, rgba(86, 217, 255, 0.09), transparent 44%),
    rgba(14, 21, 32, 0.58) !important;
}

body.light[data-module="orders"] .stat,
body.light[data-module="orders"] .order-card {
  background:
    linear-gradient(135deg, rgba(86, 217, 255, 0.18), transparent 42%),
    rgba(255, 255, 255, 0.72) !important;
}

body[data-module="invoicing"] .main {
  background:
    radial-gradient(circle at 12% 6%, rgba(86, 217, 255, 0.14), transparent 34rem),
    radial-gradient(circle at 82% 1%, rgba(84, 240, 166, 0.12), transparent 32rem),
    linear-gradient(145deg, rgba(5, 10, 18, 0.96), rgba(9, 23, 36, 0.96)) !important;
}

body.light[data-module="invoicing"] .main {
  background:
    radial-gradient(circle at 12% 6%, rgba(86, 217, 255, 0.24), transparent 34rem),
    radial-gradient(circle at 82% 1%, rgba(84, 240, 166, 0.18), transparent 32rem),
    linear-gradient(145deg, #f6fbff 0%, #edf7fb 100%) !important;
}

.order-card {
  position: relative;
  overflow: hidden;
  padding-right: 24px;
  --order-status-color: rgba(255, 198, 109, 0.95);
}

.order-card::after {
  content: "";
  position: absolute;
  inset: 0 0 0 auto;
  width: 7px;
  background: var(--order-status-color);
  box-shadow: 0 0 22px color-mix(in srgb, var(--order-status-color), transparent 55%);
}

.order-card.status-new {
  --order-status-color: #ffc66d;
}

.order-card.status-planned {
  --order-status-color: #56d9ff;
}

.order-card.status-progress {
  --order-status-color: #3da8ff;
}

.order-card.status-done {
  --order-status-color: #54f0a6;
}

.order-card.status-invoiced {
  --order-status-color: #9b8cff;
}

.order-card.status-cancelled {
  --order-status-color: #ff6f7d;
}

.status.planned,
.status.progress {
  color: var(--cyan);
  background: rgba(86, 217, 255, 0.10);
}

.dialog-card {
  max-height: calc(100vh - 28px);
  overflow: auto;
  padding: 14px !important;
}

#editorDialog .dialog-actions {
  position: sticky;
  bottom: -14px;
  z-index: 8;
  margin: 12px -14px -14px;
  padding: 12px 14px;
  border-top: 1px solid rgba(86, 217, 255, 0.16);
  background:
    linear-gradient(135deg, rgba(86, 217, 255, 0.08), transparent 48%),
    rgba(8, 14, 25, 0.92);
  backdrop-filter: blur(18px);
}

body.light #editorDialog .dialog-actions {
  border-top-color: rgba(15, 23, 42, 0.12);
  background:
    linear-gradient(135deg, rgba(14, 165, 233, 0.15), transparent 48%),
    rgba(247, 251, 255, 0.94);
}

dialog[data-editor-collection="orders"],
dialog[data-editor-collection="rides"] {
  width: min(1120px, calc(100vw - 32px)) !important;
  max-height: calc(100vh - 28px) !important;
  overflow: hidden !important;
}

dialog[data-editor-collection="orders"] .dialog-card,
dialog[data-editor-collection="rides"] .dialog-card {
  max-height: calc(100vh - 28px);
  overflow-x: hidden;
  overflow-y: auto;
}

dialog[data-editor-collection="rideDetail"],
dialog[data-editor-collection="orderDetail"] {
  width: min(1180px, calc(100vw - 32px)) !important;
  max-height: calc(100vh - 28px) !important;
  overflow: hidden !important;
}

dialog[data-editor-collection="rideDetail"] .dialog-card,
dialog[data-editor-collection="orderDetail"] .dialog-card {
  max-height: calc(100vh - 28px);
  overflow-x: hidden;
  overflow-y: auto;
}

dialog[data-editor-collection="companyUser"] {
  width: min(920px, calc(100vw - 32px)) !important;
  max-height: calc(100vh - 28px) !important;
  overflow: hidden !important;
}

dialog[data-editor-collection="companyUser"] .dialog-card {
  max-height: calc(100vh - 28px);
  overflow-x: hidden;
  overflow-y: auto;
}

dialog[data-editor-collection="tachoImport"] {
  width: min(960px, calc(100vw - 32px)) !important;
  max-height: calc(100vh - 28px) !important;
  overflow: hidden !important;
}

dialog[data-editor-collection="tachoImport"] .dialog-card {
  max-height: calc(100vh - 28px);
  overflow-x: hidden;
  overflow-y: auto;
}

dialog[data-editor-collection="invoiceDraft"] {
  width: min(1180px, calc(100vw - 32px)) !important;
  max-height: calc(100vh - 28px) !important;
  overflow: hidden !important;
}

dialog[data-editor-collection="invoiceDraft"] .dialog-card {
  max-height: calc(100vh - 28px);
  overflow-x: hidden;
  overflow-y: auto;
}

dialog[data-editor-collection="invoiceDraft"] .form-grid {
  grid-template-columns: minmax(0, 1fr) !important;
  align-items: stretch;
}

dialog[data-editor-collection="invoiceDraft"] .invoice-draft-layout {
  grid-column: 1 / -1;
  width: 100%;
}

dialog[data-editor-collection="orders"] .form-grid {
  gap: 10px !important;
  margin-top: 12px !important;
}

dialog[data-editor-collection="orders"] .order-editor-layout {
  gap: 12px !important;
}

dialog[data-editor-collection="orders"] .order-editor-panel,
dialog[data-editor-collection="orders"] .order-editor-shipping {
  gap: 10px !important;
  padding: 12px !important;
}

dialog[data-editor-collection="orders"] .order-editor-title {
  padding-bottom: 8px !important;
}

dialog[data-editor-collection="orders"] .order-calc-summary {
  grid-template-columns: 1fr !important;
  gap: 0 !important;
  min-height: 0 !important;
  padding: 0 !important;
}

dialog[data-editor-collection="orders"] .order-calc-summary div {
  padding: 8px 10px !important;
}

dialog[data-editor-collection="orders"] .field {
  gap: 5px;
}

dialog[data-editor-collection="orders"] .field input,
dialog[data-editor-collection="orders"] .field select,
dialog[data-editor-collection="orders"] .field textarea {
  min-height: 38px;
  padding: 8px 10px !important;
}

dialog[data-editor-collection="orders"] .field label {
  font-size: 12px;
}

dialog[data-editor-collection="orders"] .field-key-orderDate {
  max-width: 210px;
}

dialog[data-editor-collection="orders"] .field-key-carrier {
  width: 100%;
}

body.planner-shell .planner-console {
  border-color: rgba(86, 217, 255, 0.18) !important;
  background:
    linear-gradient(135deg, rgba(86, 217, 255, 0.045), transparent 38%),
    rgba(7, 12, 22, 0.08) !important;
  backdrop-filter: blur(10px);
}

body.planner-shell .planner-controlbar {
  display: flex !important;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  margin-bottom: 12px;
  border: 0;
  border-radius: 0;
  box-shadow: none;
  background: transparent !important;
  backdrop-filter: none !important;
}

body.planner-shell .planner-toolbar-original {
  min-height: 64px !important;
  padding: 10px 14px !important;
  background: rgba(9, 15, 27, 0.30) !important;
  backdrop-filter: blur(18px);
}

body.planner-shell .planner-controlbar.planner-toolbar-original {
  background: transparent !important;
  backdrop-filter: none !important;
}

body.planner-shell .planner-title {
  flex: 0 0 auto;
  min-width: 160px;
}

body.planner-shell .planner-actionbar {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  flex-wrap: wrap;
  gap: 6px;
  margin-left: auto;
  min-width: 0;
}

body.planner-shell .planner-actionbar .planner-week-tabs {
  flex: 0 0 auto !important;
  width: auto !important;
  max-width: min(42vw, 430px);
  min-width: 0 !important;
  gap: 6px;
}

body.planner-shell .planner-actionbar .planner-week-tabs button {
  min-width: 56px;
  padding-inline: 7px;
}

body.planner-shell .planner-actionbar .planner-view-menu summary {
  min-height: 38px;
  padding: 0 12px;
}

body.planner-shell .planner-actionbar .planner-round,
body.planner-shell .planner-actionbar .planner-theme-toggle {
  width: 40px;
  min-height: 38px;
}

body.planner-shell .planner-actionbar .planner-date-pill {
  width: 148px;
  min-height: 38px;
}

body.planner-shell .planner-title .eyebrow {
  margin-bottom: 4px;
  color: var(--cyan);
}

body.planner-shell .planner-title h2 {
  font-size: 26px !important;
  line-height: 1;
}

body.planner-shell .planner-new-ride {
  min-height: 38px !important;
  height: 38px !important;
  padding: 0 12px !important;
  border-radius: 8px !important;
  box-shadow: none !important;
}

body.planner-shell .planner-transfer-toggle {
  margin-left: 10px;
  min-height: 38px !important;
  height: 38px !important;
  padding: 0 12px !important;
  border-radius: 8px !important;
  box-shadow: none !important;
}

.schedule-task.transfer-green {
  --transfer-stripe: rgba(16, 185, 129, 0.26);
  --transfer-stripe-soft: rgba(16, 185, 129, 0.06);
  border-color: #10b981 !important;
  border-left-color: #10b981 !important;
}

.schedule-task.transfer-yellow {
  --transfer-stripe: rgba(245, 158, 11, 0.28);
  --transfer-stripe-soft: rgba(245, 158, 11, 0.07);
  border-color: #f59e0b !important;
  border-left-color: #f59e0b !important;
}

.schedule-task.transfer-red {
  --transfer-stripe: rgba(239, 68, 68, 0.30);
  --transfer-stripe-soft: rgba(239, 68, 68, 0.08);
  border-color: #ef4444 !important;
  border-left-color: #ef4444 !important;
}

body.planner-shell .schedule-task {
  box-sizing: border-box;
  height: 104px;
  max-height: 104px;
  overflow: hidden;
}

body.planner-shell .schedule-task.transfer {
  background:
    repeating-linear-gradient(135deg,
      var(--transfer-stripe, rgba(16, 185, 129, 0.24)) 0 10px,
      var(--transfer-stripe, rgba(16, 185, 129, 0.24)) 10px,
      transparent 10px,
      transparent 22px
    ),
    linear-gradient(135deg, var(--transfer-stripe-soft, rgba(16, 185, 129, 0.06)), rgba(7, 15, 28, 0.82)),
    rgba(13, 34, 48, 0.84) !important;
}

body.planner-shell .schedule-grid {
  background: rgba(7, 12, 22, 0.035) !important;
}

body.planner-shell .schedule-left,
body.planner-shell .schedule-corner,
body.planner-shell .schedule-vehicle,
body.planner-shell .schedule-body {
  background-color: rgba(7, 12, 22, 0.055) !important;
  backdrop-filter: blur(8px);
}

body.planner-shell .schedule-row {
  background: rgba(7, 12, 22, 0.025) !important;
}

.schedule-vehicle.day-off {
  box-shadow: inset 4px 0 0 #f59e0b;
}

.schedule-vehicle.day-off .vehicle-status.day-off {
  color: #7c2d12;
  border-color: rgba(245, 158, 11, 0.58);
  background: #fbbf24;
}

.schedule-row.day-off-row {
  background:
    repeating-linear-gradient(135deg, rgba(245, 158, 11, 0.09) 0 12px, rgba(245, 158, 11, 0.02) 12px 24px),
    rgba(7, 12, 22, 0.025) !important;
}

.schedule-day-off-label {
  position: sticky;
  left: 14px;
  top: 10px;
  z-index: 2;
  display: inline-flex;
  align-items: center;
  min-height: 30px;
  margin: 10px 0 0 14px;
  padding: 4px 10px;
  border: 1px solid rgba(245, 158, 11, 0.46);
  border-radius: 8px;
  color: #fed7aa;
  background: rgba(120, 53, 15, 0.60);
  font-weight: 950;
  pointer-events: none;
}

.day-off-popup-backdrop {
  position: fixed;
  top: 94px;
  right: 18px;
  bottom: auto;
  left: auto;
  z-index: 32;
  display: grid;
  place-items: end;
  width: min(440px, calc(100vw - 28px));
  padding: 0;
  background: transparent;
  backdrop-filter: none;
  pointer-events: none;
}

.day-off-popup {
  width: 100%;
  display: grid;
  gap: 14px;
  border: 1px solid rgba(245, 158, 11, 0.36);
  border-radius: 8px;
  padding: 18px;
  color: var(--text);
  background:
    linear-gradient(135deg, rgba(245, 158, 11, 0.14), transparent 48%),
    rgba(11, 18, 32, 0.94);
  box-shadow: 0 28px 80px rgba(0, 0, 0, 0.38);
  pointer-events: auto;
}

.day-off-popup h2 {
  margin-top: 3px;
  font-size: 24px;
  letter-spacing: 0;
}

.day-off-popup-list {
  display: grid;
  gap: 7px;
}

.day-off-popup-list span {
  border: 1px solid rgba(245, 158, 11, 0.28);
  border-radius: 8px;
  padding: 8px 10px;
  color: #fed7aa;
  background: rgba(245, 158, 11, 0.10);
  font-weight: 900;
}

@media (max-width: 760px) {
  .day-off-popup-backdrop {
    top: 76px;
    right: 12px;
    left: 12px;
    width: auto;
  }
}

body.planner-shell .schedule-hours {
  background: rgba(7, 12, 22, 0.54) !important;
}

body.light.planner-shell .planner-console {
  background:
    linear-gradient(135deg, rgba(86, 217, 255, 0.14), transparent 40%),
    rgba(255, 255, 255, 0.18) !important;
}

body.light.planner-shell .planner-toolbar-original {
  background: rgba(255, 255, 255, 0.40) !important;
}

body.light.planner-shell .schedule-grid {
  background: rgba(255, 255, 255, 0.10) !important;
}

body.light.planner-shell .schedule-left,
body.light.planner-shell .schedule-corner,
body.light.planner-shell .schedule-vehicle,
body.light.planner-shell .schedule-body {
  background-color: rgba(255, 255, 255, 0.14) !important;
}

body.light.planner-shell .schedule-row.day-off-row {
  background:
    repeating-linear-gradient(135deg, rgba(245, 158, 11, 0.16) 0 12px, rgba(245, 158, 11, 0.04) 12px 24px),
    rgba(255, 255, 255, 0.12) !important;
}

body.light .schedule-day-off-label,
body.light .day-off-popup {
  color: #7c2d12;
  background:
    linear-gradient(135deg, rgba(245, 158, 11, 0.20), transparent 48%),
    rgba(255, 255, 255, 0.66);
}

body.light .day-off-popup-list span {
  color: #92400e;
  background: rgba(245, 158, 11, 0.15);
}

body.attendance-shell .main {
  background:
    radial-gradient(circle at 16% 4%, rgba(86, 217, 255, 0.11), transparent 34rem),
    radial-gradient(circle at 86% 0%, rgba(84, 240, 166, 0.09), transparent 30rem) !important;
}

body.attendance-shell .module-panel,
body.attendance-shell .stat {
  border-color: rgba(86, 217, 255, 0.18) !important;
  background:
    linear-gradient(135deg, rgba(86, 217, 255, 0.06), transparent 42%),
    rgba(7, 12, 22, 0.34) !important;
  backdrop-filter: blur(16px);
}

body.light.attendance-shell .module-panel,
body.light.attendance-shell .stat {
  border-color: rgba(15, 23, 42, 0.12) !important;
  background:
    linear-gradient(135deg, rgba(86, 217, 255, 0.16), transparent 42%),
    rgba(255, 255, 255, 0.56) !important;
}

body[data-module="dashboard"] .main,
body[data-module="orders"] .main,
body[data-module="partners"] .main,
body[data-module="documents"] .main,
body[data-module="finance"] .main {
  background:
    linear-gradient(135deg, rgba(86, 217, 255, 0.13) 0%, rgba(86, 217, 255, 0.02) 34%, transparent 54%),
    linear-gradient(62deg, transparent 18%, rgba(84, 240, 166, 0.09) 46%, transparent 74%),
    repeating-linear-gradient(135deg, rgba(255, 255, 255, 0.032) 0 1px, transparent 1px 22px),
    linear-gradient(145deg, #070b12 0%, #0b1420 48%, #071018 100%) !important;
}

body.light[data-module="dashboard"] .main,
body.light[data-module="orders"] .main,
body.light[data-module="partners"] .main,
body.light[data-module="documents"] .main,
body.light[data-module="finance"] .main {
  background:
    linear-gradient(135deg, rgba(14, 165, 233, 0.20) 0%, rgba(14, 165, 233, 0.05) 36%, transparent 58%),
    linear-gradient(62deg, transparent 14%, rgba(16, 185, 129, 0.14) 48%, transparent 78%),
    repeating-linear-gradient(135deg, rgba(15, 23, 42, 0.045) 0 1px, transparent 1px 20px),
    linear-gradient(145deg, #f4fbff 0%, #e9f6f7 46%, #fbfdff 100%) !important;
}

body[data-module="dashboard"] .stat,
body[data-module="dashboard"] .filter-panel,
body[data-module="dashboard"] .ops-card,
body[data-module="orders"] .stat,
body[data-module="orders"] .filter-panel,
body[data-module="orders"] .ops-card,
body[data-module="partners"] .stat,
body[data-module="partners"] .ops-card,
body[data-module="documents"] .table-wrap,
body[data-module="finance"] .table-wrap {
  border-color: rgba(86, 217, 255, 0.18) !important;
  background:
    linear-gradient(135deg, rgba(86, 217, 255, 0.075), transparent 44%),
    rgba(7, 12, 22, 0.42) !important;
  backdrop-filter: blur(18px);
}

body.light[data-module="dashboard"] .stat,
body.light[data-module="dashboard"] .filter-panel,
body.light[data-module="dashboard"] .ops-card,
body.light[data-module="orders"] .stat,
body.light[data-module="orders"] .filter-panel,
body.light[data-module="orders"] .ops-card,
body.light[data-module="partners"] .stat,
body.light[data-module="partners"] .ops-card,
body.light[data-module="documents"] .table-wrap,
body.light[data-module="finance"] .table-wrap {
  border-color: rgba(15, 23, 42, 0.13) !important;
  background:
    linear-gradient(135deg, rgba(14, 165, 233, 0.17), transparent 43%),
    rgba(255, 255, 255, 0.62) !important;
  box-shadow: 0 18px 60px rgba(36, 56, 76, 0.15);
}

.attendance-driver-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(210px, 1fr));
  gap: 10px;
  margin-top: 14px;
}

.attendance-driver-card {
  display: grid;
  gap: 5px;
  min-height: 104px;
  border: 1px solid rgba(142, 180, 213, 0.22);
  border-radius: 8px;
  padding: 12px;
  color: var(--text);
  text-align: left;
  background: rgba(255, 255, 255, 0.045);
  cursor: pointer;
}

.attendance-driver-card:hover,
.attendance-driver-card.active {
  border-color: rgba(86, 217, 255, 0.62);
  background: rgba(86, 217, 255, 0.10);
}

.attendance-driver-card span {
  color: var(--muted);
  font-size: 12px;
  font-weight: 850;
  text-transform: uppercase;
}

.attendance-driver-card strong {
  font-size: 25px;
  line-height: 1;
}

.attendance-driver-card small {
  color: var(--muted);
  font-weight: 800;
}

.attendance-detail-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.5fr) minmax(360px, 0.8fr);
  gap: 14px;
}

.payroll-panel {
  align-self: start;
}

.payroll-total-card,
.payroll-rate-field,
.payroll-settings-box {
  margin-top: 12px;
  border: 1px solid rgba(142, 180, 213, 0.22);
  border-radius: 8px;
  padding: 12px;
  background: rgba(255, 255, 255, 0.045);
}

.payroll-total-card {
  display: grid;
  gap: 5px;
}

.payroll-total-card strong {
  font-size: 22px;
}

.payroll-total-card span,
.payroll-total-card small,
.payroll-rate-field {
  color: var(--muted);
  font-weight: 800;
}

.payroll-rate-field {
  display: grid;
  gap: 7px;
}

.payroll-rate-field input,
.payroll-settings-grid input,
.payroll-table input,
.payroll-table select {
  width: 100%;
  border: 1px solid var(--line);
  border-radius: 8px;
  padding: 8px 9px;
  color: var(--text);
  background: rgba(255, 255, 255, 0.06);
  outline: 0;
}

.payroll-settings-box summary {
  cursor: pointer;
  color: var(--cyan);
  font-weight: 900;
}

.payroll-settings-grid {
  display: grid;
  gap: 9px;
  margin-top: 10px;
}

.payroll-settings-grid label {
  display: grid;
  gap: 5px;
  color: var(--muted);
  font-size: 12px;
  font-weight: 850;
}

.payroll-table {
  min-width: 520px;
  margin-top: 12px;
}

.payroll-add-button {
  justify-content: center;
  margin-top: 10px;
  width: 100%;
}

.schedule-task.spedition-order {
  border-left-color: #8b5cf6;
  box-shadow: inset 4px 0 0 rgba(139, 92, 246, 0.75), 0 18px 35px rgba(12, 18, 32, 0.28);
}

.schedule-task.spedition-order .card-price {
  color: #d8b4fe;
}

body.attendance-shell .admin-attendance-table {
  min-width: 880px;
}

body.attendance-shell .admin-attendance-table td:first-child {
  min-width: 112px;
}

body.attendance-shell .admin-attendance-table select {
  width: 100%;
  min-width: 150px;
  border: 1px solid rgba(86, 217, 255, 0.16);
  border-radius: 8px;
  padding: 8px;
  color: var(--text);
  background: rgba(255, 255, 255, 0.07);
}

body.attendance-shell .admin-attendance-table tr.day-off-row {
  background: rgba(245, 158, 11, 0.09);
}

.attendance-empty-detail {
  min-height: 180px;
}

@media (max-width: 900px) {
  dialog[data-editor-collection="orders"] .field-key-orderDate {
    max-width: none;
  }

  body[data-module="dashboard"],
  body[data-module="documents"] {
    overflow-x: hidden;
  }

  body[data-module="dashboard"] .content,
  body[data-module="documents"] .content,
  body[data-module="dashboard"] .ops-list,
  body[data-module="documents"] .documents-board {
    max-width: 100%;
    min-width: 0;
    overflow-x: hidden;
  }

  body[data-module="dashboard"] .ops-card,
  body[data-module="documents"] .document-ride-card,
  body[data-module="documents"] .document-chip {
    min-width: 0;
    max-width: 100%;
  }

  .attendance-detail-grid {
    grid-template-columns: 1fr;
  }
}

body[data-module="dashboard"] .main,
body[data-module="orders"] .main,
body[data-module="partners"] .main,
body[data-module="documents"] .main,
body[data-module="finance"] .main {
  background:
    radial-gradient(circle at 16% 4%, rgba(86, 217, 255, 0.11), transparent 34rem),
    radial-gradient(circle at 86% 0%, rgba(84, 240, 166, 0.09), transparent 30rem) !important;
}

body.light[data-module="dashboard"] .main,
body.light[data-module="orders"] .main,
body.light[data-module="partners"] .main,
body.light[data-module="documents"] .main,
body.light[data-module="finance"] .main {
  background:
    radial-gradient(circle at 16% 4%, rgba(14, 165, 233, 0.13), transparent 34rem),
    radial-gradient(circle at 86% 0%, rgba(16, 185, 129, 0.10), transparent 30rem),
    linear-gradient(145deg, #f7fbff 0%, #edf5fb 100%) !important;
}

body[data-module="dashboard"] .topbar,
body[data-module="orders"] .topbar,
body[data-module="partners"] .topbar,
body[data-module="documents"] .topbar,
body[data-module="finance"] .topbar {
  padding-bottom: 14px;
  border-bottom: 1px solid rgba(86, 217, 255, 0.14);
}

body[data-module="dashboard"] .stat,
body[data-module="dashboard"] .filter-panel,
body[data-module="dashboard"] .ops-card,
body[data-module="orders"] .stat,
body[data-module="orders"] .filter-panel,
body[data-module="orders"] .ops-card,
body[data-module="partners"] .stat,
body[data-module="partners"] .ops-card,
body[data-module="documents"] .table-wrap,
body[data-module="finance"] .table-wrap {
  border-color: rgba(86, 217, 255, 0.16) !important;
  background:
    linear-gradient(135deg, rgba(86, 217, 255, 0.045), transparent 38%),
    rgba(7, 12, 22, 0.28) !important;
  backdrop-filter: blur(16px);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.05), 0 24px 70px rgba(0, 0, 0, 0.20) !important;
}

body[data-module="dashboard"] .ops-card,
body[data-module="orders"] .ops-card,
body[data-module="partners"] .ops-card {
  border-radius: 8px;
}

body[data-module="dashboard"] .top-module-filters label,
body[data-module="orders"] .top-module-filters label,
body[data-module="partners"] .top-module-filters label,
body[data-module="documents"] .top-module-filters label,
body[data-module="finance"] .top-module-filters label,
body[data-module="dashboard"] .search,
body[data-module="orders"] .search,
body[data-module="partners"] .search,
body[data-module="documents"] .search,
body[data-module="finance"] .search,
body[data-module="dashboard"] .top-actions .ghost,
body[data-module="orders"] .top-actions .ghost,
body[data-module="partners"] .top-actions .ghost,
body[data-module="documents"] .top-actions .ghost,
body[data-module="finance"] .top-actions .ghost {
  border-color: rgba(86, 217, 255, 0.18) !important;
  background: rgba(9, 15, 27, 0.24) !important;
  backdrop-filter: blur(18px);
}

body[data-module="documents"] th,
body[data-module="finance"] th {
  background: rgba(7, 13, 25, 0.70) !important;
}

body[data-module="documents"] td,
body[data-module="finance"] td {
  background: rgba(7, 12, 22, 0.10) !important;
}

body.light[data-module="dashboard"] .topbar,
body.light[data-module="orders"] .topbar,
body.light[data-module="partners"] .topbar,
body.light[data-module="documents"] .topbar,
body.light[data-module="finance"] .topbar {
  border-bottom-color: rgba(15, 23, 42, 0.13);
}

body.light[data-module="dashboard"] .stat,
body.light[data-module="dashboard"] .filter-panel,
body.light[data-module="dashboard"] .ops-card,
body.light[data-module="orders"] .stat,
body.light[data-module="orders"] .filter-panel,
body.light[data-module="orders"] .ops-card,
body.light[data-module="partners"] .stat,
body.light[data-module="partners"] .ops-card,
body.light[data-module="documents"] .table-wrap,
body.light[data-module="finance"] .table-wrap {
  border-color: rgba(15, 23, 42, 0.16) !important;
  background:
    linear-gradient(135deg, rgba(86, 217, 255, 0.14), transparent 40%),
    rgba(255, 255, 255, 0.56) !important;
  box-shadow: 0 20px 70px rgba(36, 56, 76, 0.14) !important;
}

body.light[data-module="dashboard"] .top-module-filters label,
body.light[data-module="orders"] .top-module-filters label,
body.light[data-module="partners"] .top-module-filters label,
body.light[data-module="documents"] .top-module-filters label,
body.light[data-module="finance"] .top-module-filters label,
body.light[data-module="dashboard"] .search,
body.light[data-module="orders"] .search,
body.light[data-module="partners"] .search,
body.light[data-module="documents"] .search,
body.light[data-module="finance"] .search,
body.light[data-module="dashboard"] .top-actions .ghost,
body.light[data-module="orders"] .top-actions .ghost,
body.light[data-module="partners"] .top-actions .ghost,
body.light[data-module="documents"] .top-actions .ghost,
body.light[data-module="finance"] .top-actions .ghost {
  border-color: rgba(15, 23, 42, 0.16) !important;
  background: rgba(255, 255, 255, 0.52) !important;
  box-shadow: 0 8px 24px rgba(36, 56, 76, 0.10);
}

body.light[data-module="documents"] th,
body.light[data-module="finance"] th {
  color: #dbeafe;
  background: rgba(15, 23, 42, 0.84) !important;
}

body.light[data-module="documents"] td,
body.light[data-module="finance"] td {
  background: rgba(255, 255, 255, 0.18) !important;
}

.documents-overview {
  margin-bottom: 18px;
}

.documents-board {
  display: grid;
  gap: 12px;
}

.document-ride-card {
  display: grid;
  grid-template-columns: 82px minmax(0, 1fr);
  gap: 16px;
  align-items: stretch;
  padding: 14px;
  border: 1px solid rgba(86, 217, 255, 0.18);
  border-radius: 8px;
  background:
    linear-gradient(135deg, rgba(86, 217, 255, 0.10), transparent 42%),
    rgba(7, 12, 22, 0.30);
  box-shadow: 0 18px 42px rgba(0, 0, 0, 0.18);
  backdrop-filter: blur(16px);
}

.document-date {
  min-height: 100%;
  display: grid;
  place-items: center;
  align-content: center;
  gap: 3px;
  border: 1px solid rgba(86, 217, 255, 0.22);
  border-radius: 8px;
  color: #07111f;
  background: linear-gradient(135deg, var(--cyan), var(--green));
  box-shadow: 0 12px 28px rgba(86, 217, 255, 0.16);
}

.document-date strong {
  font-size: 28px;
  line-height: 1;
}

.document-date span {
  font-size: 11px;
  font-weight: 950;
  letter-spacing: 0;
}

.document-ride-main {
  min-width: 0;
  display: grid;
  gap: 8px;
}

.tacho-board .document-ride-card {
  grid-template-columns: minmax(0, 1fr);
}

.document-chip-row {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 4px;
}

.document-ride-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.document-ride-actions a {
  min-height: 32px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 1px solid rgba(84, 240, 166, 0.30);
  border-radius: 8px;
  padding: 0 12px;
  color: #07111f;
  background: linear-gradient(135deg, var(--cyan), var(--green));
  font-size: 13px;
  font-weight: 950;
  text-decoration: none;
  box-shadow: 0 12px 26px rgba(84, 240, 166, 0.16);
}

.document-ride-actions a:hover {
  filter: saturate(1.08);
  transform: translateY(-1px);
}

.invoice-workbench {
  display: grid;
  gap: 14px;
}

.stat[data-invoice-view] {
  cursor: pointer;
  transition: transform .16s ease, border-color .16s ease, background .16s ease;
}

.stat[data-invoice-view]:hover,
.stat[data-invoice-view][data-active="true"] {
  border-color: rgba(86, 217, 255, 0.46);
  background: rgba(86, 217, 255, 0.10);
  transform: translateY(-1px);
}

.invoice-workbench-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 16px;
}

.invoice-workbench-actions {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  flex-wrap: wrap;
  gap: 10px;
}

.segmented {
  display: inline-flex;
  gap: 4px;
  padding: 4px;
  border: 1px solid rgba(142, 180, 213, 0.22);
  border-radius: 999px;
  background: rgba(8, 15, 27, 0.36);
}

body.light .segmented {
  background: rgba(255, 255, 255, 0.64);
}

.segmented .active {
  color: #07111f;
  border-color: rgba(86, 217, 255, 0.74);
  background: linear-gradient(135deg, #56d9ff, #54f0a6);
}

.invoice-source-labels,
.invoice-source-row {
  display: grid;
  grid-template-columns: 34px minmax(200px, 1.35fr) minmax(108px, .58fr) minmax(132px, .8fr) 76px 110px 74px;
  gap: 8px;
  align-items: center;
}

.invoice-source-labels {
  padding: 0 12px;
  color: var(--muted);
  font-size: 11px;
  font-weight: 800;
  letter-spacing: .02em;
  text-transform: uppercase;
}

.invoice-source-list {
  display: grid;
  gap: 12px;
}

.invoice-source-group {
  overflow: hidden;
  border: 1px solid rgba(142, 180, 213, 0.18);
  border-radius: 12px;
  background: rgba(7, 13, 24, 0.38);
}

body.light .invoice-source-group {
  background: rgba(255, 255, 255, 0.62);
}

.invoice-source-group > header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  padding: 12px 14px;
  border-bottom: 1px solid rgba(142, 180, 213, 0.16);
}

.invoice-source-group h3 {
  margin: 2px 0 0;
  font-size: 18px;
}

.invoice-group-summary {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  flex-wrap: wrap;
  gap: 10px;
}

.invoice-group-summary span {
  color: var(--muted);
  font-size: 12px;
}

.invoice-source-table {
  display: grid;
}

.invoice-source-row {
  min-height: 58px;
  padding: 9px 12px;
  border-bottom: 1px solid rgba(142, 180, 213, 0.11);
}

.invoice-source-row:last-child {
  border-bottom: 0;
}

.invoice-source-row:hover {
  background: rgba(86, 217, 255, 0.06);
}

.invoice-source-check {
  display: grid;
  place-items: center;
}

.invoice-source-check input {
  width: 18px;
  height: 18px;
}

.invoice-source-main {
  display: grid;
  gap: 3px;
  min-width: 0;
}

.invoice-source-main span {
  overflow: hidden;
  color: var(--muted);
  text-overflow: ellipsis;
  white-space: nowrap;
}

.invoice-card {
  position: relative;
  grid-template-columns: minmax(0, 1fr) auto auto;
  overflow: hidden;
  padding-right: 22px;
}

.invoice-card-side {
  display: grid;
  justify-items: end;
  gap: 2px;
}

.invoice-card-side small,
.invoice-card-muted {
  color: var(--muted);
  font-size: 12px;
  font-weight: 700;
}

.invoice-card-actions {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  flex-wrap: wrap;
  gap: 8px;
}

.invoice-card-actions a {
  min-height: 32px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  text-decoration: none;
}

.invoice-card::after {
  content: "";
  position: absolute;
  inset: 0 0 0 auto;
  width: 6px;
  background: #56d9ff;
}

.invoice-card.status-sent::after {
  background: #54f0a6;
}

.invoice-card.status-paid::after {
  background: #9b8cff;
}

.invoice-card.status-overdue::after,
.invoice-card.status-cancelled::after {
  background: #ff6f7d;
}

.invoice-draft-layout {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 14px;
}

.invoice-draft-head,
.invoice-draft-lines,
.invoice-draft-summary {
  align-content: start;
  min-width: 0;
  width: 100%;
}

.invoice-draft-lines {
  grid-column: 1 / -1;
  overflow-x: auto;
}

.invoice-draft-grid {
  display: grid;
  grid-template-columns: minmax(140px, 0.8fr) minmax(260px, 1.45fr) repeat(2, minmax(135px, 1fr));
  gap: 10px;
}

.invoice-draft-grid .field:nth-child(2) {
  grid-column: span 2;
}

.invoice-draft-grid .field,
.invoice-draft-summary .field {
  display: grid;
  gap: 5px;
  min-width: 0;
}

.invoice-draft-grid span,
.invoice-draft-summary .field span {
  color: var(--muted);
  font-size: 12px;
  font-weight: 700;
}

.invoice-line-labels,
.invoice-line-row {
  display: grid;
  grid-template-columns: 150px minmax(320px, 1fr) 190px 150px 42px;
  gap: 10px;
  align-items: center;
  min-width: 880px;
}

.invoice-line-labels {
  color: var(--muted);
  font-size: 11px;
  font-weight: 800;
  letter-spacing: .02em;
  text-transform: uppercase;
}

.invoice-line-list {
  display: grid;
  gap: 8px;
}

.invoice-line-row {
  padding: 8px;
  border: 1px solid rgba(142, 180, 213, 0.16);
  border-radius: 10px;
  background: rgba(6, 13, 24, 0.34);
}

body.light .invoice-line-row {
  background: rgba(255, 255, 255, 0.68);
}

.invoice-line-row input,
.invoice-draft-grid input,
.invoice-draft-grid select,
.invoice-draft-summary textarea {
  min-height: 38px;
}

.invoice-package-list {
  display: grid;
  gap: 8px;
  padding: 12px;
  border: 1px dashed rgba(86, 217, 255, 0.34);
  border-radius: 10px;
  background: rgba(86, 217, 255, 0.06);
}

.invoice-package-list a {
  color: var(--cyan);
  font-weight: 800;
  text-decoration: none;
}

.document-chip {
  min-height: 50px;
  min-width: 150px;
  display: grid;
  align-content: center;
  gap: 3px;
  padding: 9px 12px;
  border: 1px solid rgba(86, 217, 255, 0.22);
  border-left: 4px solid var(--cyan);
  border-radius: 8px;
  color: var(--text);
  background: rgba(255, 255, 255, 0.06);
  text-decoration: none;
  transition: transform 0.16s ease, border-color 0.16s ease, background 0.16s ease;
}

.document-chip-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-top: 8px;
}

.document-chip-actions a,
.document-chip-actions button {
  min-height: 28px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 1px solid rgba(86, 217, 255, 0.22);
  border-radius: 7px;
  padding: 0 9px;
  color: var(--cyan);
  background: rgba(86, 217, 255, 0.07);
  font-size: 12px;
  font-weight: 900;
  text-decoration: none;
  cursor: pointer;
}

.document-chip-actions button {
  font-family: inherit;
}

.document-chip-actions a:hover,
.document-chip-actions button:hover {
  color: #07111f;
  background: var(--cyan);
}

.document-chip strong {
  font-size: 13px;
}

.document-chip small {
  color: var(--muted);
  line-height: 1.25;
}

.document-chip.kind-cmr {
  border-left-color: #f59e0b;
}

.document-chip.kind-other {
  border-left-color: var(--green);
}

.document-chip:not(.disabled):hover {
  border-color: rgba(86, 217, 255, 0.45);
  background: rgba(86, 217, 255, 0.10);
  transform: translateY(-1px);
}

.document-chip.disabled {
  opacity: 0.68;
}

body.light .document-ride-card {
  border-color: rgba(15, 23, 42, 0.10);
  background:
    linear-gradient(135deg, rgba(14, 165, 233, 0.10), transparent 44%),
    rgba(255, 255, 255, 0.62);
  box-shadow: 0 20px 48px rgba(46, 70, 94, 0.13);
}

body.light .document-chip {
  color: #102033;
  border-color: rgba(15, 23, 42, 0.12);
  background: rgba(255, 255, 255, 0.70);
}

body.light .document-chip-actions a,
body.light .document-chip-actions button {
  color: #075985;
  border-color: rgba(14, 165, 233, 0.22);
  background: rgba(14, 165, 233, 0.08);
}

body.light .document-chip-actions a:hover,
body.light .document-chip-actions button:hover {
  color: #ffffff;
  background: #0f4f88;
}

body.light .document-chip small {
  color: #64748b;
}

body.light .document-chip:not(.disabled):hover {
  border-color: rgba(14, 165, 233, 0.34);
  background: rgba(240, 249, 255, 0.96);
}

@media (max-width: 760px) {
  .document-ride-card {
    grid-template-columns: 1fr;
  }

  .document-date {
    min-height: 68px;
    grid-template-columns: auto auto;
    justify-content: start;
    padding: 0 14px;
  }

  .document-chip {
    width: 100%;
  }
}

@media (max-width: 980px) {
  .invoice-workbench-head {
    display: grid;
  }

  .invoice-source-labels {
    display: none;
  }

  .invoice-source-row {
    grid-template-columns: 32px minmax(0, 1fr) auto;
  }

  .invoice-source-row > div:nth-of-type(2),
  .invoice-source-row > div:nth-of-type(3),
  .invoice-source-row > div:nth-of-type(4) {
    grid-column: 2 / -1;
  }

  .invoice-draft-layout,
  .invoice-draft-grid {
    grid-template-columns: 1fr;
  }

  .invoice-draft-grid .field:nth-child(2) {
    grid-column: auto;
  }

  .invoice-line-labels {
    display: none;
  }

  .invoice-line-row {
    grid-template-columns: 1fr;
    min-width: 0;
  }
}

/* Driver mobile app */
body.driver-mode .topbar {
  display: none;
}

body.driver-mode .main {
  padding: 0 !important;
  min-height: 100vh;
  background:
    radial-gradient(circle at 12% 0%, rgba(86, 217, 255, 0.12), transparent 26rem),
    radial-gradient(circle at 92% 12%, rgba(84, 240, 166, 0.10), transparent 25rem);
}

body.light.driver-mode .main {
  background:
    radial-gradient(circle at 10% 0%, rgba(14, 165, 233, 0.16), transparent 26rem),
    radial-gradient(circle at 92% 10%, rgba(16, 185, 129, 0.13), transparent 25rem),
    linear-gradient(145deg, #f7fbff 0%, #eaf4fb 100%);
}

body.driver-mode .content {
  display: block;
  min-height: 100vh;
}

.driver-mobile-shell {
  width: min(100%, 760px);
  min-height: 100vh;
  margin: 0 auto;
  padding: 0 12px 28px;
}

.driver-login-shell {
  display: grid;
  place-items: center;
  padding-top: 22px;
}

.driver-login-card {
  width: min(100%, 440px);
  padding: 18px;
  border: 1px solid rgba(86, 217, 255, 0.18);
  border-radius: 8px;
  background: rgba(7, 13, 25, 0.68);
  box-shadow: 0 24px 70px rgba(0, 0, 0, 0.24);
}

.driver-login-card h2 {
  margin: 6px 0 8px;
}

.driver-login-field {
  display: grid;
  gap: 6px;
  margin-top: 14px;
  color: var(--muted);
  font-size: 13px;
  font-weight: 850;
}

.driver-login-field input {
  min-height: 44px;
  border: 1px solid rgba(86, 217, 255, 0.20);
  border-radius: 8px;
  padding: 0 12px;
  color: var(--text);
  background: rgba(255, 255, 255, 0.07);
  outline: 0;
}

body.light .driver-login-field input {
  color: #102033;
  background: rgba(255, 255, 255, 0.82);
}

.driver-login-button {
  width: 100%;
  margin-top: 16px;
}

.driver-mobile-topbar {
  position: sticky;
  top: 0;
  z-index: 15;
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: center;
  gap: 8px;
  margin: 0 -12px 12px;
  padding: calc(8px + env(safe-area-inset-top)) 10px 8px;
  border-bottom: 1px solid rgba(86, 217, 255, 0.14);
  background: rgba(7, 12, 22, 0.78);
  backdrop-filter: blur(18px);
}

body.light .driver-mobile-topbar {
  background: rgba(248, 252, 255, 0.82);
  border-bottom-color: rgba(15, 23, 42, 0.10);
}

.driver-attendance-trigger,
.driver-day-button,
.driver-today-button,
.driver-theme-button,
.driver-date-chip {
  min-height: 44px;
  border: 1px solid rgba(86, 217, 255, 0.22);
  border-radius: 8px;
  color: var(--text);
  background: rgba(255, 255, 255, 0.07);
  font-weight: 900;
}

.driver-attendance-trigger {
  padding: 0 12px;
}

.driver-attendance-trigger.open {
  color: #061016;
  border-color: transparent;
  background: linear-gradient(135deg, var(--cyan), var(--green));
}

.driver-date-center {
  display: grid;
  grid-template-columns: 38px minmax(0, 1fr) 38px auto;
  align-items: center;
  gap: 6px;
  min-width: 0;
}

.driver-day-button,
.driver-theme-button {
  display: grid;
  place-items: center;
  padding: 0;
}

.driver-theme-button {
  width: 44px;
  font-size: 18px;
}

.driver-today-button {
  padding: 0 10px;
}

.driver-date-chip {
  position: relative;
  display: grid;
  place-items: center;
  min-width: 0;
  padding: 0 10px;
  overflow: hidden;
  white-space: nowrap;
}

.driver-date-chip span {
  overflow: hidden;
  max-width: 100%;
  text-overflow: ellipsis;
}

.driver-date-chip input {
  position: absolute;
  inset: 0;
  opacity: 0;
  cursor: pointer;
}

.driver-day-hero {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 12px;
  align-items: center;
  padding: 12px 0 10px;
}

.driver-day-hero h1 {
  margin-top: 3px;
  font-size: clamp(24px, 7vw, 36px);
  letter-spacing: 0;
}

.driver-doc-counter {
  min-width: 88px;
  padding: 10px;
  border: 1px solid rgba(86, 217, 255, 0.18);
  border-radius: 8px;
  text-align: center;
  background: rgba(255, 255, 255, 0.06);
}

.driver-doc-counter span,
.driver-doc-chip {
  color: var(--muted);
  font-size: 12px;
  font-weight: 900;
  text-transform: uppercase;
}

.driver-doc-counter strong {
  display: block;
  margin-top: 3px;
  color: var(--cyan);
  font-size: 24px;
}

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

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

.driver-payroll-metrics .driver-metric-card {
  min-height: 82px;
}

.driver-payroll-metrics .driver-metric-card:nth-child(2) strong {
  color: var(--green);
}

.driver-payroll-metrics .driver-metric-card:nth-child(4) strong {
  color: #fbbf24;
  font-size: 20px;
}

.driver-metric-card {
  min-width: 0;
  min-height: 72px;
  display: grid;
  align-content: center;
  gap: 4px;
  padding: 10px;
  border: 1px solid rgba(86, 217, 255, 0.18);
  border-radius: 8px;
  color: var(--text);
  text-align: left;
  background:
    linear-gradient(135deg, rgba(86, 217, 255, 0.10), transparent 54%),
    rgba(255, 255, 255, 0.055);
}

.driver-metric-card span {
  color: var(--muted);
  font-size: 11px;
  font-weight: 950;
  text-transform: uppercase;
}

.driver-metric-card strong {
  color: var(--cyan);
  font-size: 24px;
  line-height: 1;
}

.driver-rest-card {
  cursor: pointer;
}

.driver-rest-card.has-rest {
  border-color: rgba(245, 158, 11, 0.62);
  background:
    linear-gradient(135deg, rgba(245, 158, 11, 0.22), transparent 58%),
    rgba(255, 255, 255, 0.055);
}

.driver-rest-card.has-rest strong {
  color: #fbbf24;
}

.driver-rest-card:disabled {
  cursor: default;
  opacity: 0.72;
}

.driver-attendance-panel {
  display: none;
  gap: 12px;
  margin-bottom: 12px;
}

.driver-attendance-panel.open {
  display: grid;
}

.driver-shift-card,
.driver-attendance-month,
.driver-ride-card,
.driver-empty-card {
  border: 1px solid rgba(86, 217, 255, 0.16);
  border-radius: 8px;
  background:
    linear-gradient(135deg, rgba(86, 217, 255, 0.055), transparent 40%),
    rgba(7, 13, 25, 0.54);
  backdrop-filter: blur(18px);
  box-shadow: 0 22px 52px rgba(0, 0, 0, 0.18);
}

body.light .driver-shift-card,
body.light .driver-attendance-month,
body.light .driver-ride-card,
body.light .driver-empty-card,
body.light .driver-doc-counter,
body.light .driver-metric-card {
  color: #102033;
  border-color: rgba(15, 23, 42, 0.10);
  background:
    linear-gradient(135deg, rgba(14, 165, 233, 0.10), transparent 42%),
    rgba(255, 255, 255, 0.74);
  box-shadow: 0 20px 48px rgba(46, 70, 94, 0.12);
}

.driver-shift-head {
  display: flex;
  justify-content: space-between;
  gap: 10px;
  align-items: center;
}

.driver-shift-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 7px;
  justify-content: flex-end;
}

.driver-attendance-edit {
  grid-template-columns: 1fr 1fr;
}

.driver-attendance-edit select,
.driver-month-row select {
  width: 100%;
  min-width: 0;
  border: 1px solid rgba(86, 217, 255, 0.16);
  border-radius: 8px;
  padding: 8px;
  color: var(--text);
  background: rgba(255, 255, 255, 0.07);
}

.driver-extra-shift-toggle {
  align-self: end;
  min-height: 38px;
}

.driver-extra-shift-fields {
  display: none;
  grid-column: 1 / -1;
  grid-template-columns: 1fr 1fr;
  gap: 7px;
}

.driver-extra-shift-fields.open {
  display: grid;
}

.driver-shift-card.day-off {
  border-color: rgba(245, 158, 11, 0.48);
  box-shadow: inset 4px 0 0 #f59e0b, 0 22px 52px rgba(0, 0, 0, 0.18);
}

.driver-day-off-button {
  border-color: rgba(245, 158, 11, 0.36) !important;
  color: #fff7ed !important;
  background: rgba(245, 158, 11, 0.18) !important;
}

body.light .driver-day-off-button {
  color: #92400e !important;
  background: rgba(245, 158, 11, 0.16) !important;
}

.driver-save-day {
  width: 100%;
}

.driver-attendance-month {
  overflow: hidden;
}

.driver-month-list {
  display: grid;
  gap: 9px;
  padding: 10px;
}

.driver-month-row {
  display: grid;
  grid-template-columns: 76px repeat(5, minmax(0, 1fr));
  gap: 7px;
  padding: 8px;
  border: 1px solid rgba(86, 217, 255, 0.13);
  border-radius: 8px;
  background: rgba(255, 255, 255, 0.045);
}

.driver-month-row.row-selected {
  border-color: rgba(86, 217, 255, 0.55);
  box-shadow: inset 3px 0 0 var(--cyan);
}

.driver-month-row.weekend-row {
  background: rgba(245, 158, 11, 0.07);
}

.driver-month-row.day-off-row {
  border-color: rgba(245, 158, 11, 0.45);
  background: rgba(245, 158, 11, 0.10);
}

.driver-month-row.dirty {
  border-color: rgba(84, 240, 166, 0.42);
  background: rgba(84, 240, 166, 0.07);
}

.driver-month-row label,
.driver-attendance-edit label {
  display: grid;
  gap: 4px;
  color: var(--muted);
  font-size: 12px;
  font-weight: 850;
}

.driver-month-row label.wide {
  grid-column: 2 / -1;
}

.driver-month-datebox {
  display: grid;
  gap: 5px;
}

.driver-month-row .att-extra-toggle {
  min-height: 30px;
  padding: 0;
}

.driver-month-row .att-extra-fields {
  display: none;
  grid-column: 2 / -1;
  grid-template-columns: 1fr 1fr;
  gap: 7px;
}

.driver-month-row.extra-time-open .att-extra-fields {
  display: grid;
}

.driver-month-row input,
.driver-attendance-edit input,
.driver-attendance-edit textarea {
  width: 100%;
  min-width: 0;
  border: 1px solid rgba(86, 217, 255, 0.16);
  border-radius: 8px;
  padding: 8px;
  color: var(--text);
  background: rgba(255, 255, 255, 0.07);
}

.driver-month-row .day-jump {
  display: grid;
  place-items: center;
  border: 1px solid rgba(86, 217, 255, 0.18);
  border-radius: 8px;
  color: var(--cyan);
  background: rgba(86, 217, 255, 0.08);
}

.driver-month-row .day-jump strong {
  font-size: 18px;
}

.driver-mobile-rides {
  display: grid;
  gap: 12px;
  padding-bottom: calc(18px + env(safe-area-inset-bottom));
  min-width: 0;
}

.driver-ride-card,
.driver-empty-card {
  width: 100%;
  min-width: 0;
  padding: 12px;
}

.driver-ride-card {
  --driver-status: #94a3b8;
  border-right: 5px solid var(--driver-status);
}

.driver-ride-card.status-planned,
.driver-stop-bubble.status-planned {
  --driver-status: #3b82f6;
}

.driver-ride-card.status-progress,
.driver-stop-bubble.status-progress {
  --driver-status: #f59e0b;
}

.driver-ride-card.status-done,
.driver-stop-bubble.status-done {
  --driver-status: #10b981;
}

.driver-ride-card.status-done {
  border-color: rgba(16, 185, 129, 0.44);
  border-right-color: #10b981;
  box-shadow:
    inset 0 0 0 1px rgba(16, 185, 129, 0.30),
    0 22px 52px rgba(0, 0, 0, 0.18);
}

.driver-ride-card.status-invoiced,
.driver-stop-bubble.status-invoiced {
  --driver-status: #8b5cf6;
}

.driver-ride-card.status-cancelled,
.driver-stop-bubble.status-cancelled {
  --driver-status: #ef4444;
}

.driver-ride-card-head {
  display: flex;
  justify-content: space-between;
  gap: 10px;
  align-items: flex-start;
}

.driver-ride-card-head h2 {
  margin-top: 7px;
  font-size: clamp(21px, 5.8vw, 28px);
  letter-spacing: 0;
}

.driver-doc-chip {
  flex: 0 0 auto;
  padding: 7px 9px;
  border: 1px solid rgba(86, 217, 255, 0.18);
  border-radius: 999px;
  background: rgba(86, 217, 255, 0.08);
}

.driver-doc-chip.ok {
  color: #bbf7d0;
  border-color: rgba(16, 185, 129, 0.36);
  background: rgba(16, 185, 129, 0.12);
}

.driver-doc-chip.missing {
  color: #fed7aa;
  border-color: rgba(245, 158, 11, 0.46);
  background: rgba(245, 158, 11, 0.14);
}

.driver-ride-card.missing-docs {
  border-left: 4px solid #f59e0b;
}

.driver-ride-card.highlight-doc-rest {
  outline: 2px solid #f59e0b;
  box-shadow:
    0 0 0 6px rgba(245, 158, 11, 0.16),
    0 22px 52px rgba(0, 0, 0, 0.20);
}

.driver-ride-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 7px;
  margin-top: 9px;
}

.driver-ride-meta span {
  min-height: 28px;
  display: inline-flex;
  align-items: center;
  border: 1px solid rgba(86, 217, 255, 0.14);
  border-radius: 999px;
  padding: 3px 9px;
  color: var(--muted);
  background: rgba(255, 255, 255, 0.045);
  font-size: 12px;
  font-weight: 850;
}

.driver-stops-list {
  display: grid;
  gap: 10px;
  margin-top: 12px;
  min-width: 0;
}

.driver-stop-bubble {
  --driver-status: #94a3b8;
  width: 100%;
  min-width: 0;
  display: grid;
  grid-template-columns: minmax(0, 1fr) 72px;
  gap: 10px;
  padding: 10px;
  border: 1px solid rgba(86, 217, 255, 0.14);
  border-right: 4px solid var(--driver-status);
  border-radius: 8px;
  background: rgba(255, 255, 255, 0.045);
}

body.light .driver-stop-bubble {
  background: rgba(255, 255, 255, 0.76);
  border-color: rgba(15, 23, 42, 0.10);
}

.driver-stop-main {
  min-width: 0;
}

.driver-stop-top {
  display: flex;
  justify-content: space-between;
  gap: 10px;
  color: var(--muted);
  font-size: 13px;
}

.driver-stop-top strong {
  color: var(--text);
}

.driver-stop-bubble h3 {
  margin: 8px 0 10px;
  font-size: clamp(18px, 5vw, 24px);
  line-height: 1.2;
  overflow-wrap: anywhere;
}

.driver-stop-rail {
  display: grid;
  grid-template-rows: auto 1fr;
  justify-items: center;
  gap: 8px;
}

.driver-stop-rail time {
  width: 64px;
  min-height: 42px;
  display: grid;
  place-items: center;
  border: 1px solid color-mix(in srgb, var(--driver-status) 55%, transparent);
  border-radius: 8px;
  color: var(--driver-status);
  background: rgba(0, 0, 0, 0.18);
  font-weight: 950;
}

body.light .driver-stop-rail time {
  background: rgba(255, 255, 255, 0.86);
}

.driver-stop-rail::after {
  content: "";
  width: 2px;
  min-height: 100%;
  border-radius: 999px;
  background: linear-gradient(var(--driver-status), transparent);
  opacity: 0.55;
}

.driver-nav-button,
.driver-upload-button,
.driver-status-button {
  width: 100%;
  min-height: 46px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 1px solid rgba(86, 217, 255, 0.20);
  border-radius: 8px;
  color: var(--text);
  background: rgba(255, 255, 255, 0.07);
  font-weight: 900;
  text-decoration: none;
}

.driver-nav-button {
  color: #061016;
  background: linear-gradient(135deg, var(--cyan), var(--green));
}

.driver-upload-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
  margin-top: 8px;
}

.driver-upload-button {
  position: relative;
  overflow: hidden;
}

.driver-upload-button input {
  position: absolute;
  inset: 0;
  opacity: 0;
  cursor: pointer;
}

.driver-upload-button.gallery {
  color: #ffffff;
  border-color: rgba(56, 189, 248, 0.55);
  background: linear-gradient(135deg, #0284c7, #38bdf8);
}

.driver-upload-button.camera {
  color: #ffffff;
  border-color: rgba(251, 146, 60, 0.62);
  background: linear-gradient(135deg, #ea580c, #f59e0b);
}

body.light .driver-upload-button.gallery {
  color: #ffffff;
  border-color: rgba(2, 132, 199, 0.46);
  background: linear-gradient(135deg, #0284c7, #0ea5e9);
}

body.light .driver-upload-button.camera {
  color: #ffffff;
  border-color: rgba(234, 88, 12, 0.46);
  background: linear-gradient(135deg, #ea580c, #f59e0b);
}

.driver-status-button {
  margin-top: 8px;
  color: #ffffff;
  border-color: color-mix(in srgb, var(--driver-status) 70%, transparent);
  background: var(--driver-status);
}

.driver-status-button:disabled {
  color: var(--muted);
  background: rgba(255, 255, 255, 0.06);
}

.driver-ride-card .doc-links {
  margin-top: 12px;
  min-width: 0;
  overflow: hidden;
}

.driver-ride-card .doc-links a,
.driver-ride-card .doc-links span {
  min-height: 32px;
  max-width: 100%;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.driver-document-summary {
  margin-top: 12px;
  min-height: 36px;
  display: block;
  border-radius: 8px;
  padding: 7px 11px;
  font-weight: 900;
}

.driver-document-summary summary {
  cursor: pointer;
  list-style: none;
}

.driver-document-summary summary::-webkit-details-marker {
  display: none;
}

.driver-document-summary.uploaded {
  color: #bbf7d0;
  border: 1px solid rgba(16, 185, 129, 0.36);
  background: rgba(16, 185, 129, 0.10);
}

.driver-document-summary.missing {
  color: #fed7aa;
  border: 1px solid rgba(245, 158, 11, 0.42);
  background: rgba(245, 158, 11, 0.12);
}

.driver-doc-review-list {
  display: flex;
  flex-wrap: wrap;
  gap: 7px;
  margin-top: 9px;
}

.driver-doc-review-list a,
.driver-doc-review-list span {
  border: 1px solid rgba(16, 185, 129, 0.26);
  border-radius: 999px;
  padding: 5px 9px;
  color: #bbf7d0;
  background: rgba(16, 185, 129, 0.08);
  font-size: 12px;
  text-decoration: none;
}

body.light .driver-document-summary.uploaded {
  color: #047857;
  border-color: rgba(4, 120, 87, 0.36);
  background: rgba(16, 185, 129, 0.15);
}

body.light .driver-doc-review-list a,
body.light .driver-doc-review-list span {
  color: #075985;
  border-color: rgba(14, 116, 144, 0.24);
  background: rgba(255, 255, 255, 0.72);
}

@media (max-width: 560px) {
  .driver-mobile-topbar {
    grid-template-columns: auto minmax(0, 1fr) 44px;
    gap: 6px;
  }

  .driver-attendance-trigger {
    width: 44px;
    padding: 0;
    overflow: hidden;
    color: transparent;
  }

  .driver-attendance-trigger::before {
    content: "Doch";
    color: var(--text);
    font-size: 12px;
  }

  .driver-attendance-trigger.open::before {
    color: #061016;
  }

  .driver-date-center {
    grid-template-columns: 34px minmax(0, 1fr) 34px;
  }

  .driver-today-button {
    display: none;
  }

  .driver-day-hero {
    grid-template-columns: 1fr;
  }

  .driver-day-metrics,
  .driver-payroll-metrics {
    grid-template-columns: 1fr 1fr;
  }

  .driver-doc-counter {
    display: flex;
    align-items: center;
    justify-content: space-between;
    text-align: left;
  }

  .driver-shift-head,
  .driver-ride-card-head {
    align-items: stretch;
    flex-direction: column;
  }

  .driver-shift-actions {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .driver-attendance-edit,
  .driver-month-row {
    grid-template-columns: 1fr 1fr;
  }

  .driver-month-datebox,
  .driver-extra-shift-toggle,
  .driver-month-row .att-extra-fields,
  .driver-extra-shift-fields,
  .driver-month-row label.wide {
    grid-column: 1 / -1;
  }

  .driver-month-row .att-extra-fields,
  .driver-extra-shift-fields {
    grid-template-columns: 1fr 1fr;
  }

  .driver-stop-bubble {
    grid-template-columns: minmax(0, 1fr) 62px;
  }

  .driver-stop-rail time {
    width: 56px;
    font-size: 13px;
  }
}

/* Final planner overrides: keep last so older harmonogram layers cannot win. */
body.planner-shell .schedule-body {
  background-image:
    linear-gradient(to right, rgba(255, 255, 255, 0.20) 1px, transparent 1px),
    linear-gradient(to right, rgba(102, 217, 255, 0.18) 1px, transparent 1px) !important;
  background-size:
    var(--planner-hour-width, 84px) 100%,
    var(--planner-quarter-width, 21px) 100% !important;
}

body.light.planner-shell .schedule-body {
  background-image:
    linear-gradient(to right, rgba(13, 28, 48, 0.22) 1px, transparent 1px),
    linear-gradient(to right, rgba(34, 124, 168, 0.20) 1px, transparent 1px) !important;
}

body.planner-shell .schedule-task .card-price {
  display: inline-flex;
  align-items: center;
  align-self: flex-start;
  max-width: 100%;
  margin-top: 2px;
  padding: 3px 8px;
  border-radius: 8px;
  color: #06111f;
  background: linear-gradient(135deg, #ffd166, #5eead4);
  font-size: 13px;
  font-weight: 950;
  line-height: 1.3;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

body.planner-shell .schedule-task.is-locked {
  cursor: default !important;
  box-shadow: inset 0 0 0 1px rgba(148, 163, 184, 0.26), 0 10px 22px rgba(2, 8, 23, 0.16) !important;
}

body.planner-shell .schedule-task.is-locked::after {
  content: "zamčeno";
  position: absolute;
  right: 8px;
  bottom: 7px;
  padding: 2px 6px;
  border-radius: 999px;
  color: rgba(226, 232, 240, 0.86);
  background: rgba(15, 23, 42, 0.58);
  font-size: 10px;
  font-weight: 900;
  text-transform: uppercase;
}

body.planner-shell .schedule-task .task-headline {
  display: flex !important;
  align-items: flex-start !important;
  justify-content: space-between !important;
  gap: 8px !important;
  min-width: 0;
}

body.planner-shell .schedule-task .task-headline strong {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

body.planner-shell .schedule-task .task-tools {
  display: inline-flex !important;
  align-items: center !important;
  gap: 5px !important;
  flex: 0 0 auto;
}

body.planner-shell .schedule-task .task-edit-button {
  display: inline-grid !important;
  place-items: center !important;
  width: 24px !important;
  height: 24px !important;
  min-width: 24px !important;
  padding: 0 !important;
  border-radius: 8px !important;
  border: 1px solid rgba(148, 163, 184, 0.46) !important;
  color: #eef8ff !important;
  background: rgba(15, 23, 42, 0.66) !important;
  box-shadow: 0 8px 18px rgba(2, 8, 23, 0.24) !important;
  font-size: 13px !important;
  font-weight: 900 !important;
  line-height: 1 !important;
  cursor: pointer;
}

body.planner-shell .schedule-task .task-edit-button:hover {
  border-color: rgba(103, 232, 249, 0.78) !important;
  background: rgba(14, 165, 233, 0.34) !important;
}

body.light.planner-shell .schedule-task .task-edit-button {
  color: #0b1625 !important;
  background: rgba(255, 255, 255, 0.84) !important;
  border-color: rgba(37, 99, 235, 0.26) !important;
}

body.planner-shell .planner-range-row {
  display: grid;
  grid-template-columns: 18px minmax(130px, 1fr) 18px;
  gap: 8px;
  align-items: center;
  width: 100%;
}

body.planner-shell .planner-controls label {
  display: grid !important;
  gap: 6px !important;
  align-items: stretch !important;
  width: 100%;
}

body.planner-shell .planner-range-row b {
  display: inline-grid;
  place-items: center;
  width: 18px;
  height: 18px;
  border-radius: 999px;
  color: #06111f;
  background: #56d9ff;
  font-size: 13px;
  font-weight: 950;
}

body.planner-shell .planner-range-row input[type="range"] {
  width: 100% !important;
}

/* Unified app canvas across modules. */
body:not(.light) .main {
  background:
    radial-gradient(circle at 88% 8%, rgba(84, 240, 166, 0.18), transparent 30%),
    radial-gradient(circle at 12% 0%, rgba(86, 217, 255, 0.16), transparent 34%),
    linear-gradient(135deg, rgba(6, 16, 28, 0.96), rgba(6, 13, 23, 0.90) 48%, rgba(4, 18, 16, 0.92)) !important;
}

body.light .main {
  background:
    radial-gradient(circle at 90% 4%, rgba(45, 212, 191, 0.22), transparent 32%),
    radial-gradient(circle at 8% 0%, rgba(14, 165, 233, 0.18), transparent 34%),
    linear-gradient(135deg, rgba(245, 251, 255, 0.96), rgba(236, 248, 255, 0.92) 48%, rgba(233, 250, 246, 0.92)) !important;
}

body.planner-shell .planner-title h2 {
  font-size: clamp(24px, 2.1vw, 31px) !important;
  line-height: 1.05 !important;
}

/* 2026-07-05 visual pass: one calm shell, cleaner harmonogram controls. */
body:not(.light) .main {
  background:
    radial-gradient(circle at 88% 7%, rgba(84, 240, 166, 0.22), transparent 34rem),
    radial-gradient(circle at 10% 0%, rgba(86, 217, 255, 0.17), transparent 34rem),
    linear-gradient(135deg, rgba(6, 16, 28, 0.98), rgba(6, 13, 23, 0.92) 48%, rgba(4, 23, 19, 0.94)) !important;
}

body.light .main {
  background:
    radial-gradient(circle at 88% 7%, rgba(20, 184, 166, 0.22), transparent 34rem),
    radial-gradient(circle at 10% 0%, rgba(14, 165, 233, 0.18), transparent 34rem),
    linear-gradient(135deg, rgba(247, 252, 255, 0.98), rgba(236, 248, 255, 0.94) 48%, rgba(234, 250, 246, 0.94)) !important;
}

.main {
  padding: 24px 20px 20px !important;
}

.topbar {
  align-items: center !important;
  gap: 16px !important;
  margin-bottom: 16px !important;
  padding-bottom: 0 !important;
  border-bottom: 0 !important;
}

.topbar h1,
body.planner-shell .planner-title h2 {
  font-size: clamp(27px, 2.3vw, 35px) !important;
  line-height: 1.02 !important;
  letter-spacing: 0 !important;
}

.topbar .eyebrow,
body.planner-shell .planner-title .eyebrow {
  margin-bottom: 5px !important;
  font-size: 12px !important;
  line-height: 1 !important;
}

body.planner-shell .planner-controlbar {
  min-height: 60px !important;
  margin-bottom: 16px !important;
  padding: 0 0 6px !important;
  align-items: center !important;
}

body.planner-shell .planner-title {
  min-width: 150px !important;
}

body.planner-shell .planner-actionbar {
  gap: 7px !important;
  flex-wrap: nowrap !important;
}

body.planner-shell .planner-actionbar .planner-week-tabs {
  flex-wrap: nowrap !important;
  max-width: none !important;
  margin-right: 14px !important;
  padding: 0 !important;
  overflow: visible !important;
  background: transparent !important;
  backdrop-filter: none !important;
}

body.planner-shell .planner-actionbar .planner-week-tabs button {
  min-width: 50px !important;
  min-height: 38px !important;
  padding-inline: 6px !important;
}

body.planner-shell .planner-transfer-toggle {
  margin-left: 6px !important;
  padding-inline: 13px !important;
}

body.planner-shell .planner-actionbar .planner-view-menu summary {
  padding-inline: 10px !important;
}

body.planner-shell .planner-actionbar .planner-date-pill {
  width: 136px !important;
}

body.planner-shell .planner-new-ride {
  padding-inline: 14px !important;
}

body.planner-shell .planner-view-menu {
  position: relative !important;
}

body.planner-shell .planner-view-menu .planner-controls {
  position: absolute !important;
  top: calc(100% + 10px) !important;
  left: 0 !important;
  width: 340px !important;
  padding: 14px !important;
  border: 1px solid rgba(86, 217, 255, 0.26) !important;
  border-radius: 8px !important;
  background: rgba(8, 15, 27, 0.96) !important;
  box-shadow: 0 22px 60px rgba(0, 0, 0, 0.36) !important;
  backdrop-filter: blur(18px) !important;
}

body.light.planner-shell .planner-view-menu .planner-controls {
  border-color: rgba(15, 23, 42, 0.16) !important;
  background: rgba(255, 255, 255, 0.96) !important;
}

body.planner-shell .planner-range-row {
  grid-template-columns: 28px minmax(150px, 1fr) 28px !important;
  gap: 10px !important;
}

body.planner-shell .planner-range-step {
  display: inline-grid;
  place-items: center;
  width: 28px;
  height: 28px;
  min-width: 28px;
  padding: 0;
  border: 1px solid rgba(86, 217, 255, 0.34);
  border-radius: 999px;
  color: #06111f;
  background: linear-gradient(135deg, #56d9ff, #54f0a6);
  font-size: 17px;
  font-weight: 950;
  line-height: 1;
  cursor: pointer;
}

body.light.planner-shell .planner-range-step {
  color: #102033;
}

body.planner-shell .planner-range-row b {
  display: none !important;
}

body.planner-shell .planner-console,
body.planner-shell .schedule-grid {
  background: rgba(7, 12, 22, 0.055) !important;
}

body.planner-shell .schedule-left,
body.planner-shell .schedule-corner,
body.planner-shell .schedule-vehicle,
body.planner-shell .schedule-body {
  background-color: rgba(7, 12, 22, 0.072) !important;
}

body.planner-shell .schedule-task {
  min-height: 116px !important;
  height: 116px !important;
  max-height: 116px !important;
  padding: 12px 10px 36px !important;
  overflow: hidden !important;
}

body.planner-shell .schedule-task .task-headline {
  min-height: 24px;
}

body.planner-shell .schedule-task time,
body.planner-shell .schedule-task small:not(.card-price) {
  max-width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

body.planner-shell .schedule-task .card-price {
  position: absolute !important;
  left: 10px !important;
  right: 10px !important;
  bottom: 8px !important;
  width: auto !important;
  max-width: calc(100% - 20px) !important;
  justify-content: center !important;
  margin: 0 !important;
  padding: 4px 7px !important;
  line-height: 1.15 !important;
}

body.planner-shell .schedule-task.is-locked::after {
  top: 42px !important;
  right: 8px !important;
  bottom: auto !important;
  opacity: 0.84;
}

body.light.planner-shell .schedule-task .card-price {
  color: #102033 !important;
}

body[data-module] .module-panel,
body[data-module] .stat,
body[data-module] .ops-card,
body[data-module] .table-wrap,
body[data-module] .filter-panel,
body[data-module] .finance-hero {
  border-color: rgba(86, 217, 255, 0.16) !important;
  background:
    linear-gradient(135deg, rgba(86, 217, 255, 0.045), transparent 38%),
    rgba(7, 12, 22, 0.24) !important;
  backdrop-filter: blur(16px);
}

body.light[data-module] .module-panel,
body.light[data-module] .stat,
body.light[data-module] .ops-card,
body.light[data-module] .table-wrap,
body.light[data-module] .filter-panel,
body.light[data-module] .finance-hero {
  border-color: rgba(15, 23, 42, 0.14) !important;
  background:
    linear-gradient(135deg, rgba(86, 217, 255, 0.12), transparent 38%),
    rgba(255, 255, 255, 0.58) !important;
}

/* 2026-07-05: one locked canvas, shared by every module. */
:root {
  --dion-app-canvas-dark:
    radial-gradient(circle at 86% 4%, rgba(84, 240, 166, 0.20), transparent 30rem),
    radial-gradient(circle at 12% 0%, rgba(86, 217, 255, 0.16), transparent 34rem),
    linear-gradient(135deg, rgba(6, 16, 28, 0.96), rgba(6, 13, 23, 0.90) 48%, rgba(4, 18, 16, 0.92));
  --dion-app-canvas-light:
    radial-gradient(circle at 86% 4%, rgba(45, 212, 191, 0.20), transparent 30rem),
    radial-gradient(circle at 12% 0%, rgba(14, 165, 233, 0.16), transparent 34rem),
    linear-gradient(135deg, rgba(247, 252, 255, 0.98), rgba(236, 248, 255, 0.94) 48%, rgba(234, 250, 246, 0.94));
}

body:not(.light) .main,
body:not(.light)[data-module] .main,
body:not(.light).attendance-shell .main,
body:not(.light).planner-shell .main,
body:not(.light).driver-mode .main {
  background: var(--dion-app-canvas-dark) !important;
}

body.light .main,
body.light[data-module] .main,
body.light.attendance-shell .main,
body.light.planner-shell .main,
body.light.driver-mode .main {
  background: var(--dion-app-canvas-light) !important;
}

body:not(.light) .topbar,
body:not(.light).planner-shell .planner-controlbar {
  background: transparent !important;
  border-bottom-color: transparent !important;
  box-shadow: none !important;
}

body.planner-shell .planner-actionbar .planner-view-menu {
  margin-right: 8px !important;
}

body:not(.light)[data-module] .module-panel,
body:not(.light)[data-module] .stat,
body:not(.light)[data-module] .ops-card,
body:not(.light)[data-module] .table-wrap,
body:not(.light)[data-module] .filter-panel,
body:not(.light)[data-module] .finance-hero {
  background:
    linear-gradient(135deg, rgba(86, 217, 255, 0.04), transparent 38%),
    rgba(7, 12, 22, 0.18) !important;
}

.stats-hover-tooltip {
  position: fixed !important;
  inset: auto auto auto auto !important;
  z-index: 9999 !important;
  width: min(260px, calc(100vw - 24px)) !important;
  transform: none !important;
  transition: opacity 0.1s ease !important;
}

.stats-hover-tooltip.visible {
  transform: none !important;
}

/* 2026-07-05 final canvas lock: the harmonogram canvas is the source of truth. */
body:not(.light) .main,
body:not(.light)[data-module] .main,
body:not(.light).planner-shell .main,
body:not(.light).attendance-shell .main,
body:not(.light).driver-mode .main {
  background: var(--dion-app-canvas-dark) !important;
}

body.light .main,
body.light[data-module] .main,
body.light.planner-shell .main,
body.light.attendance-shell .main,
body.light.driver-mode .main {
  background: var(--dion-app-canvas-light) !important;
}

body.planner-shell .planner-console,
body.planner-shell .schedule-grid {
  background-color: rgba(7, 12, 22, 0.055) !important;
  background-image: none !important;
}

body.light.planner-shell .planner-console,
body.light.planner-shell .schedule-grid {
  background-color: rgba(255, 255, 255, 0.08) !important;
  background-image: none !important;
}

body.planner-shell .schedule-left,
body.planner-shell .schedule-corner,
body.planner-shell .schedule-vehicle,
body.planner-shell .schedule-body {
  background-color: rgba(7, 12, 22, 0.055) !important;
}

body.light.planner-shell .schedule-left,
body.light.planner-shell .schedule-corner,
body.light.planner-shell .schedule-vehicle,
body.light.planner-shell .schedule-body {
  background-color: rgba(255, 255, 255, 0.08) !important;
}

body[data-module] .module-panel,
body[data-module] .stat,
body[data-module] .ops-card,
body[data-module] .table-wrap,
body[data-module] .filter-panel,
body[data-module] .finance-hero {
  background:
    linear-gradient(135deg, rgba(86, 217, 255, 0.04), transparent 38%),
    rgba(7, 12, 22, 0.18) !important;
}

body.light[data-module] .module-panel,
body.light[data-module] .stat,
body.light[data-module] .ops-card,
body.light[data-module] .table-wrap,
body.light[data-module] .filter-panel,
body.light[data-module] .finance-hero {
  background:
    linear-gradient(135deg, rgba(86, 217, 255, 0.08), transparent 38%),
    rgba(255, 255, 255, 0.18) !important;
}

body.planner-shell .schedule-task {
  min-height: 84px !important;
  height: 84px !important;
  max-height: 84px !important;
  padding: 10px 10px 24px !important;
}

body.planner-shell .schedule-task .card-price {
  justify-content: flex-start !important;
  color: #eef8ff !important;
  background: transparent !important;
  border: 0 !important;
  box-shadow: none !important;
  font-size: 12px !important;
  min-height: 0 !important;
  padding: 0 !important;
}

body.light.planner-shell .schedule-task .card-price {
  color: #0f2237 !important;
  background: transparent !important;
  border: 0 !important;
}

body.planner-shell .schedule-task.transfer {
  border-color: rgba(16, 185, 129, 0.88) !important;
  border-left-color: #10b981 !important;
  color: #f8fbff !important;
  background:
    repeating-linear-gradient(135deg,
      rgba(16, 185, 129, 0.40) 0 10px,
      rgba(16, 185, 129, 0.40) 10px,
      transparent 10px,
      transparent 22px
    ),
    rgba(5, 18, 30, 0.92) !important;
}

body.planner-shell .schedule-task.transfer-yellow {
  border-color: rgba(245, 158, 11, 0.92) !important;
  border-left-color: #f59e0b !important;
}

body.planner-shell .schedule-task.transfer-red {
  border-color: rgba(239, 68, 68, 0.92) !important;
  border-left-color: #ef4444 !important;
}

body.planner-shell .schedule-task.transfer .card-price {
  justify-content: flex-start !important;
  color: #ff334e !important;
  background: transparent !important;
  box-shadow: none !important;
  padding: 0 !important;
  font-size: 13px !important;
}

body.planner-shell .planner-controlbar {
  min-height: 50px !important;
  margin-bottom: 8px !important;
  padding-bottom: 2px !important;
}

body.planner-shell .planner-console {
  margin-top: 0 !important;
}

/* 2026-07-05 surface unification: stop module-specific backgrounds from drifting. */
:root {
  --dion-surface-clear-dark: rgba(7, 12, 22, 0.055);
  --dion-surface-card-dark:
    linear-gradient(135deg, rgba(86, 217, 255, 0.035), transparent 40%),
    rgba(7, 12, 22, 0.075);
  --dion-surface-clear-light: rgba(255, 255, 255, 0.08);
  --dion-surface-card-light:
    linear-gradient(135deg, rgba(86, 217, 255, 0.08), transparent 40%),
    rgba(255, 255, 255, 0.10);
}

body:not(.light) :is(
  .module-panel,
  .stat,
  .ops-card,
  .table-wrap,
  .filter-panel,
  .finance-hero,
  .hero-strip,
  .person-card,
  .vehicle-card,
  .order-card,
  .dispatcher-card,
  .document-ride-card,
  .document-chip,
  .invoice-source-group,
  .invoice-line-row,
  .attendance-table-wrap,
  .driver-shift-card,
  .driver-attendance-month,
  .driver-ride-card,
  .driver-empty-card,
  .driver-doc-counter,
  .driver-metric-card,
  .telematics-card,
  .finance-payment-row,
  .finance-doc-row,
  .finance-match-row,
  .finance-automation-row,
  .superadmin-tenant,
  .backup-item,
  .health-grid article,
  .database-plan-grid article,
  .database-steps span,
  .data-quality-grid article,
  .automation-grid article,
  .stats-chart,
  .status-matrix
) {
  background: var(--dion-surface-card-dark) !important;
  border-color: rgba(86, 217, 255, 0.16) !important;
}

body.light :is(
  .module-panel,
  .stat,
  .ops-card,
  .table-wrap,
  .filter-panel,
  .finance-hero,
  .hero-strip,
  .person-card,
  .vehicle-card,
  .order-card,
  .dispatcher-card,
  .document-ride-card,
  .document-chip,
  .invoice-source-group,
  .invoice-line-row,
  .attendance-table-wrap,
  .driver-shift-card,
  .driver-attendance-month,
  .driver-ride-card,
  .driver-empty-card,
  .driver-doc-counter,
  .driver-metric-card,
  .telematics-card,
  .finance-payment-row,
  .finance-doc-row,
  .finance-match-row,
  .finance-automation-row,
  .superadmin-tenant,
  .backup-item,
  .health-grid article,
  .database-plan-grid article,
  .database-steps span,
  .data-quality-grid article,
  .automation-grid article,
  .stats-chart,
  .status-matrix
) {
  background: var(--dion-surface-card-light) !important;
  border-color: rgba(15, 23, 42, 0.14) !important;
}

body.planner-shell :is(
  .planner-console,
  .schedule-grid,
  .schedule-left,
  .schedule-corner,
  .schedule-vehicle,
  .schedule-body
) {
  background: var(--dion-surface-clear-dark) !important;
}

body.light.planner-shell :is(
  .planner-console,
  .schedule-grid,
  .schedule-left,
  .schedule-corner,
  .schedule-vehicle,
  .schedule-body
) {
  background: var(--dion-surface-clear-light) !important;
}

body.planner-shell .schedule-body {
  background-color: var(--dion-surface-clear-dark) !important;
  background-image: none !important;
}

body.light.planner-shell .schedule-body {
  background-color: var(--dion-surface-clear-light) !important;
  background-image: none !important;
}

body.planner-shell.planner-show-grid .schedule-body {
  background-image:
    linear-gradient(to right, rgba(255, 255, 255, 0.18) 1px, transparent 1px),
    linear-gradient(to right, rgba(86, 217, 255, 0.15) 1px, transparent 1px) !important;
  background-size:
    var(--planner-hour-width, 84px) 100%,
    var(--planner-quarter-width, 21px) 100% !important;
}

body.light.planner-shell.planner-show-grid .schedule-body {
  background-image:
    linear-gradient(to right, rgba(13, 28, 48, 0.22) 1px, transparent 1px),
    linear-gradient(to right, rgba(34, 124, 168, 0.17) 1px, transparent 1px) !important;
}

body.planner-shell .planner-check-row {
  align-items: center !important;
  display: flex !important;
  gap: 10px !important;
  justify-content: space-between !important;
  min-height: 34px !important;
  padding: 8px 10px !important;
  border: 1px solid rgba(86, 217, 255, 0.16) !important;
  border-radius: 10px !important;
  background: rgba(255, 255, 255, 0.035) !important;
}

body.planner-shell .planner-check-row input {
  width: 17px !important;
  height: 17px !important;
  accent-color: #56d9ff !important;
}

body.planner-shell .planner-check-row span {
  color: var(--muted) !important;
  font-weight: 900 !important;
}

body:not(.light) :is(.topbar, .planner-controlbar),
body.light :is(.topbar, .planner-controlbar) {
  background: transparent !important;
  box-shadow: none !important;
}

body:not(.light) :is(.main, .content) {
  background: var(--dion-app-canvas-dark) !important;
}

body.light :is(.main, .content) {
  background: var(--dion-app-canvas-light) !important;
}

body:not(.light) :is(
  .planner-console,
  .module-panel,
  .stat,
  .ops-card,
  .table-wrap,
  .filter-panel,
  .finance-hero,
  .hero-strip
) {
  background:
    linear-gradient(135deg, rgba(86, 217, 255, 0.035), transparent 40%),
    rgba(7, 12, 22, 0.075) !important;
}

body.light :is(
  .planner-console,
  .module-panel,
  .stat,
  .ops-card,
  .table-wrap,
  .filter-panel,
  .finance-hero,
  .hero-strip
) {
  background:
    linear-gradient(135deg, rgba(86, 217, 255, 0.08), transparent 40%),
    rgba(255, 255, 255, 0.08) !important;
}

body.planner-shell .planner-console {
  background: rgba(7, 12, 22, 0.055) !important;
}

body.light.planner-shell .planner-console {
  background: rgba(255, 255, 255, 0.08) !important;
}

/* Final DION menu mark: same visual language as the intro mark, with a real idle animation. */
@keyframes dion-menu-ring {
  to {
    transform: rotate(360deg);
  }
}

@keyframes dion-menu-scan {
  0%,
  42% {
    transform: translateX(-132%) rotate(18deg);
  }
  72%,
  100% {
    transform: translateX(132%) rotate(18deg);
  }
}

@keyframes dion-menu-breathe {
  0%,
  100% {
    filter: drop-shadow(0 0 8px rgba(86, 217, 255, 0.48));
    transform: scale(1);
  }
  50% {
    filter: drop-shadow(0 0 15px rgba(84, 240, 166, 0.58));
    transform: scale(1.045);
  }
}

@keyframes dion-menu-letter-glow {
  0%,
  100% {
    text-shadow: 0 0 12px rgba(86, 217, 255, 0.78);
    box-shadow:
      0 0 0 1px rgba(143, 236, 255, 0.48),
      0 0 18px rgba(86, 217, 255, 0.34),
      inset 0 0 12px rgba(86, 217, 255, 0.16);
  }
  50% {
    text-shadow: 0 0 18px rgba(84, 240, 166, 0.82);
    box-shadow:
      0 0 0 1px rgba(143, 236, 255, 0.56),
      0 0 24px rgba(84, 240, 166, 0.36),
      inset 0 0 14px rgba(86, 217, 255, 0.18);
  }
}

.sidebar .brand {
  align-items: center !important;
}

.sidebar .brand-menu-button.brand-mark,
.app-loader .brand-mark,
.login-page-brand .brand-mark {
  position: relative !important;
  width: 62px !important;
  height: 62px !important;
  min-width: 62px !important;
  overflow: hidden !important;
  isolation: isolate !important;
  border-radius: 20px !important;
  border: 1px solid rgba(143, 236, 255, 0.68) !important;
  background:
    radial-gradient(circle at 26% 18%, rgba(255, 255, 255, 0.52), transparent 24%),
    radial-gradient(circle at 78% 74%, rgba(84, 240, 166, 0.30), transparent 34%),
    linear-gradient(145deg, #68e8ff 0%, #0f8fc4 43%, #09283b 100%) !important;
  box-shadow:
    0 20px 42px rgba(0, 0, 0, 0.34),
    0 0 34px rgba(86, 217, 255, 0.34),
    inset 0 1px 0 rgba(255, 255, 255, 0.58),
    inset 0 -16px 32px rgba(2, 8, 23, 0.30) !important;
}

.sidebar .brand-menu-button.brand-mark::before,
.app-loader .brand-mark::before,
.login-page-brand .brand-mark::before {
  content: "" !important;
  position: absolute !important;
  inset: 8px !important;
  z-index: 1 !important;
  border-radius: 17px !important;
  border: 1px solid rgba(5, 12, 20, 0.56) !important;
  background:
    linear-gradient(90deg, rgba(255, 122, 24, 0) 0 15%, rgba(255, 122, 24, 0.98) 16% 40%, rgba(255, 255, 255, 0.90) 41% 49%, rgba(255, 122, 24, 0.98) 50% 76%, rgba(255, 122, 24, 0) 77% 100%),
    linear-gradient(145deg, rgba(3, 12, 23, 0.92), rgba(9, 36, 52, 0.72)) !important;
  background-size: 100% 10px, 100% 100% !important;
  background-position: center, center !important;
  background-repeat: no-repeat !important;
  box-shadow:
    inset 0 0 0 1px rgba(143, 236, 255, 0.22),
    0 0 18px rgba(86, 217, 255, 0.20) !important;
  animation: dion-logo-pulse 3.6s ease-in-out infinite !important;
}

.sidebar .brand-menu-button.brand-mark::after,
.app-loader .brand-mark::after,
.login-page-brand .brand-mark::after {
  content: "" !important;
  position: absolute !important;
  inset: -46% !important;
  z-index: 0 !important;
  background:
    conic-gradient(from 80deg, transparent 0deg, rgba(255, 255, 255, 0.60) 34deg, transparent 78deg, rgba(84, 240, 166, 0.38) 132deg, transparent 194deg, rgba(86, 217, 255, 0.34) 266deg, transparent 330deg) !important;
  opacity: 0.62 !important;
  animation: dion-menu-ring 5.8s linear infinite !important;
}

.sidebar .brand-menu-button.brand-mark .logo-letter,
.app-loader .brand-mark .logo-letter,
.login-page-brand .brand-mark .logo-letter {
  position: relative !important;
  z-index: 3 !important;
  display: grid !important;
  place-items: center !important;
  width: 38px !important;
  height: 38px !important;
  border-radius: 50% !important;
  color: #eaffff !important;
  background:
    radial-gradient(circle at 36% 24%, rgba(255, 255, 255, 0.20), transparent 32%),
    rgba(4, 13, 24, 0.88) !important;
  box-shadow:
    0 0 0 1px rgba(143, 236, 255, 0.48),
    0 0 20px rgba(86, 217, 255, 0.38),
    inset 0 0 12px rgba(86, 217, 255, 0.16) !important;
  font-size: 20px !important;
  font-weight: 950 !important;
  text-shadow: 0 0 14px rgba(86, 217, 255, 0.84) !important;
  transform: none !important;
  animation: dion-menu-letter-glow 4.2s ease-in-out infinite !important;
}

.sidebar .brand-menu-button.brand-mark .logo-letter::after,
.app-loader .brand-mark .logo-letter::after,
.login-page-brand .brand-mark .logo-letter::after {
  content: none !important;
  display: none !important;
  animation: none !important;
}

body.sidebar-collapsed .sidebar .brand-menu-button.brand-mark {
  width: 62px !important;
  height: 62px !important;
  min-width: 62px !important;
}

body.sidebar-collapsed .sidebar .brand-menu-button.brand-mark .logo-letter {
  width: 38px !important;
  height: 38px !important;
}

/* Fleet availability and unfinished-work safeguards. */
.vehicle-groups {
  display: grid;
  gap: 22px;
}

.vehicle-type-group {
  display: grid;
  gap: 12px;
}

.vehicle-type-group > .section-head {
  margin: 0;
  padding: 0 2px;
}

.vehicle-type-group > .section-head h2 {
  margin: 2px 0 0;
  font-size: 18px;
}

.vehicle-identity {
  display: flex;
  align-items: center;
  gap: 12px;
  min-width: 142px;
  padding: 10px 12px;
  color: #dffbff;
  border-right: 1px solid rgba(125, 221, 248, 0.18);
}

.vehicle-identity small {
  display: block;
  margin-top: 5px;
  color: var(--muted);
  font-size: 11px;
  font-weight: 800;
}

.schedule-task.trailer-resource {
  border-left-color: #fbbf24 !important;
  background:
    repeating-linear-gradient(135deg, rgba(251, 191, 36, 0.07) 0 7px, transparent 7px 15px),
    rgba(8, 20, 34, 0.90) !important;
}

body.light .vehicle-identity {
  color: #102033;
  border-right-color: rgba(15, 23, 42, 0.12);
}

@media (max-width: 720px) {
  .vehicle-identity {
    min-width: 0;
    width: 100%;
    border-right: 0;
    border-bottom: 1px solid rgba(125, 221, 248, 0.18);
  }

}

.vehicle-card.vehicle-out-of-service {
  border-left: 4px solid #f59e0b !important;
}

.vehicle-service-reason {
  margin: 8px 0;
  color: #fbbf24;
  font-weight: 800;
}

.schedule-vehicle.out-of-service,
.schedule-row.out-of-service-row {
  background:
    repeating-linear-gradient(135deg, rgba(245, 158, 11, 0.09) 0 8px, transparent 8px 18px),
    rgba(61, 37, 12, 0.18) !important;
}

.vehicle-status.out-of-service {
  color: #ffd37a !important;
  border-color: rgba(245, 158, 11, 0.72) !important;
  background: rgba(120, 53, 15, 0.42) !important;
}

.unfinished-watchlist {
  border-left: 4px solid rgba(84, 240, 166, 0.72) !important;
}

.unfinished-watchlist.has-items {
  border-left-color: #f59e0b !important;
  background:
    linear-gradient(90deg, rgba(245, 158, 11, 0.08), transparent 32%),
    rgba(9, 20, 32, 0.62) !important;
}

.unfinished-watchlist-rows {
  margin-top: 14px;
}

.unfinished-watchlist.is-collapsed .unfinished-watchlist-rows {
  display: none;
}

.unfinished-watchlist-row {
  border-right: 4px solid #f59e0b !important;
}

body.light .unfinished-watchlist.has-items {
  background:
    linear-gradient(90deg, rgba(245, 158, 11, 0.12), transparent 38%),
    rgba(255, 255, 255, 0.72) !important;
}

/* Ride detail and sharing polish. */
body.planner-shell .schedule-task.is-locked::after {
  content: none !important;
  display: none !important;
}

body.planner-shell .task-lock-icon {
  display: inline-grid !important;
  place-items: center !important;
  width: 24px !important;
  height: 24px !important;
  border: 1px solid rgba(148, 163, 184, 0.26) !important;
  border-radius: 8px !important;
  color: #f8fafc !important;
  background: rgba(15, 23, 42, 0.42) !important;
  font-size: 12px !important;
  line-height: 1 !important;
}

body.light.planner-shell .task-lock-icon {
  color: #0f2237 !important;
  background: rgba(255, 255, 255, 0.72) !important;
  border-color: rgba(15, 23, 42, 0.14) !important;
}

.ride-detail-view {
  display: grid;
  gap: 14px;
}

.ride-detail-expanded {
  padding: 0;
  border: 0;
  background: transparent;
}

.ride-detail-hero {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 18px;
  padding: 16px;
  border: 1px solid rgba(86, 217, 255, 0.18);
  border-radius: 14px;
  background:
    linear-gradient(135deg, rgba(86, 217, 255, 0.12), transparent 48%),
    rgba(255, 255, 255, 0.035);
}

.ride-detail-hero h3 {
  margin: 0;
  font-size: 23px;
  line-height: 1.15;
}

.ride-detail-hero .mini-metrics {
  justify-content: flex-end;
  max-width: 520px;
}

.ride-detail-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.35fr) minmax(320px, 0.75fr);
  gap: 14px;
  align-items: start;
}

.ride-detail-side {
  display: grid;
  gap: 14px;
  align-content: start;
}

.ride-detail-section {
  display: grid;
  gap: 12px;
  padding: 14px;
  border: 1px solid rgba(86, 217, 255, 0.18);
  border-radius: 14px;
  background: rgba(255, 255, 255, 0.035);
}

.ride-detail-section-main {
  min-height: 100%;
}

.section-title-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}

.section-title-row .eyebrow {
  margin: 0 0 4px;
}

.ride-detail-documents {
  display: grid;
  gap: 10px;
}

.ride-share-actions {
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
}

.ride-share-result {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: end;
  gap: 10px;
  padding: 10px;
  border: 1px dashed rgba(86, 217, 255, 0.22);
  border-radius: 12px;
}

.ride-share-result label {
  display: grid;
  gap: 6px;
  margin: 0;
}

.ride-share-result label span,
.ride-share-result small {
  grid-column: 1 / -1;
  color: var(--muted);
  font-size: 12px;
  font-weight: 800;
}

.ride-share-result input {
  width: 100%;
  min-width: 0;
}

.ride-share-result.is-loading {
  display: block;
}

body.light .ride-detail-section {
  background: rgba(255, 255, 255, 0.55);
  border-color: rgba(15, 23, 42, 0.12);
}

body.light .ride-detail-hero {
  background:
    linear-gradient(135deg, rgba(14, 165, 233, 0.14), transparent 48%),
    rgba(255, 255, 255, 0.62);
  border-color: rgba(15, 23, 42, 0.12);
}

body.light .ride-share-result {
  border-color: rgba(14, 116, 144, 0.28);
}

.company-user-dialog {
  border: 0;
  background: transparent;
}

.dialog-company-user-form {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
  margin-top: 14px;
}

.dialog-company-user-form button {
  align-self: end;
  min-height: 44px;
}

dialog[data-editor-collection="companyUser"] .company-user-list {
  margin-top: 14px;
}

.tacho-import-dialog {
  border: 0;
  background: transparent;
}

.tacho-import-form .wide {
  grid-column: 1 / -1;
}

.tacho-import-hero .mini-metrics span {
  text-transform: uppercase;
}

.status-control-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 10px;
  align-items: end;
}

.status-control-row select {
  width: 100%;
  min-height: 38px;
}

@media (min-width: 861px) and (pointer: fine) {
  [data-passkey-login],
  #passkeySetupButton {
    display: none !important;
  }
}

.stats-chart {
  position: relative !important;
}

.stats-hover-tooltip {
  position: absolute !important;
  inset: 14px 14px auto auto !important;
  left: auto !important;
  top: 14px !important;
  right: 14px !important;
  z-index: 30 !important;
  width: min(260px, calc(100% - 28px)) !important;
  transform: none !important;
  transition: opacity 0.1s ease !important;
}

.stats-hover-tooltip.visible {
  transform: none !important;
}

.auth-remember,
.login-page-card .auth-remember,
.auth-card .auth-remember,
.driver-login-card .auth-remember {
  display: flex;
  align-items: center;
  gap: 9px;
  min-height: 28px;
  color: var(--text);
  font-size: 14px;
  font-weight: 800;
  cursor: pointer;
}

.auth-remember input,
.login-page-card .auth-remember input,
.auth-card .auth-remember input,
.driver-login-card .auth-remember input {
  width: 18px;
  height: 18px;
  min-height: 0;
  margin: 0;
  padding: 0;
  accent-color: #4ddfe4;
}

.login-page-actions {
  display: grid;
  grid-template-columns: 1fr;
  gap: 9px;
}

.login-page-actions > button,
.driver-install-button {
  width: 100%;
  min-height: 44px;
}

[data-install-app][hidden] {
  display: none !important;
}

@media (max-width: 720px) {
  .ride-detail-grid,
  .dialog-company-user-form,
  .status-control-row {
    grid-template-columns: 1fr;
  }

  .ride-detail-hero {
    flex-direction: column;
  }

  .ride-detail-hero .mini-metrics {
    justify-content: flex-start;
  }

  .section-title-row,
  .ride-share-result {
    grid-template-columns: 1fr;
    align-items: stretch;
  }

  .section-title-row {
    display: grid;
  }
}

/* Final readable ride/order detail layout. */
dialog[data-editor-collection="rideDetail"],
dialog[data-editor-collection="orderDetail"] {
  width: min(1320px, calc(100vw - 32px)) !important;
}

dialog[data-editor-collection="rideDetail"] #editorFields,
dialog[data-editor-collection="orderDetail"] #editorFields {
  display: block !important;
  width: 100% !important;
  max-width: none !important;
  overflow-x: hidden !important;
}

dialog[data-editor-collection="rideDetail"] .dialog-card,
dialog[data-editor-collection="orderDetail"] .dialog-card {
  overflow-x: hidden !important;
}

.ride-detail-view {
  width: 100% !important;
  max-width: none !important;
  display: grid !important;
  grid-template-columns: 1fr !important;
  gap: 14px !important;
}

.ride-detail-hero {
  width: 100% !important;
  display: grid !important;
  grid-template-columns: minmax(0, 1fr) minmax(260px, auto) !important;
  align-items: start !important;
}

.ride-detail-hero h3 {
  max-width: 840px !important;
  font-size: clamp(22px, 2vw, 30px) !important;
  line-height: 1.16 !important;
  overflow-wrap: anywhere !important;
}

.ride-detail-hero .mini-metrics {
  justify-content: flex-end !important;
  max-width: none !important;
}

.ride-detail-grid {
  display: grid !important;
  grid-template-columns: 1fr !important;
  gap: 14px !important;
  width: 100% !important;
}

.ride-detail-section-main {
  min-height: 0 !important;
}

.ride-detail-side {
  display: grid !important;
  grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
  gap: 14px !important;
  align-items: stretch !important;
}

.ride-detail-side .ride-detail-section {
  align-content: start !important;
  min-width: 0 !important;
}

.ride-detail-resolve {
  grid-template-columns: minmax(0, 1fr) auto !important;
}

.compact-schedule {
  display: grid !important;
  gap: 8px !important;
}

.compact-schedule div {
  display: grid !important;
  grid-template-columns: 160px 110px minmax(0, 1fr) !important;
  gap: 12px !important;
  align-items: start !important;
  padding: 11px 0 !important;
  min-height: 0 !important;
}

.compact-schedule time,
.compact-schedule span,
.compact-schedule strong {
  min-width: 0 !important;
}

.compact-schedule strong {
  white-space: normal !important;
  overflow: visible !important;
  text-overflow: clip !important;
  overflow-wrap: anywhere !important;
}

.ride-share-actions,
.status-control-row {
  align-items: center !important;
}

@media (max-width: 980px) {
  .ride-detail-hero,
  .ride-detail-side,
  .ride-detail-resolve,
  .compact-schedule div {
    grid-template-columns: 1fr !important;
  }

  .ride-detail-hero .mini-metrics {
    justify-content: flex-start !important;
  }
}

/* Mail client */
.mail-stats {
  margin-bottom: 16px;
}

.mail-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.08fr) minmax(340px, .92fr);
  gap: 16px;
  align-items: start;
}

.mail-panel {
  min-height: 220px;
}

.mail-list {
  display: grid;
  gap: 10px;
}

.mail-list.compact {
  margin-top: 14px;
}

.mail-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto auto;
  gap: 12px;
  align-items: center;
  padding: 12px 14px;
  border: 1px solid rgba(91, 220, 255, .18);
  border-left: 4px solid rgba(81, 224, 211, .88);
  border-radius: 8px;
  background: rgba(8, 19, 32, .48);
}

.mail-row.status-approved,
.mail-row.status-prepared {
  border-left-color: #36e59c;
}

.mail-row.status-sent,
.mail-row.status-matched {
  border-left-color: #4f8dff;
}

.mail-row.status-rejected,
.mail-row.status-failed {
  border-left-color: #ff5b78;
}

.mail-row-main {
  display: grid;
  gap: 4px;
  min-width: 0;
}

.mail-row-main strong,
.mail-row-main span,
.mail-row-main small {
  overflow: hidden;
  text-overflow: ellipsis;
}

.mail-row-main span,
.mail-row-main small,
.mail-config span {
  color: var(--muted);
}

.mail-actions {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
  justify-content: flex-end;
}

button.danger,
.danger.mini {
  border: 1px solid rgba(255, 91, 120, .38);
  color: #fff;
  background: linear-gradient(135deg, rgba(255, 91, 120, .92), rgba(190, 32, 68, .86));
  box-shadow: 0 12px 26px rgba(255, 91, 120, .18);
}

.mail-config {
  display: grid;
  gap: 10px;
}

.mail-config div {
  display: grid;
  grid-template-columns: 120px minmax(0, 1fr);
  gap: 12px;
  padding: 10px 0;
  border-bottom: 1px solid rgba(91, 220, 255, .14);
}

.mail-config strong {
  overflow: hidden;
  text-overflow: ellipsis;
}

.mail-compose-layout {
  display: grid;
  gap: 14px;
}

.mail-compose-layout textarea {
  min-height: 240px;
  resize: vertical;
}

body.light .mail-row {
  color: #102033;
  border-color: rgba(48, 126, 165, .2);
  background: rgba(255, 255, 255, .78);
  box-shadow: 0 18px 42px rgba(54, 105, 136, .12);
}

body.light .mail-row-main span,
body.light .mail-row-main small,
body.light .mail-config span {
  color: rgba(30, 55, 76, .66);
}

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

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

  .mail-actions {
    justify-content: flex-start;
  }
}

/* Finance overview cockpit */
.finance-command {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 18px;
}

.finance-click-stats .stat {
  cursor: pointer;
  transition: transform .16s ease, border-color .16s ease, box-shadow .16s ease;
}

.finance-click-stats .stat:hover,
.finance-click-stats .stat[data-active="true"] {
  transform: translateY(-1px);
  border-color: rgba(84, 240, 166, .54);
  box-shadow: 0 20px 54px rgba(58, 222, 185, .14);
}

.finance-dashboard-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.25fr) minmax(320px, .75fr);
  gap: 16px;
  align-items: stretch;
}

.finance-chart-panel,
.finance-cashflow-panel {
  min-height: 320px;
}

.finance-overview-chart {
  position: relative;
  display: grid;
  grid-template-columns: repeat(6, minmax(0, 1fr));
  gap: 18px;
  min-height: 220px;
  padding: 28px 10px 0;
  border-top: 1px solid rgba(142, 180, 213, .18);
  background-image: repeating-linear-gradient(to bottom, rgba(142, 180, 213, .18) 0 1px, transparent 1px 48px);
}

.finance-overview-chart svg {
  position: absolute;
  inset: 24px 22px 30px;
  width: calc(100% - 44px);
  height: calc(100% - 54px);
  overflow: visible;
  pointer-events: none;
}

.finance-overview-chart polyline {
  fill: none;
  stroke: #facc15;
  stroke-width: 2.4;
  vector-effect: non-scaling-stroke;
  filter: drop-shadow(0 0 6px rgba(250, 204, 21, .32));
}

.finance-month-bar,
.finance-day-bar {
  position: relative;
  display: grid;
  align-items: end;
  justify-items: center;
  min-width: 0;
  border: 0;
  padding: 0 0 24px;
  color: var(--text);
  background: transparent;
  cursor: pointer;
}

.finance-month-bar span,
.finance-day-bar span {
  position: absolute;
  bottom: 28px;
  width: 42%;
  min-height: 2px;
  border-radius: 6px 6px 0 0;
}

.finance-month-bar .income,
.finance-day-bar .income {
  left: 15%;
  background: linear-gradient(180deg, #2dd94c, #0b8c00);
}

.finance-month-bar .cost,
.finance-day-bar .cost {
  right: 15%;
  background: linear-gradient(180deg, #ff6375, #c9182c);
}

.finance-month-bar small,
.finance-day-bar small {
  position: absolute;
  bottom: 0;
  color: var(--muted);
  font-weight: 850;
}

.finance-split-panel {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0;
  align-content: center;
}

.finance-split-block {
  display: grid;
  gap: 12px;
  padding: 8px 18px;
}

.finance-split-block + .finance-split-block {
  border-left: 1px solid rgba(142, 180, 213, .22);
}

.finance-split-block h3 {
  margin: 0 0 6px;
  font-size: 22px;
}

.finance-split-block button,
.finance-warning-links button {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 12px;
  align-items: center;
  border: 0;
  border-radius: 8px;
  padding: 7px 0;
  color: var(--text);
  background: transparent;
  text-align: left;
  cursor: pointer;
}

.finance-split-block button span,
.finance-warning-links button span {
  color: #39bdf8;
  text-decoration: underline;
}

.danger-text,
.finance-cashflow-total.negative {
  color: #ff5470 !important;
}

.finance-cashflow-panel,
.finance-warning-panel,
.finance-detail-panel,
.finance-match-panel,
.finance-automation-panel {
  margin-top: 16px;
}

.finance-cashflow-total {
  margin: 6px 0 0;
  color: #2be869;
  font-size: 19px;
  font-weight: 950;
}

.finance-cashflow-chart {
  display: grid;
  grid-template-columns: repeat(30, minmax(12px, 1fr));
  gap: 5px;
  min-height: 220px;
  padding-top: 20px;
  border-top: 1px solid rgba(142, 180, 213, .18);
  background-image: repeating-linear-gradient(to bottom, rgba(142, 180, 213, .16) 0 1px, transparent 1px 44px);
}

.finance-day-bar span {
  width: 70%;
  left: 15%;
  right: auto;
}

.finance-day-bar .cost {
  background: linear-gradient(180deg, #ff6375, #c9182c);
}

.finance-warning-links {
  display: grid;
  gap: 12px;
  align-content: center;
  min-height: 180px;
}

.finance-warning-links button {
  grid-template-columns: 68px minmax(0, 1fr);
  padding: 11px 12px;
  border: 1px solid rgba(142, 180, 213, .16);
  background: rgba(9, 17, 28, .28);
}

.finance-warning-links strong {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 48px;
  min-height: 34px;
  border-radius: 999px;
  color: #061016;
  background: #facc15;
  font-size: 15px;
}

.finance-row-actions {
  display: flex;
  justify-content: flex-end;
  gap: 8px;
  flex-wrap: wrap;
}

.finance-reminder-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto auto;
  gap: 12px;
  align-items: center;
  border: 1px solid rgba(255, 91, 120, .24);
  border-left: 4px solid #ff5470;
  border-radius: 8px;
  padding: 12px;
  background: rgba(255, 91, 120, .08);
}

.finance-reminder-row span {
  color: var(--muted);
  font-size: 12px;
}

.cashflow-row strong:last-child {
  color: #54f0a6;
}

.cashflow-row.cost-expense strong:last-child {
  color: #ff6375;
}

body.light .finance-overview-chart,
body.light .finance-cashflow-chart {
  background-image: repeating-linear-gradient(to bottom, rgba(73, 119, 146, .18) 0 1px, transparent 1px 48px);
}

body.light .finance-warning-links button,
body.light .finance-reminder-row {
  background: rgba(255, 255, 255, .62);
}

@media (max-width: 980px) {
  .finance-command,
  .finance-dashboard-grid,
  .finance-split-panel,
  .finance-reminder-row {
    grid-template-columns: 1fr;
  }

  .finance-command {
    align-items: stretch;
    flex-direction: column;
  }

  .finance-split-block + .finance-split-block {
    border-left: 0;
    border-top: 1px solid rgba(142, 180, 213, .22);
  }

  .finance-cashflow-chart {
    grid-template-columns: repeat(15, minmax(12px, 1fr));
    row-gap: 12px;
  }
}

.top-actions .icon-only {
  width: 38px;
  min-width: 38px;
  height: 38px;
  padding: 0 !important;
  display: inline-grid;
  place-items: center;
  border-radius: 999px;
  line-height: 1;
}

.top-actions .icon-only[hidden] {
  display: none !important;
}

.top-actions .icon-only svg {
  width: 18px;
  height: 18px;
  fill: none;
  stroke: currentColor;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.top-actions .icon-only.active,
.top-mail-button.active {
  color: #061016;
  border-color: rgba(86, 217, 255, 0.78) !important;
  background: linear-gradient(135deg, var(--cyan), var(--green)) !important;
}

.module-filter-tools {
  gap: 8px !important;
}

.module-filter-tools .top-module-filters {
  order: 1;
}

.module-filter-tools .view-options-wrap {
  order: 2;
}

.module-filter-tools .top-mail-button {
  order: 3;
}

.module-filter-tools #themeButton {
  order: 4;
}

body.light .view-options-panel {
  color: #0f172a;
  border-color: rgba(15, 23, 42, 0.14);
  background: rgba(255, 255, 255, 0.94);
  box-shadow: 0 22px 70px rgba(15, 23, 42, 0.16);
}

body.light .view-options-panel label,
body.light .view-options-panel .muted {
  color: #526173;
}

dialog[data-editor-collection="mailCompose"] {
  width: min(980px, calc(100vw - 32px)) !important;
  max-height: calc(100vh - 28px) !important;
  overflow: hidden !important;
}

dialog[data-editor-collection="mailCompose"] .dialog-card {
  max-height: calc(100vh - 28px);
  overflow-x: hidden;
  overflow-y: auto;
}

dialog[data-editor-collection="mailCompose"] .form-grid {
  grid-template-columns: minmax(0, 1fr) !important;
  align-items: stretch;
}

.mail-compose-layout {
  grid-column: 1 / -1;
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(280px, 0.68fr);
  gap: 14px;
  width: 100%;
}

.mail-compose-main,
.mail-compose-side {
  min-width: 0;
  padding: 14px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: rgba(255, 255, 255, 0.035);
}

.mail-compose-main {
  display: grid;
  gap: 12px;
}

.mail-compose-main .field {
  display: grid;
  gap: 6px;
}

.mail-compose-main input,
.mail-compose-main textarea {
  width: 100%;
}

.mail-compose-main textarea {
  min-height: 260px;
  resize: vertical;
}

.mail-compose-side {
  align-content: start;
  display: grid;
  gap: 12px;
}

.mail-compose-side h3 {
  margin: -4px 0 2px;
  font-size: 18px;
}

.mail-compose-attachments,
.mail-compose-links {
  display: grid;
  gap: 8px;
}

.mail-compose-attachment,
.mail-compose-link {
  display: grid;
  gap: 4px;
  padding: 10px;
  border: 1px solid rgba(86, 217, 255, 0.18);
  border-radius: 8px;
  background: rgba(86, 217, 255, 0.06);
}

.mail-compose-link a,
.mail-compose-attachment a {
  overflow-wrap: anywhere;
  color: var(--cyan);
}

body.light .mail-compose-main,
body.light .mail-compose-side {
  background: rgba(255, 255, 255, 0.72);
}

body.light .mail-compose-attachment,
body.light .mail-compose-link {
  border-color: rgba(14, 116, 144, 0.16);
  background: rgba(14, 165, 233, 0.08);
}

@media (max-width: 860px) {
  .mail-compose-layout {
    grid-template-columns: 1fr;
  }

  .top-actions .icon-only {
    width: 40px;
    min-width: 40px;
  }
}