/* ClaimCenter sim: a Guidewire ClaimCenter look for Arvy development.
 *
 * Ported from the Arvy demos' claimcenter.css. Chrome (top bar, sidebar, info
 * bar) follows the Guidewire Cloud dark-navy theme; page bodies use the
 * InsuranceSuite 10 wizard geometry (13.5px text, 28px controls, 32px rows).
 * All colors are tokens so the theme can swap. Class prefixes: cc- for app
 * chrome and pages, gw- for GW widgets.
 *
 * Fonts: no network requests. Source Sans 3 is used when installed locally;
 * otherwise the platform's sans-serif stack renders the same metrics closely
 * enough for screenshots.
 */

:root {
  --cc-font:
    "Source Sans 3", "Source Sans Pro", "Segoe UI", system-ui, -apple-system,
    "Helvetica Neue", Arial, sans-serif;
  --cc-text: #2b2f33;

  --cc-topbar: #374b74;
  --cc-topbar-h: 40px;
  --cc-logo-bg: #151e2d;
  --cc-logo-text: #ecedee;
  --cc-tab-active: #476498;
  --cc-tab-underline: #74c4c3;

  --cc-side-w: 240px;
  --cc-side: #151e2d;
  --cc-side-actions: #2c709b;
  --cc-side-group: #476498;
  --cc-side-sub: #080b10;
  --cc-side-selected: #3a517b;
  --cc-side-accent: #7dc8c8;
  --cc-side-muted: #8a94a6;
  --cc-side-off: #5d687b;
  --cc-wiz-line: #3a4a63;

  --cc-info-border: #efefef;
  --cc-info-label: #424242;
  --cc-status-dot: #24a9e1;
  --cc-flag: #ce6449;

  --cc-title: #393939;
  --cc-title-border: #e2e3e5;
  --cc-panel: #f0f1f5;

  --cc-btn: #006d94;
  --cc-btn-hover: #005a7b;
  --cc-btn-disabled-bg: #e6e6e6;
  --cc-btn-disabled-text: #9aa3ab;

  --cc-label-w: 170px;
  --cc-input-w: 260px;
  --cc-label: #555;
  --cc-required: #e27269;
  --cc-input-border: #c9ced3;
  --cc-focus-border: #2c709b;
  --cc-focus-glow: #74c4c3;
  --cc-peach: #fde9d4;
  --cc-divider: #e2e3e5;

  --cc-link: #4a65a6;
  --cc-th: #343434;
  --cc-row-border: #e9ebee;
  --cc-selected-row: #fef6e9;
  --cc-menu-hover: #e8f1f8;
  --cc-menu-selected: #d4e6f3;
  --cc-loading: #74c4c3;
  --cc-danger: #c62828;

  /* status colors: permissions, notices */
  --cc-ok: #2e7d32;
  --cc-ok-bg: #eef7ef;
  --cc-ok-border: #b9dcbb;
  --cc-bad: #c62828;
  --cc-bad-bg: #fdf0ef;
  --cc-bad-border: #f1c4c0;
  --cc-masked: #7a8594;
  --cc-pending: #a0a7b0;
  --cc-info: #24a9e1;
  --cc-info-bg: #f1f8fd;
  --cc-warn: #c27803;
  --cc-warn-bg: #fff7e8;
  --cc-warn-border: #f2d39b;
}

/* ---------- page shell ---------- */

html,
body {
  height: 100%;
  margin: 0;
}

body {
  background: var(--cc-side);
  overflow: hidden;
}

#cc-root {
  position: relative;
  width: 100%;
  height: 100vh;
  overflow: hidden;
}

/* ---------- app root ---------- */

.cc-app {
  display: flex;
  flex-direction: column;
  font-family: var(--cc-font);
  font-size: 13.5px;
  line-height: 1.35;
  color: var(--cc-text);
  background: #fff;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

.cc-app *,
.cc-app *::before,
.cc-app *::after {
  box-sizing: border-box;
}

.cc-app button {
  font-family: inherit;
}

.cc-app.is-loading,
.cc-app.is-loading * {
  cursor: progress !important;
}

.cc-ico {
  flex: none;
  display: block;
}

/* Indeterminate loading bar under the top bar (150-400 ms transitions). */
.cc-loadbar {
  position: absolute;
  left: 0;
  right: 0;
  top: var(--cc-topbar-h);
  height: 3px;
  overflow: hidden;
  z-index: 8;
  pointer-events: none;
  opacity: 0;
  transition: opacity 0.12s;
}

.cc-app[data-screen="login"] .cc-loadbar {
  top: 0;
}

.cc-app.is-loading .cc-loadbar {
  opacity: 1;
}

.cc-loadbar::before {
  content: "";
  position: absolute;
  top: 0;
  bottom: 0;
  left: -45%;
  width: 45%;
  background: linear-gradient(
    90deg,
    transparent,
    var(--cc-loading) 30%,
    var(--cc-loading) 70%,
    transparent
  );
  animation: cc-indeterminate 0.9s ease-in-out infinite;
}

@keyframes cc-indeterminate {
  from {
    left: -45%;
  }
  to {
    left: 100%;
  }
}

/* ---------- top bar ---------- */

.cc-topbar {
  position: relative;
  z-index: 6;
  flex: none;
  display: flex;
  align-items: stretch;
  height: var(--cc-topbar-h);
  background: var(--cc-topbar);
  color: #fff;
  white-space: nowrap;
}

.cc-logo {
  flex: none;
  width: var(--cc-side-w);
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 0 18px;
  background: var(--cc-logo-bg);
  color: var(--cc-logo-text);
}

.cc-gmark {
  width: 21px;
  height: 21px;
  flex: none;
  color: #fff;
}

.cc-logo-text {
  font-size: 19px;
  font-weight: 400;
  letter-spacing: 0.1px;
}

.cc-logo-text sup,
.cc-login-brand sup {
  font-size: 0.45em;
  margin-left: 1px;
  vertical-align: 0.9em;
}

.cc-tabs {
  display: flex;
  align-items: stretch;
  min-width: 0;
}

.cc-tab {
  display: flex;
  align-items: stretch;
}

.cc-tab-main,
.cc-tab-caret {
  border: 0;
  background: none;
  color: #fff;
  font-size: 14px;
  cursor: pointer;
}

/* Block (not flex) so "<u>C</u>laim" stays one text run. */
.cc-tab-main {
  display: block;
  padding: 0 8px 0 14px;
  line-height: var(--cc-topbar-h);
  white-space: nowrap;
}

.cc-tab-caret {
  position: relative;
  display: flex;
  align-items: center;
  padding: 0 9px 0 8px;
}

.cc-tab-caret::before {
  content: "";
  position: absolute;
  left: 0;
  top: 11px;
  bottom: 11px;
  width: 1px;
  background: rgba(255, 255, 255, 0.45);
}

.cc-tab-main:hover,
.cc-tab-caret:hover,
.cc-tab-caret.is-open {
  background: rgba(255, 255, 255, 0.08);
}

.cc-tab.is-active {
  background: var(--cc-tab-active);
  box-shadow: inset 0 -3px 0 var(--cc-tab-underline);
}

.cc-tab.is-open {
  background: var(--cc-tab-active);
}

.cc-topbar-right {
  margin-left: auto;
  display: flex;
  align-items: center;
  gap: 4px;
  padding: 0 10px 0 16px;
}

.cc-top-icon {
  display: grid;
  place-items: center;
  width: 30px;
  height: 30px;
  border: 0;
  border-radius: 2px;
  background: none;
  color: #fff;
  cursor: pointer;
}

.cc-top-icon .cc-ico {
  width: 18px;
  height: 18px;
}

.cc-top-icon:hover,
.cc-top-icon.is-open {
  background: rgba(255, 255, 255, 0.1);
}

.cc-goto {
  width: 200px;
  height: 26px;
  margin-left: 6px;
  padding: 0 9px;
  border: 0;
  border-radius: 2px;
  font: inherit;
  font-size: 13px;
  color: #333;
  outline: none;
}

.cc-goto::placeholder {
  color: #b7b9bb;
}

/* ---------- body: sidebar + main ---------- */

.cc-body {
  flex: 1;
  display: flex;
  min-height: 0;
}

.cc-sidebar {
  flex: none;
  width: var(--cc-side-w);
  display: flex;
  flex-direction: column;
  min-height: 0;
  background: var(--cc-side);
  color: #fff;
}

.cc-sidebar-scroll {
  flex: 1;
  overflow-x: hidden;
  overflow-y: auto;
  scrollbar-width: thin;
  scrollbar-color: #3a4a63 transparent;
}

.cc-actions {
  display: flex;
  align-items: center;
  gap: 10px;
  height: 40px;
  padding: 0 14px 0 18px;
  background: var(--cc-side-actions);
  font-size: 14px;
  cursor: pointer;
}

.cc-actions-label {
  flex: 1;
}

.cc-nav-item {
  position: relative;
  display: flex;
  align-items: center;
  gap: 11px;
  height: 38px;
  padding: 0 14px 0 18px;
  color: #fff;
  font-size: 13.5px;
  text-decoration: none;
  cursor: pointer;
}

.cc-nav-item:hover {
  background: rgba(255, 255, 255, 0.05);
}

.cc-nav-label {
  flex: 1;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.cc-nav-item.is-selected {
  background: var(--cc-side-selected);
  box-shadow: inset 3px 0 0 var(--cc-side-accent);
}

.cc-nav-group.is-open {
  background: var(--cc-side-group);
}

/* New Claim Wizard navigation */

.cc-wiz-title {
  padding: 18px 18px 10px;
  font-size: 15px;
  font-weight: 600;
}

.cc-wiz-steps {
  padding-bottom: 8px;
  border-bottom: 1px solid #253047;
}

.cc-wiz-step {
  position: relative;
  display: flex;
  align-items: center;
  gap: 12px;
  height: 40px;
  padding: 0 14px 0 18px;
  color: var(--cc-side-muted);
  font-size: 13.5px;
  text-decoration: none;
  cursor: pointer;
}

/* The vertical timeline joining the step dots. */
.cc-wiz-step::before {
  content: "";
  position: absolute;
  left: 24px;
  top: 0;
  bottom: 0;
  width: 2px;
  background: var(--cc-wiz-line);
}

.cc-wiz-step:first-child::before {
  top: 50%;
}

.cc-wiz-step:last-child::before {
  bottom: 50%;
}

.cc-wiz-step:hover {
  background: rgba(255, 255, 255, 0.04);
}

.cc-wiz-dot {
  position: relative;
  z-index: 1;
  flex: none;
  display: grid;
  place-items: center;
  width: 14px;
  height: 14px;
  border: 2px solid #4a5a75;
  border-radius: 50%;
  background: var(--cc-side);
}

.cc-wiz-step.is-done {
  color: #fff;
}

.cc-wiz-step.is-done .cc-wiz-dot {
  border-color: var(--cc-tab-underline);
  background: var(--cc-tab-underline);
  color: var(--cc-side);
}

.cc-wiz-step.is-done .cc-wiz-dot .cc-ico {
  width: 9px;
  height: 9px;
  stroke-width: 2.6;
}

.cc-wiz-step.is-current {
  background: var(--cc-side-selected);
  box-shadow: inset 3px 0 0 var(--cc-side-accent);
  color: #fff;
  font-weight: 600;
}

.cc-wiz-step.is-current .cc-wiz-dot {
  border-color: var(--cc-tab-underline);
  background: var(--cc-side-selected);
}

.cc-wiz-step.is-current .cc-wiz-dot::after {
  content: "";
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--cc-tab-underline);
}

/* ---------- main column ---------- */

.cc-main {
  position: relative;
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  background: #fff;
}

.cc-infobar {
  flex: none;
  display: flex;
  align-items: center;
  gap: 16px;
  height: 36px;
  padding: 0 24px;
  border-bottom: 1px solid var(--cc-info-border);
  color: var(--cc-info-label);
  font-size: 13.5px;
  white-space: nowrap;
  overflow: hidden;
}

.cc-ib-dot {
  flex: none;
  width: 15px;
  height: 15px;
  border-radius: 50%;
  background: var(--cc-status-dot);
}

.cc-ib-icon {
  display: inline-flex;
  color: #1d2532;
  margin-left: -4px;
}

.cc-ib-item b {
  margin-left: 5px;
  color: #000;
  font-weight: 700;
}

/* On a narrow ClaimCenter area the insured and adjuster names give way
   (ellipsis); policy number, date and the caller chip always stay whole. */
.cc-infobar > * {
  flex: none;
}

.cc-infobar > .cc-ib-item--shrink {
  flex: 0 1 auto;
  min-width: 48px;
  overflow: hidden;
  text-overflow: ellipsis;
}

.cc-titlebar {
  flex: none;
  display: flex;
  align-items: center;
  gap: 16px;
  min-height: 54px;
  padding: 6px 24px;
  border-bottom: 1px solid var(--cc-title-border);
}

.cc-title-wrap {
  flex: 1;
  min-width: 0;
  display: flex;
  align-items: center;
  gap: 16px;
}

.cc-title {
  margin: 0;
  overflow: hidden;
  color: var(--cc-title);
  font-size: 24px;
  font-weight: 400;
  letter-spacing: -0.1px;
  white-space: nowrap;
  text-overflow: ellipsis;
}

.cc-toolbar {
  flex: none;
  display: flex;
  align-items: center;
  gap: 6px;
}

.gw-tb-sep {
  width: 1px;
  height: 20px;
  margin: 0 4px;
  background: #d5d8dc;
}

.gw-return {
  padding: 2px 9px;
  border: 1px solid var(--cc-link);
  border-radius: 2px;
  color: var(--cc-link);
  font-size: 13px;
  white-space: nowrap;
  cursor: pointer;
}

.gw-return:hover {
  background: #f2f5fb;
}

.cc-content {
  position: relative;
  flex: 1;
  min-height: 0;
  overflow: auto;
  scroll-behavior: auto;
}

.cc-page {
  max-width: 1250px;
  padding: 14px 24px 64px;
}

/* List-style pages use the whole width, as in ClaimCenter. */
.cc-page--desktop,
.cc-page--claimSearch,
.cc-page--claimSaved,
.cc-page--claimSummary,
.cc-page--claimNotes {
  max-width: 1600px;
}

/* "Saving claim…" overlay */
.cc-saving {
  position: absolute;
  inset: 0;
  z-index: 7;
  display: none;
  place-items: center;
  background: rgba(255, 255, 255, 0.6);
}

.cc-app.is-saving .cc-saving {
  display: grid;
  animation: cc-fade-in 0.15s ease-out;
}

.cc-saving-box {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 16px 26px;
  border: 1px solid var(--cc-input-border);
  border-radius: 3px;
  background: #fff;
  box-shadow: 0 8px 28px rgba(0, 0, 0, 0.16);
  font-size: 15px;
}

.cc-spinner {
  width: 20px;
  height: 20px;
  border: 3px solid #d9e6ee;
  border-top-color: var(--cc-btn);
  border-radius: 50%;
  animation: cc-spin 0.8s linear infinite;
}

@keyframes cc-spin {
  to {
    transform: rotate(360deg);
  }
}

@keyframes cc-fade-in {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}

/* ---------- buttons ---------- */

/* inline-block (not flex) so access-key underlines stay inside one text run. */
.gw-btn {
  display: inline-block;
  height: 28px;
  padding: 0 12px;
  line-height: 28px;
  text-align: center;
  vertical-align: middle;
  border: 0;
  border-radius: 2px;
  background: var(--cc-btn);
  color: #fff;
  font-size: 13px;
  font-weight: 400;
  white-space: nowrap;
  cursor: pointer;
  transition:
    background-color 0.12s,
    box-shadow 0.12s;
}

.gw-btn:hover:not(:disabled) {
  background: var(--cc-btn-hover);
}

.gw-btn:focus-visible {
  outline: 2px solid var(--cc-focus-glow);
  outline-offset: 1px;
}

.gw-btn:disabled {
  background: var(--cc-btn-disabled-bg);
  color: var(--cc-btn-disabled-text);
  cursor: default;
}

.gw-btn[hidden] {
  display: none;
}

.gw-btn--sm {
  height: 24px;
  padding: 0 10px;
  font-size: 12.5px;
  line-height: 24px;
}

.gw-btn--unselect {
  box-shadow:
    0 0 0 1px #fff,
    0 0 0 2px var(--cc-btn);
}

.gw-btn .cc-ico {
  display: inline-block;
  margin: -2px 0 0 5px;
  vertical-align: middle;
}

.gw-btn--menu .cc-ico {
  width: 10px;
  height: 10px;
}

.gw-btnrow {
  display: flex;
  gap: 6px;
  margin: 12px 0 16px;
}

/* ---------- forms ---------- */

.gw-cols {
  display: flex;
  align-items: flex-start;
  margin: 2px 0 6px;
}

.gw-col {
  flex: 1 1 0;
  min-width: 0;
  padding: 0 24px;
}

.gw-col:first-child {
  padding-left: 0;
}

.gw-col + .gw-col {
  border-left: 1px solid var(--cc-divider);
}

.gw-cols--form .gw-col {
  flex: 0 1 480px;
}

.gw-cols--newclaim {
  margin-top: 6px;
}

.gw-cols--newclaim > .gw-col:first-child {
  flex: 0 0 470px;
}

/* Step 3 packs a form and the incident lists side by side, as ClaimCenter's
   Loss Details page does. Its layout follows the page's own width (a
   container query on its content width, which shrinks with the agent panel
   and the sidebar):
     1000px and up  form (432px) + lists
     790-999px      compact form (390px) + lists without Driver/Drivable
     700-789px      lists under the form; the form's halves side by side
     under 700px    lists under a single-column form */
.cc-page--step3,
.cc-page--claimLossDetails {
  container: cc-step3 / inline-size;
  --cc-label-w: 150px;
  --cc-input-w: 244px;
}

.gw-cols--loss > .gw-col--form {
  flex: 0 0 432px;
}

.gw-cols--loss > .gw-col--lists {
  flex: 1 1 auto;
  min-width: 340px;
}

@container cc-step3 (max-width: 999px) {
  .gw-cols--loss {
    --cc-label-w: 132px;
    --cc-input-w: 220px;
  }

  .gw-cols--loss > .gw-col--form {
    flex-basis: 390px;
  }

  .gw-cols--loss > .gw-col--lists {
    min-width: 0;
    padding-right: 0;
  }

  .gw-cols--loss .gw-opt-side {
    display: none;
  }
}

@container cc-step3 (max-width: 789px) {
  .gw-cols--loss {
    flex-wrap: wrap;
  }

  .gw-cols--loss > .gw-col--form,
  .gw-cols--loss > .gw-col--lists {
    flex-basis: 100%;
    padding: 0;
    border-left: 0;
  }

  .gw-cols--loss > .gw-col--lists {
    margin-top: 12px;
  }

  /* Full width again: room for every column. */
  .gw-cols--loss .gw-opt-side {
    display: table-cell;
  }
}

@container cc-step3 (min-width: 700px) and (max-width: 789px) {
  .gw-cols--loss > .gw-col--form {
    display: flex;
    align-items: flex-start;
  }

  .gw-subcol {
    flex: 1 1 0;
    min-width: 0;
  }

  .gw-subcol + .gw-subcol {
    margin-left: 24px;
    padding-left: 24px;
    border-left: 1px solid var(--cc-divider);
  }

  .gw-subcol > .gw-section:first-child {
    margin-top: 4px;
  }
}

.gw-section {
  margin: 16px 0 6px;
  color: var(--cc-text);
  font-size: 14px;
  font-weight: 600;
}

.gw-col > .gw-section:first-child,
.gw-col > .gw-subcol:first-child > .gw-section:first-child,
.cc-page > .gw-section:first-child {
  margin-top: 4px;
}

.gw-row {
  display: grid;
  grid-template-columns: var(--cc-label-w) 14px minmax(0, 1fr);
  align-items: center;
  min-height: 32px;
  padding: 2px 0;
}

.gw-row--top {
  align-items: start;
}

.gw-row--top > .gw-label,
.gw-row--top > .gw-req {
  padding-top: 6px;
}

.gw-label {
  padding-right: 8px;
  color: var(--cc-label);
  font-size: 13px;
}

.gw-req {
  color: var(--cc-required);
  font-size: 15px;
  line-height: 1;
  text-align: center;
}

.gw-value {
  min-width: 0;
}

.gw-ro {
  padding: 5px 0;
  color: var(--cc-text);
}

.gw-row--diagram {
  min-height: 0;
}

.gw-input {
  width: var(--cc-input-w);
  max-width: 100%;
  height: 28px;
  padding: 0 7px;
  border: 1px solid var(--cc-input-border);
  border-radius: 2px;
  background: #fff;
  color: var(--cc-text);
  font: inherit;
  font-size: 13.5px;
  outline: none;
  transition:
    border-color 0.12s,
    box-shadow 0.12s,
    background-color 0.15s;
}

/* Free-text fields whose values run long (vehicle location, description). */
.gw-input--wide {
  width: 100%;
  max-width: 400px;
}

.gw-input::placeholder {
  color: #a3a9b0;
}

/* ClaimCenter's focused / being-edited field: blue border, teal glow, peach fill. */
.gw-input:focus,
.gw-select:focus,
.gw-select.is-open {
  border-color: var(--cc-focus-border);
  box-shadow: 0 0 0 2px var(--cc-focus-glow);
  background: var(--cc-peach);
}

.gw-textarea {
  display: block;
  width: 100%;
  max-width: 400px;
  height: auto;
  min-height: 56px;
  padding: 5px 7px;
  line-height: 1.4;
  resize: vertical;
}

.gw-textarea--wide {
  max-width: 660px;
}

.gw-input--time {
  width: 120px;
}

.gw-date {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  width: var(--cc-input-w);
  max-width: 100%;
}

.gw-date .gw-input,
.gw-iconbtn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 1px;
  flex: none;
  min-width: 28px;
  height: 28px;
  padding: 0 4px;
  border: 1px solid var(--cc-input-border);
  border-radius: 2px;
  background: #fff;
  color: #4d6a82;
  cursor: default;
}

.gw-select {
  display: flex;
  align-items: center;
  width: var(--cc-input-w);
  max-width: 100%;
  height: 28px;
  padding: 0 6px 0 7px;
  border: 1px solid var(--cc-input-border);
  border-radius: 2px;
  background: #fff;
  outline: none;
  cursor: pointer;
  user-select: none;
  transition:
    border-color 0.12s,
    box-shadow 0.12s,
    background-color 0.15s;
}

.gw-select-value {
  flex: 1;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.gw-select.is-empty .gw-select-value {
  color: #555;
}

.gw-select-caret {
  display: flex;
  color: #333;
}

.gw-radios {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 4px 20px;
  min-height: 28px;
}

.gw-radios--v {
  flex-direction: column;
  align-items: flex-start;
  gap: 5px;
  padding: 5px 0;
}

.gw-radio,
.gw-check {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  font-size: 13.5px;
  cursor: pointer;
}

.gw-radio input,
.gw-check input {
  width: 15px;
  height: 15px;
  margin: 0;
  accent-color: #2c709b;
  cursor: pointer;
}

.gw-radio.is-muted {
  color: #8a94a6;
}

.gw-mode {
  display: flex;
  gap: 26px;
  padding: 4px 0 12px;
}

.gw-rule {
  height: 1px;
  margin: 0 0 12px;
  background: var(--cc-divider);
}

.gw-note {
  padding: 4px 0;
  color: #6b7480;
}

.gw-sub {
  display: block;
  margin-top: 1px;
  color: #6b7480;
  font-size: 12.5px;
  font-weight: 400;
}

.gw-sub-title {
  margin: -2px 0 6px;
  color: #555;
}

.gw-vehicle-list {
  display: flex;
  flex-direction: column;
}

.gw-instr {
  margin: 4px 0 10px;
}

/* ---------- message box ---------- */

.gw-msg {
  position: relative;
  max-width: 780px;
  margin: 0 0 12px;
  padding: 8px 40px 9px 14px;
  border: 1px solid var(--cc-input-border);
  border-left: 3px solid #24a9e1;
  background: #fff;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05);
  animation: cc-fade-in 0.2s ease-out;
}

.gw-msg--warning {
  border-left-color: #f0a030;
}

.gw-msg-title {
  margin-bottom: 4px;
  font-weight: 700;
}

.gw-msg-line {
  display: flex;
  align-items: center;
  gap: 8px;
  margin: 2px 0;
}

.cc-ico-info {
  color: #24a9e1;
}

.cc-ico-warn {
  color: #f0a030;
}

.gw-msg-collapse {
  position: absolute;
  top: 8px;
  right: 10px;
  display: grid;
  place-items: center;
  width: 20px;
  height: 20px;
  padding: 0;
  border: 1px solid #b9c0c7;
  border-radius: 2px;
  background: #fff;
  color: #4a5867;
}

/* ---------- dropdown menus (custom gw-select, tab menus) ---------- */

.cc-layer {
  position: absolute;
  inset: 0;
  z-index: 25;
  pointer-events: none;
}

.gw-menu {
  position: fixed;
  z-index: 25;
  min-width: 180px;
  max-height: 300px;
  padding: 3px 0;
  overflow-y: auto;
  border: 1px solid var(--cc-input-border);
  background: #fff;
  box-shadow: 0 4px 14px rgba(0, 0, 0, 0.18);
  color: var(--cc-text);
  font-size: 13.5px;
  pointer-events: auto;
  animation: cc-menu-in 0.1s ease-out;
}

@keyframes cc-menu-in {
  from {
    opacity: 0;
    transform: translateY(-3px);
  }
  to {
    opacity: 1;
    transform: none;
  }
}

.gw-menu--claimTab,
.gw-menu--user {
  max-height: none;
  min-width: 250px;
}

.gw-menu-item {
  height: 26px;
  padding: 0 12px;
  line-height: 26px;
  white-space: nowrap;
  cursor: pointer;
}

.gw-menu-item:hover,
.gw-menu-item.is-active {
  background: var(--cc-menu-hover);
}

.gw-menu-item.is-selected {
  background: var(--cc-menu-selected);
}

.gw-menu-item.is-none {
  color: #666;
}

.gw-menu-item--strong {
  height: 30px;
  line-height: 30px;
}

.gw-menu-sep {
  height: 1px;
  margin: 3px 0;
  background: #e3e6ea;
}

.gw-menu-claimsearch {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 4px 12px;
  color: #444;
}

.gw-menu-claimsearch .gw-input {
  width: 150px;
  height: 26px;
}

.gw-menu-user {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px 12px;
}

.gw-menu-avatar {
  display: grid;
  place-items: center;
  width: 30px;
  height: 30px;
  border-radius: 50%;
  background: #e8eef5;
  color: #476498;
}

.gw-menu-role {
  color: #6b7480;
  font-size: 12.5px;
}

/* ---------- list views ---------- */

.gw-lv {
  margin: 6px 0 16px;
  border-bottom: 1px solid var(--cc-row-border);
}

.gw-lv-head {
  display: flex;
  align-items: center;
  gap: 8px;
  min-height: 34px;
  padding: 3px 8px 3px 10px;
  background: var(--cc-panel);
}

.gw-lv-title {
  color: #333;
  font-size: 16px;
  font-weight: 300;
}

.gw-lv-tools {
  display: flex;
  gap: 6px;
}

.gw-lv-spacer {
  flex: 1;
}

.gw-lv-scroll {
  overflow-x: auto;
}

.gw-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 13.5px;
}

.gw-table th {
  height: 30px;
  padding: 0 9px;
  border-bottom: 1px solid var(--cc-row-border);
  background: #fff;
  color: var(--cc-th);
  font-weight: 600;
  text-align: left;
  white-space: nowrap;
}

.gw-th {
  display: inline-flex;
  align-items: center;
  gap: 4px;
}

.cc-sort {
  color: #8d97a3;
}

.gw-table td {
  height: 32px;
  padding: 0 9px;
  border-bottom: 1px solid var(--cc-row-border);
  white-space: nowrap;
}

.gw-table tbody tr:hover td {
  background: #f7f9fb;
}

.gw-table tr.is-selected td {
  background: var(--cc-selected-row);
}

.gw-table .gw-empty td {
  color: #666;
  text-align: center;
}

.gw-table .gw-empty:hover td {
  background: none;
}

.gw-td-btn {
  width: 84px;
}

.gw-trunc {
  max-width: 220px;
  overflow: hidden;
  text-overflow: ellipsis;
}

.gw-overdue,
.gw-urgent {
  color: var(--cc-danger);
}

.gw-overdue {
  font-weight: 600;
}

.gw-link {
  color: var(--cc-link);
  text-decoration: none;
  cursor: pointer;
}

.gw-link:hover {
  text-decoration: underline;
}

.gw-empty-block {
  padding: 8px 10px;
  color: #666;
  text-align: center;
}

.gw-pager-count {
  margin-right: 6px;
  color: #666;
  white-space: nowrap;
}

.gw-lv--page {
  margin-top: 0;
}

.gw-lv--results {
  max-width: 1180px;
}

.gw-lv--compact .gw-trunc {
  max-width: 150px;
}

.gw-lv--narrow {
  max-width: 900px;
}

.gw-col--lists .gw-lv:first-child {
  margin-top: 4px;
}

/* Narrow side-column tables: tighter cells so every column fits. */
.gw-lv--tight .gw-table th,
.gw-lv--tight .gw-table td,
.gw-lv--results .gw-table th,
.gw-lv--results .gw-table td,
.gw-col--lists .gw-table th,
.gw-col--lists .gw-table td {
  padding: 0 7px;
}

/* The Damage column takes whatever width the others leave and ends in an
   ellipsis, so the list never scrolls sideways beside the form. */
.gw-lv--vehicles .gw-table td.gw-trunc {
  width: 100%;
  max-width: 0;
}

/* ---------- login ---------- */

.cc-login {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  background:
    radial-gradient(
      900px 500px at 75% 0%,
      rgba(116, 196, 195, 0.12),
      transparent 60%
    ),
    linear-gradient(135deg, #151e2d 0%, #1f2b42 48%, #374b74 100%);
}

.cc-login-card {
  width: 380px;
  padding: 34px 36px 22px;
  border-radius: 4px;
  background: #fff;
  box-shadow: 0 24px 70px rgba(0, 0, 0, 0.4);
  animation: cc-fade-in 0.3s ease-out;
}

.cc-login-brand {
  display: flex;
  align-items: center;
  gap: 11px;
  color: #1f2a3c;
  font-size: 24px;
}

.cc-login-brand .cc-gmark {
  width: 28px;
  height: 28px;
  color: #2c709b;
}

.cc-login-env {
  margin: 6px 0 24px;
  color: #7a8594;
  font-size: 13.5px;
  font-variant: small-caps;
  letter-spacing: 0.5px;
}

.cc-login-label {
  display: block;
  margin: 0 0 5px;
  color: var(--cc-label);
  font-size: 13px;
}

.cc-login-input {
  width: 100%;
  height: 32px;
  margin-bottom: 14px;
}

.cc-login-btn {
  display: block;
  width: 100%;
  height: 34px;
  margin-top: 6px;
  line-height: 34px;
  font-size: 14px;
  font-weight: 600;
}

.cc-login-foot {
  margin-top: 24px;
  color: #9aa3ab;
  font-size: 11px;
  text-align: center;
}

/* ---------- step 4: services ---------- */

.cc-svc-list {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 12px;
  max-width: 1040px;
  margin: 8px 0 18px;
}

.cc-svc {
  padding: 12px 14px;
  border: 1px solid #dfe3e8;
  border-radius: 3px;
  background: #fff;
  transition:
    border-color 0.2s,
    background-color 0.2s;
}

.cc-svc:has(input:checked) {
  border-color: #9cc9d9;
  background: #f5fafc;
}

.cc-svc-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.cc-svc-head .gw-check span {
  font-weight: 600;
}

.cc-svc-icon {
  color: #6b7a8c;
}

.cc-svc-icon .cc-ico {
  width: 20px;
  height: 20px;
}

.cc-svc-desc {
  margin: 6px 0 0 22px;
  color: #666;
  font-size: 12.5px;
}

.cc-svc-vendor {
  display: none;
  align-items: flex-start;
  gap: 7px;
  margin: 10px 0 0 22px;
  padding: 8px 10px;
  border-radius: 2px;
  background: #edf6ee;
  color: #2b4a2b;
  font-size: 12.5px;
}

.cc-svc:has(input:checked) .cc-svc-vendor {
  display: flex;
  animation: cc-fade-in 0.25s ease-out;
}

.cc-svc-vendor .cc-ico {
  margin-top: 1px;
  color: #3c8d40;
}

.cc-svc-meta {
  display: block;
  margin-top: 2px;
  color: #5f7a5f;
}

/* ---------- step 5: assignment ---------- */

.cc-assign {
  padding: 2px 0 8px;
}

.cc-assign-fields {
  padding: 4px 0 8px 24px;
}

/* ---------- vehicle incident: damage diagram ---------- */

.cc-car {
  display: flex;
  align-items: center;
  gap: 18px;
  padding: 6px 0 6px 4px;
}

.cc-car-svg {
  flex: none;
  overflow: visible;
}

.cc-car-body {
  fill: #f3f5f8;
}

.cc-car-outline {
  fill: none;
  stroke: #6f7d8f;
  stroke-width: 1.6;
  pointer-events: none;
}

/* Impact zones are invisible until hovered (a grid would read as a
   wireframe); the hit zone gets a soft red glow under its marker. */
.cc-car-zone {
  fill: transparent;
  cursor: pointer;
  transition: fill 0.35s;
}

.cc-car-zone:hover {
  fill: rgba(44, 112, 155, 0.12);
}

.cc-car-glow {
  fill: url(#cc-car-hit);
  pointer-events: none;
  animation: cc-fade-in 0.4s ease-out;
}

.cc-car-glass {
  fill: #cdd8e4;
  stroke: #94a3b4;
  stroke-width: 0.8;
  pointer-events: none;
}

.cc-car-roof {
  fill: rgba(222, 228, 236, 0.7);
  stroke: #a3b0bf;
  stroke-width: 0.8;
  pointer-events: none;
}

.cc-car-line {
  fill: none;
  stroke: #bcc6d1;
  stroke-width: 1;
  pointer-events: none;
}

.cc-car-mirror {
  fill: #e3e8ee;
  stroke: #6f7d8f;
  stroke-width: 1;
  stroke-linejoin: round;
}

.cc-car-lamp {
  fill: none;
  stroke: #e9c46a;
  stroke-width: 2.4;
  stroke-linecap: round;
  pointer-events: none;
}

.cc-car-lamp--tail {
  stroke: #c9a19b;
  stroke-width: 2;
}

.cc-car-wheel {
  fill: #3b4552;
}

.cc-car-txt {
  fill: #7d8796;
  font: 700 8.5px var(--cc-font);
  letter-spacing: 1.2px;
  text-anchor: middle;
}

.cc-car-marker {
  pointer-events: none;
}

.cc-car-dot {
  fill: #d9472b;
  stroke: #fff;
  stroke-width: 1.8;
}

.cc-car-pulse {
  fill: rgba(217, 71, 43, 0.35);
  transform-box: fill-box;
  transform-origin: center;
  animation: cc-pulse 1.5s ease-out infinite;
}

@keyframes cc-pulse {
  0% {
    transform: scale(0.6);
    opacity: 0.9;
  }
  100% {
    transform: scale(2.2);
    opacity: 0;
  }
}

.cc-car-svg.is-under .cc-car-outline {
  stroke: #d9472b;
  stroke-width: 2;
  stroke-dasharray: 4 3;
}

.cc-car-cap {
  display: flex;
  align-items: flex-start;
  gap: 8px;
}

.cc-car-swatch {
  flex: none;
  width: 12px;
  height: 12px;
  margin-top: 3px;
  border-radius: 50%;
  background: radial-gradient(
    circle,
    #e5482a 0 45%,
    rgba(238, 106, 69, 0.45) 46%
  );
}

.cc-car-cap.is-empty .cc-car-swatch {
  background: #dde2e8;
}

.cc-car-cap-label {
  color: #6b7480;
  font-size: 12px;
}

.cc-car-cap-value {
  font-size: 15px;
  font-weight: 600;
}

.cc-car-cap.is-empty .cc-car-cap-value {
  color: #9aa3ab;
  font-weight: 400;
}

/* ---------- New Claim Saved ---------- */

.cc-saved {
  padding: 4px 0 14px;
}

.cc-saved-lead {
  margin: 0 0 10px;
  font-size: 14px;
  font-weight: 700;
}

.cc-saved-kv {
  margin: 5px 0;
}

.cc-saved-kv span {
  display: inline-block;
  min-width: 118px;
  color: var(--cc-label);
}

.cc-saved-now {
  margin-top: 18px;
}

.cc-saved-list {
  margin: 0;
  padding-left: 22px;
}

.cc-saved-list li {
  margin: 7px 0;
}

/* ---------- Claim Summary ---------- */

.cc-sum-top {
  display: grid;
  grid-template-columns: 1fr 1.35fr 1fr;
  border-bottom: 1px solid var(--cc-divider);
}

.cc-sum-card {
  min-height: 148px;
  padding: 2px 22px 16px;
}

.cc-sum-card:first-child {
  padding-left: 0;
}

.cc-sum-card + .cc-sum-card {
  border-left: 1px solid #d4d7db;
}

.cc-sum-line {
  margin: 4px 0;
}

.cc-sum-muted {
  margin-top: 6px;
  color: #6b7480;
  font-size: 12.5px;
}

.cc-sum-fin-row {
  display: flex;
  align-items: center;
  gap: 36px;
}

.cc-donut {
  position: relative;
  display: grid;
  place-items: center;
  width: 66px;
  height: 66px;
  border-radius: 50%;
  background: conic-gradient(#d3d7db 0 22%, #e6e8eb 22% 100%);
  color: #666;
  font-size: 12px;
}

.cc-donut::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: 50%;
  box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.04);
}

.cc-donut span {
  position: relative;
  z-index: 1;
}

.cc-sum-dl {
  display: grid;
  grid-template-columns: auto auto;
  gap: 9px 44px;
  margin: 0;
}

.cc-sum-dl dt {
  color: var(--cc-label);
  white-space: nowrap;
}

.cc-sum-dl dd {
  margin: 0;
  text-align: right;
}

.cc-risk {
  display: flex;
  align-items: center;
  gap: 7px;
  margin: 5px 0;
  color: #b5452c;
  font-weight: 600;
}

.cc-sum-details {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px 40px;
  margin-bottom: 14px;
  padding: 16px 0 18px;
  border-bottom: 1px solid var(--cc-divider);
}

.cc-sum-kv {
  display: grid;
  grid-template-columns: 140px 1fr;
  gap: 12px;
}

.cc-sum-kv span:first-child {
  color: var(--cc-label);
}

.cc-sum-split {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 18px;
}

.cc-note {
  padding: 10px 12px 12px;
}

.cc-note-meta {
  margin-bottom: 5px;
  color: #6b7480;
  font-size: 12.5px;
}

.cc-note-text {
  white-space: pre-wrap;
}

/* Page message boxes sit at the top of every page. */
.cc-msgs:empty {
  display: none;
}

.cc-msgs .gw-msg {
  max-width: 900px;
}

/* Step 1 header. */
.gw-mode--find {
  align-items: baseline;
  gap: 18px;
}

.gw-mode-title {
  color: var(--cc-text);
  font-size: 14px;
  font-weight: 600;
}

.gw-lv-note {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  color: #6b7480;
  font-size: 12.5px;
  white-space: nowrap;
}

.gw-lv-note b {
  color: var(--cc-text);
  font-weight: 600;
}

.cc-ico-lock {
  color: #6b7a8c;
}

.gw-input:disabled {
  border-color: #dde1e5;
  background: #f4f5f7;
  color: #9aa3ab;
}

.gw-input[readonly] {
  background: #fafbfc;
}

/* Locked navigation (pages the role may not open). */
.cc-nav-item.is-locked {
  color: var(--cc-side-off);
  cursor: not-allowed;
}

.cc-nav-item.is-locked:hover {
  background: none;
}

.cc-nav-item.is-locked .cc-ico-lock {
  width: 11px;
  height: 11px;
  color: var(--cc-side-off);
}

/* Gear menu: the role's permissions. */
.gw-menu--user {
  width: 340px;
}

.gw-menu-perm-title {
  padding: 6px 12px 3px;
  color: #6b7480;
  font-size: 11.5px;
  font-weight: 600;
  letter-spacing: 0.4px;
  text-transform: uppercase;
}

.gw-menu-perm {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  padding: 3px 12px;
  font-size: 13px;
  line-height: 1.3;
}

.gw-menu-perm .cc-ico {
  margin-top: 2px;
  stroke-width: 2;
}

.gw-menu-perm.is-allowed .cc-ico {
  color: var(--cc-ok);
}

.gw-menu-perm.is-denied {
  color: #555;
}

.gw-menu-perm.is-denied .cc-ico {
  color: var(--cc-bad);
}

/* Step 2: authorized contacts (commercial). */
.gw-contacts {
  display: flex;
  flex-direction: column;
  gap: 2px;
  padding: 2px 0 4px;
}

.gw-contact {
  display: flex;
  align-items: center;
  gap: 8px;
  min-height: 28px;
}

.gw-contact b {
  font-weight: 600;
}

.gw-contact > .cc-ico {
  color: #6b7a8c;
}

/* Claim pages: priority and permission locks. */
.cc-prio.is-high {
  color: var(--cc-danger);
}

.cc-sum-lock {
  display: flex;
  align-items: center;
  gap: 6px;
}

.cc-saved-list li.is-locked {
  color: #9aa3ab;
  cursor: not-allowed;
}

.cc-saved-list li.is-locked .cc-ico {
  display: inline-block;
  margin: 0 0 -1px 7px;
}

.gw-link-off {
  color: #9aa3ab;
}

/* ---------- narrower ClaimCenter area ----------
   cc-app.js sets these classes from the width of the ClaimCenter area itself:
   the Arvy panel takes 400px of the screen (60px collapsed), so a viewport
   media query cannot tell how much room ClaimCenter has.
     cc-w-narrow  under 1300px (1440 screens with the panel open: 1040px)
     cc-w-tight   under 1000px (1280 screens with the panel open: 880px) */

.cc-app.cc-w-narrow {
  --cc-side-w: 210px;
  --cc-label-w: 150px;
  --cc-input-w: 230px;
}

/* (Step 3 adapts with its own container query, near the top of this file.) */

.cc-w-narrow .cc-svc-list {
  grid-template-columns: 1fr;
  max-width: 560px;
}

/* Tables fit their column instead of scrolling sideways: tighter cells,
   long titles ("Remaining Reserves") wrap, long values end in an ellipsis
   (the full text stays in the row's title where it matters). */
.cc-w-narrow .gw-table th,
.cc-w-narrow .gw-table td {
  padding: 0 6px;
}

.cc-w-narrow .gw-table th {
  height: auto;
  padding-top: 5px;
  padding-bottom: 5px;
  white-space: normal;
  line-height: 1.2;
}

.cc-w-narrow .gw-table td {
  max-width: 150px;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* Optional list columns (always-the-same values) give way first. */
.cc-w-narrow .gw-opt,
.cc-w-tight .gw-opt-tight {
  display: none;
}

/* Step 1: Claims History moves under the New Claim fields. */
.cc-w-narrow .gw-cols--newclaim {
  flex-wrap: wrap;
}

.cc-w-narrow .gw-cols--newclaim > .gw-col + .gw-col {
  flex-basis: 100%;
  padding-left: 0;
  border-left: 0;
  margin-top: 10px;
}

.cc-w-narrow .cc-sum-split {
  grid-template-columns: 1fr;
}

.cc-w-narrow .cc-sum-fin-row {
  gap: 20px;
}

.cc-w-narrow .cc-sum-dl {
  column-gap: 24px;
}

/* Top bar: shorten "Go to". */
.cc-w-narrow .cc-goto {
  width: 140px;
}

.cc-w-tight .cc-infobar {
  gap: 12px;
}

.cc-w-tight .cc-goto {
  display: none;
}

.cc-w-tight .cc-tab-main {
  padding-left: 10px;
}

.cc-w-tight .cc-sum-top {
  grid-template-columns: 1fr 1.2fr 1fr;
}

.cc-app.cc-w-tight {
  --cc-label-w: 136px;
}

/* Vehicle incident: the impact caption goes under the car diagram. */
.cc-w-tight .cc-car {
  flex-direction: column;
  align-items: flex-start;
}

.cc-w-tight .gw-lv-note {
  white-space: normal;
}

/* ---------- Step 1: Claims History ---------- */
.gw-history .gw-lv {
  margin-top: 2px;
}

.gw-lv--history .gw-table td.gw-trunc {
  width: 100%;
  max-width: 0;
}

/* ---------- sidebar Actions menu (opens beside the Actions bar) ---------- */
.cc-actions.is-open,
.cc-actions:hover {
  background: #337eac;
}

.gw-menu--actions {
  max-height: none;
  padding: 0;
  border-color: #b9c0c7;
  box-shadow: 4px 6px 18px rgba(0, 0, 0, 0.22);
}

.gw-amenu {
  display: flex;
}

.gw-amenu-col {
  min-width: 200px;
  padding: 4px 0 6px;
}

.gw-amenu-col + .gw-amenu-col {
  border-left: 1px solid #e3e6ea;
}

.gw-amenu-title {
  padding: 6px 14px 4px;
  color: #6b7480;
  font-size: 11.5px;
  font-weight: 600;
  letter-spacing: 0.4px;
  text-transform: uppercase;
}

.gw-menu--actions .gw-menu-item {
  padding: 0 14px;
}

/* ---------- Search Claims: search panel ---------- */
.gw-searchpanel {
  margin: 0 0 4px;
  padding: 2px 0 0;
}

.gw-searchpanel .gw-cols--form .gw-col {
  flex-basis: 470px;
}

.gw-searchpanel .gw-btnrow {
  margin: 8px 0 12px;
}

/* ---------- Notes list: Info | Details ---------- */
.gw-lv--notes .gw-table td {
  height: auto;
  padding-top: 10px;
  padding-bottom: 12px;
  vertical-align: top;
  white-space: normal;
}

.gw-lv--notes .gw-table tbody tr:hover td {
  background: #fafbfc;
}

.gw-lv--notes th.cc-nt-info,
.gw-lv--notes td.cc-nt-info {
  width: 250px;
}

.cc-nt-dl {
  display: grid;
  grid-template-columns: 78px minmax(0, 1fr);
  gap: 3px 8px;
  margin: 0;
  font-size: 13px;
}

.cc-nt-dl dt {
  color: var(--cc-label);
}

.cc-nt-dl dd {
  margin: 0;
  overflow-wrap: anywhere;
}

.cc-nt-when {
  margin-bottom: 3px;
  font-weight: 700;
}

.cc-nt-subject {
  margin-bottom: 4px;
  color: #333;
  font-weight: 600;
}

.cc-nt-body {
  max-width: 920px;
  line-height: 1.45;
  white-space: pre-wrap;
}

/* ---------- New Note worksheet ---------- */
.gw-cols--note {
  max-width: 1100px;
}

.gw-textarea--note {
  max-width: 900px;
  min-height: 170px;
}

/* ---------- Claim Summary: Latest Notes ---------- */
.cc-lv-more {
  font-size: 13px;
}

.cc-notes-latest .cc-note + .cc-note {
  border-top: 1px solid var(--cc-row-border);
}

.cc-note-meta {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 2px 10px;
}

.cc-note-subject {
  color: var(--cc-text);
  font-size: 13.5px;
  font-weight: 600;
}

.cc-notes-latest .cc-note-text {
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 4;
  overflow: hidden;
}

.cc-lv-parties .gw-table td.gw-trunc {
  max-width: 260px;
}

/* ---------- narrower ClaimCenter area: notes and actions ---------- */
.cc-w-narrow .gw-lv--notes th.cc-nt-info,
.cc-w-narrow .gw-lv--notes td.cc-nt-info {
  width: 210px;
}

.cc-w-narrow .gw-lv--notes .gw-table td {
  max-width: none;
}

.cc-w-tight .gw-lv--notes th.cc-nt-info,
.cc-w-tight .gw-lv--notes td.cc-nt-info {
  width: 176px;
}

.cc-w-tight .cc-nt-dl {
  grid-template-columns: 1fr;
  gap: 0;
}

.cc-w-tight .cc-nt-dl dd {
  margin-bottom: 4px;
}

.cc-w-tight .gw-amenu-col {
  min-width: 176px;
}

/* ---------- simulator additions ---------- */

/* The carrier's name in the top bar. */
.cc-carrier {
  max-width: 260px;
  margin-right: 8px;
  overflow: hidden;
  color: #dfe5ee;
  font-size: 13px;
  white-space: nowrap;
  text-overflow: ellipsis;
}

/* Disclaimer under every page. */
.cc-footer {
  flex: none;
  padding: 3px 24px;
  border-top: 1px solid var(--cc-title-border);
  background: #fafbfc;
  color: #7a8594;
  font-size: 11.5px;
}

/* Required-field and format warnings: the row's label and control turn red. */
.gw-row.is-invalid > .gw-label {
  color: var(--cc-danger);
}

.gw-row.is-invalid .gw-input,
.gw-row.is-invalid .gw-select {
  border-color: var(--cc-danger);
  box-shadow: 0 0 0 1px var(--cc-danger);
}

.gw-row.is-invalid .gw-radios {
  border-radius: 2px;
  outline: 1px solid var(--cc-danger);
  outline-offset: 2px;
}

/* A custom select that does not apply yet (Step 5 Group until "Assign to group"). */
.gw-select.is-disabled {
  border-color: #dde1e5;
  background: #f4f5f7;
  color: #9aa3ab;
  cursor: default;
}

.gw-select.is-disabled .gw-select-caret {
  color: #b7bcc2;
}

/* Message boxes stay until the page changes; the corner button dismisses them. */
.gw-msg-collapse {
  cursor: pointer;
}

.gw-msg--inline {
  animation: none;
}

.cc-login .gw-msg {
  margin: 0 0 14px;
}

/* Step 2: the policy's vehicles, the one on the claim checked. */
.gw-vehicle-row {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  padding: 6px 0;
}

.gw-vehicle-row b {
  font-weight: 600;
}

.gw-vehicle-n {
  min-width: 16px;
  color: #6b7480;
}

.gw-vehicle-row > .cc-ico {
  margin-top: 1px;
  color: var(--cc-ok);
}

.gw-row-wrap {
  max-width: 1100px;
}

/* Keyboard focus on links, sidebar items and the Actions bar. */
.cc-app a:focus-visible,
.cc-actions:focus-visible {
  outline: 2px solid var(--cc-focus-glow);
  outline-offset: -2px;
}

/* Reduced motion (computer-use browsers emulate it): no pulses, fades or sliding bars. */
@media (prefers-reduced-motion: reduce) {
  .cc-app *,
  .cc-app *::before,
  .cc-app *::after {
    animation-duration: 0s !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0s !important;
  }

  .cc-loadbar::before {
    left: 0;
    width: 100%;
  }

  .cc-car-pulse {
    display: none;
  }
}