/*
 * TOP1 UI polish layer — visual refinement over the legacy monolith.
 * Loaded after app.css/tokens.css and before safety.css.
 * No priority overrides; this layer is safe to remove or tune independently.
 */

:root,
.top1-app-shell,
.top1-login-shell {
  --top1-brand-red: #e30613;
  --top1-brand-red-hover: #c8000d;
  --top1-brand-red-soft: #fff1f2;
  --top1-ui-control-height: var(--top1-control-min-height, 42px);
  --top1-ui-control-radius: var(--top1-radius-lg, 16px);
  --top1-ui-action-shadow: 0 12px 24px rgba(227, 6, 19, 0.20);
  --top1-ui-card-border: var(--top1-border-soft, rgba(148, 163, 184, 0.28));
  --top1-ui-card-bg: linear-gradient(180deg, rgba(255, 255, 255, 0.98), rgba(255, 255, 255, 0.94));
  --top1-ui-card-shadow: var(--top1-shadow-card, 0 12px 30px rgba(15, 23, 42, 0.08));
  --top1-ui-card-shadow-hover: var(--top1-shadow-raised, 0 18px 48px rgba(15, 23, 42, 0.12));
  --top1-ui-danger-tint: var(--top1-danger-soft, #fff1f2);
  --top1-ui-warning-tint: var(--top1-warning-soft, #fff7e8);
  --top1-ui-success-tint: var(--top1-success-soft, #ecfdf3);
  --top1-ui-info-tint: var(--top1-info-soft, #eff6ff);
}


/* App chrome */
.top1-app-shell {
  background:
    radial-gradient(860px 360px at 18% -8%, rgba(227, 6, 19, 0.08), transparent 64%),
    radial-gradient(760px 320px at 94% 2%, rgba(227, 6, 19, 0.055), transparent 66%),
    linear-gradient(180deg, #f7f9fc 0%, var(--top1-bg) 46%, #e8eef6 100%);
  color: var(--top1-text);
}

.top1-app-main,
.top1-app-content,
.top1-workspace {
  background: transparent;
  min-width: 0;
}

.top1-app-content {
  padding-inline: clamp(12px, 2vw, 24px);
}

.top1-workspace {
  width: min(100%, var(--top1-content-max, 1290px));
  margin-inline: auto;
}

/* Sidebar */
.top1-app-sidebar {
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.035), transparent 22%),
    linear-gradient(180deg, var(--top1-sidebar) 0%, var(--top1-sidebar-strong, #08111f) 100%);
  border-right: 1px solid var(--top1-sidebar-border);
  box-shadow: 18px 0 44px rgba(15, 23, 42, 0.12);
}

.top1-app-brand {
  border-radius: var(--top1-radius-lg);
  letter-spacing: 0.03em;
}

.top1-app-nav {
  gap: 6px;
}

.top1-app-nav-link {
  position: relative;
  border: 1px solid transparent;
  border-radius: var(--top1-radius-lg);
  color: var(--top1-sidebar-text-muted);
  transition: background-color 160ms ease, border-color 160ms ease, color 160ms ease, transform 160ms ease;
}

.top1-app-nav-link:hover,
.top1-app-nav-link:focus-visible {
  color: var(--top1-sidebar-text);
  background: rgba(255, 255, 255, 0.07);
  border-color: rgba(255, 255, 255, 0.08);
}

.top1-app-nav-link.is-active {
  color: #ffffff;
  background: linear-gradient(135deg, rgba(227, 6, 19, 0.94), rgba(200, 0, 13, 0.82));
  border-color: rgba(255, 255, 255, 0.18);
  box-shadow: 0 14px 28px rgba(227, 6, 19, 0.22), inset 0 1px 0 rgba(255, 255, 255, 0.24);
}

.top1-app-nav-link.is-active::before {
  content: "";
  position: absolute;
  inset: 10px auto 10px -7px;
  width: 3px;
  border-radius: var(--top1-radius-pill);
  background: #ffffff;
  box-shadow: 0 0 18px rgba(255, 255, 255, 0.58);
}

.top1-sidebar-account {
  border-radius: var(--top1-radius-xl);
  background: rgba(255, 255, 255, 0.055);
  border: 1px solid rgba(255, 255, 255, 0.09);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.06);
}

/* 2026 sidebar refinement: one calm automotive navigation system. */
.top1-app-sidebar {
  background:
    radial-gradient(130% 34% at 12% -2%, rgba(227, 6, 19, 0.17), transparent 66%),
    linear-gradient(180deg, #0d1828 0%, #091321 68%, #07101c 100%);
  border-right-color: rgba(148, 163, 184, 0.18);
  box-shadow:
    16px 0 36px rgba(15, 23, 42, 0.16),
    inset -1px 0 0 rgba(255, 255, 255, 0.025);
}

.top1-app-brand {
  width: 100%;
  min-width: 0;
  min-height: 48px;
  gap: 8px;
  padding: 2px 4px;
  border-radius: 12px;
  transition: background-color 160ms ease, transform 160ms ease;
}

.top1-app-brand::before {
  content: "";
  flex: 0 0 44px;
  width: 44px;
  height: 44px;
  display: block;
  border: 1px solid rgba(255, 255, 255, 0.16);
  border-radius: 11px;
  background-color: #030303;
  background-image: url("../images/top1-brand-robot-badge.png");
  background-repeat: no-repeat;
  background-position: center;
  background-size: cover;
  box-shadow:
    0 8px 18px rgba(227, 6, 19, 0.2),
    inset 0 0 0 1px rgba(255, 255, 255, 0.04);
}

.top1-app-brand:hover {
  background: rgba(255, 255, 255, 0.045);
}

.top1-app-brand:active {
  transform: translateY(1px);
}

.top1-app-brand-word {
  flex: 0 0 auto;
  width: max-content;
  min-width: max-content;
  max-width: none;
  display: inline-block;
  color: #ffffff;
  font-size: 12.5px;
  line-height: 1;
  font-weight: 900;
  letter-spacing: -0.018em;
  text-shadow: none;
  white-space: nowrap;
}

.top1-app-brand-word::before,
.top1-app-brand-word::after {
  content: none;
  display: none;
}

.top1-app-nav {
  gap: 4px;
  padding: 2px 0 8px;
  scrollbar-color: rgba(148, 163, 184, 0.34) transparent;
}

.top1-app-nav-link {
  overflow: hidden;
  border-color: transparent;
  border-radius: 11px;
  color: rgba(203, 213, 225, 0.72);
  font-size: 12.5px;
  font-weight: 720;
  letter-spacing: -0.008em;
  transition:
    background-color 160ms ease,
    border-color 160ms ease,
    color 160ms ease,
    box-shadow 160ms ease,
    transform 160ms ease;
}

.top1-app-nav-link:hover,
.top1-app-nav-link:focus-visible {
  color: #ffffff;
  background: rgba(255, 255, 255, 0.065);
  border-color: rgba(255, 255, 255, 0.085);
  transform: translateX(2px);
}

.top1-app-nav-link:focus-visible {
  outline: 0;
  box-shadow: 0 0 0 3px rgba(227, 6, 19, 0.22);
}

.top1-app-nav-link.is-active {
  color: #ffffff;
  background: linear-gradient(135deg, #ed1320 0%, #c6000c 100%);
  border-color: rgba(255, 255, 255, 0.21);
  box-shadow:
    0 10px 22px rgba(227, 6, 19, 0.24),
    inset 0 1px 0 rgba(255, 255, 255, 0.25),
    inset 0 -1px 0 rgba(96, 0, 6, 0.32);
  transform: none;
}

.top1-app-nav-link.is-active::before {
  display: none;
}

.top1-app-nav-icon {
  border-color: rgba(255, 255, 255, 0.095);
  border-radius: 7px;
  background: rgba(255, 255, 255, 0.045);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.08);
  transition: background-color 160ms ease, border-color 160ms ease, box-shadow 160ms ease;
}

.top1-app-nav-link:hover .top1-app-nav-icon,
.top1-app-nav-link:focus-visible .top1-app-nav-icon {
  border-color: rgba(255, 255, 255, 0.15);
  background: rgba(255, 255, 255, 0.09);
}

.top1-app-nav-link.is-active .top1-app-nav-icon {
  border-color: rgba(255, 255, 255, 0.27);
  background: rgba(255, 255, 255, 0.15);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.2),
    0 5px 12px rgba(100, 0, 7, 0.18);
}

.top1-app-nav-badge {
  border: 1px solid rgba(255, 255, 255, 0.2);
  background: #ffffff;
  color: #b0000b;
  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.14);
}

.top1-app-sidebar-footer {
  padding-top: 12px;
  border-top-color: rgba(148, 163, 184, 0.16);
}

.top1-sidebar-account {
  gap: 3px;
  padding: 4px;
  border-color: rgba(148, 163, 184, 0.16);
  border-radius: 14px;
  background: linear-gradient(145deg, rgba(255, 255, 255, 0.075), rgba(255, 255, 255, 0.025));
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.08),
    0 10px 22px rgba(0, 0, 0, 0.14);
}

.top1-sidebar-user {
  min-height: 40px;
  grid-template-columns: 28px minmax(0, 1fr);
  column-gap: 8px;
  padding: 5px 6px;
  border: 0;
  border-radius: 10px;
  background: transparent;
  box-shadow: none;
}

.top1-sidebar-user-avatar {
  width: 28px;
  height: 28px;
  border-color: rgba(219, 234, 254, 0.42);
  box-shadow:
    0 0 0 2px rgba(255, 255, 255, 0.055),
    0 6px 14px rgba(0, 0, 0, 0.2);
}

.top1-sidebar-user-name {
  font-size: 10.5px;
  line-height: 1.15;
  font-weight: 850;
}

.top1-sidebar-user-role {
  color: rgba(203, 213, 225, 0.68);
  font-size: 9px;
  line-height: 1.15;
}

.top1-sidebar-logout {
  min-height: 30px;
  border-color: transparent;
  border-radius: 9px;
  background: rgba(255, 255, 255, 0.035);
  color: rgba(226, 232, 240, 0.78);
}

.top1-sidebar-logout:hover,
.top1-sidebar-logout:focus-visible {
  border-color: rgba(248, 113, 113, 0.22);
  background: rgba(227, 6, 19, 0.12);
  color: #ffffff;
  outline: 0;
}

@media (min-width: 981px) {
  .top1-app-sidebar {
    padding: 12px 10px 14px;
  }

  .top1-app-brand-block {
    height: 56px;
    margin-bottom: 10px;
  }

  .top1-app-nav {
    grid-auto-rows: 45px;
  }

  .top1-app-nav-link {
    height: 40px;
    min-height: 40px;
    padding-inline: 7px;
  }

  .top1-app-shell.is-sidebar-collapsed .top1-app-brand-word,
  .top1-sidebar-collapsed .top1-app-brand-word {
    display: none;
  }

  .top1-app-shell.is-sidebar-collapsed .top1-app-brand,
  .top1-sidebar-collapsed .top1-app-brand {
    padding: 2px 0;
  }

  .top1-app-shell.is-sidebar-collapsed .top1-app-brand::before,
  .top1-sidebar-collapsed .top1-app-brand::before {
    margin-inline: auto;
  }
}

@media (max-width: 980px) {
  .top1-app-brand {
    width: auto;
    max-width: calc(100% - 48px);
  }

  .top1-app-nav-link:hover,
  .top1-app-nav-link:focus-visible {
    transform: none;
  }
}

@media (prefers-reduced-motion: reduce) {
  .top1-app-brand,
  .top1-app-nav-link,
  .top1-app-nav-icon {
    transition: none;
  }
}

.top1-sidebar-nav-popover {
  --top1-sidebar-popover-arrow-y: 50%;
  position: fixed;
  z-index: 560;
  width: min(286px, calc(100vw - 24px));
  padding: 14px 15px 15px;
  overflow: visible;
  border: 1px solid rgba(148, 163, 184, 0.22);
  border-radius: 15px;
  background:
    radial-gradient(120% 90% at 0% 0%, rgba(227, 6, 19, 0.12), transparent 56%),
    linear-gradient(145deg, rgba(20, 30, 44, 0.985), rgba(8, 16, 28, 0.99));
  box-shadow:
    0 20px 46px rgba(2, 8, 23, 0.28),
    0 4px 14px rgba(2, 8, 23, 0.2),
    inset 0 1px 0 rgba(255, 255, 255, 0.08);
  color: #ffffff;
  opacity: 0;
  visibility: hidden;
  transform: translateX(-7px) scale(0.98);
  transform-origin: left center;
  pointer-events: none;
  isolation: isolate;
  transition: opacity 150ms ease, transform 150ms ease, visibility 150ms ease;
}

.top1-sidebar-nav-popover[hidden] {
  display: none;
}

.top1-sidebar-nav-popover::before {
  content: "";
  position: absolute;
  z-index: -1;
  left: -6px;
  top: var(--top1-sidebar-popover-arrow-y);
  width: 12px;
  height: 12px;
  border-left: 1px solid rgba(148, 163, 184, 0.22);
  border-bottom: 1px solid rgba(148, 163, 184, 0.22);
  background: #111c2a;
  transform: translateY(-50%) rotate(45deg);
}

.top1-sidebar-nav-popover::after {
  content: "";
  position: absolute;
  inset: 0 18px auto;
  height: 2px;
  border-radius: 0 0 999px 999px;
  background: linear-gradient(90deg, transparent, #ed1320 24%, #ed1320 76%, transparent);
  opacity: 0.9;
}

.top1-sidebar-nav-popover[data-side="left"] {
  transform: translateX(7px) scale(0.98);
  transform-origin: right center;
}

.top1-sidebar-nav-popover[data-side="left"]::before {
  right: -6px;
  left: auto;
  border: 0;
  border-top: 1px solid rgba(148, 163, 184, 0.22);
  border-right: 1px solid rgba(148, 163, 184, 0.22);
}

.top1-sidebar-nav-popover.is-visible {
  opacity: 1;
  visibility: visible;
  transform: translateX(0) scale(1);
}

.top1-sidebar-nav-popover__eyebrow {
  display: block;
  margin-bottom: 5px;
  color: #fb7185;
  font-size: 9px;
  font-weight: 900;
  line-height: 1;
  letter-spacing: 0.09em;
  text-transform: uppercase;
}

.top1-sidebar-nav-popover__title {
  display: block;
  margin: 0 0 5px;
  color: #ffffff;
  font-size: 14px;
  font-weight: 880;
  line-height: 1.2;
  letter-spacing: -0.012em;
}

.top1-sidebar-nav-popover__description {
  display: block;
  color: rgba(226, 232, 240, 0.76);
  font-size: 11.5px;
  font-weight: 600;
  line-height: 1.42;
}

@media (max-width: 980px) {
  .top1-sidebar-nav-popover {
    display: none;
  }
}

@media (prefers-reduced-motion: reduce) {
  .top1-sidebar-nav-popover {
    transition: none;
  }
}

/* Shared surfaces */
.top1-content-card,
.top1-card,
.top1-panel,
.top1-clients-card,
.top1-summary-card,
.top1-empty-state,
.top1-client-card,
.top1rd-card,
.top1-diagnostics-card,
.top1-diagnostics-overview-card,
.top1-diagnostics-mobile-devices-card,
.top1-diagnostics-vehicles-card,
.top1-diagnostics-client-reports-card,
.top1-planner-utility-card,
.top1-planner-shift-card,
.top1-repair-plan-card,
.top1-repair-order-card,
.top1-parts-summary-card,
.top1-finance-summary-card,
.top1-orders-status-card,
.top1-operational-card,
.top1-data-management-card,
.top1-finance-card {
  border-color: var(--top1-ui-card-border);
  border-radius: var(--top1-radius-xl);
  background: var(--top1-ui-card-bg), var(--top1-surface);
  box-shadow: var(--top1-ui-card-shadow);
}

.top1-content-card:hover,
.top1-card:hover,
.top1-panel:hover,
.top1-clients-card:hover,
.top1-summary-card:hover,
.top1-client-card:hover,
.top1rd-card:hover,
.top1-diagnostics-card:hover,
.top1-planner-utility-card:hover,
.top1-planner-shift-card:hover,
.top1-repair-plan-card:hover,
.top1-parts-summary-card:hover,
.top1-finance-summary-card:hover,
.top1-orders-status-card:hover,
.top1-operational-card:hover,
.top1-data-management-card:hover,
.top1-finance-card:hover {
  border-color: var(--top1-border-strong);
  box-shadow: var(--top1-ui-card-shadow-hover);
}

.top1-content-card,
.top1-clients-card,
.top1-summary-card,
.top1-empty-state,
.top1-parts-summary-card,
.top1-finance-summary-card,
.top1-orders-status-card {
  padding: clamp(14px, 1.35vw, 20px);
}

.top1-card-header,
.top1-diagnostics-overview-head,
.top1-diagnostics-live-scan-header,
.top1-diagnostics-state-history-header,
.top1-diagnostics-contact-header,
.top1-planner-toolbar,
.top1-repair-detail-header,
.top1-order-section-header,
.top1-finance-mini-header {
  gap: var(--top1-space-sm);
}

.top1-card-header h2,
.top1-content-card h2,
.top1-empty-state h2,
.top1-diagnostics-overview-copy h2,
.top1-command-center-titleblock h2,
.top1-repair-detail-header h2 {
  color: var(--top1-text-strong);
  letter-spacing: -0.02em;
  line-height: var(--top1-line-height-tight);
}

.top1-content-card p,
.top1-empty-state p,
.top1-inline-note,
.top1-summary-label,
.top1-summary-note,
.top1-clients-summary-label,
.top1-parts-summary-label,
.top1-finance-summary-label,
.top1-orders-status-name,
.top1-focus-note,
.top1-team-subline,
.top1-diagnostics-card-note,
.top1-diagnostics-muted-state,
.top1-diagnostics-meta-line {
  color: var(--top1-muted);
  line-height: var(--top1-line-height-body);
}

/* Buttons and actions */
.top1-app-button,
.top1-primary-button,
.top1-secondary-button,
.top1-link-button,
.top1-chip-button,
.top1-diagnostics-action-button,
.top1-diagnostics-device-action-button,
.top1-diagnostics-report-action-button,
.top1-knowledge-action-button,
.top1-planner-action-pill,
.top1-planner-icon-button,
.top1-planner-date-jump-button {
  align-items: center;
  justify-content: center;
  min-height: var(--top1-ui-control-height);
  border-radius: var(--top1-ui-control-radius);
  font-weight: 750;
  letter-spacing: 0.005em;
  transition: transform 140ms ease, box-shadow 140ms ease, background-color 140ms ease, border-color 140ms ease, color 140ms ease;
}

.top1-app-button,
.top1-primary-button,
.top1-diagnostics-action-button.is-primary {
  border-color: rgba(227, 6, 19, 0.86);
  background: linear-gradient(180deg, #f43f46 0%, var(--top1-accent) 100%);
  color: #ffffff;
  box-shadow: var(--top1-ui-action-shadow);
}

.top1-app-button:hover,
.top1-primary-button:hover,
.top1-diagnostics-action-button.is-primary:hover {
  background: linear-gradient(180deg, #dc2626 0%, var(--top1-accent-hover) 100%);
  box-shadow: 0 16px 30px rgba(227, 6, 19, 0.22);
  transform: translateY(-1px);
}

.top1-secondary-button,
.top1-link-button,
.top1-chip-button,
.top1-planner-action-pill,
.top1-planner-icon-button,
.top1-planner-date-jump-button {
  border-color: var(--top1-border);
  background: linear-gradient(180deg, #ffffff 0%, #f8fafc 100%);
  color: var(--top1-text-strong);
  box-shadow: var(--top1-shadow);
}

@media (min-width: 1181px) {
  .top1-app-shell[data-top1-section="planner"] .top1-planner-toolbar {
    box-sizing: border-box;
    grid-template-columns: 322px 116px minmax(0, 1fr);
    align-items: center;
    column-gap: 12px;
    padding: 3px 4px;
  }

  .top1-app-shell[data-top1-section="planner"] .top1-planner-toolbar > .top1-planner-date-nav {
    width: 322px;
  }
}

.top1-app-shell[data-top1-section="planner"] .top1-planner-toolbar > .top1-planner-date-nav,
.top1-app-shell[data-top1-section="planner"] .top1-planner-toolbar > .top1-planner-zoom-controls,
.top1-app-shell[data-top1-section="planner"] .top1-planner-toolbar > .top1-ai-embedded-hints,
.top1-app-shell[data-top1-section="planner"] .top1-planner-toolbar > .top1-planner-actions {
  align-self: center;
}

.top1-app-shell[data-top1-section="planner"] .top1-planner-toolbar .top1-planner-icon-button {
  min-height: 34px;
  max-height: 34px;
}

.top1-app-shell[data-top1-section="planner"] .top1-planner-toolbar .top1-planner-zoom-controls .top1-planner-icon-button {
  min-height: 28px;
  max-height: 28px;
}

@media (max-width: 1180px) {
  .top1-app-shell[data-top1-section="planner"] .top1-planner-toolbar .top1-planner-date-nav .top1-planner-action-pill.is-plain {
    margin-left: 0;
  }
}

@media (min-width: 641px) and (max-width: 1180px) {
  .top1-app-shell[data-top1-section="planner"] .top1-planner-toolbar > .top1-ai-embedded-hints {
    grid-column: 1;
    grid-row: 2;
    justify-self: start;
    margin-left: 0;
  }

  .top1-app-shell[data-top1-section="planner"] .top1-planner-toolbar > .top1-planner-actions {
    grid-column: 1 / -1;
    grid-row: 3;
    width: min(100%, 492px);
  }
}

@media (max-width: 640px) {
  .top1-app-shell[data-top1-section="planner"] .top1-planner-toolbar > .top1-ai-embedded-hints {
    grid-column: 1 / -1;
    grid-row: 3;
    justify-self: start;
    margin-left: 0;
  }

  .top1-app-shell[data-top1-section="planner"] .top1-planner-toolbar > .top1-planner-actions {
    grid-column: 1 / -1;
    grid-row: 4;
  }
}

.top1-secondary-button:hover,
.top1-link-button:hover,
.top1-chip-button:hover,
.top1-planner-action-pill:hover,
.top1-planner-icon-button:hover,
.top1-planner-date-jump-button:hover {
  border-color: var(--top1-border-strong);
  background: #ffffff;
  box-shadow: 0 10px 22px rgba(15, 23, 42, 0.08);
  transform: translateY(-1px);
}

.top1-secondary-button.is-danger,
.top1-danger-button,
.top1-repair-remove-button {
  border-color: var(--top1-danger-border);
  background: linear-gradient(180deg, #fff8f8 0%, var(--top1-ui-danger-tint) 100%);
  color: var(--top1-danger);
}

.top1-app-button:disabled,
.top1-primary-button:disabled,
.top1-secondary-button:disabled,
.top1-diagnostics-action-button:disabled,
.top1-diagnostics-device-action-button:disabled {
  cursor: not-allowed;
  filter: grayscale(0.15);
  opacity: 0.62;
  transform: none;
  box-shadow: none;
}

/* Forms */
.top1-app-shell input:not([type="checkbox"]):not([type="radio"]):not([type="submit"]):not([type="button"]):not([type="reset"]),
.top1-app-shell textarea,
.top1-app-shell select,
.top1-client-form-field input,
.top1-client-form-field textarea,
.top1-client-form-field select,
.top1-planner-field input,
.top1-planner-field textarea,
.top1-planner-field select,
.top1-diagnostics-planner-form-row input,
.top1-diagnostics-planner-form-row textarea,
.top1-diagnostics-planner-form-row select,
.top1-diagnostics-device-note-form textarea {
  min-height: var(--top1-ui-control-height);
  border: 1px solid var(--top1-border);
  border-radius: var(--top1-ui-control-radius);
  background: #ffffff;
  color: var(--top1-text-strong);
  box-shadow: inset 0 1px 0 rgba(15, 23, 42, 0.02);
  transition: border-color 140ms ease, box-shadow 140ms ease, background-color 140ms ease;
}

.top1-app-shell textarea,
.top1-client-form-field textarea,
.top1-planner-field textarea {
  min-height: 92px;
  line-height: var(--top1-line-height-body);
}

.top1-app-shell input:focus,
.top1-app-shell textarea:focus,
.top1-app-shell select:focus,
.top1-client-form-field input:focus,
.top1-client-form-field textarea:focus,
.top1-client-form-field select:focus,
.top1-planner-field input:focus,
.top1-planner-field textarea:focus,
.top1-planner-field select:focus {
  border-color: rgba(227, 6, 19, 0.64);
  background: #ffffff;
  box-shadow: var(--top1-focus-ring), inset 0 1px 0 rgba(15, 23, 42, 0.02);
  outline: none;
}

.top1-client-form-grid,
.top1-order-line-form,
.top1-order-payment-form-grid,
.top1-parts-order-filter-grid,
.top1-finance-month-filter-grid,
.top1-finance-expense-form-grid,
.top1-diagnostics-planner-form-grid,
.top1-team-edit-grid,
.top1-repair-form-grid,
.top1-repair-mini-grid {
  gap: var(--top1-space-sm);
}

/* Notices and status */
.top1-inline-notice,
.top1-inline-note {
  border-radius: var(--top1-radius-xl);
  box-shadow: 0 10px 24px rgba(15, 23, 42, 0.06);
}

.top1-inline-notice:not(.is-success):not(.is-error):not(.is-warning),
.top1-inline-note:not(.is-success):not(.is-error):not(.is-warning),
.top1-inline-notice.is-info,
.top1-inline-note.is-info {
  border-color: var(--top1-info-border);
  background: linear-gradient(180deg, #f8fbff 0%, #ffffff 100%);
  color: #315178;
}

.top1-inline-notice.is-success,
.top1-inline-note.is-success {
  border-color: var(--top1-success-border);
  background: linear-gradient(180deg, var(--top1-ui-success-tint) 0%, #ffffff 100%);
  color: #166534;
}

.top1-inline-notice.is-warning,
.top1-inline-note.is-warning,
.top1-parts-prerequisite-note,
.top1-clients-prerequisite-note,
.top1-vehicles-prerequisite-note,
.top1-orders-prerequisite-note {
  border-color: var(--top1-warning-border);
  background: linear-gradient(180deg, var(--top1-ui-warning-tint) 0%, #ffffff 100%);
  color: #8a4a09;
}

.top1-inline-notice.is-error,
.top1-inline-note.is-error {
  border-color: var(--top1-danger-border);
  background: linear-gradient(180deg, var(--top1-ui-danger-tint) 0%, #ffffff 100%);
  color: #991b1b;
}

.top1-status-pill,
.top1-diagnostics-chip,
.top1-command-status-pill,
.top1-diagnostics-contact-pill,
.top1-diagnostics-severity,
.top1-repair-status,
.top1-finance-status,
.top1-clients-status,
.top1-parts-status,
.top1-app-nav-badge,
.top1-inline-badge {
  border-radius: var(--top1-radius-pill);
  letter-spacing: 0.01em;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.66);
}

/* Tables and list rows */
.top1-table-row,
.top1-finance-row,
.top1-data-management-row,
.top1-inspector-row,
.top1-diagnostics-entry-row,
.top1-diagnostics-alert-row,
.top1-diagnostics-vehicle-row,
.top1-diagnostics-device-history-row,
.top1-parts-attention-item,
.top1-repair-plan-card,
.top1-planner-post-row {
  border-radius: var(--top1-radius-lg);
  transition: border-color 140ms ease, box-shadow 140ms ease, transform 140ms ease, background-color 140ms ease;
}

.top1-table-row:not(.top1-table-row-head):hover,
.top1-finance-row:not(.top1-finance-row-head):hover,
.top1-data-management-row:hover,
.top1-inspector-row:hover,
.top1-diagnostics-entry-row:hover,
.top1-diagnostics-alert-row:hover,
.top1-diagnostics-vehicle-row:hover,
.top1-diagnostics-device-history-row:hover,
.top1-parts-attention-item:hover,
.top1-repair-plan-card:hover,
.top1-planner-post-row:hover {
  border-color: var(--top1-border-strong);
  box-shadow: 0 10px 22px rgba(15, 23, 42, 0.07);
}

.top1-table-row-head,
.top1-finance-row-head {
  color: var(--top1-muted-strong);
  background: var(--top1-surface-muted);
  border-color: var(--top1-border);
  font-size: var(--top1-font-size-sm);
  text-transform: none;
}

/* Summary cards */
.top1-clients-summary-grid,
.top1-parts-summary-grid,
.top1-finance-summary-grid,
.top1-diagnostics-summary-grid,
.top1-operational-kpis,
.top1-repair-kpi-strip {
  gap: var(--top1-space-sm);
}

.top1-clients-summary-value,
.top1-parts-summary-value,
.top1-finance-summary-value,
.top1-orders-status-value,
.top1-operational-kpi strong,
.top1-summary-value {
  color: var(--top1-text-strong);
  letter-spacing: -0.03em;
}

/* Diagnostics */
.top1-diagnostics-workspace,
.top1-diagnostics-main,
.top1-diagnostics-side,
.top1-diagnostics-priority-grid,
.top1-diagnostics-action-grid,
.top1-diagnostics-contact-grid,
.top1-diagnostics-live-overview,
.top1-diagnostics-parameter-grid,
.top1-diagnostics-planner-overview-grid,
.top1-diagnostics-visit-result-grid {
  gap: var(--top1-space-sm);
}

.top1-diagnostics-overview-card,
.top1-command-center-hero,
.top1-diagnostics-live-scan-card {
  overflow: hidden;
  border-radius: var(--top1-radius-2xl);
}

.top1-command-center-hero,
.top1-diagnostics-live-scan-card {
  background: radial-gradient(620px 220px at 10% 0%, rgba(227, 6, 19, 0.08), transparent 70%), linear-gradient(180deg, #ffffff 0%, #f8fbff 100%);
}

.top1-command-focus-card,
.top1-diagnostics-live-panel,
.top1-diagnostics-parameter-item,
.top1-diagnostics-priority-item,
.top1-diagnostics-state-day,
.top1-diagnostics-contact-history-item,
.top1-diagnostics-mobile-device,
.top1-diagnostics-report-body,
.top1-diagnostics-report-workflow,
.top1-diagnostics-visit-result-item {
  border: 1px solid var(--top1-ui-card-border);
  border-radius: var(--top1-radius-xl);
  background: rgba(255, 255, 255, 0.82);
  box-shadow: var(--top1-shadow);
}

.top1-diagnostics-live-score,
.top1-diagnostics-state-day-score {
  letter-spacing: -0.04em;
}

.top1-diagnostics-device-actions,
.top1-diagnostics-row-actions,
.top1-diagnostics-contact-actions,
.top1-diagnostics-report-actions,
.top1-diagnostics-visit-result-actions {
  gap: var(--top1-space-xs);
}

/* Planner */
.top1-planner-shell {
  gap: var(--top1-space-sm);
}

.top1-planner-toolbar,
.top1-planner-popover,
.top1-planner-filter-panel,
.top1-planner-quick-create,
.top1-planner-utilities-panel,
.top1-planner-inspector,
.top1-planner-card-context-menu,
.top1-planner-card-context-calendar,
.top1-planner-date-calendar {
  border-color: var(--top1-ui-card-border);
  border-radius: var(--top1-radius-xl);
  background: rgba(255, 255, 255, 0.96);
  box-shadow: var(--top1-ui-card-shadow);
}

.top1-planner-toolbar {
  backdrop-filter: blur(14px) saturate(1.08);
}

.top1-planner-board,
.top1-planner-work-area,
.top1-planner-left-stack,
.top1-planner-posts-column {
  min-width: 0;
}

.top1-planner-post-row,
.top1-planner-draggable-card,
.top1-planner-block,
.top1-planner-bay {
  border-color: var(--top1-ui-card-border);
  box-shadow: var(--top1-shadow);
}

.top1-planner-post-row.is-selected,
.top1-planner-draggable-card.is-selected {
  border-color: rgba(227, 6, 19, 0.46);
  box-shadow: 0 0 0 3px rgba(227, 6, 19, 0.08), var(--top1-ui-card-shadow-hover);
}

.top1-planner-date-pill,
.top1-planner-focus-pill,
.top1-planner-availability-badge {
  border-radius: var(--top1-radius-pill);
}

.top1-app-shell[data-top1-section="planner"] .top1-planner-post-row {
  border-bottom-color: rgba(51, 65, 85, 0.38);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.92),
    inset 0 -1px 0 rgba(51, 65, 85, 0.24),
    0 2px 0 rgba(148, 163, 184, 0.20);
}

.top1-app-shell[data-top1-section="planner"] .top1-planner-grid-row {
  --top1-lane-accent: #2563eb;
  background:
    linear-gradient(90deg, color-mix(in srgb, var(--top1-lane-accent) 14%, transparent) 0, rgba(255, 255, 255, 0) 210px),
    linear-gradient(180deg, #f6fbff 0%, #eaf2f9 100%);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.95),
    inset 0 -1px 0 rgba(30, 41, 59, 0.34),
    0 2px 0 rgba(148, 163, 184, 0.18);
  transition: background 140ms ease, box-shadow 140ms ease;
}

.top1-app-shell[data-top1-section="planner"] .top1-planner-grid-row:nth-child(3n + 1) {
  --top1-lane-accent: #2563eb;
}

.top1-app-shell[data-top1-section="planner"] .top1-planner-grid-row:nth-child(3n + 2) {
  --top1-lane-accent: #0f9f6e;
}

.top1-app-shell[data-top1-section="planner"] .top1-planner-grid-row:nth-child(3n + 3) {
  --top1-lane-accent: #7c3aed;
}

.top1-app-shell[data-top1-section="planner"] .top1-planner-grid-row:nth-child(even) {
  background:
    linear-gradient(90deg, color-mix(in srgb, var(--top1-lane-accent) 16%, transparent) 0, rgba(255, 255, 255, 0) 210px),
    linear-gradient(180deg, #edf5fb 0%, #dfeaf3 100%);
}

.top1-app-shell[data-top1-section="planner"] .top1-planner-grid-row-bg {
  background-image:
    linear-gradient(90deg, color-mix(in srgb, var(--top1-lane-accent) 42%, transparent) 0, color-mix(in srgb, var(--top1-lane-accent) 42%, transparent) 5px, transparent 5px, transparent 100%),
    linear-gradient(to right, rgba(71, 85, 105, 0.32) 1px, transparent 1px),
    linear-gradient(to right, rgba(100, 116, 139, 0.16) 1px, transparent 1px),
    linear-gradient(to bottom, rgba(255, 255, 255, 0.82) 0, transparent 12px, transparent calc(100% - 3px), rgba(30, 41, 59, 0.20) calc(100% - 3px), rgba(71, 85, 105, 0.40) calc(100% - 2px), rgba(255, 255, 255, 0.92) calc(100% - 1px)),
    linear-gradient(180deg, rgba(255, 255, 255, 0.34) 0%, rgba(255, 255, 255, 0) 45%);
  background-size:
    100% 100%,
    calc(100% / var(--top1-timeline-columns, 10)) 100%,
    calc(50% / var(--top1-timeline-columns, 10)) 100%,
    100% 100%,
    100% 100%;
}

.top1-app-shell[data-top1-section="planner"] .top1-planner-grid-row:hover .top1-planner-grid-row-bg {
  background-color: color-mix(in srgb, var(--top1-lane-accent) 7%, transparent);
}

/* Orders, repair plan and parts */
.top1-order-detail-flow,
.top1-repair-order-flow,
.top1-repair-plan-layout,
.top1-repair-columns,
.top1-parts-attention-list,
.top1-part-quote-suggestions {
  gap: var(--top1-space-sm);
}

.top1-order-detail-card,
.top1-order-work-block,
.top1-order-detail-panel,
.top1-order-state-panel,
.top1-order-notes-panel,
.top1-order-documents-panel,
.top1-repair-block,
.top1-repair-new-card,
.top1-repair-live-preview,
.top1-parts-order-work-card,
.top1-parts-selected-summary,
.top1-parts-form-surface,
.top1-part-quote-suggestion,
.top1-part-quote-proposal {
  border-color: var(--top1-ui-card-border);
  border-radius: var(--top1-radius-xl);
  background: rgba(255, 255, 255, 0.94);
  box-shadow: var(--top1-ui-card-shadow);
}

.top1-order-workflow-step,
.top1-focus-tile,
.top1-order-status-tile,
.top1-order-debt-tile,
.top1-repair-template-row,
.top1-repair-identity-card,
.top1-repair-note-panel {
  border-radius: var(--top1-radius-lg);
  border-color: var(--top1-ui-card-border);
}

.top1-order-line-title,
.top1-repair-line-badge,
.top1-order-status-accent,
.top1-parts-attention-main,
.top1-part-quote-suggestion-main {
  overflow-wrap: anywhere;
}

/* Finance and data-management */
.top1-finance-workspace,
.top1-clients-workspace,
.top1-data-management-summary,
.top1-data-management-list,
.top1-operational-grid {
  gap: var(--top1-space-sm);
}

.top1-finance-ledger,
.top1-finance-inspector,
.top1-data-edit-panel,
.top1-team-edit-panel,
.top1-data-management-card,
.top1-operational-card {
  border-color: var(--top1-ui-card-border);
  border-radius: var(--top1-radius-xl);
  background: rgba(255, 255, 255, 0.94);
  box-shadow: var(--top1-ui-card-shadow);
}

/* Overlay and picker surfaces */
.top1-dropdown,
.top1-popover,
.top1-menu,
.top1-modal,
.top1-dialog,
.top1-sheet,
.top1-unit-picker-sheet,
.top1-parts-selection-card,
.top1-order-add-work-form,
.top1-order-work-edit-popover-body {
  border-color: var(--top1-ui-card-border);
  border-radius: var(--top1-radius-xl);
  background: rgba(255, 255, 255, 0.98);
  box-shadow: var(--top1-shadow-floating);
  backdrop-filter: blur(18px) saturate(1.08);
}

.top1-unit-picker-backdrop {
  background: rgba(15, 23, 42, 0.34);
  backdrop-filter: blur(8px);
}

/* Empty states */
.top1-empty-state,
.top1-empty-state-compact,
.top1-planner-empty-state,
.top1-repair-empty-list,
.top1-parts-attention-empty-state,
.top1-table-placeholder {
  border-style: dashed;
  border-color: var(--top1-border-strong);
  background: radial-gradient(440px 160px at 50% 0%, rgba(227, 6, 19, 0.07), transparent 70%), var(--top1-surface-alt);
}

/* Client portal entry */
.top1-client-portal-entry,
.top1-client-portal-entry .top1-login-shell {
  background:
    radial-gradient(720px 280px at 18% 0%, rgba(227, 6, 19, 0.10), transparent 66%),
    linear-gradient(180deg, #0b1220 0%, #111827 100%);
}

.top1-client-portal-entry .top1-login-window,
.top1-client-portal-entry .top1-client-card,
.top1-client-portal-entry .top1-content-card {
  border-color: rgba(255, 255, 255, 0.12);
  border-radius: var(--top1-radius-2xl);
  background: rgba(255, 255, 255, 0.96);
  box-shadow: 0 26px 80px rgba(0, 0, 0, 0.24);
}

.top1-client-portal-entry .top1-app-button,
.top1-client-portal-entry .top1-primary-button {
  background: linear-gradient(180deg, #f43f46 0%, var(--top1-brand-red) 100%);
  border-color: rgba(227, 6, 19, 0.74);
}

/* Mobile */
@media (max-width: 900px) {
  .top1-app-content {
    padding-inline: 12px;
  }

  .top1-dashboard-board,
  .top1-clients-workspace,
  .top1-parts-workspace,
  .top1-finance-workspace,
  .top1-orders-workspace,
  .top1-diagnostics-workspace,
  .top1-repair-plan-layout {
    grid-template-columns: minmax(0, 1fr);
  }

  .top1-card-header,
  .top1-diagnostics-overview-head,
  .top1-diagnostics-live-scan-header,
  .top1-repair-detail-header,
  .top1-order-section-header,
  .top1-finance-mini-header {
    align-items: flex-start;
  }
}

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

  .top1-content-card,
  .top1-clients-card,
  .top1-summary-card,
  .top1-empty-state,
  .top1-parts-summary-card,
  .top1-finance-summary-card,
  .top1-orders-status-card {
    border-radius: var(--top1-radius-lg);
    padding: var(--top1-card-padding-md);
  }

  .top1-app-button,
  .top1-primary-button,
  .top1-secondary-button,
  .top1-link-button,
  .top1-chip-button,
  .top1-diagnostics-action-button,
  .top1-diagnostics-device-action-button,
  .top1-diagnostics-report-action-button,
  .top1-knowledge-action-button {
    white-space: normal;
  }

  .top1-card-header,
  .top1-diagnostics-overview-actions,
  .top1-order-header-actions,
  .top1-repair-header-actions,
  .top1-client-form-actions,
  .top1-order-line-form-actions,
  .top1-diagnostics-device-actions,
  .top1-diagnostics-row-actions,
  .top1-parts-attention-actions {
    flex-wrap: wrap;
  }

  .top1-card-header > *,
  .top1-diagnostics-overview-actions > *,
  .top1-order-header-actions > *,
  .top1-repair-header-actions > *,
  .top1-client-form-actions > *,
  .top1-order-line-form-actions > *,
  .top1-diagnostics-device-actions > *,
  .top1-diagnostics-row-actions > *,
  .top1-parts-attention-actions > * {
    min-width: 0;
  }
}


/* Iteration 06 brand aliases used by static style checks and new components. */
:root,
.top1-app-shell,
.top1-login-shell {
  --top1-brand-red: var(--top1-accent, #e30613);
  --top1-brand-red-hover: var(--top1-accent-hover, #c8000d);
  --top1-brand-red-soft: var(--top1-accent-soft, #fff1f2);
}

/* Iteration 06: client portal entry aligns with the app style stack. */
.top1-client-portal-entry .top1-login-window {
  max-width: min(760px, calc(100% - 24px));
}

.top1-client-portal-entry .top1-login-chip,
.top1-client-portal-entry .top1-inline-notice {
  border-radius: var(--top1-radius-pill, 999px);
}

.top1-client-portal-entry .top1-login-meta-item strong {
  color: var(--top1-text-strong, #0f172a);
}

/* Client portal entry guard: keeps activation/diagnostics portal readable with long data. */
.top1-client-portal-entry,
.top1-client-portal,
.top1-client-app,
.top1-client-card,
.top1-client-form-grid,
.top1-client-form-actions {
  min-width: 0;
  max-width: 100%;
}

.top1-client-portal-entry :where(h1, h2, h3, p, span, strong, small),
.top1-client-card :where(h1, h2, h3, p, span, strong, small) {
  overflow-wrap: anywhere;
}


@media not all {
/* S2 unified TOP-1 login style — based on the provided black/chrome/red automotive reference.
 * Scope: public auth/client entry surfaces only. Planner/order functionality is untouched.
 */
.top1-login-shell-entry {
  --top1-auth-card-width: min(520px, 100%);
  --top1-auth-hero-width: minmax(340px, 1fr);
  color-scheme: dark;
  display: grid;
  grid-template-columns: var(--top1-auth-hero-width) var(--top1-auth-card-width);
  align-items: center;
  justify-content: center;
  gap: clamp(28px, 5vw, 74px);
  padding: clamp(22px, 4vh, 46px) clamp(24px, 5vw, 72px);
  background:
    radial-gradient(900px 360px at 21% 0%, rgba(227, 6, 19, 0.18), transparent 64%),
    radial-gradient(780px 420px at 88% 13%, rgba(255, 48, 56, 0.10), transparent 66%),
    linear-gradient(125deg, rgba(255, 255, 255, 0.045), transparent 26%),
    linear-gradient(180deg, var(--top1-ref-black, #05080b) 0%, #07090c 52%, var(--top1-ref-void, #000000) 100%);
}

.top1-login-shell-entry::before {
  content: "TOP-1\A SERVICE\A\A СИСТЕМА СЕРВИСА И ДИАГНОСТИКА";
  position: relative;
  inset: auto;
  z-index: 1;
  display: block;
  min-height: min(680px, 72dvh);
  width: min(780px, 100%);
  padding: clamp(28px, 4vw, 54px);
  white-space: pre-line;
  color: var(--top1-ref-chrome, #e8ebf2);
  font-size: clamp(13px, 1.2vw, 18px);
  line-height: 1.48;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  background:
    radial-gradient(240px 150px at 62% 59%, rgba(227, 6, 19, 0.22), transparent 68%),
    radial-gradient(320px 190px at 44% 76%, rgba(255, 48, 56, 0.16), transparent 70%),
    linear-gradient(120deg, rgba(255, 255, 255, 0.07), transparent 28%),
    linear-gradient(180deg, rgba(255, 255, 255, 0.03), rgba(255, 255, 255, 0)),
    var(--top1-ref-carbon, #090d10);
  border: 1px solid var(--top1-ref-line-soft, rgba(216, 218, 220, 0.10));
  border-radius: var(--top1-ref-radius-card, 28px);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.06), var(--top1-ref-shadow-card, 0 36px 90px rgba(0, 0, 0, 0.50));
  transform: none;
  pointer-events: none;
}

.top1-login-shell-entry::after {
  content: "●  ДИАГНОСТИКА\A\A СОСТОЯНИЕ АВТОМОБИЛЯ\A\A ДВИГАТЕЛЬ        Норма\A АКПП             Норма\A ЭЛЕКТРОНИКА      Норма\A ТОРМОЗНАЯ СИСТЕМА Норма";
  position: absolute;
  inset: auto auto 22% 42%;
  z-index: 2;
  width: min(280px, 26vw);
  min-height: 300px;
  padding: 22px;
  white-space: pre-line;
  color: var(--top1-ref-silver, #b8bec8);
  font-size: 11px;
  line-height: 1.75;
  letter-spacing: 0.055em;
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.045), rgba(255, 255, 255, 0.01)),
    rgba(8, 12, 16, 0.78);
  border: 1px solid var(--top1-ref-line-soft, rgba(216, 218, 220, 0.10));
  border-radius: 18px;
  box-shadow: 0 22px 56px rgba(0, 0, 0, 0.42), inset 0 1px 0 rgba(255, 255, 255, 0.06);
  transform: none;
  pointer-events: none;
}

.top1-login-window-entry {
  grid-column: 2;
  width: var(--top1-auth-card-width);
  max-width: 100%;
  padding: clamp(26px, 4vw, 48px);
  border-color: rgba(216, 218, 220, 0.26);
  border-radius: var(--top1-ref-radius-card, 28px);
  background:
    radial-gradient(440px 220px at 52% 0%, rgba(255, 255, 255, 0.10), transparent 74%),
    linear-gradient(180deg, rgba(31, 35, 39, 0.90), rgba(8, 12, 16, 0.88));
  box-shadow: 0 0 0 1px rgba(227, 6, 19, 0.10), var(--top1-ref-shadow-card, 0 36px 90px rgba(0, 0, 0, 0.50));
  backdrop-filter: blur(24px) saturate(1.12);
}

.top1-login-window-entry .top1-login-kicker,
.top1-login-window-entry .top1-login-brand-row,
.top1-login-window-entry .top1-login-note,
.top1-login-window-entry .top1-login-meta,
.top1-login-window-entry .top1-login-inline-note,
.top1-login-window-entry .top1-login-footer {
  display: block;
}

.top1-login-window-entry .top1-login-brand-row,
.top1-login-window-entry .top1-login-meta {
  display: grid;
  gap: 10px;
}

.top1-login-window-entry .top1-login-brand-row {
  justify-items: center;
  text-align: center;
}

.top1-login-window-entry .top1-login-kicker {
  margin-bottom: 8px;
  color: var(--top1-ref-chrome, #e8ebf2);
  font-size: clamp(26px, 3.8vw, 48px);
  line-height: 1;
  letter-spacing: 0.075em;
  text-align: center;
  text-shadow: 0 8px 26px rgba(0, 0, 0, 0.44);
}

.top1-login-window-entry .top1-login-brand {
  color: var(--top1-ref-silver, #b8bec8);
  font-size: 16px;
  letter-spacing: 0.035em;
}

.top1-login-window-entry .top1-login-chip {
  border-color: rgba(227, 6, 19, 0.42);
  background: rgba(83, 23, 24, 0.40);
  color: var(--top1-ref-chrome, #e8ebf2);
}

.top1-login-window-entry .top1-login-title {
  margin: clamp(22px, 3vh, 34px) 0 8px;
  color: #ffffff;
  font-family: var(--top1-font, Inter, -apple-system, BlinkMacSystemFont, "Segoe UI", Arial, sans-serif);
  font-size: clamp(28px, 3vw, 42px);
  font-weight: 800;
  line-height: 1.08;
  letter-spacing: -0.035em;
  text-align: center;
}

.top1-login-window-entry .top1-login-title::before,
.top1-login-window-entry .top1-login-title::after,
.top1-login-window-entry .top1-login-body::before {
  content: none;
}

.top1-login-window-entry .top1-login-note,
.top1-login-window-entry .top1-login-help,
.top1-login-window-entry .top1-login-inline-note {
  color: var(--top1-ref-silver, #b8bec8);
  text-align: center;
}

.top1-login-window-entry .top1-login-meta {
  grid-template-columns: repeat(2, minmax(0, 1fr));
  margin: 18px 0 20px;
}

.top1-login-window-entry .top1-login-meta-item,
.top1-login-window-entry .top1-login-form-wrap {
  border-color: var(--top1-ref-line-soft, rgba(216, 218, 220, 0.10));
  background: rgba(8, 12, 16, 0.48);
}

.top1-login-window-entry .top1-login-meta-label {
  color: var(--top1-ref-muted, #858a92);
}

.top1-login-window-entry .top1-login-meta-item strong,
.top1-login-window-entry .top1-login-form-wrap label {
  color: var(--top1-ref-chrome, #e8ebf2);
}

.top1-login-window-entry .top1-login-form-wrap input[type="text"],
.top1-login-window-entry .top1-login-form-wrap input[type="email"],
.top1-login-window-entry .top1-login-form-wrap input[type="password"] {
  min-height: 56px;
  border-color: rgba(216, 218, 220, 0.24);
  border-radius: var(--top1-ref-radius-control, 13px);
  background: rgba(255, 255, 255, 0.055);
  color: #ffffff;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.05);
}

.top1-login-window-entry .top1-login-form-wrap input[type="text"]::placeholder,
.top1-login-window-entry .top1-login-form-wrap input[type="email"]::placeholder,
.top1-login-window-entry .top1-login-form-wrap input[type="password"]::placeholder {
  color: rgba(232, 235, 242, 0.46);
}

.top1-login-window-entry .top1-login-form-wrap input[type="text"]:focus,
.top1-login-window-entry .top1-login-form-wrap input[type="email"]:focus,
.top1-login-window-entry .top1-login-form-wrap input[type="password"]:focus {
  border-color: var(--top1-ref-red-hot, #ff3038);
  box-shadow: var(--top1-ref-red-glow, 0 0 28px rgba(227, 6, 19, 0.36));
}

.top1-login-window-entry .top1-login-form-wrap .login-remember,
.top1-login-window-entry .top1-login-form-wrap .login-remember label {
  color: var(--top1-ref-silver, #b8bec8);
}

.top1-login-window-entry .top1-login-form-wrap .login-remember input[type="checkbox"] {
  accent-color: var(--top1-ref-red, #e30613);
}

.top1-login-window-entry .top1-login-form-wrap input[type="submit"] {
  min-height: 58px;
  border-color: rgba(255, 48, 56, 0.52);
  border-radius: var(--top1-ref-radius-control, 13px);
  background: linear-gradient(180deg, var(--top1-ref-red-hot, #ff3038), var(--top1-ref-red, #e30613) 48%, #9d030a 100%);
  color: #ffffff;
  font-size: 17px;
  font-weight: 800;
  box-shadow: 0 18px 38px rgba(227, 6, 19, 0.28), inset 0 1px 0 rgba(255, 255, 255, 0.22);
}

.top1-login-window-entry .top1-login-form-wrap input[type="submit"]:hover {
  background: linear-gradient(180deg, #ff454c, var(--top1-ref-red, #e30613) 52%, #8f0308 100%);
}

@media (max-width: 1040px) {
  .top1-login-shell-entry {
    grid-template-columns: minmax(0, 1fr);
    overflow-y: auto;
  }

  .top1-login-shell-entry::before,
  .top1-login-shell-entry::after {
    display: none;
  }

  .top1-login-window-entry {
    grid-column: 1;
  }
}
}

/* === TOP1 Planner World-Class UI 2026-07-14 (visual-only) === */
.top1-app-shell[data-top1-section="planner"] .top1-planner-shell {
  --top1-planner-ui-surface: #ffffff;
  --top1-planner-ui-surface-soft: #f7f9fc;
  --top1-planner-ui-surface-muted: #eef3f8;
  --top1-planner-ui-border: rgba(100, 116, 139, 0.22);
  --top1-planner-ui-border-strong: rgba(71, 85, 105, 0.34);
  --top1-planner-ui-text: #111827;
  --top1-planner-ui-muted: #607086;
  --top1-planner-ui-blue: #2563eb;
  --top1-planner-ui-blue-soft: rgba(37, 99, 235, 0.09);
  --top1-planner-ui-red: #e30613;
  --top1-planner-ui-radius: 14px;
  --top1-planner-ui-radius-lg: 18px;
  --top1-planner-ui-shadow: 0 10px 28px rgba(15, 23, 42, 0.08);
  --top1-planner-ui-shadow-float: 0 26px 68px rgba(15, 23, 42, 0.19), 0 8px 22px rgba(15, 23, 42, 0.08);
  color: var(--top1-planner-ui-text);
}

.top1-app-shell[data-top1-section="planner"] .top1-app-content {
  background:
    radial-gradient(760px 260px at 50% -120px, rgba(37, 99, 235, 0.07), transparent 72%),
    linear-gradient(180deg, #f5f8fc 0%, #edf3f8 100%);
}

.top1-app-shell[data-top1-section="planner"] .top1-planner-toolbar {
  border: 1px solid var(--top1-planner-ui-border);
  border-radius: var(--top1-planner-ui-radius);
  background: rgba(255, 255, 255, 0.96);
  box-shadow: 0 4px 18px rgba(15, 23, 42, 0.07), inset 0 1px 0 #ffffff;
  backdrop-filter: blur(18px) saturate(1.08);
}

.top1-app-shell[data-top1-section="planner"] .top1-planner-date-nav,
.top1-app-shell[data-top1-section="planner"] .top1-planner-zoom-controls,
.top1-app-shell[data-top1-section="planner"] .top1-planner-history-controls {
  border-color: rgba(100, 116, 139, 0.18);
  background: var(--top1-planner-ui-surface-soft);
  box-shadow: inset 0 1px 0 #ffffff;
}

.top1-app-shell[data-top1-section="planner"] .top1-planner-toolbar :is(.top1-planner-action-pill, .top1-planner-icon-button, .top1-planner-date-jump-button) {
  border-color: rgba(100, 116, 139, 0.22);
  background: #ffffff;
  color: #263449;
  box-shadow: 0 2px 7px rgba(15, 23, 42, 0.05);
}

.top1-app-shell[data-top1-section="planner"] .top1-planner-toolbar :is(.top1-planner-action-pill, .top1-planner-icon-button, .top1-planner-date-jump-button):hover,
.top1-app-shell[data-top1-section="planner"] .top1-planner-toolbar :is(.top1-planner-action-pill, .top1-planner-icon-button, .top1-planner-date-jump-button):focus-visible {
  border-color: rgba(37, 99, 235, 0.34);
  background: #f8fbff;
  color: #1d4ed8;
  outline: none;
  box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.10), 0 6px 16px rgba(15, 23, 42, 0.07);
  transform: translateY(-1px);
}

.top1-app-shell[data-top1-section="planner"] .top1-planner-toolbar .top1-planner-new-button {
  border-color: rgba(185, 5, 16, 0.82);
  border-radius: 11px;
  background: linear-gradient(180deg, #f42632 0%, var(--top1-planner-ui-red) 58%, #be0711 100%);
  color: #ffffff;
  box-shadow: 0 8px 18px rgba(227, 6, 19, 0.22), inset 0 1px 0 rgba(255, 255, 255, 0.26);
}

.top1-app-shell[data-top1-section="planner"] .top1-planner-toolbar .top1-planner-new-button:hover,
.top1-app-shell[data-top1-section="planner"] .top1-planner-toolbar .top1-planner-new-button:focus-visible {
  border-color: #9f0710;
  background: linear-gradient(180deg, #ff3540 0%, #d80613 62%, #aa050d 100%);
  color: #ffffff;
  outline: none;
  box-shadow: 0 0 0 3px rgba(227, 6, 19, 0.12), 0 12px 24px rgba(227, 6, 19, 0.25);
  transform: translateY(-1px);
}

.top1-app-shell[data-top1-section="planner"] .top1-planner-kpi-grid {
  gap: 7px;
}

.top1-app-shell[data-top1-section="planner"] .top1-planner-kpi-card {
  border: 1px solid color-mix(in srgb, rgb(var(--top1-kpi-rgb)) 24%, #d7e0ea);
  border-radius: 13px;
  background:
    linear-gradient(90deg, rgba(var(--top1-kpi-rgb), 0.075) 0%, transparent 54%),
    #ffffff;
  box-shadow: 0 3px 11px rgba(15, 23, 42, 0.055), inset 0 1px 0 #ffffff;
  transition: border-color 150ms ease, box-shadow 150ms ease, transform 150ms ease;
}

.top1-app-shell[data-top1-section="planner"] .top1-planner-kpi-card::before {
  height: 2px;
  opacity: 0.72;
}

.top1-app-shell[data-top1-section="planner"] .top1-planner-kpi-card:hover {
  border-color: rgba(var(--top1-kpi-rgb), 0.38);
  box-shadow: 0 7px 18px rgba(15, 23, 42, 0.075), inset 0 1px 0 #ffffff;
  transform: translateY(-1px);
}

.top1-app-shell[data-top1-section="planner"] .top1-planner-kpi-icon {
  border: 1px solid rgba(var(--top1-kpi-rgb), 0.18);
  background: rgba(var(--top1-kpi-rgb), 0.075);
  box-shadow: none;
}

.top1-app-shell[data-top1-section="planner"] .top1-planner-kpi-label {
  color: #263449;
  font-weight: 820;
}

.top1-app-shell[data-top1-section="planner"] .top1-planner-kpi-value {
  color: #0f172a;
  font-variant-numeric: tabular-nums;
}

.top1-app-shell[data-top1-section="planner"] .top1-planner-kpi-note {
  color: var(--top1-planner-ui-muted);
}

.top1-app-shell[data-top1-section="planner"] .top1-planner-board {
  overflow: hidden;
  border: 1px solid var(--top1-planner-ui-border-strong);
  border-radius: var(--top1-planner-ui-radius-lg);
  background: #f7f9fc;
  box-shadow: var(--top1-planner-ui-shadow), inset 0 1px 0 #ffffff;
}

.top1-app-shell[data-top1-section="planner"] .top1-planner-posts-column {
  border-right-color: rgba(71, 85, 105, 0.30);
  background: #f7f9fc;
  box-shadow: 5px 0 16px rgba(15, 23, 42, 0.055);
}

.top1-app-shell[data-top1-section="planner"] :is(.top1-planner-posts-header, .top1-planner-time-header) {
  border-bottom-color: rgba(71, 85, 105, 0.26);
  background: linear-gradient(180deg, #ffffff 0%, #f1f5f9 100%);
  color: #1f2d40;
  box-shadow: inset 0 -1px 0 rgba(100, 116, 139, 0.10);
}

.top1-app-shell[data-top1-section="planner"] .top1-planner-time-tick {
  border-color: rgba(100, 116, 139, 0.24);
  background: #ffffff;
  color: #263449;
  box-shadow: 0 2px 6px rgba(15, 23, 42, 0.055);
  font-variant-numeric: tabular-nums;
}

.top1-app-shell[data-top1-section="planner"] .top1-planner-post-row {
  border-bottom-color: rgba(100, 116, 139, 0.24);
  background:
    linear-gradient(90deg, color-mix(in srgb, var(--top1-post-accent) 14%, transparent) 0 4px, transparent 4px),
    #f7f9fc;
  box-shadow: inset 0 -1px 0 rgba(255, 255, 255, 0.86);
}

.top1-app-shell[data-top1-section="planner"] .top1-planner-post-row:nth-child(even) {
  background:
    linear-gradient(90deg, color-mix(in srgb, var(--top1-post-accent) 14%, transparent) 0 4px, transparent 4px),
    #f2f6fa;
}

.top1-app-shell[data-top1-section="planner"] .top1-planner-post-main {
  border-color: color-mix(in srgb, var(--top1-post-accent) 22%, #cbd5e1);
  border-radius: 12px;
  background: #ffffff;
  box-shadow: 0 3px 10px rgba(15, 23, 42, 0.055), inset 3px 0 0 color-mix(in srgb, var(--top1-post-accent) 72%, transparent);
}

.top1-app-shell[data-top1-section="planner"] .top1-planner-post-title {
  color: #162033;
  letter-spacing: -0.012em;
}

.top1-app-shell[data-top1-section="planner"] .top1-planner-post-meta,
.top1-app-shell[data-top1-section="planner"] .top1-planner-post-master-copy {
  color: var(--top1-planner-ui-muted);
}

.top1-app-shell[data-top1-section="planner"] .top1-planner-post-load {
  background: #e2e8f0;
  box-shadow: inset 0 0 0 1px rgba(100, 116, 139, 0.10);
}

.top1-app-shell[data-top1-section="planner"] .top1-planner-timeline {
  background: #f7f9fc;
}

.top1-app-shell[data-top1-section="planner"] .top1-planner-grid-row,
.top1-app-shell[data-top1-section="planner"] .top1-planner-grid-row:nth-child(even) {
  background: #f9fbfd;
  box-shadow: inset 0 -1px 0 rgba(100, 116, 139, 0.24);
}

.top1-app-shell[data-top1-section="planner"] .top1-planner-grid-row:nth-child(even) {
  background: #f4f7fa;
}

.top1-app-shell[data-top1-section="planner"] .top1-planner-grid-row-bg {
  background-image:
    linear-gradient(90deg, color-mix(in srgb, var(--top1-lane-accent) 24%, transparent) 0 3px, transparent 3px),
    linear-gradient(to right, rgba(71, 85, 105, 0.24) 1px, transparent 1px),
    linear-gradient(to right, rgba(100, 116, 139, 0.11) 1px, transparent 1px);
  background-size:
    100% 100%,
    calc(100% / var(--top1-timeline-columns, 10)) 100%,
    calc(50% / var(--top1-timeline-columns, 10)) 100%;
}

.top1-app-shell[data-top1-section="planner"] .top1-planner-grid-row:hover .top1-planner-grid-row-bg {
  background-color: rgba(37, 99, 235, 0.035);
}

.top1-app-shell[data-top1-section="planner"] .top1-planner-now-line {
  filter: drop-shadow(0 0 4px rgba(227, 6, 19, 0.20));
}

.top1-app-shell[data-top1-section="planner"] .top1-planner-queue {
  border: 1px solid var(--top1-planner-ui-border-strong);
  border-top: 2px solid rgba(37, 99, 235, 0.72);
  border-radius: var(--top1-planner-ui-radius-lg);
  background: #ffffff;
  box-shadow: var(--top1-planner-ui-shadow), inset 0 1px 0 #ffffff;
}

.top1-app-shell[data-top1-section="planner"] .top1-planner-queue-head {
  border-bottom-color: rgba(100, 116, 139, 0.16);
}

.top1-app-shell[data-top1-section="planner"] .top1-planner-queue-head h2 {
  color: #111827;
  font-weight: 870;
  letter-spacing: -0.018em;
}

.top1-app-shell[data-top1-section="planner"] .top1-planner-queue-meta {
  color: #2563eb;
  font-weight: 760;
}

.top1-app-shell[data-top1-section="planner"] .top1-planner-queue-cards {
  gap: 10px;
  scrollbar-color: #a7b4c4 transparent;
}

.top1-app-shell[data-top1-section="planner"] .top1-planner-queue-card.top1-planner-job.schedule-client-card {
  border: 1px solid color-mix(in srgb, var(--top1-queue-accent) 24%, #d4dde8) !important;
  border-radius: 13px !important;
  background:
    linear-gradient(100deg, color-mix(in srgb, var(--top1-queue-accent) 7%, transparent) 0%, transparent 48%),
    #ffffff !important;
  box-shadow: 0 4px 12px rgba(15, 23, 42, 0.07), inset 0 1px 0 #ffffff !important;
}

.top1-app-shell[data-top1-section="planner"] .top1-planner-queue-card.top1-planner-job.schedule-client-card:hover,
.top1-app-shell[data-top1-section="planner"] .top1-planner-queue-card.top1-planner-job.schedule-client-card:focus-visible {
  border-color: color-mix(in srgb, var(--top1-queue-accent) 46%, #b9c6d5) !important;
  background:
    linear-gradient(100deg, color-mix(in srgb, var(--top1-queue-accent) 11%, transparent) 0%, transparent 50%),
    #ffffff !important;
  outline: none;
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--top1-queue-accent) 11%, transparent), 0 9px 20px rgba(15, 23, 42, 0.10) !important;
  transform: translateY(-2px);
}

.top1-app-shell[data-top1-section="planner"] .top1-planner-queue-card.top1-planner-job.schedule-client-card.is-selected {
  border-color: color-mix(in srgb, var(--top1-queue-accent) 56%, #94a3b8) !important;
  outline: none;
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--top1-queue-accent) 13%, transparent), 0 9px 20px rgba(15, 23, 42, 0.10) !important;
}

.top1-app-shell[data-top1-section="planner"] .top1-planner-queue-card .schedule-client-card__accent {
  left: 6px;
  top: 8px;
  bottom: 8px;
  width: 4px;
  border-radius: 999px;
  box-shadow: none;
}

.top1-app-shell[data-top1-section="planner"] .top1-planner-queue-card .schedule-client-card__time {
  color: #66758a;
  font-weight: 760;
}

.top1-app-shell[data-top1-section="planner"] .top1-planner-queue-card .schedule-client-card__workflow {
  border-color: rgba(100, 116, 139, 0.16);
  box-shadow: none;
}

.top1-app-shell[data-top1-section="planner"] .top1-planner-queue-card .schedule-client-card__name {
  color: #111827;
  font-weight: 870;
  letter-spacing: -0.012em;
}

.top1-app-shell[data-top1-section="planner"] .top1-planner-queue-card .schedule-client-card__vehicle-model {
  color: #64748b !important;
  font-weight: 720 !important;
}

.top1-app-shell[data-top1-section="planner"] .top1-planner-queue-card .schedule-client-card__order-total {
  color: #64748b;
}

.top1-app-shell[data-top1-section="planner"] .top1-planner-queue-card .schedule-client-card__order-total strong {
  color: #1f2d40;
  font-variant-numeric: tabular-nums;
}

.top1-app-shell[data-top1-section="planner"] :is(.top1-planner-diagnostics-link, .top1-planner-reason-trigger) {
  border-radius: 9px;
  box-shadow: 0 3px 9px rgba(15, 23, 42, 0.08), inset 0 1px 0 rgba(255, 255, 255, 0.92);
}

.top1-app-shell[data-top1-section="planner"] .top1-planner-reason-trigger {
  border-color: rgba(37, 99, 235, 0.24);
  background: #f5f9ff;
  color: #2563eb;
}

.top1-app-shell[data-top1-section="planner"] .top1-planner-queue-empty {
  border-color: var(--top1-planner-ui-border);
  border-radius: 13px;
  background: var(--top1-planner-ui-surface-soft);
  color: var(--top1-planner-ui-muted);
  box-shadow: none;
}

.top1-app-shell[data-top1-section="planner"] :is(
  .top1-planner-popover,
  .top1-planner-filter-panel,
  .top1-planner-quick-create,
  .top1-planner-utilities-panel,
  .top1-planner-notification-panel,
  .top1-planner-client-app-panel,
  .top1-planner-inspector,
  .top1-planner-card-context-menu,
  .top1-planner-card-context-calendar,
  .top1-planner-date-calendar,
  [data-top1-planner-preliminary-intake-popover]
) {
  overflow: hidden;
  border: 1px solid var(--top1-planner-ui-border-strong);
  border-radius: var(--top1-planner-ui-radius-lg);
  background: rgba(255, 255, 255, 0.985);
  box-shadow: var(--top1-planner-ui-shadow-float), inset 0 1px 0 #ffffff;
  backdrop-filter: blur(22px) saturate(1.06);
}

.top1-app-shell[data-top1-section="planner"] :is(.top1-planner-filter-panel, .top1-planner-utilities-panel)::before {
  height: 3px;
  background: linear-gradient(90deg, #2563eb 0%, #14b8a6 100%);
  opacity: 0.82;
}

.top1-app-shell[data-top1-section="planner"] :is(
  .top1-planner-popover,
  .top1-planner-filter-panel,
  .top1-planner-quick-create,
  .top1-planner-utilities-panel,
  .top1-planner-notification-panel,
  .top1-planner-client-app-panel,
  .top1-planner-inspector,
  .top1-planner-card-context-menu
) .top1-planner-popover-head,
.top1-app-shell[data-top1-section="planner"] .top1-planner-card-context-head,
.top1-app-shell[data-top1-section="planner"] .top1-planner-card-status-head {
  border-bottom: 1px solid rgba(100, 116, 139, 0.17);
  background: linear-gradient(180deg, #ffffff 0%, #f5f8fc 100%);
}

.top1-app-shell[data-top1-section="planner"] .top1-planner-popover-head h2,
.top1-app-shell[data-top1-section="planner"] .top1-planner-card-context-head strong {
  color: #111827;
  font-weight: 880;
  letter-spacing: -0.022em;
}

.top1-app-shell[data-top1-section="planner"] .top1-planner-popover-head p,
.top1-app-shell[data-top1-section="planner"] .top1-planner-card-context-head small,
.top1-app-shell[data-top1-section="planner"] .top1-planner-form-meta {
  color: #66758a;
  line-height: 1.42;
}

.top1-app-shell[data-top1-section="planner"] :is(
  .top1-planner-filter-form,
  .top1-planner-quick-create-form,
  .top1-planner-notification-form,
  .top1-planner-block-form,
  .top1-planner-card-context-form,
  .top1-planner-quick-intake-form
) {
  background: #ffffff;
}

.top1-app-shell[data-top1-section="planner"] .top1-planner-field,
.top1-app-shell[data-top1-section="planner"] .top1-planner-shift-card,
.top1-app-shell[data-top1-section="planner"] .top1-planner-utility-card,
.top1-app-shell[data-top1-section="planner"] .top1-planner-quick-options,
.top1-app-shell[data-top1-section="planner"] .top1-planner-intake-selected,
.top1-app-shell[data-top1-section="planner"] .top1-planner-intake-results,
.top1-app-shell[data-top1-section="planner"] .top1-planner-notification-confirm,
.top1-app-shell[data-top1-section="planner"] .top1-planner-card-context-blocker,
.top1-app-shell[data-top1-section="planner"] .top1-planner-card-context-free-slots {
  border-color: rgba(100, 116, 139, 0.20);
  border-radius: 13px;
  background: var(--top1-planner-ui-surface-soft);
  box-shadow: none;
}

.top1-app-shell[data-top1-section="planner"] .top1-planner-field label,
.top1-app-shell[data-top1-section="planner"] .top1-planner-field > span,
.top1-app-shell[data-top1-section="planner"] .top1-planner-field-label-with-counter {
  color: #334155;
  font-weight: 790;
}

.top1-app-shell[data-top1-section="planner"] .top1-planner-field :is(input, select, textarea),
.top1-app-shell[data-top1-section="planner"] .top1-planner-card-context-form :is(input, select, textarea),
.top1-app-shell[data-top1-section="planner"] .top1-planner-notification-form :is(input, select, textarea) {
  border-color: rgba(100, 116, 139, 0.28);
  border-radius: 11px;
  background: #ffffff;
  color: #111827;
  box-shadow: inset 0 1px 2px rgba(15, 23, 42, 0.025);
}

.top1-app-shell[data-top1-section="planner"] .top1-planner-field :is(input, select, textarea):focus,
.top1-app-shell[data-top1-section="planner"] .top1-planner-card-context-form :is(input, select, textarea):focus,
.top1-app-shell[data-top1-section="planner"] .top1-planner-notification-form :is(input, select, textarea):focus {
  border-color: rgba(37, 99, 235, 0.66);
  outline: none;
  box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.11), inset 0 1px 2px rgba(15, 23, 42, 0.025);
}

.top1-app-shell[data-top1-section="planner"] .top1-planner-placement-option,
.top1-app-shell[data-top1-section="planner"] .top1-planner-utility-card,
.top1-app-shell[data-top1-section="planner"] .top1-planner-filter-result,
.top1-app-shell[data-top1-section="planner"] .top1-planner-card-context-free-slot {
  border-color: rgba(100, 116, 139, 0.20);
  border-radius: 12px;
  background: #ffffff;
  box-shadow: 0 2px 7px rgba(15, 23, 42, 0.045);
  transition: border-color 140ms ease, background-color 140ms ease, box-shadow 140ms ease, transform 140ms ease;
}

.top1-app-shell[data-top1-section="planner"] :is(.top1-planner-placement-option, .top1-planner-utility-card, .top1-planner-filter-result, .top1-planner-card-context-free-slot):hover,
.top1-app-shell[data-top1-section="planner"] :is(.top1-planner-placement-option, .top1-planner-utility-card, .top1-planner-filter-result, .top1-planner-card-context-free-slot):focus-visible,
.top1-app-shell[data-top1-section="planner"] .top1-planner-placement-option.is-active {
  border-color: rgba(37, 99, 235, 0.38);
  background: #f6f9ff;
  outline: none;
  box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.08), 0 7px 17px rgba(15, 23, 42, 0.07);
  transform: translateY(-1px);
}

.top1-app-shell[data-top1-section="planner"] .top1-planner-date-calendar,
.top1-app-shell[data-top1-section="planner"] .top1-planner-card-context-calendar {
  padding: 10px;
}

.top1-app-shell[data-top1-section="planner"] .top1-planner-card-context-calendar-head {
  border-bottom-color: rgba(100, 116, 139, 0.16);
}

.top1-app-shell[data-top1-section="planner"] .top1-planner-card-context-calendar-button {
  border-radius: 9px;
  color: #334155;
}

.top1-app-shell[data-top1-section="planner"] .top1-planner-card-context-calendar-button:hover,
.top1-app-shell[data-top1-section="planner"] .top1-planner-card-context-calendar-button:focus-visible {
  background: #eef4ff;
  color: #1d4ed8;
  outline: none;
}

.top1-app-shell[data-top1-section="planner"] .top1-planner-card-context-calendar-button.is-selected,
.top1-app-shell[data-top1-section="planner"] .top1-planner-card-context-calendar-button[aria-current="date"] {
  background: #2563eb;
  color: #ffffff;
  box-shadow: 0 5px 12px rgba(37, 99, 235, 0.22);
}

.top1-app-shell[data-top1-section="planner"] :is(.top1-planner-form-actions, .top1-planner-filter-actions, .top1-planner-notification-actions, .top1-planner-card-context-actions) {
  border-top-color: rgba(100, 116, 139, 0.16);
  background: #f8fafc;
}

.top1-planner-reason-tooltip {
  width: min(380px, calc(100dvw - 24px));
  padding: 9px;
  border: 1px solid rgba(71, 85, 105, 0.30);
  border-radius: 18px;
  background: rgba(255, 255, 255, 0.99);
  box-shadow: 0 28px 72px rgba(15, 23, 42, 0.20), 0 8px 22px rgba(15, 23, 42, 0.09);
  backdrop-filter: blur(22px) saturate(1.06);
}

.top1-planner-reason-tooltip__head {
  border-color: rgba(100, 116, 139, 0.17);
  border-radius: 13px;
  background: linear-gradient(180deg, #ffffff 0%, #f3f7fc 100%);
  box-shadow: inset 3px 0 0 rgba(37, 99, 235, 0.72);
}

.top1-planner-reason-tooltip__icon,
.top1-planner-reason-tooltip__edit-toggle {
  border-color: rgba(37, 99, 235, 0.20);
  background: #ffffff;
  box-shadow: 0 3px 9px rgba(15, 23, 42, 0.06);
}

.top1-planner-reason-tooltip__section {
  border-color: rgba(100, 116, 139, 0.17);
  border-radius: 13px;
  background: #ffffff;
  box-shadow: none;
}

.top1-planner-reason-tooltip__section.is-primary {
  border-color: rgba(37, 99, 235, 0.20);
  background: #f8fbff;
}

.top1-planner-reason-tooltip__contact {
  border-color: rgba(16, 185, 129, 0.22);
  background: #f4fdf8;
  box-shadow: none;
}

@media (max-width: 900px) {
  .top1-app-shell[data-top1-section="planner"] .top1-planner-toolbar,
  .top1-app-shell[data-top1-section="planner"] .top1-planner-board,
  .top1-app-shell[data-top1-section="planner"] .top1-planner-queue {
    border-radius: 14px;
  }

  .top1-app-shell[data-top1-section="planner"] :is(
    .top1-planner-popover,
    .top1-planner-filter-panel,
    .top1-planner-quick-create,
    .top1-planner-utilities-panel,
    .top1-planner-notification-panel,
    .top1-planner-client-app-panel,
    .top1-planner-inspector,
    .top1-planner-card-context-menu
  ) {
    border-radius: 16px 16px 0 0;
  }
}

@media (prefers-reduced-motion: reduce) {
  .top1-app-shell[data-top1-section="planner"] :is(
    .top1-planner-action-pill,
    .top1-planner-icon-button,
    .top1-planner-date-jump-button,
    .top1-planner-new-button,
    .top1-planner-kpi-card,
    .top1-planner-queue-card,
    .top1-planner-placement-option,
    .top1-planner-utility-card,
    .top1-planner-filter-result
  ),
  .top1-planner-reason-tooltip {
    scroll-behavior: auto;
    transition: none;
  }
}

/* === TOP1 Orders & Work Orders World-Class UI 2026-07-14 (visual-only) === */
.top1-app-shell[data-top1-section="orders"] {
  --top1-orders-ui-surface: #ffffff;
  --top1-orders-ui-surface-soft: #f7f9fc;
  --top1-orders-ui-surface-muted: #eef3f8;
  --top1-orders-ui-border: rgba(100, 116, 139, 0.22);
  --top1-orders-ui-border-strong: rgba(71, 85, 105, 0.34);
  --top1-orders-ui-text: #111827;
  --top1-orders-ui-muted: #617086;
  --top1-orders-ui-blue: #2563eb;
  --top1-orders-ui-blue-soft: rgba(37, 99, 235, 0.09);
  --top1-orders-ui-red: #e30613;
  --top1-orders-ui-radius: 14px;
  --top1-orders-ui-radius-lg: 18px;
  --top1-orders-ui-shadow: 0 10px 28px rgba(15, 23, 42, 0.08);
  --top1-orders-ui-shadow-float: 0 28px 72px rgba(15, 23, 42, 0.20), 0 8px 22px rgba(15, 23, 42, 0.08);
  --top1-order-naryad-surface: #ffffff;
  --top1-order-naryad-border: rgba(100, 116, 139, 0.22);
  --top1-order-naryad-radius: 18px;
  --top1-order-naryad-shadow: 0 10px 28px rgba(15, 23, 42, 0.075), inset 0 1px 0 #ffffff;
}

.top1-app-shell[data-top1-section="orders"] .top1-app-content {
  background:
    radial-gradient(820px 260px at 50% -130px, rgba(37, 99, 235, 0.07), transparent 72%),
    linear-gradient(180deg, #f5f8fc 0%, #edf3f8 100%) !important;
}

.top1-app-shell[data-top1-section="orders"] .top1-clients-workspace,
.top1-app-shell[data-top1-section="orders"] .top1-clients-main {
  min-width: 0;
}

/* Orders register */
.top1-app-shell[data-top1-section="orders"] .top1-orders-history-card {
  overflow: visible;
  border: 1px solid var(--top1-orders-ui-border);
  border-radius: var(--top1-orders-ui-radius-lg);
  background: #ffffff;
  box-shadow: var(--top1-orders-ui-shadow), inset 0 1px 0 #ffffff;
}

.top1-app-shell[data-top1-section="orders"] .top1-orders-history-header {
  border: 1px solid rgba(37, 99, 235, 0.18);
  border-left: 4px solid rgba(37, 99, 235, 0.72);
  border-radius: 14px;
  background:
    linear-gradient(90deg, rgba(37, 99, 235, 0.07), rgba(20, 184, 166, 0.045) 58%, transparent),
    #ffffff;
  box-shadow: 0 4px 14px rgba(15, 23, 42, 0.055);
}

.top1-app-shell[data-top1-section="orders"] .top1-orders-history-header h2 {
  color: #111827;
  font-weight: 880;
  letter-spacing: -0.026em;
}

.top1-app-shell[data-top1-section="orders"] .top1-orders-search-form {
  gap: 10px;
  border: 1px solid var(--top1-orders-ui-border);
  border-radius: 14px;
  background: var(--top1-orders-ui-surface-soft);
  box-shadow: inset 0 1px 0 #ffffff;
}

.top1-app-shell[data-top1-section="orders"] .top1-orders-search-field {
  gap: 10px;
}

.top1-app-shell[data-top1-section="orders"] .top1-orders-search-field span {
  color: #455468;
  font-weight: 820;
  letter-spacing: 0.02em;
}

.top1-app-shell[data-top1-section="orders"] .top1-orders-search-field input {
  border-color: rgba(100, 116, 139, 0.28);
  border-radius: 12px;
  background: #ffffff;
  color: #111827;
  box-shadow: 0 2px 8px rgba(15, 23, 42, 0.04), inset 0 1px 1px rgba(15, 23, 42, 0.02);
}

.top1-app-shell[data-top1-section="orders"] .top1-orders-search-field input:focus {
  border-color: rgba(37, 99, 235, 0.64);
  outline: none;
  box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.10), inset 0 1px 1px rgba(15, 23, 42, 0.02);
}

.top1-app-shell[data-top1-section="orders"] .top1-orders-table {
  overflow: visible;
  border: 1px solid var(--top1-orders-ui-border);
  border-radius: 15px;
  background: #ffffff;
  box-shadow: 0 5px 18px rgba(15, 23, 42, 0.06);
}

.top1-app-shell[data-top1-section="orders"] .top1-orders-row-head {
  border-bottom-color: rgba(71, 85, 105, 0.24);
  background: linear-gradient(180deg, #f9fbfd 0%, #edf2f7 100%);
  color: #506077;
  font-size: 10.5px;
  font-weight: 850;
  letter-spacing: 0.045em;
}

.top1-app-shell[data-top1-section="orders"] .top1-orders-row:not(.top1-orders-row-head) {
  --top1-orders-row-accent: #94a3b8;
  position: relative;
  border-bottom-color: rgba(100, 116, 139, 0.17);
  background:
    linear-gradient(90deg, color-mix(in srgb, var(--top1-orders-row-accent) 7%, transparent) 0%, transparent 22%),
    #ffffff;
  box-shadow: inset 4px 0 0 var(--top1-orders-row-accent);
  transition: background-color 140ms ease, box-shadow 140ms ease, transform 140ms ease;
}

.top1-app-shell[data-top1-section="orders"] .top1-orders-row.is-order-status-new {
  --top1-orders-row-accent: #3b82f6;
}

.top1-app-shell[data-top1-section="orders"] .top1-orders-row.is-order-status-in-work {
  --top1-orders-row-accent: #f59e0b;
}

.top1-app-shell[data-top1-section="orders"] .top1-orders-row.is-order-status-ready {
  --top1-orders-row-accent: #10b981;
}

.top1-app-shell[data-top1-section="orders"] .top1-orders-row.is-order-status-waiting-parts {
  --top1-orders-row-accent: #8b5cf6;
}

.top1-app-shell[data-top1-section="orders"] :is(.top1-orders-row.is-order-status-delivered, .top1-orders-row.is-order-status-cancelled) {
  --top1-orders-row-accent: #64748b;
}

.top1-app-shell[data-top1-section="orders"] .top1-orders-row:not(.top1-orders-row-head):hover {
  background:
    linear-gradient(90deg, color-mix(in srgb, var(--top1-orders-row-accent) 11%, transparent) 0%, transparent 28%),
    #fbfdff;
  box-shadow: inset 4px 0 0 var(--top1-orders-row-accent), 0 7px 17px rgba(15, 23, 42, 0.065);
  transform: translateY(-1px);
}

.top1-app-shell[data-top1-section="orders"] .top1-orders-row > div {
  color: #334155;
}

.top1-app-shell[data-top1-section="orders"] .top1-orders-cell-main strong,
.top1-app-shell[data-top1-section="orders"] .top1-orders-order-cell strong {
  color: #111827;
  font-weight: 830;
  letter-spacing: -0.008em;
}

.top1-app-shell[data-top1-section="orders"] .top1-orders-cell-main span {
  color: var(--top1-orders-ui-muted);
  line-height: 1.35;
}

.top1-app-shell[data-top1-section="orders"] .top1-orders-order-cell {
  border-radius: 9px;
  cursor: pointer;
}

.top1-app-shell[data-top1-section="orders"] .top1-orders-order-cell:hover,
.top1-app-shell[data-top1-section="orders"] .top1-orders-order-cell:focus-visible {
  background: rgba(37, 99, 235, 0.065);
  outline: none;
  box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.09);
}

.top1-app-shell[data-top1-section="orders"] .top1-orders-current-badge {
  border-color: rgba(37, 99, 235, 0.20);
  background: #eff6ff;
  color: #1d4ed8;
}

.top1-app-shell[data-top1-section="orders"] .top1-orders-row-action-button {
  border-color: rgba(100, 116, 139, 0.24);
  border-radius: 10px;
  background: #ffffff;
  color: #334155;
  box-shadow: 0 3px 9px rgba(15, 23, 42, 0.06);
}

.top1-app-shell[data-top1-section="orders"] .top1-orders-row-action-button:hover,
.top1-app-shell[data-top1-section="orders"] .top1-orders-row-action-button:focus-visible,
.top1-app-shell[data-top1-section="orders"] .top1-orders-row-action-button[aria-expanded="true"] {
  border-color: rgba(37, 99, 235, 0.38);
  background: #f4f8ff;
  color: #1d4ed8;
  outline: none;
  box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.09), 0 6px 15px rgba(15, 23, 42, 0.07);
}

.top1-app-shell[data-top1-section="orders"] .top1-orders-row-action-popover {
  overflow: hidden;
  border: 1px solid var(--top1-orders-ui-border-strong);
  border-radius: 16px;
  background: rgba(255, 255, 255, 0.99);
  box-shadow: var(--top1-orders-ui-shadow-float), inset 0 1px 0 #ffffff;
  backdrop-filter: blur(22px) saturate(1.06);
}

.top1-app-shell[data-top1-section="orders"] .top1-orders-row-action-popover::before {
  border-color: var(--top1-orders-ui-border-strong);
  background: #ffffff;
}

.top1-app-shell[data-top1-section="orders"] .top1-orders-row-action-head {
  border-bottom: 1px solid rgba(100, 116, 139, 0.17);
  background: linear-gradient(180deg, #ffffff 0%, #f3f7fb 100%);
}

.top1-app-shell[data-top1-section="orders"] .top1-orders-row-action-head strong {
  color: #111827;
  font-weight: 860;
}

.top1-app-shell[data-top1-section="orders"] .top1-orders-row-action-head span,
.top1-app-shell[data-top1-section="orders"] .top1-orders-row-action-disabled span {
  color: var(--top1-orders-ui-muted);
  line-height: 1.35;
}

.top1-app-shell[data-top1-section="orders"] .top1-orders-row-action-item {
  border-color: rgba(100, 116, 139, 0.20);
  border-radius: 11px;
  background: #ffffff;
  color: #243247;
  box-shadow: 0 2px 6px rgba(15, 23, 42, 0.04);
}

.top1-app-shell[data-top1-section="orders"] .top1-orders-row-action-item:hover,
.top1-app-shell[data-top1-section="orders"] .top1-orders-row-action-item:focus-visible {
  border-color: rgba(37, 99, 235, 0.34);
  background: #f4f8ff;
  color: #1d4ed8;
  outline: none;
}

.top1-app-shell[data-top1-section="orders"] .top1-orders-row-action-item:disabled {
  background: #f4f6f9;
  color: #8290a2;
  box-shadow: none;
}

/* Work order shell and header */
.top1-app-shell[data-top1-section="orders"] .top1-order-detail-flow {
  gap: 14px;
  color: var(--top1-orders-ui-text);
}

.top1-app-shell[data-top1-section="orders"] .top1-order-detail-card {
  overflow: visible;
  border: 1px solid var(--top1-orders-ui-border);
  border-radius: 20px;
  background: rgba(255, 255, 255, 0.98);
  box-shadow: var(--top1-orders-ui-shadow), inset 0 1px 0 #ffffff;
}

.top1-app-shell[data-top1-section="orders"] .top1-order-detail-card > .top1-card-header {
  position: relative;
  z-index: 14;
  gap: 14px;
  border: 1px solid rgba(100, 116, 139, 0.18);
  border-radius: 15px;
  background:
    linear-gradient(100deg, rgba(37, 99, 235, 0.06) 0%, rgba(20, 184, 166, 0.035) 46%, transparent 76%),
    #ffffff;
  box-shadow: 0 5px 16px rgba(15, 23, 42, 0.06);
}

.top1-app-shell[data-top1-section="orders"] .top1-order-detail-card > .top1-card-header h2 {
  color: #111827;
  font-weight: 900;
  letter-spacing: -0.032em;
}

.top1-app-shell[data-top1-section="orders"] .top1-order-detail-card > .top1-card-header p {
  color: #536278;
  font-weight: 670;
}

.top1-app-shell[data-top1-section="orders"] .top1-order-header-actions {
  gap: 8px;
}

.top1-app-shell[data-top1-section="orders"] .top1-order-header-actions :is(.top1-secondary-button, .top1-order-print-summary, .top1-order-client-app-summary) {
  border-color: rgba(100, 116, 139, 0.24);
  border-radius: 11px;
  background: #ffffff;
  color: #263449;
  box-shadow: 0 3px 9px rgba(15, 23, 42, 0.055);
}

.top1-app-shell[data-top1-section="orders"] .top1-order-header-actions :is(.top1-secondary-button, .top1-order-print-summary, .top1-order-client-app-summary):hover,
.top1-app-shell[data-top1-section="orders"] .top1-order-header-actions :is(.top1-secondary-button, .top1-order-print-summary, .top1-order-client-app-summary):focus-visible {
  border-color: rgba(37, 99, 235, 0.34);
  background: #f5f9ff;
  color: #1d4ed8;
  outline: none;
  box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.08), 0 7px 16px rgba(15, 23, 42, 0.07);
  transform: translateY(-1px);
}

.top1-app-shell[data-top1-section="orders"] .top1-order-next-step-hint {
  border: 1px solid rgba(37, 99, 235, 0.20);
  border-left: 4px solid rgba(37, 99, 235, 0.72);
  border-radius: 13px;
  background: #f7faff;
  color: #34445b;
  box-shadow: 0 3px 10px rgba(15, 23, 42, 0.045);
}

.top1-app-shell[data-top1-section="orders"] .top1-order-next-step-hint strong {
  color: #17233a;
}

/* Workflow and compact order facts */
.top1-app-shell[data-top1-section="orders"] .top1-order-workflow-panel {
  border: 1px solid var(--top1-orders-ui-border);
  border-radius: 15px;
  background: #ffffff;
  box-shadow: 0 4px 14px rgba(15, 23, 42, 0.05);
}

.top1-app-shell[data-top1-section="orders"] .top1-order-workflow-steps {
  gap: 7px;
}

.top1-app-shell[data-top1-section="orders"] .top1-order-workflow-step {
  border-color: rgba(100, 116, 139, 0.20);
  border-radius: 11px;
  background: #f8fafc;
  color: #536278;
  box-shadow: none;
}

.top1-app-shell[data-top1-section="orders"] .top1-order-workflow-step.is-active,
.top1-app-shell[data-top1-section="orders"] .top1-order-workflow-step.is-current {
  border-color: rgba(37, 99, 235, 0.34);
  background: #eff5ff;
  color: #1d4ed8;
  box-shadow: inset 0 -2px 0 rgba(37, 99, 235, 0.62);
}

.top1-app-shell[data-top1-section="orders"] .top1-order-workflow-step.is-complete,
.top1-app-shell[data-top1-section="orders"] .top1-order-workflow-step.is-done {
  border-color: rgba(16, 185, 129, 0.24);
  background: #f0fdf7;
  color: #047857;
}

.top1-app-shell[data-top1-section="orders"] .top1-order-detail-kpis {
  overflow: visible;
  gap: 0;
  border: 1px solid var(--top1-orders-ui-border);
  border-radius: 15px;
  background: #ffffff;
  box-shadow: 0 4px 14px rgba(15, 23, 42, 0.055);
}

.top1-app-shell[data-top1-section="orders"] :is(.top1-order-status-tile, .top1-order-service-advisor-tile, .top1-order-debt-tile, .top1-order-kpi-opened, .top1-order-kpi-total, .top1-order-kpi-paid) {
  border-color: rgba(100, 116, 139, 0.16);
  background: #ffffff;
  box-shadow: none;
}

.top1-app-shell[data-top1-section="orders"] :is(.top1-order-status-tile, .top1-order-service-advisor-tile, .top1-order-debt-tile, .top1-order-kpi-opened, .top1-order-kpi-total, .top1-order-kpi-paid) > span,
.top1-app-shell[data-top1-section="orders"] .top1-order-tile-head span {
  color: #66758a;
  font-weight: 790;
}

.top1-app-shell[data-top1-section="orders"] :is(.top1-order-status-tile, .top1-order-service-advisor-tile, .top1-order-debt-tile, .top1-order-kpi-opened, .top1-order-kpi-total, .top1-order-kpi-paid) strong {
  color: #111827;
  font-variant-numeric: tabular-nums;
}

/* Client, vehicle and work sections */
.top1-app-shell[data-top1-section="orders"] :is(.top1-order-client-panel, .top1-order-vehicle-panel, .top1-order-detail-panel) {
  border: 1px solid var(--top1-orders-ui-border);
  border-radius: 15px;
  background: #ffffff;
  box-shadow: 0 4px 13px rgba(15, 23, 42, 0.05);
}

.top1-app-shell[data-top1-section="orders"] :is(.top1-order-client-panel, .top1-order-vehicle-panel) h2 {
  color: #111827;
  font-weight: 870;
  letter-spacing: -0.022em;
}

.top1-app-shell[data-top1-section="orders"] .top1-order-vin-value {
  border-color: rgba(100, 116, 139, 0.18);
  border-radius: 9px;
  background: #f8fafc;
}

.top1-app-shell[data-top1-section="orders"] .top1-order-vin-copy-button {
  border-color: rgba(37, 99, 235, 0.22);
  border-radius: 9px;
  background: #ffffff;
  color: #2563eb;
  box-shadow: 0 2px 7px rgba(15, 23, 42, 0.05);
}

.top1-app-shell[data-top1-section="orders"] .top1-order-work-block {
  --top1-order-block-accent: #64748b;
  overflow: visible;
  border: 1px solid var(--top1-orders-ui-border) !important;
  border-radius: 18px !important;
  background:
    linear-gradient(180deg, color-mix(in srgb, var(--top1-order-block-accent) 3%, transparent) 0%, transparent 110px),
    #ffffff !important;
  box-shadow: 0 7px 20px rgba(15, 23, 42, 0.065), inset 0 1px 0 #ffffff !important;
}

.top1-app-shell[data-top1-section="orders"]
  .top1-clients-main:has(.top1-order-detail-card)
  .top1-order-detail-flow
  > :is(
    #top1-order-services.top1-order-work-block,
    #top1-order-parts.top1-order-work-block,
    #top1-order-close.top1-order-work-block,
    #top1-order-recommendations.top1-order-work-block
  ) {
  border: 1px solid var(--top1-orders-ui-border) !important;
  border-radius: 18px !important;
  background:
    linear-gradient(180deg, color-mix(in srgb, var(--top1-order-block-accent) 3%, transparent) 0%, transparent 110px),
    #ffffff !important;
  box-shadow: 0 7px 20px rgba(15, 23, 42, 0.065), inset 0 1px 0 #ffffff !important;
}

.top1-app-shell[data-top1-section="orders"] .top1-order-work-block::before {
  width: 3px;
  border-radius: 999px;
  background: var(--top1-order-block-accent);
  opacity: 0.78;
  box-shadow: none;
}

.top1-app-shell[data-top1-section="orders"] .top1-order-work-block-services {
  --top1-order-block-accent: #2563eb;
}

.top1-app-shell[data-top1-section="orders"] .top1-order-work-block-parts {
  --top1-order-block-accent: #7c3aed;
}

.top1-app-shell[data-top1-section="orders"] .top1-order-work-block-payment,
.top1-app-shell[data-top1-section="orders"] .top1-order-work-block-final {
  --top1-order-block-accent: #059669;
}

.top1-app-shell[data-top1-section="orders"] .top1-order-work-block-recommendations {
  --top1-order-block-accent: #d97706;
}

.top1-app-shell[data-top1-section="orders"] .top1-order-work-block-documents {
  --top1-order-block-accent: #475569;
}

.top1-app-shell[data-top1-section="orders"] :is(.top1-order-section-header, .top1-order-subsection-header, .top1-order-work-heading) {
  border-bottom-color: rgba(100, 116, 139, 0.16);
}

.top1-app-shell[data-top1-section="orders"] :is(.top1-order-section-header, .top1-order-subsection-header, .top1-order-work-heading) h2,
.top1-app-shell[data-top1-section="orders"] .top1-order-work-heading > strong {
  color: #111827;
  font-weight: 880;
  letter-spacing: -0.024em;
}

.top1-app-shell[data-top1-section="orders"] .top1-order-work-count-badge,
.top1-app-shell[data-top1-section="orders"] .top1-order-final-status-pill {
  border-color: rgba(100, 116, 139, 0.18);
  background: #f4f7fa;
  color: #526176;
  box-shadow: none;
}

.top1-app-shell[data-top1-section="orders"] .top1-order-work-card {
  border: 1px solid rgba(100, 116, 139, 0.20);
  border-radius: 13px;
  background: #ffffff;
  box-shadow: 0 3px 10px rgba(15, 23, 42, 0.05);
}

.top1-app-shell[data-top1-section="orders"] .top1-order-work-card:hover {
  border-color: rgba(37, 99, 235, 0.28);
  box-shadow: 0 7px 17px rgba(15, 23, 42, 0.075);
}

.top1-app-shell[data-top1-section="orders"] .top1-order-work-card h3,
.top1-app-shell[data-top1-section="orders"] .top1-order-work-card-main strong {
  color: #111827;
  font-weight: 840;
}

.top1-app-shell[data-top1-section="orders"] :is(.top1-order-work-icon-edit, .top1-order-work-icon-save, .top1-order-work-performer-control) {
  border-color: rgba(100, 116, 139, 0.22);
  border-radius: 9px;
  background: #ffffff;
  color: #334155;
  box-shadow: 0 2px 7px rgba(15, 23, 42, 0.05);
}

.top1-app-shell[data-top1-section="orders"] :is(.top1-order-work-icon-edit, .top1-order-work-icon-save, .top1-order-work-performer-control):hover,
.top1-app-shell[data-top1-section="orders"] :is(.top1-order-work-icon-edit, .top1-order-work-icon-save, .top1-order-work-performer-control):focus-visible {
  border-color: rgba(37, 99, 235, 0.36);
  background: #f4f8ff;
  color: #1d4ed8;
  outline: none;
}

.top1-app-shell[data-top1-section="orders"] :is(.top1-order-detail-table, .top1-order-service-lines-table, .top1-order-part-lines-table, .top1-order-documents-table) {
  overflow: hidden;
  border: 1px solid rgba(100, 116, 139, 0.18);
  border-radius: 13px;
  background: #ffffff;
}

.top1-app-shell[data-top1-section="orders"] .top1-order-detail-flow .top1-table-row-head {
  border-bottom-color: rgba(100, 116, 139, 0.20);
  background: #f2f6fa;
  color: #536278;
  font-weight: 820;
}

.top1-app-shell[data-top1-section="orders"] .top1-order-detail-flow .top1-table-row:not(.top1-table-row-head) {
  border-bottom-color: rgba(100, 116, 139, 0.14);
  background: #ffffff;
}

.top1-app-shell[data-top1-section="orders"] .top1-order-detail-flow .top1-table-row:not(.top1-table-row-head):hover {
  background: #f8fbff;
  box-shadow: inset 3px 0 0 rgba(37, 99, 235, 0.34);
}

.top1-app-shell[data-top1-section="orders"] :is(.top1-order-part-empty-card, .top1-order-recommendations-empty, .top1-order-final-breakdown-empty, .top1-order-empty-row) {
  border: 1px dashed rgba(100, 116, 139, 0.28);
  border-radius: 13px;
  background: #f8fafc;
  color: #66758a;
}

/* Totals, payment and recommendations */
.top1-app-shell[data-top1-section="orders"] .top1-order-final-grid {
  gap: 12px;
}

.top1-app-shell[data-top1-section="orders"] :is(.top1-order-final-payment, .top1-order-final-overview, .top1-order-final-delivery, .top1-order-final-breakdown) {
  border: 1px solid rgba(100, 116, 139, 0.20);
  border-radius: 14px;
  background: #ffffff;
  box-shadow: 0 4px 13px rgba(15, 23, 42, 0.05);
}

.top1-app-shell[data-top1-section="orders"] .top1-order-payment-summary {
  gap: 8px;
}

.top1-app-shell[data-top1-section="orders"] .top1-order-payment-total,
.top1-app-shell[data-top1-section="orders"] .top1-order-final-overview-tile {
  border-color: rgba(100, 116, 139, 0.18);
  border-radius: 12px;
  background: #f7f9fc;
  box-shadow: none;
}

.top1-app-shell[data-top1-section="orders"] .top1-order-final-breakdown-head,
.top1-app-shell[data-top1-section="orders"] .top1-order-final-breakdown-total {
  border-color: rgba(100, 116, 139, 0.17);
  background: #f5f8fb;
}

.top1-app-shell[data-top1-section="orders"] .top1-order-final-breakdown-row {
  border-bottom-color: rgba(100, 116, 139, 0.13);
}

.top1-app-shell[data-top1-section="orders"] .top1-order-recommendation-form {
  border: 1px solid rgba(217, 119, 6, 0.18);
  border-radius: 14px;
  background: #fffdf8;
  box-shadow: none;
}

.top1-app-shell[data-top1-section="orders"] .top1-order-recommendations-header {
  border-bottom-color: rgba(100, 116, 139, 0.16);
}

.top1-app-shell[data-top1-section="orders"] :is(.top1-order-delivery-checklist-row, .top1-order-final-overview-tile) {
  border-color: rgba(100, 116, 139, 0.18);
  border-radius: 11px;
  background: #f8fafc;
}

/* Documents */
.top1-app-shell[data-top1-section="orders"] :is(.top1-order-documents-stage, .top1-order-documents-more, .top1-order-document-summary) {
  border-color: rgba(100, 116, 139, 0.20);
  border-radius: 13px;
  background: #ffffff;
  box-shadow: 0 3px 10px rgba(15, 23, 42, 0.045);
}

.top1-app-shell[data-top1-section="orders"] .top1-order-documents-stage-head,
.top1-app-shell[data-top1-section="orders"] .top1-order-documents-more > summary {
  border-bottom-color: rgba(100, 116, 139, 0.15);
  background: #f6f9fc;
}

.top1-app-shell[data-top1-section="orders"] .top1-document-print-button {
  border-color: rgba(100, 116, 139, 0.20);
  border-radius: 11px;
  background: #ffffff;
  color: #263449;
  box-shadow: 0 2px 7px rgba(15, 23, 42, 0.045);
}

.top1-app-shell[data-top1-section="orders"] .top1-document-print-button:hover,
.top1-app-shell[data-top1-section="orders"] .top1-document-print-button:focus-visible {
  border-color: rgba(37, 99, 235, 0.34);
  background: #f4f8ff;
  color: #1d4ed8;
  outline: none;
  box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.08), 0 6px 15px rgba(15, 23, 42, 0.06);
}

/* Disclosures, forms and every order popover */
.top1-app-shell[data-top1-section="orders"] :is(
  .top1-order-status-panel > summary,
  .top1-order-debt-payment-panel > summary,
  .top1-order-inline-edit > summary,
  .top1-order-action-panel > summary,
  .top1-order-catalog-create > summary,
  .top1-order-work-primary-summary,
  .top1-order-controlled-disclosure > summary,
  .top1-order-documents-more > summary,
  .top1-order-delivery-checks-details > summary
) {
  border-color: rgba(100, 116, 139, 0.22);
  border-radius: 10px;
  background: #ffffff;
  color: #334155;
  box-shadow: 0 2px 7px rgba(15, 23, 42, 0.045);
}

.top1-app-shell[data-top1-section="orders"] :is(
  .top1-order-status-panel > summary,
  .top1-order-debt-payment-panel > summary,
  .top1-order-inline-edit > summary,
  .top1-order-action-panel > summary,
  .top1-order-catalog-create > summary,
  .top1-order-work-primary-summary,
  .top1-order-controlled-disclosure > summary,
  .top1-order-documents-more > summary,
  .top1-order-delivery-checks-details > summary
):hover,
.top1-app-shell[data-top1-section="orders"] details[open] > summary {
  border-color: rgba(37, 99, 235, 0.34);
  background: #f5f9ff;
  color: #1d4ed8;
}

.top1-app-shell[data-top1-section="orders"] :is(
  .top1-order-status-form,
  .top1-order-payment-form,
  .top1-order-inline-edit-form,
  .top1-order-add-work-form,
  .top1-order-work-edit-popover-body,
  .top1-order-work-card-performers-panel,
  .top1-order-force-confirm-form,
  .top1-order-part-form,
  .top1-order-supplier-part-form,
  .top1-order-quote-form,
  .top1-order-catalog-part-form,
  .top1-order-parts-workbench-form,
  .top1-order-split-form,
  .top1-order-line-form,
  .top1-parts-selection-panel,
  .top1-team-edit-panel
) {
  border: 1px solid var(--top1-orders-ui-border-strong) !important;
  border-radius: 16px !important;
  background: rgba(255, 255, 255, 0.99) !important;
  box-shadow: var(--top1-orders-ui-shadow-float), inset 0 1px 0 #ffffff !important;
  backdrop-filter: blur(22px) saturate(1.05);
}

.top1-app-shell[data-top1-section="orders"] .top1-order-detail-card .top1-order-status-panel > form.top1-order-status-form,
.top1-app-shell[data-top1-section="orders"] .top1-order-detail-card #top1-order-payment-form.top1-order-payment-form,
.top1-app-shell[data-top1-section="orders"] .top1-order-detail-card .top1-order-inline-edit > form.top1-order-inline-edit-form,
.top1-app-shell[data-top1-section="orders"] #top1-order-services .top1-order-add-work-panel > form.top1-order-add-work-form,
.top1-app-shell[data-top1-section="orders"] #top1-order-services .top1-order-work-edit-panel > .top1-order-work-edit-popover-body,
.top1-app-shell[data-top1-section="orders"] #top1-order-services .top1-order-work-card-performers-panel,
.top1-app-shell[data-top1-section="orders"] #top1-order-services .top1-order-force-confirm-panel > form.top1-order-force-confirm-form,
.top1-app-shell[data-top1-section="orders"] #top1-order-parts #top1-order-parts-stock-panel > form.top1-order-part-form,
.top1-app-shell[data-top1-section="orders"] #top1-order-parts #top1-order-parts-supplier-panel > form.top1-order-supplier-part-form,
.top1-app-shell[data-top1-section="orders"] #top1-order-parts #top1-order-parts-quote-panel > form.top1-order-quote-form,
.top1-app-shell[data-top1-section="orders"] #top1-order-parts #top1-order-parts-catalog-panel > form.top1-order-catalog-part-form,
.top1-app-shell[data-top1-section="orders"] #top1-order-parts .top1-parts-selection-panel,
.top1-app-shell[data-top1-section="orders"] #top1-order-services .top1-team-edit-panel {
  border: 1px solid var(--top1-orders-ui-border-strong) !important;
  border-radius: 16px !important;
  background: rgba(255, 255, 255, 0.99) !important;
  box-shadow: var(--top1-orders-ui-shadow-float), inset 0 1px 0 #ffffff !important;
}

.top1-app-shell[data-top1-section="orders"]
  form#top1-order-payment-form.top1-client-form.top1-order-line-form.top1-order-payment-form,
.top1-app-shell[data-top1-section="orders"]
  .top1-order-detail-meta
  .top1-order-detail-panel
  .top1-order-inline-edit[open]
  > form.top1-client-form.top1-order-inline-edit-form,
.top1-app-shell[data-top1-section="orders"]
  section#top1-order-services.top1-order-work-premium
  .top1-order-work-premium-header
  .top1-order-add-work-panel[open]
  > form.top1-client-form.top1-order-line-form.top1-order-add-work-form {
  border: 1px solid var(--top1-orders-ui-border-strong) !important;
  border-radius: 16px !important;
  background: rgba(255, 255, 255, 0.99) !important;
  box-shadow: var(--top1-orders-ui-shadow-float), inset 0 1px 0 #ffffff !important;
}

.top1-app-shell[data-top1-section="orders"]
  #top1-order-services
  .top1-order-work-card
  .top1-order-work-card-actions
  details.top1-team-edit-panel.top1-order-work-edit-panel[open]
  > .top1-order-work-edit-popover-body,
.top1-app-shell[data-top1-section="orders"]
  #top1-order-services
  .top1-order-work-card
  > details.top1-order-work-card-performers-panel {
  border: 1px solid var(--top1-orders-ui-border-strong) !important;
  border-radius: 16px !important;
  background: rgba(255, 255, 255, 0.99) !important;
  box-shadow: var(--top1-orders-ui-shadow-float), inset 0 1px 0 #ffffff !important;
}

.top1-app-shell[data-top1-section="orders"] :is(
  .top1-order-status-form,
  .top1-order-payment-form,
  .top1-order-inline-edit-form,
  .top1-order-add-work-form,
  .top1-order-work-edit-popover-body,
  .top1-order-work-card-performers-panel,
  .top1-order-force-confirm-form,
  .top1-order-part-form,
  .top1-order-supplier-part-form,
  .top1-order-quote-form,
  .top1-order-catalog-part-form,
  .top1-order-parts-workbench-form,
  .top1-order-split-form,
  .top1-order-line-form
)::before {
  opacity: 0.70;
}

.top1-app-shell[data-top1-section="orders"] .top1-order-status-form-head,
.top1-app-shell[data-top1-section="orders"] .top1-order-payment-header,
.top1-app-shell[data-top1-section="orders"] .top1-order-work-card-performers-heading {
  border-bottom: 1px solid rgba(100, 116, 139, 0.17);
  background: #f6f9fc;
}

.top1-app-shell[data-top1-section="orders"] :is(.top1-client-form-field, .top1-order-recommendation-field) label,
.top1-app-shell[data-top1-section="orders"] :is(.top1-client-form-field, .top1-order-recommendation-field) > span {
  color: #455468;
  font-weight: 800;
}

.top1-app-shell[data-top1-section="orders"] :is(
  .top1-client-form,
  .top1-order-line-form,
  .top1-order-recommendation-form,
  .top1-order-service-advisor-form
) :is(input, select, textarea) {
  border-color: rgba(100, 116, 139, 0.28);
  border-radius: 11px;
  background: #ffffff;
  color: #111827;
  box-shadow: inset 0 1px 2px rgba(15, 23, 42, 0.025);
}

.top1-app-shell[data-top1-section="orders"] :is(
  .top1-client-form,
  .top1-order-line-form,
  .top1-order-recommendation-form,
  .top1-order-service-advisor-form
) :is(input, select, textarea):focus {
  border-color: rgba(37, 99, 235, 0.66);
  outline: none;
  box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.10), inset 0 1px 2px rgba(15, 23, 42, 0.025);
}

.top1-app-shell[data-top1-section="orders"] :is(.top1-client-form-actions, .top1-order-line-form-actions, .top1-order-work-popover-action-row) {
  border-top-color: rgba(100, 116, 139, 0.16);
  background: #f8fafc;
}

.top1-app-shell[data-top1-section="orders"] .top1-order-disclosure-trigger {
  border-color: rgba(100, 116, 139, 0.22);
  border-radius: 10px;
  background: #ffffff;
  color: #334155;
  box-shadow: 0 2px 7px rgba(15, 23, 42, 0.045);
}

.top1-app-shell[data-top1-section="orders"] .top1-order-disclosure-trigger:hover,
.top1-app-shell[data-top1-section="orders"] .top1-order-disclosure-trigger:focus-visible,
.top1-app-shell[data-top1-section="orders"] .top1-order-disclosure-trigger.is-active,
.top1-app-shell[data-top1-section="orders"] .top1-order-disclosure-trigger[aria-expanded="true"] {
  border-color: rgba(37, 99, 235, 0.36);
  background: #eff5ff;
  color: #1d4ed8;
  outline: none;
  box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.08);
}

.top1-app-shell[data-top1-section="orders"] .top1-part-quote-suggestion {
  border-color: rgba(100, 116, 139, 0.20);
  border-radius: 11px;
  background: #ffffff;
  box-shadow: 0 2px 7px rgba(15, 23, 42, 0.045);
}

.top1-app-shell[data-top1-section="orders"] .top1-part-quote-suggestion:hover,
.top1-app-shell[data-top1-section="orders"] .top1-part-quote-suggestion:focus-visible {
  border-color: rgba(37, 99, 235, 0.34);
  background: #f5f9ff;
  outline: none;
}

/* Top-level print and client-app popovers stay inside the viewport. */
.top1-app-shell[data-top1-section="orders"] .top1-order-print-popover-panel {
  position: fixed;
  z-index: 1400;
  left: 50%;
  right: auto;
  top: 72px;
  width: min(780px, calc(100vw - 32px));
  max-width: calc(100vw - 32px);
  max-height: calc(100vh - 96px);
  overflow: auto;
  border: 1px solid var(--top1-orders-ui-border-strong);
  border-radius: 18px;
  background: rgba(255, 255, 255, 0.99);
  box-shadow: var(--top1-orders-ui-shadow-float), inset 0 1px 0 #ffffff;
  backdrop-filter: blur(22px) saturate(1.06);
  transform: translateX(-50%);
}

.top1-app-shell[data-top1-section="orders"] .top1-order-client-app-popover-panel {
  position: fixed;
  z-index: 1400;
  left: auto;
  right: 24px;
  top: 72px;
  width: min(430px, calc(100vw - 32px));
  max-width: calc(100vw - 32px);
  max-height: calc(100vh - 96px);
  overflow: auto;
  border: 1px solid var(--top1-orders-ui-border-strong);
  border-radius: 18px;
  background: rgba(255, 255, 255, 0.99);
  box-shadow: var(--top1-orders-ui-shadow-float), inset 0 1px 0 #ffffff;
  backdrop-filter: blur(22px) saturate(1.06);
}

.top1-app-shell[data-top1-section="orders"] :is(.top1-order-print-popover-panel, .top1-order-client-app-popover-panel)::before {
  width: 3px;
  background: linear-gradient(180deg, #2563eb, #14b8a6);
  opacity: 0.78;
}

.top1-app-shell[data-top1-section="orders"] .top1-order-client-app-popover-head {
  border-bottom-color: rgba(100, 116, 139, 0.17);
  background: #f6f9fc;
}

.top1-app-shell[data-top1-section="orders"] .top1-client-app-code-panel {
  border-color: rgba(37, 99, 235, 0.20);
  border-radius: 13px;
  background: #f7faff;
  box-shadow: none;
}

@media (max-width: 900px) {
  .top1-app-shell[data-top1-section="orders"] :is(.top1-orders-history-card, .top1-order-detail-card, .top1-order-work-block) {
    border-radius: 15px;
  }

  .top1-app-shell[data-top1-section="orders"] .top1-orders-row:not(.top1-orders-row-head) {
    border: 1px solid var(--top1-orders-ui-border);
    border-radius: 13px;
    box-shadow: inset 3px 0 0 var(--top1-orders-row-accent);
  }

  .top1-app-shell[data-top1-section="orders"] .top1-order-header-actions {
    width: 100%;
  }

  .top1-app-shell[data-top1-section="orders"] :is(.top1-order-print-popover-panel, .top1-order-client-app-popover-panel) {
    left: 12px;
    right: 12px;
    top: auto;
    bottom: 0;
    width: auto;
    max-width: none;
    max-height: min(82vh, 720px);
    border-radius: 18px 18px 0 0;
    transform: none;
  }
}

@media (prefers-reduced-motion: reduce) {
  .top1-app-shell[data-top1-section="orders"] :is(
    .top1-orders-row,
    .top1-orders-row-action-button,
    .top1-orders-row-action-item,
    .top1-order-workflow-step,
    .top1-order-work-card,
    .top1-order-disclosure-trigger,
    .top1-document-print-button,
    .top1-part-quote-suggestion
  ) {
    transition: none;
  }
}

/* === TOP1 Order KPI Alignment Fix 2026-07-14 (visual-only) === */
.top1-app-shell[data-top1-section="orders"]
  .top1-order-document-summary
  > .top1-order-detail-kpis
  > :is(.top1-order-kpi-opened, .top1-order-kpi-total, .top1-order-kpi-paid) {
  flex-direction: column !important;
  align-items: flex-start !important;
  justify-content: center !important;
  gap: 5px !important;
}

.top1-app-shell[data-top1-section="orders"]
  .top1-order-document-summary
  > .top1-order-detail-kpis
  > :is(.top1-order-kpi-opened, .top1-order-kpi-total, .top1-order-kpi-paid)
  .top1-focus-title {
  width: 100% !important;
  margin: 0 !important;
  line-height: 1 !important;
}

.top1-app-shell[data-top1-section="orders"]
  .top1-order-document-summary
  > .top1-order-detail-kpis
  > :is(.top1-order-kpi-opened, .top1-order-kpi-total, .top1-order-kpi-paid)
  .top1-focus-note {
  width: 100% !important;
  margin: 0 !important;
  overflow: hidden !important;
  color: #172033 !important;
  font-size: 14px !important;
  font-weight: 850 !important;
  font-variant-numeric: tabular-nums !important;
  line-height: 1.15 !important;
  letter-spacing: -0.012em !important;
  text-overflow: ellipsis !important;
  white-space: nowrap !important;
}

.top1-app-shell[data-top1-section="orders"]
  .top1-order-document-summary
  > .top1-order-detail-kpis
  > .top1-order-kpi-opened
  .top1-focus-note {
  font-size: 13px !important;
}

.top1-app-shell[data-top1-section="orders"]
  .top1-order-document-summary
  > .top1-order-detail-kpis
  .top1-order-debt-head {
  grid-template-columns: minmax(72px, 1fr) auto !important;
  align-items: center !important;
  gap: 8px !important;
  width: 100% !important;
}

.top1-app-shell[data-top1-section="orders"]
  .top1-order-document-summary
  > .top1-order-detail-kpis
  .top1-order-debt-head
  > div:first-child {
  display: flex !important;
  flex-direction: column !important;
  align-items: flex-start !important;
  justify-content: center !important;
  gap: 4px !important;
  min-width: 72px !important;
}

.top1-app-shell[data-top1-section="orders"]
  .top1-order-document-summary
  > .top1-order-detail-kpis
  .top1-order-debt-head
  .top1-focus-note {
  font-size: 14px !important;
  font-variant-numeric: tabular-nums !important;
  line-height: 1.15 !important;
  letter-spacing: -0.012em !important;
}

.top1-app-shell[data-top1-section="orders"]
  .top1-order-document-summary
  > .top1-order-detail-kpis
  .top1-order-debt-payment-panel {
  width: auto !important;
  min-width: 0 !important;
}

.top1-app-shell[data-top1-section="orders"]
  .top1-order-document-summary
  > .top1-order-detail-kpis
  .top1-order-debt-payment-panel
  > summary {
  width: auto !important;
  min-width: 78px !important;
  padding: 0 21px 0 10px !important;
}

@media (min-width: 1280px) {
  .top1-app-shell[data-top1-section="orders"]
    .top1-clients-main:has(.top1-order-detail-card)
    .top1-order-document-summary
    > .top1-order-detail-kpis {
    grid-template-columns:
      minmax(210px, 1.4fr)
      minmax(290px, 2fr)
      minmax(140px, 1fr)
      minmax(105px, 0.78fr)
      minmax(105px, 0.78fr)
      minmax(175px, 1.18fr) !important;
    gap: 8px !important;
    min-height: 74px !important;
    padding: 7px !important;
    border-color: rgba(148, 163, 184, 0.30) !important;
    border-radius: 14px !important;
    background: linear-gradient(180deg, #f8fafc 0%, #f3f6fa 100%) !important;
  }

  .top1-app-shell[data-top1-section="orders"]
    .top1-clients-main:has(.top1-order-detail-card)
    .top1-order-document-summary
    > .top1-order-detail-kpis
    > .top1-focus-tile {
    min-height: 58px !important;
    height: 58px !important;
    padding: 9px 12px !important;
    border: 1px solid rgba(203, 213, 225, 0.88) !important;
    border-radius: 11px !important;
    background: #ffffff !important;
    box-shadow: 0 3px 10px rgba(15, 23, 42, 0.045), inset 0 1px 0 #ffffff !important;
  }

  .top1-app-shell[data-top1-section="orders"]
    .top1-clients-main:has(.top1-order-detail-card)
    .top1-order-document-summary
    > .top1-order-detail-kpis
    > .top1-order-debt-tile.is-warning {
    border-color: rgba(245, 158, 11, 0.30) !important;
    background: linear-gradient(180deg, #fffdf7 0%, #fff9eb 100%) !important;
  }
}