html, body {
  margin: 0;
  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Oxygen',
    'Ubuntu', 'Cantarell', 'Fira Sans', 'Droid Sans', 'Helvetica Neue',
    sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  background: #FFFFFF !important; /* Default to white to prevent orange */
}

code {
  font-family: source-code-pro, Menlo, Monaco, Consolas, 'Courier New',
    monospace;
}

/* App.css */
:roots {
  --border-color: #ccc;
  --padding-base: 15px;
  --tab-active-color: #007bff;
  --error-bg: #f8d7da;
  --error-color: #721c24;
}

.genchi-app {
  display: flex;
  flex-direction: column;
  height: auto;
  border-bottom: 1px solid var(--border-color);
}

.genchi-app-content {
  display: flex;
  flex: 1 1;
  padding-top: 66px;
  height: auto;
}

.genchi-main-panel {
  flex: 1 1;
  display: flex;
  flex-direction: column;
  position: relative;
  height: auto;
}

.genchi-tab-bar {
  display: flex;
  background: #f0f0f0;
  padding: 0 10px;
  margin: 0 var(--padding-base);
  border: none;
  z-index: 0;
}

.genchi-tab-bar::before,
.genchi-tab-bar::after {
  content: none;
}

.genchi-tab {
  padding: 10px 20px;
  cursor: pointer;
  box-sizing: border-box;
  text-decoration: none;
  outline: none;
  border: none;
}

.genchi-tab.active {
  color: var(--tab-active-color);
  border-bottom: 2px solid var(--tab-active-color);
  box-sizing: border-box;
  text-decoration: none;
  outline: none;
  border-top: none;
  border-left: none;
  border-right: none;
}

.genchi-main-panel-content {
  flex: 1 1;
  overflow-y: visible;
  height: auto;
  padding: 0 var(--padding-base);
  position: relative;
  z-index: 0;
}

.genchi-right-panel {
  width: 30%;
  display: flex;
  flex-direction: column;
  border: var(--padding-base) solid white;
  overflow-y: auto;
  height: 100%;
  margin-top: calc(-1 * var(--padding-base));
}

.genchi-comment-feed-panel {
  flex: 1 1;
  overflow-y: auto;
}

.genchi-error-message {
  position: fixed;
  top: 70px;
  left: 50%;
  transform: translateX(-50%);
  background: var(--error-bg);
  color: var(--error-color);
  padding: 10px 20px;
  border-radius: 4px;
  z-index: 200;
}

/* Mobile responsiveness */
@media (max-width: 768px) {
  .genchi-app-content {
    flex-direction: column;
  }
  .genchi-right-panel {
    width: 100%;
    border-width: 0 var(--padding-base);
    margin-top: 0;
  }
}
/* LoginPage.css */
html, body, #root {
  height: 100%;
  margin: 0;
  padding: 0;
  background-color: #f8f9fa;
  }
  .login-container {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-start;
  min-height: 100vh;
  padding: 20px;
  background-color: #f8f9fa;
  font-family: 'Helvetica-reg', sans-serif;
  padding-top: 10vh;
    }
  .login-header {
  text-align: center;
    }
  .login-logo {
  height: 50px;
  margin-bottom: 5px;
    }
  .login-header h1 {
  font-size: 2rem;
  font-weight: 300;
  color: #23254c;
  margin-bottom: 10px;
    }
  .login-header p {
  font-size: 1rem;
  color: #77788f;
    }
  .login-form-container {
  background: white;
  padding: 40px;
  border-radius: 12px;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1);
  width: 100%;
  max-width: 400px;
    }
  .input-group {
  margin-bottom: 5px;
    }
  .input-group label {
  display: block;
  font-size: 1rem;
  color: #23254c;
  margin-bottom: 8px;
  font-weight: 500;
    }
  .input-field {
  width: 100%;
  padding: 12px 16px;
  border: 1px solid #ddd;
  border-radius: 8px;
  font-size: 1rem;
  outline: none;
  transition: border-color 0.3s ease;
    }
  .input-field:focus {
  border-color: #2d9be4;
    }
  .input-invalid {
  border-color: #dc3545;
    }
  .validation-message {
  color: #dc3545;
  font-size: 0.875rem;
  margin-top: 4px;
    }
  .password-wrapper {
  position: relative;
    }
  .show-password-toggle {
  position: absolute;
  right: 16px;
  top: 50%;
  transform: translateY(-50%);
  background: none;
  border: none;
  color: #2d9be4;
  cursor: pointer;
  font-size: 0.875rem;
  padding: 0;
    }
  .forgot-password {
  display: block;
  text-align: right;
  font-size: 0.875rem;
  color: #2d9be4;
  text-decoration: none;
  margin-top: 8px;
    }
  .forgot-password:hover {
  text-decoration: underline;
    }
  .button-primary {
  width: 100%;
  padding: 12px;
  background: linear-gradient(135deg, #36d1dc, #5b86e5);
  color: white;
  border: none;
  border-radius: 8px;
  font-size: 1rem;
  font-weight: 500;
  cursor: pointer;
  transition: all 0.3s ease;
    }
  .button-primary:hover {
  transform: translateY(-2px);
  box-shadow: 0 5px 15px rgba(91, 134, 229, 0.3);
    }
  .divider {
  text-align: center;
  margin: 5px 0;
  color: #77788f;
  position: relative;
    }
  .divider::before,
  .divider::after {
  content: '';
  position: absolute;
  top: 50%;
  width: 45%;
  height: 1px;
  background: #ddd;
    }
  .divider::before {
  left: 0;
    }
  .divider::after {
  right: 0;
    }
  .button-oauth {
  width: 100%;
  padding: 12px;
  border: 1px solid #ddd;
  border-radius: 8px;
  font-size: 1rem;
  cursor: pointer;
  margin-bottom: 5px;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all 0.3s ease;
  color: #23254c;
    }
  .button-oauth:hover {
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
    }
  .button-oauth.google {
  background: white;
    }
  .button-oauth.atlassian {
  background: white;
    }
  .oauth-logo {
  height: 20px;
  margin-right: 10px;
    }
  .signup-prompt {
  text-align: center;
  font-size: 1rem;
  color: #77788f;
  margin-top: 10px;
    }
  .signup-link {
  color: #2d9be4;
  text-decoration: underline;
  font-weight: bold;
  font-size: 1.125rem; /* Larger font size */
  cursor: pointer;
    }
  .signup-link:hover {
  text-decoration: none;
    }
  .message {
  text-align: center;
  color: #dc3545;
  font-size: 0.875rem;
  margin-top: 20px;
    }
  .back-to-home {
  margin-top: 20px;
  background: none;
  border: none;
  color: #2d9be4;
  font-size: 0.875rem;
  cursor: pointer;
  text-decoration: underline;
    }
  .back-to-home:hover {
  color: #1a7bb9;
    }
  @media (max-width: 768px) {
  .login-form-container {
  padding: 30px;
      }
    }

/* CreateAccountPage.css */
html, body, #root {
  height: 100%;
  margin: 0;
  padding: 0;
  background-color: #f8f9fa;
    }
  .signup-container {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-start;
  min-height: 100vh;
  padding: 20px;
  background-color: #f8f9fa;
  font-family: 'Helvetica-reg', sans-serif;
  padding-top: 10vh;
    }
  .signup-header {
  text-align: center;
  margin-bottom: 0;
    }
  .signup-logo {
  height: 50px;
  margin-bottom: 5px;
    }
  .signup-header h1 {
  font-size: 2rem;
  font-weight: 300;
  color: #23254c;
  margin-bottom: 10px;
    }
  .signup-header p {
  font-size: 1rem;
  color: #77788f;
    }
  .create-account-signup-form-container {
  background: white;
  padding: 30px;
  border-radius: 12px;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1);
  width: 100%;
  max-width: 450px;
  display: flex;
  flex-direction: column;
  gap: 3px;
    }
  .create-account-input-group {
  display: flex;
  flex-direction: column;
  gap: 2px;
    }
  .create-account-input-group label {
  display: block;
  font-size: 1rem;
  color: #23254c;
  font-weight: 500;
    }
  .input-field {
  width: 100%;
  padding: 12px 16px;
  border: 1px solid #ddd;
  border-radius: 8px;
  font-size: 1rem;
  outline: none;
  transition: border-color 0.3s ease;
    }
  .input-field:focus {
  border-color: #2d9be4;
    }
  .input-invalid {
  border-color: #dc3545;
    }
  .validation-message {
  color: #dc3545;
  font-size: 0.875rem;
  margin-top: 4px;
    }
  .validation-icon {
  font-size: 1.125rem;
  margin-left: 8px;
    }
  .validation-icon.valid {
  color: #28a745;
    }
  .validation-icon.invalid {
  color: #dc3545;
    }
  .password-wrapper {
  position: relative;
    }
  .show-password-toggle {
  position: absolute;
  right: 16px;
  top: 50%;
  transform: translateY(-50%);
  background: none;
  border: none;
  color: #2d9be4;
  cursor: pointer;
  font-size: 0.875rem;
  padding: 0;
    }
  .company-note {
  font-size: 0.875rem;
  color: #77788f;
  margin: 0;
    }
  .create-account-agreement-group {
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin-bottom: 10px;
  margin-left: 0;
    }
  .create-account-agreement-item {
  display: flex;
  align-items: center;
  gap: 4px;
  justify-content: flex-start;
  white-space: nowrap;
  max-width: 100%;
    }
  .create-account-agreement-item label {
  font-size: 0.875rem;
  color: #23254c;
  margin: 0;
  min-width: 250px;
    }
  .create-account-agreement-item input {
  margin: 0;
    }
  .agreement-link {
  color: #2d9be4;
  text-decoration: underline;
  font-weight: bold;
  font-size: 1rem;
  cursor: pointer;
  margin-left: 4px;
    }
  .agreement-link:hover {
  text-decoration: none;
    }
  .hint-and-validation {
  display: flex;
  align-items: center;
  margin-top: 4px;
  justify-content: center;
    }
  .password-hint {
  font-size: 0.875rem;
  color: #77788f;
  margin: 0;
  font-weight: bold;
  font-style: italic;
    }
  .button-primary {
  width: 100%;
  padding: 12px;
  background: linear-gradient(135deg, #36d1dc, #5b86e5);
  color: white;
  border: none;
  border-radius: 8px;
  font-size: 1rem;
  font-weight: 500;
  cursor: pointer;
  transition: all 0.3s ease;
    }
  .button-primary:hover {
  transform: translateY(-2px);
  box-shadow: 0 5px 15px rgba(91, 134, 229, 0.3);
    }
  .button-secondary {
  width: 100%;
  padding: 12px;
  background: #f8f9fa;
  color: #23254c;
  border: 1px solid #ddd;
  border-radius: 8px;
  font-size: 1rem;
  font-weight: 500;
  cursor: pointer;
  transition: all 0.3s ease;
  margin-top: 3px;
    }
  .button-secondary:hover {
  background: #e9ecef;
    }
  .message {
  text-align: center;
  color: #dc3545;
  font-size: 0.875rem;
  margin-top: 20px;
    }
  .emphasized-message {
  font-weight: bold;
  font-style: italic;
    }
  .back-to-home {
  margin-top: 20px;
  background: none;
  border: none;
  color: #2d9be4;
  font-size: 0.875rem;
  cursor: pointer;
  text-decoration: underline;
    }
  .back-to-home:hover {
  color: #1a7bb9;
    }
  @media (max-width: 768px) {
  .create-account-signup-form-container {
  padding: 20px;
      }
  .create-account-agreement-item label {
  font-size: 0.8rem;
      }
    }
  .create-account-modal-overlay {
  position: fixed;
  top: 0;
  left: 0;
  width: 100vw;
  height: 100vh;
  background: rgba(0,0,0,0.5);
  z-index: 1000;
  display: flex;
  align-items: center;
  justify-content: center;
  }
  .create-account-modal-container {
  max-height: 80%;
  overflow: auto;
  background: white;
  padding: 20px;
  border-radius: 8px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  }
  .create-account-modal-container button {
  align-self: center;
  }
  .create-account-modal-container iframe {
  width: 100%;
  }
  .button-oauth.atlassian {
  margin-top: 3px;
  }

/* InviteCompletePage.css */
/* Unchanged from previous, as fixes are in JSX (e.g., no new CSS needed for disabled inputs) */

html, body, #root {
  height: 100%;
  margin: 0;
  padding: 0;
  background-color: #f8f9fa;
}

.signup-container {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-start;
  min-height: 100vh;
  padding: 20px;
  background-color: #f8f9fa;
  font-family: 'Helvetica-reg', sans-serif;
  padding-top: 10vh;
}

.signup-header {
  text-align: center;
  margin-bottom: 0;
}

.signup-logo {
  height: 50px;
  margin-bottom: 5px;
}

.signup-header h1 {
  font-size: 2rem;
  font-weight: 300;
  color: #23254c;
  margin-bottom: 10px;
}

.signup-header p {
  font-size: 1rem;
  color: #77788f;
}

.create-account-signup-form-container {
  background: white;
  padding: 30px;
  border-radius: 12px;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1);
  width: 100%;
  max-width: 450px;
  display: flex;
  flex-direction: column;
  gap: 3px;
}

.step-indicator {
  font-family: system-ui, -apple-system, BlinkMacSystemFont, sans-serif;
  font-size: 14px;
  color: #77788F;
  position: absolute;
  top: 10px;
  right: 10px;
}

.create-account-input-group {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.create-account-input-group label {
  display: block;
  font-size: 1rem;
  color: #23254c;
  font-weight: 500;
}

.input-field {
  width: 100%;
  padding: 12px 16px;
  border: 1px solid #ddd;
  border-radius: 8px;
  font-size: 1rem;
  outline: none;
  transition: border-color 0.3s ease;
}

.input-field:focus {
  border-color: #2d9be4;
}

.input-invalid {
  border-color: #dc3545;
}

.validation-message {
  color: #dc3545;
  font-size: 0.875rem;
  margin-top: 4px;
}

.validation-icon {
  font-size: 1.125rem;
  margin-left: 8px;
}

.validation-icon.valid {
  color: #28a745;
}

.validation-icon.invalid {
  color: #dc3545;
}

.password-wrapper {
  position: relative;
}

.show-password-toggle {
  position: absolute;
  right: 16px;
  top: 50%;
  transform: translateY(-50%);
  background: none;
  border: none;
  color: #2d9be4;
  cursor: pointer;
  font-size: 0.875rem;
  padding: 0;
}

.company-note {
  font-size: 0.875rem;
  color: #77788f;
  margin: 0;
  font-weight: bold;
  font-style: italic;
}

.hint-and-validation {
  display: flex;
  align-items: center;
  margin-top: 4px;
  justify-content: center;
}

.password-hint {
  font-size: 0.875rem;
  color: #77788f;
  margin: 0;
  font-weight: bold;
  font-style: italic;
}

.button-primary {
  width: 100%;
  padding: 12px;
  background: linear-gradient(135deg, #36d1dc, #5b86e5);
  color: white;
  border: none;
  border-radius: 8px;
  font-size: 1rem;
  font-weight: 500;
  cursor: pointer;
  transition: all 0.3s ease;
}

.button-primary:hover {
  transform: translateY(-2px);
  box-shadow: 0 5px 15px rgba(91, 134, 229, 0.3);
}

.button-secondary {
  width: 100%;
  padding: 12px;
  background: #f8f9fa;
  color: #23254c;
  border: 1px solid #ddd;
  border-radius: 8px;
  font-size: 1rem;
  font-weight: 500;
  cursor: pointer;
  transition: all 0.3s ease;
  margin-top: 3px;
}

.button-secondary:hover {
  background: #e9ecef;
}

.message {
  text-align: center;
  color: #dc3545;
  font-size: 0.875rem;
  margin-top: 20px;
}

.emphasized-message {
  font-weight: bold;
  font-style: italic;
}

.error {
  font-family: system-ui, -apple-system, BlinkMacSystemFont, sans-serif;
  font-size: 17px;
  color: #77788F;
  line-height: 27px;
  margin: 10px 0;
}

@media (max-width: 768px) {
  .create-account-signup-form-container {
    padding: 20px;
  }
}

html, body, #root {
  height: 100%;
  margin: 0;
  padding: 0;
  background-color: #f8f9fa;
}
.forgot-container {
  display: flex;
flex-direction: column;
align-items: center;
justify-content: flex-start;
min-height: 100vh;
padding: 20px;
background-color: #f8f9fa;
font-family: 'Helvetica-reg', sans-serif;
padding-top: 10vh;
}
.forgot-header {
text-align: center;
margin-bottom: 0;
}
.forgot-logo {
height: 50px;
margin-bottom: 10px;
}
.forgot-header h1 {
font-size: 2rem;
font-weight: 300;
color: #23254c;
margin-bottom: 10px;
}
.forgot-header p {
font-size: 1rem;
color: #77788f;
}
.forgot-form-container {
background: white;
padding: 40px;
border-radius: 12px;
box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1);
width: 100%;
max-width: 400px;
display: flex;
flex-direction: column;
gap: 10px;
}
.input-group {
display: flex;
flex-direction: column;
gap: 8px;
}
.input-group label {
display: block;
font-size: 1rem;
color: #23254c;
font-weight: 500;
}
.input-field {
width: 100%;
padding: 12px 16px;
border: 1px solid #ddd;
border-radius: 8px;
font-size: 1rem;
outline: none;
transition: border-color 0.3s ease;
}
.input-field:focus {
border-color: #2d9be4;
}
.input-invalid {
border-color: #dc3545;
}
.validation-message {
color: #dc3545;
font-size: 0.875rem;
margin-top: 4px;
}
.button-primary {
width: 100%;
padding: 12px;
background: linear-gradient(135deg, #36d1dc, #5b86e5);
color: white;
border: none;
border-radius: 8px;
font-size: 1rem;
font-weight: 500;
cursor: pointer;
transition: all 0.3s ease;
}
.button-primary:hover {
transform: translateY(-2px);
box-shadow: 0 5px 15px rgba(91, 134, 229, 0.3);
}
.button-secondary {
width: 100%;
padding: 12px;
background: #f8f9fa;
color: #23254c;
border: 1px solid #ddd;
border-radius: 8px;
font-size: 1rem;
font-weight: 500;
cursor: pointer;
transition: all 0.3s ease;
}
.button-secondary:hover {
background: #e9ecef;
}
.message {
text-align: center;
color: #23254c; /* Neutral for success/generic */
font-size: 0.875rem;
margin-top: 20px;
}
.back-to-home {
margin-top: 20px;
background: none;
border: none;
color: #2d9be4;
font-size: 0.875rem;
cursor: pointer;
text-decoration: underline;
}
.back-to-home:hover {
color: #1a7bb9;
}
@media (max-width: 768px) {
.forgot-form-container {
padding: 30px;
  }
}
html, body, #root {
  height: 100%;
  margin: 0;
  padding: 0;
  background-color: #f8f9fa;
}
.reset-container {
  display: flex;
flex-direction: column;
align-items: center;
justify-content: flex-start;
min-height: 100vh;
padding: 20px;
background-color: #f8f9fa;
font-family: 'Helvetica-reg', sans-serif;
padding-top: 10vh;
}
.reset-header {
text-align: center;
margin-bottom: 0;
}
.reset-logo {
height: 50px;
margin-bottom: 10px;
}
.reset-header h1 {
font-size: 2rem;
font-weight: 300;
color: #23254c;
margin-bottom: 10px;
}
.reset-header p {
font-size: 1rem;
color: #77788f;
}
.reset-form-container {
background: white;
padding: 40px;
border-radius: 12px;
box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1);
width: 100%;
max-width: 400px;
display: flex;
flex-direction: column;
gap: 10px;
}
.input-group {
display: flex;
flex-direction: column;
gap: 8px;
}
.input-group label {
display: block;
font-size: 1rem;
color: #23254c;
font-weight: 500;
}
.input-field {
width: 100%;
padding: 12px 16px;
border: 1px solid #ddd;
border-radius: 8px;
font-size: 1rem;
outline: none;
transition: border-color 0.3s ease;
}
.input-field:focus {
border-color: #2d9be4;
}
.input-invalid {
border-color: #dc3545;
}
.validation-message {
color: #dc3545;
font-size: 0.875rem;
margin-top: 4px;
}
.password-wrapper {
position: relative;
}
.show-password-toggle {
position: absolute;
right: 16px;
top: 50%;
transform: translateY(-50%);
background: none;
border: none;
color: #2d9be4;
cursor: pointer;
font-size: 0.875rem;
padding: 0;
}
.button-primary {
width: 100%;
padding: 12px;
background: linear-gradient(135deg, #36d1dc, #5b86e5);
color: white;
border: none;
border-radius: 8px;
font-size: 1rem;
font-weight: 500;
cursor: pointer;
transition: all 0.3s ease;
}
.button-primary:hover {
transform: translateY(-2px);
box-shadow: 0 5px 15px rgba(91, 134, 229, 0.3);
}
.message {
text-align: center;
color: #23254c;
font-size: 0.875rem;
margin-top: 20px;
}
.back-to-home {
margin-top: 20px;
background: none;
border: none;
color: #2d9be4;
font-size: 0.875rem;
cursor: pointer;
text-decoration: underline;
}
.back-to-home:hover {
color: #1a7bb9;
}
@media (max-width: 768px) {
.reset-form-container {
padding: 30px;
  }
}

/* MainLayout.css */
:root {
  --padding-base: 15px;
  --tab-padding: 10px 20px;
  --tab-bg: #f0f0f0;
  --tab-active-color: #007bff;
  --border-color: #ccc;
  --error-bg: #f8d7da;
  --error-color: #721c24;
}

.genchi-app {
  display: flex;
  flex-direction: column;
  height: 100vh;
  border-bottom: 1px solid #ccc;
  border-bottom: 1px solid var(--border-color);
}

.genchi-app-content {
  display: flex;
  flex: 1 1;
  padding-top: 66px;
  height: calc(100vh - 66px);
}

.genchi-main-panel {
  flex: 1 1;
  display: flex;
  flex-direction: column;
  position: relative;
  min-width: 0;
}

.genchi-tab-bar {
  display: flex;
  background: #f0f0f0;
  background: var(--tab-bg);
  padding: 0 10px;
  margin: 0 15px;
  margin: 0 var(--padding-base);
  border: none;
  z-index: 0;
}

.genchi-tab-bar::before,
.genchi-tab-bar::after {
  content: none;
}

.genchi-tab {
  padding: 10px 20px;
  padding: var(--tab-padding);
  cursor: pointer;
  box-sizing: border-box;
  text-decoration: none;
  outline: none;
  border: none;
}

.genchi-tab.active {
  color: #007bff;
  color: var(--tab-active-color);
  border-bottom: 2px solid #007bff;
  border-bottom: 2px solid var(--tab-active-color);
  box-sizing: border-box;
  text-decoration: none;
  outline: none;
  border-top: none;
  border-left: none;
  border-right: none;
}

.genchi-main-panel-content {
  flex: 1 1;
  position: relative;
  z-index: 0;
  display: flex;
  flex-direction: column;
  padding: 0 15px;
  padding: 0 var(--padding-base);
}

.initiatives-container {
  flex: 1 1;
  overflow-y: auto;
  height: 80vh;
  min-width: 0;
}

.genchi-right-panel {
  width: 30%;
  display: flex;
  flex-direction: column;
  border: 15px solid white;
  border: var(--padding-base) solid white;
  min-width: 0;
}

.comment-feed-container {
  flex: 1 1;
  overflow-y: auto;
  min-width: 0;
}

.genchi-error-message {
  position: fixed;
  top: 70px;
  left: 50%;
  transform: translateX(-50%);
  background: #f8d7da;
  background: var(--error-bg);
  color: #721c24;
  color: var(--error-color);
  padding: 10px 20px;
  border-radius: 4px;
  z-index: 200;
}

/* Mobile responsiveness */
@media (max-width: 768px) {
  .genchi-app-content {
    flex-direction: column;
  }
  .genchi-right-panel {
    width: 100%;
    border-width: 0 15px;
    border-width: 0 var(--padding-base);
  }
  .initiatives-container {
    height: auto;
  }
}

/* AdminTab.css - Added smallest/second-smallest decals to top-right/bottom-left (smallest 50w/100h #2D9BE4 full opacity, second 70w/140h #2D9BE4 0.2 opacity, adjusted clip-paths/positions); preserved all. */
.admin-users {
  margin: 20px;
}
.admin-initiatives {
  margin: 20px;
}
.admin-company {
  margin: 20px;
}
.admin-heading {
  font-family: -apple-system, BlinkMacSystemFont, sans-serif;
  font-size: 24px;
  color: #23254C;
  text-align: center;
  margin: 10px 0;
}
.input-heading {
  width: 600px;
  text-align: center;
  margin: 0 0 5px 10px;
  font-family: -apple-system, BlinkMacSystemFont, sans-serif;
  font-size: 18px;
  color: #23254C;
}
.admin-back-link {
  font-family: -apple-system, BlinkMacSystemFont, sans-serif;
  font-size: 17px;
  color: #007BFF;
  text-decoration: none;
}
.admin-back-link:hover {
  text-decoration: underline;
}
.data-table {
  width: 100%;
  border-collapse: collapse;
  border-spacing: 0;
  font-family: -apple-system, BlinkMacSystemFont, sans-serif;
}
.data-table th,
.data-table td {
  padding: 2px;
  text-align: left;
  vertical-align: middle;
}
.data-table th {
  background: #F0F8FF;
  font-weight: bold;
  font-size: 14px;
  color: #23254C;
}
.admin-users .data-table tbody tr td {
  border-bottom: 1px solid #CED4DA !important;
  padding: 2px;
}
.admin-users .data-table tbody tr:last-child td {
  border-bottom: none !important;
}
.admin-user-row td {
  padding: 2px;
  text-align: left;
  vertical-align: middle;
}
.admin-initiatives .data-table tbody tr td {
  border-bottom: 1px solid #CED4DA !important;
  padding: 2px;
}
.admin-initiatives .data-table tbody tr:last-child td {
  border-bottom: none !important;
}
.admin-initiative-row td {
  padding: 2px;
  text-align: left;
  vertical-align: middle;
}
.different-domain {
  color: #000080; /* Navy ink for users with different email domains */
}
.user-avatar {
  width: 25px;
  height: 25px;
  border-radius: 50%;
  overflow: hidden;
  display: inline-block;
}
.status-indicator {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  display: inline-block;
}
.avatar-image {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.avatar-placeholder {
  width: 100%;
  height: 100%;
  background: #E0E0E0;
}
.admin-edit-button, .admin-reset-button {
  padding: 2px 12px;
  font-family: -apple-system, BlinkMacSystemFont, sans-serif;
  font-size: 14px;
  border: none;
  border-radius: 6px;
  cursor: pointer;
}
.admin-edit-button {
  background: #2D9BE4;
  color: #FFFFFF;
}
.admin-edit-button:hover {
  background: #1B82C9;
}
.admin-reset-button {
  background: #F5F5F5;
  color: #77788F;
}
.admin-reset-button:hover {
  background: #E0E0E0;
}
.admin-delete-button {
  background: none;
  border: none;
  color: #FF0000;
  cursor: pointer;
  font-size: 16px;
}
.admin-button-container {
  display: flex;
  gap: 10px;
  margin-top: 20px;
  justify-content: center;
}
.admin-action-button {
  padding: 10px 20px;
  font-family: -apple-system, BlinkMacSystemFont, sans-serif;
  font-size: 14px;
  font-weight: bold;
  border: 1px solid #2D9BE4;
  border-radius: 19px;
  cursor: pointer;
  background: #2D9BE4;
  color: #FFFFFF;
}
.admin-action-button:hover {
  background: #1B82C9;
}
.admin-action-button-wide {
  padding: 10px 25px;
  font-family: -apple-system, BlinkMacSystemFont, sans-serif;
  font-size: 14px;
  font-weight: bold;
  border: 1px solid #2D9BE4;
  border-radius: 19px;
  cursor: pointer;
  background: #2D9BE4;
  color: #FFFFFF;
}
.admin-action-button-wide:hover {
  background: #1B82C9;
}
.admin-action-button-cancel {
  background: #F5F5F5;
  color: #77788F;
  border: 1px solid #77788F;
}
.admin-action-button-cancel:hover {
  background: #E0E0E0;
}
.admin-action-button-delete {
  background: #F5F5F5;
  color: #FF0000;
  border: 1px solid #77788F;
}
.admin-action-button-delete:hover {
  background: #E0E0E0;
}
.confirm-modal-overlay {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: rgba(0, 0, 0, 0.5);
  display: flex;
  justify-content: center;
  align-items: center;
  z-index: 1000;
}
.confirm-modal {
  background: #fff;
  padding: 20px;
  border-radius: 12px;
  text-align: center;
  max-width: 400px;
  width: 90%;
}
.confirm-modal p {
  font-family: -apple-system, BlinkMacSystemFont, sans-serif;
  font-size: 16px;
  color: #23254C;
  margin-bottom: 20px;
}
.confirm-modal-buttons {
  display: flex;
  justify-content: center;
  gap: 10px;
}
.confirm-modal-button {
  padding: 10px 20px;
  font-family: -apple-system, BlinkMacSystemFont, sans-serif;
  font-size: 14px;
  border: none;
  border-radius: 19px;
  cursor: pointer;
}
.confirm-modal-button-confirm {
  background: #2D9BE4;
  color: #FFFFFF;
}
.confirm-modal-button-confirm:hover {
  background: #1B82C9;
}
.confirm-modal-button-cancel {
  background: #F5F5F5;
  color: #77788F;
}
.confirm-modal-button-cancel:hover {
  background: #E0E0E0;
}
/* Card styles for Admin tab */
.admin-card {
  width: 125px;
  height: 80px;
  background: #F0F8FF;
  border: 3px solid #007BFF;
  border-radius: 12px;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  color: #23254C;
  font-size: 21px;
  font-family: -apple-system, BlinkMacSystemFont, sans-serif;
  transition: transform 0.2s, box-shadow 0.2s;
}
.admin-card:hover {
  transform: scale(1.05);
  box-shadow: 0 4px 8px rgba(0,0,0,0.2);
}
.admin-card-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, 125px);
  grid-gap: 25px;
  gap: 25px;
  padding: 30px 40px 20px;
}
/* Container for AdminUsers DataTable */
.admin-users-table-container {
  position: relative;
  height: 50vh;
  overflow: auto;
}
/* Container for AdminInitiatives DataTable */
.admin-initiatives-table-container {
  position: relative;
  height: 50vh;
  width: -webkit-fit-content;
  width: fit-content;
  min-width: 100%;
  overflow-x: auto;
  overflow-y: auto;
}
/* Styles for Add Initiative container */
.add-initiative-container {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  width: 100%;
  margin-bottom: 10px;
}
.add-initiative-form {
  display: flex;
  flex-direction: column;
}
.total-initiatives {
  font-family: -apple-system, BlinkMacSystemFont, sans-serif;
  font-size: 18px;
  color: #23254C;
  margin: 5px 10px 0 0;
  align-self: center;
}
/* Styles for User Management container */
.user-management-container {
  display: flex;
  justify-content: space-between;
  align-items: center;
  width: 100%;
  margin-bottom: 10px;
}
.total-users {
  font-family: -apple-system, BlinkMacSystemFont, sans-serif;
  font-size: 18px;
  color: #23254C;
  margin: 5px 10px 0 0;
  align-self: center;
}
/* Simplified payment modal */
.payment-modal-overlay {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0.5);
  display: flex;
  justify-content: center;
  align-items: flex-start;
  padding-top: 20vh; /* Higher position, below h1 */
  z-index: 1001;
}
.payment-modal {
  position: relative;
  background: #FFFFFF;
  box-shadow: 0 20px 40px 0 rgba(0,0,0,0.05);
  border-radius: 16px;
  padding: 20px;
  width: 400px;
  height: auto;
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
  align-items: center;
}
.payment-modal-title {
  font-family: -apple-system, BlinkMacSystemFont, sans-serif;
  font-size: 18px;
  color: #23254C;
  margin-bottom: 15px;
  text-align: center;
  width: auto; /* Ensure no fixed width */
}
.payment-modal-content {
  display: flex;
  flex-direction: column;
  width: 100%;
  max-width: 315px;
  gap: 15px;
}
.payment-modal-close {
  position: absolute;
  top: 10px;
  right: 10px;
  background: none;
  border: none;
  font-size: 24px;
  cursor: pointer;
  color: #6c757d;
}
/* Payment modal bottom-left decal - Smallest */
.payment-modal::before {
  content: '';
  position: absolute;
  bottom: 0;
  left: 0;
  width: 50px;
  height: 100px;
  background: #2D9BE4;
  z-index: -1;
  -webkit-clip-path: path('M 0 100 H 50 C 40 70 20 30 0 0 Z');
          clip-path: path('M 0 100 H 50 C 40 70 20 30 0 0 Z');
}
/* Payment modal bottom-left decal - Second smallest (middle) */
.payment-modal-bottom-left-second-smallest::before {
  content: '';
  position: absolute;
  bottom: 0;
  left: 0;
  width: 70px;
  height: 200px;
  background: #2D9BE4;
  opacity: 0.2;
  z-index: -1;
  -webkit-clip-path: path('M 0 200 H 70 C 60 140 35 70 0 0 Z');
          clip-path: path('M 0 200 H 70 C 60 140 35 70 0 0 Z');
}
/* Payment modal top-right decal - Smallest */
.payment-modal::after {
  content: '';
  position: absolute;
  top: 0;
  right: 0;
  width: 50px;
  height: 100px;
  background: #2D9BE4;
  z-index: -1;
  -webkit-clip-path: path('M 50 0 H 0 C 10 30 30 70 50 100 Z');
          clip-path: path('M 50 0 H 0 C 10 30 30 70 50 100 Z');
}
/* Payment modal top-right decal - Second smallest (middle) */
.payment-modal-top-right-second-smallest::after {
  content: '';
  position: absolute;
  top: 0;
  right: 0;
  width: 70px;
  height: 200px;
  background: #2D9BE4;
  opacity: 0.2;
  z-index: -1;
  -webkit-clip-path: path('M 70 0 H 0 C 10 60 35 130 70 200 Z');
          clip-path: path('M 70 0 H 0 C 10 60 35 130 70 200 Z');
}
/* Scoped styles for AdminCompany (duplicated and prefixed from CreateInitiativeModal.css) */
.admin-company-create-form-container {
  display: flex;
  flex-direction: column;
  width: 100%;
  max-width: none;
  overflow-x: hidden;
  gap: 15px !important;
  margin-top: 15px;
}
.admin-company-create-form-container > h3 {
  margin-bottom: 0;
}
.admin-company-create-form-row {
  display: flex;
  gap: 2px;
  align-items: baseline;
}
.admin-company-create-form-row:last-child {
  align-items: baseline;
}
.admin-company-create-form-label {
  display: block;
  font-family: -apple-system, BlinkMacSystemFont, sans-serif;
  font-size: 14pt;
  color: #000000;
  text-align: left;
  width: 160px;
  padding-left: 4ch;
  vertical-align: middle;
  white-space: nowrap;
  overflow-wrap: break-word; /* Prevent overflow */
  font-weight: normal;
}
.admin-company-create-label-number {
  padding-right: 1px;
  font-weight: bold;
}
.admin-company-create-form-field {
  display: block;
  padding: 0;
  margin: 0;
  max-width: none;
  overflow-wrap: break-word; /* Prevent overflow */
  font-family: -apple-system, BlinkMacSystemFont, sans-serif;
  font-size: 14pt;
  color: #77788F;
  border: none;
  border-radius: 4px;
  box-sizing: border-box;
  padding: 4px 8px;
  overflow: hidden;
  text-align: left;
  line-height: 20px;
  text-indent: 0px;
  overflow-wrap: break-word; /* Prevent overflow */
  background-color: #FFFFFF;
}
.admin-company-create-initiative-name-field {
  border: 1px solid rgba(119,120,143,0.16);
  max-width: none;
  padding: 4px 8px;
  height: 28px;
}
.admin-company-create-centered-subheading {
  text-align: center;
  font-weight: bold;
  margin-top: 15px;
  margin-bottom: 10px;
}
/* InitiativesTab.css */
/* Timeline-specific styles have been extracted to InitiativeTimelineDisplay.css (Phase 1.4).
 * This file now contains only card/grid/modal/lozenge styles shared across
 * InitiativesTab, InitiativeTreeDisplay, and related components.
 */
 
 :root {
   --card-width: 7.5rem; /* 120px */
   --card-height: 4.6875rem; /* 75px */
   --font-family: -apple-system, BlinkMacSystemFont, sans-serif;
   --text-color: #000000;
   --hover-color: #2D9BE4;
   --lozenge-bg: lightblue;
   --lozenge-color: #000;
   --grid-gap: 1.875rem 2.5rem; /* 30px 40px */
   --zoom-color: #2D9BE4;
   --header-padding: 10px;
   --header-margin: 10px;
 }
 
 .initiative-text {
   font-family: -apple-system, BlinkMacSystemFont, sans-serif;
   font-family: var(--font-family);
   color: #000000;
   color: var(--text-color);
 }
 
 .initiatives-tab {
   position: relative;
   height: 100%;
   overflow: hidden;
 }
 
 .initiatives-header {
   display: flex;
   justify-content: space-between;
   align-items: center;
   width: 100%;
   margin-bottom: 10px;
   margin-bottom: var(--header-margin);
   padding: 10px;
   padding: var(--header-padding);
 }
 
 .header-left,
 .header-right {
   display: flex;
   align-items: center;
 }
 
 .admin-back-link,
 .zoom-button {
   background: none;
   border: none;
   padding: 0;
   font: inherit;
   cursor: pointer;
   color: #2D9BE4;
   color: var(--zoom-color);
   font-weight: bold;
 }
 
 .zoom-in,
 .zoom-out {
   padding: 0 5px 0 0;
 }
 
 .initiative-tree.default-mode {
   display: grid;
   grid-template-columns: repeat(auto-fit, 7.5rem);
   grid-template-columns: repeat(auto-fit, var(--card-width));
   grid-gap: 1.875rem 2.5rem;
   grid-gap: var(--grid-gap);
   justify-content: center;
   width: 100%;
 }
 
 .initiative-tree.tree-mode {
   position: relative;
   width: 100%;
   height: calc(100% - 60px);
   overflow: auto;
 }
 
 .initiative-card-wrapper {
   position: relative;
   margin: 0;
   padding: 0;
 }
 
 .initiative-card {
   width: 7.5rem;
   width: var(--card-width);
   height: 4.6875rem;
   height: var(--card-height);
   border-radius: 0.5rem; /* 8px */
   padding: 0.625rem; /* 10px */
   text-align: center;
   cursor: pointer;
   transition: transform 0.2s, box-shadow 0.2s;
   z-index: 1;
 }
 
 .initiative-card:hover {
   transform: scale(1.05);
   box-shadow: 0 0.25rem 0.5rem rgba(0, 0, 0, 0.2); /* 4px 8px */
 }
 
 .initiative-card:focus-visible {
   outline: 2px solid #2D9BE4;
   outline: 2px solid var(--hover-color);
 }
 
 .initiative-card.under-card {
   border-radius: 0.5rem; /* 8px */
 }
 
 .initiative-card h3 {
   font-size: 0.875rem; /* 14px */
   margin: 0 0 0.3125rem; /* 5px */
 }
 
 .initiative-card p {
   font-size: 0.75rem; /* 12px */
   margin: 0 0 0.3125rem; /* 5px */
 }
 
 .connectors {
   display: none;
 }
 
 .hover-modal {
   position: absolute;
   width: 18.75rem; /* 300px */
   background: #FFFFFF;
   border: 1px solid #ccc;
   border-radius: 0.5rem; /* 8px */
   padding: 0.625rem; /* 10px */
   box-shadow: 0 0.25rem 0.5rem rgba(0, 0, 0, 0.2); /* 4px 8px */
   z-index: 10;
   font-size: 0.75rem; /* 12px */
   color: #23254C;
 }
 
 .hover-modal p {
   margin: 0.3125rem 0; /* 5px */
 }
 
 .hover-modal strong {
   color: #2D9BE4;
   color: var(--hover-color);
 }
 
 .hover-chart {
   margin-top: 0.625rem; /* 10px */
   height: 6.25rem; /* 100px */
   width: 100%;
 }
 
 .SubTeamsTab {
   width: 37.5rem; /* 600px */
   height: auto;
   overflow: auto;
   position: relative;
   margin: 0 auto;
 }
 
 .initiatives-modal-buttons {
   padding: 0.625rem; /* 10px */
   text-align: right;
 }
 
 .initiatives-modal-buttons button {
   padding: 0.3125rem 0.625rem; /* 5px 10px */
   background-color: #007BFF;
   color: #FFFFFF;
   border: none;
   border-radius: 0.25rem; /* 4px */
   cursor: pointer;
 }
 
 .initiatives-modal-buttons button:hover {
   background-color: #0056b3;
 }
 
 .admin-back-link {
   padding: 0.625rem; /* 10px */
   white-space: nowrap;
   min-width: 5rem; /* 80px */
   display: inline-block;
   text-overflow: ellipsis;
   overflow: visible;
   margin-right: 0.125rem; /* 2px */
   position: relative;
   z-index: 10;
 }
 
 .lozenge {
   padding: 0.125rem 0.375rem; /* 2px 6px */
   border-radius: 0.25rem; /* 4px */
   font-size: 0.625rem; /* 10px */
   display: inline-block;
 }
 
 .parent-card .lozenge {
   /* Keep as-is for default mode parents */
 }
 
 .leaf-card .lozenge {
   position: absolute;
   top: calc(50% - 1.09375rem); /* Center vertically with -17.5px offset */
   left: 50%;
   transform: translateX(-50%);
   margin: 0;
 }
 
 .paused {
   background-color: lightblue;
   background-color: var(--lozenge-bg);
   color: #000;
   color: var(--lozenge-color);
 }
 
 /* Mobile responsiveness */
 @media (max-width: 768px) {
   .initiative-tree.default-mode {
     grid-template-columns: repeat(auto-fit, minmax(6.25rem, 1fr));
   }
   .initiative-card {
     width: 6.25rem;
     height: 3.75rem;
   }
   .hover-modal {
     width: 100%;
     font-size: 0.625rem;
   }
   .initiatives-header {
     flex-direction: column;
     align-items: flex-start;
   }
   .header-right {
     margin-top: 10px;
   }
 }

/* GenchiApp.css */
/* Combined and optimized CSS from all modules: InitiativeModal.css, OverviewTab.css, TeamMembersDisplay.css, TeamMembersActions.css, SubTreeDisplay.css, EditDetailsTab.css, CheckInsTab.css, and now CreateInitiativeModal.css */
/* Removed redundancies: Shared :root vars centralized; duplicate selectors merged; consistent button padding via --button-padding; unified media queries where possible; removed overlapping rules (e.g., multiple .initiative-modal-buttons definitions). */
/* Changes: Consolidated multiple .checkbox-label definitions into a single base rule with common properties (display: flex, align-items, gap, font styles). Component-specific variations (e.g., flex-direction: row-reverse in check-ins-tab, span margins in edit-details) moved to scoped selectors (.check-ins-tab .checkbox-label, .edit-details-tab .checkbox-label span) to preserve functionality without redundancy. This maintains all existing styles while improving maintainability and reducing file size/duplication. */
/* New Changes: Added .channel-row { display: flex; flex-wrap: nowrap; justify-content: flex-start; gap: 0.625rem; align-items: center; width: 100%; } to replicate .day-row. Updated .frequency-button.selected { background: var(--primary-color); } (already #2D9BE4, no change needed). Added .form-field.pause-field { justify-content: flex-start; } for left alignment of pause. Media queries updated to maintain horizontal channels. */
/* CreateInitiativeModal.css Integration: Migrated unique styles (e.g., .create-initiative-modal-overlay, decorative layers, form specifics) with prefixes; reused shared (e.g., .form-table, .checkbox-group). Added fallbacks for clip-path (simple gradients); improved contrast (--sub-text-color to #6c6d84); added overflow-wrap to fields/labels. */
:root {
--font-family: -apple-system, BlinkMacSystemFont, sans-serif;
--text-color: #23254C;
--sub-text-color: #6c6d84; /* Improved contrast from #77788F for WCAG AA */
--primary-color: #2D9BE4;
--border-color: rgba(119,120,143,0.16);
--button-bg: #F5F5F5;
--spacing-base: 1rem;
--font-size-base: 1rem;
--border-radius-base: 0.25rem;
--border-radius-pill: 1.1875rem; /* 19px */
--shadow-base: 0 1.25rem 2.5rem 0 rgba(0,0,0,0.05);
--button-padding: 0.5rem 1rem; /* Standardized for consistency across all buttons/selects */
--button-min-width: 7rem; /* New: Ensures consistent minimum size without fixed widths */
--card-width: 7.5rem; /* 120px */
--card-height: 4.6875rem; /* 75px */
--lozenge-bg: lightblue;
--lozenge-color: #000;
--invite-max-width: 40rem; /* 640px */
--list-max-width: 18.75rem; /* 300px */
--field-width: clamp(15rem, 50vw, 20.625rem); /* 240px to 330px */
--label-width: clamp(8rem, 30vw, 9.375rem); /* 128px to 150px */
--modal-width: clamp(18.75rem, 90vw, 50rem); /* 300px min, 800px max */
--checkbox-size: 1.25rem; /* Centralized for uniform checkboxes */
--error-color: #FF0000; /* Var for delete/red colors */
}
.modal-text {
font-family: -apple-system, BlinkMacSystemFont, sans-serif;
font-family: var(--font-family);
color: #23254C;
color: var(--text-color);
}
.modal-sub-text {
font-family: -apple-system, BlinkMacSystemFont, sans-serif;
font-family: var(--font-family);
color: #6c6d84;
color: var(--sub-text-color);
}
.base-button {
font-family: -apple-system, BlinkMacSystemFont, sans-serif;
font-family: var(--font-family);
cursor: pointer;
border: none;
border-radius: 0.25rem;
border-radius: var(--border-radius-base);
padding: 0.5rem 1rem;
padding: var(--button-padding); /* Consistent */
min-width: 7rem;
min-width: var(--button-min-width); /* New consistency */
}
.initiative-modal-overlay {
position: fixed;
top: 66px;
left: 0;
width: 100%;
height: calc(100% - 66px);
background: rgba(0, 0, 0, 0.5);
display: flex;
justify-content: center;
align-items: flex-start;
z-index: 500;
pointer-events: auto;
}
.initiative-modal {
position: relative;
background: #FFFFFF;
box-shadow: 0 1.25rem 2.5rem 0 rgba(0,0,0,0.05);
box-shadow: var(--shadow-base);
border-radius: 1rem;
padding: 1rem;
padding: var(--spacing-base);
width: clamp(18.75rem, 90vw, 50rem);
width: var(--modal-width);
max-height: 90vh;
overflow-y: auto;
overflow-x: hidden; /* Updated: Prevent horizontal scroll at root */
z-index: 1001;
pointer-events: auto;
border: 0.125rem solid #2D9BE4;
border: 0.125rem solid var(--primary-color);
outline: none;
box-sizing: border-box;
}
/* Decorative shapes with fallbacks */
@supports ((-webkit-clip-path: path('M 0 178 H 96 C 80 120 48 60 0 0 Z')) or (clip-path: path('M 0 178 H 96 C 80 120 48 60 0 0 Z'))) {
.initiative-modal::before {
content: '';
position: absolute;
bottom: 0;
left: 0;
width: 6rem;
height: 11.125rem;
background-image: linear-gradient(218deg, rgba(63, 219, 245, 0.10) 0%, rgba(12, 128, 210, 0.10) 97%);
opacity: 1;
z-index: 0;
-webkit-clip-path: path('M 0 178 H 96 C 80 120 48 60 0 0 Z');
        clip-path: path('M 0 178 H 96 C 80 120 48 60 0 0 Z');
  }
.modal-left-layer1::before {
content: '';
position: absolute;
bottom: 0;
left: 0;
width: 4.375rem;
height: 12.5rem;
background: #2D9BE4;
background: var(--primary-color);
opacity: 0.2;
z-index: 0;
-webkit-clip-path: path('M 0 200 H 70 C 60 140 35 70 0 0 Z');
        clip-path: path('M 0 200 H 70 C 60 140 35 70 0 0 Z');
  }
.modal-left-layer2::before {
content: '';
position: absolute;
bottom: 0;
left: 0;
width: 3.125rem;
height: 6.25rem;
background: #2D9BE4;
background: var(--primary-color);
z-index: 0;
-webkit-clip-path: path('M 0 100 H 50 C 40 70 20 30 0 0 Z');
        clip-path: path('M 0 100 H 50 C 40 70 20 30 0 0 Z');
  }
.initiative-modal::after {
content: '';
position: absolute;
top: 0;
right: 0;
width: 6rem;
height: 11.125rem;
background-image: linear-gradient(218deg, rgba(63, 219, 245, 0.10) 0%, rgba(12, 128, 210, 0.10) 97%);
opacity: 1;
z-index: 0;
-webkit-clip-path: path('M 96 0 H 0 C 16 58 48 118 96 178 Z');
        clip-path: path('M 96 0 H 0 C 16 58 48 118 96 178 Z');
  }
.modal-right-layer1::after {
content: '';
position: absolute;
top: 0;
right: 0;
width: 4.375rem;
height: 12.5rem;
background: #2D9BE4;
background: var(--primary-color);
opacity: 0.2;
z-index: 0;
-webkit-clip-path: path('M 70 0 H 0 C 10 60 35 130 70 200 Z');
        clip-path: path('M 70 0 H 0 C 10 60 35 130 70 200 Z');
  }
.modal-right-layer2::after {
content: '';
position: absolute;
top: 0;
right: 0;
width: 3.125rem;
height: 6.25rem;
background: #2D9BE4;
background: var(--primary-color);
z-index: 0;
-webkit-clip-path: path('M 50 0 H 0 C 10 30 30 70 50 100 Z');
        clip-path: path('M 50 0 H 0 C 10 30 30 70 50 100 Z');
  }
}
/* Fallback for no clip-path support */
:not(supports [clip-path: path('M 0 178 H 96 C 80 120 48 60 0 0 Z')]) .initiative-modal::before,
:not(supports [clip-path: path('M 0 178 H 96 C 80 120 48 60 0 0 Z')]) .modal-left-layer1::before,
:not(supports [clip-path: path('M 0 178 H 96 C 80 120 48 60 0 0 Z')]) .modal-left-layer2::before,
:not(supports [clip-path: path('M 0 178 H 96 C 80 120 48 60 0 0 Z')]) .initiative-modal::after,
:not(supports [clip-path: path('M 0 178 H 96 C 80 120 48 60 0 0 Z')]) .modal-right-layer1::after,
:not(supports [clip-path: path('M 0 178 H 96 C 80 120 48 60 0 0 Z')]) .modal-right-layer2::after {
background-image: linear-gradient(to bottom, rgba(63,219,245,0.10), rgba(12,128,210,0.10));
-webkit-clip-path: none;
        clip-path: none; /* Fallback to rectangle gradients */
border-radius: 0.25rem;
border-radius: var(--border-radius-base);
}
.initiative-modal-header {
padding: 1rem 0;
padding: var(--spacing-base) 0;
background: transparent;
border-bottom: 1px solid rgba(119,120,143,0.16);
border-bottom: 1px solid var(--border-color);
position: relative;
z-index: 1001;
}
.initiative-modal-title {
font-size: 2.4375rem;
letter-spacing: 0.01rem;
line-height: 1.9375rem;
margin: 0;
padding: 0 1.25rem;
text-align: left;
}
.initiative-modal-subheader {
font-size: 0.8125rem;
letter-spacing: 0.069375rem;
margin-top: 1rem;
margin-top: var(--spacing-base);
padding: 0 1.25rem;
display: flex;
gap: 0.9375rem;
justify-content: flex-start;
flex-wrap: wrap;
}
.initiative-modal-subheader span {
white-space: nowrap;
}
.initiative-modal-tabs {
display: flex;
gap: 0; /* Remove gap to make tabs adjacent */
padding: 1rem 1.25rem;
padding: var(--spacing-base) 1.25rem;
background-image: linear-gradient(-76deg, rgba(231,244,251,0.00) 0%, rgba(231,244,251,0.35) 94%);
border-bottom: 1px solid rgba(119,120,143,0.16);
border-bottom: 1px solid var(--border-color); /* Add bottom border for the tab row */
}
.tab {
font-size: 1.0625rem;
letter-spacing: 0;
padding: 0.5rem 1rem;
padding: var(--button-padding);
background: #F5F5F5;
background: var(--button-bg); /* Light background for inactive tabs */
transition: color 0.2s, background 0.2s;
position: relative;
text-align: center;
min-width: 7.5rem;
border: 1px solid rgba(119,120,143,0.16);
border: 1px solid var(--border-color);
border-bottom: none;
border-radius: 0.25rem 0.25rem 0 0;
border-radius: var(--border-radius-base) var(--border-radius-base) 0 0; /* Rounded top for folder tab look */
margin-right: -1px; /* Overlap borders between adjacent tabs */
cursor: pointer;
z-index: 0;
}
.tab.active {
background: #FFFFFF; /* White background for active tab to blend with content */
color: #2D9BE4;
color: var(--primary-color);
z-index: 1; /* Ensure active tab is above others */
}
.tab.active::after {
content: '';
position: absolute;
bottom: -1px; /* Position to overlap the tab row's bottom border */
left: 0;
width: 100%;
height: 0.125rem;
background: #2D9BE4;
background: var(--primary-color);
z-index: 2; /* Above the grey border */
transform: none; /* Remove translate for full-width coverage */
}
.tab:hover:not(.active) {
color: #2D9BE4;
color: var(--primary-color);
}
.tab:focus-visible {
outline: 0.125rem solid #2D9BE4;
outline: 0.125rem solid var(--primary-color);
}
.initiative-modal-content {
display: flex;
flex-direction: column;
align-items: stretch;
width: 100%; /* Updated: Full width to avoid calc mismatch */
padding: 1rem;
padding: var(--spacing-base);
overflow-x: hidden; /* Explicitly prevent horizontal scroll in container */
border-top: 1px solid rgba(119,120,143,0.16);
border-top: 1px solid var(--border-color); /* Reinforce the connection look, but active tab's white bg and blue line will "cut" it */
}
.tab-content {
display: flex;
flex-wrap: nowrap;
width: 100%; /* Updated */
gap: 1.5%;
box-sizing: border-box;
}
.initiative-modal .tab-content .left-column {
width: 58.5%;
display: flex;
flex-direction: column;
padding: 1rem;
padding: var(--spacing-base);
align-items: stretch;
box-sizing: border-box;
max-width: 100%;
}
.initiative-modal .tab-content .left-column.centered {
align-items: center;
text-align: center;
}
.initiative-modal .tab-content .left-column .confidence-trend {
margin-bottom: 1rem;
margin-bottom: var(--spacing-base);
max-width: 100%;
}
.initiative-modal .tab-content .left-column .confidence-trend .graph-and-votes {
display: flex;
flex-direction: column;
align-items: center;
width: 100%;
}
.initiative-modal .tab-content .left-column .confidence-trend canvas {
width: 100% !important;
height: 12.5rem !important;
}
.initiative-modal .tab-content .left-column .confidence-trend h3 {
font-size: 1rem;
font-size: var(--font-size-base);
margin: 0.9375rem 0 0.3125rem;
}
.initiative-modal .tab-content .left-column .confidence-trend .vote-balls {
margin-top: 1rem;
margin-top: var(--spacing-base);
text-align: center;
border: 1px solid rgba(119,120,143,0.16);
border: 1px solid var(--border-color);
border-radius: 0.25rem;
border-radius: var(--border-radius-base);
padding: 0.3125rem;
display: flex;
flex-wrap: wrap;
justify-content: center;
gap: 0.25rem;
}
.initiative-modal .tab-content .left-column .confidence-trend .vote-ball {
width: 1.25rem;
height: 1.25rem;
border-radius: 50%;
display: inline-block;
box-shadow: 0.125rem 0.125rem 0.25rem rgba(0, 0, 0, 0.3), -0.125rem -0.125rem 0.25rem rgba(255, 255, 255, 0.3);
cursor: pointer;
}
.initiative-modal .tab-content .right-column {
width: 39%;
display: flex;
flex-direction: column;
padding: 1rem;
padding: var(--spacing-base);
box-sizing: border-box;
max-width: 100%;
}
.right-column h3 {
font-size: 1rem;
font-size: var(--font-size-base);
margin: 0 0 1rem;
margin: 0 0 var(--spacing-base);
}
.initiative-goal > h3 {
font-size: 1rem;
font-size: var(--font-size-base);
margin: 0 0 0.3125rem;
}
.initiative-goal p {
font-size: 0.9375rem;
margin: 0 0 1.125rem;
word-break: break-word; /* Updated: Prevent long word overflow */
overflow-wrap: break-word; /* Updated */
}
.initiative-status .status-row {
display: flex;
justify-content: flex-start;
align-items: center;
gap: 1rem;
margin-bottom: 0.125rem;
}
.initiative-status .status-row label {
display: flex;
align-items: center;
gap: 0.3125rem;
font-size: 1rem;
font-size: var(--font-size-base);
margin: 0;
padding: 0;
}
.initiative-status .status-row label input {
vertical-align: middle;
margin: 0 0 0 0.3125rem;
}
.initiative-status .status-row span {
font-size: 1rem;
font-size: var(--font-size-base);
margin: 0;
padding: 0;
line-height: 1;
}
.initiative-status .status-row .deadline-label {
color: #000000;
}
.initiative-members-tab {
display: flex;
flex-direction: column;
align-items: center;
width: 100%;
max-width: 50rem;
margin: 0 auto;
}
.initiative-members-container {
display: flex;
flex-direction: row;
justify-content: center;
align-items: stretch;
width: 100%;
gap: 1.25rem;
}
.members-list,
.observers-list {
flex: 1 1;
max-width: 18.75rem;
display: flex;
flex-direction: column;
align-items: center;
}
.member-actions {
display: flex;
flex-direction: column;
gap: 1rem;
gap: var(--spacing-base);
justify-content: space-between;
align-items: center;
min-width: 7.5rem;
padding: 0;
height: 100%;
}
.member-actions button {
width: 100%;
padding: 0.5rem 1rem;
padding: var(--button-padding); /* Consistent */
font-size: 0.875rem;
border: 1px solid rgba(119,120,143,0.16);
border: 1px solid var(--border-color);
border-radius: 0.25rem;
border-radius: var(--border-radius-base);
background: #F5F5F5;
background: var(--button-bg);
cursor: pointer;
}
.invite-wrapper {
margin-top: 0.9375rem;
width: 100%;
max-width: 15rem;
align-self: center;
}
.invite-wrapper select {
width: 100%;
max-width: 15rem;
padding: 0.5rem 1rem;
padding: var(--button-padding); /* Consistent */
font-size: 0.875rem;
border: 1px solid rgba(119,120,143,0.16);
border: 1px solid var(--border-color);
border-radius: 0.25rem;
border-radius: var(--border-radius-base);
}
.invite-section {
display: flex;
flex-direction: row;
justify-content: center;
width: 100%;
max-width: 40rem;
margin-top: 0.9375rem;
gap: 2.5rem;
}
.invite-section select {
width: 100%;
max-width: 18.75rem;
padding: 0.5rem 1rem;
padding: var(--button-padding); /* Consistent */
font-size: 0.875rem;
border: 1px solid rgba(119,120,143,0.16);
border: 1px solid var(--border-color);
border-radius: 0.25rem;
border-radius: var(--border-radius-base);
}
.initiative-details {
width: 100%;
box-sizing: border-box;
}
.initiative-details input,
.initiative-details textarea {
width: 100%;
margin: 0.25rem 0 0.5rem;
padding: 0.5rem 1rem;
padding: var(--button-padding); /* Consistent for inputs */
font-size: 1.0625rem;
color: #6c6d84;
color: var(--sub-text-color);
border: none;
border-radius: 0.25rem;
border-radius: var(--border-radius-base);
display: block;
box-sizing: border-box;
}
.initiative-details textarea {
height: 5rem;
resize: vertical;
}
.initiative-details label {
font-size: 1.0625rem;
color: #6c6d84;
color: var(--sub-text-color);
margin-top: 1rem;
margin-top: var(--spacing-base);
display: block;
text-align: center;
}
.initiative-actions-top {
margin-top: 0.9375rem;
display: flex;
flex-wrap: wrap;
gap: 1rem;
gap: var(--spacing-base);
}
.initiative-actions-top button {
padding: 0.5rem 1rem;
padding: var(--button-padding); /* Consistent */
font-size: 0.875rem;
border: 1px solid rgba(119,120,143,0.16);
border: 1px solid var(--border-color);
border-radius: 0.25rem;
border-radius: var(--border-radius-base);
background: #F5F5F5;
background: var(--button-bg);
}
.initiative-actions-top label {
margin: 0;
display: flex;
align-items: center;
}
.comment-feed {
width: 100%;
padding: 0.5rem;
border: 1px solid rgba(119,120,143,0.16);
border: 1px solid var(--border-color);
border-radius: 0.25rem;
border-radius: var(--border-radius-base);
background: #F5F5F5;
background: var(--button-bg);
z-index: 5;
display: flex;
flex-direction: column;
justify-content: flex-start;
box-sizing: border-box;
margin-top: 0;
}
.comment-feed h3 {
font-size: 1rem;
font-size: var(--font-size-base);
margin: 0 0 1rem;
margin: 0 0 var(--spacing-base);
text-align: center;
}
.comment-item {
margin-bottom: 1rem;
margin-bottom: var(--spacing-base);
padding-bottom: 1rem;
padding-bottom: var(--spacing-base);
}
.comment-item p {
margin: 0;
font-size: 0.875rem;
word-break: break-word;
}
.comment-item p:first-child {
font-weight: bold;
color: #6c6d84;
color: var(--sub-text-color);
}
.initiative-actions {
margin-top: 0.9375rem;
}
.initiative-actions button,
.initiative-actions select {
margin: 0.25rem 0.25rem 0.25rem 0;
padding: 0.5rem 1rem;
padding: var(--button-padding); /* Consistent */
font-size: 0.875rem;
border: 1px solid rgba(119,120,143,0.16);
border: 1px solid var(--border-color);
border-radius: 0.25rem;
border-radius: var(--border-radius-base);
background: #F5F5F5;
background: var(--button-bg);
}
.initiative-actions button:disabled {
background: #E0E0E0;
color: #6c6d84;
color: var(--sub-text-color);
cursor: not-allowed;
}
.initiative-actions h4 {
font-size: 1rem;
font-size: var(--font-size-base);
margin: 0.5rem 0 0.25rem;
}
.initiative-actions div {
margin-bottom: 0.625rem;
}
.initiative-actions table {
width: 100%;
border-collapse: collapse;
}
.initiative-actions td {
padding: 0.3125rem;
font-size: 0.875rem;
color: #23254C;
color: var(--text-color);
}
.debug-actions {
margin-top: 0.625rem;
padding: 0.3125rem;
border: 1px dashed #2D9BE4;
border: 1px dashed var(--primary-color);
background: #E7F4FB;
}
.debug-actions p {
margin: 0;
font-size: 0.75rem;
color: #2D9BE4;
color: var(--primary-color);
}
.modal-message {
margin-top: 0.625rem;
padding: 0.3125rem;
border: 1px solid #DC3545;
background: #FFE5E5;
}
.modal-message p {
margin: 0;
font-size: 0.875rem;
color: #DC3545;
}
.checkbox-group {
display: flex;
gap: 1.25rem;
justify-content: center;
margin: 1rem 0;
margin: var(--spacing-base) 0;
}
.checkbox-group label {
display: flex;
align-items: center;
gap: 0.3125rem;
}
.cadence-section {
margin-top: 0;
}
.frequency-toggle {
display: flex;
justify-content: center;
margin: 1.25rem 0;
gap: 0;
}
.frequency-button {
min-width: 7rem;
min-width: var(--button-min-width); /* New: Consistent min size, no fixed width */
padding: 0.5rem 1rem;
padding: var(--button-padding); /* Consistent */
border: none; /* Removed border */
border-radius: 0;
background: #F5F5F5;
background: var(--button-bg);
font-size: 0.875rem;
cursor: pointer;
}
.frequency-button:first-child {
border-radius: 0.25rem 0 0 0.25rem;
border-radius: var(--border-radius-base) 0 0 var(--border-radius-base);
}
.frequency-button:last-child {
border-radius: 0 0.25rem 0.25rem 0;
border-radius: 0 var(--border-radius-base) var(--border-radius-base) 0;
}
.frequency-button.selected {
background: #2D9BE4;
background: var(--primary-color);
color: #FFFFFF;
}
.day-buttons.horizontal {
display: flex;
flex-wrap: wrap;
justify-content: center;
gap: 1rem;
gap: var(--spacing-base);
margin: 1rem 0;
margin: var(--spacing-base) 0;
}
.day-buttons.horizontal label {
display: flex;
align-items: center;
gap: 0.3125rem;
}
.timezone-picker {
padding: 0.5rem 1rem;
padding: var(--button-padding); /* Consistent */
margin: 1rem auto;
margin: var(--spacing-base) auto;
display: block;
font-size: 0.875rem;
border: 1px solid rgba(119,120,143,0.16);
border: 1px solid var(--border-color);
border-radius: 0.25rem;
border-radius: var(--border-radius-base);
min-width: 7rem;
min-width: var(--button-min-width); /* New consistency */
}
.pause-toggle {
margin: 1.25rem 0;
}
.pause-toggle label {
display: flex;
align-items: center;
justify-content: center;
gap: 0.3125rem;
}
.status-report-button {
padding: 0.5rem 1rem;
padding: var(--button-padding); /* Consistent, removed fixed width */
margin: 1rem 0;
margin: var(--spacing-base) 0;
font-size: 0.875rem;
border: 1px solid rgba(119,120,143,0.16);
border: 1px solid var(--border-color);
border-radius: 0.25rem;
border-radius: var(--border-radius-base);
background: #F5F5F5;
background: var(--button-bg);
cursor: pointer;
min-width: 7rem;
min-width: var(--button-min-width); /* New consistency */
}
.initiative-modal-buttons {
display: flex;
justify-content: center;
margin-top: 2.5rem;
}
.initiative-modal-buttons button {
padding: 0.5rem 1rem;
padding: var(--button-padding); /* Consistent */
margin: 0 0.3125rem;
font-size: 0.875rem;
border: none;
border-radius: 1.1875rem;
cursor: pointer;
min-width: 7rem;
min-width: var(--button-min-width); /* New consistency */
}
.primary-button {
background: #2D9BE4;
background: var(--primary-color);
color: #FFFFFF;
}
.secondary-button {
background: #F5F5F5;
background: var(--button-bg);
color: #6c6d84;
color: var(--sub-text-color);
}
.overview-tab-content {
display: flex;
flex-wrap: nowrap;
gap: 1rem; /* Updated: Fixed gap to avoid % rounding */
box-sizing: border-box;
padding: 0; /* Updated: Remove padding to minimize layers */
overflow-x: hidden; /* Updated: Prevent scroll here too */
}
.overview-left-column {
flex: 1 1; /* Updated: Grow equally but with basis 0 */
max-width: 58%; /* Updated: Cap to provide buffer */
display: flex;
flex-direction: column;
padding: 0.5rem; /* Updated: Reduced padding */
align-items: stretch;
box-sizing: border-box;
}
.overview-right-column {
flex: 1 1; /* Updated */
max-width: 38%; /* Updated */
display: flex;
flex-direction: column;
padding: 0.5rem; /* Updated: Reduced padding */
box-sizing: border-box;
align-self: stretch;
}
.overview-tab-content .overview-comment-feed-container {
width: 100%;
max-width: 100%; /* Updated: Force containment */
max-height: clamp(20rem, 50vh, 37.5rem); /* Adaptive height */
overflow-y: auto;
box-sizing: border-box;
flex: 1 1;
}
.initiative-goal {
margin-bottom: 1.125rem; /* 18px */
}
.goal-header {
display: flex;
justify-content: space-between;
align-items: baseline;
margin-bottom: 0.3125rem; /* 5px */
max-width: 100%; /* Updated: Force containment */
}
.initiative-goal h3 {
font-family: -apple-system, BlinkMacSystemFont, sans-serif;
font-family: var(--font-family);
font-size: 1rem;
font-size: var(--font-size-base);
color: #23254C;
color: var(--text-color);
margin: 0;
}
.initiative-goal p {
font-family: -apple-system, BlinkMacSystemFont, sans-serif;
font-family: var(--font-family);
font-size: 1rem;
font-size: var(--font-size-base);
color: #6c6d84;
color: var(--sub-text-color);
margin: 0;
word-break: break-word; /* Updated: Prevent long word overflow */
overflow-wrap: break-word; /* Updated */
}
.confidence-score {
display: flex;
align-items: baseline;
}
.confidence-score-label {
font-family: -apple-system, BlinkMacSystemFont, sans-serif;
font-family: var(--font-family);
font-size: 1rem;
font-size: var(--font-size-base);
font-weight: bold;
color: #000000;
margin-right: 0.3125rem; /* 5px */
}
.confidence-score-value {
font-family: -apple-system, BlinkMacSystemFont, sans-serif;
font-family: var(--font-family);
font-size: 1.5em;
font-weight: bold;
color: #2D9BE4;
color: var(--primary-color);
}
.initiative-status {
margin-bottom: 1.25rem; /* 20px */
}
.status-row {
display: flex;
justify-content: space-between;
align-items: baseline;
max-width: 100%; /* Updated: Force containment */
}
.deadline {
display: flex;
align-items: baseline;
}
.initiative-status .status-row .deadline-label {
font-family: -apple-system, BlinkMacSystemFont, sans-serif;
font-family: var(--font-family);
font-size: 1rem;
font-size: var(--font-size-base);
color: #000000;
font-weight: bold;
margin-right: 0.3125rem; /* 5px */
}
.initiative-status .status-row span {
font-family: -apple-system, BlinkMacSystemFont, sans-serif;
font-family: var(--font-family);
font-size: 1rem;
font-size: var(--font-size-base);
color: #6c6d84;
color: var(--sub-text-color);
margin: 0;
padding: 0;
line-height: 1;
}
.initiative-status .status-row .status-completed {
font-family: -apple-system, BlinkMacSystemFont, sans-serif;
font-family: var(--font-family);
font-size: 1rem;
font-size: var(--font-size-base);
color: #000000;
font-weight: bold;
display: flex;
align-items: baseline;
gap: 0.3125rem; /* 5px */
margin-left: auto;
padding-left: 0; /* Adjusted for alignment */
}
.initiative-status .status-row .status-completed input {
vertical-align: middle;
margin: 0 0 0 0.3125rem; /* 5px */
}
.confidence-trend {
margin-bottom: 0.625rem; /* 10px */
max-width: 100%; /* Updated: Force containment */
}
.confidence-trend h3 {
font-family: -apple-system, BlinkMacSystemFont, sans-serif;
font-family: var(--font-family);
font-size: 1rem;
font-size: var(--font-size-base);
color: #23254C;
color: var(--text-color);
margin: 0.9375rem 0 0.3125rem; /* 15px 5px */
}
.confidence-trend canvas {
height: 8.75rem; /* Reduced proportionally from 140px */
width: 100%;
}
.overview-left-column .confidence-trend .vote-balls {
margin-top: 0.625rem; /* 10px */
text-align: center;
border: 1px solid rgba(119,120,143,0.16);
border: 1px solid var(--border-color);
border-radius: 0.25rem;
border-radius: var(--border-radius-base);
padding: 0.3125rem; /* 5px */
display: flex;
flex-wrap: wrap;
justify-content: center;
gap: 0.25rem; /* 4px */
}
.overview-left-column .confidence-trend .vote-ball {
width: 1.25rem; /* 20px */
height: 1.25rem; /* 20px */
border-radius: 50%;
display: inline-block;
box-shadow: 0 1.25rem 2.5rem 0 rgba(0,0,0,0.05);
box-shadow: var(--shadow-base);
cursor: pointer;
}
.team-members-container {
display: flex;
flex-direction: row;
justify-content: center;
align-items: stretch;
width: 100%;
gap: 1rem * 1.25;
gap: var(--spacing-base) * 1.25; /* 20px */
}
.team-members-members-list,
.team-members-observers-list {
flex: 1 1;
max-width: 18.75rem;
max-width: var(--list-max-width);
display: flex;
flex-direction: column;
align-items: center;
}
.team-members-container :focus-visible {
outline: 0.125rem solid #2D9BE4;
outline: 0.125rem solid var(--primary-color);
}
.team-members-tab {
display: flex;
flex-direction: column;
align-items: center;
width: 100%;
max-width: clamp(40rem, 95vw, 47.5rem); /* 640px to 760px */
margin: 0 auto;
}
.team-members-action-buttons {
display: flex;
flex-direction: column;
gap: 1.5rem; /* Increased for better spacing */
justify-content: space-between;
align-items: center;
min-width: 7.5rem; /* 120px */
padding: 0;
flex: 1 1; /* Added to fill available height */
height: 100%; /* Ensures full vertical span for positioning */
padding-top: 2rem; /* Offset for header height alignment */
}
.team-members-action-buttons button {
padding: 0.5rem 1rem;
padding: var(--button-padding); /* Consistent */
margin: 0 0.3125rem; /* 5px */
font-family: -apple-system, BlinkMacSystemFont, sans-serif;
font-family: var(--font-family);
font-size: 0.875rem; /* 14px */
border: none;
border-radius: 1.1875rem;
border-radius: var(--border-radius-pill);
cursor: pointer;
min-width: 7rem;
min-width: var(--button-min-width); /* New consistency */
}
.team-members-action-buttons button.primary-action {
background: #2D9BE4;
background: var(--primary-color);
color: #FFFFFF;
}
.team-members-action-buttons button.secondary-action {
background: #F5F5F5;
background: var(--button-bg);
color: #6c6d84;
color: var(--sub-text-color);
}
.team-members-action-buttons button.secondary-action.remove {
color: #FF0000;
color: var(--error-color);
}
.team-members-invite-section {
display: flex;
flex-direction: row;
justify-content: center;
width: 100%;
max-width: 40rem;
max-width: var(--invite-max-width);
gap: 2.5rem; /* 40px */
margin-bottom: 1rem * 0.625;
margin-bottom: var(--spacing-base) * 0.625; /* 10px */
}
.team-members-invite-section input {
padding: 0.5rem 1rem;
padding: var(--button-padding); /* Consistent */
width: 100%;
max-width: 31.25rem; /* 500px */
text-align: center;
font-family: -apple-system, BlinkMacSystemFont, sans-serif;
font-family: var(--font-family);
font-size: 0.875rem; /* 14px */
border: 1px solid rgba(119,120,143,0.16);
border: 1px solid var(--border-color);
border-radius: 0.25rem;
border-radius: var(--border-radius-base);
}
.team-members-invite-section button {
padding: 0.5rem 1rem;
padding: var(--button-padding); /* Consistent */
font-family: -apple-system, BlinkMacSystemFont, sans-serif;
font-family: var(--font-family);
font-size: 0.875rem; /* 14px */
border: 1px solid rgba(119,120,143,0.16);
border: 1px solid var(--border-color);
border-radius: 0.25rem;
border-radius: var(--border-radius-base);
background: #F5F5F5;
background: var(--button-bg);
cursor: pointer;
min-width: 7rem;
min-width: var(--button-min-width); /* New consistency */
}
.team-members-modal-buttons {
display: flex;
flex-direction: row;
justify-content: center;
align-items: center;
gap: 1rem * 0.625;
gap: var(--spacing-base) * 0.625; /* 10px */
margin-top: 2.5rem; /* 40px */
padding: 1rem * 0.625;
padding: var(--spacing-base) * 0.625; /* 10px */
}
.team-members-modal-buttons button {
padding: 0.5rem 1rem;
padding: var(--button-padding); /* Consistent */
margin: 0 0.3125rem; /* 5px */
font-family: -apple-system, BlinkMacSystemFont, sans-serif;
font-family: var(--font-family);
font-size: 0.875rem; /* 14px */
border: none;
border-radius: 1.1875rem;
border-radius: var(--border-radius-pill);
cursor: pointer;
background: #F5F5F5;
background: var(--button-bg);
color: #6c6d84;
color: var(--sub-text-color);
min-width: 7rem;
min-width: var(--button-min-width); /* New consistency */
}
.team-members-modal-buttons button:focus-visible,
.team-members-action-buttons button:focus-visible {
outline: 0.125rem solid #2D9BE4;
outline: 0.125rem solid var(--primary-color);
}
.SubTreeDisplay {
position: relative;
width: 600px;
height: var(--tree-height); /* Dynamic from code */
overflow: auto;
}
.sub-tree-initiative-card {
width: 7.5rem;
width: var(--card-width);
height: 4.6875rem;
height: var(--card-height);
border-radius: 0.5rem; /* 8px */
border-right: 0.125rem solid #FFFFFF; /* 2px */
border-bottom: 0.125rem solid #FFFFFF; /* 2px */
padding: 0.625rem; /* 10px */
text-align: center;
cursor: pointer;
position: relative;
}
.lozenge {
padding: 0.125rem 0.375rem; /* 2px 6px */
border-radius: 0.25rem;
border-radius: var(--border-radius-base);
font-size: 0.625rem; /* 10px */
display: inline-block;
}
.paused {
background-color: lightblue;
background-color: var(--lozenge-bg);
color: #000;
color: var(--lozenge-color);
}
.leaf-lozenge {
position: absolute;
top: calc(50% - 0.625rem); /* 10px */
left: 50%;
transform: translateX(-50%);
margin: 0;
}
.edit-details-tab {
width: 100%;
max-width: clamp(40rem, 95vw, 50rem); /* 640px to 800px */
margin: 0 auto;
box-sizing: border-box;
}
.edit-details-tab-content {
display: flex;
flex-direction: column;
align-items: center;
width: 100%;
max-width: clamp(30rem, 80vw, 37.5rem); /* 480px to 600px */
margin: 0 auto;
padding: 0.625rem 0; /* 10px 0 */
}
.edit-details-tab-content h2 {
font-family: -apple-system, BlinkMacSystemFont, sans-serif;
font-family: var(--font-family);
font-size: 1.1875rem; /* 19px */
color: #23254C;
color: var(--text-color);
margin: 0 0 0.625rem; /* 10px */
text-align: center;
width: 100%;
}
.form-table {
display: table;
width: 100%;
max-width: 100%;
overflow-x: hidden;
border-collapse: separate;
border-spacing: 0 1.25rem; /* 20px */
table-layout: fixed;
}
.form-row {
display: table-row;
}
.form-label {
display: table-cell;
font-family: -apple-system, BlinkMacSystemFont, sans-serif;
font-family: var(--font-family);
font-size: 1rem;
font-size: var(--font-size-base);
color: #000000;
text-align: left;
width: 9.0625rem; /* 145px */
padding: 0 0 0 0; /* 20px right */
vertical-align: top;
white-space: nowrap;
padding-left: 4ch; /* Move labels 2 characters to the right */
overflow-wrap: break-word; /* Prevent overflow */
}
.initiative-name-label,
.owner-label,
.deadline-label,
.start-date-label,
.parent-label {
vertical-align: middle;
}
.goal-label {
vertical-align: top;
}
.label-number {
padding-right: 0.0625rem; /* 1px */
font-weight: bold;
}
.form-field,
.owner-display {
display: table-cell;
vertical-align: top;
padding: 0;
margin: 0;
}
.form-field {
font-family: -apple-system, BlinkMacSystemFont, sans-serif;
font-family: var(--font-family);
font-size: 1rem;
font-size: var(--font-size-base);
color: #6c6d84;
color: var(--sub-text-color);
border: none;
border-radius: 0.25rem;
border-radius: var(--border-radius-base);
box-sizing: border-box;
padding: 0.25rem 0.5rem; /* 4px 8px */
width: clamp(20rem, 50vw, 25rem); /* 320px to 400px */
max-width: clamp(20rem, 50vw, 25rem);
min-width: clamp(20rem, 50vw, 25rem);
overflow: hidden;
text-align: left;
background-color: #FFFFFF;
overflow-wrap: break-word; /* Prevent overflow */
}
.form-field[id="parent_initiative"] {
border: none;
background-color: #FFFFFF;
}
.goal-field {
width: clamp(20rem, 50vw, 25rem);
max-width: clamp(20rem, 50vw, 25rem);
min-width: clamp(20rem, 50vw, 25rem);
min-height: 3.75rem; /* 60px */
resize: vertical;
line-height: 1.25rem; /* 20px */
padding: 0.25rem 0.5rem; /* 4px 8px */
text-align: left;
appearance: none;
-webkit-appearance: none;
overflow: hidden;
border: none;
background-color: #FFFFFF;
overflow-wrap: break-word; /* Prevent overflow */
}
.owner-display {
font-family: -apple-system, BlinkMacSystemFont, sans-serif;
font-family: var(--font-family);
font-size: 1rem;
font-size: var(--font-size-base);
color: #6c6d84;
color: var(--sub-text-color);
background: #f0f0f0;
border: none;
border-radius: 0.25rem;
border-radius: var(--border-radius-base);
box-sizing: border-box;
padding: 0.25rem 0.5rem; /* 4px 8px */
width: clamp(20rem, 50vw, 25rem); /* 320px to 400px */
max-width: clamp(20rem, 50vw, 25rem);
min-width: clamp(20rem, 50vw, 25rem);
text-align: left;
overflow: hidden;
text-overflow: ellipsis;
display: inline-block;
}
.checkbox-group {
display: flex;
justify-content: flex-end;
width: 100%;
max-width: clamp(30rem, 80vw, 37.5rem); /* 480px to 600px */
margin: -0.3125rem 0 0.3125rem; /* -5px 0 5px */
padding-right: 4.5rem; /* 72px */
gap: 1.25rem; /* 20px */
}
.channels-checkbox-group {
justify-content: flex-start;
padding-right: 0;
width: 100%;
}
/* Consolidated .checkbox-label base rule */
.checkbox-label {
display: flex;
align-items: center;
gap: 0.3125rem;
font-family: -apple-system, BlinkMacSystemFont, sans-serif;
font-family: var(--font-family);
font-size: 1rem;
font-size: var(--font-size-base);
color: #000000;
}
.edit-details-tab .checkbox-label span {
margin-right: 0.625rem; /* 10px - specific to edit-details for span spacing */
}
.check-ins-tab .checkbox-label {
flex-direction: row-reverse; /* Checkbox after label text visually */
align-items: flex-start; /* Align to top for channels/days */
gap: 0.3125rem; /* Reduced gap for tighter layout */
line-height: 1.5;
padding: 0;
margin: 0;
}
.checkbox-input {
margin-left: 0;
margin-right: 0.3125rem; /* 5px */
width: 1.25rem;
width: var(--checkbox-size);
height: 1.25rem;
height: var(--checkbox-size);
border: 2px solid #6c6d84;
border: 2px solid var(--sub-text-color); /* Darker/thicker border for visibility */
border-radius: 0.25rem;
border-radius: var(--border-radius-base);
background: #FFFFFF;
margin: 0 0.3125rem 0 0; /* 5px right */
cursor: pointer;
vertical-align: top;
}
.checkbox-input:checked {
background: #FFFFFF;
border: 2px solid #6c6d84;
border: 2px solid var(--sub-text-color); /* Keep darker border on checked */
}
.checkbox-input:checked::before {
display: none; /* No custom checkmark for native */
}
.edit-details-modal-buttons {
display: flex;
justify-content: center;
width: 100%;
margin: 0.625rem 0 0 0; /* 10px 0 0 0 */
padding: 0;
gap: 0.625rem; /* 10px */
}
.edit-details-modal-buttons button {
padding: 0.5rem 1rem;
padding: var(--button-padding); /* Consistent */
font-family: -apple-system, BlinkMacSystemFont, sans-serif;
font-family: var(--font-family);
font-size: 0.9375rem; /* 15px */
border: none;
border-radius: 1.1875rem;
border-radius: var(--border-radius-pill);
cursor: pointer;
min-width: 7rem;
min-width: var(--button-min-width); /* New consistency */
}
.edit-details-modal-buttons button:nth-child(1) {
color: #FF0000;
color: var(--error-color);
background: #F5F5F5;
background: var(--button-bg);
}
.edit-details-modal-buttons button:nth-child(2) {
background: #2D9BE4;
background: var(--primary-color);
color: #FFFFFF;
}
.edit-details-modal-buttons button:nth-child(3) {
background: #F5F5F5;
background: var(--button-bg);
color: #6c6d84;
color: var(--sub-text-color);
}
.edit-details-modal-buttons button:focus-visible,
.checkbox-input:focus-visible,
.form-field-select:focus-visible {
outline: 0.125rem solid #2D9BE4;
outline: 0.125rem solid var(--primary-color);
}
.check-ins-tab {
width: 100%;
max-width: clamp(40rem, 95vw, 50rem); /* 640px to 800px */
margin: 0 auto;
box-sizing: border-box;
}
.check-ins-tab-content {
display: flex;
flex-direction: column;
align-items: center;
width: 100%;
max-width: clamp(30rem, 80vw, 37.5rem); /* 480px to 600px */
margin: 0 auto;
padding: 0;
}
.check-ins-tab-content h2 {
font-family: -apple-system, BlinkMacSystemFont, sans-serif;
font-family: var(--font-family);
font-size: 1.1875rem; /* 19px */
color: #23254C;
color: var(--text-color);
margin: 0 0 0.625rem; /* 10px */
text-align: left;
width: 100%;
}
.form-container {
display: flex;
flex-direction: column;
width: 100%;
gap: 1.25rem; /* 20px */
min-height: auto;
overflow: visible;
margin-left: 3.4375rem; /* 55px */
}
.form-row {
display: flex;
gap: 0.125rem; /* Reduced gap */
align-items: center;
width: 100%;
min-height: auto;
overflow: visible;
padding: 0;
}
.form-row:nth-child(4) .form-label {
align-self: flex-end;
}
.form-row.check-in-days {
align-items: flex-start;
}
.form-label {
font-family: -apple-system, BlinkMacSystemFont, sans-serif;
font-family: var(--font-family);
font-size: 1rem;
font-size: var(--font-size-base);
color: #000000;
text-align: left;
width: clamp(8rem, 30vw, 9.375rem);
width: var(--label-width);
white-space: nowrap;
line-height: 1.5;
padding: 0;
padding-left: 4ch; /* Move labels 2 characters to the right */
padding-top: 0.25em;
overflow-wrap: break-word; /* Prevent overflow */
}
.label-number {
padding-right: 0.0625rem; /* 1px */
font-weight: bold;
}
.form-field {
display: flex;
flex-direction: column;
align-items: flex-start;
gap: 0.625rem; /* Reduced for tighter spacing between day rows */
flex: 1 1;
padding: 0;
margin: 0;
margin-left: -2ch;
}
.form-field.pause-field { /* New: For left alignment of pause */
justify-content: flex-start;
align-items: flex-start;
overflow: visible;
}
.form-field-select {
font-family: -apple-system, BlinkMacSystemFont, sans-serif;
font-family: var(--font-family);
font-size: 1.0625rem;
color: #6c6d84;
color: var(--sub-text-color);
border: 1px solid #2D9BE4;
border: 1px solid var(--primary-color);
border-radius: 0.25rem;
border-radius: var(--border-radius-base);
box-sizing: border-box;
padding: 0.5rem 1rem;
padding: var(--button-padding); /* Consistent */
width: clamp(15rem, 50vw, 20.625rem);
width: var(--field-width);
max-width: clamp(15rem, 50vw, 20.625rem);
max-width: var(--field-width);
min-width: clamp(15rem, 50vw, 20.625rem);
min-width: var(--field-width);
height: 2.25rem; /* 36px */
line-height: 1.5;
text-align: left;
margin: 0;
background-color: #FFFFFF;
min-width: 7rem;
min-width: var(--button-min-width); /* New consistency for selects */
appearance: none;
-webkit-appearance: none;
background-image: url("data:image/svg+xml;utf8,<svg fill=\"black\" height=\"24\" viewBox=\"0 0 24 24\" width=\"24\" xmlns=\"http://www.w3.org/2000/svg\"><path d=\"M7 10l5 5 5-5z\"/><path d=\"M0 0h24v24H0z\" fill=\"none\"/></svg>");
background-repeat: no-repeat;
background-position-x: 100%;
background-position-y: 50%;
margin-top: -0.25em;
overflow-wrap: break-word; /* Prevent overflow */
}
.frequency-toggle {
display: flex;
justify-content: flex-start;
gap: 0;
border: none;
}
.frequency-button {
min-width: 7rem;
min-width: var(--button-min-width); /* New: Consistent min size, no fixed width */
padding: 0.5rem 1rem;
padding: var(--button-padding); /* Consistent */
border: none; /* Removed border */
border-radius: 0;
background: #F5F5F5;
background: var(--button-bg);
font-size: 0.875rem;
cursor: pointer;
}
.frequency-button:first-child {
border-radius: 0.25rem 0 0 0.25rem;
border-radius: var(--border-radius-base) 0 0 var(--border-radius-base);
}
.frequency-button:last-child {
border-radius: 0 0.25rem 0.25rem 0;
border-radius: 0 var(--border-radius-base) var(--border-radius-base) 0;
}
.frequency-button.selected {
background: #2D9BE4;
background: var(--primary-color);
color: #FFFFFF;
}
.day-row {
display: flex;
flex-wrap: nowrap;
justify-content: flex-start;
gap: 0.625rem; /* 10px */
min-height: auto;
width: 100%;
overflow: visible;
padding: 0.125rem 0; /* Increased padding to ensure borders visible */
align-items: center;
}
.day-checkbox {
display: flex;
align-items: center;
gap: 0.3125rem; /* 5px */
font-family: -apple-system, BlinkMacSystemFont, sans-serif;
font-family: var(--font-family);
font-size: 1rem;
font-size: var(--font-size-base);
color: #000000;
line-height: 1.5;
padding: 0;
margin: 0;
}
.checkbox-input {
width: 1.25rem;
width: var(--checkbox-size);
height: 1.25rem;
height: var(--checkbox-size);
border: 2px solid #6c6d84;
border: 2px solid var(--sub-text-color); /* Darker/thicker border for visibility */
border-radius: 0.25rem;
border-radius: var(--border-radius-base);
background: #FFFFFF;
margin: 0 0.3125rem 0 0; /* 5px right */
cursor: pointer;
}
.checkbox-input:checked {
background: #FFFFFF;
border: 2px solid #6c6d84;
border: 2px solid var(--sub-text-color); /* Keep darker border on checked */
}
.checkbox-input:checked::before {
display: none; /* No custom checkmark for native */
}
.checkbox-input.pause-checkbox {
margin-top: -0.5rem; /* -8px */
}
.channel-item {
display: flex;
align-items: center; /* Center for better alignment */
justify-content: flex-start;
margin-bottom: 0; /* Remove bottom margin for horizontal */
flex: 0 1 auto; /* Shrink-wrap to content width */
width: auto; /* Explicitly prevent full-width */
}
.channel-row {
display: flex;
flex-wrap: nowrap;
justify-content: flex-start;
gap: 0.625rem; /* 10px - same as day-row */
min-height: auto;
width: 100%;
overflow: visible;
padding: 0.125rem 0; /* Same as day-row */
align-items: center;
}
.check-ins-tab .form-field,
.check-ins-tab .frequency-toggle,
.check-ins-tab .day-row {
box-shadow: none;
border: none;
}
.check-ins-tab-content {
padding: 0;
}
/* Migrated from CreateInitiativeModal.css */
.create-initiative-modal-overlay {
position: fixed;
top: 66px;
left: 0;
width: 100%;
height: calc(100% - 66px);
background: none;
display: flex;
justify-content: center;
align-items: flex-start;
z-index: 1500;
pointer-events: auto;
}
.create-initiative-modal {
position: relative;
background: #FFFFFF;
box-shadow: 0 20px 40px 0 rgba(0,0,0,0.05);
border-radius: 16px;
border: 2px solid #2D9BE4;
border: 2px solid var(--primary-color);
padding: 30px 10px 20px 40px;
width: 700px;
height: 640px;
max-height: 90vh;
overflow-y: auto;
z-index: 1501;
pointer-events: auto;
box-sizing: border-box;
}
@supports ((-webkit-clip-path: path('M 0 178 H 96 C 80 120 48 60 0 0 Z')) or (clip-path: path('M 0 178 H 96 C 80 120 48 60 0 0 Z'))) {
.create-initiative-modal::before {
content: '';
position: absolute;
bottom: 0;
left: 0;
width: 96px;
height: 178px;
background-image: linear-gradient(218deg, rgba(63,219,245,0.10) 0%, rgba(12,128,210,0.10) 97%);
opacity: 1;
z-index: 1002;
-webkit-clip-path: path('M 0 178 H 96 C 80 120 48 60 0 0 Z');
        clip-path: path('M 0 178 H 96 C 80 120 48 60 0 0 Z');
  }
.create-initiative-modal-left-layer1::before {
content: '';
position: absolute;
bottom: 0;
left: 0;
width: 70px;
height: 200px;
background: #2D9BE4;
background: var(--primary-color);
opacity: 0.2;
z-index: 1003;
-webkit-clip-path: path('M 0 200 H 70 C 60 140 35 70 0 0 Z');
        clip-path: path('M 0 200 H 70 C 60 140 35 70 0 0 Z');
  }
.create-initiative-modal-left-layer2::before {
content: '';
position: absolute;
bottom: 0;
left: 0;
width: 50px;
height: 100px;
background: #2D9BE4;
background: var(--primary-color);
z-index: 1004;
-webkit-clip-path: path('M 0 100 H 50 C 40 70 20 30 0 0 Z');
        clip-path: path('M 0 100 H 50 C 40 70 20 30 0 0 Z');
  }
.create-initiative-modal::after {
content: '';
position: absolute;
top: 0;
right: 0;
width: 96px;
height: 178px;
background-image: linear-gradient(218deg, rgba(63,219,245,0.10) 0%, rgba(12,128,210,0.10) 97%);
opacity: 1;
z-index: 1002;
-webkit-clip-path: path('M 96 0 H 0 C 16 58 48 118 96 178 Z');
        clip-path: path('M 96 0 H 0 C 16 58 48 118 96 178 Z');
  }
.create-initiative-modal-right-layer1::after {
content: '';
position: absolute;
top: 0;
right: 0;
width: 70px;
height: 200px;
background: #2D9BE4;
background: var(--primary-color);
opacity: 0.2;
z-index: 1003;
-webkit-clip-path: path('M 70 0 H 0 C 10 60 35 130 70 200 Z');
        clip-path: path('M 70 0 H 0 C 10 60 35 130 70 200 Z');
  }
.create-initiative-modal-right-layer2::after {
content: '';
position: absolute;
top: 0;
right: 0;
width: 50px;
height: 100px;
background: #2D9BE4;
background: var(--primary-color);
z-index: 1004;
-webkit-clip-path: path('M 50 0 H 0 C 10 30 30 70 50 100 Z');
        clip-path: path('M 50 0 H 0 C 10 30 30 70 50 100 Z');
  }
}
/* Fallback for no clip-path support */
:not(supports [clip-path: path('M 0 178 H 96 C 80 120 48 60 0 0 Z')]) .create-initiative-modal::before,
:not(supports [clip-path: path('M 0 178 H 96 C 80 120 48 60 0 0 Z')]) .create-initiative-modal-left-layer1::before,
:not(supports [clip-path: path('M 0 178 H 96 C 80 120 48 60 0 0 Z')]) .create-initiative-modal-left-layer2::before,
:not(supports [clip-path: path('M 0 178 H 96 C 80 120 48 60 0 0 Z')]) .create-initiative-modal::after,
:not(supports [clip-path: path('M 0 178 H 96 C 80 120 48 60 0 0 Z')]) .create-initiative-modal-right-layer1::after,
:not(supports [clip-path: path('M 0 178 H 96 C 80 120 48 60 0 0 Z')]) .create-initiative-modal-right-layer2::after {
background-image: linear-gradient(to bottom, rgba(63,219,245,0.10), rgba(12,128,210,0.10));
-webkit-clip-path: none;
        clip-path: none; /* Fallback to rectangle gradients */
border-radius: 0.25rem;
border-radius: var(--border-radius-base);
}
.create-initiative-modal-content {
display: flex;
flex-direction: column;
align-items: center;
width: 620px;
}
h2 {
font-family: -apple-system, BlinkMacSystemFont, sans-serif;
font-family: var(--font-family);
font-size: 19px;
color: #23254C;
color: var(--text-color);
margin: 0 0 20px 0;
text-align: center;
width: 100%;
}
.form-table {
display: table;
width: 600px;
max-width: 600px;
overflow-x: hidden;
border-collapse: separate;
border-spacing: 0 20px;
table-layout: fixed;
}
.form-row {
display: table-row;
}
.form-label {
display: table-cell;
font-family: -apple-system, BlinkMacSystemFont, sans-serif;
font-family: var(--font-family);
font-size: 14pt;
color: #000000;
text-align: left;
width: 160px;
padding: 0 20px 0 0;
vertical-align: top;
white-space: nowrap;
overflow-wrap: break-word; /* Prevent overflow */
}
.initiative-name-label {
vertical-align: middle;
}
.goal-label {
vertical-align: top;
}
.label-number {
padding-right: 1px;
font-weight: bold;
}
.form-field,
.owner-display,
.invite-link {
display: table-cell;
vertical-align: middle;
padding: 0;
margin: 0;
}
.form-field {
font-family: -apple-system, BlinkMacSystemFont, sans-serif;
font-family: var(--font-family);
font-size: 14pt;
color: #6c6d84;
color: var(--sub-text-color);
border: 1px solid rgba(119,120,143,0.16);
border: 1px solid var(--border-color);
border-radius: 4px;
box-sizing: border-box;
padding: 4px 8px;
width: 400px;
max-width: 400px;
min-width: 400px;
overflow: hidden;
text-align: left;
line-height: 20px;
text-indent: 0px;
overflow-wrap: break-word; /* Prevent overflow */
}
.deadline-field {
width: 100px;
max-width: 200px;
min-width: 200px;
}
.initiative-name-field {
padding: 4px 8px;
height: 28px;
}
.goal-field {
width: 400px;
max-width: 400px;
min-width: 400px;
min-height: 60px;
resize: vertical;
line-height: 28px;
padding: 4px 8px;
text-indent: 8px;
text-align: left;
appearance: none;
-webkit-appearance: none;
overflow: hidden;
overflow-wrap: break-word; /* Prevent overflow */
}
.owner-display {
font-family: -apple-system, BlinkMacSystemFont, sans-serif;
font-family: var(--font-family);
font-size: 14pt;
color: #6c6d84;
color: var(--sub-text-color);
background: #f0f0f0;
border: 1px solid rgba(119,120,143,0.16);
border: 1px solid var(--border-color);
border-radius: 4px;
box-sizing: border-box;
padding: 4px 8px;
width: 400px;
max-width: 400px;
min-width: 400px;
text-align: left;
overflow: hidden;
text-overflow: ellipsis;
display: inline-block;
}
.invite-link {
color: #2D9BE4;
color: var(--primary-color);
text-decoration: underline;
cursor: pointer;
font-family: -apple-system, BlinkMacSystemFont, sans-serif;
font-family: var(--font-family);
font-size: 14pt;
}
.invite-link:hover {
color: #1a7cc3;
}
.checkbox-group {
display: flex;
justify-content: flex-end;
width: 600px;
max-width: 600px;
margin: -5px 0 5px 0;
padding-right: 72px;
}
.checkbox-label {
display: flex;
align-items: flex-start;
font-family: -apple-system, BlinkMacSystemFont, sans-serif;
font-family: var(--font-family);
font-size: 14pt;
color: #000000;
}
.checkbox-label span {
margin-right: 10px;
margin-top: 5px;
}
.checkbox-input {
margin-left: 0;
margin-right: 5px;
position: relative;
top: 12px;
}
.create-initiative-modal-buttons {
display: flex;
justify-content: center;
width: 100%;
margin: 10px 0 0 0;
padding: 0;
}
.create-initiative-modal-buttons button {
padding: 10px 20px;
margin: 0 5px;
font-family: -apple-system, BlinkMacSystemFont, sans-serif;
font-family: var(--font-family);
font-size: 15pt;
border: none;
border-radius: 19px;
cursor: pointer;
}
.create-initiative-modal-buttons button:first-child {
background: #2D9BE4;
background: var(--primary-color);
color: #FFFFFF;
}
.create-initiative-modal-buttons button:last-child {
background: #F5F5F5;
background: var(--button-bg);
color: #6c6d84;
color: var(--sub-text-color);
}
.checkbox-lists-container {
width: 100%;
margin: 0;
padding: 0;
display: flex;
gap: 10px;
justify-content: flex-start;
}
.checkbox-wrapper {
width: 175px;
}
.channels-field {
border: none;
padding: 0;
}
/* Media query for laptop screens */
@media (max-width: 1366px) {
.initiative-modal {
width: 95vw;
padding: 0.5rem;
max-height: 85vh;
height: auto;
  }
.initiative-modal-content {
padding: 0.375rem;
  }
.tab-content {
gap: 0.5%;
  }
.initiative-modal .tab-content .left-column {
padding: 0.5rem;
  }
.initiative-modal .tab-content .right-column {
padding: 0.5rem;
  }
.initiative-modal .tab-content .left-column .confidence-trend {
margin-bottom: 0.125rem;
  }
.initiative-modal .tab-content .left-column .confidence-trend h3 {
margin: 0.625rem 0 0.3125rem;
  }
.initiative-modal .tab-content .left-column .confidence-trend canvas {
height: 11.25rem !important;
  }
.initiative-modal .tab-content .left-column .confidence-trend .vote-balls {
margin-top: 0.25rem;
  }
.initiative-goal p {
margin: 0 0 0.5rem;
  }
.initiative-status .status-row {
margin-bottom: 0;
  }
.comment-item {
margin-bottom: 0.25rem;
  }
.modal-message {
margin-top: 0.3125rem;
  }
.initiative-modal-buttons {
margin-top: 0.625rem;
  }
.overview-tab-content {
gap: 0.5%;
padding: 0.375rem; /* 6px */
  }
.overview-left-column, .overview-right-column {
padding: 0.375rem; /* 6px */
  }
.initiative-goal {
margin-bottom: 0.5rem; /* 8px */
  }
.goal-header {
margin-bottom: 0.1875rem; /* 3px */
  }
.initiative-goal p {
margin: 0;
  }
.confidence-score-label, .status-completed, .deadline-label {
font-size: 0.875rem; /* 14px */
  }
.confidence-score-value {
font-size: 1.3em;
  }
.initiative-status {
margin-bottom: 0.625rem; /* 10px */
  }
.status-row {
margin-bottom: 0;
  }
.confidence-trend {
margin-bottom: 0.125rem; /* 2px */
  }
.confidence-trend h3 {
margin: 0.625rem 0 0.3125rem; /* 10px 5px */
  }
.initiative-modal-buttons {
margin-top: 1.25rem; /* 20px */
  }
.overview-tab-content .overview-comment-feed-container {
max-height: 25rem; /* 400px */
  }
.team-members-container {
gap: 1rem;
gap: var(--spacing-base); /* 16px reduced */
  }
.team-members-members-list,
.team-members-observers-list {
max-width: clamp(15rem, 50vw, 18.75rem);
max-width: clamp(15rem, 50vw, var(--list-max-width)); /* Adaptive */
  }
.team-members-modal-buttons {
margin-top: 0.625rem; /* 10px */
  }
.SubTreeDisplay {
width: 100%;
  }
.tree-view {
width: calc(100% - 2rem); /* Matches reduced padding */
max-height: calc(85vh - 9.375rem); /* Adjusted for smaller screens */
  }
.team-members-modal-buttons {
margin-top: 0.625rem; /* 10px */
  }
.edit-details-tab-content {
max-width: 90%;
padding: 0.5rem 0; /* 8px 0 */
margin-bottom: 2.25rem; /* 36px */
  }
.form-table {
width: 100%;
max-width: 100%;
border-spacing: 0 0.75rem; /* 12px */
table-layout: auto;
  }
.form-row {
display: table-row;
gap: 0.5rem; /* Reduced gap */
  }
.form-label {
width: 9.375rem; /* 150px */
padding: 0 0.625rem 0 0; /* 10px right */
font-size: 1rem; /* 16px */
  }
.form-field,
.owner-display {
width: clamp(20rem, 50vw, 25rem); /* Adaptive 320px to 400px */
max-width: clamp(20rem, 50vw, 25rem);
min-width: clamp(20rem, 50vw, 25rem);
padding: 0.1875rem 0.375rem; /* 3px 6px */
margin-left: 0.625rem; /* 10px */
font-size: 0.9375rem; /* 15px */
  }
.form-field[id="parent_initiative"] {
border: none;
background-color: #FFFFFF;
  }
.goal-field {
width: clamp(20rem, 50vw, 25rem);
max-width: clamp(20rem, 50vw, 25rem);
min-width: clamp(20rem, 50vw, 25rem);
min-height: 3.75rem; /* 60px */
padding: 0.1875rem 0.375rem; /* 3px 6px */
margin-left: 0.625rem; /* 10px */
font-size: 0.9375rem; /* 15px */
border: none;
background-color: #FFFFFF;
  }
.edit-details-tab-content h2 {
margin: 0 0 0.5rem; /* 8px */
  }
.checkbox-group {
width: 100%;
max-width: clamp(30rem, 80vw, 37.5rem); /* 480px to 600px */
padding-right: 7.8125rem; /* 125px */
margin: -0.5rem 0 0.75rem; /* -8px 0 12px */
gap: 1rem * 1.25;
gap: var(--spacing-base) * 1.25; /* 20px */
  }
.checkbox-group .checkbox-label {
font-size: 1rem; /* 16px */
  }
.edit-details-modal-buttons {
margin: 0.5rem 0 0 0; /* 8px 0 0 0 */
  }
.edit-details-modal-buttons button {
font-size: 0.9375rem; /* 15px */
  }
.check-ins-tab-content {
max-width: 90%;
padding: 0;
  }
.form-container {
gap: 1rem;
gap: var(--spacing-base); /* 16px */
margin-left: 3.4375rem; /* 55px */
  }
.form-label {
font-size: 1rem; /* 16px */
width: 9.6875rem; /* 155px */
  }
.form-field-select {
width: clamp(15rem, 50vw, 20.625rem); /* 240px to 330px */
padding: 0.1875rem 0.375rem; /* 3px 6px */
font-size: 0.9375rem; /* 15px */
height: 2.125rem; /* 34px */
border: 0; /* Removed border */
  }
.frequency-toggle {
justify-content: center;
  }
.day-row {
gap: 0.5rem; /* 8px */
padding: 0.0625rem 0; /* Minor padding adjustment */
  }
.day-checkbox {
font-size: 1rem; /* 16px */
  }
.check-ins-tab .checkbox-label {
font-size: 1rem; /* 16px */
  }
.channel-item {
margin-bottom: 0.5rem; /* Adjusted for laptop spacing */
  }
/* Create-specific media adjustments */
.create-initiative-modal {
width: 95vw;
padding: 20px 5px 10px 20px;
height: auto;
  }
.create-initiative-modal-content {
width: 90%;
  }
.form-table {
width: 100%;
border-spacing: 0 15px;
  }
.form-label {
width: 140px;
padding: 0 15px 0 0;
  }
.form-field {
width: 100%;
max-width: none;
min-width: none;
  }
.goal-field {
width: 100%;
max-width: none;
min-width: none;
  }
.checkbox-group {
padding-right: 50px;
  }
}
/* Media query for mobile screens */
@media (max-width: 768px) {
.tab-content {
flex-direction: column;
gap: 0.625rem;
  }
.initiative-modal .tab-content .left-column,
.initiative-modal .tab-content .right-column {
width: 100%;
padding: 0.3125rem;
  }
.initiative-modal-tabs {
flex-wrap: wrap;
justify-content: center;
  }
.tab {
flex: 1 1;
min-width: auto;
  }
.initiative-modal-content {
padding: 0.3125rem;
  }
.overview-tab-content {
flex-direction: column;
gap: 0.625rem; /* 10px */
padding: 0.3125rem; /* 5px */
  }
.overview-left-column,
.overview-right-column {
width: 100%;
padding: 0.3125rem; /* 5px */
  }
.initiative-modal-buttons {
flex-direction: column;
gap: 0.3125rem; /* 5px */
  }
.overview-tab-content .overview-comment-feed-container {
max-height: 18.75rem; /* 300px */
  }
.team-members-container {
flex-direction: column;
align-items: center;
gap: 1rem * 0.625;
gap: var(--spacing-base) * 0.625; /* 10px */
  }
.team-members-members-list,
.team-members-observers-list {
width: 100%;
max-width: none;
  }
.team-members-tab {
max-width: 100%;
  }
.team-members-action-buttons {
flex-direction: row;
flex-wrap: wrap;
justify-content: center;
min-width: auto;
padding: 0;
flex: 1 1;
  }
.team-members-invite-section {
flex-direction: column;
gap: 0.625rem; /* 10px */
  }
.team-members-invite-section input,
.team-members-invite-section button {
max-width: 100%;
  }
.team-members-modal-buttons {
flex-direction: column;
gap: 0.3125rem; /* 5px */
margin-top: 0.625rem; /* 10px */
  }
.SubTreeDisplay {
flex-direction: column;
  }
.tree-view {
width: 100%;
max-height: calc(80vh - 7.5rem); /* Further adjusted */
padding: 0.3125rem; /* 5px */
  }
.sub-tree-initiative-card {
width: 100%; /* Stack cards */
max-width: none;
  }
.zoom-controls {
justify-content: center;
margin-right: 0;
  }
.team-members-modal-buttons {
flex-direction: column;
gap: 0.3125rem; /* 5px */
margin-top: 0.3125rem; /* 5px */
  }
.edit-details-tab-content {
max-width: 100%;
padding: 0.3125rem 0; /* 5px 0 */
  }
.form-table {
display: flex;
flex-direction: column;
gap: 0.625rem; /* 10px */
border-spacing: 0;
  }
.form-row {
display: flex;
flex-direction: column;
align-items: flex-start;
gap: 0.3125rem; /* 5px */
  }
.form-label {
width: 100%;
padding: 0;
text-align: left;
  }
.form-field,
.owner-display {
width: 100%;
max-width: none;
min-width: none;
margin-left: 0;
  }
.goal-field {
width: 100%;
max-width: none;
min-width: none;
margin-left: 0;
  }
.checkbox-group {
justify-content: center;
padding-right: 0;
gap: 0.625rem; /* 10px */
margin: 0.3125rem 0; /* 5px 0 */
  }
.edit-details-modal-buttons {
flex-direction: column;
gap: 0.3125rem; /* 5px */
margin: 0.3125rem 0 0 0; /* 5px 0 0 0 */
  }
.check-ins-tab-content {
align-items: center;
  }
.form-container {
gap: 1rem * 0.625;
gap: var(--spacing-base) * 0.625; /* 10px */
margin-left: 0;
  }
.form-row {
flex-direction: column;
align-items: center;
gap: 0.3125rem; /* 5px */
  }
.form-label {
width: 100%;
text-align: center;
  }
.form-field {
align-items: center;
  }
.channel-row {
flex-wrap: wrap; /* Allow wrap on mobile if needed */
justify-content: center;
gap: 0.3125rem; /* Reduced gap for mobile */
  }
.form-field-select {
width: 100%;
max-width: none;
border: 0; /* Removed border */
  }
.frequency-toggle {
justify-content: center;
  }
.day-row {
flex-wrap: wrap;
justify-content: center;
gap: 0.3125rem; /* 5px */
padding: 0.0625rem 0; /* Minor padding */
  }
.checkbox-group {
flex-wrap: wrap;
justify-content: center;
gap: 0.625rem; /* 10px */
  }
.check-ins-tab .checkbox-label {
gap: 0.125rem; /* Reduced gap */
  }
.channel-item {
margin-bottom: 0.3125rem; /* Adjusted for mobile spacing */
  }
/* Create-specific mobile adjustments */
.create-initiative-modal {
width: 100vw;
padding: 15px 5px 10px 20px;
height: auto;
  }
.create-initiative-modal-content {
width: 100%;
  }
.form-table {
display: flex;
flex-direction: column;
gap: 10px;
  }
.form-row {
display: flex;
flex-direction: column;
  }
.form-label {
width: 100%;
padding: 0;
text-align: left;
  }
.form-field {
width: 100%;
max-width: none;
min-width: none;
  }
.goal-field {
width: 100%;
max-width: none;
min-width: none;
  }
.checkbox-group {
justify-content: center;
padding-right: 0;
  }
.create-initiative-modal-buttons {
flex-direction: column;
  }
}
.pause-field .checkbox-label {
flex-direction: row;
align-self: flex-start;
padding-bottom: 0.3125rem;
}
.header-right select {
font-size: 1.0625rem; /* Match tab bar text size */
font-weight: bold; /* Match tab bar boldness */
}
.initiatives-header {
  position: -webkit-sticky;
  position: sticky;
  top: 0;
  padding: 0; /* Zero padding for header units to avoid drifts */
  z-index: 3;
  background: #fff;
}






/* frontend/src/components/CommentFeed.css */
.comment-feed {
  width: 100%;
  padding: 0.625rem;
  overflow-y: auto;
  background: #F5F5F5;
  height: 100%;
  flex: 1 1;
}

.comment-feed h3 {
  font-family: -apple-system, BlinkMacSystemFont, sans-serif;
  font-size: 1rem;
  color: #23254C;
  margin: 0 0 0.625rem;
  text-align: center;
}

.comment-item {
  margin-bottom: 0.625rem;
  padding-bottom: 0.625rem;
}

.comment-item p {
  margin: 0;
  font-family: -apple-system, BlinkMacSystemFont, sans-serif;
  font-size: 0.875rem;
}

.comment-item p:first-child {
  font-weight: bold;
  color: #77788F;
}

.comment-feed-select {
  width: 100%;
  padding: 0.5rem;
  margin-bottom: 0.625rem;
  font-size: 1rem;
  border: 1px solid #ccc;
  border-radius: 4px;
  background-color: #fff;
}

.comment-feed-select:focus,
button:focus {
  outline: 2px solid #2D9BE4;
  outline-offset: 2px;
}

@media (max-width: 768px) {
  .comment-feed {
    padding: 0.3125rem;
  }

  .comment-feed h3 {
    font-size: 0.875rem;
    margin-bottom: 0.3125rem;
  }

  .comment-item {
    margin-bottom: 0.3125rem;
    padding-bottom: 0.3125rem;
  }

  .comment-item p {
    font-size: 0.75rem;
  }

  .comment-feed-select {
    font-size: 0.875rem;
    padding: 0.3125rem;
  }
}
/* ConfirmModal.css
 *
 * Corner pattern: condensed 2-layer version of the flourish used on
 * AddCommentModal. Two curved fin shapes in each of the bottom-left and
 * top-right corners:
 *   - Outer (lightest): light blue gradient at 10% opacity, applied via
 *     .modal-container::before and .modal-container::after.
 *   - Inner (accent):   solid #2D9BE4 at 30% opacity, applied via
 *     .modal-corner-bl::before and .modal-corner-tr::after. Requires
 *     two sibling divs inside .modal-container.
 *
 * Sizing is ~60% of the AddCommentModal pattern so it reads as a subtle
 * accent rather than dominating a 400px-wide confirm modal.
 *
 * Fallback: browsers without clip-path support get a flat tinted square
 * (see @supports block at the bottom).
 */
.modal-overlay {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: rgba(0, 0, 0, 0.5);
  display: flex;
  align-items: flex-start;
  justify-content: center;
  z-index: 1000;
  font-family: 'Helvetica-reg', sans-serif;
  padding-top: 15vh;
}

.modal-container {
  position: relative;
  background: white;
  padding: 30px;
  border-radius: 12px;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.2);
  width: 100%;
  max-width: 400px;
  text-align: center;
  overflow: hidden; /* clip the corner shapes to the rounded rectangle */
}

/* Outer layer — bottom-left, lightest */
.modal-container::before {
  content: '';
  position: absolute;
  bottom: 0;
  left: 0;
  width: 60px;
  height: 110px;
  background-image: linear-gradient(218deg, rgba(63, 219, 245, 0.10) 0%, rgba(12, 128, 210, 0.10) 97%);
  z-index: 0;
  -webkit-clip-path: path('M 0 110 H 60 C 50 74 30 37 0 0 Z');
  clip-path: path('M 0 110 H 60 C 50 74 30 37 0 0 Z');
  pointer-events: none;
}

/* Outer layer — top-right, lightest */
.modal-container::after {
  content: '';
  position: absolute;
  top: 0;
  right: 0;
  width: 60px;
  height: 110px;
  background-image: linear-gradient(218deg, rgba(63, 219, 245, 0.10) 0%, rgba(12, 128, 210, 0.10) 97%);
  z-index: 0;
  -webkit-clip-path: path('M 60 0 H 0 C 10 36 30 73 60 110 Z');
  clip-path: path('M 60 0 H 0 C 10 36 30 73 60 110 Z');
  pointer-events: none;
}

/* Inner accent — bottom-left, solid blue */
.modal-corner-bl {
  position: absolute;
  bottom: 0;
  left: 0;
  width: 40px;
  height: 70px;
  pointer-events: none;
  z-index: 1;
}
.modal-corner-bl::before {
  content: '';
  position: absolute;
  inset: 0;
  background: #2D9BE4;
  opacity: 0.3;
  -webkit-clip-path: path('M 0 70 H 40 C 33 48 20 24 0 0 Z');
  clip-path: path('M 0 70 H 40 C 33 48 20 24 0 0 Z');
}

/* Inner accent — top-right, solid blue */
.modal-corner-tr {
  position: absolute;
  top: 0;
  right: 0;
  width: 40px;
  height: 70px;
  pointer-events: none;
  z-index: 1;
}
.modal-corner-tr::after {
  content: '';
  position: absolute;
  inset: 0;
  background: #2D9BE4;
  opacity: 0.3;
  -webkit-clip-path: path('M 40 0 H 0 C 7 22 20 46 40 70 Z');
  clip-path: path('M 40 0 H 0 C 7 22 20 46 40 70 Z');
}

/* Keep the real content above the flourishes */
.modal-container > h3,
.modal-container > p,
.modal-container > .modal-buttons {
  position: relative;
  z-index: 2;
}

.modal-container h3 {
  font-size: 1.5rem;
  font-weight: 300;
  color: #23254c;
  margin-bottom: 15px;
}

.modal-container p {
  font-size: 1rem;
  color: #77788f;
  margin-bottom: 25px;
}

.modal-buttons {
  display: flex;
  gap: 10px;
}

.button-confirm {
  flex: 1 1;
  padding: 12px;
  background: linear-gradient(135deg, #36d1dc, #5b86e5);
  color: white;
  border: none;
  border-radius: 8px;
  font-size: 1rem;
  font-weight: 500;
  cursor: pointer;
  transition: all 0.3s ease;
}

.button-confirm:hover {
  transform: translateY(-2px);
  box-shadow: 0 5px 15px rgba(91, 134, 229, 0.3);
}

.button-cancel {
  flex: 1 1;
  padding: 12px;
  background: #f8f9fa;
  color: #23254c;
  border: 1px solid #ddd;
  border-radius: 8px;
  font-size: 1rem;
  font-weight: 500;
  cursor: pointer;
  transition: all 0.3s ease;
}

.button-cancel:hover {
  background: #e9ecef;
}

/* Fallback: browsers without clip-path get a flat tint */
@supports not ((-webkit-clip-path: path('M 0 0 L 1 0 L 0 1 Z')) or (clip-path: path('M 0 0 L 1 0 L 0 1 Z'))) {
  .modal-container::before,
  .modal-container::after,
  .modal-corner-bl::before,
  .modal-corner-tr::after {
    background: #2D9BE4;
    opacity: 0.08;
    border-radius: 12px;
    clip-path: none;
    -webkit-clip-path: none;
  }
}

@media (max-width: 768px) {
  .modal-container {
    padding: 20px;
  }
  /* Shrink the flourishes on small screens so they don't crowd the text */
  .modal-container::before,
  .modal-container::after {
    width: 48px;
    height: 88px;
  }
  .modal-corner-bl,
  .modal-corner-tr {
    width: 32px;
    height: 56px;
  }
}

/* ModalMessage.css */
:root {
  --success-bg: #d4edda;
  --success-color: #155724;
  --success-border: #28a745;
  --error-bg: #f8d7da;
  --error-color: #721c24;
  --error-border: #dc3545;
  --info-bg: #d1ecf1;
  --info-color: #0c5460;
  --info-border: #17a2b8;
  --spacing-base: 1rem;
  --border-radius-base: 0.3125rem; /* 5px */
}

.modal-message {
  padding: 1rem * 0.625;
  padding: var(--spacing-base) * 0.625; /* 10px */
  border-radius: 0.3125rem;
  border-radius: var(--border-radius-base);
  margin: 1rem * 0.625 0;
  margin: var(--spacing-base) * 0.625 0; /* 10px 0 */
  line-height: 1.5;
  font-size: 1rem;
}

.modal-message.success {
  background-color: #d4edda;
  background-color: var(--success-bg);
  color: #155724;
  color: var(--success-color);
  border: 1px solid #28a745;
  border: 1px solid var(--success-border);
}

.modal-message.error {
  background-color: #f8d7da;
  background-color: var(--error-bg);
  color: #721c24;
  color: var(--error-color);
  border: 1px solid #dc3545;
  border: 1px solid var(--error-border);
}

.modal-message.info, .modal-message.confirm {
  background-color: #d1ecf1;
  background-color: var(--info-bg);
  color: #0c5460;
  color: var(--info-color);
  border: 1px solid #17a2b8;
  border: 1px solid var(--info-border);
}

.modal-message:focus-visible {
  outline: 0.125rem solid #000;
}

/* Media query for mobile screens */
@media (max-width: 768px) {
  .modal-message {
    padding: 1rem * 0.3125;
    padding: var(--spacing-base) * 0.3125; /* 5px */
    margin: 1rem * 0.3125 0;
    margin: var(--spacing-base) * 0.3125 0; /* 5px 0 */
    font-size: 0.875rem; /* 14px */
  }
}

/* ShareInitiativeModal.css
 *
 * Styling for the share-initiative modal. Reuses the corner-flourish
 * pattern from ConfirmModal so the share modal feels like part of the
 * app's modal family. The modal is wider than the confirm modal (it
 * contains the artifact preview), so the corner flourishes are scaled
 * up roughly proportionally — closer to AddCommentModal's size than
 * ConfirmModal's condensed version.
 *
 * Font stack matches the rest of the app (-apple-system, BlinkMacSystem-
 * Font, sans-serif) so the modal chrome reads consistently with other
 * modals. The artifact inside the preview uses the same stack.
 *
 * Positioning uses padding-top: 15vh on the overlay — same trick as
 * ConfirmModal — so the modal lands clear of the 66px fixed top menu
 * regardless of viewport height.
 */

.share-modal-overlay {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: rgba(0, 0, 0, 0.5);
  display: flex;
  align-items: flex-start;
  justify-content: center;
  z-index: 2000;
  font-family: -apple-system, BlinkMacSystemFont, sans-serif;
  padding-top: 15vh;
  padding-bottom: 5vh;
  padding-left: 16px;
  padding-right: 16px;
  overflow-y: auto;
}

.share-modal-container {
  position: relative;
  background: white;
  padding: 30px;
  border-radius: 12px;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.2);
  width: 100%;
  max-width: 900px;
  overflow: hidden;
  font-family: -apple-system, BlinkMacSystemFont, sans-serif;
}

/* Outer flourish — bottom-left, lightest */
.share-modal-container::before {
  content: '';
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100px;
  height: 180px;
  background-image: linear-gradient(218deg, rgba(63, 219, 245, 0.10) 0%, rgba(12, 128, 210, 0.10) 97%);
  z-index: 0;
  -webkit-clip-path: path('M 0 180 H 100 C 83 121 50 60 0 0 Z');
  clip-path: path('M 0 180 H 100 C 83 121 50 60 0 0 Z');
  pointer-events: none;
}

/* Outer flourish — top-right, lightest */
.share-modal-container::after {
  content: '';
  position: absolute;
  top: 0;
  right: 0;
  width: 100px;
  height: 180px;
  background-image: linear-gradient(218deg, rgba(63, 219, 245, 0.10) 0%, rgba(12, 128, 210, 0.10) 97%);
  z-index: 0;
  -webkit-clip-path: path('M 100 0 H 0 C 17 59 50 120 100 180 Z');
  clip-path: path('M 100 0 H 0 C 17 59 50 120 100 180 Z');
  pointer-events: none;
}

/* Inner accent — bottom-left, solid blue */
.share-modal-corner-bl {
  position: absolute;
  bottom: 0;
  left: 0;
  width: 66px;
  height: 116px;
  pointer-events: none;
  z-index: 1;
}
.share-modal-corner-bl::before {
  content: '';
  position: absolute;
  inset: 0;
  background: #2D9BE4;
  opacity: 0.3;
  -webkit-clip-path: path('M 0 116 H 66 C 54 78 33 39 0 0 Z');
  clip-path: path('M 0 116 H 66 C 54 78 33 39 0 0 Z');
}

/* Inner accent — top-right, solid blue */
.share-modal-corner-tr {
  position: absolute;
  top: 0;
  right: 0;
  width: 66px;
  height: 116px;
  pointer-events: none;
  z-index: 1;
}
.share-modal-corner-tr::after {
  content: '';
  position: absolute;
  inset: 0;
  background: #2D9BE4;
  opacity: 0.3;
  -webkit-clip-path: path('M 66 0 H 0 C 12 38 33 77 66 116 Z');
  clip-path: path('M 66 0 H 0 C 12 38 33 77 66 116 Z');
}

/* Lift real content above the decorative layers */
.share-modal-header,
.share-modal-status,
.share-modal-preview,
.share-modal-controls {
  position: relative;
  z-index: 2;
}

.share-modal-header {
  position: relative;
  display: flex;
  justify-content: center;
  align-items: center;
  margin-bottom: 16px;
  min-height: 32px;
}

.share-modal-title {
  margin: 0;
  font-size: 1.5rem;
  font-weight: 700;
  color: #23254c;
  text-align: center;
}

.share-modal-close-x {
  position: absolute;
  top: 0;
  right: 0;
  background: none;
  border: none;
  font-size: 24px;
  line-height: 1;
  cursor: pointer;
  color: #6b6b6b;
  padding: 4px 8px;
}



.share-modal-status {
  padding: 8px 12px;
  margin-bottom: 12px;
  font-size: 13px;
  border-radius: 6px;
}

.share-modal-status.success {
  background: #e9f5ec;
  color: #1d6b3a;
}

.share-modal-status.error {
  background: #fdecea;
  color: #a3271f;
}

.share-modal-preview {
  background: #f0f0f0;
  padding: 24px;
  border-radius: 6px;
  overflow: auto;
  margin-bottom: 20px;
}

.share-modal-preview-inner {
  margin: 0 auto;
  width: -webkit-fit-content;
  width: fit-content;
}

.share-modal-controls {
  display: flex;
  align-items: center;
  gap: 24px;
  padding: 12px 16px;
  background: #f5f5f5;
  border-radius: 6px;
  flex-wrap: wrap;
}

.share-modal-checkbox-label {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 13px;
  cursor: pointer;
  color: #23254c;
}

.share-modal-buttons {
  margin-left: auto;
  display: flex;
  gap: 8px;
}

.share-modal-button {
  font-size: 13px;
  padding: 8px 16px;
  border-radius: 6px;
  cursor: pointer;
  font-family: inherit;
  font-weight: 500;
  transition: opacity 0.15s ease;
}

.share-modal-button:disabled {
  cursor: wait;
  opacity: 0.6;
}

.share-modal-button.secondary {
  background: #ffffff;
  color: #23254c;
  border: 1px solid #cccccc;
}

.share-modal-button.secondary:hover:not(:disabled) {
  background: #f8f9fa;
}

.share-modal-button.primary {
  background: linear-gradient(135deg, #36d1dc, #5b86e5);
  color: white;
  border: none;
}

.share-modal-button.primary:hover:not(:disabled) {
  transform: translateY(-1px);
  box-shadow: 0 4px 12px rgba(91, 134, 229, 0.3);
}

/* Fallback for browsers without clip-path support */
@supports not ((-webkit-clip-path: path('M 0 0 L 1 0 L 0 1 Z')) or (clip-path: path('M 0 0 L 1 0 L 0 1 Z'))) {
  .share-modal-container::before,
  .share-modal-container::after,
  .share-modal-corner-bl::before,
  .share-modal-corner-tr::after {
    background: #2D9BE4;
    opacity: 0.08;
    border-radius: 12px;
    clip-path: none;
    -webkit-clip-path: none;
  }
}

@media (max-width: 768px) {
  .share-modal-container {
    padding: 20px;
  }
  .share-modal-container::before,
  .share-modal-container::after {
    width: 70px;
    height: 130px;
  }
  .share-modal-corner-bl,
  .share-modal-corner-tr {
    width: 48px;
    height: 84px;
  }
  .share-modal-controls {
    gap: 12px;
  }
  .share-modal-buttons {
    margin-left: 0;
    width: 100%;
  }
}

/* Full updated AddMemberModal.css with agreed changes */
.add-member-modal-overlay {
  position: fixed;
  top: 166px;
  left: 0;
  width: 100%;
  height: calc(100% - 166px);
  background: rgba(0, 0, 0, 0.5);
  display: flex;
  justify-content: center;
  align-items: flex-start !important;
  z-index: 1600;
  pointer-events: auto;
}

.add-member-modal {
  position: relative;
  background: #FFFFFF;
  box-shadow: 0 20px 40px 0 rgba(0,0,0,0.05);
  border-radius: 16px;
  padding: 20px;
  width: 800px;
  min-width: 800px;
  height: 550px;
  max-height: 85vh;
  z-index: 1601;
  pointer-events: auto;
  border: 2px solid #2D9BE4;
  outline: none;
  box-sizing: border-box;
}

/* Bottom left shape - Largest (lightest) */
.add-member-modal::before {
  content: '';
  position: absolute;
  bottom: 0;
  left: 0;
  width: 96px;
  height: 178px;
  background-image: linear-gradient(218deg, rgba(63,219,245,0.10) 0%, rgba(12,128,210,0.10) 97%);
  opacity: 1;
  z-index: 1610;
  -webkit-clip-path: path('M 0 178 H 96 C 80 120 48 60 0 0 Z');
  clip-path: path('M 0 178 H 96 C 80 120 48 60 0 0 Z');
}

/* Bottom left shape - Middle (darker) */
.add-member-modal-left-layer1::before {
  content: '';
  position: absolute;
  bottom: 0;
  left: 0;
  width: 70px;
  height: 200px;
  background: #2D9BE4;
  opacity: 0.2;
  z-index: 1611;
  -webkit-clip-path: path('M 0 200 H 70 C 60 140 35 70 0 0 Z');
  clip-path: path('M 0 200 H 70 C 60 140 35 70 0 0 Z');
}

/* Bottom left shape - Smallest (darkest) */
.add-member-modal-left-layer2::before {
  content: '';
  position: absolute;
  bottom: 0;
  left: 0;
  width: 50px;
  height: 100px;
  background: #2D9BE4;
  z-index: 1612;
  -webkit-clip-path: path('M 0 100 H 50 C 40 70 20 30 0 0 Z');
  clip-path: path('M 0 100 H 50 C 40 70 20 30 0 0 Z');
}

/* Top right shape - Largest (lightest) */
.add-member-modal::after {
  content: '';
  position: absolute;
  top: 0;
  right: 0;
  width: 96px;
  height: 178px;
  background-image: linear-gradient(218deg, rgba(63,219,245,0.10) 0%, rgba(12,128,210,0.10) 97%);
  opacity: 1;
  z-index: 1610;
  -webkit-clip-path: path('M 96 0 H 0 C 16 58 48 118 96 178 Z');
  clip-path: path('M 96 0 H 0 C 16 58 48 118 96 178 Z');
}

/* Top right shape - Middle (darker) */
.add-member-modal-right-layer1::after {
  content: '';
  position: absolute;
  top: 0;
  right: 0;
  width: 70px;
  height: 200px;
  background: #2D9BE4;
  opacity: 0.2;
  z-index: 1611;
  -webkit-clip-path: path('M 70 0 H 0 C 10 60 35 130 70 200 Z');
  clip-path: path('M 70 0 H 0 C 10 60 35 130 70 200 Z');
}

/* Top right shape - Smallest (darkest) */
.add-member-modal-right-layer2::after {
  content: '';
  position: absolute;
  top: 0;
  right: 0;
  width: 50px;
  height: 100px;
  background: #2D9BE4;
  z-index: 1612;
  -webkit-clip-path: path('M 50 0 H 0 C 10 30 30 70 50 100 Z');
  clip-path: path('M 50 0 H 0 C 10 30 30 70 50 100 Z');
}

.add-member-modal-header {
  text-align: center;
  margin-bottom: 20px;
  padding: 10px 0;
  background: transparent;
  border-bottom: 1px solid rgba(119,120,143,0.16);
  position: relative;
  z-index: 2;
}

.add-member-modal-title {
  font-family: -apple-system, BlinkMacSystemFont, sans-serif;
  font-size: 20px;
  color: #23254C;
  display: flex;
  justify-content: center;
  width: 100%;
}

.add-member-email-invite-header {
  display: flex;
  justify-content: center;
  align-items: center;
  padding: 10px 0;
  background: rgba(231,245,251,0.35);
  border-bottom: 1px solid rgba(119,120,143,0.16);
  margin-top: 10px;
}

.add-member-email-invite-header input {
  padding: 5px;
  width: 400px;
  border: 1px solid rgba(119,120,143,0.16);
  border-radius: 4px;
  font-family: -apple-system, BlinkMacSystemFont, sans-serif;
  font-size: 15.33px; /* Increased from 14px by 1pt (~1.333px) */
}

.add-member-modal-content {
  padding: 0 20px 20px;
}

.add-member-modal-buttons {
  display: flex;
  justify-content: center;
  gap: 10px; /* Changed from 40px to match OverviewTab */
  margin-top: 20px;
}

.add-member-modal-button {
  padding: 8px 16px;
  width: 100px;
  cursor: pointer;
  background: #2D9BE4;
  color: #FFFFFF;
  border: 1px solid rgba(119,120,143,0.16);
  border-radius: 20px;
  font-family: -apple-system, BlinkMacSystemFont, sans-serif;
  font-size: 14px;
  text-align: center;
}

.add-member-modal-button:hover {
  background: #1a7cc3;
}

.add-member-modal-button.close-button {
  background: #F5F5F5; /* Grey to match OverviewTab */
  color: #77788F;
}

.add-member-modal-button.close-button:hover {
  background: #E0E0E0; /* Slightly darker grey on hover */
}

.add-member-available-users-header {
  font-family: -apple-system, BlinkMacSystemFont, sans-serif;
  font-size: 16px;
  color: #23254C;
  margin: 20px 0 10px;
  text-align: center;
}

.add-member-user-list {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  justify-content: center;
  max-height: 350px;
  max-width: 760px;
  overflow-y: auto;
}

.add-member-user-card {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 10px;
  border: 1px solid rgba(119,120,143,0.16);
  border-radius: 4px;
  cursor: pointer;
  width: 100px;
  text-align: center;
}

.add-member-user-card.selected {
  border: 2px solid #28a745;
}

.add-member-user-avatar {
  width: 40px;
  height: 40px;
  border-radius: 20px;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  margin-bottom: 5px;
}

.add-member-avatar-image {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.add-member-initials {
  font-family: -apple-system, BlinkMacSystemFont, sans-serif;
  font-size: 14px;
  color: #2D9BE4;
  background-image: radial-gradient(circle at 50% 50%, rgba(243,250,255,0.50) 0%, rgba(227,244,255,0.50) 50%);
}

.add-member-user-details {
  display: flex;
  flex-direction: column;
}

.add-member-user-name {
  font-family: -apple-system, BlinkMacSystemFont, sans-serif;
  font-size: 12px;
  color: #23254C;
  overflow-wrap: break-word;
}

.add-member-user-role {
  font-family: -apple-system, BlinkMacSystemFont, sans-serif;
  font-size: 10px;
  color: #77788F;
  overflow-wrap: break-word;
}

/* Accessibility: Focus styles for interactive elements */
.add-member-modal-button:focus-visible,
.add-member-user-card:focus-visible,
input:focus-visible {
  outline: 2px solid #2D9BE4;
}

/* Grouped pseudo-elements for shapes (performance optimization) */
.add-member-modal::before,
.add-member-modal-left-layer1::before,
.add-member-modal-left-layer2::before,
.add-member-modal::after,
.add-member-modal-right-layer1::after,
.add-member-modal-right-layer2::after {
  content: '';
  position: absolute;
  z-index: 1610; /* Default, override per selector */
}

/* Media Queries for Responsiveness */
@media (max-width: 768px) {
  .add-member-modal {
    width: 90%;
    min-width: auto;
    height: auto;
  }

  .add-member-email-invite-header input {
    width: 100%;
  }

  .add-member-user-list {
    flex-direction: column;
    align-items: center;
    max-width: 100%;
  }

  .add-member-user-card {
    width: 80%;
  }

  .add-member-modal-buttons {
    flex-direction: column;
    gap: 10px;
  }

  .add-member-modal-button {
    width: 100%;
  }
}

@media (max-width: 480px) {
  .add-member-modal-title {
    font-size: 18px;
  }

  .add-member-available-users-header {
    font-size: 14px;
  }

  .add-member-user-name {
    font-size: 11px;
  }

  .add-member-user-role {
    font-size: 9px;
  }

  .add-member-modal-button {
    font-size: 13px;
  }
}
.user-checkbox-list {
  margin-bottom: 10px;
  width: 100%;
}

.user-checkbox-list h3 {
  margin: 0 0 5px 0;
  font-size: 16px;
  color: #23254C;
  text-align: center;
}

.checkbox-container {
  width: 240px; /* Fixed width, no max */
  height: 224px;
  overflow-y: auto;
  border: 1px solid #ccc;
  border-radius: 4px;
  background: #fff;
  margin: 0 auto; /* Center within parent */
}

.checkbox-row {
  display: flex;
  align-items: center;
  height: 32px;
  width: 100%;
}

.name-cell {
  flex: 1 1;
  min-width: 180px;
  padding: 2px 5px;
  text-align: left;
  white-space: nowrap;
}

.checkbox-cell {
  min-width: 20px;
  margin-right: 20px;
  display: flex;
  justify-content: flex-end;
}

.checkbox-cell input {
  margin: 0;
}
/* Full updated CheckInModal.css with agreed changes */
/* CheckInModal.css */
.checkin-modal-overlay {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0.5);
  display: flex;
  justify-content: center;
  align-items: flex-start !important;
  z-index: 1500;
  pointer-events: auto;
}

.checkin-modal {
  position: relative;
  background: #FFFFFF;
  box-shadow: 0 20px 40px 0 rgba(0,0,0,0.05);
  border-radius: 16px;
  padding: 20px;
  width: 500px;
  min-height: 500px;
  max-height: 90vh;
  overflow-y: auto;
  z-index: 1501;
  pointer-events: auto;
  border: none;
  outline: none;
  margin-top: 156px;
  box-sizing: border-box;
}

/* Bottom left shape - Largest (lightest) */
.checkin-modal::before {
  content: '';
  position: absolute;
  bottom: 0;
  left: 0;
  width: 96px;
  height: 178px;
  background-image: linear-gradient(218deg, rgba(63,219,245,0.10) 0%, rgba(12,128,210,0.10) 97%);
  opacity: 1;
  z-index: 1002;
  -webkit-clip-path: path('M 0 178 H 96 C 80 120 48 60 0 0 Z');
  clip-path: path('M 0 178 H 96 C 80 120 48 60 0 0 Z');
}

/* Bottom left shape - Middle (darker) */
.checkin-modal-left-layer1::before {
  content: '';
  position: absolute;
  bottom: 0;
  left: 0;
  width: 70px;
  height: 200px;
  background: #2D9BE4;
  opacity: 0.2;
  z-index: 1003;
  -webkit-clip-path: path('M 0 200 H 70 C 60 140 35 70 0 0 Z');
  clip-path: path('M 0 200 H 70 C 60 140 35 70 0 0 Z');
}

/* Bottom left shape - Smallest (darkest) */
.checkin-modal-left-layer2::before {
  content: '';
  position: absolute;
  bottom: 0;
  left: 0;
  width: 50px;
  height: 100px;
  background: #2D9BE4;
  z-index: 1004;
  -webkit-clip-path: path('M 0 100 H 50 C 40 70 20 30 0 0 Z');
  clip-path: path('M 0 100 H 50 C 40 70 20 30 0 0 Z');
}

/* Top right shape - Largest (lightest) */
.checkin-modal::after {
  content: '';
  position: absolute;
  top: 0;
  right: 0;
  width: 96px;
  height: 178px;
  background-image: linear-gradient(218deg, rgba(63,219,245,0.10) 0%, rgba(12,128,210,0.10) 97%);
  opacity: 1;
  z-index: 1002;
  -webkit-clip-path: path('M 96 0 H 0 C 16 58 48 118 96 178 Z');
  clip-path: path('M 96 0 H 0 C 16 58 48 118 96 178 Z');
}

/* Top right shape - Middle (darker) */
.checkin-modal-right-layer1::after {
  content: '';
  position: absolute;
  top: 0;
  right: 0;
  width: 70px;
  height: 200px;
  background: #2D9BE4;
  opacity: 0.2;
  z-index: 1003;
  -webkit-clip-path: path('M 70 0 H 0 C 10 60 35 130 70 200 Z');
  clip-path: path('M 70 0 H 0 C 10 60 35 130 70 200 Z');
}

/* Top right shape - Smallest (darkest) */
.checkin-modal-right-layer2::after {
  content: '';
  position: absolute;
  top: 0;
  right: 0;
  width: 50px;
  height: 100px;
  background: #2D9BE4;
  z-index: 1004;
  -webkit-clip-path: path('M 50 0 H 0 C 10 30 30 70 50 100 Z');
  clip-path: path('M 50 0 H 0 C 10 30 30 70 50 100 Z');
}

.checkin-modal-content {
  display: flex !important;
  flex-direction: column !important;
  align-items: center;
}

h2 {
  font-family: -apple-system, BlinkMacSystemFont, sans-serif;
  font-size: 18px;
  color: #23254C;
  margin-bottom: 20px;
  text-align: center;
}

label {
  font-family: -apple-system, BlinkMacSystemFont, sans-serif;
  font-size: 17px;
  color: #77788F;
  margin-top: 10px;
  text-align: center;
}

.check-in-initiative-name-label,
.check-in-goal-label,
.confidence-label {
  color: #000000;
}

.check-in-goal-label {
  padding-right: 0px; /* Shift text left by ~6 characters */
}

.confidence-label {
  width: 90%;
  font-weight: bold;
  font-style: italic;
  margin-top: 20px;
  overflow-wrap: break-word;
}

.check-in-initiative-name-input,
.check-in-goal-input {
  text-align: center !important; /* Ensure text inside fields is centered */
  background: #F5F5F5;
}

input,
textarea {
  width: 70%;
  margin: 5px auto 10px;
  padding: 8px;
  font-family: -apple-system, BlinkMacSystemFont, sans-serif;
  font-size: 17px;
  color: #77788F;
  border: 1px solid rgba(119,120,143,0.16);
  border-radius: 4px;
  text-align: center;
  box-sizing: border-box;
}

.check-in-goal-field-wrapper {
  width: 90%;
  margin: 0 auto;
  display: block;
  text-align: center;
}

textarea {
  width: 100% !important;
  min-height: 18px;
  resize: none;
  line-height: 18px;
  padding-top: 0;
  padding-bottom: 0;
  border: none;
  font-size: 18px;
  box-sizing: border-box;
}

.vote-buttons {
  display: flex;
  justify-content: center;
  margin: 17px 0;
}

.tooltip-wrapper {
  position: relative;
  display: inline-block;
}

.vote-button {
  width: 60px;
  height: 40px;
  margin: 0 2px;
  padding: 0 5px;
  font-family: -apple-system, BlinkMacSystemFont, sans-serif;
  font-size: 16px;
  color: #FFFFFF;
  background: #F5F5F5;
  border: none;
  border-radius: 4px;
  cursor: pointer;
  transition: all 0.2s ease;
  display: flex;
  align-items: center;
  justify-content: center;
  will-change: transform; /* Performance: Hint GPU for transitions */
}

.tooltip {
  visibility: hidden;
  position: absolute;
  bottom: 100%;
  left: 50%;
  transform: translateX(-50%);
  background: #333;
  color: #FFFFFF;
  font-family: -apple-system, BlinkMacSystemFont, sans-serif;
  font-size: 15px;
  font-weight: bold;
  font-style: italic;
  padding: 5px 10px;
  border-radius: 4px;
  white-space: nowrap;
  z-index: 1000;
  margin-bottom: 5px;
}

.tooltip-wrapper:hover .tooltip,
.tooltip-wrapper:focus .tooltip {
  visibility: visible;
}

/* Color coding for vote buttons */
.vote-button.vote-1 {
  background-color: #D9534F;
}

.vote-button.vote-1.selected {
  background-color: #C9302C;
  box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.2);
}

.vote-button.vote-2 {
  background-color: #E06666;
}

.vote-button.vote-2.selected {
  background-color: #D9534F;
  box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.2);
}

.vote-button.vote-3 {
  background-color: #F1C40F;
  color: #333333;
}

.vote-button.vote-3.selected {
  background-color: #E0B107;
  box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.2);
}

.vote-button.vote-4 {
  background-color: #5CB85C;
}

.vote-button.vote-4.selected {
  background-color: #4CAE4C;
  box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.2);
}

.vote-button.vote-5 {
  background-color: #28A745;
}

.vote-button.vote-5.selected {
  background-color: #218838;
  box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.2);
}

.blocker-checkbox {
  margin: 10px 0;
}

.checkin-modal-buttons {
  display: flex;
  justify-content: center;
  margin-top: 20px;
}

.checkin-modal-buttons button {
  padding: 10px 20px;
  margin: 0 5px;
  font-family: -apple-system, BlinkMacSystemFont, sans-serif;
  font-size: 14px;
  border: none;
  border-radius: 19px;
  cursor: pointer;
}

.checkin-modal-buttons button:first-child {
  background: #2D9BE4;
  color: #FFFFFF;
}

.checkin-modal-buttons button:last-child {
  background: #F5F5F5;
  color: #77788F;
}

/* Accessibility: Focus styles for interactive elements */
.vote-button:focus-visible,
.checkin-modal-buttons button:focus-visible,
input:focus-visible,
textarea:focus-visible {
  outline: 2px solid #2D9BE4;
}

/* Browser Compatibility Fallbacks */
@supports not ((-webkit-clip-path: path('M 0 178 H 96 C 80 120 48 60 0 0 Z')) or (clip-path: path('M 0 178 H 96 C 80 120 48 60 0 0 Z'))) {
  .checkin-modal::before,
  .checkin-modal-left-layer1::before,
  .checkin-modal-left-layer2::before,
  .checkin-modal::after,
  .checkin-modal-right-layer1::after,
  .checkin-modal-right-layer2::after {
    background: #2D9BE4; /* Fallback solid color */
    opacity: 0.1;
    border-radius: 16px; /* Approximate shape */
  }
}

/* Grouped pseudo-elements for performance optimization */
.checkin-modal::before,
.checkin-modal-left-layer1::before,
.checkin-modal-left-layer2::before,
.checkin-modal::after,
.checkin-modal-right-layer1::after,
.checkin-modal-right-layer2::after {
  content: '';
  position: absolute;
  will-change: transform; /* Hint for smoother animations if any */
}

/* Media Queries for Responsiveness */
@media (max-width: 768px) {
  .checkin-modal {
    width: 90%;
    margin-top: 100px;
  }

  .vote-buttons {
    flex-wrap: wrap;
    justify-content: center;
    gap: 10px;
  }

  .vote-button {
    width: 50px;
    height: 35px;
    font-size: 14px;
  }

  label {
    font-size: 15px;
  }

  input,
  textarea {
    width: 100%;
    font-size: 15px;
  }

  .confidence-label {
    font-size: 15px;
  }

  .checkin-modal-buttons button {
    width: 100%;
    margin: 5px 0;
  }
}

@media (max-width: 480px) {
  h2 {
    font-size: 16px;
  }

  label {
    font-size: 14px;
  }

  input,
  textarea {
    font-size: 14px;
  }

  .vote-button {
    width: 45px;
    height: 30px;
    font-size: 13px;
  }

  .tooltip {
    font-size: 13px;
  }

  .checkin-modal-buttons button {
    font-size: 12px;
    padding: 8px 16px;
  }
}
/* Full updated AddCommentModal.css with agreed changes */
/* CommentModal.css */
.comment-modal-message {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0.5);
  display: flex;
  justify-content: center;
  align-items: flex-start;
  z-index: 1500;
  pointer-events: auto;
}
.comment-modal {
  position: relative;
  background: #FFFFFF;
  box-shadow: 0 20px 40px 0 rgba(0,0,0,0.05);
  border-radius: 16px;
  padding: 20px;
  width: 500px;
  min-height: 500px;
  max-height: 90vh;
  overflow-y: auto;
  z-index: 1501;
  pointer-events: auto;
  border: none;
  outline: none;
  margin-top: 156px;
  box-sizing: border-box;
}
/* Bottom left shape - Largest (lightest) */
.comment-modal::before {
  content: '';
  position: absolute;
  bottom: 0;
  left: 0;
  width: 96px;
  height: 178px;
  background-image: linear-gradient(218deg, rgba(63,219,245,0.10) 0%, rgba(12,128,210,0.10) 97%);
  opacity: 1;
  z-index: 0;
  -webkit-clip-path: path('M 0 178 H 96 C 80 120 48 60 0 0 Z');
  clip-path: path('M 0 178 H 96 C 80 120 48 60 0 0 Z');
}
/* Bottom left shape - Middle (darker) */
.comment-modal-left-layer1::before {
  content: '';
  position: absolute;
  bottom: 0;
  left: 0;
  width: 70px;
  height: 200px;
  background: #2D9BE4;
  opacity: 0.2;
  z-index: 1;
  -webkit-clip-path: path('M 0 200 H 70 C 60 140 35 70 0 0 Z');
  clip-path: path('M 0 200 H 70 C 60 140 35 70 0 0 Z');
}
/* Bottom left shape - Smallest (darkest) */
.comment-modal-left-layer2::before {
  content: '';
  position: absolute;
  bottom: 0;
  left: 0;
  width: 50px;
  height: 100px;
  background: #2D9BE4;
  z-index: 2;
  -webkit-clip-path: path('M 0 100 H 50 C 40 70 20 30 0 0 Z');
  clip-path: path('M 0 100 H 50 C 40 70 20 30 0 0 Z');
}
/* Top right shape - Largest (lightest) */
.comment-modal::after {
  content: '';
  position: absolute;
  top: 0;
  right: 0;
  width: 96px;
  height: 178px;
  background-image: linear-gradient(218deg, rgba(63,219,245,0.10) 0%, rgba(12,128,210,0.10) 97%);
  opacity: 1;
  z-index: 0;
  -webkit-clip-path: path('M 96 0 H 0 C 16 58 48 118 96 178 Z');
  clip-path: path('M 96 0 H 0 C 16 58 48 118 96 178 Z');
}
/* Top right shape - Middle (darker) */
.comment-modal-right-layer1::after {
  content: '';
  position: absolute;
  top: 0;
  right: 0;
  width: 70px;
  height: 200px;
  background: #2D9BE4;
  opacity: 0.2;
  z-index: 1;
  -webkit-clip-path: path('M 70 0 H 0 C 10 60 35 130 70 200 Z');
  clip-path: path('M 70 0 H 0 C 10 60 35 130 70 200 Z');
}
/* Top right shape - Smallest (darkest) */
.comment-modal-right-layer2::after {
  content: '';
  position: absolute;
  top: 0;
  right: 0;
  width: 50px;
  height: 100px;
  background: #2D9BE4;
  z-index: 2;
  -webkit-clip-path: path('M 50 0 H 0 C 10 30 30 70 50 100 Z');
  clip-path: path('M 50 0 H 0 C 10 30 30 70 50 100 Z');
}
.comment-modal-content {
  display: flex;
  flex-direction: column;
  align-items: center;
  position: relative;
  z-index: 3;
}

h2 {
  font-family: -apple-system, BlinkMacSystemFont, sans-serif;
  font-size: 18px;
  color: #23254C;
  margin-bottom: 20px;
  text-align: center;
}

label {
  font-family: -apple-system, BlinkMacSystemFont, sans-serif;
  font-size: 17px;
  color: #77788F;
  margin-top: 9px;
  text-align: center;
}

.comment-initiative-name-label,
.comment-goal-label,
.comment-label {
  color: #000000;
}

.field-group {
  display: flex;
  align-items: flex-start;
  width: 90%;
  margin: 10px 0;
  justify-content: center; /* Changed to center */
  flex-wrap: wrap;
}

.comment-initiative-field {
  display: flex;
  flex-direction: column;
  align-items: center;
  width: 100%;
  margin: 2px 0;
}

.checkbox-field-group {
  display: grid;
  grid-template-columns: 120px 1fr;
  align-items: center;
  width: 90%;
  margin: 5px 0;
  justify-content: center;
  position: relative;
  top: -5px;
}

.blank-label {
  width: 120px;
  text-align: right;
  margin-right: 10px;
  padding-bottom: 2px;
  box-sizing: border-box;
}

.initiative-name-input {
  width: 250px;
  margin: 5px 0 9px;
  padding: 8px;
  font-family: -apple-system, BlinkMacSystemFont, sans-serif;
  font-size: 17px;
  color: #77788F;
  border: none;
  border-radius: 4px;
  box-sizing: border-box;
  text-align: center;
  background: #F5F5F5;
  overflow-wrap: break-word;
}

.goal-input {
  width: 250px;
  padding: 8px;
  font-family: -apple-system, BlinkMacSystemFont, sans-serif;
  font-size: 17px;
  color: #77788F;
  border: none;
  border-radius: 4px;
  box-sizing: border-box;
  text-align: center;
  background: #F5F5F5;
  min-height: 46px;
  resize: vertical;
  line-height: 18px;
  padding-top: 8px;
  padding-bottom: 8px;
  margin: 5px 0 9px;
  overflow-wrap: break-word;
}

input,
textarea {
  margin: 5px 0 10px;
  padding: 8px;
  font-family: -apple-system, BlinkMacSystemFont, sans-serif;
  font-size: 17px;
  color: #77788F;
  border: 1px solid rgba(119,120,143,0.16);
  border-radius: 4px;
  text-align: center; /* Changed to center */
  box-sizing: border-box;
  overflow-wrap: break-word;
}

textarea {
  min-height: 80px;
  resize: vertical;
  line-height: 18px;
  padding-top: 8px;
  padding-bottom: 8px;
  border: 1px solid rgba(119,120,143,0.16);
  font-size: 17px;
  box-sizing: border-box;
}

.comment-textarea {
  min-height: 80px;
  resize: vertical;
  text-align: center;
  margin: 5px auto 5px;
  overflow-wrap: break-word;
}

.comment-label {
  margin-top: 9px;
}

.checkbox-label-blocked {
  display: inline-flex;
  align-items: center;
  font-family: -apple-system, BlinkMacSystemFont, sans-serif;
  font-size: 17px;
  color: #000000;
  white-space: nowrap;
  text-align: left;
  margin: 0;
}

.checkbox-label-blocked span {
  margin-right: 5px;
}

.checkbox-wrapper {
  transform: translateY(-10px);
  display: inline-block;
}

.checkbox-input {
  margin: 0;
  vertical-align: middle;
}

.comment-modal-buttons {
  display: flex;
  justify-content: center;
  margin-top: 30px;
}

.comment-modal-buttons button {
  padding: 10px 20px;
  margin: 0 5px;
  font-family: -apple-system, BlinkMacSystemFont, sans-serif;
  font-size: 14px;
  border: none;
  border-radius: 19px;
  cursor: pointer;
}

.comment-modal-buttons button:first-child {
  background: #2D9BE4;
  color: #FFFFFF;
}

.comment-modal-buttons button:last-child {
  background: #F5F5F5;
  color: #77788F;
}

/* Grouped pseudo-elements for performance */
.comment-modal::before,
.comment-modal-left-layer1::before,
.comment-modal-left-layer2::before,
.comment-modal::after,
.comment-modal-right-layer1::after,
.comment-modal-right-layer2::after {
  content: '';
  position: absolute;
}

/* Accessibility: Focus styles */
input:focus-visible,
textarea:focus-visible,
button:focus-visible {
  outline: 2px solid #2D9BE4;
}

/* Browser Compatibility Fallbacks */
@supports not ((-webkit-clip-path: path('M 0 178 H 96 C 80 120 48 60 0 0 Z')) or (clip-path: path('M 0 178 H 96 C 80 120 48 60 0 0 Z'))) {
  .comment-modal::before,
  .comment-modal-left-layer1::before,
  .comment-modal-left-layer2::before,
  .comment-modal::after,
  .comment-modal-right-layer1::after,
  .comment-modal-right-layer2::after {
    background: #2D9BE4; /* Fallback solid color */
    opacity: 0.1;
    border-radius: 16px; /* Approximate shape */
  }
}

/* Media Queries for Responsiveness */
@media (max-width: 768px) {
  .comment-modal {
    width: 90%;
    padding: 15px;
    margin-top: 100px;
  }
  .field-group {
    flex-direction: column;
  }
  .checkbox-field-group {
    grid-template-columns: 1fr;
  }
  .initiative-name-input,
  .goal-input,
  textarea {
    width: 100%;
  }
  .comment-modal-buttons {
    flex-direction: column;
    gap: 10px;
  }
  .comment-modal-buttons button {
    width: 100%;
  }
  label {
    font-size: 15px;
  }
  input,
  textarea {
    font-size: 15px;
  }
}

@media (max-width: 480px) {
  h2 {
    font-size: 16px;
  }
  label {
    font-size: 14px;
  }
  input,
  textarea {
    font-size: 14px;
  }
  .checkbox-label-blocked {
    font-size: 14px;
  }
  .comment-modal-buttons button {
    font-size: 12px;
    padding: 8px 16px;
  }
}
/* CreateInitiativeModal.css */
.create-initiative-modal-overlay {
position: fixed;
top: 66px;
left: 0;
width: 100%;
height: calc(100% - 66px);
background: none;
display: flex;
justify-content: center;
align-items: flex-start;
z-index: 1500;
pointer-events: auto;
}
.create-initiative-modal {
position: relative;
background: #FFFFFF;
box-shadow: 0 20px 40px 0 rgba(0,0,0,0.05);
border-radius: 16px;
border: 2px solid #2D9BE4;
padding: 30px 10px 20px 40px;
width: 700px;
height: 640px;
max-height: 90vh;
overflow-y: auto;
z-index: 1501;
pointer-events: auto;
box-sizing: border-box;
}
.create-initiative-modal::before {
content: '';
position: absolute;
bottom: 0;
left: 0;
width: 96px;
height: 178px;
background-image: linear-gradient(218deg, rgba(63,219,245,0.10) 0%, rgba(12,128,210,0.10) 97%);
opacity: 1;
z-index: 1002;
-webkit-clip-path: path('M 0 178 H 96 C 80 120 48 60 0 0 Z');
clip-path: path('M 0 178 H 96 C 80 120 48 60 0 0 Z');
}
.create-initiative-modal-left-layer1::before {
content: '';
position: absolute;
bottom: 0;
left: 0;
width: 70px;
height: 200px;
background: #2D9BE4;
opacity: 0.2;
z-index: 1003;
-webkit-clip-path: path('M 0 200 H 70 C 60 140 35 70 0 0 Z');
clip-path: path('M 0 200 H 70 C 60 140 35 70 0 0 Z');
}
.create-initiative-modal-left-layer2::before {
content: '';
position: absolute;
bottom: 0;
left: 0;
width: 50px;
height: 100px;
background: #2D9BE4;
z-index: 1004;
-webkit-clip-path: path('M 0 100 H 50 C 40 70 20 30 0 0 Z');
clip-path: path('M 0 100 H 50 C 40 70 20 30 0 0 Z');
}
.create-initiative-modal::after {
content: '';
position: absolute;
top: 0;
right: 0;
width: 96px;
height: 178px;
background-image: linear-gradient(218deg, rgba(63,219,245,0.10) 0%, rgba(12,128,210,0.10) 97%);
opacity: 1;
z-index: 1002;
-webkit-clip-path: path('M 96 0 H 0 C 16 58 48 118 96 178 Z');
clip-path: path('M 96 0 H 0 C 16 58 48 118 96 178 Z');
}
.create-initiative-modal-right-layer1::after {
content: '';
position: absolute;
top: 0;
right: 0;
width: 70px;
height: 200px;
background: #2D9BE4;
opacity: 0.2;
z-index: 1003;
-webkit-clip-path: path('M 70 0 H 0 C 10 60 35 130 70 200 Z');
clip-path: path('M 70 0 H 0 C 10 60 35 130 70 200 Z');
}
.create-initiative-modal-right-layer2::after {
content: '';
position: absolute;
top: 0;
right: 0;
width: 50px;
height: 100px;
background: #2D9BE4;
z-index: 1004;
-webkit-clip-path: path('M 50 0 H 0 C 10 30 30 70 50 100 Z');
clip-path: path('M 50 0 H 0 C 10 30 30 70 50 100 Z');
}
.create-initiative-modal-content {
display: flex;
flex-direction: column;
align-items: center;
width: 620px;
}
.create-title {
font-family: -apple-system, BlinkMacSystemFont, sans-serif;
font-size: 24px;
color: #23254C;
margin: 20px 0 20px 0;
text-align: center;
width: 100%;
}
.create-form-container {
display: flex;
flex-direction: column;
width: 600px;
max-width: 600px;
overflow-x: hidden;
gap: 15px !important;
margin-top: 15px;
}
.create-form-container > h3 {
margin-bottom: 0;
}
.step-3 {
gap: 10px;
}
.create-form-row {
display: flex;
gap: 2px;
align-items: baseline;
}
.create-form-row:last-child {
align-items: baseline;
}
.create-form-label {
display: block;
font-family: -apple-system, BlinkMacSystemFont, sans-serif;
font-size: 14pt;
color: #000000;
text-align: left;
width: 160px;
padding-left: 4ch;
vertical-align: middle;
white-space: nowrap;
overflow-wrap: break-word; /* Prevent overflow */
font-weight: normal;
}
.create-initiative-name-label {
vertical-align: middle;
}
.create-goal-label {
vertical-align: top;
}
.create-label-number {
padding-right: 1px;
font-weight: bold;
}
.create-form-field,
.create-owner-display {
display: block;
padding: 0;
margin: 0;
flex: 1 1;
max-width: 50%;
overflow-wrap: break-word; /* Prevent overflow */
}
.create-form-field {
font-family: -apple-system, BlinkMacSystemFont, sans-serif;
font-size: 14pt;
color: #77788F;
border: none;
border-radius: 4px;
box-sizing: border-box;
padding: 4px 8px;
overflow: hidden;
text-align: left;
line-height: 20px;
text-indent: 0px;
overflow-wrap: break-word; /* Prevent overflow */
background-color: #FFFFFF;
}
.create-initiative-name-field,
.create-goal-field,
.create-deadline-field,
.create-form-field-select {
border: 1px solid rgba(119,120,143,0.16);
max-width: 50%;
}
.create-deadline-field {
max-width: 50%;
min-width: auto;
}
.create-initiative-name-field {
padding: 4px 8px;
height: 28px;
}
.create-goal-field {
min-height: 60px;
resize: vertical;
line-height: 28px;
padding: 4px 8px;
text-align: left;
appearance: none;
-webkit-appearance: none;
overflow: hidden;
overflow-wrap: break-word; /* Prevent overflow */
max-width: 50%;
}
.create-owner-display {
font-family: -apple-system, BlinkMacSystemFont, sans-serif;
font-size: 14pt;
color: #77788F;
background: #f0f0f0;
border: 1px solid rgba(119,120,143,0.16);
border-radius: 4px;
box-sizing: border-box;
padding: 4px 8px;
text-align: left;
overflow: hidden;
text-overflow: ellipsis;
display: inline-block;
max-width: 50%;
}
.create-invite-label {
font-size: 14pt;
color: #000000;
font-weight: normal;
}
.create-invite-link {
color: #2D9BE4;
text-decoration: underline;
cursor: pointer;
font-family: -apple-system, BlinkMacSystemFont, sans-serif;
font-size: 14pt;
}
.create-invite-link:hover {
color: #1a7cc3;
}
.create-checkbox-label {
display: flex;
align-items: center;
font-family: -apple-system, BlinkMacSystemFont, sans-serif;
font-size: 14pt;
color: #000000;
gap: 5px;
min-width: 60px;
margin-right: 0;
}
.create-checkbox-label span {
margin-right: 0;
}
.create-checkbox-input {
margin-left: 0;
margin-right: 0;
position: relative;
top: 3px;
width: 1.25rem;
height: 1.25rem;
border: 2px solid #77788F;
border-radius: 0.25rem;
}
#is_private {
width: 1rem;
height: 1rem;
}
.create-initiative-modal-buttons {
display: flex;
justify-content: center;
width: 100%;
margin: 18px 0 0 0;
padding: 0;
}
.check-in-buttons {
margin-top: 38px; /* Increased by 20px from 18px */
}
.create-initiative-modal-buttons button {
padding: 0.5rem 1rem;
margin: 0 5px;
font-family: -apple-system, BlinkMacSystemFont, sans-serif;
font-size: 0.875rem;
border: none;
border-radius: 1.1875rem;
cursor: pointer;
min-width: 7rem;
}
.create-initiative-modal-buttons .create-button-color-primary {
background: #2D9BE4 !important;
color: #FFFFFF !important;
}
.create-initiative-modal-buttons .create-button-color-secondary {
background: #F5F5F5 !important;
color: #77788F !important;
}
.create-channels-checkbox-group {
justify-content: flex-start;
padding-right: 0;
width: 100%;
}
.create-checkbox-lists-container {
width: 100%;
margin: 0;
padding: 0;
display: flex;
gap: 10px;
justify-content: flex-start;
}
.create-checkbox-wrapper {
width: 175px;
}
.create-channels-field {
border: none;
padding: 0;
}
.create-frequency-toggle {
display: flex;
flex-direction: row;
justify-content: flex-start;
gap: 0;
border: none;
}
.create-frequency-button {
padding: 0.5rem 1rem;
border: none;
border-radius: 0;
background: #F5F5F5;
font-size: 0.875rem;
cursor: pointer;
}
.create-frequency-button:first-child {
border-radius: 4px 0 0 4px;
}
.create-frequency-button:last-child {
border-radius: 0 4px 4px 0;
}
.create-frequency-button.selected {
background: #2D9BE4;
color: #FFFFFF;
}
.create-day-row {
display: flex;
flex-wrap: nowrap;
justify-content: flex-start;
gap: 5px;
width: 100%;
align-items: center;
padding: 0; /* Remove extra padding */
}
.create-day-row .create-checkbox-label {
margin-right: 0;
}
.create-channel-row {
display: flex;
flex-wrap: nowrap;
justify-content: flex-start;
gap: 20px;
width: 100%;
align-items: center;
}
.create-channel-item {
display: flex;
align-items: center;
justify-content: flex-start;
flex: 0 1 auto;
width: auto;
}
.create-channel-item .create-checkbox-label {
gap: 10px;
margin-right: 10px;
}
.create-timezone-select {
border: 1px solid rgba(119,120,143,0.16);
border-radius: 4px;
padding: 4px 8px;
font-size: 14pt;
background-color: #FFFFFF;
appearance: none;
-webkit-appearance: none;
background-image: url("data:image/svg+xml;utf8,<svg fill=\"black\" height=\"24\" viewBox=\"0 0 24 24\" width=\"24\" xmlns=\"http://www.w3.org/2000/svg\"><path d=\"M7 10l5 5 5-5z\"/><path d=\"M0 0h24v24H0z\" fill=\"none\"/></svg>");
background-repeat: no-repeat;
background-position-x: 100%;
background-position-y: 50%;
max-width: 50%;
}
.create-timezone-select option {
padding: 0 5px;
}
.create-pause-field {
display: flex;
justify-content: flex-start;
align-items: center;
}
.create-private-label {
flex-direction: row;
gap: 4px;
}
.create-tabs {
margin-top: 20px;
}
.create-centered-subheading {
text-align: center;
font-weight: bold;
margin-top: 15px;
margin-bottom: 10px;
}
.create-team-section {
margin-top: 0;
}
.add-member-email-invite-header {
margin-bottom: 15px;
}
.create-days-field {
max-width: none;
overflow: visible;
}
/* Accessibility: Focus styles */
button:focus-visible,
input:focus-visible,
textarea:focus-visible,
select:focus-visible,
[role="button"]:focus-visible {
outline: 2px solid #2D9BE4;
}
/* Browser Compatibility Fallbacks */
@supports not ((-webkit-clip-path: path('M 0 178 H 96 C 80 120 48 60 0 0 Z')) or (clip-path: path('M 0 178 H 96 C 80 120 48 60 0 0 Z'))) {
.create-initiative-modal::before,
.create-initiative-modal-left-layer1::before,
.create-initiative-modal-left-layer2::before,
.create-initiative-modal::after,
.create-initiative-modal-right-layer1::after,
.create-initiative-modal-right-layer2::after {
background: #2D9BE4; /* Fallback solid color */
opacity: 0.1;
border-radius: 16px; /* Approximate shape */
  }
}
.add-member-user-card.selected-other {
  border: 2px dashed #2D9BE4; /* Distinct dashed border for visual cue */
  background-color: rgba(45, 155, 228, 0.1); /* Light tint to stand out */
  opacity: 0.7; /* Subtle fade to indicate unselectable */
  cursor: not-allowed; /* Reinforce no interaction */
  position: relative; /* For tooltip positioning */
}

.add-member-user-card.selected-other::after {
  content: attr(data-role); /* Use data-role for dynamic text, e.g., "Already selected as member" */
  position: absolute;
  bottom: 100%;
  left: 50%;
  transform: translateX(-50%);
  background: #23254C;
  color: #FFFFFF;
  padding: 4px 8px;
  border-radius: 4px;
  font-size: 12px;
  white-space: nowrap;
  opacity: 0;
  transition: opacity 0.2s;
  pointer-events: none;
}

.add-member-user-card.selected-other:hover::after,
.add-member-user-card.selected-other:focus::after {
  opacity: 1;
}
/* Media Queries for Responsiveness */
@media (max-width: 768px) {
.create-initiative-modal {
width: 90%;
padding: 20px 10px;
height: auto;
  }
.create-initiative-modal-content {
width: 100%;
  }
.create-form-container {
width: 100%;
max-width: 100%;
gap: 10px;
  }
.create-form-row {
flex-direction: column;
align-items: flex-start;
gap: 5px;
  }
.create-form-label {
width: 100%;
padding-left: 0;
font-size: 13pt;
overflow-wrap: break-word;
  }
.create-form-field,
.create-owner-display {
max-width: 100%;
font-size: 13pt;
  }
.create-goal-field {
max-width: 100%;
  }
.create-initiative-name-field,
.create-deadline-field,
.create-form-field-select {
max-width: 100%;
  }
.create-timezone-select {
max-width: 100%;
  }
.create-day-row {
flex-wrap: wrap;
gap: 10px;
  }
.create-channel-row {
flex-wrap: wrap;
gap: 10px;
  }
.create-initiative-modal-buttons {
flex-direction: column;
gap: 10px;
  }
.create-initiative-modal-buttons button {
width: 100%;
min-width: auto;
  }
.add-member-user-list {
justify-content: flex-start;
  }
}
@media (max-width: 480px) {
.create-title {
font-size: 20px;
  }
.create-form-label {
font-size: 12pt;
  }
.create-form-field {
font-size: 12pt;
  }
.create-checkbox-label {
font-size: 12pt;
  }
.create-frequency-button {
font-size: 0.75rem;
  }
.add-member-user-card.selected-other {
border: 2px solid #2D9BE4;
  }
.create-initiative-modal-buttons button {
font-size: 0.75rem;
padding: 0.4rem 0.8rem;
  }
}

.contact-genchi-modal-overlay {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0.5);
  display: flex;
  justify-content: center;
  align-items: center;
  z-index: 1000;
}

.contact-genchi-modal {
  position: relative;
  background: #FFFFFF;
  box-shadow: 0 20px 40px 0 rgba(0,0,0,0.05);
  border-radius: 16px;
  padding: 20px;
  width: 500px;
  width: var(--modal-width, 500px);
  min-height: 300px;
  min-height: var(--modal-min-height, 300px);
  z-index: 1;
  box-sizing: border-box;
  transform: translateX(200px) translateY(-150px);
}

/* Layer vars for maintainability */
:root {
  --layer-large-width: 96px;
  --layer-large-height: 178px;
  --layer-large-gradient: linear-gradient(218deg, rgba(63,219,245,0.10) 0%, rgba(12,128,210,0.10) 97%);
  --layer-medium-width: 70px;
  --layer-medium-height: 200px;
  --layer-small-width: 50px;
  --layer-small-height: 100px;
  --layer-color: #2D9BE4;
  --layer-opacity-medium: 0.2;
  --button-color-primary: #2D9BE4;
  --button-color-secondary: #F5F5F5;
  --text-color-label: #77788F;
}

/* Bottom left shape - Largest (lightest) */
.contact-genchi-modal::before {
  content: '';
  position: absolute;
  bottom: 0;
  left: 0;
  width: 96px;
  width: var(--layer-large-width);
  height: 178px;
  height: var(--layer-large-height);
  background-image: linear-gradient(218deg, rgba(63,219,245,0.10) 0%, rgba(12,128,210,0.10) 97%);
  background-image: var(--layer-large-gradient);
  opacity: 1;
  z-index: -4;
  -webkit-clip-path: path('M 0 178 H 96 C 80 120 48 60 0 0 Z');
          clip-path: path('M 0 178 H 96 C 80 120 48 60 0 0 Z');
}

/* Bottom left shape - Middle (darker) */
.contact-genchi-modal-left-layer1::before {
  content: '';
  position: absolute;
  bottom: 0;
  left: 0;
  width: 70px;
  width: var(--layer-medium-width);
  height: 200px;
  height: var(--layer-medium-height);
  background: #2D9BE4;
  background: var(--layer-color);
  opacity: 0.2;
  opacity: var(--layer-opacity-medium);
  z-index: -4;
  -webkit-clip-path: path('M 0 200 H 70 C 60 140 35 70 0 0 Z');
          clip-path: path('M 0 200 H 70 C 60 140 35 70 0 0 Z');
}

/* Bottom left shape - Smallest (darkest) */
.contact-genchi-modal-left-layer2::before {
  content: '';
  position: absolute;
  bottom: 0;
  left: 0;
  width: 50px;
  width: var(--layer-small-width);
  height: 100px;
  height: var(--layer-small-height);
  background: #2D9BE4;
  background: var(--layer-color);
  z-index: -4;
  -webkit-clip-path: path('M 0 100 H 50 C 40 70 20 30 0 0 Z');
          clip-path: path('M 0 100 H 50 C 40 70 20 30 0 0 Z');
}

/* Top right shape - Largest (lightest) */
.contact-genchi-modal::after {
  content: '';
  position: absolute;
  top: 0;
  right: 0;
  width: 96px;
  width: var(--layer-large-width);
  height: 178px;
  height: var(--layer-large-height);
  background-image: linear-gradient(218deg, rgba(63,219,245,0.10) 0%, rgba(12,128,210,0.10) 97%);
  background-image: var(--layer-large-gradient);
  opacity: 1;
  z-index: 3;
  -webkit-clip-path: path('M 96 0 H 0 C 16 58 48 118 96 178 Z');
          clip-path: path('M 96 0 H 0 C 16 58 48 118 96 178 Z');
}

/* Top right shape - Middle (darker) */
.contact-genchi-modal-right-layer1 {
  position: absolute;
  top: 0;
  right: 0;
  width: 70px;
  width: var(--layer-medium-width);
  height: 200px;
  height: var(--layer-medium-height);
  z-index: 4;
}

.contact-genchi-modal-right-layer1::after {
  content: '';
  position: absolute;
  top: 0;
  right: 0;
  width: 70px;
  width: var(--layer-medium-width);
  height: 200px;
  height: var(--layer-medium-height);
  background: #2D9BE4;
  background: var(--layer-color);
  opacity: 0.2;
  opacity: var(--layer-opacity-medium);
  z-index: 4;
  -webkit-clip-path: path('M 70 0 H 0 C 10 60 35 130 70 200 Z');
          clip-path: path('M 70 0 H 0 C 10 60 35 130 70 200 Z');
}

/* Top right shape - Smallest (darkest) */
.contact-genchi-modal-right-layer2 {
  position: absolute;
  top: 0;
  right: 0;
  width: 50px;
  width: var(--layer-small-width);
  height: 100px;
  height: var(--layer-small-height);
  z-index: 5;
}

.contact-genchi-modal-right-layer2::after {
  content: '';
  position: absolute;
  top: 0;
  right: 0;
  width: 50px;
  width: var(--layer-small-width);
  height: 100px;
  height: var(--layer-small-height);
  background: #2D9BE4;
  background: var(--layer-color);
  z-index: 5;
  -webkit-clip-path: path('M 50 0 H 0 C 10 30 30 70 50 100 Z');
          clip-path: path('M 50 0 H 0 C 10 30 30 70 50 100 Z');
}

.contact-genchi-modal h2 {
  font-family: -apple-system, BlinkMacSystemFont, sans-serif;
  font-size: 18px;
  color: #23254C;
  margin-bottom: 20px;
  text-align: center;
}

.contact-genchi-modal label {
  font-family: -apple-system, BlinkMacSystemFont, sans-serif;
  font-size: 17px;
  color: #77788F;
  color: var(--text-color-label);
  display: block;
  margin-bottom: 5px;
}

.contact-genchi-modal input,
.contact-genchi-modal textarea {
  width: 85%;
  margin: 0 auto 10px;
  padding: 8px;
  font-family: -apple-system, BlinkMacSystemFont, sans-serif;
  font-size: 17px;
  color: #77788F;
  color: var(--text-color-label);
  border: 1px solid rgba(119,120,143,0.16);
  border-radius: 4px;
  box-sizing: border-box;
  display: block;
}

.contact-genchi-modal textarea {
  min-height: 100px;
  resize: vertical;
}

.contact-genchi-modal-buttons {
  display: flex;
  justify-content: center;
  gap: 10px;
}

.contact-genchi-modal-buttons button {
  padding: 10px 20px;
  font-family: -apple-system, BlinkMacSystemFont, sans-serif;
  font-size: 14px;
  border: none;
  border-radius: 19px;
  cursor: pointer;
}

.contact-genchi-modal-buttons button:first-child {
  background: #F5F5F5;
  background: var(--button-color-secondary);
  color: #77788F;
  color: var(--text-color-label);
}

.contact-genchi-modal-buttons button:last-child {
  background: #2D9BE4;
  background: var(--button-color-primary);
  color: #FFFFFF;
}

.error-message {
  color: red;
  text-align: center;
  margin-bottom: 10px;
}

/* Mobile responsiveness */
@media (max-width: 768px) {
  .contact-genchi-modal {
    width: 90%;
    transform: none;
  }
  .contact-genchi-modal input,
  .contact-genchi-modal textarea {
    width: 100%;
  }
}
.password-modal-overlay {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0.5);
  display: flex;
  justify-content: center;
  align-items: center;
  z-index: 3000; /* Increased to stack above ProfileModal (z-index 2000/2001) */
  margin-top: -100px; /* Match ProfileModal overlay shift for consistent vertical base */
}

.password-modal {
  position: relative;
  background: #FFFFFF;
  box-shadow: 0 20px 40px 0 rgba(0,0,0,0.05);
  border-radius: 16px;
  padding: 30px;
  width: 600px;
  height: 400px;
  background-image: linear-gradient(-76deg, rgba(231,244,251,0.00) 0%, rgba(231,244,251,0.35) 94%);
  z-index: 1;
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
  align-items: center;
  transform: translateX(200px) translateY(-50px); /* Match ProfileModal's right shift; negative Y to position higher, matching previous good vertical */
}

/* Bottom left shape - Largest (lightest) */
.password-modal::before {
  content: '';
  position: absolute;
  bottom: 0;
  left: 0;
  width: 96px;
  height: 178px;
  background-image: linear-gradient(218deg, rgba(63,219,245,0.10) 0%, rgba(12,128,210,0.10) 97%);
  opacity: 1;
  z-index: -4;
  -webkit-clip-path: path('M 0 178 H 96 C 80 120 48 60 0 0 Z');
          clip-path: path('M 0 178 H 96 C 80 120 48 60 0 0 Z');
}

/* Bottom left shape - Middle (darker) */
.modal-left-layer1::before {
  content: '';
  position: absolute;
  bottom: 0;
  left: 0;
  width: 70px;
  height: 200px;
  background: #2D9BE4;
  opacity: 0.2;
  z-index: -4;
  -webkit-clip-path: path('M 0 200 H 70 C 60 140 35 70 0 0 Z');
          clip-path: path('M 0 200 H 70 C 60 140 35 70 0 0 Z');
}

/* Bottom left shape - Smallest (darkest) */
.modal-left-layer2::before {
  content: '';
  position: absolute;
  bottom: 0;
  left: 0;
  width: 50px;
  height: 100px;
  background: #2D9BE4;
  z-index: -4;
  -webkit-clip-path: path('M 0 100 H 50 C 40 70 20 30 0 0 Z');
          clip-path: path('M 0 100 H 50 C 40 70 20 30 0 0 Z');
}

/* Top right shape - Largest (lightest) */
.password-modal::after {
  content: '';
  position: absolute;
  top: 0;
  right: 0;
  width: 96px;
  height: 178px;
  background-image: linear-gradient(218deg, rgba(63,219,245,0.10) 0%, rgba(12,128,210,0.10) 97%);
  opacity: 1;
  z-index: -4;
  -webkit-clip-path: path('M 96 0 H 0 C 16 58 48 118 96 178 Z');
          clip-path: path('M 96 0 H 0 C 16 58 48 118 96 178 Z');
}

/* Top right shape - Middle (darker) */
.modal-right-layer1::after {
  content: '';
  position: absolute;
  top: 0;
  right: 0;
  width: 70px;
  height: 200px;
  background: #2D9BE4;
  opacity: 0.2;
  z-index: -4;
  -webkit-clip-path: path('M 70 0 H 0 C 10 60 35 130 70 200 Z');
          clip-path: path('M 70 0 H 0 C 10 60 35 130 70 200 Z');
}

/* Top right shape - Smallest (darkest) */
.modal-right-layer2::after {
  content: '';
  position: absolute;
  top: 0;
  right: 0;
  width: 50px;
  height: 100px;
  background: #2D9BE4;
  z-index: -4;
  -webkit-clip-path: path('M 50 0 H 0 C 10 30 30 70 50 100 Z');
          clip-path: path('M 50 0 H 0 C 10 30 30 70 50 100 Z');
}

.password-modal h2 {
  font-family: -apple-system, BlinkMacSystemFont, sans-serif;
  font-size: 18px;
  color: #23254C;
  margin-bottom: 20px;
  text-align: center;
}

.password-modal-content {
  display: flex;
  flex-direction: column;
  width: 100%;
  max-width: 315px; /* Matches ProfileModal input width */
  z-index: 3;
  gap: 15px;
}

.modal-field {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.modal-field label {
  font-family: -apple-system, BlinkMacSystemFont, sans-serif;
  font-size: 17px;
  color: #77788F;
  line-height: 20px;
  text-align: center;
  margin-bottom: 5px;
}

.modal-field input {
  width: 315px;
  height: 36px;
  padding: 0 8px;
  font-family: -apple-system, BlinkMacSystemFont, sans-serif;
  font-size: 17px;
  color: #77788F;
  border: 1px solid rgba(119,120,143,0.16);
  border-radius: 4px;
  box-sizing: border-box;
  line-height: 36px;
  margin: 0 auto;
}

.password-modal-buttons {
  display: flex;
  justify-content: center;
  margin-top: 20px;
}

.password-modal-buttons button {
  padding: 10px 20px;
  margin: 0 5px;
  font-family: -apple-system, BlinkMacSystemFont, sans-serif;
  font-size: 14px;
  border: none;
  border-radius: 19px;
  cursor: pointer;
}

.password-modal-buttons button:nth-child(1) {
  background: #F5F5F5;
  color: #77788F;
}

.password-modal-buttons button:nth-child(2) {
  background: #2D9BE4;
  color: #FFFFFF;
}
.upload-users-modal-overlay {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0.5);
  display: flex;
  justify-content: center;
  align-items: flex-start;
  z-index: 1500;
  pointer-events: auto;
}

.upload-users-modal {
  position: relative;
  background: #FFFFFF;
  box-shadow: 0 20px 40px 0 rgba(0,0,0,0.05);
  border-radius: 16px;
  padding: 20px;
  width: 600px;
  min-height: 500px;
  max-height: 90vh;
  overflow-y: auto;
  z-index: 1501;
  pointer-events: auto;
  border: none;
  outline: none;
  margin-top: 156px;
  box-sizing: border-box;
}

/* Bottom left shape - Largest (lightest) */
.upload-users-modal::before {
  content: '';
  position: absolute;
  bottom: 0;
  left: 0;
  width: 96px;
  height: 178px;
  background-image: linear-gradient(218deg, rgba(63,219,245,0.10) 0%, rgba(12,128,210,0.10) 97%);
  opacity: 1;
  z-index: 1002;
  -webkit-clip-path: path('M 0 178 H 96 C 80 120 48 60 0 0 Z');
          clip-path: path('M 0 178 H 96 C 80 120 48 60 0 0 Z');
}

/* Bottom left shape - Middle (darker) */
.upload-users-modal-left-layer1::before {
  content: '';
  position: absolute;
  bottom: 0;
  left: 0;
  width: 70px;
  height: 200px;
  background: #2D9BE4;
  opacity: 0.2;
  z-index: 1003;
  -webkit-clip-path: path('M 0 200 H 70 C 60 140 35 70 0 0 Z');
          clip-path: path('M 0 200 H 70 C 60 140 35 70 0 0 Z');
}

/* Bottom left shape - Smallest (darkest) */
.upload-users-modal-left-layer2::before {
  content: '';
  position: absolute;
  bottom: 0;
  left: 0;
  width: 50px;
  height: 100px;
  background: #2D9BE4;
  z-index: 1004;
  -webkit-clip-path: path('M 0 100 H 50 C 40 70 20 30 0 0 Z');
          clip-path: path('M 0 100 H 50 C 40 70 20 30 0 0 Z');
}

/* Top right shape - Largest (lightest) */
.upload-users-modal::after {
  content: '';
  position: absolute;
  top: 0;
  right: 0;
  width: 96px;
  height: 178px;
  background-image: linear-gradient(218deg, rgba(63,219,245,0.10) 0%, rgba(12,128,210,0.10) 97%);
  opacity: 1;
  z-index: 1002;
  -webkit-clip-path: path('M 96 0 H 0 C 16 58 48 118 96 178 Z');
          clip-path: path('M 96 0 H 0 C 16 58 48 118 96 178 Z');
}

/* Top right shape - Middle (darker) */
.upload-users-modal-right-layer1::after {
  content: '';
  position: absolute;
  top: 0;
  right: 0;
  width: 70px;
  height: 200px;
  background: #2D9BE4;
  opacity: 0.2;
  z-index: 1003;
  -webkit-clip-path: path('M 70 0 H 0 C 10 60 35 130 70 200 Z');
          clip-path: path('M 70 0 H 0 C 10 60 35 130 70 200 Z');
}

/* Top right shape - Smallest (darkest) */
.upload-users-modal-right-layer2::after {
  content: '';
  position: absolute;
  top: 0;
  right: 0;
  width: 50px;
  height: 100px;
  background: #2D9BE4;
  z-index: 1004;
  -webkit-clip-path: path('M 50 0 H 0 C 10 30 30 70 50 100 Z');
          clip-path: path('M 50 0 H 0 C 10 30 30 70 50 100 Z');
}

.upload-users-modal h3 {
  font-family: -apple-system, BlinkMacSystemFont, sans-serif;
  font-size: 18px;
  color: #23254C;
  margin-bottom: 10px;
  text-align: center;
}

.upload-users-modal p {
  font-family: -apple-system, BlinkMacSystemFont, sans-serif;
  font-size: 15px;
  color: #23254C;
  margin: 5px 0;
  text-align: center;
}

.upload-users-modal input[type="file"] {
  margin: 10px auto;
  font-family: -apple-system, BlinkMacSystemFont, sans-serif;
  display: block;
}

.upload-users-table-container {
  max-height: 300px;
  overflow-y: auto;
  margin: 10px 0;
}

.upload-users-table {
  width: 100%;
  border-collapse: separate;
  border-spacing: 0;
  font-family: -apple-system, BlinkMacSystemFont, sans-serif;
}

.upload-users-table th,
.upload-users-table td {
  padding: 6px;
  text-align: left;
  border-bottom: 1px solid #CED4DA;
}

.upload-users-table th {
  background: #F0F8FF;
  font-weight: bold;
  font-size: 14px;
  color: #23254C;
}

.upload-users-table td:nth-child(1) {
  width: 25%;
}

.upload-users-table td:nth-child(2) {
  width: 25%;
}

.upload-users-table td:nth-child(3) {
  width: 40%;
}

.upload-users-table td:nth-child(4) {
  width: 10%;
  text-align: center;
}

.upload-users-modal-buttons {
  display: flex;
  gap: 10px;
  justify-content: flex-end;
  margin-top: 10px;
}

.upload-users-modal-button {
  padding: 10px 20px;
  font-family: -apple-system, BlinkMacSystemFont, sans-serif;
  font-size: 14px;
  font-weight: bold;
  border: none;
  border-radius: 19px;
  cursor: pointer;
  background: #2D9BE4;
  color: #FFFFFF;
}

.upload-users-modal-button:hover {
  background: #1B82C9;
}

.upload-users-modal-button:disabled {
  background: #E0E0E0;
  color: #77788F;
  cursor: not-allowed;
}

.change-owner-modal-overlay {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0.5);
  display: flex;
  justify-content: center;
  align-items: center;
  z-index: 1001;
}

.change-owner-modal {
  position: relative;
  background: #FFFFFF;
  box-shadow: 0 20px 40px 0 rgba(0,0,0,0.05);
  border-radius: 16px;
  padding: 30px;
  width: 600px;
  background-image: linear-gradient(-76deg, rgba(231,244,251,0.00) 0%, rgba(231,244,251,0.35) 94%);
  z-index: 1;
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
  align-items: center;
}

/* Bottom left shape - Largest (lightest) */
.change-owner-modal::before {
  content: '';
  position: absolute;
  bottom: 0;
  left: 0;
  width: 96px;
  height: 178px;
  background-image: linear-gradient(218deg, rgba(63,219,245,0.10) 0%, rgba(12,128,210,0.10) 97%);
  opacity: 1;
  z-index: -4;
  -webkit-clip-path: path('M 0 178 H 96 C 80 120 48 60 0 0 Z');
          clip-path: path('M 0 178 H 96 C 80 120 48 60 0 0 Z');
}

/* Bottom left shape - Middle (darker) */
.modal-left-layer1::before {
  content: '';
  position: absolute;
  bottom: 0;
  left: 0;
  width: 70px;
  height: 200px;
  background: #2D9BE4;
  opacity: 0.2;
  z-index: -4;
  -webkit-clip-path: path('M 0 200 H 70 C 60 140 35 70 0 0 Z');
          clip-path: path('M 0 200 H 70 C 60 140 35 70 0 0 Z');
}

/* Bottom left shape - Smallest (darkest) */
.modal-left-layer2::before {
  content: '';
  position: absolute;
  bottom: 0;
  left: 0;
  width: 50px;
  height: 100px;
  background: #2D9BE4;
  z-index: -4;
  -webkit-clip-path: path('M 0 100 H 50 C 40 70 20 30 0 0 Z');
          clip-path: path('M 0 100 H 50 C 40 70 20 30 0 0 Z');
}

/* Top right shape - Largest (lightest) */
.change-owner-modal::after {
  content: '';
  position: absolute;
  top: 0;
  right: 0;
  width: 96px;
  height: 178px;
  background-image: linear-gradient(218deg, rgba(63,219,245,0.10) 0%, rgba(12,128,210,0.10) 97%);
  opacity: 1;
  z-index: -4;
  -webkit-clip-path: path('M 96 0 H 0 C 16 58 48 118 96 178 Z');
          clip-path: path('M 96 0 H 0 C 16 58 48 118 96 178 Z');
}

/* Top right shape - Middle (darker) */
.modal-right-layer1::after {
  content: '';
  position: absolute;
  top: 0;
  right: 0;
  width: 70px;
  height: 200px;
  background: #2D9BE4;
  opacity: 0.2;
  z-index: -4;
  -webkit-clip-path: path('M 70 0 H 0 C 10 60 35 130 70 200 Z');
          clip-path: path('M 70 0 H 0 C 10 60 35 130 70 200 Z');
}

/* Top right shape - Smallest (darkest) */
.modal-right-layer2::after {
  content: '';
  position: absolute;
  top: 0;
  right: 0;
  width: 50px;
  height: 100px;
  background: #2D9BE4;
  z-index: -4;
  -webkit-clip-path: path('M 50 0 H 0 C 10 30 30 70 50 100 Z');
          clip-path: path('M 50 0 H 0 C 10 30 30 70 50 100 Z');
}

.change-owner-modal h2 {
  font-family: -apple-system, BlinkMacSystemFont, sans-serif;
  font-size: 18px;
  color: #23254C;
  margin-bottom: 10px;
  text-align: center;
}

.initiative-info {
  text-align: center;
  font-family: -apple-system, BlinkMacSystemFont, sans-serif;
  font-size: 16px;
  margin-bottom: 20px;
}

.initiative-info div {
  margin-bottom: 5px;
}

.initiative-label {
  color: #000000;
}

.initiative-value {
  color: #77788F;
}

.search-title {
  font-family: -apple-system, BlinkMacSystemFont, sans-serif;
  font-size: 16px;
  color: #23254C;
  margin-bottom: 10px;
  text-align: center;
  width: 100%;
  max-width: 500px;
}

.search-container {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 100%;
  max-width: 500px;
  gap: 10px;
  margin: 0 auto 20px;
}

.search-input {
  width: 350px;
  height: 36px;
  padding: 0 8px;
  margin: 0;
  font-family: -apple-system, BlinkMacSystemFont, sans-serif;
  font-size: 17px;
  color: #77788F;
  border: 1px solid rgba(119,120,143,0.16);
  border-radius: 4px;
  box-sizing: border-box;
}

.change-search-button {
  padding: 8px 16px;
  width: 120px;
  height: 36px;
  margin: 0;
  font-family: -apple-system, BlinkMacSystemFont, sans-serif;
  font-size: 14px;
  border: none;
  border-radius: 19px;
  cursor: pointer;
  background: #2D9BE4;
  color: #FFFFFF;
  box-sizing: border-box;
  line-height: 1.2;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 0;
  min-height: initial;
  white-space: nowrap;
}

.change-search-button:hover {
  background: #1B82C9;
}

.user-list-container {
  width: 100%;
  max-width: 500px;
  margin-bottom: 20px;
}

.available-users-header {
  font-family: -apple-system, BlinkMacSystemFont, sans-serif;
  font-size: 16px;
  color: #23254C;
  margin-bottom: 10px;
  text-align: center;
}

.user-list {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  justify-content: center;
}

.user-card {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 10px;
  border: 1px solid rgba(119,120,143,0.16);
  border-radius: 4px;
  cursor: pointer;
  width: 100px;
  text-align: center;
}

.user-card.selected {
  border: 2px solid #2D9BE4;
  background: #F0F8FF;
}

.user-avatar {
  width: 40px;
  height: 40px;
  border-radius: 20px;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  margin-bottom: 5px;
}

.avatar-image {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.initials {
  font-family: -apple-system, BlinkMacSystemFont, sans-serif;
  font-size: 14px;
  color: #2D9BE4;
  background-image: radial-gradient(circle at 50% 50%, rgba(243,250,255,0.50) 0%, rgba(227,244,255,0.50) 50%);
}

.user-details {
  display: flex;
  flex-direction: column;
}

.user-name {
  font-family: -apple-system, BlinkMacSystemFont, sans-serif;
  font-size: 12px;
  color: #23254C;
}

.user-role {
  font-family: -apple-system, BlinkMacSystemFont, sans-serif;
  font-size: 10px;
  color: #77788F;
}

.modal-buttons {
  display: flex;
  justify-content: center;
  gap: 10px;
}

.change-modal-button {
  padding: 8px 16px;
  width: 120px;
  height: 34px;
  font-family: -apple-system, BlinkMacSystemFont, sans-serif;
  font-size: 14px;
  border: none;
  border-radius: 19px;
  cursor: pointer;
  background: #F5F5F5;
  color: #77788F;
  box-sizing: border-box;
  line-height: 1.2;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 0;
  min-height: initial;
  white-space: nowrap;
}

.change-modal-button:hover {
  background: #E0E0E0;
}

.change-modal-button.primary {
  background: #2D9BE4;
  color: #FFFFFF;
}

.change-modal-button.primary:hover {
  background: #1B82C9;
}
.admin-integrations {
  padding: 20px;
}

.header-container {
  display: flex;
  justify-content: flex-start;
  align-items: center;
  width: 100%;
  margin-bottom: 10px;
}

.admin-heading {
  font-family: -apple-system, BlinkMacSystemFont, sans-serif;
  font-size: 24px;
  color: #23254C;
  text-align: center;
  margin: 0 auto;
}

.admin-heading-centered {
  margin: 0 auto;
  flex: 1 1;
}

.admin-back-link {
  font-family: -apple-system, BlinkMacSystemFont, sans-serif;
  font-size: 17px;
  color: #2D9BE4;
  text-decoration: none;
}

.admin-back-link:hover {
  text-decoration: underline;
}

.admin-back-button {
  margin-left: 10px;
  background: none;
  border: none;
  padding: 0;
  font: inherit;
  cursor: pointer;
  color: #2D9BE4;
  font-weight: bold;
}

.integrations-container {
  display: flex;
  flex-direction: row;
  justify-content: flex-start;
  gap: 20px; /* Reduced gap between sections */
  flex-wrap: wrap; /* Wrap on smaller screens if needed */
}

/* FIXED: Added matching layout rules for Jira and Asana sections */
.slack-section,
.jira-section,
.asana-section {
  display: flex;
  flex-direction: column;
  align-items: center;        /* Centers logo, lozenge, workspace name, and button */
  margin-left: 10px;
  min-width: 200px;           /* Prevents collapse on small screens */
}

.logo-container {
  position: relative;
  width: 120px; /* Expanded container width to match workspace name */
  display: flex;
  flex-direction: column;
  align-items: center;
  height: 140px; /* Fixed height to allow vertical centering */
  justify-content: center; /* Center content vertically */
}

.logo-container img {
  width: 100px;
  height: auto; /* Maintain aspect ratio */
  display: block;
  margin: 0 auto; /* Center horizontally */
}

.integration-logo {
  width: 100px;
  margin-bottom: 0;
  display: block;
}

.lozenge {
  width: 120px;
  height: 22px;
  display: inline-block;
  font-family: -apple-system, BlinkMacSystemFont, sans-serif;
  font-size: 14px;
  font-weight: bold;
  border-radius: 12px;
  line-height: 22px;
  text-align: center;
  position: absolute;
  top: 50%;
  left: -10px;
  transform: translateY(-50%);
  opacity: 0.75;
}

.lozenge.connected {
  background-color: #28a745;
  color: white;
}

.lozenge.not-connected {
  background-color: #dc3545;
  color: white;
}

.workspace-name {
  font-family: -apple-system, BlinkMacSystemFont, sans-serif;
  font-size: 14pt;
  font-weight: normal;
  color: #23254C;
  text-align: center;
  margin: 10px 0; /* Consistent margin for alignment */
  width: 120px; /* Expanded width for workspace name */
}

.admin-action-button {
  width: 100px;
  height: 30px;
  font-family: -apple-system, BlinkMacSystemFont, sans-serif;
  font-size: 14px;
  font-weight: bold;
  border: none;
  border-radius: 19px;
  cursor: pointer;
  background: #2D9BE4;
  color: #FFFFFF;
  line-height: 30px;
  text-align: center;
  padding: 0;
  margin: 10px auto 0; /* Center button horizontally with vertical margin */
}

.admin-action-button:hover {
  background: #1B82C9;
}

.admin-action-button:disabled {
  background: #cccccc;
  cursor: not-allowed;
}

.admin-action-button.admin-action-button-delete {
  background: #F5F5F5;
  color: #FF0000;
  border: 1px solid #77788F;
}

.admin-action-button.admin-action-button-delete:hover {
  background: #E0E0E0;
}

.modal-message-container {
  display: flex;
  justify-content: center;
  margin-top: 10px;
}
.link-slack-button {
  background: #4A154B;
  color: #FFFFFF;
  font-size: 13px;
  margin-top: 10px;
  width: auto;
  padding: 0 15px;
}
/* Responsive media query for smaller screens */
@media (max-width: 768px) {
  .integrations-container {
    flex-direction: column;
    gap: 20px; /* Smaller gap when stacked */
  }
}

/* Overlay for the modal */
.jira-bulk-modal-message {
  position: fixed;
  top: 0;
  left: 50px;
  width: calc(100% - 50px);
  height: 100%;
  background: rgba(0, 0, 0, 0.5);
  display: flex;
  justify-content: center;
  align-items: flex-start;
  z-index: 3000;
  pointer-events: auto;
}

/* Main modal container */
.jira-bulk-modal {
  position: relative;
  background: #FFFFFF;
  box-shadow: 0 20px 40px 0 rgba(0,0,0,0.05);
  border-radius: 16px;
  padding: 20px;
  width: 700px;
  max-width: calc(100vw - 100px);
  min-height: 350px;
  max-height: 85vh;
  overflow: hidden;
  z-index: 3001;
  pointer-events: auto;
  border: none;
  outline: none;
  margin-top: 60px;
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
}

.jira-bulk-modal::before {
  content: '';
  position: absolute;
  bottom: 0;
  left: 0;
  width: 96px;
  height: 178px;
  background-image: linear-gradient(218deg, rgba(63,219,245,0.10) 0%, rgba(12,128,210,0.10) 97%);
  opacity: 1;
  z-index: 0;
  -webkit-clip-path: path('M 0 178 H 96 C 80 120 48 60 0 0 Z');
          clip-path: path('M 0 178 H 96 C 80 120 48 60 0 0 Z');
}

.jira-bulk-modal-left-layer1::before {
  content: '';
  position: absolute;
  bottom: 0;
  left: 0;
  width: 70px;
  height: 200px;
  background: #2D9BE4;
  opacity: 0.2;
  z-index: 1;
  -webkit-clip-path: path('M 0 200 H 70 C 60 140 35 70 0 0 Z');
          clip-path: path('M 0 200 H 70 C 60 140 35 70 0 0 Z');
}

.jira-bulk-modal-left-layer2::before {
  content: '';
  position: absolute;
  bottom: 0;
  left: 0;
  width: 50px;
  height: 100px;
  background: #2D9BE4;
  z-index: 2;
  -webkit-clip-path: path('M 0 100 H 50 C 40 70 20 30 0 0 Z');
          clip-path: path('M 0 100 H 50 C 40 70 20 30 0 0 Z');
}

.jira-bulk-modal::after {
  content: '';
  position: absolute;
  top: 0;
  right: 0;
  width: 96px;
  height: 178px;
  background-image: linear-gradient(218deg, rgba(63,219,245,0.10) 0%, rgba(12,128,210,0.10) 97%);
  opacity: 1;
  z-index: 0;
  -webkit-clip-path: path('M 96 0 H 0 C 16 58 48 118 96 178 Z');
          clip-path: path('M 96 0 H 0 C 16 58 48 118 96 178 Z');
}

.jira-bulk-modal-right-layer1::before {
  content: '';
  position: absolute;
  top: 0;
  right: 0;
  width: 70px;
  height: 200px;
  background: #2D9BE4;
  opacity: 0.2;
  z-index: 1;
  -webkit-clip-path: path('M 70 0 H 0 C 10 60 35 130 70 200 Z');
          clip-path: path('M 70 0 H 0 C 10 60 35 130 70 200 Z');
}

.jira-bulk-modal-right-layer2::before {
  content: '';
  position: absolute;
  top: 0;
  right: 0;
  width: 50px;
  height: 100px;
  background: #2D9BE4;
  z-index: 2;
  -webkit-clip-path: path('M 50 0 H 0 C 10 30 30 70 50 100 Z');
          clip-path: path('M 50 0 H 0 C 10 30 30 70 50 100 Z');
}

/* Content container fills the modal vertically. */
.jira-bulk-modal-content {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  position: relative;
  z-index: 3;
  flex: 1 1;
  min-height: 0;
  width: 100%;
}

.jira-bulk-modal h2 {
  font-family: -apple-system, BlinkMacSystemFont, sans-serif;
  font-size: 18px;
  color: #23254C;
  margin-bottom: 20px;
  text-align: center;
}

/* Single wrapper that owns the width and centering for both the tabs
   and the table. By containing both as siblings inside one centered
   parent, their right edges are guaranteed to align. */
.jira-modal-tabs-and-table {
  width: 600px;
  max-width: 100%;
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  flex: 1 1;
  min-height: 0;
}

.jira-modal-tabs {
  display: flex;
  justify-content: flex-end;
  width: 100%;
  border-bottom: 1px solid rgba(119,120,143,0.16);
  flex-shrink: 0;
}

.jira-modal-tabs button {
  padding: 10px 20px;
  margin: 0 1px 0 0;
  font-family: -apple-system, BlinkMacSystemFont, sans-serif;
  font-size: 16px;
  border: 1px solid rgba(119,120,143,0.16);
  border-bottom: none;
  background: #F5F5F5;
  color: #77788F;
  cursor: pointer;
  border-radius: 4px 4px 0 0;
  box-shadow: 0 -2px 4px rgba(0,0,0,0.05) inset;
  position: relative;
  top: 1px;
}

.jira-modal-tabs button.active {
  background: #FFFFFF;
  color: #23254C;
  border-bottom: 1px solid #FFFFFF;
  box-shadow: none;
}

.jira-modal-tab-content {
  width: 100%;
  border: 1px solid rgba(119,120,143,0.16);
  border-top: none;
  flex: 1 1;
  min-height: 0;
  overflow-y: auto;
  overflow-x: hidden;
}

.jira-modal-data-table {
  width: 100%;
  border-collapse: collapse;
  table-layout: fixed;
}

.jira-modal-data-table th,
.jira-modal-data-table td {
  padding: 10px;
  text-align: left;
  border-bottom: 1px solid rgba(119,120,143,0.16);
  word-wrap: break-word;
  overflow-wrap: break-word;
}

.jira-modal-data-table th {
  font-family: -apple-system, BlinkMacSystemFont, sans-serif;
  font-size: 16px;
  font-weight: bold;
  color: #23254C;
}

.jira-modal-data-table td {
  font-family: -apple-system, BlinkMacSystemFont, sans-serif;
  font-size: 16px;
  color: #77788F;
}

/* Projects tab: 3 columns (Name, Type, Select). */
.jira-modal-data-table th:nth-child(1),
.jira-modal-data-table td:nth-child(1) {
  width: 65%;
}

.jira-modal-data-table th:nth-child(2),
.jira-modal-data-table td:nth-child(2) {
  width: 20%;
}

.jira-modal-data-table th:nth-child(3),
.jira-modal-data-table td:nth-child(3) {
  width: 15%;
  text-align: center;
}

/* Users tab: 4 columns (Display Name, Email, Exists in Genchi, Select).
   Override the 3-column rules; Email widened, Display Name narrowed. */
.jira-modal-data-table:has(th:nth-child(4)) th:nth-child(1),
.jira-modal-data-table:has(th:nth-child(4)) td:nth-child(1) {
  width: 25%;
}

.jira-modal-data-table:has(th:nth-child(4)) th:nth-child(2),
.jira-modal-data-table:has(th:nth-child(4)) td:nth-child(2) {
  width: 45%;
}

.jira-modal-data-table:has(th:nth-child(4)) th:nth-child(3),
.jira-modal-data-table:has(th:nth-child(4)) td:nth-child(3) {
  width: 15%;
  text-align: center;
}

.jira-modal-data-table:has(th:nth-child(4)) th:nth-child(4),
.jira-modal-data-table:has(th:nth-child(4)) td:nth-child(4) {
  width: 15%;
  text-align: center;
}

/* Button row pinned at modal bottom with side clearance so the
   white background never overlaps the bottom-left decorative decal. */
.jira-bulk-modal-buttons {
  display: flex;
  justify-content: center;
  margin: 10px 80px 0 80px;
  padding-top: 10px;
  padding-bottom: 5px;
  flex-shrink: 0;
  background: #FFFFFF;
  border-radius: 8px;
  position: relative;
  z-index: 4;
}

.jira-bulk-modal-buttons button {
  height: 38px;
  padding: 10px 20px;
  margin: 0 5px;
  font-family: -apple-system, BlinkMacSystemFont, sans-serif;
  font-size: 14px;
  font-weight: normal;
  border: none;
  border-radius: 19px;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  line-height: 1.5;
  box-sizing: border-box;
}

.jira-bulk-modal-buttons .jira-bulk-select-all {
  min-width: 120px;
  background: #2D9BE4;
  color: #FFFFFF;
}

.jira-bulk-modal-buttons .jira-bulk-import {
  background: #2D9BE4;
  color: #FFFFFF;
}

.jira-bulk-modal-buttons .jira-bulk-cancel {
  background: #F5F5F5;
  color: #77788F;
}

/* Loading and error messages */
.jira-modal-loading,
.jira-modal-error {
  font-family: -apple-system, BlinkMacSystemFont, sans-serif;
  font-size: 14pt;
  color: #23254C;
  text-align: center;
  margin: 10px 0;
}

/* Overlay for the modal */
.asana-bulk-modal-message {
  position: fixed;
  top: 0;
  left: 50px;
  width: calc(100% - 50px);
  height: 100%;
  background: rgba(0, 0, 0, 0.5);
  display: flex;
  justify-content: center;
  align-items: flex-start;
  z-index: 3000;
  pointer-events: auto;
}

/* Main modal container */
.asana-bulk-modal {
  position: relative;
  background: #FFFFFF;
  box-shadow: 0 20px 40px 0 rgba(0,0,0,0.05);
  border-radius: 16px;
  padding: 20px;
  width: 700px;
  max-width: calc(100vw - 100px);
  min-height: 350px;
  max-height: 85vh;
  overflow: hidden;
  z-index: 3001;
  pointer-events: auto;
  border: none;
  outline: none;
  margin-top: 60px;
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
}

.asana-bulk-modal::before {
  content: '';
  position: absolute;
  bottom: 0;
  left: 0;
  width: 96px;
  height: 178px;
  background-image: linear-gradient(218deg, rgba(63,219,245,0.10) 0%, rgba(12,128,210,0.10) 97%);
  opacity: 1;
  z-index: 0;
  -webkit-clip-path: path('M 0 178 H 96 C 80 120 48 60 0 0 Z');
          clip-path: path('M 0 178 H 96 C 80 120 48 60 0 0 Z');
}

.asana-bulk-modal-left-layer1::before {
  content: '';
  position: absolute;
  bottom: 0;
  left: 0;
  width: 70px;
  height: 200px;
  background: #2D9BE4;
  opacity: 0.2;
  z-index: 1;
  -webkit-clip-path: path('M 0 200 H 70 C 60 140 35 70 0 0 Z');
          clip-path: path('M 0 200 H 70 C 60 140 35 70 0 0 Z');
}

.asana-bulk-modal-left-layer2::before {
  content: '';
  position: absolute;
  bottom: 0;
  left: 0;
  width: 50px;
  height: 100px;
  background: #2D9BE4;
  z-index: 2;
  -webkit-clip-path: path('M 0 100 H 50 C 40 70 20 30 0 0 Z');
          clip-path: path('M 0 100 H 50 C 40 70 20 30 0 0 Z');
}

.asana-bulk-modal::after {
  content: '';
  position: absolute;
  top: 0;
  right: 0;
  width: 96px;
  height: 178px;
  background-image: linear-gradient(218deg, rgba(63,219,245,0.10) 0%, rgba(12,128,210,0.10) 97%);
  opacity: 1;
  z-index: 0;
  -webkit-clip-path: path('M 96 0 H 0 C 16 58 48 118 96 178 Z');
          clip-path: path('M 96 0 H 0 C 16 58 48 118 96 178 Z');
}

.asana-bulk-modal-right-layer1::before {
  content: '';
  position: absolute;
  top: 0;
  right: 0;
  width: 70px;
  height: 200px;
  background: #2D9BE4;
  opacity: 0.2;
  z-index: 1;
  -webkit-clip-path: path('M 70 0 H 0 C 10 60 35 130 70 200 Z');
          clip-path: path('M 70 0 H 0 C 10 60 35 130 70 200 Z');
}

.asana-bulk-modal-right-layer2::before {
  content: '';
  position: absolute;
  top: 0;
  right: 0;
  width: 50px;
  height: 100px;
  background: #2D9BE4;
  z-index: 2;
  -webkit-clip-path: path('M 50 0 H 0 C 10 30 30 70 50 100 Z');
          clip-path: path('M 50 0 H 0 C 10 30 30 70 50 100 Z');
}

/* Content container fills the modal vertically. */
.asana-bulk-modal-content {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  position: relative;
  z-index: 3;
  flex: 1 1;
  min-height: 0;
  width: 100%;
}

.asana-bulk-modal h2 {
  font-family: -apple-system, BlinkMacSystemFont, sans-serif;
  font-size: 18px;
  color: #23254C;
  margin-bottom: 20px;
  text-align: center;
}

/* Single wrapper that owns the width and centering for both the tabs
   and the table. By containing both as siblings inside one centered
   parent, their right edges are guaranteed to align. */
.asana-modal-tabs-and-table {
  width: 600px;
  max-width: 100%;
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  flex: 1 1;
  min-height: 0;
}

.asana-modal-tabs {
  display: flex;
  justify-content: flex-end;
  width: 100%;
  border-bottom: 1px solid rgba(119,120,143,0.16);
  flex-shrink: 0;
}

.asana-modal-tabs button {
  padding: 10px 20px;
  margin: 0 1px 0 0;
  font-family: -apple-system, BlinkMacSystemFont, sans-serif;
  font-size: 16px;
  border: 1px solid rgba(119,120,143,0.16);
  border-bottom: none;
  background: #F5F5F5;
  color: #77788F;
  cursor: pointer;
  border-radius: 4px 4px 0 0;
  box-shadow: 0 -2px 4px rgba(0,0,0,0.05) inset;
  position: relative;
  top: 1px;
}

.asana-modal-tabs button.active {
  background: #FFFFFF;
  color: #23254C;
  border-bottom: 1px solid #FFFFFF;
  box-shadow: none;
}

.asana-modal-tab-content {
  width: 100%;
  border: 1px solid rgba(119,120,143,0.16);
  border-top: none;
  flex: 1 1;
  min-height: 0;
  overflow-y: auto;
  overflow-x: hidden;
}

.asana-modal-data-table {
  width: 100%;
  border-collapse: collapse;
  table-layout: fixed;
}

.asana-modal-data-table th,
.asana-modal-data-table td {
  padding: 10px;
  text-align: left;
  border-bottom: 1px solid rgba(119,120,143,0.16);
  word-wrap: break-word;
  overflow-wrap: break-word;
}

.asana-modal-data-table th {
  font-family: -apple-system, BlinkMacSystemFont, sans-serif;
  font-size: 16px;
  font-weight: bold;
  color: #23254C;
}

.asana-modal-data-table td {
  font-family: -apple-system, BlinkMacSystemFont, sans-serif;
  font-size: 16px;
  color: #77788F;
}

/* Projects tab: 3 columns (Name, Type, Select). */
.asana-modal-data-table th:nth-child(1),
.asana-modal-data-table td:nth-child(1) {
  width: 65%;
}

.asana-modal-data-table th:nth-child(2),
.asana-modal-data-table td:nth-child(2) {
  width: 20%;
}

.asana-modal-data-table th:nth-child(3),
.asana-modal-data-table td:nth-child(3) {
  width: 15%;
  text-align: center;
}

/* Users tab: 4 columns (Display Name, Email, Exists in Genchi, Select).
   Override the 3-column rules; Email widened, Display Name narrowed. */
.asana-modal-data-table:has(th:nth-child(4)) th:nth-child(1),
.asana-modal-data-table:has(th:nth-child(4)) td:nth-child(1) {
  width: 25%;
}

.asana-modal-data-table:has(th:nth-child(4)) th:nth-child(2),
.asana-modal-data-table:has(th:nth-child(4)) td:nth-child(2) {
  width: 45%;
}

.asana-modal-data-table:has(th:nth-child(4)) th:nth-child(3),
.asana-modal-data-table:has(th:nth-child(4)) td:nth-child(3) {
  width: 15%;
  text-align: center;
}

.asana-modal-data-table:has(th:nth-child(4)) th:nth-child(4),
.asana-modal-data-table:has(th:nth-child(4)) td:nth-child(4) {
  width: 15%;
  text-align: center;
}

/* Button row pinned at modal bottom with side clearance so the
   white background never overlaps the bottom-left decorative decal. */
.asana-bulk-modal-buttons {
  display: flex;
  justify-content: center;
  margin: 10px 80px 0 80px;
  padding-top: 10px;
  padding-bottom: 5px;
  flex-shrink: 0;
  background: #FFFFFF;
  border-radius: 8px;
  position: relative;
  z-index: 4;
}

.asana-bulk-modal-buttons button {
  height: 38px;
  padding: 10px 20px;
  margin: 0 5px;
  font-family: -apple-system, BlinkMacSystemFont, sans-serif;
  font-size: 14px;
  font-weight: normal;
  border: none;
  border-radius: 19px;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  line-height: 1.5;
  box-sizing: border-box;
}

.asana-bulk-modal-buttons .asana-bulk-select-all {
  min-width: 120px;
  background: #2D9BE4;
  color: #FFFFFF;
}

.asana-bulk-modal-buttons .asana-bulk-import {
  background: #2D9BE4;
  color: #FFFFFF;
}

.asana-bulk-modal-buttons .asana-bulk-cancel {
  background: #F5F5F5;
  color: #77788F;
}

/* Loading and error messages */
.asana-modal-loading,
.asana-modal-error {
  font-family: -apple-system, BlinkMacSystemFont, sans-serif;
  font-size: 14pt;
  color: #23254C;
  text-align: center;
  margin: 10px 0;
}

/* InitiativeTimelineDisplay.css
 * Timeline-specific styles extracted from InitiativesTab.css.
 * Import this file only in InitiativeTimelineDisplay.tsx.
 * All card/grid/modal styles remain in InitiativesTab.css.
 */

/* --- Outer wrapper ---
 * Flex column with a defined height so that:
 *   1. .timeline-header stays at the top (first flex child, not scrolled)
 *   2. .timeline-scroll-content fills remaining space (flex: 1) and scrolls
 *   3. .timeline-slider stays at the bottom (last flex child, position sticky)
 * height: 100% resolves against the MainLayout wrapper which provides
 * the explicit pixel height via containerHeight.
 */
.timeline-display {
  overflow: hidden;
  position: relative;
  height: 100%;
  display: flex;
  flex-direction: column;
}

/* --- Sticky header bar (name column + timescale) ---
 * First flex child — never enters the scroll area so it never scrolls away.
 * position: sticky / top: 0 retained for safety but the flex structure
 * is what actually keeps it pinned.
 */
.timeline-header {
  position: -webkit-sticky;
  position: sticky;
  top: 0;
  z-index: 4;
  background-color: #fff;
  display: flex;
  border: 1px solid grey;
  overflow: hidden;
  flex-shrink: 0;
}

.timeline-header-name-column {
  width: 200px;
  background-color: #fff;
  display: flex;
  align-items: center;
  padding-left: 10px;
  font-weight: bold;
  color: black;
  position: -webkit-sticky;
  position: sticky;
  left: 0;
  z-index: 20;
  box-sizing: border-box;
}

/* --- Timescale --- */
.timeline-timescale-container {
  position: relative;
  overflow: hidden;
  height: 50px;
}

.timeline-timescale-unit {
  position: absolute;
  text-align: center;
  border-right: 1px solid #ddd;
  height: 100%;
  box-sizing: border-box;
  display: flex;
  align-items: center;
  justify-content: center;
}

/* Wrapper div that holds the line divs. */
.timeline-timescale-unit > div:first-child {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  white-space: nowrap;
  overflow: hidden;
  line-height: 1.2;
}

.timeline-timescale-unit-line1,
.timeline-timescale-unit-line2,
.timeline-timescale-unit-line3 {
  font-size: 0.8em;
  font-weight: normal;
}

.timeline-timescale-today {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(45, 155, 228, 0.1);
  z-index: -1;
}

/* --- Scroll content wrapper ---
 * Second flex child — flex: 1 means it takes all remaining height between
 * the header and the slider. overflow-y: auto gives it its own scroll context
 * so rows scroll within this element without moving the header or slider.
 */
.timeline-scroll-content {
  overflow-y: auto;
  overflow-x: auto;
  flex: 1 1;
  min-height: 0; /* Critical: prevents flex child from overflowing its parent */
  width: 100%;
}

.timeline-scroll-inner {
  position: relative;
}

/* --- SVG connector overlay --- */
.timeline-connector-svg {
  position: absolute;
  top: 0;
  pointer-events: none;
  z-index: 5;
}

/* --- Row styles --- */
.timeline-row {
  display: flex;
  align-items: center;
  position: relative;
  border-top: 1px dashed rgba(0, 123, 255, 0.2);
  border-bottom: 1px dashed rgba(0, 123, 255, 0.2);
  border-left: 1px dashed rgba(0, 123, 255, 0.2);
  border-right: 1px dashed rgba(0, 123, 255, 0.2);
  opacity: 1;
  z-index: 6;
}

.timeline-row-no-border {
  display: flex;
  align-items: center;
  position: relative;
  border: none;
  opacity: 1;
  z-index: 6;
}

.timeline-row-collapsed {
  display: flex;
  align-items: center;
  position: relative;
  background-color: #f0f0f0;
  border-bottom: 1px solid #ddd;
}

/* --- Name column cell (sticky left) --- */
.timeline-name-col {
  width: 200px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  color: black;
  position: -webkit-sticky;
  position: sticky;
  left: 0;
  z-index: 20;
  background-color: #fff;
  display: flex;
  align-items: center;
  justify-content: flex-start;
  border-right: 1px solid grey;
  box-sizing: border-box;
}

/* --- Collapsed mini row name column --- */
.timeline-collapsed-name-col {
  width: 200px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  color: black;
  position: -webkit-sticky;
  position: sticky;
  left: 0;
  z-index: 20;
  background-color: #fff;
  display: flex;
  align-items: center;
  justify-content: flex-start;
  border-right: 1px solid grey;
  box-sizing: border-box;
}

/* --- Bar area --- */
.timeline-bar-area {
  position: relative;
  box-sizing: border-box;
}

/* --- Collapsed root bar (stacked sentiment bar) --- */
.timeline-root-collapsed-bar {
  position: absolute;
  border: 1px solid #007bff;
  background-color: #fff;
  border-radius: 4px;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
  top: 5px;
}

.timeline-root-top-bar {
  border-radius: 4px 4px 0 0;
  display: flex;
  align-items: center;
  justify-content: center;
  color: black;
  position: relative;
  font-weight: bold;
  padding: 0 8px;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.4);
  cursor: pointer;
}

.timeline-root-top-bar-name {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.timeline-child-sentiment-bar {
  width: 100%;
}

/* --- Normal bar --- */
.timeline-normal-bar {
  position: absolute;
  border-radius: 4px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: black;
  top: 5px;
  border: 1px solid #007bff;
  z-index: 6;
  cursor: pointer;
}

.timeline-normal-bar-name {
  color: black;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* --- Name column lozenge pill (non-collapsed) --- */
.timeline-name-pill {
  height: 26px;
  display: flex;
  align-items: center;
  padding: 2px 8px;
  border-radius: 20px;
  color: black;
  cursor: pointer;
}

/* --- Name column lozenge pill (collapsed root) --- */
.timeline-name-pill-root-collapsed {
  height: 36px;
  width: 160px;
  border-radius: 20px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-start;
  color: black;
  padding: 0;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
  overflow: hidden;
  border: 1px solid #ddd;
  cursor: pointer;
}

.timeline-name-pill-root-collapsed-top {
  height: 75%;
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 4px 8px;
  box-sizing: border-box;
}

.timeline-name-pill-root-collapsed-top span {
  font-size: 0.9em;
  font-weight: bold;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  width: 100%;
  text-align: center;
}

.timeline-name-pill-root-collapsed-best {
  height: 12.5%;
  width: 100%;
  border-top: 1px solid rgba(0, 0, 0, 0.1);
}

.timeline-name-pill-root-collapsed-worst {
  height: 12.5%;
  width: 100%;
}

/* --- Expand/collapse toggle buttons --- */
.timeline-toggle-btn {
  padding: 5px;
  margin-right: 10px;
  flex-shrink: 0;
}

.timeline-toggle-btn-mini {
  padding: 2px;
  margin-right: 5px;
  flex-shrink: 0;
}

/* --- Paused / infinity / blocked badges --- */
.timeline-lozenge-paused {
  position: absolute;
  top: 2px;
  right: 4px;
  font-size: 0.7em;
  padding: 1px 6px;
}

.timeline-lozenge-paused-inline {
  margin-left: 6px;
  font-size: 0.7em;
  padding: 1px 6px;
}

.timeline-badge-infinity {
  position: absolute;
  top: 2px;
  right: 4px;
  font-size: 1.1em;
}

.timeline-badge-infinity-inline {
  margin-left: 6px;
}

.timeline-badge-blocked {
  position: absolute;
  top: 2px;
  right: 4px;
  color: red;
  font-weight: bold;
}

.timeline-badge-blocked-inline {
  position: absolute;
  right: 10px;
  color: red;
}

/* --- Slider ---
 * position: fixed keeps it always visible at the bottom of the viewport
 * as the user scrolls through rows. left and width are set via inline
 * styles in the TSX, measured from containerRef so alignment is exact
 * regardless of the component's position within the page layout.
 */
.timeline-slider-container {
  position: fixed;
  bottom: 0;
  background-color: white;
  padding: 6px 10px;
  z-index: 10;
  box-sizing: border-box;
  border-top: 1px solid #eee;
}

.timeline-slider-input {
  width: 100%;
  display: block;
}

/* --- Swimlane group wrapper --- */
.timeline-swimlane-group {
  border-top: 1px dashed rgba(0, 123, 255, 0.5);
  border-left: none;
  border-right: 1px dashed rgba(0, 123, 255, 0.5);
  border-bottom: none;
  padding: 5px 5px 5px 0;
  margin-bottom: 10px;
}

.top-menu {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  max-width: 100%;
  height: 66px;
  background: #FFFFFF;
  display: flex;
  justify-content: flex-end;
  align-items: center;
  padding: 0 20px;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05);
  z-index: 100;
}

.left-menu {
  display: flex;
  align-items: center;
  gap: 15px;
  flex-wrap: wrap; /* Added for mobile */
}

.top-sidebar-panel {
  position: absolute;
  left: calc(70% - 43px);
  left: var(--sidebar-left, calc(70% - 43px));
  width: calc(17%);
  z-index: 15;
}

.top-sidebar-header {
  padding: 10px;
  background: rgba(255, 255, 255, 0.8);
  border: 2px solid #FFA500;
  border: 2px solid var(--warning-color, #FFA500);
  cursor: pointer;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  line-height: 1.4;
  width: 100%;
  box-sizing: border-box;
}

.top-sidebar-header.active {
  color: #007bff;
}

.top-sidebar-header.active .header-message {
  text-decoration: underline;
}

.header-row {
  display: flex;
  align-items: center;
}

.header-message {
  color: #23254C;
  font-size: 15px;
  font-weight: 500;
  width: 100%;
  overflow-wrap: break-word;
  white-space: normal;
}

.bold-text {
  font-weight: bold;
  overflow-wrap: break-word;
  white-space: normal;
}

.warning-icon {
  display: inline-block;
  width: 0;
  height: 0;
  border-left: 8px solid transparent;
  border-right: 8px solid transparent;
  border-bottom: 14px solid #FFA500;
  border-bottom: 14px solid var(--warning-color, #FFA500);
  position: relative;
  margin-right: 6px;
}

.warning-icon::before {
  content: '!';
  position: absolute;
  top: 2px;
  left: 50%;
  transform: translateX(-50%);
  color: white;
  font-size: 10px;
  font-weight: bold;
}

.view-all-link {
  color: #007BFF;
  font-size: 12px;
  display: flex;
  align-items: center;
  margin-top: 4px;
}

.view-all-link::before {
  content: '←';
  margin-right: 4px;
}

.avatar {
  display: flex;
  align-items: center;
  gap: 20px;
  cursor: pointer;
  width: auto;
}

.avatar-circle {
  width: 32px;
  height: 32px;
  background: #E3F4FF;
  border-radius: 16px;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
}

.avatar-image {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.initials {
  font-family: -apple-system, BlinkMacSystemFont, sans-serif;
  font-size: 14px;
  color: #2D9BE4;
}

.user-name {
  font-family: -apple-system, BlinkMacSystemFont, sans-serif;
  font-size: 15px;
  color: #77788F;
  opacity: 0.7;
  width: auto;
  max-width: 300px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.dropdown-anchor {
  margin-left: 4px;
}

.top-sidebar-content {
  position: absolute;
  left: calc(-435px);
  top: 0;
  width: 400px;
  padding: 15px;
  background: rgba(255, 255, 255, 0.8);
  border: 2px solid #FFA500;
  border: 2px solid var(--warning-color, #FFA500);
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
  max-height: 400px;
  overflow-y: auto;
  z-index: 1001;
}

/* Mobile responsiveness */
@media (max-width: 768px) {
  .left-menu {
    justify-content: center;
  }
  .top-sidebar-panel {
    position: static;
    width: 100%;
    margin-bottom: 10px;
  }
  .top-sidebar-content {
    left: 0;
    width: 100%;
  }
}
.pending-actions-sidebar {
  position: absolute;
left: calc(70% + 15px);
left: var(--sidebar-left, calc(70% + 15px)); /* Aligns with Comments canvas inner left edge */
top: 20px;
width: calc((30% - 40px) * 0.6 - 10px);
width: var(--sidebar-width, calc((30% - 40px) * 0.6 - 10px));
z-index: 15;
align-self: flex-start; /* Prevent flex centering */
}
.sidebar-panel {
margin-bottom: 10px;
width: calc((30% - 40px) * 0.6 - 10px);
width: var(--sidebar-width, calc((30% - 40px) * 0.6 - 10px));
}
.sidebar-header {
padding: 10px;
background: rgba(224, 224, 224, 0.8);
cursor: pointer;
display: flex;
flex-direction: column;
align-items: flex-start;
line-height: 1.4;
width: 100%;
border: 2px solid #aaa;
border: 2px solid var(--header-border-color, #aaa);
box-sizing: border-box;
min-width: 100%; /* Ensure full width */
}
.warning-icon {
display: inline-block;
width: 0;
height: 0;
border-left: 8px solid transparent;
border-right: 8px solid transparent;
border-bottom: 14px solid #FFA500;
border-bottom: 14px solid var(--warning-color, #FFA500);
position: relative;
margin-right: 8px;
}
.warning-icon::before {
content: '!';
position: absolute;
top: 2px;
left: 50%;
transform: translateX(-50%);
color: white;
font-size: 10px;
font-weight: bold;
}
.header-message {
color: #23254C;
font-size: 15px;
white-space: nowrap; /* Prevent wrapping */
}
.view-all-link {
color: #007BFF;
font-size: 12px;
display: flex;
align-items: center;
margin-top: 4px;
}
.view-all-link::before {
content: '←';
margin-right: 4px;
}
.panel-title {
color: #23254C;
font-size: 16px;
font-weight: bold;
margin: 0 0 15px 0;
padding: 0;
text-align: left !important;
}
.title-delineator {
border-bottom: 1px solid #ddd;
margin-bottom: 15px;
width: 100%;
}
.checkins-list,
.invites-list,
.requests-list {
display: flex;
flex-direction: column;
margin-top: 0;
padding-top: 0;
align-items: flex-start;
}
.checkin-item,
.invite-item,
.request-item {
border-bottom: 1px solid #ddd;
margin-bottom: 15px;
padding-bottom: 15px;
}
.checkin-item:last-child,
.invite-item:last-child,
.request-item:last-child {
border-bottom: none;
margin-bottom: 0;
padding-bottom: 0;
}
.score-circle {
width: 30px;
height: 30px;
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
color: #fff;
font-size: 14px;
font-weight: bold;
}
.initiative-name {
font-size: 14px;
font-weight: bold;
color: #23254C;
}
.initiative-goal {
font-size: 12px;
color: #666;
}
.check-in-link {
color: #007BFF;
font-size: 14px;
cursor: pointer;
}
.check-in-link::after {
content: '→';
margin-left: 4px;
}
.check-in-lozenge {
display: inline-block;
padding: 5px 10px;
margin: 5px;
border-radius: 12px;
color: #fff;
cursor: pointer;
font-size: 14px;
}
/* Mobile responsiveness */
@media (max-width: 768px) {
.pending-actions-sidebar {
position: static;
width: 100%;
left: 0;
  }
.sidebar-panel {
width: 100%;
  }
}
.header-links {
  display: flex;
  justify-content: space-between;
  align-items: center;
  width: 100%;
  margin-top: 4px;
  white-space: nowrap;
}

.hide-link {
  color: #007BFF;
  font-size: 12px;
  display: flex;
  align-items: center;
  cursor: pointer;
  text-decoration: none;
}

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

.user-dropdown {
  position: absolute;
  top: 0px;
  right: 20px;
  width: 251px;
  background: #FFFFFF;
  border: 1px solid #9BA0A8;
  box-shadow: 6px 9px 29px 0 rgba(37,41,66,0.10);
  padding: 20px;
  z-index: 1010; /* Added to ensure dropdown is above modal overlays */
}

@media screen and (max-width: 600px) {
  .user-dropdown {
    right: 10px;
    width: 200px;
  }
}

@media screen and (max-width: 400px) {
  .user-dropdown {
    right: 5px;
    width: 180px;
    font-size: 14px;
  }
}

.user-info {
  display: flex;
  align-items: center;
  gap: 12px;
}

.avatar-large {
  width: 56px;
  height: 56px;
  background-image: radial-gradient(circle at 50% 50%, rgba(243,250,255,0.50) 0%, rgba(227,244,255,0.50) 50%);
  border-radius: 28px;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
}

.avatar-image {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.initials {
  font-family: -apple-system, BlinkMacSystemFont, sans-serif;
  font-size: 17px;
  color: #2D9BE4;
}

.user-details {
  display: flex;
  flex-direction: column;
}

.full-name {
  font-family: -apple-system, BlinkMacSystemFont, sans-serif;
  font-size: 18px;
  color: #23254C;
}

.role {
  font-family: -apple-system, BlinkMacSystemFont, sans-serif;
  font-size: 14px;
  color: #77788F;
}

.company {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-top: 16px;
  background: rgba(119,120,143,0.16);
  padding: 8px;
}

.company-logo {
  width: 34px;
  height: 34px;
  border: 1px solid rgba(119,120,143,0.15);
  border-radius: 17px;
}

.company span {
  font-family: -apple-system, BlinkMacSystemFont, sans-serif;
  font-size: 16px;
  color: #575872;
}

.menu-items {
  margin-top: 16px;
  text-align: left;
  padding-left: 0;
}

.menu-item {
  font-family: -apple-system, BlinkMacSystemFont, sans-serif;
  font-size: 16px;
  color: #575872;
  line-height: 25px;
  padding: 8px 0;
  cursor: pointer;
}

.menu-item.active {
  text-decoration: underline;
  -webkit-text-decoration-color: #007BFF;
          text-decoration-color: #007BFF;
}

/* New transition styles for smooth fade effect */
.company,
.menu-items {
  transition: opacity 0.2s ease-in-out;
}

.company[hidden],
.menu-items[hidden] {
  opacity: 0;
  pointer-events: none; /* Prevents interaction when hidden */
}
.profile-modal-overlay {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0.5);
  display: flex;
  justify-content: center;
  align-items: center;
  z-index: 2000; /* Increased to appear over top menu */
  margin-top: -100px;
}

.profile-modal {
  position: relative;
  background: #FFFFFF;
  box-shadow: 0 20px 40px 0 rgba(0,0,0,0.05);
  border-radius: 16px;
  padding: 30px;
  width: 725px;
  height: 575px;
  z-index: 2001; /* Increased to ensure modal content is above overlay */
  box-sizing: border-box;
  transform: translateX(200px) translateY(-50px);
}

/* Layer vars for maintainability */
:root {
  --layer-large-width: 96px;
  --layer-large-height: 178px;
  --layer-large-gradient: linear-gradient(218deg, rgba(63,219,245,0.10) 0%, rgba(12,128,210,0.10) 97%);
  --layer-medium-width: 70px;
  --layer-medium-height: 200px;
  --layer-small-width: 50px;
  --layer-small-height: 100px;
  --layer-color: #2D9BE4;
  --layer-opacity-medium: 0.2;
  --layer-opacity-small: 1;
}

/* Bottom left shape - Largest (lightest) */
.profile-modal::before {
  content: '';
  position: absolute;
  bottom: 0;
  left: 0;
  width: 96px;
  width: var(--layer-large-width);
  height: 178px;
  height: var(--layer-large-height);
  background-image: linear-gradient(218deg, rgba(63,219,245,0.10) 0%, rgba(12,128,210,0.10) 97%);
  background-image: var(--layer-large-gradient);
  opacity: 1;
  z-index: -4;
  -webkit-clip-path: path('M 0 178 H 96 C 80 120 48 60 0 0 Z');
          clip-path: path('M 0 178 H 96 C 80 120 48 60 0 0 Z');
}

/* Bottom left shape - Middle (darker) */
.profile-modal-left-layer1::before {
  content: '';
  position: absolute;
  bottom: 0;
  left: 0;
  width: 70px;
  width: var(--layer-medium-width);
  height: 200px;
  height: var(--layer-medium-height);
  background: #2D9BE4;
  background: var(--layer-color);
  opacity: 0.2;
  opacity: var(--layer-opacity-medium);
  z-index: -4;
  -webkit-clip-path: path('M 0 200 H 70 C 60 140 35 70 0 0 Z');
          clip-path: path('M 0 200 H 70 C 60 140 35 70 0 0 Z');
}

/* Bottom left shape - Smallest (darkest) */
.profile-modal-left-layer2::before {
  content: '';
  position: absolute;
  bottom: 0;
  left: 0;
  width: 50px;
  width: var(--layer-small-width);
  height: 100px;
  height: var(--layer-small-height);
  background: #2D9BE4;
  background: var(--layer-color);
  z-index: -4;
  -webkit-clip-path: path('M 0 100 H 50 C 40 70 20 30 0 0 Z');
          clip-path: path('M 0 100 H 50 C 40 70 20 30 0 0 Z');
}

/* Top right shape - Largest (lightest) */
.profile-modal::after {
  content: '';
  position: absolute;
  top: 0;
  right: 0;
  width: 96px;
  width: var(--layer-large-width);
  height: 178px;
  height: var(--layer-large-height);
  background-image: linear-gradient(218deg, rgba(63,219,245,0.10) 0%, rgba(12,128,210,0.10) 97%);
  background-image: var(--layer-large-gradient);
  opacity: 1;
  z-index: 3;
  -webkit-clip-path: path('M 96 0 H 0 C 16 58 48 118 96 178 Z');
          clip-path: path('M 96 0 H 0 C 16 58 48 118 96 178 Z');
}

/* Top right shape - Middle (darker) */
.profile-modal-right-layer1 {
  position: absolute;
  top: 0;
  right: 0;
  width: 70px;
  width: var(--layer-medium-width);
  height: 200px;
  height: var(--layer-medium-height);
  z-index: 4;
}

.profile-modal-right-layer1::after {
  content: '';
  position: absolute;
  top: 0;
  right: 0;
  width: 70px;
  width: var(--layer-medium-width);
  height: 200px;
  height: var(--layer-medium-height);
  background: #2D9BE4;
  background: var(--layer-color);
  opacity: 0.2;
  opacity: var(--layer-opacity-medium);
  z-index: 4;
  -webkit-clip-path: path('M 70 0 H 0 C 10 60 35 130 70 200 Z');
          clip-path: path('M 70 0 H 0 C 10 60 35 130 70 200 Z');
}

/* Top right shape - Smallest (darkest) */
.profile-modal-right-layer2 {
  position: absolute;
  top: 0;
  right: 0;
  width: 50px;
  width: var(--layer-small-width);
  height: 100px;
  height: var(--layer-small-height);
  z-index: 5;
}

.profile-modal-right-layer2::after {
  content: '';
  position: absolute;
  top: 0;
  right: 0;
  width: 50px;
  width: var(--layer-small-width);
  height: 100px;
  height: var(--layer-small-height);
  background: #2D9BE4;
  background: var(--layer-color);
  z-index: 5;
  -webkit-clip-path: path('M 50 0 H 0 C 10 30 30 70 50 100 Z');
          clip-path: path('M 50 0 H 0 C 10 30 30 70 50 100 Z');
}

.profile-modal h2 {
  font-family: -apple-system, BlinkMacSystemFont, sans-serif;
  font-size: 18px;
  color: #23254C;
  margin-bottom: 20px;
  text-align: center;
}

.profile-modal-content {
  display: grid;
  grid-template-areas:
    "top-left top-right"
    "bottom-left bottom-right";
  grid-template-columns: 1fr 1fr;
  grid-template-rows: auto auto;
  grid-gap: 15px;
  gap: 15px;
  width: 100%;
  min-width: 680px;
  box-sizing: border-box;
  background: #FFFFFF;
  z-index: 6;
  pointer-events: auto;
}

.profile-modal-top-left-container {
  grid-area: top-left;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  z-index: 6;
  pointer-events: auto;
}

.profile-modal-top-right-container {
  grid-area: top-right;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  z-index: 6;
  background: transparent;
  pointer-events: auto;
}

.profile-modal-bottom-left-container {
  grid-area: bottom-left;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  align-self: stretch;
  z-index: 6;
  pointer-events: auto;
}

.profile-modal-bottom-right-container {
  grid-area: bottom-right;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  align-self: stretch;
  z-index: 6;
  pointer-events: auto;
}

.profile-modal-avatar-preview {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
}

.profile-modal-field {
  display: flex;
  flex-direction: column;
  gap: 4px;
  width: 100%;
}

.profile-modal-avatar-preview label,
.profile-modal-field label {
  font-family: -apple-system, BlinkMacSystemFont, sans-serif;
  font-size: 17px;
  color: #77788F;
  line-height: 20px;
  text-align: center;
}

.profile-modal-field input,
.profile-modal-field select,
.profile-modal-field span {
  width: 315px;
  height: 36px;
  padding: 0 8px;
  font-family: -apple-system, BlinkMacSystemFont, sans-serif;
  font-size: 17px;
  color: #77788F;
  border: 1px solid rgba(119,120,143,0.16);
  border-radius: 4px;
  box-sizing: border-box;
  line-height: 36px;
  text-align: left;
  background: #FFFFFF;
  vertical-align: middle;
  margin: 0;
}

.profile-modal-field.slack-id span.slack-not-connected {
  color: #8B0000; /* Dark red for "Not Connected" */
}

.profile-modal-field.slack-id span.slack-connected {
  color: #006400; /* Dark green for connected Slack ID */
}

.profile-modal-field.company {
  background: #FFFFFF;
}

.profile-modal-field.company label {
  background: none;
}

.profile-modal-field.email span,
.profile-modal-field.slack-id span {
  border: 1px solid rgba(119,120,143,0.16);
  text-align: left;
  display: block;
}

.profile-modal-field.timezone {
  gap: 4px;
  margin: 0;
}

.profile-modal-field.timezone select {
  margin: 0;
}

.profile-modal-field.slack-id {
  margin: 0;
}

.profile-modal-avatar-preview img,
.profile-modal-avatar-placeholder {
  width: 112px;
  height: 112px;
  border-radius: 56px;
  object-fit: cover;
  margin: 0 auto;
}

.profile-modal-avatar-placeholder {
  background: #E3F4FF;
  display: flex;
  align-items: center;
  justify-content: center;
}

.profile-modal-avatar-placeholder span {
  font-family: -apple-system, BlinkMacSystemFont, sans-serif;
  font-size: 40px;
  color: #2D9BE4;
}

.profile-modal-avatar-button {
  font-family: -apple-system, BlinkMacSystemFont, sans-serif;
  font-size: 14px;
  padding: 6px 12px;
  border: 1px solid #2D9BE4;
  border-radius: 4px;
  background: #FFFFFF;
  color: #2D9BE4;
  cursor: pointer;
  margin-top: 4px;
}

.profile-modal-avatar-input {
  display: none;
}

.profile-modal-buttons {
  display: flex;
  justify-content: center;
  margin-top: 40px;
}

.profile-modal-buttons button {
  padding: 10px 20px;
  margin: 0 5px;
  font-family: -apple-system, BlinkMacSystemFont, sans-serif;
  font-size: 14px;
  border: none;
  border-radius: 19px;
  cursor: pointer;
}

.profile-modal-buttons button:nth-child(1) {
  background: #4A154B; /* Slack logo purple for Link Slack ID */
  color: #FFFFFF;
}

.profile-modal-buttons button:nth-child(2) {
  background: #2D9BE4; /* Blue for Reset Password */
  color: #FFFFFF;
}

.profile-modal-buttons button:nth-child(3) {
  background: #2D9BE4;
  color: #FFFFFF;
}

.profile-modal-buttons button:nth-child(4) {
  background: #F5F5F5;
  color: #77788F;
}

.profile-modal-confirm-buttons {
  margin-top: 10px;
  display: flex;
  justify-content: center;
  gap: 10px;
}

.profile-modal-confirm-buttons button {
  padding: 8px 16px;
  font-family: -apple-system, BlinkMacSystemFont, sans-serif;
  font-size: 14px;
  border: none;
  border-radius: 4px;
  cursor: pointer;
}

.profile-modal-confirm-buttons button:first-child {
  background: #2D9BE4;
  color: #FFFFFF;
}

.profile-modal-confirm-buttons button:last-child {
  background: #F5F5F5;
  color: #77788F;
}

/* Remove old styles */
.left-column,
.right-column,
.profile-modal-field.firstname,
.profile-modal-field.secondname,
.profile-modal-field.email,
.profile-modal-field.timezone,
.profile-modal-field.company,
.profile-modal-field.slack-id {
  margin: 0;
  padding: 0;
}

/* Remove unused grid classes */
.grid-profile-pic,
.grid-firstname,
.grid-secondname,
.grid-email,
.grid-company,
.grid-timezone,
.grid-role,
.grid-secondname-spacer {
  display: none;
}

/* Mobile responsiveness */
@media (max-width: 768px) {
  .profile-modal {
    width: 90%;
    min-width: auto;
    height: auto;
    padding: 20px;
    transform: none;
  }
  .profile-modal-content {
    grid-template-columns: 1fr;
    grid-template-areas:
      "top-left"
      "top-right"
      "bottom-left"
      "bottom-right";
    min-width: auto;
  }
  .profile-modal-field input,
  .profile-modal-field select,
  .profile-modal-field span {
    width: 100%;
  }
}
.slack-modal-message {
  position: fixed;
  top: 0;
  left: 50px; /* Shift 50px to the right */
  width: calc(100% - 50px);
  height: 100%;
  background: rgba(0, 0, 0, 0.5);
  display: flex;
  justify-content: center;
  align-items: flex-start;
  z-index: 3000;
  pointer-events: auto;
}

.slack-modal {
  position: relative;
  background: #FFFFFF;
  box-shadow: 0 20px 40px 0 rgba(0,0,0,0.05);
  border-radius: 16px;
  padding: 20px;
  width: 550px; /* Increased to accommodate side-by-side labels */
  min-height: 300px;
  max-height: 90vh;
  overflow-y: auto;
  z-index: 3001;
  pointer-events: auto;
  border: none;
  outline: none;
  margin-top: 156px;
  box-sizing: border-box;
}

.slack-modal::before {
  content: '';
  position: absolute;
  bottom: 0;
  left: 0;
  width: 96px;
  height: 178px;
  background-image: linear-gradient(218deg, rgba(63,219,245,0.10) 0%, rgba(12,128,210,0.10) 97%);
  opacity: 1;
  z-index: 0;
  -webkit-clip-path: path('M 0 178 H 96 C 80 120 48 60 0 0 Z');
          clip-path: path('M 0 178 H 96 C 80 120 48 60 0 0 Z');
}

.slack-modal-left-layer1::before {
  content: '';
  position: absolute;
  bottom: 0;
  left: 0;
  width: 70px;
  height: 200px;
  background: #2D9BE4;
  opacity: 0.2;
  z-index: 1;
  -webkit-clip-path: path('M 0 200 H 70 C 60 140 35 70 0 0 Z');
          clip-path: path('M 0 200 H 70 C 60 140 35 70 0 0 Z');
}

.slack-modal-left-layer2::before {
  content: '';
  position: absolute;
  bottom: 0;
  left: 0;
  width: 50px;
  height: 100px;
  background: #2D9BE4;
  z-index: 2;
  -webkit-clip-path: path('M 0 100 H 50 C 40 70 20 30 0 0 Z');
          clip-path: path('M 0 100 H 50 C 40 70 20 30 0 0 Z');
}

.slack-modal::after {
  content: '';
  position: absolute;
  top: 0;
  right: 0;
  width: 96px;
  height: 178px;
  background-image: linear-gradient(218deg, rgba(63,219,245,0.10) 0%, rgba(12,128,210,0.10) 97%);
  opacity: 1;
  z-index: 0;
  -webkit-clip-path: path('M 96 0 H 0 C 16 58 48 118 96 178 Z');
          clip-path: path('M 96 0 H 0 C 16 58 48 118 96 178 Z');
}

.slack-modal-right-layer1::before {
  content: '';
  position: absolute;
  top: 0;
  right: 0;
  width: 70px;
  height: 200px;
  background: #2D9BE4;
  opacity: 0.2;
  z-index: 1;
  -webkit-clip-path: path('M 70 0 H 0 C 10 60 35 130 70 200 Z');
          clip-path: path('M 70 0 H 0 C 10 60 35 130 70 200 Z');
}

.slack-modal-right-layer2::before {
  content: '';
  position: absolute;
  top: 0;
  right: 0;
  width: 50px;
  height: 100px;
  background: #2D9BE4;
  z-index: 2;
  -webkit-clip-path: path('M 50 0 H 0 C 10 30 30 70 50 100 Z');
          clip-path: path('M 50 0 H 0 C 10 30 30 70 50 100 Z');
}

.slack-modal-content {
  display: flex;
  flex-direction: column;
  align-items: center;
  position: relative;
  z-index: 3;
}

h2 {
  font-family: -apple-system, BlinkMacSystemFont, sans-serif;
  font-size: 18px;
  color: #23254C;
  margin-bottom: 20px;
  text-align: center;
}

.slack-workspace-label,
.slack-account-label {
  font-family: -apple-system, BlinkMacSystemFont, sans-serif;
  font-size: 17px;
  font-weight: bold; /* Bold labels */
  color: #000000;
  width: 180px;
  text-align: right; /* Right-justify text */
  justify-content: flex-end; /* Right-justify within container */
  margin-right: 5px; /* 5px buffer to fields */
  margin-bottom: 10px; /* 5px lower buffer */
  display: flex;
  align-items: center; /* Center vertically */
}

.slack-field-row {
  display: flex;
  align-items: center;
  width: 100%;
  max-width: 450px;
  margin: 5px 0;
}

.slack-workspace-value {
  width: 250px;
  padding: 8px;
  font-family: -apple-system, BlinkMacSystemFont, sans-serif;
  font-size: 17px;
  color: #77788F;
  border: 1px solid rgba(119,120,143,0.16);
  border-radius: 4px;
  box-sizing: border-box;
  text-align: left; /* Left-justify content */
}

.slack-account-field {
  display: flex;
  flex-direction: column;
  align-items: center;
  width: 100%;
  margin: 30px 0 10px; /* 10px downward shift */
}

.slack-account-field input {
  width: 250px;
  padding: 8px;
  font-family: -apple-system, BlinkMacSystemFont, sans-serif;
  font-size: 17px;
  border: 1px solid rgba(119,120,143,0.16);
  border-radius: 4px;
  box-sizing: border-box;
  text-align: left; /* Left-justify content */
}

.slack-account-field input.slack-not-connected {
  color: #77788F;
}

.slack-account-field input.slack-connected {
  color: #006400; /* Dark green for connected email */
}

.slack-modal-buttons {
  display: flex;
  justify-content: center;
  margin-top: 10px !important;
}

.slack-modal-buttons button {
  padding: 10px 20px;
  margin: 0 5px;
  font-family: -apple-system, BlinkMacSystemFont, sans-serif;
  font-size: 14px;
  border: none;
  border-radius: 19px;
  cursor: pointer;
}

.slack-modal-buttons button:first-child {
  background: #2D9BE4;
  color: #FFFFFF;
}

.slack-modal-buttons button.slack-disconnect-button {
  background: #F5F5F5; /* Grey, same as Cancel */
  color: #8B0000; /* Red text for Disconnect */
}

.slack-modal-buttons button:last-child {
  background: #F5F5F5;
  color: #77788F;
}
/* OrientationModal.css
 *
 * Styling mirrors the ConfirmModal pattern: rounded-rect white card with
 * two-layer blue corner flourishes (light gradient outer + accent inner)
 * in the bottom-left and top-right. Differences from ConfirmModal:
 *   - Wider (500px vs 400px) to fit the lede + bullet list comfortably.
 *   - Positioned higher (10vh vs 15vh) per product direction.
 *   - Left-aligned content (step title + bullets), not center-aligned —
 *     bullet lists don't read well centered.
 *   - Multi-step layout adds a "Welcome to Genchi" header, progress
 *     indicator, and a footer with Skip / Back / Next controls.
 *
 * Corner flourishes use clip-path for the fin shape, with a flat-tint
 * fallback for browsers without clip-path support (see @supports block).
 */

.orientation-modal-overlay {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: rgba(0, 0, 0, 0.5);
  display: flex;
  align-items: flex-start;
  justify-content: center;
  z-index: 2000;
  font-family: 'Helvetica-reg', sans-serif;
  padding-top: 10vh;
  padding-left: 20px;
  padding-right: 20px;
}

.orientation-modal-container {
  position: relative;
  background: white;
  border-radius: 12px;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.2);
  width: 100%;
  max-width: 500px;
  max-height: 80vh;
  display: flex;
  flex-direction: column;
  overflow: hidden; /* clip the corner shapes to the rounded rectangle */
}

/* Outer layer — bottom-left, lightest. Same shape & size as ConfirmModal. */
.orientation-modal-container::before {
  content: '';
  position: absolute;
  bottom: 0;
  left: 0;
  width: 60px;
  height: 110px;
  background-image: linear-gradient(218deg, rgba(63, 219, 245, 0.10) 0%, rgba(12, 128, 210, 0.10) 97%);
  z-index: 0;
  -webkit-clip-path: path('M 0 110 H 60 C 50 74 30 37 0 0 Z');
  clip-path: path('M 0 110 H 60 C 50 74 30 37 0 0 Z');
  pointer-events: none;
}

/* Outer layer — top-right, lightest. */
.orientation-modal-container::after {
  content: '';
  position: absolute;
  top: 0;
  right: 0;
  width: 60px;
  height: 110px;
  background-image: linear-gradient(218deg, rgba(63, 219, 245, 0.10) 0%, rgba(12, 128, 210, 0.10) 97%);
  z-index: 0;
  -webkit-clip-path: path('M 60 0 H 0 C 10 36 30 73 60 110 Z');
  clip-path: path('M 60 0 H 0 C 10 36 30 73 60 110 Z');
  pointer-events: none;
}

/* Inner accent — bottom-left, solid blue at 30% opacity. */
.orientation-modal-container .modal-corner-bl {
  position: absolute;
  bottom: 0;
  left: 0;
  width: 40px;
  height: 70px;
  pointer-events: none;
  z-index: 1;
}
.orientation-modal-container .modal-corner-bl::before {
  content: '';
  position: absolute;
  inset: 0;
  background: #2D9BE4;
  opacity: 0.3;
  -webkit-clip-path: path('M 0 70 H 40 C 33 48 20 24 0 0 Z');
  clip-path: path('M 0 70 H 40 C 33 48 20 24 0 0 Z');
}

/* Inner accent — top-right, solid blue at 30% opacity. */
.orientation-modal-container .modal-corner-tr {
  position: absolute;
  top: 0;
  right: 0;
  width: 40px;
  height: 70px;
  pointer-events: none;
  z-index: 1;
}
.orientation-modal-container .modal-corner-tr::after {
  content: '';
  position: absolute;
  inset: 0;
  background: #2D9BE4;
  opacity: 0.3;
  -webkit-clip-path: path('M 40 0 H 0 C 7 22 20 46 40 70 Z');
  clip-path: path('M 40 0 H 0 C 7 22 20 46 40 70 Z');
}

/* Real content sits above the flourishes. */
.orientation-modal-content,
.orientation-modal-footer {
  position: relative;
  z-index: 2;
}

/*
 * Close button sits above the corner flourishes. The top-right flourish
 * (.modal-corner-tr at z-index 1, plus its ::after pseudo-element) overlaps
 * the same screen real estate as this button, so we explicitly bump z-index
 * here to ensure clicks land on the button rather than appearing visually
 * behind the flourish.
 */
.orientation-modal-close {
  position: absolute;
  top: 12px;
  right: 18px;
  z-index: 3;
  background: none;
  border: none;
  font-size: 28px;
  line-height: 1;
  color: #77788f;
  cursor: pointer;
  padding: 4px 8px;
  border-radius: 4px;
}

.orientation-modal-close:hover {
  color: #23254c;
  background: rgba(45, 155, 228, 0.08);
}

.orientation-modal-content {
  padding: 30px 36px 16px;
  overflow-y: auto;
  flex: 1 1;
}

.orientation-modal-welcome {
  font-size: 1.6rem;
  font-weight: 300;
  color: #23254c;
  margin: 0 0 14px;
  padding-bottom: 14px;
  text-align: center;
  line-height: 1.2;
  border-bottom: 1px solid #e8e9f0;
}

.orientation-modal-progress {
  font-size: 0.75rem;
  color: #77788f;
  font-weight: 500;
  letter-spacing: 0.5px;
  text-transform: uppercase;
  text-align: center;
  margin: 0 0 20px;
}

.orientation-modal-step-title {
  font-size: 1.2rem;
  font-weight: 500;
  color: #23254c;
  margin: 0 0 10px;
  line-height: 1.3;
}

.orientation-modal-lede {
  font-size: 1rem;
  line-height: 1.5;
  color: #77788f;
  margin: 0 0 18px;
}

.orientation-modal-bullets {
  margin: 0 0 8px;
  padding-left: 22px;
  list-style: disc;
}

/*
 * Ordered variant — used on Step 1 where the bullets describe a literal
 * sequence of actions (install, then connect, then done). Same spacing
 * as the unordered list, just with numeric markers.
 */
.orientation-modal-bullets-ordered {
  list-style: decimal;
}

.orientation-modal-bullets li {
  font-size: 0.95rem;
  line-height: 1.55;
  color: #23254c;
  margin-bottom: 10px;
}

.orientation-modal-bullets li:last-child {
  margin-bottom: 0;
}

/*
 * Nested sub-bullets — used inside Step 3 to demote the Observer
 * description to a sub-item under Team Members. Slightly smaller margin
 * and lighter list-style than the parent bullets to read clearly as a
 * child item.
 */
.orientation-modal-subbullets {
  margin: 6px 0 0;
  padding-left: 22px;
  list-style: circle;
}

.orientation-modal-subbullets li {
  font-size: 0.9rem;
  line-height: 1.5;
  color: #23254c;
  margin-bottom: 0;
}

.orientation-modal-bullets strong {
  font-weight: 600;
  color: #23254c;
}

/*
 * Inline link styling for both <a> tags (e.g. Genchi Slack app) and
 * <button> tags (e.g. Admin → Integrations) inside bullets. The button
 * variant is used when the action is in-app navigation rather than a
 * URL change. Both styled to read as links so the visual cue is
 * consistent regardless of underlying element.
 */
.orientation-modal-link {
  color: #2D9BE4;
  font-weight: 600;
  text-decoration: underline;
  cursor: pointer;
  background: none;
  border: none;
  padding: 0;
  font: inherit;
}

.orientation-modal-link:hover {
  color: #1f8ad1;
}

.orientation-modal-footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 16px 28px 22px;
  gap: 12px;
}

.orientation-modal-footer-left {
  display: flex;
  align-items: center;
}

.orientation-modal-footer-right {
  display: flex;
  align-items: center;
  gap: 10px;
}

.orientation-modal-skip {
  background: none;
  border: none;
  color: #77788f;
  font-size: 0.85rem;
  cursor: pointer;
  padding: 6px 8px;
  text-decoration: underline;
  font-family: inherit;
}

.orientation-modal-skip:hover {
  color: #23254c;
}

/*
 * Button styles intentionally reuse the .button-confirm and .button-cancel
 * classes from ConfirmModal.css. Those classes are global (not scoped to
 * .modal-container in ConfirmModal.css) so they apply here automatically.
 * If they get scoped later, copy the rules over locally.
 *
 * Slight override: ConfirmModal's buttons use flex: 1 because they fill a
 * narrow centered row. Ours sit in a right-aligned footer beside Skip and
 * Back, so we cancel flex: 1 and use intrinsic widths.
 */
.orientation-modal-footer .button-confirm,
.orientation-modal-footer .button-cancel {
  flex: 0 0 auto;
  padding: 10px 22px;
}

/* Fallback: browsers without clip-path get a flat tint instead of fins. */
@supports not ((-webkit-clip-path: path('M 0 0 L 1 0 L 0 1 Z')) or (clip-path: path('M 0 0 L 1 0 L 0 1 Z'))) {
  .orientation-modal-container::before,
  .orientation-modal-container::after,
  .orientation-modal-container .modal-corner-bl::before,
  .orientation-modal-container .modal-corner-tr::after {
    background: #2D9BE4;
    opacity: 0.08;
    border-radius: 12px;
    clip-path: none;
    -webkit-clip-path: none;
  }
}

@media (max-width: 600px) {
  .orientation-modal-overlay {
    padding-top: 5vh;
    padding-left: 0;
    padding-right: 0;
    align-items: stretch;
  }
  .orientation-modal-container {
    max-width: 100%;
    max-height: 95vh;
    border-radius: 0;
  }
  .orientation-modal-content {
    padding: 24px 22px 12px;
  }
  .orientation-modal-footer {
    padding: 12px 22px 18px;
    flex-wrap: wrap;
  }
  .orientation-modal-footer-left,
  .orientation-modal-footer-right {
    width: 100%;
    justify-content: center;
  }
  /* Shrink flourishes on small screens. */
  .orientation-modal-container::before,
  .orientation-modal-container::after {
    width: 48px;
    height: 88px;
  }
  .orientation-modal-container .modal-corner-bl,
  .orientation-modal-container .modal-corner-tr {
    width: 32px;
    height: 56px;
  }
}

html, body, #root {
height: 100%;
margin: 0;
padding: 0;
background-color: #f8f9fa;
}
.success-container {
display: flex;
flex-direction: column;
align-items: center;
justify-content: flex-start;
min-height: 100vh;
padding: 20px;
background-color: #f8f9fa;
font-family: 'Helvetica-reg', sans-serif;
padding-top: 10vh;
}
.success-header {
text-align: center;
margin-bottom: 20px;
}
.success-logo {
height: 50px;
margin-bottom: 10px;
}
.success-header h1 {
font-size: 2rem;
font-weight: 300;
color: #23254c;
margin-bottom: 10px;
}
.success-header p {
font-size: 1rem;
color: #77788f;
margin: 0;
}
.success-form-container {
background: white;
padding: 40px;
border-radius: 12px;
box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1);
width: 100%;
max-width: 400px;
text-align: center;
}
.success-form-container p {
font-size: 1rem;
color: #77788f;
margin-bottom: 20px;
}
.login-link {
color: #2d9be4;
text-decoration: underline;
font-weight: bold;
font-size: 1.125rem;
cursor: pointer;
}
.login-link:hover {
text-decoration: none;
}
@media (max-width: 768px) {
.success-form-container {
padding: 30px;
  }
}