/*
 * Shared international workspace navigation.
 *
 * This layer follows the shared shell and keeps the mainland workspace
 * untouched.  It applies one compact, cool-dark navigation system to every
 * international surface instead of relying on Dashboard-only overrides.
 */
html[data-market="international"] {
  --cm-shell-width: 248px;
}

html[data-market="international"] .cm-shell-sidebar {
  background: #1b1e2a;
  color: #c7cad6;
  border-right: 1px solid rgba(233, 233, 237, 0.07);
  box-shadow: none;
}

html[data-market="international"] .cm-shell-logo-row,
html[data-market="international"] .cm-shell-footer {
  border-color: rgba(233, 233, 237, 0.07);
}

html[data-market="international"] .cm-shell-logo {
  padding: 21px 18px 18px;
  gap: 11px;
}

html[data-market="international"] .cm-shell-logo-mark,
html[data-market="international"] .cm-shell-avatar {
  background: #5d5294;
  color: #f5f4ff;
}

html[data-market="international"] .cm-shell-logo-mark {
  width: 30px;
  height: 30px;
  border-radius: 9px;
  font-size: 14px;
}

html[data-market="international"] .cm-shell-logo-name {
  color: #f3f4f6;
  font-size: 16px;
  font-weight: 600;
}

html[data-market="international"] .cm-shell-nav {
  padding: 14px;
  gap: 5px;
}

html[data-market="international"] .cm-shell-international-nav {
  gap: 0;
}

html[data-market="international"] .cm-shell-nav-section {
  display: grid;
  gap: 5px;
  padding: 0 0 12px;
}

html[data-market="international"] .cm-shell-nav-section + .cm-shell-nav-section {
  padding-top: 8px;
}

html[data-market="international"] .cm-shell-nav-section-label {
  margin: 0 12px 5px;
  color: #73798a;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.1em;
  line-height: 1.3;
  text-transform: uppercase;
}

html[data-market="international"] .cm-shell-nav-item {
  gap: 12px;
  min-height: 44px;
  padding: 10px 12px;
  border-radius: 8px;
  color: #c7cad6;
  font-size: 14.5px;
  font-weight: 500;
}

html[data-market="international"] .cm-shell-nav-item svg {
  width: 18px;
  height: 18px;
  opacity: 0.82;
}

html[data-market="international"] .cm-shell-nav-item:hover {
  background: rgba(255, 255, 255, 0.04);
  color: #f3f4f6;
}

html[data-market="international"] .cm-shell-nav-item.active {
  background: rgba(181, 171, 252, 0.12);
  box-shadow: none;
  color: #f4f2ff;
}

html[data-market="international"] .cm-shell-nav-item.active svg {
  color: #b5abfc;
  opacity: 1;
}

html[data-market="international"] .cm-shell-nav-item:focus-visible,
html[data-market="international"] .cm-shell-logout:focus-visible {
  outline: 3px solid #b5abfc;
  outline-offset: 2px;
}

html[data-market="international"] .cm-shell-footer {
  padding: 14px;
}

html[data-market="international"] .cm-shell-user {
  gap: 11px;
  padding: 10px 12px;
  margin-bottom: 6px;
}

html[data-market="international"] .cm-shell-avatar {
  width: 30px;
  height: 30px;
  font-size: 13px;
}

html[data-market="international"] .cm-shell-username {
  max-width: 170px;
  color: #f3f4f6;
  font-size: 14px;
  font-weight: 600;
}

html[data-market="international"] .cm-shell-plan {
  color: #9397ab;
  font-size: 12px;
  letter-spacing: 0;
  text-transform: none;
}

html[data-market="international"] .cm-shell-logout {
  min-height: 42px;
  padding: 9px 12px;
  border-color: transparent;
  border-radius: 8px;
  color: #a6abba;
  font-size: 14px;
  font-weight: 500;
}

html[data-market="international"] .cm-shell-logout:hover {
  background: rgba(225, 160, 160, 0.1);
  border-color: transparent;
  color: #e1a0a0;
}

html[data-market="international"] .cm-feedback-button.cm-feedback-sidebar-entry {
  min-height: 44px;
  margin: 0 0 8px;
  padding: 8px 12px;
  border-color: rgba(181, 171, 252, 0.16);
  border-radius: 8px;
  background: rgba(181, 171, 252, 0.09);
  color: #eeecff;
  font-size: 13.5px;
  font-weight: 600;
}

html[data-market="international"] .cm-feedback-button.cm-feedback-sidebar-entry:hover {
  border-color: rgba(181, 171, 252, 0.28);
  background: rgba(181, 171, 252, 0.15);
  color: #fff;
}

@media (max-width: 720px) {
  html[data-market="international"] {
    --cm-shell-width: min(86vw, 320px);
  }

  html[data-market="international"] .cm-shell-sidebar {
    box-shadow: 12px 0 34px rgba(5, 6, 12, 0.45);
  }
}